14 KiB
14 KiB
教学环节资源关联设计
创建时间：2025-02-14 最后更新：2025-02-14 状态：已确认
一、需求背景
1.1 问题描述
在当前系统中：
- 超管端创建课程包时，上传了数字资源（电子绘本、音频、视频）和教学材料（PPT、挂图）
- 但编辑教学环节时，没有将资源与具体环节关联
- 导致教师端查看环节时，环节材料始终为空
1.2 业务需求
教师在授课时，需要：
- 备课阶段：了解每个环节需要使用哪些资源
- 授课阶段：快速访问和播放当前环节的资源
二、设计方案
2.1 关联粒度
采用方案B：关联到逐页脚本级别
- 教学环节（环节级别）：可以关联资源
- 逐页脚本（页面级别）：也可以关联资源
这样设计更灵活，例如：
- 导入环节关联：动画视频、背景音乐
- 第3页脚本关联：第3页的特定音频
2.2 资源范围
以下资源都可以被关联：
- 数字资源：电子绘本、音频、视频
- 教学材料：PPT课件、教学挂图
2.3 关联规则
| 规则 | 说明 |
|---|---|
| 多选 | 一个环节/页面可关联多个资源 |
| 复用 | 同一资源可被多个环节/页面关联 |
| 可选 | 环节/页面可以不关联任何资源 |
三、数据模型
3.1 现有表结构
CourseResource（课程资源表）
model CourseResource {
id Int @id
courseId Int
resourceType String // EBOOK, AUDIO, VIDEO, PPT, POSTER
resourceName String
fileUrl String
fileSize Int?
mimeType String?
metadata String?
}
CourseScript（教学环节表）
model CourseScript {
id Int
courseId Int
stepIndex Int
stepName String
// ...
resourceIds String? // JSON数组，存储关联的资源ID
}
CourseScriptPage（逐页脚本表） - 需要新增字段
model CourseScriptPage {
id Int
scriptId Int
pageNumber Int
questions String?
teacherNotes String?
// 需要新增：
resourceIds String? // JSON数组，存储关联的资源ID
}
3.2 数据流
┌─────────────────────────────────────────────────────────────────┐
│ 资源关联数据流 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. 上传资源 │
│ 电子绘本.pdf ──→ CourseResource (id=1, type=EBOOK) │
│ 导入音乐.mp3 ──→ CourseResource (id=2, type=AUDIO) │
│ 绘本动画.mp4 ──→ CourseResource (id=3, type=VIDEO) │
│ │
│ 2. 编辑教学环节 │
│ 环节1: 导入环节 │
│ 关联资源: [2, 3] │
│ ↓ │
│ CourseScript.resourceIds = "[2, 3]" │
│ │
│ 3. 编辑逐页脚本 │
│ 第3页: │
│ 关联资源: [1] │
│ ↓ │
│ CourseScriptPage.resourceIds = "[1]" │
│ │
│ 4. 查询展示 │
│ SELECT * FROM CourseScript WHERE id = X │
│ resourceIds = "[2, 3]" │
│ ↓ │
│ SELECT * FROM CourseResource WHERE id IN (2, 3) │
│ ↓ │
│ 返回资源详情列表 │
│ │
└─────────────────────────────────────────────────────────────────┘
四、界面设计
4.1 超管端 - 教学环节编辑
┌─────────────────────────────────────────────────────────────────┐
│ 第4步：编辑教学环节 │
│ │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ 环节1: 导入环节 ││
│ │ 时长: 5分钟 ││
│ │ 教师活动: 播放动画，引导幼儿观察封面... ││
│ │ ││
│ │ 关联资源: ││
│ │ ┌───────────────────────────────────────────────────────┐ ││
│ │ │ ☑ 📹 绘本动画.mp4 (视频) │ ││
│ │ │ ☑ 🎵 导入音乐.mp3 (音频) │ ││
│ │ │ ☐ 📄 绘本故事.pdf (电子绘本) │ ││
│ │ │ ☐ 📊 教学课件.pptx (PPT) │ ││
│ │ │ ☐ 🖼️ 角色卡片.jpg (挂图) │ ││
│ │ │ │ ││
│ │ │ 提示：请先在第2步上传数字资源，第3步上传教学材料 │ ││
│ │ └───────────────────────────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘
4.2 超管端 - 逐页脚本编辑
┌─────────────────────────────────────────────────────────────────┐
│ 逐页脚本 │
│ │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ 第3页 ││
│ │ 教师话术: "小朋友们，看这页毛毛虫吃了什么？" ││
│ │ 教学备注: 引导幼儿数数 ││
│ │ ││
│ │ 关联资源: ││
│ │ ┌───────────────────────────────────────────────────────┐ ││
│ │ │ ☑ 📄 绘本故事.pdf (电子绘本) - 第3页 │ ││
│ │ │ ☐ 其他资源... │ ││
│ │ └───────────────────────────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘
4.3 教师端 - 备课模式
┌─────────────────────────────────────────────────────────────────┐
│ 备课模式 │
├────────────┬───────────────────────────────────┬────────────────┤
│ 教学流程 │ 当前环节详情 │ 环节材料 │
│ │ │ │
│ 1.导入环节 │ 环节：导入环节 │ ┌────────────┐ │
│ (进行中) │ 目标：激发兴趣 │ │ 📹 动画.mp4│ │
│ 2.阅读绘本 │ │ │ [▶播放] │ │
│ 3.互动讨论 │ 教师讲稿： │ └────────────┘ │
│ 4.总结延伸 │ "小朋友们，今天我们..." │ ┌────────────┐ │
│ │ │ │ 🎵 音乐.mp3│ │
│ │ │ │ [▶播放] │ │
│ │ │ └────────────┘ │
└────────────┴───────────────────────────────────┴────────────────┘
4.4 教师端 - 授课模式
┌─────────────────────────────────────────────────────────────────┐
│ [退出上课] [上一步] [下一步] [全屏] [计时器] [课堂记录] [结束] │
├────────────┬───────────────────────────────────┬────────────────┤
│ 教学流程 │ 当前环节详情 │ 本步骤材料 │
│ │ │ │
│ 1.导入环节 │ 环节：导入环节 │ 📹 绘本动画.mp4│
│ (进行中) │ 时长：5分钟 │ [▶播放] │
│ 2.阅读绘本 │ │ │
│ 3.互动讨论 │ 教师讲稿： │ 🎵 导入音乐.mp3│
│ 4.总结延伸 │ "小朋友们..." │ [▶播放] │
└────────────┴───────────────────────────────────┴────────────────┘
五、开发计划
Phase 1: 后端改造
| 任务 | 说明 |
|---|---|
| 资源同步 | 上传资源时同步到 CourseResource 表 |
| 数据库迁移 | CourseScriptPage 增加 resourceIds 字段 |
| API 改造 | 保存环节时存储 resourceIds |
| API 改造 | 查询时返回关联资源详情 |
Phase 2: 超管端改造
| 任务 | 说明 |
|---|---|
| 教学环节编辑 | 增加资源关联多选组件 |
| 逐页脚本编辑 | 增加资源关联多选组件 |
| 资源选择器 | 从已上传资源中选择 |
Phase 3: 教师端改造
| 任务 | 说明 |
|---|---|
| 备课模式 | 展示环节关联资源 |
| 授课模式 | 展示环节关联资源 |
| 资源预览/播放 | 支持快速访问资源 |
六、技术实现要点
6.1 资源类型图标映射
const resourceIcons: Record<string, string> = {
EBOOK: '📄',
AUDIO: '🎵',
VIDEO: '📹',
PPT: '📊',
POSTER: '🖼️',
};
6.2 资源类型名称映射
const resourceTypeNames: Record<string, string> = {
EBOOK: '电子绘本',
AUDIO: '音频',
VIDEO: '视频',
PPT: 'PPT课件',
POSTER: '教学挂图',
};
6.3 数据加载逻辑
// 加载环节时，同时加载关联资源
const loadScriptWithResources = async (scriptId: number) => {
const script = await getScript(scriptId);
if (script.resourceIds) {
const resourceIds = JSON.parse(script.resourceIds);
script.resources = await getResourcesByIds(resourceIds);
}
return script;
};