From e11603caec874ace75e42422305e96ea42b54803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <sunchengsuncheng@gmail.com>
Date: Sat, 27 Dec 2025 21:15:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/main.js                       |  1 +
 Web/src/styles/common.css             | 68 +++++++++++++++++++++++++++
 Web/src/views/BillAnalysisView.vue    |  7 +--
 Web/src/views/ClassificationBatch.vue |  4 +-
 Web/src/views/ClassificationEdit.vue  |  4 +-
 Web/src/views/ClassificationNLP.vue   |  6 +--
 Web/src/views/ClassificationSmart.vue |  4 +-
 Web/src/views/EmailRecord.vue         | 11 ++++-
 Web/src/views/SettingView.vue         | 50 ++++++++++----------
 Web/src/views/StatisticsView.vue      | 58 +++--------------------
 Web/src/views/TransactionsRecord.vue  | 10 +++-
 11 files changed, 131 insertions(+), 92 deletions(-)

diff --git a/Web/src/main.js b/Web/src/main.js
index 6888638..845d4b7 100644
--- a/Web/src/main.js
+++ b/Web/src/main.js
@@ -1,4 +1,5 @@
 import './assets/main.css'
+import './styles/common.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
diff --git a/Web/src/styles/common.css b/Web/src/styles/common.css
index 4b346fb..2f2dee1 100644
--- a/Web/src/styles/common.css
+++ b/Web/src/styles/common.css
@@ -161,3 +161,71 @@
   -webkit-overflow-scrolling: touch;
 }
 
+/* ===== 页面容器布局（Flex布局） ===== */
+.page-container-flex {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.page-container-flex :deep(.van-nav-bar) {
+  flex-shrink: 0;
+}
+
+.page-container-flex > .van-pull-refresh {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ===== 可滚动内容区域 ===== */
+.scroll-content {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px 0 0 0;
+}
+
+/* ===== 粘性顶部元素样式 ===== */
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  margin: 0 12px;
+  margin-top: 12px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+@media (prefers-color-scheme: dark) {
+  .sticky-header {
+    background: #1f1f1f;
+  }
+}
+
+.sticky-header-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--van-text-color);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ===== 颜色工具类 ===== */
+.text-expense {
+  color: #ff6b6b;
+}
+
+.text-income {
+  color: #51cf66;
+}
+
diff --git a/Web/src/views/BillAnalysisView.vue b/Web/src/views/BillAnalysisView.vue
index a475a6e..3605f10 100644
--- a/Web/src/views/BillAnalysisView.vue
+++ b/Web/src/views/BillAnalysisView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div class="page-container-flex">
     <!-- 顶部导航栏 -->
     <van-nav-bar 
       title="智能分析" 
@@ -11,11 +11,6 @@
     <div class="analysis-content">
       <!-- 输入区域 -->
       <div class="input-section">
-        <div class="input-header">
-          <h3>输入您的问题</h3>
-          <p class="input-tip">例如：我这三个月坐车花费了多少钱？</p>
-        </div>
-        
         <van-field
           v-model="userInput"
           rows="2"
diff --git a/Web/src/views/ClassificationBatch.vue b/Web/src/views/ClassificationBatch.vue
index 97ffaf6..3576f7d 100644
--- a/Web/src/views/ClassificationBatch.vue
+++ b/Web/src/views/ClassificationBatch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div class="page-container-flex">
     <van-nav-bar 
       title="批量分类" 
       left-text="返回"
@@ -8,6 +8,7 @@
       placeholder
     />
 
+    <div class="scroll-content">
     <!-- 未分类账单统计 -->
     <div class="unclassified-stat">
       <span>未分类账单数: {{ unclassifiedCount }}</span>
@@ -164,6 +165,7 @@
     >
       <van-field v-model="newClassify" placeholder="请输入新的交易分类" />
     </van-dialog>
+    </div>
   </div>
 </template>
 
diff --git a/Web/src/views/ClassificationEdit.vue b/Web/src/views/ClassificationEdit.vue
index b9cd996..6ac1015 100644
--- a/Web/src/views/ClassificationEdit.vue
+++ b/Web/src/views/ClassificationEdit.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div class="page-container-flex">
     <van-nav-bar 
       :title="navTitle" 
       left-text="返回"
@@ -8,6 +8,7 @@
       placeholder
     />
 
+    <div class="scroll-content">
     <!-- 第一层：选择交易类型 -->
     <div v-if="currentLevel === 0" class="level-container">
       <van-cell-group inset>
@@ -90,6 +91,7 @@
       message="删除后无法恢复，确定要删除吗？"
       @confirm="handleConfirmDelete"
     />
+    </div>
   </div>
 </template>
 
diff --git a/Web/src/views/ClassificationNLP.vue b/Web/src/views/ClassificationNLP.vue
index 45000b9..ac7c5ed 100644
--- a/Web/src/views/ClassificationNLP.vue
+++ b/Web/src/views/ClassificationNLP.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="page-container classification-nlp">
+  <div class="page-container-flex classification-nlp">
     <van-nav-bar
-      title="智能分类助手"
+      title="自然语言分类"
       left-text="返回"
       left-arrow
       @click-left="onClickLeft"
     />
 
-    <div class="page-content">
+    <div class="scroll-content">
       <!-- 输入区域 -->
       <div class="input-section">
         <van-cell-group inset>
diff --git a/Web/src/views/ClassificationSmart.vue b/Web/src/views/ClassificationSmart.vue
index 2dd8e51..10f68d5 100644
--- a/Web/src/views/ClassificationSmart.vue
+++ b/Web/src/views/ClassificationSmart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container smart-classification">
+  <div class="page-container-flex smart-classification">
     <van-nav-bar
       title="智能分类"
       left-text="返回"
@@ -7,7 +7,7 @@
       @click-left="onClickLeft"
     />
     
-    <div class="page-content" style="padding-top: 5px;">
+    <div class="scroll-content" style="padding-top: 5px;">
       <!-- 统计信息 -->
       <div class="stats-info">
         <span class="stats-label">未分类账单：</span>
diff --git a/Web/src/views/EmailRecord.vue b/Web/src/views/EmailRecord.vue
index 261cc3a..dbc3f35 100644
--- a/Web/src/views/EmailRecord.vue
+++ b/Web/src/views/EmailRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div class="page-container-flex">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="邮件记录" placeholder>
       <template #right>
@@ -15,7 +15,7 @@
     </van-nav-bar>
 
     <!-- 下拉刷新区域 -->
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="refresh-wrapper">
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
       <!-- 加载提示 -->
       <van-loading v-if="loading && !(emailList && emailList.length)" vertical style="padding: 50px 0">
         加载中...
@@ -417,6 +417,13 @@ onMounted(() => {
 </script>
 
 <style scoped>
+
+:deep(.van-pull-refresh) {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .email-info {
   display: flex;
   flex-direction: column;
diff --git a/Web/src/views/SettingView.vue b/Web/src/views/SettingView.vue
index 174364f..9e2aacf 100644
--- a/Web/src/views/SettingView.vue
+++ b/Web/src/views/SettingView.vue
@@ -1,32 +1,34 @@
 <template>
-  <div class="page-container">
+  <div class="page-container-flex">
     <van-nav-bar title="设置" placeholder/>
-    <div class="detail-header" style="padding-bottom: 5px;">
-      <p>账单导入</p>
-    </div>
-    <van-cell-group inset>
-      <van-cell title="从支付宝导入" is-link @click="handleImportClick('Alipay')" />
-      <van-cell title="从微信导入" is-link @click="handleImportClick('WeChat')" />
-    </van-cell-group>
+    <div class="scroll-content">
+      <div class="detail-header" style="padding-bottom: 5px;">
+        <p>账单导入</p>
+      </div>
+      <van-cell-group inset>
+        <van-cell title="从支付宝导入" is-link @click="handleImportClick('Alipay')" />
+        <van-cell title="从微信导入" is-link @click="handleImportClick('WeChat')" />
+      </van-cell-group>
 
-    <!-- 隐藏的文件选择器 -->
-    <input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" />
+      <!-- 隐藏的文件选择器 -->
+      <input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" />
 
-    <div class="detail-header" style="padding-bottom: 5px;">
-      <p>分类处理</p>
+      <div class="detail-header" style="padding-bottom: 5px;">
+        <p>分类处理</p>
+      </div>
+      <van-cell-group inset>
+        <van-cell title="编辑分类" is-link @click="handleEditClassification" />
+        <van-cell title="批量分类" is-link @click="handleBatchClassification" />
+        <van-cell title="智能分类" is-link @click="handleSmartClassification" />
+        <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" />
+      </van-cell-group>
+      <div class="detail-header" style="padding-bottom: 5px;">
+        <p>账户</p>
+      </div>
+      <van-cell-group inset>
+        <van-cell title="退出登录" is-link @click="handleLogout" />
+      </van-cell-group>
     </div>
-    <van-cell-group inset>
-      <van-cell title="分类管理" is-link @click="handleEditClassification" />
-      <van-cell title="批量分类" is-link @click="handleBatchClassification" />
-      <van-cell title="智能分类" is-link @click="handleSmartClassification" />
-      <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" />
-    </van-cell-group>
-    <div class="detail-header" style="padding-bottom: 5px;">
-      <p>账户</p>
-    </div>
-    <van-cell-group inset>
-      <van-cell title="退出登录" is-link @click="handleLogout" />
-    </van-cell-group>
   </div>
 </template>
 
diff --git a/Web/src/views/StatisticsView.vue b/Web/src/views/StatisticsView.vue
index 6bce03c..64b4041 100644
--- a/Web/src/views/StatisticsView.vue
+++ b/Web/src/views/StatisticsView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div class="page-container-flex">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="账单统计" placeholder>
       <template #right>
@@ -8,14 +8,14 @@
     </van-nav-bar>
 
     <!-- 月份选择器 固定区域 -->
-    <div class="month-selector">
+    <div class="sticky-header">
       <van-button 
         icon="arrow-left" 
         plain 
         size="small" 
         @click="changeMonth(-1)"
       />
-      <div class="month-text" @click="showMonthPicker = true">
+      <div class="sticky-header-text" @click="showMonthPicker = true">
         {{ currentYear }}年{{ currentMonth }}月
         <van-icon name="arrow-down" />
       </div>
@@ -665,58 +665,14 @@ onActivated(() => {
 </script>
 
 <style scoped>
-.page-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.page-container :deep(.van-nav-bar) {
-  flex-shrink: 0;
-}
-
-.van-pull-refresh {
-  flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
 .statistics-content {
   padding: 16px 0 0 0;
 }
 
-/* 月份选择器 - 固定 */
-.month-selector {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  margin: 0 12px;
-  margin-top: 12px;
-  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;
-  color: var(--van-text-color);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  user-select: none;
+:deep(.van-pull-refresh) {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* 月度概览卡片 */
diff --git a/Web/src/views/TransactionsRecord.vue b/Web/src/views/TransactionsRecord.vue
index d9226d0..1b26f8a 100644
--- a/Web/src/views/TransactionsRecord.vue
+++ b/Web/src/views/TransactionsRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div class="page-container-flex">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="交易记录" placeholder>
       <template #right>
@@ -10,7 +10,7 @@
     </van-nav-bar>
 
     <!-- 下拉刷新区域 -->
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="refresh-wrapper">
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
       <!-- 加载提示 -->
       <van-loading v-if="loading && !(transactionList && transactionList.length)" vertical style="padding: 50px 0">
         加载中...
@@ -529,6 +529,12 @@ onMounted(async () => {
 
 <style scoped>
 
+:deep(.van-pull-refresh) {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .floating-search {
   position: fixed;
   bottom: 90px;