From e172e040f9578efc6ff7aa741ee534c654cd1466 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 21 Apr 2026 00:42:29 +0800
Subject: [PATCH] fix the page navigation did not work correctly when clicking
 page numbers above 1000

---
 src/components/desktop/PaginationButtons.vue | 25 +++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/desktop/PaginationButtons.vue b/src/components/desktop/PaginationButtons.vue
index a44d69df..7a5f668b 100644
--- a/src/components/desktop/PaginationButtons.vue
+++ b/src/components/desktop/PaginationButtons.vue
@@ -10,17 +10,17 @@
                    :disabled="disabled"
                    :icon="true"
                    :color="isActive ? 'primary' : 'default'"
-                   @click="currentPage = parseInt(page)"
-                   v-if="page !== '...'"
+                   @click="currentPage = key;"
+                   v-if="isNumber(key)"
             >
-                <span>{{ formatNumberToLocalizedNumerals(parseInt(page)) }}</span>
+                <span>{{ formatNumberToLocalizedNumerals(key) }}</span>
             </v-btn>
             <v-btn variant="text"
                    color="default"
                    :density="density"
                    :disabled="disabled"
                    :icon="true"
-                   v-if="page === '...'"
+                   v-if="!isNumber(key)"
             >
                 <span>{{ page }}</span>
                 <v-menu activator="parent"
@@ -30,12 +30,13 @@
                     <v-list>
                         <v-list-item class="text-sm" :density="density">
                             <v-list-item-title class="cursor-pointer">
-                                <v-autocomplete width="100"
+                                <v-autocomplete width="110"
                                                 item-title="name"
                                                 item-value="value"
-                                                auto-select-first="exact"
+                                                auto-select-first
                                                 :density="density"
                                                 :items="allPages"
+                                                :custom-filter="customFilter"
                                                 :no-data-text="tt('No results')"
                                                 v-model="currentPage"/>
                             </v-list-item-title>
@@ -49,10 +50,13 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import type { InternalItem, FilterMatch } from 'vuetify/lib/composables/filter.d.ts';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import { type NameNumeralValue, keys } from '@/core/base.ts';
+
+import { isNumber } from '@/lib/common.ts';
 import type { ComponentDensity } from '@/lib/ui/desktop.ts';
 
 const props = defineProps<{
@@ -93,4 +97,13 @@ const currentPage = computed<number>({
         }
     }
 });
+
+function customFilter(value: string, query: string, item?: InternalItem): FilterMatch {
+    if (!item) {
+        return false;
+    }
+
+    const page = item.value as number;
+    return page.toString(10).includes(query);
+}
 </script>