lanyuanxiaoyao
2b1c5e96c3
- 替换 antd 为 tdesign-react 作为主要 UI 组件库 - 引入 Recharts 替代 @ant-design/charts 实现图表功能 - 移除主题系统相关代码（ThemeContext、themes 目录） - 更新所有组件以适配 TDesign 组件 API - 更新测试用例以匹配新的组件实现 - 新增 TDesign 和 Recharts 集成规范文档
76 lines
2.7 KiB
Markdown
76 lines
2.7 KiB
Markdown
## 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
|
||
<!-- 无现有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交互
|