@nocobase/client-v2 2.1.0-alpha.45 → 2.1.0-alpha.46

package/src/flow/components/filter/VariableFilterItem.tsx

@@ -27,6 +27,7 @@ import _ from 'lodash';
 import { NumberPicker } from '@formily/antd-v5';
 import { enumToOptions, normalizeSelectRenderValue, UiSchemaEnumItem } from '../../internal/utils/enumOptionsUtils';
 import { resolveOperatorComponent } from '../../internal/utils/operatorSchemaHelper';
+import { limitAssociationMetaTree } from './metaTreeAssociationDepth';
 
 const { DateFilterDynamicComponent: DateFilterDynamicComponentLazy } = lazy(
   () => import('../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent'),
@@ -85,6 +86,14 @@ export interface VariableFilterItemProps {
    */
   rightMetaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
   ignoreFieldNames?: string[];
+  maxAssociationFieldDepth?: number;
+}
+
+function limitMetaTreeIfNeeded(nodes: MetaTreeNode[], maxAssociationFieldDepth?: number) {
+  if (typeof maxAssociationFieldDepth !== 'number') {
+    return nodes;
+  }
+  return limitAssociationMetaTree(nodes, { maxAssociationDepth: maxAssociationFieldDepth });
 }
 
 function createStaticInputRenderer(
@@ -260,7 +269,7 @@ function normalizeRightValueInput(input: unknown) {
  * 上下文筛选项组件
  */
 export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
-  ({ value, model, rightAsVariable, rightMetaTree, ignoreFieldNames }) => {
+  ({ value, model, rightAsVariable, rightMetaTree, ignoreFieldNames, maxAssociationFieldDepth }) => {
     // 使用 View 上下文，确保可访问 ctx.view 的异步子树
     const ctx = useFlowViewContext();
     const t = model.translate;
@@ -539,13 +548,22 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
         const nodes: MetaTreeNode[] = Array.isArray(raw)
           ? (raw as MetaTreeNode[])
           : await (raw as () => Promise<MetaTreeNode[]>)();
-        return [
-          { title: t('Constant'), name: 'constant', type: 'string', paths: ['constant'], render: staticInputRenderer },
-          { title: t('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
-          ...nodes,
-        ];
+        return limitMetaTreeIfNeeded(
+          [
+            {
+              title: t('Constant'),
+              name: 'constant',
+              type: 'string',
+              paths: ['constant'],
+              render: staticInputRenderer,
+            },
+            { title: t('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
+            ...nodes,
+          ],
+          maxAssociationFieldDepth,
+        );
       };
-    }, [rightMetaTree, ctx, staticInputRenderer, NullComponent, t]);
+    }, [rightMetaTree, ctx, staticInputRenderer, NullComponent, t, maxAssociationFieldDepth]);
 
     // 当启用右侧变量输入时，构造 VariableInput 的 converters：
     // - 变量模式：返回 null 让 VariableInput 渲染 VariableTag
@@ -629,9 +647,9 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
         for (const n of nodes) {
           out.push(await enhanceNode(n));
         }
-        return out;
+        return limitMetaTreeIfNeeded(out, maxAssociationFieldDepth);
       };
-    }, [getFieldInterface, model]);
+    }, [getFieldInterface, model, maxAssociationFieldDepth]);
 
     return (
       <Space wrap style={{ width: '100%' }}>

package/src/flow/components/filter/__tests__/fieldsToOptions.test.ts

@@ -0,0 +1,48 @@
+/**
+ * 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 { fieldsToOptions } from '../fieldsToOptions';
+
+describe('fieldsToOptions', () => {
+  it('skips nested fields when target collection is unavailable', () => {
+    const field = {
+      name: 'space',
+      type: 'belongsTo',
+      target: 'spaces',
+      title: 'Space',
+      interface: 'm2o',
+      filterable: true,
+      uiSchema: {},
+      getInterfaceOptions: () => ({
+        filterable: {
+          nested: true,
+          operators: [{ value: '$eq', label: 'is' }],
+        },
+      }),
+      getFields: () => {
+        throw new Error('Target collection spaces not found for field space');
+      },
+    };
+
+    expect(() => fieldsToOptions([field], 1, [], (key: string) => key)).not.toThrow();
+    expect(fieldsToOptions([field], 1, [], (key: string) => key)).toEqual([
+      {
+        name: 'space',
+        type: 'belongsTo',
+        target: 'spaces',
+        title: 'Space',
+        schema: {},
+        operators: [{ value: '$eq', label: 'is' }],
+        children: [],
+      },
+    ]);
+  });
+});

package/src/flow/components/filter/__tests__/metaTreeAssociationDepth.test.ts

@@ -0,0 +1,60 @@
+/**
+ * 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 type { MetaTreeNode } from '@nocobase/flow-engine';
+import { limitAssociationMetaTree } from '../metaTreeAssociationDepth';
+
+describe('limitAssociationMetaTree', () => {
+  it('keeps relation / relation / normal field and removes deeper relation fields', async () => {
+    const tree: MetaTreeNode[] = [
+      {
+        name: 'user',
+        title: 'User',
+        type: 'object',
+        interface: 'm2o',
+        options: { target: 'users' },
+        paths: ['collection', 'user'],
+        children: async () => [
+          {
+            name: 'department',
+            title: 'Department',
+            type: 'object',
+            interface: 'm2o',
+            options: { target: 'departments' },
+            paths: ['collection', 'user', 'department'],
+            children: async () => [
+              {
+                name: 'name',
+                title: 'Name',
+                type: 'string',
+                interface: 'input',
+                paths: ['collection', 'user', 'department', 'name'],
+              },
+              {
+                name: 'company',
+                title: 'Company',
+                type: 'object',
+                interface: 'm2o',
+                options: { target: 'companies' },
+                paths: ['collection', 'user', 'department', 'company'],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const limited = limitAssociationMetaTree(tree);
+    const userChildren = await (limited[0].children as () => Promise<MetaTreeNode[]>)();
+    const departmentChildren = await (userChildren[0].children as () => Promise<MetaTreeNode[]>)();
+
+    expect(departmentChildren.map((node) => node.name)).toEqual(['name']);
+  });
+});

package/src/flow/components/filter/fieldsToOptions.ts

@@ -59,10 +59,15 @@ const field2option = (field: CollectionField, depth, nonfilterable, t) => {
     option['children'] = children;
   }
   if (nested) {
-    const targetFields = field.getFields().filter((f) => {
-      // 过滤掉附件字段，因为会报错：Target collection attachments not found for field xxx
-      return f.target !== 'attachments' && f.interface !== 'formula';
-    });
+    let targetFields: CollectionField[] = [];
+    try {
+      targetFields = field.getFields().filter((f) => {
+        // 过滤掉附件字段，因为会报错：Target collection attachments not found for field xxx
+        return f.target !== 'attachments' && f.interface !== 'formula';
+      });
+    } catch {
+      targetFields = [];
+    }
     const options = fieldsToOptions(targetFields, depth + 1, nonfilterable, t).filter(Boolean);
     option['children'] = option['children'] || [];
     option['children'].push(...options);

package/src/flow/components/filter/metaTreeAssociationDepth.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 type { MetaTreeNode } from '@nocobase/flow-engine';
+
+const ASSOCIATION_FIELD_INTERFACES = new Set(['m2o', 'o2o', 'oho', 'obo', 'o2m', 'm2m', 'linkTo']);
+
+function isAssociationMetaNode(node: MetaTreeNode) {
+  const options = (node as any)?.options || {};
+  return Boolean(
+    options.target ||
+      options.targetCollection ||
+      options.foreignKey ||
+      options.through ||
+      ASSOCIATION_FIELD_INTERFACES.has(String(node?.interface || '')),
+  );
+}
+
+function limitNodeAssociationDepth(node: MetaTreeNode, associationDepth: number, maxAssociationDepth: number) {
+  const isAssociation = isAssociationMetaNode(node);
+  const nextAssociationDepth = associationDepth + (isAssociation ? 1 : 0);
+
+  if (isAssociation && nextAssociationDepth > maxAssociationDepth) {
+    return null;
+  }
+
+  const wrapChildren = (children: MetaTreeNode[] | (() => Promise<MetaTreeNode[]>)) => {
+    if (Array.isArray(children)) {
+      return limitAssociationMetaTree(children, {
+        associationDepth: nextAssociationDepth,
+        maxAssociationDepth,
+      });
+    }
+
+    return async () => {
+      const loaded = await children();
+      return limitAssociationMetaTree(Array.isArray(loaded) ? loaded : [], {
+        associationDepth: nextAssociationDepth,
+        maxAssociationDepth,
+      });
+    };
+  };
+
+  return {
+    ...node,
+    children: node.children ? wrapChildren(node.children as any) : undefined,
+  } as MetaTreeNode;
+}
+
+export function limitAssociationMetaTree(
+  nodes: MetaTreeNode[] | undefined,
+  options: {
+    associationDepth?: number;
+    maxAssociationDepth?: number;
+  } = {},
+): MetaTreeNode[] {
+  const { associationDepth = 0, maxAssociationDepth = 2 } = options;
+  if (!Array.isArray(nodes)) return [];
+
+  return nodes
+    .map((node) => limitNodeAssociationDepth(node, associationDepth, maxAssociationDepth))
+    .filter(Boolean) as MetaTreeNode[];
+}

package/src/flow/models/actions/FilterActionModel.tsx

@@ -75,7 +75,12 @@ export class FilterActionModel extends ActionModel {
                 value={this.props.filterValue || this.props.defaultFilterValue}
                 ctx={this.context}
                 FilterItem={(props) => (
-                  <VariableFilterItem {...props} model={this} ignoreFieldNames={this.getIgnoreFieldNames()} />
+                  <VariableFilterItem
+                    {...props}
+                    model={this}
+                    ignoreFieldNames={this.getIgnoreFieldNames()}
+                    maxAssociationFieldDepth={2}
+                  />
                 )}
               />
               <div style={{ height: 150 }}></div>
@@ -94,7 +99,12 @@ export class FilterActionModel extends ActionModel {
             value={this.props.filterValue || this.props.defaultFilterValue}
             ctx={this.context}
             FilterItem={(props) => (
-              <VariableFilterItem {...props} model={this} ignoreFieldNames={this.getIgnoreFieldNames()} />
+              <VariableFilterItem
+                {...props}
+                model={this}
+                ignoreFieldNames={this.getIgnoreFieldNames()}
+                maxAssociationFieldDepth={2}
+              />
             )}
           />
         }
@@ -187,7 +197,9 @@ FilterActionModel.registerFlow({
             return (
               <FilterGroup
                 value={props.value || {}}
-                FilterItem={(props) => <VariableFilterItem {...props} model={modelInstance} />}
+                FilterItem={(props) => (
+                  <VariableFilterItem {...props} model={modelInstance} maxAssociationFieldDepth={2} />
+                )}
               />
             );
           },

package/src/flow/models/actions/__tests__/AssignFormRefill.test.ts

@@ -53,6 +53,51 @@ describe('AssignForm value refill and save (beforeParamsSave)', () => {
     expect(saved?.assignedValues).toEqual({ nickname: 'Alice', score: 99 });
   });
 
+  it('UpdateRecordActionModel: saves assignedValues from assignForm subModel when assignFormUid is not ready', async () => {
+    const root = new FlowEngine();
+    root.registerModels({ UpdateRecordActionModel, AssignFormModel: TestAssignFormModel });
+
+    const action = root.createModel<UpdateRecordActionModel>({ use: 'UpdateRecordActionModel', uid: 'act-u-sub' });
+    const form = root.createModel<TestAssignFormModel>({
+      use: 'AssignFormModel',
+      uid: 'form-u-sub',
+      parentId: action.uid,
+      subKey: 'assignForm',
+    });
+    form.setAssignedValues({ nickname: 'Bob' });
+    action.setSubModel('assignForm', form);
+
+    const flow = action.getFlow('assignSettings') as any;
+    const step = flow?.steps?.assignFieldValues;
+
+    await step.beforeParamsSave({ engine: root, model: action }, {}, {});
+
+    const saved = action.getStepParams('assignSettings', 'assignFieldValues');
+    expect(saved?.assignedValues).toEqual({ nickname: 'Bob' });
+  });
+
+  it('UpdateRecordActionModel: keeps previous assignedValues when AssignForm is unavailable during save', async () => {
+    const root = new FlowEngine();
+    root.registerModels({ UpdateRecordActionModel, AssignFormModel: TestAssignFormModel });
+
+    const action = root.createModel<UpdateRecordActionModel>({ use: 'UpdateRecordActionModel', uid: 'act-u-missing' });
+    action.setStepParams('assignSettings', 'assignFieldValues', {});
+
+    const flow = action.getFlow('assignSettings') as any;
+    const step = flow?.steps?.assignFieldValues;
+
+    await step.beforeParamsSave(
+      { engine: root, model: action },
+      {},
+      {
+        assignedValues: { nickname: 'Previous' },
+      },
+    );
+
+    const saved = action.getStepParams('assignSettings', 'assignFieldValues');
+    expect(saved?.assignedValues).toEqual({ nickname: 'Previous' });
+  });
+
   it('FormSubmitActionModel: reuses assignFieldValues step and saves assignedValues from AssignForm', async () => {
     const root = new FlowEngine();
 
@@ -77,4 +122,49 @@ describe('AssignForm value refill and save (beforeParamsSave)', () => {
     const saved = action.getStepParams('submitSettings', 'assignFieldValues');
     expect(saved?.assignedValues).toEqual({ status: 'published' });
   });
+
+  it('FormSubmitActionModel: saves assignedValues from assignForm subModel when assignFormUid is not ready', async () => {
+    const root = new FlowEngine();
+    root.registerModels({ FormSubmitActionModel, AssignFormModel: TestAssignFormModel });
+
+    const action = root.createModel<FormSubmitActionModel>({ use: 'FormSubmitActionModel', uid: 'submit-u-sub' });
+    const form = root.createModel<TestAssignFormModel>({
+      use: 'AssignFormModel',
+      uid: 'submit-form-u-sub',
+      parentId: action.uid,
+      subKey: 'assignForm',
+    });
+    form.setAssignedValues({ status: 'draft' });
+    action.setSubModel('assignForm', form);
+
+    const flow = action.getFlow('submitSettings') as any;
+    const step = flow?.steps?.assignFieldValues;
+
+    await step.beforeParamsSave({ engine: root, model: action }, {}, {});
+
+    const saved = action.getStepParams('submitSettings', 'assignFieldValues');
+    expect(saved?.assignedValues).toEqual({ status: 'draft' });
+  });
+
+  it('FormSubmitActionModel: keeps previous assignedValues when AssignForm is unavailable during save', async () => {
+    const root = new FlowEngine();
+    root.registerModels({ FormSubmitActionModel, AssignFormModel: TestAssignFormModel });
+
+    const action = root.createModel<FormSubmitActionModel>({ use: 'FormSubmitActionModel', uid: 'submit-u-missing' });
+    action.setStepParams('submitSettings', 'assignFieldValues', {});
+
+    const flow = action.getFlow('submitSettings') as any;
+    const step = flow?.steps?.assignFieldValues;
+
+    await step.beforeParamsSave(
+      { engine: root, model: action },
+      {},
+      {
+        assignedValues: { status: 'published' },
+      },
+    );
+
+    const saved = action.getStepParams('submitSettings', 'assignFieldValues');
+    expect(saved?.assignedValues).toEqual({ status: 'published' });
+  });
 });

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

@@ -11,13 +11,20 @@ import { Collection, DisplayItemModel, FlowModel, FlowModelContext } from '@noco
 
 export class AssociationFieldGroupModel extends FlowModel {
   static itemModelName = 'DetailsItemModel';
+  static maxAssociationFieldDepth = 2;
   static defineChildren(ctx: FlowModelContext) {
     const itemModel = this.itemModelName;
-    const displayAssociationFields = (targetCollection: Collection, fieldPath = '') => {
+    const maxAssociationFieldDepth = this.maxAssociationFieldDepth ?? 2;
+    const displayAssociationFields = (targetCollection: Collection, fieldPath = '', associationDepth = 0) => {
+      if (associationDepth >= maxAssociationFieldDepth) {
+        return [];
+      }
+
       return targetCollection
         .getToOneAssociationFields()
         .map((field) => {
           const fPath = fieldPath ? `${fieldPath}.${field.name}` : field.name;
+          const nextAssociationDepth = associationDepth + 1;
           if (!field.targetCollection) {
             console.error(
               `AssociationFieldGroupModel: target collection ${field.target} not found for field ${field.name}`,
@@ -37,6 +44,12 @@ export class AssociationFieldGroupModel extends FlowModel {
                   children: field.targetCollection
                     .getFields()
                     .map((f) => {
+                      if (
+                        nextAssociationDepth >= maxAssociationFieldDepth &&
+                        (f.isAssociationField?.() || f.target || f.targetCollection)
+                      ) {
+                        return;
+                      }
                       const fp = `${fPath}.${f.name}`;
                       const binding = DisplayItemModel.getDefaultBindingByField(ctx, f, {
                         fallbackToTargetTitleField: true,
@@ -81,9 +94,13 @@ export class AssociationFieldGroupModel extends FlowModel {
                   key: `${fPath}-children-associationField`,
                   label: 'Display association fields',
                   type: 'group',
-                  children: (displayAssociationFields(field.targetCollection, fPath) || []).filter(Boolean),
+                  children: (
+                    displayAssociationFields(field.targetCollection, fPath, nextAssociationDepth) || []
+                  ).filter(Boolean),
                 },
-              ];
+              ].filter((item) => {
+                return item.key !== `${fPath}-children-associationField` || (item.children as any[])?.length > 0;
+              });
             },
           };
         })

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

@@ -1006,7 +1006,7 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
           <Space
             ref={this.gridContainerRef}
             direction={'vertical'}
-            style={{ width: '100%', marginBottom: this.props.rowGap }}
+            style={{ width: '100%', marginBottom: this.props.rowGap, display: 'flex' }}
             size={this.props.rowGap}
           >
             <DndProvider

package/src/flow/models/base/PageModel/ChildPageModel.tsx

@@ -49,7 +49,11 @@ export class ChildPageModel extends PageModel {
       throw new Error('Invalid drag event');
     }
 
-    this.flowEngine.moveModel(event.active.id, event.over.id);
+    if (event.active.id === event.over.id) {
+      return;
+    }
+
+    await this.flowEngine.moveModel(event.active.id, event.over.id);
   }
 
   render() {

package/src/flow/models/base/PageModel/__tests__/ChildPageModel.test.ts

@@ -107,6 +107,18 @@ describe('ChildPageModel', () => {
       expect(mockFlowEngine.moveModel).toHaveBeenCalledWith('active-model-id', 'over-model-id');
     });
 
+    it('should ignore self-drop', async () => {
+      await childPageModel.handleDragEnd({
+        ...mockDragEndEvent,
+        over: {
+          ...(mockDragEndEvent.over as NonNullable<DragEndEvent['over']>),
+          id: 'active-model-id',
+        },
+      });
+
+      expect(mockFlowEngine.moveModel).not.toHaveBeenCalled();
+    });
+
     it('should handle case when over is null', async () => {
       const eventWithNullOver = {
         ...mockDragEndEvent,

package/src/flow/models/base/__tests__/AssociationFieldGroupModel.test.ts

@@ -0,0 +1,86 @@
+/**
+ * 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 { afterEach, describe, expect, it, vi } from 'vitest';
+import { DisplayItemModel } from '@nocobase/flow-engine';
+import { AssociationFieldGroupModel } from '../AssociationFieldGroupModel';
+
+function createCollection(name: string, fields: any[]) {
+  return {
+    name,
+    dataSourceKey: 'main',
+    getFields: () => fields,
+    getToOneAssociationFields: () => fields.filter((field) => field?.type === 'belongsTo' || field?.type === 'hasOne'),
+  };
+}
+
+describe('AssociationFieldGroupModel', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('limits display association fields to relation / relation / field', () => {
+    vi.spyOn(DisplayItemModel, 'getDefaultBindingByField').mockReturnValue({ modelName: 'InputFieldModel' } as any);
+
+    const companies = createCollection('companies', [
+      { name: 'title', title: 'Company title', interface: 'input', type: 'string' },
+    ]);
+    const departments = createCollection('departments', [
+      { name: 'name', title: 'Department name', interface: 'input', type: 'string' },
+      {
+        name: 'company',
+        title: 'Company',
+        interface: 'm2o',
+        type: 'belongsTo',
+        target: 'companies',
+        targetCollection: companies,
+        isAssociationField: () => true,
+      },
+    ]);
+    const users = createCollection('users', [
+      {
+        name: 'department',
+        title: 'Department',
+        interface: 'm2o',
+        type: 'belongsTo',
+        target: 'departments',
+        targetCollection: departments,
+        isAssociationField: () => true,
+      },
+    ]);
+    const posts = createCollection('posts', [
+      {
+        name: 'user',
+        title: 'User',
+        interface: 'm2o',
+        type: 'belongsTo',
+        target: 'users',
+        targetCollection: users,
+        isAssociationField: () => true,
+      },
+    ]);
+
+    const ctx = {
+      collection: posts,
+      t: (key: string) => key,
+    } as any;
+
+    const firstLevel = AssociationFieldGroupModel.defineChildren(ctx) as any[];
+    const firstChildren = firstLevel[0].children();
+    const firstAssociationGroup = firstChildren.find((item) => item.key === 'user-children-associationField');
+    const secondLevel = firstAssociationGroup.children;
+    const secondChildren = secondLevel[0].children();
+    const secondFieldsGroup = secondChildren.find((item) => item.key === 'user.department-children-collectionField');
+
+    expect(secondChildren.map((item) => item.key)).toContain('user.department-children-collectionField');
+    expect(secondChildren.map((item) => item.key)).not.toContain('user.department-children-associationField');
+    expect(secondFieldsGroup.children.map((item) => item.key)).toContain('c-user.department.name');
+    expect(secondFieldsGroup.children.map((item) => item.key)).not.toContain('c-user.department.company');
+  });
+});

package/src/flow/models/base/__tests__/GridModel.render.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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 { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { GridModel } from '../GridModel';
+
+describe('GridModel.render', () => {
+  let engine: FlowEngine;
+
+  beforeEach(async () => {
+    engine = new FlowEngine();
+    engine.registerModels({ GridModel });
+    await engine.flowSettings.disable();
+  });
+
+  it('renders the Space wrapper as block-level flex to avoid inline baseline spacing', () => {
+    const item = engine.createModel({ use: 'FlowModel', uid: 'item-1' });
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-render',
+      props: {
+        rows: {
+          row1: [['item-1']],
+        },
+        sizes: {
+          row1: [24],
+        },
+        rowGap: 16,
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = { items: [item] };
+
+    expect(Object.keys((model as any).getVisibleLayout().rows)).toEqual(['row1']);
+
+    const { container } = render(<FlowEngineProvider engine={engine}>{model.render()}</FlowEngineProvider>);
+    const space = container.querySelector('.ant-space') as HTMLElement;
+
+    expect(space).toBeTruthy();
+    expect(space.style.width).toBe('100%');
+    expect(space.style.marginBottom).toBe('16px');
+    expect(space.style.display).toBe('flex');
+  });
+});