5.1 KiB
5.1 KiB
全局监控状态一致性与异常下钻审计
本轮结论
全局监控从“可看摘要、再手动组合筛选与跳转”升级为可直接行动的实时工作台:车辆总数、在线、行驶、离线、静止、告警和无实时位置均可从摘要原位进入对应任务;搜索、协议或状态变化会同步清除已经不再属于当前范围的车辆详情,避免地图、列表和右侧详情出现幽灵选中;列表模式继续标识地图当前选中车辆。单车详情新增“事件流”和“质量差异”,进入事件中心或运维质量后保留 VIN、地图缩放、边界和详情展开状态,事件二次筛选也不会丢失返回路径。
本轮沿用现有 Semi UI、监控蓝绿状态语义、地图工作区与返回上下文条。现有页面和同视口基线截图就是视觉目标,没有新增品牌、色板、图标体系或页面结构,因此没有使用 ImageGen 生成脱离产品的视觉概念。
审计步骤与健康度
- 从摘要发现并进入任务 — 需优化 → 健康。 基线 8 个摘要只能阅读,操作员还要回到状态下拉框重复选择。优化后总数、在线、行驶、离线、静止和无位置直接更新同一
statusURL;告警车辆直接进入待处理事件,卡片使用真实 Button、aria-pressed和唯一名称。证据:优化前总览、优化后总览、筛选联动。 - 保持地图、列表和详情一致 — 需优化 → 健康。 原筛选变化后可能继续显示范围外车辆详情,列表模式也看不出地图当前选中项。现在关键字、协议、状态、批量搜索和清空动作统一清理失效选中;切到列表时仍以蓝色行/卡标识当前地图车辆,点击可返回地图定位。
- 从异常下钻到证据 — 需优化 → 健康。 原单车详情只有档案、轨迹、历史和里程,虽然显示当前告警数量,却没有直达事件或质量差异的入口。现在快捷区用 3 × 2 紧凑网格增加“事件流 N”和“质量差异”,告警入口使用克制的红色弱强调。证据:优化前车辆详情、优化后异常入口。
- 跨模块核对后回到原监控位置 — 需优化 → 健康。 事件中心应用新筛选时曾丢失
monitorReturn,运维质量也没有可见返回条。现在事件筛选继续保留监控来源,运维质量在差异队列、单车诊断和全局健康三个视图统一显示返回上下文;真实浏览器验证返回 URL 恢复 VIN、Zoom 15、地图边界和详情展开。证据:事件筛选与返回。 - 移动端继续监控 — 健康。 390 × 844 下摘要保持 2 × 2 主指标与一条支持证据,地图仍占主视觉,底部导航、缩放控件、状态图例互不遮挡;
document、body和内容区均为scrollWidth === 390。证据:移动端监控。
五点视觉一致性账本
| 检查点 | 基线 | 实现 | 结论 |
|---|---|---|---|
| 页面容器 | 筛选、摘要、地图工作区、实时状态条 | 容器层级完全不变 | 未新增 hero、卡片墙或装饰层 |
| 摘要层级 | 8 个只读数值 | 同密度可操作指标,筛选时首项改为“筛选结果” | 从读数到任务,不增加首屏高度 |
| 地图/列表状态 | 地图选中在列表中不可见 | 当前选中行/卡使用现有蓝色弱背景 | 语义与地图选中一致 |
| 单车快捷区 | 4 列单行 | 3 列两行,共 6 个真实工作流 | 标签不截断,告警仅弱红强调 |
| 移动端 | 地图优先、摘要折叠 | 保持原布局,仅把主摘要变成按钮 | 390px 无横向溢出 |
验证
- Web 全量:77 个测试文件、478 个测试全部通过;新增摘要筛选、失效选择清理、列表选中、事件返回和运维质量返回覆盖。
- 生产构建:
tsc -b、Vite 构建、release asset gate 全部通过,web_build_gate=ok。 - 浏览器桌面:1440 × 1000 验证总览、摘要筛选、单车异常入口、事件二次筛选、质量差异 VIN 检索和双向返回。
- 浏览器移动:390 × 844 验证摘要、地图、底部导航与无横向溢出。
- 视觉比较:在同一 1440 × 1000 状态同时核对 before/after,总览高度、地图可用面积、列表宽度和详情卡密度没有回退。
无障碍证据与限制
摘要任务、无位置筛选、事件流、质量差异和返回动作均使用真实 Button/Link,具有唯一可访问名称;活动筛选暴露 aria-pressed,列表选中同时通过背景和文本提示表达。当前验证覆盖 DOM 语义、焦点可达入口、URL 状态和 390px/1440px 布局,但没有运行 NVDA/VoiceOver、200% 缩放、强制色彩或完整焦点返回矩阵,因此不宣称完整 WCAG 合规。本地浏览器仍记录 Semi UI findDOMNode 弃用警告;AMapUI 行政区脚本在本地偶发前置顺序错误,但现有高德底图和服务端聚合降级仍可见,这两项不是本轮新增回归,后续应单独治理。