1. 屏蔽菜单展开/收缩功能:app.tsx文件export const layout {}中配置collapsedButtonRender: false
2. 菜单布局更改
3.隐藏布局
4. 隐藏某一菜单及子菜单,hideInMenu: true,hideChildrenInMenu: true
// routes.ts
export default [
{
name: 'test',
path: '/test',
icon: 'smile',
component: './Test',
hideInMenu: true, // 隐藏菜单项
hideChildrenInMenu: true, // 隐藏菜单子项
}
]
4. 菜单配图标(包括二级)
// routes.ts
path: '/index',
component: '/index',
menu: {
name: 'overview',
icon: 'testicon',
},
// app.tsx
// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
return {
// 其他项省略...
menuHeaderRender: undefined,
collapsedButtonRender: false, // 菜单简化 开关
// 二级菜单图标
menuItemRender: (menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || !menuItemProps.path) {
return defaultDom;
}
// 支持二级菜单显示icon
return (
<Link to={menuItemProps.path}>
{menuItemProps.pro_layout_parentKeys
&& menuItemProps.pro_layout_parentKeys.length > 0 &&
menuItemProps.icon}{defaultDom}
</Link>
);
},
// 自定义 403 页面
// unAccessible: <div>unAccessible</div>,
...initialState?.settings,
};
};