lingniu-vehicle-ingest/vehicle-data-platform/design-qa.md

全局监控列表 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