jack/PPT @ 882eb01dcc32cc5dcd3464d59d8b623d9545d5d2

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 所有学生消息卡片同时展开或收起

spec.md 5.0 KB History Raw