From cccee8e2cc9a226aef761595e9c67e14e2c2555e Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Wed, 29 Jul 2026 15:57:05 +0800 Subject: [PATCH] docs: add outbound release card align-to-protocol design and demo Document reusing protocol-card class names with outbound fields; include HTML comparison demo. Co-authored-by: Cursor --- ...nd-release-card-vs-protocol-card-demo.html | 449 ++++++++++++++++++ ...ound-release-card-align-protocol-design.md | 118 +++++ 2 files changed, 567 insertions(+) create mode 100644 docs/superpowers/demos/2026-07-29-outbound-release-card-vs-protocol-card-demo.html create mode 100644 docs/superpowers/specs/2026-07-29-outbound-release-card-align-protocol-design.md diff --git a/docs/superpowers/demos/2026-07-29-outbound-release-card-vs-protocol-card-demo.html b/docs/superpowers/demos/2026-07-29-outbound-release-card-vs-protocol-card-demo.html new file mode 100644 index 00000000..6e5cbad8 --- /dev/null +++ b/docs/superpowers/demos/2026-07-29-outbound-release-card-vs-protocol-card-demo.html @@ -0,0 +1,449 @@ + + + + + + 出库放行审核卡片 · 对齐采集协议单卡片 Demo + + + + + + +
+

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

+

+ 左侧/上方为现状（多列网格 + 纵向堆叠）；下方为提议（采集协议单式：左侧身份栏 + 横向信息块 + 右侧操作）。 + 中试服务与基础实验共用同一结构，仅左侧主信息不同。 +

+ +
+ + + + +
+ +
+
A. 现状 · 出库放行审核卡片 OutboundReleaseReviewCardList（多列网格）
+
+
+
+
+
+ + 1 + ZS-2026-00128 + 中试服务 + 已生产 + 已质检 + 待审核 +
+
+
患者姓名
张某某
+
计划取用时间
2026-07-30 09:00:00
+
审核人
—
+
审核时间
—
+
+
+
+
需求细胞
+
+
项目编码
PRJ-001
+
项目名称
MSC 扩增批次 A
+
细胞类型
间充质干细胞
+
规格
1×10⁷ / 袋
+
数量
2
+
产品状态
已完成
+
+
+
+ + + +
+
+
+ +
+
+
+
+ + 1 + JC-2026-00056 + 基础实验 + 已生产 + 已质检 + 通过 +
+
+
课题名称
某细胞体外扩增课题
+
客户名称
某某生物科技
+
计划取用时间
2026-07-28 14:00:00
+
审核人
李审核
+
+
+
+
需求细胞
+
+
项目编码
PRJ-088
+
项目名称
NK 细胞制备
+
细胞类型
NK 细胞
+
规格
5×10⁶ / 袋
+
数量
1
+
产品状态
已完成
+
+
+
+ + + +
+
+
+
+
+ +
+
B. 提议 · 对齐采集协议单卡片布局 单列全宽 · aside + sections + foot
+
+ +
+
+
+
+ 1 + 张某某 +
+
申请单 ZS-2026-00128
+
计划取用 2026-07-30 09:00
+ 待审核 + 中试服务 +
计划状态 已生产 · 质检 已质检
+
+
+
+
基础信息
+
ZS-2026-00128
+
张某某
+
2026-07-30 09:00:00
+
—
+
—
+
+
+
需求细胞 1 项
+
+ 1 +
+
+ 项目 + MSC 扩增批次 A + 已完成 +
+
+ 编码 + PRJ-001 +
+
+ 类型 + 间充质干细胞 · 1×10⁷ / 袋 × 2 +
+
+
+
+
+
状态摘要
+
已生产
+
已质检
+
待审核
+
+
+
+
+ + + +
+
+
+ + +
+
+
+
+ 1 + 某某生物科技 +
+
申请单 JC-2026-00056
+
课题：某细胞体外扩增课题
+ 通过 + 基础实验 +
审核 李审核 · 2026-07-28 16:20
+
+
+
+
基础信息
+
JC-2026-00056
+
某细胞体外扩增课题
+
某某生物科技
+
2026-07-28 14:00:00
+
李审核
+
+
+
需求细胞 1 项
+
+ 1 +
+
+ 项目 + NK 细胞制备 + 已完成 +
+
+ 编码 + PRJ-088 +
+
+ 类型 + NK 细胞 · 5×10⁶ / 袋 × 1 +
+
+
+
+
+
状态摘要
+
已生产
+
已质检
+
通过
+
+
+
+
+ + + +
+
+
+
+
+ +
+ 对齐要点（提议）： + ① 列表改为单列全宽卡片（非多列网格）； + ② 左侧 aside：序号徽章 + 主名称（患者/客户）+ 副信息 + 主状态 Tag； + ③ 中部横向 block：基础信息 / 需求细胞（样本条样式）/ 状态摘要； + ④ 右侧 foot：查看 / 出库物料 / 审核； + ⑤ 勾选在左上角绝对定位，选中描边主色。 + 字段内容仍用出库业务数据，不照搬协议号/新生儿/缴费。 +
+
+ + + + diff --git a/docs/superpowers/specs/2026-07-29-outbound-release-card-align-protocol-design.md b/docs/superpowers/specs/2026-07-29-outbound-release-card-align-protocol-design.md new file mode 100644 index 00000000..1d670d78 --- /dev/null +++ b/docs/superpowers/specs/2026-07-29-outbound-release-card-align-protocol-design.md @@ -0,0 +1,118 @@ +# 出库放行审核 · 列表卡片对齐采集协议单卡片 + +> 日期：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 | 拒绝（本次各自维护） | +| 仅微调视觉、保留网格 | 拒绝 |