OneOS1.2/docs/superpowers/plans/2026-07-22-vehicle-purchase-inspection-linear-ui.md

车辆采购合同 + 验车入库 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」。