优化快速添加在某些电脑上的卡顿问题

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">
+    <div class="pqa-tags" ref="tagsContainer" @scroll="onScroll">
-      <button v-for="tag in filteredTags" :key="tag.key" class="pqa-tag" @click="onTagClick(tag)" @mousedown.prevent
+      <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>