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

2026-10-03 21:44:18 +08:00
commit 9e222877ea
497 changed files with 43611 additions and 0 deletions
@@ -0,0 +1,197 @@
+// 临时生成脚本：富样式底部导航图标方案预览（勿提交）
+const fs = require('fs');
+const path = 'js/data/sources/';
+global.window = {};
+
+const RED = '#C8102E';
+const GRAY = '#999999';
+
+function load(sid) { eval(fs.readFileSync(path + sid + '.js', 'utf8')); return window['HGB_Source_' + sid]; }
+function findIcon(data, ref) {
+  const namePart = ref.includes(':') ? ref.split(':')[1] : ref;
+  return (data.icons || []).find(i => i.id === ref || i.name === namePart) || null;
+}
+
+// 富样式源：全部 native（内容自带颜色 / currentColor），viewBox 24
+const SOURCES = {};
+['twemoji', 'emojione', 'fluent-emoji', 'flat-color-icons', 'pixelarticons', 'gameicons'].forEach(sid => { SOURCES[sid] = {}; });
+
+function renderSVG(ic) {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' + ic.svg + '</svg>';
+}
+
+const SOLUTIONS = [
+  {
+    key: 'G', title: 'Twemoji 多彩扁平表情', desc: 'Twitter 同款扁平表情，彩色生动、识别度高；未选中置灰、选中全彩；「发房」= 彩色铅笔', mode: 'color',
+    source: 'twemoji', pub: 'twemoji:pencil',
+    items: [
+      { label: '首页', n: 'twemoji:house', a: 'twemoji:house' },
+      { label: '租房', n: 'twemoji:magnifying-glass-tilted-left', a: 'twemoji:magnifying-glass-tilted-left' },
+      { label: '消息', n: 'twemoji:speech-balloon', a: 'twemoji:speech-balloon' },
+      { label: '我的', n: 'twemoji:bust-in-silhouette', a: 'twemoji:bust-in-silhouette' }
+    ]
+  },
+  {
+    key: 'H', title: 'EmojiOne 3D 立体表情', desc: 'EmojiOne 3D 渲染表情，立体质感、色彩饱和；「发房」= 彩色铅笔', mode: 'color',
+    source: 'emojione', pub: 'emojione:pencil',
+    items: [
+      { label: '首页', n: 'emojione:house', a: 'emojione:house' },
+      { label: '租房', n: 'emojione:magnifying-glass-tilted-left', a: 'emojione:magnifying-glass-tilted-left' },
+      { label: '消息', n: 'emojione:speech-balloon', a: 'emojione:speech-balloon' },
+      { label: '我的', n: 'emojione:bust-in-silhouette', a: 'emojione:bust-in-silhouette' }
+    ]
+  },
+  {
+    key: 'I', title: 'Fluent Emoji 微软 3D 卡通', desc: '微软 Fluent 3D 表情，圆润软萌、细节丰富；「发房」= 彩色铅笔', mode: 'color',
+    source: 'fluent-emoji', pub: 'fluent-emoji:pencil',
+    items: [
+      { label: '首页', n: 'fluent-emoji:house', a: 'fluent-emoji:house' },
+      { label: '租房', n: 'fluent-emoji:magnifying-glass-tilted-left', a: 'fluent-emoji:magnifying-glass-tilted-left' },
+      { label: '消息', n: 'fluent-emoji:speech-balloon', a: 'fluent-emoji:speech-balloon' },
+      { label: '我的', n: 'fluent-emoji:bust-in-silhouette', a: 'fluent-emoji:bust-in-silhouette' }
+    ]
+  },
+  {
+    key: 'J', title: 'Flat Color Icons 多彩扁平', desc: '多彩半透明玻璃质感图标，商务活泼兼顾；「发房」= 彩色钥匙', mode: 'color',
+    source: 'flat-color-icons', pub: 'flat-color-icons:key',
+    items: [
+      { label: '首页', n: 'flat-color-icons:home', a: 'flat-color-icons:home' },
+      { label: '租房', n: 'flat-color-icons:search', a: 'flat-color-icons:search' },
+      { label: '消息', n: 'flat-color-icons:comments', a: 'flat-color-icons:comments' },
+      { label: '我的', n: 'flat-color-icons:businessman', a: 'flat-color-icons:businessman' }
+    ]
+  },
+  {
+    key: 'K', title: 'Pixel 像素风', desc: '8-bit 像素图标，造型感强、辨识度高；「发房」= 红圆内置铅笔', mode: 'mono',
+    source: 'pixelarticons', pub: 'pixelarticons:edit',
+    items: [
+      { label: '首页', n: 'pixelarticons:home', a: 'pixelarticons:home' },
+      { label: '租房', n: 'pixelarticons:search', a: 'pixelarticons:search' },
+      { label: '消息', n: 'pixelarticons:message', a: 'pixelarticons:message' },
+      { label: '我的', n: 'pixelarticons:user', a: 'pixelarticons:user' }
+    ]
+  },
+  {
+    key: 'L', title: 'Game Icons 游戏插画风', desc: '游戏插画质感、细节华丽，风格大胆独特；「发房」= 红圆内置羽毛笔', mode: 'mono',
+    source: 'gameicons', pub: 'gameicons:quill-ink',
+    items: [
+      { label: '首页', n: 'gameicons:house', a: 'gameicons:house' },
+      { label: '租房', n: 'gameicons:magnifying-glass', a: 'gameicons:magnifying-glass' },
+      { label: '消息', n: 'gameicons:chat-bubble', a: 'gameicons:chat-bubble' },
+      { label: '我的', n: 'gameicons:person', a: 'gameicons:person' }
+    ]
+  }
+];
+
+const dataCache = {};
+for (const sid of Object.keys(SOURCES)) {
+  try { dataCache[sid] = load(sid); } catch (e) { console.error('加载失败 ' + sid); process.exit(1); }
+}
+
+let cards = '';
+const missList = [];
+// 发房按钮：单色方案=红圆白图标；彩色方案=大号彩色相机图标（带投影）
+function pubBtn(sol) {
+  const ic = findIcon(dataCache[sol.source], sol.pub);
+  if (!ic) { missList.push(sol.pub); return '<div class="plus"><span>+</span></div>'; }
+  if (sol.mode === 'mono') return '<div class="plus">' + renderSVG(ic) + '</div>';
+  return '<div class="plus-colored">' + renderSVG(ic) + '</div>';
+}
+for (const sol of SOLUTIONS) {
+  const res = [];
+  for (const it of sol.items) {
+    const nIc = findIcon(dataCache[sol.source], it.n);
+    const aIc = findIcon(dataCache[sol.source], it.a);
+    if (!nIc) missList.push(it.n);
+    if (!aIc) missList.push(it.a);
+    res.push({ label: it.label, normal: nIc ? renderSVG(nIc) : '', active: aIc ? renderSVG(aIc) : '' });
+  }
+  const mono = sol.mode === 'mono';
+  const plus = pubBtn(sol);
+  const icCls = (r, active) => mono
+    ? `<div class="ic${active ? ' active' : ''}">${active ? r.active : r.normal}</div>`
+    : `<div class="ic${active ? '' : ' gray'}">${active ? r.active : r.normal}</div>`;
+  const arr = [res[0], res[1], null, res[2], res[3]];
+  const barNormal = `<div class="tabbar">${arr.map(r => r
+    ? `<div class="tabitem">${icCls(r, false)}<div class="lb">${r.label}</div></div>`
+    : `<div class="tabitem"><div class="ic">${plus}</div><div class="lb">发房</div></div>`).join('')}</div>`;
+  const barActive = `<div class="tabbar">${arr.map((r, i) => r
+    ? `<div class="tabitem${i === 0 ? ' active' : ''}">${icCls(r, i === 0)}<div class="lb">${r.label}</div></div>`
+    : `<div class="tabitem"><div class="ic">${plus}</div><div class="lb">发房</div></div>`).join('')}</div>`;
+  const strip = res.map(r => `<div class="state-cell">
+      <div class="state-ic${mono ? '' : ' gray'}">${r.normal}</div><div class="state-lb">${r.label}·未选</div>
+      <div class="state-ic${mono ? ' active' : ''}">${r.active}</div><div class="state-lb${mono ? ' active' : ''}">${r.label}·选中</div>
+    </div>`).join('');
+  const ids = [...sol.items.map(it => it.n), ...sol.items.map(it => it.a)].join('、');
+  cards += `
+  <div class="card">
+    <div class="card-head">
+      <div class="card-title"><span class="tag">方案 ${sol.key}</span>${sol.title}</div>
+      <div class="card-desc">${sol.desc}</div>
+    </div>
+    <div class="card-body">
+      <div class="mock-wrap">
+        <div class="mock-col"><div class="mock-title">常规态（全部未选）</div><div class="phone">${barNormal}</div></div>
+        <div class="mock-col"><div class="mock-title">选中态（首页高亮）</div><div class="phone">${barActive}</div></div>
+      </div>
+      <div class="state-strip">${strip}</div>
+      <div class="ids">图标：<code>${ids}</code></div>
+    </div>
+  </div>`;
+}
+
+const html = `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>小虎租房 · 底部导航图标方案（富样式篇）</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:#f5f5f7; color:#333; padding:36px 28px 80px; }
+  h1 { font-size:24px; margin-bottom:6px; }
+  .sub { color:#888; font-size:13px; margin-bottom:32px; }
+  .card { background:#fff; border-radius:16px; padding:24px 28px; margin-bottom:24px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
+  .card-head { margin-bottom:18px; }
+  .card-title { font-size:18px; font-weight:700; display:flex; align-items:center; gap:10px; }
+  .tag { display:inline-block; background:#C8102E; color:#fff; font-size:12px; font-weight:600; border-radius:6px; padding:2px 8px; }
+  .card-desc { font-size:13px; color:#888; margin-top:8px; }
+  .card-body { display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; }
+  .mock-wrap { display:flex; gap:20px; }
+  .mock-col { text-align:center; }
+  .mock-title { font-size:12px; color:#999; margin-bottom:10px; }
+  .phone { width:300px; border-radius:20px; border:6px solid #222; background:#fff; overflow:hidden; }
+  .phone::before { content:""; display:block; height:8px; }
+  .tabbar { display:flex; height:54px; background:#fff; border-top:1px solid #f0f0f0; }
+  .tabitem { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
+  .tabitem .ic { width:24px; height:24px; color:#999; }
+  .tabitem .ic svg { width:24px; height:24px; display:block; }
+  .tabitem .ic.active { color:#C8102E; }
+  .tabitem .lb { font-size:10px; color:#999; line-height:14px; }
+  .tabitem.active .lb { color:#C8102E; }
+  .gray { filter:grayscale(1); opacity:.6; }
+  .plus { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#e8433d,#C8102E); box-shadow:0 1px 3px rgba(200,16,46,.3); display:flex; align-items:center; justify-content:center; color:#fff; }
+  .plus svg { width:18px; height:18px; display:block; }
+  .plus-colored { width:34px; height:34px; margin-top:-4px; margin-left:-5px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
+  .plus-colored svg { width:34px; height:34px; display:block; }
+  .state-strip { display:flex; gap:18px; flex-wrap:wrap; }
+  .state-cell { display:flex; flex-direction:column; align-items:center; gap:6px; background:#fafafa; border:1px solid #f0f0f0; border-radius:12px; padding:12px 10px; min-width:76px; }
+  .state-ic { width:28px; height:28px; color:#999; }
+  .state-ic svg { width:28px; height:28px; display:block; }
+  .state-ic.active { color:#C8102E; }
+  .state-lb { font-size:10px; color:#aaa; }
+  .state-lb.active { color:#C8102E; }
+  .ids { width:100%; font-size:11px; color:#999; margin-top:6px; word-break:break-all; }
+  .ids code { font-family:ui-monospace,Consolas,monospace; }
+</style>
+</head>
+<body>
+  <h1>小虎租房 · 底部导航图标方案（富样式篇）</h1>
+  <div class="sub">6 套更丰富的图标风格 · 彩色表情/多彩扁平：未选中置灰、选中全彩 · 像素/插画：未选中 #999999、选中 ${RED} ·「发房」彩色方案为铅笔/钥匙彩色图标、单色方案为红圆内置图标（非相机）</div>
+${cards}
+</body>
+</html>`;
+
+fs.writeFileSync('D:/SGP_KF3/ruyizu_web/docs/tabbar-icons-rich.html', html, 'utf8');
+if (missList.length) console.log('缺失图标: ' + missList.join(', '));
+else console.log('OK，已生成 docs/tabbar-icons-rich.html（' + SOLUTIONS.length + ' 套方案，全部图标命中）');