JW App · 智能空间管理终端

一个运行在 Android 触屏设备上的智能空间管理应用。终端把环境读数、设备控制、视频预览和业务提醒集中到同一界面，让现场操作不必在多个系统之间切换。

配套的 JW Web 管理后台负责角色权限、设备规则配置、业务记录查询与应用版本发布。

前端使用 React、TypeScript 与 Zustand，通过 HTTP、MQTT 和 WebSocket 对接不同数据来源；需要设备原生能力的操作由 Android 桥接层承接。

上方轮播展示工作台、看护管理、医护管理、空调控制与监控预览的界面原型。图中的房间、姓名、读数、记录和视频预览均为示例，不代表实时运行状态。

一个终端，几类交互

应用以屏保和工作台作为主要入口，工作台按功能切换环境展示、灯光、空调、其他设备控制和视频监控等视图，并提供照护与业务需求管理。

环境信息统一展示温度、湿度、空气质量和设备在线状态。设备控制侧提供明确的操作入口与状态反馈，触屏布局和视口适配让同一套界面适应终端屏幕。

实时数据各走自己的通道

HTTP 用于初始数据与操作请求，MQTT 用于告警、提醒和需求消息，WebSocket 接收环境传感器更新。不同通道在服务层接入，再由 Zustand 状态供页面消费。

MQTT 客户端集中封装连接、订阅、发布和断开操作；环境 WebSocket 管理连接与重连，适配消息结构后再更新环境状态。订阅随生命周期释放，减少页面切换后残留的监听。

处理长时间运行的会话

终端需要持续运行，登录状态不能只在启动时检查。请求层与环境连接处理鉴权失效后的重新登录和连接恢复，让依赖同一会话的数据重新进入可用状态。

房间与设备范围由共享状态维护，页面读取相应数据，避免每个功能各自拼装一套上下文。连接恢复、鉴权恢复与页面渲染分别处理，便于定位问题发生在哪一层。

Web 界面与原生设备之间

Android 服务层封装环境检测、设备标识读取与人脸认证等桥接能力，统一处理原生回调、结果解析和错误反馈。界面通过这层调用设备能力，不直接散落访问宿主对象。

视频模块对接专用播放器，将设备选择、播放鉴权和实时流接入串联起来。页面和播放器的生命周期需要协调，既保持操作反馈，也管理连接与播放资源。

从首屏到部署产物

工程将消息连接安排在首次渲染之后，降低启动阶段的工作集中度；状态订阅按页面需要选择字段。Hash 路由配合静态构建，构建脚本还支持打包 WAR 产物，适配既有部署环境。

这个项目的重点是界面、实时状态与原生设备之间的协作：用户看到的是一次点击或一个提醒，背后需要连接、鉴权、消息和设备能力共同完成。

本文仅展示通用技术架构，已省略客户名称、人员信息、设备标识和连接配置。