# 出库放行审核 · 列表卡片对齐采集协议单卡片

> 日期：2026-07-29  
> 状态：已实现  
> 模块：中试服务 / 基础实验（及共用同页的临床入口）→ 出库放行审核  
> 界面模式：卡片列表（对齐协议卡）  
> 参考页：`web-admin/src/views/cell-storage/protocol-audit/ProtocolAuditTab.vue`（`protocol-card*`）  
> 实现页：`web-admin/src/views/pilot-service/outbound-release-review/OutboundReleaseReviewCardList.vue`  
> Demo：`docs/superpowers/demos/2026-07-29-outbound-release-card-vs-protocol-card-demo.html`

## 1. 背景与目标

### 现状

出库放行审核使用多列网格卡片（`outbound-release-review-card*`）：标题行堆 Tag、meta 栅格、需求细胞绿底块、底部横排操作。与采集协议单「左 aside + 中 sections + 右 foot」全宽卡片观感不一致。

### 目标

出库放行列表卡片在**布局与 CSS 类名**上对齐采集协议单卡片；**业务字段**仍为出库放行数据。中试 / 基础实验 / 临床共用组件，一次改动全覆盖。

### 范围外

- 不改列表 API、筛选、待审核/已审核 Tab、就绪/作废过滤  
- 不抽公共 SCSS（本次按各自维护复制样式）  
- 不改审核 / 查看 / 出库物料弹窗逻辑与事件契约  
- 不把协议业务块（新生儿、缴费等）搬进出库卡

## 2. 需求确认记录

| 维度 | 决定 |
|------|------|
| 对齐方式 | 复用 `protocol-card*` 类名，只换字段 |
| 样式落地 | 复制协议卡 SCSS 到 `OutboundReleaseReviewCardList.vue`，各自维护 |
| Aside 主标题 | 中试/临床：患者姓名；基础实验：客户名称；副行申请单号（基础实验再加课题） |
| 中部块 | 三块：基础信息 · 需求细胞（样本条样式）· 状态摘要 |
| 列表排布 | 单列全宽（非多列 `auto-fill` 网格） |

## 3. 卡片结构

```text
article.protocol-card
  ├─ .protocol-card__select          勾选
  ├─ .protocol-card__aside           身份栏
  ├─ .protocol-card__sections
  │    ├─ .protocol-card__block      基础信息
  │    ├─ .protocol-card__block      需求细胞（sample-item 条）
  │    └─ .protocol-card__block      状态摘要
  └─ .protocol-card__foot
       └─ .protocol-card__actions    审核 / 查看 / 出库物料
```

选中：`is-selected` 类 + 主色描边（与协议卡一致）。双击仍触发查看。

### 3.1 Aside

| 元素 | 中试 / 临床 | 基础实验 |
|------|-------------|---------|
| 序号 | `protocol-card__index` | 同左 |
| 主标题 | `patientName` | `customerName` |
| 副行 | 申请单号 | 申请单号；课题名称 |
| 主 Tag | 审核结论（无则「待审核」） | 同左 |
| 次 Tag | `bizType` | 同左 |
| 底部小字 | 计划状态 · 质检状态（文案） | 同左；可附审核人/时间 |

### 3.2 基础信息块

- 申请单号  
- 患者姓名 **或** 课题名称 + 客户名称（随 `showPatient`）  
- 取用时间（文案用现有 `pickupTimeLabel`）  
- 审核人、审核时间  

### 3.3 需求细胞块

- 标题「需求细胞」+ `N 项`（`protocol-card__block-count`）  
- 每条产品用 `protocol-card__sample-item` / `__sample-seq` / `__sample-line` 等  
- 展示：项目名称、项目编码、细胞类型 · 规格 · 数量、产品状态 Tag  
- 无产品时：`protocol-card__empty` 或现有 fallback 文案  

### 3.4 状态摘要块

- 计划状态、质检状态、审核结论（均为 `el-tag`，语义色不变）

### 3.5 操作列

- 事件不变：`review` / `view` / `material` / `toggle-select` / `card-dblclick` / 分页  
- 按钮顺序建议：审核 → 查看 → 出库物料（与协议卡「审核优先」一致；图标与现网一致）

## 4. 样式

1. 从 `ProtocolAuditTab.vue` 复制 `.protocol-card*` 及相关响应式规则到 `OutboundReleaseReviewCardList.vue` 的 scoped SCSS。  
2. 删除本组件内旧的 `.outbound-release-review-card*` 布局样式；容器可保留 `list-body list-wrap` 与分页栏。  
3. 列表容器改为 `display: flex; flex-direction: column; gap: 10px; padding: 16px`（对齐 `.protocol-card-list`）。  
4. 允许少量出库修饰（如块 `min-width`），不引入协议专用块名（`--newborn` / `--payment`）。

## 5. 改动面

| 文件 | 变更 |
|------|------|
| `OutboundReleaseReviewCardList.vue` | 模板结构 + 复制 SCSS + 字段映射 |
| Demo HTML | 已存在，可作验收对照；实现后可标已实现或微调 |

不改：`index.vue` 数据流（除非 props 不足，当前已够）、API、后端。

## 6. 测试要点

1. 中试入口：aside 主标题为患者姓名；基础实验为客户名称。  
2. 卡片为单列全宽；选中描边；勾选/批量审核仍可用。  
3. 多产品时需求细胞条数正确；无产品有空态。  
4. 查看 / 审核 / 出库物料按钮行为与改前一致。  
5. 窄屏响应式不严重错乱（参考协议卡 media query）。

## 7. 方案取舍

| 方案 | 结论 |
|------|------|
| 复制类名 + 改写出库卡片 DOM | **采用** |
| 抽公共 SCSS | 拒绝（本次各自维护） |
| 仅微调视觉、保留网格 | 拒绝 |