@nocobase/client-v2 2.1.15 → 2.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.15",
+  "version": "2.1.18",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.1.15",
-    "@nocobase/flow-engine": "2.1.15",
-    "@nocobase/sdk": "2.1.15",
-    "@nocobase/shared": "2.1.15",
-    "@nocobase/utils": "2.1.15",
+    "@nocobase/evaluators": "2.1.18",
+    "@nocobase/flow-engine": "2.1.18",
+    "@nocobase/sdk": "2.1.18",
+    "@nocobase/shared": "2.1.18",
+    "@nocobase/utils": "2.1.18",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -46,5 +46,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "1219585bbb4f5ebb6378be99fa2ff04b3376e6a2"
+  "gitHead": "2234b42b21c96d22a4b65a1f16a65ae61f434779"
 }

package/src/flow/FlowPage.tsx

@@ -14,7 +14,7 @@ import {
   useFlowModelById,
   useFlowViewContext,
 } from '@nocobase/flow-engine';
-import type { FlowModel, FlowModelRendererProps, ModelConstructor } from '@nocobase/flow-engine';
+import type { FlowEngineContext, FlowModel, FlowModelRendererProps, ModelConstructor } from '@nocobase/flow-engine';
 import { useRequest } from 'ahooks';
 import React from 'react';
 import FlowRoute from './components/FlowRoute';
@@ -57,10 +57,36 @@ type FlowPageProps = {
   showFlowSettings?: FlowModelRendererProps['showFlowSettings'];
 };
 
+type FlowPageViewContext = FlowEngineContext & {
+  view?: {
+    inputArgs?: {
+      isMobileLayout?: unknown;
+    };
+  };
+};
+
+const bindViewLayoutState = (model: FlowModel, ctx?: FlowPageViewContext | null) => {
+  const hasViewMobileLayout = typeof ctx?.view?.inputArgs?.isMobileLayout === 'boolean';
+  const hasContextMobileLayout = typeof ctx?.isMobileLayout === 'boolean';
+  if (!hasViewMobileLayout && !hasContextMobileLayout) {
+    return;
+  }
+
+  model.context.defineProperty('isMobileLayout', {
+    get: () => {
+      if (typeof ctx?.isMobileLayout === 'boolean') {
+        return ctx.isMobileLayout;
+      }
+      return !!ctx?.view?.inputArgs?.isMobileLayout;
+    },
+    cache: false,
+  });
+};
+
 export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknown>) => {
   const { pageModelClass = 'ChildPageModel', parentId, onModelLoaded, defaultTabTitle, ...rest } = props;
   const flowEngine = useFlowEngine();
-  const ctx = useFlowViewContext();
+  const ctx = useFlowViewContext<FlowPageViewContext>();
   const { loading, data, error } = useRequest(
     async () => {
       const ModelClass = await flowEngine.getModelClassAsync(pageModelClass);
@@ -105,6 +131,7 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
       const data = await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled });
       if (data?.uid && onModelLoaded) {
         data.context.addDelegate(ctx);
+        bindViewLayoutState(data, ctx);
         data.removeParentDelegate();
         onModelLoaded(data.uid, data);
       }

package/src/flow/__tests__/FlowPage.test.tsx

@@ -7,44 +7,105 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { FlowPage } from '../FlowPage';
 
-const mocks = vi.hoisted(() => ({
-  rendererProps: undefined as any,
-  model: {
+type TestContextProperty = {
+  value?: unknown;
+  get?: () => unknown;
+};
+
+type TestModelContext = {
+  isMobileLayout: boolean;
+  themeToken: {
+    marginBlock: number;
+  };
+  addDelegate: ReturnType<typeof vi.fn>;
+  defineProperty: ReturnType<typeof vi.fn>;
+};
+
+type TestPageModel = {
+  uid: string;
+  props: {
+    showFlowSettings: boolean;
+  };
+  context: TestModelContext;
+  removeParentDelegate: ReturnType<typeof vi.fn>;
+};
+
+type RendererProps = {
+  model?: TestPageModel;
+  showFlowSettings?: boolean;
+} & Record<string, unknown>;
+
+const defineContextProperty = (context: TestModelContext, key: string, property: TestContextProperty) => {
+  Object.defineProperty(context, key, {
+    configurable: true,
+    enumerable: true,
+    get: property.get || (() => property.value),
+  });
+};
+
+const createPageModel = (): TestPageModel => {
+  const context = {
+    isMobileLayout: false,
+    themeToken: {
+      marginBlock: 16,
+    },
+    addDelegate: vi.fn(),
+    defineProperty: vi.fn((key: string, property: TestContextProperty) => {
+      defineContextProperty(context, key, property);
+    }),
+  };
+
+  return {
     uid: 'public-form-page',
     props: {
       showFlowSettings: false,
     },
-    context: {
-      isMobileLayout: false,
-      themeToken: {
-        marginBlock: 16,
-      },
-    },
-  },
+    context,
+    removeParentDelegate: vi.fn(),
+  };
+};
+
+const mocks = vi.hoisted(() => ({
+  rendererMobileStates: [] as boolean[],
+  rendererProps: undefined as RendererProps | undefined,
+  model: undefined as TestPageModel | undefined,
+  viewInputMobileLayout: true as boolean | undefined,
+  contextMobileLayout: undefined as boolean | undefined,
 }));
 
 vi.mock('@nocobase/flow-engine', async () => {
-  const actual = await vi.importActual<any>('@nocobase/flow-engine');
+  const actual = await vi.importActual<typeof import('@nocobase/flow-engine')>('@nocobase/flow-engine');
   const ReactModule = await import('react');
+  class TestPageModelClass {}
 
   return {
     ...actual,
-    FlowModelRenderer: vi.fn((props: any) => {
+    FlowModelRenderer: vi.fn((props: RendererProps) => {
       mocks.rendererProps = props;
+      if (typeof props.model?.context.isMobileLayout === 'boolean') {
+        mocks.rendererMobileStates.push(props.model.context.isMobileLayout);
+      }
       return ReactModule.createElement('div', { 'data-testid': 'flow-model-renderer' });
     }),
     useFlowEngine: vi.fn(() => ({
-      getModelClassAsync: vi.fn(),
-      loadOrCreateModel: vi.fn(),
+      getModelClassAsync: vi.fn(async () => TestPageModelClass),
+      loadOrCreateModel: vi.fn(async () => mocks.model),
       context: {},
+      translate: vi.fn((value: string) => value),
     })),
     useFlowModelById: vi.fn(() => mocks.model),
     useFlowViewContext: vi.fn(() => ({
+      view: {
+        inputArgs: {
+          ...(typeof mocks.viewInputMobileLayout === 'boolean' ? { isMobileLayout: mocks.viewInputMobileLayout } : {}),
+        },
+      },
+      ...(typeof mocks.contextMobileLayout === 'boolean' ? { isMobileLayout: mocks.contextMobileLayout } : {}),
       themeToken: {
         marginBlock: 16,
       },
@@ -53,27 +114,93 @@ vi.mock('@nocobase/flow-engine', async () => {
 });
 
 vi.mock('ahooks', async () => {
-  const actual = await vi.importActual<any>('ahooks');
+  const actual = await vi.importActual<typeof import('ahooks')>('ahooks');
+  const ReactModule = await import('react');
   return {
     ...actual,
-    useRequest: vi.fn(() => ({
-      loading: false,
-      data: {
-        uid: 'public-form-page',
-      },
-      error: null,
-    })),
+    useRequest: vi.fn((service: () => Promise<unknown>) => {
+      const serviceRef = ReactModule.useRef(service);
+      const [state, setState] = ReactModule.useState<{
+        loading: boolean;
+        data?: unknown;
+        error?: unknown;
+      }>({
+        loading: true,
+      });
+
+      ReactModule.useEffect(() => {
+        let active = true;
+        serviceRef
+          .current()
+          .then((data) => {
+            if (active) {
+              setState({ loading: false, data, error: null });
+            }
+          })
+          .catch((error) => {
+            if (active) {
+              setState({ loading: false, data: undefined, error });
+            }
+          });
+
+        return () => {
+          active = false;
+        };
+      }, []);
+
+      return state;
+    }),
   };
 });
 
 describe('FlowPage', () => {
   afterEach(() => {
+    mocks.rendererMobileStates = [];
     mocks.rendererProps = undefined;
+    mocks.model = undefined;
+    mocks.viewInputMobileLayout = true;
+    mocks.contextMobileLayout = undefined;
   });
 
-  it('uses showFlowSettings from page model props', () => {
+  it('uses showFlowSettings from page model props', async () => {
+    mocks.model = createPageModel();
     render(<FlowPage />);
 
-    expect(mocks.rendererProps?.showFlowSettings).toBe(false);
+    await waitFor(() => {
+      expect((mocks.rendererProps as { showFlowSettings?: boolean } | undefined)?.showFlowSettings).toBe(false);
+    });
+  });
+
+  it('exposes mobile layout state from route-managed view inputArgs before first render', async () => {
+    mocks.model = createPageModel();
+    render(<FlowPage onModelLoaded={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(mocks.rendererMobileStates.length).toBeGreaterThan(0);
+    });
+    expect(mocks.rendererMobileStates[0]).toBe(true);
   });
+
+  it.each([
+    { viewInputMobileLayout: true, contextMobileLayout: false, expected: false },
+    { viewInputMobileLayout: false, contextMobileLayout: true, expected: true },
+    { viewInputMobileLayout: undefined, contextMobileLayout: true, expected: true },
+    { viewInputMobileLayout: undefined, contextMobileLayout: false, expected: false },
+    { viewInputMobileLayout: true, contextMobileLayout: undefined, expected: true },
+    { viewInputMobileLayout: false, contextMobileLayout: undefined, expected: false },
+  ])(
+    'resolves mobile layout state from view input args and layout context %#',
+    async ({ viewInputMobileLayout, contextMobileLayout, expected }) => {
+      mocks.viewInputMobileLayout = viewInputMobileLayout;
+      mocks.contextMobileLayout = contextMobileLayout;
+      mocks.model = createPageModel();
+
+      render(<FlowPage onModelLoaded={vi.fn()} />);
+
+      await waitFor(() => {
+        expect(mocks.rendererMobileStates.length).toBeGreaterThan(0);
+      });
+      expect(mocks.rendererMobileStates[0]).toBe(expected);
+    },
+  );
 });

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

@@ -111,6 +111,15 @@ const getDefaultBasePathnameFromRoutePath = (routePath?: string) => {
 
 const isKnownViewParamName = (segment: string) => ['tab', 'filterbytk', 'sourceid'].includes(segment);
 
+const isLegacyLayoutContentRouteName = (routeName: string, targetRouteName?: string) => {
+  return (
+    !!targetRouteName &&
+    ['page', 'page.tabs', 'page.tabs.popups', 'page.tab', 'page.view', 'page.tab.view'].some(
+      (legacyName) => targetRouteName === `${routeName}.${legacyName}`,
+    )
+  );
+};
+
 const isStandardLayoutRelativePath = (relativePath: string) => {
   if (!relativePath) {
     return true;
@@ -184,6 +193,7 @@ export class BaseLayoutModel<
 
   registerRoutePage(pageUid: string, meta: RoutePageMeta) {
     this.routePageMetaMap.set(pageUid, meta);
+    this.restoreCurrentLayoutRouteFromRouterContext(pageUid);
     const routeModel = this.getCoordinator().registerPage(pageUid, meta);
     this.getCoordinator().syncRoute(this.getCurrentCoordinatorRouteLike());
     return routeModel;
@@ -364,6 +374,10 @@ export class BaseLayoutModel<
       return;
     }
 
+    if (this.shouldIgnoreStaleLayoutRouteCleanup(routeLike)) {
+      return;
+    }
+
     this.currentLayoutRoute = null;
     this.activePageUid = '';
     this.routeCoordinator?.syncRoute({});
@@ -440,6 +454,98 @@ export class BaseLayoutModel<
     }
     return {};
   }
+
+  private restoreCurrentLayoutRouteFromRouterContext(pageUid: string) {
+    if (this.currentLayoutRoute?.type === 'page') {
+      return;
+    }
+
+    const routeLike = this.getRouterContextRouteLike();
+    if (!routeLike) {
+      return;
+    }
+
+    if (!this.isRouteLikeOwnedByCurrentLayout(routeLike)) {
+      return;
+    }
+
+    const layoutRoute = this.resolveLayoutRoute({
+      ...routeLike,
+      layoutRouteName: routeLike.layoutRouteName || this.layout.routeName,
+    });
+    if (layoutRoute.type !== 'page' || layoutRoute.pageUid !== pageUid) {
+      return;
+    }
+
+    this.currentLayoutRoute = layoutRoute;
+    this.activePageUid = layoutRoute.pageUid;
+  }
+
+  private shouldIgnoreStaleLayoutRouteCleanup(routeLike?: LayoutRouteLike) {
+    if (!routeLike?.pathname || this.currentLayoutRoute?.type !== 'page') {
+      return false;
+    }
+
+    const currentLayoutRoute = this.currentLayoutRoute;
+    if (!this.routePageMetaMap.has(currentLayoutRoute.pageUid)) {
+      return false;
+    }
+
+    const routeLikePathname = normalizePathname(routeLike.pathname);
+    if (routeLikePathname !== currentLayoutRoute.pathname) {
+      return false;
+    }
+
+    const routerRouteLike = this.getRouterContextRouteLike();
+    if (!routerRouteLike) {
+      return false;
+    }
+
+    if (!this.isRouteLikeOwnedByCurrentLayout(routerRouteLike)) {
+      return false;
+    }
+
+    const routerLayoutRoute = this.resolveLayoutRoute({
+      ...routerRouteLike,
+      layoutRouteName: routerRouteLike.layoutRouteName || this.layout.routeName,
+    });
+
+    return (
+      routerLayoutRoute.type === 'page' &&
+      routerLayoutRoute.pageUid === currentLayoutRoute.pageUid &&
+      routerLayoutRoute.pathname === currentLayoutRoute.pathname
+    );
+  }
+
+  private getRouterContextRouteLike(): LayoutRouteLike | null {
+    const route = this.flowEngine.context.route as LayoutRouteLike | undefined;
+    if (!route?.pathname) {
+      return null;
+    }
+
+    return {
+      id: route.id,
+      name: route.name || route.id,
+      pathname: route.pathname,
+      params: route.params,
+      layoutRouteName: route.layoutRouteName,
+      layoutBasePathname: route.layoutBasePathname,
+    };
+  }
+
+  private isRouteLikeOwnedByCurrentLayout(routeLike: LayoutRouteLike) {
+    if (routeLike.layoutRouteName) {
+      return routeLike.layoutRouteName === this.layout.routeName;
+    }
+
+    const layoutBasePathname = getDefaultBasePathnameFromRoutePath(this.layout.routePath);
+    if (routeLike.layoutBasePathname && layoutBasePathname) {
+      return normalizeBasePathname(routeLike.layoutBasePathname) === normalizeBasePathname(layoutBasePathname);
+    }
+
+    const routeName = routeLike.name || routeLike.id;
+    return this.isLayoutContentRoute(routeLike) || isLegacyLayoutContentRouteName(this.layout.routeName, routeName);
+  }
 }
 
 /**