分段初稿

页面04-f4-draft.html · 分段初稿（主路径第 2 步 / 共 7 步）· 验收见 ⑧ · 分工见 ⓪

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

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

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

接口本页共 3 个 · PATCH /resume/sections/{module_key} · POST /ai/f4/generate · GET /resume/{id}/sections · 完整见下方 ⑥

⓪ 本页做什么 · 分工速查

一句话：按教育/实习/项目/技能/其他五模块填写简历初稿，可 AI 润色，保存后进入 JD 对齐。

• 产品 / 老板：⑧；默认教育模块；教育/实习首字段必填；跳过 F2 也可直达本页
• 测试：⑧ + Tab 切换表单 + 末模块「完成初稿」去 JD
• UI：模块 Tab 横向滚动；底栏贴底
• 前端 / 后端：POST /ai/f4/generate · 5 点/模块 · dev-notes · F4 · 自动保存 开放项

① 顶栏 · 屏幕最上方

• 「←」返回箭头 · 顶栏左侧 · 可点击 → btn_nav_back
  • 一般回到「简历摸底」；从首页「跳过体检」进来则回首页
  • 无浏览历史 fallback：03-f2-exam.html
• 「分段初稿」 · 顶栏标题大字 · 只展示
• 「步骤 2/7 · 模块 N/5」 · 顶栏进度小字 → label_step_progress
• 「AI」 · 顶栏右侧合规标签 · 只展示 → copy_ai_disclaimer

② 基本信息 · 模块 Tab 上方（全模块共用）

• 容器 → form_profile_basic · 写入 profile · 每字段独占一行 · 预览/PDF 副标题由求职目标 + 城市 + 打码手机 + 打码邮箱拼接
• 「张小雨」 · 姓名 → input_profile_name
  • 长度：1～30 字 · maxlength="30"
  • 格式：纯文本 · trim · 不含换行
  • 为空：留空点「下一模块」→ 红框 · 无 Toast
• 「13812345678」 · 手机号 · 在线预览/PDF 展示为 138****5678 → input_profile_phone
  • 长度：11 位 · maxlength="11"
  • 格式：数字 · inputmode="tel" · 保存前 trim
  • 为空：留空点「下一模块」→ 红框 · 无 Toast
• 「zhangxiaoyu@163.com」 · 邮箱 · 在线预览/PDF 展示为 z***@163.com → input_profile_email
  • 长度：1～100 字 · maxlength="100"
  • 格式：type="email" · trim · 不含空格
  • 为空：留空点「下一模块」→ 红框 · 无 Toast
• 「上海」 · 期望城市 → input_profile_city
  • 长度：1～30 字 · maxlength="30"
  • 格式：纯文本 · trim
  • 为空：留空点「下一模块」→ 红框 · 无 Toast
• 「产品运营 · 应届生」 · 求职目标 → input_profile_target
  • 长度：1～50 字 · maxlength="50"
  • 格式：纯文本 · trim · 预览/PDF 单独一行展示
  • 为空：留空点「下一模块」→ 红框 · 无 Toast
• 与 33-resume-preview · 07-e2-hr-preview mock 齐套 · 真源 _f4-prototype.js · PROFILE_DEFAULTS

③ 模块 Tab · 标题下方横向标签

• 「教育」 · 胶囊 Tab · 左图标 + 文案 · 可点击 → tab_module_education · 图标 icon_module_education · 资产 app-image/icons/icon-module-education.svg
• 「实习」 · 可点击 → tab_module_internship · icon_module_internship · icon-module-internship.svg
• 「项目」 · 可点击 → tab_module_project · icon_module_project · icon-module-project.svg
• 「技能」 · 可点击 → tab_module_skills · icon_module_skills · icon-module-skills.svg
• 「其他」 · 可点击 → tab_module_other · icon_module_other · icon-module-other.svg
• 容器 → tab_module · 横向可滑动；切换 Tab 换表单 · 选中态金底胶囊 + 图标不透明（详 §18）

④ 表单区 · 当前模块输入项（标签随 Tab 变）

• 容器 → form_module_fields；切换 Tab 时标签/占位/示例同步切换，各模块数据分存
• 模块描述多行框 → input_bullets（各模块共用 · 切换 Tab 换 label/placeholder）
  • 长度：1～2000 字 · maxlength="2000" · 教育/实习/项目等模块描述
  • 格式：纯文本 · 换行保留 · 保存/润色前 trim 首尾空白
  • 为空：当前模块必填项（如教育学校）留空点「下一模块」→ 对应红框 · 无 Toast
  • 非空提交后：点「下一模块」校验通过 → 切下一 Tab · 末模块「完成初稿」→ 05-jd-paste.html · AI 润色成功 → 回填本框可再编辑
• 教育：学校 → input_company · 学历/专业各占一行（input_degree · input_major）· 开始/结束时间各占一行
  • 长度（input_company）：1～100 字 · maxlength="100"
  • 格式：纯文本 · trim · 组织/学校名
  • 为空：教育模块学校留空点「下一模块」→ 红框 · 无 Toast
• 实习：支持多条实习（btn_add_entry）· 每条公司 → input_company（动态）· 职位 → input_position · 时间/描述
  • 长度（input_position）：1～100 字 · maxlength="100"
  • 格式：纯文本 · trim
  • 为空：实习模块公司/职位留空点「下一模块」→ 红框 · 无 Toast
• 项目：支持多条项目 · select_project_org 关联实习公司或「个人/校内项目」
• 技能：仅「技能与工具」多行
• 其他：默认可跳过 · 空态 state_other_empty ·「+ 添加其他经历」才展开表单；无内容可直接「完成初稿」
• 多段列表 → list_f4_entries；时间合成 input_period；可勾选「至今」
• 字段 ID：input_degree · input_major · select_project_org · input_project_name · input_project_role
• 必填项留空点「下一模块」→ 对应输入框红框，无 Toast
• 停输 3 秒自动保存（静默）；切 Tab 前 flush 当前模块

「AI 润色」· 模块表单下方按钮

• 「AI 润色」 · 卡片内按钮 · 消耗 5 点 · 可点击 → btn_ai_polish_module
• 字段非空且额度够 → POST /ai/f4/generate；成功扣 5 点，失败不扣

⑤ 贴底按钮栏 · 屏幕最底部

• 容器 → bar_f4_actions
• 「保存草稿」 · 底栏左 · 可点击 → btn_save_draft
  • 立即保存 + HUD「已保存」；平时停输 3 秒自动保存（静默）
• 「下一模块」/「完成初稿」 · 底栏右主按钮 · 可点击 → btn_next_module
  • 校验通过切下一 Tab；末模块文案变「完成初稿」→ 05-jd-paste.html

⑥ 分段初稿 · 本页共 3 个接口

说明：表单默认值为 _f4-prototype.js 静态 mock（张小雨演示简历）；上线进页拉 GET 回填各模块，保存/润色走写接口。替换清单 → dev-notes · 静态 mock → API。

• ① PATCH /resume/sections/{module_key} · 分模块保存
  • 何时调：停输 3 秒防抖 · 切换 Tab 前 flush · 点 btn_save_draft · 小程序 onHide / H5 visibilitychange
  • 鉴权：需登录 · 401 → 跳登录回跳本页
  • 请求：resume_id · module_key（education/internship/project/skills/other）· 模块结构化字段 → form_module_fields / list_f4_entries
  • 响应示例（教育模块 mock）：{ "module_key": "education", "company": "某某大学", "degree": "本科", "major": "市场营销", "period": "2020.09—2024.06" }
  • 边界：无变更不发请求 · AI loading 临时预览不入库
• ② POST /ai/f4/generate · 当前模块 AI 润色（5 点/模块）
  • 何时调：点 btn_ai_polish_module · 当前模块必填非空 · 额度充足 · 非 loading
  • 入参：resume_id · module_key · 当前模块结构化字段
  • 出参：润色后 bullets → 回填 input_bullets 等；用户可再编辑
  • 扣点：仅 AI 成功扣 5 点；失败/超时不扣 → state_ai_error
• ③ GET /resume/{id}/sections · 续编拉取各模块草稿
  • 何时调：列表续编进入 · 401 后回跳再拉 · 可选客户端缓存
  • 响应 → 控件：profile → form_profile_basic（name · phone · email · city · target）· 各 module_key → 对应 Tab · 演示数据须与 E2/33/08 齐套
  • profile 示例：{ "name": "张小雨", "phone": "13812345678", "email": "zhangxiaoyu@163.com", "city": "上海", "target": "产品运营 · 应届生", "headline": "产品运营 · 应届生 · 上海 · 138****5678 · z***@163.com" }
• 失败与边界：额度不足 → 引导充值；网络/5xx → Toast + 自动保存静默重试

⑦ 入口 · 出口

• 入口：F2 结果「去改简历」、F2/首页「跳过」、简历列表续编
• 出口：末模块「完成初稿」→ 05-jd-paste.html；← fallback 03-f2-exam.html
• index 机模经 F2 进入；本页 ← 回 F2，不设直接回 Tab 首页

⑧ 怎么验收

1. 左右对照：基本信息「张小雨」+ 手机 + 邮箱 +「产品运营 · 应届生 · 上海」须与 ② 一致；教育 mock（某某大学 · 本科 · 市场营销）须与 ⑥ 及 _f4-prototype.js 一致；模块 Tab 五个胶囊左侧均可见小图标（教育/实习/项目/技能/其他）。
2. 接口专章：打开说明滚到 ⑥，可见 PATCH/POST/GET 三接口何时调、字段映射与失败边界。
3. 打开：Finder 双击 04-f4-draft.html，或 index 经 F2「跳过」进入。
4. 实习/项目：默认 1 条；添加/删除后已填年月不得清空；项目所属公司下拉含实习 Tab 公司。
5. 必填：教育清空学校点「下一模块」→ 红框；技能清空 → 红框。
6. 保存：点「保存草稿」→ HUD「已保存」；其他模块空态可直接「完成初稿」。
7. 跨页：完成初稿 → JD 页；← 回摸底页；基本信息与 33-resume-preview 副标题齐套（含打码手机 · 打码邮箱）。

⑨ 团队补充

• 图标资产（第二批） · 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」
• 埋点 · draft_done（附 modules_filled · duration_sec）
• 版本策略：自动保存 3s 防抖 · 切 Tab flush → 开放项
• 原型限制：自动保存内存 mock · AI 润色 mock · 演示真源 _f4-prototype.js → mock-resume-demo · 正式上线 → launch-static-to-api

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