refactor(layout): 优化路由渲染逻辑

- 将路由映射的构建过程移至 useEffect 中,仅在初始化时执行
-重构 renderRoutes 函数,分离路由映射构建和菜单渲染逻辑- 优化子路由的处理方式,提高代码可读性和性能
master
钟良源 6 months ago
parent dd8e7c605a
commit 1004569bc0

@ -103,17 +103,12 @@ function PageLayout({ children }: { children: ReactNode }) {
const paddingTop = showNavbar ? { paddingTop: navbarHeight } : {};
const paddingStyle = { ...paddingLeft, ...paddingTop };
function renderRoutes(locale) {
routeMap.current.clear();
return function travel(_routes: IRoute[], level, parentNode = []) {
return _routes.map((route) => {
// 初始化时创建并实例路由映射
useEffect(() => {
// 仅构建 routeMap不渲染菜单
function buildRouteMap(_routes: IRoute[], parentNode = []) {
_routes.forEach((route) => {
const { breadcrumb = true, ignore } = route;
const iconDom = getIconFromKey(route.key);
const titleDom = (
<>
{iconDom} {locale[route.name] || route.name}
</>
);
routeMap.current.set(
`/${route.key}`,
@ -128,13 +123,37 @@ function PageLayout({ children }: { children: ReactNode }) {
breadcrumb ? [...parentNode, route.name, child.name] : []
);
}
return !ignore;
});
if (!ignore && visibleChildren.length) {
buildRouteMap(visibleChildren, [...parentNode, route.name]);
}
});
}
buildRouteMap(routes);
}, [routes]);
function renderRoutes(locale) {
return function travel(_routes: IRoute[], level, parentNode = []) {
return _routes.map((route) => {
const { ignore } = route;
const iconDom = getIconFromKey(route.key);
const titleDom = (
<>
{iconDom} {locale[route.name] || route.name}
</>
);
const visibleChildren = (route.children || []).filter((child) => {
return !child.ignore;
});
if (ignore) {
return '';
}
if (visibleChildren.length) {
menuMap.current.set(route.key, { subMenu: true });
return (
@ -143,6 +162,7 @@ function PageLayout({ children }: { children: ReactNode }) {
</SubMenu>
);
}
menuMap.current.set(route.key, { menuItem: true });
return (
<MenuItem key={route.key}>

Loading…
Cancel
Save