|
|
@@ -107,4 +107,63 @@
|
|
|
- `api/` - API接口和工具函数
|
|
|
- `router/` - 路由配置
|
|
|
- `utils/` - 工具函数
|
|
|
- - `assets/` - 静态资源
|
|
|
+ - `assets/` - 静态资源
|
|
|
+
|
|
|
+### AI对话引擎组件结构
|
|
|
+
|
|
|
+`src/components/aiCourse/` 目录包含AI对话课程的核心引擎组件：
|
|
|
+
|
|
|
+```
|
|
|
+aiCourse/
|
|
|
+├── DialogEngine.vue # 核心引擎组件：管理对话流程、音频播放、状态控制
|
|
|
+├── engine/ # 引擎基础组件
|
|
|
+│ ├── DialogBackground.vue # 背景层（图片/视频）
|
|
|
+│ ├── DialogHeader.vue # 标题栏（返回/播放控制）
|
|
|
+│ ├── DialogMask.vue # 初始遮罩层（播放按钮）
|
|
|
+│ └── InputButtons.vue # 底部控制按钮（上一句/语音输入/下一句）
|
|
|
+├── common/ # 通用组件
|
|
|
+│ ├── DialogCharacter.vue # 数字人形象组件
|
|
|
+│ └── DialogBubble.vue # 对话气泡组件（支持Markdown）
|
|
|
+└── dialog/ # 对话类型组件
|
|
|
+ ├── DialogCard.vue # 统一对话卡片容器（类型分发）
|
|
|
+ └── dialogType/ # 具体对话类型
|
|
|
+ ├── DigitalDialogue.vue # 普通对话
|
|
|
+ ├── QuestDialogue.vue # 提问对话
|
|
|
+ ├── UserDialogue.vue # 用户输入组件
|
|
|
+ ├── PoemDisplay.vue # 诗词展示（卷轴样式）
|
|
|
+ ├── VideoDisplay.vue # 视频播放组件
|
|
|
+ └── questType/ # 问题类型组件
|
|
|
+ ├── UserInputCard.vue # AI Q&A文本输入
|
|
|
+ └── SingleChoiceCard.vue # 单选问题卡片
|
|
|
+```
|
|
|
+
|
|
|
+#### 组件职责说明
|
|
|
+
|
|
|
+| 层级 | 组件 | 职责 |
|
|
|
+|------|------|------|
|
|
|
+| 核心 | DialogEngine | 对话流程控制、音频管理、状态管理 |
|
|
|
+| 引擎 | DialogBackground | 背景渲染（图片/视频切换） |
|
|
|
+| 引擎 | DialogHeader | 标题显示、返回、播放控制 |
|
|
|
+| 引擎 | DialogMask | 初始遮挡、播放按钮 |
|
|
|
+| 引擎 | InputButtons | 底部导航控制 |
|
|
|
+| 通用 | DialogCharacter | 数字人形象渲染 |
|
|
|
+| 通用 | DialogBubble | 对话内容展示 |
|
|
|
+| 容器 | DialogCard | 对话类型分发渲染 |
|
|
|
+| 对话 | DigitalDialogue | 数字人普通对话 |
|
|
|
+| 对话 | QuestDialogue | 数字人提问对话 |
|
|
|
+| 对话 | UserDialogue | 用户输入交互 |
|
|
|
+| 对话 | PoemDisplay | 诗词卷轴展示 |
|
|
|
+| 对话 | VideoDisplay | 视频内容播放 |
|
|
|
+| 问题 | UserInputCard | 文本问答输入 |
|
|
|
+| 问题 | SingleChoiceCard | 单选问题选择 |
|
|
|
+
|
|
|
+#### z-index 层级管理
|
|
|
+
|
|
|
+| 层级 | 组件 | z-index |
|
|
|
+|------|------|---------|
|
|
|
+| 背景层 | DialogBackground | 1 |
|
|
|
+| 对话内容 | DialogCharacter/DialogBubble | 1-2 |
|
|
|
+| 诗词展示 | PoemDisplay | 12 |
|
|
|
+| 视频播放 | VideoDisplay | 15 |
|
|
|
+| 标题栏 | DialogHeader | 20 |
|
|
|
+| 遮罩层 | DialogMask | 20 |
|
