agent后台finance和users添加服务端分页和统计

frontend/src/pages/agent/users/components/data-table.vue

@@ -16,6 +16,7 @@ import DataTableToolbar from '@/pages/agent/users/components/data-table-toolbar.
 
 const props = defineProps<Omit<DataTableProps<User>, 'columns'> & {
   searchFilter?: string
+  serverPagination?: DataTableProps<User>['serverPagination']
 }>()
 
 const emit = defineEmits<{
@@ -34,6 +35,7 @@ const table = generateVueTable<User>({
   get data() { return props.data },
   get loading() { return props.loading },
   columns: columns.value,
+  serverPagination: props.serverPagination,
 })
 
 const columnLabels: Record<string, string> = {
@@ -51,7 +53,7 @@ defineExpose({
 </script>
 
 <template>
-  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
+  <DataTable :columns="columns" :data :loading :table :server-pagination @refresh="emit('refresh')">
     <template #toolbar>
       <div class="space-y-3">
         <div class="flex flex-wrap items-center justify-between gap-2">

frontend/src/pages/agent/users/index.vue

@@ -15,36 +15,44 @@ const loading = ref(true)
 const users = ref<User[]>([])
 const tableRef = ref()
 const searchFilter = ref('')
+const currentPage = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+const activeCount = ref(0)
+const disabledCount = ref(0)
+const bannedCount = ref(0)
 
-const filteredUsers = computed(() => {
-  let result = users.value.filter(u => u)
-  if (searchFilter.value) {
-    const query = searchFilter.value.toLowerCase()
-    result = result.filter(u =>
-      u.username?.toLowerCase().includes(query)
-      || u.email?.toLowerCase().includes(query),
-    )
-  }
-  return result
-})
-
-const activeCount = computed(() => users.value.filter(user => user.status === 'active').length)
-const disabledCount = computed(() => users.value.filter(user => user.status === 'disabled').length)
-const bannedCount = computed(() => users.value.filter(user => user.status === 'banned').length)
+const serverPagination = computed(() => ({
+  page: currentPage.value,
+  pageSize: pageSize.value,
+  total: total.value,
+  onPageChange: (newPage: number) => {
+    currentPage.value = newPage
+    fetchUsers()
+  },
+  onPageSizeChange: (newPageSize: number) => {
+    pageSize.value = newPageSize
+    currentPage.value = 1
+    fetchUsers()
+  },
+}))
 
 async function fetchUsers() {
   loading.value = true
   try {
-    const data = await api.get<any>('/agent/users')
-    if (Array.isArray(data)) {
-      users.value = data
-    } else if (data?.users) {
-      users.value = data.users
-    } else if (data?.data) {
-      users.value = Array.isArray(data.data) ? data.data : []
-    } else {
-      users.value = []
+    const params = new URLSearchParams()
+    params.append('page', String(currentPage.value))
+    params.append('page_size', String(pageSize.value))
+    if (searchFilter.value) {
+      params.append('search', searchFilter.value.trim())
     }
+
+    const data = await api.get<any>(`/agent/users?${params.toString()}`)
+    users.value = data?.users || []
+    total.value = data?.total || 0
+    activeCount.value = data?.active_count || 0
+    disabledCount.value = data?.disabled_count || 0
+    bannedCount.value = data?.banned_count || 0
   }
   catch (error) {
     console.error('Load users failed:', error)
@@ -81,7 +89,7 @@ onMounted(() => {
           </UiCardHeader>
           <UiCardContent>
             <div class="text-2xl font-bold">
-              {{ users.length }}
+              {{ total }}
             </div>
           </UiCardContent>
         </UiCard>
@@ -139,10 +147,11 @@ onMounted(() => {
             v-else
             ref="tableRef"
             :loading
-            :data="filteredUsers"
+            :data="users"
+            :server-pagination="serverPagination"
             :search-filter="searchFilter"
             @refresh="fetchUsers"
-            @update:search-filter="searchFilter = $event"
+            @update:search-filter="searchFilter = $event; currentPage = 1; fetchUsers()"
           />
         </UiCardContent>
       </UiCard>