@nocobase/client-v2 2.3.0-beta.2 → 2.3.0-beta.20

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

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+type QuickEditViewContainerLike = {
+  update?: (newConfig: { preventClose?: boolean }) => unknown;
+};
+
+type QuickEditFieldModelLike = {
+  parent?: {
+    use?: string;
+    viewContainer?: QuickEditViewContainerLike;
+  } | null;
+};
+
+export function getQuickEditViewContainer(model: QuickEditFieldModelLike | undefined) {
+  const parent = model?.parent;
+  if (parent?.use !== 'QuickEditFormModel') {
+    return undefined;
+  }
+  return parent.viewContainer;
+}
+
+/**
+ * Keeps the quick edit popover open while a nested dropdown (Select / Cascader) is open. The outside click that
+ * closes the dropdown would otherwise also close the popover and drop the unsaved edit. Releasing is deferred so the
+ * closing click itself never reaches the popover as a close request.
+ */
+export function syncQuickEditPreventClose(model: QuickEditFieldModelLike | undefined, dropdownOpen: boolean) {
+  const container = getQuickEditViewContainer(model);
+  if (!container?.update) {
+    return;
+  }
+  if (dropdownOpen) {
+    container.update({ preventClose: true });
+    return;
+  }
+  setTimeout(() => {
+    container.update?.({ preventClose: false });
+  }, 0);
+}

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

@@ -37,14 +37,30 @@ export class JSItemActionModel extends ActionModel {
   static scene = ActionSceneEnum.all;
 
   render() {
-    return <div ref={this.context.ref} style={{ display: 'inline-flex', minHeight: 22, alignItems: 'center' }} />;
+    return (
+      <div
+        ref={this.context.ref}
+        style={{
+          display: 'inline-flex',
+          minHeight: 22,
+          minWidth: this.context.flowSettingsEnabled ? this.context.themeToken?.controlHeightLG ?? 40 : undefined,
+          alignItems: 'center',
+        }}
+      />
+    );
   }
 
   renderHiddenInConfig(): React.ReactNode | undefined {
     return (
       <div
         ref={this.context.ref}
-        style={{ display: 'inline-flex', minHeight: 22, alignItems: 'center', opacity: 0.3 }}
+        style={{
+          display: 'inline-flex',
+          minHeight: 22,
+          minWidth: this.context.themeToken?.controlHeightLG ?? 40,
+          alignItems: 'center',
+          opacity: 0.3,
+        }}
       />
     );
   }
@@ -62,7 +78,7 @@ export class JSItemActionModel extends ActionModel {
     }
 
     if (this._mountedOnce && this.context.ref?.current) {
-      void this.applyFlow('jsSettings');
+      this.applyFlow('jsSettings');
     }
     this._mountedOnce = true;
   }

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

@@ -46,21 +46,23 @@ LinkActionModel.registerFlow({
 
         if (link) {
           const isExternalLink = isURL(link);
+          // embed 是页面容器，不应销毁；仅弹窗视图在站内同窗口跳转后销毁。
+          const shouldDestroyView =
+            !!ctx.view &&
+            shouldDestroyViewAfterLinkNavigation({
+              openInNewWindow,
+              isExternalLink,
+              viewType: ctx.view.type,
+            });
           handleLinkNavigation({
             link,
             openInNewWindow,
             router: ctx.router,
             isExternalLink,
+            // 弹窗会被销毁，用 replace 丢弃弹窗路由；页面（含移动端 embed）跳转需保留历史，以便逐级返回。
+            replace: shouldDestroyView,
           });
-          // embed 是页面容器，不应销毁；仅弹窗视图在站内同窗口跳转后销毁。
-          if (
-            ctx.view &&
-            shouldDestroyViewAfterLinkNavigation({
-              openInNewWindow,
-              isExternalLink,
-              viewType: ctx.view.type,
-            })
-          ) {
+          if (shouldDestroyView) {
             ctx.view.destroy();
           }
         } else {

package/src/flow/models/actions/LinkActionUtils.ts

@@ -25,10 +25,11 @@ export function handleLinkNavigation(options: {
   openInNewWindow?: boolean;
   router: { navigate: (to: string, options?: { replace?: boolean }) => void };
   isExternalLink: boolean;
+  replace?: boolean;
   setLocationHref?: (url: string) => void;
   openWindow?: (url?: string, target?: string) => Window | null;
 }) {
-  const { link, openInNewWindow, router, isExternalLink } = options;
+  const { link, openInNewWindow, router, isExternalLink, replace = false } = options;
   const setLocationHref = options.setLocationHref ?? ((url: string) => (window.location.href = url));
   const openWindow = options.openWindow ?? ((url?: string, target?: string) => window.open(url, target));
 
@@ -44,7 +45,8 @@ export function handleLinkNavigation(options: {
 
   // 该辅助方法仅负责导航，是否关闭弹窗由调用方按场景决定；
   // 在弹窗上下文中，错误的关闭时机会把新路由回滚为原页面。
-  router.navigate(link, { replace: true });
+  // 默认 push 新的历史记录，保证浏览器/手机右滑返回能逐级回退；仅在需要丢弃当前弹窗路由时由调用方传 replace。
+  router.navigate(link, { replace });
 }
 
 /**

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

@@ -8,13 +8,59 @@
  */
 
 import React from 'react';
-import { render, screen, waitFor } from '@nocobase/test/client';
+import { act, render, screen, waitFor } from '@nocobase/test/client';
 import { App, ConfigProvider } from 'antd';
 import { describe, expect, it } from 'vitest';
 import { FlowEngine, FlowEngineProvider, FlowModelRenderer } from '@nocobase/flow-engine';
 import { JSItemActionModel } from '../JSItemActionModel';
 
 describe('JSItemActionModel', () => {
+  it('keeps empty items reachable in configuration mode without replacing rendered content', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ JSItemActionModel });
+    const model = engine.createModel<JSItemActionModel>({ use: 'JSItemActionModel' });
+    await engine.flowSettings.disable();
+
+    render(model.render());
+    const host = model.context.ref.current;
+    expect(host).toBeInstanceOf(HTMLDivElement);
+    expect(host.style.minWidth).toBe('');
+    expect(host.textContent).toBe('');
+
+    await act(async () => {
+      await engine.flowSettings.enable();
+    });
+    await waitFor(() => expect(host.style.minWidth).toBe('40px'));
+
+    const content = document.createElement('button');
+    content.textContent = 'Custom action';
+    host.appendChild(content);
+
+    await act(async () => {
+      await engine.flowSettings.disable();
+    });
+    await waitFor(() => expect(host.style.minWidth).toBe(''));
+    expect(model.context.ref.current).toBe(host);
+    expect(host.firstElementChild).toBe(content);
+  });
+
+  it('keeps hidden empty items configurable and removes them outside configuration mode', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ JSItemActionModel });
+    const model = engine.createModel<JSItemActionModel>({ use: 'JSItemActionModel' });
+    model.setHidden(true);
+    await engine.flowSettings.enable();
+
+    const { container } = render(model.render());
+    expect(model.context.ref.current.style.minWidth).toBe('40px');
+    expect(model.context.ref.current.style.opacity).toBe('0.3');
+
+    await act(async () => {
+      await engine.flowSettings.disable();
+    });
+    await waitFor(() => expect(container).toBeEmptyDOMElement());
+  });
+
   it('renders collection-level custom content', async () => {
     const engine = new FlowEngine();
     engine.registerModels({ JSItemActionModel });

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

@@ -22,6 +22,20 @@ describe('handleLinkNavigation', () => {
       isExternalLink: false,
     });
 
+    expect(navigate).toHaveBeenCalledWith('/target-page', { replace: false });
+  });
+
+  it('should replace history entry when caller requests replace', () => {
+    const navigate = vi.fn();
+
+    handleLinkNavigation({
+      link: '/target-page',
+      openInNewWindow: false,
+      router: { navigate },
+      isExternalLink: false,
+      replace: true,
+    });
+
     expect(navigate).toHaveBeenCalledWith('/target-page', { replace: true });
   });
 

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

@@ -922,7 +922,6 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     const baseLayout = this.context.isMobileLayout
       ? normalizeGridLayout({
           rows: transformRowsToSingleColumn(projectLayoutToLegacyRows(rawLayout).rows),
-          itemUids: this.getItemUids(),
         })
       : rawLayout;
     const baseProjection = projectLayoutToLegacyRows(baseLayout);

package/src/flow/models/blocks/assign-form/AssignFormGridModel.tsx

@@ -115,7 +115,28 @@ export class AssignFormGridModel extends FormGridModel {
       (existing as any).assignValue = value;
       return;
     }
-    const field = (collection?.getFields?.() || []).find((f: any) => f.name === fieldName);
+    if (!collection) {
+      return;
+    }
+    const field = (collection.getFields?.() || []).find((f: any) => f.name === fieldName);
+
+    if (!field) {
+      const created = this.addSubModel('items', {
+        use: 'AssignFormItemModel',
+        stepParams: {
+          fieldSettings: {
+            init: {
+              dataSourceKey: collection?.dataSourceKey,
+              collectionName: collection?.name,
+              fieldPath: fieldName,
+            },
+            assignValue: { value },
+          },
+        },
+      });
+      created['assignValue'] = value;
+      return;
+    }
 
     const binding = EditableItemModel.getDefaultBindingByField(this.context, field);
     if (!binding) {

package/src/flow/models/blocks/assign-form/AssignFormItemModel.tsx

@@ -10,7 +10,14 @@
 import React from 'react';
 import { Input } from 'antd';
 import { define, observable } from '@formily/reactive';
-import { FlowModelRenderer, FormItem, tExpr, EditableItemModel, jioToJoiSchema } from '@nocobase/flow-engine';
+import {
+  EditableItemModel,
+  FieldDeletePlaceholder,
+  FlowModelRenderer,
+  FormItem,
+  jioToJoiSchema,
+  tExpr,
+} from '@nocobase/flow-engine';
 // 无需类型导入（避免未使用的类型）
 import { FormItemModel } from '../form/FormItemModel';
 import { EditFormModel } from '../form/EditFormModel';
@@ -24,6 +31,7 @@ import {
   isDateLikeField,
   resolveDateVariableComponentProps,
 } from '../../../components/field-value-variable';
+import { isArrayValueField, normalizeAssignFormValue } from './assignFormValue';
 
 type AssignFormTempOriginField = {
   uid?: string;
@@ -105,8 +113,6 @@ export class AssignFormItemModel extends FormItemModel {
   }
 
   onInit(options: any) {
-    const initAssign = this.getStepParams('fieldSettings', 'assignValue')?.value;
-    if (typeof initAssign !== 'undefined') this.assignValue = initAssign;
     this.context.defineProperty('collectionField', {
       get: () => {
         const params = this.getStepParams('fieldSettings', 'init') || {};
@@ -115,6 +121,10 @@ export class AssignFormItemModel extends FormItemModel {
         return dsm?.getCollectionField?.(key);
       },
     });
+    const initAssign = this.getStepParams('fieldSettings', 'assignValue')?.value;
+    if (typeof initAssign !== 'undefined') {
+      this.assignValue = normalizeAssignFormValue(initAssign, isArrayValueField(this.collectionField));
+    }
 
     // 确保存在 subModels.field，便于沿用 FormItemModel 的组件切换/设置步骤（fieldComponent 等）
     const ctx: any = this.context;
@@ -160,11 +170,15 @@ export class AssignFormItemModel extends FormItemModel {
 
   getAssignedEntry(): [string, any] | null {
     const name = this.fieldPath;
-    if (!name) return null;
-    return [name, this.assignValue];
+    if (!name || !this.collectionField) return null;
+    return [name, normalizeAssignFormValue(this.assignValue, isArrayValueField(this.collectionField))];
   }
 
   render() {
+    if (!this.collectionField) {
+      return <FieldDeletePlaceholder />;
+    }
+
     // 与 FormItemModel.render 结构保持一致，仅替换内部渲染为 VariableInput + 常量编辑器
     const ctx: any = this.context;
     const collection = ctx.collection;
@@ -173,6 +187,7 @@ export class AssignFormItemModel extends FormItemModel {
     const fieldPath = this.fieldPath;
     const originField = this.subModels?.field as AssignFormTempOriginField | undefined;
     const tempFieldRefreshKey = getAssignFormTempFieldRefreshKey(originField);
+    const arrayValueField = isArrayValueField(this.collectionField);
 
     const FieldRow: React.FC = () => {
       const [tempRoot, setTempRoot] = React.useState<any>(null);
@@ -241,6 +256,14 @@ export class AssignFormItemModel extends FormItemModel {
         fm?.dispatchEvent?.('beforeRender', undefined, { sequential: true, useCache: true });
         // 为本地枚举型字段补全可选项（仅在未显式传入 options 时处理）
         ensureOptionsFromUiSchemaEnumIfAbsent(fm as any, cfForMultiple as any);
+        // `mode` is the antd Select switch for multi-select. It is normally injected by
+        // `collectionField.getComponentProps()`, which the temp field does not apply.
+        // Apply the fallback after `beforeRender` so field flows keep precedence; a
+        // schema-provided mode is used when present, otherwise default to `multiple`.
+        if (cfForMultiple?.interface === 'multipleSelect' && fm?.props?.mode === undefined) {
+          const schemaMode = cfForMultiple?.uiSchema?.['x-component-props']?.mode as string | undefined;
+          fm?.setProps?.({ mode: schemaMode ?? 'multiple' });
+        }
         if (!fm?.props?.fieldNames && cfForMultiple?.targetCollection) {
           const targetCol = cfForMultiple.targetCollection;
           const valueKey = cfForMultiple?.targetKey || targetCol?.filterTargetKey || 'id';
@@ -257,16 +280,17 @@ export class AssignFormItemModel extends FormItemModel {
       const ConstantValueEditor: React.FC<any> = (inputProps: any) => {
         React.useEffect(() => {
           if (!tempRoot) return;
+          const isArrayField = isArrayValueField(this.collectionField);
           // 同步根 props（变量输入的受控 value/onChange）
           tempRoot.setProps?.({ ...inputProps });
           // 同步到具体字段模型，确保字段组件能触发 onChange
           const fm = tempRoot?.subModels?.fields?.[0];
           if (fm) {
             fm.setProps?.({
-              value: inputProps?.value,
+              value: normalizeAssignFormValue(inputProps?.value, isArrayField),
               onChange: (...args: unknown[]) => {
                 const nextArg = args && args.length ? args[0] : undefined;
-                const nextValue = normalizeAssignFormInputValue(nextArg);
+                const nextValue = normalizeAssignFormValue(normalizeAssignFormInputValue(nextArg), isArrayField);
                 fm.setProps?.({ value: nextValue });
                 this.assignValue = nextValue;
                 inputProps?.onChange?.(nextValue);
@@ -319,20 +343,24 @@ export class AssignFormItemModel extends FormItemModel {
           {...this.props}
           label={labelText}
           name={namePath}
-          initialValue={this.assignValue}
+          initialValue={normalizeAssignFormValue(this.assignValue, arrayValueField)}
           valuePropName="__assign_value__"
           trigger="__assign_trigger__"
           validateTrigger="__assign_trigger__"
         >
           {React.createElement((formBindingProps: any) => {
             const formValue = formBindingProps?.__assign_value__;
-            const mergedValue = typeof formValue === 'undefined' ? this.assignValue : formValue;
+            const mergedValue = normalizeAssignFormValue(
+              typeof formValue === 'undefined' ? this.assignValue : formValue,
+              arrayValueField,
+            );
             return (
               <FieldValueVariableInput
                 value={mergedValue}
                 onChange={(v) => {
-                  this.assignValue = v;
-                  formBindingProps?.__assign_trigger__?.(v);
+                  const nextValue = normalizeAssignFormValue(v, arrayValueField);
+                  this.assignValue = nextValue;
+                  formBindingProps?.__assign_trigger__?.(nextValue);
                 }}
                 baseMetaTree={baseMetaTree}
                 constantComponent={ConstantValueEditor}
@@ -392,7 +420,7 @@ AssignFormItemModel.registerFlow({
       },
       defaultParams: (ctx) => {
         return {
-          label: (ctx.model as any).collectionField.title,
+          label: (ctx.model as any).collectionField?.title || (ctx.model as any).fieldPath,
         };
       },
       handler(ctx, params) {

package/src/flow/models/blocks/assign-form/__tests__/assignFieldValuesFlow.editor.test.tsx

@@ -47,6 +47,146 @@ class MockFlowModelRepository implements IFlowModelRepository {
 }
 
 describe('assignFieldValuesFlow (editor)', () => {
+  it('shows the deleted-field placeholder for a stale assigned value', async () => {
+    const engine = new FlowEngine();
+    engine.setModelRepository(new MockFlowModelRepository());
+    engine.registerModels({
+      AssignFormModel,
+      AssignFormGridModel,
+      AssignFormItemModel,
+      InputFieldModel,
+      VariableFieldFormModel,
+    });
+    engine.context.defineProperty('location', { value: { search: '' } });
+    engine.context.defineProperty('themeToken', { value: { marginLG: 24 } });
+    engine.context.defineProperty('flowSettingsEnabled', { value: true });
+
+    const main = engine.context.dataSourceManager.getDataSource('main');
+    main.addCollection({
+      name: 'users',
+      fields: [{ name: 'nickname', type: 'string', interface: 'input' }],
+    });
+    const users = engine.context.dataSourceManager.getCollection('main', 'users');
+
+    const action = engine.createModel({
+      use: 'FlowModel',
+      uid: 'act-assign-deleted-field',
+    });
+    action.setStepParams('assignSettings', 'assignFieldValues', {
+      assignedValues: { deletedField: 'stale value' },
+    });
+    action.context.defineProperty('blockModel', { value: { collection: users } });
+
+    const step = createAssignFieldValuesStep({ settingsFlowKey: 'assignSettings' });
+    const Editor = step.uiSchema().editor?.['x-component'] as React.ComponentType;
+    const flowSettingsCtx = new FlowRuntimeContext(action, 'assignSettings', 'settings');
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <FlowSettingsContextProvider value={flowSettingsCtx}>
+              <Editor />
+            </FlowSettingsContextProvider>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Fields/ })).toBeInTheDocument();
+      expect(screen.getByText(/deletedField.*may have been deleted/)).toBeInTheDocument();
+      const form = engine.findModelByParentId<AssignFormModel>(action.uid, 'assignForm');
+      expect(form).toBeDefined();
+      expect(form?.subModels.grid.subModels.items || []).toHaveLength(1);
+      expect(form?.getAssignedValues()).toEqual({});
+    });
+  });
+
+  it('shows the standard deleted-field placeholder for a persisted assigned field model', async () => {
+    const engine = new FlowEngine();
+    engine.setModelRepository(new MockFlowModelRepository());
+    engine.registerModels({
+      AssignFormModel,
+      AssignFormGridModel,
+      AssignFormItemModel,
+      InputFieldModel,
+      VariableFieldFormModel,
+    });
+    engine.context.defineProperty('location', { value: { search: '' } });
+    engine.context.defineProperty('themeToken', { value: { marginLG: 24 } });
+    engine.context.defineProperty('flowSettingsEnabled', { value: true });
+
+    const main = engine.context.dataSourceManager.getDataSource('main');
+    main.addCollection({
+      name: 'users',
+      fields: [{ name: 'nickname', type: 'string', interface: 'input' }],
+    });
+    const users = engine.context.dataSourceManager.getCollection('main', 'users');
+
+    const action = engine.createModel({
+      use: 'FlowModel',
+      uid: 'act-assign-persisted-deleted-field',
+    });
+    action.setStepParams('assignSettings', 'assignFieldValues', {
+      assignedValues: { deletedField: 'stale value' },
+    });
+    action.context.defineProperty('blockModel', { value: { collection: users } });
+
+    const form = engine.createModel<AssignFormModel>({
+      use: 'AssignFormModel',
+      uid: 'form-assign-persisted-deleted-field',
+      parentId: action.uid,
+      subKey: 'assignForm',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+          },
+        },
+      },
+    });
+    action.setSubModel('assignForm', form);
+    form.subModels.grid.addSubModel('items', {
+      use: 'AssignFormItemModel',
+      uid: 'item-assign-persisted-deleted-field',
+      stepParams: {
+        fieldSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+            fieldPath: 'deletedField',
+          },
+          assignValue: { value: 'stale value' },
+        },
+      },
+    });
+    form.subModels.grid.resetRows(true);
+
+    const step = createAssignFieldValuesStep({ settingsFlowKey: 'assignSettings' });
+    const Editor = step.uiSchema().editor?.['x-component'] as React.ComponentType;
+    const flowSettingsCtx = new FlowRuntimeContext(action, 'assignSettings', 'settings');
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <FlowSettingsContextProvider value={flowSettingsCtx}>
+              <Editor />
+            </FlowSettingsContextProvider>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/deletedField.*may have been deleted/)).toBeInTheDocument();
+      expect(form.subModels.grid.subModels.items).toHaveLength(1);
+      expect(form.getAssignedValues()).toEqual({});
+    });
+  });
+
   it('repairs AssignFormModel resource init and clears cached collection', async () => {
     const engine = new FlowEngine();
     engine.setModelRepository(new MockFlowModelRepository());