MQTT type=5 就餐信息展示设计

目标

主页收到 MQTT type=5 消息后展示当前人员姓名、姓氏头像、自助餐类型、金额和余额;重复就餐或无法形成完整成功信息时恢复默认卡片,并在右侧记录区域展示消息提示。现有 msg_uuid / msgid HTTP 反馈行为保持不变。

消息兼容边界

页面状态

默认状态

显示“餐 / 未知 / ¥0 / ¥0”,姓名隐藏。

成功状态

圆形图标显示姓名首个 Unicode 字符,下面显示完整姓名;就餐类型固定为“自助餐”;金额和余额来自消息;右侧刷新当天记录。

重复或异常状态

左侧恢复默认,右侧居中显示 message 或 content,且不改写 MQTT 连接状态。

组件职责

验证

单元测试覆盖嵌套和根节点字段、复姓首字、非零错误码携带旧数据、重复提示、无效消息;执行单测、Debug 构建和 lint。真实 MQTT 字段仍需现场报文确认。