1.换行输入添加；2.会话列表添加消息发送者姓名显示

components/chat-list-model.vue

@@ -29,7 +29,7 @@
                                 </div>
                             </div>
                             <div class="chat-msg text-dot-dot-dot">
-                                {{ parseMesage(item) }}
+                                {{userNames[item.last_msg_sender] ? userNames[item.last_msg_sender] + ": " : ""}}{{ parseMesage(item) }}
                             </div>
                         </div>
                     </div>
@@ -105,6 +105,12 @@ export default class ModelChatList extends Vue {
     @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
     private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT;
 
+    @chatStore.State(ChatStore.STATE_CHAT_USERNAME)
+    private readonly userNames!: ChatStore.STATE_CHAT_USERNAME;
+
+    @chatStore.Mutation(ChatStore.MUTATION_SAVE_USERNAME)
+    private readonly updateUserName!: ChatStore.MUTATION_SAVE_USERNAME;
+
     @Prop({ type: Number, default: -1 })
     private selected!: number;
 
@@ -155,6 +161,7 @@ export default class ModelChatList extends Vue {
                     obj_id: it.ObjId.value,
                     detail_name: "",
                 },
+                last_msg_sender: it.LastSpeakUid.value,
                 last_msg_content: it.LastMsgContent.value,
                 last_msg_ts: it.LastMsgTime.value,
                 last_msg_type: it.LastMsgType.value,
@@ -226,7 +233,15 @@ export default class ModelChatList extends Vue {
     }
 
     private parseMesage(data: ChatType) {
-        if (!data.last_msg_content) return "[暂无消息]";
+        if (data.last_msg_sender && data.last_msg_sender != "0") {
+            if (this.userNames[data.last_msg_sender] === undefined) {
+                this.updateUserName({id: data.last_msg_sender, name: ""});
+                this.sdk.model("user").detail(data.last_msg_sender).query().then(userInfo => {
+                    this.updateUserName({id: data.last_msg_sender, name: userInfo.row.first_name.display as string});
+                })
+            }
+        }
+        if (data.last_msg_content === "") return "[暂无消息]";
         return parserMessage(data.last_msg_type, data.last_msg_content);
     }
 

components/chat-list.vue

@@ -33,7 +33,7 @@
                                 </div>
                             </div>
                             <div class="chat-msg text-dot-dot-dot">
-                                {{ parseMesage(item) }}
+                                {{userNames[item.last_msg_sender] ? userNames[item.last_msg_sender] + ": " : ""}}{{ parseMesage(item) }}
                             </div>
                         </div>
                     </div>
@@ -85,12 +85,18 @@ export default class ChatList extends Vue {
     @chatStore.State(ChatStore.STATE_MY_CHAT_ROOM_LIST)
     private readonly chatList!: ChatStore.STATE_MY_CHAT_ROOM_LIST;
 
+    @chatStore.State(ChatStore.STATE_CHAT_USERNAME)
+    private readonly userNames!: ChatStore.STATE_CHAT_USERNAME;
+
     @chatStore.Action(ChatStore.ACTION_SAVE_CURRENT_CHAT_ID_VERSION)
     private readonly saveChatId!: ChatStore.ACTION_SAVE_CURRENT_CHAT_ID_VERSION;
 
     @chatStore.Mutation(ChatStore.MUTATION_SAVE_MYSELF_ID)
     private readonly saveMyId!: ChatStore.MUTATION_SAVE_MYSELF_ID;
 
+    @chatStore.Mutation(ChatStore.MUTATION_SAVE_USERNAME)
+    private readonly updateUserName!: ChatStore.MUTATION_SAVE_USERNAME;
+
     @chatStore.Mutation(ChatStore.MUTATION_SET_CHAT_SOURCE)
     private readonly setSource!: ChatStore.MUTATION_SET_CHAT_SOURCE;
 
@@ -164,6 +170,14 @@ export default class ChatList extends Vue {
     }
 
     private parseMesage(data: ChatType) {
+        if (data.last_msg_sender && data.last_msg_sender != "0") {
+            if (this.userNames[data.last_msg_sender] === undefined) {
+                this.updateUserName({id: data.last_msg_sender, name: ""});
+                this.sdk.model("user").detail(data.last_msg_sender).query().then(userInfo => {
+                    this.updateUserName({id: data.last_msg_sender, name: userInfo.row.first_name.display as string});
+                })
+            }
+        }
         if (data.last_msg_content === "") return "[暂无消息]";
         return parserMessage(data.last_msg_type, data.last_msg_content);
     }

hybrid-input/index.vue

@@ -30,7 +30,6 @@
     </div>
 
     <el-scrollbar class="input-el-scrollbar">
-      <!-- contenteditable 只能设置为true，需要考虑浏览器兼容性问题，不能只考虑chrome -->
       <div
         class="input-container"
         ref="input"
@@ -38,6 +37,7 @@
         contenteditable="true"
         @input="$emit('input')"
         @keypress.enter="handleSendMsg"
+        @keyup.enter="handleReturn"
       ></div>
     </el-scrollbar>
 
@@ -265,9 +265,31 @@ export default class Input extends Vue {
     }
   }
 
-  private async handleSendMsg(e: Event) {
-    // 防止换行
+  private handleReturn(e: KeyboardEvent) {
+    if (e.altKey || e.ctrlKey) {
+      let el = this.messageInputBox
+      let range = document.createRange()
+      let sel =  window.getSelection()
+      let offset = sel.focusOffset
+      let content = el.innerHTML
+      el.innerHTML = content.slice(0, offset) + '\n' + (content.slice(offset) || '\n')
+      range.setStart(el.childNodes[0], offset + 1)
+      range.collapse(true)
+      sel.removeAllRanges()
+      sel.addRange(range)
+      return
+    }
+    if (e.shiftKey) {
+      e.preventDefault();
+      return
+    }
+  }
+
+  private async handleSendMsg(e: KeyboardEvent) {
     e.preventDefault();
+    if (e.shiftKey || e.ctrlKey || e.altKey) {
+      return
+    }
     return new Promise((resolve, reject) => {
       try {
         const data = this.getNodeListFromInputBox();

store/index.ts

 import { RootStoreState } from "@/store/model";
 import { Module } from "vuex";
-
+import Vue from "vue"
 import { ChatMember } from "../model";
 import { isAccessibleUrl } from "../service/tools";
 import { unique } from "../utils";
@@ -90,6 +90,7 @@ export default {
         [ChatStore.STATE_CURRENT_CHAT_INITING]: false,
         [ChatStore.STATE_CHAT_CURRENT_USER_TYPE]: null,
         [ChatStore.STATE_CHAT_SEND_FAIL_MESSAGE]: null,
+        [ChatStore.STATE_CHAT_USERNAME]: {},
     }),
     mutations: {
         [ChatStore.MUTATION_SHOW_CHAT](state, isSingle?: boolean) {
@@ -311,6 +312,9 @@ export default {
         [ChatStore.MUTATION_CHAT_UPDATE_USER_TYPE]: (state, v: string) => {
             state[ChatStore.STATE_CHAT_CURRENT_USER_TYPE] = v;
         },
+        [ChatStore.MUTATION_SAVE_USERNAME]: (state, param: {id: string, name: string}) => {
+            Vue.set(state[ChatStore.STATE_CHAT_USERNAME], param.id, param.name);
+        },
     },
     actions: {
         async [ChatStore.ACTION_GET_MY_CHAT_LIST]({

store/model.ts

@@ -46,6 +46,9 @@ export namespace ChatStore {
     export const STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID = "当前chat的Uniplat id";
     export type STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID = string | null
 
+    export const STATE_CHAT_USERNAME = "会话用户id-name";
+    export type STATE_CHAT_USERNAME = {[key: string]: string} | {}
+
     export const STATE_CHAT_MY_ID = "聊天窗口显示在右边那个人的id";
     export type STATE_CHAT_MY_ID = string | null
     export const STATE_CHAT_MY_UID = "聊天窗口显示在右边那个人的uid";
@@ -128,6 +131,9 @@ export namespace ChatStore {
     export const MUTATION_SAVE_SEND_FAIL_MESSAGE = "更新最新一条发送失败消息";
     export type MUTATION_SAVE_SEND_FAIL_MESSAGE = (param: {msg: string, ts: number}) => void
 
+    export const MUTATION_SAVE_USERNAME = "更新用户id-name";
+    export type MUTATION_SAVE_USERNAME = (param: {id: string, name: string}) => void
+
     export const MUTATION_SAVE_CURRENT_CHAT_ID = "保存当前chat-id";
     export type MUTATION_SAVE_CURRENT_CHAT_ID = (
         chatId: ChatStore.STATE_CHAT_CURRENT_CHAT_ID
@@ -338,6 +344,7 @@ export interface ChatStoreState {
     [ChatStore.STATE_CHAT_CURRENT_USER_UID]: ChatStore.STATE_CHAT_CURRENT_USER_UID
     [ChatStore.STATE_CHAT_CURRENT_USER_TYPE]: ChatStore.STATE_CHAT_CURRENT_USER_TYPE
     [ChatStore.STATE_CHAT_SEND_FAIL_MESSAGE]: ChatStore.STATE_CHAT_SEND_FAIL_MESSAGE
+    [ChatStore.STATE_CHAT_USERNAME]: ChatStore.STATE_CHAT_USERNAME
 }
 
 export const chatStore = namespace(ChatStore.ns);

xim/models/chat.ts

@@ -18,6 +18,7 @@ export interface Chat {
     join_msg_id: number;
     last_read_msg_id: number;
     biz_id: string;
+    last_msg_sender: string;
     last_msg_content: string;
     last_msg_type: string;
     business_data: {