@nocobase/flow-engine 2.0.28 → 2.0.29

package/src/components/__tests__/flow-model-render-error-fallback.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, cleanup, waitFor } from '@testing-library/react';
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import { App, ConfigProvider } from 'antd';
 import { FlowEngine } from '../../flowEngine';
 import { FlowModel, ModelRenderMode } from '../../models/flowModel';
@@ -94,6 +94,16 @@ const clickDeleteFromLastDropdown = async () => {
   menu.onClick?.({ key: 'delete' });
 };
 
+const getHost = (element: HTMLElement) => element.closest('[data-has-float-menu="true"]') as HTMLDivElement;
+
+const hoverHostAndClickDelete = async (element: HTMLElement) => {
+  const host = getHost(element);
+  if (host) {
+    fireEvent.mouseEnter(host);
+  }
+  await clickDeleteFromLastDropdown();
+};
+
 // ---------------- Tests ----------------
 describe('Delete problematic model via FlowSettings menu', () => {
   beforeEach(() => {
@@ -120,7 +130,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     // satisfy FlowsFloatContextMenu styles
     model.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
 
-    render(
+    const { findByTestId } = render(
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
@@ -130,7 +140,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       </ConfigProvider>,
     );
 
-    await clickDeleteFromLastDropdown();
+    await hoverHostAndClickDelete(await findByTestId('result'));
     expect(engine.getModel(model.uid)).toBeUndefined();
   });
 
@@ -163,7 +173,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     parent.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
     child.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
 
-    render(
+    const { findByTestId } = render(
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
@@ -173,7 +183,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       </ConfigProvider>,
     );
 
-    await clickDeleteFromLastDropdown();
+    await hoverHostAndClickDelete(await findByTestId('result'));
     expect(engine.getModel(child.uid)).toBeUndefined();
     const remain = (parent.subModels as any).items || [];
     expect(remain.find((m: FlowModel) => m.uid === child.uid)).toBeUndefined();
@@ -208,7 +218,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     parent.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
     child.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
 
-    render(
+    const { findByTestId } = render(
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
@@ -218,7 +228,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       </ConfigProvider>,
     );
 
-    await clickDeleteFromLastDropdown();
+    await hoverHostAndClickDelete(await findByTestId('result'));
     expect(engine.getModel(child.uid)).toBeUndefined();
     const remain = (parent.subModels as any).cells || [];
     expect(remain.find((m: FlowModel) => m.uid === child.uid)).toBeUndefined();

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

@@ -8,6 +8,7 @@
  */
 
 import { ExclamationCircleOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
 import type { DropdownProps, MenuProps } from 'antd';
 import { App, Dropdown, Modal, Tooltip, theme } from 'antd';
 import React, { startTransition, useCallback, useEffect, useMemo, useState, FC } from 'react';
@@ -188,15 +189,42 @@ interface DefaultSettingsIconProps {
   showCopyUidButton?: boolean;
   menuLevels?: number; // Menu levels: 1=current model only (default), 2=include sub-models
   flattenSubMenus?: boolean; // Whether to flatten sub-menus: false=group by model (default), true=flatten all
+  onDropdownVisibleChange?: (open: boolean) => void;
+  getPopupContainer?: DropdownProps['getPopupContainer'];
   [key: string]: any; // Allow additional props
 }
 
+const TOOLBAR_ICONS_SELECTOR = '.nb-toolbar-container-icons';
+const TOOLBAR_CONTAINER_SELECTOR = '.nb-toolbar-container';
+const TOOLBAR_DROPDOWN_OVERLAY_CLASS = css`
+  width: max-content;
+  min-width: max-content;
+
+  .ant-dropdown-menu {
+    width: max-content;
+    min-width: max-content;
+  }
+`;
+
+const getToolbarPopupContainer = (triggerNode?: HTMLElement | null) => {
+  if (!triggerNode) {
+    return null;
+  }
+
+  return (
+    (triggerNode.closest(TOOLBAR_ICONS_SELECTOR) as HTMLElement | null) ||
+    (triggerNode.closest(TOOLBAR_CONTAINER_SELECTOR) as HTMLElement | null)
+  );
+};
+
 export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
   model,
   showDeleteButton = true,
   showCopyUidButton = true,
   menuLevels = 1, // 默认一级菜单
   flattenSubMenus = true,
+  onDropdownVisibleChange,
+  getPopupContainer,
 }) => {
   const { message } = App.useApp();
   const t = useMemo(() => getT(model), [model]);
@@ -210,15 +238,37 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
   const [isLoading, setIsLoading] = useState(true);
   const closeDropdown = useCallback(() => {
     setVisible(false);
-  }, []);
-  const handleOpenChange: DropdownProps['onOpenChange'] = useCallback((nextOpen: boolean, info) => {
-    if (info.source === 'trigger' || nextOpen) {
-      // 当鼠标快速滑过时，终止菜单的渲染，防止卡顿
-      startTransition(() => {
-        setVisible(nextOpen);
-      });
-    }
-  }, []);
+    onDropdownVisibleChange?.(false);
+  }, [onDropdownVisibleChange]);
+  const resolvePopupContainer = useCallback<NonNullable<DropdownProps['getPopupContainer']>>(
+    (triggerNode) => {
+      // 优先挂到工具栏自身容器，避免 modal / drawer 中鼠标从图标移动到菜单时先离开工具栏树。
+      return (
+        getToolbarPopupContainer(triggerNode) ||
+        getPopupContainer?.(triggerNode) ||
+        triggerNode?.parentElement ||
+        document.body
+      );
+    },
+    [getPopupContainer],
+  );
+  const handleOpenChange: DropdownProps['onOpenChange'] = useCallback(
+    (nextOpen: boolean, info) => {
+      if (info.source === 'trigger' || nextOpen) {
+        // 当鼠标快速滑过时，终止菜单的渲染，防止卡顿
+        startTransition(() => {
+          setVisible(nextOpen);
+        });
+        onDropdownVisibleChange?.(nextOpen);
+      }
+    },
+    [onDropdownVisibleChange],
+  );
+  useEffect(() => {
+    return () => {
+      onDropdownVisibleChange?.(false);
+    };
+  }, [onDropdownVisibleChange]);
   const dropdownMaxHeight = useNiceDropdownMaxHeight([visible]);
   useEffect(() => {
     let mounted = true;
@@ -833,6 +883,9 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
 
   return (
     <Dropdown
+      getPopupContainer={resolvePopupContainer}
+      overlayClassName={TOOLBAR_DROPDOWN_OVERLAY_CLASS}
+      overlayStyle={{ width: 'max-content', minWidth: 'max-content' }}
       onOpenChange={handleOpenChange}
       open={visible}
       menu={{