← 返回项目库

XLeRobot 机器人控制中心

面向 XLeRobot 的网页端控制与监控中心，集中呈现视频预览、遥测、日志、诊断和安全控制。

该前端使用 React、TypeScript 与 Vite 构建，通过 Socket.IO 事件通道连接机器人控制服务；内置边界清晰的本地演示适配器，可在未接入硬件时展示真实事件 schema 对应的交互流程，并可切换到真实服务模式。

真实界面

项目截图

共 8 张

实时遥测
系统日志
系统诊断
浅色模式
正在录制
相机已复位
连接探测完成
高速

Capabilities

核心功能

✓本地预览与真实 Socket.IO 服务模式切换
✓机器人视频监控画布、状态徽标和录制状态展示
✓电池、移动速度、温度、电压、延迟和帧率遥测
✓系统日志列表与控制事件回执展示
✓控制事件通道、视频流通道和性能诊断视图
✓底部速度档位、方向按钮和虚拟摇杆控制
✓摄像头复位、连接探测和紧急停止操作
✓简体中文界面与浅色/深色主题切换

适用场景

机器人研发阶段在本地浏览器查看控制服务的遥测和连接状态
项目交付或教学演示时展示移动控制、视频监控和系统诊断流程
实验室运维人员在接入真实服务后执行相机复位、连接探测和紧急停止

适合谁

机器人研发人员、实验室运维人员、教学演示人员和需要查看机器人状态的技术团队。

商业化思路

适合作为机器人项目交付组件、内部运维工具或控制方案前端定制模块，通过实施部署、界面定制和后续维护服务交付。

你会拿到什么

  • ✓已完成简体中文界面、本地演示适配器和交互提示的项目源码
  • ✓保留 React/Vite 构建配置、Socket.IO 事件入口及上游许可证文件
  • ✓可复现的 8 张运行时中文界面证据截图与验证清单

部署流程

  1. 1进入 web_control/client，执行 npm ci 安装前端依赖。
  2. 2执行 npm run build 生成 dist 静态产物，并使用静态服务或 npm run preview 托管。
  3. 3本地演示保持 VITE_DEMO_MODE=true；接入真实服务时设置 VITE_DEMO_MODE=false，并配置 VITE_SERVER_HOST、VITE_SERVER_PORT 和 VITE_SERVER_PROTOCOL。
  4. 4如需真实机器人控制，同时按 web_control/server 的依赖说明部署服务端、视频流和硬件运行环境。

真实验证结果

已通过 8 个真实浏览器运行状态的中文界面证据，覆盖遥测、日志、诊断、主题切换、录制、相机复位、连接探测和速度档位；HTTP、可见正文、控制台、坏图和横向溢出质量门均通过。截图明确标注本地预览与演示数据，未宣称已连接真实机器人。

部署前须知

默认本地预览使用演示数据，不会向真实机器人发送指令；切换 VITE_DEMO_MODE=false 后，遥测、视频帧和控制回执依赖可用的 web_control/server、Socket.IO 服务及硬件环境。

部署难度

中等

最低配置

开发与构建需要 Node.js 18+、npm 和可用的前端构建环境；本地预览使用 Vite preview。真实运行需额外部署 web_control/server 及其 Socket.IO、视频流和机器人硬件依赖。

开源许可证

MIT

最后验证

2026-09-02

技术栈

ReactTypeScriptViteSocket.IO ClientLucide ReactCSS

授权说明

仓库根目录 LICENSE 与 XLeVR/LICENSE 均保留在交付源码中；本次修改仅涉及前端中文本地化、本地预览适配器和界面演示文案，不改变上游许可边界。

Release notes

版本记录

1 个已发布版本

vcn-8e89166d6aa3 当前推荐

完成简体中文控制台重构，增加本地演示适配器以复现 Socket.IO 控制事件 schema，补齐遥测、日志、诊断、视频控制和安全操作的可展示状态，并保留真实服务切换入口。

部署要求：构建需要 Node.js 18+ 与 npm；本地预览可直接使用演示适配器。真实机器人模式需要 web_control/server、Socket.IO、视频流和硬件依赖。

已知问题：本地演示状态不代表真实机器人在线；真实模式的遥测、视频帧、移动指令和相机操作是否可用，取决于服务端与硬件配置。

登录后领取