tashow/tashow-manager
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 流式布局点击一级菜单定位到子路由

Browse Source
This commit is contained in:
wuxichen
2025-10-20 14:05:12 +08:00
parent 5163e4dee8
commit 1e5ea1879b
5 changed files with 138 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/proxy.ts
View File

@@ -17,7 +17,7 @@ export default {
// 要代理的地址
// http://192.168.1.231:48080 伟强
// https://petshy.tashowz.com/
target: 'http://192.168.1.231:48080/',
target: 'https://petshy.tashowz.com/',
// 配置了这个可以从 http 代理到 https
// 依赖 origin 的功能可能需要这个，比如 cookie
changeOrigin: true,

34
config/routes.ts
View File

@@ -40,11 +40,43 @@ export default [
routes: [
{
name: '订单管理',
path: '/trade',
path: '/trade/order',
component: './trade/order/index',
},
],
},
{
path: '/prod1',
name: '商品管理1',
routes: [
{
path: '', // 空路径，匹配 /prod
redirect: 'list', // 相对路径重定向
},
{
name: '商品1',
path: '/prod1/list',
component: './prod/list/index',
},
{
name: '类目管理',
path: '/prod1/category',
component: './prod/category/index',
},
],
},
// {
// path: "/system",
// name: "系统管理",
// routes: [
// {
// name: "商品管理",
// path: "/system/menu",
// component: "./system/menu/index",
// },
// ],
// },
{
component: '404',
layout: false,

114
src/app.tsx
View File

@@ -19,6 +19,8 @@ import '@ant-design/v5-patch-for-react-19';
import { useDictStore } from '@/hooks/stores/dict';
import { getAccessToken, getTenantId } from '@/utils/auth';
import { CACHE_KEY, useCache } from './hooks/web/useCache';
import type { MenuVO } from './services/system/menu';
import { loopMenuItem } from './utils/menuUtils';
const isDev = process.env.NODE_ENV === 'development';
const isDevOrTest = isDev || process.env.CI;
@@ -26,6 +28,8 @@ const loginPath = '/user/login';
// 全局存储菜单数据和路由映射
const dynamicRoutesAdded = false;
// 标记是否已添加动态路由
/**
* @see https://umijs.org/docs/api/runtime-config#getinitialstate
* */
@@ -33,6 +37,7 @@ export async function getInitialState(): Promise<{
settings?: Partial<LayoutSettings>;
currentUser?: UserInfoVO;
loading?: boolean;
menus?: MenuVO[];
fetchUserInfo?: () => Promise<UserInfoVO | undefined>;
}> {
const { wsCache } = useCache();
@@ -70,12 +75,14 @@ export async function getInitialState(): Promise<{
) {
const currentUser = wsCache.get(CACHE_KEY.USER);
if (getAccessToken() && !currentUser) {
fetchUserInfo();
await fetchUserInfo();
}
const menus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
console.log(111);
return {
fetchUserInfo,
currentUser,
menus,
settings: defaultSettings as Partial<LayoutSettings>,
};
}
@@ -227,87 +234,36 @@ export const request: RequestConfig = {
return searchParams.toString();
},
};
// umi 4 使用 modifyRoutes
export function patchClientRoutes({ routes }: { routes: any }) {
// Umi 4 支持异步的 patchClientRoutes
export async function patchClientRoutes({ routes }: any) {
const { wsCache } = useCache();
const globalMenus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
// 先尝试从缓存获取
let menus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
// 如果缓存没有，且有 token，则获取
if (!menus && getAccessToken()) {
try {
const data = await getInfo();
wsCache.set(CACHE_KEY.USER, data);
wsCache.set(CACHE_KEY.ROLE_ROUTERS, data.menus);
menus = data.menus;
} catch (error) {
console.error('获取菜单失败:', error);
return;
}
}
if (!menus || menus.length === 0) {
return;
}
const routerIndex = routes.findIndex((item: any) => item.path === '/');
const parentId = routes[routerIndex].id;
if (globalMenus) {
routes[routerIndex].routes.push(...loopMenuItem(globalMenus, parentId));
if (menus) {
const r = loopMenuItem(menus, parentId);
console.log(r, routes);
routes[routerIndex].routes.push(...r);
}
}
const loopMenuItem = (menus: any[], pId: number | string): any[] => {
return menus.flatMap((item) => {
let Component: React.ComponentType<any> | null = null;
// console.log(findFirstLeafRoute(item), 'item');
if (item.component && item.component.length > 0) {
// 防止配置了路由，但本地暂未添加对应的页面，产生的错误
Component = React.lazy(() => {
const importComponent = () => import(`@/pages/${item.component}`);
const import404 = () => import('@/pages/404');
return importComponent().catch(import404);
});
}
if (item.children && item.children.length > 0) {
return [
{
path: item.path,
name: item.name,
// icon: item.icon,
id: item.id,
parentId: pId,
children: [
{
path: item.url,
element: <Navigate to={item.children[0].url} replace />,
},
...loopMenuItem(item.children, item.menuID),
],
},
];
} else {
// console.log(findFirstLeafRoute(newItem));
return [
{
path: item.path,
name: item.name,
// icon: item.icon,
id: item.menuID,
parentId: pId,
redirect: '/system/tenant/list',
element: (
<React.Suspense
fallback={<Spin style={{ width: '100%', height: '100%' }} />}
>
{Component && <Component />}
</React.Suspense>
),
children: [], // 添加缺失的 children 属性
},
];
}
});
};
const _findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {
// 如果没有子菜单，返回当前路径
if (!menuItem.children || menuItem.children.length === 0) {
return parent + menuItem.path;
}
// 递归查找第一个叶子节点
for (const child of menuItem.children) {
// const leafRoute = findFirstLeafRoute(child, menuItem.path + "/");
const leafRoute = _findFirstLeafRoute(child, `${menuItem.path}/`);
if (leafRoute) {
return leafRoute;
}
}
return null;
};

97
src/utils/menuUtils.ts
View File

@@ -1,97 +0,0 @@
// src/utils/menuUtils.ts
import { MenuVO } from "@/services/system/menu";
import type { MenuDataItem } from "@ant-design/pro-components";
// src/utils/menuUtils.ts
// src/utils/menuUtils.ts
// src/utils/route.ts
export function transformMenuToRoutes(menuData: MenuVO[]): any[] {
return menuData.map((item) => ({
path: item.path,
name: item.name,
icon: item.icon,
component: item.component,
routes: item.children ? transformMenuToRoutes(item.children) : undefined,
}));
}
// src/utils/route.ts
export function transformBackendMenuToFlatRoutes(menuData: any[]) {
const flatRoutes: any[] = [];
function processMenu(items: any[], parentRouteId = "ant-design-pro-layout") {
items.forEach((item) => {
const currentRouteId = `route-${item.id}`;
// 处理路径 - 如果是子路由，需要组合完整路径
let fullPath = item.path;
if (item.parentId !== 0 && !item.path.startsWith("/")) {
// 子路由需要相对路径
fullPath = item.path;
}
const route: any = {
id: currentRouteId,
path: fullPath,
name: item.name,
parentId: parentRouteId,
};
// 添加图标（如果不是 # 的话）
if (item.icon && item.icon !== "#") {
route.icon = item.icon;
}
// 添加组件路径
if (item.component) {
// 转换组件路径为动态导入格式
route.component = item.component;
}
// 其他属性
if (!item.visible) {
route.hideInMenu = true;
}
flatRoutes.push(route);
// 递归处理子菜单
if (item.children && item.children.length > 0) {
processMenu(item.children, currentRouteId);
}
});
}
processMenu(menuData);
return flatRoutes;
}
export function transformMenuData(menuData: any[]) {
const transformItem = (item: any, parentPath = "") => {
const fullPath = item.path.startsWith("/")
? item.path
: `${parentPath}/${item.path}`;
const result: any = {
path: fullPath,
name: item.name,
key: `${item.id}`,
};
if (item.icon && item.icon !== "#") {
result.icon = item.icon;
}
if (!item.visible) {
result.hideInMenu = true;
}
if (item.children && item.children.length > 0) {
result.children = item.children.map((child: any) =>
transformItem(child, fullPath)
);
}
return;
result;
};
return menuData.map((item) => transformItem(item));
}

69
src/utils/menuUtils.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { Navigate } from '@umijs/max';
import { Spin } from 'antd';
import React from 'react';
export const loopMenuItem = (menus: any[], pId: number | string): any[] => {
// console.log(menus, "menus");
return menus.flatMap((item) => {
let Component: React.ComponentType<any> | null = null;
if (item.component && item.component.length > 0) {
// 防止配置了路由，但本地暂未添加对应的页面，产生的错误
Component = React.lazy(() => {
const importComponent = () => import(`@/pages/${item.component}`);
const import404 = () => import('@/pages/404');
return importComponent().catch(import404);
});
}
if (item.children && item.children.length > 0) {
return [
{
path: item.path,
name: item.name,
// icon: item.icon,
id: item.id,
parentId: pId,
children: [
{
path: item.path,
element: (
<Navigate
to={getFirstLeafPath(item.children, item.path)}
replace
/>
),
},
...loopMenuItem(item.children, item.menuID),
],
},
];
} else {
return [
{
path: item.path,
name: item.name,
// icon: item.icon,
id: item.menuID,
parentId: pId,
element: (
<React.Suspense
fallback={<Spin style={{ width: '100%', height: '100%' }} />}
>
{Component && <Component />}
</React.Suspense>
),
children: [], // 添加缺失的 children 属性
},
];
}
});
};
function getFirstLeafPath(menus: any[], parentPath: string): string {
const firstMenu = menus[0];
const currentPath = `${parentPath}/${firstMenu.path}`;
if (firstMenu.children && firstMenu.children.length > 0) {
return getFirstLeafPath(firstMenu.children, currentPath);
} else {
return currentPath;
}
}