修复: 前端分享组件目录
This commit is contained in:
parent
6c144e81a3
commit
fb16b8544f
108
frontend/src/renderer/components/ShareModal.jsx
Normal file
108
frontend/src/renderer/components/ShareModal.jsx
Normal 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;
|
||||||
Loading…
Reference in New Issue
Block a user