diff --git a/design-refs/mockup/design-system/02-symbols.html b/design-refs/mockup/design-system/02-symbols.html index e6ca279..0eeab55 100644 --- a/design-refs/mockup/design-system/02-symbols.html +++ b/design-refs/mockup/design-system/02-symbols.html @@ -128,7 +128,7 @@
＋ 指派
-
位置给坐标、预期当尺子、场景管巩固
三行票承载
+
位置给坐标、预期当尺子
场景管巩固
skill · 指派学习
@@ -268,8 +268,8 @@ - - + +
@@ -293,7 +293,7 @@
-
票券 状态与指派的载体——完成即打孔
+
票券 状态的载体——完成即打孔
🌐
@@ -307,7 +307,7 @@
完成＝沿撕线打双孔（上下半圆缺口）；未开始撕线为实线、无孔。
- 撕线＝4:2 点划，与虚线同节奏但语境不同（裁剪线非关系线）。票号＝章程序号。指派票复用同一票体（见 03 组件）。 + 撕线＝4:2 点划，与虚线同节奏但语境不同（裁剪线非关系线）。票号＝章程序号。票券只表达完成状态，不作其他用途。
diff --git a/design-refs/mockup/design-system/02-symbols.pdf b/design-refs/mockup/design-system/02-symbols.pdf index d2472a4..f6e05f5 100644 Binary files a/design-refs/mockup/design-system/02-symbols.pdf and b/design-refs/mockup/design-system/02-symbols.pdf differ diff --git a/design-refs/mockup/design-system/03-components.html b/design-refs/mockup/design-system/03-components.html index 5b16593..c7050f2 100644 --- a/design-refs/mockup/design-system/03-components.html +++ b/design-refs/mockup/design-system/03-components.html @@ -92,6 +92,7 @@ .msticket.pk::after { bottom: -9px; } .msline { stroke: #111111; stroke-width: 2.5; fill: none; } .msstation { stroke: #111111; stroke-width: 2; } + .assign-card { position: absolute; background: #fff9f0; border: 2px solid #111; border-radius: 12px; box-shadow: 5px 5px 0 #111; padding: 9px 11px; } .tl-bar { display: flex; border: 2px solid #111; border-radius: 10px; overflow: hidden; height: 30px; } .tl-bar div { display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; } .pcard { background: #fff9f0; border: 2px solid #111; border-radius: 14px; box-shadow: 5px 5px 0 #111; padding: 12px 14px; width: 252px; } @@ -246,33 +247,51 @@
-
综合拓扑 分流 → 并行 → 胶囊汇入
- - - - - - - - - - - - - - -
灰竖线＝卡边示意；上行支线与下行支线在左侧分流点只相触不共线，右侧四线两两并行（4px）汇入胶囊卡口。
+
组合实例 已验收版直接沿用——四种线形与站点全部在此
+
+ + + + + + + + + + +
+ ① +
🌐
+
快速开始
+
+
+ ② +
⚛️
+
React
+
+
+
🔗
+
全栈基础
+
+
+
+ + 指派学习 · npm +
+
位置 / 预期 / 场景
+
+
+
实线先后主链（直角步进＋直线）；虚线＝相关（React → 指派块）；点线＝同族（React 顶边 → 越过卡顶 → 全栈基础顶边）；右缘站点骑黑影外缘。
实现要点
- - - - - + + + +
要点说明
路径数据驱动由 courses.ts 的关系数据自动生成（先后/相关/同族三类边）。
自动布线卡位网格化；直角步进由起终点 lanes 差决定；R8 圆角固定。
站点渲染层SVG 双层：线在下、站点在上（卡片 DOM 之后），保证半嵌可见。
胶囊触发同一卡口入线 ≥ 2 自动聚合为胶囊，线止于胶囊边界。
响应式窄屏（<768）退化为纵向书架：线收起，改章节 chips 序列。
路径数据驱动由 courses.ts 的关系数据自动生成（先后/相关/同族三类边）。
自动布线卡位网格化；直角步进由起终点 lanes 差决定；R8 圆角固定。
站点渲染层SVG 双层：线在下、站点在上（卡片 DOM 之后），保证半嵌可见。
胶囊触发同一卡口入线 ≥ 2 自动聚合为胶囊，线止于胶囊边界。
@@ -291,31 +310,31 @@

用线原则

1线不可缺：章节之间必有关系可读。
2先实后虚：主链实线；相关/同族补充。
-
3线只管顺序与关系：状态交给卡片（积木点/打孔）。
+
3线只管顺序与关系：状态交给卡片（积木点/打孔）。
+
4窄屏退化：<768 时线收起，改章节 chips 序列。
设计系统 · 03 组件 · stack idealjs
03 / 04
- +
<Components /> 4/4 -

组件 · 指派票、脱靶注与入口梳理

-
三个配套组件：＋指派票（位置/预期/场景）、⌇脱靶注（跟在指派后）、入口徽章与读者画像路径。
+

组件 · 指派学习块、脱靶注与入口梳理

+
三个配套组件：＋指派学习块（位置/预期/场景三样）、⌇脱靶注（跟在指派后）、入口徽章与读者画像路径。
-
指派票 ＆ 脱靶注 总在指派之后成对出现
+
指派学习块 ＆ 脱靶注 总在指派之后成对出现——普通内容块，非票据
-
-
＋
-
- 指派学习 · npm -
位置：包管理家族——npm 的坐标与邻居
预期：能说清 lockfile 锁住了什么
场景：加一个依赖 / 换源重装
+
+
+ + 指派学习 · npm
-
＋
+
位置：包管理家族——npm 的坐标与邻居
预期：能说清 lockfile 锁住了什么
场景：加一个依赖 / 换源重装
@@ -357,11 +376,11 @@

组件参数

- +
组件关键 prop
指派票pos · expect · scenes[]
指派学习块pos · expect · scenes[]
脱靶注how 怎么脱靶 · looks 什么样
画像卡icon · entry · path[] · note
-
指派票三样缺一即退化为「AI 说啥信啥」（skill 原文）。
+
三样缺一即退化为「AI 说啥信啥」（skill 原文）。

原则

diff --git a/design-refs/mockup/design-system/03-components.pdf b/design-refs/mockup/design-system/03-components.pdf index 378b089..01eb6a8 100644 Binary files a/design-refs/mockup/design-system/03-components.pdf and b/design-refs/mockup/design-system/03-components.pdf differ diff --git a/design-refs/mockup/design-system/04-examples.html b/design-refs/mockup/design-system/04-examples.html index 1bf8f90..722e7ca 100644 --- a/design-refs/mockup/design-system/04-examples.html +++ b/design-refs/mockup/design-system/04-examples.html @@ -101,12 +101,12 @@
<Examples /> 1/2

样例 · 组合场景

-
全系统同台：拟物卡＋三种关系线＋指派票与脱靶注＋散落语义形状。这一页可直接当实现验收的对照图。
+
全系统同台：拟物卡＋三种关系线＋指派学习块与脱靶注＋散落语义形状。这一页可直接当实现验收的对照图。
- + @@ -120,7 +120,7 @@ - + @@ -146,10 +146,12 @@
全栈基础
-
-
＋
-
指派学习 · npm
位置 / 预期 / 场景
-
＋
+
+
+ + 指派学习 · npm +
+
位置 / 预期 / 场景
@@ -175,9 +177,9 @@

场景读法

1主线：快速开始 →（直角步进）→ React →（直线）→ 全栈基础；四枚站点半嵌卡边。
-
2虚线：React 底边 → 指派票顶边（相关：票属于该章扩展）。
-
3点线：React → 全栈基础（同族：工程基础一族）。
-
4指派票打孔＝已完成过一次；脱靶注跟在其叙事之后。
+
2虚线：React 底边 → 指派学习块顶边（相关：块属于该章扩展）。
+
3点线：React 顶边 → 全栈基础顶边（同族：工程基础一族）。
+
4指派学习块：React 的相关扩展（虚线相连）；脱靶注跟在其叙事之后。

对照检查

@@ -205,7 +207,7 @@ 靶子先行卡头三件套：▲ 目标 ＋ ○ 16:9 预期区 ＋ ● 积木点列 步骤 = 目标 ＋ 验收产物卡内验收行（○ 空环待勾，不写键位） 代理区 / 价值区～ 横波带（交给 agent）／ ▬ 实心条（过程就地展开） - 指派学习＋ 三行票：位置（坐标）/ 预期（尺子）/ 场景（巩固） + 指派学习＋ 指派块：位置（坐标）/ 预期（尺子）/ 场景（巩固） 脱靶提醒⌇ 竖抖注，永远跟在指派后 认知基础底座纹与「真机验收」章（env / 运行环境就地露出） 入口梳理①②③ 徽章 ＋ 读者画像路径 chips @@ -218,7 +220,7 @@ 页面组件组合 首页 · 书架CourseCard 网格 ＋ RouteLine（实线主链＋虚线相关）＋ 入口画像卡；散落形状 ≤ 8。 - 教程页 · 正文卡头三件套置顶；正文中 ～ 代理带与 ▬ 价值条分节；指派票＋脱靶注成对；○ 验收行收尾。 + 教程页 · 正文卡头三件套置顶；正文中 ～ 代理带与 ▬ 价值条分节；指派块＋脱靶注成对；○ 验收行收尾。 工具页 / 实践页轻量用形状语言（无卡无线）；实践经历可用拼贴式纸片——单独风格层，不混入主线。
@@ -234,7 +236,7 @@

实现顺序建议

1CourseCard（含翻转交互）→ 首页书架。
2RouteLine（数据驱动布线）→ 关系可读。
-
3指派票＋脱靶注 → 教程正文改造。
+
3指派学习块＋脱靶注 → 教程正文改造。
4GIF 素材逐章录制（16:9，无声循环）。
diff --git a/design-refs/mockup/design-system/04-examples.pdf b/design-refs/mockup/design-system/04-examples.pdf index 86b2224..af7a339 100644 Binary files a/design-refs/mockup/design-system/04-examples.pdf and b/design-refs/mockup/design-system/04-examples.pdf differ