1525 lines
68 KiB
JavaScript
1525 lines
68 KiB
JavaScript
/**
|
||
* 画个标 · UI：智能设计工作台
|
||
* 职责：行业/图标配置、方案批量生成、方案库网格、方案预览与变体微调、
|
||
* GitHub 资源导入、导出对话框、方案版本管理、Toast
|
||
*/
|
||
const HGB_UI = (function () {
|
||
'use strict';
|
||
|
||
const SVG_NS = 'http://www.w3.org/2000/svg';
|
||
let toastTimer = null;
|
||
|
||
/* ================= 工具 ================= */
|
||
/** HTML 转义（防止资源名称中的特殊字符破坏 DOM） */
|
||
function esc(s) {
|
||
return String(s).replace(/&/g, '&').replace(/</g, '<')
|
||
.replace(/>/g, '>').replace(/"/g, '"');
|
||
}
|
||
|
||
/** 提取完整 SVG 文档字符串中的 <svg> 标签（用于内联预览） */
|
||
function svgInline(svgStr) {
|
||
const div = document.createElement('div');
|
||
div.innerHTML = svgStr;
|
||
const svg = div.querySelector('svg');
|
||
return svg ? svg.outerHTML : '';
|
||
}
|
||
|
||
function toast(msg) {
|
||
const el = document.getElementById('toast');
|
||
el.textContent = msg;
|
||
el.classList.remove('hidden');
|
||
clearTimeout(toastTimer);
|
||
toastTimer = setTimeout(() => el.classList.add('hidden'), 2600);
|
||
}
|
||
|
||
/* ================= 状态 ================= */
|
||
let designState = {
|
||
industry: null, // 当前行业
|
||
icons: [], // 已选图标 [{id,name,svg}]
|
||
styles: [], // 已选风格方向 id（空 = 智能搭配全部）
|
||
plans: [], // 方案库
|
||
activePlan: null, // 当前预览/导出方案
|
||
activeLockup: 'below', // 预览弹窗中品牌组合的当前摆放位置
|
||
genParam: null, // 最近一次生成参数（供变体使用）
|
||
skills: [], // 启用的技能 id（生成时注入 AI 并执行后处理审计）
|
||
avatarMode: false // 头像生成模式（纯图形、圆形预览、平台规格导出）
|
||
};
|
||
const KIND_LABEL = { gen: '🎨 建议', check: '🔬 检查', deliver: '📦 交付' };
|
||
// 默认按设计流程自动启用前 3 步（洞察→生成→评审），迭代与交付导出按需手动开启
|
||
const DEFAULT_SKILLS = HGB_Skills.all().filter(s => HGB_Skills.stepOf(s.id) <= 3).map(s => s.id);
|
||
let exportFormat = 'png';
|
||
|
||
/* ================= 初始化 ================= */
|
||
function init() {
|
||
designState.industry = HGB_Industries.current();
|
||
designState.skills = DEFAULT_SKILLS.slice();
|
||
applyWorkspace();
|
||
// 默认启用技能按工作区过滤（头像纯图形 → 排除文字类技能）
|
||
designState.skills = designState.skills.filter(id => HGB_Skills.workspacesOf(id).includes(currentWorkspace()));
|
||
bindTopbar();
|
||
bindDesignWorkspace();
|
||
bindBuiltinModal();
|
||
bindDicebearModal();
|
||
bindAISettings();
|
||
bindPlanModal();
|
||
bindExportModal();
|
||
bindVersionActions();
|
||
renderDesignIndustries();
|
||
renderDesignIcons();
|
||
renderDesignStyles();
|
||
renderSkillChecks();
|
||
renderPlans();
|
||
renderVersions();
|
||
}
|
||
|
||
/* ================= 顶栏 ================= */
|
||
function bindTopbar() {
|
||
// 项目名（影响导出文件名与版本名）
|
||
const nameInput = document.getElementById('project-name');
|
||
nameInput.addEventListener('change', () => {
|
||
HGB_Store.get().name = nameInput.value || '我的品牌';
|
||
HGB_Store.persistToLocal();
|
||
});
|
||
|
||
// 导出（针对当前活动方案）
|
||
document.getElementById('btn-export-svg').addEventListener('click', () => {
|
||
if (!requireActivePlan()) return;
|
||
openExportModal('svg');
|
||
});
|
||
document.getElementById('btn-export-png').addEventListener('click', () => {
|
||
if (!requireActivePlan()) return;
|
||
openExportModal('png');
|
||
});
|
||
}
|
||
|
||
/* ================= 智能设计工作台 ================= */
|
||
function bindDesignWorkspace() {
|
||
// 生成方案
|
||
document.getElementById('btn-generate').addEventListener('click', generatePlans);
|
||
}
|
||
|
||
/** 渲染工作台内行业切换 */
|
||
function renderDesignIndustries() {
|
||
const wrap = document.getElementById('design-industry');
|
||
wrap.innerHTML = HGB_Industries.map(ind => `
|
||
<button class="industry-tab ${ind.id === designState.industry.id ? 'active' : ''}"
|
||
data-industry="${ind.id}" title="${ind.desc}">
|
||
${ind.emoji}<span>${ind.name}</span>
|
||
</button>`).join('');
|
||
wrap.querySelectorAll('.industry-tab').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
designState.industry = HGB_Industries.find(btn.dataset.industry);
|
||
designState.icons = [];
|
||
designState.plans = [];
|
||
designState.activePlan = null;
|
||
renderDesignIndustries();
|
||
renderDesignIcons();
|
||
renderPlans();
|
||
toast('🏭 已切换到「' + designState.industry.name + '」行业');
|
||
});
|
||
});
|
||
}
|
||
|
||
/** 当前工作区（LOGO / 头像由页面级 workspace 决定） */
|
||
function currentWorkspace() {
|
||
return designState.avatarMode ? 'avatar' : 'logo';
|
||
}
|
||
|
||
/** 渲染技能勾选区（按设计流程 5 步组织；按工作区过滤适用技能） */
|
||
function renderSkillChecks() {
|
||
const wrap = document.getElementById('design-skills');
|
||
if (!wrap) return;
|
||
const ws = currentWorkspace();
|
||
wrap.innerHTML = HGB_Skills.steps().map(st => {
|
||
const list = HGB_Skills.byStep(st.step, ws);
|
||
if (!list.length) return '';
|
||
const checked = list.filter(s => designState.skills.includes(s.id)).length;
|
||
const allOn = checked === list.length;
|
||
return `
|
||
<details class="skill-step" data-step="${st.step}" ${st.step <= 3 ? 'open' : ''}>
|
||
<summary class="skill-step-head" title="${esc(st.desc)}">
|
||
<span class="step-emoji">${st.emoji}</span>
|
||
<span class="step-name">${st.step}. ${st.name}</span>
|
||
<span class="step-count">${list.length} 技能</span>
|
||
<span class="step-checked">✓ ${checked}</span>
|
||
<span class="step-toggle ${allOn ? 'all' : ''}">${allOn ? '已全选' : (checked ? '部分' : '未选')}</span>
|
||
</summary>
|
||
<div class="skill-step-body">
|
||
${list.map(s => {
|
||
const on = designState.skills.includes(s.id);
|
||
return `
|
||
<label class="skill-check ${on ? 'on' : ''}" title="${esc(s.scene)}">
|
||
<input type="checkbox" value="${esc(s.id)}" ${on ? 'checked' : ''}>
|
||
<span class="skill-check-emoji">${s.emoji}</span>
|
||
<span class="skill-check-name">${esc(s.name)}</span>
|
||
<span class="skill-kind kind-${HGB_Skills.kind(s.id)}">${KIND_LABEL[HGB_Skills.kind(s.id)]}</span>
|
||
</label>`;
|
||
}).join('')}
|
||
<div class="step-ops">
|
||
<button class="tb-btn sm" data-stepall="${st.step}">☑ 全选本步</button>
|
||
<button class="tb-btn sm" data-stepnone="${st.step}">☐ 清空本步</button>
|
||
</div>
|
||
</div>
|
||
</details>`;
|
||
}).join('');
|
||
|
||
wrap.querySelectorAll('input[type="checkbox"]').forEach(cb => {
|
||
cb.addEventListener('change', () => {
|
||
const id = cb.value;
|
||
if (cb.checked) {
|
||
if (!designState.skills.includes(id)) designState.skills.push(id);
|
||
} else {
|
||
designState.skills = designState.skills.filter(x => x !== id);
|
||
}
|
||
cb.closest('.skill-check').classList.toggle('on', cb.checked);
|
||
updateStepState(cb.closest('.skill-step'));
|
||
});
|
||
});
|
||
wrap.querySelectorAll('[data-stepall]').forEach(btn =>
|
||
btn.addEventListener('click', () => {
|
||
const st = parseInt(btn.dataset.stepall, 10);
|
||
HGB_Skills.byStep(st, currentWorkspace()).forEach(s => { if (!designState.skills.includes(s.id)) designState.skills.push(s.id); });
|
||
renderSkillChecks();
|
||
}));
|
||
wrap.querySelectorAll('[data-stepnone]').forEach(btn =>
|
||
btn.addEventListener('click', () => {
|
||
const st = parseInt(btn.dataset.stepnone, 10);
|
||
const ids = HGB_Skills.byStep(st, currentWorkspace()).map(s => s.id);
|
||
designState.skills = designState.skills.filter(x => !ids.includes(x));
|
||
renderSkillChecks();
|
||
}));
|
||
}
|
||
|
||
/** 更新某步骤区块的勾选计数状态 */
|
||
function updateStepState(details) {
|
||
if (!details) return;
|
||
const list = HGB_Skills.byStep(parseInt(details.dataset.step, 10), currentWorkspace());
|
||
const checked = list.filter(s => designState.skills.includes(s.id)).length;
|
||
const allOn = checked === list.length;
|
||
const el = details.querySelector('.step-checked');
|
||
if (el) el.textContent = '✓ ' + checked;
|
||
const t = details.querySelector('.step-toggle');
|
||
if (t) { t.textContent = allOn ? '已全选' : (checked ? '部分' : '未选'); t.classList.toggle('all', allOn); }
|
||
}
|
||
|
||
/** 从方案提取前景色/背景色（供对比度类检查） */
|
||
function planColors(plan) {
|
||
const els = (plan || {}).elements || [];
|
||
const text = els.find(el => el.type === 'text' && el.visible !== false);
|
||
const icon = els.find(el => el.type === 'icon' && el.iconId && !['ring', 'deco-bar'].includes(el.iconId));
|
||
const fg = (text && text.fill) || (icon && icon.stroke) || '#333333';
|
||
return { fg, bg: plan.bg || '#FFFFFF' };
|
||
}
|
||
/** 检查类技能 → 从方案对象构建调用参数的适配器（设计流程第 3 步「方案评审」） */
|
||
const REVIEW_RUNNERS = {
|
||
'composition': p => ({ plan: p }),
|
||
'align-check': p => ({ plan: p }),
|
||
'negative-space': p => ({ plan: p }),
|
||
'spacing-check': p => ({ plan: p }),
|
||
'proportion-check': p => ({ plan: p }),
|
||
'visual-balance': p => ({ plan: p }),
|
||
'focal-point': p => ({ plan: p }),
|
||
'rule-of-thirds': p => ({ plan: p }),
|
||
'circle-crop-safety': p => ({ plan: p }),
|
||
'contrast-check': p => planColors(p),
|
||
'wcag-contrast': p => { const c = planColors(p); return { fg: c.fg, bg: c.bg }; },
|
||
'color-blind-check': p => ({ plan: p }),
|
||
'monochrome-check': p => ({ plan: p }),
|
||
'font-hierarchy': p => ({ plan: p }),
|
||
'text-fit': p => ({ plan: p }),
|
||
'tiny-readable': p => ({ plan: p }),
|
||
'letter-spacing-check': p => ({ plan: p }),
|
||
'line-break': p => ({ plan: p }),
|
||
'cjk-mix-check': p => ({ plan: p }),
|
||
'icon-consistency': p => ({ plan: p }),
|
||
'icon-tone': p => ({ plan: p }),
|
||
'icon-count': p => ({ plan: p }),
|
||
'icon-text-ratio': p => ({ plan: p }),
|
||
'stroke-consistency': p => ({ plan: p }),
|
||
'icon-padding': p => {
|
||
const els = (p || {}).elements || [];
|
||
const ic = els.find(el => el.type === 'icon' && el.iconId && !['ring', 'deco-bar'].includes(el.iconId));
|
||
return { svg: (ic && (ic.svg || ic.path || '')) || '' };
|
||
},
|
||
'print-safety': p => ({ plan: p })
|
||
};
|
||
const REVIEW_NAMES = {
|
||
'composition': '构图', 'align-check': '对齐', 'negative-space': '负空间', 'spacing-check': '间距',
|
||
'proportion-check': '比例', 'visual-balance': '视觉平衡', 'focal-point': '视觉焦点', 'rule-of-thirds': '构图位置',
|
||
'circle-crop-safety': '圆裁安全',
|
||
'contrast-check': '对比度', 'wcag-contrast': '无障碍', 'color-blind-check': '色盲友好', 'monochrome-check': '单色适配',
|
||
'font-hierarchy': '字号层级', 'text-fit': '文字适配', 'tiny-readable': '小尺寸可读', 'letter-spacing-check': '字距',
|
||
'line-break': '断行', 'cjk-mix-check': '中英混排',
|
||
'icon-consistency': '图标一致', 'icon-tone': '图标明暗', 'icon-count': '图标数量',
|
||
'icon-text-ratio': '图文比例', 'icon-padding': '图标边距', 'stroke-consistency': '图标描边',
|
||
'print-safety': '印刷安全区'
|
||
};
|
||
/** 归一化检查技能输出 → {pass, detail} */
|
||
function normalizeReview(r) {
|
||
if (!r) return { pass: true, detail: '无结果' };
|
||
if (r.error) return { pass: false, detail: r.error };
|
||
const pass = r.pass !== false;
|
||
let detail = r.verdict || r.note || '';
|
||
if (!detail && r.issues && r.issues.length) detail = r.issues.join('；');
|
||
if (!detail) detail = pass ? '通过' : '存在风险';
|
||
return { pass, detail };
|
||
}
|
||
|
||
/** 对方案运行启用的质量类技能（设计流程第 3 步「方案评审」），返回审计结果 */
|
||
function auditPlan(plan, skills) {
|
||
if (!skills || !skills.length || !plan) return null;
|
||
const audit = { score: null, items: [], passed: 0, failed: 0 };
|
||
for (const id of Object.keys(REVIEW_RUNNERS)) {
|
||
if (!skills.includes(id)) continue;
|
||
try {
|
||
const r = HGB_Skills.run(id, REVIEW_RUNNERS[id](plan));
|
||
const n = normalizeReview(r);
|
||
audit.items.push({ id, name: REVIEW_NAMES[id] || id, ok: n.pass, detail: n.detail });
|
||
if (n.pass) audit.passed++; else audit.failed++;
|
||
} catch (e) {
|
||
audit.items.push({ id, name: REVIEW_NAMES[id] || id, ok: false, detail: '执行异常: ' + e.message });
|
||
audit.failed++;
|
||
}
|
||
}
|
||
if (audit.items.length) {
|
||
const comp = audit.items.find(it => it.id === 'composition');
|
||
audit.score = Math.min(100, Math.max(40, 100 - audit.failed * 8 + (comp && comp.ok ? 4 : 0)));
|
||
}
|
||
return audit;
|
||
}
|
||
|
||
/** 渲染风格方向多选胶囊（空 = 智能搭配全部风格） */
|
||
function renderDesignStyles() {
|
||
const wrap = document.getElementById('design-styles');
|
||
if (!wrap) return;
|
||
const sel = designState.styles;
|
||
const chips = [
|
||
`<button class="industry-tab ${sel.length === 0 ? 'active' : ''}" data-style="__all__"
|
||
title="不限定风格，AI/引擎从全部 ${HGB_Styles.length} 种风格中智能搭配">✨ 全部风格</button>`,
|
||
...HGB_Styles.map(s => `
|
||
<button class="industry-tab ${sel.includes(s.id) ? 'active' : ''}" data-style="${esc(s.id)}"
|
||
title="${esc(s.desc)}｜设计运动：${esc(s.movement)}；气质：${s.moods.join(' / ')}">${s.emoji}${esc(s.name)}</button>`)
|
||
].join('');
|
||
wrap.innerHTML = chips;
|
||
wrap.querySelectorAll('[data-style]').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const id = btn.dataset.style;
|
||
if (id === '__all__') {
|
||
designState.styles = [];
|
||
} else {
|
||
const i = designState.styles.indexOf(id);
|
||
if (i >= 0) designState.styles.splice(i, 1);
|
||
else designState.styles.push(id);
|
||
}
|
||
renderDesignStyles();
|
||
});
|
||
});
|
||
}
|
||
|
||
/** 线条风来源（Feather/Lucide/Tabler）：构建时 body 的 stroke 属性被剥离只剩 path d，
|
||
* 渲染时必须强制描边（fill=none stroke=灰），否则会被误判为填充型、线条填成实心 */
|
||
const STROKE_SOURCES = new Set(['feather', 'lucide', 'tabler']);
|
||
|
||
/** 判断图标渲染类型：描边型（返回 true）或填充型（false）。
|
||
* 判据：线条风来源强制描边；body 带 stroke 或 stroke-linecap/linejoin（Heroicons outline 的
|
||
* stroke= 在 svg 根标签，body 只剩 stroke-linecap/linejoin）也算描边型，否则开放线条会被 fill 填充成空 */
|
||
function isStrokeIcon(ic, source) {
|
||
const src = source || (ic && ic.id ? String(ic.id).split(':')[0] : '');
|
||
// 多色素材（emoji/品牌）保留原色，不走描边/填充二选一
|
||
if (ic && ic.type && ic.type !== 'icon') return false;
|
||
if (STROKE_SOURCES.has(src)) return true;
|
||
const svg = (ic && ic.svg) || '';
|
||
if (/stroke\s*=|\bstroke-linecap\s*=|\bstroke-linejoin\s*=/.test(svg)) return true;
|
||
// 显式 stroke-width="0"（Carbon 等填充型源自带，防默认描边）：实为填充型，
|
||
// 若按描边型渲染（fill=none + stroke），path 级 stroke-width=0 会覆盖根描边宽度 → 整图空白
|
||
if (/stroke-width="0"/.test(svg)) return false;
|
||
// 全 body 几何元素都 fill="none"（或未显式 fill）且无任何 stroke（如 oui 源）：
|
||
// 实为描边型，否则按填充型渲染时根 fill 对形状无效 → 空白
|
||
const geoms = svg.match(/<(?:path|circle|rect|ellipse|line|polyline|polygon)\b[^>]*>/g);
|
||
if (geoms && geoms.length && !/fill\s*=\s*"(?!none")[^"]*"/.test(svg)) return true;
|
||
return false;
|
||
}
|
||
|
||
/** 图标 body 预处理：把 currentColor 替换为显式色值。
|
||
* 不能替换成 "inherit"：body 内渐变 stop 的 currentColor 会沿 currentColor→inherit→
|
||
* 根 svg fill="none" 的继承链变透明（mingcute 空白即此陷阱）；显式色值彻底规避。
|
||
* fill="currentColor" 一律替换为实色 #374151：即便描边型图标（line-md filled 变体用
|
||
* currentColor 填充背景 + mask 挖空）也不能换成 none，否则背景透明整图空白。
|
||
* stroke="currentColor" 也一律替换为实色 #374151（不能换 none）：部分描边型素材
|
||
* 用 currentColor 画线（streamline-logos 品牌描边 Logo、high-contrast 表情的线条），
|
||
* 换成 none 会整图透明；显式实色保证可见。
|
||
* 同时替换 stop-color，防止渐变引用 currentColor 时失效。 */
|
||
function prepareIconBody(body, isStroke) {
|
||
return body
|
||
.replace(/fill="currentColor"/g, 'fill="#374151"')
|
||
.replace(/stroke="currentColor"/g, 'stroke="#374151"')
|
||
.replace(/stop-color="currentColor"/g, 'stop-color="#374151"');
|
||
}
|
||
|
||
/** 渲染图标选择网格（当前行业图标 + 已选内置图标，最多选 5 个） */
|
||
function renderDesignIcons() {
|
||
const wrap = document.getElementById('design-icons');
|
||
const indIds = (designState.industry.icons || []).map(i => i.id);
|
||
const list = [
|
||
...(designState.industry.icons || []),
|
||
// 已选的内置库图标（不重复显示行业图标）
|
||
...designState.icons.filter(ic => !indIds.includes(ic.id))
|
||
];
|
||
if (!list.length) {
|
||
wrap.innerHTML = '<p class="pane-tip">未选图标。可点下方「📦 内置库浏览选择」挑选，或直接让 AI 自动选用。</p>';
|
||
return;
|
||
}
|
||
wrap.innerHTML = list.map(ic => {
|
||
const sel = isIconSelected(ic);
|
||
const srcTag = ic.source ? ic.source : '行业';
|
||
// 多色素材（emoji/品牌）保留原色；其余按描边/填充型渲染
|
||
const preserve = ic.type && ic.type !== 'icon';
|
||
const isStroke = preserve ? false : isStrokeIcon(ic);
|
||
const svgAttrs = isStroke
|
||
? 'fill="none" stroke="#374151" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"'
|
||
: 'fill="#374151" stroke="none"';
|
||
const body = preserve ? ic.svg : prepareIconBody(ic.svg, isStroke);
|
||
return `
|
||
<div class="design-icon-item ${sel ? 'selected' : ''}"
|
||
data-icid="${esc(ic.id)}" title="${esc(ic.name)}（${esc(srcTag)}）">
|
||
<svg viewBox="0 0 24 24" ${svgAttrs}>${body}</svg>
|
||
<span class="design-icon-name">${esc(ic.name)}</span>
|
||
</div>`;
|
||
}).join('');
|
||
|
||
wrap.querySelectorAll('.design-icon-item').forEach(item => {
|
||
item.addEventListener('click', () => toggleDesignIcon(item.dataset.icid));
|
||
});
|
||
}
|
||
|
||
function isIconSelected(ic) {
|
||
return designState.icons.some(p => p.id === ic.id);
|
||
}
|
||
|
||
function toggleDesignIcon(icid) {
|
||
// 从行业图标 + 已选图标中查找
|
||
const pool = [
|
||
...(designState.industry.icons || []),
|
||
...designState.icons
|
||
];
|
||
const ic = pool.find(x => x.id === icid);
|
||
if (!ic) return;
|
||
const idx = designState.icons.findIndex(p => p.id === ic.id);
|
||
if (idx >= 0) {
|
||
designState.icons.splice(idx, 1);
|
||
} else {
|
||
if (designState.icons.length >= 5) {
|
||
toast('⚠️ 最多选择 5 个图标（每个图标将各出「每图标套数」套）');
|
||
return;
|
||
}
|
||
designState.icons.push({ id: ic.id, name: ic.name, svg: ic.svg, source: ic.source || '' });
|
||
}
|
||
renderDesignIcons();
|
||
}
|
||
|
||
/* ================= 内置图标库浏览 ================= */
|
||
const BUILTIN_PER_PAGE = 150;
|
||
let builtinState = { source: 'lucide', category: '__all__', search: '', page: 0, type: '__all__', loading: false };
|
||
|
||
/** 图标分类展示顺序（中文分类胶囊顺序） */
|
||
const CAT_ORDER = ['education', 'food', 'tech', 'health', 'travel', 'business', 'people',
|
||
'animals', 'nature', 'building', 'tools', 'communication', 'media', 'arrows',
|
||
'time', 'money', 'symbol', 'sport', 'others'];
|
||
|
||
/** 来源库中文名（来源按钮主名）——与 icon-sources.js 的 nameCn 一致 */
|
||
const SOURCE_CN = {
|
||
feather: '羽毛图标', lucide: 'Lucide 图标', tabler: 'Tabler 图标',
|
||
bootstrap: 'Bootstrap 图标', remix: 'Remix 图标', ionicons: 'Ionicons 图标',
|
||
heroicons: 'Heroicons 图标', iconoir: 'Iconoir 图标', boxicons: 'Boxicons 图标',
|
||
mdi: 'MDI 图标', fontawesome: 'Font Awesome 图标', antd: 'Ant Design 图标',
|
||
/* 第三轮 iconify 扩容 */
|
||
fluent: '微软 Fluent', msymbols: 'Google 符号', solar: 'Solar 图标',
|
||
phosphor: 'Phosphor 图标', iconpark: '字节 IconPark', hugeicons: 'Huge 图标',
|
||
mingcute: 'MingCute 图标', carbon: 'IBM Carbon', tdesign: '腾讯 TDesign',
|
||
radix: 'Radix 图标', majesticons: 'Majesticons', pixelarticons: '像素图标',
|
||
cssgg: 'CSS.gg 图标',
|
||
/* 第四轮 iconify 扩容 */
|
||
octicon: 'GitHub 官方', devicon: 'Devicon 技术栈', logos: 'SVG Logos 品牌',
|
||
'circle-flags': '圆形国旗', 'flat-color-icons': '多彩平面', 'line-md': 'Material 动效',
|
||
uil: 'Unicons 图标', teenyicons: 'Teenyicons', healthicons: '医疗健康',
|
||
meteocons: '天气图标', ic: 'Google 经典', 'material-symbols-light': '符号 Light',
|
||
cib: 'CoreUI 品牌', streamline: 'Streamline', basil: 'Basil 图标',
|
||
charm: 'Charm 图标', prime: 'Prime 图标', mynaui: 'Mynaui 图标',
|
||
pajamas: 'GitLab Pajamas', flowbite: 'Flowbite', 'si-glyph': 'Simple 字形',
|
||
'devicon-plain': 'Devicon 纯色', dashicons: 'Dashicons', 'eos-icons': 'EOS 图标',
|
||
'akar-icons': 'Akar 图标',
|
||
/* emoji 多色 */
|
||
twemoji: '推特表情', noto: '谷歌 Noto', fluentemoji: '微软扁平表情',
|
||
openmoji: 'OpenMoji 表情', gameicons: '游戏图标', fxemoji: '火狐表情',
|
||
/* 品牌 */
|
||
'simple-icons': 'Simple 品牌'
|
||
};
|
||
|
||
/** 素材类型 Tab 定义（内置库弹窗顶部：按素材类型过滤来源列表） */
|
||
const BUILTIN_TYPES = [
|
||
{ id: '__all__', cn: '全部素材', emoji: '🗂' },
|
||
{ id: 'icon', cn: '单色图标', emoji: '🎯' },
|
||
{ id: 'emoji', cn: '多色表情', emoji: '😀' },
|
||
{ id: 'brand', cn: '品牌 Logo', emoji: '🏷' }
|
||
];
|
||
|
||
function bindBuiltinModal() {
|
||
const modal = document.getElementById('builtin-modal');
|
||
const searchInput = document.getElementById('builtin-search');
|
||
|
||
document.getElementById('btn-builtin-icons').addEventListener('click', async () => {
|
||
builtinState.search = '';
|
||
builtinState.page = 0;
|
||
searchInput.value = '';
|
||
renderBuiltinSources();
|
||
// 确保当前源已加载，再渲染网格（懒加载：默认源 lucide 首次打开需异步加载）
|
||
await ensureBuiltinSource();
|
||
modal.classList.remove('hidden');
|
||
renderBuiltinGrid();
|
||
});
|
||
|
||
modal.querySelectorAll('[data-builtin-close]').forEach(b =>
|
||
b.addEventListener('click', () => modal.classList.add('hidden')));
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) modal.classList.add('hidden');
|
||
});
|
||
|
||
// 搜索（防抖）
|
||
let debounce = null;
|
||
searchInput.addEventListener('input', () => {
|
||
clearTimeout(debounce);
|
||
debounce = setTimeout(() => {
|
||
builtinState.search = searchInput.value.trim().toLowerCase();
|
||
builtinState.page = 0;
|
||
renderBuiltinGrid();
|
||
}, 150);
|
||
});
|
||
|
||
document.getElementById('builtin-load-more').addEventListener('click', () => {
|
||
builtinState.page++;
|
||
renderBuiltinGrid(true);
|
||
});
|
||
}
|
||
|
||
/** 确保当前来源已加载（未加载则异步拉取数据文件） */
|
||
async function ensureBuiltinSource() {
|
||
if (HGB_IconLib.loaded(builtinState.source)) return;
|
||
builtinState.loading = true;
|
||
const grid = document.getElementById('builtin-grid');
|
||
if (grid) grid.innerHTML = '<p class="gh-status">⏳ 正在加载素材源…</p>';
|
||
try {
|
||
await HGB_IconLib.loadSource(builtinState.source);
|
||
} catch (e) {
|
||
console.warn('[builtin] 素材源加载失败：', e);
|
||
if (grid) grid.innerHTML = '<p class="gh-status">❌ 素材源加载失败：' + esc(e.message) + '</p>';
|
||
} finally {
|
||
builtinState.loading = false;
|
||
}
|
||
}
|
||
|
||
function renderBuiltinSources() {
|
||
const meta = HGB_BuiltinIcons.meta || {};
|
||
const total = meta.total || 0;
|
||
|
||
// 类型 Tab（全部 / 图标 / 表情 / 品牌）
|
||
const typeWrap = document.getElementById('builtin-types');
|
||
typeWrap.innerHTML = BUILTIN_TYPES.map(t => {
|
||
const cnt = t.id === '__all__'
|
||
? total
|
||
: Object.values(HGB_BuiltinIcons.sources || {}).reduce((n, s) => s.type === t.id ? n + s.count : n, 0);
|
||
return `<button class="builtin-source btype-btn ${builtinState.type === t.id ? 'active' : ''}"
|
||
data-btype="${t.id}">${t.emoji} ${t.cn}<span class="bsrc-count">${cnt.toLocaleString()}</span></button>`;
|
||
}).join('');
|
||
typeWrap.querySelectorAll('.btype-btn').forEach(btn => {
|
||
btn.addEventListener('click', async () => {
|
||
builtinState.type = btn.dataset.btype;
|
||
builtinState.source = firstSourceOfType(builtinState.type);
|
||
builtinState.category = '__all__';
|
||
builtinState.page = 0;
|
||
renderBuiltinSources();
|
||
await ensureBuiltinSource(); // 切类型默认源可能未加载（懒加载），需先加载再渲染网格
|
||
renderBuiltinGrid();
|
||
});
|
||
});
|
||
|
||
// 来源按钮（按当前类型过滤）
|
||
const wrap = document.getElementById('builtin-sources');
|
||
wrap.innerHTML = Object.keys(HGB_BuiltinIcons.sources || {})
|
||
.filter(sid => builtinState.type === '__all__' || (HGB_BuiltinIcons.sources[sid].type || 'icon') === builtinState.type)
|
||
.map(sid => {
|
||
const src = HGB_BuiltinIcons.sources[sid];
|
||
const count = src ? src.count : 0;
|
||
const cn = src.nameCn || SOURCE_CN[sid] || src.name; // 优先索引中的中文名（源自 icon-sources.js 权威清单）
|
||
return `<button class="builtin-source bsrc-btn ${builtinState.source === sid ? 'active' : ''}"
|
||
data-bsrc="${sid}" title="${cn}（${src.name}）">
|
||
<span class="bsrc-cn">${cn}</span>
|
||
<span class="bsrc-count">${count.toLocaleString()}</span></button>`;
|
||
}).join('');
|
||
wrap.querySelectorAll('.builtin-source').forEach(btn => {
|
||
btn.addEventListener('click', async () => {
|
||
builtinState.source = btn.dataset.bsrc;
|
||
builtinState.category = '__all__'; // 切换来源后重置分类
|
||
builtinState.page = 0;
|
||
renderBuiltinSources();
|
||
await ensureBuiltinSource();
|
||
renderBuiltinGrid();
|
||
});
|
||
});
|
||
|
||
// 分类列表（中文，可选）：按当前来源统计分类分布（来源需已加载）
|
||
const catWrap = document.getElementById('builtin-cats');
|
||
const srcData = HGB_IconLib.getSource(builtinState.source);
|
||
const catCount = new Map();
|
||
const catCn = {};
|
||
for (const ic of (srcData ? srcData.icons : [])) {
|
||
const key = ic.category || 'others';
|
||
catCount.set(key, (catCount.get(key) || 0) + 1);
|
||
catCn[key] = ic.categoryCn || '其他';
|
||
}
|
||
const cats = CAT_ORDER.filter(c => catCount.has(c));
|
||
catWrap.innerHTML =
|
||
`<button class="builtin-source ${builtinState.category === '__all__' ? 'active' : ''}" data-bcat="__all__"
|
||
title="显示当前来源的全部图标">📂 全部<span class="bsrc-count">${srcData ? srcData.icons.length.toLocaleString() : '—'}</span></button>` +
|
||
cats.map(c => `<button class="builtin-source ${builtinState.category === c ? 'active' : ''}" data-bcat="${c}"
|
||
title="仅显示「${catCn[c]}」分类图标">${catCn[c]}<span class="bsrc-count">${catCount.get(c)}</span></button>`).join('');
|
||
catWrap.querySelectorAll('.builtin-source').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
builtinState.category = btn.dataset.bcat;
|
||
builtinState.page = 0;
|
||
renderBuiltinSources();
|
||
renderBuiltinGrid();
|
||
});
|
||
});
|
||
|
||
document.getElementById('builtin-head-info').textContent =
|
||
`共 ${total.toLocaleString()} 个素材 · 离线可用 · 点击选择（最多 2 个）`;
|
||
}
|
||
|
||
/** 当前类型下的第一个来源（切类型后默认选中） */
|
||
function firstSourceOfType(type) {
|
||
for (const sid of Object.keys(HGB_BuiltinIcons.sources || {})) {
|
||
if (type === '__all__' || (HGB_BuiltinIcons.sources[sid].type || 'icon') === type) return sid;
|
||
}
|
||
return builtinState.source;
|
||
}
|
||
|
||
/** 当前过滤后的图标列表（来源 + 分类 + 搜索）——来源需已加载 */
|
||
function filteredBuiltinIcons() {
|
||
const src = HGB_IconLib.getSource(builtinState.source);
|
||
if (!src || !src.icons) return [];
|
||
let list = src.icons;
|
||
if (builtinState.category && builtinState.category !== '__all__') {
|
||
list = list.filter(i => i.category === builtinState.category);
|
||
}
|
||
const q = builtinState.search;
|
||
if (!q) return list;
|
||
// 同时匹配名称与 id（id 可能带库前缀）
|
||
return list.filter(i =>
|
||
i.name.toLowerCase().includes(q) || i.id.toLowerCase().includes(q));
|
||
}
|
||
|
||
function renderBuiltinGrid(append) {
|
||
const grid = document.getElementById('builtin-grid');
|
||
const moreWrap = document.getElementById('builtin-more-wrap');
|
||
if (builtinState.loading || !HGB_IconLib.loaded(builtinState.source)) {
|
||
grid.innerHTML = '<p class="gh-status">⏳ 正在加载素材源…</p>';
|
||
moreWrap.style.display = 'none';
|
||
return;
|
||
}
|
||
const filtered = filteredBuiltinIcons();
|
||
document.getElementById('builtin-count').textContent =
|
||
builtinState.search ? `匹配 ${filtered.length.toLocaleString()} 个` : `共 ${filtered.length.toLocaleString()} 个`;
|
||
|
||
const start = builtinState.page * BUILTIN_PER_PAGE;
|
||
const slice = filtered.slice(start, start + BUILTIN_PER_PAGE);
|
||
|
||
const html = slice.map(ic => {
|
||
const fullId = builtinState.source + ':' + ic.name;
|
||
const sel = designState.icons.some(p => p.id === fullId);
|
||
// 多色素材（emoji/品牌）：保留原色渲染，不覆盖 fill/stroke
|
||
const preserve = ic.type && ic.type !== 'icon';
|
||
const isStroke = preserve ? false : isStrokeIcon(ic, builtinState.source);
|
||
const svgAttrs = isStroke
|
||
? 'fill="none" stroke="#374151" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"'
|
||
: 'fill="#374151" stroke="none"';
|
||
// currentColor 会覆盖 svg 上的颜色值 → 统一替换为与渲染类型匹配的显式色值
|
||
const body = preserve ? ic.svg : prepareIconBody(ic.svg, isStroke);
|
||
return `
|
||
<div class="gh-icon-item ${sel ? 'imported' : ''}" data-bid="${esc(ic.id)}">
|
||
<span class="gh-tip">${esc(ic.name)}</span>
|
||
<svg viewBox="0 0 24 24" ${svgAttrs}>${body}</svg>
|
||
</div>`;
|
||
}).join('');
|
||
|
||
if (append) {
|
||
grid.insertAdjacentHTML('beforeend', html);
|
||
} else {
|
||
grid.innerHTML = html;
|
||
}
|
||
grid.querySelectorAll('.gh-icon-item').forEach(item => {
|
||
item.addEventListener('click', () => toggleBuiltinIcon(item.dataset.bid));
|
||
});
|
||
|
||
moreWrap.style.display = start + slice.length < filtered.length ? 'block' : 'none';
|
||
}
|
||
|
||
/** 选中/取消内置图标 */
|
||
function toggleBuiltinIcon(icid) {
|
||
const src = HGB_IconLib.getSource(builtinState.source);
|
||
const ic = src ? src.icons.find(i => i.id === icid) : null;
|
||
if (!ic) return;
|
||
const fullId = builtinState.source + ':' + ic.name;
|
||
const existing = designState.icons.find(p => p.id === fullId);
|
||
if (existing) {
|
||
designState.icons = designState.icons.filter(p => p.id !== fullId);
|
||
toast('↩️ 已取消「' + ic.name + '」');
|
||
} else {
|
||
if (designState.icons.length >= 5) {
|
||
toast('⚠️ 最多选择 5 个图标（每个图标将各出「每图标套数」套）');
|
||
return;
|
||
}
|
||
designState.icons.push({
|
||
id: fullId,
|
||
name: ic.name,
|
||
svg: ic.svg,
|
||
type: ic.type || 'icon',
|
||
source: ((HGB_BuiltinIcons.sources[builtinState.source] || {}).nameCn) || (HGB_BuiltinIcons.sources[builtinState.source] || {}).name || builtinState.source
|
||
});
|
||
toast('✅ 已选择「' + ic.name + '」，AI 将优先使用该素材');
|
||
}
|
||
renderDesignIcons();
|
||
renderBuiltinGrid();
|
||
}
|
||
|
||
/* ================= 工作区初始化（LOGO/头像由页面级 workspace 决定，不再运行时切换） ================= */
|
||
function applyWorkspace() {
|
||
designState.avatarMode = (window.HGB_WORKSPACE === 'avatar');
|
||
document.body.classList.toggle('avatar-mode', designState.avatarMode);
|
||
const genBtn = document.getElementById('btn-generate');
|
||
if (genBtn) genBtn.textContent = designState.avatarMode ? '🚀 生成头像' : '🤖 AI 生成方案';
|
||
const dbBtn = document.getElementById('btn-dicebear');
|
||
if (dbBtn) dbBtn.classList.toggle('hidden', !designState.avatarMode);
|
||
}
|
||
|
||
/* ================= DiceBear 风格头像（M4） ================= */
|
||
let dicebearStyle = 'adventurer';
|
||
let dicebearSeed = '';
|
||
let activeDicebear = null; // {svg, styleId, seed, cid}
|
||
|
||
function randomSeed() {
|
||
return Math.random().toString(36).slice(2, 10);
|
||
}
|
||
|
||
function bindDicebearModal() {
|
||
const modal = document.getElementById('dicebear-modal');
|
||
document.getElementById('btn-dicebear').addEventListener('click', () => {
|
||
if (!dicebearSeed) {
|
||
dicebearSeed = randomSeed();
|
||
document.getElementById('dicebear-seed').value = dicebearSeed;
|
||
}
|
||
renderDicebearStyles();
|
||
renderDicebear();
|
||
modal.classList.remove('hidden');
|
||
});
|
||
modal.querySelectorAll('[data-dicebear-close]').forEach(b =>
|
||
b.addEventListener('click', () => modal.classList.add('hidden')));
|
||
modal.addEventListener('click', e => { if (e.target === modal) modal.classList.add('hidden'); });
|
||
// 风格切换
|
||
document.getElementById('dicebear-styles').addEventListener('click', e => {
|
||
const btn = e.target.closest('[data-dbs]');
|
||
if (!btn) return;
|
||
dicebearStyle = btn.dataset.dbs;
|
||
renderDicebearStyles();
|
||
renderDicebear();
|
||
});
|
||
// 随机 seed → 换一批
|
||
document.getElementById('dicebear-random').addEventListener('click', () => {
|
||
dicebearSeed = randomSeed();
|
||
document.getElementById('dicebear-seed').value = dicebearSeed;
|
||
renderDicebear();
|
||
});
|
||
// 生成
|
||
document.getElementById('dicebear-gen').addEventListener('click', () => {
|
||
dicebearSeed = (document.getElementById('dicebear-seed').value || '').trim() || randomSeed();
|
||
document.getElementById('dicebear-seed').value = dicebearSeed;
|
||
renderDicebear();
|
||
});
|
||
// 导出选中的 PNG（平台规格 + 圆形裁切）
|
||
document.getElementById('dicebear-export').addEventListener('click', () => {
|
||
if (!activeDicebear) { toast('请先点击选中一张头像'); return; }
|
||
const sizes = HGB_AvatarGen.AVATAR_SIZES.map(s => s.size);
|
||
HGB_Exporter.exportAvatarPngs(activeDicebear.svg, sizes, {
|
||
bg: '#FFFFFF', round: true, base: 'dicebear_' + activeDicebear.styleId
|
||
}).then(() => toast('📤 已导出 ' + sizes.length + ' 个平台规格 PNG（圆形）'));
|
||
});
|
||
}
|
||
|
||
function renderDicebearStyles() {
|
||
const wrap = document.getElementById('dicebear-styles');
|
||
if (!wrap) return;
|
||
wrap.innerHTML = HGB_Dicebear.STYLES.map(s => `
|
||
<button class="industry-tab ${s === dicebearStyle ? 'active' : ''}" data-dbs="${s}" title="DiceBear 官方风格 ${s}">${HGB_Dicebear.CN[s] || s}</button>`).join('');
|
||
}
|
||
|
||
async function renderDicebear() {
|
||
const seed = (document.getElementById('dicebear-seed').value || '').trim() || randomSeed();
|
||
document.getElementById('dicebear-seed').value = seed;
|
||
dicebearSeed = seed;
|
||
const grid = document.getElementById('dicebear-grid');
|
||
grid.innerHTML = '<div class="plans-empty">🧸 正在组合风格部件…</div>';
|
||
try {
|
||
await HGB_Dicebear.loadStyle(dicebearStyle);
|
||
} catch (e) {
|
||
grid.innerHTML = '<div class="plans-empty">⚠️ 风格定义加载失败：' + esc(e.message) + '</div>';
|
||
return;
|
||
}
|
||
const count = 8;
|
||
const cards = [];
|
||
for (let i = 0; i < count; i++) {
|
||
const s = seed + '-' + i;
|
||
cards.push({ svg: HGB_Dicebear.renderAvatar(dicebearStyle, s).svg, styleId: dicebearStyle, seed: s, cid: 'db_' + i });
|
||
}
|
||
grid.innerHTML = cards.map(c => {
|
||
const sel = activeDicebear && activeDicebear.cid === c.cid;
|
||
return '<div class="dicebear-card' + (sel ? ' active' : '') + '" data-cid="' + c.cid + '">' +
|
||
'<div class="dicebear-svg">' + svgInline(c.svg) + '</div>' +
|
||
'<div class="dicebear-name">' + (HGB_Dicebear.CN[dicebearStyle] || dicebearStyle) + ' · ' + esc(c.seed.slice(-4)) + '</div>' +
|
||
'</div>';
|
||
}).join('');
|
||
if (!activeDicebear) activeDicebear = cards[0];
|
||
grid.querySelectorAll('.dicebear-card').forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
activeDicebear = cards.find(x => x.cid === card.dataset.cid) || activeDicebear;
|
||
grid.querySelectorAll('.dicebear-card').forEach(c2 =>
|
||
c2.classList.toggle('active', c2 === card));
|
||
});
|
||
});
|
||
}
|
||
|
||
/** 生成方案：AI 优先（DeepSeek 自主设计），失败自动降级内置引擎 */
|
||
async function generatePlans() {
|
||
// 品牌名：优先「品牌名」输入框，其次顶栏「项目名」，最后回退行业默认
|
||
const brand = document.getElementById('design-brand').value
|
||
|| document.getElementById('project-name').value;
|
||
const sub = document.getElementById('design-sub').value;
|
||
const desc = document.getElementById('design-desc').value;
|
||
const count = parseInt(document.getElementById('design-count').value, 10) || 5;
|
||
const iconCount = designState.icons.length;
|
||
// 图标驱动：LOGO 模式下选中 1-5 个图标 → 每个图标固定作为核心图形，各产出 count 套
|
||
const iconDriven = !designState.avatarMode && iconCount > 0;
|
||
const genBtn = document.getElementById('btn-generate');
|
||
genBtn.disabled = true;
|
||
genBtn.textContent = iconDriven ? '🎨 按图标设计中…' : '⏳ AI 构思中…';
|
||
try {
|
||
// 让浏览器先渲染"生成中"状态
|
||
await new Promise(r => setTimeout(r, 30));
|
||
designState.genParam = {
|
||
industry: designState.industry,
|
||
brand, sub, desc,
|
||
icons: designState.icons.slice(),
|
||
styleIds: designState.styles.slice(), // 风格方向（空 = 全部风格）
|
||
skills: designState.skills.slice(),
|
||
iconLocked: iconDriven, // 图标驱动模式标记（变体/更多变体沿用）
|
||
avatar: designState.avatarMode // 头像模式标记（变体/导出使用）
|
||
};
|
||
let plans;
|
||
if (iconDriven) {
|
||
// 图标驱动：确定性出图（每图标 × 套数），不走 AI 自主选图标
|
||
plans = HGB_Generator.generatePlans({ ...designState.genParam, count });
|
||
toast('📦 已按所选 ' + iconCount + ' 个图标逐套设计：' + iconCount + ' 个 × ' + count + ' 套 = ' + plans.length + ' 套');
|
||
} else if (designState.avatarMode) {
|
||
// 头像模式：AI 优先（DeepSeek 自主设计），失败/无 Key 降级内置引擎即时出图
|
||
if (HGB_AI.hasKey()) {
|
||
try {
|
||
const result = await HGB_AIDesigner.generatePlansAI({
|
||
...designState.genParam,
|
||
avatar: true, // 头像约束：纯图形、无文字、布局限定头像白名单
|
||
count
|
||
});
|
||
plans = result.plans;
|
||
designState.overallConcept = result.overallConcept;
|
||
toast('🤖 AI 已完成头像设计，共 ' + plans.length + ' 套（含设计理念）');
|
||
} catch (aiErr) {
|
||
console.warn('[AI] 头像生成失败，降级内置引擎：', aiErr);
|
||
toast('⚠️ AI 生成失败（' + aiErr.message + '），已用内置引擎即时兜底');
|
||
plans = await HGB_AvatarGen.generateAvatars({ ...designState.genParam, count });
|
||
}
|
||
} else {
|
||
toast('ℹ️ 未配置 AI Key，先用内置引擎即时生成头像；顶栏「🤖 AI 设置」可配置 DeepSeek');
|
||
plans = HGB_AvatarGen.generateAvatars({ ...designState.genParam, count });
|
||
}
|
||
} else if (HGB_AI.hasKey()) {
|
||
try {
|
||
const result = await HGB_AIDesigner.generatePlansAI({
|
||
...designState.genParam,
|
||
count
|
||
});
|
||
plans = result.plans;
|
||
designState.overallConcept = result.overallConcept;
|
||
toast('🤖 AI 已完成设计，共 ' + plans.length + ' 套方案（含设计理念）');
|
||
} catch (aiErr) {
|
||
console.warn('[AI] 生成失败，降级内置引擎：', aiErr);
|
||
toast('⚠️ AI 生成失败（' + aiErr.message + '），已用内置引擎兜底');
|
||
plans = generatePlansLocal(count);
|
||
}
|
||
} else {
|
||
toast('ℹ️ 未配置 AI Key，先用内置引擎生成；顶栏「🤖 AI 设置」可配置 DeepSeek');
|
||
plans = generatePlansLocal(count);
|
||
}
|
||
// 对每套方案运行启用的质量类技能，生成审计结果
|
||
for (const p of plans) {
|
||
p.skillAudit = auditPlan(p, designState.genParam.skills);
|
||
}
|
||
designState.plans = plans;
|
||
designState.activePlan = null;
|
||
renderPlans();
|
||
} catch (err) {
|
||
toast('❌ 生成失败：' + err.message);
|
||
} finally {
|
||
genBtn.disabled = false;
|
||
genBtn.textContent = designState.avatarMode ? '🚀 生成头像' : '🤖 AI 生成方案';
|
||
}
|
||
}
|
||
|
||
/** 内置引擎兜底生成（模板组合） */
|
||
function generatePlansLocal(count) {
|
||
return HGB_Generator.generatePlans({
|
||
...designState.genParam,
|
||
count: count || 5
|
||
});
|
||
}
|
||
|
||
/* ================= AI 设置 ================= */
|
||
function bindAISettings() {
|
||
const modal = document.getElementById('ai-modal');
|
||
const keyInput = document.getElementById('ai-key');
|
||
const modelSelect = document.getElementById('ai-model');
|
||
const testResult = document.getElementById('ai-test-result');
|
||
|
||
HGB_AI.MODELS.forEach(m => {
|
||
const op = document.createElement('option');
|
||
op.value = m;
|
||
op.textContent = m;
|
||
modelSelect.appendChild(op);
|
||
});
|
||
|
||
document.getElementById('btn-ai-settings').addEventListener('click', () => {
|
||
keyInput.value = HGB_AI.getKey();
|
||
modelSelect.value = HGB_AI.getModel();
|
||
testResult.innerHTML = '';
|
||
modal.classList.remove('hidden');
|
||
});
|
||
modal.querySelectorAll('[data-ai-close]').forEach(b =>
|
||
b.addEventListener('click', () => modal.classList.add('hidden')));
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) modal.classList.add('hidden');
|
||
});
|
||
|
||
document.getElementById('btn-ai-save').addEventListener('click', () => {
|
||
HGB_AI.setKey(keyInput.value.trim());
|
||
HGB_AI.setModel(modelSelect.value);
|
||
testResult.innerHTML = '<span class="ai-ok">✅ 已保存</span>';
|
||
toast('🤖 AI 设置已保存');
|
||
});
|
||
|
||
document.getElementById('btn-ai-clear').addEventListener('click', () => {
|
||
HGB_AI.clearKey();
|
||
keyInput.value = HGB_AI.getKey(); // 清除本机 Key 后为空
|
||
testResult.innerHTML = '<span class="ai-ok">🧹 已清除本机 API Key（未配置时 AI 降级为内置引擎）</span>';
|
||
toast('🤖 已清除本机 API Key');
|
||
});
|
||
|
||
document.getElementById('btn-ai-test').addEventListener('click', async () => {
|
||
HGB_AI.setKey(keyInput.value.trim());
|
||
HGB_AI.setModel(modelSelect.value);
|
||
if (!HGB_AI.hasKey()) {
|
||
testResult.innerHTML = '<span class="ai-err">请先填写 API Key</span>';
|
||
return;
|
||
}
|
||
testResult.innerHTML = '<span class="ai-pending">⏳ 正在测试连接…</span>';
|
||
try {
|
||
const r = await HGB_AI.testConnection();
|
||
testResult.innerHTML = '<span class="ai-ok">✅ 连接成功：' + esc(r) + '</span>';
|
||
} catch (err) {
|
||
const map = {
|
||
NO_KEY: '未填写 Key',
|
||
AUTH: 'API Key 无效（401）',
|
||
BALANCE: '余额不足（402）',
|
||
RATE_LIMIT: '请求过于频繁（429）',
|
||
NETWORK: '网络错误，请检查网络/代理',
|
||
EMPTY: 'AI 返回为空'
|
||
};
|
||
testResult.innerHTML = '<span class="ai-err">❌ ' + (map[err.code] || esc(err.message)) + '</span>';
|
||
}
|
||
});
|
||
}
|
||
|
||
/** 技能检查小结（方案卡片：评分 + 通过/失败统计 + 失败项提示；完整明细见预览弹窗） */
|
||
function renderAuditBadge(audit) {
|
||
if (!audit || !audit.items || !audit.items.length) return '';
|
||
const items = audit.items;
|
||
const failed = items.filter(it => !it.ok);
|
||
const ok = items.filter(it => it.ok);
|
||
const score = audit.score;
|
||
const scoreHtml = score != null
|
||
? `<span class="audit-score ${score >= 90 ? 'a' : score >= 70 ? 'b' : 'c'}" title="技能质量评分：满分 100，每项未通过扣 8 分">🧩 ${score}</span>`
|
||
: '';
|
||
const summary = `<span class="audit-item ${failed.length ? 'warn' : 'ok'}" title="${items.length} 项检查 · ${ok.length} 项通过${failed.length ? ' · ' + failed.length + ' 项需关注' : ''}">${items.length} 项 ✓ ${ok.length}${failed.length ? ' ⚠ ' + failed.length : ''}</span>`;
|
||
const badges = failed.slice(0, 3).map(it =>
|
||
`<span class="audit-item warn" title="${esc(it.detail)}">${esc(it.name)}⚠</span>`).join('');
|
||
return `<div class="audit-row">${scoreHtml}${summary}${badges}</div>`;
|
||
}
|
||
|
||
/** 渲染方案库卡片（卡片内同时展示 Mark 图形与默认 Lockup 组合；头像模式只展示圆形 Mark） */
|
||
function renderPlans() {
|
||
const grid = document.getElementById('plans-grid');
|
||
const empty = document.getElementById('plans-empty');
|
||
const avatar = designState.avatarMode;
|
||
document.getElementById('plans-title').textContent =
|
||
`${avatar ? '👤 头像库' : '📚 方案库'}（共 ${designState.plans.length} 套）`;
|
||
empty.classList.add('hidden');
|
||
if (!designState.plans.length) {
|
||
empty.classList.remove('hidden');
|
||
grid.innerHTML = '';
|
||
return;
|
||
}
|
||
grid.innerHTML = designState.plans.map(p => {
|
||
const markSvg = HGB_Exporter.buildSvgFrom(p.markElements || [], p.bg, null, { trim: true });
|
||
const active = designState.activePlan && designState.activePlan.id === p.id;
|
||
const previewsHtml = avatar
|
||
? `<div class="plan-preview plan-preview-avatar" title="头像图形标识（圆形预览）">${svgInline(markSvg)}</div>`
|
||
: `<div class="plan-previews">
|
||
<div class="plan-preview" title="图形标识（Mark）">${svgInline(markSvg)}</div>
|
||
<div class="plan-preview plan-preview-lp" title="品牌组合（Lockup）">${svgInline(HGB_Exporter.buildSvgFrom(p.elements || [], p.bg, null, { trim: true }))}</div>
|
||
</div>`;
|
||
return `
|
||
<div class="plan-card ${active ? 'active' : ''} ${avatar ? 'plan-card-avatar' : ''}" data-plan="${p.id}">
|
||
${previewsHtml}
|
||
<div class="plan-meta">
|
||
<div class="plan-name">${esc(p.name)}</div>
|
||
${p.concept ? `<div class="plan-concept">💡 ${esc(p.concept)}</div>` : ''}
|
||
${p.warnings && p.warnings.length ? `<div class="plan-warn">⚠ ${esc(p.warnings.join('、'))}</div>` : ''}
|
||
${renderAuditBadge(p.skillAudit)}
|
||
<div class="plan-tags">
|
||
<span>🏷 ${esc(p.layoutName)}</span>
|
||
<span>🎨 ${esc(p.paletteName)}</span>
|
||
${p.aiIcon ? `<span title="AI 从内置库选用的图标">🎯 ${esc(p.aiIcon.split(':')[1] || p.aiIcon)}</span>` : ''}
|
||
${p.ai ? '<span class="ai-badge">🤖 AI</span>' : ''}
|
||
</div>
|
||
<div class="plan-actions">
|
||
<button class="tb-btn apply" data-pact="preview">👁 预览</button>
|
||
<button class="tb-btn" data-pact="png">${avatar ? '导出头像' : '导出 PNG'}</button>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
}).join('');
|
||
|
||
grid.querySelectorAll('.plan-card').forEach(card => {
|
||
const plan = designState.plans.find(p => p.id === card.dataset.plan);
|
||
if (!plan) return;
|
||
card.querySelectorAll('button').forEach(btn => {
|
||
btn.addEventListener('click', async () => {
|
||
const act = btn.dataset.pact;
|
||
if (act === 'preview') {
|
||
openPlanPreview(plan);
|
||
} else if (act === 'png') {
|
||
designState.activePlan = plan;
|
||
if (designState.avatarMode) {
|
||
openExportModal('png'); // 头像模式：平台规格导出
|
||
} else {
|
||
try {
|
||
const svgStr = HGB_Exporter.buildSvgFrom(plan.elements, plan.bg, null, { trim: true });
|
||
await HGB_Exporter.exportPng(1024, plan.bg, svgStr);
|
||
toast('✅ 已导出方案 PNG（1024px）');
|
||
} catch (err) {
|
||
toast('❌ 导出失败：' + err.message);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ================= 方案预览与变体 ================= */
|
||
function bindPlanModal() {
|
||
const modal = document.getElementById('plan-modal');
|
||
modal.querySelectorAll('[data-plan-close]').forEach(btn => {
|
||
btn.addEventListener('click', closePlanPreview);
|
||
});
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) closePlanPreview();
|
||
});
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && !modal.classList.contains('hidden')) closePlanPreview();
|
||
});
|
||
|
||
document.getElementById('btn-var-color').addEventListener('click', variantColor);
|
||
document.getElementById('btn-var-layout').addEventListener('click', variantLayout);
|
||
document.getElementById('btn-var-more').addEventListener('click', variantMore);
|
||
document.getElementById('btn-plan-png').addEventListener('click', () => exportActive('png'));
|
||
document.getElementById('btn-plan-svg').addEventListener('click', () => exportActive('svg'));
|
||
document.getElementById('btn-plan-pdf').addEventListener('click', () => exportActive('pdf'));
|
||
}
|
||
|
||
function openPlanPreview(plan) {
|
||
designState.activePlan = plan;
|
||
// 重置为默认位置（保留用户当前选择的位置如果在 lockups 中）
|
||
const keep = designState.activeLockup;
|
||
if (!(plan.lockups || []).some(lp => lp.pos === keep)) {
|
||
designState.activeLockup = 'below';
|
||
}
|
||
renderPlans(); // 更新卡片高亮
|
||
renderPlanPreview();
|
||
document.getElementById('plan-modal').classList.remove('hidden');
|
||
}
|
||
|
||
function closePlanPreview() {
|
||
document.getElementById('plan-modal').classList.add('hidden');
|
||
}
|
||
|
||
function renderPlanPreview() {
|
||
const p = designState.activePlan;
|
||
if (!p) return;
|
||
// 区域一：图形标识（Mark）—— 纯图形
|
||
const markSvg = HGB_Exporter.buildSvgFrom(p.markElements || [], p.bg, null, { trim: true });
|
||
document.getElementById('plan-mark').innerHTML = svgInline(markSvg);
|
||
// 区域二：品牌组合（Lockup）—— 各位置
|
||
const lockups = p.lockups || [];
|
||
const activeIdx = Math.max(0, lockups.findIndex(lp => lp.pos === designState.activeLockup));
|
||
const activeLp = lockups[activeIdx] || { pos: '', name: '', elements: p.markElements || [] };
|
||
const lpSvg = HGB_Exporter.buildSvgFrom(activeLp.elements || [], p.bg, null, { trim: true });
|
||
document.getElementById('plan-lockup').innerHTML = svgInline(lpSvg);
|
||
// 位置切换标签
|
||
const tabs = document.getElementById('plan-lockup-tabs');
|
||
if (lockups.length) {
|
||
tabs.innerHTML = lockups.map((lp, i) =>
|
||
`<button class="plan-lockup-tab ${i === activeIdx ? 'active' : ''}" data-lppos="${lp.pos}">${esc(lp.name)}</button>`
|
||
).join('');
|
||
tabs.querySelectorAll('.plan-lockup-tab').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
designState.activeLockup = btn.dataset.lppos;
|
||
renderPlanPreview();
|
||
});
|
||
});
|
||
} else {
|
||
tabs.innerHTML = '';
|
||
}
|
||
document.getElementById('plan-modal-sub').textContent =
|
||
`${p.layoutName} · ${p.paletteName}`;
|
||
const concept = document.getElementById('plan-concept');
|
||
concept.innerHTML = p.concept
|
||
? `<div class="plan-concept-inner">💡 设计理念：${esc(p.concept)}</div>`
|
||
: '';
|
||
renderPlanAudit(p);
|
||
}
|
||
|
||
/** 预览弹窗：技能检查报告明细（方案评审步骤的完整结果） */
|
||
function renderPlanAudit(p) {
|
||
const el = document.getElementById('plan-audit');
|
||
if (!el) return;
|
||
const a = p.skillAudit;
|
||
if (!a || !a.items || !a.items.length) { el.innerHTML = ''; return; }
|
||
const failed = a.items.filter(it => !it.ok);
|
||
const ok = a.items.filter(it => it.ok);
|
||
const scoreHtml = a.score != null
|
||
? `<span class="audit-score ${a.score >= 90 ? 'a' : a.score >= 70 ? 'b' : 'c'}">🧩 ${a.score}</span>`
|
||
: '';
|
||
el.innerHTML = `
|
||
<div class="plan-audit-head">🔬 技能检查报告 <span class="plan-audit-sub">（方案评审 · 共 ${a.items.length} 项 · ✓ ${ok.length} / ⚠ ${failed.length}）</span></div>
|
||
<div class="plan-audit-body">
|
||
<div class="plan-audit-sum">${scoreHtml}<span class="plan-audit-note">${a.score != null ? (a.score >= 90 ? '质量优秀' : a.score >= 70 ? '基本达标' : '需重点优化') : ''}</span></div>
|
||
<div class="plan-audit-items">
|
||
${a.items.map(it => `
|
||
<div class="plan-audit-item ${it.ok ? 'ok' : 'warn'}">
|
||
<span class="pa-mark">${it.ok ? '✓' : '⚠'}</span>
|
||
<span class="pa-name">${esc(it.name)}</span>
|
||
<span class="pa-detail">${esc(it.detail)}</span>
|
||
</div>`).join('')}
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
/** 换配色变体：保持当前布局，切换风格色系（配色/背景/字重随风格整体切换） */
|
||
function variantColor() {
|
||
const p = designState.activePlan;
|
||
if (!p || !designState.genParam) return;
|
||
// 风格轮换池：已指定风格方向时仅在所选风格内循环，否则全部 20 种
|
||
const styleIds = designState.genParam.styleIds || [];
|
||
let styles = styleIds.length
|
||
? HGB_Styles.filter(s => styleIds.includes(s.id))
|
||
: HGB_Styles.slice();
|
||
if (!styles.length) styles = HGB_Styles.slice();
|
||
const idx = styles.findIndex(s => s.name === p.paletteName);
|
||
const next = styles[(idx < 0 ? 0 : idx + 1) % styles.length];
|
||
const gen = designState.avatarMode ? HGB_AvatarGen : HGB_Generator;
|
||
// 图标驱动：变体保持当前方案的锁定图标（不换其他图标）
|
||
const locked = !designState.avatarMode && p.lockedIcon;
|
||
const v = gen.generateVariant({
|
||
...designState.genParam,
|
||
...(locked ? { icons: [locked] } : {}),
|
||
layoutId: p.layoutId,
|
||
styleId: next.id,
|
||
lockup: designState.activeLockup
|
||
});
|
||
if (locked) v.lockedIcon = locked; // 变体延续锁定图标（供再次切换时保持同一图标）
|
||
v.skillAudit = auditPlan(v, designState.genParam.skills);
|
||
designState.activePlan = v;
|
||
renderPlanPreview();
|
||
renderPlans();
|
||
toast('🎨 已切换风格配色：' + v.paletteName + '（' + next.movement + '）');
|
||
}
|
||
|
||
/** 换布局变体：保持当前配色，切换到下一个布局模板 */
|
||
function variantLayout() {
|
||
const p = designState.activePlan;
|
||
if (!p || !designState.genParam) return;
|
||
// 头像模式仅在头像布局白名单内轮换；LOGO 模式排除头像专有布局
|
||
const layouts = designState.avatarMode
|
||
? HGB_Generator.LAYOUTS.filter(l => HGB_AvatarGen.isAvatarLayout(l.id))
|
||
: HGB_Generator.LAYOUTS.filter(l => !l.avatarOnly);
|
||
const idx = layouts.findIndex(x => x.id === p.layoutId);
|
||
const next = layouts[(idx + 1) % layouts.length];
|
||
const gen = designState.avatarMode ? HGB_AvatarGen : HGB_Generator;
|
||
// 图标驱动：变体保持当前方案的锁定图标（不换其他图标）
|
||
const locked = !designState.avatarMode && p.lockedIcon;
|
||
const v = gen.generateVariant({
|
||
...designState.genParam,
|
||
...(locked ? { icons: [locked] } : {}),
|
||
layoutId: next.id,
|
||
styleId: p.styleId, // 保持当前风格（配色自动跟随）
|
||
lockup: designState.activeLockup
|
||
});
|
||
if (locked) v.lockedIcon = locked; // 变体延续锁定图标（供再次切换时保持同一图标）
|
||
v.skillAudit = auditPlan(v, designState.genParam.skills);
|
||
designState.activePlan = v;
|
||
renderPlanPreview();
|
||
renderPlans();
|
||
toast('🅰 已切换布局：' + v.layoutName);
|
||
}
|
||
|
||
/** 基于当前参数再生成一批方案追加到方案库 */
|
||
async function variantMore() {
|
||
if (!designState.genParam) return;
|
||
let more;
|
||
if (designState.avatarMode) {
|
||
// 头像模式走 avatarGen（布局白名单约束）
|
||
more = await HGB_AvatarGen.generateAvatars({ ...designState.genParam, count: 6 });
|
||
} else if (designState.genParam.iconLocked && (designState.genParam.icons || []).length) {
|
||
// 图标驱动：保持「每图标一套数」结构，按总 6 套折算每图标追加套数
|
||
const n = designState.genParam.icons.length;
|
||
more = HGB_Generator.generatePlans({ ...designState.genParam, count: Math.max(1, Math.floor(6 / n)) });
|
||
} else {
|
||
// LOGO 模式走内置引擎
|
||
more = HGB_Generator.generatePlans({ ...designState.genParam, count: 6 });
|
||
}
|
||
for (const m of more) m.skillAudit = auditPlan(m, designState.genParam.skills);
|
||
designState.plans.push(...more);
|
||
renderPlans();
|
||
toast('➕ 已追加 ' + more.length + ' 套变体到方案库');
|
||
}
|
||
|
||
/** 当前预览弹窗中激活 Lockup 位置的元素数组 */
|
||
function activeLockupElements(p) {
|
||
const lp = (p.lockups || []).find(l => l.pos === designState.activeLockup);
|
||
return lp ? lp.elements : (p.elements || []);
|
||
}
|
||
|
||
/** 预览弹窗内直接导出当前方案（按当前选择的品牌组合位置；头像模式走平台规格弹窗） */
|
||
async function exportActive(fmt) {
|
||
const p = designState.activePlan;
|
||
if (!p) return;
|
||
if (designState.avatarMode && fmt === 'png') {
|
||
openExportModal('png');
|
||
return;
|
||
}
|
||
try {
|
||
const svgStr = HGB_Exporter.buildSvgFrom(
|
||
designState.avatarMode ? (p.markElements || []) : activeLockupElements(p),
|
||
p.bg, null, { trim: true });
|
||
if (fmt === 'svg') {
|
||
HGB_Exporter.exportSvg(svgStr);
|
||
toast('✅ 已导出 SVG 矢量图');
|
||
} else if (fmt === 'png') {
|
||
await HGB_Exporter.exportPng(1024, p.bg, svgStr);
|
||
toast('✅ 已导出 PNG（1024px）');
|
||
} else if (fmt === 'pdf') {
|
||
await HGB_Exporter.exportPdf(1024, p.bg, svgStr);
|
||
toast('✅ 已导出 PDF（1024px）');
|
||
}
|
||
} catch (err) {
|
||
toast('❌ 导出失败：' + err.message);
|
||
}
|
||
}
|
||
|
||
/* ================= 导出对话框 ================= */
|
||
function requireActivePlan() {
|
||
if (!designState.activePlan) {
|
||
toast('ℹ️ 请先「生成方案」并预览一个方案，再导出');
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function bindExportModal() {
|
||
const modal = document.getElementById('export-modal');
|
||
const formatBtns = modal.querySelectorAll('.format-btn');
|
||
|
||
// 头像平台规格（常驻渲染，头像模式显示）
|
||
document.getElementById('avatar-size-list').innerHTML =
|
||
HGB_AvatarGen.AVATAR_SIZES.map(s =>
|
||
`<label class="size-opt"><input type="checkbox" value="${s.size}" checked> ${esc(s.name)}<span class="size-note">${esc(s.note)}</span></label>`
|
||
).join('');
|
||
|
||
// 格式切换
|
||
formatBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
formatBtns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
exportFormat = btn.dataset.format;
|
||
updateExportOptions();
|
||
});
|
||
});
|
||
|
||
// 关闭
|
||
modal.querySelectorAll('[data-close]').forEach(btn => {
|
||
btn.addEventListener('click', closeExportModal);
|
||
});
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) closeExportModal();
|
||
});
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeExportModal();
|
||
});
|
||
|
||
// 执行导出
|
||
document.getElementById('btn-export-go').addEventListener('click', runExport);
|
||
}
|
||
|
||
/** 打开导出对话框，preset 为默认选中的格式 */
|
||
function openExportModal(preset = 'png') {
|
||
exportFormat = preset;
|
||
const modal = document.getElementById('export-modal');
|
||
modal.querySelector('.modal-title').textContent =
|
||
designState.avatarMode ? '📤 导出头像' : '📤 导出 LOGO';
|
||
modal.querySelectorAll('.format-btn').forEach(b => {
|
||
b.classList.toggle('active', b.dataset.format === preset);
|
||
});
|
||
updateExportOptions();
|
||
modal.classList.remove('hidden');
|
||
}
|
||
|
||
function closeExportModal() {
|
||
document.getElementById('export-modal').classList.add('hidden');
|
||
}
|
||
|
||
/** 根据所选格式启用/禁用尺寸与背景选项；头像模式强制 PNG + 平台规格区 */
|
||
function updateExportOptions() {
|
||
const sizeGroup = document.getElementById('size-group');
|
||
const bgGroup = document.getElementById('bg-group');
|
||
const transparentOpt = document.getElementById('bg-transparent-opt');
|
||
const avatarGroup = document.getElementById('avatar-size-group');
|
||
const formatBtns = document.querySelectorAll('.format-btn');
|
||
|
||
if (designState.avatarMode) {
|
||
// 头像模式：只导出 PNG，显示平台规格区，隐藏通用尺寸与其它格式
|
||
exportFormat = 'png';
|
||
formatBtns.forEach(b => {
|
||
b.classList.toggle('active', b.dataset.format === 'png');
|
||
b.style.display = b.dataset.format === 'png' ? '' : 'none';
|
||
});
|
||
sizeGroup.classList.add('is-disabled');
|
||
avatarGroup.classList.remove('hidden');
|
||
bgGroup.classList.remove('is-disabled');
|
||
transparentOpt.classList.remove('hidden');
|
||
return;
|
||
}
|
||
// 恢复正常 LOGO 导出
|
||
formatBtns.forEach(b => { b.style.display = ''; });
|
||
avatarGroup.classList.add('hidden');
|
||
|
||
if (exportFormat === 'svg') {
|
||
// SVG：无尺寸/背景选项（矢量，自动包含画布背景）
|
||
sizeGroup.classList.add('is-disabled');
|
||
bgGroup.classList.add('is-disabled');
|
||
} else {
|
||
sizeGroup.classList.remove('is-disabled');
|
||
// PDF/JPG 不支持透明背景
|
||
if (exportFormat === 'png') {
|
||
bgGroup.classList.remove('is-disabled');
|
||
transparentOpt.classList.remove('hidden');
|
||
} else {
|
||
bgGroup.classList.remove('is-disabled');
|
||
transparentOpt.classList.add('hidden');
|
||
const r = document.querySelector('input[name="export-bg"][value="transparent"]');
|
||
if (r && r.checked) {
|
||
document.querySelector('input[name="export-bg"][value="design"]').checked = true;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/** 读取用户选择的背景色（null = 透明） */
|
||
function resolveBgColor() {
|
||
const r = document.querySelector('input[name="export-bg"]:checked');
|
||
const val = r ? r.value : 'design';
|
||
if (val === 'transparent') return null;
|
||
if (val === 'white') return '#FFFFFF';
|
||
return designState.activePlan ? (designState.activePlan.bg || '#FFFFFF') : '#FFFFFF';
|
||
}
|
||
|
||
/** 读取勾选的尺寸 */
|
||
function selectedSizes() {
|
||
const boxes = document.querySelectorAll('#size-group input[type="checkbox"]:checked');
|
||
return Array.from(boxes).map(b => parseInt(b.value, 10));
|
||
}
|
||
|
||
/** 执行导出（导出当前活动方案） */
|
||
async function runExport() {
|
||
if (!requireActivePlan()) return;
|
||
const goBtn = document.getElementById('btn-export-go');
|
||
goBtn.disabled = true;
|
||
|
||
try {
|
||
// 头像模式：多规格 PNG（平台 + 自定义），可选圆形裁切
|
||
if (designState.avatarMode) {
|
||
const mark = designState.activePlan.markElements || [];
|
||
const sizes = [];
|
||
document.querySelectorAll('#avatar-size-list input:checked').forEach(b => sizes.push(parseInt(b.value, 10)));
|
||
const custom = parseInt(document.getElementById('avatar-custom-size').value, 10);
|
||
if (custom >= 32 && custom <= 2048 && !sizes.includes(custom)) sizes.push(custom);
|
||
if (!sizes.length) {
|
||
toast('⚠️ 请至少选择一种平台规格');
|
||
return;
|
||
}
|
||
const round = document.getElementById('avatar-round').checked;
|
||
const bg = resolveBgColor();
|
||
// 透明背景时 SVG 内背景 rect 用 transparent（头像透明素材）；否则用选定背景
|
||
const svgBg = bg === null ? 'transparent' : bg;
|
||
const svgStr = HGB_Exporter.buildSvgFrom(mark, svgBg, null, { trim: true });
|
||
const base = (document.getElementById('project-name').value || '我的品牌') + '_头像';
|
||
const results = await HGB_Exporter.exportAvatarPngs(svgStr, sizes, { bg, round, base });
|
||
toast(`✅ 已导出 ${results.length} 个头像（PNG${round ? ' · 圆形' : ''}）`);
|
||
closeExportModal();
|
||
return;
|
||
}
|
||
|
||
const svgStr = HGB_Exporter.buildSvgFrom(
|
||
designState.activePlan.elements, designState.activePlan.bg, null, { trim: true });
|
||
if (exportFormat === 'svg') {
|
||
HGB_Exporter.exportSvg(svgStr);
|
||
toast('✅ 已导出 SVG 矢量图');
|
||
closeExportModal();
|
||
return;
|
||
}
|
||
|
||
const sizes = selectedSizes();
|
||
if (!sizes.length) {
|
||
toast('⚠️ 请至少选择一种尺寸规格');
|
||
return;
|
||
}
|
||
const bg = resolveBgColor();
|
||
|
||
let count = 0;
|
||
for (const size of sizes) {
|
||
if (exportFormat === 'png') await HGB_Exporter.exportPng(size, bg, svgStr);
|
||
else if (exportFormat === 'jpg') await HGB_Exporter.exportJpg(size, bg, svgStr);
|
||
else if (exportFormat === 'pdf') await HGB_Exporter.exportPdf(size, bg, svgStr);
|
||
count++;
|
||
}
|
||
toast(`✅ 已导出 ${count} 个文件（${exportFormat.toUpperCase()}）`);
|
||
closeExportModal();
|
||
} catch (err) {
|
||
toast('❌ 导出失败：' + err.message);
|
||
} finally {
|
||
goBtn.disabled = false;
|
||
}
|
||
}
|
||
|
||
|
||
/* ================= 方案版本管理 ================= */
|
||
const LS_PLAN_VERSION_KEY = 'hgb_plan_versions';
|
||
|
||
function loadPlanVersions() {
|
||
try {
|
||
return JSON.parse(localStorage.getItem(LS_PLAN_VERSION_KEY)) || [];
|
||
} catch (e) { return []; }
|
||
}
|
||
|
||
function savePlanVersions(list) {
|
||
localStorage.setItem(LS_PLAN_VERSION_KEY, JSON.stringify(list.slice(0, 50)));
|
||
}
|
||
|
||
function bindVersionActions() {
|
||
document.getElementById('btn-save-version').addEventListener('click', () => {
|
||
if (!requireActivePlan()) return;
|
||
const versions = loadPlanVersions();
|
||
const brandName = (document.getElementById('design-brand').value || '').trim();
|
||
versions.unshift({
|
||
id: 'v_' + Date.now().toString(36),
|
||
time: Date.now(),
|
||
name: brandName || designState.activePlan.name,
|
||
plan: JSON.parse(JSON.stringify(designState.activePlan))
|
||
});
|
||
savePlanVersions(versions);
|
||
renderVersions();
|
||
toast('💾 已保存当前方案版本');
|
||
});
|
||
document.getElementById('btn-clear-versions').addEventListener('click', () => {
|
||
if (!loadPlanVersions().length) { toast('ℹ️ 暂无版本记录'); return; }
|
||
if (confirm('确定清空所有版本记录？')) {
|
||
savePlanVersions([]);
|
||
renderVersions();
|
||
toast('🧹 已清空版本记录');
|
||
}
|
||
});
|
||
}
|
||
|
||
function renderVersions() {
|
||
const wrap = document.getElementById('version-list');
|
||
const list = loadPlanVersions();
|
||
if (!list.length) {
|
||
wrap.innerHTML = '<p class="pane-tip">暂无版本。预览方案后点击「💾 保存版本」记录设计</p>';
|
||
return;
|
||
}
|
||
wrap.innerHTML = list.map(v => {
|
||
const t = new Date(v.time);
|
||
const timeStr =
|
||
`${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, '0')}-${String(t.getDate()).padStart(2, '0')} ` +
|
||
`${String(t.getHours()).padStart(2, '0')}:${String(t.getMinutes()).padStart(2, '0')}`;
|
||
return `
|
||
<div class="version-item" data-version="${v.id}">
|
||
<div class="version-name">${esc(v.name)}</div>
|
||
<div class="version-time">🕐 ${timeStr}</div>
|
||
<div class="version-ops">
|
||
<button class="tb-btn sm" data-vact="restore" title="恢复此方案到预览">↩ 恢复</button>
|
||
<button class="tb-btn sm" data-vact="del" title="删除">🗑</button>
|
||
</div>
|
||
</div>`;
|
||
}).join('');
|
||
|
||
wrap.querySelectorAll('.version-item').forEach(item => {
|
||
const v = loadPlanVersions().find(x => x.id === item.dataset.version);
|
||
if (!v) return;
|
||
item.querySelectorAll('button').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const act = btn.dataset.vact;
|
||
if (act === 'restore') {
|
||
designState.activePlan = JSON.parse(JSON.stringify(v.plan));
|
||
renderPlans();
|
||
renderPlanPreview();
|
||
openPlanPreview(designState.activePlan);
|
||
toast('↩ 已恢复方案版本');
|
||
} else if (act === 'del') {
|
||
savePlanVersions(loadPlanVersions().filter(x => x.id !== v.id));
|
||
renderVersions();
|
||
toast('🗑 已删除该版本');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
return { init, toast };
|
||
})();
|