293 lines
8.6 KiB
TypeScript
293 lines
8.6 KiB
TypeScript
import RightContent from '@/components/RightContent';
|
||
import '@/huoshi.less';
|
||
import '@/styles/fonts/font.css';
|
||
import themes from '@/styles/theme.less';
|
||
import { type GlobalInitialState } from '@/types';
|
||
import { menuItemRender } from '@/utils/menuRender';
|
||
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
|
||
import { RuntimeConfig, history } from '@umijs/max';
|
||
import { useState } from 'react';
|
||
import { RuntimeAntdConfig } from 'umi';
|
||
import defaultSettings from '../config/defaultSettings';
|
||
import { getAccessToken } from './access';
|
||
import ErrorBoundary from './components/ErrorBoundary';
|
||
import { renderEmpty } from './components/KFDefaultEmpty';
|
||
import PageContainer from './components/PageContainer';
|
||
import './dayjsConfig';
|
||
import { removeAllPageCacheState } from './hooks/useCacheState';
|
||
import { globalGetSeverTime } from './hooks/useServerTime';
|
||
import { getHuoshiRoutes } from './services/huoshi';
|
||
import {
|
||
getRemoteMenu,
|
||
getRoutersInfo,
|
||
getUserInfo,
|
||
patchRouteWithRemoteMenus,
|
||
setRemoteMenu,
|
||
} from './services/session';
|
||
import { isLoginPage, needAuth } from './utils';
|
||
import { addAlpha } from './utils/color';
|
||
import { HomeUrl } from './utils/constant';
|
||
import { closeAllModals } from './utils/modal';
|
||
import { gotoHomePage } from './utils/ui';
|
||
export { requestConfig as request } from './requestConfig';
|
||
|
||
/**
|
||
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
|
||
*/
|
||
export async function getInitialState(): Promise<GlobalInitialState> {
|
||
const fetchUserInfo = async () => {
|
||
globalGetSeverTime();
|
||
try {
|
||
const response = await getUserInfo();
|
||
return {
|
||
...response.user,
|
||
avatar: response.user.avatar || require('@/assets/img/avatar-default.png'),
|
||
permissions: response.permissions,
|
||
roleNames: response.roles,
|
||
} as API.CurrentUser;
|
||
} catch (error) {
|
||
console.error('getInitialState', error);
|
||
// gotoLoginPage(true);
|
||
gotoHomePage();
|
||
}
|
||
return undefined;
|
||
};
|
||
|
||
const token = getAccessToken();
|
||
if (token) {
|
||
const currentUser = await fetchUserInfo();
|
||
return {
|
||
fetchUserInfo,
|
||
currentUser,
|
||
settings: defaultSettings as Partial<LayoutSettings>,
|
||
collapsed: false,
|
||
};
|
||
}
|
||
return {
|
||
fetchUserInfo,
|
||
settings: defaultSettings as Partial<LayoutSettings>,
|
||
collapsed: false,
|
||
};
|
||
}
|
||
|
||
// ProLayout 支持的api https://procomponents.ant.design/components/layout
|
||
export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
|
||
return {
|
||
ErrorBoundary: ErrorBoundary,
|
||
rightContentRender: () => <RightContent></RightContent>,
|
||
menu: {
|
||
locale: false,
|
||
// 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
|
||
params: {
|
||
userId: initialState?.currentUser?.userId,
|
||
},
|
||
request: async () => {
|
||
if (!initialState?.currentUser?.userId) {
|
||
return [];
|
||
}
|
||
return getRemoteMenu();
|
||
},
|
||
},
|
||
childrenRender: (children) => {
|
||
// 增加一个 loading 的状态
|
||
// if (initialState?.loading) return <PageLoading />;
|
||
return <PageContainer>{children}</PageContainer>;
|
||
},
|
||
collapsedButtonRender: false,
|
||
collapsed: true,
|
||
menuProps: {
|
||
onClick: () => {
|
||
// 点击菜单项，删除所有的页面 state 缓存
|
||
removeAllPageCacheState();
|
||
},
|
||
},
|
||
...initialState?.settings,
|
||
logo: require('@/assets/img/logo.png'),
|
||
token: {
|
||
sider: {
|
||
colorTextMenu: themes['textColor'],
|
||
colorTextMenuSelected: themes['primaryColor'],
|
||
colorTextMenuActive: themes['primaryColor'],
|
||
colorTextMenuItemHover: themes['primaryColor'],
|
||
colorBgMenuItemSelected: 'rgba(86, 82, 255, 0.1)',
|
||
colorBgMenuItemHover: themes['backgroundColor'],
|
||
},
|
||
header: {
|
||
colorBgHeader: '#3a3da5',
|
||
heightLayoutHeader: 60,
|
||
colorHeaderTitle: 'white',
|
||
},
|
||
},
|
||
menuItemRender: menuItemRender(false),
|
||
subMenuItemRender: menuItemRender(true),
|
||
};
|
||
};
|
||
|
||
export const onRouteChange: RuntimeConfig['onRouteChange'] = async (e) => {
|
||
// console.log('onRouteChange');
|
||
|
||
// 路由切换时，尤其是回退时，关闭打开的弹框
|
||
closeAllModals();
|
||
|
||
const { location } = e;
|
||
const pathname = location.pathname;
|
||
const token = getAccessToken();
|
||
// 没有 token，跳转到登录页面
|
||
if (!token && needAuth(pathname)) {
|
||
gotoHomePage();
|
||
return;
|
||
}
|
||
|
||
// 有 token， 登录页面直接跳转到首页
|
||
if (token && isLoginPage(pathname)) {
|
||
history.push(HomeUrl);
|
||
}
|
||
|
||
const menus = getRemoteMenu();
|
||
// 没有菜单，刷新页面
|
||
if (menus === null && needAuth(pathname)) {
|
||
history.go(0);
|
||
}
|
||
};
|
||
|
||
export const patchRoutes: RuntimeConfig['patchRoutes'] = () => {
|
||
//console.log('patchRoutes', e);
|
||
};
|
||
|
||
export const patchClientRoutes: RuntimeConfig['patchClientRoutes'] = (e) => {
|
||
// console.log('patchClientRoutes', e);
|
||
patchRouteWithRemoteMenus(e.routes);
|
||
};
|
||
|
||
export function render(oldRender: () => void) {
|
||
// console.log('render');
|
||
const token = getAccessToken();
|
||
if (!token) {
|
||
oldRender();
|
||
return;
|
||
}
|
||
|
||
// 有 token，获取路由
|
||
getRoutersInfo()
|
||
.then((res) => {
|
||
setRemoteMenu(res);
|
||
oldRender();
|
||
})
|
||
.catch(() => {
|
||
oldRender();
|
||
});
|
||
|
||
if (process.env.UMI_APP_HUO_SHI) {
|
||
getHuoshiRoutes();
|
||
}
|
||
}
|
||
|
||
export const useQiankunStateForSlave = () => {
|
||
const [globalState, setGlobalState] = useState<any>({
|
||
slogan: 'Hello MicroFrontend',
|
||
});
|
||
|
||
return {
|
||
globalState,
|
||
setGlobalState,
|
||
};
|
||
};
|
||
|
||
// 主题修改
|
||
export const antd: RuntimeAntdConfig = (memo) => {
|
||
memo.theme ??= {};
|
||
memo.theme.token = {
|
||
colorPrimary: themes['primaryColor'],
|
||
colorPrimaryHover: themes['primaryHoverColor'],
|
||
colorPrimaryActive: themes['primaryActiveColor'],
|
||
colorPrimaryText: themes['primaryColor'],
|
||
colorPrimaryTextHover: themes['primaryHoverColor'],
|
||
colorPrimaryTextActive: themes['primaryActiveColor'],
|
||
colorSuccess: themes['successColor'],
|
||
colorError: themes['errorColor'],
|
||
colorWarning: themes['warningColor'],
|
||
colorLink: themes['primaryColor'],
|
||
colorLinkHover: themes['primaryHoverColor'],
|
||
colorLinkActive: themes['primaryActiveColor'],
|
||
colorTextDisabled: themes['textColorDisabled'],
|
||
colorText: themes['textColor'],
|
||
controlHeightLG: 46,
|
||
colorTextPlaceholder: themes['placeholderColor'],
|
||
colorBorder: '#e2e6f5',
|
||
};
|
||
memo.theme.components ??= {};
|
||
memo.theme.components.Tabs = {};
|
||
memo.theme.components.Button = {
|
||
defaultColor: themes['textColorSecondary'],
|
||
defaultBorderColor: themes['textColorSecondary'],
|
||
contentFontSize: parseInt(themes['fontSize']),
|
||
primaryShadow: 'none',
|
||
borderColorDisabled: 'transparent',
|
||
};
|
||
memo.theme.components.Input = {
|
||
inputFontSize: parseInt(themes['fontSizeInput']),
|
||
inputFontSizeLG: parseInt(themes['fontSizeInputLg']),
|
||
paddingBlockLG: 10,
|
||
};
|
||
memo.theme.components.InputNumber = {
|
||
inputFontSize: parseInt(themes['fontSizeInput']),
|
||
inputFontSizeLG: parseInt(themes['fontSizeInputLg']),
|
||
paddingBlockLG: 10,
|
||
};
|
||
memo.theme.components.Select = {
|
||
singleItemHeightLG: 46,
|
||
fontSizeLG: parseInt(themes['fontSizeInputLg']),
|
||
optionPadding: '8px 20px',
|
||
optionHeight: 40,
|
||
optionSelectedBg: 'rgba(136, 149, 168, 0.08)',
|
||
optionSelectedColor: themes['primaryColor'],
|
||
optionActiveBg: 'rgba(136, 149, 168, 0.08)',
|
||
optionSelectedFontWeight: 500,
|
||
optionFontSize: 15,
|
||
};
|
||
memo.theme.components.Table = {
|
||
headerBg: themes['backgroundColor'],
|
||
headerBorderRadius: 4,
|
||
rowHoverBg: themes['backgroundColor'],
|
||
borderColor: '#e2e6f5',
|
||
rowSelectedBg: '#F6F6FF', // 固定列时，横向滑动导致重叠
|
||
rowSelectedHoverBg: themes['backgroundColor'],
|
||
headerColor: themes['textColor'],
|
||
headerSplitColor: 'transparent',
|
||
colorText: themes['textColorSecondary'],
|
||
};
|
||
memo.theme.components.Tabs = {
|
||
titleFontSize: 16,
|
||
cardGutter: 10,
|
||
cardBg: '#fafdff',
|
||
cardHeight: '42px',
|
||
cardPadding: '8px 22px',
|
||
};
|
||
memo.theme.components.Form = {
|
||
labelColor: 'rgba(29, 29, 32, 0.8);',
|
||
};
|
||
memo.theme.components.Breadcrumb = {
|
||
iconFontSize: parseInt(themes['fontSize']),
|
||
itemColor: themes['textColorSecondary'],
|
||
separatorColor: themes['textColorSecondary'],
|
||
linkColor: themes['textColorSecondary'],
|
||
};
|
||
memo.theme.components.Tree = {
|
||
directoryNodeSelectedBg: addAlpha(themes['primaryColor'], 0.7),
|
||
};
|
||
|
||
memo.theme.cssVar = true;
|
||
memo.theme.hashed = false;
|
||
|
||
memo.appConfig = {
|
||
message: {
|
||
// 配置 message 最大显示数，超过限制时，最早的消息会被自动关闭
|
||
maxCount: 3,
|
||
},
|
||
};
|
||
|
||
memo.renderEmpty = renderEmpty;
|
||
|
||
return memo;
|
||
};
|