Design · 设备云菜单与 UI 重构

设备云 UI 重构设计稿 v1

工作流:UI/UX 设计 → 设计稿评审 → 前端代码生成 → 用户验证 → 发布。设备 = 五轴 CNC 加工中心(主轴 / MQL / 回零 / JOG / G 代码 / 刀具表)。

目标仓库:infimaker-admin-fe-react-next(React 19 + Umi Max + AntD v6 + ProComponents)。协议来源:infimaker_iot_be/.../iot/v1/*.proto

→ 配套高保真原型(远程加工仓)  → Markdown 源稿

1. 信息架构(现有 5 菜单 → 3 菜单)

把"看 + 控"合进一个驾驶舱,把"查"拆成下行指令史 + 上行上报史两条线。

#新菜单角色实时性
1远程加工仓实时驾驶舱:高频遥测(status)+ 运行态(state)+ 告警(hms)+ 安全门控的加工控制(FPV 可选·默认折叠)实时(WS / 3s 轮询)
2指令列表下行指令史 + 单指令生命周期(ack/progress/reply)离线查询
3上报记录上行上报史:按 SN + 时间范围统一查询(可选类型过滤)离线查询

迁移映射(旧 → 新):

  • 设备网联/connect → 折入 远程加工仓(选 SN + 实时通道 + 状态面板)
  • 指令模拟仓(17 指令 catalog) → 折入 远程加工仓「高级指令抽屉」
  • 远程加工仓 → 升级为新主页
  • 指令列表 → 保留,微调
  • 上报记录 → 保留,改为 统一查询(不分 Tab)

2. 协议 → UI 语义(设计依据)

proto频率含义落点
statusBusinessStatus高频连续采样的运动/加工实时值(坐标、进度、主轴转速/温度、进给)远程加工仓·遥测 + 上报记录
stateBusinessState低频运行态与元数据(显示态、控制器、任务、安全、工艺、外设、机器/程序/刀具元数据)远程加工仓·运行态 + 上报记录
hmsBusinessHms事件故障/告警(严重度 + 活跃告警码 + 任务/驱动/外设/控制器诊断)远程加工仓·告警条 + 上报记录
commandCommand+Ack+Progress+Reply双向下行指令及其生命周期远程加工仓·控制 + 指令列表 + 上报记录
events(无独立 proto)设备生命周期/业务事件(接 /api/v1/events)上报记录

DisplayState(10 态,含 UNKNOWN)是 UI 主状态灯:UNKNOWN / OFFLINE / ESTOP / FAULT / SELF_TESTING / HOMING / PAUSE / MACHINING / DISABLED / READY

3. 远程加工仓(主页 · 实时驾驶舱)

┌──────────────────────────────────────────────────────────────────┐ │ 顶栏:[SN] 实时● 上报于 12:03 [🎥FPV·默认关][刷新][⚠急停!] │ ├──────────────────────────────────────────────────────────────────┤ │ (FPV 默认折叠;展开限宽 ~460px,大部分用户非必须) │ ├──────────────────────────────────────────────────────────────────┤ │ 实时遥测(主区):●MACHINING 进度%·行·主轴·温度·进给·已用时 [进度条]│ ├──────────────────────────────────────────────────────────────────┤ │ 五轴坐标(高频 status):实际/指令/工件/关节 (X/Y/Z/B/C) │ ├──────────────────────────────────────────────────────────────────┤ │ 🧩 全量状态位(控制器/任务/安全/工艺/外设) ......... [展开▾](默认折叠)│ ├──────────────────────────────────────────────────────────────────┤ │ ⚠ 告警(hms): CRITICAL DOOR_OPEN · MQL_LOW_LEVEL [展开] │ ├──────────────────────────────────────────────────────────────────┤ │ 🎬 加工控制 = ① 选命令▼ → ② 参数(localStorage) → ③ 相关状态位 │ │ (单行 pill,实时门控)→ ④ 动作:[▶执行][⏸保持][⏵恢复][⏹停止] │ │ [⚠急停] [⚙高级抽屉(17)];③ 如 门·OPEN → 执行置灰(DOOR_OPEN) │ └──────────────────────────────────────────────────────────────────┘

FPV(可选·默认折叠):大部分用户非必须;顶栏 [🎥 视频流(FPV·默认关)] 开关控制,展开时限宽 ~460px、16:9,不再占主视觉 7/12。占位态灰底 + 居中摄像机图标 + "FPV 视频流未对接";VideoStreamBar disabled,接 live.session 信令后激活。

遥测(status):进度% · 当前行/总行 · 主轴转速 · 主轴温度 · 进给率 · 已用时。坐标表:实际/指令/工件/关节(各 5 轴 X/Y/Z/B/C)。

加工控制(命令面板,自上而下):① 选命令(下拉,8 常用)→ ② 参数输入(记住上次输入,键 omp:cmdParams:{SN}:{commandId}:{param}localStorage)→ ③ 相关状态位(与命令相互影响的位,同区单行 pill,实时驱动门控)→ ④ 动作(执行/保持/恢复/停止 + 急停)。全量状态位默认折叠,命令相关位已在 ③ 内联。

运行态(state)五卡:控制器(connection/estop/enable/mode/taskState/interpState/recovery)· 任务(加工/回零/自检/自动对中·对刀)· 安全(驱动/软限位/门/MQL 联锁/硬件急停)· 工艺(主轴/进给/刀号/WCS)· 外设(MQL/手轮/延时/灯/蜂鸣,available=false 灰显)。

告警条(hms):AlarmSeverity 着色(NONE→隐 / INFO→蓝 / WARNING→橙 / ERROR→红 / CRITICAL→深红+置顶),展开 active_codes + items。

4. 控制安全门控(远程数控强制)

控制键不是自由按钮。每个动作按 state + hms 实时计算使能谓词与禁用原因;不可点显示原因 tooltip;急停恒可用且点击立即下发(无确认)。来源对齐 proto ErrorCode

动作使能谓词禁用原因(首个命中)确认
急停 ENGAGESN 已选 ∧ 指令通道可用通道不可用/离线 → 置灰「远程急停不可用」(不可用态,非可点确认)无确认,立即下发
急停/机器 RESETestop==ACTIVEdisplayState∈{ESTOP,FAULT}recovery==RUNNING硬件急停仍按下(hardwareEstop.active==TRUE)→「请先松开物理急停」Popconfirm「须已排故」
启动 START已选程序 ∧ connection==CONNECTEDtaskState==ONenable==ENABLEDmode==AUTO ∧ 门已关 ∧ MQL 正常 ∧ hms.severity∈{NONE,INFO,WARNING}(显式白名单) ∧ allHomed==TRUE依次:CNC_NOT_CONNECTEDESTOP_ACTIVEDOOR_OPENMQL_LOW_WATERFILE_NOT_SELECTED→驱动故障(drive.state==FAULT/HMS)→HMS 未知/ERROR/CRITICAL→未回零Modal「启动 {path} 自第 {line} 行」
进给保持 HOLDmachining.phase==RUNNING非运行态→「当前未在加工」无(幂等)
恢复 RESUMEmachining.phase==PAUSE ∧ 保持期间无新增阻断(门关/急停释放/无新 ERROR·CRITICAL;HMS 已知且≤WARNING)开门→DOOR_OPEN;急停→ESTOP_ACTIVE;新故障/HMS 未知→阻断Popconfirm
停止 STOPmachining.phase∈{RUNNING,PAUSE}非加工态→「当前未在加工」Popconfirm
机器 ENABLEconnection==CONNECTEDestop!=ACTIVEhms.severity∈{NONE,INFO,WARNING}CNC_NOT_CONNECTED / ESTOP_ACTIVE / HMS 未知或故障轻确认

实现要点:单一 useControlGating(snapshot) hook 返回 {enabled, reason, confirm},所有控制键消费它;reason 文案常量表扩充 catalog.ts(ErrorCode 枚举名→中文)。unknown = unsafe:HMS UNSPECIFIED/UNKNOWN 一律按阻断处理(不用 ordinal ≤ 判断)。急停钮顶栏 + 控制条各一个,红色实心优先级最高。

5. 指令列表(下行指令史)

SN 维度 ProTable(指令ID/SN/类型/模式/状态/排队·送达·完成时间),点"查看生命周期" → 抽屉 Command 概要 + Timeline(ack→progress*→reply),逐条 payloadJson。复用现有 listCommands / getCommand / listCommandEvents,改动很小。

6. 上报记录(上行上报史 · 统一查询,不分 Tab)

SN + 时间范围 为主键统一查询;「类型」下拉可选过滤(默认全部),事件类型作为列。不再分 Tab。

后端事实(已核 iot_be 源码):iot_device_event 按精确 eventType 存上行事件;CommandServicecommand.ack/progress/result 也写入此表(带 commandId,见 CommandService:165/184/203);/reports/{type} 是精确单类型查询;hms 数据在 iot_device_message_log(%hms%),不在 device_event。

类型过滤后端存储现有端点状态
statusbusiness.status/reports/status直接用
statebusiness.state/reports/state直接用
hmsmessage_log %hms%/reports/hms直接用
commandcommand.ack/progress/resultcommand.* 聚合(决策1)后端
eventsdevice_event 其余/api/v1/events(缺 FE wrapper)FE
全部device_event ∪ message_log 跨库需后端统一聚合端点后端

缺口:「全部」跨库需后端新增统一上报查询端点(SN+时间+可选类型,合并两库全局排序分页)——建议与决策1 的 command.* 聚合合并为一个端点。

7. 已确认决策(评审拍板)

  1. command 聚合:后端新增 command.* 聚合端点(全局排序 + 正确分页)。
  2. events:FE wrapper 接 /api/v1/events,通用事件浏览器。
  3. 指令模拟仓:17 指令 catalog 折进远程加工仓「高级抽屉」。
  4. FPV:可选·默认折叠(大部分用户非必须);展开限宽 ~460px、16:9。命令相关状态位与命令同区单行展示。
  5. 急停:顶栏 + 加工控制条各一个。

⚠ 由「上报记录统一查询」新引入(需确认):「全部」跨 device_event ∪ message_log 需后端聚合,建议与决策1 合并为一个端点。默认按此推进。

下一步

过稿后:① 改 routes.ts 到新 3 菜单;② 实现远程加工仓(含 useControlGating) / 指令列表 / 上报记录三页;③ 折入 connect + simulator;④ 本地 max dev 选 SMOKE-0D5305C6F1 走通实时通道 + 控制下发。