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,10 +1,7 @@
import { Layout, Menu } from 'antd';
import {
CloudServerOutlined,
BarChartOutlined,
} from '@ant-design/icons';
import { CloudServerOutlined, BarChartOutlined } from '@ant-design/icons';
import { Outlet, useLocation, useNavigate } from 'react-router';
import styles from './AppLayout.module.scss';
import { ThemeToggle } from '@/components/ThemeToggle';
const menuItems = [
{ key: '/providers', label: '供应商管理', icon: <CloudServerOutlined /> },
@@ -16,19 +13,44 @@ export function AppLayout() {
const navigate = useNavigate();
return (
<Layout className={styles.layout}>
<Layout.Header className={styles.header}>
<div className={styles.logo}>AI Gateway</div>
<Layout style={{ minHeight: '100vh' }}>
<Layout.Header
style={{
display: 'flex',
alignItems: 'center',
padding: '0 2rem',
}}
>
<div
style={{
color: '#fff',
fontSize: '1.25rem',
fontWeight: 600,
marginRight: '2rem',
whiteSpace: 'nowrap',
}}
>
AI Gateway
</div>
<Menu
theme="dark"
mode="horizontal"
selectedKeys={[location.pathname]}
items={menuItems}
onClick={({ key }) => navigate(key)}
className={styles.menu}
style={{ flex: 1, minWidth: 0 }}
/>
<ThemeToggle />
</Layout.Header>
<Layout.Content className={styles.content}>
<Layout.Content
style={{
padding: '2rem',
maxWidth: '1400px',
width: '100%',
margin: '0 auto',
boxSizing: 'border-box',
}}
>
<Outlet />
</Layout.Content>
</Layout>