@nocobase/client-v2 2.2.0-alpha.6 → 2.2.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.2.0-alpha.6",
+  "version": "2.2.0-alpha.7",
   "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-alpha.6",
-    "@nocobase/flow-engine": "2.2.0-alpha.6",
-    "@nocobase/sdk": "2.2.0-alpha.6",
-    "@nocobase/shared": "2.2.0-alpha.6",
-    "@nocobase/utils": "2.2.0-alpha.6",
+    "@nocobase/evaluators": "2.2.0-alpha.7",
+    "@nocobase/flow-engine": "2.2.0-alpha.7",
+    "@nocobase/sdk": "2.2.0-alpha.7",
+    "@nocobase/shared": "2.2.0-alpha.7",
+    "@nocobase/utils": "2.2.0-alpha.7",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -42,9 +42,10 @@
     "html5-qrcode": "^2.3.8",
     "i18next": "^22.4.9",
     "json5": "^2.2.3",
+    "jsqr": "^1.4.0",
     "lodash": "4.17.21",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "f55b252811f6af01d08cd3814171867b70c8ef7a"
+  "gitHead": "34ba02960fca9ab0b6881d3db7040a8a64067bba"
 }

package/src/BaseApplication.tsx

@@ -81,6 +81,10 @@ const trimTrailingSlashes = (value: string) => {
   return match ? value.slice(0, -match[0].length) : value;
 };
 
+const ensureTrailingSlash = (value: string) => {
+  return `${trimTrailingSlashes(value)}/`;
+};
+
 const isRenderableComponentType = (value: unknown): value is AnyComponent => isValidElementType(value);
 
 export type DevDynamicImport = (packageName: string) => Promise<{ default: PluginClass }>;
@@ -433,12 +437,12 @@ export abstract class BaseApplication<
     return getSubAppName(this.getPublicPath()) || null;
   }
 
+  getCdnUrl() {
+    return ensureTrailingSlash(window['__webpack_public_path__'] || this.getPublicPath());
+  }
+
   getPublicPath() {
-    let publicPath = this.options.publicPath || '/';
-    if (!publicPath.endsWith('/')) {
-      publicPath += '/';
-    }
-    return publicPath;
+    return ensureTrailingSlash(this.options.publicPath || '/');
   }
 
   getApiUrl(pathname = '') {

package/src/__tests__/app.test.tsx

@@ -34,6 +34,7 @@ describe('app', () => {
     afterEach(() => {
       document.querySelectorAll('link[rel="shortcut icon"]').forEach((node) => node.remove());
       document.documentElement.removeAttribute('lang');
+      delete window['__webpack_public_path__'];
       vi.restoreAllMocks();
     });
 
@@ -58,6 +59,31 @@ describe('app', () => {
       expect(app.jsonLogic.apply({ $testAlwaysTrue: [] })).toBe(true);
     });
 
+    it('should normalize publicPath and webpack public path with a single trailing slash', () => {
+      const app = new Application({
+        router,
+        publicPath: '/admin//',
+      });
+
+      expect(app.getPublicPath()).toBe('/admin/');
+
+      window['__webpack_public_path__'] = '/cdn/assets///';
+      expect(app.getCdnUrl()).toBe('/cdn/assets/');
+
+      delete window['__webpack_public_path__'];
+      expect(app.getCdnUrl()).toBe('/admin/');
+    });
+
+    it('should normalize webpack public path without a trailing slash', () => {
+      const app = new Application({
+        router,
+        publicPath: '/admin/',
+      });
+
+      window['__webpack_public_path__'] = '/cdn/assets';
+      expect(app.getCdnUrl()).toBe('/cdn/assets/');
+    });
+
     it('should apply the provided favicon immediately', () => {
       const app = new Application({ router });
 

package/src/collection-field-interface/CollectionFieldInterface.ts

@@ -115,6 +115,7 @@ export abstract class CollectionFieldInterface {
   titleUsable?: boolean;
   usePathOptions?(field: any): any;
   hidden?: boolean;
+  creatable?: boolean;
 
   addComponentOption(componentOption: CollectionFieldInterfaceComponentOption) {
     if (!this.componentOptions) {

package/src/collection-field-interface/CollectionFieldInterfaceManager.ts

@@ -31,6 +31,7 @@ interface FieldInterfaceLike {
   title?: ReactNode;
   group?: string;
   order?: number;
+  creatable?: boolean;
   isAssociation?: boolean;
   supportDataSourceType?: string[];
   notSupportDataSourceType?: string[];

package/src/components/form/ScanInput/__tests__/useCodeScanner.test.tsx

@@ -7,9 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React, { useCallback } from 'react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { DEFAULT_CODE_FORMATS, getCodeScanBoxSize, useCodeScanner } from '../useCodeScanner';
 
 type MockScannerInstance = {
@@ -44,6 +44,12 @@ const mocks = vi.hoisted(() => {
   };
 });
 
+const jsQrMocks = vi.hoisted(() => {
+  return {
+    default: vi.fn(),
+  };
+});
+
 vi.mock('html5-qrcode', () => ({
   Html5Qrcode: mocks.Html5Qrcode,
   Html5QrcodeScannerState: {
@@ -66,6 +72,8 @@ vi.mock('html5-qrcode', () => ({
   },
 }));
 
+vi.mock('jsqr', () => jsQrMocks);
+
 function ScannerHost({ scanBoxSize }: { scanBoxSize?: { width: number; height: number } } = {}) {
   const handleScanSuccess = useCallback(() => undefined, []);
 
@@ -79,9 +87,74 @@ function ScannerHost({ scanBoxSize }: { scanBoxSize?: { width: number; height: n
   return <div id="scanner" />;
 }
 
+function FileScannerHost({ onScanSuccess }: { onScanSuccess: (text: string) => void }) {
+  const { startScanFile } = useCodeScanner({
+    elementId: 'scanner',
+    enabled: true,
+    onScanSuccess,
+  });
+
+  return (
+    <>
+      <div id="scanner" />
+      <button onClick={() => startScanFile(new File(['qr'], 'qr.png', { type: 'image/png' }))}>scan file</button>
+    </>
+  );
+}
+
+function stubSafariBrowser() {
+  vi.spyOn(window.navigator, 'vendor', 'get').mockReturnValue('Apple Computer, Inc.');
+  vi.spyOn(window.navigator, 'userAgent', 'get').mockReturnValue(
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
+  );
+}
+
+function stubImageElement(size: { width: number; height: number } = { width: 600, height: 400 }) {
+  vi.stubGlobal(
+    'Image',
+    class MockImage {
+      onabort: ((event: Event) => void) | null = null;
+      onerror: ((event: Event) => void) | null = null;
+      onload: (() => void) | null = null;
+      height = size.height;
+      naturalHeight = size.height;
+      naturalWidth = size.width;
+      width = size.width;
+
+      set src(_value: string) {
+        this.onload?.();
+      }
+    },
+  );
+  vi.stubGlobal('URL', {
+    ...URL,
+    createObjectURL: vi.fn(() => 'blob:qr'),
+    revokeObjectURL: vi.fn(),
+  });
+}
+
+function stubCanvas() {
+  const canvasContext = {
+    drawImage: vi.fn(),
+    getImageData: vi.fn((_x: number, _y: number, width: number, height: number) => ({
+      data: new Uint8ClampedArray(width * height * 4),
+      height,
+      width,
+    })),
+  } as unknown as CanvasRenderingContext2D;
+
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(canvasContext);
+}
+
 describe('useCodeScanner', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    jsQrMocks.default.mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
   });
 
   it('starts scanning with QR code and barcode formats by default', async () => {
@@ -120,4 +193,74 @@ describe('useCodeScanner', () => {
 
     expect(config?.qrbox?.(1200, 844)).toEqual({ width: 319, height: 240 });
   });
+
+  it('uses jsQR first for Safari uploaded QR images', async () => {
+    const handleScanSuccess = vi.fn();
+    jsQrMocks.default.mockReturnValueOnce({ data: 'JSQR-CODE' });
+    stubSafariBrowser();
+    stubImageElement();
+    stubCanvas();
+
+    render(<FileScannerHost onScanSuccess={handleScanSuccess} />);
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByText('scan file'));
+
+    await waitFor(() => expect(handleScanSuccess).toHaveBeenCalledWith('JSQR-CODE'));
+    expect(jsQrMocks.default).toHaveBeenCalledWith(expect.any(Uint8ClampedArray), 600, 400, {
+      inversionAttempts: 'attemptBoth',
+    });
+    expect(mocks.scanFileV2).not.toHaveBeenCalled();
+  });
+
+  it('falls back to html5-qrcode for Safari uploaded files when jsQR does not decode a QR code', async () => {
+    const handleScanSuccess = vi.fn();
+    mocks.scanFileV2.mockResolvedValueOnce({ decodedText: 'BARCODE-CODE' });
+    stubSafariBrowser();
+    stubImageElement();
+    stubCanvas();
+
+    render(<FileScannerHost onScanSuccess={handleScanSuccess} />);
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByText('scan file'));
+
+    await waitFor(() => expect(handleScanSuccess).toHaveBeenCalledWith('BARCODE-CODE'));
+    expect(jsQrMocks.default).toHaveBeenCalled();
+    expect(mocks.scanFileV2).toHaveBeenCalled();
+  });
+
+  it('tries multiple image scales before falling back from Safari jsQR scanning', async () => {
+    const handleScanSuccess = vi.fn();
+    Array.from({ length: 8 }).forEach((_, index) => {
+      jsQrMocks.default.mockReturnValueOnce(index === 7 ? { data: 'SCALED-CODE' } : undefined);
+    });
+    stubSafariBrowser();
+    stubImageElement({ width: 4000, height: 3000 });
+    stubCanvas();
+
+    render(<FileScannerHost onScanSuccess={handleScanSuccess} />);
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByText('scan file'));
+
+    await waitFor(() => expect(handleScanSuccess).toHaveBeenCalledWith('SCALED-CODE'));
+    expect(jsQrMocks.default).toHaveBeenCalledTimes(8);
+  });
+
+  it('tries enhanced grayscale QR images for blurry Safari uploads', async () => {
+    const handleScanSuccess = vi.fn();
+    jsQrMocks.default.mockReturnValueOnce(undefined).mockReturnValueOnce({ data: 'ENHANCED-CODE' });
+    stubSafariBrowser();
+    stubImageElement();
+    stubCanvas();
+
+    render(<FileScannerHost onScanSuccess={handleScanSuccess} />);
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByText('scan file'));
+
+    await waitFor(() => expect(handleScanSuccess).toHaveBeenCalledWith('ENHANCED-CODE'));
+    expect(jsQrMocks.default).toHaveBeenCalledTimes(2);
+  });
 });

package/src/components/form/ScanInput/useCodeScanner.ts

@@ -8,6 +8,7 @@
  */
 
 import { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
+import jsQR from 'jsqr';
 import { useCallback, useEffect, useState } from 'react';
 import type { CodeFormatsToSupport } from './types';
 
@@ -26,6 +27,27 @@ type UseCodeScannerOptions = {
   onScanFailure?: () => void;
 };
 
+type ImageDataVariant = {
+  imageData: ImageData;
+  maxSize: number;
+};
+
+type JsQRImageTransform = {
+  contrast?: number;
+  threshold?: number;
+};
+
+const QR_SCAN_IMAGE_SIZES = [3200, 2400, 1600, 1000];
+const QR_SCAN_IMAGE_TRANSFORMS: JsQRImageTransform[] = [
+  {},
+  { contrast: 3, threshold: 105 },
+  { contrast: 2, threshold: 105 },
+  { contrast: 3, threshold: 120 },
+  { contrast: 2, threshold: 120 },
+  { contrast: 3, threshold: 90 },
+  { contrast: 4, threshold: 105 },
+];
+
 export const DEFAULT_CODE_FORMATS: CodeFormatsToSupport = [
   Html5QrcodeSupportedFormats.QR_CODE,
   Html5QrcodeSupportedFormats.CODE_128,
@@ -62,6 +84,126 @@ async function stopScanner(scanner?: Html5Qrcode, options: { clear?: boolean } =
   }
 }
 
+function isSafariBrowser() {
+  const { userAgent, vendor } = navigator;
+  return /Apple/i.test(vendor) && /Safari/i.test(userAgent) && !/CriOS|FxiOS|EdgiOS|Chrome/i.test(userAgent);
+}
+
+function loadImage(file: File) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    const url = URL.createObjectURL(file);
+    const cleanup = () => URL.revokeObjectURL(url);
+
+    image.onload = () => {
+      cleanup();
+      resolve(image);
+    };
+    image.onerror = (event) => {
+      cleanup();
+      reject(event);
+    };
+    image.onabort = (event) => {
+      cleanup();
+      reject(event);
+    };
+    image.src = url;
+  });
+}
+
+function getScanImageSizes(naturalWidth: number, naturalHeight: number) {
+  const maxSize = Math.max(naturalWidth, naturalHeight);
+  const cappedMaxSize = Math.min(maxSize, QR_SCAN_IMAGE_SIZES[0]);
+  return Array.from(new Set([cappedMaxSize, ...QR_SCAN_IMAGE_SIZES.filter((size) => size < cappedMaxSize)])).sort(
+    (a, b) => b - a,
+  );
+}
+
+function getImageDataFromImage(image: HTMLImageElement, maxSize: number): ImageDataVariant | undefined {
+  const naturalWidth = image.naturalWidth || image.width;
+  const naturalHeight = image.naturalHeight || image.height;
+
+  const scale = Math.min(1, maxSize / Math.max(naturalWidth, naturalHeight));
+  const width = Math.max(1, Math.round(naturalWidth * scale));
+  const height = Math.max(1, Math.round(naturalHeight * scale));
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(image, 0, 0, width, height);
+  return {
+    imageData: context.getImageData(0, 0, width, height),
+    maxSize,
+  };
+}
+
+async function getImageDataVariants(file: File) {
+  const image = await loadImage(file);
+  const naturalWidth = image.naturalWidth || image.width;
+  const naturalHeight = image.naturalHeight || image.height;
+
+  if (!naturalWidth || !naturalHeight) {
+    return;
+  }
+
+  return getScanImageSizes(naturalWidth, naturalHeight)
+    .map((maxSize) => getImageDataFromImage(image, maxSize))
+    .filter((variant): variant is ImageDataVariant => !!variant);
+}
+
+function getTransformedImageData(imageData: ImageData, transform: JsQRImageTransform) {
+  const { contrast = 1, threshold } = transform;
+  if (contrast === 1 && threshold == null) {
+    return imageData.data;
+  }
+
+  const data = new Uint8ClampedArray(imageData.data);
+  for (let index = 0; index < data.length; index += 4) {
+    let luminance = data[index] * 0.299 + data[index + 1] * 0.587 + data[index + 2] * 0.114;
+    luminance = Math.max(0, Math.min(255, (luminance - 128) * contrast + 128));
+    if (threshold != null) {
+      luminance = luminance < threshold ? 0 : 255;
+    }
+    data[index] = luminance;
+    data[index + 1] = luminance;
+    data[index + 2] = luminance;
+  }
+  return data;
+}
+
+async function scanFileWithJsQR(file: File, formatsToSupport?: CodeFormatsToSupport) {
+  const formats = formatsToSupport?.length ? formatsToSupport : DEFAULT_CODE_FORMATS;
+  if (!formats.includes(Html5QrcodeSupportedFormats.QR_CODE)) {
+    throw new Error('QR_CODE is not included in the requested formats');
+  }
+
+  const variants = await getImageDataVariants(file);
+  if (!variants?.length) {
+    throw new Error('Failed to prepare uploaded image for QR decoding');
+  }
+
+  for (const { imageData } of variants) {
+    for (const transform of QR_SCAN_IMAGE_TRANSFORMS) {
+      const data = getTransformedImageData(imageData, transform);
+      const qrCode = jsQR(data, imageData.width, imageData.height, { inversionAttempts: 'attemptBoth' });
+      if (qrCode?.data) {
+        return qrCode.data;
+      }
+    }
+  }
+
+  throw new Error('No QR code decoded by jsQR');
+}
+
+function shouldScanQrWithJsQR(formatsToSupport?: CodeFormatsToSupport) {
+  const formats = formatsToSupport?.length ? formatsToSupport : DEFAULT_CODE_FORMATS;
+  return formats.includes(Html5QrcodeSupportedFormats.QR_CODE);
+}
+
 export function useCodeScanner({
   enabled,
   elementId,
@@ -95,6 +237,16 @@ export function useCodeScanner({
 
   const startScanFile = useCallback(
     async (file: File) => {
+      if (isSafariBrowser() && shouldScanQrWithJsQR(formatsToSupport)) {
+        try {
+          const decodedText = await scanFileWithJsQR(file, formatsToSupport);
+          onScanSuccess(decodedText);
+          return;
+        } catch {
+          // Fall through to html5-qrcode so barcode uploads still work in Safari.
+        }
+      }
+
       if (!scanner) {
         return;
       }
@@ -103,12 +255,12 @@ export function useCodeScanner({
       try {
         const result = await scanner.scanFileV2(file, false);
         onScanSuccess(result.decodedText);
-      } catch (error) {
+      } catch {
         onScanFailure?.();
         await startScanCamera(scanner);
       }
     },
-    [onScanFailure, onScanSuccess, scanner, startScanCamera],
+    [formatsToSupport, onScanFailure, onScanSuccess, scanner, startScanCamera],
   );
 
   useEffect(() => {

package/src/flow/FlowPage.tsx

@@ -60,7 +60,9 @@ type FlowPageProps = {
 type FlowPageViewContext = FlowEngineContext & {
   view?: {
     inputArgs?: {
+      filterByTk?: unknown;
       isMobileLayout?: unknown;
+      sourceId?: unknown;
     };
   };
 };
@@ -102,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'] = {
@@ -128,7 +134,9 @@ 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);

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

@@ -9,7 +9,7 @@
 
 import { render, waitFor } from '@testing-library/react';
 import React from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { FlowPage } from '../FlowPage';
 
 type TestContextProperty = {
@@ -71,10 +71,15 @@ const createPageModel = (): TestPageModel => {
 };
 
 const mocks = vi.hoisted(() => ({
+  flowSettingsEnabled: false,
+  loadModel: vi.fn(),
+  loadOrCreateModel: vi.fn(),
   rendererMobileStates: [] as boolean[],
   rendererProps: undefined as RendererProps | undefined,
   model: undefined as TestPageModel | undefined,
+  viewFilterByTk: undefined as unknown,
   viewInputMobileLayout: true as boolean | undefined,
+  viewSourceId: undefined as unknown,
   contextMobileLayout: undefined as boolean | undefined,
 }));
 
@@ -94,15 +99,20 @@ vi.mock('@nocobase/flow-engine', async () => {
     }),
     useFlowEngine: vi.fn(() => ({
       getModelClassAsync: vi.fn(async () => TestPageModelClass),
-      loadOrCreateModel: vi.fn(async () => mocks.model),
-      context: {},
+      loadModel: mocks.loadModel,
+      loadOrCreateModel: mocks.loadOrCreateModel,
+      context: {
+        flowSettingsEnabled: mocks.flowSettingsEnabled,
+      },
       translate: vi.fn((value: string) => value),
     })),
     useFlowModelById: vi.fn(() => mocks.model),
     useFlowViewContext: vi.fn(() => ({
       view: {
         inputArgs: {
+          ...(typeof mocks.viewFilterByTk !== 'undefined' ? { filterByTk: mocks.viewFilterByTk } : {}),
           ...(typeof mocks.viewInputMobileLayout === 'boolean' ? { isMobileLayout: mocks.viewInputMobileLayout } : {}),
+          ...(typeof mocks.viewSourceId !== 'undefined' ? { sourceId: mocks.viewSourceId } : {}),
         },
       },
       ...(typeof mocks.contextMobileLayout === 'boolean' ? { isMobileLayout: mocks.contextMobileLayout } : {}),
@@ -154,11 +164,21 @@ vi.mock('ahooks', async () => {
 });
 
 describe('FlowPage', () => {
+  beforeEach(() => {
+    mocks.loadModel.mockImplementation(async () => null);
+    mocks.loadOrCreateModel.mockImplementation(async () => mocks.model);
+  });
+
   afterEach(() => {
+    mocks.flowSettingsEnabled = false;
+    mocks.loadModel.mockReset();
+    mocks.loadOrCreateModel.mockReset();
     mocks.rendererMobileStates = [];
     mocks.rendererProps = undefined;
     mocks.model = undefined;
+    mocks.viewFilterByTk = undefined;
     mocks.viewInputMobileLayout = true;
+    mocks.viewSourceId = undefined;
     mocks.contextMobileLayout = undefined;
   });
 
@@ -203,4 +223,31 @@ describe('FlowPage', () => {
       expect(mocks.rendererMobileStates[0]).toBe(expected);
     },
   );
+
+  it('reloads runtime page models for record scoped views', async () => {
+    mocks.model = createPageModel();
+    mocks.viewFilterByTk = 1;
+    mocks.loadModel.mockImplementation(async () => mocks.model);
+
+    render(<FlowPage onModelLoaded={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(mocks.loadModel).toHaveBeenCalled();
+    });
+    expect(mocks.loadModel.mock.calls[0]?.[0]).toMatchObject({ refresh: true });
+    expect(mocks.loadOrCreateModel).not.toHaveBeenCalled();
+  });
+
+  it('keeps configured page model cache behavior in flow settings mode', async () => {
+    mocks.flowSettingsEnabled = true;
+    mocks.model = createPageModel();
+    mocks.viewFilterByTk = 1;
+
+    render(<FlowPage onModelLoaded={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(mocks.loadOrCreateModel).toHaveBeenCalled();
+    });
+    expect(mocks.loadModel).not.toHaveBeenCalled();
+  });
 });

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

@@ -1666,7 +1666,7 @@ describe('FlowRoute', () => {
     expect(engine.getModel('public-form-1')).toBeUndefined();
   });
 
-  it('should not skip accessible route loading just because layout authCheck is false', async () => {
+  it('should skip accessible route loading when layout authCheck is false', async () => {
     const engine = new FlowEngine();
     const ensureAccessibleLoaded = vi.fn().mockRejectedValue(new Error('cannot load accessible routes'));
     const getRouteBySchemaUid = vi.fn();
@@ -1735,7 +1735,7 @@ describe('FlowRoute', () => {
     await waitFor(() => {
       expect(layoutModel.registerRoutePage).toHaveBeenCalledWith('public-form-1', expect.any(Object));
     });
-    expect(ensureAccessibleLoaded).toHaveBeenCalledTimes(1);
+    expect(ensureAccessibleLoaded).not.toHaveBeenCalled();
     expect(getRouteBySchemaUid).not.toHaveBeenCalled();
   });
 

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -712,7 +712,6 @@ export const AdminLayoutComponent = observer((props: any) => {
         <MobileMenuControlContext.Provider value={{ closeMobileMenu }}>
           <DndProvider collisionDetection={menuCollisionDetection} onDragEnd={handleMenuDragEnd}>
             <ProLayout
-              key={`admin-layout-menu-${menuRouteRefreshVersion}`}
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}