1
0

refactor: 迁移 UI 组件库从 Ant Design 至 TDesign

- 替换 antd 为 tdesign-react 作为主要 UI 组件库
- 引入 Recharts 替代 @ant-design/charts 实现图表功能
- 移除主题系统相关代码(ThemeContext、themes 目录)
- 更新所有组件以适配 TDesign 组件 API
- 更新测试用例以匹配新的组件实现
- 新增 TDesign 和 Recharts 集成规范文档
This commit is contained in:
2026-04-17 18:22:13 +08:00
parent 6eeb38c15e
commit 2b1c5e96c3
55 changed files with 1622 additions and 2541 deletions

View File

@@ -0,0 +1,75 @@
## 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
- **组件迁移**
- LayoutSider→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
<!-- 无现有spec需要修改这是全新的UI框架迁移 -->
## Impact
**代码影响**
- `src/App.tsx`移除ThemeProvider使用TDesign ConfigProvider
- `src/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交互