From 6733ce3e9f5ed887326c142d279119ac047fb23d Mon Sep 17 00:00:00 2001
From: douboer <douboer@gmail.com>
Date: Sat, 7 Feb 2026 14:54:45 +0800
Subject: [PATCH] update at 2026-02-07 14:54:45

---
 frontend/src/components/SvgPreview.vue | 112 +++++++++++++++++++++----
 frontend/src/stores/fontStore.ts       |  35 +++++---
 2 files changed, 121 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/SvgPreview.vue b/frontend/src/components/SvgPreview.vue
index 6b87107..20d6c6b 100644
--- a/frontend/src/components/SvgPreview.vue
+++ b/frontend/src/components/SvgPreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { useFontStore } from '../stores/fontStore'
 import { useUiStore } from '../stores/uiStore'
 import { generateSvg } from '../utils/svg-builder'
@@ -15,44 +15,112 @@ const previewFonts = computed(() => fontStore.previewFonts)
 const inputText = computed(() => uiStore.inputText)
 const fontSize = computed(() => uiStore.fontSize)
 const fillColor = computed(() => uiStore.textColor)
+const PREVIEW_DEBOUNCE_MS = 240
+const PREVIEW_CONCURRENCY = 4
+let previewGenerateTimer: ReturnType<typeof setTimeout> | null = null
+let previewGenerationToken = 0
+let hasTriggeredInitialGenerate = false
+
 const isAllPreviewSelected = computed(() => {
   return previewItems.value.length > 0 && previewItems.value.every(item => item.selected)
 })
 
+function isStaleGeneration(token: number): boolean {
+  return token !== previewGenerationToken
+}
+
+function scheduleGeneratePreviews(withDebounce = true) {
+  if (previewGenerateTimer !== null) {
+    clearTimeout(previewGenerateTimer)
+    previewGenerateTimer = null
+  }
+
+  if (!withDebounce) {
+    void generatePreviews()
+    return
+  }
+
+  previewGenerateTimer = setTimeout(() => {
+    previewGenerateTimer = null
+    void generatePreviews()
+  }, PREVIEW_DEBOUNCE_MS)
+}
+
 watch(
   [previewFonts, inputText, fontSize, fillColor],
-  async () => {
-    await generatePreviews()
+  () => {
+    scheduleGeneratePreviews(hasTriggeredInitialGenerate)
+    hasTriggeredInitialGenerate = true
   },
   { immediate: true }
 )
 
+onBeforeUnmount(() => {
+  if (previewGenerateTimer !== null) {
+    clearTimeout(previewGenerateTimer)
+    previewGenerateTimer = null
+  }
+  previewGenerationToken += 1
+})
+
 async function generatePreviews() {
+  const generationToken = ++previewGenerationToken
   const validPreviewFontIds = new Set(previewFonts.value.map(font => font.id))
   uiStore.retainExportItemsByFontIds(validPreviewFontIds)
 
   if (!inputText.value || inputText.value.trim() === '') {
-    previewItems.value = []
+    if (!isStaleGeneration(generationToken)) {
+      previewItems.value = []
+    }
     return
   }
 
   const fonts = previewFonts.value
   if (fonts.length === 0) {
-    previewItems.value = []
+    if (!isStaleGeneration(generationToken)) {
+      previewItems.value = []
+    }
     return
   }
 
   isGenerating.value = true
 
   try {
-    const items: PreviewItemType[] = []
+    const selectedFontIdSet = new Set(uiStore.selectedExportItems.map(item => item.fontInfo.id))
+    const items = new Array<PreviewItemType | null>(fonts.length).fill(null)
+    const workerCount = Math.min(PREVIEW_CONCURRENCY, fonts.length)
+    let nextIndex = 0
 
-    for (const fontInfo of fonts) {
-      if (!fontInfo.loaded) {
-        await fontStore.loadFont(fontInfo)
-      }
+    const worker = async () => {
+      while (true) {
+        if (isStaleGeneration(generationToken)) {
+          return
+        }
+
+        const currentIndex = nextIndex
+        nextIndex += 1
+        if (currentIndex >= fonts.length) {
+          return
+        }
+
+        const fontInfo = fonts[currentIndex]
+        if (!fontInfo) {
+          continue
+        }
+
+        if (!fontInfo.loaded) {
+          try {
+            await fontStore.loadFont(fontInfo)
+          } catch (error) {
+            console.error(`Failed to load font ${fontInfo.name}:`, error)
+            continue
+          }
+        }
+
+        if (isStaleGeneration(generationToken) || !fontInfo.font) {
+          continue
+        }
 
-      if (fontInfo.font) {
         try {
           const svgResult = await generateSvg({
             text: inputText.value,
@@ -61,22 +129,34 @@ async function generatePreviews() {
             fillColor: fillColor.value,
           })
 
-          items.push({
+          if (isStaleGeneration(generationToken)) {
+            return
+          }
+
+          items[currentIndex] = {
             fontInfo,
             svgResult,
-            selected: uiStore.selectedExportItems.some(item => item.fontInfo.id === fontInfo.id)
-          })
+            selected: selectedFontIdSet.has(fontInfo.id),
+          }
         } catch (error) {
           console.error(`Failed to generate SVG for ${fontInfo.name}:`, error)
         }
       }
     }
 
-    previewItems.value = items
+    await Promise.all(Array.from({ length: workerCount }, () => worker()))
+
+    if (isStaleGeneration(generationToken)) {
+      return
+    }
+
+    previewItems.value = items.filter((item): item is PreviewItemType => item !== null)
   } catch (error) {
     console.error('Failed to generate previews:', error)
   } finally {
-    isGenerating.value = false
+    if (!isStaleGeneration(generationToken)) {
+      isGenerating.value = false
+    }
   }
 }
 
diff --git a/frontend/src/stores/fontStore.ts b/frontend/src/stores/fontStore.ts
index 620fdc0..db5ddb8 100644
--- a/frontend/src/stores/fontStore.ts
+++ b/frontend/src/stores/fontStore.ts
@@ -31,6 +31,7 @@ export const useFontStore = defineStore('font', () => {
   const expandedCategoryNames = ref<Set<string>>(readSet('font.expandedCategories'))
   const fontTree = ref<FontTreeNode[]>([])
   const isLoadingFonts = ref(false)
+  const loadingFontTasks = new Map<string, Promise<void>>()
 
   // 计算属性
   const selectedFonts = computed(() => {
@@ -151,17 +152,31 @@ export const useFontStore = defineStore('font', () => {
       return
     }
 
-    try {
-      const font = await loadFontWithProgress(fontInfo.path, (progress) => {
-        fontInfo.progress = progress
-      })
-      fontInfo.font = font
-      fontInfo.loaded = true
-      fontInfo.progress = 100
-    } catch (error) {
-      console.error(`Failed to load font ${fontInfo.name}:`, error)
-      throw error
+    const existingTask = loadingFontTasks.get(fontInfo.id)
+    if (existingTask) {
+      await existingTask
+      return
     }
+
+    const loadingTask = (async () => {
+      try {
+        const font = await loadFontWithProgress(fontInfo.path, (progress) => {
+          fontInfo.progress = progress
+        })
+        fontInfo.font = font
+        fontInfo.loaded = true
+        fontInfo.progress = 100
+      } catch (error) {
+        console.error(`Failed to load font ${fontInfo.name}:`, error)
+        throw error
+      } finally {
+        loadingFontTasks.delete(fontInfo.id)
+      }
+    })()
+
+    loadingFontTasks.set(fontInfo.id, loadingTask)
+
+    await loadingTask
   }
 
   function buildFontTree(fontList: FontInfo[]): FontTreeNode[] {