stack·idealjs
全栈教程 🎓工具使用博客
STACK IDEALJS · 全栈工程师教程
组件设计稿 · Storybook 拆分
整页设计稿（course-shelf v2）拆解为 10 个可独立实现与验收的组件、9 页 stories：变体展示 + Args 表 + 规格。
组件即实现单元：Docusaurus 侧按组件对应文件落码，每页 stories 即验收清单。
<TopBar />
黑顶栏
logo · 菜单 · 当前项高亮 · 🔔 · 头像
<IconRail />
左窄图标栏
40px 宽，图标导航
<SearchPill />
搜索胶囊
页面标题行右侧搜索
<StatsRow />
统计卡行
大数字 + 灰标签，淡彩底
<CourseCard />
课程白卡
16:9 预期区（desc ⇄ GIF）· 状态 · 按钮
<CourseCardMedia />
播放态
定时翻转/悬停锁定 + ⏱ GIF 循环
<EventsPanel />
事件栏
彩色条目：类型 · 日期 · 描述 · 时间
<CourseGraph />
课程路线图
一条干线六站点 · 入口 ①②③
<EntryGuide />
入口梳理
读者画像 → 起点与路径
Atoms
原子组件
Pill · CircleButton · Chip · IconTile
10Components · 组件
9Stories · 页
6Variants · 课程变体
v2.1 · 2026-10 · 派生自 course-shelf v2
复刻视觉：Learning Plan Dashboard（仅风格参考）
01 / 09
<TopBar /> <IconRail /> <SearchPill />
骨架导航组件
页面骨架三件套：黑顶栏承载站点导航，左窄栏承载快捷入口，搜索胶囊附属于标题行。
stack·idealjs
🔔
初
default · active = 全栈教程
stack·idealjs
🔔
初
variant · active = 博客（随路由切换）
🏠📚🧩⚙️
<IconRail /> · w 40 · 4 icons
Search…
<SearchPill /> · default
<TopBar /> Args
| Prop | 类型 | 默认 | 说明 |
|---|
logo | string | stack·idealjs | 左侧白色粗体站点名 |
items | string[] | 四项菜单 | 全栈教程/工具使用/实践经历/博客 |
active | string | 全栈教程 | 当前路由项，白色加粗 |
avatar | string | 初 | 渐变圆头像，取首字 |
规格说明
1TopBar：高 46px，底 #111111，菜单居中，当前项 #FFF 600；圆角 12px（页面内嵌时）。
2IconRail：白底 40px 宽，图标 14px 灰 #8A8A8A，项间距 14px；首页/书架/积木/设置。
3SearchPill：胶囊白底描边，placeholder 灰；输入后文字转主黑。实现映射 Docusaurus navbar search。
02 / 09
Atoms · Pill / CircleButton / Chip / IconTile
原子组件
构成卡片与面板的最小单元，四象限展示：每个原子给出全部变体与尺寸规格。
<Pill /> 状态胶囊
✓ Completed 🎉done · 紫底 #EFE6FB
高度统一 24px（页面尺寸）/ 28px（卡片尺寸）· 圆角 999px · 字重 600
<CircleButton /> 黑圆按钮
卡内 26px / 解剖展示 34px · 背景 #1A1A1A · 点击进入章节
<Chip /> 关系标签
数据源 courses.ts 的 relations 字段 · 未填时显示占位样式
<IconTile /> 彩色图标块
26×26 · 圆角 9px · 淡彩底取自课程色映射表
原子组件规格速查
| 原子 | 尺寸 | 颜色 | 圆角 | 用途 |
|---|
| Pill | 高 24/28px | 紫 #EFE6FB / 白底描边 | 999px | 完成度与播放状态徽标 |
| CircleButton | 26 / 34px | #1A1A1A + 白字 | 50% | 进入章节 / 播放确认 |
| Chip | 高 20px | 描边 #CFCFCD 灰字 | 999px | 章节前置与关联关系 |
| IconTile | 26×26px | 六课程淡彩底 | 9px | 卡片左上角章节图标 |
03 / 09
<CourseCard />
课程白卡 · default 态
书架核心单元：16:9 预期区常驻 desc，定时自动翻转为播放对应 GIF；数据全部来自 courses.ts。
🌐快速开始
写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
前置：无
✓ Completed 🎉✓
hello-world
⚛️快速开始 React
用脚手架创建 React 应用，亲手拼出第一个 Todo List。
前置：快速开始关联：更多示例
✓ Completed 🎉✓
hello-react
🧱更多示例
浮动布局等补充示例，巩固前面攒下的积木。
前置：快速开始
✓ Completed 🎉✓
more-example
📦更多
把示例工程构建为可发布产物，看清 build 做了什么。
前置：快速开始 React
✓ Completed 🎉✓
more
🔗全栈基础
从网页到服务与数据库，串起最小全栈闭环。
关联章节整理中
Upcoming→
full-stack · wip 变体
🧠高级教程
数据流、纯函数、CAP——工程上的心智模型。
前置：全栈基础
✓ Completed 🎉✓
advance
Args
| Prop | 类型 | 说明 |
|---|
title | string | 章节名 |
desc | string | 预期一句话（16:9 区） |
done | boolean | ✓ 胶囊 / Upcoming |
prerequisites | string[] | 前置 → 实线 chip + 图边 |
related | string[] | 关联 → 虚线 chip + 图边 |
icon / tint | emoji / hex | 图标与淡彩底 |
href | string | 章节路由 |
flipInterval | ms | 翻转周期，默认 8000 |
交互
1整卡可点进入章节；预期区定时翻转（见下页）。
2hover / Tab：即时翻到 GIF 并锁定，移出恢复定时。
3触屏 / 减动效：不自动翻转；首页可用紧凑变体。
04 / 09
<CourseCardMedia />
播放态 · 定时翻转 / 悬停锁定
预期区（16:9）翻转化淡彩播放态：黑色圆形播放钮 + ⏱ 胶囊，GIF 此刻才挂载并循环。
playing · 512 × 288（16:9）· tint 随章节主题色
播放器规格
| 项 | 规格 |
|---|
| 翻转周期 | desc 8s ⇄ GIF 8s（flipInterval 可配）；GIF 内部循环 |
| 播放钮 | 黑 #111 圆形 · 卡内 44px / 展示 56px · 阴影 0 4px 14px |
| ⏱ 胶囊 | 右上 GIF loop · 左下成果字幕，白底描边胶囊 |
| GIF | 640×360 · loop=0 · ≤300KB · hover 时才挂载 |
| 触屏 | 不进入此态，点击直达章节 |
状态转换
1desc → playing：定时 8s 到期，或 hover / Tab 聚焦即时触发；GIF 挂载循环。
2锁定：悬停/聚焦期间停在 playing，不翻回；移出后按定时器继续轮换。
3playing → desc：定时到期或移出，GIF 卸载、缓存保留，再翻回瞬时恢复。
05 / 09
<StatsRow /> · <EventsPanel />
数据组件 · 统计行与事件栏
统计行汇报教程规模，事件栏承载章节动态；两者数据均为静态 JSON，可后续接构建脚本生成。
<StatsRow /> 三变体
数值由 courses.ts 推导：total=length · done=count(done) · wip=total-done
<EventsPanel /> 最近更新 · 四色变体
新增 · WebOCT 02
「更多示例」补充浮动布局一文
09:00
新增 · 蓝
章节 · 高级SEP 28
CAP 一讲更新配图与示例
14:30
更新 · 紫
计划 · 全栈SOON
「全栈基础」章节开写
即将开始
计划 · 黄
<EventsPanel /> Args
| Prop | 类型 | 说明 |
|---|
items[] | Event[] | 事件数组，倒序展示 |
type | 新增/更新/计划/讨论 | 决定淡彩底色 |
date | string | 右上角日期（SOON 等特殊值可） |
desc / time | string | 动态描述与时间行 |
数据与实现
1StatsRow：纯派生数据，无独立配置；卡宽 flex 均分，圆角 16px。
2EventsPanel：数据源 events.ts（新文件）；类型→底色映射：新增蓝/更新紫/计划黄/讨论绿。
3事件可由 git log 或 RSS 后续自动生成，先手工维护。
06 / 09
<CourseGraph />
课程路线图 · 线条是构件
路线的最小构件是线条：直段 / 圆角转角 / 曲线 / 分流岔口 / 汇合 / 站点。主线在岔口分流出两条车道，曲线并线后继续前进——网状关系在路线内可读。
①🌐快速开始✓
②⚛️React✓
🧱更多示例✓
📦更多✓
🔗全栈基础🔒
③🧠高级教程✓
分流岔口 ×1 · 曲线并线 ×2 · 站点 ×7
Args
| Prop | 类型 | 说明 |
|---|
path | Segment[] | 直段/转角/曲线序列 |
forks | Fork[] | 分流岔口（分出车道） |
merges | Merge[] | 曲线并线点 |
stations | Node[] | 站点圆点，锚定卡间槽 |
status | 无 prop | 不在图上编码 |
设计原则
1线只管顺序：状态交给卡片（✓ / 🔒）。
2背景级线条：灰绿 #A3B5AF · 1.2px · 划隙 6:3；站点 #78928A 深一档，直径 ≈ 4× 线宽。
3岔口即分支：快速开始分流出 React 线与示例线，在「更多」并线。
4线条是构件：六原语可拼任意路线。
5顺序为示例占位，填 courses.ts 自动更新。
07 / 09
<EntryGuide />
入口梳理 · 按读者画像推荐起点
三类读者三种入口：路径是推荐不是强制；起点章节高亮，沿途章节排成路径 chips。
🌱零基础入门
入口 ① 快速开始
快速开始→
React→
更多示例→
更多→
全栈基础→
高级教程
完整链按序走；每步先核对验收产物再前进，认知基础必须在真机跑通。
⚛️写过页面 · 有前端经验
入口 ② 快速开始 React
React→
更多→
全栈基础→
高级教程
「快速开始」降级为查漏清单：实践过的部分直接跳过，撞到陌生积木再回看。
🧠在职补工程思维
入口 ③ 高级教程
高级教程
专题按需点读
数据流 / 纯函数 / CAP 按需取用；缺上下文时回看「全栈基础」，真机验收不可代劳。
Args
| Prop | 类型 | 说明 |
|---|
profiles[].name | string | 读者画像名 |
profiles[].entry | courseId | 起点章节，对应图中 ①②③ |
profiles[].path | courseId[] | 推荐路径（可空 = 按需点读） |
profiles[].note | string | 跳读/回看策略一句话 |
入口梳理原则
1路径非强制：推荐序列只做导航，不设锁——任何章节始终可进（skill 死原则）。
2与 CourseGraph 共用数据：entries 与图上的入口徽标同源，改一处两处同步。
3画像数据入 entries.ts；后续可由读者自选画像并高亮其路径。
08 / 09
<DashboardPage />
组装 · 组件如何拼成页面
页面 = TopBar + IconRail + 标题行(SearchPill) + StatsRow + CourseGrid(CourseCard × 6) + EventsPanel。
stack·idealjs
🔔初
🏠📚🧩⚙️
6Total
5Completed 🎉
1Upcoming
⚛️
快速开始 React
✓ Completed✓
最近更新 😊
新增 · WebOCT 02
「更多示例」补充一文
组件树（实现映射）
| 设计组件 | 实现文件 |
|---|
| DashboardPage | pages/index.tsx |
| TopBar | navbar 主题化 docusaurus.config |
| IconRail | CourseShelf/IconRail |
| StatsRow | CourseShelf/StatsRow |
| CourseCard(/Media) | CourseShelf/CourseCard |
| EventsPanel | CourseShelf/EventsPanel |
| CourseGraph / EntryGuide | CourseShelf/CourseGraph 等 |
| 数据 | courses.ts / events.ts / entries.ts |
组装要点
1网格 auto-fill minmax(280px, 1fr)；本页示意 2 列，≥1140px 实为 3 列。
2各组件可独立验收：本册 02–08 页即逐组件的验收清单。
3关系图与入口梳理挂书架上方（默认折叠）或独立路由 /curriculum；整页效果见 course-shelf.pdf。
09 / 09