40 lines
1.9 KiB
Markdown
40 lines
1.9 KiB
Markdown
|
## Why
|
|||
|
|
|
|||
|
|
当前日历、统计、预算三个核心页面的卡片样式（边距、间距、圆角等）存在不一致，导致用户在不同页面间切换时感知到设计不统一，影响整体使用体验。统一这些基础样式将提升应用的专业性和视觉一致性。
|
|||
|
|
|
|||
|
|
## What Changes
|
|||
|
|
|
|||
|
|
- 统一三个页面（calendarV2、statisticsV2、budgetV2）的卡片基础样式
|
|||
|
|
- 标准化卡片的 padding、margin、border-radius、box-shadow 等属性
|
|||
|
|
- 建立全局可复用的卡片样式系统（CSS 变量或共享样式类）
|
|||
|
|
- 确保卡片间距在移动端的最佳显示效果
|
|||
|
|
- 保持暗色模式下的样式一致性
|
|||
|
|
|
|||
|
|
## Capabilities
|
|||
|
|
|
|||
|
|
### New Capabilities
|
|||
|
|
- `unified-card-styles`: 定义统一的卡片基础样式规范，包括边距、间距、圆角、阴影等视觉属性的标准值
|
|||
|
|
|
|||
|
|
### Modified Capabilities
|
|||
|
|
<!-- 此次变更仅涉及样式统一，不改变现有功能需求 -->
|
|||
|
|
|
|||
|
|
## Impact
|
|||
|
|
|
|||
|
|
**受影响的文件**:
|
|||
|
|
- `Web/src/views/calendarV2/modules/Stats.vue` - 日历页面统计卡片
|
|||
|
|
- `Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue` - 统计页面收支卡片
|
|||
|
|
- `Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue` - 统计页面分类卡片
|
|||
|
|
- `Web/src/views/statisticsV2/modules/IncomeNoneCategoryCard.vue` - 统计页面收入/不计收支卡片
|
|||
|
|
- `Web/src/components/Budget/BudgetChartAnalysis.vue` - 预算页面图表分析卡片
|
|||
|
|
|
|||
|
|
**样式差异分析**:
|
|||
|
|
- **日历页面**: padding: `var(--spacing-2xl)` (Stats.vue:140), border-radius: `var(--radius-lg)`, gap: `var(--spacing-3xl)`
|
|||
|
|
- **统计页面**: padding: `var(--spacing-xl)` (common-card), border-radius: `var(--radius-lg)`, margin-bottom: `var(--spacing-xl)`
|
|||
|
|
- **预算页面**: padding: `16px` / `12px`（混用）, border-radius: `12px`, gap/margin: `12px`
|
|||
|
|
|
|||
|
|
**系统影响**:
|
|||
|
|
- 纯视觉层面修改，不涉及功能逻辑
|
|||
|
|
- 不影响 API 或数据层
|
|||
|
|
- 可能需要微调布局以适应统一后的间距
|
|||
|
|
- 需要在不同屏幕尺寸和暗色模式下测试
|