|
|
@@ -47,19 +47,13 @@
|
|
|
4. 配置构建和测试脚本
|
|
|
5. 迁移 u-charts 核心库文件
|
|
|
|
|
|
-**阶段2:重构 u-charts 核心库模块化(故事016.006)**
|
|
|
+**阶段2:重构 u-charts 核心库模块化(故事016.002)**
|
|
|
1. 分析当前 u-charts.ts 文件结构(7719行)
|
|
|
-2. 按功能模块拆分为多个文件
|
|
|
+2. 按功能模块拆分为多个文件,并在拆分过程中添加 TypeScript 类型定义
|
|
|
3. 保持向后兼容性
|
|
|
4. 确保拆分后功能完整性
|
|
|
|
|
|
-**阶段3:添加 TypeScript 类型定义(故事016.002)**
|
|
|
-1. 为重构后的 u-charts 库添加完整的 TypeScript 类型定义
|
|
|
-2. 定义图表配置接口(ChartConfig、SeriesConfig、AxisConfig等)
|
|
|
-3. 定义图表类型枚举(ChartType)
|
|
|
-4. 导出类型供使用者使用
|
|
|
-
|
|
|
-**阶段4:创建 React 组件封装(故事016.003)**
|
|
|
+**阶段3:创建 React 组件封装(故事016.003)**
|
|
|
1. 创建现代函数式图表组件:
|
|
|
- ColumnChart(柱状图)
|
|
|
- LineChart(折线图)
|
|
|
@@ -70,13 +64,13 @@
|
|
|
3. 支持触摸事件处理(tooltip、拖拽)
|
|
|
4. 支持响应式尺寸计算
|
|
|
|
|
|
-**阶段5:创建使用示例和文档(故事016.004)**
|
|
|
+**阶段4:创建使用示例和文档(故事016.004)**
|
|
|
1. 在包内创建 examples 目录
|
|
|
2. 提供完整的示例代码
|
|
|
3. 创建 API 文档
|
|
|
4. 更新使用示例.md
|
|
|
|
|
|
-**阶段6:创建测试套件(故事016.005)**
|
|
|
+**阶段5:创建测试套件(故事016.005)**
|
|
|
1. 设置 Jest 测试环境
|
|
|
2. 创建图表组件单元测试
|
|
|
3. 创建 Canvas mock 用于测试
|
|
|
@@ -84,18 +78,20 @@
|
|
|
|
|
|
**迁移策略:**
|
|
|
1. **保留原始逻辑**:保持 u-charts 核心绘制逻辑不变
|
|
|
-2. **渐进式封装**:先迁移核心库,再添加类型定义,最后创建 React 组件
|
|
|
-3. **向后兼容**:提供直接使用 u-charts 类的接口
|
|
|
-4. **测试驱动**:为每个组件编写测试
|
|
|
+2. **渐进式封装**:先迁移核心库,再模块化并添加类型定义,最后创建 React 组件
|
|
|
+3. **类型定义自动化**:TypeScript 会自动生成 .d.ts 声明文件,在模块化拆分时添加类型注解即可
|
|
|
+4. **向后兼容**:提供直接使用 u-charts 类的接口
|
|
|
+5. **测试驱动**:为每个组件编写测试
|
|
|
|
|
|
**成功标准:**
|
|
|
1. `mini-charts` 包创建成功,可通过 workspace 引用
|
|
|
2. u-charts 核心库成功迁移,功能完整
|
|
|
-3. TypeScript 类型定义完整,无 any 类型
|
|
|
-4. 提供至少5种常用图表组件(柱状图、折线图、K线图、饼图、雷达图)
|
|
|
-5. 组件可以独立测试(类型检查和 Jest 测试通过)
|
|
|
-6. 提供完整的示例和文档
|
|
|
-7. 可以被 mini 项目或其他 mini-ui-packages 引用
|
|
|
+3. u-charts 核心库完成模块化重构,并添加完整的类型注解
|
|
|
+4. TypeScript 类型定义完整,自动生成 .d.ts 声明文件,无 any 类型(除非必要)
|
|
|
+5. 提供至少5种常用图表组件(柱状图、折线图、K线图、饼图、雷达图)
|
|
|
+6. 组件可以独立测试(类型检查和 Jest 测试通过)
|
|
|
+7. 提供完整的示例和文档
|
|
|
+8. 可以被 mini 项目或其他 mini-ui-packages 引用
|
|
|
|
|
|
## 故事列表
|
|
|
|
|
|
@@ -124,14 +120,17 @@
|
|
|
- [x] 包可以成功构建(tsc 编译通过)
|
|
|
- [x] 类型检查通过(pnpm typecheck)
|
|
|
|
|
|
-### 故事016-006:重构 u-charts 核心库模块化
|
|
|
-**背景:** 当前 u-charts.ts 文件包含7719行代码,所有功能都在一个文件中,包括42个绘制函数、约60个工具/数据处理函数以及2个类。这种结构不利于代码维护、测试和后续的类型定义添加。
|
|
|
+### 故事016-002:重构 u-charts 核心库模块化并添加类型定义
|
|
|
+**背景:** 当前 u-charts.ts 文件包含7719行代码,所有功能都在一个文件中,包括42个绘制函数、约60个工具/数据处理函数以及2个类。这种结构不利于代码维护、测试和后续的开发。同时,原始库为纯JavaScript,缺少TypeScript类型支持。
|
|
|
+
|
|
|
+**重要说明**:本故事将模块化拆分与类型定义合并进行。TypeScript 编译器会自动生成 .d.ts 声明文件(已在 tsconfig.json 中配置 `declaration: true`),因此只需在拆分模块时添加适当的类型注解即可,无需单独创建类型定义文件。
|
|
|
|
|
|
**任务列表:**
|
|
|
1. 分析当前 u-charts.ts 文件结构:
|
|
|
- 识别所有函数和类的职责
|
|
|
- 分析函数之间的依赖关系
|
|
|
- 确定模块划分方案
|
|
|
+ - 识别需要添加类型注解的关键位置
|
|
|
2. 创建模块化目录结构:
|
|
|
```
|
|
|
src/lib/
|
|
|
@@ -173,43 +172,47 @@
|
|
|
├── u-charts-event.ts # 事件类
|
|
|
└── u-charts.ts # 主类(重构后)
|
|
|
```
|
|
|
-3. 拆分文件(按优先级):
|
|
|
+3. 拆分文件并添加类型注解(按优先级):
|
|
|
- **第一批**:配置和工具函数(低依赖)
|
|
|
- - 创建 config.ts,导出 config、assign、util
|
|
|
- - 创建 utils/ 目录下的文件
|
|
|
+ - 创建 config.ts,导出 config、assign、util,添加类型注解
|
|
|
+ - 创建 utils/ 目录下的文件,为工具函数添加参数和返回值类型
|
|
|
- **第二批**:数据处理函数(中依赖)
|
|
|
- - 创建 data-processing/ 目录
|
|
|
- - 创建 charts-data/ 目录
|
|
|
+ - 创建 data-processing/ 目录,添加数据流类型
|
|
|
+ - 创建 charts-data/ 目录,添加数据点类型
|
|
|
- **第三批**:绘制函数(高依赖)
|
|
|
- - 创建 renderers/ 目录
|
|
|
+ - 创建 renderers/ 目录,添加 Canvas 上下文和配置类型
|
|
|
- **第四批**:核心类重构
|
|
|
- - 重构 u-charts.ts,导入所有模块
|
|
|
- - 移动 uChartsEvent 类到独立文件
|
|
|
+ - 重构 u-charts.ts,导入所有模块,添加类方法类型
|
|
|
+ - 移动 uChartsEvent 类到独立文件,添加事件类型
|
|
|
4. 更新 src/index.ts:
|
|
|
- 导出所有公共API
|
|
|
- 保持向后兼容性(默认导出 uCharts 类)
|
|
|
- 导出各个模块供高级用户使用
|
|
|
5. 验证拆分结果:
|
|
|
- 确保所有导出正确
|
|
|
- - 运行类型检查
|
|
|
+ - 运行类型检查,验证类型注解正确
|
|
|
- 如果有现有测试,确保测试通过
|
|
|
+ - 验证生成的 .d.ts 文件正确导出类型
|
|
|
|
|
|
**验收标准:**
|
|
|
- [ ] u-charts.ts 成功拆分为多个模块文件
|
|
|
- [ ] 每个模块职责单一、边界清晰
|
|
|
- [ ] 所有函数和类正确导出
|
|
|
- [ ] src/index.ts 保持向后兼容,默认导出 uCharts 类
|
|
|
-- [ ] 类型检查通过(pnpm typecheck)
|
|
|
-- [ ] 包可以成功构建
|
|
|
+- [ ] 所有公共函数和类都有完整的类型注解
|
|
|
+- [ ] 类型检查通过(pnpm typecheck),无 any 类型(除非必要)
|
|
|
+- [ ] 包可以成功构建,自动生成 .d.ts 声明文件
|
|
|
- [ ] 代码组织清晰,易于维护和测试
|
|
|
- [ ] 模块间依赖关系合理,无循环依赖
|
|
|
|
|
|
**技术注意事项:**
|
|
|
- 拆分时保持函数逻辑完全不变,只改变文件组织
|
|
|
- 使用相对导入确保模块间正确引用
|
|
|
-- 注意 TypeScript 的类型导出
|
|
|
+- 在拆分时同步添加类型注解,利用 TypeScript 自动生成 .d.ts 文件
|
|
|
+- 公共 API 添加完整类型注解,内部实现可适当使用 any
|
|
|
- 保持原有的代码风格
|
|
|
- 拆分后每个文件控制在500行以内
|
|
|
+- 移除 `@ts-nocheck` 注解,使用正确的类型替代
|
|
|
|
|
|
**风险缓解:**
|
|
|
- 在拆分前备份原始文件
|
|
|
@@ -217,36 +220,6 @@
|
|
|
- 使用 Git 版本控制,便于回滚
|
|
|
- 拆分过程中保持构建可运行状态
|
|
|
|
|
|
-### 故事016-002:添加 TypeScript 类型定义
|
|
|
-**背景:** 在故事016.001完成基础迁移后,需要为 u-charts 库添加完整的 TypeScript 类型定义。原库为纯JavaScript,缺少类型支持。先完成基础类型定义,再进行模块化重构(016.006)会更容易。
|
|
|
-
|
|
|
-**任务列表:**
|
|
|
-1. 分析重构后的 u-charts 库结构:
|
|
|
- - 理解各模块的导出内容
|
|
|
- - 识别公共 API 和内部 API
|
|
|
- - 参考使用示例.md 中的配置
|
|
|
-2. 定义核心 TypeScript 接口(types/ 目录):
|
|
|
- - ChartConfig:图表总配置接口
|
|
|
- - ChartType:图表类型枚举('column' | 'line' | 'candle' | 'pie' | 'radar' 等)
|
|
|
- - SeriesConfig:数据系列配置
|
|
|
- - AxisConfig:坐标轴配置(X轴、Y轴)
|
|
|
- - ExtraConfig:各种图表的额外配置
|
|
|
- - ColorConfig:颜色配置
|
|
|
-3. 为各模块添加类型定义:
|
|
|
- - utils/ 模块的函数类型
|
|
|
- - data-processing/ 模块的函数类型
|
|
|
- - renderers/ 模块的函数类型
|
|
|
- - uCharts 和 uChartsEvent 类的类型
|
|
|
-4. 导出所有类型供使用者使用
|
|
|
-5. 创建 types/index.ts 统一导出所有类型
|
|
|
-
|
|
|
-**验收标准:**
|
|
|
-- [ ] 所有配置选项都有对应的类型定义
|
|
|
-- [ ] ChartType 枚举包含所有支持的图表类型
|
|
|
-- [ ] 类型定义完整,无 any 类型(除非必要)
|
|
|
-- [ ] 类型导出正确,可以被使用者导入
|
|
|
-- [ ] 类型检查通过,无类型错误
|
|
|
-
|
|
|
### 故事016-003:创建 React 图表组件封装
|
|
|
**背景:** u-charts 原库需要手动管理 Canvas 上下文和事件处理。需要创建现代 React 函数式组件,简化使用方式。
|
|
|
|
|
|
@@ -341,11 +314,13 @@
|
|
|
- **缓解措施**:保留原始文件,迁移后进行功能对比测试
|
|
|
- **回滚计划**:如果迁移导致问题,可以从文档目录重新使用原文件
|
|
|
- **类型定义风险**:原库没有类型,可能存在类型定义不准确的问题
|
|
|
-- **缓解措施**:先添加基础类型,然后逐步完善,使用 any 作为过渡
|
|
|
+- **缓解措施**:在模块化重构时同步添加类型注解,利用 TypeScript 自动生成 .d.ts 文件
|
|
|
|
|
|
## 完成定义
|
|
|
|
|
|
- [ ] 所有故事完成,验收标准满足
|
|
|
+- [ ] u-charts 核心库完成模块化重构,并添加完整的类型注解
|
|
|
+- [ ] TypeScript 自动生成的 .d.ts 声明文件正确导出所有公共 API
|
|
|
- [ ] 类型检查通过,无 TypeScript 错误
|
|
|
- [ ] 所有测试通过,包括单元测试和集成测试
|
|
|
- [ ] 代码审查通过,符合项目编码标准
|