三步实现 Ant Design Pro 混合布局下的菜单联动显示
项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro 你是否在使用 Ant Design Pro 的混合布局（mix）时遇到这样的困扰：顶部菜单点击后，左侧菜单无法同步显示对应名称？本文将通过修改布局配置、定制菜单渲染和状态管理三个步骤，彻底解决这一问题，让你的管理系统导航体验更流畅。
混合布局的菜单联动痛点
Ant Design Pro 的混合布局（mix）模式默认将菜单分为顶部和侧边两部分，但原生并未实现顶部菜单点击后自动显示对应侧边菜单名称的功能。这种割裂感会导致用户在复杂系统中迷失导航位置，降低操作效率。
项目默认布局配置文件 config/defaultSettings.ts 中明确设置了布局模式：
const Settings: ProLayoutProps & {
pwa?: boolean;
logo?: string;
} = {
navTheme: 'light',
colorPrimary: '#1890ff',
layout: 'mix', // 混合布局模式
contentWidth: 'Fluid',
// ...其他配置
};
实现思路与技术方案
要实现顶部菜单点击时显示对应左侧菜单名称，需要完成三个核心任务：
- 状态管理：存储当前激活的顶部菜单键值
- 菜单渲染定制：根据激活状态动态修改左侧菜单标题
- 事件监听：捕获顶部菜单点击事件并更新状态
下面我们将逐一实现这些功能。
步骤一：扩展应用状态管理
首先需要在应用初始状态中添加存储当前顶部菜单键的字段。修改 src/app.tsx 文件，在 getInitialState 函数中增加 activeTopMenuKey 状态：
export async function getInitialState(): Promise<{
settings?: Partial<LayoutSettings>;
currentUser?: API.CurrentUser;
loading?: boolean;
fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
activeTopMenuKey?: string; // 新增：存储当前顶部菜单键
}> {
// ...原有代码
return {
fetchUserInfo,
currentUser,
settings: defaultSettings as Partial<LayoutSettings>,
activeTopMenuKey: '', // 初始化状态
};
}
步骤二：定制菜单渲染逻辑
接下来需要自定义菜单渲染函数，根据当前激活的顶部菜单键动态显示左侧菜单标题。在 src/app.tsx 的 layout 配置中添加 menuRender 和 menuItemRender 属性：
export const layout: RunTimeLayoutConfig = ({
initialState,
setInitialState,
}) => {
return {
// ...原有配置
menuRender: (menuProps) => {
// 自定义菜单渲染
return (
<ProMenu
{...menuProps}
onSelect={(selectedKeys) => {
// 处理菜单选择事件
const topMenuKey = selectedKeys[0]?.split('/')[1];
setInitialState({
...initialState,
activeTopMenuKey: topMenuKey,
});
}}
/>
);
},
menuItemRender: (item, dom) => {
// 自定义菜单项渲染
if (initialState?.activeTopMenuKey && item.path?.includes(initialState.activeTopMenuKey)) {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<span style={{ marginRight: 8 }}>{item.name}</span>
<span style={{ color: '#1890ff', fontSize: '12px' }}>
{initialState.activeTopMenuKey}
</span>
</div>
);
}
return dom;
},
// ...原有配置
};
};
步骤三：处理顶部菜单点击事件
最后需要在顶部菜单点击时更新状态。修改 src/app.tsx 中的 menuHeaderRender 属性：
export const layout: RunTimeLayoutConfig = ({
initialState,
setInitialState,
}) => {
return {
// ...原有配置
menuHeaderRender: (logo, title) => {
return (
<div onClick={() => {
// 处理顶部菜单点击事件
const currentPath = history.location.pathname;
const topMenuKey = currentPath.split('/')[1];
setInitialState({
...initialState,
activeTopMenuKey: topMenuKey,
});
}}>
{logo}
{title}
</div>
);
},
// ...原有配置
};
};
实现效果与验证
完成以上修改后，当用户点击顶部菜单时，左侧菜单会自动显示对应的顶部菜单名称。你可以通过以下步骤验证功能是否生效：
- 启动项目：
npm start - 访问系统首页，观察顶部菜单和左侧菜单
- 点击不同的顶部菜单选项
- 确认左侧菜单是否显示了对应的顶部菜单名称
如果一切正常，你将看到左侧菜单项旁显示当前激活的顶部菜单名称，提升了混合布局下的导航体验。
总结与扩展
通过本文介绍的三个步骤，我们成功实现了 Ant Design Pro 混合布局下顶部菜单与左侧菜单的联动显示。核心思路是通过状态管理存储当前激活的顶部菜单键，然后通过自定义菜单渲染函数动态显示菜单名称。
这一方案还可以进一步扩展，例如：
- 添加动画过渡效果，提升用户体验
- 持久化保存菜单状态，刷新页面后仍保持当前选择
- 根据不同角色定制菜单显示逻辑
完整的实现代码可参考项目中的 src/app.tsx 文件，更多布局定制技巧请查阅 Ant Design Pro 官方文档。
注：上图为项目 logo，实际菜单联动效果需根据上述代码实现后查看
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
