33 KiB
33 KiB
少儿友好授课界面设计方案
版本: 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 状态管理
// 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 模式切换实现
<!-- 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 配色方案
/* 主题色 - 温暖橙色系 */
--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 字体规范
/* 主字体 */
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 动画效果
/* 页面切换 */
.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