feat: 添加全屏403、404、500页面，全屏错误页面清晰且安全，提升用户体验 (#1226)

2025-10-10 12:14:50 +08:00 · 2025-09-18 10:05:14 +08:00 · 2025-09-18 10:05:14 +08:00 · faf24f300b
commit faf24f300b
parent 915e01c15c
8 changed files with 90 additions and 42 deletions
--- a/locales/en.yaml
+++ b/locales/en.yaml
@ -80,9 +80,9 @@ menus:
  pureMarkdown: Markdown
  pureEditor: Editor
  pureAbnormal: Abnormal Page
-  pureFourZeroFour: "404"
-  pureFourZeroOne: "403"
-  pureFive: "500"
+  purePageNotFound: "404"
+  pureAccessDenied: "403"
+  pureServerError: "500"
  pureComponents: Components
  pureDialog: Dialog
  pureDrawer: Drawer
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@ -80,9 +80,9 @@ menus:
  pureMarkdown: Markdown
  pureEditor: 编辑器
  pureAbnormal: 异常页面
-  pureFourZeroFour: "404"
-  pureFourZeroOne: "403"
-  pureFive: "500"
+  purePageNotFound: "404"
+  pureAccessDenied: "403"
+  pureServerError: "500"
  pureComponents: 组件
  pureDialog: 函数式弹框
  pureDrawer: 函数式抽屉
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@ -16,7 +16,7 @@ export default {
      name: "403",
      component: () => import("@/views/error/403.vue"),
      meta: {
-        title: $t("menus.pureFourZeroOne")
+        title: $t("menus.pureAccessDenied")
      }
    },
    {
@ -24,7 +24,7 @@ export default {
      name: "404",
      component: () => import("@/views/error/404.vue"),
      meta: {
-        title: $t("menus.pureFourZeroFour")
+        title: $t("menus.purePageNotFound")
      }
    },
    {
@ -32,7 +32,7 @@ export default {
      name: "500",
      component: () => import("@/views/error/500.vue"),
      meta: {
-        title: $t("menus.pureFive")
+        title: $t("menus.pureServerError")
      }
    }
  ]
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@ -12,13 +12,46 @@ export default [
      rank: 101
    }
  },
+  // 全屏403（无权访问）页面
+  {
+    path: "/access-denied",
+    name: "AccessDenied",
+    component: () => import("@/views/error/403.vue"),
+    meta: {
+      title: $t("menus.pureAccessDenied"),
+      showLink: false,
+      rank: 102
+    }
+  },
+  // 全屏404（页面不存在）页面
+  {
+    path: "/:pathMatch(.*)*",
+    name: "PageNotFound",
+    component: () => import("@/views/error/404.vue"),
+    meta: {
+      title: $t("menus.purePageNotFound"),
+      showLink: false,
+      rank: 103
+    }
+  },
+  // 全屏500（服务器出错）页面
+  {
+    path: "/server-error",
+    name: "ServerError",
+    component: () => import("@/views/error/500.vue"),
+    meta: {
+      title: $t("menus.pureServerError"),
+      showLink: false,
+      rank: 104
+    }
+  },
  {
    path: "/redirect",
    component: Layout,
    meta: {
      title: $t("status.pureLoad"),
      showLink: false,
-      rank: 102
+      rank: 105
    },
    children: [
      {
@ -28,6 +61,16 @@ export default [
      }
    ]
  },
+  {
+    path: "/account-settings",
+    name: "AccountSettings",
+    component: () => import("@/views/account-settings/index.vue"),
+    meta: {
+      title: $t("buttons.pureAccountSettings"),
+      showLink: false,
+      rank: 106
+    }
+  },
  // 下面是一个无layout菜单的例子（一个全屏空白页面），因为这种情况极少发生，所以只需要在前端配置即可（配置路径：src/router/modules/remaining.ts）
  {
    path: "/empty",
@ -36,17 +79,7 @@ export default [
    meta: {
      title: $t("menus.pureEmpty"),
      showLink: false,
-      rank: 103
-    }
-  },
-  {
-    path: "/account-settings",
-    name: "AccountSettings",
-    component: () => import("@/views/account-settings/index.vue"),
-    meta: {
-      title: $t("buttons.pureAccountSettings"),
-      showLink: false,
-      rank: 104
+      rank: 107
    }
  }
 ] satisfies Array<RouteConfigsTable>;
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@ -139,16 +139,6 @@ function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
  }
 }

-function addPathMatch() {
-  if (!router.hasRoute("pathMatch")) {
-    router.addRoute({
-      path: "/:pathMatch(.*)",
-      name: "pathMatch",
-      redirect: "/error/404"
-    });
-  }
-}
-
 /** 处理动态路由（后端返回的路由） */
 function handleAsyncRoutes(routeList) {
  if (routeList.length === 0) {
@ -188,7 +178,6 @@ function handleAsyncRoutes(routeList) {
      )
    ]);
  }
-  addPathMatch();
 }

 /** 初始化路由（`new Promise` 写法防止在异步请求中造成无限循环）*/
@ -397,7 +386,6 @@ export {
  filterTree,
  initRouter,
  getTopMenu,
-  addPathMatch,
  isOneOfArray,
  getHistoryMode,
  addAsyncRoutes,
--- a/src/views/error/403.vue
+++ b/src/views/error/403.vue
@ -10,9 +10,11 @@ const router = useRouter();
 </script>

 <template>
-  <div class="flex justify-center items-center h-[640px]">
+  <div
+    class="flex flex-col md:flex-row justify-center items-center min-h-full w-full p-4 md:p-0"
+  >
    <noAccess />
-    <div class="ml-12">
+    <div class="mt-8 md:ml-12 md:mt-0 text-center md:text-left">
      <p
        v-motion
        class="font-medium text-4xl mb-4! dark:text-white"
@ -32,7 +34,7 @@ const router = useRouter();
      </p>
      <p
        v-motion
-        class="mb-4! text-gray-500"
+        class="text-xl mb-4! text-gray-500"
        :initial="{
          opacity: 0,
          y: 100
@ -50,6 +52,7 @@ const router = useRouter();
      <el-button
        v-motion
        type="primary"
+        class="block mx-auto md:inline-block md:mx-0"
        :initial="{
          opacity: 0,
          y: 100
@ -68,3 +71,9 @@ const router = useRouter();
    </div>
  </div>
 </template>
+
+<style scoped>
+.main-content {
+  margin: 0 !important;
+}
+</style>
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@ -10,9 +10,11 @@ const router = useRouter();
 </script>

 <template>
-  <div class="flex justify-center items-center h-[640px]">
+  <div
+    class="flex flex-col md:flex-row justify-center items-center min-h-full w-full p-4 md:p-0"
+  >
    <noExist />
-    <div class="ml-12">
+    <div class="mt-8 md:ml-12 md:mt-0 text-center md:text-left">
      <p
        v-motion
        class="font-medium text-4xl mb-4! dark:text-white"
@ -32,7 +34,7 @@ const router = useRouter();
      </p>
      <p
        v-motion
-        class="mb-4! text-gray-500"
+        class="text-xl mb-4! text-gray-500"
        :initial="{
          opacity: 0,
          y: 100
@ -50,6 +52,7 @@ const router = useRouter();
      <el-button
        v-motion
        type="primary"
+        class="block mx-auto md:inline-block md:mx-0"
        :initial="{
          opacity: 0,
          y: 100
@ -68,3 +71,9 @@ const router = useRouter();
    </div>
  </div>
 </template>
+
+<style scoped>
+.main-content {
+  margin: 0 !important;
+}
+</style>
--- a/src/views/error/500.vue
+++ b/src/views/error/500.vue
@ -10,9 +10,11 @@ const router = useRouter();
 </script>

 <template>
-  <div class="flex justify-center items-center h-[640px]">
+  <div
+    class="flex flex-col md:flex-row justify-center items-center min-h-full w-full p-4 md:p-0"
+  >
    <noServer />
-    <div class="ml-12">
+    <div class="mt-8 md:ml-12 md:mt-0 text-center md:text-left">
      <p
        v-motion
        class="font-medium text-4xl mb-4! dark:text-white"
@ -32,7 +34,7 @@ const router = useRouter();
      </p>
      <p
        v-motion
-        class="mb-4! text-gray-500"
+        class="text-xl mb-4! text-gray-500"
        :initial="{
          opacity: 0,
          y: 100
@ -50,6 +52,7 @@ const router = useRouter();
      <el-button
        v-motion
        type="primary"
+        class="block mx-auto md:inline-block md:mx-0"
        :initial="{
          opacity: 0,
          y: 100
@ -68,3 +71,9 @@ const router = useRouter();
    </div>
  </div>
 </template>
+
+<style scoped>
+.main-content {
+  margin: 0 !important;
+}
+</style>