c49f66757e
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Waiting to run
Docker Build & Deploy / Deploy to Production (push) Has been cancelled
Docker Build & Deploy / Cleanup Dangling Images (push) Has been cancelled
Docker Build & Deploy / WeChat Notification (push) Has been cancelled
5.0 KiB
5.0 KiB
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 的配色方案冲突