Excel 数据分析入门

页面21-course-detail.html · 课程详情 · 验收见 ⑧ · 分工见 ⓪

阅读方式：每条先写界面上是什么，再写元素 ID 与接口。

展示顺序（按角色 · 章节号固定）

• 产品 / 老板：⓪ → ①～⑤ → ⑧
• 测试：⑧ → ①～⑤ → ⑦
• 研发：接口速查 → ①～⑤ → ⑥ → ⑦
• UI：①～⑤（图标路径在控件下）
• 数据 / 增长：⑨ → ⑥
• 多态页：③ 内分态 · ⑥⑦⑧⑨ 号不变

接口本页唯一 · GET /courses/{id} → 目录/阅读区 · 原型 mock · 完整见 ⑥

⓪ 本页做什么 · 分工速查

一句话：单门课程封面、简介与章节目录；可学章节均为视频，点击进入 38-course-play 播放。

• 产品 / 老板：⑧ · 列表→详情→播放闭环 · B 端 CMS 上传维护
• 测试：⑧ 含跨页路径 · 联调见 ⑥ GET /courses/{id}
• UI：顶图 + 信息卡 + 章节目录 + 主 CTA
• 前端：进页 course_id · _course-prototype.js 跳转播放 · 详 ⑥
• 后端：CMS 单课 + 章节 · 视频上传腾讯云点播 · 详 ⑥ · 播放凭证见 38 playback 接口
• 合规：平台托管内容 · 非纯外链跳转

① 顶栏 · 屏幕最上方

• 返回箭头 → btn_nav_back · 优先 history.back() · fallback 20-skill-courses.html
• 「Excel 数据分析入门」 · 小字标题 → page_title

② 封面与简介 · 主内容上部

• 课程封面图 · 全宽 · 只展示
• 「推荐」 · 「推荐」胶囊 · 只展示
• 「面向运营岗 · 补齐简历「数据分析」关键词」 · 简介 · 只展示
• 「在线观看 · 内容由平台提供」 · 灰色小字 → copy_course_video_hint

③ 章节目录 · 主内容中部

• 「章节目录」 · 小节标题 · 只展示
• 目录列表 → list_course_chapters
• 「第1课 透视表快速上手」 · 12:30 · 视频 · 可点击 · 进 38-course-play.html?chapter_id=ch1
• 「第2课 活动数据复盘模板」 · 锁定 · 点击 Toast「该章节尚未解锁」
• 「第3课 活动复盘小结」 · 视频 · 已解锁可点 · 进播放页

④ 贴底主 CTA

• 「开始学习」 · 橙色主按钮 → btn_start_course · 进 38-course-play.html 首章（chapter_id=ch1）

⑤ 本页无多态 Tab

单课详情 · 章节锁定/解锁由 CMS 控制。

⑥ 课程详情 · GET /courses/{id}（本页唯一）

说明：封面、简介、章节目录来自 GET · 章节 type 仅 video。视频由 B 端 CMS 上传维护。原型 HTML/JS mock；上线渲染目录与播放页。替换清单 → dev-notes · 静态 mock → API。

① GET /courses/{id} · 进页拉取课程与章节

• 何时调：从 20-skill-courses 进详情 · URL course_id · 无 id 回列表
• 鉴权 · 需登录 · 401 → 登录页
• 响应 → 控件
  • title → page_title
  • cover_url → 顶图
  • summary · video_hint → 信息卡
  • chapters[] → list_course_chapters · id · locked · type（video）
  • chapters[0].id → btn_start_course 默认首章播放
• 响应示例（与 ②③ mock 对齐 · 原型 only）
  • { "id": "c1", "chapters": [{ "id": "ch1", "type": "video", "locked": false }, { "id": "ch2", "type": "video", "locked": true }, { "id": "ch3", "type": "video", "locked": false, "title": "第3课 活动复盘小结" }] }

⑦ 入口 · 出口

• 入口：20-skill-courses.html 列表行 · 带 course_id
• 出口：38-course-play.html · btn_start_course 或可播章节 · 返回列表经顶栏

⑧ 怎么验收

1. 无 1.1 角标：机模区不得出现 badge-v11 或可见「1.1」版本角标 · 能力分期见 ⑨ / feature flag。
2. 跨页闭环：20 点课 → 本页 → 点「开始学习」 → 38-course-play.html · 播放器区非空。
3. 左右对照：标题与第1课文案须与 ②③ 一致。
4. 接口专章：滚到 ⑥ · 可见 GET /courses/{id} 与章节字段。
5. 目录：点第1课行 → 进入播放页。
6. 锁定：点第2课 → Toast「该章节尚未解锁」。
7. 视频章：点「第3课…」→ 进入 38-course-play · 播放器非空。
8. 深链（可选）：?course_id=c1&chapter_id=ch3 进页自动展开阅读区。
9. 返回：顶栏 → 20-skill-courses.html。

⑨ 团队补充

• 图标资产（第二批） · app-image/ICON-CATALOG.md · 全站通用 §7 · 上传 §8 · 品牌 §9 · 本页见 §10 索引表
• 图标资产（第三批） · app-image/ICON-CATALOG.md · 状态栏 §11 · 增长/分享 §12 · 表单/附件 §13 · 法务 §14 · 订单/空态 §15 · 媒体/语音 §16 · 本页见 §10
• 图标资产（第四批） · app-image/ICON-CATALOG.md · F4 模块 §18 · 状态徽章 §19 · 弹窗/加载 §20 · 联系打码 §21 · 折叠/更多 §22 · 文件类型 §23 · 分享装饰 §24 · 账号 §25 · 本页见 §10
• 分期与排期 · 产品/研发见 launch-static-to-api · 开发说明 ②～⑦ 不写「阶段 N」
• 埋点 · course_detail_view · course_start
• 原型限制 · _course-prototype.js · 静态 mp4 · 上线 playback · 链 launch-static-to-api · 仅 video 章节