@nocobase/client-v2 2.1.0-beta.43 → 2.1.0-beta.45

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

@@ -29,7 +29,8 @@ import {
   UiSchemaEnumItem,
 } from '../../internal/utils/enumOptionsUtils';
 import { mergeItemMetaTreeForAssignValue } from '../FieldAssignValueInput';
-import { resolveOperatorComponent } from '../../internal/utils/operatorSchemaHelper';
+import { pickOperatorStyle as pickStyle, resolveOperatorComponent } from '../../internal/utils/operatorSchemaHelper';
+import { limitAssociationMetaTree } from './metaTreeAssociationDepth';
 
 const { DateFilterDynamicComponent: DateFilterDynamicComponentLazy } = lazy(
   () => import('../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent'),
@@ -49,6 +50,14 @@ export interface LinkageFilterItemProps {
   model: FlowModel;
   /** 向变量树额外注入节点（置于根部） */
   extraMetaTree?: MetaTreeNode[];
+  maxAssociationFieldDepth?: number;
+}
+
+function limitMetaTreeIfNeeded(nodes: MetaTreeNode[], maxAssociationFieldDepth?: number) {
+  if (typeof maxAssociationFieldDepth !== 'number') {
+    return nodes;
+  }
+  return limitAssociationMetaTree(nodes, { maxAssociationDepth: maxAssociationFieldDepth });
 }
 
 function createStaticInputRenderer(
@@ -221,7 +230,7 @@ export async function enhanceMetaTreeWithFilterableChildren(
  * LinkageFilterItem：左/右均为可变量输入，适用于联动规则等“前端逻辑”场景
  */
 export const LinkageFilterItem: React.FC<LinkageFilterItemProps> = observer((props) => {
-  const { value, model, extraMetaTree } = props;
+  const { value, model, extraMetaTree, maxAssociationFieldDepth } = props;
   const ctx = useFlowViewContext();
   const t = model.translate;
   const { path: leftPath, operator: selectedOperator, value: rightOperandValue } = value || {};
@@ -345,7 +354,8 @@ export const LinkageFilterItem: React.FC<LinkageFilterItemProps> = observer((pro
     return (inputProps: { value?: any; onChange?: (v: any) => void } & Record<string, any>) => {
       const { value: inputValue, onChange, ...rest } = inputProps || {};
       const nextProps = { ...componentProps };
-      if ((!nextProps?.options || nextProps?.options.length === 0) && enumOptions.length > 0) {
+      const options = Array.isArray(nextProps.options) ? nextProps.options : undefined;
+      if ((!options || options.length === 0) && enumOptions.length > 0) {
         nextProps.options = enumOptions;
       }
       const normalizedValue = Array.isArray(inputValue)
@@ -363,7 +373,7 @@ export const LinkageFilterItem: React.FC<LinkageFilterItemProps> = observer((pro
           {...rest}
           value={normalizedValue}
           onChange={onChange}
-          style={{ width: 200, ...(nextProps?.style || {}), ...(rest?.style || {}) }}
+          style={{ width: 200, ...pickStyle(nextProps.style), ...pickStyle(rest?.style) }}
         />
       );
 
@@ -386,13 +396,16 @@ export const LinkageFilterItem: React.FC<LinkageFilterItemProps> = observer((pro
     return async () => {
       const baseMetaTree = (model?.context.getPropertyMetaTree() || ctx.getPropertyMetaTree()) as MetaTreeNode[];
       const mergedMetaTree = mergeExtraMetaTreeWithBase(baseMetaTree, extraMetaTree);
-      return [
-        { title: t('Constant'), name: 'constant', type: 'string', paths: ['constant'] },
-        { title: t('Null'), name: 'null', type: 'object', paths: ['null'] },
-        ...mergedMetaTree,
-      ];
+      return limitMetaTreeIfNeeded(
+        [
+          { title: t('Constant'), name: 'constant', type: 'string', paths: ['constant'] },
+          { title: t('Null'), name: 'null', type: 'object', paths: ['null'] },
+          ...mergedMetaTree,
+        ],
+        maxAssociationFieldDepth,
+      );
     };
-  }, [ctx, model, t, extraMetaTree]);
+  }, [ctx, model, t, extraMetaTree, maxAssociationFieldDepth]);
 
   // 左侧变量树：默认整棵 ctx（不追加 Constant/Null），确保可获取字段 interface
   const leftMetaTreeGetter = useCallback(async () => {
@@ -403,8 +416,9 @@ export const LinkageFilterItem: React.FC<LinkageFilterItemProps> = observer((pro
       getFlowFieldInterfaceOptions(name, model.context.dataSourceManager, model.context.app?.dataSourceManager) as
         | FieldInterfaceDef
         | undefined;
-    return await enhanceMetaTreeWithFilterableChildren(merged, getFieldInterface);
-  }, [ctx, model, extraMetaTree]);
+    const enhanced = await enhanceMetaTreeWithFilterableChildren(merged, getFieldInterface);
+    return limitMetaTreeIfNeeded(enhanced, maxAssociationFieldDepth);
+  }, [ctx, model, extraMetaTree, maxAssociationFieldDepth]);
 
   // 右侧 converters：常量/空值特殊处理；变量沿用默认（表达式）
   const rightSideConverters = useMemo<Converters>(() => {

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

@@ -26,7 +26,8 @@ import {
 import _ from 'lodash';
 import { NumberPicker } from '@formily/antd-v5';
 import { enumToOptions, normalizeSelectRenderValue, UiSchemaEnumItem } from '../../internal/utils/enumOptionsUtils';
-import { resolveOperatorComponent } from '../../internal/utils/operatorSchemaHelper';
+import { pickOperatorStyle as pickStyle, 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;
@@ -486,14 +495,15 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
       if (resolved && supportKeyword) {
         const { Comp, props: xProps } = resolved;
         const nextProps = { ...xProps };
-        if ((!nextProps?.options || nextProps?.options.length === 0) && enumOptions?.length) {
+        const options = Array.isArray(nextProps.options) ? nextProps.options : undefined;
+        if ((!options || options.length === 0) && enumOptions?.length) {
           nextProps.options = enumOptions;
         }
         const style = {
           flex: '1 1 40%',
           minWidth: 160,
           maxWidth: '100%',
-          ...(nextProps?.style || {}),
+          ...pickStyle(nextProps.style),
         };
         const normalized =
           Array.isArray(rightValue) && rightValue.every((v) => typeof v === 'string' || typeof v === 'number')
@@ -508,7 +518,7 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
           <div style={style}>
             <Comp
               {...nextProps}
-              style={{ width: '100%', ...(nextProps?.style || {}) }}
+              style={{ width: '100%', ...pickStyle(nextProps.style) }}
               value={normalized}
               onChange={(vals: any) => setRightValue(vals)}
             />
@@ -539,13 +549,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 +648,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/internal/utils/operatorSchemaHelper.ts

@@ -7,24 +7,131 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import React, { type ComponentType, type CSSProperties, type ReactNode } from 'react';
 import { DateFilterDynamicComponent } from '../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent';
 
+type OperatorMeta = {
+  value?: string;
+  schema?: {
+    'x-component'?: string;
+    'x-component-props'?: Record<string, unknown>;
+  };
+};
+
+type ComponentRegistry = {
+  getComponent?: (name: string) => ComponentType<Record<string, unknown>> | undefined;
+};
+
+type OperatorComponentFieldModel = {
+  props?: Record<string, unknown>;
+  render?: () => ReactNode;
+  __originalRender?: () => ReactNode;
+};
+
+type OperatorComponentRenderOptions = {
+  app?: ComponentRegistry;
+  fieldModel: unknown;
+  operator: string;
+  operators?: OperatorMeta[];
+  propsPriority?: 'field' | 'operator';
+  style?: CSSProperties;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function pickOperatorStyle(value: unknown): CSSProperties | undefined {
+  return isRecord(value) ? (value as CSSProperties) : undefined;
+}
+
+function getFieldModel(fieldModel: unknown) {
+  return fieldModel as OperatorComponentFieldModel & {
+    _reactiveWrapperCache?: unknown;
+    setupReactiveRender?: () => void;
+  };
+}
+
+function rewrapReactiveRender(fieldModel: unknown) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  mutableFieldModel._reactiveWrapperCache = undefined;
+  mutableFieldModel.setupReactiveRender?.();
+}
+
 /**
  * 根据操作符的 schema 定位组件及其 props。
  */
-export function resolveOperatorComponent(app: any, operator: string, operators?: Array<any>) {
+export function resolveOperatorComponent(
+  app: ComponentRegistry | undefined,
+  operator: string,
+  operators?: OperatorMeta[],
+) {
   if (!operators || !Array.isArray(operators)) return null;
   const op = operators.find((item) => item?.value === operator);
   const schema = op?.schema;
   const xComp = schema?.['x-component'];
   if (!xComp) return null;
-  let Comp;
+  let Comp: ComponentType<Record<string, unknown>> | undefined;
   if (xComp === 'DateFilterDynamicComponent') {
-    Comp = DateFilterDynamicComponent;
+    Comp = DateFilterDynamicComponent as ComponentType<Record<string, unknown>>;
   } else {
-    Comp = app?.getComponent?.(xComp as any);
+    Comp = app?.getComponent?.(xComp);
   }
   if (!Comp) return null;
-  const props = (schema?.['x-component-props'] as Record<string, any>) || {};
+  const props = isRecord(schema?.['x-component-props']) ? schema['x-component-props'] : {};
   return { Comp, props };
 }
+
+export function restoreOperatorComponentRender(fieldModel?: unknown) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  if (!mutableFieldModel || typeof mutableFieldModel.__originalRender !== 'function') {
+    return false;
+  }
+
+  mutableFieldModel.render = mutableFieldModel.__originalRender;
+  rewrapReactiveRender(mutableFieldModel);
+  return true;
+}
+
+export function applyOperatorComponentRender({
+  app,
+  fieldModel,
+  operator,
+  operators,
+  propsPriority = 'field',
+  style,
+}: OperatorComponentRenderOptions) {
+  const mutableFieldModel = getFieldModel(fieldModel);
+  const resolved = resolveOperatorComponent(app, operator, operators);
+  if (!resolved) {
+    restoreOperatorComponentRender(mutableFieldModel);
+    return false;
+  }
+
+  if (!mutableFieldModel.__originalRender && typeof mutableFieldModel.render === 'function') {
+    mutableFieldModel.__originalRender = mutableFieldModel.render;
+  }
+
+  const { Comp, props: operatorProps } = resolved;
+  const operatorStyle = pickOperatorStyle(operatorProps.style);
+
+  mutableFieldModel.render = () => {
+    const fieldProps = mutableFieldModel.props || {};
+    const fieldStyle = pickOperatorStyle(fieldProps.style);
+    const componentProps =
+      propsPriority === 'operator' ? { ...fieldProps, ...operatorProps } : { ...operatorProps, ...fieldProps };
+    const componentStyle =
+      propsPriority === 'operator' ? { ...fieldStyle, ...operatorStyle } : { ...operatorStyle, ...fieldStyle };
+    const mergedStyle = { ...(style || {}), ...componentStyle };
+
+    return React.createElement(Comp, {
+      ...componentProps,
+      ...(Object.keys(mergedStyle).length > 0 ? { style: mergedStyle } : {}),
+      onCompositionStart: null,
+      onCompositionEnd: null,
+    });
+  };
+
+  rewrapReactiveRender(mutableFieldModel);
+  return true;
+}

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/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,