From e491856e28d31d36952e79a2d6e58f3a0b2041fa Mon Sep 17 00:00:00 2001
From: SunCheng <cheng2.sun@ly.com>
Date: Wed, 11 Feb 2026 14:29:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=89=B2=E5=BD=A9=E7=B3=BB=E7=BB=9F=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新建 theme.css 定义 CSS 变量，统一亮色/暗色主题色彩
- 新建 layout.css 优化底部导航栏布局
- 在 App.vue 中添加 Vant UI 主题变量映射
- 修复底部导航栏与屏幕底部间距过大问题
- 添加安全区域（safe-area-inset）处理
---
 Web/src/App.vue           | 25 +++++++++++++++++++++++++
 Web/src/main.js           |  2 ++
 Web/src/styles/layout.css | 29 +++++++++++++++++++++++++++++
 Web/src/styles/theme.css  | 37 +++++++++++++++++++++++++++++++++++++
 4 files changed, 93 insertions(+)
 create mode 100644 Web/src/styles/layout.css
 create mode 100644 Web/src/styles/theme.css

diff --git a/Web/src/App.vue b/Web/src/App.vue
index a777822..472ff34 100644
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <van-config-provider
     :theme="theme"
+    :theme-vars="themeVars"
     class="app-provider"
   >
     <div class="app-root">
@@ -153,6 +154,23 @@ const showTabbar = computed(() => {
 const active = ref('')
 const theme = ref('light')
 
+// Vant UI 主题变量映射
+const themeVars = computed(() => {
+  const vars = {
+    navBarBackground: 'var(--bg-primary)',
+    navBarTextColor: 'var(--text-primary)',
+    cardBackground: 'var(--bg-secondary)',
+    cellBackground: 'var(--bg-secondary)',
+    background: 'var(--bg-primary)',
+    background2: 'var(--bg-secondary)',
+    textColor: 'var(--text-primary)',
+    textColor2: 'var(--text-secondary)',
+    borderColor: 'var(--bg-tertiary)',
+    tabbarBackground: 'var(--bg-primary)'
+  }
+  return vars
+})
+
 // 检测系统深色模式
 const updateTheme = () => {
   const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -257,12 +275,19 @@ const handleAddTransactionSuccess = () => {
   height: auto !important;
   min-height: 50px !important;
   box-sizing: content-box !important;
+  background: var(--bg-primary) !important;
+  border-top: 1px solid var(--bg-tertiary);
 }
 
 /* 确保 TabBar 项目居中 */
 :deep(.van-tabbar-item) {
   padding: 0 !important;
   height: 50px !important;
+  color: var(--text-secondary);
+}
+
+:deep(.van-tabbar-item--active) {
+  color: var(--color-primary);
 }
 
 .debug-overlay {
diff --git a/Web/src/main.js b/Web/src/main.js
index 5bcb612..d48b211 100644
--- a/Web/src/main.js
+++ b/Web/src/main.js
@@ -1,5 +1,7 @@
 import './assets/main.css'
 import './assets/theme.css'
+import './styles/theme.css'
+import './styles/layout.css'
 import './styles/common.css'
 import './styles/rich-content.css'
 
diff --git a/Web/src/styles/layout.css b/Web/src/styles/layout.css
new file mode 100644
index 0000000..5e8b721
--- /dev/null
+++ b/Web/src/styles/layout.css
@@ -0,0 +1,29 @@
+/* EmailBill 布局样式 - 底部导航栏优化 */
+
+/* 底部导航栏容器 */
+.van-tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--bg-tertiary);
+  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));
+}
diff --git a/Web/src/styles/theme.css b/Web/src/styles/theme.css
new file mode 100644
index 0000000..4599302
--- /dev/null
+++ b/Web/src/styles/theme.css
@@ -0,0 +1,37 @@
+/* EmailBill 主题颜色系统 */
+
+: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;
+}