diff --git a/design-refs/mockup/components-page-7.png b/design-refs/mockup/components-page-7.png index c231fb6..c09575d 100644 Binary files a/design-refs/mockup/components-page-7.png and b/design-refs/mockup/components-page-7.png differ diff --git a/design-refs/mockup/components.html b/design-refs/mockup/components.html index 54b270b..7debea7 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; } - .gedges .edge { fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: 9 4; stroke: #6366f1; } - .gedges .station { fill: #6366f1; } + .edge { fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: 9 4; stroke: #6366f1; } + .station { fill: #6366f1; } .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,6 +215,23 @@ 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); + } + .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; } + .linecard { + background: #ffffff; border-radius: 14px; padding: 12px 14px 10px; + display: flex; flex-direction: column; gap: 6px; + box-shadow: 0 1px 2px rgba(26,26,26,0.06); + } @@ -628,61 +645,89 @@
06 / 09
- +
<CourseGraph /> -

课程路线图 · 一条主线的学习旅程

-
复刻参考稿的路线语言：一条自上而下的虚线干线串起六个站点，卡片如便签错落两侧；线只管顺序，状态在卡上；①②③ = 读者入口。
+

课程路线图 · 线条是构件

+
路线的最小构件是线条：直段 / 圆角转角 / 曲线 / 分流岔口 / 汇合 / 站点。主线在岔口分流出两条车道，曲线并线后继续前进——网状关系在路线内可读。
-
-
- - - - - - - - - - - - - - - -
①🌐快速开始✓
-
②⚛️快速开始 React✓
-
🧱更多示例✓
-
📦更多✓
-
🔗全栈基础🔒
-
③🧠高级教程✓
-
- 推荐学习顺序（自上而下，一站一卡） - ①②③读者入口（见下页） + +
+ + + + + + + + + + + + + + + + +
①🌐快速开始✓
+
②⚛️React✓
+
🧱更多示例✓
+
📦更多✓
+
🔗全栈基础🔒
+
③🧠高级教程✓
+
分流岔口 ×1 · 曲线并线 ×2 · 站点 ×7
+
+ + +
+
<RouteLine /> 线条组件 · 六原语
+
+
+ +
segment · 直段
+
+
+ +
elbow · 圆角转角
+
+
+ +
curve · 曲线
+
+
+ +
fork · 分流岔口
+
+
+ +
merge · 汇合并线
+
+
+ +
station · 站点（悬浮于卡间槽内）
-
-

Args

+
+

Args

- - - - + + + + +
Prop类型说明
pathcourseId[]推荐学习顺序，站点与干线由此派生
stationsPathNode[]站点圆点 + 错落卡片（可微旋转）
status无 prop不在图上编码，由卡片胶囊 / 🔒 表达
entryPointsEntry[]①②③ 入口徽标，数据见 EntryGuide
pathSegment[]直段/转角/曲线序列
forksFork[]分流岔口（分出车道）
mergesMerge[]曲线并线点
stationsNode[]站点圆点，锚定卡间槽
status无 prop不在图上编码
-
-

为什么是路线，不是图（参考稿原则）

-
1线只管顺序：状态交给卡片（✓ / 🔒），线保持最低音量。
-
2单线无叉的旅程：错落卡片被干线串成路线，顺序自然可读。
-
3网状关系放别处：前置/关联看卡片 chips，多入口见 EntryGuide。
-
4推荐顺序为示例占位，正式顺序填 courses.ts 后自动更新。
-
+
+

设计原则

+
1线只管顺序：状态交给卡片（✓ / 🔒）。
+
2岔口即分支：快速开始分流出 React 线与示例线，在「更多」并线。
+
3线条是构件：六原语可拼任意路线。
+
4顺序为示例占位，填 courses.ts 自动更新。
组件设计稿 · Storybook 拆分 · stack idealjs
diff --git a/design-refs/mockup/components.pdf b/design-refs/mockup/components.pdf index 2adbf4e..11c2235 100644 Binary files a/design-refs/mockup/components.pdf and b/design-refs/mockup/components.pdf differ