@nocobase/flow-engine 2.1.0-beta.13 → 2.1.0-beta.15

package/lib/components/FlowModelRenderer.js

@@ -61,11 +61,12 @@ const FlowModelRendererWithAutoFlows = (0, import_reactive.observer)(
     showErrorFallback,
     settingsMenuLevel,
     extraToolbarItems,
-    fallback
+    fallback,
+    useCache
   }) => {
     const { loading: pending, error: autoFlowsError } = (0, import_hooks.useApplyAutoFlows)(model, inputArgs, {
       throwOnError: false,
-      useCache: model.context.useCache
+      useCache
     });
     (0, import_utils.setAutoFlowError)(model, autoFlowsError || null);
     if (pending) {
@@ -195,13 +196,15 @@ const FlowModelRenderer = (0, import_reactive.observer)(
     extraToolbarItems,
     useCache
   }) => {
+    var _a;
+    const resolvedUseCache = typeof useCache === "boolean" ? useCache : (_a = model == null ? void 0 : model.context) == null ? void 0 : _a.useCache;
     (0, import_react.useEffect)(() => {
-      if (model == null ? void 0 : model.context) {
+      if ((model == null ? void 0 : model.context) && typeof resolvedUseCache !== "undefined") {
         model.context.defineProperty("useCache", {
-          value: typeof useCache === "boolean" ? useCache : model.context.useCache
+          value: resolvedUseCache
         });
       }
-    }, [model == null ? void 0 : model.context, useCache]);
+    }, [model == null ? void 0 : model.context, resolvedUseCache]);
     if (!model || typeof model.render !== "function") {
       console.warn("FlowModelRenderer: Invalid model or render method not found.", model);
       return null;
@@ -218,7 +221,8 @@ const FlowModelRenderer = (0, import_reactive.observer)(
         showErrorFallback,
         settingsMenuLevel,
         extraToolbarItems,
-        fallback
+        fallback,
+        useCache: resolvedUseCache
       }
     );
     if (showErrorFallback) {

package/lib/components/settings/wrappers/contextual/FlowsFloatContextMenu.js

@@ -52,6 +52,13 @@ var import_reactive = require("../../../../reactive");
 var import_useFloatToolbarPortal = require("./useFloatToolbarPortal");
 var import_useFloatToolbarVisibility = require("./useFloatToolbarVisibility");
 const TOOLBAR_Z_INDEX = 999;
+const getFloatMenuInstanceId = /* @__PURE__ */ __name((model) => {
+  if (!model) {
+    return "";
+  }
+  const forkId = (model == null ? void 0 : model.isFork) ? model == null ? void 0 : model.forkId : void 0;
+  return forkId == null || forkId === "" ? String(model.uid || "") : `${String(model.uid || "")}::${String(forkId)}`;
+}, "getFloatMenuInstanceId");
 const hostContainerStyles = import_css.css`
   position: relative;
 
@@ -247,7 +254,7 @@ const detectButtonInDOM = /* @__PURE__ */ __name((container) => {
   }
   return false;
 }, "detectButtonInDOM");
-const renderToolbarItems = /* @__PURE__ */ __name((model, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel, extraToolbarItems, onSettingsMenuOpenChange, getPopupContainer) => {
+const renderToolbarItems = /* @__PURE__ */ __name((model, modelInstanceId, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel, extraToolbarItems, onSettingsMenuOpenChange, getPopupContainer) => {
   var _a, _b;
   const toolbarItems = ((_b = (_a = flowEngine == null ? void 0 : flowEngine.flowSettings) == null ? void 0 : _a.getToolbarItems) == null ? void 0 : _b.call(_a)) || [];
   const allToolbarItems = [...toolbarItems, ...extraToolbarItems || []];
@@ -262,7 +269,7 @@ const renderToolbarItems = /* @__PURE__ */ __name((model, showDeleteButton, show
         {
           key: itemConfig.key,
           model,
-          id: model.uid,
+          id: modelInstanceId,
           showDeleteButton,
           showCopyUidButton,
           menuLevels: settingsMenuLevel,
@@ -397,7 +404,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
       schedulePortalRectUpdate: /* @__PURE__ */ __name(() => {
       }, "schedulePortalRectUpdate")
     });
-    const modelUid = (model == null ? void 0 : model.uid) || "";
+    const modelUid = getFloatMenuInstanceId(model);
     const flowEngine = (0, import_provider.useFlowEngine)();
     const updatePortalRectProxy = (0, import_react.useCallback)(() => {
       portalActionsRef.current.updatePortalRect();
@@ -434,6 +441,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
     const toolbarItems = (0, import_react.useMemo)(
       () => model ? renderToolbarItems(
         model,
+        modelUid,
         showDeleteButton,
         showCopyUidButton,
         flowEngine,
@@ -495,7 +503,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         ref: toolbarContainerRef,
         className: `nb-toolbar-container ${toolbarContainerClassName}`,
         style: toolbarContainerStyle,
-        "data-model-uid": model.uid
+        "data-model-uid": modelUid
       },
       showTitle && (model.title || model.extraTitle) && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-toolbar-container-title" }, model.title && /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.title), model.extraTitle && /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.extraTitle)),
       /* @__PURE__ */ import_react.default.createElement(
@@ -528,7 +536,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         className: `${hostContainerStyles} ${hasButton ? "has-button-child" : ""} ${className || ""}`,
         style: containerStyle,
         "data-has-float-menu": "true",
-        "data-float-menu-model-uid": model.uid,
+        "data-float-menu-model-uid": modelUid,
         onMouseMove: handleChildHover,
         onMouseEnter: handleHostMouseEnter,
         onMouseLeave: handleHostMouseLeave

package/lib/data-source/index.js

@@ -461,6 +461,12 @@ const _Collection = class _Collection {
   }
   get titleCollectionField() {
     const titleFieldName = this.options.titleField || this.filterTargetKey;
+    if (Array.isArray(titleFieldName)) {
+      if (titleFieldName.length !== 1) {
+        return void 0;
+      }
+      return this.getField(titleFieldName[0]);
+    }
     const titleCollectionField = this.getField(titleFieldName);
     return titleCollectionField;
   }

package/lib/locale/en-US.json

@@ -34,6 +34,7 @@
   "Failed to destroy model after creation error": "Failed to destroy model after creation error",
   "Failed to get action {{action}}": "Failed to get action {{action}}",
   "Failed to get configurable flows for model {{model}}": "Failed to get configurable flows for model {{model}}",
+  "Attributes are unavailable before selecting a record": "Attributes are unavailable before selecting a record",
   "Failed to import FormDialog": "Failed to import FormDialog",
   "Failed to import FormDialog or FormStep": "Failed to import FormDialog or FormStep",
   "Failed to import Formily components": "Failed to import Formily components",

package/lib/locale/index.d.ts

@@ -43,6 +43,7 @@ export declare const locales: {
         "Failed to destroy model after creation error": string;
         "Failed to get action {{action}}": string;
         "Failed to get configurable flows for model {{model}}": string;
+        "Attributes are unavailable before selecting a record": string;
         "Failed to import FormDialog": string;
         "Failed to import FormDialog or FormStep": string;
         "Failed to import Formily components": string;
@@ -120,6 +121,7 @@ export declare const locales: {
         "Failed to destroy model after creation error": string;
         "Failed to get action {{action}}": string;
         "Failed to get configurable flows for model {{model}}": string;
+        "Attributes are unavailable before selecting a record": string;
         "Failed to import FormDialog": string;
         "Failed to import FormDialog or FormStep": string;
         "Failed to import Formily components": string;

package/lib/locale/zh-CN.json

@@ -31,6 +31,7 @@
   "Failed to destroy model after creation error": "创建错误后销毁模型失败",
   "Failed to get action {{action}}": "获取 action '{{action}}' 失败",
   "Failed to get configurable flows for model {{model}}": "获取模型 '{{model}}' 的可配置 flows 失败",
+  "Attributes are unavailable before selecting a record": "选择记录之前，当前项属性不可用",
   "Failed to import FormDialog": "导入 FormDialog 失败",
   "Failed to import FormDialog or FormStep": "导入 FormDialog 或 FormStep 失败",
   "Failed to import Formily components": "导入 Formily 组件失败",

package/lib/models/flowModel.d.ts

@@ -13,6 +13,7 @@ import { FlowContext, FlowModelContext, FlowRuntimeContext } from '../flowContex
 import { FlowEngine } from '../flowEngine';
 import type { ActionDefinition, ArrayElementType, CreateModelOptions, CreateSubModelOptions, DefaultStructure, FlowDefinitionOptions, FlowModelMeta, FlowModelOptions, ModelConstructor, ParamObject, ParentFlowModel, PersistOptions, ResolveUseResult, StepParams } from '../types';
 import { IModelComponentProps, ReadonlyModelProps } from '../types';
+import type { MenuProps } from 'antd';
 import { ModelActionRegistry } from '../action-registry/ModelActionRegistry';
 import { ModelEventRegistry } from '../event-registry/ModelEventRegistry';
 import { GlobalFlowRegistry } from '../flow-registry/GlobalFlowRegistry';
@@ -21,7 +22,6 @@ import { FlowSettingsOpenOptions } from '../flowSettings';
 import type { ScheduleOptions } from '../scheduler/ModelOperationScheduler';
 import type { DispatchEventOptions, EventDefinition } from '../types';
 import { ForkFlowModel } from './forkFlowModel';
-import type { MenuProps } from 'antd';
 type BaseMenuItem = NonNullable<MenuProps['items']>[number];
 type MenuLeafItem = Exclude<BaseMenuItem, {
     children: MenuProps['items'];
@@ -239,6 +239,7 @@ export declare class FlowModel<Structure extends DefaultStructure = DefaultStruc
      * 使用 lodash debounce 避免频繁调用
      */
     private _rerunLastAutoRun;
+    private resetAutoRunState;
     /**
      * 通用事件分发钩子：开始
      * 子类可覆盖；beforeRender 事件可通过抛出 FlowExitException 提前终止。

package/lib/models/flowModel.js

@@ -63,12 +63,12 @@ var import_InstanceFlowRegistry = require("../flow-registry/InstanceFlowRegistry
 var import_flowContext = require("../flowContext");
 var import_utils = require("../utils");
 var import_lib = require("antd/lib");
+var import__ = require("..");
 var import_ModelActionRegistry = require("../action-registry/ModelActionRegistry");
 var import_utils2 = require("../components/subModel/utils");
 var import_ModelEventRegistry = require("../event-registry/ModelEventRegistry");
 var import_GlobalFlowRegistry = require("../flow-registry/GlobalFlowRegistry");
 var import_forkFlowModel = require("./forkFlowModel");
-var import__ = require("..");
 var _flowContext;
 const classActionRegistries = /* @__PURE__ */ new WeakMap();
 const classEventRegistries = /* @__PURE__ */ new WeakMap();
@@ -183,10 +183,13 @@ const _FlowModel = class _FlowModel {
       if (changed.type === "set" && import_lodash.default.isEqual(changed.value, changed.oldValue)) {
         return;
       }
+      const hasLastAutoRun = !!this._lastAutoRunParams;
       if (this.flowEngine) {
         this.invalidateFlowCache("beforeRender");
       }
-      this._rerunLastAutoRun();
+      if (hasLastAutoRun) {
+        this._rerunLastAutoRun();
+      }
       this.forks.forEach((fork) => {
         fork.rerender();
       });
@@ -674,6 +677,11 @@ const _FlowModel = class _FlowModel {
     }, "isMatch");
     return Array.from(allFlows.values()).filter(isMatch);
   }
+  resetAutoRunState() {
+    var _a, _b;
+    (_b = (_a = this._rerunLastAutoRun) == null ? void 0 : _a.cancel) == null ? void 0 : _b.call(_a);
+    this._lastAutoRunParams = null;
+  }
   /**
    * 通用事件分发钩子：开始
    * 子类可覆盖；beforeRender 事件可通过抛出 FlowExitException 提前终止。
@@ -763,6 +771,7 @@ const _FlowModel = class _FlowModel {
             }));
             return () => {
               var _a3, _b3;
+              renderTarget.resetAutoRunState();
               if (typeof renderTarget.onUnmount === "function") {
                 renderTarget.onUnmount();
               }

package/lib/reactive/observer.js

@@ -51,8 +51,31 @@ const observer = /* @__PURE__ */ __name((Component, options) => {
     const ctxRef = (0, import_react.useRef)(ctx);
     ctxRef.current = ctx;
     const pendingDisposerRef = (0, import_react.useRef)(null);
+    const pendingTimerRef = (0, import_react.useRef)(null);
+    const clearPendingDisposer = /* @__PURE__ */ __name(() => {
+      if (pendingDisposerRef.current) {
+        pendingDisposerRef.current();
+        pendingDisposerRef.current = null;
+      }
+    }, "clearPendingDisposer");
+    const clearPendingTimer = /* @__PURE__ */ __name(() => {
+      if (pendingTimerRef.current) {
+        clearTimeout(pendingTimerRef.current);
+        pendingTimerRef.current = null;
+      }
+    }, "clearPendingTimer");
+    const isContextActive = /* @__PURE__ */ __name(() => {
+      var _a, _b;
+      const pageActive = getPageActive(ctxRef.current);
+      const tabActive = (_b = (_a = ctxRef.current) == null ? void 0 : _a.tabActive) == null ? void 0 : _b.value;
+      return pageActive !== false && tabActive !== false;
+    }, "isContextActive");
     (0, import_react.useEffect)(() => {
       return () => {
+        if (pendingTimerRef.current) {
+          clearTimeout(pendingTimerRef.current);
+          pendingTimerRef.current = null;
+        }
         if (pendingDisposerRef.current) {
           pendingDisposerRef.current();
           pendingDisposerRef.current = null;
@@ -62,30 +85,37 @@ const observer = /* @__PURE__ */ __name((Component, options) => {
     const ObservedComponent = (0, import_react.useMemo)(
       () => (0, import_reactive_react.observer)(Component, {
         scheduler(updater) {
-          var _a, _b;
-          const pageActive = getPageActive(ctxRef.current);
-          const tabActive = (_b = (_a = ctxRef.current) == null ? void 0 : _a.tabActive) == null ? void 0 : _b.value;
-          if (pageActive === false || tabActive === false) {
-            setTimeout(() => {
+          if (!isContextActive()) {
+            if (pendingTimerRef.current || pendingDisposerRef.current) {
+              return;
+            }
+            pendingTimerRef.current = setTimeout(() => {
+              pendingTimerRef.current = null;
               if (pendingDisposerRef.current) {
                 return;
               }
-              const disposer = (0, import_reactive.autorun)(() => {
-                var _a2, _b2, _c, _d, _e, _f;
-                if (((_b2 = (_a2 = ctxRef.current) == null ? void 0 : _a2.pageActive) == null ? void 0 : _b2.value) && (((_d = (_c = ctxRef.current) == null ? void 0 : _c.tabActive) == null ? void 0 : _d.value) === true || ((_f = (_e = ctxRef.current) == null ? void 0 : _e.tabActive) == null ? void 0 : _f.value) === void 0)) {
+              if (isContextActive()) {
+                updater();
+                return;
+              }
+              pendingDisposerRef.current = (0, import_reactive.reaction)(
+                () => isContextActive(),
+                (active) => {
+                  if (!active) {
+                    return;
+                  }
+                  clearPendingDisposer();
                   updater();
-                  disposer == null ? void 0 : disposer();
-                  pendingDisposerRef.current = null;
+                },
+                {
+                  name: "FlowObserverPendingUpdate"
                 }
-              });
-              pendingDisposerRef.current = disposer;
+              );
             });
             return;
           }
-          if (pendingDisposerRef.current) {
-            pendingDisposerRef.current();
-            pendingDisposerRef.current = null;
-          }
+          clearPendingTimer();
+          clearPendingDisposer();
           updater();
         },
         ...options

package/lib/utils/runjsValue.js

@@ -231,6 +231,34 @@ function normalizeSubPath(raw) {
   return { subPath: s, wildcard: false };
 }
 __name(normalizeSubPath, "normalizeSubPath");
+function extractCtxRootUsage(expr) {
+  const raw = String(expr || "").trim();
+  if (!raw || raw === "ctx") return null;
+  const dotMatch = raw.match(/^ctx\.([a-zA-Z_$][a-zA-Z0-9_$]*)([\s\S]*)$/);
+  if (dotMatch) {
+    const varName = dotMatch[1] || "";
+    const rest = dotMatch[2] || "";
+    const normalized = normalizeSubPath(rest);
+    return {
+      varName,
+      subPath: normalized.subPath,
+      wildcard: normalized.wildcard
+    };
+  }
+  const bracketMatch = raw.match(/^ctx\s*\[\s*(['"])([a-zA-Z_$][a-zA-Z0-9_$]*)\1\s*\]([\s\S]*)$/);
+  if (bracketMatch) {
+    const varName = bracketMatch[2] || "";
+    const rest = bracketMatch[3] || "";
+    const normalized = normalizeSubPath(rest);
+    return {
+      varName,
+      subPath: normalized.subPath,
+      wildcard: normalized.wildcard
+    };
+  }
+  return null;
+}
+__name(extractCtxRootUsage, "extractCtxRootUsage");
 function extractUsedVariablePathsFromRunJS(code) {
   if (typeof code !== "string" || !code.trim()) return {};
   const src = stripStringsAndComments(code);
@@ -242,23 +270,25 @@ function extractUsedVariablePathsFromRunJS(code) {
     set.add(subPath || "");
     usage.set(varName, set);
   }, "add");
+  const addCtxUsage = /* @__PURE__ */ __name((expr) => {
+    const hit = extractCtxRootUsage(expr);
+    if (!(hit == null ? void 0 : hit.varName)) return;
+    add(hit.varName, hit.wildcard ? "" : hit.subPath);
+  }, "addCtxUsage");
   const dotRe = /ctx\.([a-zA-Z_$][a-zA-Z0-9_$]*(?:(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)|(?:\[[^\]]+\]))*)(?!\s*\()/g;
   let match;
   while (match = dotRe.exec(src)) {
-    const pathAfterCtx = match[1] || "";
-    const firstKeyMatch = pathAfterCtx.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)/);
-    if (!firstKeyMatch) continue;
-    const firstKey = firstKeyMatch[1];
-    const rest = pathAfterCtx.slice(firstKey.length);
-    const { subPath, wildcard } = normalizeSubPath(rest);
-    add(firstKey, wildcard ? "" : subPath);
+    addCtxUsage(`ctx.${match[1] || ""}`);
   }
   const bracketRootRe = /ctx\s*\[\s*(['"])([a-zA-Z_$][a-zA-Z0-9_$]*)\1\s*\]((?:(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)|(?:\[[^\]]+\]))*)(?!\s*\()/g;
   while (match = bracketRootRe.exec(srcWithStrings)) {
-    const varName = match[2] || "";
-    const rest = match[3] || "";
-    const { subPath, wildcard } = normalizeSubPath(rest);
-    add(varName, wildcard ? "" : subPath);
+    addCtxUsage(`ctx['${match[2] || ""}']${match[3] || ""}`);
+  }
+  const getVarRe = /ctx\.getVar\s*\(\s*(['"])((?:\\.|(?!\1)[\s\S])*)\1\s*\)/g;
+  while (match = getVarRe.exec(srcWithStrings)) {
+    const expr = String(match[2] || "").replace(/\\'/g, "'").replace(/\\"/g, '"').trim();
+    if (!expr.startsWith("ctx")) continue;
+    addCtxUsage(expr);
   }
   const out = {};
   for (const [k, set] of usage.entries()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.0-beta.13",
+  "version": "2.1.0-beta.15",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.1.0-beta.13",
-    "@nocobase/shared": "2.1.0-beta.13",
+    "@nocobase/sdk": "2.1.0-beta.15",
+    "@nocobase/shared": "2.1.0-beta.15",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "691716e5f4e5f8bd3859d65bc8a29b4e3c32209b"
+  "gitHead": "dc1aceea6357e6ab149976c2a236fc4b6bee1370"
 }

package/src/components/FlowModelRenderer.tsx

@@ -127,6 +127,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
   settingsMenuLevel?: number;
   extraToolbarItems?: ToolbarItemConfig[];
   fallback?: React.ReactNode;
+  useCache?: boolean;
 }> = observer(
   ({
     model,
@@ -139,12 +140,12 @@ const FlowModelRendererWithAutoFlows: React.FC<{
     settingsMenuLevel,
     extraToolbarItems,
     fallback,
+    useCache,
   }) => {
     // hidden 占位由模型自身处理；无需在此注入
-
     const { loading: pending, error: autoFlowsError } = useApplyAutoFlows(model, inputArgs, {
       throwOnError: false,
-      useCache: model.context.useCache,
+      useCache,
     });
     // 将错误下沉到 model 实例上，供内容层读取（类型安全的 WeakMap 存储）
     setAutoFlowError(model, autoFlowsError || null);
@@ -348,13 +349,15 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
     extraToolbarItems,
     useCache,
   }) => {
+    const resolvedUseCache = typeof useCache === 'boolean' ? useCache : model?.context?.useCache;
+
     useEffect(() => {
-      if (model?.context) {
+      if (model?.context && typeof resolvedUseCache !== 'undefined') {
         model.context.defineProperty('useCache', {
-          value: typeof useCache === 'boolean' ? useCache : model.context.useCache,
+          value: resolvedUseCache,
         });
       }
-    }, [model?.context, useCache]);
+    }, [model?.context, resolvedUseCache]);
 
     if (!model || typeof model.render !== 'function') {
       // 可以选择渲染 null 或者一个错误/提示信息
@@ -375,6 +378,7 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
         settingsMenuLevel={settingsMenuLevel}
         extraToolbarItems={extraToolbarItems}
         fallback={fallback}
+        useCache={resolvedUseCache}
       />
     );
 

package/src/components/__tests__/FlowModelRenderer.test.tsx

@@ -38,9 +38,8 @@ describe('FlowModelRenderer', () => {
   test('should pass useCache to useApplyAutoFlows and set it on context', async () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={true} />);
 
-    // Check if dispatchEvent was called with useCache: true
-    // useApplyAutoFlows calls dispatchEvent('beforeRender', inputArgs, { useCache })
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -58,6 +57,7 @@ describe('FlowModelRenderer', () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={false} />);
 
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -74,6 +74,7 @@ describe('FlowModelRenderer', () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} />);
 
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -86,4 +87,44 @@ describe('FlowModelRenderer', () => {
 
     unmount();
   });
+
+  test('should clear stale beforeRender state after unmount when reusing the same model', async () => {
+    const statefulEngine = new FlowEngine();
+
+    class StatefulModel extends FlowModel {
+      render(): any {
+        return <div>Stateful Content</div>;
+      }
+    }
+
+    const statefulModel = new StatefulModel({
+      uid: 'stateful-model',
+      flowEngine: statefulEngine,
+    });
+    const executorSpy = vi.spyOn((statefulEngine as any).executor, 'dispatchEvent').mockResolvedValue([]);
+
+    const firstRender = renderWithProvider(<FlowModelRenderer model={statefulModel} />);
+    await waitFor(() => {
+      expect(executorSpy).toHaveBeenCalledTimes(1);
+    });
+
+    firstRender.unmount();
+
+    executorSpy.mockClear();
+    statefulModel.setStepParams('anyFlow', 'anyStep', { x: 1 });
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    expect(executorSpy.mock.calls.length).toBe(0);
+
+    const secondRender = renderWithProvider(<FlowModelRenderer model={statefulModel} />);
+    await waitFor(() => {
+      expect(executorSpy).toHaveBeenCalledTimes(1);
+    });
+    const [target, eventName, inputArgs, options] = executorSpy.mock.calls[0];
+    expect(target).toBe(statefulModel);
+    expect(eventName).toBe('beforeRender');
+    expect(inputArgs).toBeUndefined();
+    expect(options).toMatchObject({ useCache: true });
+
+    secondRender.unmount();
+  });
 });

package/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx

@@ -70,6 +70,15 @@ interface BaseFloatContextMenuProps {
   toolbarPosition?: ToolbarPosition;
 }
 
+const getFloatMenuInstanceId = (model?: FlowModel | null) => {
+  if (!model) {
+    return '';
+  }
+
+  const forkId = (model as any)?.isFork ? (model as any)?.forkId : undefined;
+  return forkId == null || forkId === '' ? String(model.uid || '') : `${String(model.uid || '')}::${String(forkId)}`;
+};
+
 const hostContainerStyles = css`
   position: relative;
 
@@ -279,6 +288,7 @@ const detectButtonInDOM = (container: HTMLElement): boolean => {
 // 渲染工具栏项目，并让设置菜单与工具栏共享同一个 popup 容器。
 const renderToolbarItems = (
   model: FlowModel,
+  modelInstanceId: string,
   showDeleteButton: boolean,
   showCopyUidButton: boolean,
   flowEngine: FlowEngine,
@@ -304,7 +314,7 @@ const renderToolbarItems = (
           <ItemComponent
             key={itemConfig.key}
             model={model}
-            id={model.uid}
+            id={modelInstanceId}
             showDeleteButton={showDeleteButton}
             showCopyUidButton={showCopyUidButton}
             menuLevels={settingsMenuLevel}
@@ -517,7 +527,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
       updatePortalRect: () => {},
       schedulePortalRectUpdate: () => {},
     });
-    const modelUid = model?.uid || '';
+    const modelUid = getFloatMenuInstanceId(model);
     const flowEngine = useFlowEngine();
     const updatePortalRectProxy = useCallback(() => {
       portalActionsRef.current.updatePortalRect();
@@ -559,6 +569,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         model
           ? renderToolbarItems(
               model,
+              modelUid,
               showDeleteButton,
               showCopyUidButton,
               flowEngine,
@@ -629,7 +640,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         ref={toolbarContainerRef}
         className={`nb-toolbar-container ${toolbarContainerClassName}`}
         style={toolbarContainerStyle}
-        data-model-uid={model.uid}
+        data-model-uid={modelUid}
       >
         {showTitle && (model.title || model.extraTitle) && (
           <div className="nb-toolbar-container-title">
@@ -668,7 +679,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         className={`${hostContainerStyles} ${hasButton ? 'has-button-child' : ''} ${className || ''}`}
         style={containerStyle}
         data-has-float-menu="true"
-        data-float-menu-model-uid={model.uid}
+        data-float-menu-model-uid={modelUid}
         onMouseMove={handleChildHover}
         onMouseEnter={handleHostMouseEnter}
         onMouseLeave={handleHostMouseLeave}

package/src/components/settings/wrappers/contextual/__tests__/FlowsFloatContextMenu.test.tsx

@@ -544,4 +544,66 @@ describe('FlowsFloatContextMenu', () => {
       expect(parentOverlayAfterRestore?.className).toContain('nb-toolbar-visible');
     });
   });
+
+  it('treats forked models as distinct float menu instances even when they share the same uid', async () => {
+    const engine = new FlowEngine();
+    engine.flowSettings.forceEnable();
+    const masterModel = new FlowModel({ uid: 'forked-model', flowEngine: engine });
+    masterModel.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
+    masterModel.render = vi.fn(function (this: any) {
+      return <div data-testid={`content-${String(this.forkId || this.uid)}`}>{String(this.forkId || this.uid)}</div>;
+    });
+
+    const firstFork = masterModel.createFork({}, 'card-1') as FlowModel & { forkId?: string };
+    const secondFork = masterModel.createFork({}, 'card-2') as FlowModel & { forkId?: string };
+    const firstInstanceId = `forked-model::${String((firstFork as any).forkId)}`;
+    const secondInstanceId = `forked-model::${String((secondFork as any).forkId)}`;
+    const appContainer = createAppContainer();
+    mockRect(appContainer, { top: 0, left: 0, width: 1280, height: 900 });
+
+    const { getByTestId } = renderWithProviders(
+      engine,
+      <>
+        <FlowsFloatContextMenu model={firstFork}>
+          <div data-testid="fork-host-1">first</div>
+        </FlowsFloatContextMenu>
+        <FlowsFloatContextMenu model={secondFork}>
+          <div data-testid="fork-host-2">second</div>
+        </FlowsFloatContextMenu>
+      </>,
+      { container: appContainer },
+    );
+
+    const firstHost = getHost(getByTestId('fork-host-1'));
+    const secondHost = getHost(getByTestId('fork-host-2'));
+    mockRect(firstHost, { top: 20, left: 20, width: 180, height: 72 });
+    mockRect(secondHost, { top: 120, left: 20, width: 180, height: 72 });
+
+    fireEvent.mouseEnter(firstHost);
+
+    const firstOverlay = await waitFor(() => {
+      const nextOverlay = queryOverlay(appContainer, firstInstanceId);
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(within(firstOverlay).getByLabelText('flows-settings')).toBeTruthy();
+    });
+
+    fireEvent.mouseEnter(secondHost);
+
+    const secondOverlay = await waitFor(() => {
+      const nextOverlay = queryOverlay(appContainer, secondInstanceId);
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(within(secondOverlay).getByLabelText('flows-settings')).toBeTruthy();
+    });
+
+    expect(firstOverlay.getAttribute('data-model-uid')).toBe(firstInstanceId);
+    expect(secondOverlay.getAttribute('data-model-uid')).toBe(secondInstanceId);
+  });
 });

package/src/data-source/index.ts

@@ -501,6 +501,12 @@ export class Collection {
 
   get titleCollectionField() {
     const titleFieldName = this.options.titleField || this.filterTargetKey;
+    if (Array.isArray(titleFieldName)) {
+      if (titleFieldName.length !== 1) {
+        return undefined;
+      }
+      return this.getField(titleFieldName[0]);
+    }
     const titleCollectionField = this.getField(titleFieldName);
     return titleCollectionField;
   }

package/src/locale/en-US.json

@@ -34,6 +34,7 @@
   "Failed to destroy model after creation error": "Failed to destroy model after creation error",
   "Failed to get action {{action}}": "Failed to get action {{action}}",
   "Failed to get configurable flows for model {{model}}": "Failed to get configurable flows for model {{model}}",
+  "Attributes are unavailable before selecting a record": "Attributes are unavailable before selecting a record",
   "Failed to import FormDialog": "Failed to import FormDialog",
   "Failed to import FormDialog or FormStep": "Failed to import FormDialog or FormStep",
   "Failed to import Formily components": "Failed to import Formily components",

package/src/locale/zh-CN.json

@@ -31,6 +31,7 @@
   "Failed to destroy model after creation error": "创建错误后销毁模型失败",
   "Failed to get action {{action}}": "获取 action '{{action}}' 失败",
   "Failed to get configurable flows for model {{model}}": "获取模型 '{{model}}' 的可配置 flows 失败",
+  "Attributes are unavailable before selecting a record": "选择记录之前，当前项属性不可用",
   "Failed to import FormDialog": "导入 FormDialog 失败",
   "Failed to import FormDialog or FormStep": "导入 FormDialog 或 FormStep 失败",
   "Failed to import Formily components": "导入 Formily 组件失败",

package/src/models/flowModel.tsx

@@ -36,7 +36,9 @@ import type {
 import { IModelComponentProps, ReadonlyModelProps } from '../types';
 import { isInheritedFrom, setupRuntimeContextSteps } from '../utils';
 // import { FlowExitAllException } from '../utils/exceptions';
+import type { MenuProps } from 'antd';
 import { Typography } from 'antd/lib';
+import { observer } from '..';
 import { ModelActionRegistry } from '../action-registry/ModelActionRegistry';
 import { buildSubModelItem } from '../components/subModel/utils';
 import { ModelEventRegistry } from '../event-registry/ModelEventRegistry';
@@ -46,8 +48,6 @@ import { FlowSettingsOpenOptions } from '../flowSettings';
 import type { ScheduleOptions } from '../scheduler/ModelOperationScheduler';
 import type { DispatchEventOptions, EventDefinition } from '../types';
 import { ForkFlowModel } from './forkFlowModel';
-import type { MenuProps } from 'antd';
-import { observer } from '..';
 
 // 使用 WeakMap 为每个类缓存一个 ModelActionRegistry 实例
 const classActionRegistries = new WeakMap<typeof FlowModel, ModelActionRegistry>();
@@ -208,11 +208,14 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
       if (changed.type === 'set' && _.isEqual(changed.value, changed.oldValue)) {
         return;
       }
+      const hasLastAutoRun = !!this._lastAutoRunParams;
 
       if (this.flowEngine) {
         this.invalidateFlowCache('beforeRender');
       }
-      this._rerunLastAutoRun();
+      if (hasLastAutoRun) {
+        this._rerunLastAutoRun();
+      }
       this.forks.forEach((fork) => {
         fork.rerender();
       });
@@ -858,6 +861,11 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     }
   }, 100);
 
+  private resetAutoRunState(): void {
+    this._rerunLastAutoRun?.cancel?.();
+    this._lastAutoRunParams = null;
+  }
+
   /**
    * 通用事件分发钩子：开始
    * 子类可覆盖；beforeRender 事件可通过抛出 FlowExitException 提前终止。
@@ -951,7 +959,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
       }
 
       // 创建缓存的响应式包装器组件工厂（只创建一次）
-      const createReactiveWrapper = (modelInstance: any) => {
+      const createReactiveWrapper = (modelInstance: FlowModel) => {
         const ReactiveWrapper = observer(() => {
           // 触发响应式更新的关键属性访问（读取 run/渲染目标的 props）
           const renderTarget = modelInstance;
@@ -977,6 +985,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
               model: renderTarget,
             });
             return () => {
+              renderTarget.resetAutoRunState();
               if (typeof renderTarget.onUnmount === 'function') {
                 renderTarget.onUnmount();
               }

package/src/reactive/__tests__/observer.test.tsx

@@ -208,4 +208,86 @@ describe('observer', () => {
     expect(screen.getByText('Count: 0')).toBeInTheDocument();
     expect(screen.queryByText('Count: 1')).not.toBeInTheDocument();
   });
+
+  it('should flush pending update without TDZ error when context becomes active before timer callback runs', async () => {
+    vi.useFakeTimers();
+
+    try {
+      const model = observable({ count: 0 });
+      const pageActive = observable.ref(false);
+      const tabActive = observable.ref(true);
+
+      const context = {
+        pageActive,
+        tabActive,
+      };
+
+      (useFlowContext as any).mockReturnValue(context);
+
+      const Component = observer(() => <div>Count: {model.count}</div>);
+
+      render(<Component />);
+
+      expect(screen.getByText('Count: 0')).toBeInTheDocument();
+
+      act(() => {
+        model.count++;
+        pageActive.value = true;
+      });
+
+      await act(async () => {
+        await vi.runAllTimersAsync();
+      });
+
+      expect(screen.getByText('Count: 1')).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('should cleanup pending timer and listener on unmount', async () => {
+    vi.useFakeTimers();
+
+    try {
+      const model = observable({ count: 0 });
+      const pageActive = observable.ref(false);
+      const tabActive = observable.ref(true);
+      const renderSpy = vi.fn();
+
+      const context = {
+        pageActive,
+        tabActive,
+      };
+
+      (useFlowContext as any).mockReturnValue(context);
+
+      const Component = observer(() => {
+        renderSpy(model.count);
+        return <div>Count: {model.count}</div>;
+      });
+
+      const { unmount } = render(<Component />);
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('Count: 0')).toBeInTheDocument();
+
+      act(() => {
+        model.count++;
+      });
+
+      unmount();
+
+      act(() => {
+        pageActive.value = true;
+      });
+
+      await act(async () => {
+        await vi.runAllTimersAsync();
+      });
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });

package/src/reactive/observer.tsx

@@ -10,7 +10,7 @@
 import { observer as originalObserver, IObserverOptions, ReactFC } from '@formily/reactive-react';
 import React, { useMemo, useEffect, useRef } from 'react';
 import { useFlowContext } from '../FlowContextProvider';
-import { autorun } from '@formily/reactive';
+import { reaction } from '@formily/reactive';
 import { FlowEngineContext } from '..';
 
 type ObserverComponentProps<P, Options extends IObserverOptions> = Options extends {
@@ -30,12 +30,67 @@ export const observer = <P, Options extends IObserverOptions = IObserverOptions>
     const ctxRef = useRef(ctx);
     ctxRef.current = ctx;
 
-    // Store the pending disposer to avoid creating multiple listeners
+    // 保存延迟更新的监听器，避免重复创建监听。
     const pendingDisposerRef = useRef<(() => void) | null>(null);
+    // 保存延迟创建监听器的定时器，避免组件卸载后仍继续调度。
+    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-    // Cleanup on unmount
+    /**
+     * 清理挂起的可见性监听器。
+     *
+     * @example
+     * ```typescript
+     * clearPendingDisposer();
+     * ```
+     */
+    const clearPendingDisposer = () => {
+      if (pendingDisposerRef.current) {
+        pendingDisposerRef.current();
+        pendingDisposerRef.current = null;
+      }
+    };
+
+    /**
+     * 清理挂起的定时器。
+     *
+     * @example
+     * ```typescript
+     * clearPendingTimer();
+     * ```
+     */
+    const clearPendingTimer = () => {
+      if (pendingTimerRef.current) {
+        clearTimeout(pendingTimerRef.current);
+        pendingTimerRef.current = null;
+      }
+    };
+
+    /**
+     * 判断当前页面与标签页是否允许立即更新。
+     *
+     * @returns 当前上下文是否处于可更新状态。
+     * @example
+     * ```typescript
+     * if (isContextActive()) {
+     *   updater();
+     * }
+     * ```
+     */
+    const isContextActive = () => {
+      const pageActive = getPageActive(ctxRef.current);
+      const tabActive = ctxRef.current?.tabActive?.value;
+
+      return pageActive !== false && tabActive !== false;
+    };
+
+    // 组件卸载时统一清理所有挂起任务，避免异步回调在卸载后继续运行。
     useEffect(() => {
       return () => {
+        if (pendingTimerRef.current) {
+          clearTimeout(pendingTimerRef.current);
+          pendingTimerRef.current = null;
+        }
+
         if (pendingDisposerRef.current) {
           pendingDisposerRef.current();
           pendingDisposerRef.current = null;
@@ -47,38 +102,45 @@ export const observer = <P, Options extends IObserverOptions = IObserverOptions>
       () =>
         originalObserver(Component, {
           scheduler(updater) {
-            const pageActive = getPageActive(ctxRef.current);
-            const tabActive = ctxRef.current?.tabActive?.value;
+            if (!isContextActive()) {
+              if (pendingTimerRef.current || pendingDisposerRef.current) {
+                return;
+              }
+
+              // 通过异步任务打断同步调度，避免连续触发时形成递归更新。
+              pendingTimerRef.current = setTimeout(() => {
+                pendingTimerRef.current = null;
 
-            if (pageActive === false || tabActive === false) {
-              // Avoid stack overflow
-              setTimeout(() => {
-                // If there is already a pending updater, do nothing
                 if (pendingDisposerRef.current) {
                   return;
                 }
 
-                // Delay the update until the page and tab become active
-                const disposer = autorun(() => {
-                  if (
-                    ctxRef.current?.pageActive?.value &&
-                    (ctxRef.current?.tabActive?.value === true || ctxRef.current?.tabActive?.value === undefined)
-                  ) {
+                if (isContextActive()) {
+                  updater();
+                  return;
+                }
+
+                // 只监听组合后的“是否可更新”状态，条件恢复后执行一次并立即销毁。
+                pendingDisposerRef.current = reaction(
+                  () => isContextActive(),
+                  (active) => {
+                    if (!active) {
+                      return;
+                    }
+
+                    clearPendingDisposer();
                     updater();
-                    disposer?.();
-                    pendingDisposerRef.current = null;
-                  }
-                });
-                pendingDisposerRef.current = disposer;
+                  },
+                  {
+                    name: 'FlowObserverPendingUpdate',
+                  },
+                );
               });
               return;
             }
 
-            // If we are updating immediately, clear any pending disposer
-            if (pendingDisposerRef.current) {
-              pendingDisposerRef.current();
-              pendingDisposerRef.current = null;
-            }
+            clearPendingTimer();
+            clearPendingDisposer();
 
             updater();
           },

package/src/utils/__tests__/runjsValue.test.ts

@@ -41,4 +41,15 @@ describe('runjsValue utils', () => {
     expect(out.someVar).toContain('');
     expect(out.user).toContain('name');
   });
+
+  it('extractUsedVariablePathsFromRunJS: extracts ctx.getVar string paths', () => {
+    const code = `
+      const phone = await ctx.getVar('ctx.item.value.phone');
+      const assignee = await ctx.getVar("ctx.user.profile.name");
+      return [phone, assignee];
+    `;
+    const out = extractUsedVariablePathsFromRunJS(code);
+    expect(out.item).toContain('value.phone');
+    expect(out.user).toContain('profile.name');
+  });
 });

package/src/utils/runjsValue.ts

@@ -236,6 +236,37 @@ function normalizeSubPath(raw: string): { subPath: string; wildcard: boolean } {
   return { subPath: s, wildcard: false };
 }
 
+function extractCtxRootUsage(expr: string): { varName: string; subPath: string; wildcard: boolean } | null {
+  const raw = String(expr || '').trim();
+  if (!raw || raw === 'ctx') return null;
+
+  const dotMatch = raw.match(/^ctx\.([a-zA-Z_$][a-zA-Z0-9_$]*)([\s\S]*)$/);
+  if (dotMatch) {
+    const varName = dotMatch[1] || '';
+    const rest = dotMatch[2] || '';
+    const normalized = normalizeSubPath(rest);
+    return {
+      varName,
+      subPath: normalized.subPath,
+      wildcard: normalized.wildcard,
+    };
+  }
+
+  const bracketMatch = raw.match(/^ctx\s*\[\s*(['"])([a-zA-Z_$][a-zA-Z0-9_$]*)\1\s*\]([\s\S]*)$/);
+  if (bracketMatch) {
+    const varName = bracketMatch[2] || '';
+    const rest = bracketMatch[3] || '';
+    const normalized = normalizeSubPath(rest);
+    return {
+      varName,
+      subPath: normalized.subPath,
+      wildcard: normalized.wildcard,
+    };
+  }
+
+  return null;
+}
+
 /**
  * Heuristic extraction of ctx variable usage from RunJS code.
  *
@@ -256,27 +287,35 @@ export function extractUsedVariablePathsFromRunJS(code: string): Record<string,
     usage.set(varName, set);
   };
 
+  const addCtxUsage = (expr: string) => {
+    const hit = extractCtxRootUsage(expr);
+    if (!hit?.varName) return;
+    add(hit.varName, hit.wildcard ? '' : hit.subPath);
+  };
+
   // dot form: ctx.foo.bar / ctx.foo[0].bar (excluding ctx.method(...))
   const dotRe = /ctx\.([a-zA-Z_$][a-zA-Z0-9_$]*(?:(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)|(?:\[[^\]]+\]))*)(?!\s*\()/g;
   let match: RegExpExecArray | null;
   while ((match = dotRe.exec(src))) {
-    const pathAfterCtx = match[1] || '';
-    const firstKeyMatch = pathAfterCtx.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)/);
-    if (!firstKeyMatch) continue;
-    const firstKey = firstKeyMatch[1];
-    const rest = pathAfterCtx.slice(firstKey.length);
-    const { subPath, wildcard } = normalizeSubPath(rest);
-    add(firstKey, wildcard ? '' : subPath);
+    addCtxUsage(`ctx.${match[1] || ''}`);
   }
 
   // bracket root: ctx['foo'].bar / ctx["foo"][0] (excluding ctx['method'](...))
   const bracketRootRe =
     /ctx\s*\[\s*(['"])([a-zA-Z_$][a-zA-Z0-9_$]*)\1\s*\]((?:(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)|(?:\[[^\]]+\]))*)(?!\s*\()/g;
   while ((match = bracketRootRe.exec(srcWithStrings))) {
-    const varName = match[2] || '';
-    const rest = match[3] || '';
-    const { subPath, wildcard } = normalizeSubPath(rest);
-    add(varName, wildcard ? '' : subPath);
+    addCtxUsage(`ctx['${match[2] || ''}']${match[3] || ''}`);
+  }
+
+  // async-safe helper form: await ctx.getVar('ctx.foo.bar')
+  const getVarRe = /ctx\.getVar\s*\(\s*(['"])((?:\\.|(?!\1)[\s\S])*)\1\s*\)/g;
+  while ((match = getVarRe.exec(srcWithStrings))) {
+    const expr = String(match[2] || '')
+      .replace(/\\'/g, "'")
+      .replace(/\\"/g, '"')
+      .trim();
+    if (!expr.startsWith('ctx')) continue;
+    addCtxUsage(expr);
   }
 
   const out: Record<string, string[]> = {};