tasks.md 3.0 KB

1. 类型定义

  • 1.1 在 src/types/englishSpeaking.ts 中追加预览相关类型:SentenceEvaluationScoreLevelOverallEvaluationDialogueStatisticsAIRole(预览用)、ChatMessageBadgeAchievement

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