# 车辆资产 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 | 需求访谈确认后首版设计规格 |