79 lines
4.3 KiB
Markdown
79 lines
4.3 KiB
Markdown
# 车辆工作链连续性优化
|
||
|
||
## 目标与结果
|
||
|
||
本轮将全局监控、车辆目录、车辆档案、轨迹回放、历史数据、里程查询与告警事件串成可恢复的工作链。用户不再依赖浏览器后退猜测来源:每个子页面优先返回最近的车辆档案,车辆档案再精确返回目录或全局监控位置。
|
||
|
||
核心链路:
|
||
|
||
`全局监控 → 车辆目录(搜索 / 视图 / 页码)→ 车辆档案 → 轨迹 / 历史 / 里程 / 事件`
|
||
|
||
返回顺序:
|
||
|
||
`子页面 → 同一车辆档案 → 原车辆目录位置 → 原全局监控位置`
|
||
|
||
## URL 状态契约
|
||
|
||
- `vehicleSearch`:车辆目录已应用搜索词。
|
||
- `vehicleView`:`all / online / offline / multi` 目录视图。
|
||
- `vehiclePage`:车辆目录页码。
|
||
- `vehicleDirectoryReturn`:车辆档案返回目录时使用的内部路径。
|
||
- `vehicleReturn`:轨迹、历史、里程和事件返回车辆档案时使用的内部路径。
|
||
- `monitorReturn`:保留在目录或档案之后的全局监控来源。
|
||
|
||
所有返回参数都会重新解析、规范化并限制为平台内部受支持路由;外部 URL 和不相关平台路径会被拒绝。
|
||
|
||
## 页面行为
|
||
|
||
1. 车辆目录筛选、视图和分页全部由 URL 驱动,刷新、分享、前进/后退可恢复。
|
||
2. 从目录打开车辆时,档案顶部显示“返回车辆目录”,并说明已保留的搜索、视图和页码。
|
||
3. 从档案进入轨迹、历史、里程或告警时,子页面顶部显示“返回车辆档案”。
|
||
4. 子页面修改筛选或时间范围后仍保留车辆返回目标。
|
||
5. 手机端返回条隐藏辅助说明,仅保留主要返回动作和车辆/搜索标识,避免挤压内容。
|
||
6. 已选车辆但时间窗没有轨迹时,改为“当前时间窗没有可回放轨迹”,不再错误要求重新选择车辆。
|
||
|
||
## 视觉一致性记录
|
||
|
||
本轮没有生成新的视觉概念图。改动沿用现有 Semi UI、平台工作区命令栏和共享返回条,是一项跨模块状态与页面逻辑连续性优化。
|
||
|
||
实现与现有设计系统对照:
|
||
|
||
1. 返回条继续使用共享蓝色主操作,不增加新的浮层或导航层级。
|
||
2. 档案首屏仍保持“身份 → 快捷操作 → 最新上报 → 车辆视图”的既有层级。
|
||
3. 手机端继续使用两项主操作加“更多”的收敛模式,新增返回信息没有挤占动作区。
|
||
4. 轨迹页仍以地图为主画布,返回条位于页面任务区最上方。
|
||
5. 目录页仍使用相同的视图切换、指标栏、车辆列表与分页,只把工作位置写入 URL。
|
||
6. 空轨迹状态只调整语义文案和操作目标,没有改变既有空状态组件与视觉样式。
|
||
|
||
首屏文案差异是有意的:原“先选择车辆,再开始轨迹回放”在已选车辆、空时间窗场景中改为“当前时间窗没有可回放轨迹”,用于准确解释当前状态。其余关键首屏结构与现有设计保持一致,未发现实质视觉偏差。
|
||
|
||
## 浏览器验收
|
||
|
||
通过 Codex 内置浏览器以真实 Vite 页面和本地 API 验收数据完成交互验证:
|
||
|
||
- 桌面原生视口:`1440 × 900`
|
||
- 手机原生视口:`390 × 844`
|
||
- 桌面和手机的 `documentElement.scrollWidth - clientWidth` 均为 `0`
|
||
- 手机返回条宽度 `376px`,位于 `390px` 视口内;辅助说明的计算样式为 `display: none`
|
||
- 实际走通:目录第 2 页 → 车辆档案 → 轨迹 → 车辆档案 → 原目录第 2 页
|
||
- 恢复结果:搜索 `粤A`、视图“当前在线”、页码 `2/2`
|
||
- 页面日志没有应用异常;保留 Semi UI 依赖产生的既有 `findDOMNode` 开发警告
|
||
|
||
截图证据:
|
||
|
||
- `vehicle-directory-desktop.png`
|
||
- `vehicle-detail-return-desktop.png`
|
||
- `track-vehicle-return-desktop.png`
|
||
- `vehicle-directory-mobile.png`
|
||
- `vehicle-detail-return-mobile.png`
|
||
- `track-vehicle-return-mobile.png`
|
||
|
||
截图已通过本地图像工具按原始分辨率复核;返回层级、裁切、操作密度和移动端底部导航均符合预期。
|
||
|
||
## 自动化与构建证据
|
||
|
||
- 车辆上下文、共享返回条、全局监控、车辆、轨迹、历史、里程和事件:`127 / 127` 测试通过。
|
||
- `tsc -b`、Vite 生产构建、发布产物验证全部通过。
|
||
- 车辆详情关键入口产物:`29,777 B`,低于既有 `30,000 B` 门槛。
|
||
- 返回动作的 URL 组装下沉到延迟加载的 `VehicleActions`,没有通过提高构建阈值掩盖体积回退。
|