删除了多余的菜单数据的步骤，减少性能开销，优化初始化速度。 (#4012)

* types(logic): 减少冗沉，用了泛型

* perf(router): 删除了多余的菜单数据的步骤，减少性能开销，优化初始化速度。

删除了每次刷新页面都会获取静态菜单数据的操作，改为在角色权限控制时才进行数据获取。

此更改优化了应用的初始化速度，减少了不必要的性能开销，并且确保获取静态菜单数据时不会污染路由数据。

这样可以确保其他地方更清晰地跟踪路由数据

---------

Co-authored-by: zach.zqy <bianzhixiaoyuan@163.com>

src/router/helper/menuHelper.ts

@@ -1,5 +1,5 @@
 import { AppRouteModule } from '@/router/types';
-import type { MenuModule, Menu, AppRouteRecordRaw } from '@/router/types';
+import type { Menu, AppRouteRecordRaw } from '@/router/types';
 import { findPath, treeMap } from '@/utils/helper/treeHelper';
 import { cloneDeep } from 'lodash-es';
 import { isHttpUrl } from '@/utils/is';
@@ -30,13 +30,12 @@ function joinParentPath(menus: Menu[], parentPath = '') {
     }
   }
 }
-
-// Parsing the menu module
-export function transformMenuModule(menuModule: MenuModule): Menu {
-  const menuList = [menuModule];
-
-  joinParentPath(menuList);
-  return menuList[0];
+// 菜单路径处理
+export function transformMenuModules(routeModList: Menu[]) {
+  const cloneMenuModules = cloneDeep(routeModList);
+  // 路径处理
+  joinParentPath(cloneMenuModules);
+  return cloneMenuModules;
 }
 
 // 将路由转换成菜单

src/router/menus/index.ts

@@ -3,7 +3,7 @@ import type { RouteRecordNormalized } from 'vue-router';
 
 import { useAppStoreWithOut } from '@/store/modules/app';
 import { usePermissionStore } from '@/store/modules/permission';
-import { transformMenuModule, getAllParentPath } from '@/router/helper/menuHelper';
+import { getAllParentPath } from '@/router/helper/menuHelper';
 import { filter } from '@/utils/helper/treeHelper';
 import { isHttpUrl } from '@/utils/is';
 import { router } from '@/router';
@@ -12,7 +12,7 @@ import { pathToRegexp } from 'path-to-regexp';
 
 const modules = import.meta.glob('../routes/modules/**/*.ts', { eager: true });
 
-const menuModules: MenuModule[] = [];
+export const menuModules: MenuModule[] = [];
 
 Object.keys(modules).forEach((key) => {
   const mod = (modules as Recordable)[key].default || {};
@@ -40,17 +40,6 @@ const isRoleMode = () => {
   return getPermissionMode() === PermissionModeEnum.ROLE;
 };
 
-const staticMenus: Menu[] = [];
-(() => {
-  menuModules.sort((a, b) => {
-    return (a.orderNo || 0) - (b.orderNo || 0);
-  });
-
-  for (const menu of menuModules) {
-    staticMenus.push(transformMenuModule(menu));
-  }
-})();
-
 async function getAsyncMenus() {
   const permissionStore = usePermissionStore();
   //递归过滤所有隐藏的菜单
@@ -69,7 +58,7 @@ async function getAsyncMenus() {
   if (isRouteMappingMode()) {
     return menuFilter(permissionStore.getFrontMenuList);
   }
-  return staticMenus;
+  return permissionStore.getStaticMenuList;
 }
 
 export const getMenus = async (): Promise<Menu[]> => {

src/store/modules/permission.ts

@@ -7,13 +7,14 @@ import { useUserStore } from './user';
 import { useAppStoreWithOut } from './app';
 import { toRaw } from 'vue';
 import { transformObjToRoute, flatMultiLevelRoutes } from '@/router/helper/routeHelper';
-import { transformRouteToMenu } from '@/router/helper/menuHelper';
+import { transformRouteToMenu, transformMenuModules } from '@/router/helper/menuHelper';
 
 import projectSetting from '@/settings/projectSetting';
 
 import { PermissionModeEnum } from '@/enums/appEnum';
 
 import { asyncRoutes } from '@/router/routes';
+import { menuModules } from '@/router/menus';
 import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '@/router/routes/basic';
 
 import { filter } from '@/utils/helper/treeHelper';
@@ -39,6 +40,7 @@ interface PermissionState {
   backMenuList: Menu[];
   // 菜单列表
   frontMenuList: Menu[];
+  staticMenuList: Menu[];
 }
 
 export const usePermissionStore = defineStore({
@@ -58,6 +60,7 @@ export const usePermissionStore = defineStore({
     // menu List
     // 菜单列表
     frontMenuList: [],
+    staticMenuList: [],
   }),
   getters: {
     getPermCodeList(state): string[] | number[] {
@@ -69,6 +72,9 @@ export const usePermissionStore = defineStore({
     getFrontMenuList(state): Menu[] {
       return state.frontMenuList;
     },
+    getStaticMenuList(state): Menu[] {
+      return state.staticMenuList;
+    },
     getLastBuildMenuTime(state): number {
       return state.lastBuildMenuTime;
     },
@@ -90,6 +96,10 @@ export const usePermissionStore = defineStore({
       this.frontMenuList = list;
     },
 
+    setStaticMenuList(list: Menu[]) {
+      this.staticMenuList = list;
+    },
+
     setLastBuildMenuTime() {
       this.lastBuildMenuTime = new Date().getTime();
     },
@@ -171,6 +181,12 @@ export const usePermissionStore = defineStore({
       switch (permissionMode) {
         // 角色权限
         case PermissionModeEnum.ROLE:
+          const staticMenuList = transformMenuModules(menuModules);
+          staticMenuList.sort((a, b) => {
+            return (a.orderNo || 0) - (b.orderNo || 0);
+          });
+          // 设置菜单列表
+          this.setStaticMenuList(staticMenuList);
           // 对非一级路由进行过滤
           routes = filter(asyncRoutes, routeFilter);
           // 对一级路由根据角色权限过滤