Skip to main content

菜单配置

Pro 模板中,菜单按照一定的约定进行配置,用来描述菜单栏的结构关系。以 BasicLayout 布局为例,菜单配置文件约定在 src/layouts/BasicLayout/menuConfig.ts中。

基本配置

菜单配置包含 headerMenuConfig 和 asideMenuConfig 两种形式,headerMenuConfig 用于顶部菜单栏的渲染,asideMenuConfig 用于侧边菜单栏的渲染,这样方便在统一的位置管理应用布局的菜单信息:

// 顶部菜单栏配置
export const headerMenuConfig = [
{
name: 'Home', // 菜单名称
path: '/', // 菜单路径
icon: 'message', // 菜单图标
},
];
// 侧边菜单栏配置
export const asideMenuConfig = [
{
name: 'Dashboard', // 一级菜单名称
path: '/', // 一级菜单路径
icon: 'edit', // 一级菜单图标
// 二级菜单配置
children: [
{
name: 'Analysis', // 二级菜单名称
path: '/dashboard/analysis', // 二级菜单路径
},
{
name: 'DashboardChild',
path: '/',
icon: 'add',
// 三级菜单配置
children: [
{
name: 'Monitor', // 三级菜单名称
path: '/dashboard/monitor', // 三级菜单路径
},
],
},
],
},
// ...
];

完整的菜单渲染逻辑可参考 src/layouts/BasicLayout/components/PageNav/index.tsx

菜单图标

我们默认使用 Icon 这个组件渲染图标,可以使用哪些图标可以在组件文档中看到,如果有其他自定义的图标需求,将代码改为对应图标组件即可。

<SubNav key={item.name} icon={item.icon} label={item.name}>
{childrenItems}
</SubNav>

菜单权限

首先在 src/layouts/BasicLayout/menuConfig.ts 中增加以下的内容:

export const asideMenuConfig = [
{
name: 'Home',
path: '/',
+ auth: ['guest']
},
];

然后在 src/layouts/BasicLayout/components/PageNav/index.tsx中配置以下内容:

+ import { useAuth } from 'ice';

- function getNavMenuItems(menusData, initIndex) {
+ function getNavMenuItems(menusData, initIndex, auth) {

- return menusData
- .filter(item => item.name && !item.hideInMenu)
- .map((item, index) => {
- return getSubMenuOrItem(item, `${initIndex}-${index}`);
- });
+ return menusData.filter(item => {
+ let roleAuth = true;
+ if (auth && item.auth && item.auth instanceof Array) {
+ if (item.auth.length) {
+ // 获取当前用户是否有该菜单的权限
+ roleAuth = item.auth.some(key => auth[key]);
+ }
+ }
+ return item.name && !item.hideInMenu && roleAuth;
+ }).map((item, index) => {
+ getSubMenuOrItem(item, `${initIndex}-${index}`, auth)
+ });
}

- function getSubMenuOrItem(item, index) {
+ function getSubMenuOrItem(item, index, auth) {
if (item.children && item.children.some(child => child.name)) {
- const childrenItems = getNavMenuItems(item.children, index);
+ const childrenItems = getNavMenuItems(item.children, index, auth);
// ...
}
}

const Navigation = () => {
// 获取权限数据 更多权限管理的内容可以参考: https://ice.work/guide/advanced/auth.html
+ const [auth] = useAuth();
return (
<Nav embeddable activeDirection="right">
- {getNavMenuItems(asideMenuConfig, 0)}
+ {getNavMenuItems(asideMenuConfig, 0, auth)}
</Nav>
)
}

完整的菜单权限实现可参考 src/layouts/BasicLayout/components/PageNav/index.tsx