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