职业助手

页面23-assistant-tab.html · 助手 Tab · 验收见 ⑧ · 分工见 ⓪

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

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

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

接口本页唯一 · GET /user/unlocks → 控制 state_locked_assistant / grid_assistant_tiles · 原型 Tab 演示两态 · 完整见下方 ⑥

⓪ 本页做什么 · 分工速查

一句话：第四 Tab「助手」——导出 PDF 后开放的扩展能力宫格（非 F1～F7 五能力 Tab 并列）。

• 产品 / 老板：⑧ · 已解锁/新用户两态 · PRD 节点解锁 · 助手 Tab ≠ 五能力 Tab 并列
• 测试：⑧ + 8 宫格跳转 · 锁态引导 F2 · 与首页 tool_grid_* 解锁规则一致
• UI：页头 + 黄底提示条 + 2 列 8 宫格 + 底部 Tab
• 前端 / 后端：GET /user/unlocks → 锁态/宫格 · 详 ⑥ · 与 02-home.html 共用同一响应
• 增长：「完整能力列表」→ 能力中心 14

① 页头 · 屏幕顶部

• 「职业助手」 · 大字标题 · 只展示 → page_title
• 页头无副标题 · 已解锁说明见 ② 黄条 · 锁态说明见 ③ · 避免「主路径」等内部词上屏

② 已解锁态 · 提示条 + 能力宫格（#unlocked）

宫格图标 · 嵌套含 容器/尺寸/资产/着色/机模与上线/显隐 · 机模为 Font Awesome · 上线用 app-image/icons/*.svg · 全表 ICON-CATALOG.md §3。

• 「导出 PDF 后更多能力已开放」 · 黄底提示条 · 只展示 → copy_unlock_banner
  • 上线：用户至少导出过一次 PDF 后展示；未导出时整页切锁态（见 ③）
• 宫格容器 → grid_assistant_tiles · 2 列 8 项 · 由 GET /user/unlocks 控制各 tile 可见/可点 · 详 ⑥ · 各宫格「机模 vs 上线」同「模拟面试」（机模 Font Awesome · 上线 SVG）
• 「模拟面试」 · 蓝色图标 · 可点击 → tile_f7_interview · unlock mock_interview · 链 17-f7-interview.html · 与首页 tool_grid_interview 同规则
  • 宫格图标 · 容器 span.tile-icon.chip-blue（或项目宫格 class）· 约 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 · 无独立 -active 图
  • 机模 vs 上线 · 机模：Font Awesome（见「资产」· 宫格内 <i class="fas …">）· 上线：Image + 上文 SVG
  • 显隐 · has_exported + mock_interview · 未解锁置灰或隐藏 tile
• 「投递追踪」 · 金色图标 · 可点击 → tile_f6_apply · unlock apply_track · 链 13-f6-apply.html · 与 tool_grid_apply 同规则
  • 宫格图标 · 容器 chip-gold · 约 24×24
  • 资产 · 机模 Font Awesome fas fa-paper-plane · H5 app-image/icons/icon-paper-plane-blue.svg · 小程序 src/assets/icons/icon-paper-plane-blue.svg
  • 着色 · 文件名含 blue · 底 chip-gold（与 14 投递图标文件共用）
  • 显隐 · apply_track unlock
• 「诊断报告卡」 · 橙色图标 · 可点击 → tile_g1_share · unlock share_card · 链 12-share-card.html · 与 tool_grid_share_card 同规则
  • 宫格图标 · 容器默认底 · 约 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
  • 显隐 · share_card unlock
• 「职业规划」 · 可点击 → tile_career_plan · unlock career_plan · 链 19-career-plan.html
  • 宫格图标 · 容器 chip-blue · 约 24×24
  • 资产 · 机模 Font Awesome fas fa-route · H5 app-image/icons/icon-route-blue.svg · 小程序 src/assets/icons/icon-route-blue.svg
  • 显隐 · career_plan unlock
• 「技能课程」 · 可点击 → tile_skill_courses · unlock skill_courses · 链 20-skill-courses.html
  • 宫格图标 · 容器 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
  • 显隐 · skill_courses + published_count>0 · published_count=0 → 隐藏 tile_skill_courses（原型 mock 常显）· 详 ⑥
• 「成长日记」 · 可点击 → tile_growth_diary · unlock growth_diary · 链 22-growth-diary.html
  • 宫格图标 · 约 24×24
  • 资产 · 机模 Font Awesome fas fa-seedling · H5 app-image/icons/icon-seedling.svg · 小程序 src/assets/icons/icon-seedling.svg
  • 显隐 · growth_diary unlock
• 「语音演练」 · 可点击 → tile_f8_voice · unlock f8_voice · 链 28-f8-voice.html
  • 宫格图标 · 约 24×24
  • 资产 · 机模 Font Awesome fas fa-microphone · H5 app-image/icons/icon-microphone.svg · 小程序 src/assets/icons/icon-microphone.svg
  • 显隐 · f8_voice unlock · 子页麦克风按需授权
• 「情绪倾听」 · 副文案 「文字倾听 · 免费」 → tile_desc / tile-desc · 可点击 → tile_emotion_d · unlock emotion_d · 链 29-emotion-d.html
  • 宫格图标 · 约 24×24 · 与 14 列表不同图
  • 资产 · 机模 Font Awesome fas fa-leaf · H5 app-image/icons/icon-leaf.svg · 小程序 src/assets/icons/icon-leaf.svg（14 用 icon-face-smile.svg）
  • 显隐 · emotion_d unlock
• 「完整能力列表」 · 底部居中链接 · 可点击 → link_unlock_hub · 链 14-unlock-hub.html · 无宫格图标

③ 新用户锁态 · 全屏（#locked）

• 锁态容器 → state_locked_assistant · 未导出 PDF / unlocks 为空时展示
• 锁图标 · 只展示 · 装饰 · 约 36×36
  • 资产 · 机模 Font Awesome fas fa-lock · H5 app-image/icons/icon-lock.svg · 小程序 src/assets/icons/icon-lock.svg
  • 显隐 · 仅 #locked · has_exported=false 时整页
• 「先做完简历优化并导出 PDF」 · 灰色主文案 · 只展示 → copy_locked_hint
• 「去优化简历」 · 橙色主按钮 · 可点击 → btn_go_f2 · 链 03-f2-exam.html（步骤 1/7 摸底）

④ 底部 Tab 栏 · 左→右

• 「首页」 → tab_home · 02-home.html
  • Tab 图标 · H5 源 app-image/tab/tab-home.svg · 选中 tab-home-active.svg
  • 小程序 · 导出 PNG 81×81（@1x）· app.json iconPath / selectedIconPath
  • 着色 · 未选 #94A3B8 · 选中 #F9B400（--lux-gold）
  • 机模 vs 上线 · 机模 Tab 为 Font Awesome · 上线 TabBar 用 PNG（由上文 SVG 导出）
• 「简历」 → tab_resume · 15-resume-list.html
  • Tab 图标 · H5 app-image/tab/tab-resume.svg · 选中 tab-resume-active.svg
  • 小程序 · PNG 81×81 · 路径同名导出
• 「助手」 · 当前高亮 → tab_assistant · 本页
  • Tab 图标 · H5 app-image/tab/tab-assistant.svg · 选中 tab-assistant-active.svg（本 Tab 高亮）
  • 小程序 · PNG 81×81 · 选中态走 selectedIconPath
• 「我的」 → tab_me · 10-me.html
  • Tab 图标 · H5 app-image/tab/tab-me.svg · 选中 tab-me-active.svg
  • 小程序 · PNG 81×81

⑤ 本页无贴底主 CTA

Tab 壳层页 · 宫格点击即跳转子能力页；锁态 CTA 居中。

⑥ 能力解锁 · GET /user/unlocks（本页唯一 · 与 02 首页共用）

说明：原型 HTML 静态展示「已解锁/新用户」两 Tab；上线由本接口决定锁态 vs 宫格，以及各 tile_* 可见/可点。与首页 tool_grid_* 读同一响应，导出 PDF 后须 revalidate。替换清单 → dev-notes · 静态 mock → API。

• 何时调
  • Tab 切到「助手」onShow · 列表未缓存
  • 08 导出 PDF 成功 · 从主路径返回 · 下拉刷新
  • 与首页共用缓存 · 避免重复请求（SWR / 小程序 globalData）
• 鉴权 · 需登录 · 401 → 跳 01-landing-login.html · 成功后回跳本 Tab
• 响应 → 控件
  • has_exported（boolean，或 infer 自 unlocks 非空）→ 无导出 → 展示 state_locked_assistant（③）；已导出 → 展示 copy_unlock_banner + grid_assistant_tiles（②）
  • unlocks[]（string[]）→ 各 tile_* 与首页 tool_grid_* 锁/解锁：
    • mock_interview → tile_f7_interview · tool_grid_interview
    • apply_track → tile_f6_apply · tool_grid_apply
    • share_card → tile_g1_share · tool_grid_share_card
    • career_plan → tile_career_plan
    • skill_courses → tile_skill_courses
    • growth_diary → tile_growth_diary
    • f8_voice → tile_f8_voice
    • emotion_d → tile_emotion_d
  • 1.1 能力 · 另读 feature flag / 版本 gating · 未开则 tile 置灰或隐藏
• 响应示例（原型「已解锁」态 mock · 对齐 ② 八宫格全开）
  • { "has_exported": true, "unlocks": ["mock_interview", "apply_track", "share_card", "career_plan", "skill_courses", "growth_diary", "f8_voice", "emotion_d"] }
• 响应示例（原型「新用户」锁态）
  • { "has_exported": false, "unlocks": [] }
• 失败与边界
  • 加载中 → 骨架屏 state_assistant_loading（可选）
  • 网络/5xx → Toast + 保留上次缓存 · 失败时偏保守展示锁态
  • 部分 unlock → 未解锁 tile 置灰 + 「导出后解锁」小字（对齐首页工具箱）
  • 课程宫格 · 与 20-skill-courses 联动
    • Tab onShow 并行 GET /courses（或 unlocks 含 published_count）
    • published_count=0 → 隐藏 tile_skill_courses · 与 14 row_unlock_skill_courses · 02 已导出态「技能课程」齐套
    • published_count>0 + skill_courses 已解锁 → 展示 · 列表空/无匹配在 20 页处理（empty_reason）
  • 未登录不调接口 → 跳登录或锁态

⑦ 入口 · 出口

• 入口：底部 Tab「助手」· 首页「查看全部能力」link_all_tools → 本页
• 出口：8 宫格各子能力页 · 「完整能力列表」→ 14-unlock-hub.html · 锁态「去优化简历」→ F2 摸底
• index 机模：换态 Tab 须关说明 · 再开滚到 data-spec-state 对应章节（已解锁/新用户）

⑧ 怎么验收

1. 无 1.1 角标：机模区不得出现 badge-v11 或可见「1.1」版本角标 · 能力分期见 ⑨ / feature flag。
2. 左右对照：默认「已解锁」态 · 页头「职业助手」+ 黄条「导出 PDF 后更多能力已开放」+ 8 宫格标题须与 ② 逐字一致。
3. 图标细版：展开 ②「技能课程」或 ④「助手」Tab · 可见 published_count 隐藏规则 · Tab PNG 81×81 说明。
4. 接口专章：打开说明滚到 ⑥，可见 GET /user/unlocks 何时调、字段→grid_assistant_tiles / 锁态、与首页联动。
5. 打开：Finder 双击 23-assistant-tab.html 或 index.html 机模「助手」Tab（file:// 即可）。
6. 跳转：默认 8 宫格可点 · 「模拟面试」→ 17 · 「技能课程」→ 20 · 「完整能力列表」→ 14。
7. 锁态：Tab「新用户」→ 锁图标 + 「先做完简历优化并导出 PDF」+ 「去优化简历」→ F2。
8. Tab：底部「助手」高亮 · 其它三 Tab 可切换。
9. 跨页：首页工具箱「查看全部能力」→ 本页 · 导出 PDF 后首页 tool_grid_* 与本页 tile 解锁规则一致（见 ⑥）· 课程入口隐藏规则与 20-skill-courses ⑥ 一致。

⑨ 团队补充

• 图标资产（第一批） · app-image/ICON-CATALOG.md · 宫格见 §3 助手 Tab · 底栏 Tab 见 §1 · 与 14-unlock-hub 同名图标共用 icons/icon-*.svg
• 图标资产（第二批） · 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」
• 图标 · 本页查法（细版）：② 宫格 · ④ Tab · 嵌套含 H5/小程序路径/尺寸/显隐 · 同步 ICON-CATALOG.md §3 §1
• 埋点 · assistant_tab_view · assistant_tile_click（附 tile_id）· assistant_locked_go_f2 · assistant_hub_link
• 不上屏：PRD 节点解锁 / 五 Tab 并列等内部 IA · 仅 ⑨ / dev-notes
• 原型限制：两态 Tab 静态切换 · 未真调 unlocks API · 宫格图标为 Font Awesome · 课程宫格 mock 常显 · 正式上线接 published_count → launch-static-to-api（研发）· 空态真源 20-skill-courses.html

字段/API 见 dev-notes · 助手 Tab；首页联动见 02-home.html ⑥。