1
0

feat: 升级 Ant Design 6 并实现主题切换功能

- 升级 antd 从 5.24.9 到 6.3.5,@ant-design/icons 从 5.6.1 到 6.1.1
- 新增 ThemeContext 和 ThemeToggle 组件,支持明暗主题切换
- 移除自定义 SCSS 样式,采用 Ant Design 主题系统
- 测试环境从 jsdom 切换到 happy-dom,提升测试性能
- 更新 AppLayout、ModelForm、ProviderForm 以适配新主题系统
This commit is contained in:
2026-04-16 13:31:30 +08:00
parent 1580b5b838
commit 47ecbadc7c
15 changed files with 374 additions and 176 deletions

View File

@@ -1,6 +1,8 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router';
import { ConfigProvider, theme } from 'antd';
import { AppRoutes } from '@/routes';
import { ThemeProvider, useTheme } from '@/contexts/ThemeContext';
const queryClient = new QueryClient({
defaultOptions: {
@@ -12,12 +14,28 @@ const queryClient = new QueryClient({
},
});
function App() {
function ThemedApp() {
const { mode } = useTheme();
return (
<QueryClientProvider client={queryClient}>
<ConfigProvider
theme={{
algorithm: mode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
}}
>
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
</ConfigProvider>
);
}
function App() {
return (
<QueryClientProvider client={queryClient}>
<ThemeProvider>
<ThemedApp />
</ThemeProvider>
</QueryClientProvider>
);
}