@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts

@@ -3,7 +3,9 @@ import { storeToRefs } from 'pinia';
 import { useChatStore } from '../../../stores/chat';
 import { useBasicStore } from '../../../stores/basic';
 import { useI18n } from '../../../locales';
-import TUIRoomEngine, { TencentCloudChat } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TencentCloudChat,
+} from '@tencentcloud/tuiroom-engine-electron';
 import useGetRoomEngine from '../../../hooks/useRoomEngine';
 
 export default function useMessageList() {
@@ -14,10 +16,13 @@ export default function useMessageList() {
   const { roomId } = storeToRefs(basicStore);
   const { messageList, isCompleted, nextReqMessageId } = storeToRefs(chatStore);
 
-  watch(isCompleted, (value) => {
-    isCompleted.value = value;
-  }, { immediate: true, deep: true });
-
+  watch(
+    isCompleted,
+    value => {
+      isCompleted.value = value;
+    },
+    { immediate: true, deep: true }
+  );
 
   async function handleGetHistoryMessageList() {
     const tim = roomEngine.instance?.getTIM();
@@ -25,22 +30,32 @@ export default function useMessageList() {
       conversationID: `GROUP${roomId.value}`,
       nextReqMessageID: nextReqMessageId.value,
     });
-    const { nextReqMessageID: middleReqMessageId, messageList: historyMessageList, isCompleted } = imResponse.data;
+    const {
+      nextReqMessageID: middleReqMessageId,
+      messageList: historyMessageList,
+      isCompleted,
+    } = imResponse.data;
     messageList.value.splice(0, 0, ...historyMessageList);
-    const currentMessageList = messageList.value.filter(item => item.type === 'TIMTextElem');
-    chatStore.setMessageListInfo(currentMessageList, isCompleted, middleReqMessageId);
+    const currentMessageList = messageList.value.filter(
+      item => item.type === 'TIMTextElem'
+    );
+    chatStore.setMessageListInfo(
+      currentMessageList,
+      isCompleted,
+      middleReqMessageId
+    );
   }
 
   async function getMessageList(): Promise<{
     currentMessageList: any[];
-    isCompleted: boolean,
-    nextReqMessageId: string,
+    isCompleted: boolean;
+    nextReqMessageId: string;
   }> {
     let count = 0;
     const result: {
-      currentMessageList: any[],
-      isCompleted: boolean,
-      nextReqMessageId: string,
+      currentMessageList: any[];
+      isCompleted: boolean;
+      nextReqMessageId: string;
     } = {
       currentMessageList: [],
       isCompleted: false,
@@ -49,7 +64,7 @@ export default function useMessageList() {
     const tim: any = roomEngine.instance?.getTIM();
     const getIMMessageList = async () => {
       const conversationData: {
-        conversationID: string,
+        conversationID: string;
         nextReqMessageID?: string | undefined;
       } = {
         conversationID: `GROUP${roomId.value}`,
@@ -74,17 +89,26 @@ export default function useMessageList() {
     await getIMMessageList();
 
     return result;
-  };
+  }
 
   const onReceiveMessage = (options: { data: any }) => {
     if (!options || !options.data) {
       return;
     }
+    const currentConversationId = `GROUP${roomId.value}`;
     options.data.forEach((message: any) => {
-      if (message.type !== TencentCloudChat.TYPES.MSG_TEXT) {
+      if (
+        message.conversationID !== currentConversationId ||
+        message.type !== TencentCloudChat.TYPES.MSG_TEXT
+      ) {
         return;
       }
-      const { ID, payload: { text }, nick: userName, from: userId } = message;
+      const {
+        ID,
+        payload: { text },
+        nick: userName,
+        from: userId,
+      } = message;
       chatStore.updateMessageList({
         ID,
         type: 'TIMTextElem',
@@ -100,9 +124,16 @@ export default function useMessageList() {
   };
 
   async function setMessageListInfo() {
-    const { currentMessageList, isCompleted, nextReqMessageId } = await getMessageList();
-    const filterCurrentMessageList = currentMessageList.filter((item: any) => item.type === 'TIMTextElem');
-    chatStore.setMessageListInfo(filterCurrentMessageList, isCompleted, nextReqMessageId);
+    const { currentMessageList, isCompleted, nextReqMessageId } =
+      await getMessageList();
+    const filterCurrentMessageList = currentMessageList.filter(
+      (item: any) => item.type === 'TIMTextElem'
+    );
+    chatStore.setMessageListInfo(
+      filterCurrentMessageList,
+      isCompleted,
+      nextReqMessageId
+    );
   }
 
   function getDisplaySenderName(index: number) {

package/src/TUIRoom/components/Chat/MessageTypes/MessageText.vue

@@ -1,6 +1,9 @@
 <template>
   <span>
-    <span v-for="(item, index) in handleTextMessageShowContext(props.data)" :key="index">
+    <span
+      v-for="(item, index) in handleTextMessageShowContext(props.data)"
+      :key="index"
+    >
       <span v-if="item.name === 'text'" class="text-box">{{ item.text }}</span>
       <img v-else-if="item.name === 'img'" class="text-img" :src="item.src" />
     </span>
@@ -13,17 +16,17 @@ import { decodeMessageText } from '../util';
 const props = defineProps(['data']);
 
 const handleTextMessageShowContext = (text: string) => decodeMessageText(text);
-
 </script>
 
 <style lang="scss" scoped>
-  .text-img {
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
-  }
-  .text-box {
-    line-height: 20px;
-    vertical-align: middle;
-  }
+.text-img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
+.text-box {
+  line-height: 20px;
+  vertical-align: middle;
+}
 </style>

package/src/TUIRoom/components/Chat/index.vue

@@ -1,24 +1,25 @@
 <template>
-  <div :class="[isMobile ? 'chat-container-h5' : 'chat-container' ]">
-    <message-list></message-list>
-    <chat-editor v-if="!isMobile"></chat-editor>
+  <div :class="[isMobile ? 'chat-container-h5' : 'chat-container']">
+    <message-list />
+    <chat-editor v-if="!isMobile" />
   </div>
 </template>
 
 <script setup lang="ts">
 import MessageList from './MessageList/index.vue';
 import ChatEditor from './ChatEditor/index.vue';
-import { isMobile }  from '../../utils/environment';
+import { isMobile } from '../../utils/environment';
 </script>
 
 <style lang="scss" scoped>
-  .chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 20px;
-  }
-  .chat-container-h5 {
-    height: 100%;
-  }
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
+}
+
+.chat-container-h5 {
+  height: 100%;
+}
 </style>

package/src/TUIRoom/components/Chat/util.ts

@@ -9,7 +9,8 @@
  * https://cloud.tencent.com/document/product/269/59590
  */
 
-export const emojiBaseUrl = 'https://web.sdk.qcloud.com/im/assets/emoji-plugin/';
+export const emojiBaseUrl =
+  'https://web.sdk.qcloud.com/im/assets/emoji-plugin/';
 const deprecatedEmojiBaseUrl = 'https://web.sdk.qcloud.com/im/assets/emoji/';
 export const emojiMap: Record<string, string> = {
   '[期待]': 'emoji_0@2x.png',
@@ -350,7 +351,7 @@ const deprecatedEmojiMap: Record<string, string> = {
 export const emojiList = Object.keys(emojiMap);
 
 export function decodeMessageText(payload: string) {
-  const renderDom: { name: string; text?: string; src?: string; }[] = [];
+  const renderDom: { name: string; text?: string; src?: string }[] = [];
   function pushTextNode(text: string) {
     renderDom.push({
       name: 'text',
@@ -368,7 +369,7 @@ export function decodeMessageText(payload: string) {
   /**
    * Text Message
    *
-  **/
+   **/
   let temp = payload;
   let left = -1;
   let right = -1;
@@ -413,7 +414,7 @@ export function decodeSendTextMsg(payload: string) {
   /**
    * Text Message
    *
-  **/
+   **/
   let temp = payload;
   let left = -1;
   let right = -1;

package/src/TUIRoom/components/ManageMember/MemberControl/index.vue

@@ -1,7 +1,12 @@
 <template>
-  <div v-if="!isGeneralUser" class="member-control-container">
-    <tui-button class="button" size="default" @click="singleControl.func(props.userInfo)">
-      {{ singleControl.title }}
+  <div class="member-control-container">
+    <tui-button
+      class="button"
+      size="default"
+      @click="singleControl.func(props.userInfo)"
+      v-if="!isCanOperateMySelf"
+    >
+      {{ singleControl?.title }}
     </tui-button>
     <div ref="moreBtnRef" class="more-container">
       <tui-button class="button" type="primary" @click="toggleClickMoreBtn">
@@ -16,7 +21,7 @@
         v-show="showMoreControl"
         id="operate-list"
         ref="operateListRef"
-        :class="['user-operate-list', 'tui-theme-white', dropdownClass ]"
+        :class="['user-operate-list', 'tui-theme-white', dropdownClass]"
       >
         <div
           v-for="item in moreControlList"
@@ -24,7 +29,7 @@
           class="user-operate-item"
           @click="item.func(props.userInfo)"
         >
-          <svg-icon :icon="item.icon"></svg-icon>
+          <svg-icon :icon="item.icon" />
           <span class="operate-text">{{ item.title }}</span>
         </div>
       </div>
@@ -38,10 +43,29 @@
       :close-on-click-modal="true"
       :append-to-room-container="true"
     >
-      <span>{{ dialogData.content }}</span>
+      <div class="dialog-content">
+        <span>{{ dialogData.content }}</span>
+        <tui-input
+          v-if="dialogData.showInput"
+          v-model="tempUserName"
+          class="dialog-input"
+          :placeholder="t('Please input user name')"
+        />
+      </div>
       <template #footer>
-        <tui-button size="default" @click="handleAction(props.userInfo)"> {{ dialogData.confirmText }} </tui-button>
-        <tui-button class="cancel" size="default" type="primary" @click="handleCancelDialog">
+        <tui-button
+          size="default"
+          @click="handleAction(props.userInfo)"
+          :disabled="tempUserName.length === 0"
+        >
+          {{ dialogData.confirmText }}
+        </tui-button>
+        <tui-button
+          class="cancel"
+          size="default"
+          type="primary"
+          @click="handleCancelDialog"
+        >
           {{ t('Cancel') }}
         </tui-button>
       </template>
@@ -54,14 +78,16 @@ import { ref, watch, computed, nextTick } from 'vue';
 import { useI18n } from '../../../locales';
 import TuiButton from '../../common/base/Button.vue';
 import Dialog from '../../common/base/Dialog/index.vue';
+import TuiInput from '../../common/base/Input/index.vue';
 import SvgIcon from '../../common/base/SvgIcon.vue';
 import ArrowUpIcon from '../../common/icons/ArrowUpIcon.vue';
 import useMemberControlHooks from './useMemberControlHooks';
+import useMemberItemHooks from '../MemberItem/useMemberItemHooks';
 import { UserInfo } from '../../../stores/room';
 
 interface Props {
-  userInfo: UserInfo,
-  showMemberControl: boolean,
+  userInfo: UserInfo;
+  showMemberControl: boolean;
 }
 
 const props = defineProps<Props>();
@@ -69,25 +95,32 @@ const props = defineProps<Props>();
 const { t } = useI18n();
 const {
   controlList,
-  isGeneralUser,
   handleCancelDialog,
   handleAction,
   isDialogVisible,
   dialogData,
+  tempUserName,
 } = useMemberControlHooks(props);
 
+const { isCanOperateMySelf } = useMemberItemHooks(props.userInfo);
+
 const singleControl = computed(() => controlList.value[0]);
-const moreControlList = computed(() => controlList.value.slice(1));
+const moreControlList = computed(() => {
+  return isCanOperateMySelf ? controlList.value : controlList.value.slice(1);
+});
 const dropdownClass = ref('down');
 const moreBtnRef = ref();
 const operateListRef = ref();
 const showMoreControl = ref(false);
 
-watch(() => props.showMemberControl, (val) => {
-  if (!val) {
-    showMoreControl.value = false;
+watch(
+  () => props.showMemberControl,
+  val => {
+    if (!val) {
+      showMoreControl.value = false;
+    }
   }
-});
+);
 
 async function toggleClickMoreBtn() {
   if (showMoreControl.value) {
@@ -100,7 +133,9 @@ async function toggleClickMoreBtn() {
 
 async function handleDropDownPosition() {
   const { top, bottom } = moreBtnRef.value?.getBoundingClientRect();
-  const { top: containerTop, bottom: containerBottom } = document.getElementById('memberListContainer')?.getBoundingClientRect() as DOMRect;
+  const { top: containerTop, bottom: containerBottom } = document
+    .getElementById('memberListContainer')
+    ?.getBoundingClientRect() as DOMRect;
   if (!containerBottom || !containerTop) {
     return;
   }
@@ -108,7 +143,8 @@ async function handleDropDownPosition() {
   const topSize = top - containerTop;
   let dropDownContainerHeight = 0;
   if (!showMoreControl.value) {
-    operateListRef.value.style = 'display:block;position:absolute;z-index:-1000';
+    operateListRef.value.style =
+      'display:block;position:absolute;z-index:-1000';
     await nextTick();
     dropDownContainerHeight = operateListRef.value.offsetHeight;
     operateListRef.value.style = '';
@@ -122,106 +158,130 @@ async function handleDropDownPosition() {
     dropdownClass.value = 'up';
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
-
 .tui-theme-black .user-operate-list {
   --operation-font-color: var(--font-color-1);
-  --operation-box-shadow: 0px 3px 8px rgba(34, 38, 46, 0.30), 0px 6px 40px rgba(34, 38, 46, 0.30);
+  --operation-box-shadow: 0px 3px 8px rgba(34, 38, 46, 0.3),
+    0px 6px 40px rgba(34, 38, 46, 0.3);
 }
 
 .tui-theme-white .user-operate-list {
-  --operation-font-color: #6B758A;
-  --operation-box-shadow: 0px 3px 8px #E9F0FB, 0px 6px 40px rgba(0, 0, 0, 0.10);
+  --operation-font-color: #6b758a;
+  --operation-box-shadow: 0px 3px 8px #e9f0fb, 0px 6px 40px rgba(0, 0, 0, 0.1);
 }
 
 .member-control-container {
   display: flex;
   flex-direction: row;
+
   .button {
     height: 32px;
     padding: 0 10px;
     margin-left: 10px;
+
     .more-arrow {
       margin-left: 2px;
+
       &.down {
         transform: rotate(180deg);
       }
     }
   }
+
   .more-container {
     position: relative;
+
     .user-operate-list {
       position: absolute;
-      padding: 20px;
+      z-index: 1;
       min-width: 160px;
+      padding: 20px;
       background: var(--background-color-1);
       border-radius: 8px;
       box-shadow: var(--operation-box-shadow);
-      z-index: 1;
+
       &::before {
-        content: '';
         position: absolute;
-        width: 0px;
+        width: 0;
+        content: '';
         border-top: 10px solid transparent;
         border-right: 10px solid transparent;
         border-bottom: 10px solid var(--background-color-1);
         border-left: 10px solid transparent;
       }
+
       &::after {
-        content: '';
+        position: absolute;
         width: 100%;
         height: 20px;
-        position: absolute;
+        content: '';
         background-color: transparent;
       }
+
       .user-operate-item {
-        cursor: pointer;
-        color: var(--operation-font-color);
-        height: 20px;
         display: flex;
         align-items: center;
+        height: 20px;
+        color: var(--operation-font-color);
+        cursor: pointer;
+
         .operate-text {
           margin-left: 10px;
           font-size: 14px;
           white-space: nowrap;
         }
+
         &:not(:first-child) {
           margin-top: 20px;
         }
       }
     }
+
     .down {
       top: calc(100% + 15px);
       right: 0;
+
       &::before {
-        right: 20px;
         top: -20px;
+        right: 20px;
       }
+
       &::after {
-        left: 0px;
         top: -20px;
+        left: 0;
       }
     }
+
     .up {
-      bottom: calc(100% + 15px);
       right: 0;
+      bottom: calc(100% + 15px);
+
       &::before {
-        bottom: -20px;
         right: 20px;
+        bottom: -20px;
         transform: rotate(180deg);
       }
+
       &::after {
-        left: 0px;
         bottom: -20px;
+        left: 0;
       }
     }
   }
 }
+
+.dialog-content {
+  display: flex;
+  align-items: center;
+
+  .dialog-input {
+    flex-grow: 1;
+  }
+}
+
 .cancel {
   margin-left: 12px;
 }
-
 </style>