refactor(ui): converge semi monitor list

vehicle-data-platform/design-qa.md

@@ -1,57 +1,48 @@
-# 账号管理 Semi UI Design QA
+# 全局监控列表 Semi UI Design QA
 
-- source visual truth: 当前生产版本 `/users`
+- source visual truth: 生产版本 `e944b797` 的 `/monitor?mode=list`
 - source screenshots:
-  - `/tmp/users-desktop-before.png`
-  - `/tmp/users-mobile-before.png`
+  - desktop: `/tmp/semi-continuous-audit-20260719/04-monitor-list-desktop.png`
+  - mobile: `/tmp/semi-continuous-audit-20260719/05-monitor-list-mobile.png`
 - implementation screenshots:
-  - `/tmp/users-desktop-after.png`
-  - `/tmp/users-mobile-after.png`
-  - `/tmp/users-mobile-detail-after.png`
-- implementation paths:
-  - `apps/web/src/v2/pages/UsersPage.tsx`
-  - `apps/web/src/v2/pages/UsersPage.test.tsx`
-  - `apps/web/src/v2/styles/workspace.css`
+  - 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`，生产基线截图原始高度为 `810px`，在对比图中补齐到 `900px`
+  - desktop `1440 × 900`
   - mobile `390 × 844`
-  - 使用生产管理员真实数据，共 5 个客户账号
-  - 验证账号目录、账号选中状态、车辆授权详情和移动端侧滑面板
-
-## Comparison Evidence
-
-- desktop before/after: `/tmp/users-desktop-comparison.png`
-- mobile before/after: `/tmp/users-mobile-comparison.png`
-- directory focus before/after: `/tmp/users-directory-focus-comparison.png`
-- 三组对比图均已通过 `view_image` 并排检查。
+  - 使用管理员生产数据，共 `1,024` 辆授权车辆
+  - 列表视图、第一页、每页 `50` 辆
 
 ## Fidelity Ledger
 
 | Surface | Required fidelity | Implementation evidence | Result |
 | --- | --- | --- | --- |
-| Directory hierarchy | 账号列表必须占据主工作区，不能由相互割裂的大卡片主导。 | 桌面端改为连续的证据表，行间使用轻分隔线、克制悬浮反馈与选中左侧强调线。 | Improved. |
-| Account identity | 客户名称、登录账号和身份来源需形成稳定扫描顺序。 | 名称与账号仍居首，并新增 Semi `Tag` 标注“本地”或外部身份源。 | Improved. |
-| Permission evidence | 菜单数、车辆数、状态和最近登录需保持对齐。 | 权限数字采用紧凑的浅色单元格表面；状态和时间列仍在原有网格位置。 | Preserved. |
-| Selected state | 当前编辑账号必须可快速定位。 | 选中行同时保留背景色和蓝色前导强调，详情侧滑面板与选中行一致。 | Improved. |
-| Mobile density | 移动端不能为了桌面连续表牺牲触控与信息密度。 | `390 × 844` 下保留独立卡片间距、紧凑身份标签和可点击整行。 | Preserved. |
-| Detail workflow | 打开账号、切换车辆权限、关闭面板必须完整可用。 | 桌面与移动端均验证侧滑面板；移动端车辆授权列表、状态、页签和底部动作无重叠。 | Passed. |
-| Asset fidelity | 品牌 Logo 与图标体系不得被临时图形替换。 | 保留现有官方 Logo、Semi 图标及组件；没有新增手绘 SVG、CSS 图标或装饰性位图。 | Preserved. |
+| 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
 
-- 点击账号行可打开详情，关闭后回到原目录状态；
-- 车辆权限页签可点击，授权车辆卡片与状态信息完整；
-- 搜索与状态筛选入口保持原有行为；
-- 移动端侧滑面板没有遮挡页签、内容或底部动作；
-- 控制台无本次改动产生的运行时异常；仅存在 Semi UI 在 React StrictMode 下既有的 `findDOMNode` 弃用警告。
+- 手机端“筛选”可展开并可通过“收起”恢复列表；
+- 地图/列表使用原有可访问 tab 语义，车辆卡片具有“车牌 + 实时数据”标签；
+- “地图”和“解析位置”按钮均保留车辆级可访问名称；
+- `390px` 视口文档横向溢出为 `0px`，主指标和辅助指标无裁切；
+- 移动卡片实测高度 `109px`，第一页仍渲染 `50` 辆并由内部列表滚动；
+- 控制台未发现本次改动产生的运行时异常；仅保留 Semi UI 在 React StrictMode 下既有的 `findDOMNode` 弃用警告。
 
 ## Comparison History
 
 ### Pass 1 — fixed
 
-- 原实现的桌面账号行被拆成多个带间距卡片，视觉体量偏大，证据列扫描节奏不连续。
-- 已收敛为连续目录表，并补充身份来源标签，让账号、授权和状态形成一条稳定阅读路径。
-- 修复后对比图中没有发现 P0、P1 或 P2 视觉与交互问题。
-- 当前唯一低风险残余是生产数据均为本地身份源，外部身份源标签由渲染逻辑覆盖，尚无生产样本可做视觉实证。
+- 生产手机端的“今日上报”和“无实时位置”数值被截断，信息层级与主要车队指标混在一起。
+- 生产车辆卡片纵向留白过多，`390 × 844` 首屏只能看到约 `2.5` 辆。
+- 已将辅助指标改成完整的紧凑数值，将每辆车的协议、里程与坐标收拢到固定证据网格。
+- 并排对比后未发现 P0、P1 或 P2 视觉与交互问题。
 
 final result: passed