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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user