From 0c6dc66191e0d0c3e43090828ccae366d7415e57 Mon Sep 17 00:00:00 2001
From: SigureMo <sigure.qaq@gmail.com>
Date: Sat, 20 Dec 2025 12:09:14 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20support=20fold=20pagination?=
 =?UTF-8?q?=20as=20`...`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/.vitepress/theme/Pagination.vue | 44 +++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/.vitepress/theme/Pagination.vue b/src/.vitepress/theme/Pagination.vue
index 2ab3aa8..8852d5e 100644
--- a/src/.vitepress/theme/Pagination.vue
+++ b/src/.vitepress/theme/Pagination.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { withBase, useRoute } from 'vitepress'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import type { Ref } from 'vue'
 import { getCurrentCategory } from './utils/categoryUtils.client.js'
 
@@ -26,20 +26,40 @@ function getPageLink(pageNum: number) {
 
   return withBase(basePath)
 }
+
+const pages = computed(() => {
+  if (numPages <= 7) {
+    return Array.from({ length: numPages }, (_, i) => i + 1)
+  }
+
+  if (pageIndex <= 4) {
+    return [1, 2, 3, 4, 5, '...', numPages]
+  }
+
+  if (pageIndex >= numPages - 3) {
+    return [1, '...', numPages - 4, numPages - 3, numPages - 2, numPages - 1, numPages]
+  }
+
+  return [1, '...', pageIndex - 1, pageIndex, pageIndex + 1, '...', numPages]
+})
 </script>
 
 <template>
   <div class="flex justify-center space-x-2 py-4">
-    <a
-      class="px-3 py-2 rounded-md font-bold hover:outline outline-green-700"
-      :class="{
-        'bg-green-200 dark:bg-green-700': pageIndex === i,
-        'text-green-700 dark:text-green-300': pageIndex !== i,
-      }"
-      v-for="i in numPages"
-      :key="i"
-      :href="getPageLink(i)"
-      >{{ i }}</a
-    >
+    <template v-for="(item, index) in pages" :key="index">
+      <a
+        v-if="typeof item === 'number'"
+        class="px-3 py-2 rounded-md font-bold hover:outline outline-green-700"
+        :class="{
+          'bg-green-200 dark:bg-green-700': pageIndex === item,
+          'text-green-700 dark:text-green-300': pageIndex !== item,
+        }"
+        :href="getPageLink(item)"
+        >{{ item }}</a
+      >
+      <span v-else class="px-3 py-2 rounded-md font-bold text-green-700 dark:text-green-300">
+        ...
+      </span>
+    </template>
   </div>
 </template>