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

基本配置

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

  1. // 顶部菜单栏配置
  2. export const headerMenuConfig = [
  3.   {
  4.     name: 'Home', // 菜单名称
  5.     path: '/', // 菜单路径
  6.     icon: 'message', // 菜单图标
  7.   },
  8. ];
  9. // 侧边菜单栏配置
  10. export const asideMenuConfig = [
  11.   {
  12.     name: 'Dashboard', // 一级菜单名称
  13.     path: '/', // 一级菜单路径
  14.     icon: 'edit', // 一级菜单图标
  15.     // 二级菜单配置
  16.     children: [
  17.       {
  18.         name: 'Analysis', // 二级菜单名称
  19.         path: '/dashboard/analysis', // 二级菜单路径
  20.       },
  21.       {
  22.         name: 'DashboardChild',
  23.         path: '/',
  24.         icon: 'add',
  25.         // 三级菜单配置
  26.         children: [
  27.           {
  28.             name: 'Monitor', // 三级菜单名称
  29.             path: '/dashboard/monitor', // 三级菜单路径
  30.           },
  31.         ],
  32.       },
  33.     ],
  34.   },
  35.   // ...
  36. ];

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

菜单图标

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

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

菜单权限

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

  1. export const asideMenuConfig = [
  2.   {
  3.     name: 'Home',
  4.     path: '/',
  5. +   auth: ['guest']
  6.   },
  7. ];

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

  1. + import { useAuth } from 'ice';
  3. - function getNavMenuItems(menusData, initIndex) {
  4. + function getNavMenuItems(menusData, initIndex, auth) {
  6. - return menusData
  7. -   .filter(item => item.name && !item.hideInMenu)
  8. -   .map((item, index) => {
  9. -     return getSubMenuOrItem(item, `${initIndex}-${index}`);
  10. -   });
  11. + return menusData.filter(item => {
  12. +   let roleAuth = true;
  13. +   if (auth && item.auth && item.auth instanceof Array) {
  14. +     if (item.auth.length) {
  15. +       // 获取当前用户是否有该菜单的权限
  16. +       roleAuth = item.auth.some(key => auth[key]);
  17. +     }
  18. +   }
  19. +   return item.name && !item.hideInMenu && roleAuth;
  20. + }).map((item, index) => {
  21. +   getSubMenuOrItem(item, `${initIndex}-${index}`, auth)
  22. + });
  23. }
  25. - function getSubMenuOrItem(item, index) {
  26. + function getSubMenuOrItem(item, index, auth) {
  27.   if (item.children && item.children.some(child => child.name)) {
  28. -   const childrenItems = getNavMenuItems(item.children, index);
  29. +   const childrenItems = getNavMenuItems(item.children, index, auth);
  30.     // ...
  31.   }
  32. }
  34. const Navigation = () => {
  35.   // 获取权限数据 更多权限管理的内容可以参考: https://ice.work/guide/advanced/auth.html
  36. + const [auth] = useAuth();
  37.   return (
  38.     <Nav embeddable activeDirection="right">
  39. -     {getNavMenuItems(asideMenuConfig, 0)}
  40. +     {getNavMenuItems(asideMenuConfig, 0, auth)}
  41.     </Nav>
  42.   )
  43. }

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