# 人工智能通识课平台前端

## 项目介绍

人工智能通识课平台前端

## 页面路由结构

### 1. 基础页面

- **登录页**
  - `/` - 主登录页
  - `/login` - 登录页
  - `/quick-login` - 免登录（广电）
  - `/promotion-login` - 免登录（营销号）
  - `/register-login` - 注册登录
  - `/reg` - 编程课注册

### 2. 管理界面

- **管理后台**
  - `/management-interface` - 管理界面

### 3. 通识课模块

- **首页**
  - `/home` - 通识课首页

- **智能课**
  - `/ai-general-course` - 智能课页面

- **AI实验室**
  - `/ai-laboratory` - AI实验室页面

- **英文数字人老师**
  - `/ai-ennumerals` - 英文数字人老师页面

- **能力测评**
  - `/evaluation` - 问卷列表
  - `/testTopic` - 在线测试
  - `/testSubmit` - 测试提交

- **个性化学习**
  - `/personalized` - 个性化学习页面

- **智能绘画**
  - `/ai-painting` - 智能绘画页面

- **图生图**
  - `/ai-image` - 图生图页面

- **AI头像**
  - `/ai-avatar` - AI头像页面

- **图生视频**
  - `/ai-video` - 图生视频页面

- **大运河**
  - `/ai-grandcanal` - 大运河页面

- **植物专家**
  - `/ai-plantexperts` - 植物专家页面

- **智能问答**
  - `/ai-questions` - 智能问答页面

- **发展历程**
  - `/ai-develop` - 发展历程页面

- **虚拟实验室**
  - `/virtual-laboratory` - 虚拟实验室页面
  - `/smartHome` - 智能家居页面
  - `/smartDeskLamp` - 智能台灯页面

- **AI古诗**
  - `/ai-poetry` - AI古诗页面

### 4. 编程课模块

- **编程课首页**
  - `/blocklyHome` - 编程课首页


- **编程课列表**
  - `/programmingList` - 编程课列表
  - `/programmingCourset` - 编程课详情
  - `/interface` - 编程课视频

### 5. AI实验课模块

- **实验课首页**
  - `/aiCourseHome` - 实验课首页

- **实验列表**
  - `/experiment-type` - 实验类型页面
  - `/experimental-course` - 实验课程页面
  - `/experimental-interface` - 实验界面


## 项目结构

项目采用模块化设计，主要包含以下目录：

- `src/` - 项目源代码目录
  - `views/` - 页面组件
  - `components/` - 可复用组件
  - `api/` - API接口和工具函数
  - `router/` - 路由配置
  - `utils/` - 工具函数
  - `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 |