feat: enhance drag-and-drop functionality and update styles for better user experience

public/assets/styles/default.css

@@ -144,7 +144,7 @@ a {
   background-color: rgba(75, 75, 75, 0.035);
 }
 .drag-background {
-  background: hsla(0, 0%, 0%, 0.3);
+  background: hsla(0, 0%, 0%, 0.4);
 }
 
 .action-dialog-container,

src/pages/manager/component.tsx

@@ -22,6 +22,8 @@ import { Tooltip } from "react-tooltip";
 import { ConfigService } from "../../assets/lib/kookit-extra-browser.min";
 import SortShelfDialog from "../../components/dialogs/sortShelfDialog";
 import PopupNote from "../../components/popups/popupNote";
+import toast from "react-hot-toast";
+import { supportedFormats } from "../../utils/common";
 class Manager extends React.Component<ManagerProps, ManagerState> {
   timer!: NodeJS.Timeout;
   constructor(props: ManagerProps) {
@@ -92,9 +94,6 @@ class Manager extends React.Component<ManagerProps, ManagerState> {
         className="manager"
         onDragEnter={() => {
           !this.props.dragItem && this.handleDrag(true);
-          (
-            document.getElementsByClassName("import-from-local")[0] as any
-          ).style.zIndex = "50";
         }}
       >
         <Tooltip id="my-tooltip" style={{ zIndex: 25 }} />
@@ -112,7 +111,28 @@ class Manager extends React.Component<ManagerProps, ManagerState> {
 
         {!this.props.dragItem && (
           <div
-            className="drag-background"
+            className={`drag-background${this.state.isDrag ? " drag-active" : ""}`}
+            onDragOver={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            onDrop={async (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              this.handleDrag(false);
+              const files = e.dataTransfer.files;
+              if (files && files.length > 0) {
+                for (let i = 0; i < files.length; i++) {
+                  const file = files[i];
+                  const ext = "." + file.name.split(".").pop()?.toLowerCase();
+                  if (!supportedFormats.includes(ext)) {
+                    toast.error("Unsupported file format: " + ext);
+                    continue;
+                  }
+                  await this.props.importBookFunc(file);
+                }
+              }
+            }}
             onClick={() => {
               this.props.handleEditDialog(false);
               this.props.handleDeleteDialog(false);
@@ -154,7 +174,6 @@ class Manager extends React.Component<ManagerProps, ManagerState> {
           >
             {this.state.isDrag && (
               <div className="drag-info">
-                <Arrow />
                 <p className="arrow-text">
                   <Trans>Drop your books here</Trans>
                 </p>

src/pages/manager/index.tsx

@@ -33,6 +33,7 @@ const mapStateToProps = (state: stateType) => {
     books: state.manager.books,
     mode: state.sidebar.mode,
     dragItem: state.book.dragItem,
+    importBookFunc: state.book.importBookFunc,
     shelfTitle: state.sidebar.shelfTitle,
     isOpenEditDialog: state.book.isOpenEditDialog,
     isDetailDialog: state.manager.isDetailDialog,

src/pages/manager/interface.tsx

@@ -21,6 +21,7 @@ export interface ManagerProps extends RouteComponentProps<any> {
   isOpenSortShelfDialog: boolean;
   isOpenLocalFileDialog: boolean;
   dragItem: string;
+  importBookFunc: (file: any) => Promise<void>;
   handleFetchBooks: () => void;
   handleFetchPlugins: () => void;
   handleFetchNotes: () => void;

src/pages/manager/manager.css

@@ -3,7 +3,11 @@
   height: 100%;
 }
 .arrow-text {
-  font-size: 20px;
+  font-size: 26px;
+  color: rgba(255, 255, 255, 0.95);
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.4;
 }
 
 .auth-page-close-icon {
@@ -24,21 +28,18 @@
   left: 0px;
   z-index: 9;
 }
-@keyframes fade-in-out {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .drag-info {
-  width: 200px;
-  height: 300px;
   position: absolute;
-  top: 80px;
-  right: 0px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 360px;
+  padding: 48px 36px;
   text-align: center;
+  border: 3px dashed rgba(255, 255, 255, 0.7);
+  border-radius: 20px;
+  background-color: rgba(255, 255, 255, 0.12);
+  pointer-events: none;
 }
 .waring-title {
   text-align: center;