调整消息机制，调整图片显示机制

components/image-preview.vue

@@ -4,20 +4,20 @@
         :before-close="close"
         :visible="value"
         :show-close="false"
-        custom-class="transparent"
+        custom-class="transparent flex"
         width="90%"
+        top="60px"
     >
         <div class="d-flex flex-column">
             <div class="d-flex justify-content-center align-items-start">
-                <img v-if="file" :src="file.url" />
+                <img v-if="file" :src="file.url" :style="imgStyle" />
                 <i class="el-icon-close" @click="close"></i>
-            </div>
 
-            <div class="d-flex justify-content-center actions">
                 <a
                     class="d-flex align-items-center justify-content-center"
                     :href="file.url"
                     :download="getAttachment"
+                    target="_blank"
                 >
                     <i class="el-icon-download"></i>
                 </a>
@@ -37,6 +37,13 @@
         @Prop()
         private file!: { name: string; url: string };
 
+        private get imgStyle() {
+            return {
+                "max-width": `${document.body.scrollWidth * 0.8}px`,
+                "max-height": `${document.body.scrollHeight * 0.8}px`,
+            };
+        }
+
         private close() {
             this.$emit("update", false);
         }
@@ -70,25 +77,19 @@
         }
     }
 
-    .actions {
-        margin: 15px 0;
+    a {
+        padding: 10px;
+        background-color: #7a7b7d;
+        border-radius: 50%;
+        position: absolute;
+        left: 50%;
+        bottom: -65px;
+        margin-left: -50px;
 
-        a {
-            width: 50px;
-            height: 50px;
-            background-color: #7a7b7d;
+        i {
             color: #fff;
-            border-radius: 50%;
+            font-size: 30px;
             cursor: pointer;
-
-            i {
-                color: #fff;
-                font-size: 30px;
-            }
-
-            & + span {
-                margin-left: 15px;
-            }
         }
     }
 </style>

components/message-item/image-message.vue

@@ -6,8 +6,8 @@
         @click="open"
     >
         <img
-            v-if="messageRealUrl"
-            :src="messageRealUrl"
+            v-if="mini"
+            :src="mini"
             :title="messageBody.msg.name"
             :alt="messageBody.msg.name"
             @error="onImageError"
@@ -22,6 +22,7 @@
     import BaseMessage from "./index";
     import FileIcon from "./file-icon.vue";
     import { UserAgentHelper } from "@/customer-service/third-party/user-agent";
+    import Chat from "@/customer-service/xim/";
 
     @Component({ components: { FileIcon } })
     export default class Index extends BaseMessage {
@@ -31,6 +32,21 @@
             window.navigator.userAgent
         );
 
+        private get mini() {
+            if (this.messageRealUrl) {
+                const sdk = Chat.getSdk();
+                const s = sdk.mediaController.buildThumbnail;
+                if (this.messageRealUrl.startsWith("http")) {
+                    return (
+                        sdk.global.baseUrl +
+                        s(this.messageRealUrl.replace(sdk.global.baseUrl, ""), 300)
+                    );
+                }
+                return s(this.messageRealUrl, 300);
+            }
+            return "";
+        }
+
         private onImageError() {
             this.fileFailed2Load = true;
             this.messageRealUrl = "";