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.4 KiB
4.4 KiB
1. 验证 CSS 变量基础
- 1.1 确认
Web/src/assets/theme.css中所有需要使用的 CSS 变量已定义（--spacing-xl,--spacing-lg,--spacing-md,--spacing-3xl,--radius-lg,--bg-secondary,--shadow-sm） - 1.2 在浏览器开发者工具中验证 CSS 变量在明亮模式和暗色模式下的计算值
- 1.3 为关键变量添加 fallback 值以防止未定义变量导致的样式回退
2. 统一日历页面卡片样式
- 2.1 在
Web/src/views/calendarV2/modules/Stats.vue中检查.stats-card样式（line 136-143） - 2.2 确认 padding 使用
var(--spacing-xl)替代var(--spacing-2xl)（如果不一致） - 2.3 确认 border-radius 使用
var(--radius-lg) - 2.4 确认 background-color 使用
var(--bg-secondary) - 2.5 添加 box-shadow:
var(--shadow-sm)如果缺失 - 2.6 检查
.daily-stats容器的 padding 和 gap 是否使用统一变量
3. 统一统计页面卡片样式
- 3.1 在
Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue中检查.common-card样式（line 358-364） - 3.2 确认所有样式属性使用 CSS 变量（padding, border-radius, margin-bottom, box-shadow）
- 3.3 在
Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue中检查.common-card样式（line 369-377） - 3.4 确认样式与 MonthlyExpenseCard 保持一致
- 3.5 在
Web/src/views/statisticsV2/modules/IncomeNoneCategoryCard.vue中检查.common-card样式（line 157-164） - 3.6 确认
.side-by-side-cards .common-card的 padding 调整为var(--spacing-lg)或var(--spacing-xl)以保持一致 - 3.7 检查所有卡片的 margin-bottom 或父容器的 gap 属性使用
var(--spacing-xl)
4. 统一预算页面卡片样式
- 4.1 在
Web/src/components/Budget/BudgetChartAnalysis.vue中查找所有硬编码的 padding 值（如16px,12px） - 4.2 将标准卡片的
padding: 16px替换为padding: var(--spacing-xl)（line 892） - 4.3 将 gauge 卡片的
padding: 12px替换为padding: var(--spacing-lg)（line 900） - 4.4 将硬编码的
border-radius: 12px替换为border-radius: var(--radius-lg)（line 891） - 4.5 检查
.chart-analysis-container的 padding 值，确保使用var(--spacing-xl)（line 879） - 4.6 将
.gauges-row的gap: 12px和margin-bottom: 12px替换为var(--spacing-xl)（line 885-886） - 4.7 检查其他内联 style 属性（如 line 135:
style="margin-top: 12px"）并替换为 CSS 变量
5. 确保 .common-card 类的一致性
- 5.1 确认所有统计页面的卡片根元素都应用了
.common-card类 - 5.2 确认预算页面的
.chart-card使用与.common-card相同的 CSS 变量组合 - 5.3 确认日历页面的
.stats-card使用与.common-card相同的 CSS 变量组合 - 5.4 考虑是否需要在各文件中显式定义
.common-card样式或依赖全局样式
6. 视觉回归测试
- 6.1 在明亮模式下测试日历页面，验证卡片样式无异常
- 6.2 在明亮模式下测试统计页面，验证所有卡片样式一致
- 6.3 在明亮模式下测试预算页面，验证所有图表卡片样式一致
- 6.4 在暗色模式下重复上述测试（6.1-6.3），验证背景色和阴影自动适配
- 6.5 在 iPhone SE 小屏幕上测试，确认无内容溢出或截断
- 6.6 在 iPhone 14 Pro 标准屏幕上测试，确认布局合理
- 6.7 在 iPad mini 平板上测试，确认响应式布局正常
7. 代码审查与文档更新
- 7.1 使用
grep -r "padding: [0-9]" Web/src/views/{calendarV2,statisticsV2,budgetV2}查找遗漏的硬编码值 - 7.2 使用
grep -r "border-radius: [0-9]" Web/src/views/{calendarV2,statisticsV2,budgetV2}查找遗漏的硬编码值 - 7.3 使用
grep -r "margin.*: [0-9]" Web/src/views/{calendarV2,statisticsV2,budgetV2}查找遗漏的硬编码值 - 7.4 运行
pnpm lint确保代码风格符合项目规范 - 7.5 在
.doc/目录下创建card-style-standards.md文档记录统一的卡片样式规范（可选） - 7.6 提交代码前进行 self-review，确保没有遗漏的硬编码值
8. 提交与归档
- 8.1 创建 git commit，提交消息：
style: unify card styles across calendar, statistics, and budget pages - 8.2 验证所有测试通过，布局无异常
- 8.3 运行
/opsx-archive将本次 change 归档到主规范