粘贴目标 JD

页面05-jd-paste.html · 粘贴 JD（主路径第 3 步 / 共 7 步）· 验收见 ⑧ · 分工见 ⓪

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

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

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

接口本页唯一 · POST /resume/jd · 保存后进 F1 · 完整见下方 ⑥

⓪ 本页做什么 · 分工速查

一句话：用户粘贴或上传截图目标岗位 JD，保存后进入 JD 镜像对齐（F1，消耗 10 能量点）。

• 产品 / 老板：⑧；JD 必填（文字或截图 OCR 二选一）；意向岗位选填；对齐前须已有初稿
• 测试：⑧ + 空 JD 红框 + 乱码失败态 + 截图上传 + **20000 字截断与 Toast**
• UI：上传区 + 大文本框 + 贴底主按钮（交互参照 F2 上传区）
• 前端 / 后端：POST /resume/jd → F1 · dev-notes · JD
• 已拍板：上限 **20000 字**，超出截断 + 提示「不能超出 20000 字」→ 开放项

① 顶栏

• 「←」返回箭头 · 顶栏左侧 · 可点击 → btn_nav_back
  • fallback 04-f4-draft.html
• 「粘贴目标 JD」 · 顶栏标题 · 只展示 → page_title
• 「步骤 3/7」 · 顶栏进度小字 → label_step_progress
• 「AI」 · 顶栏右侧合规标签 · 只展示 → copy_ai_disclaimer

② 引导文案

• 「粘贴岗位描述，或上传招聘页截图…」 · 引导说明 · 只展示 → copy_jd_intro

③ 输入区 · 可滚动

• 「上传 JD 截图」 · 虚线按钮 · 可点击 → btn_upload_jd_image（JPG/PNG/WebP 等）
  • 隐藏文件选择 → input_jd_image
  • 规则：最多 3 张；选后 **自动压缩**（长边≤2048 · 压后≤2MB · 见 开放项）；原选 ≤10MB；超出 Toast
• 已选截图列表 · 缩略图 + 文件名 + 删除 × → list_jd_attachments
• 格式提示小字 → copy_jd_upload_hint（有附件后变为「已添加 N 张…」）
• 「或粘贴文字」 · 分隔线 · 下方多行框
  • 容器 → zone_jd_input（空校验红框作用域，同 F2 zone_f2_input）
  • JD 多行框 → input_jd_text
    • 长度：1～20000 字 · 超出截断 + Toast「不能超出 20000 字」· 右下角 「0/20000」 → label_jd_counter
    • 格式：纯文本 · trim · 不解析 HTML · 可与 OCR 截图合并
    • 为空：文字与截图均无 → 红框 · 无 Toast · 仅有截图可 OCR 后提交
    • 非空提交后：校验通过点「开始 JD 对齐」→ 保存 mock · 跳转 06-f1-align.html · 失败见乱码态
• 「意向岗位（选填）」 · 单行输入 → input_target_role
  • 长度：0～50 字 · maxlength="50"
  • 格式：纯文本 · trim · 不含换行
  • 选填：可不填 · 点「开始 JD 对齐」时不红框
• 纯乱码/无效 → msg_jd_invalid · 「无法识别有效岗位描述」

④ 贴底按钮

• 容器 → bar_jd_actions
• 「开始 JD 对齐 (10点)」 · 橙色主按钮 · 可点击 → btn_start_f1
  • 校验通过（文字或截图 OCR）+ 有初稿 + 额度够 → 06-f1-align.html
  • 仅截图：原型 mock OCR 填入示例 JD 后跳转

⑤ 已保存 / 失败态 · 评审 Tab 切换

• 「JD 已保存」 · 绿色提示条（含截图列表示意）
• 校验失败 · 红框 + 行内错误文案

⑥ 粘贴 JD · POST /resume/jd（本页唯一）

说明：校验与 OCR 合并为前端 mock；上线保存走本接口，成功带 jd_id 进 F1。10 能量点在 F1 align 扣，本页不扣。替换清单 → dev-notes · 静态 mock → API。

• 何时调
  • 点 btn_start_f1 且校验通过（文字或截图 OCR 至少一项 · 非乱码 · 已有初稿 · 额度够进 F1）
  • 保存成功后再跳转 F1；同一份 JD 已保存且未改可带 jd_id 避免重复 POST
• 鉴权 · 需登录 · 401 → 跳登录
• 请求 → 控件
  • resume_id · 当前简历
  • jd_text（1～20000 字）→ input_jd_text；超出截断 + Toast「不能超出 20000 字」
  • target_role（≤50，可选）→ input_target_role
  • attachment_ids[] · 截图 OCR 合并 → list_jd_attachments · btn_upload_jd_image（图片自动压缩见 upload-compress）
• 响应示例：{ "jd_id": "jd_001", "jd_text": "…岗位描述全文…" }
• 失败与边界
  • 无文字无附件 → 红框 zone_jd_input，不调 API
  • 纯乱码 → 行内 msg_jd_invalid「无法识别有效岗位描述」
  • 无初稿 → Toast 引导回 F4

⑦ 入口 · 出口

• 入口：F4 末模块「完成初稿」
• 出口：JD 保存成功 → 06-f1-align.html?from=jd（F1 页内再调 POST /ai/f1/align）；← fallback 04-f4-draft.html

⑧ 怎么验收

1. 左右对照：顶栏「粘贴目标 JD」、贴底「开始 JD 对齐 (10点)」、字数「0/20000」须与 ①～④ 开发说明一致。
2. 接口专章：打开说明滚到 ⑥，可见 POST /resume/jd 何时调、字段→控件、OCR/截断与失败边界。
3. Finder 双击 05-jd-paste.html 或从 F4 末模块进入。
4. 文字与截图均空 → 点「开始 JD 对齐」→ 红框校验。
5. 上传 1～3 张截图（无需粘贴）→ 可进入 F1（原型 OCR mock）。
6. 粘贴有效中文 JD → 可进入 F1；粘贴 asdf !!! →「无法识别有效岗位描述」。
7. 粘贴超 20000 字 → 自动截断 + Toast；← 应回 F4。

⑨ 团队补充

• 图标资产（第二批） · 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」
• 埋点 · jd_paste（附 jd_length）
• 已拍板：上限 20000 字截断 + Toast → 开放项
• 原型限制：仅截图时 mock OCR 填入示例 JD；无真实 POST · 小程序选图须 compressImage 对齐 H5 · 正式上线 → launch-static-to-api

字段/API 见 dev-notes · JD。