# 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 更新开发文档(如有)