## ADDED Requirements

### Requirement: Canvas Integration
系统 SHALL 在 `BaseFrameElement.vue` 中，当 `toolType === 77` 时直接渲染 `TopicDiscussionPreview` Vue 组件，替代 iframe 渲染方式。

#### Scenario: Render preview component on canvas
- **WHEN** 画布中存在 toolType 为 77 的 PPTFrameElement，且非缩略图模式、元素可见
- **THEN** 渲染 TopicDiscussionPreview Vue 组件，填满元素容器

#### Scenario: Show placeholder when not visible
- **WHEN** toolType 为 77 的元素不可见（如被滚出视口）
- **THEN** 显示占位符（🌐 + "英语口语"类型标签），与其他工具类型行为一致

#### Scenario: Show thumbnail mode
- **WHEN** toolType 为 77 的元素处于缩略图模式
- **THEN** 显示简化占位符，与其他工具类型的缩略图行为一致

---

### Requirement: Student Preview Container
系统 SHALL 提供一个 `StudentPreview.vue` 容器组件，模拟 16:9 PPT 页面布局，包含标题区（slot）、内容区（default slot）、操作区（slot）。

#### Scenario: Render with title and action area
- **WHEN** 组件传入 title、subtitle、titleIcon 和 actionArea slot
- **THEN** 显示带标题区和操作区的 16:9 白色卡片容器，内容区居中显示 default slot

#### Scenario: Render without title
- **WHEN** 组件未传入 title 相关 props
- **THEN** 不渲染标题区，内容区占满容器

---

### Requirement: Dialogue State Management
系统 SHALL 管理话题讨论预览的三个阶段：ready（准备）、chatting（对话中）、completed（完成）。

#### Scenario: Initial state is ready
- **WHEN** TopicDiscussionPreview 组件挂载
- **THEN** 显示准备页，包含话题图标、话题名称和"开始对话"按钮

#### Scenario: Transition from ready to chatting
- **WHEN** 用户点击"开始对话"按钮
- **THEN** 切换到 DialogueChatView 对话界面，显示 AI 第一条消息

#### Scenario: Transition from chatting to completed
- **WHEN** 对话轮次完成（达到 totalRounds 或脚本结束）
- **THEN** 切换到报告界面，显示 OverallReport 和 DetailedReport

#### Scenario: Reset preview
- **WHEN** 用户在 chatting 或 completed 阶段点击"重置预览"按钮
- **THEN** 回到 ready 阶段

---

### Requirement: Dialogue Chat View
系统 SHALL 提供 DialogueChatView.vue 组件，实现模拟对话交互界面。

#### Scenario: Display chat messages with voice bars
- **WHEN** 对话消息存在
- **THEN** AI 消息显示白色语音条（左对齐），学生消息显示橙色语音条（右对齐），每条消息下方显示英文文本

#### Scenario: Recording toggle
- **WHEN** 用户点击录音按钮
- **THEN** 按钮变为红色录音状态，显示录音时长计数；再次点击停止录音，自动生成模拟学生回复和评估数据

#### Scenario: Instant feedback display (L1)
- **WHEN** 学生消息生成后
- **THEN** 在消息下方显示四维度评估（准确/流畅/完整/节奏）和一句话建议，可展开查看详情

#### Scenario: Feedback detail expansion (L2)
- **WHEN** 用户点击 L1 反馈的"详情"按钮
- **THEN** 展开显示 better expression 和 suggested words

#### Scenario: Smart hint dialog
- **WHEN** 用户点击"提示"按钮
- **THEN** 弹出提示弹窗，包含任务提示、句子提示（含关键词高亮）和词汇提示（含音标和释义）

#### Scenario: Badge achievement animation
- **WHEN** 学生连续 3 句流畅度优秀 / 连续 5 句发音准确 / 单轮四维度全优
- **THEN** 右上角显示对应徽章动画（流畅达人/发音专家/完美一轮），2.5 秒后消失

---

### Requirement: Overall Report
系统 SHALL 提供 OverallReport.vue 组件，展示对话完成后的整体评价报告。

#### Scenario: Display score and level
- **WHEN** 报告渲染时
- **THEN** 显示综合评分（数字/字母/仅评语，取决于 scoreDisplayMode）、评分等级标签、超过同学百分比

#### Scenario: Display ability analysis
- **WHEN** 报告渲染时
- **THEN** 显示四维能力（流利度/互动性/词汇量/语法）的横向柱状图

#### Scenario: Display AI comment and highlights
- **WHEN** 报告渲染时
- **THEN** 显示 AI 角色头像和点评文本、亮点列表和建议列表

#### Scenario: Action buttons
- **WHEN** 报告渲染时
- **THEN** 底部显示"再来一次"和"完成"按钮

---

### Requirement: Detailed Report
系统 SHALL 提供 DetailedReport.vue 组件，展示按轮次分组的单句评价。

#### Scenario: Display sentence cards by round
- **WHEN** 报告渲染时
- **THEN** 按轮次分组显示对话卡片，每张卡片包含语音条、文本内容，学生卡片可展开查看发音评分和反馈

#### Scenario: Expand/collapse individual cards
- **WHEN** 用户点击有评价数据的学生消息卡片
- **THEN** 展开/收起该卡片的发音评估和反馈详情

#### Scenario: Toggle all cards
- **WHEN** 用户点击"展开全部/收起全部"按钮
- **THEN** 所有学生消息卡片同时展开或收起