@nocobase/client-v2 2.3.0-alpha.1 → 3.0.0-alpha.2

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

@@ -7,13 +7,15 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React, { useCallback } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { DEFAULT_CODE_FORMATS, getCodeScanBoxSize, useCodeScanner } from '../useCodeScanner';
+import { DEFAULT_CODE_FORMATS, getCodeScanBoxSize, scanQrVideoFrame, useCodeScanner } from '../useCodeScanner';
 
 type MockScannerInstance = {
+  applyVideoConstraints: ReturnType<typeof vi.fn>;
   clear: ReturnType<typeof vi.fn>;
+  getRunningTrackCapabilities: ReturnType<typeof vi.fn>;
   getState: ReturnType<typeof vi.fn>;
   scanFileV2: ReturnType<typeof vi.fn>;
   start: ReturnType<typeof vi.fn>;
@@ -24,18 +26,24 @@ const mocks = vi.hoisted(() => {
   const start = vi.fn().mockResolvedValue(null);
   const stop = vi.fn().mockResolvedValue(null);
   const clear = vi.fn();
+  const applyVideoConstraints = vi.fn().mockResolvedValue(undefined);
+  const getRunningTrackCapabilities = vi.fn(() => ({}));
   const getState = vi.fn(() => 1);
   const scanFileV2 = vi.fn();
   const Html5Qrcode = vi.fn(function MockHtml5Qrcode(this: MockScannerInstance) {
     this.start = start;
     this.stop = stop;
     this.clear = clear;
+    this.applyVideoConstraints = applyVideoConstraints;
+    this.getRunningTrackCapabilities = getRunningTrackCapabilities;
     this.getState = getState;
     this.scanFileV2 = scanFileV2;
   });
 
   return {
+    applyVideoConstraints,
     clear,
+    getRunningTrackCapabilities,
     getState,
     Html5Qrcode,
     scanFileV2,
@@ -77,18 +85,15 @@ vi.mock('jsqr', () => jsQrMocks);
 function ScannerHost({
   onCameraStartFailure,
   onScanFailure,
-  scanBoxSize,
 }: {
   onCameraStartFailure?: (error: unknown) => void;
   onScanFailure?: () => void;
-  scanBoxSize?: { width: number; height: number };
 } = {}) {
   const handleScanSuccess = useCallback(() => undefined, []);
 
   useCodeScanner({
     elementId: 'scanner',
     enabled: true,
-    scanBoxSize,
     onCameraStartFailure,
     onScanFailure,
     onScanSuccess: handleScanSuccess,
@@ -159,6 +164,11 @@ function stubCanvas() {
 describe('useCodeScanner', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mocks.applyVideoConstraints.mockResolvedValue(undefined);
+    mocks.getRunningTrackCapabilities.mockReturnValue({});
+    mocks.start.mockResolvedValue(null);
+    mocks.stop.mockResolvedValue(null);
+    mocks.getState.mockReturnValue(1);
     jsQrMocks.default.mockReturnValue(undefined);
   });
 
@@ -188,32 +198,73 @@ describe('useCodeScanner', () => {
       | { qrbox?: (width: number, height: number) => { width: number; height: number } }
       | undefined;
 
-    expect(config?.qrbox?.(390, 844)).toEqual({ width: 319, height: 240 });
-    expect(getCodeScanBoxSize(390, 844)).toEqual({ width: 319, height: 240 });
+    expect(config?.qrbox?.(1280, 720)).toEqual({ width: 1152, height: 504 });
+    expect(getCodeScanBoxSize(1280, 720)).toEqual({ width: 1152, height: 504 });
   });
 
-  it('can use the visible viewport scan box when the camera video is wider than the viewport', async () => {
-    render(<ScannerHost scanBoxSize={{ width: 319, height: 240 }} />);
+  it('uses optimized camera constraints without requiring a user-selected scan mode', async () => {
+    render(<ScannerHost />);
 
     await waitFor(() => expect(mocks.start).toHaveBeenCalled());
 
     const config = mocks.start.mock.calls[0]?.[1] as
-      | { qrbox?: (width: number, height: number) => { width: number; height: number } }
+      | {
+          disableFlip?: boolean;
+          fps?: number;
+          qrbox?: (width: number, height: number) => { width: number; height: number };
+          videoConstraints?: MediaTrackConstraints;
+        }
       | undefined;
 
-    expect(config?.qrbox?.(1200, 844)).toEqual({ width: 319, height: 240 });
+    expect(config?.qrbox?.(1280, 720)).toEqual({ width: 1152, height: 504 });
+    expect(config).toMatchObject({
+      disableFlip: false,
+      fps: 8,
+      videoConstraints: {
+        facingMode: { ideal: 'environment' },
+        width: { ideal: 1920 },
+        height: { ideal: 1080 },
+        frameRate: { ideal: 30 },
+      },
+    });
+    expect(mocks.Html5Qrcode).toHaveBeenCalledWith('scanner', {
+      formatsToSupport: DEFAULT_CODE_FORMATS,
+      verbose: false,
+    });
   });
 
-  it('clamps the scan box to the camera viewfinder size', async () => {
-    render(<ScannerHost scanBoxSize={{ width: 319, height: 240 }} />);
+  it('decodes a centered QR code from the raw camera frame fast path', () => {
+    jsQrMocks.default.mockReturnValueOnce({ data: 'FAST-QR' });
+    stubCanvas();
+    const video = document.createElement('video');
+    Object.defineProperties(video, {
+      clientHeight: { value: 720 },
+      clientWidth: { value: 1280 },
+      readyState: { value: HTMLMediaElement.HAVE_CURRENT_DATA },
+      videoHeight: { value: 1080 },
+      videoWidth: { value: 1920 },
+    });
+    const canvas = document.createElement('canvas');
+
+    expect(scanQrVideoFrame(video, canvas)).toBe('FAST-QR');
 
-    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+    const context = canvas.getContext('2d');
+    expect(context?.drawImage).toHaveBeenCalledWith(video, 96, 162, 1728, 756, 0, 0, 960, 420);
+    expect(jsQrMocks.default).toHaveBeenCalledWith(expect.any(Uint8ClampedArray), 960, 420, {
+      inversionAttempts: 'dontInvert',
+    });
+  });
 
-    const config = mocks.start.mock.calls[0]?.[1] as
-      | { qrbox?: (width: number, height: number) => { width: number; height: number } }
-      | undefined;
+  it('enables continuous camera focus when the device supports it', async () => {
+    mocks.getRunningTrackCapabilities.mockReturnValue({ focusMode: ['manual', 'continuous'] });
+
+    render(<ScannerHost />);
 
-    expect(config?.qrbox?.(200, 160)).toEqual({ width: 200, height: 160 });
+    await waitFor(() =>
+      expect(mocks.applyVideoConstraints).toHaveBeenCalledWith({
+        advanced: [{ focusMode: 'continuous' }],
+      }),
+    );
   });
 
   it('reports camera start failures through the dedicated handler', async () => {
@@ -228,6 +279,51 @@ describe('useCodeScanner', () => {
     expect(handleScanFailure).not.toHaveBeenCalled();
   });
 
+  it('stops a camera that finishes starting after the scanner unmounts', async () => {
+    let resolveStart: ((value: null) => void) | undefined;
+    mocks.start.mockReturnValueOnce(
+      new Promise<null>((resolve) => {
+        resolveStart = resolve;
+      }),
+    );
+    mocks.getState.mockReturnValueOnce(1).mockReturnValue(2);
+
+    const { unmount } = render(<ScannerHost />);
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    unmount();
+    await act(async () => {
+      resolveStart?.(null);
+    });
+
+    await waitFor(() => expect(mocks.stop).toHaveBeenCalledTimes(1));
+    expect(mocks.clear).toHaveBeenCalled();
+  });
+
+  it('ignores a camera start failure after the scanner unmounts', async () => {
+    let rejectStart: ((error: Error) => void) | undefined;
+    mocks.start.mockReturnValueOnce(
+      new Promise<null>((_resolve, reject) => {
+        rejectStart = reject;
+      }),
+    );
+    const handleCameraStartFailure = vi.fn();
+    const handleScanFailure = vi.fn();
+
+    const { unmount } = render(
+      <ScannerHost onCameraStartFailure={handleCameraStartFailure} onScanFailure={handleScanFailure} />,
+    );
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    unmount();
+    await act(async () => {
+      rejectStart?.(new Error('Camera start canceled'));
+    });
+
+    expect(handleCameraStartFailure).not.toHaveBeenCalled();
+    expect(handleScanFailure).not.toHaveBeenCalled();
+  });
+
   it('uses jsQR first for Safari uploaded QR images', async () => {
     const handleScanSuccess = vi.fn();
     jsQrMocks.default.mockReturnValueOnce({ data: 'JSQR-CODE' });

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

@@ -9,7 +9,7 @@
 
 import { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
 import jsQR from 'jsqr';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { CodeFormatsToSupport } from './types';
 
 type ScannerSize = {
@@ -21,7 +21,6 @@ type UseCodeScannerOptions = {
   enabled: boolean;
   elementId: string;
   formatsToSupport?: CodeFormatsToSupport;
-  scanBoxSize?: ScannerSize;
   onScannerSizeChanged?: (size: ScannerSize) => void;
   onScanSuccess: (text: string) => void;
   onScanFailure?: () => void;
@@ -38,7 +37,18 @@ type JsQRImageTransform = {
   threshold?: number;
 };
 
+type FocusMediaTrackCapabilities = MediaTrackCapabilities & {
+  focusMode?: string[];
+};
+
+type FocusMediaTrackConstraintSet = MediaTrackConstraintSet & {
+  focusMode?: string;
+};
+
 const QR_SCAN_IMAGE_SIZES = [3200, 2400, 1600, 1000];
+const LIVE_QR_SCAN_INTERVAL = 120;
+const LIVE_QR_SCAN_MAX_WIDTH = 960;
+const LIVE_QR_SCAN_MAX_HEIGHT = 540;
 const QR_SCAN_IMAGE_TRANSFORMS: JsQRImageTransform[] = [
   {},
   { contrast: 3, threshold: 105 },
@@ -66,8 +76,72 @@ export const DEFAULT_CODE_FORMATS: CodeFormatsToSupport = [
 
 export function getCodeScanBoxSize(width: number, height: number) {
   return {
-    width: Math.floor(Math.min(width * 0.82, 520)),
-    height: Math.floor(Math.min(height * 0.32, 240)),
+    width: Math.floor(Math.min((width * 90) / 100, 1152)),
+    height: Math.floor(Math.min((height * 70) / 100, 540)),
+  };
+}
+
+export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement) {
+  if (!video.videoWidth || !video.videoHeight || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+    return;
+  }
+
+  const viewfinderWidth = video.clientWidth || video.videoWidth;
+  const viewfinderHeight = video.clientHeight || video.videoHeight;
+  const scanBoxSize = getCodeScanBoxSize(viewfinderWidth, viewfinderHeight);
+  const sourceWidth = Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth)));
+  const sourceHeight = Math.min(
+    video.videoHeight,
+    Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight)),
+  );
+  const sourceX = Math.floor((video.videoWidth - sourceWidth) / 2);
+  const sourceY = Math.floor((video.videoHeight - sourceHeight) / 2);
+  const targetScale = Math.min(1, LIVE_QR_SCAN_MAX_WIDTH / sourceWidth, LIVE_QR_SCAN_MAX_HEIGHT / sourceHeight);
+  const targetWidth = Math.max(1, Math.floor(sourceWidth * targetScale));
+  const targetHeight = Math.max(1, Math.floor(sourceHeight * targetScale));
+  if (canvas.width !== targetWidth) {
+    canvas.width = targetWidth;
+  }
+  if (canvas.height !== targetHeight) {
+    canvas.height = targetHeight;
+  }
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(video, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
+  const imageData = context.getImageData(0, 0, targetWidth, targetHeight);
+  return jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' })?.data;
+}
+
+function startLiveQrScan(elementId: string, onScanSuccess: (text: string) => void) {
+  const canvas = document.createElement('canvas');
+  let timer: number | undefined;
+  let stopped = false;
+
+  const scan = () => {
+    if (stopped) {
+      return;
+    }
+    const video = document.getElementById(elementId)?.querySelector('video');
+    if (video) {
+      const decodedText = scanQrVideoFrame(video, canvas);
+      if (decodedText) {
+        stopped = true;
+        onScanSuccess(decodedText);
+        return;
+      }
+    }
+    timer = window.setTimeout(scan, LIVE_QR_SCAN_INTERVAL);
+  };
+
+  timer = window.setTimeout(scan, 0);
+  return () => {
+    stopped = true;
+    if (timer !== undefined) {
+      window.clearTimeout(timer);
+    }
   };
 }
 
@@ -92,6 +166,19 @@ async function stopScanner(scanner?: Html5Qrcode, options: { clear?: boolean } =
   }
 }
 
+async function enableContinuousFocus(scanner: Html5Qrcode) {
+  try {
+    const capabilities = scanner.getRunningTrackCapabilities() as FocusMediaTrackCapabilities;
+    if (!capabilities.focusMode?.includes('continuous')) {
+      return;
+    }
+    const focusConstraints: FocusMediaTrackConstraintSet = { focusMode: 'continuous' };
+    await scanner.applyVideoConstraints({ advanced: [focusConstraints] });
+  } catch {
+    // Some browsers expose incomplete camera capability APIs. Scanning should continue without explicit focus control.
+  }
+}
+
 function isSafariBrowser() {
   const { userAgent, vendor } = navigator;
   return /Apple/i.test(vendor) && /Safari/i.test(userAgent) && !/CriOS|FxiOS|EdgiOS|Chrome/i.test(userAgent);
@@ -216,40 +303,95 @@ export function useCodeScanner({
   enabled,
   elementId,
   formatsToSupport,
-  scanBoxSize,
   onScannerSizeChanged,
   onScanSuccess,
   onScanFailure,
   onCameraStartFailure,
 }: UseCodeScannerOptions) {
   const [scanner, setScanner] = useState<Html5Qrcode>();
+  const liveQrScanStopRef = useRef<() => void>();
+  const scanSucceededRef = useRef(false);
+  const scanSessionRef = useRef(0);
+
+  const stopLiveQrScan = useCallback(() => {
+    liveQrScanStopRef.current?.();
+    liveQrScanStopRef.current = undefined;
+  }, []);
+
+  const cancelActiveScan = useCallback(() => {
+    scanSessionRef.current += 1;
+    stopLiveQrScan();
+  }, [stopLiveQrScan]);
+
+  const reportScanSuccess = useCallback(
+    (text: string) => {
+      if (scanSucceededRef.current) {
+        return;
+      }
+      scanSucceededRef.current = true;
+      stopLiveQrScan();
+      onScanSuccess(text);
+    },
+    [onScanSuccess, stopLiveQrScan],
+  );
 
   const startScanCamera = useCallback(
     async (scannerInstance: Html5Qrcode) => {
-      await scannerInstance.start(
-        { facingMode: 'environment' },
-        {
-          fps: 10,
-          qrbox(width, height) {
-            onScannerSizeChanged?.({ width, height });
-            return clampCodeScanBoxSize(scanBoxSize ?? getCodeScanBoxSize(width, height), width, height);
+      cancelActiveScan();
+      const scanSession = scanSessionRef.current;
+      scanSucceededRef.current = false;
+      try {
+        await scannerInstance.start(
+          { facingMode: 'environment' },
+          {
+            fps: 8,
+            disableFlip: false,
+            videoConstraints: {
+              facingMode: { ideal: 'environment' },
+              width: { ideal: 1920 },
+              height: { ideal: 1080 },
+              frameRate: { ideal: 30 },
+            },
+            qrbox(width, height) {
+              onScannerSizeChanged?.({ width, height });
+              return clampCodeScanBoxSize(getCodeScanBoxSize(width, height), width, height);
+            },
+          },
+          (decodedText) => {
+            reportScanSuccess(decodedText);
           },
-        },
-        (decodedText) => {
-          onScanSuccess(decodedText);
-        },
-        undefined,
-      );
+          undefined,
+        );
+      } catch (error) {
+        if (scanSession !== scanSessionRef.current) {
+          return;
+        }
+        throw error;
+      }
+      if (scanSession !== scanSessionRef.current) {
+        try {
+          await stopScanner(scannerInstance, { clear: true });
+        } catch {
+          // The scanner may already have been cleared by the canceled session cleanup.
+        }
+        return;
+      }
+      if (shouldScanQrWithJsQR(formatsToSupport)) {
+        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess);
+      }
+      await enableContinuousFocus(scannerInstance);
     },
-    [onScanSuccess, onScannerSizeChanged, scanBoxSize],
+    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess],
   );
 
   const startScanFile = useCallback(
     async (file: File) => {
+      cancelActiveScan();
+      scanSucceededRef.current = false;
       if (isSafariBrowser() && shouldScanQrWithJsQR(formatsToSupport)) {
         try {
           const decodedText = await scanFileWithJsQR(file, formatsToSupport);
-          onScanSuccess(decodedText);
+          reportScanSuccess(decodedText);
           return;
         } catch {
           // Fall through to html5-qrcode so barcode uploads still work in Safari.
@@ -263,13 +405,13 @@ export function useCodeScanner({
       await stopScanner(scanner);
       try {
         const result = await scanner.scanFileV2(file, false);
-        onScanSuccess(result.decodedText);
+        reportScanSuccess(result.decodedText);
       } catch {
         onScanFailure?.();
         await startScanCamera(scanner);
       }
     },
-    [formatsToSupport, onScanFailure, onScanSuccess, scanner, startScanCamera],
+    [cancelActiveScan, formatsToSupport, onScanFailure, reportScanSuccess, scanner, startScanCamera],
   );
 
   useEffect(() => {
@@ -291,9 +433,10 @@ export function useCodeScanner({
     });
 
     return () => {
+      cancelActiveScan();
       stopScanner(scannerInstance, { clear: true }).catch(() => undefined);
     };
-  }, [elementId, enabled, formatsToSupport, onCameraStartFailure, onScanFailure, startScanCamera]);
+  }, [cancelActiveScan, elementId, enabled, formatsToSupport, onCameraStartFailure, onScanFailure, startScanCamera]);
 
   return {
     startScanFile,

package/src/components/index.ts

@@ -8,6 +8,7 @@
  */
 
 export * from './AppComponents';
+export * from './AttachmentUpload';
 export * from './BlankComponent';
 export * from './category-tabs';
 export * from './form/table/dnd';

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

@@ -116,6 +116,7 @@ describe('FlowRoute', () => {
         }),
       );
     });
+    expect(engine.context.deviceType).toBe('computer');
 
     rerender(
       <FlowEngineProvider engine={engine}>
@@ -581,14 +582,14 @@ describe('FlowRoute', () => {
     expect(getRouteBySchemaUid).toHaveBeenCalledTimes(1);
   });
 
-  it('should show 404 when current route is a legacy page in v2 runtime', async () => {
+  it('should explain how to open a legacy page outside the v2 runtime', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();
     Object.defineProperty(window, 'location', {
       configurable: true,
       value: {
         ...originalLocation,
-        pathname: '/v2/admin/test-page/tab/tab-1',
+        pathname: '/nocobase/v2/apps/jhb20/admin/test-page/tab/tab-1',
         search: '?from=direct',
         hash: '#dialog',
         replace,
@@ -607,9 +608,9 @@ describe('FlowRoute', () => {
       });
       engine.context.defineProperty('app', {
         value: {
-          getPublicPath: () => '/v2/',
+          getPublicPath: () => '/nocobase/v2/',
           router: {
-            getBasename: () => '/v2',
+            getBasename: () => '/nocobase/v2',
           },
         },
       });
@@ -625,15 +626,25 @@ describe('FlowRoute', () => {
 
       render(
         <FlowEngineProvider engine={engine}>
-          <MemoryRouter initialEntries={['/flow/test-page']}>
+          <MemoryRouter initialEntries={['/nocobase/v2/apps/jhb20/admin/test-page/tab/tab-1?from=direct#dialog']}>
             <Routes>
-              <Route path="/flow/:name" element={<FlowRoute />} />
+              <Route path="/nocobase/v2/apps/jhb20/admin/:name/*" element={<FlowRoute />} />
             </Routes>
           </MemoryRouter>
         </FlowEngineProvider>,
       );
 
-      expect(await screen.findByText('404')).toBeInTheDocument();
+      expect(await screen.findByText('This page is not supported in the /v2/ branch')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'The /v2/ branch only supports new pages. This page is a legacy page. Please open it from the original entry.',
+        ),
+      ).toBeInTheDocument();
+      expect(screen.queryByText('404')).not.toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Open from the original entry' })).toHaveAttribute(
+        'href',
+        '/nocobase/apps/jhb20/admin/test-page/tab/tab-1?from=direct#dialog',
+      );
       expect(replace).not.toHaveBeenCalled();
       expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
       expect(adminLayoutModel.updateRoutePage).not.toHaveBeenCalled();
@@ -706,6 +717,113 @@ describe('FlowRoute', () => {
     }
   });
 
+  it('should render 404 for missing FlowModel in notFound mode without routeRepository', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/embed/missing-page']}>
+          <Routes>
+            <Route path="/embed/:name" element={<FlowRoute legacyPageBehavior="notFound" />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('404')).toBeInTheDocument();
+    expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
+  });
+
+  it('should bridge by default when routeRepository does not exist', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/missing-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith('missing-page', expect.any(Object));
+    });
+    expect(screen.queryByText('404')).not.toBeInTheDocument();
+  });
+
+  it('should bridge existing FlowModel in notFound mode without routeRepository', async () => {
+    const engine = new FlowEngine();
+    engine.createModel({ uid: 'test-page', use: 'FlowModel' });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/embed/test-page']}>
+          <Routes>
+            <Route path="/embed/:name" element={<FlowRoute legacyPageBehavior="notFound" />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith('test-page', expect.any(Object));
+    });
+    expect(screen.queryByText('404')).not.toBeInTheDocument();
+  });
+
   it('should bridge existing FlowModel when behavior is notFound and routeRepository has no route', async () => {
     const engine = new FlowEngine();
     engine.setModelRepository({
@@ -1801,7 +1919,7 @@ describe('FlowRoute', () => {
     }
   });
 
-  it('should render not found without redirecting when admin route does not exist', async () => {
+  it('should render 404 when route and FlowModel do not exist', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();
     Object.defineProperty(window, 'location', {