update at 2026-02-07 11:14:09

frontend/src/components/SvgPreview.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useFontStore } from '../stores/fontStore'
+import { useUiStore } from '../stores/uiStore'
+import { generateSvg } from '../utils/svg-builder'
+import type { PreviewItem as PreviewItemType } from '../types/font'
+
+const fontStore = useFontStore()
+const uiStore = useUiStore()
+
+const previewItems = ref<PreviewItemType[]>([])
+const isGenerating = ref(false)
+
+const previewFonts = computed(() => fontStore.previewFonts)
+const inputText = computed(() => uiStore.inputText)
+const fontSize = computed(() => uiStore.fontSize)
+const fillColor = computed(() => uiStore.textColor)
+
+watch(
+  [previewFonts, inputText, fontSize, fillColor],
+  async () => {
+    await generatePreviews()
+  },
+  { immediate: true }
+)
+
+async function generatePreviews() {
+  const validPreviewFontIds = new Set(previewFonts.value.map(font => font.id))
+  uiStore.retainExportItemsByFontIds(validPreviewFontIds)
+
+  if (!inputText.value || inputText.value.trim() === '') {
+    previewItems.value = []
+    return
+  }
+
+  const fonts = previewFonts.value
+  if (fonts.length === 0) {
+    previewItems.value = []
+    return
+  }
+
+  isGenerating.value = true
+
+  try {
+    const items: PreviewItemType[] = []
+
+    for (const fontInfo of fonts) {
+      if (!fontInfo.loaded) {
+        await fontStore.loadFont(fontInfo)
+      }
+
+      if (fontInfo.font) {
+        try {
+          const svgResult = await generateSvg({
+            text: inputText.value,
+            font: fontInfo.font,
+            fontSize: fontSize.value,
+            fillColor: fillColor.value,
+          })
+
+          items.push({
+            fontInfo,
+            svgResult,
+            selected: uiStore.selectedExportItems.some(item => item.fontInfo.id === fontInfo.id)
+          })
+        } catch (error) {
+          console.error(`Failed to generate SVG for ${fontInfo.name}:`, error)
+        }
+      }
+    }
+
+    previewItems.value = items
+  } catch (error) {
+    console.error('Failed to generate previews:', error)
+  } finally {
+    isGenerating.value = false
+  }
+}
+
+function toggleSelectItem(item: PreviewItemType) {
+  item.selected = !item.selected
+  uiStore.toggleExportItem(item)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <div v-if="previewItems.length === 0" class="text-[#86909c] text-center py-20">
+      {{ isGenerating ? '生成预览中...' : '请选择字体并输入内容' }}
+    </div>
+
+    <div v-else class="flex flex-col gap-2">
+      <div
+        v-for="item in previewItems"
+        :key="item.fontInfo.id"
+        class="flex flex-col gap-2"
+      >
+        <div class="flex items-center gap-[8px] border-b border-[#c9cdd4] pb-[8px] pr-[8px]">
+          <div class="w-[24px] h-[24px] shrink-0">
+            <img src="/assets/icons/icons_idx%20_32.svg" alt="字体" class="w-full h-full" />
+          </div>
+
+          <div class="flex-1 text-xs text-[#86909c]">
+            {{ item.fontInfo.name }}
+          </div>
+
+          <button
+            @click="toggleSelectItem(item)"
+            class="w-[18px] h-[18px] shrink-0 border rounded-full flex items-center justify-center p-0 bg-transparent"
+            :class="item.selected ? 'bg-[#9b6bc2] border-[#9b6bc2]' : 'border-[#c9cdd4]'"
+          >
+            <img v-if="item.selected" src="/assets/icons/checkbox.svg" alt="选中" class="w-[11px] h-[9px]" />
+          </button>
+        </div>
+
+        <div 
+          @click="toggleSelectItem(item)"
+          class="bg-white px-[8px] py-[8px] cursor-pointer"
+        >
+          <div v-html="item.svgResult.svg" class="svg-preview-container"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.svg-preview-container {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.svg-preview-container :deep(svg) {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: none;
+}
+</style>