shanxia2.0/docs/superpowers/plans/2026-08-02-pl-plan-list-product-columns.md

计划列表产品信息拆列 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: 将运输计划 / 计划归档 / 计划证件列表的「产品信息」合并列拆成产品名称、型号/规格、数量、单位四列。

Architecture: 扩展 PlPlanListProductCell 支持 field 按字段渲染；三页列表替换列定义与模板；列设置 key 从 products 改为四个独立 prop。

Tech Stack: Vue 3 + Element Plus（web-admin）

Spec: docs/superpowers/specs/2026-08-02-pl-plan-list-product-columns-design.md

---

Task 1: 扩展 PlPlanListProductCell

Files:

• Modify: web-admin/src/components/business/pl-plan-list-product-cell/index.vue

• Step 1: 增加 field?: 'name' | 'spec' | 'qty' | 'unit'；未传时保持现有整行拼接。

• Step 2: field 有值时按字段渲染多行堆叠；name 带危化 Tag；qty/unit 用 getPlanProductQuantity / 字典标签；空产品显示 —。

• Step 3: 从 pl-display 引入 getPlanProductSpec、getPlanProductQuantity（有 field 时不再依赖整行 formatPlanProductListText）。

Task 2: 运输计划列表

Files:

• Modify: web-admin/src/views/pl/plan/index.vue

• Step 1: listColumnDefs 将 products 换成 productName / productSpec / productQty / productUnit。

• Step 2: 模板中「产品信息」列替换为四列，分别传 field="name|spec|qty|unit"；数量右对齐、单位居中；min-width 140/120/90/80。

Task 3: 计划归档 + 计划证件列表

Files:

• Modify: web-admin/src/views/pl/plan-archive/index.vue

• Modify: web-admin/src/views/pl/plan-cert/index.vue

• Step 1: 两页同样替换 listColumnDefs 与表格列（证件页在原「产品信息」位置拆四列，不重排其它列）。

Task 4: 验证与图谱

• Step 1: 目视/类型检查三页无模板错误；确认 PlPlanListProductCell 无其它调用方需同步（三页 + 组件声明）。
• Step 2: 运行 ./scripts/update-graph.sh frontend（或 graphify update 于 web-admin）。