lanyuanxiaoyao
2b1c5e96c3
- 替换 antd 为 tdesign-react 作为主要 UI 组件库 - 引入 Recharts 替代 @ant-design/charts 实现图表功能 - 移除主题系统相关代码（ThemeContext、themes 目录） - 更新所有组件以适配 TDesign 组件 API - 更新测试用例以匹配新的组件实现 - 新增 TDesign 和 Recharts 集成规范文档
5.4 KiB
5.4 KiB
Implementation Tasks
1. 依赖管理
- 1.1 安装TDesign相关依赖（tdesign-react、tdesign-icons-react、recharts）
- 1.2 移除Ant Design相关依赖（antd、@ant-design/icons、@ant-design/charts、antd-style）
- 1.3 验证依赖安装正确，无冲突
2. 全局配置
- 2.1 在main.tsx引入TDesign全局样式（tdesign-react/es/style/index.css）
- 2.2 修改App.tsx，移除ThemeProvider包裹
- 2.3 在App.tsx添加TDesign ConfigProvider包裹
- 2.4 删除src/contexts/ThemeContext.tsx文件
- 2.5 删除src/themes整个目录
3. 布局与导航迁移
- 3.1 修改AppLayout组件，替换Layout相关导入（antd→tdesign-react）
- 3.2 将Layout.Sider替换为Layout.Aside
- 3.3 移除侧边栏折叠功能相关代码（collapsed状态、onCollapse回调）
- 3.4 设置固定侧边栏宽度（232px）
- 3.5 替换图标导入（@ant-design/icons→tdesign-icons-react）
- 3.6 确认并选择合适的TDesign图标（CloudServer、ChartLine、Setting）
- 3.7 修改Menu组件属性（value、items、onChange）
- 3.8 移除主题相关逻辑（isDark、effectiveThemeId）
- 3.9 移除theme.useToken()相关代码
- 3.10 更新AppLayout测试文件
4. 表单组件迁移
- 4.1 修改ProviderForm组件导入（antd→tdesign-react）
- 4.2 将Modal替换为Dialog（title→header、open→visible、onOk→onConfirm）
- 4.3 调整Dialog按钮属性（okText→confirmBtn、cancelBtn）
- 4.4 将Form.Item替换为Form.FormItem
- 4.5 将Form onFinish替换为onSubmit
- 4.6 替换Input、Input.Password、Switch组件
- 4.7 验证表单验证规则正常工作
- 4.8 修改ModelForm组件，执行相同迁移步骤
- 4.9 更新ProviderForm测试文件
- 4.10 更新ModelForm测试文件
5. 表格组件迁移
- 5.1 修改ProviderTable组件导入（antd→tdesign-react）
- 5.2 替换Table、Card、Button、Tag、Popconfirm、Space、Tooltip组件
- 5.3 调整Button属性（variant、color→theme）
- 5.4 验证Table expandable配置正常工作
- 5.5 修改ModelTable组件，执行相同迁移步骤
- 5.6 修改StatsTable组件导入
- 5.7 替换DatePicker.RangePicker组件
- 5.8 验证日期范围选择功能正常
- 5.9 更新ProviderTable测试文件
- 5.10 更新ModelTable测试文件
- 5.11 更新StatsTable测试文件
6. 统计组件迁移
- 6.1 修改StatCards组件导入（antd→tdesign-react）
- 6.2 替换Row、Col、Card、Statistic组件
- 6.3 验证栅格响应式配置正常工作
- 6.4 修改UsageChart组件导入
- 6.5 移除@ant-design/charts的Line组件导入
- 6.6 添加Recharts相关导入（LineChart、Line、XAxis、YAxis、CartesianGrid、ResponsiveContainer、Tooltip）
- 6.7 重写图表渲染逻辑，使用Recharts声明式组件
- 6.8 配置图表样式（stroke="#0052D9"、strokeWidth={2}）
- 6.9 配置网格线（strokeDasharray="3 3"）
- 6.10 验证图表响应式容器正常工作
- 6.11 验证空数据状态显示正确
- 6.12 更新StatCards测试文件
- 6.13 更新UsageChart测试文件
7. Settings页面简化
- 7.1 修改Settings页面导入（antd→tdesign-react）
- 7.2 移除主题设置相关代码（useTheme、themeOptions、Select、Switch）
- 7.3 简化为空页面，显示"设置功能开发中..."提示
- 7.4 使用Card组件包裹提示内容
- 7.5 更新Settings测试文件
8. 其他页面调整
- 8.1 修改Providers/index.tsx，移除Typography导入（如有）
- 8.2 修改Stats/index.tsx，移除主题相关逻辑
- 8.3 检查并更新所有页面的组件导入
9. 测试文件更新
- 9.1 删除src/tests/contexts/ThemeContext.test.tsx
- 9.2 删除src/tests/themes整个目录
- 9.3 更新src/tests/components/AppLayout.test.tsx
- 9.4 更新src/tests/components/ProviderForm.test.tsx
- 9.5 更新src/tests/components/ModelForm.test.tsx
- 9.6 更新src/tests/components/ProviderTable.test.tsx
- 9.7 更新src/tests/components/ModelTable.test.tsx
- 9.8 更新src/tests/components/StatCards.test.tsx
- 9.9 更新src/tests/components/UsageChart.test.tsx
- 9.10 更新src/tests/components/StatsTable.test.tsx
- 9.11 更新src/tests/pages/Settings.test.tsx
- 9.12 运行完整测试套件，确保所有测试通过
10. 验收测试
- 10.1 运行单元测试：bun test
- 10.2 运行测试覆盖率：bun test:coverage
- 10.3 运行E2E测试：bun test:e2e
- 10.4 手动测试供应商管理完整流程（添加、编辑、删除）
- 10.5 手动测试模型管理完整流程
- 10.6 手动测试统计数据展示
- 10.7 手动测试图表交互（悬停、响应式）
- 10.8 手动测试响应式布局（不同屏幕尺寸）
- 10.9 手动测试Settings页面访问
- 10.10 验证所有路由导航正常
11. 样式微调
- 11.1 检查UI整体一致性
- 11.2 调整组件间距（如有必要）
- 11.3 调整颜色配置（如有必要）
- 11.4 确认图标显示正确且风格统一
- 11.5 确认表单布局美观
- 11.6 确认表格样式清晰
12. 文档更新
- 12.1 更新README.md中的技术栈说明
- 12.2 记录图标映射关系
- 12.3 记录组件API差异点
- 12.4 更新开发文档（如有）