@nocobase/flow-engine 2.2.0-beta.6 → 2.2.0-beta.7

package/lib/components/dnd/index.js

@@ -57,6 +57,10 @@ const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
 const TOOLBAR_DRAG_ACTIVITY_EVENT = "nb-toolbar-drag-activity";
 const TOOLBAR_DRAG_ANCHOR_EVENT = "nb-toolbar-drag-anchor";
 const MENU_SUBMENU_POPUP_SELECTOR = ".ant-menu-submenu-popup";
+const getToolbarModelUidFromNode = /* @__PURE__ */ __name((node) => {
+  var _a;
+  return ((_a = node == null ? void 0 : node.closest(".nb-toolbar-container[data-model-uid]")) == null ? void 0 : _a.getAttribute("data-model-uid")) || null;
+}, "getToolbarModelUidFromNode");
 const resolveOverlayAnchorTransform = /* @__PURE__ */ __name(({
   activeId,
   active,
@@ -76,7 +80,7 @@ const resolveOverlayAnchorTransform = /* @__PURE__ */ __name(({
 const resolveDraggableHostNode = /* @__PURE__ */ __name((activatorNode) => {
   const ownerDocument = activatorNode == null ? void 0 : activatorNode.ownerDocument;
   const floatToolbarContainer = activatorNode == null ? void 0 : activatorNode.closest(".nb-toolbar-container[data-model-uid]");
-  const toolbarModelUid = floatToolbarContainer == null ? void 0 : floatToolbarContainer.getAttribute("data-model-uid");
+  const toolbarModelUid = getToolbarModelUidFromNode(activatorNode);
   if (!ownerDocument || !toolbarModelUid) {
     return activatorNode;
   }
@@ -99,6 +103,7 @@ const DragHandler = /* @__PURE__ */ __name(({
   const dragHandlerRef = (0, import_react.useRef)(null);
   const draggableNodeRef = (0, import_react.useRef)(null);
   const pointerPressCleanupRef = (0, import_react.useRef)(null);
+  const toolbarDragModelUidRef = (0, import_react.useRef)(null);
   const isDraggingRef = (0, import_react.useRef)(isDragging);
   const isPointerPressActiveRef = (0, import_react.useRef)(false);
   const isToolbarDragActiveRef = (0, import_react.useRef)(false);
@@ -128,9 +133,11 @@ const DragHandler = /* @__PURE__ */ __name(({
       if (!ownerDocument) {
         return;
       }
+      const toolbarModelUid = getToolbarModelUidFromNode(dragHandlerRef.current) || toolbarDragModelUidRef.current || model.uid;
+      toolbarDragModelUidRef.current = active ? toolbarModelUid : null;
       ownerDocument.dispatchEvent(
         new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
-          detail: { active, modelUid: model.uid }
+          detail: { active, modelUid: toolbarModelUid }
         })
       );
     },

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

@@ -44,6 +44,7 @@ var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_antd = require("antd");
 var import_css = require("@emotion/css");
+var import_ahooks = require("ahooks");
 var import_hooks = require("../../../../hooks");
 var import_provider = require("../../../../provider");
 var import_utils = require("../../../../utils");
@@ -312,6 +313,38 @@ const buildToolbarContainerStyle = /* @__PURE__ */ __name((portalRect, toolbarSt
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
   return "uid" in props && "modelClassName" in props && Boolean(props.uid) && Boolean(props.modelClassName);
 }, "isModelByIdProps");
+const stopResizeInteractionEvent = /* @__PURE__ */ __name((event) => {
+  var _a;
+  if (!event) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  const nativeEvent = "nativeEvent" in event ? event.nativeEvent : event;
+  (_a = nativeEvent.stopImmediatePropagation) == null ? void 0 : _a.call(nativeEvent);
+}, "stopResizeInteractionEvent");
+const pendingResizeClickSuppressions = /* @__PURE__ */ new WeakMap();
+const clearPendingResizeClickSuppression = /* @__PURE__ */ __name((ownerDocument) => {
+  const pending = pendingResizeClickSuppressions.get(ownerDocument);
+  if (!pending) {
+    return;
+  }
+  ownerDocument.removeEventListener("click", pending.listener, true);
+  (ownerDocument.defaultView || window).clearTimeout(pending.timer);
+  pendingResizeClickSuppressions.delete(ownerDocument);
+}, "clearPendingResizeClickSuppression");
+const suppressNextResizeClick = /* @__PURE__ */ __name((ownerDocument) => {
+  clearPendingResizeClickSuppression(ownerDocument);
+  const listener = /* @__PURE__ */ __name((event) => {
+    stopResizeInteractionEvent(event);
+    clearPendingResizeClickSuppression(ownerDocument);
+  }, "listener");
+  const timer = (ownerDocument.defaultView || window).setTimeout(() => {
+    clearPendingResizeClickSuppression(ownerDocument);
+  }, 0);
+  pendingResizeClickSuppressions.set(ownerDocument, { listener, timer });
+  ownerDocument.addEventListener("click", listener, true);
+}, "suppressNextResizeClick");
 const FlowsFloatContextMenu = (0, import_reactive.observer)((props) => {
   const ctx = (0, import__.useFlowContext)();
   if (!ctx.flowSettingsEnabled) {
@@ -326,44 +359,64 @@ const ResizeHandles = /* @__PURE__ */ __name((props) => {
   const isDraggingRef = (0, import_react.useRef)(false);
   const dragTypeRef = (0, import_react.useRef)(null);
   const dragStartPosRef = (0, import_react.useRef)({ x: 0, y: 0 });
+  const dragOwnerDocumentRef = (0, import_react.useRef)(null);
   const { onDragStart, onDragEnd } = props;
-  const handleDragMove = (0, import_react.useCallback)(
-    (e) => {
-      if (!isDraggingRef.current || !dragTypeRef.current) return;
-      const deltaX = e.clientX - dragStartPosRef.current.x;
-      switch (dragTypeRef.current) {
-        case "left":
-          props.model.parent.emitter.emit("onResizeLeft", { resizeDistance: -deltaX, model: props.model });
-          break;
-        case "right":
-          props.model.parent.emitter.emit("onResizeRight", { resizeDistance: deltaX, model: props.model });
-          break;
-      }
-    },
-    [props.model]
-  );
-  const handleDragEnd = (0, import_react.useCallback)(() => {
+  const handleDragMove = (0, import_ahooks.useMemoizedFn)((e) => {
+    if (!isDraggingRef.current || !dragTypeRef.current) return;
+    stopResizeInteractionEvent(e);
+    const deltaX = e.clientX - dragStartPosRef.current.x;
+    switch (dragTypeRef.current) {
+      case "left":
+        props.model.parent.emitter.emit("onResizeLeft", { resizeDistance: -deltaX, model: props.model });
+        break;
+      case "right":
+        props.model.parent.emitter.emit("onResizeRight", { resizeDistance: deltaX, model: props.model });
+        break;
+    }
+  });
+  const handleDragEnd = (0, import_ahooks.useMemoizedFn)((e) => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    stopResizeInteractionEvent(e);
+    const ownerDocument = dragOwnerDocumentRef.current || document;
+    ownerDocument.removeEventListener("mousemove", handleDragMove, true);
+    ownerDocument.removeEventListener("mouseup", handleDragEnd, true);
+    suppressNextResizeClick(ownerDocument);
     isDraggingRef.current = false;
     dragTypeRef.current = null;
     dragStartPosRef.current = { x: 0, y: 0 };
-    document.removeEventListener("mousemove", handleDragMove);
-    document.removeEventListener("mouseup", handleDragEnd);
+    dragOwnerDocumentRef.current = null;
     props.model.parent.emitter.emit("onResizeEnd");
     onDragEnd == null ? void 0 : onDragEnd();
-  }, [handleDragMove, onDragEnd, props.model]);
-  const handleDragStart = (0, import_react.useCallback)(
-    (e, type) => {
-      e.preventDefault();
-      e.stopPropagation();
-      isDraggingRef.current = true;
-      dragTypeRef.current = type;
-      dragStartPosRef.current = { x: e.clientX, y: e.clientY };
-      document.addEventListener("mousemove", handleDragMove);
-      document.addEventListener("mouseup", handleDragEnd);
-      onDragStart == null ? void 0 : onDragStart();
-    },
-    [handleDragMove, handleDragEnd, onDragStart]
-  );
+  });
+  (0, import_react.useEffect)(() => {
+    return () => {
+      const dragOwnerDocument = dragOwnerDocumentRef.current;
+      dragOwnerDocument == null ? void 0 : dragOwnerDocument.removeEventListener("mousemove", handleDragMove, true);
+      dragOwnerDocument == null ? void 0 : dragOwnerDocument.removeEventListener("mouseup", handleDragEnd, true);
+      if (isDraggingRef.current) {
+        suppressNextResizeClick(dragOwnerDocument || document);
+        props.model.parent.emitter.emit("onResizeEnd");
+        onDragEnd == null ? void 0 : onDragEnd();
+      }
+      isDraggingRef.current = false;
+      dragTypeRef.current = null;
+      dragStartPosRef.current = { x: 0, y: 0 };
+      dragOwnerDocumentRef.current = null;
+    };
+  }, [handleDragMove, handleDragEnd, onDragEnd, props.model]);
+  const handleDragStart = (0, import_ahooks.useMemoizedFn)((e, type) => {
+    stopResizeInteractionEvent(e);
+    const ownerDocument = e.currentTarget.ownerDocument;
+    isDraggingRef.current = true;
+    dragTypeRef.current = type;
+    dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+    dragOwnerDocumentRef.current = ownerDocument;
+    ownerDocument.addEventListener("mousemove", handleDragMove, true);
+    ownerDocument.addEventListener("mouseup", handleDragEnd, true);
+    onDragStart == null ? void 0 : onDragStart();
+  });
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -466,6 +519,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         getPopupContainer,
         handleSettingsMenuOpenChange,
         model,
+        modelUid,
         settingsMenuLevel,
         showCopyUidButton,
         showDeleteButton,

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

@@ -44,6 +44,17 @@ const getToolbarModelUidFromTarget = /* @__PURE__ */ __name((target) => {
   }
   return ((_a = target.closest(".nb-toolbar-container[data-model-uid]")) == null ? void 0 : _a.getAttribute("data-model-uid")) || null;
 }, "getToolbarModelUidFromTarget");
+const escapeCssAttributeValue = /* @__PURE__ */ __name((value) => {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\f/g, "\\c ");
+}, "escapeCssAttributeValue");
+const isToolbarModelUidRendered = /* @__PURE__ */ __name((ownerDocument, modelUid) => {
+  if (!ownerDocument) {
+    return false;
+  }
+  return !!ownerDocument.querySelector(
+    `.nb-toolbar-container[data-model-uid="${escapeCssAttributeValue(modelUid)}"]`
+  );
+}, "isToolbarModelUidRendered");
 const isNodeWithinDescendantFloatToolbar = /* @__PURE__ */ __name((target, container, currentModelUid) => {
   const targetModelUid = getToolbarModelUidFromTarget(target);
   if (!container || !targetModelUid || targetModelUid === currentModelUid) {
@@ -222,6 +233,15 @@ const useFloatToolbarVisibility = /* @__PURE__ */ __name(({
       const isCurrentHostTarget = !childWithMenu || childWithMenu === containerRef.current;
       if (isCurrentHostTarget) {
         clearHideToolbarTimer();
+        setActiveChildToolbarIds((prevIds) => {
+          var _a;
+          if (!prevIds.length) {
+            return prevIds;
+          }
+          const ownerDocument = ((_a = containerRef.current) == null ? void 0 : _a.ownerDocument) ?? null;
+          const nextIds = prevIds.filter((id) => isToolbarModelUidRendered(ownerDocument, id));
+          return nextIds.length === prevIds.length ? prevIds : nextIds;
+        });
         setHostHovered(true);
       }
       setHideMenu(!!childWithMenu && childWithMenu !== containerRef.current);

package/lib/flowContext.js

@@ -2555,8 +2555,16 @@ const _FlowEngineContext = class _FlowEngineContext extends BaseFlowEngineContex
     });
     this.defineProperty("role", {
       get: /* @__PURE__ */ __name(() => {
-        var _a, _b;
-        return (_b = (_a = this.api) == null ? void 0 : _a.auth) == null ? void 0 : _b.role;
+        var _a, _b, _c;
+        const currentRole = (_b = (_a = this.api) == null ? void 0 : _a.auth) == null ? void 0 : _b.role;
+        if (currentRole !== "__union__") {
+          return currentRole;
+        }
+        const roles = (_c = this.user) == null ? void 0 : _c.roles;
+        if (!Array.isArray(roles)) {
+          return [];
+        }
+        return roles.map((role) => role == null ? void 0 : role.name).filter((name) => !!name);
       }, "get"),
       cache: false,
       // 注意：使用惰性 meta 工厂，避免在 i18n 尚未注入时提前求值导致无法翻译

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.2.0-beta.6",
+  "version": "2.2.0-beta.7",
   "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-beta.6",
-    "@nocobase/shared": "2.2.0-beta.6",
+    "@nocobase/sdk": "2.2.0-beta.7",
+    "@nocobase/shared": "2.2.0-beta.7",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "dc9246516f8a3efd6056f22fe7b3bc947bd4575b"
+  "gitHead": "e6a3fa8963a73cd9ddfc1273d71b0012483e1ad8"
 }

package/src/__tests__/flowContext.test.ts

@@ -177,6 +177,49 @@ describe('FlowContext properties and methods', () => {
     });
   });
 
+  it('should expose current role as a top-level variable', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: 'admin' } } });
+
+    expect(ctx.role).toBe('admin');
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toBe('admin');
+
+    const roleNode = ctx.getPropertyMetaTree().find((node) => node.name === 'role');
+    expect(roleNode).toMatchObject({
+      name: 'role',
+      title: '{{t("Current role")}}',
+      paths: ['role'],
+    });
+  });
+
+  it('should expose actual role names for union role mode', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: '__union__' } } });
+    ctx.defineProperty('user', {
+      value: {
+        roles: [
+          { name: 'admin', title: 'Admin' },
+          { name: 'member', title: 'Member' },
+        ],
+      },
+    });
+
+    expect(ctx.role).toEqual(['admin', 'member']);
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toEqual(['admin', 'member']);
+  });
+
+  it('should expose an empty role list for union role mode without user roles', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: '__union__' } } });
+    ctx.defineProperty('user', { value: {} });
+
+    expect(ctx.role).toEqual([]);
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toEqual([]);
+  });
+
   it('should throw sync error in get', () => {
     const ctx = new FlowContext();
     ctx.defineProperty('error', {

package/src/components/dnd/index.tsx

@@ -35,6 +35,10 @@ type ToolbarDragAnchorDetail = {
   point: ToolbarDragAnchorPoint | null;
 };
 
+const getToolbarModelUidFromNode = (node: HTMLElement | null): string | null => {
+  return node?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]')?.getAttribute('data-model-uid') || null;
+};
+
 export const resolveOverlayAnchorTransform = ({
   activeId,
   active,
@@ -62,7 +66,7 @@ export const resolveOverlayAnchorTransform = ({
 const resolveDraggableHostNode = (activatorNode: HTMLElement | null) => {
   const ownerDocument = activatorNode?.ownerDocument;
   const floatToolbarContainer = activatorNode?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]');
-  const toolbarModelUid = floatToolbarContainer?.getAttribute('data-model-uid');
+  const toolbarModelUid = getToolbarModelUidFromNode(activatorNode);
 
   if (!ownerDocument || !toolbarModelUid) {
     return activatorNode;
@@ -95,6 +99,7 @@ export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> =
   const dragHandlerRef = useRef<HTMLSpanElement | null>(null);
   const draggableNodeRef = useRef<HTMLElement | null>(null);
   const pointerPressCleanupRef = useRef<(() => void) | null>(null);
+  const toolbarDragModelUidRef = useRef<string | null>(null);
   const isDraggingRef = useRef(isDragging);
   const isPointerPressActiveRef = useRef(false);
   const isToolbarDragActiveRef = useRef(false);
@@ -126,9 +131,13 @@ export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> =
         return;
       }
 
+      const toolbarModelUid =
+        getToolbarModelUidFromNode(dragHandlerRef.current) || toolbarDragModelUidRef.current || model.uid;
+      toolbarDragModelUidRef.current = active ? toolbarModelUid : null;
+
       ownerDocument.dispatchEvent(
         new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
-          detail: { active, modelUid: model.uid },
+          detail: { active, modelUid: toolbarModelUid },
         }),
       );
     },

package/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx

@@ -11,6 +11,7 @@ import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { createPortal } from 'react-dom';
 import { Alert, Space } from 'antd';
 import { css } from '@emotion/css';
+import { useMemoizedFn } from 'ahooks';
 import { FlowModel } from '../../../../models';
 import { ToolbarItemConfig } from '../../../../types';
 import { useFlowModelById } from '../../../../hooks';
@@ -394,6 +395,49 @@ const isModelByIdProps = (props: FlowsFloatContextMenuProps): props is ModelById
   return 'uid' in props && 'modelClassName' in props && Boolean(props.uid) && Boolean(props.modelClassName);
 };
 
+const stopResizeInteractionEvent = (event?: MouseEvent | React.MouseEvent) => {
+  if (!event) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;
+  nativeEvent.stopImmediatePropagation?.();
+};
+
+const pendingResizeClickSuppressions = new WeakMap<
+  Document,
+  { listener: (event: MouseEvent) => void; timer: number }
+>();
+
+const clearPendingResizeClickSuppression = (ownerDocument: Document) => {
+  const pending = pendingResizeClickSuppressions.get(ownerDocument);
+  if (!pending) {
+    return;
+  }
+
+  ownerDocument.removeEventListener('click', pending.listener, true);
+  (ownerDocument.defaultView || window).clearTimeout(pending.timer);
+  pendingResizeClickSuppressions.delete(ownerDocument);
+};
+
+const suppressNextResizeClick = (ownerDocument: Document) => {
+  clearPendingResizeClickSuppression(ownerDocument);
+
+  const listener = (event: MouseEvent) => {
+    stopResizeInteractionEvent(event);
+    clearPendingResizeClickSuppression(ownerDocument);
+  };
+  const timer = (ownerDocument.defaultView || window).setTimeout(() => {
+    clearPendingResizeClickSuppression(ownerDocument);
+  }, 0);
+
+  pendingResizeClickSuppressions.set(ownerDocument, { listener, timer });
+  ownerDocument.addEventListener('click', listener, true);
+};
+
 /**
  * FlowsFloatContextMenu组件 - 悬浮配置工具栏组件
  *
@@ -442,55 +486,80 @@ const ResizeHandles: React.FC<{
   const isDraggingRef = useRef<boolean>(false);
   const dragTypeRef = useRef<'left' | 'right' | null>(null);
   const dragStartPosRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const dragOwnerDocumentRef = useRef<Document | null>(null);
   const { onDragStart, onDragEnd } = props;
 
   // 把拖拽位移转成上层已约定的 resize 事件。
-  const handleDragMove = useCallback(
-    (e: MouseEvent) => {
-      if (!isDraggingRef.current || !dragTypeRef.current) return;
-
-      const deltaX = e.clientX - dragStartPosRef.current.x;
-
-      switch (dragTypeRef.current) {
-        case 'left':
-          props.model.parent.emitter.emit('onResizeLeft', { resizeDistance: -deltaX, model: props.model });
-          break;
-        case 'right':
-          props.model.parent.emitter.emit('onResizeRight', { resizeDistance: deltaX, model: props.model });
-          break;
-      }
-    },
-    [props.model],
-  );
+  const handleDragMove = useMemoizedFn((e: MouseEvent) => {
+    if (!isDraggingRef.current || !dragTypeRef.current) return;
+
+    stopResizeInteractionEvent(e);
+    const deltaX = e.clientX - dragStartPosRef.current.x;
+
+    switch (dragTypeRef.current) {
+      case 'left':
+        props.model.parent.emitter.emit('onResizeLeft', { resizeDistance: -deltaX, model: props.model });
+        break;
+      case 'right':
+        props.model.parent.emitter.emit('onResizeRight', { resizeDistance: deltaX, model: props.model });
+        break;
+    }
+  });
+
+  const handleDragEnd = useMemoizedFn((e?: MouseEvent) => {
+    if (!isDraggingRef.current) {
+      return;
+    }
+
+    stopResizeInteractionEvent(e);
+    const ownerDocument = dragOwnerDocumentRef.current || document;
+
+    ownerDocument.removeEventListener('mousemove', handleDragMove, true);
+    ownerDocument.removeEventListener('mouseup', handleDragEnd, true);
+    suppressNextResizeClick(ownerDocument);
 
-  const handleDragEnd = useCallback(() => {
     isDraggingRef.current = false;
     dragTypeRef.current = null;
     dragStartPosRef.current = { x: 0, y: 0 };
-
-    document.removeEventListener('mousemove', handleDragMove);
-    document.removeEventListener('mouseup', handleDragEnd);
+    dragOwnerDocumentRef.current = null;
 
     props.model.parent.emitter.emit('onResizeEnd');
     onDragEnd?.();
-  }, [handleDragMove, onDragEnd, props.model]);
+  });
+
+  useEffect(() => {
+    return () => {
+      const dragOwnerDocument = dragOwnerDocumentRef.current;
+      dragOwnerDocument?.removeEventListener('mousemove', handleDragMove, true);
+      dragOwnerDocument?.removeEventListener('mouseup', handleDragEnd, true);
+
+      if (isDraggingRef.current) {
+        suppressNextResizeClick(dragOwnerDocument || document);
+        props.model.parent.emitter.emit('onResizeEnd');
+        onDragEnd?.();
+      }
 
-  const handleDragStart = useCallback(
-    (e: React.MouseEvent, type: 'left' | 'right') => {
-      e.preventDefault();
-      e.stopPropagation();
+      isDraggingRef.current = false;
+      dragTypeRef.current = null;
+      dragStartPosRef.current = { x: 0, y: 0 };
+      dragOwnerDocumentRef.current = null;
+    };
+  }, [handleDragMove, handleDragEnd, onDragEnd, props.model]);
 
-      isDraggingRef.current = true;
-      dragTypeRef.current = type;
-      dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+  const handleDragStart = useMemoizedFn((e: React.MouseEvent, type: 'left' | 'right') => {
+    stopResizeInteractionEvent(e);
+    const ownerDocument = e.currentTarget.ownerDocument;
 
-      document.addEventListener('mousemove', handleDragMove);
-      document.addEventListener('mouseup', handleDragEnd);
+    isDraggingRef.current = true;
+    dragTypeRef.current = type;
+    dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+    dragOwnerDocumentRef.current = ownerDocument;
 
-      onDragStart?.();
-    },
-    [handleDragMove, handleDragEnd, onDragStart],
-  );
+    ownerDocument.addEventListener('mousemove', handleDragMove, true);
+    ownerDocument.addEventListener('mouseup', handleDragEnd, true);
+
+    onDragStart?.();
+  });
 
   return (
     <>
@@ -601,6 +670,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         getPopupContainer,
         handleSettingsMenuOpenChange,
         model,
+        modelUid,
         settingsMenuLevel,
         showCopyUidButton,
         showDeleteButton,

package/src/components/settings/wrappers/contextual/__tests__/FlowsFloatContextMenu.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor, within } from '@testing-library/react';
+import { act, cleanup, fireEvent, render, waitFor, within } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { App, ConfigProvider } from 'antd';
 import { FlowEngine } from '../../../../../flowEngine';
@@ -17,7 +17,7 @@ import { FlowEngineProvider } from '../../../../../provider';
 import { FieldModelRenderer } from '../../../../FieldModelRenderer';
 import { FlowModelRenderer } from '../../../../FlowModelRenderer';
 import { FlowsFloatContextMenu } from '../FlowsFloatContextMenu';
-import { TOOLBAR_DRAG_ACTIVITY_EVENT } from '../../../../dnd';
+import { DndProvider, DragHandler, TOOLBAR_DRAG_ACTIVITY_EVENT } from '../../../../dnd';
 
 const mockColorTextTertiary = '#8c8c8c';
 
@@ -182,12 +182,24 @@ const ToolbarDragItem = ({ model }: { model: FlowModel }) => {
   );
 };
 
+const ForkedToolbarDragItem = ({ model }: { model: FlowModel }) => {
+  return (
+    <DragHandler model={model}>
+      <button type="button" aria-label="forked-toolbar-drag">
+        drag
+      </button>
+    </DragHandler>
+  );
+};
+
 describe('FlowsFloatContextMenu', () => {
   const originalResizeObserver = globalThis.ResizeObserver;
   const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
   const originalCancelAnimationFrame = globalThis.cancelAnimationFrame;
+  const originalPointerEvent = globalThis.PointerEvent;
 
   beforeEach(() => {
+    globalThis.PointerEvent = MouseEvent as typeof PointerEvent;
     globalThis.ResizeObserver = class {
       observe = vi.fn();
       disconnect = vi.fn();
@@ -207,6 +219,7 @@ describe('FlowsFloatContextMenu', () => {
     globalThis.ResizeObserver = originalResizeObserver;
     globalThis.requestAnimationFrame = originalRequestAnimationFrame;
     globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
+    globalThis.PointerEvent = originalPointerEvent;
     document.body.innerHTML = '';
   });
 
@@ -545,28 +558,163 @@ describe('FlowsFloatContextMenu', () => {
     fireEvent.mouseEnter(icons, { relatedTarget: host });
 
     const dragButton = within(overlay).getByLabelText('toolbar-drag');
-    dragButton.ownerDocument.dispatchEvent(
-      new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
-        detail: { active: true, modelUid: model.uid },
-      }),
-    );
+    act(() => {
+      dragButton.ownerDocument.dispatchEvent(
+        new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
+          detail: { active: true, modelUid: model.uid },
+        }),
+      );
+    });
     fireEvent.mouseLeave(icons, { relatedTarget: document.createElement('div') });
 
     await waitFor(() => {
       expect(queryOverlay(appContainer, 'drag-toolbar-model')?.className).toContain('nb-toolbar-visible');
     });
 
-    dragButton.ownerDocument.dispatchEvent(
-      new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
-        detail: { active: false, modelUid: model.uid },
-      }),
-    );
+    act(() => {
+      dragButton.ownerDocument.dispatchEvent(
+        new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
+          detail: { active: false, modelUid: model.uid },
+        }),
+      );
+    });
 
     await waitFor(() => {
       expect(queryOverlay(appContainer, 'drag-toolbar-model')).toBeNull();
     });
   });
 
+  it('does not let resize handle drag release close the surrounding modal wrap', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const parentModel = createModel(engine, 'resize-parent-model');
+    const model = createModel(engine, 'resize-child-model');
+    model.setParent(parentModel);
+    const appContainer = createAppContainer();
+    const modalWrap = createPopupRoot('ant-modal-wrap');
+    const onModalWrapClick = vi.fn();
+    modalWrap.addEventListener('click', onModalWrapClick);
+    appContainer.appendChild(modalWrap);
+    mockRect(appContainer, { top: 0, left: 0, width: 1280, height: 900 });
+    mockRect(modalWrap, { top: 100, left: 200, width: 640, height: 520 });
+
+    const { getByTestId } = renderWithProviders(
+      engine,
+      <FlowsFloatContextMenu model={model} showDragHandle>
+        <div data-testid="resize-content">content</div>
+      </FlowsFloatContextMenu>,
+      { container: modalWrap },
+    );
+
+    const host = getHost(getByTestId('resize-content'));
+    mockRect(host, { top: 140, left: 280, width: 220, height: 48 });
+
+    fireEvent.mouseEnter(host);
+
+    const overlay = await waitFor(() => {
+      const nextOverlay = modalWrap.querySelector('[data-model-uid="resize-child-model"]') as HTMLDivElement | null;
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    const resizeHandle = overlay.querySelector('.resize-handle-right') as HTMLDivElement;
+    expect(resizeHandle).toBeTruthy();
+
+    fireEvent.mouseDown(resizeHandle, { clientX: 500, clientY: 164 });
+    fireEvent.mouseMove(document, { clientX: 460, clientY: 164 });
+    fireEvent.mouseUp(modalWrap, { clientX: 460, clientY: 164 });
+    fireEvent.click(modalWrap, { clientX: 460, clientY: 164 });
+
+    expect(onModalWrapClick).not.toHaveBeenCalled();
+  });
+
+  it('emits resize end when resize handles unmount during a drag', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const parentModel = createModel(engine, 'resize-unmount-parent-model');
+    const model = createModel(engine, 'resize-unmount-child-model');
+    model.setParent(parentModel);
+    const appContainer = createAppContainer();
+    const onResizeEnd = vi.fn();
+    parentModel.emitter.on('onResizeEnd', onResizeEnd);
+    mockRect(appContainer, { top: 0, left: 0, width: 1280, height: 900 });
+
+    const { getByTestId, unmount } = renderWithProviders(
+      engine,
+      <FlowsFloatContextMenu model={model} showDragHandle>
+        <div data-testid="resize-unmount-content">content</div>
+      </FlowsFloatContextMenu>,
+      { container: appContainer },
+    );
+
+    const host = getHost(getByTestId('resize-unmount-content'));
+    mockRect(host, { top: 140, left: 280, width: 220, height: 48 });
+
+    fireEvent.mouseEnter(host);
+
+    const overlay = await waitFor(() => {
+      const nextOverlay = appContainer.querySelector(
+        '[data-model-uid="resize-unmount-child-model"]',
+      ) as HTMLDivElement | null;
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    const resizeHandle = overlay.querySelector('.resize-handle-right') as HTMLDivElement;
+    expect(resizeHandle).toBeTruthy();
+
+    fireEvent.mouseDown(resizeHandle, { clientX: 500, clientY: 164 });
+    unmount();
+
+    expect(onResizeEnd).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the resize release click suppressed after handles unmount', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const parentModel = createModel(engine, 'resize-release-unmount-parent-model');
+    const model = createModel(engine, 'resize-release-unmount-child-model');
+    model.setParent(parentModel);
+    const appContainer = createAppContainer();
+    const modalWrap = createPopupRoot('ant-modal-wrap');
+    const onModalWrapClick = vi.fn();
+    modalWrap.addEventListener('click', onModalWrapClick);
+    appContainer.appendChild(modalWrap);
+    mockRect(appContainer, { top: 0, left: 0, width: 1280, height: 900 });
+    mockRect(modalWrap, { top: 100, left: 200, width: 640, height: 520 });
+
+    const { getByTestId, unmount } = renderWithProviders(
+      engine,
+      <FlowsFloatContextMenu model={model} showDragHandle>
+        <div data-testid="resize-release-unmount-content">content</div>
+      </FlowsFloatContextMenu>,
+      { container: modalWrap },
+    );
+
+    const host = getHost(getByTestId('resize-release-unmount-content'));
+    mockRect(host, { top: 140, left: 280, width: 220, height: 48 });
+
+    fireEvent.mouseEnter(host);
+
+    const overlay = await waitFor(() => {
+      const nextOverlay = modalWrap.querySelector(
+        '[data-model-uid="resize-release-unmount-child-model"]',
+      ) as HTMLDivElement | null;
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    const resizeHandle = overlay.querySelector('.resize-handle-right') as HTMLDivElement;
+    expect(resizeHandle).toBeTruthy();
+
+    fireEvent.mouseDown(resizeHandle, { clientX: 500, clientY: 164 });
+    fireEvent.mouseUp(modalWrap, { clientX: 460, clientY: 164 });
+    unmount();
+    fireEvent.click(modalWrap, { clientX: 460, clientY: 164 });
+
+    expect(onModalWrapClick).not.toHaveBeenCalled();
+  });
+
   it('hides parent toolbar when hovering a nested child host', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();
@@ -714,6 +862,122 @@ describe('FlowsFloatContextMenu', () => {
     });
   });
 
+  it('restores parent toolbar when stale child activity remains but pointer is on the parent block', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const parentModel = createModel(engine, 'parent-stale-child-model');
+    const childModel = createModel(engine, 'child-stale-model');
+    const appContainer = createAppContainer();
+    mockRect(appContainer, { top: 0, left: 0, width: 1280, height: 900 });
+
+    const { getByTestId } = renderWithProviders(
+      engine,
+      <FlowsFloatContextMenu model={parentModel}>
+        <div data-testid="parent-content">
+          <div data-testid="parent-gap">gap</div>
+          <FlowsFloatContextMenu model={childModel}>
+            <div data-testid="child-content">child</div>
+          </FlowsFloatContextMenu>
+        </div>
+      </FlowsFloatContextMenu>,
+      { container: appContainer },
+    );
+
+    const parentHost = getHost(getByTestId('parent-content'));
+    const childHost = getHost(getByTestId('child-content'));
+    const parentGap = getByTestId('parent-gap');
+    mockRect(parentHost, { top: 10, left: 10, width: 320, height: 160 });
+    mockRect(childHost, { top: 28, left: 36, width: 120, height: 48 });
+
+    fireEvent.mouseEnter(parentHost);
+
+    const parentOverlay = await waitFor(() => {
+      const nextOverlay = queryOverlay(appContainer, 'parent-stale-child-model');
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(within(parentOverlay).getByLabelText('flows-settings')).toBeTruthy();
+    });
+
+    act(() => {
+      childHost.dispatchEvent(
+        new CustomEvent('nb-float-menu-child-activity', {
+          bubbles: true,
+          detail: { active: true, modelUid: childModel.uid },
+        }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(queryOverlay(appContainer, 'parent-stale-child-model')).toBeNull();
+    });
+
+    fireEvent.mouseMove(parentGap);
+
+    await waitFor(() => {
+      const parentOverlayAfterRestore = queryOverlay(appContainer, 'parent-stale-child-model');
+      expect(parentOverlayAfterRestore).toBeTruthy();
+      expect(parentOverlayAfterRestore?.className).toContain('nb-toolbar-visible');
+    });
+  });
+
+  it('keeps parent toolbar hidden when moving over the parent block while child toolbar is active', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const parentModel = createModel(engine, 'parent-active-child-model');
+    const childModel = createModel(engine, 'child-active-model');
+    const appContainer = createAppContainer();
+    mockRect(appContainer, { top: 0, left: 0, width: 1280, height: 900 });
+
+    const { getByTestId } = renderWithProviders(
+      engine,
+      <FlowsFloatContextMenu model={parentModel}>
+        <div data-testid="parent-content">
+          <div data-testid="parent-gap">gap</div>
+          <FlowsFloatContextMenu model={childModel}>
+            <div data-testid="child-content">child</div>
+          </FlowsFloatContextMenu>
+        </div>
+      </FlowsFloatContextMenu>,
+      { container: appContainer },
+    );
+
+    const parentHost = getHost(getByTestId('parent-content'));
+    const childHost = getHost(getByTestId('child-content'));
+    const parentGap = getByTestId('parent-gap');
+    mockRect(parentHost, { top: 10, left: 10, width: 320, height: 160 });
+    mockRect(childHost, { top: 28, left: 36, width: 120, height: 48 });
+
+    fireEvent.mouseEnter(parentHost);
+
+    await waitFor(() => {
+      expect(queryOverlay(appContainer, 'parent-active-child-model')).toBeTruthy();
+    });
+
+    fireEvent.mouseEnter(childHost);
+    fireEvent.mouseMove(childHost);
+
+    const childOverlay = await waitFor(() => {
+      const nextOverlay = queryOverlay(appContainer, 'child-active-model');
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(childOverlay.className).toContain('nb-toolbar-visible');
+      expect(queryOverlay(appContainer, 'parent-active-child-model')).toBeNull();
+    });
+
+    fireEvent.mouseMove(parentGap);
+
+    await waitFor(() => {
+      expect(queryOverlay(appContainer, 'child-active-model')?.className).toContain('nb-toolbar-visible');
+      expect(queryOverlay(appContainer, 'parent-active-child-model')).toBeNull();
+    });
+  });
+
   it('treats forked models as distinct float menu instances even when they share the same uid', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();
@@ -775,4 +1039,109 @@ describe('FlowsFloatContextMenu', () => {
     expect(firstOverlay.getAttribute('data-model-uid')).toBe(firstInstanceId);
     expect(secondOverlay.getAttribute('data-model-uid')).toBe(secondInstanceId);
   });
+
+  it('keeps a forked child toolbar active while dragging one of its toolbar items', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const parentModel = createModel(engine, 'parent-forked-drag-model');
+    const childMasterModel = new FlowModel({ uid: 'forked-drag-child-model', flowEngine: engine });
+    childMasterModel.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
+    const childFork = childMasterModel.createFork({}, 'drag-card') as FlowModel & { forkId?: string };
+    const childInstanceId = `forked-drag-child-model::${String(childFork.forkId)}`;
+    const appContainer = createAppContainer();
+    mockRect(appContainer, { top: 0, left: 0, width: 1280, height: 900 });
+
+    const { getByTestId } = renderWithProviders(
+      engine,
+      <DndProvider>
+        <FlowsFloatContextMenu model={parentModel}>
+          <div data-testid="parent-content">
+            <div data-testid="parent-gap">gap</div>
+            <FlowsFloatContextMenu
+              model={childFork}
+              extraToolbarItems={[
+                {
+                  key: 'forked-toolbar-drag',
+                  component: ForkedToolbarDragItem,
+                  sort: 100,
+                },
+              ]}
+            >
+              <div data-testid="forked-child-content">child</div>
+            </FlowsFloatContextMenu>
+          </div>
+        </FlowsFloatContextMenu>
+      </DndProvider>,
+      { container: appContainer },
+    );
+
+    const parentHost = getHost(getByTestId('parent-content'));
+    const childHost = getHost(getByTestId('forked-child-content'));
+    const parentGap = getByTestId('parent-gap');
+    mockRect(parentHost, { top: 10, left: 10, width: 320, height: 160 });
+    mockRect(childHost, { top: 28, left: 36, width: 120, height: 48 });
+
+    fireEvent.mouseEnter(parentHost);
+
+    await waitFor(() => {
+      expect(queryOverlay(appContainer, 'parent-forked-drag-model')).toBeTruthy();
+    });
+
+    fireEvent.mouseEnter(childHost);
+    fireEvent.mouseMove(childHost);
+
+    const childOverlay = await waitFor(() => {
+      const nextOverlay = queryOverlay(appContainer, childInstanceId);
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(queryOverlay(appContainer, 'parent-forked-drag-model')).toBeNull();
+      expect(within(childOverlay).getByLabelText('forked-toolbar-drag')).toBeTruthy();
+    });
+
+    const childIcons = childOverlay.querySelector('.nb-toolbar-container-icons') as HTMLDivElement;
+    fireEvent.mouseLeave(parentHost, { relatedTarget: childIcons });
+    fireEvent.mouseLeave(childHost, { relatedTarget: childIcons });
+    fireEvent.mouseEnter(childIcons, { relatedTarget: childHost });
+
+    const dragButton = within(childOverlay).getByLabelText('forked-toolbar-drag');
+    const dragActivityListener = vi.fn();
+    dragButton.ownerDocument.addEventListener(TOOLBAR_DRAG_ACTIVITY_EVENT, dragActivityListener);
+    fireEvent.pointerDown(dragButton.parentElement as HTMLElement, { button: 0, clientX: 48, clientY: 36 });
+
+    expect(dragActivityListener).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ active: true, modelUid: childInstanceId }),
+      }),
+    );
+    dragButton.ownerDocument.removeEventListener(TOOLBAR_DRAG_ACTIVITY_EVENT, dragActivityListener);
+
+    vi.useFakeTimers();
+    const querySelectorAllSpy = vi.spyOn(parentGap.ownerDocument, 'querySelectorAll');
+
+    try {
+      fireEvent.mouseLeave(childIcons, { relatedTarget: parentGap });
+      fireEvent.mouseEnter(parentHost, { relatedTarget: childIcons });
+      fireEvent.mouseEnter(parentGap, { relatedTarget: childIcons });
+      fireEvent.mouseMove(parentGap);
+
+      expect(querySelectorAllSpy).not.toHaveBeenCalled();
+
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(250);
+      });
+    } finally {
+      querySelectorAllSpy.mockRestore();
+      vi.useRealTimers();
+    }
+
+    await waitFor(() => {
+      const childOverlayAfterDrag = queryOverlay(appContainer, childInstanceId);
+      expect(childOverlayAfterDrag).toBeTruthy();
+      expect(childOverlayAfterDrag?.className).toContain('nb-toolbar-visible');
+      expect(queryOverlay(appContainer, 'parent-forked-drag-model')).toBeNull();
+    });
+  });
 });

package/src/components/settings/wrappers/contextual/useFloatToolbarVisibility.ts

@@ -47,6 +47,25 @@ const getToolbarModelUidFromTarget = (target: EventTarget | null): string | null
   return target.closest('.nb-toolbar-container[data-model-uid]')?.getAttribute('data-model-uid') || null;
 };
 
+const escapeCssAttributeValue = (value: string): string => {
+  return value
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, '\\a ')
+    .replace(/\r/g, '\\d ')
+    .replace(/\f/g, '\\c ');
+};
+
+const isToolbarModelUidRendered = (ownerDocument: Document | null, modelUid: string): boolean => {
+  if (!ownerDocument) {
+    return false;
+  }
+
+  return !!ownerDocument.querySelector<HTMLElement>(
+    `.nb-toolbar-container[data-model-uid="${escapeCssAttributeValue(modelUid)}"]`,
+  );
+};
+
 const isNodeWithinDescendantFloatToolbar = (
   target: EventTarget | null,
   container: HTMLElement | null,
@@ -264,6 +283,15 @@ export const useFloatToolbarVisibility = ({
 
       if (isCurrentHostTarget) {
         clearHideToolbarTimer();
+        setActiveChildToolbarIds((prevIds) => {
+          if (!prevIds.length) {
+            return prevIds;
+          }
+
+          const ownerDocument = containerRef.current?.ownerDocument ?? null;
+          const nextIds = prevIds.filter((id) => isToolbarModelUidRendered(ownerDocument, id));
+          return nextIds.length === prevIds.length ? prevIds : nextIds;
+        });
         setHostHovered(true);
       }
 

package/src/flowContext.ts

@@ -3429,7 +3429,19 @@ export class FlowEngineContext extends BaseFlowEngineContext {
       }),
     });
     this.defineProperty('role', {
-      get: () => this.api?.auth?.role,
+      get: () => {
+        const currentRole = this.api?.auth?.role;
+        if (currentRole !== '__union__') {
+          return currentRole;
+        }
+        const roles = this.user?.roles;
+        if (!Array.isArray(roles)) {
+          return [];
+        }
+        return roles
+          .map((role: { name?: string }) => role?.name)
+          .filter((name: string | undefined): name is string => !!name);
+      },
       cache: false,
       // 注意：使用惰性 meta 工厂，避免在 i18n 尚未注入时提前求值导致无法翻译
       meta: Object.assign(() => ({ type: 'string', title: this.t('Current role'), sort: 990 }), {