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

c74c7791 · 吴云建 · 21a53f16 · c74c7791 · c74c7791 · c74c7791
Commit c74c7791 authored Aug 26, 2021 by 吴云建
Showing with 70 additions and 7 deletions
components/chat-list-model.vue
components/chat-list.vue
hybrid-input/index.vue
store/index.ts
store/model.ts
xim/models/chat.ts
--- a/components/chat-list-model.vue
+++ b/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);
    }

--- a/components/chat-list.vue
+++ b/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);
    }

--- a/hybrid-input/index.vue
+++ b/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();

--- a/store/index.ts
+++ b/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]({

--- a/store/model.ts
+++ b/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);
--- a/xim/models/chat.ts
+++ b/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: {