mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
feat(projects): 1.0 beta
This commit is contained in:
Soybean
@ -1,188 +1,292 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { defineStore } from 'pinia';
|
||||
import { ROOT_ROUTE, constantRoutes, router, routes as staticRoutes } from '@/router';
|
||||
import { fetchUserRoutes } from '@/service';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import type { ElegantConstRoute, CustomRoute, RouteKey, LastLevelRouteKey, RouteMap } from '@elegant-router/types';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { router } from '@/router';
|
||||
import { createRoutes, getAuthVueRoutes, ROOT_ROUTE } from '@/router/routes';
|
||||
import { getRoutePath, getRouteName } from '@/router/elegant/transform';
|
||||
import { fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
|
||||
import {
|
||||
localStg,
|
||||
filterAuthRoutesByUserPermission,
|
||||
getCacheRoutes,
|
||||
getConstantRouteNames,
|
||||
transformAuthRouteToVueRoutes,
|
||||
transformAuthRouteToVueRoute,
|
||||
transformAuthRouteToMenu,
|
||||
transformAuthRouteToSearchMenus,
|
||||
transformRouteNameToRoutePath,
|
||||
transformRoutePathToRouteName,
|
||||
sortRoutes
|
||||
} from '@/utils';
|
||||
filterAuthRoutesByRoles,
|
||||
getGlobalMenusByAuthRoutes,
|
||||
updateLocaleOfGlobalMenus,
|
||||
getCacheRouteNames,
|
||||
isRouteExistByRouteName,
|
||||
getSelectedMenuKeyPathByKey,
|
||||
getBreadcrumbsByRoute
|
||||
} from './shared';
|
||||
import { useAppStore } from '../app';
|
||||
import { useAuthStore } from '../auth';
|
||||
import { useTabStore } from '../tab';
|
||||
|
||||
interface RouteState {
|
||||
export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
const tabStore = useTabStore();
|
||||
const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
|
||||
const removeRouteFns: (() => void)[] = [];
|
||||
|
||||
/**
|
||||
* 权限路由模式:
|
||||
* - static - 前端声明的静态
|
||||
* - dynamic - 后端返回的动态
|
||||
* auth route mode
|
||||
* @description it recommends to use static mode in the development environment, and use dynamic mode in the production environment,
|
||||
* if use static mode in development environment, the auth routes will be auto generated by plugin "@elegant-router/vue"
|
||||
*/
|
||||
authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE'];
|
||||
/** 是否初始化了权限路由 */
|
||||
isInitAuthRoute: boolean;
|
||||
/** 路由首页name(前端静态路由时生效，后端动态路由该值会被后端返回的值覆盖) */
|
||||
routeHomeName: AuthRoute.AllRouteKey;
|
||||
/** 菜单 */
|
||||
menus: App.GlobalMenuOption[];
|
||||
/** 搜索的菜单 */
|
||||
searchMenus: AuthRoute.Route[];
|
||||
/** 缓存的路由名称 */
|
||||
cacheRoutes: string[];
|
||||
}
|
||||
const authRouteMode = ref(import.meta.env.VITE_AUTH_ROUTE_MODE);
|
||||
|
||||
export const useRouteStore = defineStore('route-store', {
|
||||
state: (): RouteState => ({
|
||||
authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
|
||||
isInitAuthRoute: false,
|
||||
routeHomeName: transformRoutePathToRouteName(import.meta.env.VITE_ROUTE_HOME_PATH),
|
||||
menus: [],
|
||||
searchMenus: [],
|
||||
cacheRoutes: []
|
||||
}),
|
||||
actions: {
|
||||
/** 重置路由的store */
|
||||
resetRouteStore() {
|
||||
this.resetRoutes();
|
||||
this.$reset();
|
||||
},
|
||||
/** 重置路由数据，保留固定路由 */
|
||||
resetRoutes() {
|
||||
const routes = router.getRoutes();
|
||||
routes.forEach(route => {
|
||||
const name = (route.name || 'root') as AuthRoute.AllRouteKey;
|
||||
if (!this.isConstantRoute(name)) {
|
||||
router.removeRoute(name);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 是否是固定路由
|
||||
* @param name 路由名称
|
||||
*/
|
||||
isConstantRoute(name: AuthRoute.AllRouteKey) {
|
||||
const constantRouteNames = getConstantRouteNames(constantRoutes);
|
||||
return constantRouteNames.includes(name);
|
||||
},
|
||||
/**
|
||||
* 是否是有效的固定路由
|
||||
* @param name 路由名称
|
||||
*/
|
||||
isValidConstantRoute(name: AuthRoute.AllRouteKey) {
|
||||
const NOT_FOUND_PAGE_NAME: AuthRoute.NotFoundRouteKey = 'not-found';
|
||||
const constantRouteNames = getConstantRouteNames(constantRoutes);
|
||||
return constantRouteNames.includes(name) && name !== NOT_FOUND_PAGE_NAME;
|
||||
},
|
||||
/**
|
||||
* 处理权限路由
|
||||
* @param routes - 权限路由
|
||||
*/
|
||||
handleAuthRoute(routes: AuthRoute.Route[]) {
|
||||
(this.menus as App.GlobalMenuOption[]) = transformAuthRouteToMenu(routes);
|
||||
this.searchMenus = transformAuthRouteToSearchMenus(routes);
|
||||
/**
|
||||
* home route key
|
||||
*/
|
||||
const routeHome = ref(import.meta.env.VITE_ROUTE_HOME);
|
||||
|
||||
const vueRoutes = transformAuthRouteToVueRoutes(routes);
|
||||
/**
|
||||
* set route home
|
||||
* @param routeKey route key
|
||||
*/
|
||||
function setRouteHome(routeKey: LastLevelRouteKey) {
|
||||
routeHome.value = routeKey;
|
||||
}
|
||||
|
||||
vueRoutes.forEach(route => {
|
||||
router.addRoute(route);
|
||||
});
|
||||
/**
|
||||
* global menus
|
||||
*/
|
||||
const menus = ref<App.Global.Menu[]>([]);
|
||||
|
||||
this.cacheRoutes = getCacheRoutes(vueRoutes);
|
||||
},
|
||||
/** 动态路由模式下：更新根路由的重定向 */
|
||||
handleUpdateRootRedirect(routeKey: AuthRoute.AllRouteKey) {
|
||||
if (routeKey === 'root' || routeKey === 'not-found') {
|
||||
throw new Error('routeKey的值不能为root或者not-found');
|
||||
}
|
||||
const rootRoute: AuthRoute.Route = { ...ROOT_ROUTE, redirect: transformRouteNameToRoutePath(routeKey) };
|
||||
const rootRouteName: AuthRoute.AllRouteKey = 'root';
|
||||
router.removeRoute(rootRouteName);
|
||||
const rootVueRoute = transformAuthRouteToVueRoute(rootRoute)[0];
|
||||
router.addRoute(rootVueRoute);
|
||||
},
|
||||
/** 初始化动态路由 */
|
||||
async initDynamicRoute() {
|
||||
const { resetAuthStore } = useAuthStore();
|
||||
const { initHomeTab } = useTabStore();
|
||||
/**
|
||||
* get global menus
|
||||
*/
|
||||
function getGlobalMenus(routes: ElegantConstRoute[]) {
|
||||
menus.value = getGlobalMenusByAuthRoutes(routes);
|
||||
}
|
||||
|
||||
const { userId } = localStg.get('userInfo') || {};
|
||||
/**
|
||||
* update global menus by locale
|
||||
*/
|
||||
function updateGlobalMenusByLocale() {
|
||||
menus.value = updateLocaleOfGlobalMenus(menus.value);
|
||||
}
|
||||
|
||||
if (!userId) {
|
||||
throw new Error('userId 不能为空!');
|
||||
}
|
||||
/**
|
||||
* cache routes
|
||||
*/
|
||||
const cacheRoutes = ref<RouteKey[]>([]);
|
||||
|
||||
const { error, data } = await fetchUserRoutes(userId);
|
||||
/**
|
||||
* get cache routes
|
||||
* @param routes vue routes
|
||||
*/
|
||||
function getCacheRoutes(routes: RouteRecordRaw[]) {
|
||||
const { constantVueRoutes } = createRoutes();
|
||||
|
||||
if (!error) {
|
||||
this.handleAuthRoute(sortRoutes(data.routes));
|
||||
// home相关处理需要在最后，否则会出现找不到主页404的情况
|
||||
this.routeHomeName = data.home;
|
||||
this.handleUpdateRootRedirect(data.home);
|
||||
cacheRoutes.value = getCacheRouteNames([...constantVueRoutes, ...routes]);
|
||||
}
|
||||
|
||||
initHomeTab(data.home, router);
|
||||
/**
|
||||
* add cache routes
|
||||
* @param routeKey
|
||||
*/
|
||||
function addCacheRoutes(routeKey: RouteKey) {
|
||||
if (cacheRoutes.value.includes(routeKey)) return;
|
||||
|
||||
this.isInitAuthRoute = true;
|
||||
} else {
|
||||
resetAuthStore();
|
||||
}
|
||||
},
|
||||
/** 初始化静态路由 */
|
||||
async initStaticRoute() {
|
||||
const { initHomeTab } = useTabStore();
|
||||
const auth = useAuthStore();
|
||||
cacheRoutes.value.push(routeKey);
|
||||
}
|
||||
|
||||
const routes = filterAuthRoutesByUserPermission(staticRoutes, auth.userInfo.userRole);
|
||||
this.handleAuthRoute(routes);
|
||||
/**
|
||||
* remove cache routes
|
||||
* @param routeKey
|
||||
*/
|
||||
function removeCacheRoutes(routeKey: RouteKey) {
|
||||
const index = cacheRoutes.value.findIndex(item => item === routeKey);
|
||||
|
||||
initHomeTab(this.routeHomeName, router);
|
||||
if (index === -1) return;
|
||||
|
||||
this.isInitAuthRoute = true;
|
||||
},
|
||||
/** 初始化权限路由 */
|
||||
async initAuthRoute() {
|
||||
if (this.authRouteMode === 'dynamic') {
|
||||
await this.initDynamicRoute();
|
||||
} else {
|
||||
await this.initStaticRoute();
|
||||
}
|
||||
},
|
||||
/** 从缓存路由中去除某个路由 */
|
||||
removeCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const index = this.cacheRoutes.indexOf(name);
|
||||
if (index > -1) {
|
||||
this.cacheRoutes.splice(index, 1);
|
||||
}
|
||||
},
|
||||
/** 添加某个缓存路由 */
|
||||
addCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const index = this.cacheRoutes.indexOf(name);
|
||||
if (index === -1) {
|
||||
this.cacheRoutes.push(name);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 重新缓存路由
|
||||
*/
|
||||
async reCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const { reloadPage } = useAppStore();
|
||||
cacheRoutes.value.splice(index, 1);
|
||||
}
|
||||
|
||||
const isCached = this.cacheRoutes.includes(name);
|
||||
/**
|
||||
* re-cache routes by route key
|
||||
* @param routeKey
|
||||
*/
|
||||
async function reCacheRoutesByKey(routeKey: RouteKey) {
|
||||
removeCacheRoutes(routeKey);
|
||||
|
||||
if (isCached) {
|
||||
this.removeCacheRoute(name);
|
||||
}
|
||||
await appStore.reloadPage();
|
||||
|
||||
await reloadPage();
|
||||
addCacheRoutes(routeKey);
|
||||
}
|
||||
|
||||
if (isCached) {
|
||||
this.addCacheRoute(name as AuthRoute.AllRouteKey);
|
||||
}
|
||||
/**
|
||||
* re-cache routes by route keys
|
||||
* @param routeKeys
|
||||
*/
|
||||
async function reCacheRoutesByKeys(routeKeys: RouteKey[]) {
|
||||
for await (const key of routeKeys) {
|
||||
await reCacheRoutesByKey(key);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* global breadcrumbs
|
||||
*/
|
||||
const breadcrumbs = computed(() => getBreadcrumbsByRoute(router.currentRoute.value, menus.value));
|
||||
|
||||
/**
|
||||
* reset store
|
||||
*/
|
||||
async function resetStore() {
|
||||
const routeStore = useRouteStore();
|
||||
|
||||
routeStore.$reset();
|
||||
|
||||
resetVueRoutes();
|
||||
}
|
||||
|
||||
/**
|
||||
* reset vue routes
|
||||
*/
|
||||
function resetVueRoutes() {
|
||||
removeRouteFns.forEach(fn => fn());
|
||||
removeRouteFns.length = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* init auth route
|
||||
*/
|
||||
async function initAuthRoute() {
|
||||
if (authRouteMode.value === 'static') {
|
||||
await initStaticAuthRoute();
|
||||
} else {
|
||||
await initDynamicAuthRoute();
|
||||
}
|
||||
|
||||
tabStore.initHomeTab(router);
|
||||
}
|
||||
|
||||
/**
|
||||
* init static auth route
|
||||
*/
|
||||
async function initStaticAuthRoute() {
|
||||
const { authRoutes } = createRoutes();
|
||||
|
||||
const filteredAuthRoutes = filterAuthRoutesByRoles(authRoutes, authStore.userInfo.roles);
|
||||
|
||||
handleAuthRoutes(filteredAuthRoutes);
|
||||
|
||||
setIsInitAuthRoute(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* init dynamic auth route
|
||||
*/
|
||||
async function initDynamicAuthRoute() {
|
||||
const {
|
||||
data: { routes, home }
|
||||
} = await fetchGetUserRoutes();
|
||||
|
||||
handleAuthRoutes(routes);
|
||||
|
||||
setRouteHome(home);
|
||||
|
||||
handleUpdateRootRouteRedirect(home);
|
||||
|
||||
setIsInitAuthRoute(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* handle routes
|
||||
* @param routes auth routes
|
||||
*/
|
||||
function handleAuthRoutes(routes: ElegantConstRoute[]) {
|
||||
const vueRoutes = getAuthVueRoutes(routes);
|
||||
|
||||
addRoutesToVueRouter(vueRoutes);
|
||||
|
||||
getGlobalMenus(routes);
|
||||
|
||||
getCacheRoutes(vueRoutes);
|
||||
}
|
||||
|
||||
/**
|
||||
* add routes to vue router
|
||||
* @param routes vue routes
|
||||
*/
|
||||
function addRoutesToVueRouter(routes: RouteRecordRaw[]) {
|
||||
routes.forEach(route => {
|
||||
const removeFn = router.addRoute(route);
|
||||
addRemoveRouteFn(removeFn);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* add remove route fn
|
||||
* @param fn
|
||||
*/
|
||||
function addRemoveRouteFn(fn: () => void) {
|
||||
removeRouteFns.push(fn);
|
||||
}
|
||||
|
||||
/**
|
||||
* update root route redirect when auth route mode is dynamic
|
||||
* @param redirectKey redirect route key
|
||||
*/
|
||||
function handleUpdateRootRouteRedirect(redirectKey: LastLevelRouteKey) {
|
||||
const redirect = getRoutePath(redirectKey);
|
||||
|
||||
if (redirect) {
|
||||
const rootRoute: CustomRoute = { ...ROOT_ROUTE, redirect };
|
||||
|
||||
router.removeRoute(rootRoute.name);
|
||||
|
||||
const [rootVueRoute] = getAuthVueRoutes([rootRoute]);
|
||||
|
||||
router.addRoute(rootVueRoute);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* get is auth route exist
|
||||
* @param routePath route path
|
||||
*/
|
||||
async function getIsAuthRouteExist(routePath: RouteMap[RouteKey]) {
|
||||
const routeName = getRouteName(routePath);
|
||||
|
||||
if (!routeName) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (authRouteMode.value === 'static') {
|
||||
const { authRoutes } = createRoutes();
|
||||
|
||||
return isRouteExistByRouteName(routeName, authRoutes);
|
||||
}
|
||||
|
||||
const { data } = await fetchIsRouteExist(routeName);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* get selected menu key path
|
||||
* @param selectedKey selected menu key
|
||||
*/
|
||||
function getSelectedMenuKeyPath(selectedKey: string) {
|
||||
return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
|
||||
}
|
||||
|
||||
return {
|
||||
resetStore,
|
||||
routeHome,
|
||||
menus,
|
||||
updateGlobalMenusByLocale,
|
||||
cacheRoutes,
|
||||
reCacheRoutesByKey,
|
||||
reCacheRoutesByKeys,
|
||||
breadcrumbs,
|
||||
initAuthRoute,
|
||||
isInitAuthRoute,
|
||||
setIsInitAuthRoute,
|
||||
getIsAuthRouteExist,
|
||||
getSelectedMenuKeyPath
|
||||
};
|
||||
});
|
||||
|
||||
271
src/store/modules/route/shared.ts
Normal file
271
src/store/modules/route/shared.ts
Normal file
@ -0,0 +1,271 @@
|
||||
import type { RouteRecordRaw, _RouteRecordBase, RouteLocationNormalizedLoaded } from 'vue-router';
|
||||
import type { ElegantConstRoute, RouteKey, RouteMap, LastLevelRouteKey } from '@elegant-router/types';
|
||||
import { useSvgIconRender } from '@sa/hooks';
|
||||
import { $t } from '@/locales';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
|
||||
/**
|
||||
* filter auth routes by roles
|
||||
* @param routes auth routes
|
||||
* @param roles roles
|
||||
*/
|
||||
export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: string[]) {
|
||||
const SUPER_ROLE = 'R_SUPER';
|
||||
|
||||
if (roles.includes(SUPER_ROLE)) {
|
||||
return routes;
|
||||
}
|
||||
|
||||
return routes.flatMap(route => filterAuthRouteByRoles(route, roles));
|
||||
}
|
||||
|
||||
/**
|
||||
* filter auth route by roles
|
||||
* @param route auth route
|
||||
* @param roles roles
|
||||
*/
|
||||
function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]) {
|
||||
const routeRoles = (route.meta && route.meta.roles) || [];
|
||||
|
||||
if (!routeRoles.length) {
|
||||
return [route];
|
||||
}
|
||||
|
||||
const hasPermission = routeRoles.some(role => roles.includes(role));
|
||||
|
||||
const filterRoute = { ...route };
|
||||
|
||||
if (filterRoute.children?.length) {
|
||||
filterRoute.children = filterRoute.children.flatMap(item => filterAuthRouteByRoles(item, roles));
|
||||
}
|
||||
|
||||
return hasPermission ? [filterRoute] : [];
|
||||
}
|
||||
|
||||
/**
|
||||
* get global menus by auth routes
|
||||
* @param routes auth routes
|
||||
*/
|
||||
export function getGlobalMenusByAuthRoutes(routes: ElegantConstRoute[]) {
|
||||
const menus: App.Global.Menu[] = [];
|
||||
|
||||
routes.forEach(route => {
|
||||
if (!route.meta?.hideInMenu) {
|
||||
const menu = getGlobalMenuByBaseRoute(route);
|
||||
|
||||
if (route.children?.length) {
|
||||
menu.children = getGlobalMenusByAuthRoutes(route.children);
|
||||
}
|
||||
|
||||
menus.push(menu);
|
||||
}
|
||||
});
|
||||
|
||||
return menus;
|
||||
}
|
||||
|
||||
/**
|
||||
* update locale of global menus
|
||||
* @param menus
|
||||
*/
|
||||
export function updateLocaleOfGlobalMenus(menus: App.Global.Menu[]) {
|
||||
const result: App.Global.Menu[] = [];
|
||||
|
||||
menus.forEach(menu => {
|
||||
const { i18nKey, label, children } = menu;
|
||||
|
||||
const newLabel = i18nKey ? $t(i18nKey) : label;
|
||||
|
||||
const newMenu: App.Global.Menu = {
|
||||
...menu,
|
||||
label: newLabel
|
||||
};
|
||||
|
||||
if (children?.length) {
|
||||
newMenu.children = updateLocaleOfGlobalMenus(children);
|
||||
}
|
||||
|
||||
result.push(newMenu);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* get global menu by route
|
||||
* @param route
|
||||
*/
|
||||
function getGlobalMenuByBaseRoute(route: RouteLocationNormalizedLoaded | ElegantConstRoute) {
|
||||
const { SvgIconVNode } = useSvgIconRender(SvgIcon);
|
||||
|
||||
const { name, path } = route;
|
||||
const { title, i18nKey, icon = import.meta.env.VITE_MENU_ICON, localIcon } = route.meta ?? {};
|
||||
|
||||
const label = i18nKey ? $t(i18nKey) : title!;
|
||||
|
||||
const menu: App.Global.Menu = {
|
||||
key: name as string,
|
||||
label,
|
||||
i18nKey,
|
||||
routeKey: name as RouteKey,
|
||||
routePath: path as RouteMap[RouteKey],
|
||||
icon: SvgIconVNode({ icon, localIcon, fontSize: 20 })
|
||||
};
|
||||
|
||||
return menu;
|
||||
}
|
||||
|
||||
/**
|
||||
* get cache route names
|
||||
* @param routes vue routes (two levels)
|
||||
*/
|
||||
export function getCacheRouteNames(routes: RouteRecordRaw[]) {
|
||||
const cacheNames: LastLevelRouteKey[] = [];
|
||||
|
||||
routes.forEach(route => {
|
||||
// only get last two level route, which has component
|
||||
route.children?.forEach(child => {
|
||||
if (child.component && child.meta?.keepAlive) {
|
||||
cacheNames.push(child.name as LastLevelRouteKey);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return cacheNames;
|
||||
}
|
||||
|
||||
/**
|
||||
* is route exist by route name
|
||||
* @param routeName
|
||||
* @param routes
|
||||
*/
|
||||
export function isRouteExistByRouteName(routeName: RouteKey, routes: ElegantConstRoute[]) {
|
||||
return routes.some(route => recursiveGetIsRouteExistByRouteName(route, routeName));
|
||||
}
|
||||
|
||||
/**
|
||||
* recursive get is route exist by route name
|
||||
* @param route
|
||||
* @param routeName
|
||||
*/
|
||||
function recursiveGetIsRouteExistByRouteName(route: ElegantConstRoute, routeName: RouteKey) {
|
||||
let isExist = route.name === routeName;
|
||||
|
||||
if (isExist) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (route.children && route.children.length) {
|
||||
isExist = route.children.some(item => recursiveGetIsRouteExistByRouteName(item, routeName));
|
||||
}
|
||||
|
||||
return isExist;
|
||||
}
|
||||
|
||||
/**
|
||||
* get selected menu key path
|
||||
* @param selectedKey
|
||||
* @param menus
|
||||
*/
|
||||
export function getSelectedMenuKeyPathByKey(selectedKey: string, menus: App.Global.Menu[]) {
|
||||
const keyPath: string[] = [];
|
||||
|
||||
menus.some(menu => {
|
||||
const path = findMenuPath(selectedKey, menu);
|
||||
|
||||
const find = Boolean(path?.length);
|
||||
|
||||
if (find) {
|
||||
keyPath.push(...path!);
|
||||
}
|
||||
|
||||
return find;
|
||||
});
|
||||
|
||||
return keyPath;
|
||||
}
|
||||
|
||||
/**
|
||||
* find menu path
|
||||
* @param targetKey target menu key
|
||||
* @param menu menu
|
||||
*/
|
||||
function findMenuPath(targetKey: string, menu: App.Global.Menu): string[] | null {
|
||||
const path: string[] = [];
|
||||
|
||||
function dfs(item: App.Global.Menu): boolean {
|
||||
path.push(item.key);
|
||||
|
||||
if (item.key === targetKey) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (item.children) {
|
||||
for (const child of item.children) {
|
||||
if (dfs(child)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
path.pop();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (dfs(menu)) {
|
||||
return path;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* transform menu to breadcrumb
|
||||
* @param menu
|
||||
*/
|
||||
function transformMenuToBreadcrumb(menu: App.Global.Menu) {
|
||||
const { children, ...rest } = menu;
|
||||
|
||||
const breadcrumb: App.Global.Breadcrumb = {
|
||||
...rest
|
||||
};
|
||||
|
||||
if (children?.length) {
|
||||
breadcrumb.options = children.map(transformMenuToBreadcrumb);
|
||||
}
|
||||
|
||||
return breadcrumb;
|
||||
}
|
||||
|
||||
/**
|
||||
* get breadcrumbs by route
|
||||
* @param route
|
||||
* @param menus
|
||||
*/
|
||||
export function getBreadcrumbsByRoute(
|
||||
route: RouteLocationNormalizedLoaded,
|
||||
menus: App.Global.Menu[]
|
||||
): App.Global.Breadcrumb[] {
|
||||
const key = route.name as string;
|
||||
const activeKey = route.meta?.activeMenu;
|
||||
|
||||
const menuKey = activeKey || key;
|
||||
|
||||
for (const menu of menus) {
|
||||
if (menu.key === menuKey) {
|
||||
const breadcrumbMenu = menuKey !== activeKey ? menu : getGlobalMenuByBaseRoute(route);
|
||||
|
||||
return [transformMenuToBreadcrumb(breadcrumbMenu)];
|
||||
}
|
||||
|
||||
if (menu.children?.length) {
|
||||
const result = getBreadcrumbsByRoute(route, menu.children);
|
||||
if (result.length > 0) {
|
||||
return [transformMenuToBreadcrumb(menu), ...result];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
Reference in New Issue
Block a user