fix(admin): 优化插件拖拽上传与价格开关提示 (#386)

web/src/pages/plugins/plugin-documentation-modals.tsx

@@ -1,5 +1,6 @@
 import { Modal, Upload } from "antd";
 import { CloudUpload, FileText, ShieldCheck } from "lucide-react";
+import { useRef, useState } from "react";
 
 import type { RegisteredPlugin } from "@/lib/plugins/plugin-types";
 
@@ -15,6 +16,30 @@ type UploadPluginModalProps = {
 };
 
 export function UploadPluginModal({ open, onClose, onUpload }: UploadPluginModalProps) {
+    const [isDraggingPlugin, setIsDraggingPlugin] = useState(false);
+    const dragDepth = useRef(0);
+
+    const handlePluginDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        dragDepth.current += 1;
+        setIsDraggingPlugin(true);
+    };
+
+    const handlePluginDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setIsDraggingPlugin(false);
+        }
+    };
+
+    const handlePluginDrop = (event: React.DragEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        dragDepth.current = 0;
+        setIsDraggingPlugin(false);
+    };
+
     return (
         <Modal
             className="workspace-modal workspace-modal-wide plugin-upload-modal"
@@ -38,20 +63,28 @@ export function UploadPluginModal({ open, onClose, onUpload }: UploadPluginModal
                             <p>选择统一影策插件包，安装后会立即进入插件中心。</p>
                         </div>
                     </div>
-                    <Upload.Dragger
-                        className="plugin-upload-dropzone"
-                        accept=".yingce-plugin,application/zip"
-                        maxCount={1}
-                        showUploadList={false}
-                        beforeUpload={(file) => {
-                            onUpload(file);
-                            return false;
-                        }}
+                    <div
+                        className={`plugin-upload-dropzone-shell${isDraggingPlugin ? " is-dragging" : ""}`}
+                        onDragEnter={handlePluginDragEnter}
+                        onDragLeave={handlePluginDragLeave}
+                        onDragOver={(event) => event.preventDefault()}
+                        onDrop={handlePluginDrop}
                     >
-                        <CloudUpload className="plugin-upload-dropzone-icon" />
-                        <p className="ant-upload-text">点击选择插件文件</p>
-                        <p className="ant-upload-hint">仅支持 .yingce-plugin 包，大小不超过 16 MiB</p>
-                    </Upload.Dragger>
+                        <Upload.Dragger
+                            className="plugin-upload-dropzone"
+                            accept=".yingce-plugin,application/zip"
+                            maxCount={1}
+                            showUploadList={false}
+                            beforeUpload={(file) => {
+                                onUpload(file);
+                                return false;
+                            }}
+                        >
+                            <CloudUpload className="plugin-upload-dropzone-icon" />
+                            <p className="ant-upload-text">{isDraggingPlugin ? "释放文件以上传插件" : "点击选择插件文件，也可拖拽到此处"}</p>
+                            <p className="ant-upload-hint">支持 .yingce-plugin 包 · 大小不超过 16 MiB</p>
+                        </Upload.Dragger>
+                    </div>
                     <div className="plugin-upload-notice">
                         <ShieldCheck className="size-4" />
                         <span>上传前请确认插件来源可信。Web 入口只能进入声明的隔离运行时，不会获得主页面权限；密钥也不会从清单读取。</span>

web/src/pages/plugins/plugins.css

@@ -542,6 +542,12 @@
     border-color: var(--workspace-accent);
 }
 
+.plugin-upload-dropzone-shell.is-dragging .plugin-upload-dropzone.ant-upload-wrapper .ant-upload-drag {
+    border-color: var(--workspace-accent);
+    background: color-mix(in srgb, var(--workspace-accent) 11%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 24%, transparent);
+}
+
 .plugin-upload-dropzone-icon {
     width: 30px;
     height: 30px;