239 lines
7.0 KiB
Vue
239 lines
7.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="p-6 max-w-3xl mx-auto bg-white rounded-xl shadow-lg space-y-6">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900">帮提服务图标生成器</h2>
|
|||
|
|
|
|||
|
|
<!-- Icon Preview -->
|
|||
|
|
<div class="flex justify-center">
|
|||
|
|
<div class="w-36 h-36 bg-gray-50 rounded-lg flex items-center justify-center">
|
|||
|
|
<svg
|
|||
|
|
ref="iconRef"
|
|||
|
|
:width="BASE_SIZE"
|
|||
|
|
:height="BASE_SIZE"
|
|||
|
|
:viewBox="`0 0 ${BASE_SIZE} ${BASE_SIZE}`"
|
|||
|
|
>
|
|||
|
|
<!-- Base layer with standard background color -->
|
|||
|
|
<rect
|
|||
|
|
:x="x"
|
|||
|
|
:y="y"
|
|||
|
|
:width="ICON_SIZE"
|
|||
|
|
:height="ICON_SIZE"
|
|||
|
|
:fill="selectedCombo.baseColor"
|
|||
|
|
:rx="CORNER_RADIUS"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- Gradient layer -->
|
|||
|
|
<rect
|
|||
|
|
:x="x"
|
|||
|
|
:y="y"
|
|||
|
|
:width="ICON_SIZE"
|
|||
|
|
:height="ICON_SIZE"
|
|||
|
|
:fill="`url(#gradient-${selectedCombo.name})`"
|
|||
|
|
:rx="CORNER_RADIUS"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- White expression layer with shadow -->
|
|||
|
|
<g :filter="`url(#shadow-${selectedCombo.name})`">
|
|||
|
|
<rect
|
|||
|
|
:x="x"
|
|||
|
|
:y="y"
|
|||
|
|
:width="ICON_SIZE"
|
|||
|
|
:height="ICON_SIZE"
|
|||
|
|
fill="white"
|
|||
|
|
:rx="CORNER_RADIUS"
|
|||
|
|
/>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Service Icon - Two people interaction -->
|
|||
|
|
<g :transform="`translate(${x}, ${y}) scale(${SCALE})`">
|
|||
|
|
<!-- Standing Person -->
|
|||
|
|
<path
|
|||
|
|
d="M8 4C9.1 4 10 4.9 10 6C10 7.1 9.1 8 8 8C6.9 8 6 7.1 6 6C6 4.9 6.9 4 8 4ZM8 9C10.2 9 12 10.8 12 13V16H4V13C4 10.8 5.8 9 8 9Z"
|
|||
|
|
:fill="selectedCombo.shadowColor"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- Person with Luggage -->
|
|||
|
|
<path
|
|||
|
|
d="M18 4C19.1 4 20 4.9 20 6C20 7.1 19.1 8 18 8C16.9 8 16 7.1 16 6C16 4.9 16.9 4 18 4ZM18 9C20.2 9 22 10.8 22 13V16H18V13C18 10.8 16.2 9 14 9C13.7 9 13.4 9 13.1 9.1C13.7 10 14 11 14 12V16H16V22H14V18H10V22H8V16H10V12C10 11 9.7 10 9.1 9.1C8.8 9 8.5 9 8.2 9"
|
|||
|
|
:fill="selectedCombo.shadowColor"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- Luggage -->
|
|||
|
|
<path
|
|||
|
|
d="M18 13V20H14V13H18Z"
|
|||
|
|
:fill="selectedCombo.shadowColor"
|
|||
|
|
/>
|
|||
|
|
</g>
|
|||
|
|
|
|||
|
|
<!-- Gradient and shadow definitions -->
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient
|
|||
|
|
:id="`gradient-${selectedCombo.name}`"
|
|||
|
|
x1="0"
|
|||
|
|
y1="0"
|
|||
|
|
x2="1"
|
|||
|
|
y2="1"
|
|||
|
|
>
|
|||
|
|
<stop offset="0%" :stop-color="selectedCombo.gradients[0]" />
|
|||
|
|
<stop offset="100%" :stop-color="selectedCombo.gradients[1]" />
|
|||
|
|
</linearGradient>
|
|||
|
|
<filter
|
|||
|
|
:id="`shadow-${selectedCombo.name}`"
|
|||
|
|
x="-20%"
|
|||
|
|
y="-20%"
|
|||
|
|
width="140%"
|
|||
|
|
height="140%"
|
|||
|
|
>
|
|||
|
|
<feDropShadow
|
|||
|
|
dx="0"
|
|||
|
|
:dy="SCALE * 0.5"
|
|||
|
|
:stdDeviation="SCALE * 0.5"
|
|||
|
|
:flood-color="selectedCombo.shadowColor"
|
|||
|
|
flood-opacity="0.5"
|
|||
|
|
/>
|
|||
|
|
</filter>
|
|||
|
|
</defs>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Color Combination Selection -->
|
|||
|
|
<div>
|
|||
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">颜色组合</label>
|
|||
|
|
<div class="grid grid-cols-4 gap-4">
|
|||
|
|
<button
|
|||
|
|
v-for="(combo, index) in COLOR_COMBINATIONS"
|
|||
|
|
:key="index"
|
|||
|
|
@click="setSelectedCombo(combo)"
|
|||
|
|
class="h-16 relative rounded-lg overflow-hidden"
|
|||
|
|
:class="{ 'ring-2 ring-blue-500': selectedCombo === combo }"
|
|||
|
|
>
|
|||
|
|
<div class="absolute inset-0" :style="{ backgroundColor: combo.baseColor }" />
|
|||
|
|
<div
|
|||
|
|
class="absolute inset-0"
|
|||
|
|
:style="{
|
|||
|
|
background: `linear-gradient(135deg, ${combo.gradients[0]}, ${combo.gradients[1]})`
|
|||
|
|
}"
|
|||
|
|
/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Download Button -->
|
|||
|
|
<div class="flex justify-center">
|
|||
|
|
<button
|
|||
|
|
@click="downloadIcon"
|
|||
|
|
class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|||
|
|
>
|
|||
|
|
<download-icon class="mr-2 h-5 w-5" />
|
|||
|
|
导出图标 (PNG 108x108)
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="text-sm text-gray-500">
|
|||
|
|
规格说明：
|
|||
|
|
- 尺寸：108x108px (3倍图)
|
|||
|
|
- 格式：PNG
|
|||
|
|
- 背景：透明
|
|||
|
|
- 大小：≤120kb
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { ref, reactive, computed } from 'vue';
|
|||
|
|
import { Download as DownloadIcon } from 'lucide-vue-next';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const COLOR_COMBINATIONS = [
|
|||
|
|
{
|
|||
|
|
name: '蓝色组合',
|
|||
|
|
baseColor: '#F5F8FD',
|
|||
|
|
gradients: ['#46ACFF', '#1E92F0'],
|
|||
|
|
shadowColor: '#1E92F0'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '金色组合',
|
|||
|
|
baseColor: '#F5F8FD',
|
|||
|
|
gradients: ['#FFD157', '#F2B921'],
|
|||
|
|
shadowColor: '#F2B921'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '绿色组合',
|
|||
|
|
baseColor: '#F5F8FD',
|
|||
|
|
gradients: ['#15CC96', '#15CC96'],
|
|||
|
|
shadowColor: '#15CC96'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '青色组合',
|
|||
|
|
baseColor: '#F5F8FD',
|
|||
|
|
gradients: ['#30DFF3', '#43ABFF'],
|
|||
|
|
shadowColor: '#43ABFF'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
DownloadIcon
|
|||
|
|
},
|
|||
|
|
setup() {
|
|||
|
|
const selectedCombo = ref(COLOR_COMBINATIONS[0]);
|
|||
|
|
const iconRef = ref(null);
|
|||
|
|
|
|||
|
|
// 严格按照36x36基础尺寸的3倍图
|
|||
|
|
const SCALE = 3;
|
|||
|
|
const BASE_SIZE = 36 * SCALE;
|
|||
|
|
const CORNER_RADIUS = 2 * SCALE;
|
|||
|
|
const ICON_SIZE = 28 * SCALE;
|
|||
|
|
|
|||
|
|
const x = computed(() => (BASE_SIZE - ICON_SIZE) / 2);
|
|||
|
|
const y = computed(() => (BASE_SIZE - ICON_SIZE) / 2);
|
|||
|
|
|
|||
|
|
const setSelectedCombo = (combo) => {
|
|||
|
|
selectedCombo.value = combo;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const downloadIcon = () => {
|
|||
|
|
if (!iconRef.value) return;
|
|||
|
|
const svgData = new XMLSerializer().serializeToString(iconRef.value);
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = 108;
|
|||
|
|
canvas.height = 108;
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
|
|||
|
|
const img = new Image();
|
|||
|
|
img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
|
|||
|
|
|
|||
|
|
img.onload = () => {
|
|||
|
|
ctx.drawImage(img, 0, 0);
|
|||
|
|
|
|||
|
|
// 创建临时canvas进行大小优化
|
|||
|
|
const tempCanvas = document.createElement('canvas');
|
|||
|
|
tempCanvas.width = 108;
|
|||
|
|
tempCanvas.height = 108;
|
|||
|
|
const tempCtx = tempCanvas.getContext('2d');
|
|||
|
|
tempCtx.drawImage(canvas, 0, 0);
|
|||
|
|
|
|||
|
|
// 导出优化后的PNG
|
|||
|
|
const link = document.createElement('a');
|
|||
|
|
link.download = 'help-service-icon.png';
|
|||
|
|
link.href = tempCanvas.toDataURL('image/png', 0.8); // 优化压缩率以确保小于120kb
|
|||
|
|
link.click();
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
selectedCombo,
|
|||
|
|
iconRef,
|
|||
|
|
SCALE,
|
|||
|
|
BASE_SIZE,
|
|||
|
|
CORNER_RADIUS,
|
|||
|
|
ICON_SIZE,
|
|||
|
|
x,
|
|||
|
|
y,
|
|||
|
|
COLOR_COMBINATIONS,
|
|||
|
|
setSelectedCombo,
|
|||
|
|
downloadIcon
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|