update at 2026-02-11 19:45:21

frontend/dist/assets/download-41WDAf4j.js

@@ -1 +1 @@
-import{_ as v}from"./index-BmmuJa01.js";function p(t,e,n="text/plain"){const o=new Blob([t],{type:n});s(o,e)}function s(t,e){const n=URL.createObjectURL(t),o=document.createElement("a");o.href=n,o.download=e,document.body.appendChild(o),o.click(),document.body.removeChild(o),URL.revokeObjectURL(n)}function P(t,e){p(t,e,"image/svg+xml")}async function F(t,e="font2svg-export.zip"){const n=(await v(async()=>{const{default:r}=await import("./jszip.min-D7KnG0-e.js").then(i=>i.j);return{default:r}},[])).default,o=new n;for(const r of t)o.file(r.name,r.content);const a=await o.generateAsync({type:"blob"});s(a,e)}function d(t){if(!t)return null;const e=t.match(/-?\d+(\.\d+)?/);if(!e)return null;const n=Number(e[0]);return Number.isFinite(n)?n:null}function x(t){const n=new DOMParser().parseFromString(t,"image/svg+xml").documentElement,o=d(n.getAttribute("width")),a=d(n.getAttribute("height"));if(o&&a)return{width:o,height:a};const r=n.getAttribute("viewBox");if(r){const i=r.trim().split(/[\s,]+/).map(Number);if(i.length===4&&Number.isFinite(i[2])&&Number.isFinite(i[3]))return{width:Math.max(1,i[2]),height:Math.max(1,i[3])}}return{width:1024,height:1024}}async function _(t,e){const n=x(t),o=e?.scale??1,a=Math.max(1,Math.round((e?.width??n.width)*o)),r=Math.max(1,Math.round((e?.height??n.height)*o)),i=document.createElement("canvas");i.width=a,i.height=r;const l=i.getContext("2d");if(!l)throw new Error("无法创建 PNG 画布");e?.backgroundColor?(l.fillStyle=e.backgroundColor,l.fillRect(0,0,a,r)):l.clearRect(0,0,a,r);const f=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),u=URL.createObjectURL(f);try{const c=new Image;await new Promise((w,b)=>{c.onload=()=>w(),c.onerror=()=>b(new Error("SVG 转 PNG 失败")),c.src=u}),l.drawImage(c,0,0,a,r)}finally{URL.revokeObjectURL(u)}const g=await new Promise(c=>{i.toBlob(c,"image/png")});if(!g)throw new Error("PNG 编码失败");return g}async function R(t,e,n){const o=await _(t,n);s(o,e)}function m(t){return t.replace(/[<>:"/\\|?*\x00-\x1F]/g,"_").replace(/\s+/g,"_").substring(0,200)}function h(t,e){const n=m(Array.from(t).slice(0,8).join(""));return`${m(e.substring(0,20))}_${n}`}function B(t,e){return`${h(t,e)}.svg`}function L(t,e){return`${h(t,e)}.png`}export{_ as convertSvgToPngBlob,s as downloadBlob,F as downloadMultipleFiles,R as downloadPngFromSvg,P as downloadSvg,p as downloadText,L as generatePngFilename,B as generateSvgFilename,m as sanitizeFilename};
+import{_ as v}from"./index-BQvKL846.js";function p(t,e,n="text/plain"){const o=new Blob([t],{type:n});s(o,e)}function s(t,e){const n=URL.createObjectURL(t),o=document.createElement("a");o.href=n,o.download=e,document.body.appendChild(o),o.click(),document.body.removeChild(o),URL.revokeObjectURL(n)}function P(t,e){p(t,e,"image/svg+xml")}async function F(t,e="font2svg-export.zip"){const n=(await v(async()=>{const{default:r}=await import("./jszip.min-D7KnG0-e.js").then(i=>i.j);return{default:r}},[])).default,o=new n;for(const r of t)o.file(r.name,r.content);const a=await o.generateAsync({type:"blob"});s(a,e)}function d(t){if(!t)return null;const e=t.match(/-?\d+(\.\d+)?/);if(!e)return null;const n=Number(e[0]);return Number.isFinite(n)?n:null}function x(t){const n=new DOMParser().parseFromString(t,"image/svg+xml").documentElement,o=d(n.getAttribute("width")),a=d(n.getAttribute("height"));if(o&&a)return{width:o,height:a};const r=n.getAttribute("viewBox");if(r){const i=r.trim().split(/[\s,]+/).map(Number);if(i.length===4&&Number.isFinite(i[2])&&Number.isFinite(i[3]))return{width:Math.max(1,i[2]),height:Math.max(1,i[3])}}return{width:1024,height:1024}}async function _(t,e){const n=x(t),o=e?.scale??1,a=Math.max(1,Math.round((e?.width??n.width)*o)),r=Math.max(1,Math.round((e?.height??n.height)*o)),i=document.createElement("canvas");i.width=a,i.height=r;const l=i.getContext("2d");if(!l)throw new Error("无法创建 PNG 画布");e?.backgroundColor?(l.fillStyle=e.backgroundColor,l.fillRect(0,0,a,r)):l.clearRect(0,0,a,r);const f=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),u=URL.createObjectURL(f);try{const c=new Image;await new Promise((w,b)=>{c.onload=()=>w(),c.onerror=()=>b(new Error("SVG 转 PNG 失败")),c.src=u}),l.drawImage(c,0,0,a,r)}finally{URL.revokeObjectURL(u)}const g=await new Promise(c=>{i.toBlob(c,"image/png")});if(!g)throw new Error("PNG 编码失败");return g}async function R(t,e,n){const o=await _(t,n);s(o,e)}function m(t){return t.replace(/[<>:"/\\|?*\x00-\x1F]/g,"_").replace(/\s+/g,"_").substring(0,200)}function h(t,e){const n=m(Array.from(t).slice(0,8).join(""));return`${m(e.substring(0,20))}_${n}`}function B(t,e){return`${h(t,e)}.svg`}function L(t,e){return`${h(t,e)}.png`}export{_ as convertSvgToPngBlob,s as downloadBlob,F as downloadMultipleFiles,R as downloadPngFromSvg,P as downloadSvg,p as downloadText,L as generatePngFilename,B as generateSvgFilename,m as sanitizeFilename};

frontend/dist/index.html

@@ -8,8 +8,8 @@
     <link rel="apple-touch-icon" href="/favicon_new.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Font2SVG - 字体转SVG工具</title>
-    <script type="module" crossorigin src="/assets/index-BmmuJa01.js"></script>
+    <script type="module" crossorigin src="/assets/index-BQvKL846.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CujgoJOQ.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-DsyZxj_9.css">
   </head>
   <body>
     <div id="app"></div>

frontend/src/components/SvgPreview.vue

@@ -418,9 +418,11 @@ async function loadNextPreviewBatch(generationToken: number) {
       activePreviewFonts.value.length,
     )
 
-    previewItems.value = [...previewItems.value, ...batchItems.items]
+    const existingIds = new Set(previewItems.value.map(item => item.fontInfo.id))
+    const uniqueBatchItems = batchItems.items.filter(item => !existingIds.has(item.fontInfo.id))
+    previewItems.value = [...previewItems.value, ...uniqueBatchItems]
     renderedPreviewCount.value = Math.min(
-      renderedPreviewCount.value + PREVIEW_BATCH_SIZE,
+      renderedPreviewCount.value + uniqueBatchItems.length,
       previewItems.value.length,
     )
 
@@ -440,6 +442,90 @@ async function loadNextPreviewBatch(generationToken: number) {
   }
 }
 
+async function syncPreviewFontsIncrementally(previousFonts: FontInfo[]) {
+  const generationToken = ++previewGenerationToken
+  const nextPreviewFonts = [...previewFonts.value]
+  const validPreviewFontIds = new Set(nextPreviewFonts.map(font => font.id))
+  uiStore.retainExportItemsByFontIds(validPreviewFontIds)
+
+  activePreviewFonts.value = nextPreviewFonts
+  previewErrorMessage.value = ''
+
+  if (!inputText.value || inputText.value.trim() === '' || nextPreviewFonts.length === 0) {
+    previewItems.value = []
+    renderedPreviewCount.value = 0
+    processedFontCount.value = 0
+    isGenerating.value = false
+    isBatchGenerating.value = false
+    batchOwnerToken = null
+    return
+  }
+
+  const nextIdSet = new Set(nextPreviewFonts.map(font => font.id))
+  const previousIdSet = new Set(previousFonts.map(font => font.id))
+  const addedFonts = nextPreviewFonts.filter(font => !previousIdSet.has(font.id))
+
+  previewItems.value = previewItems.value.filter(item => nextIdSet.has(item.fontInfo.id))
+  renderedPreviewCount.value = Math.min(renderedPreviewCount.value, previewItems.value.length)
+  processedFontCount.value = Math.min(processedFontCount.value, nextPreviewFonts.length)
+
+  if (addedFonts.length > 0) {
+    if (previewItems.value.length === 0) {
+      isGenerating.value = true
+    }
+
+    try {
+      const addedBatch = await generatePreviewBatch(
+        addedFonts,
+        0,
+        addedFonts.length,
+        generationToken,
+      )
+      if (isStaleGeneration(generationToken)) {
+        return
+      }
+
+      const existingIds = new Set(previewItems.value.map(item => item.fontInfo.id))
+      const uniqueAddedItems = addedBatch.items.filter(item => !existingIds.has(item.fontInfo.id))
+      if (uniqueAddedItems.length > 0) {
+        // 新勾选字体插到顶部，避免全量刷新带来的闪烁。
+        previewItems.value = [...uniqueAddedItems, ...previewItems.value]
+        renderedPreviewCount.value = Math.min(
+          renderedPreviewCount.value + uniqueAddedItems.length,
+          previewItems.value.length,
+        )
+      }
+
+      if (addedBatch.errors.length > 0 && previewItems.value.length === 0) {
+        previewErrorMessage.value = `预览生成失败：${addedBatch.errors[0]}`
+      }
+    } catch (error) {
+      console.error('Failed to incrementally load preview fonts:', error)
+      previewErrorMessage.value = `预览生成失败：${error instanceof Error ? error.message : String(error)}`
+    } finally {
+      if (!isStaleGeneration(generationToken)) {
+        isGenerating.value = false
+      }
+    }
+  }
+
+  if (
+    !isStaleGeneration(generationToken) &&
+    previewItems.value.length === 0 &&
+    processedFontCount.value < activePreviewFonts.value.length &&
+    !isBatchGenerating.value
+  ) {
+    isGenerating.value = true
+    try {
+      await loadNextPreviewBatch(generationToken)
+    } finally {
+      if (!isStaleGeneration(generationToken)) {
+        isGenerating.value = false
+      }
+    }
+  }
+}
+
 async function handleLoadMoreByScroll() {
   const generationToken = previewGenerationToken
 
@@ -511,12 +597,34 @@ async function regeneratePreviews() {
 }
 
 watch(
-  [previewFonts, inputText, () => uiStore.letterSpacing],
+  previewFonts,
+  (nextFonts, previousFonts) => {
+    if (!hasTriggeredInitialGenerate || !previousFonts) {
+      scheduleGeneratePreviews(false)
+      hasTriggeredInitialGenerate = true
+      return
+    }
+
+    const previousIds = new Set(previousFonts.map(font => font.id))
+    if (
+      nextFonts.length === previousFonts.length &&
+      nextFonts.every(font => previousIds.has(font.id))
+    ) {
+      return
+    }
+
+    void syncPreviewFontsIncrementally(previousFonts)
+    hasTriggeredInitialGenerate = true
+  },
+  { immediate: true },
+)
+
+watch(
+  [inputText, () => uiStore.letterSpacing],
   () => {
     scheduleGeneratePreviews(hasTriggeredInitialGenerate)
     hasTriggeredInitialGenerate = true
   },
-  { immediate: true },
 )
 
 watch(