统一分页

src/oj/contest/pages/rank.vue

@@ -5,6 +5,7 @@ import { getContestProblems, getContestRank } from "oj/api"
 import { secondsToDuration } from "utils/functions"
 import { useContestStore } from "oj/store/contest"
 import Pagination from "shared/components/Pagination.vue"
+import { usePagination } from "shared/composables/pagination"
 import { ContestStatus } from "utils/constants"
 import { renderTableTitle } from "utils/renders"
 import { ContestRank, ProblemFiltered } from "utils/types"
@@ -39,10 +40,8 @@ const { resume, pause } = useIntervalFn(
   },
 )
 
-const query = reactive({
+// 使用分页 composable
-  limit: 50,
+const { query } = usePagination({}, { defaultLimit: 50 })
-  page: 1,
-})
 
 const columns = ref<DataTableColumn<ContestRank>[]>([
   {
@@ -191,14 +190,8 @@ async function addColumns() {
   }
 }
 
-watch(() => query.page, listRanks)
+// 监听分页参数变化
-watch(
+watch([() => query.page, () => query.limit], listRanks)
-  () => query.limit,
-  () => {
-    query.page = 1
-    listRanks()
-  },
-)
 watch(autoRefresh, (checked) => (checked ? resume() : pause()))
 
 onMounted(() => {
@@ -232,8 +225,10 @@ onMounted(() => {
     </n-form>
     <Pagination
       :total="total"
-      v-model:page="query.page"
+      :limit="query.limit"
-      v-model:limit="query.limit"
+      :page="query.page"
+      @update:limit="(limit: number) => (query.limit = limit)"
+      @update:page="(page: number) => (query.page = page)"
     />
   </n-space>
 </template>

src/oj/problemset/components/UserProgressView.vue

@@ -33,7 +33,7 @@ const completionOptions = [
 ]
 
 // 使用分页 composable
-const { query } = usePagination({}, { defaultLimit: 10 })
+const { query } = usePagination({}, { defaultLimit: 50 })
 
 // 加载用户进度数据
 async function loadUserProgress() {

src/shared/components/Pagination.vue

@@ -20,10 +20,7 @@ const { isDesktop } = useBreakpoints()
 
 const limit = ref(props.limit)
 const page = ref(props.page)
-const sizes = computed(() => {
+const sizes = [10, 30, 50]
-  if (route.name === "contest rank") return [10, 30, 50]
-  return [10, 20, 30]
-})
 
 watch(limit, () => emit("update:limit", limit))
 watch(page, () => emit("update:page", page))