155 lines
12 KiB
Markdown
155 lines
12 KiB
Markdown
# 单车详情移动端 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
|