样式统一

Web/src/views/StatisticsView.vue

@@ -277,40 +277,31 @@
     </van-popup>
 
     <!-- 分类账单列表弹出层 -->
-    <van-popup
-      v-model:show="billListVisible"
-      position="bottom"
-      :style="{ height: '85%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="billListVisible"
+      :title="selectedCategoryTitle"
+      :subtitle="categoryBillsTotal ? `共 ${categoryBillsTotal} 笔交易` : ''"
+      height="85%"
     >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3 class="category-title">{{ selectedCategoryTitle }}</h3>
-          <div class="header-stats">
-            <p v-if="categoryBillsTotal">共 {{ categoryBillsTotal }} 笔交易</p>
-            <SmartClassifyButton
-              ref="smartClassifyButtonRef"
-              v-if="isUnclassified"
-              :transactions="categoryBills"
-              :onBeforeClassify="beforeSmartClassify"
-              @save="onSmartClassifySave"
-            />
-          </div>
-        </div>
-
-        <div class="popup-scroll-content">
-          <TransactionList
-            :transactions="categoryBills"
-            :loading="billListLoading"
-            :finished="billListFinished"
-            :show-delete="false"
-            @load="loadCategoryBills"
-            @click="viewBillDetail"
-          />
-        </div>
-      </div>
-    </van-popup>
+      <template #header-actions>
+        <SmartClassifyButton
+          ref="smartClassifyButtonRef"
+          v-if="isUnclassified"
+          :transactions="categoryBills"
+          :onBeforeClassify="beforeSmartClassify"
+          @save="onSmartClassifySave"
+        />
+      </template>
+      
+      <TransactionList
+        :transactions="categoryBills"
+        :loading="billListLoading"
+        :finished="billListFinished"
+        :show-delete="false"
+        @load="loadCategoryBills"
+        @click="viewBillDetail"
+      />
+    </PopupContainer>
 
     <!-- 交易详情编辑组件 -->
     <TransactionDetail
@@ -330,6 +321,7 @@ import { getTransactionList, getTransactionDetail } from '@/api/transactionRecor
 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 router = useRouter()
 
@@ -1147,44 +1139,4 @@ onActivated(() => {
   background: transparent !important;
 }
 
-/* 弹出层样式 */
-.popup-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.popup-header-fixed {
-  padding: 16px;
-  position: relative;
-}
-
-.category-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 {
-  margin: 0;
-  font-size: 13px;
-  color: var(--van-text-color-2);
-  flex: 1;
-}
-
-.popup-scroll-content {
-  flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
 </style>