@nocobase/client-v2 2.3.0-beta.7 → 2.3.0-beta.9

package/src/components/form/ScanInput/useCodeScanner.ts

@@ -10,7 +10,9 @@
 import { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
 import jsQR from 'jsqr';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
 import type { CodeFormatsToSupport } from './types';
+import { decodeQrCodeWithZxingWasm } from './zxingWasmDecoder';
 
 type ScannerSize = {
   width: number;
@@ -22,6 +24,7 @@ type UseCodeScannerOptions = {
   elementId: string;
   formatsToSupport?: CodeFormatsToSupport;
   onScannerSizeChanged?: (size: ScannerSize) => void;
+  scanViewportRef?: RefObject<HTMLElement | null>;
   onScanSuccess: (text: string) => void;
   onScanFailure?: () => void;
   onCameraStartFailure?: (error: unknown) => void;
@@ -37,6 +40,12 @@ type JsQRImageTransform = {
   threshold?: number;
 };
 
+type QrFrameCaptureLimits = {
+  maxHeight: number;
+  maxPixels: number;
+  maxWidth: number;
+};
+
 type FocusMediaTrackCapabilities = MediaTrackCapabilities & {
   focusMode?: string[];
 };
@@ -47,8 +56,15 @@ type FocusMediaTrackConstraintSet = MediaTrackConstraintSet & {
 
 const QR_SCAN_IMAGE_SIZES = [3200, 2400, 1600, 1000];
 const LIVE_QR_SCAN_INTERVAL = 120;
+const IOS_ZXING_SCAN_INTERVAL = 200;
 const LIVE_QR_SCAN_MAX_WIDTH = 960;
 const LIVE_QR_SCAN_MAX_HEIGHT = 540;
+const LIVE_QR_SCAN_MAX_PIXELS = LIVE_QR_SCAN_MAX_WIDTH * 420;
+const IOS_ZXING_SCAN_LIMITS: QrFrameCaptureLimits = {
+  maxHeight: 720,
+  maxPixels: 720 * 960,
+  maxWidth: 1280,
+};
 const QR_SCAN_IMAGE_TRANSFORMS: JsQRImageTransform[] = [
   {},
   { contrast: 3, threshold: 105 },
@@ -81,7 +97,49 @@ export function getCodeScanBoxSize(width: number, height: number) {
   };
 }
 
-export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement) {
+export function isIOSBrowser() {
+  return (
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+  );
+}
+
+function getVisibleVideoFrameRegion(video: HTMLVideoElement, scanViewport: Element) {
+  const rect = video.getBoundingClientRect();
+  const viewportRect = scanViewport.getBoundingClientRect();
+  const visibleLeft = Math.max(viewportRect.left, rect.left);
+  const visibleTop = Math.max(viewportRect.top, rect.top);
+  const visibleRight = Math.min(viewportRect.right, rect.right);
+  const visibleBottom = Math.min(viewportRect.bottom, rect.bottom);
+  if (!rect.width || !rect.height || visibleRight <= visibleLeft || visibleBottom <= visibleTop) {
+    return;
+  }
+
+  const sourceX = Math.max(0, Math.floor(((visibleLeft - rect.left) / rect.width) * video.videoWidth));
+  const sourceY = Math.max(0, Math.floor(((visibleTop - rect.top) / rect.height) * video.videoHeight));
+  return {
+    x: sourceX,
+    y: sourceY,
+    width: Math.min(
+      video.videoWidth - sourceX,
+      Math.ceil(((visibleRight - visibleLeft) / rect.width) * video.videoWidth),
+    ),
+    height: Math.min(
+      video.videoHeight - sourceY,
+      Math.ceil(((visibleBottom - visibleTop) / rect.height) * video.videoHeight),
+    ),
+  };
+}
+
+export function getQrVideoFrameImageData(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  scanViewport?: Element,
+  limits: QrFrameCaptureLimits = {
+    maxHeight: LIVE_QR_SCAN_MAX_HEIGHT,
+    maxPixels: LIVE_QR_SCAN_MAX_PIXELS,
+    maxWidth: LIVE_QR_SCAN_MAX_WIDTH,
+  },
+) {
   if (!video.videoWidth || !video.videoHeight || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
     return;
   }
@@ -89,16 +147,27 @@ export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElem
   const viewfinderWidth = video.clientWidth || video.videoWidth;
   const viewfinderHeight = video.clientHeight || video.videoHeight;
   const scanBoxSize = getCodeScanBoxSize(viewfinderWidth, viewfinderHeight);
-  const sourceWidth = Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth)));
-  const sourceHeight = Math.min(
-    video.videoHeight,
-    Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight)),
-  );
-  const sourceX = Math.floor((video.videoWidth - sourceWidth) / 2);
-  const sourceY = Math.floor((video.videoHeight - sourceHeight) / 2);
-  const targetScale = Math.min(1, LIVE_QR_SCAN_MAX_WIDTH / sourceWidth, LIVE_QR_SCAN_MAX_HEIGHT / sourceHeight);
-  const targetWidth = Math.max(1, Math.floor(sourceWidth * targetScale));
-  const targetHeight = Math.max(1, Math.floor(sourceHeight * targetScale));
+  const scanBoxRegion = {
+    width: Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth))),
+    height: Math.min(video.videoHeight, Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight))),
+  };
+  const sourceRegion = scanViewport
+    ? getVisibleVideoFrameRegion(video, scanViewport)
+    : {
+        x: Math.floor((video.videoWidth - scanBoxRegion.width) / 2),
+        y: Math.floor((video.videoHeight - scanBoxRegion.height) / 2),
+        ...scanBoxRegion,
+      };
+  if (!sourceRegion) {
+    return;
+  }
+
+  const maxWidth = scanViewport && sourceRegion.height > sourceRegion.width ? limits.maxHeight : limits.maxWidth;
+  const maxHeight = scanViewport && sourceRegion.height > sourceRegion.width ? limits.maxWidth : limits.maxHeight;
+  const pixelScale = scanViewport ? Math.sqrt(limits.maxPixels / (sourceRegion.width * sourceRegion.height)) : 1;
+  const targetScale = Math.min(1, maxWidth / sourceRegion.width, maxHeight / sourceRegion.height, pixelScale);
+  const targetWidth = Math.max(1, Math.floor(sourceRegion.width * targetScale));
+  const targetHeight = Math.max(1, Math.floor(sourceRegion.height * targetScale));
   if (canvas.width !== targetWidth) {
     canvas.width = targetWidth;
   }
@@ -110,30 +179,75 @@ export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElem
     return;
   }
 
-  context.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
-  const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
+  context.drawImage(
+    video,
+    sourceRegion.x,
+    sourceRegion.y,
+    sourceRegion.width,
+    sourceRegion.height,
+    0,
+    0,
+    targetWidth,
+    targetHeight,
+  );
+  return context.getImageData(0, 0, targetWidth, targetHeight);
+}
+
+export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement, scanViewport?: Element) {
+  const imageData = getQrVideoFrameImageData(video, canvas, scanViewport);
+  if (!imageData) {
+    return;
+  }
   return jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' })?.data;
 }
 
-function startLiveQrScan(elementId: string, onScanSuccess: (text: string) => void) {
+export async function scanQrVideoFrameWithZxingWasm(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  scanViewport: Element,
+) {
+  const imageData = getQrVideoFrameImageData(video, canvas, scanViewport, IOS_ZXING_SCAN_LIMITS);
+  if (!imageData) {
+    return;
+  }
+  return decodeQrCodeWithZxingWasm(imageData);
+}
+
+function startLiveQrScan(
+  elementId: string,
+  onScanSuccess: (text: string) => void,
+  scanViewportRef?: RefObject<HTMLElement | null>,
+) {
   const canvas = document.createElement('canvas');
+  const useVisiblePreview = isIOSBrowser();
   let timer: number | undefined;
   let stopped = false;
 
-  const scan = () => {
+  const scan = async () => {
     if (stopped) {
       return;
     }
     const video = document.getElementById(elementId)?.querySelector('video');
+    const scanViewport = useVisiblePreview ? scanViewportRef?.current : undefined;
     if (video) {
-      const decodedText = scanQrVideoFrame(video, canvas);
-      if (decodedText) {
+      let decodedText: string | undefined;
+      try {
+        decodedText =
+          useVisiblePreview && scanViewport
+            ? await scanQrVideoFrameWithZxingWasm(video, canvas, scanViewport)
+            : scanQrVideoFrame(video, canvas);
+      } catch {
+        // Keep the existing scanners active when the optional WASM decoder cannot load or decode a frame.
+      }
+      if (decodedText && !stopped) {
         stopped = true;
         onScanSuccess(decodedText);
         return;
       }
     }
-    timer = window.setTimeout(scan, LIVE_QR_SCAN_INTERVAL);
+    if (!stopped) {
+      timer = window.setTimeout(scan, useVisiblePreview ? IOS_ZXING_SCAN_INTERVAL : LIVE_QR_SCAN_INTERVAL);
+    }
   };
 
   timer = window.setTimeout(scan, 0);
@@ -304,6 +418,7 @@ export function useCodeScanner({
   elementId,
   formatsToSupport,
   onScannerSizeChanged,
+  scanViewportRef,
   onScanSuccess,
   onScanFailure,
   onCameraStartFailure,
@@ -377,11 +492,11 @@ export function useCodeScanner({
         return;
       }
       if (shouldScanQrWithJsQR(formatsToSupport)) {
-        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess);
+        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess, scanViewportRef);
       }
       await enableContinuousFocus(scannerInstance);
     },
-    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess],
+    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess, scanViewportRef],
   );
 
   const startScanFile = useCallback(

package/src/components/form/ScanInput/zxingWasmDecoder.ts

@@ -0,0 +1,64 @@
+/**
+ * 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.
+ */
+
+let decoderPromise: Promise<typeof import('zxing-wasm/reader')> | undefined;
+
+async function loadDecoder() {
+  if (!decoderPromise) {
+    decoderPromise = Promise.all([import('zxing-wasm/reader'), import('zxing-wasm/reader/zxing_reader.wasm')])
+      .then(async ([decoder, { default: wasmUrl }]) => {
+        try {
+          await decoder.prepareZXingModule({
+            fireImmediately: true,
+            overrides: { locateFile: () => wasmUrl },
+          });
+        } catch (error) {
+          decoder.purgeZXingModule();
+          throw error;
+        }
+        return decoder;
+      })
+      .catch((error: unknown) => {
+        decoderPromise = undefined;
+        throw error;
+      });
+  }
+  return decoderPromise;
+}
+
+export async function decodeQrCodeWithZxingWasm(imageData: ImageData) {
+  const decoder = await loadDecoder();
+  const results = await decoder.readBarcodes(imageData, {
+    binarizer: 'GlobalHistogram',
+    downscaleThreshold: 300,
+    formats: ['QRCode'],
+    maxNumberOfSymbols: 1,
+    tryDenoise: true,
+    tryDownscale: true,
+    tryHarder: true,
+    tryInvert: true,
+    tryRotate: true,
+  });
+  if (results[0]?.text) {
+    return results[0].text;
+  }
+
+  const fallbackResults = await decoder.readBarcodes(imageData, {
+    binarizer: 'LocalAverage',
+    downscaleThreshold: 300,
+    formats: ['QRCode'],
+    maxNumberOfSymbols: 1,
+    tryDenoise: true,
+    tryDownscale: true,
+    tryHarder: true,
+    tryInvert: true,
+    tryRotate: true,
+  });
+  return fallbackResults[0]?.text;
+}

package/src/flow/admin-shell/admin-layout/__tests__/TopbarActionsBar.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, useLocation } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const { allowMock, appMock, flowModelRendererSpy } = vi.hoisted(() => {
@@ -270,28 +270,47 @@ describe('TopbarActionsBar helpers', () => {
     expect(link).not.toHaveAttribute('target', '_blank');
   });
 
-  it('should keep sub-app admin settings in the current window inside sub-app admin runtime', () => {
-    const items = getTopbarPluginSettingsItems({
-      canManagePlugins: false,
-      t: (key) => key,
-      settings: [
-        {
-          key: 'routes',
-          name: 'routes',
-          title: 'Routes',
-          path: '/admin/settings/routes',
-          icon: null,
-          componentLoader: async () => null,
-        },
-      ] as any,
-    });
-
-    renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/admin/settings/routes');
-
-    const link = screen.getByRole('link', { name: 'Routes' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/routes');
-    expect(link).not.toHaveAttribute('target', '_blank');
-  });
+  it.each(['/nocobase/v', '/v', '/nocobase/v/apps/jhb20'])(
+    'should navigate sub-app settings without document navigation with basename %s',
+    (basename) => {
+      appMock.current.router.getBasename = () => basename;
+      const items = getTopbarPluginSettingsItems({
+        canManagePlugins: false,
+        t: (key) => key,
+        settings: [
+          {
+            key: 'ai',
+            name: 'ai',
+            title: 'AI employees',
+            path: '/admin/settings/ai',
+            icon: null,
+            componentLoader: async () => null,
+          },
+        ],
+      });
+      const item = items[0];
+      if (!item || !('label' in item)) {
+        throw new Error('Expected settings menu item');
+      }
+      const appBase = basename.endsWith('/apps/jhb20') ? basename : `${basename}/apps/jhb20`;
+      const targetHref = `${appBase}/admin/settings/ai`;
+      const LocationDisplay = () => <output aria-label="Current route">{useLocation().pathname}</output>;
+      render(
+        <MemoryRouter basename={basename} initialEntries={[`${appBase}/admin/a3pq1t1773a`]}>
+          {item.label}
+          <LocationDisplay />
+        </MemoryRouter>,
+      );
+
+      const link = screen.getByRole('link', { name: 'AI employees' });
+      expect(link).toHaveAttribute('href', targetHref);
+      expect(link).not.toHaveAttribute('target', '_blank');
+      const click = new MouseEvent('click', { bubbles: true, cancelable: true, button: 0 });
+      fireEvent(link, click);
+      expect(click.defaultPrevented).toBe(true);
+      expect(screen.getByLabelText('Current route')).toHaveTextContent(targetHref.slice(basename.length));
+    },
+  );
 
   it('should not treat admin-like paths as admin runtime', () => {
     const items = getTopbarPluginSettingsItems({

package/src/flow/components/FieldAssignValueInput.tsx

@@ -71,6 +71,8 @@ interface Props {
   enableDateVariableAsConstant?: boolean;
   /** 是否允许在变量选择器中使用 RunJS。默认 true，保持历史行为。 */
   allowRunJS?: boolean;
+  /** 是否允许在变量选择器中使用内置日期变量。默认 true。 */
+  allowDateVariables?: boolean;
   maxAssociationFieldDepth?: number;
   disabled?: boolean;
   variableConverters?: VariableInputProps['converters'];
@@ -444,6 +446,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
   preferFormItemFieldModel,
   associationFieldNamesOverride,
   allowRunJS = true,
+  allowDateVariables = true,
   maxAssociationFieldDepth = 2,
   disabled = false,
   variableConverters,
@@ -972,6 +975,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       style={{ width: '100%' }}
       clearValue={''}
       allowRunJS={allowRunJS}
+      allowDateVariables={allowDateVariables}
       disabled={disabled}
       converters={variableConverters}
     />

package/src/flow/components/field-value-variable/FieldValueVariableInput.tsx

@@ -71,6 +71,7 @@ export type FieldValueVariableInputProps = Omit<
   isDateLikeField: boolean;
   dateComponentProps: DateVariableComponentProps;
   allowRunJS?: boolean;
+  allowDateVariables?: boolean;
   converters?: VariableInputProps['converters'];
 };
 
@@ -149,6 +150,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
   isDateLikeField,
   dateComponentProps,
   allowRunJS = true,
+  allowDateVariables = true,
   converters,
   clearValue = '',
   disabled = false,
@@ -168,7 +170,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
     return Component;
   }, [dateComponentProps, isDateLikeField]);
 
-  const parsedDateConfig = parseCtxDateExpressionConfig(value);
+  const parsedDateConfig = allowDateVariables ? parseCtxDateExpressionConfig(value) : undefined;
   const restoreLegacyNowForPureDate =
     dateComponentProps.exactNormalizeMode === 'date' &&
     parsedDateConfig?.kind === 'preset' &&
@@ -230,14 +232,18 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
           paths: ['null'],
           render: (props) => <NullComponent {...props} />,
         },
-        {
-          title: tExpr('Date'),
-          name: 'date',
-          type: 'date',
-          paths: ['date'],
-          selectable: false,
-          children: dateChildren,
-        },
+        ...(allowDateVariables
+          ? [
+              {
+                title: tExpr('Date'),
+                name: 'date',
+                type: 'date',
+                paths: ['date'],
+                selectable: false,
+                children: dateChildren,
+              } satisfies MetaTreeNode,
+            ]
+          : []),
         ...(allowRunJS
           ? [
               {
@@ -257,6 +263,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
     DateEditor,
     NullComponent,
     RunJSComponent,
+    allowDateVariables,
     allowRunJS,
     baseMetaTree,
     dateComponentProps.exactNormalizeMode,
@@ -294,7 +301,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
           const firstPath = meta?.paths?.[0];
           if (firstPath === 'constant') return ConstantComponent;
           if (firstPath === 'null') return NullComponent;
-          if (firstPath === 'date') return DateEditor;
+          if (allowDateVariables && firstPath === 'date') return DateEditor;
           if (allowRunJS && firstPath === 'runjs') return RunJSComponent;
           return null;
         },
@@ -304,7 +311,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
           const firstPath = item?.paths?.[0];
           if (firstPath === 'constant') return '';
           if (firstPath === 'null') return null;
-          if (firstPath === 'date') {
+          if (allowDateVariables && firstPath === 'date') {
             return createInitialDateConfig(item.paths[1], isDateLikeField, dateComponentProps);
           }
           if (allowRunJS && firstPath === 'runjs') return { code: '', version: 'v2' };
@@ -315,7 +322,9 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
           if (external !== undefined) return external;
           if (currentValue === null) return ['null'];
           if (allowRunJS && isRunJSValue(currentValue)) return ['runjs'];
-          if (isDateVariableEditConfig(currentValue)) return ['date', getDateNodeName(currentValue)];
+          if (allowDateVariables && isDateVariableEditConfig(currentValue)) {
+            return ['date', getDateNodeName(currentValue)];
+          }
           return typeof currentValue === 'string' && isVariableExpression(currentValue)
             ? parseValueToPath(currentValue)
             : ['constant'];

package/src/flow/components/field-value-variable/__tests__/FieldValueVariableInput.test.tsx

@@ -50,6 +50,7 @@ function renderInput(options?: {
   value?: unknown;
   isDateLikeField?: boolean;
   dateComponentProps?: DateVariableComponentProps;
+  allowDateVariables?: boolean;
 }) {
   const onChange = vi.fn();
   render(
@@ -62,6 +63,7 @@ function renderInput(options?: {
       runJSComponent={RunJSComponent}
       isDateLikeField={options?.isDateLikeField ?? false}
       dateComponentProps={options?.dateComponentProps ?? DEFAULT_DATE_VARIABLE_COMPONENT_PROPS}
+      allowDateVariables={options?.allowDateVariables}
     />,
   );
   return onChange;
@@ -110,6 +112,13 @@ describe('FieldValueVariableInput', () => {
     expect(tree[4].name).toBe('currentUser');
   });
 
+  it('omits the built-in Date variables when they are disabled', async () => {
+    renderInput({ isDateLikeField: true, allowDateVariables: false });
+
+    const tree = await resolveMetaTree();
+    expect(tree.map((node) => node.name)).toEqual(['constant', 'null', 'runjs', 'currentUser']);
+  });
+
   it('does not allow Now for pure date fields', async () => {
     const dateComponentProps: DateVariableComponentProps = {
       ...DEFAULT_DATE_VARIABLE_COMPONENT_PROPS,

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';
@@ -160,11 +167,15 @@ export class AssignFormItemModel extends FormItemModel {
 
   getAssignedEntry(): [string, any] | null {
     const name = this.fieldPath;
-    if (!name) return null;
+    if (!name || !this.collectionField) return null;
     return [name, this.assignValue];
   }
 
   render() {
+    if (!this.collectionField) {
+      return <FieldDeletePlaceholder />;
+    }
+
     // 与 FormItemModel.render 结构保持一致，仅替换内部渲染为 VariableInput + 常量编辑器
     const ctx: any = this.context;
     const collection = ctx.collection;
@@ -392,7 +403,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) {