直接上代碼(關(guān)鍵截热雎琛) 全在 src/app.tsx
修改
1:import 添加icon
import * as Icon from '@ant-design/icons';
2:添加處理圖標
const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>(
menus.map(({ icon, children, ...item }) => {
return {
...item,
icon: icon && React.createElement(Icon[icon]),
children: children && loopMenuItem(children),
}
})
);
3:根據(jù)動態(tài)處理路由方法包裹處理路由icon
完整 src/app.ts代碼
import React from 'react';
// @ts-ignore
import { BasicLayoutProps, Settings as LayoutSettings, MenuDataItem } from '@ant-design/pro-layout';
import { notification } from 'antd';
import { history, RequestConfig } from 'umi';
import RightContent from '@/components/RightContent';
import Footer from '@/components/Footer';
import { ResponseError } from 'umi-request';
import _ from 'lodash';
import { queryCurrent } from './services/user';
import { getMenuList } from './services/menu';
import defaultSettings from '../config/defaultSettings';
import * as Icon from '@ant-design/icons';
export async function getInitialState(): Promise<{
currentUser?: API.CurrentUser;
settings?: LayoutSettings;
menuList?: API.HttpRule;
}> {
// 如果是登錄頁面箩溃,不執(zhí)行
if (history.location.pathname !== '/user/login') {
try {
const currentUser = await queryCurrent();
const menuList = await getMenuList(currentUser.userid || '');
return {
currentUser,
settings: defaultSettings,
menuList,
};
} catch (error) {
history.push('/user/login');
}
}
return {
settings: defaultSettings,
menuList: {},
};
}
const filterByMenuDate = (data: MenuDataItem[], keyWord: string): MenuDataItem[] =>
data
.map((item) => {
if (
(item.name && item.name.includes(keyWord)) ||
filterByMenuDate(item.children || [], keyWord).length > 0
) {
return {
...item,
children: filterByMenuDate(item.children || [], keyWord),
};
}
return undefined;
})
.filter((item) => item) as MenuDataItem[];
// 處理圖標
const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>(
menus.map(({ icon, children, ...item }) => {
return {
...item,
icon: icon && React.createElement(Icon[icon]),
children: children && loopMenuItem(children),
}
})
);
export const layout = ({
initialState,
}: {
initialState: {
settings?: LayoutSettings;
currentUser?: API.CurrentUser;
menuList?: API.HttpRule;
};
}): BasicLayoutProps => {
// 請求路由
const { routes } = _.isEmpty(initialState?.menuList)
? { routes: [] }
: initialState?.menuList.data;
return {
menuDataRender: () => loopMenuItem(routes),
rightContentRender: () => <RightContent />,
disableContentMargin: false,
footerRender: () => <Footer />,
onPageChange: () => {
// 如果沒有登錄,重定向到 login
if (!initialState?.currentUser?.userid && history.location.pathname !== '/user/login') {
history.push('/user/login');
}
},
menuHeaderRender: undefined,
...initialState?.settings,
};
};
const codeMessage = {
200: '服務(wù)器成功返回請求的數(shù)據(jù)吭练。',
201: '新建或修改數(shù)據(jù)成功。',
202: '一個請求已經(jīng)進入后臺排隊(異步任務(wù))。',
204: '刪除數(shù)據(jù)成功狂票。',
400: '發(fā)出的請求有錯誤拥娄,服務(wù)器沒有進行新建或修改數(shù)據(jù)的操作蚊锹。',
401: '用戶沒有權(quán)限(令牌、用戶名条舔、密碼錯誤)枫耳。',
403: '用戶得到授權(quán),但是訪問是被禁止的孟抗。',
404: '發(fā)出的請求針對的是不存在的記錄迁杨,服務(wù)器沒有進行操作。',
405: '請求方法不被允許凄硼。',
406: '請求的格式不可得铅协。',
410: '請求的資源被永久刪除,且不會再得到的摊沉。',
422: '當創(chuàng)建一個對象時狐史,發(fā)生一個驗證錯誤。',
500: '服務(wù)器發(fā)生錯誤说墨,請檢查服務(wù)器骏全。',
502: '網(wǎng)關(guān)錯誤。',
503: '服務(wù)不可用尼斧,服務(wù)器暫時過載或維護姜贡。',
504: '網(wǎng)關(guān)超時。',
};
/**
* 異常處理程序
*/
const errorHandler = (error: ResponseError) => {
const { response } = error;
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
const { status, url } = response;
notification.error({
message: `請求錯誤 ${status}: ${url}`,
description: errorText,
});
}
if (!response) {
notification.error({
description: '您的網(wǎng)絡(luò)發(fā)生異常棺棵,無法連接服務(wù)器',
message: '網(wǎng)絡(luò)異常',
});
}
throw error;
};
export const request: RequestConfig = {
errorHandler,
};