App.tsx
1 import { RouterProvider } from 'react-router-dom'; 2 import { ConfigProvider, theme } from 'antd'; 3 import antdZhCN from 'antd/locale/zh_CN'; 4 import antdEnUS from 'antd/locale/en_US'; 5 import { useTranslation } from 'react-i18next'; 6 import { ThemeProvider, useTheme } from './contexts/ThemeContext'; 7 import ErrorBoundary from './components/ErrorBoundary'; 8 import router from './router'; 9 import './i18n'; 10 11 const ThemedApp: React.FC = () => { 12 const { isDark } = useTheme(); 13 const { i18n } = useTranslation(); 14 const antdLocale = i18n.language === 'en-US' ? antdEnUS : antdZhCN; 15 16 return ( 17 <ConfigProvider 18 locale={antdLocale} 19 theme={{ 20 algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm, 21 token: { 22 colorPrimary: '#2563eb', 23 fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", 24 fontSize: 14, 25 borderRadius: 10, 26 controlHeight: 36, 27 wireframe: false, 28 colorBgLayout: isDark ? '#0a0a0b' : '#f5f5f7', 29 colorBgContainer: isDark ? '#141416' : '#ffffff', 30 colorBorder: isDark ? '#2a2a2e' : '#e8e8ec', 31 colorBorderSecondary: isDark ? '#1f1f23' : '#f0f0f3', 32 }, 33 components: { 34 Card: { 35 paddingLG: 20, 36 borderRadiusLG: 12, 37 }, 38 Table: { 39 borderRadiusLG: 12, 40 headerBg: 'transparent', 41 headerColor: isDark ? '#a1a1aa' : '#71717a', 42 fontSize: 13, 43 cellPaddingBlock: 12, 44 cellPaddingInline: 16, 45 }, 46 Button: { 47 borderRadius: 8, 48 controlHeight: 36, 49 }, 50 Input: { 51 borderRadius: 8, 52 }, 53 Select: { 54 borderRadius: 8, 55 }, 56 Modal: { 57 borderRadiusLG: 14, 58 }, 59 Drawer: { 60 borderRadiusLG: 14, 61 }, 62 Menu: { 63 itemBorderRadius: 8, 64 subMenuItemBorderRadius: 8, 65 itemMarginBlock: 2, 66 itemMarginInline: 4, 67 itemPaddingInline: 12, 68 itemHeight: 40, 69 iconMarginInlineEnd: 10, 70 fontSize: 14, 71 }, 72 }, 73 }} 74 > 75 <ErrorBoundary> 76 <RouterProvider router={router} /> 77 </ErrorBoundary> 78 </ConfigProvider> 79 ); 80 }; 81 82 function App() { 83 return ( 84 <ThemeProvider> 85 <ThemedApp /> 86 </ThemeProvider> 87 ); 88 } 89 90 export default App;