179 lines
7.7 KiB
Markdown
179 lines
7.7 KiB
Markdown
# 车辆采购合同 + 验车入库 · 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`）
|
||
|
||
**列表（默认）**
|
||
|
||
```text
|
||
vm-page vpc-page
|
||
├── 筛选卡（「筛选条件」）：关键词、状态、审批类型；查询 / 重置
|
||
├── KPI 行（可选可点筛选）：草稿 / 待审或审批中 / 已通过 / 已生成验车
|
||
└── vm-table-section
|
||
├── 工具栏右对齐：新建合同
|
||
├── 表格 + OperationActions（查看 / 编辑 / 提交审批 / 发起工单等既有动作）
|
||
└── TablePagination
|
||
```
|
||
|
||
- 列表页**禁止**独立 h1 大标题 + 功能说明副标题（侧栏已标明模块名）。
|
||
- 金额、数量列使用 `tabular-nums` / `ln-numeric` 既有约定。
|
||
|
||
**创建 / 编辑 / 查看**
|
||
|
||
```text
|
||
顶栏：返回列表 + 标题（新建/编辑/查看 + 合同编号）+ 主操作（保存草稿 / 提交 / 关闭）
|
||
主体白底分区（hairline + radius-card）：
|
||
1. 合同主体（买/卖/丙方与角色）
|
||
2. 车型与价格（型号编码、产地、单价数量、实时总价与审批类型提示条）
|
||
3. 分期付款计划
|
||
4. 交付与验车约定
|
||
5. 质保 / 关联协议 / 附件
|
||
```
|
||
|
||
- ≥500 万自动「非正常审批」提示条保留，样式用 `--ln-primary-soft` / success 语义，不用另套色板。
|
||
- 查看态只读；草稿可编辑；状态驱动操作按钮与现逻辑一致。
|
||
|
||
### 3.2 验车入库（`vehicle-inspection`）
|
||
|
||
**列表**
|
||
|
||
```text
|
||
vm-page vi-page
|
||
├── 筛选卡：关键词、任务状态；查询 / 重置
|
||
├── KPI：待验车 / 验车中 / 已完成
|
||
└── 表格 + 操作（进入详情 / 结案等）+ TablePagination
|
||
```
|
||
|
||
**详情**
|
||
|
||
```text
|
||
顶栏：返回 + 任务编号/车型摘要 + 结案、入库等主操作
|
||
├── 任务摘要（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. 验收要点
|
||
|
||
1. 两列表页：无重复大标题；筛选卡 +（有）KPI + 底部分页；主色为 `#32a06e`。
|
||
2. 合同表单/详情：分区清晰；审批提示条可见且色板正确。
|
||
3. 验车详情：外勤三按钮可打开 `/prototypes/vehicle-inspection-*/index.html` 且绑定当前任务。
|
||
4. 外勤三端：交接验收表可填报；与 PC 同域 localStorage 互通。
|
||
5. 对照车辆管理列表：间距、圆角、边框、字体观感一致（允许业务字段不同）。
|
||
6. 对比度正文 ≥ 4.5:1；可点击元素有 pointer；外勤触控区达标。
|
||
|
||
---
|
||
|
||
## 8. 决议记录
|
||
|
||
| 项 | 选择 |
|
||
|----|------|
|
||
| 优化深度 | C 全链路（含外勤） |
|
||
| 排期 | 一波做完 |
|
||
| PC 路线 | A 严格对齐 vm-page |
|
||
| Linear 落地 | 1 产品浅色（`--ln-*` / `#32a06e`） |
|
||
| 产品确认草案 | 2026-07-22 认可 |
|
||
|
||
---
|
||
|
||
## 9. 自我检查（写规格时）
|
||
|
||
- [x] 无 TBD 占位关键路径
|
||
- [x] 未混用深色薰衣草与浅色绿主色
|
||
- [x] 业务规则与 UI 边界写清
|
||
- [x] 外勤 URL 与同波交付写清
|
||
- [x] 与用户确认的 C / 一波 / A / Linear-1 一致
|