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;
|
||
};
|
||
```
|