task-272(验收反馈): 分组/软件版本/类目搜索表补齐分页组件(prev/next 中文由 locale 提供)

admin-frontend-vue/src/pages/account/GroupsPage.vue

@@ -16,6 +16,15 @@ const editingGroup = ref<ShopGroupItem | null>(null)
 const summary = computed(() => shopGroupSummary(rows.value))
 const isSuperAdmin = computed(() => session.isSuperAdmin)
 const currentUserId = computed(() => session.user?.id ?? null)
+// 客户端分页：全量拉取后按页切片展示。
+const page = ref(1)
+const pageSize = 10
+const total = computed(() => rows.value.length)
+const pagedRows = computed(() => rows.value.slice((page.value - 1) * pageSize, page.value * pageSize))
+
+function changePage(p: number) {
+  page.value = p
+}
 
 function canEditOf(group: ShopGroupItem): boolean {
   if (isSuperAdmin.value) return true
@@ -87,7 +96,7 @@ onMounted(loadGroups)
       </el-col>
     </el-row>
     <el-card shadow="never">
-      <el-table v-loading="loading" :data="rows" stripe>
+      <el-table v-loading="loading" :data="pagedRows" stripe>
         <el-table-column type="index" label="序号" width="80" />
         <el-table-column prop="name" label="分组名称" min-width="180" />
         <el-table-column prop="leaderUsername" label="组长" width="170" />
@@ -113,6 +122,9 @@ onMounted(loadGroups)
           </template>
         </el-table-column>
       </el-table>
+      <div class="table-footer">
+        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="page" @current-change="changePage" />
+      </div>
     </el-card>
     <GroupEditorDialog
       v-model="editorVisible"