update at 2026-02-07 13:57:01

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useFontLoader } from './composables/useFontLoader'
 import { useUiStore } from './stores/uiStore'
 import { useFontStore } from './stores/fontStore'
@@ -7,17 +7,35 @@ import { MAX_CHARS_PER_LINE, wrapTextByChars } from './utils/text-layout'
 import FontSelector from './components/FontSelector.vue'
 import FavoritesList from './components/FavoritesList.vue'
 import SvgPreview from './components/SvgPreview.vue'
+import selectAllIcon from './assets/icons/selectall.svg'
+import unselectAllIcon from './assets/icons/unselectall.svg'
 
 console.log('App.vue: script setup running...')
 
 const uiStore = useUiStore()
 const fontStore = useFontStore()
 
+type SvgPreviewExpose = {
+  toggleSelectAllPreviewItems: () => void
+}
+
+const svgPreviewRef = ref<SvgPreviewExpose | null>(null)
+
 const fontSizePercent = computed(() => {
   const raw = ((uiStore.fontSize - 10) / (500 - 10)) * 100
   return Math.max(0, Math.min(100, raw))
 })
 
+const isAllPreviewSelected = computed(() => {
+  const previewIds = fontStore.previewFonts.map(font => font.id)
+  if (previewIds.length === 0) {
+    return false
+  }
+
+  const selectedIds = new Set(uiStore.selectedExportItems.map(item => item.fontInfo.id))
+  return previewIds.every(id => selectedIds.has(id))
+})
+
 // 加载字体列表
 try {
   useFontLoader()
@@ -164,6 +182,10 @@ function handleTextInput(event: Event) {
   uiStore.setInputText(wrappedText)
 }
 
+function handleTogglePreviewSelectAll() {
+  svgPreviewRef.value?.toggleSelectAllPreviewItems()
+}
+
 console.log('App.vue: script setup completed')
 </script>
 
@@ -291,9 +313,22 @@ console.log('App.vue: script setup completed')
 
       <!-- Frame 8: 右侧预览区 - 弹性宽度 -->
       <div class="flex-1 border border-solid border-[#f7e0e0] rounded-lg p-1.5 flex flex-col gap-2 overflow-hidden min-w-0">
-        <h2 class="text-base text-black shrink-0 leading-none">效果预览</h2>
+        <div class="flex items-center pr-[9px]">
+          <h2 class="text-base text-black shrink-0 leading-none flex-1">效果预览</h2>
+          <button
+            @click="handleTogglePreviewSelectAll"
+            class="w-4 h-4 shrink-0 p-0 border-0 bg-transparent cursor-pointer hover:opacity-85 transition-opacity"
+            title="效果预览全选/全不选"
+          >
+            <img
+              :src="isAllPreviewSelected ? unselectAllIcon : selectAllIcon"
+              alt="效果预览全选/全不选"
+              class="w-full h-full"
+            />
+          </button>
+        </div>
         <div v-overflow-aware class="scrollbar-hover flex-1 min-h-0 py-2 overflow-y-auto overflow-x-hidden">
-          <SvgPreview />
+          <SvgPreview ref="svgPreviewRef" />
         </div>
       </div>
     </div>