游标分页初步

web/src/services/nativeHome.ts

@@ -180,7 +180,7 @@ export async function syncNativeWidgets(force = false) {
     const [timetableResult, examResult, notificationResult, attendanceResult] = await Promise.allSettled([
       http.get('/timetables/mine'),
       http.get('/exams/my-schedule'),
-      http.get('/notifications', { params: { page: 1, pageSize: 3, unreadOnly: true } }),
+      http.get('/notifications', { params: { pageSize: 3, unreadOnly: true } }),
       roles.includes('Student')
         ? http.get('/attendance/open-check-ins')
         : Promise.resolve({ data: [] }),

web/src/views/NotificationCenterView.vue

@@ -28,7 +28,6 @@ const activeTab = ref<'inbox' | 'compose' | 'sent'>('inbox')
 const notifications = ref<any[]>([])
 const sentMessages = ref<any[]>([])
 const unreadCount = ref(0)
-const total = ref(0)
 const sentTotal = ref(0)
 const loading = ref(false)
 const markingAllRead = ref(false)
@@ -36,6 +35,9 @@ const sending = ref(false)
 const composerLoading = ref(false)
 const recipientLoading = ref(false)
 const page = ref(1)
+const inboxCursors = ref<string[]>([])
+const nextInboxCursor = ref<string>()
+const inboxHasMore = ref(false)
 const sentPage = ref(1)
 const recipientPage = ref(1)
 const pageSize = 20
@@ -125,12 +127,16 @@ function categoryClass(value: string) {
 }
 
 async function load(reset = false) {
-  if (reset) page.value = 1
+  if (reset) {
+    page.value = 1
+    inboxCursors.value = []
+    nextInboxCursor.value = undefined
+  }
   loading.value = true
   try {
     const { data } = await http.get('/notifications', {
       params: {
-        page: page.value,
+        cursor: inboxCursors.value.at(-1),
         pageSize,
         unreadOnly: unreadOnly.value || undefined,
         category: category.value || undefined,
@@ -138,7 +144,8 @@ async function load(reset = false) {
       },
     })
     notifications.value = data.items
-    total.value = data.total
+    inboxHasMore.value = data.hasMore
+    nextInboxCursor.value = data.nextCursor
     unreadCount.value = data.unreadCount
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
@@ -147,6 +154,20 @@ async function load(reset = false) {
   }
 }
 
+async function nextInboxPage() {
+  if (!nextInboxCursor.value || loading.value) return
+  inboxCursors.value.push(nextInboxCursor.value)
+  page.value++
+  await load()
+}
+
+async function previousInboxPage() {
+  if (!inboxCursors.value.length || loading.value) return
+  inboxCursors.value.pop()
+  page.value--
+  await load()
+}
+
 async function loadSent(reset = false) {
   if (reset) sentPage.value = 1
   loading.value = true
@@ -490,14 +511,14 @@ onMounted(() => load())
         />
       </section>
 
-      <div v-if="total > pageSize" class="message-pager">
-        <el-pagination
-          v-model:current-page="page"
-          :page-size="pageSize"
-          :total="total"
-          layout="prev, pager, next, total"
-          @current-change="load()"
-        />
+      <div v-if="inboxCursors.length || inboxHasMore" class="message-pager">
+        <el-button :disabled="!inboxCursors.length || loading" @click="previousInboxPage">
+          上一批
+        </el-button>
+        <span>第 {{ page }} 批</span>
+        <el-button type="primary" :disabled="!inboxHasMore || loading" @click="nextInboxPage">
+          下一批
+        </el-button>
       </div>
     </template>