perf: 优化发送文件预览

app/Module/Base.php

@@ -2473,13 +2473,18 @@ class Base
      */
     public static function extIcon($ext)
     {
-        return match ($ext) {
-            "docx" => 'images/ext/doc.png',
-            "xlsx" => 'images/ext/xls.png',
-            "pptx" => 'images/ext/ppt.png',
-            "ai", "avi", "bmp", "cdr", "doc", "eps", "gif", "mov", "mp3", "mp4", "pdf", "ppt", "pr", "psd", "rar", "svg", "tif", "txt", "xls", "zip" => 'images/ext/' . $ext . '.png',
-            default => 'images/ext/file.png',
-        };
+        if ($ext == "docx") {
+            $ext = 'doc';
+        } elseif ($ext == "xlsx") {
+            $ext = 'xls';
+        } elseif ($ext == "pptx") {
+            $ext = 'ppt';
+        }
+        if (in_array($ext, ["ai", "avi", "bmp", "cdr", "doc", "eps", "gif", "mov", "mp3", "mp4", "pdf", "ppt", "pr", "psd", "rar", "svg", "tif", "txt", "xls", "zip"])) {
+            return 'images/ext/' . $ext . '.png';
+        } else {
+            return 'images/ext/file.png';
+        }
     }
 
     /**

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

@@ -9,6 +9,7 @@
         :format="uploadFormat"
         :show-upload-list="false"
         :max-size="maxSize"
+        :before-upload="handleBeforeUpload"
         :on-progress="handleProgress"
         :on-success="handleSuccess"
         :on-format-error="handleFormatError"
@@ -34,6 +35,7 @@ export default {
 
     data() {
         return {
+            fileMsgCaches: {},  // 文件信息缓存
             uploadFormat: [],   // 不限制上传文件类型
             actionUrl: $A.apiUrl('dialog/msg/sendfile'),
         }
@@ -62,6 +64,67 @@ export default {
     },
 
     methods: {
+        fileMsgName(file) {
+            return `${file.name}::${file.size}`
+        },
+
+        fileMsgData(file, data = undefined) {
+            const cacheName = this.fileMsgName(file)
+            if ($A.isJson(data)) {
+                this.fileMsgCaches[cacheName] = Object.assign(this.fileMsgCaches[cacheName] || {}, data)
+                return
+            }
+            data = {
+                type: 'file',
+                thumb: null,
+                width: -1,
+                height: -1,
+                name: file.name,
+                size: file.size,
+                ext: file.name.split('.').pop(),
+            }
+            let {ext} = data
+            if (ext === 'docx') {
+                ext = 'doc'
+            } else if (ext === 'xlsx') {
+                ext = 'xls'
+            } else if (ext === 'pptx') {
+                ext = 'ppt'
+            }
+            if (["ai", "avi", "bmp", "cdr", "doc", "eps", "gif", "mov", "mp3", "mp4", "pdf", "ppt", "pr", "psd", "rar", "svg", "tif", "txt", "xls", "zip"].includes(ext)) {
+                data.thumb = $A.apiUrl(`../images/ext/${ext}.png`)
+            } else {
+                data.thumb = $A.apiUrl(`../images/ext/file.png`)
+            }
+            this.fileMsgCaches[cacheName] = data
+        },
+
+        handleBeforeUpload(file) {
+            //上传前
+            return new Promise((resolve) => {
+                this.fileMsgData(file)
+                if (/\.(jpe?g|webp|png|gif)$/i.test(file.name)) {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(file);
+                    reader.onload = ({target}) => {
+                        const image = new Image();
+                        image.onload = () => {
+                            this.fileMsgData(file, {
+                                type: 'img',
+                                thumb: target.result,
+                                width: image.width,
+                                height: image.height,
+                            })
+                            resolve();
+                        };
+                        image.src = target.result;
+                    }
+                    return
+                }
+                resolve();
+            });
+        },
+
         handleProgress(event, file) {
             //上传时
             if (file.tempId === undefined) {
@@ -70,6 +133,13 @@ export default {
                 } else {
                     file.tempId = $A.randNum(1000000000, 9999999999)
                 }
+                //
+                file.msg = {}
+                const msgName = this.fileMsgName(file)
+                if (this.fileMsgCaches[msgName]) {
+                    file.msg = this.fileMsgCaches[msgName]
+                    delete this.fileMsgCaches[msgName]
+                }
                 this.$emit('on-progress', file)
             }
         },

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

@@ -536,6 +536,9 @@ export default {
             if (this.operateVisible) {
                 return
             }
+            if (!this.msgData.created_at) {
+                return;
+            }
             this.$store.dispatch("audioPlay", this.msgData.msg.path)
         },
 
@@ -571,10 +574,16 @@ export default {
         },
 
         viewFile() {
+            if (!this.msgData.created_at) {
+                return;
+            }
             this.$emit("on-view-file", this.msgData)
         },
 
         downFile() {
+            if (!this.msgData.created_at) {
+                return;
+            }
             this.$emit("on-down-file", this.msgData)
         },
 

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

@@ -1524,7 +1524,7 @@ export default {
                 dialog_id: this.dialogData.id,
                 reply_id: this.quoteId,
                 reply_data: this.quoteData,
-                type: 'loading',
+                type: 'record',
                 userid: this.userId,
                 msg,
             }
@@ -1987,9 +1987,9 @@ export default {
                         id: file.tempId,
                         dialog_id: this.dialogData.id,
                         reply_id: this.quoteId,
-                        type: 'loading',
+                        type: 'file',
                         userid: this.userId,
-                        msg: { },
+                        msg: file.msg || {},
                     }
                     this.tempMsgs.push(tempMsg)
                     this.msgType = ''