add: common page for http error code

Signed-off-by: Kaifuny <superbiger.github@gmail.com>

contact-frontend/packages/apps/web/src/router/index.ts

@@ -40,6 +40,26 @@ const routes: RouteRecordRaw[] = [
       ...settingRoutes,
       ...systemRoutes,
       ...enterpriseRoutes,
+      // {
+      //   path: '302',
+      //   name: ROUTE_NAME.PAGE_REDIRECT,
+      //   component: () => import('../views/common/Page302.vue'),
+      // },
+      {
+        path: '403',
+        name: ROUTE_NAME.PAGE_FORBIDDEN,
+        component: () => import('../views/common/Page403.vue'),
+      },
+      {
+        path: '404',
+        name: ROUTE_NAME.PAGE_NOT_FOUND,
+        component: () => import('../views/common/Page404.vue'),
+      },
+      {
+        path: '500',
+        name: ROUTE_NAME.PAGE_SERVER_ERROR,
+        component: () => import('../views/common/Page500.vue'),
+      },
     ],
   },
   ...authRoutes,

contact-frontend/packages/apps/web/src/views/common/Page302.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { NButton } from 'naive-ui'
+</script>
+<template>
+  <div class="flex justify-center items-center h-full">
+    <div class="h-1/2 flex flex-col items-center justify-center">
+      <span class="text-xl">即将离开，跳转至</span>
+      <n-button @click="() => $router.go(-1)">返回</n-button>
+    </div>
+  </div>
+</template>

contact-frontend/packages/apps/web/src/views/common/Page403.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { NButton } from 'naive-ui'
+import bg from '@cskefu/assets//img/bg-403.svg'
+</script>
+<template>
+  <div class="flex justify-center items-center h-full">
+    <div class="h-1/2 flex flex-col items-center justify-center">
+      <span class="text-xl">权限不足，请联系管理员</span>
+      <img :src="bg" alt="404" class="h-full" />
+      <n-button @click="() => $router.go(-1)">返回</n-button>
+    </div>
+  </div>
+</template>

contact-frontend/packages/apps/web/src/views/common/Page404.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { NButton } from 'naive-ui'
+import bg from '@cskefu/assets//img/bg-404.svg'
+</script>
+<template>
+  <div class="flex justify-center items-center h-full">
+    <div class="h-1/2 flex flex-col items-center justify-center">
+      <span class="text-xl">页面未找到</span>
+      <img :src="bg" alt="404" class="h-full" />
+      <n-button @click="() => $router.go(-1)">返回</n-button>
+    </div>
+  </div>
+</template>

contact-frontend/packages/apps/web/src/views/common/Page500.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { NButton } from 'naive-ui'
+import bg from '@cskefu/assets//img/bg-500.svg'
+</script>
+<template>
+  <div class="flex justify-center items-center h-full">
+    <div class="h-1/2 flex flex-col items-center justify-center">
+      <span class="text-xl">发生错误，请重试</span>
+      <img :src="bg" alt="404" class="h-full" />
+      <n-button @click="() => $router.go(-1)">返回</n-button>
+    </div>
+  </div>
+</template>

contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue

@@ -9,5 +9,8 @@ import { NTabs, NTab } from 'naive-ui'
       <n-tab name="template"> 模板 </n-tab>
       <n-tab name="setting"> 设置 </n-tab>
     </n-tabs>
+    <div>
+      <router-view></router-view>
+    </div>
   </div>
 </template>

contact-frontend/packages/modules/services/system/src/views/HomeView.vue

@@ -4,7 +4,7 @@ import { NCard, NGrid, NGi } from 'naive-ui'
 <template>
   <div class="p-4">
     <n-grid cols="5" :x-gap="12" :y-gap="8">
-      <n-gi>
+      <n-gi :span="3">
         <n-card title="小卡片" size="small"> 卡片内容 </n-card>
       </n-gi>
       <n-gi>