antdesignpro 动态菜单的icon图标怎么才能显示
寻找能让菜单的icon图标显示的修改方法
app.tsx中的内容
import fixMenuItemIcon from './fixMenultemIcon';
import { SmileOutlined, HeartOutlined,DashboardOutlined } from '@ant-design/icons';
// 引入了第1步中api.ts中定义的currentUserMenus接口，并定义别名queryCurrentUserMenus
import { currentUserMenus as queryCurrentUserMenus } from './services/ant-design-pro/api';
import Footer from '@/components/Footer';
import RightContent from '@/components/RightContent';
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { PageLoading, SettingDrawer } from '@ant-design/pro-components';
import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
import type { RunTimeLayoutConfig } from 'umi';
import {
history
} from 'umi';
import defaultSettings from '../config/defaultSettings';
const loginPath = '/user/login';
const IconMap = {
smile: <SmileOutlined />,
heart: <HeartOutlined />,
dashed:<DashboardOutlined />
};
const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] => {
return menus.map(({ icon, routes, ...item }) => {
return {
icon: icon && IconMap[icon as string],
routes: routes && loopMenuItem(routes),
...item,
}
});
}
/** 获取用户信息比较慢的时候会展示一个 loading */
export const initialStateConfig = {
loading: <PageLoading />,
};
/**
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
* */
export async function getInitialState(): Promise<{
settings?: Partial<LayoutSettings>;
currentUser?: API.CurrentUser;
loading?: boolean;
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
menuData?: MenuDataItem[] | undefined;
fetchUserMenus?: () => Promise<MenuDataItem[] | undefined>;
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
const fetchUserInfo = async () => {
try {
const msg = await queryCurrentUser();
return msg.data;
} catch (error) {
history.push(loginPath);
}
return undefined;
};
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
const fetchUserMenus = async () => {
try {
const menuData = await queryCurrentUserMenus();
return loopMenuItem(menuData.data);
} catch (error) {
history.push(loginPath);
}
return undefined;
};
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
// 如果不是登录页面，执行
if (history.location.pathname !== loginPath) {
const currentUser = await fetchUserInfo();
const currentUserMenus = await fetchUserMenus();
return {
fetchUserInfo,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
fetchUserMenus,
menuData: currentUserMenus,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
currentUser,
settings: defaultSettings,
};
}
return {
fetchUserInfo,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
fetchUserMenus,
menuData: [],
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
settings: defaultSettings,
};
}
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
return {
rightContentRender: () => <RightContent />,
disableContentMargin: false,
waterMarkProps: {
content: initialState?.currentUser?.name,
},
footerRender: () => <Footer />,
onPageChange: () => {
const { location } = history;
// 如果没有登录，重定向到 login
if (!initialState?.currentUser && location.pathname !== loginPath) {
history.push(loginPath);
}
},
menuHeaderRender: undefined,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
menuDataRender: () => {
return fixMenuItemIcon(initialState?.menuData);
},
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
// 自定义 403 页面
// unAccessible: <div>unAccessible</div>,
// 增加一个 loading 的状态
childrenRender: (children, props) => {
// if (initialState?.loading) return <PageLoading />;
return (
<>
{children}
{!props.location?.pathname?.includes('/login') && (
<SettingDrawer
disableUrlParams
enableDarkTheme
settings={initialState?.settings}
onSettingChange={(settings) => {
setInitialState((preInitialState) => ({
...preInitialState,
settings,
}));
}}
/>
)}
</>
);
},
...initialState?.settings,
};
}import fixMenuItemIcon from './fixMenultemIcon';
import { SmileOutlined, HeartOutlined,DashboardOutlined } from '@ant-design/icons';
// 引入了第1步中api.ts中定义的currentUserMenus接口，并定义别名queryCurrentUserMenus
import { currentUserMenus as queryCurrentUserMenus } from './services/ant-design-pro/api';
import Footer from '@/components/Footer';
import RightContent from '@/components/RightContent';
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { PageLoading, SettingDrawer } from '@ant-design/pro-components';
import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
import type { RunTimeLayoutConfig } from 'umi';
import {
history
} from 'umi';
import defaultSettings from '../config/defaultSettings';
const loginPath = '/user/login';
const IconMap = {
smile: <SmileOutlined />,
heart: <HeartOutlined />,
dashed:<DashboardOutlined />
};
const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] => {
return menus.map(({ icon, routes, ...item }) => {
return {
icon: icon && IconMap[icon as string],
routes: routes && loopMenuItem(routes),
...item,
}
});
}
/** 获取用户信息比较慢的时候会展示一个 loading */
export const initialStateConfig = {
loading: <PageLoading />,
};
/**
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
* */
export async function getInitialState(): Promise<{
settings?: Partial<LayoutSettings>;
currentUser?: API.CurrentUser;
loading?: boolean;
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
menuData?: MenuDataItem[] | undefined;
fetchUserMenus?: () => Promise<MenuDataItem[] | undefined>;
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
const fetchUserInfo = async () => {
try {
const msg = await queryCurrentUser();
return msg.data;
} catch (error) {
history.push(loginPath);
}
return undefined;
};
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
const fetchUserMenus = async () => {
try {
const menuData = await queryCurrentUserMenus();
return loopMenuItem(menuData.data);
} catch (error) {
history.push(loginPath);
}
return undefined;
};
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
// 如果不是登录页面，执行
if (history.location.pathname !== loginPath) {
const currentUser = await fetchUserInfo();
const currentUserMenus = await fetchUserMenus();
return {
fetchUserInfo,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
fetchUserMenus,
menuData: currentUserMenus,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
currentUser,
settings: defaultSettings,
};
}
return {
fetchUserInfo,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
fetchUserMenus,
menuData: [],
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
settings: defaultSettings,
};
}
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
return {
rightContentRender: () => <RightContent />,
disableContentMargin: false,
waterMarkProps: {
content: initialState?.currentUser?.name,
},
footerRender: () => <Footer />,
onPageChange: () => {
const { location } = history;
// 如果没有登录，重定向到 login
if (!initialState?.currentUser && location.pathname !== loginPath) {
history.push(loginPath);
}
},
menuHeaderRender: undefined,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
menuDataRender: () => {
return fixMenuItemIcon(initialState?.menuData);
},
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
// 自定义 403 页面
// unAccessible: <div>unAccessible</div>,
// 增加一个 loading 的状态
childrenRender: (children, props) => {
// if (initialState?.loading) return <PageLoading />;
return (
<>
{children}
{!props.location?.pathname?.includes('/login') && (
<SettingDrawer
disableUrlParams
enableDarkTheme
settings={initialState?.settings}
onSettingChange={(settings) => {
setInitialState((preInitialState) => ({
...preInitialState,
settings,
}));
}}
/>
)}
</>
);
},
...initialState?.settings,
};
}import fixMenuItemIcon from './fixMenultemIcon';
import { SmileOutlined, HeartOutlined,DashboardOutlined } from '@ant-design/icons';
// 引入了第1步中api.ts中定义的currentUserMenus接口，并定义别名queryCurrentUserMenus
import { currentUserMenus as queryCurrentUserMenus } from './services/ant-design-pro/api';
import Footer from '@/components/Footer';
import RightContent from '@/components/RightContent';
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { PageLoading, SettingDrawer } from '@ant-design/pro-components';
import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
import type { RunTimeLayoutConfig } from 'umi';
import {
history
} from 'umi';
import defaultSettings from '../config/defaultSettings';
const loginPath = '/user/login';
const IconMap = {
smile: <SmileOutlined />,
heart: <HeartOutlined />,
dashed:<DashboardOutlined />
};
const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] => {
return menus.map(({ icon, routes, ...item }) => {
return {
icon: icon && IconMap[icon as string],
routes: routes && loopMenuItem(routes),
...item,
}
});
}
/** 获取用户信息比较慢的时候会展示一个 loading */
export const initialStateConfig = {
loading: <PageLoading />,
};
/**
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
* */
export async function getInitialState(): Promise<{
settings?: Partial<LayoutSettings>;
currentUser?: API.CurrentUser;
loading?: boolean;
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
menuData?: MenuDataItem[] | undefined;
fetchUserMenus?: () => Promise<MenuDataItem[] | undefined>;
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
const fetchUserInfo = async () => {
try {
const msg = await queryCurrentUser();
return msg.data;
} catch (error) {
history.push(loginPath);
}
return undefined;
};
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
const fetchUserMenus = async () => {
try {
const menuData = await queryCurrentUserMenus();
return loopMenuItem(menuData.data);
} catch (error) {
history.push(loginPath);
}
return undefined;
};
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
// 如果不是登录页面，执行
if (history.location.pathname !== loginPath) {
const currentUser = await fetchUserInfo();
const currentUserMenus = await fetchUserMenus();
return {
fetchUserInfo,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
fetchUserMenus,
menuData: currentUserMenus,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
currentUser,
settings: defaultSettings,
};
}
return {
fetchUserInfo,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
fetchUserMenus,
menuData: [],
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
settings: defaultSettings,
};
}
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
return {
rightContentRender: () => <RightContent />,
disableContentMargin: false,
waterMarkProps: {
content: initialState?.currentUser?.name,
},
footerRender: () => <Footer />,
onPageChange: () => {
const { location } = history;
// 如果没有登录，重定向到 login
if (!initialState?.currentUser && location.pathname !== loginPath) {
history.push(loginPath);
}
},
menuHeaderRender: undefined,
/*************** 2022/09/18 实现服务器加载自定义菜单 Add Start*******************/
menuDataRender: () => {
return fixMenuItemIcon(initialState?.menuData);
},
/*************** 2022/09/18 实现服务器加载自定义菜单 Add End*********************/
// 自定义 403 页面
// unAccessible: <div>unAccessible</div>,
// 增加一个 loading 的状态
childrenRender: (children, props) => {
// if (initialState?.loading) return <PageLoading />;
return (
<>
{children}
{!props.location?.pathname?.includes('/login') && (
<SettingDrawer
disableUrlParams
enableDarkTheme
settings={initialState?.settings}
onSettingChange={(settings) => {
setInitialState((preInitialState) => ({
...preInitialState,
settings,
}));
}}
/>
)}
</>
);
},
...initialState?.settings,
};
}
fixMenuItemIcon中的内容
import React from "react"
import type { MenuDataItem } from "@ant-design/pro-layout"
import * as allIcons from "@ant-design/icons"
const fixMenuItemIcon = (menus: MenuDataItem[], iconType = 'Outlined'): MenuDataItem[] => {
if (menus == undefined || menus == null) menus = [];
menus.forEach((item) => {
const { icon, children } = item;
if (typeof icon === 'string') {
const fixIconName = icon.slice(0, 1).toLocaleUpperCase() + icon.slice(1) + iconType;
// eslint-disable-next-line no-param-reassign
item.icon = React.createElement(allIcons[fixIconName] || allIcons[icon]);
}
// eslint-disable-next-line no-param-reassign,@typescript-eslint/no-unused-expressions
children && children.length > 0 ? (item.children = fixMenuItemIcon(children)) : null;
});
return menus;
};
export default fixMenuItemIcon;
mockjs中的内容
'GET /api/getUserMenus': (req: Request, res: Response) => {
if (!getAccess()) {
res.status(401).send({
data: {
isLogin: false,
},
errorCode: '401',
errorMessage: '请先登录！',
success: true,
});
return;
}
res.send({
success: true,
data: [
{
path: '/user',
layout: false,
routes: [
{
path: '/user/login',
layout: false,
name: 'login',
component: './user/Login',
},
{
path: '/user',
redirect: '/user/login',
},
{
component: '404',
},
],
},
{
path: '/home',
name: 'Dashboard',
icon: 'dashed',
component: './Welcome',
},
{
path: '/Parcels',
name: 'Parcel',
icon: 'icon-user',
access: 'canAdmin',
routes: [
{
path: '/Parcels/List',
name: 'List',
icon: '',
component: './Parcel/Search',
}, {
path: '/Parcels/Shipment',
name: 'Create',
icon: '',
component: './Parcel/Create',
}, {
path: '/Parcels/Import',
name: 'Import',
icon: '',
component: './Parcel/ParcelImport',
},
{
path: '/Parcels/PostingToLastMiler',
name: 'Posting',
icon: '',
component: './Parcel/PostingToLastMiler',
}
],
},
{
path: '/',
redirect: '/home',
},
{
component: './404',
},
],
});
},
投递腾讯云智研发等公司7个岗位 >