Add Error Page

web/src/router/routes/index.js

@@ -40,25 +40,53 @@ export const basicRoutes = [
     meta: { order: 99 },
   },
   {
-    name: '403',
-    path: '/403',
-    component: () => import('@/views/error-page/403.vue'),
-    isHidden: true,
-  },
-  {
-    name: '404',
-    path: '/404',
-    component: () => import('@/views/error-page/404.vue'),
-    isHidden: true,
-  },
-  {
-    name: 'Login',
-    path: '/login',
-    component: () => import('@/views/login/index.vue'),
-    isHidden: true,
+    name: 'ErrorPage',
+    path: '/error-page',
+    component: Layout,
+    redirect: '/error-page/404',
     meta: {
-      title: '登录页',
+      title: '错误页',
+      icon: 'mdi:alert-circle-outline',
+      order: 99,
     },
+    children: [
+      {
+        name: 'ERROR-401',
+        path: '401',
+        component: () => import('@/views/error-page/401.vue'),
+        meta: {
+          title: '401',
+          icon: 'material-symbols:authenticator',
+        },
+      },
+      {
+        name: 'ERROR-403',
+        path: '403',
+        component: () => import('@/views/error-page/403.vue'),
+        meta: {
+          title: '403',
+          icon: 'solar:forbidden-circle-line-duotone',
+        },
+      },
+      {
+        name: 'ERROR-404',
+        path: '404',
+        component: () => import('@/views/error-page/404.vue'),
+        meta: {
+          title: '404',
+          icon: 'tabler:error-404',
+        },
+      },
+      {
+        name: 'ERROR-500',
+        path: '500',
+        component: () => import('@/views/error-page/500.vue'),
+        meta: {
+          title: '500',
+          icon: 'clarity:rack-server-outline-alerted',
+        },
+      },
+    ],
   },
 ]
 

web/src/views/error-page/401.vue

@@ -0,0 +1,16 @@
+<template>
+  <AppPage>
+    <n-result m-auto status="401">
+      <template #icon>
+        <icon-custom-unauthorized text-400px text-primary></icon-custom-unauthorized>
+      </template>
+      <template #footer>
+        <n-button type="primary" @click="replace('/')">返回首页</n-button>
+      </template>
+    </n-result>
+  </AppPage>
+</template>
+
+<script setup>
+const { replace } = useRouter()
+</script>

web/src/views/error-page/403.vue

@@ -1,6 +1,6 @@
 <template>
   <AppPage>
-    <n-result m-auto status="403" description="抱歉，您无权访问该页面">
+    <n-result m-auto status="403">
       <template #icon>
         <icon-custom-forbidden text-400px text-primary></icon-custom-forbidden>
       </template>

web/src/views/error-page/404.vue

@@ -1,6 +1,6 @@
 <template>
   <AppPage>
-    <n-result m-auto status="404" description="抱歉，您访问的页面不存在。">
+    <n-result m-auto status="404">
       <template #icon>
         <icon-custom-not-found text-400px text-primary></icon-custom-not-found>
       </template>

web/src/views/error-page/500.vue

@@ -0,0 +1,16 @@
+<template>
+  <AppPage>
+    <n-result m-auto status="500">
+      <template #icon>
+        <icon-custom-server-error text-400px text-primary></icon-custom-server-error>
+      </template>
+      <template #footer>
+        <n-button type="primary" @click="replace('/')">返回首页</n-button>
+      </template>
+    </n-result>
+  </AppPage>
+</template>
+
+<script setup>
+const { replace } = useRouter()
+</script>

web/src/views/error-page/route.js

@@ -1,24 +0,0 @@
-const Layout = () => import('@/layout/index.vue')
-
-export default {
-  name: 'ErrorPage',
-  path: '/error-page',
-  component: Layout,
-  redirect: '/error-page/404',
-  meta: {
-    title: '错误页',
-    icon: 'mdi:alert-circle-outline',
-    order: 99,
-  },
-  children: [
-    {
-      name: 'ERROR-404',
-      path: '404',
-      component: () => import('./404.vue'),
-      meta: {
-        title: '404',
-        icon: 'tabler:error-404',
-      },
-    },
-  ],
-}