技能提升

页面20-skill-courses.html · 技能提升 · 1.1 · 验收见 ⑧ · 分工见 ⓪

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

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

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

接口本页唯一 · GET /courses → 渲染 list_courses · 原型 mock · 完整见 ⑥

⓪ 本页做什么 · 分工速查

一句话：按简历缺口推荐课程；空列表须给用户人话提示（无匹配 / 全站无课两种）；点课进入详情→播放闭环。

• 产品 / 老板：⑧ · 空态 ③④ 文案 · 全站 0 课隐藏入口（PRD Q8 · 详 ⑥）
• 测试：⑧ + 三 Tab（有课/暂无匹配/全站无课）· 联调见 ⑥
• UI：推荐条 + 课程行 · 空态图标 + 主/次 CTA
• 前端：进页 GET /courses · 按 empty_reason 切空态 · 详 ⑥
• 后端：课程 CMS · 缺口标签 · 返回 published_count · 详 ⑥
• 合规：平台托管视频 · 无直播/考试承诺

① 顶栏 · 屏幕最上方

• 返回箭头 → btn_nav_back · 优先 history.back() · fallback 23-assistant-tab.html · index 机模 data-embed-back="shell"
• 「技能提升」 · 顶栏标题 → page_title

② 课程列表 · 有推荐（#list）

• 「根据简历缺口为你推荐课程」 · 灰色小字 · 仅本态展示 → copy_courses_intro
• 「根据你的简历缺口推荐」 · 黄底提示条 · 只展示
• 列表 → list_courses
• 「Excel 数据分析入门」 · 3 章节 · 在线视频 · 缺口：数据分析 · 链详情
• 「Python 自动化小项目」 · 2 章节 · 在线视频
• 「用户增长实战清单」 · 1 章节 · 在线视频
• 「更多课程持续更新」 · 页脚灰色说明 → copy_courses_footer
• 列表行点击 → 21-course-detail.html · 本页无贴底 Tab

③ 暂无缺口匹配 · 全屏（#empty-gap）

• 容器 → state_courses_empty
• 「暂无与你简历缺口匹配的课程」 · 主文案 → copy_courses_empty_title
• 「完善简历或做过 JD 对齐后，推荐会更准」 · 灰色说明 → copy_courses_empty_hint
• 「去优化简历」 · 橙色主按钮 → btn_courses_go_f2 · 链 03-f2-exam.html
• 「返回」 · 次按钮 → btn_courses_empty_back · history.back()
• 何时展示：平台有课 · 本用户/缺口过滤后 items 为空 · 详 ⑥ empty_reason=no_gap_match

④ 全站无课 · 误入兜底（#hidden）

• 容器 → state_courses_hidden
• 「当前暂无课程」 · 主文案 → copy_courses_hidden_title · 不上屏「已发布/CMS」
• 「可以先做简历优化，有新课程时会在这里展示」 · 灰色说明 → copy_courses_hidden_hint
• 「返回首页」 · 次按钮 → btn_courses_go_home · 链 02-home.html
• 何时展示：published_count=0 · 正常应隐藏助手/能力中心入口（PRD Q8）· 深链误入才见本态 · 详 ⑥

⑥ 课程列表 · GET /courses（本页唯一）

说明：列表/空态均由本接口驱动；原型 Tab 演示三态（有课/暂无匹配/全站无课）。课程均为在线视频（无图文/练习章节）。上线 B 端 CMS 维护 · 响应渲染 list_courses 或切换空态容器。替换清单 → dev-notes · 静态 mock → API。

• 何时调
  • 进页 onLoad · 助手/能力中心/职业规划出口进入
  • 可选 query：gap= 简历缺口标签 · 服务端按缺口过滤推荐
  • 全局：published_count=0 → C 端不展示技能/课程入口（PRD Q8）· 详 ④
• 鉴权 · 需登录 · 401 → 登录页
• 响应 → 控件
  • items[] → list_courses 逐行（非空时展示 ②）
  • published_count（number）→ 全站已发布课程总数 · 与 items 区分
  • empty_reason（enum，items 为空时必返）→ 切空态：
    • no_gap_match → state_courses_empty（见 ③）
    • none_published → state_courses_hidden（见 ④）
  • items[].id → 点行进 21-course-detail.html?course_id=
  • items[].title · chapter_count · format · gap_label · cover_url · recommended → 行 UI · 同前
• 响应示例 · 有推荐（与 ② mock 对齐 · 原型 only）
  • { "published_count": 3, "items": [{ "id": "c1", "title": "Excel 数据分析入门", "chapter_count": 3, "format": "video", "gap_label": "数据分析", "recommended": true }, { "id": "c2", "title": "Python 自动化小项目", "chapter_count": 2, "format": "video" }, { "id": "c3", "title": "用户增长实战清单", "chapter_count": 1, "format": "video" }] }
• 响应示例 · 暂无缺口匹配（与 ③ 文案对齐）
  • { "published_count": 5, "items": [], "empty_reason": "no_gap_match" }
• 响应示例 · 全站无课（与 ④ 文案对齐）
  • { "published_count": 0, "items": [], "empty_reason": "none_published" }
• 失败与边界
  • 加载中 → 骨架 · 网络失败 → Toast + 重试 · 不 Toast 羞辱
  • items 空且缺 empty_reason → 前端兜底 state_courses_empty
  • 章节类型：仅 video（B 端上传 mp4 · C 端播放页）

⑦ 入口 · 出口

• 入口：助手 tile_skill_courses · 能力中心 row_unlock_skill_courses · 首页已导出态 tile_skill_courses · 职业规划 link_career_to_courses
• 入口隐藏（PRD Q8）：published_count=0 时上述入口均不展示 · 详 14/23/02/19 ⑥ · 误入本页 → ④ 全站无课
• 出口：21-course-detail.html?course_id= · 经详情 → 38-course-play.html · 空态「去优化简历」→ F2 · 「返回首页」→ 02

⑧ 怎么验收

1. 左右对照：列表三课标题须与 ② 一致 · 空态主文案须与 ③④ 逐字一致。
2. 接口专章：滚到 ⑥ · 可见 empty_reason 两种空态分支 + JSON 示例。
3. 打开：双击 20-skill-courses.html · 三 Tab 可切换（有课/暂无匹配/全站无课）。
4. 暂无匹配：切 Tab · 见「暂无与你简历缺口匹配的课程」+「去优化简历」。
5. 全站无课：切 Tab · 见「当前暂无课程」+「返回首页」· 无顶栏副标题「根据简历缺口…」。
6. 详情：有课态点任一行 → 21-course-detail.html?course_id=c1。
7. 跨页闭环：详情 →「开始学习」→ 38-course-play.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」
• 埋点 · courses_view · course_row_click
• 原型限制：PRD Q8 测试数据 · 正式上线 CMS → launch-static-to-api