From dce07797b340b2dc0f0a95436340c5cb123f209b Mon Sep 17 00:00:00 2001
From: kjqwer <2990346238@qq.com>
Date: Sun, 7 Dec 2025 21:39:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BF=AB=E9=80=9F=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=9C=A8=E6=9F=90=E4=BA=9B=E7=94=B5=E8=84=91=E4=B8=8A?=
 =?UTF-8?q?=E7=9A=84=E5=8D=A1=E9=A1=BF=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PromptQuickAdd.vue | 43 ++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/PromptQuickAdd.vue b/src/components/PromptQuickAdd.vue
index 39e2698..68f173c 100644
--- a/src/components/PromptQuickAdd.vue
+++ b/src/components/PromptQuickAdd.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { usePromptStore } from '../stores/promptStore';
 import type { PromptTag } from '../types';
 
@@ -14,6 +14,32 @@ const currentGroup = computed(() => store.currentGroup);
 const filteredTags = computed(() => store.filteredTags);
 const selectedLang = computed(() => store.selectedLang);
 
+const PAGE_SIZE = 50;
+const visibleCount = ref(PAGE_SIZE);
+const tagsContainer = ref<HTMLElement | null>(null);
+
+const visibleTags = computed(() => {
+  return filteredTags.value.slice(0, visibleCount.value);
+});
+
+watch(() => filteredTags.value, () => {
+  visibleCount.value = PAGE_SIZE;
+  if (tagsContainer.value) {
+    tagsContainer.value.scrollTop = 0;
+  }
+});
+
+function onScroll() {
+  const el = tagsContainer.value;
+  if (!el) return;
+  // Simple infinite scroll trigger
+  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 100) {
+    if (visibleCount.value < filteredTags.value.length) {
+      visibleCount.value += PAGE_SIZE;
+    }
+  }
+}
+
 function selectCategory(index: number) {
   store.selectCategory(index);
 }
@@ -56,8 +82,8 @@ function displayTrans(tag: PromptTag) {
     </div>
 
     <!-- Tags -->
-    <div class="pqa-tags">
-      <button v-for="tag in filteredTags" :key="tag.key" class="pqa-tag" @click="onTagClick(tag)" @mousedown.prevent
+    <div class="pqa-tags" ref="tagsContainer" @scroll="onScroll">
+      <button v-for="tag in visibleTags" :key="tag.key" class="pqa-tag" @click="onTagClick(tag)" @mousedown.prevent
         :title="tag.key">
         <span class="pqa-tag-text">{{ displayTrans(tag) }}</span>
         <span class="pqa-tag-sub" v-if="displayTrans(tag) !== tag.key">{{ tag.key }}</span>
@@ -65,6 +91,9 @@ function displayTrans(tag: PromptTag) {
       <div v-if="filteredTags.length === 0" class="pqa-empty">
         无相关提示词
       </div>
+      <div v-if="visibleCount < filteredTags.length" class="pqa-loading-more">
+        ...
+      </div>
     </div>
   </div>
 </template>
@@ -235,4 +264,12 @@ function displayTrans(tag: PromptTag) {
   font-size: 0.8rem;
   padding: 2rem;
 }
+
+.pqa-loading-more {
+  width: 100%;
+  text-align: center;
+  color: var(--color-text-tertiary);
+  padding: 0.5rem;
+  font-size: 0.8rem;
+}
 </style>