@nocobase/flow-engine 2.1.0-alpha.34 → 2.1.0-alpha.36

package/src/components/subModel/LazyDropdown.tsx

@@ -358,6 +358,16 @@ const SearchInputWithAutoFocus: FC<InputProps & { visible: boolean }> = (props)
 
 const getKeyPath = (path: string[], key: string) => [...path, key].join('/');
 
+const normalizeOpenKeys = (nextOpenKeys: string[]) => {
+  const latestKey = nextOpenKeys[nextOpenKeys.length - 1];
+
+  if (!latestKey) {
+    return [];
+  }
+
+  return nextOpenKeys.filter((key) => latestKey === key || latestKey.startsWith(`${key}/`));
+};
+
 const createSearchItem = (
   item: Item,
   searchKey: string,
@@ -406,6 +416,11 @@ const createEmptyItem = (itemKey: string, t: (key: string) => string) => ({
   disabled: true,
 });
 
+const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
+  display: 'block',
+  width: '100%',
+};
+
 // ==================== Main Component ====================
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
@@ -435,6 +450,19 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   const { searchValues, isSearching, updateSearchValue } = useMenuSearch();
   const { requestKeepOpen, shouldPreventClose } = useKeepDropdownOpen();
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
+  const handleMenuOpenChange = useCallback(
+    (nextOpenKeys: string[]) => {
+      if (!nextOpenKeys.length && shouldPreventClose()) {
+        dropdownMenuProps.onOpenChange?.(Array.from(openKeys));
+        return;
+      }
+
+      const normalized = normalizeOpenKeys(nextOpenKeys);
+      setOpenKeys(new Set(normalized));
+      dropdownMenuProps.onOpenChange?.(normalized);
+    },
+    [dropdownMenuProps, openKeys, shouldPreventClose],
+  );
 
   // 在挂载时，若存在 persistKey 且仍在持久期内，则尝试恢复打开状态
   useEffect(() => {
@@ -460,6 +488,12 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
     };
   }, [persistKey, menuVisible]);
 
+  useEffect(() => {
+    if (!menuVisible) {
+      setOpenKeys(new Set());
+    }
+  }, [menuVisible]);
+
   // 加载根 items，支持同步/异步函数
   useEffect(() => {
     const loadRootItems = async () => {
@@ -588,56 +622,73 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         return { type: 'divider', key: keyPath };
       }
 
+      const label = typeof item.label === 'string' ? t(item.label) : item.label;
+
       // 非 group 的“子菜单”也支持本层级搜索：当 item.searchable = true 且存在 children 时
       if (item.searchable && children) {
         return {
-          key: item.key,
-          label: typeof item.label === 'string' ? t(item.label) : item.label,
+          key: keyPath,
+          label,
           onClick: (info: any) => {},
-          onMouseEnter: () => {
-            setOpenKeys((prev) => {
-              if (prev.has(keyPath)) return prev;
-              const next = new Set(prev);
-              next.add(keyPath);
-              return next;
-            });
-          },
           children: buildSearchChildren(children, item, keyPath, path, menuVisible, resolveItems),
         };
       }
 
+      const itemShouldKeepOpen = !children && (item.keepDropdownOpen ?? keepDropdownOpen ?? false);
+      const handleLeafClick = (info: any) => {
+        if (children) {
+          return;
+        }
+
+        if (itemShouldKeepOpen) {
+          requestKeepOpen();
+        }
+
+        const extendedInfo: ExtendedMenuInfo = {
+          ...info,
+          key: info?.key ?? keyPath,
+          keyPath: info?.keyPath ?? [keyPath],
+          item: info?.item || item,
+          originalItem: item,
+          keepDropdownOpen: itemShouldKeepOpen,
+        };
+
+        menu.onClick?.(extendedInfo);
+      };
+
       return {
         key: keyPath,
-        label: typeof item.label === 'string' ? t(item.label) : item.label,
+        label: itemShouldKeepOpen ? (
+          <div
+            style={KEEP_OPEN_LABEL_STYLE}
+            onMouseDown={(event) => {
+              event.stopPropagation();
+              requestKeepOpen();
+            }}
+            onClick={(event) => {
+              event.stopPropagation();
+              handleLeafClick({
+                key: keyPath,
+                keyPath: [keyPath],
+                item,
+                domEvent: event,
+              });
+            }}
+          >
+            {label}
+          </div>
+        ) : (
+          label
+        ),
         onClick: (info: any) => {
-          if (children) {
+          if (!itemShouldKeepOpen) handleLeafClick(info);
+        },
+        onMouseDown: () => {
+          if (!itemShouldKeepOpen) {
             return;
           }
 
-          // 检查是否应该保持下拉菜单打开
-          const itemShouldKeepOpen = item.keepDropdownOpen ?? keepDropdownOpen ?? false;
-
-          // 如果需要保持菜单打开，请求保持打开状态
-          if (itemShouldKeepOpen) {
-            requestKeepOpen();
-          }
-
-          const extendedInfo: ExtendedMenuInfo = {
-            ...info,
-            item: info.item || item,
-            originalItem: item,
-            keepDropdownOpen: itemShouldKeepOpen,
-          };
-
-          menu.onClick?.(extendedInfo);
-        },
-        onMouseEnter: () => {
-          setOpenKeys((prev) => {
-            if (prev.has(keyPath)) return prev;
-            const next = new Set(prev);
-            next.add(keyPath);
-            return next;
-          });
+          requestKeepOpen();
         },
         children:
           children && children.length > 0
@@ -684,8 +735,10 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       placement="bottomLeft"
       menu={{
         ...dropdownMenuProps,
+        openKeys: Array.from(openKeys),
         items: items,
         onClick: () => {},
+        onOpenChange: handleMenuOpenChange,
         style: {
           maxHeight: dropdownMaxHeight,
           overflowY: 'auto',

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

@@ -21,6 +21,8 @@ import {
 import { SubModelItem, mergeSubModelItems, transformItems } from '../AddSubModelButton';
 import { App, ConfigProvider } from 'antd';
 
+const getSubmenuTitle = (label: string) => screen.getByText(label).closest('.ant-dropdown-menu-submenu-title');
+
 describe('AddSubModelButton - preset settings open on add', () => {
   test('calls openFlowSettings with preset=true for subModel with preset steps', async () => {
     // Arrange: set up engine and models
@@ -215,6 +217,68 @@ describe('AddSubModelButton - async group children (nested)', () => {
     await waitFor(() => expect(screen.getByText('Nested-Leaf-1')).toBeInTheDocument());
     await waitFor(() => expect(screen.getByText('Nested-Leaf-2')).toBeInTheDocument());
   });
+
+  it('keeps root dropdown open while only the current nested group stays expanded', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent', uid: 'p-multi-open' });
+
+    const items = [
+      {
+        key: 'group-a',
+        label: 'Group A',
+        children: [
+          { key: 'a-1', label: 'A-1', createModelOptions: { use: 'Parent' } },
+          { key: 'a-2', label: 'A-2', createModelOptions: { use: 'Parent' } },
+        ],
+      },
+      {
+        key: 'group-b',
+        label: 'Group B',
+        children: [
+          { key: 'b-1', label: 'B-1', createModelOptions: { use: 'Parent' } },
+          { key: 'b-2', label: 'B-2', createModelOptions: { use: 'Parent' } },
+        ],
+      },
+    ];
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton model={parent} subModelKey="items" items={items as any}>
+              Open Menu
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await act(async () => {
+      await userEvent.click(screen.getByText('Open Menu'));
+    });
+
+    await waitFor(() => expect(screen.getByText('Group A')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Group B')).toBeInTheDocument());
+
+    await act(async () => {
+      await userEvent.hover(screen.getByText('Group A'));
+    });
+    await waitFor(() => expect(screen.getByText('A-1')).toBeInTheDocument());
+    await waitFor(() => expect(getSubmenuTitle('Group A')).toHaveAttribute('aria-expanded', 'true'));
+    expect(getSubmenuTitle('Group B')).toHaveAttribute('aria-expanded', 'false');
+
+    await act(async () => {
+      await userEvent.hover(screen.getByText('Group B'));
+    });
+    await waitFor(() => expect(screen.getByText('B-1')).toBeInTheDocument());
+    await waitFor(() => expect(getSubmenuTitle('Group B')).toHaveAttribute('aria-expanded', 'true'));
+    expect(getSubmenuTitle('Group A')).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText('Group A')).toBeInTheDocument();
+    expect(screen.getByText('Group B')).toBeInTheDocument();
+  });
 });
 
 describe('transformItems - searchable flags', () => {
@@ -1202,6 +1266,7 @@ describe('AddSubModelButton toggleable behavior', () => {
       },
       { timeout: 3000 },
     );
+    await waitFor(() => expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true'));
 
     // dropdown should remain open and children should still be visible (no flicker / reload)
     expect(screen.getByText('Async Group')).toBeInTheDocument();
@@ -1218,6 +1283,7 @@ describe('AddSubModelButton toggleable behavior', () => {
 
     // ensure destroy has been called (avoid flakiness on exact call counts)
     await waitFor(() => {
+      expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false');
       expect(repo.destroy).toHaveBeenCalled();
     });
   });
@@ -1371,15 +1437,78 @@ describe('AddSubModelButton toggleable behavior', () => {
     // click leaf toggle to add
     await user.click(screen.getByText('Leaf Toggle'));
 
-    // menu should remain visible; submenu parent still visible
+    // menu and submenu should remain visible after toggling a submenu leaf
     expect(screen.getByText('Fields')).toBeInTheDocument();
-
-    // 由于点击叶子项后二级子菜单可能被收起，这里先重新展开再断言开关状态
-    await user.hover(screen.getByText('Fields'));
     await waitFor(() => expect(screen.getByText('Leaf Toggle')).toBeInTheDocument());
     await waitFor(() => expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true'));
   });
 
+  test('keepDropdownOpen keeps root menu visible after clicking a nested relation-style leaf', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+
+    class Parent extends FlowModel {}
+    class RelationLeafModel extends FlowModel {}
+
+    engine.registerModels({ Parent, RelationLeafModel });
+    engine.setModelRepository(new FakeRepo());
+    vi.spyOn(engine.flowSettings, 'open').mockResolvedValue(false as any);
+
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+
+    const items = [
+      {
+        key: 'relation-fields',
+        label: 'Display association fields',
+        children: [
+          {
+            key: 'users',
+            label: 'Users',
+            type: 'group' as const,
+            children: [
+              {
+                key: 'user-name',
+                label: 'User name',
+                createModelOptions: { use: 'RelationLeafModel' },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              items={items as any}
+              subModelType="array"
+              subModelKey="subs"
+              keepDropdownOpen
+            >
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText('Open'));
+
+    await waitFor(() => expect(screen.getByText('Display association fields')).toBeInTheDocument());
+    await user.hover(screen.getByText('Display association fields'));
+    await waitFor(() => expect(screen.getByText('Users')).toBeInTheDocument());
+    await waitFor(() => expect(getSubmenuTitle('Display association fields')).toHaveAttribute('aria-expanded', 'true'));
+
+    await user.click(screen.getByText('User name'));
+
+    await waitFor(() => expect(screen.getByText('Display association fields')).toBeInTheDocument());
+    await waitFor(() => expect(getSubmenuTitle('Display association fields')).toHaveAttribute('aria-expanded', 'true'));
+  });
+
   test('top-level toggle updates after opening a second-level branch', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();

package/src/flow-registry/DetachedFlowRegistry.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 _ from 'lodash';
+import { FlowDefinition } from '../FlowDefinition';
+import { FlowDefinitionOptions } from '../types';
+import { BaseFlowRegistry, IFlowRepository } from './BaseFlowRegistry';
+
+export type FlowRegistryData = Record<string, Omit<FlowDefinitionOptions, 'key'> & { key?: string }>;
+
+export class DetachedFlowRegistry extends BaseFlowRegistry {
+  constructor(flows: FlowRegistryData = {}) {
+    super();
+    this.addFlows(_.cloneDeep(flows));
+  }
+
+  saveFlow(_flow: FlowDefinition): void {}
+
+  destroyFlow(flowKey: string): void {
+    this.removeFlow(flowKey);
+  }
+}
+
+export function serializeFlowRegistry(registry: Pick<IFlowRepository, 'getFlows'>): FlowRegistryData {
+  const flows: FlowRegistryData = {};
+  for (const [key, flow] of registry.getFlows()) {
+    flows[key] = _.cloneDeep(flow.toData());
+  }
+  return flows;
+}
+
+export function replaceFlowRegistry(
+  registry: Pick<IFlowRepository, 'getFlows' | 'removeFlow' | 'addFlows'>,
+  flows: FlowRegistryData,
+) {
+  for (const key of Array.from(registry.getFlows().keys())) {
+    registry.removeFlow(key);
+  }
+  registry.addFlows(_.cloneDeep(flows));
+}

package/src/flow-registry/__tests__/detachedFlowRegistry.test.ts

@@ -0,0 +1,47 @@
+/**
+ * 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, test } from 'vitest';
+import { DetachedFlowRegistry, replaceFlowRegistry, serializeFlowRegistry } from '../DetachedFlowRegistry';
+
+describe('DetachedFlowRegistry', () => {
+  test('keeps flow edits detached and can replace another registry', () => {
+    const source = {
+      flow1: {
+        title: 'Flow 1',
+        steps: {
+          step1: { title: 'Step 1' } as any,
+        },
+      },
+    };
+    const registry = new DetachedFlowRegistry(source);
+
+    source.flow1.title = 'Changed outside';
+    expect(registry.getFlow('flow1')?.title).toBe('Flow 1');
+
+    const flow = registry.getFlow('flow1');
+    expect(flow).toBeDefined();
+    if (!flow) {
+      throw new Error('flow1 should exist');
+    }
+    flow.title = 'Draft title';
+    const serialized = serializeFlowRegistry(registry);
+    serialized.flow1.title = 'Changed serialized';
+    expect(registry.getFlow('flow1')?.title).toBe('Draft title');
+
+    const target = new DetachedFlowRegistry({ stale: { title: 'Stale', steps: {} } });
+    replaceFlowRegistry(target, serializeFlowRegistry(registry));
+
+    expect(target.hasFlow('stale')).toBe(false);
+    expect(target.getFlow('flow1')?.title).toBe('Draft title');
+
+    target.destroyFlow('flow1');
+    expect(target.hasFlow('flow1')).toBe(false);
+  });
+});

package/src/flow-registry/index.ts

@@ -10,3 +10,4 @@
 export * from './BaseFlowRegistry';
 export * from './InstanceFlowRegistry';
 export * from './GlobalFlowRegistry';
+export * from './DetachedFlowRegistry';

package/src/index.ts

@@ -57,5 +57,7 @@ export {
 } from './views/viewEvents';
 
 export * from './FlowDefinition';
+export { DetachedFlowRegistry, replaceFlowRegistry, serializeFlowRegistry } from './flow-registry';
+export type { FlowRegistryData } from './flow-registry';
 export { createViewScopedEngine } from './ViewScopedFlowEngine';
 export { createBlockScopedEngine } from './BlockScopedFlowEngine';

package/src/views/FlowView.tsx

@@ -84,11 +84,21 @@ export class FlowViewer {
     if (this.types[type]) {
       zIndex += 1;
       const onClose = others.onClose;
+      let zIndexReleased = false;
+      const releaseZIndex = () => {
+        if (!zIndexReleased) {
+          zIndexReleased = true;
+          zIndex -= 1;
+        }
+      };
       const _zIndex = others.zIndex;
       others.onClose = (...args) => {
         onClose?.(...args);
-        zIndex -= 1;
+        releaseZIndex();
       };
+      if (type === 'embed') {
+        others.onOpenCancelled = releaseZIndex;
+      }
       // embed 不能设置过高的 zIndex，会遮挡菜单的折叠按钮图表
       if (type !== 'embed') {
         others.zIndex = _zIndex ?? this.getNextZIndex();

package/src/views/PageComponent.tsx

@@ -24,6 +24,7 @@ export const PageComponent = forwardRef((props: any, ref) => {
     title: _title,
     styles = {},
     zIndex = 4, // 这个默认值是为了防止表格的阴影显示到子页面上面
+    onClose,
   } = mergedProps;
   const closedRef = useRef(false);
   const flowEngine = useFlowEngine();
@@ -86,10 +87,12 @@ export const PageComponent = forwardRef((props: any, ref) => {
             type="text"
             size="small"
             icon={<CloseOutlined />}
-            onClick={() => {
+            onClick={async () => {
               if (!closedRef.current) {
-                closedRef.current = true;
-                props.onClose?.();
+                const closed = await onClose?.();
+                if (closed !== false) {
+                  closedRef.current = true;
+                }
               }
             }}
             style={{
@@ -111,7 +114,7 @@ export const PageComponent = forwardRef((props: any, ref) => {
         {extra && <div>{extra}</div>}
       </div>
     );
-  }, [header, _title, flowEngine.context.themeToken, styles.header, props.onClose]);
+  }, [header, _title, flowEngine.context.themeToken, styles.header, onClose]);
 
   // Footer 组件
   const FooterComponent = useMemo(() => {