1、腾讯IM模块格式化

src/TUIKit/adapter-vue.ts

@@ -3,10 +3,7 @@ import { TUIGlobal } from '@tencentcloud/universal-api';
 
 let vueVersion: number;
 let framework = 'vue2';
-let createVNode = (
+let createVNode = (arg1: any, arg2: any): { component: any; props: any; data: any } => {
-  arg1: any,
-  arg2: any,
-): { component: any; props: any; data: any } => {
   return {} as { component: any; props: any; data: any };
 };
 let render = (arg1: any, arg2: any) => {
@@ -14,17 +11,11 @@ let render = (arg1: any, arg2: any) => {
 };
 
 try {
-  if (
+  if ((Vue as any)?.default?.version && (Vue as any)?.default?.version?.startsWith('2.7.')) {
-    (Vue as any)?.default?.version
-    && (Vue as any)?.default?.version?.startsWith('2.7.')
-  ) {
     // >= Vue 2.7.0
     vueVersion = 2.7;
     TUIGlobal.Vue = (Vue as any)?.getCurrentInstance()?.appContext?.app;
-  } else if (
+  } else if ((Vue as any)?.default?.version && (Vue as any)?.default?.version?.startsWith('2.')) {
-    (Vue as any)?.default?.version
-    && (Vue as any)?.default?.version?.startsWith('2.')
-  ) {
     // < Vue 2.7.0
     vueVersion = 2;
     TUIGlobal.Vue = (Vue as any).default;

src/TUIKit/components/TUIChat/chat-header/index.vue

@@ -8,10 +8,7 @@
       <Icon :file="backSVG" />
     </div>
     <div class="chat-header-container">
-      <div
+      <div v-if="isNotRoomChat" :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
-        v-if="isNotRoomChat"
-        :class="['chat-header-content', !isPC && 'chat-header-h5-content']"
-      >
         {{ currentConversationName }}
       </div>
       <div>
@@ -19,11 +16,7 @@
       </div>
     </div>
     <div :class="['chat-header-setting', !isPC && 'chat-header-h5-setting']">
-      <div
+      <div v-for="(item, index) in props.headerExtensionList" :key="index" @click.stop="handleExtensions(item)">
-        v-for="(item, index) in props.headerExtensionList"
-        :key="index"
-        @click.stop="handleExtensions(item)"
-      >
         <Icon :file="item.icon" />
       </div>
     </div>
@@ -31,12 +24,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, withDefaults } from '../../../adapter-vue';
-import {
+import { TUIStore, StoreName, TUITranslateService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine';
 import { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
 // import { JoinGroupCard } from '@tencentcloud/call-uikit-vue';
 import Icon from '../../common/Icon.vue';
@@ -49,8 +37,8 @@ const props = withDefaults(
     headerExtensionList: ExtensionInfo[];
   }>(),
   {
-    headerExtensionList: () => ([]),
+    headerExtensionList: () => []
-  },
+  }
 );
 
 const emits = defineEmits(['closeChat']);
@@ -62,21 +50,21 @@ const isNotRoomChat = ref<boolean>(TUIChatConfig.getChatType() !== TUIConstants.
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
-    currentConversation: onCurrentConversationUpdated,
+    currentConversation: onCurrentConversationUpdated
   });
 
   TUIStore.watch(StoreName.CHAT, {
-    typingStatus: onTypingStatusUpdated,
+    typingStatus: onTypingStatusUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CONV, {
-    currentConversation: onCurrentConversationUpdated,
+    currentConversation: onCurrentConversationUpdated
   });
 
   TUIStore.unwatch(StoreName.CHAT, {
-    typingStatus: onTypingStatusUpdated,
+    typingStatus: onTypingStatusUpdated
   });
 });
 
@@ -102,7 +90,6 @@ function onTypingStatusUpdated(status: boolean) {
     currentConversationName.value = currentConversation.value?.getShowName() || '';
   }
 }
-
 </script>
 <style lang="scss" scoped>
 .chat-header {
@@ -152,7 +139,7 @@ function onTypingStatusUpdated(status: boolean) {
     align-items: center;
   }
 
-  &-content{
+  &-content {
     margin: 0 20px;
     text-align: center;
   }

src/TUIKit/components/TUIChat/config.ts

@@ -26,7 +26,7 @@ class TUIChatConfig {
       InputQuickReplies: true,
       InputMention: true,
       MessageSearch: true,
-      ReadStatus: true,
+      ReadStatus: true
     };
     this.theme = 'light';
   }
@@ -76,8 +76,6 @@ class TUIChatConfig {
 const ChatConfig = TUIChatConfig.getInstance();
 const hideTUIChatFeatures = ChatConfig.hideTUIChatFeatures.bind(ChatConfig);
 
-export {
+export { hideTUIChatFeatures };
-  hideTUIChatFeatures,
-};
 
 export default ChatConfig;

src/TUIKit/components/TUIChat/emoji-config/custom-emoji.ts

@@ -1,15 +1,15 @@
 import { IEmojiGroupList } from '../../../interface';
 
 /**
-* Custom big emoji
+ * Custom big emoji
-*/
+ */
 export const CUSTOM_BIG_EMOJI_URL: string = '';
 
 export const CUSTOM_BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [];
 
 /**
-* Custom basic emoji
+ * Custom basic emoji
-*/
+ */
 export const CUSTOM_BASIC_EMOJI_URL: string = '';
 
 export const CUSTOM_BASIC_EMOJI_URL_MAPPING: Record<string, string> = {};

src/TUIKit/components/TUIChat/emoji-config/default-emoji.ts

@@ -77,7 +77,7 @@ export const DEFAULT_BASIC_EMOJI_URL_MAPPING: Record<string, string> = {
   '[TUIEmoji_Prohibit]': 'emoji_58@2x.png',
   '[TUIEmoji_Convinced]': 'emoji_59@2x.png',
   '[TUIEmoji_Knife]': 'emoji_60@2x.png',
-  '[TUIEmoji_Like]': 'emoji_61@2x.png',
+  '[TUIEmoji_Like]': 'emoji_61@2x.png'
 };
 
 export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [
@@ -85,30 +85,60 @@ export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [
     emojiGroupID: 1,
     type: EMOJI_TYPE.BIG,
     url: DEFAULT_BIG_EMOJI_URL,
-    list: ['yz00', 'yz01', 'yz02', 'yz03', 'yz04', 'yz05', 'yz06', 'yz07', 'yz08',
+    list: [
-      'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],
+      'yz00',
+      'yz01',
+      'yz02',
+      'yz03',
+      'yz04',
+      'yz05',
+      'yz06',
+      'yz07',
+      'yz08',
+      'yz09',
+      'yz10',
+      'yz11',
+      'yz12',
+      'yz13',
+      'yz14',
+      'yz15',
+      'yz16',
+      'yz17'
+    ]
   },
   {
     emojiGroupID: 2,
     type: EMOJI_TYPE.BIG,
     url: DEFAULT_BIG_EMOJI_URL,
-    list: ['ys00', 'ys01', 'ys02', 'ys03', 'ys04', 'ys05', 'ys06', 'ys07', 'ys08',
+    list: ['ys00', 'ys01', 'ys02', 'ys03', 'ys04', 'ys05', 'ys06', 'ys07', 'ys08', 'ys09', 'ys10', 'ys11', 'ys12', 'ys13', 'ys14', 'ys15']
-      'ys09', 'ys10', 'ys11', 'ys12', 'ys13', 'ys14', 'ys15'],
   },
   {
     emojiGroupID: 3,
     type: EMOJI_TYPE.BIG,
     url: DEFAULT_BIG_EMOJI_URL,
-    list: ['gcs00', 'gcs01', 'gcs02', 'gcs03', 'gcs04', 'gcs05', 'gcs06', 'gcs07',
+    list: [
-      'gcs08', 'gcs09', 'gcs10', 'gcs11', 'gcs12', 'gcs13', 'gcs14', 'gcs15', 'gcs16'],
+      'gcs00',
-  },
+      'gcs01',
+      'gcs02',
+      'gcs03',
+      'gcs04',
+      'gcs05',
+      'gcs06',
+      'gcs07',
+      'gcs08',
+      'gcs09',
+      'gcs10',
+      'gcs11',
+      'gcs12',
+      'gcs13',
+      'gcs14',
+      'gcs15',
+      'gcs16'
+    ]
+  }
 ];
 
 export const BASIC_EMOJI_NAME_TO_KEY_MAPPING = {
-  ...Object.fromEntries(
+  ...Object.fromEntries(Object.entries(emojiCNLocales)?.map(([key, val]) => [val, key])),
-    Object.entries(emojiCNLocales)?.map(([key, val]) => [val, key]),
+  ...Object.fromEntries(Object.entries(emojiENLocales)?.map(([key, val]) => [val, key]))
-  ),
-  ...Object.fromEntries(
-    Object.entries(emojiENLocales)?.map(([key, val]) => [val, key]),
-  ),
 };

src/TUIKit/components/TUIChat/emoji-config/index.ts

@@ -1,6 +1,12 @@
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { CUSTOM_BASIC_EMOJI_URL, CUSTOM_BIG_EMOJI_URL, CUSTOM_BASIC_EMOJI_URL_MAPPING, CUSTOM_BIG_EMOJI_GROUP_LIST } from './custom-emoji';
-import { DEFAULT_BASIC_EMOJI_URL, BIG_EMOJI_GROUP_LIST, DEFAULT_BASIC_EMOJI_URL_MAPPING, BASIC_EMOJI_NAME_TO_KEY_MAPPING, DEFAULT_BIG_EMOJI_URL } from './default-emoji';
+import {
+  DEFAULT_BASIC_EMOJI_URL,
+  BIG_EMOJI_GROUP_LIST,
+  DEFAULT_BASIC_EMOJI_URL_MAPPING,
+  BASIC_EMOJI_NAME_TO_KEY_MAPPING,
+  DEFAULT_BIG_EMOJI_URL
+} from './default-emoji';
 import { default as emojiCNLocales } from './locales/zh_cn';
 import { IEmojiGroupList } from '../../../interface';
 import { EMOJI_TYPE } from '../../../constant';
@@ -17,10 +23,10 @@ const EMOJI_GROUP_LIST: IEmojiGroupList = [
     emojiGroupID: 0,
     type: EMOJI_TYPE.BASIC,
     url: BASIC_EMOJI_URL,
-    list: Object.keys(BASIC_EMOJI_URL_MAPPING),
+    list: Object.keys(BASIC_EMOJI_URL_MAPPING)
   },
   ...BIG_EMOJI_GROUP_LIST,
-  ...CUSTOM_BIG_EMOJI_GROUP_LIST,
+  ...CUSTOM_BIG_EMOJI_GROUP_LIST
 ];
 
 /**
@@ -49,7 +55,7 @@ const transformTextWithKeysToEmojiNames = (text: string): string => {
   const reg = /(\[.+?\])/g;
   let txt: string = text;
   if (reg.test(text)) {
-    txt = text.replace(reg, match => BASIC_EMOJI_URL_MAPPING[match] ? convertKeyToEmojiName(match) : match);
+    txt = text.replace(reg, (match) => (BASIC_EMOJI_URL_MAPPING[match] ? convertKeyToEmojiName(match) : match));
   }
   return txt;
 };
@@ -68,20 +74,20 @@ const transformTextWithEmojiNamesToKeys = (text: string) => {
   const reg = /(\[.+?\])/g;
   let txt: string = text;
   if (reg.test(text)) {
-    txt = text.replace(reg, match => BASIC_EMOJI_NAME_TO_KEY_MAPPING[match] || match);
+    txt = text.replace(reg, (match) => BASIC_EMOJI_NAME_TO_KEY_MAPPING[match] || match);
   }
   return txt;
 };
 
 /**
-* The configuration aims to provide compatibility with versions prior to 2.2.0
+ * The configuration aims to provide compatibility with versions prior to 2.2.0
-*/
+ */
 const emojiConfig = {
   emojiBaseUrl: BASIC_EMOJI_URL,
   emojiUrlMapping: BASIC_EMOJI_URL_MAPPING,
   emojiNameMapping: {
-    ...emojiCNLocales,
+    ...emojiCNLocales
-  },
+  }
 };
 
 /**
@@ -136,5 +142,5 @@ export {
   parseTextToRenderArray,
   transformTextWithKeysToEmojiNames,
   transformTextWithEmojiNamesToKeys,
-  emojiConfig,
+  emojiConfig
 };

src/TUIKit/components/TUIChat/emoji-config/locales/en.ts

@@ -60,7 +60,7 @@ const Emoji = {
   '[TUIEmoji_666]': '[666]',
   '[TUIEmoji_857]': '[857]',
   '[TUIEmoji_Knife]': '[Knife]',
-  '[TUIEmoji_Like]': '[Like]',
+  '[TUIEmoji_Like]': '[Like]'
 };
 
 export default Emoji;

src/TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts

@@ -60,7 +60,7 @@ const Emoji: Record<string, string> = {
   '[TUIEmoji_666]': '[666]',
   '[TUIEmoji_857]': '[857]',
   '[TUIEmoji_Knife]': '[刀]',
-  '[TUIEmoji_Like]': '[赞]',
+  '[TUIEmoji_Like]': '[赞]'
 };
 
 export default Emoji;

src/TUIKit/components/TUIChat/emoji-config/locales/zh_tw.ts

@@ -60,7 +60,7 @@ const Emoji: Record<string, string> = {
   '[TUIEmoji_666]': '[666]',
   '[TUIEmoji_857]': '[857]',
   '[TUIEmoji_Knife]': '[刀]',
-  '[TUIEmoji_Like]': '[讚]',
+  '[TUIEmoji_Like]': '[讚]'
 };
 
 export default Emoji;

src/TUIKit/components/TUIChat/forward/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <Overlay
+  <Overlay :visible="isShowForwardPanel" :useMask="false">
-    :visible="isShowForwardPanel"
-    :useMask="false"
-  >
     <Transfer
       :title="TUITranslateService.t('TUIChat.转发')"
       :isSearch="false"
@@ -17,12 +14,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from '../../../adapter-vue';
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName, TUIChatService, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  TUIChatService,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import Overlay from '../../common/Overlay/index.vue';
 import Transfer from '../../common/Transfer/index.vue';
 import { Toast, TOAST_TYPE } from '../../../components/common/Toast';
@@ -45,14 +37,14 @@ const customConversationList = ref();
 onMounted(() => {
   TUIStore.watch(StoreName.CUSTOM, {
     singleForwardMessageID: onSingleForwardMessageIDUpdated,
-    multipleForwardMessageID: onMultipleForwardMessageIDUpdated,
+    multipleForwardMessageID: onMultipleForwardMessageIDUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CUSTOM, {
     singleForwardMessageID: onSingleForwardMessageIDUpdated,
-    multipleForwardMessageID: onMultipleForwardMessageIDUpdated,
+    multipleForwardMessageID: onMultipleForwardMessageIDUpdated
   });
 
   // tuistore data must be cleared when closing the forward panel
@@ -72,10 +64,7 @@ function onMultipleForwardMessageIDUpdated(params: { isMergeForward: boolean; me
     return;
   }
   isMergeForward = false;
-  const {
+  const { isMergeForward: _isMergeForward, messageIDList: selectedMessageIDList } = params || {};
-    isMergeForward: _isMergeForward,
-    messageIDList: selectedMessageIDList,
-  } = params || {};
   if (selectedMessageIDList?.length > 0) {
     isMergeForward = _isMergeForward;
     selectedToForwardMessageIDList = selectedMessageIDList;
@@ -83,7 +72,7 @@ function onMultipleForwardMessageIDUpdated(params: { isMergeForward: boolean; me
   } else {
     Toast({
       message: TUITranslateService.t('TUIChat.未选择消息'),
-      type: TOAST_TYPE.ERROR,
+      type: TOAST_TYPE.ERROR
     });
   }
 }
@@ -107,35 +96,29 @@ function openForwardPanel(): void {
 function finishSelected(selectedConvIDWrapperList: Array<{ userID: string }>): void {
   if (selectedConvIDWrapperList?.length === 0) return;
   // to reuse Transfer, so we have to get conversationModel by userID instead of ConversationID
-  const selectedConversationList = selectedConvIDWrapperList.map(IDWrapper => TUIStore.getConversationModel(IDWrapper.userID));
+  const selectedConversationList = selectedConvIDWrapperList.map((IDWrapper) => TUIStore.getConversationModel(IDWrapper.userID));
-  const unsentMessageQueue = selectedToForwardMessageIDList
+  const unsentMessageQueue = selectedToForwardMessageIDList.map((messageID) => TUIStore.getMessageModel(messageID)).sort((a, b) => a.time - b.time);
-    .map(messageID => TUIStore.getMessageModel(messageID))
-    .sort((a, b) => a.time - b.time);
   const forwardPromises = selectedConversationList.map((conversation) => {
     const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
       conversation,
-      messageType: TUIChatEngine.TYPES.MSG_MERGER,
+      messageType: TUIChatEngine.TYPES.MSG_MERGER
     };
-    return TUIChatService.sendForwardMessage(
+    return TUIChatService.sendForwardMessage([conversation], unsentMessageQueue, {
-      [conversation],
+      needMerge: isMergeForward,
-      unsentMessageQueue,
+      offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
-      {
+      params: {
-        needMerge: isMergeForward,
+        needReadReceipt: isEnabledMessageReadReceiptGlobal()
-        offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+      }
-        params: {
+    });
-          needReadReceipt: isEnabledMessageReadReceiptGlobal(),
-        },
-      },
-    );
   });
   Promise.allSettled(forwardPromises).then((results) => {
     for (const result of results) {
       const { status } = result;
       if (status === 'rejected') {
-        const errorMessage = result.reason.code === 80001 ? TUITranslateService.t('TUIChat.内容包含敏感词汇') : result.reason.message as string;
+        const errorMessage = result.reason.code === 80001 ? TUITranslateService.t('TUIChat.内容包含敏感词汇') : (result.reason.message as string);
         Toast({
           message: errorMessage,
-          type: TOAST_TYPE.ERROR,
+          type: TOAST_TYPE.ERROR
         });
         break;
       }
@@ -152,7 +135,7 @@ function getTransforRenderDataList() {
       // To achieve reusability of Transfer, userID is used here instead of ConversationID
       userID: conversation.conversationID,
       nick: conversation.getShowName(),
-      avatar: conversation.getAvatar(),
+      avatar: conversation.getAvatar()
     };
   });
 }

src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue

@@ -6,75 +6,31 @@
       'emoji-picker-h5': !isPC
     }"
   >
-    <ul
+    <ul ref="emojiPickerListRef" :class="['emoji-picker-list', !isPC && 'emoji-picker-h5-list']">
-      ref="emojiPickerListRef"
-      :class="['emoji-picker-list', !isPC && 'emoji-picker-h5-list']"
-    >
       <li
         v-for="(childrenItem, childrenIndex) in currentEmojiList"
         :key="childrenIndex"
         class="emoji-picker-list-item"
         @click="select(childrenItem, childrenIndex)"
       >
-        <img
+        <img v-if="currentTabItem.type === EMOJI_TYPE.BASIC" class="emoji" :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]" />
-          v-if="currentTabItem.type === EMOJI_TYPE.BASIC"
+        <img v-else-if="currentTabItem.type === EMOJI_TYPE.BIG" class="emoji-big" :src="currentTabItem.url + childrenItem + '@2x.png'" />
-          class="emoji"
+        <img v-else class="emoji-custom emoji-big" :src="currentTabItem.url + childrenItem" />
-          :src="currentTabItem.url + BASIC_EMOJI_URL_MAPPING[childrenItem]"
-        >
-        <img
-          v-else-if="currentTabItem.type === EMOJI_TYPE.BIG"
-          class="emoji-big"
-          :src="currentTabItem.url + childrenItem + '@2x.png'"
-        >
-        <img
-          v-else
-          class="emoji-custom emoji-big"
-          :src="currentTabItem.url + childrenItem"
-        >
       </li>
     </ul>
     <ul class="emoji-picker-tab">
-      <li
+      <li v-for="(item, index) in list" :key="index" class="emoji-picker-tab-item" @click="toggleEmojiTab(index)">
-        v-for="(item, index) in list"
+        <Icon v-if="item.type === EMOJI_TYPE.BASIC" class="icon" :file="faceIcon" />
-        :key="index"
+        <img v-else-if="item.type === EMOJI_TYPE.BIG" class="icon-big" :src="item.url + item.list[0] + '@2x.png'" />
-        class="emoji-picker-tab-item"
+        <img v-else class="icon-custom icon-big" :src="item.url + item.list[0]" />
-        @click="toggleEmojiTab(index)"
-      >
-        <Icon
-          v-if="item.type === EMOJI_TYPE.BASIC"
-          class="icon"
-          :file="faceIcon"
-        />
-        <img
-          v-else-if="item.type === EMOJI_TYPE.BIG"
-          class="icon-big"
-          :src="item.url + item.list[0] + '@2x.png'"
-        >
-        <img
-          v-else
-          class="icon-custom icon-big"
-          :src="item.url + item.list[0]"
-        >
-      </li>
-      <li
-        v-if="isUniFrameWork"
-        class="send-btn"
-        @click="sendMessage"
-      >
-        发送
       </li>
+      <li v-if="isUniFrameWork" class="send-btn" @click="sendMessage">发送</li>
     </ul>
   </div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from '../../../../adapter-vue';
-import {
+import { TUIChatService, TUIStore, StoreName, IConversationModel, SendMessageParams } from '@tencentcloud/chat-uikit-engine';
-  TUIChatService,
-  TUIStore,
-  StoreName,
-  IConversationModel,
-  SendMessageParams,
-} from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
 import faceIconLight from '../../../../assets/icon/face-light.svg';
 import faceIconDark from '../../../../assets/icon/face-dark.svg';
@@ -98,13 +54,13 @@ const currentEmojiList = ref<string[]>(list?.value[0]?.list);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
-    currentConversation: onCurrentConversationUpdate,
+    currentConversation: onCurrentConversationUpdate
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CONV, {
-    currentConversation: onCurrentConversationUpdate,
+    currentConversation: onCurrentConversationUpdate
   });
 });
 
@@ -121,7 +77,7 @@ const toggleEmojiTab = (index: number) => {
 const select = (item: any, index: number) => {
   const options: any = {
     emoji: { key: item, name: convertKeyToEmojiName(item) },
-    type: currentTabItem?.value?.type,
+    type: currentTabItem?.value?.type
   };
   switch (currentTabItem?.value?.type) {
     case EMOJI_TYPE.BASIC:
@@ -146,15 +102,13 @@ const select = (item: any, index: number) => {
 
 const sendFaceMessage = (index: number, listItem: IEmojiGroup) => {
   const options = {
-    to:
+    to: currentConversation?.value?.groupProfile?.groupID || currentConversation?.value?.userProfile?.userID,
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
     conversationType: currentConversation?.value?.type,
     payload: {
       index: listItem.emojiGroupID,
-      data: listItem.list[index],
+      data: listItem.list[index]
     },
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+    needReadReceipt: isEnabledMessageReadReceiptGlobal()
   } as SendMessageParams;
   TUIChatService.sendFaceMessage(options);
 };

src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.vue

@@ -1,24 +1,10 @@
 <template>
-  <ToolbarItemContainer
+  <ToolbarItemContainer ref="container" :iconFile="faceIcon" title="表情" @onDialogShow="onDialogShow" @onDialogClose="onDialogClose">
-    ref="container"
+    <EmojiPickerDialog @insertEmoji="insertEmoji" @sendMessage="sendMessage" @onClose="onClose" />
-    :iconFile="faceIcon"
-    title="表情"
-    @onDialogShow="onDialogShow"
-    @onDialogClose="onDialogClose"
-  >
-    <EmojiPickerDialog
-      @insertEmoji="insertEmoji"
-      @sendMessage="sendMessage"
-      @onClose="onClose"
-    />
   </ToolbarItemContainer>
 </template>
 <script lang="ts" setup>
-import {
+import { TUIStore, StoreName, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine';
 import { ref } from '../../../../adapter-vue';
 import faceIconLight from '../../../../assets/icon/face-light.svg';
 import faceIconDark from '../../../../assets/icon/face-dark.svg';
@@ -45,7 +31,7 @@ const container = ref<InstanceType<typeof ToolbarItemContainer>>();
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation: IConversationModel) => {
     currentConversation.value = conversation;
-  },
+  }
 });
 
 const onDialogShow = (dialogRef: any) => {
@@ -75,7 +61,7 @@ const onClose = () => {
 };
 
 defineExpose({
-  closeEmojiPicker: onClose,
+  closeEmojiPicker: onClose
 });
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue

@@ -11,83 +11,39 @@
   >
     <div :class="['evaluate', !isPC && 'evaluate-h5']">
       <div :class="['evaluate-header', !isPC && 'evaluate-h5-header']">
-        <div
+        <div :class="['evaluate-header-content', !isPC && 'evaluate-h5-header-content']">
-          :class="[
+          {{ TUITranslateService.t('Evaluate.请对本次服务进行评价') }}
-            'evaluate-header-content',
-            !isPC && 'evaluate-h5-header-content',
-          ]"
-        >
-          {{ TUITranslateService.t("Evaluate.请对本次服务进行评价") }}
         </div>
-        <div
+        <div v-if="!isPC" :class="['evaluate-header-close', !isPC && 'evaluate-h5-header-close']" @click.stop="closeDialog">
-          v-if="!isPC"
+          {{ TUITranslateService.t('关闭') }}
-          :class="[
-            'evaluate-header-close',
-            !isPC && 'evaluate-h5-header-close',
-          ]"
-          @click.stop="closeDialog"
-        >
-          {{ TUITranslateService.t("关闭") }}
         </div>
       </div>
       <div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
-        <ul
+        <ul :class="['evaluate-content-list', !isPC && 'evaluate-h5-content-list']">
-          :class="[
-            'evaluate-content-list',
-            !isPC && 'evaluate-h5-content-list',
-          ]"
-        >
           <li
             v-for="(item, index) in starList"
             :key="index"
-            :class="[
+            :class="['evaluate-content-list-item', !isPC && 'evaluate-h5-content-list-item']"
-              'evaluate-content-list-item',
-              !isPC && 'evaluate-h5-content-list-item',
-            ]"
             @click.stop="selectStar(index)"
           >
-            <Icon
+            <Icon v-if="index <= currentStarIndex" :file="starLightIcon" :width="isPC ? '20px' : '30px'" :height="isPC ? '20px' : '30px'" />
-              v-if="index <= currentStarIndex"
+            <Icon v-else :file="starIcon" :width="isPC ? '20px' : '30px'" :height="isPC ? '20px' : '30px'" />
-              :file="starLightIcon"
-              :width="isPC ? '20px' : '30px'"
-              :height="isPC ? '20px' : '30px'"
-            />
-            <Icon
-              v-else
-              :file="starIcon"
-              :width="isPC ? '20px' : '30px'"
-              :height="isPC ? '20px' : '30px'"
-            />
           </li>
         </ul>
-        <textarea
+        <textarea v-model="comment" :class="['evaluate-content-text', !isPC && 'evaluate-h5-content-text']" />
-          v-model="comment"
+        <div :class="['evaluate-content-button', !isPC && 'evaluate-h5-content-button']">
-          :class="[
+          <button :class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']" @click="submitEvaluate">
-            'evaluate-content-text',
+            {{ TUITranslateService.t('Evaluate.提交评价') }}
-            !isPC && 'evaluate-h5-content-text',
-          ]"
-        />
-        <div
-          :class="[
-            'evaluate-content-button',
-            !isPC && 'evaluate-h5-content-button',
-          ]"
-        >
-          <button
-            :class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']"
-            @click="submitEvaluate"
-          >
-            {{ TUITranslateService.t("Evaluate.提交评价") }}
           </button>
         </div>
       </div>
       <div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
-        {{ TUITranslateService.t("Evaluate.服务评价工具") }}
+        {{ TUITranslateService.t('Evaluate.服务评价工具') }}
-        {{ "(" + TUITranslateService.t("Evaluate.使用") }}
+        {{ '(' + TUITranslateService.t('Evaluate.使用') }}
         <a @click="openLink(Link.customMessage)">
           {{ TUITranslateService.t(`Evaluate.${Link.customMessage.label}`) }}
         </a>
-        {{ TUITranslateService.t("Evaluate.搭建") + ")" }}
+        {{ TUITranslateService.t('Evaluate.搭建') + ')' }}
       </div>
     </div>
   </ToolbarItemContainer>
@@ -100,7 +56,7 @@ import TUIChatEngine, {
   IConversationModel,
   TUIChatService,
   SendMessageParams,
-  SendMessageOptions,
+  SendMessageOptions
 } from '@tencentcloud/chat-uikit-engine';
 import { ref, computed } from '../../../../adapter-vue';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';
@@ -120,8 +76,8 @@ const evaluateIcon = TUIChatConfig.getTheme() === 'dark' ? evaluateIconDark : ev
 const props = defineProps({
   starTotal: {
     type: Number,
-    default: 5,
+    default: 5
-  },
+  }
 });
 const emits = defineEmits(['onDialogPopupShowOrHide']);
 
@@ -135,7 +91,7 @@ const currentConversation = ref<IConversationModel>();
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation: IConversationModel) => {
     currentConversation.value = conversation;
-  },
+  }
 });
 
 const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);
@@ -182,26 +138,24 @@ const submitEvaluate = () => {
       businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
       version: 1,
       score: currentStarIndex.value + 1,
-      comment: comment.value,
+      comment: comment.value
     }),
     description: '对本次的服务评价',
-    extension: '对本次的服务评价',
+    extension: '对本次的服务评价'
   };
   const options = {
-    to:
+    to: currentConversation?.value?.groupProfile?.groupID || currentConversation?.value?.userProfile?.userID,
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
     conversationType: currentConversation?.value?.type,
     payload,
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+    needReadReceipt: isEnabledMessageReadReceiptGlobal()
   };
   const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
     conversation: currentConversation.value,
     payload: options.payload,
-    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
+    messageType: TUIChatEngine.TYPES.MSG_CUSTOM
   };
   const sendMessageOptions: SendMessageOptions = {
-    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams)
   };
   TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
   // close dialog after submit evaluate

src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.vue

@@ -8,14 +8,7 @@
     @onIconClick="onIconClick"
   >
     <div :class="['file-upload', !isPC && 'file-upload-h5']">
-      <input
+      <input ref="inputRef" title="文件" type="file" data-type="file" accept="*" @change="sendFileMessage" />
-        ref="inputRef"
-        title="文件"
-        type="file"
-        data-type="file"
-        accept="*"
-        @change="sendFileMessage"
-      >
     </div>
   </ToolbarItemContainer>
 </template>
@@ -26,7 +19,7 @@ import TUIChatEngine, {
   StoreName,
   IConversationModel,
   SendMessageParams,
-  SendMessageOptions,
+  SendMessageOptions
 } from '@tencentcloud/chat-uikit-engine';
 import { ref } from '../../../../adapter-vue';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';
@@ -44,7 +37,7 @@ const currentConversation = ref<IConversationModel>();
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation: IConversationModel) => {
     currentConversation.value = conversation;
-  },
+  }
 });
 
 const onIconClick = () => {
@@ -60,27 +53,25 @@ const sendFileMessage = (e: any) => {
     return;
   }
   const options = {
-    to:
+    to: currentConversation?.value?.groupProfile?.groupID || currentConversation?.value?.userProfile?.userID,
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
     conversationType: currentConversation?.value?.type,
     payload: {
-      file: e?.target,
+      file: e?.target
     },
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+    needReadReceipt: isEnabledMessageReadReceiptGlobal()
   } as SendMessageParams;
   const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
     conversation: currentConversation.value,
     payload: options.payload,
-    messageType: TUIChatEngine.TYPES.MSG_FILE,
+    messageType: TUIChatEngine.TYPES.MSG_FILE
   };
   const sendMessageOptions: SendMessageOptions = {
-    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams)
   };
   TUIChatService.sendFileMessage(options, sendMessageOptions);
   e.target.value = '';
 };
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 </style>

src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue

@@ -7,10 +7,7 @@
     :needDialog="false"
     @onIconClick="onIconClick"
   >
-    <div
+    <div v-if="!isUniFrameWork" :class="['image-upload', !isPC && 'image-upload-h5']">
-      v-if="!isUniFrameWork"
-      :class="['image-upload', !isPC && 'image-upload-h5']"
-    >
       <input
         ref="inputRef"
         title="图片"
@@ -18,7 +15,7 @@
         data-type="image"
         accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp,image/webp"
         @change="sendImageInWeb"
-      >
+      />
     </div>
   </ToolbarItemContainer>
 </template>
@@ -29,7 +26,7 @@ import TUIChatEngine, {
   StoreName,
   IConversationModel,
   SendMessageParams,
-  SendMessageOptions,
+  SendMessageOptions
 } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { ref, computed } from '../../../../adapter-vue';
@@ -49,8 +46,8 @@ const props = defineProps({
   // camera: Take a photo using the camera
   imageSourceType: {
     type: String,
-    default: 'album',
+    default: 'album'
-  },
+  }
 });
 
 const inputRef = ref();
@@ -59,29 +56,27 @@ const theme = TUIChatConfig.getTheme();
 const IMAGE_TOOLBAR_SHOW_MAP = {
   web_album: {
     icon: theme === 'dark' ? imageIconDark : imageIconLight,
-    title: '图片',
+    title: '图片'
   },
   uni_album: {
     icon: imageUniIcon,
-    title: '图片',
+    title: '图片'
   },
   uni_camera: {
     icon: cameraUniIcon,
-    title: '拍照',
+    title: '拍照'
-  },
+  }
 };
 
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation: IConversationModel) => {
     currentConversation.value = conversation;
-  },
+  }
 });
 
 const imageToolbarForShow = computed((): { icon: string; title: string } => {
   if (isUniFrameWork) {
-    return props.imageSourceType === 'camera'
+    return props.imageSourceType === 'camera' ? IMAGE_TOOLBAR_SHOW_MAP['uni_camera'] : IMAGE_TOOLBAR_SHOW_MAP['uni_album'];
-      ? IMAGE_TOOLBAR_SHOW_MAP['uni_camera']
-      : IMAGE_TOOLBAR_SHOW_MAP['uni_album'];
   } else {
     return IMAGE_TOOLBAR_SHOW_MAP['web_album'];
   }
@@ -98,7 +93,7 @@ const onIconClick = () => {
         sourceType: [props.imageSourceType], // Use camera or select from album.
         success: function (res: any) {
           sendImageMessage(res);
-        },
+        }
       });
     } else {
       // uni-app H5/App send image
@@ -107,7 +102,7 @@ const onIconClick = () => {
         sourceType: [props.imageSourceType], // Use camera or select from album.
         success: function (res) {
           sendImageMessage(res);
-        },
+        }
       });
     }
   } else {
@@ -130,27 +125,25 @@ const sendImageMessage = (files: any) => {
     return;
   }
   const options = {
-    to:
+    to: currentConversation?.value?.groupProfile?.groupID || currentConversation?.value?.userProfile?.userID,
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
     conversationType: currentConversation?.value?.type,
     payload: {
-      file: files,
+      file: files
     },
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+    needReadReceipt: isEnabledMessageReadReceiptGlobal()
   } as SendMessageParams;
   const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
     conversation: currentConversation.value,
     payload: options.payload,
-    messageType: TUIChatEngine.TYPES.MSG_IMAGE,
+    messageType: TUIChatEngine.TYPES.MSG_IMAGE
   };
   const sendMessageOptions: SendMessageOptions = {
-    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams)
   };
   TUIChatService.sendImageMessage(options, sendMessageOptions);
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 </style>

src/TUIKit/components/TUIChat/message-input-toolbar/index.vue

@@ -1,18 +1,6 @@
 <template>
-  <div
+  <div :class="['message-input-toolbar', !isPC && 'message-input-toolbar-h5', isUniFrameWork && 'message-input-toolbar-uni']">
-    :class="[
+    <div :class="['message-input-toolbar-list', !isPC && 'message-input-toolbar-h5-list', isUniFrameWork && 'message-input-toolbar-uni-list']">
-      'message-input-toolbar',
-      !isPC && 'message-input-toolbar-h5',
-      isUniFrameWork && 'message-input-toolbar-uni',
-    ]"
-  >
-    <div
-      :class="[
-        'message-input-toolbar-list',
-        !isPC && 'message-input-toolbar-h5-list',
-        isUniFrameWork && 'message-input-toolbar-uni-list',
-      ]"
-    >
       <EmojiPicker
         v-if="isRenderedEmojiPicker"
         ref="emojiPickerRef"
@@ -21,15 +9,9 @@
         @dialogCloseInH5="dialogCloseInH5"
         @changeToolbarDisplayType="(type) => emits('changeToolbarDisplayType', type)"
       />
-      <ImageUpload
+      <ImageUpload v-if="featureConfig.InputImage" imageSourceType="album" />
-        v-if="featureConfig.InputImage"
-        imageSourceType="album"
-      />
       <FileUpload v-if="featureConfig.InputFile" />
-      <VideoUpload
+      <VideoUpload v-if="featureConfig.InputVideo" videoSourceType="album" />
-        v-if="featureConfig.InputVideo"
-        videoSourceType="album"
-      />
       <Evaluate v-if="featureConfig.InputEvaluation" />
       <Words v-if="featureConfig.InputQuickReplies" />
       <template v-if="extensionListShowInStart[0]">
@@ -45,10 +27,7 @@
         />
       </template>
     </div>
-    <div
+    <div v-if="extensionListShowInEnd[0] && isPC" :class="['message-input-toolbar-list-end']">
-      v-if="extensionListShowInEnd[0] && isPC"
-      :class="['message-input-toolbar-list-end']"
-    >
       <ToolbarItemContainer
         v-for="(extension, index) in extensionListShowInEnd"
         :key="index"
@@ -68,21 +47,12 @@
       @submit="onUserSelectorSubmit"
       @cancel="onUserSelectorCancel"
     />
-    <div
+    <div v-if="isH5" ref="h5Dialog" :class="['message-input-toolbar-h5-dialog']" />
-      v-if="isH5"
-      ref="h5Dialog"
-      :class="['message-input-toolbar-h5-dialog']"
-    />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from '../../../adapter-vue';
-import TUIChatEngine, {
+import TUIChatEngine, { IConversationModel, TUIStore, StoreName, TUIReportService } from '@tencentcloud/chat-uikit-engine';
-  IConversationModel,
-  TUIStore,
-  StoreName,
-  TUIReportService,
-} from '@tencentcloud/chat-uikit-engine';
 import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
 import EmojiPicker from './emoji-picker/index.vue';
 import ImageUpload from './image-upload/index.vue';
@@ -103,10 +73,10 @@ interface IProps {
 interface IEmits {
   (e: 'scrollToLatestMessage'): void;
   (e: 'changeToolbarDisplayType', type: ToolbarDisplayType): void;
-  (e: 'insertEmoji', emoji: any): void
+  (e: 'insertEmoji', emoji: any): void;
 }
 const props = withDefaults(defineProps<IProps>(), {
-  displayType: 'none',
+  displayType: 'none'
 });
 
 const emits = defineEmits<IEmits>();
@@ -124,23 +94,26 @@ isRenderedEmojiPicker.value = featureConfig.InputEmoji || featureConfig.InputSti
 
 onMounted(() => {
   TUIStore.watch(StoreName.CUSTOM, {
-    activeConversation: onActiveConversationUpdate,
+    activeConversation: onActiveConversationUpdate
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CUSTOM, {
-    activeConversation: onActiveConversationUpdate,
+    activeConversation: onActiveConversationUpdate
   });
 });
 
-watch(() => props.displayType, (newValue) => {
+watch(
-  if (newValue === 'none') {
+  () => props.displayType,
-    emojiPickerRef.value?.closeEmojiPicker();
+  (newValue) => {
-  } else {
+    if (newValue === 'none') {
-    emits('scrollToLatestMessage');
+      emojiPickerRef.value?.closeEmojiPicker();
+    } else {
+      emits('scrollToLatestMessage');
+    }
   }
-});
+);
 
 const onActiveConversationUpdate = (conversationID: string) => {
   if (!conversationID) {
@@ -162,25 +135,25 @@ const getExtensionList = () => {
     params.filterVideo = true;
     enableSampleTaskStatus('customerService');
   }
-  currentExtensionList.value = [
+  currentExtensionList.value = [...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params)].filter(
-    ...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params),
+    (extension: ExtensionInfo) => {
-  ].filter((extension: ExtensionInfo) => {
+      if (extension?.data?.name === 'search') {
-    if (extension?.data?.name === 'search') {
+        return featureConfig.MessageSearch;
-      return featureConfig.MessageSearch;
+      }
+      return true;
     }
-    return true;
+  );
-  });
   reportExtension(currentExtensionList.value);
 };
 
-function reportExtension(extensionList:ExtensionInfo[]){
+function reportExtension(extensionList: ExtensionInfo[]) {
-  extensionList.forEach((extension: ExtensionInfo)=>{
+  extensionList.forEach((extension: ExtensionInfo) => {
     const _name = extension?.data?.name;
-    if(_name === 'voiceCall'){
+    if (_name === 'voiceCall') {
       TUIReportService.reportFeature(203, 'voice-call');
     } else if (_name === 'videoCall') {
       TUIReportService.reportFeature(203, 'video-call');
-    } else if(_name === 'quickRoom'){
+    } else if (_name === 'quickRoom') {
       TUIReportService.reportFeature(204);
     }
   });
@@ -196,7 +169,7 @@ const extensionListShowInStart = computed<ExtensionInfo[]>(() => {
 
 const extensionListShowInEnd = computed<ExtensionInfo[]>(() => {
   if (isPC) {
-    const searchExtension = currentExtensionList.value.find(extension => extension?.data?.name === 'search');
+    const searchExtension = currentExtensionList.value.find((extension) => extension?.data?.name === 'search');
     return searchExtension ? [searchExtension] : [];
   }
   return [];
@@ -222,7 +195,7 @@ const onCallExtensionClicked = (extension: ExtensionInfo, callType: number) => {
   if (currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_C2C) {
     extension.listener?.onClicked?.({
       userIDList: [currentConversation?.value?.conversationID?.slice(3)],
-      type: callType,
+      type: callType
     });
   } else if (isGroup.value) {
     currentUserSelectorExtension.value = extension;
@@ -268,7 +241,7 @@ const dialogCloseInH5 = (dialogDom: any) => {
 };
 </script>
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .message-input-toolbar {
   border-top: 1px solid #f4f5f9;

src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue

@@ -1,30 +1,9 @@
 <template>
-  <div
+  <div ref="toolbarItemRef" :class="['toolbar-item-container', !isPC && 'toolbar-item-container-h5', isUniFrameWork && 'toolbar-item-container-uni']">
-    ref="toolbarItemRef"
+    <div :class="['toolbar-item-container-icon', isUniFrameWork && 'toolbar-item-container-uni-icon']" @click="toggleToolbarItem">
-    :class="[
+      <Icon :file="props.iconFile" class="icon" :width="props.iconWidth" :height="props.iconHeight" />
-      'toolbar-item-container',
-      !isPC && 'toolbar-item-container-h5',
-      isUniFrameWork && 'toolbar-item-container-uni',
-    ]"
-  >
-    <div
-      :class="[
-        'toolbar-item-container-icon',
-        isUniFrameWork && 'toolbar-item-container-uni-icon',
-      ]"
-      @click="toggleToolbarItem"
-    >
-      <Icon
-        :file="props.iconFile"
-        class="icon"
-        :width="props.iconWidth"
-        :height="props.iconHeight"
-      />
     </div>
-    <div
+    <div v-if="isUniFrameWork" :class="['toolbar-item-container-uni-title']">
-      v-if="isUniFrameWork"
-      :class="['toolbar-item-container-uni-title']"
-    >
       {{ props.title }}
     </div>
     <div
@@ -34,7 +13,7 @@
         'toolbar-item-container-dialog',
         isDark && 'toolbar-item-container-dialog-dark',
         !isPC && 'toolbar-item-container-h5-dialog',
-        isUniFrameWork && 'toolbar-item-container-uni-dialog',
+        isUniFrameWork && 'toolbar-item-container-uni-dialog'
       ]"
     >
       <BottomPopup
@@ -61,30 +40,30 @@ import TUIChatConfig from '../../config';
 const props = defineProps({
   iconFile: {
     type: String,
-    required: true,
+    required: true
   },
   title: {
     type: String,
-    default: '',
+    default: ''
   },
   needDialog: {
     type: Boolean,
-    default: true,
+    default: true
   },
   iconWidth: {
     type: String,
-    default: '20px',
+    default: '20px'
   },
   iconHeight: {
     type: String,
-    default: '20px',
+    default: '20px'
   },
   // Whether to display the bottom popup dialog on mobile devices
   // Invalid on PC
   needBottomPopup: {
     type: Boolean,
-    default: false,
+    default: false
-  },
+  }
 });
 
 const emits = defineEmits(['onIconClick', 'onDialogClose', 'onDialogShow']);
@@ -99,7 +78,7 @@ const toggleToolbarItem = () => {
   if (isPC) {
     outsideClick.listen({
       domRefs: toolbarItemRef.value,
-      handler: closeToolbarItem,
+      handler: closeToolbarItem
     });
   }
   if (!props.needDialog) {
@@ -132,7 +111,7 @@ const onPopupClose = () => {
 };
 
 defineExpose({
-  toggleDialogDisplay,
+  toggleDialogDisplay
 });
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue

@@ -1,12 +1,5 @@
 <template>
-  <Dialog
+  <Dialog :show="show" :isH5="!isPC" :isHeaderShow="false" :isFooterShow="false" :background="false" @update:show="toggleShow">
-    :show="show"
-    :isH5="!isPC"
-    :isHeaderShow="false"
-    :isFooterShow="false"
-    :background="false"
-    @update:show="toggleShow"
-  >
     <Transfer
       :isSearch="true"
       :title="title"
@@ -20,10 +13,7 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import {
+import { TUIGroupService, TUIUserService } from '@tencentcloud/chat-uikit-engine';
-  TUIGroupService,
-  TUIUserService,
-} from '@tencentcloud/chat-uikit-engine';
 import { ref, computed, watch } from '../../../../adapter-vue';
 import Dialog from '../../../common/Dialog/index.vue';
 import Transfer from '../../../common/Transfer/index.vue';
@@ -33,16 +23,16 @@ const props = defineProps({
   // type: voiceCall/groupCall/...
   type: {
     type: String,
-    default: '',
+    default: ''
   },
   currentConversation: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
   },
   isGroup: {
     type: Boolean,
-    default: false,
+    default: false
-  },
+  }
 });
 const emits = defineEmits(['submit', 'cancel']);
 const show = ref<boolean>(false);
@@ -52,7 +42,7 @@ const searchMemberList = ref<any[]>([]);
 const selfUserID = ref<string>('');
 const titleMap: any = {
   voiceCall: '发起群语音',
-  videoCall: '发起群视频',
+  videoCall: '发起群视频'
 };
 const title = computed(() => {
   return titleMap[props.type] ? titleMap[props.type] : '';
@@ -71,11 +61,9 @@ watch(
       if (props.isGroup && show.value) {
         groupID.value = props.currentConversation.groupProfile.groupID;
         TUIGroupService.getGroupMemberList({
-          groupID: groupID.value,
+          groupID: groupID.value
         }).then((res: any) => {
-          memberList.value = res?.data?.memberList?.filter(
+          memberList.value = res?.data?.memberList?.filter((user: any) => user?.userID !== selfUserID.value);
-            (user: any) => user?.userID !== selfUserID.value,
-          );
           searchMemberList.value = memberList.value;
         });
       } else {
@@ -86,14 +74,12 @@ watch(
     }
   },
   {
-    immediate: true,
+    immediate: true
-  },
+  }
 );
 
 const search = (searchInfo: string) => {
-  const results = memberList.value?.filter(
+  const results = memberList.value?.filter((member: any) => member?.userID === searchInfo);
-    (member: any) => member?.userID === searchInfo,
-  );
   searchMemberList.value = results?.length ? results : memberList.value;
 };
 
@@ -122,6 +108,6 @@ const toggleShow = (showStatus: boolean) => {
 };
 
 defineExpose({
-  toggleShow,
+  toggleShow
 });
 </script>

src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.vue

@@ -4,23 +4,11 @@
     :title="handleTitle()"
     :needDialog="false"
     :iconWidth="isUniFrameWork ? '32px' : '20px'"
-    :iconHeight="isUniFrameWork
+    :iconHeight="isUniFrameWork ? (props.videoSourceType === 'album' ? '20px' : '25px') : '18px'"
-      ? props.videoSourceType === 'album'
-        ? '20px'
-        : '25px'
-      : '18px'
-    "
     @onIconClick="onIconClick"
   >
     <div :class="['video-upload', !isPC && 'video-upload-h5']">
-      <input
+      <input ref="inputRef" title="视频" type="file" data-type="video" accept="video/*" @change="sendVideoInWeb" />
-        ref="inputRef"
-        title="视频"
-        type="file"
-        data-type="video"
-        accept="video/*"
-        @change="sendVideoInWeb"
-      >
     </div>
   </ToolbarItemContainer>
 </template>
@@ -31,7 +19,7 @@ import TUIChatEngine, {
   StoreName,
   IConversationModel,
   SendMessageParams,
-  SendMessageOptions,
+  SendMessageOptions
 } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { ref } from '../../../../adapter-vue';
@@ -51,8 +39,8 @@ const props = defineProps({
   // camera: Take a video using the camera
   videoSourceType: {
     type: String,
-    default: 'album',
+    default: 'album'
-  },
+  }
 });
 
 const inputRef = ref();
@@ -61,7 +49,7 @@ const currentConversation = ref<IConversationModel>();
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation: IConversationModel) => {
     currentConversation.value = conversation;
-  },
+  }
 });
 
 const handleIcon = (): string => {
@@ -99,7 +87,7 @@ const onIconClick = () => {
         maxDuration: 60,
         success: function (res: any) {
           sendVideoMessage(res);
-        },
+        }
       });
     } else {
       TUIGlobal?.chooseVideo({
@@ -108,7 +96,7 @@ const onIconClick = () => {
         compressed: false,
         success: function (res: any) {
           sendVideoMessage(res);
-        },
+        }
       });
     }
   } else {
@@ -129,27 +117,25 @@ const sendVideoMessage = (file: any) => {
     return;
   }
   const options = {
-    to:
+    to: currentConversation?.value?.groupProfile?.groupID || currentConversation?.value?.userProfile?.userID,
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
     conversationType: currentConversation?.value?.type,
     payload: {
-      file,
+      file
     },
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+    needReadReceipt: isEnabledMessageReadReceiptGlobal()
   } as SendMessageParams;
   const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
     conversation: currentConversation.value,
     payload: options.payload,
-    messageType: TUIChatEngine.TYPES.MSG_VIDEO,
+    messageType: TUIChatEngine.TYPES.MSG_VIDEO
   };
   const sendMessageOptions: SendMessageOptions = {
-    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams)
   };
   TUIChatService.sendVideoMessage(options, sendMessageOptions);
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 </style>

src/TUIKit/components/TUIChat/message-input-toolbar/words/index.ts

@@ -1,2 +1,2 @@
-import Words from "./index.vue";
+import Words from './index.vue';
 export default Words;

src/TUIKit/components/TUIChat/message-input-toolbar/words/index.vue

@@ -12,23 +12,12 @@
     <div :class="['words', !isPC && 'words-h5']">
       <div :class="['words-header', !isPC && 'words-h5-header']">
         <span :class="['words-header-title', !isPC && 'words-h5-header-title']">
-          {{ TUITranslateService.t("Words.常用语-快捷回复工具") }}
+          {{ TUITranslateService.t('Words.常用语-快捷回复工具') }}
-        </span>
-        <span
-          v-if="!isPC"
-          :class="['words-header-close', !isPC && 'words-h5-header-close']"
-          @click="closeDialog"
-        >
-          关闭
         </span>
+        <span v-if="!isPC" :class="['words-header-close', !isPC && 'words-h5-header-close']" @click="closeDialog"> 关闭 </span>
       </div>
       <ul :class="['words-list', !isPC && 'words-h5-list']">
-        <li
+        <li v-for="(item, index) in wordsList" :key="index" :class="['words-list-item', !isPC && 'words-h5-list-item']" @click="selectWord(item)">
-          v-for="(item, index) in wordsList"
-          :key="index"
-          :class="['words-list-item', !isPC && 'words-h5-list-item']"
-          @click="selectWord(item)"
-        >
           {{ TUITranslateService.t(`Words.${item.value}`) }}
         </li>
       </ul>
@@ -36,14 +25,7 @@
   </ToolbarItemContainer>
 </template>
 <script setup lang="ts">
-import {
+import { TUITranslateService, TUIStore, StoreName, IConversationModel, SendMessageParams, TUIChatService } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-  TUIStore,
-  StoreName,
-  IConversationModel,
-  SendMessageParams,
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
 import { ref } from '../../../../adapter-vue';
 import ToolbarItemContainer from '../toolbar-item-container/index.vue';
 import wordsIconLight from '../../../../assets/icon/words-light.svg';
@@ -61,19 +43,17 @@ const container = ref();
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation: IConversationModel) => {
     currentConversation.value = conversation;
-  },
+  }
 });
 
 const selectWord = (item: any) => {
   const options = {
-    to:
+    to: currentConversation?.value?.groupProfile?.groupID || currentConversation?.value?.userProfile?.userID,
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
     conversationType: currentConversation?.value?.type,
     payload: {
-      text: TUITranslateService.t(`Words.${item.value}`),
+      text: TUITranslateService.t(`Words.${item.value}`)
     },
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+    needReadReceipt: isEnabledMessageReadReceiptGlobal()
   } as SendMessageParams;
   TUIChatService.sendTextMessage(options);
   // close dialog after submit evaluate

src/TUIKit/components/TUIChat/message-input/index.vue

@@ -14,27 +14,15 @@
         @onTyping="onTyping"
         @onAt="onAt"
       />
-      <MessageInputButton
+      <MessageInputButton v-if="!props.isMuted" @sendMessage="sendMessage" />
-        v-if="!props.isMuted"
+      <MessageInputAt v-if="props.enableAt" ref="messageInputAtRef" @insertAt="insertAt" @onAtListOpen="onAtListOpen" />
-        @sendMessage="sendMessage"
-      />
-      <MessageInputAt
-        v-if="props.enableAt"
-        ref="messageInputAtRef"
-        @insertAt="insertAt"
-        @onAtListOpen="onAtListOpen"
-      />
     </div>
     <MessageInputQuote />
   </div>
 </template>
 
 <script setup lang="ts">
-import {
+import { TUIStore, StoreName, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine';
 import { ref } from '../../../adapter-vue';
 import MessageInputEditor from './message-input-editor.vue';
 import MessageInputAt from './message-input-at/index.vue';
@@ -47,32 +35,32 @@ import { isPC, isH5 } from '../../../utils/env';
 const props = defineProps({
   placeholder: {
     type: String,
-    default: 'this is placeholder',
+    default: 'this is placeholder'
   },
   isMuted: {
     type: Boolean,
-    default: true,
+    default: true
   },
   muteText: {
     type: String,
-    default: '',
+    default: ''
   },
   enableInput: {
     type: Boolean,
-    default: true,
+    default: true
   },
   enableAt: {
     type: Boolean,
-    default: true,
+    default: true
   },
   enableDragUpload: {
     type: Boolean,
-    default: true,
+    default: true
   },
   enableTyping: {
     type: Boolean,
-    default: true,
+    default: true
-  },
+  }
 });
 
 const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping']);
@@ -83,7 +71,7 @@ const currentConversation = ref<IConversationModel>();
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation: IConversationModel) => {
     currentConversation.value = conversation;
-  },
+  }
 });
 
 const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
@@ -103,10 +91,7 @@ const sendMessage = async () => {
     }
     return editor;
   });
-  await sendMessages(
+  await sendMessages(editorContentList, currentConversation.value);
-    editorContentList,
-    currentConversation.value,
-  );
   emit('sendMessage');
   editor.value?.resetEditor();
 };
@@ -132,12 +117,12 @@ const reEdit = (content: any) => {
 
 defineExpose({
   insertEmoji,
-  reEdit,
+  reEdit
 });
 </script>
 
 <style scoped lang="scss">
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .message-input-wrapper {
   box-sizing: border-box;

src/TUIKit/components/TUIChat/message-input/message-input-at/index.ts

@@ -1,8 +1,5 @@
 import { SuggestionProps, SuggestionKeyDownProps } from '@tiptap/suggestion';
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { isH5 } from '../../../../utils/env';
 
@@ -13,17 +10,13 @@ let showMemberList: any[] = [];
 let selectedIndex: number = 0;
 let isGroup = false;
 let command:
-  | ((props: {
+  | ((props: { id?: string | undefined; userID?: string | undefined; isAll?: boolean | undefined }) => void)
-    id?: string | undefined;
-    userID?: string | undefined;
-    isAll?: boolean | undefined;
-  }) => void)
   | ((arg0: { id: any; label: any }) => any);
 const all = {
   userID: TUIChatEngine.TYPES.MSG_AT_ALL,
   nick: '所有人',
   isAll: true,
-  avatar: 'https://web.sdk.qcloud.com/im/assets/images/at.svg',
+  avatar: 'https://web.sdk.qcloud.com/im/assets/images/at.svg'
 };
 
 TUIStore.watch(StoreName.CONV, {
@@ -40,7 +33,7 @@ TUIStore.watch(StoreName.CONV, {
         showMemberList = [];
       }
     }
-  },
+  }
 });
 
 TUIStore.watch(StoreName.CUSTOM, {
@@ -50,7 +43,7 @@ TUIStore.watch(StoreName.CUSTOM, {
       allMemberList = [all, ...memberList];
       showMemberList = allMemberList;
     }
-  },
+  }
 });
 
 const MessageInputAtSuggestion = () => {
@@ -62,8 +55,7 @@ const MessageInputAtSuggestion = () => {
       }
       const queryResult = allMemberList?.filter(
         (item: { nick: string; userID: string }) =>
-          item?.nick?.toLowerCase()?.startsWith(props?.query?.toLowerCase())
+          item?.nick?.toLowerCase()?.startsWith(props?.query?.toLowerCase()) || item?.userID?.toLowerCase()?.startsWith(props?.query?.toLowerCase())
-          || item?.userID?.toLowerCase()?.startsWith(props?.query?.toLowerCase()),
       );
       showMemberList = queryResult?.length ? queryResult : allMemberList;
       TUIGlobal.setShowMemberList(showMemberList);
@@ -76,7 +68,7 @@ const MessageInputAtSuggestion = () => {
             id?: string;
             userID?: string;
             isAll?: boolean;
-          }>,
+          }>
         ) => {
           if (!isGroup) {
             return;
@@ -89,7 +81,7 @@ const MessageInputAtSuggestion = () => {
           if (rect?.left && rect?.top && !isH5) {
             TUIGlobal.handleAtListPosition({
               left: rect?.left,
-              top: rect?.top,
+              top: rect?.top
             });
           }
           command = props.command;
@@ -106,7 +98,7 @@ const MessageInputAtSuggestion = () => {
           if (rect?.left && rect?.top && !isH5) {
             TUIGlobal.handleAtListPosition({
               left: rect?.left,
-              top: rect?.top,
+              top: rect?.top
             });
           }
         },
@@ -147,18 +139,17 @@ const MessageInputAtSuggestion = () => {
           showMemberList = allMemberList;
           TUIGlobal.handleAtListPosition({
             left: 0,
-            top: 0,
+            top: 0
           });
-        },
+        }
       };
-    },
+    }
   };
 };
 
 const upHandler = () => {
   if (!showMemberList?.length) return;
-  selectedIndex
+  selectedIndex = (selectedIndex + showMemberList?.length - 1) % showMemberList?.length;
-    = (selectedIndex + showMemberList?.length - 1) % showMemberList?.length;
   TUIGlobal.setCurrentSelectIndex(selectedIndex);
 };
 
@@ -176,11 +167,11 @@ const selectItem = (index: number) => {
   if (!showMemberList?.length) return;
   const item = showMemberList[index];
   if (item) {
-    command
+    command &&
-    && command({
+      command({
-      id: (item as any)?.userID,
+        id: (item as any)?.userID,
-      label: (item as any)?.nick || (item as any)?.userID,
+        label: (item as any)?.nick || (item as any)?.userID
-    });
+      });
   }
 };
 TUIGlobal.selectItem = selectItem;

src/TUIKit/components/TUIChat/message-input/message-input-at/index.vue

@@ -1,23 +1,9 @@
 <template>
-  <BottomPopup
+  <BottomPopup :show="showAtList" @onClose="closeAt">
-    :show="showAtList"
+    <div ref="MessageInputAt" :class="[isPC ? 'message-input-at' : 'message-input-at-h5']">
-    @onClose="closeAt"
+      <div ref="dialog" class="member-list">
-  >
+        <header v-if="!isPC" class="member-list-title">
-    <div
+          <span class="title">{{ TUITranslateService.t('TUIChat.选择提醒的人') }}</span>
-      ref="MessageInputAt"
-      :class="[isPC ? 'message-input-at' : 'message-input-at-h5']"
-    >
-      <div
-        ref="dialog"
-        class="member-list"
-      >
-        <header
-          v-if="!isPC"
-          class="member-list-title"
-        >
-          <span class="title">{{
-            TUITranslateService.t("TUIChat.选择提醒的人")
-          }}</span>
         </header>
         <ul class="member-list-box">
           <li
@@ -28,10 +14,7 @@
             :class="[index === selectedIndex && 'selected']"
             @click="selectItem(index)"
           >
-            <img
+            <img class="member-list-box-body-avatar" :src="handleMemberAvatar(item)" />
-              class="member-list-box-body-avatar"
-              :src="handleMemberAvatar(item)"
-            >
             <span class="member-list-box-body-name">
               {{ handleMemberName(item) }}
             </span>
@@ -42,12 +25,7 @@
   </BottomPopup>
 </template>
 <script lang="ts" setup>
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName, TUIGroupService, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  TUIGroupService,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { ref, watch } from '../../../../adapter-vue';
 import { isPC, isH5 } from '../../../../utils/env';
@@ -65,7 +43,7 @@ const showMemberList = ref<Array<any>>();
 const isGroup = ref(false);
 const position = ref({
   left: 0,
-  top: 0,
+  top: 0
 });
 const selectedIndex = ref(0);
 const currentConversationID = ref('');
@@ -74,7 +52,7 @@ const all = {
   userID: TUIChatEngine.TYPES.MSG_AT_ALL,
   nick: '所有人',
   isAll: true,
-  avatar: 'https://web.sdk.qcloud.com/im/assets/images/at.svg',
+  avatar: 'https://web.sdk.qcloud.com/im/assets/images/at.svg'
 };
 
 TUIStore.watch(StoreName.CONV, {
@@ -94,7 +72,7 @@ TUIStore.watch(StoreName.CONV, {
         TUIGroupService.switchGroup('');
       }
     }
-  },
+  }
 });
 
 TUIStore.watch(StoreName.GRP, {
@@ -103,7 +81,7 @@ TUIStore.watch(StoreName.GRP, {
     allMemberList.value = [all, ...memberList.value];
     showMemberList.value = allMemberList.value;
     TUIStore.update(StoreName.CUSTOM, 'memberList', memberList.value);
-  },
+  }
 });
 
 const toggleAtList = (show: boolean) => {
@@ -132,7 +110,7 @@ TUIGlobal.setCurrentSelectIndex = setCurrentSelectIndex;
 TUIGlobal.setShowMemberList = setShowMemberList;
 
 defineExpose({
-  toggleAtList,
+  toggleAtList
 });
 
 watch(
@@ -142,9 +120,8 @@ watch(
       return;
     }
     MessageInputAt.value.style.left = position.value.left + 'px';
-    MessageInputAt.value.style.top
+    MessageInputAt.value.style.top = position.value.top - MessageInputAt.value.clientHeight + 'px';
-      = position.value.top - MessageInputAt.value.clientHeight + 'px';
+  }
-  },
 );
 
 const closeAt = () => {
@@ -152,7 +129,7 @@ const closeAt = () => {
   showMemberList.value = allMemberList.value;
   position.value = {
     left: 0,
-    top: 0,
+    top: 0
   };
 };
 
@@ -164,7 +141,7 @@ const selectItem = (index: number) => {
       const item = showMemberList?.value[index];
       emits('insertAt', {
         id: (item as any)?.userID,
-        label: (item as any)?.nick || (item as any)?.userID,
+        label: (item as any)?.nick || (item as any)?.userID
       });
     }
   }
@@ -172,10 +149,7 @@ const selectItem = (index: number) => {
 };
 
 const handleMemberAvatar = (item: any) => {
-  return (
+  return (item as any)?.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png';
-    (item as any)?.avatar
-    || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-  );
 };
 
 const handleMemberName = (item: any) => {
@@ -183,7 +157,7 @@ const handleMemberName = (item: any) => {
 };
 </script>
 <style scoped lang="scss">
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .message-input-at {
   position: fixed;
@@ -191,7 +165,7 @@ const handleMemberName = (item: any) => {
   max-height: 10rem;
   overflow: hidden auto;
   background: #fff;
-  box-shadow: 0 0.06rem 0.63rem 0 rgba(2,16,43,0.15);
+  box-shadow: 0 0.06rem 0.63rem 0 rgba(2, 16, 43, 0.15);
   border-radius: 0.13rem;
 }
 
@@ -202,7 +176,7 @@ const handleMemberName = (item: any) => {
     cursor: pointer;
 
     &:hover {
-      background: rgba(0,110,255,0.1);
+      background: rgba(0, 110, 255, 0.1);
     }
   }
 
@@ -223,7 +197,7 @@ const handleMemberName = (item: any) => {
 
     .selected,
     &:hover {
-      background: rgba(0,110,255,0.1);
+      background: rgba(0, 110, 255, 0.1);
     }
 
     &-name {
@@ -242,7 +216,7 @@ const handleMemberName = (item: any) => {
   }
 
   .selected {
-    background: rgba(0,110,255,0.1);
+    background: rgba(0, 110, 255, 0.1);
   }
 }
 

src/TUIKit/components/TUIChat/message-input/message-input-button.vue

@@ -1,19 +1,10 @@
 <template>
   <div :class="['message-input-button', !isPC && 'message-input-button-h5']">
-    <button
+    <button v-if="props.enableSend" class="message-input-button-cont" data-type="text" :disabled="false" @click="sendMessage">
-      v-if="props.enableSend"
+      <p v-if="displayHover" class="message-input-button-hover">
-      class="message-input-button-cont"
+        {{ TUITranslateService.t('TUIChat.按Enter发送，Ctrl+Enter换行') }}
-      data-type="text"
-      :disabled="false"
-      @click="sendMessage"
-    >
-      <p
-        v-if="displayHover"
-        class="message-input-button-hover"
-      >
-        {{ TUITranslateService.t("TUIChat.按Enter发送，Ctrl+Enter换行") }}
       </p>
-      {{ TUITranslateService.t("发送") }}
+      {{ TUITranslateService.t('发送') }}
     </button>
   </div>
 </template>
@@ -27,8 +18,8 @@ import TUIChatConfig from '../config';
 const props = defineProps({
   enableSend: {
     type: Boolean,
-    default: true,
+    default: true
-  },
+  }
 });
 
 const displayHover = ref(TUIChatConfig.getChatType() !== TUIConstants.TUIChat.TYPE.ROOM);
@@ -40,7 +31,7 @@ const sendMessage = () => {
 };
 </script>
 <style scoped lang="scss">
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .message-input-button {
   position: absolute;
@@ -84,7 +75,7 @@ const sendMessage = () => {
     opacity: 0.3;
 
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       width: 0;
       height: 0;

src/TUIKit/components/TUIChat/message-input/message-input-editor.vue

@@ -1,11 +1,6 @@
 <template>
-  <div
+  <div :class="['message-input-editor-container', isH5 && 'message-input-editor-container-h5']">
-    :class="['message-input-editor-container', isH5 && 'message-input-editor-container-h5']"
+    <div v-if="isMuted" class="message-input-mute">
-  >
-    <div
-      v-if="isMuted"
-      class="message-input-mute"
-    >
       {{ muteText }}
     </div>
     <div
@@ -24,11 +19,7 @@
 </template>
 <script setup lang="ts">
 import { toRefs, ref, onMounted, watch, onUnmounted } from '../../../adapter-vue';
-import {
+import { TUIStore, StoreName, IMessageModel } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine';
 import { Editor, JSONContent, Extension } from '@tiptap/core';
 import Document from '@tiptap/extension-document';
 import Paragraph from '@tiptap/extension-paragraph';
@@ -47,36 +38,36 @@ import DraftManager from '../utils/conversationDraft';
 const props = defineProps({
   placeholder: {
     type: String,
-    default: 'this is placeholder',
+    default: 'this is placeholder'
   },
   replayOrReferenceMessage: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
   },
   isMuted: {
     type: Boolean,
-    default: true,
+    default: true
   },
   muteText: {
     type: String,
-    default: '',
+    default: ''
   },
   enableInput: {
     type: Boolean,
-    default: true,
+    default: true
   },
   enableAt: {
     type: Boolean,
-    default: true,
+    default: true
   },
   enableDragUpload: {
     type: Boolean,
-    default: true,
+    default: true
   },
   enableTyping: {
     type: Boolean,
-    default: true,
+    default: true
-  },
+  }
 });
 
 const emits = defineEmits(['sendMessage', 'onTyping', 'onAt']);
@@ -92,9 +83,9 @@ const fileMap = new Map<string, any>();
 const DisableDefaultEnter = Extension.create({
   addKeyboardShortcuts() {
     return {
-      Enter: () => true,
+      Enter: () => true
     };
-  },
+  }
 });
 
 function onCurrentConversationIDUpdated(conversationID: string) {
@@ -104,7 +95,7 @@ function onCurrentConversationIDUpdated(conversationID: string) {
         currentConversationID.value,
         getEditorHTML(),
         DraftManager.generateAbstract(getEditorContent()),
-        currentQuoteMessage.value,
+        currentQuoteMessage.value
       );
     }
     resetEditor();
@@ -122,94 +113,90 @@ function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string
 onMounted(() => {
   editor = isPC
     ? new Editor({
-      element: editorDom.value,
+        element: editorDom.value,
-      extensions: [
+        extensions: [
-        Document,
+          Document,
-        Paragraph,
+          Paragraph,
-        Text,
+          Text,
-        HardBreak,
+          HardBreak,
-        DisableDefaultEnter,
+          DisableDefaultEnter,
-        Placeholder.configure({
+          Placeholder.configure({
-          emptyEditorClass: 'is-editor-empty',
+            emptyEditorClass: 'is-editor-empty',
-          placeholder: placeholder.value,
+            placeholder: placeholder.value
-        }),
+          }),
-        Mention.configure({
+          Mention.configure({
-          HTMLAttributes: {
+            HTMLAttributes: {
-            class: 'mention',
+              class: 'mention'
-          },
+            },
-          suggestion: enableAt.value && (MessageInputAtSuggestion() as any),
+            suggestion: enableAt.value && (MessageInputAtSuggestion() as any)
-        }),
+          }),
-        CustomImage.configure({
+          CustomImage.configure({
-          inline: true,
+            inline: true,
-          allowBase64: true,
+            allowBase64: true
-        }),
+          })
-      ],
+        ],
-      autofocus: !isH5,
+        autofocus: !isH5,
-      editable: true,
+        editable: true,
-      injectCSS: false,
+        injectCSS: false,
-      editorProps: {
+        editorProps: {
-        handlePaste() {
+          handlePaste() {
-          // prevent editor's default paste for resolve emoji & marked down line break
+            // prevent editor's default paste for resolve emoji & marked down line break
-          return true;
+            return true;
+          }
         },
-      },
+        // handle input editor typing (only in C2C and enable typing)
-      // handle input editor typing (only in C2C and enable typing)
+        onUpdate({ editor, transaction }) {
-      onUpdate({ editor, transaction }) {
+          if (!enableTyping.value || !isC2C.value) return;
-        if (!enableTyping.value || !isC2C.value) return;
+          isEditorBlur.value = !editor.isFocused;
-        isEditorBlur.value = !editor.isFocused;
+          if (transaction?.doc?.content?.size > 2) {
-        if (transaction?.doc?.content?.size > 2) {
+            isEditorEmpty.value = false;
-          isEditorEmpty.value = false;
+          } else {
-        } else {
+            isEditorEmpty.value = true;
-          isEditorEmpty.value = true;
+          }
+        },
+        onFocus() {
+          if (isH5 && document?.getElementById('app')?.style) {
+            // set app height when keyboard popup
+            const keyboardHeight = document.body.scrollHeight - window.innerHeight;
+            (document.getElementById('app') as any).style.marginBottom = `${keyboardHeight}px`;
+            (document.getElementById('app') as any).style.height = `calc(100% - ${keyboardHeight}px)`;
+          }
+          if (!enableTyping.value || !isC2C.value) return;
+          isEditorBlur.value = true;
+        },
+        onBlur() {
+          if (isH5 && document?.getElementById('app')?.style) {
+            // reset app height to normal
+            (document.getElementById('app') as any).style.marginBottom = ``;
+            (document.getElementById('app') as any).style.height = `100%`;
+          }
+          if (!enableTyping.value || !isC2C.value) return;
+          isEditorBlur.value = true;
         }
-      },
+      })
-      onFocus() {
-        if (isH5 && document?.getElementById('app')?.style) {
-          // set app height when keyboard popup
-          const keyboardHeight = document.body.scrollHeight - window.innerHeight;
-          (
-            document.getElementById('app') as any
-          ).style.marginBottom = `${keyboardHeight}px`;
-          (
-            document.getElementById('app') as any
-          ).style.height = `calc(100% - ${keyboardHeight}px)`;
-        }
-        if (!enableTyping.value || !isC2C.value) return;
-        isEditorBlur.value = true;
-      },
-      onBlur() {
-        if (isH5 && document?.getElementById('app')?.style) {
-          // reset app height to normal
-          (document.getElementById('app') as any).style.marginBottom = ``;
-          (document.getElementById('app') as any).style.height = `100%`;
-        }
-        if (!enableTyping.value || !isC2C.value) return;
-        isEditorBlur.value = true;
-      },
-    })
     : null;
 
   if (isH5) {
-    const targetBottomDom = document.querySelector('.message-input-toolbar') as HTMLElement || editorDom.value;
+    const targetBottomDom = (document.querySelector('.message-input-toolbar') as HTMLElement) || editorDom.value;
     riseInput(editorDom.value, targetBottomDom);
   }
 
   TUIStore.watch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdated,
+    currentConversationID: onCurrentConversationIDUpdated
   });
 
   TUIStore.watch(StoreName.CHAT, {
-    quoteMessage: onQuoteMessageUpdated,
+    quoteMessage: onQuoteMessageUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdated,
+    currentConversationID: onCurrentConversationIDUpdated
   });
 
   TUIStore.unwatch(StoreName.CHAT, {
-    quoteMessage: onQuoteMessageUpdated,
+    quoteMessage: onQuoteMessageUpdated
   });
 
   // clear map store
@@ -289,25 +276,19 @@ async function handleFileDropOrPaste(e: any, type: string) {
   if (!enableDragUpload.value && type === 'drop') {
     return;
   }
-  if (
+  if ((type === 'drop' && e.dataTransfer) || (type === 'paste' && e.clipboardData)) {
-    (type === 'drop' && e.dataTransfer)
+    const files = type === 'drop' ? e?.dataTransfer?.files : e?.clipboardData?.files;
-    || (type === 'paste' && e.clipboardData)
-  ) {
-    const files
-      = type === 'drop' ? e?.dataTransfer?.files : e?.clipboardData?.files;
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
       const isImage = file.type.startsWith('image/');
-      const fileSrc = isImage
+      const fileSrc = isImage ? URL.createObjectURL(file) : await drawFileCanvasToImageUrl(file);
-        ? URL.createObjectURL(file)
-        : await drawFileCanvasToImageUrl(file);
       editor?.commands?.insertContent({
         type: 'custom-image',
         attrs: {
           src: fileSrc,
           alt: file?.name,
-          class: isImage ? 'normal' : 'file',
+          class: isImage ? 'normal' : 'file'
-        },
+        }
       });
       fileMap.set(fileSrc, file);
       if (i === files.length - 1) {
@@ -324,7 +305,7 @@ async function handleFileDropOrPaste(e: any, type: string) {
  * create file icon image
  * To avoid creating img dom with the same icon repeatedly, record the previous type of icon that has been created.
  * The format of the record is map<icon type, img dom>.
-*/
+ */
 const fileIconDomMap = new Map<string, HTMLImageElement>();
 const addImageProcess = (src: string, type: string) => {
   return new Promise((resolve, reject) => {
@@ -375,18 +356,7 @@ const drawFileCanvasToImageUrl = async (file: any) => {
 
 const handleFileIconForShow = (type: string) => {
   const urlBase = 'https://web.sdk.qcloud.com/component/TUIKit/assets/file-';
-  const fileTypes = [
+  const fileTypes = ['image', 'pdf', 'text', 'ppt', 'presentation', 'sheet', 'zip', 'word', 'video', 'unknown'];
-    'image',
-    'pdf',
-    'text',
-    'ppt',
-    'presentation',
-    'sheet',
-    'zip',
-    'word',
-    'video',
-    'unknown',
-  ];
   let url = '';
   let iconType = '';
   fileTypes.forEach((typeName: string) => {
@@ -397,7 +367,7 @@ const handleFileIconForShow = (type: string) => {
   });
   return {
     iconSrc: url ? url : urlBase + 'unknown.svg',
-    iconType: iconType ? iconType : 'unknown',
+    iconType: iconType ? iconType : 'unknown'
   };
 };
 
@@ -431,16 +401,13 @@ function parsePCEditorContent(): ITipTapEditorContent[] {
   const content: ITipTapEditorContent[] = [];
   handleEditorContent(editorJSON, content);
   if (
-    content.length > 0
+    content.length > 0 &&
-    && content[content.length - 1]
+    content[content.length - 1] &&
-    && content[content.length - 1].type === 'text'
+    content[content.length - 1].type === 'text' &&
-    && content[content.length - 1].payload?.text?.endsWith('\n')
+    content[content.length - 1].payload?.text?.endsWith('\n')
   ) {
     const text = content[content.length - 1].payload.text || '';
-    content[content.length - 1].payload.text = text?.substring(
+    content[content.length - 1].payload.text = text?.substring(0, text.lastIndexOf('\n'));
-      0,
-      text.lastIndexOf('\n'),
-    );
   }
   return content;
 }
@@ -449,11 +416,7 @@ function handleEditorContent(root: JSONContent, content: ITipTapEditorContent[])
   if (!root || !root.type) {
     return;
   }
-  if (
+  if (root.type !== 'text' && root.type !== 'custom-image' && root.type !== 'mention') {
-    root.type !== 'text'
-    && root.type !== 'custom-image'
-    && root.type !== 'mention'
-  ) {
     if (root.type === 'paragraph' || root.type === 'hardBreak') {
       handleEditorNode(root, content);
     }
@@ -471,69 +434,49 @@ function handleEditorContent(root: JSONContent, content: ITipTapEditorContent[])
 function handleEditorNode(node: JSONContent, content: ITipTapEditorContent[]) {
   // handle enter
   if (node.type === 'hardBreak') {
-    if (content.length > 0
+    if (content.length > 0 && content[content.length - 1] && content[content.length - 1]?.type === 'text') {
-      && content[content.length - 1]
-      && content[content.length - 1]?.type === 'text'
-    ) {
       content[content.length - 1].payload.text += '\n';
     } else {
       content.push({
         type: 'text',
-        payload: { text: '\n' },
+        payload: { text: '\n' }
       });
     }
   } else if (node.type === 'paragraph') {
-    if (
+    if (content.length > 0 && content[content.length - 1] && content[content.length - 1]?.type === 'text') {
-      content.length > 0
-      && content[content.length - 1]
-      && content[content.length - 1]?.type === 'text'
-    ) {
       content[content.length - 1].payload.text += '\n';
     }
-  } else if (
+  } else if (node.type === 'text' || (node.type === 'custom-image' && node?.attrs?.class?.includes('emoji'))) {
-    node.type === 'text'
-    || (node.type === 'custom-image' && node?.attrs?.class?.includes('emoji'))
-  ) {
     // Process text and emojis
     const text = node.type === 'text' ? node?.text : node?.attrs?.alt;
-    if (
+    if (content.length > 0 && content[content.length - 1] && content[content.length - 1]?.type === 'text') {
-      content.length > 0
-      && content[content.length - 1]
-      && content[content.length - 1]?.type === 'text'
-    ) {
       content[content.length - 1].payload.text += text;
     } else {
       content.push({
         type: 'text',
-        payload: { text: text },
+        payload: { text: text }
       });
     }
-  } else if (
+  } else if (node.type === 'custom-image' && node?.attrs?.class?.includes('normal')) {
-    node.type === 'custom-image' && node?.attrs?.class?.includes('normal')
-  ) {
     // Process rich text images
     content.push({
       type: 'image',
-      payload: { file: fileMap?.get(node?.attrs?.src) },
+      payload: { file: fileMap?.get(node?.attrs?.src) }
     });
   } else if (node.type === 'custom-image' && node?.attrs?.class?.includes('file')) {
     const file = fileMap?.get(node?.attrs?.src);
     content.push({
       type: file?.type?.includes('video') ? 'video' : 'file',
-      payload: { file },
+      payload: { file }
     });
   } else if (node.type === 'mention') {
     const text = '@' + node?.attrs?.label + ' ';
-    if (
+    if (content.length > 0 && content[content.length - 1] && content[content.length - 1]?.type === 'text') {
-      content.length > 0
-      && content[content.length - 1]
-      && content[content.length - 1]?.type === 'text'
-    ) {
       content[content.length - 1].payload.text += text;
     } else {
       content.push({
         type: 'text',
-        payload: { text: text },
+        payload: { text: text }
       });
     }
     if (content[content.length - 1]?.payload?.atUserList) {
@@ -551,10 +494,10 @@ function parseH5EditorContent() {
   try {
     for (const child of root.childNodes) {
       if (
-        child.nodeName === '#text'
+        child.nodeName === '#text' ||
-        || child.nodeName === 'SPAN'
+        child.nodeName === 'SPAN' ||
-        || (child as HTMLElement).classList?.contains('custom-image-emoji')
+        (child as HTMLElement).classList?.contains('custom-image-emoji') ||
-        || (child as HTMLElement).classList?.contains('mention')
+        (child as HTMLElement).classList?.contains('mention')
       ) {
         text += child.nodeValue || (child as any).alt || child.innerHTML || '';
         if (child.classList?.contains('mention') && child.id && !atUserList?.includes(child.id)) {
@@ -572,9 +515,9 @@ function parseH5EditorContent() {
       type: 'text',
       payload: {
         text,
-        atUserList,
+        atUserList
-      },
+      }
-    },
+    }
   ];
 }
 
@@ -586,8 +529,8 @@ function addEmoji(emojiData: any) {
         src: emojiData?.url,
         alt: emojiData?.emoji.key,
         title: emojiData?.emoji.key,
-        class: 'emoji',
+        class: 'emoji'
-      },
+      }
     });
   } else {
     const emojiImgNode = document.createElement('img');
@@ -714,8 +657,8 @@ watch(
   },
   {
     immediate: true,
-    deep: true,
+    deep: true
-  },
+  }
 );
 
 defineExpose({
@@ -726,12 +669,12 @@ defineExpose({
   setEditorContent,
   getEditorHTML,
   insertEditorContent,
-  blur,
+  blur
 });
 </script>
 
 <style scoped lang="scss">
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .message-input-editor {
   &-container {
@@ -833,7 +776,6 @@ defineExpose({
   }
 
   img {
-
     /* stylelint-disable-next-line selector-class-pattern */
     &.ProseMirror-selectednode {
       outline: 2px solid #68cef8;

src/TUIKit/components/TUIChat/message-input/message-input-file.ts

@@ -8,31 +8,30 @@ export default Image.extend({
       ...(Image.config as any).addAttributes(),
       class: {
         default: 'image',
-        rendered: false,
+        rendered: false
-      },
+      }
     };
   },
 
   addCommands() {
     return {
-      setImage: options => ({ tr, commands }) => {
+      setImage:
-        if ((tr.selection as any)?.node?.type?.name == 'custom-image') {
+        (options) =>
-          return commands.updateAttributes('custom-image', options);
+        ({ tr, commands }) => {
-        } else {
+          if ((tr.selection as any)?.node?.type?.name == 'custom-image') {
-          return commands.insertContent({
+            return commands.updateAttributes('custom-image', options);
-            type: this.name,
+          } else {
-            attrs: options,
+            return commands.insertContent({
-          });
+              type: this.name,
+              attrs: options
+            });
+          }
         }
-      },
     };
   },
 
   renderHTML({ node, HTMLAttributes }) {
     HTMLAttributes.class = (node.attrs.class?.includes('custom-image-') ? '' : 'custom-image-') + node.attrs.class;
-    return [
+    return ['img', HTMLAttributes];
-      'img',
+  }
-      HTMLAttributes,
-    ];
-  },
 });

src/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue

@@ -4,32 +4,19 @@
     :class="{
       'input-quote-container': true,
       'input-quote-container-uni': isUniFrameWork,
-      'input-quote-container-h5': isH5,
+      'input-quote-container-h5': isH5
     }"
   >
     <div class="input-quote-content">
-      <div class="max-one-line">
+      <div class="max-one-line">{{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}</div>
-        {{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}
+      <Icon class="input-quote-close-icon" :file="closeIcon" width="11px" height="11px" @onClick="cancelQuote" />
-      </div>
-      <Icon
-        class="input-quote-close-icon"
-        :file="closeIcon"
-        width="11px"
-        height="11px"
-        @onClick="cancelQuote"
-      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName, TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
 import closeIcon from '../../../../assets/icon/icon-close.svg';
 import { isH5, isUniFrameWork } from '../../../../utils/env';
@@ -41,7 +28,7 @@ interface IProps {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  displayType: 'editor',
+  displayType: 'editor'
 });
 
 const TYPES = TUIChatEngine.TYPES;
@@ -49,13 +36,13 @@ const quoteMessage = ref<IMessageModel>();
 
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
-    quoteMessage: onQuoteMessageUpdated,
+    quoteMessage: onQuoteMessageUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
-    quoteMessage: onQuoteMessageUpdated,
+    quoteMessage: onQuoteMessageUpdated
   });
 });
 

src/TUIKit/components/TUIChat/message-list/index.vue

@@ -1,60 +1,28 @@
 <template>
-  <div
+  <div class="tui-chat" :class="[isH5 ? 'tui-chat-h5' : '']">
-    class="tui-chat"
-    :class="[isH5 ? 'tui-chat-h5' : '']"
-  >
     <!-- <JoinGroupCard v-if="isH5" /> -->
-    <div
+    <div id="tui-chat-main" class="tui-chat-main" @click="closeChatPop">
-      id="tui-chat-main"
-      class="tui-chat-main"
-      @click="closeChatPop"
-    >
       <!-- Safe Tips -->
-      <div
+      <div v-if="isOfficial" class="tui-chat-safe-tips">
-        v-if="isOfficial"
-        class="tui-chat-safe-tips"
-      >
         <span>
           {{
             TUITranslateService.t(
-              "TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。"
+              'TUIChat.【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。'
             )
           }}
         </span>
         <a @click="openComplaintLink(Link.complaint)">
-          {{ TUITranslateService.t("TUIChat.点此投诉") }}
+          {{ TUITranslateService.t('TUIChat.点此投诉') }}
         </a>
       </div>
-      <MessageGroupApplication
+      <MessageGroupApplication v-if="isGroup" :key="props.groupID" :groupID="props.groupID" />
-        v-if="isGroup"
-        :key="props.groupID"
-        :groupID="props.groupID"
-      />
       <!-- Message List -->
-      <ul
+      <ul id="messageScrollList" ref="messageListRef" class="tui-message-list" @click="onMessageListBackgroundClick">
-        id="messageScrollList"
+        <p v-if="!isCompleted" class="message-more" @click="getHistoryMessageList">
-        ref="messageListRef"
+          {{ TUITranslateService.t('TUIChat.查看更多') }}
-        class="tui-message-list"
-        @click="onMessageListBackgroundClick"
-      >
-        <p
-          v-if="!isCompleted"
-          class="message-more"
-          @click="getHistoryMessageList"
-        >
-          {{ TUITranslateService.t("TUIChat.查看更多") }}
         </p>
-        <li
+        <li v-for="(item, index) in messageList" :id="'tui-' + item.ID" :key="item.ID" ref="messageElementListRef" class="message-li">
-          v-for="(item, index) in messageList"
+          <MessageTimestamp :currTime="item.time" :prevTime="index > 0 ? messageList[index - 1].time : 0" />
-          :id="'tui-' + item.ID"
-          :key="item.ID"
-          ref="messageElementListRef"
-          class="message-li"
-        >
-          <MessageTimestamp
-            :currTime="item.time"
-            :prevTime="index > 0 ? messageList[index - 1].time : 0"
-          />
           <div class="message-item">
             <MessageTip
               v-if="item.type === TYPES.MSG_GRP_TIP || isCreateGroupCustomMessage(item)"
@@ -79,7 +47,7 @@
             <div
               v-else
               :class="{
-                'message-event-bind-div': true,
+                'message-event-bind-div': true
               }"
               @longpress="handleToggleMessageItem($event, item, true)"
               @click.prevent.right="handleToggleMessageItemForPC($event, item)"
@@ -100,31 +68,12 @@
                 @setReadReceiptPanelVisible="setReadReceiptPanelVisible"
               >
                 <template #messageElement>
-                  <MessageText
+                  <MessageText v-if="item.type === TYPES.MSG_TEXT" :content="item.getMessageContent()" :messageItem="item" />
-                    v-if="item.type === TYPES.MSG_TEXT"
+                  <ProgressMessage v-else-if="item.type === TYPES.MSG_IMAGE" :content="item.getMessageContent()" :messageItem="item">
-                    :content="item.getMessageContent()"
+                    <MessageImage :content="item.getMessageContent()" :messageItem="item" @previewImage="handleImagePreview" />
-                    :messageItem="item"
-                  />
-                  <ProgressMessage
-                    v-else-if="item.type === TYPES.MSG_IMAGE"
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  >
-                    <MessageImage
-                      :content="item.getMessageContent()"
-                      :messageItem="item"
-                      @previewImage="handleImagePreview"
-                    />
                   </ProgressMessage>
-                  <ProgressMessage
+                  <ProgressMessage v-else-if="item.type === TYPES.MSG_VIDEO" :content="item.getMessageContent()" :messageItem="item">
-                    v-else-if="item.type === TYPES.MSG_VIDEO"
+                    <MessageVideo :content="item.getMessageContent()" :messageItem="item" />
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  >
-                    <MessageVideo
-                      :content="item.getMessageContent()"
-                      :messageItem="item"
-                    />
                   </ProgressMessage>
                   <MessageAudio
                     v-else-if="item.type === TYPES.MSG_AUDIO"
@@ -132,40 +81,19 @@
                     :messageItem="item"
                     @setAudioPlayed="setAudioPlayed"
                   />
-                  <ProgressMessage
+                  <ProgressMessage v-else-if="item.type === TYPES.MSG_FILE" :content="item.getMessageContent()" :messageItem="item">
-                    v-else-if="item.type === TYPES.MSG_FILE"
+                    <MessageFile :content="item.getMessageContent()" :messageItem="item" />
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  >
-                    <MessageFile
-                      :content="item.getMessageContent()"
-                      :messageItem="item"
-                    />
                   </ProgressMessage>
-                  <MessageRecord
+                  <MessageRecord v-else-if="item.type === TYPES.MSG_MERGER" :renderData="item.payload" :messageItem="item" />
-                    v-else-if="item.type === TYPES.MSG_MERGER"
+                  <MessageFace v-else-if="item.type === TYPES.MSG_FACE" :content="item.getMessageContent()" />
-                    :renderData="item.payload"
+                  <MessageLocation v-else-if="item.type === TYPES.MSG_LOCATION" :content="item.getMessageContent()" />
-                    :messageItem="item"
-                  />
-                  <MessageFace
-                    v-else-if="item.type === TYPES.MSG_FACE"
-                    :content="item.getMessageContent()"
-                  />
-                  <MessageLocation
-                    v-else-if="item.type === TYPES.MSG_LOCATION"
-                    :content="item.getMessageContent()"
-                  />
                   <MessageStreamMarkdown
                     v-else-if="isBotMessage(item)"
                     :payloadData="item.payload.data"
                     :message="item"
                     @onStreaming="scrollStreamMessageToBottom"
                   />
-                  <MessageCustom
+                  <MessageCustom v-else-if="item.type === TYPES.MSG_CUSTOM" :content="item.getMessageContent()" :messageItem="item" />
-                    v-else-if="item.type === TYPES.MSG_CUSTOM"
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  />
                 </template>
                 <template #TUIEmojiPlugin>
                   <TUIEmojiPlugin
@@ -192,20 +120,13 @@
               @toggleMultipleSelectMode="() => emits('toggleMultipleSelectMode')"
             >
               <template #TUIEmojiPlugin>
-                <TUIEmojiPlugin
+                <TUIEmojiPlugin v-if="isShowEmojiPlugin" :message="item" :emojiConfig="emojiConfig" />
-                  v-if="isShowEmojiPlugin"
-                  :message="item"
-                  :emojiConfig="emojiConfig"
-                />
               </template>
             </MessageTool>
           </div>
         </li>
       </ul>
-      <ScrollButton
+      <ScrollButton ref="scrollButtonInstanceRef" @scrollToLatestMessage="scrollToLatestMessage" />
-        ref="scrollButtonInstanceRef"
-        @scrollToLatestMessage="scrollToLatestMessage"
-      />
       <Dialog
         v-if="reSendDialogShow"
         class="resend-dialog"
@@ -217,15 +138,10 @@
         @update:show="(e) => (reSendDialogShow = e)"
       >
         <p class="delDialog-title">
-          {{ TUITranslateService.t("TUIChat.确认重发该消息？") }}
+          {{ TUITranslateService.t('TUIChat.确认重发该消息？') }}
         </p>
       </Dialog>
-      <ImagePreviewer
+      <ImagePreviewer v-if="showImagePreview" :currentImage="currentImagePreview" :imageList="imageMessageList" @close="onImagePreviewerClose" />
-        v-if="showImagePreview"
-        :currentImage="currentImagePreview"
-        :imageList="imageMessageList"
-        @close="onImagePreviewerClose"
-      />
       <ReadReceiptPanel
         v-if="isShowReadUserStatusPanel"
         :message="Object.assign({}, readStatusMessage)"
@@ -237,13 +153,7 @@
 
 <script lang="ts" setup>
 import { ref, nextTick, computed, onMounted, onUnmounted, watch } from '../../../adapter-vue';
-import TUIChatEngine, {
+import TUIChatEngine, { IMessageModel, TUIStore, StoreName, TUITranslateService, TUIChatService } from '@tencentcloud/chat-uikit-engine';
-  IMessageModel,
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import { outsideClick, getBoundingClientRect, getScrollInfo } from '@tencentcloud/universal-api';
 import { TUIEmojiPlugin } from '@tencentcloud/tui-emoji-plugin';
@@ -306,7 +216,7 @@ const props = withDefaults(defineProps<IProps>(), {
   isGroup: false,
   groupID: '',
   isNotInGroup: false,
-  isMultipleSelectMode: false,
+  isMultipleSelectMode: false
 });
 
 let groupType: string | undefined;
@@ -346,7 +256,7 @@ const currentImagePreview = ref<IMessageModel>();
 const imageMessageList = computed(() =>
   messageList?.value?.filter((item: IMessageModel) => {
     return !item.isRevoked && !item.hasRiskContent && item.type === TYPES.value.MSG_IMAGE;
-  }),
+  })
 );
 
 // resend message dialog
@@ -355,7 +265,7 @@ const resendMessageData = ref();
 
 const isShowEmojiPlugin = computed(() => {
   const msgPopMenuExtensionList = TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.MSG_POP_MENU.EXT_ID, {
-    enabledEmojiPlugin,
+    enabledEmojiPlugin
   });
   return msgPopMenuExtensionList.some((item) => {
     return item.text === 'TUIEmojiPlugin';
@@ -369,15 +279,15 @@ onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
     messageList: onMessageListUpdated,
     messageSource: onMessageSourceUpdated,
-    isCompleted: isCompletedUpdated,
+    isCompleted: isCompletedUpdated
   });
 
   TUIStore.watch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdated,
+    currentConversationID: onCurrentConversationIDUpdated
   });
 
   TUIStore.watch(StoreName.CUSTOM, {
-    isShowMessagePopMenu: isShowMessagePopMenuUpdated,
+    isShowMessagePopMenu: isShowMessagePopMenuUpdated
   });
 });
 
@@ -389,15 +299,15 @@ onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
     messageList: onMessageListUpdated,
     messageSource: onMessageSourceUpdated,
-    isCompleted: isCompletedUpdated,
+    isCompleted: isCompletedUpdated
   });
 
   TUIStore.unwatch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdated,
+    currentConversationID: onCurrentConversationIDUpdated
   });
 
   TUIStore.unwatch(StoreName.CUSTOM, {
-    isShowMessagePopMenu: isShowMessagePopMenuUpdated,
+    isShowMessagePopMenu: isShowMessagePopMenuUpdated
   });
 
   messageListRef.value?.removeEventListener('scroll', handelScrollListScroll);
@@ -429,11 +339,7 @@ async function onMessageListUpdated(list: IMessageModel[]) {
   }
   const newLastMessage = messageList.value?.[messageList.value?.length - 1];
   if (messageTarget.value) {
-    if (
+    if (messageList.value?.findIndex((message: IMessageModel) => message?.ID === messageTarget.value?.ID) >= 0) {
-      messageList.value?.findIndex(
-        (message: IMessageModel) => message?.ID === messageTarget.value?.ID,
-      ) >= 0
-    ) {
       const tempMessage = messageTarget.value;
       messageTarget.value = undefined;
       await scrollToPosition({ scrollToMessage: tempMessage });
@@ -441,15 +347,12 @@ async function onMessageListUpdated(list: IMessageModel[]) {
     }
   } else if (beforeHistoryGetScrollHeight.value) {
     await scrollToPosition({
-      scrollToOffset: { bottom: beforeHistoryGetScrollHeight.value },
+      scrollToOffset: { bottom: beforeHistoryGetScrollHeight.value }
     });
     beforeHistoryGetScrollHeight.value = 0;
   } else if (scrollButtonInstanceRef.value?.isScrollButtonVisible && newLastMessage?.flow === 'in') {
     return;
-  } else if (
+  } else if (newLastMessage?.ID && JSON.stringify(oldLastMessage) !== JSON.stringify(newLastMessage)) {
-    newLastMessage?.ID
-    && JSON.stringify(oldLastMessage) !== JSON.stringify(newLastMessage)
-  ) {
     await scrollToPosition({ scrollToBottom: true });
   } else if (hasEmojiReaction && isCurrentListInBottomPosition()) {
     await scrollToPosition({ scrollToBottom: true });
@@ -462,13 +365,11 @@ async function onMessageListUpdated(list: IMessageModel[]) {
 
 function isCurrentListInBottomPosition() {
   return (
-    messageListRef.value
+    messageListRef.value &&
-    && typeof messageListRef.value.scrollTop === 'number'
+    typeof messageListRef.value.scrollTop === 'number' &&
-    && typeof messageListRef.value.scrollHeight === 'number'
+    typeof messageListRef.value.scrollHeight === 'number' &&
-    && typeof messageListRef.value.clientHeight === 'number'
+    typeof messageListRef.value.clientHeight === 'number' &&
-    && Math.ceil(
+    Math.ceil(messageListRef.value.scrollTop + messageListRef.value.clientHeight) >= messageListRef.value.scrollHeight
-      messageListRef.value.scrollTop + messageListRef.value.clientHeight,
-    ) >= messageListRef.value.scrollHeight
   );
 }
 
@@ -486,9 +387,7 @@ async function scrollToPosition(config: ScrollConfig = {}): Promise<void> {
       if (config.scrollToBottom) {
         container!.scrollTop = container!.scrollHeight;
       } else if (config.scrollToMessage) {
-        const targetMessageDom = messageElementListRef.value?.find(
+        const targetMessageDom = messageElementListRef.value?.find((dom: HTMLElement) => dom?.id === `tui-${config.scrollToMessage?.ID}`);
-          (dom: HTMLElement) => dom?.id === `tui-${config.scrollToMessage?.ID}`,
-        );
         if (targetMessageDom?.scrollIntoView) {
           targetMessageDom.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }
@@ -511,11 +410,7 @@ async function onMessageSourceUpdated(message: IMessageModel) {
   // Only the second case needs to add scrollToTarget when listening here
   messageTarget.value = message;
   if (messageTarget.value) {
-    if (
+    if (messageList.value?.findIndex((message: IMessageModel) => message?.ID === messageTarget.value?.ID) >= 0) {
-      messageList.value?.findIndex(
-        (message: IMessageModel) => message?.ID === messageTarget.value?.ID,
-      ) >= 0
-    ) {
       const tempMessage = messageTarget.value;
       messageTarget.value = undefined;
       await scrollToPosition({ scrollToMessage: tempMessage });
@@ -600,7 +495,7 @@ const handleToggleMessageItemForPC = (e: MouseEvent, message: IMessageModel) =>
         domRefs: targetMessageDom.value,
         ignoreDomRefs: ignoreDomRefs,
         handler: closeChatPop,
-        button: e.button,
+        button: e.button
       });
       filterTopMessageDom(e.target);
     });
@@ -683,16 +578,16 @@ async function scrollToLatestMessage() {
   }
 }
 
-const handelScrollListScroll = throttle(function (e: Event) {
+const handelScrollListScroll = throttle(
-  scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
+  function (e: Event) {
-}, 150, { leading: true });
+    scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
+  },
+  150,
+  { leading: true }
+);
 
 async function bindIntersectionObserver() {
-  if (
+  if (!messageList.value || !messageListRef.value || messageList.value.length === 0) {
-    !messageList.value
-    || !messageListRef.value
-    || messageList.value.length === 0
-  ) {
     return;
   }
 
@@ -701,32 +596,34 @@ async function bindIntersectionObserver() {
     return;
   }
 
-  const mappingFromIDToMessage: Record<string, {
+  const mappingFromIDToMessage: Record<
-    msgDom: HTMLElement;
+    string,
-    msgModel: IMessageModel | undefined;
+    {
-  }> = {};
+      msgDom: HTMLElement;
+      msgModel: IMessageModel | undefined;
+    }
+  > = {};
 
   observer?.disconnect();
-  observer = new IntersectionObserver((entries) => {
+  observer = new IntersectionObserver(
-    entries.forEach((entry) => {
+    (entries) => {
-      const { isIntersecting, target } = entry;
+      entries.forEach((entry) => {
-      if (isIntersecting) {
+        const { isIntersecting, target } = entry;
-        const { msgDom, msgModel } = mappingFromIDToMessage[target.id];
+        if (isIntersecting) {
-        if (
+          const { msgDom, msgModel } = mappingFromIDToMessage[target.id];
-          msgModel
+          if (msgModel && !msgModel.readReceiptInfo?.isPeerRead && !sentReceiptMessageIDSet.has(msgModel.ID)) {
-          && !msgModel.readReceiptInfo?.isPeerRead
+            TUIChatService.sendMessageReadReceipt([msgModel]);
-          && !sentReceiptMessageIDSet.has(msgModel.ID)
+            sentReceiptMessageIDSet.add(msgModel.ID);
-        ) {
+            observer?.unobserve(msgDom);
-          TUIChatService.sendMessageReadReceipt([msgModel]);
+          }
-          sentReceiptMessageIDSet.add(msgModel.ID);
-          observer?.unobserve(msgDom);
         }
-      }
+      });
-    });
+    },
-  }, {
+    {
-    root: messageListRef.value,
+      root: messageListRef.value,
-    threshold: 0.7,
+      threshold: 0.7
-  });
+    }
+  );
 
   const arrayOfMessageLi = messageListRef.value?.querySelectorAll('.message-li');
   if (arrayOfMessageLi) {
@@ -735,14 +632,10 @@ async function bindIntersectionObserver() {
       const matchingMessage = messageList.value.find((message: IMessageModel) => {
         return messageElement.id.slice(4) === message.ID;
       });
-      if (
+      if (matchingMessage && matchingMessage.needReadReceipt && matchingMessage.flow === 'in') {
-        matchingMessage
-        && matchingMessage.needReadReceipt
-        && matchingMessage.flow === 'in'
-      ) {
         mappingFromIDToMessage[messageElement.id] = {
           msgDom: messageElement,
-          msgModel: matchingMessage,
+          msgModel: matchingMessage
         };
         observer?.observe(messageElement);
       }
@@ -750,7 +643,6 @@ async function bindIntersectionObserver() {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const isSignalingMessage = (message: IMessageModel) => {
   return message?.type === TYPES.value.MSG_CUSTOM && message?.getSignalingInfo();
 };
@@ -775,14 +667,17 @@ function onMessageListBackgroundClick() {
   emits('closeInputToolBar');
 }
 
-watch(() => props.isMultipleSelectMode, (newValue) => {
+watch(
-  if (!newValue) {
+  () => props.isMultipleSelectMode,
-    changeSelectMessageIDList({
+  (newValue) => {
-      type: 'clearAll',
+    if (!newValue) {
-      messageID: '',
+      changeSelectMessageIDList({
-    });
+        type: 'clearAll',
+        messageID: ''
+      });
+    }
   }
-});
+);
 
 function changeSelectMessageIDList({ type, messageID }: { type: 'add' | 'remove' | 'clearAll'; messageID: string }) {
   // TODO need to delete this
@@ -791,35 +686,35 @@ function changeSelectMessageIDList({ type, messageID }: { type: 'add' | 'remove'
   } else if (type === 'add' && !multipleSelectedMessageIDList.value.includes(messageID)) {
     multipleSelectedMessageIDList.value.push(messageID);
   } else if (type === 'remove') {
-    multipleSelectedMessageIDList.value = multipleSelectedMessageIDList.value.filter(id => id !== messageID);
+    multipleSelectedMessageIDList.value = multipleSelectedMessageIDList.value.filter((id) => id !== messageID);
   }
 }
 
 function mergeForwardMessage() {
   TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', {
     isMergeForward: true,
-    messageIDList: multipleSelectedMessageIDList.value,
+    messageIDList: multipleSelectedMessageIDList.value
   });
 }
 
 function oneByOneForwardMessage() {
   TUIStore.update(StoreName.CUSTOM, 'multipleForwardMessageID', {
     isMergeForward: false,
-    messageIDList: multipleSelectedMessageIDList.value,
+    messageIDList: multipleSelectedMessageIDList.value
   });
 }
 
 function setAudioPlayed(messageID: string) {
   audioPlayedMapping.value = {
     ...audioPlayedMapping.value,
-    [messageID]: true,
+    [messageID]: true
   };
 }
 
 defineExpose({
   oneByOneForwardMessage,
   mergeForwardMessage,
-  scrollToLatestMessage,
+  scrollToLatestMessage
 });
 </script>
 

src/TUIKit/components/TUIChat/message-list/link/index.ts

@@ -1,23 +1,23 @@
 const Link = {
   product: {
     label: '产品文档',
-    url: 'https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD',
+    url: 'https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD'
   },
   customMessage: {
     label: '自定义消息',
-    url: 'https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#createCustomMessage',
+    url: 'https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#createCustomMessage'
   },
   complaint: {
     label: '点此投诉',
-    url: 'https://cloud.tencent.com/apply/p/xc3oaubi98g',
+    url: 'https://cloud.tencent.com/apply/p/xc3oaubi98g'
   },
   implement: {
     label: '集成TUICallKit',
-    url: 'https://cloud.tencent.com/document/product/269/79861',
+    url: 'https://cloud.tencent.com/document/product/269/79861'
   },
   purchase: {
     label: '开通腾讯实时音视频服务',
-    url: 'https://cloud.tencent.com/document/product/1640/79968',
+    url: 'https://cloud.tencent.com/document/product/1640/79968'
-  },
+  }
 };
 export default Link;

src/TUIKit/components/TUIChat/message-list/message-elements/message-audio.vue

@@ -1,32 +1,15 @@
 <template>
   <div
     class="message-audio"
-    :class="[
+    :class="[isMobile && 'message-audio-h5', message.flow === 'out' && 'reserve', message.hasRiskContent && 'disable']"
-      isMobile && 'message-audio-h5',
-      message.flow === 'out' && 'reserve',
-      message.hasRiskContent && 'disable',
-    ]"
     @click.stop="play"
   >
     <div class="audio-icon-container">
       <div :class="{ 'mask': true, 'play': isAudioPlaying }" />
-      <Icon
+      <Icon class="icon" width="16px" height="20px" :file="audioIcon" />
-        class="icon"
-        width="16px"
-        height="20px"
-        :file="audioIcon"
-      />
     </div>
-    <span
+    <span class="time" :style="{ width: `${data.second * 10 + 20}px` }"> {{ data.second || 1 }} " </span>
-      class="time"
+    <audio ref="audioRef" :src="data.url" />
-      :style="{ width: `${data.second * 10 + 20}px` }"
-    >
-      {{ data.second || 1 }} "
-    </span>
-    <audio
-      ref="audioRef"
-      :src="data.url"
-    />
   </div>
 </template>
 
@@ -44,12 +27,12 @@ const emits = defineEmits<IEmits>();
 const props = defineProps({
   content: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
   },
   messageItem: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
-  },
+  }
 });
 
 const data = ref();
@@ -109,7 +92,7 @@ function onAudioPaused() {
 }
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 $flow-in-bg-color: #fbfbfb;
 $flow-out-bg-color: #dceafd;

src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue

@@ -1,12 +1,7 @@
 <template>
   <div :class="containerClassNameList">
     <!-- multiple select radio -->
-    <RadioSelect
+    <RadioSelect v-if="props.isMultipleSelectMode" class="multiple-select-radio" :isSelected="isMultipleSelected" @onChange="toggleMultipleSelect" />
-      v-if="props.isMultipleSelectMode"
-      class="multiple-select-radio"
-      :isSelected="isMultipleSelected"
-      @onChange="toggleMultipleSelect"
-    />
     <div
       :class="{
         'control-reverse': message.flow === 'out'
@@ -14,22 +9,10 @@
     >
       <!-- message-bubble-container -->
       <div class="message-bubble-content">
-        <div
+        <div class="message-bubble-main-content" :class="[message.flow === 'in' ? '' : 'reverse']">
-          class="message-bubble-main-content"
+          <Avatar useSkeletonAnimation :url="message.avatar || ''" />
-          :class="[message.flow === 'in' ? '' : 'reverse']"
+          <main class="message-body" @click.stop>
-        >
+            <div v-if="message.flow === 'in' && message.conversationType === 'GROUP'" class="message-body-nick-name">
-          <Avatar
-            useSkeletonAnimation
-            :url="message.avatar || ''"
-          />
-          <main
-            class="message-body"
-            @click.stop
-          >
-            <div
-              v-if="message.flow === 'in' && message.conversationType === 'GROUP'"
-              class="message-body-nick-name"
-            >
               {{ props.content.showName }}
             </div>
             <div :class="['message-body-main', message.flow === 'out' && 'message-body-main-reverse']">
@@ -41,44 +24,29 @@
                   message.hasRiskContent && 'content-has-risk',
                   isNoPadding ? 'content-no-padding' : '',
                   isNoPadding && isBlink ? 'blink-shadow' : '',
-                  !isNoPadding && isBlink ? 'blink-content' : '',
+                  !isNoPadding && isBlink ? 'blink-content' : ''
                 ]"
               >
                 <div class="content-main">
                   <img
-                    v-if="
+                    v-if="(message.type === TYPES.MSG_IMAGE || message.type === TYPES.MSG_VIDEO) && message.hasRiskContent"
-                      (message.type === TYPES.MSG_IMAGE || message.type === TYPES.MSG_VIDEO) &&
-                        message.hasRiskContent
-                    "
                     :class="['message-risk-replace', !isPC && 'message-risk-replace-h5']"
                     :src="riskImageReplaceUrl"
-                  >
+                  />
                   <template v-else>
                     <slot name="messageElement" />
                     <slot name="TUIEmojiPlugin" />
                   </template>
                 </div>
                 <!-- Risk Content Tips -->
-                <div
+                <div v-if="message.hasRiskContent" class="content-has-risk-tips">
-                  v-if="message.hasRiskContent"
-                  class="content-has-risk-tips"
-                >
                   {{ riskContentText }}
                 </div>
               </div>
               <!-- audio unplay mark -->
-              <div
+              <div v-if="isDisplayUnplayMark" class="audio-unplay-mark" />
-                v-if="isDisplayUnplayMark"
-                class="audio-unplay-mark"
-              />
               <!-- Send Fail Icon -->
-              <div
+              <div v-if="message.status === 'fail' || message.hasRiskContent" class="message-label fail" @click="resendMessage()">!</div>
-                v-if="message.status === 'fail' || message.hasRiskContent"
-                class="message-label fail"
-                @click="resendMessage()"
-              >
-                !
-              </div>
               <!-- Loading Icon -->
               <Icon
                 v-if="message.status === 'unSend' && needLoadingIconMessageType.includes(message.type)"
@@ -88,28 +56,16 @@
                 :height="'15px'"
               />
               <!-- Read & Unread -->
-              <ReadStatus
+              <ReadStatus class="message-label align-self-bottom" :message="shallowCopyMessage(message)" @openReadUserPanel="openReadUserPanel" />
-                class="message-label align-self-bottom"
-                :message="shallowCopyMessage(message)"
-                @openReadUserPanel="openReadUserPanel"
-              />
             </div>
           </main>
         </div>
         <!-- message extra area -->
-        <div
+        <div class="message-bubble-extra-content">
-          class="message-bubble-extra-content"
-        >
           <!-- extra: message translation -->
-          <MessageTranslate
+          <MessageTranslate :class="message.flow === 'out' ? 'reverse' : 'flex-row'" :message="message" />
-            :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
-            :message="message"
-          />
           <!-- extra: message convert voice to text -->
-          <MessageConvert
+          <MessageConvert :class="message.flow === 'out' ? 'reverse' : 'flex-row'" :message="message" />
-            :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
-            :message="message"
-          />
           <!-- extra: message quote -->
           <MessageQuote
             :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
@@ -159,24 +115,18 @@ interface IEmits {
 const emits = defineEmits<IEmits>();
 
 const props = withDefaults(defineProps<IProps>(), {
-  messageItem: () => ({} as IMessageModel),
+  messageItem: () => ({}) as IMessageModel,
   content: () => ({}),
   isAudioPlayed: false,
   blinkMessageIDList: () => [],
   classNameList: () => [],
   isMultipleSelectMode: false,
-  multipleSelectedMessageIDList: () => [],
+  multipleSelectedMessageIDList: () => []
 });
 
 const TYPES = TUIChatEngine.TYPES;
 const riskImageReplaceUrl = 'https://web.sdk.qcloud.com/component/TUIKit/assets/has_risk_default.png';
-const needLoadingIconMessageType = [
+const needLoadingIconMessageType = [TYPES.MSG_LOCATION, TYPES.MSG_TEXT, TYPES.MSG_CUSTOM, TYPES.MSG_MERGER, TYPES.MSG_FACE];
-  TYPES.MSG_LOCATION,
-  TYPES.MSG_TEXT,
-  TYPES.MSG_CUSTOM,
-  TYPES.MSG_MERGER,
-  TYPES.MSG_FACE,
-];
 
 const { blinkMessageIDList, messageItem: message } = toRefs(props);
 
@@ -185,18 +135,11 @@ const isMultipleSelected = computed<boolean>(() => {
 });
 
 const isDisplayUnplayMark = computed<boolean>(() => {
-  return message.value.flow === 'in'
+  return message.value.flow === 'in' && message.value.status === 'success' && message.value.type === TYPES.MSG_AUDIO && !props.isAudioPlayed;
-    && message.value.status === 'success'
-    && message.value.type === TYPES.MSG_AUDIO
-    && !props.isAudioPlayed;
 });
 
 const containerClassNameList = computed(() => {
-  return [
+  return ['message-bubble', isMultipleSelected.value ? 'multiple-selected' : '', ...props.classNameList];
-    'message-bubble',
-    isMultipleSelected.value ? 'multiple-selected' : '',
-    ...props.classNameList,
-  ];
 });
 
 // When an emoji is deleted, the `reactionList` will update the corresponding emoji's `totalUserCount`.
@@ -213,9 +156,7 @@ const riskContentText = computed<string>(() => {
   if (message.value.flow === 'out') {
     content += TUITranslateService.t('TUIChat.发送失败');
   } else {
-    content += TUITranslateService.t(
+    content += TUITranslateService.t(message.value.type === TYPES.MSG_AUDIO ? 'TUIChat.无法收听' : 'TUIChat.无法查看');
-      message.value.type === TYPES.MSG_AUDIO ? 'TUIChat.无法收听' : 'TUIChat.无法查看',
-    );
   }
   return content;
 });
@@ -230,7 +171,7 @@ const isBlink = computed(() => {
 function toggleMultipleSelect(isSelected: boolean) {
   emits('changeSelectMessageIDList', {
     type: isSelected ? 'add' : 'remove',
-    messageID: message.value.ID,
+    messageID: message.value.ID
   });
 }
 
@@ -373,96 +314,96 @@ function openReadUserPanel() {
             margin-top: 5px;
             border-top: 1px solid #e5c7c7;
             padding-top: 5px;
-        }
-      }
-
-      .content-in {
-        background: #fbfbfb;
-        border-radius: 0 10px 10px;
-      }
-
-      .content-out {
-        background: #dceafd;
-        border-radius: 10px 0 10px 10px;
-      }
-
-      .content-no-padding {
-        padding: 0;
-        background: transparent;
-        border-radius: 10px;
-        overflow: hidden;
-      }
-
-      .content-no-padding.content-has-risk {
-        padding: 12px;
-      }
-
-      .content-has-risk {
-        background: rgba(250, 81, 81, 0.16);
-      }
-
-      .blink-shadow {
-        @keyframes shadow-blink {
-          50% {
-            box-shadow: rgba(255, 156, 25, 1) 0 0 10px 0;
           }
         }
 
-        box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
+        .content-in {
-        animation: shadow-blink 1s linear 3;
+          background: #fbfbfb;
-      }
+          border-radius: 0 10px 10px;
+        }
 
-      .blink-content {
+        .content-out {
-        @keyframes reference-blink {
+          background: #dceafd;
-          50% {
+          border-radius: 10px 0 10px 10px;
-            background-color: #ff9c19;
+        }
+
+        .content-no-padding {
+          padding: 0;
+          background: transparent;
+          border-radius: 10px;
+          overflow: hidden;
+        }
+
+        .content-no-padding.content-has-risk {
+          padding: 12px;
+        }
+
+        .content-has-risk {
+          background: rgba(250, 81, 81, 0.16);
+        }
+
+        .blink-shadow {
+          @keyframes shadow-blink {
+            50% {
+              box-shadow: rgba(255, 156, 25, 1) 0 0 10px 0;
+            }
+          }
+
+          box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
+          animation: shadow-blink 1s linear 3;
+        }
+
+        .blink-content {
+          @keyframes reference-blink {
+            50% {
+              background-color: #ff9c19;
+            }
+          }
+
+          animation: reference-blink 1s linear 3;
+        }
+
+        .message-label {
+          align-self: flex-end;
+          font-family: PingFangSC-Regular;
+          font-size: 12px;
+          color: #b6b8ba;
+          word-break: keep-all;
+          flex: 0 0 auto;
+          margin: 0 8px;
+
+          &.fail {
+            width: 15px;
+            height: 15px;
+            border-radius: 15px;
+            background: red;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+          }
+
+          &.loading-circle {
+            opacity: 0;
+            animation: circle-loading 2s linear 1s infinite;
+          }
+
+          @keyframes circle-loading {
+            0% {
+              transform: rotate(0);
+              opacity: 1;
+            }
+
+            100% {
+              opacity: 1;
+              transform: rotate(360deg);
+            }
           }
         }
 
-        animation: reference-blink 1s linear 3;
+        .align-self-bottom {
-      }
+          align-self: flex-end;
-
-    .message-label {
-      align-self: flex-end;
-      font-family: PingFangSC-Regular;
-      font-size: 12px;
-      color: #b6b8ba;
-      word-break: keep-all;
-      flex: 0 0 auto;
-      margin: 0 8px;
-
-      &.fail {
-        width: 15px;
-        height: 15px;
-        border-radius: 15px;
-        background: red;
-        color: #fff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-      }
-
-      &.loading-circle {
-        opacity: 0;
-        animation: circle-loading 2s linear 1s infinite;
-      }
-
-      @keyframes circle-loading {
-        0% {
-          transform: rotate(0);
-          opacity: 1;
-        }
-
-        100% {
-          opacity: 1;
-          transform: rotate(360deg);
-        }
-      }
-    }
-
-    .align-self-bottom {
-      align-self: flex-end;
         }
       }
     }

src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue

@@ -3,7 +3,7 @@
     class="message-convert-container"
     :style="{
       height: calculateHeight > 0 ? `${calculateHeight}px` : 'auto',
-      width: calculateWidth > 0 ? `${calculateWidth}px` : 'auto',
+      width: calculateWidth > 0 ? `${calculateWidth}px` : 'auto'
     }"
   >
     <div
@@ -11,7 +11,7 @@
       ref="convertContentRef"
       :class="{
         'convert-content': true,
-        'occur': calculateHeight > 0,
+        'occur': calculateHeight > 0
       }"
     >
       {{ convertText }}
@@ -30,10 +30,7 @@
 
 <script lang="ts" setup>
 import { ref, watch, nextTick } from '../../../../../adapter-vue';
-import {
+import { IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import { getBoundingClientRectSync } from '@tencentcloud/universal-api';
 import { convertor } from '../../../utils/convertVoiceToText';
 
@@ -50,8 +47,8 @@ interface IEmits {
 
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel,
-  isSingleConvert: false,
+  isSingleConvert: false
 });
 
 const convertFinished = ref<boolean>(false);
@@ -62,46 +59,51 @@ const calculateWidth = ref<number>(0);
 const convertLoadingRef = ref<HTMLDivElement>();
 const convertContentRef = ref<HTMLDivElement>();
 
-watch(() => props.contentVisible, (newVal: boolean) => {
+watch(
-  if (newVal) {
+  () => props.contentVisible,
-    convertor.get(props.message)
+  (newVal: boolean) => {
-      .then((text) => {
+    if (newVal) {
-        convertFinished.value = true;
+      convertor
-        convertText.value = text;
+        .get(props.message)
-        nextTick(() => {
+        .then((text) => {
-          const { height: originHeight, width: originWidth } = getBoundingClientRectSync(convertLoadingRef.value!);
+          convertFinished.value = true;
-          const { height, width } = getBoundingClientRectSync(convertContentRef.value!);
+          convertText.value = text;
-          calculateHeight.value = originHeight;
+          nextTick(() => {
-          calculateWidth.value = originWidth;
+            const { height: originHeight, width: originWidth } = getBoundingClientRectSync(convertLoadingRef.value!);
-          requestAnimationFrame(() => {
+            const { height, width } = getBoundingClientRectSync(convertContentRef.value!);
-            calculateHeight.value = height;
+            calculateHeight.value = originHeight;
-            calculateWidth.value = width;
+            calculateWidth.value = originWidth;
-            if (props.isSingleConvert) {
+            requestAnimationFrame(() => {
-              nextTick(() => {
+              calculateHeight.value = height;
-                const { bottom } = getBoundingClientRectSync(props.convertWrapperRef);
+              calculateWidth.value = width;
-                const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
+              if (props.isSingleConvert) {
-                if (bottom > bottomWindow) {
+                nextTick(() => {
-                  const timer = setTimeout(() => {
+                  const { bottom } = getBoundingClientRectSync(props.convertWrapperRef);
-                    props.convertWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
+                  const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
-                    clearTimeout(timer);
+                  if (bottom > bottomWindow) {
-                  }, 150);
+                    const timer = setTimeout(() => {
-                }
+                      props.convertWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
-              });
+                      clearTimeout(timer);
-            }
+                    }, 150);
+                  }
+                });
+              }
+            });
           });
+        })
+        .catch((err) => {
+          convertFinished.value = true;
+          emits('toggleErrorStatus', true);
+          const { height: originHeight } = getBoundingClientRectSync(convertLoadingRef.value!);
+          calculateHeight.value = originHeight;
+          convertText.value = err.message;
         });
-      })
+    }
-      .catch((err) => {
+  },
-        convertFinished.value = true;
+  {
-        emits('toggleErrorStatus', true);
+    immediate: true
-        const { height: originHeight } = getBoundingClientRectSync(convertLoadingRef.value!);
-        calculateHeight.value = originHeight;
-        convertText.value = err.message;
-      });
   }
-}, {
+);
-  immediate: true,
-});
 </script>
 
 <style lang="scss" scoped>
@@ -109,7 +111,9 @@ watch(() => props.contentVisible, (newVal: boolean) => {
   min-height: 20px;
   min-width: 80px;
   position: relative;
-  transition: width 0.15s ease-out, height 0.15s ease-out, ;
+  transition:
+    width 0.15s ease-out,
+    height 0.15s ease-out;
   font-size: 14px;
 
   .loading {

src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/index.vue

@@ -5,7 +5,7 @@
     :class="{
       'message-convert': true,
       'reverse': props.message.flow === 'out',
-      'error': hasConvertError,
+      'error': hasConvertError
     }"
   >
     <ConvertContent
@@ -20,11 +20,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from '../../../../../adapter-vue';
-import {
+import { TUIStore, StoreName, IMessageModel } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine';
 import ConvertContent from './convert-content.vue';
 import { IConvertInfo } from '../../../../../interface';
 
@@ -33,7 +29,7 @@ interface IProps {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel
 });
 
 const convertVisible = ref<boolean>(false);
@@ -44,13 +40,13 @@ let isSingleConvert = true;
 
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
-    voiceToTextInfo: onMessageConvertUpdated,
+    voiceToTextInfo: onMessageConvertUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
-    voiceToTextInfo: onMessageConvertUpdated,
+    voiceToTextInfo: onMessageConvertUpdated
   });
 });
 

src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue

@@ -4,22 +4,11 @@
       <div>
         <h1>
           <label>{{ extension.title }}</label>
-          <a
+          <a v-if="extension.hyperlinks_text" :href="extension.hyperlinks_text.value" target="view_window">{{ extension.hyperlinks_text.key }}</a>
-            v-if="extension.hyperlinks_text"
-            :href="extension.hyperlinks_text.value"
-            target="view_window"
-          >{{ extension.hyperlinks_text.key }}</a>
         </h1>
         <ul v-if="extension.item && extension.item.length > 0">
-          <li
+          <li v-for="(item, index) in extension.item" :key="index">
-            v-for="(item, index) in extension.item"
+            <a v-if="isUrl(item.value)" :href="item.value" target="view_window">{{ item.key }}</a>
-            :key="index"
-          >
-            <a
-              v-if="isUrl(item.value)"
-              :href="item.value"
-              target="view_window"
-            >{{ item.key }}</a>
             <p v-else>
               {{ item.key }}
             </p>
@@ -30,30 +19,18 @@
     </template>
     <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
       <div class="evaluate">
-        <h1>{{ TUITranslateService.t("message.custom.对本次服务评价") }}</h1>
+        <h1>{{ TUITranslateService.t('message.custom.对本次服务评价') }}</h1>
         <ul class="evaluate-list">
-          <li
+          <li v-for="(item, index) in Math.max(customData.score, 0)" :key="index" class="evaluate-list-item">
-            v-for="(item, index) in Math.max(customData.score, 0)"
+            <Icon :file="star" class="file-icon" />
-            :key="index"
-            class="evaluate-list-item"
-          >
-            <Icon
-              :file="star"
-              class="file-icon"
-            />
           </li>
         </ul>
         <article>{{ customData.comment }}</article>
       </div>
     </template>
     <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
-      <div
+      <div class="order" @click="openLink(customData.link)">
-        class="order"
+        <img :src="customData.imageUrl" />
-        @click="openLink(customData.link)"
-      >
-        <img
-          :src="customData.imageUrl"
-        >
         <main>
           <h1>{{ customData.title }}</h1>
           <p>{{ customData.description }}</p>
@@ -64,12 +41,7 @@
     <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
       <div class="textLink">
         <p>{{ customData.text }}</p>
-        <a
+        <a :href="customData.link" target="view_window">{{ TUITranslateService.t('message.custom.查看详情>>') }}</a>
-          :href="customData.link"
-          target="view_window"
-        >{{
-          TUITranslateService.t("message.custom.查看详情>>")
-        }}</a>
       </div>
     </template>
     <template v-else>
@@ -93,14 +65,14 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   messageItem: undefined,
-  content: undefined,
+  content: undefined
 });
 
 const custom = ref();
 const message = ref<IMessageModel>();
 const extension = ref();
 const customData = ref<ICustomMessagePayload>({
-  businessID: '',
+  businessID: ''
 });
 
 watchEffect(() => {
@@ -118,7 +90,7 @@ const openLink = (url: any) => {
 };
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 a {
   color: #679ce1;

src/TUIKit/components/TUIChat/message-list/message-elements/message-face.vue

@@ -1,12 +1,6 @@
 <template>
-  <div
+  <div class="message-image">
-    class="message-image"
+    <img mode="aspectFit" class="message-image" :src="url" />
-  >
-    <img
-      mode="aspectFit"
-      class="message-image"
-      :src="url"
-    >
   </div>
 </template>
 
@@ -17,8 +11,8 @@ import { CUSTOM_BIG_EMOJI_URL } from '../../emoji-config';
 const props = defineProps({
   content: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
-  },
+  }
 });
 
 const url = ref(props.content.url);
@@ -35,7 +29,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .message-image {
   width: 80px;

src/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue

@@ -1,13 +1,6 @@
 <template>
-  <div
+  <div class="file-message-montainer" :title="TUITranslateService.t('TUIChat.单击下载')" @click="download">
-    class="file-message-montainer"
+    <Icon :file="files" class="file-icon" />
-    :title="TUITranslateService.t('TUIChat.单击下载')"
-    @click="download"
-  >
-    <Icon
-      :file="files"
-      class="file-icon"
-    />
     <div>
       <div>{{ props.content.name }}</div>
       <div>{{ props.content.size }}</div>
@@ -28,9 +21,9 @@ const props = withDefaults(
     messageItem: IMessageModel;
   }>(),
   {
-    content: () => ({} as IFileMessageContent),
+    content: () => ({}) as IFileMessageContent,
-    messageItem: () => ({} as IMessageModel),
+    messageItem: () => ({}) as IMessageModel
-  },
+  }
 );
 
 const download = () => {
@@ -40,13 +33,13 @@ const download = () => {
   const option = {
     mode: 'cors',
     headers: new Headers({
-      'Content-Type': 'application/x-www-form-urlencoded',
+      'Content-Type': 'application/x-www-form-urlencoded'
-    }),
+    })
   } as RequestInit;
   // If the browser supports fetch, use blob to download, so as to avoid the browser clicking the a tag and jumping to the preview of the new page
   if ((window as any)?.fetch) {
     fetch(props.content.url, option)
-      .then(res => res.blob())
+      .then((res) => res.blob())
       .then((blob) => {
         const a = document.createElement('a');
         const url = window.URL.createObjectURL(blob);
@@ -64,7 +57,7 @@ const download = () => {
 };
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .file-message-montainer {
   display: flex;

src/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue

@@ -1,15 +1,11 @@
 <template>
-  <div
+  <div ref="skeletonDomRef" class="image-container" @click.self="toggleShow">
-    ref="skeletonDomRef"
-    class="image-container"
-    @click.self="toggleShow"
-  >
     <img
       :class="['message-image', !isPC && 'message-image-h5']"
       :src="props.content.url"
       :width="props.content.width"
       :height="props.content.height"
-    >
+    />
   </div>
 </template>
 
@@ -28,17 +24,13 @@ const props = withDefaults(
   }>(),
   {
     content: () => ({}),
-    messageItem: () => ({} as IMessageModel),
+    messageItem: () => ({}) as IMessageModel
-  },
+  }
 );
 const skeletonDomRef = ref();
 
 onMounted(() => {
-  if (
+  if (props.messageItem?.status === 'success' || props.messageItem?.status === 'fail' || props.messageItem?.progress === 1) {
-    props.messageItem?.status === 'success'
-    || props.messageItem?.status === 'fail'
-    || props.messageItem?.progress === 1
-  ) {
     autoFixSkeletonSize();
   }
 });
@@ -49,7 +41,7 @@ watch(
     if (newVal > oldVal) {
       autoFixSkeletonSize();
     }
-  },
+  }
 );
 
 function autoFixSkeletonSize() {
@@ -70,7 +62,7 @@ function toggleShow() {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .image-container {
   overflow: hidden;

src/TUIKit/components/TUIChat/message-list/message-elements/message-location.vue

@@ -1,12 +1,7 @@
 <template>
-  <a
+  <a class="message-location" :href="data.href" target="_blank" title="点击查看详情">
-    class="message-location"
-    :href="data.href"
-    target="_blank"
-    title="点击查看详情"
-  >
     <span class="el-icon-location-outline">{{ data.description }}</span>
-    <img :src="data.url">
+    <img :src="data.url" />
   </a>
 </template>
 
@@ -15,8 +10,8 @@ import { watchEffect, ref } from '../../../../adapter-vue';
 const props = defineProps({
   content: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
-  },
+  }
 });
 const data = ref();
 watchEffect(() => {
@@ -24,7 +19,7 @@ watchEffect(() => {
 });
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .message-location {
   display: flex;

src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue

@@ -3,33 +3,20 @@
     v-if="hasQuoteContent"
     :class="{
       'reference-content': true,
-      'reverse': message.flow === 'out',
+      'reverse': message.flow === 'out'
     }"
     @click="scrollToOriginalMessage"
   >
-    <div
+    <div v-if="isMessageRevoked" class="revoked-text">
-      v-if="isMessageRevoked"
-      class="revoked-text"
-    >
       {{ TUITranslateService.t('TUIChat.引用内容已撤回') }}
     </div>
-    <div
+    <div v-else class="max-double-line">{{ messageQuoteContent.messageSender }}: {{ transformTextWithKeysToEmojiNames(messageQuoteText) }}</div>
-      v-else
-      class="max-double-line"
-    >
-      {{ messageQuoteContent.messageSender }}: {{ transformTextWithKeysToEmojiNames(messageQuoteText) }}
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, onMounted } from '../../../../../adapter-vue';
-import {
+import { TUIStore, StoreName, IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import { getBoundingClientRect, getScrollInfo } from '@tencentcloud/universal-api';
 import { isUniFrameWork } from '../../../../../utils/env';
 import { Toast, TOAST_TYPE } from '../../../../../components/common/Toast/index';
@@ -47,7 +34,7 @@ export interface IEmits {
 
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel
 });
 
 let selfAddValue = 0;
@@ -116,12 +103,7 @@ function performQuoteContent(params: IQuoteContent) {
       messageKey = '[消息]';
       break;
   }
-  if (
+  if ([MessageQuoteTypeEnum.TYPE_TEXT, MessageQuoteTypeEnum.TYPE_MERGER].includes(params.messageType)) {
-    [
-      MessageQuoteTypeEnum.TYPE_TEXT,
-      MessageQuoteTypeEnum.TYPE_MERGER,
-    ].includes(params.messageType)
-  ) {
     quoteContent = params.messageAbstract;
   }
   return quoteContent ? quoteContent : TUITranslateService.t(`TUIChat.${messageKey}`);
@@ -133,7 +115,7 @@ async function scrollToOriginalMessage() {
   }
   const originMessageID = messageQuoteContent.value?.messageID;
   const currentMessageList = TUIStore.getData(StoreName.CHAT, 'messageList');
-  const isOriginalMessageInScreen = currentMessageList.some(msg => msg.ID === originMessageID);
+  const isOriginalMessageInScreen = currentMessageList.some((msg) => msg.ID === originMessageID);
   if (originMessageID && isOriginalMessageInScreen) {
     try {
       const scrollViewRect = await getBoundingClientRect('#messageScrollList', 'messageList');
@@ -156,7 +138,7 @@ async function scrollToOriginalMessage() {
   } else {
     Toast({
       message: TUITranslateService.t('TUIChat.无法定位到原消息'),
-      type: TOAST_TYPE.WARNING,
+      type: TOAST_TYPE.WARNING
     });
   }
 }
@@ -180,8 +162,8 @@ async function scrollToOriginalMessage() {
 }
 
 .reverse.reference-content {
-    margin-right: 44px;
+  margin-right: 44px;
-    margin-left: auto;
+  margin-left: auto;
 }
 
 .revoked-text {

src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/interface.ts

@@ -56,5 +56,5 @@ export enum MessageQuoteTypeEnum {
   /**
    * merge forward message
    */
-  TYPE_MERGER = 10,
+  TYPE_MERGER = 10
 }

src/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue

@@ -1,20 +1,11 @@
 <template>
   <div>
-    <div
+    <div class="message-record-container" @click="openMergeDetail">
-      class="message-record-container"
+      <div class="record-title">
-      @click="openMergeDetail"
-    >
-      <div
-        class="record-title"
-      >
         {{ props.renderData.title }}
       </div>
       <div class="record-abstract-container">
-        <div
+        <div v-for="(item, index) in props.renderData.abstractList.slice(0, 7)" :key="index" class="record-abstract-item">
-          v-for="(item, index) in props.renderData.abstractList.slice(0, 7)"
-          :key="index"
-          class="record-abstract-item"
-        >
           {{ transformTextWithKeysToEmojiNames(item) }}
         </div>
       </div>
@@ -22,11 +13,7 @@
         {{ TUITranslateService.t('TUIChat.聊天记录') }}
       </div>
     </div>
-    <Overlay
+    <Overlay v-if="!props.disabled && isPC" :visible="isMessageListVisible" @onOverlayClick="isMessageListVisible = false">
-      v-if="!props.disabled && isPC"
-      :visible="isMessageListVisible"
-      @onOverlayClick="isMessageListVisible = false"
-    >
       <SimpleMessageList
         :isMounted="isMessageListVisible"
         :renderData="props.renderData"
@@ -83,7 +70,7 @@ interface IProps {
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
   messageItem: () => ({}) as IMessageModel,
-  disabled: false,
+  disabled: false
 });
 
 const isMessageListVisible = ref(false);

src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="message-stream">
-    <pre
+    <pre ref="messageContentRef" :class="['message-marked', 'message-typewriter']" v-html="markedContent" />
-      ref="messageContentRef"
+    <StreamOperation v-show="isOperationShow" :content="streamContent" />
-      :class="['message-marked', 'message-typewriter']"
-      v-html="markedContent"
-    />
-    <StreamOperation
-      v-show="isOperationShow"
-      :content="streamContent"
-    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -30,7 +23,7 @@ const props = withDefaults(defineProps<IProps>(), {
   payloadData: () => '',
   enableMarkdown: true,
   enableStreaming: true,
-  enableOperation: true,
+  enableOperation: true
 });
 
 const emits = defineEmits(['onStreaming']);
@@ -54,7 +47,7 @@ const typeWriter = new TypeWriter({
   },
   onComplete() {
     isStreaming.value = false;
-  },
+  }
 });
 
 const generateMarkedContent = (content: string) => {
@@ -77,16 +70,17 @@ function startStreaming(content: string[]) {
   }
 }
 
-watch(() => props.payloadData,
+watch(
+  () => props.payloadData,
   (newValue: string, oldValue: string) => {
     if (newValue === oldValue) {
       return;
     }
 
-    if(props.enableMarkdown){
+    if (props.enableMarkdown) {
       TUIReportService.reportFeature(206);
     }
-    if(props.enableStreaming){
+    if (props.enableStreaming) {
       TUIReportService.reportFeature(207);
     }
 
@@ -125,31 +119,36 @@ watch(() => props.payloadData,
     }
 
     prevChunksLength.value = chunks.value?.length;
-  }, {
-    deep: true,
-    immediate: true,
   },
+  {
+    deep: true,
+    immediate: true
+  }
 );
 
 onMounted(() => {
-  watch(() => isStreaming.value, (newValue: boolean, oldValue: boolean) => {
+  watch(
-    if (newValue === oldValue) {
+    () => isStreaming.value,
-      return;
+    (newValue: boolean, oldValue: boolean) => {
+      if (newValue === oldValue) {
+        return;
+      }
+      if (!newValue && oldValue) {
+        emits('onStreaming', streamContent.value, streamContent.value);
+      }
+      if (!newValue) {
+        const codeCopyBtns = messageContentRef.value?.querySelectorAll('.message-marked_copy-btn');
+        codeCopyBtns?.forEach((btn: HTMLElement) => {
+          if (btn.addEventListener) {
+            btn.addEventListener('click', copyCode);
+          }
+        });
+      }
+    },
+    {
+      immediate: true
     }
-    if (!newValue && oldValue) {
+  );
-      emits('onStreaming', streamContent.value, streamContent.value);
-    }
-    if (!newValue) {
-      const codeCopyBtns = messageContentRef.value?.querySelectorAll('.message-marked_copy-btn');
-      codeCopyBtns?.forEach((btn: HTMLElement) => {
-        if (btn.addEventListener) {
-          btn.addEventListener('click', copyCode);
-        }
-      });
-    }
-  }, {
-    immediate: true,
-  });
 });
 
 onUnmounted(() => {
@@ -168,6 +167,5 @@ function copyCode(event: Event) {
     CopyManager.copyTextOrHtml(codeElement.textContent, 'text');
   }
 }
-
 </script>
 <style lang="scss" src="./index.scss"></style>

src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/marked.ts

@@ -15,19 +15,19 @@ const escapeReplacements: Iescape = {
   '<': '&lt;',
   '>': '&gt;',
   '"': '&quot;',
-  '\'': '&#39;',
+  "'": '&#39;'
 };
 const getEscapeReplacement = (ch: string): string => escapeReplacements[ch as keyof Iescape];
 
 export const marked = new Marked(
   {
     mangle: false,
-    headerIds: false,
+    headerIds: false
   },
   markedHighlight({
     highlight(code: string) {
       return hljs.highlightAuto(code).value;
-    },
+    }
   }),
   {
     renderer: {
@@ -48,9 +48,9 @@ export const marked = new Marked(
       },
       link(this: any, href: string | null, title: string | null, text: string) {
         return `<a target="_blank" rel="noreferrer noopenner" class="message-marked_link" href="${href}" title="${title}">${text}</a>`;
-      },
+      }
-    },
+    }
-  },
+  }
 );
 
 export const markedWithPurify = (text: string) => {

src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.vue

@@ -1,25 +1,17 @@
 <template>
-  <div
+  <div ref="operationContainerRef" class="message-stream_operation_container">
-    ref="operationContainerRef"
-    class="message-stream_operation_container"
-  >
     <div class="message-stream_operation_list">
       <div
         v-for="(operation, key) in operationConfig"
         :key="key"
         :class="{
           'message-stream_operation_item': true,
-          'message-stream_operation_item_disabled': operation.isDisabled,
+          'message-stream_operation_item_disabled': operation.isDisabled
         }"
         :title="operation.name"
         @click="(e) => operation.onClick(e, operation.key)"
       >
-        <Icon
+        <Icon class="message-stream_operation_icon" :file="operation.icon" :name="operation.name" size="14px" />
-          class="message-stream_operation_icon"
-          :file="operation.icon"
-          :name="operation.name"
-          size="14px"
-        />
       </div>
     </div>
   </div>
@@ -45,7 +37,7 @@ interface IEmits {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  operations: () => [IOperationType.Copy],
+  operations: () => [IOperationType.Copy]
 });
 const emits = defineEmits<IEmits>();
 
@@ -57,8 +49,8 @@ const defaultOperationConfig: Record<string, IOperation> = {
     isDisabled: false,
     onClick: () => {
       CopyManager.copyTextOrHtml(props.content, 'text');
-    },
+    }
-  },
+  }
 };
 
 const operationConfig = computed(() => {
@@ -76,34 +68,34 @@ const operationConfig = computed(() => {
           }
           config.onClick(e, key);
           emits('onOperationClick', e, key);
-        },
+        }
       };
     })
     .filter(Boolean) as IOperation[];
 });
 </script>
 <style lang="scss" scoped>
-  .message-stream_operation_container {
+.message-stream_operation_container {
+  display: flex;
+  flex-direction: row;
+  align-self: flex-end;
+  padding: 5px;
+  border-radius: 3px;
+  margin: 3px;
+
+  .message-stream_operation_list {
     display: flex;
     flex-direction: row;
-    align-self: flex-end;
-    padding: 5px;
-    border-radius: 3px;
-    margin: 3px;
 
-    .message-stream_operation_list {
+    .message-stream_operation_item {
       display: flex;
-      flex-direction: row;
+    }
 
-      .message-stream_operation_item {
+    .message-stream_operation_item_disabled {
-        display: flex;
+      * {
-      }
+        cursor: not-allowed;
-
-      .message-stream_operation_item_disabled {
-        * {
-          cursor: not-allowed;
-        }
       }
     }
   }
+}
 </style>

src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/type.ts

@@ -1,6 +1,6 @@
 /** type & interface */
 export enum IOperationType {
-  Copy = 'copy',
+  Copy = 'copy'
   // Retry is not supported now
   // Retry = 'retry',
 }

src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/type-writer.ts

@@ -1,7 +1,7 @@
 const chineseRegex = /[\u4e00-\u9fa5]/;
 const wordAndNonWordRegex = /\b\w+\b|[^\w]+/g;
 const isStringArray = (test: any): boolean => {
-  return Array.isArray(test) && !test.some(value => typeof value !== 'string');
+  return Array.isArray(test) && !test.some((value) => typeof value !== 'string');
 };
 
 export class TypeWriter {
@@ -141,7 +141,7 @@ export class TypeWriter {
       return;
     }
 
-    if ((this.curArrayPos >= this.strings.length)) {
+    if (this.curArrayPos >= this.strings.length) {
       this.isTyping = false;
       this.onComplete?.(this);
       return;

src/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue

@@ -1,28 +1,13 @@
 <template>
   <div :class="['message-text-container', isPC && 'text-select']">
-    <span
+    <span v-for="(item, index) in processedContent" :key="index">
-      v-for="(item, index) in processedContent"
+      <span v-if="item.name === 'text'" class="text">
-      :key="index"
-    >
-      <span
-        v-if="item.name === 'text'"
-        class="text"
-      >
         {{ item.text }}
       </span>
-      <span
+      <span v-else-if="item.name === 'url'" class="url-link" @click="navigateToUrl(item.url)">
-        v-else-if="item.name === 'url'"
-        class="url-link"
-        @click="navigateToUrl(item.url)"
-      >
         {{ item.text }}
       </span>
-      <img
+      <img v-else class="emoji" :src="item.src" :alt="item.emojiKey" />
-        v-else
-        class="emoji"
-        :src="item.src"
-        :alt="item.emojiKey"
-      >
     </span>
   </div>
 </template>
@@ -51,8 +36,8 @@ interface TextItem {
 
 const props = withDefaults(defineProps<IProps>(), {
   content: () => ({}),
-  messageItem: () => ({} as IMessageModel),
+  messageItem: () => ({}) as IMessageModel,
-  enableURLHighlight: false,
+  enableURLHighlight: false
 });
 
 const processedContent = ref<TextItem>([]);
@@ -64,12 +49,12 @@ watch(
       return;
     }
 
-    if(props.enableURLHighlight){
+    if (props.enableURLHighlight) {
       TUIReportService.reportFeature(208);
     }
 
-    if(props.messageItem.getMessageContent){
+    if (props.messageItem.getMessageContent) {
-      processedContent.value =  props.messageItem.getMessageContent()?.text;
+      processedContent.value = props.messageItem.getMessageContent()?.text;
     } else {
       processedContent.value = TUIStore.getMessageModel(props.messageItem.ID)?.getMessageContent()?.text;
     }
@@ -80,45 +65,47 @@ watch(
       return;
     }
 
-    processedContent.value = processedContent.value.map((item: TextItem) => {
+    processedContent.value = processedContent.value
-      // handle custom emoji
+      .map((item: TextItem) => {
-      if (item.name === 'img' && item?.type === 'custom') {
+        // handle custom emoji
-        if (!CUSTOM_BASIC_EMOJI_URL) {
+        if (item.name === 'img' && item?.type === 'custom') {
-          console.warn('CUSTOM_BASIC_EMOJI_URL is required for custom emoji.');
+          if (!CUSTOM_BASIC_EMOJI_URL) {
-          return item;
+            console.warn('CUSTOM_BASIC_EMOJI_URL is required for custom emoji.');
+            return item;
+          }
+          if (!item.emojiKey || !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]) {
+            console.warn('emojiKey is required for custom emoji.');
+            return item;
+          }
+          return {
+            ...item,
+            src: CUSTOM_BASIC_EMOJI_URL + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]
+          };
         }
-        if (!item.emojiKey || !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]) {
-          console.warn('emojiKey is required for custom emoji.');
-          return item;
-        }
-        return {
-          ...item,
-          src: CUSTOM_BASIC_EMOJI_URL + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]
-        };
-      }
 
-      // handle url
+        // handle url
-      if (props.enableURLHighlight && item.name === 'text' && item.text) {
+        if (props.enableURLHighlight && item.name === 'text' && item.text) {
-        if(!parseTextAndValidateUrls){
+          if (!parseTextAndValidateUrls) {
-          console.warn('parseTextAndValidateUrls not found. Please update @tencentcloud/universal-api to 2.3.7 or higher.');
+            console.warn('parseTextAndValidateUrls not found. Please update @tencentcloud/universal-api to 2.3.7 or higher.');
-          return item;
+            return item;
+          }
+          const segments = parseTextAndValidateUrls(item.text);
+          if (segments.length) {
+            return segments.map((segment) => ({
+              name: segment.type,
+              text: segment.text,
+              url: segment.url
+            }));
+          }
         }
-        const segments = parseTextAndValidateUrls(item.text);
-        if (segments.length) {
-          return segments.map((segment)=>({
-            name: segment.type,
-            text: segment.text,
-            url: segment.url,
-          }));
-        }
-      }
 
-      return item;
+        return item;
-    })?.flat();
+      })
+      ?.flat();
   },
   {
     deep: true,
-    immediate: true,
+    immediate: true
   }
 );
 
@@ -152,7 +139,9 @@ function navigateToUrl(url: string) {
   user-select: text;
 }
 
-.text,.emoji,.url-link{
+.text,
+.emoji,
+.url-link {
   &::selection {
     background-color: #b4d5fe;
     color: inherit;
@@ -167,7 +156,8 @@ function navigateToUrl(url: string) {
   height: 20px;
 }
 
-.text, .url-link {
+.text,
+.url-link {
   font-size: 14px;
   white-space: pre-wrap;
   word-break: break-all;

src/TUIKit/components/TUIChat/message-list/message-elements/message-timestamp.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div v-if="timestampShowFlag" class="message-timestamp">
-    v-if="timestampShowFlag"
-    class="message-timestamp"
-  >
     {{ timestampShowContent }}
   </div>
 </template>
@@ -13,12 +10,12 @@ import { calculateTimestamp } from '../../utils/utils';
 const props = defineProps({
   currTime: {
     type: Number,
-    default: 0,
+    default: 0
   },
   prevTime: {
     type: Number,
-    default: 0,
+    default: 0
-  },
+  }
 });
 const { currTime, prevTime } = toRefs(props);
 const timestampShowFlag = ref(false);
@@ -48,19 +45,16 @@ watch(
     if (newVal?.toString() === oldVal?.toString()) {
       return;
     } else {
-      timestampShowContent.value = handleItemTime(
+      timestampShowContent.value = handleItemTime(currTime.value, prevTime.value);
-        currTime.value,
-        prevTime.value,
-      );
     }
   },
   {
-    immediate: true,
+    immediate: true
-  },
+  }
 );
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .message-timestamp {
   margin: 10px auto;

src/TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue

@@ -9,13 +9,13 @@ import { computed } from '../../../../adapter-vue';
 const props = defineProps({
   content: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
-  },
+  }
 });
 const tipContent = computed(() => props.content?.text || props.content?.custom || '');
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .message-tip {
   margin: 0 auto;

src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/index.vue

@@ -5,7 +5,7 @@
     :class="{
       'message-translation': true,
       'reverse': props.message.flow === 'out',
-      'error': hasTranslationError,
+      'error': hasTranslationError
     }"
   >
     <TranslationContent
@@ -16,10 +16,7 @@
       @toggleErrorStatus="toggleErrorStatus"
     />
     <div class="copyright">
-      <Icon
+      <Icon :file="checkIcon" size="13px" />
-        :file="checkIcon"
-        size="13px"
-      />
       <div class="copyright-text">
         {{ TUITranslateService.t('TUIChat.由IM提供翻译支持') }}
       </div>
@@ -29,12 +26,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from '../../../../../adapter-vue';
-import {
+import { TUIStore, StoreName, IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../../common/Icon.vue';
 import TranslationContent from './translation-content.vue';
 import checkIcon from '../../../../../assets/icon/check-sm.svg';
@@ -45,7 +37,7 @@ interface IProps {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel
 });
 
 const translationVisible = ref<boolean>(false);
@@ -57,13 +49,13 @@ let isSingleTranslation = true;
 
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
-    translateTextInfo: onMessageTranslationUpdated,
+    translateTextInfo: onMessageTranslationUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
-    translateTextInfo: onMessageTranslationUpdated,
+    translateTextInfo: onMessageTranslationUpdated
   });
 });
 

src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/translation-content.vue

@@ -3,7 +3,7 @@
     class="message-translation-container"
     :style="{
       height: calculateHeight > 0 ? `${calculateHeight}px` : 'auto',
-      width: calculateWidth > 0 ? `${calculateWidth}px` : 'auto',
+      width: calculateWidth > 0 ? `${calculateWidth}px` : 'auto'
     }"
   >
     <div
@@ -11,25 +11,13 @@
       ref="translationContentRef"
       :class="{
         'translation-content': true,
-        'occur': calculateHeight > 0,
+        'occur': calculateHeight > 0
       }"
     >
-      <template
+      <template v-if="translationTextList.length > 0">
-        v-if="translationTextList.length > 0"
+        <span v-for="(text, index) in translationTextList" :key="index">
-      >
+          <img v-if="text.type === 'face'" class="text-face" :src="text.value" />
-        <span
+          <span v-else class="text-plain">{{ text.value }}</span>
-          v-for="(text, index) in translationTextList"
-          :key="index"
-        >
-          <img
-            v-if="text.type === 'face'"
-            class="text-face"
-            :src="text.value"
-          >
-          <span
-            v-else
-            class="text-plain"
-          >{{ text.value }}</span>
         </span>
       </template>
       <template v-else>
@@ -50,10 +38,7 @@
 
 <script lang="ts" setup>
 import { ref, watch, nextTick } from '../../../../../adapter-vue';
-import {
+import { IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import { getBoundingClientRectSync } from '@tencentcloud/universal-api';
 import { TranslationTextType, translator } from '../../../utils/translation';
 
@@ -70,7 +55,7 @@ interface IEmits {
 
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel
 });
 
 const translationFinished = ref<boolean>(false);
@@ -82,46 +67,51 @@ const calculateWidth = ref<number>(0);
 const translationLoadingRef = ref<HTMLDivElement>();
 const translationContentRef = ref<HTMLDivElement>();
 
-watch(() => props.translationContentVisible, (newVal: boolean) => {
+watch(
-  if (newVal) {
+  () => props.translationContentVisible,
-    translator.get(props.message)
+  (newVal: boolean) => {
-      .then((result) => {
+    if (newVal) {
-        translationFinished.value = true;
+      translator
-        translationTextList.value = result;
+        .get(props.message)
+        .then((result) => {
+          translationFinished.value = true;
+          translationTextList.value = result;
 
-        nextTick(() => {
+          nextTick(() => {
-          const { height: originHeight, width: originWidth } = getBoundingClientRectSync(translationLoadingRef.value!);
+            const { height: originHeight, width: originWidth } = getBoundingClientRectSync(translationLoadingRef.value!);
-          const { height, width } = getBoundingClientRectSync(translationContentRef.value!);
+            const { height, width } = getBoundingClientRectSync(translationContentRef.value!);
-          calculateHeight.value = originHeight;
+            calculateHeight.value = originHeight;
-          calculateWidth.value = originWidth;
+            calculateWidth.value = originWidth;
-          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
-            calculateHeight.value = height;
+              calculateHeight.value = height;
-            calculateWidth.value = width;
+              calculateWidth.value = width;
-            if (props.isSingleTranslation) {
+              if (props.isSingleTranslation) {
-              nextTick(() => {
+                nextTick(() => {
-                const { bottom } = getBoundingClientRectSync(props.translationWrapperRef);
+                  const { bottom } = getBoundingClientRectSync(props.translationWrapperRef);
-                const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
+                  const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
-                if (bottom > bottomWindow) {
+                  if (bottom > bottomWindow) {
-                  const timer = setTimeout(() => {
+                    const timer = setTimeout(() => {
-                    props.translationWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
+                      props.translationWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
-                    clearTimeout(timer);
+                      clearTimeout(timer);
-                  }, 150);
+                    }, 150);
-                }
+                  }
-              });
+                });
-            }
+              }
+            });
           });
+        })
+        .catch((err) => {
+          translationFinished.value = true;
+          const { height: originHeight } = getBoundingClientRectSync(translationLoadingRef.value!);
+          calculateHeight.value = originHeight;
+          translationTextList.value = [];
+          emits('toggleErrorStatus', true);
+          translationErrorText.value = err.message;
         });
-      })
+    }
-      .catch((err) => {
+  },
-        translationFinished.value = true;
+  { immediate: true }
-        const { height: originHeight } = getBoundingClientRectSync(translationLoadingRef.value!);
+);
-        calculateHeight.value = originHeight;
-        translationTextList.value = [];
-        emits('toggleErrorStatus', true);
-        translationErrorText.value = err.message;
-      });
-  }
-}, { immediate: true });
 </script>
 
 <style lang="scss" scoped>
@@ -129,7 +119,9 @@ watch(() => props.translationContentVisible, (newVal: boolean) => {
   min-height: 16px;
   min-width: 80px;
   position: relative;
-  transition: width 0.15s ease-out, height 0.15s ease-out, ;
+  transition:
+    width 0.15s ease-out,
+    height 0.15s ease-out;
   font-size: 14px;
 
   .loading {

src/TUIKit/components/TUIChat/message-list/message-elements/message-video.vue

@@ -3,21 +3,15 @@
     <div
       ref="skeleton"
       class="message-video-box"
-      :class="[
+      :class="[(!props.messageItem.progress || props.messageItem.progress === 1) && !isPC && 'message-video-cover']"
-        (!props.messageItem.progress || props.messageItem.progress === 1)
-          && !isPC
-          && 'message-video-cover',
-      ]"
       @click="toggleVideoPreviewer"
     >
       <img
-        v-if="(props.messageItem.progress > 0 && props.messageItem.progress < 1 && poster) ||
+        v-if="(props.messageItem.progress > 0 && props.messageItem.progress < 1 && poster) || (!isPC && poster)"
-          (!isPC && poster)
-        "
         class="message-img"
         :class="[isWidth ? 'is-width' : 'is-height']"
         :src="poster"
-      >
+      />
       <video
         v-else-if="!isPC"
         ref="videoRef"
@@ -27,51 +21,21 @@
         preload="auto"
         muted
       />
-      <video
+      <video v-else ref="videoRef" class="message-img video-web" :src="props.content.url" controls preload="metadata" :poster="poster" />
-        v-else
-        ref="videoRef"
-        class="message-img video-web"
-        :src="props.content.url"
-        controls
-        preload="metadata"
-        :poster="poster"
-      />
     </div>
-    <div
+    <div v-if="isShow && !isPC" class="dialog-video">
-      v-if="isShow && !isPC"
+      <div class="dialog-video-close" @click.stop="toggleVideoPreviewer">
-      class="dialog-video"
-    >
-      <div
-        class="dialog-video-close"
-        @click.stop="toggleVideoPreviewer"
-      >
         <Icon :file="closeSVG" />
       </div>
-      <div
+      <div class="dialog-video-box" :class="[!isPC ? 'dialog-video-h5' : '']" @click.self="toggleVideoPreviewer">
-        class="dialog-video-box"
+        <video :class="[isWidth ? 'is-width' : 'is-height']" :src="props.content.url" controls autoplay />
-        :class="[!isPC ? 'dialog-video-h5' : '']"
-        @click.self="toggleVideoPreviewer"
-      >
-        <video
-          :class="[isWidth ? 'is-width' : 'is-height']"
-          :src="props.content.url"
-          controls
-          autoplay
-        />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {
+import { ref, watch, computed, nextTick, watchEffect, withDefaults } from '../../../../adapter-vue';
-  ref,
-  watch,
-  computed,
-  nextTick,
-  watchEffect,
-  withDefaults,
-} from '../../../../adapter-vue';
 import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 import { handleSkeletonSize } from '../../utils/utils';
 import Icon from '../../../common/Icon.vue';
@@ -85,9 +49,9 @@ const props = withDefaults(
     messageItem: IMessageModel;
   }>(),
   {
-    content: () => ({} as IVideoMessageContent),
+    content: () => ({}) as IVideoMessageContent,
-    messageItem: () => ({} as IMessageModel),
+    messageItem: () => ({}) as IMessageModel
-  },
+  }
 );
 
 const emits = defineEmits(['uploading']);
@@ -103,8 +67,7 @@ watchEffect(async () => {
   if (!props.content) return;
   poster.value = await handlePosterUrl(props.content, props.messageItem);
   nextTick(async () => {
-    const containerWidth
+    const containerWidth = document.getElementById('messageScrollList')?.clientWidth || 0;
-      = document.getElementById('messageScrollList')?.clientWidth || 0;
     const max = !isPC ? Math.min(containerWidth - 172, 300) : 300;
     let size;
     if (props.messageItem.status === 'success') {
@@ -116,10 +79,8 @@ watchEffect(async () => {
         snapshotHeight = posterHeight.value;
       }
       size = handleSkeletonSize(snapshotWidth, snapshotHeight, max, max);
-      skeleton?.value?.style
+      skeleton?.value?.style && (skeleton.value.style.width = `${size.width}px`);
-      && (skeleton.value.style.width = `${size.width}px`);
+      skeleton?.value?.style && (skeleton.value.style.height = `${size.height}px`);
-      skeleton?.value?.style
-      && (skeleton.value.style.height = `${size.height}px`);
       if (isPC) {
         videoRef?.value?.style && (videoRef.value.style.width = `${size.width}px`);
         videoRef?.value?.style && (videoRef.value.style.height = `${size.height}px`);
@@ -135,11 +96,14 @@ const isWidth = computed(() => {
   return snapshotWidth >= snapshotHeight;
 });
 
-watch(() => props.messageItem.status, (newVal: string, oldVal: string) => {
+watch(
-  if (newVal === 'success' && oldVal !== 'success') {
+  () => props.messageItem.status,
-    emits('uploading');
+  (newVal: string, oldVal: string) => {
+    if (newVal === 'success' && oldVal !== 'success') {
+      emits('uploading');
+    }
   }
-});
+);
 
 function toggleVideoPreviewer() {
   // Video upload process does not support full-screen playback.
@@ -172,7 +136,7 @@ function getVideoBase64(url: string) {
         posterHeight.value = height;
         resolve(dataURL);
       },
-      { once: true },
+      { once: true }
     );
   });
 }
@@ -183,19 +147,17 @@ async function handlePosterUrl(messgeContent: IVideoMessageContent, messageItem:
     return await getVideoBase64(messgeContent.url);
   } else {
     return (
-      (messgeContent.snapshotUrl !== transparentPosterUrl && messgeContent.snapshotUrl)
+      (messgeContent.snapshotUrl !== transparentPosterUrl && messgeContent.snapshotUrl) ||
-      || (messageItem?.payload?.snapshotUrl !== transparentPosterUrl
+      (messageItem?.payload?.snapshotUrl !== transparentPosterUrl && messageItem?.payload?.snapshotUrl) ||
-      && messageItem?.payload?.snapshotUrl)
+      (messageItem.payload?.thumbUrl !== transparentPosterUrl && messageItem?.payload?.thumbUrl) ||
-      || (messageItem.payload?.thumbUrl !== transparentPosterUrl
+      (await getVideoBase64(messgeContent.url))
-      && messageItem?.payload?.thumbUrl)
-      || (await getVideoBase64(messgeContent.url))
     );
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .message-video {
   position: relative;
@@ -223,7 +185,7 @@ async function handlePosterUrl(messgeContent: IVideoMessageContent, messageItem:
       border-radius: 10px;
     }
 
-    img[src=""],
+    img[src=''],
     img:not([src]) {
       opacity: 0;
     }
@@ -236,7 +198,7 @@ async function handlePosterUrl(messgeContent: IVideoMessageContent, messageItem:
     &::before {
       position: absolute;
       z-index: 1;
-      content: "";
+      content: '';
       width: 0;
       height: 0;
       border: 10px solid transparent;

src/TUIKit/components/TUIChat/message-list/message-elements/read-status/index.vue

@@ -4,7 +4,7 @@
     :class="{
       'message-label': true,
       'unread': isUseUnreadStyle,
-      'finger-point': isHoverFingerPointer,
+      'finger-point': isHoverFingerPointer
     }"
     @click="openReadUserPanel"
   >
@@ -14,12 +14,7 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from '../../../../../adapter-vue';
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName, IMessageModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import TUIChatConfig from '../../../config';
 
 interface IProps {
@@ -32,7 +27,7 @@ interface IEmits {
 
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({}) as IMessageModel,
+  message: () => ({}) as IMessageModel
 });
 const ReadStatus = TUIChatConfig.getFeatureConfig('ReadStatus');
 
@@ -41,7 +36,7 @@ enum ReadState {
   Unread,
   AllRead,
   NotShow,
-  PartiallyRead,
+  PartiallyRead
 }
 
 const TYPES = TUIChatEngine.TYPES;
@@ -50,13 +45,13 @@ const isDisplayMessageReadReceipt = ref<boolean>(TUIStore.getData(StoreName.USER
 
 onMounted(() => {
   TUIStore.watch(StoreName.USER, {
-    displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate,
+    displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.USER, {
-    displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate,
+    displayMessageReadReceipt: onDisplayMessageReadReceiptUpdate
   });
 });
 
@@ -67,16 +62,7 @@ const isShowReadStatus = computed<boolean>(() => {
   if (!isDisplayMessageReadReceipt.value) {
     return false;
   }
-  const {
+  const { ID, type, flow, status, hasRiskContent, conversationID, conversationType, needReadReceipt = false } = props.message;
-    ID,
-    type,
-    flow,
-    status,
-    hasRiskContent,
-    conversationID,
-    conversationType,
-    needReadReceipt = false,
-  } = props.message;
 
   // Asynchronous message strike: Determine if there is risky content after the message has been sent
   if (hasRiskContent) {
@@ -163,9 +149,9 @@ const isUseUnreadStyle = computed(() => {
 
 const isHoverFingerPointer = computed<boolean>(() => {
   return (
-    props.message.needReadReceipt
+    props.message.needReadReceipt &&
-    && props.message.conversationType === 'GROUP'
+    props.message.conversationType === 'GROUP' &&
-    && (readState.value === ReadState.PartiallyRead || readState.value === ReadState.Unread)
+    (readState.value === ReadState.PartiallyRead || readState.value === ReadState.Unread)
   );
 });
 

src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue

@@ -2,19 +2,12 @@
   <div
     :class="{
       'simple-message-list-container': true,
-      'simple-message-list-container-mobile': isMobile,
+      'simple-message-list-container-mobile': isMobile
     }"
   >
     <div class="header-container">
-      <span
+      <span class="back" @click="backPreviousLevel">
-        class="back"
+        <Icon class="close-icon" :file="addIcon" :size="'18px'" />
-        @click="backPreviousLevel"
-      >
-        <Icon
-          class="close-icon"
-          :file="addIcon"
-          :size="'18px'"
-        />
         <span v-if="isReturn">{{ TUITranslateService.t('TUIChat.返回') }}</span>
         <span v-else>{{ TUITranslateService.t('TUIChat.关闭') }}</span>
       </span>
@@ -23,135 +16,61 @@
         {{ currentMergeMessageInfo.title }}
       </span>
     </div>
-    <div v-if="isDownloadOccurError">
+    <div v-if="isDownloadOccurError">Load Merge Message Error</div>
-      Load Merge Message Error
+    <div v-else-if="isMergeMessageInfoLoaded" ref="simpleMessageListRef" class="message-list">
-    </div>
-    <div
-      v-else-if="isMergeMessageInfoLoaded"
-      ref="simpleMessageListRef"
-      class="message-list"
-    >
       <div
         v-for="item in currentMergeMessageInfo.messageList"
         :key="item.ID"
         :class="{
-          'message-item': true,
+          'message-item': true
         }"
       >
-        <MessageContainer
+        <MessageContainer :sender="item.nick" :avatar="item.avatar" :type="item.messageBody[0].type" :time="item.time">
-          :sender="item.nick"
-          :avatar="item.avatar"
-          :type="item.messageBody[0].type"
-          :time="item.time"
-        >
           <!-- text -->
-          <div
+          <div v-if="item.messageBody[0].type === TYPES.MSG_TEXT" class="message-text">
-            v-if="item.messageBody[0].type === TYPES.MSG_TEXT"
-            class="message-text"
-          >
             <span
               v-for="(textInfo, index) in parseTextToRenderArray(item.messageBody[0].payload['text'])"
               :key="index"
               class="message-text-container"
             >
-              <span
+              <span v-if="textInfo.type === 'text'" class="text">{{ textInfo.content }}</span>
-                v-if="textInfo.type === 'text'"
+              <img v-else class="simple-emoji" :src="textInfo.content" alt="small-face" />
-                class="text"
-              >{{ textInfo.content }}</span>
-              <img
-                v-else
-                class="simple-emoji"
-                :src="textInfo.content"
-                alt="small-face"
-              >
             </span>
           </div>
           <!-- image -->
-          <div
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_IMAGE" class="message-image">
-            v-else-if="item.messageBody[0].type === TYPES.MSG_IMAGE"
+            <img class="image" :src="item.messageBody[0].payload['imageInfoArray'][2]['url']" mode="widthFix" alt="image" />
-            class="message-image"
-          >
-            <img
-              class="image"
-              :src="(item.messageBody[0].payload)['imageInfoArray'][2]['url']"
-              mode="widthFix"
-              alt="image"
-            >
           </div>
           <!-- video -->
-          <div
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_VIDEO" class="message-video">
-            v-else-if="item.messageBody[0].type === TYPES.MSG_VIDEO"
+            <div v-if="isUniFrameWork" @click="previewVideoInUniapp(item.messageBody[0].payload['remoteVideoUrl'])">
-            class="message-video"
+              <image class="image" :src="item.messageBody[0].payload['thumbUrl']" mode="widthFix" alt="image" />
-          >
+              <Icon class="video-play-icon" :file="playIcon" />
-            <div
-              v-if="isUniFrameWork"
-              @click="previewVideoInUniapp((item.messageBody[0].payload)['remoteVideoUrl'])"
-            >
-              <image
-                class="image"
-                :src="(item.messageBody[0].payload)['thumbUrl']"
-                mode="widthFix"
-                alt="image"
-              />
-              <Icon
-                class="video-play-icon"
-                :file="playIcon"
-              />
             </div>
-            <video
+            <video v-else class="video" controls :poster="item.messageBody[0].payload['thumbUrl']">
-              v-else
+              <source :src="item.messageBody[0].payload['remoteVideoUrl']" type="video/mp4" />
-              class="video"
-              controls
-              :poster="(item.messageBody[0].payload)['thumbUrl']"
-            >
-              <source
-                :src="(item.messageBody[0].payload)['remoteVideoUrl']"
-                type="video/mp4"
-              >
             </video>
           </div>
           <!-- audio -->
-          <div
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO" class="message-audio">
-            v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO"
+            <span>{{ TUITranslateService.t('TUIChat.语音') }}&nbsp;</span>
-            class="message-audio"
-          >
-            <span>{{ TUITranslateService.t("TUIChat.语音") }}&nbsp;</span>
             <span>{{ item.messageBody[0].payload.second }}s</span>
           </div>
           <!-- big face -->
-          <div
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_FACE" class="message-face">
-            v-else-if="item.messageBody[0].type === TYPES.MSG_FACE"
+            <img class="image" :src="resolveBigFaceUrl(item.messageBody[0].payload.data)" alt="face" />
-            class="message-face"
-          >
-            <img
-              class="image"
-              :src="resolveBigFaceUrl(item.messageBody[0].payload.data)"
-              alt="face"
-            >
           </div>
           <!-- file -->
-          <div
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_FILE" class="message-file">
-            v-else-if="item.messageBody[0].type === TYPES.MSG_FILE"
-            class="message-file"
-          >
             {{ TUITranslateService.t('TUIChat.[文件]') }}
           </div>
           <!-- location -->
-          <div
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_LOCATION">
-            v-else-if="item.messageBody[0].type === TYPES.MSG_LOCATION"
-          >
             {{ TUITranslateService.t('TUIChat.[地理位置]') }}
           </div>
           <!-- merger -->
-          <div
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_MERGER" class="message-merger" @click.capture="entryNextLevel($event, item)">
-            v-else-if="item.messageBody[0].type === TYPES.MSG_MERGER"
+            <MessageRecord disabled :renderData="item.messageBody[0].payload" />
-            class="message-merger"
-            @click.capture="entryNextLevel($event, item)"
-          >
-            <MessageRecord
-              disabled
-              :renderData="item.messageBody[0].payload"
-            />
           </div>
           <!-- custom -->
           <div v-else-if="item.messageBody[0].type === TYPES.MSG_CUSTOM">
@@ -165,11 +84,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from '../../../../../adapter-vue';
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, TUIChatService, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  TUIChatService,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import addIcon from '../../../../../assets/icon/back.svg';
 import playIcon from '../../../../../assets/icon/video-play.png';
 import Icon from '../../../../common/Icon.vue';
@@ -197,7 +112,7 @@ interface IEmits {
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
   messageID: '',
-  isMounted: false,
+  isMounted: false
 });
 
 const TYPES = TUIChatEngine.TYPES;
@@ -205,45 +120,52 @@ const isDownloadOccurError = ref(false);
 const messageListStack = ref<IMergeMessageContent[]>([]);
 const currentMergeMessageInfo = ref<Partial<IMergeMessageContent>>({
   title: '',
-  messageList: [],
+  messageList: []
 });
 const simpleMessageListRef = ref<HTMLElement>();
 
-watch(() => messageListStack.value.length, async (newValue) => {
+watch(
-  isDownloadOccurError.value = false;
+  () => messageListStack.value.length,
-  if (newValue < 1) {
+  async (newValue) => {
-    return;
+    isDownloadOccurError.value = false;
-  }
+    if (newValue < 1) {
-  const stackTopMessageInfo = messageListStack.value[messageListStack.value.length - 1];
+      return;
-  if (stackTopMessageInfo.downloadKey && stackTopMessageInfo.messageList.length === 0) {
-    try {
-      const res = await TUIChatService.downloadMergedMessages({
-        payload: stackTopMessageInfo,
-        type: TUIChatEngine.TYPES.MSG_MERGER,
-      } as any);
-      // if download complete message, cover the original message in stack top
-      messageListStack.value[messageListStack.value.length - 1] = res.payload;
-    } catch (error) {
-      isDownloadOccurError.value = true;
     }
+    const stackTopMessageInfo = messageListStack.value[messageListStack.value.length - 1];
+    if (stackTopMessageInfo.downloadKey && stackTopMessageInfo.messageList.length === 0) {
+      try {
+        const res = await TUIChatService.downloadMergedMessages({
+          payload: stackTopMessageInfo,
+          type: TUIChatEngine.TYPES.MSG_MERGER
+        } as any);
+        // if download complete message, cover the original message in stack top
+        messageListStack.value[messageListStack.value.length - 1] = res.payload;
+      } catch (error) {
+        isDownloadOccurError.value = true;
+      }
+    }
+    currentMergeMessageInfo.value = messageListStack.value[messageListStack.value.length - 1];
   }
-  currentMergeMessageInfo.value = messageListStack.value[messageListStack.value.length - 1];
+);
-});
 
-watch(() => props.isMounted, (newValue) => {
+watch(
-  // For compatibility with uniapp, use watch to implement onMounted
+  () => props.isMounted,
-  if (newValue) {
+  (newValue) => {
-    if (!props.messageID) {
+    // For compatibility with uniapp, use watch to implement onMounted
-      throw new Error('messageID is required when first render of simple-message-list.');
+    if (newValue) {
+      if (!props.messageID) {
+        throw new Error('messageID is required when first render of simple-message-list.');
+      }
+      const sdkMessagePayload = TUIStore.getMessageModel(props.messageID).getMessage().payload;
+      messageListStack.value = [sdkMessagePayload];
+    } else {
+      messageListStack.value = [];
     }
-    const sdkMessagePayload = TUIStore.getMessageModel(props.messageID).getMessage().payload;
+  },
-    messageListStack.value = [sdkMessagePayload];
+  {
-  } else {
+    immediate: true
-    messageListStack.value = [];
   }
-}, {
+);
-  immediate: true,
-});
 
 const isReturn = computed(() => {
   return messageListStack.value.length > 1;
@@ -269,7 +191,7 @@ function previewVideoInUniapp(url: string) {
   if (isUniFrameWork) {
     const encodedUrl = encodeURIComponent(url);
     uni.navigateTo({
-      url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`,
+      url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`
     });
   }
 }
@@ -291,7 +213,7 @@ function resolveBigFaceUrl(bigFaceKey: string): string {
 </script>
 
 <style scoped lang="scss">
-:not(not){
+:not(not) {
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -344,7 +266,6 @@ function resolveBigFaceUrl(bigFaceKey: string): string {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-
   }
 
   .message-list {

src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/message-container.vue

@@ -17,7 +17,7 @@
           <slot />
         </div>
         <div class="timestamp">
-          {{ calculateTimestamp(props.time*1000) }}
+          {{ calculateTimestamp(props.time * 1000) }}
         </div>
       </div>
     </div>
@@ -39,7 +39,7 @@ interface IProps {
 
 const props = withDefaults(defineProps<IProps>(), {
   sender: '',
-  avatar: '',
+  avatar: ''
 });
 
 const TYPES = TUIChatEngine.TYPES;
@@ -50,7 +50,7 @@ const isNoPadding = computed(() => {
 </script>
 
 <style scoped lang="scss">
-:not(not){
+:not(not) {
   display: flex;
   flex-direction: column;
   min-width: 0;

src/TUIKit/components/TUIChat/message-list/message-group-application/index.vue

@@ -1,17 +1,9 @@
 <template>
   <div>
-    <div
+    <div v-if="groupApplicationCount > 0" class="application-tips">
-      v-if="groupApplicationCount > 0"
+      <div>{{ groupApplicationCount }}{{ TUITranslateService.t('TUIChat.条入群申请') }}</div>
-      class="application-tips"
+      <div class="application-tips-btn" @click="toggleGroupApplicationDrawerShow">
-    >
+        {{ TUITranslateService.t('TUIChat.点击处理') }}
-      <div>
-        {{ groupApplicationCount }}{{ TUITranslateService.t("TUIChat.条入群申请") }}
-      </div>
-      <div
-        class="application-tips-btn"
-        @click="toggleGroupApplicationDrawerShow"
-      >
-        {{ TUITranslateService.t("TUIChat.点击处理") }}
       </div>
     </div>
     <Drawer
@@ -25,12 +17,12 @@
         bottom: {
           minHeight: '60vh',
           maxHeight: '80vh',
-          borderRadius: '12px 12px 0 0',
+          borderRadius: '12px 12px 0 0'
         },
         right: {
           width: '360px',
           borderRadius: '12px 0 0 12px',
-          boxShadow: '0 0 10px 0 #d0d0d0',
+          boxShadow: '0 0 10px 0 #d0d0d0'
         }
       }"
       @onOverlayClick="toggleGroupApplicationDrawerShow"
@@ -41,18 +33,10 @@
         }"
       >
         <header class="application-header">
-          <div
+          <div @click="toggleGroupApplicationDrawerShow">
-            @click="toggleGroupApplicationDrawerShow"
+            <Icon v-if="isPC" :file="closeIcon" :size="'16px'" />
-          >
-            <Icon
-              v-if="isPC"
-              :file="closeIcon"
-              :size="'16px'"
-            />
             <div v-else>
-              {{
+              {{ TUITranslateService.t('关闭') }}
-                TUITranslateService.t('关闭')
-              }}
             </div>
           </div>
         </header>
@@ -62,12 +46,12 @@
             :key="item.nick"
             :class="{
               'application-item': true,
-              'removed': item.isRemoved,
+              'removed': item.isRemoved
             }"
           >
             <Avatar
               :style="{
-                flex: '0 0 auto',
+                flex: '0 0 auto'
               }"
               :url="item.avatar"
               :useSkeletonAnimation="true"
@@ -77,23 +61,15 @@
                 {{ item.nick }}
               </div>
               <div class="application-item-note">
-                {{ TUITranslateService.t("TUIChat.申请加入") }}
+                {{ TUITranslateService.t('TUIChat.申请加入') }}
               </div>
             </div>
-            <div
+            <div class="application-item-operation">
-              class="application-item-operation"
+              <div class="agree" @click="handleApplication(item, 'Agree', index)">
-            >
+                {{ TUITranslateService.t('TUIChat.同意') }}
-              <div
-                class="agree"
-                @click="handleApplication(item, 'Agree', index)"
-              >
-                {{ TUITranslateService.t("TUIChat.同意") }}
               </div>
-              <div
+              <div class="reject" @click="handleApplication(item, 'Reject', index)">
-                class="reject"
+                {{ TUITranslateService.t('TUIChat.拒绝') }}
-                @click="handleApplication(item, 'Reject', index)"
-              >
-                {{ TUITranslateService.t("TUIChat.拒绝") }}
               </div>
             </div>
           </div>
@@ -105,13 +81,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from '../../../../adapter-vue';
-import {
+import { TUIStore, StoreName, TUITranslateService, TUIUserService, TUIGroupService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  TUIUserService,
-  TUIGroupService,
-} from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
 import Avatar from '../../../common/Avatar/index.vue';
 import Drawer from '../../../common/Drawer/index.vue';
@@ -130,7 +100,7 @@ interface ICustomGroupApplication {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  groupID: '',
+  groupID: ''
 });
 
 const drawerDomInstanceRef = ref<InstanceType<typeof Drawer>>();
@@ -147,11 +117,14 @@ watch(isGroupApplicationDrawerShow, (newVal) => {
   }
 });
 
-watch(() => customGroupApplicationList.value.length, (newVal, oldVal) => {
+watch(
-  if (oldVal > 0 && newVal === 0) {
+  () => customGroupApplicationList.value.length,
-    isGroupApplicationDrawerShow.value = false;
+  (newVal, oldVal) => {
+    if (oldVal > 0 && newVal === 0) {
+      isGroupApplicationDrawerShow.value = false;
+    }
   }
-});
+);
 
 /**
  * Retrieves the current group application list based on the provided groupID.
@@ -160,7 +133,7 @@ watch(() => customGroupApplicationList.value.length, (newVal, oldVal) => {
  */
 async function getCurrentGroupApplicationList(): Promise<IGroupApplication[]> {
   const result: IChatResponese<{ applicationList: IGroupApplication[] }> = await TUIGroupService.getGroupApplicationList();
-  const currentGroupApplicationList = result.data.applicationList.filter(application => application.groupID === props.groupID);
+  const currentGroupApplicationList = result.data.applicationList.filter((application) => application.groupID === props.groupID);
   return currentGroupApplicationList;
 }
 
@@ -173,8 +146,8 @@ async function generateCustomGroupApplicationList(): Promise<ICustomGroupApplica
   if (applicationList.length === 0) {
     return [];
   }
-  const userIDList = applicationList.map(application => application.applicationType === 0 ? application.applicant : application.userID);
+  const userIDList = applicationList.map((application) => (application.applicationType === 0 ? application.applicant : application.userID));
-  const { data: userProfileList } = await TUIUserService.getUserProfile({ userIDList }) as IChatResponese<IUserProfile[]>;
+  const { data: userProfileList } = (await TUIUserService.getUserProfile({ userIDList })) as IChatResponese<IUserProfile[]>;
   const mappingFromUserID2Profile: Record<string, IUserProfile> = {};
   userProfileList.forEach((profile: IUserProfile) => {
     mappingFromUserID2Profile[profile.userID] = profile;
@@ -185,7 +158,7 @@ async function generateCustomGroupApplicationList(): Promise<ICustomGroupApplica
       nick: profile.nick || profile.userID || 'anonymous',
       avatar: profile.avatar || '',
       isRemoved: false,
-      application: application,
+      application: application
     };
   });
 
@@ -195,16 +168,18 @@ async function generateCustomGroupApplicationList(): Promise<ICustomGroupApplica
 function handleApplication(customApplication: ICustomGroupApplication, action: 'Agree' | 'Reject', index: number) {
   TUIGroupService.handleGroupApplication({
     handleAction: action,
-    application: customApplication.application,
+    application: customApplication.application
-  }).then(() => {
+  })
-    customGroupApplicationList.value[index].isRemoved = true;
+    .then(() => {
-    setTimeout(() => {
+      customGroupApplicationList.value[index].isRemoved = true;
-      customGroupApplicationList.value.splice(index, 1);
+      setTimeout(() => {
-      groupApplicationCount.value -= 1;
+        customGroupApplicationList.value.splice(index, 1);
-    }, 150);
+        groupApplicationCount.value -= 1;
-  }).catch(() => {
+      }, 150);
-    // TODO: handle error
+    })
-  });
+    .catch(() => {
+      // TODO: handle error
+    });
 }
 
 // --------------- mounted function ---------------
@@ -215,13 +190,13 @@ onMounted(() => {
   });
 
   TUIStore.watch(StoreName.GRP, {
-    groupSystemNoticeList: onGroupSystemNoticeListUpdated,
+    groupSystemNoticeList: onGroupSystemNoticeListUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.GRP, {
-    groupSystemNoticeList: onGroupSystemNoticeListUpdated,
+    groupSystemNoticeList: onGroupSystemNoticeListUpdated
   });
 });
 
@@ -253,7 +228,7 @@ function onGroupSystemNoticeListUpdated() {
   width: 100%;
   padding: 5px 0;
   font-size: 14px;
-  background-color:  #fce4d3;
+  background-color: #fce4d3;
 
   .application-tips-btn {
     color: #006eff;
@@ -316,15 +291,15 @@ function onGroupSystemNoticeListUpdated() {
       flex: 0 0 auto;
       font-size: 14px;
 
-      .agree{
+      .agree {
         color: #679ce1;
-        cursor: pointer
+        cursor: pointer;
       }
 
-      .reject{
+      .reject {
         margin-left: 12px;
         color: #fb355d;
-        cursor: pointer
+        cursor: pointer;
       }
     }
   }

src/TUIKit/components/TUIChat/message-list/message-tool/index.vue

@@ -4,26 +4,11 @@
     ref="messageToolDom"
     :class="['dialog-item', !isPC ? 'dialog-item-h5' : 'dialog-item-web']"
   >
-    <slot
+    <slot v-if="featureConfig.EmojiReaction" name="TUIEmojiPlugin" />
-      v-if="featureConfig.EmojiReaction"
+    <div class="dialog-item-list" :class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'">
-      name="TUIEmojiPlugin"
-    />
-    <div
-      class="dialog-item-list"
-      :class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'"
-    >
       <template v-for="(item, index) in actionItems">
-        <div
+        <div v-if="item.renderCondition()" :key="item.key" class="list-item" @click="getFunction(index)" @mousedown="beforeCopy(item.key)">
-          v-if="item.renderCondition()"
+          <Icon :file="item.iconUrl" :size="'15px'" />
-          :key="item.key"
-          class="list-item"
-          @click="getFunction(index)"
-          @mousedown="beforeCopy(item.key)"
-        >
-          <Icon
-            :file="item.iconUrl"
-            :size="'15px'"
-          />
           <span class="list-item-text">{{ item.text }}</span>
         </div>
       </template>
@@ -32,12 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName, TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { ref, watchEffect, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
 import Icon from '../../../common/Icon.vue';
@@ -73,7 +53,7 @@ interface IEmits {
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
   isMultipleSelectMode: false,
-  messageItem: () => ({}) as IMessageModel,
+  messageItem: () => ({}) as IMessageModel
 });
 const featureConfig = TUIChatConfig.getFeatureConfig();
 
@@ -86,11 +66,9 @@ const actionItems = ref([
     iconUrl: copyIcon,
     renderCondition() {
       if (!featureConfig.DownloadFile || !message.value) return false;
-      return isPC && (message.value?.type === TYPES.MSG_FILE
+      return isPC && (message.value?.type === TYPES.MSG_FILE || message.value.type === TYPES.MSG_VIDEO || message.value.type === TYPES.MSG_IMAGE);
-        || message.value.type === TYPES.MSG_VIDEO
-        || message.value.type === TYPES.MSG_IMAGE);
     },
-    clickEvent: openMessage,
+    clickEvent: openMessage
   },
   {
     key: 'copy',
@@ -100,7 +78,7 @@ const actionItems = ref([
       if (!featureConfig.CopyMessage || !message.value) return false;
       return message.value.type === TYPES.MSG_TEXT;
     },
-    clickEvent: copyMessage,
+    clickEvent: copyMessage
   },
   {
     key: 'revoke',
@@ -110,7 +88,7 @@ const actionItems = ref([
       if (!featureConfig.RevokeMessage || !message.value) return false;
       return message.value.flow === 'out' && message.value.status === 'success';
     },
-    clickEvent: revokeMessage,
+    clickEvent: revokeMessage
   },
   {
     key: 'delete',
@@ -120,7 +98,7 @@ const actionItems = ref([
       if (!featureConfig.DeleteMessage || !message.value) return false;
       return message.value.status === 'success';
     },
-    clickEvent: deleteMessage,
+    clickEvent: deleteMessage
   },
   {
     key: 'forward',
@@ -130,7 +108,7 @@ const actionItems = ref([
       if (!featureConfig.ForwardMessage || !message.value) return false;
       return message.value.status === 'success';
     },
-    clickEvent: forwardSingleMessage,
+    clickEvent: forwardSingleMessage
   },
   {
     key: 'quote',
@@ -141,7 +119,7 @@ const actionItems = ref([
       const _message = TUIStore.getMessageModel(message.value.ID);
       return message.value.status === 'success' && !_message.getSignalingInfo();
     },
-    clickEvent: quoteMessage,
+    clickEvent: quoteMessage
   },
   {
     key: 'translate',
@@ -152,7 +130,7 @@ const actionItems = ref([
       if (!featureConfig.TranslateMessage || !message.value) return false;
       return message.value.status === 'success' && message.value.type === TYPES.MSG_TEXT;
     },
-    clickEvent: translateMessage,
+    clickEvent: translateMessage
   },
   {
     key: 'convert',
@@ -163,7 +141,7 @@ const actionItems = ref([
       if (!featureConfig.VoiceToText || !message.value) return false;
       return message.value.status === 'success' && message.value.type === TYPES.MSG_AUDIO;
     },
-    clickEvent: convertVoiceToText,
+    clickEvent: convertVoiceToText
   },
   {
     key: 'multi-select',
@@ -173,8 +151,8 @@ const actionItems = ref([
       if (!featureConfig.MultiSelection || !message.value) return false;
       return message.value.status === 'success';
     },
-    clickEvent: multipleSelectMessage,
+    clickEvent: multipleSelectMessage
-  },
+  }
 ]);
 
 const message = ref<IMessageModel>();
@@ -183,14 +161,14 @@ const messageToolDom = ref<HTMLElement>();
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
     translateTextInfo: onMessageTranslationInfoUpdated,
-    voiceToTextInfo: onMessageConvertInfoUpdated,
+    voiceToTextInfo: onMessageConvertInfoUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
     translateTextInfo: onMessageTranslationInfoUpdated,
-    voiceToTextInfo: onMessageConvertInfoUpdated,
+    voiceToTextInfo: onMessageConvertInfoUpdated
   });
 });
 
@@ -242,7 +220,7 @@ function revokeMessage() {
         const message = TUITranslateService.t('TUIChat.已过撤回时限');
         Toast({
           message,
-          type: TOAST_TYPE.ERROR,
+          type: TOAST_TYPE.ERROR
         });
       }
     });
@@ -257,7 +235,7 @@ function deleteMessage() {
 async function copyMessage() {
   if (isUniFrameWork) {
     TUIGlobal?.setClipboardData({
-      data: transformTextWithKeysToEmojiNames(message.value?.payload?.text),
+      data: transformTextWithKeysToEmojiNames(message.value?.payload?.text)
     });
   } else {
     // uni-app conditional compilation will not run the following code
@@ -295,17 +273,17 @@ function translateMessage() {
   if (!enable) {
     Toast({
       message: TUITranslateService.t('TUIChat.请开通翻译功能'),
-      type: TOAST_TYPE.WARNING,
+      type: TOAST_TYPE.WARNING
     });
     return;
   }
 
   if (!message.value) return;
-  const index = actionItems.value.findIndex(item => item.key === 'translate');
+  const index = actionItems.value.findIndex((item) => item.key === 'translate');
   TUIStore.update(StoreName.CHAT, 'translateTextInfo', {
     conversationID: message.value.conversationID,
     messageID: message.value.ID,
-    visible: !actionItems.value[index].visible,
+    visible: !actionItems.value[index].visible
   });
 }
 
@@ -313,17 +291,17 @@ function convertVoiceToText() {
   const enable = TUIStore.getData(StoreName.APP, 'enabledVoiceToText');
   if (!enable) {
     Toast({
-      message: TUITranslateService.t('TUIChat.请开通语音转文字功能'),
+      message: TUITranslateService.t('TUIChat.请开通语音转文字功能')
     });
     return;
   }
 
   if (!message.value) return;
-  const index = actionItems.value.findIndex(item => item.key === 'convert');
+  const index = actionItems.value.findIndex((item) => item.key === 'convert');
   TUIStore.update(StoreName.CHAT, 'voiceToTextInfo', {
     conversationID: message.value.conversationID,
     messageID: message.value.ID,
-    visible: !actionItems.value[index].visible,
+    visible: !actionItems.value[index].visible
   });
 }
 
@@ -334,7 +312,7 @@ function multipleSelectMessage() {
 function onMessageTranslationInfoUpdated(info: Map<string, ITranslateInfo[]>) {
   if (info === undefined) return;
   const translationInfoList = info.get(props.messageItem.conversationID) || [];
-  const idx = actionItems.value.findIndex(item => item.key === 'translate');
+  const idx = actionItems.value.findIndex((item) => item.key === 'translate');
   for (let i = 0; i < translationInfoList.length; ++i) {
     const { messageID, visible } = translationInfoList[i];
     if (messageID === props.messageItem.ID) {
@@ -349,7 +327,7 @@ function onMessageTranslationInfoUpdated(info: Map<string, ITranslateInfo[]>) {
 function onMessageConvertInfoUpdated(info: Map<string, IConvertInfo[]>) {
   if (info === undefined) return;
   const convertInfoList = info.get(props.messageItem.conversationID) || [];
-  const idx = actionItems.value.findIndex(item => item.key === 'convert');
+  const idx = actionItems.value.findIndex((item) => item.key === 'convert');
   for (let i = 0; i < convertInfoList.length; ++i) {
     const { messageID, visible } = convertInfoList[i];
     if (messageID === props.messageItem.ID) {
@@ -362,12 +340,12 @@ function onMessageConvertInfoUpdated(info: Map<string, IConvertInfo[]>) {
 }
 
 defineExpose({
-  messageToolDom,
+  messageToolDom
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .dialog-item-web {
   background: #fff;

src/TUIKit/components/TUIChat/message-list/message-tool/message-revoked.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="revoke">
     <span v-if="message.flow === 'in'">{{ message.nick || message.from }}</span>
-    <span v-else-if="message.from === message.revoker">{{ TUITranslateService.t("TUIChat.您") }}</span>
+    <span v-else-if="message.from === message.revoker">{{ TUITranslateService.t('TUIChat.您') }}</span>
     <span v-else>{{ message.revoker }}</span>
-    <span>{{ TUITranslateService.t("TUIChat.撤回了一条消息") }}</span>
+    <span>{{ TUITranslateService.t('TUIChat.撤回了一条消息') }}</span>
-    <span
+    <span v-if="message.flow === 'out' && isEditMsg" class="edit" @click="messageEdit">{{ TUITranslateService.t('TUIChat.重新编辑') }}</span>
-      v-if="message.flow === 'out' && isEditMsg"
-      class="edit"
-      @click="messageEdit"
-    >{{ TUITranslateService.t("TUIChat.重新编辑") }}</span>
   </div>
 </template>
 
@@ -18,12 +14,12 @@ import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-eng
 const props = defineProps({
   isEdit: {
     type: Boolean,
-    default: () => false,
+    default: () => false
   },
   messageItem: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
-  },
+  }
 });
 
 const message = ref<IMessageModel>();
@@ -39,7 +35,7 @@ const messageEdit = () => {
 };
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+@import '../../../../assets/styles/common';
 
 .revoke {
   display: flex;

src/TUIKit/components/TUIChat/message-list/read-receipt-panel/index.vue

@@ -1,27 +1,19 @@
 <template>
-  <Overlay
+  <Overlay :maskColor="'transparent'" @onOverlayClick="closeReadReceiptPanel">
-    :maskColor="'transparent'"
-    @onOverlayClick="closeReadReceiptPanel"
-  >
     <div
       :class="{
         'read-receipt-panel': true,
         'read-receipt-panel-mobile': isMobile,
         'read-receipt-panel-uni': isUniFrameWork,
-        'read-receipt-panel-close-mobile': isMobile && isPanelClose,
+        'read-receipt-panel-close-mobile': isMobile && isPanelClose
       }"
     >
       <div class="header">
         <div class="header-text">
-          {{ TUITranslateService.t("TUIChat.消息详情") }}
+          {{ TUITranslateService.t('TUIChat.消息详情') }}
         </div>
         <div class="header-close-icon">
-          <Icon
+          <Icon size="12px" hotAreaSize="8" :file="closeIcon" @onClick="closeReadReceiptPanel" />
-            size="12px"
-            hotAreaSize="8"
-            :file="closeIcon"
-            @onClick="closeReadReceiptPanel"
-          />
         </div>
       </div>
       <div class="read-status-counter-container">
@@ -30,7 +22,7 @@
           :key="tabName"
           :class="{
             'read-status-counter': true,
-            'active': tabName === currentTabName,
+            'active': tabName === currentTabName
           }"
           @click="toggleTabName(tabName)"
         >
@@ -38,60 +30,34 @@
             {{ tabInfo[tabName].tabName }}
           </div>
           <div class="status-count">
-            {{ tabInfo[tabName].count === undefined ? "" : tabInfo[tabName].count }}
+            {{ tabInfo[tabName].count === undefined ? '' : tabInfo[tabName].count }}
           </div>
         </div>
       </div>
       <div class="read-status-member-list">
-        <div
+        <div v-if="tabInfo[currentTabName].count === 0 && isFirstLoadFinished" class="empty-list-tip">
-          v-if="tabInfo[currentTabName].count === 0 && isFirstLoadFinished"
-          class="empty-list-tip"
-        >
           - {{ TUITranslateService.t('TUIChat.空') }} -
         </div>
         <template v-else-if="isFirstLoadFinished">
           <template v-if="currentTabName === 'unread'">
-            <div
+            <div v-for="item in tabInfo[currentTabName].memberList" :key="item.userID" class="read-status-member-container">
-              v-for="item in tabInfo[currentTabName].memberList"
+              <Avatar class="read-status-avatar" useSkeletonAnimation :url="item.avatar || ''" />
-              :key="item.userID"
-              class="read-status-member-container"
-            >
-              <Avatar
-                class="read-status-avatar"
-                useSkeletonAnimation
-                :url="item.avatar || ''"
-              />
               <div class="username">
                 {{ item.nick || item.userID }}
               </div>
             </div>
           </template>
           <template v-if="currentTabName === 'read'">
-            <div
+            <div v-for="item in tabInfo[currentTabName].memberList" :key="item.userID" class="read-status-member-container">
-              v-for="item in tabInfo[currentTabName].memberList"
+              <Avatar class="read-status-avatar" useSkeletonAnimation :url="item.avatar" />
-              :key="item.userID"
-              class="read-status-member-container"
-            >
-              <Avatar
-                class="read-status-avatar"
-                useSkeletonAnimation
-                :url="item.avatar"
-              />
               <div class="username">
                 {{ item.nick || item.userID }}
               </div>
             </div>
           </template>
         </template>
-        <div
+        <div v-if="isFirstLoadFinished" class="fetch-more-container">
-          v-if="isFirstLoadFinished"
+          <FetchMore :isFetching="isPullDownFetching" :isTerminateObserve="isStopFetchMore" @onExposed="pullDownFetchMoreData" />
-          class="fetch-more-container"
-        >
-          <FetchMore
-            :isFetching="isPullDownFetching"
-            :isTerminateObserve="isStopFetchMore"
-            @onExposed="pullDownFetchMoreData"
-          />
         </div>
       </div>
     </div>
@@ -122,7 +88,7 @@ interface IEmits {
 
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({}) as IMessageModel,
+  message: () => ({}) as IMessageModel
 });
 
 let lastUnreadCursor: string = '';
@@ -131,7 +97,7 @@ const tabNameList: TabName[] = ['unread', 'read'];
 const isListFetchCompleted: Record<TabName, boolean> = {
   unread: false,
   read: false,
-  close: false,
+  close: false
 };
 
 const isPullDownFetching = ref<boolean>(false);
@@ -152,7 +118,7 @@ watch(
   () => props.message.readReceiptInfo.readCount,
   () => {
     initAndRefetchReceiptInfomation();
-  },
+  }
 );
 
 async function fetchGroupMessageRecriptMemberListByType(readType: ReadType = 'all') {
@@ -166,7 +132,7 @@ async function fetchGroupMessageRecriptMemberListByType(readType: ReadType = 'al
       message,
       filter: 1,
       cursor: lastUnreadCursor,
-      count: 100,
+      count: 100
     });
     if (unreadResult) {
       lastUnreadCursor = unreadResult.data.cursor;
@@ -181,7 +147,7 @@ async function fetchGroupMessageRecriptMemberListByType(readType: ReadType = 'al
       message,
       filter: 0,
       cursor: lastReadCursor,
-      count: 100,
+      count: 100
     });
     if (readResult) {
       lastReadCursor = readResult.data.cursor;
@@ -197,12 +163,12 @@ async function fetchGroupMessageRecriptMemberListByType(readType: ReadType = 'al
   return {
     unreadResult: {
       count: totalUnreadCount,
-      ...unreadResult.data,
+      ...unreadResult.data
     },
     readResult: {
       count: totalReadCount,
-      ...readResult.data,
+      ...readResult.data
-    },
+    }
   };
 }
 
@@ -211,7 +177,7 @@ async function pullDownFetchMoreData() {
    * Use isPullDownFetching to control the state of the FetchMore component
    * Also, implement locking for intersectionObserver under uniapp
    * Because there is no isIntersecting in uniapp, it is impossible to determine whether the observed element has entered or exited the observation area
-  */
+   */
   if (isListFetchCompleted[currentTabName.value] || isPullDownFetching.value) {
     return;
   }
@@ -281,18 +247,18 @@ function generateInitalTabInfo(): ITabInfo {
     read: {
       tabName: TUITranslateService.t('TUIChat.已读'),
       count: undefined,
-      memberList: [],
+      memberList: []
     },
     unread: {
       tabName: TUITranslateService.t('TUIChat.未读'),
       count: undefined,
-      memberList: [],
+      memberList: []
     },
     close: {
       tabName: TUITranslateService.t('TUIChat.关闭'),
       count: undefined,
-      memberList: [],
+      memberList: []
-    },
+    }
   };
 }
 

src/TUIKit/components/TUIChat/message-list/scroll-button/index.vue

@@ -1,14 +1,6 @@
 <template>
-  <div
+  <div v-if="isScrollButtonVisible" class="scroll-button" @click="scrollToMessageListBottom">
-    v-if="isScrollButtonVisible"
+    <Icon width="10px" height="10px" :file="doubleArrowIcon" />
-    class="scroll-button"
-    @click="scrollToMessageListBottom"
-  >
-    <Icon
-      width="10px"
-      height="10px"
-      :file="doubleArrowIcon"
-    />
     <div class="scroll-button-text">
       {{ scrollButtonContent }}
     </div>
@@ -17,13 +9,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, computed, watch } from '../../../../adapter-vue';
-import {
+import { TUIStore, StoreName, IMessageModel, IConversationModel, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  IConversationModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../../common/Icon.vue';
 import doubleArrowIcon from '../../../../assets/icon/double-arrow.svg';
 import { getBoundingClientRect } from '@tencentcloud/universal-api';
@@ -42,36 +28,37 @@ const isScrollOverOneScreen = ref<boolean>(false);
 const isExistLastMessage = ref<boolean>(false);
 const isScrollButtonVisible = ref<boolean>(false);
 const scrollButtonContent = computed(() =>
-  newMessageCount.value ? `${newMessageCount.value}${TUITranslateService.t('TUIChat.条新消息')}` : TUITranslateService.t('TUIChat.回到最新位置'),
+  newMessageCount.value ? `${newMessageCount.value}${TUITranslateService.t('TUIChat.条新消息')}` : TUITranslateService.t('TUIChat.回到最新位置')
 );
 
-watch(() => [isScrollOverOneScreen.value, isExistLastMessage.value],
+watch(
+  () => [isScrollOverOneScreen.value, isExistLastMessage.value],
   () => {
     isScrollButtonVisible.value = isScrollOverOneScreen.value || isExistLastMessage.value;
     if (!isScrollButtonVisible.value) {
       resetNewMessageCount();
     }
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 onMounted(() => {
   TUIStore.watch(StoreName.CHAT, {
     messageList: onMessageListUpdated,
-    newMessageList: onNewMessageListUpdated,
+    newMessageList: onNewMessageListUpdated
   });
   TUIStore.watch(StoreName.CONV, {
-    currentConversation: onCurrentConversationUpdated,
+    currentConversation: onCurrentConversationUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CHAT, {
     messageList: onMessageListUpdated,
-    newMessageList: onNewMessageListUpdated,
+    newMessageList: onNewMessageListUpdated
   });
   TUIStore.unwatch(StoreName.CONV, {
-    currentConversation: onCurrentConversationUpdated,
+    currentConversation: onCurrentConversationUpdated
   });
 });
 
@@ -82,15 +69,19 @@ function isTypingMessage(message: IMessageModel): boolean {
 function onMessageListUpdated(newMessageList: IMessageModel[]) {
   messageList.value = newMessageList || [];
   const lastMessage = messageList.value?.[messageList.value?.length - 1];
-  isExistLastMessage.value = !!(
+  isExistLastMessage.value = !!(lastMessage && lastMessage?.time < currentLastMessageTime?.value);
-    lastMessage && lastMessage?.time < currentLastMessageTime?.value
-  );
 }
 
 function onNewMessageListUpdated(newMessageList: IMessageModel[]) {
   if (Array.isArray(newMessageList) && isScrollButtonVisible.value) {
     newMessageList.forEach((message: IMessageModel) => {
-      if (message && message.conversationID === currentConversationID.value && !message.isDeleted && !message.isRevoked && !isTypingMessage(message)) {
+      if (
+        message &&
+        message.conversationID === currentConversationID.value &&
+        !message.isDeleted &&
+        !message.isRevoked &&
+        !isTypingMessage(message)
+      ) {
         newMessageCount.value += 1;
       }
     });
@@ -109,7 +100,7 @@ function onCurrentConversationUpdated(conversation: IConversationModel | undefin
 async function judgeScrollOverOneScreen(e: Event) {
   if (e.target) {
     try {
-      const { height } = await getBoundingClientRect(`#${(e.target as HTMLElement)?.id}`, 'messageList') || {};
+      const { height } = (await getBoundingClientRect(`#${(e.target as HTMLElement)?.id}`, 'messageList')) || {};
       const scrollHeight = (e.target as HTMLElement)?.scrollHeight || (e.detail as HTMLElement)?.scrollHeight;
       const scrollTop = (e.target as HTMLElement)?.scrollTop || (e.detail as HTMLElement)?.scrollTop || 0;
       // while scroll over one screen show this scroll button.
@@ -144,7 +135,7 @@ function scrollToMessageListBottom() {
 
 defineExpose({
   judgeScrollOverOneScreen,
-  isScrollButtonVisible,
+  isScrollButtonVisible
 });
 </script>
 

src/TUIKit/components/TUIChat/mulitple-select-panel/index.vue

@@ -2,52 +2,35 @@
   <div
     :class="{
       'mulitple-select-panel': true,
-      'mulitple-select-panel-mobile': isMobile,
+      'mulitple-select-panel-mobile': isMobile
     }"
   >
-    <div
+    <div class="forward-button" @click="oneByOneForwardMessage">
-      class="forward-button"
+      <Icon :file="ForwardEachIcon" :size="iconSize" />
-      @click="oneByOneForwardMessage"
-    >
-      <Icon
-        :file="ForwardEachIcon"
-        :size="iconSize"
-      />
       <span
         :class="{
           'forward-button-text': true,
-          'forward-button-text-mobile': isMobile,
+          'forward-button-text-mobile': isMobile
         }"
-      >{{ TUITranslateService.t('TUIChat.逐条转发') }}</span>
+        >{{ TUITranslateService.t('TUIChat.逐条转发') }}</span
+      >
     </div>
-    <div
+    <div class="forward-button" @click="mergeForwardMessage">
-      class="forward-button"
+      <Icon :file="ForwardMergeIcon" :size="iconSize" />
-      @click="mergeForwardMessage"
-    >
-      <Icon
-        :file="ForwardMergeIcon"
-        :size="iconSize"
-      />
       <span
         :class="{
           'forward-button-text': true,
-          'forward-button-text-mobile': isMobile,
+          'forward-button-text-mobile': isMobile
         }"
-      >{{ TUITranslateService.t('TUIChat.合并转发') }}</span>
+        >{{ TUITranslateService.t('TUIChat.合并转发') }}</span
+      >
     </div>
-    <div
+    <div class="forward-button" @click="cancelMultipleSelect">
-      class="forward-button"
+      <Icon class="cancel-button-icon" :file="AddIcon" :size="iconSize" />
-      @click="cancelMultipleSelect"
-    >
-      <Icon
-        class="cancel-button-icon"
-        :file="AddIcon"
-        :size="iconSize"
-      />
       <span
         :class="{
           'forward-button-text': true,
-          'forward-button-text-mobile': isMobile,
+          'forward-button-text-mobile': isMobile
         }"
       >
         {{ TUITranslateService.t('TUIChat.取消') }}
@@ -58,9 +41,7 @@
 
 <script lang="ts" setup>
 import { ref } from '../../../adapter-vue';
-import {
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../common/Icon.vue';
 import ForwardEachIcon from '../../../assets/icon/forward-each.svg';
 import ForwardMergeIcon from '../../../assets/icon/forward-merge.svg';
@@ -104,7 +85,7 @@ function cancelMultipleSelect() {
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
-  background-color: #EBF0F6;
+  background-color: #ebf0f6;
 
   &-mobile {
     height: 64px;

src/TUIKit/components/TUIChat/offlinePushInfoManager/const.ts

@@ -8,10 +8,10 @@ export const DEFAULT_DESC: any = {
   [TUIChatEngine.TYPES.MSG_VIDEO]: '[视频]',
   [TUIChatEngine.TYPES.MSG_LOCATION]: '[地理位置]',
   [TUIChatEngine.TYPES.MSG_MERGER]: '[聊天记录]',
-  [TUIChatEngine.TYPES.MSG_CUSTOM]: '[自定义消息]',
+  [TUIChatEngine.TYPES.MSG_CUSTOM]: '[自定义消息]'
 };
 
 export enum PUSH_SCENE {
   CHAT = 'chat',
-  CALL = 'call',
+  CALL = 'call'
 }

src/TUIKit/components/TUIChat/offlinePushInfoManager/info.ts

@@ -2,7 +2,7 @@ import { IChatOfflinePushInfo, ICallOfflinePushInfo } from './interface';
 
 export const chatOfflinePushInfo: IChatOfflinePushInfo = {
   androidInfo: {},
-  apnsInfo: {},
+  apnsInfo: {}
 };
 
 export const callOfflinePushInfo: ICallOfflinePushInfo = {};

src/TUIKit/components/TUIChat/offlinePushInfoManager/offlinePushInfoManager.ts

@@ -1,9 +1,6 @@
 import TUIChatEngine, { IConversationModel, StoreName, TUIStore, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { transformTextWithKeysToEmojiNames } from '../emoji-config';
-import {
+import { IChatOfflinePushInfo, IOfflinePushInfoCreateParams } from './interface';
-  IChatOfflinePushInfo,
-  IOfflinePushInfoCreateParams,
-} from './interface';
 import { chatOfflinePushInfo, callOfflinePushInfo } from './info';
 import { DEFAULT_DESC, PUSH_SCENE } from './const';
 
@@ -16,7 +13,7 @@ class OfflinePushInfoManager {
   private constructor() {
     this.offlinePushInfo = {
       [PUSH_SCENE.CHAT]: chatOfflinePushInfo,
-      [PUSH_SCENE.CALL]: callOfflinePushInfo,
+      [PUSH_SCENE.CALL]: callOfflinePushInfo
     };
   }
 
@@ -62,13 +59,13 @@ class OfflinePushInfoManager {
       nickName: userInfo?.nick,
       chatType: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? 2 : 1,
       version: 1,
-      action: 1,
+      action: 1
     };
     return {
       title: this.genTitle(conversation, userInfo),
       description: this.genDesc(messageType, payload),
       extension: JSON.stringify({ entity }),
-      ...this.offlinePushInfo[PUSH_SCENE.CHAT],
+      ...this.offlinePushInfo[PUSH_SCENE.CHAT]
     };
   }
 }

src/TUIKit/components/TUIChat/server.ts

@@ -1,10 +1,5 @@
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import {
+import { IMessageModel, TUIStore, StoreName, TUIChatService } from '@tencentcloud/chat-uikit-engine';
-  IMessageModel,
-  TUIStore,
-  StoreName,
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
 import TUIChatConfig from './config';
 
 export default class TUIChatServer {
@@ -21,7 +16,7 @@ export default class TUIChatServer {
     TUIStore.watch(StoreName.CONV, {
       currentConversationID: (id: string) => {
         this.currentConversationID = id;
-      },
+      }
     });
   }
 
@@ -66,8 +61,8 @@ export default class TUIChatServer {
   }
 
   /**
- * Listen for the success notification.
+   * Listen for the success notification.
- */
+   */
   public onNotifyEvent(eventName: string, subKey: string, params?: Record<string, any>) {
     if (eventName === TUIConstants.TUITheme.EVENT.THEME_CHANGED) {
       switch (subKey) {

src/TUIKit/components/TUIChat/utils/conversationDraft.ts

@@ -4,7 +4,7 @@ import {
   StoreName,
   TUIConversationService,
   TUIStore,
-  TUITranslateService,
+  TUITranslateService
 } from '@tencentcloud/chat-uikit-engine';
 import { transformTextWithKeysToEmojiNames } from '../emoji-config';
 import { JSONToObject } from '../../../utils/index';
@@ -13,7 +13,7 @@ class ConversationDraftManager {
   private static instance: ConversationDraftManager | null = null;
   private quoteMessageMap = new Map<string, IMessageModel>();
 
-  private constructor() { }
+  private constructor() {}
 
   public static getInstance(): ConversationDraftManager {
     if (!ConversationDraftManager.instance) {
@@ -22,7 +22,12 @@ class ConversationDraftManager {
     return ConversationDraftManager.instance;
   }
 
-  public setStore(conversationID: string, draftContent: string, abstract: string, quoteMessage?: { type: 'quote' | 'reply'; message: IMessageModel }) {
+  public setStore(
+    conversationID: string,
+    draftContent: string,
+    abstract: string,
+    quoteMessage?: { type: 'quote' | 'reply'; message: IMessageModel }
+  ) {
     if (conversationID && (this.isEditorNotEmpty(draftContent) || quoteMessage?.message?.ID)) {
       let additionalDraftInfo = {};
       if (quoteMessage?.message?.ID) {
@@ -34,8 +39,8 @@ class ConversationDraftManager {
         draftInfo: {
           html: draftContent,
           abstract: abstract,
-          ...additionalDraftInfo,
+          ...additionalDraftInfo
-        },
+        }
       };
       TUIConversationService.setConversationDraft(draftParams);
       TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
@@ -49,7 +54,10 @@ class ConversationDraftManager {
     }
     if (conversation.conversationID && conversation.draftText) {
       const draftObject = JSONToObject(conversation.draftText);
-      TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: this.quoteMessageMap.get(draftObject.messageID) || undefined, type: draftObject.type });
+      TUIStore.update(StoreName.CHAT, 'quoteMessage', {
+        message: this.quoteMessageMap.get(draftObject.messageID) || undefined,
+        type: draftObject.type
+      });
       setEditorContentCallback(draftObject.html);
     }
     TUIConversationService.setConversationDraft({ conversationID: conversation.conversationID });

src/TUIKit/components/TUIChat/utils/convertVoiceToText.ts

@@ -1,8 +1,4 @@
-import {
+import { IMessageModel, TUIChatService, TUIStore } from '@tencentcloud/chat-uikit-engine';
-  IMessageModel,
-  TUIChatService,
-  TUIStore,
-} from '@tencentcloud/chat-uikit-engine';
 import { IChatResponese } from '../../../interface';
 
 class Convertor {
@@ -35,7 +31,7 @@ class Convertor {
     }
     // step3: get response from api
     const response: IChatResponese<{ result: string }> = await TUIChatService.convertVoiceToText({
-      message: currentMessage,
+      message: currentMessage
     });
     let { data: { result } = {} } = response;
     if (result) {

src/TUIKit/components/TUIChat/utils/copy.ts

@@ -33,7 +33,7 @@ class CopyManager {
       anchorNode: selection.anchorNode,
       anchorOffset: selection.anchorOffset,
       focusNode: selection.focusNode,
-      focusOffset: selection.focusOffset,
+      focusOffset: selection.focusOffset
     };
   }
 
@@ -49,9 +49,8 @@ class CopyManager {
     }
 
     const range = document.createRange();
-    const isForwardSelection = anchorNode === focusNode
+    const isForwardSelection =
-      ? anchorOffset <= focusOffset
+      anchorNode === focusNode ? anchorOffset <= focusOffset : anchorNode.compareDocumentPosition(focusNode) & Node.DOCUMENT_POSITION_FOLLOWING;
-      : anchorNode.compareDocumentPosition(focusNode) & Node.DOCUMENT_POSITION_FOLLOWING;
     if (isForwardSelection) {
       range.setStart(anchorNode, anchorOffset);
       range.setEnd(focusNode, focusOffset);
@@ -88,7 +87,7 @@ class CopyManager {
   }
 
   public async copyTextOrHtml(content: string, type: 'text' | 'html'): Promise<void> {
-    const mimeType = (type === 'html') ? 'text/html' : 'text/plain';
+    const mimeType = type === 'html' ? 'text/html' : 'text/plain';
     // prefer use clipboard api to copy node or text
     if (navigator.clipboard) {
       try {
@@ -97,7 +96,7 @@ class CopyManager {
         await navigator.clipboard.write([clipboardItem]);
         Toast({
           message: TUITranslateService.t('TUIChat.复制成功'),
-          type: TOAST_TYPE.SUCCESS,
+          type: TOAST_TYPE.SUCCESS
         });
         return;
       } catch (err) {
@@ -132,12 +131,12 @@ class CopyManager {
       document.execCommand('copy');
       Toast({
         message: TUITranslateService.t('TUIChat.复制成功'),
-        type: TOAST_TYPE.SUCCESS,
+        type: TOAST_TYPE.SUCCESS
       });
     } catch (err) {
       Toast({
         message: TUITranslateService.t('TUIChat.此机型暂不支持复制'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
       console.warn('use document.execCommand copy failed:', err);
     } finally {

src/TUIKit/components/TUIChat/utils/sendMessage.ts

@@ -4,7 +4,7 @@ import TUIChatEngine, {
   StoreName,
   TUITranslateService,
   IConversationModel,
-  SendMessageParams,
+  SendMessageParams
 } from '@tencentcloud/chat-uikit-engine';
 import { Toast, TOAST_TYPE } from '../../common/Toast/index';
 import { isEnabledMessageReadReceiptGlobal } from '../utils/utils';
@@ -21,7 +21,7 @@ export const sendMessageErrorCodeMap: Map<number, string> = new Map([
   [8001, '消息长度超出限制,消息长度不要超过12K'],
   [80001, '消息或者资料中文本存在敏感内容,发送失败'],
   [80004, '消息中图片存在敏感内容,发送失败'],
-  [10017, '您已被禁止聊天'],
+  [10017, '您已被禁止聊天']
 ]);
 
 export const createOfflinePushInfo = (conversation: IConversationModel) => {
@@ -33,12 +33,12 @@ export const createOfflinePushInfo = (conversation: IConversationModel) => {
     nickName: userInfo.nick,
     chatType: conversation.type === TUIChatEngine.TYPES.CONV_GROUP ? 2 : 1,
     version: 1,
-    action: 1,
+    action: 1
   };
   return {
     extension: JSON.stringify({ entity }),
     androidInfo,
-    apnsInfo,
+    apnsInfo
   };
 };
 
@@ -47,10 +47,7 @@ export const createOfflinePushInfo = (conversation: IConversationModel) => {
  * @param messageList
  * @param currentConversation
  */
-export const sendMessages = async (
+export const sendMessages = async (messageList: ITipTapEditorContent[], currentConversation: IConversationModel) => {
-  messageList: ITipTapEditorContent[],
-  currentConversation: IConversationModel,
-) => {
   // In case of messageJumping, the sent message is automatically cleared and returns to the bottom
   if (TUIStore.getData(StoreName.CHAT, 'messageSource')) {
     TUIStore.update(StoreName.CHAT, 'messageSource', undefined);
@@ -61,17 +58,17 @@ export const sendMessages = async (
         to: currentConversation?.groupProfile?.groupID || currentConversation?.userProfile?.userID,
         conversationType: currentConversation?.type as any,
         payload: {},
-        needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+        needReadReceipt: isEnabledMessageReadReceiptGlobal()
       };
       // handle message typing
       let textMessageContent;
       const sendMessageOptions = {
-        offlinePushInfo: {},
+        offlinePushInfo: {}
       };
       const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
         conversation: currentConversation,
         payload: content.payload,
-        messageType: '',
+        messageType: ''
       };
       switch (content?.type) {
         case 'text':
@@ -81,7 +78,7 @@ export const sendMessages = async (
             break;
           }
           options.payload = {
-            text: textMessageContent,
+            text: textMessageContent
           };
           offlinePushInfoCreateParams.messageType = TUIChatEngine.TYPES.MSG_TEXT;
           sendMessageOptions.offlinePushInfo = OfflinePushInfoManager.create(offlinePushInfoCreateParams);
@@ -94,7 +91,7 @@ export const sendMessages = async (
           break;
         case 'image':
           options.payload = {
-            file: content.payload?.file,
+            file: content.payload?.file
           };
           offlinePushInfoCreateParams.messageType = TUIChatEngine.TYPES.MSG_IMAGE;
           sendMessageOptions.offlinePushInfo = OfflinePushInfoManager.create(offlinePushInfoCreateParams);
@@ -102,7 +99,7 @@ export const sendMessages = async (
           break;
         case 'video':
           options.payload = {
-            file: content.payload?.file,
+            file: content.payload?.file
           };
           offlinePushInfoCreateParams.messageType = TUIChatEngine.TYPES.MSG_VIDEO;
           sendMessageOptions.offlinePushInfo = OfflinePushInfoManager.create(offlinePushInfoCreateParams);
@@ -110,7 +107,7 @@ export const sendMessages = async (
           break;
         case 'file':
           options.payload = {
-            file: content.payload?.file,
+            file: content.payload?.file
           };
           offlinePushInfoCreateParams.messageType = TUIChatEngine.TYPES.MSG_FILE;
           sendMessageOptions.offlinePushInfo = OfflinePushInfoManager.create(offlinePushInfoCreateParams);
@@ -125,7 +122,7 @@ export const sendMessages = async (
         message: sendMessageErrorCodeMap.get(error?.code)
           ? TUITranslateService.t(`TUIChat.${sendMessageErrorCodeMap.get(error.code) as string}`)
           : error?.message,
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
       // If the message fails to be sent and the message is a reference message, clear the reference message information
       if (TUIStore.getData(StoreName.CHAT, 'quoteMessage')) {
@@ -141,7 +138,7 @@ export const handleMessageWithTyping = (cloudCustomData: any) => {
   }
   cloudCustomData.messageFeature = {
     needTyping: 1,
-    version: 1,
+    version: 1
   };
   return cloudCustomData;
 };

src/TUIKit/components/TUIChat/utils/translation.ts

@@ -1,10 +1,4 @@
-import TUIChatEngine, {
+import TUIChatEngine, { IMessageModel, TUIChatService, TUIStore, TUITranslateService, TUIUserService } from '@tencentcloud/chat-uikit-engine';
-  IMessageModel,
-  TUIChatService,
-  TUIStore,
-  TUITranslateService,
-  TUIUserService,
-} from '@tencentcloud/chat-uikit-engine';
 import { IChatResponese, IUserProfile } from '../../../interface';
 
 /**
@@ -80,20 +74,22 @@ class Translator {
 
     // step4: filter plain text to be translated
     const needTranslateTextIndex: number[] = [];
-    const needTranslateText = textList.filter((item, index) => {
+    const needTranslateText = textList
-      if (item.type === 'text' && item.value.trim() !== '') {
+      .filter((item, index) => {
-        needTranslateTextIndex.push(index);
+        if (item.type === 'text' && item.value.trim() !== '') {
-        return true;
+          needTranslateTextIndex.push(index);
-      }
+          return true;
-      return false;
+        }
-    }).map(item => item.value);
+        return false;
+      })
+      .map((item) => item.value);
 
     if (needTranslateText.length === 0) {
       this.translationCache.set(currentMessage.ID, textList);
       return textList;
     }
     // step5: get final translation result
-    const translationResult = await this.getTranslationStandard(needTranslateText) as string[];
+    const translationResult = (await this.getTranslationStandard(needTranslateText)) as string[];
     translationResult.forEach((item, index) => {
       textList[needTranslateTextIndex[index]].value = item;
     });
@@ -122,11 +118,11 @@ class Translator {
     return new Promise((resolve, reject) => {
       TUIChatService.translateText({
         sourceTextList: originTextList,
-        sourceLanguage: 'auto',
+        sourceLanguage: 'auto'
       })
         .then((response: IChatResponese<{ translatedTextList: string[] }>) => {
           const {
-            data: { translatedTextList },
+            data: { translatedTextList }
           } = response;
           resolve(translatedTextList);
         })
@@ -149,7 +145,7 @@ class Translator {
       splittingList.push(`@${TUITranslateService.t('TUIChat.所有人')}`);
     }
     if (atUserList.length > 0) {
-      const { data: userProfileList } = await TUIUserService.getUserProfile({ userIDList: atUserList }) as IChatResponese<IUserProfile[]>;
+      const { data: userProfileList } = (await TUIUserService.getUserProfile({ userIDList: atUserList })) as IChatResponese<IUserProfile[]>;
       userProfileList.forEach((user) => {
         const atNick = `@${user.nick || user.userID}`;
         splittingList.push(atNick);
@@ -195,7 +191,7 @@ class Translator {
     }
     return {
       transSplitingList,
-      atNickList,
+      atNickList
     };
   }
 }

src/TUIKit/components/TUIChat/utils/utils.ts

@@ -27,21 +27,13 @@ export function deepCopy(data: any, hash = new WeakMap()) {
   return newData;
 }
 
-export const handleSkeletonSize = (
+export const handleSkeletonSize = (width: number, height: number, maxWidth: number, maxHeight: number): { width: number; height: number } => {
-  width: number,
-  height: number,
-  maxWidth: number,
-  maxHeight: number,
-): { width: number; height: number } => {
   const widthToHeight = width / height;
   const maxWidthToHeight = maxWidth / maxHeight;
   if (width <= maxWidth && height <= maxHeight) {
     return { width, height };
   }
-  if (
+  if ((width <= maxWidth && height > maxHeight) || (width > maxWidth && height > maxHeight && widthToHeight <= maxWidthToHeight)) {
-    (width <= maxWidth && height > maxHeight)
-    || (width > maxWidth && height > maxHeight && widthToHeight <= maxWidthToHeight)
-  ) {
     return { width: width * (maxHeight / height), height: maxHeight };
   }
   return { width: maxWidth, height: height * (maxWidth / width) };
@@ -76,10 +68,7 @@ export function getImgLoad(container: any, className: string, callback: any) {
 }
 
 export const isCreateGroupCustomMessage = (message: IMessageModel) => {
-  return (
+  return message.type === TUIChatEngine.TYPES.MSG_CUSTOM && message?.getMessageContent()?.businessID === 'group_create';
-    message.type === TUIChatEngine.TYPES.MSG_CUSTOM
-    && message?.getMessageContent()?.businessID === 'group_create'
-  );
 };
 
 /**
@@ -91,8 +80,7 @@ export const isCreateGroupCustomMessage = (message: IMessageModel) => {
  * @return {boolean} - Returns a boolean value indicating if the message read receipt is enabled globally.
  */
 export function isEnabledMessageReadReceiptGlobal(): boolean {
-  return TUIStore.getData(StoreName.USER, 'displayMessageReadReceipt')
+  return TUIStore.getData(StoreName.USER, 'displayMessageReadReceipt') && TUIStore.getData(StoreName.APP, 'enabledMessageReadReceipt');
-    && TUIStore.getData(StoreName.APP, 'enabledMessageReadReceipt');
 }
 
 export function shallowCopyMessage(message: IMessageModel) {
@@ -102,15 +90,7 @@ export function shallowCopyMessage(message: IMessageModel) {
 // calculate timestamp
 export function calculateTimestamp(timestamp: number): string {
   const todayZero = new Date().setHours(0, 0, 0, 0);
-  const thisYear = new Date(
+  const thisYear = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0).getTime();
-    new Date().getFullYear(),
-    0,
-    1,
-    0,
-    0,
-    0,
-    0,
-  ).getTime();
   const target = new Date(timestamp);
 
   const oneDay = 24 * 60 * 60 * 1000;
@@ -127,35 +107,17 @@ export function calculateTimestamp(timestamp: number): string {
     return `${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
   } else if (diff <= oneDay) {
     // yesterday, display yesterday:hour:minute
-    return `${TUITranslateService.t('time.昨天')} ${formatNum(
+    return `${TUITranslateService.t('time.昨天')} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
-      target.getHours(),
-    )}:${formatNum(target.getMinutes())}`;
   } else if (diff <= oneWeek - oneDay) {
     // Within a week, display weekday hour:minute
-    const weekdays = [
+    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
-      '星期日',
-      '星期一',
-      '星期二',
-      '星期三',
-      '星期四',
-      '星期五',
-      '星期六',
-    ];
     const weekday = weekdays[target.getDay()];
-    return `${TUITranslateService.t('time.' + weekday)} ${formatNum(
+    return `${TUITranslateService.t('time.' + weekday)} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
-      target.getHours(),
-    )}:${formatNum(target.getMinutes())}`;
   } else if (target.getTime() >= thisYear) {
     // Over a week, within this year, display mouth/day hour:minute
-    return `${target.getMonth() + 1}/${target.getDate()} ${formatNum(
+    return `${target.getMonth() + 1}/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
-      target.getHours(),
-    )}:${formatNum(target.getMinutes())}`;
   } else {
     // Not within this year, display year/mouth/day hour:minute
-    return `${target.getFullYear()}/${
+    return `${target.getFullYear()}/${target.getMonth() + 1}/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
-      target.getMonth() + 1
-    }/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(
-      target.getMinutes(),
-    )}`;
   }
 }

src/TUIKit/components/TUIChat/utils/wordsList.ts

@@ -1,29 +1,29 @@
 export const wordsList = [
   {
-    value: '在吗？在吗？在吗？重要的话说三遍。',
+    value: '在吗？在吗？在吗？重要的话说三遍。'
   },
   {
-    value: '好久没聊天了，快来和我说说话～',
+    value: '好久没聊天了，快来和我说说话～'
   },
   {
-    value: '好的，就这么说定了。',
+    value: '好的，就这么说定了。'
   },
   {
-    value: '感恩的心，感谢有你。',
+    value: '感恩的心，感谢有你。'
   },
   {
-    value: '糟糕！是心动的感觉！',
+    value: '糟糕！是心动的感觉！'
   },
   {
-    value: '心疼地抱抱自己，我太难了！',
+    value: '心疼地抱抱自己，我太难了！'
   },
   {
-    value: '没关系，别在意，事情过去就过去了。',
+    value: '没关系，别在意，事情过去就过去了。'
   },
   {
-    value: '早上好，今天也是让人期待的一天呢！',
+    value: '早上好，今天也是让人期待的一天呢！'
   },
   {
-    value: '熬夜有什么用，又没人陪你聊天，早点休息吧。',
+    value: '熬夜有什么用，又没人陪你聊天，早点休息吧。'
-  },
+  }
 ];

src/TUIKit/components/TUIContact/contact-info/contact-info-config.ts

@@ -1,9 +1,5 @@
 import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-import {
+import { CONTACT_INFO_LABEL_POSITION, CONTACT_INFO_MORE_EDIT_TYPE, CONTACT_INFO_BUTTON_TYPE } from '../../../constant';
-  CONTACT_INFO_LABEL_POSITION,
-  CONTACT_INFO_MORE_EDIT_TYPE,
-  CONTACT_INFO_BUTTON_TYPE,
-} from '../../../constant';
 import {
   updateFriendRemark,
   deleteFriend,
@@ -15,7 +11,7 @@ import {
   acceptFriendApplication,
   refuseFriendApplication,
   addToBlacklist,
-  removeFromBlacklist,
+  removeFromBlacklist
 } from '../utils/index';
 
 export const contactMoreInfoConfig = {
@@ -28,11 +24,7 @@ export const contactMoreInfoConfig = {
     editable: true,
     editType: CONTACT_INFO_MORE_EDIT_TYPE.INPUT,
     editing: false,
-    editSubmitHandler: (props: {
+    editSubmitHandler: (props: { item: any; contactInfoData: any; [propsName: string]: any }) => {
-      item: any;
-      contactInfoData: any;
-      [propsName: string]: any;
-    }) => {
       if (props?.isBothFriend) {
         const newRemarkValue = props?.item?.data;
         updateFriendRemark(props?.contactInfoData?.userID, newRemarkValue);
@@ -41,7 +33,7 @@ export const contactMoreInfoConfig = {
       } else {
         props?.item?.editing && (props.item.editing = false);
       }
-    },
+    }
   },
   // blocked list
   blackList: {
@@ -52,18 +44,14 @@ export const contactMoreInfoConfig = {
     editable: true,
     editType: CONTACT_INFO_MORE_EDIT_TYPE.SWITCH,
     editing: true,
-    editSubmitHandler: (props: {
+    editSubmitHandler: (props: { item: any; contactInfoData: any; [propsName: string]: any }) => {
-      item: any;
-      contactInfoData: any;
-      [propsName: string]: any;
-    }) => {
       if (props?.isInBlackList) {
         removeFromBlacklist(props?.contactInfoData?.userID);
       } else {
         addToBlacklist(props?.contactInfoData?.userID);
         TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', 'blackList');
       }
-    },
+    }
   },
   // Fill in verification words (applicant)
   setWords: {
@@ -73,7 +61,7 @@ export const contactMoreInfoConfig = {
     labelPosition: CONTACT_INFO_LABEL_POSITION.TOP,
     editable: true,
     editType: CONTACT_INFO_MORE_EDIT_TYPE.TEXTAREA,
-    editing: true,
+    editing: true
   },
   // Display verification words (application recipient)
   displayWords: {
@@ -81,8 +69,8 @@ export const contactMoreInfoConfig = {
     label: '验证信息',
     data: '',
     labelPosition: CONTACT_INFO_LABEL_POSITION.LEFT,
-    editable: false,
+    editable: false
-  },
+  }
 };
 
 export const contactButtonConfig = {
@@ -95,7 +83,7 @@ export const contactButtonConfig = {
     type: CONTACT_INFO_BUTTON_TYPE.CANCEL,
     onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
       dismissGroup(props?.contactInfoData?.groupID);
-    },
+    }
   },
   quitGroup: {
     key: 'quitGroup',
@@ -103,34 +91,23 @@ export const contactButtonConfig = {
     type: CONTACT_INFO_BUTTON_TYPE.CANCEL,
     onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
       quitGroup(props?.contactInfoData?.groupID);
-    },
+    }
   },
   joinGroup: {
     key: 'joinGroup',
     label: '发送申请',
     type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
-    onClick: (props: {
+    onClick: (props: { contactInfoData: any; contactInfoMoreList: any; [propsName: string]: any }) => {
-      contactInfoData: any;
+      joinGroup(props?.contactInfoData?.groupID, props?.contactInfoMoreList[0]?.data);
-      contactInfoMoreList: any;
+    }
-      [propsName: string]: any;
-    }) => {
-      joinGroup(
-        props?.contactInfoData?.groupID,
-        props?.contactInfoMoreList[0]?.data,
-      );
-    },
   },
   joinAVChatGroup: {
     key: 'joinAVChatGroup',
     label: '加入直播群',
     type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
-    onClick: (props: {
+    onClick: (props: { contactInfoData: any; contactInfoMoreList: any; [propsName: string]: any }) => {
-      contactInfoData: any;
-      contactInfoMoreList: any;
-      [propsName: string]: any;
-    }) => {
       joinGroup(props?.contactInfoData?.groupID);
-    },
+    }
   },
   enterGroupConversation: {
     key: 'enterGroupConversation',
@@ -138,7 +115,7 @@ export const contactButtonConfig = {
     type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
     onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
       enterConversation(props?.contactInfoData);
-    },
+    }
   },
 
   // ---------------------
@@ -148,18 +125,14 @@ export const contactButtonConfig = {
     key: 'addFriend',
     label: '发送申请',
     type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
-    onClick: (props: {
+    onClick: (props: { contactInfoData: any; contactInfoMoreList: any; [propsName: string]: any }) => {
-      contactInfoData: any;
-      contactInfoMoreList: any;
-      [propsName: string]: any;
-    }) => {
       addFriend({
         to: props?.contactInfoData?.userID,
         source: 'AddSource_Type_Web',
         remark: props?.contactInfoMoreList[1]?.data,
-        wording: props?.contactInfoMoreList[0]?.data,
+        wording: props?.contactInfoMoreList[0]?.data
       });
-    },
+    }
   },
   deleteFriend: {
     key: 'deleteFriend',
@@ -167,7 +140,7 @@ export const contactButtonConfig = {
     type: CONTACT_INFO_BUTTON_TYPE.CANCEL,
     onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
       deleteFriend(props?.contactInfoData?.userID);
-    },
+    }
   },
   enterC2CConversation: {
     key: 'enterC2CConversation',
@@ -175,7 +148,7 @@ export const contactButtonConfig = {
     type: CONTACT_INFO_BUTTON_TYPE.SUBMIT,
     onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
       enterConversation(props?.contactInfoData);
-    },
+    }
   },
 
   // ---------------------
@@ -188,7 +161,7 @@ export const contactButtonConfig = {
     onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
       acceptFriendApplication(props?.contactInfoData?.userID);
       TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', 'friendList');
-    },
+    }
   },
   refuseFriendApplication: {
     key: 'refuseFriendApplication',
@@ -196,6 +169,6 @@ export const contactButtonConfig = {
     type: CONTACT_INFO_BUTTON_TYPE.CANCEL,
     onClick: (props: { contactInfoData: any; [propsName: string]: any }) => {
       refuseFriendApplication(props?.contactInfoData?.userID);
-    },
+    }
-  },
+  }
 };

src/TUIKit/components/TUIContact/contact-info/index.vue

@@ -3,53 +3,23 @@
     v-if="typeof contactInfoData === 'object' && Object.keys(contactInfoData).length"
     :class="['tui-contact-info', !isPC && 'tui-contact-info-h5']"
   >
-    <div
+    <div v-if="!isPC" :class="['tui-contact-info-header', !isPC && 'tui-contact-info-h5-header']">
-      v-if="!isPC"
+      <div :class="['tui-contact-info-header-icon', !isPC && 'tui-contact-info-h5-header-icon']" @click="resetContactSearchingUIData">
-      :class="[
-        'tui-contact-info-header',
-        !isPC && 'tui-contact-info-h5-header',
-      ]"
-    >
-      <div
-        :class="[
-          'tui-contact-info-header-icon',
-          !isPC && 'tui-contact-info-h5-header-icon',
-        ]"
-        @click="resetContactSearchingUIData"
-      >
         <Icon :file="backSVG" />
       </div>
-      <div
+      <div :class="['tui-contact-info-header-title', !isPC && 'tui-contact-info-h5-header-title']">
-        :class="[
+        {{ TUITranslateService.t('TUIContact.添加好友/群聊') }}
-          'tui-contact-info-header-title',
-          !isPC && 'tui-contact-info-h5-header-title',
-        ]"
-      >
-        {{ TUITranslateService.t("TUIContact.添加好友/群聊") }}
       </div>
     </div>
     <div :class="['tui-contact-info-basic', !isPC && 'tui-contact-info-h5-basic']">
-      <div
+      <div :class="['tui-contact-info-basic-text', !isPC && 'tui-contact-info-h5-basic-text']">
-        :class="[
+        <div :class="['tui-contact-info-basic-text-name', !isPC && 'tui-contact-info-h5-basic-text-name']">
-          'tui-contact-info-basic-text',
-          !isPC && 'tui-contact-info-h5-basic-text',
-        ]"
-      >
-        <div
-          :class="[
-            'tui-contact-info-basic-text-name',
-            !isPC && 'tui-contact-info-h5-basic-text-name',
-          ]"
-        >
           {{ generateContactInfoName(contactInfoData) }}
         </div>
         <div
           v-for="item in contactInfoBasicList"
           :key="item.label"
-          :class="[
+          :class="['tui-contact-info-basic-text-other', !isPC && 'tui-contact-info-h5-basic-text-other']"
-            'tui-contact-info-basic-text-other',
-            !isPC && 'tui-contact-info-h5-basic-text-other',
-          ]"
         >
           {{
             `${TUITranslateService.t(`TUIContact.${item.label}`)}:
@@ -57,117 +27,62 @@
           }}
         </div>
       </div>
-      <img
+      <img :class="['tui-contact-info-basic-avatar', !isPC && 'tui-contact-info-h5-basic-avatar']" :src="generateAvatar(contactInfoData)" />
-        :class="[
-          'tui-contact-info-basic-avatar',
-          !isPC && 'tui-contact-info-h5-basic-avatar',
-        ]"
-        :src="generateAvatar(contactInfoData)"
-      >
     </div>
-    <div
+    <div v-if="contactInfoMoreList[0]" :class="['tui-contact-info-more', !isPC && 'tui-contact-info-h5-more']">
-      v-if="contactInfoMoreList[0]"
-      :class="['tui-contact-info-more', !isPC && 'tui-contact-info-h5-more']"
-    >
       <div
         v-for="item in contactInfoMoreList"
         :key="item.key"
         :class="[
           'tui-contact-info-more-item',
           !isPC && 'tui-contact-info-h5-more-item',
-          item.labelPosition === CONTACT_INFO_LABEL_POSITION.TOP
+          item.labelPosition === CONTACT_INFO_LABEL_POSITION.TOP ? 'tui-contact-info-more-item-top' : 'tui-contact-info-more-item-left'
-            ? 'tui-contact-info-more-item-top'
-            : 'tui-contact-info-more-item-left',
         ]"
       >
-        <div
+        <div :class="['tui-contact-info-more-item-label', !isPC && 'tui-contact-info-h5-more-item-label']">
-          :class="[
-            'tui-contact-info-more-item-label',
-            !isPC && 'tui-contact-info-h5-more-item-label',
-          ]"
-        >
           {{ `${TUITranslateService.t(`TUIContact.${item.label}`)}` }}
         </div>
-        <div
+        <div :class="['tui-contact-info-more-item-content', !isPC && 'tui-contact-info-h5-more-item-content']">
-          :class="[
+          <div v-if="!item.editing" :class="['tui-contact-info-more-item-content-text', !isPC && 'tui-contact-info-h5-more-item-content-text']">
-            'tui-contact-info-more-item-content',
+            <div :class="['tui-contact-info-more-item-content-text-data', !isPC && 'tui-contact-info-h5-more-item-content-text-data']">
-            !isPC && 'tui-contact-info-h5-more-item-content',
-          ]"
-        >
-          <div
-            v-if="!item.editing"
-            :class="[
-              'tui-contact-info-more-item-content-text',
-              !isPC && 'tui-contact-info-h5-more-item-content-text',
-            ]"
-          >
-            <div
-              :class="[
-                'tui-contact-info-more-item-content-text-data',
-                !isPC && 'tui-contact-info-h5-more-item-content-text-data',
-              ]"
-            >
               {{ item.data }}
             </div>
             <div
               v-if="item.editable"
-              :class="[
+              :class="['tui-contact-info-more-item-content-text-icon', !isPC && 'tui-contact-info-h5-more-item-content-text-icon']"
-                'tui-contact-info-more-item-content-text-icon',
-                !isPC && 'tui-contact-info-h5-more-item-content-text-icon',
-              ]"
               @click="setEditing(item)"
             >
-              <Icon
+              <Icon :file="editSVG" width="14px" height="14px" />
-                :file="editSVG"
-                width="14px"
-                height="14px"
-              />
             </div>
           </div>
           <input
             v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.INPUT"
             v-model="item.data"
-            :class="[
+            :class="['tui-contact-info-more-item-content-input', !isPC && 'tui-contact-info-h5-more-item-content-input']"
-              'tui-contact-info-more-item-content-input',
-              !isPC && 'tui-contact-info-h5-more-item-content-input',
-            ]"
             type="text"
             @confirm="onContactInfoEmitSubmit(item)"
             @keyup.enter="onContactInfoEmitSubmit(item)"
-          >
+          />
           <textarea
             v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.TEXTAREA"
             v-model="item.data"
-            :class="[
+            :class="['tui-contact-info-more-item-content-textarea', !isPC && 'tui-contact-info-h5-more-item-content-textarea']"
-              'tui-contact-info-more-item-content-textarea',
-              !isPC && 'tui-contact-info-h5-more-item-content-textarea',
-            ]"
             confirm-type="done"
           />
-          <div
+          <div v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.SWITCH" @click="onContactInfoEmitSubmit(item)">
-            v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.SWITCH"
-            @click="onContactInfoEmitSubmit(item)"
-          >
             <SwitchBar :value="item.data" />
           </div>
         </div>
       </div>
     </div>
-    <div
+    <div :class="['tui-contact-info-button', !isPC && 'tui-contact-info-h5-button']">
-      :class="[
-        'tui-contact-info-button',
-        !isPC && 'tui-contact-info-h5-button',
-      ]"
-    >
       <button
         v-for="item in contactInfoButtonList"
         :key="item.key"
         :class="[
           'tui-contact-info-button-item',
           !isPC && 'tui-contact-info-h5-button-item',
-          item.type === CONTACT_INFO_BUTTON_TYPE.CANCEL
+          item.type === CONTACT_INFO_BUTTON_TYPE.CANCEL ? `tui-contact-info-button-item-cancel` : `tui-contact-info-button-item-submit`
-            ? `tui-contact-info-button-item-cancel`
-            : `tui-contact-info-button-item-submit`,
         ]"
         @click="onContactInfoButtonClicked(item)"
       >
@@ -177,43 +92,19 @@
   </div>
 </template>
 <script setup lang="ts">
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName, TUITranslateService, IGroupModel, Friend, FriendApplication } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IGroupModel,
-  Friend,
-  FriendApplication,
-} from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { ref, computed, onMounted, onUnmounted } from '../../../adapter-vue';
 import { isPC } from '../../../utils/env';
 
-import {
+import { generateAvatar, generateContactInfoName, generateContactInfoBasic, isFriend, isApplicationType } from '../utils/index';
-  generateAvatar,
+import { contactMoreInfoConfig, contactButtonConfig } from './contact-info-config';
-  generateContactInfoName,
-  generateContactInfoBasic,
-  isFriend,
-  isApplicationType,
-} from '../utils/index';
-import {
-  contactMoreInfoConfig,
-  contactButtonConfig,
-} from './contact-info-config';
 import Icon from '../../common/Icon.vue';
 import editSVG from '../../../assets/icon/edit.svg';
 import backSVG from '../../../assets/icon/back.svg';
 import SwitchBar from '../../common/SwitchBar/index.vue';
-import {
+import { IBlackListUserItem, IContactInfoMoreItem, IContactInfoButton } from '../../../interface';
-  IBlackListUserItem,
+import { CONTACT_INFO_LABEL_POSITION, CONTACT_INFO_MORE_EDIT_TYPE, CONTACT_INFO_BUTTON_TYPE } from '../../../constant';
-  IContactInfoMoreItem,
-  IContactInfoButton,
-} from '../../../interface';
-import {
-  CONTACT_INFO_LABEL_POSITION,
-  CONTACT_INFO_MORE_EDIT_TYPE,
-  CONTACT_INFO_BUTTON_TYPE,
-} from '../../../constant';
 import { deepCopy } from '../../TUIChat/utils/utils';
 
 type IContactInfoType = IGroupModel | Friend | FriendApplication | IBlackListUserItem;
@@ -229,9 +120,7 @@ const setEditing = (item: any) => {
   item.editing = true;
 };
 
-const isGroup = computed((): boolean =>
+const isGroup = computed((): boolean => ((contactInfoData.value as IGroupModel)?.groupID ? true : false));
-  (contactInfoData.value as IGroupModel)?.groupID ? true : false,
-);
 
 const isApplication = computed((): boolean => {
   return isApplicationType(contactInfoData?.value);
@@ -248,11 +137,8 @@ const isGroupMember = computed((): boolean => {
 // is in black list, if is group type always false
 const isInBlackList = computed((): boolean => {
   return (
-    !isGroup.value
+    !isGroup.value &&
-    && blackList.value?.findIndex(
+    blackList.value?.findIndex((item: IBlackListUserItem) => item?.userID === (contactInfoData.value as IBlackListUserItem)?.userID) >= 0
-      (item: IBlackListUserItem) =>
-        item?.userID === (contactInfoData.value as IBlackListUserItem)?.userID,
-    ) >= 0
   );
 });
 
@@ -260,19 +146,19 @@ const blackList = ref<IBlackListUserItem[]>([]);
 
 onMounted(() => {
   TUIStore.watch(StoreName.CUSTOM, {
-    currentContactInfo: onCurrentContactInfoUpdated,
+    currentContactInfo: onCurrentContactInfoUpdated
   });
   TUIStore.watch(StoreName.USER, {
-    userBlacklist: onUserBlacklistUpdated,
+    userBlacklist: onUserBlacklistUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CUSTOM, {
-    currentContactInfo: onCurrentContactInfoUpdated,
+    currentContactInfo: onCurrentContactInfoUpdated
   });
   TUIStore.unwatch(StoreName.USER, {
-    userBlacklist: onUserBlacklistUpdated,
+    userBlacklist: onUserBlacklistUpdated
   });
 });
 
@@ -290,25 +176,22 @@ const resetContactSearchingUIData = () => {
 };
 
 const onContactInfoEmitSubmit = (item: any) => {
-  item.editSubmitHandler
+  item.editSubmitHandler &&
-  && item.editSubmitHandler({
+    item.editSubmitHandler({
-    item,
+      item,
-    contactInfoData: contactInfoData.value,
+      contactInfoData: contactInfoData.value,
-    isBothFriend: isBothFriend.value,
+      isBothFriend: isBothFriend.value,
-    isInBlackList: isInBlackList.value,
+      isInBlackList: isInBlackList.value
-  });
+    });
 };
 
 const onContactInfoButtonClicked = (item: any) => {
-  item.onClick
+  item.onClick &&
-  && item.onClick({
+    item.onClick({
-    contactInfoData: contactInfoData.value,
+      contactInfoData: contactInfoData.value,
-    contactInfoMoreList: contactInfoMoreList.value,
+      contactInfoMoreList: contactInfoMoreList.value
-  });
+    });
-  if (
+  if (item.key === 'enterGroupConversation' || item.key === 'enterC2CConversation') {
-    item.key === 'enterGroupConversation'
-    || item.key === 'enterC2CConversation'
-  ) {
     emits('switchConversation', contactInfoData.value);
     resetContactSearchingUIData();
   }
@@ -317,17 +200,14 @@ const onContactInfoButtonClicked = (item: any) => {
 const generateMoreInfo = async () => {
   if (!isApplication.value) {
     if (
-      (!isGroup.value && !isBothFriend.value && !isInBlackList.value)
+      (!isGroup.value && !isBothFriend.value && !isInBlackList.value) ||
-      || (isGroup.value
+      (isGroup.value && !isGroupMember.value && (contactInfoData.value as IGroupModel)?.type !== TUIChatEngine?.TYPES?.GRP_AVCHATROOM)
-      && !isGroupMember.value
-      && (contactInfoData.value as IGroupModel)?.type !== TUIChatEngine?.TYPES?.GRP_AVCHATROOM)
     ) {
       contactMoreInfoConfig.setWords.data = '';
       contactInfoMoreList.value.push(contactMoreInfoConfig.setWords);
     }
     if (!isGroup.value && !isInBlackList.value) {
-      contactMoreInfoConfig.setRemark.data
+      contactMoreInfoConfig.setRemark.data = (contactInfoData.value as Friend)?.remark || '';
-        = (contactInfoData.value as Friend)?.remark || '';
       contactMoreInfoConfig.setRemark.editing = false;
       contactInfoMoreList.value.push(contactMoreInfoConfig.setRemark);
     }
@@ -336,8 +216,7 @@ const generateMoreInfo = async () => {
       contactInfoMoreList.value.push(contactMoreInfoConfig.blackList);
     }
   } else {
-    contactMoreInfoConfig.displayWords.data
+    contactMoreInfoConfig.displayWords.data = (contactInfoData.value as FriendApplication)?.wording || '';
-      = (contactInfoData.value as FriendApplication)?.wording || '';
     contactInfoMoreList.value.push(contactMoreInfoConfig.displayWords);
   }
 };
@@ -347,16 +226,9 @@ const generateButton = () => {
     return;
   }
   if (isApplication.value) {
-    if (
+    if ((contactInfoData.value as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME) {
-      (contactInfoData.value as FriendApplication)?.type
+      contactInfoButtonList?.value?.push(contactButtonConfig.refuseFriendApplication);
-      === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
+      contactInfoButtonList?.value?.push(contactButtonConfig.acceptFriendApplication);
-    ) {
-      contactInfoButtonList?.value?.push(
-        contactButtonConfig.refuseFriendApplication,
-      );
-      contactInfoButtonList?.value?.push(
-        contactButtonConfig.acceptFriendApplication,
-      );
     }
   } else {
     if (isGroup.value && isGroupMember.value) {
@@ -368,20 +240,16 @@ const generateButton = () => {
           contactInfoButtonList?.value?.push(contactButtonConfig.quitGroup);
           break;
       }
-      contactInfoButtonList?.value?.push(
+      contactInfoButtonList?.value?.push(contactButtonConfig.enterGroupConversation);
-        contactButtonConfig.enterGroupConversation,
-      );
     } else if (!isGroup.value && isBothFriend.value) {
       contactInfoButtonList?.value?.push(contactButtonConfig.deleteFriend);
-      contactInfoButtonList?.value?.push(
+      contactInfoButtonList?.value?.push(contactButtonConfig.enterC2CConversation);
-        contactButtonConfig.enterC2CConversation,
-      );
     } else {
       if (isGroup.value) {
         contactInfoButtonList?.value?.push(
           (contactInfoData.value as IGroupModel)?.type === TUIChatEngine?.TYPES?.GRP_AVCHATROOM
             ? contactButtonConfig.joinAVChatGroup
-            : contactButtonConfig.joinGroup,
+            : contactButtonConfig.joinGroup
         );
       } else {
         contactInfoButtonList?.value?.push(contactButtonConfig.addFriend);
@@ -395,11 +263,7 @@ function onUserBlacklistUpdated(userBlacklist: IBlackListUserItem[]) {
 }
 
 async function onCurrentContactInfoUpdated(contactInfo: IContactInfoType) {
-  if (
+  if (contactInfoData.value && contactInfo && JSON.stringify(contactInfoData.value) === JSON.stringify(contactInfo)) {
-    contactInfoData.value
-    && contactInfo
-    && JSON.stringify(contactInfoData.value) === JSON.stringify(contactInfo)
-  ) {
     return;
   }
   resetContactInfoUIData();
@@ -408,9 +272,7 @@ async function onCurrentContactInfoUpdated(contactInfo: IContactInfoType) {
   if (!contactInfoData.value || Object.keys(contactInfoData.value)?.length === 0) {
     return;
   }
-  contactInfoBasicList.value = generateContactInfoBasic(
+  contactInfoBasicList.value = generateContactInfoBasic(contactInfoData.value);
-    contactInfoData.value,
-  );
   isBothFriend.value = await isFriend(contactInfoData.value);
   generateMoreInfo();
   generateButton();

src/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue

@@ -1,17 +1,13 @@
 <template>
   <div :class="['tui-contact-list-card', !isPC && 'tui-contact-list-card-h5']">
     <div class="tui-contact-list-card-left">
-      <Avatar
+      <Avatar class="tui-contact-list-card-left-avatar" useSkeletonAnimation :url="generateAvatar(props.item)" />
-        class="tui-contact-list-card-left-avatar"
-        useSkeletonAnimation
-        :url="generateAvatar(props.item)"
-      />
       <div
         v-if="props.displayOnlineStatus && props.item"
         :class="{
           'online-status': true,
           'online-status-online': isOnline,
-          'online-status-offline': !isOnline,
+          'online-status-offline': !isOnline
         }"
       />
     </div>
@@ -19,28 +15,16 @@
       <div class="tui-contact-list-card-main-name">
         {{ generateName(props.item) }}
       </div>
-      <div
+      <div v-if="otherContentForSow" class="tui-contact-list-card-main-other">
-        v-if="otherContentForSow"
-        class="tui-contact-list-card-main-other"
-      >
         {{ otherContentForSow }}
       </div>
     </div>
     <div class="tui-contact-list-card-right">
-      <div
+      <div v-if="groupTypeForShow" class="tui-contact-list-card-right-group-type">
-        v-if="groupTypeForShow"
-        class="tui-contact-list-card-right-group-type"
-      >
         {{ groupTypeForShow }}
       </div>
-      <div
+      <div v-if="showApplicationStatus" class="tui-contact-list-card-right-application">
-        v-if="showApplicationStatus"
+        <div v-if="showApplicationStatus.style === 'text'" class="tui-contact-list-card-right-application-text">
-        class="tui-contact-list-card-right-application"
-      >
-        <div
-          v-if="showApplicationStatus.style === 'text'"
-          class="tui-contact-list-card-right-application-text"
-        >
           {{ TUITranslateService.t(`TUIContact.${showApplicationStatus.label}`) }}
         </div>
         <button
@@ -56,12 +40,7 @@
 </template>
 <script setup lang="ts">
 import { computed, withDefaults, inject, watch, ref, Ref } from '../../../../adapter-vue';
-import TUIChatEngine, {
+import TUIChatEngine, { TUITranslateService, IGroupModel, FriendApplication, Friend } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-  IGroupModel,
-  FriendApplication,
-  Friend,
-} from '@tencentcloud/chat-uikit-engine';
 import { IContactInfoType, IUserStatus } from '../../../../interface';
 import Avatar from '../../../common/Avatar/index.vue';
 import { generateAvatar, generateName, acceptFriendApplication } from '../../utils';
@@ -73,9 +52,9 @@ const props = withDefaults(
     displayOnlineStatus?: boolean;
   }>(),
   {
-    item: () => ({} as IContactInfoType),
+    item: () => ({}) as IContactInfoType,
-    displayOnlineStatus: false,
+    displayOnlineStatus: false
-  },
+  }
 );
 const userOnlineStatusMap = inject<Ref<Map<string, IUserStatus>>>('userOnlineStatusMap');
 const isOnline = ref<boolean>(false);
@@ -85,14 +64,14 @@ const groupType = {
   [TUIChatEngine.TYPES.GRP_AVCHATROOM]: 'AVChatRoom',
   [TUIChatEngine.TYPES.GRP_PUBLIC]: 'Public',
   [TUIChatEngine.TYPES.GRP_MEETING]: 'Meeting',
-  [TUIChatEngine.TYPES.GRP_COMMUNITY]: 'Community',
+  [TUIChatEngine.TYPES.GRP_COMMUNITY]: 'Community'
 };
 
 const otherContentForSow = computed((): string => {
   let content = '';
   if (
-    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
+    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME ||
-    || (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
+    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
   ) {
     content = (props.item as FriendApplication)?.wording || '';
   } else if ((props.item as IGroupModel)?.groupID) {
@@ -110,22 +89,18 @@ const groupTypeForShow = computed((): string => {
 });
 
 const showApplicationStatus = computed(() => {
-  if (
+  if ((props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME) {
-    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
-  ) {
     return {
       style: 'text',
-      label: '等待验证',
+      label: '等待验证'
     };
-  } else if (
+  } else if ((props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME) {
-    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
-  ) {
     return {
       style: 'button',
       label: '同意',
       onClick: () => {
         acceptFriendApplication((props.item as FriendApplication)?.userID);
-      },
+      }
     };
   }
   return false;
@@ -138,16 +113,16 @@ watch(
   },
   {
     immediate: true,
-    deep: true,
+    deep: true
-  },
+  }
 );
 
 function getOnlineStatus(): boolean {
   return !!(
-    props.displayOnlineStatus
+    props.displayOnlineStatus &&
-    && userOnlineStatusMap?.value
+    userOnlineStatusMap?.value &&
-    && (props.item as Friend)?.userID
+    (props.item as Friend)?.userID &&
-    && userOnlineStatusMap.value?.[(props.item as Friend).userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE
+    userOnlineStatusMap.value?.[(props.item as Friend).userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE
   );
 }
 </script>

src/TUIKit/components/TUIContact/contact-list/index.vue

@@ -1,30 +1,13 @@
 <template>
-  <ul
+  <ul v-if="!contactSearchingStatus" :class="['tui-contact-list', !isPC && 'tui-contact-list-h5']">
-    v-if="!contactSearchingStatus"
+    <li v-for="(contactListObj, key) in contactListMap" :key="key" class="tui-contact-list-item">
-    :class="['tui-contact-list', !isPC && 'tui-contact-list-h5']"
+      <header class="tui-contact-list-item-header" @click="toggleCurrentContactList(key)">
-  >
-    <li
-      v-for="(contactListObj, key) in contactListMap"
-      :key="key"
-      class="tui-contact-list-item"
-    >
-      <header
-        class="tui-contact-list-item-header"
-        @click="toggleCurrentContactList(key)"
-      >
         <div class="tui-contact-list-item-header-left">
-          <Icon
+          <Icon :file="currentContactListKey === key ? downSVG : rightSVG" width="16px" height="16px" />
-            :file="currentContactListKey === key ? downSVG : rightSVG"
-            width="16px"
-            height="16px"
-          />
           <div>{{ TUITranslateService.t(`TUIContact.${contactListObj.title}`) }}</div>
         </div>
         <div class="tui-contact-list-item-header-right">
-          <span
+          <span v-if="contactListObj.unreadCount" class="tui-contact-list-item-header-right-unread">
-            v-if="contactListObj.unreadCount"
-            class="tui-contact-list-item-header-right-unread"
-          >
             {{ contactListObj.unreadCount }}
           </span>
         </div>
@@ -46,19 +29,9 @@
       </ul>
     </li>
   </ul>
-  <ul
+  <ul v-else class="tui-contact-list">
-    v-else
+    <li v-for="(item, key) in contactSearchResult" :key="key" class="tui-contact-list-item">
-    class="tui-contact-list"
+      <div v-if="item.list[0]" class="tui-contact-search-list">
-  >
-    <li
-      v-for="(item, key) in contactSearchResult"
-      :key="key"
-      class="tui-contact-list-item"
-    >
-      <div
-        v-if="item.list[0]"
-        class="tui-contact-search-list"
-      >
         <div class="tui-contact-search-list-title">
           {{ TUITranslateService.t(`TUIContact.${item.label}`) }}
         </div>
@@ -69,18 +42,12 @@
           :class="['selected']"
           @click="selectItem(listItem)"
         >
-          <ContactListItem
+          <ContactListItem :item="listItem" :displayOnlineStatus="false" />
-            :item="listItem"
-            :displayOnlineStatus="false"
-          />
         </div>
       </div>
     </li>
-    <div
+    <div v-if="isContactSearchNoResult" class="tui-contact-search-list-default">
-      v-if="isContactSearchNoResult"
+      {{ TUITranslateService.t('TUIContact.无搜索结果') }}
-      class="tui-contact-search-list-default"
-    >
-      {{ TUITranslateService.t("TUIContact.无搜索结果") }}
     </div>
   </ul>
 </template>
@@ -93,21 +60,14 @@ import {
   TUIFriendService,
   Friend,
   FriendApplication,
-  TUIUserService,
+  TUIUserService
 } from '@tencentcloud/chat-uikit-engine';
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import { ref, computed, onMounted, onUnmounted, provide } from '../../../adapter-vue';
 import Icon from '../../common/Icon.vue';
 import downSVG from '../../../assets/icon/down-icon.svg';
 import rightSVG from '../../../assets/icon/right-icon.svg';
-import {
+import { IContactList, IContactSearchResult, IBlackListUserItem, IUserStatus, IUserStatusMap, IContactInfoType } from '../../../interface';
-  IContactList,
-  IContactSearchResult,
-  IBlackListUserItem,
-  IUserStatus,
-  IUserStatusMap,
-  IContactInfoType,
-} from '../../../interface';
 import ContactListItem from './contact-list-item/index.vue';
 import { deepCopy } from '../../TUIChat/utils/utils';
 import { isPC } from '../../../utils/env';
@@ -119,23 +79,23 @@ const contactListMap = ref<IContactList>({
     key: 'friendApplicationList',
     title: '新的联系人',
     list: [] as FriendApplication[],
-    unreadCount: 0,
+    unreadCount: 0
   },
   blackList: {
     key: 'blackList',
     title: '黑名单',
-    list: [] as IBlackListUserItem[],
+    list: [] as IBlackListUserItem[]
   },
   groupList: {
     key: 'groupList',
     title: '我的群聊',
-    list: [] as IGroupModel[],
+    list: [] as IGroupModel[]
   },
   friendList: {
     key: 'friendList',
     title: '我的好友',
-    list: [] as Friend[],
+    list: [] as Friend[]
-  },
+  }
 });
 const contactSearchingStatus = ref<boolean>(false);
 const contactSearchResult = ref<IContactSearchResult>();
@@ -143,67 +103,64 @@ const displayOnlineStatus = ref<boolean>(false);
 const userOnlineStatusMap = ref<IUserStatusMap>();
 
 const isContactSearchNoResult = computed((): boolean => {
-  return (
+  return !contactSearchResult?.value?.user?.list[0] && !contactSearchResult?.value?.group?.list[0];
-    !contactSearchResult?.value?.user?.list[0]
-    && !contactSearchResult?.value?.group?.list[0]
-  );
 });
 
 onMounted(() => {
   TUIStore.watch(StoreName.APP, {
-    enabledCustomerServicePlugin: onCustomerServiceCommercialPluginUpdated,
+    enabledCustomerServicePlugin: onCustomerServiceCommercialPluginUpdated
   });
 
   TUIStore.watch(StoreName.GRP, {
-    groupList: onGroupListUpdated,
+    groupList: onGroupListUpdated
   });
 
   TUIStore.watch(StoreName.USER, {
     userBlacklist: onUserBlacklistUpdated,
     displayOnlineStatus: onDisplayOnlineStatusUpdated,
-    userStatusList: onUserStatusListUpdated,
+    userStatusList: onUserStatusListUpdated
   });
 
   TUIStore.watch(StoreName.FRIEND, {
     friendList: onFriendListUpdated,
     friendApplicationList: onFriendApplicationListUpdated,
-    friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated,
+    friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated
   });
 
   TUIStore.watch(StoreName.CUSTOM, {
     currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
     currentContactSearchResult: onCurrentContactSearchResultUpdated,
     currentContactListKey: onCurrentContactListKeyUpdated,
-    currentContactInfo: onCurrentContactInfoUpdated,
+    currentContactInfo: onCurrentContactInfoUpdated
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.APP, {
-    enabledCustomerServicePlugin: onCustomerServiceCommercialPluginUpdated,
+    enabledCustomerServicePlugin: onCustomerServiceCommercialPluginUpdated
   });
 
   TUIStore.unwatch(StoreName.GRP, {
-    groupList: onGroupListUpdated,
+    groupList: onGroupListUpdated
   });
 
   TUIStore.unwatch(StoreName.USER, {
     userBlacklist: onUserBlacklistUpdated,
     displayOnlineStatus: onDisplayOnlineStatusUpdated,
-    userStatusList: onUserStatusListUpdated,
+    userStatusList: onUserStatusListUpdated
   });
 
   TUIStore.unwatch(StoreName.FRIEND, {
     friendList: onFriendListUpdated,
     friendApplicationList: onFriendApplicationListUpdated,
-    friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated,
+    friendApplicationUnreadCount: onFriendApplicationUnreadCountUpdated
   });
 
   TUIStore.unwatch(StoreName.CUSTOM, {
     currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
     currentContactSearchResult: onCurrentContactSearchResultUpdated,
     currentContactListKey: onCurrentContactListKeyUpdated,
-    currentContactInfo: onCurrentContactInfoUpdated,
+    currentContactInfo: onCurrentContactInfoUpdated
   });
 });
 
@@ -230,11 +187,11 @@ function selectItem(item: any) {
     let targetListItem;
     if ((currentContactInfo.value as Friend)?.userID) {
       targetListItem = contactListMap.value?.friendList?.list?.find(
-        (item: IContactInfoType) => (item as Friend)?.userID === (currentContactInfo.value as Friend)?.userID,
+        (item: IContactInfoType) => (item as Friend)?.userID === (currentContactInfo.value as Friend)?.userID
       );
     } else if ((currentContactInfo.value as IGroupModel)?.groupID) {
       targetListItem = contactListMap.value?.groupList?.list?.find(
-        (item: IContactInfoType) => (item as IGroupModel)?.groupID === (currentContactInfo.value as IGroupModel)?.groupID,
+        (item: IContactInfoType) => (item as IGroupModel)?.groupID === (currentContactInfo.value as IGroupModel)?.groupID
       );
     }
     if (targetListItem) {
@@ -283,15 +240,15 @@ function onCustomerServiceCommercialPluginUpdated(isEnabled: boolean) {
                 ...item,
                 renderKey: generateRenderKey('customerList', item, index),
                 infoKeyList: [],
-                btnKeyList: ['enterC2CConversation'],
+                btnKeyList: ['enterC2CConversation']
               };
             }),
-            key: 'customerList',
+            key: 'customerList'
           };
           contactListMap.value = { ...contactListMap.value, customerList };
         }
       })
-      .catch(() => { });
+      .catch(() => {});
   }
 }
 
@@ -317,28 +274,27 @@ function onFriendApplicationListUpdated(friendApplicationList: FriendApplication
 
 function updateContactListMap(key: keyof IContactList, list: IContactInfoType[]) {
   contactListMap.value[key].list = list;
-  contactListMap.value[key].list.map((item: IContactInfoType, index: number) => item.renderKey = generateRenderKey(key, item, index));
+  contactListMap.value[key].list.map((item: IContactInfoType, index: number) => (item.renderKey = generateRenderKey(key, item, index)));
   updateCurrentContactInfoFromList(contactListMap.value[key].list, key);
 }
 
 function updateCurrentContactInfoFromList(list: IContactInfoType[], type: keyof IContactList) {
-  if (
+  if (!(currentContactInfo.value as Friend)?.userID && !(currentContactInfo.value as IGroupModel)?.groupID) {
-    !(currentContactInfo.value as Friend)?.userID
-    && !(currentContactInfo.value as IGroupModel)?.groupID
-  ) {
     return;
   }
   if (type === currentContactListKey.value || contactSearchingStatus.value) {
-    currentContactInfo.value = list?.find(
+    currentContactInfo.value =
-      (item: any) =>
+      list?.find(
-        (item?.groupID && item?.groupID === (currentContactInfo.value as IGroupModel)?.groupID) || (item?.userID && item?.userID === (currentContactInfo.value as Friend)?.userID),
+        (item: any) =>
-    ) || {} as IContactInfoType;
+          (item?.groupID && item?.groupID === (currentContactInfo.value as IGroupModel)?.groupID) ||
+          (item?.userID && item?.userID === (currentContactInfo.value as Friend)?.userID)
+      ) || ({} as IContactInfoType);
     TUIStore.update(StoreName.CUSTOM, 'currentContactInfo', currentContactInfo.value);
   }
 }
 
 function generateRenderKey(contactListMapKey: keyof IContactList, contactInfo: IContactInfoType, index: number) {
-  return `${contactListMapKey}-${(contactInfo as Friend).userID || (contactInfo as IGroupModel).groupID || ('index' + index)}`;
+  return `${contactListMapKey}-${(contactInfo as Friend).userID || (contactInfo as IGroupModel).groupID || 'index' + index}`;
 }
 
 function onCurrentContactSearchResultUpdated(searchResult: IContactSearchResult) {

src/TUIKit/components/TUIContact/contact-search/index.vue

@@ -2,43 +2,21 @@
   <div :class="['tui-contact-search', !isPC && 'tui-contact-search-h5']">
     <div
       v-if="!isSearching || !isPC"
-      :class="[
+      :class="['tui-contact-search-header', !isPC && 'tui-contact-search-h5-header', isSearching && 'tui-contact-searching-h5-header']"
-        'tui-contact-search-header',
-        !isPC && 'tui-contact-search-h5-header',
-        isSearching && 'tui-contact-searching-h5-header',
-      ]"
       @click="changeContactSearchingStatus(true)"
     >
       <div
-        :class="[
+        :class="['tui-contact-search-header-icon', !isPC && 'tui-contact-search-h5-header-icon']"
-          'tui-contact-search-header-icon',
-          !isPC && 'tui-contact-search-h5-header-icon',
-        ]"
         @click.stop="changeContactSearchingStatus(!isSearching)"
       >
-        <Icon
+        <Icon :file="isSearching ? backSVG : addSVG" :width="isSearching ? '20px' : '14px'" :height="isSearching ? '20px' : '14px'" />
-          :file="isSearching ? backSVG : addSVG"
-          :width="isSearching ? '20px' : '14px'"
-          :height="isSearching ? '20px' : '14px'"
-        />
       </div>
 
-      <div
+      <div :class="['tui-contact-search-header-title', !isPC && 'tui-contact-search-h5-header-title']">
-        :class="[
+        {{ TUITranslateService.t('TUIContact.添加好友/群聊') }}
-          'tui-contact-search-header-title',
-          !isPC && 'tui-contact-search-h5-header-title',
-        ]"
-      >
-        {{ TUITranslateService.t("TUIContact.添加好友/群聊") }}
       </div>
     </div>
-    <div
+    <div v-if="isSearching" :class="['tui-contact-search-main', !isPC && 'tui-contact-search-h5-main']">
-      v-if="isSearching"
-      :class="[
-        'tui-contact-search-main',
-        !isPC && 'tui-contact-search-h5-main',
-      ]"
-    >
       <input
         v-model="searchValue"
         class="tui-contact-search-main-input"
@@ -48,23 +26,16 @@
         @keyup.enter="search"
         @blur="search"
         @confirm="search"
-      >
+      />
-      <div
+      <div class="tui-contact-search-main-cancel" @click="isSearching = false">
-        class="tui-contact-search-main-cancel"
+        {{ TUITranslateService.t('取消') }}
-        @click="isSearching = false"
-      >
-        {{ TUITranslateService.t("取消") }}
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ref, watch } from '../../../adapter-vue';
-import {
+import { TUITranslateService, TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import Icon from '../../common/Icon.vue';
@@ -80,12 +51,12 @@ const searchValue = ref<string>('');
 const searchResult = ref<IContactSearchResult>({
   user: {
     label: '联系人',
-    list: [],
+    list: []
   },
   group: {
     label: '群聊',
-    list: [],
+    list: []
-  },
+  }
 });
 
 const changeContactSearchingStatus = debounce(function (status: boolean) {
@@ -100,8 +71,8 @@ const search = async () => {
     serviceName: TUIConstants.TUISearch.SERVICE.NAME,
     method: TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_USER,
     params: {
-      userID: searchValue.value,
+      userID: searchValue.value
-    },
+    }
   })
     .then((res: any) => {
       searchResult.value.user.list = res.data;
@@ -114,8 +85,8 @@ const search = async () => {
     serviceName: TUIConstants.TUISearch.SERVICE.NAME,
     method: TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_GROUP,
     params: {
-      groupID: searchValue.value,
+      groupID: searchValue.value
-    },
+    }
   })
     .then((res: any) => {
       searchResult.value.group.list = [res.data.group];
@@ -128,25 +99,17 @@ const search = async () => {
 watch(
   () => searchResult.value,
   () => {
-    TUIStore.update(
+    TUIStore.update(StoreName.CUSTOM, 'currentContactSearchResult', searchResult.value);
-      StoreName.CUSTOM,
-      'currentContactSearchResult',
-      searchResult.value,
-    );
   },
   {
     deep: true,
-    immediate: true,
+    immediate: true
-  },
+  }
 );
 watch(
   () => isSearching.value,
   () => {
-    TUIStore.update(
+    TUIStore.update(StoreName.CUSTOM, 'currentContactSearchingStatus', isSearching.value);
-      StoreName.CUSTOM,
-      'currentContactSearchingStatus',
-      isSearching.value,
-    );
     if (isSearching.value) {
       searchValue.value = '';
       searchResult.value.user.list = [];
@@ -155,8 +118,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
+    immediate: true
-  },
+  }
 );
 
 TUIGlobal.updateContactSearch = search;

src/TUIKit/components/TUIContact/index.vue

@@ -1,17 +1,11 @@
 <template>
   <SelectFriend v-if="isShowSelectFriend" />
-  <div
+  <div v-else-if="isShowContactList" :class="['tui-contact', !isPC && 'tui-contact-h5']">
-    v-else-if="isShowContactList"
-    :class="['tui-contact', !isPC && 'tui-contact-h5']"
-  >
     <div :class="['tui-contact-left', !isPC && 'tui-contact-h5-left']">
       <ContactSearch />
       <ContactList :class="['tui-contact-left-list', !isPC && 'tui-contact-h5-left-list']" />
     </div>
-    <div
+    <div v-if="isShowContactInfo" :class="['tui-contact-right', !isPC && 'tui-contact-h5-right']">
-      v-if="isShowContactInfo"
-      :class="['tui-contact-right', !isPC && 'tui-contact-h5-right']"
-    >
       <ContactInfo @switchConversation="switchConversation" />
     </div>
   </div>
@@ -34,8 +28,8 @@ const props = defineProps({
   displayType: {
     type: String,
     default: 'contactList', // "contactList" /  "selectFriend"
-    require: false,
+    require: false
-  },
+  }
 });
 
 const displayTypeRef = ref<string>(props.displayType || 'contactList');
@@ -64,26 +58,27 @@ TUIStore.watch(StoreName.CUSTOM, {
       isShowSelectFriend.value = false;
       if (isUniFrameWork) {
         displayTypeRef.value = props.displayType;
-        TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
+        TUIGlobal?.showTabBar()?.catch(() => {
+          /* ignore */
+        });
       }
     }
   },
   currentContactInfo: (contactInfo: any) => {
     isShowContactInfo.value = isPC || (contactInfo && typeof contactInfo === 'object' && Object.keys(contactInfo)?.length > 0);
-  },
+  }
 });
 
 const switchConversation = (data: any) => {
-  isUniFrameWork
+  isUniFrameWork &&
-  && TUIGlobal?.navigateTo({
+    TUIGlobal?.navigateTo({
-    url: '/TUIKit/components/TUIChat/index',
+      url: '/TUIKit/components/TUIChat/index'
-  });
+    });
   emits('switchConversation', data);
 };
-
 </script>
 <style lang="scss" scoped>
-@import "../../assets/styles/common";
+@import '../../assets/styles/common';
 
 .tui-contact {
   width: 100%;

src/TUIKit/components/TUIContact/select-friend/index.vue

@@ -9,12 +9,7 @@
   />
 </template>
 <script lang="ts" setup>
-import {
+import { TUIFriendService, TUIStore, StoreName, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIFriendService,
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import { ref, watchEffect } from '../../../adapter-vue';
 import { Toast, TOAST_TYPE } from '../../common/Toast/index';
 import TUICore from '@tencentcloud/tui-core';
@@ -30,7 +25,7 @@ const TUISearchServer = ref<any>(null);
 const selectOptions = ref({
   isRadio: false,
   isNeedSearch: false,
-  title: '',
+  title: ''
 });
 
 const generateSearchServer = (isNeedSearch: any) => {
@@ -50,12 +45,14 @@ watchEffect(() => {
   if (params.isNeedSearch) {
     generateSearchServer(params.isNeedSearch);
   }
-  TUIFriendService.getFriendList().then((res: any) => {
+  TUIFriendService.getFriendList()
-    friendList.value = res.data.map((item: any) => item.profile);
+    .then((res: any) => {
-    userList.value = friendList.value;
+      friendList.value = res.data.map((item: any) => item.profile);
-  }).catch((err: any) => {
+      userList.value = friendList.value;
-    console.warn('getFriendList error:', err);
+    })
-  });
+    .catch((err: any) => {
+      console.warn('getFriendList error:', err);
+    });
 });
 
 const handleSelectedResult = (memberList: Array<any>) => {
@@ -67,14 +64,14 @@ const handleSelectedResult = (memberList: Array<any>) => {
 const searchFail = () => {
   Toast({
     message: TUITranslateService.t('TUIGroup.该用户不存在'),
-    type: TOAST_TYPE.ERROR,
+    type: TOAST_TYPE.ERROR
   });
   userList.value = [...friendList.value];
 };
 
 const handleSearch = async (val: string) => {
   if (!val) {
-    return userList.value = friendList.value;
+    return (userList.value = friendList.value);
   }
 
   try {

src/TUIKit/components/TUIContact/server.ts

@@ -35,9 +35,10 @@ export default class TUIContactServer {
     this.onCallCallbackMap.set(method, callback);
     if (method === TUIConstants.TUIContact.SERVICE.METHOD.SELECT_FRIEND) {
       TUIStore.update(StoreName.CUSTOM, 'isShowSelectFriendComponent', true);
-      isUniFrameWork && TUIGlobal?.reLaunch({
+      isUniFrameWork &&
-        url: '/TUIKit/components/TUIContact/index',
+        TUIGlobal?.reLaunch({
-      });
+          url: '/TUIKit/components/TUIContact/index'
+        });
     }
   }
 }

src/TUIKit/components/TUIContact/utils/index.ts

@@ -5,69 +5,49 @@ import TUIChatEngine, {
   TUIUserService,
   TUITranslateService,
   AddFriendParams,
-  JoinGroupParams,
+  JoinGroupParams
 } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { Toast, TOAST_TYPE } from '../../common/Toast/index';
 
 export const generateAvatar = (item: any): string => {
   return (
-    item?.avatar
+    item?.avatar ||
-    || item?.profile?.avatar
+    item?.profile?.avatar ||
-    || (item?.groupID && 'https://web.sdk.qcloud.com/im/assets/images/Public.svg')
+    (item?.groupID && 'https://web.sdk.qcloud.com/im/assets/images/Public.svg') ||
-    || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
   );
 };
 
 export const generateName = (item: any): string => {
-  return (
+  return item?.remark || item?.name || item?.profile?.nick || item?.nick || item?.groupID || item?.userID || '';
-    item?.remark
-    || item?.name
-    || item?.profile?.nick
-    || item?.nick
-    || item?.groupID
-    || item?.userID
-    || ''
-  );
 };
 
 export const generateContactInfoName = (item: any): string => {
-  return (
+  return item?.name || item?.profile?.nick || item?.nick || item?.groupID || item?.userID || '';
-    item?.name
-    || item?.profile?.nick
-    || item?.nick
-    || item?.groupID
-    || item?.userID
-    || ''
-  );
 };
 
 // Parse the basic information display content of the contactInfo module
 // Group information display: group ID group type
 // User information display: user ID personal signature
-export const generateContactInfoBasic = (
+export const generateContactInfoBasic = (contactInfo: any): any[] => {
-  contactInfo: any,
-): any[] => {
   const res = [
     {
       label: contactInfo?.groupID ? '群ID' : 'ID',
-      data: contactInfo?.groupID || contactInfo?.userID || '',
+      data: contactInfo?.groupID || contactInfo?.userID || ''
-    },
+    }
   ];
   if (!isApplicationType(contactInfo)) {
     res.push({
       label: contactInfo?.groupID ? '群类型' : '个性签名',
-      data: contactInfo?.type || contactInfo?.profile?.selfSignature || '',
+      data: contactInfo?.type || contactInfo?.profile?.selfSignature || ''
     });
   }
   return res;
 };
 
 export const isApplicationType = (info: any) => {
-  return (
+  return info?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME || info?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME;
-    info?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
-    || info?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
-  );
 };
 
 export const isFriend = (info: any): Promise<boolean> => {
@@ -82,7 +62,7 @@ export const isFriend = (info: any): Promise<boolean> => {
     }
     TUIFriendService.checkFriend({
       userIDList: [info?.userID],
-      type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH,
+      type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH
     })
       .then((res: any) => {
         switch (res?.data?.successUserIDList[0]?.relation) {
@@ -116,29 +96,28 @@ export const isFriend = (info: any): Promise<boolean> => {
 
 // Change friend‘s remark
 export const updateFriendRemark = (userID: string, remark: string) => {
-  // eslint-disable-next-line no-control-regex
   if (remark?.replace(/[^\u0000-\u00ff]/g, 'aa')?.length > 96) {
     Toast({
       message: TUITranslateService.t('TUIContact.修改备注失败: 备注长度不得超过 96 字节'),
-      type: TOAST_TYPE.ERROR,
+      type: TOAST_TYPE.ERROR
     });
     return;
   }
   TUIFriendService.updateFriend({
     userID,
-    remark,
+    remark
   })
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.修改备注成功'),
-        type: TOAST_TYPE.SUCCESS,
+        type: TOAST_TYPE.SUCCESS
       });
     })
     .catch((error: any) => {
       console.warn('update friend remark failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.修改备注失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
@@ -147,19 +126,19 @@ export const updateFriendRemark = (userID: string, remark: string) => {
 export const deleteFriend = (userID: string) => {
   TUIFriendService.deleteFriend({
     userIDList: [userID],
-    type: TUIChatEngine.TYPES.SNS_DELETE_TYPE_BOTH,
+    type: TUIChatEngine.TYPES.SNS_DELETE_TYPE_BOTH
   })
     .then((res: any) => {
       const { successUserIDList } = res.data;
       if (successUserIDList[0].userID === userID) {
         Toast({
           message: TUITranslateService.t('TUIContact.删除好友成功'),
-          type: TOAST_TYPE.SUCCESS,
+          type: TOAST_TYPE.SUCCESS
         });
       } else {
         Toast({
           message: TUITranslateService.t('TUIContact.删除好友失败'),
-          type: TOAST_TYPE.ERROR,
+          type: TOAST_TYPE.ERROR
         });
       }
     })
@@ -167,7 +146,7 @@ export const deleteFriend = (userID: string) => {
       console.warn('delete friend failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.删除好友失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
@@ -178,51 +157,47 @@ export const addFriend = (params: AddFriendParams) => {
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.申请已发送'),
-        type: TOAST_TYPE.SUCCESS,
+        type: TOAST_TYPE.SUCCESS
       });
     })
     .catch((error: any) => {
       console.warn('delete friend failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.申请发送失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
 
 // Enter conversation
 export const enterConversation = (item: any) => {
-  const conversationID = item?.groupID
+  const conversationID = item?.groupID ? `GROUP${item?.groupID}` : `C2C${item?.userID}`;
-    ? `GROUP${item?.groupID}`
+  TUIConversationService.switchConversation(conversationID).catch((error: any) => {
-    : `C2C${item?.userID}`;
+    console.warn('switch conversation failed:', error);
-  TUIConversationService.switchConversation(conversationID).catch(
+    Toast({
-    (error: any) => {
+      message: TUITranslateService.t('TUIContact.进入会话失败'),
-      console.warn('switch conversation failed:', error);
+      type: TOAST_TYPE.ERROR
-      Toast({
+    });
-        message: TUITranslateService.t('TUIContact.进入会话失败'),
+  });
-        type: TOAST_TYPE.ERROR,
-      });
-    },
-  );
 };
 
 // Accept friend application
 export const acceptFriendApplication = (userID: string) => {
   TUIFriendService.acceptFriendApplication({
     userID,
-    type: TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD,
+    type: TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD
   })
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.添加好友成功'),
-        type: TOAST_TYPE.SUCCESS,
+        type: TOAST_TYPE.SUCCESS
       });
     })
     .catch((error: any) => {
       console.warn('accept friend application failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.同意好友申请失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
@@ -233,14 +208,14 @@ export const refuseFriendApplication = (userID: string) => {
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.拒绝成功'),
-        type: TOAST_TYPE.SUCCESS,
+        type: TOAST_TYPE.SUCCESS
       });
     })
     .catch((error: any) => {
       console.warn('accept friend application failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.拒绝好友申请失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
@@ -251,7 +226,7 @@ export const dismissGroup = (groupID: string) => {
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.解散群聊成功'),
-        type: TOAST_TYPE.SUCCESS,
+        type: TOAST_TYPE.SUCCESS
       });
       TUIGlobal?.updateContactSearch && TUIGlobal?.updateContactSearch();
     })
@@ -259,7 +234,7 @@ export const dismissGroup = (groupID: string) => {
       console.warn('dismiss group failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.解散群聊失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
@@ -270,14 +245,14 @@ export const quitGroup = (groupID: string) => {
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.退出群组成功'),
-        type: TOAST_TYPE.SUCCESS,
+        type: TOAST_TYPE.SUCCESS
       });
     })
     .catch((error: any) => {
       console.warn('quit group failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.退出群组失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
@@ -286,26 +261,26 @@ export const quitGroup = (groupID: string) => {
 export const joinGroup = (groupID: string, applyMessage?: string) => {
   TUIGroupService.joinGroup({
     groupID,
-    applyMessage,
+    applyMessage
   } as JoinGroupParams)
     .then((imResponse: { data: { status?: string } }) => {
       switch (imResponse?.data?.status) {
         case TUIChatEngine.TYPES.JOIN_STATUS_WAIT_APPROVAL: // Wait for administrator approval
           Toast({
             message: TUITranslateService.t('TUIContact.等待管理员同意'),
-            type: TOAST_TYPE.SUCCESS,
+            type: TOAST_TYPE.SUCCESS
           });
           break;
         case TUIChatEngine.TYPES.JOIN_STATUS_SUCCESS: // Join group successfully
           Toast({
             message: TUITranslateService.t('TUIContact.加群成功'),
-            type: TOAST_TYPE.SUCCESS,
+            type: TOAST_TYPE.SUCCESS
           });
           break;
         case TUIChatEngine.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // Already in the group
           Toast({
             message: TUITranslateService.t('TUIContact.您已是群成员'),
-            type: TOAST_TYPE.SUCCESS,
+            type: TOAST_TYPE.SUCCESS
           });
           break;
         default:
@@ -316,7 +291,7 @@ export const joinGroup = (groupID: string, applyMessage?: string) => {
       console.warn('join group failed:', error);
       Toast({
         message: '申请入群失败',
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
@@ -324,7 +299,7 @@ export const joinGroup = (groupID: string, applyMessage?: string) => {
 // Add to blacklist
 export const addToBlacklist = (userID: string, successCallBack?: () => void) => {
   TUIUserService.addToBlacklist({
-    userIDList: [userID],
+    userIDList: [userID]
   })
     .then(() => {
       successCallBack && successCallBack();
@@ -333,18 +308,15 @@ export const addToBlacklist = (userID: string, successCallBack?: () => void) =>
       console.warn('add to blacklist failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.加入黑名单失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
 
 // Remove from Blacklist
-export const removeFromBlacklist = (
+export const removeFromBlacklist = (userID: string, successCallBack?: () => void) => {
-  userID: string,
-  successCallBack?: () => void,
-) => {
   TUIUserService.removeFromBlacklist({
-    userIDList: [userID],
+    userIDList: [userID]
   })
     .then(() => {
       successCallBack && successCallBack();
@@ -353,7 +325,7 @@ export const removeFromBlacklist = (
       console.warn('remove from blacklist failed:', error);
       Toast({
         message: TUITranslateService.t('TUIContact.移除黑名单失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };

src/TUIKit/components/TUIConversation/actions-menu/index.vue

@@ -1,54 +1,44 @@
 <template>
-  <Overlay
+  <Overlay :maskColor="'transparent'" @onOverlayClick="() => emits('closeConversationActionMenu')">
-    :maskColor="'transparent'"
-    @onOverlayClick="() => emits('closeConversationActionMenu')"
-  >
     <div
       id="conversation-actions-menu"
       ref="actionsMenuDomRef"
-      :class="[
+      :class="[isPC && 'actions-menu-pc', 'actions-menu', !isHiddenActionsMenu && 'cancel-hidden']"
-        isPC && 'actions-menu-pc',
-        'actions-menu',
-        !isHiddenActionsMenu && 'cancel-hidden',
-      ]"
       :style="{
         top: `${_actionsMenuPosition.top}px`,
-        left: `${_actionsMenuPosition.left}px`,
+        left: `${_actionsMenuPosition.left}px`
       }"
     >
-      <div
+      <div :class="['actions-menu-item']" @click.stop="deleteConversation()">
-        :class="['actions-menu-item']"
+        {{ TUITranslateService.t('TUIConversation.删除会话') }}
-        @click.stop="deleteConversation()"
-      >
-        {{ TUITranslateService.t("TUIConversation.删除会话") }}
       </div>
       <div
         v-if="!(props.selectedConversation && props.selectedConversation.isPinned)"
         :class="['actions-menu-item']"
         @click.stop="handleItem({ name: CONV_OPERATION.ISPINNED })"
       >
-        {{ TUITranslateService.t("TUIConversation.置顶会话") }}
+        {{ TUITranslateService.t('TUIConversation.置顶会话') }}
       </div>
       <div
         v-if="props.selectedConversation && props.selectedConversation.isPinned"
         :class="['actions-menu-item']"
         @click.stop="handleItem({ name: CONV_OPERATION.DISPINNED })"
       >
-        {{ TUITranslateService.t("TUIConversation.取消置顶") }}
+        {{ TUITranslateService.t('TUIConversation.取消置顶') }}
       </div>
       <div
         v-if="!(props.selectedConversation && props.selectedConversation.isMuted)"
         :class="['actions-menu-item']"
         @click.stop="handleItem({ name: CONV_OPERATION.MUTE })"
       >
-        {{ TUITranslateService.t("TUIConversation.消息免打扰") }}
+        {{ TUITranslateService.t('TUIConversation.消息免打扰') }}
       </div>
       <div
         v-if="props.selectedConversation && props.selectedConversation.isMuted"
         :class="['actions-menu-item']"
         @click.stop="handleItem({ name: CONV_OPERATION.NOTMUTE })"
       >
-        {{ TUITranslateService.t("TUIConversation.取消免打扰") }}
+        {{ TUITranslateService.t('TUIConversation.取消免打扰') }}
       </div>
     </div>
     <Dialog
@@ -66,18 +56,8 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { ref, nextTick, onMounted, computed, getCurrentInstance } from '../../../adapter-vue';
-  ref,
+import TUIChatEngine, { IConversationModel, TUIStore, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  nextTick,
-  onMounted,
-  computed,
-  getCurrentInstance,
-} from '../../../adapter-vue';
-import TUIChatEngine, {
-  IConversationModel,
-  TUIStore,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { CONV_OPERATION } from '../../../constant';
 import { isPC, isUniFrameWork } from '../../../utils/env';
@@ -101,9 +81,7 @@ const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance();
 const actionsMenuDomRef = ref<HTMLElement | null>();
 const isHiddenActionsMenu = ref(true);
 const isShowDeleteConversationDialog = ref<boolean>(false);
-const currentConversation = TUIStore.getConversationModel(
+const currentConversation = TUIStore.getConversationModel(props.selectedConversation?.conversationID || '');
-  props.selectedConversation?.conversationID || '',
-);
 const _actionsMenuPosition = ref<{
   top: number;
   left?: number;
@@ -117,7 +95,9 @@ onMounted(() => {
 const deleteConversationDialogTitle = computed(() => {
   return props.selectedConversation?.type === TUIChatEngine.TYPES.CONV_C2C
     ? 'TUIConversation.删除后，将清空该聊天的消息记录'
-    : props.selectedConversation?.type === TUIChatEngine.TYPES.CONV_GROUP ? 'TUIConversation.删除后，将清空该群聊的消息记录' : '';
+    : props.selectedConversation?.type === TUIChatEngine.TYPES.CONV_GROUP
+      ? 'TUIConversation.删除后，将清空该群聊的消息记录'
+      : '';
 });
 function checkExceedBounds() {
   // When the component is initially rendered, it executes and self-checks whether the boundary exceeds the screen, and handles it in nextTick.
@@ -133,10 +113,7 @@ function checkExceedBounds() {
             if (data.bottom > TUIGlobal?.getWindowInfo?.().windowHeight) {
               _actionsMenuPosition.value = {
                 ...props.actionsMenuPosition,
-                top:
+                top: props.actionsMenuPosition.top - (props.actionsMenuPosition.conversationHeight || 0) - data.height
-                  props.actionsMenuPosition.top
-                  - (props.actionsMenuPosition.conversationHeight || 0)
-                  - data.height,
               };
             }
             // check if actionsMenu is exceed right of the screen
@@ -155,10 +132,7 @@ function checkExceedBounds() {
         _actionsMenuPosition.value.left = props.actionsMenuPosition.left;
       }
       if (rect && rect.bottom > window.innerHeight) {
-        _actionsMenuPosition.value.top
+        _actionsMenuPosition.value.top = props.actionsMenuPosition.top - (props.actionsMenuPosition.conversationHeight || 0) - rect.height;
-          = props.actionsMenuPosition.top
-          - (props.actionsMenuPosition.conversationHeight || 0)
-          - rect.height;
       }
       isHiddenActionsMenu.value = false;
     }

src/TUIKit/components/TUIConversation/conversation-header/index.vue

@@ -1,54 +1,20 @@
 <template>
-  <div
+  <div :ref="convHeaderRef" class="tui-conversation-header">
-    :ref="convHeaderRef"
+    <ul v-if="menuList.length > 0" class="list">
-    class="tui-conversation-header"
+      <li v-for="(item, index) in menuList" :key="index" class="list-item">
-  >
+        <main class="tui-conversation-header-item" @click.stop="handleMenu(item)">
-    <ul
+          <Icon v-if="item.icon && !item.data.children" class="tui-conversation-header-item-icon" :file="item.icon" />
-      v-if="menuList.length > 0"
+          <i v-else class="plus" />
-      class="list"
-    >
-      <li
-        v-for="(item, index) in menuList"
-        :key="index"
-        class="list-item"
-      >
-        <main
-          class="tui-conversation-header-item"
-          @click.stop="handleMenu(item)"
-        >
-          <Icon
-            v-if="item.icon && !item.data.children"
-            class="tui-conversation-header-item-icon"
-            :file="item.icon"
-          />
-          <i
-            v-else
-            class="plus"
-          />
           <h1 class="tui-conversation-header-item-title">
             {{ item.text }}
           </h1>
         </main>
       </li>
     </ul>
-    <ul
+    <ul v-if="showChildren.length > 0" class="tui-conversation-header-children list">
-      v-if="showChildren.length > 0"
+      <li v-for="(childrenItem, childrenIndex) in showChildren" :key="childrenIndex" class="list-item">
-      class="tui-conversation-header-children list"
+        <main class="tui-conversation-header-item" @click="handleMenu(childrenItem)">
-    >
+          <Icon v-if="childrenItem.icon" class="tui-conversation-header-item-icon" :file="childrenItem.icon" />
-      <li
-        v-for="(childrenItem, childrenIndex) in showChildren"
-        :key="childrenIndex"
-        class="list-item"
-      >
-        <main
-          class="tui-conversation-header-item"
-          @click="handleMenu(childrenItem)"
-        >
-          <Icon
-            v-if="childrenItem.icon"
-            class="tui-conversation-header-item-icon"
-            :file="childrenItem.icon"
-          />
           <h1 class="tui-conversation-header-item-title">
             {{ childrenItem.text }}
           </h1>
@@ -74,7 +40,10 @@ onMounted(() => {
 });
 
 const handleMenu = (item: IMenuItem) => {
-  const { data: { children }, listener = { onClicked: () => {} } } = item;
+  const {
+    data: { children },
+    listener = { onClicked: () => {} }
+  } = item;
   if (children) {
     showChildren.value = showChildren.value.length > 0 ? [] : children;
   } else {
@@ -88,9 +57,8 @@ const closeChildren = () => {
 };
 
 defineExpose({
-  closeChildren,
+  closeChildren
 });
-
 </script>
 
 <style lang="scss" scoped src="../style/index.scss"></style>

src/TUIKit/components/TUIConversation/conversation-header/server.ts

@@ -30,13 +30,15 @@ export default class ConversationHeaderServer {
   public getMenu(): any[] {
     const list = this.generateMenuList();
     if (!isPC && list.length > 0) {
-      return [{
+      return [
-        text: TUITranslateService.t('TUIConversation.发起会话'),
+        {
-        data: {
+          text: TUITranslateService.t('TUIConversation.发起会话'),
-          name: 'all',
+          data: {
-          children: list,
+            name: 'all',
-        },
+            children: list
-      }];
+          }
+        }
+      ];
     }
     return list;
   }
@@ -47,22 +49,22 @@ export default class ConversationHeaderServer {
         icon: C2C,
         text: TUITranslateService.t('TUIConversation.发起单聊'),
         data: {
-          name: CONV_CREATE_TYPE.TYPEC2C,
+          name: CONV_CREATE_TYPE.TYPEC2C
         },
         listener: {
-          onClicked: this.createConversation.bind(this),
+          onClicked: this.createConversation.bind(this)
-        },
+        }
       },
       {
         icon: createGroup,
         text: TUITranslateService.t('TUIConversation.发起群聊'),
         data: {
-          name: CONV_CREATE_TYPE.TYPEGROUP,
+          name: CONV_CREATE_TYPE.TYPEGROUP
         },
         listener: {
-          onClicked: this.createConversation.bind(this),
+          onClicked: this.createConversation.bind(this)
-        },
+        }
-      },
+      }
     ];
     return list;
   }
@@ -72,7 +74,7 @@ export default class ConversationHeaderServer {
     TUICore.callService({
       serviceName: TUIConstants.TUIConversation.SERVICE.NAME,
       method: TUIConstants.TUIConversation.SERVICE.METHOD.CREATE_CONVERSATION,
-      params: item,
+      params: item
     });
   }
 }

src/TUIKit/components/TUIConversation/conversation-list/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div ref="conversationListInnerDomRef" class="tui-conversation-list">
-    ref="conversationListInnerDomRef"
-    class="tui-conversation-list"
-  >
     <ActionsMenu
       v-if="isShowOverlay"
       :selectedConversation="currentConversation"
@@ -14,55 +11,36 @@
       v-for="(conversation, index) in conversationList"
       :id="`convlistitem-${index}`"
       :key="index"
-      :class="[
+      :class="['tui-conversation-content', isMobile && 'tui-conversation-content-h5 disable-select']"
-        'tui-conversation-content',
-        isMobile && 'tui-conversation-content-h5 disable-select',
-      ]"
     >
       <div
         :class="[
           isPC && 'isPC',
           'tui-conversation-item',
-          currentConversationID === conversation.conversationID &&
+          currentConversationID === conversation.conversationID && 'tui-conversation-item-selected',
-            'tui-conversation-item-selected',
+          conversation.isPinned && 'tui-conversation-item-pinned'
-          conversation.isPinned && 'tui-conversation-item-pinned',
         ]"
         @click="enterConversationChat(conversation.conversationID)"
         @longpress="showConversationActionMenu($event, conversation, index)"
         @contextmenu="showConversationActionMenu($event, conversation, index, true)"
       >
         <aside class="left">
-          <Avatar
+          <Avatar useSkeletonAnimation :url="conversation.getAvatar()" size="30px" />
-            useSkeletonAnimation
-            :url="conversation.getAvatar()"
-            size="30px"
-          />
           <div
             v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)"
             :class="[
               'online-status',
               Object.keys(userOnlineStatusMap).length > 0 &&
-                Object.keys(userOnlineStatusMap).includes(
+              Object.keys(userOnlineStatusMap).includes(conversation.userProfile.userID) &&
-                  conversation.userProfile.userID
+              userOnlineStatusMap[conversation.userProfile.userID].statusType === 1
-                ) &&
-                userOnlineStatusMap[conversation.userProfile.userID]
-                  .statusType === 1
                 ? 'online-status-online'
-                : 'online-status-offline',
+                : 'online-status-offline'
             ]"
           />
-          <span
+          <span v-if="conversation.unreadCount > 0 && !conversation.isMuted" class="num">
-            v-if="conversation.unreadCount > 0 && !conversation.isMuted"
+            {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
-            class="num"
-          >
-            {{
-              conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
-            }}
           </span>
-          <span
+          <span v-if="conversation.unreadCount > 0 && conversation.isMuted" class="num-notify" />
-            v-if="conversation.unreadCount > 0 && conversation.isMuted"
-            class="num-notify"
-          />
         </aside>
         <div class="content">
           <div class="content-header">
@@ -70,29 +48,22 @@
               <p class="name">{{ conversation.getShowName() }}</p>
             </label>
             <div class="middle-box">
+              <span v-if="conversation.draftText && conversation.conversationID !== currentConversationID" class="middle-box-draft">{{
+                TUITranslateService.t('TUIChat.[草稿]')
+              }}</span>
               <span
-                v-if="conversation.draftText && conversation.conversationID !== currentConversationID"
+                v-else-if="conversation.type === 'GROUP' && conversation.groupAtInfoList && conversation.groupAtInfoList.length > 0"
-                class="middle-box-draft"
-              >{{ TUITranslateService.t('TUIChat.[草稿]') }}</span>
-              <span
-                v-else-if="
-                  conversation.type === 'GROUP' &&
-                    conversation.groupAtInfoList &&
-                    conversation.groupAtInfoList.length > 0
-                "
                 class="middle-box-at"
-              >{{ conversation.getGroupAtInfo() }}</span>
+                >{{ conversation.getGroupAtInfo() }}</span
+              >
               <div class="middle-box-content">
-                {{ conversation.getLastMessage("text") }}
+                {{ conversation.getLastMessage('text') }}
               </div>
             </div>
           </div>
           <div class="content-footer">
-            <span class="time">{{ conversation.getLastMessage("time") }}</span>
+            <span class="time">{{ conversation.getLastMessage('time') }}</span>
-            <Icon
+            <Icon v-if="conversation.isMuted" :file="muteIcon" />
-              v-if="conversation.isMuted"
-              :file="muteIcon"
-            />
           </div>
         </div>
       </div>
@@ -111,13 +82,7 @@ interface IUserStatusMap {
 }
 
 import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName, TUIConversationService, TUITranslateService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-  TUIConversationService,
-  TUITranslateService,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal, isIOS, addLongPressListener } from '@tencentcloud/universal-api';
 import Icon from '../../common/Icon.vue';
 import Avatar from '../../common/Avatar/index.vue';
@@ -140,7 +105,7 @@ const actionsMenuPosition = ref<{
 }>({
   top: 0,
   left: undefined,
-  conversationHeight: undefined,
+  conversationHeight: undefined
 });
 const displayOnlineStatus = ref(false);
 const userOnlineStatusMap = ref<IUserStatusMap>();
@@ -151,12 +116,12 @@ onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversationID: onCurrentConversationIDUpdated,
     conversationList: onConversationListUpdated,
-    currentConversation: onCurrentConversationUpdated,
+    currentConversation: onCurrentConversationUpdated
   });
 
   TUIStore.watch(StoreName.USER, {
     displayOnlineStatus: onDisplayOnlineStatusUpdated,
-    userStatusList: onUserStatusListUpdated,
+    userStatusList: onUserStatusListUpdated
   });
 
   if (!isUniFrameWork && isIOS && !isPC) {
@@ -168,28 +133,20 @@ onUnmounted(() => {
   TUIStore.unwatch(StoreName.CONV, {
     currentConversationID: onCurrentConversationIDUpdated,
     conversationList: onConversationListUpdated,
-    currentConversation: onCurrentConversationUpdated,
+    currentConversation: onCurrentConversationUpdated
   });
 
   TUIStore.unwatch(StoreName.USER, {
     displayOnlineStatus: onDisplayOnlineStatusUpdated,
-    userStatusList: onUserStatusListUpdated,
+    userStatusList: onUserStatusListUpdated
   });
 });
 
 const isShowUserOnlineStatus = (conversation: IConversationModel): boolean => {
-  return (
+  return displayOnlineStatus.value && conversation.type === TUIChatEngine.TYPES.CONV_C2C;
-    displayOnlineStatus.value
-    && conversation.type === TUIChatEngine.TYPES.CONV_C2C
-  );
 };
 
-const showConversationActionMenu = (
+const showConversationActionMenu = (event: Event, conversation: IConversationModel, index: number, isContextMenuEvent?: boolean) => {
-  event: Event,
-  conversation: IConversationModel,
-  index: number,
-  isContextMenuEvent?: boolean,
-) => {
   if (isContextMenuEvent) {
     event.preventDefault();
     if (isUniFrameWork) {
@@ -203,10 +160,7 @@ const showConversationActionMenu = (
 
 const closeConversationActionMenu = () => {
   // Prevent continuous triggering of overlay tap events
-  if (
+  if (lastestOpenActionsMenuTime && Date.now() - lastestOpenActionsMenuTime > 300) {
-    lastestOpenActionsMenuTime
-    && Date.now() - lastestOpenActionsMenuTime > 300
-  ) {
     currentConversation.value = undefined;
     isShowOverlay.value = false;
   }
@@ -218,25 +172,28 @@ const getActionsMenuPosition = (event: Event, index: number) => {
       emits('getPassingRef', conversationListDomRef);
     }
     const query = TUIGlobal?.createSelectorQuery().in(conversationListDomRef.value);
-    query.select(`#convlistitem-${index}`).boundingClientRect((data) => {
+    query
-      if (data) {
+      .select(`#convlistitem-${index}`)
-        actionsMenuPosition.value = {
+      .boundingClientRect((data) => {
-          // The uni-page-head of uni-h5 is not considered a member of the viewport, so the height of the head is manually increased.
+        if (data) {
-          top: data.bottom + (isH5 ? 44 : 0),
+          actionsMenuPosition.value = {
-          // @ts-expect-error in uniapp event has touches property
+            // The uni-page-head of uni-h5 is not considered a member of the viewport, so the height of the head is manually increased.
-          left: event.touches[0].pageX,
+            top: data.bottom + (isH5 ? 44 : 0),
-          conversationHeight: data.height,
+            // @ts-expect-error in uniapp event has touches property
-        };
+            left: event.touches[0].pageX,
-        isShowOverlay.value = true;
+            conversationHeight: data.height
-      }
+          };
-    }).exec();
+          isShowOverlay.value = true;
+        }
+      })
+      .exec();
   } else {
     const rect = ((event.currentTarget || event.target) as HTMLElement)?.getBoundingClientRect() || {};
     if (rect) {
       actionsMenuPosition.value = {
         top: rect.bottom,
         left: isPC ? (event as MouseEvent).clientX : undefined,
-        conversationHeight: rect.height,
+        conversationHeight: rect.height
       };
     }
     isShowOverlay.value = true;
@@ -260,9 +217,9 @@ function addLongPressHandler() {
     },
     options: {
       eventDelegation: {
-        subSelector: '.tui-conversation-content',
+        subSelector: '.tui-conversation-content'
-      },
+      }
-    },
+    }
   });
 }
 
@@ -284,13 +241,10 @@ function onDisplayOnlineStatusUpdated(status: boolean) {
 
 function onUserStatusListUpdated(list: Map<string, IUserStatus>) {
   if (list.size !== 0) {
-    userOnlineStatusMap.value = [...list.entries()].reduce(
+    userOnlineStatusMap.value = [...list.entries()].reduce((obj, [key, value]) => {
-      (obj, [key, value]) => {
+      obj[key] = value;
-        obj[key] = value;
+      return obj;
-        return obj;
+    }, {} as IUserStatusMap);
-      },
-      {} as IUserStatusMap,
-    );
   }
 }
 // Expose to the parent component and close actionsMenu when a sliding event is detected
@@ -300,11 +254,11 @@ defineExpose({ closeChildren: closeConversationActionMenu });
 <style lang="scss" scoped src="./style/index.scss"></style>
 <style lang="scss" scoped>
 .disable-select {
-  -webkit-touch-callout:none;
+  -webkit-touch-callout: none;
-  -webkit-user-select:none;
+  -webkit-user-select: none;
-  -khtml-user-select:none;
+  -khtml-user-select: none;
-  -moz-user-select:none;
+  -moz-user-select: none;
-  -ms-user-select:none;
+  -ms-user-select: none;
-  user-select:none;
+  user-select: none;
 }
 </style>

src/TUIKit/components/TUIConversation/conversation-network/index.vue

@@ -1,32 +1,21 @@
 <template>
-  <div
+  <div v-if="isNotNetwork" class="network">
-    v-if="isNotNetwork"
-    class="network"
-  >
     <i class="icon icon-error">!</i>
     <p class="network-content">
-      {{
+      {{ TUITranslateService.t('TUIConversation.网络异常，请您检查网络设置') }}
-        TUITranslateService.t("TUIConversation.网络异常，请您检查网络设置")
-      }}
     </p>
   </div>
 </template>
 <script lang="ts" setup>
-import TUIChatEngine, {
+import TUIChatEngine, { TUIStore, StoreName, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
+import { ref } from '../../../adapter-vue';
-  StoreName,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
-import {
-  ref,
-} from '../../../adapter-vue';
 
 const isNotNetwork = ref(false);
 
 TUIStore.watch(StoreName.USER, {
   netStateChange: (value: string) => {
-    isNotNetwork.value = (value === TUIChatEngine.TYPES.NET_STATE_DISCONNECTED);
+    isNotNetwork.value = value === TUIChatEngine.TYPES.NET_STATE_DISCONNECTED;
-  },
+  }
 });
 </script>
 

src/TUIKit/components/TUIConversation/index.ts

@@ -1,5 +1,5 @@
-import TUIConversation from "./index.vue";
+import TUIConversation from './index.vue';
-import TUIConversationServer from "./server";
+import TUIConversationServer from './server';
 new TUIConversationServer();
 
 export default TUIConversation;

src/TUIKit/components/TUIConversation/index.vue

@@ -1,12 +1,6 @@
 <template>
-  <div
+  <div class="tui-conversation" @click="handleClickConv">
-    class="tui-conversation"
+    <ConversationHeader v-if="isShowConversationHeader" ref="headerRef" />
-    @click="handleClickConv"
-  >
-    <ConversationHeader
-      v-if="isShowConversationHeader"
-      ref="headerRef"
-    />
     <ConversationNetwork />
     <ConversationList @handleSwitchConversation="handleSwitchConversation" />
   </div>
@@ -27,13 +21,13 @@ const isShowConversationHeader = ref<boolean>(true);
 TUIStore.watch(StoreName.CONV, {
   totalUnreadCount: (count: number) => {
     totalUnreadCount.value = count;
-  },
+  }
 });
 
 TUIStore.watch(StoreName.CUSTOM, {
   isShowConversationHeader: (showStatus: boolean) => {
     isShowConversationHeader.value = showStatus !== false;
-  },
+  }
 });
 
 const handleSwitchConversation = (conversationID: string) => {

src/TUIKit/components/TUIConversation/server.ts

@@ -1,10 +1,5 @@
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import {
+import { TUITranslateService, TUIConversationService, TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-  TUIConversationService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import { CONV_CREATE_TYPE } from '../../constant';
 import { isUniFrameWork } from '../../utils/env';
@@ -61,23 +56,23 @@ export default class TUIConversationServer {
           icon: createC2CIcon,
           text: TUITranslateService.t('TUIConversation.发起单聊'),
           data: {
-            name: CONV_CREATE_TYPE.TYPEC2C,
+            name: CONV_CREATE_TYPE.TYPEC2C
           },
           listener: {
-            onClicked: this.createConversation.bind(this),
+            onClicked: this.createConversation.bind(this)
-          },
+          }
         },
         {
           weight: 100,
           icon: createGroupIcon,
           text: TUITranslateService.t('TUIConversation.发起群聊'),
           data: {
-            name: CONV_CREATE_TYPE.TYPEGROUP,
+            name: CONV_CREATE_TYPE.TYPEGROUP
           },
           listener: {
-            onClicked: this.createConversation.bind(this),
+            onClicked: this.createConversation.bind(this)
-          },
+          }
-        },
+        }
       ];
       return list;
     }
@@ -91,7 +86,7 @@ export default class TUIConversationServer {
       params: {
         title: item.text,
         isRadio: item.data.name !== CONV_CREATE_TYPE.TYPEGROUP,
-        isNeedSearch: !TUIStore.getData(StoreName.APP, 'isOfficial'),
+        isNeedSearch: !TUIStore.getData(StoreName.APP, 'isOfficial')
       },
       callback: async (memberList: any[]) => {
         if (!memberList || memberList.length === 0) {
@@ -107,7 +102,7 @@ export default class TUIConversationServer {
           await this.generateConversation(`C2C${userID}`);
           this.routerForward(`C2C${userID}`);
         }
-      },
+      }
     });
   }
 
@@ -117,7 +112,7 @@ export default class TUIConversationServer {
       method: TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP,
       params: {
         title: TUITranslateService.t('TUIConversation.发起群聊'),
-        memberList,
+        memberList
       },
       callback: async (group: any) => {
         let conversationID: string | null = null;
@@ -127,18 +122,18 @@ export default class TUIConversationServer {
           conversationID = `GROUP${groupID}`;
         }
         this.routerForward(conversationID);
-      },
+      }
     });
   }
 
   private async routerForward(conversationID: string | null): Promise<void> {
     if (isUniFrameWork) {
       await TUIGlobal?.reLaunch({
-        url: '/TUIKit/components/TUIConversation/index',
+        url: '/TUIKit/components/TUIConversation/index'
       });
       if (conversationID) {
         TUIGlobal?.navigateTo({
-          url: '/TUIKit/components/TUIChat/index',
+          url: '/TUIKit/components/TUIChat/index'
         });
       }
     }

src/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts

@@ -6,36 +6,36 @@ const groupIntroConfig = [
     label: '陌生人社交群（Public）',
     type: TUIChatEngine.TYPES.GRP_PUBLIC,
     detail: '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见',
-    src: '产品文档',
+    src: '产品文档'
   },
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/Meeting.svg',
     label: '临时会议群（Meeting）',
     type: TUIChatEngine.TYPES.GRP_MEETING,
     detail: '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见',
-    src: '产品文档',
+    src: '产品文档'
   },
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/Work.svg',
     label: '好友工作群（Work）',
     type: TUIChatEngine.TYPES.GRP_WORK,
     detail: '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见',
-    src: '产品文档',
+    src: '产品文档'
   },
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/AVChatroom.svg',
     label: '直播群（AVChatroom）',
     type: TUIChatEngine.TYPES.GRP_AVCHATROOM,
     detail: '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见',
-    src: '产品文档',
+    src: '产品文档'
   },
   {
     icon: 'https://web.sdk.qcloud.com/im/assets/images/Community.png',
     label: '社群（Community）',
     type: TUIChatEngine.TYPES.GRP_COMMUNITY,
     detail: '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见',
-    src: '产品文档',
+    src: '产品文档'
-  },
+  }
 ];
 
 const findGroupIntroConfig = (type: string) => {
@@ -44,7 +44,4 @@ const findGroupIntroConfig = (type: string) => {
   })[0];
 };
 
-export {
+export { groupIntroConfig, findGroupIntroConfig };
-  groupIntroConfig,
-  findGroupIntroConfig,
-};

src/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue

@@ -1,34 +1,18 @@
 <template>
   <ul class="group-introduction-list select">
-    <li
+    <li v-for="(item, index) in type" :key="index" class="select-item" :class="[selectType === item.type && 'selected']" @click="selected(item)">
-      v-for="(item, index) in type"
-      :key="index"
-      class="select-item"
-      :class="[selectType === item.type && 'selected']"
-      @click="selected(item)"
-    >
       <main class="select-item-type">
         <div class="select-item-header">
           <aside class="left">
-            <Icon
+            <Icon class="icon" :file="item.icon" />
-              class="icon"
-              :file="item.icon"
-            />
             <span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
           </aside>
-          <Icon
+          <Icon v-if="selectType === item.type" :file="selectedIcon" />
-            v-if="selectType === item.type"
-            :file="selectedIcon"
-          />
         </div>
         <span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span>
-        <a
+        <a class="link" :href="documentLink.product.url" target="_blank" @click="openUrl(documentLink.product.url)">{{
-          class="link"
+          TUITranslateService.t(`TUIGroup.${item.src}`)
-          :href="documentLink.product.url"
+        }}</a>
-          target="_blank"
-          @click="openUrl(documentLink.product.url)"
-        >{{
-          TUITranslateService.t(`TUIGroup.${item.src}`) }}</a>
       </main>
     </li>
   </ul>
@@ -46,8 +30,8 @@ import { isUniFrameWork } from '../../../../utils/env';
 const props = defineProps({
   groupType: {
     type: String,
-    default: '',
+    default: ''
-  },
+  }
 });
 
 const type = groupIntroConfig;
@@ -70,6 +54,5 @@ const openUrl = (link: string) => {
     TUIGlobal?.open(link);
   }
 };
-
 </script>
 <style lang="scss" scoped src="../style/index.scss"></style>

src/TUIKit/components/TUIGroup/create-group/index.vue

@@ -1,54 +1,23 @@
 <template>
-  <Dialog
+  <Dialog :show="true" :isH5="!isPC" :isHeaderShow="false" :isFooterShow="false" :background="false" @update:show="closeCreated">
-    :show="true"
+    <div class="group" :class="[!isPC ? 'group-h5' : '']">
-    :isH5="!isPC"
-    :isHeaderShow="false"
-    :isFooterShow="false"
-    :background="false"
-    @update:show="closeCreated"
-  >
-    <div
-      class="group"
-      :class="[!isPC ? 'group-h5' : '']"
-    >
       <div class="group-box">
         <header class="group-box-header">
-          <Icon
+          <Icon :file="isPC ? closeIcon : backIcon" class="icon-close" size="16px" @onClick="closeCreated" />
-            :file="isPC ? closeIcon : backIcon"
-            class="icon-close"
-            size="16px"
-            @onClick="closeCreated"
-          />
           <h1 class="group-box-header-title">
             {{ headerTitle }}
           </h1>
         </header>
-        <ul
+        <ul v-if="!groupInfo.isEdit" class="group-list">
-          v-if="!groupInfo.isEdit"
-          class="group-list"
-        >
           <li class="group-list-item">
             <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群头像') }}</label>
             <Avatar :url="groupInfo.profile.avatar" />
           </li>
           <ul>
-            <li
+            <li v-for="(item, index) in createInfo" :key="index" class="group-list-item">
-              v-for="(item, index) in createInfo"
-              :key="index"
-              class="group-list-item"
-            >
               <label class="group-list-item-label">{{ item.name }}</label>
-              <input
+              <input v-if="isPC" v-model="groupInfo.profile[item.key]" type="text" :placeholder="item.placeholder" />
-                v-if="isPC"
+              <span v-else class="group-h5-list-item-content" @click="edit(item.key)">
-                v-model="groupInfo.profile[item.key]"
-                type="text"
-                :placeholder="item.placeholder"
-              >
-              <span
-                v-else
-                class="group-h5-list-item-content"
-                @click="edit(item.key)"
-              >
                 <p class="content">{{ groupInfo.profile[item.key] }}</p>
                 <Icon :file="rightIcon" />
               </span>
@@ -56,30 +25,16 @@
             <li class="group-list-introduction">
               <div class="group-list-item">
                 <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群类型') }}</label>
-                <GroupIntroduction
+                <GroupIntroduction v-if="isPC" :groupType="groupInfo.profile.type" @selectType="selected" />
-                  v-if="isPC"
+                <span v-else class="group-h5-list-item-content" @click="edit('type')">
-                  :groupType="groupInfo.profile.type"
-                  @selectType="selected"
-                />
-                <span
-                  v-else
-                  class="group-h5-list-item-content"
-                  @click="edit('type')"
-                >
                   <p class="content">{{ groupTypeDetail.label }}</p>
                   <Icon :file="rightIcon" />
                 </span>
               </div>
-              <article
+              <article v-if="!isPC" class="group-h5-list-item-introduction">
-                v-if="!isPC"
-                class="group-h5-list-item-introduction"
-              >
                 <label class="introduction-name">{{ groupTypeDetail.label }}：</label>
                 <span class="introduction-detail">{{ groupTypeDetail.detail }}</span>
-                <a
+                <a :href="documentLink.product.url" target="view_window">
-                  :href="documentLink.product.url"
-                  target="view_window"
-                >
                   {{ TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`) }}
                 </a>
               </article>
@@ -87,37 +42,21 @@
           </ul>
         </ul>
         <!-- Edit Group Name -->
-        <div
+        <div v-else class="group-list group-list-edit">
-          v-else
-          class="group-list group-list-edit"
-        >
           <input
             v-if="groupInfo.groupConfig.type === 'input'"
             v-model="groupInfo.groupConfig.value"
             class="group-name-input"
             type="text"
             :placeholder="TUITranslateService.t(`TUIGroup.${groupInfo.groupConfig.placeholder}`)"
-          >
-          <GroupIntroduction
-            v-else
-            class="group-introduction-list"
-            :groupType="groupInfo.groupConfig.value"
-            @selectType="selected"
           />
+          <GroupIntroduction v-else class="group-introduction-list" :groupType="groupInfo.groupConfig.value" @selectType="selected" />
         </div>
         <footer class="group-profile-footer">
-          <button
+          <button v-if="isPC && !groupInfo.isEdit" class="btn-default" @click="closeCreated">
-            v-if="isPC && !groupInfo.isEdit"
-            class="btn-default"
-            @click="closeCreated"
-          >
             {{ TUITranslateService.t('TUIGroup.取消') }}
           </button>
-          <button
+          <button class="btn-submit" :disabled="submitDisabledStatus" @click="submit">
-            class="btn-submit"
-            :disabled="submitDisabledStatus"
-            @click="submit"
-          >
             {{ TUITranslateService.t('TUIGroup.确认') }}
           </button>
         </footer>
@@ -126,12 +65,7 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import TUIChatEngine, {
+import TUIChatEngine, { TUITranslateService, TUIGroupService, TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-  TUIGroupService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
 import { computed, reactive, watchEffect } from '../../../adapter-vue';
 import documentLink from '../../../utils/documentLink';
 import { isPC } from '../../../utils/env';
@@ -159,16 +93,16 @@ const groupInfo = reactive<any>({
     notification: '',
     // joinOption: '',
     memberList: [],
-    isSupportTopic: false,
+    isSupportTopic: false
   },
   groupConfig: {
     title: '',
     value: '',
     key: '',
     type: '',
-    placeholder: '',
+    placeholder: ''
   },
-  isEdit: false,
+  isEdit: false
 });
 
 watchEffect(() => {
@@ -193,16 +127,14 @@ const createInfo = computed(() => {
   const groupNameInput = {
     name: TUITranslateService.t('TUIGroup.群名称'),
     key: 'name',
-    placeholder: TUITranslateService.t('TUIGroup.请输入群名称'),
+    placeholder: TUITranslateService.t('TUIGroup.请输入群名称')
   };
   const groupIDInput = {
     name: `${TUITranslateService.t('TUIGroup.群ID')}(${TUITranslateService.t('TUIGroup.选填')})`,
     key: 'groupID',
-    placeholder: TUITranslateService.t('TUIGroup.请输入群ID'),
+    placeholder: TUITranslateService.t('TUIGroup.请输入群ID')
   };
-  return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
+  return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY ? [groupNameInput] : [groupNameInput, groupIDInput];
-    ? [groupNameInput]
-    : [groupNameInput, groupIDInput];
 });
 
 const submitDisabledStatus = computed(() => {
@@ -232,18 +164,18 @@ const createGroup = async (options: any) => {
     if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
       await TUIGroupService.joinGroup({
         groupID: res.data.group.groupID,
-        applyMessage: '',
+        applyMessage: ''
       });
     }
     handleCompleteCreate(res.data.group);
     Toast({
       message: TUITranslateService.t('TUIGroup.群组创建成功'),
-      type: TOAST_TYPE.SUCCESS,
+      type: TOAST_TYPE.SUCCESS
     });
   } catch (err: any) {
     Toast({
       message: err.message,
-      type: TOAST_TYPE.ERROR,
+      type: TOAST_TYPE.ERROR
     });
   }
 };
@@ -252,7 +184,7 @@ const submit = () => {
   const { profile } = groupInfo;
   if (groupInfo.isEdit) {
     groupInfo.profile[groupInfo.groupConfig.key] = groupInfo.groupConfig.value;
-    return groupInfo.isEdit = !groupInfo.isEdit;
+    return (groupInfo.isEdit = !groupInfo.isEdit);
   } else {
     createGroup(profile);
   }
@@ -260,7 +192,7 @@ const submit = () => {
 
 const closeCreated = () => {
   if (groupInfo.isEdit) {
-    return groupInfo.isEdit = !groupInfo.isEdit;
+    return (groupInfo.isEdit = !groupInfo.isEdit);
   }
   handleCompleteCreate(null);
 };
@@ -292,6 +224,5 @@ const handleCompleteCreate = (group: any) => {
   const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
   callback && callback(group);
 };
-
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>

src/TUIKit/components/TUIGroup/index.vue

@@ -6,10 +6,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
 import { ref } from '../../adapter-vue';
 
 import CreateGroup from './create-group/index.vue';
@@ -41,9 +38,8 @@ TUIStore.watch(StoreName.GRP, {
     } else {
       isShowSelectMember.value = false;
     }
-  },
+  }
 });
-
 </script>
 <style lang="scss" scoped>
 .tui-group {

src/TUIKit/components/TUIGroup/manage-group/index.vue

@@ -1,36 +1,16 @@
 <template>
-  <div
+  <div ref="manageRef" class="manage">
-    ref="manageRef"
+    <header v-if="!isUniFrameWork || currentTab === 'admin'" class="manage-header">
-    class="manage"
+      <Icon :file="backSVG" @onClick="back" />
-  >
-    <header
-      v-if="!isUniFrameWork || currentTab ==='admin'"
-      class="manage-header"
-    >
-      <Icon
-        :file="backSVG"
-        @onClick="back"
-      />
       <div class="manage-header-content">
         {{ TUITranslateService.t(`TUIGroup.${TabName}`) }}
       </div>
       <div />
     </header>
-    <main
+    <main v-if="!currentTab || (isUniFrameWork && currentTab != 'admin')" class="main">
-      v-if="!currentTab || (isUniFrameWork && currentTab != 'admin')"
+      <ManageName class="space-top" :isAuthor="isOwner || isAdmin || isWorkGroup" :data="currentGroup" @update="updateProfile" />
-      class="main"
-    >
-      <ManageName
-        class="space-top"
-        :isAuthor="isOwner || isAdmin || isWorkGroup"
-        :data="currentGroup"
-        @update="updateProfile"
-      />
       <div class="user-info space-top">
-        <header
+        <header class="user-info-header" @click="setCurrentTab('member')">
-          class="user-info-header"
-          @click="setCurrentTab('member')"
-        >
           <label class="user-info-header-left">
             {{ TUITranslateService.t(`TUIGroup.群成员`) }}
           </label>
@@ -43,143 +23,71 @@
           </div>
         </header>
         <ol class="user-info-list">
-          <dl
+          <dl v-for="(item, index) in groupMemberList.slice(0, showUserNum)" :key="index" class="user-info-list-item">
-            v-for="(item, index) in groupMemberList.slice(0, showUserNum)"
+            <dt class="user-info-list-item-main" @click="handleMemberProfileShow(item)">
-            :key="index"
-            class="user-info-list-item"
-          >
-            <dt
-              class="user-info-list-item-main"
-              @click="handleMemberProfileShow(item)"
-            >
               <img
                 class="avatar"
-                :src="
+                :src="item.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-                  item.avatar ||
-                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-                "
                 onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-              >
+              />
             </dt>
             <dd class="user-info-list-item-info">
               {{ item.nick || item.userID }}
             </dd>
           </dl>
-          <dl
+          <dl v-if="isShowAddMember" class="user-info-list-item">
-            v-if="isShowAddMember"
+            <dt class="avatar" @click="toggleMask('add')">+</dt>
-            class="user-info-list-item"
-          >
-            <dt
-              class="avatar"
-              @click="toggleMask('add')"
-            >
-              +
-            </dt>
           </dl>
-          <dl
+          <dl v-if="currentSelfRole === 'Owner'" class="user-info-list-item">
-            v-if="currentSelfRole === 'Owner'"
+            <dt class="avatar" @click="toggleMask('remove')">-</dt>
-            class="user-info-list-item"
-          >
-            <dt
-              class="avatar"
-              @click="toggleMask('remove')"
-            >
-              -
-            </dt>
           </dl>
         </ol>
       </div>
-      <ul
+      <ul class="content list space-top" @click="editLableName = ''">
-        class="content list space-top"
+        <li class="list-item" @click="setCurrentTab('notification')">
-        @click="editLableName = ''"
-      >
-        <li
-          class="list-item"
-          @click="setCurrentTab('notification')"
-        >
           <aside class="aside">
-            <label class="label">{{
+            <label class="label">{{ TUITranslateService.t(`TUIGroup.群公告`) }}</label>
-              TUITranslateService.t(`TUIGroup.群公告`)
-            }}</label>
             <article class="article">
               {{ currentGroup.notification }}
             </article>
           </aside>
-          <Icon
+          <Icon :file="rightIcon" class="end" />
-            :file="rightIcon"
-            class="end"
-          />
         </li>
-        <li
+        <li v-if="(isAdmin || isOwner) && isSetMuteTime" class="list-item" @click="setCurrentTab('admin')">
-          v-if="(isAdmin || isOwner) && isSetMuteTime"
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.群管理`) }}</label>
-          class="list-item"
-          @click="setCurrentTab('admin')"
-        >
-          <label class="label">{{
-            TUITranslateService.t(`TUIGroup.群管理`)
-          }}</label>
           <Icon :file="rightIcon" />
         </li>
         <li class="list-item">
-          <label class="label">{{
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.群ID`) }}</label>
-            TUITranslateService.t(`TUIGroup.群ID`)
-          }}</label>
           <div class="groupID">
             <span class="span">{{ currentGroupID }}</span>
           </div>
         </li>
         <li class="list-item">
-          <label class="label">{{
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.群头像`) }}</label>
-            TUITranslateService.t(`TUIGroup.群头像`)
-          }}</label>
           <img
             class="avatar"
-            :src="
+            :src="currentGroup.avatar || 'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
-              currentGroup.avatar ||
-                'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
-            "
             onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"
-          >
+          />
         </li>
         <li class="list-item">
-          <label class="label">{{
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.群类型`) }}</label>
-            TUITranslateService.t(`TUIGroup.群类型`)
+          <span class="span">{{ TUITranslateService.t(`TUIGroup.${typeName[currentGroup.type]}`) }}</span>
-          }}</label>
-          <span class="span">{{
-            TUITranslateService.t(`TUIGroup.${typeName[currentGroup.type]}`)
-          }}</span>
         </li>
         <li class="list-item">
-          <label class="label">{{
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.加群方式`) }}</label>
-            TUITranslateService.t(`TUIGroup.加群方式`)
+          <span class="span">{{ TUITranslateService.t(`TUIGroup.${typeName[currentGroup.joinOption]}`) }}</span>
-          }}</label>
-          <span class="span">{{
-            TUITranslateService.t(
-              `TUIGroup.${typeName[currentGroup.joinOption]}`
-            )
-          }}</span>
         </li>
       </ul>
       <ul class="footer list space-top">
-        <li
+        <li v-if="currentSelfRole === 'Owner' && groupMemberList.length > 1" class="list-item" @click.stop="toggleMask('changeOwner')">
-          v-if="currentSelfRole === 'Owner' && groupMemberList.length > 1"
-          class="list-item"
-          @click.stop="toggleMask('changeOwner')"
-        >
           {{ TUITranslateService.t(`TUIGroup.转让群组`) }}
         </li>
-        <li
+        <li v-if="canIDissmissGroup" class="list-item" @click.stop="dismissGroup(currentGroup)">
-          v-if="canIDissmissGroup"
-          class="list-item"
-          @click.stop="dismissGroup(currentGroup)"
-        >
           {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
         </li>
-        <li
+        <li v-else class="list-item" @click.stop="quitGroup(currentGroup)">
-          v-else
-          class="list-item"
-          @click.stop="quitGroup(currentGroup)"
-        >
           {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
         </li>
       </ul>
@@ -195,11 +103,7 @@
       @handleMemberProfileShow="handleMemberProfileShow"
       @close="setCurrentTab('')"
     />
-    <ManageProfile
+    <ManageProfile v-if="currentTab === 'profile'" :userInfo="currentMember" @close="setCurrentTab('')" />
-      v-if="currentTab === 'profile'"
-      :userInfo="currentMember"
-      @close="setCurrentTab('')"
-    />
     <ManageNotification
       v-if="currentTab === 'notification'"
       :isAuthor="isOwner || isAdmin || isWorkGroup"
@@ -220,10 +124,7 @@
       @removeMute="toggleMask('removeMute')"
       @close="setCurrentTab('')"
     />
-    <MaskLayer
+    <MaskLayer :show="mask" @update:show="(e) => (mask = e)">
-      :show="mask"
-      @update:show="(e) => (mask = e)"
-    >
       <Transfer
         :title="TUITranslateService.t(`TUIGroup.${transferTitle}`)"
         :list="transferList"
@@ -246,29 +147,17 @@
       @submit="handleManage(deletedUserList, 'remove')"
       @update:show="(e) => (delDialogShow = e)"
     >
-      <p
+      <p v-if="deletedUserList.length === 1" class="del-dialog-title">
-        v-if="deletedUserList.length === 1"
-        class="del-dialog-title"
-      >
         {{ TUITranslateService.t(`TUIGroup.确定从群聊中删除该成员？`) }}
       </p>
-      <p
+      <p v-if="deletedUserList.length > 1" class="del-dialog-title">
-        v-if="deletedUserList.length > 1"
-        class="del-dialog-title"
-      >
         {{ TUITranslateService.t(`TUIGroup.确定从群聊中删除所选成员？`) }}
       </p>
     </Dialog>
   </div>
 </template>
 <script lang="ts" setup>
-import {
+import { ref, computed, watchEffect, onMounted, nextTick } from '../../../adapter-vue';
-  ref,
-  computed,
-  watchEffect,
-  onMounted,
-  nextTick,
-} from '../../../adapter-vue';
 import TUIChatEngine, {
   TUITranslateService,
   TUIGroupService,
@@ -277,7 +166,7 @@ import TUIChatEngine, {
   StoreName,
   IGroupModel,
   TUIConversationService,
-  IConversationModel,
+  IConversationModel
 } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal, outsideClick } from '@tencentcloud/universal-api';
 import MaskLayer from '../../common/MaskLayer/index.vue';
@@ -303,12 +192,12 @@ const TUIConstants = TUIGroupServer.constants;
 const props = defineProps({
   groupID: {
     type: String,
-    default: '',
+    default: ''
   },
   groupCurrentTab: {
     type: String,
-    default: '',
+    default: ''
-  },
+  }
 });
 
 const manageRef = ref<any>(undefined);
@@ -319,7 +208,7 @@ const transferType = ref('');
 const mask = ref(false);
 const currentGroupID = ref('');
 const userInfo = ref({
-  list: [] as IGroupMember[],
+  list: [] as IGroupMember[]
 });
 const currentMember = ref<IGroupMember>({});
 const typeName = ref({
@@ -330,12 +219,12 @@ const typeName = ref({
   [TUIChatEngine.TYPES.GRP_COMMUNITY]: '社群',
   [TUIChatEngine.TYPES.JOIN_OPTIONS_FREE_ACCESS]: '自由加入',
   [TUIChatEngine.TYPES.JOIN_OPTIONS_NEED_PERMISSION]: '需要验证',
-  [TUIChatEngine.TYPES.JOIN_OPTIONS_DISABLE_APPLY]: '禁止加群',
+  [TUIChatEngine.TYPES.JOIN_OPTIONS_DISABLE_APPLY]: '禁止加群'
 });
 const member = ref({
   admin: [] as IGroupMember[],
   member: [] as IGroupMember[],
-  muteMember: [] as IGroupMember[],
+  muteMember: [] as IGroupMember[]
 });
 const transferList = ref<IGroupMember[]>([]);
 const transferTitle = ref('');
@@ -354,7 +243,7 @@ onMounted(() => {
     if (manageRef.value && !isUniFrameWork) {
       outsideClick.listen({
         domRefs: manageRef.value,
-        handler: handleCompleteManage,
+        handler: handleCompleteManage
       });
     }
   });
@@ -372,7 +261,7 @@ TUIStore.watch(StoreName.GRP, {
     member.value = {
       admin: [],
       member: [],
-      muteMember: [],
+      muteMember: []
     };
     Array.from(memberList).map((item: any) => {
       switch (item?.role) {
@@ -388,16 +277,14 @@ TUIStore.watch(StoreName.GRP, {
       return item;
     });
     const time: number = new Date().getTime();
-    member.value.muteMember = Array.from(memberList).filter(
+    member.value.muteMember = Array.from(memberList).filter((item: any) => item?.muteUntil * 1000 - time > 0);
-      (item: any) => item?.muteUntil * 1000 - time > 0,
+  }
-    );
-  },
 });
 
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation: IConversationModel) => {
     groupIDValue.value = conversation?.groupProfile?.groupID;
-  },
+  }
 });
 
 watchEffect(() => {
@@ -460,7 +347,7 @@ const updateProfile = async (newGroupProfile: any) => {
   const { key, value } = newGroupProfile;
   const options: any = {
     groupID: currentGroup.value.groupID,
-    [key]: value,
+    [key]: value
   };
   TUIGroupService.updateGroupProfile(options)
     .then((res: any) => {
@@ -470,7 +357,7 @@ const updateProfile = async (newGroupProfile: any) => {
     .catch((error: any) => {
       Toast({
         message: error?.message,
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
     });
 };
@@ -504,9 +391,7 @@ const toggleMask = async (type?: string) => {
       break;
     case 'remove':
       isRadio.value = false;
-      transferList.value = groupMemberList.value.filter(
+      transferList.value = groupMemberList.value.filter((item: any) => item.userID !== currentGroup?.value?.selfInfo?.userID);
-        (item: any) => item.userID !== currentGroup?.value?.selfInfo?.userID,
-      );
       transferTitle.value = '删除成员';
       break;
     case 'addAdmin':
@@ -550,22 +435,14 @@ const toggleMask = async (type?: string) => {
 const friendList = async () => {
   const imResponse = await TUIFriendService.getFriendList();
   const friendList = imResponse.data.map((item: any) => item?.profile);
-  return friendList.filter(
+  return friendList.filter((item: any) => !userInfo.value.list.some((infoItem: any) => infoItem.userID === item.userID));
-    (item: any) =>
-      !userInfo.value.list.some(
-        (infoItem: any) => infoItem.userID === item.userID,
-      ),
-  );
 };
 
 const canIDissmissGroup = computed(() => {
   const userRole = currentGroup?.value?.selfInfo?.role;
   const groupType = currentGroup?.value?.type;
 
-  return (
+  return userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER && groupType !== TUIChatEngine.TYPES.GRP_WORK;
-    userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER
-    && groupType !== TUIChatEngine.TYPES.GRP_WORK
-  );
 });
 
 const isShowAddMember = computed(() => {
@@ -589,7 +466,7 @@ const getMember = async (type?: string) => {
   const options = {
     groupID,
     count: 100,
-    offset: type && type === 'more' ? userInfo.value.list.length : 0,
+    offset: type && type === 'more' ? userInfo.value.list.length : 0
   };
   await TUIGroupService.getGroupMemberList(options).then((res: any) => {
     if (type && type === 'more') {
@@ -620,7 +497,7 @@ const dismissGroup = async (group: any) => {
   enableSampleTaskStatus('dismissGroup');
   Toast({
     message: TUITranslateService.t('TUIGroup.群组解散成功'),
-    type: TOAST_TYPE.SUCCESS,
+    type: TOAST_TYPE.SUCCESS
   });
   clearGroupInfo();
 };
@@ -628,7 +505,7 @@ const dismissGroup = async (group: any) => {
 const clearGroupInfo = () => {
   if (isUniFrameWork) {
     TUIGlobal?.switchTab({
-      url: '/TUIKit/components/TUIConversation/index',
+      url: '/TUIKit/components/TUIConversation/index'
     });
   } else {
     handleCompleteManage();
@@ -643,12 +520,12 @@ const setAllMuteTime = (value: boolean) => {
     enableSampleTaskStatus('muteGroup');
     Toast({
       message: TUITranslateService.t('TUIGroup.禁言设置成功'),
-      type: TOAST_TYPE.SUCCESS,
+      type: TOAST_TYPE.SUCCESS
     });
   } else {
     Toast({
       message: TUITranslateService.t('TUIGroup.取消禁言成功'),
-      type: TOAST_TYPE.SUCCESS,
+      type: TOAST_TYPE.SUCCESS
     });
   }
 };
@@ -658,15 +535,13 @@ const handleSearchMember = async (value: string) => {
   let imMemberResponse: any = {};
   const options: any = {
     groupID: currentGroupID.value,
-    userIDList: [value],
+    userIDList: [value]
   };
   switch (transferType.value) {
     case 'add':
       try {
         imMemberResponse = await TUIGroupService.getGroupMemberProfile(options);
-        transferList.value = transferList.value.filter(
+        transferList.value = transferList.value.filter((item: any) => item.userID !== imResponse.data[0]?.userID);
-          (item: any) => item.userID !== imResponse.data[0]?.userID,
-        );
         transferList.value = [...transferList.value, ...imResponse.data];
         if (imMemberResponse?.data?.memberList.length > 0) {
           transferList.value = transferList.value.map((item: any) => {
@@ -680,7 +555,7 @@ const handleSearchMember = async (value: string) => {
         const message = TUITranslateService.t('TUIGroup.该用户不存在');
         Toast({
           message,
-          type: TOAST_TYPE.ERROR,
+          type: TOAST_TYPE.ERROR
         });
       }
       break;
@@ -691,23 +566,18 @@ const handleSearchMember = async (value: string) => {
           const message = TUITranslateService.t('TUIGroup.该用户不在群组内');
           Toast({
             message,
-            type: TOAST_TYPE.ERROR,
+            type: TOAST_TYPE.ERROR
           });
         }
-        transferList.value = transferList.value.filter(
+        transferList.value = transferList.value.filter((item: any) => item.userID !== imResponse?.data?.memberList[0]?.userID);
-          (item: any) => item.userID !== imResponse?.data?.memberList[0]?.userID,
-        );
         if (imResponse?.data?.memberList.length) {
-          transferList.value = [
+          transferList.value = [...transferList.value, ...imResponse.data.memberList];
-            ...transferList.value,
-            ...imResponse.data.memberList,
-          ];
         }
       } catch (error: any) {
         const message = TUITranslateService.t('TUIGroup.该用户不存在');
         Toast({
           message,
-          type: TOAST_TYPE.ERROR,
+          type: TOAST_TYPE.ERROR
         });
       }
       break;
@@ -752,7 +622,7 @@ const handleManage = (userList: any, type: any) => {
 const addMember = async (userIDList: any) => {
   const options: any = {
     groupID: currentGroupID.value,
-    userIDList,
+    userIDList
   };
   await TUIGroupService.addGroupMember(options);
 };
@@ -760,7 +630,7 @@ const addMember = async (userIDList: any) => {
 const changeOwner = async (userID: any) => {
   const options: any = {
     groupID: currentGroupID.value,
-    newOwnerID: userID,
+    newOwnerID: userID
   };
   const imResponse = await TUIGroupService.changeGroupOwner(options);
   currentGroup.value = {};
@@ -771,7 +641,7 @@ const setMemberMuteTime = async (userID: string, type?: string) => {
   const options: any = {
     groupID: currentGroupID.value,
     userID,
-    muteTime: type === 'add' ? 60 * 60 * 24 * 30 : 0,
+    muteTime: type === 'add' ? 60 * 60 * 24 * 30 : 0
   };
   await TUIGroupService.setGroupMemberMuteTime(options);
 };
@@ -789,7 +659,7 @@ const handleAdmin = async (user: any) => {
   const options: any = {
     groupID: currentGroupID.value,
     userID: user.userID,
-    role,
+    role
   };
   await TUIGroupService.setGroupMemberRole(options);
 };
@@ -798,7 +668,7 @@ const deleteGroupMember = async (userIDList: any) => {
   const options: any = {
     groupID: currentGroupID.value,
     userIDList,
-    reason: '',
+    reason: ''
   };
   await TUIGroupService.deleteGroupMember(options);
 };

src/TUIKit/components/TUIGroup/manage-group/manage-admin.vue

@@ -5,123 +5,66 @@
         {{ TUITranslateService.t(`TUIGroup.群管理员`) }}
       </div>
       <ul class="admin-manage-list">
-        <li
+        <li v-for="(item, index) in memberAdmin.admin" :key="index" class="admin-manage-list-item">
-          v-for="(item, index) in memberAdmin.admin"
-          :key="index"
-          class="admin-manage-list-item"
-        >
           <div class="item-main">
             <img
               class="item-main-avatar"
-              :src="
+              :src="item.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-                item.avatar ||
-                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-              "
               onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-            >
+            />
           </div>
           <div class="item-name">
             {{ item.nick || item.userID }}
           </div>
         </li>
         <li class="admin-manage-list-item">
-          <div
+          <div class="item-main" @click="addAdmin">
-            class="item-main"
+            <Icon :file="plusSVG" width="16px" height="16px" />
-            @click="addAdmin"
-          >
-            <Icon
-              :file="plusSVG"
-              width="16px"
-              height="16px"
-            />
           </div>
         </li>
         <li class="admin-manage-list-item">
-          <div
+          <div v-if="memberAdmin.admin.length > 0" class="item-main" @click="removeAdmin">
-            v-if="memberAdmin.admin.length > 0"
+            <Icon :file="minusSVG" width="16px" height="16px" />
-            class="item-main"
-            @click="removeAdmin"
-          >
-            <Icon
-              :file="minusSVG"
-              width="16px"
-              height="16px"
-            />
           </div>
         </li>
       </ul>
     </div>
-    <div
+    <div v-if="isAdminSetMuteTime" class="admin-mute-all">
-      v-if="isAdminSetMuteTime"
-      class="admin-mute-all"
-    >
       <div>
         <div class="admin-mute-all-title">
           {{ TUITranslateService.t(`TUIGroup.全员禁言`) }}
         </div>
         <div class="admin-mute-all-content">
-          {{
+          {{ TUITranslateService.t(`TUIGroup.全员禁言开启后，只允许群主和管理员发言。`) }}
-            TUITranslateService.t(
-              `TUIGroup.全员禁言开启后，只允许群主和管理员发言。`
-            )
-          }}
         </div>
       </div>
-      <Slider
+      <Slider :open="currentGroupAdmin.muteAllMembers" @change="setAllMuteTime" />
-        :open="currentGroupAdmin.muteAllMembers"
-        @change="setAllMuteTime"
-      />
     </div>
-    <div
+    <div v-if="isAdminSetMuteTime" class="admin-mute">
-      v-if="isAdminSetMuteTime"
-      class="admin-mute"
-    >
       <div class="admin-mute-header">
         {{ TUITranslateService.t(`TUIGroup.单独禁言人员`) }}
       </div>
       <ul class="admin-mute-list">
-        <li
+        <li v-for="(item, index) in memberAdmin.muteMember" :key="index" class="admin-mute-list-item">
-          v-for="(item, index) in memberAdmin.muteMember"
-          :key="index"
-          class="admin-mute-list-item"
-        >
           <div class="item-main">
             <img
               class="item-main-avatar"
-              :src="
+              :src="item.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-                item.avatar ||
-                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-              "
               onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-            >
+            />
           </div>
           <div class="item-name">
             {{ item.nick || item.userID }}
           </div>
         </li>
         <li class="admin-mute-list-item">
-          <div
+          <div class="item-main" @click="addMute">
-            class="item-main"
+            <Icon :file="plusSVG" width="16px" height="16px" />
-            @click="addMute"
-          >
-            <Icon
-              :file="plusSVG"
-              width="16px"
-              height="16px"
-            />
           </div>
         </li>
         <li class="admin-mute-list-item">
-          <div
+          <div v-if="memberAdmin.muteMember.length > 0" class="item-main" @click="removeMute">
-            v-if="memberAdmin.muteMember.length > 0"
+            <Icon :file="minusSVG" width="16px" height="16px" />
-            class="item-main"
-            @click="removeMute"
-          >
-            <Icon
-              :file="minusSVG"
-              width="16px"
-              height="16px"
-            />
           </div>
         </li>
       </ul>
@@ -130,10 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
+import { TUITranslateService, IGroupModel } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine';
 import { watchEffect, ref } from '../../../adapter-vue';
 import Slider from '../../common/Slider/index.vue';
 import Icon from '../../common/Icon.vue';
@@ -144,23 +84,23 @@ import { IGroupMember } from '../../../interface';
 const props = defineProps({
   member: {
     type: Object,
-    default: () => {},
+    default: () => {}
   },
   isSetMuteTime: {
     type: Boolean,
-    default: () => false,
+    default: () => false
   },
   currentGroup: {
     type: Object,
-    default: () => {},
+    default: () => {}
-  },
+  }
 });
 
 const isAdminSetMuteTime = ref(false);
 const memberAdmin = ref({
   admin: [] as Array<IGroupMember>,
   member: [] as Array<IGroupMember>,
-  muteMember: [] as Array<IGroupMember>,
+  muteMember: [] as Array<IGroupMember>
 });
 const currentGroupAdmin = ref<IGroupModel>();
 
@@ -174,14 +114,7 @@ watchEffect(() => {
   currentGroupAdmin.value = props.currentGroup;
 });
 
-const emits = defineEmits([
+const emits = defineEmits(['addAdmin', 'removeAdmin', 'setAllMuteTime', 'addMute', 'removeMute', 'close']);
-  'addAdmin',
-  'removeAdmin',
-  'setAllMuteTime',
-  'addMute',
-  'removeMute',
-  'close',
-]);
 
 const addAdmin = () => {
   emits('addAdmin');
@@ -205,7 +138,7 @@ const removeMute = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .admin {
   width: 100%;
@@ -218,7 +151,7 @@ const removeMute = () => {
     padding: 10px;
 
     &-left {
-      font-family: "PingFang SC", sans-serif;
+      font-family: 'PingFang SC', sans-serif;
       font-size: 18px;
       font-weight: 500;
       line-height: 50px;
@@ -227,7 +160,7 @@ const removeMute = () => {
     }
 
     &-close {
-      font-family: "PingFang SC", sans-serif;
+      font-family: 'PingFang SC', sans-serif;
       font-size: 16px;
       font-weight: 400;
       line-height: 48px;
@@ -253,7 +186,7 @@ const removeMute = () => {
 
       &-header {
         padding-left: 10px;
-        font-family: "PingFang SC", sans-serif;
+        font-family: 'PingFang SC', sans-serif;
         font-size: 14px;
         font-weight: 400;
         line-height: 20px;
@@ -314,7 +247,7 @@ const removeMute = () => {
 
       &-title {
         padding-left: 10px;
-        font-family: "PingFang SC", sans-serif;
+        font-family: 'PingFang SC', sans-serif;
         font-size: 14px;
         font-weight: 400;
         line-height: 20px;
@@ -325,7 +258,7 @@ const removeMute = () => {
       &-content {
         color: #999;
         padding-left: 10px;
-        font-family: "PingFang SC", sans-serif;
+        font-family: 'PingFang SC', sans-serif;
         font-size: 12px;
         font-weight: 400;
         line-height: 17px;

src/TUIKit/components/TUIGroup/manage-group/manage-member.vue

@@ -1,99 +1,50 @@
 <template>
-  <main
+  <main v-if="!isUniFrameWork" class="member">
-    v-if="!isUniFrameWork"
-    class="member"
-  >
     <ul class="list">
-      <li
+      <li v-for="(item, index) in memberList" :key="index" class="list-item">
-        v-for="(item, index) in memberList"
+        <aside class="aside" @click="handleMemberProfileShow(item)">
-        :key="index"
-        class="list-item"
-      >
-        <aside
-          class="aside"
-          @click="handleMemberProfileShow(item)"
-        >
           <img
             class="avatar"
-            :src="
+            :src="item.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-              item.avatar ||
-                'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-            "
             onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-          >
+          />
           <span class="name">{{ item.nick || item.userID }}</span>
           <span>{{ handleRoleName(item) }}</span>
         </aside>
         <div @click="submit(item)">
-          <Icon
+          <Icon v-if="item.role !== 'Owner' && isShowDeleteBtn" :file="delIcon" :width="'16px'" :height="'16px'" />
-            v-if="item.role !== 'Owner' && isShowDeleteBtn"
-            :file="delIcon"
-            :width="'16px'"
-            :height="'16px'"
-          />
         </div>
       </li>
-      <li
+      <li v-if="memberList.length < totalMember" class="list-item" @click="getMore">
-        v-if="memberList.length < totalMember"
-        class="list-item"
-        @click="getMore"
-      >
         {{ TUITranslateService.t(`TUIGroup.查看更多`) }}
       </li>
     </ul>
   </main>
-  <div
+  <div v-else class="edit-h5">
-    v-else
-    class="edit-h5"
-  >
     <main class="main">
       <header class="edit-h5-header">
         <aside class="left">
           <h1>{{ TUITranslateService.t(`TUIGroup.群成员`) }}</h1>
         </aside>
-        <span
+        <span class="close" @click="close('member')">{{ TUITranslateService.t(`关闭`) }}</span>
-          class="close"
-          @click="close('member')"
-        >{{
-          TUITranslateService.t(`关闭`)
-        }}</span>
       </header>
       <div class="member">
         <ul class="list list-uniapp">
-          <li
+          <li v-for="(item, index) in memberList" :key="index" class="list-item">
-            v-for="(item, index) in memberList"
+            <aside class="aside" @click="handleMemberProfileShow(item)">
-            :key="index"
-            class="list-item"
-          >
-            <aside
-              class="aside"
-              @click="handleMemberProfileShow(item)"
-            >
               <img
                 class="avatar"
-                :src="
+                :src="item.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-                  item.avatar ||
-                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-                "
                 onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-              >
+              />
               <span class="name">{{ item.nick || item.userID }}</span>
               <span>{{ handleRoleName(item) }}</span>
             </aside>
             <div @click="submit(item)">
-              <Icon
+              <Icon v-if="item.role !== 'Owner' && isShowDeleteBtn" :file="delIcon" :width="'16px'" :height="'16px'" />
-                v-if="item.role !== 'Owner' && isShowDeleteBtn"
-                :file="delIcon"
-                :width="'16px'"
-                :height="'16px'"
-              />
             </div>
           </li>
-          <li
+          <li v-if="memberList.length < totalMember" class="list-item" @click="getMore">
-            v-if="memberList.length < totalMember"
-            class="list-item"
-            @click="getMore"
-          >
             {{ TUITranslateService.t(`TUIGroup.查看更多`) }}
           </li>
         </ul>
@@ -103,9 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import TUIChatEngine, {
+import TUIChatEngine, { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
 import { watchEffect, ref } from '../../../adapter-vue';
 import Icon from '../../common/Icon.vue';
 import delIcon from '../../../assets/icon/del-icon.svg';
@@ -115,20 +64,20 @@ import { isUniFrameWork } from '../../../utils/env';
 const props = defineProps({
   list: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   total: {
     type: Number,
-    default: () => 0,
+    default: () => 0
   },
   isShowDel: {
     type: Boolean,
-    default: () => false,
+    default: () => false
   },
   self: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
-  },
+  }
 });
 
 const totalMember = ref(0);
@@ -182,7 +131,7 @@ const close = (tabName: string) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .member {
   flex: 1;

src/TUIKit/components/TUIGroup/manage-group/manage-name.vue

@@ -4,83 +4,38 @@
     <div
       v-if="isEdit"
       :class="{
-        'edit-h5': isMobile,
+        'edit-h5': isMobile
       }"
     >
       <main class="edit-h5-main">
-        <header
+        <header v-if="!isPC" class="edit-h5-header">
-          v-if="!isPC"
-          class="edit-h5-header"
-        >
           <aside class="left">
             <h1>{{ TUITranslateService.t(`TUIGroup.修改群聊名称`) }}</h1>
-            <span>{{
+            <span>{{ TUITranslateService.t(`TUIGroup.修改群聊名称后，将在群内通知其他成员`) }}</span>
-              TUITranslateService.t(
-                `TUIGroup.修改群聊名称后，将在群内通知其他成员`
-              )
-            }}</span>
           </aside>
-          <span
+          <span class="close" @click="toggleEditStatus">{{ TUITranslateService.t(`关闭`) }}</span>
-            class="close"
-            @click="toggleEditStatus"
-          >{{
-            TUITranslateService.t(`关闭`)
-          }}</span>
         </header>
         <div class="input-box">
-          <input
+          <input v-if="isEdit" ref="nameInputRef" v-model="inputGroupName" class="input" type="text" @blur="updateProfile" />
-            v-if="isEdit"
+          <span v-if="!isPC" class="tip">{{ TUITranslateService.t(`TUIGroup.仅限中文、字母、数字和下划线，2-20个字`) }}</span>
-            ref="nameInputRef"
-            v-model="inputGroupName"
-            class="input"
-            type="text"
-            @blur="updateProfile"
-          >
-          <span
-            v-if="!isPC"
-            class="tip"
-          >{{
-            TUITranslateService.t(
-              `TUIGroup.仅限中文、字母、数字和下划线，2-20个字`
-            )
-          }}</span>
         </div>
-        <footer
+        <footer v-if="!isPC" class="edit-h5-footer">
-          v-if="!isPC"
+          <button class="btn" @click="updateProfile">
-          class="edit-h5-footer"
-        >
-          <button
-            class="btn"
-            @click="updateProfile"
-          >
             {{ TUITranslateService.t(`确认`) }}
           </button>
         </footer>
       </main>
     </div>
-    <p
+    <p v-if="!isEdit || !isPC" class="name" @click="toggleEditStatus">
-      v-if="!isEdit || !isPC"
-      class="name"
-      @click="toggleEditStatus"
-    >
       <span>{{ groupProfile.name }}</span>
-      <Icon
+      <Icon v-if="isAuthor" class="icon" :file="editIcon" width="14px" height="14px" />
-        v-if="isAuthor"
-        class="icon"
-        :file="editIcon"
-        width="14px"
-        height="14px"
-      />
     </p>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { watchEffect, ref, nextTick, watch } from '../../../adapter-vue';
-import {
+import { TUITranslateService, IGroupModel } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine';
 import Icon from '../../common/Icon.vue';
 import editIcon from '../../../assets/icon/edit.svg';
 import { Toast, TOAST_TYPE } from '../../common/Toast/index';
@@ -89,12 +44,12 @@ import { isMobile, isPC } from '../../../utils/env';
 const props = defineProps({
   data: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
   },
   isAuthor: {
     type: Boolean,
-    default: false,
+    default: false
-  },
+  }
 });
 
 const groupProfile = ref<IGroupModel>({});
@@ -111,7 +66,7 @@ const updateProfile = () => {
   if (!inputGroupName.value) {
     Toast({
       message: TUITranslateService.t('TUIGroup.群名称不能为空'),
-      type: TOAST_TYPE.ERROR,
+      type: TOAST_TYPE.ERROR
     });
   } else {
     if (inputGroupName.value !== groupProfile.value.name) {
@@ -120,7 +75,7 @@ const updateProfile = () => {
       inputGroupName.value = '';
       Toast({
         message: TUITranslateService.t('TUIGroup.群名称修改成功'),
-        type: TOAST_TYPE.SUCCESS,
+        type: TOAST_TYPE.SUCCESS
       });
     }
     toggleEditStatus();
@@ -144,12 +99,12 @@ watch(
         nameInputRef.value?.focus();
       });
     }
-  },
+  }
 );
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .group-name {
   padding: 14px 20px;

src/TUIKit/components/TUIGroup/manage-group/manage-notification.vue

@@ -1,14 +1,6 @@
 <template>
-  <main
+  <main v-if="!isUniFrameWork" class="notification">
-    v-if="!isUniFrameWork"
+    <textarea v-if="isEdit" v-model="input" class="textarea" @keyup.enter="updateProfile" />
-    class="notification"
-  >
-    <textarea
-      v-if="isEdit"
-      v-model="input"
-      class="textarea"
-      @keyup.enter="updateProfile"
-    />
     <section v-else>
       <p v-if="!groupProfile.notification">
         {{ TUITranslateService.t(`TUIGroup.暂无公告`) }}
@@ -18,75 +10,37 @@
       </article>
     </section>
     <footer v-if="isAuthorNotification">
-      <button
+      <button v-if="isEdit" class="btn" @click="updateProfile">
-        v-if="isEdit"
-        class="btn"
-        @click="updateProfile"
-      >
         {{ TUITranslateService.t(`TUIGroup.发布`) }}
       </button>
-      <button
+      <button v-else class="btn" @click="isEdit = !isEdit">
-        v-else
-        class="btn"
-        @click="isEdit = !isEdit"
-      >
         {{ TUITranslateService.t(`TUIGroup.编辑`) }}
       </button>
     </footer>
   </main>
-  <div
+  <div v-else class="edit-h5">
-    v-else
-    class="edit-h5"
-  >
     <main class="edit-h5-main">
       <header class="edit-h5-header">
         <aside class="left">
           <h1>{{ TUITranslateService.t(`TUIGroup.群公告`) }}</h1>
         </aside>
-        <span
+        <span class="close" @click="close('notification')">{{ TUITranslateService.t(`关闭`) }}</span>
-          class="close"
-          @click="close('notification')"
-        >{{
-          TUITranslateService.t(`关闭`)
-        }}</span>
       </header>
       <div class="notification">
-        <textarea
+        <textarea v-if="isEdit" v-model="input" :class="[isUniFrameWork ? 'uni-height' : '', 'textarea']" @keyup.enter="updateProfile" />
-          v-if="isEdit"
+        <section v-else class="row">
-          v-model="input"
+          <p v-if="!groupProfile.notification" class="row-p">
-          :class="[isUniFrameWork ? 'uni-height' : '', 'textarea']"
-          @keyup.enter="updateProfile"
-        />
-        <section
-          v-else
-          class="row"
-        >
-          <p
-            v-if="!groupProfile.notification"
-            class="row-p"
-          >
             {{ TUITranslateService.t(`TUIGroup.暂无公告`) }}
           </p>
           <article v-else>
             {{ groupProfile.notification }}
           </article>
         </section>
-        <footer
+        <footer v-if="isAuthorNotification" class="footer">
-          v-if="isAuthorNotification"
+          <button v-if="isEdit" class="btn" @click="updateProfile">
-          class="footer"
-        >
-          <button
-            v-if="isEdit"
-            class="btn"
-            @click="updateProfile"
-          >
             {{ TUITranslateService.t(`TUIGroup.发布`) }}
           </button>
-          <button
+          <button v-else class="btn" @click="isEdit = !isEdit">
-            v-else
-            class="btn"
-            @click="isEdit = !isEdit"
-          >
             {{ TUITranslateService.t(`TUIGroup.编辑`) }}
           </button>
         </footer>
@@ -97,10 +51,7 @@
 
 <script lang="ts" setup>
 import { nextTick } from '../../../adapter-vue';
-import {
+import { TUITranslateService, IGroupModel } from '@tencentcloud/chat-uikit-engine';
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine';
 import { watchEffect, ref } from '../../../adapter-vue';
 import { Toast, TOAST_TYPE } from '../../common/Toast/index';
 import { isUniFrameWork } from '../../../utils/env';
@@ -108,12 +59,12 @@ import { isUniFrameWork } from '../../../utils/env';
 const props = defineProps({
   data: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
   },
   isAuthor: {
     type: Boolean,
-    default: false,
+    default: false
-  },
+  }
 });
 
 const groupProfile = ref<IGroupModel>({});
@@ -133,7 +84,7 @@ const updateProfile = () => {
   if (input.value.length > 150) {
     Toast({
       message: TUITranslateService.t('TUIGroup.群公告字数超出限制，最大长度为150'),
-      type: TOAST_TYPE.ERROR,
+      type: TOAST_TYPE.ERROR
     });
     return;
   }
@@ -152,7 +103,7 @@ const close = (tabName: string) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .notification {
   flex: 1;

src/TUIKit/components/TUIGroup/manage-group/manage-profile.vue

@@ -1,17 +1,11 @@
 <template>
-  <div
+  <div v-if="!isUniFrameWork" class="memeber-profile">
-    v-if="!isUniFrameWork"
-    class="memeber-profile"
-  >
     <div class="memeber-profile-main">
       <img
         class="avatar"
-        :src="
+        :src="userInfoManager.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-          userInfoManager.avatar ||
-            'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-        "
         onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-      >
+      />
       <ul class="list">
         <h2>{{ userInfoManager.nick || userInfoManager.userID }}</h2>
         <li>
@@ -19,44 +13,28 @@
           <span>{{ userInfoManager.userID }}</span>
         </li>
         <li>
-          <label>{{ TUITranslateService.t("TUIContact.个性签名") }}：</label>
+          <label>{{ TUITranslateService.t('TUIContact.个性签名') }}：</label>
           <span>{{ userInfoManager.selfSignature }}</span>
         </li>
       </ul>
     </div>
     <div class="memeber-profile-footer">
-      <div
+      <div v-if="showEnter()" class="button" @click="enter(userInfoManager.userID, 'C2C')">
-        v-if="showEnter()"
+        {{ TUITranslateService.t('TUIContact.发送消息') }}
-        class="button"
-        @click="enter(userInfoManager.userID, 'C2C')"
-      >
-        {{ TUITranslateService.t("TUIContact.发送消息") }}
       </div>
     </div>
   </div>
-  <div
+  <div v-else class="edit-h5">
-    v-else
-    class="edit-h5"
-  >
     <main class="main">
       <header class="edit-h5-header">
         <aside class="left">
           <h1>{{ TUITranslateService.t(`TUIGroup.群成员`) }}</h1>
         </aside>
-        <span
+        <span class="close" @click="close('profile')">{{ TUITranslateService.t(`关闭`) }}</span>
-          class="close"
-          @click="close('profile')"
-        >{{
-          TUITranslateService.t(`关闭`)
-        }}</span>
       </header>
       <div class="edit-h5-profile">
         <div class="memeber-profile-main">
-          <Avatar
+          <Avatar class="avatar" :url="userInfoManager.avatar" size="60px" />
-            class="avatar"
-            :url="userInfoManager.avatar"
-            size="60px"
-          />
           <ul class="list">
             <h1>{{ userInfoManager.nick || userInfoManager.userID }}</h1>
             <li>
@@ -64,18 +42,14 @@
               <span>{{ userInfoManager.userID }}</span>
             </li>
             <li>
-              <label>{{ TUITranslateService.t("TUIContact.个性签名") }}：</label>
+              <label>{{ TUITranslateService.t('TUIContact.个性签名') }}：</label>
               <span>{{ userInfoManager.selfSignature }}</span>
             </li>
           </ul>
         </div>
         <div class="memeber-profile-footer">
-          <div
+          <div v-if="showEnter()" class="button" @click="enter(userInfoManager.userID, 'C2C')">
-            v-if="showEnter()"
+            {{ TUITranslateService.t('TUIContact.发送消息') }}
-            class="button"
-            @click="enter(userInfoManager.userID, 'C2C')"
-          >
-            {{ TUITranslateService.t("TUIContact.发送消息") }}
           </div>
         </div>
       </div>
@@ -90,7 +64,7 @@ import TUIChatEngine, {
   TUIConversationService,
   TUIFriendService,
   TUIStore,
-  StoreName,
+  StoreName
 } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import Avatar from '../../common/Avatar/index.vue';
@@ -100,8 +74,8 @@ import { isUniFrameWork } from '../../../utils/env';
 const props = defineProps({
   userInfo: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
-  },
+  }
 });
 
 const isFriendShip = ref(false);
@@ -110,26 +84,22 @@ const userInfoManager = ref<IUserProfile>({});
 watchEffect(() => {
   userInfoManager.value = props.userInfo;
 });
-const emits = defineEmits([
+const emits = defineEmits(['handleSwitchConversation', 'close', 'openConversation']);
-  'handleSwitchConversation',
-  'close',
-  'openConversation',
-]);
 
 watch(
   () => props.userInfo,
   async (newVal: any, oldVal: any) => {
     if (newVal === oldVal) return;
     const res = await TUIUserService.getUserProfile({
-      userIDList: [props.userInfo.userID],
+      userIDList: [props.userInfo.userID]
     });
     userInfoManager.value = res?.data[0];
     checkFriend();
   },
   {
     deep: true,
-    immediate: true,
+    immediate: true
-  },
+  }
 );
 
 const enter = async (ID: any, type: string) => {
@@ -151,10 +121,10 @@ const checkFriend = async () => {
   if (!(userInfoManager.value as any).userID) return;
   TUIFriendService.checkFriend({
     userIDList: [userInfoManager.value.userID],
-    type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH,
+    type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH
   }).then((res: any) => {
     const relation = res?.data?.successUserIDList?.[0]?.relation;
-    isFriendShip.value = (relation === TUIChatEngine.TYPES.SNS_TYPE_BOTH_WAY);
+    isFriendShip.value = relation === TUIChatEngine.TYPES.SNS_TYPE_BOTH_WAY;
   });
 };
 
@@ -167,7 +137,7 @@ const close = (tabName: string) => {
 };
 </script>
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .memeber-profile {
   flex: 1;
@@ -267,7 +237,6 @@ const close = (tabName: string) => {
         .avatar {
           margin: 20px;
         }
-
       }
     }
   }