增加流水通知审计分页

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>