@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.11

package/src/flow/components/filter/__tests__/FilterGroup.test.tsx

@@ -140,4 +140,49 @@ describe('FilterGroup closeIcon', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(value.items[0].items).toHaveLength(1);
   });
+
+  it('disables close and add actions when the filter group is disabled', () => {
+    const value = {
+      logic: '$and',
+      items: [
+        {
+          path: 'name',
+          operator: 'eq',
+          value: 'test',
+        },
+      ],
+    };
+    const onRemove = vi.fn();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <FilterGroup
+        value={value}
+        FilterItem={DummyFilterItem}
+        showBorder
+        onRemove={onRemove}
+        onChange={onChange}
+        disabled
+      />,
+    );
+
+    const closeButtons = screen
+      .getAllByLabelText('icon-close')
+      .map((element) => element.closest('button'))
+      .filter(Boolean) as HTMLButtonElement[];
+    expect(closeButtons).toHaveLength(2);
+    expect(closeButtons[0]).toBeDisabled();
+    expect(closeButtons[1]).toBeDisabled();
+    expect(screen.getByText('Add condition').closest('button')).toBeDisabled();
+    expect(screen.getByText('Add condition group').closest('button')).toBeDisabled();
+
+    fireEvent.click(closeButtons[0]);
+    fireEvent.click(closeButtons[1]);
+    fireEvent.click(screen.getByText('Add condition').closest('button') as HTMLButtonElement);
+    fireEvent.click(screen.getByText('Add condition group').closest('button') as HTMLButtonElement);
+
+    expect(onRemove).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+    expect(value.items).toHaveLength(1);
+  });
 });

package/src/flow/components/filter/__tests__/VariableFilterItem.leftMetaTree.test.tsx

@@ -193,4 +193,13 @@ describe('VariableFilterItem with leftMetaTree', () => {
     fireEvent.click(screen.getByTestId('variable-input'));
     expect(value.path).toBe('title');
   });
+
+  it('restores the saved left meta so the operator select shows its label on reopen', async () => {
+    const value = { path: 'title', operator: '$eq', value: 'x' } as any;
+    const model = createModelWithCollection();
+
+    render(<VariableFilterItem value={value} model={model} rightAsVariable={false} />);
+
+    expect(await screen.findByText('Equals')).toBeInTheDocument();
+  });
 });

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

@@ -11,7 +11,7 @@ import React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { VariableFilterItem, VariableFilterItemValue } from '../VariableFilterItem';
-import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { FlowEngine, FlowModel, type Converters, type MetaTreeNode } from '@nocobase/flow-engine';
 import { observable } from '@formily/reactive';
 import { createMockFlowApp, TestCollectionFieldInterface } from '../../../__tests__/helpers/mockFlowApp';
 
@@ -158,6 +158,75 @@ describe('VariableFilterItem', () => {
     expect(value.value).toBe('abc');
   });
 
+  it('passes disabled through to the left selector, operator select, and right variable input', async () => {
+    const value: VariableFilterItemValue = { path: '', operator: '', value: '' };
+    const model = CreateModel();
+
+    render(<VariableFilterItem value={value} model={model} rightAsVariable disabled />);
+
+    const leftVariableInputProps = (globalThis as any).__LAST_VARIABLE_INPUT_PROPS__;
+    expect(leftVariableInputProps.disabled).toBe(true);
+
+    fireEvent.click(screen.getAllByTestId('variable-input')[0]);
+
+    const variableInputs = screen.getAllByTestId('variable-input');
+    expect(variableInputs.length).toBeGreaterThanOrEqual(2);
+    const rightVariableInputProps = (globalThis as any).__LAST_VARIABLE_INPUT_PROPS__;
+    expect(rightVariableInputProps.disabled).toBe(true);
+
+    const operatorSelect = document.body.querySelector('.ant-select') as HTMLDivElement | null;
+    expect(operatorSelect).not.toBeNull();
+    expect(operatorSelect).toHaveClass('ant-select-disabled');
+  });
+
+  it('composes custom right variable converters with constant, null, and core fallbacks', () => {
+    const value: VariableFilterItemValue = {
+      path: 'name',
+      operator: '$eq',
+      value: '{{$context.data.id}}',
+    };
+    const model = CreateModel();
+    const rightVariableConverters: Pick<Converters, 'resolvePathFromValue' | 'resolveValueFromPath'> = {
+      resolvePathFromValue: (input) => (input === '{{$context.data.id}}' ? ['$context', 'data', 'id'] : undefined),
+      resolveValueFromPath: (metaTreeNode) =>
+        metaTreeNode.paths?.[0] === '$context' ? `{{${metaTreeNode.paths.join('.')}}}` : undefined,
+    };
+
+    render(
+      <VariableFilterItem
+        value={value}
+        model={model}
+        rightAsVariable
+        rightVariableConverters={rightVariableConverters}
+      />,
+    );
+
+    const variableInputProps = (
+      globalThis as {
+        __LAST_VARIABLE_INPUT_PROPS__?: {
+          converters?: Converters;
+          value?: unknown;
+        };
+      }
+    ).__LAST_VARIABLE_INPUT_PROPS__;
+    const converters = variableInputProps?.converters;
+    const constantNode: MetaTreeNode = { name: 'constant', title: 'Constant', type: 'string', paths: ['constant'] };
+    const nullNode: MetaTreeNode = { name: 'null', title: 'Null', type: 'object', paths: ['null'] };
+    const workflowNode: MetaTreeNode = {
+      name: 'id',
+      title: 'ID',
+      type: 'number',
+      paths: ['$context', 'data', 'id'],
+    };
+
+    expect(variableInputProps?.value).toBe('{{$context.data.id}}');
+    expect(converters?.resolvePathFromValue?.('{{$context.data.id}}')).toEqual(['$context', 'data', 'id']);
+    expect(converters?.resolvePathFromValue?.('{{ ctx.$context.data.id }}')).toEqual(['$context', 'data', 'id']);
+    expect(converters?.resolveValueFromPath?.(constantNode)).toBe('');
+    expect(converters?.resolveValueFromPath?.(nullNode)).toBeNull();
+    expect(converters?.resolveValueFromPath?.(workflowNode)).toBe('{{$context.data.id}}');
+  });
+
   it('uses scoped context dataSourceManager when app dataSourceManager has no field interface manager', async () => {
     const value = observable({ path: '', operator: '', value: '' }) as any;
     const model = CreateModel();

package/src/flow/flows/editMarkdownFlow.tsx

@@ -70,7 +70,7 @@ export const editMarkdownFlow = defineFlow<FlowModel>({
               {t('References')}:
             </span>
             <a
-              href={`https://v2.docs.nocobase.com/interface-builder/blocks/other-blocks/markdown`}
+              href={`https://docs.nocobase.com/interface-builder/blocks/other-blocks/markdown`}
               target="_blank"
               rel="noreferrer"
             >

package/src/flow/getViewDiffAndUpdateHidden.tsx

@@ -33,6 +33,7 @@ export const getKey = (viewItem: ViewItem) => {
     stableStringify(params.viewUid),
     stableStringify(params.sourceId),
     stableStringify(params.filterByTk),
+    stableStringify(params.openViewRouteState),
     String(index),
   ];
 

package/src/flow/index.ts

@@ -22,12 +22,14 @@ import { Markdown } from './common/Markdown/Markdown';
 import { LiquidEngine } from './common/Liquid';
 import type { PreviewRunJSResult } from './components/code-editor/runjsDiagnostics';
 import { TextAreaWithContextSelector } from './components/TextAreaWithContextSelector';
+import { registerDeviceTypeContext } from './internal/registerDeviceTypeContext';
 
 export class PluginFlowEngine<TApp extends BaseApplication<any> = BaseApplication<any>> extends Plugin<
   PluginOptions<any>,
   TApp
 > {
   async load() {
+    registerDeviceTypeContext(this.flowEngine);
     this.app.addComponents({ FlowRoute });
     this.app.flowEngine.setModelRepository(new FlowModelRepository(this.app));
     const filteredModels = Object.fromEntries(
@@ -49,7 +51,7 @@ export class PluginFlowEngine<TApp extends BaseApplication<any> = BaseApplicatio
       key: 'dynamic-flows-editor',
       component: DynamicFlowsIcon,
       visible(model) {
-        return model.getEvents().size > 0;
+        return model.getEvents().size > 0 || model.flowEngine.flowSettings.hasDynamicFlowSourceProvider(model);
       },
       sort: 0,
     });
@@ -98,6 +100,7 @@ export * from './FlowPage';
 export * from './models';
 export * from './utils';
 export * from './actions';
+export { FieldAssignValueInput } from './components/FieldAssignValueInput';
 export * from './system-settings';
 export * from './admin-shell/admin-layout';
 export * from './admin-shell/BaseLayoutModel';

package/src/flow/internal/components/Markdown/util.ts

@@ -9,13 +9,14 @@
 
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
+import { stripMarkdownIframes } from '../../../../utils/markdownSanitize';
 
 export const parseMarkdown = _.memoize(async (text: string) => {
   if (!text) {
     return text;
   }
   const m = await import('./md');
-  return m.default.render(text);
+  return stripMarkdownIframes(m.default.render(text));
 });
 
 export function useParseMarkdown(text: string) {

package/src/flow/internal/registerDeviceTypeContext.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { deviceType } from 'react-device-detect';
+
+export const registerDeviceTypeContext = (flowEngine: FlowEngine) => {
+  flowEngine.context.defineProperty('deviceType', {
+    get: () => (deviceType === 'browser' ? 'computer' : deviceType),
+    cache: false,
+    meta: {
+      type: 'string',
+      title: flowEngine.translate('Current device type'),
+      interface: 'select',
+      uiSchema: {
+        enum: [
+          { label: flowEngine.translate('Computer'), value: 'computer' },
+          { label: flowEngine.translate('Mobile'), value: 'mobile' },
+          { label: flowEngine.translate('Tablet'), value: 'tablet' },
+          { label: flowEngine.translate('SmartTv'), value: 'smarttv' },
+          { label: flowEngine.translate('Console'), value: 'console' },
+          { label: flowEngine.translate('Wearable'), value: 'wearable' },
+          { label: flowEngine.translate('Embedded'), value: 'embedded' },
+        ],
+        'x-component': 'Select',
+      },
+    },
+    info: {
+      description: 'Current device type (computer/mobile/tablet/...).',
+      detail: 'string',
+    },
+  });
+};

package/src/flow/internal/utils/operatorSchemaHelper.ts

@@ -9,6 +9,7 @@
 
 import React, { type ComponentType, type CSSProperties, type ReactNode } from 'react';
 import { DateFilterDynamicComponent } from '../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent';
+import { translateOptions } from './enumOptionsUtils';
 
 type OperatorMeta = {
   value?: string;
@@ -26,6 +27,7 @@ type OperatorComponentFieldModel = {
   props?: Record<string, unknown>;
   render?: () => ReactNode;
   __originalRender?: () => ReactNode;
+  translate?: (text: string) => string;
 };
 
 type OperatorComponentRenderOptions = {
@@ -93,6 +95,17 @@ export function restoreOperatorComponentRender(fieldModel?: unknown) {
   return true;
 }
 
+function translateComponentOptions(props: Record<string, unknown>, translate: ((text: string) => string) | undefined) {
+  if (!Array.isArray(props.options) || typeof translate !== 'function') {
+    return props;
+  }
+
+  return {
+    ...props,
+    options: translateOptions(props.options, translate),
+  };
+}
+
 export function applyOperatorComponentRender({
   app,
   fieldModel,
@@ -118,8 +131,9 @@ export function applyOperatorComponentRender({
   mutableFieldModel.render = () => {
     const fieldProps = mutableFieldModel.props || {};
     const fieldStyle = pickOperatorStyle(fieldProps.style);
-    const componentProps =
+    const mergedProps =
       propsPriority === 'operator' ? { ...fieldProps, ...operatorProps } : { ...operatorProps, ...fieldProps };
+    const componentProps = translateComponentOptions(mergedProps, mutableFieldModel.translate);
     const componentStyle =
       propsPriority === 'operator' ? { ...fieldStyle, ...operatorStyle } : { ...operatorStyle, ...fieldStyle };
     const mergedStyle = { ...(style || {}), ...componentStyle };

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

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createSafeDocument, createSafeWindow, createSafeNavigator, tExpr } from '@nocobase/flow-engine';
+import { tExpr } from '@nocobase/flow-engine';
 import type { ButtonProps } from 'antd/es/button';
 import { CodeEditor } from '../../components/code-editor';
 import { ActionModel } from '../base';
@@ -72,12 +72,7 @@ ctx.message.info('Hello JS action.');
       },
       async handler(ctx, params) {
         const { code, version } = resolveRunJsParams(ctx, params);
-        const navigator = createSafeNavigator();
-        await ctx.runjs(
-          code,
-          { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-          { version },
-        );
+        await ctx.runjs(code, undefined, { version });
       },
     },
   },

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

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createSafeDocument, createSafeWindow, createSafeNavigator, tExpr } from '@nocobase/flow-engine';
+import { tExpr } from '@nocobase/flow-engine';
 import type { ButtonProps } from 'antd/es/button';
 import { CodeEditor } from '../../components/code-editor';
 import { ActionModel, ActionSceneEnum } from '../base';
@@ -78,12 +78,7 @@ if (!rows.length) {
       },
       async handler(ctx, params) {
         const { code, version } = resolveRunJsParams(ctx, params);
-        const navigator = createSafeNavigator();
-        await ctx.runjs(
-          code,
-          { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-          { version },
-        );
+        await ctx.runjs(code, undefined, { version });
       },
     },
   },

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

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ElementProxy, createSafeDocument, createSafeNavigator, createSafeWindow, tExpr } from '@nocobase/flow-engine';
+import { ElementProxy, tExpr } from '@nocobase/flow-engine';
 import React from 'react';
 import { CodeEditor } from '../../components/code-editor';
 import { ActionModel, ActionSceneEnum, CollectionActionGroupModel, RecordActionGroupModel } from '../base';
@@ -137,12 +137,7 @@ JSItemActionModel.registerFlow({
           ctx.defineProperty('element', {
             get: () => new ElementProxy(element),
           });
-          const navigator = createSafeNavigator();
-          await ctx.runjs(
-            code,
-            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-            { version },
-          );
+          await ctx.runjs(code, undefined, { version });
         });
       },
     },

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

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createSafeDocument, createSafeWindow, createSafeNavigator, tExpr } from '@nocobase/flow-engine';
+import { tExpr } from '@nocobase/flow-engine';
 import type { ButtonProps } from 'antd/es/button';
 import { CodeEditor } from '../../components/code-editor';
 import { ActionSceneEnum, RecordActionModel } from '../base';
@@ -78,12 +78,7 @@ if (!ctx.record) {
       },
       async handler(ctx, params) {
         const { code, version } = resolveRunJsParams(ctx, params);
-        const navigator = createSafeNavigator();
-        await ctx.runjs(
-          code,
-          { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-          { version },
-        );
+        await ctx.runjs(code, undefined, { version });
       },
     },
   },

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

@@ -18,6 +18,17 @@ import { commonConditionHandler, ConditionBuilder } from '../../components/Condi
 export { ActionModel, ActionSceneEnum, ActionWithoutPermission, type ActionSceneType } from './ActionModelCore';
 import { ActionModel } from './ActionModelCore';
 
+function getMobileDefaultProps(ctx) {
+  const defaultProps = ctx.model.defaultProps || {};
+  if (ctx.isMobileLayout && defaultProps.icon && ctx.model.enableEditIconOnly !== false) {
+    return {
+      ...defaultProps,
+      iconOnly: true,
+    };
+  }
+  return defaultProps;
+}
+
 ActionModel.registerFlow({
   key: 'buttonSettings',
   title: tExpr('Button settings'),
@@ -32,6 +43,7 @@ ActionModel.registerFlow({
                 'x-decorator': 'FormItem',
                 'x-component': 'Input',
                 title: tExpr('Button title'),
+                description: ctx.model.getTitleFieldDescription?.(),
               }
             : undefined,
           tooltip: ctx.model.enableEditTooltip
@@ -48,13 +60,14 @@ ActionModel.registerFlow({
                 title: tExpr('Button icon'),
               }
             : undefined,
-          iconOnly: ctx.model.enableEditIcon
-            ? {
-                'x-decorator': 'FormItem',
-                'x-component': 'Switch',
-                title: tExpr('Icon only'),
-              }
-            : undefined,
+          iconOnly:
+            ctx.model.enableEditIcon && ctx.model.enableEditIconOnly !== false
+              ? {
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Switch',
+                  title: tExpr('Icon only'),
+                }
+              : undefined,
           type: ctx.model.enableEditType
             ? {
                 'x-decorator': 'FormItem',
@@ -80,7 +93,7 @@ ActionModel.registerFlow({
         };
       },
       defaultParams(ctx) {
-        const defaultProps = ctx.model.defaultProps || {};
+        const defaultProps = getMobileDefaultProps(ctx);
         if (!ctx.model.enableEditColor) {
           return defaultProps;
         }

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

@@ -25,7 +25,7 @@ export function ActionWithoutPermission(props) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} ` : '';
     return `${dataSourcePrefix}${collectionPrefix}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, t]);
   const { actionName } = props?.forbidden || model.forbidden;
   const messageValue = useMemo(() => {
     return t(
@@ -62,6 +62,7 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   enableEditTooltip = true;
   enableEditTitle = true;
   enableEditIcon = true;
+  enableEditIconOnly = true;
   enableEditType = true;
   enableEditDanger = true;
   enableEditColor = false;
@@ -136,6 +137,10 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return this.props.title;
   }
 
+  getTitleFieldDescription() {
+    return undefined;
+  }
+
   getIcon() {
     return this.props.icon;
   }
@@ -143,10 +148,11 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   renderButton() {
     const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
+    const titleContent = iconOnly && icon ? null : props.children || this.getTitle();
 
     return (
       <Button {...props} onClick={this.onClick.bind(this)} icon={icon}>
-        {iconOnly ? null : props.children || this.getTitle()}
+        {titleContent}
       </Button>
     );
   }
@@ -162,11 +168,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   renderHiddenInConfig(): React.ReactNode | undefined {
     const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
+    const titleContent = iconOnly && icon ? null : props.children || this.getTitle();
     if (this.forbidden) {
       return (
         <ActionWithoutPermission>
           <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-            {iconOnly ? null : props.children || this.getTitle()}
+            {titleContent}
           </Button>
         </ActionWithoutPermission>
       );
@@ -174,7 +181,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' }}>
-          {iconOnly ? null : props.children || this.getTitle()}
+          {titleContent}
         </Button>
       </Tooltip>
     );

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

@@ -14,8 +14,10 @@ import {
   FlowSettingsButton,
   buildSubModelGroups,
   buildSubModelItems,
+  type FlowModel,
   type SubModelItem,
   type SubModelItemsType,
+  VIEW_ACTIVATED_EVENT,
 } from '@nocobase/flow-engine';
 import React from 'react';
 import { FilterManager } from '../blocks/filter-manager/FilterManager';
@@ -24,6 +26,8 @@ import { GridModel } from './GridModel';
 const SELECT_SCENE_ALLOWED_OTHER_BLOCK_MODELS = ['JSBlockModel', 'IframeBlockModel', 'MarkdownBlockModel'] as const;
 
 export class BlockGridModel extends GridModel {
+  private viewActivatedListener?: () => void;
+
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
@@ -50,6 +54,28 @@ export class BlockGridModel extends GridModel {
     });
   }
 
+  onMount() {
+    super.onMount();
+    if (this.context.view?.inputArgs?.scene !== 'select' || this.viewActivatedListener) {
+      return;
+    }
+
+    this.viewActivatedListener = () => {
+      this.mapSubModels('items', (item) => {
+        (item as FlowModel & { onActive?: () => void }).onActive?.();
+      });
+    };
+    this.flowEngine.emitter.on(VIEW_ACTIVATED_EVENT, this.viewActivatedListener);
+  }
+
+  protected onUnmount() {
+    if (this.viewActivatedListener) {
+      this.flowEngine.emitter.off(VIEW_ACTIVATED_EVENT, this.viewActivatedListener);
+      this.viewActivatedListener = undefined;
+    }
+    super.onUnmount();
+  }
+
   get subModelBaseClasses() {
     const inputArgs = this.context.view?.inputArgs ?? {};
     if (inputArgs.collectionName && !inputArgs.filterByTk) {

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

@@ -569,9 +569,13 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
     }
     if (fieldPath.includes('.')) {
       // 关系数据
+      const collection = this.collection;
+      if (!collection) {
+        return;
+      }
       const [field1, field2] = fieldPath.split('.');
       const associationField = this.context.dataSourceManager.getCollectionField(
-        `${this.collection.dataSourceKey}.${this.collection.name}.${field1}`,
+        `${collection.dataSourceKey}.${collection.name}.${field1}`,
       ) as CollectionField;
       if (!associationField) {
         return;
@@ -583,7 +587,7 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
       }
 
       const collectionField = this.context.dataSourceManager.getCollectionField(
-        `${this.collection.dataSourceKey}.${targetCollectionName}.${field2}`,
+        `${collection.dataSourceKey}.${targetCollectionName}.${field2}`,
       ) as CollectionField;
 
       if (collectionField && collectionField.isAssociationField()) {

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

@@ -75,6 +75,12 @@ interface DragState {
   generatedIds: Map<string, string>;
 }
 
+const MOBILE_GRID_DISABLED_DROP_SLOT_TYPES = new Set<LayoutSlot['type']>(['column-edge', 'item-edge', 'empty-column']);
+
+const filterMobileGridDragSlots = (slots: LayoutSlot[]) => {
+  return slots.filter((slot) => !MOBILE_GRID_DISABLED_DROP_SLOT_TYPES.has(slot.type));
+};
+
 const getClientPoint = (event: any): { x: number; y: number } | null => {
   if (!event) {
     return null;
@@ -625,7 +631,7 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
       return;
     }
     const snapshot = buildLayoutSnapshot({ container: this.getDragContainer() });
-    this.dragState.slots = snapshot.slots;
+    this.dragState.slots = this.context.isMobileLayout ? filterMobileGridDragSlots(snapshot.slots) : snapshot.slots;
     this.dragState.containerRect = snapshot.containerRect;
   }
 
@@ -1135,7 +1141,7 @@ GridModel.registerFlow({
 /**
  * 将多列栅格 rows 转换为移动端单列 rows。
  * 遍历原 rows 的行与列顺序，把每个原列（过滤空白列后）变成一个新行（仅一列）。
- * 行 key 使用 uid() 生成，保持插入顺序即可。
+ * 行 key 使用原 rowId 与 columnIndex 生成，避免每次渲染产生随机 key 导致移动端滚动位置丢失。
  * @param rows 原始多列 rows
  * @returns 单列 rows
  */
@@ -1145,13 +1151,38 @@ export function transformRowsToSingleColumn(
 ): Record<string, string[][]> {
   const emptyColumnUid = options?.emptyColumnUid ?? EMPTY_COLUMN_UID;
   const singleColumnRows: Record<string, string[][]> = {};
+
+  const getAvailableRowId = (baseRowId: string) => {
+    if (!singleColumnRows[baseRowId]) {
+      return baseRowId;
+    }
+
+    let duplicateIndex = 1;
+    let rowId = `${baseRowId}:duplicate:${duplicateIndex}`;
+    while (singleColumnRows[rowId]) {
+      duplicateIndex += 1;
+      rowId = `${baseRowId}:duplicate:${duplicateIndex}`;
+    }
+    return rowId;
+  };
+
   Object.keys(rows).forEach((rowId) => {
     const columns = rows[rowId];
-    columns.forEach((column) => {
-      const filtered = column.filter((id) => id !== emptyColumnUid);
-      if (filtered.length > 0) {
-        singleColumnRows[uid()] = [filtered];
-      }
+    const effectiveColumns = columns
+      .map((column, columnIndex) => ({
+        columnIndex,
+        items: column.filter((id) => id !== emptyColumnUid),
+      }))
+      .filter((column) => column.items.length > 0);
+
+    if (effectiveColumns.length === 1 && effectiveColumns[0].columnIndex === 0) {
+      singleColumnRows[getAvailableRowId(rowId)] = [effectiveColumns[0].items];
+      return;
+    }
+
+    effectiveColumns.forEach((column) => {
+      const generatedRowId = `mobile:${encodeURIComponent(rowId)}:${column.columnIndex}`;
+      singleColumnRows[getAvailableRowId(generatedRowId)] = [column.items];
     });
   });
   return singleColumnRows;