|
|
@@ -0,0 +1,425 @@
|
|
|
+# <!-- Powered by BMAD™ Core -->
|
|
|
+
|
|
|
+# Story 016.001: 创建 mini-charts 包基础结构
|
|
|
+
|
|
|
+## Status
|
|
|
+
|
|
|
+Draft
|
|
|
+
|
|
|
+## Story
|
|
|
+
|
|
|
+**作为** 小程序开发者,
|
|
|
+**我想要** 创建一个独立的 mini-charts 包,包含迁移后的 u-charts 图表库核心代码,
|
|
|
+**以便于** 在多个小程序项目中复用图表功能,减少重复代码并便于维护
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+
|
|
|
+1. `mini-charts` 包目录结构创建完成
|
|
|
+2. package.json 配置正确,包含所有必需依赖
|
|
|
+3. tsconfig.json 配置正确
|
|
|
+4. u-charts 核心库迁移成功,无语法错误
|
|
|
+5. 包可以成功构建(tsc 编译通过)
|
|
|
+6. 类型检查通过(pnpm typecheck)
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+
|
|
|
+- [ ] Task 1: 创建 mini-charts 包基础目录结构 (AC: 1)
|
|
|
+ - [ ] 1.1 在 `mini-ui-packages/` 下创建 `mini-charts` 目录
|
|
|
+ - [ ] 1.2 创建标准子目录: `src/`, `src/lib/`, `tests/`
|
|
|
+ - [ ] 1.3 创建配置文件: `package.json`, `tsconfig.json`, `jest.config.js`
|
|
|
+
|
|
|
+- [ ] Task 2: 配置 package.json (AC: 2)
|
|
|
+ - [ ] 2.1 设置包名 `@d8d/mini-charts`
|
|
|
+ - [ ] 2.2 配置包的导出(exports)字段
|
|
|
+ - [ ] 2.3 添加必需依赖:
|
|
|
+ - Taro 相关包: `@tarojs/components`, `@tarojs/taro`, `@tarojs/react`
|
|
|
+ - React: `react`, `react-dom`
|
|
|
+ - [ ] 2.4 添加开发依赖:
|
|
|
+ - TypeScript: `typescript`, `@types/node`, `@types/react`, `@types/react-dom`
|
|
|
+ - Jest: `jest`, `ts-jest`, `@testing-library/react`
|
|
|
+ - [ ] 2.5 配置构建和测试脚本:
|
|
|
+ - `build`: `tsc`
|
|
|
+ - `dev`: `tsc --watch`
|
|
|
+ - `typecheck`: `tsc --noEmit`
|
|
|
+ - `test`: `jest`
|
|
|
+
|
|
|
+- [ ] Task 3: 配置 TypeScript (AC: 3)
|
|
|
+ - [ ] 3.1 创建 `tsconfig.json`,配置编译选项:
|
|
|
+ - `target`: `ES2020`
|
|
|
+ - `module`: `ESNext`
|
|
|
+ - `jsx`: `react-jsx`
|
|
|
+ - `strict`: `true`
|
|
|
+ - `moduleResolution`: `node`
|
|
|
+ - `esModuleInterop`: `true`
|
|
|
+ - `skipLibCheck`: `true`
|
|
|
+ - [ ] 3.2 配置包含目录: `src/`
|
|
|
+ - [ ] 3.3 配置输出目录: `dist/`
|
|
|
+
|
|
|
+- [ ] Task 4: 迁移 u-charts 核心库 (AC: 4)
|
|
|
+ - [ ] 4.1 复制 `docs/小程序图表库示例/u-charts小程序图表库.js` 到 `src/lib/u-charts.ts`
|
|
|
+ - [ ] 4.2 将文件从 JavaScript 转换为 TypeScript:
|
|
|
+ - 移除 `'use strict'` 指令
|
|
|
+ - 添加基础类型注解(为函数参数和返回值添加 `: any` 类型作为临时措施)
|
|
|
+ - 将 `var` 替换为 `const` 或 `let`
|
|
|
+ - 将 `function` 声明转换为箭头函数或保留(根据上下文)
|
|
|
+ - [ ] 4.3 导出 u-charts 类和配置对象
|
|
|
+ - [ ] 4.4 验证无语法错误
|
|
|
+
|
|
|
+- [ ] Task 5: 创建包的导出配置 (AC: 1, 2)
|
|
|
+ - [ ] 5.1 创建 `src/index.ts` 主入口文件
|
|
|
+ - [ ] 5.2 从 `src/lib/u-charts.ts` 导出 u-charts 核心类
|
|
|
+ - [ ] 5.3 导出 u-charts 配置对象(config)
|
|
|
+ - [ ] 5.4 导出 u-charts 工具函数(util)
|
|
|
+ - [ ] 5.5 配置 package.json 的 exports 字段以支持这些导出
|
|
|
+
|
|
|
+- [ ] Task 6: 配置 Jest 测试环境 (AC: 5, 6)
|
|
|
+ - [ ] 6.1 创建 `jest.config.js`
|
|
|
+ - [ ] 6.2 配置 TypeScript 预处理器(ts-jest)
|
|
|
+ - [ ] 6.3 创建测试文件 `tests/u-charts.test.ts`
|
|
|
+ - [ ] 6.4 编写基础测试:验证 u-charts 类可以正确导入和实例化
|
|
|
+
|
|
|
+- [ ] Task 7: 验证包构建和类型检查 (AC: 5, 6)
|
|
|
+ - [ ] 7.1 运行 `pnpm build` 验证编译通过
|
|
|
+ - [ ] 7.2 运行 `pnpm typecheck` 验证类型检查通过
|
|
|
+ - [ ] 7.3 运行 `pnpm test` 验证测试通过
|
|
|
+ - [ ] 7.4 检查 `dist/` 目录生成正确
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 项目结构信息
|
|
|
+
|
|
|
+**来源**: [source-tree.md](../architecture/source-tree.md)
|
|
|
+
|
|
|
+mini-charts 包应该创建在 `mini-ui-packages/` 目录下,与其他 mini UI 包并列:
|
|
|
+
|
|
|
+```
|
|
|
+mini-ui-packages/
|
|
|
+├── mini-charts/ # 新包
|
|
|
+├── mini-enterprise-auth-ui/
|
|
|
+├── mini-shared-ui-components/
|
|
|
+├── yongren-dashboard-ui/
|
|
|
+├── yongren-order-management-ui/
|
|
|
+└── ...
|
|
|
+```
|
|
|
+
|
|
|
+### 包结构规范
|
|
|
+
|
|
|
+**来源**: [ui-package-standards.md](../architecture/ui-package-standards.md)
|
|
|
+
|
|
|
+mini-charts 包应该遵循以下结构:
|
|
|
+
|
|
|
+```
|
|
|
+mini-charts/
|
|
|
+├── package.json # 包配置
|
|
|
+├── tsconfig.json # TypeScript配置
|
|
|
+├── jest.config.js # Jest测试配置
|
|
|
+├── src/
|
|
|
+│ ├── index.ts # 主入口文件
|
|
|
+│ └── lib/
|
|
|
+│ └── u-charts.ts # u-charts核心库
|
|
|
+├── tests/
|
|
|
+│ └── u-charts.test.ts # u-charts基础测试
|
|
|
+└── README.md # 包文档(可选,本故事不要求)
|
|
|
+```
|
|
|
+
|
|
|
+### package.json 配置参考
|
|
|
+
|
|
|
+**来源**: 现有 mini UI 包 (yongren-statistics-ui)
|
|
|
+
|
|
|
+参考现有 mini UI 包的 package.json 配置,注意以下要点:
|
|
|
+
|
|
|
+1. **包名命名规范**: `@d8d/mini-charts`
|
|
|
+2. **TypeScript 直接导出**:
|
|
|
+ ```json
|
|
|
+ "main": "src/index.ts",
|
|
|
+ "types": "src/index.ts"
|
|
|
+ ```
|
|
|
+3. **exports 字段**: 支持主入口和子路径导出
|
|
|
+4. **Taro 依赖**:
|
|
|
+ - `@tarojs/components`: 4.1.4
|
|
|
+ - `@tarojs/taro`: 4.1.4
|
|
|
+ - `@tarojs/react`: 4.1.4
|
|
|
+5. **React 版本**: 18.x
|
|
|
+6. **构建脚本**:
|
|
|
+ - `build`: 使用 `tsc` 编译
|
|
|
+ - `dev`: `tsc --watch` 监听模式
|
|
|
+ - `typecheck`: `tsc --noEmit` 类型检查
|
|
|
+ - `test`: 使用 Jest (mini 包使用 Jest,不是 Vitest)
|
|
|
+
|
|
|
+### TypeScript 配置要点
|
|
|
+
|
|
|
+**来源**: [ui-package-standards.md](../architecture/ui-package-standards.md#typescript配置)
|
|
|
+
|
|
|
+```json
|
|
|
+{
|
|
|
+ "compilerOptions": {
|
|
|
+ "target": "ES2020",
|
|
|
+ "lib": ["DOM", "DOM.Iterable", "ES2020"],
|
|
|
+ "module": "ESNext",
|
|
|
+ "skipLibCheck": true,
|
|
|
+ "moduleResolution": "bundler",
|
|
|
+ "allowImportingTsExtensions": true,
|
|
|
+ "resolveJsonModule": true,
|
|
|
+ "isolatedModules": true,
|
|
|
+ "noEmit": true,
|
|
|
+ "jsx": "react-jsx",
|
|
|
+ "strict": true,
|
|
|
+ "noUnusedLocals": true,
|
|
|
+ "noUnusedParameters": true,
|
|
|
+ "noFallthroughCasesInSwitch": true
|
|
|
+ },
|
|
|
+ "include": ["src"]
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 测试配置要点
|
|
|
+
|
|
|
+**来源**: [测试策略.md](../architecture/testing-strategy.md)
|
|
|
+
|
|
|
+**重要**: mini 包使用 **Jest** 而不是 Vitest!
|
|
|
+
|
|
|
+1. **测试框架**: Jest + ts-jest
|
|
|
+2. **测试位置**: `tests/` 目录(与源码并列)
|
|
|
+3. **覆盖率目标**: 核心业务逻辑 > 80%
|
|
|
+4. **测试类型**:
|
|
|
+ - 单元测试: 测试 u-charts 类的实例化和配置
|
|
|
+ - **不要求**集成测试和 E2E 测试(这些在后续故事中)
|
|
|
+
|
|
|
+### u-charts 库信息
|
|
|
+
|
|
|
+**来源**: [epic-016-mini-charts-package.md](../prd/epic-016-mini-charts-package.md)
|
|
|
+
|
|
|
+- **文件大小**: 约 7700 行代码
|
|
|
+- **位置**: `docs/小程序图表库示例/u-charts小程序图表库.js`
|
|
|
+- **版本**: v2.5.0-20230101
|
|
|
+- **功能**:
|
|
|
+ - 支持多种图表类型: 柱状图(column)、折线图(line)、K线图(candle)、饼图、雷达图等
|
|
|
+ - 支持 Canvas 绘制
|
|
|
+ - 支持触摸交互: tooltip 显示、拖拽滚动
|
|
|
+ - 支持数据标签、图例、动画效果
|
|
|
+ - 高度可配置
|
|
|
+
|
|
|
+**迁移要求**:
|
|
|
+1. 保持原始逻辑不变
|
|
|
+2. 转换为 TypeScript 格式(添加基础类型)
|
|
|
+3. 不要求完整的类型定义(在故事 016.002 中完成)
|
|
|
+4. 不要求 React 组件封装(在故事 016.003 中完成)
|
|
|
+
|
|
|
+### 迁移技术要点
|
|
|
+
|
|
|
+**来源**: [u-charts 源文件分析](../小程序图表库示例/u-charts小程序图表库.js)
|
|
|
+
|
|
|
+从 u-charts 源文件分析,需要处理:
|
|
|
+
|
|
|
+1. **全局变量**: `config`, `assign`, `util` 需要转换为模块导出
|
|
|
+2. **函数定义**: 将 `function` 声明适当转换为箭头函数或保留
|
|
|
+3. **类型注解**: 初始阶段使用 `: any` 作为临时类型
|
|
|
+4. **导出方式**: 使用 ES6 `export` 语法
|
|
|
+
|
|
|
+示例转换:
|
|
|
+
|
|
|
+```javascript
|
|
|
+// 原始 JavaScript
|
|
|
+var config = { ... };
|
|
|
+var util = { ... };
|
|
|
+
|
|
|
+function getH5Offset(e) { ... }
|
|
|
+```
|
|
|
+
|
|
|
+```typescript
|
|
|
+// 转换后 TypeScript
|
|
|
+export const config = { ... };
|
|
|
+export const util = { ... };
|
|
|
+
|
|
|
+export function getH5Offset(e: any): void { ... }
|
|
|
+```
|
|
|
+
|
|
|
+### 依赖包版本要求
|
|
|
+
|
|
|
+**来源**: [tech-stack.md](../architecture/tech-stack.md)
|
|
|
+
|
|
|
+- React: 18.0.0 (mini 包使用 React 18,不是 React 19)
|
|
|
+- Taro: 4.1.4
|
|
|
+- TypeScript: 5.4.5
|
|
|
+- Node.js: 20.18.3 (运行时环境)
|
|
|
+
|
|
|
+### 包集成注意事项
|
|
|
+
|
|
|
+**来源**: [ui-package-standards.md](../architecture/ui-package-standards.md#集成规范)
|
|
|
+
|
|
|
+1. **Workspace 引用**: 在 package.json 中使用 `workspace:*` 引用其他 mini 包
|
|
|
+2. **导出结构**: 主入口导出 u-charts 核心类,后续故事添加组件和类型导出
|
|
|
+3. **向后兼容**: 保持 u-charts 原库功能完整性,允许直接使用 u-charts 类
|
|
|
+
|
|
|
+### 文件路径规范
|
|
|
+
|
|
|
+**来源**: [source-tree.md](../architecture/source-tree.md)
|
|
|
+
|
|
|
+所有新文件应创建在:
|
|
|
+- 包根目录: `mini-ui-packages/mini-charts/`
|
|
|
+- 源代码: `src/lib/u-charts.ts`
|
|
|
+- 主入口: `src/index.ts`
|
|
|
+- 测试: `tests/u-charts.test.ts`
|
|
|
+- 配置文件: 包根目录
|
|
|
+
|
|
|
+### 测试策略
|
|
|
+
|
|
|
+**来源**: [测试策略.md](../architecture/testing-strategy.md#测试用例编写规范)
|
|
|
+
|
|
|
+对于 mini-charts 包的初始测试:
|
|
|
+
|
|
|
+1. **测试框架**: Jest (不是 Vitest)
|
|
|
+2. **测试范围**:
|
|
|
+ - 验证 u-charts 类可以正确导入
|
|
|
+ - 验证 u-charts 类可以实例化
|
|
|
+ - 验证配置对象可以正确访问
|
|
|
+ - **不要求**完整的功能测试(在后续故事中完成)
|
|
|
+3. **Mock 策略**: 由于 u-charts 依赖 Canvas,需要 mock Canvas 上下文
|
|
|
+
|
|
|
+示例测试结构:
|
|
|
+
|
|
|
+```typescript
|
|
|
+describe('u-charts 库基础测试', () => {
|
|
|
+ it('应该正确导出 u-charts 类', () => {
|
|
|
+ expect(uCharts).toBeDefined();
|
|
|
+ });
|
|
|
+
|
|
|
+ it('应该正确导出配置对象', () => {
|
|
|
+ expect(config).toBeDefined();
|
|
|
+ expect(config.version).toBe('v2.5.0-20230101');
|
|
|
+ });
|
|
|
+
|
|
|
+ it('应该正确导出工具函数', () => {
|
|
|
+ expect(util).toBeDefined();
|
|
|
+ expect(util.toFixed).toBeDefined();
|
|
|
+ });
|
|
|
+});
|
|
|
+```
|
|
|
+
|
|
|
+### 构建和发布规范
|
|
|
+
|
|
|
+**来源**: [ui-package-standards.md](../architecture/ui-package-standards.md#构建和发布规范)
|
|
|
+
|
|
|
+mini-charts 包在 PNPM 工作空间中:
|
|
|
+- **开发模式**: 直接使用 TypeScript 源码
|
|
|
+- **构建**: 使用 `tsc` 编译到 `dist/` 目录
|
|
|
+- **类型检查**: 使用 `tsc --noEmit` 验证类型
|
|
|
+- **发布**: 本故事不要求发布,仅验证本地构建成功
|
|
|
+
|
|
|
+### 错误处理规范
|
|
|
+
|
|
|
+**来源**: [ui-package-standards.md](../architecture/ui-package-standards.md#错误处理规范)
|
|
|
+
|
|
|
+在迁移过程中:
|
|
|
+1. 保留原始的错误处理逻辑
|
|
|
+2. 不添加新的错误处理(在后续故事中完善)
|
|
|
+3. 验证迁移后的代码与原库功能一致
|
|
|
+
|
|
|
+### 开发流程
|
|
|
+
|
|
|
+**来源**: [开发工作流文档](../architecture/development-workflow.md)
|
|
|
+
|
|
|
+开发命令:
|
|
|
+```bash
|
|
|
+# 进入包目录
|
|
|
+cd mini-ui-packages/mini-charts
|
|
|
+
|
|
|
+# 安装依赖(在根目录)
|
|
|
+pnpm install
|
|
|
+
|
|
|
+# 开发模式(监听文件变化)
|
|
|
+pnpm dev
|
|
|
+
|
|
|
+# 类型检查
|
|
|
+pnpm typecheck
|
|
|
+
|
|
|
+# 运行测试
|
|
|
+pnpm test
|
|
|
+
|
|
|
+# 构建
|
|
|
+pnpm build
|
|
|
+```
|
|
|
+
|
|
|
+### 环境配置
|
|
|
+
|
|
|
+**来源**: [开发环境说明](../../CLAUDE.md)
|
|
|
+
|
|
|
+- **Node.js**: 20.19.2
|
|
|
+- **包管理器**: pnpm
|
|
|
+- **测试调试**: 使用 `pnpm test --testNamePattern "测试名称"` 运行特定测试
|
|
|
+- **Mini 测试**: 需要 Jest,不是 Vitest
|
|
|
+
|
|
|
+### 验证标准
|
|
|
+
|
|
|
+**来源**: [验收标准](#acceptance-criteria)
|
|
|
+
|
|
|
+完成本故事后,应该满足:
|
|
|
+
|
|
|
+1. ✅ `mini-ui-packages/mini-charts/` 目录存在,包含正确的子目录结构
|
|
|
+2. ✅ `package.json` 配置正确,包名为 `@d8d/mini-charts`
|
|
|
+3. ✅ `tsconfig.json` 配置正确,支持严格模式和 JSX
|
|
|
+4. ✅ `src/lib/u-charts.ts` 文件存在,是从原 u-charts.js 迁移而来
|
|
|
+5. ✅ `src/index.ts` 导出 u-charts 核心类和配置
|
|
|
+6. ✅ 运行 `pnpm build` 成功,生成 `dist/` 目录
|
|
|
+7. ✅ 运行 `pnpm typecheck` 无类型错误
|
|
|
+8. ✅ 运行 `pnpm test` 基础测试通过
|
|
|
+
|
|
|
+### 不包含在本故事中的工作
|
|
|
+
|
|
|
+**来源**: [epic-016 故事列表](../prd/epic-016-mini-charts-package.md#故事列表)
|
|
|
+
|
|
|
+以下工作**不在**本故事范围内:
|
|
|
+- ❌ 完整的 TypeScript 类型定义(故事 016.002)
|
|
|
+- ❌ React 组件封装(故事 016.003)
|
|
|
+- ❌ 使用示例和文档(故事 016.004)
|
|
|
+- ❌ 完整的测试套件(故事 016.005)
|
|
|
+
|
|
|
+### Testing
|
|
|
+
|
|
|
+**测试框架**: Jest (不是 Vitest)
|
|
|
+
|
|
|
+**测试位置**: `tests/` 目录(与源码并列)
|
|
|
+
|
|
|
+**测试要求**:
|
|
|
+1. 创建基础测试验证 u-charts 库的正确导入
|
|
|
+2. Mock Canvas 上下文以支持 u-charts 实例化测试
|
|
|
+3. 测试覆盖率目标: 基础测试即可,不要求高覆盖率
|
|
|
+
|
|
|
+**测试命令**:
|
|
|
+```bash
|
|
|
+# 运行所有测试
|
|
|
+pnpm test
|
|
|
+
|
|
|
+# 运行特定测试
|
|
|
+pnpm test --testNamePattern "u-charts 库基础测试"
|
|
|
+```
|
|
|
+
|
|
|
+**参考**: [测试策略.md](../architecture/testing-strategy.md)
|
|
|
+
|
|
|
+## Change Log
|
|
|
+
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-12-24 | 1.0 | 创建故事文档 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+
|
|
|
+_待开发时填写_
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+
|
|
|
+_待开发时填写_
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+
|
|
|
+_待开发时填写_
|
|
|
+
|
|
|
+### File List
|
|
|
+
|
|
|
+_待开发时填写_
|
|
|
+
|
|
|
+## QA Results
|
|
|
+
|
|
|
+_待 QA 审查时填写_
|