289 lines
14 KiB
Markdown
289 lines
14 KiB
Markdown
|
# 教学环节资源关联设计
|
|||
|
|
|
|||
|
|
> 创建时间：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<string, string> = {
|
|||
|
|
EBOOK: '📄',
|
|||
|
|
AUDIO: '🎵',
|
|||
|
|
VIDEO: '📹',
|
|||
|
|
PPT: '📊',
|
|||
|
|
POSTER: '🖼️',
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 6.2 资源类型名称映射
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const resourceTypeNames: Record<string, string> = {
|
|||
|
|
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;
|
|||
|
|
};
|
|||
|
|
```
|