From 9b61e82d7423d3d55c7cea34cc554495098bf1b9 Mon Sep 17 00:00:00 2001 From: vben Date: Mon, 9 Nov 2020 01:08:43 +0800 Subject: [PATCH] refactor: route Module structural transformation --- .env | 5 +-- CHANGELOG.zh_CN.md | 1 + build/vite/plugin/dynamicImport/index.ts | 5 ++- mock/sys/menu.ts | 56 ++++++++++-------------- src/router/types.d.ts | 4 +- src/settings/projectSetting.ts | 6 +-- src/utils/env.ts | 12 ----- src/utils/helper/menuHelper.ts | 6 +-- src/utils/helper/routeHelper.ts | 22 ++++++++-- 9 files changed, 57 insertions(+), 60 deletions(-) diff --git a/.env b/.env index 1545fae6c..a59a119d6 100644 --- a/.env +++ b/.env @@ -7,6 +7,5 @@ VITE_GLOB_APP_TITLE = Vben Admin # spa shortname VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x -# Menu generation mode BACK|ROLE -# Need to delete LocalStorage after modification -VITE_GEN_MENU_MODE=ROLE +# Whether to dynamically load all files in `src/views` +VITE_DYNAMIC_IMPORT = true diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 6dcc2b4b1..2a1004cf3 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -11,6 +11,7 @@ ### ✨ Refactor - 重构由后台生成菜单的逻辑 +- Route Module 结构改造 ### ⚡ Performance Improvements diff --git a/build/vite/plugin/dynamicImport/index.ts b/build/vite/plugin/dynamicImport/index.ts index 6b0b92ce3..c8b2e5eea 100644 --- a/build/vite/plugin/dynamicImport/index.ts +++ b/build/vite/plugin/dynamicImport/index.ts @@ -20,10 +20,11 @@ const dynamicImportTransform = function (env: any = {}): Transform { return path.includes('/src/utils/helper/dynamicImport.ts'); }, transform({ code }) { - const { VITE_GEN_MENU_MODE = '' } = env; - if (VITE_GEN_MENU_MODE !== 'BACK') { + const { VITE_DYNAMIC_IMPORT } = env; + if (!VITE_DYNAMIC_IMPORT) { return code; } + // if (!isBuild) return code; // Only convert the dir try { diff --git a/mock/sys/menu.ts b/mock/sys/menu.ts index 82930c542..4c976fa20 100644 --- a/mock/sys/menu.ts +++ b/mock/sys/menu.ts @@ -2,17 +2,15 @@ import { resultSuccess } from '../_util'; import { MockMethod } from 'vite-plugin-mock'; const dashboardRoute = { - layout: { - path: '/dashboard', - name: 'Dashboard', - component: 'PAGE_LAYOUT', - redirect: '/dashboard/welcome', - meta: { - icon: 'ant-design:home-outlined', - title: 'Dashboard', - }, + path: '/dashboard', + name: 'Dashboard', + component: 'PAGE_LAYOUT', + redirect: '/dashboard/welcome', + meta: { + icon: 'ant-design:home-outlined', + title: 'Dashboard', }, - routes: [ + children: [ { path: '/welcome', name: 'Welcome', @@ -86,33 +84,27 @@ const backRoute = { ], }; const authRoute = { - layout: { - path: '/permission', - name: 'Permission', - component: 'PAGE_LAYOUT', - redirect: '/permission/front/page', - meta: { - icon: 'ant-design:home-outlined', - title: '权限管理', - }, + path: '/permission', + name: 'Permission', + component: 'PAGE_LAYOUT', + redirect: '/permission/front/page', + meta: { + icon: 'ant-design:home-outlined', + title: '权限管理', }, - - routes: [frontRoute, backRoute], + children: [frontRoute, backRoute], }; const authRoute1 = { - layout: { - path: '/permission', - name: 'Permission', - component: 'PAGE_LAYOUT', - redirect: '/permission/front/page', - meta: { - icon: 'ant-design:home-outlined', - title: '权限管理', - }, + path: '/permission', + name: 'Permission', + component: 'PAGE_LAYOUT', + redirect: '/permission/front/page', + meta: { + icon: 'ant-design:home-outlined', + title: '权限管理', }, - - routes: [backRoute], + children: [backRoute], }; export default [ { diff --git a/src/router/types.d.ts b/src/router/types.d.ts index 215a3c472..601aedb74 100644 --- a/src/router/types.d.ts +++ b/src/router/types.d.ts @@ -68,5 +68,7 @@ export interface MenuModule { export interface AppRouteModule { layout?: AppRouteRecordRaw; - routes: AppRouteRecordRaw[]; + routes?: AppRouteRecordRaw[]; + children?: AppRouteRecordRaw[]; + component?: any; } diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts index 2ca2ea448..117475db8 100644 --- a/src/settings/projectSetting.ts +++ b/src/settings/projectSetting.ts @@ -1,16 +1,16 @@ import type { ProjectConfig } from '/@/types/config'; import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum'; -import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum'; +import { ContentEnum, PermissionModeEnum, RouterTransitionEnum } from '/@/enums/appEnum'; import { primaryColor } from '../../build/config/lessModifyVars'; -import { isProdMode, getRoleMode } from '/@/utils/env'; +import { isProdMode } from '/@/utils/env'; // ! You need to clear the browser cache after the change const setting: ProjectConfig = { // Whether to show the configuration button showSettingButton: true, // 权限模式 - permissionMode: getRoleMode(), + permissionMode: PermissionModeEnum.ROLE, // 网站灰色模式，用于可能悼念的日期开启 grayMode: false, // 色弱模式 diff --git a/src/utils/env.ts b/src/utils/env.ts index a14a6f31f..58818a72c 100644 --- a/src/utils/env.ts +++ b/src/utils/env.ts @@ -1,4 +1,3 @@ -import { PermissionModeEnum } from '../enums/appEnum'; import type { GlobEnvConfig } from '/@/types/config'; export const getGlobEnvConfig = (): GlobEnvConfig => { @@ -47,14 +46,3 @@ export const isProdMode = (): boolean => import.meta.env.PROD; * @example: */ export const isUseMock = (): boolean => import.meta.env.VITE_USE_MOCK === 'true'; - -/** - * @description: 获取菜单生成方式 - * @param {type} - * @returns: - * @example: - */ -export const getRoleMode = (): PermissionModeEnum => - import.meta.env.VITE_GEN_MENU_MODE === PermissionModeEnum.ROLE - ? PermissionModeEnum.ROLE - : PermissionModeEnum.BACK; diff --git a/src/utils/helper/menuHelper.ts b/src/utils/helper/menuHelper.ts index 8925a9ed6..fc12b1780 100644 --- a/src/utils/helper/menuHelper.ts +++ b/src/utils/helper/menuHelper.ts @@ -48,12 +48,12 @@ export function transformRouteToMenu(routeModList: AppRouteModule[]) { const cloneRouteModList = cloneDeep(routeModList); const routeList: AppRouteRecordRaw[] = []; cloneRouteModList.forEach((item) => { - const { layout, routes } = item; + const { layout, routes, children } = item; if (layout) { - layout.children = routes; + layout.children = routes || children; routeList.push(layout); } else { - routeList.push(...routes); + routes && routeList.push(...routes); } }); return treeMap(routeList, { diff --git a/src/utils/helper/routeHelper.ts b/src/utils/helper/routeHelper.ts index 274f03415..d06ed0b3f 100644 --- a/src/utils/helper/routeHelper.ts +++ b/src/utils/helper/routeHelper.ts @@ -8,6 +8,7 @@ import { toRaw } from 'vue'; import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant'; // import { isDevMode } from '/@/utils/env'; import dynamicImport from './dynamicImport'; +import { omit } from 'lodash-es'; let currentTo: RouteLocationNormalized | null = null; @@ -23,8 +24,16 @@ export function setCurrentTo(to: RouteLocationNormalized) { export function genRouteModule(moduleList: AppRouteModule[]) { const ret: AppRouteRecordRaw[] = []; for (const routeMod of moduleList) { - const routes = routeMod.routes as any; - const layout = routeMod.layout; + let routes = []; + let layout: AppRouteRecordRaw | undefined; + if (Reflect.has(routeMod, 'routes')) { + routes = routeMod.routes as any; + layout = routeMod.layout; + } else if (Reflect.has(routeMod, 'path')) { + layout = omit(routeMod, 'children') as any; + routes = routeMod.children || []; + } + const router = createRouter({ routes, history: createWebHashHistory() }); const flatList = (toRaw(router.getRoutes()).filter( @@ -45,7 +54,8 @@ export function genRouteModule(moduleList: AppRouteModule[]) { // 动态引入 // TODO 错误写法 -function asyncImportRoute(routes: AppRouteRecordRaw[]) { +function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) { + if (!routes) return; routes.forEach((item) => { const { component } = item; const { children } = item; @@ -60,10 +70,14 @@ function asyncImportRoute(routes: AppRouteRecordRaw[]) { // 将后台对象转成路由对象 export function transformObjToRoute(routeList: AppRouteModule[]) { routeList.forEach((route) => { - asyncImportRoute(route.routes); + asyncImportRoute(Reflect.has(route, 'routes') ? route.routes : route.children || []); if (route.layout) { route.layout.component = route.layout.component === 'PAGE_LAYOUT' ? PAGE_LAYOUT_COMPONENT : ''; + } else { + route.component = route.component === 'PAGE_LAYOUT' ? PAGE_LAYOUT_COMPONENT : ''; + const _layout = omit(route, 'children') as any; + route.layout = _layout; } }); return routeList;