feat(projects): perf route meta and route i18n

build/plugins/router.ts

@@ -1,5 +1,6 @@
+import type { RouteMeta } from 'vue-router';
 import ElegantVueRouter from '@elegant-router/vue/vite';
-import type { RouteKey } from '@elegant-router/types';
+import type { AutoRouteKey } from '@elegant-router/types';
 
 export function setupElegantRouter() {
   return ElegantVueRouter({
@@ -8,7 +9,7 @@ export function setupElegantRouter() {
       blank: 'src/layouts/blank-layout/index.vue'
     },
     routePathTransformer(routeName, routePath) {
-      const key = routeName as RouteKey;
+      const key = routeName as AutoRouteKey;
 
       if (key === 'login') {
         const modules: UnionKey.LoginModule[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
@@ -19,6 +20,24 @@ export function setupElegantRouter() {
       }
 
       return routePath;
+    },
+    onRouteMetaGen(routeName) {
+      const key = routeName as AutoRouteKey;
+
+      const constantRoutes: AutoRouteKey[] = ['login', '403', '404', '500'];
+
+      const meta: Partial<RouteMeta> = {
+        title: key,
+        i18nKey: `route.${key}`
+      };
+
+      if (constantRoutes.includes(key)) {
+        meta.constant = true;
+      } else {
+        meta.requiresAuth = true;
+      }
+
+      return meta;
     }
   });
 }

src/locales/lang/en.ts

@@ -21,6 +21,23 @@ const local: App.I18n.Schema = {
     logout: 'Logout',
     logoutConfirm: 'Are you sure you want to log out?'
   },
+  route: {
+    login: 'Login',
+    403: 'No Permission',
+    404: 'Page Not Found',
+    500: 'Server Error',
+    home: 'Home',
+    'user-center': 'User Center',
+    user: 'User Management',
+    user_list: 'User List',
+    user_detail: 'User List Detail',
+    'multi-menu': 'Multi Menu',
+    'multi-menu_first': 'Menu One',
+    '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'
+  },
   page: {
     login: {
       common: {

src/locales/lang/zh-CN.ts

@@ -21,6 +21,23 @@ const local: App.I18n.Schema = {
     logout: '退出登录',
     logoutConfirm: '确认退出登录吗？'
   },
+  route: {
+    login: '登录',
+    403: '无权限',
+    404: '页面不存在',
+    500: '服务器错误',
+    home: '首页',
+    'user-center': '个人中心',
+    user: '用户管理',
+    user_list: '用户列表',
+    user_detail: '用户列表详情',
+    'multi-menu': '多级菜单',
+    'multi-menu_first': '菜单一',
+    'multi-menu_first_child': '菜单一子菜单',
+    'multi-menu_second': '菜单二',
+    'multi-menu_second_child': '菜单二子菜单',
+    'multi-menu_second_child_home': '菜单二子菜单首页'
+  },
   page: {
     login: {
       common: {

src/router/elegant/routes.ts

@@ -13,7 +13,9 @@ export const autoRoutes: ElegantRoute[] = [
         path: '',
         component: 'view.403',
         meta: {
-          title: '403'
+          title: '403',
+          i18nKey: 'route.403',
+          constant: true
         }
       }
     ]
@@ -27,7 +29,9 @@ export const autoRoutes: ElegantRoute[] = [
         path: '',
         component: 'view.404',
         meta: {
-          title: '404'
+          title: '404',
+          i18nKey: 'route.404',
+          constant: true
         }
       }
     ]
@@ -41,7 +45,9 @@ export const autoRoutes: ElegantRoute[] = [
         path: '',
         component: 'view.500',
         meta: {
-          title: '500'
+          title: '500',
+          i18nKey: 'route.500',
+          constant: true
         }
       }
     ]
@@ -56,22 +62,24 @@ export const autoRoutes: ElegantRoute[] = [
         component: 'view.home',
         meta: {
           title: 'home',
+          i18nKey: 'route.home',
           requiresAuth: true
         }
       }
     ]
   },
   {
     path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',
-    component: 'layout.blank',
+    component: 'layout.base',
     children: [
       {
         name: 'login',
         path: '',
         component: 'view.login',
-        props: true,
         meta: {
-          title: 'login'
+          title: 'login',
+          i18nKey: 'route.login',
+          constant: true
         }
       }
     ]
@@ -85,6 +93,7 @@ export const autoRoutes: ElegantRoute[] = [
     },
     meta: {
       title: 'multi-menu',
+      i18nKey: 'route.multi-menu',
       requiresAuth: true
     },
     children: [
@@ -95,15 +104,19 @@ export const autoRoutes: ElegantRoute[] = [
           name: 'multi-menu_first_child'
         },
         meta: {
-          title: 'multi-menu_first'
+          title: 'multi-menu_first',
+          i18nKey: 'route.multi-menu_first',
+          requiresAuth: true
         }
       },
       {
         name: 'multi-menu_first_child',
         path: '/multi-menu/first/child',
         component: 'view.multi-menu_first_child',
         meta: {
-          title: 'multi-menu_first_child'
+          title: 'multi-menu_first_child',
+          i18nKey: 'route.multi-menu_first_child',
+          requiresAuth: true
         }
       },
       {
@@ -113,7 +126,9 @@ export const autoRoutes: ElegantRoute[] = [
           name: 'multi-menu_second_child'
         },
         meta: {
-          title: 'multi-menu_second'
+          title: 'multi-menu_second',
+          i18nKey: 'route.multi-menu_second',
+          requiresAuth: true
         }
       },
       {
@@ -123,15 +138,19 @@ export const autoRoutes: ElegantRoute[] = [
           name: 'multi-menu_second_child_home'
         },
         meta: {
-          title: 'multi-menu_second_child'
+          title: 'multi-menu_second_child',
+          i18nKey: 'route.multi-menu_second_child',
+          requiresAuth: true
         }
       },
       {
         name: 'multi-menu_second_child_home',
         path: '/multi-menu/second/child/home',
         component: 'view.multi-menu_second_child_home',
         meta: {
-          title: 'multi-menu_second_child_home'
+          title: 'multi-menu_second_child_home',
+          i18nKey: 'route.multi-menu_second_child_home',
+          requiresAuth: true
         }
       }
     ]
@@ -141,10 +160,11 @@ export const autoRoutes: ElegantRoute[] = [
     path: '/user',
     component: 'layout.base',
     redirect: {
-      name: 'user_list'
+      name: 'user_detail'
     },
     meta: {
       title: 'user',
+      i18nKey: 'route.user',
       requiresAuth: true
     },
     children: [
@@ -153,15 +173,19 @@ export const autoRoutes: ElegantRoute[] = [
         path: '/user/detail/:id',
         component: 'view.user_detail',
         meta: {
-          title: 'user_detail'
+          title: 'user_detail',
+          i18nKey: 'route.user_detail',
+          requiresAuth: true
         }
       },
       {
         name: 'user_list',
         path: '/user/list',
         component: 'view.user_list',
         meta: {
-          title: 'user_list'
+          title: 'user_list',
+          i18nKey: 'route.user_list',
+          requiresAuth: true
         }
       }
     ]
@@ -176,6 +200,7 @@ export const autoRoutes: ElegantRoute[] = [
         component: 'view.user-center',
         meta: {
           title: 'user-center',
+          i18nKey: 'route.user-center',
           requiresAuth: true
         }
       }

src/typings/app.d.ts

@@ -82,6 +82,8 @@ declare namespace App {
    * @description locales type
    */
   namespace I18n {
+    type RouteKey = import('@elegant-router/types').AutoRouteKey;
+
     type LangType = 'en' | 'zh-CN';
 
     type Schema = {
@@ -107,6 +109,7 @@ declare namespace App {
         logout: string;
         logoutConfirm: string;
       };
+      route: Record<RouteKey, string>;
       page: {
         login: {
           common: {

src/typings/router.d.ts

@@ -14,7 +14,50 @@ declare module 'vue-router' {
     i18nKey?: App.I18n.I18nKey;
     /**
      * whether to require authentication
+     * @description need to login before entering the route
      */
     requiresAuth?: boolean;
+    /**
+     * roles of the route
+     * @description route can be accessed if the current user has at least one of the roles
+     */
+    roles?: string[];
+    /**
+     * is constant route
+     * @description does not need to login, and the route is defined in the frontend
+     */
+    constant?: boolean;
+    /**
+     * iconify icon
+     * @description it can be used in the menu or breadcrumb
+     */
+    icon?: string;
+    /**
+     * local icon
+     * @description in "src/assets/svg-icon", if it is set, the icon will be ignored
+     */
+    localIcon?: string;
+    /**
+     * router order
+     */
+    order?: number;
+    /**
+     * whether to hide the route in the menu
+     */
+    hideInMenu?: boolean;
+    /**
+     * the menu key will be activated when entering the route
+     * @description the route is not in the menu
+     * @example the route is "user_detail", if it is set to "user_list", the menu "user_list" will be activated
+     */
+    activeMenu?: string;
+    /**
+     * by default, the same route path will use one tab, if set to true, it will use multiple tabs
+     */
+    multiTab?: boolean;
+    /**
+     * if set, the route will be fixed in tabs, and the value is the order of fixed tabs
+     */
+    fixedIndex?: number;
   }
 }