feat: markdown extension (#3663)

* feat: markdown extension

* media cros

* rerank test

* default price

* perf: default model

* fix: cannot custom provider

* fix: default model select

* update bg

* perf: default model selector

* fix: usage export

* i18n

* fix: rerank

* update init extension

* perf: ip limit check

* doubao model order

* web default modle

* perf: tts selector

* perf: tts error

* qrcode package

projects/app/src/components/support/wallet/QRCodePayModal.tsx

@@ -1,14 +1,12 @@
 import MyModal from '@fastgpt/web/components/common/MyModal';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Box, ModalBody } from '@chakra-ui/react';
 import { checkBalancePayResult } from '@/web/support/wallet/bill/api';
 import { useToast } from '@fastgpt/web/hooks/useToast';
-import { useRouter } from 'next/router';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import LightTip from '@fastgpt/web/components/common/LightTip';
-import Script from 'next/script';
-import { getWebReqUrl } from '@fastgpt/web/common/system/utils';
+import QRCode from 'qrcode';
 
 export type QRPayProps = {
   readPrice: number;
@@ -27,21 +25,35 @@ const QRCodePayModal = ({
 }: QRPayProps & { tip?: string; onSuccess?: () => any }) => {
   const { t } = useTranslation();
   const { toast } = useToast();
-  const dom = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLDivElement>(null);
 
   const drawCode = useCallback(() => {
-    if (dom.current && window.QRCode && !dom.current.innerHTML) {
-      new window.QRCode(dom.current, {
-        text: codeUrl,
-        width: qrCodeSize,
-        height: qrCodeSize,
-        colorDark: '#000000',
-        colorLight: '#ffffff',
-        correctLevel: window.QRCode.CorrectLevel.H
+    const canvas = document.createElement('canvas');
+    QRCode.toCanvas(canvas, codeUrl, {
+      width: qrCodeSize,
+      margin: 0,
+      color: {
+        dark: '#000000',
+        light: '#ffffff'
+      }
+    })
+      .then(() => {
+        if (canvasRef.current) {
+          canvasRef.current.innerHTML = '';
+          canvasRef.current.appendChild(canvas);
+        } else {
+          drawCode();
+        }
+      })
+      .catch((err) => {
+        console.error('QRCode generation error:', err);
       });
-    }
   }, [codeUrl]);
 
+  useEffect(() => {
+    drawCode();
+  }, [drawCode]);
+
   useEffect(() => {
     let timer: NodeJS.Timeout;
     const check = async () => {
@@ -54,7 +66,7 @@ const QRCodePayModal = ({
               title: res,
               status: 'success'
             });
-            return;
+            return clearTimeout(timer);
           } catch (error) {
             toast({
               title: getErrText(error),
@@ -63,9 +75,7 @@ const QRCodePayModal = ({
           }
         }
       } catch (error) {}
-
-      drawCode();
-
+      clearTimeout(timer);
       timer = setTimeout(check, 2000);
     };
 
@@ -75,23 +85,15 @@ const QRCodePayModal = ({
   }, [billId, drawCode, onSuccess, toast]);
 
   return (
-    <>
-      <Script
-        src={getWebReqUrl('/js/qrcode.min.js')}
-        strategy="lazyOnload"
-        onLoad={drawCode}
-      ></Script>
-
-      <MyModal isOpen title={t('common:user.Pay')} iconSrc="/imgs/modal/pay.svg">
-        <ModalBody textAlign={'center'} pb={10} whiteSpace={'pre-wrap'}>
-          {tip && <LightTip text={tip} mb={8} textAlign={'left'} />}
-          <Box ref={dom} id={'payQRCode'} display={'inline-block'} h={`${qrCodeSize}px`}></Box>
-          <Box mt={5} textAlign={'center'}>
-            {t('common:pay.wechat', { price: readPrice })}
-          </Box>
-        </ModalBody>
-      </MyModal>
-    </>
+    <MyModal isOpen title={t('common:user.Pay')} iconSrc="/imgs/modal/pay.svg">
+      <ModalBody textAlign={'center'} pb={10} whiteSpace={'pre-wrap'}>
+        {tip && <LightTip text={tip} mb={8} textAlign={'left'} />}
+        <Box ref={canvasRef} display={'inline-block'} h={`${qrCodeSize}px`}></Box>
+        <Box mt={5} textAlign={'center'}>
+          {t('common:pay.wechat', { price: readPrice })}
+        </Box>
+      </ModalBody>
+    </MyModal>
   );
 };