docs(fe-ds): studio视觉体系/i18n/通用组件库 双spec+mockup+P1token层(HJ-FE-DS-001)
评审版+执行版双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>
This commit is contained in:
zizi
parent
88d4cf7e02
commit
f98ad0f801
519
docs-design/studio-redesign-mockup.html
Normal file
519
docs-design/studio-redesign-mockup.html
Normal file
@ -0,0 +1,519 @@
|
||||
<!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>
|
||||
95
docs/agent-specs/2026-06-16-studio视觉体系-i18n-组件库-execution.md
Normal file
95
docs/agent-specs/2026-06-16-studio视觉体系-i18n-组件库-execution.md
Normal file
@ -0,0 +1,95 @@
|
||||
# studio 视觉体系 / i18n / 通用组件库 · 执行版（HJ-FE-DS-001-EXEC）
|
||||
|
||||
> 性质：执行版（供 agent 落地）。日期：2026-06-16 ｜ owner：L0 ｜ 状态：在飞
|
||||
> 上游评审版（创始人 §8 五决议已拍）：[`2026-06-16-studio视觉体系-i18n-组件库-review.md`](2026-06-16-studio视觉体系-i18n-组件库-review.md)
|
||||
> 验证基准（真 chrome 已验）：[`docs-design/studio-redesign-mockup.html`](../../docs-design/studio-redesign-mockup.html)
|
||||
|
||||
---
|
||||
|
||||
## 0. 目标与范围（金样板先行）
|
||||
|
||||
**目标**：按评审版 5 决议建成 studio 前端体系「金样板」——token 层 + 通用组件库 + i18n 双语 + 多档主题 + 统一圆角矩形，落到 **2 个代表面（消费=Feed、创作=Create）**，验证后再批量克隆其余 15 视图。
|
||||
|
||||
- **in**：① token 层补全 ② vue-i18n 脚手架 ③ AppButton 重构 + 新增 Field·Icon·设置切换 ④ Feed+Create 两面 token化+i18n化+主题反应 ⑤ Profile 内「主题/语言」设置入口。
|
||||
- **out（后续批量波次）**：其余 15 视图 token化+i18n化、admin、原生 App、护眼/高对比主题。
|
||||
|
||||
## 1. 前置
|
||||
|
||||
- mini-desktop 有 game-studio 可构建检出（node22）；构建门 = `npm run build -- --mode staging`（**`vue-tsc --noEmit` 是假门**，见 staging-ops §4）。
|
||||
- 代码同步：git push → mini-desktop clone/pull（**需创始人授权 commit**）。
|
||||
- 现状实证（L0 盘点）：零 Vant UI 真渲染、tokens.css 仅 2 级面板/1 级描边、无 `--on-accent`、无 spacing 令牌、无 i18n、17/19 视图硬编码中文。
|
||||
|
||||
## 2. 模块与文件路径
|
||||
|
||||
| 层 | 文件 | 动作 |
|
||||
|---|---|---|
|
||||
| token L0 | `src/styles/tokens.css` | 扩展（additive，旧令牌保留为别名）|
|
||||
| | `src/styles/index.css` / `vant-theme.css` | 导入序不变 / 补 `--van-*` 映射 |
|
||||
| i18n | `src/i18n/index.ts`（新）、`src/locales/{zh-CN,en-US}/{common,feed,create,profile}.json`（新）、`main.ts` | createI18n + 注册 + 持久化 |
|
||||
| 防闪烁 | `index.html` | 首屏前内联脚本读 localStorage 设 `<html data-theme/lang>`（防 FOUC）|
|
||||
| 组件 L2 | `src/components/AppButton.vue` | 重构（签名渐变+全态+圆角令牌）|
|
||||
| | `src/components/Field.vue`、`Icon.vue`(SVG)、`AppearanceSwitch.vue`（新）| 新增 |
|
||||
| 图标 | `public/icons/sprite.svg` 或内联 `<symbol>` | SVG 雪碧替 emoji |
|
||||
| 设置入口 | `src/views/profile/Profile.vue` | 加「主题/语言」行 |
|
||||
| 代表面 L3 | `src/views/feed/Feed.vue` + `components/GameCard.vue`/`InteractBar.vue`、`src/views/create/Create.vue` | token化+i18n化+圆角统一+主题反应 |
|
||||
|
||||
## 3. 数据流 / 依赖
|
||||
|
||||
```
|
||||
token(L0) → vant-theme(L1) → 品牌组件(L2) → 业务面(L3)
|
||||
i18n : main 注册 → 组件 useI18n($t) → localStorage(studio.lang) + <html lang>
|
||||
theme: localStorage(studio.theme) → <html data-theme> → 语义层覆盖 → 全组件自动反应（只用语义令牌→零改组件）
|
||||
```
|
||||
|
||||
## 4. 契约（token / 组件 / i18n）
|
||||
|
||||
**4.1 token（全 additive；值取自已验证 mockup）**
|
||||
- primitive：`--c-cyan/green/pink/amber/violet/red`、`--c-ink-0..3`、`--c-fg-0/1`、`--c-on-accent:#061014`、`--c-on-danger:#2a0608`。
|
||||
- semantic：`--bg`/`--surface-1..3`/`--ink`/`--muted`/`--accent`/`--success`/`--warning`/`--danger`/`--on-accent`/`--on-danger`/`--border-1..2`/`--grad-primary`/`--grad-hot`/`--focus-ring`。
|
||||
- 尺度：`--sp-1..6=4/8/12/16/22/32`；`--radius-xs/sm/md/lg/xl=4/6/8/12/20`，`--radius=md`；`--elev-1..3`；`--fs-h1/h2/h3/body/caption`；`--fw-body/medium/label/cta/mark`。
|
||||
- 主题：`[data-theme=light]`、`[data-theme=dim]` 覆盖 semantic（值见 mockup）。
|
||||
- **旧令牌兼容**：现有 `--bg/--panel/--ink/--muted/--cyan/--green/--radius/--shadow…` 全保留（`--cyan` 等可设为 `--accent` 别名），**不破坏现有引用**，逐面迁移期共存。
|
||||
|
||||
**4.2 组件**
|
||||
- `AppButton` props 不变（type/size/block/loading/disabled）；primary 恢复签名渐变（`--grad-primary`+`--fw-cta`+`--on-accent`）；全状态（`focus-visible` 环 / `disabled` .42 / `active` scale .97）；圆角 `--radius-md`。
|
||||
- `Field` props：label/modelValue/type/placeholder/error/helper/required；内部可包 `van-field`(L1) 统一 focus 环 / error 态。
|
||||
- `Icon` props：name(对应 sprite symbol id)/size；**禁 emoji**。
|
||||
|
||||
**4.3 i18n**
|
||||
- key 命名空间：`common.* / feed.* / create.* / profile.*`；**禁组件内裸中文**。
|
||||
- `$t` 注入；缺 key fallback `zh-CN`；数字/日期/货币用 `Intl`。
|
||||
- 品牌串「绘境AI/造梦AI」收敛 `common.brand`。
|
||||
|
||||
## 5. 实施步骤（分阶段）
|
||||
|
||||
| 阶段 | 内容 | 门 |
|
||||
|---|---|---|
|
||||
| **P1 token 层** | 扩展 tokens.css(4.1)+ `[data-theme]` 覆盖 + vant-theme 补映射；旧令牌别名共存 | 构建绿 + **现有页面零视觉回归**(截图 diff) |
|
||||
| **P2 i18n 脚手架** | 装 vue-i18n、`i18n/index.ts`+locales 骨架+main 注册+防闪烁脚本+持久化 | 构建绿 + 切语言/主题生效 |
|
||||
| **P3 组件库** | 重构 AppButton(签名渐变+全态+圆角)、新增 Field/Icon/AppearanceSwitch | 构建绿 + 组件自检 |
|
||||
| **P4 代表面** | Feed+Create 全量 token化(杀硬编码 hex/rgba 手抄)+i18n化+圆角统一+主题反应；Profile 加设置入口 | 构建绿 + **真 UI 走查(CDP,三主题×双语)** + i18n 残留扫描 0 + 对比 AA |
|
||||
| **P5 收口** | 1 轮 opus 实现评审(impl-review-one-opus-round)→修→收口 | 评审过 |
|
||||
|
||||
## 6. 边界 / 失败路径
|
||||
|
||||
- vue-i18n 与 vue3.5 兼容版（@9/@10）；装包后构建门兜。
|
||||
- **主题闪烁(FOUC)**：首屏前内联脚本读 localStorage 设 `data-theme`，防暗→亮闪。
|
||||
- Vant 引真组件改 DOM/样式：L1 封装隔离，逐组件替换，构建门+走查。
|
||||
- 旧令牌别名映射错 → 现有页面变色：P1 门做现状回归截图 diff。
|
||||
- i18n 抽 key 漏（中文假阴性）：**脚本扫模板残留中文**（非 `strings|grep`），双语对照。
|
||||
|
||||
## 7. 验证方法
|
||||
|
||||
- 构建门：mini-desktop `npm run build -- --mode staging`。
|
||||
- 真 UI 走查：CDP（[`ui-walkthrough-cdp`](../../.agents/skills/ui-walkthrough-cdp.md)）Feed+Create，三主题×双语截图。
|
||||
- i18n 残留扫描：脚本扫 `src/views/{feed,create}` 模板中文字面量 = 0。
|
||||
- 对比度：关键文本 ≥WCAG AA（三主题各验）。
|
||||
- 回归：P1 后旧页面截图 diff 无变色。
|
||||
|
||||
## 8. 完成条件
|
||||
|
||||
P1–P4 各门绿 + P5 opus 评审过；金样板（token+组件库+Feed+Create+设置切换）**三主题×双语 e2e 可演示**；现状零回归。→ 批量波次（其余 15 视图）另起 execution。
|
||||
|
||||
## 9. 回滚
|
||||
|
||||
各 P 独立 commit；token 层 additive 可直接 revert；组件改造按文件 revert；i18n 脚手架移除即回原硬编码（**保留期不删旧文案**直到 i18n 化完成）。
|
||||
132
docs/agent-specs/2026-06-16-studio视觉体系-i18n-组件库-review.md
Normal file
132
docs/agent-specs/2026-06-16-studio视觉体系-i18n-组件库-review.md
Normal file
@ -0,0 +1,132 @@
|
||||
# 造梦AI · studio 视觉体系 / i18n / 通用组件库 · 评审版（HJ-FE-DS-001）
|
||||
|
||||
> 性质：评审版（结论先行，供创始人拍板）。日期：2026-06-16 ｜ owner：L0 ｜ 状态：待审
|
||||
> 触发：创始人 `/ui-ux-pro-max` —「优化 studio 前端视觉、支持多语言、建立通用组件；先定方案出 mockup，从前端架构视角避免长期开发产出垃圾代码」。
|
||||
> 配套 mockup（浏览器直开，含实时 zh/en 切换）：[`docs-design/studio-redesign-mockup.html`](../../docs-design/studio-redesign-mockup.html)
|
||||
> 设计基准源（全产品愿景 demo）：`docs-design/huijing-ai-demo.html`；现行真实 token：`game-studio/src/styles/tokens.css`
|
||||
|
||||
---
|
||||
|
||||
## 1. 结论先行
|
||||
|
||||
**核心判断：保留 demo 的「设计语言」（token 体系 + `cyan→green` 品牌渐变 + 暗色玻璃质感），否决 demo 的「桌面控制台布局」作为 ToC 网站基线。**
|
||||
|
||||
理由（均代码实证）：
|
||||
- `demo.html` 实为**桌面产品控制台外壳**：`grid: 236px 固定侧栏 + 流式主列`，workbench `min-width:1140px`，短视频游戏流是塞进 390×660 **模拟手机框**里的——这是「管理后台 / IDE」范式，**不是消费级 ToC 网站范式**。
|
||||
- `game-studio` 现状是**移动优先 Web**（Vant、视口 360–430px、底部 4 tab、沉浸式 TikTok 流），更贴近消费级游戏流首触。
|
||||
- 创始人定位：**现在是 ToC 网站，later 有桌面 App + 移动 App**。
|
||||
|
||||
→ **推荐方向 = 响应式优先的消费级 Web（一套组件：移动沉浸 / 桌面居中放大，而非后台侧栏）+ 跨端可移植的设计 token 单一事实源**（Web 现在吃 CSS 变量；桌面 App 用 Web 技术直接复用；移动 App 用同一份 token JSON）。这同时服务「later 双 App」与「避免垃圾代码」两个目标。
|
||||
|
||||
**三件事一次性定架构（金样板先行，再批量推页）：**
|
||||
1. **设计体系**：把 `tokens.css` 补全为 primitive + semantic 两层、**主题就绪（暗色先行 + 设置内多档舒适主题：暗 / 浅 / 柔和 可切）**、**统一圆角矩形（禁药丸/椭圆）**、跨端中立。
|
||||
2. **通用组件库**：封装 Vant（复用其交互/无障碍）+ 自研品牌层，全部吃 semantic token、文案走 i18n。
|
||||
3. **i18n**：`vue-i18n`，zh-CN 基线 + en-US，命名空间 key，零硬编码字面量，语言切换持久化 + `Intl` 本地化格式化。
|
||||
|
||||
---
|
||||
|
||||
## 2. demo.html 评估（创始人要求「先评 demo」）
|
||||
|
||||
| 维度 | demo 现状（实证） | 对 ToC 网站的判断 | 处置 |
|
||||
|---|---|---|---|
|
||||
| 品牌识别 | `cyan #31e6ff → green #7cf2a4` 霓虹渐变 + neon-on-ink | 强、差异化、契合「AI 游戏创作」 | **保留** |
|
||||
| token 纪律 | 单一 `radius:8px` / 单一签名渐变 / 单一缓动 `ease` / 单一入场动画 `lift` | 优秀、跨端可移植 | **保留并补全** |
|
||||
| 布局范式 | 桌面侧栏控制台 + workbench 1140px | **ToC 网站不适用**（消费首触是移动/响应式） | **否决，改响应式优先** |
|
||||
| 信息密度 | 5–6 列网格、body 11–13px | 创作/控制台可接受，消费面过密过小 | **消费面降密、body ≥14–16px** |
|
||||
| 文本对比度 | muted 蓝灰 `#8d9ab6` 正文 on 近黑 | 部分长正文恐不达 WCAG AA | **正文提字号/对比，muted 仅次要信息** |
|
||||
| 主题 | 仅暗色（注释已写"便于后续换肤"） | 品牌默认 OK，但广受众 later 或需浅色 | **semantic token 主题就绪，暗色先行** |
|
||||
| 交互态 | 无 `:disabled` / `:pressed` / `:focus` 定义 | 真实产品（表单/异步）必需 | **组件层补全全状态** |
|
||||
| 图标 | Unicode 字形 / emoji 当图标（`‹ ▲ ✓ 📊 ★ …`） | placeholder 感、跨端渲染不一致 | **引入 SVG 图标系统（lucide 取向）** |
|
||||
|
||||
> 一句话：demo 的「**语言**」（颜色/字/间距/质感/渐变）是好的、要继承；demo 的「**布局形态**」（桌面控制台）是给投资人看全貌的原型，不能直接当消费网站基线。
|
||||
|
||||
---
|
||||
|
||||
## 3. 推荐架构（review 级，不含代码）
|
||||
|
||||
### 3.1 设计 token：两层 + 跨端单一事实源
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
SRC[design-tokens 源<br/>primitive + semantic] --> WEB[Web 现在<br/>CSS 变量 tokens.css]
|
||||
SRC --> DESK[桌面 App later<br/>Web 技术直接复用]
|
||||
SRC --> MOB[移动 App later<br/>同份 token JSON→RN/Flutter]
|
||||
subgraph 两层
|
||||
P[primitive<br/>原色板/灰阶/尺寸原子] --> S[semantic<br/>语义令牌] --> C[component<br/>组件级令牌]
|
||||
end
|
||||
```
|
||||
|
||||
补全 inventory 揪出的缺口（全部 **additive**，旧变量不动）：
|
||||
- `--on-cyan:#061014` / `--on-danger:#2a0608`：**杀掉 4 个不一致的"深色on霓虹"硬编码**（`#04222a/#04221a/#04231a/#04202a`）+ 组件 fg 硬编码。
|
||||
- **spacing 尺度**：`--sp-1..6 = 4/8/12/16/22/32`（取自 demo 主导 8–14px 节奏；现状零间距令牌）。
|
||||
- `--surface-3`（demo 有 3 级面板，studio 仅 2 级）、`--line-2`（demo 2 级描边，studio 1 级）。
|
||||
- **3 级 elevation**：`--elev-1/2/3`（调和 studio `0 8px 24px` 与 demo `0 22px 60px`/模态 `0 26px 80px`）。
|
||||
- **radius 尺度（统一圆角矩形，禁药丸/椭圆）**：`--radius-xs/sm/md/lg/xl = 4/6/8/12/20`，默认 `--radius=md(8px)`，半径随元素尺寸比例设计。**全站统一圆角矩形语言**：chip/状态/徽章/进度条/图标按钮一律小半径圆角矩形，**取消 999px 药丸与正圆**（仅 loading 旋转环保留圆形=功能性）。〔创始人 2026-06-16 拍板〕
|
||||
- **多档舒适主题**：`[data-theme=dark|light|dim]` 仅覆盖**语义层**（primitive/组件/圆角不变），设置内可切 + `localStorage` 持久化 + 初值可跟随 `prefers-color-scheme`；暗色默认。后续可加护眼/高对比档。〔创始人 2026-06-16 拍板〕
|
||||
- `--fs-h3`、签名渐变令牌 `--grad-primary`、聚焦环 `--focus-ring`。
|
||||
- 把 **rgba 手抄调色板**（`rgba(49,230,255,.x)` 等手搓 alpha）统一改 `color-mix(in srgb, var(--token) N%, transparent)`（仓里已有正确用法，推广即可）。
|
||||
|
||||
### 3.2 通用组件库：封装 Vant + 自研品牌层（四层）
|
||||
|
||||
- **L0 token 层**：CSS 变量（3.1）。
|
||||
- **L1 Vant 适配**：`vant-theme.css` 把 `--van-*` 映射到 semantic token，复用 Vant 的交互/无障碍/键盘/触达（现状零 Vant UI 真渲染，纯手搓 → 表单/弹层等优先收编 `van-field`/`van-popup`）。
|
||||
- **L2 品牌基元**：`AppButton`(全状态+签名渐变回归) / `Field` / `Card` / `Chip` / `Badge` / `EmptyState` / `NavHeader` / `TabBar` / `Skeleton` / `Toast` / `Icon(SVG)`——**消灭 inventory 的重复**：`.field`×3、Project≈BizLeads 的 filter/card、3 处内联 StatusBadge、Play 裸 `<button>`、Message/Profile/TabBar 三处徽章。
|
||||
- **L3 业务组合**：`GameCard` / `InteractBar` / `FilterTabs` / `ListCard` …（吃 L2）。
|
||||
- **图标**：SVG sprite 替 Unicode/emoji（满足 ui-ux-pro-max 红线 `no-emoji-icons`）。
|
||||
|
||||
### 3.3 i18n 架构
|
||||
|
||||
- `createI18n`（vue-i18n），locale 文件 `game-studio/src/locales/{zh-CN,en-US}/*.json`，按页/域命名空间（`feed.*`/`create.*`/`profile.*`/`common.*`）。
|
||||
- **抽取范围**：17/19 视图模板字面量 + 7 组件 + 3 helper（`status.ts`/`msg-type.ts`/`publish-gates.ts`）+ 品牌串 `绘境AI`（现散落 Login/Create/Share → 收敛 i18n/常量）。
|
||||
- 语言切换入口（我的/设置）+ `localStorage` 持久化 + `<html lang>` 同步 + 数字/日期/货币用 `Intl` 本地化。
|
||||
- **占位文案清理**：Login 协议 `javascript:void(0)`「占位待法务」、Feed `window.prompt/alert` 举报、Profile「即将上线」toast——i18n 化时一并收口。
|
||||
|
||||
> ToC 站不要假门：模板中文字面量核验遵 `.agents/rules` 红线（`strings|grep 中文`假阴性，改脚本扫残留 + 双语对照），构建门兜底。
|
||||
|
||||
---
|
||||
|
||||
## 4. mockup 说明
|
||||
|
||||
[`docs-design/studio-redesign-mockup.html`](../../docs-design/studio-redesign-mockup.html)：自包含、浏览器直开。含
|
||||
① **token 全展示**（色/字/间距/圆角/阴影）② **组件全状态**（按钮含 disabled/loading、输入含 focus/error、卡片/徽章/空态/导航/骨架/toast/模态）③ **代表屏**（消费流卡 + 创作入口 + 响应式桌面框，证明"一套组件移动沉浸/桌面放大"）④ **实时 zh/en 语言切换**（证明 i18n 架构）。
|
||||
**mockup 的 CSS 即提案的真实 token 值——它是蓝图不是弃稿**，落地时直接映射到 `tokens.css` + Vue 组件 + vue-i18n。
|
||||
|
||||
---
|
||||
|
||||
## 5. 边界（in / out）
|
||||
|
||||
- **in**：设计 token 补全 + 通用组件库 + i18n 双语 + **多档舒适主题（暗 / 浅 / 柔和，设置内可切）** + 关键消费/创作面响应式落地。
|
||||
- **out（明确不做）**：桌面/移动**原生 App**（仅 token 契约就绪）· RTL · 重做品牌视觉 · admin 后台（另仓 game-admin）· 更多主题档（护眼/高对比，后续增量）。
|
||||
|
||||
---
|
||||
|
||||
## 6. blast radius / 风险
|
||||
|
||||
| 维度 | 影响 | 风险 |
|
||||
|---|---|---|
|
||||
| tokens.css 扩展 | 新增 primitive/semantic 令牌 | 低——additive，旧变量不动 |
|
||||
| 组件库重构 | `AppButton` 等 7 现役组件改造 + 收编重复 | 中——有回归面，按页灰度 + 视觉走查门 |
|
||||
| i18n 抽取 | 触 17 视图 + 组件 + helper 字面量 | 中——量大易漏，脚本扫残留 + 双语对照 + 构建门 |
|
||||
| Vant 真渲染 | 现零 Vant UI，引入 `van-field/van-popup` 变 DOM/样式 | 中——L1 封装隔离，逐组件替换 |
|
||||
|
||||
---
|
||||
|
||||
## 7. 验收
|
||||
|
||||
- mockup 创始人过审（视觉方向 + 跨端定位 + 暗色先行 + SVG 图标）。
|
||||
- token：脚本扫无散落硬编码 hex / rgba 手抄（归零或入令牌）。
|
||||
- 组件：全状态可视、Vant 无障碍保留、`AppButton` 签名渐变回归。
|
||||
- i18n：zh/en 切换全量生效、零硬编码残留、构建绿、`Intl` 格式化。
|
||||
- 响应式：375 / 768 / 1024 / 1440 四档无横滚、触达 ≥44px、文本对比 ≥WCAG AA、`prefers-reduced-motion` 尊重。
|
||||
|
||||
---
|
||||
|
||||
## 8. 创始人决议（2026-06-16 已拍）
|
||||
|
||||
1. **响应式定位** ✅ 认同——响应式优先消费级 Web（移动沉浸 / 桌面居中放大），**否决 demo 桌面侧栏控制台**。
|
||||
2. **主题** ✅ 暗色先行 + **设置内多档舒适主题（暗 / 浅 / 柔和）可切**（语义层覆盖、持久化）。
|
||||
3. **图标系统** ✅ 引入 SVG 图标（lucide 取向）替 Unicode/emoji。
|
||||
4. **落地节奏** ✅ 金样板（token + 组件库 + 1 消费面 + 1 创作面 i18n 化）先行验证，再批量推其余页。
|
||||
5. **形状语言** ✅（追加）统一圆角矩形、禁药丸/椭圆、半径按尺寸比例设计（见 §3.1）。
|
||||
|
||||
→ 决议落定。下一步：出**执行版 spec** 并按金样板落地。
|
||||
@ -33,4 +33,56 @@
|
||||
/* —— TabBar / 安全区相关 —— */
|
||||
--tabbar-h: 52px; /* 底部 TabBar 高度 */
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px); /* iOS 底部安全区 */
|
||||
|
||||
/* ============================================================
|
||||
体系化补全（HJ-FE-DS-001，全 additive；值取自已验证 mockup docs-design/studio-redesign-mockup.html）。
|
||||
旧令牌（--bg/--panel/--ink/--cyan/--radius/--shadow…）全保留，逐面迁移期共存。
|
||||
============================================================ */
|
||||
/* on-accent 前景：统一“深色 on 霓虹”，杀散落硬编码（#04222a/#04221a/#04231a/#04202a/#061014/#2a0608/#2a0610） */
|
||||
--on-accent: #061014; /* cyan/green/amber 之上的近黑前景 */
|
||||
--on-danger: #2a0608; /* danger/pink 之上的近黑前景 */
|
||||
/* 面板/描边补级（demo 有 3 级面板、2 级描边） */
|
||||
--surface-1: var(--panel); /* 一级面板别名 */
|
||||
--surface-2: var(--panel-2); /* 二级面板/输入别名 */
|
||||
--surface-3: #1c2439; /* 三级面板（最亮一层，新增） */
|
||||
--border-2: rgba(141, 154, 182, 0.32); /* 强描边（输入/次按钮轮廓） */
|
||||
/* 间距尺度（4 基线，杀散落 px margin/padding） */
|
||||
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px;
|
||||
/* 圆角尺度（统一圆角矩形，禁药丸/椭圆；--radius 旧值 8px 等同 --radius-md，保留兼容） */
|
||||
--radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px;
|
||||
/* 阴影 3 级（--shadow 旧值保留=elev-1） */
|
||||
--elev-1: var(--shadow);
|
||||
--elev-2: 0 16px 34px rgba(49, 230, 255, 0.18); /* 霓虹辉光（主 CTA） */
|
||||
--elev-3: 0 26px 80px rgba(0, 0, 0, 0.55); /* 模态/最高层 */
|
||||
/* 字号补 h3 + 字重阶梯（重字重是 demo 的关键质感） */
|
||||
--fs-h3: 15px;
|
||||
--fw-body: 400; --fw-medium: 560; --fw-label: 720; --fw-cta: 820; --fw-mark: 900;
|
||||
/* 签名渐变 / 强调渐变 / 聚焦环（集中管理，杀手抄 rgba 与渐变） */
|
||||
--grad-primary: linear-gradient(135deg, var(--cyan), var(--green));
|
||||
--grad-hot: linear-gradient(135deg, var(--pink), var(--amber));
|
||||
--focus-ring: 0 0 0 4px rgba(49, 230, 255, 0.22);
|
||||
/* 语义别名（新组件优先用语义名；主题切换只动语义层） */
|
||||
--accent: var(--cyan); --success: var(--green); --warning: var(--amber);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
多档舒适主题（HJ-FE-DS-001 决议②；设置内可切，仅覆盖语义层，组件/圆角不变）。
|
||||
暗色=默认(:root)；浅色/柔和经 <html data-theme> 切换。品牌强调色（cyan/green…）与
|
||||
on-accent 跨主题恒定。未迁移页仍引旧令牌→暗色零回归；浅/柔正确性仅保证已迁移面（金样板 Feed/Create）。
|
||||
============================================================ */
|
||||
[data-theme="light"] {
|
||||
--bg: #eef2f9; --panel: #ffffff; --panel-2: #f1f4fa;
|
||||
--surface-1: #ffffff; --surface-2: #f1f4fa; --surface-3: #e6ecf6;
|
||||
--ink: #0c1322; --muted: #5b6678;
|
||||
--border: rgba(12, 19, 34, 0.12); --border-2: rgba(12, 19, 34, 0.22);
|
||||
--mask: rgba(31, 45, 71, 0.45);
|
||||
--shadow: 0 8px 24px rgba(31, 45, 71, 0.12);
|
||||
--elev-1: 0 8px 24px rgba(31, 45, 71, 0.12);
|
||||
--elev-3: 0 26px 60px rgba(31, 45, 71, 0.18);
|
||||
}
|
||||
[data-theme="dim"] {
|
||||
--bg: #0f131d; --panel: #171c28; --panel-2: #1c2230;
|
||||
--surface-1: #171c28; --surface-2: #1c2230; --surface-3: #232a3a;
|
||||
--ink: #e6ecf6; --muted: #9aa6bf;
|
||||
--border: rgba(141, 154, 182, 0.22); --border-2: rgba(141, 154, 182, 0.36);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user