语音电梯演讲

页面28-f8-voice.html · 语音电梯演讲 · F8 · 1.1 · 验收见 ⑧ · 分工见 ⓪

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

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

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

接口本页共 2 步 · ASR 转写 → display_voice_transcript · 通义点评 → display_voice_feedback · 详 ⑥

⓪ 本页做什么 · 分工速查

一句话：60 秒自我介绍录音 → 先展示转写原文再 AI 点评，帮助用户对照「说了什么」。

• 产品 / 老板：⑧ · 录音完成率 ≥60% · 转写+点评两步呈现（缓解紧张忘词）
• 测试：⑧ + 待录音/录音中/点评三态 · 贴底「按住说话」拇指区
• UI：Hero 引导 + 贴底主按钮 · 点评态「你说的是」+「AI 点评」双卡
• 前端：录音贴底 · ASR 回填转写 · 点评态隐藏 bar_f8_record · 详 ⑥
• 合规：copy_f8_disclaimer「非录用承诺」· 麦克风按需授权（见 ② 点击规则 · ⑨ 技术栈）

① 顶栏 · 屏幕最上方

• 返回箭头 → btn_nav_back · 优先 history.back() · fallback 23-assistant-tab.html · index 机模 data-embed-back="shell" 回当前 Tab 壳层
• 「语音电梯演讲」 · 顶栏标题 · 无 1.1 角标 → page_title
• 不在用户界面展示：供应商/ASR/TTS 等技术栈文案 · 仅写 ⑨ · PRD §11.1 隐私政策说明第三方即可

② 待录音态 · 主内容 + 贴底按钮（#ready）

• 麦克风圆形图标区 · 只展示
• 「60 秒介绍你自己」 · 主文案 → copy_f8_prompt
• 「基于简历生成演练题目 · 建议说满约 40 秒」 · 副文案 → copy_f8_subhint · 后台可配
• 贴底操作区 → bar_f8_record（待录音/录音中显示 · 点评态隐藏）
  • 「按住说话」 · 橙色主按钮 · 全宽贴底 → btn_hold_record
    • 点击/按住时 · 麦克风授权（PRD §11.1 · 非进页预授权 · 小程序/H5 均无默认授权）
      • 首次按下：先查权限 → 未授权则弹系统授权框（须在用户手势内触发）
      • 小程序：wx.getSetting · scope.record → 未授权 wx.authorize；用户曾拒绝 → wx.showModal 说明用途 + wx.openSetting 引导开启 · 未授权则不开始录音
      • H5：navigator.mediaDevices.getUserMedia({ audio: true }) · 拒绝 → Toast「需要麦克风才能演练」+ 可选说明链隐私政策 · 不 silent fail
      • 已授权：进入录音中态 · 开始计时 · 埋点 f8_record_start
      • 用户拒绝：停留待录音态 · 不羞辱文案 · 可再次点击重试 · 埋点 f8_mic_denied
  • 「拇指区域 · 按住开始 · 松开结束」 · 灰色小字 → copy_hold_hint

③ 录音中态 · 钟表刻度计时 + 贴底按钮（#recording）

• 「录音中」 · 橙色小标题 → copy_recording_label
• 钟表刻度盘 → display_recording_timer · 容器 state_recording
  • 外圈 60 格 · 参考钟表：每 5 格略长 · 1/16/31/46 格（整点方位）最长 · 从 12 点顺时针
  • 主录音区 · 第 1–40 格 · 细刻度 · 高亮 橙色
  • 缓冲带 · 第 41–60 格（尾部 20 秒）· 刻度 灰白（未录淡灰 · 已录亮白）· 无扇形遮罩
  • 循环：每满 60 秒外圈重新从第 1 格点亮 · 中心累计 1→299 · 第 2 圈起右上角 ×2
  • 圈内秒数 → copy_recording_seconds · 原型 mock 42
• 「松开结束 · 有效时长需 ≥60% 题目时长」 · 灰色提示 → copy_recording_hint
• 贴底区仍展示 bar_f8_record · 按钮文案可切「松开结束」（上线）

④ AI 点评态 · 转写 + 点评（#feedback）

• 双卡色差 · 避免两坨纯白长文 · 长文区 max-height 可滚
  • 「你说的是」 · 转写卡 → display_voice_transcript · 冷灰调（左灰条 + 灰底 + 浅灰字）· 标题 → copy_transcript_label · 正文 → copy_voice_transcript
  • 「AI 点评」 · 点评卡 → display_voice_feedback · 暖橙调（左橙条 + 浅橙底 + 暖白字）· 标题 → copy_feedback_label · 正文 → copy_voice_feedback
  • 产品规则：必须先展示转写，再 AI 点评 · 两卡视觉须一眼可区分
• 「非录用承诺」 · AI 徽章 → copy_f8_disclaimer
• 本态 隐藏 bar_f8_record

⑤ 贴底主操作 · 待录音/录音中

bar_f8_record 使用 fixed-bottom-bar · 对齐微信/WhatsApp 语音习惯 · 点评态不展示。

⑥ 语音演练 · 本页共 2 步（ASR + 点评）

说明：无列表类 REST；录音上传 → 讯飞 ASR → 通义点评。原型静态三 Tab；上线按序渲染转写卡与点评卡。

• ① ASR 转写（讯飞 · 录音结束后）
  • 何时调：松开结束且有效时长 ≥60% 题目时长
  • 响应 → 控件：transcript（string）→ copy_voice_transcript
  • 响应示例 · 对齐 ④ mock 首句「我是张小雨…」
  • 失败：转写失败 → Toast + 保留音频可重试 · 不进入点评态
• ② AI 点评（通义 · 转写成功后）
  • 请求：转写文本 + 简历摘要 + 演练题目
  • 响应 → 控件：feedback（string）→ display_voice_feedback
  • 失败：仍展示转写卡 · 点评区 Toast「点评暂不可用，请稍后重试」
• 演练题目 · 进页由简历摘要生成 · 写入 copy_f8_prompt 副文案区（后台可配）

⑦ 入口 · 出口

• 入口：助手 Tab tile_f8_voice · 能力中心 F8
• 出口：点评后返回 · 可链 F7 模拟面试

⑧ 怎么验收

1. 左右对照：待录音态顶栏无讯飞/通义等技术小字 · 仅「60 秒介绍你自己」+ 贴底「按住说话」。
2. 拇指区：「按住说话」在屏幕底部 fixed 栏，非居中悬浮。
3. 按住交互：待录音态按住按钮 → 切录音中 · 刻度走秒 · 按钮变「松开结束」；松开 → 点评态双卡 + Toast「转写与点评已生成」。
4. 录音中：细刻度 · 1–40 格橙 · 41–60 缓冲灰白 · 无盘下图例 · mock 42 秒（Tab 演示）。
5. 点评态：转写卡冷灰 · AI 卡暖橙 · 两卡可区分 · 长文可滚 · 其下「非录用承诺」。
6. 接口专章：滚到 ⑥ · 见 ASR→转写、通义→点评两步。
7. 打开：双击 28-f8-voice.html · 三态 Tab 可切换。
8. 跨页：助手 Tab「语音演练」入口 → 本页 · 转写 mock 人名与演示简历张小雨一致。

⑨ 团队补充

• 图标资产（第二批） · 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」
• 技术栈（仅研发 · 不上屏） · 讯飞 ASR/TTS · 通义点评 · 密钥甲方供 · 隐私政策列第三方（PRD §11.1）
• 埋点 · f8_record_start · f8_record_done · f8_transcript_view · f8_feedback_view · f8_mic_denied · f8_mic_open_settings
• 原型限制：mock 按住走态 · 不真调麦克风/ASR · 正式上线 按 ② 接授权与讯飞/通义 · → launch-static-to-api