+
- 课程书架
-
+ stack·idealjs
+
+
+
+ STACK IDEALJS · 全栈工程师教程
-
课程书架
设计稿
-
- 课程预览从目录树改为卡片书架 · 每卡承载 title / desc / done / relations
- 悬停卡片即循环播放该部分「学完能得到什么」的预期成果 GIF +课程书架
+
- 悬停卡片即循环播放该部分「学完能得到什么」的预期成果 GIF +
课程书架
设计稿 v2
+
+ 课程预览从目录树改为卡片书架 · 复刻 Learning Plan Dashboard 视觉语言
+ 每卡承载 title / desc / done / relations，悬停即在卡内循环播放预期成果 GIF
- + 每卡承载 title / desc / done / relations，悬停即在卡内循环播放预期成果 GIF
-
-
-
-
-
-
+
+
-
-
+
6Total Sections · 教程部分
+ 5Completed · 已完成 🎉
+ 1Upcoming · 写作中
-
- 01 整体布局 · 首页桌面态
- 视口 1440px · 卡片网格 auto-fill minmax(280px, 1fr) +01 整体布局 · Learning Plan 式课程书架
+ 复刻要素：黑顶栏 · 统计卡行 · 双列课程卡 · 高亮媒体卡 · 右侧事件栏
-
-
-
idealjs.github.io/stack/
+
+
+
-
-
- stack idealjs
- 快速开始 - 5min ⏱参与讨论
-
-
全栈工程师教程 · 课程书架
- 共 6 个部分。悬停卡片，预览学完这一部分能得到什么。
-
-
-
▶ 悬停预览预期成果
- 快速开始 ✓ 已完成
- 写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
+
+
+
+ 🏠📚🧩⚙️
+
+
+
+
+
- 全栈工程师教程 📚
+ Search…
-
- ▶ 悬停预览预期成果
- 快速开始 React ✓ 已完成
- 用脚手架创建 React 应用，亲手拼出第一个 Todo List。
+
+
- 6Total Sections
+ 5Completed 🎉
+ 1Upcoming
-
-
- 1
- 2
- 3
- 4
▶ 悬停预览预期成果
- 更多示例 ✓ 已完成
- 浮动布局等补充示例，巩固前面攒下的积木。
+
+
+
-
+
+
+
+
+ ▶
+ ⏱ GIF loop
+
+
+ 快速开始
+ 悬停态：预期成果在卡内循环播放
+
+
+
+ ⚛️
+ 快速开始 React
+ 用脚手架创建 React 应用，亲手拼出第一个 Todo List。
+ ✓ Completed 🎉✓
+
+
+
+ 🧱
+ 更多示例
+ 浮动布局等补充示例，巩固前面攒下的积木。
+ ✓ Completed 🎉✓
+
+
+
+ 📦
+ 更多
+ 把示例工程构建为可发布产物，看清 build 做了什么。
+ ✓ Completed 🎉✓
+
+
+
+ 🔗
+ 全栈基础
+ 从网页到服务与数据库，串起最小全栈闭环。
+ Upcoming→
+
+
🧠
+ 高级教程
+ 数据流、纯函数、CAP——工程上的心智模型。
+ ✓ Completed 🎉✓
+
-
- ▶ 悬停预览预期成果
- 更多 ✓ 已完成
- 把示例工程构建为可发布产物，看清 build 到底做了什么。
-
-
- ▶ 悬停预览预期成果
- 全栈基础 写作中
- 从网页到服务与数据库，串起完整的最小全栈闭环。
-
-
+
+ ▶ 悬停预览预期成果
- 高级教程 ✓ 已完成
- 数据流、纯函数、CAP——工程上的心智模型。
+
+
+
最近更新 😊
+
+
+ 新增 · WebOCT 02
+ 「更多示例」补充浮动布局一文
+ 09:00
+
+
+ 章节 · 高级SEP 28
+ CAP 一讲更新配图与示例
+ 14:30
+
+
+ 计划 · 全栈SOON
+ 「全栈基础」章节开写，占位卡已上架
+ 即将开始
+
+
讨论OCT 01
+ 讨论区新增 3 帖，欢迎踩场
+ 20:00
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
-
+
-
- 布局要点
-1Hero 入口区：保留「快速开始 5min」与「参与讨论」双按钮，合并为单条 hero，去除旧版双 hero 叠放。
- 2书架标题行：交代总数与悬停玩法，读者未 hover 前即知道卡片有预期成果预览。
- 3卡片网格：六部分各一卡，颜色书脊区分；顺序 = 侧栏学习顺序（垃圾桶/归档不入架）。
- 4整卡可点：卡即链接，进入该部分分类索引页；hover 只做预览不导航。
+ 复刻要素对照
+1黑色顶栏：白 logo + 居中菜单（当前项白色高亮）+ 🔔 与头像。
+ 2统计卡行：大数字 + 小灰标签，淡蓝/淡绿/淡紫底。
+ 3双列课程卡：白卡大圆角，彩色圆角图标、状态胶囊、黑圆确认钮。
+ 4高亮媒体卡：淡彩底 + 黑色圆形播放钮 + ⏱ 胶囊——即 hover 预览态。
+ 5右侧事件栏：彩色条目卡承载章节动态（类型 + 日期 + 描述 + 时间）。
-
- 响应式
-A≥1140px 三列 · 760–1140px 两列 · <760px 单列（触屏降级策略见第 4 页）。
+
+
与 v1 的差异
+ADocusaurus 浅蓝 hero 退场，骨架改为 Learning Plan 仪表盘；卡片语言从「书脊 + 媒体区」改为「图标 + 状态胶囊 + 黑圆按钮」。
+ B新增统计行与事件栏，分别对应「积木清单规模」与「章节动态」。
课程书架设计稿 · stack idealjs
+ 课程书架设计稿 v2 · stack idealjs
02 / 05
-
-
- 02 卡片解剖 · 默认态 → 悬停态
- GIF 为动画，纸面以静帧 + 标注表达 +02 卡片解剖 · 默认白卡 → 悬停媒体卡
+ 悬停 = 卡内嵌播放器，GIF 循环预期成果
-
-
▶ 悬停预览预期成果
-
-
-
- 快速开始
- ✓ 已完成 -写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
-关联章节整理中
+
+
+
-
- 1
- 2
- 3
- 4
- 5
- 6
-
+ 🌐
-
-
-
-
- 默认态要素
-1媒体区占位：16:9 深色底 + 播放提示，GIF 未加载，首屏零动图流量。
- 2标题：章节名，即侧栏分类 label。
- 3完成徽标：✓ 已完成 / 写作中，来自 courses.ts 的 done 字段。
- 4预期结果一句话：desc 写「学完能做出什么」。
- 5关系区：关系列出前显示「整理中」，之后渲染 chips。
+
+
+ 快速开始
+ 写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
+ 前置：无关联：快速开始 React
+
+ ✓ Completed 🎉
+ ✓
-
- 
-
-
-
-
- 快速开始
- ✓ 已完成 -写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
-关联章节整理中
+
+
+
-
+
- ▶
+ ⏱ Preview · GIF loop
-
@@ -595,32 +476,32 @@
预期成果 GIF = 靶子「预期结果」的非文字化
-
- 悬停态变化
-6书脊高亮：主题色竖条透明度 45% → 100%。
- 7GIF 挂载：此刻才创建 <img>，按需加载并自动循环播放预期成果。
- 8上浮 + 染色：卡体上浮、阴影加深、描边与标题染主题色。
+
+
+ 快速开始
+ 预期成果正在卡内循环播放：浏览器打开第一个网页。
+
+ ⏱ Watching
+ ▶
课程书架设计稿 · stack idealjs
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+
+
+
+
+
+
+ 默认白卡要素
+1彩色圆角图标：每章一个 emoji 图标，淡彩圆角底。
+ 2标题 + 预期结果一句话：desc 写「学完能做出什么」。
+ 3关系 chips：前置 / 关联章节（关系待列，示例为占位）。
+
+
+
+
+
+ 悬停媒体卡（复刻播放器）
+4状态胶囊 + 黑圆确认钮：✓ Completed 🎉 / Upcoming，点击进入章节。
+ 5淡彩整卡：白卡变为该章主题淡彩底，视觉即「进入预览」。
+ 6黑色圆形播放钮 + ⏱ 胶囊：复刻原稿标志元素；此刻才挂载 GIF，移出还原白卡。
+ 课程书架设计稿 v2 · stack idealjs
03 / 05
+
-
悬停播放时序
-
-
-
-
+
+
+
+
STEP 1
指针进入
mouseenter / focus-visible 触发 previewing=true。
STEP 2
挂载 img
此刻才渲染 GIF <img>，浏览器按需拉取，首屏不载动图。
STEP 3
循环播放
GIF loop=0 自动循环，无播放控件，静音无声。
STEP 4
移出保持缓存
mouseleave 卸载 <img>；HTTP 缓存仍在，再次悬停瞬时恢复。
STEP 1
指针进入
mouseenter / focus-visible 触发，白卡翻为淡彩媒体卡。
STEP 2
挂载播放器
此刻才渲染 GIF，浏览器按需拉取，首屏零动图流量。
STEP 3
循环播放
GIF loop=0 自动循环，卡内嵌播放，无控件无声音。
STEP 4
移出还原
mouseleave 还原白卡；HTTP 缓存保留，再悬停瞬时恢复。
+
-
触发矩阵
| 设备 / 输入 | 行为 |
|---|---|
| 桌面 · 鼠标 hover | 播放预览，移出停止；点击卡片进入章节。 |
| 桌面 · 鼠标 hover | 白卡 → 媒体卡播放预览；点击卡片进入章节。 |
| 键盘 · Tab focus | 与 hover 同态（可访问性），Enter 进入章节。 |
| 触屏 · 无 hover | 不做预览态；首次点击直接进入章节，避免误触消耗流量。 |
| 弱网 / 关闭动图偏好 | 后续可选：prefers-reduced-motion 时不自动播放，显示静帧。 |
| 触屏 · 无 hover | 不做预览态；首次点击直接进入章节，避免误触耗流量。 |
| 减弱动效偏好 | prefers-reduced-motion 时显示静帧，不自动播放。 |
+
@@ -629,69 +510,75 @@
-
-
+
GIF 资产规范（6 张占位已入库）
| 时长与循环 | 3–8s · 无限循环（loop=0）· 无声。 |
| 体积 | 单张 ≤ 300KB（当前占位 72–101KB）。 |
| 命名替换 | static/gifs/<id>.gif 同名覆盖即换片，零代码改动。 |
| 内容口径 | 拍「学完后的真实产物」：浏览器里跑起来的页面、终端输出、可核对的结果。 |
| 内容口径 | 拍「学完后的真实产物」：跑起来的页面、终端输出、可核对结果。 |
课程书架设计稿 · stack idealjs
+ 课程书架设计稿 v2 · stack idealjs
04 / 05
-
- 04 设计 Tokens · 色板 / 字号 / 状态
- 与组件 CourseShelf/styles.module.css 一一对应 +04 设计 Tokens · 复刻配色 / 课程色 / 状态
+ 骨架色取自 Learning Plan Dashboard，课程色沿用六章映射
+
-
-
-
课程色板（书脊 / 徽标 / chips 主题色）
+骨架色（复刻）
-
-
-
-
-
-
+
+
+
+
+
+
+ 快速开始
#6366F1 indigo
React
#EC4899 pink
更多示例
#F59E0B amber
更多
#10B981 emerald
全栈基础
#0EA5E9 sky
高级教程
#8B5CF6 violet
顶栏黑
#111111
页面米白
#F0F0EF
卡白
#FFFFFF
文字主黑
#1A1A1A
文字次灰
#8A8A8A
淡彩底（统计卡 / 媒体卡 / 事件栏）
+
+
+
+
+
+
-
- 事件蓝
#C9E7F7
事件紫
#E9C8F5
事件黄
#F5E6C4
事件绿
#D2F5DF
媒体卡 indigo
#E0E7FF
| 中性色 | 值 |
|---|---|
| 标题 / 正文 / 弱文字 | #0F172A · #334155 · #64748B（slate 900/700/500） |
| 边框 / 页底 | #E2E8F0 · 背景白卡 #FFFFFF 页底 #F8FAFC |
| 完成 / 写作中徽标 | 字 #047857/#92400E · 底 #D1FAE5/#FEF3C7（暗色主题见组件） |
+
-
-
- 字号 · 间距 · 圆角
+课程色 → 淡彩底映射（图标底 / 媒体卡底）
| Token | 值 | 用途 |
|---|---|---|
| 卡标题 | 16.8px / 700 | 卡片标题行 |
| 卡描述 | 14.4px / 1.6 | 预期结果一句话 |
| 徽标 / chips | 11.5px | done 徽标与关系 chips |
| 网格间距 / 内边距 | 20px / 16·18·20px | grid gap / 卡内边距 |
| 圆角 | 卡 12px · 媒体区随卡 · chips 999px | 通用 |
| 书脊 | 宽 4px，透明度 45%→100% | 左缘主题色条 |
| 章节 | 图标底（淡彩） | 强调色 |
| 快速开始 | #E0E7FF | #6366F1 |
| 快速开始 React | #FCE7F3 | #EC4899 |
| 更多示例 | #FEF3C7 | #F59E0B |
| 更多 | #D1FAE5 | #10B981 |
| 全栈基础 | #E0F2FE | #0EA5E9 |
| 高级教程 | #EDE9FE | #8B5CF6 |
-
diff --git a/design-refs/mockup/course-shelf.pdf b/design-refs/mockup/course-shelf.pdf
index d1b4eb6..e5c22cd 100644
Binary files a/design-refs/mockup/course-shelf.pdf and b/design-refs/mockup/course-shelf.pdf differ
diff --git a/design-refs/mockup/page-1.png b/design-refs/mockup/page-1.png
index 1541462..40c45b3 100644
Binary files a/design-refs/mockup/page-1.png and b/design-refs/mockup/page-1.png differ
diff --git a/design-refs/mockup/page-2.png b/design-refs/mockup/page-2.png
index 13fbb0b..72bd7aa 100644
Binary files a/design-refs/mockup/page-2.png and b/design-refs/mockup/page-2.png differ
diff --git a/design-refs/mockup/page-3.png b/design-refs/mockup/page-3.png
index 1f3ee72..9352741 100644
Binary files a/design-refs/mockup/page-3.png and b/design-refs/mockup/page-3.png differ
diff --git a/design-refs/mockup/page-4.png b/design-refs/mockup/page-4.png
index 64ab1a0..920632d 100644
Binary files a/design-refs/mockup/page-4.png and b/design-refs/mockup/page-4.png differ
diff --git a/design-refs/mockup/page-5.png b/design-refs/mockup/page-5.png
index 2ef1a10..6e7ede0 100644
Binary files a/design-refs/mockup/page-5.png and b/design-refs/mockup/page-5.png differ
状态示意
+
+
- 状态示意
-
-
+
- default
hover / focus
+
+ 白卡 · 静止
+ default
+
+
▶ 播放中
+ hover / focus
+
- hover / focus-visible：卡体上浮，阴影加深至 0 6px 20px，边框与标题染主题色，书脊透明度升至 100%。键盘 Tab 与鼠标悬停共享同一态。
+
+ hover：白卡翻为该章淡彩媒体卡，黑色圆形播放钮与 ⏱ 胶囊出现；键盘 Tab 与鼠标悬停共享同一态。圆角 14–20px，阴影仅 0 1px 2px 极轻一级。
课程书架设计稿 · stack idealjs · 关系 relations 待产品列出后填充 courses.ts
+ 课程书架设计稿 v2 · stack idealjs · relations 待产品列出后填充
05 / 05