@nocobase/client-v2 2.1.0-beta.37 → 2.1.0-beta.38

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

@@ -0,0 +1,160 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { parsePathnameToViewParams, useFlowEngine } from '@nocobase/flow-engine';
+import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation, useMatches, useNavigate } from 'react-router-dom';
+import { NocoBaseDesktopRouteType } from '../../../flow-compat';
+import { useApp } from '../../../hooks/useApp';
+import { isLayoutContentRouteName } from '../../../layout-manager/utils';
+import {
+  findFirstV2LandingRoute,
+  resolveAdminRouteRuntimeTarget,
+  toRouterNavigationPath,
+} from './resolveAdminRouteRuntimeTarget';
+
+export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ children }) => {
+  const flowEngine = useFlowEngine();
+  const app = useApp();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const matches = useMatches();
+  const [ready, setReady] = useState(false);
+  const replaceTriggeredRef = useRef(false);
+  const routeRepository = flowEngine.context.routeRepository;
+  const isAdminRoot = useMemo(() => {
+    const pathname = toRouterNavigationPath(location.pathname, app.router.getBasename());
+    return pathname === '/admin';
+  }, [app, location.pathname]);
+  const pageUid = useMemo(() => {
+    const lastMatch = matches[matches.length - 1];
+    if (!isLayoutContentRouteName('admin', lastMatch?.id)) {
+      return '';
+    }
+    const adminMatch = matches.find((match) => match.id === 'admin');
+    return (
+      (lastMatch.params?.name as string) ||
+      parsePathnameToViewParams(location.pathname, {
+        basePath: adminMatch?.pathname || '/admin',
+      })[0]?.viewUid ||
+      ''
+    );
+  }, [location.pathname, matches]);
+
+  useEffect(() => {
+    replaceTriggeredRef.current = false;
+  }, [location.pathname, location.search, location.hash, pageUid]);
+
+  useEffect(() => {
+    let active = true;
+
+    const run = async () => {
+      setReady(false);
+
+      if (!isAdminRoot && !pageUid) {
+        if (active) {
+          setReady(true);
+        }
+        return;
+      }
+
+      if (!routeRepository?.isAccessibleLoaded?.()) {
+        try {
+          await routeRepository?.ensureAccessibleLoaded?.();
+        } catch (_error) {
+          if (active) {
+            setReady(true);
+          }
+          return;
+        }
+      }
+
+      if (!active || replaceTriggeredRef.current) {
+        return;
+      }
+
+      if (pageUid) {
+        const currentRoute = routeRepository?.getRouteBySchemaUid?.(pageUid);
+        if (currentRoute?.type === NocoBaseDesktopRouteType.page) {
+          const target = resolveAdminRouteRuntimeTarget({
+            app,
+            route: currentRoute,
+            location: {
+              pathname: window.location.pathname,
+              search: window.location.search,
+              hash: window.location.hash,
+            },
+            preserveLocationState: true,
+          });
+
+          if (target.navigationMode === 'document' && target.runtimePath) {
+            replaceTriggeredRef.current = true;
+            window.location.replace(target.runtimePath);
+            return;
+          }
+        }
+
+        if (active) {
+          setReady(true);
+        }
+        return;
+      }
+
+      const firstAccessibleRoute = findFirstV2LandingRoute(routeRepository?.listAccessible?.() || []);
+      if (!firstAccessibleRoute) {
+        if (active) {
+          setReady(true);
+        }
+        return;
+      }
+
+      const target = resolveAdminRouteRuntimeTarget({
+        app,
+        route: firstAccessibleRoute,
+      });
+
+      if (!target.runtimePath) {
+        if (active) {
+          setReady(true);
+        }
+        return;
+      }
+
+      replaceTriggeredRef.current = true;
+      if (target.navigationMode === 'document') {
+        window.location.replace(target.runtimePath);
+        return;
+      }
+
+      navigate(toRouterNavigationPath(target.runtimePath, app.router.getBasename()), { replace: true });
+    };
+
+    void run();
+
+    return () => {
+      active = false;
+    };
+  }, [
+    app,
+    flowEngine,
+    isAdminRoot,
+    location.hash,
+    location.pathname,
+    location.search,
+    navigate,
+    pageUid,
+    routeRepository,
+  ]);
+
+  if (!ready) {
+    return null;
+  }
+
+  return <>{children}</>;
+};

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

@@ -747,18 +747,6 @@ AdminLayoutMenuItemModel.registerFlow({
         });
       },
     },
-    hidden: {
-      title: 'Hidden',
-      uiMode: { type: 'switch', key: 'hideInMenu' },
-      defaultParams: async (ctx: FlowSettingsContext<AdminLayoutMenuItemModel>) => ({
-        hideInMenu: !!ctx.model.getRoute()?.hideInMenu,
-      }),
-      beforeParamsSave: async (ctx: FlowSettingsContext<AdminLayoutMenuItemModel>, params) => {
-        await ctx.model.updateMenuRoute({
-          hideInMenu: !!params.hideInMenu,
-        });
-      },
-    },
     linkageRules: {
       use: 'menuLinkageRules',
       hideInSettings: async (ctx: FlowSettingsContext<AdminLayoutMenuItemModel>) => ctx.model.isCreationSession(),

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

@@ -7,10 +7,17 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { define, observable, reaction } from '@formily/reactive';
+import { define, observable } from '@formily/reactive';
 import { type FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import React from 'react';
 import type { NocoBaseDesktopRoute } from '../../../flow-compat';
-import { AdminLayoutRouteCoordinator, type RoutePageMeta } from '../AdminLayoutRouteCoordinator';
+import { AdminLayoutRouteCoordinator } from '../AdminLayoutRouteCoordinator';
+import {
+  BaseLayoutModel,
+  getLayoutModel,
+  type BaseLayoutStructure,
+  type GetLayoutModelOptions,
+} from '../BaseLayoutModel';
 import { ADMIN_LAYOUT_MODEL_UID } from './constants';
 import { type AdminLayoutMenuItemModel } from './AdminLayoutMenuModels';
 import {
@@ -19,22 +26,17 @@ import {
   type AdminLayoutMenuRouteOptions,
 } from './AdminLayoutMenuUtils';
 import { AdminLayoutComponent } from './AdminLayoutComponent';
-import React from 'react';
 import { TopbarActionModel } from '../../models/topbar/TopbarActionModel';
 import { TopbarActionsBar } from './TopbarActionsBar';
+import { AdminLayoutEntryGuard } from './AdminLayoutEntryGuard';
 
-export type AdminLayoutStructure = {
+export type AdminLayoutStructure = BaseLayoutStructure & {
   subModels: {
     menuItems?: AdminLayoutMenuItemModel[];
   };
 };
 
-type GetAdminLayoutModelOptions<TModel extends FlowModel = AdminLayoutModel> = {
-  required?: boolean;
-  create?: boolean;
-  props?: any;
-  use?: new (...args: any[]) => TModel;
-};
+type GetAdminLayoutModelOptions<TModel extends FlowModel = AdminLayoutModel> = GetLayoutModelOptions<TModel>;
 
 /**
  * Admin Layout 的纯运行时 host model。
@@ -48,19 +50,12 @@ type GetAdminLayoutModelOptions<TModel extends FlowModel = AdminLayoutModel> = {
  * model.syncMenuRoutes(routes);
  * ```
  */
-export class AdminLayoutModel extends FlowModel<AdminLayoutStructure> {
-  isMobileLayout = false;
+export class AdminLayoutModel extends BaseLayoutModel<AdminLayoutStructure> {
   menuRouteRefreshVersion = 0;
-  private routeCoordinator?: AdminLayoutRouteCoordinator;
-  private routeDisposer?: () => void;
-  private activePageUid = '';
-  private layoutContentElement: HTMLElement | null = null;
-  private readonly routePageMetaMap = new Map<string, RoutePageMeta>();
 
   constructor(options: any) {
     super(options);
     define(this, {
-      isMobileLayout: observable.ref,
       menuRouteRefreshVersion: observable.ref,
     });
   }
@@ -74,50 +69,6 @@ export class AdminLayoutModel extends FlowModel<AdminLayoutStructure> {
     this.menuRouteRefreshVersion += 1;
   }
 
-  /**
-   * 注册页面运行时信息。
-   *
-   * @param {string} pageUid 页面 UID
-   * @param {RoutePageMeta} meta 页面运行时元数据
-   * @returns {FlowModel} 对应的页面模型
-   */
-  registerRoutePage(pageUid: string, meta: RoutePageMeta) {
-    this.routePageMetaMap.set(pageUid, meta);
-    return this.getCoordinator().registerPage(pageUid, meta);
-  }
-
-  /**
-   * 更新页面运行时信息。
-   *
-   * @param {string} pageUid 页面 UID
-   * @param {Partial<RoutePageMeta>} meta 待更新的页面元数据
-   * @returns {void}
-   */
-  updateRoutePage(pageUid: string, meta: Partial<RoutePageMeta>) {
-    const prev = this.routePageMetaMap.get(pageUid) || { active: false };
-    const next = {
-      ...prev,
-      ...meta,
-      active: typeof meta.active === 'boolean' ? meta.active : prev.active,
-    };
-    this.routePageMetaMap.set(pageUid, next);
-    this.getCoordinator().syncPageMeta(pageUid, meta);
-  }
-
-  /**
-   * 注销页面运行时信息。
-   *
-   * @param {string} pageUid 页面 UID
-   * @returns {void}
-   */
-  unregisterRoutePage(pageUid: string) {
-    this.routePageMetaMap.delete(pageUid);
-    if (this.activePageUid === pageUid) {
-      this.activePageUid = '';
-    }
-    this.getCoordinator().unregisterPage(pageUid);
-  }
-
   /**
    * 使用当前可访问菜单路由刷新 Layout 菜单树。
    *
@@ -157,131 +108,16 @@ export class AdminLayoutModel extends FlowModel<AdminLayoutStructure> {
     };
   }
 
-  /**
-   * 设置布局内容容器元素。
-   *
-   * @param {HTMLElement | null} element 布局内容容器
-   * @returns {void}
-   */
-  setLayoutContentElement(element: HTMLElement | null) {
-    this.layoutContentElement = element;
-    this.getCoordinator().setLayoutContentElement(element);
-  }
-
-  /**
-   * 设置是否为移动端布局。
-   *
-   * @param {boolean} isMobileLayout 是否为移动端布局
-   * @returns {void}
-   */
-  setIsMobileLayout(isMobileLayout: boolean) {
-    this.isMobileLayout = !!isMobileLayout;
-  }
-
-  protected onMount(): void {
-    super.onMount();
-    this.setupContextBindings();
-    this.setupRouteReaction();
-  }
-
-  protected onUnmount(): void {
-    this.teardownRuntime();
-    super.onUnmount();
-  }
-
-  /**
-   * 安装运行时上下文属性。
-   *
-   * @returns {void}
-   */
-  private setupContextBindings() {
-    this.flowEngine.context.defineProperty('currentRoute', {
-      get: () => this.getCurrentRouteByActivePage(),
-      // 切页后需要立即读取当前激活页面的路由，不能复用首次访问时的缓存值。
-      cache: false,
-    });
-    this.flowEngine.context.defineProperty('layoutContentElement', {
-      get: () => this.layoutContentElement,
-      // 布局容器 ref 会在挂载和卸载时变化，这里必须实时读取。
-      cache: false,
-    });
-    this.flowEngine.context.defineProperty('isMobileLayout', {
-      get: () => this.isMobileLayout,
-      observable: true,
-      cache: false,
-    });
-  }
-
-  /**
-   * 安装路由同步 reaction。
-   *
-   * @returns {void}
-   */
-  private setupRouteReaction() {
-    if (this.routeDisposer) {
-      return;
-    }
-
-    this.routeDisposer = reaction(
-      () => this.flowEngine.context.route,
-      (route) => {
-        this.activePageUid = route?.params?.name || '';
-        this.getCoordinator().syncRoute(route || {});
-      },
-      {
-        fireImmediately: true,
-      },
-    );
-  }
-
-  /**
-   * 释放运行时状态。
-   *
-   * @returns {void}
-   */
-  private teardownRuntime() {
-    this.routeDisposer?.();
-    this.routeDisposer = undefined;
-    this.routeCoordinator?.destroy();
-    this.routeCoordinator = undefined;
-    this.routePageMetaMap.clear();
-    this.activePageUid = '';
-    this.layoutContentElement = null;
-  }
-
-  /**
-   * 获取当前激活页面对应的路由对象。
-   *
-   * @returns {any} 当前激活页面对应的路由对象
-   */
-  private getCurrentRouteByActivePage() {
-    return this.getCurrentRouteByPageUid(this.activePageUid);
-  }
-
-  /**
-   * 根据页面 UID 获取路由对象。
-   *
-   * @param {string} pageUid 页面 UID
-   * @returns {any} 路由对象
-   */
-  private getCurrentRouteByPageUid(pageUid: string) {
-    return this.flowEngine.context.routeRepository?.getRouteBySchemaUid?.(pageUid) || {};
-  }
-
-  /**
-   * 懒加载页面路由协调器。
-   *
-   * @returns {AdminLayoutRouteCoordinator} 路由协调器实例
-   */
-  private getCoordinator() {
-    if (!this.routeCoordinator) {
-      this.routeCoordinator = new AdminLayoutRouteCoordinator(this.flowEngine);
-    }
-    return this.routeCoordinator;
+  protected createRouteCoordinator() {
+    return new AdminLayoutRouteCoordinator(this.flowEngine, this.getRouteCoordinatorOptions());
   }
 
   render() {
-    return <AdminLayoutComponent {...this.props} />;
+    return (
+      <AdminLayoutEntryGuard>
+        <AdminLayoutComponent {...this.props} model={this} />
+      </AdminLayoutEntryGuard>
+    );
   }
 }
 
@@ -292,10 +128,12 @@ AdminLayoutModel.registerFlow({
       handler: async (ctx, params) => {
         const topbarActionModels = await ctx.engine.getSubclassesOfAsync('TopbarActionModel');
         const actions = [...topbarActionModels.keys()].map<TopbarActionModel>((name) => {
-          return ctx.engine.createModel({
+          const action = ctx.engine.createModel<TopbarActionModel>({
             use: name,
             uid: `topbar-action-${name}`,
           });
+          action.setParent(ctx.model);
+          return action;
         });
         ctx.model.props.actionsRender = (props) => {
           return [<TopbarActionsBar key="topbar-actions" actions={actions} isMobile={props?.isMobile} />];
@@ -317,23 +155,12 @@ export function getAdminLayoutModel<TModel extends FlowModel = AdminLayoutModel>
   flowEngine: FlowEngine,
   options: GetAdminLayoutModelOptions<TModel> = {},
 ) {
-  const { required = false, create = false, props, use } = options;
-  let model = flowEngine.getModel<TModel>(ADMIN_LAYOUT_MODEL_UID);
-
-  if (!model && create) {
-    const ModelClass = (use || AdminLayoutModel) as new (...args: any[]) => TModel;
-    model = flowEngine.createModel<TModel>({
-      uid: ADMIN_LAYOUT_MODEL_UID,
-      use: ModelClass,
-      props,
-    });
-  }
-
-  if (model && props) {
-    model.setProps(props);
-  }
+  const model = getLayoutModel<TModel>(flowEngine, ADMIN_LAYOUT_MODEL_UID, {
+    ...options,
+    use: (options.use || AdminLayoutModel) as any,
+  });
 
-  if (!model && required) {
+  if (!model && options.required) {
     throw new Error('[NocoBase] FlowRoute requires admin-layout-model. Please render FlowRoute under AdminLayout.');
   }
 

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

@@ -13,7 +13,9 @@ import { observer, useFlowEngine } from '@nocobase/flow-engine';
 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 { Outlet, useLocation, useMatches, useParams } from 'react-router-dom';
+import { KeepAlive } from '../../../components/KeepAlive';
+import { getLayoutContentRouteNames } from '../../../layout-manager/utils';
 import { isV2AdminRuntime, isV2MenuRoute } from './resolveAdminRouteRuntimeTarget';
 
 type AdminLayoutContentProps = {
@@ -47,6 +49,8 @@ const mobileHeight = {
   height: `calc(100dvh - var(--nb-header-height))`,
 };
 
+const adminLayoutContentRouteNames = getLayoutContentRouteNames('admin');
+
 /**
  * 检测当前浏览器是否支持 dvh，移动端支持时优先使用它计算可视区域高度。
  *
@@ -93,6 +97,11 @@ const ShowTipWhenNoPages = observer(() => {
  */
 export const AdminLayoutContent: FC<AdminLayoutContentProps> = ({ onContentElementChange }) => {
   const style = useMemo(() => (isDvhSupported() ? mobileHeight : undefined), []);
+  const params = useParams();
+  const matches = useMatches();
+  const pageUid = params.name;
+  const currentRouteId = matches.at(-1)?.id;
+  const shouldKeepAlive = !!pageUid && adminLayoutContentRouteNames.includes(currentRouteId || '');
   const bindLayoutContentRef = useCallback(
     (node: HTMLDivElement | null) => {
       // shell 直接渲染内容区时，仍需把挂载目标同步给 root model。
@@ -108,7 +117,7 @@ export const AdminLayoutContent: FC<AdminLayoutContentProps> = ({ onContentEleme
       style={style}
     >
       <div style={pageContentStyle}>
-        <Outlet />
+        {shouldKeepAlive && pageUid ? <KeepAlive uid={pageUid}>{() => <Outlet />}</KeepAlive> : <Outlet />}
         <ShowTipWhenNoPages />
       </div>
     </div>

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutMenuModels.test.ts

@@ -891,34 +891,9 @@ describe('AdminLayoutModel menu items', () => {
     });
   });
 
-  it('should persist hidden setting through route repository', async () => {
-    const updateRoute = vi.fn().mockResolvedValue(undefined);
-    engine.context.routeRepository.updateRoute = updateRoute;
-
-    const model = engine.createModel<AdminLayoutMenuItemModel>({
-      uid: 'menu-item-hidden',
-      use: AdminLayoutMenuItemModel,
-      props: {
-        route: {
-          id: 1,
-          title: 'Page 1',
-          schemaUid: 'current-page',
-          type: NocoBaseDesktopRouteType.page,
-          hideInMenu: false,
-        },
-      },
-    });
-
-    const menuSettingsFlow = AdminLayoutMenuItemModel.globalFlowRegistry.getFlow('menuSettings');
-    await menuSettingsFlow?.steps?.hidden?.beforeParamsSave?.({ model } as any, { hideInMenu: true }, {});
-
-    expect(updateRoute).toHaveBeenCalledWith(1, {
-      hideInMenu: true,
-    });
-  });
-
   it('should expose menu linkage rules only for existing menu items', async () => {
     const menuSettingsFlow = AdminLayoutMenuItemModel.globalFlowRegistry.getFlow('menuSettings');
+    expect(menuSettingsFlow?.steps?.hidden).toBeUndefined();
     expect(menuSettingsFlow?.steps?.linkageRules?.use).toBe('menuLinkageRules');
 
     const model = engine.createModel<AdminLayoutMenuItemModel>({