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