/ easyshell-web / src / App.tsx
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;