# 车辆采购合同 + 验车入库 Linear UI Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 按规格将采购合同、验车入库、外勤三端对齐 Linear 产品浅色（`--ln-*` / `#32a06e`）与 vm-page 壳层，一波交付，不改业务规则。

**Architecture:** PC 两原型继续引用 `vehicle-management/style.css`；列表改为筛选卡 + KPI + `OperationActions` + `TablePagination`；表单/详情用顶栏返回 + 分区卡片；外勤三端共享一份 `field-theme.css`（`--ln-*` 子集）并改各 `index.html` 内联色。业务仍走 `src/common/vehicle-purchase/*`。

**Tech Stack:** React + Ant Design + Lucide；vm-/ln- CSS；静态 HTML/JS 外勤页。

**Spec:** `docs/superpowers/specs/2026-07-22-vehicle-purchase-inspection-linear-ui-design.md`

---

## File map

| 文件 | 职责 |
|------|------|
| `vehicle-purchase-contract/VehiclePurchaseContractApp.tsx` | 列表壳、KPI、表单分区、主题色 |
| `vehicle-purchase-contract/styles/index.css` | vpc 收敛到 vm/ln |
| `vehicle-purchase-contract/DESIGN.md` | 声明设计基底 |
| `vehicle-inspection/VehicleInspectionApp.tsx` | 同上（验车） |
| `vehicle-inspection/styles/index.css` | vi 收敛 |
| `vehicle-inspection/DESIGN.md` | 声明设计基底 |
| `vehicle-inspection-*/field-theme.css`（新建，三端各一份或同源复制） | 外勤 Linear 浅色 token |
| `vehicle-inspection-*/index.html` | 引用 theme、触控与对比度 |

---

### Task 1: 采购合同列表壳 + 主题色

**Files:**
- Modify: `src/prototypes/vehicle-purchase-contract/VehiclePurchaseContractApp.tsx`
- Modify: `src/prototypes/vehicle-purchase-contract/styles/index.css`
- Create: `src/prototypes/vehicle-purchase-contract/DESIGN.md`

- [ ] **Step 1:** `vmTheme.token.colorPrimary` 改为 `#32a06e`；`colorLink` 同步。
- [ ] **Step 2:** 列表去掉 `vpc-header` h1/副标题；结构改为：
  - `vm-page vpc-page`
  - 筛选：`vm-filter-card` / 或 Card `title="筛选条件"` + 关键词/状态/审批 + 查询重置
  - KPI 四卡（草稿、审批中合集、已通过、已生成验车），可点驱动 filter
  - `vm-table-section`：右对齐「新建合同」；表格；`OperationActions` 替换散落链接（若尚未用）
  - `vm-table-footer` + `TablePagination`
- [ ] **Step 3:** CSS 用 `var(--ln-*)` / `var(--vm-*)` 替换 `#10b981`、`#f8fafc` 等硬编码；保留审批 banner、表单 grid 类名但换 token。
- [ ] **Step 4:** 写入 `DESIGN.md`：基底 = linear 产品浅色 + vm-shared。
- [ ] **Step 5:** 浏览器打开 `/prototypes/vehicle-purchase-contract/` 目视：无大标题、主色绿、分页在底。

### Task 2: 采购合同创建/编辑/查看分区

**Files:**
- Modify: `VehiclePurchaseContractApp.tsx`（create/edit/view 分支）
- Modify: `styles/index.css`

- [ ] **Step 1:** 顶栏：返回 + 标题 + 主操作（保存/提交/关闭）。
- [ ] **Step 2:** 表单/详情字段按规格五分区包进 `vpc-section` 卡片（主体 / 车型价格 / 分期 / 交付 / 附件质保）。
- [ ] **Step 3:** 审批提示条用 `--ln-primary-soft` 背景；总价 `tabular-nums`。
- [ ] **Step 4:** 目视创建页分区与返回可用。

### Task 3: 验车入库列表 + 详情

**Files:**
- Modify: `src/prototypes/vehicle-inspection/VehicleInspectionApp.tsx`
- Modify: `src/prototypes/vehicle-inspection/styles/index.css`
- Create: `src/prototypes/vehicle-inspection/DESIGN.md`

- [ ] **Step 1:** 同 Task1：主题色、去大标题、筛选卡、KPI（待验/验车中/已完成）、表格+分页、`OperationActions`。
- [ ] **Step 2:** 详情：返回顶栏；摘要；外勤按钮（绑定 + open）；车辆表；主操作右对齐。
- [ ] **Step 3:** CSS 换 `--ln-*`；`DESIGN.md` 声明基底。
- [ ] **Step 4:** 目视列表与详情；点小程序 URL 200。

### Task 4: 外勤三端 Linear 浅色

**Files:**
- Create: `field-theme.css` 于 web（内容含 `:root` `--ln-primary` 等），复制到 miniprogram、app
- Modify: 各 `index.html` link stylesheet；调整内联 style 引用 var
- Modify: 如有冲突的 `app.js` 内联色则改为 class

- [ ] **Step 1:** 定义 `--ln-primary: #32a06e`、canvas、ink、muted、hairline、radius、error。
- [ ] **Step 2:** 卡片/按钮/底栏用 token；触控按钮 min-height 44px；body ≥16px。
- [ ] **Step 3:** 三端同步；curl 三个 index.html 为 200；目视一页。

### Task 5: 文档与验收

- [ ] **Step 1:** 若仅样式：PRD 可跳过全量；若分区标题有语义变化，轻量更新 `.spec/requirements-prd.md` 一句「UI 对齐 Linear 产品浅色」。
- [ ] **Step 2:** 对照规格 §7 验收清单自检。
- [ ] **Step 3:** 不自动 commit（除非用户要求）。

---

## Spec coverage

| 规格节 | Task |
|--------|------|
| §2 Linear 浅色 | 1–4 |
| §3.1 合同 | 1–2 |
| §3.2 验车 | 3 |
| §3.3 外勤 | 4 |
| §5 业务冻结 | 全程不改 common |
| §7 验收 | 5 |

## Placeholder scan

无 TBD；提交步骤尊重用户「未要求不 commit」。