202 lines
9.4 KiB
JavaScript
202 lines
9.4 KiB
JavaScript
/**
|
|
* 生成小程序所需的图标和图片
|
|
* 运行: node scripts/generateImages.js
|
|
*/
|
|
|
|
const fs = require('fs')
|
|
const path = require('path')
|
|
|
|
const imagesDir = path.join(__dirname, '..', 'images')
|
|
|
|
// 确保 images 目录存在
|
|
if (!fs.existsSync(imagesDir)) {
|
|
fs.mkdirSync(imagesDir, { recursive: true })
|
|
}
|
|
|
|
// SVG 图标定义 (48x48)
|
|
const icons = {
|
|
// 箭头图标
|
|
'icon-arrow': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<path fill="#999999" d="M18 12l2.83-2.83L32.66 21 20.83 32.83 18 30l9-9z"/>
|
|
</svg>`,
|
|
|
|
// 勾选图标
|
|
'icon-check': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<circle cx="24" cy="24" r="20" fill="#52c41a"/>
|
|
<path fill="#ffffff" d="M20 30.59l-6.29-6.3 2.12-2.12L20 26.34l12.17-12.17 2.12 2.12z"/>
|
|
</svg>`,
|
|
|
|
// 挑战图标
|
|
'icon-challenge': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<path fill="#ff6b35" d="M24 4l5.5 11.5L42 17l-9 9 2 12.5L24 33l-11 5.5 2-12.5-9-9 12.5-1.5z"/>
|
|
</svg>`,
|
|
|
|
// 历史图标
|
|
'icon-history': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<path fill="#666666" d="M25.99 6C16.04 6 8 14.06 8 24H2l7.79 7.79.14.29L18 24h-6c0-7.73 6.27-14 14-14s14 6.27 14 14-6.27 14-14 14c-3.87 0-7.36-1.58-9.89-4.11l-2.83 2.83C16.53 39.98 21.02 42 26 42c9.94 0 18-8.06 18-18S35.94 6 25.99 6zM24 16v10l8.56 5.08 1.44-2.43-7-4.15V16h-3z"/>
|
|
</svg>`,
|
|
|
|
// 信息图标
|
|
'icon-info': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<circle cx="24" cy="24" r="20" fill="#1890ff"/>
|
|
<text x="24" y="32" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="bold">i</text>
|
|
</svg>`,
|
|
|
|
// 订单图标
|
|
'icon-order': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<path fill="#666666" d="M38 6H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4zm-22 6h16v4H16v-4zm16 20H16v-4h16v4zm0-8H16v-4h16v4z"/>
|
|
</svg>`,
|
|
|
|
// 积分图标
|
|
'icon-points': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<circle cx="24" cy="24" r="18" fill="#faad14"/>
|
|
<text x="24" y="30" text-anchor="middle" fill="#ffffff" font-size="18" font-weight="bold">P</text>
|
|
</svg>`,
|
|
|
|
// 二维码图标
|
|
'icon-qrcode': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<path fill="#666666" d="M8 8h14v14H8V8zm4 4v6h6v-6h-6zm12-4h14v14H24V8zm4 4v6h6v-6h-6zM8 26h14v14H8V26zm4 4v6h6v-6h-6zm16-4h4v4h-4zm4 4h4v4h-4zm-4 4h4v4h-4zm4 4h4v4h-4zm4-8h4v4h-4zm0 8h4v4h-4z"/>
|
|
</svg>`,
|
|
|
|
// 排名图标
|
|
'icon-ranking': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<rect x="6" y="26" width="10" height="16" fill="#52c41a"/>
|
|
<rect x="19" y="14" width="10" height="28" fill="#faad14"/>
|
|
<rect x="32" y="20" width="10" height="22" fill="#1890ff"/>
|
|
<text x="11" y="24" text-anchor="middle" fill="#666" font-size="10">2</text>
|
|
<text x="24" y="12" text-anchor="middle" fill="#666" font-size="10">1</text>
|
|
<text x="37" y="18" text-anchor="middle" fill="#666" font-size="10">3</text>
|
|
</svg>`,
|
|
|
|
// 记录图标
|
|
'icon-records': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<path fill="#666666" d="M14 6c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h20c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4H14zm2 8h16v4H16v-4zm0 8h12v4H16v-4zm0 8h16v4H16v-4z"/>
|
|
</svg>`,
|
|
|
|
// 扫码图标
|
|
'icon-scan': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<path fill="#666666" d="M6 14V8c0-1.1.9-2 2-2h6v4H10v4H6zm32-8h6c1.1 0 2 .9 2 2v6h-4v-4h-4V6zM6 34v6c0 1.1.9 2 2 2h6v-4H10v-4H6zm32 8h6c1.1 0 2-.9 2-2v-6h-4v4h-4v4zM6 22h36v4H6z"/>
|
|
</svg>`,
|
|
|
|
// 门店图标
|
|
'icon-store': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
|
<path fill="#666666" d="M24 4L6 14v4h4v22h28V18h4v-4L24 4zm8 30H16V22h16v12z"/>
|
|
<rect x="20" y="26" width="8" height="8" fill="#999"/>
|
|
</svg>`
|
|
}
|
|
|
|
// 空状态图片 (200x160)
|
|
const emptyImages = {
|
|
// 空排名
|
|
'empty-ranking': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160" width="200" height="160">
|
|
<rect x="40" y="80" width="30" height="50" fill="#e8e8e8" rx="4"/>
|
|
<rect x="85" y="50" width="30" height="80" fill="#e8e8e8" rx="4"/>
|
|
<rect x="130" y="95" width="30" height="35" fill="#e8e8e8" rx="4"/>
|
|
<circle cx="55" cy="65" r="12" fill="#d9d9d9"/>
|
|
<circle cx="100" cy="35" r="12" fill="#d9d9d9"/>
|
|
<circle cx="145" cy="80" r="12" fill="#d9d9d9"/>
|
|
<text x="100" y="150" text-anchor="middle" fill="#bfbfbf" font-size="14">暂无排名数据</text>
|
|
</svg>`,
|
|
|
|
// 空门店
|
|
'empty-store': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160" width="200" height="160">
|
|
<rect x="50" y="40" width="100" height="70" fill="#e8e8e8" rx="8"/>
|
|
<rect x="60" y="50" width="25" height="20" fill="#d9d9d9" rx="2"/>
|
|
<rect x="90" y="50" width="50" height="10" fill="#d9d9d9" rx="2"/>
|
|
<rect x="90" y="65" width="40" height="8" fill="#f5f5f5" rx="2"/>
|
|
<path d="M70 85 L80 95 L130 95 L130 110 L80 110 Z" fill="#d9d9d9"/>
|
|
<text x="100" y="140" text-anchor="middle" fill="#bfbfbf" font-size="14">暂无门店</text>
|
|
</svg>`,
|
|
|
|
// 空比赛
|
|
'empty-match': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160" width="200" height="160">
|
|
<circle cx="70" cy="60" r="25" fill="#e8e8e8"/>
|
|
<circle cx="130" cy="60" r="25" fill="#e8e8e8"/>
|
|
<text x="100" y="68" text-anchor="middle" fill="#d9d9d9" font-size="24">VS</text>
|
|
<rect x="50" y="100" width="100" height="20" fill="#e8e8e8" rx="4"/>
|
|
<text x="100" y="150" text-anchor="middle" fill="#bfbfbf" font-size="14">暂无比赛记录</text>
|
|
</svg>`,
|
|
|
|
// 空记录
|
|
'empty-records': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160" width="200" height="160">
|
|
<rect x="50" y="30" width="100" height="90" fill="#e8e8e8" rx="8"/>
|
|
<rect x="65" y="45" width="70" height="8" fill="#d9d9d9" rx="2"/>
|
|
<rect x="65" y="60" width="50" height="8" fill="#f5f5f5" rx="2"/>
|
|
<rect x="65" y="75" width="60" height="8" fill="#d9d9d9" rx="2"/>
|
|
<rect x="65" y="90" width="40" height="8" fill="#f5f5f5" rx="2"/>
|
|
<rect x="65" y="105" width="55" height="8" fill="#d9d9d9" rx="2"/>
|
|
<text x="100" y="145" text-anchor="middle" fill="#bfbfbf" font-size="14">暂无记录</text>
|
|
</svg>`,
|
|
|
|
// 空商品
|
|
'empty-products': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160" width="200" height="160">
|
|
<rect x="40" y="30" width="50" height="70" fill="#e8e8e8" rx="6"/>
|
|
<rect x="110" y="30" width="50" height="70" fill="#e8e8e8" rx="6"/>
|
|
<rect x="50" y="40" width="30" height="30" fill="#d9d9d9" rx="4"/>
|
|
<rect x="120" y="40" width="30" height="30" fill="#d9d9d9" rx="4"/>
|
|
<rect x="50" y="75" width="30" height="6" fill="#f5f5f5" rx="2"/>
|
|
<rect x="120" y="75" width="30" height="6" fill="#f5f5f5" rx="2"/>
|
|
<rect x="50" y="85" width="20" height="8" fill="#faad14" rx="2"/>
|
|
<rect x="120" y="85" width="20" height="8" fill="#faad14" rx="2"/>
|
|
<text x="100" y="130" text-anchor="middle" fill="#bfbfbf" font-size="14">暂无商品</text>
|
|
</svg>`,
|
|
|
|
// 空订单
|
|
'empty-order': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 160" width="200" height="160">
|
|
<rect x="50" y="25" width="100" height="100" fill="#e8e8e8" rx="8"/>
|
|
<rect x="65" y="40" width="70" height="35" fill="#d9d9d9" rx="4"/>
|
|
<rect x="65" y="85" width="45" height="10" fill="#f5f5f5" rx="2"/>
|
|
<rect x="65" y="100" width="30" height="15" fill="#faad14" rx="3"/>
|
|
<circle cx="130" cy="107" r="8" fill="#d9d9d9"/>
|
|
<text x="100" y="145" text-anchor="middle" fill="#bfbfbf" font-size="14">暂无订单</text>
|
|
</svg>`
|
|
}
|
|
|
|
// 默认图片
|
|
const defaultImages = {
|
|
// 默认头像 (120x120)
|
|
'avatar-default': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
|
|
<rect width="120" height="120" fill="#e8e8e8"/>
|
|
<circle cx="60" cy="45" r="25" fill="#bfbfbf"/>
|
|
<ellipse cx="60" cy="100" rx="40" ry="30" fill="#bfbfbf"/>
|
|
</svg>`,
|
|
|
|
// 默认商品图 (200x200)
|
|
'product-default': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
|
<rect width="200" height="200" fill="#f5f5f5"/>
|
|
<rect x="50" y="50" width="100" height="100" fill="#e8e8e8" rx="8"/>
|
|
<rect x="70" y="70" width="60" height="40" fill="#d9d9d9" rx="4"/>
|
|
<rect x="70" y="120" width="40" height="10" fill="#bfbfbf" rx="2"/>
|
|
<rect x="70" y="135" width="25" height="8" fill="#faad14" rx="2"/>
|
|
</svg>`
|
|
}
|
|
|
|
// 写入 SVG 文件
|
|
function writeSvgFile(name, content) {
|
|
const filePath = path.join(imagesDir, `${name}.svg`)
|
|
fs.writeFileSync(filePath, content.trim())
|
|
console.log(`✓ 已生成: ${name}.svg`)
|
|
}
|
|
|
|
// 生成所有图标
|
|
console.log('\n=== 生成图标 ===')
|
|
Object.entries(icons).forEach(([name, svg]) => {
|
|
writeSvgFile(name, svg)
|
|
})
|
|
|
|
// 生成所有空状态图片
|
|
console.log('\n=== 生成空状态图片 ===')
|
|
Object.entries(emptyImages).forEach(([name, svg]) => {
|
|
writeSvgFile(name, svg)
|
|
})
|
|
|
|
// 生成默认图片
|
|
console.log('\n=== 生成默认图片 ===')
|
|
Object.entries(defaultImages).forEach(([name, svg]) => {
|
|
writeSvgFile(name, svg)
|
|
})
|
|
|
|
console.log('\n所有图片生成完成!')
|
|
console.log('提示: 微信小程序支持 SVG 格式图片，可直接使用')
|
|
console.log('如需 PNG 格式，可使用在线工具转换或安装 sharp 库')
|