lanyuanxiaoyao
2b1c5e96c3
- 替换 antd 为 tdesign-react 作为主要 UI 组件库 - 引入 Recharts 替代 @ant-design/charts 实现图表功能 - 移除主题系统相关代码（ThemeContext、themes 目录） - 更新所有组件以适配 TDesign 组件 API - 更新测试用例以匹配新的组件实现 - 新增 TDesign 和 Recharts 集成规范文档
2.7 KiB
2.7 KiB
Why
当前前端使用Ant Design作为UI框架，存在多套自定义主题系统导致维护复杂度高，且与项目长期技术规划不一致。迁移到TDesign可以统一设计系统，简化代码架构，降低维护成本，同时保持企业级UI组件库的完整功能。
What Changes
BREAKING 完全移除Ant Design相关依赖，迁移到TDesign React组件库：
-
移除依赖：
antd、@ant-design/icons、@ant-design/charts、antd-style- 多主题系统（6套主题配置）
- ThemeContext及相关代码
-
新增依赖：
tdesign-react：TDesign React组件库tdesign-icons-react：TDesign图标库recharts：图表可视化库（替代@ant-design/charts）
-
组件迁移：
- Layout（Sider→Aside）、Menu、Table、Form、Dialog（替代Modal）
- Button、Card、Statistic、Tag、Select、Input、Switch、Space
- Row/Col栅格系统（API兼容）
- DatePicker、Tooltip、Popconfirm
-
功能简化：
- 移除侧边栏折叠功能
- 移除多主题切换，使用TDesign默认主题
- Settings页面简化为空页面（保留路由，待后续扩展）
-
图表重写：
- UsageChart从@ant-design/charts迁移到Recharts
- 使用LineChart组件重新实现请求趋势图
Capabilities
New Capabilities
tdesign-integration: TDesign组件库集成与配置，包括ConfigProvider全局配置、样式引入、图标系统recharts-integration: Recharts图表库集成，用于数据可视化展示
Modified Capabilities
无
Impact
代码影响：
src/App.tsx：移除ThemeProvider，使用TDesign ConfigProvidersrc/components/AppLayout/：Layout和Menu组件重写src/pages/Providers/：所有表单和表格组件更新src/pages/Stats/：图表重写，统计组件更新src/pages/Settings/：简化为空页面src/contexts/ThemeContext.tsx：删除src/themes/：整个目录删除- 所有测试文件：更新组件引用
依赖影响：
- 移除：antd、@ant-design/icons、@ant-design/charts、antd-style
- 新增：tdesign-react、tdesign-icons-react、recharts
- 保留：@tanstack/react-query、react-router、react、react-dom
API影响：
- 组件API变更：Modal→Dialog（属性名不同）
- 图标API变更：从@ant-design/icons到tdesign-icons-react
- 图表API变更：从@ant-design/charts到recharts（声明式组件）
用户体验影响：
- UI视觉风格变化（Ant Design → TDesign）
- 移除主题切换功能
- 移除侧边栏折叠功能
- 保持所有业务功能不变
测试影响：
- 所有组件单元测试需要更新
- 主题相关测试删除
- E2E测试需要验证UI交互