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

单车详情移动端 Semi UI Design QA

• source visual truth: 生产版本 f59148e2 的 /vehicles/LB9A32A26R0LS1489
• source screenshots:
  • directory desktop: /tmp/semi-goal-audit-20260719-next/01-vehicle-directory-desktop.png
  • detail desktop: /tmp/semi-goal-audit-20260719-next/02-vehicle-detail-desktop.png
  • detail mobile: /tmp/semi-goal-audit-20260719-next/03-vehicle-detail-mobile.png
• implementation screenshots:
  • detail mobile: /tmp/semi-goal-audit-20260719-next/04-vehicle-detail-mobile-after.png
  • detail desktop: /tmp/semi-goal-audit-20260719-next/05-vehicle-detail-desktop-after.png
• comparison evidence:
  • mobile before/after: /tmp/semi-goal-audit-20260719-next/vehicle-detail-mobile-comparison.png
• viewport and state:
  • desktop 1440 × 900
  • mobile 390 × 844
  • 使用管理员生产数据与同一辆车 粤AGP3506

Fidelity Ledger

Surface	Required fidelity	Implementation evidence	Result
Vehicle identity	车牌、在线状态、VIN、品牌车型和三类协议来源必须完整。	保留原任务栏结构；车型允许两行且提供完整 title，协议标签保持 Semi Tag 色彩语义。	Improved.
Live evidence	速度、SOC、总里程和当日里程不能被截断或隐藏。	修正移动端带上下文指标轨道的网格优先级；四项指标获得完整宽度，实测全部 clipped=false。	Fixed.
First viewport	首屏必须尽快进入地图，不能被重复卡片和过高操作区占满。	身份、动作、位置、来源入口和章节导航收敛；地图顶部由 652px 提前至 569px。	Improved.
Location workflow	当前坐标、按需地址解析和车辆实时跟随必须保留。	坐标与解析按钮合并成一行；未增加自动逆地理编码，地图和实时轮询逻辑未改。	Preserved.
Source evidence	总里程、当日里程和“查看全部来源”仍需打开同一证据面板。	实测总里程按钮打开 Semi Bottom SideSheet，日期和来源证据可见，关闭后恢复页面。	Passed.
Section navigation	实时位置、最近事件、实时遥测和车辆主档必须可达。	四个 Semi Button 保留可访问名称；点击实时位置后目标区域获得焦点。	Passed.
Desktop stability	移动端收敛不能造成桌面布局回退。	1440 × 900 桌面截图保持原信息结构，横向溢出 0px。	Preserved.
Asset fidelity	品牌、地图和图标不得由临时资产代替。	继续使用生产 Logo、高德地图、Semi Icon、Card、Button、Tag 与 SideSheet。	Preserved.

Interaction And Accessibility Checks

• 页面根节点保留“车牌 + 车辆档案”的可访问标签；
• 总里程和当日里程继续以有名称的按钮进入来源证据；
• 来源证据 SideSheet 可打开、读取并通过“关闭来源证据”退出；
• 章节导航点击后执行平滑滚动并将焦点交给目标区域；
• 390px 与 1440px 视口横向溢出均为 0px；
• 生产数据下总里程、当日里程、速度和 SOC 均无视觉裁切；
• 控制台未发现本次改动产生的运行时异常。

Comparison History

Pass 1 — fixed

• 原移动端指标轨道仍被通用 has-context 网格分成两列，隐藏的来源上下文占用一半宽度，导致总里程显示为 80,27…。
• 当前修复将四项实时指标恢复到完整宽度的 2 × 2 网格，并压缩重复的纵向间距。
• 同视口并排对比确认地图在首屏获得约 83px 的额外可见空间，车型和里程信息完整。
• 未发现 P0、P1 或 P2 视觉与交互问题。

全站移动导航 Semi UI Design QA

• source visual truth: ECS 生产端 /monitor?mode=list
• source screenshots:
  • shell baseline: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/before-monitor-mobile.png
  • more baseline: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/before-more-sheet.png
  • help baseline: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/before-help-sheet.png
  • statistics filter baseline: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/before-statistics-filter.png
• implementation screenshots:
  • more launcher: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/after-more-sheet-local.png
  • active module: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/after-more-active-fixed-local.png
• comparison evidence:
  • before/after: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/compare-more-before-after.png
• viewport and state:
  • mobile 390 × 844
  • 管理员权限、全局监控列表模式

Fidelity Ledger

Surface	Required fidelity	Implementation evidence	Result
Permission model	客户与管理员仍只能看到已授权菜单。	继续使用 hasMenu() 过滤主导航和更多功能分组，未新增绕过入口。	Preserved.
Navigation hierarchy	高频任务保留底栏，低频任务必须有清晰业务分组。	全局监控、车辆查询、轨迹回放、里程查询仍在底栏；历史/告警与平台治理维持两组。	Passed.
Module recognition	更多功能不能只靠小图标和短标签辨认。	每个模块增加真实任务说明、独立 Semi 图标容器和进入指示。	Improved.
Current state	位于二级模块时，重新打开更多功能必须识别当前位置。	当前模块使用蓝色边框、浅蓝底色和图标强调，未叠加重复装饰线。	Passed.
Touch density	入口需要适合移动端点击，同时单屏展示完整模块集合。	模块卡片最小高度 68px，两列布局在 390 × 844 下完整显示五个入口。	Passed.
Shared shell	帮助、筛选与更多功能应属于同一 Semi UI 工作台体系。	继续复用 WorkspaceSideSheet 的标题、徽标、遮罩、圆角和滚动边界。	Preserved.
Asset fidelity	不使用临时图形或自制 SVG。	全部使用 @douyinfe/semi-icons 与 Semi UI SideSheet、Tag、Button。	Preserved.

Interaction And Accessibility Checks

• 底栏仍为命名为“主导航”的可访问导航区域；
• 更多按钮继续暴露 aria-expanded 和 aria-controls；
• 两个业务分组均为独立命名导航；
• 五个模块入口保留链接语义与预加载行为；
• 当前模块继续由 React Router 输出 aria-current="page"；
• 关闭按钮仍使用“关闭更多功能”的可访问名称；
• 390 × 844 同视口前后对照未出现横向溢出、裁切或不可达入口；
• 页面帮助和里程筛选基线检查未发现本次共享样式导致的回退。

Comparison History

Pass 1 — fixed

• 旧版入口卡片依赖小图标和短标签，任务意图不够明确，分组又被大面积边框切割。
• 新版保持原路由与权限边界，用两列 Semi UI 模块卡片展示任务说明，并减弱分组容器噪声。
• 首次视觉复核发现当前模块仍继承底栏的底部装饰线；已在更多功能作用域内移除，保留单一高亮语义。
• 同尺寸并排对比确认五个入口均可见，层级更清晰，未发现 P0、P1 或 P2 视觉与交互问题。

查询工作台 Semi UI Design QA

• source visual truth: ECS 生产端车辆查询、轨迹回放、历史数据
• source screenshots:
  • vehicle page: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-vehicles-mobile.png
  • vehicle filter: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-vehicle-filter-mobile.png
  • track page: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-tracks-mobile.png
  • track workbench: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-track-filter-mobile.png
  • history page: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-history-mobile.png
  • history filter: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-history-filter-mobile.png
• implementation screenshots:
  • vehicle filter: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/after-vehicle-filter-mobile-settled.png
  • history filter: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/after-history-filter-mobile.png
  • history draft state: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/after-history-filter-draft-mobile.png
  • desktop history: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/after-history-desktop.png
• comparison evidence:
  • vehicle mobile: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/compare-vehicle-filter-mobile.png
  • history mobile: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/compare-history-filter-mobile.png
  • history desktop: /Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/compare-history-desktop.png
• viewport and state:
  • mobile 390 × 844
  • desktop 1440 × 900
  • 管理员权限、未提交查询的初始状态

Fidelity Ledger

Surface	Required fidelity	Implementation evidence	Result
Shared filter anatomy	车辆与历史筛选应与轨迹查询使用同一标题、摘要、内容和确认边界。	MobileFilterSheet 新增共享 summaryItems，继续复用 WorkspaceSideSheet。	Improved.
Draft visibility	用户修改条件时必须知道尚未应用的车辆、时间和数据范围。	摘要直接读取草稿状态；输入 沪A01559F 后车辆范围立即由“待选择”更新为“1 辆”。	Passed.
Vehicle discovery	查车面板必须同时说明账号授权范围、当前关键词和快速结果状态。	生产数据下显示 1,024 辆、全部车辆、待输入，输入后同步更新当前条件和匹配状态。	Passed.
History scope	历史查询必须同时呈现车辆上限、日期区间、数据类型和协议来源。	三段摘要对应车辆范围、时间范围和数据范围，并保留上海时区说明。	Passed.
Track consistency	轨迹查询现有行程摘要和查询状态不能被新共享组件破坏。	轨迹仍使用同一个 WorkspaceSideSheet 摘要模型，页面与查询明细交互未修改。	Preserved.
Desktop stability	移动端工作台迁移不得改变桌面查询布局和密度。	1440 × 900 同状态前后截图一致，桌面继续使用 WorkspaceFilterPanel。	Preserved.
Action boundary	草稿不应在关闭弹层时意外应用。	关闭、重置、应用三类动作保持独立，原测试继续覆盖草稿回滚和显式提交。	Preserved.

Interaction And Accessibility Checks

• 摘要区域使用命名列表，并继承“车辆搜索摘要”“历史查询范围摘要”等可访问名称；
• 车辆筛选输入后，摘要与候选列表同时更新；
• 历史筛选输入后，车辆数量实时更新，应用按钮恢复可用；
• 筛选弹层关闭、重置与应用按钮保持完整可见；
• 390 × 844 下内容由共享滚动区承载，无横向溢出；
• 1440 × 900 桌面历史查询前后布局一致；
• 轨迹回放原有摘要、地图、播放轴与查询明细未发生行为回退。

Comparison History

Pass 1 — fixed

• 原车辆和历史筛选只有标题与表单，用户需要进入字段后才能理解当前授权范围和草稿状态；轨迹查询已经具备摘要层，三页层级不统一。
• 当前将摘要能力下沉到 MobileFilterSheet，车辆和历史页通过真实查询状态填充，不复制新的弹层组件。
• 首次截图在 SideSheet 进入动画期间截到不完整底栏；等待动画稳定后复核，重置与应用按钮完整可见。
• 同视口对比确认新增摘要没有压缩关键输入、日期范围和来源选择，未发现 P0、P1 或 P2 问题。

final result: passed