63 lines
1.6 KiB
React
63 lines
1.6 KiB
React
|
import React from 'react';
|
|||
|
|
import { QrCode, X } from 'lucide-react';
|
|||
|
|
import { QRCodeSVG } from 'qrcode.react';
|
|||
|
|
import './QRCodeModal.css';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* QRCodeModal - 二维码分享模态框组件
|
|||
|
|
*
|
|||
|
|
* @param {Object} props
|
|||
|
|
* @param {boolean} props.isOpen - 是否显示模态框
|
|||
|
|
* @param {Function} props.onClose - 关闭模态框的回调函数
|
|||
|
|
* @param {string} props.url - 二维码指向的URL
|
|||
|
|
* @param {string} props.title - 显示的标题文本
|
|||
|
|
* @param {string} props.description - 描述文本（可选）
|
|||
|
|
* @param {number} props.size - 二维码尺寸（可选，默认256）
|
|||
|
|
*/
|
|||
|
|
const QRCodeModal = ({
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
url,
|
|||
|
|
title,
|
|||
|
|
description = '扫描二维码访问',
|
|||
|
|
size = 256
|
|||
|
|
}) => {
|
|||
|
|
if (!isOpen) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="qr-modal-overlay" onClick={onClose}>
|
|||
|
|
<div className="qr-modal" onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<div className="modal-header">
|
|||
|
|
<h3>
|
|||
|
|
<QrCode size={20} /> 分享会议
|
|||
|
|
</h3>
|
|||
|
|
<button
|
|||
|
|
className="close-btn"
|
|||
|
|
onClick={onClose}
|
|||
|
|
aria-label="关闭"
|
|||
|
|
>
|
|||
|
|
<X size={20} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="qr-modal-content">
|
|||
|
|
<div className="qr-code-container">
|
|||
|
|
<QRCodeSVG
|
|||
|
|
value={url}
|
|||
|
|
size={size}
|
|||
|
|
level="H"
|
|||
|
|
includeMargin={true}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="qr-info">
|
|||
|
|
<p className="qr-description">{description}</p>
|
|||
|
|
<p className="qr-meeting-title">{title}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default QRCodeModal;
|