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