PPT/openspec/changes/topic-discussion-preview/tasks.md

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 端到端验证：配置面板应用配置 → 画布显示预览组件 → 三阶段交互正常