课程布局蓝图 · 带响应式标注的线框
一套外壳，两种模式
统一顶栏贯穿所有课程页；浏览模式用网格/详情，学习模式用"两栏课堂式"；小宇 Copilot 学习时驻讲台、浏览时右下浮动——全程有它、随处可问。下面是线框与分区规格。
1
统一顶栏（所有课程页）
上下文与进度永远在场
CODE 小宇宙课程 › 第 1 课课程进度 45%主题退出
左：logo + 面包屑（你在哪门课、哪一节）。中：课程进度条。右：主题 / 退出。不管在浏览还是学习，这条不变。
2
学习模式 · 两栏「课堂式」
左讲台（小宇）· 右工作区（你的书桌）
课程 › 第 1 课 · 写清你的需求老师板主题
讲台 · 小宇（sticky）
问小宇 · Copilot
遇到不懂随时问我什么是核心动作？
工作区 · 6 拍 + 当前步 + 导航
1看2讲3分工4动手5测6讲出
当前步内容
互动区 · 画布 / 判断 / 小测（做完才能继续）
← 上一步第 3 / 9 步下一步 →
讲台（左·sticky）
小宇 语音+字幕+6拍 与 问小宇对话常驻——滚动工作区时老师始终在场，像真实网课。
工作区（右·滚动）
进度拍条 + 当前步内容 + 互动区 + 步骤导航。孩子的"书桌"，一次只专注一步。
互动 gated
动手/小测做完才解锁"下一步"——保证真的动了手，不是划过去。
3
浏览模式 · 网格 / 详情
小宇 右下浮动
课程中心 / 看懂 AI 六讲主题
内容网格（PC 3 列 · 平板 2 · 手机 1）
问小宇
浏览页保持内容优先；小宇缩成右下浮动按钮，点开即问，且知道你正看哪门课——不占版面，但全程在。
4
响应式 · 三档收拢
PC 两栏 → 平板 → 手机堆叠
PC · ≥ 960px
两栏并列
讲台固定在左（sticky），工作区在右滚动。空间用满，老师常驻。
平板 · 600–960
窄两栏 / 讲台收窄
讲台收窄；问小宇可折叠，优先保工作区宽度。
手机 · < 600px
堆叠 · 讲台变顶部小条
讲台收成顶部小宇小条（sticky）；步骤单列；问小宇变右下浮动；导航吸底。
5
分区规格
每个区：作用 · 是否常驻
| 分区 | 作用 | 装什么 | 常驻 |
|---|
| 顶栏 | 上下文 + 进度 | logo · 面包屑 · 课程进度 · 主题 · 退出 | 全站 |
| 讲台（学习） | 老师在场 | 小宇语音/字幕/6拍 · 问小宇对话 | 课时内 sticky |
| 工作区（学习） | 专注做一步 | 拍条 · 当前步内容 · 互动(gated) · 上/下一步 | 随步骤换 |
| 内容网格（浏览） | 探索 / 决策 | 课程卡 / 六讲卡 / 课程详情 | 按页 |
| 小宇 浮动 | 随处可问 | 右下按钮 → 展开对话 | 浏览页 + 手机课时 |
下一步：据此蓝图把
第 1 课 与
通识第 1 讲 重构成两栏课堂式（JS 不动，只换外壳 + 响应式），其余课时页统一沿用。浏览页（课程中心/六讲/课程页）统一顶栏 + 浮动小宇。