初始化

wwf

3 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2

 app/components/base/qrcode/index.tsx

@@ -1,20 +1,19 @@
'use client'
import React, { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
  RiQrCodeLine,
} from '@remixicon/react'
import { QRCodeCanvas as QRCode } from 'qrcode.react'
import ActionButton from '@/app/components/base/action-button'
import QRCode from 'qrcode.react'
import QrcodeStyle from './style.module.css'
import Tooltip from '@/app/components/base/tooltip'

type Props = {
  content: string
  selectorId: string
  className?: string
}

const prefixEmbedded = 'appOverview.overview.appInfo.qrcode.title'

const ShareQRCode = ({ content }: Props) => {
const ShareQRCode = ({ content, selectorId, className }: Props) => {
  const { t } = useTranslation()
  const [isShow, setIsShow] = useState<boolean>(false)
  const qrCodeRef = useRef<HTMLDivElement>(null)
@@ -54,21 +53,22 @@
    <Tooltip
      popupContent={t(`${prefixEmbedded}`) || ''}
    >
      <div className='relative h-6 w-6' onClick={toggleQRCode}>
        <ActionButton>
          <RiQrCodeLine className='h-4 w-4' />
        </ActionButton>
      <div
        className={`w-8 h-8 cursor-pointer rounded-lg ${className ?? ''}`}
        onClick={toggleQRCode}
      >
        <div className={`w-full h-full ${QrcodeStyle.QrcodeIcon} ${isShow ? QrcodeStyle.show : ''}`} />
        {isShow && (
          <div
            ref={qrCodeRef}
            className='absolute -right-8 top-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs'
            className={QrcodeStyle.qrcodeform}
            onClick={handlePanelClick}
          >
            <QRCode size={160} value={content} className='mb-2' />
            <div className='system-xs-regular flex items-center'>
              <div className='text-text-tertiary'>{t('appOverview.overview.appInfo.qrcode.scan')}</div>
              <div className='text-text-tertiary'>·</div>
              <div className='cursor-pointer text-text-accent-secondary' onClick={downloadQR}>{t('appOverview.overview.appInfo.qrcode.download')}</div>
            <QRCode size={160} value={content} className={QrcodeStyle.qrcodeimage}/>
            <div className={QrcodeStyle.text}>
              <div className={`text-gray-500 ${QrcodeStyle.scan}`}>{t('appOverview.overview.appInfo.qrcode.scan')}</div>
              <div className={`text-gray-500 ${QrcodeStyle.scan}`}>·</div>
              <div className={QrcodeStyle.download} onClick={downloadQR}>{t('appOverview.overview.appInfo.qrcode.download')}</div>
            </div>
          </div>
        )}