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）统一管理主题色彩，确保所有组件引用相同的变量。

/* 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 主题映射

// 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

/* 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 组件调整

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