AIClass

人工智能通识课平台前端

项目介绍

人工智能通识课平台前端

页面路由结构

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