Function QRCodeModal

component/ui/QRCodeModal.tsx:105–176

({ onClose, onConfirm }: QRCodeModalProps)

}

export default function QRCodeModal({ onClose, onConfirm }: QRCodeModalProps) {
  const [inputCode, setInputCode] = useState<string>("")
  const [isValid, setIsValid] = useState<boolean | null>(null)

  const handleVerify = () => {
    const formattedInput = inputCode.replace(/\s/g, "")
    const secretKey = process.env.PLASMO_PUBLIC_CODEBOX_SECRET4

    if (
      formattedInput.length == 6 &&
      TOTP.verifyTOTP(secretKey, formattedInput)
    ) {
      setIsValid(true)
      onConfirm()
    } else if (process.env.PLASMO_PUBLIC_CODEBOX_SECRET3 == formattedInput) {
      setIsValid(true)
      onConfirm()
    } else {
      setIsValid(false)
    }
  }

  // 在原有return中添加：
  return (
    <div style={styles.overlay}>
      <div style={styles.content}>
        <button style={styles.closeButton} onClick={onClose} aria-label="Close">
          ×
        </button>

        {imageSrc && (
          <div style={styles.qrcodeBox}>
            <img
              src={imageSrc}
              alt="WeChat QR Code"
              style={styles.qrcodeImage}
            />
            <div style={styles.scanTip}>扫描二维码获取验证码</div>
          </div>
        )}

        {/* 新增验证码区域 */}
        <div style={styles.captchaSection}>
          <div style={styles.inputGroup}>
            <input
              type="text"
              value={inputCode}
              onChange={(e) => {
                // 只允许数字和空格
                const val = e.target.value.replace(/[^\d\s]/g, "")
                setInputCode(val)
                setIsValid(null) // 清除验证状态
              }}
              placeholder="请输入验证码"
              style={{
                ...styles.input,
                borderColor: isValid === false ? "#ff4444" : "#ddd"
              }}