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

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

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>