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

package/src/views/useDrawer.tsx

@@ -9,22 +9,53 @@
 
 import * as React from 'react';
 import DOMPurify from 'dompurify';
-import { observer } from '..';
+import { autorun, observable, observer } from '..';
 import { FlowContext, FlowEngineContext } from '../flowContext';
 import { FlowViewContextProvider } from '../FlowContextProvider';
-import { createViewMeta } from './createViewMeta';
+import { registerPopupVariable } from './createViewMeta';
 import DrawerComponent from './DrawerComponent';
 import usePatchElement from './usePatchElement';
+import { VIEW_ACTIVATED_EVENT, bumpViewActivatedVersion, resolveOpenerEngine } from './viewEvents';
 import { FlowEngineProvider } from '../provider';
 import { createViewScopedEngine } from '../ViewScopedFlowEngine';
-
-let uuid = 0;
+import { createViewRecordResolveOnServer, getViewRecordFromParent } from '../utils/variablesParams';
 
 export function useDrawer() {
   const holderRef = React.useRef(null);
+  const drawerList = React.useMemo(() => observable.shallow({ value: [] }), []);
+
+  const RenderNestedDrawer = React.memo((props: { index: number }) => {
+    const { index } = props;
+    const [RenderDrawer, setRenderDrawer] = React.useState<React.ComponentType | null>(null);
+
+    React.useEffect(() => {
+      autorun(() => {
+        const list = drawerList.value;
+        if (list[index] && RenderDrawer !== list[index]) {
+          setRenderDrawer(list[index]);
+        }
+
+        if (!list[index]) {
+          setRenderDrawer(null);
+        }
+      });
+    }, [RenderDrawer, index]);
+
+    if (!RenderDrawer) {
+      return null;
+    }
+
+    return (
+      <RenderDrawer>
+        <RenderNestedDrawer index={index + 1} />
+      </RenderDrawer>
+    );
+  });
+
+  RenderNestedDrawer.displayName = 'RenderNestedDrawer';
 
   const open = (config, flowContext: FlowEngineContext) => {
-    uuid += 1;
+    const parentEngine = flowContext.engine;
     const drawerRef = React.createRef<{
       destroy: () => void;
       update: (config: any) => void;
@@ -44,7 +75,7 @@ export function useDrawer() {
     let currentHeader: any = null;
 
     // Footer 组件实现
-    const FooterComponent = ({ children, ...props }) => {
+    const FooterComponent: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
       React.useEffect(() => {
         currentFooter = children;
         drawerRef.current?.setFooter(children);
@@ -59,10 +90,10 @@ export function useDrawer() {
     };
 
     // Header 组件实现
-    const HeaderComponent = ({ ...props }) => {
+    const HeaderComponent: React.FC<{ title?: React.ReactNode; extra?: React.ReactNode }> = (props) => {
       React.useEffect(() => {
         currentHeader = props;
-        drawerRef.current?.setHeader(props as any);
+        drawerRef.current?.setHeader(props);
 
         return () => {
           currentHeader = null;
@@ -73,20 +104,50 @@ export function useDrawer() {
       return null; // Header 组件本身不渲染内容
     };
 
+    const ctx = new FlowContext();
+    // 为当前视图创建作用域引擎（隔离实例与缓存）
+    const scopedEngine = createViewScopedEngine(flowContext.engine);
+    const openerEngine = resolveOpenerEngine(parentEngine, scopedEngine);
+
+    // 先将引擎暴露给视图上下文，再按需继承父上下文
+    ctx.defineProperty('engine', { value: scopedEngine });
+    ctx.addDelegate(scopedEngine.context);
+    if (config.inheritContext !== false) {
+      ctx.addDelegate(flowContext);
+    } else {
+      ctx.addDelegate(flowContext.engine.context);
+    }
+
     // 构造 currentDrawer 实例
     const currentDrawer = {
-      type: 'drawer',
+      type: 'drawer' as const,
       inputArgs: config.inputArgs || {},
       preventClose: !!config.preventClose,
-      destroy: () => drawerRef.current?.destroy(),
+      destroy: (result?: any) => {
+        config.onClose?.();
+        drawerRef.current?.destroy();
+        closeFunc?.();
+        resolvePromise?.(result);
+        // Notify opener view that it becomes active again.
+        const openerEmitter = openerEngine?.emitter;
+        bumpViewActivatedVersion(openerEmitter);
+        openerEmitter?.emit?.(VIEW_ACTIVATED_EVENT, { type: 'drawer', viewUid: currentDrawer?.inputArgs?.viewUid });
+        // 关闭时修正 previous/next 指针
+        scopedEngine.unlinkFromStack();
+      },
       update: (newConfig) => drawerRef.current?.update(newConfig),
       close: (result?: any, force?: boolean) => {
         if (config.preventClose && !force) {
           return;
         }
-        drawerRef.current?.destroy();
-        closeFunc?.();
-        resolvePromise?.(result);
+
+        if (config.triggerByRouter && config.inputArgs?.navigation?.back) {
+          // 交由路由系统来销毁当前视图
+          config.inputArgs.navigation.back();
+          return;
+        }
+
+        currentDrawer.destroy(result);
       },
       Footer: FooterComponent,
       Header: HeaderComponent,
@@ -99,28 +160,21 @@ export function useDrawer() {
         drawerRef.current?.setHeader(header);
       },
       navigation: config.inputArgs?.navigation,
+      get record() {
+        return getViewRecordFromParent(flowContext, ctx);
+      },
     };
 
-    const ctx = new FlowContext();
     ctx.defineProperty('view', {
       get: () => currentDrawer,
-      meta: createViewMeta(ctx, () => currentDrawer),
-      resolveOnServer: (p: string) => p === 'record' || p.startsWith('record.'),
+      resolveOnServer: createViewRecordResolveOnServer(ctx, () => getViewRecordFromParent(flowContext, ctx)),
     });
-    // 为当前视图创建作用域引擎（隔离实例与缓存）
-    const scopedEngine = createViewScopedEngine(flowContext.engine);
-    // 先将引擎暴露给视图上下文，再按需继承父上下文
-    ctx.defineProperty('engine', { value: scopedEngine });
-    ctx.addDelegate(scopedEngine.context);
-    if (config.inheritContext !== false) {
-      ctx.addDelegate(flowContext);
-    } else {
-      ctx.addDelegate(flowContext.engine.context);
-    }
+    // 顶层 popup 变量：弹窗记录/数据源/上级弹窗链（去重封装）
+    registerPopupVariable(ctx, currentDrawer);
 
     // 内部组件，在 Provider 内部计算 content
-    const DrawerWithContext: React.FC = observer(
-      (props) => {
+    const DrawerWithContext: React.FC = React.memo(
+      observer((props) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const mountedRef = React.useRef(false);
         const rawContent = typeof config.content === 'function' ? config.content(currentDrawer, ctx) : config.content;
@@ -147,57 +201,47 @@ export function useDrawer() {
             ref={drawerRef}
             {...config}
             footer={currentFooter}
-            header={currentHeader}
+            header={config.header || currentHeader}
             hidden={config.inputArgs?.hidden?.value}
-            afterClose={() => {
-              closeFunc?.();
-              config.onClose?.();
-              resolvePromise?.(config.result);
-              // 关闭时修正 previous/next 指针
-              scopedEngine.unlinkFromStack();
+            onClose={() => {
+              currentDrawer.close(config.result);
             }}
+            isMobile={ctx.isMobileLayout}
           >
             {content}
             {props.children}
           </DrawerComponent>
         );
-      },
-      {
-        displayName: 'DrawerWithContext',
-      },
+      }),
     );
 
-    const renderDrawer = (children: React.ReactNode) => (
+    DrawerWithContext.displayName = 'DrawerWithContext';
+
+    const RenderDrawer = React.memo(({ children }) => (
       <FlowEngineProvider engine={scopedEngine}>
         <FlowViewContextProvider context={ctx}>
           <DrawerWithContext>{children}</DrawerWithContext>
         </FlowViewContextProvider>
       </FlowEngineProvider>
-    );
+    ));
+
+    RenderDrawer.displayName = 'RenderDrawer';
 
-    closeFunc = holderRef.current?.patchElement(renderDrawer);
+    closeFunc = holderRef.current?.patchElement(RenderDrawer);
     return Object.assign(promise, currentDrawer);
   };
 
   const api = React.useMemo(() => ({ open }), []);
   const ElementsHolder = React.memo(
     React.forwardRef((props, ref) => {
-      const [elements, patchElement] = usePatchElement<(children: React.ReactNode) => React.ReactElement>();
+      const [elements, patchElement] = usePatchElement<React.ElementType>();
       React.useImperativeHandle(ref, () => ({ patchElement }), [patchElement]);
 
-      // 嵌套渲染：后面的元素是前一个元素的子元素
-      const renderNestedElements = () => {
-        if (elements.length === 0) {
-          return null;
-        }
-
-        // 从最后一个元素开始，向前递归渲染
-        return elements.reduceRight((children: React.ReactNode, renderElement) => {
-          return renderElement(children);
-        }, null as React.ReactNode);
-      };
+      React.useEffect(() => {
+        drawerList.value = elements;
+      }, [elements]);
 
-      return <>{renderNestedElements()}</>;
+      return <RenderNestedDrawer index={0} />;
     }),
   );
 

package/src/views/usePage.tsx

@@ -12,14 +12,21 @@ import ReactDOM from 'react-dom';
 import { observer } from '..';
 import { FlowContext } from '../flowContext';
 import { FlowViewContextProvider } from '../FlowContextProvider';
-import { createViewMeta } from './createViewMeta';
+import { registerPopupVariable } from './createViewMeta';
 import { PageComponent } from './PageComponent';
 import usePatchElement from './usePatchElement';
+import { VIEW_ACTIVATED_EVENT, bumpViewActivatedVersion, resolveOpenerEngine } from './viewEvents';
 import { FlowEngineProvider } from '../provider';
 import { createViewScopedEngine } from '../ViewScopedFlowEngine';
+import { createViewRecordResolveOnServer, getViewRecordFromParent } from '../utils/variablesParams';
 
 let uuid = 0;
 
+/** Global embed container element ID */
+export const GLOBAL_EMBED_CONTAINER_ID = 'nocobase-embed-container';
+/** Dataset key used to signal embed replacement in progress (skip style reset on close) */
+export const EMBED_REPLACING_DATA_KEY = 'nocobaseEmbedReplacing';
+
 // 稳定的 Holder 组件，避免在父组件重渲染时更换组件类型导致卸载， 否则切换主题时会丢失所有页面内容
 const PageElementsHolder = React.memo(
   React.forwardRef((props: any, ref: any) => {
@@ -31,8 +38,10 @@ const PageElementsHolder = React.memo(
 
 export function usePage() {
   const holderRef = React.useRef(null);
+  const globalEmbedActiveRef = React.useRef<null | { destroy: () => void }>(null);
 
   const open = (config, flowContext) => {
+    const parentEngine = flowContext?.engine;
     uuid += 1;
     const pageRef = React.createRef<{
       destroy: () => void;
@@ -48,7 +57,7 @@ export function usePage() {
     });
 
     // Footer 组件实现
-    const FooterComponent = ({ children, ...props }) => {
+    const FooterComponent: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
       React.useEffect(() => {
         pageRef.current?.setFooter(children);
 
@@ -61,9 +70,9 @@ export function usePage() {
     };
 
     // Header 组件实现
-    const HeaderComponent = ({ ...props }) => {
+    const HeaderComponent: React.FC<{ title?: React.ReactNode; extra?: React.ReactNode }> = (props) => {
       React.useEffect(() => {
-        pageRef.current?.setHeader(props as any);
+        pageRef.current?.setHeader(props);
 
         return () => {
           pageRef.current?.setHeader(null);
@@ -73,22 +82,81 @@ export function usePage() {
       return null; // Header 组件本身不渲染内容
     };
 
-    const { target, content, preventClose, inheritContext = true, ...restConfig } = config;
+    const {
+      target,
+      content,
+      preventClose,
+      inheritContext = true,
+      inputArgs: viewInputArgs = {},
+      ...restConfig
+    } = config;
+    const isGlobalEmbedContainer = target instanceof HTMLElement && target.id === GLOBAL_EMBED_CONTAINER_ID;
+
+    // Global embed container uses "replace" behavior: opening a new view destroys the previous one.
+    if (isGlobalEmbedContainer && globalEmbedActiveRef.current) {
+      try {
+        // Avoid style "reset flicker" when replacing: tell embed wrappers to skip resetting container styles.
+        target.dataset[EMBED_REPLACING_DATA_KEY] = '1';
+        globalEmbedActiveRef.current.destroy();
+      } finally {
+        delete target.dataset[EMBED_REPLACING_DATA_KEY];
+        globalEmbedActiveRef.current = null;
+      }
+    }
+
+    const ctx = new FlowContext();
+    // 为当前视图创建作用域引擎（隔离实例与缓存）
+    const scopedEngine = createViewScopedEngine(flowContext.engine);
+    const openerEngine = resolveOpenerEngine(parentEngine, scopedEngine);
+
+    ctx.defineProperty('engine', { value: scopedEngine });
+    ctx.addDelegate(scopedEngine.context);
+    if (inheritContext) {
+      ctx.addDelegate(flowContext);
+    } else {
+      ctx.addDelegate(flowContext.engine.context);
+    }
 
     // 构造 currentPage 实例
     const currentPage = {
-      type: 'embed',
-      inputArgs: config.inputArgs || {},
+      type: 'embed' as const,
+      inputArgs: viewInputArgs,
       preventClose: !!config.preventClose,
-      destroy: () => pageRef.current?.destroy(),
+      destroy: (result?: any) => {
+        config.onClose?.();
+        resolvePromise?.(result);
+        pageRef.current?.destroy();
+        closeFunc?.();
+
+        if (isGlobalEmbedContainer) {
+          globalEmbedActiveRef.current = null;
+        }
+
+        // Notify opener view that it becomes active again.
+        const isReplacing =
+          isGlobalEmbedContainer && target instanceof HTMLElement && target.dataset?.[EMBED_REPLACING_DATA_KEY] === '1';
+        if (!isReplacing) {
+          const openerEmitter = openerEngine?.emitter;
+          bumpViewActivatedVersion(openerEmitter);
+          openerEmitter?.emit?.(VIEW_ACTIVATED_EVENT, { type: 'embed', viewUid: currentPage?.inputArgs?.viewUid });
+        }
+
+        // 关闭时修正 previous/next 指针
+        scopedEngine.unlinkFromStack();
+      },
       update: (newConfig) => pageRef.current?.update(newConfig),
       close: (result?: any, force?: boolean) => {
         if (preventClose && !force) {
           return;
         }
-        resolvePromise?.(result);
-        pageRef.current?.destroy();
-        closeFunc?.();
+
+        if (config.triggerByRouter && config.inputArgs?.navigation?.back) {
+          // 交由路由系统来销毁当前视图
+          config.inputArgs.navigation.back();
+          return;
+        }
+
+        currentPage.destroy(result);
       },
       Header: HeaderComponent,
       Footer: FooterComponent,
@@ -99,30 +167,30 @@ export function usePage() {
         pageRef.current?.setHeader(header);
       },
       navigation: config.inputArgs?.navigation,
+      get record() {
+        // 当视图正在查看与父 record 同一条记录时，复用父记录深拷贝；否则走服务端解析
+        return getViewRecordFromParent(flowContext, ctx);
+      },
     };
 
-    const ctx = new FlowContext();
     ctx.defineProperty('view', {
       get: () => currentPage,
-      meta: createViewMeta(ctx, () => currentPage),
-      resolveOnServer: (p: string) => p === 'record' || p.startsWith('record.'),
+      // 仅当访问关联字段或前端无本地记录数据时，才交给服务端解析
+      resolveOnServer: createViewRecordResolveOnServer(ctx, () => getViewRecordFromParent(flowContext, ctx)),
     });
-    // 为当前视图创建作用域引擎（隔离实例与缓存）
-    const scopedEngine = createViewScopedEngine(flowContext.engine);
-    ctx.defineProperty('engine', { value: scopedEngine });
-    ctx.addDelegate(scopedEngine.context);
-    if (inheritContext) {
-      ctx.addDelegate(flowContext);
-    } else {
-      ctx.addDelegate(flowContext.engine.context);
-    }
+    // 顶层 popup 变量：弹窗记录/数据源/上级弹窗链（去重封装）
+    registerPopupVariable(ctx, currentPage);
 
     const PageWithContext = observer(
       () => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const mountedRef = React.useRef(false);
         // 支持 content 为函数，传递 currentPage
-        const pageContent = typeof content === 'function' ? content(currentPage, ctx) : content;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const pageContent = React.useMemo(
+          () => (typeof content === 'function' ? content(currentPage, ctx) : content),
+          [],
+        );
         // 响应themeToken的响应式更新
         void ctx.themeToken;
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -138,16 +206,11 @@ export function usePage() {
 
         return (
           <PageComponent
-            key={`page-${uuid}`}
             ref={pageRef}
             hidden={config.inputArgs?.hidden?.value}
             {...restConfig}
-            afterClose={() => {
-              closeFunc?.();
-              config.onClose?.();
-              resolvePromise?.(config.result);
-              // 关闭时修正 previous/next 指针
-              scopedEngine.unlinkFromStack();
+            onClose={() => {
+              currentPage.close(config.result);
             }}
           >
             {pageContent}
@@ -159,8 +222,9 @@ export function usePage() {
       },
     );
 
+    const key = viewInputArgs?.viewUid || `page-${uuid}`;
     const page = (
-      <FlowEngineProvider engine={scopedEngine}>
+      <FlowEngineProvider key={key} engine={scopedEngine}>
         <FlowViewContextProvider context={ctx}>
           <PageWithContext />
         </FlowViewContextProvider>
@@ -168,11 +232,15 @@ export function usePage() {
     );
 
     if (target && target instanceof HTMLElement) {
-      closeFunc = holderRef.current?.patchElement(ReactDOM.createPortal(page, target));
+      closeFunc = holderRef.current?.patchElement(ReactDOM.createPortal(page, target, key));
     } else {
       closeFunc = holderRef.current?.patchElement(page);
     }
 
+    if (isGlobalEmbedContainer) {
+      globalEmbedActiveRef.current = { destroy: currentPage.destroy };
+    }
+
     return Object.assign(promise, currentPage);
   };
 

package/src/views/usePopover.tsx

@@ -40,8 +40,11 @@ const PopoverComponent = React.forwardRef<any, any>(({ afterClose, content, plac
       destroyTooltipOnHide
       content={config.content}
       placement={config.placement}
-      getPopupContainer={() => document.body}
+      getPopupContainer={() => document.querySelector('#nocobase-app-container') || document.body}
       onOpenChange={(nextOpen) => {
+        if (!nextOpen && config.preventClose) {
+          return;
+        }
         setVisible(nextOpen);
         if (!nextOpen) {
           afterClose?.();

package/src/views/viewEvents.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 { FlowEngine } from '../flowEngine';
+
+export const VIEW_ACTIVATED_VERSION = Symbol.for('__NOCOBASE_VIEW_ACTIVATED_VERSION__');
+
+export const VIEW_ACTIVATED_EVENT = 'view:activated' as const;
+export const DATA_SOURCE_DIRTY_EVENT = 'dataSource:dirty' as const;
+
+export const ENGINE_SCOPE_KEY = '__NOCOBASE_ENGINE_SCOPE__' as const;
+export const VIEW_ENGINE_SCOPE = 'view' as const;
+
+export function getEmitterViewActivatedVersion(emitter): number {
+  const raw = Reflect.get(emitter, VIEW_ACTIVATED_VERSION);
+  const num = typeof raw === 'number' ? raw : Number(raw);
+  return Number.isFinite(num) && num > 0 ? num : 0;
+}
+
+export function bumpViewActivatedVersion(emitter): number {
+  const current = getEmitterViewActivatedVersion(emitter);
+  if (!Object.isExtensible(emitter)) return current;
+  const next = current + 1;
+  Reflect.set(emitter, VIEW_ACTIVATED_VERSION, next);
+  return next;
+}
+
+function isViewEngine(engine: FlowEngine): boolean {
+  return Reflect.get(engine, ENGINE_SCOPE_KEY) === VIEW_ENGINE_SCOPE;
+}
+
+function findNearestViewEngine(engine: FlowEngine | undefined): FlowEngine | undefined {
+  let cur: FlowEngine | undefined = engine;
+  let guard = 0;
+  while (cur && guard++ < 50) {
+    if (isViewEngine(cur)) return cur;
+    cur = (cur as { previousEngine?: FlowEngine | undefined }).previousEngine;
+  }
+}
+
+export function resolveOpenerEngine(parentEngine: FlowEngine, scopedEngine: FlowEngine): FlowEngine | undefined {
+  if (!parentEngine) return undefined;
+  const parentViewEngine = findNearestViewEngine(parentEngine);
+  if (parentViewEngine) return parentViewEngine;
+
+  // Fallback: resolve from previous engine in the stack (historical behavior).
+  const previousEngine = scopedEngine?.previousEngine;
+  return findNearestViewEngine(previousEngine) || parentEngine;
+}

package/lib/runjs-context/contexts/FlowRunJSContext.d.ts

@@ -1,38 +0,0 @@
-/**
- * This file is part of the NocoBase (R) project.
- * Copyright (c) 2020-2024 NocoBase Co., Ltd.
- * Authors: NocoBase Team.
- *
- * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
- * For more information, please refer to: https://www.nocobase.com/agreement.
- */
-import type { FlowContext } from '../../flowContext';
-export type RunJSVersion = 'v1' | (string & {});
-export type RunJSContextCtor = new (delegate: FlowContext) => FlowRunJSContext;
-export type RunJSDocMeta = {
-    label?: string;
-    properties?: Record<string, any>;
-    methods?: Record<string, any>;
-    snipastes?: Record<string, any>;
-};
-export declare class FlowRunJSContext {
-    #private;
-    protected _delegate: FlowContext;
-    [key: string]: any;
-    static allow?: {
-        keys?: ReadonlyArray<string>;
-        facades?: Record<string, ReadonlyArray<string>>;
-    };
-    constructor(delegate: FlowContext);
-    defineProperty(key: string, options: {
-        get?: (ctx: any) => any;
-        value?: any;
-    }): void;
-    defineMethod(name: string, fn: (...args: any[]) => any): void;
-    static injectDefaultGlobals?(): {
-        window?: any;
-        document?: any;
-    } | void;
-    static define(meta: RunJSDocMeta): void;
-    static getDoc(): RunJSDocMeta;
-}