stack·idealjs
课程书架
设计稿 v2
课程预览从目录树改为卡片书架 · 复刻 Learning Plan Dashboard 视觉语言
每卡承载 title / desc / done / relations，悬停即在卡内循环播放预期成果 GIF
6Total Sections · 教程部分
5Completed · 已完成 🎉
1Upcoming · 写作中
v2.0 · 2026-10 · 分支 feat/course-shelf
视觉复刻自 00 · E-learning Learning Plan Dashboard（Dribbble，仅风格参考）
01 / 05
01 整体布局 · Learning Plan 式课程书架
复刻要素：黑顶栏 · 统计卡行 · 双列课程卡 · 高亮媒体卡 · 右侧事件栏
stack·idealjs
🔔
初
🏠📚🧩⚙️
6Total Sections
5Completed 🎉
1Upcoming
⚛️
快速开始 React
用脚手架创建 React 应用，亲手拼出第一个 Todo List。
✓ Completed 🎉✓
🧱
更多示例
浮动布局等补充示例，巩固前面攒下的积木。
✓ Completed 🎉✓
📦
更多
把示例工程构建为可发布产物，看清 build 做了什么。
✓ Completed 🎉✓
🔗
全栈基础
从网页到服务与数据库，串起最小全栈闭环。
Upcoming→
🧠
高级教程
数据流、纯函数、CAP——工程上的心智模型。
✓ Completed 🎉✓
最近更新 😊
新增 · WebOCT 02
「更多示例」补充浮动布局一文
09:00
章节 · 高级SEP 28
CAP 一讲更新配图与示例
14:30
计划 · 全栈SOON
「全栈基础」章节开写，占位卡已上架
即将开始
讨论OCT 01
讨论区新增 3 帖，欢迎踩场
20:00
1
2
3
4
复刻要素对照
1黑色顶栏：白 logo + 居中菜单（当前项白色高亮）+ 🔔 与头像。
2统计卡行：大数字 + 小灰标签，淡蓝/淡绿/淡紫底。
3双列课程卡：白卡大圆角，彩色圆角图标、状态胶囊、黑圆确认钮。
4高亮媒体卡：淡彩底 + 黑色圆形播放钮 + ⏱ 胶囊——即 hover 预览态。
5右侧事件栏：彩色条目卡承载章节动态（类型 + 日期 + 描述 + 时间）。
与 v1 的差异
ADocusaurus 浅蓝 hero 退场，骨架改为 Learning Plan 仪表盘；卡片语言从「书脊 + 媒体区」改为「图标 + 状态胶囊 + 黑圆按钮」。
B新增统计行与事件栏，分别对应「积木清单规模」与「章节动态」。
02 / 05
02 卡片解剖 · 默认白卡 → 播放态
16:9 预期区定时翻转 desc ⇄ GIF，悬停锁定
🌐
写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
16:9 预期区 · desc 常驻，定时 8s 翻转播放 GIF
快速开始
前置：无关联：快速开始 React
✓ Completed 🎉
✓
1
2
3
4
5
6
7
默认白卡要素
1彩色圆角图标：每章一个 emoji，淡彩圆角底。
216:9 预期区：desc 常驻（写「学完能做出什么」），定时 8s 自动翻转为播放 GIF。
3标题 + 关系 chips：前置 / 关联（示例占位）。
4状态胶囊 + 黑圆确认钮：✓ / Upcoming。
播放态（定时翻转 / 悬停锁定）
5淡彩预期区：翻转为该章主题淡彩播放态。
6黑色圆形播放钮 + ⏱ 胶囊：复刻原稿标志元素，此刻才挂载 GIF 循环。
7翻转规则：定时 8s 或 hover/Tab 即时翻转并锁定；到期/移出还原 desc，缓存保留。
03 / 05
03 交互流程 · 触发矩阵 · GIF 资产规范
16:9 预期区 · desc ⇄ GIF 定时轮换 · 悬停锁定
翻转播放时序
STEP 1
定时 / 指针进入
8s 定时到期，或 mouseenter / focus 即时触发，预期区翻为淡彩播放态。
STEP 2
挂载播放器
此刻才渲染 GIF，按需拉取；悬停/聚焦期间锁定在播放态。
STEP 3
循环播放
GIF loop=0 自动循环，卡内嵌播放，无控件无声音。
STEP 4
到期 / 移出还原
定时到期或移出还原 desc；GIF 卸载，HTTP 缓存保留。
触发矩阵
| 设备 / 输入 | 行为 |
|---|
| 桌面 · 鼠标 hover | 即时翻转并锁定 GIF；点击卡片进入章节。 |
| 键盘 · Tab focus | 与 hover 同态（可访问性），Enter 进入章节。 |
| 触屏 · 无 hover | 不自动翻转；点击直接进入章节，避免误触耗流量。 |
| 减弱动效偏好 | prefers-reduced-motion 时不自动翻转，仅显示 desc。 |
GIF 资产规范（6 张占位已入库）
| 项 | 约定 |
|---|
| 尺寸 / 画幅 | 640 × 360 · 16:9 覆盖媒体区，object-fit: cover。 |
| 时长与循环 | 3–8s · 无限循环（loop=0）· 无声。 |
| 体积 | 单张 ≤ 300KB（当前占位 72–101KB）。 |
| 命名替换 | static/gifs/<id>.gif 同名覆盖即换片，零代码改动。 |
| 内容口径 | 拍「学完后的真实产物」：跑起来的页面、终端输出、可核对结果。 |
04 / 05
04 设计 Tokens · 复刻配色 / 课程色 / 状态
骨架色取自 Learning Plan Dashboard，课程色沿用六章映射
骨架色（复刻）
淡彩底（统计卡 / 媒体卡 / 事件栏）
课程色 → 淡彩底映射（图标底 / 媒体卡底）
| 章节 | 图标底（淡彩） | 强调色 |
|---|
| 快速开始 | #E0E7FF | #6366F1 |
| 快速开始 React | #FCE7F3 | #EC4899 |
| 更多示例 | #FEF3C7 | #F59E0B |
| 更多 | #D1FAE5 | #10B981 |
| 全栈基础 | #E0F2FE | #0EA5E9 |
| 高级教程 | #EDE9FE | #8B5CF6 |
状态示意
hover：白卡翻为该章淡彩媒体卡，黑色圆形播放钮与 ⏱ 胶囊出现；键盘 Tab 与鼠标悬停共享同一态。圆角 14–20px，阴影仅 0 1px 2px 极轻一级。
05 / 05