zkxw/docs/superpowers/plans/2026-10-10-dialog-label-top-spacing-unify.md

弹窗 label-top 间距与字重统一 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: 全站 label-position="top" 弹窗统一为 label–控件 4px、字重 400、栅格内无叠加 margin；保留物资盘点紧凑 11px label；文档与代码一致。

Architecture: 以全局 SCSS（el-ui.scss + app.scss）为唯一权威；扩展 .form-grid 与 dialog 兜底；Phase 2 仅删除/收敛会冲突的 scoped，不逐页重写样式。盘点紧凑 label 作为刻意例外不改。

Tech Stack: Vue 3 + Element Plus；全局 SCSS；Fresh Mint UI 规范文档。

Spec: docs/superpowers/specs/2026-10-10-dialog-label-top-spacing-unify-design.md

---

File map

File	Responsibility
web-admin/src/assets/styles/core/el-ui.scss	label-top：4px / 400 / height auto（已基本完成，Task 1 复核）
web-admin/src/assets/styles/core/app.scss	.form-grid + form-grid-* margin 归零；dialog 内无栅格行距兜底
若干业务 *FormDialog.vue / 大表单页	删除与全局重复的 label/margin 覆盖（不动盘点 11px）
docs/web-admin-ui-spec-fresh-mint.md	文档对齐 400 / 4px
openspec/changes/zkxw-engineering-standards/specs/ui-conventions/spec.md	若有冲突 SHALL，同步一句

---

Task 1: 复核并锁定全局 label-top 规则

Files:

• Modify（必要时）: web-admin/src/assets/styles/core/el-ui.scss

• Step 1: 确认现有规则

打开 el-ui.scss，确保存在且仅为：

.el-form--label-top .el-form-item__label {
  height: auto !important;
  line-height: 1.4 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--mint-text) !important;
  padding: 0 0 4px !important;
  margin-bottom: 0 !important;
}

若有偏差，改回上表。勿改通用 .el-form-item__label 的 36px（左右布局仍需要）。

• Step 2: Commit（若有改动）

git add web-admin/src/assets/styles/core/el-ui.scss
git commit -m "$(cat <<'EOF'
fix(web-admin): lock label-top dialog label spacing and weight

Keep 4px gap and font-weight 400 for vertical form labels.
EOF
)"

---

Task 2: 扩展栅格 margin 归零 + dialog 行距兜底

Files:

• Modify: web-admin/src/assets/styles/core/app.scss

• Step 1: 扩展选择器

将现有：

.form-grid-2,
.form-grid-3,
.form-grid-4,
.form-grid-5 {
  > .el-form-item {
    margin-bottom: 0;
  }
}

改为同时覆盖自建 .form-grid，并覆盖嵌套一层的 form-item（部分页面把 item 包在 fragment/div 内时用后代选择器更稳）：

/* 纵向间距交给 gap，避免与 el-form-item 默认 margin-bottom 叠加 */
.form-grid,
.form-grid-2,
.form-grid-3,
.form-grid-4,
.form-grid-5 {
  > .el-form-item,
  > .el-form-item.el-form-item--label-top {
    margin-bottom: 0;
  }
}

说明：若实测自建 .form-grid 内 item 不是直接子元素，再改为 .form-grid .el-form-item { margin-bottom: 0; }（注意勿误伤 .form-grid 外嵌套表单；优先直接子代）。

• Step 2: dialog 无栅格兜底

在 app.scss 的 .el-dialog.dialog-form-layout 段落后追加：

/* label-top 弹窗：无栅格时也收紧默认 18px 行距 */
.el-dialog.dialog-form-layout .el-form--label-top > .el-form-item,
.el-dialog.dialog-form-layout .el-form--label-top > .el-row .el-form-item {
  margin-bottom: 12px;
}

.el-dialog.dialog-form-layout .el-form--label-top .form-grid .el-form-item,
.el-dialog.dialog-form-layout .el-form--label-top .form-grid-2 .el-form-item,
.el-dialog.dialog-form-layout .el-form--label-top .form-grid-3 .el-form-item,
.el-dialog.dialog-form-layout .el-form--label-top .form-grid-4 .el-form-item,
.el-dialog.dialog-form-layout .el-form--label-top .form-grid-5 .el-form-item {
  margin-bottom: 0;
}

• Step 3: 本地目视

打开预签约新增弹窗 + 任一未用 form-grid-* 的小弹窗（如状态变更类），确认行距正常、label 间距约 4px。

• Step 4: Commit

git add web-admin/src/assets/styles/core/app.scss
git commit -m "$(cat <<'EOF'
fix(web-admin): tighten label-top row spacing for all dialog grids

Zero form-item margin inside .form-grid* and add dialog fallback spacing.
EOF
)"

---

Task 3: 清理自建 .form-grid 页面的冲突 / 冗余

Files（按序处理，有则改、无则跳过）:

• web-admin/src/views/cell-storage/protocol/ProtocolFormDialog.vue

• web-admin/src/views/research-donation/list/DonationFormDialog.vue

• web-admin/src/views/pilot-service/pilot-application/ApplicationFormDialog.vue

• web-admin/src/views/pilot-service/channel/index.vue

• web-admin/src/views/pilot-service/infusion-schedule-management/ScheduleEditDialog.vue

• web-admin/src/views/quality-inspection/sample-reception/index.vue

• 其它 rg '\.form-grid\s*\{' web-admin/src/views 命中且含 label-position="top" 的弹窗

• Step 1: 扫描

rg -n "el-form-item__label|margin-bottom:\s*0|font-weight:\s*500" \
  web-admin/src/views/cell-storage/protocol/ProtocolFormDialog.vue \
  web-admin/src/views/research-donation/list/DonationFormDialog.vue \
  web-admin/src/views/pilot-service/pilot-application/ApplicationFormDialog.vue \
  web-admin/src/views/pilot-service/channel/index.vue \
  web-admin/src/views/pilot-service/infusion-schedule-management/ScheduleEditDialog.vue \
  web-admin/src/views/quality-inspection/sample-reception/index.vue

• Step 2: 清理规则

对每个文件：

1. 若 .form-grid :deep(.el-form-item) { margin-bottom: 0 } 已与全局重复 → 可保留（无害）或删除以减噪。
2. 若弹窗 label-top 下写了 font-weight: 500 或强制 height: 36px → 删除这些行，依赖全局。
3. 不要改 gap（各业务页 12px 16px / 16px 20px 可保留）。
4. 不要改 protocol-total-inline 等左 label 特例。
5. 不要改任何盘点/库存卡片里 font-size: 11px + padding-bottom: 2px 的紧凑 label。

• Step 3: Commit

git add web-admin/src/views/cell-storage/protocol/ProtocolFormDialog.vue \
  web-admin/src/views/research-donation/list/DonationFormDialog.vue \
  web-admin/src/views/pilot-service/pilot-application/ApplicationFormDialog.vue \
  web-admin/src/views/pilot-service/channel/index.vue \
  web-admin/src/views/pilot-service/infusion-schedule-management/ScheduleEditDialog.vue \
  web-admin/src/views/quality-inspection/sample-reception/index.vue
git commit -m "$(cat <<'EOF'
refactor(web-admin): drop redundant label-top overrides in large form dialogs

Rely on global label-top and form-grid margin rules.
EOF
)"

（无文件变更则跳过 commit。）

---

Task 4: 业务域抽检清单

Files: 无代码；手工验收。

• Step 1: 按域打开弹窗

域	路径（hash）	期望
系统	/#/demo/unit 新增	4px / 400 / 行距紧凑
细胞存储	/#/market/cell-storage/presign-order 新增	同上（基线）
细胞存储	协议新增/编辑	同上；总金额左 label 例外仍横排
试点	申请表单 / 渠道相关弹窗	同上
生产或质检	任一标准 CRUD 新增	同上
OA	收款账户新增（若有）	同上
例外	物资盘点相关弹窗	仍为 11px 紧凑，未变大

• Step 2: 记录异常

若发现某弹窗仍偏松：查是否未用 dialog-form-layout 且未用 .form-grid*，把该类选择器补进 Task 2 兜底或给该弹窗加 dialog-form-layout。

---

Task 5: 文档与 OpenSpec 对齐

Files:

• Modify: docs/web-admin-ui-spec-fresh-mint.md

• Modify（若存在对应句）: openspec/changes/zkxw-engineering-standards/specs/ui-conventions/spec.md

• Step 1: 改 UI 规范

在 docs/web-admin-ui-spec-fresh-mint.md：

• §10.1 .field label：将 500、margin-bottom: 6px 改为 400、padding/margin 与控件间距 4px（表述与实现一致：padding-bottom: 4px）。

• 弹窗表单章节（§9 附近若写 label 字重/间距）：同步为 400 / 4px；注明栅格内 el-form-item margin-bottom: 0。

• 增加一句例外：物资盘点等紧凑 11px label 可保留局部样式。

• Step 2: OpenSpec

若 ui-conventions/spec.md 写有 label 500 或 6px，改为与上一致；否则跳过。

• Step 3: Commit

git add docs/web-admin-ui-spec-fresh-mint.md \
  openspec/changes/zkxw-engineering-standards/specs/ui-conventions/spec.md \
  docs/superpowers/specs/2026-10-10-dialog-label-top-spacing-unify-design.md \
  docs/superpowers/plans/2026-10-10-dialog-label-top-spacing-unify.md
git commit -m "$(cat <<'EOF'
docs: align dialog label-top spacing rules with Fresh Mint

Document 4px gap, weight 400, form-grid margin reset, and stock-check exception.
EOF
)"

---

Spec coverage check

Spec 项	Task
label 4px / 400 / height auto	Task 1
.form-grid + form-grid-* margin 0	Task 2
dialog 无栅格兜底	Task 2
清理自建 form-grid 冲突	Task 3
盘点 11px 例外	Task 3/4 明确不改
业务域抽检	Task 4
文档 / OpenSpec	Task 5