diff --git a/packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/index.tsx b/packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/index.tsx index 15c46eb4ec..9365c8ee67 100644 --- a/packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/index.tsx +++ b/packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/index.tsx @@ -9,13 +9,13 @@ import { FileImageOutlined, LeftOutlined } from '@ant-design/icons'; import { useActionContext } from '@nocobase/client'; import { Html5Qrcode } from 'html5-qrcode'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ScanBox } from './ScanBox'; import { useScanner } from './useScanner'; const qrcodeEleId = 'qrcode'; -export const QRCodeScannerInner = (props) => { +export const QRCodeScannerInner = ({ setVisible }) => { const containerRef = useRef(); const imgUploaderRef = useRef(); const { t } = useTranslation('block-workbench'); @@ -23,9 +23,17 @@ export const QRCodeScannerInner = (props) => { const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0); + const onScanSuccess = useCallback( + (text) => { + setVisible(false); + }, + [setVisible], + ); + const { startScanFile } = useScanner({ onScannerSizeChanged: setOriginVideoSize, elementId: qrcodeEleId, + onScanSuccess, }); const getBoxStyle = (): React.CSSProperties => { @@ -174,7 +182,7 @@ export const QRCodeScanner = (props) => { return visible && cameraAvaliable ? (
- + setVisible(false)} />
{t('Scan QR code')}
diff --git a/packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/useScanner.ts b/packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/useScanner.ts index 7e4e5eae0b..16568498ce 100644 --- a/packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/useScanner.ts +++ b/packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/useScanner.ts @@ -20,7 +20,7 @@ function removeStringIfStartsWith(text: string, prefix: string): string { return text; } -export function useScanner({ onScannerSizeChanged, elementId }) { +export function useScanner({ onScannerSizeChanged, elementId, onScanSuccess }) { const app = useApp(); const mobileManager = app.pm.get(MobileManager); const basename = mobileManager.mobileRouter.basename.replace(/\/+$/, ''); @@ -50,12 +50,17 @@ export function useScanner({ onScannerSizeChanged, elementId }) { }, }, (text) => { + if (text?.startsWith('http')) { + window.location.href = text; + return; + } navigate(removeStringIfStartsWith(text, basename)); + onScanSuccess && onScanSuccess(text); }, undefined, ); }, - [navigate, onScannerSizeChanged, viewPoint, basename], + [navigate, onScannerSizeChanged, viewPoint, basename, onScanSuccess], ); const stopScanner = useCallback(async (scanner: Html5Qrcode) => { const state = scanner.getState(); @@ -69,13 +74,18 @@ export function useScanner({ onScannerSizeChanged, elementId }) { await stopScanner(scanner); try { const { decodedText } = await scanner.scanFileV2(file, false); + if (decodedText?.startsWith('http')) { + window.location.href = decodedText; + return; + } navigate(removeStringIfStartsWith(decodedText, basename)); + onScanSuccess && onScanSuccess(decodedText); } catch (error) { alert(t('QR code recognition failed, please scan again')); startScanCamera(scanner); } }, - [stopScanner, scanner, navigate, basename, t, startScanCamera], + [stopScanner, scanner, navigate, basename, t, startScanCamera, onScanSuccess], ); useEffect(() => {