update username style

components/message-item/audio-message.vue

 <template>
-    <div
-        class="msg-detail voice-message d-flex align-items-center"
-        :class="{ playing: playing, 'can-play': messageRealUrl }"
-        @click.stop="play"
-        :style="{ width: getVoiceMessageWidth + 'px' }"
-    >
-        <div class="d-flex align-items-center" v-if="messageRealUrl">
-            <voice-icon :loading="playing"></voice-icon>
-            <audio ref="audio" @play="onPlay" @pause="onPause">
-                <source type="audio/aac" :src="messageRealUrl" />
-            </audio>
-            <span v-if="duration" class="duration text-nowrap text-hint"
-                >{{ durationInSecond }}s</span
-            >
+    <div>
+        <div
+            class="msg-detail voice-message d-flex align-items-center"
+            :class="{ playing: playing, 'can-play': messageRealUrl }"
+            @click.stop="play"
+            :style="{ width: getVoiceMessageWidth + 'px' }"
+        >
+            <div class="d-flex align-items-center" v-if="messageRealUrl">
+                <voice-icon :loading="playing"></voice-icon>
+                <audio ref="audio" @play="onPlay" @pause="onPause">
+                    <source type="audio/aac" :src="messageRealUrl" />
+                </audio>
+                <span v-if="duration" class="duration text-nowrap text-hint"
+                    >{{ durationInSecond }}s</span
+                >
+            </div>
+
+            <i
+                class="el-icon-warning-outline"
+                v-else-if="fileFailed2Load"
+                title="[语音加载失败]"
+            ></i>
         </div>
-
-        <i
-            class="el-icon-warning-outline"
-            v-else-if="fileFailed2Load"
-            title="[语音加载失败]"
-        ></i>
-
         <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>