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

---
 Web/src/components/TransactionDetail.vue |  28 +---
 Web/src/styles/common.css                |  56 ++++++++
 Web/src/views/CalendarView.vue           |  29 +----
 Web/src/views/ClassificationEdit.vue     |  26 +---
 Web/src/views/ClassificationNLP.vue      |  36 +----
 Web/src/views/EmailRecord.vue            |  27 ++--
 Web/src/views/MessageView.vue            |  45 +++----
 Web/src/views/PeriodicRecord.vue         | 159 ++++++++++-------------
 Web/src/views/StatisticsView.vue         |  67 +---------
 Web/src/views/TransactionsRecord.vue     |   6 +-
 10 files changed, 171 insertions(+), 308 deletions(-)

diff --git a/Web/src/components/TransactionDetail.vue b/Web/src/components/TransactionDetail.vue
index a3c2aba..492b844 100644
--- a/Web/src/components/TransactionDetail.vue
+++ b/Web/src/components/TransactionDetail.vue
@@ -7,12 +7,12 @@
     closeable
     @update:show="handleVisibleChange"
   >
-    <div class="transaction-detail" v-if="transaction">
-      <div class="detail-header" style="margin-top: 10px;margin-left: 10px;">
+    <div class="popup-container" v-if="transaction">
+      <div class="popup-header-fixed">
         <h3>交易详情</h3>
       </div>
       
-      <div class="scroll-area">
+      <div class="popup-scroll-content">
       <van-form @submit="onSubmit">
         <van-cell-group inset>
           <van-cell title="卡号" :value="transaction.card" />
@@ -335,28 +335,6 @@ const formatDate = (dateString) => {
 </script>
 
 <style scoped>
-.transaction-detail {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.detail-header {
-  flex-shrink: 0;
-  border-bottom: 1px solid #ebedf0;
-}
-
-.detail-header h3 {
-  margin: 10px 0;
-}
-
-.scroll-area {
-  flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  padding-bottom: 20px;
-}
-
 .classify-buttons {
   display: flex;
   flex-wrap: wrap;
diff --git a/Web/src/styles/common.css b/Web/src/styles/common.css
index a78cf41..66f00f3 100644
--- a/Web/src/styles/common.css
+++ b/Web/src/styles/common.css
@@ -247,3 +247,59 @@
   color: #51cf66;
 }
 
+.bottom-button {
+  position: fixed;
+  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+  left: 16px;
+  right: 16px;
+  z-index: 100;
+}
+
+/* ===== 统一弹窗样式 ===== */
+/* 弹窗容器 - 使用 flex 布局，确保标题固定，内容可滚动 */
+.popup-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 固定的弹窗标题 - 居中显示，不随内容滚动 */
+.popup-header-fixed {
+  flex-shrink: 0; /* 防止被压缩 */
+  padding: 16px;
+  border-bottom: 1px solid var(--van-border-color);
+  background: var(--van-background-2);
+  text-align: center; /* 标题居中 */
+}
+
+.popup-header-fixed h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--van-text-color);
+}
+
+.popup-header-fixed p {
+  margin: 4px 0 0 0;
+  font-size: 12px;
+  color: var(--van-text-color-2);
+}
+
+/* 可滚动的弹窗内容区域 */
+.popup-scroll-content {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .popup-header-fixed {
+    background: #1f1f1f;
+  }
+  
+  .popup-scroll-content {
+    background: #141414;
+  }
+}
\ No newline at end of file
diff --git a/Web/src/views/CalendarView.vue b/Web/src/views/CalendarView.vue
index 3986020..e7ca570 100644
--- a/Web/src/views/CalendarView.vue
+++ b/Web/src/views/CalendarView.vue
@@ -19,8 +19,8 @@
       round
       closeable
     >
-      <div class="date-transactions">
-        <div class="popup-header">
+      <div class="popup-container">
+        <div class="popup-header-fixed">
           <h3>{{ selectedDateText }}</h3>
           <p v-if="dateTransactions.length">
             共 {{ dateTransactions.length }} 笔交易，
@@ -28,7 +28,7 @@
           </p>
         </div>
 
-      <div class="bills-scroll-container">
+      <div class="popup-scroll-content">
         <TransactionList
           :transactions="dateTransactions"
           :loading="listLoading"
@@ -259,29 +259,6 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
   padding-bottom: 0 !important;
 }
 
-.date-transactions {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.popup-header {
-  padding: 16px;
-  border-bottom: 1px solid #ebedf0;
-}
-
-.popup-header h3 {
-  margin: 0 0 8px 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.popup-header p {
-  margin: 0;
-  font-size: 14px;
-  color: #969799;
-}
-
 /* 设置页面容器背景色 */
 :deep(.van-calendar__header-title) {
   background: transparent !important;
diff --git a/Web/src/views/ClassificationEdit.vue b/Web/src/views/ClassificationEdit.vue
index cd89d11..d57edd8 100644
--- a/Web/src/views/ClassificationEdit.vue
+++ b/Web/src/views/ClassificationEdit.vue
@@ -54,12 +54,13 @@
       </van-cell-group>
     </div>
 
-    <div class="action-bar">
+    <div class="bottom-button">
       <!-- 新增分类按钮 -->
       <van-button 
         type="primary" 
         size="large" 
-        block 
+        round 
+        icon="plus"
         @click="handleAddCategory"
       >
         新增分类
@@ -326,27 +327,6 @@ onMounted(() => {
   }
 }
 
-/* 底部操作栏 */
-.action-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  gap: 12px;
-  padding: 12px;
-  background-color: var(--van-background-2, #fff);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
-  z-index: 100;
-}
-
-@media (prefers-color-scheme: dark) {
-  .action-bar {
-    background-color: var(--van-background-2, #2c2c2c);
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
-  }
-}
-
 /* 设置页面容器背景色 */
 :deep(.van-nav-bar) {
   background: transparent !important;
diff --git a/Web/src/views/ClassificationNLP.vue b/Web/src/views/ClassificationNLP.vue
index 06db38e..bfbd818 100644
--- a/Web/src/views/ClassificationNLP.vue
+++ b/Web/src/views/ClassificationNLP.vue
@@ -64,13 +64,14 @@
       position="bottom" 
       :style="{ height: '80%' }"
       round
+      closeable
     >
-      <div class="records-popup">
-        <div class="popup-header">
+      <div class="popup-container">
+        <div class="popup-header-fixed">
           <h3>交易记录列表</h3>
-          <van-icon name="cross" @click="showRecordsList = false" />
         </div>
         
+        <div class="popup-scroll-content" style="background: var(--van-background, #f7f8fa);">
         <!-- 批量操作按钮 -->
         <div class="batch-actions">
           <van-button 
@@ -113,6 +114,7 @@
             :show-delete="false"
           />
         </div>
+        </div>
       </div>
     </van-popup>
   </div>
@@ -335,34 +337,6 @@ const handleSubmit = async () => {
 
 .records-list {
   padding-bottom: 20px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.records-popup {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--van-background, #f7f8fa);
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  background-color: var(--van-background-2, #fff);
-}
-
-.popup-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.popup-header .van-icon {
-  font-size: 20px;
-  cursor: pointer;
 }
 
 /* 设置页面容器背景色 */
diff --git a/Web/src/views/EmailRecord.vue b/Web/src/views/EmailRecord.vue
index e320796..f493a5b 100644
--- a/Web/src/views/EmailRecord.vue
+++ b/Web/src/views/EmailRecord.vue
@@ -64,10 +64,11 @@
       round
       closeable
     >
-      <div class="email-detail" v-if="currentEmail">
-        <div class="detail-header" style="margin-top: 10px; margin-left: 10px;">
+      <div class="popup-container" v-if="currentEmail">
+        <div class="popup-header-fixed">
           <h3>{{ currentEmail.Subject || currentEmail.subject || '(无主题)' }}</h3>
         </div>
+        <div class="popup-scroll-content">
         <van-cell-group inset>
           <van-cell title="发件人" :value="currentEmail.From || currentEmail.from || '未知'" />
           <van-cell title="接收时间" :value="formatDate(currentEmail.ReceivedDate || currentEmail.receivedDate)" />
@@ -112,8 +113,7 @@
             重新分析
           </van-button>
         </div>
-
-
+        </div>
       </div>
     </van-popup>
 
@@ -125,11 +125,11 @@
       round
       closeable
     >
-      <div class="transaction-list-popup">
-        <div class="list-header">
-          <h3 style="margin: 16px;">关联账单列表</h3>
+      <div class="popup-container">
+        <div class="popup-header-fixed">
+          <h3>关联账单列表</h3>
         </div>
-        <div class="bills-scroll-container">
+        <div class="popup-scroll-content">
           <TransactionList
             :transactions="transactionList"
             :loading="false"
@@ -425,17 +425,6 @@ defineExpose({
   padding-right: 10px;
 }
 
-.transaction-list-popup {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.list-header{
-  padding: 16px;
-  border-bottom: 1px solid #ebedf0;
-}
-
 .email-content {
   margin-top: 16px;
 }
diff --git a/Web/src/views/MessageView.vue b/Web/src/views/MessageView.vue
index 52c8cdc..fb2ada3 100644
--- a/Web/src/views/MessageView.vue
+++ b/Web/src/views/MessageView.vue
@@ -20,6 +20,9 @@
                 <div class="message-title" :class="{ 'unread': !item.isRead }">
                   {{ item.title }}
                 </div>
+                <div class="message-content">
+                  {{ item.content }}
+                </div>
                 <div class="message-info">
                   {{ item.createTime }}
                 </div>
@@ -46,12 +49,12 @@
       round
       closeable
     >
-      <div class="message-detail">
-        <div class="detail-header">
+      <div class="popup-container">
+        <div class="popup-header-fixed">
           <h3>{{ currentMessage.title }}</h3>
-          <span class="detail-time">{{ currentMessage.createTime }}</span>
+          <p class="detail-time">{{ currentMessage.createTime }}</p>
         </div>
-        <div class="detail-content">
+        <div class="popup-scroll-content detail-content">
           {{ currentMessage.content }}
         </div>
       </div>
@@ -162,6 +165,7 @@ const handleDelete = (item) => {
           showToast(res.message || '删除失败');
         }
       } catch (error) {
+        console.error('删除消息失败', error);
         showToast('删除失败');
       }
     }
@@ -187,6 +191,7 @@ const handleMarkAllRead = () => {
           showToast(res.message || '操作失败');
         }
       } catch (error) {
+        console.error('标记所有已读失败', error);
         showToast('操作失败');
       }
     }
@@ -238,6 +243,15 @@ onMounted(() => {
   white-space: nowrap;
 }
 
+.message-content{
+  font-size: 14px;
+  color: var(--van-text-color-2);
+  margin-bottom: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .message-title.unread {
   font-weight: bold;
 }
@@ -251,34 +265,13 @@ onMounted(() => {
   height: 100%;
 }
 
-.message-detail {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--van-background);
-}
-
-.detail-header {
-  margin-bottom: 20px;
-  border-bottom: 1px solid var(--van-border-color);
-  padding-bottom: 10px;
-}
-
-.detail-header h3 {
-  margin: 0 0 10px 0;
-  font-size: 18px;
-  color: var(--van-text-color);
-}
-
 .detail-time {
   color: var(--van-text-color-2);
   font-size: 14px;
 }
 
 .detail-content {
-  flex: 1;
-  overflow-y: auto;
+  padding: 20px;
   font-size: 16px;
   line-height: 1.6;
   color: var(--van-text-color);
diff --git a/Web/src/views/PeriodicRecord.vue b/Web/src/views/PeriodicRecord.vue
index f2ee956..9c91589 100644
--- a/Web/src/views/PeriodicRecord.vue
+++ b/Web/src/views/PeriodicRecord.vue
@@ -72,7 +72,7 @@
     </van-pull-refresh>
 
     <!-- 底部新增按钮 -->
-    <div class="bottom-add-button">
+    <div class="bottom-button">
       <van-button 
         type="primary" 
         size="large" 
@@ -92,12 +92,74 @@
       round
       closeable
     >
-      <div class="periodic-form">
-        <div class="form-header">
+      <div class="popup-container">
+        <div class="popup-header-fixed">
           <h3>{{ isEdit ? '编辑周期账单' : '新增周期账单' }}</h3>
         </div>
         
+        <div class="popup-scroll-content">
         <van-form @submit="onSubmit">
+          <van-cell-group inset title="周期设置">
+            <van-field
+              v-model="form.periodicTypeText"
+              is-link
+              readonly
+              name="periodicType"
+              label="周期"
+              placeholder="请选择周期类型"
+              @click="showPeriodicTypePicker = true"
+              :rules="[{ required: true, message: '请选择周期类型' }]"
+            />
+
+            <!-- 每周配置 -->
+            <van-field
+              v-if="form.periodicType === 1"
+              v-model="form.weekdaysText"
+              is-link
+              readonly
+              name="weekdays"
+              label="星期"
+              placeholder="请选择星期几"
+              @click="showWeekdaysPicker = true"
+              :rules="[{ required: true, message: '请选择星期几' }]"
+            />
+
+            <!-- 每月配置 -->
+            <van-field
+              v-if="form.periodicType === 2"
+              v-model="form.monthDaysText"
+              is-link
+              readonly
+              name="monthDays"
+              label="日期"
+              placeholder="请选择每月的日期"
+              @click="showMonthDaysPicker = true"
+              :rules="[{ required: true, message: '请选择日期' }]"
+            />
+
+            <!-- 每季度配置 -->
+            <van-field
+              v-if="form.periodicType === 3"
+              v-model="form.quarterDay"
+              name="quarterDay"
+              label="季度第几天"
+              placeholder="请输入季度开始后第几天"
+              type="number"
+              :rules="[{ required: true, message: '请输入季度开始后第几天' }]"
+            />
+
+            <!-- 每年配置 -->
+            <van-field
+              v-if="form.periodicType === 4"
+              v-model="form.yearDay"
+              name="yearDay"
+              label="年第几天"
+              placeholder="请输入年开始后第几天"
+              type="number"
+              :rules="[{ required: true, message: '请输入年开始后第几天' }]"
+            />
+          </van-cell-group>
+
           <van-cell-group inset title="基本信息">
             <van-field
               v-model="form.reason"
@@ -167,73 +229,13 @@
             </div>
           </van-cell-group>
 
-          <van-cell-group inset title="周期设置">
-            <van-field
-              v-model="form.periodicTypeText"
-              is-link
-              readonly
-              name="periodicType"
-              label="周期"
-              placeholder="请选择周期类型"
-              @click="showPeriodicTypePicker = true"
-              :rules="[{ required: true, message: '请选择周期类型' }]"
-            />
-
-            <!-- 每周配置 -->
-            <van-field
-              v-if="form.periodicType === 1"
-              v-model="form.weekdaysText"
-              is-link
-              readonly
-              name="weekdays"
-              label="星期"
-              placeholder="请选择星期几"
-              @click="showWeekdaysPicker = true"
-              :rules="[{ required: true, message: '请选择星期几' }]"
-            />
-
-            <!-- 每月配置 -->
-            <van-field
-              v-if="form.periodicType === 2"
-              v-model="form.monthDaysText"
-              is-link
-              readonly
-              name="monthDays"
-              label="日期"
-              placeholder="请选择每月的日期"
-              @click="showMonthDaysPicker = true"
-              :rules="[{ required: true, message: '请选择日期' }]"
-            />
-
-            <!-- 每季度配置 -->
-            <van-field
-              v-if="form.periodicType === 3"
-              v-model="form.quarterDay"
-              name="quarterDay"
-              label="季度第几天"
-              placeholder="请输入季度开始后第几天"
-              type="number"
-              :rules="[{ required: true, message: '请输入季度开始后第几天' }]"
-            />
-
-            <!-- 每年配置 -->
-            <van-field
-              v-if="form.periodicType === 4"
-              v-model="form.yearDay"
-              name="yearDay"
-              label="年第几天"
-              placeholder="请输入年开始后第几天"
-              type="number"
-              :rules="[{ required: true, message: '请输入年开始后第几天' }]"
-            />
-          </van-cell-group>
-
           <div style="margin: 16px;">
             <van-button round block type="primary" native-type="submit" :loading="submitting">
               {{ isEdit ? '更新' : '确认添加' }}
             </van-button>
           </div>
         </van-form>
+        </div>
       </div>
     </van-popup>
 
@@ -775,7 +777,7 @@ onMounted(() => {
 }
 
 .periodic-list {
-  /* padding: 16px 0; */
+  padding: 16px 0;
 }
 
 .periodic-item {
@@ -818,31 +820,4 @@ onMounted(() => {
   border-radius: 16px;
 }
 
-.bottom-add-button {
-  position: fixed;
-  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
-  left: 16px;
-  right: 16px;
-  z-index: 100;
-}
-
-.periodic-form {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.form-header {
-  padding: 16px;
-  text-align: center;
-  border-bottom: 1px solid var(--van-border-color);
-}
-
-.form-header h3 {
-  margin: 0;
-  color: var(--van-text-color);
-}
-
-:deep(.van-cell-group) {
-  margin-top: 16px;
-}
 </style>
diff --git a/Web/src/views/StatisticsView.vue b/Web/src/views/StatisticsView.vue
index 416989c..ea106f2 100644
--- a/Web/src/views/StatisticsView.vue
+++ b/Web/src/views/StatisticsView.vue
@@ -284,13 +284,13 @@
       round
       closeable
     >
-      <div class="category-bills">
-        <div class="popup-header">
+      <div class="popup-container">
+        <div class="popup-header-fixed">
           <h3>{{ selectedCategoryTitle }}</h3>
           <p v-if="categoryBillsTotal">共 {{ categoryBillsTotal }} 笔交易</p>
         </div>
 
-        <div class="bills-scroll-container">
+        <div class="popup-scroll-content" style="background: #f7f8fa;">
           <TransactionList
             :transactions="categoryBills"
             :loading="billListLoading"
@@ -1103,67 +1103,6 @@ onActivated(() => {
   color: var(--van-text-color);
 }
 
-/* 分类账单列表弹出层 */
-.category-bills {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: #f7f8fa;
-  overflow: hidden;
-}
-
-@media (prefers-color-scheme: dark) {
-  .category-bills {
-    background: #141414;
-  }
-}
-
-.category-bills .popup-header {
-  padding: 20px 16px;
-  background: #fff;
-  border-bottom: 1px solid #ebedf0;
-  flex-shrink: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .category-bills .popup-header {
-    background: #1f1f1f;
-    border-bottom: 1px solid #2c2c2c;
-  }
-}
-
-.category-bills .popup-header h3 {
-  margin: 0 0 8px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--van-text-color);
-}
-
-.category-bills .popup-header p {
-  margin: 0;
-  font-size: 14px;
-  color: var(--van-text-color-2);
-}
-
-/* 修复深色模式下van组件的背景色 */
-.category-bills :deep(.van-list) {
-  background: transparent;
-}
-
-.category-bills :deep(.van-cell-group) {
-  background: transparent;
-}
-
-@media (prefers-color-scheme: dark) {
-  .category-bills :deep(.van-cell) {
-    background-color: #1f1f1f;
-  }
-  
-  .category-bills :deep(.van-swipe-cell) {
-    background-color: transparent;
-  }
-}
-
 /* 设置页面容器背景色 */
 :deep(.van-nav-bar) {
   background: transparent !important;
diff --git a/Web/src/views/TransactionsRecord.vue b/Web/src/views/TransactionsRecord.vue
index 4e0bf24..7c2e45e 100644
--- a/Web/src/views/TransactionsRecord.vue
+++ b/Web/src/views/TransactionsRecord.vue
@@ -36,11 +36,12 @@
       round
       closeable
     >
-      <div class="transaction-detail">
-        <div class="detail-header" style="padding-top: 10px; padding-left: 10px;">
+      <div class="popup-container">
+        <div class="popup-header-fixed">
           <h3>手动录账单</h3>
         </div>
         
+        <div class="popup-scroll-content">
         <van-form @submit="onAddSubmit">
           <van-cell-group inset title="基本信息">
             <van-field
@@ -102,6 +103,7 @@
             </van-button>
           </div>
         </van-form>
+        </div>
       </div>
     </van-popup>