@nocobase/client-v2 2.1.0-beta.35 → 2.1.0-beta.36

package/src/flow/models/base/ActionModel.tsx

@@ -48,18 +48,19 @@ ActionModel.registerFlow({
                 title: tExpr('Button icon'),
               }
             : undefined,
+          iconOnly: ctx.model.enableEditIcon
+            ? {
+                'x-decorator': 'FormItem',
+                'x-component': 'Switch',
+                title: tExpr('Icon only'),
+              }
+            : undefined,
           type: ctx.model.enableEditType
             ? {
                 'x-decorator': 'FormItem',
                 'x-component': 'Radio.Group',
                 title: tExpr('Button type'),
-                enum: [
-                  { value: 'default', label: '{{t("Default")}}' },
-                  { value: 'primary', label: '{{t("Primary")}}' },
-                  { value: 'dashed', label: '{{t("Dashed")}}' },
-                  { value: 'link', label: '{{t("Link")}}' },
-                  { value: 'text', label: '{{t("Text")}}' },
-                ],
+                enum: ctx.model.buttonTypeOptions,
               }
             : undefined,
           danger: ctx.model.enableEditDanger

package/src/flow/models/base/ActionModelCore.tsx

@@ -50,12 +50,13 @@ export const ActionSceneEnum = {
 };
 
 export class ActionModel<T extends DefaultStructure = DefaultStructure> extends FlowModel<T> {
-  declare props: ButtonProps & { tooltip?: string };
+  declare props: ButtonProps & { tooltip?: string; iconOnly?: boolean };
   declare scene: ActionSceneType;
 
-  defaultProps: ButtonProps & { tooltip?: string } = {
+  defaultProps: ButtonProps & { tooltip?: string; iconOnly?: boolean } = {
     type: 'default',
     title: tExpr('Action'),
+    iconOnly: false,
   };
 
   enableEditTooltip = true;
@@ -64,6 +65,13 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   enableEditType = true;
   enableEditDanger = true;
   enableEditColor = false;
+  buttonTypeOptions = [
+    { value: 'default', label: '{{t("Default")}}' },
+    { value: 'primary', label: '{{t("Primary")}}' },
+    { value: 'dashed', label: '{{t("Dashed")}}' },
+    { value: 'link', label: '{{t("Link")}}' },
+    { value: 'text', label: '{{t("Text")}}' },
+  ];
 
   static _getScene() {
     return _.castArray(this['scene'] || []);
@@ -133,12 +141,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   }
 
   renderButton() {
-    const props = this.props;
+    const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
 
     return (
       <Button {...props} onClick={this.onClick.bind(this)} icon={icon}>
-        {props.children || this.getTitle()}
+        {iconOnly ? null : props.children || this.getTitle()}
       </Button>
     );
   }
@@ -152,13 +160,13 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   }
 
   renderHiddenInConfig(): React.ReactNode | undefined {
-    const props = this.props;
+    const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
     if (this.forbidden) {
       return (
         <ActionWithoutPermission>
           <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-            {props.children || this.getTitle()}
+            {iconOnly ? null : props.children || this.getTitle()}
           </Button>
         </ActionWithoutPermission>
       );
@@ -166,7 +174,7 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return (
       <Tooltip title={this.context.t('The button is hidden and only visible when the UI Editor is active')}>
         <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-          {props.children || this.getTitle()}
+          {iconOnly ? null : props.children || this.getTitle()}
         </Button>
       </Tooltip>
     );

package/src/flow/models/base/GridModel.tsx

@@ -359,6 +359,58 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     return rowElement?.parentElement?.clientWidth || fallbackWidth;
   }
 
+  private prunePlaceholderOnlyRows(layout: GridLayoutV2): GridLayoutV2 {
+    type RowCellEntry = {
+      cell: GridCellV2;
+      size: number;
+      hasRealItem: boolean;
+    };
+
+    const pruneRows = (rows: GridRowV2[]): GridRowV2[] => {
+      return rows
+        .map((row) => {
+          const cellsWithSizes = row.cells
+            .map((cell, index) => {
+              const size = row.sizes?.[index] ?? 1;
+              if (cell.rows?.length) {
+                const childRows = pruneRows(cell.rows);
+                if (childRows.length) {
+                  return { cell: { ...cell, rows: childRows }, size, hasRealItem: true };
+                }
+                return null;
+              }
+
+              const items = cell.items || [];
+              const hasRealItem = items.some((uid) => uid !== EMPTY_COLUMN_UID);
+              const hasEmptyPlaceholder = items.includes(EMPTY_COLUMN_UID);
+              if (hasRealItem || hasEmptyPlaceholder) {
+                return { cell, size, hasRealItem };
+              }
+              return null;
+            })
+            .filter(Boolean) as RowCellEntry[];
+
+          if (!cellsWithSizes.some((entry) => entry.hasRealItem)) {
+            return null;
+          }
+
+          return {
+            ...row,
+            cells: cellsWithSizes.map((entry) => entry.cell),
+            sizes: cellsWithSizes.map((entry) => entry.size),
+          };
+        })
+        .filter(Boolean) as GridRowV2[];
+    };
+
+    return normalizeGridLayout({
+      layout: { ...layout, rows: pruneRows(layout.rows || []) },
+      itemUids: this.getItemUids(),
+      gridUid: this.uid,
+      logger: console,
+    });
+  }
+
   private resizeGridLayout({
     direction,
     resizeDistance,
@@ -428,7 +480,9 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     this.emitter.on('onSubModelDestroyed', (model: FlowModel) => {
       const modelUid = model.uid;
       this.resetRows(true);
-      this.setGridStepLayout(this.props.layout);
+      const layout = this.prunePlaceholderOnlyRows(this.props.layout);
+      this.setGridStepLayout(layout);
+      this.syncLayoutProps(layout);
 
       // 删除筛选配置
       this.context.filterManager?.removeFilterConfig({ targetId: modelUid });
@@ -855,6 +909,7 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
    * 运行态按可见 block 过滤行/列，避免“整行都是 hidden block”但依然保留行间距占位。
    * - 配置态（flowSettingsEnabled）保持原始 rows/sizes 以便拖拽和布局编辑。
    * - 运行态仅在判断为“整列/整行都不可见”时做过滤，不写回 props/stepParams，布局元数据保持不变。
+   * - 空列是拖拽缩窄后保存的布局占位，运行态需要保留其宽度，但 Grid 渲染层不会渲染其内容。
    */
   private getVisibleLayout() {
     const rawLayout = this.normalizeLayoutFromSource();
@@ -877,51 +932,53 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     }
 
     const items = this.subModels?.items || [];
-    if (!items.length) {
-      return { layout: baseLayout, rows: baseProjection.rows, sizes: baseProjection.sizes };
-    }
-
     const modelByUid = new Map(items.map((m: FlowModel) => [m.uid, m]));
+    type VisibleCellEntry = {
+      cell: GridLayoutV2['rows'][number]['cells'][number];
+      size: number;
+      hasVisibleContent: boolean;
+    };
 
     const filterRows = (rows: GridLayoutV2['rows']): GridLayoutV2['rows'] => {
       return rows
         .map((row) => {
-          const cells: GridLayoutV2['rows'][number]['cells'] = [];
-          const keptSizes: number[] = [];
-
-          row.cells.forEach((cell, index) => {
-            const sourceSize = row.sizes?.[index];
-            const keepSize = Number.isFinite(sourceSize) && sourceSize > 0 ? sourceSize : 1;
-            if (cell.rows) {
-              const childRows = filterRows(cell.rows);
-              if (childRows.length) {
-                cells.push({ ...cell, rows: childRows });
-                keptSizes.push(keepSize);
+          const cellsWithSizes = row.cells
+            .map((cell, index) => {
+              const sourceSize = row.sizes?.[index];
+              const keepSize = Number.isFinite(sourceSize) && sourceSize > 0 ? sourceSize : 1;
+              if (cell.rows) {
+                const childRows = filterRows(cell.rows);
+                if (childRows.length) {
+                  return { cell: { ...cell, rows: childRows }, size: keepSize, hasVisibleContent: true };
+                }
+                return null;
               }
-              return;
-            }
 
-            const cellItems = (cell.items || []).filter((uid) => {
-              if (uid === EMPTY_COLUMN_UID) {
-                return false;
+              const cellItems = (cell.items || []).filter((uid) => {
+                if (uid === EMPTY_COLUMN_UID) {
+                  return true;
+                }
+                return modelByUid.get(uid)?.hidden !== true;
+              });
+              const hasVisibleContent = cellItems.some((uid) => {
+                if (uid === EMPTY_COLUMN_UID) return false;
+                const model = modelByUid.get(uid);
+                return !model || !model.hidden;
+              });
+              const hasEmptyPlaceholder = cellItems.includes(EMPTY_COLUMN_UID);
+              if (hasVisibleContent || hasEmptyPlaceholder) {
+                return { cell: { ...cell, items: cellItems }, size: keepSize, hasVisibleContent };
               }
-              return modelByUid.get(uid)?.hidden !== true;
-            });
-            const hasVisibleItem = cellItems.some((uid) => {
-              const model = modelByUid.get(uid);
-              return !model || !model.hidden;
-            });
-            if (hasVisibleItem) {
-              cells.push({ ...cell, items: cellItems });
-              keptSizes.push(keepSize);
-            }
-          });
-
-          return cells.length
+              return null;
+            })
+            .filter(Boolean) as VisibleCellEntry[];
+          const hasVisibleContent = cellsWithSizes.some((entry) => entry.hasVisibleContent);
+
+          return hasVisibleContent
             ? {
                 ...row,
-                cells,
-                sizes: keptSizes,
+                cells: cellsWithSizes.map((entry) => entry.cell),
+                sizes: cellsWithSizes.map((entry) => entry.size),
               }
             : null;
         })

package/src/flow/models/base/__tests__/GridModel.visibleLayout.test.ts

@@ -9,7 +9,7 @@
 
 import { EMPTY_COLUMN_UID, FlowEngine } from '@nocobase/flow-engine';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { GridModel } from '../GridModel';
+import { GRID_FLOW_KEY, GRID_STEP, GridModel } from '../GridModel';
 
 describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
   let engine: FlowEngine;
@@ -228,8 +228,8 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
     expect(sizes.row1).toEqual([10, 14]);
   });
 
-  it('ignores EMPTY_COLUMN uid in runtime mode without crashing', async () => {
-    await engine.flowSettings.disable();
+  it('preserves EMPTY_COLUMN placeholder width in runtime mode', () => {
+    engine.flowSettings.disable();
 
     const visible = engine.createModel({ use: 'FlowModel', uid: 'v' });
 
@@ -237,11 +237,18 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
       use: 'GridModel',
       uid: 'grid-8',
       props: {
-        rows: {
-          row1: [[EMPTY_COLUMN_UID, 'ghost', 'v'], ['ghost-2']],
-        },
-        sizes: {
-          row1: [8, 16],
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'row1',
+              cells: [
+                { id: 'cell1', items: ['v'] },
+                { id: 'cell2', items: [EMPTY_COLUMN_UID] },
+              ],
+              sizes: [8, 16],
+            },
+          ],
         },
       },
       structure: {} as any,
@@ -250,8 +257,73 @@ describe('GridModel.getVisibleLayout (hidden items filtering)', () => {
     (model as any).subModels = { items: [visible] };
 
     const { rows, sizes } = (model as any).getVisibleLayout();
-    // 新布局归一化会移除不在 subModels.items 中的 uid，EMPTY_COLUMN_UID 也不会在运行态显示
-    expect(rows.row1).toEqual([['v']]);
-    expect(sizes.row1).toEqual([24]);
+    // 空列是拖拽缩窄区块后的布局占位；运行态也要保留其宽度，避免剩余区块被拉满整行。
+    expect(rows.row1).toEqual([['v'], [EMPTY_COLUMN_UID]]);
+    expect(sizes.row1).toEqual([8, 16]);
+  });
+
+  it('removes rows that only contain EMPTY_COLUMN placeholders in runtime mode when there are no items', () => {
+    engine.flowSettings.disable();
+
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-9',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'row1',
+              cells: [{ id: 'cell1', items: [EMPTY_COLUMN_UID] }],
+              sizes: [24],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+
+    (model as any).subModels = { items: [] };
+
+    const { rows, sizes } = (model as any).getVisibleLayout();
+    expect(rows).toEqual({});
+    expect(sizes).toEqual({});
+  });
+
+  it('removes the placeholder-only row after the last real item in the row is deleted', () => {
+    engine.flowSettings.disable();
+
+    const visible = engine.createModel({ use: 'FlowModel', uid: 'v' });
+    const layout = {
+      version: 2 as const,
+      rows: [
+        {
+          id: 'row1',
+          cells: [
+            { id: 'cell1', items: ['v'] },
+            { id: 'cell2', items: [EMPTY_COLUMN_UID] },
+          ],
+          sizes: [8, 16],
+        },
+      ],
+    };
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-10',
+      props: { layout },
+      structure: {} as any,
+    });
+    (model as any).subModels = { items: [visible] };
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, { layout });
+    model.syncLayoutProps(model.getGridLayout());
+    model.onMount();
+
+    (model as any).subModels = { items: [] };
+    model.emitter.emit('onSubModelDestroyed', visible);
+
+    expect(model.props.rows).toEqual({});
+    expect(model.props.sizes).toEqual({});
+    expect(model.props.layout.rows).toEqual([]);
+    expect(model.getStepParams(GRID_FLOW_KEY, GRID_STEP).layout.rows).toEqual([]);
   });
 });

package/src/flow/models/blocks/details/DetailsItemModel.tsx

@@ -227,6 +227,8 @@ export class DetailsItemModel extends DisplayItemModel<{
 
 DetailsItemModel.define({
   label: tExpr('Display fields'),
+  searchable: true,
+  searchPlaceholder: tExpr('Search fields'),
   sort: 100,
 });
 

package/src/flow/models/blocks/form/FormItemModel.tsx

@@ -24,6 +24,7 @@ import { EditFormModel } from './EditFormModel';
 import _ from 'lodash';
 import { Tooltip } from 'antd';
 import { coerceForToOneField } from '../../../internal/utils/associationValueCoercion';
+import { getFormItemFieldPathCandidates } from '../../../internal/utils/modelUtils';
 import { buildDynamicNamePath } from './dynamicNamePath';
 
 const interfacesOfUnsupportedDefaultValue = [
@@ -57,10 +58,9 @@ export class FormItemModel<T extends DefaultStructure = DefaultStructure> extend
           key: fullName,
           label: field.title,
           // 同步刷新 JS 字段菜单的切换状态（兼容旧路径与新路径）
-          refreshTargets: ['FormItemModel/FormJSFieldItemModel'],
+          refreshTargets: ['FormJSFieldItemModel', 'FormItemModel/FormJSFieldItemModel'],
           toggleable: (subModel) => {
-            const fieldPath = subModel.getStepParams('fieldSettings', 'init')?.fieldPath;
-            return fieldPath === fullName;
+            return getFormItemFieldPathCandidates(subModel).some((fieldPath) => fieldPath === fullName);
           },
           useModel: 'FormItemModel',
           createModelOptions: () => ({
@@ -183,6 +183,8 @@ export class FormItemModel<T extends DefaultStructure = DefaultStructure> extend
 
 FormItemModel.define({
   label: tExpr('Display fields'),
+  searchable: true,
+  searchPlaceholder: tExpr('Search fields'),
   sort: 100,
 });
 

package/src/flow/models/blocks/form/__tests__/FormItemModel.defineChildren.test.ts

@@ -0,0 +1,108 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { FlowEngine, type FlowModelContext, type SubModelItem } from '@nocobase/flow-engine';
+// Import from the aggregate to preserve the model initialization order used by adjacent tests.
+import { FormItemModel, FormJSFieldItemModel, InputFieldModel, JSEditableFieldModel } from '../../../..';
+
+function createFormMenuContext(prefixFieldPath = 'roles') {
+  const engine = new FlowEngine();
+  engine.registerModels({
+    FormItemModel,
+    FormJSFieldItemModel,
+    InputFieldModel,
+    JSEditableFieldModel,
+  });
+
+  const dataSource = engine.dataSourceManager.getDataSource('main');
+  dataSource.addCollection({
+    name: 'users',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number', title: 'ID' },
+      { name: 'roles', type: 'hasMany', interface: 'o2m', target: 'roles', title: 'Roles' },
+    ],
+  });
+  dataSource.addCollection({
+    name: 'roles',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number', title: 'ID' },
+      { name: 'name', type: 'string', interface: 'input', title: 'Name' },
+    ],
+  });
+
+  const blockModel = engine.createModel({ use: 'FlowModel', uid: 'users-form-block' });
+  (blockModel as any).collection = dataSource.getCollection('users');
+
+  const gridModel = engine.createModel({ use: 'FlowModel', uid: 'users-form-grid' });
+  gridModel.context.defineProperty('blockModel', { value: blockModel });
+  gridModel.context.defineProperty('collection', { value: dataSource.getCollection('roles') });
+  gridModel.context.defineProperty('prefixFieldPath', { value: prefixFieldPath });
+
+  return gridModel.context as FlowModelContext;
+}
+
+async function resolveCreateOptions(item: SubModelItem, ctx: FlowModelContext) {
+  return typeof item.createModelOptions === 'function' ? await item.createModelOptions(ctx) : item.createModelOptions;
+}
+
+function createModelLike(createOptions: any) {
+  return {
+    getStepParams: (flowKey: string, stepKey: string) => createOptions?.stepParams?.[flowKey]?.[stepKey],
+  } as any;
+}
+
+describe('FormItemModel defineChildren', () => {
+  it('refreshes the JS field submenu when a normal subform field is toggled', () => {
+    const ctx = createFormMenuContext();
+    const formItems = FormItemModel.defineChildren(ctx) as SubModelItem[];
+    const nameItem = formItems.find((item) => item.key === 'roles.name');
+
+    expect(nameItem?.refreshTargets).toEqual(['FormJSFieldItemModel', 'FormItemModel/FormJSFieldItemModel']);
+  });
+
+  it('recognizes JS subform fields that store associationPathName and fieldPath separately', async () => {
+    const ctx = createFormMenuContext();
+    const formItems = FormItemModel.defineChildren(ctx) as SubModelItem[];
+    const jsItems = (await FormJSFieldItemModel.defineChildren(ctx)) as SubModelItem[];
+    const normalNameItem = formItems.find((item) => item.key === 'roles.name');
+    const jsNameItem = jsItems.find((item) => item.key === 'roles.name');
+
+    expect(normalNameItem).toBeTruthy();
+    expect(jsNameItem).toBeTruthy();
+
+    const jsCreateOptions = await resolveCreateOptions(jsNameItem, ctx);
+    expect(jsCreateOptions?.stepParams?.fieldSettings?.init).toMatchObject({
+      associationPathName: 'roles',
+      fieldPath: 'name',
+    });
+
+    expect((normalNameItem?.toggleable as (model: any) => boolean)(createModelLike(jsCreateOptions))).toBe(true);
+  });
+
+  it('lets the JS subform menu recognize normal fields that store the full fieldPath', async () => {
+    const ctx = createFormMenuContext();
+    const formItems = FormItemModel.defineChildren(ctx) as SubModelItem[];
+    const jsItems = (await FormJSFieldItemModel.defineChildren(ctx)) as SubModelItem[];
+    const normalNameItem = formItems.find((item) => item.key === 'roles.name');
+    const jsNameItem = jsItems.find((item) => item.key === 'roles.name');
+
+    expect(normalNameItem).toBeTruthy();
+    expect(jsNameItem).toBeTruthy();
+
+    const normalCreateOptions = await resolveCreateOptions(normalNameItem, ctx);
+    expect(normalCreateOptions?.stepParams?.fieldSettings?.init).toMatchObject({
+      fieldPath: 'roles.name',
+    });
+
+    expect((jsNameItem?.toggleable as (model: any) => boolean)(createModelLike(normalCreateOptions))).toBe(true);
+  });
+});

package/src/flow/models/blocks/table/TableActionsColumnModel.tsx

@@ -29,6 +29,10 @@ import { getRowKey } from './utils';
 import { FormBlockModel } from '../form/FormBlockModel';
 
 const recordIdentityByFork = new WeakMap<ForkFlowModel<any>, string>();
+const rowActionButtonTypeOptions = [
+  { value: 'link', label: '{{t("Link")}}' },
+  { value: 'text', label: '{{t("Text")}}' },
+];
 
 const Columns = observer<any>(({ record, model, index }) => {
   const isConfigMode = !!model.context.flowSettingsEnabled;
@@ -65,6 +69,7 @@ const Columns = observer<any>(({ record, model, index }) => {
           }
 
           const fork = action.createFork({}, slotKey);
+          (fork as any).buttonTypeOptions = rowActionButtonTypeOptions;
           recordIdentityByFork.set(fork, recordIdentity);
 
           fork.invalidateFlowCache('beforeRender');

package/src/flow/models/blocks/table/TableColumnModel.tsx

@@ -327,6 +327,8 @@ export class TableColumnModel extends DisplayItemModel {
 
 TableColumnModel.define({
   label: tExpr('Display fields'),
+  searchable: true,
+  searchPlaceholder: tExpr('Search fields'),
 });
 
 TableColumnModel.registerFlow({

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -1050,4 +1050,6 @@ SubTableColumnModel.registerFlow({
 SubTableColumnModel.define({
   hide: true,
   label: tExpr('Table column'),
+  searchable: true,
+  searchPlaceholder: tExpr('Search fields'),
 });