From 2ade6b8db2bad5cbb7b7d2307443046f30d5a497 Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Wed, 17 Dec 2025 22:17:02 +0800
Subject: [PATCH] fix: small screen page style

---
 web/src/components/ui/Pagination.vue | 108 ++++++++++++++++++++-------
 1 file changed, 82 insertions(+), 26 deletions(-)

diff --git a/web/src/components/ui/Pagination.vue b/web/src/components/ui/Pagination.vue
index e665388..daf3847 100644
--- a/web/src/components/ui/Pagination.vue
+++ b/web/src/components/ui/Pagination.vue
@@ -1,34 +1,43 @@
 <template>
-  <div class="flex items-center justify-between">
-    <div class="text-sm text-muted-foreground">
-      <span class="block sm:inline">共 {{ total }} 条记录</span>
-      <span class="hidden sm:inline"> · </span>
-      <span class="block sm:inline">每页 {{ pageSize }} 条</span>
+  <div class="flex items-center justify-between gap-2">
+    <!-- 统计信息 -->
+    <div class="text-xs sm:text-sm text-muted-foreground shrink-0">
+      <span>共 {{ total }} 条</span>
+      <span class="hidden sm:inline"> · 每页 {{ pageSize }} 条</span>
     </div>
     
-    <div class="flex justify-end">
-      <Pagination
-        :total="total"
-        :items-per-page="pageSize"
-        :sibling-count="1"
-        :show-edges="true"
-        :default-page="currentPage"
-        :page="currentPage"
-        @update:page="handlePageChange"
-        class="justify-end"
-      >
-      <PaginationContent>
+    <!-- 分页控件 -->
+    <Pagination
+      :total="total"
+      :items-per-page="pageSize"
+      :sibling-count="1"
+      :show-edges="true"
+      :default-page="currentPage"
+      :page="currentPage"
+      @update:page="handlePageChange"
+      class="shrink-0"
+    >
+      <PaginationContent class="gap-0.5 sm:gap-1">
         <PaginationItem :value="currentPage - 1">
-          <PaginationPrevious :disabled="currentPage <= 1" class="mr-3" @click.prevent.stop="handlePageChange(currentPage - 1)">
-            上一页
+          <PaginationPrevious 
+            :disabled="currentPage <= 1" 
+            class="h-8 w-8 sm:h-9 sm:w-auto sm:px-3 text-xs sm:text-sm p-0 sm:p-2" 
+            @click.prevent.stop="handlePageChange(currentPage - 1)"
+          >
+            <span class="hidden sm:inline">上一页</span>
+            <span class="sm:hidden">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+              </svg>
+            </span>
           </PaginationPrevious>
         </PaginationItem>
 
-        <template v-for="(page, index) in items" :key="index">
+        <template v-for="(page, index) in displayItems" :key="index">
           <PaginationItem v-if="page.type === 'page'" :value="page.value" :is-active="page.value === currentPage">
             <button
               :class="[
-                'h-9 w-9 rounded-md border transition-colors',
+                'h-8 w-8 sm:h-9 sm:w-9 rounded-md border transition-colors text-xs sm:text-sm',
                 page.value === currentPage
                   ? 'bg-primary text-primary-foreground border-primary'
                   : 'border-input bg-background hover:bg-accent hover:text-accent-foreground'
@@ -38,17 +47,25 @@
               {{ page.value }}
             </button>
           </PaginationItem>
-          <PaginationEllipsis v-else-if="page.type === 'ellipsis'" :index="index" />
+          <PaginationEllipsis v-else-if="page.type === 'ellipsis'" :index="index" class="h-8 w-5 sm:h-9 sm:w-9" />
         </template>
 
         <PaginationItem :value="currentPage + 1">
-          <PaginationNext :disabled="currentPage >= totalPages" class="ml-3" @click.prevent.stop="handlePageChange(currentPage + 1)">
-            下一页
+          <PaginationNext 
+            :disabled="currentPage >= totalPages" 
+            class="h-8 w-8 sm:h-9 sm:w-auto sm:px-3 text-xs sm:text-sm p-0 sm:p-2" 
+            @click.prevent.stop="handlePageChange(currentPage + 1)"
+          >
+            <span class="hidden sm:inline">下一页</span>
+            <span class="sm:hidden">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </span>
           </PaginationNext>
         </PaginationItem>
       </PaginationContent>
-      </Pagination>
-    </div>
+    </Pagination>
   </div>
 </template>
 
@@ -126,6 +143,45 @@ const items = computed((): PaginationItem[] => {
   return pages
 })
 
+// 小屏显示项目（更少的页码）
+const displayItems = computed((): PaginationItem[] => {
+  const total = totalPages.value
+  const current = props.currentPage
+  const pages: PaginationItem[] = []
+  
+  if (total <= 5) {
+    // 总页数少，显示所有
+    for (let i = 1; i <= total; i++) {
+      pages.push({ type: 'page', value: i })
+    }
+  } else {
+    // 只显示当前页和相邻页
+    if (current === 1) {
+      pages.push({ type: 'page', value: 1 })
+      pages.push({ type: 'page', value: 2 })
+      pages.push({ type: 'ellipsis' })
+      pages.push({ type: 'page', value: total })
+    } else if (current === total) {
+      pages.push({ type: 'page', value: 1 })
+      pages.push({ type: 'ellipsis' })
+      pages.push({ type: 'page', value: total - 1 })
+      pages.push({ type: 'page', value: total })
+    } else {
+      pages.push({ type: 'page', value: 1 })
+      if (current > 2) {
+        pages.push({ type: 'ellipsis' })
+      }
+      pages.push({ type: 'page', value: current })
+      if (current < total - 1) {
+        pages.push({ type: 'ellipsis' })
+      }
+      pages.push({ type: 'page', value: total })
+    }
+  }
+  
+  return pages
+})
+
 const handlePageChange = (page: number) => {
   if (page !== props.currentPage && page >= 1 && page <= totalPages.value) {
     emit('page-change', page)