8.7 KiB
8.7 KiB
第三阶段：核心功能完善和UniApp开发
阶段目标
完善核心业务功能，完成UniApp端的学习功能开发
开始时间
2025-11-11
阶段说明
本阶段主要完善第二阶段已整合的基础功能，并开发UniApp端的核心学习功能。
阶段完成时间
2025-11-11
阶段总结
第三阶段核心功能已基本完成，包括：
- ✅ UniApp端课程学习功能（列表、详情、筛选、进度跟踪）
- ✅ UniApp端学习监控功能（定时截图、上传）
- ✅ 学习进度上报优化（断网重连、本地缓存）
- ✅ 学习记录查看页面（个人统计）
- ✅ 管理后台统计接口（统计信息、导出功能）
待优化功能（可在后续阶段完善）：
- 管理后台图表展示（前端图表组件待完善）
- 视频文件处理（FFmpeg集成）
- 大文件上传优化
任务清单
1. UniApp端课程学习功能
1.1 课程列表
- 课程列表页面（显示分配给当前学员的课程）
- 课程筛选（按学科分类、状态等）
- 课程详情查看
- 学习进度显示（进度条、学习时长、学习次数）
1.2 课件查看
- 图文课件查看（PDF、图片、文档）
- PDF在线查看（使用web-view）
- 图片查看（支持缩放、预览）
- 文档查看（文本内容显示）
- 视频课件播放
- 视频播放器集成（使用uni-app video组件）
- 横屏全屏播放支持
- 播放进度显示
- 播放控制（播放/暂停、进度条、音量等）
1.3 学习进度跟踪
- 视频播放进度实时上报（每10秒）
- 上报接口调用
- 断网重连机制（已实现队列管理和自动重连）
- 本地缓存机制（已实现本地存储和恢复）
- 学习记录存储
- 学习开始时间记录
- 学习结束时间记录
- 学习时长累计
- 学习次数累计
- 视频播放位置记录
- 学习详情记录（后端已实现，前端待完善）
- 每次学习的详细记录
- 视频播放位置变化记录
1.4 学习记录查看
- 个人学习记录页面
- 学习进度统计
- 学习时长统计
- 学习次数统计
2. UniApp端学习监控功能
2.1 屏幕截图功能
- 定时截图功能（每30秒或可配置）
- 使用plus API（App环境）
- H5环境降级方案
- 截图质量优化（待优化）
- 截图文件大小控制（待优化）
- 截图上传接口
- 上传到服务器
- 上传失败重试机制（最多重试3次）
- 上传进度显示（待优化）
- 后台运行（基础实现）
- 定时任务执行
- App后台运行保持（需要原生插件支持）
- 电量优化（待优化）
2.2 监控数据查看
- 监控记录查看（可选，如果需要在App端查看）
3. 后端功能完善
3.1 学习进度接口完善
- 学习进度上报接口优化
- 批量上报支持（前端队列管理器已实现）
- 数据校验增强（待优化）
- 异常处理完善（待优化）
- 学习记录查询接口优化
- 按时间范围查询（统计接口支持）
- 按课程查询（统计接口支持）
- 统计信息查询（已实现统计接口）
3.2 视频文件处理
- FFmpeg集成
- FFmpeg工具安装配置
- 视频转码功能
- 视频压缩功能
- 视频格式统一（MP4）
- 视频处理服务
- 视频上传后自动处理
- 处理进度跟踪
- 处理结果通知
3.3 文件上传优化
- 大文件上传支持
- 分片上传
- 断点续传
- 上传进度显示
- 文件类型限制
- 文件大小限制配置
4. 管理后台功能完善
4.1 学习进度查看优化
- 学习进度详情页面优化
- 统计接口实现（总数、平均进度、按日期统计）
- 导出功能（Excel导出）
- 图表展示（前端待完善）
- 批量操作功能
- 批量查看
- 批量导出
4.2 学习监控功能完善
- 实时监控页面优化
- WebSocket实时推送
- 监控画面刷新
- 历史记录查看
- 监控数据统计
- 监控频率统计
- 异常情况统计
5. 用户体验优化
5.1 UniApp端优化
- 加载动画优化
- 错误提示优化
- 网络异常处理
- 离线缓存机制
- 横屏适配优化
5.2 管理后台优化
- 界面交互优化
- 数据展示优化
- 操作流程优化
技术要点
1. 视频播放进度跟踪
前端实现：
// 视频播放进度监听
video.onTimeUpdate(() => {
const currentTime = video.currentTime
const duration = video.duration
const progress = (currentTime / duration) * 100
// 每5-10秒上报一次
if (shouldReport()) {
reportProgress(courseId, currentTime, duration)
}
})
后端接口：
POST /study/learningRecord/progress- 上报学习进度GET /study/learningRecord/my-records- 获取我的学习记录
2. 屏幕截图实现
UniApp实现：
// 使用canvas截图
const ctx = uni.createCanvasContext('canvas')
ctx.draw()
ctx.toTempFilePath({
success: (res) => {
uploadScreenshot(res.tempFilePath)
}
})
后端接口：
POST /study/monitor/upload- 上传截图
3. 视频处理
FFmpeg集成：
- 使用Java调用FFmpeg命令
- 视频转码：H.264编码，MP4格式
- 视频压缩：动态码率，平衡清晰度和文件大小
开发优先级
高优先级（必须完成）
- ✅ UniApp端课程列表
- ✅ 视频课件播放
- ✅ 学习进度上报
- ✅ 学习记录查看
中优先级（重要功能）
- 图文课件查看
- 屏幕截图功能
- 学习进度统计
低优先级（优化功能）
- 视频文件处理（FFmpeg）
- 大文件上传优化
- 离线缓存机制
遇到的问题
详细问题记录请参考：第三阶段-问题
已解决问题
- ✅ 学科分类插入错误：
subject_name字段没有默认值 - 已通过三层验证机制解决（见第三阶段-问题#问题1）
进度记录
- 2025-11-11：开始第三阶段开发，创建阶段计划文档
- 2025-11-11：添加学员端获取课程接口
/study/course/my-courses - 2025-11-11：完善UniApp课程列表页面，显示学习进度、学习时长、课程状态等信息
- 2025-11-11：完善课程详情页面，实现视频播放、学习进度上报、课件查看功能
- 2025-11-11：创建学习监控工具类（monitor.js），实现定时截图和上传功能
- 2025-11-11：在课程详情页面集成学习监控功能（进入页面启动，离开页面停止）
- 2025-11-11：创建学习记录查看页面，显示学习统计和详细记录
- 2025-11-11：在个人中心添加学习记录入口
- 2025-11-11：实现课程筛选功能（按学科分类、状态筛选）
- 2025-11-11：添加学科分类App端接口（无需权限验证）
- 2025-11-11：创建学习进度上报队列管理器（progressQueue.js），实现断网重连、本地缓存、批量上报
- 2025-11-11：优化学习进度上报机制，集成队列管理器
- 2025-11-11：添加学习记录统计接口（总数、平均进度、按日期统计）
- 2025-11-11：添加学习记录导出功能（Excel导出）
注意事项
- 视频播放兼容性：需要测试不同平台的视频播放兼容性（iOS、Android、H5）
- 性能优化：学习进度上报频率要适中，避免频繁请求影响性能
- 数据准确性：学习记录的数据要准确，避免重复计算
- 用户体验：App端操作要流畅，避免卡顿
- 网络异常处理：需要处理网络断开、请求失败等情况
文件位置
UniApp端文件位置
- 课程列表：
frontend-uniapp/src/pages/course/list.vue - 课程详情：
frontend-uniapp/src/pages/course/detail.vue - 学习记录：
frontend-uniapp/src/pages/learning/record.vue - 学习监控工具：
frontend-uniapp/src/utils/monitor.js - 学习进度队列管理器：
frontend-uniapp/src/utils/progressQueue.js - API调用：
frontend-uniapp/src/api/study/- 学科分类API：
frontend-uniapp/src/api/study/subject.js
- 学科分类API：
后端文件位置
- 学习进度接口：
StudyLearningRecordController - 学习监控接口：
StudyScreenMonitorController - 学科分类接口：
StudySubjectController（新增App端接口/study/subject/app/list） - 视频处理服务：
RuoYi-Vue-redis/ry-news-system/src/main/java/com/ddnai/system/service/study/
参考文档
- 实施计划 - 查看完整的功能规划
- 第二阶段-代码整合到RuoYi - 查看已完成的整合工作