perf: 同步完整版代码

src/plugins/i18n/en/menus.ts

@@ -5,7 +5,8 @@ export default {
   hsBaseinfo: "Base Info",
   hserror: "Error Page",
   hsfourZeroFour: "404",
-  hsfourZeroOne: "401",
+  hsfourZeroOne: "403",
+  hsFive: "500",
   hsmenus: "MultiLevel Menu",
   hsmenu1: "Menu1",
   "hsmenu1-1": "Menu1-1",

src/plugins/i18n/zh-CN/menus.ts

@@ -5,7 +5,8 @@ export default {
   hsBaseinfo: "基础信息",
   hserror: "错误页面",
   hsfourZeroFour: "404",
-  hsfourZeroOne: "401",
+  hsfourZeroOne: "403",
+  hsFive: "500",
   hsmenus: "多级菜单",
   hsmenu1: "菜单1",
   "hsmenu1-1": "菜单1-1",

src/router/modules/error.ts

@@ -5,18 +5,18 @@ const errorRouter = {
   path: "/error",
   name: "error",
   component: Layout,
-  redirect: "/error/401",
+  redirect: "/error/403",
   meta: {
     icon: "position",
     title: $t("menus.hserror"),
     i18n: true,
-    rank: 7
+    rank: 9
   },
   children: [
     {
-      path: "/error/401",
-      name: "401",
-      component: () => import("/@/views/error/401.vue"),
+      path: "/error/403",
+      name: "403",
+      component: () => import("/@/views/error/403.vue"),
       meta: {
         title: $t("menus.hsfourZeroOne"),
         i18n: true
@@ -30,6 +30,15 @@ const errorRouter = {
         title: $t("menus.hsfourZeroFour"),
         i18n: true
       }
+    },
+    {
+      path: "/error/500",
+      name: "500",
+      component: () => import("/@/views/error/500.vue"),
+      meta: {
+        title: $t("menus.hsFive"),
+        i18n: true
+      }
     }
   ]
 };

src/views/error/401.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import imgs from "/@/assets/401.gif";
-import { ref } from "vue";
-
-const img = ref(`${imgs}?${new Date()}`);
-</script>
-
-<template>
-  <div class="errPage-container">
-    <el-row>
-      <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">Pure Admin</h1>
-        <h2>你没有权限去该页面</h2>
-      </el-col>
-      <el-col :span="12">
-        <img
-          :src="img"
-          width="313"
-          height="428"
-          alt="Girl has dropped her ice cream."
-        />
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.errPage-container {
-  width: 800px;
-  max-width: 100%;
-  margin: 100px auto;
-
-  .pan-back-btn {
-    background: #008489;
-    color: #fff;
-    border: none !important;
-  }
-
-  .pan-gif {
-    margin: 0 auto;
-    display: block;
-  }
-
-  .pan-img {
-    display: block;
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  .text-jumbo {
-    font-size: 60px;
-    font-weight: 700;
-    color: #484848;
-  }
-
-  .list-unstyled {
-    font-size: 14px;
-
-    li {
-      padding-bottom: 5px;
-    }
-
-    a {
-      color: #008489;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-</style>

src/views/error/403.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import noAccess from "/@/assets/status/403.svg?component";
+</script>
+
+<template>
+  <div class="flex justify-center items-center h-screen-sm">
+    <noAccess />
+    <div class="ml-12">
+      <p class="font-medium text-4xl mb-4">403</p>
+      <p class="mb-4 text-gray-500">抱歉，你无权访问该页面</p>
+      <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+    </div>
+  </div>
+</template>

src/views/error/404.vue

@@ -1,250 +1,14 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import four from "/@/assets/404.png";
-import four_cloud from "/@/assets/404_cloud.png";
-
-const message = computed(() => {
-  return "The webmaster said that you can not enter this page...";
-});
+import noExist from "/@/assets/status/404.svg?component";
 </script>
 
 <template>
-  <div class="wscn-http404-container">
-    <div class="wscn-http404">
-      <div class="pic-404">
-        <img class="pic-404__parent" :src="four" alt="404" />
-        <img class="pic-404__child left" :src="four_cloud" alt="404" />
-        <img class="pic-404__child mid" :src="four_cloud" alt="404" />
-        <img class="pic-404__child right" :src="four_cloud" alt="404" />
-      </div>
-      <div class="bullshit">
-        <div class="bullshit__oops">Pure Admin</div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">
-          Please check that the URL you entered is correct, or click the button
-          below to return to the homepage.
-        </div>
-        <a href="" class="bullshit__return-home">Back to home</a>
-      </div>
+  <div class="flex justify-center items-center h-screen-sm">
+    <noExist />
+    <div class="ml-12">
+      <p class="font-medium text-4xl mb-4">404</p>
+      <p class="mb-4 text-gray-500">抱歉，你访问的页面不存在</p>
+      <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.wscn-http404-container {
-  transform: translate(-50%, -50%);
-  position: absolute;
-  top: 40%;
-  left: 50%;
-}
-
-.wscn-http404 {
-  position: relative;
-  width: 1200px;
-  padding: 0 50px;
-  overflow: hidden;
-
-  .pic-404 {
-    position: relative;
-    float: left;
-    width: 600px;
-    overflow: hidden;
-
-    &__parent {
-      width: 100%;
-    }
-
-    &__child {
-      @keyframes cloudLeft {
-        0% {
-          top: 17px;
-          left: 220px;
-          opacity: 0;
-        }
-
-        20% {
-          top: 33px;
-          left: 188px;
-          opacity: 1;
-        }
-
-        80% {
-          top: 81px;
-          left: 92px;
-          opacity: 1;
-        }
-
-        100% {
-          top: 97px;
-          left: 60px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudMid {
-        0% {
-          top: 10px;
-          left: 420px;
-          opacity: 0;
-        }
-
-        20% {
-          top: 40px;
-          left: 360px;
-          opacity: 1;
-        }
-
-        70% {
-          top: 130px;
-          left: 180px;
-          opacity: 1;
-        }
-
-        100% {
-          top: 160px;
-          left: 120px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudRight {
-        0% {
-          top: 100px;
-          left: 500px;
-          opacity: 0;
-        }
-
-        20% {
-          top: 120px;
-          left: 460px;
-          opacity: 1;
-        }
-
-        80% {
-          top: 180px;
-          left: 340px;
-          opacity: 1;
-        }
-
-        100% {
-          top: 200px;
-          left: 300px;
-          opacity: 0;
-        }
-      }
-
-      position: absolute;
-
-      &.left {
-        width: 80px;
-        top: 17px;
-        left: 220px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-
-      &.mid {
-        width: 46px;
-        top: 10px;
-        left: 420px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
-      }
-
-      &.right {
-        width: 62px;
-        top: 100px;
-        left: 500px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-    }
-  }
-
-  .bullshit {
-    @keyframes slideUp {
-      0% {
-        transform: translateY(60px);
-        opacity: 0;
-      }
-
-      100% {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
-
-    position: relative;
-    float: left;
-    width: 300px;
-    padding: 30px 0;
-    overflow: hidden;
-
-    &__oops {
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 40px;
-      color: #1482f0;
-      opacity: 0;
-      margin-bottom: 20px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-    }
-
-    &__headline {
-      font-size: 20px;
-      line-height: 24px;
-      color: #222;
-      font-weight: bold;
-      opacity: 0;
-      margin-bottom: 10px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-    }
-
-    &__info {
-      font-size: 13px;
-      line-height: 21px;
-      color: grey;
-      opacity: 0;
-      margin-bottom: 30px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.2s;
-      animation-fill-mode: forwards;
-    }
-
-    &__return-home {
-      display: block;
-      float: left;
-      width: 110px;
-      height: 36px;
-      background: #1482f0;
-      border-radius: 100px;
-      text-align: center;
-      color: #fff;
-      opacity: 0;
-      font-size: 14px;
-      line-height: 36px;
-      cursor: pointer;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;
-    }
-  }
-}
-</style>

src/views/error/500.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import noServer from "/@/assets/status/500.svg?component";
+</script>
+
+<template>
+  <div class="flex justify-center items-center h-screen-sm">
+    <noServer />
+    <div class="ml-12">
+      <p class="font-medium text-4xl mb-4">403</p>
+      <p class="mb-4 text-gray-500">抱歉，服务器出错了</p>
+      <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+    </div>
+  </div>
+</template>