From 01dfb49d5b4443adf7d54e2cc27f9ddf91b214b5 Mon Sep 17 00:00:00 2001
From: Feeei <63099604+gudaonanfeng@users.noreply.github.com>
Date: Wed, 24 Sep 2025 18:59:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin-spa):=20=E4=BC=98=E5=8C=96=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=84=E4=BB=B6=E9=80=BB=E8=BE=91=E4=B8=8E=E5=8F=AF?=
 =?UTF-8?q?=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将分页组件中的硬编码条件替换为更具可读性的计算属性，
包括 shouldShowFirstPage、shouldShowLastPage、
showLeadingEllipsis 和 showTrailingEllipsis，
以更清晰地控制分页按钮和省略号的显示逻辑。
---
 web/admin-spa/src/views/ApiKeysView.vue | 32 +++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index 335721ee..36ad6642 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -1375,14 +1375,14 @@
               <div class="flex items-center gap-1">
                 <!-- 第一页 -->
                 <button
-                  v-if="currentPage > 3"
+                  v-if="shouldShowFirstPage"
                   class="hidden rounded-md border border-gray-300 bg-white px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:block"
                   @click="currentPage = 1"
                 >
                   1
                 </button>
                 <span
-                  v-if="currentPage > 4"
+                  v-if="showLeadingEllipsis"
                   class="hidden px-2 text-gray-500 dark:text-gray-400 sm:inline"
                   >...</span
                 >
@@ -1404,12 +1404,12 @@
 
                 <!-- 最后一页 -->
                 <span
-                  v-if="currentPage < totalPages - 3"
+                  v-if="showTrailingEllipsis"
                   class="hidden px-2 text-gray-500 dark:text-gray-400 sm:inline"
                   >...</span
                 >
                 <button
-                  v-if="totalPages > 1 && currentPage < totalPages - 2"
+                  v-if="shouldShowLastPage"
                   class="hidden rounded-md border border-gray-300 bg-white px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:block"
                   @click="currentPage = totalPages"
                 >
@@ -2019,6 +2019,30 @@ const pageNumbers = computed(() => {
   return pages
 })
 
+const shouldShowFirstPage = computed(() => {
+  const pages = pageNumbers.value
+  if (pages.length === 0) return false
+  return pages[0] > 1
+})
+
+const shouldShowLastPage = computed(() => {
+  const pages = pageNumbers.value
+  if (pages.length === 0) return false
+  return pages[pages.length - 1] < totalPages.value
+})
+
+const showLeadingEllipsis = computed(() => {
+  const pages = pageNumbers.value
+  if (pages.length === 0) return false
+  return shouldShowFirstPage.value && pages[0] > 2
+})
+
+const showTrailingEllipsis = computed(() => {
+  const pages = pageNumbers.value
+  if (pages.length === 0) return false
+  return shouldShowLastPage.value && pages[pages.length - 1] < totalPages.value - 1
+})
+
 // 获取分页后的数据
 const paginatedApiKeys = computed(() => {
   const start = (currentPage.value - 1) * pageSize.value