<Components /> 1/4
组件 · CourseCard 结构
教程的入口载体：孟菲斯骨架（黑边＋硬投影）× 拟物纸感（纸叠边＋相框凹槽）。卡头三件套即靶子。
① 黑描边：2px ink——孟菲斯的印刷感边界，一切鲜艳以此收束。
② 硬投影：7px 8px 0 ink——平面上的「厚」。
③ 纸叠边：白 3px＋暗层 5px 两层堆叠——纸的厚度（拟物）。
④ 相框凹槽：3px 黑边＋内阴影——16:9 预期区像装裱的画框，章节色为底。
⑤ 卡头三件套＝靶子：▲ 目标（三角＋标题）／ ○ 预期结果（相框 GIF，圆环角标）／ ● 积木点列（实心=已学）。
⑥ 入口徽章：①②③ 黑底黄字圆徽，读者画像的推荐起点（非强制）。
⑦ 压凹标题：暗字＋下白影——铅字压进纸面。
尺寸规格
| 项 | 规格 |
|---|
| 卡宽 | 书架 250 · 解剖 360 · 紧凑 140 |
| 相框 | 16:9（aspect-ratio）· 3px 黑边 |
| 描边 | 2px ink |
| 投影 | 7px 8px 0 ink（hover 10px 11px） |
| 纸叠 | 白 3px / 暗层 5px |
| 圆角 | 卡 14 · 相框 8 |
| 积木点 | ⌀7 · 描边 1.5 · 间距 4 |
卡片原则
1卡不可缺：入口与预期永远以卡呈现。
2撞色在框内：章节色只进相框，卡面纸色。
3卡头即靶子：▲○● 三件套缺一不可（skill · 靶子先行）。
01 / 04
<Components /> 2/4
组件 · CourseCard 交互
hover 把卡「拿起来」并播放 GIF；desc 与 GIF 每 8000ms 自动翻转；聚焦锁定；触屏与减弱动效不翻转。
三态 静置 → 拿起（hover）→ 翻转周期
① 静置
7px 8px 硬投影；相框显 desc 摘要或章节色。
② 拿起（hover / 聚焦）
translateY -3px＋投影加深至 10px 11px；GIF 开始循环播放。
这一章做成什么：
本地跑起一个可交互的页面，理解请求-渲染循环。
（desc 态 · 每 8s 与 GIF 轮换）
快速开始
③ 翻转（desc ⇄ GIF）
相框内容每 8000ms 在「文字摘要 / GIF 预期」间轮换。
翻转时间轴 flipMs = 8000
desc · 8s
GIF · 8s
desc · 8s
GIF · 8s
…
周期起点：进入视口（IntersectionObserver）；hover / Tab 聚焦即暂停在该态，离开后恢复。
交互参数
| 参数 | 值 |
|---|
flipMs | 8000（desc ⇄ GIF） |
lockOn | hover · Tab 聚焦 |
noFlip | 触屏 · prefers-reduced-motion |
lift | translateY -3px ＋ 投影 10px 11px |
startOn | 进入视口 |
可访问性
1卡片是链接（<a>），键盘可 Tab 到达，聚焦态＝拿起态。
2GIF 无声；alt ＝ 预期结果一句话。
3动效减弱时相框固定显示 desc 态。
02 / 04
<Components /> 3/4
组件 · RouteLine
关系线：线形即含义（见 02 符号），本页是组件级实现——路径、站点、胶囊、分流的完整拓扑。
组合实例 已验收版直接沿用——四种线形与站点全部在此
实线先后主链（直角步进＋直线）；虚线＝相关（React → 指派块）；点线＝同族（React 顶边 → 越过卡顶 → 全栈基础顶边）；右缘站点骑黑影外缘。
实现要点
| 要点 | 说明 |
| 路径数据驱动 | 由 courses.ts 的关系数据自动生成（先后/相关/同族三类边）。 |
| 自动布线 | 卡位网格化；直角步进由起终点 lanes 差决定；R8 圆角固定。 |
| 站点规格 | r6 · 描边 2px · 四色轮换；左贴描边、右骑硬投影外缘（描边会被影带吞没）。 |
| 胶囊规格 | 6×20 端头半圆；沿线束方向；端头距最外侧线 ≥ 2× 线宽；线止于胶囊边界。 |
| 站点渲染层 | SVG 双层：线在下、站点在上（卡片 DOM 之后），保证半嵌可见。 |
| 胶囊触发 | 同一卡口入线 ≥ 2 自动聚合为胶囊，线止于胶囊边界。 |
RouteLine 参数
| prop | 说明 |
|---|
path | 先后边（实线）段序列 |
rel | 相关边（虚线 4:2） |
family | 同族边（点线） |
stations | 站点（四色轮换，半嵌） |
capsule | 多线卡口（自动聚合） |
用线原则
1线不可缺：章节之间必有关系可读。
2先实后虚：主链实线；相关/同族补充。
3线只管顺序与关系：状态交给卡片（积木点/打孔）。
4窄屏退化：<768 时线收起，改章节 chips 序列。
03 / 04
<Components /> 4/4
组件 · 指派学习块、脱靶标记与入口梳理
三个配套件：＋指派学习块（位置/预期/场景）、⌇脱靶标记（图形入口，读者追随图形进入阅读）、入口徽章与画像路径。
指派学习块 ＆ 脱靶标记 标记跟在指派后——图形即入口，无容器
位置：包管理家族——npm 的坐标与邻居
预期：能说清 lockfile 锁住了什么
场景：加一个依赖 / 换源重装
脱靶 · 装了但没跑
可能怎么脱靶：命令成功、页面空白。
脱靶什么样子：缺的是「真机验收」这块积木。
图形即入口：竖抖是第一视觉，无边框无底色，落在内容旁的空白；文字只写两样——怎么脱靶＋脱靶什么样。
入口梳理 三类读者三条推荐路径——是推荐不是强制（无锁）
🌱零基础入门
① 快速开始→React→更多示例→全栈基础
完整链按序走；每步先核对预期再前进。
⚡写过页面的人
② React→更多示例→高级教程
跳过装环境；从组件拼接进入。
🧠重度 AI 依赖
③ 高级教程→全栈基础
从「指挥 agent 做整件事」切入，回头补认知基础。
入口徽章 ①②③ 与画像卡对应；路径 chips 可点击直达章节；无锁——任何读者可进任何章（死原则）。
组件参数
| 组件 | 关键 prop |
|---|
| 指派学习块 | pos · expect · scenes[] |
| 脱靶标记 | how 怎么脱靶 · looks 什么样 |
| 画像卡 | icon · entry · path[] · note |
三样缺一即退化为「AI 说啥信啥」（skill 原文）。
原则
1无锁：状态是推荐不是门槛。
2指派后必有脱靶标记：成对出现，且是图形不是卡片。
3位置给坐标，预期当尺子，场景管巩固。
04 / 04