refactor: route Module structural transformation

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

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

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;

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;