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

package/lib/views/useDialog.js

@@ -48,13 +48,16 @@ var import_FlowContextProvider = require("../FlowContextProvider");
 var import_createViewMeta = require("./createViewMeta");
 var import_DialogComponent = __toESM(require("./DialogComponent"));
 var import_usePatchElement = __toESM(require("./usePatchElement"));
+var import_viewEvents = require("./viewEvents");
 var import_provider = require("../provider");
 var import_ViewScopedFlowEngine = require("../ViewScopedFlowEngine");
+var import_variablesParams = require("../utils/variablesParams");
 let uuid = 0;
 function useDialog() {
   const holderRef = React.useRef(null);
   const open = /* @__PURE__ */ __name((config, flowContext) => {
-    var _a, _b;
+    var _a, _b, _c;
+    const parentEngine = flowContext == null ? void 0 : flowContext.engine;
     uuid += 1;
     const dialogRef = React.createRef();
     let closeFunc;
@@ -64,7 +67,7 @@ function useDialog() {
     });
     let currentFooter = null;
     let currentHeader = null;
-    const FooterComponent = /* @__PURE__ */ __name(({ children, ...props }) => {
+    const FooterComponent = /* @__PURE__ */ __name(({ children }) => {
       React.useEffect(() => {
         var _a2;
         currentFooter = children;
@@ -77,7 +80,7 @@ function useDialog() {
       }, [children]);
       return null;
     }, "FooterComponent");
-    const HeaderComponent = /* @__PURE__ */ __name(({ ...props }) => {
+    const HeaderComponent = /* @__PURE__ */ __name((props) => {
       React.useEffect(() => {
         var _a2;
         currentHeader = props;
@@ -90,26 +93,45 @@ function useDialog() {
       }, [props]);
       return null;
     }, "HeaderComponent");
+    const ctx = new import_flowContext.FlowContext();
+    const scopedEngine = (0, import_ViewScopedFlowEngine.createViewScopedEngine)(flowContext.engine);
+    const openerEngine = (0, import_viewEvents.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);
+    }
     const currentDialog = {
       type: "dialog",
       inputArgs: config.inputArgs || {},
       preventClose: !!config.preventClose,
-      destroy: /* @__PURE__ */ __name(() => {
-        var _a2;
-        return (_a2 = dialogRef.current) == null ? void 0 : _a2.destroy();
+      destroy: /* @__PURE__ */ __name((result) => {
+        var _a2, _b2, _c2, _d;
+        (_a2 = config.onClose) == null ? void 0 : _a2.call(config);
+        (_b2 = dialogRef.current) == null ? void 0 : _b2.destroy();
+        closeFunc == null ? void 0 : closeFunc();
+        resolvePromise == null ? void 0 : resolvePromise(result);
+        const openerEmitter = openerEngine == null ? void 0 : openerEngine.emitter;
+        (0, import_viewEvents.bumpViewActivatedVersion)(openerEmitter);
+        (_d = openerEmitter == null ? void 0 : openerEmitter.emit) == null ? void 0 : _d.call(openerEmitter, import_viewEvents.VIEW_ACTIVATED_EVENT, { type: "dialog", viewUid: (_c2 = currentDialog == null ? void 0 : currentDialog.inputArgs) == null ? void 0 : _c2.viewUid });
+        scopedEngine.unlinkFromStack();
       }, "destroy"),
       update: /* @__PURE__ */ __name((newConfig) => {
         var _a2;
         return (_a2 = dialogRef.current) == null ? void 0 : _a2.update(newConfig);
       }, "update"),
       close: /* @__PURE__ */ __name((result, force) => {
-        var _a2;
+        var _a2, _b2;
         if (config.preventClose && !force) {
           return;
         }
-        (_a2 = dialogRef.current) == null ? void 0 : _a2.destroy();
-        closeFunc == null ? void 0 : closeFunc();
-        resolvePromise == null ? void 0 : resolvePromise(result);
+        if (config.triggerByRouter && ((_b2 = (_a2 = config.inputArgs) == null ? void 0 : _a2.navigation) == null ? void 0 : _b2.back)) {
+          config.inputArgs.navigation.back();
+          return;
+        }
+        currentDialog.destroy(result);
       }, "close"),
       Footer: FooterComponent,
       Header: HeaderComponent,
@@ -123,25 +145,19 @@ function useDialog() {
         currentHeader = header;
         (_a2 = dialogRef.current) == null ? void 0 : _a2.setHeader(header);
       }, "setHeader"),
-      navigation: (_a = config.inputArgs) == null ? void 0 : _a.navigation
+      navigation: (_a = config.inputArgs) == null ? void 0 : _a.navigation,
+      get record() {
+        return (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx);
+      }
     };
-    const ctx = new import_flowContext.FlowContext();
     ctx.defineProperty("view", {
       get: /* @__PURE__ */ __name(() => currentDialog, "get"),
-      meta: (0, import_createViewMeta.createViewMeta)(ctx, () => currentDialog),
-      resolveOnServer: /* @__PURE__ */ __name((p) => p === "record" || p.startsWith("record."), "resolveOnServer")
+      resolveOnServer: (0, import_variablesParams.createViewRecordResolveOnServer)(ctx, () => (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx))
     });
-    const scopedEngine = (0, import_ViewScopedFlowEngine.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);
-    }
+    (0, import_createViewMeta.registerPopupVariable)(ctx, currentDialog);
     const DialogWithContext = (0, import__.observer)(
       () => {
-        var _a2, _b2, _c, _d;
+        var _a2, _b2, _c2, _d;
         const mountedRef = React.useRef(false);
         const rawContent = typeof config.content === "function" ? config.content(currentDialog, ctx) : config.content;
         const content = typeof rawContent === "string" ? /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: import_dompurify.default.sanitize(rawContent) } }) : rawContent;
@@ -157,18 +173,13 @@ function useDialog() {
           import_DialogComponent.default,
           {
             className: "nb-dialog-overflow-hidden",
-            key: `dialog-${uuid}`,
             ref: dialogRef,
-            hidden: (_d = (_c = config.inputArgs) == null ? void 0 : _c.hidden) == null ? void 0 : _d.value,
-            ...config,
+            hidden: (_d = (_c2 = config.inputArgs) == null ? void 0 : _c2.hidden) == null ? void 0 : _d.value,
             footer: currentFooter,
             header: currentHeader,
-            afterClose: () => {
-              var _a3;
-              closeFunc == null ? void 0 : closeFunc();
-              (_a3 = config.onClose) == null ? void 0 : _a3.call(config);
-              resolvePromise == null ? void 0 : resolvePromise(config.result);
-              scopedEngine.unlinkFromStack();
+            ...config,
+            onCancel: () => {
+              currentDialog.close(config.result);
             }
           },
           content
@@ -178,8 +189,9 @@ function useDialog() {
         displayName: "DialogWithContext"
       }
     );
-    const dialog = /* @__PURE__ */ React.createElement(import_provider.FlowEngineProvider, { engine: scopedEngine }, /* @__PURE__ */ React.createElement(import_FlowContextProvider.FlowViewContextProvider, { context: ctx }, /* @__PURE__ */ React.createElement(DialogWithContext, null)));
-    closeFunc = (_b = holderRef.current) == null ? void 0 : _b.patchElement(dialog);
+    const key = ((_b = config == null ? void 0 : config.inputArgs) == null ? void 0 : _b.viewUid) || `page-${uuid}`;
+    const dialog = /* @__PURE__ */ React.createElement(import_provider.FlowEngineProvider, { key, engine: scopedEngine }, /* @__PURE__ */ React.createElement(import_FlowContextProvider.FlowViewContextProvider, { context: ctx }, /* @__PURE__ */ React.createElement(DialogWithContext, null)));
+    closeFunc = (_c = holderRef.current) == null ? void 0 : _c.patchElement(dialog);
     return Object.assign(promise, currentDialog);
   }, "open");
   const api = React.useMemo(() => ({ open }), []);

package/lib/views/useDrawer.d.ts

@@ -10,24 +10,25 @@ import * as React from 'react';
 import { FlowEngineContext } from '../flowContext';
 export declare function useDrawer(): (React.JSX.Element | {
     open: (config: any, flowContext: FlowEngineContext) => Promise<unknown> & {
-        type: string;
+        type: "drawer";
         inputArgs: any;
         preventClose: boolean;
-        destroy: () => void;
+        destroy: (result?: any) => void;
         update: (newConfig: any) => void;
         close: (result?: any, force?: boolean) => void;
-        Footer: ({ children, ...props }: {
-            [x: string]: any;
-            children: any;
-        }) => any;
-        Header: ({ ...props }: {
-            [x: string]: any;
-        }) => any;
+        Footer: React.FC<{
+            children?: React.ReactNode;
+        }>;
+        Header: React.FC<{
+            title?: React.ReactNode;
+            extra?: React.ReactNode;
+        }>;
         setFooter: (footer: React.ReactNode) => void;
         setHeader: (header: {
             title?: React.ReactNode;
             extra?: React.ReactNode;
         }) => void;
         navigation: any;
+        readonly record: unknown;
     };
 })[];

package/lib/views/useDrawer.js

@@ -48,14 +48,36 @@ var import_FlowContextProvider = require("../FlowContextProvider");
 var import_createViewMeta = require("./createViewMeta");
 var import_DrawerComponent = __toESM(require("./DrawerComponent"));
 var import_usePatchElement = __toESM(require("./usePatchElement"));
+var import_viewEvents = require("./viewEvents");
 var import_provider = require("../provider");
 var import_ViewScopedFlowEngine = require("../ViewScopedFlowEngine");
-let uuid = 0;
+var import_variablesParams = require("../utils/variablesParams");
 function useDrawer() {
   const holderRef = React.useRef(null);
+  const drawerList = React.useMemo(() => import__.observable.shallow({ value: [] }), []);
+  const RenderNestedDrawer = React.memo((props) => {
+    const { index } = props;
+    const [RenderDrawer, setRenderDrawer] = React.useState(null);
+    React.useEffect(() => {
+      (0, import__.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 /* @__PURE__ */ React.createElement(RenderDrawer, null, /* @__PURE__ */ React.createElement(RenderNestedDrawer, { index: index + 1 }));
+  });
+  RenderNestedDrawer.displayName = "RenderNestedDrawer";
   const open = /* @__PURE__ */ __name((config, flowContext) => {
     var _a, _b;
-    uuid += 1;
+    const parentEngine = flowContext.engine;
     const drawerRef = React.createRef();
     let closeFunc;
     let resolvePromise;
@@ -64,7 +86,7 @@ function useDrawer() {
     });
     let currentFooter = null;
     let currentHeader = null;
-    const FooterComponent = /* @__PURE__ */ __name(({ children, ...props }) => {
+    const FooterComponent = /* @__PURE__ */ __name(({ children }) => {
       React.useEffect(() => {
         var _a2;
         currentFooter = children;
@@ -77,7 +99,7 @@ function useDrawer() {
       }, [children]);
       return null;
     }, "FooterComponent");
-    const HeaderComponent = /* @__PURE__ */ __name(({ ...props }) => {
+    const HeaderComponent = /* @__PURE__ */ __name((props) => {
       React.useEffect(() => {
         var _a2;
         currentHeader = props;
@@ -90,26 +112,45 @@ function useDrawer() {
       }, [props]);
       return null;
     }, "HeaderComponent");
+    const ctx = new import_flowContext.FlowContext();
+    const scopedEngine = (0, import_ViewScopedFlowEngine.createViewScopedEngine)(flowContext.engine);
+    const openerEngine = (0, import_viewEvents.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);
+    }
     const currentDrawer = {
       type: "drawer",
       inputArgs: config.inputArgs || {},
       preventClose: !!config.preventClose,
-      destroy: /* @__PURE__ */ __name(() => {
-        var _a2;
-        return (_a2 = drawerRef.current) == null ? void 0 : _a2.destroy();
+      destroy: /* @__PURE__ */ __name((result) => {
+        var _a2, _b2, _c, _d;
+        (_a2 = config.onClose) == null ? void 0 : _a2.call(config);
+        (_b2 = drawerRef.current) == null ? void 0 : _b2.destroy();
+        closeFunc == null ? void 0 : closeFunc();
+        resolvePromise == null ? void 0 : resolvePromise(result);
+        const openerEmitter = openerEngine == null ? void 0 : openerEngine.emitter;
+        (0, import_viewEvents.bumpViewActivatedVersion)(openerEmitter);
+        (_d = openerEmitter == null ? void 0 : openerEmitter.emit) == null ? void 0 : _d.call(openerEmitter, import_viewEvents.VIEW_ACTIVATED_EVENT, { type: "drawer", viewUid: (_c = currentDrawer == null ? void 0 : currentDrawer.inputArgs) == null ? void 0 : _c.viewUid });
+        scopedEngine.unlinkFromStack();
       }, "destroy"),
       update: /* @__PURE__ */ __name((newConfig) => {
         var _a2;
         return (_a2 = drawerRef.current) == null ? void 0 : _a2.update(newConfig);
       }, "update"),
       close: /* @__PURE__ */ __name((result, force) => {
-        var _a2;
+        var _a2, _b2;
         if (config.preventClose && !force) {
           return;
         }
-        (_a2 = drawerRef.current) == null ? void 0 : _a2.destroy();
-        closeFunc == null ? void 0 : closeFunc();
-        resolvePromise == null ? void 0 : resolvePromise(result);
+        if (config.triggerByRouter && ((_b2 = (_a2 = config.inputArgs) == null ? void 0 : _a2.navigation) == null ? void 0 : _b2.back)) {
+          config.inputArgs.navigation.back();
+          return;
+        }
+        currentDrawer.destroy(result);
       }, "close"),
       Footer: FooterComponent,
       Header: HeaderComponent,
@@ -123,24 +164,18 @@ function useDrawer() {
         currentHeader = header;
         (_a2 = drawerRef.current) == null ? void 0 : _a2.setHeader(header);
       }, "setHeader"),
-      navigation: (_a = config.inputArgs) == null ? void 0 : _a.navigation
+      navigation: (_a = config.inputArgs) == null ? void 0 : _a.navigation,
+      get record() {
+        return (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx);
+      }
     };
-    const ctx = new import_flowContext.FlowContext();
     ctx.defineProperty("view", {
       get: /* @__PURE__ */ __name(() => currentDrawer, "get"),
-      meta: (0, import_createViewMeta.createViewMeta)(ctx, () => currentDrawer),
-      resolveOnServer: /* @__PURE__ */ __name((p) => p === "record" || p.startsWith("record."), "resolveOnServer")
+      resolveOnServer: (0, import_variablesParams.createViewRecordResolveOnServer)(ctx, () => (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx))
     });
-    const scopedEngine = (0, import_ViewScopedFlowEngine.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);
-    }
-    const DrawerWithContext = (0, import__.observer)(
-      (props) => {
+    (0, import_createViewMeta.registerPopupVariable)(ctx, currentDrawer);
+    const DrawerWithContext = React.memo(
+      (0, import__.observer)((props) => {
         var _a2, _b2, _c, _d;
         const mountedRef = React.useRef(false);
         const rawContent = typeof config.content === "function" ? config.content(currentDrawer, ctx) : config.content;
@@ -159,26 +194,22 @@ function useDrawer() {
             ref: drawerRef,
             ...config,
             footer: currentFooter,
-            header: currentHeader,
+            header: config.header || currentHeader,
             hidden: (_d = (_c = config.inputArgs) == null ? void 0 : _c.hidden) == null ? void 0 : _d.value,
-            afterClose: () => {
-              var _a3;
-              closeFunc == null ? void 0 : closeFunc();
-              (_a3 = config.onClose) == null ? void 0 : _a3.call(config);
-              resolvePromise == null ? void 0 : resolvePromise(config.result);
-              scopedEngine.unlinkFromStack();
-            }
+            onClose: () => {
+              currentDrawer.close(config.result);
+            },
+            isMobile: ctx.isMobileLayout
           },
           content,
           props.children
         );
-      },
-      {
-        displayName: "DrawerWithContext"
-      }
+      })
     );
-    const renderDrawer = /* @__PURE__ */ __name((children) => /* @__PURE__ */ React.createElement(import_provider.FlowEngineProvider, { engine: scopedEngine }, /* @__PURE__ */ React.createElement(import_FlowContextProvider.FlowViewContextProvider, { context: ctx }, /* @__PURE__ */ React.createElement(DrawerWithContext, null, children))), "renderDrawer");
-    closeFunc = (_b = holderRef.current) == null ? void 0 : _b.patchElement(renderDrawer);
+    DrawerWithContext.displayName = "DrawerWithContext";
+    const RenderDrawer = React.memo(({ children }) => /* @__PURE__ */ React.createElement(import_provider.FlowEngineProvider, { engine: scopedEngine }, /* @__PURE__ */ React.createElement(import_FlowContextProvider.FlowViewContextProvider, { context: ctx }, /* @__PURE__ */ React.createElement(DrawerWithContext, null, children))));
+    RenderDrawer.displayName = "RenderDrawer";
+    closeFunc = (_b = holderRef.current) == null ? void 0 : _b.patchElement(RenderDrawer);
     return Object.assign(promise, currentDrawer);
   }, "open");
   const api = React.useMemo(() => ({ open }), []);
@@ -186,15 +217,10 @@ function useDrawer() {
     React.forwardRef((props, ref) => {
       const [elements, patchElement] = (0, import_usePatchElement.default)();
       React.useImperativeHandle(ref, () => ({ patchElement }), [patchElement]);
-      const renderNestedElements = /* @__PURE__ */ __name(() => {
-        if (elements.length === 0) {
-          return null;
-        }
-        return elements.reduceRight((children, renderElement) => {
-          return renderElement(children);
-        }, null);
-      }, "renderNestedElements");
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, renderNestedElements());
+      React.useEffect(() => {
+        drawerList.value = elements;
+      }, [elements]);
+      return /* @__PURE__ */ React.createElement(RenderNestedDrawer, { index: 0 });
     })
   );
   return [api, /* @__PURE__ */ React.createElement(ElementsHolder, { key: "drawer-holder", ref: holderRef })];

package/lib/views/usePage.d.ts

@@ -7,26 +7,31 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 import React from 'react';
+/** Global embed container element ID */
+export declare const GLOBAL_EMBED_CONTAINER_ID = "nocobase-embed-container";
+/** Dataset key used to signal embed replacement in progress (skip style reset on close) */
+export declare const EMBED_REPLACING_DATA_KEY = "nocobaseEmbedReplacing";
 export declare function usePage(): (React.JSX.Element | {
     open: (config: any, flowContext: any) => Promise<unknown> & {
-        type: string;
+        type: "embed";
         inputArgs: any;
         preventClose: boolean;
-        destroy: () => void;
+        destroy: (result?: any) => void;
         update: (newConfig: any) => void;
         close: (result?: any, force?: boolean) => void;
-        Header: ({ ...props }: {
-            [x: string]: any;
-        }) => any;
-        Footer: ({ children, ...props }: {
-            [x: string]: any;
-            children: any;
-        }) => any;
+        Header: React.FC<{
+            title?: React.ReactNode;
+            extra?: React.ReactNode;
+        }>;
+        Footer: React.FC<{
+            children?: React.ReactNode;
+        }>;
         setFooter: (footer: React.ReactNode) => void;
         setHeader: (header: {
             title?: React.ReactNode;
             extra?: React.ReactNode;
         }) => void;
         navigation: any;
+        readonly record: unknown;
     };
 })[];

package/lib/views/usePage.js

@@ -37,6 +37,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var usePage_exports = {};
 __export(usePage_exports, {
+  EMBED_REPLACING_DATA_KEY: () => EMBED_REPLACING_DATA_KEY,
+  GLOBAL_EMBED_CONTAINER_ID: () => GLOBAL_EMBED_CONTAINER_ID,
   usePage: () => usePage
 });
 module.exports = __toCommonJS(usePage_exports);
@@ -48,9 +50,13 @@ var import_FlowContextProvider = require("../FlowContextProvider");
 var import_createViewMeta = require("./createViewMeta");
 var import_PageComponent = require("./PageComponent");
 var import_usePatchElement = __toESM(require("./usePatchElement"));
+var import_viewEvents = require("./viewEvents");
 var import_provider = require("../provider");
 var import_ViewScopedFlowEngine = require("../ViewScopedFlowEngine");
+var import_variablesParams = require("../utils/variablesParams");
 let uuid = 0;
+const GLOBAL_EMBED_CONTAINER_ID = "nocobase-embed-container";
+const EMBED_REPLACING_DATA_KEY = "nocobaseEmbedReplacing";
 const PageElementsHolder = import_react.default.memo(
   import_react.default.forwardRef((props, ref) => {
     const [elements, patchElement] = (0, import_usePatchElement.default)();
@@ -60,8 +66,10 @@ const PageElementsHolder = import_react.default.memo(
 );
 function usePage() {
   const holderRef = import_react.default.useRef(null);
+  const globalEmbedActiveRef = import_react.default.useRef(null);
   const open = /* @__PURE__ */ __name((config, flowContext) => {
     var _a, _b, _c;
+    const parentEngine = flowContext == null ? void 0 : flowContext.engine;
     uuid += 1;
     const pageRef = import_react.default.createRef();
     let closeFunc;
@@ -69,7 +77,7 @@ function usePage() {
     const promise = new Promise((resolve) => {
       resolvePromise = resolve;
     });
-    const FooterComponent = /* @__PURE__ */ __name(({ children, ...props }) => {
+    const FooterComponent = /* @__PURE__ */ __name(({ children }) => {
       import_react.default.useEffect(() => {
         var _a2;
         (_a2 = pageRef.current) == null ? void 0 : _a2.setFooter(children);
@@ -80,7 +88,7 @@ function usePage() {
       }, [children]);
       return null;
     }, "FooterComponent");
-    const HeaderComponent = /* @__PURE__ */ __name(({ ...props }) => {
+    const HeaderComponent = /* @__PURE__ */ __name((props) => {
       import_react.default.useEffect(() => {
         var _a2;
         (_a2 = pageRef.current) == null ? void 0 : _a2.setHeader(props);
@@ -91,27 +99,69 @@ function usePage() {
       }, [props]);
       return null;
     }, "HeaderComponent");
-    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;
+    if (isGlobalEmbedContainer && globalEmbedActiveRef.current) {
+      try {
+        target.dataset[EMBED_REPLACING_DATA_KEY] = "1";
+        globalEmbedActiveRef.current.destroy();
+      } finally {
+        delete target.dataset[EMBED_REPLACING_DATA_KEY];
+        globalEmbedActiveRef.current = null;
+      }
+    }
+    const ctx = new import_flowContext.FlowContext();
+    const scopedEngine = (0, import_ViewScopedFlowEngine.createViewScopedEngine)(flowContext.engine);
+    const openerEngine = (0, import_viewEvents.resolveOpenerEngine)(parentEngine, scopedEngine);
+    ctx.defineProperty("engine", { value: scopedEngine });
+    ctx.addDelegate(scopedEngine.context);
+    if (inheritContext) {
+      ctx.addDelegate(flowContext);
+    } else {
+      ctx.addDelegate(flowContext.engine.context);
+    }
     const currentPage = {
       type: "embed",
-      inputArgs: config.inputArgs || {},
+      inputArgs: viewInputArgs,
       preventClose: !!config.preventClose,
-      destroy: /* @__PURE__ */ __name(() => {
-        var _a2;
-        return (_a2 = pageRef.current) == null ? void 0 : _a2.destroy();
+      destroy: /* @__PURE__ */ __name((result) => {
+        var _a2, _b2, _c2, _d, _e;
+        (_a2 = config.onClose) == null ? void 0 : _a2.call(config);
+        resolvePromise == null ? void 0 : resolvePromise(result);
+        (_b2 = pageRef.current) == null ? void 0 : _b2.destroy();
+        closeFunc == null ? void 0 : closeFunc();
+        if (isGlobalEmbedContainer) {
+          globalEmbedActiveRef.current = null;
+        }
+        const isReplacing = isGlobalEmbedContainer && target instanceof HTMLElement && ((_c2 = target.dataset) == null ? void 0 : _c2[EMBED_REPLACING_DATA_KEY]) === "1";
+        if (!isReplacing) {
+          const openerEmitter = openerEngine == null ? void 0 : openerEngine.emitter;
+          (0, import_viewEvents.bumpViewActivatedVersion)(openerEmitter);
+          (_e = openerEmitter == null ? void 0 : openerEmitter.emit) == null ? void 0 : _e.call(openerEmitter, import_viewEvents.VIEW_ACTIVATED_EVENT, { type: "embed", viewUid: (_d = currentPage == null ? void 0 : currentPage.inputArgs) == null ? void 0 : _d.viewUid });
+        }
+        scopedEngine.unlinkFromStack();
       }, "destroy"),
       update: /* @__PURE__ */ __name((newConfig) => {
         var _a2;
         return (_a2 = pageRef.current) == null ? void 0 : _a2.update(newConfig);
       }, "update"),
       close: /* @__PURE__ */ __name((result, force) => {
-        var _a2;
+        var _a2, _b2;
         if (preventClose && !force) {
           return;
         }
-        resolvePromise == null ? void 0 : resolvePromise(result);
-        (_a2 = pageRef.current) == null ? void 0 : _a2.destroy();
-        closeFunc == null ? void 0 : closeFunc();
+        if (config.triggerByRouter && ((_b2 = (_a2 = config.inputArgs) == null ? void 0 : _a2.navigation) == null ? void 0 : _b2.back)) {
+          config.inputArgs.navigation.back();
+          return;
+        }
+        currentPage.destroy(result);
       }, "close"),
       Header: HeaderComponent,
       Footer: FooterComponent,
@@ -123,27 +173,25 @@ function usePage() {
         var _a2;
         (_a2 = pageRef.current) == null ? void 0 : _a2.setHeader(header);
       }, "setHeader"),
-      navigation: (_a = config.inputArgs) == null ? void 0 : _a.navigation
+      navigation: (_a = config.inputArgs) == null ? void 0 : _a.navigation,
+      get record() {
+        return (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx);
+      }
     };
-    const ctx = new import_flowContext.FlowContext();
     ctx.defineProperty("view", {
       get: /* @__PURE__ */ __name(() => currentPage, "get"),
-      meta: (0, import_createViewMeta.createViewMeta)(ctx, () => currentPage),
-      resolveOnServer: /* @__PURE__ */ __name((p) => p === "record" || p.startsWith("record."), "resolveOnServer")
+      // 仅当访问关联字段或前端无本地记录数据时，才交给服务端解析
+      resolveOnServer: (0, import_variablesParams.createViewRecordResolveOnServer)(ctx, () => (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx))
     });
-    const scopedEngine = (0, import_ViewScopedFlowEngine.createViewScopedEngine)(flowContext.engine);
-    ctx.defineProperty("engine", { value: scopedEngine });
-    ctx.addDelegate(scopedEngine.context);
-    if (inheritContext) {
-      ctx.addDelegate(flowContext);
-    } else {
-      ctx.addDelegate(flowContext.engine.context);
-    }
+    (0, import_createViewMeta.registerPopupVariable)(ctx, currentPage);
     const PageWithContext = (0, import__.observer)(
       () => {
         var _a2, _b2, _c2, _d;
         const mountedRef = import_react.default.useRef(false);
-        const pageContent = typeof content === "function" ? content(currentPage, ctx) : content;
+        const pageContent = import_react.default.useMemo(
+          () => typeof content === "function" ? content(currentPage, ctx) : content,
+          []
+        );
         void ctx.themeToken;
         import_react.default.useEffect(() => {
           var _a3;
@@ -156,16 +204,11 @@ function usePage() {
         return /* @__PURE__ */ import_react.default.createElement(
           import_PageComponent.PageComponent,
           {
-            key: `page-${uuid}`,
             ref: pageRef,
             hidden: (_d = (_c2 = config.inputArgs) == null ? void 0 : _c2.hidden) == null ? void 0 : _d.value,
             ...restConfig,
-            afterClose: () => {
-              var _a3;
-              closeFunc == null ? void 0 : closeFunc();
-              (_a3 = config.onClose) == null ? void 0 : _a3.call(config);
-              resolvePromise == null ? void 0 : resolvePromise(config.result);
-              scopedEngine.unlinkFromStack();
+            onClose: () => {
+              currentPage.close(config.result);
             }
           },
           pageContent
@@ -175,12 +218,16 @@ function usePage() {
         displayName: "PageWithContext"
       }
     );
-    const page = /* @__PURE__ */ import_react.default.createElement(import_provider.FlowEngineProvider, { engine: scopedEngine }, /* @__PURE__ */ import_react.default.createElement(import_FlowContextProvider.FlowViewContextProvider, { context: ctx }, /* @__PURE__ */ import_react.default.createElement(PageWithContext, null)));
+    const key = (viewInputArgs == null ? void 0 : viewInputArgs.viewUid) || `page-${uuid}`;
+    const page = /* @__PURE__ */ import_react.default.createElement(import_provider.FlowEngineProvider, { key, engine: scopedEngine }, /* @__PURE__ */ import_react.default.createElement(import_FlowContextProvider.FlowViewContextProvider, { context: ctx }, /* @__PURE__ */ import_react.default.createElement(PageWithContext, null)));
     if (target && target instanceof HTMLElement) {
-      closeFunc = (_b = holderRef.current) == null ? void 0 : _b.patchElement(import_react_dom.default.createPortal(page, target));
+      closeFunc = (_b = holderRef.current) == null ? void 0 : _b.patchElement(import_react_dom.default.createPortal(page, target, key));
     } else {
       closeFunc = (_c = holderRef.current) == null ? void 0 : _c.patchElement(page);
     }
+    if (isGlobalEmbedContainer) {
+      globalEmbedActiveRef.current = { destroy: currentPage.destroy };
+    }
     return Object.assign(promise, currentPage);
   }, "open");
   const api = import_react.default.useMemo(() => ({ open }), []);
@@ -189,5 +236,7 @@ function usePage() {
 __name(usePage, "usePage");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  EMBED_REPLACING_DATA_KEY,
+  GLOBAL_EMBED_CONTAINER_ID,
   usePage
 });

package/lib/views/usePopover.js

@@ -68,8 +68,11 @@ const PopoverComponent = React.forwardRef(({ afterClose, content, placement, rec
       destroyTooltipOnHide: true,
       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 == null ? void 0 : afterClose();