服务器端分页优化

web/src/views/WarningsView.vue

@@ -17,6 +17,9 @@ const myWarnings = ref<any[]>([])
 const loading = ref(false)
 const detecting = ref(false)
 const filterType = ref('')
+const recordsPage = ref(1)
+const recordsTotal = ref(0)
+const recordsPageSize = 20
 
 const typeLabels: Record<number, string> = { 1: '不及格学分', 2: '低绩点', 3: '缺勤', 4: '延毕风险' }
 const statusLabels: Record<number, string> = { 1: '生效中', 2: '已确认', 3: '已处理', 4: '已忽略' }
@@ -40,7 +43,8 @@ const ruleRows = reactive([
   { type: 4, name: '延毕风险', threshold: 5, isEnabled: true, notifyStudent: true, notifyCounselor: true, description: '', autoCheckEnabled: false, checkDayOfWeek: 0, checkHour: 8, checkMinute: 0, lastCheckAt: null as string | null },
 ])
 
-async function load() {
+async function load(resetRecordsPage = false) {
+  if (resetRecordsPage) recordsPage.value = 1
   loading.value = true
   try {
     if (isWarningManager.value && termId.value) {
@@ -63,7 +67,22 @@ async function load() {
       }
     }
     if (isWarningManager.value || isCounselor.value)
-      records.value = (await http.get('/warnings/records', { params: { academicTermId: termId.value || undefined, type: filterType.value || undefined } })).data
+    {
+      const response = await http.get('/warnings/records', {
+        params: {
+          academicTermId: termId.value || undefined,
+          type: filterType.value || undefined,
+          page: recordsPage.value,
+          pageSize: recordsPageSize,
+        },
+      })
+      records.value = response.data.items
+      recordsTotal.value = response.data.total
+      if (records.value.length === 0 && recordsPage.value > 1) {
+        recordsPage.value--
+        await load()
+      }
+    }
     if (isStudent.value) myWarnings.value = (await http.get('/warnings/my-warnings')).data
   } catch (e) { ElMessage.error(apiErrorMessage(e)) } finally { loading.value = false }
 }
@@ -105,8 +124,8 @@ onMounted(async () => {
     <section class="page-intro">
       <div><span class="section-kicker">ACADEMIC WARNING</span><h2>{{ isStudent ? '我的预警' : '学业预警' }}</h2><p>{{ isWarningManager ? '配置预警规则，执行检测，查看预警记录。' : isCounselor ? '查看所管学生的学业预警情况。' : '查看并确认您的学业预警通知。' }}</p></div>
       <div style="display:flex;gap:8px;align-items:center">
-        <el-select v-model="termId" clearable @change="load" style="width:240px"><el-option v-for="t in terms" :key="t.id" :label="academicTermLabel(t)" :value="t.id" :class="academicTermOptionClass(t)" /></el-select>
-        <el-button :icon="Refresh" @click="load">刷新</el-button>
+        <el-select v-model="termId" clearable @change="load(true)" style="width:240px"><el-option v-for="t in terms" :key="t.id" :label="academicTermLabel(t)" :value="t.id" :class="academicTermOptionClass(t)" /></el-select>
+        <el-button :icon="Refresh" @click="() => load()">刷新</el-button>
       </div>
     </section>
 
@@ -164,7 +183,7 @@ onMounted(async () => {
     <section v-if="isWarningManager || isCounselor" v-loading="loading" class="warn-records">
       <div style="display:flex;gap:12px;align-items:center;margin-bottom:12px">
         <h3 style="margin:0">预警记录</h3>
-        <el-select v-model="filterType" clearable placeholder="全部类型" @change="load" style="width:140px"><el-option v-for="(v,k) in typeLabels" :key="k" :label="v" :value="Number(k)" /></el-select>
+        <el-select v-model="filterType" clearable placeholder="全部类型" @change="load(true)" style="width:140px"><el-option v-for="(v,k) in typeLabels" :key="k" :label="v" :value="Number(k)" /></el-select>
       </div>
       <el-table :data="records" size="small" v-if="records.length">
         <el-table-column label="学生" min-width="150"><template #default="{row}"><b>{{ row.studentName }}</b><span style="font-size:11px;color:var(--muted);margin-left:6px">{{ row.studentNumber }}</span></template></el-table-column>
@@ -173,6 +192,15 @@ onMounted(async () => {
         <el-table-column label="阈值/详情" min-width="200"><template #default="{row}"><span>{{ row.triggerValue }}</span><p style="margin:0;font-size:11px;color:var(--muted)">{{ row.detail }}</p></template></el-table-column>
         <el-table-column label="状态" width="100"><template #default="{row}"><el-tag size="small" :type="row.status===1?'danger':row.status===2?'success':'info'">{{ statusLabels[row.status] }}</el-tag></template></el-table-column>
       </el-table>
+      <el-pagination
+        v-if="recordsTotal > recordsPageSize"
+        v-model:current-page="recordsPage"
+        :page-size="recordsPageSize"
+        :total="recordsTotal"
+        layout="total, prev, pager, next"
+        class="table-pagination"
+        @current-change="() => load()"
+      />
       <el-empty v-if="!records.length" description="暂无预警记录，请先执行检测。" />
     </section>