init: 羚牛车辆数据中心原型 + 部署配置

- React 18 + Babel-in-browser SPA 原型，覆盖 8 个画板：
  实时地图 / 车辆详情 / 历史查询 / 轨迹回放 / 事件规则 / 通知中心 / ESG 碳减排 / 移动端
- 设计系统：IBM Plex Sans + JetBrains Mono，亮/暗双主题，羚牛绿 #007143
- 数据模型：12 + 40 辆车，TBOX (T) / JT808+1078 (JT) / 双源 (B)
- 部署：nginx 静态托管，Dockerfile + woodpecker.yml + docker-compose.yml
- 镜像：harbor.lnh2e.com/lingniu-v1/ln-vdc:<branch>-<VERSION>
- 容器端口 80，宿主映射 8112，含 /healthz 探活

artboards/playback.jsx

@@ -0,0 +1,418 @@
+// artboard-playback.jsx — Trajectory playback with synchronized data
+
+// ── Calendar dropdown ─────────────────────────────────────
+const Calendar = ({ selected, onSelect, onClose }) => {
+  // Anchor: April 2026 — month-view picker
+  const [viewMonth, setViewMonth] = React.useState(() => {
+    const [y, m] = selected.split("-").map(Number);
+    return { y, m: m - 1 }; // 0-indexed
+  });
+
+  React.useEffect(() => {
+    const onDoc = (e) => { if (!e.target.closest("[data-cal]")) onClose(); };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [onClose]);
+
+  const monthName = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"][viewMonth.m];
+  const firstDay  = new Date(viewMonth.y, viewMonth.m, 1).getDay(); // 0=Sun
+  const daysInMth = new Date(viewMonth.y, viewMonth.m + 1, 0).getDate();
+  const today = "2026-04-28";
+
+  // Mock days with trips (heat indicator)
+  const tripDays = {
+    "2026-04-21": 5, "2026-04-22": 6, "2026-04-23": 4, "2026-04-24": 7, "2026-04-25": 3,
+    "2026-04-26": 0, "2026-04-27": 5, "2026-04-28": 6, "2026-04-15": 4, "2026-04-16": 6,
+    "2026-04-08": 3, "2026-04-09": 5, "2026-04-10": 4,
+  };
+
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMth; d++) cells.push(d);
+  while (cells.length % 7) cells.push(null);
+
+  const fmt = (d) => `${viewMonth.y}-${String(viewMonth.m + 1).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
+
+  return (
+    <div data-cal style={{
+      position:"absolute", top:36, left:0, zIndex:100, width:280,
+      background:"var(--bg-popover)", border:"1px solid var(--border-2)", borderRadius:8,
+      boxShadow:"0 12px 32px rgba(0,0,0,.18)", padding:14,
+    }}>
+      {/* Month nav */}
+      <div className="between" style={{marginBottom:10}}>
+        <button className="btn icon sm" onClick={() => setViewMonth(m => ({ y: m.m === 0 ? m.y-1 : m.y, m: m.m === 0 ? 11 : m.m-1 }))}>
+          <Icon name="chevron" size={12} style={{transform:"rotate(180deg)"}}/>
+        </button>
+        <span className="strong" style={{fontSize:13}}>{viewMonth.y} 年 {monthName}</span>
+        <button className="btn icon sm" onClick={() => setViewMonth(m => ({ y: m.m === 11 ? m.y+1 : m.y, m: m.m === 11 ? 0 : m.m+1 }))}>
+          <Icon name="chevron" size={12}/>
+        </button>
+      </div>
+      {/* Weekdays */}
+      <div style={{display:"grid", gridTemplateColumns:"repeat(7, 1fr)", gap:2, marginBottom:4}}>
+        {["日","一","二","三","四","五","六"].map(w => (
+          <div key={w} className="muted" style={{fontSize:10, textAlign:"center", padding:"4px 0"}}>{w}</div>
+        ))}
+      </div>
+      {/* Day cells */}
+      <div style={{display:"grid", gridTemplateColumns:"repeat(7, 1fr)", gap:2}}>
+        {cells.map((d, i) => {
+          if (!d) return <div key={i} style={{height:30}}/>;
+          const ds = fmt(d);
+          const trips = tripDays[ds] || 0;
+          const isSel = ds === selected;
+          const isToday = ds === today;
+          const heat = trips === 0 ? null : trips < 3 ? "var(--accent-soft)" : trips < 5 ? "rgba(0,113,67,.30)" : "var(--accent)";
+          return (
+            <div key={i}
+              onClick={() => onSelect(ds)}
+              style={{
+                height:30, borderRadius:5, cursor:"pointer",
+                display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center",
+                fontSize:11, position:"relative",
+                background: isSel ? "var(--accent)" : "transparent",
+                color: isSel ? "#fff" : trips === 0 ? "var(--fg-3)" : "var(--fg-1)",
+                fontWeight: isSel || isToday ? 600 : 400,
+                border: isToday && !isSel ? "1px solid var(--accent)" : "1px solid transparent",
+              }}
+              onMouseEnter={(e) => !isSel && (e.currentTarget.style.background = "var(--bg-2)")}
+              onMouseLeave={(e) => !isSel && (e.currentTarget.style.background = "transparent")}>
+              <span className="mono">{d}</span>
+              {trips > 0 && !isSel && (
+                <span style={{position:"absolute", bottom:3, width:4, height:4, borderRadius:2, background:heat}}/>
+              )}
+              {trips > 0 && isSel && (
+                <span style={{position:"absolute", bottom:2, fontSize:8, opacity:.85}}>{trips}</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      {/* Footer legend */}
+      <div className="between" style={{marginTop:10, paddingTop:10, borderTop:"1px solid var(--border-1)", fontSize:10}}>
+        <span className="muted">行程频次</span>
+        <div className="mid gap-2">
+          <span className="mid gap-1"><span style={{width:6, height:6, borderRadius:3, background:"var(--accent-soft)"}}/><span className="muted">少</span></span>
+          <span className="mid gap-1"><span style={{width:6, height:6, borderRadius:3, background:"rgba(0,113,67,.30)"}}/><span className="muted">中</span></span>
+          <span className="mid gap-1"><span style={{width:6, height:6, borderRadius:3, background:"var(--accent)"}}/><span className="muted">高</span></span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ArtboardPlayback = () => {
+  const [t, setT] = React.useState(42); // 0-100
+  const [speed, setSpeed] = React.useState(2);
+  const [playing, setPlaying] = React.useState(true);
+
+  // Date / time-range selection
+  const [dateStr, setDateStr] = React.useState("2026-04-28");
+  const [timeFrom, setTimeFrom] = React.useState("14:02");
+  const [timeTo,   setTimeTo]   = React.useState("14:44");
+  const [calOpen,  setCalOpen]  = React.useState(false);
+
+  // List of trips on the selected date — each is a candidate range
+  const trips = [
+    {id:"T-001", from:"08:14", to:"09:42", km:42.6, evt:1, route:"总站 → 港务局",     active:false},
+    {id:"T-002", from:"10:08", to:"11:35", km:38.1, evt:0, route:"港务局 → 维保中心", active:false},
+    {id:"T-003", from:"12:45", to:"13:38", km:21.4, evt:2, route:"维保中心 → 总站",   active:false},
+    {id:"T-004", from:"14:02", to:"14:44", km:32.4, evt:3, route:"总站 → 乍浦港 #2",  active:true },
+    {id:"T-005", from:"15:10", to:"16:32", km:48.9, evt:1, route:"乍浦港 → 嘉兴南",   active:false},
+    {id:"T-006", from:"17:48", to:"19:05", km:55.2, evt:2, route:"嘉兴南 → 总站",     active:false},
+  ];
+
+  // Compute marker pos along a path
+  const path = "M 200 540 L 280 480 L 360 420 L 440 380 L 520 340 L 620 320 L 720 320 L 820 340 L 900 380 L 980 440";
+  const points = [
+    [200,540],[280,480],[360,420],[440,380],[520,340],[620,320],[720,320],[820,340],[900,380],[980,440]
+  ];
+  const idx = Math.min(points.length - 1, Math.floor((t/100) * (points.length - 1)));
+  const next = Math.min(points.length - 1, idx + 1);
+  const frac = (t/100) * (points.length - 1) - idx;
+  const px = points[idx][0] + (points[next][0] - points[idx][0]) * frac;
+  const py = points[idx][1] + (points[next][1] - points[idx][1]) * frac;
+
+  React.useEffect(() => {
+    if (!playing) return;
+    const id = setInterval(() => setT(prev => (prev + 0.4 * speed) % 100), 80);
+    return () => clearInterval(id);
+  }, [playing, speed]);
+
+  const events = [
+    {at:8, type:"start", lbl:"出发·总站"},
+    {at:22, type:"warn", lbl:"急加速"},
+    {at:38, type:"stop", lbl:"信号停车"},
+    {at:55, type:"warn", lbl:"超速"},
+    {at:74, type:"stop", lbl:"补能站"},
+    {at:92, type:"end", lbl:"到达·机场"},
+  ];
+
+  return (
+    <div className="app">
+      <Sidebar active="route"/>
+      <div style={{flex:1, display:"flex", flexDirection:"column", minWidth:0, position:"relative", zIndex:1}}>
+        <Topbar crumbs={["轨迹回放", `浙F07179F · ${dateStr.slice(5)} ${timeFrom} → ${timeTo}`]} kpis={[]} showSearch={false}/>
+
+        {/* Date / time-range selector bar */}
+        <div style={{padding:"10px 16px", borderBottom:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", gap:14, alignItems:"center", flexWrap:"wrap"}}>
+          <div className="mid gap-2">
+            <Icon name="history" size={14} style={{color:"var(--accent)"}}/>
+            <span className="muted" style={{fontSize:11}}>日期</span>
+          </div>
+
+          {/* Date pill with calendar dropdown */}
+          <div style={{position:"relative"}}>
+            <button
+              onClick={() => setCalOpen(!calOpen)}
+              className="btn"
+              style={{height:30, padding:"0 12px", display:"flex", alignItems:"center", gap:8, background:"var(--bg-2)", borderColor: calOpen ? "var(--accent)" : "var(--border-1)"}}>
+              <Icon name="bookmark" size={12}/>
+              <span className="mono strong" style={{fontSize:12}}>{dateStr}</span>
+              <span className="muted" style={{fontSize:10, marginLeft:4}}>周二</span>
+              <Icon name="chevDown" size={11} style={{color:"var(--fg-3)"}}/>
+            </button>
+            {calOpen && (
+              <Calendar selected={dateStr} onSelect={(d) => { setDateStr(d); setCalOpen(false); }} onClose={() => setCalOpen(false)}/>
+            )}
+          </div>
+
+          {/* Quick-range presets */}
+          <div className="row gap-1">
+            {[
+              {l:"今日",  v:"today"},
+              {l:"昨日",  v:"yesterday"},
+              {l:"近7日", v:"7d"},
+              {l:"近30日",v:"30d"},
+              {l:"自定义",v:"custom"},
+            ].map((p,i) => (
+              <span key={i} className={"chip " + (p.v === "custom" ? "accent" : "")}
+                style={{cursor:"pointer", fontSize:10}}
+                onClick={() => {
+                  const today = new Date("2026-04-28");
+                  if (p.v === "today") setDateStr("2026-04-28");
+                  else if (p.v === "yesterday") setDateStr("2026-04-27");
+                  else if (p.v === "7d") setDateStr("2026-04-22");
+                  else if (p.v === "30d") setDateStr("2026-03-29");
+                }}>{p.l}</span>
+            ))}
+          </div>
+
+          <span style={{width:1, height:20, background:"var(--border-1)"}}/>
+
+          {/* Time range */}
+          <div className="mid gap-2">
+            <span className="muted" style={{fontSize:11}}>时段</span>
+            <div style={{display:"flex", alignItems:"center", gap:0, background:"var(--bg-2)", border:"1px solid var(--border-1)", borderRadius:6, height:30, padding:"0 4px"}}>
+              <input type="text" value={timeFrom} onChange={e => setTimeFrom(e.target.value)}
+                style={{width:54, height:22, background:"transparent", border:"none", color:"var(--fg-0)", fontFamily:"var(--font-mono)", fontSize:12, textAlign:"center", outline:"none"}}/>
+              <span className="muted mono" style={{fontSize:11}}>→</span>
+              <input type="text" value={timeTo} onChange={e => setTimeTo(e.target.value)}
+                style={{width:54, height:22, background:"transparent", border:"none", color:"var(--fg-0)", fontFamily:"var(--font-mono)", fontSize:12, textAlign:"center", outline:"none"}}/>
+            </div>
+          </div>
+
+          {/* Trip count badge */}
+          <span className="chip" style={{fontSize:10}}>
+            <span className="muted">当日行程</span>
+            <span className="mono strong" style={{marginLeft:6, color:"var(--accent)"}}>{trips.length}</span>
+          </span>
+
+          <div style={{marginLeft:"auto", display:"flex", gap:6}}>
+            <button className="btn"><Icon name="refresh" size={13}/> 刷新</button>
+            <button className="btn primary"><Icon name="search" size={13}/> 查询轨迹</button>
+          </div>
+        </div>
+
+        {/* Toolbar */}
+        <div style={{padding:"10px 16px", borderBottom:"1px solid var(--border-1)", display:"flex", gap:12, alignItems:"center", background:"var(--bg-1)"}}>
+          <span className="chip accent">浙F07179F ×</span>
+          <span className="chip">+ 添加车辆对比</span>
+          <span style={{width:1, height:20, background:"var(--border-1)"}}/>
+          <span className="muted" style={{fontSize:11}}>显示</span>
+          <span className="chip accent">轨迹</span>
+          <span className="chip accent">事件</span>
+          <span className="chip">热力</span>
+          <span className="chip">停留点</span>
+          <div style={{marginLeft:"auto", display:"flex", gap:6}}>
+            <button className="btn"><Icon name="download" size={13}/> 导出</button>
+            <button className="btn"><Icon name="bookmark" size={13}/> 保存</button>
+          </div>
+        </div>
+
+        <div style={{flex:1, display:"grid", gridTemplateColumns:"1fr 320px", minHeight:0}}>
+          <div style={{display:"flex", flexDirection:"column", minWidth:0}}>
+            {/* Map */}
+            <div style={{flex:1, position:"relative", minHeight:0}}>
+              <FleetMap
+                vehicles={[]}
+                highlightPath={path}
+                playbackPoint={{x: px, y: py}}
+              />
+              {/* Event markers on map */}
+              <svg viewBox="0 0 1240 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
+                   style={{position:"absolute", inset:0, pointerEvents:"none"}}>
+                {events.map((e,i)=>{
+                  const ei = Math.min(points.length - 1, Math.floor((e.at/100) * (points.length - 1)));
+                  const ef = (e.at/100) * (points.length - 1) - ei;
+                  const en = Math.min(points.length - 1, ei + 1);
+                  const x = points[ei][0] + (points[en][0]-points[ei][0])*ef;
+                  const y = points[ei][1] + (points[en][1]-points[ei][1])*ef;
+                  const c = e.type === "warn" ? "var(--warn)" : e.type === "start" ? "var(--ok)" : e.type === "end" ? "var(--accent)" : "var(--fg-2)";
+                  return (
+                    <g key={i} transform={`translate(${x} ${y})`}>
+                      <circle r="6" fill={c} opacity="0.25"/>
+                      <circle r="3" fill={c} stroke="var(--bg-0)" strokeWidth="1"/>
+                    </g>
+                  );
+                })}
+              </svg>
+              {/* Live readout */}
+              <div style={{position:"absolute", top:14, left:14, padding:"10px 14px", background:"var(--bg-popover)", border:"1px solid var(--border-2)", borderRadius:8, fontSize:11, fontFamily:"var(--font-mono)", display:"flex", gap:18, boxShadow:"0 4px 16px rgba(0,0,0,.12)"}}>
+                <div><div className="muted" style={{fontSize:10}}>时间</div><div className="strong">14:{String(Math.floor(t*0.42 + 2)).padStart(2,"0")}:{String(Math.floor(t*36)%60).padStart(2,"0")}</div></div>
+                <div><div className="muted" style={{fontSize:10}}>速度</div><div className="strong" style={{color:"var(--info)"}}>{Math.floor(40 + Math.sin(t*0.1)*30)} km/h</div></div>
+                <div><div className="muted" style={{fontSize:10}}>SOC</div><div className="strong" style={{color:"var(--accent)"}}>{Math.floor(78 - t*0.18)}%</div></div>
+                <div><div className="muted" style={{fontSize:10}}>H₂</div><div className="strong">{(4.2 - t*0.012).toFixed(2)} MPa</div></div>
+                <div><div className="muted" style={{fontSize:10}}>累计</div><div className="strong">{(t*0.32).toFixed(1)} km</div></div>
+              </div>
+            </div>
+
+            {/* Player + multi-curve */}
+            <div style={{borderTop:"1px solid var(--border-1)", background:"var(--bg-1)"}}>
+              {/* Synced data curves */}
+              <div style={{padding:"10px 16px 4px", position:"relative"}}>
+                <div style={{display:"flex", gap:14, fontSize:10, marginBottom:4}}>
+                  <span className="mid gap-1"><span className="dot" style={{background:"var(--info)"}}/> 速度 km/h</span>
+                  <span className="mid gap-1"><span className="dot" style={{background:"var(--accent)"}}/> SOC %</span>
+                  <span className="mid gap-1"><span className="dot" style={{background:"var(--warn)"}}/> H₂压力 MPa</span>
+                </div>
+                <div style={{position:"relative", height:80}}>
+                  <div style={{position:"absolute", inset:0}}><LineChart data={genSpeed()} w={920} h={80} color="var(--info)" axis/></div>
+                  <div style={{position:"absolute", inset:0}}><LineChart data={genSoc()} w={920} h={80} color="var(--accent)" fill={false}/></div>
+                  <div style={{position:"absolute", inset:0}}><LineChart data={genH2().map(v=>v*15)} w={920} h={80} color="var(--warn)" fill={false}/></div>
+                  {/* playhead */}
+                  <div style={{position:"absolute", top:0, bottom:0, left: (t)+"%", width:1, background:"var(--accent)", boxShadow:"0 0 8px var(--accent-glow)"}}/>
+                </div>
+              </div>
+
+              {/* Timeline + controls */}
+              <div style={{padding:"6px 16px 14px"}}>
+                <div style={{position:"relative", height:36, background:"var(--bg-2)", borderRadius:4, border:"1px solid var(--border-1)"}}>
+                  {/* event markers */}
+                  {events.map((e,i)=>(
+                    <div key={i} style={{position:"absolute", left: e.at+"%", top:0, bottom:0, width:2,
+                      background: e.type==="warn"?"var(--warn)":e.type==="stop"?"var(--fg-2)":"var(--accent)"}}
+                      title={e.lbl}/>
+                  ))}
+                  {/* progress fill */}
+                  <div style={{position:"absolute", left:0, top:0, bottom:0, width: t+"%", background:"var(--accent-soft)"}}/>
+                  {/* playhead */}
+                  <div style={{position:"absolute", left: t+"%", top:-4, bottom:-4, width:2, background:"var(--accent)", boxShadow:"0 0 12px var(--accent-glow)"}}/>
+                  <div style={{position:"absolute", left:`calc(${t}% - 5px)`, top:"50%", marginTop:-5, width:10, height:10, borderRadius:5, background:"var(--accent)", border:"2px solid var(--bg-0)"}}/>
+                  {/* time labels */}
+                  <div style={{position:"absolute", inset:"auto 0 -16px", display:"flex", justifyContent:"space-between", padding:"0 4px", fontSize:9}} className="muted mono">
+                    {["14:02","14:08","14:15","14:23","14:30","14:36","14:44"].map(x=><span key={x}>{x}</span>)}
+                  </div>
+                </div>
+                <div className="between" style={{marginTop:24}}>
+                  <div className="mid gap-2">
+                    <button className="btn icon"><Icon name="prev" size={13}/></button>
+                    <button className="btn icon primary" onClick={()=>setPlaying(!playing)}>
+                      <Icon name={playing?"pause":"play"} size={13}/>
+                    </button>
+                    <button className="btn icon"><Icon name="next" size={13}/></button>
+                    <span className="muted mono" style={{marginLeft:8, fontSize:11}}>14:{String(Math.floor(t*0.42 + 2)).padStart(2,"0")}:{String(Math.floor(t*36)%60).padStart(2,"0")} / 14:44:00</span>
+                  </div>
+                  <div className="mid gap-1">
+                    <span className="muted" style={{fontSize:11, marginRight:6}}>倍速</span>
+                    {[0.5, 1, 2, 4, 8, 16].map(s=>(
+                      <span key={s} className={"chip " + (s === speed ? "accent" : "")}
+                            style={{cursor:"pointer"}} onClick={()=>setSpeed(s)}>{s}×</span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Side: trips + events + summary */}
+          <div style={{borderLeft:"1px solid var(--border-1)", background:"var(--bg-1)", display:"flex", flexDirection:"column", minHeight:0}}>
+            {/* Trips of selected day */}
+            <div style={{borderBottom:"1px solid var(--border-1)"}}>
+              <div className="panel-head">
+                <Icon name="route" size={13}/>
+                <span className="title">当日行程</span>
+                <span className="chip" style={{marginLeft:"auto"}}>{trips.length}</span>
+              </div>
+              <div style={{maxHeight:180, overflowY:"auto"}}>
+                {trips.map((tr,i)=>(
+                  <div key={i} style={{
+                    display:"flex", gap:10, padding:"8px 14px", cursor:"pointer",
+                    borderLeft: tr.active ? "2px solid var(--accent)" : "2px solid transparent",
+                    background: tr.active ? "var(--accent-soft)" : "transparent",
+                    borderBottom:"1px solid var(--border-1)",
+                  }}>
+                    <div style={{flex:1, minWidth:0}}>
+                      <div className="between">
+                        <span className="mono strong" style={{fontSize:11}}>{tr.from} → {tr.to}</span>
+                        <span className="mono" style={{fontSize:10, color: tr.active ? "var(--accent)" : "var(--fg-2)"}}>{tr.km} km</span>
+                      </div>
+                      <div className="between" style={{marginTop:3}}>
+                        <span className="muted" style={{fontSize:10, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{tr.route}</span>
+                        {tr.evt > 0 && <span className="chip" style={{fontSize:9, padding:"1px 5px", color:"var(--warn)", background:"var(--warn-soft)", borderColor:"transparent"}}>{tr.evt}事件</span>}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Events */}
+            <div className="panel-head" style={{borderBottom:"1px solid var(--border-1)"}}>
+              <Icon name="timeline" size={13}/>
+              <span className="title">事件时间线</span>
+              <span className="chip" style={{marginLeft:"auto"}}>{events.length}</span>
+            </div>
+            <div className="scroll" style={{flex:1, padding:"10px 0"}}>
+              {events.map((e,i)=>{
+                const c = e.type === "warn" ? "var(--warn)" : e.type === "start" ? "var(--ok)" : e.type === "end" ? "var(--accent)" : "var(--fg-2)";
+                return (
+                  <div key={i} style={{display:"flex", gap:10, padding:"10px 16px", cursor:"pointer", borderLeft: Math.abs(t - e.at) < 3 ? "2px solid var(--accent)" : "2px solid transparent", background: Math.abs(t - e.at) < 3 ? "var(--accent-soft)" : "transparent"}} onClick={()=>setT(e.at)}>
+                    <div style={{position:"relative", width:14, paddingTop:3}}>
+                      <span className="dot" style={{background:c, width:8, height:8, borderRadius:4}}/>
+                      {i < events.length - 1 && <span style={{position:"absolute", top:14, bottom:-22, left:3, width:2, background:"var(--border-1)"}}/>}
+                    </div>
+                    <div style={{flex:1}}>
+                      <div className="between">
+                        <span className="strong" style={{fontSize:12}}>{e.lbl}</span>
+                        <span className="mono muted" style={{fontSize:10}}>14:{String(Math.floor(e.at*0.42 + 2)).padStart(2,"0")}</span>
+                      </div>
+                      <div className="muted" style={{fontSize:11, marginTop:2}}>
+                        {e.type==="warn" ? "速度 +18 km/h · 持续 2.4s" :
+                         e.type==="stop" ? "停留 1分12秒" :
+                         e.type==="start" ? "里程 0 km" : "里程 32.4 km · 平均 49 km/h"}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <div style={{padding:14, borderTop:"1px solid var(--border-1)"}}>
+              <div className="eyebrow" style={{marginBottom:8}}>本次行程</div>
+              <div className="col gap-2" style={{fontSize:11}}>
+                <div className="between"><span className="muted">里程</span><span className="mono strong">32.4 km</span></div>
+                <div className="between"><span className="muted">时长</span><span className="mono strong">42 分钟</span></div>
+                <div className="between"><span className="muted">平均速度</span><span className="mono strong">46 km/h</span></div>
+                <div className="between"><span className="muted">最高速度</span><span className="mono strong" style={{color:"var(--warn)"}}>89 km/h</span></div>
+                <div className="between"><span className="muted">能耗</span><span className="mono strong">5.8 kWh / 0.32 kg H₂</span></div>
+                <div className="between"><span className="muted">评分</span><span className="mono strong" style={{color:"var(--accent)"}}>87 / 100</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+window.ArtboardPlayback = ArtboardPlayback;