perf: 优化md消息图片预览

resources/assets/js/functions/web.js

@@ -748,6 +748,8 @@
                             .replace(widthReg, `original-width="${width}" width="${scale.width}"`)
                             .replace(heightReg, `original-height="${height}" height="${scale.height}"`)
                         text = text.replace(res, value)
+                    } else {
+                        text = text.replace(res, `<div class="no-size-image-box">${res}</div>`);
                     }
                 })
             }

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

@@ -199,8 +199,8 @@ export default {
             this.dispatch("on-view-reply", data)
         },
 
-        onViewText(el) {
+        onViewText(e, el) {
-            this.dispatch("on-view-text", el)
+            this.dispatch("on-view-text", e, el)
         },
 
         onViewFile(data) {
@@ -227,9 +227,9 @@ export default {
             this.dispatch("on-show-emoji-user", data)
         },
 
-        dispatch(event, arg) {
+        dispatch(event, ...arg) {
             if (this.isReply) {
-                this.$emit(event, arg)
+                this.$emit(event, ...arg)
                 return
             }
 
@@ -244,7 +244,7 @@ export default {
             }
 
             if (parent) {
-                parent.$emit(event, arg)
+                parent.$emit(event, ...arg)
             }
         }
     }

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="markdown-body" v-html="html"></div>
+    <div @click="onCLick" class="markdown-body" v-html="html"></div>
 </template>
 
 <script>
@@ -33,7 +33,6 @@ export default {
 
     computed: {
         html() {
-            const {text} = this
             if (this.mdi === null) {
                 const {highlightBlock} = this
                 this.mdi = new MarkdownIt({
@@ -50,7 +49,7 @@ export default {
                 this.mdi.use(mila, {attrs: {target: '_blank', rel: 'noopener'}})
                 this.mdi.use(mdKatex, {blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000'})
             }
-            return this.mdi.render(text)
+            return this.formatMsg(this.mdi.render(this.text))
         }
     },
 
@@ -59,6 +58,16 @@ export default {
             return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${this.$L('复制代码')}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
         },
 
+        formatMsg(text) {
+            const array = text.match(/<img\s+[^>]*?>/g);
+            if (array) {
+                array.some(res => {
+                    text = text.replace(res, `<div class="no-size-image-box">${res}</div>`);
+                })
+            }
+            return text
+        },
+
         copyCodeBlock() {
             const codeBlockWrapper = this.$el.querySelectorAll('.code-block-wrapper')
             codeBlockWrapper.forEach((wrapper) => {
@@ -93,6 +102,10 @@ export default {
             if (document.execCommand('copy'))
                 document.execCommand('copy')
             document.body.removeChild(input)
+        },
+
+        onCLick(e) {
+            this.$emit('click', e)
         }
     }
 }

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

@@ -15,7 +15,7 @@
                 <div class="reply-desc">{{$A.getMsgSimpleDesc(msgData.reply_data)}}</div>
             </div>
             <!--详情-->
-            <div class="dialog-content" :class="contentClass">
+            <div ref="content" class="dialog-content" :class="contentClass">
                 <!--文本-->
                 <div v-if="msgData.type === 'text'" class="content-text no-dark-content">
                     <DialogMarkdown v-if="msgData.msg.type === 'md'" @click="viewText" :text="msgData.msg.text"/>
@@ -452,8 +452,8 @@ export default {
             })
         },
 
-        viewText(el) {
+        viewText(e) {
-            this.$emit("on-view-text", el)
+            this.$emit("on-view-text", e, this.$refs.content)
         },
 
         viewFile() {

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

@@ -2354,7 +2354,7 @@ export default {
             this.onPositionId(data.reply_id, data.msg_id)
         },
 
-        onViewText({target}) {
+        onViewText({target}, el) {
             if (this.operateVisible) {
                 return
             }
@@ -2363,7 +2363,9 @@ export default {
                     if (target.classList.contains('browse')) {
                         this.onViewPicture(target.currentSrc);
                     } else {
-                        this.$store.dispatch("previewImage", {index:0, list: $A.getTextImagesInfo(target.outerHTML)})
+                        const list = $A.getTextImagesInfo(el.outerHTML)
+                        const index = list.findIndex(item => item.src == target.currentSrc)
+                        this.$store.dispatch("previewImage", {index, list})
                     }
                     break;
 

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

@@ -589,6 +589,11 @@
                             padding: 2px;
                             max-width: 100%;
 
+                            .no-size-image-box {
+                                display: inline-block;
+                                max-width: 220px;
+                            }
+
                             > pre {
                                 display: block;
                                 margin: 0;