65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { RouterProvider } from 'react-router-dom';
|
|
import { router } from './router';
|
|
import { App as AntdApp, ConfigProvider, theme } from 'antd';
|
|
import zhCN from 'antd/locale/zh_CN';
|
|
import enUS from 'antd/locale/en_US';
|
|
import utils from './lib/utils';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { I18nextProvider } from 'react-i18next';
|
|
import i18n from './i18n';
|
|
|
|
// 用于静态注入 message/modal/notification
|
|
const StaticAntd = () => {
|
|
const { message, modal, notification } = AntdApp.useApp();
|
|
utils.setMessage(message);
|
|
utils.setModal(modal);
|
|
utils.setNotification(notification);
|
|
return null;
|
|
};
|
|
|
|
const AntdConfigWrapper = ({ children }: { children: React.ReactNode }) => {
|
|
const { i18n } = useTranslation();
|
|
const isEn = i18n.language?.startsWith('en');
|
|
return (
|
|
<ConfigProvider
|
|
locale={isEn ? enUS : zhCN}
|
|
theme={{
|
|
algorithm: theme.defaultAlgorithm,
|
|
token: {
|
|
colorPrimary: '#1890ff',
|
|
borderRadius: 2,
|
|
padding: 12,
|
|
paddingLG: 16,
|
|
margin: 12,
|
|
marginLG: 16,
|
|
},
|
|
components: {
|
|
Layout: { headerBg: '#fff', siderBg: '#fff' },
|
|
Menu: { itemBg: '#fff', itemSelectedBg: '#e6f4ff' },
|
|
Card: { paddingLG: 12 },
|
|
Table: { padding: 8, paddingXS: 4 },
|
|
Form: { itemMarginBottom: 12 },
|
|
Space: { gap: 8 },
|
|
}
|
|
}}
|
|
>
|
|
{children}
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
export default function App() {
|
|
return (
|
|
<I18nextProvider i18n={i18n}>
|
|
<AntdConfigWrapper>
|
|
<AntdApp>
|
|
<StaticAntd />
|
|
<RouterProvider router={router} />
|
|
</AntdApp>
|
|
</AntdConfigWrapper>
|
|
</I18nextProvider>
|
|
);
|
|
}
|
|
|