1

openspec/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 的配色方案冲突