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:
18
frontend/src/components/ThemeToggle/index.tsx
Normal file
18
frontend/src/components/ThemeToggle/index.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
|
||||
import { useTheme } from '@/contexts/ThemeContext';
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { mode, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<Tooltip title={mode === 'light' ? '切换到暗色模式' : '切换到亮色模式'}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={mode === 'light' ? <MoonOutlined /> : <SunOutlined />}
|
||||
onClick={toggleTheme}
|
||||
style={{ color: 'inherit' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user