fix

openspec/changes/unify-stats-calendar-color-scheme/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-11

openspec/changes/unify-stats-calendar-color-scheme/design.md

@@ -0,0 +1,142 @@
+## Context
+
+EmailBill 应用使用 Vue 3 + Vant UI，采用基于 CSS 变量的主题系统支持亮色/暗色模式切换。主题变量定义在 `Web/src/assets/theme.css` 中：
+
+- `--bg-primary`: 主背景色（亮色: #FFFFFF, 暗色: #09090B）
+- `--bg-secondary`: 次级背景色（亮色: #F6F7F8, 暗色: #18181b）
+
+**当前状态：**
+- **统计 V2 页面** (`statisticsV2/Index.vue`): 使用 `--bg-secondary` 作为页面背景（灰底），卡片使用 `--bg-primary`（白卡片/黑卡片）
+- **日历 V2 页面** (`calendarV2/Index.vue`): 使用 `--bg-primary` 作为页面背景（白底/黑底），卡片使用 `--bg-secondary`（灰卡片）
+
+**问题：** 页面切换时配色反转，导致视觉不连贯，尤其在暗色模式下黑底灰卡片对比度不足。
+
+**约束：**
+- 仅修改 CSS，不涉及 Vue 组件逻辑或 JavaScript 代码
+- 保持主题系统变量定义不变
+- 不影响其他页面（如 BudgetView, SettingView）
+
+## Goals / Non-Goals
+
+**Goals:**
+- 统一日历 V2 和统计 V2 页面的配色方案（灰底 + 白卡片/黑卡片）
+- 提升暗色模式下的视觉对比度
+- 保持主题切换功能正常工作
+- 确保修改后不影响页面功能和响应式布局
+
+**Non-Goals:**
+- 不重构主题系统或引入新的 CSS 变量
+- 不修改统计 V2 页面（作为标准参考）
+- 不涉及其他 V1 版本页面（`statisticsV1/`, `CalendarView.vue`）
+- 不调整卡片内部元素的样式（如文字颜色、图表配色）
+
+## Decisions
+
+### 决策 1：CSS 变量替换策略
+
+**选择：** 直接在 Vue 组件的 `<style>` 块中替换背景色变量
+
+**理由：**
+- 最小改动原则：仅修改 4 个 Vue 文件的 CSS 部分
+- 可追溯性：改动集中在日历 V2 相关文件，易于 review 和回滚
+- 无副作用：不影响其他页面或全局样式
+
+**替代方案（未采用）：**
+- ❌ 创建新的 CSS 类（如 `.page-bg-gray`）：增加复杂度，且只用于一个场景
+- ❌ 修改主题变量定义：影响范围过大，可能破坏其他页面
+
+### 决策 2：修改顺序与文件范围
+
+**修改文件清单：**
+1. `calendarV2/Index.vue` - 主容器 `.calendar-scroll-content`
+2. `calendarV2/modules/Stats.vue` - 统计卡片 `.stats-card`
+3. `calendarV2/modules/Calendar.vue` - 日历容器（如果有独立背景）
+4. `calendarV2/modules/TransactionList.vue` - 交易列表卡片（如果有）
+
+**修改规则：**
+- **页面级容器**：`background-color: var(--bg-primary)` → `var(--bg-secondary)`
+- **卡片级容器**：`background-color: var(--bg-secondary)` → `var(--bg-primary)`
+
+**验证点：**
+- 检查每个文件的 `<style>` 块中是否直接或间接（通过类名）使用了背景色
+- 使用浏览器 DevTools 检查计算后的样式，确认没有遗漏的背景声明
+
+### 决策 3：暗色模式验证
+
+**策略：** 在修改后同时测试亮色和暗色模式
+
+**验证场景：**
+1. 切换主题后页面背景和卡片背景正确应用
+2. 文字颜色对比度符合可读性要求（WCAG AA 标准）
+3. 图表和图标颜色在灰底上清晰可见
+
+**工具：**
+- Chrome DevTools 的对比度检查器
+- 手动切换应用内的主题开关
+
+## Risks / Trade-offs
+
+### 风险 1：遗漏子组件的背景声明
+
+**风险：** 日历 V2 的子模块可能在多个层级使用背景色，遗漏修改会导致局部配色不一致
+
+**缓解措施：**
+- 使用全局搜索（grep/Glob）查找 `calendarV2/` 目录下所有 `background-color` 和 `--bg-` 的使用
+- 在浏览器中使用 DevTools 的 "Computed" 面板检查每个可视元素的实际背景色
+- 对比统计 V2 页面的 DOM 结构和样式，确保层级一致
+
+### 风险 2：第三方组件（Vant）的样式覆盖
+
+**风险：** Vant UI 组件（如 `<van-pull-refresh>`, `<van-popup>`）可能有默认背景色，与新方案冲突
+
+**缓解措施：**
+- 检查 Vant 组件是否透明或继承父容器背景
+- 如有冲突，在组件级别添加覆盖样式（如 `::v-deep .van-pull-refresh__track`）
+- 参考统计 V2 页面的 Vant 组件样式处理
+
+### 风险 3：移动端真机测试
+
+**风险：** CSS 变量在某些旧版 iOS Safari 或 Android WebView 中可能渲染异常
+
+**缓解措施：**
+- 项目已使用 CSS 变量主题系统，现有页面正常运行，说明兼容性已验证
+- 修改后使用相同的变量，不引入新的兼容性风险
+- 如需验证，在移动端测试环境中切换主题并检查背景渲染
+
+### Trade-off：设计灵活性 vs 一致性
+
+**选择：** 优先保证与统计 V2 页面一致，牺牲日历页面独立的视觉风格
+
+**理由：**
+- 用户在页面间频繁切换，一致性优先级高于个性化
+- 灰底白卡片方案在暗色模式下对比度更好，更符合可访问性标准
+- 如果未来需要差异化设计，可通过主题系统扩展（如增加 `--page-specific-bg`）
+
+## Migration Plan
+
+**部署步骤：**
+1. 在开发分支完成所有 CSS 修改
+2. 本地验证亮色/暗色模式切换正常
+3. 提交代码并运行前端 lint 和构建测试（`pnpm lint && pnpm build`）
+4. 合并到主分支并部署到测试环境
+5. 在真机上测试页面切换和主题切换
+
+**回滚策略：**
+- 如有问题，回退 4 个 Vue 文件的 CSS 改动（纯样式修改，无数据或逻辑依赖）
+- Git revert 单个 commit 即可快速回滚
+
+**影响范围：**
+- 低风险：仅影响日历 V2 页面视觉呈现
+- 无数据迁移或 API 变更
+- 不影响用户数据或业务逻辑
+
+## Open Questions
+
+1. ~~是否需要同步修改日历 V1 页面（`CalendarView.vue`）？~~  
+   → 否，proposal 明确只修改 V2 页面
+
+2. ~~是否需要在设计系统文档中记录统一的配色规范？~~  
+   → 建议在 `.doc/` 目录添加 UI 配色指南，但不在本次变更范围内
+
+3. **待确认**：`calendarV2/modules/TransactionList.vue` 是否有独立的卡片容器？  
+   → 需要检查文件后确定是否需要修改

openspec/changes/unify-stats-calendar-color-scheme/proposal.md

@@ -0,0 +1,36 @@
+## Why
+
+统计 V2 页面和日历 V2 页面当前使用不同的配色方案，导致用户在页面切换时视觉体验不一致。统计 V2 使用灰底白卡片（亮色）/灰底黑卡片（暗色），而日历 V2 使用白底灰卡片（亮色）/黑底灰卡片（暗色）。统一配色方案可提升应用整体视觉一致性和用户体验。
+
+## What Changes
+
+- 将日历 V2 页面的背景色从 `var(--bg-primary)` 改为 `var(--bg-secondary)`（灰底）
+- 将日历 V2 页面中的统计卡片背景色从 `var(--bg-secondary)` 改为 `var(--bg-primary)`（白卡片/黑卡片）
+- 确保日历 V2 的所有子模块（Calendar、Stats、TransactionList）遵循统一的配色方案
+- 保持统计 V2 页面现有配色方案不变（作为标准参考）
+
+## Capabilities
+
+### New Capabilities
+- `consistent-color-scheme`: 日历页面和统计页面使用统一的配色方案（灰底 + 白卡片/黑卡片）
+
+### Modified Capabilities
+<!-- 无现有能力需要修改 -->
+
+## Impact
+
+**受影响的文件：**
+- `Web/src/views/calendarV2/Index.vue` - 主容器背景色
+- `Web/src/views/calendarV2/modules/Stats.vue` - 统计卡片背景色
+- `Web/src/views/calendarV2/modules/Calendar.vue` - 日历组件背景（如果有独立卡片）
+- `Web/src/views/calendarV2/modules/TransactionList.vue` - 交易列表卡片背景（如果有）
+
+**用户体验影响：**
+- ✅ 提升页面切换时的视觉连贯性
+- ✅ 增强暗色模式下的视觉对比度（黑卡片在灰底上更清晰）
+- ✅ 与统计 V2 页面保持一致的设计语言
+
+**技术影响：**
+- 低风险：仅涉及 CSS 变量替换，无逻辑变更
+- 无 API 或后端依赖
+- 无 breaking changes

openspec/changes/unify-stats-calendar-color-scheme/specs/consistent-color-scheme/spec.md

@@ -0,0 +1,109 @@
+## ADDED Requirements
+
+### Requirement: 日历 V2 页面使用统一的配色方案
+
+日历 V2 页面（`calendarV2/Index.vue`）及其所有子模块 SHALL 使用与统计 V2 页面一致的配色方案：页面背景使用 `var(--bg-secondary)`（灰底），卡片背景使用 `var(--bg-primary)`（白卡片/黑卡片）。
+
+#### Scenario: 亮色模式下日历页面背景为灰色
+
+- **WHEN** 用户在亮色主题下访问日历 V2 页面
+- **THEN** 页面主容器（`.calendar-scroll-content`）的背景色 MUST 为 `#F6F7F8`（对应 `var(--bg-secondary)`）
+
+#### Scenario: 暗色模式下日历页面背景为深灰色
+
+- **WHEN** 用户在暗色主题下访问日历 V2 页面
+- **THEN** 页面主容器（`.calendar-scroll-content`）的背景色 MUST 为 `#18181b`（对应 `var(--bg-secondary)`）
+
+#### Scenario: 亮色模式下卡片背景为白色
+
+- **WHEN** 用户在亮色主题下查看日历页面的统计卡片
+- **THEN** 卡片容器（`.stats-card`）的背景色 MUST 为 `#FFFFFF`（对应 `var(--bg-primary)`）
+
+#### Scenario: 暗色模式下卡片背景为黑色
+
+- **WHEN** 用户在暗色主题下查看日历页面的统计卡片
+- **THEN** 卡片容器（`.stats-card`）的背景色 MUST 为 `#09090B`（对应 `var(--bg-primary)`）
+
+### Requirement: 统计 V2 页面配色方案保持不变
+
+统计 V2 页面（`statisticsV2/Index.vue`）的配色方案 SHALL 保持现有设计不变，作为标准参考。
+
+#### Scenario: 统计 V2 页面背景色不受影响
+
+- **WHEN** 修改完成后用户访问统计 V2 页面
+- **THEN** 页面主容器（`.statistics-scroll-content`）的背景色 MUST 仍为 `var(--bg-secondary)`
+- **AND** 统计卡片（`.common-card`）的背景色 MUST 仍为 `var(--bg-primary)`
+
+### Requirement: 页面切换时配色保持一致
+
+用户在统计 V2 页面和日历 V2 页面之间切换时，SHALL 保持视觉一致性，不出现配色反转。
+
+#### Scenario: 从统计页面切换到日历页面配色一致
+
+- **WHEN** 用户从统计 V2 页面导航到日历 V2 页面
+- **THEN** 两个页面的背景色（灰底）和卡片背景色（白卡片/黑卡片）MUST 保持一致
+- **AND** 不出现白底↔灰底或黑底↔灰底的闪烁或突变
+
+#### Scenario: 主题切换后两个页面配色同步
+
+- **WHEN** 用户在任一页面切换亮色/暗色主题
+- **THEN** 统计 V2 和日历 V2 页面 MUST 同时应用新主题的配色方案
+- **AND** 两个页面的配色方案 MUST 保持一致（都是灰底 + 白卡片/黑卡片）
+
+### Requirement: 子模块遵循统一配色规范
+
+日历 V2 页面的所有子模块（`Calendar.vue`, `Stats.vue`, `TransactionList.vue`）SHALL 遵循统一的配色规范。
+
+#### Scenario: Stats 模块卡片使用白色/黑色背景
+
+- **WHEN** 用户查看日历页面的统计模块（`Stats.vue`）
+- **THEN** 统计卡片（`.stats-card`）的背景色 MUST 使用 `var(--bg-primary)`
+- **AND** 在亮色模式下显示为白色（`#FFFFFF`），暗色模式下显示为黑色（`#09090B`）
+
+#### Scenario: Calendar 模块不引入额外背景
+
+- **WHEN** 用户查看日历模块（`Calendar.vue`）
+- **THEN** 日历网格本身 MUST NOT 添加独立的背景色层
+- **AND** MUST 透明或继承父容器的 `var(--bg-secondary)` 背景
+
+#### Scenario: TransactionList 模块卡片使用白色/黑色背景
+
+- **WHEN** 用户查看交易列表模块（`TransactionList.vue`）中的卡片元素
+- **THEN** 如果存在卡片容器，其背景色 MUST 使用 `var(--bg-primary)`
+- **AND** 如果无卡片容器，交易项 MUST 透明或继承父容器背景
+
+### Requirement: CSS 变量使用规范
+
+所有配色修改 SHALL 通过替换 CSS 变量引用实现，MUST NOT 使用硬编码的十六进制颜色值。
+
+#### Scenario: 使用 CSS 变量而非硬编码颜色
+
+- **WHEN** 开发者检查修改后的样式代码
+- **THEN** 所有背景色声明 MUST 使用 `var(--bg-primary)` 或 `var(--bg-secondary)`
+- **AND** MUST NOT 出现硬编码的 `#FFFFFF`, `#F6F7F8`, `#09090B`, `#18181b` 等值
+
+#### Scenario: 主题系统变量定义不变
+
+- **WHEN** 修改完成后检查主题系统文件（`theme.css`）
+- **THEN** CSS 变量 `--bg-primary` 和 `--bg-secondary` 的定义 MUST 保持不变
+- **AND** 不引入新的主题变量
+
+### Requirement: 不影响其他页面配色
+
+修改 SHALL 仅影响日历 V2 页面，MUST NOT 影响其他页面（如 BudgetView, SettingView, statisticsV1）的配色。
+
+#### Scenario: 预算页面配色不受影响
+
+- **WHEN** 修改完成后用户访问预算页面（`BudgetView.vue`）
+- **THEN** 预算页面的背景色和卡片配色 MUST 与修改前完全一致
+
+#### Scenario: 设置页面配色不受影响
+
+- **WHEN** 修改完成后用户访问设置页面（`SettingView.vue`）
+- **THEN** 设置页面的背景色和卡片配色 MUST 与修改前完全一致
+
+#### Scenario: 统计 V1 页面配色不受影响
+
+- **WHEN** 修改完成后用户访问统计 V1 页面（`statisticsV1/Index.vue`）
+- **THEN** 统计 V1 页面的配色 MUST 与修改前完全一致
+- **AND** 不与统计 V2 或日历 V2 的配色方案冲突

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

@@ -0,0 +1,72 @@
+## 1. 代码审查与准备
+
+- [x] 1.1 使用 Glob 搜索 `statisticsV2/` 和 `calendarV2/` 目录下所有使用 `background-color` 和 `--bg-` 的文件
+- [x] 1.2 确认配色方案：白底/黑底 + 灰卡片（与PWA状态栏一致）
+- [x] 1.3 确认日历 V2 无需修改（已使用目标配色）
+- [x] 1.4 确认统计 V2 需要修改的文件清单
+
+## 2. 修改统计 V2 主页面容器背景
+
+- [x] 2.1 打开 `Web/src/views/statisticsV2/Index.vue` 文件
+- [x] 2.2 在 `<style>` 块中找到 `.statistics-scroll-content` 类
+- [x] 2.3 将 `background-color: var(--bg-secondary)` 修改为 `var(--bg-primary)`
+- [x] 2.4 验证页面背景使用 `--bg-primary`（白底/黑底）
+
+## 3. 修改统计 V2 卡片背景
+
+- [x] 3.1 打开 `Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue` 文件
+- [x] 3.2 将 `.common-card` 的 `background: var(--bg-primary)` 修改为 `var(--bg-secondary)`
+- [x] 3.3 修改 `ExpenseCategoryCard.vue` 中的 `.common-card` 背景
+- [x] 3.4 修改 `IncomeNoneCategoryCard.vue` 中的 `.common-card` 背景
+- [x] 3.5 修改 `DailyTrendChart.vue` 中的 `.daily-trend-card` 背景
+- [x] 3.6 修改 `IncomeBalanceCard.vue` 中的 `.income-balance-card` 背景
+
+## 4. 代码质量检查
+
+- [x] 4.1 运行 `pnpm lint` 检查代码格式和语法
+- [x] 4.2 使用 Grep 搜索修改后的文件，确认无硬编码颜色值
+- [x] 4.3 确认所有修改仅使用 CSS 变量 `var(--bg-primary)` 和 `var(--bg-secondary)`
+- [x] 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 并合并到主分支

openspec/config.yaml

@@ -0,0 +1,20 @@
+schema: spec-driven
+
+# Project context (optional)
+# This is shown to AI when creating artifacts.
+# Add your tech stack, conventions, style guides, domain knowledge, etc.
+# Example:
+#   context: |
+#     Tech stack: TypeScript, React, Node.js
+#     We use conventional commits
+#     Domain: e-commerce platform
+
+# Per-artifact rules (optional)
+# Add custom rules for specific artifacts.
+# Example:
+#   rules:
+#     proposal:
+#       - Keep proposals under 500 words
+#       - Always include a "Non-goals" section
+#     tasks:
+#       - Break tasks into chunks of max 2 hours