refactor: route Module structural transformation

.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

CHANGELOG.zh_CN.md

@@ -11,6 +11,7 @@
 ### ✨ Refactor
 
 - 重构由后台生成菜单的逻辑
+- Route Module 结构改造
 
 ### ⚡ Performance Improvements
 

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 {

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 [
   {

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;
 }

src/settings/projectSetting.ts

 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,
   // 色弱模式

src/utils/env.ts

-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;

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, {

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;