fix(form): 分组表单右侧永远空着 —— section 的多列 grid 套在整个表单外面而非字段上 #2128

问题现象

在对象「新建/编辑」弹窗表单里,当字段被分到某个**分组(section / 字段组)**下时,分组右侧永远空着——所有字段都挤在左边一列(或左半区),右半区是一片空白(见截图红框)。用户把它当成「平台 bug」,反馈说「分组下的字段右边始终空着」。

只有分组的表单会这样;不分组的「扁平字段」表单(走 auto-layout)多列布局是正常的。

根因(已用 DOM 复现确认)

分组表单的每个 section 是这样渲染的(以 ModalForm 为例,SplitForm / TabbedForm / WizardForm / DrawerForm 同款写法):

<FormSection columns={section.columns || 1} gridClassName={CONTAINER_GRID_COLS[...]}>
  <SchemaRenderer schema={{ ...baseFormSchema, fields: buildSectionFields(section) }} />
</FormSection>

FormSection 把 columns/gridClassName 应用在外层容器 div 上(packages/plugin-form/src/FormSection.tsx:154-158):

<div className={cn('grid gap-4', gridClassName || gridCols[columns])}>
  {children}
</div>

但这个 grid 的 children 只有一个 —— 整个 <SchemaRenderer> 表单元素。也就是说:

• 多列 grid 被套在了「整个表单」外面,而不是套在「字段」外面。一个 grid 里只有 1 个 grid item(表单),它占据第 1 格,其余列永远空着 → 这就是右边那片空白。
• 与此同时,内层 <SchemaRenderer> 表单没有收到 columns / fieldContainerClass,于是它按默认 columns=1 走 space-y-4,把字段单列竖排。

用一个最小 ModalForm(section columns: 2,4 个字段)渲染后 dump DOM,可稳定复现:

GRID class= grid gap-4 grid-cols-1 @md:grid-cols-2 | directChildren= 1   ← 2 列 grid 只有 1 个子节点
FORM fieldWrap class= space-y-4 | fields= 4                              ← 内层表单单列竖排 4 个字段

对比:扁平字段路径是对的(ModalForm.tsx:555-563)——它把 columns 和 fieldContainerClass 传进内层表单 schema,让字段容器自己变成多列 grid。分组路径的 renderBody 漏了这一步。

涉及文件

多列 grid 都错误地套在了单个表单外面,内层表单没拿到 columns:

• packages/plugin-form/src/ModalForm.tsx:493-501(renderBody)、:518-524、:534-543
• packages/plugin-form/src/SplitForm.tsx:234-250
• packages/plugin-form/src/TabbedForm.tsx:346-353
• packages/plugin-form/src/WizardForm.tsx:457-463
• packages/plugin-form/src/DrawerForm.tsx(同款写法)
• packages/plugin-form/src/FormSection.tsx:154-158(grid 应用点)

建议方案

让字段容器变成多列 grid,而不是把整表单套进 grid:

1. 在各变体的 renderBody / section SchemaRenderer 里,把 section 的列数传进内层表单 schema —— 复用扁平路径已有的做法:传 columns: section.columns 和 fieldContainerClass: CONTAINER_GRID_COLS[section.columns](容器查询 class,让布局跟随弹窗宽度而非视口)。
2. 相应地,FormSection 外层不要再套多列 grid(传 columns={1} / 不传 gridClassName),避免「双重套壳」。FormSection 只负责标题 / Card 外框 / 折叠。
3. 五个变体(Modal / Split / Tabbed / Wizard / Drawer)统一修,并补一个回归测试:section columns: 2 时,字段容器 class 含 @md:grid-cols-2 且字段本身是该 grid 的直接子节点(而不是「grid 只有 1 个 form 子节点」)。

复现步骤

1. 任一对象配置一个带分组、且分组 columns >= 2 的新建/编辑表单;
2. 打开「新建」弹窗;
3. 观察:字段全挤在左侧,分组右半区空白。