feat(projects): add custom route exception

build/plugins/router.ts

@@ -8,6 +8,9 @@ export function setupElegantRouter() {
       base: 'src/layouts/base-layout/index.vue',
       blank: 'src/layouts/blank-layout/index.vue'
     },
+    customRoutes: {
+      names: ['exception_403', 'exception_404', 'exception_500']
+    },
     routePathTransformer(routeName, routePath) {
       const key = routeName as RouteKey;
 

package.json

@@ -60,7 +60,7 @@
     "vue-router": "4.2.5"
   },
   "devDependencies": {
-    "@elegant-router/vue": "0.3.2",
+    "@elegant-router/vue": "0.3.4",
     "@iconify/json": "2.2.170",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",

pnpm-lock.yaml

@@ -61,8 +61,8 @@ importers:
         version: 4.2.5(vue@3.4.15)
     devDependencies:
       '@elegant-router/vue':
-        specifier: 0.3.2
-        version: 0.3.2
+        specifier: 0.3.4
+        version: 0.3.4
       '@iconify/json':
         specifier: 2.2.170
         version: 2.2.170
@@ -835,8 +835,8 @@ packages:
       - '@algolia/client-search'
     dev: true
 
-  /@elegant-router/core@0.3.2:
-    resolution: {integrity: sha512-JEBnk3WpknXrtVtKhzkY/qbN+OkwuDhEJbxC0ciP/YIHB/yZ3nQ0bLEtJgbFRIiq+eJRQVZThp+oB3mPcSmO+w==}
+  /@elegant-router/core@0.3.4:
+    resolution: {integrity: sha512-kSiYz0SZF3kI14FYng8j71sa+gVw/Q9RX4eJ2ap8i0cEFxfQBJ9vtXOcIcPfVtCbpEYJZFHoYUb3/zpI/XOSRA==}
     dependencies:
       chokidar: 3.5.3
       consola: 3.2.3
@@ -845,17 +845,17 @@ packages:
       micromatch: 4.0.5
     dev: true
 
-  /@elegant-router/vue@0.3.2:
-    resolution: {integrity: sha512-F0RsEiFM7eb1MvTjxx1Ppr+MDo/Al2oP6YJxsTh/A80BY9l7BUz98J/Ev3t/gOVMtksSRLkolMUfQ81CEdwDTQ==}
+  /@elegant-router/vue@0.3.4:
+    resolution: {integrity: sha512-IKKLg1/m8tXZZwrZs7rx1MOKnLxQpGqIA5d1QGmIl5E0bcxA08Avi4AK75fZp1I1QZx7ku9vu7uewpnpXaf4wg==}
     dependencies:
-      '@elegant-router/core': 0.3.2
+      '@elegant-router/core': 0.3.4
       consola: 3.2.3
       kolorist: 1.8.0
       magic-string: 0.30.5
-      magicast: 0.3.2
-      prettier: 3.1.0
+      magicast: 0.3.3
+      prettier: 3.2.2
       recast: 0.23.4
-      unplugin: 1.5.1
+      unplugin: 1.6.0
     dev: true
 
   /@emotion/hash@0.8.0:
@@ -5546,8 +5546,8 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /magicast@0.3.2:
-    resolution: {integrity: sha512-Fjwkl6a0syt9TFN0JSYpOybxiMCkYNEeOTnOTNRbjphirLakznZXAqrXgj/7GG3D1dvETONNwrBfinvAbpunDg==}
+  /magicast@0.3.3:
+    resolution: {integrity: sha512-ZbrP1Qxnpoes8sz47AM0z08U+jW6TyRgZzcWy3Ma3vDhJttwMwAFDMMQFobwdBxByBD46JYmxRzeF7w2+wJEuw==}
     dependencies:
       '@babel/parser': 7.23.6
       '@babel/types': 7.23.6
@@ -6884,12 +6884,6 @@ packages:
       prettier: 3.2.2
     dev: true
 
-  /prettier@3.1.0:
-    resolution: {integrity: sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dev: true
-
   /prettier@3.2.2:
     resolution: {integrity: sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==}
     engines: {node: '>=14'}
@@ -8263,15 +8257,6 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin@1.5.1:
-    resolution: {integrity: sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==}
-    dependencies:
-      acorn: 8.11.3
-      chokidar: 3.5.3
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.6.1
-    dev: true
-
   /unplugin@1.6.0:
     resolution: {integrity: sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==}
     dependencies:

src/locales/langs/en-us.ts

@@ -121,7 +121,11 @@ const local: App.I18n.Schema = {
     'multi-menu_first_child': 'Menu One Child',
     'multi-menu_second': 'Menu Two',
     'multi-menu_second_child': 'Menu Two Child',
-    'multi-menu_second_child_home': 'Menu Two Child Home'
+    'multi-menu_second_child_home': 'Menu Two Child Home',
+    exception: 'Exception',
+    exception_403: '403',
+    exception_404: '404',
+    exception_500: '500'
   },
   page: {
     login: {

src/locales/langs/zh-cn.ts

@@ -121,7 +121,11 @@ const local: App.I18n.Schema = {
     'multi-menu_first_child': '菜单一子菜单',
     'multi-menu_second': '菜单二',
     'multi-menu_second_child': '菜单二子菜单',
-    'multi-menu_second_child_home': '菜单二子菜单首页'
+    'multi-menu_second_child_home': '菜单二子菜单首页',
+    exception: '异常页',
+    exception_403: '403',
+    exception_404: '404',
+    exception_500: '500'
   },
   page: {
     login: {

src/router/elegant/transform.ts

@@ -143,6 +143,10 @@ function transformElegantRouteToVueRoute(
 const routeMap: RouteMap = {
   "root": "/",
   "not-found": "/:pathMatch(.*)*",
+  "exception": "/exception",
+  "exception_403": "/exception/403",
+  "exception_404": "/exception/404",
+  "exception_500": "/exception/500",
   "403": "/403",
   "404": "/404",
   "500": "/500",

src/router/routes/index.ts

@@ -23,6 +23,49 @@ const customRoutes: CustomRoute[] = [
       title: 'not-found',
       constant: true
     }
+  },
+  {
+    name: 'exception',
+    path: '/exception',
+    component: 'layout.base',
+    meta: {
+      title: 'exception',
+      i18nKey: 'route.exception',
+      icon: 'ant-design:exception-outlined',
+      order: 7
+    },
+    children: [
+      {
+        name: 'exception_403',
+        path: '/exception/403',
+        component: 'view.403',
+        meta: {
+          title: 'exception_403',
+          i18nKey: 'route.exception_403',
+          icon: 'ic:baseline-block'
+        }
+      },
+      {
+        name: 'exception_404',
+        path: '/exception/404',
+        component: 'view.404',
+        meta: {
+          title: 'exception_404',
+          i18nKey: 'route.exception_404',
+          icon: 'ic:baseline-web-asset-off'
+        }
+      },
+      {
+        name: 'exception_500',
+        path: '/exception/500',
+        component: 'view.500',
+        meta: {
+          title: 'exception_500',
+          i18nKey: 'route.exception_500',
+          icon: 'ic:baseline-wifi-off'
+        }
+      }
+    ]
   }
 ];
 

src/typings/elegant-router.d.ts

@@ -17,6 +17,10 @@ declare module "@elegant-router/types" {
   export type RouteMap = {
     "root": "/";
     "not-found": "/:pathMatch(.*)*";
+    "exception": "/exception";
+    "exception_403": "/exception/403";
+    "exception_404": "/exception/404";
+    "exception_500": "/exception/500";
     "403": "/403";
     "404": "/404";
     "500": "/500";
@@ -54,6 +58,10 @@ declare module "@elegant-router/types" {
     RouteKey,
     | "root"
     | "not-found"
+    | "exception"
+    | "exception_403"
+    | "exception_404"
+    | "exception_500"
   >;
 
   /**
@@ -84,6 +92,7 @@ declare module "@elegant-router/types" {
     CustomRouteKey,
     | "root"
     | "not-found"
+    | "exception"
   >;
 
   /**
@@ -113,6 +122,9 @@ declare module "@elegant-router/types" {
     CustomRouteKey,
     | "root"
     | "not-found"
+    | "exception_403"
+    | "exception_404"
+    | "exception_500"
   >;
 
   /**
@@ -241,7 +253,7 @@ declare module "@elegant-router/types" {
           name: K;
           path: RouteMap[K];
           component: `layout.${RouteLayout}`;
-          children: (CustomCenterLevelRoute<GetChildRouteKey<K>> | CustomLastLevelRoute<K>)[];
+          children: (CustomCenterLevelRoute<GetChildRouteKey<K>> | CustomLastLevelRoute<GetChildRouteKey<K>>)[];
         }
       : never;