342 lines
17 KiB
HTML
342 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="icon" type="image/svg+xml" href="logo/favicon.svg">
|
||
<title>画个标 · 智能头像设计</title>
|
||
<link rel="stylesheet" href="css/style.css?v=20260815h">
|
||
<script>window.HGB_WORKSPACE = 'avatar';</script>
|
||
</head>
|
||
<body class="avatar-mode">
|
||
<!-- ===== 顶部工具栏 ===== -->
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<div class="brand">
|
||
<img class="brand-icon" src="logo/logo-mark.svg" alt="画个标" width="20" height="20">
|
||
<span class="brand-name">画个标</span>
|
||
<span class="brand-tag">✨ 头像设计</span>
|
||
</div>
|
||
<input id="project-name" class="project-name" value="我的品牌" maxlength="30" title="项目名称">
|
||
</div>
|
||
<div class="topbar-right">
|
||
<a class="tb-btn" href="index.html" title="LOGO 设计工作台：图形标识 + 品牌组合，AI 生成多套 LOGO 方案">🎨 LOGO 设计</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn" href="poster.html" title="海报设计工作台：多规格画布 · AI 生成多套海报方案">📰 海报设计</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn" href="emoji.html" title="动态表情设计工作台：GIF/WebM 动图导出">😀 表情设计</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn" href="skills.html" title="技能中心：集中整合所有设计技能的学习来源、详细说明与调用参数">🧩 技能中心</a>
|
||
<div class="tb-divider"></div>
|
||
<a class="tb-btn" href="sources.html" title="素材中心：分类管理图标/表情/品牌素材，来源、协议与构建信息可查">📚 素材中心</a>
|
||
<div class="tb-divider"></div>
|
||
<button class="tb-btn" id="btn-ai-settings" title="配置 DeepSeek API Key">🤖 AI 设置</button>
|
||
<div class="tb-divider"></div>
|
||
<button class="tb-btn" id="btn-export-svg" title="导出当前方案为 SVG 矢量图">导出 SVG</button>
|
||
<button class="tb-btn primary" id="btn-export-png" title="导出当前方案为 PNG 位图">导出 PNG ⬇</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== 智能设计工作台 ===== -->
|
||
<div class="design-workspace">
|
||
|
||
<!-- 左：配置区 -->
|
||
<aside class="design-config">
|
||
<div class="dc-group">
|
||
<div class="modal-label">🏭 选择行业</div>
|
||
<div id="design-industry" class="industry-tabs"></div>
|
||
</div>
|
||
|
||
<div class="dc-group dc-row">
|
||
<div class="dc-col">
|
||
<div class="modal-label">品牌名</div>
|
||
<input type="text" id="design-brand" class="skill-search" placeholder="如：学府教育 / EDUCATION">
|
||
</div>
|
||
<div class="dc-col">
|
||
<div class="modal-label">副标题（可选）</div>
|
||
<input type="text" id="design-sub" class="skill-search" placeholder="如：GLOBAL EDUCATION">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dc-group">
|
||
<div class="modal-label">💬 品牌描述（AI 设计核心依据）</div>
|
||
<textarea id="design-desc" class="skill-search dc-desc" rows="2" maxlength="200" placeholder="如：面向高净值家庭的留学教育品牌，主打高端定制与全球视野，稳重而不失现代感…"></textarea>
|
||
</div>
|
||
|
||
<div class="dc-group">
|
||
<div class="modal-label">🎨 风格方向（多选；不选 = 智能搭配全部风格）</div>
|
||
<div id="design-styles" class="industry-tabs"></div>
|
||
</div>
|
||
|
||
<div class="dc-group dc-row">
|
||
<div class="dc-col">
|
||
<div class="modal-label">每图标套数 <span id="design-count-label-tip" class="pane-tip" style="display:inline-block;margin-left:4px;font-size:11px;vertical-align:middle;">未选图标=总套数</span></div>
|
||
<select id="design-count" class="skill-search">
|
||
<option value="1">1 套</option>
|
||
<option value="2">2 套</option>
|
||
<option value="3" selected>3 套</option>
|
||
<option value="4">4 套</option>
|
||
<option value="5">5 套</option>
|
||
</select>
|
||
</div>
|
||
<div class="dc-col dc-gen-btn">
|
||
<div class="modal-label"> </div>
|
||
<button class="tb-btn primary w-full" id="btn-generate">🚀 生成头像</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dc-group">
|
||
<div class="modal-label">🎨 选择图标（1-5 个，不选则 AI 自动选用）</div>
|
||
<div id="design-icons" class="design-icons"></div>
|
||
<button class="tb-btn w-full import-more-btn" id="btn-builtin-icons" title="浏览并选择内置的 32 万+ 开源图标，供 AI 设计使用">
|
||
📦 内置库浏览选择（32 万+）
|
||
</button>
|
||
</div>
|
||
|
||
<div class="dc-group">
|
||
<div class="modal-label">🧩 设计流程 · 技能流水线 <span class="pane-tip" style="display:inline-block;margin-left:6px;margin-top:4px;vertical-align:middle;">洞察 → 生成 → 评审 → 迭代 → 交付，前 3 步默认启用</span></div>
|
||
<div id="design-skills" class="skill-checks"></div>
|
||
</div>
|
||
|
||
<div class="dc-group">
|
||
<div class="modal-label">💡 智能提示</div>
|
||
<p class="pane-tip" id="design-tip">头像 = 纯图形标识（图标 + 容器/环/盾/几何），不含文字，用于微信/QQ/抖音/App 图标/网站 Favicon 等场景，小尺寸（64px）也必须清晰可辨。🎯 选择 1-5 个图标后进入「图标驱动」，配色/构图自动搭配。</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右：方案库 -->
|
||
<div class="design-plans-wrap">
|
||
<div class="plans-head">
|
||
<span id="plans-title">👤 头像库（共 0 套）</span>
|
||
<span class="plans-tip">点击卡片「预览」查看大图 · 智能切换配色/布局变体 · 平台规格一键导出</span>
|
||
<span class="plans-head-ops">
|
||
<button class="tb-btn sm" id="btn-dicebear" title="55 种 DiceBear 风格 × seed 确定性组合，一键生成个性化头像">🧸 DiceBear 头像</button>
|
||
<button class="tb-btn sm" id="btn-save-version" title="保存当前预览方案到版本库">💾 保存版本</button>
|
||
<button class="tb-btn sm" id="btn-clear-versions" title="清空所有版本">🧹</button>
|
||
</span>
|
||
</div>
|
||
<div id="plans-grid" class="plans-grid"></div>
|
||
<div id="plans-empty" class="plans-empty">
|
||
🎯 配置左侧参数，点击「🚀 生成头像」，智能组合多套头像方案
|
||
</div>
|
||
<div class="versions-section">
|
||
<div class="group-title">🗂 方案版本记录（本地保存）</div>
|
||
<div id="version-list" class="version-list"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 方案预览弹窗 ===== -->
|
||
<div id="plan-modal" class="modal-mask hidden">
|
||
<div class="modal plan-modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">👁 头像预览</span>
|
||
<span class="modal-title-sub" id="plan-modal-sub"></span>
|
||
<button class="modal-close" data-plan-close>✕</button>
|
||
</div>
|
||
<div class="modal-body plan-modal-body">
|
||
<div class="plan-areas">
|
||
<div class="plan-area">
|
||
<div class="plan-area-label">🔷 图形标识 <span class="plan-area-en">Mark</span></div>
|
||
<div class="plan-big" id="plan-mark"></div>
|
||
</div>
|
||
<div class="plan-area plan-area-lockup">
|
||
<div class="plan-area-label">🅰 品牌组合 <span class="plan-area-en">Lockup</span></div>
|
||
<div class="plan-lockup-tabs" id="plan-lockup-tabs"></div>
|
||
<div class="plan-big" id="plan-lockup"></div>
|
||
</div>
|
||
</div>
|
||
<div id="plan-concept" class="plan-concept-big"></div>
|
||
<div id="plan-audit" class="plan-audit"></div>
|
||
<div class="plan-variants">
|
||
<div class="modal-label">🎨 变体微调（智能重排，无需手工拖拽）</div>
|
||
<div class="variant-row">
|
||
<button class="tb-btn" id="btn-var-color" title="切换到下一套配色方案">🎨 换配色</button>
|
||
<button class="tb-btn" id="btn-var-layout" title="切换到下一个布局模板">🅰 换布局</button>
|
||
<button class="tb-btn" id="btn-var-more" title="基于当前参数再生成一批方案加入方案库">➕ 更多变体入方案库</button>
|
||
</div>
|
||
<div class="modal-label" style="margin-top:12px">📤 导出当前头像</div>
|
||
<div class="variant-row">
|
||
<button class="tb-btn primary" id="btn-plan-png">导出 PNG</button>
|
||
<button class="tb-btn" id="btn-plan-svg">导出 SVG</button>
|
||
<button class="tb-btn" id="btn-plan-pdf">导出 PDF</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="tb-btn" data-plan-close>关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<!-- ===== DiceBear 风格头像弹窗（M4：29 风格 × seed 确定性组合） ===== -->
|
||
<div id="dicebear-modal" class="modal-mask hidden">
|
||
<div class="modal dicebear-modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">🧸 DiceBear 风格头像</span>
|
||
<span class="modal-title-sub">55 种风格 × seed 确定性组合（同一风格同一 seed 输出相同）</span>
|
||
<button class="modal-close" data-dicebear-close>✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="modal-label">选择风格</div>
|
||
<div id="dicebear-styles" class="industry-tabs"></div>
|
||
<div class="dicebear-ops">
|
||
<input type="text" id="dicebear-seed" class="skill-search" placeholder="seed 种子（留空自动随机）">
|
||
<button class="tb-btn" id="dicebear-random" title="随机换一批 seed">🎲 换一批</button>
|
||
<button class="tb-btn primary" id="dicebear-gen" title="当前风格 + 随机 seed 生成 8 套">🚀 生成 8 套</button>
|
||
<button class="tb-btn" id="dicebear-export" title="导出选中的头像为 PNG（微信/QQ/抖音/App 等规格）">📤 导出 PNG</button>
|
||
</div>
|
||
<div id="dicebear-grid" class="dicebear-grid"></div>
|
||
<div class="dicebear-tip">点击卡片选中（可再次点击切换不同风格）；「导出 PNG」按平台规格批量输出并圆形裁切。</div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="tb-btn" data-dicebear-close>关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== AI 设置弹窗 ===== -->
|
||
<div id="ai-modal" class="modal-mask hidden">
|
||
<div class="modal ai-modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">🤖 AI 设置（DeepSeek）</span>
|
||
<button class="modal-close" data-ai-close>✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="modal-group">
|
||
<div class="modal-label">API Key</div>
|
||
<input type="password" id="ai-key" class="skill-search" placeholder="sk-xxxxxxxx" autocomplete="off" spellcheck="false">
|
||
<p class="pane-tip">Key 仅保存在你本地浏览器（localStorage），不上传任何服务器。请到 platform.deepseek.com 获取。</p>
|
||
</div>
|
||
<div class="modal-group">
|
||
<div class="modal-label">模型</div>
|
||
<select id="ai-model" class="skill-search"></select>
|
||
</div>
|
||
<div id="ai-test-result" class="ai-test-result"></div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="tb-btn" id="btn-ai-clear">清除 Key</button>
|
||
<button class="tb-btn" id="btn-ai-test">🔌 测试连接</button>
|
||
<button class="tb-btn primary" id="btn-ai-save">💾 保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 导出对话框 ===== -->
|
||
<div id="export-modal" class="modal-mask hidden">
|
||
<div class="modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">📤 导出头像</span>
|
||
<button class="modal-close" data-close>✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
|
||
<div class="modal-group">
|
||
<div class="modal-label">导出格式</div>
|
||
<div class="format-row">
|
||
<button class="format-btn active" data-format="png">PNG<span class="fmt-note">透明背景</span></button>
|
||
<button class="format-btn" data-format="jpg">JPG<span class="fmt-note">白色背景</span></button>
|
||
<button class="format-btn" data-format="svg">SVG<span class="fmt-note">矢量图</span></button>
|
||
<button class="format-btn" data-format="pdf">PDF<span class="fmt-note">文档/印刷</span></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-group" id="size-group">
|
||
<div class="modal-label">尺寸规格（可多选）</div>
|
||
<div class="size-row">
|
||
<label class="size-opt"><input type="checkbox" value="256" checked> 头像 256<span class="size-note">微信/微博</span></label>
|
||
<label class="size-opt"><input type="checkbox" value="512" checked> 通用 512<span class="size-note">网站</span></label>
|
||
<label class="size-opt"><input type="checkbox" value="1024"> 印刷 1024<span class="size-note">名片物料</span></label>
|
||
<label class="size-opt"><input type="checkbox" value="2048"> 超清 2048<span class="size-note">海报横幅</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-group hidden" id="avatar-size-group">
|
||
<div class="modal-label">📱 头像平台规格（可多选）</div>
|
||
<div class="size-row" id="avatar-size-list"></div>
|
||
<div class="size-row avatar-custom-row">
|
||
<label class="size-opt">自定义 <input type="number" id="avatar-custom-size" value="500" min="32" max="2048" class="avatar-custom-input"> px</label>
|
||
<label class="size-opt"><input type="checkbox" id="avatar-round" checked> 🔵 圆形裁切</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-group" id="bg-group">
|
||
<div class="modal-label">背景选项</div>
|
||
<div class="bg-opt-row">
|
||
<label class="size-opt"><input type="radio" name="export-bg" value="design" checked> 方案背景</label>
|
||
<label class="size-opt"><input type="radio" name="export-bg" value="white"> 纯白色</label>
|
||
<label class="size-opt" id="bg-transparent-opt"><input type="radio" name="export-bg" value="transparent"> 透明（仅PNG）</label>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="tb-btn" data-close>取消</button>
|
||
<button class="tb-btn primary" id="btn-export-go">⬇ 立即导出</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 内置图标库浏览弹窗 ===== -->
|
||
<div id="builtin-modal" class="modal-mask hidden">
|
||
<div class="modal builtin-modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">📦 内置图标库（离线 32 万+）</span>
|
||
<span class="modal-title-sub" id="builtin-head-info"></span>
|
||
<button class="modal-close" data-builtin-close>✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="builtin-toolbar">
|
||
<div id="builtin-types" class="builtin-types"></div>
|
||
<div id="builtin-sources" class="builtin-sources"></div>
|
||
<div id="builtin-cats" class="builtin-sources builtin-cats"></div>
|
||
<div class="builtin-search-row">
|
||
<input type="text" id="builtin-search" class="skill-search" placeholder="🔍 搜索图标名称（英文）…" autocomplete="off">
|
||
<span id="builtin-count" class="gh-count"></span>
|
||
</div>
|
||
</div>
|
||
<div id="builtin-grid" class="gh-grid"></div>
|
||
<div id="builtin-more-wrap" class="gh-more-wrap">
|
||
<button class="tb-btn" id="builtin-load-more">加载更多</button>
|
||
</div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<span id="builtin-foot" class="gh-foot-info"></span>
|
||
<button class="tb-btn" data-builtin-close>关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== GitHub 资源浏览弹窗（已移除：内置 32 万+ 图标库覆盖需求） ===== -->
|
||
|
||
<!-- 脚本 -->
|
||
<script src="js/data/icons.js"></script>
|
||
<script src="js/data/industries.js"></script>
|
||
<script src="js/data/styles.js?v=20260813"></script>
|
||
<script src="js/data/palettes.js"></script>
|
||
<script src="js/data/fonts.js"></script>
|
||
<script src="js/data/decorations.js"></script>
|
||
<script src="js/core/store.js?v=20260816"></script>
|
||
<script src="js/core/exporter.js?v=20260812h"></script>
|
||
<script src="js/core/generator.js?v=20260815c"></script>
|
||
<script src="js/core/avatarGen.js?v=20260815c"></script>
|
||
<script src="js/core/dicebear.js?v=20260822e"></script>
|
||
<script src="js/core/ai.js?v=20260927a"></script>
|
||
<script src="js/core/aiDesigner.js?v=20260812h"></script>
|
||
<script src="js/skills/core.js?v=20260824a"></script>
|
||
<script src="js/skills/layout.js?v=20260823d"></script>
|
||
<script src="js/skills/color.js?v=20260823d"></script>
|
||
<script src="js/skills/typography.js?v=20260823d"></script>
|
||
<script src="js/skills/icon.js?v=20260823d"></script>
|
||
<script src="js/skills/ai.js?v=20260815b"></script>
|
||
<script src="js/skills/presentation.js?v=20260823d"></script>
|
||
<script src="js/skills/export.js?v=20260823d"></script>
|
||
<script src="js/ui/panels.js?v=20260927a"></script>
|
||
<script src="js/data/builtin-icons.js?v=20260823g"></script>
|
||
<script src="js/core/iconlib.js?v=20260823g"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|