49 lines
3.4 KiB
Markdown
49 lines
3.4 KiB
Markdown
# 全局监控列表 Semi UI Design QA
|
||
|
||
- source visual truth: 生产版本 `e944b797` 的 `/monitor?mode=list`
|
||
- source screenshots:
|
||
- desktop: `/tmp/semi-continuous-audit-20260719/04-monitor-list-desktop.png`
|
||
- mobile: `/tmp/semi-continuous-audit-20260719/05-monitor-list-mobile.png`
|
||
- implementation screenshots:
|
||
- desktop: `/tmp/semi-continuous-audit-20260719/07-monitor-list-desktop-after.png`
|
||
- mobile: `/tmp/semi-continuous-audit-20260719/06-monitor-list-mobile-after.png`
|
||
- comparison evidence:
|
||
- mobile before/after: `/tmp/semi-continuous-audit-20260719/monitor-mobile-comparison.png`
|
||
- viewport and state:
|
||
- desktop `1440 × 900`
|
||
- mobile `390 × 844`
|
||
- 使用管理员生产数据，共 `1,024` 辆授权车辆
|
||
- 列表视图、第一页、每页 `50` 辆
|
||
|
||
## Fidelity Ledger
|
||
|
||
| Surface | Required fidelity | Implementation evidence | Result |
|
||
| --- | --- | --- | --- |
|
||
| Monitoring workflow | 搜索、筛选、地图/列表切换、分页和实时刷新周期不能被视觉重构改变。 | 保留原查询、路由和轮询实现，只重组列表渲染与响应式样式。 | Preserved. |
|
||
| Fleet hierarchy | 车辆总数、当前在线、行驶和告警必须优先；今日上报与无实时位置属于辅助证据。 | 手机端主指标采用清晰的 `2 × 2` 网格；辅助指标独立放在底部并压缩大数。 | Improved. |
|
||
| Vehicle evidence | 车牌、VIN、速度、当日里程、总里程、协议和位置必须在一眼可扫范围内。 | 手机卡片固定为身份、三项核心证据、位置三层；桌面继续使用连续 Semi Table。 | Improved. |
|
||
| Mobile density | 单屏车辆数需要显著增加，但不牺牲字段可辨认性。 | 卡片高度从约 `147px` 降至 `109px`；列表视口可容纳约 `4.05` 张卡片，截图中从约 `2.5` 辆提升到 `4` 辆。 | Improved. |
|
||
| Realtime performance | 高频刷新不能让全部车辆卡片无差别重绘。 | 移动卡片使用字段级 `memo` 比较；不可见卡片继续使用 `content-visibility` 和固有尺寸占位。 | Improved. |
|
||
| Address cost | 地理位置不得随列表刷新自动消耗逆地理编码 API。 | 经纬度始终可见；地址仍由用户点击“解析位置”后按需请求。 | Preserved. |
|
||
| Asset fidelity | 品牌和图标不得用临时图形替代。 | 沿用生产 Logo、Semi Icon、Card、Button、Table、Tag 与 Pagination。 | Preserved. |
|
||
|
||
## Interaction And Accessibility Checks
|
||
|
||
- 手机端“筛选”可展开并可通过“收起”恢复列表；
|
||
- 地图/列表使用原有可访问 tab 语义，车辆卡片具有“车牌 + 实时数据”标签；
|
||
- “地图”和“解析位置”按钮均保留车辆级可访问名称；
|
||
- `390px` 视口文档横向溢出为 `0px`，主指标和辅助指标无裁切；
|
||
- 移动卡片实测高度 `109px`，第一页仍渲染 `50` 辆并由内部列表滚动；
|
||
- 控制台未发现本次改动产生的运行时异常；仅保留 Semi UI 在 React StrictMode 下既有的 `findDOMNode` 弃用警告。
|
||
|
||
## Comparison History
|
||
|
||
### Pass 1 — fixed
|
||
|
||
- 生产手机端的“今日上报”和“无实时位置”数值被截断，信息层级与主要车队指标混在一起。
|
||
- 生产车辆卡片纵向留白过多，`390 × 844` 首屏只能看到约 `2.5` 辆。
|
||
- 已将辅助指标改成完整的紧凑数值，将每辆车的协议、里程与坐标收拢到固定证据网格。
|
||
- 并排对比后未发现 P0、P1 或 P2 视觉与交互问题。
|
||
|
||
final result: passed
|