@nocobase/flow-engine 2.2.0-alpha.2 → 2.2.0-alpha.4

package/lib/components/FlowContextSelector.js

@@ -57,6 +57,15 @@ const cascaderPopupAutoHeightClassName = import_css.css`
     max-height: 50vh;
   }
 `;
+function getMetaNodeTooltip(meta) {
+  if (!meta) {
+    return void 0;
+  }
+  const metaWithTooltip = meta;
+  const options = meta.options;
+  return metaWithTooltip.tooltip ?? (options == null ? void 0 : options.tooltip);
+}
+__name(getMetaNodeTooltip, "getMetaNodeTooltip");
 const normalizePath = /* @__PURE__ */ __name((path) => {
   if (!Array.isArray(path)) {
     return void 0;
@@ -90,6 +99,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   value,
   onChange,
   children,
+  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = import_utils.parseValueToPath,
@@ -112,15 +122,27 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
         const disabled = meta ? !!(typeof meta.disabled === "function" ? meta.disabled() : meta.disabled) : false;
         const disabledReason = meta ? typeof meta.disabledReason === "function" ? meta.disabledReason() : meta.disabledReason : void 0;
         const baseLabel = typeof o.label === "string" ? flowCtx.t(o.label) : o.label;
-        const label = disabled ? /* @__PURE__ */ import_react.default.createElement("span", null, baseLabel, /* @__PURE__ */ import_react.default.createElement(
+        const labelText = typeof baseLabel === "string" ? baseLabel : String(o.value);
+        const tooltip = getMetaNodeTooltip(meta);
+        const tooltipTitle = disabled ? disabledReason || tooltip || flowCtx.t("This variable is not available") : tooltip;
+        const label = tooltipTitle ? /* @__PURE__ */ import_react.default.createElement("span", null, baseLabel, /* @__PURE__ */ import_react.default.createElement(
           import_antd.Tooltip,
           {
-            title: disabledReason || flowCtx.t("This variable is not available"),
-            placement: "right",
-            overlayClassName: "flow-variable-disabled-tip",
+            title: typeof tooltipTitle === "string" ? flowCtx.t(tooltipTitle) : tooltipTitle,
+            placement: "top",
+            classNames: { root: "flow-variable-tip" },
             destroyTooltipOnHide: true
           },
-          /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { style: { marginLeft: 6, color: "rgba(0,0,0,0.35)" } })
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icons.QuestionCircleOutlined,
+            {
+              "aria-label": `${labelText} tooltip`,
+              style: {
+                marginLeft: token.marginXXS,
+                color: disabled ? token.colorTextDisabled : token.colorTextDescription
+              }
+            }
+          )
         )) : baseLabel;
         return {
           ...o,
@@ -130,7 +152,7 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
         };
       });
     },
-    [flowCtx]
+    [flowCtx, token.colorTextDescription, token.colorTextDisabled, token.marginXXS]
   );
   const [updateFlag, setUpdateFlag] = (0, import_react.useState)(0);
   const [searchText, setSearchText] = (0, import_react.useState)("");
@@ -220,9 +242,9 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
     (0, import_utils.preloadContextSelectorPath)(options, pathToPreload, triggerUpdate);
   }, [options, pathToPreload, triggerUpdate]);
   const defaultChildren = (0, import_react.useMemo)(() => {
-    const hasSelected = currentPath && currentPath.length > 0;
+    const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
     return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: hasSelected ? "primary" : "default", style: defaultButtonStyle }, "x");
-  }, [currentPath]);
+  }, [active, currentPath]);
   const handleChange = (0, import_react.useCallback)(
     (selectedValues, selectedOptions) => {
       const lastOption = selectedOptions == null ? void 0 : selectedOptions[selectedOptions.length - 1];

package/lib/components/MobilePopup.style.js

@@ -96,9 +96,17 @@ const genStyleHook = /* @__PURE__ */ __name((component, styleFn) => {
         return [genCommonStyle(token, prefixCls), styleInterpolation];
       }
     );
-    const memoizedWrapSSR = (0, import_react.useMemo)(() => {
-      return wrapSSR;
-    }, [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    const wrapSSRDeps = [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props];
+    const wrapSSRCacheRef = (0, import_react.useRef)();
+    const currentCache = wrapSSRCacheRef.current;
+    let memoizedWrapSSR = (currentCache == null ? void 0 : currentCache.wrapSSR) || wrapSSR;
+    if (!currentCache || wrapSSRDeps.some((dep, index) => dep !== currentCache.deps[index])) {
+      wrapSSRCacheRef.current = {
+        deps: wrapSSRDeps,
+        wrapSSR
+      };
+      memoizedWrapSSR = wrapSSR;
+    }
     return {
       wrapSSR: memoizedWrapSSR,
       hashId,
@@ -112,7 +120,7 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
   return {
     [componentCls]: {
       ".nb-mobile-action-drawer-header": {
-        height: "var(--nb-mobile-page-header-height)",
+        height: "var(--nb-mobile-page-header-height, 46px)",
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
@@ -139,7 +147,10 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
       ".nb-mobile-action-drawer-body": {
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
-        maxHeight: "calc(100% - var(--nb-mobile-page-header-height))",
+        maxHeight: "calc(100vh - var(--nb-mobile-page-header-height, 46px))",
+        "@supports (height: 100dvh)": {
+          maxHeight: "calc(100dvh - var(--nb-mobile-page-header-height, 46px))"
+        },
         overflowY: "auto",
         overflowX: "hidden",
         backgroundColor: token.colorBgLayout,

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

@@ -17,6 +17,7 @@ export interface VariableHybridInputProps {
     value?: string;
     onChange?: (value: string) => void;
     disabled?: boolean;
+    readOnly?: boolean;
     placeholder?: string;
     addonBefore?: React.ReactNode;
     metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);

package/lib/components/variables/VariableHybridInput.js

@@ -257,7 +257,7 @@ function getCurrentRange(element) {
 __name(getCurrentRange, "getCurrentRange");
 const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
   var _a;
-  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, style } = props;
+  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, readOnly, style } = props;
   const { token } = import_antd.theme.useToken();
   const ctx = (0, import_FlowContextProvider.useFlowContext)();
   const { resolvedMetaTree } = (0, import_useResolvedMetaTree.useResolvedMetaTree)(metaTree);
@@ -390,12 +390,13 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
   );
   const handleInput = (0, import_react.useCallback)(
     ({ currentTarget }) => {
+      if (readOnly) return;
       if (isComposing) return;
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       emitChange(currentTarget);
     },
-    [emitChange, isComposing]
+    [emitChange, isComposing, readOnly]
   );
   const handleBlur = (0, import_react.useCallback)(({ currentTarget }) => {
     setRange(getCurrentRange(currentTarget));
@@ -408,6 +409,7 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
   const handlePaste = (0, import_react.useCallback)(
     (event) => {
       event.preventDefault();
+      if (readOnly) return;
       const text = event.clipboardData.getData("text/plain").replace(/\n/g, " ");
       if (!text) return;
       setChanged(true);
@@ -415,17 +417,18 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
       setRange(getCurrentRange(event.currentTarget));
       emitChange(event.currentTarget);
     },
-    [emitChange]
+    [emitChange, readOnly]
   );
   const handleCompositionStart = (0, import_react.useCallback)(() => setIsComposing(true), []);
   const handleCompositionEnd = (0, import_react.useCallback)(
     ({ currentTarget }) => {
       setIsComposing(false);
+      if (readOnly) return;
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       emitChange(currentTarget);
     },
-    [emitChange]
+    [emitChange, readOnly]
   );
   const wrapperClassName = (0, import_react.useMemo)(
     () => import_css.css`
@@ -544,6 +547,14 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
         }
       }
 
+      &.is-readonly {
+        cursor: default;
+
+        &:hover {
+          border-color: ${token.colorBorder};
+        }
+      }
+
       &.is-error {
         border-color: ${token.colorError};
 
@@ -581,10 +592,12 @@ const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
       "aria-label": "textbox",
       className: (0, import_css.cx)(editorClassName, {
         "is-disabled": disabled,
+        "is-readonly": readOnly,
         "is-error": effectiveStatus === "error",
         "is-warning": effectiveStatus === "warning"
       }),
-      contentEditable: !disabled,
+      contentEditable: !disabled && !readOnly,
+      "aria-readonly": readOnly,
       "data-placeholder": placeholder,
       onInput: handleInput,
       onBlur: handleBlur,

package/lib/components/variables/VariableInput.js

@@ -188,7 +188,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
       }
     }, "restoreFromValue");
     restoreFromValue();
-  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode]);
+  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode, value]);
   const ValueComponent = (0, import_react.useMemo)(() => {
     const Component = renderInputComponent == null ? void 0 : renderInputComponent(resolvedMetaTreeNode);
     const CustomComponent = resolvedMetaTreeNode == null ? void 0 : resolvedMetaTreeNode.render;
@@ -325,6 +325,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
     {
       metaTree: resolvedMetaTree,
       value: innerValue,
+      active: (0, import_utils.isVariableValue)(innerValue),
       onChange: handleVariableSelect,
       parseValueToPath: resolvePathFromValue,
       formatPathToValue: resolveValueFromPath,

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

@@ -13,6 +13,16 @@ export interface FlowContextSelectorProps extends Omit<CascaderProps<ContextSele
     value?: string;
     onChange?: (value: string, metaTreeNode?: MetaTreeNode) => void;
     children?: CascaderProps<ContextSelectorItem>['children'];
+    /**
+     * Controls whether the default `x` trigger button is rendered as active
+     * (`type="primary"`). When omitted, the selector falls back to its parsed
+     * `value` path (`true` iff a valid variable path is currently selected).
+     *
+     * Use this when callers intentionally feed synthetic paths such as
+     * `['constant']` / `['null']` into the cascader to keep menu state aligned,
+     * but only want real variable references to show the blue active button.
+     */
+    active?: boolean;
     metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
     parseValueToPath?: (value: string) => string[] | undefined;
     formatPathToValue?: (item: MetaTreeNode) => string;

package/lib/flowContext.js

@@ -2626,12 +2626,16 @@ const _FlowEngineContext = class _FlowEngineContext extends BaseFlowEngineContex
       }, "get")
     });
     this.defineProperty("auth", {
-      get: /* @__PURE__ */ __name(() => ({
-        roleName: this.api.auth.role,
-        locale: this.api.auth.locale,
-        token: this.api.auth.token,
-        user: this.user
-      }), "get")
+      get: /* @__PURE__ */ __name(() => {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+          roleName: (_b = (_a = this.api) == null ? void 0 : _a.auth) == null ? void 0 : _b.role,
+          locale: (_d = (_c = this.api) == null ? void 0 : _c.auth) == null ? void 0 : _d.locale,
+          token: (_f = (_e = this.api) == null ? void 0 : _e.auth) == null ? void 0 : _f.token,
+          user: this.user
+        };
+      }, "get"),
+      cache: false
     });
     this.defineProperty("date", {
       get: /* @__PURE__ */ __name(() => {

package/package.json

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

package/src/__tests__/flowContext.test.ts

@@ -1607,6 +1607,29 @@ describe('FlowEngine context', () => {
     await expect((engine.context as any).getVar('foo.bar')).rejects.toThrow();
   });
 
+  it('model.context.getVar should resolve the latest ctx.auth.user after user changes', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('api', {
+      value: { auth: { role: 'admin', locale: 'en-US', token: 'token-1' } },
+    });
+    engine.context.defineProperty('user', { value: { id: 1, nickname: 'Alice' } });
+
+    class AuthUserModel extends FlowModel {}
+    engine.registerModels({ AuthUserModel });
+    const model = engine.createModel({ use: 'AuthUserModel' });
+
+    expect(await model.context.getVar('ctx.auth.user.id')).toBe(1);
+    expect(await model.context.getVar('ctx.auth.token')).toBe('token-1');
+
+    engine.context.api.auth.role = 'member';
+    engine.context.api.auth.token = 'token-2';
+    engine.context.defineProperty('user', { value: { id: 2, nickname: 'Bob' } });
+
+    expect(await model.context.getVar('ctx.auth.user.id')).toBe(2);
+    expect(await model.context.getVar('ctx.auth.roleName')).toBe('member');
+    expect(await model.context.getVar('ctx.auth.token')).toBe('token-2');
+  });
+
   it('engine.context.runAction should resolve action from engine.getAction', async () => {
     const engine = new FlowEngine();
 

package/src/components/FlowContextSelector.tsx

@@ -40,6 +40,18 @@ type SelectedPathInfo = {
   meta?: ContextSelectorItem['meta'];
 };
 
+type MetaNodeTooltipOptions = { tooltip?: React.ReactNode };
+
+function getMetaNodeTooltip(meta?: ContextSelectorItem['meta']): React.ReactNode {
+  if (!meta) {
+    return undefined;
+  }
+
+  const metaWithTooltip = meta as ContextSelectorItem['meta'] & MetaNodeTooltipOptions;
+  const options = meta.options as MetaNodeTooltipOptions | undefined;
+  return metaWithTooltip.tooltip ?? options?.tooltip;
+}
+
 const normalizePath = (path: unknown): string[] | undefined => {
   if (!Array.isArray(path)) {
     return undefined;
@@ -85,6 +97,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   value,
   onChange,
   children,
+  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = parseValueToPath,
@@ -120,17 +133,28 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
         // 文本国际化：仅当 label 为字符串时进行翻译
         const baseLabel = typeof o.label === 'string' ? flowCtx.t(o.label) : o.label;
+        const labelText = typeof baseLabel === 'string' ? baseLabel : String(o.value);
+        const tooltip = getMetaNodeTooltip(meta);
+        const tooltipTitle = disabled
+          ? disabledReason || tooltip || flowCtx.t('This variable is not available')
+          : tooltip;
 
-        const label = disabled ? (
+        const label = tooltipTitle ? (
           <span>
             {baseLabel}
             <Tooltip
-              title={disabledReason || flowCtx.t('This variable is not available')}
-              placement="right"
-              overlayClassName="flow-variable-disabled-tip"
+              title={typeof tooltipTitle === 'string' ? flowCtx.t(tooltipTitle) : tooltipTitle}
+              placement="top"
+              classNames={{ root: 'flow-variable-tip' }}
               destroyTooltipOnHide
             >
-              <QuestionCircleOutlined style={{ marginLeft: 6, color: 'rgba(0,0,0,0.35)' }} />
+              <QuestionCircleOutlined
+                aria-label={`${labelText} tooltip`}
+                style={{
+                  marginLeft: token.marginXXS,
+                  color: disabled ? token.colorTextDisabled : token.colorTextDescription,
+                }}
+              />
             </Tooltip>
           </span>
         ) : (
@@ -145,7 +169,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
         };
       });
     },
-    [flowCtx],
+    [flowCtx, token.colorTextDescription, token.colorTextDisabled, token.marginXXS],
   );
 
   // 用于强制重新渲染的状态
@@ -266,13 +290,13 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
   // 默认按钮组件
   const defaultChildren = useMemo(() => {
-    const hasSelected = currentPath && currentPath.length > 0;
+    const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
     return (
       <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle}>
         x
       </Button>
     );
-  }, [currentPath]);
+  }, [active, currentPath]);
 
   // 处理选择变化事件
   const handleChange = useCallback(

package/src/components/MobilePopup.style.ts

@@ -11,7 +11,7 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { merge } from '@formily/shared';
 import type { ComponentTokenMap } from 'antd/es/theme/interface';
-import { useMemo, useContext } from 'react';
+import { useContext, useRef } from 'react';
 import { ConfigProvider, theme } from 'antd';
 
 const usePrefixCls = (
@@ -83,6 +83,10 @@ type UseComponentStyleResult = {
   componentCls: string;
   rootPrefixCls: string;
 };
+type WrapSSRCache = {
+  deps: unknown[];
+  wrapSSR: ReturnType<typeof useStyleRegister>;
+};
 
 const genStyleHook = <ComponentName extends OverrideComponent>(
   component: ComponentName,
@@ -122,9 +126,18 @@ const genStyleHook = <ComponentName extends OverrideComponent>(
 
     // useStyleRegister 有 BUG，会导致重复渲染，所以这里做了一层缓存
     // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
-    const memoizedWrapSSR = useMemo(() => {
-      return wrapSSR;
-    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    const wrapSSRDeps = [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props];
+    const wrapSSRCacheRef = useRef<WrapSSRCache>();
+    const currentCache = wrapSSRCacheRef.current;
+    let memoizedWrapSSR: ReturnType<typeof useStyleRegister> = currentCache?.wrapSSR || wrapSSR;
+
+    if (!currentCache || wrapSSRDeps.some((dep, index) => dep !== currentCache.deps[index])) {
+      wrapSSRCacheRef.current = {
+        deps: wrapSSRDeps,
+        wrapSSR,
+      };
+      memoizedWrapSSR = wrapSSR;
+    }
 
     return {
       wrapSSR: memoizedWrapSSR,
@@ -140,7 +153,7 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
   return {
     [componentCls]: {
       '.nb-mobile-action-drawer-header': {
-        height: 'var(--nb-mobile-page-header-height)',
+        height: 'var(--nb-mobile-page-header-height, 46px)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -171,7 +184,10 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-body': {
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
-        maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+        maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+        '@supports (height: 100dvh)': {
+          maxHeight: 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))',
+        },
         overflowY: 'auto',
         overflowX: 'hidden',
         backgroundColor: token.colorBgLayout,

package/src/components/__tests__/MobilePopup.style.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 React, { CSSProperties, ReactNode } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import { vi } from 'vitest';
+import { MobilePopup } from '../MobilePopup';
+import { useMobileActionDrawerStyle } from '../MobilePopup.style';
+
+vi.mock('antd-mobile', () => ({
+  Popup: ({
+    bodyClassName,
+    bodyStyle,
+    children,
+    className,
+    visible,
+  }: {
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    children?: ReactNode;
+    className?: string;
+    visible?: boolean;
+  }) =>
+    visible ? (
+      <div className={className} data-testid="popup-root">
+        <div className={`adm-popup-body ${bodyClassName || ''}`} data-testid="popup-body" style={bodyStyle}>
+          {children}
+        </div>
+      </div>
+    ) : null,
+}));
+
+vi.mock('antd-mobile-icons', () => ({
+  CloseOutline: () => <span data-testid="close-outline" />,
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+function StyleProbe() {
+  const { componentCls, hashId } = useMobileActionDrawerStyle();
+
+  return (
+    <div className={`${componentCls} ${hashId}`}>
+      <div className="nb-mobile-action-drawer-header" data-testid="drawer-header" />
+      <div className="nb-mobile-action-drawer-body" data-testid="drawer-body" />
+    </div>
+  );
+}
+
+function getInjectedStyles() {
+  return Array.from(document.querySelectorAll('style'))
+    .map((style) => style.textContent || '')
+    .join('\n')
+    .replace(/\s+/g, '');
+}
+
+describe('MobilePopup styles', () => {
+  it('mounts the action drawer class on the real popup body', async () => {
+    render(
+      <MobilePopup visible title="Edit" onClose={vi.fn()}>
+        <div style={{ height: 1200 }}>Long content</div>
+      </MobilePopup>,
+    );
+
+    const popupBody = await screen.findByTestId('popup-body');
+
+    expect(screen.getByTestId('popup-root')).toHaveClass('ant-nb-mobile-action-drawer');
+    expect(popupBody).toHaveClass('adm-popup-body');
+    expect(popupBody).toHaveClass('nb-mobile-action-drawer-body');
+    expect(popupBody).toHaveStyle({ padding: '0px' });
+  });
+
+  it('limits the mobile action drawer body by viewport height', async () => {
+    render(
+      <ConfigProvider>
+        <StyleProbe />
+      </ConfigProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getInjectedStyles()).toContain('.nb-mobile-action-drawer-body');
+    });
+
+    const styles = getInjectedStyles();
+
+    expect(styles).toContain('height:var(--nb-mobile-page-header-height,46px)');
+    expect(styles).toContain('max-height:calc(100vh-var(--nb-mobile-page-header-height,46px))');
+    expect(styles).toContain('max-height:calc(100dvh-var(--nb-mobile-page-header-height,46px))');
+    expect(styles).toContain('overflow-y:auto');
+    expect(styles).not.toContain('max-height:calc(100%-var(--nb-mobile-page-header-height))');
+  });
+});

package/src/components/variables/VariableHybridInput.tsx

@@ -36,6 +36,7 @@ export interface VariableHybridInputProps {
   value?: string;
   onChange?: (value: string) => void;
   disabled?: boolean;
+  readOnly?: boolean;
   placeholder?: string;
   addonBefore?: React.ReactNode;
   metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
@@ -295,7 +296,7 @@ function getCurrentRange(element: HTMLElement): RangeIndexes {
 }
 
 const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props) => {
-  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, style } = props;
+  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, readOnly, style } = props;
   const { token } = theme.useToken();
   const ctx = useFlowContext();
   const { resolvedMetaTree } = useResolvedMetaTree(metaTree);
@@ -458,12 +459,13 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
 
   const handleInput = useCallback(
     ({ currentTarget }: React.FormEvent<HTMLDivElement>) => {
+      if (readOnly) return;
       if (isComposing) return;
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       emitChange(currentTarget);
     },
-    [emitChange, isComposing],
+    [emitChange, isComposing, readOnly],
   );
 
   const handleBlur = useCallback(({ currentTarget }: React.FocusEvent<HTMLDivElement>) => {
@@ -479,6 +481,7 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
   const handlePaste = useCallback(
     (event: React.ClipboardEvent<HTMLDivElement>) => {
       event.preventDefault();
+      if (readOnly) return;
       // Paste as plain text only; variable tags must be inserted via the picker.
       const text = event.clipboardData.getData('text/plain').replace(/\n/g, ' ');
       if (!text) return;
@@ -487,18 +490,19 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
       setRange(getCurrentRange(event.currentTarget));
       emitChange(event.currentTarget);
     },
-    [emitChange],
+    [emitChange, readOnly],
   );
 
   const handleCompositionStart = useCallback(() => setIsComposing(true), []);
   const handleCompositionEnd = useCallback(
     ({ currentTarget }: React.CompositionEvent<HTMLDivElement>) => {
       setIsComposing(false);
+      if (readOnly) return;
       setChanged(true);
       setRange(getCurrentRange(currentTarget));
       emitChange(currentTarget);
     },
-    [emitChange],
+    [emitChange, readOnly],
   );
 
   const wrapperClassName = useMemo(
@@ -620,6 +624,14 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
         }
       }
 
+      &.is-readonly {
+        cursor: default;
+
+        &:hover {
+          border-color: ${token.colorBorder};
+        }
+      }
+
       &.is-error {
         border-color: ${token.colorError};
 
@@ -660,10 +672,12 @@ const VariableHybridInputComponent: React.FC<VariableHybridInputProps> = (props)
           aria-label="textbox"
           className={cx(editorClassName, {
             'is-disabled': disabled,
+            'is-readonly': readOnly,
             'is-error': effectiveStatus === 'error',
             'is-warning': effectiveStatus === 'warning',
           })}
-          contentEditable={!disabled}
+          contentEditable={!disabled && !readOnly}
+          aria-readonly={readOnly}
           data-placeholder={placeholder}
           onInput={handleInput}
           onBlur={handleBlur}

package/src/components/variables/VariableInput.tsx

@@ -192,7 +192,7 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
     };
 
     restoreFromValue();
-  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode]);
+  }, [resolvedMetaTree, innerValue, resolvePathFromValue, currentMetaTreeNode, value]);
 
   const ValueComponent = useMemo(() => {
     const Component = renderInputComponent?.(resolvedMetaTreeNode);
@@ -356,6 +356,7 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
       <FlowContextSelector
         metaTree={resolvedMetaTree}
         value={innerValue}
+        active={isVariableValue(innerValue)}
         onChange={handleVariableSelect}
         parseValueToPath={resolvePathFromValue}
         formatPathToValue={resolveValueFromPath}

package/src/components/variables/__tests__/FlowContextSelector.test.tsx

@@ -67,6 +67,23 @@ describe('FlowContextSelector', () => {
     });
   });
 
+  it('uses explicit active=false to keep the default trigger unhighlighted even when value parses to a path', async () => {
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector
+          metaTree={() => flowContext.getPropertyMetaTree()}
+          value="{{ ctx.user.name }}"
+          active={false}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    const button = await screen.findByRole('button');
+    expect(button.className).not.toContain('ant-btn-primary');
+  });
+
   it('should support function metaTree loading', async () => {
     const flowContext = createTestFlowContext();
     const metaTreeFn = vi.fn(() => flowContext.getPropertyMetaTree());
@@ -267,6 +284,43 @@ describe('FlowContextSelector', () => {
     });
   });
 
+  it('shows enabled variable item tooltip above the menu item', async () => {
+    const flowContext = createTestFlowContext();
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$system',
+        title: 'System variables',
+        type: '',
+        paths: ['$system'],
+        children: [
+          {
+            name: 'instanceId',
+            title: 'Instance ID',
+            type: '',
+            paths: ['$system', 'instanceId'],
+            options: { tooltip: 'The ID of current server instance' },
+          },
+        ],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <FlowContextSelector metaTree={metaTree} />
+      </TestFlowContextWrapper>,
+    );
+
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(await screen.findByText('System variables'));
+
+    expect(await screen.findByText('Instance ID')).toBeInTheDocument();
+    const tooltipIcon = screen.getByLabelText('Instance ID tooltip');
+    fireEvent.mouseEnter(tooltipIcon);
+
+    const tooltip = await screen.findByText('The ID of current server instance');
+    expect(tooltip.closest('.ant-tooltip')).toHaveClass('ant-tooltip-placement-top');
+  });
+
   it('should support inline search input when children is null and keep lazy expand', async () => {
     const flowContext = createTestFlowContext();
     const loadOrgChildren = vi.fn(async () => [
@@ -405,10 +459,13 @@ describe('FlowContextSelector', () => {
 
     const clearIcon = document.querySelector('.ant-input-clear-icon') as HTMLElement | null;
     expect(clearIcon).toBeInTheDocument();
+    if (!clearIcon) {
+      throw new Error('Expected inline clear icon to be present');
+    }
 
-    fireEvent.mouseDown(clearIcon!);
-    fireEvent.mouseUp(clearIcon!);
-    fireEvent.click(clearIcon!);
+    fireEvent.mouseDown(clearIcon);
+    fireEvent.mouseUp(clearIcon);
+    fireEvent.click(clearIcon);
 
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith('', undefined);

package/src/components/variables/__tests__/VariableHybridInput.test.tsx

@@ -14,7 +14,7 @@
  * Plus the top-level (already-loaded) and not-in-tree (raw-token fallback) cases.
  */
 
-import { render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { VariableHybridInput, type VariableHybridInputConverters } from '../VariableHybridInput';
@@ -175,4 +175,38 @@ describe('VariableHybridInput — saved reference labels', () => {
       expect(tag?.textContent).toBe('{{$missing.field}}');
     });
   });
+
+  it('keeps the selector enabled when only the editor is read-only', async () => {
+    const flowContext = createTestFlowContext();
+    const onChange = vi.fn();
+    const metaTree: MetaTreeNode[] = [
+      {
+        name: '$user',
+        title: 'User',
+        type: '',
+        paths: ['$user'],
+        children: [{ name: 'name', title: 'Name', type: 'string', paths: ['$user', 'name'] }],
+      },
+    ];
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableHybridInput
+          readOnly
+          value=""
+          onChange={onChange}
+          metaTree={metaTree}
+          converters={workflowConverters}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    const editor = screen.getByRole('textbox');
+    expect(editor).toHaveAttribute('contenteditable', 'false');
+    expect(editor).toHaveAttribute('aria-readonly', 'true');
+
+    fireEvent.input(editor, { currentTarget: { textContent: 'manual' } });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByRole('button')).not.toBeDisabled();
+  });
 });

package/src/components/variables/__tests__/VariableInput.test.tsx

@@ -8,6 +8,7 @@
  */
 
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Input } from 'antd';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import type { ContextSelectorItem } from '../types';
@@ -112,6 +113,50 @@ describe('VariableInput', () => {
     expect(selectorButton).toBeInTheDocument();
   });
 
+  it('should not highlight the selector button for synthetic constant/null paths', async () => {
+    const flowContext = createTestFlowContext();
+
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput
+          value=""
+          metaTree={[
+            { name: 'constant', title: 'Constant', type: 'string', paths: ['constant'] },
+            { name: 'null', title: 'Null', type: 'object', paths: ['null'] },
+            ...flowContext.getPropertyMetaTree(),
+          ]}
+          converters={{
+            renderInputComponent: (meta) => {
+              const first = meta?.paths?.[0];
+              if (first === 'constant') {
+                return (props: any) => <input aria-label="constant-value" {...props} />;
+              }
+              if (first === 'null') {
+                return () => <Input placeholder="<Null>" readOnly />;
+              }
+              return null;
+            },
+            resolveValueFromPath: (meta) => {
+              const first = meta?.paths?.[0];
+              if (first === 'constant') return '';
+              if (first === 'null') return null;
+              return undefined;
+            },
+            resolvePathFromValue: (currentValue) => {
+              if (currentValue === null) return ['null'];
+              const trimmed = typeof currentValue === 'string' ? currentValue.trim() : currentValue;
+              if (trimmed === '') return ['constant'];
+              return undefined;
+            },
+          }}
+        />
+      </TestFlowContextWrapper>,
+    );
+
+    const selectorButton = await screen.findByRole('button');
+    expect(selectorButton.className).not.toContain('ant-btn-primary');
+  });
+
   it('should handle onChange from Input', async () => {
     const onChange = vi.fn();
     const flowContext = createTestFlowContext();
@@ -195,20 +240,21 @@ describe('VariableInput', () => {
 
     const selectElement = container.querySelector('.ant-select');
     expect(selectElement).toBeInTheDocument();
+    if (!selectElement) {
+      throw new Error('Expected variable tag select wrapper to be present');
+    }
 
     // 触发鼠标悬停以显示清除按钮
-    fireEvent.mouseEnter(selectElement!);
+    fireEvent.mouseEnter(selectElement);
 
     // 尝试触发清除功能
     // 方法1: 直接触发 Select 组件的 onClear 事件
-    const selectInstance = selectElement as any;
-
     // 尝试通过键盘事件触发清除
-    fireEvent.keyDown(selectElement!, { key: 'Backspace', code: 'Backspace' });
+    fireEvent.keyDown(selectElement, { key: 'Backspace', code: 'Backspace' });
 
     // 或者尝试触发自定义的清除逻辑
     const clearEvents = new CustomEvent('clear');
-    selectElement!.dispatchEvent(clearEvents);
+    selectElement.dispatchEvent(clearEvents);
 
     // 检查是否调用了清除功能（可能需要调整期望）
     // 如果清除按钮不能直接测试，我们验证组件支持清除功能

package/src/components/variables/types.ts

@@ -16,6 +16,16 @@ export interface FlowContextSelectorProps
   value?: string;
   onChange?: (value: string, metaTreeNode?: MetaTreeNode) => void;
   children?: CascaderProps<ContextSelectorItem>['children'];
+  /**
+   * Controls whether the default `x` trigger button is rendered as active
+   * (`type="primary"`). When omitted, the selector falls back to its parsed
+   * `value` path (`true` iff a valid variable path is currently selected).
+   *
+   * Use this when callers intentionally feed synthetic paths such as
+   * `['constant']` / `['null']` into the cascader to keep menu state aligned,
+   * but only want real variable references to show the blue active button.
+   */
+  active?: boolean;
   metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
   parseValueToPath?: (value: string) => string[] | undefined;
   formatPathToValue?: (item: MetaTreeNode) => string;

package/src/flowContext.ts

@@ -3504,11 +3504,12 @@ export class FlowEngineContext extends BaseFlowEngineContext {
     });
     this.defineProperty('auth', {
       get: () => ({
-        roleName: this.api.auth.role,
-        locale: this.api.auth.locale,
-        token: this.api.auth.token,
+        roleName: this.api?.auth?.role,
+        locale: this.api?.auth?.locale,
+        token: this.api?.auth?.token,
         user: this.user,
       }),
+      cache: false,
     });
     this.defineProperty('date', {
       get: () => {