F12 · 串珠哑铃图
类目级前后对比（≤6 类，串珠=真单位）的 Lupi Basics 真实参考实现。示例结论为“改版前后的新手引导耗时”，副标题已经把图例、单位或时间口径写在图旁：空心圆点代表改版前 · 实心圆点代表改版后 · 轨道上的每颗珠子代表节省一分钟
技术档案
| 项目 | 约定 |
|---|---|
| 数据形状 | 类目级前后对比（≤6 类，串珠=真单位） |
| 场合 | 年报/复盘 |
| 读者时间 | ~30s |
| 渲染引擎 | SVG |
| 交互与动效 | 滚入视野播放，点击图表重播；数据点带浏览器原生提示 |
| 示例来源行 | DUMBBELL QUEUE · MONO-BASIC · UX TIMING |
实现与使用边界
- 页面直接复用 gallery 中 “Onboarding, before and after” 的卡片结构和同名渲染块，没有按截图重新绘制。
- 标题、副标题、图形、来源行四件套保持原样；数据编码、比例关系、灰阶和动画节奏由原实现决定。
- 使用时只替换数据与文案，并保持“类目级前后对比（≤6 类，串珠=真单位）”这一数据契约；若数据本体改变，应回到总目录重新选型。
- 颜色限于 Mono 灰阶，面积编码继续使用平方根换算；柱长、位置与角度编码不得断轴或视觉夸大。
模板来源：Lieflat Charts
F12 Dumbbell Queue，真实骨架取自templates/basics-gallery.html的 “Onboarding, before and after” 卡片与对应渲染块。
f12-dumbbell-queue.html —— 自包含单页源码
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Lieflat Charts — F12 串珠哑铃图</title>
<link rel="stylesheet" href="../../../../vendor/fonts/fonts.css">
<style>
:root{--bg:#F0EFEB;--ink:#1C1C1A;--muted:#8F8E88;--faint:#C6C5BF;--grid:#DEDDD6}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);font-family:'Inter',sans-serif;color:var(--ink);padding:40px;-webkit-font-smoothing:antialiased}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1100px;margin:0 auto}
.card{background:var(--bg);border-radius:24px;padding:28px 28px 20px}
h2{font-weight:700;font-size:16.5px;letter-spacing:-.02em;margin-bottom:3px}
.sub{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.src{font-size:9.5px;color:var(--faint);margin-top:10px;letter-spacing:.08em;font-weight:500}
.badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.08em;
padding:3px 10px;border-radius:99px;margin-bottom:10px;border:1px dashed #B0AFA9;color:#8F8E88}
svg{width:100%;max-height:330px;display:block;margin:0 auto}
svg text{font-family:'Inter',sans-serif}
.pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.2,.7,.3,1.3) both}
@keyframes pop{from{transform:scale(0)}to{transform:none}}
.fade{animation:fade .9s ease both}
@keyframes fade{from{opacity:0}}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.4,0,.2,1) both}
@keyframes draw{to{stroke-dashoffset:0}}
.pagehead{max-width:1100px;margin:0 auto 26px;padding:0 4px}
.pagehead h1{font-size:22px;letter-spacing:-.02em;font-weight:800}
.pagehead p{font-size:12px;color:#8F8E88;margin-top:5px;line-height:1.7}
html,body{min-height:100%;margin:0}
body{display:grid;place-items:center;padding:28px}
.pagehead{display:none}
.grid2{display:block;width:min(100%,920px);max-width:920px;margin:0 auto}
.card,.card.wide{display:block;width:100%;min-height:520px;padding:38px 42px 24px}
.card .split{grid-template-columns:minmax(190px,250px) 1fr}
.wiki-code{display:inline-block;margin-bottom:12px;padding:4px 11px;border:1px dashed #B0AFA9;border-radius:99px;color:#8F8E88;font-size:10px;font-weight:700;letter-spacing:.08em}
.card.dark .wiki-code{border-color:#55554F}
@media(max-width:620px){
body{padding:10px}
.card,.card.wide{min-height:500px;padding:26px 18px 20px}
.card .split{display:block}
.card .note,.card .legend{display:none}
}
</style>
</head>
<body>
<main class="grid2">
<div class="card">
<span class="wiki-code">LUPI 基础型 · F12</span>
<span class="badge">LUPI 基础型 · 哑铃对比</span>
<h2>改版前后的新手引导耗时</h2>
<div class="sub">空心圆点代表改版前 · 实心圆点代表改版后 · 轨道上的每颗珠子代表节省一分钟</div>
<svg id="dumbbell" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
<div class="src">DUMBBELL QUEUE · MONO-BASIC · UX TIMING</div>
</div>
</main>
<script>
// ── shared Mono tokens（与 lupi-gallery 同源） ──
const INK='#1C1C1A',PAPER='#F0EFEB',MUTED='#8F8E88',GRID='#DEDDD6';
const NS='http://www.w3.org/2000/svg';
const el=(p,t,a)=>{const n=document.createElementNS(NS,t);for(const k in a)n.setAttribute(k,a[k]);p.appendChild(n);return n};
const txt=(p,a,s)=>{const n=el(p,'text',a);n.textContent=s;return n};
const tip=(n,s)=>{const t=document.createElementNS(NS,'title');t.textContent=s;n.appendChild(t)};
const rnd=(i,k)=>Math.abs(((i*73856093)^(k*19349663))%1000)/1000;
const D2R=Math.PI/180;
const pol=(cx,cy,r,deg)=>[cx+r*Math.cos(deg*D2R),cy+r*Math.sin(deg*D2R)];
const obsReveal=(id,fn)=>{
const n=document.getElementById(id);
const go=()=>{n.innerHTML='';fn(n)};
const io=new IntersectionObserver(es=>{if(es[0].isIntersecting){go();io.disconnect()}},{threshold:.3});
io.observe(n);
n.style.cursor='pointer';
n.addEventListener('click',go);
};
// ════ C8 · dumbbell queue ════
// 哑铃对比：空心点=改版前，实心点=改版后，两点之间的轨道上串珠，
// 一珠 = 省下的一分钟，可数。全部向左走（变快），没有交叉没有 X。
(()=>{
const D=[['INVITE FLOW',14,6],['FIRST BOARD',19,9],['IMPORT DATA',26,13],['TEAM SETUP',31,21],['GO LIVE',38,30]];
obsReveal('dumbbell',s=>{
const y0=i=>56+i*46,X0=118,X1=364,mapX=v=>X0+(v-4)/36*(X1-X0);
D.forEach(([name,was,now],i)=>{
const y=y0(i),xa=mapX(was),xb=mapX(now);
txt(s,{x:108,y:y+3,'font-size':7.5,'font-weight':700,fill:'#6A6963','text-anchor':'end',
'letter-spacing':'.06em',class:'fade',style:`animation-delay:${i*.08}s`},name);
el(s,'line',{x1:X0-6,y1:y,x2:X1+6,y2:y,stroke:'#E3E2DB','stroke-width':.7,
class:'fade',style:`animation-delay:${i*.08}s`});
// beads: one per minute saved, strung between the two dots
const n=was-now;
for(let k=0;k<n;k++){
const t=(k+.5)/n,x=xb+t*(xa-xb),yy=y+(rnd(k+1,i+3)-.5)*2.6;
el(s,'circle',{cx:x,cy:yy,r:1.5+rnd(k+2,i+4)*.9,fill:'#8F8E88',opacity:.85,
class:'pop',style:`animation-delay:${.3+i*.08+k*.03}s`});
}
el(s,'circle',{cx:xa,cy:y,r:4.2,fill:PAPER,stroke:INK,'stroke-width':1.3,
class:'pop',style:`animation-delay:${.2+i*.08}s`});
const after=el(s,'circle',{cx:xb,cy:y,r:4.6,fill:INK,
class:'pop',style:`animation-delay:${.6+i*.08}s`});
tip(after,`${name} — ${was} min → ${now} min`);
txt(s,{x:xa+10,y:y-8,'font-size':8.5,'font-weight':700,fill:'#B0AFA9',
class:'fade',style:`animation-delay:${.3+i*.08}s`},was);
txt(s,{x:xb-10,y:y-8,'font-size':10,'font-weight':800,fill:INK,'text-anchor':'end',
class:'fade',style:`animation-delay:${.7+i*.08}s`},now);
});
txt(s,{x:X0,y:290,'font-size':7,'font-weight':600,fill:'#C6C5BF',class:'fade'},'FASTER ←');
txt(s,{x:X1,y:290,'font-size':7,'font-weight':600,fill:'#C6C5BF','text-anchor':'end',
class:'fade'},'MINUTES');
txt(s,{x:200,y:308,'font-size':7,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
'letter-spacing':'.12em',class:'fade',style:'animation-delay:1s'},
'ONE BEAD = ONE MINUTE SAVED · HOLLOW = BEFORE · INK = AFTER');
});
})();
</script>
</body>
</html>