chore: save current workspace progress
This commit is contained in:
梁薄云
@@ -0,0 +1,10 @@
|
||||
<style>
|
||||
.layouts{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:16px;margin-top:18px}.choice{border:1px solid #d6dde7;border-radius:12px;padding:14px;background:#fff;cursor:pointer}.choice:hover{border-color:#1769aa;box-shadow:0 8px 24px rgba(30,80,130,.12)}.choice.selected{outline:3px solid rgba(23,105,170,.22)}.tag{display:inline-block;background:#e8f2fb;color:#1769aa;border-radius:99px;padding:2px 8px;font-size:11px}.screen{height:330px;margin-top:12px;padding:6px;display:grid;gap:5px;border:1px solid #aeb8c5;background:#f7f9fb;font:10px sans-serif}.bar,.tabs,.status{background:#fff;border:1px solid #d7dee7;padding:6px}.map,.chart{position:relative;border:1px solid #d7dee7;background:linear-gradient(#e9eef3 1px,transparent 1px),linear-gradient(90deg,#e9eef3 1px,transparent 1px),#fff;background-size:20px 20px;overflow:hidden}.map:after{content:'当前完整轨迹';position:absolute;left:12%;right:9%;top:54%;height:4px;color:#1769aa;background:#1769aa;transform:rotate(-7deg)}.chart:after{content:'';position:absolute;left:10%;right:8%;top:58%;height:3px;background:#1769aa;transform:skewY(-9deg)}.tools{position:absolute;right:5px;top:5px;z-index:2;background:#fff;border:1px solid #b9c3ce;padding:3px}.a{grid-template-columns:2fr 1fr;grid-template-rows:30px 1fr 110px 26px}.a .bar,.a .chart,.a .tabs{grid-column:1/3}.b{grid-template-columns:3fr 2fr;grid-template-rows:30px 1fr 26px}.b .bar,.b .tabs{grid-column:1/3}.right{display:grid;grid-template-rows:1fr 1fr;gap:5px}.c{grid-template-columns:repeat(3,1fr);grid-template-rows:30px 130px 1fr 26px}.c .bar,.c .map,.c .tabs{grid-column:1/4}.chip{margin:4px 0;padding:4px;background:#f1f5f9;border-left:3px solid #1769aa}@media(max-width:1000px){.layouts{grid-template-columns:1fr}}
|
||||
</style>
|
||||
<h2>网页主界面布局选择</h2>
|
||||
<p class="subtitle">三种方案都包含独立页签、X/Y 数值刻度与单位、图例、图层显隐、框选/滚轮缩放、复位及单图全屏。</p>
|
||||
<div class="layouts">
|
||||
<div class="choice" data-choice="a-map-first" onclick="toggleSelect(this)"><h3>A · 地图优先</h3><p>大地图、右侧状态、底部单张分析图。</p><div class="screen a"><div class="bar"><b>完整方向段 · OBSERVE_ONLY</b><span>图层 复位</span></div><div class="map"><span class="tools">＋ − ⛶</span></div><div class="status"><div class="chip">终点 3 cm / 5°</div><div class="chip">v=0 · a=0</div><div class="chip">制动点 S=6.4m</div></div><div class="chart"><span class="tools">框选 复位 ⛶</span>完整 ST</div><div class="tabs">路径 LS/ST 运动学 诊断</div></div></div>
|
||||
<div class="choice" data-choice="b-balanced" onclick="toggleSelect(this)"><span class="tag">推荐</span><h3>B · 地图与分析并列</h3><p>左侧完整路径，右侧同时看选中图表和终点状态。</p><div class="screen b"><div class="bar"><b>段 0 · Forward · 完整规划成功</b><span>图层 导出</span></div><div class="map"><span class="tools">＋ − ⛶</span></div><div class="right"><div class="chart"><span class="tools">框选 ⛶</span>完整 ST：起步—巡航—停车</div><div class="status"><div class="chip">目标速度 1.0m/s</div><div class="chip">终点误差合格</div><div class="chip">无零进度异常</div></div></div><div class="tabs">路径 LS/ST 曲率 速度/加速度/jerk 诊断</div></div></div>
|
||||
<div class="choice" data-choice="c-chart-wall" onclick="toggleSelect(this)"><h3>C · 多图分析墙</h3><p>地图在上，LS、ST、速度三图始终并排。</p><div class="screen c"><div class="bar"><b>完整方向段分析</b><span>同步缩放 复位全部</span></div><div class="map"><span class="tools">＋ − ⛶</span></div><div class="chart">LS</div><div class="chart">ST</div><div class="chart">速度</div><div class="tabs">基础图组 运动学 终点验证 配置</div></div></div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<style>
|
||||
.paper{background:#fff;color:#20252b;border:1px solid #c8cdd2;padding:12px;font-family:Arial,"Microsoft YaHei",sans-serif}.head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:.6px solid #50565c;padding-bottom:6px}.title{font:600 15px "Times New Roman","SimSun",serif}.meta{font-size:9px;color:#626b74}.live{color:#237a57}.topgrid{display:grid;grid-template-columns:1.65fr .75fr;gap:9px;margin-top:9px}.panel{border:.6px solid #b8bec5;padding:6px;background:#fff}.ptitle{display:flex;justify-content:space-between;font:600 10px "Times New Roman","SimSun",serif}.tools{font:8px Arial;color:#59636d;word-spacing:6px}.plot{width:100%;height:160px;display:block}.side{display:grid;gap:7px}.table{width:100%;border-collapse:collapse;font-size:9px}.table td{padding:4px 2px;border-bottom:.5px solid #e1e5e8}.table td:last-child{text-align:right;font-family:Consolas,monospace}.pass{color:#237a57}.warn{color:#b86514}.tabs{display:flex;border-bottom:.6px solid #777e86;margin-top:9px}.tab{padding:5px 10px 4px;font-size:9px;color:#545d66}.tab.active{color:#174c80;border:.6px solid #777e86;border-bottom:.6px solid #fff;margin-bottom:-.6px}.charts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:8px}.chart{border:.6px solid #c8cdd2;padding:5px}.chart svg{width:100%;height:92px;display:block}.caption{margin-top:7px;color:#616a73;font-size:8px}.grid{stroke:#d9dde1;stroke-width:.35}.axis{stroke:#343a40;stroke-width:.55}.tick{fill:#555d65;font:5px Arial}.reference{fill:none;stroke:#4f555b;stroke-width:.5}.coarse{fill:none;stroke:#8d959d;stroke-width:.45;stroke-dasharray:3 2;opacity:.55}.current{fill:none;stroke:#1769aa;stroke-width:.7}.previous{fill:none;stroke:#8d959d;stroke-width:.55;stroke-dasharray:3 2}.limit{fill:none;stroke:#b42318;stroke-width:.45;stroke-dasharray:2 2}.marker{fill:#d87918;stroke:#fff;stroke-width:.4}.brake{stroke:#d87918;stroke-width:.45;stroke-dasharray:2 2}.approve{margin-top:14px}
|
||||
</style>
|
||||
<h2>论文风格 · 细线版</h2>
|
||||
<p class="subtitle">恢复之前的科研绘图语言，并进一步减小所有线宽。蓝色只表示完整规划轨迹，红色只表示真实越界。</p>
|
||||
<div class="mockup"><div class="mockup-header">Preview: Full-direction-segment trajectory observation</div><div class="mockup-body">
|
||||
<div class="paper">
|
||||
<div class="head"><div><div class="title">EM Full-Direction-Segment Trajectory Observation</div><div class="meta">OBSERVE_ONLY · segment 0 / Forward · units: m, s, rad</div></div><div class="meta"><span class="live">● VALID</span> FullDirectionSegment solve 186 ms</div></div>
|
||||
<div class="topgrid">
|
||||
<div class="panel"><div class="ptitle"><span>(a) World path and complete planned trajectory</span><span class="tools">Layers Box zoom Reset Full screen</span></div>
|
||||
<svg class="plot" viewBox="0 0 520 160" preserveAspectRatio="none"><g><path class="grid" d="M42 14V139M115 14V139M188 14V139M261 14V139M334 14V139M407 14V139M480 14V139M42 35H505M42 61H505M42 87H505M42 113H505"/></g><path class="axis" d="M42 14V139H505"/><path class="coarse" d="M48 123C115 116 154 91 209 86S322 82 384 49S465 26 498 22"/><path class="reference" d="M48 121C115 114 154 89 209 84S322 80 384 47S465 24 498 20"/><path class="current" d="M48 122C115 115 154 90 209 85S322 81 384 48S465 25 498 21"/><line class="brake" x1="396" y1="17" x2="396" y2="139"/><circle class="marker" cx="396" cy="43" r="2.4"/><text class="tick" x="260" y="153">World X (m)</text><text class="tick" transform="rotate(-90 9 80)" x="9" y="80">World Y (m)</text><text class="tick" x="399" y="37">brake start</text></svg>
|
||||
</div>
|
||||
<div class="side"><div class="panel"><div class="ptitle">Terminal boundary</div><table class="table"><tr><td>Δ position</td><td class="pass">0.012 m</td></tr><tr><td>Δ yaw</td><td class="pass">1.8°</td></tr><tr><td>v terminal</td><td class="pass">0.000 m/s</td></tr><tr><td>a terminal</td><td class="pass">0.000 m/s²</td></tr><tr><td>yaw rate</td><td class="pass">0.000 rad/s</td></tr></table></div><div class="panel"><div class="ptitle">Profile summary</div><table class="table"><tr><td>segment length</td><td>8.42 m</td></tr><tr><td>planned duration</td><td>12.80 s</td></tr><tr><td>cruise target</td><td>1.00 m/s</td></tr><tr><td>brake start</td><td>6.31 m</td></tr><tr><td>zero progress</td><td class="pass">NO</td></tr></table></div></div>
|
||||
</div>
|
||||
<div class="tabs"><span class="tab active">LS / ST</span><span class="tab">Curvature</span><span class="tab">Velocity / Acceleration / Jerk</span><span class="tab">Terminal validation</span><span class="tab">Configuration</span></div>
|
||||
<div class="charts">
|
||||
<div class="chart"><div class="ptitle"><span>(b) Lateral offset</span><span class="tools">Zoom Reset ⛶</span></div><svg viewBox="0 0 160 92" preserveAspectRatio="none"><path class="grid" d="M23 12V75M65 12V75M107 12V75M149 12V75M23 28H154M23 51H154"/><path class="axis" d="M23 10V75H155"/><path class="current" d="M23 48C48 41 65 44 83 48S123 52 154 46"/><text class="tick" x="75" y="88">ReferenceS (m)</text><text class="tick" x="2" y="10">l (m)</text></svg></div>
|
||||
<div class="chart"><div class="ptitle"><span>(c) Complete ST</span><span class="tools">Zoom Reset ⛶</span></div><svg viewBox="0 0 160 92" preserveAspectRatio="none"><path class="grid" d="M23 12V75M65 12V75M107 12V75M149 12V75M23 28H154M23 51H154"/><path class="axis" d="M23 10V75H155"/><path class="current" d="M23 74C40 72 52 66 66 56L108 25C122 15 135 11 154 11"/><text class="tick" x="82" y="88">t (s)</text><text class="tick" x="2" y="10">PathS (m)</text></svg></div>
|
||||
<div class="chart"><div class="ptitle"><span>(d) Signed velocity</span><span class="tools">Zoom Reset ⛶</span></div><svg viewBox="0 0 160 92" preserveAspectRatio="none"><path class="grid" d="M23 12V75M65 12V75M107 12V75M149 12V75M23 28H154M23 51H154"/><path class="axis" d="M23 10V75H155"/><path class="limit" d="M23 14H155"/><path class="current" d="M23 74C33 58 43 28 62 20H105C121 21 134 51 154 74"/><text class="tick" x="82" y="88">t (s)</text><text class="tick" x="2" y="10">v (m/s)</text></svg></div>
|
||||
</div>
|
||||
<div class="caption">Thin scientific rendering · current trajectory 0.70 px · reference 0.50 px · grid 0.35 px · all axes include numeric ticks and units · per-plot zoom does not alter source data</div>
|
||||
</div></div></div>
|
||||
<div class="options approve"><div class="option" data-choice="approve-paper-thin" onclick="toggleSelect(this)"><div class="letter">✓</div><div class="content"><h3>采用论文风格细线版</h3><p>后续页面沿用这套排版、线宽、颜色和交互密度。</p></div></div></div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<div style="max-width:760px;text-align:center">
|
||||
<h2>保留原页面与论文风格</h2>
|
||||
<p class="subtitle">当前设计已收紧为：修复空白、页签、数据、刻度和图层缺陷；补充 s_end、换向点、车辆位置与路径对比，不重做布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user