feat: 添加调试信息面板，优化主题色彩和底部导航栏布局

openspec/changes/fix-theme-colors-and-bottom-navigation/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-11

openspec/changes/fix-theme-colors-and-navbar-spacing/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-11

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

@@ -0,0 +1,219 @@
+# Design: 修复主题色差与导航栏间距
+
+## Overview
+
+本设计文档详细说明如何修复 EmailBill 应用的两大 UI 问题：
+1. 亮色/暗色主题下的颜色不一致（色差）
+2. 底部导航栏与屏幕底部间距过大
+
+## Technical Decisions
+
+### 1. 主题色彩统一方案
+
+#### Current Issues
+- 导航栏、卡片背景色与页面背景色存在色差
+- 亮色和暗色模式下颜色变量定义不一致
+- Vant UI 组件主题定制配置不完整
+
+#### Solution Approach
+使用 CSS 变量（CSS Custom Properties）统一管理主题色彩，确保所有组件引用相同的变量。
+
+```css
+/* Web/src/styles/theme.css */
+:root {
+  /* 亮色主题 - 背景色系统 */
+  --bg-primary: #FFFFFF;
+  --bg-secondary: #F6F7F8;
+  --bg-tertiary: #F5F5F5;
+  
+  /* 亮色主题 - 文本色系统 */
+  --text-primary: #1A1A1A;
+  --text-secondary: #6B7280;
+  --text-tertiary: #9CA3AF;
+  
+  /* 语义色 */
+  --color-primary: #3B82F6;
+  --color-danger: #FF6B6B;
+  --color-success: #07C160;
+  --color-warning: #FAAD14;
+}
+
+[data-theme="dark"] {
+  /* 暗色主题 - 背景色系统 */
+  --bg-primary: #09090B;
+  --bg-secondary: #18181B;
+  --bg-tertiary: #27272A;
+  
+  /* 暗色主题 - 文本色系统 */
+  --text-primary: #F4F4F5;
+  --text-secondary: #A1A1AA;
+  --text-tertiary: #71717A;
+  
+  /* 语义色在暗色模式下保持不变或微调 */
+  --color-primary: #3B82F6;
+  --color-danger: #FF6B6B;
+  --color-success: #07C160;
+  --color-warning: #FAAD14;
+}
+```
+
+#### Vant UI 主题映射
+
+```javascript
+// Web/src/main.ts 或主题配置文件
+import { ConfigProvider } from 'vant'
+
+const themeVars = {
+  // 亮色主题
+  light: {
+    '--van-nav-bar-background': 'var(--bg-primary)',
+    '--van-nav-bar-text-color': 'var(--text-primary)',
+    '--van-card-background': 'var(--bg-secondary)',
+    '--van-cell-background': 'var(--bg-secondary)',
+    '--van-background': 'var(--bg-primary)',
+    '--van-background-2': 'var(--bg-secondary)',
+    '--van-text-color': 'var(--text-primary)',
+    '--van-text-color-2': 'var(--text-secondary)',
+    '--van-border-color': 'var(--bg-tertiary)',
+  },
+  // 暗色主题
+  dark: {
+    '--van-nav-bar-background': 'var(--bg-primary)',
+    '--van-nav-bar-text-color': 'var(--text-primary)',
+    '--van-card-background': 'var(--bg-secondary)',
+    '--van-cell-background': 'var(--bg-secondary)',
+    '--van-background': 'var(--bg-primary)',
+    '--van-background-2': 'var(--bg-secondary)',
+    '--van-text-color': 'var(--text-primary)',
+    '--van-text-color-2': 'var(--text-secondary)',
+    '--van-border-color': 'var(--bg-tertiary)',
+  }
+}
+```
+
+### 2. 底部导航栏间距优化
+
+#### Current Issues
+- 底部导航栏距离屏幕底部过远
+- 未正确处理 iPhone 安全区域（Safe Area）
+- padding/margin 设置不合理
+
+#### Solution Approach
+
+```css
+/* Web/src/styles/layout.css */
+
+/* 底部导航栏容器 */
+.tabbar-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--bg-tertiary);
+}
+
+/* 导航栏主体 - 减少不必要的 padding */
+.van-tabbar {
+  height: 56px; /* 标准高度 */
+  padding-bottom: env(safe-area-inset-bottom, 0px); /* 仅保留安全区域内边距 */
+  background: var(--bg-primary) !important;
+}
+
+/* 导航项样式 */
+.van-tabbar-item {
+  color: var(--text-secondary);
+}
+
+.van-tabbar-item--active {
+  color: var(--color-primary);
+}
+
+/* 页面内容区域需要为底部导航栏留出空间 */
+.page-content {
+  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+}
+```
+
+#### Vue 组件调整
+
+```vue
+<!-- Layout.vue 或 App.vue -->
+<template>
+  <div class="app-container">
+    <router-view class="page-content" />
+    <van-tabbar v-model="activeTab" class="tabbar-container">
+      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
+      <van-tabbar-item icon="chart-o">统计</van-tabbar-item>
+      <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  min-height: 100vh;
+  background: var(--bg-primary);
+}
+
+.page-content {
+  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+}
+
+.tabbar-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+:deep(.van-tabbar) {
+  height: 56px;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background: var(--bg-primary) !important;
+}
+</style>
+```
+
+## Implementation Files
+
+### Modified Files
+
+1. **Web/src/styles/theme.css** (新建)
+   - 定义 CSS 变量系统
+   - 包含亮色/暗色两套变量
+
+2. **Web/src/styles/layout.css** (新建或修改)
+   - 底部导航栏布局样式
+   - 安全区域处理
+
+3. **Web/src/main.ts**
+   - 引入主题样式文件
+   - 配置 Vant UI 主题变量
+
+4. **Web/src/App.vue** (或布局组件)
+   - 调整底部导航栏结构
+   - 应用新的布局样式
+
+5. **Web/src/components/Navigation/** (如存在)
+   - 更新导航组件样式
+
+### Key Considerations
+
+1. **兼容性**: CSS 变量在现代浏览器中支持良好，项目使用 Vite 构建，无需额外 polyfill
+
+2. **性能**: CSS 变量在运行时计算，对性能影响极小
+
+3. **可维护性**: 集中管理颜色变量，后续主题调整只需修改一处
+
+4. **测试**: 需要在 iOS Safari、Android Chrome、微信内置浏览器中测试显示效果
+
+## Migration Path
+
+1. **Phase 1**: 创建 theme.css 和 layout.css，定义新的变量系统
+2. **Phase 2**: 逐步替换硬编码颜色值为 CSS 变量
+3. **Phase 3**: 更新 Vant UI 主题配置
+4. **Phase 4**: 调整底部导航栏布局
+5. **Phase 5**: 跨设备测试验证

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

@@ -0,0 +1,26 @@
+## Why
+
+根据用户提供的实机截图，发现 EmailBill 应用在两种主题色（亮色/暗色）下存在明显的色差问题：导航栏、卡片背景等组件颜色与页面背景色不一致，造成视觉割裂感。同时，底部导航栏距离屏幕底部过远，留下大量空白区域，影响移动端使用体验。这些问题需要统一修复以提升应用的整体视觉一致性和用户体验。
+
+## What Changes
+
+- **统一主题色彩系统**: 修复亮色和暗色模式下导航栏、卡片、按钮等组件的颜色变量，确保同一主题内颜色一致性
+- **优化底部导航栏布局**: 调整底部导航栏的间距，减少不必要的空白区域，使其更贴近屏幕底部
+- **更新 CSS 样式文件**: 修改 `Web/src/styles/` 下的主题变量定义
+- **调整组件样式**: 更新 Vant UI 组件的主题定制配置
+
+## Capabilities
+
+### New Capabilities
+<!-- 此变更主要是修复现有问题，不引入新能力 -->
+
+### Modified Capabilities
+- `theme-system`: 统一亮色/暗色主题的色彩变量，消除色差问题
+- `navbar-layout`: 优化底部导航栏的间距和定位
+
+## Impact
+
+- **前端代码**: `Web/src/styles/` 目录下的主题配置文件
+- **组件库**: Vant UI 的主题定制配置 (`Web/src/main.ts` 或主题配置文件)
+- **布局文件**: 涉及底部导航栏的页面布局样式
+- **测试**: 需要在亮色和暗色两种模式下进行视觉回归测试

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

@@ -0,0 +1,120 @@
+# 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 设备上显示正常
+- [ ] 两种主题切换时无闪烁或延迟