feat: 初始化画个标仓库 - AI驱动设计系统(BYOK模式) - 224源/371504图标+25海报源+130技能

index.html

@@ -0,0 +1,343 @@
+<!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>画个标 · 智能 LOGO 设计</title>
+<link rel="stylesheet" href="css/style.css?v=20260815h">
+<script>window.HGB_WORKSPACE = 'logo';</script>
+</head>
+<body>
+<!-- ===== 顶部工具栏 ===== -->
+<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="avatar.html" title="头像设计工作台：纯图形标识 · 圆形预览 · 微信/QQ/抖音/App图标等平台规格一键导出">🖼 头像设计</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>
+    <a class="tb-btn" href="materials.html" title="素材库：按行预览 LOGO/头像/海报素材，快速浏览大致样式">🗃 素材库</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">&nbsp;</div>
+        <button class="tb-btn primary w-full" id="btn-generate">🤖 AI 生成方案</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">未选图标：AI 基于「品牌描述 + 行业 + 内置图标库 + 启用技能」自主设计多套方案。🎯 选择 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 hidden" 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">
+      🎯 配置左侧参数，点击「🚀 生成方案」，智能组合多套 LOGO 方案
+    </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">📤 导出 LOGO</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=20260824a"></script>
+<script src="js/skills/color.js?v=20260824a"></script>
+<script src="js/skills/typography.js?v=20260824a"></script>
+<script src="js/skills/icon.js?v=20260824a"></script>
+<script src="js/skills/ai.js?v=20260815b"></script>
+<script src="js/skills/presentation.js?v=20260824a"></script>
+<script src="js/skills/export.js?v=20260824a"></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>