服务器端分页优化

web/src/views/ApprovalCenterView.vue

@@ -54,6 +54,9 @@ const isTeacher = computed(() => auth.user?.roles.includes('Teacher') && !isMana
 const isStudent = computed(() => auth.user?.roles.includes('Student') && !isManager.value)
 
 const pending = ref<any[]>([])
+const pendingPage = ref(1)
+const pendingTotal = ref(0)
+const pendingPageSize = 20
 const loading = ref(false)
 const submitting = ref(false)
 const tab = ref(isManager.value ? 'pending' : 'mine')
@@ -168,7 +171,17 @@ const recordCount = computed(() =>
 async function load() {
   loading.value = true
   try {
-    if (isManager.value) pending.value = (await http.get('/approvals/pending')).data
+    if (isManager.value) {
+      const { data } = await http.get('/approvals/pending', {
+        params: { page: pendingPage.value, pageSize: pendingPageSize },
+      })
+      pending.value = data.items
+      pendingTotal.value = data.total
+      if (!pending.value.length && pendingPage.value > 1) {
+        pendingPage.value--
+        return await load()
+      }
+    }
     if (isStudent.value) {
       const [courses, grades, ex, df, substitutions] = await Promise.all([
         http.get('/approvals/my-courses'),
@@ -358,7 +371,7 @@ onMounted(load)
       <el-segmented
         v-model="tab"
         :options="[
-          ...(isManager ? [{ label: `待审批 (${pending.length})`, value: 'pending' }] : []),
+          ...(isManager ? [{ label: `待审批 (${pendingTotal})`, value: 'pending' }] : []),
           { label: `我的记录${isStudent ? ` (${recordCount})` : ''}`, value: 'mine' },
         ]"
       />
@@ -389,6 +402,15 @@ onMounted(load)
         </div>
       </article>
       <el-empty v-if="!pending.length" description="暂无待审批" />
+      <el-pagination
+        v-if="pendingTotal > pendingPageSize"
+        v-model:current-page="pendingPage"
+        class="approval-pagination"
+        layout="prev, pager, next"
+        :page-size="pendingPageSize"
+        :total="pendingTotal"
+        @current-change="() => load()"
+      />
     </section>
 
     <section v-if="tab === 'mine'" v-loading="loading">