Files

王冕 a01d2ab708 扩展氢能站点、加氢记录与台账原型链路，新增工作台、车辆资产 H5、自营物流等原型，并同步导航注册、PRD 资源与交付技能。

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-07-21 17:15:39 +08:00

8.3 KiB

Raw Blame History

车辆资产 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 对齐，交互按手机重做。

成功标准

App / 手机浏览器打开 H5 地址，不进入 PC 宽表页。
KPI 分类与证照/保险异常口径与 PC 一致。
详情多 Tab 可浏览，全程无编辑入口（含 Admin）。
按车牌搜索可定位车辆。

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. 信息架构

列表 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. 用户故事（摘要）

作为任意登录用户，我想在手机上按车牌找到车，以便外勤快速核对车辆信息。
作为运维/业务，我想用 KPI 与证照/保险异常筛选缩小范围，以便发现需跟进车辆（跟进在 PC 或其他模块完成）。
作为任意用户，我想在详情里切换各业务 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	需求访谈确认后首版设计规格

8.3 KiB Raw Blame History Unescape Escape