diff --git a/design-refs/mockup/components.html b/design-refs/mockup/components.html index 4d1697b..c33add9 100644 --- a/design-refs/mockup/components.html +++ b/design-refs/mockup/components.html @@ -217,30 +217,30 @@ /* P7 路线图（线条构件版 · 大卡 CourseCard 实例） */ .rcard { - position: absolute; width: 190px; - background: #ffffff; border-radius: 14px; padding: 10px; + position: absolute; width: 136px; + background: #ffffff; border-radius: 12px; padding: 10px; box-shadow: 0 1px 3px rgba(26,26,26,0.08); } .rcard .rzone { - height: 95px; border-radius: 8px; + height: 65px; border-radius: 7px; display: flex; align-items: center; justify-content: center; position: relative; } - .rcard .rzone span { font-size: 30px; } + .rcard .rzone span { font-size: 24px; } .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; + position: absolute; right: 6px; bottom: 6px; font-style: normal; + font-size: 8.5px; color: #6b6b6b; background: rgba(255,255,255,0.9); + padding: 1px 5px; 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 .rt { display: flex; align-items: center; gap: 6px; margin-top: 8px; } + .rcard .rt .icotile { width: 18px; height: 18px; border-radius: 6px; font-size: 10px; flex: none; } + .rcard .rt b { font-size: 12px; color: #1a1a1a; flex: 1; } + .rcard .st { font-size: 9px; padding: 1px 5px; 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: 10px 12px 8px; - display: flex; flex-direction: column; gap: 6px; + background: #ffffff; border-radius: 12px; padding: 8px 10px 6px; + display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 2px rgba(26,26,26,0.06); } @@ -661,81 +661,97 @@
<CourseGraph />

课程路线图 · 线条是构件

-
路线的最小构件是线条：直段 / 圆角转角 / 直角步进 / 分流岔口 / 汇合 / 站点，横平竖直。CourseCard 由路线串联：岔口分流、并线前进——网状关系在路线内可读。
+
线条构件：直段 / 转角 / 步进 / 分流 / 并线 / 并行 / 站点，横平竖直。并行线逐条不合并；单线圆点、多线扁点。CourseCard 由路线串联成网。
- -
-
<RouteLine /> 线条组件 · 六原语
-
+ +
+
<RouteLine /> 线条组件 · 八原语
+
- +
segment · 直段
- +
elbow · 圆角转角
- +
step · 直角步进
- +
fork · 分流岔口
- +
merge · 汇合并线
- -
station · 站点（半嵌卡边）
+ +
parallel · 并行线（不合并）
+
+
+ +
dot · 单线圆点（半嵌卡边）
+
+
+ +
flat · 多线扁点（半嵌卡边）
- -
- - - - - - - - + +
+ + + + + + + + + -
- ① -
🌐16:9 · GIF
+
+ ① +
🌐16:9
🌐快速开始✓
-
- ② -
⚛️16:9 · GIF
+
+ ② +
⚛️16:9
⚛️React✓
-
-
🧱16:9 · GIF
+
+
🧱16:9
🧱更多示例✓
-
-
📦16:9 · GIF
+
+
🔗16:9
+
🔗全栈基础🔒
+
+
+
📦16:9
📦更多✓
- - - - - - - - - + + + + + + + + + + + + -
→ 下一程：全栈基础 🔒 · ③ 高级教程
-
分流 ×1 · 并线 ×2 · 站点 ×8
+
→ 下一程：③ 高级教程
+
分流 ×1 · 三线并行 ×1 · 圆点 ×10 · 扁点 ×1
@@ -745,17 +761,18 @@ pathSegment[]直段/转角/步进序列 forksFork[]分流岔口（分出车道） mergesMerge[]直角并线点 - stationsNode[]站点圆点，半嵌卡边 + stationsNode[]单线圆点 / 多线扁点，半嵌卡边 status无 prop不在图上编码

设计原则

1线只管顺序：状态交给卡片 ✓ / 🔒。
-
2背景级线条：鼠尾草绿 #A2B49B · 1.4px · 划隙 4:2；站点 #758C72 半嵌卡边（圆点中心落在卡边上），直径 ≈ 4× 线宽。
-
3横平竖直：走向只有水平与垂直，转折用小圆角 R8，全图无斜线。
-
4岔口即分支：快速开始分流出 React 线与示例线，在「更多」并线。
-
5顺序为示例占位，填 courses.ts 自动更新。
+
2背景级线条：鼠尾草绿 #A2B49B · 1.4px · 划隙 4:2；站点 #758C72 半嵌卡边。
+
3横平竖直：走向只有水平与垂直，转折用小圆角 R8。
+
4并行不合并：多线并行逐条渲染，间距 4px，不合成一条。
+
5站点随线变形：单线 → 圆点 r2.8；多线入同一卡口 → 扁点 rx8×ry4。
+
6顺序为示例占位，填 courses.ts 自动更新。
组件设计稿 · Storybook 拆分 · stack idealjs
diff --git a/design-refs/mockup/components.pdf b/design-refs/mockup/components.pdf index 0f6f900..8023068 100644 Binary files a/design-refs/mockup/components.pdf and b/design-refs/mockup/components.pdf differ