lanyuanxiaoyao
2b1c5e96c3
- 替换 antd 为 tdesign-react 作为主要 UI 组件库 - 引入 Recharts 替代 @ant-design/charts 实现图表功能 - 移除主题系统相关代码（ThemeContext、themes 目录） - 更新所有组件以适配 TDesign 组件 API - 更新测试用例以匹配新的组件实现 - 新增 TDesign 和 Recharts 集成规范文档
115 lines
3.8 KiB
Markdown
115 lines
3.8 KiB
Markdown
# Recharts Integration
|
||
|
||
## Purpose
|
||
|
||
TBD - 集成Recharts图表库，实现数据可视化功能，替代@ant-design/charts。
|
||
|
||
## 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验证边界情况
|