63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
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;
|