@nocobase/client-v2 2.2.0-beta.8 → 2.2.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.2.0-beta.8",
+  "version": "2.2.0-beta.9",
   "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.2.0-beta.8",
-    "@nocobase/flow-engine": "2.2.0-beta.8",
-    "@nocobase/sdk": "2.2.0-beta.8",
-    "@nocobase/shared": "2.2.0-beta.8",
-    "@nocobase/utils": "2.2.0-beta.8",
+    "@nocobase/evaluators": "2.2.0-beta.9",
+    "@nocobase/flow-engine": "2.2.0-beta.9",
+    "@nocobase/sdk": "2.2.0-beta.9",
+    "@nocobase/shared": "2.2.0-beta.9",
+    "@nocobase/utils": "2.2.0-beta.9",
     "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": "fa2502c1e9faf6d74b3f51b42dbc6546638d46af"
+  "gitHead": "60e3d7abbaa0c7cead76f71a4f3d5eedb6b8acdb"
 }

package/src/BaseApplication.tsx

@@ -30,6 +30,7 @@ import AntdAppProvider from './theme/AntdAppProvider';
 import { GlobalThemeProvider } from './theme';
 import { AIManager } from './ai';
 import { AppError, AppMaintaining, AppMaintainingDialog, AppNotFound, AppSpin, BlankComponent } from './components';
+import { EntryActionManager } from './entry-actions';
 import { SystemSettingsSource } from './flow/system-settings';
 import { LayoutManager } from './layout-manager/LayoutManager';
 import type { PluginClass, PluginManager, PluginType } from './PluginManager';
@@ -126,6 +127,7 @@ export abstract class BaseApplication<
   public pluginManager: TPluginManager;
   public pluginSettingsManager: TPluginSettingsManager;
   public layoutManager: LayoutManager<this>;
+  public entryActionManager = new EntryActionManager();
   public aiManager!: AIManager;
   public devDynamicImport?: DevDynamicImport;
   public requirejs!: RequireJS;

package/src/RouteRepository.ts

@@ -268,6 +268,16 @@ export class RouteRepository {
     return this.findRoute(this.listAccessible(), schemaUid);
   }
 
+  /**
+   * 通过路由 id 反查对应路由节点。
+   *
+   * @param routeId 桌面路由主键
+   * @returns 匹配到的路由节点
+   */
+  getRouteById(routeId: string | number): NocoBaseDesktopRoute | undefined {
+    return this.findRouteById(this.listAccessible(), routeId);
+  }
+
   protected getAPIClient(): APIClient {
     if (!this.ctx?.api) {
       throw new Error('[NocoBase] RouteRepository requires context.api.');
@@ -346,4 +356,19 @@ export class RouteRepository {
     }
     return undefined;
   }
+
+  private findRouteById(routes: NocoBaseDesktopRoute[], routeId: string | number): NocoBaseDesktopRoute | undefined {
+    for (const route of routes) {
+      if (route.id != null && String(route.id) === String(routeId)) {
+        return route;
+      }
+      if (route.children) {
+        const found = this.findRouteById(route.children, routeId);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return undefined;
+  }
 }

package/src/RouterManager.tsx

@@ -26,6 +26,7 @@ import type { BaseApplication } from './BaseApplication';
 import { BlankComponent, RouterContextCleaner } from './components';
 import { RouterBridge } from './components/RouterBridge';
 import { Router } from '@remix-run/router';
+import { getV2EffectiveBasePath } from './authRedirect';
 
 export interface BrowserRouterOptions extends Omit<BrowserRouterProps, 'children'> {
   type?: 'browser';
@@ -55,6 +56,87 @@ export interface RouteType extends Omit<RouteObject, 'children' | 'Component'> {
 export type RenderComponentType = (Component: ComponentTypeAndString, props?: any) => React.ReactNode;
 export type RouterComponentType = React.FC<{ BaseLayout?: ComponentType }>;
 
+const DEFAULT_ADMIN_ROUTE_PATH = '/admin';
+
+type AdminRouteNavigationTarget = {
+  currentPathname?: string;
+  targetPathname: unknown;
+  basePath?: string;
+  adminRoutePath?: string;
+  replace?: boolean;
+};
+
+function trimPathSearchAndHash(pathname: string) {
+  return pathname.split(/[?#]/)[0];
+}
+
+function splitPathSearchAndHash(pathname: string) {
+  const match = pathname.match(/^([^?#]*)(.*)$/);
+  return {
+    pathname: match?.[1] || '',
+    suffix: match?.[2] || '',
+  };
+}
+
+function normalizeRootPath(pathname?: string) {
+  const trimmed = trimPathSearchAndHash(pathname || '').trim();
+  if (!trimmed || trimmed === '/') {
+    return '/';
+  }
+  return `/${trimmed.replace(/^\/+|\/+$/g, '')}`;
+}
+
+function isRootRelativePath(pathname: string) {
+  return pathname.startsWith('/') && !pathname.startsWith('//') && !pathname.startsWith('/\\');
+}
+
+function removeBasePath(pathname: string, basePath?: string) {
+  const normalizedPathname = normalizeRootPath(pathname);
+  const normalizedBasePath = normalizeRootPath(basePath);
+
+  if (normalizedBasePath === '/') {
+    return normalizedPathname;
+  }
+  if (normalizedPathname === normalizedBasePath) {
+    return '/';
+  }
+  if (normalizedPathname.startsWith(`${normalizedBasePath}/`)) {
+    return normalizeRootPath(normalizedPathname.slice(normalizedBasePath.length));
+  }
+  return normalizedPathname;
+}
+
+function removeAppSegment(pathname: string) {
+  return normalizeRootPath(pathname).replace(/^\/(?:apps|_app)\/[^/]+(?=\/|$)/, '') || '/';
+}
+
+function normalizePortalRoutePath(pathname: string, basePath?: string) {
+  return removeAppSegment(removeBasePath(pathname, basePath));
+}
+
+function isSameOrChildPath(pathname: string, basePath: string) {
+  const normalizedPathname = normalizeRootPath(pathname);
+  const normalizedBasePath = normalizeRootPath(basePath);
+  return normalizedPathname === normalizedBasePath || normalizedPathname.startsWith(`${normalizedBasePath}/`);
+}
+
+export function shouldOpenAdminRouteInNewWindow(options: AdminRouteNavigationTarget) {
+  if (options.replace || typeof options.targetPathname !== 'string') {
+    return false;
+  }
+
+  const targetPathname = options.targetPathname.trim();
+  if (!isRootRelativePath(targetPathname)) {
+    return false;
+  }
+
+  const adminRoutePath = normalizeRootPath(options.adminRoutePath || DEFAULT_ADMIN_ROUTE_PATH);
+  const currentRoutePath = normalizePortalRoutePath(options.currentPathname || '/', options.basePath);
+  const targetRoutePath = normalizePortalRoutePath(targetPathname, options.basePath);
+
+  return !isSameOrChildPath(currentRoutePath, adminRoutePath) && isSameOrChildPath(targetRoutePath, adminRoutePath);
+}
+
 function removeBasename(pathname: string, basename?: string) {
   if (!basename || basename === '/') {
     return pathname;
@@ -72,6 +154,7 @@ function removeBasename(pathname: string, basename?: string) {
 export class RouterManager<TApp extends BaseApplication<any> = BaseApplication<any>> {
   protected routes: Record<string, RouteType> = {};
   protected options: RouterOptions;
+  private routerNavigate?: Router['navigate'];
   public app: TApp;
   public router!: Router;
   get basename() {
@@ -81,7 +164,7 @@ export class RouterManager<TApp extends BaseApplication<any> = BaseApplication<a
     return this.router.state;
   }
   get navigate() {
-    return this.router.navigate;
+    return this.navigateWithPortalPolicy;
   }
 
   constructor(options: RouterOptions = {}, app: TApp) {
@@ -90,6 +173,62 @@ export class RouterManager<TApp extends BaseApplication<any> = BaseApplication<a
     this.routes = options.routes || {};
   }
 
+  private navigateWithPortalPolicy: Router['navigate'] = ((to, opts) => {
+    if (this.shouldOpenAdminRouteInNewWindow(to, opts)) {
+      window.open(this.getAdminRouteNavigationHref(to as string), '_blank', 'noopener,noreferrer');
+      return Promise.resolve();
+    }
+
+    const navigate = this.routerNavigate || this.router.navigate.bind(this.router);
+    return navigate(to, opts);
+  }) as Router['navigate'];
+
+  private shouldOpenAdminRouteInNewWindow(
+    to: Parameters<Router['navigate']>[0],
+    opts?: Parameters<Router['navigate']>[1],
+  ) {
+    if (this.options.type && this.options.type !== 'browser') {
+      return false;
+    }
+
+    return shouldOpenAdminRouteInNewWindow({
+      currentPathname:
+        typeof window !== 'undefined' ? window.location.pathname : this.router?.state?.location?.pathname,
+      targetPathname: to,
+      basePath: this.getRuntimeBasePath(),
+      adminRoutePath: this.getAdminRoutePath(),
+      replace: opts?.replace,
+    });
+  }
+
+  private getRuntimeBasePath() {
+    return getV2EffectiveBasePath(this.app);
+  }
+
+  private getAdminRoutePath() {
+    try {
+      return this.app.layoutManager?.getLayout?.('admin')?.routePath || DEFAULT_ADMIN_ROUTE_PATH;
+    } catch {
+      return DEFAULT_ADMIN_ROUTE_PATH;
+    }
+  }
+
+  private getAdminRouteNavigationHref(pathname: string) {
+    const { pathname: rawPathname, suffix } = splitPathSearchAndHash(pathname.trim());
+    const normalizedPathname = normalizeRootPath(rawPathname);
+    const runtimeBasePath = this.getRuntimeBasePath();
+    const normalizedBasePath = normalizeRootPath(runtimeBasePath);
+
+    if (
+      normalizedBasePath !== '/' &&
+      (normalizedPathname === normalizedBasePath || normalizedPathname.startsWith(`${normalizedBasePath}/`))
+    ) {
+      return `${normalizedPathname}${suffix}`;
+    }
+
+    return `${this.app.getHref(normalizePortalRoutePath(normalizedPathname, runtimeBasePath))}${suffix}`;
+  }
+
   protected resolveLoadedComponent(moduleOrComponent: ComponentLoaderResult): ComponentTypeAndString | undefined {
     if (!moduleOrComponent) {
       return undefined;
@@ -257,6 +396,8 @@ export class RouterManager<TApp extends BaseApplication<any> = BaseApplication<a
       ],
       opts,
     );
+    this.routerNavigate = this.router.navigate.bind(this.router) as Router['navigate'];
+    this.router.navigate = this.navigateWithPortalPolicy;
 
     const RenderRouter: RouterComponentType = ({ BaseLayout = BlankComponent }) => {
       return (

package/src/__tests__/RouteRepository.test.ts

@@ -140,6 +140,29 @@ describe('RouteRepository', () => {
     expect(repository.getRouteBySchemaUid('custom-page')).toBeUndefined();
   });
 
+  it('should find nested routes by id', () => {
+    const { repository } = createRouteRepository();
+
+    repository.setRoutes([
+      {
+        id: 1,
+        schemaUid: 'group-1',
+        children: [
+          {
+            id: 11,
+            schemaUid: 'page-1',
+          },
+        ],
+      },
+    ] as NocoBaseDesktopRoute[]);
+
+    expect(repository.getRouteById('11')).toMatchObject({
+      id: 11,
+      schemaUid: 'page-1',
+    });
+    expect(repository.getRouteById('missing')).toBeUndefined();
+  });
+
   it('should notify only subscribers for the changed layout cache', () => {
     const { repository } = createRouteRepository();
     const adminEvents: string[][] = [];

package/src/__tests__/RouterManager.test.ts

@@ -0,0 +1,125 @@
+/**
+ * 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 { BaseApplication } from '../BaseApplication';
+import { RouterManager, shouldOpenAdminRouteInNewWindow } from '../RouterManager';
+
+describe('RouterManager', () => {
+  describe('shouldOpenAdminRouteInNewWindow', () => {
+    it('opens admin route in a new window from a non-admin portal', () => {
+      expect(
+        shouldOpenAdminRouteInNewWindow({
+          currentPathname: '/v/test',
+          targetPathname: '/admin/settings',
+          basePath: '/v',
+          adminRoutePath: '/admin',
+        }),
+      ).toBe(true);
+    });
+
+    it('supports target pathname with the v2 base path', () => {
+      expect(
+        shouldOpenAdminRouteInNewWindow({
+          currentPathname: '/nocobase/v/test',
+          targetPathname: '/nocobase/v/admin/settings',
+          basePath: '/nocobase/v',
+          adminRoutePath: '/admin',
+        }),
+      ).toBe(true);
+    });
+
+    it('supports custom portal routes in sub-apps', () => {
+      expect(
+        shouldOpenAdminRouteInNewWindow({
+          currentPathname: '/v/apps/a_9xlild35jir/crm-amd/ekeisumx1zu',
+          targetPathname: '/v/apps/a_9xlild35jir/admin/settings',
+          basePath: '/v',
+          adminRoutePath: '/admin',
+        }),
+      ).toBe(true);
+    });
+
+    it('keeps admin route navigation in the current window when already in sub-app admin', () => {
+      expect(
+        shouldOpenAdminRouteInNewWindow({
+          currentPathname: '/v/apps/a_9xlild35jir/admin',
+          targetPathname: '/v/apps/a_9xlild35jir/admin/settings',
+          basePath: '/v',
+          adminRoutePath: '/admin',
+        }),
+      ).toBe(false);
+    });
+
+    it('keeps admin route navigation in the current window when already in admin', () => {
+      expect(
+        shouldOpenAdminRouteInNewWindow({
+          currentPathname: '/v/admin',
+          targetPathname: '/admin/settings',
+          basePath: '/v',
+          adminRoutePath: '/admin',
+        }),
+      ).toBe(false);
+    });
+
+    it('keeps non-admin portal navigation in the current window', () => {
+      expect(
+        shouldOpenAdminRouteInNewWindow({
+          currentPathname: '/v/test',
+          targetPathname: '/test/page',
+          basePath: '/v',
+          adminRoutePath: '/admin',
+        }),
+      ).toBe(false);
+    });
+
+    it('does not intercept replace navigation or relative paths', () => {
+      expect(
+        shouldOpenAdminRouteInNewWindow({
+          currentPathname: '/v/test',
+          targetPathname: '/admin/settings',
+          basePath: '/v',
+          adminRoutePath: '/admin',
+          replace: true,
+        }),
+      ).toBe(false);
+      expect(
+        shouldOpenAdminRouteInNewWindow({
+          currentPathname: '/v/test',
+          targetPathname: 'admin/settings',
+          basePath: '/v',
+          adminRoutePath: '/admin',
+        }),
+      ).toBe(false);
+    });
+  });
+
+  it('opens admin route in a new window through the underlying router navigate from a sub-app portal', async () => {
+    const app = {
+      name: 'a_9xlild35jir',
+      getPublicPath: () => '/v/',
+      getHref: (pathname: string) => `/v/apps/a_9xlild35jir/${pathname.replace(/^\/+/, '')}`,
+      layoutManager: {
+        getLayout: () => ({ routePath: '/admin' }),
+      },
+      renderComponent: () => null,
+    } as unknown as BaseApplication<unknown>;
+    const manager = new RouterManager({ type: 'browser' }, app);
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null);
+
+    window.history.pushState({}, '', '/v/apps/a_9xlild35jir/crm-amd/ekeisumx1zu');
+    manager.getRouterComponent();
+    await manager.router.navigate('/admin/settings/version-control/list');
+
+    expect(open).toHaveBeenCalledWith(
+      '/v/apps/a_9xlild35jir/admin/settings/version-control/list',
+      '_blank',
+      'noopener,noreferrer',
+    );
+  });
+});

package/src/__tests__/authRedirect.test.ts

@@ -10,6 +10,7 @@
 import {
   buildV2SigninHref,
   getCurrentV2RedirectPath,
+  normalizeV2RedirectPath,
   redirectToV2Signin,
   resolveV2SigninRedirect,
 } from '../authRedirect';
@@ -133,6 +134,22 @@ describe('auth redirect helpers', () => {
   });
 
   describe('v2 sub-app context (router basename contains /apps/<id>/)', () => {
+    it('should normalize signin redirect fallback under the current sub-app basename', () => {
+      const app = {
+        getPublicPath: () => '/v/',
+        router: {
+          getBasename: () => '/v/apps/test-app/',
+        },
+      } as any;
+
+      expect(normalizeV2RedirectPath(app, '')).toBe('/v/apps/test-app/admin/');
+      expect(normalizeV2RedirectPath(app, '/admin/?tab=overview#panel')).toBe(
+        '/v/apps/test-app/admin/?tab=overview#panel',
+      );
+      expect(normalizeV2RedirectPath(app, '/v/apps/test-app/admin/')).toBe('/v/apps/test-app/admin/');
+      expect(normalizeV2RedirectPath(app, '/v/admin/')).toBe('/v/apps/test-app/admin/');
+    });
+
     it('should preserve sub-app segment when building current redirect path under simple public path', () => {
       const app = {
         getPublicPath: () => '/v2/',

package/src/authRedirect.ts

@@ -204,6 +204,44 @@ function getDefaultV2AdminRedirectPath(app: AppLike) {
   return joinRootRelativePath(getV2EffectiveBasePath(app), '/admin');
 }
 
+function isSafeRootRelativePath(value?: string | null) {
+  return !!value && value.startsWith('/') && !value.startsWith('//') && !value.startsWith('/\\');
+}
+
+function preserveTrailingSlash(originalPathname: string, value: string) {
+  if (originalPathname !== '/' && originalPathname.endsWith('/') && !value.endsWith('/')) {
+    return `${value}/`;
+  }
+  return value;
+}
+
+export function normalizeV2RedirectPath(app: AppLike, target?: string | null, fallbackPath = '/admin/') {
+  // In a v2 sub-app, publicPath can be `/v/` while the active router
+  // basename is `/v/apps/a/`. Redirects must resolve under the basename.
+  const basePath = trimTrailingSlashes(getV2EffectiveBasePath(app)) || '/';
+  const fallbackTarget = isSafeRootRelativePath(fallbackPath) ? fallbackPath : '/admin/';
+  const rawTarget = isSafeRootRelativePath(target) ? target : fallbackTarget;
+  let { pathname, search, hash } = splitPathLike(rawTarget);
+  let normalizedPathname = normalizePathname(pathname);
+
+  // Already under the current v2 runtime, e.g. `/v/apps/a/admin/`.
+  if (basePath === '/' || normalizedPathname === basePath || normalizedPathname.startsWith(`${basePath}/`)) {
+    return `${preserveTrailingSlash(pathname, normalizedPathname)}${normalizeSearch(search)}${normalizeHash(hash)}`;
+  }
+
+  const publicPath = trimTrailingSlashes(getV2PublicPath(app)) || '/';
+  // Under v2 publicPath but outside the current basename, e.g. `/v/admin/`
+  // inside `/v/apps/a/`; use fallback so it lands on `/v/apps/a/admin/`.
+  if (publicPath !== '/' && (normalizedPathname === publicPath || normalizedPathname.startsWith(`${publicPath}/`))) {
+    ({ pathname, search, hash } = splitPathLike(fallbackTarget));
+    normalizedPathname = normalizePathname(pathname);
+  }
+
+  // Basename-relative target, e.g. `/admin/`, becomes `/v/apps/a/admin/`.
+  const joinedPathname = preserveTrailingSlash(pathname, joinRootRelativePath(basePath, normalizedPathname));
+  return `${joinedPathname}${normalizeSearch(search)}${normalizeHash(hash)}`;
+}
+
 /**
  * 将当前 v2 页面地址转换为根相对 redirect 路径。
  *

package/src/entry-actions/EntryActionManager.ts

@@ -0,0 +1,76 @@
+/**
+ * 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 {
+  define,
+  observable,
+  type FlowModelContext,
+  type SubModelItem,
+  type SubModelItemsType,
+} from '@nocobase/flow-engine';
+
+export type EntryActionScope = 'action-panel' | 'app-switcher' | string;
+
+export type EntryActionProvider = (ctx: FlowModelContext) => SubModelItem[] | Promise<SubModelItem[]>;
+
+type ProviderRecord = {
+  name: string;
+  scope: EntryActionScope;
+  provider: EntryActionProvider;
+  sort: number;
+};
+
+export class EntryActionManager {
+  private readonly providers = new Map<string, ProviderRecord>();
+  revision = 0;
+
+  constructor() {
+    define(this, {
+      revision: observable.ref,
+    });
+  }
+
+  register(name: string, options: { scope: EntryActionScope; provider: EntryActionProvider; sort?: number }) {
+    this.providers.set(name, {
+      name,
+      scope: options.scope,
+      provider: options.provider,
+      sort: options.sort ?? 0,
+    });
+    this.invalidate();
+  }
+
+  unregister(name: string) {
+    this.providers.delete(name);
+    this.invalidate();
+  }
+
+  invalidate() {
+    this.revision += 1;
+  }
+
+  getItems(scope: EntryActionScope): SubModelItemsType {
+    return async (ctx) => {
+      const providers = [...this.providers.values()]
+        .filter((item) => item.scope === scope)
+        .sort((a, b) => a.sort - b.sort);
+      const groups = await Promise.all(
+        providers.map(async (item) => {
+          try {
+            return await item.provider(ctx);
+          } catch (error) {
+            console.error(`[NocoBase] Failed to load entry action provider "${item.name}".`, error);
+            return [];
+          }
+        }),
+      );
+      return groups.flat();
+    };
+  }
+}

package/src/entry-actions/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export * from './EntryActionManager';

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