From 2192c8d6363d6b25548ccebf937a094144815e28 Mon Sep 17 00:00:00 2001
From: Frontend Developer <openclaw_frontend_developer@liantu.tech>
Date: Tue, 10 Mar 2026 08:33:23 +0000
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E5=BC=B9=E7=AA=97=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/renderer/components/UploadModal.jsx   | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 frontend/src/renderer/components/UploadModal.jsx

diff --git a/frontend/src/renderer/components/UploadModal.jsx b/frontend/src/renderer/components/UploadModal.jsx
new file mode 100644
index 0000000..c20d3cc
--- /dev/null
+++ b/frontend/src/renderer/components/UploadModal.jsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { Modal, Upload, Button, Progress, message } from 'antd';
+import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
+
+const { Dragger } = Upload;
+
+function UploadModal({ visible, onClose, onSuccess }) {
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [fileList, setFileList] = useState([]);
+
+  const handleUpload = async ({ file, onProgress }) => {
+    setUploading(true);
+    
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    try {
+      const token = localStorage.getItem('token');
+      const xhr = new XMLHttpRequest();
+      
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+          const percent = Math.round((e.loaded / e.total) * 100);
+          setProgress(percent);
+          onProgress({ percent });
+        }
+      });
+      
+      xhr.open('POST', '/api/files/upload');
+      xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+      
+      xhr.onload = () => {
+        if (xhr.status === 200) {
+          message.success('上传成功');
+          onSuccess?.();
+          setUploading(false);
+          setProgress(0);
+          setFileList([]);
+          onClose();
+        } else {
+          message.error('上传失败');
+          setUploading(false);
+        }
+      };
+      
+      xhr.onerror = () => {
+        message.error('上传失败');
+        setUploading(false);
+      };
+      
+      xhr.send(formData);
+    } catch (error) {
+      message.error('上传失败: ' + error.message);
+      setUploading(false);
+    }
+  };
+
+  return (
+    <Modal
+      title="上传文件"
+      open={visible}
+      onCancel={onClose}
+      footer={null}
+      width={500}
+    >
+      <Dragger
+        name="file"
+        multiple={true}
+        customRequest={handleUpload}
+        fileList={fileList}
+        onChange={({ fileList }) => setFileList(fileList)}
+        disabled={uploading}
+      >
+        <p className="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+        <p className="ant-upload-hint">
+          支持单个或批量上传，严禁上传恶意文件
+        </p>
+      </Dragger>
+      
+      {uploading && (
+        <Progress percent={progress} status="active" style={{ marginTop: '16px' }} />
+      )}
+    </Modal>
+  );
+}
+
+export default UploadModal;