gavin/font2pic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

update at 2026-02-07 12:55:25

Browse Source
This commit is contained in:
douboer
2026-02-07 12:55:25 +08:00
parent eb2ad134d3
commit 5036daea3e
38 changed files with 56 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/App.vue
View File

@@ -62,9 +62,15 @@ async function handleExport(format: ExportFormat) {
if (selectedItems.length === 1) {
// 单个字体，直接下载 SVG
const item = selectedItems[0]
if (!item?.fontInfo.font) {
alert('选中字体未加载完成，请稍后重试')
return
}
const font = item.fontInfo.font
const svgResult = await generateSvg({
text: inputText,
font: item.fontInfo.font,
font,
fontSize: uiStore.fontSize,
fillColor: uiStore.textColor,
letterSpacing: 0
@@ -87,9 +93,15 @@ async function handleExport(format: ExportFormat) {
for (const item of selectedItems) {
try {
const font = item.fontInfo.font
if (!font) {
console.warn(`字体 ${item.fontInfo.name} 尚未加载，已跳过导出`)
continue
}
const svgResult = await generateSvg({
text: inputText,
font: item.fontInfo.font,
font,
fontSize: uiStore.fontSize,
fillColor: uiStore.textColor,
letterSpacing: 0
@@ -161,12 +173,12 @@ console.log('App.vue: script setup completed')
<div class="flex gap-2 items-center shrink-0 h-24 px-2 py-1">
<!-- webicon - 48x48 -->
<div class="w-12 h-12 rounded-xl overflow-hidden shrink-0">
<img src="/assets/webicon.svg" alt="logo" class="w-full h-full object-cover" />
<img src="./assets/webicon.svg" alt="logo" class="w-full h-full object-cover" />
</div>
<!-- 星程字体转换 - 弹性宽度 -->
<div class="shrink-0 max-w-[225px] min-w-[120px]" style="height: 72px;">
<img src="/assets/icons/星程字体转换.svg" alt="星程SVG文字生成 TEXT to SVG" class="w-full h-full object-contain" />
<img src="./assets/icons/星程字体转换.svg" alt="星程SVG文字生成 TEXT to SVG" class="w-full h-full object-contain" />
</div>
<!-- slider - 增加宽度 -->
@@ -176,7 +188,7 @@ console.log('App.vue: script setup completed')
class="w-4 h-4 shrink-0 cursor-pointer hover:opacity-70 transition-opacity flex items-center justify-center p-0 border-0 bg-transparent"
title="减小字体"
>
<img src="/assets/icons/icons_idx%20_38.svg" alt="A-" class="w-4 h-4 object-contain" />
<img src="./assets/icons/icons_idx%20_38.svg" alt="A-" class="w-4 h-4 object-contain" />
</button>
<div class="flex-1 h-6 flex items-center relative">
<input
@@ -204,14 +216,14 @@ console.log('App.vue: script setup completed')
class="w-6 h-6 shrink-0 cursor-pointer hover:opacity-70 transition-opacity flex items-center justify-center p-0 border-0 bg-transparent"
title="增大字体"
>
<img src="/assets/icons/icons_idx%20_33.svg" alt="A+" class="w-6 h-6 object-contain" />
<img src="./assets/icons/icons_idx%20_33.svg" alt="A+" class="w-6 h-6 object-contain" />
</button>
</div>
<!-- 文字颜色选择 -->
<div class="shrink-0 relative w-9 h-9">
<label class="w-full h-full flex items-center justify-center cursor-pointer">
<img src="/assets/icons/choose-color.svg" alt="颜色" class="w-9 h-9 object-contain" />
<img src="./assets/icons/choose-color.svg" alt="颜色" class="w-9 h-9 object-contain" />
<input
type="color"
:value="uiStore.textColor"
@@ -235,7 +247,7 @@ console.log('App.vue: script setup completed')
<!-- Export Group -->
<div class="flex items-center gap-1 shrink-0 border border-[#8552A1] rounded-lg px-1 py-1 bg-[#f7f8fa] shadow-sm">
<div class="w-[18px] h-[42px] shrink-0 pointer-events-none">
<img src="/assets/icons/export.svg" alt="导出" class="w-full h-full object-contain" />
<img src="./assets/icons/export.svg" alt="导出" class="w-full h-full object-contain" />
</div>
<button
@@ -243,7 +255,7 @@ console.log('App.vue: script setup completed')
class="w-12 h-12 shrink-0 cursor-pointer hover:opacity-85 transition-opacity flex items-center justify-center p-0 border-0 bg-transparent"
title="导出 SVG"
>
<img src="/assets/icons/export-svg.svg" alt="导出SVG" class="w-12 h-12 object-contain" />
<img src="./assets/icons/export-svg.svg" alt="导出SVG" class="w-12 h-12 object-contain" />
</button>
<button
@@ -251,7 +263,7 @@ console.log('App.vue: script setup completed')
class="w-12 h-12 shrink-0 cursor-pointer hover:opacity-85 transition-opacity flex items-center justify-center p-0 border-0 bg-transparent"
title="导出 PNG"
>
<img src="/assets/icons/export-png.svg" alt="导出PNG" class="w-12 h-12 object-contain" />
<img src="./assets/icons/export-png.svg" alt="导出PNG" class="w-12 h-12 object-contain" />
</button>
</div>
</div>