@nocobase/flow-engine 2.0.0-alpha.7 → 2.0.0-alpha.71

package/src/views/DialogComponent.tsx

@@ -62,10 +62,7 @@ const DialogComponent = forwardRef<unknown, DialogComponentProps>(
         getContainer={container}
         {...modalProps}
         open={visible}
-        onCancel={(e) => {
-          setVisible(false);
-          config.onCancel?.(e);
-        }}
+        onCancel={config.onCancel}
         afterClose={() => {
           afterClose?.();
         }}

package/src/views/DrawerComponent.tsx

@@ -10,19 +10,19 @@
 // components/drawer/useDrawer/DrawerComponent.tsx
 import { Drawer } from 'antd';
 import * as React from 'react';
+import { MobilePopup } from '../components/MobilePopup';
 
 const DrawerComponent = React.forwardRef((props: any, ref) => {
-  const { children, footer: initialFooter, title, extra, hidden, ...drawerProps } = props;
+  const { children, footer: initialFooter, title, extra, hidden, isMobile, ...drawerProps } = props;
   const [open, setOpen] = React.useState(true);
   const [footer, setFooter] = React.useState(() => initialFooter);
-  const [header, setHeader] = React.useState({ title, extra });
+  const [header, setHeader] = React.useState({ title, extra, ...drawerProps.header });
 
   React.useImperativeHandle(
     ref,
     () => ({
       destroy: () => {
         setOpen(false);
-        drawerProps.afterClose?.();
       },
       update: (newConfig) => {
         // 更新 drawer 配置
@@ -46,6 +46,21 @@ const DrawerComponent = React.forwardRef((props: any, ref) => {
     return document.querySelector('#nocobase-app-container');
   }, []);
 
+  if (isMobile) {
+    return (
+      <MobilePopup
+        className={hidden ? 'nb-hidden' : ''}
+        visible={open}
+        {...drawerProps}
+        footer={footer}
+        {...header}
+        onClose={drawerProps.onClose}
+      >
+        {children}
+      </MobilePopup>
+    );
+  }
+
   return (
     <Drawer
       rootClassName={hidden ? 'nb-hidden' : ''}
@@ -59,10 +74,7 @@ const DrawerComponent = React.forwardRef((props: any, ref) => {
         footer: { display: 'flex', justifyContent: 'flex-end', ...drawerProps.styles?.footer },
       }}
       {...header} // 使用 extra 属性作为自定义 header
-      onClose={() => {
-        setOpen(false);
-        drawerProps.afterClose?.();
-      }}
+      onClose={drawerProps.onClose}
     >
       {children}
     </Drawer>

package/src/views/PageComponent.tsx

@@ -19,12 +19,11 @@ export const PageComponent = forwardRef((props: any, ref) => {
     visible = true,
     footer: _footer = null,
     header: _header = null,
-    afterClose,
     children,
     hidden,
     title: _title,
     styles = {},
-    zIndex,
+    zIndex = 4, // 这个默认值是为了防止表格的阴影显示到子页面上面
   } = mergedProps;
   const closedRef = useRef(false);
   const flowEngine = useFlowEngine();
@@ -36,7 +35,6 @@ export const PageComponent = forwardRef((props: any, ref) => {
     destroy: () => {
       if (!closedRef.current) {
         closedRef.current = true;
-        afterClose?.();
       }
     },
     update: (newConfig: any) => {
@@ -91,7 +89,7 @@ export const PageComponent = forwardRef((props: any, ref) => {
             onClick={() => {
               if (!closedRef.current) {
                 closedRef.current = true;
-                afterClose?.();
+                props.onClose?.();
               }
             }}
             style={{
@@ -113,7 +111,7 @@ export const PageComponent = forwardRef((props: any, ref) => {
         {extra && <div>{extra}</div>}
       </div>
     );
-  }, [header, _title, flowEngine.context.themeToken, styles.header, afterClose]);
+  }, [header, _title, flowEngine.context.themeToken, styles.header, props.onClose]);
 
   // Footer 组件
   const FooterComponent = useMemo(() => {

package/src/views/ViewNavigation.ts

@@ -8,16 +8,22 @@
  */
 
 import { FlowEngineContext } from '../flowContext';
-
-interface ViewParam {
-  /** 视图唯一标识符，一般为某个 Model 实例的 uid */
-  viewUid?: string;
-  /** 标签页唯一标识符 */
-  tabUid?: string;
-  /** 弹窗记录的 id */
-  filterByTk?: string;
-  /** source Id */
-  sourceId?: string;
+import { define, observable } from '../reactive';
+import { ViewParam as SharedViewParam } from '../utils';
+
+type ViewParams = Omit<SharedViewParam, 'viewUid'> & { viewUid?: string };
+
+function encodeFilterByTk(val: SharedViewParam['filterByTk']): string {
+  if (val === undefined || val === null) return '';
+  // 1.x 兼容：对象按 key1=v1&key2=v2 拼接后整体 encodeURIComponent
+  if (val && typeof val === 'object' && !Array.isArray(val)) {
+    const pairs = Object.entries(val).map(([k, v]) => {
+      return `${encodeURIComponent(String(k))}=${encodeURIComponent(String(v))}`;
+    });
+    return encodeURIComponent(pairs.join('&'));
+  }
+  // 其它情况按原单值编码（字符串）
+  return encodeURIComponent(String(val));
 }
 
 /**
@@ -33,7 +39,7 @@ interface ViewParam {
  * generatePathnameFromViewParams([{ viewUid: 'xxx' }, { viewUid: 'yyy' }]) // '/admin/xxx/view/yyy'
  * ```
  */
-export function generatePathnameFromViewParams(viewParams: ViewParam[]): string {
+export function generatePathnameFromViewParams(viewParams: ViewParams[]): string {
   if (!viewParams || viewParams.length === 0) {
     return '/admin';
   }
@@ -53,8 +59,11 @@ export function generatePathnameFromViewParams(viewParams: ViewParam[]): string
     if (viewParam.tabUid) {
       segments.push('tab', viewParam.tabUid);
     }
-    if (viewParam.filterByTk) {
-      segments.push('filterbytk', viewParam.filterByTk);
+    if (viewParam.filterByTk != null) {
+      const encoded = encodeFilterByTk(viewParam.filterByTk);
+      if (encoded) {
+        segments.push('filterbytk', encoded);
+      }
     }
     if (viewParam.sourceId) {
       segments.push('sourceid', viewParam.sourceId);
@@ -65,30 +74,41 @@ export function generatePathnameFromViewParams(viewParams: ViewParam[]): string
 }
 
 export class ViewNavigation {
-  viewStack: ViewParam[];
+  viewStack: ReadonlyArray<ViewParams>; // 只能通过 setViewStack 修改
   ctx: FlowEngineContext;
+  viewParams: ViewParams;
 
-  constructor(ctx: FlowEngineContext, viewParams: ViewParam[]) {
-    this.viewStack = [...viewParams];
+  constructor(ctx: FlowEngineContext, viewParams: ViewParams[]) {
+    this.setViewStack(viewParams);
     this.ctx = ctx;
+
+    define(this, {
+      viewParams: observable,
+    });
   }
 
-  changeTo(viewParam: ViewParam) {
-    // 1. 根据传入的参数，改变当前视图的参数。当前视图的参数是 viewStack 中最后一个元素
-    if (this.viewStack.length === 0) {
-      this.viewStack.push(viewParam);
-    } else {
-      this.viewStack[this.viewStack.length - 1] = { ...this.viewStack[this.viewStack.length - 1], ...viewParam };
-    }
+  setViewStack(viewParams: ViewParams[]) {
+    this.viewStack = Object.freeze([...viewParams]);
+    this.viewParams = this.viewStack[this.viewStack.length - 1] || {};
+  }
+
+  changeTo(viewParam: ViewParams) {
+    // 1. 根据传入的参数，合并成新的 viewStack
+    const newViewStack = this.viewStack.map((item, index) => {
+      if (index === this.viewStack.length - 1) {
+        return { ...item, ...viewParam };
+      }
+      return { ...item };
+    });
 
     // 2. 根据 viewStack 生成新的 pathname
-    const newPathname = generatePathnameFromViewParams(this.viewStack);
+    const newPathname = generatePathnameFromViewParams(newViewStack);
 
     // 3. 触发一次跳转。使用 replace 的方式
     this.ctx.router.navigate(newPathname, { replace: true });
   }
 
-  navigateTo(viewParam: ViewParam, opts?: { replace?: boolean; state?: any }) {
+  navigateTo(viewParam: ViewParams, opts?: { replace?: boolean; state?: any }) {
     // 1. 基于当前 viewStack 生成一个 pathname
     // 2. 将当前传入的参数转为 path string
     const newViewPathname = generatePathnameFromViewParams([...this.viewStack, viewParam]);
@@ -96,27 +116,13 @@ export class ViewNavigation {
     // 3. 与 pathname 拼接成新的 pathname（这里直接使用新生成的 pathname）
     const newPathname = newViewPathname;
 
-    // 4. 判断新的 pathname 是否与当前 location.pathname 的结尾一致。防止出现重复路径
-    //    不用 this.ctx.route.pathname 是因为它的值可能不是最新的，会导致判断失误
-    if (location.pathname.endsWith(newPathname)) {
-      return this.ctx.router.navigate(-1); // 避免点击按钮没反应的问题
-    }
-
-    // 5. 如果新的 pathname 与当前 ctx.route.pathname 不同，则触发一次跳转。使用 push 的方式
+    // 4. 如果新的 pathname 与当前 ctx.route.pathname 不同，则触发一次跳转。使用 push 的方式
     this.ctx.router.navigate(newPathname, opts);
-
-    // 6. 当 viewStack 为空时，把当前参数 push 到 viewStack 中
-    if (this.viewStack.length === 0) {
-      this.viewStack.push(viewParam);
-    }
   }
 
   back() {
-    const pathname = generatePathnameFromViewParams(this.viewStack);
-
-    // 防止重复触发返回操作
-    if (location.pathname.endsWith(pathname)) {
-      this.ctx.router.navigate(-1);
-    }
+    const prevStack = this.viewStack.slice(0, -1);
+    const prevPath = generatePathnameFromViewParams(prevStack);
+    this.ctx.router.navigate(prevPath, { replace: true });
   }
 }

package/src/views/__tests__/FlowView.usePage.test.tsx

@@ -0,0 +1,186 @@
+/**
+ * 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 React from 'react';
+import { describe, expect, it, beforeEach } from 'vitest';
+import { render, act, waitFor, screen } from '@testing-library/react';
+import { FlowEngine } from '../../flowEngine';
+import { FlowEngineProvider } from '../../provider';
+import { FlowViewer } from '../FlowView';
+import { usePage, GLOBAL_EMBED_CONTAINER_ID } from '../usePage';
+import { App, ConfigProvider } from 'antd';
+
+describe('FlowViewer zIndex with usePage', () => {
+  let engine: FlowEngine;
+
+  function TestApp({ onReady }: { onReady: (getViewer: () => FlowViewer) => void }) {
+    const [page, pageHolder] = usePage() as [{ open: (config: any, flowContext: any) => any }, React.ReactNode];
+
+    React.useEffect(() => {
+      const wrappedTypes = {
+        embed: {
+          open: (props: any, ctx: any) => {
+            return page.open(props, ctx);
+          },
+        },
+        drawer: { open: () => Promise.resolve() },
+        dialog: { open: () => Promise.resolve() },
+        popover: { open: () => Promise.resolve() },
+      };
+
+      engine.context.defineProperty('themeToken', {
+        value: { zIndexPopupBase: 1000 },
+      });
+
+      const getViewer = () => new FlowViewer(engine.context, wrappedTypes);
+      onReady(getViewer);
+    }, [page, onReady]);
+
+    return <>{pageHolder}</>;
+  }
+
+  const Wrapper: React.FC<{ onReady: (getViewer: () => FlowViewer) => void }> = ({ onReady }) => (
+    <ConfigProvider>
+      <App>
+        <FlowEngineProvider engine={engine}>
+          <TestApp onReady={onReady} />
+        </FlowEngineProvider>
+      </App>
+    </ConfigProvider>
+  );
+
+  beforeEach(() => {
+    engine = new FlowEngine();
+  });
+
+  it('open page1 -> open page2 -> close page2 -> open page3: internal zIndex counter should be correct', async () => {
+    let getViewer: () => FlowViewer;
+
+    const { unmount } = render(
+      <Wrapper
+        onReady={(fn) => {
+          getViewer = fn;
+        }}
+      />,
+    );
+
+    await waitFor(() => expect(getViewer).toBeDefined());
+
+    // Record initial zIndex
+    const initialZIndex = getViewer().getNextZIndex();
+
+    // Open page1
+    let page1: any;
+    await act(async () => {
+      page1 = getViewer().embed({ content: <div data-testid="page1">Page 1</div> });
+    });
+
+    await waitFor(() => expect(screen.getByTestId('page1')).toBeInTheDocument());
+
+    // After opening page1, zIndex counter should increment
+    const afterPage1ZIndex = getViewer().getNextZIndex();
+    expect(afterPage1ZIndex).toBe(initialZIndex + 1);
+
+    // Open page2
+    let page2: any;
+    await act(async () => {
+      page2 = getViewer().embed({ content: <div data-testid="page2">Page 2</div> });
+    });
+
+    await waitFor(() => expect(screen.getByTestId('page2')).toBeInTheDocument());
+
+    // After opening page2, zIndex counter should increment again
+    const afterPage2ZIndex = getViewer().getNextZIndex();
+    expect(afterPage2ZIndex).toBe(initialZIndex + 2);
+
+    // Close page2
+    await act(async () => {
+      page2.close();
+    });
+
+    await waitFor(() => expect(screen.queryByTestId('page2')).not.toBeInTheDocument());
+
+    // After closing page2, zIndex counter should decrement back
+    const afterClosePage2ZIndex = getViewer().getNextZIndex();
+    expect(afterClosePage2ZIndex).toBe(initialZIndex + 1);
+
+    // Open page3
+    let page3: any;
+    await act(async () => {
+      page3 = getViewer().embed({ content: <div data-testid="page3">Page 3</div> });
+    });
+
+    await waitFor(() => expect(screen.getByTestId('page3')).toBeInTheDocument());
+
+    // After opening page3, zIndex should be same as after page2 was opened (counter reused)
+    const afterPage3ZIndex = getViewer().getNextZIndex();
+    expect(afterPage3ZIndex).toBe(afterPage2ZIndex);
+
+    // Cleanup
+    await act(async () => {
+      page3.close();
+      page1.close();
+    });
+
+    unmount();
+  });
+
+  it('replaces previous embed view when using global #nocobase-embed-container target', async () => {
+    let api: { open: (config: any, flowContext: any) => any } | undefined;
+
+    function TestApp({ onReady }: { onReady: (page: any) => void }) {
+      const [page, pageHolder] = usePage() as [{ open: (config: any, flowContext: any) => any }, React.ReactNode];
+
+      React.useEffect(() => {
+        onReady(page);
+      }, [page, onReady]);
+
+      return <>{pageHolder}</>;
+    }
+
+    const Wrapper: React.FC<{ onReady: (page: any) => void }> = ({ onReady }) => (
+      <ConfigProvider>
+        <App>
+          <FlowEngineProvider engine={engine}>
+            <TestApp onReady={onReady} />
+          </FlowEngineProvider>
+        </App>
+      </ConfigProvider>
+    );
+
+    const target = document.createElement('div');
+    target.id = GLOBAL_EMBED_CONTAINER_ID;
+    document.body.appendChild(target);
+
+    const { unmount } = render(
+      <Wrapper
+        onReady={(page) => {
+          api = page;
+        }}
+      />,
+    );
+
+    await waitFor(() => expect(api).toBeDefined());
+
+    await act(async () => {
+      api!.open({ target, content: <div data-testid="page1">Page 1</div> }, engine.context);
+    });
+    await waitFor(() => expect(screen.getByTestId('page1')).toBeInTheDocument());
+
+    // Opening page2 into the global embed container should destroy page1 (replace behavior).
+    await act(async () => {
+      api!.open({ target, content: <div data-testid="page2">Page 2</div> }, engine.context);
+    });
+    await waitFor(() => expect(screen.getByTestId('page2')).toBeInTheDocument());
+    expect(screen.queryByTestId('page1')).not.toBeInTheDocument();
+
+    unmount();
+    document.body.removeChild(target);
+  });
+});

package/src/views/__tests__/ViewNavigation.test.ts

@@ -22,28 +22,26 @@ describe('ViewNavigation', () => {
         pathname: '/admin/test',
       },
     };
+    // Mock window.location
+    Object.defineProperty(window, 'location', {
+      value: {
+        pathname: '/admin',
+      },
+      writable: true,
+    });
   });
 
   describe('changeTo', () => {
-    it('should replace current view when viewStack is empty', () => {
-      viewNavigation = new ViewNavigation(mockCtx, []);
-
-      viewNavigation.changeTo({ viewUid: 'new-view' });
-
-      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'new-view' }]);
-      expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin/new-view', { replace: true });
-    });
-
-    it('should replace last view in viewStack', () => {
+    it('should keep viewStack unchanged', () => {
       viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'old-view' }]);
 
       viewNavigation.changeTo({ viewUid: 'new-view', tabUid: 'tab1' });
 
-      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'new-view', tabUid: 'tab1' }]);
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'old-view' }]);
       expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin/new-view/tab/tab1', { replace: true });
     });
 
-    it('should replace last view with complex parameters', () => {
+    it('should keep viewStack unchanged with complex parameters', () => {
       viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }, { viewUid: 'view2', tabUid: 'tab1' }]);
 
       viewNavigation.changeTo({
@@ -53,10 +51,7 @@ describe('ViewNavigation', () => {
         sourceId: 'source1',
       });
 
-      expect(viewNavigation.viewStack).toEqual([
-        { viewUid: 'view1' },
-        { viewUid: 'new-view', tabUid: 'new-tab', filterByTk: '123', sourceId: 'source1' },
-      ]);
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'view1' }, { viewUid: 'view2', tabUid: 'tab1' }]); // keep unchanged
       expect(mockCtx.router.navigate).toHaveBeenCalledWith(
         '/admin/view1/view/new-view/tab/new-tab/filterbytk/123/sourceid/source1',
         { replace: true },
@@ -68,13 +63,15 @@ describe('ViewNavigation', () => {
 
       viewNavigation.changeTo({ tabUid: 'new-tab' });
 
-      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'view1', tabUid: 'new-tab' }]);
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'view1' }]);
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin/view1/tab/new-tab', { replace: true });
     });
   });
 
   describe('navigateTo', () => {
     it('should navigate to new view', () => {
       viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'current-view' }]);
+      window.location.pathname = '/admin/current-view';
 
       viewNavigation.navigateTo({ viewUid: 'new-view' });
 
@@ -85,20 +82,9 @@ describe('ViewNavigation', () => {
       expect(call[1]).toBeUndefined();
     });
 
-    it('should navigate back when pathname is the same', () => {
-      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }]);
-      // set browser location to match the generated pathname
-      window.history.pushState({}, '', '/admin/view1/view/view2');
-
-      viewNavigation.navigateTo({ viewUid: 'view2' });
-
-      // when same pathname, navigate(-1) to avoid "no reaction" UX
-      expect(mockCtx.router.navigate).toHaveBeenCalledWith(-1);
-      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'view1' }]);
-    });
-
     it('should navigate with complex parameters', () => {
       viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1', tabUid: 'tab1' }]);
+      window.location.pathname = '/admin/view1/tab/tab1';
 
       viewNavigation.navigateTo({
         viewUid: 'view2',
@@ -116,25 +102,49 @@ describe('ViewNavigation', () => {
 
     it('should navigate from empty viewStack', () => {
       viewNavigation = new ViewNavigation(mockCtx, []);
+      window.location.pathname = '/admin';
 
       viewNavigation.navigateTo({ viewUid: 'first-view' });
 
-      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'first-view' }]);
+      expect(viewNavigation.viewStack).toEqual([]);
       const call = (mockCtx.router.navigate as any).mock.calls[0];
       expect(call[0]).toBe('/admin/first-view');
       expect(call[1]).toBeUndefined();
     });
+
+    it('should pass options to router.navigate', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }]);
+      window.location.pathname = '/admin/view1';
+
+      viewNavigation.navigateTo({ viewUid: 'view2' }, { replace: true });
+
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin/view1/view/view2', { replace: true });
+    });
   });
 
   describe('back', () => {
-    it('should call router navigate with -1', () => {
+    it('should navigate to parent path', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }, { viewUid: 'view2' }]);
+
+      viewNavigation.back();
+
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin/view1', { replace: true });
+    });
+
+    it('should navigate to root if stack has only one item', () => {
       viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }]);
-      // set browser location to current stack pathname so back() triggers
-      window.history.pushState({}, '', '/admin/view1');
 
       viewNavigation.back();
 
-      expect(mockCtx.router.navigate).toHaveBeenCalledWith(-1);
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin', { replace: true });
+    });
+
+    it('should navigate to root if stack is empty', () => {
+      viewNavigation = new ViewNavigation(mockCtx, []);
+
+      viewNavigation.back();
+
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin', { replace: true });
     });
   });
 });
@@ -173,6 +183,16 @@ describe('generatePathnameFromViewParams', () => {
     );
   });
 
+  it('should encode object filterByTk as encoded key-value string', () => {
+    const path = generatePathnameFromViewParams([{ viewUid: 'xxx', filterByTk: { id: 1, tenant: 'ac' } }]);
+    expect(path).toBe('/admin/xxx/filterbytk/' + encodeURIComponent('id=1&tenant=ac'));
+  });
+
+  it('should omit filterByTk segment for empty string or when absent', () => {
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx' }])).toBe('/admin/xxx');
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx', filterByTk: '' }])).toBe('/admin/xxx');
+  });
+
   it('should match parsePathnameToViewParams test cases', () => {
     // Test cases from parsePathnameToViewParams.test.ts
     expect(generatePathnameFromViewParams([{ viewUid: 'xxx' }])).toBe('/admin/xxx');