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 19:55:22 +08:00
1 parent ce6f6b05dd
commit 663f39c583
2 files changed
+20 -19
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

design-refs/mockup/components.html
+20 -19
View File
@@ -194,8 +194,8 @@
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
} }
.gedges { position: absolute; inset: 0; pointer-events: none; } .gedges { position: absolute; inset: 0; pointer-events: none; }
.edge { fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: 9 4; stroke: #6366f1; } .edge { fill: none; stroke-width: 1.2; stroke-linecap: butt; stroke-dasharray: 6 3; stroke: #a3b5af; }
.station { fill: #6366f1; } .station { fill: #78928a; }
.glegend { display: flex; gap: 22px; font-size: 12px; color: #555; align-items: center; } .glegend { display: flex; gap: 22px; font-size: 12px; color: #555; align-items: center; }
.glegend .sw { display: inline-block; width: 30px; border-top: 1.5px dashed #9a9a98; margin-right: 6px; vertical-align: middle; } .glegend .sw { display: inline-block; width: 30px; border-top: 1.5px dashed #9a9a98; margin-right: 6px; vertical-align: middle; }
.glegend .sw.rel { border-top-color: #c9c9c7; } .glegend .sw.rel { border-top-color: #c9c9c7; }
@@ -663,13 +663,13 @@
<path class="edge" d="M 392 212 C 417 212, 407 144, 432 144"/> <path class="edge" d="M 392 212 C 417 212, 407 144, 432 144"/>
<path class="edge" d="M 592 132 H 632"/> <path class="edge" d="M 592 132 H 632"/>
<path class="edge" d="M 712 154 V 232"/> <path class="edge" d="M 712 154 V 232"/>
<circle class="station" cx="12" cy="132" r="5"/> <circle class="station" cx="12" cy="132" r="2.8"/>
<circle class="station" cx="207" cy="132" r="5"/> <circle class="station" cx="207" cy="132" r="2.8"/>
<circle class="station" cx="224" cy="52" r="4.5"/> <circle class="station" cx="224" cy="52" r="2.8"/>
<circle class="station" cx="224" cy="212" r="4.5"/> <circle class="station" cx="224" cy="212" r="2.8"/>
<circle class="station" cx="420" cy="132" r="5"/> <circle class="station" cx="420" cy="132" r="2.8"/>
<circle class="station" cx="624" cy="132" r="4.5"/> <circle class="station" cx="624" cy="132" r="2.8"/>
<circle class="station" cx="712" cy="224" r="4.5"/> <circle class="station" cx="712" cy="224" r="2.8"/>
</svg> </svg>
<div class="rnode" style="left:22px; top:110px;"><span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span><span class="icotile" style="background:#e0e7ff;">🌐</span><span class="t">快速开始</span><span class="st done">✓</span></div> <div class="rnode" style="left:22px; top:110px;"><span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span><span class="icotile" style="background:#e0e7ff;">🌐</span><span class="t">快速开始</span><span class="st done">✓</span></div>
<div class="rnode" style="left:232px; top:30px;"><span class="entry-badge" style="width:20px;height:20px;font-size:11px;">②</span><span class="icotile" style="background:#fce7f3;">⚛️</span><span class="t">React</span><span class="st done">✓</span></div> <div class="rnode" style="left:232px; top:30px;"><span class="entry-badge" style="width:20px;height:20px;font-size:11px;">②</span><span class="icotile" style="background:#fce7f3;">⚛️</span><span class="t">React</span><span class="st done">✓</span></div>
@@ -681,31 +681,31 @@
</div> </div>
<!-- 构件：线条组件六原语 --> <!-- 构件：线条组件六原语 -->
<div class="canvas" style="top: 462px; left: 40px; width: 880px; height: 258px;"> <div class="canvas" style="top: 462px; left: 40px; width: 880px; height: 272px;">
<div style="font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:10px;">&lt;RouteLine /&gt; 线条组件 · 六原语</div> <div style="font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:10px;">&lt;RouteLine /&gt; 线条组件 · 六原语</div>
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;"> <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;">
<div class="linecard"> <div class="linecard">
<svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 220"/><circle class="station" cx="20" cy="28" r="4.5"/><circle class="station" cx="220" cy="28" r="4.5"/></svg> <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 220"/><circle class="station" cx="20" cy="28" r="2.8"/><circle class="station" cx="220" cy="28" r="2.8"/></svg>
<div class="vlabel"><b>segment</b> · 直段</div> <div class="vlabel"><b>segment</b> · 直段</div>
</div> </div>
<div class="linecard"> <div class="linecard">
<svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 44 H 105 Q 125 44 125 24 V 10"/><circle class="station" cx="20" cy="44" r="4.5"/></svg> <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 44 H 105 Q 125 44 125 24 V 10"/><circle class="station" cx="20" cy="44" r="2.8"/></svg>
<div class="vlabel"><b>elbow</b> · 圆角转角</div> <div class="vlabel"><b>elbow</b> · 圆角转角</div>
</div> </div>
<div class="linecard"> <div class="linecard">
<svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 15 42 C 60 4, 180 58, 225 16"/><circle class="station" cx="15" cy="42" r="4.5"/><circle class="station" cx="225" cy="16" r="4.5"/></svg> <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 15 42 C 60 4, 180 58, 225 16"/><circle class="station" cx="15" cy="42" r="2.8"/><circle class="station" cx="225" cy="16" r="2.8"/></svg>
<div class="vlabel"><b>curve</b> · 曲线</div> <div class="vlabel"><b>curve</b> · 曲线</div>
</div> </div>
<div class="linecard"> <div class="linecard">
<svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 80 C 100 28, 100 10, 118 10 H 200"/><path class="edge" d="M 80 28 C 100 28, 100 46, 118 46 H 200"/><circle class="station" cx="80" cy="28" r="4.5"/></svg> <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 80 C 100 28, 100 10, 118 10 H 200"/><path class="edge" d="M 80 28 C 100 28, 100 46, 118 46 H 200"/><circle class="station" cx="80" cy="28" 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="56" viewBox="0 0 240 56"><path class="edge" d="M 20 10 H 95 C 113 10, 113 28, 130 28 H 220"/><path class="edge" d="M 20 46 H 95 C 113 46, 113 28, 130 28"/><circle class="station" cx="130" cy="28" r="4.5"/></svg> <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 10 H 95 C 113 10, 113 28, 130 28 H 220"/><path class="edge" d="M 20 46 H 95 C 113 46, 113 28, 130 28"/><circle class="station" cx="130" cy="28" 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="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 220"/><circle class="station" cx="90" cy="28" r="6"/><circle class="station" cx="170" cy="28" r="6"/></svg> <svg width="240" height="56" viewBox="0 0 240 56"><path class="edge" d="M 20 28 H 220"/><circle class="station" cx="90" cy="28" r="2.8"/><circle class="station" cx="170" cy="28" r="2.8"/></svg>
<div class="vlabel"><b>station</b> · 站点（悬浮于卡间槽内）</div> <div class="vlabel"><b>station</b> · 站点（悬浮于卡间槽内）</div>
</div> </div>
</div> </div>
@@ -725,9 +725,10 @@
<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>：快速开始分流出 React 线与示例线，在「更多」并线。</span></div> <div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt"><b>背景级线条</b>：灰绿 <code>#A3B5AF</code> · 1.2px · 划隙 6:3；站点 <code>#78928A</code> 深一档，直径 ≈ 4× 线宽。</span></div>
<div class="note" style="margin-bottom:4px;"><span class="idx">3</span><span class="txt"><b>线条是构件</b>：六原语可拼任意路线。</span></div> <div class="note" style="margin-bottom:4px;"><span class="idx">3</span><span class="txt"><b>岔口即分支</b>：快速开始分流出 React 线与示例线，在「更多」并线。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">4</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div> <div class="note" style="margin-bottom:4px;"><span class="idx">4</span><span class="txt"><b>线条是构件</b>：六原语可拼任意路线。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">5</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div>
</div> </div>
<div class="footline">组件设计稿 · Storybook 拆分 · stack idealjs</div> <div class="footline">组件设计稿 · Storybook 拆分 · stack idealjs</div>
design-refs/mockup/components.pdf
BIN
View File
Binary file not shown.