|
|
@@ -1,111 +1,21 @@
|
|
|
import * as React from 'react';
|
|
|
import { RouterProvider } from 'react-router-dom';
|
|
|
-import {
|
|
|
- ConfigProvider as AntdConfigProvider,
|
|
|
- App as AntdApp,
|
|
|
- message,
|
|
|
- notification,
|
|
|
-} from 'antd';
|
|
|
+import { App as AntdApp, ConfigProvider } from 'antd';
|
|
|
import zhCN from 'antd/locale/zh_CN';
|
|
|
-// import router from '@/router';
|
|
|
-import AppRouter from '@/router'
|
|
|
-interface ConfigProviderProps {
|
|
|
- children: React.ReactNode,
|
|
|
-}
|
|
|
-
|
|
|
-// Ant-Design全局化配置
|
|
|
-const ConfigProvider: React.FC<ConfigProviderProps> = (props: ConfigProviderProps) => {
|
|
|
- function getDesignToken() {
|
|
|
- // 获取元素
|
|
|
- const root = document.getElementById('root');
|
|
|
- // 获取元素计算样式
|
|
|
- const styles = getComputedStyle(root!);
|
|
|
- // 获取Ant-Design主题-属性
|
|
|
- const colorPrimary = styles.getPropertyValue('--primary-color');
|
|
|
- const colorTextBase = styles.getPropertyValue('--text-color');
|
|
|
- const borderRadiusArray = styles.getPropertyValue('--border-radius').match(/\d+/);
|
|
|
-
|
|
|
- return {
|
|
|
- colorPrimary: colorPrimary || undefined,
|
|
|
- colorTextBase: colorTextBase || undefined,
|
|
|
- borderRadius: borderRadiusArray ? Number(borderRadiusArray[0]) : undefined,
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const designToken = getDesignToken();
|
|
|
+import AppRouter from '@/router';
|
|
|
|
|
|
+const App: React.FC = () => {
|
|
|
return (
|
|
|
- <AntdConfigProvider
|
|
|
- // 组件-中文
|
|
|
+ <ConfigProvider
|
|
|
locale={zhCN}
|
|
|
- // 警告等级
|
|
|
- warning={{
|
|
|
- strict: true,// 严格模式
|
|
|
- }}
|
|
|
- // 渲染父节点到body上
|
|
|
getPopupContainer={() => document.body}
|
|
|
- // 设置主题
|
|
|
- theme={{
|
|
|
- token: {
|
|
|
- colorPrimary: designToken.colorPrimary,// 主题颜色
|
|
|
- colorTextBase: designToken.colorTextBase,// 文本颜色
|
|
|
- borderRadius: designToken.borderRadius,// 圆角大小
|
|
|
- },
|
|
|
- components: {
|
|
|
- Table: {
|
|
|
- headerBg: '#F7F8FA',
|
|
|
- headerSplitColor: 'transparent',
|
|
|
- },
|
|
|
- // 按钮组件主题配置
|
|
|
- Button: {
|
|
|
- colorPrimary: '#005D80', // primary-color
|
|
|
- colorPrimaryHover: '#007A99', // primary-light
|
|
|
- colorPrimaryActive: '#004060', // primary-dark
|
|
|
- colorTextLightSolid: '#FFFFFF', // 按钮文字颜色
|
|
|
- },
|
|
|
- },
|
|
|
- }}
|
|
|
- /* 组件配置 */
|
|
|
- button={{
|
|
|
- autoInsertSpace: false,// 移除按钮两个汉字之间的空格
|
|
|
- }}
|
|
|
+ button={{ autoInsertSpace: false }}
|
|
|
>
|
|
|
- {props.children}
|
|
|
- </AntdConfigProvider>
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
-const App: React.FC = () => {
|
|
|
- // 全局提示
|
|
|
- message.config({
|
|
|
- duration: 2,// 2秒自动关闭
|
|
|
- maxCount: 1,// 最多显示1条
|
|
|
- });
|
|
|
-
|
|
|
- // 通知提醒
|
|
|
- notification.config({
|
|
|
- duration: 2,// 2秒自动关闭
|
|
|
- maxCount: 1,// 最多显示1条
|
|
|
- });
|
|
|
-
|
|
|
- // 全局配置
|
|
|
- AntdConfigProvider.config({
|
|
|
- // 静态方法
|
|
|
- holderRender: (children) => (
|
|
|
- <ConfigProvider>
|
|
|
- {children}
|
|
|
- </ConfigProvider>
|
|
|
- )
|
|
|
- });
|
|
|
-
|
|
|
- return (
|
|
|
- <ConfigProvider>
|
|
|
<AntdApp style={{ height: '100%', lineHeight: 'normal' }}>
|
|
|
- {/* <RouterProvider router={router} /> */}
|
|
|
- <AppRouter></AppRouter>
|
|
|
+ <AppRouter />
|
|
|
</AntdApp>
|
|
|
</ConfigProvider>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
-export default App;
|
|
|
+export default App;
|