refactor: 迁移 UI 组件库从 Ant Design 至 TDesign
- 替换 antd 为 tdesign-react 作为主要 UI 组件库 - 引入 Recharts 替代 @ant-design/charts 实现图表功能 - 移除主题系统相关代码（ThemeContext、themes 目录） - 更新所有组件以适配 TDesign 组件 API - 更新测试用例以匹配新的组件实现 - 新增 TDesign 和 Recharts 集成规范文档
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
# Recharts Integration
|
||||
|
||||
集成Recharts图表库，实现数据可视化功能，替代@ant-design/charts。
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Recharts依赖集成
|
||||
系统SHALL正确集成Recharts图表库，作为数据可视化的基础依赖。
|
||||
|
||||
#### Scenario: 安装Recharts依赖
|
||||
- **WHEN** 依赖安装完成
|
||||
- **THEN** package.json中SHALL存在recharts依赖
|
||||
- **AND** recharts版本SHALL为2.x最新稳定版
|
||||
- **AND** Recharts组件SHALL可正常导入使用
|
||||
|
||||
### Requirement: UsageChart图表重写
|
||||
系统SHALL使用Recharts重新实现UsageChart组件，保持原有功能。
|
||||
|
||||
#### Scenario: 折线图渲染
|
||||
- **WHEN** UsageChart组件接收统计数据
|
||||
- **THEN** SHALL使用Recharts的LineChart组件渲染
|
||||
- **AND** X轴SHALL显示日期数据
|
||||
- **AND** Y轴SHALL显示请求数据
|
||||
- **AND** 图表SHALL支持鼠标悬停显示详情（Tooltip）
|
||||
- **AND** 图表SHALL包含网格线（CartesianGrid）
|
||||
|
||||
#### Scenario: 响应式图表容器
|
||||
- **WHEN** 图表渲染
|
||||
- **THEN** SHALL使用ResponsiveContainer包裹
|
||||
- **AND** 图表宽度SHALL自适应容器宽度
|
||||
- **AND** 图表高度SHALL为固定300px
|
||||
|
||||
#### Scenario: 空数据状态处理
|
||||
- **WHEN** 统计数据为空数组
|
||||
- **THEN** SHALL显示"暂无数据"提示
|
||||
- **AND** 不SHALL渲染图表组件
|
||||
|
||||
#### Scenario: 数据格式转换
|
||||
- **WHEN** 接收UsageStats数组数据
|
||||
- **THEN** SHALL按日期聚合计数
|
||||
- **AND** 数据SHALL按日期升序排序
|
||||
- **AND** 数据格式SHALL适配Recharts要求
|
||||
|
||||
### Requirement: 图表样式配置
|
||||
系统SHALL配置Recharts图表样式，确保视觉一致性。
|
||||
|
||||
#### Scenario: 图表颜色配置
|
||||
- **WHEN** 图表渲染
|
||||
- **THEN** 折线颜色SHALL为TDesign主色（#0052D9）
|
||||
- **AND** 线条宽度SHALL为2px
|
||||
- **AND** 数据点样式SHALL正常显示
|
||||
|
||||
#### Scenario: 网格线配置
|
||||
- **WHEN** 图表渲染
|
||||
- **THEN** 网格线SHALL使用虚线样式（strokeDasharray="3 3"）
|
||||
- **AND** 网格线SHALL不遮挡数据线
|
||||
|
||||
### Requirement: 移除Ant Design Charts
|
||||
系统SHALL完全移除@ant-design/charts的使用。
|
||||
|
||||
#### Scenario: 移除Line组件
|
||||
- **WHEN** 迁移完成
|
||||
- **THEN** UsageChart中SHALL不存在@ant-design/charts的Line组件
|
||||
- **AND** UsageChart中SHALL不存在任何@ant-design/charts导入
|
||||
|
||||
#### Scenario: 移除配置对象模式
|
||||
- **WHEN** 图表实现
|
||||
- **THEN** SHALL使用Recharts声明式组件模式
|
||||
- **AND** 不SHALL使用Ant Design Charts的配置对象模式（xField、yField等）
|
||||
|
||||
### Requirement: 图表交互功能
|
||||
系统SHALL保持图表的基本交互功能。
|
||||
|
||||
#### Scenario: 鼠标悬停提示
|
||||
- **WHEN** 用户鼠标悬停在数据点上
|
||||
- **THEN** SHALL显示Tooltip提示框
|
||||
- **AND** 提示框SHALL显示日期和请求数
|
||||
- **AND** 提示框SHALL不遮挡图表内容
|
||||
|
||||
#### Scenario: 平滑曲线效果
|
||||
- **WHEN** 折线渲染
|
||||
- **THEN** SHALL使用monotone类型平滑曲线
|
||||
- **AND** 曲线SHALL自然流畅
|
||||
- **AND** 数据点SHALL准确对应
|
||||
|
||||
### Requirement: 图表性能
|
||||
系统SHALL确保图表渲染性能满足要求。
|
||||
|
||||
#### Scenario: 大数据量渲染
|
||||
- **WHEN** 统计数据包含大量数据点（>100）
|
||||
- **THEN** 图表SHALL在1秒内完成渲染
|
||||
- **AND** 交互响应SHALL流畅无卡顿
|
||||
|
||||
#### Scenario: 组件重渲染优化
|
||||
- **WHEN** 父组件重新渲染
|
||||
- **THEN** 图表组件SHALL避免不必要的重渲染
|
||||
- **AND** 数据未变化时SHALL保持稳定
|
||||
|
||||
### Requirement: 图表测试覆盖
|
||||
系统SHALL为Recharts图表组件提供完整的测试覆盖。
|
||||
|
||||
#### Scenario: 组件渲染测试
|
||||
- **WHEN** 运行单元测试
|
||||
- **THEN** UsageChart测试SHALL验证正常渲染
|
||||
- **AND** UsageChart测试SHALL验证空数据状态
|
||||
- **AND** UsageChart测试SHALL验证数据格式转换
|
||||
|
||||
#### Scenario: 数据处理测试
|
||||
- **WHEN** 运行单元测试
|
||||
- **THEN** 测试SHALL覆盖日期聚合逻辑
|
||||
- **AND** 测试SHALL覆盖数据排序逻辑
|
||||
- **AND** 测试SHALL验证边界情况
|
||||
@@ -0,0 +1,120 @@
|
||||
# TDesign Integration
|
||||
|
||||
集成TDesign React组件库，提供统一的UI设计系统和组件支持。
|
||||
|
||||
## ADDED 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存在
|
||||
Reference in New Issue
Block a user