feat: 文件支持拖动到列表上传

electron/package.json

@@ -1,6 +1,6 @@
 {
     "name": "DooTask",
-    "version": "0.9.70",
+    "version": "0.9.73",
     "description": "DooTask is task management system.",
     "main": "electron.js",
     "license": "MIT",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "DooTask",
-    "version": "0.9.70",
+    "version": "0.9.73",
     "description": "DooTask is task management system.",
     "scripts": {
         "start": "./cmd dev",

resources/assets/js/pages/manage/file.vue

@@ -57,6 +57,11 @@
                 </div>
             </div>
 
+            <div
+                class="file-drag"
+                @drop.prevent="filePasteDrag($event, 'drag')"
+                @dragover.prevent="fileDragOver(true, $event)"
+                @dragleave.prevent="fileDragOver(false, $event)">
                 <div v-if="tableMode" class="file-table" @contextmenu.prevent="handleRightClick">
                     <Table
                         :columns="columns"
@@ -124,6 +129,10 @@
                         </ul>
                     </div>
                 </template>
+                <div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
+                    <div class="drag-text">{{$L('拖动到这里发送')}}</div>
+                </div>
+            </div>
 
             <div class="file-menu" :style="contextMenuStyles">
                 <Dropdown
@@ -323,6 +332,21 @@
             <FileContent v-else v-model="fileShow" :file="fileInfo"/>
         </DrawerOverlay>
 
+        <!--拖动上传提示-->
+        <Modal
+            v-model="pasteShow"
+            :title="$L(pasteTitle)"
+            :cancel-text="$L('取消')"
+            :ok-text="$L('发送')"
+            :enter-ok="true"
+            @on-ok="pasteSend">
+            <div class="dialog-wrapper-paste">
+                <template v-for="item in pasteItem">
+                    <img v-if="item.type == 'image'" :src="item.result"/>
+                    <div v-else>{{$L('文件')}}: {{item.name}} ({{$A.bytesToSize(item.size)}})</div>
+                </template>
+            </div>
+        </Modal>
     </div>
 </template>
 
@@ -457,6 +481,11 @@ export default {
 
             shearIds: [],
             selectIds: [],
+
+            dialogDrag: false,
+            pasteShow: false,
+            pasteFile: [],
+            pasteItem: [],
         }
     },
 
@@ -537,6 +566,18 @@ export default {
             const {navigator} = this;
             return !!navigator.find(({share}) => share);
         },
+
+        pasteTitle() {
+            const {pasteItem} = this;
+            let hasImage = pasteItem.find(({type}) => type == 'image')
+            let hasFile = pasteItem.find(({type}) => type != 'image')
+            if (hasImage && hasFile) {
+                return '上传文件/图片'
+            } else if (hasImage) {
+                return '上传图片'
+            }
+            return '上传文件'
+        }
     },
 
     watch: {
@@ -1281,6 +1322,61 @@ export default {
             this.selectIds = [];
         },
 
+        /********************拖动上传部分************************/
+
+        pasteDragNext(e, type) {
+            let files = type === 'drag' ? e.dataTransfer.files : e.clipboardData.files;
+            files = Array.prototype.slice.call(files);
+            if (files.length > 0) {
+                e.preventDefault();
+                if (files.length > 0) {
+                    this.pasteFile = [];
+                    this.pasteItem = [];
+                    files.some(file => {
+                        let reader = new FileReader();
+                        reader.readAsDataURL(file);
+                        reader.onload = ({target}) => {
+                            this.pasteFile.push(file)
+                            this.pasteItem.push({
+                                type: $A.getMiddle(file.type, null, '/'),
+                                name: file.name,
+                                size: file.size,
+                                result: target.result
+                            })
+                            this.pasteShow = true
+                        }
+                    });
+                }
+            }
+        },
+
+        filePasteDrag(e, type) {
+            this.dialogDrag = false;
+            this.pasteDragNext(e, type);
+        },
+
+        fileDragOver(show, e) {
+            let random = (this.__dialogDrag = $A.randomString(8));
+            if (!show) {
+                setTimeout(() => {
+                    if (random === this.__dialogDrag) {
+                        this.dialogDrag = show;
+                    }
+                }, 150);
+            } else {
+                if (e.dataTransfer.effectAllowed === 'move') {
+                    return;
+                }
+                this.dialogDrag = true;
+            }
+        },
+
+        pasteSend() {
+            this.pasteFile.some(file => {
+                this.$refs.fileUpload.upload(file)
+            });
+        },
+
         /********************文件上传部分************************/
 
         uploadUpdate(fileList) {

resources/assets/sass/pages/page-file.scss

@@ -90,24 +90,6 @@
                 }
             }
         }
-        .file-no {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            margin-bottom: 5%;
-            opacity: 0.8;
-            > i {
-                font-size: 64px;
-            }
-            > p {
-                margin-top: 18px;
-                font-size: 14px;
-                font-weight: 500;
-                line-height: 1;
-            }
-        }
         .file-navigator {
             display: flex;
             align-items: center;
@@ -254,6 +236,30 @@
                 }
             }
         }
+        .file-drag {
+            flex: 1;
+            height: 0;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            .file-no {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                margin-bottom: 5%;
+                opacity: 0.8;
+                > i {
+                    font-size: 64px;
+                }
+                > p {
+                    margin-top: 18px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 1;
+                }
+            }
             .file-table {
                 flex: 1;
                 cursor: default;
@@ -443,6 +449,35 @@
                     }
                 }
             }
+            .drag-over {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 3;
+                background-color: rgba(255, 255, 255, 0.78);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: 16px 32px 32px;
+                &:before {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    border: 2px dashed #7b7b7b;
+                    border-radius: 12px;
+                }
+                .drag-text {
+                    padding: 12px;
+                    font-size: 18px;
+                    color: #666666;
+                }
+            }
+        }
         .file-menu {
             position: absolute;
         }
@@ -620,9 +655,11 @@
             .file-navigator {
                 margin: 0 24px 0;
             }
+            .file-drag {
                 .file-table {
                     margin: 16px 24px 24px;
                 }
             }
         }
+    }
 }