7.7 KiB
车辆采购合同 + 验车入库 · UI 对齐 Linear（产品浅色）设计规格
日期： 2026-07-22
状态： 规格已确认 · UI 已按本规格落地（2026-07-22）
范围决议： 全链路（PC 两端 + 外勤三端）· 一波交付 · 列表壳 vm-page · 设计基底 Linear 产品浅色
1. 背景与目标
现有 vehicle-purchase-contract、vehicle-inspection 及根下迁入的外勤三端（vehicle-inspection-{web,miniprogram,app}）功能已通，但视觉与交互未对齐项目标准主题与列表壳规范：硬编码 Ant Design #10b981、自定义 vpc-/vi- 页头与筛选条、与车辆管理 / 保险采购等业务页不一致。
目标： 在不改业务规则的前提下，按 Linear 产品浅色 token + vm-page 壳层，一波重做 PC 列表/表单/详情与外勤三端视觉与布局，使采购→验车→外勤→入库链路观感统一、可验收。
非目标： 不改审批阈值、VIN 校验、拒收重交、入库桥、分期付款逻辑；不上 Linear 营销深色 + 薰衣草主色；不单独进导航的外勤页仍从验车详情链出。
2. 设计事实源（优先级）
| 优先级 | 来源 | 用途 |
|---|---|---|
| 1 | src/themes/linear/DESIGN.md |
品牌与组件原则事实源（标准参考主题） |
| 2 | src/prototypes/vehicle-management/style.css 中 --ln-* / --vm-* |
产品浅色落地（inverse 白底 + 主色 #32a06e） |
| 3 | src/prototypes/vm-shared/DESIGN.md |
列表壳结构：筛选卡、工具栏、分页、禁止重复大标题等 |
| 4 | 既有参考页 | 保险采购 / 租赁合同列表与详情分区习惯 |
明确采用的 Linear 落地方式（已确认）：
选项 1 — Linear 产品浅色，与车辆管理一致；不采用官网深色 #010102 + #5e6ad2。
ConfigProvider： colorPrimary: '#32a06e'（或读 CSS 变量等价），字体栈对齐 --vm-font（Inter + 系统/苹方）。
3. 信息架构与页面结构
3.1 车辆采购合同（vehicle-purchase-contract）
列表（默认）
vm-page vpc-page
├── 筛选卡（「筛选条件」）：关键词、状态、审批类型；查询 / 重置
├── KPI 行（可选可点筛选）：草稿 / 待审或审批中 / 已通过 / 已生成验车
└── vm-table-section
├── 工具栏右对齐：新建合同
├── 表格 + OperationActions（查看 / 编辑 / 提交审批 / 发起工单等既有动作）
└── TablePagination
- 列表页禁止独立 h1 大标题 + 功能说明副标题（侧栏已标明模块名）。
- 金额、数量列使用
tabular-nums/ln-numeric既有约定。
创建 / 编辑 / 查看
顶栏：返回列表 + 标题（新建/编辑/查看 + 合同编号）+ 主操作（保存草稿 / 提交 / 关闭）
主体白底分区（hairline + radius-card）：
1. 合同主体（买/卖/丙方与角色）
2. 车型与价格（型号编码、产地、单价数量、实时总价与审批类型提示条）
3. 分期付款计划
4. 交付与验车约定
5. 质保 / 关联协议 / 附件
- ≥500 万自动「非正常审批」提示条保留，样式用
--ln-primary-soft/ success 语义，不用另套色板。 - 查看态只读；草稿可编辑；状态驱动操作按钮与现逻辑一致。
3.2 验车入库（vehicle-inspection）
列表
vm-page vi-page
├── 筛选卡：关键词、任务状态；查询 / 重置
├── KPI：待验车 / 验车中 / 已完成
└── 表格 + 操作（进入详情 / 结案等）+ TablePagination
详情
顶栏：返回 + 任务编号/车型摘要 + 结案、入库等主操作
├── 任务摘要（Descriptions / 分区字段，对齐交接验收表语境）
├── 外勤入口：Web / 小程序 / APP（点击绑定 activeInspectionId 并打开 /prototypes/.../index.html）
└── 车辆明细表（VIN、里程、电机号、状态、拒收原因、重交操作）
3.3 外勤三端（同波）
| 原型路径 | 壳 |
|---|---|
src/prototypes/vehicle-inspection-web/ |
Web 外勤 |
src/prototypes/vehicle-inspection-miniprogram/ |
小程序壳 |
src/prototypes/vehicle-inspection-app/ |
APP 壳 |
- 视觉：Linear 浅色语义（主色绿、白/浅灰 canvas、hairline 卡片）；字号 ≥16px；触控目标 ≥44px；
cursor-pointer；尊重prefers-reduced-motion。 - 逻辑：继续共用
field-core.js；《车辆交接验收表》图例 √/N/×/O、双签、双角度照片、拒收重交行为不变。 - 三端仅外框/底栏差异，表单与列表结构对齐，避免三套互不相干的样式常量。
4. 视觉与组件规则（摘要）
| 项 | 约定 |
|---|---|
| 主色 | #32a06e（--ln-primary） |
| 画布 | --ln-canvas-parchment / --vm-bg |
| 卡片面 | --ln-surface-card + --ln-hairline + radius 8/12 |
| 正文/次要 | --ln-ink / --ln-muted |
| 成功/警告/错误 | --ln-success / --ln-warning / --ln-error |
| 焦点 | 控件边框改主色（vm-focus-border 模式），避免装饰性外发光 |
| 图标 | Lucide/SVG，不用 emoji 作图标 |
| 列表操作列 | OperationActions + 既有 vm-operation-actions |
5. 业务规则（本轮冻结，仅 UI）
以下保持现有实现与 .spec 文档，本轮不改判定：
- 合同金额 ≥ 500 万 → 非正常审批，否则正常
- 1 合同 → 1 验车任务；明细按到车追加
- VIN 17 位；交接验收表通过条件；拒收 → 重交 → 重验
- localStorage 桥：
oneos.vp.*（含activeInspectionId）
若 UI 改动导致文案/验收描述变化，同轮按 oneos-autoprd 与业务逻辑文档化规则更新 PRD / annotation（纯样式可跳过全量重写；分区标题、状态文案有语义变化则更新）。
6. 文件与依赖（实现边界）
预期修改
src/prototypes/vehicle-purchase-contract/VehiclePurchaseContractApp.tsx+styles/index.css（收敛到 vm-/ln- 类，去掉重复页头）src/prototypes/vehicle-inspection/VehicleInspectionApp.tsx+styles/index.css- 外勤三端
index.html/ 内联或共享样式（可抽公共 CSS 片段到三端复制或单文件引用，以静态可访问为准） - 可选：各原型补
DESIGN.md一页，声明「基底 = linear 产品浅色 + vm-shared」
预期不改（除非发现硬编码色破坏一致性）
src/common/vehicle-purchase/*业务逻辑- 审批 mock、工单预填、入库桥算法
依赖： 继续 import '../vehicle-management/style.css'；TablePagination；OperationActions；PrototypeAnnotationHost。
7. 验收要点
- 两列表页：无重复大标题；筛选卡 +（有）KPI + 底部分页；主色为
#32a06e。 - 合同表单/详情：分区清晰；审批提示条可见且色板正确。
- 验车详情：外勤三按钮可打开
/prototypes/vehicle-inspection-*/index.html且绑定当前任务。 - 外勤三端：交接验收表可填报；与 PC 同域 localStorage 互通。
- 对照车辆管理列表：间距、圆角、边框、字体观感一致（允许业务字段不同）。
- 对比度正文 ≥ 4.5:1；可点击元素有 pointer；外勤触控区达标。
8. 决议记录
| 项 | 选择 |
|---|---|
| 优化深度 | C 全链路（含外勤） |
| 排期 | 一波做完 |
| PC 路线 | A 严格对齐 vm-page |
| Linear 落地 | 1 产品浅色（--ln-* / #32a06e） |
| 产品确认草案 | 2026-07-22 认可 |
9. 自我检查（写规格时）
- 无 TBD 占位关键路径
- 未混用深色薰衣草与浅色绿主色
- 业务规则与 UI 边界写清
- 外勤 URL 与同波交付写清
- 与用户确认的 C / 一波 / A / Linear-1 一致