运维端 - 消息中心(Y08)

← 返回总览 Y00 首页 Y01 工单待办 Y02 工单详情 Y03 扫一扫·设备操作 Y04 我的 Y05 名下资产 Y06 设备列表 Y07 设备详情 Y08 消息中心 Y09 消息详情
9:41

页面说明

最后更新:2026-08-31

页面定位 — 设计文档 §9

运维端消息中心(一级页,「消息」Tab)。聚合设备异常 / 工单通知 / 系统公告三类消息,支持分类切换、未读管理、全部已读;消息详情统一由 Y09 中转。

核心内容

模块说明场景差异
标题栏「消息」标题 + 右侧「全部已读」(二次确认后清未读角标 + toast 提示已读条数)全部
分类胶囊全部 / 设备异常 / 工单通知 / 系统公告(各带数量,默认「全部」)全部
消息卡片未读红点 + 类型标签(设备异常=黄 / 工单通知=蓝 / 系统公告=灰)+ 标题(未读加粗)+ 摘要(时间 · 区域/设备/问题类型)全部
底部导航首页 / 工单 / 消息(高亮,未读数字角标)/ 我的全部

关键交互

操作 触发条件 前置校验 反馈形式 异常处理 行为
点击消息卡片任意消息-跳转 Y09,进入即标记已读-y09.html?id=MSG-xxx
分类切换分类胶囊点击-列表按类型过滤-全部 / device_alert / work_order / announcement
全部已读标题栏「全部已读」存在未读消息二次确认 → 清未读角标 + toast「已将 N 条消息标为已读」;停留本页不跳转无未读时按钮置灰confirm → Y.markAllRead() + 双根同步清零
点击底部导航底部导航 tab-跳转对应一级页-首页 y00 / 工单 y01 / 消息 本页 / 我的 y04

页面状态

场景展示内容
有未读消息卡片未读红点 + 加粗标题;底部「消息」tab 未读数字角标
全部已读红点与角标消失;「全部已读」置灰;toast 提示已读条数后自动消失
分类无消息空态文案「暂无该类消息」

跳转关系

Y08 消息中心(一级页,消息 Tab)
├─ 消息卡片 → Y09(y09.html?id=MSG-xxx)
├─ 底部导航「首页」→ Y00(y00.html)
├─ 底部导航「工单」→ Y01(y01.html)
├─ 底部导航「消息」→ 本页(高亮)
└─ 底部导航「我的」→ Y04(y04.html)

业务规则

•单条进入 Y09 详情即标记已读(§11.4),已读状态 localStorage 跨页同步
•未读角标=跨三类未读总数,全部已读后消失
•消息保留期 90 天(建议值,原型不做保留期界面)
•列表一次性加载不分页(对齐 H12 口径)
查看更新记录
2026-09-01
修复:全部已读确认后底部导航未读角标不同步(双 React 根经状态总线同步清零);新增 toast「已将 N 条消息标为已读」;停留本页不跳转。
2026-08-31
新增。运维端消息中心(Y08):三类消息分类切换 + 未读红点/加粗 + 全部已读二次确认 + 底部 4 tab 未读角标;已读跨页(localStorage);数据源=y-data.js。