@nocobase/client-v2 2.1.0-alpha.32 → 2.1.0-alpha.34

package/src/flow/actions/linkageRules.tsx

@@ -479,6 +479,41 @@ export const linkageSetActionProps = defineAction({
   },
 });
 
+export const linkageSetMenuItemProps = defineAction({
+  name: 'linkageSetMenuItemProps',
+  title: tExpr('Set menu item state'),
+  scene: ActionScene.MENU_LINKAGE_RULES,
+  sort: 100,
+  uiSchema: {
+    value: {
+      type: 'string',
+      'x-component': (props) => {
+        const { value, onChange } = props;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const ctx = useFlowContext();
+        const t = ctx.model.translate.bind(ctx.model);
+
+        return (
+          <Select
+            value={value}
+            onChange={onChange}
+            placeholder={t('Please select state')}
+            style={{ width: '100%' }}
+            options={[
+              { label: t('Visible'), value: 'visible' },
+              { label: t('Hidden'), value: 'hidden' },
+            ]}
+            allowClear
+          />
+        );
+      },
+    },
+  },
+  handler(ctx, { value, setProps }) {
+    setProps(ctx.model, { hiddenModel: value === 'hidden' });
+  },
+});
+
 export const linkageSetFieldProps = defineAction({
   name: 'linkageSetFieldProps',
   title: tExpr('Set field state'),
@@ -1288,6 +1323,7 @@ export const linkageRunjs = defineAction({
     ActionScene.BLOCK_LINKAGE_RULES,
     ActionScene.FIELD_LINKAGE_RULES,
     ActionScene.ACTION_LINKAGE_RULES,
+    ActionScene.MENU_LINKAGE_RULES,
     ActionScene.DETAILS_FIELD_LINKAGE_RULES,
     ActionScene.SUB_FORM_FIELD_LINKAGE_RULES,
   ],
@@ -1755,6 +1791,8 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
 
   const linkageRules: LinkageRule[] = params.value as LinkageRule[];
   const allModels: FlowModel[] = ctx.model.__allModels || (ctx.model.__allModels = []);
+  const modelsToApply = new Set<FlowModel>(allModels);
+  const patchPropsByModel = new Map<FlowModel, any>();
   const directValuePatches: Array<{ path: Array<string | number>; value: any; whenEmpty?: boolean }> = [];
   const rootCollection = getCollectionFromModel((ctx.model as any)?.context?.blockModel ?? ctx.model);
   const isSafeToWriteAssociationSubpath = (namePath: any): boolean => {
@@ -1906,11 +1944,6 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
     return null;
   };
 
-  allModels.forEach((model: any) => {
-    // 重置临时属性
-    model.__props = {};
-  });
-
   // 1. 运行所有的联动规则
   for (const rule of linkageRules.filter((r) => r.enable)) {
     const { condition: conditions, actions } = rule;
@@ -1919,10 +1952,7 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
     if (!matched) continue;
 
     for (const action of actions) {
-      const setProps = (
-        model: FlowModel & { __originalProps?: any; __props?: any; __shouldReset?: boolean },
-        props: any,
-      ) => {
+      const setProps = (model: FlowModel & { __originalProps?: any; __shouldReset?: boolean }, props: any) => {
         // 存储原始值，用于恢复
         if (!model.__originalProps) {
           model.__originalProps = {
@@ -1935,19 +1965,16 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
           };
         }
 
-        if (!model.__props) {
-          model.__props = {};
-        }
-
         // 临时存起来，遍历完所有规则后，再统一处理
-        model.__props = {
-          ...model.__props,
+        patchPropsByModel.set(model, {
+          ...(patchPropsByModel.get(model) || {}),
           ...props,
-        };
+        });
 
         if (allModels.indexOf(model) === -1) {
           allModels.push(model);
         }
+        modelsToApply.add(model);
       };
 
       // TODO: 需要改成 runAction 的写法。但 runAction 是异步的，用在这里会不符合预期。后面需要解决这个问题
@@ -1956,15 +1983,12 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
   }
 
   // 2. 合并去重（按 uid）后再实际更改相关 model 的状态，避免重复项把“已设置的临时属性”覆盖掉
-  const mergedByUid = new Map<
-    string,
-    FlowModel & { __originalProps?: any; __props?: any; isFork?: boolean; forkId?: number }
-  >();
+  const mergedByUid = new Map<string, FlowModel & { __originalProps?: any; isFork?: boolean; forkId?: number }>();
   const mergedPropsByUid = new Map<string, any>();
 
-  allModels.forEach((m: any) => {
+  modelsToApply.forEach((m: any) => {
     const uid = m?.uid || String(m);
-    const curProps = m.__props || {};
+    const curProps = patchPropsByModel.get(m) || {};
     if (!mergedByUid.has(uid)) {
       mergedByUid.set(uid, m);
       mergedPropsByUid.set(uid, { ...curProps });
@@ -1983,7 +2007,11 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
     const newProps = { ...model.__originalProps, ...patchProps };
 
     model.setProps(_.omit(newProps, ['hiddenModel', 'value', 'hiddenText']));
-    model.hidden = !!newProps.hiddenModel;
+    if (typeof model.setHidden === 'function') {
+      model.setHidden(!!newProps.hiddenModel);
+    } else {
+      model.hidden = !!newProps.hiddenModel;
+    }
 
     if (newProps.required === true) {
       const rules = (model.props.rules || []).filter((rule) => !rule.required);
@@ -2149,6 +2177,32 @@ export const actionLinkageRules = defineAction({
   },
 });
 
+export const menuLinkageRules = defineAction({
+  name: 'menuLinkageRules',
+  title: tExpr('Menu linkage rules'),
+  uiMode: 'embed',
+  uiSchema(ctx) {
+    return {
+      value: {
+        type: 'array',
+        'x-component': LinkageRulesUI,
+        'x-component-props': {
+          supportedActions: getSupportedActions(ctx, ActionScene.MENU_LINKAGE_RULES),
+          title: tExpr('Menu linkage rules'),
+        },
+      },
+    };
+  },
+  defaultParams: {
+    value: [],
+  },
+  useRawParams: true,
+  handler: async (ctx, params) => {
+    const resolved = await resolveLinkageRulesParamsPreservingRunJsScripts(ctx, params);
+    return commonLinkageRulesHandler(ctx, resolved);
+  },
+});
+
 export const fieldLinkageRules = defineAction({
   name: 'fieldLinkageRules',
   title: tExpr('Field linkage rules'),

package/src/flow/actions/linkageRulesFormValueRefresh.ts

@@ -15,11 +15,7 @@ import {
   isRunJSValue,
 } from '@nocobase/flow-engine';
 import _ from 'lodash';
-import {
-  namePathToPathKey,
-  parsePathString,
-  pathKeyToNamePath,
-} from '../models/blocks/form/value-runtime/path';
+import { namePathToPathKey, parsePathString, pathKeyToNamePath } from '../models/blocks/form/value-runtime/path';
 import {
   collectStaticDepsFromRunJSValue,
   collectStaticDepsFromTemplateValue,
@@ -243,9 +239,7 @@ function collectLinkageRefreshDeps(ctx: FlowContext, params: any): LinkageRefres
 
     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 ? (parsePathString(subPath).filter((seg) => typeof seg !== 'object') as NamePath) : [];
       const resolved = resolveItemDependencyPath(ctx, depPath);
       wildcard ||= resolved.wildcard;
       valuePaths.push(...resolved.valuePaths);

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

@@ -116,6 +116,11 @@ const resetStyle = css`
   .ant-pro-base-menu-vertical-collapsed .ant-pro-base-menu-vertical-menu-item {
     height: auto;
   }
+
+  .ant-menu-item:has([data-nb-hidden-menu-item='true']),
+  .ant-menu-submenu:has([data-nb-hidden-menu-item='true']) {
+    display: none !important;
+  }
 `;
 
 const contentStyle = {
@@ -373,6 +378,7 @@ export const AdminLayoutComponent = observer((props: any) => {
   const { token } = antdTheme.useToken();
   const customToken = token as CustomToken;
   const isMobileLayout = !!adminLayoutModel?.isMobileLayout;
+  const menuRouteRefreshVersion = adminLayoutModel?.menuRouteRefreshVersion || 0;
   const isMobileSider = isMobileLayout || isMobileViewport;
   const [collapsed, setCollapsed] = useState(isMobileSider);
   const [preferredFlowSettingsEnabled, setPreferredFlowSettingsEnabled] = useState(() => readFlowSettingsPreference());
@@ -505,7 +511,7 @@ export const AdminLayoutComponent = observer((props: any) => {
       children: [],
     };
     setRoute(nextRoute);
-  }, [adminLayoutModel, allAccessRoutes, designable, isMobileSider, t]);
+  }, [adminLayoutModel, allAccessRoutes, designable, isMobileSider, menuRouteRefreshVersion, t]);
 
   useEffect(() => {
     const syncId = ++flowSettingsSyncRef.current;
@@ -627,6 +633,7 @@ export const AdminLayoutComponent = observer((props: any) => {
         <MobileMenuControlContext.Provider value={{ closeMobileMenu }}>
           <DndProvider collisionDetection={menuCollisionDetection} onDragEnd={handleMenuDragEnd}>
             <ProLayout
+              key={`admin-layout-menu-${menuRouteRefreshVersion}`}
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}

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

@@ -28,7 +28,6 @@ import {
   reconcileAdminLayoutMenuItems,
   shouldRenderIconInTitle,
 } from './AdminLayoutMenuUtils';
-import { findFirstPageRoute } from './AdminLayoutCompat';
 import {
   buildMenuBasicSchema,
   buildLinkSettingSchema,
@@ -41,7 +40,14 @@ import {
   matchesRoutePath,
   toTreeSelectItems,
 } from './AdminLayoutMenuFlowUtils';
-import { resolveAdminRouteRuntimeTarget, toRouterNavigationPath } from './resolveAdminRouteRuntimeTarget';
+import { ADMIN_LAYOUT_MODEL_UID } from './constants';
+import {
+  findFirstAccessiblePageRoute,
+  findFirstV2LandingRoute,
+  isV2AdminRuntime,
+  resolveAdminRouteRuntimeTarget,
+  toRouterNavigationPath,
+} from './resolveAdminRouteRuntimeTarget';
 
 export * from './AdminLayoutMenuUtils';
 const insertPositionToMethod = {
@@ -122,6 +128,15 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
     return this.flowRegistry.getFlows().size;
   }
 
+  hasPersistableMenuLinkageRules() {
+    const params = this.getStepParams('menuSettings', 'linkageRules') as { value?: any[] } | undefined;
+    return Array.isArray(params?.value) && params.value.length > 0;
+  }
+
+  hasCurrentPersistedMenuState() {
+    return this.getCurrentPersistedInstanceFlowCount() > 0 || this.hasPersistableMenuLinkageRules();
+  }
+
   buildRouteOptionsWithPersistedFlowFlag(hasPersistedMenuInstanceFlow: boolean) {
     const route = this.getRoute();
     const nextOptions = {
@@ -147,7 +162,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       return;
     }
 
-    const hasPersistedMenuInstanceFlow = this.getCurrentPersistedInstanceFlowCount() > 0;
+    const hasPersistedMenuInstanceFlow = this.hasCurrentPersistedMenuState();
     if (this.hasPersistedMenuInstanceFlowFlag(route) === hasPersistedMenuInstanceFlow) {
       return;
     }
@@ -188,6 +203,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       if (this.isCreationSession()) {
         return;
       }
+      let shouldRerenderAfterHydrate = false;
 
       const repository = this.flowEngine.modelRepository;
       if (!repository?.findOne) {
@@ -201,6 +217,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
 
       if (data.stepParams && typeof data.stepParams === 'object') {
         this.setStepParams(data.stepParams);
+        shouldRerenderAfterHydrate = this.hasPersistableMenuLinkageRules();
       }
 
       if (data.flowRegistry && typeof data.flowRegistry === 'object') {
@@ -219,9 +236,11 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
           return typeof flow.on === 'string' ? flow.on === 'beforeRender' : flow.on?.eventName === 'beforeRender';
         });
 
-        if (hasBeforeRenderFlow) {
-          void this.rerender();
-        }
+        shouldRerenderAfterHydrate = shouldRerenderAfterHydrate || hasBeforeRenderFlow;
+      }
+
+      if (shouldRerenderAfterHydrate) {
+        void this.rerender();
       }
     })().finally(() => {
       this.persistedStateHydrated = true;
@@ -242,6 +261,27 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
     return currentFlowCount > 0 || initialFlowCount > 0;
   }
 
+  setHidden(value: boolean) {
+    const previous = this.hidden;
+    super.setHidden(value);
+    if (previous !== this.hidden) {
+      (this.flowEngine.getModel?.(ADMIN_LAYOUT_MODEL_UID) as any)?.refreshMenuRouteTree?.();
+    }
+  }
+
+  protected renderHiddenInConfig(): React.ReactNode | undefined {
+    const { item, dom, options, renderType } = this.props;
+    if (!item || !renderType) {
+      return null;
+    }
+
+    return (
+      <div style={{ opacity: 0.3 }}>
+        <AdminLayoutMenuItemRenderer item={item} dom={dom} options={options} renderType={renderType} />
+      </div>
+    );
+  }
+
   async createMenuRoute(
     route: NocoBaseDesktopRoute,
     options?: {
@@ -436,11 +476,11 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       return true;
     }
 
-    const currentPersistedInstanceFlowCount = this.getCurrentPersistedInstanceFlowCount();
+    const hasCurrentPersistedMenuState = this.hasCurrentPersistedMenuState();
 
     // 菜单基础设置继续直接保存到 route repository；
     // 只有实例事件流需要回退到 FlowModel 默认持久化链路。
-    if (currentPersistedInstanceFlowCount > 0) {
+    if (hasCurrentPersistedMenuState) {
       await super.saveStepParams();
     } else if (this.hasPersistedMenuInstanceFlowFlag()) {
       await this.destroyPersistedState();
@@ -523,6 +563,10 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       return null;
     }
 
+    if (!options.designable && this.hidden) {
+      return null;
+    }
+
     const shouldShowIconInTitle = shouldRenderIconInTitle({ depth, isMobile: options.isMobile });
     const { name, icon } = buildMenuTitleWithIcon(route, options.t, shouldShowIconInTitle);
 
@@ -546,6 +590,11 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
         app: this.context.app,
         route,
       });
+
+      if (runtimeTarget.reason === 'unsupportedV2Runtime') {
+        return null;
+      }
+
       const path = route.schemaUid
         ? `/admin/${route.schemaUid}`
         : getAdminLayoutMenuVirtualPath('link', `${this.uid}-invalid`);
@@ -579,13 +628,20 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
           )
           .filter(Boolean) || [];
 
+      if (isV2AdminRuntime(this.context.app) && children.length === 0) {
+        return null;
+      }
+
       if (options.designable && depth === 0) {
         children.push(getAdminLayoutMenuInitializerButton('schema-initializer-Menu-side', this, route));
       }
 
+      const landingRoute = isV2AdminRuntime(this.context.app)
+        ? findFirstV2LandingRoute(itemChildren)
+        : findFirstAccessiblePageRoute(itemChildren);
       const runtimeTarget = resolveAdminRouteRuntimeTarget({
         app: this.context.app,
-        route,
+        route: isV2AdminRuntime(this.context.app) && landingRoute ? landingRoute : route,
       });
 
       const groupRoute: AdminLayoutMenuNode = {
@@ -593,9 +649,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
         icon,
         path: `/admin/${route.id}`,
         redirect:
-          children[0]?.key === 'x-designer-button'
-            ? undefined
-            : `/admin/${findFirstPageRoute(itemChildren)?.schemaUid || route.id}`,
+          children[0]?.key === 'x-designer-button' ? undefined : `/admin/${landingRoute?.schemaUid || route.id}`,
         hideInMenu: route.hideInMenu,
         _runtimePath: runtimeTarget.runtimePath,
         _navigationMode: runtimeTarget.navigationMode,
@@ -707,6 +761,10 @@ AdminLayoutMenuItemModel.registerFlow({
         });
       },
     },
+    linkageRules: {
+      use: 'menuLinkageRules',
+      hideInSettings: async (ctx: FlowSettingsContext<AdminLayoutMenuItemModel>) => ctx.model.isCreationSession(),
+    },
     moveTo: {
       title: 'Move to',
       defaultParams: async () => ({

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

@@ -15,9 +15,9 @@ import {
   FlowModel,
   FlowModelRenderer,
   FlowSettingsButton,
+  observer,
 } from '@nocobase/flow-engine';
-import { App, Badge, Tooltip } from 'antd';
-import type { HookAPI } from 'antd/es/modal/useModal';
+import { Badge, Tooltip } from 'antd';
 import qs from 'qs';
 import React, { FC, useCallback, useContext, useEffect } from 'react';
 import { Link, useLocation, type NavigateFunction } from 'react-router-dom';
@@ -284,33 +284,6 @@ const translateByModel = (model: FlowModel, value: any) => {
   return typeof model.context.t === 'function' ? model.context.t(value) : value;
 };
 
-const translateMenuNode = (item: AdminLayoutMenuNode, value: any) => {
-  return item._model ? translateByModel(item._model, value) : value;
-};
-
-/**
- * 经典页面需要整页跳回 v1，先给用户一个明确确认，避免误离开当前 v2 上下文。
- */
-const confirmLegacyPageNavigation = async (options: { item: AdminLayoutMenuNode; confirm?: HookAPI['confirm'] }) => {
-  const { item, confirm } = options;
-
-  if (!item._isLegacy || typeof confirm !== 'function') {
-    return true;
-  }
-
-  const confirmed = await confirm({
-    title: translateMenuNode(item, 'Open classic page access'),
-    content: translateMenuNode(
-      item,
-      'This page requires the classic version to open properly. Do you want to go there now?',
-    ),
-    okText: translateMenuNode(item, 'Yes'),
-    cancelText: translateMenuNode(item, 'Cancel'),
-  });
-
-  return !!confirmed;
-};
-
 const MENU_TYPE_ITEMS: Array<{ key: string; label: string; menuType: AdminLayoutMenuCreationType }> = [
   { key: 'group', label: 'Group', menuType: 'group' },
   { key: 'flow-page', label: 'Page', menuType: 'flowPage' },
@@ -520,7 +493,6 @@ export function resolveAdminLayoutMenuDragMoveOptionsFromEvent(
 const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderOptions }> = (props) => {
   const { item } = props;
   const badgeCount = useEvaluatedExpression(item._route.options?.badge?.count, item._model?.context);
-  const { modal } = App.useApp();
   const navigate = useNavigateNoUpdate();
   const routerBasename = useRouterBasename();
   const { closeMobileMenu } = useContext(MobileMenuControlContext);
@@ -556,23 +528,13 @@ const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRender
 
         event.preventDefault();
         event.stopPropagation();
-        void (async () => {
-          const confirmed = await confirmLegacyPageNavigation({
-            item,
-            confirm: item._model?.context?.modal?.confirm || modal?.confirm,
-          });
-          if (!confirmed) {
-            return;
-          }
-
-          runAfterMobileMenuClosed({
-            isMobile: !!props.options?.isMobile,
-            closeMobileMenu,
-            callback: () => {
-              window.location.assign(runtimePath);
-            },
-          });
-        })();
+        runAfterMobileMenuClosed({
+          isMobile: !!props.options?.isMobile,
+          closeMobileMenu,
+          callback: () => {
+            window.location.assign(runtimePath);
+          },
+        });
         return;
       }
 
@@ -589,16 +551,7 @@ const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRender
         },
       });
     },
-    [
-      closeMobileMenu,
-      item,
-      item._navigationMode,
-      modal,
-      navigate,
-      props.options?.isMobile,
-      runtimePath,
-      spaRuntimePath,
-    ],
+    [closeMobileMenu, item, item._navigationMode, navigate, props.options?.isMobile, runtimePath, spaRuntimePath],
   );
 
   const landingEntryAriaLabel = ariaLabel ? `${ariaLabel}-landing-entry` : 'group-landing-entry';
@@ -656,7 +609,6 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
   const { item } = props;
   const location = useLocation();
   const badgeCount = useEvaluatedExpression(item._route.options?.badge?.count, item._model?.context);
-  const { modal } = App.useApp();
   const navigate = useNavigateNoUpdate();
   const basenameOfCurrentRouter = useRouterBasename();
   const { closeMobileMenu } = useContext(MobileMenuControlContext);
@@ -717,23 +669,13 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
 
         event.preventDefault();
         event.stopPropagation();
-        void (async () => {
-          const confirmed = await confirmLegacyPageNavigation({
-            item,
-            confirm: item._model?.context?.modal?.confirm || modal?.confirm,
-          });
-          if (!confirmed) {
-            return;
-          }
-
-          runAfterMobileMenuClosed({
-            isMobile: !!props.options?.isMobile,
-            closeMobileMenu,
-            callback: () => {
-              window.location.assign(runtimePath);
-            },
-          });
-        })();
+        runAfterMobileMenuClosed({
+          isMobile: !!props.options?.isMobile,
+          closeMobileMenu,
+          callback: () => {
+            window.location.assign(runtimePath);
+          },
+        });
         return;
       }
 
@@ -757,16 +699,7 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
         },
       });
     },
-    [
-      props.options?.isMobile,
-      closeMobileMenu,
-      isDocumentNavigation,
-      item,
-      modal,
-      navigate,
-      runtimePath,
-      spaRuntimePath,
-    ],
+    [props.options?.isMobile, closeMobileMenu, isDocumentNavigation, item, navigate, runtimePath, spaRuntimePath],
   );
 
   if (item._route?.type === NocoBaseDesktopRouteType.link) {
@@ -889,13 +822,15 @@ export const shouldRenderIconInTitle = ({ depth, isMobile }: { depth: number; is
   return depth > 1 || (isMobile && depth > 0);
 };
 
+const HiddenMenuItemPlaceholder = () => <span data-nb-hidden-menu-item="true" />;
+
 export const AdminLayoutMenuModelRenderer: FC<{
   model: FlowModel;
   item: AdminLayoutMenuNode;
   dom: React.ReactNode;
   renderType: AdminLayoutMenuRenderType;
   options?: AdminLayoutMenuRenderOptions;
-}> = ({ model, item, dom, renderType, options }) => {
+}> = observer(({ model, item, dom, renderType, options }) => {
   const token = model.context.themeToken;
 
   useEffect(() => {
@@ -907,6 +842,10 @@ export const AdminLayoutMenuModelRenderer: FC<{
     });
   }, [dom, item, model, options, renderType]);
 
+  if (!model.context.flowSettingsEnabled && model.hidden) {
+    return <HiddenMenuItemPlaceholder />;
+  }
+
   return (
     <ResetThemeTokenAndKeepAlgorithm>
       <Droppable model={model}>
@@ -931,7 +870,7 @@ export const AdminLayoutMenuModelRenderer: FC<{
       </Droppable>
     </ResetThemeTokenAndKeepAlgorithm>
   );
-};
+});
 
 export function getAdminLayoutMenuInitializerButton(
   testId: string,

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

@@ -50,6 +50,7 @@ type GetAdminLayoutModelOptions<TModel extends FlowModel = AdminLayoutModel> = {
  */
 export class AdminLayoutModel extends FlowModel<AdminLayoutStructure> {
   isMobileLayout = false;
+  menuRouteRefreshVersion = 0;
   private routeCoordinator?: AdminLayoutRouteCoordinator;
   private routeDisposer?: () => void;
   private activePageUid = '';
@@ -60,9 +61,19 @@ export class AdminLayoutModel extends FlowModel<AdminLayoutStructure> {
     super(options);
     define(this, {
       isMobileLayout: observable.ref,
+      menuRouteRefreshVersion: observable.ref,
     });
   }
 
+  /**
+   * 通知 Layout 重新生成 ProLayout 菜单路由。
+   *
+   * @returns {void}
+   */
+  refreshMenuRouteTree() {
+    this.menuRouteRefreshVersion += 1;
+  }
+
   /**
    * 注册页面运行时信息。
    *

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

@@ -14,6 +14,7 @@ import { Result, theme as antdTheme } from 'antd';
 import React, { FC, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useLocation } from 'react-router-dom';
+import { isV2AdminRuntime, isV2MenuRoute } from './resolveAdminRouteRuntimeTarget';
 
 type AdminLayoutContentProps = {
   onContentElementChange?: (element: HTMLDivElement | null) => void;
@@ -67,9 +68,12 @@ const ShowTipWhenNoPages = observer(() => {
   const { t } = useTranslation();
   const location = useLocation();
   const allAccessRoutes = flowEngine.context.routeRepository?.listAccessible?.() || [];
+  const visibleRoutes = isV2AdminRuntime(flowEngine.context.app)
+    ? allAccessRoutes.filter((route) => isV2MenuRoute(route))
+    : allAccessRoutes;
   const designable = !!flowEngine.context.flowSettingsEnabled;
 
-  if (allAccessRoutes.length === 0 && !designable && ['/admin', '/admin/'].includes(location.pathname)) {
+  if (visibleRoutes.length === 0 && !designable && ['/admin', '/admin/'].includes(location.pathname)) {
     return (
       <Result
         icon={<HighlightOutlined style={{ fontSize: '8em', color: token.colorText }} />}