能力中心

简历优化

简历摸底

已解锁

文字模拟面试

已解锁

情绪倾听

含表情分析

表情分析采集

语音电梯演讲

挫败急救包

投递受挫时

增长

诊断报告卡

邀请有礼

渠道活动页

活动落地示意

进阶能力

职业规划

技能提升 · 课程

3 门推荐课

成长陪伴

导出简历 PDF 后,更多能力会在这里开放

去优化简历
开发说明 · 能力中心
P-unlock · 方案乙
dev-notes

页面14-unlock-hub.html · 能力中心 · 验收见 ⑧ · 分工见 ⓪

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

展示顺序(按角色 · 章节号固定)

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

接口本页唯一 · GET /user/unlocks → 三列表 · 与 23 助手 Tab 同响应 · 完整见 ⑥

⓪ 本页做什么 · 分工速查

一句话:全站能力清单与解锁状态一览,节点解锁非五 Tab 并列。

  • 产品 / 老板:⑧;PRD §4.1 节点解锁 · 1.0 vs 1.1 分层
  • 测试:⑧ + 混合解锁/全新用户两态 · 各链跳转
  • UI:分组列表 + 解锁态(无 1.1 角标)
  • 前端:unlocks 配置 · 详 ⑥ · 原型/上线差异见 ⑨
  • 合规:情绪/表情/语音模块含非医疗/非录用声明(子页)

① 顶栏 · 屏幕最上方

  • 返回箭头 → btn_nav_back · 优先 history.back() · fallback 23-assistant-tab.html · index 机模 data-embed-back="shell" 回当前 Tab 壳层
    • 图标 · 顶栏内嵌 · 约 14×14(随字号)
    • 资产 · 机模 Font Awesome fas fa-arrow-left · H5 app-image/icons/icon-arrow-left.svg · 小程序 src/assets/icons/icon-arrow-left.svg
    • 着色 · 默认 #E8EDF2 · 单色 SVG
    • 机模 vs 上线 · 机模:Font Awesome fas fa-arrow-left(顶栏 <i>)· 上线:Image + 上文 SVG
  • 「能力中心」 → page_title
  • 页头无副标题 · 不上屏「逐步解锁/主路径」等内部说明

② 主路径能力 · 混合解锁态(#mixed)

列表行图标 · 嵌套含 容器/尺寸/资产/着色/机模与上线/显隐 · 机模左侧为 Font Awesome(网页图标库)· 上线用 app-image/icons/*.svg · 全表 ICON-CATALOG.md §2。

  • 「简历优化」 · 分组小标题 · 只展示 · 无 1.0/1.1 版本后缀 · 列表行无 1.1 角标
  • 列表容器 → list_unlock_main
  • 「简历摸底」 · 已解锁 · 链 03-f2-exam.html
    • 左侧图标 · 容器 span.menu-icon.chip-gold · 约 24×24 / 外框 32×32 · 行内无独立 icon data-spec-id
    • 资产 · 机模 Font Awesome fas fa-stethoscope · H5 app-image/icons/icon-stethoscope-gold.svg · 小程序 src/assets/icons/icon-stethoscope-gold.svg
    • 着色 · 金变体 #F9B400 · 底 chip-gold · 无独立 -active 图
    • 右侧对勾 · fa-check · H5/小程序 icon-check.svg · 色 #F9B400 · 机模无独立 ID
    • 机模 vs 上线 · 机模:Font Awesome fas fa-stethoscope(本行 menu-icon 内 <i>)· 上线:Image + 上文 SVG
    • 显隐 · 混合解锁态常显 · unlock 默认可进 F2
  • 「文字模拟面试」 · 列表行 → row_unlock_f7 · 副文案 「已解锁」 → copy_unlock_f7_hint · 右侧 金色对勾(与摸底一致,禁止灰底「可用」胶囊)→ icon_unlock_f7 · 链 17-f7-interview.html
    • 左侧图标 · 容器 span.menu-icon.chip-blue · 约 24×24 / 外框 32×32
    • 资产 · 机模 Font Awesome fas fa-comments · H5 app-image/icons/icon-comments-blue.svg · 小程序 src/assets/icons/icon-comments-blue.svg
    • 着色 · 蓝变体 #7EB8FF · 底 chip-blue
    • 右侧对勾 · H5/小程序 icon-check.svg · data-spec-id="icon_unlock_f7" · aria-hidden
    • 机模 vs 上线 · 机模:fas fa-comments / fas fa-check · 上线:左图 + 右勾各 Image + SVG
    • 显隐 · unlocks 含 mock_interview 时展示 · 未解锁隐藏行或锁态
  • 「情绪倾听」 · 链 29-emotion-d.html
    • 左侧图标 · 容器 span.menu-icon(默认底)· 约 24×24
    • 资产 · 机模 Font Awesome fas fa-face-smile · H5 app-image/icons/icon-face-smile.svg · 小程序 src/assets/icons/icon-face-smile.svg
    • 着色 · 默认 #E8EDF2 · 单色 SVG
    • 机模 vs 上线 · 机模:Font Awesome(见「资产」行 · 对照左侧 <i class="fas …">)· 上线:Image + 上文 SVG
    • 显隐 · emotion_d 已解锁 · 混合态展示
  • 「表情分析采集」 · 链 36-emoji-capture.html
    • 左侧图标 · 容器 span.menu-icon · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-camera · H5 app-image/icons/icon-camera.svg · 小程序 src/assets/icons/icon-camera.svg
    • 着色 · 默认 #E8EDF2
    • 机模 vs 上线 · 机模:Font Awesome(见「资产」行 · 对照左侧 <i class="fas …">)· 上线:Image + 上文 SVG
    • 显隐 · 随 D/表情模块 unlock · 进页按需 scope.camera(子页 ②)
  • 「语音电梯演讲」 · 链 28-f8-voice.html
    • 左侧图标 · 容器 span.menu-icon · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-microphone · H5 app-image/icons/icon-microphone.svg · 小程序 src/assets/icons/icon-microphone.svg
    • 着色 · 默认 #E8EDF2
    • 机模 vs 上线 · 机模:Font Awesome(见「资产」行 · 对照左侧 <i class="fas …">)· 上线:Image + 上文 SVG
    • 显隐 · f8_voice 已解锁时展示
  • 「挫败急救包」 · 投递受挫时 · 链 30-e5-rescue.html
    • 左侧图标 · 容器 span.menu-icon · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-kit-medical · H5 app-image/icons/icon-kit-medical.svg · 小程序 src/assets/icons/icon-kit-medical.svg
    • 着色 · 默认 #E8EDF2
    • 机模 vs 上线 · 机模:Font Awesome(见「资产」行 · 对照左侧 <i class="fas …">)· 上线:Image + 上文 SVG
    • 显隐 · 通常随投递/受挫场景 unlock · 子页带上下文参数

③ 增长与进阶 · 混合解锁态

  • 增长组 → list_unlock_growth
  • 「诊断报告卡」 · 可点击 · 链 12-share-card.html
    • 左侧图标 · 容器 span.menu-icon · 行内橙字 var(--lux-orange) · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-share-nodes · H5 app-image/icons/icon-share-nodes-orange.svg · 小程序 src/assets/icons/icon-share-nodes-orange.svg
    • 着色 · 橙变体 #FF7710 · 无 chip 底
    • 显隐 · share_card unlock · 混合态展示
  • 「邀请有礼」 · 可点击 · 链 27-invite-g6.html
    • 左侧图标 · 容器 span.menu-icon · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-gift · H5 app-image/icons/icon-gift.svg · 小程序 src/assets/icons/icon-gift.svg
    • 着色 · 默认 #E8EDF2
    • 显隐 · 增长项常显 · 海报页相册授权见 ⑨「邀请有礼」
  • 「渠道活动页」 · 链 18-g2-channel.html
    • 左侧图标 · 容器 span.menu-icon · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-bullhorn · H5 app-image/icons/icon-bullhorn.svg · 小程序 src/assets/icons/icon-bullhorn.svg
    • 着色 · 默认 #E8EDF2
    • 显隐 · 增长项常显 · Hero 图为 CMS 另字段(18 ⑥)
  • 进阶组 → list_unlock_v11 · 职业规划 · 技能提升课程 · 成长陪伴
  • 「职业规划」 · 链 19-career-plan.html
    • 左侧图标 · 容器 span.menu-icon.chip-blue · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-route · H5 app-image/icons/icon-route-blue.svg · 小程序 src/assets/icons/icon-route-blue.svg
    • 着色 · 蓝变体 #7EB8FF · chip-blue
    • 显隐 · career_plan unlock
  • 「技能提升 · 课程」 · 列表行 · 副文案「3 门推荐课」→ row_unlock_skill_courses · 链 20-skill-courses.html
    • 左侧图标 · 容器 span.menu-icon.chip-gold · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-graduation-cap · H5 app-image/icons/icon-graduation-cap-gold.svg · 小程序 src/assets/icons/icon-graduation-cap-gold.svg
    • 着色 · 金变体 #F9B400 · chip-gold
    • 机模 vs 上线 · 机模:Font Awesome(见「资产」行 · 对照左侧 <i class="fas …">)· 上线:Image + 上文 SVG
    • 显隐 · 须 skill_courses + published_count>0 · published_count=0 → 不渲染本行(原型 mock 仍展示)
    • 业务规则详 ⑥ · 20-skill-courses ⑥
  • 「成长陪伴」 · 链 22-growth-diary.html
    • 左侧图标 · 容器 span.menu-icon · 约 24×24
    • 资产 · 机模 Font Awesome fas fa-seedling · H5 app-image/icons/icon-seedling.svg · 小程序 src/assets/icons/icon-seedling.svg
    • 着色 · 默认 #E8EDF2
    • 显隐 · growth_diary unlock

④ 全新用户锁态 · 全屏(#locked)

  • 锁图标 · 装饰 · 只展示 · 约 36×36 居中
    • 资产 · 机模 Font Awesome fas fa-lock · H5 app-image/icons/icon-lock.svg · 小程序 src/assets/icons/icon-lock.svg
    • 着色 · 灰 opacity-30 机模样式 · SVG 默认 #E8EDF2
    • 显隐 · 仅 #locked 全屏态 · 混合态不展示
  • 「导出简历 PDF 后,更多能力会在这里开放」 · 主文案 · 只展示 → copy_locked_hint
  • 「去优化简历」 · 橙色主按钮 → btn_go_f2_locked · 链 F2

⑤ 本页无贴底 Tab

列表点击即跳转子能力页。

⑥ 能力解锁 · GET /user/unlocks(本页唯一 · 与 02/23 共用)

说明:主路径/增长/1.1 三列解锁态来自本接口;原型 Tab 演示 mock。上线渲染 list_unlock_main · list_unlock_growth · list_unlock_v11。替换清单 → dev-notes · 静态 mock → API。

  • 何时调 · 进页 · 导出 PDF / 主路径节点后返回可刷新
  • 鉴权 · 需登录
  • 响应→控件 · unlocks[] 或 features.{key}.unlocked · 每项含 id · title · locked · hint
  • 课程入口 · 与 20-skill-courses 联动(PRD Q8)
    • 进页可与 GET /courses 并行(或 unlocks/BFF 响应含 published_count)
    • published_count=0 → 不渲染 row_unlock_skill_courses · 误入 20 见 state_courses_hidden(20 ④)
    • published_count>0 且 skill_courses 已解锁 → 展示本行 · 副文案可读推荐条数(非写死「3 门」)
    • 有课但缺口无匹配 → 仍展示入口 · 进 20 由 empty_reason=no_gap_match 展示 20 ③
  • 与进度 · 可合并 progress_step · 未解锁显示 copy_locked_hint
  • 失败与边界 · 加载骨架 · 401 跳登录

⑦ 入口 · 出口

  • 入口:我的 · 助手「完整能力列表」
  • 出口:各子能力 HTML(摸底/面试/情绪/邀请有礼/渠道/职业规划等)

⑧ 怎么验收

  1. 左右对照:混合解锁态「简历摸底」「文字模拟面试」等条目须与 ② 一致;已解锁行右侧为 金色对勾,无「可用」灰胶囊。
  2. 图标细版:展开 ② 任一条(如「文字模拟面试」)· 嵌套可见 H5/小程序文件名、24×24、mock_interview 显隐。
  3. 接口专章:滚到 ⑥ · 可见 GET /user/unlocks 与三列表容器映射。
  4. 打开:双击 14-unlock-hub.html · 两态 Tab 可切换。
  5. 跳转:逐一点主路径/增长/1.1 行 · 目标页可打开。
  6. 锁态:切「全新用户」· 见锁图标 +「去优化简历」。
  7. 跨页:助手 Tab 入口文案与能力中心列表份数一致 · published_count=0 时 14/23 均隐藏课程行/宫格 · 与 20-skill-courses ⑥ 一致。
  8. 不上屏:增长列表须为「诊断报告卡」「邀请有礼」· 无 G1/G6 后缀;分组标题为「简历优化」· 无「· 1.0」。

⑨ 团队补充

  • 图标资产(第一批) · 真源 app-image/ICON-CATALOG.md · 本页列表图标见 §2 能力中心 · 底栏 Tab 见 §1 · 文件在 app-image/icons/ · app-image/tab/(选中 *-active.svg)· 用法 app-image/README.md
  • 图标资产(第二批) · 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」
  • 图标 · 本页查法(细版):②③④ 嵌套含 容器/尺寸/资产(H5+小程序)/着色/挂载/显隐 · 改图同步 ICON-CATALOG.md §2 · 小程序路径约定见 app-image/README.md
  • 内部代号映射(仅研发 · 禁止写入机模标题):G1 → 诊断报告卡 · G6 → 邀请有礼 · G2 → 渠道活动页 · 对照 unlocks[].id
  • 1.1 能力分期 · 内部 unlocks / feature flag · 机模禁止 badge-v11 与可见「1.1」· 未开放 → 锁/隐藏
  • 埋点 · unlock_hub_view · unlock_item_click(附 item_id)
  • 原型限制:解锁标签静态 · 机模图标为 Font Awesome · 正式上线读 GET /user/unlocks + 课程 published_count → launch-static-to-api(研发)· 空态 UI 真源 20-skill-courses.html ③④

悬停可交互控件会出现黄框对照 ID。说明正文可点击改字(仅本浏览器临时草稿,点「恢复默认」还原);永久修改请用 Cursor 改本 HTML 源文件。