refactor: 迁移 UI 组件库从 Ant Design 至 TDesign
- 替换 antd 为 tdesign-react 作为主要 UI 组件库 - 引入 Recharts 替代 @ant-design/charts 实现图表功能 - 移除主题系统相关代码(ThemeContext、themes 目录) - 更新所有组件以适配 TDesign 组件 API - 更新测试用例以匹配新的组件实现 - 新增 TDesign 和 Recharts 集成规范文档
This commit is contained in:
@@ -1,40 +1,11 @@
|
||||
import { Card, Select, Switch, Space, Typography } from 'antd';
|
||||
import { useTheme } from '@/contexts/ThemeContext';
|
||||
import { themeOptions, type ThemeId } from '@/themes';
|
||||
|
||||
const { Text } = Typography;
|
||||
import { Card } from 'tdesign-react';
|
||||
|
||||
export function SettingsPage() {
|
||||
const { themeId, followSystem, setThemeId, setFollowSystem } = useTheme();
|
||||
|
||||
return (
|
||||
<Space vertical size="large" style={{ width: '100%' }}>
|
||||
<Card title="主题">
|
||||
<Space vertical size="middle" style={{ width: '100%' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<Text strong>主题</Text>
|
||||
</div>
|
||||
<Select
|
||||
value={themeId}
|
||||
onChange={(value: ThemeId) => setThemeId(value)}
|
||||
style={{ width: 180 }}
|
||||
options={themeOptions.map((opt) => ({
|
||||
value: opt.id,
|
||||
label: opt.label,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<Text strong>跟随系统</Text>
|
||||
<br />
|
||||
<Text type="secondary">开启后自动跟随系统暗色模式</Text>
|
||||
</div>
|
||||
<Switch checked={followSystem} onChange={setFollowSystem} />
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Space>
|
||||
<Card title="设置">
|
||||
<div style={{ textAlign: 'center', padding: '40px 0', color: '#999' }}>
|
||||
设置功能开发中...
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user