feature: feature: 添加404页面

.eslintrc.js

@@ -52,7 +52,7 @@ module.exports = {
     'vue/multi-word-component-names': [
       'error',
       {
-        ignores: ['index'],
+        ignores: ['index', '404'],
       },
     ],
     '@typescript-eslint/no-unused-vars': [

src/components/Application/AppAccount.vue

@@ -15,7 +15,6 @@
   import { useRouter } from 'vue-router';
   const router = useRouter();
   const command = (value: string) => {
-    console.log(value);
     if (value === 'signOut') {
       localStorage.removeItem('userInfo');
       router.push('/login');

src/locales/en/modules/route.ts

@@ -24,6 +24,8 @@ const route = {
     system: 'System',
     power: 'Power',
     guide: 'GuidePage',
+    error: 'error',
+    error404: '404',
     thirdParty: 'Third party',
     nested: 'Nested Route',
     nested1: 'Route1',

src/locales/zh-ch/modules/route.ts

@@ -24,6 +24,8 @@ const route = {
     system: '系统',
     power: '权限',
     guide: '引导页',
+    error: 'error',
+    error404: '404',
     thirdParty: '第三方',
     nested: '嵌套路由',
     nested1: '路由1',

src/router/modules/otherRoute/otherRoute.ts

@@ -238,6 +238,22 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
       },
     ],
   },
+  {
+    path: '/error',
+    component: Layout,
+    redirect: '/error/404',
+    name: 'error',
+    alwaysShow: true,
+    meta: { title: 'route.pathName.error', icon: 'iEL-remove-filled' },
+    children: [
+      {
+        path: '404',
+        name: '404',
+        component: () => import('@/views/error/404.vue'),
+        meta: { title: t('route.pathName.error404') },
+      },
+    ],
+  },
   {
     path: '/external-link',
     component: Layout,

src/router/utils.ts

@@ -5,7 +5,7 @@ import { getRouteApi, RouteDataItemType } from '@/server/route';
 import { router } from './index';
 import { AppRouteRecordRaw } from '#/route';
 
-const whiteList = ['login'];
+const whiteList = ['login', 'error'];
 
 // 初始化路由
 export const initAsyncRoute = async (power: string) => {
@@ -44,6 +44,7 @@ const handleRouteList = (routerList: any[], dataRouter: RouteDataItemType[]) =>
       // 这里需要重置不在接口返回的路由，否则输入地址还是可以打开页面
       const white = whiteList.indexOf(i.name);
       if (white === -1) router.removeRoute(i.name as RouteRecordName);
+      else newRouteList.push(i);
     }
   });
   return newRouteList;

src/utils/plugin/element.ts

@@ -80,10 +80,17 @@ const components = [
 ];
 
 // https://element-plus.org/zh-CN/component/icon.html
-import { HomeFilled, Avatar, Operation, Grid, Setting } from '@element-plus/icons-vue';
+import {
+  HomeFilled,
+  Avatar,
+  Operation,
+  Grid,
+  Setting,
+  RemoveFilled,
+} from '@element-plus/icons-vue';
 
 // Icon
-export const iconComponents = [HomeFilled, Avatar, Operation, Grid, Setting];
+export const iconComponents = [HomeFilled, Avatar, Operation, Grid, Setting, RemoveFilled];
 
 export function useElementPlus(app: App) {
   // 注册组件

src/views/error/404.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404" />
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404" />
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info"
+          >All rights reserved
+          <a style="color: #20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+        </div>
+        <div class="bullshit__headline">The webmaster said that you can not enter this page...</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>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<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 {
+        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;
+        }
+        @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;
+          }
+        }
+      }
+    }
+    .bullshit {
+      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: grey;
+        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: #ffffff;
+        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;
+      }
+      @keyframes slideUp {
+        0% {
+          transform: translateY(60px);
+          opacity: 0;
+        }
+        100% {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+  }
+</style>