@nocobase/flow-engine 2.1.0-beta.10 → 2.1.0-beta.12

package/lib/runjs-context/snippets/index.js

@@ -81,6 +81,7 @@ const snippets = {
   "scene/detail/status-tag": /* @__PURE__ */ __name(() => import("./scene/detail/status-tag.snippet"), "scene/detail/status-tag"),
   "scene/detail/relative-time": /* @__PURE__ */ __name(() => import("./scene/detail/relative-time.snippet"), "scene/detail/relative-time"),
   "scene/detail/percentage-bar": /* @__PURE__ */ __name(() => import("./scene/detail/percentage-bar.snippet"), "scene/detail/percentage-bar"),
+  "scene/detail/set-field-style": /* @__PURE__ */ __name(() => import("./scene/detail/set-field-style.snippet"), "scene/detail/set-field-style"),
   // scene/form
   "scene/form/render-basic": /* @__PURE__ */ __name(() => import("./scene/form/render-basic.snippet"), "scene/form/render-basic"),
   "scene/form/set-field-value": /* @__PURE__ */ __name(() => import("./scene/form/set-field-value.snippet"), "scene/form/set-field-value"),
@@ -98,7 +99,8 @@ const snippets = {
   "scene/table/collection-selected-count": /* @__PURE__ */ __name(() => import("./scene/table/collection-selected-count.snippet"), "scene/table/collection-selected-count"),
   "scene/table/iterate-selected-rows": /* @__PURE__ */ __name(() => import("./scene/table/iterate-selected-rows.snippet"), "scene/table/iterate-selected-rows"),
   "scene/table/destroy-selected": /* @__PURE__ */ __name(() => import("./scene/table/destroy-selected.snippet"), "scene/table/destroy-selected"),
-  "scene/table/export-selected-json": /* @__PURE__ */ __name(() => import("./scene/table/export-selected-json.snippet"), "scene/table/export-selected-json")
+  "scene/table/export-selected-json": /* @__PURE__ */ __name(() => import("./scene/table/export-selected-json.snippet"), "scene/table/export-selected-json"),
+  "scene/table/set-cell-style": /* @__PURE__ */ __name(() => import("./scene/table/set-cell-style.snippet"), "scene/table/set-cell-style")
 };
 var snippets_default = snippets;
 function registerRunJSSnippet(ref, loader, options) {
@@ -131,10 +133,19 @@ function normalizeScenes(def, key) {
   return [];
 }
 __name(normalizeScenes, "normalizeScenes");
+function normalizeSceneGroup(scene) {
+  const mapping = {
+    detailFieldEvent: "detail",
+    tableFieldEvent: "table",
+    formFieldEvent: "form"
+  };
+  return mapping[scene] || scene;
+}
+__name(normalizeSceneGroup, "normalizeSceneGroup");
 function computeGroups(def, key) {
   const scenes = normalizeScenes(def, key);
   if (scenes.length) {
-    return scenes.map((scene) => `scene/${scene}`);
+    return Array.from(new Set(scenes.map((scene) => `scene/${normalizeSceneGroup(scene)}`)));
   }
   const parts = key.split("/");
   if (!parts.length) return [];

package/lib/runjs-context/snippets/scene/detail/set-field-style.snippet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 type { SnippetModule } from '../../types';
+declare const snippet: SnippetModule;
+export default snippet;

package/lib/runjs-context/snippets/scene/detail/set-field-style.snippet.js

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var set_field_style_snippet_exports = {};
+__export(set_field_style_snippet_exports, {
+  default: () => set_field_style_snippet_default
+});
+module.exports = __toCommonJS(set_field_style_snippet_exports);
+const snippet = {
+  contexts: ["*"],
+  scenes: ["detailFieldEvent", "formFieldEvent"],
+  prefix: "sn-item-style",
+  label: "Set form item/details item style",
+  description: "Customize form item and details item container styles",
+  locales: {
+    "zh-CN": {
+      label: "\u8BBE\u7F6E\u8868\u5355\u9879/\u8BE6\u60C5\u9879\u6837\u5F0F",
+      description: "\u81EA\u5B9A\u4E49\u8868\u5355\u9879\u548C\u8BE6\u60C5\u9879\u5BB9\u5668\u6837\u5F0F"
+    }
+  },
+  content: `
+ctx.model.props.style = {
+  background: 'red',
+};
+`
+};
+var set_field_style_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/table/set-cell-style.snippet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 type { SnippetModule } from '../../types';
+declare const snippet: SnippetModule;
+export default snippet;

package/lib/runjs-context/snippets/scene/table/set-cell-style.snippet.js

@@ -0,0 +1,54 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var set_cell_style_snippet_exports = {};
+__export(set_cell_style_snippet_exports, {
+  default: () => set_cell_style_snippet_default
+});
+module.exports = __toCommonJS(set_cell_style_snippet_exports);
+const snippet = {
+  contexts: ["*"],
+  scenes: ["tableFieldEvent"],
+  prefix: "sn-table-cell-style",
+  label: "Set table cell style",
+  description: "Customize table field cell styles with onCell",
+  locales: {
+    "zh-CN": {
+      label: "\u8868\u683C\u5B57\u6BB5\u6837\u5F0F\u8BBE\u7F6E",
+      description: "\u901A\u8FC7 onCell \u81EA\u5B9A\u4E49\u8868\u683C\u5B57\u6BB5\u5355\u5143\u683C\u6837\u5F0F"
+    }
+  },
+  content: `
+ctx.model.props.onCell = (record, rowIndex) => {
+  return {
+    style: {
+      background: 'red',
+    },
+  };
+};
+`
+};
+var set_cell_style_snippet_default = snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.0-beta.10",
+  "version": "2.1.0-beta.12",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,9 +8,10 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.1.0-beta.10",
-    "@nocobase/shared": "2.1.0-beta.10",
+    "@nocobase/sdk": "2.1.0-beta.12",
+    "@nocobase/shared": "2.1.0-beta.12",
     "ahooks": "^3.7.2",
+    "axios": "^1.7.0",
     "dayjs": "^1.11.9",
     "dompurify": "^3.0.2",
     "lodash": "^4.x",
@@ -36,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "f7e467710d4748f7089b779494b220025b39bc02"
+  "gitHead": "25cee9643f42f850afc4adc33c55a56850ac730d"
 }

package/src/__tests__/flowContext.test.ts

@@ -7,7 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, expect, it, vi } from 'vitest';
+import axios from 'axios';
+import { describe, expect, it, vi, afterEach } from 'vitest';
 import { FlowContext, FlowRuntimeContext, FlowRunJSContext, type PropertyMetaFactory } from '../flowContext';
 import { FlowEngine } from '../flowEngine';
 import { FlowModel } from '../models/flowModel';
@@ -1630,6 +1631,69 @@ describe('runAction delegation from runtime context', () => {
   });
 });
 
+describe('FlowContext request defaults', () => {
+  class RequestModel extends FlowModel {}
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const createRequestContext = () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RequestModel });
+
+    const apiRequest = vi.fn(async (options) => options);
+    const app = {
+      getApiUrl(pathname = '') {
+        return 'https://app.example.com/api/'.replace(/\/$/g, '') + '/' + pathname.replace(/^\//g, '');
+      },
+    };
+
+    engine.context.defineProperty('api', { value: { request: apiRequest } as any });
+    engine.context.defineProperty('app', { value: app });
+
+    const model = engine.createModel({ use: 'RequestModel' });
+    const ctx = new FlowRuntimeContext(model, 'flow');
+    const directAxiosRequest = vi.spyOn(axios, 'request').mockResolvedValue({ data: {} } as any);
+
+    return { ctx, apiRequest, directAxiosRequest };
+  };
+
+  it.each([
+    ['apiClient', 'users:list', 'api'],
+    ['apiClient', '/api/users:list', 'api'],
+    ['apiClient', 'https://app.example.com/api/users:list', 'api'],
+    ['direct axios', 'https://app.example.com/custom-api/users', 'axios'],
+  ])('should use %s for %s', async (_target, url, expected) => {
+    const { ctx, apiRequest, directAxiosRequest } = createRequestContext();
+
+    await ctx.request({ url, method: 'get' });
+
+    if (expected === 'api') {
+      expect(apiRequest).toHaveBeenCalledTimes(1);
+      expect(directAxiosRequest).not.toHaveBeenCalled();
+      return;
+    }
+
+    expect(directAxiosRequest).toHaveBeenCalledTimes(1);
+    expect(apiRequest).not.toHaveBeenCalled();
+  });
+
+  it('should use direct axios for cross-origin absolute urls', async () => {
+    const { ctx, apiRequest, directAxiosRequest } = createRequestContext();
+
+    await ctx.request({ url: 'https://api.example.com/users', method: 'get', skipAuth: false });
+
+    expect(directAxiosRequest).toHaveBeenCalledTimes(1);
+    expect(apiRequest).not.toHaveBeenCalled();
+    expect(directAxiosRequest.mock.calls[0][0]).toMatchObject({
+      url: 'https://api.example.com/users',
+      method: 'get',
+      skipAuth: false,
+    });
+  });
+});
+
 describe('FlowContext delayed meta loading', () => {
   // 测试场景：属性定义时 meta 为异步函数，首次访问时延迟加载
   // 输入：属性带有异步 meta 函数

package/src/__tests__/runjsContext.test.ts

@@ -38,6 +38,7 @@ describe('flowRunJSContext registry and doc', () => {
         'JSBlockModel',
         'JSFieldModel',
         'JSItemModel',
+        'JSItemActionModel',
         'JSColumnModel',
         'FormJSFieldItemModel',
         'JSRecordActionModel',
@@ -58,8 +59,10 @@ describe('flowRunJSContext registry and doc', () => {
     it('should expose scene metadata for contexts', () => {
       expect(getRunJSScenesForModel('JSBlockModel', 'v1')).toEqual(['block']);
       expect(getRunJSScenesForModel('JSFieldModel', 'v1')).toEqual(['detail']);
+      expect(getRunJSScenesForModel('JSItemActionModel', 'v1')).toEqual(['table']);
       expect(getRunJSScenesForModel('JSBlockModel', 'v2')).toEqual(['block']);
       expect(getRunJSScenesForModel('JSFieldModel', 'v2')).toEqual(['detail']);
+      expect(getRunJSScenesForModel('JSItemActionModel', 'v2')).toEqual(['table']);
       expect(getRunJSScenesForModel('UnknownModel', 'v1')).toEqual([]);
       expect(getRunJSScenesForModel('UnknownModel', 'v2')).toEqual([]);
     });

package/src/__tests__/runjsContextRuntime.test.ts

@@ -186,6 +186,7 @@ describe('RunJS Context Runtime Behavior', () => {
         'JSBlockModel',
         'JSFieldModel',
         'JSItemModel',
+        'JSItemActionModel',
         'JSColumnModel',
         'FormJSFieldItemModel',
         'JSRecordActionModel',
@@ -237,6 +238,7 @@ describe('RunJS Context Runtime Behavior', () => {
         'JSBlockModel',
         'JSFieldModel',
         'JSItemModel',
+        'JSItemActionModel',
         'JSColumnModel',
         'FormJSFieldItemModel',
         'JSRecordActionModel',

package/src/__tests__/runjsSnippets.test.ts

@@ -112,6 +112,27 @@ describe('RunJS Snippets', () => {
       expect(multiScene?.scenes).toEqual(expect.arrayContaining(['detail', 'table']));
       expect(multiScene?.groups).toEqual(expect.arrayContaining(['scene/detail', 'scene/table']));
     });
+
+    it('should expose new style snippets for matching contexts', async () => {
+      const tableSnippets = await listSnippetsForContext('JSColumnRunJSContext', 'v1', 'zh-CN');
+      const fieldSnippets = await listSnippetsForContext('FormJSFieldItemRunJSContext', 'v1', 'zh-CN');
+      const detailEventSnippets = await listSnippetsForContext('DetailsItemModel', 'v1', 'zh-CN');
+      const tableEventSnippets = await listSnippetsForContext('TableColumnModel', 'v1', 'zh-CN');
+
+      const tableStyle = tableSnippets.find((s) => s.ref === 'scene/table/set-cell-style');
+      expect(tableStyle?.name).toBe('表格字段样式设置');
+      expect(tableStyle?.body).toContain('ctx.model.props.onCell');
+      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.props.style');
+      expect(fieldStyle?.scenes).toEqual(expect.arrayContaining(['detailFieldEvent', 'formFieldEvent']));
+      expect(fieldStyle?.groups).toEqual(expect.arrayContaining(['scene/detail', 'scene/form']));
+
+      expect(detailEventSnippets.some((s) => s.ref === 'scene/detail/set-field-style')).toBe(true);
+      expect(tableEventSnippets.some((s) => s.ref === 'scene/table/set-cell-style')).toBe(true);
+    });
   });
 
   describe('New snippets', () => {

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={{