@nocobase/flow-engine 2.0.0-alpha.7 → 2.0.0-alpha.71

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

@@ -41,33 +41,33 @@ __export(FlowsContextMenu_exports, {
 });
 module.exports = __toCommonJS(FlowsContextMenu_exports);
 var import_icons = require("@ant-design/icons");
-var import_react = require("@formily/react");
 var import_antd = require("antd");
-var import_react2 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 var import_flowContext = require("../../../../flowContext");
 var import_hooks = require("../../../../hooks");
 var import_utils = require("../../../../utils");
 var import_StepSettingsDialog = require("./StepSettingsDialog");
+var import_reactive = require("../../../../reactive");
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
   return "uid" in props && "modelClassName" in props && Boolean(props.uid) && Boolean(props.modelClassName);
 }, "isModelByIdProps");
 const FlowsContextMenu = /* @__PURE__ */ __name((props) => {
   if (isModelByIdProps(props)) {
-    return /* @__PURE__ */ import_react2.default.createElement(FlowsContextMenuWithModelById, { ...props });
+    return /* @__PURE__ */ import_react.default.createElement(FlowsContextMenuWithModelById, { ...props });
   } else {
-    return /* @__PURE__ */ import_react2.default.createElement(FlowsContextMenuWithModel, { ...props });
+    return /* @__PURE__ */ import_react.default.createElement(FlowsContextMenuWithModel, { ...props });
   }
 }, "FlowsContextMenu");
-const FlowsContextMenuWithModel = (0, import_react.observer)(
+const FlowsContextMenuWithModel = (0, import_reactive.observer)(
   ({ model, children, enabled = true, position = "right", showDeleteButton = true }) => {
     const t = (0, import_utils.getT)(model);
-    const handleMenuClick = (0, import_react2.useCallback)(
+    const handleMenuClick = (0, import_react.useCallback)(
       ({ key }) => {
         var _a;
         if (key === "delete") {
           import_antd.Modal.confirm({
             title: t("Confirm delete"),
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_icons.ExclamationCircleOutlined, null),
+            icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ExclamationCircleOutlined, null),
             content: t("Are you sure you want to delete this item? This action cannot be undone."),
             okText: t("Confirm Delete"),
             okType: "danger",
@@ -111,58 +111,75 @@ const FlowsContextMenuWithModel = (0, import_react.observer)(
       [model]
     );
     if (!model) {
-      return /* @__PURE__ */ import_react2.default.createElement(import_antd.Alert, { message: "\u63D0\u4F9B\u7684\u6A21\u578B\u65E0\u6548", type: "error" });
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: "\u63D0\u4F9B\u7684\u6A21\u578B\u65E0\u6548", type: "error" });
     }
     if (!enabled || !children) {
-      return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children);
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
     }
-    const getConfigurableFlowsAndSteps = (0, import_react2.useCallback)(() => {
+    const getConfigurableFlowsAndSteps = (0, import_react.useCallback)(async () => {
       try {
         const flows = model.getFlows();
         const flowsArray = Array.from(flows.values());
-        return flowsArray.map((flow) => {
-          const configurableSteps = Object.entries(flow.steps).map(([stepKey, stepDefinition]) => {
-            var _a, _b;
-            const actionStep = stepDefinition;
-            if (actionStep.hideInSettings) {
-              return null;
-            }
-            const stepUiSchema = actionStep.uiSchema || {};
-            let actionUiSchema = {};
-            if (actionStep.use) {
-              const action = (_b = (_a = model.flowEngine) == null ? void 0 : _a.getAction) == null ? void 0 : _b.call(_a, actionStep.use);
-              if (action && action.uiSchema) {
-                actionUiSchema = action.uiSchema;
-              }
-            }
-            const mergedUiSchema = { ...actionUiSchema };
-            Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
-              if (mergedUiSchema[fieldKey]) {
-                mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
-              } else {
-                mergedUiSchema[fieldKey] = schema;
-              }
-            });
-            if (Object.keys(mergedUiSchema).length === 0) {
-              return null;
-            }
-            return {
-              stepKey,
-              step: actionStep,
-              uiSchema: mergedUiSchema,
-              title: actionStep.title || stepKey
-            };
-          }).filter(Boolean);
-          return configurableSteps.length > 0 ? { flow, steps: configurableSteps } : null;
-        }).filter(Boolean);
+        const result = await Promise.all(
+          flowsArray.map(async (flow) => {
+            const configurableSteps = await Promise.all(
+              Object.entries(flow.steps).map(async ([stepKey, stepDefinition]) => {
+                var _a;
+                const actionStep = stepDefinition;
+                if (await (0, import_utils.shouldHideStepInSettings)(model, flow, actionStep)) {
+                  return null;
+                }
+                const stepUiSchema = actionStep.uiSchema || {};
+                let actionUiSchema = {};
+                if (actionStep.use) {
+                  const action = (_a = model.getAction) == null ? void 0 : _a.call(model, actionStep.use);
+                  if (action && action.uiSchema) {
+                    actionUiSchema = action.uiSchema;
+                  }
+                }
+                const mergedUiSchema = { ...actionUiSchema };
+                Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
+                  if (mergedUiSchema[fieldKey]) {
+                    mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
+                  } else {
+                    mergedUiSchema[fieldKey] = schema;
+                  }
+                });
+                if (Object.keys(mergedUiSchema).length === 0) {
+                  return null;
+                }
+                return {
+                  stepKey,
+                  step: actionStep,
+                  uiSchema: mergedUiSchema,
+                  title: actionStep.title || stepKey
+                };
+              })
+            ).then((steps) => steps.filter(Boolean));
+            return configurableSteps.length > 0 ? { flow, steps: configurableSteps } : null;
+          })
+        );
+        return result.filter(Boolean);
       } catch (error) {
         console.warn("[FlowsContextMenu] \u83B7\u53D6\u53EF\u914D\u7F6Eflows\u5931\u8D25:", error);
         return [];
       }
     }, [model]);
-    const configurableFlowsAndSteps = getConfigurableFlowsAndSteps();
+    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = (0, import_react.useState)([]);
+    (0, import_react.useEffect)(() => {
+      let mounted = true;
+      (async () => {
+        const flows = await getConfigurableFlowsAndSteps();
+        if (mounted) {
+          setConfigurableFlowsAndSteps(flows);
+        }
+      })();
+      return () => {
+        mounted = false;
+      };
+    }, [getConfigurableFlowsAndSteps]);
     if (configurableFlowsAndSteps.length === 0 && !showDeleteButton) {
-      return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children);
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
     }
     const menuItems = [];
     if (configurableFlowsAndSteps.length > 0) {
@@ -175,7 +192,7 @@ const FlowsContextMenuWithModel = (0, import_react.observer)(
         steps.forEach((stepInfo) => {
           menuItems.push({
             key: `${flow.key}:${stepInfo.stepKey}`,
-            icon: /* @__PURE__ */ import_react2.default.createElement(import_icons.SettingOutlined, null),
+            icon: /* @__PURE__ */ import_react.default.createElement(import_icons.SettingOutlined, null),
             label: stepInfo.title
           });
         });
@@ -189,11 +206,11 @@ const FlowsContextMenuWithModel = (0, import_react.observer)(
       }
       menuItems.push({
         key: "delete",
-        icon: /* @__PURE__ */ import_react2.default.createElement(import_icons.DeleteOutlined, null),
+        icon: /* @__PURE__ */ import_react.default.createElement(import_icons.DeleteOutlined, null),
         label: "\u5220\u9664"
       });
     }
-    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Dropdown,
       {
         menu: {
@@ -203,17 +220,17 @@ const FlowsContextMenuWithModel = (0, import_react.observer)(
         trigger: ["contextMenu"],
         placement: position === "left" ? "bottomLeft" : "bottomRight"
       },
-      /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "inline-block", width: "100%" } }, children)
+      /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "inline-block", width: "100%" } }, children)
     ));
   }
 );
-const FlowsContextMenuWithModelById = (0, import_react.observer)(
+const FlowsContextMenuWithModelById = (0, import_reactive.observer)(
   ({ uid, modelClassName, children, enabled = true, position = "right", showDeleteButton = true }) => {
     const model = (0, import_hooks.useFlowModelById)(uid, modelClassName);
     if (!model) {
-      return /* @__PURE__ */ import_react2.default.createElement(import_antd.Alert, { message: `\u672A\u627E\u5230ID\u4E3A ${uid} \u7684\u6A21\u578B`, type: "error" });
+      return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: `\u672A\u627E\u5230ID\u4E3A ${uid} \u7684\u6A21\u578B`, type: "error" });
     }
-    return /* @__PURE__ */ import_react2.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement(
       FlowsContextMenuWithModel,
       {
         model,

package/lib/components/settings/wrappers/contextual/FlowsFloatContextMenu.d.ts

@@ -45,7 +45,7 @@ interface ModelProvidedProps {
     /**
      * @default 'inside'
      */
-    toolbarPosition?: 'inside' | 'above';
+    toolbarPosition?: 'inside' | 'above' | 'below';
 }
 interface ModelByIdProps {
     uid: string;
@@ -79,7 +79,7 @@ interface ModelByIdProps {
     /**
      * @default 'inside'
      */
-    toolbarPosition?: 'inside' | 'above';
+    toolbarPosition?: 'inside' | 'above' | 'below';
 }
 type FlowsFloatContextMenuProps = ModelProvidedProps | ModelByIdProps;
 /**

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

@@ -42,11 +42,12 @@ __export(FlowsFloatContextMenu_exports, {
 module.exports = __toCommonJS(FlowsFloatContextMenu_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
-var import_react2 = require("@formily/react");
 var import_css = require("@emotion/css");
 var import_hooks = require("../../../../hooks");
 var import_provider = require("../../../../provider");
 var import_utils = require("../../../../utils");
+var import__ = require("../../../..");
+var import_reactive = require("../../../../reactive");
 const detectButtonInDOM = /* @__PURE__ */ __name((container) => {
   if (!container) return false;
   const directChildren = container.children;
@@ -83,9 +84,26 @@ const renderToolbarItems = /* @__PURE__ */ __name((model, showDeleteButton, show
     return /* @__PURE__ */ import_react.default.createElement(ItemComponent, { key: itemConfig.key, model });
   });
 }, "renderToolbarItems");
-const floatContainerStyles = /* @__PURE__ */ __name(({ showBackground, showBorder, ctx, toolbarPosition }) => import_css.css`
+const TOOLBAR_ITEM_WIDTH = 19;
+const toolbarPositionToCSS = {
+  inside: `
+    top: 2px;
+  `,
+  above: `
+    top: 0px;
+    transform: translateY(-100%);
+    padding-bottom: 0px;
+    margin-bottom: -2px;
+  `,
+  below: `
+    top: 0px;
+    transform: translateY(100%);
+    padding-top: 2px;
+    margin-top: -2px;
+  `
+};
+const floatContainerStyles = /* @__PURE__ */ __name(({ showBackground, showBorder, ctx, toolbarPosition = "inside", toolbarCount }) => import_css.css`
   position: relative;
-  display: inline;
 
   /* 当检测到button时使用inline-block */
   &.has-button-child {
@@ -119,6 +137,7 @@ const floatContainerStyles = /* @__PURE__ */ __name(({ showBackground, showBorde
     border: ${showBorder ? "2px solid var(--colorBorderSettingsHover)" : ""};
     border-radius: ${ctx.themeToken.borderRadiusLG}px;
     pointer-events: none;
+    min-width: ${TOOLBAR_ITEM_WIDTH * toolbarCount}px;
 
     &.nb-in-template {
       background: var(--colorTemplateBgSettingsHover);
@@ -135,13 +154,16 @@ const floatContainerStyles = /* @__PURE__ */ __name(({ showBackground, showBorde
       border-radius: 2px;
       top: 2px;
       left: 2px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
 
       .title-tag {
         padding: 0 3px;
         border-radius: 2px;
         background: var(--colorSettings);
         color: #fff;
-        display: block;
+        display: inline-flex;
       }
     }
 
@@ -149,10 +171,7 @@ const floatContainerStyles = /* @__PURE__ */ __name(({ showBackground, showBorde
       display: none; // 防止遮挡其它 icons
       position: absolute;
       right: 2px;
-      top: ${toolbarPosition === "above" ? "0px" : "2px"};
-      ${toolbarPosition === "above" ? "transform: translateY(-100%);" : ""}
-      ${toolbarPosition === "above" ? "padding-bottom: 2px;" : ""}
-      ${toolbarPosition === "above" ? "margin-bottom: -2px;" : ""}
+      ${toolbarPositionToCSS[toolbarPosition] || ""}
       line-height: 16px;
       pointer-events: all;
 
@@ -264,10 +283,9 @@ const floatContainerStyles = /* @__PURE__ */ __name(({ showBackground, showBorde
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
   return "uid" in props && "modelClassName" in props && Boolean(props.uid) && Boolean(props.modelClassName);
 }, "isModelByIdProps");
-const FlowsFloatContextMenu = (0, import_react2.observer)((props) => {
-  var _a;
-  const flowEngine = (0, import_provider.useFlowEngine)();
-  if (!((_a = flowEngine.flowSettings) == null ? void 0 : _a.enabled)) {
+const FlowsFloatContextMenu = (0, import_reactive.observer)((props) => {
+  const ctx = (0, import__.useFlowContext)();
+  if (!ctx.flowSettingsEnabled) {
     return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children);
   }
   if (isModelByIdProps(props)) {
@@ -348,7 +366,7 @@ const ResizeHandles = /* @__PURE__ */ __name((props) => {
     }
   ));
 }, "ResizeHandles");
-const FlowsFloatContextMenuWithModel = (0, import_react2.observer)(
+const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
   ({
     model,
     children,
@@ -417,27 +435,42 @@ const FlowsFloatContextMenuWithModel = (0, import_react2.observer)(
       "div",
       {
         ref: containerRef,
-        className: `${floatContainerStyles({ showBackground, showBorder, ctx: model.context, toolbarPosition })} ${hideMenu ? "hide-parent-menu" : ""} ${hasButton ? "has-button-child" : ""} ${className || ""}`,
+        className: `${floatContainerStyles({
+          showBackground,
+          showBorder,
+          ctx: model.context,
+          toolbarPosition,
+          toolbarCount: getToolbarCount(flowEngine, extraToolbarItems)
+        })} ${hideMenu ? "hide-parent-menu" : ""} ${hasButton ? "has-button-child" : ""} ${className || ""}`,
         style: containerStyle,
         "data-has-float-menu": "true",
         onMouseMove: handleChildHover
       },
       children,
-      /* @__PURE__ */ import_react.default.createElement("div", { ref: toolbarContainerRef, className: "nb-toolbar-container", style: toolbarContainerStyle }, showTitle && model.title && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-toolbar-container-title" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.title)), /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-toolbar-container-icons" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 3, align: "center" }, renderToolbarItems(
-        model,
-        showDeleteButton,
-        showCopyUidButton,
-        flowEngine,
-        settingsMenuLevel,
-        extraToolbarItems
-      ))), showDragHandle && /* @__PURE__ */ import_react.default.createElement(ResizeHandles, { model, onDragStart: () => setStyle({ opacity: 1 }), onDragEnd: () => setStyle({}) }))
+      /* @__PURE__ */ import_react.default.createElement("div", { ref: toolbarContainerRef, className: "nb-toolbar-container", style: toolbarContainerStyle }, 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(
+        "div",
+        {
+          className: "nb-toolbar-container-icons",
+          onClick: (e) => e.stopPropagation(),
+          onMouseDown: (e) => e.stopPropagation(),
+          onMouseMove: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 3, align: "center" }, renderToolbarItems(
+          model,
+          showDeleteButton,
+          showCopyUidButton,
+          flowEngine,
+          settingsMenuLevel,
+          extraToolbarItems
+        ))
+      ), showDragHandle && /* @__PURE__ */ import_react.default.createElement(ResizeHandles, { model, onDragStart: () => setStyle({ opacity: 1 }), onDragEnd: () => setStyle({}) }))
     );
   },
   {
     displayName: "FlowsFloatContextMenuWithModel"
   }
 );
-const FlowsFloatContextMenuWithModelById = (0, import_react2.observer)(
+const FlowsFloatContextMenuWithModelById = (0, import_reactive.observer)(
   ({
     uid,
     modelClassName,
@@ -478,6 +511,13 @@ const FlowsFloatContextMenuWithModelById = (0, import_react2.observer)(
     displayName: "FlowsFloatContextMenuWithModelById"
   }
 );
+function getToolbarCount(flowEngine, extraToolbarItems) {
+  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 || []];
+  return allToolbarItems.length;
+}
+__name(getToolbarCount, "getToolbarCount");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FlowsFloatContextMenu

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

@@ -47,6 +47,7 @@ var import_antd = require("antd");
 var import_react2 = __toESM(require("react"));
 var import_useFlowSettingsContext = require("../../../../hooks/useFlowSettingsContext");
 var import_utils = require("../../../../utils");
+var import_reactive2 = require("../../../../reactive");
 const SchemaField = (0, import_react.createSchemaField)();
 const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
   model,
@@ -59,7 +60,7 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
   uiModeProps,
   cleanup
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const t = (0, import_utils.getT)(model);
   const message = model.context.message;
   if (!model) {
@@ -127,18 +128,28 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
   const form = (0, import_core.createForm)({
     initialValues: (0, import_utils.compileUiSchema)(scopes, initialValues)
   });
+  const viewInputArgs = ((_e = model.context.view) == null ? void 0 : _e.inputArgs) || {};
+  const navigation = ((_f = ctx == null ? void 0 : ctx.view) == null ? void 0 : _f.navigation) ?? ((_g = model.context.view) == null ? void 0 : _g.navigation);
+  const inputArgs = {
+    ...viewInputArgs,
+    ...navigation ? { navigation } : {},
+    ...((_h = (0, import_reactive.toJS)(uiModeProps)) == null ? void 0 : _h.inputArgs) || {},
+    __isSettingsPopup: true
+  };
   openView({
     title: dialogTitle || t(title),
     width: dialogWidth,
     destroyOnClose: true,
     ...(0, import_reactive.toJS)(uiModeProps),
+    // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
+    inputArgs,
     onClose: /* @__PURE__ */ __name(() => {
       if (cleanup) {
         cleanup();
       }
     }, "onClose"),
     content: /* @__PURE__ */ __name((currentDialog) => {
-      const FlowStepSettings = (0, import_react.observer)(() => {
+      const FlowStepSettings = (0, import_reactive2.observer)(() => {
         var _a2;
         (0, import_react2.useEffect)(() => {
           return (0, import_reactive.autorun)(() => {

package/lib/components/settings/wrappers/embedded/FlowSettings.js

@@ -42,10 +42,10 @@ __export(FlowSettings_exports, {
 module.exports = __toCommonJS(FlowSettings_exports);
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
-var import_react2 = require("@formily/react");
 var import_flowContext = require("../../../../flowContext");
 var import_hooks = require("../../../../hooks");
 var import_utils = require("../../../../utils");
+var import_reactive = require("../../../../reactive");
 const { Item: FormItem } = import_antd.Form;
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
   return "uid" in props && "modelClassName" in props && Boolean(props.uid) && Boolean(props.modelClassName);
@@ -57,49 +57,63 @@ const FlowSettings = /* @__PURE__ */ __name((props) => {
     return /* @__PURE__ */ import_react.default.createElement(FlowSettingsWithModel, { ...props });
   }
 }, "FlowSettings");
-const FlowSettingsWithModel = (0, import_react2.observer)(({ model, flowKey }) => {
+const FlowSettingsWithModel = (0, import_reactive.observer)(({ model, flowKey }) => {
   if (!model) {
     return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: "\u63D0\u4F9B\u7684\u6A21\u578B\u65E0\u6548", type: "error" });
   }
   return /* @__PURE__ */ import_react.default.createElement(FlowSettingsContent, { model, flowKey });
 });
-const FlowSettingsWithModelById = (0, import_react2.observer)(({ uid, flowKey, modelClassName }) => {
+const FlowSettingsWithModelById = (0, import_reactive.observer)(({ uid, flowKey, modelClassName }) => {
   const model = (0, import_hooks.useFlowModelById)(uid, modelClassName);
   if (!model) {
     return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: `\u672A\u627E\u5230ID\u4E3A ${uid} \u7684\u6A21\u578B`, type: "error" });
   }
   return /* @__PURE__ */ import_react.default.createElement(FlowSettingsContent, { model, flowKey });
 });
-const FlowSettingsContent = (0, import_react2.observer)(({ model, flowKey }) => {
+const FlowSettingsContent = (0, import_reactive.observer)(({ model, flowKey }) => {
   const [form] = import_antd.Form.useForm();
   const flows = model.getFlows();
   const flow = flows.get(flowKey);
-  const configurableSteps = Object.entries((flow == null ? void 0 : flow.steps) || {}).map(([stepKey, actionStep]) => {
-    var _a, _b;
-    if (actionStep.hideInSettings) {
-      return null;
-    }
-    const stepUiSchema = actionStep.uiSchema || {};
-    let actionUiSchema = {};
-    if (actionStep.use) {
-      const action = (_b = (_a = model.flowEngine) == null ? void 0 : _a.getAction) == null ? void 0 : _b.call(_a, actionStep.use);
-      if (action && action.uiSchema) {
-        actionUiSchema = action.uiSchema;
+  const [configurableSteps, setConfigurableSteps] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
+    let mounted = true;
+    const buildConfigurableSteps = /* @__PURE__ */ __name(async () => {
+      var _a, _b;
+      const steps = [];
+      for (const [stepKey, actionStep] of Object.entries((flow == null ? void 0 : flow.steps) || {})) {
+        if (await (0, import_utils.shouldHideStepInSettings)(model, flow, actionStep)) {
+          continue;
+        }
+        const stepUiSchema = actionStep.uiSchema || {};
+        let actionUiSchema = {};
+        if (actionStep.use) {
+          const action = (_b = (_a = model.flowEngine) == null ? void 0 : _a.getAction) == null ? void 0 : _b.call(_a, actionStep.use);
+          if (action && action.uiSchema) {
+            actionUiSchema = action.uiSchema;
+          }
+        }
+        const mergedUiSchema = { ...actionUiSchema };
+        Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
+          if (mergedUiSchema[fieldKey]) {
+            mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
+          } else {
+            mergedUiSchema[fieldKey] = schema;
+          }
+        });
+        if (Object.keys(mergedUiSchema).length === 0) {
+          continue;
+        }
+        steps.push({ stepKey, step: actionStep, uiSchema: mergedUiSchema });
       }
-    }
-    const mergedUiSchema = { ...actionUiSchema };
-    Object.entries(stepUiSchema).forEach(([fieldKey, schema]) => {
-      if (mergedUiSchema[fieldKey]) {
-        mergedUiSchema[fieldKey] = { ...mergedUiSchema[fieldKey], ...schema };
-      } else {
-        mergedUiSchema[fieldKey] = schema;
+      if (mounted) {
+        setConfigurableSteps(steps);
       }
-    });
-    if (Object.keys(mergedUiSchema).length === 0) {
-      return null;
-    }
-    return { stepKey, step: actionStep, uiSchema: mergedUiSchema };
-  }).filter(Boolean);
+    }, "buildConfigurableSteps");
+    buildConfigurableSteps();
+    return () => {
+      mounted = false;
+    };
+  }, [model, flow]);
   const getCurrentParams = (0, import_react.useCallback)(async () => {
     const params = {};
     for (const { stepKey, step } of configurableSteps) {

package/lib/components/settings/wrappers/embedded/FlowsSettings.js

@@ -43,8 +43,8 @@ module.exports = __toCommonJS(FlowsSettings_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_hooks = require("../../../../hooks");
-var import_react2 = require("@formily/react");
 var import_FlowsSettingsContent = __toESM(require("./FlowsSettingsContent"));
+var import_reactive = require("../../../../reactive");
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
   return "uid" in props && "modelClassName" in props && Boolean(props.uid) && Boolean(props.modelClassName);
 }, "isModelByIdProps");
@@ -55,7 +55,7 @@ const FlowsSettings = /* @__PURE__ */ __name((props) => {
     return /* @__PURE__ */ import_react.default.createElement(FlowsSettingsWithModel, { ...props });
   }
 }, "FlowsSettings");
-const FlowsSettingsWithModel = (0, import_react2.observer)(({ model, expandAll = false, children }) => {
+const FlowsSettingsWithModel = (0, import_reactive.observer)(({ model, expandAll = false, children }) => {
   if (!model) {
     return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: "\u63D0\u4F9B\u7684\u6A21\u578B\u65E0\u6548", type: "error" });
   }
@@ -65,7 +65,7 @@ const FlowsSettingsWithModel = (0, import_react2.observer)(({ model, expandAll =
   }
   return settingsContent;
 });
-const FlowsSettingsWithModelById = (0, import_react2.observer)(
+const FlowsSettingsWithModelById = (0, import_reactive.observer)(
   ({ uid, modelClassName, expandAll = false, children }) => {
     const model = (0, import_hooks.useFlowModelById)(uid, modelClassName);
     if (!model) {