页面样式统一

2025-12-29 16:07:43 +08:00
parent 9719c6043a
commit cbbb0c10cb
10 changed files with 171 additions and 308 deletions
--- 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;
--- 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;
--- 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;
 }

 /* 设置页面容器背景色 */
--- 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;
 }
--- 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);
--- 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>
--- 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;
--- 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>