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,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>
|
||||
|
||||
Reference in New Issue
Block a user