@nocobase/flow-engine 2.1.0-alpha.40 → 2.1.0-alpha.46

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

@@ -7,10 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, cleanup, waitFor, act } from '@testing-library/react';
+import { act, cleanup, render, waitFor } from '@testing-library/react';
 import { App, ConfigProvider } from 'antd';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { FlowEngine } from '../../../../../flowEngine';
 import { FlowModel } from '../../../../../models/flowModel';
@@ -141,6 +141,86 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
     vi.clearAllMocks();
   });
 
+  it('defers nested configurable step resolution and clears stale config while closed', async () => {
+    class TestFlowModel extends FlowModel {}
+
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'model-lazy-settings', flowEngine: engine });
+    const hideInSettings = vi.fn((ctx) => !!ctx.getStepParams('general')?.hidden);
+    const uiSchema = vi.fn(() => ({
+      field: { type: 'string', 'x-component': 'Input' },
+    }));
+
+    TestFlowModel.registerFlow({
+      key: 'lazyFlow',
+      title: 'Lazy Flow',
+      steps: {
+        general: {
+          title: 'General',
+          hideInSettings,
+          uiSchema,
+        },
+      },
+    });
+
+    const { getByLabelText } = render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(
+          App as any,
+          null,
+          React.createElement(DefaultSettingsIcon as any, { model, menuLevels: 2 }),
+        ),
+      ),
+    );
+
+    expect(getByLabelText('flows-settings')).toBeTruthy();
+    expect(hideInSettings).not.toHaveBeenCalled();
+    expect(uiSchema).not.toHaveBeenCalled();
+
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+    });
+
+    await waitFor(() => {
+      expect(hideInSettings).toHaveBeenCalledTimes(1);
+      expect(uiSchema).toHaveBeenCalledTimes(1);
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      expect(items.some((it) => String(it.key || '') === 'lazyFlow:general')).toBe(true);
+    });
+
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(false, { source: 'trigger' });
+    });
+
+    await waitFor(() => {
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      expect(items.some((it) => String(it.key || '') === 'lazyFlow:general')).toBe(false);
+    });
+
+    await act(async () => {
+      model.setStepParams('lazyFlow', 'general', { hidden: true });
+    });
+
+    expect(hideInSettings).toHaveBeenCalledTimes(1);
+    expect(uiSchema).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+    });
+
+    await waitFor(() => {
+      expect(hideInSettings).toHaveBeenCalledTimes(2);
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      expect(items.some((it) => String(it.key || '') === 'lazyFlow:general')).toBe(false);
+    });
+    expect(uiSchema).toHaveBeenCalledTimes(1);
+  });
+
   it('excludes instance (dynamic) flows from the settings menu', async () => {
     class TestFlowModel extends FlowModel {}
 
@@ -720,6 +800,10 @@ describe('DefaultSettingsIcon - only static flows are shown', () => {
       ),
     );
 
+    await act(async () => {
+      (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+    });
+
     await waitFor(() => {
       const menu = (globalThis as any).__lastDropdownMenu;
       expect(menu).toBeTruthy();
@@ -800,14 +884,16 @@ describe('DefaultSettingsIcon - extra menu items', () => {
       await waitFor(() => {
         const menu = (globalThis as any).__lastDropdownMenu;
         const items = (menu?.items || []) as any[];
-        expect(items.some((it) => String(it.key || '') === 'extra-action')).toBe(true);
+        const extraActionItem = items.find((it) => String(it.key || '') === 'extra-action');
+        expect(extraActionItem).toBeTruthy();
+        expect(extraActionItem.onClick).toBeUndefined();
       });
 
       const menu = (globalThis as any).__lastDropdownMenu;
       await act(async () => {
         menu.onClick?.({ key: 'extra-action' });
       });
-      expect(onClick).toHaveBeenCalled();
+      expect(onClick).toHaveBeenCalledTimes(1);
       expect((globalThis as any).__lastDropdownOpen).toBe(false);
     } finally {
       dispose?.();
@@ -880,6 +966,7 @@ describe('DefaultSettingsIcon - extra menu items', () => {
           'insert-after',
           'insert-inner',
         ]);
+        expect((nested.children || []).find((it) => String(it.key || '') === 'insert-before')?.onClick).toBeUndefined();
         expect((nested.children || []).find((it) => String(it.key || '') === 'insert-inner')?.disabled).toBe(true);
       });
 
@@ -900,4 +987,67 @@ describe('DefaultSettingsIcon - extra menu items', () => {
       dispose?.();
     }
   });
+
+  it('uses common extra actions to defer nested configurable step resolution', async () => {
+    const onClick = vi.fn();
+
+    class TestFlowModel extends FlowModel {}
+    const dispose = TestFlowModel.registerExtraMenuItems({
+      group: 'common-actions',
+      sort: 10,
+      items: [{ key: 'extra-action', label: 'Extra Action', onClick }],
+    });
+
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-extra-lazy', flowEngine: engine });
+    const uiSchema = vi.fn(() => ({
+      f: { type: 'string', 'x-component': 'Input' },
+    }));
+
+    TestFlowModel.registerFlow({
+      key: 'flow',
+      title: 'Flow',
+      steps: { s: { title: 'S', uiSchema } },
+    });
+
+    try {
+      const { getByLabelText } = render(
+        React.createElement(
+          ConfigProvider as any,
+          null,
+          React.createElement(
+            App as any,
+            null,
+            React.createElement(DefaultSettingsIcon as any, {
+              model,
+              menuLevels: 2,
+              showCopyUidButton: false,
+              showDeleteButton: false,
+            }),
+          ),
+        ),
+      );
+
+      await waitFor(() => {
+        expect(getByLabelText('flows-settings')).toBeTruthy();
+        const menu = (globalThis as any).__lastDropdownMenu;
+        const items = (menu?.items || []) as any[];
+        expect(items.some((it) => String(it.key || '') === 'extra-action')).toBe(true);
+      });
+      expect(uiSchema).not.toHaveBeenCalled();
+
+      await act(async () => {
+        (globalThis as any).__lastDropdownOnOpenChange?.(true, { source: 'trigger' });
+      });
+
+      await waitFor(() => {
+        expect(uiSchema).toHaveBeenCalledTimes(1);
+        const menu = (globalThis as any).__lastDropdownMenu;
+        const items = (menu?.items || []) as any[];
+        expect(items.some((it) => String(it.key || '') === 'flow:s')).toBe(true);
+      });
+    } finally {
+      dispose?.();
+    }
+  });
 });

package/src/components/subModel/LazyDropdown.tsx

@@ -247,18 +247,75 @@ const useKeepDropdownOpen = () => {
  */
 const useMenuSearch = () => {
   const [searchValues, setSearchValues] = useState<Record<string, string>>({});
+  const [inputValues, setInputValues] = useState<Record<string, string>>({});
   const [isSearching, setIsSearching] = useState(false);
+  const [composingCount, setComposingCount] = useState(0);
+  const composingKeysRef = useRef<Set<string>>(new Set());
   const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const updateSearchValue = (key: string, value: string) => {
+  const updateSearchValue = useCallback((key: string, value: string) => {
     setIsSearching(true);
+    setInputValues((prev) => ({ ...prev, [key]: value }));
     setSearchValues((prev) => ({ ...prev, [key]: value }));
 
     if (searchTimeoutRef.current) {
       clearTimeout(searchTimeoutRef.current);
     }
     searchTimeoutRef.current = setTimeout(() => setIsSearching(false), 300);
-  };
+  }, []);
+
+  const startComposition = useCallback((key: string) => {
+    composingKeysRef.current.add(key);
+    setIsSearching(true);
+    setComposingCount(composingKeysRef.current.size);
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+      searchTimeoutRef.current = null;
+    }
+  }, []);
+
+  const endComposition = useCallback(
+    (key: string, value: string) => {
+      composingKeysRef.current.delete(key);
+      setComposingCount(composingKeysRef.current.size);
+      updateSearchValue(key, value);
+    },
+    [updateSearchValue],
+  );
+
+  const updateInputValue = useCallback((key: string, value: string) => {
+    setInputValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  const clearSearchValue = useCallback((key: string) => {
+    composingKeysRef.current.delete(key);
+    setComposingCount(composingKeysRef.current.size);
+
+    setInputValues((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+    setSearchValues((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+
+  const clearAllSearchValues = useCallback(() => {
+    composingKeysRef.current.clear();
+    setComposingCount(0);
+    setInputValues({});
+    setSearchValues({});
+    setIsSearching(false);
+  }, []);
+
+  const isComposing = useCallback((key?: string) => {
+    return key ? composingKeysRef.current.has(key) : composingKeysRef.current.size > 0;
+  }, []);
 
   useEffect(() => {
     return () => {
@@ -270,8 +327,15 @@ const useMenuSearch = () => {
 
   return {
     searchValues,
-    isSearching,
+    inputValues,
+    isSearching: isSearching || composingCount > 0,
     updateSearchValue,
+    updateInputValue,
+    startComposition,
+    endComposition,
+    clearSearchValue,
+    clearAllSearchValues,
+    isComposing,
   };
 };
 
@@ -390,23 +454,70 @@ const createSearchItem = (
   currentSearchValue: string,
   menuVisible: boolean,
   t: (key: string) => string,
-  updateSearchValue: (key: string, value: string) => void,
+  searchHandlers: {
+    updateSearchValue: (key: string, value: string) => void;
+    updateInputValue: (key: string, value: string) => void;
+    startComposition: (key: string) => void;
+    endComposition: (key: string, value: string) => void;
+    isComposing: (key: string) => boolean;
+  },
+  activateSearchSubmenu: (key: string) => void,
+  deactivateSearchSubmenu: (key: string) => void,
+  shouldActivateSearchSubmenu: boolean,
 ) => ({
   key: `${searchKey}-search`,
   type: 'group' as const,
   label: (
-    <div>
+    <div onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
       <SearchInputWithAutoFocus
         visible={menuVisible}
         variant="borderless"
         allowClear
         placeholder={t(item.searchPlaceholder || 'Search')}
         value={currentSearchValue}
+        onFocus={(e) => {
+          e.stopPropagation();
+        }}
         onChange={(e) => {
           e.stopPropagation();
-          updateSearchValue(searchKey, e.target.value);
+          const value = e.target.value;
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
+          if ((e.nativeEvent as any)?.isComposing || searchHandlers.isComposing(searchKey)) {
+            searchHandlers.updateInputValue(searchKey, value);
+            return;
+          }
+          if (!value && shouldActivateSearchSubmenu) {
+            deactivateSearchSubmenu(searchKey);
+          }
+          searchHandlers.updateSearchValue(searchKey, value);
+        }}
+        onCompositionStart={(e) => {
+          e.stopPropagation();
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
+          searchHandlers.startComposition(searchKey);
+        }}
+        onCompositionEnd={(e) => {
+          e.stopPropagation();
+          const value = e.currentTarget.value;
+          if (shouldActivateSearchSubmenu) {
+            if (value) {
+              activateSearchSubmenu(searchKey);
+            } else {
+              deactivateSearchSubmenu(searchKey);
+            }
+          }
+          searchHandlers.endComposition(searchKey, value);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onKeyDown={(e) => {
+          e.stopPropagation();
         }}
-        onClick={(e) => e.stopPropagation()}
         onMouseDown={(e) => {
           // 防止菜单聚焦丢失或页面滚动
           e.stopPropagation();
@@ -441,14 +552,22 @@ const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
 const DROPDOWN_PERSIST_TTL_MS = 350;
+const SUBMENU_CLOSE_DELAY = 0.05;
+const SUBMENU_MOTION_DISABLED = {
+  motionEnter: false,
+  motionLeave: false,
+};
 const dropdownPersistRegistry: Map<string, number> = new Map();
 
 const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownMenuProps }> = ({ menu, ...props }) => {
   const engine = useFlowEngine();
   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 closeByOutsideClickRef = useRef(false);
+  const skipPreserveActiveSearchRef = useRef(false);
   const dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
 
@@ -463,23 +582,105 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
     openKeys,
     refreshKeys,
   );
-  const { searchValues, isSearching, updateSearchValue } = useMenuSearch();
+  const searchHandlers = useMenuSearch();
+  const { searchValues, inputValues, clearSearchValue, clearAllSearchValues } = searchHandlers;
   const { requestKeepOpen, shouldPreventClose } = useKeepDropdownOpen();
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
+
+  const closeMenu = useCallback(() => {
+    setMenuVisible(false);
+    setActiveSearchKey(null);
+    setOpenKeys(new Set());
+    clearAllSearchValues();
+  }, [clearAllSearchValues]);
+
+  const activateSearchSubmenu = useCallback((key: string) => {
+    setActiveSearchKey(key);
+    setOpenKeys((prev) => {
+      if (prev.has(key)) return prev;
+      const next = new Set(prev);
+      next.add(key);
+      return next;
+    });
+  }, []);
+
+  const deactivateSearchSubmenu = useCallback((key: string) => {
+    setActiveSearchKey((prev) => (prev === key ? null : prev));
+  }, []);
+
+  const closeActiveSearchForPath = useCallback(
+    (keyPath: string) => {
+      if (
+        !activeSearchKey ||
+        keyPath === activeSearchKey ||
+        keyPath.startsWith(`${activeSearchKey}/`) ||
+        activeSearchKey.startsWith(`${keyPath}/`)
+      ) {
+        return;
+      }
+
+      skipPreserveActiveSearchRef.current = true;
+      clearSearchValue(activeSearchKey);
+      setActiveSearchKey(null);
+      setOpenKeys((prev) => {
+        const next = new Set(prev);
+        next.delete(activeSearchKey);
+        return next;
+      });
+    },
+    [activeSearchKey, clearSearchValue],
+  );
+
   const handleMenuOpenChange = useCallback(
     (nextOpenKeys: string[]) => {
-      if (!nextOpenKeys.length && shouldPreventClose()) {
+      let normalized = normalizeOpenKeys(nextOpenKeys);
+      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
+        if (normalized.length || skipPreserveActiveSearchRef.current) {
+          clearSearchValue(activeSearchKey);
+          setActiveSearchKey(null);
+        } else {
+          normalized = [activeSearchKey];
+        }
+      }
+
+      if (!normalized.length && shouldPreventClose()) {
         dropdownMenuProps.onOpenChange?.(Array.from(openKeys));
+        skipPreserveActiveSearchRef.current = false;
         return;
       }
 
-      const normalized = normalizeOpenKeys(nextOpenKeys);
+      Array.from(openKeys).forEach((key) => {
+        if (!normalized.includes(key)) {
+          clearSearchValue(key);
+        }
+      });
       setOpenKeys(new Set(normalized));
       dropdownMenuProps.onOpenChange?.(normalized);
+      skipPreserveActiveSearchRef.current = false;
     },
-    [dropdownMenuProps, openKeys, shouldPreventClose],
+    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
   );
 
+  useEffect(() => {
+    if (!menuVisible) return;
+
+    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');
+      closeByOutsideClickRef.current = isOutside;
+      if (isOutside) {
+        closeMenu();
+      }
+    };
+
+    document.addEventListener('pointerdown', markOutsideClick, true);
+    document.addEventListener('mousedown', markOutsideClick, true);
+    return () => {
+      document.removeEventListener('pointerdown', markOutsideClick, true);
+      document.removeEventListener('mousedown', markOutsideClick, true);
+    };
+  }, [closeMenu, menuVisible]);
+
   // 在挂载时，若存在 persistKey 且仍在持久期内，则尝试恢复打开状态
   useEffect(() => {
     if (!persistKey) return;
@@ -542,6 +743,8 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   ): any[] {
     const searchKey = keyPath;
     const currentSearchValue = searchValues[searchKey] || '';
+    const currentInputValue = inputValues[searchKey] ?? currentSearchValue;
+    const shouldActivateSearchSubmenu = !(item.type === 'group' && path.length === 0);
 
     // 递归过滤：当 child 为分组时，会继续向下过滤其 children；
     // 仅保留自身匹配或存在匹配子项的分组。
@@ -566,7 +769,17 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       : children;
 
     const resolvedFiltered = resolve(filteredChildren, [...path, item.key]);
-    const searchItem = createSearchItem(item, searchKey, currentSearchValue, menuVisible, t, updateSearchValue);
+    const searchItem = createSearchItem(
+      item,
+      searchKey,
+      currentInputValue,
+      menuVisible,
+      t,
+      searchHandlers,
+      activateSearchSubmenu,
+      deactivateSearchSubmenu,
+      shouldActivateSearchSubmenu,
+    );
     const dividerItem = { key: `${keyPath}-search-divider`, type: 'divider' as const };
 
     if (currentSearchValue && resolvedFiltered.length === 0) {
@@ -641,6 +854,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
           key: keyPath,
           label,
           onClick: (info: any) => {},
+          onMouseEnter: () => closeActiveSearchForPath(keyPath),
           children: buildSearchChildren(children, item, keyPath, path, menuVisible, resolveItems),
         };
       }
@@ -694,6 +908,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         onClick: (info: any) => {
           if (!itemShouldKeepOpen) handleLeafClick(info);
         },
+        onMouseEnter: () => closeActiveSearchForPath(keyPath),
         onMouseDown: () => {
           if (!itemShouldKeepOpen) {
             return;
@@ -748,6 +963,8 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items: items,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: () => {},
         onOpenChange: handleMenuOpenChange,
         style: {
@@ -756,9 +973,8 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
           ...dropdownMenuProps?.style,
         },
       }}
-      onOpenChange={(visible) => {
-        // 阻止在搜索时关闭菜单
-        if (!visible && isSearching) {
+      onOpenChange={(visible, info) => {
+        if (!visible && activeSearchKey && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
           return;
         }
 
@@ -767,7 +983,12 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
           return;
         }
 
-        setMenuVisible(visible);
+        if (!visible) {
+          closeMenu();
+        } else {
+          setMenuVisible(visible);
+        }
+        closeByOutsideClickRef.current = false;
       }}
     >
       {props.children}