From c0264faca54771bb1a2c5df8633b34533ac843c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <cheng2.sun@ly.com>
Date: Fri, 26 Dec 2025 17:29:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/App.vue                       |   1 +
 Web/src/assets/main.css               |   5 ++
 Web/src/styles/common.css             |  82 ++++++++++++++-----
 Web/src/views/BillAnalysisView.vue    |  19 ++---
 Web/src/views/CalendarView.vue        |   2 +-
 Web/src/views/ClassificationBatch.vue |   2 +-
 Web/src/views/ClassificationEdit.vue  |   4 +-
 Web/src/views/ClassificationNLP.vue   |  14 +---
 Web/src/views/ClassificationSmart.vue |   9 +--
 Web/src/views/EmailRecord.vue         |   2 +-
 Web/src/views/LoginView.vue           |   2 +-
 Web/src/views/SettingView.vue         |  13 +--
 Web/src/views/StatisticsView.vue      | 109 ++++++++++++++------------
 Web/src/views/TransactionsRecord.vue  |   2 +-
 14 files changed, 151 insertions(+), 115 deletions(-)

diff --git a/Web/src/App.vue b/Web/src/App.vue
index 26914e2..160988d 100644
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -26,6 +26,7 @@
 <script setup>
 import { RouterView, useRoute } from 'vue-router'
 import { ref, onMounted, onUnmounted, computed } from 'vue'
+import '@/styles/common.css'
 
 const updateVh = () => {
   // 获取真实的视口高度（PWA 模式下准确）
diff --git a/Web/src/assets/main.css b/Web/src/assets/main.css
index 1547db8..90483be 100644
--- a/Web/src/assets/main.css
+++ b/Web/src/assets/main.css
@@ -59,4 +59,9 @@ html, body, #app {
   margin: 0;
   padding: 0;
   height: 100%;
+}
+
+/* 设置页面容器背景色 */
+:deep(.van-nav-bar) {
+  background-color: transparent;
 }
\ No newline at end of file
diff --git a/Web/src/styles/common.css b/Web/src/styles/common.css
index cdd7f72..f28e8a4 100644
--- a/Web/src/styles/common.css
+++ b/Web/src/styles/common.css
@@ -1,45 +1,86 @@
-/* 通用页面容器样式 */
+/* 通用页面容器样式 - 统一风格（灰色背景） */
 .page-container {
-  min-height: var(--vh, 100vh);
-  background-color: #f5f5f5;
-  padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
+  min-height: 100vh;
+  background: #f7f8fa;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 @media (prefers-color-scheme: dark) {
   .page-container {
-    background-color: #1a1a1a;
+    background: #141414;
   }
 }
 
+/* 页面内容区域 */
+.page-content {
+  padding: 16px 0 0 0;
+}
+
 /* 下拉刷新包装器 */
 .refresh-wrapper {
   min-height: calc(var(--vh, 100vh) - 46px - 50px - env(safe-area-inset-bottom, 0px));
 }
 
+/* 统一卡片样式 */
+.common-card {
+  background: #ffffff;
+  margin: 0 12px 16px;
+  padding: 16px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebedf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .common-card {
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* 卡片头部 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--van-text-color);
+  margin: 0;
+}
+
 /* 增加卡片组的对比度 */
 :deep(.van-cell-group--inset) {
   margin: 10px 16px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebedf0;
+  border-radius: 16px;
 }
 
 @media (prefers-color-scheme: dark) {
   :deep(.van-cell-group--inset) {
-    background-color: #2c2c2c;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
   }
 }
 
 /* 单元格样式 */
 :deep(.van-cell) {
-  background-color: #ffffff;
-  border-bottom: 1px solid #f0f0f0;
+  background: #ffffff;
+  border-bottom: 1px solid #ebedf0;
 }
 
 @media (prefers-color-scheme: dark) {
   :deep(.van-cell) {
-    background-color: #2c2c2c;
-    border-bottom: 1px solid #3a3a3a;
+    background: #1f1f1f;
+    border-bottom: 1px solid #2c2c2c;
   }
 }
 
@@ -52,25 +93,28 @@
   padding: 16px;
   height: 100%;
   overflow-y: auto;
-  background-color: #f5f5f5;
+  background: #f7f8fa;
 }
 
 @media (prefers-color-scheme: dark) {
   .detail-popup {
-    background-color: #1a1a1a;
+    background: #141414;
   }
 }
 
 /* 弹出层内的卡片组样式 */
 .detail-popup :deep(.van-cell-group--inset) {
-  background-color: #ffffff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebedf0;
+  border-radius: 16px;
 }
 
 @media (prefers-color-scheme: dark) {
   .detail-popup :deep(.van-cell-group--inset) {
-    background-color: #2c2c2c;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
   }
 }
 
diff --git a/Web/src/views/BillAnalysisView.vue b/Web/src/views/BillAnalysisView.vue
index a92d6d3..017b6d0 100644
--- a/Web/src/views/BillAnalysisView.vue
+++ b/Web/src/views/BillAnalysisView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="analysis-container">
+  <div class="page-container">
     <!-- 顶部导航栏 -->
     <van-nav-bar 
       title="智能分析" 
@@ -197,26 +197,27 @@ const startAnalysis = async () => {
 </script>
 
 <style scoped>
-.analysis-container {
-  min-height: 100vh;
-  background: var(--van-background-2);
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-}
-
 .analysis-content {
   padding: 16px;
 }
 
 /* 输入区域 */
 .input-section {
-  background: var(--van-background);
+  background: #ffffff;
   padding: 20px;
   border-radius: 16px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid var(--van-border-color);
+  border: 1px solid #ebedf0;
   margin-bottom: 16px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .input-section {
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+  }
+}
+
 .input-header h3 {
   font-size: 18px;
   font-weight: 600;
diff --git a/Web/src/views/CalendarView.vue b/Web/src/views/CalendarView.vue
index 88c97fe..cbe1054 100644
--- a/Web/src/views/CalendarView.vue
+++ b/Web/src/views/CalendarView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="calendar-container">
+  <div class="page-container calendar-container">
     <van-calendar
       title="日历"
       :poppable="false"
diff --git a/Web/src/views/ClassificationBatch.vue b/Web/src/views/ClassificationBatch.vue
index 1267385..c81e83f 100644
--- a/Web/src/views/ClassificationBatch.vue
+++ b/Web/src/views/ClassificationBatch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));">
+  <div class="page-container">
     <van-nav-bar 
       title="批量分类" 
       left-text="返回"
diff --git a/Web/src/views/ClassificationEdit.vue b/Web/src/views/ClassificationEdit.vue
index acced73..c5cae67 100644
--- a/Web/src/views/ClassificationEdit.vue
+++ b/Web/src/views/ClassificationEdit.vue
@@ -1,7 +1,5 @@
 <template>
-  <div 
-  style="padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));"
-  >
+  <div class="page-container">
     <van-nav-bar 
       :title="navTitle" 
       left-text="返回"
diff --git a/Web/src/views/ClassificationNLP.vue b/Web/src/views/ClassificationNLP.vue
index eee3ef3..86a2ac4 100644
--- a/Web/src/views/ClassificationNLP.vue
+++ b/Web/src/views/ClassificationNLP.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="classification-nlp">
+  <div class="page-container classification-nlp">
     <van-nav-bar
       title="智能分类助手"
       left-text="返回"
@@ -7,7 +7,7 @@
       @click-left="onClickLeft"
     />
 
-    <div class="container">
+    <div class="page-content">
       <!-- 输入区域 -->
       <div class="input-section">
         <van-cell-group inset>
@@ -299,16 +299,6 @@ const handleSubmit = async () => {
 </script>
 
 <style scoped>
-.classification-nlp {
-  min-height: 100vh;
-  background-color: var(--van-background, #f7f8fa);
-  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
-}
-
-.container {
-  padding: 0;
-}
-
 .input-section {
   padding: 12px 0;
 }
diff --git a/Web/src/views/ClassificationSmart.vue b/Web/src/views/ClassificationSmart.vue
index 687f849..f6b4d66 100644
--- a/Web/src/views/ClassificationSmart.vue
+++ b/Web/src/views/ClassificationSmart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="smart-classification">
+  <div class="page-container smart-classification">
     <van-nav-bar
       title="智能分类"
       left-text="返回"
@@ -7,7 +7,7 @@
       @click-left="onClickLeft"
     />
     
-    <div class="container" style="padding-top: 5px;">
+    <div class="page-content" style="padding-top: 5px;">
       <!-- 统计信息 -->
       <div class="stats-info">
         <span class="stats-label">未分类账单：</span>
@@ -339,11 +339,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.smart-classification {
-  min-height: var(--vh, 100vh);
-  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
-}
-
 /* 统计信息 */
 .stats-info {
   padding: 12px 16px;
diff --git a/Web/src/views/EmailRecord.vue b/Web/src/views/EmailRecord.vue
index 36a6b53..0a1d29f 100644
--- a/Web/src/views/EmailRecord.vue
+++ b/Web/src/views/EmailRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="email-record-container" style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
+  <div class="page-container">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="邮件记录" placeholder>
       <template #right>
diff --git a/Web/src/views/LoginView.vue b/Web/src/views/LoginView.vue
index cbb6b7d..d4b3b1e 100644
--- a/Web/src/views/LoginView.vue
+++ b/Web/src/views/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login-container">
+  <div class="page-container login-container">
     <div class="login-box">
       <h1 class="login-title">账单</h1>
       <div class="login-form">
diff --git a/Web/src/views/SettingView.vue b/Web/src/views/SettingView.vue
index d057e84..5dad35f 100644
--- a/Web/src/views/SettingView.vue
+++ b/Web/src/views/SettingView.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
+  <div class="page-container">
     <van-nav-bar title="设置" placeholder/>
-    <div class="detail-header">
+    <div class="detail-header" style="padding-bottom: 5px;">
       <p>账单导入</p>
     </div>
     <van-cell-group inset>
@@ -12,7 +12,7 @@
     <!-- 隐藏的文件选择器 -->
     <input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" />
 
-    <div class="detail-header">
+    <div class="detail-header" style="padding-bottom: 5px;">
       <p>分类处理</p>
     </div>
     <van-cell-group inset>
@@ -21,7 +21,7 @@
       <van-cell title="智能分类" is-link @click="handleSmartClassification" />
       <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" />
     </van-cell-group>
-    <div class="detail-header">
+    <div class="detail-header" style="padding-bottom: 5px;">
       <p>账户</p>
     </div>
     <van-cell-group inset>
@@ -140,11 +140,6 @@ const handleLogout = async () => {
 </script>
 
 <style scoped>
-/* 设置页面容器背景色 */
-:deep(.van-nav-bar) {
-  background-color: transparent;
-}
-
 /* 页面背景色 */
 :deep(body) {
   background-color: #f5f5f5;
diff --git a/Web/src/views/StatisticsView.vue b/Web/src/views/StatisticsView.vue
index a29bf77..7bc4864 100644
--- a/Web/src/views/StatisticsView.vue
+++ b/Web/src/views/StatisticsView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="statistics-container">
+  <div class="page-container">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="账单统计" placeholder>
       <template #right>
@@ -61,9 +61,9 @@
         </div>
 
         <!-- 分类统计 -->
-        <div class="stat-card">
-          <div class="stat-header">
-            <h3 class="stat-title">支出分类统计</h3>
+        <div class="common-card">
+          <div class="card-header">
+            <h3 class="card-title">支出分类统计</h3>
             <van-tag type="primary" size="medium">{{ expenseCategories.length }}类</van-tag>
           </div>
           
@@ -119,9 +119,9 @@
         </div>
 
         <!-- 收入分类统计 -->
-        <div class="stat-card" v-if="incomeCategories.length > 0">
-          <div class="stat-header">
-            <h3 class="stat-title">收入分类统计</h3>
+        <div class="common-card" v-if="incomeCategories.length > 0">
+          <div class="card-header">
+            <h3 class="card-title">收入分类统计</h3>
             <van-tag type="success" size="medium">{{ incomeCategories.length }}类</van-tag>
           </div>
           
@@ -144,9 +144,9 @@
         </div>
 
         <!-- 趋势统计 -->
-        <div class="stat-card">
-          <div class="stat-header">
-            <h3 class="stat-title">近6个月趋势</h3>
+        <div class="common-card">
+          <div class="card-header">
+            <h3 class="card-title">近6个月趋势</h3>
           </div>
           
           <div class="trend-chart">
@@ -192,9 +192,9 @@
         </div>
 
         <!-- 其他统计 -->
-        <div class="stat-card">
-          <div class="stat-header">
-            <h3 class="stat-title">其他统计</h3>
+        <div class="common-card">
+          <div class="card-header">
+            <h3 class="card-title">其他统计</h3>
           </div>
           
           <div class="other-stats">
@@ -503,12 +503,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.statistics-container {
-  min-height: 100vh;
-  background: var(--van-background-2);
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-}
-
 .statistics-content {
   padding: 16px 0 0 0;
 }
@@ -520,11 +514,17 @@ onMounted(() => {
   justify-content: space-between;
   padding: 12px 16px;
   margin: 0 12px 16px;
-  background: var(--van-background);
+  background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
+@media (prefers-color-scheme: dark) {
+  .month-selector {
+    background: #1f1f1f;
+  }
+}
+
 .month-text {
   font-size: 16px;
   font-weight: 600;
@@ -541,12 +541,19 @@ onMounted(() => {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  background: var(--van-background);
+  background: #ffffff;
   margin: 0 12px 16px;
   padding: 24px 12px;
   border-radius: 16px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid var(--van-border-color);
+  border: 1px solid #ebedf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .overview-card {
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+  }
 }
 
 .overview-item {
@@ -585,30 +592,6 @@ onMounted(() => {
   color: #51cf66;
 }
 
-/* 统计卡片 */
-.stat-card {
-  background: var(--van-background);
-  margin: 0 12px 16px;
-  padding: 16px;
-  border-radius: 16px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid var(--van-border-color);
-}
-
-.stat-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.stat-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--van-text-color);
-  margin: 0;
-}
-
 /* 环形图 */
 .chart-container {
   padding: 20px;
@@ -653,7 +636,7 @@ onMounted(() => {
 
 /* 分类列表 */
 .category-list {
-  padding: 12px 16px;
+  padding: 0;
 }
 
 .category-item {
@@ -661,7 +644,13 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 12px 0;
-  border-bottom: 1px solid var(--van-border-color);
+  border-bottom: 1px solid #ebedf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .category-item {
+    border-bottom: 1px solid #2c2c2c;
+  }
 }
 
 .category-item:last-child {
@@ -701,11 +690,17 @@ onMounted(() => {
 .category-percent {
   font-size: 12px;
   color: var(--van-text-color-3);
-  background: var(--van-background-2);
+  background: #f7f8fa;
   padding: 2px 8px;
   border-radius: 10px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .category-percent {
+    background: #141414;
+  }
+}
+
 .income-color {
   background-color: #51cf66;
 }
@@ -787,7 +782,13 @@ onMounted(() => {
   justify-content: center;
   gap: 24px;
   padding-top: 12px;
-  border-top: 1px solid var(--van-border-color);
+  border-top: 1px solid #ebedf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .trend-legend {
+    border-top: 1px solid #2c2c2c;
+  }
 }
 
 .legend-item {
@@ -813,12 +814,18 @@ onMounted(() => {
 }
 
 .stat-item {
-  background: var(--van-background-2);
+  background: #f7f8fa;
   padding: 16px;
   border-radius: 12px;
   text-align: center;
 }
 
+@media (prefers-color-scheme: dark) {
+  .stat-item {
+    background: #141414;
+  }
+}
+
 .stat-label {
   font-size: 13px;
   color: var(--van-text-color-2);
diff --git a/Web/src/views/TransactionsRecord.vue b/Web/src/views/TransactionsRecord.vue
index 7fa9130..e12c10f 100644
--- a/Web/src/views/TransactionsRecord.vue
+++ b/Web/src/views/TransactionsRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-record-container" style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
+  <div class="page-container">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="交易记录" placeholder>
       <template #right>