EmailBill/openspec/changes/unify-stats-calendar-color-scheme/tasks.md

1. 代码审查与准备

• 1.1 使用 Glob 搜索 statisticsV2/ 和 calendarV2/ 目录下所有使用 background-color 和 --bg- 的文件
• 1.2 确认配色方案：白底/黑底 + 灰卡片（与PWA状态栏一致）
• 1.3 确认日历 V2 无需修改（已使用目标配色）
• 1.4 确认统计 V2 需要修改的文件清单

2. 修改统计 V2 主页面容器背景

• 2.1 打开 Web/src/views/statisticsV2/Index.vue 文件
• 2.2 在 <style> 块中找到 .statistics-scroll-content 类
• 2.3 将 background-color: var(--bg-secondary) 修改为 var(--bg-primary)
• 2.4 验证页面背景使用 --bg-primary（白底/黑底）

3. 修改统计 V2 卡片背景

• 3.1 打开 Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue 文件
• 3.2 将 .common-card 的 background: var(--bg-primary) 修改为 var(--bg-secondary)
• 3.3 修改 ExpenseCategoryCard.vue 中的 .common-card 背景
• 3.4 修改 IncomeNoneCategoryCard.vue 中的 .common-card 背景
• 3.5 修改 DailyTrendChart.vue 中的 .daily-trend-card 背景
• 3.6 修改 IncomeBalanceCard.vue 中的 .income-balance-card 背景

4. 代码质量检查

• 4.1 运行 pnpm lint 检查代码格式和语法
• 4.2 使用 Grep 搜索修改后的文件，确认无硬编码颜色值
• 4.3 确认所有修改仅使用 CSS 变量 var(--bg-primary) 和 var(--bg-secondary)
• 4.4 验证修改后的文件数量和范围

5. 功能验证 - 亮色模式

• 5.1 在浏览器中打开统计 V2 页面，确认为亮色主题
• 5.2 验证页面背景为白色（#FFFFFF，对应 --bg-primary）
• 5.3 验证所有卡片背景为灰色（#F6F7F8，对应 --bg-secondary）
• 5.4 验证文字颜色对比度清晰可读

6. 功能验证 - 暗色模式

• 6.1 在设置中切换到暗色主题
• 6.2 验证页面背景为黑色（#09090B，对应 --bg-primary）
• 6.3 验证所有卡片背景为深灰色（#18181b，对应 --bg-secondary）
• 6.4 使用 Chrome DevTools 对比度检查器验证文字可读性

7. 页面切换验证

• 7.1 从统计 V2 页面导航到日历 V2 页面
• 7.2 确认两个页面的配色方案一致（白底/黑底 + 灰卡片）
• 7.3 确认无配色闪烁或突变现象
• 7.4 多次切换页面，验证配色稳定性

8. 主题切换验证

• 8.1 在统计 V2 页面切换主题（亮色 ↔ 暗色）
• 8.2 确认页面配色立即同步更新
• 8.3 切换到日历 V2 页面，确认配色方案一致
• 8.4 验证PWA状态栏颜色与页面背景一致

9. 回归测试 - 其他页面不受影响

• 9.1 访问预算页面（/budget），确认配色与修改前一致
• 9.2 访问设置页面（/settings），确认配色与修改前一致
• 9.3 访问统计 V1 页面（/statistics），确认配色与修改前一致
• 9.4 访问消息页面（/message），确认配色与修改前一致

10. 代码提交与部署

• 10.1 使用 Git 查看所有修改的文件，确认仅修改了统计 V2 相关文件
• 10.2 编写清晰的 commit message（如："统一统计 V2 和日历 V2 页面配色方案 - 白底/黑底 + 灰卡片"）
• 10.3 提交代码到开发分支
• 10.4 创建 Pull Request 并附上修改前后的截图对比
• 10.5 等待代码 review 并合并到主分支