@nocobase/flow-engine 2.0.0-alpha.4 → 2.0.0-alpha.41

package/lib/components/MobilePopup.js

@@ -0,0 +1,102 @@
+/**
+ * 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 MobilePopup_exports = {};
+__export(MobilePopup_exports, {
+  MobilePopup: () => MobilePopup
+});
+module.exports = __toCommonJS(MobilePopup_exports);
+var import_antd = require("antd");
+var import_antd_mobile = require("antd-mobile");
+var import_react = __toESM(require("react"));
+var import_antd_mobile_icons = require("antd-mobile-icons");
+var import_MobilePopup = require("./MobilePopup.style");
+var import_react_i18next = require("react-i18next");
+const MobilePopup = /* @__PURE__ */ __name((props) => {
+  const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
+  const { t } = (0, import_react_i18next.useTranslation)();
+  const { componentCls, hashId } = (0, import_MobilePopup.useMobileActionDrawerStyle)();
+  const style = (0, import_react.useMemo)(() => {
+    return {
+      minHeight
+    };
+  }, [minHeight]);
+  const theme = (0, import_react.useMemo)(() => {
+    return {
+      token: {
+        paddingPageHorizontal: 8,
+        paddingPageVertical: 8,
+        marginBlock: 12,
+        borderRadiusBlock: 8,
+        fontSize: 14
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd_mobile.Popup,
+    {
+      className: `${componentCls} ${hashId} ${className || ""}`,
+      visible,
+      onClose: closePopup,
+      onMaskClick: closePopup,
+      bodyClassName: "nb-mobile-action-drawer-body",
+      bodyStyle: {
+        padding: 0
+      },
+      maskStyle: style,
+      style,
+      destroyOnClose: true
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "nb-mobile-action-drawer-close-icon",
+        onClick: closePopup,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": t("Close")
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)
+    )),
+    children,
+    footer && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-footer" }, footer)
+  ));
+}, "MobilePopup");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MobilePopup
+});

package/lib/components/MobilePopup.style.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+import { useStyleRegister } from '@ant-design/cssinjs';
+type UseComponentStyleResult = {
+    wrapSSR: ReturnType<typeof useStyleRegister>;
+    hashId: string;
+    componentCls: string;
+    rootPrefixCls: string;
+};
+export declare const useMobileActionDrawerStyle: (props?: any) => UseComponentStyleResult;
+export {};

package/lib/components/MobilePopup.style.js

@@ -0,0 +1,186 @@
+/**
+ * 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 __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MobilePopup_style_exports = {};
+__export(MobilePopup_style_exports, {
+  useMobileActionDrawerStyle: () => useMobileActionDrawerStyle
+});
+module.exports = __toCommonJS(MobilePopup_style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_shared = require("@formily/shared");
+var import_react = require("react");
+var import_antd = require("antd");
+const usePrefixCls = /* @__PURE__ */ __name((tag, props) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext) || {};
+  if ("ConfigContext" in import_antd.ConfigProvider) {
+    return (getPrefixCls == null ? void 0 : getPrefixCls(tag, props == null ? void 0 : props.prefixCls)) || "";
+  } else {
+    const prefix = (props == null ? void 0 : props.prefixCls) ?? "ant-";
+    return `${prefix}${tag ?? ""}`;
+  }
+}, "usePrefixCls");
+const { ConfigContext } = import_antd.ConfigProvider;
+const useConfig = /* @__PURE__ */ __name(() => (0, import_react.useContext)(ConfigContext), "useConfig");
+const useToken = import_antd.theme.useToken;
+const genCommonStyle = /* @__PURE__ */ __name((token, componentPrefixCls) => {
+  const { fontFamily, fontSize } = token;
+  const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+  return {
+    [rootPrefixSelector]: {
+      fontFamily,
+      fontSize,
+      boxSizing: "border-box",
+      "&::before, &::after": {
+        boxSizing: "border-box"
+      },
+      [rootPrefixSelector]: {
+        boxSizing: "border-box",
+        "&::before, &::after": {
+          boxSizing: "border-box"
+        }
+      }
+    }
+  };
+}, "genCommonStyle");
+const genStyleHook = /* @__PURE__ */ __name((component, styleFn) => {
+  return (props) => {
+    const { theme: theme2, token, hashId } = useToken();
+    const { getPrefixCls, iconPrefixCls } = useConfig();
+    const prefixCls = usePrefixCls(component);
+    const rootPrefixCls = getPrefixCls();
+    const wrapSSR = (0, import_cssinjs.useStyleRegister)(
+      {
+        theme: theme2,
+        token,
+        hashId,
+        path: ["formily-antd", component, prefixCls, iconPrefixCls]
+      },
+      () => {
+        const componentCls = `.${prefixCls}`;
+        const mergedToken = (0, import_shared.merge)(token, {
+          componentCls,
+          prefixCls,
+          iconCls: `.${iconPrefixCls}`,
+          antCls: `.${rootPrefixCls}`
+        });
+        const styleInterpolation = styleFn(mergedToken, props, {
+          hashId,
+          prefixCls,
+          rootPrefixCls,
+          iconPrefixCls
+        });
+        return [genCommonStyle(token, prefixCls), styleInterpolation];
+      }
+    );
+    const memoizedWrapSSR = (0, import_react.useMemo)(() => {
+      return wrapSSR;
+    }, [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    return {
+      wrapSSR: memoizedWrapSSR,
+      hashId,
+      componentCls: prefixCls,
+      rootPrefixCls
+    };
+  };
+}, "genStyleHook");
+const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      ".nb-mobile-action-drawer-header": {
+        height: "var(--nb-mobile-page-header-height)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderBottom: `1px solid ${token.colorSplit}`,
+        position: "sticky",
+        top: 0,
+        backgroundColor: "white",
+        zIndex: 1e3,
+        // to match the button named 'Add block'
+        "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
+          margin: 12
+        }
+      },
+      ".nb-mobile-action-drawer-placeholder": {
+        display: "inline-block",
+        padding: 12,
+        visibility: "hidden"
+      },
+      ".nb-mobile-action-drawer-close-icon": {
+        display: "inline-block",
+        padding: 12,
+        cursor: "pointer"
+      },
+      ".nb-mobile-action-drawer-body": {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        maxHeight: "calc(100% - var(--nb-mobile-page-header-height))",
+        overflowY: "auto",
+        overflowX: "hidden",
+        backgroundColor: token.colorBgLayout,
+        // 不带 tab 页的半窗
+        "& > .nb-grid-container": {
+          padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`
+        },
+        // 带有 tab 页的半窗
+        ".ant-tabs-nav": {
+          marginBottom: "0px !important",
+          padding: `0 ${token.paddingPageHorizontal + token.borderRadiusBlock / 2}px`,
+          backgroundColor: token.colorBgContainer
+        },
+        // clear the margin-bottom of the last block
+        "& > .nb-grid-container > .nb-grid > .nb-grid-warp > .nb-grid-row:nth-last-child(2) .noco-card-item": {
+          marginBottom: 0,
+          "& > .ant-card": {
+            marginBottom: "0 !important"
+          }
+        }
+      },
+      ".nb-mobile-action-drawer-footer": {
+        padding: "8px var(--nb-mobile-page-tabs-content-padding)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        position: "sticky",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1e3,
+        borderTop: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.colorBgLayout,
+        ".ant-btn": {
+          marginLeft: 8
+        }
+      }
+    }
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMobileActionDrawerStyle
+});

package/lib/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './FormItem';
 export * from './settings';
 export * from './subModel';
 export * from './variables';
+export * from './MobilePopup';

package/lib/components/index.js

@@ -33,6 +33,7 @@ __reExport(components_exports, require("./FormItem"), module.exports);
 __reExport(components_exports, require("./settings"), module.exports);
 __reExport(components_exports, require("./subModel"), module.exports);
 __reExport(components_exports, require("./variables"), module.exports);
+__reExport(components_exports, require("./MobilePopup"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./common/FlowSettingsButton"),
@@ -44,5 +45,6 @@ __reExport(components_exports, require("./variables"), module.exports);
   ...require("./FormItem"),
   ...require("./settings"),
   ...require("./subModel"),
-  ...require("./variables")
+  ...require("./variables"),
+  ...require("./MobilePopup")
 });

package/lib/components/settings/independents/dropdown/FlowsDropdownButton.js

@@ -96,7 +96,7 @@ const FlowsDropdownButtonWithModel = (0, import_react.observer)(
         const flowsArray = Array.from(flows.values());
         return flowsArray.map((flow) => {
           const configurableSteps = Object.entries(flow.steps).map(([stepKey, stepDefinition]) => {
-            var _a, _b;
+            var _a;
             const actionStep = stepDefinition;
             if (actionStep.hideInSettings) {
               return null;
@@ -104,7 +104,7 @@ const FlowsDropdownButtonWithModel = (0, import_react.observer)(
             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);
+              const action = (_a = model.getAction) == null ? void 0 : _a.call(model, actionStep.use);
               if (action && action.uiSchema) {
                 actionUiSchema = action.uiSchema;
               }

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

@@ -103,12 +103,24 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   const dropdownMaxHeight = (0, import_hooks.useNiceDropdownMaxHeight)([visible]);
   const copyUidToClipboard = (0, import_react.useCallback)(
     async (uid) => {
+      var _a;
       try {
         await navigator.clipboard.writeText(uid);
         message.success(t("UID copied to clipboard"));
       } catch (error) {
         console.error(t("Copy failed"), ":", error);
-        message.error(t("Copy failed, please copy [{{uid}}] manually.", { uid }));
+        const isHttps = typeof window !== "undefined" && ((_a = window.location) == null ? void 0 : _a.protocol) === "https:";
+        if (!isHttps) {
+          message.error(
+            t(
+              "Copy failed under HTTP. Clipboard API is unavailable on non-HTTPS pages. Please copy [{{uid}}] manually.",
+              { uid }
+            )
+          );
+          return;
+        } else {
+          message.error(t("Copy failed, please copy [{{uid}}] manually.", { uid }));
+        }
       }
     },
     [message, t]
@@ -216,13 +228,13 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   const getModelConfigurableFlowsAndSteps = (0, import_react.useCallback)(
     async (targetModel, modelKey) => {
       try {
-        const flows = targetModel.getFlows();
+        const flows = targetModel.constructor.globalFlowRegistry.getFlows();
         const flowsArray = Array.from(flows.values());
         const flowsWithSteps = await Promise.all(
           flowsArray.map(async (flow) => {
             const configurableSteps = await Promise.all(
               Object.entries(flow.steps).map(async ([stepKey, stepDefinition]) => {
-                var _a, _b;
+                var _a;
                 const actionStep = stepDefinition;
                 if (actionStep.hideInSettings) {
                   return null;
@@ -232,9 +244,9 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
                 let stepTitle = actionStep.title;
                 if (actionStep.use) {
                   try {
-                    const action = (_b = (_a = targetModel.flowEngine) == null ? void 0 : _a.getAction) == null ? void 0 : _b.call(_a, actionStep.use);
+                    const action = (_a = targetModel.getAction) == null ? void 0 : _a.call(targetModel, actionStep.use);
                     hasActionUiSchema = action && action.uiSchema != null;
-                    stepTitle = stepTitle || action.title;
+                    stepTitle = stepTitle || (action == null ? void 0 : action.title);
                   } catch (error) {
                     console.warn(t("Failed to get action {{action}}", { action: actionStep.use }), ":", error);
                   }

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

@@ -122,7 +122,7 @@ const FlowsContextMenuWithModel = (0, import_react.observer)(
         const flowsArray = Array.from(flows.values());
         return flowsArray.map((flow) => {
           const configurableSteps = Object.entries(flow.steps).map(([stepKey, stepDefinition]) => {
-            var _a, _b;
+            var _a;
             const actionStep = stepDefinition;
             if (actionStep.hideInSettings) {
               return null;
@@ -130,7 +130,7 @@ const FlowsContextMenuWithModel = (0, import_react.observer)(
             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);
+              const action = (_a = model.getAction) == null ? void 0 : _a.call(model, actionStep.use);
               if (action && action.uiSchema) {
                 actionUiSchema = action.uiSchema;
               }

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

@@ -83,7 +83,25 @@ 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;
 
@@ -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);
@@ -149,10 +168,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;
 
@@ -417,7 +433,13 @@ 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
@@ -478,6 +500,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

@@ -59,7 +59,7 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
   uiModeProps,
   cleanup
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const t = (0, import_utils.getT)(model);
   const message = model.context.message;
   if (!model) {
@@ -132,6 +132,12 @@ const openStepSettingsDialog = /* @__PURE__ */ __name(async ({
     width: dialogWidth,
     destroyOnClose: true,
     ...(0, import_reactive.toJS)(uiModeProps),
+    // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
+    inputArgs: (0, import_utils.buildSettingsViewInputArgs)(
+      model,
+      { ...((_e = (0, import_reactive.toJS)(uiModeProps)) == null ? void 0 : _e.inputArgs) || {}, __isSettingsPopup: true },
+      { navigationOverride: (_f = ctx == null ? void 0 : ctx.view) == null ? void 0 : _f.navigation }
+    ),
     onClose: /* @__PURE__ */ __name(() => {
       if (cleanup) {
         cleanup();

package/lib/components/variables/VariableInput.js

@@ -94,6 +94,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
   showValueComponent = true,
   onlyLeafSelectable = false,
   clearValue,
+  ignoreFieldNames,
   ...restProps
 }) => {
   const [currentMetaTreeNode, setCurrentMetaTreeNode] = (0, import_react.useState)(null);
@@ -143,7 +144,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
   }, [currentMetaTreeNode, innerValue, resolvedMetaTree, resolvePathFromValue]);
   (0, import_react.useEffect)(() => {
     const restoreFromValue = /* @__PURE__ */ __name(async () => {
-      if (!Array.isArray(resolvedMetaTree) || !value) return;
+      if (!Array.isArray(resolvedMetaTree) || value == null) return;
       if (currentMetaTreeNode) {
         return;
       }
@@ -196,7 +197,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
   }, [renderInputComponent, resolvedMetaTreeNode, innerValue]);
   (0, import_react.useEffect)(() => {
     if (!resolvedMetaTreeNode) return;
-    if (!Array.isArray(resolvedMetaTree) || !innerValue) return;
+    if (!Array.isArray(resolvedMetaTree) || innerValue == null) return;
     const finalValue = (resolveValueFromPath == null ? void 0 : resolveValueFromPath(resolvedMetaTreeNode)) || innerValue;
     emitChange(finalValue, resolvedMetaTreeNode);
     setCurrentMetaTreeNode(resolvedMetaTreeNode);
@@ -241,18 +242,30 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
     if (disabled) {
       return;
     }
-    setCurrentMetaTreeNode(null);
     const cleared = clearValue !== void 0 ? clearValue : null;
     setInnerValue(cleared);
+    try {
+      const path = resolvePathFromValue == null ? void 0 : resolvePathFromValue(cleared);
+      if (Array.isArray(resolvedMetaTree) && path && path.length > 0) {
+        const node = findMetaTreeNodeByPath(resolvedMetaTree, path);
+        if (node) {
+          setCurrentMetaTreeNode(node);
+          emitChange(cleared, node);
+          return;
+        }
+      }
+    } catch (_) {
+    }
+    setCurrentMetaTreeNode(null);
     emitChange(cleared);
-  }, [emitChange, disabled, clearValue]);
+  }, [emitChange, disabled, clearValue, resolvedMetaTree, resolvePathFromValue]);
   const stableProps = (0, import_react.useMemo)(() => {
     const { style, onFocus, onBlur, disabled: disabled2, ...otherProps } = restProps;
     return { style, onFocus, onBlur, otherProps };
   }, [restProps]);
   const inputProps = (0, import_react.useMemo)(() => {
     const baseProps = {
-      value: innerValue || "",
+      value: innerValue ?? "",
       onChange: handleInputChange,
       disabled
     };
@@ -311,6 +324,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
       parseValueToPath: resolvePathFromValue,
       formatPathToValue: resolveValueFromPath,
       onlyLeafSelectable,
+      ignoreFieldNames,
       ...!showValueComponent && { children: null, placeholder: restProps == null ? void 0 : restProps.placeholder }
     }
   ));

package/lib/components/variables/VariableTag.js

@@ -63,8 +63,49 @@ const VariableTagComponent = /* @__PURE__ */ __name(({
         return metaTreeNode.parentTitles ? [...metaTreeNode.parentTitles, metaTreeNode.title].map(ctx.t).join("/") : ctx.t(metaTreeNode.title) || "";
       }
       if (!value) return String(value);
-      const path = (0, import_utils.parseValueToPath)(value);
-      return path ? path.join("/") : 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 {
+              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 < path.length) {
+          const tail = path.slice(matchedCount).join("/");
+          label = tail ? `${label}/${tail}` : label;
+        }
+        return label;
+      }
+      return path.join("/");
     },
     { refreshDeps: [resolvedMetaTree, value, metaTreeNode] }
   );

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

@@ -18,6 +18,7 @@ export interface FlowContextSelectorProps extends Omit<CascaderProps<ContextSele
     formatPathToValue?: (item: MetaTreeNode) => string;
     open?: boolean;
     onlyLeafSelectable?: boolean;
+    ignoreFieldNames?: string[];
 }
 export interface ContextSelectorItem {
     label: React.ReactNode;
@@ -62,6 +63,7 @@ export interface VariableInputProps {
      * 默认行为为 null；可设置为 '' 等，以便清空后默认切换为“常量-空字符串”。
      */
     clearValue?: any;
+    ignoreFieldNames?: string[];
     [key: string]: any;
 }
 export interface VariableTagProps {