antd pro 动态菜单实现及icon图标不显示问题

1. app.ts  layout 中 添加menu

import {fetchMenuData} from '@/services/ant-design-pro/api';
//省略代码
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
   // ......省略代码
     menu: {
      
      locale: false, //关闭国际化

      params:initialState,
      request: async (params, defaultMenuData) => {
        // initialState.currentUser 中包含了所有用户信息
        const menuData = await fetchMenuData();
        return menuData;
      },
    },

}

2. api.ts 中 fetchMenuData

import { MenuDataItem } from '@ant-design/pro-layout';
/** 获取当前的用户的菜单 GET /api/menuData */
export async function fetchMenuData() {
  return request<MenuDataItem[]>('/api/menuData', {
    method: 'GET',
  });
}

3. 菜单数据模拟 mock 下新建menu.ts

export default {
  'GET /api/menuData': [
    {
      path: '/user',
      layout: false,
      routes: [
        {
          name: 'login',
          path: '/user/login',
          component: './User/Login',
        },
      ],
    },
    {
      name: '首页',
      icon: 'HomeOutlined',
      path: '/',
      component: './index',
    },
    {
      path: '/system',
      name: '系统管理',
      icon: 'SettingOutlined',
      routes: [
        {
          name: '用户管理',
          icon: 'UserOutlined',
          path: '/system/UserManage',
          component: './System/UserManage/userList',
        },
      ]
    },

  ]
}

4. routes.ts

export default [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        name: 'login',
        path: '/user/login',
        component: './User/Login',
      },
    ],
  },
  {
    name: '首页',
    icon: 'HomeOutlined',
    path: '/',
    component: './index',
  },
  {
    path: '/system',
    name: '系统管理',
    icon: 'SettingOutlined',
    routes: [
      {
        name: '用户管理',
        icon: 'UserOutlined',
        path: '/system/UserManage',
        component: './System/UserManage/userList',
      },
    ]
  },
]

5. 动态菜单icon不显示：

（1）utils下新建  fixMenuItemIcon.ts

import React from 'react';
import { MenuDataItem } from '@ant-design/pro-layout';
import * as allIcons from '@ant-design/icons';

// FIX从接口获取菜单时icon为string类型
const fixMenuItemIcon = (menus: MenuDataItem[], iconType = 'Outlined'): MenuDataItem[] => {
  menus.forEach((item) => {
    const { icon, children } = item;
    if (typeof icon === 'string') {
      let fixIconName = icon.slice(0, 1).toLocaleUpperCase() + icon.slice(1) + iconType;
      // @ts-ignore
      item.icon = React.createElement(allIcons[fixIconName] || allIcons[icon]);
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    children && children.length > 0 ? (item.children = fixMenuItemIcon(children)) : null;
  });
  return menus;
};

export default fixMenuItemIcon;

（2）app.ts 中增加

menuDataRender: (menuData:MenuDataItem[]) => fixMenuItemIcon(menuData),

    menuDataRender: (menuData:MenuDataItem[]) => fixMenuItemIcon(menuData),
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      locale: false, //关闭国际化
      /*params: {
        userId: initialState?.currentUser?.userid,
      },*/

      params:initialState,
      request: async (params, defaultMenuData) => {
        // initialState.currentUser 中包含了所有用户信息
        const menuData = await fetchMenuData();
        return menuData;
      },
    },