feat: implement global drag-and-drop file upload functionality with animations

Author: JavaZeroo

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { FileUpload } from './components/FileUpload';
 import { RegexControls } from './components/RegexControls';
 import { FileList } from './components/FileList';
@@ -19,6 +19,8 @@ function App() {
   const [showGradNorm, setShowGradNorm] = useState(false);
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [configFile, setConfigFile] = useState(null);
+  const [globalDragOver, setGlobalDragOver] = useState(false);
+  const [dragCounter, setDragCounter] = useState(0);
 
   const handleFilesUploaded = useCallback((files) => {
     const filesWithDefaults = files.map(file => ({
@@ -37,6 +39,39 @@ function App() {
     setUploadedFiles(prev => [...prev, ...filesWithDefaults]);
   }, []);
 
+  // 全局文件处理函数
+  const processGlobalFiles = useCallback((files) => {
+    const fileArray = Array.from(files).filter(file => 
+      file.type === 'text/plain' || file.name.endsWith('.log') || file.name.endsWith('.txt')
+    );
+
+    if (fileArray.length === 0) return;
+
+    const processedFiles = fileArray.map(file => ({
+      file,
+      name: file.name,
+      id: Math.random().toString(36).substr(2, 9),
+      data: null,
+      content: null
+    }));
+
+    // Read file contents
+    Promise.all(
+      processedFiles.map(fileObj => 
+        new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            fileObj.content = e.target.result;
+            resolve(fileObj);
+          };
+          reader.readAsText(fileObj.file);
+        })
+      )
+    ).then(files => {
+      handleFilesUploaded(files);
+    });
+  }, [handleFilesUploaded]);
+
   const handleFileRemove = useCallback((index) => {
     setUploadedFiles(prev => prev.filter((_, i) => i !== index));
   }, []);
@@ -71,8 +106,110 @@ function App() {
     }
   }, []);
 
+  // 全局拖拽事件处理
+  const handleGlobalDragEnter = useCallback((e) => {
+    e.preventDefault();
+    setDragCounter(prev => prev + 1);
+    
+    // 检查是否包含文件
+    if (e.dataTransfer.types.includes('Files')) {
+      setGlobalDragOver(true);
+    }
+  }, []);
+
+  const handleGlobalDragOver = useCallback((e) => {
+    e.preventDefault();
+    // 设置拖拽效果
+    e.dataTransfer.dropEffect = 'copy';
+  }, []);
+
+  const handleGlobalDragLeave = useCallback((e) => {
+    e.preventDefault();
+    setDragCounter(prev => {
+      const newCount = prev - 1;
+      if (newCount === 0) {
+        setGlobalDragOver(false);
+      }
+      return newCount;
+    });
+  }, []);
+
+  const handleGlobalDrop = useCallback((e) => {
+    e.preventDefault();
+    setGlobalDragOver(false);
+    setDragCounter(0);
+    
+    if (e.dataTransfer.files.length > 0) {
+      processGlobalFiles(e.dataTransfer.files);
+    }
+  }, [processGlobalFiles]);
+
+  // 添加全局拖拽监听器
+  useEffect(() => {
+    const handleDragEnter = (e) => handleGlobalDragEnter(e);
+    const handleDragOver = (e) => handleGlobalDragOver(e);
+    const handleDragLeave = (e) => handleGlobalDragLeave(e);
+    const handleDrop = (e) => handleGlobalDrop(e);
+
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('drop', handleDrop);
+
+    return () => {
+      document.removeEventListener('dragenter', handleDragEnter);
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('drop', handleDrop);
+    };
+  }, [handleGlobalDragEnter, handleGlobalDragOver, handleGlobalDragLeave, handleGlobalDrop]);
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 relative">
+      {/* 全页面拖拽覆盖层 */}
+      {globalDragOver && (
+        <div 
+          className="fixed inset-0 bg-blue-600 bg-opacity-95 z-50 flex items-center justify-center backdrop-blur-sm drag-overlay-fade-in"
+        >
+          <div 
+            className="bg-white rounded-xl shadow-2xl p-8 text-center max-w-md mx-4 border-4 border-dashed border-blue-300 drag-modal-scale-in"
+          >
+            <div className="mb-6">
+              <div className="relative">
+                <svg 
+                  className="mx-auto h-20 w-20 text-blue-600 drag-icon-bounce" 
+                  fill="none" 
+                  viewBox="0 0 24 24" 
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                    strokeWidth={1.5} 
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" 
+                  />
+                </svg>
+                <div className="absolute -top-2 -right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
+                  <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <h3 className="text-xl font-bold text-gray-900 mb-3">
+              🎯 释放文件以上传
+            </h3>
+            <p className="text-sm text-gray-600 mb-2">
+              支持 <span className="font-semibold text-blue-600">.log</span> 和 <span className="font-semibold text-blue-600">.txt</span> 格式
+            </p>
+            <p className="text-xs text-gray-500">
+              拖拽到页面任意位置即可快速上传日志文件
+            </p>
+          </div>
+        </div>
+      )}
+
       <div className="w-full px-3 py-3">
         <Header />
 

src/components/FileUpload.jsx

@@ -34,18 +34,27 @@ export function FileUpload({ onFilesUploaded }) {
     });
   }, [onFilesUploaded]);
 
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation(); // 阻止事件冒泡到全局处理器
+    setIsDragOver(true);
+  }, []);
+
   const handleDragOver = useCallback((e) => {
     e.preventDefault();
+    e.stopPropagation(); // 阻止事件冒泡到全局处理器
     setIsDragOver(true);
   }, []);
 
   const handleDragLeave = useCallback((e) => {
     e.preventDefault();
+    e.stopPropagation(); // 阻止事件冒泡到全局处理器
     setIsDragOver(false);
   }, []);
 
   const handleDrop = useCallback((e) => {
     e.preventDefault();
+    e.stopPropagation(); // 阻止事件冒泡到全局处理器
     setIsDragOver(false);
     processFiles(e.dataTransfer.files);
   }, [processFiles]);
@@ -67,6 +76,7 @@ export function FileUpload({ onFilesUploaded }) {
         className={`drag-area border-2 border-dashed rounded-lg p-4 text-center cursor-pointer ${
           isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
         }`}
+        onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}

src/components/Header.jsx

@@ -12,7 +12,7 @@ export function Header() {
           role="img"
         />
         <h1 className="text-2xl font-bold text-gray-800">
-          🤖 ML Log Analyzer
+          Log Analyzer
         </h1>
       </div>
       <p className="text-sm text-gray-600 mb-2" role="doc-subtitle">

src/index.css

@@ -167,3 +167,60 @@ input[type="checkbox"]:focus {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
 }
+
+/* 全页面拖拽动画 */
+@keyframes dragOverlayFadeIn {
+  from { 
+    opacity: 0; 
+  }
+  to { 
+    opacity: 1; 
+  }
+}
+
+@keyframes dragModalScaleIn {
+  from { 
+    opacity: 0; 
+    transform: scale(0.95) translateY(10px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: scale(1) translateY(0); 
+  }
+}
+
+@keyframes dragIconBounce {
+  0%, 20%, 53%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40%, 43% {
+    transform: translateY(-8px);
+  }
+  70% {
+    transform: translateY(-4px);
+  }
+  90% {
+    transform: translateY(-2px);
+  }
+}
+
+.drag-overlay-fade-in {
+  animation: dragOverlayFadeIn 0.1s ease-out;
+}
+
+.drag-modal-scale-in {
+  animation: dragModalScaleIn 0.15s ease-out;
+}
+
+.drag-icon-bounce {
+  animation: dragIconBounce 1s infinite;
+}
+
+/* 在减少动画偏好设置下禁用拖拽动画 */
+@media (prefers-reduced-motion: reduce) {
+  .drag-overlay-fade-in,
+  .drag-modal-scale-in,
+  .drag-icon-bounce {
+    animation: none !important;
+  }
+}