update username style

components/message-item/audio-message.vue

 <template>
+    <div>
         <div
             class="msg-detail voice-message d-flex align-items-center"
             :class="{ playing: playing, 'can-play': messageRealUrl }"
@@ -20,7 +21,7 @@
                 v-else-if="fileFailed2Load"
                 title="[语音加载失败]"
             ></i>
-
+        </div>
         <text-message v-model="value" v-if="backend" />
     </div>
 </template>
@@ -92,6 +93,9 @@
 <style lang="less" scoped>
     .voice-message {
         width: 200px;
+        background-color: #eee;
+        border-radius: 6px;
+        padding: 8px 10px;
 
         &.can-play {
             cursor: pointer;
@@ -102,12 +106,6 @@
         }
     }
 
-    .inline-text {
-        position: absolute;
-        bottom: 0;
-        left: 40px;
-    }
-
     .my-message {
         .voice-message {
             > div {

components/message.vue

@@ -168,7 +168,7 @@
     import PayMessage from "./message-item/pay-message.vue";
     import NotifyMessage from "./message-item/notify-message.vue";
     import { ChatRole } from "@/customer-service/model";
-    import { getUserMapping } from "../utils/user-info";
+    import { ChatUserInfoService, getUserMapping } from "../utils/user-info";
     import Xim from "@/customer-service/xim";
     import { CustomerServiceEvent, MessageEvent } from "../event";
     import { PayMessageBody } from "../xim/models/chat";
@@ -266,6 +266,8 @@
         private org = "";
         private manualAllRead = false;
         private manualReaded = 0;
+        private refetchUsername = "";
+        private refetchUserIcon = "";
 
         private readerListOffset = false;
         private defaultMessageHandledStatus = dto.MessageHandled.Default;
@@ -344,6 +346,11 @@
                 return true;
             }
 
+            // 系统推送的消息，默认为客服发送
+            if (this.messageBody && +this.messageBody.eid === 0) {
+                return true;
+            }
+
             if (
                 this.backend &&
                 this.messageBody &&
@@ -376,7 +383,10 @@
                     return this.getFilterUsername(t.alias_name || t.name);
                 }
             }
-            return "";
+            if (!this.refetchUsername) {
+                this.refetchUsername4Message();
+            }
+            return this.refetchUsername;
         }
 
         private getFilterUsername(name: string) {
@@ -400,7 +410,7 @@
                 }
             }
 
-            return "";
+            return this.refetchUserIcon;
         }
 
         private get defaultAvatar() {
@@ -576,6 +586,17 @@
         private openMessage(o: any) {
             CustomerServiceEvent.emit(this, o);
         }
+
+        private refetchUsername4Message() {
+            if (this.data && this.data.eid) {
+                ChatUserInfoService.getUserInfo(this.data.eid).then((r) => {
+                    if (r) {
+                        this.refetchUsername = r.alias_name || r.name || r.phone;
+                        r.icon && (this.refetchUserIcon = r.icon);
+                    }
+                });
+            }
+        }
     }
 </script>