Demo：支持拖拽文件到页面进行导入

web/src/lang/en_us.js

@@ -282,7 +282,8 @@ export default {
     tip: 'Tip',
     yes: 'Yes',
     no: 'No',
-    exportError: 'Export failed'
+    exportError: 'Export failed',
+    dragTip: 'Release here to import the file'
   },
   mouseAction: {
     tip1:

web/src/lang/zh_cn.js

@@ -278,7 +278,8 @@ export default {
     tip: '提示',
     yes: '是',
     no: '否',
-    exportError: '导出失败'
+    exportError: '导出失败',
+    dragTip: '在此释放以导入该文件'
   },
   mouseAction: {
     tip1: '当前：左键拖动画布，右键框选节点',

web/src/pages/Edit/components/Edit.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="editContainer">
+  <div
+    class="editContainer"
+    @dragenter.stop.prevent="onDragenter"
+    @dragleave.stop.prevent
+    @dragover.stop.prevent
+    @drop.stop.prevent
+  >
     <div class="mindMapContainer" ref="mindMapContainer"></div>
     <Count :mindMap="mindMap" v-if="!isZenMode"></Count>
     <Navigator :mindMap="mindMap"></Navigator>
@@ -26,6 +32,15 @@
     <Scrollbar v-if="isShowScrollbar && mindMap" :mindMap="mindMap"></Scrollbar>
     <FormulaSidebar v-if="mindMap" :mindMap="mindMap"></FormulaSidebar>
     <SourceCodeEdit v-if="mindMap" :mindMap="mindMap"></SourceCodeEdit>
+    <div
+      class="dragMask"
+      v-if="showDragMask"
+      @dragleave.stop.prevent="onDragleave"
+      @dragover.stop.prevent
+      @drop.stop.prevent="onDrop"
+    >
+      <div class="dragTip">{{ $t('edit.dragTip') }}</div>
+    </div>
   </div>
 </template>
 
@@ -148,7 +163,8 @@ export default {
       mindMap: null,
       mindMapData: null,
       prevImg: '',
-      storeConfigTimer: null
+      storeConfigTimer: null,
+      showDragMask: false
     }
   },
   computed: {
@@ -779,6 +795,20 @@ export default {
               : ''
         })
       }
+    },
+
+    // 拖拽文件到页面导入
+    onDragenter() {
+      this.showDragMask = true
+    },
+    onDragleave() {
+      this.showDragMask = false
+    },
+    onDrop(e) {
+      this.showDragMask = false
+      const dt = e.dataTransfer
+      const file = dt.files && dt.files[0]
+      this.$bus.$emit('importFile', file)
     }
   }
 }
@@ -792,6 +822,24 @@ export default {
   top: 0;
   bottom: 0;
 
+  .dragMask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3999;
+
+    .dragTip {
+      pointer-events: none;
+      font-weight: bold;
+    }
+  }
+
   .mindMapContainer {
     position: absolute;
     left: 0px;

web/src/pages/Edit/components/Import.vue

@@ -63,10 +63,12 @@ export default {
   created() {
     this.$bus.$on('showImport', this.handleShowImport)
     this.$bus.$on('handle_file_url', this.handleFileURL)
+    this.$bus.$on('importFile', this.handleImportFile)
   },
   beforeDestroy() {
     this.$bus.$off('showImport', this.handleShowImport)
     this.$bus.$off('handle_file_url', this.handleFileURL)
+    this.$bus.$off('importFile', this.handleImportFile)
   },
   methods: {
     ...mapMutations(['setActiveSidebar']),
@@ -286,6 +288,16 @@ export default {
           this.$message.error(this.$t('import.fileParsingFailed'))
         }
       }
+    },
+
+    // 导入指定文件
+    handleImportFile(file) {
+      this.onChange({
+        raw: file,
+        name: file.name
+      })
+      if (this.fileList.length <= 0) return
+      this.confirm()
     }
   }
 }