icon

components/avatar.vue

 <template>
-    <el-avatar class="tm-avatar" :src="hasAvatar ? src : ''" :size="size" :shape="shape" :alt="alt" :fit="fit">
-        <img class="tm-load-img" v-if="src" :src="src" @load="hasAvatar = true" />
+    <el-avatar
+        class="tm-avatar"
+        :src="hasAvatar ? src : ''"
+        :size="size"
+        :shape="shape"
+        :alt="alt"
+        :fit="fit"
+    >
+        <img
+            class="tm-load-img"
+            v-if="src"
+            :src="src"
+            @load="hasAvatar = true"
+        />
         <slot>
             <img src="../imgs/default-avatar.png" :style="`width:${size}px`" />
         </slot>
@@ -8,60 +20,62 @@
 </template>
 
 <script lang="ts">
-    import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 
-    @Component
-    export default class Avatar extends Vue {
-        @Prop({
-            type: String,
-        })
-        private readonly src?: string;
+@Component
+export default class Avatar extends Vue {
+    @Prop()
+    private readonly src?: string;
 
-        @Prop({
-            type: [String, Number],
-            default: 30,
-            validator: value => ["large", "medium", "small"].indexOf(value) >= 0 || typeof value === "number",
-        })
-        private readonly size!: number | "large" | "medium" | "small";
+    @Prop({
+        type: [String, Number],
+        default: 30,
+        validator: (value) =>
+            ["large", "medium", "small"].indexOf(value) >= 0 ||
+            typeof value === "number",
+    })
+    private readonly size!: number | "large" | "medium" | "small";
 
-        @Prop({
-            type: String,
-            default: "square",
-            validator: value => ["circle", "square"].indexOf(value) >= 0,
-        })
-        private readonly shape!: "circle" | "square";
+    @Prop({
+        type: String,
+        default: "square",
+        validator: (value) => ["circle", "square"].indexOf(value) >= 0,
+    })
+    private readonly shape!: "circle" | "square";
 
-        @Prop(String)
-        private readonly alt?: string;
+    @Prop(String)
+    private readonly alt?: string;
 
-        @Prop({
-            type: String,
-            default: "cover",
-            validator: value => ["fill", "contain", "cover", "none", "scale-down"].indexOf(value) >= 0,
-        })
-        private readonly fit!: "fill" | "contain" | "cover" | "none" | "scale-down";
+    @Prop({
+        type: String,
+        default: "cover",
+        validator: (value) =>
+            ["fill", "contain", "cover", "none", "scale-down"].indexOf(value) >=
+            0,
+    })
+    private readonly fit!: "fill" | "contain" | "cover" | "none" | "scale-down";
 
-        private hasAvatar = false;
-    }
+    private hasAvatar = false;
+}
 </script>
 
 <style lang="less" scoped>
-    .tm-avatar {
-        background: none;
-        flex-shrink: 0;
-        flex-grow: 0;
-    }
-    .tm-avatar .tm-svg-icon {
-        background: #d8d8d8;
-    }
-    .tm-avatar .tm-load-img {
-        display: none;
-    }
-    .tm-avatar /deep/img {
-        width: 100%;
-    }
-    .default-avatar {
-        display: inline-block;
-        color: #333;
-    }
+.tm-avatar {
+    background: none;
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+.tm-avatar .tm-svg-icon {
+    background: #d8d8d8;
+}
+.tm-avatar .tm-load-img {
+    display: none;
+}
+.tm-avatar /deep/img {
+    width: 100%;
+}
+.default-avatar {
+    display: inline-block;
+    color: #333;
+}
 </style>

components/message.vue

@@ -9,11 +9,14 @@
     >
         <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
             <div
-                class="msg-name no-selection"
-                :class="{ 'algin-left': !isMyMessage }"
+                class="msg-name no-selection d-flex align-items-center"
+                :class="{
+                    'flex-row-reverse justify-content-end': !isMyMessage,
+                }"
                 v-if="!isWithdrawMessage"
             >
                 {{ userName }}
+                <avatar v-if="avatar" :src="avatar" shape="circle" />
             </div>
 
             <component
@@ -376,13 +379,7 @@ export default class Message extends Mixins(Filters) {
     position: relative;
 
     &.my-message {
-        .msg-avatar {
-            margin-right: 0;
-            margin-left: 10px;
-        }
-
         .msg-detail {
-            margin-top: 0;
             background-color: #dbf2ff;
             border-radius: 8px 0 8px 8px;
 
@@ -459,34 +456,22 @@ export default class Message extends Mixins(Filters) {
     }
 }
 
-.msg-avatar {
-    margin-right: 10px;
-    flex: 40px 0 0;
-}
-
-i.msg-avatar {
-    font-size: 30px;
-    background-color: #c0c4cc;
-    border-radius: 4px;
-    width: 40px;
-    height: 40px;
-
-    &:before {
-        position: relative;
-        left: 5px;
-        top: 5px;
-        color: #fff;
-    }
-}
-
 .msg-name {
     font-size: 14px;
     color: #888;
     text-align: right;
     margin-bottom: 3px;
     min-height: 16px;
-    &.algin-left {
-        text-align: left;
+
+    .el-avatar {
+        margin-left: 10px;
+    }
+
+    &.flex-row-reverse {
+        .el-avatar {
+            margin-left: 0;
+            margin-right: 10px;
+        }
     }
 }
 

model/index.ts

@@ -64,6 +64,11 @@ export interface ChatOption {
     serviceType?: ServiceType;
 
     eventHub?: Vue;
+
+    /**
+     * 用户信息(头像，别名)可选
+     */
+    user?: { icon?: string; username?: string };
 }
 
 export interface ChatServiceLogger {

xim/index.ts

@@ -40,6 +40,12 @@ class Chat {
         option.serviceType && (this.serviceType = option.serviceType);
         option.product && (this.product = option.product);
         this.eventHub = option.eventHub;
+        if (option.user) {
+            this.userMapping[this._sdk().global.uid] = {
+                name: option.user.username,
+                avatar: option.user.icon,
+            };
+        }
 
         dbController.setup(this._sdk().global.uid);
 
@@ -124,7 +130,7 @@ class Chat {
     }
 
     public getUserMapping() {
-        return {} as any;
+        return this.userMapping;
     }
 
     private debug(message: string) {