AI 简历优化

页面02-home.html · 产品首页 · 底部 Tab「首页」。说明顺序 = 界面自上而下 · 验收见 ⑧ · 分工见 ⓪

阅读方式：每条先写界面上长什么样、能不能点，再写元素 ID 与接口；鼠标悬停页面控件会出现黄框对照 ID。

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

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

接口本页共 3 个读接口 · GET /wallet/balance · GET /user/unlocks · GET /resume/progress · 原型 HTML 写死 mock，上线接 API · 完整见下方 ⑥

⓪ 本页做什么 · 分工速查

一句话：App 首页枢纽——引导用户开始优化简历，并提供工具箱、邀请、四 Tab 导航。

• 产品 / 老板：⑧ 验收；主 CTA 进摸底；锁定工具导出后解锁
• 测试：⑧ + 顶栏状态 Tab 切换四态（新用户/进行中/已导出/每日赠送）
• UI：①～⑥ 各块视觉与文案
• 前端 / 后端：三读接口 · GET /wallet/balance → label_energy_balance 等 · 详 ⑥ · dev-notes · 首页
• 运营 / 市场：社会证明数字 label_social_proof 后台可配；邀请条文案对齐邀请有礼页

① 顶栏（屏幕最上方一行）

• 品牌文案 · 左侧两行 · 只展示不可点
  • 「AI 个人职业发展助手」 · 上行灰色小字 → ID：label_brand_subtitle
  • 「AI 简历优化」 · 下行白色大字 → ID：label_brand_title
• 「28 点」能量余额 · 右侧黄底胶囊 · 闪电图标 · 可点击
  • ID：label_energy_balance
  • 点击 → 充值页 09-pay.html
  • 数字来源：GET /wallet/balance；原型可写示例数，正式上线勿写死
  • 顶栏小图标 · 约 14×14 · 胶囊内左侧
    • 资产 · 机模 Font Awesome fas fa-bolt · H5 app-image/icons/icon-bolt.svg · 小程序 src/assets/icons/icon-bolt.svg
    • 着色 · 金 #F9B400 · 与胶囊文案同色
    • 机模 vs 上线 · 机模：<i class="fas fa-bolt"> · 上线：Image + SVG

② 主视觉 Hero 大卡片（新用户默认屏 · index 左侧机模固定此态）

• 「AI 生成仅供参考」 · 合规标签 · 卡片内左上角 · 只展示 → copy_ai_disclaimer
• 「15 分钟，拿到敢投递的简历」 · 主标题 · 只展示 → hero_title（文案可 A/B）
• 「简历摸底 → 分段初稿 → …」 · 副标题 · 主路径步骤 · 只展示 → hero_subtitle
• 「开始优化简历」 · 橙色主按钮 · 可点击
  • ID：hero_cta_start
  • 已登录 → 简历摸底 03-f2-exam.html（步骤 1/7）
  • 未登录 → 登录页 01-landing-login.html
  • index 机模内点击时自动带嵌入参数（便于返回首页）
• 「已有 12,480+ 位求职者完成初稿」 · 社会证明一行小字 · 只展示 → label_social_proof
  • 数字后台可配；上线前法务/运营确认

③ 宫格与快捷入口（按用户态 · 与机模 state-panel 对齐）

图标怎么查：每个控件下 缩进子列表（spec-sub）写 容器/尺寸/资产(H5+小程序)/着色/显隐 · 全表 ICON-CATALOG.md §5 · index 机模默认 新用户 · 顶栏状态 Tab 可切进行中/已导出 · 详 dev-notes · 首页其它态。

③·新用户 · 求职工具箱（#new · index 默认）

• 「我的简历」 · 宫格① · 可点击 → tool_grid_resume
  • 副文案「2 份草稿」· 读 GET /resumes 条数（原型 mock 对齐 15 列表）
  • 点击 → Tab「简历」15-resume-list.html
  • 宫格图标 · span.tile-icon.chip-gold · 约 40×40
  • 资产 · 机模 fas fa-folder-open · H5 app-image/icons/icon-folder-open-gold.svg · 小程序 src/assets/icons/icon-folder-open-gold.svg
  • 着色 · 金底 chip-gold
• 「投递追踪」 · 宫格② · 带锁 · 暂不可点 → tool_grid_apply
  • 资产 · 机模 fas fa-paper-plane · H5 app-image/icons/icon-paper-plane.svg · 小程序同名
  • 显隐 · 锁至 apply_track unlock · 已导出态见下节蓝变体
• 「模拟面试」 · 宫格③ · 带锁 → tool_grid_interview
  • 资产 · 机模 fas fa-comments · H5 app-image/icons/icon-comments.svg · 小程序同名
  • 显隐 · 锁至 mock_interview unlock · 已导出态见下节 icon-microphone-lines.svg
• 「诊断报告卡」 · 宫格④ · 带锁「导出后解锁」 → tool_grid_share_card
  • 资产 · 机模 fas fa-chart-pie · H5 app-image/icons/icon-chart-pie.svg · 小程序同名
  • 显隐 · share_card unlock · 已导出态见下节橙变体

③·进行中 · 快捷入口（#progress）

• 「编辑初稿」 · 宫格 · 可点击 → 链 04-f4-draft.html（无独立 data-spec-id · 与进度条同屏）
• 「编辑初稿」图标
  • 资产 · 机模 fas fa-pen · H5 app-image/icons/icon-pen.svg · 小程序 src/assets/icons/icon-pen.svg
  • 着色 · chip-blue
• 「粘贴 JD」 · 宫格 · 灰/待解锁 · 链 05-jd-paste.html
  • 资产 · 机模 fas fa-briefcase · H5 app-image/icons/icon-briefcase.svg · 小程序同名

③·已导出 · 快捷区 + 职业助手（#exported）

• 「已拥有可投递 PDF」 · 顶部摘要卡 · 只展示 · 左侧大勾
  • 资产 · 机模 fas fa-circle-check · H5 app-image/icons/icon-circle-check-gold.svg · 小程序同名
  • 着色 · 金色 text-accent
• 「下载 PDF」 · 宫格 · 可点击 → 08-export-pdf.html
  • 资产 · 机模 fas fa-download · H5 app-image/icons/icon-download.svg · 小程序同名
  • 着色 · chip-gold
• 「诊断报告卡」 · 宫格 · 可点击 → 12-share-card.html · 副文案「分享前打码」
  • 资产 · 机模 fas fa-share-nodes · H5 app-image/icons/icon-share-nodes-orange.svg · 小程序同名
  • 着色 · 橙底 rgba(255,119,15,0.2) · 与 23 助手宫格一致
• 「投递追踪」 · 宫格 · 可点击 → 13-f6-apply.html
  • 资产 · 机模 fas fa-paper-plane · H5 app-image/icons/icon-paper-plane-blue.svg · 小程序同名
  • 着色 · chip-blue
• 「模拟面试」 · 宫格 · 可点击 → 17-f7-interview.html
  • 资产 · 机模 fas fa-microphone-lines · H5 app-image/icons/icon-microphone-lines.svg · 小程序同名
  • 着色 · 蓝底 rgba(0,46,159,0.4)
• 「职业规划」 · 职业助手区宫格 · 可点击 → 19-career-plan.html
  • 资产 · 机模 fas fa-route · H5 app-image/icons/icon-route-blue.svg · 小程序同名
  • 着色 · chip-blue
• 「技能课程」 · 宫格 · 可点击 → 20-skill-courses.html → tile_skill_courses
  • 资产 · 机模 fas fa-graduation-cap · H5 app-image/icons/icon-graduation-cap-gold.svg · 小程序同名
  • 着色 · chip-gold
  • 显隐 · published_count=0 时隐藏整格 · 详 ⑥ · 与 14/23 一致
• 「成长日记」 · 宫格 → 22-growth-diary.html
  • 资产 · 机模 fas fa-seedling · H5 app-image/icons/icon-seedling.svg · 小程序同名
• 「全部能力」 · 宫格 → 14-unlock-hub.html
  • 资产 · 机模 fas fa-table-cells · H5 app-image/icons/icon-table-cells.svg · 小程序同名
• 「针对新 JD 再对齐」 · 灰按钮 · 链 06-f1-align.html · 无宫格图标专章

④ 「查看全部能力」· 宫格下方居中蓝色链接

• ID：link_all_tools
• 点击 → Tab「助手」23-assistant-tab.html

⑤ 底部区 · 邀请条 + Tab 栏

• 「邀请有礼」 · 横条 · 可点击 → banner_invite
  • 点击 → 27-invite-g6.html（文案对齐 PRD §9 Q11）
  • 左侧装饰 · 原型 emoji 🎁 · 上线可换 CMS 小图或 icon-gift.svg
  • 右侧箭头 · 机模 fas fa-chevron-right · H5 app-image/icons/icon-chevron-right.svg · 小程序同名
• 底部 Tab 栏 · nav.tab-bar · 四 Tab 共用资产 · 详 ICON-CATALOG.md §1
  • 「首页」 · 当前高亮 → tab_home · 02-home.html
    • Tab 图标 · H5 app-image/tab/tab-home.svg · 选中 tab-home-active.svg
    • 小程序 · PNG 81×81 · iconPath / selectedIconPath
    • 机模 · fas fa-house · 选中色 #F9B400
  • 「简历」 → tab_resume · 15-resume-list.html
    • Tab 图标 · H5 app-image/tab/tab-resume.svg · 选中 tab-resume-active.svg
    • 机模 · fas fa-file-lines
  • 「助手」 → tab_assistant · 23-assistant-tab.html
    • Tab 图标 · H5 app-image/tab/tab-assistant.svg · 选中 tab-assistant-active.svg
    • 机模 · fas fa-wand-magic-sparkles
  • 「我的」 → tab_me · 10-me.html
    • Tab 图标 · H5 app-image/tab/tab-me.svg · 选中 tab-me-active.svg
    • 机模 · fas fa-user
  • 机模 vs 上线 · 机模 Tab 为 Font Awesome · 上线 TabBar 用 PNG（由 §1 SVG 导出）

⑥ 首页枢纽 · 本页共 3 个读接口

说明：右上角「28 点」、工具宫格锁态、进行中进度条均为静态 mock；上线分别由下列读接口渲染对应控件。替换清单 → dev-notes · 静态 mock → API。

• ① GET /wallet/balance · 能量点余额
  • 何时调：进页 onLoad / Tab 切到首页且未缓存 · 充值/消费成功后 revalidate
  • 鉴权：需登录 · 401 → 跳登录
  • 响应 → 控件：balance（number）→ label_energy_balance 如「28 点」
  • 响应示例：{ "balance": 28 }
  • 失败与边界：网络/5xx → Toast + 保留上次缓存；未登录不调或展示默认引导
• ② GET /user/unlocks · 能力解锁态
  • 何时调：进页 · PDF 导出成功后 · 下拉刷新
  • 响应 → 控件：unlocks[]（如 share_card · apply_track · mock_interview）→ tool_grid_* 锁/解锁
  • 响应示例：{ "unlocks": ["share_card"] }（未导出时为空数组，宫格④带锁）
  • 失败与边界：失败时保持锁态 · 导出 PDF 后须 revalidate 本接口
  • 课程宫格 · 联动 20-skill-courses（PRD Q8）
    • 已导出态「职业助手」区 tile_skill_courses · 与 23/14 同规则
    • 并行读 GET /courses（或 BFF 含 published_count）· published_count=0 → 隐藏该宫格
    • 有课无缺口匹配 → 仍展示 · 进 20 由 empty_reason 展示 20 ③
• ③ GET /resume/progress · 主路径进度（进行中态）
  • 何时调：首页切到「进行中」用户态 · 从主路径步骤返回
  • 响应 → 控件：progress_step · progress_percent → step_progress_bar · 继续 CTA 文案
  • 响应示例：{ "progress_step": "f4", "progress_percent": 42, "title": "产品运营 · 秋招版" }
  • 失败与边界：无进行中简历 → 展示新用户 Hero 默认态（index 预览固定新用户态）

⑦ 入口 · 出口

• 入口：登录成功默认页 · 底部 Tab「首页」· 各页返回壳层
• 出口：主 CTA「开始优化简历」→ F2 摸底（未登录 → 01 登录）；工具箱「我的简历」→ Tab 简历；邀请条 → 邀请有礼；能量点 → 09 充值
• index 机模：点「开始优化简历」→ 摸底页；摸底 ← 应回首页（非空白页）；默认只展示「新用户」态 · 其它三态见 dev-notes · 首页其它态

⑧ 怎么验收

1. 无 1.1 角标：机模区不得出现 badge-v11 或可见「1.1」版本角标 · 能力分期见 ⑨ / feature flag。
2. 左右对照：Hero 主标题「15 分钟，拿到敢投递的简历」、右上角「28 点」、社会证明「已有 12,480+ 位求职者完成初稿」须与 ② 开发说明一致。
3. 接口专章：打开说明滚到 ⑥，可见三读接口何时调、字段→控件、失败边界。
4. 打开：Finder 双击 index.html 或 02-home.html（file:// 即可）。
5. 主路径：点「开始优化简历」→ 摸底页 → ← 回首页（index 左侧机模内测）。
6. 能量点：点「28 点」→ 充值页；悬停应出现黄框 label_energy_balance。
7. 工具箱：「我的简历」副文案「2 份草稿」与 15 列表 mock 份数一致。
8. 图标 · 已导出态：顶栏切「已导出」→ 开发说明滚到 ③·已导出 · 「下载 PDF」等宫格下可见 app-image/icons/icon-download.svg 等路径。
9. 课程联动：开发说明 ⑥ 可见 published_count 隐藏规则 · 与 20-skill-courses ⑥ 一致（原型已导出 Tab 仍展示「技能课程」宫格）。

⑨ 团队补充

• 图标资产（第一批） · app-image/ICON-CATALOG.md · 工具箱/宫格见 §5 首页 · 底栏 Tab 见 §1 · 顶栏能量点 icon-bolt.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」
• 图标 · 本页查法（细版）：③⑤ 各控件下缩进子列表 即路径 · 改图同步 ICON-CATALOG.md §1 §5 · 小程序约定 app-image/README.md
• 埋点 · home_view · hero_cta_click · tool_grid_click（附 tool_id）
• 合规：登录页「登录即表示同意」；首次 AI 在 F2 弹协议确认 → 开放项
• 原型限制：能量点写死示例数；解锁态/进度未接读接口 · 课程宫格 mock 常显 · 正式上线 → launch-static-to-api · 空态真源 20-skill-courses.html

字段/API 见 dev-notes · 首页；UX 见 mkq产品规则 · UX。