服务端获取的菜单 icon 不会自动转化

  • icon 需要手工映射
  • con 只能用 dom
  • import * from ‘@ant-design/icon’ 会导致 js 大小增加 2m 左右，要慎重

服务端获取的菜单重定向不生效，重定向需要配置在路由中才会生效

  • 服务器请求回来应该自己处理，是不会走到插件的逻辑的
  • 权限的请求reload 可以实现，但是菜单不行

封装一个 Icon组件，后端返回的 icon字符串就是 key，枚举 ant-design/icons
https://github.com/ant-design/ant-design-pro/issues/8101
app.tsx

  1. import { Icon } from '@/components';
  3. export const layout: RunTimeLayoutConfig = () => {
  4.   return {
  5.     menu: {
  6.       // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
  7.       params: {
  8.         userId: initialState?.currentUser?.userid,
  9.       },
  10.       request: async (params, defaultMenuData) => {
  11.         // initialState.currentUser 中包含了所有用户信息
  12.         const menuData = await fetchMenuData();
  13.         return menuData;
  14.       },
  15.     },
  16.     menuDataRender: (menus: MenuDataItem[]) => {
  17.       return menus.map(it => {
  18.         if(it.icon) {
  19.           it.icon = <Icon type={it.icon} />
  20.         }
  21.         return it;
  22.       });
  23.     },
  24.   };
  25. };

layout.request 请求菜单

pro菜单图标 https://pro.ant.design/zh-cn/docs/advanced-menu
layout布局 https://umijs.org/zh-CN/plugins/plugin-layout

菜单图标

@ant-design/icons 图标 https://ant-design.antgroup.com/components/icon-cn
menuDataRender https://procomponents.ant.design/components/layout/#menudataitem