teach_sys_Demo/src/pages/ProjectLibraryPage/components/UploadModal/index.jsx

import { useState, useRef } from "react";
import { Modal } from "@arco-design/web-react";
import { IconUpload, IconFile, IconDelete } from "@arco-design/web-react/icon";
import toast from "@/components/Toast";
import "./index.css";

const UploadModal = ({ visible, onClose }) => {
  const [isDragging, setIsDragging] = useState(false);
  const [uploadedFile, setUploadedFile] = useState(null);
  const fileInputRef = useRef(null);

  const handleDragOver = (e) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setIsDragging(false);
    
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      handleFileSelect(files[0]);
    }
  };

  const handleFileSelect = (file) => {
    // 验证文件类型
    const allowedTypes = [
      'application/pdf',
      'application/msword', 
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'text/plain',
      'text/markdown',
      'text/x-markdown'
    ];
    
    const allowedExtensions = ['.pdf', '.doc', '.docx', '.txt', '.md', '.markdown'];
    const fileExtension = file.name.toLowerCase().match(/\.[^.]+$/)?.[0];
    
    if (!allowedTypes.includes(file.type) && !allowedExtensions.includes(fileExtension)) {
      toast.error("请上传 PDF、Word、Markdown 或 TXT 格式的文件");
      return;
    }

    // 验证文件大小（限制为10MB）
    if (file.size > 10 * 1024 * 1024) {
      toast.error("文件大小不能超过10MB");
      return;
    }

    setUploadedFile(file);
    toast.success(`文件 ${file.name} 已选择`);
  };

  const handleFileInputChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      handleFileSelect(file);
    }
  };

  const handleUploadClick = () => {
    fileInputRef.current?.click();
  };

  const handleSubmit = () => {
    if (!uploadedFile) {
      toast.error("请先选择要上传的文件");
      return;
    }
    
    // 这里可以添加实际的上传逻辑
    toast.success("文件上传成功");
    setUploadedFile(null);
    onClose();
  };

  const handleCancel = () => {
    setUploadedFile(null);
    onClose();
  };

  return (
    <Modal
      title={false}
      visible={visible}
      onOk={handleSubmit}
      onCancel={handleCancel}
      okText="确认上传"
      cancelText="取消"
      style={{ width: '720px' }}
      width={720}
      className="upload-modal"
      width={960}
      maskClosable={false}
    >
      <div className="upload-modal-content">
        <div className="upload-header">
          <h3>选择文件上传</h3>
          <p>请选择您的项目文档进行上传，支持批量上传多个文件</p>
        </div>
        
        <div 
          className={`upload-area ${isDragging ? 'dragging' : ''} ${uploadedFile ? 'has-file' : ''}`}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          onClick={handleUploadClick}
        >
          <input
            ref={fileInputRef}
            type="file"
            accept=".pdf,.doc,.docx,.txt,.md,.markdown"
            onChange={handleFileInputChange}
            style={{ display: 'none' }}
          />
          
          {uploadedFile ? (
            <div className="uploaded-file-display">
              <div className="file-icon-wrapper">
                <IconFile className="file-icon" />
              </div>
              <div className="file-info">
                <p className="file-name">{uploadedFile.name}</p>
                <p className="file-meta">
                  <span className="file-size">
                    {(uploadedFile.size / 1024 / 1024).toFixed(2)} MB
                  </span>
                  <span className="file-status">准备上传</span>
                </p>
              </div>
              <button 
                className="remove-file-btn"
                onClick={(e) => {
                  e.stopPropagation();
                  setUploadedFile(null);
                }}
              >
                <IconDelete />
              </button>
            </div>
          ) : (
            <div className="upload-placeholder">
              <IconUpload className="upload-icon" />
              <p className="upload-text">点击选择文件或将文件拖拽至此处</p>
              <p className="upload-hint">支持 PDF、Word、Markdown、TXT 格式，单个文件不超过 10MB</p>
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};

export default UploadModal;