38 lines
5.1 KiB
Markdown
38 lines
5.1 KiB
Markdown
# 全局监控状态一致性与异常下钻审计
|
||
|
||
## 本轮结论
|
||
|
||
全局监控从“可看摘要、再手动组合筛选与跳转”升级为可直接行动的实时工作台：车辆总数、在线、行驶、离线、静止、告警和无实时位置均可从摘要原位进入对应任务；搜索、协议或状态变化会同步清除已经不再属于当前范围的车辆详情，避免地图、列表和右侧详情出现幽灵选中；列表模式继续标识地图当前选中车辆。单车详情新增“事件流”和“质量差异”，进入事件中心或运维质量后保留 VIN、地图缩放、边界和详情展开状态，事件二次筛选也不会丢失返回路径。
|
||
|
||
本轮沿用现有 Semi UI、监控蓝绿状态语义、地图工作区与返回上下文条。现有页面和同视口基线截图就是视觉目标，没有新增品牌、色板、图标体系或页面结构，因此没有使用 ImageGen 生成脱离产品的视觉概念。
|
||
|
||
## 审计步骤与健康度
|
||
|
||
1. **从摘要发现并进入任务 — 需优化 → 健康。** 基线 8 个摘要只能阅读，操作员还要回到状态下拉框重复选择。优化后总数、在线、行驶、离线、静止和无位置直接更新同一 `status` URL；告警车辆直接进入待处理事件，卡片使用真实 Button、`aria-pressed` 和唯一名称。证据：[优化前总览](before/01-monitor-overview.jpg)、[优化后总览](after/01-monitor-overview.jpg)、[筛选联动](after/03-filter-consistency.jpg)。
|
||
2. **保持地图、列表和详情一致 — 需优化 → 健康。** 原筛选变化后可能继续显示范围外车辆详情，列表模式也看不出地图当前选中项。现在关键字、协议、状态、批量搜索和清空动作统一清理失效选中；切到列表时仍以蓝色行/卡标识当前地图车辆，点击可返回地图定位。
|
||
3. **从异常下钻到证据 — 需优化 → 健康。** 原单车详情只有档案、轨迹、历史和里程，虽然显示当前告警数量，却没有直达事件或质量差异的入口。现在快捷区用 3 × 2 紧凑网格增加“事件流 N”和“质量差异”，告警入口使用克制的红色弱强调。证据：[优化前车辆详情](before/02-selected-vehicle.jpg)、[优化后异常入口](after/02-anomaly-actions.jpg)。
|
||
4. **跨模块核对后回到原监控位置 — 需优化 → 健康。** 事件中心应用新筛选时曾丢失 `monitorReturn`，运维质量也没有可见返回条。现在事件筛选继续保留监控来源，运维质量在差异队列、单车诊断和全局健康三个视图统一显示返回上下文；真实浏览器验证返回 URL 恢复 VIN、Zoom 15、地图边界和详情展开。证据：[事件筛选与返回](after/04-event-return.jpg)。
|
||
5. **移动端继续监控 — 健康。** 390 × 844 下摘要保持 2 × 2 主指标与一条支持证据，地图仍占主视觉，底部导航、缩放控件、状态图例互不遮挡；`document`、`body` 和内容区均为 `scrollWidth === 390`。证据：[移动端监控](after/05-mobile-monitor.jpg)。
|
||
|
||
## 五点视觉一致性账本
|
||
|
||
| 检查点 | 基线 | 实现 | 结论 |
|
||
| --- | --- | --- | --- |
|
||
| 页面容器 | 筛选、摘要、地图工作区、实时状态条 | 容器层级完全不变 | 未新增 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 行政区脚本在本地偶发前置顺序错误，但现有高德底图和服务端聚合降级仍可见，这两项不是本轮新增回归，后续应单独治理。
|