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

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

### 1.1 创建 CSS 变量定义文件
- [x] 新建 `Web/src/styles/theme.css`
  - [x] 定义亮色主题变量（背景、文本、语义色）
  - [x] 定义暗色主题变量（背景、文本、语义色）
  - [x] 确保两组变量名称一致，仅值不同

### 1.2 在 main.ts 中引入主题文件
- [x] 导入 `theme.css` 到 `Web/src/main.ts`
- [x] 确保 CSS 变量在应用启动时生效

---

## Phase 2: 配置 Vant UI 主题映射

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

### 2.2 验证组件颜色一致性
- [ ] 检查 NavBar 组件背景色是否与页面背景一致
- [ ] 检查 Card 组件背景色是否正确应用
- [ ] 检查 Cell 组件背景色是否正确应用
- [ ] 在亮色模式下截图对比
- [ ] 在暗色模式下截图对比

---

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

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

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

### 3.3 优化 TabBar 组件样式
- [x] 使用 `:deep(.van-tabbar)` 覆盖 Vant 默认样式
  - [x] 设置背景色为 `var(--bg-primary)`
  - [x] 移除不必要的 padding/margin
  - [x] 确保图标和文字垂直居中

---

## Phase 4: 清理硬编码颜色值

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

### 4.2 检查自定义组件
- [x] 审查所有 Vue 组件的 `<style>` 块
- [x] 将硬编码颜色替换为 CSS 变量
- [x] 确保 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 代码审查
- [x] 自我审查：检查代码风格和一致性
- [x] 运行 `pnpm lint` 确保无 ESLint 错误
- [x] 运行 `pnpm build` 确保构建成功

---

## Acceptance Criteria

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