refactor: refactoring menu generation

src/layouts/default/index.tsx

@@ -107,7 +107,9 @@ export default defineComponent({
                             unref(showHeaderRef) && <LayoutHeader />}
 
                           {showTabs && !unref(getFullContent) && (
-                            <MultipleTabs class={`default-layout__tabs`} />
+                            <Layout.Header class={`default-layout__tabs`}>
+                              {() => <MultipleTabs />}
+                            </Layout.Header>
                           )}
 
                           {useOpenBackTop && <BackTop target={getTarget} />}

src/settings/projectSetting.ts

@@ -1,15 +1,16 @@
 import type { ProjectConfig } from '/@/types/config';
 
 import { MenuTypeEnum, MenuThemeEnum, MenuModeEnum, TriggerEnum } from '/@/enums/menuEnum';
-import { ContentEnum, PermissionModeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
+import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { primaryColor } from '../../build/config/lessModifyVars';
-import { isProdMode } from '/@/utils/env';
+import { isProdMode, getRoleMode } 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: PermissionModeEnum.ROLE,
+  permissionMode: getRoleMode(),
   // 网站灰色模式，用于可能悼念的日期开启
   grayMode: false,
   // 色弱模式

src/store/modules/permission.ts

@@ -19,7 +19,7 @@ import { genRouteModule, transformObjToRoute } from '/@/utils/helper/routeHelper
 import { transformRouteToMenu } from '/@/utils/helper/menuHelper';
 
 import { useMessage } from '/@/hooks/web/useMessage';
-import { warn } from '/@/utils/log';
+// import { warn } from '/@/utils/log';
 
 const { createMessage } = useMessage();
 const NAME = 'permission';
@@ -99,9 +99,9 @@ class Permission extends VuexModule {
       });
       // this.commitRoutesState(routes);
       // Background permissions
-      warn(
-        `当前权限模式为:${PermissionModeEnum.ROLE},请将src/store/modules/permission.ts内的后台菜单获取函数注释,如果已注释可以忽略此信息!`
-      );
+      // warn(
+      //   `当前权限模式为:${PermissionModeEnum.ROLE},请将src/store/modules/permission.ts内的后台菜单获取函数注释,如果已注释可以忽略此信息!`
+      // );
       //  如果确定不需要做后台动态权限,请将下面整个判断注释
     } else if (permissionMode === PermissionModeEnum.BACK) {
       const messageKey = 'loadMenu';

src/utils/env.ts

@@ -1,3 +1,4 @@
+import { PermissionModeEnum } from '../enums/appEnum';
 import type { GlobEnvConfig } from '/@/types/config';
 
 export const getGlobEnvConfig = (): GlobEnvConfig => {
@@ -46,3 +47,14 @@ 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/dynamicImport.ts

@@ -0,0 +1,4 @@
+export default function (id: string) {
+  const dynamicImportModule: any = id;
+  return dynamicImportModule;
+}

src/utils/helper/routeHelper.ts

@@ -6,6 +6,8 @@ import { tabStore } from '/@/store/modules/tab';
 import { createRouter, createWebHashHistory } from 'vue-router';
 import { toRaw } from 'vue';
 import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
+// import { isDevMode } from '/@/utils/env';
+import dynamicImport from './dynamicImport';
 
 let currentTo: RouteLocationNormalized | null = null;
 
@@ -45,12 +47,12 @@ export function genRouteModule(moduleList: AppRouteModule[]) {
 // TODO  错误写法
 function asyncImportRoute(routes: AppRouteRecordRaw[]) {
   routes.forEach((item) => {
-    let { component } = item;
+    const { component } = item;
     const { children } = item;
     if (component) {
-      component = component.replace(/^\//, '');
-      item.component = () => import(`/@/views/${component}`);
+      item.component = dynamicImport(component);
     }
+
     children && asyncImportRoute(children);
   });
 }