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

# 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**: 跨设备测试验证