guoyu/Study-Vue-redis/监控学习界面功能问题分析报告.md

监控学习终端的学习界面功能问题分析报告

问题概述

用户反馈"监控学习终端的学习界面"功能无法看到界面，经过代码分析发现了几个关键问题。

发现的问题

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）：

-- 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 文件可以看出）