EmailBill/openspec/changes/fix-theme-colors-and-navbar-spacing/tasks.md

Tasks: 修复主题色差与导航栏间距

Phase 1: 创建主题系统基础文件

1.1 创建 CSS 变量定义文件

• 新建 Web/src/styles/theme.css
  • 定义亮色主题变量（背景、文本、语义色）
  • 定义暗色主题变量（背景、文本、语义色）
  • 确保两组变量名称一致，仅值不同

1.2 在 main.ts 中引入主题文件

• 导入 theme.css 到 Web/src/main.ts
• 确保 CSS 变量在应用启动时生效

---

Phase 2: 配置 Vant UI 主题映射

2.1 更新 Vant 主题配置

• 修改 Web/src/main.ts 中的 Vant ConfigProvider 配置
  • 将 --van-nav-bar-background 映射到 --bg-primary
  • 将 --van-card-background 映射到 --bg-secondary
  • 将 --van-text-color 映射到 --text-primary
  • 将 --van-border-color 映射到 --bg-tertiary
  • 确保亮/暗两套配置使用相同的变量名

2.2 验证组件颜色一致性

• 检查 NavBar 组件背景色是否与页面背景一致
• 检查 Card 组件背景色是否正确应用
• 检查 Cell 组件背景色是否正确应用
• 在亮色模式下截图对比
• 在暗色模式下截图对比

---

Phase 3: 修复底部导航栏间距

3.1 创建布局样式文件

• 新建或修改 Web/src/styles/layout.css
  • 定义 .tabbar-container 固定定位样式
  • 设置导航栏高度为 56px
  • 添加 env(safe-area-inset-bottom) 安全区域内边距
  • 移除多余的 margin/padding

3.2 调整主布局组件

• 修改 Web/src/App.vue (或布局组件)
  • 为页面内容区域添加 .page-content 类
  • 设置 padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px))
  • 确保内容不被导航栏遮挡

3.3 优化 TabBar 组件样式

• 使用 :deep(.van-tabbar) 覆盖 Vant 默认样式
  • 设置背景色为 var(--bg-primary)
  • 移除不必要的 padding/margin
  • 确保图标和文字垂直居中

---

Phase 4: 清理硬编码颜色值

4.1 扫描并替换硬编码颜色

• 搜索项目中所有 #FFFFFF、#000000 等硬编码颜色
• 替换为对应的 CSS 变量
  • 页面背景 → --bg-primary
  • 卡片背景 → --bg-secondary
  • 主要文本 → --text-primary
  • 次要文本 → --text-secondary

4.2 检查自定义组件

• 审查所有 Vue 组件的 <style> 块
• 将硬编码颜色替换为 CSS 变量
• 确保 scoped 样式正确使用 :deep() 覆盖 Vant 样式

---

Phase 5: 跨设备测试验证

5.1 iOS 设备测试

• iPhone Safari (亮色模式)
• iPhone Safari (暗色模式)
• 微信内置浏览器 (亮色模式)
• 微信内置浏览器 (暗色模式)
• 验证安全区域适配是否正常

5.2 Android 设备测试

• Chrome (亮色模式)
• Chrome (暗色模式)
• 微信内置浏览器 (亮色模式)
• 微信内置浏览器 (暗色模式)

5.3 视觉回归测试

• 对比修复前后的截图
• 确认色差问题已解决
• 确认导航栏底部无过多空白
• 检查所有页面布局是否正常

---

Phase 6: 文档更新

6.1 更新项目文档

• 在 AGENTS.md 中添加主题系统说明
• 记录 CSS 变量命名规范
• 添加 Vant UI 主题定制指南

6.2 代码审查

• 自我审查：检查代码风格和一致性
• 运行 pnpm lint 确保无 ESLint 错误
• 运行 pnpm build 确保构建成功

---

Acceptance Criteria

• 亮色主题下所有组件颜色一致，无色差
• 暗色主题下所有组件颜色一致，无色差
• 底部导航栏紧贴屏幕底部（考虑安全区域）
• 页面内容可正常滚动，不被导航栏遮挡
• 在 iOS 和 Android 设备上显示正常
• 两种主题切换时无闪烁或延迟