idealjs/stack
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: 站点半嵌卡边——圆点中心落在卡边上，站点层移至卡片之上

Browse Source
This commit is contained in:
cqh963852 committed 2026-10-02 21:15:55 +08:00
1 parent 239891fb17
commit baa23ee55f
2 files changed
+16 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

design-refs/mockup/components.html
+16 -14
View File
@@ -681,16 +681,16 @@
<div class="vlabel"><b>step</b> · 直角步进</div> <div class="vlabel"><b>step</b> · 直角步进</div>
</div> </div>
<div class="linecard"> <div class="linecard">
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 54"/><path class="edge" d="M 54 26 A 6 6 0 0 0 60 20 V 14 A 6 6 0 0 1 66 8 H 220"/><path class="edge" d="M 54 26 A 6 6 0 0 1 60 32 V 38 A 6 6 0 0 0 66 44 H 220"/><circle class="station" cx="28" cy="26" r="2.8"/><circle class="station" cx="212" cy="8" r="2.8"/><circle class="station" cx="212" cy="44" r="2.8"/></svg> <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 54"/><path class="edge" d="M 54 26 A 6 6 0 0 0 60 20 V 14 A 6 6 0 0 1 66 8 H 220"/><path class="edge" d="M 54 26 A 6 6 0 0 1 60 32 V 38 A 6 6 0 0 0 66 44 H 220"/><circle class="station" cx="20" cy="26" r="2.8"/><circle class="station" cx="220" cy="8" r="2.8"/><circle class="station" cx="220" cy="44" r="2.8"/></svg>
<div class="vlabel"><b>fork</b> · 分流岔口</div> <div class="vlabel"><b>fork</b> · 分流岔口</div>
</div> </div>
<div class="linecard"> <div class="linecard">
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 8 H 144 A 6 6 0 0 1 150 14 V 20 A 6 6 0 0 0 156 26 H 220"/><path class="edge" d="M 20 44 H 144 A 6 6 0 0 0 150 38 V 32 A 6 6 0 0 1 156 26 H 220"/><circle class="station" cx="28" cy="8" r="2.8"/><circle class="station" cx="28" cy="44" r="2.8"/><circle class="station" cx="212" cy="26" r="2.8"/></svg> <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 8 H 144 A 6 6 0 0 1 150 14 V 20 A 6 6 0 0 0 156 26 H 220"/><path class="edge" d="M 20 44 H 144 A 6 6 0 0 0 150 38 V 32 A 6 6 0 0 1 156 26 H 220"/><circle class="station" cx="20" cy="8" r="2.8"/><circle class="station" cx="20" cy="44" r="2.8"/><circle class="station" cx="220" cy="26" r="2.8"/></svg>
<div class="vlabel"><b>merge</b> · 汇合并线</div> <div class="vlabel"><b>merge</b> · 汇合并线</div>
</div> </div>
<div class="linecard"> <div class="linecard">
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 220"/><circle class="station" cx="34" cy="26" r="3"/><circle class="station" cx="206" cy="26" r="3"/></svg> <svg width="240" height="52" viewBox="0 0 240 52"><rect x="8" y="12" width="30" height="28" rx="6" fill="#f4f4f2" stroke="#e2e2e0"/><rect x="202" y="12" width="30" height="28" rx="6" fill="#f4f4f2" stroke="#e2e2e0"/><path class="edge" d="M 38 26 H 202"/><circle class="station" cx="38" cy="26" r="3"/><circle class="station" cx="202" cy="26" r="3"/></svg>
<div class="vlabel"><b>station</b> · 站点（贴近卡边锚定）</div> <div class="vlabel"><b>station</b> · 站点（半嵌卡边）</div>
</div> </div>
</div> </div>
</div> </div>
@@ -705,14 +705,6 @@
<path class="edge" d="M 535 84 H 557 A 8 8 0 0 1 565 92 V 157 A 8 8 0 0 0 573 165 H 670"/> <path class="edge" d="M 535 84 H 557 A 8 8 0 0 1 565 92 V 157 A 8 8 0 0 0 573 165 H 670"/>
<path class="edge" d="M 535 246 H 557 A 8 8 0 0 0 565 238 V 173 A 8 8 0 0 1 573 165 H 670"/> <path class="edge" d="M 535 246 H 557 A 8 8 0 0 0 565 238 V 173 A 8 8 0 0 1 573 165 H 670"/>
<path class="edge" d="M 860 165 H 872"/> <path class="edge" d="M 860 165 H 872"/>
<circle class="station" cx="11" cy="165" r="2.8"/>
<circle class="station" cx="218" cy="165" r="2.8"/>
<circle class="station" cx="337" cy="84" r="2.8"/>
<circle class="station" cx="337" cy="246" r="2.8"/>
<circle class="station" cx="543" cy="84" r="2.8"/>
<circle class="station" cx="543" cy="246" r="2.8"/>
<circle class="station" cx="662" cy="165" r="2.8"/>
<circle class="station" cx="866" cy="165" r="2.8"/>
</svg> </svg>
<div class="rcard" style="left:20px; top:92px;"> <div class="rcard" style="left:20px; top:92px;">
<span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span> <span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span>
@@ -732,6 +724,16 @@
<div class="rzone" style="background:#d1fae5;"><span>📦</span><i>16:9 · GIF</i></div> <div class="rzone" style="background:#d1fae5;"><span>📦</span><i>16:9 · GIF</i></div>
<div class="rt"><span class="icotile" style="background:#d1fae5;">📦</span><b>更多</b><span class="st done">✓</span></div> <div class="rt"><span class="icotile" style="background:#d1fae5;">📦</span><b>更多</b><span class="st done">✓</span></div>
</div> </div>
<svg class="gedges" width="880" height="330" viewBox="0 0 880 330">
<circle class="station" cx="20" cy="165" r="2.8"/>
<circle class="station" cx="210" cy="165" r="2.8"/>
<circle class="station" cx="345" cy="84" r="2.8"/>
<circle class="station" cx="345" cy="246" r="2.8"/>
<circle class="station" cx="535" cy="84" r="2.8"/>
<circle class="station" cx="535" cy="246" r="2.8"/>
<circle class="station" cx="670" cy="165" r="2.8"/>
<circle class="station" cx="860" cy="165" r="2.8"/>
</svg>
<div style="position:absolute; right:14px; top:250px; font-size:11px; color:#6b6b6b;">→ 下一程：全栈基础 🔒 · ③ 高级教程</div> <div style="position:absolute; right:14px; top:250px; font-size:11px; color:#6b6b6b;">→ 下一程：全栈基础 🔒 · ③ 高级教程</div>
<div style="position:absolute; right:12px; top:10px; font-size:11px; color:#6b6b6b;">分流 ×1 · 并线 ×2 · 站点 ×8</div> <div style="position:absolute; right:12px; top:10px; font-size:11px; color:#6b6b6b;">分流 ×1 · 并线 ×2 · 站点 ×8</div>
</div> </div>
@@ -743,14 +745,14 @@
<tr><td class="k"><code>path</code></td><td>Segment[]</td><td>直段/转角/步进序列</td></tr> <tr><td class="k"><code>path</code></td><td>Segment[]</td><td>直段/转角/步进序列</td></tr>
<tr><td class="k"><code>forks</code></td><td>Fork[]</td><td>分流岔口（分出车道）</td></tr> <tr><td class="k"><code>forks</code></td><td>Fork[]</td><td>分流岔口（分出车道）</td></tr>
<tr><td class="k"><code>merges</code></td><td>Merge[]</td><td>直角并线点</td></tr> <tr><td class="k"><code>merges</code></td><td>Merge[]</td><td>直角并线点</td></tr>
<tr><td class="k"><code>stations</code></td><td>Node[]</td><td>站点圆点，贴近卡边锚定</td></tr> <tr><td class="k"><code>stations</code></td><td>Node[]</td><td>站点圆点，半嵌卡边</td></tr>
<tr><td class="k"><code>status</code></td><td>无 prop</td><td>不在图上编码</td></tr> <tr><td class="k"><code>status</code></td><td>无 prop</td><td>不在图上编码</td></tr>
</table> </table>
</div> </div>
<div style="position:absolute; top: 420px; left: 948px; width: 292px;" class="panel"> <div style="position:absolute; top: 420px; left: 948px; width: 292px;" class="panel">
<h3 style="margin-bottom:6px;">设计原则</h3> <h3 style="margin-bottom:6px;">设计原则</h3>
<div class="note" style="margin-bottom:4px;"><span class="idx">1</span><span class="txt"><b>线只管顺序</b>：状态交给卡片 ✓ / 🔒。</span></div> <div class="note" style="margin-bottom:4px;"><span class="idx">1</span><span class="txt"><b>线只管顺序</b>：状态交给卡片 ✓ / 🔒。</span></div>
<div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt"><b>背景级线条</b>：鼠尾草绿 <code>#A2B49B</code> · 1.4px · 划隙 4:2；站点 <code>#758C72</code> 贴近卡边锚定，直径 ≈ 4× 线宽。</span></div> <div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt"><b>背景级线条</b>：鼠尾草绿 <code>#A2B49B</code> · 1.4px · 划隙 4:2；站点 <code>#758C72</code> 半嵌卡边（圆点中心落在卡边上），直径 ≈ 4× 线宽。</span></div>
<div class="note" style="margin-bottom:4px;"><span class="idx">3</span><span class="txt"><b>横平竖直</b>：走向只有水平与垂直，转折用小圆角 R8，全图无斜线。</span></div> <div class="note" style="margin-bottom:4px;"><span class="idx">3</span><span class="txt"><b>横平竖直</b>：走向只有水平与垂直，转折用小圆角 R8，全图无斜线。</span></div>
<div class="note" style="margin-bottom:4px;"><span class="idx">4</span><span class="txt"><b>岔口即分支</b>：快速开始分流出 React 线与示例线，在「更多」并线。</span></div> <div class="note" style="margin-bottom:4px;"><span class="idx">4</span><span class="txt"><b>岔口即分支</b>：快速开始分流出 React 线与示例线，在「更多」并线。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">5</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div> <div class="note" style="margin-bottom:0;"><span class="idx">5</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div>
design-refs/mockup/components.pdf
BIN
View File
Binary file not shown.