diff --git a/design-refs/mockup/components.html b/design-refs/mockup/components.html index 4c646f8..56a63a4 100644 --- a/design-refs/mockup/components.html +++ b/design-refs/mockup/components.html @@ -194,8 +194,8 @@ display: flex; align-items: center; justify-content: center; } .gedges { position: absolute; inset: 0; pointer-events: none; } - .edge { fill: none; stroke-width: 1.2; stroke-linecap: butt; stroke-dasharray: 6 3; stroke: #a3b5af; } - .station { fill: #78928a; } + .edge { fill: none; stroke-width: 1.4; stroke-linecap: butt; stroke-dasharray: 4 2; stroke: #a2b49b; } + .station { fill: #758c72; } .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.rel { border-top-color: #c9c9c7; } @@ -215,20 +215,31 @@ table.spec.tight th { padding: 4px 10px 4px 0; } table.spec.tight td { padding: 3px 10px 3px 0; } - /* P7 路线图（线条构件版） */ - .rnode { - position: absolute; width: 160px; height: 44px; - background: #ffffff; border-radius: 12px; - display: flex; align-items: center; gap: 7px; padding: 0 12px; - box-shadow: 0 1px 2px rgba(26,26,26,0.10); + /* P7 路线图（线条构件版 · 大卡 CourseCard 实例） */ + .rcard { + position: absolute; width: 232px; + background: #ffffff; border-radius: 14px; padding: 10px; + box-shadow: 0 1px 3px rgba(26,26,26,0.08); } - .rnode .t { font-size: 12px; font-weight: 700; color: #1a1a1a; flex: 1; } - .rnode .st { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; font-weight: 600; } - .rnode .st.done { background: #efe6fb; color: #6d28d9; } - .rnode .st.lock { background: #ffffff; color: #6b6b6b; border: 1px solid #d5d5d3; } - .rnode .icotile { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; } + .rcard .rzone { + height: 118px; border-radius: 8px; + display: flex; align-items: center; justify-content: center; + position: relative; + } + .rcard .rzone span { font-size: 34px; } + .rcard .rzone i { + position: absolute; right: 7px; bottom: 7px; font-style: normal; + font-size: 9px; color: #6b6b6b; background: rgba(255,255,255,0.9); + padding: 1px 6px; border-radius: 999px; font-weight: 600; + } + .rcard .rt { display: flex; align-items: center; gap: 7px; margin-top: 9px; } + .rcard .rt .icotile { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; flex: none; } + .rcard .rt b { font-size: 13px; color: #1a1a1a; flex: 1; } + .rcard .st { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; font-weight: 600; flex: none; } + .rcard .st.done { background: #efe6fb; color: #6d28d9; } + .rcard .st.lock { background: #ffffff; color: #6b6b6b; border: 1px solid #d5d5d3; } .linecard { - background: #ffffff; border-radius: 14px; padding: 12px 14px 10px; + background: #ffffff; border-radius: 14px; padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(26,26,26,0.06); } @@ -650,62 +661,75 @@
<CourseGraph />

课程路线图 · 线条是构件

-
路线的最小构件是线条：直段 / 圆角转角 / 曲线 / 分流岔口 / 汇合 / 站点。主线在岔口分流出两条车道，曲线并线后继续前进——网状关系在路线内可读。
+
路线的最小构件是线条：直段 / 圆角转角 / 弧线步进 / 分流岔口 / 汇合 / 站点，弯道皆圆弧。CourseCard 由路线串联：岔口分流、弧线并线——网状关系在路线内可读。
- -
- - - - - - - - - - - - - - - + +
+ + + + + + + + + + + + + + + -
①🌐快速开始✓
-
②⚛️React✓
-
🧱更多示例✓
-
📦更多✓
-
🔗全栈基础🔒
-
③🧠高级教程✓
-
分流岔口 ×1 · 曲线并线 ×2 · 站点 ×7
+
+ ① +
🌐16:9 · GIF
+
🌐快速开始✓
+
+
+ ② +
⚛️16:9 · GIF
+
⚛️React✓
+
+
+
🧱16:9 · GIF
+
🧱更多示例✓
+
+
+
📦16:9 · GIF
+
📦更多✓
+
+
→ 下一程：全栈基础 🔒 · ③ 高级教程
+
分流 ×1 · 弧线并线 ×2 · 站点 ×7
- -
+ +
<RouteLine /> 线条组件 · 六原语
- +
segment · 直段
- +
elbow · 圆角转角
- -
curve · 曲线
+ +
arc · 弧线步进
- +
fork · 分流岔口
- +
merge · 汇合并线
- +
station · 站点（悬浮于卡间槽内）
@@ -724,10 +748,10 @@

设计原则

-
1线只管顺序：状态交给卡片（✓ / 🔒）。
-
2背景级线条：灰绿 #A3B5AF · 1.2px · 划隙 6:3；站点 #78928A 深一档，直径 ≈ 4× 线宽。
-
3岔口即分支：快速开始分流出 React 线与示例线，在「更多」并线。
-
4线条是构件：六原语可拼任意路线。
+
1线只管顺序：状态交给卡片 ✓ / 🔒。
+
2背景级线条：鼠尾草绿 #A2B49B · 1.4px · 划隙 4:2；站点 #758C72 深一档，直径 ≈ 4× 线宽。
+
3弯道皆圆弧：所有转折由双圆弧步进（R35×2）完成，全图无斜线。
+
4岔口即分支：快速开始分流出 React 线与示例线，在「更多」弧线并线。
5顺序为示例占位，填 courses.ts 自动更新。
diff --git a/design-refs/mockup/components.pdf b/design-refs/mockup/components.pdf index 0ab5ff2..06ded7e 100644 Binary files a/design-refs/mockup/components.pdf and b/design-refs/mockup/components.pdf differ