调整

Web/src/views/StatisticsView.vue

@@ -40,19 +40,19 @@
 
         <!-- 月度概览卡片 -->
         <div class="overview-card">
-          <div class="overview-item">
+          <div class="overview-item clickable" @click="goToTypeOverviewBills(0)">
             <div class="label">总支出</div>
             <div class="value expense">¥{{ formatMoney(monthlyData.totalExpense) }}</div>
             <div class="sub-text">{{ monthlyData.expenseCount }}笔</div>
           </div>
           <div class="divider"></div>
-          <div class="overview-item">
+          <div class="overview-item clickable" @click="goToTypeOverviewBills(1)">
             <div class="label">总收入</div>
             <div class="value income">¥{{ formatMoney(monthlyData.totalIncome) }}</div>
             <div class="sub-text">{{ monthlyData.incomeCount }}笔</div>
           </div>
           <div class="divider"></div>
-          <div class="overview-item">
+          <div class="overview-item clickable" @click="goToTypeOverviewBills(null)">
             <div class="label">结余</div>
             <div class="value" :class="monthlyData.balance >= 0 ? 'income' : 'expense'">
               {{ monthlyData.balance >= 0 ? '' : '-' }}¥{{ formatMoney(Math.abs(monthlyData.balance)) }}
@@ -257,7 +257,7 @@
       <div class="category-bills">
         <div class="popup-header">
           <h3>{{ selectedCategoryTitle }}</h3>
-          <p v-if="categoryBills.length">共 {{ categoryBills.length }} 笔交易</p>
+          <p v-if="categoryBillsTotal">共 {{ categoryBillsTotal }} 笔交易</p>
         </div>
 
         <div class="bills-scroll-container">
@@ -306,11 +306,12 @@ const billListVisible = ref(false)
 const billListLoading = ref(false)
 const billListFinished = ref(false)
 const categoryBills = ref([])
+const categoryBillsTotal = ref(0)
 const selectedCategoryTitle = ref('')
 const selectedClassify = ref('')
 const selectedType = ref(null)
-const lastBillId = ref(null)
-const lastBillTime = ref(null)
+const billPageIndex = ref(1)
+const billPageSize = 20
 
 // 详情编辑相关
 const detailVisible = ref(false)
@@ -569,11 +570,29 @@ const goToCategoryBills = (classify, type) => {
   
   // 重置分页状态
   categoryBills.value = []
-  lastBillId.value = null
-  lastBillTime.value = null
+  categoryBillsTotal.value = 0
+  billPageIndex.value = 1
   billListFinished.value = false
   
   billListVisible.value = true
+  // 打开弹窗后加载数据
+  loadCategoryBills()
+}
+
+// 打开总支出/总收入的所有账单列表
+const goToTypeOverviewBills = (type) => {
+  selectedClassify.value = null
+  selectedType.value = type
+  selectedCategoryTitle.value = `${type === 0 ? '总支出' : '总收入'} - 明细`
+  
+  // 重置分页状态
+  categoryBills.value = []
+  billPageIndex.value = 1
+  billListFinished.value = false
+  
+  billListVisible.value = true
+  // 打开弹窗后加载数据
+  loadCategoryBills()
 }
 
 // 加载分类账单数据
@@ -583,15 +602,17 @@ const loadCategoryBills = async () => {
   billListLoading.value = true
   try {
     const params = {
-      classify: selectedClassify.value,
+      pageIndex: billPageIndex.value,
+      pageSize: billPageSize,
       type: selectedType.value,
       year: currentYear.value,
-      month: currentMonth.value
+      month: currentMonth.value,
+      sortByAmount: true
     }
     
-    if (lastBillTime.value && lastBillId.value) {
-      params.lastOccurredAt = lastBillTime.value
-      params.lastId = lastBillId.value
+    // 仅当选择了分类时才添加classify参数
+    if (selectedClassify.value !== null) {
+      params.classify = selectedClassify.value
     }
     
     const response = await getTransactionList(params)
@@ -599,15 +620,13 @@ const loadCategoryBills = async () => {
     if (response.success) {
       const newList = response.data || []
       categoryBills.value = [...categoryBills.value, ...newList]
+      categoryBillsTotal.value = response.total
       
-      if (newList.length > 0) {
-        const lastRecord = newList[newList.length - 1]
-        lastBillId.value = response.lastId || lastRecord.id
-        lastBillTime.value = response.lastTime || lastRecord.occurredAt
-      }
-      
-      if (newList.length === 0 || newList.length < 20) {
+      if (newList.length === 0 || newList.length < billPageSize) {
         billListFinished.value = true
+      } else {
+        billListFinished.value = false
+        billPageIndex.value++
       }
     } else {
       showToast(response.message || '加载账单失败')
@@ -645,8 +664,7 @@ const onBillSave = async () => {
   
   // 刷新账单列表
   categoryBills.value = []
-  lastBillId.value = null
-  lastBillTime.value = null
+  billPageIndex.value = 1
   billListFinished.value = false
   await loadCategoryBills()
   
@@ -700,6 +718,23 @@ onActivated(() => {
   text-align: center;
 }
 
+.overview-item.clickable {
+  cursor: pointer;
+  transition: background-color 0.2s;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.overview-item.clickable:active {
+  background-color: #f0f0f0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .overview-item.clickable:active {
+    background-color: #2c2c2c;
+  }
+}
+
 .overview-item .label {
   font-size: 13px;
   color: var(--van-text-color-2);