## 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
<!-- 无需修改现有 spec -->

## 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 技术栈
