|
|
@@ -0,0 +1,117 @@
|
|
|
+## 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** 所有学生消息卡片同时展开或收起
|
jimmylee