feat(admin): standard pagination + synced profile columns on users list

Co-Authored-By: Claude Code <noreply@anthropic.com>

apps/admin/src/views/system/users/composables/useAdminUserPages.spec.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it, vi } from 'vitest'
+import { useAdminUserPages } from './useAdminUserPages'
+
+const pageOf = (accounts: string[], total: number) => ({
+  items: accounts.map((account, i) => ({ id: `u${i}`, account })) as never,
+  nextCursor: null,
+  hasMore: false,
+  total
+})
+
+describe('useAdminUserPages 分页状态', () => {
+  it('loadPage 推进页码并落 items/total（透传 page/pageSize 给 fetch）', async () => {
+    const fetch = vi.fn().mockResolvedValue(pageOf(['a', 'b'], 35))
+    const state = useAdminUserPages(fetch)
+    await state.loadPage(2)
+    expect(fetch).toHaveBeenCalledWith(2, 20)
+    expect(state.page.value).toBe(2)
+    expect(state.items.value).toHaveLength(2)
+    expect(state.total.value).toBe(35)
+  })
+
+  it('total 缺省（旧响应形态）回退 items 长度，不抛错', async () => {
+    const fetch = vi.fn().mockResolvedValue({
+      items: [],
+      nextCursor: null,
+      hasMore: false
+    })
+    const state = useAdminUserPages(fetch)
+    await state.loadPage()
+    expect(state.total.value).toBe(0)
+  })
+
+  it('fetch 抛错 → error 捕获、loading 复位、页码不推进', async () => {
+    const fetch = vi.fn().mockRejectedValue(new Error('boom'))
+    const state = useAdminUserPages(fetch)
+    await state.loadPage(3)
+    expect(state.error.value?.message).toBe('boom')
+    expect(state.loading.value).toBe(false)
+    expect(state.page.value).toBe(1)
+  })
+
+  it('onSizeChange 回第 1 页；replaceItem 原地替换当前页条目', async () => {
+    const fetch = vi.fn().mockResolvedValue(pageOf(['a'], 5))
+    const state = useAdminUserPages(fetch)
+    await state.loadPage(2)
+    state.onSizeChange()
+    await Promise.resolve()
+    await Promise.resolve()
+    expect(fetch).toHaveBeenLastCalledWith(1, 20)
+    state.replaceItem(0, { id: 'u0', account: 'a2' } as never)
+    expect(state.items.value[0]?.account).toBe('a2')
+  })
+})

apps/admin/src/views/system/users/composables/useAdminUserPages.ts

@@ -0,0 +1,47 @@
+/**
+ * 用户管理列表分页状态（G4：page 模式偏移分页——page/pageSize/total 驱动
+ * ElPagination；替代旧 useCursorList 累积加载）。fetch 经参数注入便于单测；
+ * 过滤条件由调用方闭包携带，过滤变化的页码重置在 search/resetFilters 处理。
+ */
+import { ref } from 'vue'
+
+export function useAdminUserPages(
+  fetchPage: (
+    page: number,
+    pageSize: number,
+  ) => Promise<Api.AdminUser.ListResponse>,
+) {
+  const items = ref<Api.AdminUser.Item[]>([])
+  const total = ref(0)
+  const page = ref(1)
+  const pageSize = ref(20)
+  const loading = ref(false)
+  const error = ref<Error | null>(null)
+
+  async function loadPage(target: number = page.value): Promise<void> {
+    loading.value = true
+    error.value = null
+    try {
+      const res = await fetchPage(target, pageSize.value)
+      page.value = target
+      items.value = res.items
+      total.value = res.total ?? res.items.length
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err))
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /** 每页条数变化：回第 1 页重载。 */
+  function onSizeChange(): void {
+    void loadPage(1)
+  }
+
+  /** 行内回显（治理操作/编辑保存后原地替换当前页条目）。 */
+  function replaceItem(index: number, updated: Api.AdminUser.Item): void {
+    items.value[index] = updated
+  }
+
+  return { items, total, page, pageSize, loading, error, loadPage, onSizeChange, replaceItem }
+}

apps/admin/src/views/system/users/index.vue

@@ -1,6 +1,7 @@
-<!-- 账号管理页（P4a Task 8）：过滤（前缀+治理状态）+ 游标累积列表 + 行内治理
-     操作（编辑/重置密码/激活/停用/解锁）。自我保护双保险：UI 对自身行禁用
-     角色/锁定编辑，服务端 400 仍会经 http 层本地化弹出。 -->
+<!-- 账号管理页（P4a Task 8；G4 后改 page 分页 + 同步档案列）：过滤（前缀+
+     治理状态）+ 页码分页（page/pageSize/total）+ 同步档案（头像/工号/邮箱/
+     公司）展示 + 行内治理操作（编辑/重置密码/激活/停用/解锁）。自我保护双
+     保险：UI 对自身行禁用角色/锁定编辑，服务端 400 仍会经 http 层本地化弹出。 -->
 <template>
   <div class="p-5">
     <ElCard data-test="users-card">
@@ -44,7 +45,7 @@
       >
         <div class="flex items-center gap-2">
           <span>{{ $t('usersManage.list.loadFailed') }}：{{ error.message }}</span>
-          <ElButton size="small" data-test="users-list-retry" @click="loadFirst()">
+          <ElButton size="small" data-test="users-list-retry" @click="loadPage()">
             {{ $t('usersManage.list.retry') }}
           </ElButton>
         </div>
@@ -61,11 +62,37 @@
             </div>
           </template>
         </ElTableColumn>
-        <ElTableColumn
-          :label="$t('usersManage.list.colDisplayName')"
-          min-width="140"
-          prop="displayName"
-        />
+        <ElTableColumn :label="$t('usersManage.list.colDisplayName')" min-width="180">
+          <template #default="{ row }">
+            <div class="flex items-center gap-2">
+              <ElAvatar
+                :size="28"
+                :src="row.synced?.avatar || undefined"
+                data-test="user-avatar"
+              >
+                {{ row.displayName.slice(0, 1) }}
+              </ElAvatar>
+              <span data-test="user-display-name">{{ row.displayName }}</span>
+            </div>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('usersManage.list.colSn')" min-width="90">
+          <template #default="{ row }">
+            <span data-test="user-sn">{{ row.synced?.sn || '—' }}</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('usersManage.list.colEmail')" min-width="170">
+          <template #default="{ row }">
+            <span data-test="user-email">{{ row.synced?.email || '—' }}</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('usersManage.list.colCompany')" min-width="110">
+          <template #default="{ row }">
+            <span data-test="user-company">
+              {{ row.synced?.companyAbbr || row.synced?.companyName || '—' }}
+            </span>
+          </template>
+        </ElTableColumn>
         <ElTableColumn :label="$t('usersManage.list.colRole')" width="100">
           <template #default="{ row }">
             <ElTag :type="row.role === 'admin' ? 'warning' : 'info'" data-test="user-role-tag">
@@ -151,11 +178,18 @@
         </template>
       </ElTable>
 
-      <div v-if="items.length" class="mt-4 text-center">
-        <ElButton v-if="hasMore" :loading="loading" data-test="users-load-more" @click="loadMore()">
-          {{ $t('usersManage.list.loadMore') }}
-        </ElButton>
-        <span v-else class="text-gray-400 text-sm">{{ $t('usersManage.list.noMore') }}</span>
+      <div v-if="total > 0" class="mt-4 flex justify-end" data-test="users-pagination">
+        <ElPagination
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[20, 50, 100]"
+          :disabled="loading"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @current-change="loadPage"
+          @size-change="onSizeChange"
+        />
       </div>
     </ElCard>
 
@@ -176,14 +210,12 @@
     fetchUpdateAdminUser,
     fetchAdminUsers
   } from '@/api/adminUsers'
-  import { useCursorList } from '@/views/albums/composables/useCursorList'
+  import { useAdminUserPages } from './composables/useAdminUserPages'
   import { formatDateTime } from '@/utils/albums/format'
   import { useUserStore } from '@/store/modules/user'
 
   defineOptions({ name: 'SystemUsers' })
 
-  const PAGE_SIZE = 20
-
   const { t } = useI18n()
   const userStore = useUserStore()
 
@@ -198,26 +230,26 @@
     { value: 'locked', label: t('usersManage.bucket.locked') }
   ])
 
-  const { items, hasMore, loading, error, loadFirst, loadMore, replaceItem } =
-    useCursorList<Api.AdminUser.Item>(
-      (cursor?: string) =>
-        fetchAdminUsers({
-          query: filters.query.trim() || undefined,
-          status: (filters.status || undefined) as Api.AdminUser.StatusFilter | undefined,
-          cursor,
-          limit: PAGE_SIZE
-        }),
-      (item) => item.id
+  const { items, total, page, pageSize, loading, error, loadPage, onSizeChange, replaceItem } =
+    useAdminUserPages((targetPage, size) =>
+      fetchAdminUsers({
+        query: filters.query.trim() || undefined,
+        status: (filters.status || undefined) as Api.AdminUser.StatusFilter | undefined,
+        page: targetPage,
+        pageSize: size
+      })
     )
 
   function search(): void {
-    loadFirst()
+    page.value = 1
+    void loadPage()
   }
 
   function resetFilters(): void {
     filters.query = ''
     filters.status = ''
-    loadFirst()
+    page.value = 1
+    void loadPage()
   }
 
   /** 自身行判定：本地会话只存账号（无 /users/me 端点），按 account 对齐 */
@@ -319,6 +351,6 @@
   }
 
   onMounted(() => {
-    loadFirst()
+    void loadPage()
   })
 </script>