104 lines
4.6 KiB
Markdown
104 lines
4.6 KiB
Markdown
|
## 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** 卡片布局不能出现溢出、内容截断或错位问题
|