@nocobase/client-v2 2.2.0-alpha.3 → 2.2.0-alpha.5

package/src/components/form/TypedVariableInput.tsx

@@ -52,7 +52,9 @@ export interface TypedVariableInputProps {
    * Allowed constant types. The `Constant` switcher entry always exposes a
    * typed submenu (matching v1 `Variable.Input`) so users can see what type
    * the constant is, even when only one type is permitted. Default: all four
-   * supported types.
+   * supported types. Passing `[]` switches the component into a variable-only
+   * mode: constants/null are hidden, the empty state becomes a readonly
+   * placeholder, and clearing a selected variable resets to `null`.
    */
   types?: TypedConstantSpec[];
   /**
@@ -89,6 +91,12 @@ export interface TypedVariableInputProps {
   defaultToFirstConstantTypeWhenUndefined?: boolean;
   /** Variable-token delimiters. Default `['{{', '}}']` — see `VariableInput`. */
   delimiters?: VariableDelimiters;
+  /**
+   * Hide variable choices from the switcher. In variable-only mode this hides
+   * the selector button entirely; in mixed constant/variable mode it keeps the
+   * null/constant choices but removes variable entries.
+   */
+  hideVariable?: boolean;
   disabled?: boolean;
   placeholder?: string;
   style?: React.CSSProperties;
@@ -400,6 +408,7 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
     nullable = true,
     defaultToFirstConstantTypeWhenUndefined = true,
     delimiters,
+    hideVariable = false,
     disabled,
     placeholder,
     style,
@@ -418,13 +427,14 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
   const formatVariablePath = useMemo(() => makeFormatVariablePath(delimiters), [delimiters]);
 
   const normalizedTypes = useMemo(() => normalizeTypes(types), [types]);
+  const variableOnly = normalizedTypes.length === 0;
   const defaultedValue = useMemo(() => {
-    if (!defaultToFirstConstantTypeWhenUndefined || value !== undefined) {
+    if (variableOnly || !defaultToFirstConstantTypeWhenUndefined || value !== undefined) {
       return undefined;
     }
     const firstType = normalizedTypes[0];
     return firstType ? defaultValueFor(firstType.type) : undefined;
-  }, [defaultToFirstConstantTypeWhenUndefined, normalizedTypes, value]);
+  }, [defaultToFirstConstantTypeWhenUndefined, normalizedTypes, value, variableOnly]);
   const effectiveValue = value === undefined && defaultedValue !== undefined ? defaultedValue : value;
   const detected = useMemo(() => detectMode(effectiveValue, parseVariablePath), [effectiveValue, parseVariablePath]);
 
@@ -481,13 +491,13 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
     // `updateFlag` is read so this recomputes (with fresh option references) after a lazy load mutates the meta tree.
     void updateFlag;
     const items: SwitcherOption[] = [];
-    if (nullable) {
+    if (!variableOnly && nullable) {
       items.push({ value: NULL_KEY, label: t('Null'), isLeaf: true });
     }
     // Always render Constant with a typed submenu — even when only one type is
     // allowed. Matches v1 `Variable.Input`, where clicking 常量 reveals 数字 /
     // 逻辑值 / etc. so the user can see what type the constant actually is.
-    if (normalizedTypes.length > 0) {
+    if (!variableOnly && normalizedTypes.length > 0) {
       items.push({
         value: CONST_KEY,
         label: t('Constant'),
@@ -498,9 +508,11 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
         })),
       });
     }
-    items.push(...buildContextSelectorItems(metaTree).map(fromContextItem));
+    if (!hideVariable) {
+      items.push(...buildContextSelectorItems(metaTree).map(fromContextItem));
+    }
     return items;
-  }, [nullable, normalizedTypes, metaTree, updateFlag, t]);
+  }, [hideVariable, metaTree, normalizedTypes, nullable, t, updateFlag, variableOnly]);
 
   const onSwitcherChange = useCallback<NonNullable<CascaderProps<SwitcherOption>['onChange']>>(
     (path, selectedOptions) => {
@@ -530,6 +542,10 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
   );
 
   const onClearVariable = useCallback(() => {
+    if (variableOnly) {
+      onChange?.(null);
+      return;
+    }
     const first = normalizedTypes[0];
     if (first) {
       onChange?.(defaultValueFor(first.type));
@@ -538,7 +554,7 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
     if (nullable) {
       onChange?.(null);
     }
-  }, [nullable, normalizedTypes, onChange]);
+  }, [nullable, normalizedTypes, onChange, variableOnly]);
 
   const constantTypeForRendering: TypedConstantType = useMemo(() => {
     const m = detected.mode;
@@ -553,6 +569,7 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
 
   const isVariable = detected.mode === 'variable';
   const isNull = detected.mode === 'null';
+  const showSwitcher = switcherOptions.length > 0 && !(hideVariable && isVariable);
 
   const variableLabels = useMemo(() => {
     // `updateFlag` is read so this recomputes after the preload effect below resolves a lazy level in the tree (same
@@ -565,11 +582,14 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
     if (isVariable && detected.variablePath?.length) {
       return detected.variablePath;
     }
+    if (variableOnly) {
+      return undefined;
+    }
     if (isNull) {
       return [NULL_KEY];
     }
     return [CONST_KEY, constantTypeForRendering];
-  }, [constantTypeForRendering, detected.variablePath, isNull, isVariable]);
+  }, [constantTypeForRendering, detected.variablePath, isNull, isVariable, variableOnly]);
 
   // Preload a saved variable's label path across lazy levels. `resolveVariableLabels` can only read already-loaded
   // `children`; when a saved reference points below a node whose children are still a lazy thunk (e.g. a relation field
@@ -678,8 +698,8 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
                 minHeight: token.controlHeight,
                 border: `1px solid ${token.colorBorder}`,
                 borderRadius: token.borderRadius,
-                borderTopRightRadius: 0,
-                borderBottomRightRadius: 0,
+                borderTopRightRadius: showSwitcher ? 0 : token.borderRadius,
+                borderBottomRightRadius: showSwitcher ? 0 : token.borderRadius,
                 background: disabled ? token.colorBgContainerDisabled : token.colorBgContainer,
                 overflow: 'hidden',
               }}
@@ -712,6 +732,8 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
                 />
               ) : null}
             </div>
+          ) : variableOnly ? (
+            <Input placeholder={placeholder} readOnly disabled={disabled} style={{ width: '100%' }} />
           ) : isNull ? (
             // v1 used the `placeholder` slot (not `value`) so the antd default placeholder colour applies — keeps the
             // field looking visibly empty/inactive rather than holding a real text value.
@@ -726,31 +748,33 @@ export function TypedVariableInput(props: TypedVariableInputProps) {
             })
           )}
         </div>
-        <Cascader<SwitcherOption>
-          options={switcherOptions}
-          value={switcherValue}
-          onChange={onSwitcherChange}
-          loadData={loadData}
-          disabled={disabled}
-          changeOnSelect
-        >
-          <Button
-            aria-label="variable-switcher"
+        {showSwitcher ? (
+          <Cascader<SwitcherOption>
+            options={switcherOptions}
+            value={switcherValue}
+            onChange={onSwitcherChange}
+            loadData={loadData}
             disabled={disabled}
-            type={isVariable ? 'primary' : 'default'}
-            style={{
-              flexShrink: 0,
-              // `height: auto` (instead of antd's fixed control height) lets the button stretch to the value
-              // component's height under the compact row's default `align-items: stretch` — so it stays joined to a
-              // tall JSON textarea. Mirrors v1's `.ant-btn { height: auto }`.
-              height: 'auto',
-              fontStyle: 'italic',
-              fontFamily: '"New York", "Times New Roman", Times, serif',
-            }}
+            changeOnSelect
           >
-            x
-          </Button>
-        </Cascader>
+            <Button
+              aria-label="variable-switcher"
+              disabled={disabled}
+              type={isVariable ? 'primary' : 'default'}
+              style={{
+                flexShrink: 0,
+                // `height: auto` (instead of antd's fixed control height) lets the button stretch to the value
+                // component's height under the compact row's default `align-items: stretch` — so it stays joined to a
+                // tall JSON textarea. Mirrors v1's `.ant-btn { height: auto }`.
+                height: 'auto',
+                fontStyle: 'italic',
+                fontFamily: '"New York", "Times New Roman", Times, serif',
+              }}
+            >
+              x
+            </Button>
+          </Cascader>
+        ) : null}
       </Space.Compact>
       {jsonError ? (
         <div style={{ marginTop: token.marginXXS, color: token.colorError, fontSize: token.fontSizeSM }}>

package/src/components/form/__tests__/TypedVariableInput.test.tsx

@@ -201,6 +201,58 @@ describe('TypedVariableInput - variable rendering', () => {
     fireEvent.click(clear as HTMLButtonElement);
     expect(handleChange).toHaveBeenCalledWith(0);
   });
+
+  it('treats types=[] as variable-only mode with a readonly placeholder before selection', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value={undefined}
+        types={[]}
+        namespaces={['$env']}
+        placeholder="Select variable"
+        onChange={() => undefined}
+      />,
+    );
+
+    const input = await screen.findByPlaceholderText('Select variable');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('readonly');
+    expect(screen.queryByRole('button', { name: 'variable-switcher' })).toBeInTheDocument();
+  });
+
+  it('clears a variable-only selection back to null', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    const { container } = renderWithCtx(
+      ctx,
+      <TypedVariableInput value="{{$env.SMTP_PORT}}" types={[]} namespaces={['$env']} onChange={handleChange} />,
+    );
+
+    const clear = container.querySelector('button.clear-button') as HTMLButtonElement | null;
+    expect(clear).not.toBeNull();
+    fireEvent.click(clear as HTMLButtonElement);
+    expect(handleChange).toHaveBeenCalledWith(null);
+  });
+
+  it('hides the variable switcher when hideVariable=true in variable-only mode', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(
+      ctx,
+      <TypedVariableInput
+        value="{{$env.SMTP_PORT}}"
+        types={[]}
+        namespaces={['$env']}
+        hideVariable
+        onChange={() => undefined}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'variable-tag' })).toBeInTheDocument();
+    });
+    expect(screen.queryByRole('button', { name: 'variable-switcher' })).toBeNull();
+  });
 });
 
 describe('TypedVariableInput - object / JSON constant', () => {

package/src/components/form/filter/CollectionFilter.tsx

@@ -21,6 +21,8 @@ export interface CollectionFilterProps {
   collection: Collection | undefined;
   /** Previously compiled filter param used to seed the editable filter group. */
   initialValue?: CompiledFilter;
+  /** Default compiled filter used both for initial empty state and Reset. */
+  defaultValue?: CompiledFilter;
   /** Called on Submit or Reset with the compiled NocoBase filter param (`undefined` when cleared). */
   onChange: (filter: CompiledFilter) => void;
   /** Translator. Defaults to identity. */
@@ -58,6 +60,7 @@ export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
   const {
     collection,
     initialValue,
+    defaultValue,
     onChange,
     t = identity,
     filterableFieldNames,
@@ -75,6 +78,7 @@ export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
   const filterAction = useFilterActionProps({
     collection,
     initialValue,
+    defaultValue,
     filterableFieldNames,
     nonfilterableFieldNames,
     noIgnore,

package/src/components/form/filter/CollectionFilterPanel.tsx

@@ -30,6 +30,8 @@ export interface CollectionFilterPanelProps {
   collection: Collection | undefined;
   /** Previously compiled filter param used to seed the editable filter group. */
   initialValue?: CompiledFilter;
+  /** Default compiled filter used both for initial empty state and Reset. */
+  defaultValue?: CompiledFilter;
   /** Called when the condition group structure changes or `reset()` is invoked. */
   onChange?: (filter: CompiledFilter) => void;
   /** Translator. Defaults to identity. */
@@ -51,6 +53,7 @@ export const CollectionFilterPanel = forwardRef<CollectionFilterPanelRef, Collec
   const {
     collection,
     initialValue,
+    defaultValue,
     onChange,
     t = identity,
     filterableFieldNames,
@@ -61,6 +64,7 @@ export const CollectionFilterPanel = forwardRef<CollectionFilterPanelRef, Collec
   const filterAction = useFilterActionProps({
     collection,
     initialValue,
+    defaultValue,
     filterableFieldNames,
     nonfilterableFieldNames,
     noIgnore,

package/src/components/form/filter/__tests__/useFilterActionProps.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * 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 { FlowEngine, FlowEngineProvider, type Collection } from '@nocobase/flow-engine';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { useFilterActionProps } from '../useFilterActionProps';
+
+vi.mock('../../../flow/components/filter/useFilterOptions', () => ({
+  useFilterOptions: () => [],
+}));
+
+vi.mock('../CollectionFilterItem', () => ({
+  createCollectionFilterItem: () => undefined,
+}));
+
+function makeCollection(): Collection {
+  return {
+    getFields: () => [{ name: 'title' }, { name: 'type' }],
+  } as unknown as Collection;
+}
+
+function makeWrapper() {
+  const engine = new FlowEngine();
+  const Wrapper: React.FC = ({ children }) => <FlowEngineProvider engine={engine}>{children}</FlowEngineProvider>;
+  return Wrapper;
+}
+
+describe('useFilterActionProps', () => {
+  it('seeds the editable group from defaultValue when initialValue is missing', () => {
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          onApply: () => undefined,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    expect(result.current.value).toMatchObject({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: '' },
+        { path: 'type', operator: '$eq', value: undefined },
+      ],
+    });
+  });
+
+  it('reset restores defaultValue and emits its compiled filter', () => {
+    const onApply = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          initialValue: { $and: [{ title: { $includes: 'abc' } }] },
+          onApply,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    result.current.onReset();
+
+    expect(result.current.value).toMatchObject({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: '' },
+        { path: 'type', operator: '$eq', value: undefined },
+      ],
+    });
+    expect(onApply).toHaveBeenCalledWith(undefined, 'reset');
+  });
+
+  it('counts only effective compiled conditions, so empty default rows do not highlight the button', () => {
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          onApply: () => undefined,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    expect(result.current.conditionCount).toBe(0);
+  });
+});

package/src/components/form/filter/useFilterActionProps.ts

@@ -43,6 +43,14 @@ const isCondition = (item: FilterGroupItem): item is CollectionFilterItemValue =
   typeof (item as CollectionFilterItemValue).path === 'string' &&
   Object.prototype.hasOwnProperty.call(item, 'operator');
 
+const cloneFilterGroupItem = (item: FilterGroupItem): FilterGroupItem =>
+  isGroup(item) ? { logic: item.logic, items: item.items.map((child) => cloneFilterGroupItem(child)) } : { ...item };
+
+const cloneFilterGroup = (group: FilterGroupValue): FilterGroupValue => ({
+  logic: group.logic,
+  items: group.items.map((item) => cloneFilterGroupItem(item)),
+});
+
 /**
  * `true` when the rhs of a condition is "no real value yet" — covers `undefined` / `null` / empty string / empty array / empty plain object. Mirrors v1's `removeNullCondition` `isEmpty` predicate so half-filled rows ("Locked time → is → (no date picked yet)") get dropped on Submit instead of being sent to the server as `{lockedTs:{}}` and triggering a 500.
  */
@@ -164,6 +172,8 @@ export interface UseFilterActionPropsArgs extends UseFilterOptionsArgs {
   collection: Collection | undefined;
   /** Previously compiled filter param used to seed the editable filter group. */
   initialValue?: CompiledFilter;
+  /** Default compiled filter used both for initial empty state and Reset. */
+  defaultValue?: CompiledFilter;
   /**
    * Called when the user submits or resets the filter popover. Receives the compiled filter param (`undefined` when cleared) and which footer button triggered the call. Typical implementation: `(filter, action) => { listRequest.run(filter); if (action === 'submit') closePopover(); }`.
    */
@@ -216,12 +226,23 @@ export interface UseFilterActionPropsResult {
  * ```
  */
 export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterActionPropsResult {
-  const { collection, initialValue, onApply, filterableFieldNames, nonfilterableFieldNames, noIgnore, t } = args;
+  const {
+    collection,
+    initialValue,
+    defaultValue,
+    onApply,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    t,
+  } = args;
+  const seedValue = initialValue ?? defaultValue;
+  const defaultGroup = decompileFilterGroup(defaultValue) || createEmptyGroup();
 
   // Held in a ref so the group object identity is stable for the lifetime of the host component — `<FilterContent>` mutates this object directly (push/splice on `items`, swap `logic`), and a fresh observable on every render would reset that internal state.
   const valueRef = useRef<FilterGroupValue>();
   if (!valueRef.current) {
-    valueRef.current = observable(decompileFilterGroup(initialValue) || createEmptyGroup()) as FilterGroupValue;
+    valueRef.current = observable(decompileFilterGroup(seedValue) || createEmptyGroup()) as FilterGroupValue;
   }
   const value = valueRef.current;
 
@@ -240,9 +261,10 @@ export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterA
   });
 
   const onReset = useMemoizedFn(() => {
-    value.logic = '$and';
-    value.items = [];
-    onApply(undefined, 'reset');
+    const next = cloneFilterGroup(defaultGroup);
+    value.logic = next.logic;
+    value.items = next.items;
+    onApply(compileFilterGroup(value), 'reset');
   });
 
   const translate = useMemoizedFn((key: string) => (t ? t(key) : key));
@@ -261,7 +283,16 @@ export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterA
   );
 
   // Re-read on each render so `observer`-wrapped hosts re-render when the reactive `items` array length changes. No useMemo needed — the `value` object's identity is stable (held in a ref), but its observable `items.length` is what we actually care about, and the eslint exhaustive-deps rule rightly complains about depending on a mutable property of a stable ref.
-  const conditionCount = value.items.length;
+  const conditionCount = (() => {
+    const compiled = compileFilterGroup(value);
+    if (compiled?.$and && Array.isArray(compiled.$and)) {
+      return compiled.$and.length;
+    }
+    if (compiled?.$or && Array.isArray(compiled.$or)) {
+      return compiled.$or.length;
+    }
+    return 0;
+  })();
 
   return { value, options, FilterItem, ctx, onSubmit, onReset, conditionCount };
 }

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