装货信息 · 布局方案对比

左右分栏的初衷是横向利用宽度、节约纵向高度——这点完全正确。 问题不在分栏本身，而是右侧仍套用了「产品信息」的 10 列宽表（合计约 1180px min-width），塞进约 52% 宽的右栏必然横向滚动。

根因：右栏 ≈ 640px，表格却要 1180px 方向：保留左右分栏，右栏用「段内紧凑表」 完整 10 列仍在上方「产品信息」；段内只展示 + 可编辑段级字段
调整后可观察各方案是否仍出现横向滚动

当前实现示意：左侧装货表单 + 右侧 10 列产品表。右侧容器被限制在约一半弹窗宽，表格 min-width 叠加后出现横向滚动条。

编辑运输计划 装货信息区块

装货信息

生成地磅单（出库）
装货产品
序号 产品名称 别名 品牌 型号/规格 单位 计划数量 包装规格 送货方式 备注
1 97% 精制硫酸 易制毒 工业硫酸 不限品牌 CP级 吨
2 30% 液碱 — 指定 · 天原 国标 吨

优点

  • 表单与产品同屏，纵向不算太高
  • 与「产品信息」表头完全一致

缺点

  • 右侧必出横向滚动，无法一屏看全
  • 用户需左右拖动才能改包装/送货方式

不推荐（费高度）：虽能放下 10 列，但把产品表挪到表单下方，区块纵向变长，与「左右分栏省高度」的初衷相反。仅作对照。

编辑运输计划 装货信息 · 方案 A

装货信息

生成地磅单（出库）
装货产品
序号 产品名称 别名 品牌 型号/规格 单位 计划数量 包装规格 送货方式 备注
1 97% 精制硫酸 易制毒 工业硫酸 不限品牌 CP级 吨
2 30% 液碱 — 指定 · 天原 国标 吨

优点

  • 无横向滚动，10 列全可见

缺点

  • 纵向占用大，浪费左右分栏的设计意图

推荐：保留左右分栏，左栏略收窄（约 36%）、右栏加宽（约 64%）。 右侧改用段内紧凑表（6 列）：产品列内叠放名称/别名/品牌/规格/单位（只读，来自计划同步）； 独立可编辑列仅保留计划数量、包装规格、送货方式、备注——这些是段级真正要改的字段。 完整 10 列仍在上方「产品信息」，段内不必重复平铺。

编辑运输计划 装货信息 · 方案 D

装货信息

生成地磅单（出库）
装货产品
# 产品 计划数量 包装规格 送货方式 备注
1 97% 精制硫酸 易制毒 别名：工业硫酸 · 品牌：不限 · CP级 · 吨
2 30% 液碱 品牌：天原 · 国标 · 吨

只读展示字段收进「产品」列副行；与上方产品信息表互补，不重复占列宽

优点

  • 保留左右分栏，省高度
  • 无横向滚动，信息仍完整可见
  • 段内只突出可编辑字段，认知负担更低
  • 仍是表格形态，与 B 端习惯一致

缺点

  • 段内表与「产品信息」列结构不同（有意为之）
  • 产品列副行在名称很长时需换行

更省高度：同样保留左右分栏，右侧每条产品仅占 2 行（产品条）： 第 1 行名称 + 计划数量；第 2 行包装/送货/备注。别名品牌等收在一行灰色 meta 里。 2 条产品的高度 ≈ 紧凑表 2 行，但信息密度更可控。

编辑运输计划 装货信息 · 方案 E

装货信息

生成地磅单（出库）
装货产品
1
97% 精制硫酸 易制毒
别名：工业硫酸 · 品牌：不限 · CP级 · 吨
2
30% 液碱
品牌：天原 · 国标 · 吨

优点

  • 左右分栏 + 纵向最省
  • 无横向滚动，字段全可见
  • 多产品时比宽表更易扫读

缺点

  • 非传统表格，需新组件样式
  • 与产品信息表形态不同

保留左右分栏，产品区不用宽表，改为每张产品一张卡片：首行名称+数量，次行 4 列网格放别名/品牌/规格/单位/包装/送货/备注。 右栏再窄也不会横向滚动。

编辑运输计划 装货信息 · 方案 B

装货信息

生成地磅单（出库）
装货产品
1
97% 精制硫酸 易制毒
工业硫酸
不限品牌
CP级
吨
2
30% 液碱
—
指定 · 天原
国标
吨

优点

  • 左右分栏保留，表单与产品同屏
  • 右栏零横向滚动
  • 多产品时信息层次清晰

缺点

  • 与「产品信息」表格形态不一致
  • 产品多时右栏纵向较长
  • 前端需新增卡片组件

保留左右分栏 + 表格，通过合并列压缩宽度：「产品」列内叠放名称/别名/品牌；去掉独立备注列或缩短。 列数从 10 降到 7，右栏可勉强放下，但长文案会换行。

编辑运输计划 装货信息 · 方案 C

装货信息

生成地磅单（出库）
装货产品
# 产品 型号/规格 单位 计划数量 包装规格 送货方式
1 97% 精制硫酸 易制毒 别名：工业硫酸 品牌：不限品牌 CP级 吨
2 30% 液碱 品牌：指定 · 天原 国标 吨

备注已省略或 hover 展示；产品列内多行换行，行高不统一

优点

  • 保留左右分栏 + 表格式编辑
  • 列数减少，大概率无横向滚动

缺点

  • 与「产品信息」列结构不一致
  • 产品列拥挤，别名/品牌可读性差
  • 备注字段不好放