612 lines
33 KiB
Markdown
612 lines
33 KiB
Markdown
# 少儿友好授课界面设计方案
|
||
|
||
> 版本: v1.0
|
||
> 设计日期: 2026-02-22
|
||
> 设计目标: 为幼儿园小朋友提供沉浸式、互动性强的授课展示界面
|
||
|
||
---
|
||
|
||
## 一、背景与问题
|
||
|
||
### 1.1 当前问题
|
||
|
||
现有 `LessonView.vue` 授课界面存在以下问题：
|
||
- ❌ 教师讲稿直接展示，不适合给小朋友看
|
||
- ❌ 界面复杂，左侧导航+中间内容+右侧工具栏
|
||
- ❌ 资源展示不直观，需要点击小标签才能查看
|
||
- ❌ 没有针对大屏/投屏场景优化
|
||
|
||
### 1.2 目标场景
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 教室场景 │
|
||
│ │
|
||
│ ┌──────────┐ ┌──────────────────┐ │
|
||
│ │ │ │ │ │
|
||
│ │ 教师 │ ──── 操作控制 ────► │ 电子白板/投影 │ │
|
||
│ │ │ │ │ │
|
||
│ │ 教师控制台│ │ 投屏展示界面 │ │
|
||
│ │(iPad/PC) │ ◄──── 状态同步 ──── │ (KidsView) │ │
|
||
│ │ │ │ │ │
|
||
│ └──────────┘ └──────────────────┘ │
|
||
│ ▲ │
|
||
│ │ │
|
||
│ ┌────┴────┐ │
|
||
│ │ 小朋友 │ │
|
||
│ │ 观看 │ │
|
||
│ └─────────┘ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 1.3 设计原则
|
||
|
||
根据儿童UI设计最佳实践：
|
||
|
||
| 原则 | 规范 | 说明 |
|
||
|------|------|------|
|
||
| **简洁性** | 隐藏所有控制元素 | 全屏沉浸式展示 |
|
||
| **大按钮** | ≥60x60px | 方便教师触摸操作 |
|
||
| **鲜艳色彩** | 主题色 #FF8C42 | 温暖、活泼的橙色系 |
|
||
| **即时反馈** | ≤300ms | 动画过渡流畅 |
|
||
| **进度可视** | 环节进度条 | 让小朋友知道进度 |
|
||
|
||
---
|
||
|
||
## 二、整体架构
|
||
|
||
### 2.1 双模式架构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ LessonView.vue │
|
||
│ (授课总控制器) │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────┐ ┌─────────────────────┐ │
|
||
│ │ TeacherMode │ │ KidsMode │ │
|
||
│ │ (教师控制台) │ │ (投屏展示) │ │
|
||
│ ├─────────────────────┤ ├─────────────────────┤ │
|
||
│ │ • 教师讲稿 │ │ • 绘本大图 │ │
|
||
│ │ • 互动要点 │ │ • 视频/动画 │ │
|
||
│ │ • 计时器 │ │ • 音频播放 │ │
|
||
│ │ • 课堂评价 │ │ • 互动游戏 │ │
|
||
│ │ • 笔记记录 │ │ • 环节进度 │ │
|
||
│ │ • 资源预览 │ │ • 延伸活动 │ │
|
||
│ └─────────────────────┘ └─────────────────────┘ │
|
||
│ │ │ │
|
||
│ └───────────┬───────────────┘ │
|
||
│ │ │
|
||
│ 共享状态管理 │
|
||
│ (currentStep, currentPage) │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.2 实现方式选择
|
||
|
||
| 方案 | 描述 | 推荐度 |
|
||
|------|------|--------|
|
||
| **A. 同页面模式切换** | 在 LessonView 中添加模式切换按钮 | ⭐⭐⭐⭐⭐ 推荐 |
|
||
| B. 新标签页 | window.open() 打开独立页面 | ⭐⭐⭐ |
|
||
| C. 路由切换 | /teacher/lessons/:id/kids | ⭐⭐ |
|
||
|
||
**推荐方案 A 的理由：**
|
||
- 状态共享最简单（同一个 Vue 组件）
|
||
- 切换流畅无延迟
|
||
- 便于实现双屏同步显示
|
||
|
||
---
|
||
|
||
## 三、界面设计详细方案
|
||
|
||
### 3.1 KidsMode 布局
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ 主内容展示区 │ │
|
||
│ │ (绘本/视频/游戏/动画) │ │
|
||
│ │ │ │
|
||
│ │ 占据 80% 屏幕 │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │
|
||
│ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │ 延伸 │ │ │
|
||
│ │ │导入 │ │共读 │ │互动 │ │游戏 │ │总结 │ │ 活动 │ │ │
|
||
│ │ │ 🎯 │ │ 📖 │ │ 🎨 │ │ 🎮 │ │ ⭐ │ │ 🎁 │ │ │
|
||
│ │ └──┯──┘ └──┯──┘ └──┯──┘ └──┯──┘ └──┯──┘ └──┯──┘ │ │
|
||
│ │ └──────┴──────┴──────┴──────┴──────┴──────┘ │ │
|
||
│ │ 进度条 │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ 底部导航区 (15%) │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 各资源类型展示组件
|
||
|
||
#### 3.2.1 绘本展示 (EbookViewer)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────────┐ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 绘本页面 │ │ │
|
||
│ │ │ (大图) │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ └──────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ◀━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━▶ │
|
||
│ 翻页控制 │
|
||
│ 第 3 页 / 共 12 页 自动播放 ▶ │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**功能特性：**
|
||
- 大图全屏展示
|
||
- 点击左侧翻上一页，右侧翻下一页
|
||
- 可选自动翻页（可设置间隔）
|
||
- 页码显示
|
||
- 双指缩放（触屏设备）
|
||
|
||
#### 3.2.2 视频播放 (VideoPlayer)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ 视频全屏播放 │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ ▶ ━━━━━━━━━━━━━━━━━━━━━━━━━●━━━━━━━━━━━━━━━━━━━━ 🔊 │ │
|
||
│ │ 播放控制条 │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**功能特性：**
|
||
- 全屏播放
|
||
- 简化控制条（播放/暂停、进度、音量）
|
||
- 自动隐藏控制条（3秒无操作）
|
||
- 循环播放选项
|
||
|
||
#### 3.2.3 音频播放 (AudioPlayer)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────────┐ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 动画背景 │ │ │
|
||
│ │ │ (波浪/气泡) │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 🎵 音乐 │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ └──────────────┘ │ │
|
||
│ │ │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────────────────────────────────────┐ │
|
||
│ │ ♪ ━━━━━━━━━━━━━━━━━━━━●━━━━━━━━━━━━ 🔊 │ │
|
||
│ │ 正在播放: 绘本配乐 │ │
|
||
│ └────────────────────────────────────────────┘ │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**功能特性：**
|
||
- 搭配动态背景动画（波浪、气泡、星星等）
|
||
- 简洁的播放控制
|
||
- 可搭配绘本图片轮播
|
||
|
||
#### 3.2.4 互动游戏 (GameViewer)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────────────────┐ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 游戏嵌入区域 │ │ │
|
||
│ │ │ (iframe/组件) │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ 支持触摸交互 │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ └──────────────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 退出游戏 │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**游戏类型支持：**
|
||
- H5 游戏（iframe 嵌入）
|
||
- 拖拽配对游戏
|
||
- 点击选择游戏
|
||
- 涂色游戏
|
||
- 拼图游戏
|
||
|
||
#### 3.2.5 PPT/挂图展示 (SlidesViewer)
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ │ ┌──────────────┐ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ PPT 幻灯片 │ │ │
|
||
│ │ │ (PDF渲染) │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ └──────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ │ │
|
||
│ └──────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ◀━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━▶ │
|
||
│ 第 1 页 / 共 8 页 全屏 ⛶ │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.3 底部导航栏设计
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────────┐
|
||
│ 环节导航 + 延伸活动 │
|
||
├────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||
│ │ ╭───╮ │ │ ╭───╮ │ │ ╭───╮ │ │ ╭───╮ │ │
|
||
│ │ │ 🎯 │ │ │ │ 📖 │ │ │ │ 🎨 │ │ │ │ ⭐ │ │ │
|
||
│ │ ╰───╯ │ │ ╰───╯ │ │ ╰───╯ │ │ ╰───╯ │ │
|
||
│ │ 导入 │ │ 共读 │ │ 互动 │ │ 总结 │ │
|
||
│ │ 3分钟 │ │ 8分钟 │ │ 5分钟 │ │ 4分钟 │ │
|
||
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
|
||
│ │ │ │ │ │
|
||
│ ┌────┴──────────┴──────────┴──────────┴────┐ │
|
||
│ │██████████████████░░░░░░░░░░░░░░░░░░░░░░░░│ │
|
||
│ └───────────────────────────────────────────┘ │
|
||
│ 整体进度 (40%) │
|
||
│ │
|
||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||
│ │ ╭───╮ │ │ ╭───╮ │ │ ╭───╮ │ │
|
||
│ │ │ 🎁 │ │ │ │ 🎨 │ │ │ │ 🏃 │ │ │
|
||
│ │ ╰───╯ │ │ ╰───╯ │ │ ╰───╯ │ │
|
||
│ │ 手工活动 │ │ 绘画活动 │ │ 户外活动 │ │
|
||
│ └─────────┘ └─────────┘ └─────────┘ │
|
||
│ 延伸活动 │
|
||
└────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**设计要点：**
|
||
- 当前环节高亮（放大+边框）
|
||
- 已完成环节显示 ✓
|
||
- 图标+名称+时长
|
||
- 进度条实时更新
|
||
- 延伸活动单独一行
|
||
|
||
### 3.4 环节内容自动适配
|
||
|
||
根据环节类型自动选择展示组件：
|
||
|
||
| 环节类型 | stepType | 主要展示内容 | 默认组件 |
|
||
|---------|----------|-------------|---------|
|
||
| 导入环节 | INTRO | 视频/动画/图片 | VideoPlayer |
|
||
| 师幼共读 | READING | 绘本+音频 | EbookViewer + AudioPlayer |
|
||
| 互动环节 | INTERACTION | 游戏/问答 | GameViewer |
|
||
| 延伸活动 | EXTENSION | 视频/指导 | VideoPlayer + 活动卡片 |
|
||
| 总结环节 | SUMMARY | 图片/PPT | SlidesViewer |
|
||
|
||
---
|
||
|
||
## 四、技术实现方案
|
||
|
||
### 4.1 组件结构
|
||
|
||
```
|
||
src/views/teacher/lessons/
|
||
├── LessonView.vue # 授课主页面（模式切换控制器）
|
||
├── components/
|
||
│ ├── TeacherMode.vue # 教师控制台（现有界面优化）
|
||
│ ├── KidsMode.vue # 投屏展示模式（新增）
|
||
│ │ ├── KidsHeader.vue # 顶部标题栏（可选显示）
|
||
│ │ ├── KidsContent.vue # 主内容区
|
||
│ │ └── KidsNav.vue # 底部导航
|
||
│ ├── viewers/
|
||
│ │ ├── EbookViewer.vue # 绘本查看器
|
||
│ │ ├── VideoPlayer.vue # 视频播放器
|
||
│ │ ├── AudioPlayer.vue # 音频播放器
|
||
│ │ ├── GameViewer.vue # 游戏查看器
|
||
│ │ └── SlidesViewer.vue # PPT/挂图查看器
|
||
│ └── shared/
|
||
│ ├── ProgressBar.vue # 进度条
|
||
│ └── StepIndicator.vue # 环节指示器
|
||
```
|
||
|
||
### 4.2 状态管理
|
||
|
||
```typescript
|
||
// useLessonState.ts - 共享状态
|
||
interface LessonState {
|
||
// 模式
|
||
mode: 'teacher' | 'kids';
|
||
|
||
// 课程信息
|
||
courseId: number;
|
||
course: Course;
|
||
|
||
// 进度
|
||
currentStepIndex: number; // 当前环节
|
||
currentPageIndex: number; // 当前页码（绘本）
|
||
currentResourceIndex: number; // 当前资源索引
|
||
|
||
// 播放状态
|
||
isPlaying: boolean;
|
||
isAutoPlay: boolean;
|
||
autoPlayInterval: number; // 自动翻页间隔（秒）
|
||
|
||
// 计时
|
||
timerSeconds: number;
|
||
timerRunning: boolean;
|
||
}
|
||
```
|
||
|
||
### 4.3 模式切换实现
|
||
|
||
```vue
|
||
<!-- LessonView.vue -->
|
||
<template>
|
||
<div class="lesson-view" :class="{ 'kids-mode': mode === 'kids' }">
|
||
<!-- 模式切换按钮 -->
|
||
<div class="mode-switch" v-if="mode === 'teacher'">
|
||
<a-button type="primary" size="large" @click="switchToKidsMode">
|
||
<template #icon><ExpandOutlined /></template>
|
||
投屏模式
|
||
</a-button>
|
||
</div>
|
||
|
||
<!-- 退出投屏按钮（悬浮） -->
|
||
<div class="kids-exit-btn" v-if="mode === 'kids'" @click="switchToTeacherMode">
|
||
<CloseOutlined />
|
||
</div>
|
||
|
||
<!-- 教师模式 -->
|
||
<TeacherMode v-if="mode === 'teacher'" v-bind="sharedProps" />
|
||
|
||
<!-- 投屏模式 -->
|
||
<KidsMode v-else v-bind="sharedProps" />
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
### 4.4 数据流
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ API Layer │
|
||
│ getLessonDetail(courseId) │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
│
|
||
▼
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ LessonView.vue │
|
||
│ 数据加载与状态 │
|
||
│ │
|
||
│ course: { │
|
||
│ scripts: CourseScript[], // 教学环节 │
|
||
│ resources: CourseResource[], // 课程资源 │
|
||
│ activities: CourseActivity[], // 延伸活动 │
|
||
│ ebookPaths: string, // 绘本路径 JSON │
|
||
│ audioPaths: string, // 音频路径 JSON │
|
||
│ videoPaths: string, // 视频路径 JSON │
|
||
│ } │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
│
|
||
┌───────────────┴───────────────┐
|
||
▼ ▼
|
||
┌─────────────────────────┐ ┌─────────────────────────┐
|
||
│ TeacherMode │ │ KidsMode │
|
||
│ (教师控制台) │ │ (投屏展示) │
|
||
│ │ │ │
|
||
│ • 读取 teacherScript │ │ • 读取 resourceIds │
|
||
│ • 显示互动要点 │ │ • 展示资源内容 │
|
||
│ • 计时/评价/记录 │ │ • 播放/翻页控制 │
|
||
└─────────────────────────┘ └─────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 五、交互设计
|
||
|
||
### 5.1 手势/触摸操作
|
||
|
||
| 操作 | 绘本模式 | 视频模式 | 游戏模式 |
|
||
|------|---------|---------|---------|
|
||
| 点击左侧 | 上一页 | 后退10秒 | - |
|
||
| 点击右侧 | 下一页 | 前进10秒 | - |
|
||
| 双击 | 全屏 | 全屏 | - |
|
||
| 双指缩放 | 放大/缩小 | - | - |
|
||
| 左右滑动 | 翻页 | 进度调整 | - |
|
||
|
||
### 5.2 键盘快捷键
|
||
|
||
| 按键 | 功能 |
|
||
|------|------|
|
||
| `←` / `A` | 上一步/上一页 |
|
||
| `→` / `D` | 下一步/下一页 |
|
||
| `Space` | 播放/暂停 |
|
||
| `F` | 全屏切换 |
|
||
| `Esc` | 退出投屏模式 |
|
||
| `M` | 静音切换 |
|
||
|
||
### 5.3 自动化功能
|
||
|
||
| 功能 | 说明 |
|
||
|------|------|
|
||
| **自动翻页** | 绘本模式下可设置间隔自动翻页（默认5秒） |
|
||
| **环节计时提醒** | 超过预计时长时顶部提醒 |
|
||
| **进度自动保存** | 每30秒自动保存当前进度 |
|
||
| **全屏自动进入** | 进入KidsMode自动请求全屏 |
|
||
|
||
---
|
||
|
||
## 六、视觉设计规范
|
||
|
||
### 6.1 配色方案
|
||
|
||
```css
|
||
/* 主题色 - 温暖橙色系 */
|
||
--kids-primary: #FF8C42; /* 主色 */
|
||
--kids-primary-light: #FFB380; /* 主色浅 */
|
||
--kids-primary-dark: #E67635; /* 主色深 */
|
||
|
||
/* 背景色 */
|
||
--kids-bg: #FFF9F5; /* 温暖白 */
|
||
--kids-bg-card: #FFFFFF; /* 卡片白 */
|
||
|
||
/* 辅助色 */
|
||
--kids-success: #52C41A; /* 成功绿 */
|
||
--kids-info: #1890FF; /* 信息蓝 */
|
||
--kids-warning: #FAAD14; /* 警告黄 */
|
||
|
||
/* 文字色 */
|
||
--kids-text: #333333; /* 主文字 */
|
||
--kids-text-secondary: #666666;/* 次要文字 */
|
||
```
|
||
|
||
### 6.2 字体规范
|
||
|
||
```css
|
||
/* 主字体 */
|
||
font-family: 'Comic Sans MS', 'YouYuan', 'Microsoft YaHei', sans-serif;
|
||
|
||
/* 字号 */
|
||
--kids-font-title: 36px; /* 大标题 */
|
||
--kids-font-subtitle: 28px; /* 副标题 */
|
||
--kids-font-body: 24px; /* 正文 */
|
||
--kids-font-small: 18px; /* 小字 */
|
||
|
||
/* 圆角 */
|
||
--kids-radius-sm: 12px;
|
||
--kids-radius-md: 20px;
|
||
--kids-radius-lg: 28px;
|
||
```
|
||
|
||
### 6.3 动画效果
|
||
|
||
```css
|
||
/* 页面切换 */
|
||
.page-enter-active {
|
||
transition: all 0.3s ease-out;
|
||
}
|
||
.page-leave-active {
|
||
transition: all 0.2s ease-in;
|
||
}
|
||
|
||
/* 环节切换 */
|
||
.step-change {
|
||
animation: stepSlide 0.5s ease;
|
||
}
|
||
|
||
@keyframes stepSlide {
|
||
0% { transform: translateX(100%); opacity: 0; }
|
||
100% { transform: translateX(0); opacity: 1; }
|
||
}
|
||
|
||
/* 完成动画 */
|
||
@keyframes celebrate {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 七、实施计划
|
||
|
||
### 7.1 开发阶段
|
||
|
||
| 阶段 | 内容 | 预计工时 |
|
||
|------|------|---------|
|
||
| **Phase 1** | 基础架构 + 模式切换 | 4h |
|
||
| **Phase 2** | 绘本查看器 + 翻页控制 | 4h |
|
||
| **Phase 3** | 视频/音频播放器 | 3h |
|
||
| **Phase 4** | 底部导航 + 进度条 | 3h |
|
||
| **Phase 5** | 互动游戏支持 | 3h |
|
||
| **Phase 6** | 延伸活动展示 | 2h |
|
||
| **Phase 7** | 优化测试 | 3h |
|
||
| **总计** | | **22h** |
|
||
|
||
### 7.2 文件清单
|
||
|
||
| 文件 | 说明 | 优先级 |
|
||
|------|------|--------|
|
||
| `KidsMode.vue` | 投屏模式主组件 | P0 |
|
||
| `KidsContent.vue` | 主内容区 | P0 |
|
||
| `KidsNav.vue` | 底部导航 | P0 |
|
||
| `EbookViewer.vue` | 绘本查看器 | P0 |
|
||
| `VideoPlayer.vue` | 视频播放器 | P0 |
|
||
| `AudioPlayer.vue` | 音频播放器 | P1 |
|
||
| `GameViewer.vue` | 游戏查看器 | P1 |
|
||
| `SlidesViewer.vue` | PPT查看器 | P1 |
|
||
| `useLessonState.ts` | 状态管理 | P0 |
|
||
|
||
---
|
||
|
||
## 八、设计决策（已确认）
|
||
|
||
| 问题 | 决策 | 说明 |
|
||
|------|------|------|
|
||
| **互动游戏** | 暂不开发，后续补充 | 记录在待办事项中 |
|
||
| **资源关联** | 使用课程包配置 | 环节与资源已在创建时关联 |
|
||
| **绘本音频同步** | 可选同步模式 | 提供开关，用户可选择 |
|
||
| **延伸活动展示** | 底部独立入口 | 作为独立区域，不融入主流程 |
|
||
| **双屏需求** | 先做单屏切换 | 后续可扩展双屏模式 |
|
||
|
||
---
|
||
|
||
## 九、待办事项
|
||
|
||
### 后续功能（P2）
|
||
|
||
| 功能 | 描述 | 预计工时 |
|
||
|------|------|---------|
|
||
| **互动游戏模块** | 支持拖拽配对、点击选择、涂色、拼图等游戏类型 | 16h |
|
||
| **双屏投影模式** | 教师控制台 + 投屏端同步显示 | 8h |
|
||
| **音频页面同步** | 绘本阅读时音频与页面自动同步 | 4h |
|
||
|
||
---
|
||
|
||
*设计完成于 2026-02-22*
|
||
*文档版本: v1.1*
|
||
*最后更新: 2026-02-22*
|