feat: 聊天粘贴发送文件、图片时预览确认

electron/package.json

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

package.json

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

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -89,6 +89,20 @@
         <div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
             <div class="drag-text">{{$L('拖动到这里发送')}}</div>
         </div>
+
+        <Modal
+            v-model="pasteShow"
+            :title="$L(pasteTitle)"
+            :cancel-text="$L('取消')"
+            :ok-text="$L('发送')"
+            @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>
 
@@ -125,6 +139,10 @@ export default {
             tempMsgs: [],
 
             dialogMsgSubscribe: null,
+
+            pasteShow: false,
+            pasteFile: [],
+            pasteItem: [],
         }
     },
 
@@ -180,6 +198,18 @@ export default {
 
         peopleNum() {
             return this.dialogData.type === 'group' ? $A.runNum(this.dialogData.people) : 0;
+        },
+
+        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 '发送文件'
         }
     },
 
@@ -267,12 +297,31 @@ export default {
             const postFiles = Array.prototype.slice.call(files);
             if (postFiles.length > 0) {
                 e.preventDefault();
-                postFiles.forEach((file) => {
-                    this.$refs.chatUpload.upload(file);
+                this.pasteFile = [];
+                this.pasteItem = [];
+                postFiles.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
+                    }
                 });
             }
         },
 
+        pasteSend() {
+            this.pasteFile.some(file => {
+                this.$refs.chatUpload.upload(file)
+            });
+        },
+
         chatDragOver(show, e) {
             let random = (this.__dialogDrag = $A.randomString(8));
             if (!show) {

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -441,6 +441,13 @@
     }
 }
 
+.dialog-wrapper-paste {
+    img {
+        max-width: 100%;
+        max-height: 1000px;
+    }
+}
+
 @media (max-width: 768px) {
     .dialog-wrapper {
         .dialog-footer {