修复: 前端分享组件目录

This commit is contained in:
Team 2026-03-10 07:37:06 +00:00
parent 6c144e81a3
commit fb16b8544f

View File

@ -0,0 +1,108 @@
import React, { useState } from 'react';
import { Modal, Input, Button, Switch, message } from 'antd';
function ShareModal({ file, visible, onClose }) {
const [shareLink, setShareLink] = useState('');
const [password, setPassword] = useState('');
const [enablePassword, setEnablePassword] = useState(false);
const [expireHours, setExpireHours] = useState(24);
const [loading, setLoading] = useState(false);
const handleShare = async () => {
if (!file) return;
setLoading(true);
try {
const token = localStorage.getItem('token');
const response = await fetch('/api/share', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
fileId: file.id,
password: enablePassword ? password : null,
expiresIn: expireHours * 3600
})
});
const data = await response.json();
if (data.success) {
const link = `${window.location.origin}/share/${data.shareToken}`;
setShareLink(link);
message.success('分享链接已生成');
}
} catch (error) {
message.error('创建分享失败');
} finally {
setLoading(false);
}
};
const handleCopy = () => {
navigator.clipboard.writeText(shareLink);
message.success('链接已复制');
};
return (
<Modal
title="分享文件"
open={visible}
onCancel={onClose}
footer={[
<Button key="close" onClick={onClose}>关闭</Button>
]}
>
<div style={{ marginBottom: '16px' }}>
<p>分享: <strong>{file?.name}</strong></p>
</div>
<div style={{ marginBottom: '16px' }}>
<div style={{ marginBottom: '8px' }}>
<Switch checked={enablePassword} onChange={setEnablePassword} />
<span style={{ marginLeft: '8px' }}>设置密码保护</span>
</div>
{enablePassword && (
<Input.Password
placeholder="请输入访问密码"
value={password}
onChange={e => setPassword(e.target.value)}
/>
)}
</div>
<div style={{ marginBottom: '16px' }}>
<span>有效期: </span>
<select
value={expireHours}
onChange={e => setExpireHours(Number(e.target.value))}
style={{ padding: '4px 8px' }}
>
<option value={1}>1小时</option>
<option value={24}>24小时</option>
<option value={72}>3</option>
<option value={168}>7</option>
<option value={0}>永久有效</option>
</select>
</div>
{!shareLink && (
<Button type="primary" block onClick={handleShare} loading={loading}>
生成分享链接
</Button>
)}
{shareLink && (
<div>
<Input value={shareLink} readOnly style={{ marginBottom: '8px' }} />
<Button type="primary" block onClick={handleCopy}>
复制链接
</Button>
</div>
)}
</Modal>
);
}
export default ShareModal;