# 少儿友好授课界面设计方案 > 版本: 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 ``` ### 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*