## 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 实现