有头像时样式

components/message.vue

@@ -9,26 +9,34 @@
     >
         <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
             <div
-                class="msg-name no-selection d-flex align-items-center"
-                :class="{
-                    'flex-row-reverse justify-content-end': !isMyMessage,
-                }"
+                class="msg-name no-selection"
+                :class="{ 'algin-left': !isMyMessage }"
                 v-if="!isWithdrawMessage"
             >
                 {{ userName }}
+            </div>
+            <div
+                class="content-avatar d-flex align-items-start"
+                :class="{ 'justify-content-end': isMyMessage }"
+            >
+                <img
+                    src="@/assets/default-host-avatar.svg"
+                    style="width: 42px"
+                    v-if="!avatar && messageComponent && showHostAvatar"
+                    class="host-avatar"
+                />
+                <component
+                    :is="messageComponent"
+                    :user-name="userName"
+                    :class="{
+                        'my-message': isMyMessage,
+                    }"
+                    v-if="messageComponent"
+                    v-model="data"
+                    @open="openFile"
+                />
                 <avatar v-if="avatar" :src="avatar" shape="circle" />
             </div>
-
-            <component
-                :is="messageComponent"
-                :user-name="userName"
-                :class="{
-                    'my-message': isMyMessage,
-                }"
-                v-if="messageComponent"
-                v-model="data"
-                @open="openFile"
-            />
         </div>
 
         <i
@@ -195,6 +203,7 @@
 
         private readerListOffset = false;
         private defaultMessageHandledStatus = dto.MessageHandled.Default;
+        private showHostAvatar: boolean = false;
 
         private get canWithdraw() {
             if (this.backend && this.data) {
@@ -261,6 +270,11 @@
 
             if (this.isSendingMessage) {
                 if (avatar && this.chatMyId) {
+                    if (Object.getOwnPropertyNames(avatar).length > 0) {
+                        this.showHostAvatar = true;
+                    } else {
+                        this.showHostAvatar = false;
+                    }
                     const user = avatar[this.chatMyId];
                     if (user && user.avatar) {
                         return user.avatar;
@@ -269,6 +283,11 @@
             }
 
             if (avatar && this.data) {
+                if (Object.getOwnPropertyNames(avatar).length > 0) {
+                    this.showHostAvatar = true;
+                } else {
+                    this.showHostAvatar = false;
+                }
                 const value = avatar[this.data.eid];
                 if (value && value.avatar) {
                     return value.avatar;
@@ -430,24 +449,16 @@
         }
     }
 
-.msg-name {
-    font-size: 14px;
-    color: #888;
-    text-align: right;
-    margin-bottom: 3px;
-    min-height: 16px;
-
-    .el-avatar {
-        margin-left: 10px;
-    }
-
-    &.flex-row-reverse {
-        .el-avatar {
-            margin-left: 0;
-            margin-right: 10px;
+    .msg-name {
+        font-size: 14px;
+        color: #888;
+        text-align: right;
+        margin-bottom: 3px;
+        min-height: 16px;
+        &.algin-left {
+            text-align: left;
         }
     }
-}
 
     .msg-content {
         text-align: right;