proposal.md 1.6 KB
Why
英语口语配置面板（english-speaking）已完成教师侧的配置流程，但目前缺少学生侧的预览能力。教师完成配置后无法直观看到学生将会看到的界面效果。需要从 enspeak demo 项目迁移 TopicDiscussionPreview 组件到 PPT 项目中，让教师在画布上直接看到学生视角的话题讨论交互界面（包含准备页、对话过程、完成报告三个阶段）。
What Changes
- 新增学生预览容器组件
StudentPreview.vue，模拟 16:9 PPT 页面布局 - 新增对话聊天视图组件
DialogueChatView.vue，含语音条、即时反馈、提示弹窗等 - 新增整体报告组件
OverallReport.vue，展示综合评分、四维能力分析、AI 点评 - 新增详细报告组件
DetailedReport.vue，展示按轮次分组的单句评价 - 新增主预览组件
TopicDiscussionPreview.vue，管理三阶段状态切换 - 新增相关 TypeScript 类型定义（
OverallEvaluation、SentenceEvaluation、AIRole等） - 修改
BaseFrameElement.vue，在 toolType === 77 时渲染 Vue 组件替代 iframe
Capabilities
New Capabilities
topic-discussion-preview: 话题讨论学生预览组件，涵盖三个阶段（准备页 → 对话过程 → 完成报告），从 React demo 迁移为 Vue 3 + SCSS 实现
Modified Capabilities
（无）
Impact
- 新增文件:
src/views/Editor/EnglishSpeaking/preview/目录下 5 个 Vue 组件 - 类型扩展: 新增预览相关类型定义
- 修改文件:
BaseFrameElement.vue新增 toolType 77 的 Vue 组件分支（替代 iframe） - 依赖: 无新外部依赖，全部用 Vue 3 + SCSS 实现