## 1. 类型定义

- [ ] 1.1 在 `src/types/englishSpeaking.ts` 中追加预览相关类型：`SentenceEvaluation`、`ScoreLevel`、`OverallEvaluation`、`DialogueStatistics`、`AIRole`（预览用）、`ChatMessage`、`BadgeAchievement`

## 2. StudentPreview 容器组件

- [ ] 2.1 创建 `src/views/Editor/EnglishSpeaking/preview/StudentPreview.vue`，实现 16:9 PPT 页面容器布局（标题区 slot、内容区 default slot、操作区 slot），使用 scoped SCSS

## 3. DialogueChatView 对话组件

- [ ] 3.1 创建 `src/views/Editor/EnglishSpeaking/preview/DialogueChatView.vue` 基础骨架：顶部状态栏、消息列表区、底部录音控制区
- [ ] 3.2 实现消息渲染：AI 语音条（白色左对齐）、学生语音条（橙色右对齐）、英文文本、图标使用 SVG 内联
- [ ] 3.3 实现录音交互：点击录音按钮切换状态、模拟生成学生回复和评估数据、AI 自动回复
- [ ] 3.4 实现 L1 即时反馈：四维度评估（准确/流畅/完整/节奏）+ 一句话建议
- [ ] 3.5 实现 L2 展开详情：better expression + suggested words
- [ ] 3.6 实现单词高亮：可发音改进单词标记波浪下划线，点击弹出 L3 音素详情弹窗
- [ ] 3.7 实现提示弹窗：任务提示、句子提示（关键词高亮）、词汇提示（音标+释义）
- [ ] 3.8 实现徽章动画：流畅达人 / 发音专家 / 完美一轮，右上角弹出 2.5s 消失

## 4. OverallReport 整体报告组件

- [ ] 4.1 创建 `src/views/Editor/EnglishSpeaking/preview/OverallReport.vue`：综合评分展示（数字/字母/仅评语三种模式）、评分等级标签
- [ ] 4.2 实现四维能力分析横向柱状图（流利度/互动性/词汇量/语法）
- [ ] 4.3 实现 AI 点评区（角色头像 + 评语）、亮点列表、建议列表、统计数据
- [ ] 4.4 实现操作按钮："再来一次" + "完成"

## 5. DetailedReport 详细报告组件

- [ ] 5.1 创建 `src/views/Editor/EnglishSpeaking/preview/DetailedReport.vue`：按轮次分组的对话卡片列表
- [ ] 5.2 实现 SentenceCard 子组件：语音条 + 文本 + 可展开的发音评分和反馈详情
- [ ] 5.3 实现展开/收起全部切换

## 6. TopicDiscussionPreview 主预览组件

- [ ] 6.1 创建 `src/views/Editor/EnglishSpeaking/preview/TopicDiscussionPreview.vue`：管理三阶段状态（ready → chatting → completed）
- [ ] 6.2 实现 ready 阶段：StudentPreview 容器 + 话题图标 + "开始对话"按钮
- [ ] 6.3 实现 chatting 阶段：DialogueChatView + "重置预览"按钮
- [ ] 6.4 实现 completed 阶段：OverallReport + DetailedReport + "重置预览"按钮
- [ ] 6.5 添加模拟评估数据（mockOverallEvaluation）

## 7. 画布集成

- [ ] 7.1 修改 `BaseFrameElement.vue`：在 v-if 链中新增 `toolType === 77` 分支，渲染 `<TopicDiscussionPreview>` 组件替代 iframe

## 8. 验证

- [ ] 8.1 编译验证：确保无 TypeScript 和模板编译错误
- [ ] 8.2 端到端验证：配置面板应用配置 → 画布显示预览组件 → 三阶段交互正常