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

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

@@ -43,6 +43,7 @@ import {
   type FlowModel,
 } from '@nocobase/flow-engine';
 import { AdminLayoutModel, getAdminLayoutModel } from '..';
+import { getLayoutPageRouteName, getLayoutPageViewRouteName } from '../../../../layout-manager/utils';
 import { TopbarActionModel } from '../../../models/topbar/TopbarActionModel';
 import { UserCenterTopbarActionModel } from '../../../models/topbar/UserCenterTopbarActionModel';
 import { TopbarActionsBar } from '../TopbarActionsBar';
@@ -113,7 +114,7 @@ describe('AdminLayoutModel runtime', () => {
     }).toThrowError(/admin-layout-model/);
   });
 
-  it('should expose live layoutContentElement on engine context', async () => {
+  it('should expose live layoutContentElement on layout context', async () => {
     const engine = new FlowEngine();
 
     render(
@@ -131,29 +132,99 @@ describe('AdminLayoutModel runtime', () => {
       model.setLayoutContentElement(element);
     });
 
-    expect(engine.context.layoutContentElement).toBe(element);
+    expect(model.context.layoutContentElement).toBe(element);
 
     act(() => {
       model.setLayoutContentElement(null);
     });
 
-    expect(engine.context.layoutContentElement).toBeNull();
+    expect(model.context.layoutContentElement).toBeNull();
   });
 
-  it('should expose live engine currentRoute when active page changes', async () => {
+  it('should expose layout definition only while mounted', async () => {
+    const engine = new FlowEngine();
+    const { unmount } = render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    expect(model.context.layout).toMatchObject({
+      routeName: 'admin',
+      routePath: '/admin',
+      rootRouteName: 'admin',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+    });
+    expect(engine.context.layout).toBeUndefined();
+
+    unmount();
+
+    expect(model.context.layout).toBeUndefined();
+    expect(model.context.currentRoute).toEqual({});
+    expect(model.context.layoutContentElement).toBeNull();
+  });
+
+  it('should expose layoutRoute from local layout route sync', async () => {
     const engine = new FlowEngine();
-    const routeMap = {
-      'page-1': { title: 'Page 1' },
-      'page-2': { title: 'Page 2' },
-    };
     engine.context.defineProperty('routeRepository', {
       value: {
-        getRouteBySchemaUid: (pageUid: string) => routeMap[pageUid],
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
       },
     });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.syncLayoutRoute({
+        name: getLayoutPageViewRouteName('admin'),
+        pathname: '/admin/page-1/view/popup',
+        layoutBasePathname: '/admin',
+      });
+    });
+
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toMatchObject({
+        type: 'page',
+        pageUid: 'page-1',
+        viewStack: [{ viewUid: 'page-1' }, { viewUid: 'popup' }],
+      });
+      expect(model.context.currentRoute.title).toBe('page-1');
+    });
+
+    act(() => {
+      model.syncLayoutRoute({
+        name: 'admin.settings',
+        pathname: '/admin/settings',
+      });
+    });
+
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toBeNull();
+      expect(model.context.currentRoute).toEqual({});
+    });
+  });
+
+  it('should not consume global routes that belong to nested layouts', async () => {
+    const engine = new FlowEngine();
     const routeRef = observable.ref({
-      params: { name: 'page-1' },
-      pathname: '/admin/page-1',
+      name: getLayoutPageViewRouteName('admin.settings.publicForms'),
+      pathname: '/admin/settings/public-forms/form-1/view/popup',
+      params: { name: 'form-1' },
+      layoutBasePathname: '/admin/settings/public-forms',
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
     });
     engine.context.defineProperty('route', {
       get: () => routeRef.value,
@@ -169,6 +240,55 @@ describe('AdminLayoutModel runtime', () => {
     const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
     expect(model).toBeTruthy();
 
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toBeNull();
+      expect(model.context.currentRoute).toEqual({});
+    });
+
+    act(() => {
+      routeRef.value = {
+        name: getLayoutPageViewRouteName('admin.settings.publicForms'),
+        pathname: '/admin/settings/public-forms/form-2/view/popup',
+        params: { name: 'form-2' },
+        layoutBasePathname: '/admin/settings/public-forms',
+      };
+    });
+
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toBeNull();
+      expect(model.context.currentRoute).toEqual({});
+    });
+  });
+
+  it('should expose live layout currentRoute when active page changes', async () => {
+    const engine = new FlowEngine();
+    const routeMap = {
+      'page-1': { title: 'Page 1' },
+      'page-2': { title: 'Page 2' },
+    };
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => routeMap[pageUid],
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.syncLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
+        pathname: '/admin/page-1',
+        layoutBasePathname: '/admin',
+      });
+    });
+
     model.registerRoutePage('page-1', {
       active: true,
     });
@@ -177,36 +297,29 @@ describe('AdminLayoutModel runtime', () => {
     });
 
     await waitFor(() => {
-      expect(engine.context.currentRoute.title).toBe('Page 1');
+      expect(model.context.currentRoute.title).toBe('Page 1');
     });
 
     act(() => {
-      routeRef.value = {
-        params: { name: 'page-2' },
+      model.syncLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
         pathname: '/admin/page-2',
-      };
+        layoutBasePathname: '/admin',
+      });
     });
 
     await waitFor(() => {
-      expect(engine.context.currentRoute.title).toBe('Page 2');
+      expect(model.context.currentRoute.title).toBe('Page 2');
     });
   });
 
   it('should keep pageActive in sync after non-active route page updates', async () => {
     const engine = new FlowEngine();
-    const routeRef = observable.ref({
-      params: { name: 'page-1' },
-      pathname: '/admin/page-1',
-    });
     engine.context.defineProperty('routeRepository', {
       value: {
         getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
       },
     });
-    engine.context.defineProperty('route', {
-      get: () => routeRef.value,
-      cache: false,
-    });
 
     render(
       <FlowEngineProvider engine={engine}>
@@ -217,6 +330,14 @@ describe('AdminLayoutModel runtime', () => {
     const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
     expect(model).toBeTruthy();
 
+    act(() => {
+      model.syncLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
+        pathname: '/admin/page-1',
+        layoutBasePathname: '/admin',
+      });
+    });
+
     model.registerRoutePage('page-1', {
       active: false,
     });
@@ -236,10 +357,11 @@ describe('AdminLayoutModel runtime', () => {
     expect(routeModel.context.pageActive.value).toBe(true);
 
     act(() => {
-      routeRef.value = {
-        params: { name: 'page-2' },
+      model.syncLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
         pathname: '/admin/page-2',
-      };
+        layoutBasePathname: '/admin',
+      });
     });
 
     await waitFor(() => {

package/src/flow/admin-shell/admin-layout/index.ts

@@ -9,6 +9,8 @@
 
 export * from './AdminLayoutComponent';
 export * from './AdminLayoutModel';
+export * from '../BaseLayoutModel';
+export * from '../BaseLayoutRouteCoordinator';
 export * from './AdminLayoutSlotModels';
 export * from './AdminLayoutMenuModels';
 export * from './AdminLayoutMenuFlowUtils';

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

@@ -8,14 +8,15 @@
  */
 
 import type { FlowEngine } from '@nocobase/flow-engine';
-import { useEffect, useRef } from 'react';
+import type { RefObject } from 'react';
 import { getAdminLayoutModel, type AdminLayoutModel } from './admin-layout/AdminLayoutModel';
+import { useLayoutRoutePage } from './useLayoutRoutePage';
 
 type UseAdminLayoutRoutePageOptions = {
   flowEngine: FlowEngine;
   pageUid: string;
   refreshDesktopRoutes?: () => Promise<unknown>;
-  layoutContentRef: React.RefObject<HTMLDivElement>;
+  layoutContentRef: RefObject<HTMLDivElement>;
 };
 
 /**
@@ -29,28 +30,11 @@ type UseAdminLayoutRoutePageOptions = {
  */
 export function useAdminLayoutRoutePage(options: UseAdminLayoutRoutePageOptions) {
   const { flowEngine, pageUid, refreshDesktopRoutes, layoutContentRef } = options;
-  const adminLayoutModel = getAdminLayoutModel<AdminLayoutModel>(flowEngine, { required: true });
-  const refreshRef = useRef(refreshDesktopRoutes);
-
-  refreshRef.current = refreshDesktopRoutes;
-
-  useEffect(() => {
-    adminLayoutModel.registerRoutePage(pageUid, {
-      active: false,
-      refreshDesktopRoutes: refreshRef.current,
-      layoutContentElement: layoutContentRef.current,
-    });
-    return () => {
-      adminLayoutModel.unregisterRoutePage(pageUid);
-    };
-  }, [adminLayoutModel, pageUid, layoutContentRef]);
-
-  useEffect(() => {
-    adminLayoutModel.updateRoutePage(pageUid, {
-      refreshDesktopRoutes,
-      layoutContentElement: layoutContentRef.current,
-    });
-  }, [adminLayoutModel, pageUid, refreshDesktopRoutes, layoutContentRef]);
-
-  return adminLayoutModel;
+  return useLayoutRoutePage<AdminLayoutModel>({
+    flowEngine,
+    pageUid,
+    refreshDesktopRoutes,
+    layoutContentRef,
+    getLayoutModel: (engine) => getAdminLayoutModel<AdminLayoutModel>(engine, { required: true }),
+  });
 }

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

@@ -0,0 +1,61 @@
+/**
+ * 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 type { FlowEngine } from '@nocobase/flow-engine';
+import { useEffect, useRef, type RefObject } from 'react';
+import type { BaseLayoutModel } from './BaseLayoutModel';
+
+export type UseLayoutRoutePageOptions<TModel extends BaseLayoutModel = BaseLayoutModel> = {
+  flowEngine: FlowEngine;
+  pageUid: string;
+  active?: boolean;
+  refreshDesktopRoutes?: () => Promise<unknown>;
+  layoutContentRef: RefObject<HTMLElement>;
+  getLayoutModel: (flowEngine: FlowEngine) => TModel | undefined;
+};
+
+/**
+ * 把 FlowRoute 页面的生命周期桥接到指定 Layout host model。
+ */
+export function useLayoutRoutePage<TModel extends BaseLayoutModel = BaseLayoutModel>(
+  options: UseLayoutRoutePageOptions<TModel>,
+) {
+  const { flowEngine, pageUid, active, refreshDesktopRoutes, layoutContentRef, getLayoutModel } = options;
+  const layoutModel = getLayoutModel(flowEngine);
+  const activeRef = useRef(active);
+  const refreshRef = useRef(refreshDesktopRoutes);
+
+  if (!layoutModel) {
+    throw new Error('[NocoBase] FlowRoute requires layout model. Please render FlowRoute under Layout.');
+  }
+
+  activeRef.current = active;
+  refreshRef.current = refreshDesktopRoutes;
+
+  useEffect(() => {
+    layoutModel.registerRoutePage(pageUid, {
+      active: activeRef.current ?? false,
+      refreshDesktopRoutes: refreshRef.current,
+      layoutContentElement: layoutContentRef.current,
+    });
+    return () => {
+      layoutModel.unregisterRoutePage(pageUid);
+    };
+  }, [layoutModel, pageUid, layoutContentRef]);
+
+  useEffect(() => {
+    layoutModel.updateRoutePage(pageUid, {
+      active,
+      refreshDesktopRoutes,
+      layoutContentElement: layoutContentRef.current,
+    });
+  }, [active, layoutModel, pageUid, refreshDesktopRoutes, layoutContentRef]);
+
+  return layoutModel;
+}

package/src/flow/components/AdminLayout.tsx

@@ -7,161 +7,11 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { useFlowEngine, FlowModelRenderer } from '@nocobase/flow-engine';
-import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
-import { getAdminLayoutModel, AdminLayoutModel } from '..';
-import { useApp } from '../../hooks/useApp';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { NocoBaseDesktopRouteType } from '../../flow-compat';
-import {
-  findFirstV2LandingRoute,
-  resolveAdminRouteRuntimeTarget,
-  toRouterNavigationPath,
-} from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
+import React, { type FC } from 'react';
+import { LayoutRoute } from '../../layout-manager/LayoutRoute';
 
-const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ children }) => {
-  const flowEngine = useFlowEngine();
-  const app = useApp();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const params = useParams();
-  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]);
-
-  useEffect(() => {
-    replaceTriggeredRef.current = false;
-  }, [location.pathname, location.search, location.hash, params.name]);
-
-  useEffect(() => {
-    let active = true;
-
-    const run = async () => {
-      setReady(false);
-
-      if (!isAdminRoot && !params.name) {
-        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 (params.name) {
-        const currentRoute = routeRepository?.getRouteBySchemaUid?.(params.name);
-        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,
-    params.name,
-    routeRepository,
-  ]);
-
-  if (!ready) {
-    return null;
-  }
-
-  return <>{children}</>;
-};
-
-const AdminLayout: FC = (props) => {
-  const flowEngine = useFlowEngine();
-  const model = getAdminLayoutModel(flowEngine, {
-    create: true,
-    props,
-    use: AdminLayoutModel,
-  });
-
-  if (!model) {
-    throw new Error('[NocoBase] Failed to create admin-layout-model.');
-  }
-
-  return (
-    <AdminLayoutEntryGuard>
-      <FlowModelRenderer model={model} />
-    </AdminLayoutEntryGuard>
-  );
+const AdminLayout: FC = () => {
+  return <LayoutRoute layoutRouteName="admin" />;
 };
 
 export default AdminLayout;