合并冲突

components/avatar.vue

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

components/message.vue

@@ -9,11 +9,14 @@
     >
     >
         <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
         <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
             <div
             <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"
                 v-if="!isWithdrawMessage"
             >
             >
                 {{ userName }}
                 {{ userName }}
+                <avatar v-if="avatar" :src="avatar" shape="circle" />
             </div>
             </div>
 
 
             <component
             <component

model/index.ts

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

xim/index.ts

@@ -40,6 +40,12 @@ class Chat {
         option.serviceType && (this.serviceType = option.serviceType);
         option.serviceType && (this.serviceType = option.serviceType);
         option.product && (this.product = option.product);
         option.product && (this.product = option.product);
         this.eventHub = option.eventHub;
         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);
         dbController.setup(this._sdk().global.uid);
 
 
@@ -124,7 +130,7 @@ class Chat {
     }
     }
 
 
     public getUserMapping() {
     public getUserMapping() {
-        return {} as any;
+        return this.userMapping;
     }
     }
 
 
     private debug(message: string) {
     private debug(message: string) {