3.5 KiB
3.5 KiB
轨迹回放控制连续性审计
本轮结果
本轮把轨迹回放从“地图上分散的四层浮动操作”收敛为稳定的三层工作面：顶部查询与地图工具、当前点信息、底部播放控制。桌面查询栏同步去除与行程摘要重复的数据点标签，完整显示查询时间与来源。
| 检查项 | 调整前 | 调整后 |
|---|---|---|
| 390 × 844 顶部地图操作 | 查询入口与地图工具横向重叠约 136 px | 重叠 0 px，保留 14 px 间距 |
| 移动车辆身份 | 首屏显示长 VIN | 查询完成后优先显示车牌，第二行显示时间与来源 |
| 移动详情入口 | 地图中部独立浮层 | 合并到当前点卡右上角“明细”按钮 |
| 移动浮层数量 | 查询、工具、详情、当前点、播放坞多层竞争 | 查询与工具并列；详情归入当前点卡 |
| 桌面查询栏 | 时间/来源被截断，且数据点数量与下方摘要重复 | 描述宽度与内容宽度均为 111 px，完整显示；移除重复标签 |
| 长事件列表 | 11 项全部正常，但缺少明确渲染约束 | 保持 499 px 独立滚动区，content-visibility 限制长列表布局成本，底部操作固定 |
关键实现
- 移动端查询入口固定为 218 × 50 px，地图工具保持 142 × 50 px；两者在 390 px 视口中互不遮挡。
- 播放进度滑块增加“第 N / 总数个数据点 + 当前时间”的读屏值；播放状态通过礼貌播报区域宣布播放、暂停与倍速。
- 轨迹段颜色条对视觉用户保持原样，同时为辅助技术提供行驶、停留、数据间隔的合并摘要，避免逐段朗读最多 160 个视觉片段。
- 长事件项启用延迟渲染，但列表、按钮、焦点顺序和选择行为不变。
- 移动详情关闭后，焦点准确返回“打开轨迹详情”；播放从 0% 推进时，状态同步宣布“正在以 1 倍速度播放轨迹”。
实页证据
桌面端前后对比（左：调整前，右：调整后）：
移动端前后对比（左：调整前，右：调整后）：
移动端最终回放与事件明细：
验证记录
- 真实接口轨迹：粤AG18312，18 个点，22.9 km，11 个事件，0 个停留点。
- 桌面视口：1440 × 1000；轨迹侧栏 344 × 904 px，地图工作区 838 × 904 px。
- 移动视口：390 × 844；事件详情高 742.7 px，列表可视区 499 px / 总滚动高 770 px，固定操作区位于 y=794–834 px。
- 定向回归：2 个文件、21 个测试全部通过。
- 全量回归：78 个文件、484 个测试全部通过。
- 生产构建：通过，构建门禁
web_build_gate=ok；轨迹页面产物 58.89 kB（gzip 18.89 kB）。
无障碍边界
- 地图底图由高德 iframe 提供，其内部标注和缩放控件的完整读屏语义不由当前应用控制；关键轨迹事件仍通过应用侧明细列表提供等价入口。
- 本轮验证了 DOM 语义、焦点回归、状态播报和键盘可达控件，但未替代 VoiceOver/TalkBack 真机走查。
content-visibility只用于长事件项的渲染优化；辅助技术中的实际体验仍需在目标浏览器与读屏组合上复核。
已知非阻断差异
- Semi UI 仍在测试环境输出 React
findDOMNode弃用警告。 - Sass 构建仍提示第三方 Semi 主题使用已弃用的
@import；均未影响本轮构建与交互。