121 lines
3.8 KiB
Markdown
121 lines
3.8 KiB
Markdown
|
# 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 设备上显示正常
|
||
|
|
- [ ] 两种主题切换时无闪烁或延迟
|