ParkingRobot/.superpowers/brainstorm/1612-1785939150/content/dashboard-layout.html

<h2>实时轨迹规划网页看板：布局选择</h2>
<p class="subtitle">三种方案都保持 OBSERVE_ONLY。蓝线表示当前规划，灰线表示上一轮规划；红点专门标记滚动交接处。</p>

<style>
  .dash { background:#0d1725; color:#d9e8f5; border-radius:10px; padding:9px; min-height:245px; font-size:9px; }
  .bar { display:flex; justify-content:space-between; align-items:center; background:#15263a; padding:5px 7px; border-radius:6px; margin-bottom:6px; }
  .ok { color:#72e6a6; } .warn { color:#ffcb6b; } .bad { color:#ff7070; }
  .grid2 { display:grid; grid-template-columns:1.45fr 1fr; gap:6px; }
  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
  .panel { background:#132235; border:1px solid #29405a; border-radius:5px; padding:4px; min-height:48px; }
  .panel.big { min-height:132px; }
  .tabs { display:flex; gap:4px; margin:5px 0; }
  .tab { padding:3px 6px; background:#243b55; border-radius:4px; }
  .tab.active { background:#168aad; color:white; }
  .plot { position:relative; height:36px; border-left:1px solid #68839c; border-bottom:1px solid #68839c; margin:5px 3px 1px 9px; overflow:hidden; }
  .plot.tall { height:105px; }
  .line { position:absolute; left:2%; right:2%; height:2px; background:#3bc9db; top:48%; transform:rotate(-7deg); transform-origin:left; box-shadow:32px -7px 0 #3bc9db,64px 1px 0 #3bc9db; }
  .previous { background:#8494a4; top:58%; opacity:.55; }
  .handoff { position:absolute; left:64%; top:39%; width:6px; height:6px; background:#ff7070; border-radius:50%; box-shadow:0 0 0 2px rgba(255,112,112,.25); }
  .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:5px; }
  .metric { background:#1a3047; border-radius:4px; padding:4px; text-align:center; }
  .focus-list { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:6px; }
  .spark { height:18px; background:linear-gradient(165deg,transparent 42%,#3bc9db 44%,#3bc9db 48%,transparent 50%); border-bottom:1px solid #526b81; }
</style>

<div class="cards">
  <div class="card" data-choice="a" onclick="toggleSelect(this)">
    <div class="card-image">
      <div class="dash">
        <div class="bar"><b>A · 总览 + 分析页签</b><span class="ok">● cycle 128 · Rolling</span></div>
        <div class="grid2">
          <div class="panel big"><b>世界路径 / 当前与上一轮</b><div class="plot tall"><div class="line previous"></div><div class="line"></div><div class="handoff"></div></div></div>
          <div>
            <div class="panel"><b>关键状态</b><div class="metrics"><span class="metric">v<br>0.18</span><span class="metric">a<br>0.04</span><span class="metric">j<br>-0.12</span></div></div>
            <div class="panel" style="margin-top:6px"><b>交接检查</b><br><span class="ok">速度连续 ✓</span><br><span class="ok">非零滚动终点 ✓</span><br><span class="ok">jerk 合规 ✓</span></div>
          </div>
        </div>
        <div class="tabs"><span class="tab active">LS / ST</span><span class="tab">曲率</span><span class="tab">v-a-j</span><span class="tab">历史</span></div>
        <div class="grid3"><div class="panel">L-S<div class="spark"></div></div><div class="panel">T-S<div class="spark"></div></div><div class="panel">T-V<div class="spark"></div></div></div>
      </div>
    </div>
    <div class="card-body"><h3>A · 分层混合（推荐）</h3><p>首屏保留路径、状态和异常；曲线按页签切换。信息完整，浏览器与车辆端的内存/重绘压力较平衡。</p></div>
  </div>

  <div class="card" data-choice="b" onclick="toggleSelect(this)">
    <div class="card-image">
      <div class="dash">
        <div class="bar"><b>B · 六图同时显示</b><span class="ok">● LIVE 20 Hz</span></div>
        <div class="grid3">
          <div class="panel">世界路径<div class="plot"><div class="line"></div></div></div><div class="panel">L-S<div class="spark"></div></div><div class="panel">T-S<div class="spark"></div></div>
          <div class="panel">曲率-S<div class="spark"></div></div><div class="panel">速度-T<div class="spark"></div></div><div class="panel">加速度-T<div class="spark"></div></div>
          <div class="panel">加加速度-T<div class="spark"></div></div><div class="panel">规划耗时<div class="spark"></div></div><div class="panel">交接误差<div class="spark"></div></div>
        </div>
        <div class="metrics"><span class="metric">cycle 128</span><span class="metric">OSQP 42 ms</span><span class="metric ok">0 violations</span></div>
      </div>
    </div>
    <div class="card-body"><h3>B · 密集工程屏</h3><p>一次看到所有图，适合大显示器持续监控；小屏可读性较差，浏览器渲染负载最高。</p></div>
  </div>

  <div class="card" data-choice="c" onclick="toggleSelect(this)">
    <div class="card-image">
      <div class="dash">
        <div class="bar"><b>C · 单图聚焦</b><span class="warn">Rolling handoff #128</span></div>
        <div class="tabs"><span class="tab">路径</span><span class="tab">LS</span><span class="tab">ST</span><span class="tab active">Jerk-T</span></div>
        <div class="panel big"><b>加加速度 / 限值带</b><div class="plot tall"><div class="line"></div><div class="handoff"></div></div></div>
        <div class="focus-list"><div class="panel">当前轮<br><span class="ok">max |j| 0.31</span></div><div class="panel">交接点<br><span class="ok">Δa 0.02</span></div><div class="panel">上一轮末端<br>v 0.17</div><div class="panel">下一轮首点<br>v 0.18</div></div>
      </div>
    </div>
    <div class="card-body"><h3>C · 单图诊断</h3><p>一次聚焦一条曲线，最轻量、适合笔记本；跨图对照需要切换，实时总览能力较弱。</p></div>
  </div>
</div>

<p class="subtitle">请点击一个布局。我的建议是 A：默认总览轻量，发生异常时再切到曲率或 v-a-j 细节。</p>