Skip to content

Commit fbbf4ff

Browse files
naroatnaroat
committed
feat: 添加常见问题,修复svg导出后没有渐变效果和字体样式问题
1 parent cc5c1c0 commit fbbf4ff

File tree

1 file changed

+131
-9
lines changed

1 file changed

+131
-9
lines changed

‎index.html

+131-9
Original file line numberDiff line numberDiff line change
@@ -418,6 +418,37 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
418418
</span>
419419
</div>
420420
</div>
421+
422+
<!-- 修改 FAQ 部分的展示方式 -->
423+
<h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-l-4 border-pink-500 mt-12">
424+
{{ t.faq.title }}
425+
</h2>
426+
<div class="space-y-4">
427+
<div v-for="(qa, index) in t.faq.items"
428+
class="bg-white rounded-xl md:rounded-2xl shadow-lg overflow-hidden">
429+
<!-- 问题标题（可点击区域） -->
430+
<button @click="toggleFaq(index)"
431+
class="w-full p-4 md:p-6 flex justify-between items-center hover:bg-gray-50 transition-colors">
432+
<h3 class="text-lg font-semibold text-gray-800 text-left">{{ qa.q }}</h3>
433+
<!-- 箭头图标 -->
434+
<svg class="w-5 h-5 text-gray-500 transition-transform duration-300"
435+
:class="{ 'rotate-180': faqOpenState[index] }"
436+
fill="none"
437+
stroke="currentColor"
438+
viewBox="0 0 24 24">
439+
<path stroke-linecap="round"
440+
stroke-linejoin="round"
441+
stroke-width="2"
442+
d="M19 9l-7 7-7-7"/>
443+
</svg>
444+
</button>
445+
<!-- 答案内容（折叠面板） -->
446+
<div v-show="faqOpenState[index]"
447+
class="px-4 md:px-6 pb-4 md:pb-6 text-gray-600 border-t border-gray-100">
448+
<p class="pt-4">{{ qa.a }}</p>
449+
</div>
450+
</div>
451+
</div>
421452
</div>
422453

423454
<!-- 页脚 -->
@@ -514,6 +545,36 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
514545
'Free to use'
515546
]
516547
}
548+
},
549+
faq: {
550+
title: 'FAQ',
551+
items: [
552+
{
553+
q: 'How do I add favicon to my website?',
554+
a: 'You can download the favicon.ico file and upload it to your website root directory. Then, add the following code to the <head> section of the HTML file: <link rel="icon" href="/favicon.ico" type="image/x-icon">',
555+
isOpen: false
556+
},
557+
{
558+
q: 'What file formats are available for export?',
559+
a: 'We support PNG (various sizes), SVG (vector format), and ICO (favicon) exports. PNG is best for general use, SVG for scalable graphics, and ICO for website favicons.',
560+
isOpen: false
561+
},
562+
{
563+
q: 'Are the fonts free to use?',
564+
a: 'We use Google Fonts which are free for personal and commercial use. However, we recommend checking the specific license terms for each font you plan to use.',
565+
isOpen: false
566+
},
567+
{
568+
q: 'Can I save my logo designs?',
569+
a: 'Currently, we don\'t provide a save feature. We recommend downloading your logo designs and keeping them locally on your device.',
570+
isOpen: false
571+
},
572+
{
573+
q: 'How can SVG format be opened locally after export without font style?',
574+
a: 'This is because you do not have a local font style, when you open an SVG file in your browser, the browser will look for the font file according to the font name in the SVG file, if your local font file does not have these font files, it will be displayed as the default font.',
575+
isOpen: false
576+
}
577+
]
517578
}
518579
},
519580
zh: {
@@ -545,7 +606,7 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
545606
textColor: '文字颜色',
546607
bgColor: '背景颜色',
547608
position: '文字位置',
548-
effects: '文字效果',
609+
effects: '字效果',
549610
center: '居中',
550611
left: '靠左',
551612
right: '靠右',
@@ -591,6 +652,36 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
591652
'免费使用'
592653
]
593654
}
655+
},
656+
faq: {
657+
title: '常见问题',
658+
items: [
659+
{
660+
q: '如何将favicon添加到我的网站？',
661+
a: '您可以下载favicon.ico文件，并将其上传到您的网站根目录。然后，在HTML文件的<head>部分添加以下代码：<link rel="icon" href="/favicon.ico" type="image/x-icon">',
662+
isOpen: false
663+
},
664+
{
665+
q: '支持哪些导出格式？',
666+
a: '我们支持PNG（多种尺寸）、SVG（矢量格式）和ICO（网站图标）导出。PNG适合一般用途，SVG适合可缩放图形，ICO用于网站图标。',
667+
isOpen: false
668+
},
669+
{
670+
q: '字体是免费使用的吗？',
671+
a: '我们使用的是Google Fonts，可以免费用于个人和商业用途。但我们建议您查看计划使用的每种字体的具体许可条款。',
672+
isOpen: false
673+
},
674+
{
675+
q: '我可以保存我的Logo设计吗？',
676+
a: '目前我们不提供保存功能。我们建议您下载Logo设计并将其保存在本地设备上。',
677+
isOpen: false
678+
},
679+
{
680+
q: '导出后SVG格式本地打开怎么没有没有字体样式？',
681+
a: '这是由于您本地没有字体样式，在浏览器中打开SVG文件时，浏览器会根据SVG文件中的字体名称去查找字体文件，如果您的本地没有这些字体文件，就会显示为默认字体。',
682+
isOpen: false
683+
}
684+
]
594685
}
595686
}
596687
}
@@ -614,7 +705,7 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
614705
{ label: 'Pacifico - 手写艺术', value: 'Pacifico' },
615706
{ label: 'Abril Fatface - 复古粗体', value: 'Abril Fatface' },
616707
{ label: 'Permanent Marker - 马克笔', value: 'Permanent Marker' },
617-
{ label: 'Montserrat - 现代几何', value: 'Montserrat' },
708+
{ label: 'Montserrat - 现几何', value: 'Montserrat' },
618709
{ label: 'Oswald - 时尚凝练', value: 'Oswald' },
619710
{ label: 'Dancing Script - 优雅写', value: 'Dancing Script' },
620711
{ label: 'Quicksand - 圆润现代', value: 'Quicksand' },
@@ -1142,7 +1233,8 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
11421233
textGradientEnd: '#00ff00',
11431234
useBgGradient: false,
11441235
bgGradientStart: '#ff0000',
1145-
bgGradientEnd: '#00ff00'
1236+
bgGradientEnd: '#00ff00',
1237+
faqOpenState: {} // 添加一个对象来跟踪FAQ的展开状态
11461238
}
11471239
},
11481240
computed: {
@@ -1219,7 +1311,7 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
12191311
imageSmoothingQuality: 'high' // 使用高质量图像平滑
12201312
});
12211313

1222-
// 创建一个新的高分辨率canvas
1314+
// 创建一个新的高分率canvas
12231315
const transparentCanvas = document.createElement('canvas');
12241316
transparentCanvas.width = canvas.width;
12251317
transparentCanvas.height = canvas.height;
@@ -1244,19 +1336,46 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
12441336
link.href = transparentCanvas.toDataURL('image/png', 1.0);
12451337
link.click();
12461338
} else if (format === 'svg') {
1339+
// 创建渐变定义和滤镜效果
1340+
const gradientDefs = `
1341+
${this.useBgGradient ? `
1342+
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="0%">
1343+
<stop offset="0%" style="stop-color:${this.bgGradientStart}"/>
1344+
<stop offset="100%" style="stop-color:${this.bgGradientEnd}"/>
1345+
</linearGradient>
1346+
` : ''}
1347+
${this.useTextGradient ? `
1348+
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
1349+
<stop offset="0%" style="stop-color:${this.textGradientStart}"/>
1350+
<stop offset="100%" style="stop-color:${this.textGradientEnd}"/>
1351+
</linearGradient>
1352+
` : ''}
1353+
`;
1354+
12471355
const svgData = `
12481356
<svg width="${this.size}" height="${this.size}" xmlns="http://www.w3.org/2000/svg">
1249-
<rect width="100%" height="100%" fill="${this.bgColor}" rx="${this.borderRadius}" ry="${this.borderRadius}"/>
1357+
<defs>
1358+
${gradientDefs}
1359+
1360+
<style type="text/css">@import url(https://fonts.googleapis.com/css?family=${encodeURIComponent(this.fontFamily)});</style>
1361+
</defs>
1362+
1363+
<rect width="100%" height="100%"
1364+
fill="${this.useBgGradient ? 'url(#bgGradient)' : this.bgColor}"
1365+
rx="${this.borderRadius}"
1366+
ry="${this.borderRadius}"/>
12501367
<text
12511368
x="${this.textPosition === 'center' ? '50%' : (this.textPosition === 'left' ? '20px' : (this.size - 20) + 'px')}"
1252-
y="50%"
1369+
y="${this.verticalOffset}%"
12531370
font-family="${this.fontFamily}"
12541371
font-size="${this.fontSize}px"
1255-
fill="${this.textColor}"
1372+
font-weight="${this.fontWeight}"
1373+
fill="${this.useTextGradient ? 'url(#textGradient)' : this.textColor}"
12561374
text-anchor="${this.textPosition === 'center' ? 'middle' : (this.textPosition === 'left' ? 'start' : 'end')}"
12571375
dominant-baseline="middle"
12581376
>${this.logoText}</text>
1259-
</svg>`
1377+
</svg>`;
1378+
12601379
const blob = new Blob([svgData], { type: 'image/svg+xml' })
12611380
const url = URL.createObjectURL(blob)
12621381
const link = document.createElement('a')
@@ -1401,7 +1520,7 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
14011520

14021521
tempCtx.fillText(this.logoText, x, y)
14031522

1404-
// 创建32x32的最终canvas
1523+
// 创32x32的最终canvas
14051524
const finalCanvas = document.createElement('canvas')
14061525
finalCanvas.width = 32
14071526
finalCanvas.height = 32
@@ -1499,6 +1618,9 @@ <h2 class="text-xl md:text-2xl font-bold text-pink-500 mb-4 md:mb-6 pl-4 border-
14991618
if (logoDesignSection) {
15001619
logoDesignSection.scrollIntoView({ behavior: 'smooth' })
15011620
}
1621+
},
1622+
toggleFaq(index) {
1623+
this.faqOpenState[index] = !this.faqOpenState[index]
15021624
}
15031625
},
15041626
created() {

0 commit comments

Comments
 (0)