157 lines
5.5 KiB
Markdown
157 lines
5.5 KiB
Markdown
# 监控学习终端的学习界面功能问题分析报告
|
||
|
||
## 问题概述
|
||
用户反馈"监控学习终端的学习界面"功能无法看到界面，经过代码分析发现了几个关键问题。
|
||
|
||
## 发现的问题
|
||
|
||
### 1. **菜单配置缺失** ⚠️ 关键问题
|
||
**问题描述：**
|
||
- 项目使用动态路由机制，路由从后端数据库的 `sys_menu` 表获取
|
||
- `screenStream` 页面（实时监控界面）没有在数据库菜单表中配置
|
||
- 因此无法在侧边栏看到菜单项，无法访问该页面
|
||
|
||
**影响：**
|
||
- 教师端无法通过菜单访问实时监控界面
|
||
- 功能虽然已实现，但无法使用
|
||
|
||
**解决方案：**
|
||
需要在数据库 `sys_menu` 表中添加菜单配置，包括：
|
||
1. 主菜单项：实时监控（screenStream）
|
||
2. 相关权限按钮：控制监控、查看列表等
|
||
|
||
### 2. **学生端实现缺失** ⚠️ 关键问题
|
||
**问题描述：**
|
||
- 代码中只有教师端的监控界面实现
|
||
- **缺少学生端的实现**，学生端需要：
|
||
- 连接 WebSocket (`/ws/screenStream/{userId}`)
|
||
- 接收监控控制指令（start_capture/stop_capture）
|
||
- 捕获屏幕截图
|
||
- 将截图以 base64 格式通过 WebSocket 发送给服务器
|
||
|
||
**当前状态：**
|
||
- 后端 WebSocket 处理器已实现，可以接收学生端连接
|
||
- 后端控制器可以发送控制指令
|
||
- 但**没有学生端代码**来执行屏幕捕获和发送
|
||
|
||
**影响：**
|
||
- 即使菜单配置好了，也无法真正监控学生屏幕
|
||
- 学生端无法响应监控指令
|
||
|
||
**解决方案：**
|
||
需要开发学生端功能：
|
||
1. 学生端 WebSocket 客户端连接
|
||
2. 屏幕截图捕获功能（可能需要使用浏览器 API 或第三方库）
|
||
3. 定时发送截图数据
|
||
|
||
### 3. **监控记录页面可能也有菜单问题**
|
||
**问题描述：**
|
||
- `study-ui/src/views/study/monitor/index.vue` 是监控记录管理页面
|
||
- 该页面可能也没有在菜单中配置
|
||
|
||
**解决方案：**
|
||
同样需要在菜单表中配置该页面的菜单项
|
||
|
||
## 技术架构分析
|
||
|
||
### 已实现的部分 ✅
|
||
1. **后端 WebSocket 处理器** (`ScreenStreamWebSocketHandler.java`)
|
||
- 支持学生端和监控端连接
|
||
- 支持屏幕帧数据转发
|
||
- 支持控制指令发送
|
||
|
||
2. **后端 REST API** (`ScreenStreamController.java`)
|
||
- 启动/停止屏幕流捕获
|
||
- 检查学生在线状态
|
||
- 获取在线学生数
|
||
|
||
3. **前端监控界面** (`study-ui/src/views/study/screenStream/index.vue`)
|
||
- 学生列表显示
|
||
- 实时屏幕画面显示
|
||
- WebSocket 连接管理
|
||
- 监控控制功能
|
||
|
||
4. **监控记录管理** (`StudyScreenMonitorController.java`)
|
||
- 截图上传接口（供 App 端使用）
|
||
- 监控记录查询
|
||
- 监控记录删除
|
||
|
||
### 缺失的部分 ❌
|
||
1. **菜单配置** - 数据库菜单表配置
|
||
2. **学生端实现** - 屏幕捕获和 WebSocket 客户端
|
||
3. **权限配置** - 相关权限标识可能未配置到角色
|
||
|
||
## 建议的修复步骤
|
||
|
||
### 第一步：添加菜单配置
|
||
执行 SQL 添加菜单项（需要先查询"学习管理"菜单的 parent_id）：
|
||
|
||
```sql
|
||
-- 1. 添加"实时监控"菜单（假设学习管理菜单ID为 XXXX）
|
||
INSERT INTO sys_menu (
|
||
menu_name, parent_id, order_num, path, component,
|
||
is_frame, is_cache, menu_type, visible, status,
|
||
perms, icon, create_by, create_time, remark
|
||
) VALUES (
|
||
'实时监控', XXXX, 10, 'screenStream', 'study/screenStream/index',
|
||
1, 0, 'C', '0', '0',
|
||
'study:monitor:control', 'monitor', 'admin', sysdate(), '监控学习终端的学习界面'
|
||
);
|
||
|
||
-- 获取刚插入的菜单ID
|
||
SELECT @menuId := LAST_INSERT_ID();
|
||
|
||
-- 2. 添加权限按钮
|
||
INSERT INTO sys_menu (menu_name, parent_id, order_num, path, component, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time) VALUES
|
||
('监控控制', @menuId, 1, '#', '', 1, 0, 'F', '0', '0', 'study:monitor:control', '#', 'admin', sysdate()),
|
||
('监控查询', @menuId, 2, '#', '', 1, 0, 'F', '0', '0', 'study:monitor:list', '#', 'admin', sysdate());
|
||
|
||
-- 3. 添加"监控记录"菜单（如果还没有）
|
||
INSERT INTO sys_menu (
|
||
menu_name, parent_id, order_num, path, component,
|
||
is_frame, is_cache, menu_type, visible, status,
|
||
perms, icon, create_by, create_time, remark
|
||
) VALUES (
|
||
'监控记录', XXXX, 11, 'monitor', 'study/monitor/index',
|
||
1, 0, 'C', '0', '0',
|
||
'study:monitor:list', 'log', 'admin', sysdate(), '学习监控记录管理'
|
||
);
|
||
```
|
||
|
||
### 第二步：开发学生端功能
|
||
需要创建学生端页面或组件，实现：
|
||
1. WebSocket 连接管理
|
||
2. 屏幕截图捕获（使用 `html2canvas` 或类似库）
|
||
3. 定时发送截图数据
|
||
|
||
### 第三步：配置角色权限
|
||
在系统管理 -> 角色管理中，为相应角色分配：
|
||
- `study:monitor:control` - 监控控制权限
|
||
- `study:monitor:list` - 监控查询权限
|
||
- `study:monitor:query` - 监控详情查询权限
|
||
- `study:monitor:remove` - 监控记录删除权限
|
||
|
||
## 总结
|
||
|
||
**核心问题：**
|
||
1. ✅ 功能代码已实现
|
||
2. ❌ 菜单配置缺失（无法访问）
|
||
3. ❌ 学生端实现缺失（无法真正监控）
|
||
|
||
**优先级：**
|
||
1. **高优先级**：添加菜单配置（让界面可见）
|
||
2. **高优先级**：开发学生端功能（让功能可用）
|
||
3. **中优先级**：配置角色权限（让权限正确）
|
||
|
||
## 备注
|
||
|
||
- 学生端屏幕捕获在浏览器中有限制，可能需要：
|
||
- 使用 `html2canvas` 库捕获当前页面
|
||
- 或使用浏览器扩展/桌面应用进行全屏捕获
|
||
- 或使用 Electron 等桌面应用框架
|
||
|
||
- WebSocket 配置看起来是正确的，`WebSocketConfig.java` 已正确配置
|
||
|
||
- 数据库表 `monitor_record` 应该已存在（从 Mapper 文件可以看出）
|
||
|