141 lines
3.8 KiB
Vue
141 lines
3.8 KiB
Vue
<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>
|