增加流水通知审计分页

frontend/src/views/account/NotificationsView.vue

@@ -7,18 +7,28 @@ import { formatDateTime } from '@/utils/time'
 
 const loading = ref(false)
 const notifications = ref<NotificationItem[]>([])
+const currentPage = ref(1)
+const currentPageSize = ref(20)
+const total = ref(0)
 
 onMounted(loadNotifications)
 
 async function loadNotifications() {
   loading.value = true
   try {
-    notifications.value = await fetchNotifications()
+    const result = await fetchNotifications(currentPage.value, currentPageSize.value)
+    notifications.value = result.items
+    total.value = result.total
   } finally {
     loading.value = false
   }
 }
 
+function handleSizeChange() {
+  currentPage.value = 1
+  loadNotifications()
+}
+
 async function markRead(id: number) {
   await markNotificationRead(id)
   ElMessage.success('已标记为已读')
@@ -51,5 +61,17 @@ async function markRead(id: number) {
         </div>
       </div>
     </div>
+
+    <div class="pagination-wrap" v-if="total > 0">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next"
+        @current-change="loadNotifications"
+        @size-change="handleSizeChange"
+      />
+    </div>
   </section>
 </template>

frontend/src/views/account/WalletView.vue

@@ -9,6 +9,9 @@ import { formatDateTime } from '@/utils/time'
 const loading = ref(false)
 const account = ref<WalletAccount | null>(null)
 const ledger = ref<WalletLedger[]>([])
+const currentPage = ref(1)
+const currentPageSize = ref(20)
+const total = ref(0)
 const rechargeAmount = ref(100)
 const recharging = ref(false)
 
@@ -17,14 +20,24 @@ onMounted(loadWallet)
 async function loadWallet() {
   loading.value = true
   try {
-    const [balance, rows] = await Promise.all([fetchWalletBalance(), fetchWalletLedger()])
+    const [balance, result] = await Promise.all([fetchWalletBalance(), fetchWalletLedger(currentPage.value, currentPageSize.value)])
     account.value = balance
-    ledger.value = rows
+    ledger.value = result.items
+    total.value = result.total
   } finally {
     loading.value = false
   }
 }
 
+function handleSizeChange() {
+  currentPage.value = 1
+  loadWallet()
+}
+
+function loadLedgerPage() {
+  loadWallet()
+}
+
 async function handleRecharge() {
   recharging.value = true
   try {
@@ -92,6 +105,18 @@ function readError(error: unknown, fallback: string) {
         <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
       </el-table-column>
     </el-table>
+
+    <div class="pagination-wrap" v-if="total > 0">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next"
+        @current-change="loadLedgerPage"
+        @size-change="handleSizeChange"
+      />
+    </div>
   </section>
 </template>