style

components/message-item/file-message.vue

@@ -65,14 +65,14 @@
 
     @Component({ components: { FileIcon } })
     export default class Index extends BaseMessage {
-        private get getAttachment() {
+        protected get getAttachment() {
             if (this.messageBody) {
                 return this.messageBody.msg.name;
             }
             return "文件下载";
         }
 
-        private get fileIcon() {
+        protected get fileIcon() {
             if (this.value) {
                 return getFileType(this.messageBody.msg.name);
             }
@@ -80,7 +80,7 @@
             return FileType.Others;
         }
 
-        private format(v: number) {
+        protected format(v: number) {
             return formatSize(v);
         }
 
@@ -97,6 +97,7 @@
         border: 1px solid #c5d4e5;
         .file-message-name {
             max-width: 130px;
+            word-break: break-all;
         }
     }
 </style>

components/message-item/image-message.vue

@@ -2,7 +2,8 @@
     <div
         class="msg-detail image-message"
         :class="{ 'image-404': fileFailed2Load }"
-        @dblclick="openFile"
+        @dblclick="dbClick"
+        @click="open"
     >
         <img
             v-if="messageRealUrl"
@@ -20,11 +21,16 @@
     import { FileType } from "./file-controller";
     import BaseMessage from "./index";
     import FileIcon from "./file-icon.vue";
+    import { UserAgentHelper } from "@/customer-service/third-party/user-agent";
 
     @Component({ components: { FileIcon } })
     export default class Index extends BaseMessage {
         private readonly image404 = FileType.Image_404;
 
+        private readonly mobile = UserAgentHelper.isMobile(
+            window.navigator.userAgent
+        );
+
         private onImageError() {
             this.fileFailed2Load = true;
             this.messageRealUrl = "";
@@ -33,6 +39,14 @@
         mounted() {
             this.buildMessageUrl();
         }
+
+        private dbClick() {
+            !this.mobile && this.openFile();
+        }
+
+        private open() {
+            this.mobile && this.openFile();
+        }
     }
 </script>