游标分页优化

web/src/components/AppUpdateManagementPanel.vue

@@ -28,15 +28,17 @@ interface AppUpdateRelease {
 
 interface PageResult<T> {
   items: T[]
-  total: number
-  page: number
+  nextCursor?: string
+  hasMore: boolean
   pageSize: number
 }
 
 const loading = ref(false)
 const uploadBusy = ref(false)
 const rows = ref<AppUpdateRelease[]>([])
-const total = ref(0)
+const cursors = ref<string[]>([])
+const nextCursor = ref<string>()
+const hasMore = ref(false)
 const uploadVisible = ref(false)
 const selectedBundle = ref<File>()
 const uploadFiles = ref<UploadFiles>([])
@@ -92,8 +94,8 @@ function statusType(value: UpdateStatus) {
 async function loadReleases() {
   loading.value = true
   try {
-    const params: Record<string, string | number> = {
-      page: filter.page,
+    const params: Record<string, string | number | undefined> = {
+      cursor: cursors.value.at(-1),
       pageSize: filter.pageSize,
     }
     if (filter.platform) params.platform = filter.platform
@@ -103,7 +105,8 @@ async function loadReleases() {
       { params },
     )
     rows.value = data.items
-    total.value = data.total
+    hasMore.value = data.hasMore
+    nextCursor.value = data.nextCursor
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
   } finally {
@@ -113,9 +116,25 @@ async function loadReleases() {
 
 function search() {
   filter.page = 1
+  cursors.value = []
+  nextCursor.value = undefined
   loadReleases()
 }
 
+async function nextPage() {
+  if (!nextCursor.value || loading.value) return
+  cursors.value.push(nextCursor.value)
+  filter.page++
+  await loadReleases()
+}
+
+async function previousPage() {
+  if (!cursors.value.length || loading.value) return
+  cursors.value.pop()
+  filter.page--
+  await loadReleases()
+}
+
 function openUpload() {
   Object.assign(form, {
     platform: 'Android',
@@ -316,14 +335,11 @@ onMounted(loadReleases)
       </template>
     </el-table>
 
-    <el-pagination
-      v-model:current-page="filter.page"
-      v-model:page-size="filter.pageSize"
-      background
-      layout="total, prev, pager, next"
-      :total="total"
-      @current-change="loadReleases"
-    />
+    <div v-if="cursors.length || hasMore" class="cursor-pager">
+      <el-button :disabled="!cursors.length || loading" @click="previousPage">上一批</el-button>
+      <span>第 {{ filter.page }} 批</span>
+      <el-button type="primary" :disabled="!hasMore || loading" @click="nextPage">下一批</el-button>
+    </div>
 
     <el-dialog
       v-model="uploadVisible"
@@ -444,7 +460,8 @@ onMounted(loadReleases)
 small { color: #74818a; display: block; font-size: 10px; margin-top: 4px; }
 .active-label { color: #1f7468; font-size: 11px; font-weight: 700; }
 .el-table { margin-top: 12px; }
-.el-pagination { justify-content: flex-end; padding: 16px 18px; }
+.cursor-pager { align-items:center; display:flex; gap:10px; justify-content:flex-end; padding:16px 18px; }
+.cursor-pager span { color:#74818a; font-size:11px; }
 .form-grid { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
 .form-grid .el-select { width: 100%; }