@nocobase/flow-engine 2.2.0-beta.15 → 2.2.0-beta.16

package/lib/acl/Acl.d.ts

@@ -5,7 +5,7 @@ interface CheckOptions {
     actionName: string;
     fields?: string[];
     recordPkValue?: string | number;
-    allowedActions: any[];
+    allowedActions?: Record<string, Array<string | number>>;
 }
 export declare class ACL {
     private flowEngine;
@@ -26,6 +26,7 @@ export declare class ACL {
     verifyScope: (actionName: string, recordPkValue: any, allowedActions: any) => boolean;
     parseAction(options: CheckOptions): any;
     parseField(options: CheckOptions): boolean;
+    can(options: CheckOptions): boolean;
     aclCheck(options: CheckOptions): Promise<boolean>;
 }
 export {};

package/lib/acl/Acl.js

@@ -154,6 +154,34 @@ const _ACL = class _ACL {
     const allowed = whitelist.includes(fields[0]);
     return allowed;
   }
+  can(options) {
+    var _a;
+    const { allowAll } = this.data;
+    if (allowAll) {
+      return true;
+    }
+    const { actionName, allowedActions, recordPkValue } = options;
+    const hasRecordPkValue = recordPkValue !== void 0 && recordPkValue !== null;
+    const recordPermission = hasRecordPkValue && allowedActions ? this.verifyScope(actionName, recordPkValue, allowedActions) : null;
+    if (hasRecordPkValue && allowedActions && recordPermission !== true) {
+      return false;
+    }
+    const params = this.parseAction(options);
+    if (!params) {
+      return false;
+    }
+    if (!import_lodash.default.isEmpty(params.filter) && recordPermission !== true) {
+      return false;
+    }
+    if (!((_a = options.fields) == null ? void 0 : _a.length)) {
+      return true;
+    }
+    const allowedFields = [].concat(params.whitelist || []).concat(params.fields || []).concat(params.appends || []);
+    if (!allowedFields.length) {
+      return true;
+    }
+    return options.fields.every((field) => allowedFields.includes(field));
+  }
   async aclCheck(options) {
     const { allowAll } = this.data;
     if (allowAll) {

package/lib/components/MobilePopup.js

@@ -47,25 +47,36 @@ var import_react_i18next = require("react-i18next");
 var import_lazy_helper = require("../lazy-helper");
 const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
 const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
+const getMobilePopupMaxHeight = /* @__PURE__ */ __name(() => {
+  var _a;
+  if (typeof CSS !== "undefined" && ((_a = CSS.supports) == null ? void 0 : _a.call(CSS, "height", "100dvh"))) {
+    return "calc(100dvh - var(--nb-mobile-page-header-height, 46px))";
+  }
+  return "calc(100vh - var(--nb-mobile-page-header-height, 46px))";
+}, "getMobilePopupMaxHeight");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
   var _a;
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
   const { componentCls, hashId } = (0, import_MobilePopup.useMobileActionDrawerStyle)();
   const bodyStyles = (_a = props.styles) == null ? void 0 : _a.body;
+  const defaultMaxHeight = getMobilePopupMaxHeight();
   const popupStyle = (0, import_react.useMemo)(() => {
     return {
       minHeight: (bodyStyles == null ? void 0 : bodyStyles.minHeight) ?? minHeight,
       height: bodyStyles == null ? void 0 : bodyStyles.height,
-      maxHeight: bodyStyles == null ? void 0 : bodyStyles.maxHeight
+      maxHeight: (bodyStyles == null ? void 0 : bodyStyles.maxHeight) ?? defaultMaxHeight
     };
-  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, minHeight]);
+  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, defaultMaxHeight, minHeight]);
   const bodyStyle = (0, import_react.useMemo)(() => {
     return {
       padding: 0,
+      maxHeight: defaultMaxHeight,
+      overflowY: "auto",
+      overflowX: "hidden",
       ...bodyStyles
     };
-  }, [bodyStyles]);
+  }, [bodyStyles, defaultMaxHeight]);
   const handleCloseKeyDown = (0, import_react.useCallback)(
     (event) => {
       if (event.key !== "Enter" && event.key !== " ") {

package/lib/components/subModel/LazyDropdown.js

@@ -347,19 +347,15 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
       },
       onChange: (e) => {
-        var _a;
         e.stopPropagation();
         const value = e.target.value;
         if (shouldActivateSearchSubmenu) {
           activateSearchSubmenu(searchKey);
         }
-        if (((_a = e.nativeEvent) == null ? void 0 : _a.isComposing) || searchHandlers.isComposing(searchKey)) {
+        if (e.nativeEvent.isComposing || searchHandlers.isComposing(searchKey)) {
           searchHandlers.updateInputValue(searchKey, value);
           return;
         }
-        if (!value && shouldActivateSearchSubmenu) {
-          deactivateSearchSubmenu(searchKey);
-        }
         searchHandlers.updateSearchValue(searchKey, value);
       },
       onCompositionStart: (e) => {
@@ -373,11 +369,7 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
         const value = e.currentTarget.value;
         if (shouldActivateSearchSubmenu) {
-          if (value) {
-            activateSearchSubmenu(searchKey);
-          } else {
-            deactivateSearchSubmenu(searchKey);
-          }
+          activateSearchSubmenu(searchKey);
         }
         searchHandlers.endComposition(searchKey, value);
       },
@@ -385,10 +377,20 @@ const createSearchItem = /* @__PURE__ */ __name((item, searchKey, currentSearchV
         e.stopPropagation();
       },
       onKeyDown: (e) => {
+        if (e.key === "Escape" || e.key === "Tab") {
+          deactivateSearchSubmenu(searchKey);
+          return;
+        }
+        if (shouldActivateSearchSubmenu) {
+          activateSearchSubmenu(searchKey);
+        }
         e.stopPropagation();
       },
       onMouseDown: (e) => {
         e.stopPropagation();
+        if (shouldActivateSearchSubmenu) {
+          activateSearchSubmenu(searchKey);
+        }
       },
       size: "small",
       style: {
@@ -409,7 +411,7 @@ const KEEP_OPEN_LABEL_STYLE = {
   width: "100%"
 };
 const DROPDOWN_PERSIST_TTL_MS = 350;
-const SUBMENU_CLOSE_DELAY = 0.05;
+const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
   motionLeave: false
@@ -417,13 +419,18 @@ const SUBMENU_MOTION_DISABLED = {
 const dropdownPersistRegistry = /* @__PURE__ */ new Map();
 const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   const engine = (0, import_provider.useFlowEngine)();
+  const { getPrefixCls } = import_react.default.useContext(import_antd.ConfigProvider.ConfigContext);
+  const triggerId = import_react.default.useId();
   const [menuVisible, setMenuVisible] = (0, import_react.useState)(false);
   const [openKeys, setOpenKeys] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-  const [activeSearchKey, setActiveSearchKey] = (0, import_react.useState)(null);
   const [rootItems, setRootItems] = (0, import_react.useState)([]);
   const [rootLoading, setRootLoading] = (0, import_react.useState)(false);
+  const activeSearchKeyRef = (0, import_react.useRef)(null);
   const closeByOutsideClickRef = (0, import_react.useRef)(false);
   const skipPreserveActiveSearchRef = (0, import_react.useRef)(false);
+  const triggerOpenClassName = `nb-lazy-dropdown-trigger-${triggerId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const defaultOpenClassName = `${getPrefixCls("dropdown", props.prefixCls)}-open`;
+  const mergedOpenClassName = [props.openClassName ?? defaultOpenClassName, triggerOpenClassName].filter(Boolean).join(" ");
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
   const { items: menuItems, keepDropdownOpen, persistKey, stateVersion, refreshKeys, ...dropdownMenuProps } = menu;
@@ -440,12 +447,12 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
   const closeMenu = (0, import_react.useCallback)(() => {
     setMenuVisible(false);
-    setActiveSearchKey(null);
+    activeSearchKeyRef.current = null;
     setOpenKeys(/* @__PURE__ */ new Set());
     clearAllSearchValues();
   }, [clearAllSearchValues]);
   const activateSearchSubmenu = (0, import_react.useCallback)((key) => {
-    setActiveSearchKey(key);
+    activeSearchKeyRef.current = key;
     setOpenKeys((prev) => {
       if (prev.has(key)) return prev;
       const next = new Set(prev);
@@ -454,34 +461,38 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
     });
   }, []);
   const deactivateSearchSubmenu = (0, import_react.useCallback)((key) => {
-    setActiveSearchKey((prev) => prev === key ? null : prev);
+    if (activeSearchKeyRef.current === key) {
+      activeSearchKeyRef.current = null;
+    }
   }, []);
   const closeActiveSearchForPath = (0, import_react.useCallback)(
     (keyPath) => {
+      const activeSearchKey = activeSearchKeyRef.current;
       if (!activeSearchKey || keyPath === activeSearchKey || keyPath.startsWith(`${activeSearchKey}/`) || activeSearchKey.startsWith(`${keyPath}/`)) {
         return;
       }
       skipPreserveActiveSearchRef.current = true;
       clearSearchValue(activeSearchKey);
-      setActiveSearchKey(null);
+      activeSearchKeyRef.current = null;
       setOpenKeys((prev) => {
         const next = new Set(prev);
         next.delete(activeSearchKey);
         return next;
       });
     },
-    [activeSearchKey, clearSearchValue]
+    [clearSearchValue]
   );
   const handleMenuOpenChange = (0, import_react.useCallback)(
     (nextOpenKeys) => {
       var _a, _b;
       let normalized = normalizeOpenKeys(nextOpenKeys);
-      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
-        if (normalized.length || skipPreserveActiveSearchRef.current) {
+      const activeSearchKey = activeSearchKeyRef.current;
+      if (activeSearchKey && !normalized.includes(activeSearchKey)) {
+        if (skipPreserveActiveSearchRef.current) {
           clearSearchValue(activeSearchKey);
-          setActiveSearchKey(null);
+          activeSearchKeyRef.current = null;
         } else {
-          normalized = [activeSearchKey];
+          normalized = Array.from(openKeys);
         }
       }
       if (!normalized.length && shouldPreventClose()) {
@@ -498,13 +509,15 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       (_b = dropdownMenuProps.onOpenChange) == null ? void 0 : _b.call(dropdownMenuProps, normalized);
       skipPreserveActiveSearchRef.current = false;
     },
-    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose]
+    [clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose]
   );
   (0, import_react.useEffect)(() => {
     if (!menuVisible) return;
     const markOutsideClick = /* @__PURE__ */ __name((event) => {
       const target = event.target;
-      const isOutside = !(target == null ? void 0 : target.closest(".ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup"));
+      const isInsidePopup = target == null ? void 0 : target.closest(".ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup");
+      const isInsideCurrentTrigger = target == null ? void 0 : target.closest(`.${triggerOpenClassName}`);
+      const isOutside = !isInsidePopup && !isInsideCurrentTrigger;
       closeByOutsideClickRef.current = isOutside;
       if (isOutside) {
         closeMenu();
@@ -516,7 +529,7 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       document.removeEventListener("pointerdown", markOutsideClick, true);
       document.removeEventListener("mousedown", markOutsideClick, true);
     };
-  }, [closeMenu, menuVisible]);
+  }, [closeMenu, menuVisible, triggerOpenClassName]);
   (0, import_react.useEffect)(() => {
     if (!persistKey) return;
     const until = dropdownPersistRegistry.get(persistKey) || 0;
@@ -734,13 +747,15 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
       ...props,
       open: menuVisible,
       destroyPopupOnHide: true,
+      mouseLeaveDelay: props.mouseLeaveDelay ?? MENU_CLOSE_DELAY,
+      openClassName: mergedOpenClassName,
       overlayClassName,
       placement: "bottomLeft",
       menu: {
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items,
-        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? MENU_CLOSE_DELAY,
         motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: /* @__PURE__ */ __name(() => {
         }, "onClick"),
@@ -752,7 +767,7 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
         }
       },
       onOpenChange: (visible, info) => {
-        if (!visible && activeSearchKey && (info == null ? void 0 : info.source) === "trigger" && !closeByOutsideClickRef.current) {
+        if (!visible && activeSearchKeyRef.current && (info == null ? void 0 : info.source) === "trigger" && !closeByOutsideClickRef.current) {
           return;
         }
         if (!visible && shouldPreventClose()) {

package/lib/locale/en-US.json

@@ -1,5 +1,6 @@
 {
   "Add": "Add",
+  "Are you sure you want to perform the action?": "Are you sure you want to perform the action?",
   "Are you sure you want to delete this item? This action cannot be undone.": "Are you sure you want to delete this item? This action cannot be undone.",
   "Are you sure to convert this template block to copy mode?": "Are you sure you want to convert this template block to copy mode?",
   "Array index out of bounds": "Array index {{index}} out of bounds for '{{subKey}}'",
@@ -53,6 +54,7 @@
   "Other blocks": "Other blocks",
   "Parent not found, cannot replace block": "Parent not found, cannot replace block",
   "Previous step": "Previous step",
+  "Please Confirm": "Please Confirm",
   "Replace current block with template?": "Replace current block with template?",
   "Replaced with template block": "Replaced with template block",
   "Render failed": "Render failed",

package/lib/locale/index.d.ts

@@ -9,6 +9,7 @@
 export declare const locales: {
     'en-US': {
         Add: string;
+        "Are you sure you want to perform the action?": string;
         "Are you sure you want to delete this item? This action cannot be undone.": string;
         "Are you sure to convert this template block to copy mode?": string;
         "Array index out of bounds": string;
@@ -62,6 +63,7 @@ export declare const locales: {
         "Other blocks": string;
         "Parent not found, cannot replace block": string;
         "Previous step": string;
+        "Please Confirm": string;
         "Replace current block with template?": string;
         "Replaced with template block": string;
         "Render failed": string;
@@ -91,6 +93,7 @@ export declare const locales: {
     };
     'zh-CN': {
         Add: string;
+        "Are you sure you want to perform the action?": string;
         "Are you sure you want to delete this item? This action cannot be undone.": string;
         "Are you sure to convert this template block to copy mode?": string;
         "Array index out of bounds": string;
@@ -150,6 +153,7 @@ export declare const locales: {
         OK: string;
         "Other blocks": string;
         "Previous step": string;
+        "Please Confirm": string;
         "Render failed": string;
         "Response record": string;
         "Step configuration": string;

package/lib/locale/zh-CN.json

@@ -1,5 +1,6 @@
 {
   "Add": "添加",
+  "Are you sure you want to perform the action?": "确定要执行此操作吗？",
   "Are you sure you want to delete this item? This action cannot be undone.": "确定要删除此项吗？此操作不可撤销。",
   "Are you sure to convert this template block to copy mode?": "确定将该模板区块转换为复制模式吗？",
   "Array index out of bounds": "数组索引 {{index}} 超出 '{{subKey}}' 的边界",
@@ -59,6 +60,7 @@
   "OK": "确定",
   "Other blocks": "其他区块",
   "Previous step": "上一步",
+  "Please Confirm": "请确认",
   "Render failed": "渲染失败",
   "Response record": "响应结果记录",
   "Step configuration": "步骤配置",

package/package.json

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

package/src/acl/Acl.tsx

@@ -16,7 +16,7 @@ interface CheckOptions {
   actionName: string;
   fields?: string[];
   recordPkValue?: string | number;
-  allowedActions: any[];
+  allowedActions?: Record<string, Array<string | number>>;
 }
 
 export class ACL {
@@ -149,6 +149,41 @@ export class ACL {
     return allowed;
   }
 
+  can(options: CheckOptions): boolean {
+    const { allowAll } = this.data;
+    if (allowAll) {
+      return true;
+    }
+
+    const { actionName, allowedActions, recordPkValue } = options;
+    const hasRecordPkValue = recordPkValue !== undefined && recordPkValue !== null;
+    const recordPermission =
+      hasRecordPkValue && allowedActions ? this.verifyScope(actionName, recordPkValue, allowedActions) : null;
+    if (hasRecordPkValue && allowedActions && recordPermission !== true) {
+      return false;
+    }
+
+    const params = this.parseAction(options);
+    if (!params) {
+      return false;
+    }
+    if (!_.isEmpty(params.filter) && recordPermission !== true) {
+      return false;
+    }
+    if (!options.fields?.length) {
+      return true;
+    }
+
+    const allowedFields: string[] = []
+      .concat(params.whitelist || [])
+      .concat(params.fields || [])
+      .concat(params.appends || []);
+    if (!allowedFields.length) {
+      return true;
+    }
+    return options.fields.every((field) => allowedFields.includes(field));
+  }
+
   async aclCheck(options: CheckOptions): Promise<boolean> {
     // await this.load();
     const { allowAll } = this.data;

package/src/acl/__tests__/Acl.test.tsx

@@ -71,6 +71,76 @@ describe('ACL', () => {
     expect(notOk).toBe(false);
   });
 
+  it('checks record update scope before field permission', () => {
+    const payload = {
+      data: {
+        allowAll: false,
+        actionAlias: {},
+        resources: ['posts'],
+        actions: { 'posts:update': { whitelist: ['title'] } },
+        strategy: { actions: [] },
+      },
+    };
+    const engine = makeEngine(payload);
+    const acl = new ACL(engine);
+    acl.setData(payload.data);
+
+    const options = {
+      dataSourceKey: 'main',
+      resourceName: 'posts',
+      actionName: 'update',
+      allowedActions: {
+        update: [1],
+      },
+    };
+
+    expect(acl.can({ ...options, recordPkValue: 1, fields: ['title'] })).toBe(true);
+    expect(acl.can({ ...options, recordPkValue: 2, fields: ['title'] })).toBe(false);
+    expect(acl.can({ ...options, recordPkValue: 1, fields: ['body'] })).toBe(false);
+    expect(acl.can({ ...options, recordPkValue: 0, fields: ['title'] })).toBe(false);
+    expect(
+      acl.can({
+        dataSourceKey: 'main',
+        resourceName: 'posts',
+        actionName: 'update',
+        fields: ['title'],
+      }),
+    ).toBe(true);
+  });
+
+  it('allows every field when a scoped action has no field restriction', () => {
+    const payload = {
+      data: {
+        allowAll: false,
+        actionAlias: {},
+        resources: ['posts'],
+        actions: {
+          'posts:update': {
+            filter: { createdById: '{{ ctx.state.currentUser.id }}' },
+          },
+        },
+        strategy: { actions: [] },
+      },
+    };
+    const engine = makeEngine(payload);
+    const acl = new ACL(engine);
+    acl.setData(payload.data);
+
+    const options = {
+      dataSourceKey: 'main',
+      resourceName: 'posts',
+      actionName: 'update',
+      allowedActions: {
+        update: [1],
+      },
+      fields: ['title'],
+    };
+
+    expect(acl.can({ ...options, recordPkValue: 1 })).toBe(true);
+    expect(acl.can({ ...options, recordPkValue: 2 })).toBe(false);
+    expect(acl.can({ ...options, allowedActions: undefined, recordPkValue: undefined })).toBe(false);
+  });
+
   it('reloads permissions when auth token changes', async () => {
     const payload1 = {
       data: {

package/src/components/MobilePopup.tsx

@@ -26,26 +26,38 @@ interface MobilePopupProps {
   footer?: ReactNode;
 }
 
+const getMobilePopupMaxHeight = () => {
+  if (typeof CSS !== 'undefined' && CSS.supports?.('height', '100dvh')) {
+    return 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+  }
+
+  return 'calc(100vh - var(--nb-mobile-page-header-height, 46px))';
+};
+
 export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
   const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const defaultMaxHeight = getMobilePopupMaxHeight();
   const popupStyle = useMemo(() => {
     return {
       minHeight: bodyStyles?.minHeight ?? minHeight,
       height: bodyStyles?.height,
-      maxHeight: bodyStyles?.maxHeight,
+      maxHeight: bodyStyles?.maxHeight ?? defaultMaxHeight,
     };
-  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, defaultMaxHeight, minHeight]);
 
-  const bodyStyle = useMemo(() => {
+  const bodyStyle = useMemo<React.CSSProperties>(() => {
     return {
       padding: 0,
+      maxHeight: defaultMaxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
       ...bodyStyles,
     };
-  }, [bodyStyles]);
+  }, [bodyStyles, defaultMaxHeight]);
 
   const handleCloseKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLSpanElement>) => {

package/src/components/__tests__/MobilePopup.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { MobilePopup } from '../MobilePopup';
 
 vi.mock('react-i18next', () => ({
@@ -61,6 +61,47 @@ describe('MobilePopup', () => {
     React.ComponentProps<typeof MobilePopup> & { styles?: { body?: React.CSSProperties } }
   >;
 
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('constrains the default popup to the dynamic viewport and keeps the body scrollable', () => {
+    vi.stubGlobal('CSS', {
+      supports: vi.fn((property: string, value: string) => property === 'height' && value === '100dvh'),
+    });
+
+    render(
+      <MobilePopup visible title="Title" onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    const maxHeight = 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+
+    expect(screen.getByTestId('mobile-popup')).toHaveStyle({ maxHeight });
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+    });
+  });
+
+  it('falls back to the layout viewport when dynamic viewport units are unavailable', () => {
+    vi.stubGlobal('CSS', {
+      supports: vi.fn(() => false),
+    });
+
+    render(
+      <MobilePopup visible title="Title" onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+    });
+  });
+
   it('applies drawer body styles as max bounds without forcing fixed half-window height', () => {
     render(
       <MobilePopupWithDrawerStyles visible title="Title" styles={{ body: { maxHeight: '50vh' } }} onClose={vi.fn()}>

package/src/components/subModel/LazyDropdown.tsx

@@ -8,7 +8,7 @@
  */
 
 import { css } from '@emotion/css';
-import { Dropdown, DropdownProps, Empty, Input, InputProps, Spin } from 'antd';
+import { ConfigProvider, Dropdown, DropdownProps, Empty, Input, InputProps, Spin } from 'antd';
 import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFlowEngine } from '../../provider';
 
@@ -484,13 +484,10 @@ const createSearchItem = (
           if (shouldActivateSearchSubmenu) {
             activateSearchSubmenu(searchKey);
           }
-          if ((e.nativeEvent as any)?.isComposing || searchHandlers.isComposing(searchKey)) {
+          if ((e.nativeEvent as InputEvent).isComposing || searchHandlers.isComposing(searchKey)) {
             searchHandlers.updateInputValue(searchKey, value);
             return;
           }
-          if (!value && shouldActivateSearchSubmenu) {
-            deactivateSearchSubmenu(searchKey);
-          }
           searchHandlers.updateSearchValue(searchKey, value);
         }}
         onCompositionStart={(e) => {
@@ -504,11 +501,7 @@ const createSearchItem = (
           e.stopPropagation();
           const value = e.currentTarget.value;
           if (shouldActivateSearchSubmenu) {
-            if (value) {
-              activateSearchSubmenu(searchKey);
-            } else {
-              deactivateSearchSubmenu(searchKey);
-            }
+            activateSearchSubmenu(searchKey);
           }
           searchHandlers.endComposition(searchKey, value);
         }}
@@ -516,11 +509,21 @@ const createSearchItem = (
           e.stopPropagation();
         }}
         onKeyDown={(e) => {
+          if (e.key === 'Escape' || e.key === 'Tab') {
+            deactivateSearchSubmenu(searchKey);
+            return;
+          }
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
           e.stopPropagation();
         }}
         onMouseDown={(e) => {
           // 防止菜单聚焦丢失或页面滚动
           e.stopPropagation();
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
         }}
         size="small"
         style={{
@@ -552,7 +555,7 @@ const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
 const DROPDOWN_PERSIST_TTL_MS = 350;
-const SUBMENU_CLOSE_DELAY = 0.05;
+const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
   motionLeave: false,
@@ -561,13 +564,20 @@ const dropdownPersistRegistry: Map<string, number> = new Map();
 
 const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownMenuProps }> = ({ menu, ...props }) => {
   const engine = useFlowEngine();
+  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
+  const triggerId = React.useId();
   const [menuVisible, setMenuVisible] = useState(false);
   const [openKeys, setOpenKeys] = useState<Set<string>>(new Set());
-  const [activeSearchKey, setActiveSearchKey] = useState<string | null>(null);
   const [rootItems, setRootItems] = useState<Item[]>([]);
   const [rootLoading, setRootLoading] = useState(false);
+  const activeSearchKeyRef = useRef<string | null>(null);
   const closeByOutsideClickRef = useRef(false);
   const skipPreserveActiveSearchRef = useRef(false);
+  const triggerOpenClassName = `nb-lazy-dropdown-trigger-${triggerId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const defaultOpenClassName = `${getPrefixCls('dropdown', props.prefixCls)}-open`;
+  const mergedOpenClassName = [props.openClassName ?? defaultOpenClassName, triggerOpenClassName]
+    .filter(Boolean)
+    .join(' ');
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
 
@@ -589,13 +599,13 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
   const closeMenu = useCallback(() => {
     setMenuVisible(false);
-    setActiveSearchKey(null);
+    activeSearchKeyRef.current = null;
     setOpenKeys(new Set());
     clearAllSearchValues();
   }, [clearAllSearchValues]);
 
   const activateSearchSubmenu = useCallback((key: string) => {
-    setActiveSearchKey(key);
+    activeSearchKeyRef.current = key;
     setOpenKeys((prev) => {
       if (prev.has(key)) return prev;
       const next = new Set(prev);
@@ -605,11 +615,14 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   }, []);
 
   const deactivateSearchSubmenu = useCallback((key: string) => {
-    setActiveSearchKey((prev) => (prev === key ? null : prev));
+    if (activeSearchKeyRef.current === key) {
+      activeSearchKeyRef.current = null;
+    }
   }, []);
 
   const closeActiveSearchForPath = useCallback(
     (keyPath: string) => {
+      const activeSearchKey = activeSearchKeyRef.current;
       if (
         !activeSearchKey ||
         keyPath === activeSearchKey ||
@@ -621,25 +634,26 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
       skipPreserveActiveSearchRef.current = true;
       clearSearchValue(activeSearchKey);
-      setActiveSearchKey(null);
+      activeSearchKeyRef.current = null;
       setOpenKeys((prev) => {
         const next = new Set(prev);
         next.delete(activeSearchKey);
         return next;
       });
     },
-    [activeSearchKey, clearSearchValue],
+    [clearSearchValue],
   );
 
   const handleMenuOpenChange = useCallback(
     (nextOpenKeys: string[]) => {
       let normalized = normalizeOpenKeys(nextOpenKeys);
-      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
-        if (normalized.length || skipPreserveActiveSearchRef.current) {
+      const activeSearchKey = activeSearchKeyRef.current;
+      if (activeSearchKey && !normalized.includes(activeSearchKey)) {
+        if (skipPreserveActiveSearchRef.current) {
           clearSearchValue(activeSearchKey);
-          setActiveSearchKey(null);
+          activeSearchKeyRef.current = null;
         } else {
-          normalized = [activeSearchKey];
+          normalized = Array.from(openKeys);
         }
       }
 
@@ -658,7 +672,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       dropdownMenuProps.onOpenChange?.(normalized);
       skipPreserveActiveSearchRef.current = false;
     },
-    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
+    [clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
   );
 
   useEffect(() => {
@@ -666,7 +680,9 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
     const markOutsideClick = (event: MouseEvent | PointerEvent) => {
       const target = event.target as HTMLElement | null;
-      const isOutside = !target?.closest('.ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup');
+      const isInsidePopup = target?.closest('.ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup');
+      const isInsideCurrentTrigger = target?.closest(`.${triggerOpenClassName}`);
+      const isOutside = !isInsidePopup && !isInsideCurrentTrigger;
       closeByOutsideClickRef.current = isOutside;
       if (isOutside) {
         closeMenu();
@@ -679,7 +695,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       document.removeEventListener('pointerdown', markOutsideClick, true);
       document.removeEventListener('mousedown', markOutsideClick, true);
     };
-  }, [closeMenu, menuVisible]);
+  }, [closeMenu, menuVisible, triggerOpenClassName]);
 
   // 在挂载时，若存在 persistKey 且仍在持久期内，则尝试恢复打开状态
   useEffect(() => {
@@ -957,13 +973,15 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       {...props}
       open={menuVisible}
       destroyPopupOnHide
+      mouseLeaveDelay={props.mouseLeaveDelay ?? MENU_CLOSE_DELAY}
+      openClassName={mergedOpenClassName}
       overlayClassName={overlayClassName}
       placement="bottomLeft"
       menu={{
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items: items,
-        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? MENU_CLOSE_DELAY,
         motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: () => {},
         onOpenChange: handleMenuOpenChange,
@@ -974,7 +992,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         },
       }}
       onOpenChange={(visible, info) => {
-        if (!visible && activeSearchKey && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
+        if (!visible && activeSearchKeyRef.current && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
           return;
         }
 

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -411,7 +411,7 @@ describe('transformItems - searchable flags', () => {
     await waitFor(() => expect(screen.getAllByText('No data').length).toBeGreaterThan(0));
   });
 
-  it('closes searchable submenu after focus without input', async () => {
+  it('keeps searchable submenu open while interacting with its input', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
@@ -451,7 +451,11 @@ describe('transformItems - searchable flags', () => {
     await user.click(screen.getByRole('textbox'));
     fireEvent.mouseLeave(screen.getByText('Fields'));
 
-    await waitFor(() => expect(screen.queryByText('Field 1')).not.toBeInTheDocument());
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(screen.getByText('Field 1')).toBeInTheDocument();
   });
 
   it('closes active searchable submenu after outside click', async () => {
@@ -499,6 +503,85 @@ describe('transformItems - searchable flags', () => {
     await waitFor(() => expect(screen.queryByText('Fields')).not.toBeInTheDocument());
   });
 
+  it('keeps the dropdown open when clicking its already-hovered trigger', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="items"
+              items={[
+                {
+                  key: 'child',
+                  label: 'Child',
+                  createModelOptions: { use: 'Parent' },
+                },
+              ]}
+            >
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const trigger = screen.getByText('Open');
+    await user.hover(trigger);
+    await waitFor(() => expect(screen.getByText('Child')).toBeInTheDocument());
+    expect(trigger).toHaveClass('ant-dropdown-open');
+
+    await user.click(trigger);
+
+    expect(screen.getByText('Child')).toBeInTheDocument();
+  });
+
+  it('closes the dropdown when clicking another dropdown trigger', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="firstItems"
+              items={[{ key: 'first-child', label: 'First child', createModelOptions: { use: 'Parent' } }]}
+            >
+              Open first
+            </AddSubModelButton>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="secondItems"
+              items={[{ key: 'second-child', label: 'Second child', createModelOptions: { use: 'Parent' } }]}
+            >
+              Open second
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await user.hover(screen.getByText('Open first'));
+    await waitFor(() => expect(screen.getByText('First child')).toBeInTheDocument());
+
+    fireEvent.pointerDown(screen.getByText('Open second'));
+
+    await waitFor(() => expect(screen.queryByText('First child')).not.toBeInTheDocument());
+  });
+
   it('switches away from active searchable submenu and resets its input', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();

package/src/locale/__tests__/index.test.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+
+import { getFlowEngineTranslation } from '../index';
+
+describe('flow engine locale', () => {
+  it('translates the default secondary confirmation text into Chinese', () => {
+    expect(getFlowEngineTranslation('Please Confirm', 'zh-CN')).toBe('请确认');
+    expect(getFlowEngineTranslation('Are you sure you want to perform the action?', 'zh-CN')).toBe(
+      '确定要执行此操作吗？',
+    );
+  });
+});

package/src/locale/en-US.json

@@ -1,5 +1,6 @@
 {
   "Add": "Add",
+  "Are you sure you want to perform the action?": "Are you sure you want to perform the action?",
   "Are you sure you want to delete this item? This action cannot be undone.": "Are you sure you want to delete this item? This action cannot be undone.",
   "Are you sure to convert this template block to copy mode?": "Are you sure you want to convert this template block to copy mode?",
   "Array index out of bounds": "Array index {{index}} out of bounds for '{{subKey}}'",
@@ -53,6 +54,7 @@
   "Other blocks": "Other blocks",
   "Parent not found, cannot replace block": "Parent not found, cannot replace block",
   "Previous step": "Previous step",
+  "Please Confirm": "Please Confirm",
   "Replace current block with template?": "Replace current block with template?",
   "Replaced with template block": "Replaced with template block",
   "Render failed": "Render failed",

package/src/locale/zh-CN.json

@@ -1,5 +1,6 @@
 {
   "Add": "添加",
+  "Are you sure you want to perform the action?": "确定要执行此操作吗？",
   "Are you sure you want to delete this item? This action cannot be undone.": "确定要删除此项吗？此操作不可撤销。",
   "Are you sure to convert this template block to copy mode?": "确定将该模板区块转换为复制模式吗？",
   "Array index out of bounds": "数组索引 {{index}} 超出 '{{subKey}}' 的边界",
@@ -59,6 +60,7 @@
   "OK": "确定",
   "Other blocks": "其他区块",
   "Previous step": "上一步",
+  "Please Confirm": "请确认",
   "Render failed": "渲染失败",
   "Response record": "响应结果记录",
   "Step configuration": "步骤配置",