fix

Web/src/components/CategoryBillPopup.vue

@@ -1,111 +1,120 @@
 <template>
-  <PopupContainer
+  <PopupContainerV2
     v-model:show="visible"
     :title="title"
-    :subtitle="total > 0 ? `共 ${total} 笔交易` : ''"
-    :closeable="true"
+    :height="'80%'"
   >
     <!-- 交易列表 -->
-    <div class="transactions">
-      <!-- 加载状态 -->
-      <van-loading
-        v-if="loading && transactions.length === 0"
-        class="txn-loading"
-        size="24px"
-        vertical
-      >
-        加载中...
-      </van-loading>
-
-      <!-- 空状态 -->
+    <div style="padding: 0">
+      <!-- Subtitle 作为内容区域顶部 -->
       <div
-        v-else-if="transactions.length === 0"
-        class="txn-empty"
+        v-if="total > 0"
+        style="padding: 12px 16px; text-align: center; color: #999; font-size: 14px; border-bottom: 1px solid var(--van-border-color)"
       >
-        <div class="empty-icon">
-          <van-icon
-            name="balance-list-o"
-            size="48"
-          />
-        </div>
-        <div class="empty-text">
-          暂无交易记录
-        </div>
+        共 {{ total }} 笔交易
       </div>
 
-      <!-- 交易列表 -->
-      <div
-        v-else
-        class="txn-list"
-      >
-        <div
-          v-for="txn in transactions"
-          :key="txn.id"
-          class="txn-card"
-          @click="onTransactionClick(txn)"
+      <div class="transactions">
+        <!-- 加载状态 -->
+        <van-loading
+          v-if="loading && transactions.length === 0"
+          class="txn-loading"
+          size="24px"
+          vertical
         >
-          <div
-            class="txn-icon"
-            :style="{ backgroundColor: txn.iconBg }"
-          >
+          加载中...
+        </van-loading>
+
+        <!-- 空状态 -->
+        <div
+          v-else-if="transactions.length === 0"
+          class="txn-empty"
+        >
+          <div class="empty-icon">
             <van-icon
-              :name="txn.icon"
-              :color="txn.iconColor"
+              name="balance-list-o"
+              size="48"
             />
           </div>
-          <div class="txn-content">
-            <div class="txn-name">
-              {{ txn.reason }}
-            </div>
-            <div class="txn-footer">
-              <div class="txn-time">
-                {{ formatDateTime(txn.occurredAt) }}
-              </div>
-              <span
-                v-if="txn.classify"
-                class="txn-classify-tag"
-                :class="txn.type === 1 ? 'tag-income' : 'tag-expense'"
-              >
-                {{ txn.classify }}
-              </span>
-            </div>
-          </div>
-          <div class="txn-amount">
-            {{ formatAmount(txn.amount, txn.type) }}
+          <div class="empty-text">
+            暂无交易记录
           </div>
         </div>
 
-        <!-- 加载更多 -->
-        <div
-          v-if="!finished"
-          class="load-more"
-        >
-          <van-loading
-            v-if="loading"
-            size="20px"
-          >
-            加载中...
-          </van-loading>
-          <van-button
-            v-else
-            type="primary"
-            size="small"
-            @click="loadMore"
-          >
-            加载更多
-          </van-button>
-        </div>
-
-        <!-- 已加载全部 -->
+        <!-- 交易列表 -->
         <div
           v-else
-          class="finished-text"
+          class="txn-list"
         >
-          已加载全部
+          <div
+            v-for="txn in transactions"
+            :key="txn.id"
+            class="txn-card"
+            @click="onTransactionClick(txn)"
+          >
+            <div
+              class="txn-icon"
+              :style="{ backgroundColor: txn.iconBg }"
+            >
+              <van-icon
+                :name="txn.icon"
+                :color="txn.iconColor"
+              />
+            </div>
+            <div class="txn-content">
+              <div class="txn-name">
+                {{ txn.reason }}
+              </div>
+              <div class="txn-footer">
+                <div class="txn-time">
+                  {{ formatDateTime(txn.occurredAt) }}
+                </div>
+                <span
+                  v-if="txn.classify"
+                  class="txn-classify-tag"
+                  :class="txn.type === 1 ? 'tag-income' : 'tag-expense'"
+                >
+                  {{ txn.classify }}
+                </span>
+              </div>
+            </div>
+            <div class="txn-amount">
+              {{ formatAmount(txn.amount, txn.type) }}
+            </div>
+          </div>
+
+          <!-- 加载更多 -->
+          <div
+            v-if="!finished"
+            class="load-more"
+          >
+            <van-loading
+              v-if="loading"
+              size="20px"
+            >
+              加载中...
+            </van-loading>
+            <van-button
+              v-else
+              type="primary"
+              size="small"
+              @click="loadMore"
+            >
+              加载更多
+            </van-button>
+          </div>
+
+          <!-- 已加载全部 -->
+          <div
+            v-else
+            class="finished-text"
+          >
+            已加载全部
+          </div>
         </div>
       </div>
     </div>
-  </PopupContainer>
+  </PopupContainerV2>
 
   <!-- 交易详情弹窗 -->
   <TransactionDetailSheet
@@ -120,7 +129,7 @@
 import { ref, computed, watch } from 'vue'
 import { showToast } from 'vant'
 import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
-import PopupContainer from '@/components/PopupContainer.vue'
+import PopupContainerV2 from '@/components/PopupContainerV2.vue'
 import { getTransactionList } from '@/api/transactionRecord'
 
 const props = defineProps({