From 70ff92303387ff7f6fd4cb4d62b508148c2b39d2 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Wed, 9 Sep 2026 19:26:55 +0800
Subject: [PATCH] fix(frontend): prevent pagination overflow on narrow screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adapt visible page buttons to the pagination container width while preserving the existing button styles. Hide the total count on narrow containers and keep the page-size selector on the left with navigation on the right. Retain the total count and full pager on wider layouts.

Validation: browser layout checks across 320–1280px widths and up to 1380 pages, pagination interactions and disabled states, frontend typecheck, targeted ESLint, and diff whitespace checks passed.

Co-authored-by: Codex <noreply@openai.com>
---
 .../base/BaseTable/BaseTablePagination.vue    | 90 ++++++++++++-------
 1 file changed, 60 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/base/BaseTable/BaseTablePagination.vue b/frontend/src/components/base/BaseTable/BaseTablePagination.vue
index 7e0a44e9b..2ca0ff9d3 100644
--- a/frontend/src/components/base/BaseTable/BaseTablePagination.vue
+++ b/frontend/src/components/base/BaseTable/BaseTablePagination.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BaseTablePagination } from './pagination'
+import type { BaseTablePagination, PagerItem } from './pagination'
 import { ChevronLeft, ChevronRight } from '@lucide/vue'
 
 import { computed } from 'vue'
@@ -26,6 +26,29 @@ const totalPages = computed(() => getTotalPages(props.pagination))
 const currentPage = computed(() => getCurrentPage(props.pagination, totalPages.value))
 const pageSizeOptions = computed(() => getPageSizeOptions(props.pagination))
 const pagerItems = computed(() => getPagerItems(totalPages.value, currentPage.value))
+const adjacentPagerItems = computed(() => {
+  const count = Math.min(3, totalPages.value)
+  const start = Math.max(1, Math.min(currentPage.value - 1, totalPages.value - count + 1))
+  return Array.from({ length: count }, (_, index) => start + index)
+})
+const compactPagerItems = computed<PagerItem[]>(() => {
+  const total = totalPages.value
+  const current = currentPage.value
+  if (total <= 5)
+    return Array.from({ length: total }, (_, index) => index + 1)
+  if (current <= 3)
+    return [1, 2, 3, 'ellipsis', total]
+  if (current >= total - 2)
+    return [1, 'ellipsis', total - 2, total - 1, total]
+  return [1, 'ellipsis', current, 'ellipsis', total]
+})
+
+const pagerVisibilityClasses = [
+  'flex @min-[19.5rem]/pagination:hidden',
+  'hidden @min-[19.5rem]/pagination:flex @min-[24.5rem]/pagination:hidden',
+  'hidden @min-[24.5rem]/pagination:flex @min-[29.5rem]/pagination:hidden',
+  'hidden @min-[29.5rem]/pagination:flex',
+]
 
 const pageSizeModel = computed({
   get: () => String(props.pagination.pageSize),
@@ -61,25 +84,25 @@ function paginationPageClass(page: number) {
 
 <template>
   <footer
-    class="mt-2 flex min-h-10 shrink-0 flex-wrap items-center justify-between gap-3 px-0 py-1"
+    class="@container/pagination mt-2 min-h-10 min-w-0 shrink-0 px-0 py-1"
   >
-    <div
-      class="flex min-w-0 items-center gap-2.5 text-cp-sm font-emphasis text-cp-text-secondary"
-    >
-      <span class="whitespace-nowrap">共 {{ pagination.total }} 条</span>
-    </div>
-
-    <div class="flex items-center gap-2">
+    <div class="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-2 @min-[36rem]/pagination:grid-cols-[minmax(0,1fr)_auto_auto] @min-[36rem]/pagination:gap-3">
+      <span class="hidden min-w-0 truncate text-cp-sm font-emphasis text-cp-text-secondary @min-[36rem]/pagination:block">
+        共 {{ pagination.total }} 条
+      </span>
       <BaseSelect
         v-model="pageSizeModel"
         aria-label="每页条数"
         :options="pageSizeOptions"
         :disabled="loading"
         size="sm"
-        class="w-28"
+        class="w-28 shrink-0"
       />
 
-      <div class="flex items-center gap-2">
+      <nav
+        aria-label="分页"
+        class="flex shrink-0 items-center justify-self-end gap-2"
+      >
         <BaseIconButton
           variant="secondary"
           size="sm"
@@ -90,24 +113,31 @@ function paginationPageClass(page: number) {
           <ChevronLeft class="size-4" />
         </BaseIconButton>
 
-        <template v-for="(item, index) in pagerItems" :key="`${item}-${index}`">
-          <span
-            v-if="item === 'ellipsis'"
-            class="inline-flex size-8 items-center justify-center text-xs font-bold text-cp-text-quaternary"
-          >
-            …
-          </span>
-          <button
-            v-else
-            type="button"
-            :class="paginationPageClass(item)"
-            :disabled="loading || item === currentPage"
-            :aria-current="item === currentPage ? 'page' : undefined"
-            @click="goToPage(item)"
-          >
-            {{ item }}
-          </button>
-        </template>
+        <div
+          v-for="(items, variant) in [[currentPage], adjacentPagerItems, compactPagerItems, pagerItems]"
+          :key="variant"
+          class="items-center gap-2"
+          :class="pagerVisibilityClasses[variant]"
+        >
+          <template v-for="(item, index) in items" :key="`${item}-${index}`">
+            <span
+              v-if="item === 'ellipsis'"
+              class="inline-flex size-8 items-center justify-center text-xs font-bold text-cp-text-quaternary"
+            >
+              …
+            </span>
+            <button
+              v-else
+              type="button"
+              :class="paginationPageClass(item)"
+              :disabled="loading || item === currentPage"
+              :aria-current="item === currentPage ? 'page' : undefined"
+              @click="goToPage(item)"
+            >
+              {{ item }}
+            </button>
+          </template>
+        </div>
 
         <BaseIconButton
           variant="secondary"
@@ -118,7 +148,7 @@ function paginationPageClass(page: number) {
         >
           <ChevronRight class="size-4" />
         </BaseIconButton>
-      </div>
+      </nav>
     </div>
   </footer>
 </template>