商务英语口语提升工作台

Overview

按本技能规格生成一个单文件 HTML 的商务英语口语提升工作台（目标用户：IELTS 5.5 水平学习者）。全站零依赖：所有 CSS/JS/图标内联，不引任何外部框架/CDN/字体/图表库；图表用内联 SVG 手写；数据存 localStorage；PC/手机双适配，手机可添加到桌面当 APP。

参考实现：C:\Users\chenx\WorkBuddy\2026-08-10-11-17-49\ielts-business-oral.html（约318KB，6栏目 + 折叠助教完整版）。新生成时不必逐行照抄，但必须满足下方"核心规格"。

使用时机（触发词）

用户提到以下任一意图时加载本技能：
- 搭建/做一个"英语口语学习台 / 口语提升工作台 / 雅思口语台 / 商务英语练习台"
- "背单词 + 复习系统 + 模拟场景对话"的学习类网页应用
- "跟读""隐藏英文""口说翻译练习""AI口语私教""每日新闻学英语"
- 需要"可复制提示词"把该工作台复刻到其他智能体（ChatGPT/Claude/豆包等）

生成工作流程

1. 确认人群与模块（1-2 轮内）：
   - 默认按本规格的 6 栏目生成；若用户是新场景（如考研/考公/母婴），按"工作台搭建师"规范选 3-4 个核心模块，不强行套用。
   - 问清：目标水平（默认 IELTS 5.5）、每日新词量（默认30）、主色（默认蓝），其余用默认值兜底。
2. 生成单文件 HTML：
   - 严格满足"铁律"（见 references/workbench-spec.md 第一节）：localStorage 前缀 wb_ielts_oral_、首屏导出/导入按钮、清空二次确认、今天要处理置顶（逾期标红+一键处理）、预置3-5条示例数据、全内联零外链、图标内联 SVG 非 emoji、系统字体栈、手机单列/按钮≥44px/输入框字号≥16px/safe-area。
3. 6 栏目按本规格实现（数据模型见 references/workbench-spec.md 第二节）：
   - ① 单词学习：每日30新词，每词 6 个记忆块（记忆宫殿/图形记忆/五官记忆/词组记忆/例句记忆/商务场景），可折叠卡片，TTS 跟读按钮，一键把今天全部标记为已学会（批量标记后当天即可进复习）。
   - ② 复习系统：Leitner 间隔 [1,2,4,7,14,30] 天；选择题模式 + 口说翻译模式（中文→英文，语音识别，说错提醒纠错，高频错句进次日 oralMistakes 优先复习）。
   - ③ 商务对话：≥3 场景 × 13-15 句（周会/价格谈判/项目汇报），每日只展示1个场景按 (day-1)%len 轮换，可前后翻看；每句含说话人/en/cn/跟读按钮；隐藏英文按钮（看中译英）；句末核心词汇可点击加入明日学习。
   - ④ 新闻学习：每日 8 条国际新闻摘要（科技/金融/社会/地缘），每条 3-4 句 + 生词表；逐句 TTS 跟读 + 中文翻译开关 + 隐藏英文按钮；<span class="kw"> 标出生词。
   - ⑤ 口语私教：6 个商务场景 AI 对练，TTS 提问 + 语音识别应答（也支持文字输入 coachText），引导用已学词汇（coachUsedWords 跟踪），轮次评分。实时纠错：correctEnglish() 规则纠错引擎（25+条规则：第三人称单数、过去式含句尾时间词、完成时、情态动词、冠词 a/an、不可数名词、there be、how to say、be+动词、many/much、people 复数等），应答中含错即在 coachCorr 区给出正确版本 + 原因 + 修正后句子，再引导继续对话；同一错误说错≥2次自动进明日待学（recordCoachError）。
   - ⑥ 生活口语：15 个细分生活场景（衣食住行等），结构同商务对话，含隐藏英文按钮。
4. 折叠英语助教（随时呼叫）（必须实现）：
   - 悬浮按钮 #asstFab + 可折叠窗口 #asstWin（默认 closed 类隐藏），随时呼叫；文本输入 #asstInput 或语音（toggleAssistantMic 电话模式：识别结束后自动重启识别实现连续对话）。
   - 双模式切换 #asstModeTutor/#asstModeBf：学习助教模式（查词/翻译/发音/学习计划/纠错）与男友模式（boyfriendReply：外国男友人设，模仿人类对话增进感情，甜腻称呼 + 情绪回应，每次回复穿插 1 个 DAILY_LIFE_WORDS 生活用品词 30+ 个：kettle/toaster/microwave/pillow/wardrobe 等，学地道日常口语）。
   - 助教回复带纠错卡片（correctEnglish 结果 extraHtml 渲染 .corr-card）；recordErrorWord() 把经常说错的词进明日待学。
   - 对话历史存 data.assistantChat（wb_ielts_oral_ 前缀 key），刷新不丢；跟读按钮 assistantRepeat。
5. AI 引擎 — 多厂商 OpenAI 兼容（必须实现）：
   - 不绑死任何一家，默认 base URL 留空示例，让用户自填或一键切到预设 5 家厂商之一：
   • DeepSeek — https://api.deepseek.com（默认推荐，便宜好用）
   • 智谱 BigModel — https://open.bigmodel.cn/api/paas/v4
   • 月之暗面 Kimi — https://api.moonshot.cn/v1
   • 通义千问 DashScope（OpenAI 兼容模式） — https://dashscope.aliyuncs.com/compatible-mode/v1
   • OpenAI — https://api.openai.com/v1
   • 自定义 / OpenRouter / 其他中转 — 留空让用户手填
   • 设置面板提供一个 select/radio 切换服务商，选中后自动填「API 地址」+「推荐模型名」两个输入框，用户只需粘贴 Key 即可。
   • callAI(messages) 函数统一走 OpenAI Chat Completions 协议（POST /v1/chat/completions，Header Authorization: Bearer <Key>，Body {model, messages, max_tokens, temperature, response_format?}）；不限厂商，谁都能跑。
   • 用户没填 Key / 没启用开关 → AI 分支自动跳过，降级到本地规则引擎与关键词匹配（绝不让没配 Key 的用户卡住）。
   • 测试连接给通用错误提示（"密钥无效""网络失败"），不引申到具体厂商充值文案。
6. 全局交互（必须全部实现）：
   - 口音切换：头部 #accentUs/#accentGb 或 .accent-ctrl，setAccent('en-US'|'en-GB') 持久化 wb_ielts_oral_accent；pickVoice() 按口音选 TTS voice（en-GB 优先 British/UK，en-US 优先 American/US），makeUtterance() 统一创建 utterance。
   - 发音纠错：口说复习/私教/助教语音识别结果过 recordPronErrors()，同一词发音说错≥2次进明日待学（data.pronErrors）。
   - 已学词汇复现条：对话/新闻/生活三个栏目各有一个 .learned-strip（renderLearnedStrip），展示最近 14 个已学词 chip，点击朗读——学过的词反复出现记得更牢；助教回复经 weaveLearnedWord() 随机穿插已学词。
   - 悬停/点击查词：buildTipDict() 例句词典（词库自动构建 + 手工迷你词典），渲染后自动高亮词典词 .tipw（MutationObserver），触屏纯点击（IS_TOUCH）→ 立即弹词卡；PC 鼠标悬停 2 秒弹词卡 / 悬停整句 300ms 弹整句翻译；词卡含单词+音标+中文+例句+朗读按钮，关闭×按钮；触屏设备完全绕开 mouseover/mouseout 模拟事件，改纯 click。HTML 转义走 esc() 工具函数（防单/双引号 + 反斜杠注入）。
   - 划词添加生词：选中文本 → 自动识别单词 → 加入 tomorrowWords（明天自动进学习队列）。
   - 语速调节：TTS 原速/0.85/0.75/0.5。
   - 按天解锁：checkNewDay() 检测上次学习日期，跨天自动 day+1 并加载新词库；单词页顶部「前一天/后一天」手动切天；找"下一个未学词"必须按当天词库过滤（getDayIdxList(day)），否则会卡在旧词（踩坑记录，详见 spec 第五节）。
   - 跨设备数据同步：新设备首次打开显示提示条（数据按设备存、教导出/导入同步）；导入 JSON 后自动触发 checkNewDay()。
7. 场景角色扮演（必须实现）：
   - 入口：商务对话栏目底部 + 生活口语栏目底部各一个「🎭 角色扮演」按钮（按钮用 SVG 图标，不要 emoji）。
   - 弹窗/侧栏切换：标题、剧本简介（用户扮演什么、AI 扮演什么、目标什么）、关键词清单（5-10 个本场景核心词）。
   - 引擎：roleplaySession（title/script/keywords/usedWords/curLine/turn），startRoleplay/startDialogueRoleplay/startLifeRoleplay/exitRoleplay/rpAddMessage/roleplayAISpeak/roleplayProcessUser/roleplayAIReply/roleplayLocalReply/toggleRoleplayMic/stopRoleplayRecognition/roleplaySendText/roleplaySkip 等 13 个函数支撑。
   - AI 优先调用（isAIReady() 走 callAI），失败自动降级本地规则；关键词用对 +1 分、用错 -1 分纠错，错词进明日待学。
8. 口说 AI 评分（必须实现）：
   - processOralResult(spoken, correct, confidence) 入口加 AI 优先：if(isAIReady()){processOralResultAI(...)} 异步分支，调用 callAI，prompt 要求返回 {score, feedback, correction, diff:{hit,miss,extra}}；本地引擎 calculateSimilarity 保留作为降级兜底。
   - AI 失败 → 降级本地 + Toast「AI 评分失败，自动用本地引擎（配置 Key 后更精准）」。
9. 自检清单（生成后用 Node 校验）：
   - JS 语法通过：Python 提取 <script> 内容 → node --check；关键函数存在（correctEnglish/assistantReply/boyfriendReply/setAccent/recordCoachError/recordErrorWord/weaveLearnedWord/toggleAssistant/setAssistantMode/callAI/isAIReady/esc/showWordTip/showHoverTip/startRoleplay/processOralResultAI）。
   - jsdom 运行验证（runScripts:'dangerously' + url:'http://localhost/' 保证 localStorage 可用；mock SpeechSynthesisUtterance 类 + speechSynthesis 对象 + fetch 返回假 {ok:true} 让 testAIConnection 走 OK 分支）：纠错引擎 9 类用例、助教/男友对话、口音切换 voice 选中、错词入明日、悬浮窗开关（注意类名是 closed 非 hide）、模式切换、isAIReady/callAI 全绿。
   - 文件为单 <script> 块、无外链 http/https 引用、无 emoji 图标。
   - 踩坑记录：① JS replace 回调参数个数必须与正则捕获组数匹配——单捕获组正则写 (m,p1,p2) 时 p2 拿到的是匹配偏移量（数字），曾导致 "a apple"→"an 8"；② 对象字面量中文键若含变量必须用 ['key'+x] 或改 cn: 字段，直接写 '中文'+x 是语法错误；③ jsdom 中 file:// origin 无 localStorage，必须用 http://localhost/；④ HTML 嵌入到 onclick 字符串属性必须先过 esc() 处理反斜杠/单双引号防注入断裂；⑤ 触屏设备千万别用 mouseover/mouseout 模拟，改纯 click（mouseenter 不触发 → 静默失败）。
10. 部署（用户要求手机用时）：复制为 deploy/index.html → CloudStudio 部署 → 返回公网链接 → 教用户手机浏览器打开 + 添加到主屏幕（iPhone Safari 分享→添加到主屏幕；安卓 Chrome 菜单→添加到主屏幕）。

资源

references/workbench-spec.md

完整技术规格：铁律清单、state/data 数据结构、6 栏目字段定义、关键函数清单与职责、踩坑记录（按天过滤、导入触发推进、一键学完 next=TODAY 等）。

references/portable-prompt.md

可复制智能体描述：一段自包含的中文提示词，可直接粘贴到任何智能体（ChatGPT 自定义 GPT / Claude / 豆包 / Kimi 等）的角色/描述栏，即可让该智能体独立复刻本工作台。交付给用户时优先给这份。

assets/ai-providers.md

OpenAI 兼容厂商速查表：5 家常用厂商的 BaseURL + 推荐模型 + 注册链接 + 价格档位说明，按需选一家填到工作台 AI 设置里。

assets/README.md

开箱即用指南：从打开工作台 → 设置 API（任意厂商）→ 启程的最短路径。同时说明无 Key 时本地引擎也能完整使用。

部署与迭代

• 每次迭代只加 1 个模块或改 1 处样式；保持 localStorage key 不变、字段向后兼容（旧数据缺字段用 Object.assign 默认值兜底）。
• 部署后自验一次（Node 拉取线上 HTML 检查新版特征标记；注意 WebFetch 有 15 分钟缓存，需用 Node/https 直连确认）。
• 数据安全提醒：部署后链接公网可访问，页面不预填真实隐私数据；Key 存浏览器 localStorage，不上传服务器；建议用户定期导出 JSON 备份。
• 首次打开若未配置 Key：明确告诉用户可继续用本地引擎（背单词、复习、口说、对练场景全功能），想要更智能的 AI 私教/角色扮演再配置 API Key。