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,122 @@
# TDesign Integration
## Purpose
TBD - 集成TDesign React组件库提供统一的UI设计系统和组件支持替代Ant Design。
## Requirements
### Requirement: TDesign全局配置
系统SHALL正确配置TDesign ConfigProvider作为全局配置容器确保所有TDesign组件使用统一的配置。
#### Scenario: 应用启动时加载TDesign配置
- **WHEN** 应用初始化启动
- **THEN** ConfigProvider组件SHALL包裹整个应用
- **AND** TDesign全局样式SHALL被正确引入
- **AND** 所有TDesign组件SHALL使用统一配置
#### Scenario: 移除Ant Design配置
- **WHEN** 迁移完成
- **THEN** 应用中SHALL不存在Ant Design的ConfigProvider
- **AND** 应用中SHALL不存在ThemeProvider
- **AND** 应用中SHALL不存在任何Ant Design全局配置
### Requirement: TDesign组件替换
系统SHALL将所有Ant Design组件替换为对应的TDesign组件保持功能完整性。
#### Scenario: 布局组件替换
- **WHEN** 使用Layout组件
- **THEN** SHALL使用TDesign的Layout组件
- **AND** Layout.Sider SHALL替换为Layout.Aside
- **AND** Layout.Header SHALL保持不变
- **AND** Layout.Content SHALL保持不变
#### Scenario: 表单组件替换
- **WHEN** 使用表单相关组件
- **THEN** Modal SHALL替换为Dialog
- **AND** Form.Item SHALL替换为Form.FormItem
- **AND** Input、Select、Switch SHALL使用TDesign版本
- **AND** 表单验证功能SHALL保持完整
#### Scenario: 数据展示组件替换
- **WHEN** 使用数据展示组件
- **THEN** Table、Card、Statistic、Tag SHALL使用TDesign版本
- **AND** 组件功能SHALL保持不变
- **AND** 组件API SHALL兼容原有使用方式
#### Scenario: 导航组件替换
- **WHEN** 使用导航组件
- **THEN** Menu SHALL使用TDesign版本
- **AND** 菜单项配置SHALL正确映射
- **AND** 路由导航功能SHALL保持正常
### Requirement: TDesign图标系统
系统SHALL使用tdesign-icons-react作为图标库替换@ant-design/icons。
#### Scenario: 图标导入替换
- **WHEN** 使用图标组件
- **THEN** SHALL从tdesign-icons-react导入
- **AND** SHALL不从@ant-design/icons导入任何图标
- **AND** 图标显示SHALL正常
#### Scenario: 图标语义匹配
- **WHEN** 替换图标
- **THEN** 新图标SHALL与原图标语义相近
- **AND** CloudServerOutlined SHALL替换为语义相近的TDesign图标
- **AND** BarChartOutlined SHALL替换为语义相近的TDesign图标
- **AND** SettingOutlined SHALL替换为语义相近的TDesign图标
### Requirement: 栅格系统兼容
系统SHALL保持Row/Col栅格系统的使用确保响应式布局功能正常。
#### Scenario: 栅格组件替换
- **WHEN** 使用Row和Col组件
- **THEN** SHALL使用TDesign的Row和Col组件
- **AND** 响应式配置xs、sm、md、lg、xlSHALL保持有效
- **AND** gutter配置SHALL正常工作
- **AND** 布局效果SHALL与迁移前一致
### Requirement: 主题系统移除
系统SHALL完全移除多主题系统使用TDesign默认主题。
#### Scenario: 删除主题相关代码
- **WHEN** 迁移完成
- **THEN** ThemeContext SHALL被删除
- **AND** themes目录 SHALL被删除
- **AND** 所有主题相关导入SHALL被移除
#### Scenario: 使用TDesign默认主题
- **WHEN** 应用运行
- **THEN** SHALL使用TDesign默认视觉风格
- **AND** 不SHALL提供主题切换功能
- **AND** UI风格SHALL统一一致
### Requirement: 依赖管理
系统SHALL正确管理npm依赖确保无冗余依赖。
#### Scenario: 移除Ant Design依赖
- **WHEN** 依赖安装完成
- **THEN** package.json中SHALL不存在antd
- **AND** package.json中SHALL不存在@ant-design/icons
- **AND** package.json中SHALL不存在@ant-design/charts
- **AND** package.json中SHALL不存在antd-style
#### Scenario: 添加TDesign依赖
- **WHEN** 依赖安装完成
- **THEN** package.json中SHALL存在tdesign-react
- **AND** package.json中SHALL存在tdesign-icons-react
- **AND** 依赖版本SHALL为最新稳定版
### Requirement: Settings页面简化
系统SHALL保留Settings页面路由但简化页面内容为空状态。
#### Scenario: Settings页面访问
- **WHEN** 用户访问/settings路由
- **THEN** 页面SHALL正常加载
- **AND** 页面SHALL显示空状态提示
- **AND** 不SHALL显示主题设置相关内容
#### Scenario: Settings路由保留
- **WHEN** 应用路由配置
- **THEN** /settings路由SHALL存在
- **AND** Settings页面组件SHALL存在