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

admin-frontend-vue/src/pages/records/RecordsSoftwareVersionPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
 /** 软件版本管理页：客户端版本列表 + 上传新版本（成功留驻弹窗含链接，对齐 admin panel-version）。 */
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { fetchSoftwareVersions, uploadSoftwareVersion } from './version-api.ts'
 import type { SoftwareVersionItem } from './version-dto.ts'
@@ -9,6 +9,15 @@ import { isNonEmptyVersion } from './version-dto.ts'
 
 const loading = ref(false)
 const items = ref<SoftwareVersionItem[]>([])
+// 客户端分页：全量拉取后按页切片展示。
+const page = ref(1)
+const pageSize = 10
+const total = computed(() => items.value.length)
+const pagedItems = computed(() => items.value.slice((page.value - 1) * pageSize, page.value * pageSize))
+
+function changePage(p: number) {
+  page.value = p
+}
 
 const uploadVisible = ref(false)
 const uploading = ref(false)
@@ -90,7 +99,7 @@ onMounted(load)
     </div>
 
     <el-card shadow="never">
-      <el-table v-loading="loading" :data="items" stripe border empty-text="暂无版本记录">
+      <el-table v-loading="loading" :data="pagedItems" stripe border empty-text="暂无版本记录">
         <el-table-column prop="version" label="版本号" min-width="180" />
         <el-table-column label="下载链接" min-width="240">
           <template #default="{ row }">
@@ -108,6 +117,9 @@ onMounted(load)
           </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>
 
     <el-dialog v-model="uploadVisible" title="上传新版本" width="520px">