diff --git a/design-refs/mockup/components-page-1.png b/design-refs/mockup/components-page-1.png index 0ada3b5..ce7c97c 100644 Binary files a/design-refs/mockup/components-page-1.png and b/design-refs/mockup/components-page-1.png differ diff --git a/design-refs/mockup/components-page-4.png b/design-refs/mockup/components-page-4.png index b92b97b..2b97507 100644 Binary files a/design-refs/mockup/components-page-4.png and b/design-refs/mockup/components-page-4.png differ diff --git a/design-refs/mockup/components-page-5.png b/design-refs/mockup/components-page-5.png index e500afe..85dfbbe 100644 Binary files a/design-refs/mockup/components-page-5.png and b/design-refs/mockup/components-page-5.png differ diff --git a/design-refs/mockup/components.html b/design-refs/mockup/components.html index 0e7ca7a..970475d 100644 --- a/design-refs/mockup/components.html +++ b/design-refs/mockup/components.html @@ -139,7 +139,13 @@ display: flex; flex-direction: column; gap: 5px; width: 262px; } - .ccard .icorow { display: flex; justify-content: space-between; align-items: flex-start; } + .ccard .icorow { display: flex; align-items: center; gap: 8px; } + .ccard .zone { + width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; + background: #f7f7f5; border: 1px solid #ececea; + display: flex; align-items: center; padding: 10px 12px; + font-size: 11px; color: #8a8a8a; line-height: 1.5; + } .ccard .ttl { font-size: 13.5px; font-weight: 700; color: #1a1a1a; margin: 0; } .ccard .dsc { font-size: 11px; line-height: 1.4; color: #8a8a8a; margin: 0; flex: 1; } .ccard .btm { display: flex; align-items: center; justify-content: space-between; } @@ -227,8 +233,8 @@
<IconRail />
左窄图标栏
40px 宽，图标导航
<SearchPill />
搜索胶囊
页面标题行右侧搜索
<StatsRow />
统计卡行
大数字 + 灰标签，淡彩底
-
<CourseCard />
课程白卡
图标 · 标题 · 预期一句话 · 状态 · 按钮
-
<CourseCardMedia />
悬停媒体卡
淡彩底 + 播放钮 + ⏱ GIF 循环
+
<CourseCard />
课程白卡
16:9 预期区（desc ⇄ GIF）· 状态 · 按钮
+
<CourseCardMedia />
播放态
定时翻转/悬停锁定 + ⏱ GIF 循环
<EventsPanel />
事件栏
彩色条目：类型 · 日期 · 描述 · 时间
<CourseGraph />
课程关系图
前置实线 · 关联虚线 · 入口 ①②③
<EntryGuide />
入口梳理
读者画像 → 起点与路径
@@ -391,68 +397,58 @@
<CourseCard />

课程白卡 · default 态

-
书架的核心单元：六个章节变体共用一个组件，数据全部来自 courses.ts。
+
书架核心单元：16:9 预期区常驻 desc，定时自动翻转为播放对应 GIF；数据全部来自 courses.ts。
-
-
+
+
-
🌐
-
快速开始
-
写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
+
🌐快速开始
+
写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
前置：无
✓ Completed 🎉✓
hello-world
-
-
+
-
⚛️
-
快速开始 React
-
用脚手架创建 React 应用，亲手拼出第一个 Todo List。
+
⚛️快速开始 React
+
用脚手架创建 React 应用，亲手拼出第一个 Todo List。
前置：快速开始关联：更多示例
✓ Completed 🎉✓
hello-react
-
-
+
-
🧱
-
更多示例
-
浮动布局等补充示例，巩固前面攒下的积木。
+
🧱更多示例
+
浮动布局等补充示例，巩固前面攒下的积木。
前置：快速开始
✓ Completed 🎉✓
more-example
-
+
-
📦
-
更多
-
把示例工程构建为可发布产物，看清 build 做了什么。
+
📦更多
+
把示例工程构建为可发布产物，看清 build 做了什么。
前置：快速开始 React
✓ Completed 🎉✓
more
-
-
+
-
🔗
-
全栈基础
-
从网页到服务与数据库，串起最小全栈闭环。
+
🔗全栈基础
+
从网页到服务与数据库，串起最小全栈闭环。
关联章节整理中
Upcoming→
full-stack · wip 变体
-
-
+
-
🧠
-
高级教程
-
数据流、纯函数、CAP——工程上的心智模型。
+
🧠高级教程
+
数据流、纯函数、CAP——工程上的心智模型。
前置：全栈基础
✓ Completed 🎉✓
@@ -466,19 +462,21 @@

Args

- - - - - - - + + + + + + + +
Prop类型说明
titlestring章节名（分类 label）
descstring预期结果一句话
donebooleantrue → ✓ 胶囊 + ✓ 钮
prerequisitesstring[]前置章节 → 实线 chip + 图中实线边
relatedstring[]关联章节 → 虚线 chip + 图中虚线边
icon / tintemoji / hexIconTile 底色与图标
hrefstring章节分类索引路由
titlestring章节名
descstring预期一句话（16:9 区）
doneboolean✓ 胶囊 / Upcoming
prerequisitesstring[]前置 → 实线 chip + 图边
relatedstring[]关联 → 虚线 chip + 图边
icon / tintemoji / hex图标与淡彩底
hrefstring章节路由
flipIntervalms翻转周期，默认 8000

交互

-
1整卡可点 → 进入章节；hover 切换为 <CourseCardMedia />（见下页）。
-
2Tab focus 与 hover 同态；触屏无预览态。
+
1整卡可点进入章节；预期区定时翻转（见下页）。
+
2hover / Tab：即时翻到 GIF 并锁定，移出恢复定时。
+
3触屏 / 减动效：不自动翻转；首页可用紧凑变体。
@@ -490,14 +488,14 @@
<CourseCardMedia /> -

悬停媒体卡 · hover 态

-
CourseCard 的 hover/focus 形态：淡彩整卡 + 黑色圆形播放钮 + ⏱ 胶囊，GIF 此刻才挂载并循环。
+

播放态 · 定时翻转 / 悬停锁定

+
预期区（16:9）翻转化淡彩播放态：黑色圆形播放钮 + ⏱ 胶囊，GIF 此刻才挂载并循环。
-
+
-
-
+
+
▶
⏱ GIF loop 预期成果 · 浏览器打开第一个网页 @@ -507,11 +505,11 @@
GIF 来源 static/gifs/hello-world.gif · loop=0 · 悬停期间持续播放
-
default · tint = #E0E7FF（随章节主题色）
+
playing · 512 × 288（16:9）· tint 随章节主题色
-
+
六章节 tint 变体（播放器区域）
▶
#E0E7FF
@@ -528,6 +526,7 @@

播放器规格

+ @@ -536,9 +535,9 @@

状态转换

-
1default → hover：mouseenter/focus，卡底翻章节淡彩，播放钮 + 胶囊出现，GIF 挂载。
-
2hover → default：mouseleave/blur，还原白卡，GIF 卸载，HTTP 缓存保留。
-
3再次 hover：缓存命中，瞬时恢复播放，无二次流量。
+
1desc → playing：定时 8s 到期，或 hover / Tab 聚焦即时触发；GIF 挂载循环。
+
2锁定：悬停/聚焦期间停在 playing，不翻回；移出后按定时器继续轮换。
+
3playing → desc：定时到期或移出，GIF 卸载、缓存保留，再翻回瞬时恢复。
diff --git a/design-refs/mockup/components.pdf b/design-refs/mockup/components.pdf index c32d43b..80a03fe 100644 Binary files a/design-refs/mockup/components.pdf and b/design-refs/mockup/components.pdf differ diff --git a/design-refs/mockup/course-shelf.html b/design-refs/mockup/course-shelf.html index e0ef6e6..2adbb82 100644 --- a/design-refs/mockup/course-shelf.html +++ b/design-refs/mockup/course-shelf.html @@ -184,8 +184,14 @@ gap: 10px; } .bigcard.media-card { background: #e0e7ff; box-shadow: none; } + .bigcard .zone16x9 { + aspect-ratio: 16 / 9; border-radius: 14px; + background: #f7f7f5; border: 1px solid #ececea; + display: flex; align-items: center; padding: 14px 16px; + font-size: 13.5px; color: #8a8a8a; line-height: 1.6; + } .bigcard .m-player { - height: 190px; border-radius: 14px; background: #e0e7ff; + aspect-ratio: 16 / 9; border-radius: 14px; background: #e0e7ff; display: flex; align-items: center; justify-content: center; position: relative; } .bigcard .m-playbtn { width: 56px; height: 56px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 6px 18px rgba(17,17,17,0.3); } @@ -402,19 +408,17 @@
-

02 卡片解剖 · 默认白卡 → 悬停媒体卡

- 悬停 = 卡内嵌播放器，GIF 循环预期成果 +

02 卡片解剖 · 默认白卡 → 播放态

+ 16:9 预期区定时翻转 desc ⇄ GIF，悬停锁定
-
+
🌐
-
-
快速开始
-
写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
-
+
写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。
16:9 预期区 · desc 常驻，定时 8s 翻转播放 GIF
+
快速开始
前置：无关联：快速开始 React
✓ Completed 🎉 @@ -422,46 +426,45 @@
- -
+ +
▶
⏱ Preview · GIF loop
-
-
快速开始
-
预期成果正在卡内循环播放：浏览器打开第一个网页。
-
+
快速开始
+
预期成果正在预期区循环播放：浏览器打开第一个网页。
⏱ Watching ▶
- - 1 - 2 - 3 - 4 - 5 - 6 - 7 + + 1 + 2 + 3 + 4 + 5 + 6 + 7 -
+

默认白卡要素

-
1彩色圆角图标：每章一个 emoji 图标，淡彩圆角底。
-
2标题 + 预期结果一句话：desc 写「学完能做出什么」。
-
3关系 chips：前置 / 关联章节（关系待列，示例为占位）。
+
1彩色圆角图标：每章一个 emoji，淡彩圆角底。
+
216:9 预期区：desc 常驻（写「学完能做出什么」），定时 8s 自动翻转为播放 GIF。
+
3标题 + 关系 chips：前置 / 关联（示例占位）。
+
4状态胶囊 + 黑圆确认钮：✓ / Upcoming。
-

悬停媒体卡（复刻播放器）

-
4状态胶囊 + 黑圆确认钮：✓ Completed 🎉 / Upcoming，点击进入章节。
-
5淡彩整卡：白卡变为该章主题淡彩底，视觉即「进入预览」。
-
6黑色圆形播放钮 + ⏱ 胶囊：复刻原稿标志元素；此刻才挂载 GIF，移出还原白卡。
+

播放态（定时翻转 / 悬停锁定）

+
5淡彩预期区：翻转为该章主题淡彩播放态。
+
6黑色圆形播放钮 + ⏱ 胶囊：复刻原稿标志元素，此刻才挂载 GIF 循环。
+
7翻转规则：定时 8s 或 hover/Tab 即时翻转并锁定；到期/移出还原 desc，缓存保留。
@@ -473,17 +476,17 @@

03 交互流程 · 触发矩阵 · GIF 资产规范

- 预期成果 GIF = 靶子「预期结果」的非文字化 + 16:9 预期区 · desc ⇄ GIF 定时轮换 · 悬停锁定
-

悬停播放时序

+

翻转播放时序

-
STEP 1
指针进入
mouseenter / focus-visible 触发，白卡翻为淡彩媒体卡。
-
STEP 2
挂载播放器
此刻才渲染 GIF，浏览器按需拉取，首屏零动图流量。
+
STEP 1
定时 / 指针进入
8s 定时到期，或 mouseenter / focus 即时触发，预期区翻为淡彩播放态。
+
STEP 2
挂载播放器
此刻才渲染 GIF，按需拉取；悬停/聚焦期间锁定在播放态。
STEP 3
循环播放
GIF loop=0 自动循环，卡内嵌播放，无控件无声音。
-
STEP 4
移出还原
mouseleave 还原白卡；HTTP 缓存保留，再悬停瞬时恢复。
+
STEP 4
到期 / 移出还原
定时到期或移出还原 desc；GIF 卸载，HTTP 缓存保留。
@@ -493,10 +496,10 @@

触发矩阵

项规格
翻转周期desc 8s ⇄ GIF 8s（flipInterval 可配）；GIF 内部循环
播放钮黑 #111 圆形 · 卡内 44px / 展示 56px · 阴影 0 4px 14px
⏱ 胶囊右上 GIF loop · 左下成果字幕，白底描边胶囊
GIF640×360 · loop=0 · ≤300KB · hover 时才挂载
- + - - + +
设备 / 输入行为
桌面 · 鼠标 hover白卡 → 媒体卡播放预览；点击卡片进入章节。
桌面 · 鼠标 hover即时翻转并锁定 GIF；点击卡片进入章节。
键盘 · Tab focus与 hover 同态（可访问性），Enter 进入章节。
触屏 · 无 hover不做预览态；首次点击直接进入章节，避免误触耗流量。
减弱动效偏好prefers-reduced-motion 时显示静帧，不自动播放。
触屏 · 无 hover不自动翻转；点击直接进入章节，避免误触耗流量。
减弱动效偏好prefers-reduced-motion 时不自动翻转，仅显示 desc。
diff --git a/design-refs/mockup/course-shelf.pdf b/design-refs/mockup/course-shelf.pdf index d502c48..1e7308a 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-3.png b/design-refs/mockup/page-3.png index 9352741..2928bc6 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 920632d..d5cce6c 100644 Binary files a/design-refs/mockup/page-4.png and b/design-refs/mockup/page-4.png differ