66 lines
4.0 KiB
Markdown
66 lines
4.0 KiB
Markdown
# 历史数据多车反馈与字段视图复核
|
||
|
||
## 总体健康度
|
||
|
||
通过。桌面与移动端均完成真实页面复核，查询对象、逐车结果、字段视图和当前生效字段形成一条可追溯闭环；1280 × 720 与 390 × 844 均未出现页面横向溢出。
|
||
|
||
## 1. 查询对象输入
|
||
|
||
- 保留既有逗号、空格和换行批量输入方式，不破坏 URL 与分享链接。
|
||
- 输入框下方把识别出的每台车辆显示为可移除标签，用户无需在长字符串中定位对象。
|
||
- 仍在提交前限制最多 5 台车辆，并保留明确数量错误。
|
||
|
||
## 2. 逐车查询回执
|
||
|
||
- `/api/v2/history/query` 的 `summary` 新增 `requestedVehicleCount` 与 `vehicles`。
|
||
- 每个查询对象返回 `keyword`、已解析 VIN/车牌、当前范围行数与 `matched | no_data` 状态。
|
||
- 页面不再只显示“2 辆 / 3 个标识”这种需要猜测的聚合结果；桌面和移动端都直接指出哪台车有数据、哪台车在当前时间与来源范围内无数据。
|
||
|
||
|
||
|
||
|
||
|
||
## 3. 可保存字段视图
|
||
|
||
- 内置“默认核验”和“全部字段”快捷视图。
|
||
- 用户可把当前字段组合命名保存；同数据类型下可复用、覆盖同名视图或删除。
|
||
- 保存内容使用版本化本地偏好键，解析时过滤损坏、空名称、重复字段和超长内容；持久化不可用时不阻断当前选择。
|
||
- 结果区始终显示当前视图名称、已选字段数和总字段数；导出继续复用同一 `visibleKeys`，避免页面与文件字段不一致。
|
||
|
||
|
||
|
||
刷新页面后仍能恢复已保存视图，证据见 `after/05-saved-view-restored-desktop.jpg`。
|
||
|
||
|
||
|
||
## 4. 移动端与可访问性
|
||
|
||
- 查询回执按单列卡片展示，字段设置使用底部 SideSheet，主要操作固定在底部。
|
||
- 输入框有显式标签；每个查询对象都有独立“移除车辆”可访问名称。
|
||
- 逐车回执是命名区域，内部使用列表 / 列表项语义；字段视图、删除动作、搜索与完成操作均可由键盘定位。
|
||
- 限制：本轮以 DOM 语义、键盘路径和浏览器尺寸复核为主，未替代 NVDA、JAWS 或 VoiceOver 的人工朗读测试；色觉反馈均同时保留文字，不仅依赖颜色。
|
||
|
||
## 5. 视觉忠实度账本
|
||
|
||
| 项目 | 结果 |
|
||
| --- | --- |
|
||
| 设计来源 | 现有历史数据工作区、WorkspaceSideSheet、WorkspaceMetricRail 与 Semi UI 组件；属于已有产品内的局部增强，不需要生成新视觉资产 |
|
||
| 布局 | 保留查询 → 摘要 → 结果主层级，仅在摘要与结果间增加紧凑逐车回执 |
|
||
| 视觉语言 | 延续现有蓝灰、白色证据面板、8–11px 圆角与状态 Tag，不引入新字体、渐变或图标体系 |
|
||
| 交互 | URL 查询范围、分页、证据详情、趋势与导出逻辑保持原样；新增标签移除、视图保存 / 应用 / 删除 |
|
||
| 响应式 | 桌面为横向回执与右侧字段面板；移动端为单列回执与底部字段面板，均无横向溢出 |
|
||
|
||
## 首屏文案差异
|
||
|
||
| 位置 | 优化前 | 优化后 |
|
||
| --- | --- | --- |
|
||
| 车辆摘要 | `2 辆 / 3 个车辆标识` | `2 / 3 个标识有数据` |
|
||
| 查询结果 | 只显示聚合车辆数 | `车辆查询回执 · 2 / 3 辆有数据`，逐台显示行数或“时间窗无数据” |
|
||
| 字段状态 | `2 / 5 字段` | `默认核验 · 2 / 5 字段` 或用户保存的视图名称 |
|
||
| 字段面板 | 显示全部 / 恢复默认 | 默认、全部、自定义命名视图，以及保存 / 应用 / 删除 |
|
||
|
||
## 证据索引
|
||
|
||
- 优化前：`before/01-history-desktop.jpg`、`before/02-field-settings-desktop.jpg`
|
||
- 优化后：`after/01-query-receipt-desktop.jpg`、`after/02-saved-field-view-desktop.jpg`、`after/03-query-receipt-mobile.jpg`、`after/04-field-view-mobile.jpg`、`after/05-saved-view-restored-desktop.jpg`
|