lanyuanxiaoyao/nex
1
0
Fork 0
Code Activity
Files
aea360bce815a0f14f4e7ed930974eeb5ae5b19c
nex/openspec/specs/recharts-integration/spec.md
lanyuanxiaoyao 2b1c5e96c3 refactor: 迁移 UI 组件库从 Ant Design 至 TDesign 
- 替换 antd 为 tdesign-react 作为主要 UI 组件库
- 引入 Recharts 替代 @ant-design/charts 实现图表功能
- 移除主题系统相关代码（ThemeContext、themes 目录）
- 更新所有组件以适配 TDesign 组件 API
- 更新测试用例以匹配新的组件实现
- 新增 TDesign 和 Recharts 集成规范文档
2026-04-17 18:22:13 +08:00

3.8 KiB
Raw Blame History

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验证边界情况
View Git Blame Copy Permalink