From a2e0f47924ff9ef1e51bf547e550cd9d586f7ccf Mon Sep 17 00:00:00 2001 From: Soybean Date: Sun, 22 Oct 2023 17:22:19 +0800 Subject: [PATCH] feat(projects): perf route meta and route i18n --- build/plugins/router.ts | 23 ++++++++++++++-- src/locales/lang/en.ts | 17 ++++++++++++ src/locales/lang/zh-CN.ts | 17 ++++++++++++ src/router/elegant/routes.ts | 53 ++++++++++++++++++++++++++---------- src/typings/app.d.ts | 3 ++ src/typings/router.d.ts | 43 +++++++++++++++++++++++++++++ 6 files changed, 140 insertions(+), 16 deletions(-) diff --git a/build/plugins/router.ts b/build/plugins/router.ts index 766570c..b0e993e 100644 --- a/build/plugins/router.ts +++ b/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 = { + title: key, + i18nKey: `route.${key}` + }; + + if (constantRoutes.includes(key)) { + meta.constant = true; + } else { + meta.requiresAuth = true; + } + + return meta; } }); } diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 88784e7..2c4db0e 100644 --- a/src/locales/lang/en.ts +++ b/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: { diff --git a/src/locales/lang/zh-CN.ts b/src/locales/lang/zh-CN.ts index a6edfe7..669cb4e 100644 --- a/src/locales/lang/zh-CN.ts +++ b/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: { diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts index 9ae6ad6..001d1c3 100644 --- a/src/router/elegant/routes.ts +++ b/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,6 +62,7 @@ export const autoRoutes: ElegantRoute[] = [ component: 'view.home', meta: { title: 'home', + i18nKey: 'route.home', requiresAuth: true } } @@ -63,15 +70,16 @@ export const autoRoutes: ElegantRoute[] = [ }, { 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,7 +104,9 @@ 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 } }, { @@ -103,7 +114,9 @@ export const autoRoutes: ElegantRoute[] = [ 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,7 +138,9 @@ 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 } }, { @@ -131,7 +148,9 @@ export const autoRoutes: ElegantRoute[] = [ 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,7 +173,9 @@ 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 } }, { @@ -161,7 +183,9 @@ export const autoRoutes: ElegantRoute[] = [ 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 } } diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts index 5605fdc..ec659ee 100644 --- a/src/typings/app.d.ts +++ b/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; page: { login: { common: { diff --git a/src/typings/router.d.ts b/src/typings/router.d.ts index 5b5fbae..fa97ee9 100644 --- a/src/typings/router.d.ts +++ b/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; } }