/** * 🎯 100 个科技感头像候选预览页(资源库 lucide 源直选,无需渲染) * 生成 preview-100.html:每张候选以最终头像样式展示(深蓝渐变圆底 + 白色线性图标), * 支持勾选,底部可复制已选编号,供用户筛选后批量渲染 PNG。 * * 用法:node scripts/gen-100-avatars-preview.js */ 'use strict'; const fs = require('fs'); const path = require('path'); const vm = require('vm'); const ROOT = path.resolve(__dirname, '..'); const OUT_DIR = path.join(ROOT, 'output', 'agent-avatars-png'); // —— 1. 加载 lucide 源 —— global.window = global; const lucideFile = path.join(ROOT, 'js', 'data', 'sources', 'lucide.js'); vm.runInThisContext(fs.readFileSync(lucideFile, 'utf8'), { filename: lucideFile }); const lucideIcons = window['HGB_Source_lucide'].icons; const byName = new Map(lucideIcons.map(x => [x.name, x])); // —— 2. 精选 100 个(按主题分组)—— const GROUPS = [ { label: '🤖 智能核心', items: ['bot', 'brain-circuit', 'brain', 'cpu', 'circuit-board', 'sparkles', 'sparkle', 'atom', 'orbit', 'radar', 'satellite', 'antenna', 'signal', 'wifi', 'bluetooth', 'usb', 'cable', 'plug', 'power', 'battery', 'battery-charging', 'battery-full'] }, { label: '⌨️ 代码开发', items: ['terminal', 'code', 'code-xml', 'braces', 'brackets', 'file-code', 'git-branch', 'git-merge', 'git-pull-request', 'command', 'keyboard', 'monitor', 'laptop', 'smartphone', 'server', 'database', 'hard-drive'] }, { label: '☁️ 网络云数据', items: ['cloud', 'cloud-upload', 'cloud-download', 'cloud-cog', 'cloud-lightning', 'network', 'share-2', 'link', 'globe', 'send', 'mail', 'message-circle', 'message-square', 'phone', 'mic', 'camera', 'video', 'qr-code', 'rss'] }, { label: '🛡️ 安全防护', items: ['lock', 'key', 'key-round', 'shield', 'shield-check', 'shield-half', 'target', 'crosshair', 'eye', 'scan-face', 'scan'] }, { label: '⚙️ 智能工具', items: ['settings', 'settings-2', 'cog', 'wrench', 'layers', 'layout-grid', 'box', 'package', 'blocks', 'puzzle', 'gem', 'diamond', 'sliders-horizontal', 'equal'] }, { label: '🔷 抽象几何', items: ['hexagon', 'triangle', 'circle', 'octagon', 'infinity', 'asterisk', 'zap', 'activity', 'gauge', 'compass', 'navigation', 'navigation-2', 'map-pin', 'map'] }, { label: '🚀 空间探索', items: ['rocket', 'plane', 'telescope'] } ]; let list = []; const dup = new Set(); for (const g of GROUPS) { for (const name of g.items) { if (dup.has(name)) continue; dup.add(name); const icon = byName.get(name); if (!icon) { console.warn('⚠️ 缺失:', name); continue; } list.push({ name, id: icon.id, body: icon.svg, group: g.label }); } } console.log('候选数:', list.length); // —— 3. 生成预览页 —— const S = 24, BG_FROM = '#0b1220', BG_TO = '#16294a'; function avatarSvg(body) { return ` ${body} `; } let cards = ''; let idx = 1; for (const g of GROUPS) { const members = list.filter(x => x.group === g.label); if (!members.length) continue; cards += `
${g.label}(${members.length})
\n
\n`; for (const m of members) { const n = String(idx).padStart(2, '0'); cards += `\n`; idx++; } cards += '
\n'; } const html = ` 🎯 100 个科技感头像候选 · 勾选后批量渲染

🎯 100 个科技感头像候选

资源库 lucide 源直选 · 点击卡片勾选(默认全选)· 确认后在下方复制编号,交由渲染为 PNG
已选 0/100
${cards}
`; fs.mkdirSync(OUT_DIR, { recursive: true }); fs.writeFileSync(path.join(OUT_DIR, 'preview-100.html'), html, 'utf8'); console.log('🎉 已生成 → output/agent-avatars-png/preview-100.html(候选 ' + list.length + ' 个)');