@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.10

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

@@ -0,0 +1,86 @@
+/**
+ * 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 { FlowContext, FlowContextProvider } from '@nocobase/flow-engine';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { VariableJsonTextArea } from '../VariableJsonTextArea';
+
+function createContextWithEnv() {
+  const ctx = new FlowContext();
+  (ctx as unknown as { t: (key: string) => string }).t = (key: string) => key;
+
+  ctx.defineProperty('$env', {
+    value: { API_KEY: 'secret' },
+    meta: {
+      title: 'Env',
+      type: 'object',
+      properties: {
+        API_KEY: { title: 'API Key', type: 'string' },
+      },
+    },
+  });
+
+  return ctx;
+}
+
+function renderWithCtx(ctx: FlowContext, node: React.ReactNode) {
+  return render(<FlowContextProvider context={ctx}>{node}</FlowContextProvider>);
+}
+
+describe('VariableJsonTextArea', () => {
+  it('formats object values and emits parsed JSON on blur', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={{ foo: 'bar' }} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    expect(textArea).toHaveValue('{\n  "foo": "bar"\n}');
+
+    fireEvent.change(textArea, { target: { value: '{"foo":"baz"}' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).toHaveBeenCalledWith({ foo: 'baz' });
+    expect(textArea).toHaveValue('{\n  "foo": "baz"\n}');
+  });
+
+  it('shows JSON parse errors and does not emit invalid values', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={{}} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    fireEvent.change(textArea, { target: { value: '{' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(await screen.findByText(/JSON/)).toBeInTheDocument();
+  });
+
+  it('inserts selected variables with the client-v2 template format', async () => {
+    const ctx = createContextWithEnv();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={null} namespaces={['$env']} onChange={() => undefined} />);
+
+    fireEvent.click(await screen.findByRole('button', { name: 'variable-json-switcher' }));
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('Env'));
+    });
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('API Key'));
+    });
+
+    expect(await screen.findByRole('textbox')).toHaveValue('{{ ctx.$env.API_KEY }}');
+  });
+});

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/CollectionFilterItem.tsx

@@ -58,6 +58,16 @@ export interface CollectionFilterItemProps {
   t?: (key: string) => string;
   /** Optional v2 app registry used to resolve plugin-provided operator components. */
   app?: { getComponent?: (name: string) => React.ComponentType<any> | undefined };
+  /** Optional override for the left field picker placeholder. */
+  fieldPlaceholder?: string;
+  /** Optional override for the operator picker placeholder. */
+  operatorPlaceholder?: string;
+  /** Optional override for the value input placeholder. Pass `null` to suppress it. */
+  valuePlaceholder?: string | null;
+  /** Optional override for the left field picker width. Defaults to v2's original 200px. */
+  fieldWidth?: number;
+  /** Optional override for the operator picker min-width. Defaults to v2's original 120px. */
+  operatorMinWidth?: number;
 }
 
 const identity = (s: string) => s;
@@ -98,6 +108,12 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
     const { path: leftValue, operator, value: rightValue } = props.value;
     const flowEngine = useFlowEngine({ throwError: false }) as any;
     const app = props.app || flowEngine?.context?.app;
+    const fieldPlaceholder = props.fieldPlaceholder ?? t('Select field');
+    const operatorPlaceholder = props.operatorPlaceholder ?? t('Comparision');
+    const valuePlaceholder =
+      props.valuePlaceholder === undefined ? t('Enter value') : props.valuePlaceholder || undefined;
+    const fieldWidth = props.fieldWidth ?? 200;
+    const operatorMinWidth = props.operatorMinWidth ?? 120;
 
     const options = useFilterOptions(collection, { filterableFieldNames, nonfilterableFieldNames, noIgnore, t });
 
@@ -135,8 +151,8 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
     return (
       <Space wrap>
         <Cascader
-          style={{ width: 200 }}
-          placeholder={t('Select field')}
+          style={{ width: fieldWidth }}
+          placeholder={fieldPlaceholder}
           options={cascaderOptions}
           value={fieldPath}
           onChange={handleFieldChange}
@@ -145,15 +161,15 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
           popupClassName={cascaderPopupClass}
         />
         <Select
-          style={{ width: 120 }}
-          placeholder={t('Comparision')}
+          style={{ minWidth: operatorMinWidth }}
+          placeholder={operatorPlaceholder}
           value={operator || undefined}
           onChange={handleOperatorChange}
           disabled={!leftValue || operatorOptions.length === 0}
         >
           {operatorOptions.map((op) => (
             <Select.Option key={op.value} value={op.value}>
-              {op.label}
+              {typeof op.label === 'string' ? t(op.label) : op.label}
             </Select.Option>
           ))}
         </Select>
@@ -162,7 +178,7 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
           operator={selectedOperator}
           value={rightValue}
           onChange={handleValueChange}
-          placeholder={t('Enter value')}
+          placeholder={valuePlaceholder}
           t={t}
           app={app}
         />
@@ -179,7 +195,16 @@ export function createCollectionFilterItem(
   collection: Collection,
   bound?: Pick<
     CollectionFilterItemProps,
-    'filterableFieldNames' | 'nonfilterableFieldNames' | 'noIgnore' | 't' | 'app'
+    | 'filterableFieldNames'
+    | 'nonfilterableFieldNames'
+    | 'noIgnore'
+    | 't'
+    | 'app'
+    | 'fieldPlaceholder'
+    | 'operatorPlaceholder'
+    | 'valuePlaceholder'
+    | 'fieldWidth'
+    | 'operatorMinWidth'
   >,
 ) {
   const Component: FC<{ value: CollectionFilterItemValue }> = (props) => (

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__/CollectionFilterItem.test.tsx

@@ -244,4 +244,42 @@ describe('CollectionFilterItem', () => {
       expect(value.path).toBe('username');
     });
   });
+
+  it('keeps default widths at 200/120 and honours explicit width/placeholder overrides', () => {
+    const value = observable({ path: 'username', operator: '$eq', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { container, rerender } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    let selects = container.querySelectorAll('.ant-select');
+    expect(selects[0]).toHaveStyle({ width: '200px' });
+    expect(selects[1]).toHaveStyle({ minWidth: '120px' });
+
+    rerender(
+      <CollectionFilterItem
+        value={observable({ path: '', operator: '', value: '' })}
+        collection={collection}
+        fieldWidth={160}
+        operatorMinWidth={110}
+        fieldPlaceholder="Choose field"
+        operatorPlaceholder="Choose operator"
+      />,
+    );
+
+    selects = container.querySelectorAll('.ant-select');
+    expect(selects[0]).toHaveStyle({ width: '160px' });
+    expect(selects[1]).toHaveStyle({ minWidth: '110px' });
+    expect(screen.getByText('Choose field')).toBeInTheDocument();
+  });
+
+  it('lets callers suppress the fallback value placeholder', () => {
+    const value = observable({ path: 'username', operator: '$eq', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { rerender } = render(<CollectionFilterItem value={value} collection={collection} />);
+    expect(screen.getByPlaceholderText('Enter value')).toBeInTheDocument();
+
+    rerender(<CollectionFilterItem value={value} collection={collection} valuePlaceholder={null} />);
+    expect(screen.queryByPlaceholderText('Enter value')).not.toBeInTheDocument();
+  });
 });

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/index.ts

@@ -11,5 +11,7 @@
 export { CollectionFilter } from './CollectionFilter';
 export type { CollectionFilterProps } from './CollectionFilter';
 export { CollectionFilterPanel } from './CollectionFilterPanel';
+export { CollectionFilterItem } from './CollectionFilterItem';
+export type { CollectionFilterItemValue } from './CollectionFilterItem';
 export type { CollectionFilterPanelProps, CollectionFilterPanelRef } from './CollectionFilterPanel';
 export type { CompiledFilter } from './useFilterActionProps';

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/components/form/index.tsx

@@ -19,3 +19,4 @@ export * from './RemoteSelect';
 export * from './ScanInput';
 export * from './TypedVariableInput';
 export * from './VariableInput';
+export * from './VariableJsonTextArea';

package/src/components/index.ts

@@ -9,9 +9,11 @@
 
 export * from './AppComponents';
 export * from './BlankComponent';
+export * from './category-tabs';
 export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';
+export * from './KeepAlive';
 export * from './PoweredBy';
 export * from './RouterContextCleaner';
 export * from './SwitchLanguage';

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,38 @@ type FlowPageProps = {
   showFlowSettings?: FlowModelRendererProps['showFlowSettings'];
 };
 
+type FlowPageViewContext = FlowEngineContext & {
+  view?: {
+    inputArgs?: {
+      filterByTk?: unknown;
+      isMobileLayout?: unknown;
+      sourceId?: 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);
@@ -76,6 +104,10 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
         subType: 'object',
         use: pageModelClass,
       };
+      const isRuntimeRecordScopedPage =
+        !flowEngine.context.flowSettingsEnabled &&
+        (typeof ctx?.view?.inputArgs?.filterByTk !== 'undefined' ||
+          typeof ctx?.view?.inputArgs?.sourceId !== 'undefined');
       if (shouldInjectDefaultChildTab) {
         const tabTitle = defaultTabTitle || flowEngine.translate?.('Details');
         options['subModels'] = {
@@ -102,9 +134,12 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
           },
         };
       }
-      const data = await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled });
+      const data =
+        (isRuntimeRecordScopedPage && (await flowEngine.loadModel({ ...options, refresh: true }))) ||
+        (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);
       }