161 lines
4.3 KiB
Markdown
161 lines
4.3 KiB
Markdown
|
# Homework 数据更新完成报告
|
||
|
|
|
||
|
|
## 更新时间
|
||
|
|
2025-10-07 13:34
|
||
|
|
|
||
|
|
## 更新概述
|
||
|
|
成功将 homework 页面数据从硬编码方式改为基于日历课程数据(`calendarCourses.json`)动态生成,并匹配作业海报图片(`文旅_作业海报.json`)。
|
||
|
|
|
||
|
|
## 数据结构验证结果
|
||
|
|
|
||
|
|
### ✅ 结构完整性检查
|
||
|
|
- [x] 复合能力课存在
|
||
|
|
- [x] 垂直能力课存在
|
||
|
|
- [x] 复合能力课有 `list` 字段
|
||
|
|
- [x] 垂直能力课有 `list` 字段
|
||
|
|
- [x] 复合能力课有 `units` 字段
|
||
|
|
- [x] 垂直能力课有 `units` 字段
|
||
|
|
- [x] "展会主题与品牌定位" 有 `isShowCase: true` 标记
|
||
|
|
|
||
|
|
### 📊 课程数量统计
|
||
|
|
|
||
|
|
**复合能力课 (复合技能阶段)**
|
||
|
|
- 单元数: 10
|
||
|
|
- 课程总数: 79 (包含 7 个"单元小结")
|
||
|
|
- 有海报的课程: 63
|
||
|
|
- 无海报的课程: 9 (主要是职业规划和认知类课程)
|
||
|
|
|
||
|
|
**垂直能力课 (垂直方向阶段 - 商业活动策划)**
|
||
|
|
- 单元数: 12
|
||
|
|
- 课程总数: 123
|
||
|
|
- 有海报的课程: 120
|
||
|
|
- 无海报的课程: 3 (职业规划课)
|
||
|
|
|
||
|
|
**总计**
|
||
|
|
- 课程总数: 202
|
||
|
|
- 匹配海报: 183
|
||
|
|
- 未匹配海报: 12
|
||
|
|
|
||
|
|
## 数据来源
|
||
|
|
|
||
|
|
1. **课程数据来源**: `src/data/calendarCourses.json` (514天的日历数据)
|
||
|
|
2. **海报映射数据**: `homework_poster_mapping.json` (374个课程名称→图片URL映射)
|
||
|
|
3. **目标文件**: `src/data/mockData.js` (lines 1899-2427)
|
||
|
|
|
||
|
|
## 生成脚本
|
||
|
|
|
||
|
|
**文件**: `rebuild_homework_from_calendar.cjs`
|
||
|
|
|
||
|
|
**功能**:
|
||
|
|
- 从日历数据提取"复合技能阶段"和"垂直方向阶段"课程
|
||
|
|
- 按单元名称组织课程(`units`字段)
|
||
|
|
- 生成扁平化课程列表(`list`字段)
|
||
|
|
- 匹配作业海报URL
|
||
|
|
- 为"展会主题与品牌定位"添加 `isShowCase: true` 标记
|
||
|
|
- 自动更新 mockData.js
|
||
|
|
|
||
|
|
**使用方法**:
|
||
|
|
```bash
|
||
|
|
node rebuild_homework_from_calendar.cjs
|
||
|
|
```
|
||
|
|
|
||
|
|
## 修复的问题
|
||
|
|
|
||
|
|
### 问题1: 原始方法错误
|
||
|
|
- **错误**: 直接硬编码修改 mockData.js 的 homework 数据
|
||
|
|
- **正确**: 应该基于日历课程数据生成
|
||
|
|
|
||
|
|
### 问题2: 缺失 `list` 字段
|
||
|
|
- **错误**: HomeworkPage index.jsx:23 访问 `homework[0].list.length` 导致 TypeError
|
||
|
|
- **原因**: 初始版本脚本只生成了 `units` 字段,缺少 `list` 字段
|
||
|
|
- **修复**: 添加 `generateListString()` 函数,生成扁平化的课程列表
|
||
|
|
|
||
|
|
## mockData.js 数据结构
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
homework: [
|
||
|
|
{
|
||
|
|
name: "复合能力课",
|
||
|
|
id: 1,
|
||
|
|
units: [
|
||
|
|
{
|
||
|
|
name: "单元名称",
|
||
|
|
courses: [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: "课程名称",
|
||
|
|
level: "completed",
|
||
|
|
imageUrl: "海报URL" // 有海报的课程
|
||
|
|
},
|
||
|
|
// ... 更多课程
|
||
|
|
]
|
||
|
|
},
|
||
|
|
// ... 更多单元
|
||
|
|
],
|
||
|
|
list: [
|
||
|
|
// 所有课程的扁平化列表 (79个课程)
|
||
|
|
{ id: 1, name: "课程名称", level: "completed", imageUrl: "..." },
|
||
|
|
// ...
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "垂直能力课",
|
||
|
|
id: 2,
|
||
|
|
units: [ /* 12个单元 */ ],
|
||
|
|
list: [ /* 123个课程 */ ]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
```
|
||
|
|
|
||
|
|
## 特殊处理
|
||
|
|
|
||
|
|
1. **"展会主题与品牌定位"课程**
|
||
|
|
- 位置: mockData.js:2244
|
||
|
|
- 特殊标记: `isShowCase: true`
|
||
|
|
- 用途: 使该课程在页面上可点击(链接到展会案例)
|
||
|
|
|
||
|
|
2. **无海报课程**
|
||
|
|
- 显示默认图标 ICON1
|
||
|
|
- 主要是职业规划、认知类课程
|
||
|
|
|
||
|
|
## 开发服务器状态
|
||
|
|
|
||
|
|
✅ **运行正常**
|
||
|
|
- 地址: http://localhost:5150/
|
||
|
|
- 状态: Running
|
||
|
|
- HMR: 已自动更新 HomeworkPage 组件
|
||
|
|
- 错误: 无
|
||
|
|
|
||
|
|
## 验证步骤
|
||
|
|
|
||
|
|
1. ✅ 数据结构完整性检查 - 通过
|
||
|
|
2. ✅ 课程数量验证 - 通过 (79 + 123 = 202)
|
||
|
|
3. ✅ 海报匹配率 - 90.6% (183/202)
|
||
|
|
4. ✅ 特殊标记验证 - isShowCase 存在
|
||
|
|
5. ✅ 开发服务器运行 - 无错误
|
||
|
|
6. ⏳ 浏览器页面验证 - 待用户确认
|
||
|
|
|
||
|
|
## 建议的下一步
|
||
|
|
|
||
|
|
用户可访问 http://localhost:5150/ 并导航到作业页面,验证:
|
||
|
|
- 页面加载无错误
|
||
|
|
- 79个复合能力课程正确显示
|
||
|
|
- 123个垂直能力课程正确显示
|
||
|
|
- 有海报的课程显示对应图片
|
||
|
|
- 无海报的课程显示默认图标
|
||
|
|
- "展会主题与品牌定位"课程可点击
|
||
|
|
|
||
|
|
## 相关文件
|
||
|
|
|
||
|
|
- ✅ `rebuild_homework_from_calendar.cjs` - 数据生成脚本
|
||
|
|
- ✅ `homework_poster_mapping.json` - 海报映射文件
|
||
|
|
- ✅ `homework_courses_with_images.json` - 带图片的课程数据
|
||
|
|
- ✅ `verify_homework_structure.cjs` - 结构验证脚本
|
||
|
|
- ✅ `src/data/mockData.js` - 已更新的mock数据
|
||
|
|
- ✅ `src/data/calendarCourses.json` - 日历课程数据源
|
||
|
|
|
||
|
|
---
|
||
|
|
**状态**: ✅ 完成
|
||
|
|
**验证**: ✅ 通过
|
||
|
|
**错误**: 无
|