样式统一

Web/src/views/CalendarView.vue

@@ -12,44 +12,27 @@
     />
 
     <!-- 日期交易列表弹出层 -->
-    <van-popup
-      v-model:show="listVisible"
-      position="bottom"
-      :style="{ height: '85%' }"
-      round
+    <PopupContainer
+      v-model="listVisible"
+      :title="selectedDateText"
+      :subtitle="getBalance(dateTransactions)"
+      height="85%"
     >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <van-icon 
-            name="cross" 
-            class="close-icon" 
-            @click="listVisible = false"
-          />
-          <h3 class="date-title">{{ selectedDateText }}</h3>
-          <div class="header-stats">
-            <p v-if="dateTransactions.length">
-              共 {{ dateTransactions.length }} 笔交易，
-              <span v-html="getBalance(dateTransactions)" />
-            </p>
-            <SmartClassifyButton 
-              ref="smartClassifyButtonRef"
-              :transactions="dateTransactions"
-              @save="onSmartClassifySave"
-            />
-          </div>
-        </div>
-
-      <div class="popup-scroll-content">
-        <TransactionList
+      <template #header-actions>
+        <SmartClassifyButton 
+          ref="smartClassifyButtonRef"
           :transactions="dateTransactions"
-          :loading="listLoading"
-          :finished="true"
-          :show-delete="false"
-          @click="viewDetail"
+          @save="onSmartClassifySave"
         />
-      </div>
-      </div>
-    </van-popup>
+      </template>
+      <TransactionList
+        :transactions="dateTransactions"
+        :loading="listLoading"
+        :finished="true"
+        :show-delete="false"
+        @click="viewDetail"
+      />
+    </PopupContainer>
 
     <!-- 交易详情组件 -->
     <TransactionDetail
@@ -68,6 +51,7 @@ import { getTransactionDetail, getTransactionsByDate } from "@/api/transactionRe
 import TransactionList from "@/components/TransactionList.vue";
 import TransactionDetail from "@/components/TransactionDetail.vue";
 import SmartClassifyButton from "@/components/SmartClassifyButton.vue";
+import PopupContainer from "@/components/PopupContainer.vue";
 
 const dailyStatistics = ref({});
 const listVisible = ref(false);
@@ -161,9 +145,9 @@ const getBalance = (transactions) => {
   });
 
   if(balance >= 0) {
-    return `结余<span style="color: var(--van-tag-success-color);">收入 ${balance.toFixed(1)} 元</span>`;
+    return `结余收入 ${balance.toFixed(1)} 元`;
   } else {
-    return `结余<span style="color: var(--van-tag-danger-color);">支出 ${(-balance).toFixed(1)} 元</span>`;
+    return `结余支出 ${(-balance).toFixed(1)} 元`;
   }
 };
 
@@ -300,45 +284,4 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
   background: transparent !important;
 }
 
-/* 弹窗头部样式 */
-.popup-header-fixed {
-  padding: 16px;
-  position: relative;
-}
-
-.close-icon {
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  font-size: 18px;
-  color: #969799;
-  cursor: pointer;
-  z-index: 10;
-}
-
-.date-title {
-  text-align: center;
-  margin: 0 0 12px;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.header-stats {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-
-.header-stats p {
-  flex: 1;
-  margin: 0;
-  font-size: 14px;
-  color: #646566;
-}
-
-.popup-scroll-content {
-  padding-top: 8px;
-}
-
 </style>