@nocobase/flow-engine 2.1.0-alpha.1 → 2.1.0-alpha.11

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

@@ -135,10 +135,19 @@ const componentMap = {
 const MenuLabelItem = /* @__PURE__ */ __name(({ title, uiMode, itemProps }) => {
   const type = (uiMode == null ? void 0 : uiMode.type) || uiMode;
   const Component = type ? componentMap[type] : null;
-  if (!Component) {
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, title);
+  const disabled = !!(itemProps == null ? void 0 : itemProps.disabled);
+  const disabledReason = itemProps == null ? void 0 : itemProps.disabledReason;
+  const disabledIconColor = itemProps == null ? void 0 : itemProps.disabledIconColor;
+  const content = (() => {
+    if (!Component) {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, title);
+    }
+    return /* @__PURE__ */ import_react.default.createElement(Component, { title, ...itemProps });
+  })();
+  if (!disabled) {
+    return content;
   }
-  return /* @__PURE__ */ import_react.default.createElement(Component, { title, ...itemProps });
+  return /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 } }, content, /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: disabledReason, placement: "right", destroyTooltipOnHide: true }, /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { style: { color: disabledIconColor } })));
 }, "MenuLabelItem");
 const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   model,
@@ -150,9 +159,16 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
 }) => {
   const { message } = import_antd.App.useApp();
   const t = (0, import_react.useMemo)(() => (0, import_utils.getT)(model), [model]);
+  const { token } = import_antd.theme.useToken();
+  const disabledIconColor = (token == null ? void 0 : token.colorTextTertiary) || (token == null ? void 0 : token.colorTextDescription) || (token == null ? void 0 : token.colorTextSecondary);
   const [visible, setVisible] = (0, import_react.useState)(false);
   const [refreshTick, setRefreshTick] = (0, import_react.useState)(0);
   const [extraMenuItems, setExtraMenuItems] = (0, import_react.useState)([]);
+  const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const closeDropdown = (0, import_react.useCallback)(() => {
+    setVisible(false);
+  }, []);
   const handleOpenChange = (0, import_react.useCallback)((nextOpen, info) => {
     if (info.source === "trigger" || nextOpen) {
       (0, import_react.startTransition)(() => {
@@ -200,7 +216,7 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
     return () => {
       mounted = false;
     };
-  }, [model, menuLevels, t, refreshTick, visible, message]);
+  }, [model, menuLevels, t, refreshTick, visible]);
   const copyUidToClipboard = (0, import_react.useCallback)(
     async (uid) => {
       var _a;
@@ -249,6 +265,7 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
     [model, copyUidToClipboard]
   );
   const handleDelete = (0, import_react.useCallback)(() => {
+    closeDropdown();
     import_antd.Modal.confirm({
       title: t("Confirm delete"),
       icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ExclamationCircleOutlined, null),
@@ -269,7 +286,7 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
         }
       }
     });
-  }, [model]);
+  }, [closeDropdown, model, t]);
   const handleStepConfiguration = (0, import_react.useCallback)(
     (key) => {
       const keyParts = key.split(":");
@@ -294,6 +311,7 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
         [flowKey, stepKey] = keyParts;
       }
       try {
+        closeDropdown();
         targetModel.openFlowSettings({
           flowKey,
           stepKey
@@ -302,23 +320,51 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
         console.log(t("Configuration popup cancelled or error"), ":", error);
       }
     },
-    [model]
+    [closeDropdown, model, t]
+  );
+  const isStepMenuItemDisabled = (0, import_react.useCallback)(
+    (key) => {
+      const cleanKey = key.includes("-") && /^(.+)-\d+$/.test(key) ? key.replace(/-\d+$/, "") : key;
+      const keys = cleanKey.split(":");
+      let modelKey;
+      let flowKey;
+      let stepKey;
+      if (keys.length === 3) {
+        [modelKey, flowKey, stepKey] = keys;
+      } else if (keys.length === 2) {
+        [flowKey, stepKey] = keys;
+      } else {
+        return false;
+      }
+      return configurableFlowsAndSteps.some(({ flow, steps, modelKey: flowModelKey }) => {
+        const sameModel = (flowModelKey || void 0) === modelKey;
+        if (!sameModel || flow.key !== flowKey) return false;
+        return steps.some((stepInfo) => stepInfo.stepKey === stepKey && !!stepInfo.disabled);
+      });
+    },
+    [configurableFlowsAndSteps]
   );
   const handleMenuClick = (0, import_react.useCallback)(
     ({ key }) => {
       const originalKey = key;
       const cleanKey = key.includes("-") && /^(.+)-\d+$/.test(key) ? key.replace(/-\d+$/, "") : key;
       if (cleanKey.startsWith("copy-pop-uid:")) {
+        closeDropdown();
         handleCopyPopupUid(cleanKey);
         return;
       }
       const extra = extraMenuItems.find((it) => (it == null ? void 0 : it.key) === originalKey || (it == null ? void 0 : it.key) === cleanKey);
       if (extra == null ? void 0 : extra.onClick) {
+        closeDropdown();
         extra.onClick();
         return;
       }
+      if (isStepMenuItemDisabled(cleanKey)) {
+        return;
+      }
       switch (cleanKey) {
         case "copy-uid":
+          closeDropdown();
           handleCopyUid();
           break;
         case "delete":
@@ -329,7 +375,15 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
           break;
       }
     },
-    [handleCopyUid, handleDelete, handleStepConfiguration, handleCopyPopupUid, extraMenuItems]
+    [
+      closeDropdown,
+      handleCopyUid,
+      handleDelete,
+      handleStepConfiguration,
+      handleCopyPopupUid,
+      extraMenuItems,
+      isStepMenuItemDisabled
+    ]
   );
   const getModelConfigurableFlowsAndSteps = (0, import_react.useCallback)(
     async (targetModel, modelKey) => {
@@ -347,6 +401,7 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
                 if (await (0, import_utils.shouldHideStepInSettings)(targetModel, flow, actionStep)) {
                   return null;
                 }
+                const disabledState = await (0, import_utils.resolveStepDisabledInSettings)(targetModel, flow, actionStep);
                 let uiMode = await (0, import_utils.resolveUiMode)(actionStep.uiMode, targetModel.context);
                 const hasStepUiSchema = actionStep.uiSchema != null;
                 let hasActionUiSchema = false;
@@ -384,7 +439,9 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
                   title: t(stepTitle) || stepKey,
                   modelKey,
                   // 添加模型标识
-                  uiMode
+                  uiMode,
+                  disabled: disabledState.disabled,
+                  disabledReason: disabledState.reason
                 };
               })
             ).then((steps) => steps.filter(Boolean));
@@ -415,8 +472,6 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
     }
     return result;
   }, [model, menuLevels, getModelConfigurableFlowsAndSteps]);
-  const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = (0, import_react.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   (0, import_react.useEffect)(() => {
     const triggerRebuild = /* @__PURE__ */ __name(() => {
       setRefreshTick((v) => v + 1);
@@ -509,11 +564,15 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
                 }
               }, "onChange"),
               ...(uiMode == null ? void 0 : uiMode.props) || {},
-              itemKey: uiMode == null ? void 0 : uiMode.key
+              itemKey: uiMode == null ? void 0 : uiMode.key,
+              disabled: !!stepInfo.disabled,
+              disabledReason: stepInfo.disabledReason,
+              disabledIconColor
             };
             items.push({
               key: uniqueKey,
-              label: /* @__PURE__ */ import_react.default.createElement(MenuLabelItem, { title: t(stepInfo.title), uiMode, itemProps })
+              label: /* @__PURE__ */ import_react.default.createElement(MenuLabelItem, { title: stepInfo.title, uiMode, itemProps }),
+              disabled: !!stepInfo.disabled
             });
           });
           if (flow.options.divider === "bottom") {
@@ -547,7 +606,8 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
                 const uniqueKey = generateUniqueKey(`${flow.key}:${stepInfo.stepKey}`);
                 items.push({
                   key: uniqueKey,
-                  label: t(stepInfo.title)
+                  label: stepInfo.disabled ? /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 } }, stepInfo.title, /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: stepInfo.disabledReason, placement: "right", destroyTooltipOnHide: true }, /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { style: { color: disabledIconColor } }))) : stepInfo.title,
+                  disabled: !!stepInfo.disabled
                 });
               });
             });
@@ -559,7 +619,8 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
                 const uniqueKey = generateUniqueKey(`${modelKey}:${flow.key}:${stepInfo.stepKey}`);
                 subMenuChildren.push({
                   key: uniqueKey,
-                  label: t(stepInfo.title)
+                  label: stepInfo.disabled ? /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 } }, stepInfo.title, /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: stepInfo.disabledReason, placement: "right", destroyTooltipOnHide: true }, /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { style: { color: disabledIconColor } }))) : stepInfo.title,
+                  disabled: !!stepInfo.disabled
                 });
               });
             });
@@ -573,7 +634,7 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
       }
     }
     return items;
-  }, [configurableFlowsAndSteps, flattenSubMenus, t]);
+  }, [configurableFlowsAndSteps, disabledIconColor, flattenSubMenus, t]);
   const finalMenuItems = (0, import_react.useMemo)(() => {
     const items = [...menuItems];
     const commonExtras = extraMenuItems.filter((it) => it.group === "common-actions").sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));

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

@@ -61,6 +61,20 @@ const FlowsContextMenu = /* @__PURE__ */ __name((props) => {
 const FlowsContextMenuWithModel = (0, import_reactive.observer)(
   ({ model, children, enabled = true, position = "right", showDeleteButton = true }) => {
     const t = (0, import_utils.getT)(model);
+    const { token } = import_antd.theme.useToken();
+    const disabledIconColor = (token == null ? void 0 : token.colorTextTertiary) || (token == null ? void 0 : token.colorTextDescription) || (token == null ? void 0 : token.colorTextSecondary);
+    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = (0, import_react.useState)([]);
+    const isStepMenuItemDisabled = (0, import_react.useCallback)(
+      (key) => {
+        const [flowKey, stepKey] = key.split(":");
+        if (!flowKey || !stepKey) return false;
+        return configurableFlowsAndSteps.some(({ flow, steps }) => {
+          if (flow.key !== flowKey) return false;
+          return steps.some((stepInfo) => stepInfo.stepKey === stepKey && !!stepInfo.disabled);
+        });
+      },
+      [configurableFlowsAndSteps]
+    );
     const handleMenuClick = (0, import_react.useCallback)(
       ({ key }) => {
         var _a;
@@ -86,6 +100,9 @@ const FlowsContextMenuWithModel = (0, import_reactive.observer)(
             }
           });
         } else {
+          if (isStepMenuItemDisabled(key)) {
+            return;
+          }
           const [flowKey, stepKey] = key.split(":");
           try {
             const flow = model.getFlow(flowKey);
@@ -108,7 +125,7 @@ const FlowsContextMenuWithModel = (0, import_reactive.observer)(
           }
         }
       },
-      [model]
+      [isStepMenuItemDisabled, model]
     );
     if (!model) {
       return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: "\u63D0\u4F9B\u7684\u6A21\u578B\u65E0\u6548", type: "error" });
@@ -129,6 +146,7 @@ const FlowsContextMenuWithModel = (0, import_reactive.observer)(
                 if (await (0, import_utils.shouldHideStepInSettings)(model, flow, actionStep)) {
                   return null;
                 }
+                const disabledState = await (0, import_utils.resolveStepDisabledInSettings)(model, flow, actionStep);
                 const stepUiSchema = actionStep.uiSchema || {};
                 let actionUiSchema = {};
                 if (actionStep.use) {
@@ -152,7 +170,9 @@ const FlowsContextMenuWithModel = (0, import_reactive.observer)(
                   stepKey,
                   step: actionStep,
                   uiSchema: mergedUiSchema,
-                  title: actionStep.title || stepKey
+                  title: actionStep.title || stepKey,
+                  disabled: disabledState.disabled,
+                  disabledReason: disabledState.reason
                 };
               })
             ).then((steps) => steps.filter(Boolean));
@@ -165,7 +185,6 @@ const FlowsContextMenuWithModel = (0, import_reactive.observer)(
         return [];
       }
     }, [model]);
-    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = (0, import_react.useState)([]);
     (0, import_react.useEffect)(() => {
       let mounted = true;
       (async () => {
@@ -193,7 +212,8 @@ const FlowsContextMenuWithModel = (0, import_reactive.observer)(
           menuItems.push({
             key: `${flow.key}:${stepInfo.stepKey}`,
             icon: /* @__PURE__ */ import_react.default.createElement(import_icons.SettingOutlined, null),
-            label: stepInfo.title
+            label: stepInfo.disabled ? /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 } }, stepInfo.title, /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: stepInfo.disabledReason, placement: "right", destroyTooltipOnHide: true }, /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { style: { color: disabledIconColor } }))) : stepInfo.title,
+            disabled: !!stepInfo.disabled
           });
         });
       });

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_exceptions = require("../../../../utils/exceptions");
 var import_reactive2 = require("../../../../reactive");
 const SchemaField = (0, import_react.createSchemaField)();
 const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
@@ -125,6 +126,15 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
     }
   };
   const openView = model.context.viewer[mode].bind(model.context.viewer);
+  const resolvedUiModeProps = (0, import_reactive.toJS)(uiModeProps) || {};
+  const { zIndex: uiModeZIndex, ...restUiModeProps } = resolvedUiModeProps;
+  const resolveDialogZIndex = /* @__PURE__ */ __name((rawZIndex) => {
+    var _a2, _b2;
+    const nextZIndex = typeof ((_a2 = model.context.viewer) == null ? void 0 : _a2.getNextZIndex) === "function" ? model.context.viewer.getNextZIndex() : (((_b2 = model.context.themeToken) == null ? void 0 : _b2.zIndexPopupBase) || 1e3) + 1;
+    const inputZIndex = Number(rawZIndex) || 0;
+    return Math.max(nextZIndex, inputZIndex);
+  }, "resolveDialogZIndex");
+  const mergedZIndex = resolveDialogZIndex(uiModeZIndex);
   const form = (0, import_core.createForm)({
     initialValues: (0, import_utils.compileUiSchema)(scopes, initialValues)
   });
@@ -140,7 +150,8 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
     title: dialogTitle || t(title),
     width: dialogWidth,
     destroyOnClose: true,
-    ...(0, import_reactive.toJS)(uiModeProps),
+    ...restUiModeProps,
+    zIndex: mergedZIndex,
     // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
     inputArgs,
     onClose: /* @__PURE__ */ __name(() => {
@@ -154,7 +165,11 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
         (0, import_react2.useEffect)(() => {
           return (0, import_reactive.autorun)(() => {
             const dynamicProps = (0, import_reactive.toJS)(uiModeProps);
-            currentDialog.update(dynamicProps);
+            const { zIndex, ...restDynamicProps } = dynamicProps || {};
+            currentDialog.update({
+              ...restDynamicProps,
+              zIndex: resolveDialogZIndex(zIndex)
+            });
           });
         }, []);
         const compiledFormSchema = (0, import_utils.compileUiSchema)(scopes, formSchema);
@@ -195,7 +210,10 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
                   await afterParamsSave(flowRuntimeContext, currentValues, previousParams);
                 }
               } catch (error) {
-                if (error instanceof import_utils.FlowExitException) {
+                if (error instanceof import_utils.FlowCancelSaveException) {
+                  return;
+                }
+                if (error instanceof import_utils.FlowExitException || error instanceof import_exceptions.FlowExitAllException) {
                   currentDialog.close();
                   return;
                 }

package/lib/components/subModel/AddSubModelButton.js

@@ -376,6 +376,21 @@ const AddSubModelButtonCore = /* @__PURE__ */ __name(function AddSubModelButton(
     }),
     [model, subModelKey, subModelType]
   );
+  import_react.default.useEffect(() => {
+    var _a, _b, _c;
+    const handleSubModelChanged = /* @__PURE__ */ __name(() => {
+      setRefreshTick((x) => x + 1);
+    }, "handleSubModelChanged");
+    (_a = model.emitter) == null ? void 0 : _a.on("onSubModelAdded", handleSubModelChanged);
+    (_b = model.emitter) == null ? void 0 : _b.on("onSubModelRemoved", handleSubModelChanged);
+    (_c = model.emitter) == null ? void 0 : _c.on("onSubModelReplaced", handleSubModelChanged);
+    return () => {
+      var _a2, _b2, _c2;
+      (_a2 = model.emitter) == null ? void 0 : _a2.off("onSubModelAdded", handleSubModelChanged);
+      (_b2 = model.emitter) == null ? void 0 : _b2.off("onSubModelRemoved", handleSubModelChanged);
+      (_c2 = model.emitter) == null ? void 0 : _c2.off("onSubModelReplaced", handleSubModelChanged);
+    };
+  }, [model]);
   const onClick = /* @__PURE__ */ __name(async (info) => {
     const clickedItem = info.originalItem || info;
     const item = clickedItem.originalItem || clickedItem;
@@ -415,7 +430,7 @@ const AddSubModelButtonCore = /* @__PURE__ */ __name(function AddSubModelButton(
     }
     let addedModel;
     try {
-      addedModel = model.flowEngine.createModel({
+      addedModel = await model.flowEngine.createModelAsync({
         ...import_lodash.default.cloneDeep(createOpts),
         parentId: model.uid,
         subKey: subModelKey,
@@ -461,6 +476,17 @@ const AddSubModelButtonCore = /* @__PURE__ */ __name(function AddSubModelButton(
     () => transformItems(finalItems, model, subModelKey, subModelType),
     [finalItems, model, subModelKey, subModelType]
   );
+  (0, import_react.useEffect)(() => {
+    const handleSubModelChange = /* @__PURE__ */ __name(() => {
+      setRefreshTick((x) => x + 1);
+    }, "handleSubModelChange");
+    model.emitter.on("onSubModelAdded", handleSubModelChange);
+    model.emitter.on("onSubModelRemoved", handleSubModelChange);
+    return () => {
+      model.emitter.off("onSubModelAdded", handleSubModelChange);
+      model.emitter.off("onSubModelRemoved", handleSubModelChange);
+    };
+  }, [model]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_LazyDropdown.default,
     {

package/lib/components/subModel/utils.js

@@ -44,7 +44,7 @@ __export(utils_exports, {
   buildWrapperFieldChildren: () => buildWrapperFieldChildren
 });
 module.exports = __toCommonJS(utils_exports);
-var _ = __toESM(require("lodash"));
+var import_lodash = __toESM(require("lodash"));
 var import_utils = require("../../utils");
 async function callHideFunction(hide, ctx) {
   if (typeof hide === "function") {
@@ -107,7 +107,7 @@ function buildSubModelChildren(M, ctx) {
             const extraArg = args && args.length > 0 ? args[args.length - 1] : void 0;
             const defaultOpts = await (0, import_utils.resolveCreateModelOptions)(meta == null ? void 0 : meta.createModelOptions, ctx, extraArg);
             const childOpts = await (0, import_utils.resolveCreateModelOptions)(src, ctx, extraArg);
-            return _.merge({}, _.cloneDeep(defaultOpts), childOpts);
+            return import_lodash.default.merge({}, import_lodash.default.cloneDeep(defaultOpts), childOpts);
           };
         }
         return node;

package/lib/components/variables/VariableInput.js

@@ -198,8 +198,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
   (0, import_react.useEffect)(() => {
     if (!resolvedMetaTreeNode) return;
     if (!Array.isArray(resolvedMetaTree) || innerValue == null) return;
-    const finalValue = (resolveValueFromPath == null ? void 0 : resolveValueFromPath(resolvedMetaTreeNode)) || innerValue;
-    emitChange(finalValue, resolvedMetaTreeNode);
+    emitChange(innerValue, resolvedMetaTreeNode);
     setCurrentMetaTreeNode(resolvedMetaTreeNode);
   }, [resolvedMetaTreeNode]);
   const composingRef = (0, import_react.useRef)(false);
@@ -230,12 +229,18 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
   );
   const handleVariableSelect = (0, import_react.useCallback)(
     (variableValue, metaTreeNode) => {
+      if (!metaTreeNode && variableValue === "") {
+        const cleared = clearValue !== void 0 ? clearValue : null;
+        setInnerValue(cleared);
+        emitChange(cleared);
+        return;
+      }
       setCurrentMetaTreeNode(metaTreeNode);
       const finalValue = (resolveValueFromPath == null ? void 0 : resolveValueFromPath(metaTreeNode)) || variableValue;
       setInnerValue(finalValue);
       emitChange(finalValue, metaTreeNode);
     },
-    [emitChange, resolveValueFromPath]
+    [emitChange, resolveValueFromPath, clearValue]
   );
   const { disabled } = restProps;
   const handleClear = (0, import_react.useCallback)(() => {
@@ -265,7 +270,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
   }, [restProps]);
   const inputProps = (0, import_react.useMemo)(() => {
     const baseProps = {
-      value: innerValue ?? "",
+      value: ValueComponent === import_antd.Input ? innerValue ?? "" : innerValue,
       onChange: handleInputChange,
       disabled
     };

package/lib/components/variables/VariableTag.js

@@ -59,53 +59,60 @@ const VariableTagComponent = /* @__PURE__ */ __name(({
   const ctx = (0, import_FlowContextProvider.useFlowContext)();
   const { data: displayedValue } = (0, import_ahooks.useRequest)(
     async () => {
-      if (metaTreeNode) {
-        return metaTreeNode.parentTitles ? [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join("/") : ctx.t(metaTreeNode.title) || "";
-      }
-      if (!value) return String(value);
-      const rawPath = (0, import_utils.parseValueToPath)(value);
-      if (!rawPath || !Array.isArray(resolvedMetaTree)) {
-        return Array.isArray(rawPath) ? rawPath.join("/") : String(value);
-      }
-      const topNames = new Set((resolvedMetaTree || []).map((n) => String(n == null ? void 0 : n.name)));
-      const path = !topNames.has(String(rawPath[0])) ? rawPath.slice(1) : rawPath;
-      if (!path.length) return "";
-      let nodes = resolvedMetaTree;
-      let deepest = null;
-      let matchedCount = 0;
-      for (let i = 0; i < path.length; i++) {
-        if (!nodes) break;
-        const seg = String(path[i]);
-        const node = nodes.find((n) => String(n == null ? void 0 : n.name) === seg);
-        if (!node) break;
-        deepest = node;
-        matchedCount = i + 1;
-        if (i < path.length - 1) {
-          if (Array.isArray(node.children)) {
-            nodes = node.children;
-          } else if (typeof node.children === "function") {
-            try {
-              const childNodes = await node.children();
-              node.children = childNodes;
-              nodes = childNodes;
-            } catch {
+      const resolveLabelFromPath = /* @__PURE__ */ __name(async (rawPath2) => {
+        if (!rawPath2) return null;
+        if (!Array.isArray(rawPath2)) return null;
+        if (!Array.isArray(resolvedMetaTree)) return null;
+        const topNames = new Set((resolvedMetaTree || []).map((n) => String(n == null ? void 0 : n.name)));
+        const path = !topNames.has(String(rawPath2[0])) ? rawPath2.slice(1) : rawPath2;
+        if (!path.length) return "";
+        let nodes = resolvedMetaTree;
+        const titleChain = [];
+        let matchedCount = 0;
+        for (let i = 0; i < path.length; i++) {
+          if (!nodes) break;
+          const seg = String(path[i]);
+          const node = nodes.find((n) => String(n == null ? void 0 : n.name) === seg);
+          if (!node) break;
+          titleChain.push(String(node.title ?? node.name ?? seg));
+          matchedCount = i + 1;
+          if (i < path.length - 1) {
+            if (Array.isArray(node.children)) {
+              nodes = node.children;
+            } else if (typeof node.children === "function") {
+              try {
+                const childNodes = await node.children();
+                node.children = childNodes;
+                nodes = childNodes;
+              } catch {
+                nodes = void 0;
+              }
+            } else {
               nodes = void 0;
             }
-          } else {
-            nodes = void 0;
           }
         }
-      }
-      if (deepest) {
-        const titles = deepest.parentTitles ? [...deepest.parentTitles, deepest.title] : [deepest.title];
-        let label = titles.map(ctx.t).join("/");
+        if (matchedCount === 0) return null;
+        let label2 = titleChain.map(ctx.t).join("/");
         if (matchedCount < path.length) {
           const tail = path.slice(matchedCount).join("/");
-          label = tail ? `${label}/${tail}` : label;
+          label2 = tail ? `${label2}/${tail}` : label2;
         }
-        return label;
+        return label2;
+      }, "resolveLabelFromPath");
+      if (metaTreeNode == null ? void 0 : metaTreeNode.parentTitles) {
+        return [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join("/");
+      }
+      if (metaTreeNode) {
+        const rawPath2 = (0, import_utils.parseValueToPath)(value) || metaTreeNode.paths;
+        const label2 = await resolveLabelFromPath(rawPath2);
+        return label2 ?? ctx.t(metaTreeNode.title) ?? "";
       }
-      return path.join("/");
+      if (!value) return String(value);
+      const rawPath = (0, import_utils.parseValueToPath)(value);
+      const label = await resolveLabelFromPath(rawPath);
+      if (label != null) return label;
+      return Array.isArray(rawPath) ? rawPath.join("/") : String(value);
     },
     { refreshDeps: [resolvedMetaTree, value, metaTreeNode] }
   );

package/lib/components/variables/utils.d.ts

@@ -12,6 +12,13 @@ export declare const parseValueToPath: (value: string) => string[] | undefined;
 export declare const formatPathToValue: (item: MetaTreeNode) => string;
 export declare const loadMetaTreeChildren: (metaNode: MetaTreeNode) => Promise<MetaTreeNode[]>;
 export declare const searchInLoadedNodes: (options: ContextSelectorItem[], searchText: string, parentPaths?: string[]) => ContextSelectorItem[];
+/**
+ * 仅在“已加载节点”范围内按关键字过滤 options（保留树结构）。
+ * - 匹配父节点：保留原节点引用（含原 children），避免不必要的实体重建。
+ * - 匹配子节点：返回裁剪后的父节点副本，children 仅包含命中分支。
+ * - 未加载 children（即 children 不为数组）不会递归搜索。
+ */
+export declare const filterLoadedContextSelectorItems: (options: ContextSelectorItem[] | undefined, keyword: string) => ContextSelectorItem[];
 export declare const buildContextSelectorItems: (metaTree: MetaTreeNode[]) => ContextSelectorItem[];
 /**
  * 预加载：根据路径逐级加载 ContextSelectorItem 的 children，保证打开时已展开对应层级。

package/lib/components/variables/utils.js

@@ -30,6 +30,7 @@ __export(utils_exports, {
   buildContextSelectorItems: () => buildContextSelectorItems,
   createDefaultConverters: () => createDefaultConverters,
   createFinalConverters: () => createFinalConverters,
+  filterLoadedContextSelectorItems: () => filterLoadedContextSelectorItems,
   formatPathToValue: () => formatPathToValue,
   isVariableValue: () => isVariableValue,
   loadMetaTreeChildren: () => loadMetaTreeChildren,
@@ -39,6 +40,16 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_utils = require("../../utils");
+const getContextSelectorLabelText = /* @__PURE__ */ __name((node) => {
+  var _a;
+  if (typeof node.label === "string") {
+    return node.label;
+  }
+  if (typeof ((_a = node.meta) == null ? void 0 : _a.title) === "string") {
+    return node.meta.title;
+  }
+  return node.value;
+}, "getContextSelectorLabelText");
 const parseValueToPath = /* @__PURE__ */ __name((value) => {
   if (typeof value !== "string") return void 0;
   const trimmed = value.trim();
@@ -71,10 +82,9 @@ const searchInLoadedNodes = /* @__PURE__ */ __name((options, searchText, parentP
   const lowerSearchText = searchText.toLowerCase().trim();
   const results = [];
   const searchRecursive = /* @__PURE__ */ __name((nodes, currentPath = []) => {
-    var _a;
     for (const node of nodes) {
       const nodePath = [...currentPath, node.value];
-      const labelText = typeof node.label === "string" ? node.label : typeof ((_a = node.meta) == null ? void 0 : _a.title) === "string" ? node.meta.title : String(node.value);
+      const labelText = getContextSelectorLabelText(node);
       if (labelText.toLowerCase().includes(lowerSearchText)) {
         results.push(node);
       }
@@ -86,6 +96,35 @@ const searchInLoadedNodes = /* @__PURE__ */ __name((options, searchText, parentP
   searchRecursive(options, []);
   return results;
 }, "searchInLoadedNodes");
+const filterLoadedContextSelectorItems = /* @__PURE__ */ __name((options, keyword) => {
+  if (!Array.isArray(options) || options.length === 0) return [];
+  const normalizedKeyword = keyword.trim().toLowerCase();
+  if (!normalizedKeyword) {
+    return options;
+  }
+  const filterNode = /* @__PURE__ */ __name((node) => {
+    const labelText = getContextSelectorLabelText(node).toLowerCase();
+    const selfMatched = labelText.includes(normalizedKeyword);
+    if (selfMatched) {
+      return node;
+    }
+    if (!Array.isArray(node.children) || node.children.length === 0) {
+      return null;
+    }
+    const filteredChildren = node.children.map((child) => filterNode(child)).filter((item) => item !== null);
+    if (filteredChildren.length === 0) {
+      return null;
+    }
+    if (filteredChildren.length === node.children.length && filteredChildren.every((child, idx) => child === node.children[idx])) {
+      return node;
+    }
+    return {
+      ...node,
+      children: filteredChildren
+    };
+  }, "filterNode");
+  return options.map((node) => filterNode(node)).filter((item) => item !== null);
+}, "filterLoadedContextSelectorItems");
 const buildContextSelectorItems = /* @__PURE__ */ __name((metaTree) => {
   if (!metaTree || !Array.isArray(metaTree)) {
     console.warn("buildContextSelectorItems received invalid metaTree:", metaTree);
@@ -170,6 +209,7 @@ const createFinalConverters = /* @__PURE__ */ __name((propConverters) => {
   buildContextSelectorItems,
   createDefaultConverters,
   createFinalConverters,
+  filterLoadedContextSelectorItems,
   formatPathToValue,
   isVariableValue,
   loadMetaTreeChildren,