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