@nocobase/flow-engine 2.1.0-alpha.3 → 2.1.0-alpha.30

package/lib/lazy-helper.js

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var lazy_helper_exports = {};
+__export(lazy_helper_exports, {
+  lazy: () => lazy
+});
+module.exports = __toCommonJS(lazy_helper_exports);
+var import_react = __toESM(require("react"));
+function lazy(factory, ...componentNames) {
+  if (componentNames.length === 0) {
+    const LazyComponent = (0, import_react.lazy)(
+      () => factory().then((module2) => ({
+        default: module2.default
+      }))
+    );
+    const Component = /* @__PURE__ */ __name((props) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Suspense, { fallback: null }, /* @__PURE__ */ import_react.default.createElement(LazyComponent, { ...props })), "Component");
+    return Component;
+  }
+  return componentNames.reduce(
+    (acc, name) => {
+      const LazyComponent = (0, import_react.lazy)(
+        () => factory().then((module2) => ({
+          default: module2[name]
+        }))
+      );
+      acc[name] = (props) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Suspense, { fallback: null }, /* @__PURE__ */ import_react.default.createElement(LazyComponent, { ...props }));
+      return acc;
+    },
+    {}
+  );
+}
+__name(lazy, "lazy");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  lazy
+});

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/DisplayItemModel.d.ts

@@ -6,7 +6,7 @@
  * 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 { DefaultStructure } from '@nocobase/flow-engine';
+import type { DefaultStructure } from '../types';
 import { CollectionFieldModel } from './CollectionFieldModel';
 export declare class DisplayItemModel<T extends DefaultStructure = DefaultStructure> extends CollectionFieldModel<T> {
 }

package/lib/models/EditableItemModel.d.ts

@@ -6,7 +6,7 @@
  * 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 { DefaultStructure } from '@nocobase/flow-engine';
+import type { DefaultStructure } from '../types';
 import { CollectionFieldModel } from './CollectionFieldModel';
 export declare class EditableItemModel<T extends DefaultStructure = DefaultStructure> extends CollectionFieldModel<T> {
 }

package/lib/models/FilterableItemModel.d.ts

@@ -6,7 +6,7 @@
  * 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 { DefaultStructure } from '@nocobase/flow-engine';
+import type { DefaultStructure } from '../types';
 import { CollectionFieldModel } from './CollectionFieldModel';
 export declare class FilterableItemModel<T extends DefaultStructure = DefaultStructure> extends CollectionFieldModel<T> {
 }

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,19 +22,20 @@ 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'];
-}>;
-export type FlowModelExtraMenuItem = Omit<MenuLeafItem, 'key'> & {
+type MenuBaseItem = Omit<Exclude<BaseMenuItem, null>, 'key' | 'children'>;
+export type FlowModelExtraMenuItem = MenuBaseItem & {
     key: React.Key;
     group?: string;
     sort?: number;
+    label?: React.ReactNode;
+    disabled?: boolean;
     onClick?: () => void;
+    children?: FlowModelExtraMenuItem[];
 };
-type FlowModelExtraMenuItemInput = Omit<FlowModelExtraMenuItem, 'key'> & {
+type FlowModelExtraMenuItemInput = Omit<FlowModelExtraMenuItem, 'key' | 'children'> & {
     key?: React.Key;
+    children?: FlowModelExtraMenuItemInput[];
 };
 type ExtraMenuItemEntry = {
     group?: string;
@@ -239,6 +241,7 @@ export declare class FlowModel<Structure extends DefaultStructure = DefaultStruc
      * 使用 lodash debounce 避免频繁调用
      */
     private _rerunLastAutoRun;
+    private resetAutoRunState;
     /**
      * 通用事件分发钩子：开始
      * 子类可覆盖；beforeRender 事件可通过抛出 FlowExitException 提前终止。
@@ -297,10 +300,10 @@ export declare class FlowModel<Structure extends DefaultStructure = DefaultStruc
     removeParentDelegate(): void;
     addSubModel<T extends FlowModel>(subKey: string, options: CreateModelOptions | T): T;
     setSubModel(subKey: string, options: CreateModelOptions | FlowModel): FlowModel<DefaultStructure>;
-    filterSubModels<K extends keyof Structure['subModels'], R>(subKey: K, callback: (model: ArrayElementType<Structure['subModels'][K]>, index: number) => boolean): ArrayElementType<Structure['subModels'][K]>[];
-    mapSubModels<K extends keyof Structure['subModels'], R>(subKey: K, callback: (model: ArrayElementType<Structure['subModels'][K]>, index: number) => R): R[];
-    hasSubModel<K extends keyof Structure['subModels']>(subKey: K): boolean;
-    findSubModel<K extends keyof Structure['subModels'], R>(subKey: K, callback: (model: ArrayElementType<Structure['subModels'][K]>) => R): ArrayElementType<Structure['subModels'][K]> | null;
+    filterSubModels<K extends keyof NonNullable<Structure['subModels']>, R>(subKey: K, callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>, index: number) => boolean): ArrayElementType<NonNullable<Structure['subModels']>[K]>[];
+    mapSubModels<K extends keyof NonNullable<Structure['subModels']>, R>(subKey: K, callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>, index: number) => R): R[];
+    hasSubModel<K extends keyof NonNullable<Structure['subModels']>>(subKey: K): boolean;
+    findSubModel<K extends keyof NonNullable<Structure['subModels']>, R>(subKey: K, callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>) => R): ArrayElementType<NonNullable<Structure['subModels']>[K]> | null;
     createRootModel(options: any): FlowModel<DefaultStructure>;
     /**
      * 对指定子模型派发 beforeRender 事件（顺序执行并使用缓存）。

package/lib/models/flowModel.js

@@ -56,25 +56,68 @@ var import_reactive = require("@formily/reactive");
 var import_lodash = __toESM(require("lodash"));
 var import_react = __toESM(require("react"));
 var import_secure = require("uid/secure");
-var import_StepRequiredSettingsDialog = require("../components/settings/wrappers/contextual/StepRequiredSettingsDialog");
-var import_StepSettingsDialog = require("../components/settings/wrappers/contextual/StepSettingsDialog");
 var import_emitter = require("../emitter");
 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_antd = require("antd");
+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();
 const modelMetas = /* @__PURE__ */ new WeakMap();
 const modelGlobalRegistries = /* @__PURE__ */ new WeakMap();
 const classMenuExtensions = /* @__PURE__ */ new WeakMap();
+const sortExtraMenuItems = /* @__PURE__ */ __name((items) => {
+  return [...items].sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
+}, "sortExtraMenuItems");
+const isFlowModelExtraMenuItem = /* @__PURE__ */ __name((item) => {
+  return item !== null;
+}, "isFlowModelExtraMenuItem");
+const normalizeExtraMenuItem = /* @__PURE__ */ __name((item, {
+  group,
+  sort,
+  prefix,
+  path
+}) => {
+  if (!item) {
+    return null;
+  }
+  const normalizedGroup = item.group || group;
+  const normalizedSort = typeof item.sort === "number" ? item.sort : sort;
+  const normalizedChildren = sortExtraMenuItems(
+    (item.children || []).map(
+      (child, index) => normalizeExtraMenuItem(child, {
+        group: normalizedGroup,
+        sort: normalizedSort,
+        prefix,
+        path: `${path}-${index}`
+      })
+    ).filter(isFlowModelExtraMenuItem)
+  );
+  return {
+    ...item,
+    key: item.key ?? `${prefix}-${normalizedGroup}-${path}`,
+    group: normalizedGroup,
+    sort: normalizedSort,
+    children: normalizedChildren.length ? normalizedChildren : void 0
+  };
+}, "normalizeExtraMenuItem");
+async function loadOpenStepSettingsDialog() {
+  const mod = await import("../components/settings/wrappers/contextual/StepSettingsDialog");
+  return mod.openStepSettingsDialog;
+}
+__name(loadOpenStepSettingsDialog, "loadOpenStepSettingsDialog");
+async function loadOpenRequiredParamsStepFormDialog() {
+  const mod = await import("../components/settings/wrappers/contextual/StepRequiredSettingsDialog");
+  return mod.openRequiredParamsStepFormDialog;
+}
+__name(loadOpenRequiredParamsStepFormDialog, "loadOpenRequiredParamsStepFormDialog");
 var ModelRenderMode = /* @__PURE__ */ ((ModelRenderMode2) => {
   ModelRenderMode2["ReactElement"] = "reactElement";
   ModelRenderMode2["RenderFunction"] = "renderFunction";
@@ -183,10 +226,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();
       });
@@ -576,6 +622,7 @@ const _FlowModel = class _FlowModel {
     } else {
       this.props = { ...this.props, ...props };
     }
+    this._options.props = { ...this.props };
   }
   getProps() {
     return this.props;
@@ -674,6 +721,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 +815,7 @@ const _FlowModel = class _FlowModel {
             }));
             return () => {
               var _a3, _b3;
+              renderTarget.resetAutoRunState();
               if (typeof renderTarget.onUnmount === "function") {
                 renderTarget.onUnmount();
               }
@@ -1058,7 +1111,7 @@ const _FlowModel = class _FlowModel {
    * @param {string} stepKey 步骤的唯一标识符
    * @returns {void}
    */
-  openStepSettingsDialog(flowKey, stepKey) {
+  async openStepSettingsDialog(flowKey, stepKey) {
     var _a;
     const flow = this.getFlow(flowKey);
     const step = (_a = flow == null ? void 0 : flow.steps) == null ? void 0 : _a[stepKey];
@@ -1069,7 +1122,8 @@ const _FlowModel = class _FlowModel {
     const ctx = new import_flowContext.FlowRuntimeContext(this, flowKey, "settings");
     (0, import_utils.setupRuntimeContextSteps)(ctx, flow.steps, this, flowKey);
     ctx.defineProperty("currentStep", { value: step });
-    return (0, import_StepSettingsDialog.openStepSettingsDialog)({
+    const openStepSettingsDialog = await loadOpenStepSettingsDialog();
+    return openStepSettingsDialog({
       model: this,
       flowKey,
       stepKey,
@@ -1084,7 +1138,8 @@ const _FlowModel = class _FlowModel {
    * @returns {Promise<any>} 返回表单提交的值
    */
   async configureRequiredSteps(dialogWidth, dialogTitle) {
-    return (0, import_StepRequiredSettingsDialog.openRequiredParamsStepFormDialog)({
+    const openRequiredParamsStepFormDialog = await loadOpenRequiredParamsStepFormDialog();
+    return openRequiredParamsStepFormDialog({
       model: this,
       dialogWidth,
       dialogTitle
@@ -1109,6 +1164,7 @@ const _FlowModel = class _FlowModel {
     const data = {
       uid: this.uid,
       ...import_lodash.default.omit(this._options, ["flowEngine"]),
+      props: { ...this.props },
       stepParams: this.stepParams,
       sortIndex: this.sortIndex,
       flowRegistry: {}
@@ -1221,22 +1277,26 @@ const _FlowModel = class _FlowModel {
       seen.add(Cls);
       const reg = classMenuExtensions.get(Cls);
       if (reg) {
+        let entryIndex = 0;
         for (const entry of reg) {
           if (entry.matcher && !entry.matcher(model)) continue;
           const items = typeof entry.items === "function" ? await entry.items(model, t) : await Promise.resolve(entry.items || []);
           const group = entry.group || "common-actions";
           const sort = entry.sort ?? 0;
           const prefix = entry.keyPrefix || Cls.name || "extra";
-          (items || []).forEach((it, idx) => {
-            if (!it) return;
-            const key = it.key ?? `${prefix}-${group}-${idx}-${Math.random().toString(36).slice(2, 6)}`;
-            collected.push({
-              ...it,
-              key,
-              group: it.group || group,
-              sort: typeof it.sort === "number" ? it.sort : sort
-            });
+          sortExtraMenuItems(
+            (items || []).map(
+              (it, idx) => normalizeExtraMenuItem(it, {
+                group,
+                sort,
+                prefix,
+                path: `${entryIndex}-${idx}`
+              })
+            ).filter(isFlowModelExtraMenuItem)
+          ).forEach((it) => {
+            collected.push(it);
           });
+          entryIndex += 1;
         }
       }
       const ParentClass = Object.getPrototypeOf(Cls);
@@ -1303,7 +1363,7 @@ const _ErrorFlowModel = class _ErrorFlowModel extends FlowModel {
     this.errorMessage = msg;
   }
   render() {
-    return /* @__PURE__ */ import_react.default.createElement(import_lib.Typography.Text, { type: "danger" }, this.errorMessage);
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Typography.Text, { type: "danger" }, this.errorMessage);
   }
 };
 __name(_ErrorFlowModel, "ErrorFlowModel");

package/lib/provider.js

@@ -67,31 +67,46 @@ const FlowEngineGlobalsContextProvider = /* @__PURE__ */ __name(({ children }) =
   const engine = useFlowEngine();
   const config = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
   const { token } = import_antd.theme.useToken();
-  (0, import_react.useEffect)(() => {
-    const context = {
-      antdConfig: config,
-      // themeToken 改为可观察的 getter，在下方单独 define
-      modal,
-      message,
-      notification
-    };
-    engine.context.defineProperty("viewer", {
-      cache: false,
-      get: /* @__PURE__ */ __name((ctx) => new import_FlowView.FlowViewer(ctx, { drawer, embed, popover, dialog }), "get")
-    });
-    for (const item of Object.entries(context)) {
-      const [key, value] = item;
-      if (value) {
-        engine.context.defineProperty(key, { value });
-      }
+  const isDarkTheme = import_react.default.useMemo(() => {
+    var _a2;
+    const algorithm = (_a2 = config == null ? void 0 : config.theme) == null ? void 0 : _a2.algorithm;
+    if (Array.isArray(algorithm)) {
+      return algorithm.includes(import_antd.theme.darkAlgorithm);
+    }
+    return algorithm === import_antd.theme.darkAlgorithm;
+  }, [config]);
+  engine.context.defineProperty("viewer", {
+    cache: false,
+    get: /* @__PURE__ */ __name((ctx) => new import_FlowView.FlowViewer(ctx, { drawer, embed, popover, dialog }), "get")
+  });
+  for (const item of Object.entries({
+    antdConfig: config,
+    modal,
+    message,
+    notification
+  })) {
+    const [key, value] = item;
+    if (value) {
+      engine.context.defineProperty(key, { value });
     }
-    engine.context.defineProperty("themeToken", {
-      get: /* @__PURE__ */ __name(() => token, "get"),
-      observable: true,
-      cache: true
-    });
+  }
+  engine.context.defineProperty("themeToken", {
+    get: /* @__PURE__ */ __name(() => token, "get"),
+    observable: true,
+    cache: true
+  });
+  engine.context.defineProperty("isDarkTheme", {
+    get: /* @__PURE__ */ __name(() => isDarkTheme, "get"),
+    observable: true,
+    cache: true,
+    info: {
+      description: "Whether current theme algorithm is dark mode.",
+      detail: "boolean"
+    }
+  });
+  (0, import_react.useEffect)(() => {
     engine.reactView.refresh();
-  }, [engine, drawer, modal, message, notification, config, popover, token, dialog, embed]);
+  }, [engine, drawer, modal, message, notification, config, popover, token, dialog, embed, isDarkTheme]);
   return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { ...config, locale: (_a = engine.context.locales) == null ? void 0 : _a.antd, popupMatchSelectWidth: false }, children, contextHolder, popoverContextHolder, pageContextHolder, dialogContextHolder);
 }, "FlowEngineGlobalsContextProvider");
 const useFlowEngine = /* @__PURE__ */ __name(({ throwError = true } = {}) => {

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/runjs-context/registry.d.ts

@@ -6,7 +6,7 @@
  * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
-export type RunJSVersion = 'v1' | (string & {});
+export type RunJSVersion = 'v1' | 'v2' | (string & {});
 export type RunJSContextCtor = new (delegate: any) => any;
 export type RunJSContextMeta = {
     scenes?: string[];

package/lib/runjs-context/setup.js

@@ -67,19 +67,27 @@ async function setupRunJSContexts() {
     import("./contexts/JSRecordActionRunJSContext"),
     import("./contexts/JSCollectionActionRunJSContext")
   ]);
-  const v1 = "v1";
-  import_registry.RunJSContextRegistry.register(v1, "*", import_flowContext.FlowRunJSContext);
-  import_registry.RunJSContextRegistry.register(v1, "JSBlockModel", JSBlockRunJSContext, { scenes: ["block"] });
-  import_registry.RunJSContextRegistry.register(v1, "JSFieldModel", JSFieldRunJSContext, { scenes: ["detail"] });
-  import_registry.RunJSContextRegistry.register(v1, "JSEditableFieldModel", JSEditableFieldRunJSContext, { scenes: ["form"] });
-  import_registry.RunJSContextRegistry.register(v1, "JSItemModel", JSItemRunJSContext, { scenes: ["form"] });
-  import_registry.RunJSContextRegistry.register(v1, "JSColumnModel", JSColumnRunJSContext, { scenes: ["table"] });
-  import_registry.RunJSContextRegistry.register(v1, "FormJSFieldItemModel", FormJSFieldItemRunJSContext, { scenes: ["form"] });
-  import_registry.RunJSContextRegistry.register(v1, "JSRecordActionModel", JSRecordActionRunJSContext, { scenes: ["table"] });
-  import_registry.RunJSContextRegistry.register(v1, "JSCollectionActionModel", JSCollectionActionRunJSContext, { scenes: ["table"] });
-  await (0, import_contributions.applyRunJSContextContributions)(v1);
+  const registerBuiltins = /* @__PURE__ */ __name((version) => {
+    import_registry.RunJSContextRegistry.register(version, "*", import_flowContext.FlowRunJSContext);
+    import_registry.RunJSContextRegistry.register(version, "JSBlockModel", JSBlockRunJSContext, { scenes: ["block"] });
+    import_registry.RunJSContextRegistry.register(version, "JSFieldModel", JSFieldRunJSContext, { scenes: ["detail"] });
+    import_registry.RunJSContextRegistry.register(version, "JSEditableFieldModel", JSEditableFieldRunJSContext, { scenes: ["form"] });
+    import_registry.RunJSContextRegistry.register(version, "JSItemModel", JSItemRunJSContext, { scenes: ["form"] });
+    import_registry.RunJSContextRegistry.register(version, "JSItemActionModel", JSItemRunJSContext, { scenes: ["table"] });
+    import_registry.RunJSContextRegistry.register(version, "JSColumnModel", JSColumnRunJSContext, { scenes: ["table"] });
+    import_registry.RunJSContextRegistry.register(version, "FormJSFieldItemModel", FormJSFieldItemRunJSContext, { scenes: ["form"] });
+    import_registry.RunJSContextRegistry.register(version, "JSRecordActionModel", JSRecordActionRunJSContext, { scenes: ["table"] });
+    import_registry.RunJSContextRegistry.register(version, "JSCollectionActionModel", JSCollectionActionRunJSContext, {
+      scenes: ["table"]
+    });
+  }, "registerBuiltins");
+  const versions = ["v1", "v2"];
+  for (const version of versions) {
+    registerBuiltins(version);
+    await (0, import_contributions.applyRunJSContextContributions)(version);
+    (0, import_contributions.markRunJSContextsSetupDone)(version);
+  }
   done = true;
-  (0, import_contributions.markRunJSContextsSetupDone)(v1);
 }
 __name(setupRunJSContexts, "setupRunJSContexts");
 // Annotate the CommonJS export names for ESM import in node:

package/lib/runjs-context/snippets/index.js

@@ -81,6 +81,7 @@ const snippets = {
   "scene/detail/status-tag": /* @__PURE__ */ __name(() => import("./scene/detail/status-tag.snippet"), "scene/detail/status-tag"),
   "scene/detail/relative-time": /* @__PURE__ */ __name(() => import("./scene/detail/relative-time.snippet"), "scene/detail/relative-time"),
   "scene/detail/percentage-bar": /* @__PURE__ */ __name(() => import("./scene/detail/percentage-bar.snippet"), "scene/detail/percentage-bar"),
+  "scene/detail/set-field-style": /* @__PURE__ */ __name(() => import("./scene/detail/set-field-style.snippet"), "scene/detail/set-field-style"),
   // scene/form
   "scene/form/render-basic": /* @__PURE__ */ __name(() => import("./scene/form/render-basic.snippet"), "scene/form/render-basic"),
   "scene/form/set-field-value": /* @__PURE__ */ __name(() => import("./scene/form/set-field-value.snippet"), "scene/form/set-field-value"),
@@ -98,7 +99,8 @@ const snippets = {
   "scene/table/collection-selected-count": /* @__PURE__ */ __name(() => import("./scene/table/collection-selected-count.snippet"), "scene/table/collection-selected-count"),
   "scene/table/iterate-selected-rows": /* @__PURE__ */ __name(() => import("./scene/table/iterate-selected-rows.snippet"), "scene/table/iterate-selected-rows"),
   "scene/table/destroy-selected": /* @__PURE__ */ __name(() => import("./scene/table/destroy-selected.snippet"), "scene/table/destroy-selected"),
-  "scene/table/export-selected-json": /* @__PURE__ */ __name(() => import("./scene/table/export-selected-json.snippet"), "scene/table/export-selected-json")
+  "scene/table/export-selected-json": /* @__PURE__ */ __name(() => import("./scene/table/export-selected-json.snippet"), "scene/table/export-selected-json"),
+  "scene/table/set-cell-style": /* @__PURE__ */ __name(() => import("./scene/table/set-cell-style.snippet"), "scene/table/set-cell-style")
 };
 var snippets_default = snippets;
 function registerRunJSSnippet(ref, loader, options) {
@@ -131,10 +133,19 @@ function normalizeScenes(def, key) {
   return [];
 }
 __name(normalizeScenes, "normalizeScenes");
+function normalizeSceneGroup(scene) {
+  const mapping = {
+    detailFieldEvent: "detail",
+    tableFieldEvent: "table",
+    formFieldEvent: "form"
+  };
+  return mapping[scene] || scene;
+}
+__name(normalizeSceneGroup, "normalizeSceneGroup");
 function computeGroups(def, key) {
   const scenes = normalizeScenes(def, key);
   if (scenes.length) {
-    return scenes.map((scene) => `scene/${scene}`);
+    return Array.from(new Set(scenes.map((scene) => `scene/${normalizeSceneGroup(scene)}`)));
   }
   const parts = key.split("/");
   if (!parts.length) return [];