EmailBill/openspec/changes/archive/2026-02-17-migrate-to-chartjs/tasks.md

1. 基础设施搭建

• 1.1 安装依赖：pnpm add chart.js vue-chartjs
• 1.2 创建 Web/src/composables/useChartTheme.ts（主题配置 composable）
• 1.3 创建 Web/src/components/Charts/BaseChart.vue（通用图表包装器）
• 1.4 创建 Web/src/plugins/chartjs-gauge-plugin.ts（仪表盘插件）
• 1.5 创建 Web/src/utils/chartHelpers.ts（图表工具函数：格式化、颜色等）

2. 迁移简单图表（验证基础设施）

• 2.1 迁移 MonthlyExpenseCard.vue（柱状图，最简单）
  • 保留原有 ECharts 代码，新增 Chart.js 实现
  • 使用环境变量 VITE_USE_CHARTJS 控制切换
• 2.2 验证 MonthlyExpenseCard 功能：tooltip、响应式、暗色模式
• 2.3 迁移 ExpenseCategoryCard.vue（饼图）
  • 实现点击跳转到分类详情功能
  • 实现 "Others" 分组逻辑（<3% 的分类）
• 2.4 验证 ExpenseCategoryCard 功能：点击事件、颜色映射

3. 迁移折线图

• 3.1 迁移 DailyTrendChart.vue（基础折线图）
  • 实现双线（expense + income）配置
  • 实现缩放功能（使用 chartjs-plugin-zoom）
• 3.2 验证 DailyTrendChart 功能：周/月/年切换、缩放、高亮最大值点

4. 迁移复杂图表（BudgetChartAnalysis）

• 4.1 迁移月度仪表盘（使用 Doughnut + centerText 插件）
  • 实现居中文本显示（余额/差额）
  • 实现超支时颜色变化（红色/绿色）
  • 实现 scaleX(-1) 镜像效果（支出类型）
• 4.2 迁移年度仪表盘（复用月度逻辑）
• 4.3 迁移方差图（Variance Chart）
  • 实现横向柱状图
  • 实现实际 vs 预算的双柱对比
  • 实现超支/节省的颜色标识
• 4.4 迁移月度燃尽图（Burndown Chart）
  • 实现双线（理想线 + 实际线）
  • 实现投影线（dotted line extension）
• 4.5 迁移年度燃尽图（复用月度逻辑）
  • 实现当前月高亮标记
• 4.6 验证 BudgetChartAnalysis 所有交互：tab 切换、tooltip、响应式

5. 优化与测试

• 5.1 实现 prefers-reduced-motion 支持（禁用动画）
• 5.2 实现数据抽样（decimation plugin）用于大数据量场景
• 5.3 测试所有图表的暗色模式适配
• 5.4 测试所有图表的移动端触控交互（tap, pinch, swipe）
• 5.5 测试边界情况：空数据、单条数据、超长分类名
• 5.6 性能测试：Lighthouse Performance 分数对比

6. 清理与上线

• 6.1 移除所有组件中的 ECharts 代码（删除旧实现）
• 6.2 移除环境变量 VITE_USE_CHARTJS（默认使用 Chart.js）
• 6.3 从 package.json 移除 echarts 依赖
• 6.4 运行 pnpm build 并分析 bundle 大小（验证优化效果）
• 6.5 更新 AGENTS.md：记录 Chart.js 使用规范
• 6.6 创建 .doc/chart-migration-checklist.md（手动测试清单）
• 6.7 提交代码并部署到测试环境