chore: save current workspace progress

This commit is contained in:
梁薄云
2026-08-09 22:13:18 +08:00
parent 650c2ab0e3
commit 2f4fd15e52
449 changed files with 76593 additions and 971 deletions
@@ -0,0 +1,73 @@
<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>
@@ -0,0 +1,70 @@
<h2>科研绘图风 · A 布局精修</h2>
<p class="subtitle">以论文图表为基准:细线、白底、单位完整、图例克制;红色只表示真正越界。</p>
<style>
.scientific { background:#fff; color:#20252b; border:1px solid #cfd4da; border-radius:3px; padding:12px; font-family:Arial,"Microsoft YaHei",sans-serif; }
.s-head { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid #60666d; padding-bottom:6px; margin-bottom:10px; }
.s-title { font-family:"Times New Roman","SimSun",serif; font-size:15px; font-weight:600; }
.s-meta { color:#59636e; font-size:9px; }
.s-grid { display:grid; grid-template-columns:1.55fr .85fr; gap:10px; }
.s-panel { border:1px solid #b8bec5; padding:7px; background:#fff; }
.s-panel-title { font-family:"Times New Roman","SimSun",serif; font-size:10px; font-weight:600; display:flex; justify-content:space-between; }
.s-plot { width:100%; height:132px; display:block; margin-top:3px; }
.s-side { display:flex; flex-direction:column; gap:8px; }
.s-table { width:100%; border-collapse:collapse; font-size:9px; }
.s-table td { padding:4px 3px; border-bottom:1px solid #e2e5e8; }
.s-table td:last-child { text-align:right; font-family:Consolas,monospace; }
.pass { color:#237a57; }.note { color:#b86514; }.fail { color:#b42318; }
.s-tabs { display:flex; gap:0; margin-top:10px; border-bottom:1px solid #777e86; }
.s-tab { padding:5px 11px 4px; border:1px solid transparent; font-size:9px; color:#545d66; }
.s-tab.active { color:#174c80; border:1px solid #777e86; border-bottom:1px solid white; margin-bottom:-1px; background:#fff; }
.s-multipanel { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding-top:9px; }
.s-small { border:1px solid #c8cdd2; padding:5px; }
.s-small svg { width:100%; height:72px; display:block; }
.caption { color:#56606a; font-size:9px; margin-top:8px; line-height:1.45; }
.limit { stroke:#b42318; stroke-width:.7; stroke-dasharray:3 3; fill:none; }
.gridline { stroke:#d9dde1; stroke-width:.55; }.axis { stroke:#343a40; stroke-width:.8; }.tick { fill:#555d65; font:5px Arial; }
.current { stroke:#1769aa; stroke-width:1.15; fill:none; }.previous { stroke:#8d959d; stroke-width:.8; stroke-dasharray:4 2; fill:none; }
.reference { stroke:#333; stroke-width:.75; fill:none; }.handoff { fill:#d87918; stroke:#fff; stroke-width:.7; }
</style>
<div class="mockup">
<div class="mockup-header">Preview: Scientific trajectory dashboard</div>
<div class="mockup-body">
<div class="scientific">
<div class="s-head">
<div><div class="s-title">EM Trajectory Planning Observation</div><div class="s-meta">OBSERVE_ONLY · local session · coordinate units: m / s / rad</div></div>
<div class="s-meta"><span class="pass">● LIVE</span> &nbsp; Cycle 128 &nbsp; RollingContinuation &nbsp; 42 ms</div>
</div>
<div class="s-grid">
<div class="s-panel">
<div class="s-panel-title"><span>(a) World path and rolling handoff</span><span style="font:8px Arial"><span style="color:#1769aa">━ current</span> &nbsp; <span style="color:#8d959d">┄ previous</span> &nbsp; <span style="color:#d87918">● handoff</span></span></div>
<svg class="s-plot" viewBox="0 0 360 132" preserveAspectRatio="none">
<g><line class="gridline" x1="38" y1="12" x2="38" y2="112"/><line class="gridline" x1="101" y1="12" x2="101" y2="112"/><line class="gridline" x1="164" y1="12" x2="164" y2="112"/><line class="gridline" x1="227" y1="12" x2="227" y2="112"/><line class="gridline" x1="290" y1="12" x2="290" y2="112"/><line class="gridline" x1="38" y1="32" x2="344" y2="32"/><line class="gridline" x1="38" y1="58" x2="344" y2="58"/><line class="gridline" x1="38" y1="84" x2="344" y2="84"/></g>
<line class="axis" x1="38" y1="112" x2="344" y2="112"/><line class="axis" x1="38" y1="12" x2="38" y2="112"/>
<path class="reference" d="M42,92 C92,88 116,70 151,67 S226,66 268,41 S322,25 341,22"/>
<path class="previous" d="M43,95 C91,90 116,73 152,69 S226,68 270,44 S323,29 339,27"/>
<path class="current" d="M43,93 C92,89 116,71 152,68 S226,67 269,42 S323,26 341,23"/>
<circle class="handoff" cx="269" cy="42" r="3.2"/>
<text class="tick" x="174" y="128">World X (m)</text><text class="tick" transform="rotate(-90 8 69)" x="8" y="69">World Y (m)</text>
</svg>
</div>
<div class="s-side">
<div class="s-panel"><div class="s-panel-title">Current sample</div><table class="s-table"><tr><td>t</td><td>0.35 s</td></tr><tr><td>v</td><td>0.182 m/s</td></tr><tr><td>a</td><td>0.041 m/s²</td></tr><tr><td>j</td><td>0.118 m/s³</td></tr><tr><td>κ</td><td>0.224 m⁻¹</td></tr></table></div>
<div class="s-panel"><div class="s-panel-title">Rolling continuity</div><table class="s-table"><tr><td>terminal speed ≠ 0</td><td class="pass">PASS</td></tr><tr><td>|Δv| ≤ tol</td><td class="pass">0.003</td></tr><tr><td>|Δa| ≤ tol</td><td class="pass">0.018</td></tr><tr><td>|j| ≤ limit</td><td class="pass">PASS</td></tr><tr><td>trajectory age</td><td class="note">61 ms</td></tr></table></div>
</div>
</div>
<div class="s-tabs"><span class="s-tab active">LS / ST</span><span class="s-tab">Curvature</span><span class="s-tab">Velocity / Acceleration / Jerk</span><span class="s-tab">Cycle history</span></div>
<div class="s-multipanel">
<div class="s-small"><div class="s-panel-title">(b) Lateral offset</div><svg viewBox="0 0 120 72" preserveAspectRatio="none"><line class="axis" x1="18" y1="60" x2="115" y2="60"/><line class="axis" x1="18" y1="8" x2="18" y2="60"/><line class="gridline" x1="18" y1="34" x2="115" y2="34"/><path class="current" d="M18,34 C38,25 51,30 65,35 S92,39 115,33"/><text class="tick" x="52" y="70">s (m)</text><text class="tick" x="1" y="9">l (m)</text></svg></div>
<div class="s-small"><div class="s-panel-title">(c) Longitudinal progress</div><svg viewBox="0 0 120 72" preserveAspectRatio="none"><line class="axis" x1="18" y1="60" x2="115" y2="60"/><line class="axis" x1="18" y1="8" x2="18" y2="60"/><path class="previous" d="M18,58 L42,52 L66,41 L90,27 L115,13"/><path class="current" d="M18,58 L42,51 L66,39 L90,25 L115,11"/><circle class="handoff" cx="90" cy="25" r="2.5"/><text class="tick" x="52" y="70">t (s)</text><text class="tick" x="2" y="9">s (m)</text></svg></div>
<div class="s-small"><div class="s-panel-title">(d) Signed velocity</div><svg viewBox="0 0 120 72" preserveAspectRatio="none"><line class="axis" x1="18" y1="60" x2="115" y2="60"/><line class="axis" x1="18" y1="8" x2="18" y2="60"/><line class="limit" x1="18" y1="14" x2="115" y2="14"/><path class="previous" d="M18,51 C36,43 48,30 67,26 S96,27 115,24"/><path class="current" d="M18,49 C36,41 48,29 67,25 S96,26 115,23"/><circle class="handoff" cx="67" cy="25" r="2.5"/><text class="tick" x="52" y="70">t (s)</text><text class="tick" x="1" y="9">v (m/s)</text></svg></div>
</div>
<div class="caption">Refresh: 10 Hz · latest-snapshot transport · history: 60 cycles (bounded) · browser clients: 1 · no planner backpressure</div>
</div>
</div>
</div>
<div class="options">
<div class="option" data-choice="approve-scientific" onclick="toggleSelect(this)"><div class="letter"></div><div class="content"><h3>采用这个科研风格</h3><p>后续页面都沿用细线、白底、论文式多子图与单位标注。</p></div></div>
</div>
@@ -0,0 +1,74 @@
<h2>A 布局:选择视觉风格</h2>
<p class="subtitle">图表颜色始终语义一致:当前轨迹为蓝色、上一轮为灰色、交接点为橙色、越界才使用红色。</p>
<style>
.preview { border-radius:10px; padding:10px; min-height:245px; font-size:9px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; border-radius:6px; margin-bottom:7px; }
.layout { display:grid; grid-template-columns:1.45fr 1fr; gap:7px; }
.box { border-radius:6px; padding:6px; }
.big { min-height:125px; }
.chart { height:100px; margin:7px 3px 0 12px; border-left:1px solid; border-bottom:1px solid; position:relative; overflow:hidden; }
.path-old,.path-new { position:absolute; height:3px; left:4%; width:82%; top:57%; transform:rotate(-7deg); transform-origin:left; border-radius:2px; }
.path-new { top:49%; }
.dot { position:absolute; left:65%; top:38%; width:8px; height:8px; border-radius:50%; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:5px 0 7px; }
.stat { border-radius:4px; padding:5px 2px; text-align:center; }
.checks { line-height:1.8; }
.tabs { display:flex; gap:5px; margin-top:7px; }
.pill { border-radius:10px; padding:4px 8px; }
.mini { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:6px; }
.mini > div { border-radius:5px; padding:5px; height:33px; }
.light { background:#f7f9fc; color:#27364a; border:1px solid #dce3ec; }
.light .top { background:#ffffff; border:1px solid #e1e7ee; }
.light .box,.light .mini>div { background:#fff; border:1px solid #dfe5ec; }
.light .chart { border-color:#9baabd; background:linear-gradient(#f2f5f8 1px,transparent 1px),linear-gradient(90deg,#f2f5f8 1px,transparent 1px); background-size:22px 22px; }
.light .path-old { background:#a6b0bc; }.light .path-new { background:#1668dc; }.light .dot { background:#f08c2e; }
.light .stat { background:#eef3f8; }.light .pill { background:#e8edf3; }.light .pill.on { background:#1668dc;color:#fff; }
.ink { background:#fbfaf6; color:#272521; border:1px solid #d5d0c5; }
.ink .top { background:#efede6; border-bottom:2px solid #34312d; }
.ink .box,.ink .mini>div { background:#fffef9; border:1px solid #cfc9bd; }
.ink .chart { border-color:#4d4a45; background:linear-gradient(#ece8df 1px,transparent 1px),linear-gradient(90deg,#ece8df 1px,transparent 1px); background-size:22px 22px; }
.ink .path-old { background:#9c978d; }.ink .path-new { background:#126782; }.ink .dot { background:#d97706; }
.ink .stat { background:#f0ede6; }.ink .pill { background:#e8e4dc; }.ink .pill.on { background:#126782;color:#fff; }
.night { background:#101419; color:#d8dee8; border:1px solid #303944; }
.night .top { background:#191f27; border-bottom:1px solid #3b4653; }
.night .box,.night .mini>div { background:#171c23; border:1px solid #343e49; }
.night .chart { border-color:#657382; background:linear-gradient(#222a33 1px,transparent 1px),linear-gradient(90deg,#222a33 1px,transparent 1px); background-size:22px 22px; }
.night .path-old { background:#6e7883; }.night .path-new { background:#58a6ff; }.night .dot { background:#f2a65a; }
.night .stat { background:#222a33; }.night .pill { background:#252e38; }.night .pill.on { background:#2f81f7;color:#fff; }
.good { color:#16815d; }.night .good { color:#56d49b; }
</style>
<div class="cards">
<div class="card" data-choice="light" onclick="toggleSelect(this)">
<div class="card-image"><div class="preview light">
<div class="top"><b>轨迹规划观测台</b><span class="good">● 实时 · Cycle 128</span></div>
<div class="layout"><div class="box big"><b>世界路径</b><div class="chart"><div class="path-old"></div><div class="path-new"></div><div class="dot"></div></div></div>
<div><div class="box"><b>当前状态</b><div class="stats"><div class="stat">v<br>0.18</div><div class="stat">a<br>0.04</div><div class="stat">j<br>-0.12</div></div></div><div class="box checks" style="margin-top:7px"><b>交接检查</b><br><span class="good">✓ 非零滚动终点</span><br><span class="good">✓ 速度/加速度连续</span><br><span class="good">✓ Jerk 合规</span></div></div></div>
<div class="tabs"><span class="pill on">LS / ST</span><span class="pill">曲率</span><span class="pill">v-a-j</span><span class="pill">历史</span></div><div class="mini"><div>L-S</div><div>T-S</div><div>T-V</div></div>
</div></div><div class="card-body"><h3>1 · 清晰实验室(推荐)</h3><p>浅色、低饱和、高可读性,适合长时间观察、截图和报告。</p></div>
</div>
<div class="card" data-choice="paper" onclick="toggleSelect(this)">
<div class="card-image"><div class="preview ink">
<div class="top"><b>TRAJECTORY OBSERVATION</b><span class="good">LIVE / 128</span></div>
<div class="layout"><div class="box big"><b>WORLD PATH</b><div class="chart"><div class="path-old"></div><div class="path-new"></div><div class="dot"></div></div></div>
<div><div class="box"><b>STATE</b><div class="stats"><div class="stat">v<br>0.18</div><div class="stat">a<br>0.04</div><div class="stat">j<br>-0.12</div></div></div><div class="box checks" style="margin-top:7px"><b>HANDOFF</b><br><span class="good">PASS / rolling</span><br><span class="good">PASS / continuity</span><br><span class="good">PASS / jerk</span></div></div></div>
<div class="tabs"><span class="pill on">LS / ST</span><span class="pill">CURVATURE</span><span class="pill">V-A-J</span><span class="pill">HISTORY</span></div><div class="mini"><div>L-S</div><div>T-S</div><div>T-V</div></div>
</div></div><div class="card-body"><h3>2 · 工程图纸</h3><p>米白与墨色,接近论文/仪器输出,克制但稍显传统。</p></div>
</div>
<div class="card" data-choice="night" onclick="toggleSelect(this)">
<div class="card-image"><div class="preview night">
<div class="top"><b>轨迹规划观测台</b><span class="good">● 实时 · Cycle 128</span></div>
<div class="layout"><div class="box big"><b>世界路径</b><div class="chart"><div class="path-old"></div><div class="path-new"></div><div class="dot"></div></div></div>
<div><div class="box"><b>当前状态</b><div class="stats"><div class="stat">v<br>0.18</div><div class="stat">a<br>0.04</div><div class="stat">j<br>-0.12</div></div></div><div class="box checks" style="margin-top:7px"><b>交接检查</b><br><span class="good">✓ 非零滚动终点</span><br><span class="good">✓ 速度/加速度连续</span><br><span class="good">✓ Jerk 合规</span></div></div></div>
<div class="tabs"><span class="pill on">LS / ST</span><span class="pill">曲率</span><span class="pill">v-a-j</span><span class="pill">历史</span></div><div class="mini"><div>L-S</div><div>T-S</div><div>T-V</div></div>
</div></div><div class="card-body"><h3>3 · 石墨夜间</h3><p>中性深灰、低炫光;比上一版更克制,适合暗光车间。</p></div>
</div>
</div>
<p class="subtitle">请点击一种风格;也可以回复“以 1 为基础,但……”。</p>
@@ -0,0 +1,6 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh;text-align:center">
<div>
<h2>科研风格已确认</h2>
<p class="subtitle">界面说明使用中文;坐标轴、单位和数学符号保留英文规范。继续在终端讨论数据服务架构。</p>
</div>
</div>
@@ -0,0 +1 @@
{"reason":"stop-server.sh","timestamp":1785940779}