@nocobase/client-v2 2.1.11 → 2.2.0-alpha.2

package/src/flow/actions/__tests__/openView.defineProps.route.test.tsx

@@ -9,6 +9,7 @@
 
 import React from 'react';
 import { describe, it, expect, vi } from 'vitest';
+import { RUNJS_OPEN_VIEW_ROUTE_STATE } from '@nocobase/flow-engine';
 import { openView } from '../openView';
 import { FlowPage } from '../../FlowPage';
 
@@ -50,6 +51,27 @@ describe('openView action - route mode defineProperties/defineMethods', () => {
     return { ctx, engine };
   };
 
+  const createFirstStageCtx = (inputArgs: Record<PropertyKey, unknown>) => {
+    const navigateTo = vi.fn();
+    const ctx: any = {
+      inputArgs,
+      engine: { context: { themeToken: { colorBgLayout: '#fff' } } },
+      model: {
+        uid: 'popup-uid',
+        context: {
+          inputArgs: {},
+          defineProperty: vi.fn(),
+        },
+        flowEngine: { context: { themeToken: { colorBgLayout: '#fff' } } },
+      },
+      view: {
+        navigation: { navigateTo },
+      },
+    };
+
+    return { ctx, navigateTo };
+  };
+
   it('injects defineProperties/defineMethods on onModelLoaded even when not present in current inputArgs', async () => {
     const { ctx } = createRouteManagedCtx();
 
@@ -149,4 +171,86 @@ describe('openView action - route mode defineProperties/defineMethods', () => {
     const defineMethodCalls = pageModelContext.defineMethod.mock.calls.map((c: any[]) => c[0]);
     expect(defineMethodCalls).toContain('pong');
   });
+
+  it('adds route state to first-stage navigation only for RunJS ctx.openView calls', async () => {
+    const { ctx, navigateTo } = createFirstStageCtx({
+      mode: 'dialog',
+      size: 'large',
+      [RUNJS_OPEN_VIEW_ROUTE_STATE]: { mode: 'dialog', size: 'large' },
+    });
+
+    await openView.handler(ctx, { mode: 'drawer', size: 'medium', navigation: true });
+
+    expect(navigateTo).toHaveBeenCalledWith({
+      viewUid: 'popup-uid',
+      filterByTk: undefined,
+      sourceId: undefined,
+      tabUid: undefined,
+      openViewRouteState: { mode: 'dialog', size: 'large' },
+    });
+  });
+
+  it('normalizes first-stage RunJS route state mode on mobile layout', async () => {
+    const { ctx, navigateTo } = createFirstStageCtx({
+      isMobileLayout: true,
+      mode: 'dialog',
+      size: 'large',
+      [RUNJS_OPEN_VIEW_ROUTE_STATE]: { mode: 'dialog', size: 'large' },
+    });
+
+    await openView.handler(ctx, { mode: 'drawer', size: 'medium', navigation: true });
+
+    expect(navigateTo).toHaveBeenCalledWith({
+      viewUid: 'popup-uid',
+      filterByTk: undefined,
+      sourceId: undefined,
+      tabUid: undefined,
+      openViewRouteState: { mode: 'embed', size: 'large' },
+    });
+  });
+
+  it('uses route replay mode and size before persisted openView defaults', async () => {
+    const { ctx } = createRouteManagedCtx();
+    ctx.inputArgs.mode = 'dialog';
+    ctx.inputArgs.size = 'large';
+
+    await openView.handler(ctx, { mode: 'drawer', size: 'medium', navigation: true });
+
+    expect(ctx.viewer.open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'dialog',
+        width: '80%',
+      }),
+    );
+  });
+
+  it('uses decoded openView route state during route replay', async () => {
+    const { ctx } = createRouteManagedCtx();
+    ctx.inputArgs.openViewRouteState = { mode: 'dialog', size: 'large' };
+
+    await openView.handler(ctx, { mode: 'drawer', size: 'medium', navigation: true });
+
+    expect(ctx.viewer.open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'dialog',
+        width: '80%',
+      }),
+    );
+  });
+
+  it('keeps first-stage navigation unchanged for non-RunJS openView calls', async () => {
+    const { ctx, navigateTo } = createFirstStageCtx({
+      mode: 'dialog',
+      size: 'large',
+    });
+
+    await openView.handler(ctx, { mode: 'drawer', size: 'medium', navigation: true });
+
+    expect(navigateTo).toHaveBeenCalledWith({
+      viewUid: 'popup-uid',
+      filterByTk: undefined,
+      sourceId: undefined,
+      tabUid: undefined,
+    });
+  });
 });

package/src/flow/actions/afterSuccess.tsx

@@ -7,13 +7,152 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { defineAction, tExpr } from '@nocobase/flow-engine';
+import {
+  FlowContext,
+  createRecordMetaFactory,
+  createRecordResolveOnServerWithLocal,
+  defineAction,
+  tExpr,
+  useFlowSettingsContext,
+  type Collection,
+  type FlowRuntimeContext,
+  type MetaTreeNode,
+  type PropertyMetaFactory,
+} from '@nocobase/flow-engine';
 import { isURL } from '@nocobase/utils/client';
-import { TextAreaWithContextSelector } from '../components/TextAreaWithContextSelector';
+import React, { useMemo } from 'react';
+import {
+  TextAreaWithContextSelector,
+  type TextAreaWithContextSelectorProps,
+} from '../components/TextAreaWithContextSelector';
+
+type ResponseRecordPlainStepContext = {
+  steps?: FlowRuntimeContext['steps'];
+};
+
+type ResponseRecordFlowDefinitionContext = {
+  flowKey?: string;
+  model?: {
+    getFlow?: (flowKey: string) => { steps?: Record<string, unknown> } | undefined;
+  };
+};
+
+type ResponseRecordContext = FlowContext &
+  ResponseRecordPlainStepContext & {
+    blockModel?: { collection?: Collection };
+    collection?: Collection;
+    model?: FlowRuntimeContext['model'] & { collection?: Collection };
+  };
+
+function getResponseRecordSteps(ctx: FlowContext | ResponseRecordPlainStepContext): FlowRuntimeContext['steps'] {
+  return 'steps' in ctx ? ctx.steps || {} : {};
+}
+
+export function getAfterSuccessResponseRecord(ctx: FlowContext | ResponseRecordPlainStepContext) {
+  const steps = getResponseRecordSteps(ctx);
+  const preferredStepKeys = ['saveResource', 'submit', 'request', 'apply', 'save'];
+
+  for (const stepKey of preferredStepKeys) {
+    if (Object.prototype.hasOwnProperty.call(steps, stepKey) && steps[stepKey]?.result != null) {
+      return steps[stepKey].result;
+    }
+  }
+
+  const results = Object.entries(steps)
+    .filter(([stepKey, step]) => stepKey !== 'afterSuccess' && step?.result != null)
+    .map(([, step]) => step.result);
+  return results[results.length - 1];
+}
+
+function getResponseRecordMeta(ctx: ResponseRecordContext): PropertyMetaFactory | undefined {
+  if (!hasResponseRecordSource(ctx)) {
+    return;
+  }
+  const collectionAccessor = getResponseRecordCollectionAccessor(ctx);
+  if (!collectionAccessor()) {
+    return;
+  }
+  return createRecordMetaFactory(collectionAccessor, ctx.t('Response record'), () => {
+    const collection = collectionAccessor();
+    const record = getAfterSuccessResponseRecord(ctx);
+    if (!collection || !record) {
+      return;
+    }
+    try {
+      const filterByTk = collection.getFilterByTK(record);
+      if (filterByTk == null) {
+        return;
+      }
+      return {
+        collection: collection.name,
+        dataSourceKey: collection.dataSourceKey || 'main',
+        filterByTk,
+      };
+    } catch (error) {
+      return;
+    }
+  });
+}
+
+function hasResponseRecordSource(ctx: FlowContext | ResponseRecordPlainStepContext) {
+  if (Object.prototype.hasOwnProperty.call(getResponseRecordSteps(ctx), 'saveResource')) {
+    return true;
+  }
+
+  const { model, flowKey } = ctx as ResponseRecordFlowDefinitionContext;
+  if (!model || typeof model.getFlow !== 'function' || !flowKey) {
+    return false;
+  }
+
+  return Object.prototype.hasOwnProperty.call(model.getFlow(flowKey)?.steps || {}, 'saveResource');
+}
+
+function getResponseRecordCollectionAccessor(ctx: ResponseRecordContext) {
+  return () => ctx.blockModel?.collection || ctx.collection || ctx.model?.collection || null;
+}
+
+export function getMetaTreeWithResponseRecord(ctx: FlowRuntimeContext): MetaTreeNode[] {
+  const responseRecordMeta = getResponseRecordMeta(ctx);
+  if (!responseRecordMeta) {
+    return ctx.getPropertyMetaTree?.() || [];
+  }
+
+  const scoped = new FlowContext();
+  scoped.addDelegate(ctx);
+  scoped.defineProperty('responseRecord', {
+    get: () => getAfterSuccessResponseRecord(ctx),
+    cache: false,
+    resolveOnServer: createRecordResolveOnServerWithLocal(getResponseRecordCollectionAccessor(ctx), () =>
+      getAfterSuccessResponseRecord(ctx),
+    ),
+    meta: responseRecordMeta,
+  });
+  return scoped.getPropertyMetaTree();
+}
+
+function AfterSuccessRedirectTextArea(props: TextAreaWithContextSelectorProps) {
+  const flowCtx = useFlowSettingsContext();
+  const metaTree = useMemo(() => () => getMetaTreeWithResponseRecord(flowCtx), [flowCtx]);
+
+  return <TextAreaWithContextSelector {...props} metaTree={metaTree} />;
+}
 
 export const afterSuccess = defineAction({
   name: 'afterSuccess',
   title: tExpr('After successful submission'),
+  defineProperties(ctx) {
+    const responseRecordMeta = getResponseRecordMeta(ctx);
+    return {
+      responseRecord: {
+        get: () => getAfterSuccessResponseRecord(ctx),
+        cache: false,
+        resolveOnServer: createRecordResolveOnServerWithLocal(getResponseRecordCollectionAccessor(ctx), () =>
+          getAfterSuccessResponseRecord(ctx),
+        ),
+        ...(responseRecordMeta ? { meta: responseRecordMeta } : {}),
+      },
+    };
+  },
   uiSchema: {
     successMessage: {
       type: 'string',
@@ -46,7 +185,7 @@ export const afterSuccess = defineAction({
       type: 'string',
       title: tExpr('Link'),
       'x-decorator': 'FormItem',
-      'x-component': TextAreaWithContextSelector,
+      'x-component': AfterSuccessRedirectTextArea,
       'x-reactions': {
         dependencies: ['actionAfterSuccess'],
         fulfill: {

package/src/flow/actions/customVariable.tsx

@@ -12,7 +12,6 @@ import {
   defineAction,
   isRunJSValue,
   normalizeRunJSValue,
-  runjsWithSafeGlobals,
   tExpr,
   type RunJSValue,
   useFlowContext,
@@ -43,7 +42,7 @@ export const customVariable = defineAction({
       if (variable.type === 'runjs') {
         const getFunction = async () => {
           const { code, version } = normalizeRunJSValue(variable.runjs);
-          return runjsWithSafeGlobals(ctx, code, { version });
+          return ctx.runjs(code, undefined, { version });
         };
         const metaFunction = () => ({
           title: variable.title,

package/src/flow/actions/index.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-export * from './afterSuccess';
+export { afterSuccess } from './afterSuccess';
 export * from './confirm';
 export * from './dataScope';
 export * from './openView';

package/src/flow/actions/linkageRules.tsx

@@ -16,13 +16,9 @@ import {
   FlowRuntimeContext,
   useFlowContext,
   useFlowEngine,
-  createSafeWindow,
-  createSafeDocument,
-  createSafeNavigator,
   observer,
   isRunJSValue,
   normalizeRunJSValue,
-  runjsWithSafeGlobals,
 } from '@nocobase/flow-engine';
 import { evaluateConditions, FilterGroupType, removeInvalidFilterItems } from '@nocobase/utils/client';
 import React from 'react';
@@ -492,7 +488,7 @@ async function resolveLinkageAssignRuntimeValue(ctx: FlowContext, rawValue: any)
 
   try {
     const { code, version } = normalizeRunJSValue(rawValue);
-    const ret = await runjsWithSafeGlobals(ctx, code, { version });
+    const ret = await ctx.runjs(code, undefined, { version });
     if (!ret?.success) {
       return SKIP_RUNJS_ASSIGN_VALUE;
     }
@@ -1397,8 +1393,7 @@ export const linkageRunjs = defineAction({
     }
 
     try {
-      const navigator = createSafeNavigator();
-      await ctx.runjs(script, { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator });
+      await ctx.runjs(script);
     } catch (error) {
       console.error('Script execution error:', error);
       // 可以选择显示错误信息给用户

package/src/flow/actions/openView.tsx

@@ -7,7 +7,15 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { defineAction, tExpr, FlowModelContext, FlowModel, FlowExitAllException } from '@nocobase/flow-engine';
+import {
+  defineAction,
+  tExpr,
+  FlowModelContext,
+  FlowModel,
+  FlowExitAllException,
+  createOpenViewRouteState,
+  RUNJS_OPEN_VIEW_ROUTE_STATE,
+} from '@nocobase/flow-engine';
 import React from 'react';
 import { FlowPage } from '../FlowPage';
 import { PageModel, RootPageModel } from '../models';
@@ -291,8 +299,32 @@ export const openView = defineAction({
         ? (inputArgs as any).associationName
         : (params as any)?.associationName;
     const mergedTabUid = typeof inputArgs.tabUid !== 'undefined' ? inputArgs.tabUid : params.tabUid;
-    // 移动端中只需要显示子页面
-    const openMode = ctx.inputArgs?.isMobileLayout ? 'embed' : ctx.inputArgs?.mode || params.mode || 'drawer';
+    const hasRunJSOpenViewRouteState = Object.prototype.hasOwnProperty.call(inputArgs, RUNJS_OPEN_VIEW_ROUTE_STATE);
+    const runJSOpenViewRouteStateInput = (inputArgs as Record<PropertyKey, unknown>)[RUNJS_OPEN_VIEW_ROUTE_STATE];
+    const runJSOpenViewRouteState = hasRunJSOpenViewRouteState
+      ? createOpenViewRouteState(
+          runJSOpenViewRouteStateInput && typeof runJSOpenViewRouteStateInput === 'object'
+            ? (runJSOpenViewRouteStateInput as { mode?: unknown; size?: unknown })
+            : {
+                mode: inputArgs.mode,
+                size: inputArgs.size,
+              },
+        )
+      : undefined;
+    const replayOpenViewRouteStateInput = (inputArgs as { openViewRouteState?: unknown }).openViewRouteState;
+    const replayOpenViewRouteState =
+      replayOpenViewRouteStateInput && typeof replayOpenViewRouteStateInput === 'object'
+        ? createOpenViewRouteState(replayOpenViewRouteStateInput as { mode?: unknown; size?: unknown })
+        : undefined;
+    const runtimeOpenViewRouteState = runJSOpenViewRouteState || replayOpenViewRouteState;
+    // 移动端中只需要显示子页面。本次 dispatch 参数优先于持久化默认值。
+    const openMode = ctx.inputArgs?.isMobileLayout
+      ? 'embed'
+      : runtimeOpenViewRouteState?.mode || ctx.inputArgs?.mode || params.mode || 'drawer';
+    const effectiveRunJSOpenViewRouteState =
+      runJSOpenViewRouteState && ctx.inputArgs?.isMobileLayout
+        ? createOpenViewRouteState({ ...runJSOpenViewRouteState, mode: openMode })
+        : runJSOpenViewRouteState;
     let navigation = typeof inputArgs.navigation !== 'undefined' ? inputArgs.navigation : params.navigation;
 
     // 传递了上下文就必须禁用路由，否则下次路由打开会缺少上下文
@@ -313,6 +345,7 @@ export const openView = defineAction({
           sourceId: mergedSourceId,
           tabUid: mergedTabUid,
           viewUid: ctx.model.context?.inputArgs?.viewUid || ctx.model.uid,
+          ...(effectiveRunJSOpenViewRouteState ? { openViewRouteState: effectiveRunJSOpenViewRouteState } : {}),
         } as Record<string, unknown>;
         const pendingView = {
           type: pendingType,
@@ -328,6 +361,7 @@ export const openView = defineAction({
           filterByTk: mergedFilterByTk,
           sourceId: mergedSourceId,
           tabUid: mergedTabUid,
+          ...(effectiveRunJSOpenViewRouteState ? { openViewRouteState: effectiveRunJSOpenViewRouteState } : {}),
         };
         ctx.view.navigation.navigateTo(nextView);
         return;
@@ -373,7 +407,7 @@ export const openView = defineAction({
 
     const pageModelClass =
       ctx.inputArgs.pageModelClass || params.pageModelClass || ctx.layout?.childPageModelClass || 'ChildPageModel';
-    const size = ctx.inputArgs.size || params.size || 'medium';
+    const size = runtimeOpenViewRouteState?.size || ctx.inputArgs.size || params.size || 'medium';
     let pageModelUid: string | null = null;
     let pageModelRef: FlowModel | null = null;
 

package/src/flow/actions/runjs.tsx

@@ -7,14 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import {
-  ActionScene,
-  defineAction,
-  tExpr,
-  createSafeWindow,
-  createSafeDocument,
-  createSafeNavigator,
-} from '@nocobase/flow-engine';
+import { ActionScene, defineAction, tExpr } from '@nocobase/flow-engine';
 import { CodeEditor } from '../components/code-editor';
 
 export const runjs = defineAction({
@@ -38,11 +31,6 @@ export const runjs = defineAction({
     // 如果是 URL 触发的，则不执行代码
     if (ctx.inputArgs?.navigation) return;
 
-    const navigator = createSafeNavigator();
-    return ctx.runjs(params.code, {
-      window: createSafeWindow({ navigator }),
-      document: createSafeDocument(),
-      navigator,
-    });
+    return ctx.runjs(params.code);
   },
 });

package/src/flow/admin-shell/BaseLayoutModel.tsx

@@ -8,7 +8,13 @@
  */
 
 import { define, observable } from '@formily/reactive';
-import { parsePathnameToViewParams, type FlowEngine, FlowModel, type ViewParam } from '@nocobase/flow-engine';
+import {
+  decodeOpenViewRouteState,
+  parsePathnameToViewParams,
+  type FlowEngine,
+  FlowModel,
+  type ViewParam,
+} from '@nocobase/flow-engine';
 import {
   BaseLayoutRouteCoordinator,
   type BaseLayoutRouteCoordinatorOptions,
@@ -116,20 +122,36 @@ const isStandardLayoutRelativePath = (relativePath: string) => {
   }
 
   let i = 1;
+  let currentViewUid = segments[0];
   while (i < segments.length) {
     const segment = segments[i];
+
     if (segment === 'view') {
       if (!segments[i + 1]) {
         return false;
       }
+      currentViewUid = segments[i + 1];
+      i += 2;
+      continue;
+    }
+
+    if (segment === 'opts') {
+      if (!segments[i + 1] || !decodeOpenViewRouteState(currentViewUid, segments[i + 1])) {
+        return false;
+      }
+      i += 2;
+      continue;
+    }
+
+    if (isKnownViewParamName(segment) && segments[i + 1]) {
       i += 2;
       continue;
     }
 
-    if (!isKnownViewParamName(segment) || !segments[i + 1]) {
+    if (!segments[i + 1]) {
       return false;
     }
-    i += 2;
+    return false;
   }
 
   return true;

package/src/flow/admin-shell/BaseLayoutRouteCoordinator.ts

@@ -272,7 +272,7 @@ export class BaseLayoutRouteCoordinator {
           runtime.viewState[getKey(viewItem)]?.destroy?.(true);
           delete runtime.viewState[getKey(viewItem)];
         });
-        updateViewListHidden(viewList);
+        updateViewListHidden(viewList, !!this.layoutContext?.isMobileLayout);
       }
 
       if (viewsToOpen.length) {
@@ -299,7 +299,7 @@ export class BaseLayoutRouteCoordinator {
     }
 
     if (runtime.meta.active) {
-      updateViewListHidden(viewList);
+      updateViewListHidden(viewList, !!this.layoutContext?.isMobileLayout);
       return;
     }
 
@@ -390,6 +390,7 @@ export class BaseLayoutRouteCoordinator {
       openViewParams?.associationName && !hasUsableSourceId(viewItem.params.sourceId)
         ? null
         : openViewParams?.associationName;
+    const openViewRouteState = viewItem.params.openViewRouteState;
     const openerUids = viewList.slice(0, viewItem.index).map((item) => item.params.viewUid);
     const navigation = new ViewNavigation(
       this.flowEngine.context,
@@ -408,6 +409,8 @@ export class BaseLayoutRouteCoordinator {
       deactivateRef,
       openerUids,
       ...viewItem.params,
+      ...(openViewRouteState?.mode ? { mode: openViewRouteState.mode } : {}),
+      ...(openViewRouteState?.size ? { size: openViewRouteState.size } : {}),
       pageActive: runtime.meta.active,
       activationControlledByLayout: true,
       navigation,

package/src/flow/admin-shell/__tests__/AdminLayoutRouteCoordinator.test.ts

@@ -121,6 +121,19 @@ describe('AdminLayoutRouteCoordinator', () => {
     });
   });
 
+  it('passes RunJS openView route state as runtime mode and size during route replay', () => {
+    const { dispatchEvent } = setupRouteReplay({
+      openViewRouteState: { mode: 'dialog', size: 'large' },
+    });
+
+    expect(dispatchEvent.mock.calls[0][1]).toMatchObject({
+      mode: 'dialog',
+      size: 'large',
+      openViewRouteState: { mode: 'dialog', size: 'large' },
+      triggerByRouter: true,
+    });
+  });
+
   it('uses layout content element before route page placeholder as view target', () => {
     const engine = new FlowEngine();
     engine.registerModels({ RouteModel });

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -42,6 +42,7 @@ import {
   FLOW_SETTINGS_PREFERENCE_STORAGE_KEY,
   readFlowSettingsPreference,
 } from './flowSettingsPreference';
+import { joinAdminLayoutRoutePath, type AdminLayoutRoutePathLike } from './resolveAdminRouteRuntimeTarget';
 import { useAppListRender } from './AppListRender';
 
 const className1 = css`
@@ -314,25 +315,37 @@ const DesignerButtonMenuItem: FC<{ item: AdminLayoutMenuNode; fallbackParentRout
   );
 };
 
-const matchesRoutePath = (route: NocoBaseDesktopRoute | undefined, pathname: string): boolean => {
+const matchesRoutePath = (
+  route: NocoBaseDesktopRoute | undefined,
+  pathname: string,
+  layout?: AdminLayoutRoutePathLike | null,
+): boolean => {
   if (!route) {
     return false;
   }
 
   const candidates = [
-    route.id != null ? `/admin/${route.id}` : null,
-    route.schemaUid ? `/admin/${route.schemaUid}` : null,
+    route.id != null ? joinAdminLayoutRoutePath(layout, route.id) : null,
+    route.schemaUid ? joinAdminLayoutRoutePath(layout, route.schemaUid) : null,
   ].filter(Boolean) as string[];
 
   if (candidates.some((candidate) => pathname === candidate || pathname.startsWith(`${candidate}/`))) {
     return true;
   }
 
-  return Array.isArray(route.children) ? route.children.some((child) => matchesRoutePath(child, pathname)) : false;
+  return Array.isArray(route.children)
+    ? route.children.some((child) => matchesRoutePath(child, pathname, layout))
+    : false;
 };
 
-const findSelectedTopGroupRoute = (routes: NocoBaseDesktopRoute[], pathname: string) => {
-  return routes.find((route) => route.type === NocoBaseDesktopRouteType.group && matchesRoutePath(route, pathname));
+const findSelectedTopGroupRoute = (
+  routes: NocoBaseDesktopRoute[],
+  pathname: string,
+  layout?: AdminLayoutRoutePathLike | null,
+) => {
+  return routes.find(
+    (route) => route.type === NocoBaseDesktopRouteType.group && matchesRoutePath(route, pathname, layout),
+  );
 };
 
 const renderMenuNodeWithModel = (
@@ -376,6 +389,11 @@ export const AdminLayoutComponent = observer((props: any) => {
   const { token } = antdTheme.useToken();
   const customToken = token as CustomToken;
   const isMobileLayout = !!adminLayoutModel?.isMobileLayout;
+  const adminLayoutRoutePath = adminLayoutModel?.layout?.routePath;
+  const adminLayoutRoutePathLike = useMemo<AdminLayoutRoutePathLike | undefined>(
+    () => (adminLayoutRoutePath ? { routePath: adminLayoutRoutePath } : undefined),
+    [adminLayoutRoutePath],
+  );
   const menuRouteRefreshVersion = adminLayoutModel?.menuRouteRefreshVersion || 0;
   const isMobileSider = isMobileLayout;
   const [collapsed, setCollapsed] = useState(isMobileSider);
@@ -403,8 +421,8 @@ export const AdminLayoutComponent = observer((props: any) => {
     [adminLayoutModel],
   );
   const selectedTopGroupRoute = useMemo(
-    () => findSelectedTopGroupRoute(allAccessRoutes, location.pathname),
-    [allAccessRoutes, location.pathname],
+    () => findSelectedTopGroupRoute(allAccessRoutes, location.pathname, adminLayoutRoutePathLike),
+    [adminLayoutRoutePathLike, allAccessRoutes, location.pathname],
   );
 
   const handleMenuDragEnd = useCallback(
@@ -458,6 +476,7 @@ export const AdminLayoutComponent = observer((props: any) => {
 
   useEffect(() => {
     const routeRepository = flowEngine.context.routeRepository;
+    const deactivateLayout = routeRepository?.activateLayout?.(adminLayoutModel?.layout);
     const subscriber = () => {
       const updatedRoutes = routeRepository?.listAccessible() || [];
       setAllAccessRoutes(updatedRoutes);
@@ -470,8 +489,9 @@ export const AdminLayoutComponent = observer((props: any) => {
 
     return () => {
       routeRepository?.unsubscribe(subscriber);
+      deactivateLayout?.();
     };
-  }, [flowEngine]);
+  }, [adminLayoutModel, adminLayoutModel?.layout?.uid, flowEngine]);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -697,7 +717,11 @@ export const AdminLayoutComponent = observer((props: any) => {
                     <SetIsMobileLayout isMobile={isMobile} model={adminLayoutModel}>
                       <ConfigProvider theme={isMobile ? mobileTheme : theme}>
                         <GlobalStyle />
-                        <AdminLayoutContent onContentElementChange={handleLayoutContentElementChange} />
+                        <AdminLayoutContent
+                          designable={designable}
+                          layout={adminLayoutModel?.layout}
+                          onContentElementChange={handleLayoutContentElementChange}
+                        />
                       </ConfigProvider>
                     </SetIsMobileLayout>
                   );