@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.3

package/src/flow/actions/linkageRulesFormValueRefresh.ts

@@ -15,17 +15,29 @@ import {
   isRunJSValue,
 } from '@nocobase/flow-engine';
 import _ from 'lodash';
-import { namePathToPathKey, parsePathString, pathKeyToNamePath } from '../models/blocks/form/value-runtime/path';
+import { namePathToPathKey } from '../models/blocks/form/value-runtime/path';
 import {
   collectStaticDepsFromRunJSValue,
   collectStaticDepsFromTemplateValue,
   recordDep,
   type DepCollector,
 } from '../models/blocks/form/value-runtime/deps';
+import {
+  buildItemListRootPath,
+  buildItemRowPath,
+  dedupeNamePaths,
+  findFormValueChangeSource,
+  getChangedPathsFromPayload,
+  getFieldIndexEntriesFromContext,
+  isNamePathPrefix,
+  isSameNamePath,
+  minimizeNamePaths,
+  parseDependencyPath,
+  parsePathKey,
+  type NamePath,
+} from '../utils/formValueDeps';
 import { linkageRulesRefresh } from './linkageRulesRefresh';
 
-type NamePath = Array<string | number>;
-
 type LinkageRefreshDeps = {
   wildcard: boolean;
   valuePaths: NamePath[];
@@ -40,75 +52,11 @@ type LinkageRefreshBinding = {
   dispose: () => void;
 };
 
-type FieldIndexEntry = {
-  name: string;
-  index: number;
-};
-
 const FORM_VALUES_CHANGE_EVENT = 'formValuesChange';
 const LINKAGE_REFRESH_BINDINGS_KEY = '__formValueDrivenLinkageRefreshBindings';
 
-function isSameNamePath(a: NamePath, b: NamePath) {
-  return a.length === b.length && a.every((seg, index) => seg === b[index]);
-}
-
-function isNamePathPrefix(prefix: NamePath, path: NamePath) {
-  if (prefix.length > path.length) return false;
-  return prefix.every((seg, index) => seg === path[index]);
-}
-
-function dedupeNamePaths(paths: NamePath[]) {
-  const byKey = new Map<string, NamePath>();
-  for (const path of paths) {
-    if (!path?.length) continue;
-    byKey.set(namePathToPathKey(path), path);
-  }
-  return Array.from(byKey.values());
-}
-
-function minimizeValueNamePaths(paths: NamePath[]) {
-  const deduped = dedupeNamePaths(paths);
-  return deduped.filter((path, index) => {
-    return !deduped.some((other, otherIndex) => otherIndex !== index && isNamePathPrefix(path, other));
-  });
-}
-
-function parseFieldIndexEntries(fieldIndex: unknown): FieldIndexEntry[] {
-  const arr = Array.isArray(fieldIndex) ? fieldIndex : [];
-  const entries: FieldIndexEntry[] = [];
-  for (const it of arr) {
-    if (typeof it !== 'string') continue;
-    const [name, indexStr] = it.split(':');
-    const index = Number(indexStr);
-    if (!name || Number.isNaN(index)) continue;
-    entries.push({ name, index });
-  }
-  return entries;
-}
-
-function getFieldIndexEntriesFromContext(ctx: any): FieldIndexEntry[] {
-  return parseFieldIndexEntries(ctx?.model?.context?.fieldIndex ?? ctx?.fieldIndex);
-}
-
-function buildItemRowPath(entries: FieldIndexEntry[], parentDepth: number): NamePath | null {
-  const targetIndex = entries.length - 1 - parentDepth;
-  if (targetIndex < 0) return null;
-
-  const out: NamePath = [];
-  for (let i = 0; i <= targetIndex; i++) {
-    out.push(entries[i].name, entries[i].index);
-  }
-  return out;
-}
-
-function buildItemListRootPath(entries: FieldIndexEntry[], parentDepth: number): NamePath | null {
-  const rowPath = buildItemRowPath(entries, parentDepth);
-  if (!rowPath?.length) return null;
-  return rowPath.slice(0, -1);
-}
-
 function resolveItemDependencyPath(ctx: FlowContext, depPath: NamePath): LinkageRefreshDeps {
-  const entries = getFieldIndexEntriesFromContext(ctx as any);
+  const entries = getFieldIndexEntriesFromContext(ctx);
   if (!entries.length) {
     return { wildcard: true, valuePaths: [], structuralPaths: [] };
   }
@@ -171,8 +119,7 @@ function addRunjsUsageToCollector(script: string, collector: DepCollector) {
           collector.wildcard = true;
           continue;
         }
-        const segs = parsePathString(String(subPath)).filter((seg) => typeof seg !== 'object') as NamePath;
-        recordDep(segs, collector);
+        recordDep(parseDependencyPath(String(subPath)), collector);
         continue;
       }
       if (varName === 'item') {
@@ -233,13 +180,13 @@ function collectLinkageRefreshDeps(ctx: FlowContext, params: any): LinkageRefres
         wildcard = true;
         continue;
       }
-      valuePaths.push(pathKeyToNamePath(inner));
+      valuePaths.push(parsePathKey(inner));
       continue;
     }
 
     if (depKey === 'ctx:item' || depKey.startsWith('ctx:item:')) {
       const subPath = depKey === 'ctx:item' ? '' : depKey.slice('ctx:item:'.length);
-      const depPath = subPath ? (parsePathString(subPath).filter((seg) => typeof seg !== 'object') as NamePath) : [];
+      const depPath = subPath ? parseDependencyPath(subPath) : [];
       const resolved = resolveItemDependencyPath(ctx, depPath);
       wildcard ||= resolved.wildcard;
       valuePaths.push(...resolved.valuePaths);
@@ -249,7 +196,7 @@ function collectLinkageRefreshDeps(ctx: FlowContext, params: any): LinkageRefres
 
   return {
     wildcard,
-    valuePaths: minimizeValueNamePaths(valuePaths),
+    valuePaths: minimizeNamePaths(valuePaths),
     structuralPaths: dedupeNamePaths(structuralPaths),
   };
 }
@@ -258,44 +205,9 @@ function hasLinkageRefreshDeps(deps: LinkageRefreshDeps) {
   return deps.wildcard || deps.valuePaths.length > 0 || deps.structuralPaths.length > 0;
 }
 
-function getChangedPathsFromPayload(payload: any): NamePath[] {
-  const rawChangedPaths = Array.isArray(payload?.changedPaths) ? payload.changedPaths : [];
-  const out: NamePath[] = [];
-
-  for (const path of rawChangedPaths) {
-    if (Array.isArray(path)) {
-      if (path.length === 1 && typeof path[0] === 'string') {
-        const namePath = pathKeyToNamePath(path[0]);
-        if (namePath.length) out.push(namePath);
-        continue;
-      }
-      const segs = path.filter((seg) => typeof seg === 'string' || typeof seg === 'number') as NamePath;
-      if (segs.length) out.push(segs);
-      continue;
-    }
-    if (typeof path === 'string' && path) {
-      out.push(pathKeyToNamePath(path));
-    }
-  }
-
-  if (out.length) {
-    return out;
-  }
-
-  const changedValues = payload?.changedValues;
-  if (changedValues && typeof changedValues === 'object') {
-    for (const key of Object.keys(changedValues)) {
-      const namePath = pathKeyToNamePath(key);
-      if (namePath.length) out.push(namePath);
-    }
-  }
-
-  return out;
-}
-
 function linkageRefreshDepsMatchPayload(deps: LinkageRefreshDeps, payload: any) {
   if (!hasLinkageRefreshDeps(deps)) return false;
-  const changedPaths = getChangedPathsFromPayload(payload);
+  const changedPaths = getChangedPathsFromPayload(payload, { includeArrayChangedValues: true });
   if (deps.wildcard) return true;
   if (!changedPaths.length) return true;
 
@@ -330,28 +242,8 @@ function getLinkageRefreshBindings(model: any): Map<string, LinkageRefreshBindin
   return (model[LINKAGE_REFRESH_BINDINGS_KEY] ||= new Map<string, LinkageRefreshBinding>());
 }
 
-function isFormBlockForLinkageRefresh(model: any) {
-  if (!model || typeof model !== 'object') return false;
-  if (!model.emitter || typeof model.emitter.on !== 'function' || typeof model.emitter.off !== 'function') return false;
-  return !!model.formValueRuntime || !!model.context?.form || typeof model.context?.setFormValues === 'function';
-}
-
 function findFormBlockForLinkageRefresh(ctx: FlowContext): any | null {
-  const candidates: any[] = [];
-  const push = (model: any) => {
-    if (model && !candidates.includes(model)) candidates.push(model);
-  };
-
-  push((ctx.model as any)?.context?.blockModel);
-  push(ctx.model);
-
-  let cursor: any = (ctx.model as any)?.parent;
-  while (cursor) {
-    push(cursor);
-    cursor = cursor?.parent;
-  }
-
-  return candidates.find(isFormBlockForLinkageRefresh) || null;
+  return findFormValueChangeSource(ctx) as any;
 }
 
 function disposeLinkageRefreshBinding(model: any, key: string) {

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/actions/validation.tsx

@@ -10,6 +10,56 @@
 import { defineAction, jioToJoiSchema, tExpr } from '@nocobase/flow-engine';
 import { FieldValidation } from '../../flow-compat';
 
+type ValidationType = 'string' | 'number' | 'array' | 'boolean' | 'any';
+
+interface ValidationRule {
+  name: string;
+  args?: any;
+}
+
+interface ValidationData {
+  type: ValidationType;
+  rules?: ValidationRule[];
+}
+
+interface ValidationContext {
+  model: {
+    props: {
+      label?: string;
+    };
+  };
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+function buildValidationRules(ctx: ValidationContext, validation: ValidationData) {
+  const rules = [];
+  const schema = jioToJoiSchema(validation);
+  const label = ctx.model.props.label;
+  rules.push({
+    validator: (_: unknown, value: unknown) => {
+      const { error } = schema.validate(value, {
+        abortEarly: false,
+      });
+
+      if (error) {
+        const messages = error.details.map((d: { type: string; context?: Record<string, unknown> }) => {
+          return ctx.t(`${d.type}`, {
+            ...d.context,
+            ns: 'data-source-main',
+            label,
+          });
+        });
+        const div = document.createElement('div');
+        div.innerHTML = messages.join('; ');
+        return Promise.reject(div.textContent);
+      }
+
+      return Promise.resolve();
+    },
+  });
+  return rules;
+}
+
 export const validation = defineAction({
   title: tExpr('Validation'),
   name: 'validation',
@@ -29,6 +79,7 @@ export const validation = defineAction({
           type: targetInterface.validationType,
           availableValidationOptions: [...new Set(targetInterface.availableValidationOptions)],
           excludeValidationOptions: [...new Set(targetInterface.excludeValidationOptions)],
+          inheritedValue: ctx.model.collectionField.validation,
           isAssociation: targetInterface.isAssociation,
         },
       },
@@ -36,40 +87,21 @@ export const validation = defineAction({
   },
   handler(ctx, params) {
     if (params.validation) {
-      const rules = [];
-      const schema = jioToJoiSchema(params.validation);
-      const label = ctx.model.props.label;
-      rules.push({
-        validator: (_, value) => {
-          const { error } = schema.validate(value, {
-            abortEarly: false,
-          });
-
-          if (error) {
-            const messages = error.details.map((d) => {
-              return ctx.t(`${d.type}`, {
-                ...d.context,
-                ns: 'data-source-main',
-                label,
-              });
-            });
-            const div = document.createElement('div');
-            div.innerHTML = messages.join('; ');
-            return Promise.reject(div.textContent);
-          }
-
-          return Promise.resolve();
-        },
-      });
-      const hasRequiredInCollection = params.validation.rules.some((rule) => rule.name === 'required');
-      if (hasRequiredInCollection) {
+      const collectionValidation = ctx.model.collectionField?.validation;
+      const collectionRules = ctx.model.collectionField?.getComponentProps?.().rules || [];
+      const uiRules = params.validation.rules?.length
+        ? buildValidationRules(ctx as unknown as ValidationContext, params.validation)
+        : [];
+      const hasRequiredInValidation = [collectionValidation, params.validation].some(
+        (validation) => validation?.rules?.some((rule) => rule.name === 'required'),
+      );
+      if (hasRequiredInValidation) {
         ctx.model.setProps({
-          required: hasRequiredInCollection,
+          required: hasRequiredInValidation,
         });
       }
-      console.log(rules);
       ctx.model.setProps({
-        rules,
+        rules: [...collectionRules, ...uiRules],
         validation: params.validation,
       });
     }

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>
                   );