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
4.6 KiB
4.6 KiB
ADDED Requirements
Requirement: Card containers SHALL use unified spacing values
所有卡片容器必须使用统一的 CSS 变量来定义内边距（padding），确保视觉一致性。
Scenario: Standard card padding
- WHEN 渲染任何卡片组件
- THEN 卡片的 padding 必须使用
var(--spacing-xl)（16px）
Scenario: Gauge card compact padding
- WHEN 渲染仪表盘类型的卡片（gauge card）
- THEN 卡片的 padding 可以使用
var(--spacing-lg)（12px）以适应紧凑布局
Requirement: Card containers SHALL use unified border radius
所有卡片容器必须使用统一的 CSS 变量来定义圆角（border-radius），保持设计语言一致。
Scenario: Standard card border radius
- WHEN 渲染任何卡片组件
- THEN 卡片的 border-radius 必须使用
var(--radius-lg)（12px）
Requirement: Card containers SHALL use unified background color
所有卡片容器必须使用统一的背景色变量，确保在明暗模式下自动适配。
Scenario: Card background in light mode
- WHEN 应用处于明亮模式
- THEN 卡片的 background 必须使用
var(--bg-secondary)
Scenario: Card background in dark mode
- WHEN 应用处于暗色模式
- THEN 卡片的 background 必须使用
var(--bg-secondary)并自动适配为暗色系背景
Requirement: Card containers SHALL use unified shadow
所有卡片容器必须使用统一的阴影变量，提供微妙的层次感。
Scenario: Standard card shadow
- WHEN 渲染任何卡片组件
- THEN 卡片的 box-shadow 必须使用
var(--shadow-sm)
Scenario: Card shadow in dark mode
- WHEN 应用处于暗色模式
- THEN 卡片的阴影必须根据暗色模式自动调整透明度和颜色
Requirement: Card spacing SHALL be consistent across pages
页面级别的卡片布局必须使用统一的外边距（margin）和间距（gap），确保三个页面的视觉韵律一致。
Scenario: Card bottom margin
- WHEN 在页面中垂直排列多个卡片
- THEN 卡片之间的间距必须使用
var(--spacing-xl)（16px）或通过父容器的 gap 属性设置
Scenario: Page container padding
- WHEN 渲染包含卡片的页面容器
- THEN 容器的左右 padding 必须使用
var(--spacing-xl)（16px） - AND 容器的顶部 padding 可以使用
var(--spacing-md)（12px）以紧跟 header - AND 容器的底部 padding 应使用
var(--spacing-3xl)（24px）以预留安全区域
Requirement: Hard-coded style values MUST be replaced
现有代码中的硬编码样式值必须被对应的 CSS 变量替换，以便集中管理和未来维护。
Scenario: Replace hard-coded padding
- WHEN 发现卡片使用硬编码的
padding: 16px或padding: 12px - THEN 必须替换为
padding: var(--spacing-xl)或padding: var(--spacing-lg)
Scenario: Replace hard-coded border-radius
- WHEN 发现卡片使用硬编码的
border-radius: 12px - THEN 必须替换为
border-radius: var(--radius-lg)
Scenario: Replace hard-coded margins and gaps
- WHEN 发现卡片或容器使用硬编码的
margin-bottom: 12px或gap: 12px - THEN 必须替换为
margin-bottom: var(--spacing-xl)或gap: var(--spacing-xl)
Requirement: Common card class SHALL be consistently applied
所有符合标准卡片样式的元素必须应用 .common-card 类或内联使用相同的 CSS 变量组合。
Scenario: Apply common-card class
- WHEN 创建或修改卡片组件
- THEN 卡片的根元素应添加
class="common-card"或在 scoped style 中定义.common-card样式
Scenario: Inline CSS variable usage
- WHEN 不使用
.common-card类时 - THEN 必须确保使用与
.common-card相同的 CSS 变量组合（background, border-radius, padding, box-shadow）
Requirement: Visual regression testing MUST verify style consistency
样式统一后必须通过视觉测试验证三个页面的卡片表现一致。
Scenario: Test in light mode
- WHEN 应用处于明亮模式
- THEN 日历、统计、预算页面的卡片样式必须在视觉上保持一致（相同的边距、圆角、阴影）
Scenario: Test in dark mode
- WHEN 应用处于暗色模式
- THEN 日历、统计、预算页面的卡片样式必须在视觉上保持一致（相同的边距、圆角、阴影，且背景色和阴影自动适配）
Scenario: Test on different screen sizes
- WHEN 在不同移动设备屏幕尺寸上查看（如 iPhone SE, iPhone 14 Pro, iPad mini）
- THEN 卡片布局不能出现溢出、内容截断或错位问题