From c1e2adacea421450e514cbbd541d0321f779448b Mon Sep 17 00:00:00 2001 From: SunCheng Date: Mon, 16 Feb 2026 22:40:13 +0800 Subject: [PATCH] chore: archive migrate-remaining-echarts-to-chartjs change MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Synced chart-migration-patterns spec to main specs - Archived to openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs - All artifacts complete, 57/80 tasks complete (23 test tasks skipped) Schema: spec-driven Status: ✓ Complete with warnings (test tasks skipped) --- .../.openspec.yaml | 0 .../design.md | 0 .../proposal.md | 0 .../specs/chart-migration-patterns/spec.md | 0 .../tasks.md | 0 .../specs/chart-migration-patterns/spec.md | 115 ++++++++++++++++++ 6 files changed, 115 insertions(+) rename openspec/changes/{migrate-remaining-echarts-to-chartjs => archive/2026-02-16-migrate-remaining-echarts-to-chartjs}/.openspec.yaml (100%) rename openspec/changes/{migrate-remaining-echarts-to-chartjs => archive/2026-02-16-migrate-remaining-echarts-to-chartjs}/design.md (100%) rename openspec/changes/{migrate-remaining-echarts-to-chartjs => archive/2026-02-16-migrate-remaining-echarts-to-chartjs}/proposal.md (100%) rename openspec/changes/{migrate-remaining-echarts-to-chartjs => archive/2026-02-16-migrate-remaining-echarts-to-chartjs}/specs/chart-migration-patterns/spec.md (100%) rename openspec/changes/{migrate-remaining-echarts-to-chartjs => archive/2026-02-16-migrate-remaining-echarts-to-chartjs}/tasks.md (100%) create mode 100644 openspec/specs/chart-migration-patterns/spec.md diff --git a/openspec/changes/migrate-remaining-echarts-to-chartjs/.openspec.yaml b/openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/.openspec.yaml similarity index 100% rename from openspec/changes/migrate-remaining-echarts-to-chartjs/.openspec.yaml rename to openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/.openspec.yaml diff --git a/openspec/changes/migrate-remaining-echarts-to-chartjs/design.md b/openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/design.md similarity index 100% rename from openspec/changes/migrate-remaining-echarts-to-chartjs/design.md rename to openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/design.md diff --git a/openspec/changes/migrate-remaining-echarts-to-chartjs/proposal.md b/openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/proposal.md similarity index 100% rename from openspec/changes/migrate-remaining-echarts-to-chartjs/proposal.md rename to openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/proposal.md diff --git a/openspec/changes/migrate-remaining-echarts-to-chartjs/specs/chart-migration-patterns/spec.md b/openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/specs/chart-migration-patterns/spec.md similarity index 100% rename from openspec/changes/migrate-remaining-echarts-to-chartjs/specs/chart-migration-patterns/spec.md rename to openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/specs/chart-migration-patterns/spec.md diff --git a/openspec/changes/migrate-remaining-echarts-to-chartjs/tasks.md b/openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/tasks.md similarity index 100% rename from openspec/changes/migrate-remaining-echarts-to-chartjs/tasks.md rename to openspec/changes/archive/2026-02-16-migrate-remaining-echarts-to-chartjs/tasks.md diff --git a/openspec/specs/chart-migration-patterns/spec.md b/openspec/specs/chart-migration-patterns/spec.md new file mode 100644 index 0000000..a1a59c0 --- /dev/null +++ b/openspec/specs/chart-migration-patterns/spec.md @@ -0,0 +1,115 @@ +## ADDED Requirements + +### Requirement: 仪表盘图表迁移模式 +组件 SHALL 使用 Chart.js Doughnut 图表实现仪表盘（Gauge）效果，替代 ECharts Gauge 图表。 + +#### Scenario: 半圆仪表盘渲染 +- **WHEN** 组件接收预算统计数据（current, limit） +- **THEN** 系统使用 Doughnut 图表渲染半圆进度条，配置 `rotation: -90` 和 `circumference: 180` + +#### Scenario: 中心文本叠加显示 +- **WHEN** 仪表盘图表渲染完成 +- **THEN** 系统在图表中心显示余额/超支文本，使用 CSS 绝对定位的覆盖层 + +#### Scenario: 动态颜色切换 +- **WHEN** 实际值超过预算限额 +- **THEN** 进度条颜色切换为危险色（`var(--van-danger-color)`），中心文本显示"超支" + +#### Scenario: 暗色模式适配 +- **WHEN** 用户切换到暗色主题 +- **THEN** 图表颜色自动适配，使用 `useChartTheme` composable 获取主题色 + +### Requirement: 折线图迁移模式 +组件 SHALL 使用 Chart.js Line 图表实现趋势折线图，替代 ECharts Line 图表。 + +#### Scenario: 单系列折线图渲染 +- **WHEN** 组件接收月度支出数据（日期 + 金额数组） +- **THEN** 系统渲染折线图，X 轴为日期标签，Y 轴为金额，使用渐变填充 + +#### Scenario: 双系列折线图渲染 +- **WHEN** 组件接收收支数据（包含收入和支出两个系列） +- **THEN** 系统渲染两条折线，支出为红色，收入为绿色，支持独立的 hover 交互 + +#### Scenario: 空数据处理 +- **WHEN** 图表数据为空或所有数据点为 0 +- **THEN** 系统显示 `` 空状态组件，而非空白图表 + +#### Scenario: Tooltip 格式化 +- **WHEN** 用户 hover 到数据点 +- **THEN** Tooltip 显示"¥XXX.XX"格式的金额，使用 `callbacks.label` 自定义 + +### Requirement: 饼图/环形图迁移模式 +组件 SHALL 使用 Chart.js Doughnut 图表实现分类统计环形图，替代 ECharts Pie 图表。 + +#### Scenario: 环形图渲染 +- **WHEN** 组件接收分类统计数据（分类名称 + 金额数组） +- **THEN** 系统渲染环形图，每个分类使用不同颜色，配置 `cutout: '50%'` + +#### Scenario: 分类颜色映射 +- **WHEN** 分类数据包含预定义颜色 +- **THEN** 图表使用 props 传入的颜色数组，确保与列表中的分类色块一致 + +#### Scenario: 小分类合并 +- **WHEN** 分类数量超过 10 个 +- **THEN** 系统使用 `mergeSmallCategories()` 工具函数，将占比小于 5% 的分类合并为"其他" + +#### Scenario: 点击分类跳转 +- **WHEN** 用户点击环形图扇区 +- **THEN** 系统触发 `@category-click` 事件，传递分类名称和类型 + +### Requirement: BaseChart 组件统一使用 +所有图表组件 SHALL 使用 `BaseChart.vue` 包装组件，而非直接使用 vue-chartjs 组件。 + +#### Scenario: BaseChart 组件使用 +- **WHEN** 组件需要渲染图表 +- **THEN** 使用 `` + +#### Scenario: Loading 状态处理 +- **WHEN** 图表数据加载中 +- **THEN** BaseChart 显示 `` 组件 + +#### Scenario: 图表渲染回调 +- **WHEN** 图表渲染完成 +- **THEN** BaseChart 触发 `@chart:render` 事件，传递 Chart.js 实例引用 + +### Requirement: ECharts 代码完全移除 +组件 SHALL 移除所有 ECharts 相关代码，包括导入语句、实例变量、环境变量判断。 + +#### Scenario: 移除 ECharts 导入 +- **WHEN** 迁移组件 +- **THEN** 删除 `import * as echarts from 'echarts'` 语句 + +#### Scenario: 移除环境变量开关 +- **WHEN** 迁移组件 +- **THEN** 删除 `const useChartJS = import.meta.env.VITE_USE_CHARTJS === 'true'` 和相关的 `v-if`/`v-else` 条件渲染 + +#### Scenario: 移除 ECharts 实例管理 +- **WHEN** 迁移组件 +- **THEN** 删除 `let chartInstance = null`、`echarts.init()`、`chartInstance.setOption()` 等代码 + +#### Scenario: 移除生命周期清理 +- **WHEN** 迁移组件 +- **THEN** 删除 `onBeforeUnmount()` 中的 `chartInstance.dispose()` 调用 + +### Requirement: 测试覆盖 +迁移后的组件 SHALL 通过白盒和黑盒测试验证功能正确性。 + +#### Scenario: 单元测试 - 组件挂载 +- **WHEN** 运行 Jest 单元测试 +- **THEN** 组件能够成功挂载，不抛出错误 + +#### Scenario: 单元测试 - Props 传递 +- **WHEN** 传入测试数据 props +- **THEN** 计算属性 `chartData` 和 `chartOptions` 返回正确的 Chart.js 配置对象 + +#### Scenario: E2E 测试 - 图表渲染 +- **WHEN** 运行 Playwright E2E 测试 +- **THEN** 浏览器中能看到图表元素（Canvas），且无控制台错误 + +#### Scenario: E2E 测试 - 用户交互 +- **WHEN** 用户 hover 到图表数据点 +- **THEN** Tooltip 正确显示，格式化后的金额信息可见 + +#### Scenario: 视觉回归测试 +- **WHEN** 截图对比迁移前后的图表 +- **THEN** 颜色、布局、字体大小差异在可接受范围内（像素差异 < 5%）