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
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 或数据层
|
||
- 可能需要微调布局以适应统一后的间距
|
||
- 需要在不同屏幕尺寸和暗色模式下测试
|