f98ad0f801
评审版+执行版双spec、真chrome验证mockup(zh/en+暗/浅/柔三主题实时切换)、P1 tokens.css体系化补全(全additive·旧令牌保留→暗色零回归)。 创始人5决议:响应式消费Web否决demo桌面侧栏/暗色先行+设置内多档主题/SVG图标替emoji/金样板先行/统一圆角矩形(禁药丸椭圆)。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
520 lines
40 KiB
HTML
520 lines
40 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>造梦AI · studio 设计体系 mockup（HJ-FE-DS-001）</title>
|
||
<!--
|
||
设计体系蓝图（评审版配套 mockup）。自包含、浏览器直开。
|
||
本文件的 CSS 变量 = 提案的「真实 token 值」，落地时直接映射到 game-studio/src/styles/tokens.css。
|
||
含：① token 全展示 ② 组件全状态 ③ 代表屏（移动沉浸/桌面放大）④ 实时 zh/en 切换（证明 i18n 架构）。
|
||
设计语言继承 docs-design/huijing-ai-demo.html（cyan→green neon-on-ink，暗色玻璃质感）。
|
||
-->
|
||
<style>
|
||
/* ============================================================
|
||
L0 设计 token —— primitive 原子层
|
||
============================================================ */
|
||
:root{
|
||
/* primitive · 品牌色与中性灰阶（原子，组件不直接用，仅供 semantic 引用） */
|
||
--c-cyan:#31e6ff; --c-green:#7cf2a4; --c-pink:#ff669d; --c-amber:#ffc857;
|
||
--c-violet:#9d7cff; --c-red:#ff626f;
|
||
--c-ink-0:#070911; --c-ink-1:#101522; --c-ink-2:#151b2b; --c-ink-3:#1c2439;
|
||
--c-fg-0:#eef6ff; --c-fg-1:#8d9ab6;
|
||
--c-on-accent:#061014; /* 近黑：所有 cyan/green/amber 之上的前景文字 */
|
||
--c-on-danger:#2a0608; /* 近黑红：danger 之上前景 */
|
||
|
||
/* ---------- semantic · 语义层（组件只用这一层；主题就绪、跨端中立） ---------- */
|
||
--bg:var(--c-ink-0);
|
||
--surface-1:var(--c-ink-1); --surface-2:var(--c-ink-2); --surface-3:var(--c-ink-3);
|
||
--ink:var(--c-fg-0); --muted:var(--c-fg-1);
|
||
--accent:var(--c-cyan); --success:var(--c-green); --warning:var(--c-amber); --danger:var(--c-red);
|
||
--on-accent:var(--c-on-accent); --on-danger:var(--c-on-danger);
|
||
--border-1:color-mix(in srgb, var(--c-fg-1) 18%, transparent);
|
||
--border-2:color-mix(in srgb, var(--c-fg-1) 32%, transparent);
|
||
--grad-primary:linear-gradient(135deg, var(--c-cyan), var(--c-green)); /* 签名渐变 */
|
||
--grad-hot:linear-gradient(135deg, var(--c-pink), var(--c-amber));
|
||
--focus-ring:0 0 0 4px color-mix(in srgb, var(--c-cyan) 22%, transparent);
|
||
|
||
/* spacing 尺度（4 基线，主导 8–16） */
|
||
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px;
|
||
/* radius —— 统一圆角矩形尺度（禁药丸/椭圆；半径随元素尺寸比例设计，loading 旋转环除外） */
|
||
--radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:20px;
|
||
--radius:var(--radius-md);
|
||
/* elevation（3 级） */
|
||
--elev-1:0 8px 24px rgba(0,0,0,.45);
|
||
--elev-2:0 16px 34px color-mix(in srgb, var(--c-cyan) 18%, transparent); /* 霓虹辉光（主 CTA） */
|
||
--elev-3:0 26px 80px rgba(0,0,0,.55); /* 模态/最高层 */
|
||
/* 字号尺度 */
|
||
--fs-h1:clamp(24px,5vw,32px); --fs-h2:19px; --fs-h3:15px; --fs-body:14px; --fs-caption:12px;
|
||
/* 字重阶梯（demo 的关键质感：重字重 + 细 muted 正文） */
|
||
--fw-body:400; --fw-medium:560; --fw-label:720; --fw-cta:820; --fw-mark:900;
|
||
/* 缓动与动效 */
|
||
--ease:cubic-bezier(.2,.8,.2,1); --dur:.18s;
|
||
}
|
||
|
||
/* ---------- 多档舒适主题（设置内可切；仅覆盖语义层，primitive/组件/圆角不变） ---------- */
|
||
[data-theme="light"]{
|
||
--bg:#eef2f9; --surface-1:#ffffff; --surface-2:#f1f4fa; --surface-3:#e6ecf6;
|
||
--ink:#0c1322; --muted:#5b6678;
|
||
--border-1:color-mix(in srgb,#0c1322 12%,transparent);
|
||
--border-2:color-mix(in srgb,#0c1322 22%,transparent);
|
||
--elev-1:0 8px 24px rgba(31,45,71,.12);
|
||
--elev-3:0 26px 60px rgba(31,45,71,.18);
|
||
}
|
||
[data-theme="dim"]{
|
||
--bg:#0f131d; --surface-1:#171c28; --surface-2:#1c2230; --surface-3:#232a3a;
|
||
--ink:#e6ecf6; --muted:#9aa6bf;
|
||
--border-1:color-mix(in srgb,var(--c-fg-1) 22%,transparent);
|
||
--border-2:color-mix(in srgb,var(--c-fg-1) 36%,transparent);
|
||
}
|
||
[data-theme="light"] body{
|
||
background:
|
||
linear-gradient(90deg, color-mix(in srgb,var(--c-cyan) 8%,transparent) 1px, transparent 1px),
|
||
linear-gradient(0deg, color-mix(in srgb,var(--c-green) 6%,transparent) 1px, transparent 1px),
|
||
radial-gradient(circle at 18% 0%, color-mix(in srgb,var(--c-cyan) 12%,transparent), transparent 32%),
|
||
linear-gradient(135deg,#eef2fb,#e7eef8 60%,#eaf3f0);
|
||
background-size:42px 42px,42px 42px,auto,auto; background-attachment:fixed;
|
||
}
|
||
[data-theme="dim"] body{
|
||
background:
|
||
radial-gradient(circle at 18% 0%, color-mix(in srgb,var(--c-cyan) 10%,transparent), transparent 34%),
|
||
linear-gradient(135deg,#0f131d,#141a26 60%,#0f1620);
|
||
background-attachment:fixed;
|
||
}
|
||
[data-theme="light"] .topbar{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6))}
|
||
[data-theme="light"] .brand .nm{background:linear-gradient(135deg,#0bb6d4,#2faf6e)}
|
||
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
margin:0; background:
|
||
linear-gradient(90deg, color-mix(in srgb,var(--c-cyan) 6%, transparent) 1px, transparent 1px),
|
||
linear-gradient(0deg, color-mix(in srgb,var(--c-green) 4%, transparent) 1px, transparent 1px),
|
||
radial-gradient(circle at 18% 0%, color-mix(in srgb,var(--c-cyan) 13%, transparent), transparent 34%),
|
||
radial-gradient(circle at 80% 6%, color-mix(in srgb,var(--c-pink) 8%, transparent), transparent 30%),
|
||
linear-gradient(135deg,#060711,#0d101a 50%,#061016);
|
||
background-size:42px 42px,42px 42px,auto,auto,auto;
|
||
background-attachment:fixed;
|
||
color:var(--ink);
|
||
font:var(--fw-body) var(--fs-body)/1.5 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
|
||
-webkit-font-smoothing:antialiased;
|
||
}
|
||
h1,h2,h3,p{margin:0}
|
||
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--sp-4) var(--sp-6)}
|
||
svg{display:block}
|
||
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
|
||
|
||
/* ---------- 顶栏 + 语言切换 ---------- */
|
||
.topbar{position:sticky;top:0;z-index:30;backdrop-filter:blur(16px);
|
||
background:linear-gradient(180deg,rgba(7,9,17,.96),rgba(7,9,17,.7));
|
||
border-bottom:1px solid var(--border-1)}
|
||
.topbar-in{max-width:1120px;margin:0 auto;padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
|
||
.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-mark);font-size:18px}
|
||
.brand .dot{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--grad-primary);box-shadow:var(--elev-2)}
|
||
.brand .nm{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
.spacer{flex:1}
|
||
.lang-toggle{display:inline-flex;border:1px solid var(--border-2);border-radius:var(--radius);padding:3px;background:color-mix(in srgb,var(--surface-2) 85%,transparent)}
|
||
.lang-toggle button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:var(--fw-label);
|
||
padding:5px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--dur) var(--ease)}
|
||
.lang-toggle button.on{background:var(--grad-primary);color:var(--on-accent)}
|
||
.note{font-size:var(--fs-caption);color:var(--muted)}
|
||
|
||
/* ---------- section / 网格 ---------- */
|
||
section{margin-top:var(--sp-6)}
|
||
.sec-h{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border-1)}
|
||
.sec-h h2{font-size:var(--fs-h2);font-weight:var(--fw-cta)}
|
||
.sec-h span{font-size:var(--fs-caption);color:var(--muted)}
|
||
.grid{display:grid;gap:var(--sp-3)}
|
||
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
|
||
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
|
||
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
|
||
@media(max-width:720px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(2,1fr)}}
|
||
|
||
/* 通用卡片底座 */
|
||
.panel{background:color-mix(in srgb,var(--surface-1) 90%,transparent);border:1px solid var(--border-1);border-radius:var(--radius);padding:var(--sp-4)}
|
||
|
||
/* ---------- 色板 ---------- */
|
||
.sw{border:1px solid var(--border-1);border-radius:var(--radius);overflow:hidden}
|
||
.sw .chip{height:54px}
|
||
.sw .meta{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-caption);background:var(--surface-1)}
|
||
.sw .meta b{display:block;color:var(--ink);font-weight:var(--fw-label)}
|
||
.sw .meta code{color:var(--muted)}
|
||
|
||
/* ---------- 字号/字重 ---------- */
|
||
.type-row{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px dashed var(--border-1)}
|
||
.type-row code{margin-left:auto;color:var(--muted);font-size:var(--fs-caption)}
|
||
|
||
/* ---------- 按钮（L2 品牌基元，全状态） ---------- */
|
||
.btn{appearance:none;border:0;cursor:pointer;font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
|
||
min-height:38px;padding:0 16px;border-radius:var(--radius);font-weight:var(--fw-cta);white-space:nowrap;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease)}
|
||
.btn:active{transform:scale(.97)}
|
||
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
|
||
.btn--primary{background:var(--grad-primary);color:var(--on-accent);box-shadow:var(--elev-2)}
|
||
.btn--secondary{background:color-mix(in srgb,var(--surface-2) 90%,transparent);color:var(--ink);border:1px solid var(--border-2)}
|
||
.btn--ghost{background:color-mix(in srgb,var(--bg) 42%,transparent);color:var(--muted);border:1px solid var(--border-1)}
|
||
.btn--danger{background:var(--danger);color:var(--on-danger)}
|
||
.btn--lg{min-height:50px;padding:0 22px;font-size:var(--fs-h3)}
|
||
.btn--sm{min-height:30px;padding:0 12px;font-size:var(--fs-caption)}
|
||
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
|
||
.btn .spin{width:15px;height:15px;border:2px solid color-mix(in srgb,var(--on-accent) 35%,transparent);border-top-color:var(--on-accent);border-radius:50%;animation:spin .7s linear infinite}
|
||
@keyframes spin{to{transform:rotate(360deg)}}
|
||
|
||
/* ---------- 输入（含 focus / error / helper） ---------- */
|
||
.field{display:grid;gap:6px}
|
||
.field>label{font-size:13px;color:var(--muted);font-weight:var(--fw-medium)}
|
||
.field .ctrl{width:100%;color:var(--ink);background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px solid var(--border-2);
|
||
border-radius:var(--radius);padding:11px 12px;font:inherit;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
|
||
.field .ctrl::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
|
||
.field .ctrl:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 76%,transparent);box-shadow:var(--focus-ring)}
|
||
textarea.ctrl{min-height:96px;line-height:1.55;resize:vertical}
|
||
.field.err .ctrl{border-color:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 18%,transparent)}
|
||
.field .help{font-size:var(--fs-caption);color:var(--muted)}
|
||
.field.err .help{color:var(--danger)}
|
||
|
||
/* ---------- 徽章 / chip / 状态 ---------- */
|
||
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--radius-sm);
|
||
border:1px solid var(--border-2);background:color-mix(in srgb,var(--bg) 48%,transparent);color:var(--muted);font-size:var(--fs-caption);font-weight:var(--fw-label)}
|
||
.chip.on{background:var(--accent);color:var(--on-accent);border-color:transparent}
|
||
.status{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--radius-sm);font-size:var(--fs-caption);font-weight:780}
|
||
.status.ok{background:var(--success);color:var(--on-accent)} .status.warn{background:var(--warning);color:var(--on-accent)}
|
||
.status.err{background:var(--danger);color:var(--on-danger)} .status.muted{background:color-mix(in srgb,var(--bg) 42%,transparent);color:var(--muted);border:1px solid var(--border-1)}
|
||
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-xs);background:var(--c-pink);color:var(--on-danger);font-size:11px;font-weight:var(--fw-mark);display:inline-flex;align-items:center;justify-content:center}
|
||
|
||
/* ---------- 空态 / 骨架 / 进度 / toast ---------- */
|
||
.empty{display:grid;justify-items:center;gap:var(--sp-2);text-align:center;padding:var(--sp-6) var(--sp-4)}
|
||
.empty .ic{width:44px;height:44px;border-radius:var(--radius-lg);display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
|
||
.empty b{font-weight:var(--fw-cta)} .empty p{color:var(--muted);font-size:var(--fs-caption)}
|
||
.sk{background:linear-gradient(100deg,color-mix(in srgb,var(--surface-2) 80%,transparent) 30%,color-mix(in srgb,var(--surface-3) 90%,transparent) 50%,color-mix(in srgb,var(--surface-2) 80%,transparent) 70%);
|
||
background-size:200% 100%;animation:sh 1.3s linear infinite;border-radius:var(--radius-sm)}
|
||
@keyframes sh{to{background-position:-200% 0}}
|
||
.bar{height:7px;border-radius:var(--radius-xs);background:color-mix(in srgb,#fff 8%,transparent);overflow:hidden}
|
||
.bar>span{display:block;height:100%;background:var(--grad-primary)}
|
||
.toast{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--grad-primary);color:var(--on-accent);font-weight:760;
|
||
padding:10px 16px;border-radius:var(--radius);box-shadow:var(--elev-1)}
|
||
|
||
/* ---------- 底部 tab bar ---------- */
|
||
.tabbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:color-mix(in srgb,var(--surface-1) 92%,transparent);
|
||
border:1px solid var(--border-1);border-radius:var(--radius);padding:6px}
|
||
.tabbar a{position:relative;display:grid;justify-items:center;gap:3px;padding:7px 0;color:var(--muted);text-decoration:none;font-size:11px;font-weight:var(--fw-label);border-radius:var(--radius-sm);transition:var(--dur) var(--ease)}
|
||
.tabbar a.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
|
||
.tabbar a .badge{position:absolute;top:2px;left:calc(50% + 6px)}
|
||
|
||
/* ---------- 代表屏：移动机框 ---------- */
|
||
.phones{display:flex;gap:var(--sp-5);flex-wrap:wrap}
|
||
.phone{width:300px;flex:0 0 auto;border-radius:var(--radius-xl);border:1px solid var(--border-2);background:var(--surface-1);box-shadow:var(--elev-3);overflow:hidden}
|
||
.phone .scr{height:560px;display:flex;flex-direction:column;background:var(--bg)}
|
||
.phone .cap{padding:8px 14px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--border-1);display:flex;justify-content:space-between}
|
||
.feed-card{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
|
||
background:linear-gradient(160deg,#18384a,#4c2344 56%,#121626)}
|
||
.feed-card .gloss{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,9,17,.85))}
|
||
.feed-meta{position:relative;padding:var(--sp-4);display:grid;gap:6px}
|
||
.feed-meta h3{font-size:18px;font-weight:var(--fw-cta)} .feed-meta .by{font-size:var(--fs-caption);color:var(--muted)}
|
||
.feed-rail{position:absolute;right:10px;bottom:90px;display:grid;gap:14px;justify-items:center}
|
||
.feed-rail button{width:46px;height:46px;border-radius:var(--radius-lg);border:1px solid color-mix(in srgb,#fff 15%,transparent);
|
||
background:color-mix(in srgb,#fff 10%,transparent);backdrop-filter:blur(6px);color:var(--ink);display:grid;place-items:center;cursor:pointer}
|
||
.feed-rail small{display:block;font-size:10px;text-align:center;color:var(--ink);margin-top:2px}
|
||
|
||
/* create 屏 */
|
||
.create-scr{flex:1;display:flex;flex-direction:column;padding:var(--sp-4);gap:var(--sp-3);overflow:auto}
|
||
.tpl-row{display:flex;gap:var(--sp-2);overflow:auto;padding-bottom:4px}
|
||
.tpl{flex:0 0 96px;height:72px;border-radius:var(--radius);border:1px solid var(--border-1);background:linear-gradient(135deg,#1b3d35,#26315e);display:grid;place-items:end;padding:8px;font-size:11px;font-weight:var(--fw-label);cursor:pointer;transition:var(--dur) var(--ease)}
|
||
.tpl.on{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
|
||
|
||
/* ---------- 代表屏：响应式桌面框（消费居中放大，非后台侧栏） ---------- */
|
||
.desk{border:1px solid var(--border-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--elev-1)}
|
||
.desk .bar2{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-4);border-bottom:1px solid var(--border-1);background:color-mix(in srgb,var(--surface-1) 85%,transparent)}
|
||
.desk .nav{display:flex;gap:var(--sp-3);font-size:13px;color:var(--muted)}
|
||
.desk .nav a{color:var(--muted);text-decoration:none;font-weight:var(--fw-label)} .desk .nav a.on{color:var(--accent)}
|
||
.desk .stage{padding:var(--sp-5) var(--sp-4);display:grid;gap:var(--sp-4);justify-items:center;text-align:center;background:var(--bg)}
|
||
.desk .stage h2{font-size:clamp(22px,3vw,34px);font-weight:var(--fw-cta);max-width:18ch}
|
||
.desk .stage .sub{color:var(--muted);max-width:46ch}
|
||
.desk .feed-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);width:100%}
|
||
@media(max-width:720px){.desk .feed-strip{grid-template-columns:repeat(2,1fr)}}
|
||
.gcard{border:1px solid var(--border-1);border-radius:var(--radius);overflow:hidden;background:var(--surface-1);text-align:left;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
|
||
.gcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
|
||
.gcard .cov{height:96px;background:linear-gradient(160deg,#18384a,#4c2344 56%,#121626)}
|
||
.gcard .b{padding:var(--sp-2) var(--sp-3)} .gcard .b b{font-size:13px;font-weight:var(--fw-label)} .gcard .b small{color:var(--muted);font-size:11px}
|
||
|
||
.foot{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--border-1);color:var(--muted);font-size:var(--fs-caption);text-align:center}
|
||
|
||
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============ 顶栏 + 语言切换（i18n 实证） ============ -->
|
||
<header class="topbar"><div class="topbar-in">
|
||
<div class="brand"><span class="dot"></span><span class="nm" data-i18n="brand">造梦AI</span></div>
|
||
<span class="note" data-i18n="subtitle">studio 设计体系 mockup · 暗色先行</span>
|
||
<span class="spacer"></span>
|
||
<div class="lang-toggle" role="group" aria-label="theme" style="margin-right:6px">
|
||
<button id="th-dark" class="on" onclick="setTheme('dark')" data-i18n="th_dark">暗色</button>
|
||
<button id="th-light" onclick="setTheme('light')" data-i18n="th_light">浅色</button>
|
||
<button id="th-dim" onclick="setTheme('dim')" data-i18n="th_dim">柔和</button>
|
||
</div>
|
||
<div class="lang-toggle" role="group" aria-label="language">
|
||
<button id="zh" class="on" onclick="setLang('zh')">中文</button>
|
||
<button id="en" onclick="setLang('en')">EN</button>
|
||
</div>
|
||
</div></header>
|
||
|
||
<div class="wrap">
|
||
|
||
<!-- ============ 1. 颜色令牌 ============ -->
|
||
<section>
|
||
<div class="sec-h"><h2 data-i18n="s_color">语义色板（semantic tokens）</h2><span data-i18n="s_color_d">组件只用语义层 · 主题就绪 · 跨端中立</span></div>
|
||
<div class="grid cols-4">
|
||
<div class="sw"><div class="chip" style="background:var(--bg)"></div><div class="meta"><b>--bg</b><code>#070911</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--surface-1)"></div><div class="meta"><b>--surface-1</b><code>#101522</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--surface-2)"></div><div class="meta"><b>--surface-2</b><code>#151b2b</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--surface-3)"></div><div class="meta"><b>--surface-3</b><code>#1c2439</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--grad-primary)"></div><div class="meta"><b>--grad-primary</b><code>cyan→green 135°</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--accent)"></div><div class="meta"><b>--accent</b><code>#31e6ff</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--success)"></div><div class="meta"><b>--success</b><code>#7cf2a4</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--warning)"></div><div class="meta"><b>--warning</b><code>#ffc857</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--danger)"></div><div class="meta"><b>--danger</b><code>#ff626f</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--ink)"></div><div class="meta"><b>--ink</b><code>#eef6ff</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--muted)"></div><div class="meta"><b>--muted</b><code>#8d9ab6</code></div></div>
|
||
<div class="sw"><div class="chip" style="background:var(--on-accent)"></div><div class="meta"><b>--on-accent</b><code>#061014 · 杀4个硬编码</code></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 2. 字号 / 字重 + 间距 / 圆角 / 阴影 ============ -->
|
||
<section>
|
||
<div class="sec-h"><h2 data-i18n="s_type">字号 / 字重 / 间距 / 圆角 / 阴影</h2><span>type · spacing · radius · elevation</span></div>
|
||
<div class="grid cols-2">
|
||
<div class="panel">
|
||
<div class="type-row"><span style="font-size:var(--fs-h1);font-weight:var(--fw-cta)" data-i18n="t_h1">标题 H1</span><code>--fs-h1 / 820</code></div>
|
||
<div class="type-row"><span style="font-size:var(--fs-h2);font-weight:var(--fw-cta)" data-i18n="t_h2">标题 H2</span><code>--fs-h2 19px</code></div>
|
||
<div class="type-row"><span style="font-size:var(--fs-h3);font-weight:var(--fw-label)" data-i18n="t_h3">小标题 H3</span><code>--fs-h3 15px</code></div>
|
||
<div class="type-row"><span style="font-size:var(--fs-body)" data-i18n="t_body">正文 Body（消费面 ≥14px 保可读）</span><code>--fs-body 14px</code></div>
|
||
<div class="type-row"><span style="font-size:var(--fs-caption);color:var(--muted)" data-i18n="t_cap">辅助 Caption（muted）</span><code>--fs-caption 12px</code></div>
|
||
</div>
|
||
<div class="panel">
|
||
<div style="display:flex;gap:var(--sp-2);align-items:flex-end;margin-bottom:var(--sp-4)">
|
||
<div style="width:var(--sp-1);height:24px;background:var(--accent)"></div>
|
||
<div style="width:var(--sp-2);height:24px;background:var(--accent)"></div>
|
||
<div style="width:var(--sp-3);height:24px;background:var(--accent)"></div>
|
||
<div style="width:var(--sp-4);height:24px;background:var(--accent)"></div>
|
||
<div style="width:var(--sp-5);height:24px;background:var(--accent)"></div>
|
||
<div style="width:var(--sp-6);height:24px;background:var(--accent)"></div>
|
||
<code style="color:var(--muted);font-size:11px;margin-left:auto">--sp 4·8·12·16·22·32</code>
|
||
</div>
|
||
<div style="display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap">
|
||
<div style="width:44px;height:40px;border-radius:var(--radius-xs);background:var(--surface-3);border:1px solid var(--border-2)"></div>
|
||
<div style="width:44px;height:40px;border-radius:var(--radius-sm);background:var(--surface-3);border:1px solid var(--border-2)"></div>
|
||
<div style="width:44px;height:40px;border-radius:var(--radius-md);background:var(--surface-3);border:1px solid var(--border-2)"></div>
|
||
<div style="width:44px;height:40px;border-radius:var(--radius-lg);background:var(--surface-3);border:1px solid var(--border-2)"></div>
|
||
<div style="width:44px;height:40px;border-radius:var(--radius-xl);background:var(--surface-3);border:1px solid var(--border-2)"></div>
|
||
<code style="color:var(--muted);font-size:11px">radius 4·6·8·12·20 · 统一圆角矩形</code>
|
||
</div>
|
||
<div style="display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-3)">
|
||
<div style="width:96px;height:40px;border-radius:var(--radius-md);background:var(--surface-1);box-shadow:var(--elev-1)"></div>
|
||
<div style="width:96px;height:40px;border-radius:var(--radius-md);background:var(--surface-1);box-shadow:var(--elev-2)"></div>
|
||
<code style="color:var(--muted);font-size:11px">elev-1 / elev-2（霓虹辉光）</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 3. 按钮（全状态） ============ -->
|
||
<section>
|
||
<div class="sec-h"><h2 data-i18n="s_btn">按钮 AppButton（全状态）</h2><span>primary 签名渐变回归 · disabled · loading · focus</span></div>
|
||
<div class="panel" style="display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center">
|
||
<button class="btn btn--primary" data-i18n="b_primary">主操作</button>
|
||
<button class="btn btn--secondary" data-i18n="b_secondary">次操作</button>
|
||
<button class="btn btn--ghost" data-i18n="b_ghost">幽灵</button>
|
||
<button class="btn btn--danger" data-i18n="b_danger">危险</button>
|
||
<button class="btn btn--primary"><span class="spin"></span><span data-i18n="b_loading">生成中</span></button>
|
||
<button class="btn btn--primary" disabled data-i18n="b_disabled">不可用</button>
|
||
<button class="btn btn--primary btn--lg" data-i18n="b_lg">大号 CTA</button>
|
||
<button class="btn btn--secondary btn--sm" data-i18n="b_sm">小号</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 4. 输入 + 徽章/状态 ============ -->
|
||
<section>
|
||
<div class="sec-h"><h2 data-i18n="s_form">输入 / 徽章 / 状态</h2><span>focus ring · error · chip · status · badge</span></div>
|
||
<div class="grid cols-2">
|
||
<div class="panel grid" style="gap:var(--sp-4)">
|
||
<div class="field"><label data-i18n="f_phone">手机号</label><input class="ctrl" inputmode="tel" placeholder="13800001234"><span class="help" data-i18n="f_phone_h">用于登录与找回</span></div>
|
||
<div class="field err"><label data-i18n="f_code">验证码</label><input class="ctrl" value="000"><span class="help" data-i18n="f_code_e">验证码错误，请重新输入</span></div>
|
||
<div class="field"><label data-i18n="f_prompt">一句话玩法</label><textarea class="ctrl" placeholder="" data-i18n-ph="f_prompt_ph"></textarea></div>
|
||
</div>
|
||
<div class="panel grid" style="gap:var(--sp-4);align-content:start">
|
||
<div style="display:flex;gap:var(--sp-2);flex-wrap:wrap"><span class="chip on" data-i18n="c_rec">推荐</span><span class="chip" data-i18n="c_new">最新</span><span class="chip" data-i18n="c_hot">热门</span></div>
|
||
<div style="display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center">
|
||
<span class="status ok" data-i18n="st_pub">已发布</span><span class="status warn" data-i18n="st_review">审核中</span>
|
||
<span class="status err" data-i18n="st_reject">已驳回</span><span class="status muted" data-i18n="st_draft">草稿</span>
|
||
</div>
|
||
<div style="display:flex;gap:var(--sp-3);align-items:center"><span data-i18n="lb_msg">消息</span><span class="badge">9</span><span class="badge">99+</span></div>
|
||
<div class="bar"><span style="width:64%"></span></div>
|
||
<div><span class="toast"><svg class="icon" style="width:16px;height:16px"><use href="#i-check"/></svg><span data-i18n="ts_saved">已保存</span></span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 5. 卡片 / 空态 / 骨架 / 导航 ============ -->
|
||
<section>
|
||
<div class="sec-h"><h2 data-i18n="s_block">卡片 / 空态 / 骨架 / 底部导航</h2><span>组合基元</span></div>
|
||
<div class="grid cols-3">
|
||
<div class="empty panel">
|
||
<div class="ic"><svg class="icon"><use href="#i-spark"/></svg></div>
|
||
<b data-i18n="e_title">这里还没有内容</b>
|
||
<p data-i18n="e_desc">玩法模板体系升级中，先去逛逛游戏流</p>
|
||
<button class="btn btn--primary btn--sm" data-i18n="e_cta">去游戏流</button>
|
||
</div>
|
||
<div class="panel grid" style="gap:var(--sp-3)">
|
||
<div class="sk" style="height:90px"></div>
|
||
<div class="sk" style="height:14px;width:70%"></div>
|
||
<div class="sk" style="height:12px;width:45%"></div>
|
||
<span class="note" data-i18n="sk_note">骨架屏（加载 >300ms 用）</span>
|
||
</div>
|
||
<nav class="tabbar">
|
||
<a class="on"><svg class="icon"><use href="#i-feed"/></svg><span data-i18n="nav_feed">游戏流</span></a>
|
||
<a><svg class="icon"><use href="#i-plus"/></svg><span data-i18n="nav_create">创作</span></a>
|
||
<a><svg class="icon"><use href="#i-bell"/></svg><span data-i18n="nav_msg">消息</span><span class="badge">3</span></a>
|
||
<a><svg class="icon"><use href="#i-user"/></svg><span data-i18n="nav_me">我的</span></a>
|
||
</nav>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 6. 代表屏：移动沉浸 ============ -->
|
||
<section>
|
||
<div class="sec-h"><h2 data-i18n="s_mobile">代表屏 · 移动沉浸（消费首触）</h2><span>375px · 游戏流 / 创作入口</span></div>
|
||
<div class="phones">
|
||
<div class="phone"><div class="scr">
|
||
<div class="cap"><span data-i18n="nav_feed">游戏流</span><span>9:41</span></div>
|
||
<div class="feed-card">
|
||
<div class="gloss"></div>
|
||
<div class="feed-rail">
|
||
<div><button aria-label="like"><svg class="icon"><use href="#i-heart"/></svg></button><small>1.2k</small></div>
|
||
<div><button aria-label="fav"><svg class="icon"><use href="#i-star"/></svg></button><small>328</small></div>
|
||
<div><button aria-label="share"><svg class="icon"><use href="#i-share"/></svg></button><small data-i18n="lb_share">分享</small></div>
|
||
</div>
|
||
<div class="feed-meta">
|
||
<h3 data-i18n="demo_game">霓虹跑酷</h3>
|
||
<span class="by" data-i18n="demo_author">@造梦玩家 · AI 一句话生成</span>
|
||
<button class="btn btn--primary" style="margin-top:6px" data-i18n="demo_play">立即玩</button>
|
||
</div>
|
||
</div>
|
||
<div style="padding:6px"><nav class="tabbar">
|
||
<a class="on"><svg class="icon"><use href="#i-feed"/></svg><span data-i18n="nav_feed">游戏流</span></a>
|
||
<a><svg class="icon"><use href="#i-plus"/></svg><span data-i18n="nav_create">创作</span></a>
|
||
<a><svg class="icon"><use href="#i-bell"/></svg><span data-i18n="nav_msg">消息</span></a>
|
||
<a><svg class="icon"><use href="#i-user"/></svg><span data-i18n="nav_me">我的</span></a>
|
||
</nav></div>
|
||
</div></div>
|
||
|
||
<div class="phone"><div class="scr">
|
||
<div class="cap"><span data-i18n="nav_create">创作</span><span>9:41</span></div>
|
||
<div class="create-scr">
|
||
<h3 style="font-size:18px;font-weight:var(--fw-cta)" data-i18n="cr_title">一句话，做个小游戏</h3>
|
||
<span class="note" data-i18n="cr_pick">选个玩法模板</span>
|
||
<div class="tpl-row">
|
||
<div class="tpl on" data-i18n="cr_t1">点击</div><div class="tpl" data-i18n="cr_t2">合成</div>
|
||
<div class="tpl" data-i18n="cr_t3">放置</div><div class="tpl" data-i18n="cr_t4">经营</div>
|
||
</div>
|
||
<div class="field"><label data-i18n="cr_idea">你的创意</label><textarea class="ctrl" data-i18n-ph="f_prompt_ph"></textarea></div>
|
||
<div style="margin-top:auto"><button class="btn btn--primary" style="width:100%" data-i18n="cr_go">生成游戏</button></div>
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 7. 代表屏：响应式桌面（居中放大，非后台侧栏） ============ -->
|
||
<section>
|
||
<div class="sec-h"><h2 data-i18n="s_desk">代表屏 · 响应式桌面（消费居中放大）</h2><span data-i18n="s_desk_d">同一套组件 → 桌面浏览器放大，非 demo 的后台侧栏</span></div>
|
||
<div class="desk">
|
||
<div class="bar2">
|
||
<div class="brand" style="font-size:15px"><span class="dot" style="width:22px;height:22px"></span><span class="nm" data-i18n="brand">造梦AI</span></div>
|
||
<nav class="nav">
|
||
<a class="on" data-i18n="nav_feed">游戏流</a><a data-i18n="nav_create">创作</a><a data-i18n="nav_discover">发现</a><a data-i18n="nav_me">我的</a>
|
||
</nav>
|
||
<span class="spacer"></span>
|
||
<button class="btn btn--primary btn--sm" data-i18n="d_login">登录</button>
|
||
</div>
|
||
<div class="stage">
|
||
<h2 data-i18n="d_hero">一句话，做个能玩、能赚的小游戏</h2>
|
||
<p class="sub" data-i18n="d_sub">零门槛创作 · 短视频式游戏流 · 即点即玩</p>
|
||
<button class="btn btn--primary btn--lg" data-i18n="d_cta">开始创作</button>
|
||
<div class="feed-strip">
|
||
<div class="gcard"><div class="cov"></div><div class="b"><b data-i18n="demo_game">霓虹跑酷</b><br><small data-i18n="demo_author">@造梦玩家</small></div></div>
|
||
<div class="gcard"><div class="cov" style="background:linear-gradient(160deg,#1b3d35,#26315e)"></div><div class="b"><b data-i18n="d_g2">方块合成</b><br><small>@studio</small></div></div>
|
||
<div class="gcard"><div class="cov" style="background:linear-gradient(160deg,#2b1b4a,#0e5360)"></div><div class="b"><b data-i18n="d_g3">放置农场</b><br><small>@maker</small></div></div>
|
||
<div class="gcard"><div class="cov" style="background:linear-gradient(160deg,#18384a,#4c2344 56%,#121626)"></div><div class="b"><b data-i18n="d_g4">太空经营</b><br><small>@ai</small></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">
|
||
HJ-FE-DS-001 · 造梦AI studio 设计体系 mockup · 暗色先行 / 主题就绪 / 跨端 token 单一事实源 ·
|
||
<span data-i18n="foot">配套评审版：docs/agent-specs/2026-06-16-studio视觉体系-i18n-组件库-review.md</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SVG 图标雪碧（替代 Unicode/emoji，满足 no-emoji-icons 红线） -->
|
||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||
<symbol id="i-check" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></symbol>
|
||
<symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18"/></symbol>
|
||
<symbol id="i-feed" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M3 9h18M9 9v12"/></symbol>
|
||
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
||
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></symbol>
|
||
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></symbol>
|
||
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1L12 21l8.8-8.3a5 5 0 0 0 0-7.1z"/></symbol>
|
||
<symbol id="i-star" viewBox="0 0 24 24"><path d="m12 3 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 18l-5.8 3.4 1.1-6.5L2.6 9.8l6.5-.9z"/></symbol>
|
||
<symbol id="i-share" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></symbol>
|
||
</svg>
|
||
|
||
<script>
|
||
/* i18n 字典（mockup 内联演示；落地用 vue-i18n 的 src/locales/{zh-CN,en-US}/*.json） */
|
||
const I18N={
|
||
zh:{brand:"造梦AI",subtitle:"studio 设计体系 mockup · 多档舒适主题",th_dark:"暗色",th_light:"浅色",th_dim:"柔和",
|
||
s_color:"语义色板（semantic tokens）",s_color_d:"组件只用语义层 · 主题就绪 · 跨端中立",
|
||
s_type:"字号 / 字重 / 间距 / 圆角 / 阴影",t_h1:"标题 H1",t_h2:"标题 H2",t_h3:"小标题 H3",t_body:"正文 Body（消费面 ≥14px 保可读）",t_cap:"辅助 Caption（muted）",
|
||
s_btn:"按钮 AppButton（全状态）",b_primary:"主操作",b_secondary:"次操作",b_ghost:"幽灵",b_danger:"危险",b_loading:"生成中",b_disabled:"不可用",b_lg:"大号 CTA",b_sm:"小号",
|
||
s_form:"输入 / 徽章 / 状态",f_phone:"手机号",f_phone_h:"用于登录与找回",f_code:"验证码",f_code_e:"验证码错误，请重新输入",f_prompt:"一句话玩法",f_prompt_ph:"例：一只猫躲避障碍，越跑越快",
|
||
c_rec:"推荐",c_new:"最新",c_hot:"热门",st_pub:"已发布",st_review:"审核中",st_reject:"已驳回",st_draft:"草稿",lb_msg:"消息",ts_saved:"已保存",
|
||
s_block:"卡片 / 空态 / 骨架 / 底部导航",e_title:"这里还没有内容",e_desc:"玩法模板体系升级中，先去逛逛游戏流",e_cta:"去游戏流",sk_note:"骨架屏（加载 >300ms 用）",
|
||
nav_feed:"游戏流",nav_create:"创作",nav_msg:"消息",nav_me:"我的",nav_discover:"发现",
|
||
s_mobile:"代表屏 · 移动沉浸（消费首触）",demo_game:"霓虹跑酷",demo_author:"@造梦玩家 · AI 一句话生成",demo_play:"立即玩",lb_share:"分享",
|
||
cr_title:"一句话，做个小游戏",cr_pick:"选个玩法模板",cr_t1:"点击",cr_t2:"合成",cr_t3:"放置",cr_t4:"经营",cr_idea:"你的创意",cr_go:"生成游戏",
|
||
s_desk:"代表屏 · 响应式桌面（消费居中放大）",s_desk_d:"同一套组件 → 桌面浏览器放大，非 demo 的后台侧栏",
|
||
d_login:"登录",d_hero:"一句话，做个能玩、能赚的小游戏",d_sub:"零门槛创作 · 短视频式游戏流 · 即点即玩",d_cta:"开始创作",d_g2:"方块合成",d_g3:"放置农场",d_g4:"太空经营",
|
||
foot:"配套评审版：docs/agent-specs/2026-06-16-studio视觉体系-i18n-组件库-review.md"},
|
||
en:{brand:"ZaoMeng AI",subtitle:"studio design system mockup · comfort themes",th_dark:"Dark",th_light:"Light",th_dim:"Dim",
|
||
s_color:"Semantic color tokens",s_color_d:"Components use semantic layer only · theme-ready · cross-platform",
|
||
s_type:"Type / Weight / Spacing / Radius / Elevation",t_h1:"Heading H1",t_h2:"Heading H2",t_h3:"Subhead H3",t_body:"Body (≥14px on consumer surfaces)",t_cap:"Caption (muted)",
|
||
s_btn:"AppButton (all states)",b_primary:"Primary",b_secondary:"Secondary",b_ghost:"Ghost",b_danger:"Danger",b_loading:"Generating",b_disabled:"Disabled",b_lg:"Large CTA",b_sm:"Small",
|
||
s_form:"Inputs / Badges / Status",f_phone:"Phone",f_phone_h:"For login & recovery",f_code:"Code",f_code_e:"Invalid code, please retry",f_prompt:"One-line idea",f_prompt_ph:"e.g. a cat dodges obstacles, faster and faster",
|
||
c_rec:"Picks",c_new:"New",c_hot:"Hot",st_pub:"Published",st_review:"In review",st_reject:"Rejected",st_draft:"Draft",lb_msg:"Messages",ts_saved:"Saved",
|
||
s_block:"Cards / Empty / Skeleton / Bottom nav",e_title:"Nothing here yet",e_desc:"Template system is upgrading — explore the feed first",e_cta:"Go to feed",sk_note:"Skeleton (for loads >300ms)",
|
||
nav_feed:"Feed",nav_create:"Create",nav_msg:"Inbox",nav_me:"Me",nav_discover:"Discover",
|
||
s_mobile:"Screen · Mobile immersive (consumer first touch)",demo_game:"Neon Runner",demo_author:"@player · made by one sentence",demo_play:"Play now",lb_share:"Share",
|
||
cr_title:"One sentence, one game",cr_pick:"Pick a template",cr_t1:"Tap",cr_t2:"Merge",cr_t3:"Idle",cr_t4:"Tycoon",cr_idea:"Your idea",cr_go:"Generate",
|
||
s_desk:"Screen · Responsive desktop (consumer, centered)",s_desk_d:"Same components → scaled up in browser, NOT the demo's admin sidebar",
|
||
d_login:"Sign in",d_hero:"One sentence — a game people play and you earn from",d_sub:"Zero-skill creation · short-video game feed · instant play",d_cta:"Start creating",d_g2:"Block Merge",d_g3:"Idle Farm",d_g4:"Space Tycoon",
|
||
foot:"Review spec: docs/agent-specs/2026-06-16-studio视觉体系-i18n-组件库-review.md"}
|
||
};
|
||
function setLang(l){
|
||
const d=I18N[l]||I18N.zh;
|
||
document.querySelectorAll('[data-i18n]').forEach(el=>{const k=el.getAttribute('data-i18n'); if(d[k]!=null) el.textContent=d[k];});
|
||
document.querySelectorAll('[data-i18n-ph]').forEach(el=>{const k=el.getAttribute('data-i18n-ph'); if(d[k]!=null) el.setAttribute('placeholder',d[k]);});
|
||
document.documentElement.lang = (l==='en'?'en-US':'zh-CN');
|
||
document.getElementById('zh').classList.toggle('on',l==='zh');
|
||
document.getElementById('en').classList.toggle('on',l==='en');
|
||
try{localStorage.setItem('studio.lang',l)}catch(e){}
|
||
}
|
||
/* 多档舒适主题切换（落地映射到「我的/设置」内的主题选择 + data-theme on <html>） */
|
||
function setTheme(t){
|
||
document.documentElement.setAttribute('data-theme',t);
|
||
['dark','light','dim'].forEach(function(x){var b=document.getElementById('th-'+x); if(b) b.classList.toggle('on',x===t);});
|
||
try{localStorage.setItem('studio.theme',t)}catch(e){}
|
||
}
|
||
setTheme((function(){try{return localStorage.getItem('studio.theme')||'dark'}catch(e){return 'dark'}})());
|
||
setLang((function(){try{return localStorage.getItem('studio.lang')||'zh'}catch(e){return 'zh'}})());
|
||
</script>
|
||
</body>
|
||
</html>
|