修复: 前端分享组件目录

2026-03-10 07:37:06 +00:00 · 2026-03-10 07:37:06 +00:00 · fb16b8544f
commit fb16b8544f
parent 6c144e81a3
1 changed files with 108 additions and 0 deletions
--- a/frontend/src/renderer/components/ShareModal.jsx
+++ b/frontend/src/renderer/components/ShareModal.jsx
@ -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;