feat(web): support drag and drop plugin upload

Author: zhx8702

web/src/pages/admin/PluginsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, type DragEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { pluginsApi } from '../../shared/api/plugins';
@@ -207,11 +207,10 @@ export default function PluginsPage() {
         {tabs.map((tab) => (
           <button
             key={tab.key}
-            className={`px-4 py-2.5 text-xs font-semibold uppercase tracking-wider border-b-2 transition-all duration-200 cursor-pointer ${
-              activeTab === tab.key
+            className={`px-4 py-2.5 text-xs font-semibold uppercase tracking-wider border-b-2 transition-all duration-200 cursor-pointer ${activeTab === tab.key
                 ? 'border-primary text-primary shadow-[0_2px_8px_var(--ag-primary-glow)]'
                 : 'border-transparent text-text-tertiary hover:text-text-secondary'
-            }`}
+              }`}
             onClick={() => setActiveTab(tab.key)}
           >
             {tab.label}
@@ -395,8 +394,8 @@ function PluginConfigModal({
           {(plugin?.config_schema || []).map((field) => {
             const inputType =
               field.type === 'password' ? 'password' :
-              field.type === 'int' || field.type === 'float' ? 'number' :
-              'text';
+                field.type === 'int' || field.type === 'float' ? 'number' :
+                  'text';
 
             // bool 渲染为复选框
             if (field.type === 'bool') {
@@ -462,6 +461,7 @@ function InstallPluginModal({
 
   const [installTab, setInstallTab] = useState<'upload' | 'github'>('upload');
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [dragActive, setDragActive] = useState(false);
   const [pluginName, setPluginName] = useState('');
   const [githubRepo, setGithubRepo] = useState('');
 
@@ -496,9 +496,35 @@ function InstallPluginModal({
 
   function handleClose() {
     resetForm();
+    setDragActive(false);
     onClose();
   }
 
+  function handleFileSelect(file: File | null) {
+    setSelectedFile(file);
+    setDragActive(false);
+  }
+
+  function handleDragEvent(e: DragEvent<HTMLDivElement>) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function handleDragEnter(e: DragEvent<HTMLDivElement>) {
+    handleDragEvent(e);
+    setDragActive(true);
+  }
+
+  function handleDragLeave(e: DragEvent<HTMLDivElement>) {
+    handleDragEvent(e);
+    setDragActive(false);
+  }
+
+  function handleDrop(e: DragEvent<HTMLDivElement>) {
+    handleDragEvent(e);
+    handleFileSelect(e.dataTransfer.files?.[0] || null);
+  }
+
   const installing = uploadMutation.isPending || githubMutation.isPending;
 
   const installTabs = [
@@ -542,11 +568,10 @@ function InstallPluginModal({
         {installTabs.map((tab) => (
           <button
             key={tab.key}
-            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all cursor-pointer ${
-              installTab === tab.key
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all cursor-pointer ${installTab === tab.key
                 ? 'bg-primary text-white'
                 : 'bg-surface text-text-secondary hover:bg-[var(--ag-bg-muted)]'
-            }`}
+              }`}
             onClick={() => setInstallTab(tab.key)}
             disabled={installing}
           >
@@ -564,18 +589,23 @@ function InstallPluginModal({
               {t('plugins.plugin_file')} <span className="text-danger">*</span>
             </label>
             <div
-              className={`border-2 border-dashed rounded-md p-6 text-center cursor-pointer transition-colors ${
-                selectedFile
+              className={`border-2 border-dashed rounded-md p-6 text-center cursor-pointer transition-colors ${selectedFile
                   ? 'border-primary bg-primary-subtle'
-                  : 'border-glass-border hover:border-border-focus'
-              }`}
+                  : dragActive
+                    ? 'border-border-focus bg-[var(--ag-bg-muted)]'
+                    : 'border-glass-border hover:border-border-focus'
+                }`}
               onClick={() => fileInputRef.current?.click()}
+              onDragOver={handleDragEvent}
+              onDragEnter={handleDragEnter}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
             >
               <input
                 ref={fileInputRef}
                 type="file"
                 className="hidden"
-                onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+                onChange={(e) => handleFileSelect(e.target.files?.[0] || null)}
               />
               {selectedFile ? (
                 <div className="flex items-center justify-center gap-2">
@@ -587,7 +617,7 @@ function InstallPluginModal({
                 </div>
               ) : (
                 <div>
-                  <Upload className="w-8 h-8 mx-auto mb-2 text-text-tertiary" />
+                  <Upload className={`w-8 h-8 mx-auto mb-2 ${dragActive ? 'text-primary' : 'text-text-tertiary'}`} />
                   <p className="text-sm text-text-tertiary">
                     {t('plugins.upload_hint')}
                   </p>