@nocobase/flow-engine 2.1.0-alpha.13 → 2.1.0-alpha.14

package/src/__tests__/flow-engine.test.ts

@@ -89,13 +89,7 @@ describe('FlowEngine', () => {
     class MockFlowModelRepository implements IFlowModelRepository {
       // 使用可配置返回值，便于不同用例控制 findOne 行为
       findOneResult: any = null;
-      ensureResult: any = null;
-      ensureCalls = 0;
       save = vi.fn(async (model: FlowModel) => ({ success: true, uid: model.uid }));
-      async ensure() {
-        this.ensureCalls += 1;
-        return this.ensureResult ? JSON.parse(JSON.stringify(this.ensureResult)) : null;
-      }
       async findOne() {
         // 返回深拷贝，避免被测试过程修改
         return this.findOneResult ? JSON.parse(JSON.stringify(this.findOneResult)) : null;
@@ -194,47 +188,5 @@ describe('FlowEngine', () => {
       expect(Array.isArray(mounted)).toBe(false);
       expect(mounted?.uid).toBe('c3');
     });
-
-    it('should call repository.ensure with repository context preserved', async () => {
-      const parent = engine.createModel({ uid: 'p4', use: 'FlowModel' });
-
-      repo.ensureResult = {
-        uid: 'c4',
-        use: 'FlowModel',
-        parentId: parent.uid,
-        subKey: 'page',
-        subType: 'object',
-      };
-
-      const child = await engine.loadOrCreateModel({
-        parentId: parent.uid,
-        subKey: 'page',
-        subType: 'object',
-        use: 'FlowModel',
-        async: true,
-      });
-
-      expect(child).toBeTruthy();
-      expect(repo.ensureCalls).toBe(1);
-      expect((parent.subModels as any).page).toBe(child);
-      expect(repo.save).not.toHaveBeenCalled();
-    });
-
-    it('should not persist through ensure when skipSave is true', async () => {
-      repo.findOneResult = null;
-
-      const model = await engine.loadOrCreateModel(
-        {
-          uid: 'c5',
-          use: 'FlowModel',
-        },
-        { skipSave: true },
-      );
-
-      expect(model).toBeTruthy();
-      expect(model?.uid).toBe('c5');
-      expect(repo.ensureCalls).toBe(0);
-      expect(repo.save).not.toHaveBeenCalled();
-    });
   });
 });

package/src/__tests__/flowEngine.modelLoaders.test.ts

@@ -16,14 +16,10 @@ class MockFlowModelRepository implements IFlowModelRepository {
   findOneResult: any = null;
   save = vi.fn(async (model: FlowModel) => ({ success: true, uid: model.uid }));
 
-  async findOne(_query?: any) {
+  async findOne() {
     return this.findOneResult ? JSON.parse(JSON.stringify(this.findOneResult)) : null;
   }
 
-  async ensure(options: any) {
-    return await this.findOne(options);
-  }
-
   async destroy() {
     return true;
   }

package/src/__tests__/flowEngine.saveModel.test.ts

@@ -40,10 +40,6 @@ class MockFlowModelRepository implements IFlowModelRepository {
     return null;
   }
 
-  async ensure(options: any): Promise<any> {
-    return await this.findOne(options);
-  }
-
   async destroy(uid: string): Promise<boolean> {
     return true;
   }

package/src/__tests__/runjsSnippets.test.ts

@@ -125,8 +125,8 @@ describe('RunJS Snippets', () => {
       expect(tableStyle?.scenes).toEqual(['tableFieldEvent']);
 
       const fieldStyle = fieldSnippets.find((s) => s.ref === 'scene/detail/set-field-style');
-      expect(fieldStyle?.name).toBe('表单、详情字段样式设置');
-      expect(fieldStyle?.body).toContain('ctx.model.subModels.field.props.style');
+      expect(fieldStyle?.name).toBe('设置表单项/详情项样式');
+      expect(fieldStyle?.body).toContain('ctx.model.props.style');
       expect(fieldStyle?.scenes).toEqual(expect.arrayContaining(['detailFieldEvent', 'formFieldEvent']));
       expect(fieldStyle?.groups).toEqual(expect.arrayContaining(['scene/detail', 'scene/form']));
 

package/src/components/FlowModelRenderer.tsx

@@ -69,7 +69,7 @@ export interface FlowModelRendererProps {
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
-        /** 自定义工具栏样式 */
+        /** 自定义工具栏样式，`top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'
@@ -112,6 +112,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
+        /** `top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'
@@ -182,6 +183,7 @@ const FlowModelRendererCore: React.FC<{
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
+        /** `top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'

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,38 @@ 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) => {
+      // 工具栏自身容器必须优先，保证鼠标从 icon 移到菜单时仍处于同一 hover 树。
+      // 弹窗场景的裁剪问题由 useFloatToolbarPortal 负责把 toolbar 挂到正确的 popup host。
+      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 +884,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={{