190 lines
8.3 KiB
Markdown
190 lines
8.3 KiB
Markdown
# 车辆资产 H5 适配 · 设计规格
|
||
|
||
| 项 | 说明 |
|
||
|---|---|
|
||
| 日期 | 2026-07-20 |
|
||
| 状态 | 已确认（2026-07-20） |
|
||
| 原型 ID | `oneos-h5-vehicle-assets` |
|
||
| 关联 PC | `vehicle-management`（车辆资产） |
|
||
| 参考 H5 | `oneos-h5-h2-order`（PhoneShell、交互密度） |
|
||
|
||
---
|
||
|
||
## 1. 背景与目标
|
||
|
||
App 除推送外全部接入 H5。PC「车辆资产」为宽表中后台，不适合同一页响应式塞进手机。采用**独立 H5 原型**，口径与 PC 对齐，交互按手机重做。
|
||
|
||
### 成功标准
|
||
|
||
1. App / 手机浏览器打开 H5 地址，不进入 PC 宽表页。
|
||
2. KPI 分类与证照/保险异常口径与 PC 一致。
|
||
3. 详情多 Tab 可浏览，**全程无编辑入口**（含 Admin）。
|
||
4. 按车牌搜索可定位车辆。
|
||
|
||
---
|
||
|
||
## 2. 已确认产品决策
|
||
|
||
| 决策 | 结论 |
|
||
|---|---|
|
||
| 落地方式 | 独立原型 `oneos-h5-vehicle-assets`（方案 1） |
|
||
| 角色 | 全角色同一套界面 |
|
||
| 编辑 | **手机端不做编辑**（含 Admin；改数仅 PC） |
|
||
| 异常 | 只看：可筛、详情标红/提示；不催办、不跳转业务处理页 |
|
||
| 列表 | 搜索 + 横滑 KPI + 筛选抽屉 + 车辆卡片（对齐 PC 信息量） |
|
||
| 详情 | 多 Tab 对齐 PC，只读 |
|
||
|
||
---
|
||
|
||
## 3. 范围
|
||
|
||
### 3.1 第一期做
|
||
|
||
| 模块 | 内容 |
|
||
|---|---|
|
||
| 列表 | 顶栏标题「车辆资产」+ 车牌搜索；KPI 横滑；证照/保险等筛选；卡片列表；**触底异步加载更多**（无翻页、不展示总辆数） |
|
||
| 详情 | 返回 + 车牌（透明顶栏贴一体背景）；浮起白卡摘要（营运状态、标签、里程、证照/保险异常）；横向 Tab + 只读内容；**无**底部悬浮 Tab |
|
||
| 数据 | 复用 PC `vehicles.json` 及关联记录 JSON；KPI/异常规则与 PC 同源工具函数（可抽共享或复制后标注同源） |
|
||
| 壳层 | PhoneShell 桌面预览；真机/WebView 全屏内容区 |
|
||
| 导航 | 注册到原型导航「运维管理」下，与 PC 车辆资产并列区分（如「车辆资产（H5）」） |
|
||
|
||
### 3.2 第一期不做
|
||
|
||
- 任意字段编辑、运维负责人修改、运营城市修改
|
||
- 批量导入 / 导出真实能力（不做入口，或仅隐藏）
|
||
- 催办、抄送、跳转证照管理/保险采购等业务页（不做；外链 Toast 占位也不做，避免误导）
|
||
- 在租车型占比弹窗（PC 尾部 KPI；H5 第一期可不做，避免干扰主路径）
|
||
- PC 页响应式改造
|
||
|
||
---
|
||
|
||
## 4. 信息架构
|
||
|
||
```text
|
||
列表 List
|
||
├── 顶栏：标题 + 搜索（车牌）
|
||
├── KPI 横滑条（点选切换分类，计数与 PC 一致）
|
||
├── 筛选入口 → 底部抽屉（证照状态、保险状态；可扩展运营状态等）
|
||
└── 车辆卡片列表 → 进入详情
|
||
|
||
详情 Detail
|
||
├── 顶栏：返回 + 车牌号（透明，贴一体渐变底；无底栏）
|
||
├── 摘要卡：车牌 / 品牌型号 / 营运状态 / 来源·城市·项目标签 / 里程 / 证照·保险异常
|
||
└── Tab（横滑）：与 PC DETAIL_TABS 一致
|
||
基本信息 / 型号参数 / 证照信息 / 保险记录 / 租赁记录 /
|
||
事故记录 / 故障记录 / 违章记录 / 异动记录 / 调拨记录 / 年审记录
|
||
```
|
||
|
||
---
|
||
|
||
## 5. KPI 与异常口径（与 PC 一致）
|
||
|
||
| KPI | 口径 |
|
||
|---|---|
|
||
| 所有营运车辆 | 非「非运营车辆」且非「退出运营」 |
|
||
| 租赁车辆 | `operateStatus === '租赁'` |
|
||
| 物流车辆 | `operateStatus === '物流'` |
|
||
| 库存车辆 | `operateStatus` 为「可运营」或「待运营」 |
|
||
| 非运营车辆 | `vehicleLedgerType === '非运营车辆'` |
|
||
| 退出运营车辆 | `operateStatus === '退出运营'` |
|
||
|
||
| 异常筛选 | 口径 |
|
||
|---|---|
|
||
| 证照异常 | `inspectExpire` 早于今天 |
|
||
| 保险异常 | `insuranceStatus === '异常'` |
|
||
|
||
筛选与 KPI **叠加**：先 KPI，再筛选条件。
|
||
|
||
---
|
||
|
||
## 6. 列表卡片字段（建议）
|
||
|
||
Boutique 横卡布局：左侧信息、右侧状态区（无车辆照片）。至少展示：
|
||
|
||
- 车牌（主标题）
|
||
- 品牌·型号
|
||
- 营运状态标签（语义色）
|
||
- 证照/保险异常角标（有异常时显示）
|
||
- 车辆来源 / 运营城市 / 项目或「车辆在库」标签
|
||
- 里程（有数据时，右侧次要数字）
|
||
|
||
点击整卡进入详情。
|
||
|
||
### 6.1 详情摘要卡（与列表同语义）
|
||
|
||
浮起白卡（同列表卡片圆角/阴影），**不加**车辆实景大图：
|
||
|
||
- 车牌（大标题）+ 品牌·型号
|
||
- 营运状态（圆点 + 与列表一致的文案）
|
||
- 车辆来源 / 运营城市 / 项目或备车等上下文标签
|
||
- 里程（有数据时）
|
||
- 证照/保险异常角标（有异常时）
|
||
|
||
Tab 选中态对齐 Chip（主色字 + 浅底），内容区为白卡 Section / 记录列表；字段 label 12 / value 15。
|
||
|
||
---
|
||
|
||
## 7. 视觉与设计基底
|
||
|
||
| 项 | 约定 |
|
||
|---|---|
|
||
| 交互壳 | 对齐 `oneos-h5-h2-order` PhoneShell 结构（桌面预览）；真机全屏内容区 |
|
||
| 主题 | **SaaS Boutique App 壳**：对齐参考图 A（顶栏左标题 + 铃铛/加号、KPI 图标卡、筛选项行、实景横卡、底部五 Tab） |
|
||
| 色彩 | Primary `#007AFF`；页面灰 `#F2F3F5`；卡片白底；语义绿/橙/红 |
|
||
| 风格 | 一体式浅蓝渐变底（列表与详情共用；顶栏透明不分色带）；KPI 图标卡 + Chip；列表/详情浮起白卡（无车辆照片） |
|
||
| 字体 | **苹方 PingFang SC**（回退 Hiragino Sans GB / 微软雅黑 / system） |
|
||
| 字号阶梯 | 标题 22 / 详情车牌 26 / KPI 数 20 / 列表车牌 17 / 正文 15 / 车型与 Chip 12 / 标签与底栏 11 |
|
||
| 字重 | 标题/车牌 800（系统会映射为 Semibold/Medium）；区块标题 700；正文 400–500；标签 600 |
|
||
| 壳层约定 | **列表**底部为悬浮胶囊 Tab（毛玻璃）；「工作台/任务/消息/我的」Toast 占位；本页「车辆」选中。**详情**不挂底栏，仅顶栏返回 + 车牌 |
|
||
| 触控 | ≥ 44×44px（Chip/图标区可视觉更紧，点击热区保留）；`safe-area-inset` |
|
||
| 动效 | ≤ 240ms；尊重 `prefers-reduced-motion` |
|
||
|
||
---
|
||
|
||
## 8. 技术约定（实现阶段）
|
||
|
||
| 项 | 约定 |
|
||
|---|---|
|
||
| 目录 | `src/prototypes/oneos-h5-vehicle-assets/` |
|
||
| 入口 | `index.tsx`；样式独立 `styles/index.css` |
|
||
| 标注 | `annotation-source.json` + `.spec/requirements-prd.md`（实现时按 oneos-autoprd 同步） |
|
||
| 与 PC 关系 | 逻辑口径同源；UI 组件不直接复用 `vm-page` 宽表 DOM |
|
||
| App 打开 | 固定 H5 URL（发布后 `{baseUrl}/oneos-h5-vehicle-assets/index.html` 形态以云发布规则为准） |
|
||
|
||
---
|
||
|
||
## 9. 用户故事（摘要）
|
||
|
||
1. **作为**任意登录用户，**我想**在手机上按车牌找到车，**以便**外勤快速核对车辆信息。
|
||
2. **作为**运维/业务，**我想**用 KPI 与证照/保险异常筛选缩小范围，**以便**发现需跟进车辆（跟进在 PC 或其他模块完成）。
|
||
3. **作为**任意用户，**我想**在详情里切换各业务 Tab 只读浏览，**以便**不回 PC 也能看全档案摘要与记录。
|
||
|
||
---
|
||
|
||
## 10. 验收清单
|
||
|
||
- [ ] 独立原型可在导航打开，桌面 PhoneShell / 窄屏可用
|
||
- [ ] KPI 六类计数与同数据下 PC 一致
|
||
- [ ] 证照异常、保险异常筛选结果与 PC 规则一致
|
||
- [ ] 搜索车牌可过滤列表
|
||
- [ ] 列表无总辆数、无翻页；触底异步加载更多
|
||
- [ ] 列表进详情：一体渐变底连续，无白顶栏色带割裂；摘要为浮起白卡（状态/标签/里程/异常与列表同语义）
|
||
- [ ] 详情无底部悬浮 Tab；顶栏仅返回 + 车牌
|
||
- [ ] 详情 11 个 Tab 均可进入且只读，无编辑按钮
|
||
- [ ] 无导入/导出/修改运维负责人等 PC 写操作入口
|
||
|
||
---
|
||
|
||
## 11. 修订记录
|
||
|
||
| 版本 | 日期 | 说明 |
|
||
|---|---|---|
|
||
| v0.7 | 2026-07-21 | 列表改为触底异步加载；移除翻页与总辆数展示 |
|
||
| v0.6 | 2026-07-21 | 对齐参考图 A 结构：App 顶栏/底栏、KPI 图标卡、筛选项行、实景横卡；写操作仍 Toast 占位 |
|
||
| v0.5 | 2026-07-21 | 视觉切换至 SaaS Boutique（Electric Blue + KPI 摘要卡 + 横卡列表）；产品范围不变 |
|
||
| v0.5 | 2026-07-21 | H5 按参考图标注尺寸落地（16/8/12/44 栅格） |
|
||
| v0.4 | 2026-07-20 | 手机交互增强：粘性工具栏、safe-area、系统返回、空态引导 |
|
||
| v0.3 | 2026-07-20 | 视觉切换至 `src/themes/apple`（Action Blue + utility card） |
|
||
| v0.2 | 2026-07-20 | 视觉基底补充：Premium SaaS Mobile 质感（品牌绿不变） |
|
||
| v0.1 | 2026-07-20 | 需求访谈确认后首版设计规格 |
|