# 教学环节资源关联设计 > 创建时间：2025-02-14 > 最后更新：2025-02-14 > 状态：已确认 --- ## 一、需求背景 ### 1.1 问题描述 在当前系统中： - 超管端创建课程包时，上传了数字资源（电子绘本、音频、视频）和教学材料（PPT、挂图） - 但编辑教学环节时，**没有将资源与具体环节关联** - 导致教师端查看环节时，**环节材料始终为空** ### 1.2 业务需求 教师在授课时，需要： 1. **备课阶段**：了解每个环节需要使用哪些资源 2. **授课阶段**：快速访问和播放当前环节的资源 --- ## 二、设计方案 ### 2.1 关联粒度 **采用方案B：关联到逐页脚本级别** - 教学环节（环节级别）：可以关联资源 - 逐页脚本（页面级别）：也可以关联资源 这样设计更灵活，例如： - 导入环节关联：动画视频、背景音乐 - 第3页脚本关联：第3页的特定音频 ### 2.2 资源范围 以下资源都可以被关联： - 数字资源：电子绘本、音频、视频 - 教学材料：PPT课件、教学挂图 ### 2.3 关联规则 | 规则 | 说明 | |------|------| | 多选 | 一个环节/页面可关联多个资源 | | 复用 | 同一资源可被多个环节/页面关联 | | 可选 | 环节/页面可以不关联任何资源 | --- ## 三、数据模型 ### 3.1 现有表结构 **CourseResource（课程资源表）** ```prisma 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（教学环节表）** ```prisma model CourseScript { id Int courseId Int stepIndex Int stepName String // ... resourceIds String? // JSON数组，存储关联的资源ID } ``` **CourseScriptPage（逐页脚本表）** - 需要新增字段 ```prisma 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 资源类型图标映射 ```typescript const resourceIcons: Record = { EBOOK: '📄', AUDIO: '🎵', VIDEO: '📹', PPT: '📊', POSTER: '🖼️', }; ``` ### 6.2 资源类型名称映射 ```typescript const resourceTypeNames: Record = { EBOOK: '电子绘本', AUDIO: '音频', VIDEO: '视频', PPT: 'PPT课件', POSTER: '教学挂图', }; ``` ### 6.3 数据加载逻辑 ```typescript // 加载环节时，同时加载关联资源 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; }; ```