From 4aac1c388c9f97c8c2e8a361cfa7e4f92e977c48 Mon Sep 17 00:00:00 2001 From: coderPeng3yang <88971513+coderPeng3yang@users.noreply.github.com> Date: Tue, 6 Aug 2024 18:36:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=BA=86=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E7=9A=84=E8=8F=9C=E5=8D=95=E6=95=B0=E6=8D=AE=E7=9A=84=E6=AD=A5?= =?UTF-8?q?=E9=AA=A4=EF=BC=8C=E5=87=8F=E5=B0=91=E6=80=A7=E8=83=BD=E5=BC=80?= =?UTF-8?q?=E9=94=80=EF=BC=8C=E4=BC=98=E5=8C=96=E5=88=9D=E5=A7=8B=E5=8C=96?= =?UTF-8?q?=E9=80=9F=E5=BA=A6=E3=80=82=20(#4012)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * types(logic): 减少冗沉，用了泛型 * perf(router): 删除了多余的菜单数据的步骤，减少性能开销，优化初始化速度。 删除了每次刷新页面都会获取静态菜单数据的操作，改为在角色权限控制时才进行数据获取。 此更改优化了应用的初始化速度，减少了不必要的性能开销，并且确保获取静态菜单数据时不会污染路由数据。 这样可以确保其他地方更清晰地跟踪路由数据 --------- Co-authored-by: zach.zqy --- src/router/helper/menuHelper.ts | 15 +++++++-------- src/router/menus/index.ts | 17 +++-------------- src/store/modules/permission.ts | 18 +++++++++++++++++- 3 files changed, 27 insertions(+), 23 deletions(-) diff --git a/src/router/helper/menuHelper.ts b/src/router/helper/menuHelper.ts index c4eb1dcd..e2e92f4e 100644 --- a/src/router/helper/menuHelper.ts +++ b/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; } // 将路由转换成菜单 diff --git a/src/router/menus/index.ts b/src/router/menus/index.ts index f9e6b4f0..7742fc5e 100644 --- a/src/router/menus/index.ts +++ b/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 => { diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 34d6d94f..25416df9 100644 --- a/src/store/modules/permission.ts +++ b/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); // 对一级路由根据角色权限过滤