## Why PPT 项目需要集成英语口语练习功能。现有 demo(enspeak 项目,React/Next.js)已验证了完整的教师端配置界面和口语练习类型体系,包括:单词跟读、句子跟读、文章朗读、演讲练习、自由对话(闲聊/话题讨论/模拟访谈)、情境任务等。现在需要将口语部分功能用 Vue 重写,集成到 PPT 主项目中,使教师可以在课件中嵌入英语口语练习活动。 ## Scope - **本次只实现话题讨论**(Topic Discussion),其他口语子类型后续迭代 - **只做左侧配置面板**,右侧主预览区域由独立项目实现 - 所有文案走 i18n(cn/en/hk 三语言) - 推荐卡片目前只出现"话题讨论"类型的任务 ## What Changes - 完整迁移 demo 的三层页面结构到 Vue: - **Layer 1 英语学科主页**:3 个联动下拉框(教材/年级/单元)+ 单元信息卡片 + 练习类型入口(口语/听力/阅读/写作,本次只有口语可点击) - **Layer 2 口语子页面**:创建方式切换 + 任务类型筛选 tabs + 推荐卡片列表(参照 demo SpeakingPanelV2.tsx 的 layer2 实现) - **Layer 3 话题讨论配置页**:TopicDiscussionConfig(讨论话题、学习目标、练习方式、高级配置) - AI 生成模式只迁移 UI 壳子,不实现后端功能,保留切换入口 - 智能推荐卡片数据来自 `topicDiscussionTasks.json`(源数据:`task.txt`),目前只有话题讨论类型 - 手动创建与 demo 一致,直接进入 TopicDiscussionConfig 空表单 - 新增话题讨论相关 TypeScript 类型定义(从 enspeak demo 移植) - 配置完成后通过 `parentWindow.addTool(77)` 通知父应用创建英语口语工具,最终以 `type: 'frame', toolType: 77` 的 element 嵌入 slide(与选择题 45、AI 应用 72 等工具一致的机制) - 在 `getTypeLabel` 中注册 toolType 77 的标签显示 - 静态教学资源数据以 JSON 文件存储(后续改为接口获取): - `curriculum.json`: 教材 → 年级 → 单元三级联动数据(textbooks[] → grades[] → units[]),每个单元包含 id、number、title、description、vocabulary[]、sentences[],数据来源于 `units-en.txt` - `topicDiscussionTasks.json`: 按单元 ID 索引的话题讨论推荐任务(titleZh/titleEn、subtitle、difficulty、rounds、durationMinutes、vocabulary、sentences),数据来源于 `task.txt` ## Capabilities ### New Capabilities - `speaking-panel`: 三层页面容器 — Layer 1 英语学科主页(联动下拉框 + 单元信息 + 练习类型入口)、Layer 2 口语子页面(创建方式切换 + 推荐卡片)、面包屑导航 - `speaking-free-dialogue`: 话题讨论配置(Layer 3)— 讨论话题、学习目标(词汇/句型)、练习方式、高级配置(辅助功能/评估维度/评分方式)、应用配置触发 addTool(77) ### Modified Capabilities ## Integration Mechanism PPT 编辑器以 iframe 嵌入父应用(cocorobo 平台),工具通过双向通信集成: 1. **PPT → 父应用**: 教师配置完话题讨论后,调用 `parentWindow.addTool(77)` 通知父应用 2. **父应用 → PPT**: 父应用创建工具实例,生成 URL,通过 `window.addContent(data, type)` 回传 3. **PPT 插入 slide**: 创建 `{ type: 'frame', url: '...', toolType: 77 }` 的 element 现有 toolType 编号:15(问答题), 45(选择题), 72(AI应用), 73(H5页面), 74(视频), 75(B站/YouTube), 76(创作空间) → **77: 英语口语** ## Impact - **入口**: `src/components/CollapsibleToolbar/index2.vue` — 英语 tab submenu,当前只有 video 占位,替换为话题讨论配置入口 - **组件**: 新增 `src/views/Editor/EnglishSpeaking/` 目录下的 Vue 组件(话题讨论配置) - **类型**: 新增 `src/types/englishSpeaking.ts`,从 enspeak demo 移植话题讨论相关类型 - **Store**: 新增 `src/store/speaking.ts` Pinia store 管理配置状态 - **Frame 注册**: `BaseFrameElement.vue` 的 `getTypeLabel` 需注册 toolType 77 - **i18n**: `cn.json`/`en.json`/`hk.json` 需新增话题讨论相关翻译 key - **依赖**: 无新外部依赖,复用项目现有 Vue 3 + TypeScript + Pinia 技术栈