@nocobase/flow-engine 2.2.0-alpha.3 → 2.2.0-alpha.5

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;
@@ -113,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,
@@ -131,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)("");

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/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.3",
+  "version": "2.2.0-alpha.5",
   "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.3",
-    "@nocobase/shared": "2.2.0-alpha.3",
+    "@nocobase/sdk": "2.2.0-alpha.5",
+    "@nocobase/shared": "2.2.0-alpha.5",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "e3ec19361fd7981af9fe2a7f24ad335025cbefcd"
+  "gitHead": "814ff497dd1233ca7218c9f7f2a016c2ead6516d"
 }

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;
@@ -121,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>
         ) : (
@@ -146,7 +169,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
         };
       });
     },
-    [flowCtx],
+    [flowCtx, token.colorTextDescription, token.colorTextDisabled, token.marginXXS],
   );
 
   // 用于强制重新渲染的状态

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/__tests__/FlowContextSelector.test.tsx

@@ -284,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 () => [

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/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: () => {