diff --git a/src/TUIKit/adapter-vue.ts b/src/TUIKit/adapter-vue.ts
index 222b95e..1b5ecb0 100644
--- a/src/TUIKit/adapter-vue.ts
+++ b/src/TUIKit/adapter-vue.ts
@@ -3,10 +3,7 @@ import { TUIGlobal } from '@tencentcloud/universal-api';
 
 let vueVersion: number;
 let framework = 'vue2';
-let createVNode = (
-  arg1: any,
-  arg2: any,
-): { component: any; props: any; data: any } => {
+let createVNode = (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 (
-    (Vue as any)?.default?.version
-    && (Vue as any)?.default?.version?.startsWith('2.7.')
-  ) {
+  if ((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 (
-    (Vue as any)?.default?.version
-    && (Vue as any)?.default?.version?.startsWith('2.')
-  ) {
+  } else if ((Vue as any)?.default?.version && (Vue as any)?.default?.version?.startsWith('2.')) {
     // < Vue 2.7.0
     vueVersion = 2;
     TUIGlobal.Vue = (Vue as any).default;
diff --git a/src/TUIKit/components/TUIChat/chat-header/index.vue b/src/TUIKit/components/TUIChat/chat-header/index.vue
index 6e11902..1fba507 100644
--- a/src/TUIKit/components/TUIChat/chat-header/index.vue
+++ b/src/TUIKit/components/TUIChat/chat-header/index.vue
@@ -8,10 +8,7 @@
       <Icon :file="backSVG" />
     </div>
     <div class="chat-header-container">
-      <div
-        v-if="isNotRoomChat"
-        :class="['chat-header-content', !isPC && 'chat-header-h5-content']"
-      >
+      <div 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
-        v-for="(item, index) in props.headerExtensionList"
-        :key="index"
-        @click.stop="handleExtensions(item)"
-      >
+      <div 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 {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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;
   }
diff --git a/src/TUIKit/components/TUIChat/config.ts b/src/TUIKit/components/TUIChat/config.ts
index ed99f3d..01d477c 100644
--- a/src/TUIKit/components/TUIChat/config.ts
+++ b/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 {
-  hideTUIChatFeatures,
-};
+export { hideTUIChatFeatures };
 
 export default ChatConfig;
diff --git a/src/TUIKit/components/TUIChat/emoji-config/custom-emoji.ts b/src/TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
index d6501df..41757a8 100644
--- a/src/TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
+++ b/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> = {};
diff --git a/src/TUIKit/components/TUIChat/emoji-config/default-emoji.ts b/src/TUIKit/components/TUIChat/emoji-config/default-emoji.ts
index e90d1af..26a47fe 100644
--- a/src/TUIKit/components/TUIChat/emoji-config/default-emoji.ts
+++ b/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',
-      'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],
+    list: [
+      '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',
-      'ys09', 'ys10', 'ys11', 'ys12', 'ys13', 'ys14', 'ys15'],
+    list: ['ys00', 'ys01', 'ys02', 'ys03', 'ys04', 'ys05', 'ys06', 'ys07', 'ys08', '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',
-      'gcs08', 'gcs09', 'gcs10', 'gcs11', 'gcs12', 'gcs13', 'gcs14', 'gcs15', 'gcs16'],
-  },
+    list: [
+      '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.entries(emojiCNLocales)?.map(([key, val]) => [val, key]),
-  ),
-  ...Object.fromEntries(
-    Object.entries(emojiENLocales)?.map(([key, val]) => [val, key]),
-  ),
+  ...Object.fromEntries(Object.entries(emojiCNLocales)?.map(([key, val]) => [val, key])),
+  ...Object.fromEntries(Object.entries(emojiENLocales)?.map(([key, val]) => [val, key]))
 };
diff --git a/src/TUIKit/components/TUIChat/emoji-config/index.ts b/src/TUIKit/components/TUIChat/emoji-config/index.ts
index c6ee4dc..8000679 100644
--- a/src/TUIKit/components/TUIChat/emoji-config/index.ts
+++ b/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
 };
diff --git a/src/TUIKit/components/TUIChat/emoji-config/locales/en.ts b/src/TUIKit/components/TUIChat/emoji-config/locales/en.ts
index baa4fd1..595a67d 100644
--- a/src/TUIKit/components/TUIChat/emoji-config/locales/en.ts
+++ b/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;
diff --git a/src/TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts b/src/TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts
index 7086a1f..1e4e72a 100644
--- a/src/TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts
+++ b/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;
diff --git a/src/TUIKit/components/TUIChat/emoji-config/locales/zh_tw.ts b/src/TUIKit/components/TUIChat/emoji-config/locales/zh_tw.ts
index 144009e..21156fb 100644
--- a/src/TUIKit/components/TUIChat/emoji-config/locales/zh_tw.ts
+++ b/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;
diff --git a/src/TUIKit/components/TUIChat/forward/index.vue b/src/TUIKit/components/TUIChat/forward/index.vue
index 4b87813..62bb0ac 100644
--- a/src/TUIKit/components/TUIChat/forward/index.vue
+++ b/src/TUIKit/components/TUIChat/forward/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <Overlay
-    :visible="isShowForwardPanel"
-    :useMask="false"
-  >
+  <Overlay :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, {
-  TUIStore,
-  StoreName,
-  TUIChatService,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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 {
-    isMergeForward: _isMergeForward,
-    messageIDList: selectedMessageIDList,
-  } = params || {};
+  const { 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 unsentMessageQueue = selectedToForwardMessageIDList
-    .map(messageID => TUIStore.getMessageModel(messageID))
-    .sort((a, b) => a.time - b.time);
+  const selectedConversationList = selectedConvIDWrapperList.map((IDWrapper) => TUIStore.getConversationModel(IDWrapper.userID));
+  const unsentMessageQueue = selectedToForwardMessageIDList.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(
-      [conversation],
-      unsentMessageQueue,
-      {
-        needMerge: isMergeForward,
-        offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
-        params: {
-          needReadReceipt: isEnabledMessageReadReceiptGlobal(),
-        },
-      },
-    );
+    return TUIChatService.sendForwardMessage([conversation], unsentMessageQueue, {
+      needMerge: isMergeForward,
+      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()
     };
   });
 }
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue
index faf192d..3e6c238 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue
+++ b/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/emoji-picker-dialog.vue
@@ -6,75 +6,31 @@
       'emoji-picker-h5': !isPC
     }"
   >
-    <ul
-      ref="emojiPickerListRef"
-      :class="['emoji-picker-list', !isPC && 'emoji-picker-h5-list']"
-    >
+    <ul 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
-          v-if="currentTabItem.type === EMOJI_TYPE.BASIC"
-          class="emoji"
-          :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"
-        >
+        <img v-if="currentTabItem.type === EMOJI_TYPE.BASIC" class="emoji" :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
-        v-for="(item, index) in list"
-        :key="index"
-        class="emoji-picker-tab-item"
-        @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 v-for="(item, index) in list" :key="index" class="emoji-picker-tab-item" @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>
     </ul>
   </div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from '../../../../adapter-vue';
-import {
-  TUIChatService,
-  TUIStore,
-  StoreName,
-  IConversationModel,
-  SendMessageParams,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: 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);
 };
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.vue
index 3066bc8..5c082c9 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.vue
+++ b/src/TUIKit/components/TUIChat/message-input-toolbar/emoji-picker/index.vue
@@ -1,24 +1,10 @@
 <template>
-  <ToolbarItemContainer
-    ref="container"
-    :iconFile="faceIcon"
-    title="表情"
-    @onDialogShow="onDialogShow"
-    @onDialogClose="onDialogClose"
-  >
-    <EmojiPickerDialog
-      @insertEmoji="insertEmoji"
-      @sendMessage="sendMessage"
-      @onClose="onClose"
-    />
+  <ToolbarItemContainer ref="container" :iconFile="faceIcon" title="表情" @onDialogShow="onDialogShow" @onDialogClose="onDialogClose">
+    <EmojiPickerDialog @insertEmoji="insertEmoji" @sendMessage="sendMessage" @onClose="onClose" />
   </ToolbarItemContainer>
 </template>
 <script lang="ts" setup>
-import {
-  TUIStore,
-  StoreName,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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>
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
index 83e41fa..d9789d9 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
+++ b/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
-          :class="[
-            'evaluate-header-content',
-            !isPC && 'evaluate-h5-header-content',
-          ]"
-        >
-          {{ TUITranslateService.t("Evaluate.请对本次服务进行评价") }}
+        <div :class="['evaluate-header-content', !isPC && 'evaluate-h5-header-content']">
+          {{ TUITranslateService.t('Evaluate.请对本次服务进行评价') }}
         </div>
-        <div
-          v-if="!isPC"
-          :class="[
-            'evaluate-header-close',
-            !isPC && 'evaluate-h5-header-close',
-          ]"
-          @click.stop="closeDialog"
-        >
-          {{ TUITranslateService.t("关闭") }}
+        <div v-if="!isPC" :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
-          :class="[
-            'evaluate-content-list',
-            !isPC && 'evaluate-h5-content-list',
-          ]"
-        >
+        <ul :class="['evaluate-content-list', !isPC && 'evaluate-h5-content-list']">
           <li
             v-for="(item, index) in starList"
             :key="index"
-            :class="[
-              'evaluate-content-list-item',
-              !isPC && 'evaluate-h5-content-list-item',
-            ]"
+            :class="['evaluate-content-list-item', !isPC && 'evaluate-h5-content-list-item']"
             @click.stop="selectStar(index)"
           >
-            <Icon
-              v-if="index <= currentStarIndex"
-              :file="starLightIcon"
-              :width="isPC ? '20px' : '30px'"
-              :height="isPC ? '20px' : '30px'"
-            />
-            <Icon
-              v-else
-              :file="starIcon"
-              :width="isPC ? '20px' : '30px'"
-              :height="isPC ? '20px' : '30px'"
-            />
+            <Icon v-if="index <= currentStarIndex" :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
-          v-model="comment"
-          :class="[
-            'evaluate-content-text',
-            !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.提交评价") }}
+        <textarea v-model="comment" :class="['evaluate-content-text', !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:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: 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
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.vue
index 4c3e155..903902d 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/file-upload/index.vue
+++ b/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
-        ref="inputRef"
-        title="文件"
-        type="file"
-        data-type="file"
-        accept="*"
-        @change="sendFileMessage"
-      >
+      <input 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:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: 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>
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue
index 7cc7de6..ba9c7c9 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue
+++ b/src/TUIKit/components/TUIChat/message-input-toolbar/image-upload/index.vue
@@ -7,10 +7,7 @@
     :needDialog="false"
     @onIconClick="onIconClick"
   >
-    <div
-      v-if="!isUniFrameWork"
-      :class="['image-upload', !isPC && 'image-upload-h5']"
-    >
+    <div 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'
-      ? IMAGE_TOOLBAR_SHOW_MAP['uni_camera']
-      : IMAGE_TOOLBAR_SHOW_MAP['uni_album'];
+    return props.imageSourceType === 'camera' ? 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:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: 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>
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/index.vue
index a06fe2c..5015740 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/src/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -1,18 +1,6 @@
 <template>
-  <div
-    :class="[
-      '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',
-      ]"
-    >
+  <div :class="['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
-        v-if="featureConfig.InputImage"
-        imageSourceType="album"
-      />
+      <ImageUpload v-if="featureConfig.InputImage" imageSourceType="album" />
       <FileUpload v-if="featureConfig.InputFile" />
-      <VideoUpload
-        v-if="featureConfig.InputVideo"
-        videoSourceType="album"
-      />
+      <VideoUpload 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
-      v-if="extensionListShowInEnd[0] && isPC"
-      :class="['message-input-toolbar-list-end']"
-    >
+    <div 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
-      v-if="isH5"
-      ref="h5Dialog"
-      :class="['message-input-toolbar-h5-dialog']"
-    />
+    <div 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, {
-  IConversationModel,
-  TUIStore,
-  StoreName,
-  TUIReportService,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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) => {
-  if (newValue === 'none') {
-    emojiPickerRef.value?.closeEmojiPicker();
-  } else {
-    emits('scrollToLatestMessage');
+watch(
+  () => props.displayType,
+  (newValue) => {
+    if (newValue === 'none') {
+      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 = [
-    ...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params),
-  ].filter((extension: ExtensionInfo) => {
-    if (extension?.data?.name === 'search') {
-      return featureConfig.MessageSearch;
+  currentExtensionList.value = [...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params)].filter(
+    (extension: ExtensionInfo) => {
+      if (extension?.data?.name === 'search') {
+        return featureConfig.MessageSearch;
+      }
+      return true;
     }
-    return true;
-  });
+  );
   reportExtension(currentExtensionList.value);
 };
 
-function reportExtension(extensionList:ExtensionInfo[]){
-  extensionList.forEach((extension: ExtensionInfo)=>{
+function reportExtension(extensionList: 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;
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
index e16f512..7e0fe69 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
+++ b/src/TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue
@@ -1,30 +1,9 @@
 <template>
-  <div
-    ref="toolbarItemRef"
-    :class="[
-      '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 ref="toolbarItemRef" :class="['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
-      v-if="isUniFrameWork"
-      :class="['toolbar-item-container-uni-title']"
-    >
+    <div 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>
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue
index f7bdc51..9ed6738 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue
+++ b/src/TUIKit/components/TUIChat/message-input-toolbar/user-selector/index.vue
@@ -1,12 +1,5 @@
 <template>
-  <Dialog
-    :show="show"
-    :isH5="!isPC"
-    :isHeaderShow="false"
-    :isFooterShow="false"
-    :background="false"
-    @update:show="toggleShow"
-  >
+  <Dialog :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 {
-  TUIGroupService,
-  TUIUserService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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(
-            (user: any) => user?.userID !== selfUserID.value,
-          );
+          memberList.value = res?.data?.memberList?.filter((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(
-    (member: any) => member?.userID === searchInfo,
-  );
+  const results = memberList.value?.filter((member: any) => member?.userID === searchInfo);
   searchMemberList.value = results?.length ? results : memberList.value;
 };
 
@@ -122,6 +108,6 @@ const toggleShow = (showStatus: boolean) => {
 };
 
 defineExpose({
-  toggleShow,
+  toggleShow
 });
 </script>
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.vue
index 23e910b..3779dfe 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/video-upload/index.vue
+++ b/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
-      ? props.videoSourceType === 'album'
-        ? '20px'
-        : '25px'
-      : '18px'
-    "
+    :iconHeight="isUniFrameWork ? (props.videoSourceType === 'album' ? '20px' : '25px') : '18px'"
     @onIconClick="onIconClick"
   >
     <div :class="['video-upload', !isPC && 'video-upload-h5']">
-      <input
-        ref="inputRef"
-        title="视频"
-        type="file"
-        data-type="video"
-        accept="video/*"
-        @change="sendVideoInWeb"
-      >
+      <input 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:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: 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>
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.ts b/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.ts
index e574464..53056b5 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.ts
+++ b/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;
diff --git a/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.vue b/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.vue
index a57ec92..bc0f7ea 100644
--- a/src/TUIKit/components/TUIChat/message-input-toolbar/words/index.vue
+++ b/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.常用语-快捷回复工具") }}
-        </span>
-        <span
-          v-if="!isPC"
-          :class="['words-header-close', !isPC && 'words-h5-header-close']"
-          @click="closeDialog"
-        >
-          关闭
+          {{ TUITranslateService.t('Words.常用语-快捷回复工具') }}
         </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
-          v-for="(item, index) in wordsList"
-          :key="index"
-          :class="['words-list-item', !isPC && 'words-h5-list-item']"
-          @click="selectWord(item)"
-        >
+        <li 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 {
-  TUITranslateService,
-  TUIStore,
-  StoreName,
-  IConversationModel,
-  SendMessageParams,
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
+    to: 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
diff --git a/src/TUIKit/components/TUIChat/message-input/index.vue b/src/TUIKit/components/TUIChat/message-input/index.vue
index ca1af2e..65ef0cb 100644
--- a/src/TUIKit/components/TUIChat/message-input/index.vue
+++ b/src/TUIKit/components/TUIChat/message-input/index.vue
@@ -14,27 +14,15 @@
         @onTyping="onTyping"
         @onAt="onAt"
       />
-      <MessageInputButton
-        v-if="!props.isMuted"
-        @sendMessage="sendMessage"
-      />
-      <MessageInputAt
-        v-if="props.enableAt"
-        ref="messageInputAtRef"
-        @insertAt="insertAt"
-        @onAtListOpen="onAtListOpen"
-      />
+      <MessageInputButton v-if="!props.isMuted" @sendMessage="sendMessage" />
+      <MessageInputAt v-if="props.enableAt" ref="messageInputAtRef" @insertAt="insertAt" @onAtListOpen="onAtListOpen" />
     </div>
     <MessageInputQuote />
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  TUIStore,
-  StoreName,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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(
-    editorContentList,
-    currentConversation.value,
-  );
+  await sendMessages(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;
diff --git a/src/TUIKit/components/TUIChat/message-input/message-input-at/index.ts b/src/TUIKit/components/TUIChat/message-input/message-input-at/index.ts
index 065efb6..14ae327 100644
--- a/src/TUIKit/components/TUIChat/message-input/message-input-at/index.ts
+++ b/src/TUIKit/components/TUIChat/message-input/message-input-at/index.ts
@@ -1,8 +1,5 @@
 import { SuggestionProps, SuggestionKeyDownProps } from '@tiptap/suggestion';
-import TUIChatEngine, {
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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: {
-    id?: string | undefined;
-    userID?: string | undefined;
-    isAll?: boolean | undefined;
-  }) => void)
+  | ((props: { 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?.userID?.toLowerCase()?.startsWith(props?.query?.toLowerCase()),
+          item?.nick?.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 + showMemberList?.length - 1) % showMemberList?.length;
+  selectedIndex = (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({
-      id: (item as any)?.userID,
-      label: (item as any)?.nick || (item as any)?.userID,
-    });
+    command &&
+      command({
+        id: (item as any)?.userID,
+        label: (item as any)?.nick || (item as any)?.userID
+      });
   }
 };
 TUIGlobal.selectItem = selectItem;
diff --git a/src/TUIKit/components/TUIChat/message-input/message-input-at/index.vue b/src/TUIKit/components/TUIChat/message-input/message-input-at/index.vue
index 7b82400..e380f6d 100644
--- a/src/TUIKit/components/TUIChat/message-input/message-input-at/index.vue
+++ b/src/TUIKit/components/TUIChat/message-input/message-input-at/index.vue
@@ -1,23 +1,9 @@
 <template>
-  <BottomPopup
-    :show="showAtList"
-    @onClose="closeAt"
-  >
-    <div
-      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>
+  <BottomPopup :show="showAtList" @onClose="closeAt">
+    <div 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
-              class="member-list-box-body-avatar"
-              :src="handleMemberAvatar(item)"
-            >
+            <img 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, {
-  TUIStore,
-  StoreName,
-  TUIGroupService,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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
-      = position.value.top - MessageInputAt.value.clientHeight + 'px';
-  },
+    MessageInputAt.value.style.top = 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 (
-    (item as any)?.avatar
-    || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-  );
+  return (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);
   }
 }
 
diff --git a/src/TUIKit/components/TUIChat/message-input/message-input-button.vue b/src/TUIKit/components/TUIChat/message-input/message-input-button.vue
index f9a7a1d..458df78 100644
--- a/src/TUIKit/components/TUIChat/message-input/message-input-button.vue
+++ b/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
-      v-if="props.enableSend"
-      class="message-input-button-cont"
-      data-type="text"
-      :disabled="false"
-      @click="sendMessage"
-    >
-      <p
-        v-if="displayHover"
-        class="message-input-button-hover"
-      >
-        {{ TUITranslateService.t("TUIChat.按Enter发送，Ctrl+Enter换行") }}
+    <button v-if="props.enableSend" class="message-input-button-cont" 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;
diff --git a/src/TUIKit/components/TUIChat/message-input/message-input-editor.vue b/src/TUIKit/components/TUIChat/message-input/message-input-editor.vue
index 3f4b33a..98cf970 100644
--- a/src/TUIKit/components/TUIChat/message-input/message-input-editor.vue
+++ b/src/TUIKit/components/TUIChat/message-input/message-input-editor.vue
@@ -1,11 +1,6 @@
 <template>
-  <div
-    :class="['message-input-editor-container', isH5 && 'message-input-editor-container-h5']"
-  >
-    <div
-      v-if="isMuted"
-      class="message-input-mute"
-    >
+  <div :class="['message-input-editor-container', isH5 && 'message-input-editor-container-h5']">
+    <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 {
-  TUIStore,
-  StoreName,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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,
-      extensions: [
-        Document,
-        Paragraph,
-        Text,
-        HardBreak,
-        DisableDefaultEnter,
-        Placeholder.configure({
-          emptyEditorClass: 'is-editor-empty',
-          placeholder: placeholder.value,
-        }),
-        Mention.configure({
-          HTMLAttributes: {
-            class: 'mention',
-          },
-          suggestion: enableAt.value && (MessageInputAtSuggestion() as any),
-        }),
-        CustomImage.configure({
-          inline: true,
-          allowBase64: true,
-        }),
-      ],
-      autofocus: !isH5,
-      editable: true,
-      injectCSS: false,
-      editorProps: {
-        handlePaste() {
-          // prevent editor's default paste for resolve emoji & marked down line break
-          return true;
+        element: editorDom.value,
+        extensions: [
+          Document,
+          Paragraph,
+          Text,
+          HardBreak,
+          DisableDefaultEnter,
+          Placeholder.configure({
+            emptyEditorClass: 'is-editor-empty',
+            placeholder: placeholder.value
+          }),
+          Mention.configure({
+            HTMLAttributes: {
+              class: 'mention'
+            },
+            suggestion: enableAt.value && (MessageInputAtSuggestion() as any)
+          }),
+          CustomImage.configure({
+            inline: true,
+            allowBase64: true
+          })
+        ],
+        autofocus: !isH5,
+        editable: true,
+        injectCSS: false,
+        editorProps: {
+          handlePaste() {
+            // prevent editor's default paste for resolve emoji & marked down line break
+            return true;
+          }
         },
-      },
-      // handle input editor typing (only in C2C and enable typing)
-      onUpdate({ editor, transaction }) {
-        if (!enableTyping.value || !isC2C.value) return;
-        isEditorBlur.value = !editor.isFocused;
-        if (transaction?.doc?.content?.size > 2) {
-          isEditorEmpty.value = false;
-        } else {
-          isEditorEmpty.value = true;
+        // handle input editor typing (only in C2C and enable typing)
+        onUpdate({ editor, transaction }) {
+          if (!enableTyping.value || !isC2C.value) return;
+          isEditorBlur.value = !editor.isFocused;
+          if (transaction?.doc?.content?.size > 2) {
+            isEditorEmpty.value = false;
+          } else {
+            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 (
-    (type === 'drop' && e.dataTransfer)
-    || (type === 'paste' && e.clipboardData)
-  ) {
-    const files
-      = type === 'drop' ? e?.dataTransfer?.files : e?.clipboardData?.files;
+  if ((type === 'drop' && e.dataTransfer) || (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
-        ? URL.createObjectURL(file)
-        : await drawFileCanvasToImageUrl(file);
+      const fileSrc = isImage ? 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 = [
-    'image',
-    'pdf',
-    'text',
-    'ppt',
-    'presentation',
-    'sheet',
-    'zip',
-    'word',
-    'video',
-    'unknown',
-  ];
+  const fileTypes = ['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[content.length - 1]
-    && content[content.length - 1].type === 'text'
-    && content[content.length - 1].payload?.text?.endsWith('\n')
+    content.length > 0 &&
+    content[content.length - 1] &&
+    content[content.length - 1].type === 'text' &&
+    content[content.length - 1].payload?.text?.endsWith('\n')
   ) {
     const text = content[content.length - 1].payload.text || '';
-    content[content.length - 1].payload.text = text?.substring(
-      0,
-      text.lastIndexOf('\n'),
-    );
+    content[content.length - 1].payload.text = text?.substring(0, text.lastIndexOf('\n'));
   }
   return content;
 }
@@ -449,11 +416,7 @@ function handleEditorContent(root: JSONContent, content: ITipTapEditorContent[])
   if (!root || !root.type) {
     return;
   }
-  if (
-    root.type !== 'text'
-    && root.type !== 'custom-image'
-    && root.type !== 'mention'
-  ) {
+  if (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
-      && content[content.length - 1]
-      && content[content.length - 1]?.type === 'text'
-    ) {
+    if (content.length > 0 && 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 (
-      content.length > 0
-      && content[content.length - 1]
-      && content[content.length - 1]?.type === 'text'
-    ) {
+    if (content.length > 0 && content[content.length - 1] && content[content.length - 1]?.type === 'text') {
       content[content.length - 1].payload.text += '\n';
     }
-  } else if (
-    node.type === 'text'
-    || (node.type === 'custom-image' && node?.attrs?.class?.includes('emoji'))
-  ) {
+  } else if (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 (
-      content.length > 0
-      && content[content.length - 1]
-      && content[content.length - 1]?.type === 'text'
-    ) {
+    if (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 (
-    node.type === 'custom-image' && node?.attrs?.class?.includes('normal')
-  ) {
+  } else if (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 (
-      content.length > 0
-      && content[content.length - 1]
-      && content[content.length - 1]?.type === 'text'
-    ) {
+    if (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 === 'SPAN'
-        || (child as HTMLElement).classList?.contains('custom-image-emoji')
-        || (child as HTMLElement).classList?.contains('mention')
+        child.nodeName === '#text' ||
+        child.nodeName === 'SPAN' ||
+        (child as HTMLElement).classList?.contains('custom-image-emoji') ||
+        (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;
diff --git a/src/TUIKit/components/TUIChat/message-input/message-input-file.ts b/src/TUIKit/components/TUIChat/message-input/message-input-file.ts
index e3c4734..0347fa7 100644
--- a/src/TUIKit/components/TUIChat/message-input/message-input-file.ts
+++ b/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 }) => {
-        if ((tr.selection as any)?.node?.type?.name == 'custom-image') {
-          return commands.updateAttributes('custom-image', options);
-        } else {
-          return commands.insertContent({
-            type: this.name,
-            attrs: options,
-          });
+      setImage:
+        (options) =>
+        ({ tr, commands }) => {
+          if ((tr.selection as any)?.node?.type?.name == 'custom-image') {
+            return commands.updateAttributes('custom-image', options);
+          } else {
+            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 [
-      'img',
-      HTMLAttributes,
-    ];
-  },
+    return ['img', HTMLAttributes];
+  }
 });
diff --git a/src/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue b/src/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue
index 3dcc23e..96aa7bb 100644
--- a/src/TUIKit/components/TUIChat/message-input/message-input-quote/index.vue
+++ b/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">
-        {{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}
-      </div>
-      <Icon
-        class="input-quote-close-icon"
-        :file="closeIcon"
-        width="11px"
-        height="11px"
-        @onClick="cancelQuote"
-      />
+      <div class="max-one-line">{{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}</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, {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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
   });
 });
 
diff --git a/src/TUIKit/components/TUIChat/message-list/index.vue b/src/TUIKit/components/TUIChat/message-list/index.vue
index 7d2a737..6e13c2f 100644
--- a/src/TUIKit/components/TUIChat/message-list/index.vue
+++ b/src/TUIKit/components/TUIChat/message-list/index.vue
@@ -1,60 +1,28 @@
 <template>
-  <div
-    class="tui-chat"
-    :class="[isH5 ? 'tui-chat-h5' : '']"
-  >
+  <div class="tui-chat" :class="[isH5 ? 'tui-chat-h5' : '']">
     <!-- <JoinGroupCard v-if="isH5" /> -->
-    <div
-      id="tui-chat-main"
-      class="tui-chat-main"
-      @click="closeChatPop"
-    >
+    <div id="tui-chat-main" class="tui-chat-main" @click="closeChatPop">
       <!-- Safe Tips -->
-      <div
-        v-if="isOfficial"
-        class="tui-chat-safe-tips"
-      >
+      <div 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
-        v-if="isGroup"
-        :key="props.groupID"
-        :groupID="props.groupID"
-      />
+      <MessageGroupApplication v-if="isGroup" :key="props.groupID" :groupID="props.groupID" />
       <!-- Message List -->
-      <ul
-        id="messageScrollList"
-        ref="messageListRef"
-        class="tui-message-list"
-        @click="onMessageListBackgroundClick"
-      >
-        <p
-          v-if="!isCompleted"
-          class="message-more"
-          @click="getHistoryMessageList"
-        >
-          {{ TUITranslateService.t("TUIChat.查看更多") }}
+      <ul id="messageScrollList" ref="messageListRef" class="tui-message-list" @click="onMessageListBackgroundClick">
+        <p v-if="!isCompleted" class="message-more" @click="getHistoryMessageList">
+          {{ TUITranslateService.t('TUIChat.查看更多') }}
         </p>
-        <li
-          v-for="(item, index) in messageList"
-          :id="'tui-' + item.ID"
-          :key="item.ID"
-          ref="messageElementListRef"
-          class="message-li"
-        >
-          <MessageTimestamp
-            :currTime="item.time"
-            :prevTime="index > 0 ? messageList[index - 1].time : 0"
-          />
+        <li v-for="(item, index) in messageList" :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
-                    v-if="item.type === TYPES.MSG_TEXT"
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  />
-                  <ProgressMessage
-                    v-else-if="item.type === TYPES.MSG_IMAGE"
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  >
-                    <MessageImage
-                      :content="item.getMessageContent()"
-                      :messageItem="item"
-                      @previewImage="handleImagePreview"
-                    />
+                  <MessageText v-if="item.type === TYPES.MSG_TEXT" :content="item.getMessageContent()" :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
-                    v-else-if="item.type === TYPES.MSG_VIDEO"
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  >
-                    <MessageVideo
-                      :content="item.getMessageContent()"
-                      :messageItem="item"
-                    />
+                  <ProgressMessage v-else-if="item.type === TYPES.MSG_VIDEO" :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
-                    v-else-if="item.type === TYPES.MSG_FILE"
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  >
-                    <MessageFile
-                      :content="item.getMessageContent()"
-                      :messageItem="item"
-                    />
+                  <ProgressMessage v-else-if="item.type === TYPES.MSG_FILE" :content="item.getMessageContent()" :messageItem="item">
+                    <MessageFile :content="item.getMessageContent()" :messageItem="item" />
                   </ProgressMessage>
-                  <MessageRecord
-                    v-else-if="item.type === TYPES.MSG_MERGER"
-                    :renderData="item.payload"
-                    :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()"
-                  />
+                  <MessageRecord v-else-if="item.type === TYPES.MSG_MERGER" :renderData="item.payload" :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
-                    v-else-if="item.type === TYPES.MSG_CUSTOM"
-                    :content="item.getMessageContent()"
-                    :messageItem="item"
-                  />
+                  <MessageCustom 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
-                  v-if="isShowEmojiPlugin"
-                  :message="item"
-                  :emojiConfig="emojiConfig"
-                />
+                <TUIEmojiPlugin v-if="isShowEmojiPlugin" :message="item" :emojiConfig="emojiConfig" />
               </template>
             </MessageTool>
           </div>
         </li>
       </ul>
-      <ScrollButton
-        ref="scrollButtonInstanceRef"
-        @scrollToLatestMessage="scrollToLatestMessage"
-      />
+      <ScrollButton 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
-        v-if="showImagePreview"
-        :currentImage="currentImagePreview"
-        :imageList="imageMessageList"
-        @close="onImagePreviewerClose"
-      />
+      <ImagePreviewer 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, {
-  IMessageModel,
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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 (
-      messageList.value?.findIndex(
-        (message: IMessageModel) => message?.ID === messageTarget.value?.ID,
-      ) >= 0
-    ) {
+    if (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 (
-    newLastMessage?.ID
-    && JSON.stringify(oldLastMessage) !== JSON.stringify(newLastMessage)
-  ) {
+  } else if (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
-    && typeof messageListRef.value.scrollTop === 'number'
-    && typeof messageListRef.value.scrollHeight === 'number'
-    && typeof messageListRef.value.clientHeight === 'number'
-    && Math.ceil(
-      messageListRef.value.scrollTop + messageListRef.value.clientHeight,
-    ) >= messageListRef.value.scrollHeight
+    messageListRef.value &&
+    typeof messageListRef.value.scrollTop === 'number' &&
+    typeof messageListRef.value.scrollHeight === 'number' &&
+    typeof messageListRef.value.clientHeight === 'number' &&
+    Math.ceil(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(
-          (dom: HTMLElement) => dom?.id === `tui-${config.scrollToMessage?.ID}`,
-        );
+        const targetMessageDom = messageElementListRef.value?.find((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 (
-      messageList.value?.findIndex(
-        (message: IMessageModel) => message?.ID === messageTarget.value?.ID,
-      ) >= 0
-    ) {
+    if (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) {
-  scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
-}, 150, { leading: true });
+const handelScrollListScroll = throttle(
+  function (e: Event) {
+    scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
+  },
+  150,
+  { leading: true }
+);
 
 async function bindIntersectionObserver() {
-  if (
-    !messageList.value
-    || !messageListRef.value
-    || messageList.value.length === 0
-  ) {
+  if (!messageList.value || !messageListRef.value || messageList.value.length === 0) {
     return;
   }
 
@@ -701,32 +596,34 @@ async function bindIntersectionObserver() {
     return;
   }
 
-  const mappingFromIDToMessage: Record<string, {
-    msgDom: HTMLElement;
-    msgModel: IMessageModel | undefined;
-  }> = {};
+  const mappingFromIDToMessage: Record<
+    string,
+    {
+      msgDom: HTMLElement;
+      msgModel: IMessageModel | undefined;
+    }
+  > = {};
 
   observer?.disconnect();
-  observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      const { isIntersecting, target } = entry;
-      if (isIntersecting) {
-        const { msgDom, msgModel } = mappingFromIDToMessage[target.id];
-        if (
-          msgModel
-          && !msgModel.readReceiptInfo?.isPeerRead
-          && !sentReceiptMessageIDSet.has(msgModel.ID)
-        ) {
-          TUIChatService.sendMessageReadReceipt([msgModel]);
-          sentReceiptMessageIDSet.add(msgModel.ID);
-          observer?.unobserve(msgDom);
+  observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const { isIntersecting, target } = entry;
+        if (isIntersecting) {
+          const { msgDom, msgModel } = mappingFromIDToMessage[target.id];
+          if (msgModel && !msgModel.readReceiptInfo?.isPeerRead && !sentReceiptMessageIDSet.has(msgModel.ID)) {
+            TUIChatService.sendMessageReadReceipt([msgModel]);
+            sentReceiptMessageIDSet.add(msgModel.ID);
+            observer?.unobserve(msgDom);
+          }
         }
-      }
-    });
-  }, {
-    root: messageListRef.value,
-    threshold: 0.7,
-  });
+      });
+    },
+    {
+      root: messageListRef.value,
+      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 (
-        matchingMessage
-        && matchingMessage.needReadReceipt
-        && matchingMessage.flow === 'in'
-      ) {
+      if (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) => {
-  if (!newValue) {
-    changeSelectMessageIDList({
-      type: 'clearAll',
-      messageID: '',
-    });
+watch(
+  () => props.isMultipleSelectMode,
+  (newValue) => {
+    if (!newValue) {
+      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>
 
diff --git a/src/TUIKit/components/TUIChat/message-list/link/index.ts b/src/TUIKit/components/TUIChat/message-list/link/index.ts
index 451c490..d20b60d 100644
--- a/src/TUIKit/components/TUIChat/message-list/link/index.ts
+++ b/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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-audio.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-audio.vue
index bdb9e05..a3e9ca0 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-audio.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-audio.vue
@@ -1,32 +1,15 @@
 <template>
   <div
     class="message-audio"
-    :class="[
-      isMobile && 'message-audio-h5',
-      message.flow === 'out' && 'reserve',
-      message.hasRiskContent && 'disable',
-    ]"
+    :class="[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
-        class="icon"
-        width="16px"
-        height="20px"
-        :file="audioIcon"
-      />
+      <Icon class="icon" width="16px" height="20px" :file="audioIcon" />
     </div>
-    <span
-      class="time"
-      :style="{ width: `${data.second * 10 + 20}px` }"
-    >
-      {{ data.second || 1 }} "
-    </span>
-    <audio
-      ref="audioRef"
-      :src="data.url"
-    />
+    <span class="time" :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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
index 16a39e8..7fb4027 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
@@ -1,12 +1,7 @@
 <template>
   <div :class="containerClassNameList">
     <!-- multiple select radio -->
-    <RadioSelect
-      v-if="props.isMultipleSelectMode"
-      class="multiple-select-radio"
-      :isSelected="isMultipleSelected"
-      @onChange="toggleMultipleSelect"
-    />
+    <RadioSelect 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
-          class="message-bubble-main-content"
-          :class="[message.flow === 'in' ? '' : 'reverse']"
-        >
-          <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"
-            >
+        <div class="message-bubble-main-content" :class="[message.flow === 'in' ? '' : 'reverse']">
+          <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="
-                      (message.type === TYPES.MSG_IMAGE || message.type === TYPES.MSG_VIDEO) &&
-                        message.hasRiskContent
-                    "
+                    v-if="(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
-                  v-if="message.hasRiskContent"
-                  class="content-has-risk-tips"
-                >
+                <div v-if="message.hasRiskContent" class="content-has-risk-tips">
                   {{ riskContentText }}
                 </div>
               </div>
               <!-- audio unplay mark -->
-              <div
-                v-if="isDisplayUnplayMark"
-                class="audio-unplay-mark"
-              />
+              <div v-if="isDisplayUnplayMark" class="audio-unplay-mark" />
               <!-- Send Fail Icon -->
-              <div
-                v-if="message.status === 'fail' || message.hasRiskContent"
-                class="message-label fail"
-                @click="resendMessage()"
-              >
-                !
-              </div>
+              <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
-                class="message-label align-self-bottom"
-                :message="shallowCopyMessage(message)"
-                @openReadUserPanel="openReadUserPanel"
-              />
+              <ReadStatus class="message-label align-self-bottom" :message="shallowCopyMessage(message)" @openReadUserPanel="openReadUserPanel" />
             </div>
           </main>
         </div>
         <!-- message extra area -->
-        <div
-          class="message-bubble-extra-content"
-        >
+        <div class="message-bubble-extra-content">
           <!-- extra: message translation -->
-          <MessageTranslate
-            :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
-            :message="message"
-          />
+          <MessageTranslate :class="message.flow === 'out' ? 'reverse' : 'flex-row'" :message="message" />
           <!-- extra: message convert voice to text -->
-          <MessageConvert
-            :class="message.flow === 'out' ? 'reverse' : 'flex-row'"
-            :message="message"
-          />
+          <MessageConvert :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 = [
-  TYPES.MSG_LOCATION,
-  TYPES.MSG_TEXT,
-  TYPES.MSG_CUSTOM,
-  TYPES.MSG_MERGER,
-  TYPES.MSG_FACE,
-];
+const needLoadingIconMessageType = [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'
-    && message.value.status === 'success'
-    && message.value.type === TYPES.MSG_AUDIO
-    && !props.isAudioPlayed;
+  return message.value.flow === 'in' && message.value.status === 'success' && message.value.type === TYPES.MSG_AUDIO && !props.isAudioPlayed;
 });
 
 const containerClassNameList = computed(() => {
-  return [
-    'message-bubble',
-    isMultipleSelected.value ? 'multiple-selected' : '',
-    ...props.classNameList,
-  ];
+  return ['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(
-      message.value.type === TYPES.MSG_AUDIO ? 'TUIChat.无法收听' : 'TUIChat.无法查看',
-    );
+    content += TUITranslateService.t(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;
-        animation: shadow-blink 1s linear 3;
-      }
+        .content-in {
+          background: #fbfbfb;
+          border-radius: 0 10px 10px;
+        }
 
-      .blink-content {
-        @keyframes reference-blink {
-          50% {
-            background-color: #ff9c19;
+        .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;
+          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;
-      }
-
-    .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;
+        .align-self-bottom {
+          align-self: flex-end;
         }
       }
     }
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue
index 0121b76..c17a0f4 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/convert-content.vue
+++ b/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 {
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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),
-  isSingleConvert: false,
+  message: () => ({}) as IMessageModel,
+  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) => {
-  if (newVal) {
-    convertor.get(props.message)
-      .then((text) => {
-        convertFinished.value = true;
-        convertText.value = text;
-        nextTick(() => {
-          const { height: originHeight, width: originWidth } = getBoundingClientRectSync(convertLoadingRef.value!);
-          const { height, width } = getBoundingClientRectSync(convertContentRef.value!);
-          calculateHeight.value = originHeight;
-          calculateWidth.value = originWidth;
-          requestAnimationFrame(() => {
-            calculateHeight.value = height;
-            calculateWidth.value = width;
-            if (props.isSingleConvert) {
-              nextTick(() => {
-                const { bottom } = getBoundingClientRectSync(props.convertWrapperRef);
-                const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
-                if (bottom > bottomWindow) {
-                  const timer = setTimeout(() => {
-                    props.convertWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
-                    clearTimeout(timer);
-                  }, 150);
-                }
-              });
-            }
+watch(
+  () => props.contentVisible,
+  (newVal: boolean) => {
+    if (newVal) {
+      convertor
+        .get(props.message)
+        .then((text) => {
+          convertFinished.value = true;
+          convertText.value = text;
+          nextTick(() => {
+            const { height: originHeight, width: originWidth } = getBoundingClientRectSync(convertLoadingRef.value!);
+            const { height, width } = getBoundingClientRectSync(convertContentRef.value!);
+            calculateHeight.value = originHeight;
+            calculateWidth.value = originWidth;
+            requestAnimationFrame(() => {
+              calculateHeight.value = height;
+              calculateWidth.value = width;
+              if (props.isSingleConvert) {
+                nextTick(() => {
+                  const { bottom } = getBoundingClientRectSync(props.convertWrapperRef);
+                  const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
+                  if (bottom > bottomWindow) {
+                    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);
-        const { height: originHeight } = getBoundingClientRectSync(convertLoadingRef.value!);
-        calculateHeight.value = originHeight;
-        convertText.value = err.message;
-      });
+    }
+  },
+  {
+    immediate: true
   }
-}, {
-  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 {
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/index.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/index.vue
index 130a031..2f1fd3b 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-convert/index.vue
+++ b/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 {
-  TUIStore,
-  StoreName,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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
   });
 });
 
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
index 35d4891..5ef3b00 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -4,22 +4,11 @@
       <div>
         <h1>
           <label>{{ extension.title }}</label>
-          <a
-            v-if="extension.hyperlinks_text"
-            :href="extension.hyperlinks_text.value"
-            target="view_window"
-          >{{ extension.hyperlinks_text.key }}</a>
+          <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
-            v-for="(item, index) in extension.item"
-            :key="index"
-          >
-            <a
-              v-if="isUrl(item.value)"
-              :href="item.value"
-              target="view_window"
-            >{{ item.key }}</a>
+          <li v-for="(item, index) in extension.item" :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
-            v-for="(item, index) in Math.max(customData.score, 0)"
-            :key="index"
-            class="evaluate-list-item"
-          >
-            <Icon
-              :file="star"
-              class="file-icon"
-            />
+          <li v-for="(item, index) in Math.max(customData.score, 0)" :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
-        class="order"
-        @click="openLink(customData.link)"
-      >
-        <img
-          :src="customData.imageUrl"
-        >
+      <div class="order" @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
-          :href="customData.link"
-          target="view_window"
-        >{{
-          TUITranslateService.t("message.custom.查看详情>>")
-        }}</a>
+        <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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-face.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-face.vue
index a9341ff..5c3ce35 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-face.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-face.vue
@@ -1,12 +1,6 @@
 <template>
-  <div
-    class="message-image"
-  >
-    <img
-      mode="aspectFit"
-      class="message-image"
-      :src="url"
-    >
+  <div class="message-image">
+    <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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue
index 0288a75..ae85471 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-file.vue
@@ -1,13 +1,6 @@
 <template>
-  <div
-    class="file-message-montainer"
-    :title="TUITranslateService.t('TUIChat.单击下载')"
-    @click="download"
-  >
-    <Icon
-      :file="files"
-      class="file-icon"
-    />
+  <div class="file-message-montainer" :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),
-    messageItem: () => ({} as IMessageModel),
-  },
+    content: () => ({}) as IFileMessageContent,
+    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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
index d00c95b..4b99893 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-image.vue
@@ -1,15 +1,11 @@
 <template>
-  <div
-    ref="skeletonDomRef"
-    class="image-container"
-    @click.self="toggleShow"
-  >
+  <div 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 (
-    props.messageItem?.status === 'success'
-    || props.messageItem?.status === 'fail'
-    || props.messageItem?.progress === 1
-  ) {
+  if (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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-location.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-location.vue
index 40868c2..a1a61be 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-location.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-location.vue
@@ -1,12 +1,7 @@
 <template>
-  <a
-    class="message-location"
-    :href="data.href"
-    target="_blank"
-    title="点击查看详情"
-  >
+  <a 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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue
index 209e884..b4a2825 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue
+++ b/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
-      v-if="isMessageRevoked"
-      class="revoked-text"
-    >
+    <div v-if="isMessageRevoked" class="revoked-text">
       {{ TUITranslateService.t('TUIChat.引用内容已撤回') }}
     </div>
-    <div
-      v-else
-      class="max-double-line"
-    >
-      {{ messageQuoteContent.messageSender }}: {{ transformTextWithKeysToEmojiNames(messageQuoteText) }}
-    </div>
+    <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 {
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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 (
-    [
-      MessageQuoteTypeEnum.TYPE_TEXT,
-      MessageQuoteTypeEnum.TYPE_MERGER,
-    ].includes(params.messageType)
-  ) {
+  if ([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-left: auto;
+  margin-right: 44px;
+  margin-left: auto;
 }
 
 .revoked-text {
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/interface.ts b/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/interface.ts
index 533ff31..b2804ab 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-quote/interface.ts
+++ b/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
 }
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
index 8ab5d49..608f0ba 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-record/index.vue
@@ -1,20 +1,11 @@
 <template>
   <div>
-    <div
-      class="message-record-container"
-      @click="openMergeDetail"
-    >
-      <div
-        class="record-title"
-      >
+    <div class="message-record-container" @click="openMergeDetail">
+      <div class="record-title">
         {{ props.renderData.title }}
       </div>
       <div class="record-abstract-container">
-        <div
-          v-for="(item, index) in props.renderData.abstractList.slice(0, 7)"
-          :key="index"
-          class="record-abstract-item"
-        >
+        <div 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
-      v-if="!props.disabled && isPC"
-      :visible="isMessageListVisible"
-      @onOverlayClick="isMessageListVisible = false"
-    >
+    <Overlay 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);
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.vue
index beaac01..7efcbec 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.vue
@@ -1,14 +1,7 @@
 <template>
   <div class="message-stream">
-    <pre
-      ref="messageContentRef"
-      :class="['message-marked', 'message-typewriter']"
-      v-html="markedContent"
-    />
-    <StreamOperation
-      v-show="isOperationShow"
-      :content="streamContent"
-    />
+    <pre ref="messageContentRef" :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) => {
-    if (newValue === oldValue) {
-      return;
+  watch(
+    () => isStreaming.value,
+    (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>
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/marked.ts b/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/marked.ts
index b6845c9..7b8c6f2 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/marked.ts
+++ b/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) => {
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.vue
index ff06b85..22532e5 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/index.vue
@@ -1,25 +1,17 @@
 <template>
-  <div
-    ref="operationContainerRef"
-    class="message-stream_operation_container"
-  >
+  <div 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
-          class="message-stream_operation_icon"
-          :file="operation.icon"
-          :name="operation.name"
-          size="14px"
-        />
+        <Icon 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 {
-        display: flex;
-      }
-
-      .message-stream_operation_item_disabled {
-        * {
-          cursor: not-allowed;
-        }
+    .message-stream_operation_item_disabled {
+      * {
+        cursor: not-allowed;
       }
     }
   }
+}
 </style>
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/type.ts b/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/type.ts
index de1bd58..aa9356b 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/operation/type.ts
+++ b/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',
 }
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/type-writer.ts b/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/type-writer.ts
index fed576c..78cd081 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/type-writer.ts
+++ b/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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue
index 6ff4bc3..756ecb2 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue
+++ b/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
-      v-for="(item, index) in processedContent"
-      :key="index"
-    >
-      <span
-        v-if="item.name === 'text'"
-        class="text"
-      >
+    <span v-for="(item, index) in processedContent" :key="index">
+      <span v-if="item.name === 'text'" class="text">
         {{ item.text }}
       </span>
-      <span
-        v-else-if="item.name === 'url'"
-        class="url-link"
-        @click="navigateToUrl(item.url)"
-      >
+      <span v-else-if="item.name === 'url'" class="url-link" @click="navigateToUrl(item.url)">
         {{ item.text }}
       </span>
-      <img
-        v-else
-        class="emoji"
-        :src="item.src"
-        :alt="item.emojiKey"
-      >
+      <img 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),
-  enableURLHighlight: false,
+  messageItem: () => ({}) as IMessageModel,
+  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){
-      processedContent.value =  props.messageItem.getMessageContent()?.text;
+    if (props.messageItem.getMessageContent) {
+      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) => {
-      // handle custom emoji
-      if (item.name === 'img' && item?.type === 'custom') {
-        if (!CUSTOM_BASIC_EMOJI_URL) {
-          console.warn('CUSTOM_BASIC_EMOJI_URL is required for custom emoji.');
-          return item;
+    processedContent.value = processedContent.value
+      .map((item: TextItem) => {
+        // handle custom emoji
+        if (item.name === 'img' && item?.type === 'custom') {
+          if (!CUSTOM_BASIC_EMOJI_URL) {
+            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
-      if (props.enableURLHighlight && item.name === 'text' && item.text) {
-        if(!parseTextAndValidateUrls){
-          console.warn('parseTextAndValidateUrls not found. Please update @tencentcloud/universal-api to 2.3.7 or higher.');
-          return item;
+        // handle url
+        if (props.enableURLHighlight && item.name === 'text' && item.text) {
+          if (!parseTextAndValidateUrls) {
+            console.warn('parseTextAndValidateUrls not found. Please update @tencentcloud/universal-api to 2.3.7 or higher.');
+            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;
-    })?.flat();
+        return item;
+      })
+      ?.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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-timestamp.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-timestamp.vue
index bbeb4c5..b8104a8 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-timestamp.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-timestamp.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="timestampShowFlag"
-    class="message-timestamp"
-  >
+  <div 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(
-        currTime.value,
-        prevTime.value,
-      );
+      timestampShowContent.value = handleItemTime(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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue
index fcdd635..0d1d573 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-tip.vue
+++ b/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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/index.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/index.vue
index 5da752f..a252561 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/index.vue
+++ b/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
-        :file="checkIcon"
-        size="13px"
-      />
+      <Icon :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 {
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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
   });
 });
 
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/translation-content.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/translation-content.vue
index ec6e95e..1720f18 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-translate/translation-content.vue
+++ b/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
-        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
-            v-else
-            class="text-plain"
-          >{{ text.value }}</span>
+      <template 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 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 {
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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) => {
-  if (newVal) {
-    translator.get(props.message)
-      .then((result) => {
-        translationFinished.value = true;
-        translationTextList.value = result;
+watch(
+  () => props.translationContentVisible,
+  (newVal: boolean) => {
+    if (newVal) {
+      translator
+        .get(props.message)
+        .then((result) => {
+          translationFinished.value = true;
+          translationTextList.value = result;
 
-        nextTick(() => {
-          const { height: originHeight, width: originWidth } = getBoundingClientRectSync(translationLoadingRef.value!);
-          const { height, width } = getBoundingClientRectSync(translationContentRef.value!);
-          calculateHeight.value = originHeight;
-          calculateWidth.value = originWidth;
-          requestAnimationFrame(() => {
-            calculateHeight.value = height;
-            calculateWidth.value = width;
-            if (props.isSingleTranslation) {
-              nextTick(() => {
-                const { bottom } = getBoundingClientRectSync(props.translationWrapperRef);
-                const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
-                if (bottom > bottomWindow) {
-                  const timer = setTimeout(() => {
-                    props.translationWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
-                    clearTimeout(timer);
-                  }, 150);
-                }
-              });
-            }
+          nextTick(() => {
+            const { height: originHeight, width: originWidth } = getBoundingClientRectSync(translationLoadingRef.value!);
+            const { height, width } = getBoundingClientRectSync(translationContentRef.value!);
+            calculateHeight.value = originHeight;
+            calculateWidth.value = originWidth;
+            requestAnimationFrame(() => {
+              calculateHeight.value = height;
+              calculateWidth.value = width;
+              if (props.isSingleTranslation) {
+                nextTick(() => {
+                  const { bottom } = getBoundingClientRectSync(props.translationWrapperRef);
+                  const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
+                  if (bottom > bottomWindow) {
+                    const timer = setTimeout(() => {
+                      props.translationWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
+                      clearTimeout(timer);
+                    }, 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;
-        const { height: originHeight } = getBoundingClientRectSync(translationLoadingRef.value!);
-        calculateHeight.value = originHeight;
-        translationTextList.value = [];
-        emits('toggleErrorStatus', true);
-        translationErrorText.value = err.message;
-      });
-  }
-}, { immediate: true });
+    }
+  },
+  { 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 {
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/message-video.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/message-video.vue
index 2aba09b..acdd634 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/message-video.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-elements/message-video.vue
@@ -3,21 +3,15 @@
     <div
       ref="skeleton"
       class="message-video-box"
-      :class="[
-        (!props.messageItem.progress || props.messageItem.progress === 1)
-          && !isPC
-          && 'message-video-cover',
-      ]"
+      :class="[(!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) ||
-          (!isPC && poster)
-        "
+        v-if="(props.messageItem.progress > 0 && props.messageItem.progress < 1 && 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
-        v-else
-        ref="videoRef"
-        class="message-img video-web"
-        :src="props.content.url"
-        controls
-        preload="metadata"
-        :poster="poster"
-      />
+      <video v-else ref="videoRef" class="message-img video-web" :src="props.content.url" controls preload="metadata" :poster="poster" />
     </div>
-    <div
-      v-if="isShow && !isPC"
-      class="dialog-video"
-    >
-      <div
-        class="dialog-video-close"
-        @click.stop="toggleVideoPreviewer"
-      >
+    <div v-if="isShow && !isPC" class="dialog-video">
+      <div class="dialog-video-close" @click.stop="toggleVideoPreviewer">
         <Icon :file="closeSVG" />
       </div>
-      <div
-        class="dialog-video-box"
-        :class="[!isPC ? 'dialog-video-h5' : '']"
-        @click.self="toggleVideoPreviewer"
-      >
-        <video
-          :class="[isWidth ? 'is-width' : 'is-height']"
-          :src="props.content.url"
-          controls
-          autoplay
-        />
+      <div class="dialog-video-box" :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 {
-  ref,
-  watch,
-  computed,
-  nextTick,
-  watchEffect,
-  withDefaults,
-} from '../../../../adapter-vue';
+import { 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),
-    messageItem: () => ({} as IMessageModel),
-  },
+    content: () => ({}) as IVideoMessageContent,
+    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
-      = document.getElementById('messageScrollList')?.clientWidth || 0;
+    const containerWidth = 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.width = `${size.width}px`);
-      skeleton?.value?.style
-      && (skeleton.value.style.height = `${size.height}px`);
+      skeleton?.value?.style && (skeleton.value.style.width = `${size.width}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) => {
-  if (newVal === 'success' && oldVal !== 'success') {
-    emits('uploading');
+watch(
+  () => props.messageItem.status,
+  (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)
-      || (messageItem?.payload?.snapshotUrl !== transparentPosterUrl
-      && messageItem?.payload?.snapshotUrl)
-      || (messageItem.payload?.thumbUrl !== transparentPosterUrl
-      && messageItem?.payload?.thumbUrl)
-      || (await getVideoBase64(messgeContent.url))
+      (messgeContent.snapshotUrl !== transparentPosterUrl && messgeContent.snapshotUrl) ||
+      (messageItem?.payload?.snapshotUrl !== transparentPosterUrl && messageItem?.payload?.snapshotUrl) ||
+      (messageItem.payload?.thumbUrl !== transparentPosterUrl && 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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/read-status/index.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/read-status/index.vue
index 6bc442e..e9b4e95 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/read-status/index.vue
+++ b/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, {
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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 {
-    ID,
-    type,
-    flow,
-    status,
-    hasRiskContent,
-    conversationID,
-    conversationType,
-    needReadReceipt = false,
-  } = props.message;
+  const { 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.conversationType === 'GROUP'
-    && (readState.value === ReadState.PartiallyRead || readState.value === ReadState.Unread)
+    props.message.needReadReceipt &&
+    props.message.conversationType === 'GROUP' &&
+    (readState.value === ReadState.PartiallyRead || readState.value === ReadState.Unread)
   );
 });
 
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue
index eb4594a..a1ad42b 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/index.vue
+++ b/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
-        class="back"
-        @click="backPreviousLevel"
-      >
-        <Icon
-          class="close-icon"
-          :file="addIcon"
-          :size="'18px'"
-        />
+      <span class="back" @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">
-      Load Merge Message Error
-    </div>
-    <div
-      v-else-if="isMergeMessageInfoLoaded"
-      ref="simpleMessageListRef"
-      class="message-list"
-    >
+    <div v-if="isDownloadOccurError">Load Merge Message Error</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
-          :sender="item.nick"
-          :avatar="item.avatar"
-          :type="item.messageBody[0].type"
-          :time="item.time"
-        >
+        <MessageContainer :sender="item.nick" :avatar="item.avatar" :type="item.messageBody[0].type" :time="item.time">
           <!-- text -->
-          <div
-            v-if="item.messageBody[0].type === TYPES.MSG_TEXT"
-            class="message-text"
-          >
+          <div 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
-                v-if="textInfo.type === 'text'"
-                class="text"
-              >{{ textInfo.content }}</span>
-              <img
-                v-else
-                class="simple-emoji"
-                :src="textInfo.content"
-                alt="small-face"
-              >
+              <span v-if="textInfo.type === 'text'" class="text">{{ textInfo.content }}</span>
+              <img v-else class="simple-emoji" :src="textInfo.content" alt="small-face" />
             </span>
           </div>
           <!-- image -->
-          <div
-            v-else-if="item.messageBody[0].type === TYPES.MSG_IMAGE"
-            class="message-image"
-          >
-            <img
-              class="image"
-              :src="(item.messageBody[0].payload)['imageInfoArray'][2]['url']"
-              mode="widthFix"
-              alt="image"
-            >
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_IMAGE" class="message-image">
+            <img class="image" :src="item.messageBody[0].payload['imageInfoArray'][2]['url']" mode="widthFix" alt="image" />
           </div>
           <!-- video -->
-          <div
-            v-else-if="item.messageBody[0].type === TYPES.MSG_VIDEO"
-            class="message-video"
-          >
-            <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 v-else-if="item.messageBody[0].type === TYPES.MSG_VIDEO" class="message-video">
+            <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
-              v-else
-              class="video"
-              controls
-              :poster="(item.messageBody[0].payload)['thumbUrl']"
-            >
-              <source
-                :src="(item.messageBody[0].payload)['remoteVideoUrl']"
-                type="video/mp4"
-              >
+            <video v-else class="video" controls :poster="item.messageBody[0].payload['thumbUrl']">
+              <source :src="item.messageBody[0].payload['remoteVideoUrl']" type="video/mp4" />
             </video>
           </div>
           <!-- audio -->
-          <div
-            v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO"
-            class="message-audio"
-          >
-            <span>{{ TUITranslateService.t("TUIChat.语音") }}&nbsp;</span>
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO" class="message-audio">
+            <span>{{ TUITranslateService.t('TUIChat.语音') }}&nbsp;</span>
             <span>{{ item.messageBody[0].payload.second }}s</span>
           </div>
           <!-- big face -->
-          <div
-            v-else-if="item.messageBody[0].type === TYPES.MSG_FACE"
-            class="message-face"
-          >
-            <img
-              class="image"
-              :src="resolveBigFaceUrl(item.messageBody[0].payload.data)"
-              alt="face"
-            >
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_FACE" class="message-face">
+            <img class="image" :src="resolveBigFaceUrl(item.messageBody[0].payload.data)" alt="face" />
           </div>
           <!-- file -->
-          <div
-            v-else-if="item.messageBody[0].type === TYPES.MSG_FILE"
-            class="message-file"
-          >
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_FILE" class="message-file">
             {{ TUITranslateService.t('TUIChat.[文件]') }}
           </div>
           <!-- location -->
-          <div
-            v-else-if="item.messageBody[0].type === TYPES.MSG_LOCATION"
-          >
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_LOCATION">
             {{ TUITranslateService.t('TUIChat.[地理位置]') }}
           </div>
           <!-- merger -->
-          <div
-            v-else-if="item.messageBody[0].type === TYPES.MSG_MERGER"
-            class="message-merger"
-            @click.capture="entryNextLevel($event, item)"
-          >
-            <MessageRecord
-              disabled
-              :renderData="item.messageBody[0].payload"
-            />
+          <div v-else-if="item.messageBody[0].type === TYPES.MSG_MERGER" 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, {
-  TUIStore,
-  TUIChatService,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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) => {
-  isDownloadOccurError.value = false;
-  if (newValue < 1) {
-    return;
-  }
-  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;
+watch(
+  () => messageListStack.value.length,
+  async (newValue) => {
+    isDownloadOccurError.value = false;
+    if (newValue < 1) {
+      return;
     }
+    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) => {
-  // For compatibility with uniapp, use watch to implement onMounted
-  if (newValue) {
-    if (!props.messageID) {
-      throw new Error('messageID is required when first render of simple-message-list.');
+watch(
+  () => props.isMounted,
+  (newValue) => {
+    // For compatibility with uniapp, use watch to implement onMounted
+    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 {
-    messageListStack.value = [];
+  },
+  {
+    immediate: true
   }
-}, {
-  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 {
diff --git a/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/message-container.vue b/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/message-container.vue
index 66ddda7..f92aec6 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-elements/simple-message-list/message-container.vue
+++ b/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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-group-application/index.vue b/src/TUIKit/components/TUIChat/message-list/message-group-application/index.vue
index 3d85c7b..b89c1d1 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-group-application/index.vue
+++ b/src/TUIKit/components/TUIChat/message-list/message-group-application/index.vue
@@ -1,17 +1,9 @@
 <template>
   <div>
-    <div
-      v-if="groupApplicationCount > 0"
-      class="application-tips"
-    >
-      <div>
-        {{ groupApplicationCount }}{{ TUITranslateService.t("TUIChat.条入群申请") }}
-      </div>
-      <div
-        class="application-tips-btn"
-        @click="toggleGroupApplicationDrawerShow"
-      >
-        {{ TUITranslateService.t("TUIChat.点击处理") }}
+    <div v-if="groupApplicationCount > 0" class="application-tips">
+      <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
-            @click="toggleGroupApplicationDrawerShow"
-          >
-            <Icon
-              v-if="isPC"
-              :file="closeIcon"
-              :size="'16px'"
-            />
+          <div @click="toggleGroupApplicationDrawerShow">
+            <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
-              class="application-item-operation"
-            >
-              <div
-                class="agree"
-                @click="handleApplication(item, 'Agree', index)"
-              >
-                {{ TUITranslateService.t("TUIChat.同意") }}
+            <div class="application-item-operation">
+              <div class="agree" @click="handleApplication(item, 'Agree', index)">
+                {{ TUITranslateService.t('TUIChat.同意') }}
               </div>
-              <div
-                class="reject"
-                @click="handleApplication(item, 'Reject', index)"
-              >
-                {{ TUITranslateService.t("TUIChat.拒绝") }}
+              <div class="reject" @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 {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  TUIUserService,
-  TUIGroupService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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) => {
-  if (oldVal > 0 && newVal === 0) {
-    isGroupApplicationDrawerShow.value = false;
+watch(
+  () => customGroupApplicationList.value.length,
+  (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 { data: userProfileList } = await TUIUserService.getUserProfile({ userIDList }) as IChatResponese<IUserProfile[]>;
+  const userIDList = applicationList.map((application) => (application.applicationType === 0 ? application.applicant : application.userID));
+  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,
-  }).then(() => {
-    customGroupApplicationList.value[index].isRemoved = true;
-    setTimeout(() => {
-      customGroupApplicationList.value.splice(index, 1);
-      groupApplicationCount.value -= 1;
-    }, 150);
-  }).catch(() => {
-    // TODO: handle error
-  });
+    application: customApplication.application
+  })
+    .then(() => {
+      customGroupApplicationList.value[index].isRemoved = true;
+      setTimeout(() => {
+        customGroupApplicationList.value.splice(index, 1);
+        groupApplicationCount.value -= 1;
+      }, 150);
+    })
+    .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;
       }
     }
   }
diff --git a/src/TUIKit/components/TUIChat/message-list/message-tool/index.vue b/src/TUIKit/components/TUIChat/message-list/message-tool/index.vue
index 2c85c42..09e3e4e 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-tool/index.vue
+++ b/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
-      v-if="featureConfig.EmojiReaction"
-      name="TUIEmojiPlugin"
-    />
-    <div
-      class="dialog-item-list"
-      :class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'"
-    >
+    <slot v-if="featureConfig.EmojiReaction" 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
-          v-if="item.renderCondition()"
-          :key="item.key"
-          class="list-item"
-          @click="getFunction(index)"
-          @mousedown="beforeCopy(item.key)"
-        >
-          <Icon
-            :file="item.iconUrl"
-            :size="'15px'"
-          />
+        <div v-if="item.renderCondition()" :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, {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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
-        || message.value.type === TYPES.MSG_VIDEO
-        || message.value.type === TYPES.MSG_IMAGE);
+      return isPC && (message.value?.type === TYPES.MSG_FILE || 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;
diff --git a/src/TUIKit/components/TUIChat/message-list/message-tool/message-revoked.vue b/src/TUIKit/components/TUIChat/message-list/message-tool/message-revoked.vue
index 1aca156..ce1be99 100644
--- a/src/TUIKit/components/TUIChat/message-list/message-tool/message-revoked.vue
+++ b/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
-      v-if="message.flow === 'out' && isEditMsg"
-      class="edit"
-      @click="messageEdit"
-    >{{ TUITranslateService.t("TUIChat.重新编辑") }}</span>
+    <span>{{ TUITranslateService.t('TUIChat.撤回了一条消息') }}</span>
+    <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;
diff --git a/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/index.vue b/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/index.vue
index 2729512..5d51754 100644
--- a/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/index.vue
+++ b/src/TUIKit/components/TUIChat/message-list/read-receipt-panel/index.vue
@@ -1,27 +1,19 @@
 <template>
-  <Overlay
-    :maskColor="'transparent'"
-    @onOverlayClick="closeReadReceiptPanel"
-  >
+  <Overlay :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
-            size="12px"
-            hotAreaSize="8"
-            :file="closeIcon"
-            @onClick="closeReadReceiptPanel"
-          />
+          <Icon 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
-          v-if="tabInfo[currentTabName].count === 0 && isFirstLoadFinished"
-          class="empty-list-tip"
-        >
+        <div 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
-              v-for="item in tabInfo[currentTabName].memberList"
-              :key="item.userID"
-              class="read-status-member-container"
-            >
-              <Avatar
-                class="read-status-avatar"
-                useSkeletonAnimation
-                :url="item.avatar || ''"
-              />
+            <div v-for="item in tabInfo[currentTabName].memberList" :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
-              v-for="item in tabInfo[currentTabName].memberList"
-              :key="item.userID"
-              class="read-status-member-container"
-            >
-              <Avatar
-                class="read-status-avatar"
-                useSkeletonAnimation
-                :url="item.avatar"
-              />
+            <div v-for="item in tabInfo[currentTabName].memberList" :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
-          v-if="isFirstLoadFinished"
-          class="fetch-more-container"
-        >
-          <FetchMore
-            :isFetching="isPullDownFetching"
-            :isTerminateObserve="isStopFetchMore"
-            @onExposed="pullDownFetchMoreData"
-          />
+        <div v-if="isFirstLoadFinished" 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: []
+    }
   };
 }
 
diff --git a/src/TUIKit/components/TUIChat/message-list/scroll-button/index.vue b/src/TUIKit/components/TUIChat/message-list/scroll-button/index.vue
index 0ccb56d..962dd7d 100644
--- a/src/TUIKit/components/TUIChat/message-list/scroll-button/index.vue
+++ b/src/TUIKit/components/TUIChat/message-list/scroll-button/index.vue
@@ -1,14 +1,6 @@
 <template>
-  <div
-    v-if="isScrollButtonVisible"
-    class="scroll-button"
-    @click="scrollToMessageListBottom"
-  >
-    <Icon
-      width="10px"
-      height="10px"
-      :file="doubleArrowIcon"
-    />
+  <div v-if="isScrollButtonVisible" 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 {
-  TUIStore,
-  StoreName,
-  IMessageModel,
-  IConversationModel,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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 = !!(
-    lastMessage && lastMessage?.time < currentLastMessageTime?.value
-  );
+  isExistLastMessage.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>
 
diff --git a/src/TUIKit/components/TUIChat/mulitple-select-panel/index.vue b/src/TUIKit/components/TUIChat/mulitple-select-panel/index.vue
index 467cb23..d417e5a 100644
--- a/src/TUIKit/components/TUIChat/mulitple-select-panel/index.vue
+++ b/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
-      class="forward-button"
-      @click="oneByOneForwardMessage"
-    >
-      <Icon
-        :file="ForwardEachIcon"
-        :size="iconSize"
-      />
+    <div class="forward-button" @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
-      class="forward-button"
-      @click="mergeForwardMessage"
-    >
-      <Icon
-        :file="ForwardMergeIcon"
-        :size="iconSize"
-      />
+    <div class="forward-button" @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
-      class="forward-button"
-      @click="cancelMultipleSelect"
-    >
-      <Icon
-        class="cancel-button-icon"
-        :file="AddIcon"
-        :size="iconSize"
-      />
+    <div class="forward-button" @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 {
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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;
diff --git a/src/TUIKit/components/TUIChat/offlinePushInfoManager/const.ts b/src/TUIKit/components/TUIChat/offlinePushInfoManager/const.ts
index b711f99..95a7b4d 100644
--- a/src/TUIKit/components/TUIChat/offlinePushInfoManager/const.ts
+++ b/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'
 }
diff --git a/src/TUIKit/components/TUIChat/offlinePushInfoManager/info.ts b/src/TUIKit/components/TUIChat/offlinePushInfoManager/info.ts
index 05bf3ba..fc3fe5c 100644
--- a/src/TUIKit/components/TUIChat/offlinePushInfoManager/info.ts
+++ b/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 = {};
diff --git a/src/TUIKit/components/TUIChat/offlinePushInfoManager/offlinePushInfoManager.ts b/src/TUIKit/components/TUIChat/offlinePushInfoManager/offlinePushInfoManager.ts
index 107c1b1..b29050b 100644
--- a/src/TUIKit/components/TUIChat/offlinePushInfoManager/offlinePushInfoManager.ts
+++ b/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 {
-  IChatOfflinePushInfo,
-  IOfflinePushInfoCreateParams,
-} from './interface';
+import { 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]
     };
   }
 }
diff --git a/src/TUIKit/components/TUIChat/server.ts b/src/TUIKit/components/TUIChat/server.ts
index d8cb78a..040c36e 100644
--- a/src/TUIKit/components/TUIChat/server.ts
+++ b/src/TUIKit/components/TUIChat/server.ts
@@ -1,10 +1,5 @@
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import {
-  IMessageModel,
-  TUIStore,
-  StoreName,
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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) {
diff --git a/src/TUIKit/components/TUIChat/utils/conversationDraft.ts b/src/TUIKit/components/TUIChat/utils/conversationDraft.ts
index 4e8b167..ff919b2 100644
--- a/src/TUIKit/components/TUIChat/utils/conversationDraft.ts
+++ b/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 });
diff --git a/src/TUIKit/components/TUIChat/utils/convertVoiceToText.ts b/src/TUIKit/components/TUIChat/utils/convertVoiceToText.ts
index 35e00ba..dbdd872 100644
--- a/src/TUIKit/components/TUIChat/utils/convertVoiceToText.ts
+++ b/src/TUIKit/components/TUIChat/utils/convertVoiceToText.ts
@@ -1,8 +1,4 @@
-import {
-  IMessageModel,
-  TUIChatService,
-  TUIStore,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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) {
diff --git a/src/TUIKit/components/TUIChat/utils/copy.ts b/src/TUIKit/components/TUIChat/utils/copy.ts
index 53202f9..5d1ec66 100644
--- a/src/TUIKit/components/TUIChat/utils/copy.ts
+++ b/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
-      ? anchorOffset <= focusOffset
-      : anchorNode.compareDocumentPosition(focusNode) & Node.DOCUMENT_POSITION_FOLLOWING;
+    const isForwardSelection =
+      anchorNode === focusNode ? anchorOffset <= focusOffset : 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 {
diff --git a/src/TUIKit/components/TUIChat/utils/sendMessage.ts b/src/TUIKit/components/TUIChat/utils/sendMessage.ts
index 10795b4..853f8fc 100644
--- a/src/TUIKit/components/TUIChat/utils/sendMessage.ts
+++ b/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 (
-  messageList: ITipTapEditorContent[],
-  currentConversation: IConversationModel,
-) => {
+export const sendMessages = async (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;
 };
diff --git a/src/TUIKit/components/TUIChat/utils/translation.ts b/src/TUIKit/components/TUIChat/utils/translation.ts
index 5a4a855..42637e0 100644
--- a/src/TUIKit/components/TUIChat/utils/translation.ts
+++ b/src/TUIKit/components/TUIChat/utils/translation.ts
@@ -1,10 +1,4 @@
-import TUIChatEngine, {
-  IMessageModel,
-  TUIChatService,
-  TUIStore,
-  TUITranslateService,
-  TUIUserService,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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) => {
-      if (item.type === 'text' && item.value.trim() !== '') {
-        needTranslateTextIndex.push(index);
-        return true;
-      }
-      return false;
-    }).map(item => item.value);
+    const needTranslateText = textList
+      .filter((item, index) => {
+        if (item.type === 'text' && item.value.trim() !== '') {
+          needTranslateTextIndex.push(index);
+          return true;
+        }
+        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
     };
   }
 }
diff --git a/src/TUIKit/components/TUIChat/utils/utils.ts b/src/TUIKit/components/TUIChat/utils/utils.ts
index 62d833f..0bd2477 100644
--- a/src/TUIKit/components/TUIChat/utils/utils.ts
+++ b/src/TUIKit/components/TUIChat/utils/utils.ts
@@ -27,21 +27,13 @@ export function deepCopy(data: any, hash = new WeakMap()) {
   return newData;
 }
 
-export const handleSkeletonSize = (
-  width: number,
-  height: number,
-  maxWidth: number,
-  maxHeight: number,
-): { width: number; height: number } => {
+export const handleSkeletonSize = (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 (
-    (width <= maxWidth && height > maxHeight)
-    || (width > maxWidth && height > maxHeight && widthToHeight <= maxWidthToHeight)
-  ) {
+  if ((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 (
-    message.type === TUIChatEngine.TYPES.MSG_CUSTOM
-    && message?.getMessageContent()?.businessID === 'group_create'
-  );
+  return 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')
-    && TUIStore.getData(StoreName.APP, 'enabledMessageReadReceipt');
+  return TUIStore.getData(StoreName.USER, 'displayMessageReadReceipt') && 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(
-    new Date().getFullYear(),
-    0,
-    1,
-    0,
-    0,
-    0,
-    0,
-  ).getTime();
+  const thisYear = new Date(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(
-      target.getHours(),
-    )}:${formatNum(target.getMinutes())}`;
+    return `${TUITranslateService.t('time.昨天')} ${formatNum(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(
-      target.getHours(),
-    )}:${formatNum(target.getMinutes())}`;
+    return `${TUITranslateService.t('time.' + weekday)} ${formatNum(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(
-      target.getHours(),
-    )}:${formatNum(target.getMinutes())}`;
+    return `${target.getMonth() + 1}/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
   } else {
     // Not within this year, display year/mouth/day hour:minute
-    return `${target.getFullYear()}/${
-      target.getMonth() + 1
-    }/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(
-      target.getMinutes(),
-    )}`;
+    return `${target.getFullYear()}/${target.getMonth() + 1}/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
   }
 }
diff --git a/src/TUIKit/components/TUIChat/utils/wordsList.ts b/src/TUIKit/components/TUIChat/utils/wordsList.ts
index 78877f0..6f8933a 100644
--- a/src/TUIKit/components/TUIChat/utils/wordsList.ts
+++ b/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: '熬夜有什么用，又没人陪你聊天，早点休息吧。'
+  }
 ];
diff --git a/src/TUIKit/components/TUIContact/contact-info/contact-info-config.ts b/src/TUIKit/components/TUIContact/contact-info/contact-info-config.ts
index 5918311..d0cca16 100644
--- a/src/TUIKit/components/TUIContact/contact-info/contact-info-config.ts
+++ b/src/TUIKit/components/TUIContact/contact-info/contact-info-config.ts
@@ -1,9 +1,5 @@
 import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-import {
-  CONTACT_INFO_LABEL_POSITION,
-  CONTACT_INFO_MORE_EDIT_TYPE,
-  CONTACT_INFO_BUTTON_TYPE,
-} from '../../../constant';
+import { 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: {
-      item: any;
-      contactInfoData: any;
-      [propsName: string]: any;
-    }) => {
+    editSubmitHandler: (props: { 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: {
-      item: any;
-      contactInfoData: any;
-      [propsName: string]: any;
-    }) => {
+    editSubmitHandler: (props: { 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: {
-      contactInfoData: any;
-      contactInfoMoreList: any;
-      [propsName: string]: any;
-    }) => {
-      joinGroup(
-        props?.contactInfoData?.groupID,
-        props?.contactInfoMoreList[0]?.data,
-      );
-    },
+    onClick: (props: { contactInfoData: any; 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: {
-      contactInfoData: any;
-      contactInfoMoreList: any;
-      [propsName: string]: any;
-    }) => {
+    onClick: (props: { 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: {
-      contactInfoData: any;
-      contactInfoMoreList: any;
-      [propsName: string]: any;
-    }) => {
+    onClick: (props: { 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);
-    },
-  },
+    }
+  }
 };
diff --git a/src/TUIKit/components/TUIContact/contact-info/index.vue b/src/TUIKit/components/TUIContact/contact-info/index.vue
index 6f1adf7..0a91759 100644
--- a/src/TUIKit/components/TUIContact/contact-info/index.vue
+++ b/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
-      v-if="!isPC"
-      :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"
-      >
+    <div v-if="!isPC" :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
-        :class="[
-          'tui-contact-info-header-title',
-          !isPC && 'tui-contact-info-h5-header-title',
-        ]"
-      >
-        {{ TUITranslateService.t("TUIContact.添加好友/群聊") }}
+      <div :class="['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
-        :class="[
-          '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',
-          ]"
-        >
+      <div :class="['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="[
-            'tui-contact-info-basic-text-other',
-            !isPC && 'tui-contact-info-h5-basic-text-other',
-          ]"
+          :class="['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
-        :class="[
-          'tui-contact-info-basic-avatar',
-          !isPC && 'tui-contact-info-h5-basic-avatar',
-        ]"
-        :src="generateAvatar(contactInfoData)"
-      >
+      <img :class="['tui-contact-info-basic-avatar', !isPC && 'tui-contact-info-h5-basic-avatar']" :src="generateAvatar(contactInfoData)" />
     </div>
-    <div
-      v-if="contactInfoMoreList[0]"
-      :class="['tui-contact-info-more', !isPC && 'tui-contact-info-h5-more']"
-    >
+    <div 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
-            ? 'tui-contact-info-more-item-top'
-            : 'tui-contact-info-more-item-left',
+          item.labelPosition === CONTACT_INFO_LABEL_POSITION.TOP ? 'tui-contact-info-more-item-top' : 'tui-contact-info-more-item-left'
         ]"
       >
-        <div
-          :class="[
-            'tui-contact-info-more-item-label',
-            !isPC && 'tui-contact-info-h5-more-item-label',
-          ]"
-        >
+        <div :class="['tui-contact-info-more-item-label', !isPC && 'tui-contact-info-h5-more-item-label']">
           {{ `${TUITranslateService.t(`TUIContact.${item.label}`)}` }}
         </div>
-        <div
-          :class="[
-            'tui-contact-info-more-item-content',
-            !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',
-              ]"
-            >
+        <div :class="['tui-contact-info-more-item-content', !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="[
-                'tui-contact-info-more-item-content-text-icon',
-                !isPC && 'tui-contact-info-h5-more-item-content-text-icon',
-              ]"
+              :class="['tui-contact-info-more-item-content-text-icon', !isPC && 'tui-contact-info-h5-more-item-content-text-icon']"
               @click="setEditing(item)"
             >
-              <Icon
-                :file="editSVG"
-                width="14px"
-                height="14px"
-              />
+              <Icon :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="[
-              'tui-contact-info-more-item-content-input',
-              !isPC && 'tui-contact-info-h5-more-item-content-input',
-            ]"
+            :class="['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="[
-              'tui-contact-info-more-item-content-textarea',
-              !isPC && 'tui-contact-info-h5-more-item-content-textarea',
-            ]"
+            :class="['tui-contact-info-more-item-content-textarea', !isPC && 'tui-contact-info-h5-more-item-content-textarea']"
             confirm-type="done"
           />
-          <div
-            v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.SWITCH"
-            @click="onContactInfoEmitSubmit(item)"
-          >
+          <div v-else-if="item.editType === CONTACT_INFO_MORE_EDIT_TYPE.SWITCH" @click="onContactInfoEmitSubmit(item)">
             <SwitchBar :value="item.data" />
           </div>
         </div>
       </div>
     </div>
-    <div
-      :class="[
-        'tui-contact-info-button',
-        !isPC && 'tui-contact-info-h5-button',
-      ]"
-    >
+    <div :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
-            ? `tui-contact-info-button-item-cancel`
-            : `tui-contact-info-button-item-submit`,
+          item.type === CONTACT_INFO_BUTTON_TYPE.CANCEL ? `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, {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IGroupModel,
-  Friend,
-  FriendApplication,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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 {
-  generateAvatar,
-  generateContactInfoName,
-  generateContactInfoBasic,
-  isFriend,
-  isApplicationType,
-} from '../utils/index';
-import {
-  contactMoreInfoConfig,
-  contactButtonConfig,
-} from './contact-info-config';
+import { generateAvatar, 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 {
-  IBlackListUserItem,
-  IContactInfoMoreItem,
-  IContactInfoButton,
-} from '../../../interface';
-import {
-  CONTACT_INFO_LABEL_POSITION,
-  CONTACT_INFO_MORE_EDIT_TYPE,
-  CONTACT_INFO_BUTTON_TYPE,
-} from '../../../constant';
+import { IBlackListUserItem, 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 =>
-  (contactInfoData.value as IGroupModel)?.groupID ? true : false,
-);
+const isGroup = computed((): boolean => ((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
-    && blackList.value?.findIndex(
-      (item: IBlackListUserItem) =>
-        item?.userID === (contactInfoData.value as IBlackListUserItem)?.userID,
-    ) >= 0
+    !isGroup.value &&
+    blackList.value?.findIndex((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,
-    contactInfoData: contactInfoData.value,
-    isBothFriend: isBothFriend.value,
-    isInBlackList: isInBlackList.value,
-  });
+  item.editSubmitHandler &&
+    item.editSubmitHandler({
+      item,
+      contactInfoData: contactInfoData.value,
+      isBothFriend: isBothFriend.value,
+      isInBlackList: isInBlackList.value
+    });
 };
 
 const onContactInfoButtonClicked = (item: any) => {
-  item.onClick
-  && item.onClick({
-    contactInfoData: contactInfoData.value,
-    contactInfoMoreList: contactInfoMoreList.value,
-  });
-  if (
-    item.key === 'enterGroupConversation'
-    || item.key === 'enterC2CConversation'
-  ) {
+  item.onClick &&
+    item.onClick({
+      contactInfoData: contactInfoData.value,
+      contactInfoMoreList: contactInfoMoreList.value
+    });
+  if (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
-      && !isGroupMember.value
-      && (contactInfoData.value as IGroupModel)?.type !== TUIChatEngine?.TYPES?.GRP_AVCHATROOM)
+      (!isGroup.value && !isBothFriend.value && !isInBlackList.value) ||
+      (isGroup.value && !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
-        = (contactInfoData.value as Friend)?.remark || '';
+      contactMoreInfoConfig.setRemark.data = (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
-      = (contactInfoData.value as FriendApplication)?.wording || '';
+    contactMoreInfoConfig.displayWords.data = (contactInfoData.value as FriendApplication)?.wording || '';
     contactInfoMoreList.value.push(contactMoreInfoConfig.displayWords);
   }
 };
@@ -347,16 +226,9 @@ const generateButton = () => {
     return;
   }
   if (isApplication.value) {
-    if (
-      (contactInfoData.value as FriendApplication)?.type
-      === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
-    ) {
-      contactInfoButtonList?.value?.push(
-        contactButtonConfig.refuseFriendApplication,
-      );
-      contactInfoButtonList?.value?.push(
-        contactButtonConfig.acceptFriendApplication,
-      );
+    if ((contactInfoData.value as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME) {
+      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(
-        contactButtonConfig.enterGroupConversation,
-      );
+      contactInfoButtonList?.value?.push(contactButtonConfig.enterGroupConversation);
     } else if (!isGroup.value && isBothFriend.value) {
       contactInfoButtonList?.value?.push(contactButtonConfig.deleteFriend);
-      contactInfoButtonList?.value?.push(
-        contactButtonConfig.enterC2CConversation,
-      );
+      contactInfoButtonList?.value?.push(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 (
-    contactInfoData.value
-    && contactInfo
-    && JSON.stringify(contactInfoData.value) === JSON.stringify(contactInfo)
-  ) {
+  if (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(
-    contactInfoData.value,
-  );
+  contactInfoBasicList.value = generateContactInfoBasic(contactInfoData.value);
   isBothFriend.value = await isFriend(contactInfoData.value);
   generateMoreInfo();
   generateButton();
diff --git a/src/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue b/src/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue
index c71f2fc..7695341 100644
--- a/src/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue
+++ b/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
-        class="tui-contact-list-card-left-avatar"
-        useSkeletonAnimation
-        :url="generateAvatar(props.item)"
-      />
+      <Avatar 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
-        v-if="otherContentForSow"
-        class="tui-contact-list-card-main-other"
-      >
+      <div v-if="otherContentForSow" class="tui-contact-list-card-main-other">
         {{ otherContentForSow }}
       </div>
     </div>
     <div class="tui-contact-list-card-right">
-      <div
-        v-if="groupTypeForShow"
-        class="tui-contact-list-card-right-group-type"
-      >
+      <div v-if="groupTypeForShow" class="tui-contact-list-card-right-group-type">
         {{ groupTypeForShow }}
       </div>
-      <div
-        v-if="showApplicationStatus"
-        class="tui-contact-list-card-right-application"
-      >
-        <div
-          v-if="showApplicationStatus.style === 'text'"
-          class="tui-contact-list-card-right-application-text"
-        >
+      <div v-if="showApplicationStatus" 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, {
-  TUITranslateService,
-  IGroupModel,
-  FriendApplication,
-  Friend,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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),
-    displayOnlineStatus: false,
-  },
+    item: () => ({}) as IContactInfoType,
+    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_BY_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
   ) {
     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 (
-    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
-  ) {
+  if ((props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME) {
     return {
       style: 'text',
-      label: '等待验证',
+      label: '等待验证'
     };
-  } else if (
-    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
-  ) {
+  } else if ((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
-    && userOnlineStatusMap?.value
-    && (props.item as Friend)?.userID
-    && userOnlineStatusMap.value?.[(props.item as Friend).userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE
+    props.displayOnlineStatus &&
+    userOnlineStatusMap?.value &&
+    (props.item as Friend)?.userID &&
+    userOnlineStatusMap.value?.[(props.item as Friend).userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE
   );
 }
 </script>
diff --git a/src/TUIKit/components/TUIContact/contact-list/index.vue b/src/TUIKit/components/TUIContact/contact-list/index.vue
index a8df01a..7775ca4 100644
--- a/src/TUIKit/components/TUIContact/contact-list/index.vue
+++ b/src/TUIKit/components/TUIContact/contact-list/index.vue
@@ -1,30 +1,13 @@
 <template>
-  <ul
-    v-if="!contactSearchingStatus"
-    :class="['tui-contact-list', !isPC && 'tui-contact-list-h5']"
-  >
-    <li
-      v-for="(contactListObj, key) in contactListMap"
-      :key="key"
-      class="tui-contact-list-item"
-    >
-      <header
-        class="tui-contact-list-item-header"
-        @click="toggleCurrentContactList(key)"
-      >
+  <ul v-if="!contactSearchingStatus" :class="['tui-contact-list', !isPC && 'tui-contact-list-h5']">
+    <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
-            :file="currentContactListKey === key ? downSVG : rightSVG"
-            width="16px"
-            height="16px"
-          />
+          <Icon :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
-            v-if="contactListObj.unreadCount"
-            class="tui-contact-list-item-header-right-unread"
-          >
+          <span v-if="contactListObj.unreadCount" class="tui-contact-list-item-header-right-unread">
             {{ contactListObj.unreadCount }}
           </span>
         </div>
@@ -46,19 +29,9 @@
       </ul>
     </li>
   </ul>
-  <ul
-    v-else
-    class="tui-contact-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"
-      >
+  <ul v-else class="tui-contact-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
-            :item="listItem"
-            :displayOnlineStatus="false"
-          />
+          <ContactListItem :item="listItem" :displayOnlineStatus="false" />
         </div>
       </div>
     </li>
-    <div
-      v-if="isContactSearchNoResult"
-      class="tui-contact-search-list-default"
-    >
-      {{ TUITranslateService.t("TUIContact.无搜索结果") }}
+    <div v-if="isContactSearchNoResult" 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 {
-  IContactList,
-  IContactSearchResult,
-  IBlackListUserItem,
-  IUserStatus,
-  IUserStatusMap,
-  IContactInfoType,
-} from '../../../interface';
+import { 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 (
-    !contactSearchResult?.value?.user?.list[0]
-    && !contactSearchResult?.value?.group?.list[0]
-  );
+  return !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 (
-    !(currentContactInfo.value as Friend)?.userID
-    && !(currentContactInfo.value as IGroupModel)?.groupID
-  ) {
+  if (!(currentContactInfo.value as Friend)?.userID && !(currentContactInfo.value as IGroupModel)?.groupID) {
     return;
   }
   if (type === currentContactListKey.value || contactSearchingStatus.value) {
-    currentContactInfo.value = list?.find(
-      (item: any) =>
-        (item?.groupID && item?.groupID === (currentContactInfo.value as IGroupModel)?.groupID) || (item?.userID && item?.userID === (currentContactInfo.value as Friend)?.userID),
-    ) || {} as IContactInfoType;
+    currentContactInfo.value =
+      list?.find(
+        (item: any) =>
+          (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) {
diff --git a/src/TUIKit/components/TUIContact/contact-search/index.vue b/src/TUIKit/components/TUIContact/contact-search/index.vue
index 99dcc50..cd47fa4 100644
--- a/src/TUIKit/components/TUIContact/contact-search/index.vue
+++ b/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="[
-        'tui-contact-search-header',
-        !isPC && 'tui-contact-search-h5-header',
-        isSearching && 'tui-contact-searching-h5-header',
-      ]"
+      :class="['tui-contact-search-header', !isPC && 'tui-contact-search-h5-header', isSearching && 'tui-contact-searching-h5-header']"
       @click="changeContactSearchingStatus(true)"
     >
       <div
-        :class="[
-          'tui-contact-search-header-icon',
-          !isPC && 'tui-contact-search-h5-header-icon',
-        ]"
+        :class="['tui-contact-search-header-icon', !isPC && 'tui-contact-search-h5-header-icon']"
         @click.stop="changeContactSearchingStatus(!isSearching)"
       >
-        <Icon
-          :file="isSearching ? backSVG : addSVG"
-          :width="isSearching ? '20px' : '14px'"
-          :height="isSearching ? '20px' : '14px'"
-        />
+        <Icon :file="isSearching ? backSVG : addSVG" :width="isSearching ? '20px' : '14px'" :height="isSearching ? '20px' : '14px'" />
       </div>
 
-      <div
-        :class="[
-          'tui-contact-search-header-title',
-          !isPC && 'tui-contact-search-h5-header-title',
-        ]"
-      >
-        {{ TUITranslateService.t("TUIContact.添加好友/群聊") }}
+      <div :class="['tui-contact-search-header-title', !isPC && 'tui-contact-search-h5-header-title']">
+        {{ TUITranslateService.t('TUIContact.添加好友/群聊') }}
       </div>
     </div>
-    <div
-      v-if="isSearching"
-      :class="[
-        'tui-contact-search-main',
-        !isPC && 'tui-contact-search-h5-main',
-      ]"
-    >
+    <div 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
-        class="tui-contact-search-main-cancel"
-        @click="isSearching = false"
-      >
-        {{ TUITranslateService.t("取消") }}
+      />
+      <div class="tui-contact-search-main-cancel" @click="isSearching = false">
+        {{ TUITranslateService.t('取消') }}
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ref, watch } from '../../../adapter-vue';
-import {
-  TUITranslateService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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(
-      StoreName.CUSTOM,
-      'currentContactSearchResult',
-      searchResult.value,
-    );
+    TUIStore.update(StoreName.CUSTOM, 'currentContactSearchResult', searchResult.value);
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 );
 watch(
   () => isSearching.value,
   () => {
-    TUIStore.update(
-      StoreName.CUSTOM,
-      'currentContactSearchingStatus',
-      isSearching.value,
-    );
+    TUIStore.update(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;
diff --git a/src/TUIKit/components/TUIContact/index.vue b/src/TUIKit/components/TUIContact/index.vue
index 9b4292f..db05c1f 100644
--- a/src/TUIKit/components/TUIContact/index.vue
+++ b/src/TUIKit/components/TUIContact/index.vue
@@ -1,17 +1,11 @@
 <template>
   <SelectFriend v-if="isShowSelectFriend" />
-  <div
-    v-else-if="isShowContactList"
-    :class="['tui-contact', !isPC && 'tui-contact-h5']"
-  >
+  <div 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
-      v-if="isShowContactInfo"
-      :class="['tui-contact-right', !isPC && 'tui-contact-h5-right']"
-    >
+    <div 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
-  && TUIGlobal?.navigateTo({
-    url: '/TUIKit/components/TUIChat/index',
-  });
+  isUniFrameWork &&
+    TUIGlobal?.navigateTo({
+      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%;
diff --git a/src/TUIKit/components/TUIContact/select-friend/index.vue b/src/TUIKit/components/TUIContact/select-friend/index.vue
index 7e3f821..b24055c 100644
--- a/src/TUIKit/components/TUIContact/select-friend/index.vue
+++ b/src/TUIKit/components/TUIContact/select-friend/index.vue
@@ -9,12 +9,7 @@
   />
 </template>
 <script lang="ts" setup>
-import {
-  TUIFriendService,
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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) => {
-    friendList.value = res.data.map((item: any) => item.profile);
-    userList.value = friendList.value;
-  }).catch((err: any) => {
-    console.warn('getFriendList error:', err);
-  });
+  TUIFriendService.getFriendList()
+    .then((res: any) => {
+      friendList.value = res.data.map((item: any) => item.profile);
+      userList.value = friendList.value;
+    })
+    .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 {
diff --git a/src/TUIKit/components/TUIContact/server.ts b/src/TUIKit/components/TUIContact/server.ts
index f788191..4053372 100644
--- a/src/TUIKit/components/TUIContact/server.ts
+++ b/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({
-        url: '/TUIKit/components/TUIContact/index',
-      });
+      isUniFrameWork &&
+        TUIGlobal?.reLaunch({
+          url: '/TUIKit/components/TUIContact/index'
+        });
     }
   }
 }
diff --git a/src/TUIKit/components/TUIContact/utils/index.ts b/src/TUIKit/components/TUIContact/utils/index.ts
index fa67908..755f936 100644
--- a/src/TUIKit/components/TUIContact/utils/index.ts
+++ b/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?.profile?.avatar
-    || (item?.groupID && 'https://web.sdk.qcloud.com/im/assets/images/Public.svg')
-    || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+    item?.avatar ||
+    item?.profile?.avatar ||
+    (item?.groupID && 'https://web.sdk.qcloud.com/im/assets/images/Public.svg') ||
+    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
   );
 };
 
 export const generateName = (item: any): string => {
-  return (
-    item?.remark
-    || item?.name
-    || item?.profile?.nick
-    || item?.nick
-    || item?.groupID
-    || item?.userID
-    || ''
-  );
+  return item?.remark || item?.name || item?.profile?.nick || item?.nick || item?.groupID || item?.userID || '';
 };
 
 export const generateContactInfoName = (item: any): string => {
-  return (
-    item?.name
-    || item?.profile?.nick
-    || item?.nick
-    || item?.groupID
-    || item?.userID
-    || ''
-  );
+  return 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 = (
-  contactInfo: any,
-): any[] => {
+export const generateContactInfoBasic = (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 (
-    info?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_TO_ME
-    || info?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
-  );
+  return 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
-    ? `GROUP${item?.groupID}`
-    : `C2C${item?.userID}`;
-  TUIConversationService.switchConversation(conversationID).catch(
-    (error: any) => {
-      console.warn('switch conversation failed:', error);
-      Toast({
-        message: TUITranslateService.t('TUIContact.进入会话失败'),
-        type: TOAST_TYPE.ERROR,
-      });
-    },
-  );
+  const conversationID = item?.groupID ? `GROUP${item?.groupID}` : `C2C${item?.userID}`;
+  TUIConversationService.switchConversation(conversationID).catch((error: any) => {
+    console.warn('switch conversation failed:', 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 = (
-  userID: string,
-  successCallBack?: () => void,
-) => {
+export const removeFromBlacklist = (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
       });
     });
 };
diff --git a/src/TUIKit/components/TUIConversation/actions-menu/index.vue b/src/TUIKit/components/TUIConversation/actions-menu/index.vue
index b9c4a48..b1f2608 100644
--- a/src/TUIKit/components/TUIConversation/actions-menu/index.vue
+++ b/src/TUIKit/components/TUIConversation/actions-menu/index.vue
@@ -1,54 +1,44 @@
 <template>
-  <Overlay
-    :maskColor="'transparent'"
-    @onOverlayClick="() => emits('closeConversationActionMenu')"
-  >
+  <Overlay :maskColor="'transparent'" @onOverlayClick="() => emits('closeConversationActionMenu')">
     <div
       id="conversation-actions-menu"
       ref="actionsMenuDomRef"
-      :class="[
-        isPC && 'actions-menu-pc',
-        'actions-menu',
-        !isHiddenActionsMenu && 'cancel-hidden',
-      ]"
+      :class="[isPC && 'actions-menu-pc', 'actions-menu', !isHiddenActionsMenu && 'cancel-hidden']"
       :style="{
         top: `${_actionsMenuPosition.top}px`,
-        left: `${_actionsMenuPosition.left}px`,
+        left: `${_actionsMenuPosition.left}px`
       }"
     >
-      <div
-        :class="['actions-menu-item']"
-        @click.stop="deleteConversation()"
-      >
-        {{ TUITranslateService.t("TUIConversation.删除会话") }}
+      <div :class="['actions-menu-item']" @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 {
-  ref,
-  nextTick,
-  onMounted,
-  computed,
-  getCurrentInstance,
-} from '../../../adapter-vue';
-import TUIChatEngine, {
-  IConversationModel,
-  TUIStore,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { ref, 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(
-  props.selectedConversation?.conversationID || '',
-);
+const currentConversation = TUIStore.getConversationModel(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:
-                  props.actionsMenuPosition.top
-                  - (props.actionsMenuPosition.conversationHeight || 0)
-                  - data.height,
+                top: 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
-          = props.actionsMenuPosition.top
-          - (props.actionsMenuPosition.conversationHeight || 0)
-          - rect.height;
+        _actionsMenuPosition.value.top = props.actionsMenuPosition.top - (props.actionsMenuPosition.conversationHeight || 0) - rect.height;
       }
       isHiddenActionsMenu.value = false;
     }
diff --git a/src/TUIKit/components/TUIConversation/conversation-header/index.vue b/src/TUIKit/components/TUIConversation/conversation-header/index.vue
index 4019986..e7a34c2 100644
--- a/src/TUIKit/components/TUIConversation/conversation-header/index.vue
+++ b/src/TUIKit/components/TUIConversation/conversation-header/index.vue
@@ -1,54 +1,20 @@
 <template>
-  <div
-    :ref="convHeaderRef"
-    class="tui-conversation-header"
-  >
-    <ul
-      v-if="menuList.length > 0"
-      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"
-          />
+  <div :ref="convHeaderRef" class="tui-conversation-header">
+    <ul v-if="menuList.length > 0" 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
-      v-if="showChildren.length > 0"
-      class="tui-conversation-header-children list"
-    >
-      <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"
-          />
+    <ul v-if="showChildren.length > 0" class="tui-conversation-header-children list">
+      <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>
diff --git a/src/TUIKit/components/TUIConversation/conversation-header/server.ts b/src/TUIKit/components/TUIConversation/conversation-header/server.ts
index 6f2576c..bdc5aef 100644
--- a/src/TUIKit/components/TUIConversation/conversation-header/server.ts
+++ b/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 [{
-        text: TUITranslateService.t('TUIConversation.发起会话'),
-        data: {
-          name: 'all',
-          children: list,
-        },
-      }];
+      return [
+        {
+          text: TUITranslateService.t('TUIConversation.发起会话'),
+          data: {
+            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
     });
   }
 }
diff --git a/src/TUIKit/components/TUIConversation/conversation-list/index.vue b/src/TUIKit/components/TUIConversation/conversation-list/index.vue
index a0a8237..44e3371 100644
--- a/src/TUIKit/components/TUIConversation/conversation-list/index.vue
+++ b/src/TUIKit/components/TUIConversation/conversation-list/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="conversationListInnerDomRef"
-    class="tui-conversation-list"
-  >
+  <div 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="[
-        'tui-conversation-content',
-        isMobile && 'tui-conversation-content-h5 disable-select',
-      ]"
+      :class="['tui-conversation-content', isMobile && 'tui-conversation-content-h5 disable-select']"
     >
       <div
         :class="[
           isPC && 'isPC',
           'tui-conversation-item',
-          currentConversationID === conversation.conversationID &&
-            'tui-conversation-item-selected',
-          conversation.isPinned && 'tui-conversation-item-pinned',
+          currentConversationID === conversation.conversationID && 'tui-conversation-item-selected',
+          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
-            useSkeletonAnimation
-            :url="conversation.getAvatar()"
-            size="30px"
-          />
+          <Avatar useSkeletonAnimation :url="conversation.getAvatar()" size="30px" />
           <div
             v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)"
             :class="[
               'online-status',
               Object.keys(userOnlineStatusMap).length > 0 &&
-                Object.keys(userOnlineStatusMap).includes(
-                  conversation.userProfile.userID
-                ) &&
-                userOnlineStatusMap[conversation.userProfile.userID]
-                  .statusType === 1
+              Object.keys(userOnlineStatusMap).includes(conversation.userProfile.userID) &&
+              userOnlineStatusMap[conversation.userProfile.userID].statusType === 1
                 ? 'online-status-online'
-                : 'online-status-offline',
+                : 'online-status-offline'
             ]"
           />
-          <span
-            v-if="conversation.unreadCount > 0 && !conversation.isMuted"
-            class="num"
-          >
-            {{
-              conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
-            }}
+          <span v-if="conversation.unreadCount > 0 && !conversation.isMuted" class="num">
+            {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
           </span>
-          <span
-            v-if="conversation.unreadCount > 0 && conversation.isMuted"
-            class="num-notify"
-          />
+          <span 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"
-                class="middle-box-draft"
-              >{{ TUITranslateService.t('TUIChat.[草稿]') }}</span>
-              <span
-                v-else-if="
-                  conversation.type === 'GROUP' &&
-                    conversation.groupAtInfoList &&
-                    conversation.groupAtInfoList.length > 0
-                "
+                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>
-            <Icon
-              v-if="conversation.isMuted"
-              :file="muteIcon"
-            />
+            <span class="time">{{ conversation.getLastMessage('time') }}</span>
+            <Icon v-if="conversation.isMuted" :file="muteIcon" />
           </div>
         </div>
       </div>
@@ -111,13 +82,7 @@ interface IUserStatusMap {
 }
 
 import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
-import TUIChatEngine, {
-  TUIStore,
-  StoreName,
-  TUIConversationService,
-  TUITranslateService,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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 (
-    displayOnlineStatus.value
-    && conversation.type === TUIChatEngine.TYPES.CONV_C2C
-  );
+  return displayOnlineStatus.value && conversation.type === TUIChatEngine.TYPES.CONV_C2C;
 };
 
-const showConversationActionMenu = (
-  event: Event,
-  conversation: IConversationModel,
-  index: number,
-  isContextMenuEvent?: boolean,
-) => {
+const showConversationActionMenu = (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 (
-    lastestOpenActionsMenuTime
-    && Date.now() - lastestOpenActionsMenuTime > 300
-  ) {
+  if (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) => {
-      if (data) {
-        actionsMenuPosition.value = {
-          // The uni-page-head of uni-h5 is not considered a member of the viewport, so the height of the head is manually increased.
-          top: data.bottom + (isH5 ? 44 : 0),
-          // @ts-expect-error in uniapp event has touches property
-          left: event.touches[0].pageX,
-          conversationHeight: data.height,
-        };
-        isShowOverlay.value = true;
-      }
-    }).exec();
+    query
+      .select(`#convlistitem-${index}`)
+      .boundingClientRect((data) => {
+        if (data) {
+          actionsMenuPosition.value = {
+            // The uni-page-head of uni-h5 is not considered a member of the viewport, so the height of the head is manually increased.
+            top: data.bottom + (isH5 ? 44 : 0),
+            // @ts-expect-error in uniapp event has touches property
+            left: event.touches[0].pageX,
+            conversationHeight: data.height
+          };
+          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(
-      (obj, [key, value]) => {
-        obj[key] = value;
-        return obj;
-      },
-      {} as IUserStatusMap,
-    );
+    userOnlineStatusMap.value = [...list.entries()].reduce((obj, [key, value]) => {
+      obj[key] = value;
+      return obj;
+    }, {} 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-user-select:none;
-  -khtml-user-select:none;
-  -moz-user-select:none;
-  -ms-user-select:none;
-  user-select:none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 </style>
diff --git a/src/TUIKit/components/TUIConversation/conversation-network/index.vue b/src/TUIKit/components/TUIConversation/conversation-network/index.vue
index e2a473f..3e3cf2e 100644
--- a/src/TUIKit/components/TUIConversation/conversation-network/index.vue
+++ b/src/TUIKit/components/TUIConversation/conversation-network/index.vue
@@ -1,32 +1,21 @@
 <template>
-  <div
-    v-if="isNotNetwork"
-    class="network"
-  >
+  <div 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, {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
-import {
-  ref,
-} from '../../../adapter-vue';
+import TUIChatEngine, { TUIStore, 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>
 
diff --git a/src/TUIKit/components/TUIConversation/index.ts b/src/TUIKit/components/TUIConversation/index.ts
index c20aa30..d1b6201 100644
--- a/src/TUIKit/components/TUIConversation/index.ts
+++ b/src/TUIKit/components/TUIConversation/index.ts
@@ -1,5 +1,5 @@
-import TUIConversation from "./index.vue";
-import TUIConversationServer from "./server";
+import TUIConversation from './index.vue';
+import TUIConversationServer from './server';
 new TUIConversationServer();
 
 export default TUIConversation;
diff --git a/src/TUIKit/components/TUIConversation/index.vue b/src/TUIKit/components/TUIConversation/index.vue
index 3dc193b..5554189 100644
--- a/src/TUIKit/components/TUIConversation/index.vue
+++ b/src/TUIKit/components/TUIConversation/index.vue
@@ -1,12 +1,6 @@
 <template>
-  <div
-    class="tui-conversation"
-    @click="handleClickConv"
-  >
-    <ConversationHeader
-      v-if="isShowConversationHeader"
-      ref="headerRef"
-    />
+  <div class="tui-conversation" @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) => {
diff --git a/src/TUIKit/components/TUIConversation/server.ts b/src/TUIKit/components/TUIConversation/server.ts
index e5e8413..a5606f1 100644
--- a/src/TUIKit/components/TUIConversation/server.ts
+++ b/src/TUIKit/components/TUIConversation/server.ts
@@ -1,10 +1,5 @@
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import {
-  TUITranslateService,
-  TUIConversationService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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'
         });
       }
     }
diff --git a/src/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts b/src/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts
index 9eba842..f0d86c2 100644
--- a/src/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts
+++ b/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 {
-  groupIntroConfig,
-  findGroupIntroConfig,
-};
+export { groupIntroConfig, findGroupIntroConfig };
diff --git a/src/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue b/src/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue
index 3c0a88d..b40ba3c 100644
--- a/src/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue
+++ b/src/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue
@@ -1,34 +1,18 @@
 <template>
   <ul class="group-introduction-list select">
-    <li
-      v-for="(item, index) in type"
-      :key="index"
-      class="select-item"
-      :class="[selectType === item.type && 'selected']"
-      @click="selected(item)"
-    >
+    <li 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
-              class="icon"
-              :file="item.icon"
-            />
+            <Icon class="icon" :file="item.icon" />
             <span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
           </aside>
-          <Icon
-            v-if="selectType === item.type"
-            :file="selectedIcon"
-          />
+          <Icon v-if="selectType === item.type" :file="selectedIcon" />
         </div>
         <span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span>
-        <a
-          class="link"
-          :href="documentLink.product.url"
-          target="_blank"
-          @click="openUrl(documentLink.product.url)"
-        >{{
-          TUITranslateService.t(`TUIGroup.${item.src}`) }}</a>
+        <a class="link" :href="documentLink.product.url" 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>
diff --git a/src/TUIKit/components/TUIGroup/create-group/index.vue b/src/TUIKit/components/TUIGroup/create-group/index.vue
index 6e93700..b85e3f9 100644
--- a/src/TUIKit/components/TUIGroup/create-group/index.vue
+++ b/src/TUIKit/components/TUIGroup/create-group/index.vue
@@ -1,54 +1,23 @@
 <template>
-  <Dialog
-    :show="true"
-    :isH5="!isPC"
-    :isHeaderShow="false"
-    :isFooterShow="false"
-    :background="false"
-    @update:show="closeCreated"
-  >
-    <div
-      class="group"
-      :class="[!isPC ? 'group-h5' : '']"
-    >
+  <Dialog :show="true" :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
-            :file="isPC ? closeIcon : backIcon"
-            class="icon-close"
-            size="16px"
-            @onClick="closeCreated"
-          />
+          <Icon :file="isPC ? closeIcon : backIcon" class="icon-close" size="16px" @onClick="closeCreated" />
           <h1 class="group-box-header-title">
             {{ headerTitle }}
           </h1>
         </header>
-        <ul
-          v-if="!groupInfo.isEdit"
-          class="group-list"
-        >
+        <ul 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
-              v-for="(item, index) in createInfo"
-              :key="index"
-              class="group-list-item"
-            >
+            <li v-for="(item, index) in createInfo" :key="index" class="group-list-item">
               <label class="group-list-item-label">{{ item.name }}</label>
-              <input
-                v-if="isPC"
-                v-model="groupInfo.profile[item.key]"
-                type="text"
-                :placeholder="item.placeholder"
-              >
-              <span
-                v-else
-                class="group-h5-list-item-content"
-                @click="edit(item.key)"
-              >
+              <input v-if="isPC" 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
-                  v-if="isPC"
-                  :groupType="groupInfo.profile.type"
-                  @selectType="selected"
-                />
-                <span
-                  v-else
-                  class="group-h5-list-item-content"
-                  @click="edit('type')"
-                >
+                <GroupIntroduction v-if="isPC" :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
-                v-if="!isPC"
-                class="group-h5-list-item-introduction"
-              >
+              <article v-if="!isPC" class="group-h5-list-item-introduction">
                 <label class="introduction-name">{{ groupTypeDetail.label }}：</label>
                 <span class="introduction-detail">{{ groupTypeDetail.detail }}</span>
-                <a
-                  :href="documentLink.product.url"
-                  target="view_window"
-                >
+                <a :href="documentLink.product.url" target="view_window">
                   {{ TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`) }}
                 </a>
               </article>
@@ -87,37 +42,21 @@
           </ul>
         </ul>
         <!-- Edit Group Name -->
-        <div
-          v-else
-          class="group-list group-list-edit"
-        >
+        <div 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
-            v-if="isPC && !groupInfo.isEdit"
-            class="btn-default"
-            @click="closeCreated"
-          >
+          <button v-if="isPC && !groupInfo.isEdit" class="btn-default" @click="closeCreated">
             {{ TUITranslateService.t('TUIGroup.取消') }}
           </button>
-          <button
-            class="btn-submit"
-            :disabled="submitDisabledStatus"
-            @click="submit"
-          >
+          <button class="btn-submit" :disabled="submitDisabledStatus" @click="submit">
             {{ TUITranslateService.t('TUIGroup.确认') }}
           </button>
         </footer>
@@ -126,12 +65,7 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import TUIChatEngine, {
-  TUITranslateService,
-  TUIGroupService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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
-    ? [groupNameInput]
-    : [groupNameInput, groupIDInput];
+  return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY ? [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>
diff --git a/src/TUIKit/components/TUIGroup/index.vue b/src/TUIKit/components/TUIGroup/index.vue
index 02a005c..2247bf3 100644
--- a/src/TUIKit/components/TUIGroup/index.vue
+++ b/src/TUIKit/components/TUIGroup/index.vue
@@ -6,10 +6,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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 {
diff --git a/src/TUIKit/components/TUIGroup/manage-group/index.vue b/src/TUIKit/components/TUIGroup/manage-group/index.vue
index 3832e73..e1f91e0 100644
--- a/src/TUIKit/components/TUIGroup/manage-group/index.vue
+++ b/src/TUIKit/components/TUIGroup/manage-group/index.vue
@@ -1,36 +1,16 @@
 <template>
-  <div
-    ref="manageRef"
-    class="manage"
-  >
-    <header
-      v-if="!isUniFrameWork || currentTab ==='admin'"
-      class="manage-header"
-    >
-      <Icon
-        :file="backSVG"
-        @onClick="back"
-      />
+  <div ref="manageRef" class="manage">
+    <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
-      v-if="!currentTab || (isUniFrameWork && currentTab != 'admin')"
-      class="main"
-    >
-      <ManageName
-        class="space-top"
-        :isAuthor="isOwner || isAdmin || isWorkGroup"
-        :data="currentGroup"
-        @update="updateProfile"
-      />
+    <main v-if="!currentTab || (isUniFrameWork && currentTab != 'admin')" class="main">
+      <ManageName class="space-top" :isAuthor="isOwner || isAdmin || isWorkGroup" :data="currentGroup" @update="updateProfile" />
       <div class="user-info space-top">
-        <header
-          class="user-info-header"
-          @click="setCurrentTab('member')"
-        >
+        <header 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
-            v-for="(item, index) in groupMemberList.slice(0, showUserNum)"
-            :key="index"
-            class="user-info-list-item"
-          >
-            <dt
-              class="user-info-list-item-main"
-              @click="handleMemberProfileShow(item)"
-            >
+          <dl v-for="(item, index) in groupMemberList.slice(0, showUserNum)" :key="index" class="user-info-list-item">
+            <dt class="user-info-list-item-main" @click="handleMemberProfileShow(item)">
               <img
                 class="avatar"
-                :src="
-                  item.avatar ||
-                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-                "
+                :src="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
-            v-if="isShowAddMember"
-            class="user-info-list-item"
-          >
-            <dt
-              class="avatar"
-              @click="toggleMask('add')"
-            >
-              +
-            </dt>
+          <dl v-if="isShowAddMember" class="user-info-list-item">
+            <dt class="avatar" @click="toggleMask('add')">+</dt>
           </dl>
-          <dl
-            v-if="currentSelfRole === 'Owner'"
-            class="user-info-list-item"
-          >
-            <dt
-              class="avatar"
-              @click="toggleMask('remove')"
-            >
-              -
-            </dt>
+          <dl v-if="currentSelfRole === 'Owner'" class="user-info-list-item">
+            <dt class="avatar" @click="toggleMask('remove')">-</dt>
           </dl>
         </ol>
       </div>
-      <ul
-        class="content list space-top"
-        @click="editLableName = ''"
-      >
-        <li
-          class="list-item"
-          @click="setCurrentTab('notification')"
-        >
+      <ul class="content list space-top" @click="editLableName = ''">
+        <li class="list-item" @click="setCurrentTab('notification')">
           <aside class="aside">
-            <label class="label">{{
-              TUITranslateService.t(`TUIGroup.群公告`)
-            }}</label>
+            <label class="label">{{ TUITranslateService.t(`TUIGroup.群公告`) }}</label>
             <article class="article">
               {{ currentGroup.notification }}
             </article>
           </aside>
-          <Icon
-            :file="rightIcon"
-            class="end"
-          />
+          <Icon :file="rightIcon" class="end" />
         </li>
-        <li
-          v-if="(isAdmin || isOwner) && isSetMuteTime"
-          class="list-item"
-          @click="setCurrentTab('admin')"
-        >
-          <label class="label">{{
-            TUITranslateService.t(`TUIGroup.群管理`)
-          }}</label>
+        <li v-if="(isAdmin || isOwner) && isSetMuteTime" class="list-item" @click="setCurrentTab('admin')">
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.群管理`) }}</label>
           <Icon :file="rightIcon" />
         </li>
         <li class="list-item">
-          <label class="label">{{
-            TUITranslateService.t(`TUIGroup.群ID`)
-          }}</label>
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.群ID`) }}</label>
           <div class="groupID">
             <span class="span">{{ currentGroupID }}</span>
           </div>
         </li>
         <li class="list-item">
-          <label class="label">{{
-            TUITranslateService.t(`TUIGroup.群头像`)
-          }}</label>
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.群头像`) }}</label>
           <img
             class="avatar"
-            :src="
-              currentGroup.avatar ||
-                'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
-            "
+            :src="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">{{
-            TUITranslateService.t(`TUIGroup.群类型`)
-          }}</label>
-          <span class="span">{{
-            TUITranslateService.t(`TUIGroup.${typeName[currentGroup.type]}`)
-          }}</span>
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.群类型`) }}</label>
+          <span class="span">{{ TUITranslateService.t(`TUIGroup.${typeName[currentGroup.type]}`) }}</span>
         </li>
         <li class="list-item">
-          <label class="label">{{
-            TUITranslateService.t(`TUIGroup.加群方式`)
-          }}</label>
-          <span class="span">{{
-            TUITranslateService.t(
-              `TUIGroup.${typeName[currentGroup.joinOption]}`
-            )
-          }}</span>
+          <label class="label">{{ TUITranslateService.t(`TUIGroup.加群方式`) }}</label>
+          <span class="span">{{ TUITranslateService.t(`TUIGroup.${typeName[currentGroup.joinOption]}`) }}</span>
         </li>
       </ul>
       <ul class="footer list space-top">
-        <li
-          v-if="currentSelfRole === 'Owner' && groupMemberList.length > 1"
-          class="list-item"
-          @click.stop="toggleMask('changeOwner')"
-        >
+        <li v-if="currentSelfRole === 'Owner' && groupMemberList.length > 1" class="list-item" @click.stop="toggleMask('changeOwner')">
           {{ TUITranslateService.t(`TUIGroup.转让群组`) }}
         </li>
-        <li
-          v-if="canIDissmissGroup"
-          class="list-item"
-          @click.stop="dismissGroup(currentGroup)"
-        >
+        <li v-if="canIDissmissGroup" class="list-item" @click.stop="dismissGroup(currentGroup)">
           {{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
         </li>
-        <li
-          v-else
-          class="list-item"
-          @click.stop="quitGroup(currentGroup)"
-        >
+        <li v-else class="list-item" @click.stop="quitGroup(currentGroup)">
           {{ TUITranslateService.t(`TUIGroup.退出群组`) }}
         </li>
       </ul>
@@ -195,11 +103,7 @@
       @handleMemberProfileShow="handleMemberProfileShow"
       @close="setCurrentTab('')"
     />
-    <ManageProfile
-      v-if="currentTab === 'profile'"
-      :userInfo="currentMember"
-      @close="setCurrentTab('')"
-    />
+    <ManageProfile 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
-      :show="mask"
-      @update:show="(e) => (mask = e)"
-    >
+    <MaskLayer :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
-        v-if="deletedUserList.length === 1"
-        class="del-dialog-title"
-      >
+      <p v-if="deletedUserList.length === 1" class="del-dialog-title">
         {{ TUITranslateService.t(`TUIGroup.确定从群聊中删除该成员？`) }}
       </p>
-      <p
-        v-if="deletedUserList.length > 1"
-        class="del-dialog-title"
-      >
+      <p v-if="deletedUserList.length > 1" class="del-dialog-title">
         {{ TUITranslateService.t(`TUIGroup.确定从群聊中删除所选成员？`) }}
       </p>
     </Dialog>
   </div>
 </template>
 <script lang="ts" setup>
-import {
-  ref,
-  computed,
-  watchEffect,
-  onMounted,
-  nextTick,
-} from '../../../adapter-vue';
+import { 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(
-      (item: any) => item?.muteUntil * 1000 - time > 0,
-    );
-  },
+    member.value.muteMember = Array.from(memberList).filter((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(
-        (item: any) => item.userID !== currentGroup?.value?.selfInfo?.userID,
-      );
+      transferList.value = groupMemberList.value.filter((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(
-    (item: any) =>
-      !userInfo.value.list.some(
-        (infoItem: any) => infoItem.userID === item.userID,
-      ),
-  );
+  return friendList.filter((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 (
-    userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER
-    && groupType !== TUIChatEngine.TYPES.GRP_WORK
-  );
+  return 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(
-          (item: any) => item.userID !== imResponse.data[0]?.userID,
-        );
+        transferList.value = transferList.value.filter((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(
-          (item: any) => item.userID !== imResponse?.data?.memberList[0]?.userID,
-        );
+        transferList.value = transferList.value.filter((item: any) => item.userID !== imResponse?.data?.memberList[0]?.userID);
         if (imResponse?.data?.memberList.length) {
-          transferList.value = [
-            ...transferList.value,
-            ...imResponse.data.memberList,
-          ];
+          transferList.value = [...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);
 };
diff --git a/src/TUIKit/components/TUIGroup/manage-group/manage-admin.vue b/src/TUIKit/components/TUIGroup/manage-group/manage-admin.vue
index 588e36a..c5e786c 100644
--- a/src/TUIKit/components/TUIGroup/manage-group/manage-admin.vue
+++ b/src/TUIKit/components/TUIGroup/manage-group/manage-admin.vue
@@ -5,123 +5,66 @@
         {{ TUITranslateService.t(`TUIGroup.群管理员`) }}
       </div>
       <ul class="admin-manage-list">
-        <li
-          v-for="(item, index) in memberAdmin.admin"
-          :key="index"
-          class="admin-manage-list-item"
-        >
+        <li v-for="(item, index) in memberAdmin.admin" :key="index" class="admin-manage-list-item">
           <div class="item-main">
             <img
               class="item-main-avatar"
-              :src="
-                item.avatar ||
-                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-              "
+              :src="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
-            class="item-main"
-            @click="addAdmin"
-          >
-            <Icon
-              :file="plusSVG"
-              width="16px"
-              height="16px"
-            />
+          <div class="item-main" @click="addAdmin">
+            <Icon :file="plusSVG" width="16px" height="16px" />
           </div>
         </li>
         <li class="admin-manage-list-item">
-          <div
-            v-if="memberAdmin.admin.length > 0"
-            class="item-main"
-            @click="removeAdmin"
-          >
-            <Icon
-              :file="minusSVG"
-              width="16px"
-              height="16px"
-            />
+          <div v-if="memberAdmin.admin.length > 0" class="item-main" @click="removeAdmin">
+            <Icon :file="minusSVG" width="16px" height="16px" />
           </div>
         </li>
       </ul>
     </div>
-    <div
-      v-if="isAdminSetMuteTime"
-      class="admin-mute-all"
-    >
+    <div 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
-        :open="currentGroupAdmin.muteAllMembers"
-        @change="setAllMuteTime"
-      />
+      <Slider :open="currentGroupAdmin.muteAllMembers" @change="setAllMuteTime" />
     </div>
-    <div
-      v-if="isAdminSetMuteTime"
-      class="admin-mute"
-    >
+    <div v-if="isAdminSetMuteTime" class="admin-mute">
       <div class="admin-mute-header">
         {{ TUITranslateService.t(`TUIGroup.单独禁言人员`) }}
       </div>
       <ul class="admin-mute-list">
-        <li
-          v-for="(item, index) in memberAdmin.muteMember"
-          :key="index"
-          class="admin-mute-list-item"
-        >
+        <li v-for="(item, index) in memberAdmin.muteMember" :key="index" class="admin-mute-list-item">
           <div class="item-main">
             <img
               class="item-main-avatar"
-              :src="
-                item.avatar ||
-                  'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-              "
+              :src="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
-            class="item-main"
-            @click="addMute"
-          >
-            <Icon
-              :file="plusSVG"
-              width="16px"
-              height="16px"
-            />
+          <div class="item-main" @click="addMute">
+            <Icon :file="plusSVG" width="16px" height="16px" />
           </div>
         </li>
         <li class="admin-mute-list-item">
-          <div
-            v-if="memberAdmin.muteMember.length > 0"
-            class="item-main"
-            @click="removeMute"
-          >
-            <Icon
-              :file="minusSVG"
-              width="16px"
-              height="16px"
-            />
+          <div v-if="memberAdmin.muteMember.length > 0" 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 {
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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([
-  'addAdmin',
-  'removeAdmin',
-  'setAllMuteTime',
-  'addMute',
-  'removeMute',
-  'close',
-]);
+const emits = defineEmits(['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;
diff --git a/src/TUIKit/components/TUIGroup/manage-group/manage-member.vue b/src/TUIKit/components/TUIGroup/manage-group/manage-member.vue
index b72bb31..7333caa 100644
--- a/src/TUIKit/components/TUIGroup/manage-group/manage-member.vue
+++ b/src/TUIKit/components/TUIGroup/manage-group/manage-member.vue
@@ -1,99 +1,50 @@
 <template>
-  <main
-    v-if="!isUniFrameWork"
-    class="member"
-  >
+  <main v-if="!isUniFrameWork" class="member">
     <ul class="list">
-      <li
-        v-for="(item, index) in memberList"
-        :key="index"
-        class="list-item"
-      >
-        <aside
-          class="aside"
-          @click="handleMemberProfileShow(item)"
-        >
+      <li v-for="(item, index) in memberList" :key="index" class="list-item">
+        <aside class="aside" @click="handleMemberProfileShow(item)">
           <img
             class="avatar"
-            :src="
-              item.avatar ||
-                'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-            "
+            :src="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
-            v-if="item.role !== 'Owner' && isShowDeleteBtn"
-            :file="delIcon"
-            :width="'16px'"
-            :height="'16px'"
-          />
+          <Icon v-if="item.role !== 'Owner' && isShowDeleteBtn" :file="delIcon" :width="'16px'" :height="'16px'" />
         </div>
       </li>
-      <li
-        v-if="memberList.length < totalMember"
-        class="list-item"
-        @click="getMore"
-      >
+      <li v-if="memberList.length < totalMember" class="list-item" @click="getMore">
         {{ TUITranslateService.t(`TUIGroup.查看更多`) }}
       </li>
     </ul>
   </main>
-  <div
-    v-else
-    class="edit-h5"
-  >
+  <div v-else class="edit-h5">
     <main class="main">
       <header class="edit-h5-header">
         <aside class="left">
           <h1>{{ TUITranslateService.t(`TUIGroup.群成员`) }}</h1>
         </aside>
-        <span
-          class="close"
-          @click="close('member')"
-        >{{
-          TUITranslateService.t(`关闭`)
-        }}</span>
+        <span class="close" @click="close('member')">{{ TUITranslateService.t(`关闭`) }}</span>
       </header>
       <div class="member">
         <ul class="list list-uniapp">
-          <li
-            v-for="(item, index) in memberList"
-            :key="index"
-            class="list-item"
-          >
-            <aside
-              class="aside"
-              @click="handleMemberProfileShow(item)"
-            >
+          <li v-for="(item, index) in memberList" :key="index" class="list-item">
+            <aside class="aside" @click="handleMemberProfileShow(item)">
               <img
                 class="avatar"
-                :src="
-                  item.avatar ||
-                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-                "
+                :src="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
-                v-if="item.role !== 'Owner' && isShowDeleteBtn"
-                :file="delIcon"
-                :width="'16px'"
-                :height="'16px'"
-              />
+              <Icon v-if="item.role !== 'Owner' && isShowDeleteBtn" :file="delIcon" :width="'16px'" :height="'16px'" />
             </div>
           </li>
-          <li
-            v-if="memberList.length < totalMember"
-            class="list-item"
-            @click="getMore"
-          >
+          <li 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, {
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine, { 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;
diff --git a/src/TUIKit/components/TUIGroup/manage-group/manage-name.vue b/src/TUIKit/components/TUIGroup/manage-group/manage-name.vue
index 9c7fa85..cf57fd5 100644
--- a/src/TUIKit/components/TUIGroup/manage-group/manage-name.vue
+++ b/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
-          v-if="!isPC"
-          class="edit-h5-header"
-        >
+        <header v-if="!isPC" class="edit-h5-header">
           <aside class="left">
             <h1>{{ TUITranslateService.t(`TUIGroup.修改群聊名称`) }}</h1>
-            <span>{{
-              TUITranslateService.t(
-                `TUIGroup.修改群聊名称后，将在群内通知其他成员`
-              )
-            }}</span>
+            <span>{{ TUITranslateService.t(`TUIGroup.修改群聊名称后，将在群内通知其他成员`) }}</span>
           </aside>
-          <span
-            class="close"
-            @click="toggleEditStatus"
-          >{{
-            TUITranslateService.t(`关闭`)
-          }}</span>
+          <span class="close" @click="toggleEditStatus">{{ TUITranslateService.t(`关闭`) }}</span>
         </header>
         <div class="input-box">
-          <input
-            v-if="isEdit"
-            ref="nameInputRef"
-            v-model="inputGroupName"
-            class="input"
-            type="text"
-            @blur="updateProfile"
-          >
-          <span
-            v-if="!isPC"
-            class="tip"
-          >{{
-            TUITranslateService.t(
-              `TUIGroup.仅限中文、字母、数字和下划线，2-20个字`
-            )
-          }}</span>
+          <input v-if="isEdit" 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
-          v-if="!isPC"
-          class="edit-h5-footer"
-        >
-          <button
-            class="btn"
-            @click="updateProfile"
-          >
+        <footer v-if="!isPC" class="edit-h5-footer">
+          <button class="btn" @click="updateProfile">
             {{ TUITranslateService.t(`确认`) }}
           </button>
         </footer>
       </main>
     </div>
-    <p
-      v-if="!isEdit || !isPC"
-      class="name"
-      @click="toggleEditStatus"
-    >
+    <p v-if="!isEdit || !isPC" class="name" @click="toggleEditStatus">
       <span>{{ groupProfile.name }}</span>
-      <Icon
-        v-if="isAuthor"
-        class="icon"
-        :file="editIcon"
-        width="14px"
-        height="14px"
-      />
+      <Icon 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 {
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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;
diff --git a/src/TUIKit/components/TUIGroup/manage-group/manage-notification.vue b/src/TUIKit/components/TUIGroup/manage-group/manage-notification.vue
index 802cc2d..08408e8 100644
--- a/src/TUIKit/components/TUIGroup/manage-group/manage-notification.vue
+++ b/src/TUIKit/components/TUIGroup/manage-group/manage-notification.vue
@@ -1,14 +1,6 @@
 <template>
-  <main
-    v-if="!isUniFrameWork"
-    class="notification"
-  >
-    <textarea
-      v-if="isEdit"
-      v-model="input"
-      class="textarea"
-      @keyup.enter="updateProfile"
-    />
+  <main v-if="!isUniFrameWork" 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
-        v-if="isEdit"
-        class="btn"
-        @click="updateProfile"
-      >
+      <button v-if="isEdit" class="btn" @click="updateProfile">
         {{ TUITranslateService.t(`TUIGroup.发布`) }}
       </button>
-      <button
-        v-else
-        class="btn"
-        @click="isEdit = !isEdit"
-      >
+      <button v-else class="btn" @click="isEdit = !isEdit">
         {{ TUITranslateService.t(`TUIGroup.编辑`) }}
       </button>
     </footer>
   </main>
-  <div
-    v-else
-    class="edit-h5"
-  >
+  <div 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
-          class="close"
-          @click="close('notification')"
-        >{{
-          TUITranslateService.t(`关闭`)
-        }}</span>
+        <span class="close" @click="close('notification')">{{ TUITranslateService.t(`关闭`) }}</span>
       </header>
       <div class="notification">
-        <textarea
-          v-if="isEdit"
-          v-model="input"
-          :class="[isUniFrameWork ? 'uni-height' : '', 'textarea']"
-          @keyup.enter="updateProfile"
-        />
-        <section
-          v-else
-          class="row"
-        >
-          <p
-            v-if="!groupProfile.notification"
-            class="row-p"
-          >
+        <textarea v-if="isEdit" v-model="input" :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
-          v-if="isAuthorNotification"
-          class="footer"
-        >
-          <button
-            v-if="isEdit"
-            class="btn"
-            @click="updateProfile"
-          >
+        <footer v-if="isAuthorNotification" class="footer">
+          <button v-if="isEdit" class="btn" @click="updateProfile">
             {{ TUITranslateService.t(`TUIGroup.发布`) }}
           </button>
-          <button
-            v-else
-            class="btn"
-            @click="isEdit = !isEdit"
-          >
+          <button 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 {
-  TUITranslateService,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { 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;
diff --git a/src/TUIKit/components/TUIGroup/manage-group/manage-profile.vue b/src/TUIKit/components/TUIGroup/manage-group/manage-profile.vue
index bdb4145..bbe843f 100644
--- a/src/TUIKit/components/TUIGroup/manage-group/manage-profile.vue
+++ b/src/TUIKit/components/TUIGroup/manage-group/manage-profile.vue
@@ -1,17 +1,11 @@
 <template>
-  <div
-    v-if="!isUniFrameWork"
-    class="memeber-profile"
-  >
+  <div v-if="!isUniFrameWork" class="memeber-profile">
     <div class="memeber-profile-main">
       <img
         class="avatar"
-        :src="
-          userInfoManager.avatar ||
-            'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-        "
+        :src="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
-        v-if="showEnter()"
-        class="button"
-        @click="enter(userInfoManager.userID, 'C2C')"
-      >
-        {{ TUITranslateService.t("TUIContact.发送消息") }}
+      <div v-if="showEnter()" class="button" @click="enter(userInfoManager.userID, 'C2C')">
+        {{ TUITranslateService.t('TUIContact.发送消息') }}
       </div>
     </div>
   </div>
-  <div
-    v-else
-    class="edit-h5"
-  >
+  <div v-else class="edit-h5">
     <main class="main">
       <header class="edit-h5-header">
         <aside class="left">
           <h1>{{ TUITranslateService.t(`TUIGroup.群成员`) }}</h1>
         </aside>
-        <span
-          class="close"
-          @click="close('profile')"
-        >{{
-          TUITranslateService.t(`关闭`)
-        }}</span>
+        <span class="close" @click="close('profile')">{{ TUITranslateService.t(`关闭`) }}</span>
       </header>
       <div class="edit-h5-profile">
         <div class="memeber-profile-main">
-          <Avatar
-            class="avatar"
-            :url="userInfoManager.avatar"
-            size="60px"
-          />
+          <Avatar 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
-            v-if="showEnter()"
-            class="button"
-            @click="enter(userInfoManager.userID, 'C2C')"
-          >
-            {{ TUITranslateService.t("TUIContact.发送消息") }}
+          <div v-if="showEnter()" 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([
-  'handleSwitchConversation',
-  'close',
-  'openConversation',
-]);
+const emits = defineEmits(['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;
         }
-
       }
     }
   }
diff --git a/src/TUIKit/components/TUIGroup/select-member/index.vue b/src/TUIKit/components/TUIGroup/select-member/index.vue
index b8b3a07..db0b5bd 100644
--- a/src/TUIKit/components/TUIGroup/select-member/index.vue
+++ b/src/TUIKit/components/TUIGroup/select-member/index.vue
@@ -11,14 +11,7 @@
   />
 </template>
 <script lang="ts" setup>
-import {
-  TUIGroupService,
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IGroupMember,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine';
+import { TUIGroupService, TUIStore, StoreName, TUITranslateService, IGroupMember, IGroupModel } 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';
@@ -36,7 +29,7 @@ const selectOptions: any = ref({
   isRadio: false,
   isNeedSearch: false,
   title: '',
-  filterUserIDList: [] as Array<string>,
+  filterUserIDList: [] as Array<string>
 });
 const TUISearchServer = ref<any>(null);
 
@@ -72,7 +65,7 @@ TUIStore.watch(StoreName.GRP, {
       }
     });
     userList.value = memberList.value;
-  },
+  }
 });
 
 const getMember = async () => {
@@ -80,7 +73,7 @@ const getMember = async () => {
   const options = {
     groupID,
     count: 100,
-    offset: memberList.value.length,
+    offset: memberList.value.length
   };
   await TUIGroupService.getGroupMemberList(options);
 };
@@ -94,14 +87,14 @@ const handleSelectedResult = (memberList: Array<any>) => {
 const searchFail = () => {
   Toast({
     message: TUITranslateService.t('TUIGroup.该用户不存在'),
-    type: TOAST_TYPE.ERROR,
+    type: TOAST_TYPE.ERROR
   });
   userList.value = [...memberList.value];
 };
 
 const handleSearch = async (val: string) => {
   if (!val) {
-    return userList.value = memberList.value;
+    return (userList.value = memberList.value);
   }
 
   try {
@@ -116,5 +109,4 @@ const handleSearch = async (val: string) => {
     return searchFail();
   }
 };
-
 </script>
diff --git a/src/TUIKit/components/TUIGroup/server.ts b/src/TUIKit/components/TUIGroup/server.ts
index 68188e7..9a992d8 100644
--- a/src/TUIKit/components/TUIGroup/server.ts
+++ b/src/TUIKit/components/TUIGroup/server.ts
@@ -1,9 +1,5 @@
 import TUICore, { TUIConstants, ExtensionInfo } from '@tencentcloud/tui-core';
-import {
-  TUIStore,
-  StoreName,
-  TUIGroupService,
-} from '@tencentcloud/chat-uikit-engine';
+import { TUIStore, StoreName, TUIGroupService } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import settingSVG from '../../assets/icon/setting.svg';
 import { isUniFrameWork } from '../../utils/env';
@@ -42,23 +38,26 @@ export default class TUIGroupServer {
     switch (method) {
       case TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP:
         TUIStore.update(StoreName.GRP, 'isShowCreateComponent', true);
-        isUniFrameWork && TUIGlobal?.reLaunch({
-          url: '/TUIKit/components/TUIGroup/index',
-        });
+        isUniFrameWork &&
+          TUIGlobal?.reLaunch({
+            url: '/TUIKit/components/TUIGroup/index'
+          });
         break;
       case TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT:
         TUIGroupService.switchGroup(params.groupID);
         TUIStore.update(StoreName.GRP, 'isShowManageComponent', true);
-        isUniFrameWork && TUIGlobal?.navigateTo({
-          url: '/TUIKit/components/TUIGroup/index',
-        });
+        isUniFrameWork &&
+          TUIGlobal?.navigateTo({
+            url: '/TUIKit/components/TUIGroup/index'
+          });
         break;
       case TUIConstants.TUIGroup.SERVICE.METHOD.SELECT_GROUP_MEMBER:
         TUIGroupService.switchGroup(params.groupID);
         TUIStore.update(StoreName.GRP, 'isShowSelectComponent', true);
-        isUniFrameWork && TUIGlobal?.navigateTo({
-          url: '/TUIKit/components/TUIGroup/index',
-        });
+        isUniFrameWork &&
+          TUIGlobal?.navigateTo({
+            url: '/TUIKit/components/TUIGroup/index'
+          });
         break;
     }
   }
@@ -73,8 +72,8 @@ export default class TUIGroupServer {
           text: '更多',
           data: {},
           listener: {
-            onClicked: this.groupManage.bind(this),
-          },
+            onClicked: this.groupManage.bind(this)
+          }
         });
         break;
     }
@@ -88,7 +87,7 @@ export default class TUIGroupServer {
       params,
       callback: () => {
         isUniFrameWork && TUIGlobal?.navigateBack();
-      },
+      }
     });
   }
 }
diff --git a/src/TUIKit/components/TUINotification/index.ts b/src/TUIKit/components/TUINotification/index.ts
index 60d338f..f34ca32 100644
--- a/src/TUIKit/components/TUINotification/index.ts
+++ b/src/TUIKit/components/TUINotification/index.ts
@@ -4,30 +4,26 @@ import TUIChatEngine, {
   IMessageModel,
   IConversationModel,
   TUITranslateService,
-  TUIConversationService,
+  TUIConversationService
 } from '@tencentcloud/chat-uikit-engine';
-import {
-  ITUINotification,
-  NotificationType,
-  INotificationConstructorParams,
-} from './interface';
+import { ITUINotification, NotificationType, INotificationConstructorParams } from './interface';
 import { safeParse, isTypingMessage } from './utils';
 
 const TYPES = TUIChatEngine.TYPES;
 
 /**
-   * The TUINotification class.
-   * Just can use in web environment.
-   * @extends {ITUINotification}
-   * @param {INotificationConstructorParams | undefined} params - An optional parameter specifying the options for creating the TUINotification instance.
-   * @return {TUINotification} - The instance of TUINotification.
-   * @example
-   * TUINotification.setNotificationConfiguration({
-   *   showPreviews: true,
-   *   allowNotifications: true
-   * });
-   * TUINotification.getInstance(config).notify(message);
-   */
+ * The TUINotification class.
+ * Just can use in web environment.
+ * @extends {ITUINotification}
+ * @param {INotificationConstructorParams | undefined} params - An optional parameter specifying the options for creating the TUINotification instance.
+ * @return {TUINotification} - The instance of TUINotification.
+ * @example
+ * TUINotification.setNotificationConfiguration({
+ *   showPreviews: true,
+ *   allowNotifications: true
+ * });
+ * TUINotification.getInstance(config).notify(message);
+ */
 class TUINotification implements ITUINotification {
   public showPreviews = true;
   public allowNotifications = true;
@@ -42,11 +38,11 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Returns an instance of TUINotification.
-     *
-     * @param {INotificationConstructorParams | undefined} options - An optional parameter specifying the options for creating the TUINotification instance.
-     * @return {TUINotification} - The instance of TUINotification.
-     */
+   * Returns an instance of TUINotification.
+   *
+   * @param {INotificationConstructorParams | undefined} options - An optional parameter specifying the options for creating the TUINotification instance.
+   * @return {TUINotification} - The instance of TUINotification.
+   */
   static getInstance(options?: INotificationConstructorParams): TUINotification {
     if (!this.instance) {
       this.instance = new TUINotification(options);
@@ -55,35 +51,31 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Notifies the user with a given message.
-     *
-     * @param {IMessageModel} message - The message to be notified.
-     * @return {Promise<void>} - A promise that resolves when the notification is handled.
-     */
+   * Notifies the user with a given message.
+   *
+   * @param {IMessageModel} message - The message to be notified.
+   * @return {Promise<void>} - A promise that resolves when the notification is handled.
+   */
   public async notify(message: IMessageModel): Promise<void> {
     const browserPermission = await this.requestNotificationPermission();
-    if (
-      !this.allowNotifications
-      || !browserPermission
-      || !this.isMessageNeedNotification(message)
-    ) {
+    if (!this.allowNotifications || !browserPermission || !this.isMessageNeedNotification(message)) {
       return;
     }
     await this.handleNotification(message);
   }
 
   /**
-     * Handles the notification message.
-     *
-     * @param {IMessageModel} message - The notification message to handle.
-     * @return {Promise<void>} - A Promise that resolves once the notification is handled.
-     */
+   * Handles the notification message.
+   *
+   * @param {IMessageModel} message - The notification message to handle.
+   * @return {Promise<void>} - A Promise that resolves once the notification is handled.
+   */
   public async handleNotification(message: IMessageModel): Promise<void> {
     let options = {
       badge: this.notificationIcon,
       icon: this.notificationIcon,
       body: '',
-      requireInteraction: false,
+      requireInteraction: false
     };
     const notificationType = this.getNotificationType(message);
     let content;
@@ -94,14 +86,14 @@ class TUINotification implements ITUINotification {
         options = {
           ...options,
           body: content,
-          requireInteraction: !callEnd,
+          requireInteraction: !callEnd
         };
         break;
       case 'chat':
         options = {
           ...options,
           body: await this.getChatNotificationContent(message),
-          requireInteraction: false,
+          requireInteraction: false
         };
         break;
     }
@@ -111,10 +103,7 @@ class TUINotification implements ITUINotification {
       if (!message || !message.conversationID) {
         return;
       }
-      if (
-        message?.conversationType === TYPES.CONV_C2C
-        || message?.conversationType === TYPES.CONV_GROUP
-      ) {
+      if (message?.conversationType === TYPES.CONV_C2C || message?.conversationType === TYPES.CONV_GROUP) {
         const conversationProfile = await TUIConversationService.getConversationProfile(message.conversationID);
         const { conversationID: clickedMessageConvID } = conversationProfile?.data?.conversation || {};
         if (clickedMessageConvID) {
@@ -126,20 +115,20 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Sets the notification configuration.
-     *
-     * @param {INotificationConstructorParams} params - The parameters for the notification configuration.
-     * @return {void} This function does not return a value.
-     */
+   * Sets the notification configuration.
+   *
+   * @param {INotificationConstructorParams} params - The parameters for the notification configuration.
+   * @return {void} This function does not return a value.
+   */
   public setNotificationConfiguration(params?: INotificationConstructorParams): void {
     this.setConfiguration(params);
   }
 
   /**
-     * Checks if the browser supports notifications.
-     *
-     * @return {boolean} true if the browser supports notifications, false otherwise.
-     */
+   * Checks if the browser supports notifications.
+   *
+   * @return {boolean} true if the browser supports notifications, false otherwise.
+   */
   public checkNotificationAbility(): boolean {
     if (window && 'Notification' in window) {
       return true;
@@ -148,11 +137,11 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Checks if the browser has notification capability
-     * If the browser already has notification permission, returns true
-     * Otherwise, requests permission and returns the result
-     * @return Promise<boolean>
-     */
+   * Checks if the browser has notification capability
+   * If the browser already has notification permission, returns true
+   * Otherwise, requests permission and returns the result
+   * @return Promise<boolean>
+   */
   public async requestNotificationPermission(): Promise<boolean> {
     if (!this.checkNotificationAbility()) {
       console.error('The browser does not support notifications.');
@@ -173,18 +162,18 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Checks if the current page has focus.
-     * @return {boolean}
-     */
+   * Checks if the current page has focus.
+   * @return {boolean}
+   */
   public checkPageFocus(): boolean {
     return document.hasFocus();
   }
 
   /**
-     * use new configuration to overwrite old configuration
-     * @param params
-     * @return {void}
-     */
+   * use new configuration to overwrite old configuration
+   * @param params
+   * @return {void}
+   */
   private setConfiguration(params?: INotificationConstructorParams): void {
     if (!params) return;
     if (params.allowNotifications !== undefined) {
@@ -202,19 +191,19 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Checks if a message needs to be notified.
-     *
-     * A message does not need to be notified if it:
-     *  - is null or undefined
-     *  - does not have an ID or a type
-     *  - is revoked or deleted
-     *  - is a typing message
-     *  - is of type MSG_GRP_TIP or MSG_GRP_SYS_NOTICE
-     *  - the page is focused and the message belongs to the current conversation
-     *
-     * @param {IMessageModel} message - The message to check
-     * @return {boolean} - True if the message needs to be notified, false otherwise
-     */
+   * Checks if a message needs to be notified.
+   *
+   * A message does not need to be notified if it:
+   *  - is null or undefined
+   *  - does not have an ID or a type
+   *  - is revoked or deleted
+   *  - is a typing message
+   *  - is of type MSG_GRP_TIP or MSG_GRP_SYS_NOTICE
+   *  - the page is focused and the message belongs to the current conversation
+   *
+   * @param {IMessageModel} message - The message to check
+   * @return {boolean} - True if the message needs to be notified, false otherwise
+   */
   private isMessageNeedNotification(message: IMessageModel): boolean {
     if (!message || !message.ID || !message.type || message.isRevoked || message.isDeleted || isTypingMessage?.(message)) {
       return false;
@@ -234,10 +223,10 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Returns the notification type 'call' or 'chat'.
-     * @param {IMessageModel} message
-     * @return {'chat' | 'call'} call' or 'chat'
-     */
+   * Returns the notification type 'call' or 'chat'.
+   * @param {IMessageModel} message
+   * @return {'chat' | 'call'} call' or 'chat'
+   */
   private getNotificationType(message: IMessageModel): NotificationType {
     if (message.type === TYPES.MSG_CUSTOM) {
       const { businessID } = safeParse(message.payload?.data);
@@ -249,10 +238,10 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Retrieves the content for chat type message notifications.
-     * @param {IMessageModel} message
-     * @return {Promise<string>}
-     */
+   * Retrieves the content for chat type message notifications.
+   * @param {IMessageModel} message
+   * @return {Promise<string>}
+   */
   private async getChatNotificationContent(message: IMessageModel): Promise<string> {
     let content = '';
     if (!message || !message.ID || !message.type) {
@@ -269,10 +258,10 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Retrieves the content title for chat notifications.
-     * @param {IMessageModel} message - The message object.
-     * @returns {Promise<string>} - The content title for chat notifications.
-     */
+   * Retrieves the content title for chat notifications.
+   * @param {IMessageModel} message - The message object.
+   * @returns {Promise<string>} - The content title for chat notifications.
+   */
   private async getChatNotificationContentTitle(message: IMessageModel): Promise<string> {
     let title = '';
     let conversationProfile;
@@ -297,10 +286,10 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Get the content of the chat notification
-     * @param {IMessageModel} message
-     * @return {string}
-     */
+   * Get the content of the chat notification
+   * @param {IMessageModel} message
+   * @return {string}
+   */
   private getChatNotificationContentText(message: IMessageModel): string {
     let content = '';
     switch (message.type) {
@@ -338,10 +327,10 @@ class TUINotification implements ITUINotification {
   }
 
   /**
-     * Get the content of the call notification.
-     * @param message - The message object.
-     * @returns An object containing the notification content and call end status.
-     */
+   * Get the content of the call notification.
+   * @param message - The message object.
+   * @returns An object containing the notification content and call end status.
+   */
   private getCallNotificationInfo(message: IMessageModel): { content: string; callEnd: boolean } {
     let content = '';
     let callEnd = false;
@@ -358,17 +347,22 @@ class TUINotification implements ITUINotification {
       switch (callInfo.actionType) {
         case 1:
           if (
-            (callInfo.groupID && callInfo.timeout > 0)
-            || (!callInfo.call_end && !callInfo.groupID
-            && !(callDataInfo?.data && (callDataInfo?.data.cmd === 'switchToAudio' || callDataInfo?.data.cmd === 'switchToVideo')))
+            (callInfo.groupID && callInfo.timeout > 0) ||
+            (!callInfo.call_end &&
+              !callInfo.groupID &&
+              !(callDataInfo?.data && (callDataInfo?.data.cmd === 'switchToAudio' || callDataInfo?.data.cmd === 'switchToVideo')))
           ) {
             callEnd = false;
-            content = this.showPreviews ? `${callInfo.inviter} ${TUITranslateService.t('TUIChat.发起通话')}` : `${TUITranslateService.t('TUIChat.发起通话')}`;
+            content = this.showPreviews
+              ? `${callInfo.inviter} ${TUITranslateService.t('TUIChat.发起通话')}`
+              : `${TUITranslateService.t('TUIChat.发起通话')}`;
           }
           break;
         case 2:
           callEnd = true;
-          content = this.showPreviews ? `${callInfo.inviter} ${TUITranslateService.t('TUIChat.取消通话')}` : `${TUITranslateService.t('TUIChat.取消通话')}`;
+          content = this.showPreviews
+            ? `${callInfo.inviter} ${TUITranslateService.t('TUIChat.取消通话')}`
+            : `${TUITranslateService.t('TUIChat.取消通话')}`;
           break;
         default:
           throw new Error();
@@ -379,7 +373,7 @@ class TUINotification implements ITUINotification {
 
     return {
       content,
-      callEnd,
+      callEnd
     };
   }
 }
diff --git a/src/TUIKit/components/TUISearch/index.vue b/src/TUIKit/components/TUISearch/index.vue
index f12c17b..0c54ae6 100644
--- a/src/TUIKit/components/TUISearch/index.vue
+++ b/src/TUIKit/components/TUISearch/index.vue
@@ -1,61 +1,27 @@
 <template>
   <div
-    v-if="
-      searchType === 'global' ||
-        ((searchType === 'conversation' || (!searchType && isUniFrameWork)) &&
-          isShowInConversationSearch)
-    "
+    v-if="searchType === 'global' || ((searchType === 'conversation' || (!searchType && isUniFrameWork)) && isShowInConversationSearch)"
     :class="[
       'tui-search',
       !isPC && 'tui-search-h5',
       `tui-search-main-${searchType ? searchType : 'conversation'}`,
-      isFullScreen && 'tui-search-h5-full-screen',
+      isFullScreen && 'tui-search-h5-full-screen'
     ]"
   >
-    <div
-      v-if="searchType === 'global'"
-      ref="globalSearchRef"
-      :class="['tui-search-global', !isPC && 'tui-search-h5-global']"
-    >
-      <div
-        :class="[
-          'tui-search-global-header',
-          !isPC && 'tui-search-h5-global-header',
-        ]"
-      >
-        <SearchInput
-          class="search-input"
-          :searchType="searchType"
-        />
-        <SearchMore
-          v-if="isPC || !searchingStatus"
-          class="search-more"
-          :searchType="searchType"
-        />
+    <div v-if="searchType === 'global'" ref="globalSearchRef" :class="['tui-search-global', !isPC && 'tui-search-h5-global']">
+      <div :class="['tui-search-global-header', !isPC && 'tui-search-h5-global-header']">
+        <SearchInput class="search-input" :searchType="searchType" />
+        <SearchMore v-if="isPC || !searchingStatus" class="search-more" :searchType="searchType" />
       </div>
-      <SearchContainer
-        v-if="searchingStatus"
-        class="search-container"
-        popupPosition="bottom"
-        :searchType="searchType"
-      >
+      <SearchContainer v-if="searchingStatus" class="search-container" popupPosition="bottom" :searchType="searchType">
         <template #result>
-          <SearchResult
-            class="search-result"
-            :searchType="searchType"
-          />
+          <SearchResult class="search-result" :searchType="searchType" />
         </template>
       </SearchContainer>
     </div>
     <div
-      v-else-if="
-        (searchType === 'conversation' && isShowInConversationSearch) ||
-          isUniFrameWork
-      "
-      :class="[
-        'tui-search-conversation',
-        !isPC && 'tui-search-h5-conversation',
-      ]"
+      v-else-if="(searchType === 'conversation' && isShowInConversationSearch) || isUniFrameWork"
+      :class="['tui-search-conversation', !isPC && 'tui-search-h5-conversation']"
     >
       <SearchContainer
         class="search-container"
@@ -64,28 +30,17 @@
         @closeInConversationSearch="closeInConversationSearch"
       >
         <template #input>
-          <SearchInput
-            :searchType="searchType ? searchType : 'conversation'"
-          />
+          <SearchInput :searchType="searchType ? searchType : 'conversation'" />
         </template>
         <template #result>
-          <SearchResult
-            class="search-result"
-            :searchType="searchType ? searchType : 'conversation'"
-          />
+          <SearchResult class="search-result" :searchType="searchType ? searchType : 'conversation'" />
         </template>
       </SearchContainer>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import {
-  ref,
-  onMounted,
-  computed,
-  withDefaults,
-  onUnmounted,
-} from '../../adapter-vue';
+import { ref, onMounted, computed, withDefaults, onUnmounted } from '../../adapter-vue';
 import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal, outsideClick } from '@tencentcloud/universal-api';
 import SearchInput from './search-input/index.vue';
@@ -104,8 +59,8 @@ const props = withDefaults(
   {
     searchType: () => {
       return isUniFrameWork ? 'conversation' : 'global';
-    },
-  },
+    }
+  }
 );
 const globalSearchRef = ref<HTMLElement | null>();
 const currentConversationID = ref<string>('');
@@ -115,23 +70,21 @@ const isShowInConversationSearch = ref<boolean>(isUniFrameWork);
 // Whether to search in full screen - Search in full screen when the mobile terminal is searching
 const isFullScreen = computed(
   () =>
-    !isPC
-    && ((props.searchType === 'global' && searchingStatus.value)
-    || (props.searchType === 'conversation' && isShowInConversationSearch.value)),
+    !isPC && ((props.searchType === 'global' && searchingStatus.value) || (props.searchType === 'conversation' && isShowInConversationSearch.value))
 );
 
 const initSearchValue = (searchType: SEARCH_TYPE) => {
   TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
     value: '',
-    searchType: searchType,
+    searchType: searchType
   });
   TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
     value: searchMessageTypeDefault[searchType],
-    searchType: searchType,
+    searchType: searchType
   });
   TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
     value: searchMessageTimeDefault,
-    searchType: searchType,
+    searchType: searchType
   });
 };
 
@@ -151,13 +104,19 @@ function onCurrentSearchingStatusChange(value: ISearchingStatus) {
       if (isPC && value.isSearching) {
         outsideClick.listen({
           domRefs: globalSearchRef.value,
-          handler: closeGlobalSearch,
+          handler: closeGlobalSearch
         });
       }
     }
     if (value?.searchType === 'global' && isUniFrameWork) {
       // hide tab bar in uni-app when global searching
-      value.isSearching ? TUIGlobal?.hideTabBar()?.catch(() => { /* ignore */ }) : TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
+      value.isSearching
+        ? TUIGlobal?.hideTabBar()?.catch(() => {
+            /* ignore */
+          })
+        : TUIGlobal?.showTabBar()?.catch(() => {
+            /* ignore */
+          });
     }
   }
 }
@@ -174,29 +133,29 @@ onMounted(() => {
   });
   // watch store change
   TUIStore.watch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdate,
+    currentConversationID: onCurrentConversationIDUpdate
   });
   TUIStore.watch(StoreName.SEARCH, {
     currentSearchingStatus: onCurrentSearchingStatusChange,
-    isShowInConversationSearch: onIsShowInConversationSearchChange,
+    isShowInConversationSearch: onIsShowInConversationSearchChange
   });
 });
 
 onUnmounted(() => {
   // unwatch store change
   TUIStore.unwatch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdate,
+    currentConversationID: onCurrentConversationIDUpdate
   });
   TUIStore.unwatch(StoreName.SEARCH, {
     currentSearchingStatus: onCurrentSearchingStatusChange,
-    isShowInConversationSearch: onIsShowInConversationSearchChange,
+    isShowInConversationSearch: onIsShowInConversationSearchChange
   });
 });
 
 function closeGlobalSearch() {
   TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
     isSearching: false,
-    searchType: props.searchType,
+    searchType: props.searchType
   });
 }
 
diff --git a/src/TUIKit/components/TUISearch/search-container/index.vue b/src/TUIKit/components/TUISearch/search-container/index.vue
index eff6d76..6055fb6 100644
--- a/src/TUIKit/components/TUISearch/search-container/index.vue
+++ b/src/TUIKit/components/TUISearch/search-container/index.vue
@@ -1,44 +1,21 @@
 <template>
   <div
-    :class="[
-      'tui-search-container',
-      !isPC && 'tui-search-container-h5',
-      isPC && `container-${props.popupPosition}`,
-      `container-${props.searchType}`,
-    ]"
+    :class="['tui-search-container', !isPC && 'tui-search-container-h5', isPC && `container-${props.popupPosition}`, `container-${props.searchType}`]"
   >
-    <div
-      :class="[
-        isPC && `tui-search-container-${props.popupPosition}`,
-        !isPC && 'tui-search-container-h5-main',
-      ]"
-    >
-      <div
-        v-if="props.searchType === 'conversation' && !isUniFrameWork"
-        class="tui-search-header"
-      >
+    <div :class="[isPC && `tui-search-container-${props.popupPosition}`, !isPC && 'tui-search-container-h5-main']">
+      <div v-if="props.searchType === 'conversation' && !isUniFrameWork" class="tui-search-header">
         <div class="tui-search-header-title">
-          {{ TUITranslateService.t("TUISearch.搜索会话内容") }}
+          {{ TUITranslateService.t('TUISearch.搜索会话内容') }}
         </div>
-        <div
-          class="tui-search-header-close"
-          @click="closeSearchContainer"
-        >
-          <Icon
-            :file="closeDarkIcon"
-            width="14px"
-            height="14px"
-          />
+        <div class="tui-search-header-close" @click="closeSearchContainer">
+          <Icon :file="closeDarkIcon" width="14px" height="14px" />
         </div>
       </div>
       <div class="tui-search-tabs">
         <div
           v-for="(tabItem, tabKey) in searchTypeList"
           :key="tabKey"
-          :class="[
-            'tui-search-tabs-item',
-            currentSearchMessageType.key === tabItem.key && 'tui-search-tabs-item-selected',
-          ]"
+          :class="['tui-search-tabs-item', currentSearchMessageType.key === tabItem.key && 'tui-search-tabs-item-selected']"
           @click="selectSearchType(tabItem)"
         >
           {{ TUITranslateService.t(`TUISearch.${tabItem.label}`) }}
@@ -46,58 +23,23 @@
       </div>
       <!-- TUISearch search input slot -->
       <slot name="input" />
-      <div
-        v-if="isTimeTabsShow"
-        class="tui-search-time"
-      >
+      <div v-if="isTimeTabsShow" class="tui-search-time">
         <div
           v-for="(tabItem, tabKey) in searchMessageTimeList"
           :key="tabKey"
-          :class="[
-            'tui-search-time-item',
-            currentSearchMessageTime.key === tabItem.key && 'tui-search-time-item-selected',
-          ]"
+          :class="['tui-search-time-item', currentSearchMessageTime.key === tabItem.key && 'tui-search-time-item-selected']"
           @click="selectSearchTime(tabItem)"
         >
-          <div
-            v-if="tabItem.key === 'all'"
-            class="tui-search-time-item-picker"
-          >
-            <div
-              v-if="!isDatePickerShow"
-              class="tui-search-time-item-all"
-              @click.stop="handleSelectAllTimeClicked"
-            >
-              {{
-                TUITranslateService.t(`TUISearch.选择时间`) +
-                  ":  " +
-                  TUITranslateService.t(`TUISearch.全部`)
-              }}
-              <Icon
-                :file="downArrowIcon"
-                width="14px"
-                height="14px"
-              />
+          <div v-if="tabItem.key === 'all'" class="tui-search-time-item-picker">
+            <div v-if="!isDatePickerShow" class="tui-search-time-item-all" @click.stop="handleSelectAllTimeClicked">
+              {{ TUITranslateService.t(`TUISearch.选择时间`) + ':  ' + TUITranslateService.t(`TUISearch.全部`) }}
+              <Icon :file="downArrowIcon" width="14px" height="14px" />
             </div>
             <div @click.stop>
-              <DatePicker
-                v-if="isDatePickerShow"
-                type="range"
-                :rangeTableType="datePickerRangeDisplayType"
-                @pick="pickTimePeriod"
-              />
+              <DatePicker v-if="isDatePickerShow" type="range" :rangeTableType="datePickerRangeDisplayType" @pick="pickTimePeriod" />
             </div>
-            <div
-              v-if="isDatePickerShow"
-              class="tui-search-time-item-close"
-              @click="clearTimePicker"
-            >
-              <Icon
-                class="icon"
-                :file="closeIcon"
-                width="14px"
-                height="14px"
-              />
+            <div v-if="isDatePickerShow" class="tui-search-time-item-close" @click="clearTimePicker">
+              <Icon class="icon" :file="closeIcon" width="14px" height="14px" />
             </div>
           </div>
           <div v-else>
@@ -112,17 +54,9 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from '../../../adapter-vue';
-import {
-  TUITranslateService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
+import { TUITranslateService, TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
 import { Dayjs } from 'dayjs';
-import {
-  globalSearchTypeList,
-  conversationSearchTypeList,
-  searchMessageTypeDefault,
-} from '../search-type-list';
+import { globalSearchTypeList, conversationSearchTypeList, searchMessageTypeDefault } from '../search-type-list';
 import { searchMessageTimeList, searchMessageTimeDefault } from '../search-time-list';
 import Icon from '../../common/Icon.vue';
 import DatePicker from '../../common/DatePicker/index.vue';
@@ -135,40 +69,32 @@ import { SEARCH_TYPE, ISearchMessageTime, ISearchMessageType, ISearchTimeTab, IS
 const props = defineProps({
   popupPosition: {
     type: String, // "bottom" / "aside"
-    default: 'bottom',
+    default: 'bottom'
   },
   searchType: {
     type: String,
     default: 'global', // "global" / "conversation"
     validator(value: string) {
       return ['global', 'conversation'].includes(value);
-    },
-  },
+    }
+  }
 });
 
 const emits = defineEmits(['searchConfigChange', 'closeInConversationSearch']);
 
-const searchTypeList = computed(() =>
-  props?.searchType === 'conversation' ? conversationSearchTypeList : globalSearchTypeList,
-);
+const searchTypeList = computed(() => (props?.searchType === 'conversation' ? conversationSearchTypeList : globalSearchTypeList));
 const currentSearchMessageType = ref(searchMessageTypeDefault[props?.searchType as SEARCH_TYPE]);
 const currentSearchMessageTime = ref(searchMessageTimeDefault);
 
 const isTimeTabsShow = computed(() => {
-  return (
-    currentSearchMessageType.value.key !== 'contact'
-    && currentSearchMessageType.value.key !== 'group'
-  );
+  return currentSearchMessageType.value.key !== 'contact' && currentSearchMessageType.value.key !== 'group';
 });
-const datePickerRangeDisplayType = computed((): string =>
-  isPC && props.searchType === 'global' && !isUniFrameWork ? 'two' : 'one',
-);
+const datePickerRangeDisplayType = computed((): string => (isPC && props.searchType === 'global' && !isUniFrameWork ? 'two' : 'one'));
 const isDatePickerShow = ref<boolean>(false);
 
 function onCurrentSearchMessageTypeChange(typeObject: ISearchMessageType) {
   if (typeObject?.searchType === props?.searchType) {
-    currentSearchMessageType.value
-        = typeObject?.value || searchMessageTypeDefault[props?.searchType as SEARCH_TYPE];
+    currentSearchMessageType.value = typeObject?.value || searchMessageTypeDefault[props?.searchType as SEARCH_TYPE];
   }
 }
 
@@ -181,21 +107,21 @@ function onCurrentSearchMessageTimeChange(timeObject: ISearchMessageTime) {
 onMounted(() => {
   TUIStore.watch(StoreName.SEARCH, {
     currentSearchMessageType: onCurrentSearchMessageTypeChange,
-    currentSearchMessageTime: onCurrentSearchMessageTimeChange,
+    currentSearchMessageTime: onCurrentSearchMessageTimeChange
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.SEARCH, {
     currentSearchMessageType: onCurrentSearchMessageTypeChange,
-    currentSearchMessageTime: onCurrentSearchMessageTimeChange,
+    currentSearchMessageTime: onCurrentSearchMessageTimeChange
   });
 });
 
 const selectSearchType = (item: ISearchTypeTab) => {
   TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
     value: item,
-    searchType: props.searchType,
+    searchType: props.searchType
   });
 };
 
@@ -206,7 +132,7 @@ const selectSearchTime = (item: ISearchTimeTab) => {
     isDatePickerShow.value = false;
     TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
       value: item,
-      searchType: props.searchType,
+      searchType: props.searchType
     });
   }
 };
@@ -215,7 +141,7 @@ const handleSelectAllTimeClicked = () => {
   if (currentSearchMessageTime.value?.key !== 'all') {
     TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
       value: searchMessageTimeDefault,
-      searchType: props.searchType,
+      searchType: props.searchType
     });
   } else {
     isDatePickerShow.value = true;
@@ -232,12 +158,12 @@ const pickTimePeriod = (time: typeof Dayjs) => {
       label: currentSearchMessageTime.value.label,
       value: {
         timePosition,
-        timePeriod,
-      },
+        timePeriod
+      }
     };
     TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
       value: newSearchMessageTime,
-      searchType: props.searchType,
+      searchType: props.searchType
     });
   }
 };
@@ -247,7 +173,7 @@ const clearTimePicker = () => {
   if (currentSearchMessageTime.value?.key === 'all') {
     TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
       value: searchMessageTimeDefault,
-      searchType: props.searchType,
+      searchType: props.searchType
     });
   }
 };
diff --git a/src/TUIKit/components/TUISearch/search-input/index.vue b/src/TUIKit/components/TUISearch/search-input/index.vue
index 97f06ca..fc48e88 100644
--- a/src/TUIKit/components/TUISearch/search-input/index.vue
+++ b/src/TUIKit/components/TUISearch/search-input/index.vue
@@ -3,19 +3,12 @@
     :class="[
       'tui-search-input-container',
       !isPC && 'tui-search-input-container-h5',
-      props.searchType === 'global'
-        ? 'tui-search-input-container-global'
-        : 'tui-search-input-container-conversation'
+      props.searchType === 'global' ? 'tui-search-input-container-global' : 'tui-search-input-container-conversation'
     ]"
   >
     <div :class="['tui-search-input', !isPC && 'tui-search-input-h5']">
       <div class="tui-search-input-left">
-        <Icon
-          class="icon"
-          :file="searchIcon"
-          width="14px"
-          height="14px"
-        />
+        <Icon class="icon" :file="searchIcon" width="14px" height="14px" />
       </div>
       <input
         v-model="searchValueModel"
@@ -28,39 +21,23 @@
         @keyup.enter="search"
         @confirm="search"
         @click.stop.prevent="onSearchInputClick"
-      >
-      <div
-        v-if="searchingStatus"
-        class="tui-search-input-right"
-        @click="endSearching"
-      >
-        <Icon
-          class="icon"
-          :file="closeIcon"
-          width="14px"
-          height="14px"
-        />
+      />
+      <div v-if="searchingStatus" class="tui-search-input-right" @click="endSearching">
+        <Icon class="icon" :file="closeIcon" width="14px" height="14px" />
       </div>
     </div>
     <div
       v-if="!isPC && searchingStatus && props.searchType === 'global'"
-      :class="[
-        'tui-search-input-cancel',
-        !isPC && 'tui-search-input-h5-cancel',
-      ]"
+      :class="['tui-search-input-cancel', !isPC && 'tui-search-input-h5-cancel']"
       @click="endSearching"
     >
-      {{ TUITranslateService.t("TUISearch.取消") }}
+      {{ TUITranslateService.t('TUISearch.取消') }}
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
-import {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { TUIStore, StoreName, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import Icon from '../../common/Icon.vue';
 import searchIcon from '../../../assets/icon/search.svg';
@@ -70,15 +47,15 @@ import { ISearchInputValue, ISearchingStatus } from '../type';
 const props = defineProps({
   placeholder: {
     type: String,
-    default: () => TUITranslateService.t('TUISearch.搜索'),
+    default: () => TUITranslateService.t('TUISearch.搜索')
   },
   searchType: {
     type: String,
     default: 'global', // "global" / "conversation"
     validator(value: string) {
       return ['global', 'conversation'].includes(value);
-    },
-  },
+    }
+  }
 });
 
 const searchValueModel = ref<string>('');
@@ -101,14 +78,14 @@ function onCurrentSearchingStatusChange(obj: ISearchingStatus) {
 onMounted(() => {
   TUIStore.watch(StoreName.SEARCH, {
     currentSearchInputValue: onCurrentSearchInputValueChange,
-    currentSearchingStatus: onCurrentSearchingStatusChange,
+    currentSearchingStatus: onCurrentSearchingStatusChange
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.SEARCH, {
     currentSearchInputValue: onCurrentSearchInputValueChange,
-    currentSearchingStatus: onCurrentSearchingStatusChange,
+    currentSearchingStatus: onCurrentSearchingStatusChange
   });
 });
 
@@ -119,7 +96,7 @@ const search = () => {
   }
   TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
     value: searchValueModel.value,
-    searchType: props.searchType,
+    searchType: props.searchType
   });
 };
 
@@ -127,18 +104,18 @@ const endSearching = () => {
   searchingStatus.value = false;
   TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
     isSearching: false,
-    searchType: props.searchType,
+    searchType: props.searchType
   });
   TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
     value: '',
-    searchType: props.searchType,
+    searchType: props.searchType
   });
 };
 
 const onSearchInputClick = () => {
   TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
     isSearching: true,
-    searchType: props.searchType,
+    searchType: props.searchType
   });
 };
 
@@ -209,7 +186,7 @@ const onBlur = () => {
     color: #007aff;
     font-size: 16px;
     padding: 7px 10px 7px 3px;
-    font-family: "PingFang SC", sans-serif;
+    font-family: 'PingFang SC', sans-serif;
   }
 }
 </style>
diff --git a/src/TUIKit/components/TUISearch/search-more/index.vue b/src/TUIKit/components/TUISearch/search-more/index.vue
index b715cb4..bc8d5fd 100644
--- a/src/TUIKit/components/TUISearch/search-more/index.vue
+++ b/src/TUIKit/components/TUISearch/search-more/index.vue
@@ -1,34 +1,11 @@
 <template>
-  <div
-    ref="searchMoreRef"
-    :class="['tui-search-more', !isPC && 'tui-search-more-h5']"
-  >
-    <div
-      class="more"
-      @click="toggleMore()"
-    >
-      <Icon
-        class="more-icon"
-        :file="searchMoreSVG"
-        :width="isPC ? '28px' : '34px'"
-        :height="isPC ? '28px' : '34px'"
-      />
+  <div ref="searchMoreRef" :class="['tui-search-more', !isPC && 'tui-search-more-h5']">
+    <div class="more" @click="toggleMore()">
+      <Icon class="more-icon" :file="searchMoreSVG" :width="isPC ? '28px' : '34px'" :height="isPC ? '28px' : '34px'" />
     </div>
-    <ul
-      v-if="isListShow"
-      class="tui-search-more-list"
-    >
-      <li
-        v-for="(extension, index) in extensionList"
-        :key="index"
-        class="list-item"
-        @click="handleMenu(extension)"
-      >
-        <Icon
-          v-if="extension.icon"
-          class="list-item-icon"
-          :file="extension.icon"
-        />
+    <ul v-if="isListShow" class="tui-search-more-list">
+      <li v-for="(extension, index) in extensionList" :key="index" class="list-item" @click="handleMenu(extension)">
+        <Icon v-if="extension.icon" class="list-item-icon" :file="extension.icon" />
         <div class="list-item-title">
           {{ extension.text }}
         </div>
@@ -51,8 +28,8 @@ const props = defineProps({
     default: 'global', // "global" / "conversation"
     validator(value: string) {
       return ['global', 'conversation'].includes(value);
-    },
-  },
+    }
+  }
 });
 
 const searchMoreRef = ref<HTMLElement | null>();
@@ -62,14 +39,14 @@ const toggleMore = () => {
   if (!isUniFrameWork && isListShow.value) {
     outsideClick.listen({
       domRefs: searchMoreRef.value,
-      handler: closeSearchMore,
+      handler: closeSearchMore
     });
   }
 };
 const extensionList = ref<ExtensionInfo[]>([]);
 
 const handleMenu = (item: ExtensionInfo) => {
-  const { listener = { onClicked: () => { } } } = item;
+  const { listener = { onClicked: () => {} } } = item;
   listener?.onClicked?.(item);
   toggleMore();
 };
@@ -80,14 +57,12 @@ const closeSearchMore = () => {
 
 onMounted(() => {
   // extensions
-  extensionList.value = [
-    ...TUICore.getExtensionList(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID),
-  ];
+  extensionList.value = [...TUICore.getExtensionList(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID)];
   // hide conversation header
   TUICore.callService({
     serviceName: TUIConstants.TUIConversation.SERVICE.NAME,
     method: TUIConstants.TUIConversation.SERVICE.METHOD.HIDE_CONVERSATION_HEADER,
-    params: {},
+    params: {}
   });
 });
 
@@ -97,10 +72,10 @@ watch(
     if (isListShow.value) {
       TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
         isSearching: false,
-        searchType: props.searchType,
+        searchType: props.searchType
       });
     }
-  },
+  }
 );
 </script>
 
@@ -130,7 +105,9 @@ watch(
     justify-content: center;
     align-items: flex-start;
     padding: 0;
-    box-shadow: rgba(0,0,0,0.16) 0 3px 6px, rgba(0,0,0,0.23) 0 3px 6px;
+    box-shadow:
+      rgba(0, 0, 0, 0.16) 0 3px 6px,
+      rgba(0, 0, 0, 0.23) 0 3px 6px;
 
     .list-item {
       display: flex;
@@ -153,8 +130,8 @@ watch(
   }
 }
 
-.tui-search-more-h5{
-  .more{
+.tui-search-more-h5 {
+  .more {
     width: 34px;
     height: 34px;
   }
diff --git a/src/TUIKit/components/TUISearch/search-result/index.vue b/src/TUIKit/components/TUISearch/search-result/index.vue
index b9f22b0..47ddc33 100644
--- a/src/TUIKit/components/TUISearch/search-result/index.vue
+++ b/src/TUIKit/components/TUISearch/search-result/index.vue
@@ -1,42 +1,15 @@
 <template>
-  <SearchResultLoading
-    v-if="isLoading"
-    :class="['search-result-loading', !isPC && 'search-result-loading-h5']"
-  />
-  <SearchResultDefault
-    v-else-if="isSearchDefaultShow"
-    :class="['search-result-default', !isPC && 'search-result-default-h5']"
-  />
-  <div
-    v-else
-    :class="[
-      'tui-search-result',
-      !isPC && 'tui-search-result-h5',
-      isPC && isResultDetailShow && 'tui-search-result-with-border',
-    ]"
-  >
-    <div
-      v-if="props.searchType !== 'conversation' && (isPC || !isResultDetailShow)"
-      class="tui-search-result-main"
-    >
+  <SearchResultLoading v-if="isLoading" :class="['search-result-loading', !isPC && 'search-result-loading-h5']" />
+  <SearchResultDefault v-else-if="isSearchDefaultShow" :class="['search-result-default', !isPC && 'search-result-default-h5']" />
+  <div v-else :class="['tui-search-result', !isPC && 'tui-search-result-h5', isPC && isResultDetailShow && 'tui-search-result-with-border']">
+    <div v-if="props.searchType !== 'conversation' && (isPC || !isResultDetailShow)" class="tui-search-result-main">
       <div class="tui-search-result-list">
-        <div
-          v-for="result in searchResult"
-          :key="result.key"
-          class="tui-search-result-list-item"
-        >
-          <div
-            v-if="props.searchType === 'global'"
-            class="header"
-          >
+        <div v-for="result in searchResult" :key="result.key" class="tui-search-result-list-item">
+          <div v-if="props.searchType === 'global'" class="header">
             {{ TUITranslateService.t(`TUISearch.${result.label}`) }}
           </div>
           <div class="list">
-            <div
-              v-for="item in result.list"
-              :key="item.conversation.conversationID"
-              :class="[generateListItemClass(item)]"
-            >
+            <div v-for="item in result.list" :key="item.conversation.conversationID" :class="[generateListItemClass(item)]">
               <SearchResultItem
                 v-if="result.key === 'contact' || result.key === 'group' || item.conversation"
                 :listItem="item"
@@ -48,19 +21,10 @@
               />
             </div>
           </div>
-          <div
-            v-if="currentSearchTabKey === 'all' || result.cursor"
-            class="more"
-            @click="getMoreResult(result)"
-          >
-            <Icon
-              class="more-icon"
-              :file="searchIcon"
-              width="12px"
-              height="12px"
-            />
+          <div v-if="currentSearchTabKey === 'all' || result.cursor" class="more" @click="getMoreResult(result)">
+            <Icon class="more-icon" :file="searchIcon" width="12px" height="12px" />
             <div class="more-text">
-              <span>{{ TUITranslateService.t("TUISearch.查看更多") }}</span>
+              <span>{{ TUITranslateService.t('TUISearch.查看更多') }}</span>
               <span>{{ TUITranslateService.t(`TUISearch.${result.label}`) }}</span>
             </div>
           </div>
@@ -69,78 +33,37 @@
     </div>
     <div
       v-if="isResultDetailShow || props.searchType === 'conversation'"
-      :class="[
-        'tui-search-result-detail',
-        props.searchType === 'conversation' && 'tui-search-result-in-conversation',
-      ]"
+      :class="['tui-search-result-detail', props.searchType === 'conversation' && 'tui-search-result-in-conversation']"
     >
-      <SearchResultLoading
-        v-if="isSearchDetailLoading"
-        :class="['search-result-loading', !isPC && 'search-result-loading-h5']"
-      />
-      <div
-        v-if="!isSearchDetailLoading && isResultDetailShow && props.searchType !== 'conversation'"
-        class="tui-search-message-header"
-      >
+      <SearchResultLoading v-if="isSearchDetailLoading" :class="['search-result-loading', !isPC && 'search-result-loading-h5']" />
+      <div v-if="!isSearchDetailLoading && isResultDetailShow && props.searchType !== 'conversation'" class="tui-search-message-header">
         <div class="header-content">
           <div class="header-content-count normal">
             <span>{{ searchConversationMessageTotalCount }}</span>
-            <span>{{ TUITranslateService.t("TUISearch.条与") }}</span>
+            <span>{{ TUITranslateService.t('TUISearch.条与') }}</span>
           </div>
           <div class="header-content-keyword">
-            <span
-              v-for="(keyword, index) in keywordList"
-              :key="index"
-            >
+            <span v-for="(keyword, index) in keywordList" :key="index">
               <span class="normal">"</span>
               <span class="highlight">{{ keyword }}</span>
               <span class="normal">"</span>
             </span>
           </div>
           <div class="header-content-type normal">
+            <span>{{ TUITranslateService.t('TUISearch.相关的') }}</span>
             <span>{{
-              TUITranslateService.t("TUISearch.相关的")
-            }}</span>
-            <span>{{
-              TUITranslateService.t(
-                `TUISearch.${currentSearchTabKey === "allMessage"
-                  ? "结果"
-                  : searchMessageTypeList[currentSearchTabKey].label
-                }`
-              )
+              TUITranslateService.t(`TUISearch.${currentSearchTabKey === 'allMessage' ? '结果' : searchMessageTypeList[currentSearchTabKey].label}`)
             }}</span>
           </div>
         </div>
-        <div
-          class="header-enter"
-          @click="enterConversation({ conversationID: currentSearchConversationID })"
-        >
-          <span>{{ TUITranslateService.t("TUISearch.进入聊天") }}</span>
-          <Icon
-            class="enter-icon"
-            :file="enterIcon"
-            width="14px"
-            height="14px"
-          />
+        <div class="header-enter" @click="enterConversation({ conversationID: currentSearchConversationID })">
+          <span>{{ TUITranslateService.t('TUISearch.进入聊天') }}</span>
+          <Icon class="enter-icon" :file="enterIcon" width="14px" height="14px" />
         </div>
       </div>
-      <div
-        v-if="!isSearchDetailLoading &&
-          searchConversationMessageList &&
-          searchConversationMessageList[0]
-        "
-        class="tui-search-message-list"
-      >
-        <template
-          v-if="props.searchType === 'global' ||
-            (currentSearchTabKey !== 'imageMessage' && currentSearchTabKey !== 'fileMessage')
-          "
-        >
-          <div
-            v-for="item in searchConversationMessageList"
-            :key="generateVueRenderKey(item.ID)"
-            :class="['list-item']"
-          >
+      <div v-if="!isSearchDetailLoading && searchConversationMessageList && searchConversationMessageList[0]" class="tui-search-message-list">
+        <template v-if="props.searchType === 'global' || (currentSearchTabKey !== 'imageMessage' && currentSearchTabKey !== 'fileMessage')">
+          <div v-for="item in searchConversationMessageList" :key="generateVueRenderKey(item.ID)" :class="['list-item']">
             <SearchResultItem
               :listItem="item"
               :listItemContent="item.getMessageContent()"
@@ -157,16 +80,12 @@
           <div
             v-for="group in searchConversationResultGroupByDate"
             :key="generateVueRenderKey(group.date)"
-            :class="['list-group', currentSearchTabKey === 'fileMessage'? 'list-group-file' : 'list-group-image']"
+            :class="['list-group', currentSearchTabKey === 'fileMessage' ? 'list-group-file' : 'list-group-image']"
           >
             <div :class="['list-group-date']">
               {{ group.date }}
             </div>
-            <div
-              v-for="item in group.list"
-              :key="generateVueRenderKey(item.ID)"
-              :class="['list-group-item']"
-            >
+            <div v-for="item in group.list" :key="generateVueRenderKey(item.ID)" :class="['list-group-item']">
               <SearchResultItem
                 :listItem="item"
                 :listItemContent="item.getMessageContent()"
@@ -179,19 +98,10 @@
             </div>
           </div>
         </template>
-        <div
-          v-if="searchConversationResult && searchConversationResult.cursor"
-          class="more"
-          @click="getMoreResultInConversation"
-        >
-          <Icon
-            class="more-icon"
-            :file="searchIcon"
-            width="12px"
-            height="12px"
-          />
+        <div v-if="searchConversationResult && searchConversationResult.cursor" class="more" @click="getMoreResultInConversation">
+          <Icon class="more-icon" :file="searchIcon" width="12px" height="12px" />
           <div class="more-text">
-            {{ TUITranslateService.t("TUISearch.查看更多历史记录") }}
+            {{ TUITranslateService.t('TUISearch.查看更多历史记录') }}
           </div>
         </div>
       </div>
@@ -206,7 +116,7 @@ import {
   TUIStore,
   StoreName,
   IMessageModel,
-  SearchCloudMessagesParams,
+  SearchCloudMessagesParams
 } from '@tencentcloud/chat-uikit-engine';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import SearchResultItem from './search-result-item/index.vue';
@@ -216,12 +126,7 @@ import { searchMessageTypeList, searchMessageTypeDefault } from '../search-type-
 import Icon from '../../common/Icon.vue';
 import searchIcon from '../../../assets/icon/search.svg';
 import enterIcon from '../../../assets/icon/right-icon.svg';
-import {
-  searchCloudMessages,
-  enterConversation,
-  generateSearchResultYMD,
-  debounce,
-} from '../utils';
+import { searchCloudMessages, enterConversation, generateSearchResultYMD, debounce } from '../utils';
 import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
 import { isPC, isUniFrameWork } from '../../../utils/env';
 import { SEARCH_TYPE, ISearchInputValue, ISearchMessageType, ISearchMessageTime } from '../type';
@@ -233,15 +138,13 @@ const props = defineProps({
     default: 'global', // "global" / "conversation"
     validator(value: string) {
       return ['global', 'conversation'].includes(value);
-    },
-  },
+    }
+  }
 });
 
 // search params
 const keywordList = ref<string[]>([]);
-const messageTypeList = ref<string | string[]>(
-  searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.value as string[],
-);
+const messageTypeList = ref<string | string[]>(searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.value as string[]);
 const timePosition = ref<number>(0);
 const timePeriod = ref<number>(0);
 // Search by "and" after splitting the whole string by space
@@ -249,9 +152,7 @@ const timePeriod = ref<number>(0);
 const keywordListMatchType = ref<string>('and');
 
 // current search tab key
-const currentSearchTabKey = ref<string>(
-  searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.key,
-);
+const currentSearchTabKey = ref<string>(searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.key);
 
 // search results all
 const searchResult = ref<{
@@ -267,9 +168,7 @@ const searchConversationMessageList = ref<IMessageModel[]>([]);
 const searchConversationMessageTotalCount = ref<number>();
 
 // search results for file messages/image and video messages, grouped by timeline
-const searchConversationResultGroupByDate = ref<
-  Array<{ date: string; list: IMessageModel[] }>
->([]);
+const searchConversationResultGroupByDate = ref<Array<{ date: string; list: IMessageModel[] }>>([]);
 
 // ui display control
 const isResultDetailShow = ref<boolean>(false);
@@ -306,11 +205,8 @@ function onCurrentSearchInputValueUpdate(obj: ISearchInputValue) {
 
 function onCurrentSearchMessageTypeUpdate(typeObject: ISearchMessageType) {
   if (typeObject?.searchType === props?.searchType) {
-    currentSearchTabKey.value
-        = typeObject?.value?.key || searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.key;
-    messageTypeList.value
-        = typeObject?.value?.value
-        || searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.value;
+    currentSearchTabKey.value = typeObject?.value?.key || searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.key;
+    messageTypeList.value = typeObject?.value?.value || searchMessageTypeDefault[props.searchType as SEARCH_TYPE]?.value;
   }
 }
 
@@ -323,91 +219,73 @@ function onCurrentSearchMessageTimeUpdate(timeObject: ISearchMessageTime) {
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdate,
+    currentConversationID: onCurrentConversationIDUpdate
   });
   TUIStore.watch(StoreName.SEARCH, {
     currentSearchInputValue: onCurrentSearchInputValueUpdate,
     currentSearchMessageType: onCurrentSearchMessageTypeUpdate,
-    currentSearchMessageTime: onCurrentSearchMessageTimeUpdate,
+    currentSearchMessageTime: onCurrentSearchMessageTimeUpdate
   });
 });
 
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdate,
+    currentConversationID: onCurrentConversationIDUpdate
   });
   TUIStore.unwatch(StoreName.SEARCH, {
     currentSearchInputValue: onCurrentSearchInputValueUpdate,
     currentSearchMessageType: onCurrentSearchMessageTypeUpdate,
-    currentSearchMessageTime: onCurrentSearchMessageTimeUpdate,
+    currentSearchMessageTime: onCurrentSearchMessageTimeUpdate
   });
 });
 
 const setMessageSearchResultList = (option?: { conversationID?: string | undefined; cursor?: string | undefined }) => {
-  searchCloudMessages(
-    {
-      keywordList: keywordList?.value?.length ? keywordList.value : undefined,
-      messageTypeList: typeof messageTypeList.value === 'string' ? [messageTypeList.value] : messageTypeList.value,
-      timePosition: timePosition.value,
-      timePeriod: timePeriod.value,
-      conversationID: option?.conversationID || undefined,
-      cursor: option?.cursor || undefined,
-      keywordListMatchType: keywordListMatchType.value,
-    } as SearchCloudMessagesParams,
-  )
-    .then((res: { data: ISearchCloudMessageResult }) => {
-      enableSampleTaskStatus('searchCloudMessage');
-      if (!option?.conversationID) {
-        option?.cursor
-          ? (searchAllMessageList.value = [
-              ...searchAllMessageList.value,
-              ...res.data.searchResultList,
-            ])
-          : (searchAllMessageList.value = res?.data?.searchResultList);
-        searchAllMessageTotalCount.value = res?.data?.totalCount;
-        const key = currentSearchTabKey.value === 'all' ? 'allMessage' : currentSearchTabKey.value;
-        if (
-          searchAllMessageList?.value?.length
-          && currentSearchTabKey.value !== 'contact'
-          && currentSearchTabKey.value !== 'group'
-        ) {
-          searchResult.value = Object.assign({}, searchResult.value, {
-            [key]: {
-              key,
-              label: searchMessageTypeList[key].label,
-              list: currentSearchTabKey.value === 'all'
-                ? searchAllMessageList?.value?.slice(0, 3)
-                : searchAllMessageList?.value,
-              cursor: res?.data?.cursor || null,
-            },
-          });
-        } else {
-          delete searchResult?.value[key];
-        }
+  searchCloudMessages({
+    keywordList: keywordList?.value?.length ? keywordList.value : undefined,
+    messageTypeList: typeof messageTypeList.value === 'string' ? [messageTypeList.value] : messageTypeList.value,
+    timePosition: timePosition.value,
+    timePeriod: timePeriod.value,
+    conversationID: option?.conversationID || undefined,
+    cursor: option?.cursor || undefined,
+    keywordListMatchType: keywordListMatchType.value
+  } as SearchCloudMessagesParams).then((res: { data: ISearchCloudMessageResult }) => {
+    enableSampleTaskStatus('searchCloudMessage');
+    if (!option?.conversationID) {
+      option?.cursor
+        ? (searchAllMessageList.value = [...searchAllMessageList.value, ...res.data.searchResultList])
+        : (searchAllMessageList.value = res?.data?.searchResultList);
+      searchAllMessageTotalCount.value = res?.data?.totalCount;
+      const key = currentSearchTabKey.value === 'all' ? 'allMessage' : currentSearchTabKey.value;
+      if (searchAllMessageList?.value?.length && currentSearchTabKey.value !== 'contact' && currentSearchTabKey.value !== 'group') {
+        searchResult.value = Object.assign({}, searchResult.value, {
+          [key]: {
+            key,
+            label: searchMessageTypeList[key].label,
+            list: currentSearchTabKey.value === 'all' ? searchAllMessageList?.value?.slice(0, 3) : searchAllMessageList?.value,
+            cursor: res?.data?.cursor || null
+          }
+        });
       } else {
-        searchConversationResult.value = res?.data;
-        option?.cursor
-          ? (searchConversationMessageList.value = [
-              ...searchConversationMessageList.value,
-              ...(res?.data?.searchResultList[0]?.messageList as IMessageModel[]),
-            ])
-          : (searchConversationMessageList.value = res?.data?.searchResultList[0]?.messageList);
-        searchConversationMessageTotalCount.value = res?.data?.totalCount;
-        if (
-          props?.searchType === 'conversation'
-          && (currentSearchTabKey.value === 'fileMessage'
-          || currentSearchTabKey.value === 'imageMessage')
-        ) {
-          searchConversationResultGroupByDate.value = groupResultListByDate(
-            searchConversationMessageList.value,
-          );
-        } else {
-          searchConversationResultGroupByDate.value = [];
-        }
+        delete searchResult?.value[key];
       }
-      isLoading.value = false;
-      isSearchDetailLoading.value = false;
-    });
+    } else {
+      searchConversationResult.value = res?.data;
+      option?.cursor
+        ? (searchConversationMessageList.value = [
+            ...searchConversationMessageList.value,
+            ...(res?.data?.searchResultList[0]?.messageList as IMessageModel[])
+          ])
+        : (searchConversationMessageList.value = res?.data?.searchResultList[0]?.messageList);
+      searchConversationMessageTotalCount.value = res?.data?.totalCount;
+      if (props?.searchType === 'conversation' && (currentSearchTabKey.value === 'fileMessage' || currentSearchTabKey.value === 'imageMessage')) {
+        searchConversationResultGroupByDate.value = groupResultListByDate(searchConversationMessageList.value);
+      } else {
+        searchConversationResultGroupByDate.value = [];
+      }
+    }
+    isLoading.value = false;
+    isSearchDetailLoading.value = false;
+  });
 };
 
 const setMessageSearchResultListDebounce = debounce(setMessageSearchResultList, 500);
@@ -434,12 +312,11 @@ watch(
     if (props.searchType === 'conversation') {
       resetSearchResult();
       setMessageSearchResultList({
-        conversationID: currentSearchConversationID.value,
+        conversationID: currentSearchConversationID.value
       });
     } else {
       if (oldValue && oldValue[1] === 'all' && newValue && newValue[1] === 'allMessage') {
-        searchResult?.value['allMessage']?.list
-        && (searchResult.value['allMessage'].list = searchAllMessageList?.value);
+        searchResult?.value['allMessage']?.list && (searchResult.value['allMessage'].list = searchAllMessageList?.value);
         Object?.keys(searchResult?.value)?.forEach((key: string) => {
           if (key !== 'allMessage') {
             delete searchResult?.value[key];
@@ -454,7 +331,7 @@ watch(
       setMessageSearchResultListDebounce();
     }
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 const getMoreResult = (result: { key: string; label: string; list: ISearchResultListItem[]; cursor: string | null }) => {
@@ -462,7 +339,7 @@ const getMoreResult = (result: { key: string; label: string; list: ISearchResult
     // View more at this time: Switch to the result corresponding to the corresponding result to display the full search results of its type
     TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
       value: searchMessageTypeList[result.key],
-      searchType: props.searchType,
+      searchType: props.searchType
     });
   } else {
     // View more results for a single video: Use the cursor as the search start position to pull the next part of the results
@@ -473,7 +350,7 @@ const getMoreResult = (result: { key: string; label: string; list: ISearchResult
 const getMoreResultInConversation = () => {
   setMessageSearchResultList({
     cursor: searchConversationResult?.value?.cursor,
-    conversationID: currentSearchConversationID?.value,
+    conversationID: currentSearchConversationID?.value
   });
 };
 
@@ -482,7 +359,7 @@ const showResultDetail = (isShow: boolean, targetType?: string, targetResult?: I
   if (targetType) {
     TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
       value: searchMessageTypeList[targetType],
-      searchType: props.searchType,
+      searchType: props.searchType
     });
   }
   currentSearchConversationID.value = (targetResult as ISearchResultListItem)?.conversation?.conversationID || '';
@@ -490,15 +367,13 @@ const showResultDetail = (isShow: boolean, targetType?: string, targetResult?: I
   if (targetResult) {
     isSearchDetailLoading.value = true;
     setMessageSearchResultListDebounce({
-      conversationID: currentSearchConversationID.value,
+      conversationID: currentSearchConversationID.value
     });
   }
 };
 
 const generateListItemClass = (item: ISearchResultListItem): string[] => {
-  return currentSearchConversationID.value === item?.conversation?.conversationID
-    ? ['list-item', 'list-item-selected']
-    : ['list-item'];
+  return currentSearchConversationID.value === item?.conversation?.conversationID ? ['list-item', 'list-item-selected'] : ['list-item'];
 };
 
 const generateResultItemDisplayType = (): string => {
@@ -513,9 +388,7 @@ const generateResultItemDisplayType = (): string => {
   }
 };
 
-const groupResultListByDate = (
-  messageList: IMessageModel[],
-): Array<{ date: string; list: IMessageModel[] }> => {
+const groupResultListByDate = (messageList: IMessageModel[]): Array<{ date: string; list: IMessageModel[] }> => {
   const result: Array<{ date: string; list: IMessageModel[] }> = [];
   if (!messageList?.length) {
     return result;
@@ -542,14 +415,15 @@ const navigateToChatPosition = (message: IMessageModel) => {
     // Global search, close the search container
     TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
       isSearching: false,
-      searchType: props.searchType,
+      searchType: props.searchType
     });
     // switch conversation
     TUIConversationService.switchConversation(message?.conversationID).then(() => {
       TUIStore.update(StoreName.CHAT, 'messageSource', message);
-      isUniFrameWork && TUIGlobal?.navigateTo({
-        url: '/TUIKit/components/TUIChat/index',
-      });
+      isUniFrameWork &&
+        TUIGlobal?.navigateTo({
+          url: '/TUIKit/components/TUIChat/index'
+        });
     });
   } else if (props.searchType === 'conversation') {
     // Search in conversation, close the search container
diff --git a/src/TUIKit/components/TUISearch/search-result/search-result-default/index.vue b/src/TUIKit/components/TUISearch/search-result/search-result-default/index.vue
index 0aaa4fa..1f237ce 100644
--- a/src/TUIKit/components/TUISearch/search-result/search-result-default/index.vue
+++ b/src/TUIKit/components/TUISearch/search-result/search-result-default/index.vue
@@ -1,13 +1,9 @@
 <template>
   <div :class="['search-result-default', !isPC && 'search-result-default-h5']">
     <div class="search-result-default-main">
-      <Icon
-        :file="SearchDefaultIcon"
-        width="88px"
-        height="75px"
-      />
+      <Icon :file="SearchDefaultIcon" width="88px" height="75px" />
       <div class="default-text">
-        {{ TUITranslateService.t("TUISearch.暂无搜索结果") }}
+        {{ TUITranslateService.t('TUISearch.暂无搜索结果') }}
       </div>
     </div>
   </div>
@@ -17,7 +13,6 @@ import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { isPC } from '../../../../utils/env';
 import Icon from '../../../common/Icon.vue';
 import SearchDefaultIcon from '../../../../assets/icon/search-default.svg';
-
 </script>
 <style scoped lang="scss">
 .search-result-default {
@@ -39,7 +34,7 @@ import SearchDefaultIcon from '../../../../assets/icon/search-default.svg';
     align-items: center;
 
     .default-text {
-      font-family: "PingFang SC", sans-serif;
+      font-family: 'PingFang SC', sans-serif;
       font-size: 14px;
       font-weight: 400;
       line-height: 20px;
diff --git a/src/TUIKit/components/TUISearch/search-result/search-result-item/index.vue b/src/TUIKit/components/TUISearch/search-result/search-result-item/index.vue
index 3147ace..1d21e16 100644
--- a/src/TUIKit/components/TUISearch/search-result/search-result-item/index.vue
+++ b/src/TUIKit/components/TUISearch/search-result/search-result-item/index.vue
@@ -5,22 +5,19 @@
       'search-result-list-item',
       !isPC && 'search-result-list-item-h5',
       'search-result-list-item-' + displayType,
-      isHovering && 'hover-' + displayType,
+      isHovering && 'hover-' + displayType
     ]"
     @click="onResultItemClicked"
     @mouseenter="setHoverStatus(true)"
     @mouseleave="setHoverStatus(false)"
   >
-    <div
-      v-if="displayType === 'info' || displayType === 'bubble'"
-      :class="[displayType]"
-    >
+    <div v-if="displayType === 'info' || displayType === 'bubble'" :class="[displayType]">
       <div :class="displayType + '-left'">
         <img
           :class="displayType + '-left-avatar'"
           :src="avatarForShow || ''"
           onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-        >
+        />
       </div>
       <div :class="[displayType + '-main']">
         <div :class="[displayType + '-main-name']">
@@ -56,69 +53,39 @@
         <div :class="displayType + '-right-time'">
           {{ timeForShow }}
         </div>
-        <div
-          v-if="displayType === 'bubble' && isHovering"
-          :class="displayType + '-right-to'"
-          @click.stop="navigateToChatPosition"
-        >
-          {{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
+        <div v-if="displayType === 'bubble' && isHovering" :class="displayType + '-right-to'" @click.stop="navigateToChatPosition">
+          {{ TUITranslateService.t('TUISearch.定位到聊天位置') }}
         </div>
       </div>
     </div>
-    <div
-      v-else-if="displayType === 'file'"
-      :class="[displayType]"
-    >
+    <div v-else-if="displayType === 'file'" :class="[displayType]">
       <div :class="[displayType + '-header']">
         <img
           :class="displayType + '-header-avatar'"
           :src="avatarForShow"
           onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-        >
+        />
         <div :class="[displayType + '-header-name']">
           {{ nameForShow }}
         </div>
-        <div
-          v-if="isHovering"
-          :class="displayType + '-header-to'"
-          @click.stop="navigateToChatPosition"
-        >
-          {{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
+        <div v-if="isHovering" :class="displayType + '-header-to'" @click.stop="navigateToChatPosition">
+          {{ TUITranslateService.t('TUISearch.定位到聊天位置') }}
         </div>
         <div :class="displayType + '-header-time'">
           {{ timeForShow }}
         </div>
       </div>
       <div :class="[displayType + '-main-content']">
-        <MessageAbstractFile
-          :contentText="contentForShow"
-          :messageContent="listItemContent"
-          displayType="bubble"
-        />
+        <MessageAbstractFile :contentText="contentForShow" :messageContent="listItemContent" displayType="bubble" />
       </div>
     </div>
-    <div
-      v-else-if="displayType === 'image'"
-      :class="[displayType]"
-    >
-      <div
-        class="image-container"
-        @click.stop="navigateToChatPosition"
-      >
-        <MessageAbstractImage
-          v-if="listItem.type === TYPES.MSG_IMAGE"
-          :messageContent="listItemContent"
-        />
-        <MessageAbstractVideo
-          v-else-if="listItem.type === TYPES.MSG_VIDEO"
-          :messageContent="listItemContent"
-        />
-        <div
-          v-if="isHovering"
-          class="image-container-hover"
-        >
+    <div v-else-if="displayType === 'image'" :class="[displayType]">
+      <div class="image-container" @click.stop="navigateToChatPosition">
+        <MessageAbstractImage v-if="listItem.type === TYPES.MSG_IMAGE" :messageContent="listItemContent" />
+        <MessageAbstractVideo v-else-if="listItem.type === TYPES.MSG_VIDEO" :messageContent="listItemContent" />
+        <div v-if="isHovering" class="image-container-hover">
           <div class="image-container-hover-text">
-            {{ TUITranslateService.t("TUISearch.定位到聊天位置") }}
+            {{ TUITranslateService.t('TUISearch.定位到聊天位置') }}
           </div>
         </div>
       </div>
@@ -138,7 +105,7 @@ import {
   generateSearchResultAvatar,
   generateSearchResultShowContent,
   generateSearchResultTime,
-  enterConversation,
+  enterConversation
 } from '../../utils';
 import { messageTypeAbstractMap, searchResultItemDisplayTypeValues, searchMessageTypeValues, IHighlightContent } from '../../type';
 import { ISearchResultListItem } from '../../../../interface';
@@ -155,7 +122,7 @@ const props = withDefaults(defineProps<IProps>(), {
   listItemContent: () => ({}) as Record<string, unknown>,
   type: 'allMessage',
   displayType: 'info',
-  keywordList: () => ([]) as string[],
+  keywordList: () => [] as string[]
 });
 
 const emits = defineEmits(['showResultDetail', 'navigateToChatPosition']);
@@ -171,15 +138,8 @@ const isHovering = ref<boolean>(false);
 watchEffect(() => {
   avatarForShow.value = generateSearchResultAvatar(props.listItem);
   nameForShow.value = generateSearchResultShowName(props.listItem, props?.listItemContent);
-  contentForShow.value = generateSearchResultShowContent(
-    props.listItem,
-    props.type,
-    props.keywordList as string[],
-    props?.displayType === 'info',
-  );
-  timeForShow.value = (props.listItem as IMessageModel)?.time
-    ? generateSearchResultTime((props.listItem as IMessageModel)?.time * 1000)
-    : '';
+  contentForShow.value = generateSearchResultShowContent(props.listItem, props.type, props.keywordList as string[], props?.displayType === 'info');
+  timeForShow.value = (props.listItem as IMessageModel)?.time ? generateSearchResultTime((props.listItem as IMessageModel)?.time * 1000) : '';
 });
 
 const onResultItemClicked = () => {
@@ -203,9 +163,7 @@ const navigateToChatPosition = () => {
 };
 
 const getMessageAbstractType = (message: IMessageModel | ISearchResultListItem) => {
-  return message?.type
-    ? TUITranslateService.t(`TUISearch.${messageTypeAbstractMap[message.type]}`)
-    : TUITranslateService.t(`TUISearch.[合并消息]`);
+  return message?.type ? TUITranslateService.t(`TUISearch.${messageTypeAbstractMap[message.type]}`) : TUITranslateService.t(`TUISearch.[合并消息]`);
 };
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>
diff --git a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-custom.vue b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-custom.vue
index 32595d9..1f77227 100644
--- a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-custom.vue
+++ b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-custom.vue
@@ -1,9 +1,6 @@
 <template>
   <!-- Custom message keyword keyword search description, so here only a few custom messages that need to display highlighted description type are parsed -->
-  <div
-    :class="['message-abstract-custom']"
-    @click.capture.stop
-  >
+  <div :class="['message-abstract-custom']" @click.capture.stop>
     <template v-if="businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
       <div :class="['service']">
         <h1 :class="['service-header']">
@@ -17,25 +14,10 @@
             {{ extensionJSON.hyperlinks_text.key }}
           </a>
         </h1>
-        <ul
-          v-if="extensionJSON.item && extensionJSON.item.length > 0"
-          :class="['service-list']"
-        >
-          <li
-            v-for="(item, index) in extensionJSON.item"
-            :key="index"
-            :class="['service-list-item']"
-          >
-            <a
-              v-if="isUrl(item.value)"
-              :class="['service-list-item-link', 'link']"
-              :href="item.value"
-              target="view_window"
-            >{{ item.key }}</a>
-            <p
-              v-else
-              :class="['service-list-item-key']"
-            >
+        <ul v-if="extensionJSON.item && extensionJSON.item.length > 0" :class="['service-list']">
+          <li v-for="(item, index) in extensionJSON.item" :key="index" :class="['service-list-item']">
+            <a v-if="isUrl(item.value)" :class="['service-list-item-link', 'link']" :href="item.value" target="view_window">{{ item.key }}</a>
+            <p v-else :class="['service-list-item-key']">
               {{ item.key }}
             </p>
           </li>
@@ -44,7 +26,7 @@
           <span
             v-for="(contentItem, index) in descriptionForShow"
             :key="index"
-            :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
+            :class="[contentItem && contentItem.isHighlight ? 'highlight' : 'normal']"
           >
             {{ contentItem.text }}
           </span>
@@ -57,24 +39,14 @@
           <span
             v-for="(contentItem, index) in descriptionForShow"
             :key="index"
-            :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
+            :class="[contentItem && contentItem.isHighlight ? 'highlight' : 'normal']"
           >
             {{ contentItem.text }}
           </span>
         </div>
-        <ul
-          v-if="extensionJSON.score"
-          class="evaluate-list"
-        >
-          <li
-            v-for="(item, index) in Math.max(extensionJSON.score, 0)"
-            :key="index"
-            class="evaluate-list-item"
-          >
-            <Icon
-              :file="star"
-              class="file-icon"
-            />
+        <ul v-if="extensionJSON.score" class="evaluate-list">
+          <li v-for="(item, index) in Math.max(extensionJSON.score, 0)" :key="index" class="evaluate-list-item">
+            <Icon :file="star" class="file-icon" />
           </li>
         </ul>
         <article>{{ extensionJSON.comment }}</article>
@@ -82,11 +54,7 @@
     </template>
     <template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
       <div class="order">
-        <img
-          class="order-image"
-          :src="extensionJSON.imageUrl"
-          alt=""
-        >
+        <img class="order-image" :src="extensionJSON.imageUrl" alt="" />
         <main class="order-main">
           <h1 class="order-main-title">
             {{ extensionJSON.title }}
@@ -95,7 +63,7 @@
             <span
               v-for="(contentItem, index) in descriptionForShow"
               :key="index"
-              :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
+              :class="[contentItem && contentItem.isHighlight ? 'highlight' : 'normal']"
             >
               {{ contentItem.text }}
             </span>
@@ -109,13 +77,7 @@
         <div :class="['text-link-description', 'description']">
           <p>{{ extensionJSON.text }}</p>
         </div>
-        <a
-          :class="['link']"
-          :href="extensionJSON.link"
-          target="view_window"
-        >{{
-          TUITranslateService.t("message.custom.查看详情>>")
-        }}</a>
+        <a :class="['link']" :href="extensionJSON.link" target="view_window">{{ TUITranslateService.t('message.custom.查看详情>>') }}</a>
       </div>
     </template>
     <template v-else>
@@ -138,21 +100,19 @@ interface IProps {
   messageContent: Record<string, unknown> | undefined;
 }
 const props = withDefaults(defineProps<IProps>(), {
-  contentText: () => ([]) as IHighlightContent[],
+  contentText: () => [] as IHighlightContent[],
   message: () => ({}) as IMessageModel,
-  messageContent: () => ({}) as Record<string, unknown>,
+  messageContent: () => ({}) as Record<string, unknown>
 });
 
-const custom = ref<{ data?: string; description?: string; extension?: string }>(
-  (props?.message as IMessageModel)?.payload,
-);
-const extensionJSON = computed(() => custom?.value?.data ? JSONToObject(custom.value.data) : custom?.value?.data);
+const custom = ref<{ data?: string; description?: string; extension?: string }>((props?.message as IMessageModel)?.payload);
+const extensionJSON = computed(() => (custom?.value?.data ? JSONToObject(custom.value.data) : custom?.value?.data));
 const businessID = computed(() => extensionJSON?.value?.businessID);
 const descriptionForShow = ref<Array<{ text: string; isHighlight: boolean }>>(props?.contentText);
-const defaultMessageContent = ref<string>(props?.messageContent?.custom as string || '[自定义消息]');
+const defaultMessageContent = ref<string>((props?.messageContent?.custom as string) || '[自定义消息]');
 </script>
 <style scoped lang="scss">
-@import "../../../../../assets/styles/common";
+@import '../../../../../assets/styles/common';
 
 .message-abstract-custom {
   .service {
diff --git a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-file.vue b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-file.vue
index 91b0536..8261b34 100644
--- a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-file.vue
+++ b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-file.vue
@@ -1,18 +1,11 @@
 <template>
   <div :class="['message-abstract-file', `message-abstract-file-${displayType}`]">
     <div :class="['message-abstract-file-left']">
-      <img
-        :class="['message-abstract-file-left-icon']"
-        :src="typeIcon.iconSrc"
-      >
+      <img :class="['message-abstract-file-left-icon']" :src="typeIcon.iconSrc" />
     </div>
     <div :class="['message-abstract-file-main']">
       <div :class="['message-abstract-file-main-name']">
-        <span
-          v-for="(contentItem, index) in contentText"
-          :key="index"
-          :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
-        >
+        <span v-for="(contentItem, index) in contentText" :key="index" :class="[contentItem && contentItem.isHighlight ? 'highlight' : 'normal']">
           {{ contentItem.text }}
         </span>
       </div>
@@ -32,9 +25,9 @@ interface IProps {
   displayType: 'bubble' | 'info';
 }
 const props = withDefaults(defineProps<IProps>(), {
-  contentText: () => ([]) as Array<IHighlightContent>,
+  contentText: () => [] as Array<IHighlightContent>,
   messageContent: () => ({}) as Record<string, unknown>,
-  displayType: 'bubble',
+  displayType: 'bubble'
 });
 
 const contentText = ref<Array<{ text: string; isHighlight: boolean }>>(props.contentText);
@@ -47,18 +40,7 @@ const typeIcon = computed(() => {
 const fileSize = computed(() => props?.messageContent?.size);
 const handleFileIconForShow = (type: string) => {
   const urlBase = 'https://web.sdk.qcloud.com/component/TUIKit/assets/file-';
-  const fileTypes = [
-    'image',
-    'pdf',
-    'text',
-    'ppt',
-    'presentation',
-    'sheet',
-    'zip',
-    'word',
-    'video',
-    'unknown',
-  ];
+  const fileTypes = ['image', 'pdf', 'text', 'ppt', 'presentation', 'sheet', 'zip', 'word', 'video', 'unknown'];
   let url = '';
   let iconType = '';
   fileTypes?.forEach((typeName: string) => {
@@ -69,13 +51,13 @@ const handleFileIconForShow = (type: string) => {
   });
   return {
     iconSrc: url ? url : urlBase + 'unknown.svg',
-    iconType: iconType ? iconType : 'unknown',
+    iconType: iconType ? iconType : 'unknown'
   };
 };
 </script>
 
 <style scoped lang="scss">
-@import "../../../../../assets/styles/common";
+@import '../../../../../assets/styles/common';
 
 .message-abstract-file {
   display: flex;
diff --git a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-image.vue b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-image.vue
index 279d03d..d832a20 100644
--- a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-image.vue
+++ b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-image.vue
@@ -1,9 +1,6 @@
 <template>
   <div :class="['message-abstract-image-container']">
-    <img
-      :class="['message-abstract-image']"
-      :src="imageUrl"
-    >
+    <img :class="['message-abstract-image']" :src="imageUrl" />
   </div>
 </template>
 <script setup lang="ts">
@@ -13,13 +10,13 @@ interface IProps {
   messageContent: Record<string, unknown> | IImageMessageContent | undefined;
 }
 const props = withDefaults(defineProps<IProps>(), {
-  messageContent: () => ({}) as IImageMessageContent,
+  messageContent: () => ({}) as IImageMessageContent
 });
 
 const imageUrl = computed<string>(() => (props.messageContent as IImageMessageContent).url || '');
 </script>
 <style scoped lang="scss">
-@import "../../../../../assets/styles/common";
+@import '../../../../../assets/styles/common';
 
 .message-abstract-image-container {
   max-width: 100px;
diff --git a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-text.vue b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-text.vue
index 13303bb..d6e6b3a 100644
--- a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-text.vue
+++ b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-text.vue
@@ -1,16 +1,6 @@
 <template>
-  <div
-    :class="[
-      'message-abstract-text',
-      `message-abstract-text-${highlightType}`,
-      `message-abstract-text-${displayType}`,
-    ]"
-  >
-    <span
-      v-for="(contentItem, index) in contentText"
-      :key="index"
-      :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
-    >
+  <div :class="['message-abstract-text', `message-abstract-text-${highlightType}`, `message-abstract-text-${displayType}`]">
+    <span v-for="(contentItem, index) in contentText" :key="index" :class="[contentItem && contentItem.isHighlight ? 'highlight' : 'normal']">
       {{ transformTextWithKeysToEmojiNames(contentItem.text) }}
     </span>
   </div>
@@ -26,15 +16,15 @@ interface IProps {
   displayType: 'info' | 'bubble';
 }
 const props = withDefaults(defineProps<IProps>(), {
-  content: () => ([]) as IHighlightContent[],
+  content: () => [] as IHighlightContent[],
   highlightType: 'font',
-  displayType: 'info',
+  displayType: 'info'
 });
 
 const contentText = ref<Array<{ text: string; isHighlight: boolean }>>(props.content);
 </script>
 <style scoped lang="scss">
-@import "../../../../../assets/styles/common";
+@import '../../../../../assets/styles/common';
 
 .message-abstract-text {
   justify-content: flex-start;
diff --git a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-video.vue b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-video.vue
index 8620833..5e53724 100644
--- a/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-video.vue
+++ b/src/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-video.vue
@@ -1,14 +1,8 @@
 <template>
   <div :class="['message-abstract-video']">
     <div class="message-abstract-video-box">
-      <img
-        :src="videoUrl"
-        :class="['video-snapshot']"
-      >
-      <Icon
-        :file="playIcon"
-        class="video-play"
-      />
+      <img :src="videoUrl" :class="['video-snapshot']" />
+      <Icon :file="playIcon" class="video-play" />
     </div>
   </div>
 </template>
@@ -21,14 +15,14 @@ interface IProps {
   messageContent: Record<string, unknown> | IVideoMessageContent | undefined;
 }
 const props = withDefaults(defineProps<IProps>(), {
-  messageContent: () => ({}) as IVideoMessageContent,
+  messageContent: () => ({}) as IVideoMessageContent
 });
 const videoUrl = computed<string>(() => {
   return (props.messageContent as IVideoMessageContent).snapshotUrl || (props.messageContent as IVideoMessageContent).url;
 });
 </script>
 <style scoped lang="scss">
-@import "../../../../../assets/styles/common";
+@import '../../../../../assets/styles/common';
 
 .message-abstract-video {
   max-width: 100px;
@@ -67,4 +61,5 @@ const videoUrl = computed<string>(() => {
       margin: auto;
     }
   }
-}</style>
+}
+</style>
diff --git a/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.vue b/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.vue
index 271d2e6..2327989 100644
--- a/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.vue
+++ b/src/TUIKit/components/TUISearch/search-result/search-result-loading/index.vue
@@ -1,9 +1,6 @@
 <template>
   <div :class="['search-result-loading', !isPC && 'search-result-loading-h5']">
-    <Loading
-      width="40px"
-      height="40px"
-    />
+    <Loading width="40px" height="40px" />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/src/TUIKit/components/TUISearch/search-time-list.ts b/src/TUIKit/components/TUISearch/search-time-list.ts
index fb43454..43f54f3 100644
--- a/src/TUIKit/components/TUISearch/search-time-list.ts
+++ b/src/TUIKit/components/TUISearch/search-time-list.ts
@@ -12,33 +12,33 @@ export const searchMessageTimeList: {
     label: '全部',
     value: {
       timePosition: 0,
-      timePeriod: 0,
-    },
+      timePeriod: 0
+    }
   },
   oneDay: {
     key: 'today',
     label: '今天',
     value: {
       timePosition: 0,
-      timePeriod: oneDay,
-    },
+      timePeriod: oneDay
+    }
   },
   threeDay: {
     key: 'threeDays',
     label: '近三天',
     value: {
       timePosition: 0,
-      timePeriod: 3 * oneDay,
-    },
+      timePeriod: 3 * oneDay
+    }
   },
   sevenDay: {
     key: 'sevenDays',
     label: '近七天',
     value: {
       timePosition: 0,
-      timePeriod: 7 * oneDay,
-    },
-  },
+      timePeriod: 7 * oneDay
+    }
+  }
 };
 
 export const searchMessageTimeKeys = Object.keys(searchMessageTimeList);
diff --git a/src/TUIKit/components/TUISearch/search-type-list.ts b/src/TUIKit/components/TUISearch/search-type-list.ts
index 2ad6642..b3d1aac 100644
--- a/src/TUIKit/components/TUISearch/search-type-list.ts
+++ b/src/TUIKit/components/TUISearch/search-type-list.ts
@@ -14,50 +14,43 @@ export const allMessageTypeList = [
   TUIChatEngine.TYPES.MSG_AUDIO,
   TUIChatEngine.TYPES.MSG_LOCATION,
   TUIChatEngine.TYPES.MSG_CUSTOM,
-  TUIChatEngine.TYPES.MSG_MERGER,
+  TUIChatEngine.TYPES.MSG_MERGER
 ];
 export const searchMessageTypeList: ISearchMessageTypeList = {
   allMessage: {
     key: 'allMessage',
     label: '全部',
-    value: allMessageTypeList,
+    value: allMessageTypeList
   },
   textMessage: {
     key: 'textMessage',
     label: '文本',
-    value: [TUIChatEngine.TYPES.MSG_TEXT],
+    value: [TUIChatEngine.TYPES.MSG_TEXT]
   },
   fileMessage: {
     key: 'fileMessage',
     label: '文件',
-    value: [TUIChatEngine.TYPES.MSG_FILE],
+    value: [TUIChatEngine.TYPES.MSG_FILE]
   },
   imageMessage: {
     key: 'imageMessage',
     label: '图片/视频',
-    value: [TUIChatEngine.TYPES.MSG_IMAGE, TUIChatEngine.TYPES.MSG_VIDEO],
+    value: [TUIChatEngine.TYPES.MSG_IMAGE, TUIChatEngine.TYPES.MSG_VIDEO]
   },
   otherMessage: {
     key: 'otherMessage',
     label: '其他',
-    value: [
-      TUIChatEngine.TYPES.MSG_AUDIO,
-      TUIChatEngine.TYPES.MSG_LOCATION,
-      TUIChatEngine.TYPES.MSG_CUSTOM,
-      TUIChatEngine.TYPES.MSG_MERGER,
-    ],
-  },
+    value: [TUIChatEngine.TYPES.MSG_AUDIO, TUIChatEngine.TYPES.MSG_LOCATION, TUIChatEngine.TYPES.MSG_CUSTOM, TUIChatEngine.TYPES.MSG_MERGER]
+  }
 };
 
 export const searchMessageTypeKeys = Object.keys(searchMessageTypeList);
-export const searchMessageSingleTypeKeys = Object.keys(searchMessageTypeList).filter(
-  (key: string) => key !== 'all',
-);
+export const searchMessageSingleTypeKeys = Object.keys(searchMessageTypeList).filter((key: string) => key !== 'all');
 export const searchInGlobalDefaultType = searchMessageTypeList['allMessage'];
 export const searchInConversationDefaultType = searchMessageTypeList['textMessage'];
 export const searchMessageTypeDefault = {
   global: searchInGlobalDefaultType,
-  conversation: searchInConversationDefaultType,
+  conversation: searchInConversationDefaultType
 };
 
 // Global search type key list
@@ -71,12 +64,7 @@ export const globalSearchTypeList = Object.keys(searchMessageTypeList)
   }, {});
 
 // Search type key list in session
-export const conversationSearchTypeKeys = [
-  'textMessage',
-  'fileMessage',
-  'imageMessage',
-  'otherMessage',
-];
+export const conversationSearchTypeKeys = ['textMessage', 'fileMessage', 'imageMessage', 'otherMessage'];
 // Search type list in session
 export const conversationSearchTypeList = Object.keys(searchMessageTypeList)
   .filter((key: string) => conversationSearchTypeKeys?.includes(key))
diff --git a/src/TUIKit/components/TUISearch/server.ts b/src/TUIKit/components/TUISearch/server.ts
index c0f0821..3bcb023 100644
--- a/src/TUIKit/components/TUISearch/server.ts
+++ b/src/TUIKit/components/TUISearch/server.ts
@@ -1,11 +1,5 @@
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import {
-  TUIUserService,
-  TUIGroupService,
-  TUIFriendService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine';
+import { TUIUserService, TUIGroupService, TUIFriendService, TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
 import { isUniFrameWork } from '../../utils/env';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 
@@ -36,16 +30,17 @@ export default class TUISearchServer {
         text: '搜索',
         icon: 'https://web.sdk.qcloud.com/component/TUIKit/assets/message-search.svg',
         data: {
-          name: 'search',
+          name: 'search'
         },
         listener: {
           onClicked: () => {
             TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', true);
-            isUniFrameWork && TUIGlobal?.navigateTo({
-              url: '/TUIKit/components/TUISearch/index',
-            });
-          },
-        },
+            isUniFrameWork &&
+              TUIGlobal?.navigateTo({
+                url: '/TUIKit/components/TUISearch/index'
+              });
+          }
+        }
       };
       list.push(searchExtension);
       return list;
@@ -67,7 +62,7 @@ export default class TUISearchServer {
   public async searchGroupMember(groupID: string, userID: string) {
     return TUIGroupService.getGroupMemberProfile({
       groupID,
-      userIDList: [userID],
+      userIDList: [userID]
     });
   }
 }
diff --git a/src/TUIKit/components/TUISearch/type.ts b/src/TUIKit/components/TUISearch/type.ts
index 32a214f..d3b451b 100644
--- a/src/TUIKit/components/TUISearch/type.ts
+++ b/src/TUIKit/components/TUISearch/type.ts
@@ -14,18 +14,18 @@ export const messageTypeAbstractMap: Record<string, string> = {
   [TUIChatEngine.TYPES.MSG_CUSTOM]: '[自定义消息]',
   [TUIChatEngine.TYPES.MSG_SYSTEM]: '[系统消息]',
   [TUIChatEngine.TYPES.MSG_MERGER]: '[合并消息]',
-  [TUIChatEngine.TYPES.MSG_LOCATION]: '[位置消息]',
+  [TUIChatEngine.TYPES.MSG_LOCATION]: '[位置消息]'
 };
 
 export const searchResultItemDisplayType = {
   INFO: 'info', // Normal information flow display
   BUBBLE: 'bubble', // Message bubble display
   FILE: 'file', // File list type display
-  IMAGE: 'image', // Picture collection display
+  IMAGE: 'image' // Picture collection display
 };
 
 export type searchResultItemDisplayTypeKeys = keyof typeof searchResultItemDisplayType;
-export type searchResultItemDisplayTypeValues = typeof searchResultItemDisplayType[searchResultItemDisplayTypeKeys];
+export type searchResultItemDisplayTypeValues = (typeof searchResultItemDisplayType)[searchResultItemDisplayTypeKeys];
 
 export const searchMessageType = {
   // CONTACT: "contact", // Contact search, not supported yet
@@ -34,11 +34,11 @@ export const searchMessageType = {
   TEXT_MESSAGE: 'textMessage',
   IMAGE_MESSAGE: 'imageMessage',
   FILE_MESSAGE: 'fileMessage',
-  OTHER_MESSAGE: 'otherMessage',
+  OTHER_MESSAGE: 'otherMessage'
 };
 
 export type searchMessageTypeKeys = keyof typeof searchMessageType;
-export type searchMessageTypeValues = typeof searchMessageType[searchMessageTypeKeys];
+export type searchMessageTypeValues = (typeof searchMessageType)[searchMessageTypeKeys];
 
 export interface ISearchInputValue {
   value: string;
diff --git a/src/TUIKit/components/TUISearch/utils.ts b/src/TUIKit/components/TUISearch/utils.ts
index bb24e1c..1cd32a1 100644
--- a/src/TUIKit/components/TUISearch/utils.ts
+++ b/src/TUIKit/components/TUISearch/utils.ts
@@ -8,7 +8,7 @@ import TUIChatEngine, {
   IGroupModel,
   TUIStore,
   StoreName,
-  IMessageModel,
+  IMessageModel
 } from '@tencentcloud/chat-uikit-engine';
 import { ISearchCloudMessageResult, IFriendType, ISearchResultListItem, IUserProfile } from '../../interface';
 import { searchMessageTypeList } from './search-type-list';
@@ -21,9 +21,7 @@ import { TUIGlobal } from '@tencentcloud/universal-api';
  * TUISearch search logic
  **************************************/
 
-export const searchCloudMessages = (
-  params: SearchCloudMessagesParams,
-): Promise<{ data: ISearchCloudMessageResult }> => {
+export const searchCloudMessages = (params: SearchCloudMessagesParams): Promise<{ data: ISearchCloudMessageResult }> => {
   return TUIChatService.searchCloudMessages(params)
     .then((imResponse) => {
       return imResponse;
@@ -32,7 +30,7 @@ export const searchCloudMessages = (
       Toast({
         message: TUITranslateService.t('TUISearch.消息云端搜索失败：') + error?.message,
         type: TOAST_TYPE.ERROR,
-        duration: 3000,
+        duration: 3000
       });
       return null;
     });
@@ -49,7 +47,7 @@ export const searchFriends = (userIDList: any[]): Promise<any[]> => {
       Toast({
         message: TUITranslateService.t('TUISearch.查找联系人失败：') + error?.message,
         type: TOAST_TYPE.ERROR,
-        duration: 1000,
+        duration: 1000
       });
       return null;
     });
@@ -73,13 +71,13 @@ export const searchGroups = (groupIDList: any[]): Promise<any[]> => {
   });
   return Promise.all(promiseList)
     .then((imResponse) => {
-      return imResponse.filter(x => x !== undefined);
+      return imResponse.filter((x) => x !== undefined);
     })
     .catch((error) => {
       Toast({
         message: TUITranslateService.t('TUISearch.查找群聊失败：') + error?.message,
         type: TOAST_TYPE.ERROR,
-        duration: 1000,
+        duration: 1000
       });
       return [];
     });
@@ -90,28 +88,28 @@ export const searchGroups = (groupIDList: any[]): Promise<any[]> => {
  **************************************/
 // switch conversation
 export const enterConversation = (item: { conversationID?: string; groupID?: string; userID?: string }) => {
-  const conversationID
-    = item?.conversationID || (item?.groupID ? `GROUP${item?.groupID}` : `C2C${item?.userID}`);
+  const conversationID = item?.conversationID || (item?.groupID ? `GROUP${item?.groupID}` : `C2C${item?.userID}`);
   TUIConversationService.switchConversation(conversationID)
     .then(() => {
       TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
         isSearching: false,
-        searchType: 'global',
+        searchType: 'global'
       });
       TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
         value: '',
-        searchType: 'global',
-      });
-      isUniFrameWork && TUIGlobal?.navigateTo({
-        url: '/TUIKit/components/TUIChat/index',
+        searchType: 'global'
       });
+      isUniFrameWork &&
+        TUIGlobal?.navigateTo({
+          url: '/TUIKit/components/TUIChat/index'
+        });
     })
     .catch((error) => {
       console.warn('switch conversation failed:', error?.message);
       Toast({
         message: TUITranslateService.t('TUISearch.进入会话失败'),
         type: TOAST_TYPE.ERROR,
-        duration: 1000,
+        duration: 1000
       });
     });
 };
@@ -119,7 +117,10 @@ export const enterConversation = (item: { conversationID?: string; groupID?: str
 /**************************************
  * TUISearch UI display logic
  **************************************/
-export const generateSearchResultShowName = (result: IMessageModel | ISearchResultListItem | IGroupModel | IFriendType | IUserProfile, resultContent: Record<string, string>): string => {
+export const generateSearchResultShowName = (
+  result: IMessageModel | ISearchResultListItem | IGroupModel | IFriendType | IUserProfile,
+  resultContent: Record<string, string>
+): string => {
   if (!result) {
     return '';
   }
@@ -136,7 +137,10 @@ export const generateSearchResultShowName = (result: IMessageModel | ISearchResu
     if (typeof (result as ISearchResultListItem).conversation.getShowName === 'function') {
       return (result as ISearchResultListItem).conversation.getShowName();
     } else {
-      return TUIStore.getConversationModel((result as ISearchResultListItem).conversation.conversationID)?.getShowName?.() || (result as ISearchResultListItem).conversation.conversationID;
+      return (
+        TUIStore.getConversationModel((result as ISearchResultListItem).conversation.conversationID)?.getShowName?.() ||
+        (result as ISearchResultListItem).conversation.conversationID
+      );
     }
   }
   return '';
@@ -170,18 +174,18 @@ export const generateSearchResultShowContent = (
   result: IMessageModel | ISearchResultListItem | IGroupModel | IUserProfile,
   resultType: string,
   keywordList: any[],
-  isTypeShow = true,
+  isTypeShow = true
 ): any[] => {
   if ((result as IGroupModel)?.groupID) {
     return [
       { text: 'groupID: ', isHighlight: false },
-      { text: (result as IGroupModel).groupID, isHighlight: true },
+      { text: (result as IGroupModel).groupID, isHighlight: true }
     ];
   }
   if ((result as IUserProfile)?.userID) {
     return [
       { text: 'userID: ', isHighlight: false },
-      { text: (result as IUserProfile).userID, isHighlight: true },
+      { text: (result as IUserProfile).userID, isHighlight: true }
     ];
   }
   if ((result as ISearchResultListItem)?.conversation || (result as IMessageModel)?.flow) {
@@ -191,16 +195,13 @@ export const generateSearchResultShowContent = (
       // File type message, display [file] file name + keyword highlight
       // Custom type message, display [custom message] description + keyword highlight
       // Other types of messages, display [message type]
-      const message: IMessageModel = (result as IMessageModel)?.flow
-        ? (result as IMessageModel)
-        : (result as ISearchResultListItem)?.messageList[0];
-      const text
-        = message?.payload?.text || message?.payload?.fileName || message?.payload?.description;
+      const message: IMessageModel = (result as IMessageModel)?.flow ? (result as IMessageModel) : (result as ISearchResultListItem)?.messageList[0];
+      const text = message?.payload?.text || message?.payload?.fileName || message?.payload?.description;
       const abstract: any[] = [];
       if (message?.type && isTypeShow && message.type !== TUIChatEngine.TYPES.MSG_TEXT) {
         abstract.push({
           text: TUITranslateService.t(`TUISearch.${messageTypeAbstractMap[message.type]}`),
-          isHighlight: false,
+          isHighlight: false
         });
       }
       abstract.push(...generateMessageContentHighlight(text, keywordList));
@@ -208,14 +209,11 @@ export const generateSearchResultShowContent = (
     } else {
       return [
         {
-          text: `${(result as ISearchResultListItem)?.messageCount}${TUITranslateService.t(
-            'TUISearch.条相关',
-          )}${TUITranslateService.t(
-            `TUISearch.${resultType === 'allMessage' ? '结果' : searchMessageTypeList[resultType]?.label
-            }`,
+          text: `${(result as ISearchResultListItem)?.messageCount}${TUITranslateService.t('TUISearch.条相关')}${TUITranslateService.t(
+            `TUISearch.${resultType === 'allMessage' ? '结果' : searchMessageTypeList[resultType]?.label}`
           )}`,
-          isHighlight: false,
-        },
+          isHighlight: false
+        }
       ];
     }
   }
@@ -223,10 +221,7 @@ export const generateSearchResultShowContent = (
 };
 
 // Parse the search message results [highlight keywords] position
-export const generateMessageContentHighlight = (
-  content: string,
-  keywordList: any[],
-): any[] => {
+export const generateMessageContentHighlight = (content: string, keywordList: any[]): any[] => {
   if (!content || !keywordList || !keywordList.length) {
     return [{ text: content || '', isHighlight: false }];
   }
@@ -298,26 +293,18 @@ export const generateSearchResultTime = (timestamp: number): string => {
     return `${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
   } else if (diff <= oneDay) {
     // yesterday, display yesterday:hour:minute
-    return `${TUITranslateService.t('time.昨天')} ${formatNum(target.getHours())}:${formatNum(
-      target.getMinutes(),
-    )}`;
+    return `${TUITranslateService.t('time.昨天')} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
   } else if (diff <= oneWeek - oneDay) {
     // Within a week, display weekday hour:minute
     const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
     const weekday = weekdays[target.getDay()];
-    return `${TUITranslateService.t('time.' + weekday)} ${formatNum(target.getHours())}:${formatNum(
-      target.getMinutes(),
-    )}`;
+    return `${TUITranslateService.t('time.' + weekday)} ${formatNum(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(
-      target.getHours(),
-    )}:${formatNum(target.getMinutes())}`;
+    return `${target.getMonth() + 1}/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
   } else {
     // Not within this year, display year/mouth/day hour:minute
-    return `${target.getFullYear()}/${target.getMonth() + 1}/${target.getDate()} ${formatNum(
-      target.getHours(),
-    )}:${formatNum(target.getMinutes())}`;
+    return `${target.getFullYear()}/${target.getMonth() + 1}/${target.getDate()} ${formatNum(target.getHours())}:${formatNum(target.getMinutes())}`;
   }
 };
 
diff --git a/src/TUIKit/components/common/Avatar/index.vue b/src/TUIKit/components/common/Avatar/index.vue
index 1bd894b..0a50b7b 100644
--- a/src/TUIKit/components/common/Avatar/index.vue
+++ b/src/TUIKit/components/common/Avatar/index.vue
@@ -4,7 +4,7 @@
     :style="{
       width: avatarSize,
       height: avatarSize,
-      borderRadius: avatarBorderRadius,
+      borderRadius: avatarBorderRadius
     }"
   >
     <template v-if="isUniFrameWork">
@@ -15,21 +15,9 @@
         @load="avatarLoadSuccess"
         @error="avatarLoadFailed"
       />
-      <image
-        v-else
-        class="avatar-image"
-        :src="defaultAvatarUrl"
-        @load="avatarLoadSuccess"
-        @error="avatarLoadFailed"
-      />
+      <image v-else class="avatar-image" :src="defaultAvatarUrl" @load="avatarLoadSuccess" @error="avatarLoadFailed" />
     </template>
-    <img
-      v-else
-      class="avatar-image"
-      :src="avatarImageUrl || defaultAvatarUrl"
-      @load="avatarLoadSuccess"
-      @error="avatarLoadFailed"
-    >
+    <img v-else class="avatar-image" :src="avatarImageUrl || defaultAvatarUrl" @load="avatarLoadSuccess" @error="avatarLoadFailed" />
     <div
       v-if="useAvatarSkeletonAnimation && !isImgLoaded"
       :class="{
@@ -64,15 +52,10 @@ const props = withDefaults(defineProps<IProps>(), {
   url: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png',
   size: '36px',
   borderRadius: '5px',
-  useSkeletonAnimation: false,
+  useSkeletonAnimation: false
 });
 
-const {
-  size: avatarSize,
-  url: avatarImageUrl,
-  borderRadius: avatarBorderRadius,
-  useSkeletonAnimation: useAvatarSkeletonAnimation,
-} = toRefs(props);
+const { size: avatarSize, url: avatarImageUrl, borderRadius: avatarBorderRadius, useSkeletonAnimation: useAvatarSkeletonAnimation } = toRefs(props);
 
 let reloadAvatarTime = 0;
 const isImgLoaded = ref<boolean>(false);
diff --git a/src/TUIKit/components/common/BottomPopup/index.vue b/src/TUIKit/components/common/BottomPopup/index.vue
index 34392e9..9532c1c 100644
--- a/src/TUIKit/components/common/BottomPopup/index.vue
+++ b/src/TUIKit/components/common/BottomPopup/index.vue
@@ -7,12 +7,7 @@
   <div v-if="props.show">
     <div
       v-if="!isPC"
-      :class="[
-        'bottom-popup',
-        !isPC && 'bottom-popup-h5',
-        !isPC && props.modal && 'bottom-popup-modal',
-        isUniFrameWork && 'bottom-popup-uni',
-      ]"
+      :class="['bottom-popup', !isPC && 'bottom-popup-h5', !isPC && props.modal && 'bottom-popup-modal', isUniFrameWork && 'bottom-popup-uni']"
       @click="closeBottomPopup"
     >
       <div
@@ -21,37 +16,21 @@
         :style="{
           height: props.height,
           borderTopLeftRadius: props.borderRadius,
-          borderTopRightRadius: props.borderRadius,
+          borderTopRightRadius: props.borderRadius
         }"
         @click.stop
       >
-        <div
-          v-if="title || showHeaderCloseButton"
-          class="header"
-        >
-          <div
-            v-if="title"
-            class="header-title"
-          >
+        <div v-if="title || showHeaderCloseButton" class="header">
+          <div v-if="title" class="header-title">
             {{ title }}
           </div>
-          <div
-            v-if="showHeaderCloseButton"
-            class="header-close"
-            @click="closeBottomPopup"
-          >
-            {{ TUITranslateService.t("关闭") }}
+          <div v-if="showHeaderCloseButton" class="header-close" @click="closeBottomPopup">
+            {{ TUITranslateService.t('关闭') }}
           </div>
         </div>
         <slot />
-        <div
-          v-if="showFooterSubmitButton"
-          class="footer"
-        >
-          <div
-            class="footer-submit"
-            @click="submit"
-          >
+        <div v-if="showFooterSubmitButton" class="footer">
+          <div class="footer-submit" @click="submit">
             {{ submitButtonContent }}
           </div>
         </div>
@@ -70,48 +49,48 @@ const props = defineProps({
   // Whether to display the bottom pop-up dialog box
   show: {
     type: Boolean,
-    default: false,
+    default: false
   },
   // Whether a mask layer is required, the default is true
   modal: {
     type: Boolean,
-    default: true,
+    default: true
   },
   // Popup box content area height (excluding mask), default is fit-content
   height: {
     type: String,
-    default: 'fit-content',
+    default: 'fit-content'
   },
   // Whether the pop-up dialog box can be closed by clicking outside, the default is true
   // uniapp only supports closing the pop-up dialog box by clicking the mask
   closeByClickOutside: {
     type: Boolean,
-    default: true,
+    default: true
   },
   // The rounded angle of the top border corners is 0px by default, i.e. right angle by default
   borderRadius: {
     type: String,
-    default: '0px',
+    default: '0px'
   },
   title: {
     type: String,
-    default: '',
+    default: ''
   },
   // Whether to display the top close button, not displayed by default
   showHeaderCloseButton: {
     type: Boolean,
-    default: false,
+    default: false
   },
   // Whether to display the submit button at the bottom, not displayed by default
   showFooterSubmitButton: {
     type: Boolean,
-    default: false,
+    default: false
   },
   // Bottom submit button text, only valid when showFooterSubmitButton is true
   submitButtonContent: {
     type: String,
-    default: () => TUITranslateService.t('确定'),
-  },
+    default: () => TUITranslateService.t('确定')
+  }
 });
 
 const emits = defineEmits(['onOpen', 'onClose', 'onSubmit']);
@@ -132,7 +111,7 @@ watch(
             if (props.closeByClickOutside) {
               outsideClick.listen({
                 domRefs: dialogRef.value,
-                handler: closeBottomPopup,
+                handler: closeBottomPopup
               });
             }
           }
@@ -142,7 +121,7 @@ watch(
         emits('onClose', dialogRef);
         break;
     }
-  },
+  }
 );
 
 const closeBottomPopup = () => {
diff --git a/src/TUIKit/components/common/DatePicker/date-picker-panel.vue b/src/TUIKit/components/common/DatePicker/date-picker-panel.vue
index 985e851..f3da919 100644
--- a/src/TUIKit/components/common/DatePicker/date-picker-panel.vue
+++ b/src/TUIKit/components/common/DatePicker/date-picker-panel.vue
@@ -1,32 +1,13 @@
 <template>
-  <div
-    :class="[n('')]"
-    @mouseup.stop
-  >
+  <div :class="[n('')]" @mouseup.stop>
     <div :class="[n('body')]">
       <div :class="[n('body-header')]">
         <div :class="[n('body-header-prev')]">
-          <div
-            v-if="canYearLess"
-            :class="[n('icon')]"
-            @click="change('year', -1)"
-          >
-            <Icon
-              :file="dLeftArrowIcon"
-              :width="'12px'"
-              :height="'12px'"
-            />
+          <div v-if="canYearLess" :class="[n('icon')]" @click="change('year', -1)">
+            <Icon :file="dLeftArrowIcon" :width="'12px'" :height="'12px'" />
           </div>
-          <div
-            v-if="canMonthLess"
-            :class="[n('icon')]"
-            @click="change('month', -1)"
-          >
-            <Icon
-              :file="leftArrowIcon"
-              :width="'10px'"
-              :height="'10px'"
-            />
+          <div v-if="canMonthLess" :class="[n('icon')]" @click="change('month', -1)">
+            <Icon :file="leftArrowIcon" :width="'10px'" :height="'10px'" />
           </div>
         </div>
         <div :class="[n('body-header-label')]">
@@ -38,27 +19,11 @@
           </div>
         </div>
         <div :class="[n('body-header-next')]">
-          <div
-            v-if="canMonthMore"
-            :class="[n('icon')]"
-            @click="change('month', 1)"
-          >
-            <Icon
-              :file="rightArrowIcon"
-              :width="'10px'"
-              :height="'10px'"
-            />
+          <div v-if="canMonthMore" :class="[n('icon')]" @click="change('month', 1)">
+            <Icon :file="rightArrowIcon" :width="'10px'" :height="'10px'" />
           </div>
-          <div
-            v-if="canYearMore"
-            :class="[n('icon')]"
-            @click="change('year', 1)"
-          >
-            <Icon
-              :file="dRightArrowIcon"
-              :width="'12px'"
-              :height="'12px'"
-            />
+          <div v-if="canYearMore" :class="[n('icon')]" @click="change('year', 1)">
+            <Icon :file="dRightArrowIcon" :width="'12px'" :height="'12px'" />
           </div>
         </div>
       </div>
@@ -92,39 +57,36 @@ import { isPC } from '../../../utils/env';
 const props = defineProps({
   type: {
     type: String,
-    default: 'range', // "single"/"range"
+    default: 'range' // "single"/"range"
   },
   // Unique attribute when type is single
   date: {
     type: Dayjs,
-    default: () => dayjs(),
+    default: () => dayjs()
   },
   // Unique attribute when type is range
   startDate: {
     type: Dayjs,
-    default: null,
+    default: null
   },
   endDate: {
     type: Dayjs,
-    default: null,
+    default: null
   },
   rangeType: {
     type: String,
-    default: '', // "left"/"right"
+    default: '' // "left"/"right"
   },
   currentOtherPanelValue: {
     type: Dayjs,
-    default: null,
-  },
+    default: null
+  }
 });
 
 const emit = defineEmits(['pick', 'change']);
 const n = (className: string) => {
   return className
-    ? [
-        'tui-date-picker-panel-' + className,
-        !isPC && 'tui-date-picker-panel-h5-' + className,
-      ]
+    ? ['tui-date-picker-panel-' + className, !isPC && 'tui-date-picker-panel-h5-' + className]
     : ['tui-date-picker-panel', !isPC && 'tui-date-picker-panel-h5'];
 };
 
@@ -134,34 +96,22 @@ const month = computed(() => currentPanelDate.value?.format('MMMM'));
 const canYearMore = computed(() => {
   const prevYearNumber = props.currentOtherPanelValue?.year() - 1;
   const prevYear = props.currentOtherPanelValue?.year(prevYearNumber);
-  return (
-    props.rangeType === 'right'
-    || currentPanelDate.value?.isBefore(prevYear, 'year')
-  );
+  return props.rangeType === 'right' || currentPanelDate.value?.isBefore(prevYear, 'year');
 });
 const canMonthMore = computed(() => {
   const prevMonthNumber = props.currentOtherPanelValue?.month() - 1;
   const prevMonth = props.currentOtherPanelValue?.month(prevMonthNumber);
-  return (
-    props.rangeType === 'right'
-    || currentPanelDate.value?.isBefore(prevMonth, 'month')
-  );
+  return props.rangeType === 'right' || currentPanelDate.value?.isBefore(prevMonth, 'month');
 });
 const canYearLess = computed(() => {
   const nextYearNumber = props.currentOtherPanelValue?.year() + 1;
   const nextYear = props.currentOtherPanelValue?.year(nextYearNumber);
-  return (
-    props.rangeType === 'left'
-    || currentPanelDate.value?.isAfter(nextYear, 'year')
-  );
+  return props.rangeType === 'left' || currentPanelDate.value?.isAfter(nextYear, 'year');
 });
 const canMonthLess = computed(() => {
   const nextMonthNumber = props.currentOtherPanelValue?.month() + 1;
   const nextMonth = props.currentOtherPanelValue?.month(nextMonthNumber);
-  return (
-    props.rangeType === 'left'
-    || currentPanelDate.value?.isAfter(nextMonth, 'month')
-  );
+  return props.rangeType === 'left' || currentPanelDate.value?.isAfter(nextMonth, 'month');
 });
 
 // Range judgment:
@@ -179,12 +129,12 @@ const handleSingleDate = (): { date: typeof Dayjs } => {
   if (props.date && dayjs(props.date)?.isValid()) {
     // props.date year and month
     return {
-      date: props?.date,
+      date: props?.date
     };
   }
   // nowadays year and month
   return {
-    date: dayjs(),
+    date: dayjs()
   };
 };
 
@@ -193,31 +143,27 @@ const handleRangeDate = (): { date: typeof Dayjs } => {
     case 'left':
       if (props.startDate && dayjs.isDayjs(props.startDate)) {
         return {
-          date: props?.startDate,
+          date: props?.startDate
         };
       } else {
         return {
-          date: dayjs(),
+          date: dayjs()
         };
       }
     case 'right':
-      if (
-        props.endDate
-        && dayjs.isDayjs(props.endDate)
-        && props?.endDate?.isAfter(props.startDate, 'month')
-      ) {
+      if (props.endDate && dayjs.isDayjs(props.endDate) && props?.endDate?.isAfter(props.startDate, 'month')) {
         return {
-          date: props?.endDate,
+          date: props?.endDate
         };
       } else {
         const _month = (props.startDate || dayjs()).month();
         return {
-          date: (props.startDate || dayjs()).month(_month + 1),
+          date: (props.startDate || dayjs()).month(_month + 1)
         };
       }
     default:
       return {
-        date: dayjs(),
+        date: dayjs()
       };
   }
 };
@@ -227,10 +173,7 @@ function handlePick(cell: DateCell) {
 }
 
 function change(type: typeof ManipulateType, num: number) {
-  currentPanelDate.value = dayjs(currentPanelDate.value.toDate()).add(
-    num,
-    type,
-  );
+  currentPanelDate.value = dayjs(currentPanelDate.value.toDate()).add(num, type);
   emit('change', currentPanelDate.value);
 }
 
diff --git a/src/TUIKit/components/common/DatePicker/date-picker.ts b/src/TUIKit/components/common/DatePicker/date-picker.ts
index 7755bc9..1d96b98 100644
--- a/src/TUIKit/components/common/DatePicker/date-picker.ts
+++ b/src/TUIKit/components/common/DatePicker/date-picker.ts
@@ -1,11 +1,6 @@
 import { Dayjs } from 'dayjs';
 
-export type DateCellType =
-  | 'normal'
-  | 'today'
-  | 'week'
-  | 'next-month'
-  | 'prev-month';
+export type DateCellType = 'normal' | 'today' | 'week' | 'next-month' | 'prev-month';
 export interface DateCell {
   text?: number;
   disabled?: boolean;
diff --git a/src/TUIKit/components/common/DatePicker/date-table.vue b/src/TUIKit/components/common/DatePicker/date-table.vue
index e9a5831..84e764b 100644
--- a/src/TUIKit/components/common/DatePicker/date-table.vue
+++ b/src/TUIKit/components/common/DatePicker/date-table.vue
@@ -1,39 +1,20 @@
 <template>
-  <table
-    :class="['tui-date-table', !isPC && 'tui-date-table-h5']"
-    cellspacing="0"
-    cellpadding="0"
-    role="grid"
-  >
+  <table :class="['tui-date-table', !isPC && 'tui-date-table-h5']" cellspacing="0" cellpadding="0" role="grid">
     <tbody class="tui-date-table-body">
       <tr class="tui-date-table-body-weeks">
-        <th
-          v-for="item in WEEKS"
-          :key="item"
-          class="tui-date-table-body-weeks-item"
-          :aria-label="item + ''"
-          scope="col"
-        >
+        <th v-for="item in WEEKS" :key="item" class="tui-date-table-body-weeks-item" :aria-label="item + ''" scope="col">
           {{ TUITranslateService.t(`time.${item}`) }}
         </th>
       </tr>
-      <tr
-        v-for="(row, rowKey) in rows"
-        :key="rowKey"
-        class="tui-date-table-body-days"
-      >
-        <td
-          v-for="(col, colKey) in row"
-          :key="colKey"
-          :class="['tui-date-table-body-days-item', col.type]"
-        >
+      <tr v-for="(row, rowKey) in rows" :key="rowKey" class="tui-date-table-body-days">
+        <td v-for="(col, colKey) in row" :key="colKey" :class="['tui-date-table-body-days-item', col.type]">
           <div
             :class="[
               'tui-date-table-body-days-item-cell',
               col.isSelected && 'selected',
               col.isSelectedStart && 'selected-start',
               col.isSelectedEnd && 'selected-end',
-              col.isInRange && 'range',
+              col.isInRange && 'range'
             ]"
             @click="handlePick(col)"
           >
@@ -48,13 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  computed,
-  ref,
-  getCurrentInstance,
-  nextTick,
-  watch,
-} from '../../../adapter-vue';
+import { computed, ref, getCurrentInstance, nextTick, watch } from '../../../adapter-vue';
 import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import dayjs, { Dayjs } from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -64,26 +39,26 @@ import { isPC } from '../../../utils/env';
 const props = defineProps({
   type: {
     type: String,
-    default: 'range', // "single"/"range"
+    default: 'range' // "single"/"range"
   },
   currentPanelDate: {
     type: Dayjs,
-    default: () => dayjs(),
+    default: () => dayjs()
   },
   // Unique attribute when type is single
   date: {
     type: Dayjs,
-    default: null,
+    default: null
   },
   // Unique attribute when type is range
   startDate: {
     type: Dayjs,
-    default: null,
+    default: null
   },
   endDate: {
     type: Dayjs,
-    default: null,
-  },
+    default: null
+  }
 });
 
 const emit = defineEmits(['pick']);
@@ -91,9 +66,7 @@ const emit = defineEmits(['pick']);
 const instance = getCurrentInstance();
 
 const tableRows = ref<DateCell[][]>([[], [], [], [], [], []]);
-const currentPanelDateObject = ref<typeof Dayjs>(
-  dayjs(props.currentPanelDate || null),
-);
+const currentPanelDateObject = ref<typeof Dayjs>(dayjs(props.currentPanelDate || null));
 const dateObject = ref<typeof Dayjs>(dayjs(props.date || null));
 const startDateObject = ref<typeof Dayjs>(dayjs(props.startDate || null));
 const endDateObject = ref<typeof Dayjs>(dayjs(props.endDate || null));
@@ -102,9 +75,7 @@ const WEEKS_CONSTANT = computed(() => {
   return dayjs.weekdaysShort();
 });
 
-const WEEKS = computed(() =>
-  WEEKS_CONSTANT.value.map((w: string) => w.substring(1)),
-);
+const WEEKS = computed(() => WEEKS_CONSTANT.value.map((w: string) => w.substring(1)));
 
 const startDateOnTable = computed(() => {
   const startDayOfMonth = currentPanelDateObject.value?.startOf('month');
@@ -127,22 +98,11 @@ const rows = computed(() => {
       const text = cellDate?.date();
       // For type === "single", select the entered date
       // For type === "range", select the entered start and end dates
-      const isSelected
-        = props.type === 'single'
-        && cellDate?.format('YYYY-MM-DD')
-        === dateObject.value?.format('YYYY-MM-DD');
-      const isSelectedStart
-        = props.type === 'range'
-        && cellDate?.format('YYYY-MM-DD')
-        === startDateObject.value?.format('YYYY-MM-DD');
-      const isSelectedEnd
-        = props.type === 'range'
-        && cellDate?.format('YYYY-MM-DD')
-        === endDateObject.value?.format('YYYY-MM-DD');
+      const isSelected = props.type === 'single' && cellDate?.format('YYYY-MM-DD') === dateObject.value?.format('YYYY-MM-DD');
+      const isSelectedStart = props.type === 'range' && cellDate?.format('YYYY-MM-DD') === startDateObject.value?.format('YYYY-MM-DD');
+      const isSelectedEnd = props.type === 'range' && cellDate?.format('YYYY-MM-DD') === endDateObject.value?.format('YYYY-MM-DD');
       // For type === "range", check if it is within the selected range.
-      const isInRange
-        = cellDate?.isSameOrBefore(endDateObject.value, 'day')
-        && cellDate?.isSameOrAfter(startDateObject.value, 'day');
+      const isInRange = cellDate?.isSameOrBefore(endDateObject.value, 'day') && cellDate?.isSameOrAfter(startDateObject.value, 'day');
       let type: DateCellType = 'normal';
       if (count < startOfMonthDay) {
         // Prev month's date
@@ -158,7 +118,7 @@ const rows = computed(() => {
         isSelected: isSelected || isSelectedStart || isSelectedEnd,
         isSelectedStart,
         isSelectedEnd,
-        isInRange,
+        isInRange
       };
       count++;
     }
@@ -186,8 +146,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 );
 </script>
 
@@ -300,13 +260,11 @@ watch(
           }
         }
       }
-
     }
   }
 }
 
 .tui-date-table-h5 {
-
   /* stylelint-disable-next-line no-descending-specificity */
   .tui-date-table-body-days-item-cell-text {
     cursor: none !important;
diff --git a/src/TUIKit/components/common/DatePicker/index.vue b/src/TUIKit/components/common/DatePicker/index.vue
index daaae60..e802759 100644
--- a/src/TUIKit/components/common/DatePicker/index.vue
+++ b/src/TUIKit/components/common/DatePicker/index.vue
@@ -1,9 +1,6 @@
 <template>
   <div :class="[n([''])]">
-    <div
-      :class="[n(['input']), isDatePanelShow && n(['input-active'])]"
-      @click="setDatePanelDisplay(!isDatePanelShow)"
-    >
+    <div :class="[n(['input']), isDatePanelShow && n(['input-active'])]" @click="setDatePanelDisplay(!isDatePanelShow)">
       <slot name="start-icon" />
       <input
         v-model="startFormatDate"
@@ -14,7 +11,7 @@
         :readonly="true"
         :disabled="isUniFrameWork"
         autocomplete="false"
-      >
+      />
       <span v-if="type !== 'single'">-</span>
       <input
         v-if="type !== 'single'"
@@ -26,22 +23,11 @@
         :readonly="true"
         :disabled="isUniFrameWork"
         autocomplete="false"
-      >
+      />
       <slot name="end-icon" />
     </div>
-    <div
-      v-if="isDatePanelShow"
-      :class="[n(['dialog'])]"
-    >
-      <div
-        :class="[
-          n([
-            'dialog-container',
-            'dialog-container-' + rangeTableType,
-            'dialog-container-' + popupPosition,
-          ]),
-        ]"
-      >
+    <div v-if="isDatePanelShow" :class="[n(['dialog'])]">
+      <div :class="[n(['dialog-container', 'dialog-container-' + rangeTableType, 'dialog-container-' + popupPosition])]">
         <DatePickerPanel
           :type="props.type"
           rangeType="left"
@@ -90,30 +76,30 @@ const emit = defineEmits(['pick', 'change']);
 const props = defineProps({
   type: {
     type: String,
-    default: 'range', // "single" / "range"
+    default: 'range' // "single" / "range"
   },
   rangeTableType: {
     type: String,
-    default: 'one', // "one"/ "two"
+    default: 'one' // "one"/ "two"
   },
   startPlaceholder: {
     type: String,
-    default: () => TUITranslateService.t('开始时间'),
+    default: () => TUITranslateService.t('开始时间')
   },
   endPlaceholder: {
     type: String,
-    default: () => TUITranslateService.t('开始时间'),
+    default: () => TUITranslateService.t('开始时间')
   },
   popupPosition: {
     type: String,
-    default: 'bottom', // "top" / "bottom"
+    default: 'bottom' // "top" / "bottom"
   },
   // Default single-select date
   defaultSingleDate: {
     type: Dayjs,
     default: null,
-    required: false,
-  },
+    required: false
+  }
 });
 
 const isDatePanelShow = ref<boolean>(false);
@@ -170,7 +156,7 @@ const handlePick = (cell: DateCell) => {
         }
         emit('pick', {
           startDate: startValue?.value?.startOf('date'),
-          endDate: endValue?.value?.endOf('date'),
+          endDate: endValue?.value?.endOf('date')
         });
         setTimeout(() => {
           setDatePanelDisplay(false);
@@ -183,7 +169,7 @@ const handlePick = (cell: DateCell) => {
         startDate: startValue.value,
         endDate: endValue.value,
         leftCurrentPanel: leftCurrentPanelValue.value,
-        rightCurrentPanel: leftCurrentPanelValue.value,
+        rightCurrentPanel: leftCurrentPanelValue.value
       });
       break;
   }
@@ -195,7 +181,7 @@ const handleLeftPanelChange = (value: typeof Dayjs) => {
     startDate: startValue.value,
     endDate: endValue.value,
     leftCurrentPanel: leftCurrentPanelValue.value,
-    rightCurrentPanel: leftCurrentPanelValue.value,
+    rightCurrentPanel: leftCurrentPanelValue.value
   });
 };
 const handleRightPanelChange = (value: typeof Dayjs) => {
@@ -204,7 +190,7 @@ const handleRightPanelChange = (value: typeof Dayjs) => {
     startDate: startValue.value,
     endDate: endValue.value,
     leftCurrentPanel: leftCurrentPanelValue.value,
-    rightCurrentPanel: leftCurrentPanelValue.value,
+    rightCurrentPanel: leftCurrentPanelValue.value
   });
 };
 </script>
@@ -250,7 +236,9 @@ const handleRightPanelChange = (value: typeof Dayjs) => {
       padding: 10px;
       left: 5px;
       background-color: #fff;
-      box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
+      box-shadow:
+        rgba(0, 0, 0, 0.16) 0 3px 6px,
+        rgba(0, 0, 0, 0.23) 0 3px 6px;
       z-index: 1000;
 
       &-bottom {
diff --git a/src/TUIKit/components/common/Dialog/index.vue b/src/TUIKit/components/common/Dialog/index.vue
index ce0962a..4dfae4d 100644
--- a/src/TUIKit/components/common/Dialog/index.vue
+++ b/src/TUIKit/components/common/Dialog/index.vue
@@ -5,43 +5,21 @@
     :class="[!isPC ? 'dialog-h5' : '', center ? 'center' : '']"
     @click.stop.prevent="toggleView(clickType.OUTSIDE)"
   >
-    <main
-      class="dialog-main"
-      :class="[!backgroundDialog ? 'dialog-main-back' : '']"
-      @click.stop.prevent="toggleView(clickType.INSIDE)"
-    >
-      <header
-        v-if="isHeaderShowDialog"
-        class="dialog-main-header"
-      >
+    <main class="dialog-main" :class="[!backgroundDialog ? 'dialog-main-back' : '']" @click.stop.prevent="toggleView(clickType.INSIDE)">
+      <header v-if="isHeaderShowDialog" class="dialog-main-header">
         <h1 class="dialog-main-title">
           {{ showTitle }}
         </h1>
-        <i
-          class="icon icon-close"
-          @click="close"
-        />
+        <i class="icon icon-close" @click="close" />
       </header>
-      <div
-        class="dialog-main-content"
-        :class="[isUniFrameWork && isH5 ? 'dialog-main-content-uniapp' : '']"
-      >
+      <div class="dialog-main-content" :class="[isUniFrameWork && isH5 ? 'dialog-main-content-uniapp' : '']">
         <slot />
       </div>
-      <footer
-        v-if="isFooterShowDialog"
-        class="dialog-main-footer"
-      >
-        <button
-          class="btn btn-cancel"
-          @click="close"
-        >
+      <footer v-if="isFooterShowDialog" class="dialog-main-footer">
+        <button class="btn btn-cancel" @click="close">
           {{ TUITranslateService.t('component.取消') }}
         </button>
-        <button
-          class="btn btn-default"
-          @click="submit"
-        >
+        <button class="btn btn-default" @click="submit">
           {{ TUITranslateService.t('component.确定') }}
         </button>
       </footer>
@@ -55,33 +33,33 @@ import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
 const clickType = {
   OUTSIDE: 'outside',
-  INSIDE: 'inside',
+  INSIDE: 'inside'
 };
 const props = defineProps({
   show: {
     type: Boolean,
-    default: false,
+    default: false
   },
   isHeaderShow: {
     type: Boolean,
-    default: true,
+    default: true
   },
   isFooterShow: {
     type: Boolean,
-    default: true,
+    default: true
   },
   background: {
     type: Boolean,
-    default: true,
+    default: true
   },
   title: {
     type: String,
-    default: '',
+    default: ''
   },
   center: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 });
 
 const showDialog = ref(false);
diff --git a/src/TUIKit/components/common/Drag/index.vue b/src/TUIKit/components/common/Drag/index.vue
index e116739..4411c3e 100644
--- a/src/TUIKit/components/common/Drag/index.vue
+++ b/src/TUIKit/components/common/Drag/index.vue
@@ -6,23 +6,16 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  reactive,
-  onMounted,
-  watch,
-  watchEffect,
-  getCurrentInstance,
-  nextTick,
-} from '../../../adapter-vue';
+import { reactive, onMounted, watch, watchEffect, getCurrentInstance, nextTick } from '../../../adapter-vue';
 const props = defineProps({
   show: {
     type: Boolean,
-    default: () => false,
+    default: () => false
   },
   domClassName: {
     type: String,
-    default: '',
-  },
+    default: ''
+  }
 });
 const data = reactive({
   show: false,
@@ -30,8 +23,8 @@ const data = reactive({
   startPosition: {
     left: '',
     top: '',
-    cssText: '',
-  },
+    cssText: ''
+  }
 });
 
 const ctx = getCurrentInstance();
@@ -43,9 +36,7 @@ watchEffect(() => {
 
 onMounted(() => {
   let isDrag = false;
-  let dragDom = document?.getElementsByClassName(
-    props.domClassName,
-  )[0] as HTMLElement;
+  let dragDom = document?.getElementsByClassName(props.domClassName)[0] as HTMLElement;
   watch(
     () => data.show,
     (newVal: any, oldVal: any) => {
@@ -53,9 +44,7 @@ onMounted(() => {
       if (newVal === oldVal) return;
       if (data.show === true) {
         nextTick(() => {
-          dragDom = document?.getElementsByClassName(
-            props.domClassName,
-          )[0] as HTMLElement;
+          dragDom = document?.getElementsByClassName(props.domClassName)[0] as HTMLElement;
           if (!dragDom) return;
           dragDom.style.left = data.startPosition?.left;
           dragDom.style.top = data.startPosition?.top;
@@ -63,7 +52,7 @@ onMounted(() => {
           dragDom.addEventListener('mousedown', mouseDown);
         });
       }
-    },
+    }
   );
   const mouseDown = (e: MouseEvent) => {
     isDrag = true;
@@ -96,13 +85,11 @@ function throttle(fn: { (e: MouseEvent): void; apply?: any }, timer: number) {
 }
 
 const positionReset = () => {
-  const dragDom = document?.getElementsByClassName(
-    props.domClassName,
-  )[0] as HTMLElement;
+  const dragDom = document?.getElementsByClassName(props.domClassName)[0] as HTMLElement;
   data.startPosition = {
     left: '',
     top: '',
-    cssText: '',
+    cssText: ''
   };
   if (!dragDom) {
     return;
@@ -113,9 +100,9 @@ const positionReset = () => {
 };
 
 defineExpose({
-  positionReset,
+  positionReset
 });
 </script>
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 </style>
diff --git a/src/TUIKit/components/common/Drawer/index.vue b/src/TUIKit/components/common/Drawer/index.vue
index 657c08b..4ab0bdc 100644
--- a/src/TUIKit/components/common/Drawer/index.vue
+++ b/src/TUIKit/components/common/Drawer/index.vue
@@ -15,14 +15,14 @@
         'origin-bottom': props.popDirection === 'bottom',
         'origin-right': props.popDirection === 'right',
         'slide-bottom': visible && props.popDirection === 'bottom',
-        'slide-right': visible && props.popDirection === 'right',
+        'slide-right': visible && props.popDirection === 'right'
       }"
       :style="{
         minHeight: styles.minHeight,
         maxHeight: styles.maxHeight,
         borderRadius: styles.borderRadius,
         boxShadow: styles.boxShadow,
-        width: styles.width,
+        width: styles.width
       }"
     >
       <div class="drawer-container">
@@ -60,7 +60,7 @@ const props = withDefaults(defineProps<IProps>(), {
   useMask: true,
   isFullScreen: true,
   popDirection: 'bottom',
-  drawerStyle: () => ({}),
+  drawerStyle: () => ({})
 });
 
 const drawerDomRef = ref<HTMLElement>();
@@ -69,17 +69,21 @@ const isDrawerShow = ref<boolean>(false);
 
 const styles = ref(props.drawerStyle[props.popDirection] || {});
 
-watch(() => props.visible, (visible: boolean) => {
-  if (visible) {
-    isDrawerShow.value = true;
-  } else {
-    setTimeout(() => {
-      isDrawerShow.value = false;
-    }, 150);
+watch(
+  () => props.visible,
+  (visible: boolean) => {
+    if (visible) {
+      isDrawerShow.value = true;
+    } else {
+      setTimeout(() => {
+        isDrawerShow.value = false;
+      }, 150);
+    }
+  },
+  {
+    immediate: true
   }
-}, {
-  immediate: true,
-});
+);
 
 function onOverlayClick(e: Event) {
   emits('onOverlayClick', e);
@@ -87,7 +91,7 @@ function onOverlayClick(e: Event) {
 
 defineExpose({
   drawerDomRef,
-  overlayDomRef: overlayDomInstanceRef.value?.overlayDomRef,
+  overlayDomRef: overlayDomInstanceRef.value?.overlayDomRef
 });
 </script>
 
diff --git a/src/TUIKit/components/common/FetchMore/index.vue b/src/TUIKit/components/common/FetchMore/index.vue
index df4ff1d..6294bce 100644
--- a/src/TUIKit/components/common/FetchMore/index.vue
+++ b/src/TUIKit/components/common/FetchMore/index.vue
@@ -1,16 +1,13 @@
 <template>
-  <div
-    ref="selfDomRef"
-    class="fetch-more-block"
-  >
+  <div ref="selfDomRef" class="fetch-more-block">
     <template v-if="props.isFetching">
       <slot name="fetching">
-        <div>{{ TUITranslateService.t("TUIChat.正在加载") }}</div>
+        <div>{{ TUITranslateService.t('TUIChat.正在加载') }}</div>
       </slot>
     </template>
     <template v-else>
       <slot name="fetchEnd">
-        <div>{{ TUITranslateService.t("TUIChat.加载结束") }}</div>
+        <div>{{ TUITranslateService.t('TUIChat.加载结束') }}</div>
       </slot>
     </template>
   </div>
@@ -33,7 +30,7 @@ interface IEmits {
 const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
   isFetching: false,
-  isTerminateObserve: false,
+  isTerminateObserve: false
 });
 
 let observer: unknown = null;
@@ -45,13 +42,16 @@ onMounted(() => {
     return;
   }
   if (!isUniFrameWork) {
-    observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting) {
-        emits('onExposed');
+    observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          emits('onExposed');
+        }
+      },
+      {
+        threshold: 1.0
       }
-    }, {
-      threshold: 1.0,
-    });
+    );
     if (selfDomRef.value) {
       (observer as IntersectionObserver).observe(selfDomRef.value);
     }
@@ -70,23 +70,26 @@ onUnmounted(() => {
   }
 });
 
-watch(() => props.isTerminateObserve, (isTerminateObserve: boolean) => {
-  if (!observer) {
-    return;
-  }
-  if (isTerminateObserve) {
-    (observer as IntersectionObserver).disconnect();
-  } else if (selfDomRef.value) {
-    (observer as IntersectionObserver).disconnect();
-    if (!isUniFrameWork) {
-      (observer as IntersectionObserver).observe(selfDomRef.value);
-    } else {
-      (observer as any).observe('.fetch-more-block', () => {
-        emits('onExposed');
-      });
+watch(
+  () => props.isTerminateObserve,
+  (isTerminateObserve: boolean) => {
+    if (!observer) {
+      return;
+    }
+    if (isTerminateObserve) {
+      (observer as IntersectionObserver).disconnect();
+    } else if (selfDomRef.value) {
+      (observer as IntersectionObserver).disconnect();
+      if (!isUniFrameWork) {
+        (observer as IntersectionObserver).observe(selfDomRef.value);
+      } else {
+        (observer as any).observe('.fetch-more-block', () => {
+          emits('onExposed');
+        });
+      }
     }
   }
-});
+);
 </script>
 
 <style scoped lang="scss">
diff --git a/src/TUIKit/components/common/Icon.vue b/src/TUIKit/components/common/Icon.vue
index a6912c2..9211a36 100644
--- a/src/TUIKit/components/common/Icon.vue
+++ b/src/TUIKit/components/common/Icon.vue
@@ -3,22 +3,12 @@
   <div
     :class="['common-icon-container', !isPC && 'common-icon-container-mobile']"
     :style="{
-      padding: iconHotAreaSize,
+      padding: iconHotAreaSize
     }"
     @click="handleImgClick"
   >
-    <image
-      v-if="isApp"
-      class="common-icon"
-      :src="props.file"
-      :style="{ width: iconWidth, height: iconHeight }"
-    />
-    <img
-      v-else
-      class="common-icon"
-      :src="props.file"
-      :style="{ width: iconWidth, height: iconHeight }"
-    >
+    <image v-if="isApp" class="common-icon" :src="props.file" :style="{ width: iconWidth, height: iconHeight }" />
+    <img v-else class="common-icon" :src="props.file" :style="{ width: iconWidth, height: iconHeight }" />
   </div>
 </template>
 <script setup lang="ts">
@@ -41,7 +31,7 @@ const emits = defineEmits<IEmits>();
 const props = withDefaults(defineProps<IProps>(), {
   file: '',
   width: '20px',
-  height: '20px',
+  height: '20px'
 });
 
 const iconHotAreaSize = computed<undefined | string>(() => {
@@ -76,7 +66,7 @@ const handleImgClick = (e: Event) => {
   -webkit-tap-highlight-color: transparent;
 }
 
-.common-icon-container-mobile{
+.common-icon-container-mobile {
   cursor: none;
 }
 </style>
diff --git a/src/TUIKit/components/common/ImagePreviewer/image-item.vue b/src/TUIKit/components/common/ImagePreviewer/image-item.vue
index 438e8e4..4ca5f97 100644
--- a/src/TUIKit/components/common/ImagePreviewer/image-item.vue
+++ b/src/TUIKit/components/common/ImagePreviewer/image-item.vue
@@ -2,25 +2,25 @@
   <img
     class="image-preview"
     :style="{
-      transform: `scale(${props.zoom}) rotate(${props.rotate}deg)`,
+      transform: `scale(${props.zoom}) rotate(${props.rotate}deg)`
     }"
     :src="props.src"
-  >
+  />
 </template>
 <script setup lang="ts">
 const props = defineProps({
   zoom: {
     type: Number,
-    default: 1,
+    default: 1
   },
   rotate: {
     type: Number,
-    default: 0,
+    default: 0
   },
   src: {
     type: String,
-    default: '',
-  },
+    default: ''
+  }
 });
 </script>
 <style lang="scss">
diff --git a/src/TUIKit/components/common/ImagePreviewer/index.vue b/src/TUIKit/components/common/ImagePreviewer/index.vue
index aea8b2e..026e822 100644
--- a/src/TUIKit/components/common/ImagePreviewer/index.vue
+++ b/src/TUIKit/components/common/ImagePreviewer/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="image-previewer"
-    :class="[isMobile && 'image-previewer-h5']"
-  >
+  <div class="image-previewer" :class="[isMobile && 'image-previewer-h5']">
     <div
       ref="image"
       class="image-wrapper"
@@ -17,110 +14,41 @@
         class="image-list"
         :style="{
           width: `${imageList.length * 100}%`,
-          transform: `translateX(-${
-            (currentImageIndex * 100) / imageList.length
-          }%)`,
-          transition: '0.5s',
+          transform: `translateX(-${(currentImageIndex * 100) / imageList.length}%)`,
+          transition: '0.5s'
         }"
       >
-        <li
-          v-for="(item, index) in imageList"
-          :key="index"
-          class="image-item"
-        >
-          <ImageItem
-            :zoom="zoom"
-            :rotate="rotate"
-            :src="getImageUrl(item)"
-            :messageItem="item"
-            :class="[isUniFrameWork ? 'image-item' : '']"
-          />
+        <li v-for="(item, index) in imageList" :key="index" class="image-item">
+          <ImageItem :zoom="zoom" :rotate="rotate" :src="getImageUrl(item)" :messageItem="item" :class="[isUniFrameWork ? 'image-item' : '']" />
         </li>
       </ul>
     </div>
-    <div
-      v-show="isPC"
-      class="icon icon-close"
-      @click="close"
-    >
-      <Icon
-        :file="iconClose"
-        width="16px"
-        height="16px"
-      />
+    <div v-show="isPC" class="icon icon-close" @click="close">
+      <Icon :file="iconClose" width="16px" height="16px" />
     </div>
-    <div
-      v-if="isPC && currentImageIndex > 0"
-      class="image-button image-button-left"
-      @click="goPrev"
-    >
+    <div v-if="isPC && currentImageIndex > 0" class="image-button image-button-left" @click="goPrev">
       <Icon :file="iconArrowLeft" />
     </div>
-    <div
-      v-if="isPC && currentImageIndex < imageList.length - 1"
-      class="image-button image-button-right"
-      @click="goNext"
-    >
+    <div v-if="isPC && currentImageIndex < imageList.length - 1" class="image-button image-button-right" @click="goNext">
       <Icon :file="iconArrowLeft" />
     </div>
     <div :class="['actions-bar', isMobile && 'actions-bar-h5']">
-      <div
-        v-if="isPC"
-        class="icon-zoom-in"
-        @click="zoomIn"
-      >
-        <Icon
-          :file="iconZoomIn"
-          width="27px"
-          height="27px"
-        />
+      <div v-if="isPC" class="icon-zoom-in" @click="zoomIn">
+        <Icon :file="iconZoomIn" width="27px" height="27px" />
       </div>
-      <div
-        v-if="isPC"
-        class="icon-zoom-out"
-        @click="zoomOut"
-      >
-        <Icon
-          :file="iconZoomOut"
-          width="27px"
-          height="27px"
-        />
+      <div v-if="isPC" class="icon-zoom-out" @click="zoomOut">
+        <Icon :file="iconZoomOut" width="27px" height="27px" />
       </div>
-      <div
-        v-if="isPC"
-        class="icon-refresh-left"
-        @click="rotateLeft"
-      >
-        <Icon
-          :file="iconRotateLeft"
-          width="27px"
-          height="27px"
-        />
+      <div v-if="isPC" class="icon-refresh-left" @click="rotateLeft">
+        <Icon :file="iconRotateLeft" width="27px" height="27px" />
       </div>
-      <div
-        v-if="isPC"
-        class="icon-refresh-right"
-        @click="rotateRight"
-      >
-        <Icon
-          :file="iconRotateRight"
-          width="27px"
-          height="27px"
-        />
+      <div v-if="isPC" class="icon-refresh-right" @click="rotateRight">
+        <Icon :file="iconRotateRight" width="27px" height="27px" />
       </div>
-      <span class="image-counter">
-        {{ currentImageIndex + 1 }} / {{ imageList.length }}
-      </span>
+      <span class="image-counter"> {{ currentImageIndex + 1 }} / {{ imageList.length }} </span>
     </div>
-    <div
-      class="save"
-      @click.stop.prevent="save"
-    >
-      <Icon
-        :file="iconDownload"
-        width="20px"
-        height="20px"
-      />
+    <div class="save" @click.stop.prevent="save">
+      <Icon :file="iconDownload" width="20px" height="20px" />
     </div>
   </div>
 </template>
@@ -154,16 +82,16 @@ const props = withDefaults(
     currentImage: IMessageModel;
   }>(),
   {
-    imageList: () => ([] as IMessageModel[]),
-    messageItem: () => ({} as IMessageModel),
-  },
+    imageList: () => [] as IMessageModel[],
+    messageItem: () => ({}) as IMessageModel
+  }
 );
 
 const imageFormatMap = new Map([
   [1, 'jpg'],
   [2, 'gif'],
   [3, 'png'],
-  [4, 'bmp'],
+  [4, 'bmp']
 ]);
 
 const emit = defineEmits(['close']);
@@ -288,37 +216,21 @@ const handleTwoTouches = (e: any) => {
       touchStore.pageY2 = touch2.pageY;
     }
   }
-  const getDistance = (
-    startX: number,
-    startY: number,
-    stopX: number,
-    stopY: number,
-  ) => {
+  const getDistance = (startX: number, startY: number, stopX: number, stopY: number) => {
     return Math.hypot(stopX - startX, stopY - startY);
   };
-  if (
-    !isNumber(touchStore.pageX1)
-    || !isNumber(touchStore.pageY1)
-    || !isNumber(touchStore.pageX2)
-    || !isNumber(touchStore.pageY2)
-  ) {
+  if (!isNumber(touchStore.pageX1) || !isNumber(touchStore.pageY1) || !isNumber(touchStore.pageX2) || !isNumber(touchStore.pageY2)) {
     return;
   }
-  const touchZoom
-    = getDistance(touch1.pageX, touch1.pageY, touch2.pageX, touch2.pageY)
-    / getDistance(
-      touchStore.pageX1 as number,
-      touchStore.pageY1 as number,
-      touchStore.pageX2 as number,
-      touchStore.pageY2 as number,
-    );
+  const touchZoom =
+    getDistance(touch1.pageX, touch1.pageY, touch2.pageX, touch2.pageY) /
+    getDistance(touchStore.pageX1 as number, touchStore.pageY1 as number, touchStore.pageX2 as number, touchStore.pageY2 as number);
   zoom.value = Math.min(Math.max(0.5, zoom.value * touchZoom), 4);
 };
 
 onMounted(() => {
   // web: close on esc keydown
-  document?.addEventListener
-  && document?.addEventListener('keydown', handleEsc);
+  document?.addEventListener && document?.addEventListener('keydown', handleEsc);
 });
 
 const handleEsc = (e: any) => {
@@ -331,8 +243,7 @@ const zoomIn = () => {
   zoom.value += 0.1;
 };
 const zoomOut = () => {
-  zoom.value
-    = zoom.value - 0.1 > minZoom.value ? zoom.value - 0.1 : minZoom.value;
+  zoom.value = zoom.value - 0.1 > minZoom.value ? zoom.value - 0.1 : minZoom.value;
 };
 const close = () => {
   emit('close');
@@ -344,8 +255,7 @@ const rotateRight = () => {
   rotate.value += 90;
 };
 const goNext = () => {
-  currentImageIndex.value < props.imageList.length - 1
-  && currentImageIndex.value++;
+  currentImageIndex.value < props.imageList.length - 1 && currentImageIndex.value++;
   initStyle();
 };
 const goPrev = () => {
@@ -366,14 +276,12 @@ const getImageUrl = (message: IMessageModel) => {
 };
 
 const save = () => {
-  const imageMessage = props.imageList[
-    currentImageIndex.value
-  ] as IMessageModel;
+  const imageMessage = props.imageList[currentImageIndex.value] as IMessageModel;
   const imageSrc = imageMessage?.payload?.imageInfoArray[0]?.url;
   if (!imageSrc) {
     Toast({
       message: TUITranslateService.t('component.图片 url 不存在'),
-      type: TOAST_TYPE.ERROR,
+      type: TOAST_TYPE.ERROR
     });
     return;
   }
@@ -399,17 +307,17 @@ const save = () => {
                       TUIGlobal.openSetting({
                         success: (res: any) => {
                           console.log(res.authSetting);
-                        },
+                        }
                       });
                     } else if (res.cancel) {
                       return Toast({
                         message: TUITranslateService.t('component.已取消'),
-                        type: TOAST_TYPE.ERROR,
+                        type: TOAST_TYPE.ERROR
                       });
                     }
-                  },
+                  }
                 });
-              },
+              }
             });
           } else {
             // If you already have album permission, save directly to the album
@@ -419,9 +327,9 @@ const save = () => {
         fail: () => {
           Toast({
             message: TUITranslateService.t('component.获取权限失败'),
-            type: TOAST_TYPE.ERROR,
+            type: TOAST_TYPE.ERROR
           });
-        },
+        }
       });
       break;
     case 'app':
@@ -435,7 +343,7 @@ const save = () => {
 
 const downloadImgInUni = (src: string) => {
   TUIGlobal.showLoading({
-    title: '大图提取中',
+    title: '大图提取中'
   });
   TUIGlobal.downloadFile({
     url: src,
@@ -446,18 +354,18 @@ const downloadImgInUni = (src: string) => {
         success: () => {
           Toast({
             message: TUITranslateService.t('component.已保存至相册'),
-            type: TOAST_TYPE.SUCCESS,
+            type: TOAST_TYPE.SUCCESS
           });
-        },
+        }
       });
     },
     fail: function () {
       TUIGlobal.hideLoading();
       Toast({
         message: TUITranslateService.t('component.图片下载失败'),
-        type: TOAST_TYPE.ERROR,
+        type: TOAST_TYPE.ERROR
       });
-    },
+    }
   });
 };
 
@@ -465,24 +373,22 @@ const downloadImgInWeb = (src: string) => {
   const option: any = {
     mode: 'cors',
     headers: new Headers({
-      'Content-Type': 'application/x-www-form-urlencoded',
-    }),
+      'Content-Type': 'application/x-www-form-urlencoded'
+    })
   };
-  const imageMessage = props.imageList[
-    currentImageIndex.value
-  ] as IMessageModel;
+  const imageMessage = props.imageList[currentImageIndex.value] as IMessageModel;
   const imageFormat: number = imageMessage?.payload?.imageFormat;
   if (!imageFormatMap.has(imageFormat)) {
     Toast({
       message: TUITranslateService.t('component.暂不支持下载此类型图片'),
-      type: TOAST_TYPE.ERROR,
+      type: TOAST_TYPE.ERROR
     });
     return;
   }
   // 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(src, option)
-      .then(res => res.blob())
+      .then((res) => res.blob())
       .then((blob) => {
         const a = document.createElement('a');
         const url = window.URL.createObjectURL(blob);
@@ -500,13 +406,12 @@ const downloadImgInWeb = (src: string) => {
 };
 
 onUnmounted(() => {
-  document?.removeEventListener
-  && document?.removeEventListener('keydown', handleEsc);
+  document?.removeEventListener && document?.removeEventListener('keydown', handleEsc);
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .actions-bar {
   display: flex;
diff --git a/src/TUIKit/components/common/Loading/index.vue b/src/TUIKit/components/common/Loading/index.vue
index 39768cd..09592b7 100644
--- a/src/TUIKit/components/common/Loading/index.vue
+++ b/src/TUIKit/components/common/Loading/index.vue
@@ -5,7 +5,7 @@
       width: props.width,
       height: props.height,
       border: `2px solid ${props.color}`,
-      borderTopColor: 'transparent',
+      borderTopColor: 'transparent'
     }"
   />
 </template>
@@ -13,16 +13,16 @@
 const props = defineProps({
   width: {
     type: String,
-    default: '30px',
+    default: '30px'
   },
   height: {
     type: String,
-    default: '30px',
+    default: '30px'
   },
   color: {
     type: String,
-    default: '#D9D9D9',
-  },
+    default: '#D9D9D9'
+  }
 });
 </script>
 <style scoped lang="scss">
diff --git a/src/TUIKit/components/common/MaskLayer/index.vue b/src/TUIKit/components/common/MaskLayer/index.vue
index bbd7ed6..c153edf 100644
--- a/src/TUIKit/components/common/MaskLayer/index.vue
+++ b/src/TUIKit/components/common/MaskLayer/index.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    v-if="showMask"
-    class="mask"
-    @click.self="!isWeChat && toggleView"
-  >
+  <div v-if="showMask" class="mask" @click.self="!isWeChat && toggleView">
     <slot />
   </div>
 </template>
@@ -15,8 +11,8 @@ import { isWeChat } from '../../../utils/env';
 const props = defineProps({
   show: {
     type: Boolean,
-    default: () => false,
-  },
+    default: () => false
+  }
 });
 
 const showMask = ref(false);
@@ -31,7 +27,6 @@ const toggleView = () => {
   showMask.value = !showMask.value;
   emit('update:show', showMask.value);
 };
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/TUIKit/components/common/Overlay/index.vue b/src/TUIKit/components/common/Overlay/index.vue
index 5a02d09..99d46a6 100644
--- a/src/TUIKit/components/common/Overlay/index.vue
+++ b/src/TUIKit/components/common/Overlay/index.vue
@@ -5,17 +5,17 @@
     class="overlay-container"
     :style="{
       position: props.isFullScreen ? 'fixed' : 'absolute',
-      zIndex: props.zIndex,
+      zIndex: props.zIndex
     }"
   >
     <div
       v-if="props.useMask"
       :class="{
         'overlay-mask': true,
-        'fade-in': props.visible,
+        'fade-in': props.visible
       }"
       :style="{
-        backgroundColor: props.maskColor,
+        backgroundColor: props.maskColor
       }"
       @click="onOverlayClick"
       @touchstart.prevent.stop="onOverlayClick"
@@ -23,7 +23,7 @@
     <div
       :class="{
         'overlay-content': true,
-        'full-screen': props.isFullScreen,
+        'full-screen': props.isFullScreen
       }"
     >
       <slot />
@@ -52,30 +52,34 @@ const props = withDefaults(defineProps<IOverlayProps>(), {
   isFullScreen: true,
   maskColor: 'rgba(0, 0, 0, 0.6)',
   width: 'auto',
-  height: 'auto',
+  height: 'auto'
 });
 
 const overlayDomRef = ref<HTMLElement>();
 const isOverlayShow = ref<boolean>(props.visible);
 
-watch(() => props.visible, (visible: boolean) => {
-  if (visible) {
-    isOverlayShow.value = true;
-  } else {
-    setTimeout(() => {
-      isOverlayShow.value = false;
-    }, 150);
+watch(
+  () => props.visible,
+  (visible: boolean) => {
+    if (visible) {
+      isOverlayShow.value = true;
+    } else {
+      setTimeout(() => {
+        isOverlayShow.value = false;
+      }, 150);
+    }
+  },
+  {
+    immediate: true
   }
-}, {
-  immediate: true,
-});
+);
 
 function onOverlayClick() {
   emits('onOverlayClick');
 }
 
 defineExpose({
-  overlayDomRef,
+  overlayDomRef
 });
 </script>
 
@@ -104,7 +108,7 @@ defineExpose({
     animation: fade-in 0.15s linear;
   }
 
-  .full-screen{
+  .full-screen {
     width: 100%;
     height: 100%;
     display: flex;
diff --git a/src/TUIKit/components/common/Popconfirm/index.vue b/src/TUIKit/components/common/Popconfirm/index.vue
index 1aaef50..17cc00e 100644
--- a/src/TUIKit/components/common/Popconfirm/index.vue
+++ b/src/TUIKit/components/common/Popconfirm/index.vue
@@ -1,41 +1,19 @@
 <template>
-  <div
-    v-if="_isShow"
-    class="pop"
-    @click.stop.prevent="toggleView(clickType.OUTSIDE)"
-  >
-    <main
-      class="pop-main"
-      :class="[!isPC ? 'pop-main-h5' : '']"
-      @click.stop.prevent="toggleView(clickType.INSIDE)"
-    >
-      <header
-        v-if="isHeaderShow"
-        class="pop-main-header"
-      >
+  <div v-if="_isShow" class="pop" @click.stop.prevent="toggleView(clickType.OUTSIDE)">
+    <main class="pop-main" :class="[!isPC ? 'pop-main-h5' : '']" @click.stop.prevent="toggleView(clickType.INSIDE)">
+      <header v-if="isHeaderShow" class="pop-main-header">
         <h1 class="pop-main-title">
           {{ title }}
         </h1>
       </header>
-      <div
-        class="pop-main-content"
-        :class="[isUniFrameWork && isH5 ? 'pop-main-content-uniapp' : '']"
-      >
+      <div class="pop-main-content" :class="[isUniFrameWork && isH5 ? 'pop-main-content-uniapp' : '']">
         <slot />
       </div>
       <footer class="pop-main-footer">
-        <button
-          v-if="isConfirmButtonShow"
-          class="btn btn-confirm"
-          @click="popConfirm()"
-        >
+        <button v-if="isConfirmButtonShow" class="btn btn-confirm" @click="popConfirm()">
           {{ TUITranslateService.t(confirmButtonText) }}
         </button>
-        <button
-          v-if="isCancelButtonShow"
-          class="btn btn-cancel"
-          @click="popCancel()"
-        >
+        <button v-if="isCancelButtonShow" class="btn btn-cancel" @click="popCancel()">
           {{ TUITranslateService.t(cancelButtonText) }}
         </button>
       </footer>
@@ -45,10 +23,7 @@
 
 <script lang="ts" setup>
 import { ref, toRefs, watchEffect } from '../../../adapter-vue';
-import {
-  TUIGlobal,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal, TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { isUniFrameWork } from '../../../utils/env';
 const props = withDefaults(
   defineProps<{
@@ -66,14 +41,14 @@ const props = withDefaults(
     isConfirmButtonShow: true,
     isCancelButtonShow: true,
     confirmButtonText: '确定',
-    cancelButtonText: '取消',
-  },
+    cancelButtonText: '取消'
+  }
 );
 
 const { isShow } = toRefs(props);
 const clickType = {
   OUTSIDE: 'outside',
-  INSIDE: 'inside',
+  INSIDE: 'inside'
 };
 const isPC = ref(TUIGlobal.getPlatform() === 'pc');
 const isH5 = ref(TUIGlobal.getPlatform() === 'h5');
@@ -101,13 +76,13 @@ function popConfirm() {
 <style lang="scss" scoped>
 $pop-bg-color: #fff;
 $pop-header: #333;
-$confirm-bg-color: #006EFF;
+$confirm-bg-color: #006eff;
 $confirm-text-color: #fff;
 $concel-bg-color: #666;
 $content-color: #333;
 
 .pop {
-  background: rgba(0, 0, 0, .3);
+  background: rgba(0, 0, 0, 0.3);
   position: fixed;
   width: 100%;
   height: 100%;
diff --git a/src/TUIKit/components/common/ProgressMessage/index.vue b/src/TUIKit/components/common/ProgressMessage/index.vue
index 9547a2a..a9e80eb 100644
--- a/src/TUIKit/components/common/ProgressMessage/index.vue
+++ b/src/TUIKit/components/common/ProgressMessage/index.vue
@@ -1,22 +1,9 @@
 <template>
   <div class="progress-message">
     <slot />
-    <div
-      v-if="props.messageItem.status === 'unSend' && props.messageItem.progress < 1"
-      class="progress-container"
-    >
-      <progress
-        v-if="!isUniFrameWork"
-        class="progress"
-        :value="props.messageItem.progress"
-        max="1"
-      />
-      <progress
-        v-else
-        activeColor="#006EFF"
-        class="progress-common"
-        :percent="Math.round(props.messageItem.progress*100)"
-      />
+    <div v-if="props.messageItem.status === 'unSend' && props.messageItem.progress < 1" class="progress-container">
+      <progress v-if="!isUniFrameWork" class="progress" :value="props.messageItem.progress" max="1" />
+      <progress v-else activeColor="#006EFF" class="progress-common" :percent="Math.round(props.messageItem.progress * 100)" />
     </div>
   </div>
 </template>
@@ -34,8 +21,8 @@ const props = withDefaults(
   }>(),
   {
     content: () => ({}),
-    messageItem: () => ({} as IMessageModel),
-  },
+    messageItem: () => ({}) as IMessageModel
+  }
 );
 </script>
 
diff --git a/src/TUIKit/components/common/RadioSelect/index.vue b/src/TUIKit/components/common/RadioSelect/index.vue
index a1e78b1..a760d77 100644
--- a/src/TUIKit/components/common/RadioSelect/index.vue
+++ b/src/TUIKit/components/common/RadioSelect/index.vue
@@ -1,17 +1,7 @@
 <template>
-  <div
-    class="radio-select"
-    @click="toggleSelect"
-  >
-    <div
-      v-if="!props.isSelected"
-      class="radio-no-select"
-    />
-    <Icon
-      v-else
-      :file="radioIcon"
-      :size="'20px'"
-    />
+  <div class="radio-select" @click="toggleSelect">
+    <div v-if="!props.isSelected" class="radio-no-select" />
+    <Icon v-else :file="radioIcon" :size="'20px'" />
   </div>
 </template>
 
@@ -28,9 +18,7 @@ interface IEmits {
 }
 
 const emits = defineEmits<IEmits>();
-const props = withDefaults(defineProps<IProps>(),
-  {},
-);
+const props = withDefaults(defineProps<IProps>(), {});
 
 function toggleSelect() {
   emits('onChange', !props.isSelected);
@@ -41,7 +29,7 @@ function toggleSelect() {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  box-sizing: border-box
+  box-sizing: border-box;
 }
 
 .radio-select {
diff --git a/src/TUIKit/components/common/SelectUser/index.vue b/src/TUIKit/components/common/SelectUser/index.vue
index aa25c50..e0073b5 100644
--- a/src/TUIKit/components/common/SelectUser/index.vue
+++ b/src/TUIKit/components/common/SelectUser/index.vue
@@ -1,12 +1,5 @@
 <template>
-  <Dialog
-    :show="true"
-    :isH5="!isPC"
-    :isHeaderShow="false"
-    :isFooterShow="false"
-    :background="false"
-    @update:show="reset"
-  >
+  <Dialog :show="true" :isH5="!isPC" :isHeaderShow="false" :isFooterShow="false" :background="false" @update:show="reset">
     <Transfer
       :isSearch="props.isNeedSearch"
       :title="props.title"
@@ -31,24 +24,24 @@ const emits = defineEmits(['complete', 'search', 'getMore']);
 const props = defineProps({
   isRadio: {
     type: Boolean,
-    default: false,
+    default: false
   },
   isNeedSearch: {
     type: Boolean,
-    default: false,
+    default: false
   },
   title: {
     type: String,
-    default: '',
+    default: ''
   },
   userList: {
     type: Array,
-    default: () => ([]),
+    default: () => []
   },
   total: {
     type: Number,
-    default: 0,
-  },
+    default: 0
+  }
 });
 
 const reset = () => {
diff --git a/src/TUIKit/components/common/Slider/index.vue b/src/TUIKit/components/common/Slider/index.vue
index 5f3e68a..72e0741 100644
--- a/src/TUIKit/components/common/Slider/index.vue
+++ b/src/TUIKit/components/common/Slider/index.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="slider-box"
-    :class="[isSliderOpen && 'slider-open']"
-    @click="toggleSlider"
-  >
+  <div class="slider-box" :class="[isSliderOpen && 'slider-open']" @click="toggleSlider">
     <span class="slider-block" />
   </div>
 </template>
@@ -14,8 +10,8 @@ import { ref, watchEffect } from '../../../adapter-vue';
 const props = defineProps({
   open: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 });
 
 const isSliderOpen = ref(false);
@@ -33,7 +29,7 @@ const toggleSlider = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .slider {
   &-box {
diff --git a/src/TUIKit/components/common/SwitchBar/index.vue b/src/TUIKit/components/common/SwitchBar/index.vue
index c50ad20..98a9e90 100644
--- a/src/TUIKit/components/common/SwitchBar/index.vue
+++ b/src/TUIKit/components/common/SwitchBar/index.vue
@@ -6,8 +6,8 @@
 defineProps({
   value: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 });
 </script>
 <style scoped lang="scss">
diff --git a/src/TUIKit/components/common/Toast/index.ts b/src/TUIKit/components/common/Toast/index.ts
index 37755b0..a84e4e0 100644
--- a/src/TUIKit/components/common/Toast/index.ts
+++ b/src/TUIKit/components/common/Toast/index.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-case-declarations */
 import { createVNode, render, VNode, vueVersion } from '../../../adapter-vue';
 import { TUIGlobal } from '@tencentcloud/universal-api';
 import TOAST_TYPE from './type';
@@ -37,7 +36,7 @@ const Toast = function (options: IToast): IToastReturnType {
     ...options,
     onClose: () => {
       Toast.close(id, userOnClose);
-    },
+    }
   };
   let vm: { component: any; props: any; data: any };
   let container: HTMLDivElement;
@@ -58,35 +57,33 @@ const Toast = function (options: IToast): IToastReturnType {
       return {
         close: () => {
           instance.visible = false;
-        },
+        }
       };
     case 3:
       vm = createVNode(MessageConstructor, props);
       container = document.createElement('div');
-      vm?.props
-      && (vm.props!.onDestroy = () => {
-        render(null, container);
-      });
-      vm?.data
-      && (vm.data!.onDestroy = () => {
-        render(null, container);
-      });
+      vm?.props &&
+        (vm.props!.onDestroy = () => {
+          render(null, container);
+        });
+      vm?.data &&
+        (vm.data!.onDestroy = () => {
+          render(null, container);
+        });
       render(vm, container);
       instances.push({ vm });
       appendTo.appendChild(container.firstElementChild!);
       return {
         close: () => {
           vm?.component?.proxy && (vm.component!.proxy.visible = false);
-        },
+        }
       };
   }
   return {};
 };
 
 export function close(id: string, userOnClose?: (vm: VNode) => void): void {
-  const idx = instances?.findIndex(
-    ({ vm }: any) => id === vm?.component?.props?.id || id === vm?._props?.id,
-  );
+  const idx = instances?.findIndex(({ vm }: any) => id === vm?.component?.props?.id || id === vm?._props?.id);
   if (idx === -1) return;
   const { vm } = instances[idx];
   if (!vm) return;
@@ -97,15 +94,8 @@ export function close(id: string, userOnClose?: (vm: VNode) => void): void {
   const len = instances.length;
   if (len < 1) return;
   for (let i = idx; i < len; i++) {
-    const pos
-      = Number.parseInt(
-        instances[i]?.vm?.el?.style?.top || instances[i]?.vm?.$el?.style?.top,
-        10,
-      )
-      - removedHeight
-      - 16;
-    instances[i]?.vm?.component?.props?.offset
-    && (instances[i].vm.component!.props.offset = pos);
+    const pos = Number.parseInt(instances[i]?.vm?.el?.style?.top || instances[i]?.vm?.$el?.style?.top, 10) - removedHeight - 16;
+    instances[i]?.vm?.component?.props?.offset && (instances[i].vm.component!.props.offset = pos);
     instances[i]?.vm?._props?.offset && (instances[i].vm._props.offset = pos);
   }
 }
diff --git a/src/TUIKit/components/common/Toast/index.vue b/src/TUIKit/components/common/Toast/index.vue
index 3ae38a1..b14c70b 100644
--- a/src/TUIKit/components/common/Toast/index.vue
+++ b/src/TUIKit/components/common/Toast/index.vue
@@ -1,14 +1,6 @@
 <template>
-  <transition
-    name="fade"
-    @after-leave="$emit('destroy')"
-  >
-    <div
-      v-show="visible"
-      class="message"
-      :class="[handleStyle(type), isH5 && 'message-h5']"
-      :style="customStyle"
-    >
+  <transition name="fade" @after-leave="$emit('destroy')">
+    <div v-show="visible" class="message" :class="[handleStyle(type), isH5 && 'message-h5']" :style="customStyle">
       <p v-if="!isH5">
         {{ message }}
       </p>
@@ -17,49 +9,43 @@
   </transition>
 </template>
 <script lang="ts" setup>
-import {
-  computed,
-  CSSProperties,
-  onMounted,
-  ref,
-  watch,
-} from '../../../adapter-vue';
+import { computed, CSSProperties, onMounted, ref, watch } from '../../../adapter-vue';
 import { isH5 } from '../../../utils/env';
 import TOAST_TYPE from './type';
 
 const props = defineProps({
   message: {
     type: String,
-    default: '',
+    default: ''
   },
   duration: {
     type: Number,
-    default: 3000,
+    default: 3000
   },
   repeatNum: {
     type: Number,
-    default: 1,
+    default: 1
   },
   id: {
     type: String,
-    default: '',
+    default: ''
   },
   onClose: {
     type: Function,
-    required: false,
+    required: false
   },
   offset: {
     type: Number,
-    default: 20,
+    default: 20
   },
   zIndex: {
     type: Number,
-    default: 0,
+    default: 0
   },
   type: {
     type: String,
-    default: '',
-  },
+    default: ''
+  }
 });
 const visible = ref(false);
 let timer: any;
@@ -90,12 +76,12 @@ watch(
   () => {
     clearTimer();
     startTimer();
-  },
+  }
 );
 
 const customStyle = computed<CSSProperties>(() => ({
   top: `${props.offset}px`,
-  zIndex: props.zIndex,
+  zIndex: props.zIndex
 }));
 
 onMounted(() => {
@@ -104,18 +90,12 @@ onMounted(() => {
 });
 
 const handleStyle = (type?: string) => {
-  if (
-    type
-      && (type === TOAST_TYPE.ERROR
-      || type === TOAST_TYPE.SUCCESS
-      || type === TOAST_TYPE.WARNING)
-  )
-    return type;
+  if (type && (type === TOAST_TYPE.ERROR || type === TOAST_TYPE.SUCCESS || type === TOAST_TYPE.WARNING)) return type;
   return TOAST_TYPE.NORMAL;
 };
 </script>
 <style lang="scss" scoped>
-@import "../../../assets/styles/common";
+@import '../../../assets/styles/common';
 
 .message {
   position: fixed;
diff --git a/src/TUIKit/components/common/Toast/type.ts b/src/TUIKit/components/common/Toast/type.ts
index e978f13..2be3a3e 100644
--- a/src/TUIKit/components/common/Toast/type.ts
+++ b/src/TUIKit/components/common/Toast/type.ts
@@ -2,7 +2,7 @@ const TOAST_TYPE = {
   SUCCESS: 'success',
   WARNING: 'warning',
   ERROR: 'error',
-  NORMAL: 'normal',
+  NORMAL: 'normal'
 };
 
 export default TOAST_TYPE;
diff --git a/src/TUIKit/components/common/Transfer/index.vue b/src/TUIKit/components/common/Transfer/index.vue
index 3cda8ec..31995c4 100644
--- a/src/TUIKit/components/common/Transfer/index.vue
+++ b/src/TUIKit/components/common/Transfer/index.vue
@@ -1,22 +1,8 @@
 <template>
-  <div
-    class="transfer"
-    :class="[!isPC ? 'transfer-h5' : '', isWeChat ? 'transfer-h5-wechat' : '']"
-  >
-    <header
-      v-if="!isPC"
-      class="transfer-header transfer-h5-header"
-    >
-      <div
-        v-if="!props.isHiddenBackIcon"
-        @click="cancel"
-      >
-        <Icon
-          class="icon"
-          :file="backIcon"
-          :width="'18px'"
-          :height="'18px'"
-        />
+  <div class="transfer" :class="[!isPC ? 'transfer-h5' : '', isWeChat ? 'transfer-h5-wechat' : '']">
+    <header v-if="!isPC" class="transfer-header transfer-h5-header">
+      <div v-if="!props.isHiddenBackIcon" @click="cancel">
+        <Icon class="icon" :file="backIcon" :width="'18px'" :height="'18px'" />
       </div>
       <span class="title">{{ transferTitle }}</span>
       <span class="space" />
@@ -33,7 +19,7 @@
             enterkeyhint="search"
             :class="[isUniFrameWork ? 'left-uniapp-input' : '']"
             @keyup.enter="handleInput"
-          >
+          />
           <!-- not PC triggers blur -->
           <input
             v-if="!isPC && isTransferSearch"
@@ -44,35 +30,16 @@
             :class="[isUniFrameWork ? 'left-uniapp-input' : '']"
             @blur="handleInput"
             @confirm="handleInput"
-          >
+          />
         </header>
         <main class="transfer-left-main">
           <ul class="transfer-list">
-            <li
-              v-if="optional.length > 1 && !isRadio"
-              class="transfer-list-item"
-              @click="selectedAll"
-            >
-              <Icon
-                v-if="transferSelectedList.length === optional.length"
-                :file="selectedIcon"
-                :width="'18px'"
-                :height="'18px'"
-              />
-              <i
-                v-else
-                class="icon-unselected"
-              />
-              <span class="select-all">{{
-                TUITranslateService.t("component.全选")
-              }}</span>
+            <li v-if="optional.length > 1 && !isRadio" class="transfer-list-item" @click="selectedAll">
+              <Icon v-if="transferSelectedList.length === optional.length" :file="selectedIcon" :width="'18px'" :height="'18px'" />
+              <i v-else class="icon-unselected" />
+              <span class="select-all">{{ TUITranslateService.t('component.全选') }}</span>
             </li>
-            <li
-              v-for="item in transferList"
-              :key="item.userID"
-              class="transfer-list-item"
-              @click="selected(item)"
-            >
+            <li v-for="item in transferList" :key="item.userID" class="transfer-list-item" @click="selected(item)">
               <Icon
                 v-if="transferSelectedList.indexOf(item) > -1"
                 :file="selectedIcon"
@@ -80,117 +47,62 @@
                 :width="'18px'"
                 :height="'18px'"
               />
-              <i
-                v-else
-                :class="[item.isDisabled && 'disabled', 'icon-unselected']"
-              />
+              <i v-else :class="[item.isDisabled && 'disabled', 'icon-unselected']" />
               <template v-if="!isTransferCustomItem">
                 <img
                   class="avatar"
-                  :src="
-                    item.avatar ||
-                      'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-                  "
+                  :src="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 v-if="item.isDisabled">（{{ TUITranslateService.t("component.已在群中") }}）</span>
+                <span v-if="item.isDisabled">（{{ TUITranslateService.t('component.已在群中') }}）</span>
               </template>
               <template v-else>
-                <slot
-                  name="left"
-                  :data="item"
-                />
+                <slot name="left" :data="item" />
               </template>
             </li>
-            <li
-              v-if="transferTotal > transferList.length"
-              class="transfer-list-item more"
-              @click="getMore"
-            >
-              {{ TUITranslateService.t("component.查看更多") }}
+            <li v-if="transferTotal > transferList.length" class="transfer-list-item more" @click="getMore">
+              {{ TUITranslateService.t('component.查看更多') }}
             </li>
           </ul>
         </main>
       </div>
       <div class="right">
-        <header
-          v-if="isPC"
-          class="transfer-header"
-        >
+        <header v-if="isPC" class="transfer-header">
           {{ transferTitle }}
         </header>
-        <ul
-          v-if="resultShow"
-          class="transfer-list"
-        >
-          <p
-            v-if="transferSelectedList.length > 0 && isPC"
-            class="transfer-text"
-          >
-            {{ TUITranslateService.t("component.已选中")
-            }}{{ transferSelectedList.length
-            }}{{ TUITranslateService.t("component.人") }}
+        <ul v-if="resultShow" class="transfer-list">
+          <p v-if="transferSelectedList.length > 0 && isPC" class="transfer-text">
+            {{ TUITranslateService.t('component.已选中') }}{{ transferSelectedList.length }}{{ TUITranslateService.t('component.人') }}
           </p>
-          <li
-            v-for="(item, index) in transferSelectedList"
-            :key="index"
-            class="transfer-list-item space-between"
-          >
+          <li v-for="(item, index) in transferSelectedList" :key="index" class="transfer-list-item space-between">
             <aside class="transfer-list-item-content">
               <template v-if="!isTransferCustomItem">
                 <img
                   class="avatar"
-                  :src="
-                    item.avatar ||
-                      'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
-                  "
+                  :src="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
-                  v-if="isPC"
-                  class="name"
-                >{{ item.nick || item.userID }}</span>
+                />
+                <span v-if="isPC" class="name">{{ item.nick || item.userID }}</span>
               </template>
               <template v-else>
-                <slot
-                  name="right"
-                  :data="item"
-                />
+                <slot name="right" :data="item" />
               </template>
             </aside>
-            <span
-              v-if="isPC"
-              @click="selected(item)"
-            >
-              <Icon
-                :file="cancelIcon"
-                :width="'18px'"
-                :height="'18px'"
-              />
+            <span v-if="isPC" @click="selected(item)">
+              <Icon :file="cancelIcon" :width="'18px'" :height="'18px'" />
             </span>
           </li>
         </ul>
         <footer class="transfer-right-footer">
-          <button
-            class="btn btn-cancel"
-            @click="cancel"
-          >
-            {{ TUITranslateService.t("component.取消") }}
+          <button class="btn btn-cancel" @click="cancel">
+            {{ TUITranslateService.t('component.取消') }}
           </button>
-          <button
-            v-if="transferSelectedList.length > 0"
-            class="btn"
-            @click="submit"
-          >
-            {{ TUITranslateService.t("component.完成") }}
+          <button v-if="transferSelectedList.length > 0" class="btn" @click="submit">
+            {{ TUITranslateService.t('component.完成') }}
           </button>
-          <button
-            v-else
-            class="btn btn-no"
-            @click="submit"
-          >
-            {{ TUITranslateService.t("component.完成") }}
+          <button v-else class="btn btn-no" @click="submit">
+            {{ TUITranslateService.t('component.完成') }}
           </button>
         </footer>
       </div>
@@ -211,44 +123,44 @@ import { isPC, isUniFrameWork, isWeChat } from '../../../utils/env';
 const props = defineProps({
   list: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   selectedList: {
     type: Array,
-    default: () => [],
+    default: () => []
   },
   isSearch: {
     type: Boolean,
-    default: true,
+    default: true
   },
   isRadio: {
     type: Boolean,
-    default: false,
+    default: false
   },
   isCustomItem: {
     type: Boolean,
-    default: false,
+    default: false
   },
   title: {
     type: String,
-    default: '',
+    default: ''
   },
   type: {
     type: String,
-    default: '',
+    default: ''
   },
   resultShow: {
     type: Boolean,
-    default: true,
+    default: true
   },
   total: {
     type: Number,
-    default: 0,
+    default: 0
   },
   isHiddenBackIcon: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 });
 
 const transferList = ref<ITransferListItem[]>([]);
@@ -262,9 +174,7 @@ const searchValue = ref('');
 watchEffect(() => {
   if (props.isCustomItem) {
     for (let index = 0; index < props.list.length; index++) {
-      if (
-        (props.list[index] as any).conversationID.indexOf('@TIM#SYSTEM') > -1
-      ) {
+      if ((props.list[index] as any).conversationID.indexOf('@TIM#SYSTEM') > -1) {
         // eslint-disable-next-line vue/no-mutating-props
         props.list.splice(index, 1);
       }
@@ -282,9 +192,7 @@ watchEffect(() => {
 
 const emit = defineEmits(['search', 'submit', 'cancel', 'getMore']);
 
-const optional = computed(() =>
-  transferList.value.filter((item: any) => !item.isDisabled),
-);
+const optional = computed(() => transferList.value.filter((item: any) => !item.isDisabled));
 
 const handleInput = (e: any) => {
   searchValue.value = e.target.value || e.detail.value;
diff --git a/src/TUIKit/components/index.ts b/src/TUIKit/components/index.ts
index cfd159a..ae5c7f1 100644
--- a/src/TUIKit/components/index.ts
+++ b/src/TUIKit/components/index.ts
@@ -1,8 +1,8 @@
-import TUIChat from "./TUIChat";
-import TUIConversation from "./TUIConversation";
-import TUISearch from "./TUISearch";
-import TUIContact from "./TUIContact";
-import TUIGroup from "./TUIGroup";
+import TUIChat from './TUIChat';
+import TUIConversation from './TUIConversation';
+import TUISearch from './TUISearch';
+import TUIContact from './TUIContact';
+import TUIGroup from './TUIGroup';
 
 const TUIComponents = {
   TUIChat,
@@ -14,10 +14,4 @@ const TUIComponents = {
 
 export default TUIComponents;
 
-export {
-  TUIChat,
-  TUIConversation,
-  TUIContact,
-  TUISearch,
-  TUIGroup,
-};
+export { TUIChat, TUIConversation, TUIContact, TUISearch, TUIGroup };
diff --git a/src/TUIKit/constant.ts b/src/TUIKit/constant.ts
index 2824925..518082f 100644
--- a/src/TUIKit/constant.ts
+++ b/src/TUIKit/constant.ts
@@ -1,48 +1,48 @@
 export const CONV_OPERATION = {
-  DELETE: "delete",
-  ISPINNED: "ispinned",
-  DISPINNED: "dispinned",
-  MUTE: "mute",
-  NOTMUTE: "notmute",
+  DELETE: 'delete',
+  ISPINNED: 'ispinned',
+  DISPINNED: 'dispinned',
+  MUTE: 'mute',
+  NOTMUTE: 'notmute'
 };
 
 export const CONV_CREATE_TYPE = {
-  TYPEC2C: "isC2C",
-  TYPEGROUP: "isGroup",
-  JOINGROUP: "joinGroup",
+  TYPEC2C: 'isC2C',
+  TYPEGROUP: 'isGroup',
+  JOINGROUP: 'joinGroup'
 };
 
 export const CHAT_MSG_CUSTOM_TYPE = {
-  SERVICE: "consultion",
-  EVALUATE: "evaluation",
-  LINK: "text_link",
+  SERVICE: 'consultion',
+  EVALUATE: 'evaluation',
+  LINK: 'text_link',
   CALL: 1,
-  ORDER: "order",
+  ORDER: 'order'
 };
 
 export const DIALOG_CONTENT = {
-  USERLIST: "userList",
-  GROUPINFORMATION: "groupInformation",
+  USERLIST: 'userList',
+  GROUPINFORMATION: 'groupInformation'
 };
 
 export const EMOJI_TYPE = {
-  BASIC: "basic",
-  BIG: "big",
-  CUSTOM: "CUSTOM",
+  BASIC: 'basic',
+  BIG: 'big',
+  CUSTOM: 'CUSTOM'
 };
 
 export const CONTACT_INFO_LABEL_POSITION = {
-  LEFT: "left",
-  TOP: "top",
+  LEFT: 'left',
+  TOP: 'top'
 };
 
 export const CONTACT_INFO_MORE_EDIT_TYPE = {
-  INPUT: "input",
-  TEXTAREA: "textarea",
-  SWITCH: "switch",
+  INPUT: 'input',
+  TEXTAREA: 'textarea',
+  SWITCH: 'switch'
 };
 
 export const CONTACT_INFO_BUTTON_TYPE = {
-  SUBMIT: "submit",
-  CANCEL: "cancel",
+  SUBMIT: 'submit',
+  CANCEL: 'cancel'
 };
diff --git a/src/TUIKit/debug/GenerateTestUserSig.js b/src/TUIKit/debug/GenerateTestUserSig.js
index 45de930..30a6044 100644
--- a/src/TUIKit/debug/GenerateTestUserSig.js
+++ b/src/TUIKit/debug/GenerateTestUserSig.js
@@ -30,7 +30,7 @@ function genTestUserSig(options) {
   const userSig = generator.genTestUserSig(userID);
   return {
     SDKAppID,
-    userSig,
+    userSig
   };
 }
 
diff --git a/src/TUIKit/debug/index.js b/src/TUIKit/debug/index.js
index 515203a..a8e7003 100644
--- a/src/TUIKit/debug/index.js
+++ b/src/TUIKit/debug/index.js
@@ -1 +1 @@
-export * from "./GenerateTestUserSig";
+export * from './GenerateTestUserSig';
diff --git a/src/TUIKit/index.ts b/src/TUIKit/index.ts
index f266ebf..f971bb1 100644
--- a/src/TUIKit/index.ts
+++ b/src/TUIKit/index.ts
@@ -1,27 +1,10 @@
 import { genTestUserSig } from './debug';
 import Server from './server';
-import TUIComponents, {
-  TUIChat,
-  TUIConversation,
-  TUIContact,
-  TUISearch,
-  TUIGroup,
-} from './components';
+import TUIComponents, { TUIChat, TUIConversation, TUIContact, TUISearch, TUIGroup } from './components';
 import TUIKit from './index.vue';
 import { hideTUIChatFeatures } from './components/TUIChat/config';
 
 const TUIChatKit = new Server();
 TUIChatKit.init();
 
-export {
-  TUIKit,
-  TUIChatKit,
-  TUIComponents,
-  TUIChat,
-  TUIConversation,
-  TUIContact,
-  TUISearch,
-  TUIGroup,
-  hideTUIChatFeatures,
-  genTestUserSig,
-};
+export { TUIKit, TUIChatKit, TUIComponents, TUIChat, TUIConversation, TUIContact, TUISearch, TUIGroup, hideTUIChatFeatures, genTestUserSig };
diff --git a/src/TUIKit/index.vue b/src/TUIKit/index.vue
index fdb3972..75a7147 100644
--- a/src/TUIKit/index.vue
+++ b/src/TUIKit/index.vue
@@ -2,10 +2,7 @@
   <div :key="currentLanguage">
     <slot>
       <div :class="['TUIKit', isH5 && 'TUIKit-h5']">
-        <div
-          v-if="!(isH5 && currentConversationID)"
-          class="TUIKit-navbar"
-        >
+        <div v-if="!(isH5 && currentConversationID)" class="TUIKit-navbar">
           <div
             v-for="item of navbarList"
             :key="item.id"
@@ -16,44 +13,23 @@
           </div>
         </div>
         <div class="TUIKit-main-container">
-          <div
-            v-if="currentNavbar === 'message'"
-            class="TUIKit-main"
-          >
-            <div
-              v-if="!(isH5 && currentConversationID)"
-              class="TUIKit-main-aside"
-            >
+          <div v-if="currentNavbar === 'message'" class="TUIKit-main">
+            <div v-if="!(isH5 && currentConversationID)" class="TUIKit-main-aside">
               <TUISearch searchType="global" />
               <TUIConversation />
             </div>
-            <div
-              v-if="!isH5 || currentConversationID"
-              class="TUIKit-main-main"
-            >
+            <div v-if="!isH5 || currentConversationID" class="TUIKit-main-main">
               <TUIChat>
                 <h1>{{ TUITranslateService.t('欢迎使用腾讯云即时通信IM') }}</h1>
               </TUIChat>
               <TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" />
-              <TUISearch
-                :class="isH5 ? 'chat-popup' : 'chat-aside'"
-                searchType="conversation"
-              />
+              <TUISearch :class="isH5 ? 'chat-popup' : 'chat-aside'" searchType="conversation" />
             </div>
-            <TUIGroup
-              v-if="isH5 && !currentConversationID"
-              class="chat-popup"
-            />
+            <TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" />
             <TUIContact displayType="selectFriend" />
           </div>
-          <div
-            v-else-if="currentNavbar === 'contact'"
-            class="TUIKit-main"
-          >
-            <TUIContact
-              displayType="contactList"
-              @switchConversation="currentNavbar = 'message'"
-            />
+          <div v-else-if="currentNavbar === 'contact'" class="TUIKit-main">
+            <TUIContact displayType="contactList" @switchConversation="currentNavbar = 'message'" />
           </div>
         </div>
       </div>
@@ -73,44 +49,44 @@ const currentLanguage = ref<string>('zh');
 const navbarList = [
   {
     id: 'message',
-    label: '消息',
+    label: '消息'
   },
   {
     id: 'contact',
-    label: '通讯录',
-  },
+    label: '通讯录'
+  }
 ];
 
 const props = defineProps({
   // When deploying a production environment, you do not need to pass in SDKAppID, userID, and userSig through props.
-  // eslint-disable-next-line vue/prop-name-casing
+
   SDKAppID: {
     type: Number,
     default: 0,
-    required: false,
+    required: false
   },
   userID: {
     type: String,
     default: '',
-    required: false,
+    required: false
   },
   userSig: {
     type: String,
     default: '',
-    required: false,
+    required: false
   },
   conversationID: {
     type: String,
     default: '',
-    required: false, // When integrating Chat independently, you need to pass the conversationID
-  },
+    required: false // When integrating Chat independently, you need to pass the conversationID
+  }
 });
 
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversationID: (id: string) => {
       currentConversationID.value = id;
-    },
+    }
   });
 
   // Default login logic
@@ -131,23 +107,22 @@ function login() {
       userID,
       userSig,
       useUploadPlugin: true,
-      framework,
-    }).then(() => {
-      // Execute the following code when integrating Chat independently
-      if (conversationID.startsWith('C2C') || conversationID.startsWith('GROUP')) {
-        TUIConversationService.switchConversation(conversationID);
-      }
-      // report language
-      TUIReportService.reportFeature(201, currentLanguage.value);
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    }).catch((error) => { });
+      framework
+    })
+      .then(() => {
+        // Execute the following code when integrating Chat independently
+        if (conversationID.startsWith('C2C') || conversationID.startsWith('GROUP')) {
+          TUIConversationService.switchConversation(conversationID);
+        }
+        // report language
+        TUIReportService.reportFeature(201, currentLanguage.value);
+      })
+      .catch((error) => {});
   }
 }
 
 function isIntlSDKAppID(SDKAppID: number) {
-  if ((SDKAppID === 0)
-    || (SDKAppID >= 20000000 && SDKAppID < 90000000)
-    || (SDKAppID >= 1720000000 && SDKAppID < 1790000000)) {
+  if (SDKAppID === 0 || (SDKAppID >= 20000000 && SDKAppID < 90000000) || (SDKAppID >= 1720000000 && SDKAppID < 1790000000)) {
     return true;
   }
   return false;
@@ -169,24 +144,24 @@ function modifyCallKitStyle() {
 }
 </script>
 <style scoped lang="scss">
-  @import "./assets/styles/common";
-  @import "./assets/styles/sample";
+@import './assets/styles/common';
+@import './assets/styles/sample';
 </style>
 <style lang="scss">
-  /* stylelint-disable-next-line */
-  $left: var(--callLeft, calc(50% - 25rem));
-  /* stylelint-disable-next-line */
-  $top: var(--callTop, calc(50% - 18rem));
-  /* stylelint-disable-next-line */
-  $width: var(--callWidth, 50rem);
-  /* stylelint-disable-next-line */
-  $height: var(--callHeight, 36rem);
+/* stylelint-disable-next-line */
+$left: var(--callLeft, calc(50% - 25rem));
+/* stylelint-disable-next-line */
+$top: var(--callTop, calc(50% - 18rem));
+/* stylelint-disable-next-line */
+$width: var(--callWidth, 50rem);
+/* stylelint-disable-next-line */
+$height: var(--callHeight, 36rem);
 
-  .callkit-container {
-    position: fixed !important;
-    left: $left !important;
-    top: $top !important;
-    width: $width !important;
-    height: $height !important;
-  }
+.callkit-container {
+  position: fixed !important;
+  left: $left !important;
+  top: $top !important;
+  width: $width !important;
+  height: $height !important;
+}
 </style>
diff --git a/src/TUIKit/interface.ts b/src/TUIKit/interface.ts
index 2e1483f..43fa290 100644
--- a/src/TUIKit/interface.ts
+++ b/src/TUIKit/interface.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { IConversationModel, IGroupModel, IMessageModel, Friend, FriendApplication } from '@tencentcloud/chat-uikit-engine';
 
 export interface ITUIComponents {
diff --git a/src/TUIKit/locales/en/TUIChat.ts b/src/TUIKit/locales/en/TUIChat.ts
index 8c6a475..7ff1d34 100644
--- a/src/TUIKit/locales/en/TUIChat.ts
+++ b/src/TUIKit/locales/en/TUIChat.ts
@@ -1,5 +1,6 @@
 const TUIChat = {
-  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。': '【Security Tips】This APP is only used to experience the functions of Tencent Cloud Instant Messaging products, and cannot be used for business negotiation and expansion. Don\'t trust money-related information such as remittances and lottery wins, don\'t make unfamiliar phone calls easily, and beware of being deceived.',
+  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。':
+    "【Security Tips】This APP is only used to experience the functions of Tencent Cloud Instant Messaging products, and cannot be used for business negotiation and expansion. Don't trust money-related information such as remittances and lottery wins, don't make unfamiliar phone calls easily, and beware of being deceived.",
   '按Enter发送，Ctrl+Enter换行': 'Press Enter to send a message and Ctrl+Enter to start a new line',
   '表情': '[Face]',
   '查看更多': 'View more',
@@ -24,7 +25,8 @@ const TUIChat = {
   '回复': 'Reply',
   '回复详情': 'Replies',
   '集成TUICallKit': ' Integrate TUICallKit ',
-  '检测到您暂未集成TUICallKit，无法体验音视频通话功能': 'It is detected that you have not integrated TUI CallKit yet, so you cannot experience the audio and video call. ',
+  '检测到您暂未集成TUICallKit，无法体验音视频通话功能':
+    'It is detected that you have not integrated TUI CallKit yet, so you cannot experience the audio and video call. ',
   '结束群聊': 'Edit Group Call',
   '进行体验': 'to experience.',
   '经度': 'Longitude',
@@ -150,7 +152,7 @@ const TUIChat = {
   '该群聊已被解散': 'The group has been dismissed',
   '您已被管理员移出群聊': 'You have been removed from the group by the admin.',
   '您已退出该群聊': 'You have left the group.',
-  '您已被禁止聊天': 'you have been forbidden to speak',
+  '您已被禁止聊天': 'you have been forbidden to speak'
 };
 
 export default TUIChat;
diff --git a/src/TUIKit/locales/en/TUIContact.ts b/src/TUIKit/locales/en/TUIContact.ts
index 18e62ab..c203b66 100644
--- a/src/TUIKit/locales/en/TUIContact.ts
+++ b/src/TUIKit/locales/en/TUIContact.ts
@@ -1,66 +1,66 @@
 const TUIContact = {
-  "群聊通知": "Group Chat Notifications",
-  "系统通知": "System Notifications",
-  "我的群聊": "My Group Chats",
-  "输入ID": "Enter a groupID/userID",
-  "群名称": "Group name",
-  "群ID": "Group ID",
-  "加入群聊": "Join group chat",
-  "解散群聊": "Disband group chat",
-  "退出群聊": "Quit group chat",
-  "进入群聊": "Enter group chat",
-  "群类型": "Group type",
-  "请填写验证信息": "Enter the verification info",
-  "申请加入": "Request to join",
-  "已申请":"Requested",
-  "接受": "Accept",
-  "拒绝": "Refuse",
-  "已处理": "Handled",
-  "添加群聊": "add group chat",
-  "已加入": "joined",
-  "该群组不存在": "The group does not exist",
-  "加群": "join",
-  "我的好友": "Friend",
-  "发送消息": "Send Message",
-  "个性签名": "Signature",
-  "等待管理员同意": "Successful application, waiting for the administrator to agree to join the group application",
-  "加群成功": "Join the group successfully",
-  "您已是群成员": "You are already a group member",
-  "新的联系人": "New Contacts",
-  "黑名单": "Blocked List",
-  "无搜索结果": "No Result",
-  "客服号": "Customer Service List",
-  "ID": "ID",
-  "联系人": "User",
-  "群聊": "Group",
-  "添加好友/群聊": "Add friend/group",
-  "备注名": "remark",
-  "加入黑名单": "block",
-  "删除好友": "Delete friend",
-  "等待验证": "waiting for verification",
-  "验证信息": "verification info",
-  "发送申请": "Send application",
-  "加入直播群": "Join AVChatRoom",
-  "同意": "Agree",
-  "删除好友成功": "Delete friend success",
-  "删除好友失败": "Delete friend failed",
-  "申请已发送": "Application has been sent",
-  "申请发送失败": "Application failed to send",
-  "进入会话失败": "Failed to enter session",
-  "添加好友成功": "Add friend success",
-  "同意好友申请失败": "Failed to agree to friend request",
-  "拒绝成功": "Reject friend request success",
-  "拒绝好友申请失败": "Failed to reject friend request",
-  "解散群聊成功": "Dismissed group success",
-  "解散群聊失败": "Dismissed group failed",
-  "退出群组成功": "Quit group success",
-  "退出群组失败": "Quit group failed",
-  "申请入群失败": "Application to join the group failed",
-  "加入黑名单失败": "Add to blocklist failed",
-  "移除黑名单失败": "Remove from blocklist failed",
-  "修改备注失败: 备注长度不得超过 96 字节": "Failed to modify the remark: the length of the remark cannot exceed 96 bytes",
-  "修改备注成功": "Remark modified success",
-  "修改备注失败": "Remark modified failed",
-}
+  '群聊通知': 'Group Chat Notifications',
+  '系统通知': 'System Notifications',
+  '我的群聊': 'My Group Chats',
+  '输入ID': 'Enter a groupID/userID',
+  '群名称': 'Group name',
+  '群ID': 'Group ID',
+  '加入群聊': 'Join group chat',
+  '解散群聊': 'Disband group chat',
+  '退出群聊': 'Quit group chat',
+  '进入群聊': 'Enter group chat',
+  '群类型': 'Group type',
+  '请填写验证信息': 'Enter the verification info',
+  '申请加入': 'Request to join',
+  '已申请': 'Requested',
+  '接受': 'Accept',
+  '拒绝': 'Refuse',
+  '已处理': 'Handled',
+  '添加群聊': 'add group chat',
+  '已加入': 'joined',
+  '该群组不存在': 'The group does not exist',
+  '加群': 'join',
+  '我的好友': 'Friend',
+  '发送消息': 'Send Message',
+  '个性签名': 'Signature',
+  '等待管理员同意': 'Successful application, waiting for the administrator to agree to join the group application',
+  '加群成功': 'Join the group successfully',
+  '您已是群成员': 'You are already a group member',
+  '新的联系人': 'New Contacts',
+  '黑名单': 'Blocked List',
+  '无搜索结果': 'No Result',
+  '客服号': 'Customer Service List',
+  'ID': 'ID',
+  '联系人': 'User',
+  '群聊': 'Group',
+  '添加好友/群聊': 'Add friend/group',
+  '备注名': 'remark',
+  '加入黑名单': 'block',
+  '删除好友': 'Delete friend',
+  '等待验证': 'waiting for verification',
+  '验证信息': 'verification info',
+  '发送申请': 'Send application',
+  '加入直播群': 'Join AVChatRoom',
+  '同意': 'Agree',
+  '删除好友成功': 'Delete friend success',
+  '删除好友失败': 'Delete friend failed',
+  '申请已发送': 'Application has been sent',
+  '申请发送失败': 'Application failed to send',
+  '进入会话失败': 'Failed to enter session',
+  '添加好友成功': 'Add friend success',
+  '同意好友申请失败': 'Failed to agree to friend request',
+  '拒绝成功': 'Reject friend request success',
+  '拒绝好友申请失败': 'Failed to reject friend request',
+  '解散群聊成功': 'Dismissed group success',
+  '解散群聊失败': 'Dismissed group failed',
+  '退出群组成功': 'Quit group success',
+  '退出群组失败': 'Quit group failed',
+  '申请入群失败': 'Application to join the group failed',
+  '加入黑名单失败': 'Add to blocklist failed',
+  '移除黑名单失败': 'Remove from blocklist failed',
+  '修改备注失败: 备注长度不得超过 96 字节': 'Failed to modify the remark: the length of the remark cannot exceed 96 bytes',
+  '修改备注成功': 'Remark modified success',
+  '修改备注失败': 'Remark modified failed'
+};
 
 export default TUIContact;
diff --git a/src/TUIKit/locales/en/TUIConversation.ts b/src/TUIKit/locales/en/TUIConversation.ts
index 943b535..e64a293 100644
--- a/src/TUIKit/locales/en/TUIConversation.ts
+++ b/src/TUIKit/locales/en/TUIConversation.ts
@@ -1,24 +1,24 @@
 const TUIConversation = {
-  "发起会话": "Start chat",
-  "发起单聊": "New one-to-one chat",
-  "发起群聊": "New group chat",
-  "请输入userID": "Enter a user ID",
-  "删除会话": "Delete",
-  "删除后，将清空该聊天的消息记录": "Once deleted, all chat messages will be cleared.",
-  "删除后，将清空该群聊的消息记录": "Once deleted, group chat history will be cleared.",
-  "系统通知": "System notification",
-  "置顶会话": "Pin",
-  "取消置顶": "Unpin",
-  "消息免打扰": "Mute Notifications",
-  "取消免打扰": "Enable Notifications",
-  "有人@我": "Someone @ me",
-  "@所有人": "@All",
-  "条": "strip",
-  "我": "me",
-  "网络异常，请您检查网络设置": "Network exception, please check the network settings",
-  "您已被群管理员移出群聊": "You have been removed from the group chat by the group administrator",
-  "该群聊已被解散": "The group chat has been disband",
-  "您已退出该群聊": "You have left the group chat",
-}
+  '发起会话': 'Start chat',
+  '发起单聊': 'New one-to-one chat',
+  '发起群聊': 'New group chat',
+  '请输入userID': 'Enter a user ID',
+  '删除会话': 'Delete',
+  '删除后，将清空该聊天的消息记录': 'Once deleted, all chat messages will be cleared.',
+  '删除后，将清空该群聊的消息记录': 'Once deleted, group chat history will be cleared.',
+  '系统通知': 'System notification',
+  '置顶会话': 'Pin',
+  '取消置顶': 'Unpin',
+  '消息免打扰': 'Mute Notifications',
+  '取消免打扰': 'Enable Notifications',
+  '有人@我': 'Someone @ me',
+  '@所有人': '@All',
+  '条': 'strip',
+  '我': 'me',
+  '网络异常，请您检查网络设置': 'Network exception, please check the network settings',
+  '您已被群管理员移出群聊': 'You have been removed from the group chat by the group administrator',
+  '该群聊已被解散': 'The group chat has been disband',
+  '您已退出该群聊': 'You have left the group chat'
+};
 
 export default TUIConversation;
diff --git a/src/TUIKit/locales/en/TUIGroup.ts b/src/TUIKit/locales/en/TUIGroup.ts
index d08a2c9..b7f0e0e 100644
--- a/src/TUIKit/locales/en/TUIGroup.ts
+++ b/src/TUIKit/locales/en/TUIGroup.ts
@@ -1,86 +1,91 @@
 const TUIGroup = {
- "输入groupID搜索": "Enter groupId search",
-  "群名称": "Group name",
-  "群ID": "Group ID",
-  "加入群聊": "Join",
-  "解散群聊": "Dissolution",
-  "退出群聊": "Quit",
-  "群类型": "Group type",
-  "请填写验证信息": "Please fill in the verification information",
-  "申请加入": "Apply Join",
-  "群公告": "Group notice",
-  "群成员": "Group member",
-  "群管理": "Manage group",
-  "好友工作群": "Work",
-  "陌生人社交群": "Public",
-  "临时会议群": "Meeting",
-  "直播群": "AVChatRoom",
-  "社群": "Community",
-  "自由加入": "Join freely",
-  "需要验证": "Require approval",
-  "禁止加群": "Disallow group joining",
-  "人": "",
-  "确认": "Confirm",
-  "群头像": "Group profile photo",
-  "加群方式": "Group joining mode",
-  "转让群组": "Transfer ownership",
-  "退出群组": "Quit group",
-  "群管理员": "Group admin",
-  "全员禁言": "Mute All",
-  "全员禁言开启后，只允许群主和管理员发言。": "If Mute All is enabled, only the group owner and admin can speak.",
-  "单独禁言人员": "Mute a member",
-  "删除成员": "Remove member",
-  "确定从群聊中删除该成员？": "Are you sure you want to remove this member from the group chat?",
-  "确定从群聊中删除所选成员？": "Are you sure you want to remove selected member(s) from the group chat?",
-  "暂无公告": "No notice",
-  "发布": "Post",
-  "编辑": "Edit",
-  "查看更多": "View more",
-  "管理员": "Admin",
-  "群主": "Group owner",
-  "我": "me",
-  "添加成员": "Add member",
-  "新增管理员": "Add admin",
-  "移除管理员": "Revoke admin",
-  "新增禁言用户": "Add muted member",
-  "移除禁言用户": "Remove muted member",
-  "修改群聊名称": "Edit group name",
-  "修改群聊名称后，将在群内通知其他成员": "After modifying the group chat name, other members will be notified in the group",
-  "仅限中文、字母、数字和下划线，2-20个字": "Chinese, letters, numbers and underscores only, 2-20 words",
-  "请先注册 TUIGroup 模块": "Please register the TUIGroup module first",
-  "该用户不存在": "The user does not exist",
-  "该用户不在群组内": "The user is not in the group",
-  "添加群聊": "Add a group chat",
-  "该群组不存在": "The group does not exist",
-  "创建群聊，请注册 TUIGroup 模块": "To create a group chat, please register the TUIGroup module",
-  "创建成功": "Creation successful",
-  "发起多人会话（群聊）": "New group chat",
-  "选填": "Optional",
-  "取消": "Cancel",
-  "创建": "Create",
-  "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见": "Similar to a WeChat group. Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.",
-  "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见": "Similar to a QQ group. After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details. ",
-  "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见": "After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.",
-  "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见": "After creation, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details. ",
-  "创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见": "After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details. ",
-  "产品文档": "product documentation",
-  "设置群名称": "Group name",
-  "请输入群名称": "Enter the group name",
-  "设置群ID": "Group ID",
-  "请输入群ID": "Enter the group ID",
-  "选择群类型": "Group type",
-  "陌生人社交群（Public）": "Stranger social group (Public)",
-  "临时会议群（Meeting）": "Temporary meeting group (Meeting)",
-  "好友工作群（Work）": "Friends work group (Work)",
-  "直播群（AVChatroom）": "Live Streaming Group (AVChatroom)",
-  "社群（Community）": "Community（Community）",
-  "群组创建成功": "Create group success",
-  "群组解散成功": "Dismiss group success",
-  "禁言设置成功": "Mute all success",
-  "取消禁言成功": "Remove mute success",
-  "群名称不能为空": "Group name cannot be empty",
-  "群名称修改成功": "Group name modified success",
-  "群公告字数超出限制，最大长度为150": "The number of characters in the group announcement exceeds the limit, the maximum length is 150",
+  '输入groupID搜索': 'Enter groupId search',
+  '群名称': 'Group name',
+  '群ID': 'Group ID',
+  '加入群聊': 'Join',
+  '解散群聊': 'Dissolution',
+  '退出群聊': 'Quit',
+  '群类型': 'Group type',
+  '请填写验证信息': 'Please fill in the verification information',
+  '申请加入': 'Apply Join',
+  '群公告': 'Group notice',
+  '群成员': 'Group member',
+  '群管理': 'Manage group',
+  '好友工作群': 'Work',
+  '陌生人社交群': 'Public',
+  '临时会议群': 'Meeting',
+  '直播群': 'AVChatRoom',
+  '社群': 'Community',
+  '自由加入': 'Join freely',
+  '需要验证': 'Require approval',
+  '禁止加群': 'Disallow group joining',
+  '人': '',
+  '确认': 'Confirm',
+  '群头像': 'Group profile photo',
+  '加群方式': 'Group joining mode',
+  '转让群组': 'Transfer ownership',
+  '退出群组': 'Quit group',
+  '群管理员': 'Group admin',
+  '全员禁言': 'Mute All',
+  '全员禁言开启后，只允许群主和管理员发言。': 'If Mute All is enabled, only the group owner and admin can speak.',
+  '单独禁言人员': 'Mute a member',
+  '删除成员': 'Remove member',
+  '确定从群聊中删除该成员？': 'Are you sure you want to remove this member from the group chat?',
+  '确定从群聊中删除所选成员？': 'Are you sure you want to remove selected member(s) from the group chat?',
+  '暂无公告': 'No notice',
+  '发布': 'Post',
+  '编辑': 'Edit',
+  '查看更多': 'View more',
+  '管理员': 'Admin',
+  '群主': 'Group owner',
+  '我': 'me',
+  '添加成员': 'Add member',
+  '新增管理员': 'Add admin',
+  '移除管理员': 'Revoke admin',
+  '新增禁言用户': 'Add muted member',
+  '移除禁言用户': 'Remove muted member',
+  '修改群聊名称': 'Edit group name',
+  '修改群聊名称后，将在群内通知其他成员': 'After modifying the group chat name, other members will be notified in the group',
+  '仅限中文、字母、数字和下划线，2-20个字': 'Chinese, letters, numbers and underscores only, 2-20 words',
+  '请先注册 TUIGroup 模块': 'Please register the TUIGroup module first',
+  '该用户不存在': 'The user does not exist',
+  '该用户不在群组内': 'The user is not in the group',
+  '添加群聊': 'Add a group chat',
+  '该群组不存在': 'The group does not exist',
+  '创建群聊，请注册 TUIGroup 模块': 'To create a group chat, please register the TUIGroup module',
+  '创建成功': 'Creation successful',
+  '发起多人会话（群聊）': 'New group chat',
+  '选填': 'Optional',
+  '取消': 'Cancel',
+  '创建': 'Create',
+  '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见':
+    'Similar to a WeChat group. Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.',
+  '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见':
+    'Similar to a QQ group. After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details. ',
+  '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见':
+    'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.',
+  '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见':
+    'After creation, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details. ',
+  '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见':
+    'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details. ',
+  '产品文档': 'product documentation',
+  '设置群名称': 'Group name',
+  '请输入群名称': 'Enter the group name',
+  '设置群ID': 'Group ID',
+  '请输入群ID': 'Enter the group ID',
+  '选择群类型': 'Group type',
+  '陌生人社交群（Public）': 'Stranger social group (Public)',
+  '临时会议群（Meeting）': 'Temporary meeting group (Meeting)',
+  '好友工作群（Work）': 'Friends work group (Work)',
+  '直播群（AVChatroom）': 'Live Streaming Group (AVChatroom)',
+  '社群（Community）': 'Community（Community）',
+  '群组创建成功': 'Create group success',
+  '群组解散成功': 'Dismiss group success',
+  '禁言设置成功': 'Mute all success',
+  '取消禁言成功': 'Remove mute success',
+  '群名称不能为空': 'Group name cannot be empty',
+  '群名称修改成功': 'Group name modified success',
+  '群公告字数超出限制，最大长度为150': 'The number of characters in the group announcement exceeds the limit, the maximum length is 150'
 };
 
 export default TUIGroup;
diff --git a/src/TUIKit/locales/en/TUISearch.ts b/src/TUIKit/locales/en/TUISearch.ts
index ee8a93a..473af5a 100644
--- a/src/TUIKit/locales/en/TUISearch.ts
+++ b/src/TUIKit/locales/en/TUISearch.ts
@@ -1,41 +1,41 @@
 const TUISearch = {
-  搜索: "Search",
-  全部: "All",
-  联系人: "Contacts",
-  群聊: "Groups",
-  聊天记录: "Chat History",
-  文本: "Text",
-  文件: "File",
-  其他: "Other",
-  "图片/视频": "Image/Video",
-  选择时间: "Select time",
-  今天: "Today",
-  近三天: "Nearly three days",
-  近七天: "Nearly seven days",
-  查看更多: "View more ",
-  条相关: " related ",
-  条与: " related to ",
-  相关的: "keywords",
-  进入聊天: "enter",
-  定位到聊天位置: "Navigate to the chat position",
-  搜索会话内容: "Search in conversation",
-  查看更多历史记录: "View more history message",
-  暂无搜索结果: "No Results",
-  结果: "results",
-  取消: "Cancel",
-  "[文本]": "[Text Message]",
-  "[图片]": "[Image Message]",
-  "[语音]": "[Audio Message]",
-  "[视频]": "[Video Message]",
-  "[文件]": "[File Message]",
-  "[自定义消息]": "[Custom Message]",
-  "[系统消息]": "[System Message]",
-  "[合并消息]": "[Merged Message]",
-  "[位置消息]": "[Position Message]",
-  "消息云端搜索失败：": "Message cloud search failed: ",
-  "查找联系人失败：": "Failed to find contact: ",
-  "查找群聊失败：": "Failed to find group: ",
-  "进入会话失败": "Failed to enter conversation",
+  搜索: 'Search',
+  全部: 'All',
+  联系人: 'Contacts',
+  群聊: 'Groups',
+  聊天记录: 'Chat History',
+  文本: 'Text',
+  文件: 'File',
+  其他: 'Other',
+  '图片/视频': 'Image/Video',
+  选择时间: 'Select time',
+  今天: 'Today',
+  近三天: 'Nearly three days',
+  近七天: 'Nearly seven days',
+  查看更多: 'View more ',
+  条相关: ' related ',
+  条与: ' related to ',
+  相关的: 'keywords',
+  进入聊天: 'enter',
+  定位到聊天位置: 'Navigate to the chat position',
+  搜索会话内容: 'Search in conversation',
+  查看更多历史记录: 'View more history message',
+  暂无搜索结果: 'No Results',
+  结果: 'results',
+  取消: 'Cancel',
+  '[文本]': '[Text Message]',
+  '[图片]': '[Image Message]',
+  '[语音]': '[Audio Message]',
+  '[视频]': '[Video Message]',
+  '[文件]': '[File Message]',
+  '[自定义消息]': '[Custom Message]',
+  '[系统消息]': '[System Message]',
+  '[合并消息]': '[Merged Message]',
+  '[位置消息]': '[Position Message]',
+  '消息云端搜索失败：': 'Message cloud search failed: ',
+  '查找联系人失败：': 'Failed to find contact: ',
+  '查找群聊失败：': 'Failed to find group: ',
+  '进入会话失败': 'Failed to enter conversation'
 };
 
 export default TUISearch;
diff --git a/src/TUIKit/locales/en/component.ts b/src/TUIKit/locales/en/component.ts
index 3c30499..642f14e 100644
--- a/src/TUIKit/locales/en/component.ts
+++ b/src/TUIKit/locales/en/component.ts
@@ -1,21 +1,21 @@
 const component = {
-  "取消": "Cancel",
-  "完成": "Done",
-  "已选中": "Selected",
-  "人": "",
-  "保存": "Save",
-  "请输入userID": "Enter a userID",
-  "请输入groupID": "Enter a groupID",
-  "确定": "submit",
-  "全选": "All",
-  "已在群聊中": "exists",
-  "查看更多": "More",
-  "图片 url 不存在": "Image url does not exist",
-  "已取消": "Cancelled",
-  "获取权限失败": "Failed to obtain permission",
-  "已保存至相册": "Saved to album",
-  "图片下载失败": "Image download failed",
-  "暂不支持下载此类型图片": "Downloading this type of pictures is not supported yet",
-}
+  '取消': 'Cancel',
+  '完成': 'Done',
+  '已选中': 'Selected',
+  '人': '',
+  '保存': 'Save',
+  '请输入userID': 'Enter a userID',
+  '请输入groupID': 'Enter a groupID',
+  '确定': 'submit',
+  '全选': 'All',
+  '已在群聊中': 'exists',
+  '查看更多': 'More',
+  '图片 url 不存在': 'Image url does not exist',
+  '已取消': 'Cancelled',
+  '获取权限失败': 'Failed to obtain permission',
+  '已保存至相册': 'Saved to album',
+  '图片下载失败': 'Image download failed',
+  '暂不支持下载此类型图片': 'Downloading this type of pictures is not supported yet'
+};
 
 export default component;
diff --git a/src/TUIKit/locales/en/evaluate.ts b/src/TUIKit/locales/en/evaluate.ts
index 116024e..b3a8ebd 100644
--- a/src/TUIKit/locales/en/evaluate.ts
+++ b/src/TUIKit/locales/en/evaluate.ts
@@ -1,11 +1,11 @@
 const Evaluate = {
-  "请对本次服务进行评价": "Please rate this service",
-  "提交评价": "Feedback",
-  "服务评价工具": "Service rate tool",
-  "使用": "Build with",
-  "自定义消息": "Custom message",
-  "搭建": "",
-  "星": "Star"
-}
+  '请对本次服务进行评价': 'Please rate this service',
+  '提交评价': 'Feedback',
+  '服务评价工具': 'Service rate tool',
+  '使用': 'Build with',
+  '自定义消息': 'Custom message',
+  '搭建': '',
+  '星': 'Star'
+};
 
 export default Evaluate;
diff --git a/src/TUIKit/locales/en/index.ts b/src/TUIKit/locales/en/index.ts
index 880cf17..8655991 100644
--- a/src/TUIKit/locales/en/index.ts
+++ b/src/TUIKit/locales/en/index.ts
@@ -34,8 +34,8 @@ const messages = {
     Evaluate,
     Words,
     TUISearch,
-    Emoji,
-  },
+    Emoji
+  }
 };
 
 export default messages;
diff --git a/src/TUIKit/locales/en/message.ts b/src/TUIKit/locales/en/message.ts
index 7bbb3c9..4db6fe8 100644
--- a/src/TUIKit/locales/en/message.ts
+++ b/src/TUIKit/locales/en/message.ts
@@ -1,62 +1,62 @@
 const message = {
-  "tip": {
-    "群成员": "group members",
-    "加入群组": "joined the group",
-    "退出群组": "left the group",
-    "被": "by",
-    "踢出群组": "was kicked out of the group",
-    "成为管理员": "was set as an admin",
-    "被撤销管理员": "was revoked",
-    "被禁言": " was muted",
-    "被取消禁言": "cancel the prohibition",
-    "群提示消息": "group prompt message",
-    "管理员": "The admin",
-    "开启全员禁言": "enabled Mute All",
-    "取消全员禁言": "disabled Mute All",
-    "成为新的群主": "became the new group owner",
-    "修改群名为": "changed the group name to",
-    "发布新公告": "posted a new notice",
-    "把群公告修改为": "changed the group notice to",
-    "申请加入群组": "requested to join the group",
-    "成功加入群组": "Successfully joined the group",
-    "被拒绝": "The request to join the group was refused",
-    "你被管理员": "You",
-    "群": "group",
-    "解散": "disbanded",
-    "创建群": "created the group",
-    "邀请你加群": "invite you to join the group",
-    "你退出群组" : "You left the group",
-    "你被": "You were",
-    "设置为群": "set as group",
-    "的管理员": "as an admin",
-    "撤销群": "revoked",
-    "的管理员身份": "admin role of the group",
-    "同意加群": "agreed to join the group",
-    "拒接加群": "refused to join the group",
-    "自定义群系统通知": "Custom group system notification"
+  'tip': {
+    '群成员': 'group members',
+    '加入群组': 'joined the group',
+    '退出群组': 'left the group',
+    '被': 'by',
+    '踢出群组': 'was kicked out of the group',
+    '成为管理员': 'was set as an admin',
+    '被撤销管理员': 'was revoked',
+    '被禁言': ' was muted',
+    '被取消禁言': 'cancel the prohibition',
+    '群提示消息': 'group prompt message',
+    '管理员': 'The admin',
+    '开启全员禁言': 'enabled Mute All',
+    '取消全员禁言': 'disabled Mute All',
+    '成为新的群主': 'became the new group owner',
+    '修改群名为': 'changed the group name to',
+    '发布新公告': 'posted a new notice',
+    '把群公告修改为': 'changed the group notice to',
+    '申请加入群组': 'requested to join the group',
+    '成功加入群组': 'Successfully joined the group',
+    '被拒绝': 'The request to join the group was refused',
+    '你被管理员': 'You',
+    '群': 'group',
+    '解散': 'disbanded',
+    '创建群': 'created the group',
+    '邀请你加群': 'invite you to join the group',
+    '你退出群组': 'You left the group',
+    '你被': 'You were',
+    '设置为群': 'set as group',
+    '的管理员': 'as an admin',
+    '撤销群': 'revoked',
+    '的管理员身份': 'admin role of the group',
+    '同意加群': 'agreed to join the group',
+    '拒接加群': 'refused to join the group',
+    '自定义群系统通知': 'Custom group system notification'
   },
-  "custom": {
-    "自定义消息": "Custom message",
-    "通话时长": "Call duration",
-    "通话结束": "Call End",
-    "切换语音通话": "Switch voice call",
-    "切换视频通话": "Switch video call",
-    "发起通话": "Start a call",
-    "取消通话": "Cancel",
-    "已接听": "Answered",
-    "拒绝通话": "Decline",
-    "无应答": "No answer",
-    "已取消": "Canceled",
-    "对方已取消": "Call canceled by caller",
-    "已拒绝": "Declined",
-    "对方已拒绝": "Call declined by user",
-    "对方忙线中": "Line busy",
-    "忙线未接听": "	Line busy. Call not received.",
-    "对方无应答": "Call wasn't answered",
-    "超时无应答": "Call not answered",
-    "对本次服务评价": "Rate this service",
-    "查看详情>>": "View details >>"
+  'custom': {
+    '自定义消息': 'Custom message',
+    '通话时长': 'Call duration',
+    '通话结束': 'Call End',
+    '切换语音通话': 'Switch voice call',
+    '切换视频通话': 'Switch video call',
+    '发起通话': 'Start a call',
+    '取消通话': 'Cancel',
+    '已接听': 'Answered',
+    '拒绝通话': 'Decline',
+    '无应答': 'No answer',
+    '已取消': 'Canceled',
+    '对方已取消': 'Call canceled by caller',
+    '已拒绝': 'Declined',
+    '对方已拒绝': 'Call declined by user',
+    '对方忙线中': 'Line busy',
+    '忙线未接听': '	Line busy. Call not received.',
+    '对方无应答': "Call wasn't answered",
+    '超时无应答': 'Call not answered',
+    '对本次服务评价': 'Rate this service',
+    '查看详情>>': 'View details >>'
   }
-}
+};
 
 export default message;
diff --git a/src/TUIKit/locales/en/time.ts b/src/TUIKit/locales/en/time.ts
index 7a3f404..2dc874e 100644
--- a/src/TUIKit/locales/en/time.ts
+++ b/src/TUIKit/locales/en/time.ts
@@ -1,37 +1,37 @@
 const time = {
-  "周": "week(s) ",
-  "天": "day(s)",
-  "小时": "hour(s) ",
-  "分钟": "minute(s)",
-  "刚刚": "Just now",
-  "前": " ago",
-  "昨天": "Yesterday",
-  "星期一": "Monday",
-  "星期二": "Tuesday",
-  "星期三": "Wednesday",
-  "星期四": "Thursday",
-  "星期五": "Friday",
-  "星期六": "Saturday",
-  "星期日": "Sunday",
-  "一月": "January",
-  "二月": "February",
-  "三月": "March",
-  "四月": "April",
-  "五月": "May",
-  "六月": "June",
-  "七月": "July",
-  "八月": "August",
-  "九月": "September",
-  "十月": "October",
-  "十一月": "November",
-  "十二月": "December",
-  "一": "Mon",
-  "二": "Tues",
-  "三": "Wed",
-  "四": "Thur",
-  "五": "Fri",
-  "六": "Sat",
-  "日": "Sun",
-}
+  '周': 'week(s) ',
+  '天': 'day(s)',
+  '小时': 'hour(s) ',
+  '分钟': 'minute(s)',
+  '刚刚': 'Just now',
+  '前': ' ago',
+  '昨天': 'Yesterday',
+  '星期一': 'Monday',
+  '星期二': 'Tuesday',
+  '星期三': 'Wednesday',
+  '星期四': 'Thursday',
+  '星期五': 'Friday',
+  '星期六': 'Saturday',
+  '星期日': 'Sunday',
+  '一月': 'January',
+  '二月': 'February',
+  '三月': 'March',
+  '四月': 'April',
+  '五月': 'May',
+  '六月': 'June',
+  '七月': 'July',
+  '八月': 'August',
+  '九月': 'September',
+  '十月': 'October',
+  '十一月': 'November',
+  '十二月': 'December',
+  '一': 'Mon',
+  '二': 'Tues',
+  '三': 'Wed',
+  '四': 'Thur',
+  '五': 'Fri',
+  '六': 'Sat',
+  '日': 'Sun'
+};
 
 export default time;
diff --git a/src/TUIKit/locales/en/words.ts b/src/TUIKit/locales/en/words.ts
index 01de3f6..ebf7a3b 100644
--- a/src/TUIKit/locales/en/words.ts
+++ b/src/TUIKit/locales/en/words.ts
@@ -1,19 +1,19 @@
 const Words = {
-  "请对本次服务进行评价": "Please rate this service",
-  "提交评价": "Feedback",
-  "常用语-快捷回复工具": "Common Expressions - Quick Reply Tool",
-  "使用": "Build with",
-  "自定义消息": "Custom message",
-  "搭建": "",
-  "在吗？在吗？在吗？重要的话说三遍。": "Are you there? ",
-  "好久没聊天了，快来和我说说话～": "It’s been a long time. How about you?",
-  "好的，就这么说定了。": "Okay. It's a deal.",
-  "感恩的心，感谢有你。": "So grateful! ",
-  "糟糕！是心动的感觉！": "Oh, no. Flipped.",
-  "心疼地抱抱自己，我太难了！": "Give myself a warm hug. ",
-  "没关系，别在意，事情过去就过去了。": "Take it easy.",
-  "早上好，今天也是让人期待的一天呢！": "Good morning. Have a wonderful day.",
-  "熬夜有什么用，又没人陪你聊天，早点休息吧。": "It's better to go to bed early."
-}
+  '请对本次服务进行评价': 'Please rate this service',
+  '提交评价': 'Feedback',
+  '常用语-快捷回复工具': 'Common Expressions - Quick Reply Tool',
+  '使用': 'Build with',
+  '自定义消息': 'Custom message',
+  '搭建': '',
+  '在吗？在吗？在吗？重要的话说三遍。': 'Are you there? ',
+  '好久没聊天了，快来和我说说话～': 'It’s been a long time. How about you?',
+  '好的，就这么说定了。': "Okay. It's a deal.",
+  '感恩的心，感谢有你。': 'So grateful! ',
+  '糟糕！是心动的感觉！': 'Oh, no. Flipped.',
+  '心疼地抱抱自己，我太难了！': 'Give myself a warm hug. ',
+  '没关系，别在意，事情过去就过去了。': 'Take it easy.',
+  '早上好，今天也是让人期待的一天呢！': 'Good morning. Have a wonderful day.',
+  '熬夜有什么用，又没人陪你聊天，早点休息吧。': "It's better to go to bed early."
+};
 
 export default Words;
diff --git a/src/TUIKit/locales/index.ts b/src/TUIKit/locales/index.ts
index acc0e70..aab33bc 100644
--- a/src/TUIKit/locales/index.ts
+++ b/src/TUIKit/locales/index.ts
@@ -1,4 +1,3 @@
-
 import en from './en';
 import zh_cn from './zh_cn';
 import zh_tw from './zh_tw';
@@ -10,7 +9,7 @@ export interface ILanguageResources {
 const messages: Record<string, ILanguageResources> = {
   ...en,
   ...zh_cn,
-  ...zh_tw,
+  ...zh_tw
 };
 
 export default messages;
diff --git a/src/TUIKit/locales/zh_cn/TUIChat.ts b/src/TUIKit/locales/zh_cn/TUIChat.ts
index 2811096..5f6bfba 100644
--- a/src/TUIKit/locales/zh_cn/TUIChat.ts
+++ b/src/TUIKit/locales/zh_cn/TUIChat.ts
@@ -1,5 +1,6 @@
 const TUIChat = {
-  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。': '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。',
+  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。':
+    '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。',
   '按Enter发送，Ctrl+Enter换行': '按Enter发送，Ctrl+Enter换行',
   '表情': '[表情]',
   '查看更多': '查看更多',
@@ -150,7 +151,7 @@ const TUIChat = {
   '您已被管理员移出群聊': '您已被管理员移出群聊',
   '该群聊已被解散': '该群聊已被解散',
   '您已退出该群聊': '您已退出该群聊',
-  '您已被禁止聊天': '您已被禁止聊天',
+  '您已被禁止聊天': '您已被禁止聊天'
 };
 
 export default TUIChat;
diff --git a/src/TUIKit/locales/zh_cn/TUIContact.ts b/src/TUIKit/locales/zh_cn/TUIContact.ts
index f0642e0..7d463ff 100644
--- a/src/TUIKit/locales/zh_cn/TUIContact.ts
+++ b/src/TUIKit/locales/zh_cn/TUIContact.ts
@@ -1,68 +1,68 @@
-import translate from "./translate"
+import translate from './translate';
 
 const TUIContact = {
-  "群聊通知": "群聊通知",
-  "系统通知": "系统通知",
-  "我的群聊": "我的群聊",
-  "输入ID": "请输入用户/群聊 ID，回车搜索",
-  "群名称": "群名称",
-  "群ID": "群ID",
-  "加入群聊": "加入群聊",
-  "解散群聊": "解散群聊",
-  "退出群聊": "退出群聊",
-  "进入群聊": "进入群聊",
-  "群类型": "群类型",
-  "请填写验证信息": "请填写验证信息",
-  "申请加入": "申请加入",
-  "已申请":"已申请",
-  "接受": "接受",
-  "拒绝": "拒绝",
-  "已处理": "已处理",
-  "添加群聊": "添加群聊",
-  "已加入": "已加入",
-  "该群组不存在": "该群组不存在",
-  "加群": "加群",
-  "我的好友": "我的好友",
-  "发送消息": "发送消息",
-  "个性签名": "个性签名",
-  "等待管理员同意": "申请成功，等待管理员同意入群申请",
-  "加群成功": "加群成功",
-  "您已是群成员": "您已是群成员",
-  "新的联系人": "新的联系人",
-  "黑名单": "黑名单",
-  "无搜索结果": "无搜索结果",
-  "客服号": "客服号",
-  "ID": "ID",
-  "联系人": "联系人",
-  "群聊": "群聊",
-  "添加好友/群聊": "添加好友/群聊",
-  "备注名": "备注名",
-  "加入黑名单": "加入黑名单",
-  "删除好友": "删除好友",
-  "等待验证": "等待验证",
-  "验证信息": "验证信息",
-  "发送申请": "发送申请",
-  "加入直播群": "加入直播群",
-  "同意": "同意",
-  "删除好友成功": "删除好友成功",
-  "删除好友失败": "删除好友失败",
-  "申请已发送": "申请已发送",
-  "申请发送失败": "申请发送失败",
-  "进入会话失败": "进入会话失败",
-  "添加好友成功": "添加好友成功",
-  "同意好友申请失败": "同意好友申请失败",
-  "拒绝成功": "拒绝成功",
-  "拒绝好友申请失败": "拒绝好友申请失败",
-  "解散群聊成功": "解散群聊成功",
-  "解散群聊失败": "解散群聊失败",
-  "退出群组成功": "退出群组成功",
-  "退出群组失败": "退出群组失败",
-  "申请入群失败": "申请入群失败",
-  "加入黑名单失败": "加入黑名单失败",
-  "移除黑名单失败": "移除黑名单失败",
-  "修改备注失败: 备注长度不得超过 96 字节": "修改备注失败: 备注长度不得超过 96 字节",
-  "修改备注成功": "修改备注成功",
-  "修改备注失败": "修改备注失败",
-}
+  '群聊通知': '群聊通知',
+  '系统通知': '系统通知',
+  '我的群聊': '我的群聊',
+  '输入ID': '请输入用户/群聊 ID，回车搜索',
+  '群名称': '群名称',
+  '群ID': '群ID',
+  '加入群聊': '加入群聊',
+  '解散群聊': '解散群聊',
+  '退出群聊': '退出群聊',
+  '进入群聊': '进入群聊',
+  '群类型': '群类型',
+  '请填写验证信息': '请填写验证信息',
+  '申请加入': '申请加入',
+  '已申请': '已申请',
+  '接受': '接受',
+  '拒绝': '拒绝',
+  '已处理': '已处理',
+  '添加群聊': '添加群聊',
+  '已加入': '已加入',
+  '该群组不存在': '该群组不存在',
+  '加群': '加群',
+  '我的好友': '我的好友',
+  '发送消息': '发送消息',
+  '个性签名': '个性签名',
+  '等待管理员同意': '申请成功，等待管理员同意入群申请',
+  '加群成功': '加群成功',
+  '您已是群成员': '您已是群成员',
+  '新的联系人': '新的联系人',
+  '黑名单': '黑名单',
+  '无搜索结果': '无搜索结果',
+  '客服号': '客服号',
+  'ID': 'ID',
+  '联系人': '联系人',
+  '群聊': '群聊',
+  '添加好友/群聊': '添加好友/群聊',
+  '备注名': '备注名',
+  '加入黑名单': '加入黑名单',
+  '删除好友': '删除好友',
+  '等待验证': '等待验证',
+  '验证信息': '验证信息',
+  '发送申请': '发送申请',
+  '加入直播群': '加入直播群',
+  '同意': '同意',
+  '删除好友成功': '删除好友成功',
+  '删除好友失败': '删除好友失败',
+  '申请已发送': '申请已发送',
+  '申请发送失败': '申请发送失败',
+  '进入会话失败': '进入会话失败',
+  '添加好友成功': '添加好友成功',
+  '同意好友申请失败': '同意好友申请失败',
+  '拒绝成功': '拒绝成功',
+  '拒绝好友申请失败': '拒绝好友申请失败',
+  '解散群聊成功': '解散群聊成功',
+  '解散群聊失败': '解散群聊失败',
+  '退出群组成功': '退出群组成功',
+  '退出群组失败': '退出群组失败',
+  '申请入群失败': '申请入群失败',
+  '加入黑名单失败': '加入黑名单失败',
+  '移除黑名单失败': '移除黑名单失败',
+  '修改备注失败: 备注长度不得超过 96 字节': '修改备注失败: 备注长度不得超过 96 字节',
+  '修改备注成功': '修改备注成功',
+  '修改备注失败': '修改备注失败'
+};
 
 export default TUIContact;
diff --git a/src/TUIKit/locales/zh_cn/TUIConversation.ts b/src/TUIKit/locales/zh_cn/TUIConversation.ts
index ef0a7aa..3d28027 100644
--- a/src/TUIKit/locales/zh_cn/TUIConversation.ts
+++ b/src/TUIKit/locales/zh_cn/TUIConversation.ts
@@ -1,24 +1,24 @@
 const TUIConversation = {
-  "发起会话": "发起会话",
-  "发起单聊": "发起单聊",
-  "发起群聊": "发起群聊",
-  "请输入userID": "请输入userID",
-  "删除会话": "删除会话",
-  "删除后，将清空该聊天的消息记录": "删除后，将清空该聊天的消息记录",
-  "删除后，将清空该群聊的消息记录": "删除后，将清空该群聊的消息记录",
-  "置顶会话": "置顶会话",
-  "取消置顶": "取消置顶",
-  "消息免打扰": "消息免打扰",
-  "取消免打扰": "取消免打扰",
-  "系统通知": "系统通知",
-  "有人@我": "有人@我",
-  "@所有人": "@所有人",
-  "条": "条",
-  "我": "我",
-  "网络异常，请您检查网络设置": "网络异常，请您检查网络设置",
-  "您已被群管理员移出群聊": "您已被群管理员移出群聊",
-  "该群聊已被解散": "该群聊已被解散",
-  "您已退出该群聊": "您已退出该群聊",
-}
+  '发起会话': '发起会话',
+  '发起单聊': '发起单聊',
+  '发起群聊': '发起群聊',
+  '请输入userID': '请输入userID',
+  '删除会话': '删除会话',
+  '删除后，将清空该聊天的消息记录': '删除后，将清空该聊天的消息记录',
+  '删除后，将清空该群聊的消息记录': '删除后，将清空该群聊的消息记录',
+  '置顶会话': '置顶会话',
+  '取消置顶': '取消置顶',
+  '消息免打扰': '消息免打扰',
+  '取消免打扰': '取消免打扰',
+  '系统通知': '系统通知',
+  '有人@我': '有人@我',
+  '@所有人': '@所有人',
+  '条': '条',
+  '我': '我',
+  '网络异常，请您检查网络设置': '网络异常，请您检查网络设置',
+  '您已被群管理员移出群聊': '您已被群管理员移出群聊',
+  '该群聊已被解散': '该群聊已被解散',
+  '您已退出该群聊': '您已退出该群聊'
+};
 
 export default TUIConversation;
diff --git a/src/TUIKit/locales/zh_cn/TUIGroup.ts b/src/TUIKit/locales/zh_cn/TUIGroup.ts
index f6cabd0..d9fc6bb 100644
--- a/src/TUIKit/locales/zh_cn/TUIGroup.ts
+++ b/src/TUIKit/locales/zh_cn/TUIGroup.ts
@@ -1,87 +1,92 @@
 const TUIGroup = {
-  "输入groupID搜索": "输入groupID搜索",
-  "群名称": "群名称",
-  "群ID": "群ID",
-  "加入群聊": "加入群聊",
-  "解散群聊": "解散群聊",
-  "退出群聊": "退出群聊",
-  "群类型": "群类型",
-  "请填写验证信息": "请填写验证信息",
-  "申请加入": "申请加入",
-  "已申请": "已申请",
-  "群公告": "群公告",
-  "群成员": "群成员",
-  "群管理": "群管理",
-  "好友工作群": "好友工作群",
-  "陌生人社交群": "陌生人社交群",
-  "临时会议群": "临时会议群",
-  "直播群": "直播群",
-  "社群": "社群",
-  "自由加入": "自由加入",
-  "需要验证": "需要验证",
-  "禁止加群": "禁止加群",
-  "人": "人",
-  "群头像": "群头像",
-  "加群方式": "加群方式",
-  "转让群组": "转让群组",
-  "退出群组": "退出群组",
-  "群管理员": "群管理员",
-  "全员禁言": "全员禁言",
-  "全员禁言开启后，只允许群主和管理员发言。": "全员禁言开启后，只允许群主和管理员发言。",
-  "单独禁言人员": "单独禁言人员",
-  "删除成员": "删除成员",
-  "确定从群聊中删除该成员？": "确定从群聊中删除该成员？",
-  "确定从群聊中删除所选成员？": "确定从群聊中删除所选成员？",
-  "暂无公告": "暂无公告",
-  "发布": "发布",
-  "编辑": "编辑",
-  "查看更多": "查看更多",
-  "管理员": "管理员",
-  "群主": "群主",
-  "我": "我",
-  "确认": "确认",
-  "添加成员": "添加成员",
-  "新增管理员": "新增管理员",
-  "移除管理员": "移除管理员",
-  "新增禁言用户": "新增禁言用户",
-  "移除禁言用户": "移除禁言用户",
-  "修改群聊名称": "修改群聊名称",
-  "修改群聊名称后，将在群内通知其他成员": "修改群聊名称后，将在群内通知其他成员",
-  "仅限中文、字母、数字和下划线，2-20个字": "仅限中文、字母、数字和下划线，2-20个字",
-  "请先注册 TUIGroup 模块": "请先注册 TUIGroup 模块",
-  "该用户不存在": "该用户不存在",
-  "该用户不在群组内": "该用户不在群组内",
-  "添加群聊": "添加群聊",
-  "该群组不存在": "该群组不存在",
-  "创建群聊，请注册 TUIGroup 模块": "创建群聊，请注册 TUIGroup 模块",
-  "创建成功": "创建成功",
-  "发起多人会话（群聊）": "发起多人会话（群聊）",
-  "选填": "选填",
-  "取消": "取消",
-  "创建": "创建",
-  "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见": "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见",
-  "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见": "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见",
-  "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见": "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见",
-  "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见": "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见",
-  "创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见": "创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见",
-  "产品文档": "产品文档",
-  "设置群名称": "设置群名称",
-  "请输入群名称": "请输入群名称",
-  "设置群ID": "设置群ID",
-  "请输入群ID": "请输入群ID",
-  "选择群类型": "选择群类型",
-  "陌生人社交群（Public）": "陌生人社交群（Public）",
-  "临时会议群（Meeting）": "临时会议群（Meeting）",
-  "好友工作群（Work）": "好友工作群（Work）",
-  "直播群（AVChatroom）": "直播群（AVChatroom）",
-  "社群（Community）": "社群（Community）",
-  "群组创建成功": "群组创建成功",
-  "群组解散成功": "群组解散成功",
-  "禁言设置成功": "禁言设置成功",
-  "取消禁言成功": "取消禁言成功",
-  "群名称不能为空": "群名称不能为空",
-  "群名称修改成功": "群名称修改成功",
-  "群公告字数超出限制，最大长度为150": "群公告字数超出限制，最大长度为150",
+  '输入groupID搜索': '输入groupID搜索',
+  '群名称': '群名称',
+  '群ID': '群ID',
+  '加入群聊': '加入群聊',
+  '解散群聊': '解散群聊',
+  '退出群聊': '退出群聊',
+  '群类型': '群类型',
+  '请填写验证信息': '请填写验证信息',
+  '申请加入': '申请加入',
+  '已申请': '已申请',
+  '群公告': '群公告',
+  '群成员': '群成员',
+  '群管理': '群管理',
+  '好友工作群': '好友工作群',
+  '陌生人社交群': '陌生人社交群',
+  '临时会议群': '临时会议群',
+  '直播群': '直播群',
+  '社群': '社群',
+  '自由加入': '自由加入',
+  '需要验证': '需要验证',
+  '禁止加群': '禁止加群',
+  '人': '人',
+  '群头像': '群头像',
+  '加群方式': '加群方式',
+  '转让群组': '转让群组',
+  '退出群组': '退出群组',
+  '群管理员': '群管理员',
+  '全员禁言': '全员禁言',
+  '全员禁言开启后，只允许群主和管理员发言。': '全员禁言开启后，只允许群主和管理员发言。',
+  '单独禁言人员': '单独禁言人员',
+  '删除成员': '删除成员',
+  '确定从群聊中删除该成员？': '确定从群聊中删除该成员？',
+  '确定从群聊中删除所选成员？': '确定从群聊中删除所选成员？',
+  '暂无公告': '暂无公告',
+  '发布': '发布',
+  '编辑': '编辑',
+  '查看更多': '查看更多',
+  '管理员': '管理员',
+  '群主': '群主',
+  '我': '我',
+  '确认': '确认',
+  '添加成员': '添加成员',
+  '新增管理员': '新增管理员',
+  '移除管理员': '移除管理员',
+  '新增禁言用户': '新增禁言用户',
+  '移除禁言用户': '移除禁言用户',
+  '修改群聊名称': '修改群聊名称',
+  '修改群聊名称后，将在群内通知其他成员': '修改群聊名称后，将在群内通知其他成员',
+  '仅限中文、字母、数字和下划线，2-20个字': '仅限中文、字母、数字和下划线，2-20个字',
+  '请先注册 TUIGroup 模块': '请先注册 TUIGroup 模块',
+  '该用户不存在': '该用户不存在',
+  '该用户不在群组内': '该用户不在群组内',
+  '添加群聊': '添加群聊',
+  '该群组不存在': '该群组不存在',
+  '创建群聊，请注册 TUIGroup 模块': '创建群聊，请注册 TUIGroup 模块',
+  '创建成功': '创建成功',
+  '发起多人会话（群聊）': '发起多人会话（群聊）',
+  '选填': '选填',
+  '取消': '取消',
+  '创建': '创建',
+  '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见':
+    '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见',
+  '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见':
+    '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见',
+  '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见':
+    '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见',
+  '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见':
+    '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见',
+  '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见':
+    '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见',
+  '产品文档': '产品文档',
+  '设置群名称': '设置群名称',
+  '请输入群名称': '请输入群名称',
+  '设置群ID': '设置群ID',
+  '请输入群ID': '请输入群ID',
+  '选择群类型': '选择群类型',
+  '陌生人社交群（Public）': '陌生人社交群（Public）',
+  '临时会议群（Meeting）': '临时会议群（Meeting）',
+  '好友工作群（Work）': '好友工作群（Work）',
+  '直播群（AVChatroom）': '直播群（AVChatroom）',
+  '社群（Community）': '社群（Community）',
+  '群组创建成功': '群组创建成功',
+  '群组解散成功': '群组解散成功',
+  '禁言设置成功': '禁言设置成功',
+  '取消禁言成功': '取消禁言成功',
+  '群名称不能为空': '群名称不能为空',
+  '群名称修改成功': '群名称修改成功',
+  '群公告字数超出限制，最大长度为150': '群公告字数超出限制，最大长度为150'
 };
 
 export default TUIGroup;
diff --git a/src/TUIKit/locales/zh_cn/TUISearch.ts b/src/TUIKit/locales/zh_cn/TUISearch.ts
index 6d9c4d6..58abd49 100644
--- a/src/TUIKit/locales/zh_cn/TUISearch.ts
+++ b/src/TUIKit/locales/zh_cn/TUISearch.ts
@@ -1,41 +1,41 @@
 const TUISearch = {
-  搜索: "搜索",
-  全部: "全部",
-  联系人: "联系人",
-  群聊: "群聊",
-  聊天记录: "聊天记录",
-  文本: "文本",
-  文件: "文件",
-  "图片/视频": "图片/视频",
-  其他: "其他",
-  选择时间: "选择时间",
-  今天: "今天",
-  近三天: "近三天",
-  近七天: "近七天",
-  查看更多: "查看更多",
-  条相关: "条相关",
-  条与: "条与",
-  相关的: "相关的",
-  进入聊天: "进入聊天",
-  定位到聊天位置: "定位到聊天位置",
-  搜索会话内容: "搜索会话内容",
-  查看更多历史记录: "查看更多历史记录",
-  暂无搜索结果: "暂无搜索结果",
-  结果: "结果",
-  取消: "取消",
-  "[文本]": "[文本]",
-  "[图片]": "[图片]",
-  "[语音]": "[语音]",
-  "[视频]": "[视频]",
-  "[文件]": "[文件]",
-  "[自定义消息]": "[自定义消息]",
-  "[系统消息]": "[系统消息]",
-  "[合并消息]": "[合并消息]",
-  "[位置消息]": "[位置消息]",
-  "消息云端搜索失败：": "消息云端搜索失败：",
-  "查找联系人失败：": "查找联系人失败：",
-  "查找群聊失败：": "查找群聊失败：",
-  "进入会话失败": "进入会话失败",
+  搜索: '搜索',
+  全部: '全部',
+  联系人: '联系人',
+  群聊: '群聊',
+  聊天记录: '聊天记录',
+  文本: '文本',
+  文件: '文件',
+  '图片/视频': '图片/视频',
+  其他: '其他',
+  选择时间: '选择时间',
+  今天: '今天',
+  近三天: '近三天',
+  近七天: '近七天',
+  查看更多: '查看更多',
+  条相关: '条相关',
+  条与: '条与',
+  相关的: '相关的',
+  进入聊天: '进入聊天',
+  定位到聊天位置: '定位到聊天位置',
+  搜索会话内容: '搜索会话内容',
+  查看更多历史记录: '查看更多历史记录',
+  暂无搜索结果: '暂无搜索结果',
+  结果: '结果',
+  取消: '取消',
+  '[文本]': '[文本]',
+  '[图片]': '[图片]',
+  '[语音]': '[语音]',
+  '[视频]': '[视频]',
+  '[文件]': '[文件]',
+  '[自定义消息]': '[自定义消息]',
+  '[系统消息]': '[系统消息]',
+  '[合并消息]': '[合并消息]',
+  '[位置消息]': '[位置消息]',
+  '消息云端搜索失败：': '消息云端搜索失败：',
+  '查找联系人失败：': '查找联系人失败：',
+  '查找群聊失败：': '查找群聊失败：',
+  '进入会话失败': '进入会话失败'
 };
 
 export default TUISearch;
diff --git a/src/TUIKit/locales/zh_cn/component.ts b/src/TUIKit/locales/zh_cn/component.ts
index 39a0f4e..77bf1b0 100644
--- a/src/TUIKit/locales/zh_cn/component.ts
+++ b/src/TUIKit/locales/zh_cn/component.ts
@@ -1,21 +1,21 @@
 const components = {
-  "取消": "取消",
-  "完成": "完成",
-  "已选中": "已选中",
-  "人": "人",
-  "保存": "保存",
-  "请输入userID": "请输入userID",
-  "请输入groupID": "请输入groupID",
-  "确定": "确定",
-  "全选": "全选",
-  "已在群聊中": "已在群聊中",
-  "查看更多": "查看更多",
-  "图片 url 不存在": "图片 url 不存在",
-  "已取消": "已取消",
-  "获取权限失败": "获取权限失败",
-  "已保存至相册": "已保存至相册",
-  "图片下载失败": "图片下载失败",
-  "暂不支持下载此类型图片": "暂不支持下载此类型图片",
-}
+  '取消': '取消',
+  '完成': '完成',
+  '已选中': '已选中',
+  '人': '人',
+  '保存': '保存',
+  '请输入userID': '请输入userID',
+  '请输入groupID': '请输入groupID',
+  '确定': '确定',
+  '全选': '全选',
+  '已在群聊中': '已在群聊中',
+  '查看更多': '查看更多',
+  '图片 url 不存在': '图片 url 不存在',
+  '已取消': '已取消',
+  '获取权限失败': '获取权限失败',
+  '已保存至相册': '已保存至相册',
+  '图片下载失败': '图片下载失败',
+  '暂不支持下载此类型图片': '暂不支持下载此类型图片'
+};
 
 export default components;
diff --git a/src/TUIKit/locales/zh_cn/evaluate.ts b/src/TUIKit/locales/zh_cn/evaluate.ts
index 253112b..31cbe40 100644
--- a/src/TUIKit/locales/zh_cn/evaluate.ts
+++ b/src/TUIKit/locales/zh_cn/evaluate.ts
@@ -1,11 +1,11 @@
 const Evaluate = {
-  "请对本次服务进行评价": "请对本次服务进行评价",
-  "提交评价": "提交评价",
-  "服务评价工具": "服务评价工具",
-  "使用": "使用",
-  "自定义消息": "自定义消息",
-  "搭建": "搭建",
-  "星": "星"
-}
+  '请对本次服务进行评价': '请对本次服务进行评价',
+  '提交评价': '提交评价',
+  '服务评价工具': '服务评价工具',
+  '使用': '使用',
+  '自定义消息': '自定义消息',
+  '搭建': '搭建',
+  '星': '星'
+};
 
 export default Evaluate;
diff --git a/src/TUIKit/locales/zh_cn/index.ts b/src/TUIKit/locales/zh_cn/index.ts
index 714ae4a..52fae3d 100644
--- a/src/TUIKit/locales/zh_cn/index.ts
+++ b/src/TUIKit/locales/zh_cn/index.ts
@@ -34,8 +34,8 @@ const messages = {
     Evaluate,
     Words,
     TUISearch,
-    Emoji,
-  },
+    Emoji
+  }
 };
 
 export default messages;
diff --git a/src/TUIKit/locales/zh_cn/message.ts b/src/TUIKit/locales/zh_cn/message.ts
index 7ba190b..39c12c9 100644
--- a/src/TUIKit/locales/zh_cn/message.ts
+++ b/src/TUIKit/locales/zh_cn/message.ts
@@ -1,62 +1,62 @@
 const message = {
-  "tip": {
-    "群成员": "群成员",
-    "加入群组": "加入群组",
-    "退出群组": "退出群组",
-    "被": "被",
-    "踢出群组": "踢出群组",
-    "成为管理员": "成为管理员",
-    "被撤销管理员": "被撤销管理员",
-    "被禁言": "被禁言",
-    "被取消禁言": "被取消禁言",
-    "群提示消息": "群提示消息",
-    "管理员": "管理员",
-    "开启全员禁言": "开启全员禁言",
-    "取消全员禁言": "取消全员禁言",
-    "成为新的群主": "成为新的群主",
-    "修改群名为": "修改群名为",
-    "发布新公告": "发布新公告",
-    "把群公告修改为": "把群公告修改为",
-    "申请加入群组": "申请加入群组",
-    "成功加入群组": "成功加入群组",
-    "被拒绝": "被拒绝",
-    "你被管理员": "你被管理员",
-    "群": "群",
-    "解散": "解散",
-    "创建群": "创建群",
-    "邀请你加群": "邀请你加群",
-    "你退出群组" : "你退出群组",
-    "你被": "你被",
-    "设置为群": "设置为群",
-    "的管理员": "的管理员",
-    "撤销群": "撤销群",
-    "的管理员身份": "的管理员身份",
-    "同意加群": "同意加群",
-    "拒接加群": "拒接加群",
-    "自定义群系统通知": "自定义群系统通知"
+  'tip': {
+    '群成员': '群成员',
+    '加入群组': '加入群组',
+    '退出群组': '退出群组',
+    '被': '被',
+    '踢出群组': '踢出群组',
+    '成为管理员': '成为管理员',
+    '被撤销管理员': '被撤销管理员',
+    '被禁言': '被禁言',
+    '被取消禁言': '被取消禁言',
+    '群提示消息': '群提示消息',
+    '管理员': '管理员',
+    '开启全员禁言': '开启全员禁言',
+    '取消全员禁言': '取消全员禁言',
+    '成为新的群主': '成为新的群主',
+    '修改群名为': '修改群名为',
+    '发布新公告': '发布新公告',
+    '把群公告修改为': '把群公告修改为',
+    '申请加入群组': '申请加入群组',
+    '成功加入群组': '成功加入群组',
+    '被拒绝': '被拒绝',
+    '你被管理员': '你被管理员',
+    '群': '群',
+    '解散': '解散',
+    '创建群': '创建群',
+    '邀请你加群': '邀请你加群',
+    '你退出群组': '你退出群组',
+    '你被': '你被',
+    '设置为群': '设置为群',
+    '的管理员': '的管理员',
+    '撤销群': '撤销群',
+    '的管理员身份': '的管理员身份',
+    '同意加群': '同意加群',
+    '拒接加群': '拒接加群',
+    '自定义群系统通知': '自定义群系统通知'
   },
-  "custom": {
-    "自定义消息": "自定义消息",
-    "通话时长": "通话时长",
-    "通话结束": "通话结束",
-    "切换语音通话": "切换语音通话",
-    "切换视频通话": "切换视频通话",
-    "发起通话": "发起通话",
-    "取消通话": "取消通话",
-    "已接听": "已接听",
-    "拒绝通话": "拒绝通话",
-    "无应答": "无应答",
-    "对本次服务评价": "对本次服务评价",
-    "查看详情>>": "查看详情>>",
-    "已取消": "已取消",
-    "对方已取消": "对方已取消",
-    "已拒绝": "已拒绝",
-    "对方已拒绝": "对方已拒绝",
-    "对方忙线中": "对方忙线中",
-    "忙线未接听": "忙线未接听",
-    "对方无应答": "对方无应答",
-    "超时无应答": "超时无应答",
+  'custom': {
+    '自定义消息': '自定义消息',
+    '通话时长': '通话时长',
+    '通话结束': '通话结束',
+    '切换语音通话': '切换语音通话',
+    '切换视频通话': '切换视频通话',
+    '发起通话': '发起通话',
+    '取消通话': '取消通话',
+    '已接听': '已接听',
+    '拒绝通话': '拒绝通话',
+    '无应答': '无应答',
+    '对本次服务评价': '对本次服务评价',
+    '查看详情>>': '查看详情>>',
+    '已取消': '已取消',
+    '对方已取消': '对方已取消',
+    '已拒绝': '已拒绝',
+    '对方已拒绝': '对方已拒绝',
+    '对方忙线中': '对方忙线中',
+    '忙线未接听': '忙线未接听',
+    '对方无应答': '对方无应答',
+    '超时无应答': '超时无应答'
   }
-}
+};
 
 export default message;
diff --git a/src/TUIKit/locales/zh_cn/time.ts b/src/TUIKit/locales/zh_cn/time.ts
index 55b7efb..7b9746c 100644
--- a/src/TUIKit/locales/zh_cn/time.ts
+++ b/src/TUIKit/locales/zh_cn/time.ts
@@ -1,37 +1,37 @@
 const time = {
-  "周": "周",
-  "天": "天",
-  "小时": "小时",
-  "分钟": "分钟",
-  "刚刚": "刚刚",
-  "前": "前",
-  "昨天": "昨天",
-  "星期一": "星期一",
-  "星期二": "星期二",
-  "星期三": "星期三",
-  "星期四": "星期四",
-  "星期五": "星期五",
-  "星期六": "星期六",
-  "星期日": "星期日",
-  "一月": "一月",
-  "二月": "二月",
-  "三月": "三月",
-  "四月": "四月",
-  "五月": "五月",
-  "六月": "六月",
-  "七月": "七月",
-  "八月": "八月",
-  "九月": "九月",
-  "十月": "十月",
-  "十一月": "十一月",
-  "十二月": "十二月",
-  "一": "一",
-  "二": "二",
-  "三": "三",
-  "四": "四",
-  "五": "五",
-  "六": "六",
-  "日": "日",
-}
+  '周': '周',
+  '天': '天',
+  '小时': '小时',
+  '分钟': '分钟',
+  '刚刚': '刚刚',
+  '前': '前',
+  '昨天': '昨天',
+  '星期一': '星期一',
+  '星期二': '星期二',
+  '星期三': '星期三',
+  '星期四': '星期四',
+  '星期五': '星期五',
+  '星期六': '星期六',
+  '星期日': '星期日',
+  '一月': '一月',
+  '二月': '二月',
+  '三月': '三月',
+  '四月': '四月',
+  '五月': '五月',
+  '六月': '六月',
+  '七月': '七月',
+  '八月': '八月',
+  '九月': '九月',
+  '十月': '十月',
+  '十一月': '十一月',
+  '十二月': '十二月',
+  '一': '一',
+  '二': '二',
+  '三': '三',
+  '四': '四',
+  '五': '五',
+  '六': '六',
+  '日': '日'
+};
 
 export default time;
diff --git a/src/TUIKit/locales/zh_cn/translate.ts b/src/TUIKit/locales/zh_cn/translate.ts
index 16d35aa..3ace37b 100644
--- a/src/TUIKit/locales/zh_cn/translate.ts
+++ b/src/TUIKit/locales/zh_cn/translate.ts
@@ -1,164 +1,165 @@
 const translate = {
-  "TUIKit-TUIChat-01": "撤回消息",
-  "TUIKit-TUIChat-02": "删除消息",
-  "TUIKit-TUIChat-03": "重新发送",
-  "TUIKit-TUIChat-04": "转发",
-  "TUIKit-TUIChat-05": "打开",
-  "TUIKit-TUIChat-06": "已读",
-  "TUIKit-TUIChat-07": "未读",
-  "TUIKit-TUIChat-08": "您",
-  "TUIKit-TUIChat-09": "撤回了一条消息",
-  "TUIKit-TUIChat-10": "重新编辑",
-  "TUIKit-TUIChat-11": "我",
-  "TUIKit-TUIChat-12": "查看更多",
-  "TUIKit-TUIChat-13": "转发给",
-  "TUIKit-TUIChat-14": "请输入消息",
-  "TUIKit-TUIChat-15": "描述",
-  "TUIKit-TUIChat-16": "经度",
-  "TUIKit-TUIChat-17": "纬度",
-  "TUIKit-TUIChat-18": "管理员开启全员禁言",
-  "TUIKit-TUIChat-19": "您已被管理员禁言",
-  "TUIKit-TUIChat-20": "按Enter发送，Ctrl+Enter换行",
-  "TUIKit-TUIChat-mange-01": "群公告",
-  "TUIKit-TUIChat-mange-02": "群成员",
-  "TUIKit-TUIChat-mange-03": "群管理",
-  "TUIKit-TUIChat-mange-04": "好友工作群",
-  "TUIKit-TUIChat-mange-05": "陌生人社交群",
-  "TUIKit-TUIChat-mange-06": "临时会议群",
-  "TUIKit-TUIChat-mange-07": "直播群",
-  "TUIKit-TUIChat-mange-08": "自由加入",
-  "TUIKit-TUIChat-mange-09": "需要验证",
-  "TUIKit-TUIChat-mange-10": "禁止加群",
-  "TUIKit-TUIChat-mange-11": "人",
-  "TUIKit-TUIChat-mange-12": "群ID",
-  "TUIKit-TUIChat-mange-13": "群头像",
-  "TUIKit-TUIChat-mange-14": "群类型",
-  "TUIKit-TUIChat-mange-15": "加群方式",
-  "TUIKit-TUIChat-mange-16": "转让群组",
-  "TUIKit-TUIChat-mange-17": "解散群聊",
-  "TUIKit-TUIChat-mange-18": "退出群组",
-  "TUIKit-TUIChat-mange-19": "群管理员",
-  "TUIKit-TUIChat-mange-20": "全员禁言",
-  "TUIKit-TUIChat-mange-21": "全员禁言开启后，只允许群主和管理员发言。",
-  "TUIKit-TUIChat-mange-22": "单独禁言人员",
-  "TUIKit-TUIChat-mange-23": "删除成员",
-  "TUIKit-TUIChat-mange-24": "确定从群聊中删除该成员？",
-  "TUIKit-TUIChat-mange-25": "确定从群聊中删除所选成员？",
-  "TUIKit-TUIChat-mange-26": "暂无公告",
-  "TUIKit-TUIChat-mange-27": "发布",
-  "TUIKit-TUIChat-mange-28": "编辑",
-  "TUIKit-TUIChat-mange-29": "群名称",
-  "TUIKit-TUIChat-mange-30": "查看更多",
-  "TUIKit-TUIChat-mange-31": "管理员",
-  "TUIKit-TUIChat-mange-32": "群主",
-  "TUIKit-TUIChat-mange-33": "我",
-  "TUIKit-TUIChat-mange-34": "添加成员",
-  "TUIKit-TUIChat-mange-35": "新增管理员",
-  "TUIKit-TUIChat-mange-36": "移除管理员",
-  "TUIKit-TUIChat-mange-37": "新增禁言用户",
-  "TUIKit-TUIChat-mange-38": "移除禁言用户",
-  "TUIKit-TUIContact-01": "群聊通知",
-  "TUIKit-TUIContact-02": "系统通知",
-  "TUIKit-TUIContact-03": "我的群聊",
-  "TUIKit-TUIContact-04": "输入groupID搜索",
-  "TUIKit-TUIContact-05": "群名称",
-  "TUIKit-TUIContact-06": "群ID",
-  "TUIKit-TUIContact-07": "加入群聊",
-  "TUIKit-TUIContact-08": "解散群聊",
-  "TUIKit-TUIContact-09": "退出群聊",
-  "TUIKit-TUIContact-10": "群类型",
-  "TUIKit-TUIContact-11": "请填写验证信息",
-  "TUIKit-TUIContact-12": "申请加入",
-  "TUIKit-TUIContact-13":"已申请",
-  "TUIKit-TUIContact-14": "接受",
-  "TUIKit-TUIContact-15": "拒绝",
-  "TUIKit-TUIContact-16": "已处理",
-  "TUIKit-TUIConversation-01": "发起单人/多人会话",
-  "TUIKit-TUIConversation-02": "请输入userID",
-  "TUIKit-TUIConversation-03": "删除会话",
-  "TUIKit-TUIConversation-04": "系统通知",
-  "TUIKit-TUIConversation-05": "发起多人会话（群聊）",
-  "TUIKit-TUIConversation-06": "群头像",
-  "TUIKit-TUIConversation-07": "群名称",
-  "TUIKit-TUIConversation-08": "群ID",
-  "TUIKit-TUIConversation-09": "群类型",
-  "TUIKit-TUIConversation-10": "选填",
-  "TUIKit-TUIConversation-11": "取消",
-  "TUIKit-TUIConversation-12": "创建",
-  "TUIKit-TUIConversation-13": "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见产品文档",
-  "TUIKit-TUIConversation-14": "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见产品文档",
-  "TUIKit-TUIConversation-15": "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见产品文档",
-  "TUIKit-TUIConversation-16": "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见产品文档",
-  "TUIKit-TUIProfile-01": "资料设置",
-  "TUIKit-TUIProfile-02": "头像",
-  "TUIKit-TUIProfile-03": "昵称",
-  "TUIKit-TUIProfile-04": "账号",
-  "TUIKit-TUIProfile-05": "个性签名",
-  "TUIKit-TUIProfile-06": "性别",
-  "TUIKit-TUIProfile-07": "男",
-  "TUIKit-TUIProfile-08": "女",
-  "TUIKit-TUIProfile-09": "不显示",
-  "TUIKit-TUIProfile-10":"出生年月",
-  "TUIKit-TUIProfile-11": "取消",
-  "TUIKit-TUIProfile-12": "保存",
-  "TUIKit-time-01": "周",
-  "TUIKit-time-02": "天",
-  "TUIKit-time-03": "小时",
-  "TUIKit-time-04": "分钟",
-  "TUIKit-time-05": "刚刚",
-  "TUIKit-time-06": "前",
-  "TUIKit-message-tip-01": "群成员",
-  "TUIKit-message-tip-02": "加入群组",
-  "TUIKit-message-tip-03": "退出群组",
-  "TUIKit-message-tip-04": "被",
-  "TUIKit-message-tip-05": "踢出群组",
-  "TUIKit-message-tip-06": "成为管理员",
-  "TUIKit-message-tip-07": "被撤销管理员",
-  "TUIKit-message-tip-08": "被禁言",
-  "TUIKit-message-tip-09": "被取消禁言",
-  "TUIKit-message-tip-10": "群提示消息",
-  "TUIKit-message-tip-11": "管理员",
-  "TUIKit-message-tip-12": "开启全员禁言",
-  "TUIKit-message-tip-13": "取消全员禁言",
-  "TUIKit-message-tip-14": "成为新的群主",
-  "TUIKit-message-tip-15": "修改群名为",
-  "TUIKit-message-tip-16": "发布新公告",
-  "TUIKit-message-tip-17": "申请加入群组",
-  "TUIKit-message-tip-18": "成功加入群组",
-  "TUIKit-message-tip-19": "被拒绝",
-  "TUIKit-message-tip-20": "你被管理员",
-  "TUIKit-message-tip-21": "群",
-  "TUIKit-message-tip-22": "解散",
-  "TUIKit-message-tip-23": "创建群",
-  "TUIKit-message-tip-24": "邀请你加群",
-  "TUIKit-message-tip-25" : "你退出群组",
-  "TUIKit-message-tip-26": "你被",
-  "TUIKit-message-tip-27": "设置为群",
-  "TUIKit-message-tip-28": "的管理员",
-  "TUIKit-message-tip-29": "撤销群",
-  "TUIKit-message-tip-30": "的管理员身份",
-  "TUIKit-message-tip-31": "同意加群",
-  "TUIKit-message-tip-32": "拒接加群",
-  "TUIKit-message-tip-33": "自定义群系统通知",
-  "TUIKit-message-custom-01": "自定义消息",
-  "TUIKit-message-custom-02": "通话时长",
-  "TUIKit-message-custom-03": "结束群聊",
-  "TUIKit-message-custom-04": "切换语音通话",
-  "TUIKit-message-custom-05": "切换视频通话",
-  "TUIKit-message-custom-06": "发起通话",
-  "TUIKit-message-custom-07": "取消通话",
-  "TUIKit-message-custom-08": "已接听",
-  "TUIKit-message-custom-09": "拒绝通话",
-  "TUIKit-message-custom-10": "无应答",
-  "TUIKit-message-custom-11": "对本次服务评价",
-  "TUIKit-message-custom-12": "查看详情>>",
-  "TUIKit-component-01": "取消",
-  "TUIKit-component-02": "完成",
-  "TUIKit-component-03": "已选中",
-  "TUIKit-component-04": "人",
-  "TUIKit-component-05": "保存",
-  "TUIKit-component-06": "发送",
-  "TUIKit-component-07": "系统通知"
-}
+  'TUIKit-TUIChat-01': '撤回消息',
+  'TUIKit-TUIChat-02': '删除消息',
+  'TUIKit-TUIChat-03': '重新发送',
+  'TUIKit-TUIChat-04': '转发',
+  'TUIKit-TUIChat-05': '打开',
+  'TUIKit-TUIChat-06': '已读',
+  'TUIKit-TUIChat-07': '未读',
+  'TUIKit-TUIChat-08': '您',
+  'TUIKit-TUIChat-09': '撤回了一条消息',
+  'TUIKit-TUIChat-10': '重新编辑',
+  'TUIKit-TUIChat-11': '我',
+  'TUIKit-TUIChat-12': '查看更多',
+  'TUIKit-TUIChat-13': '转发给',
+  'TUIKit-TUIChat-14': '请输入消息',
+  'TUIKit-TUIChat-15': '描述',
+  'TUIKit-TUIChat-16': '经度',
+  'TUIKit-TUIChat-17': '纬度',
+  'TUIKit-TUIChat-18': '管理员开启全员禁言',
+  'TUIKit-TUIChat-19': '您已被管理员禁言',
+  'TUIKit-TUIChat-20': '按Enter发送，Ctrl+Enter换行',
+  'TUIKit-TUIChat-mange-01': '群公告',
+  'TUIKit-TUIChat-mange-02': '群成员',
+  'TUIKit-TUIChat-mange-03': '群管理',
+  'TUIKit-TUIChat-mange-04': '好友工作群',
+  'TUIKit-TUIChat-mange-05': '陌生人社交群',
+  'TUIKit-TUIChat-mange-06': '临时会议群',
+  'TUIKit-TUIChat-mange-07': '直播群',
+  'TUIKit-TUIChat-mange-08': '自由加入',
+  'TUIKit-TUIChat-mange-09': '需要验证',
+  'TUIKit-TUIChat-mange-10': '禁止加群',
+  'TUIKit-TUIChat-mange-11': '人',
+  'TUIKit-TUIChat-mange-12': '群ID',
+  'TUIKit-TUIChat-mange-13': '群头像',
+  'TUIKit-TUIChat-mange-14': '群类型',
+  'TUIKit-TUIChat-mange-15': '加群方式',
+  'TUIKit-TUIChat-mange-16': '转让群组',
+  'TUIKit-TUIChat-mange-17': '解散群聊',
+  'TUIKit-TUIChat-mange-18': '退出群组',
+  'TUIKit-TUIChat-mange-19': '群管理员',
+  'TUIKit-TUIChat-mange-20': '全员禁言',
+  'TUIKit-TUIChat-mange-21': '全员禁言开启后，只允许群主和管理员发言。',
+  'TUIKit-TUIChat-mange-22': '单独禁言人员',
+  'TUIKit-TUIChat-mange-23': '删除成员',
+  'TUIKit-TUIChat-mange-24': '确定从群聊中删除该成员？',
+  'TUIKit-TUIChat-mange-25': '确定从群聊中删除所选成员？',
+  'TUIKit-TUIChat-mange-26': '暂无公告',
+  'TUIKit-TUIChat-mange-27': '发布',
+  'TUIKit-TUIChat-mange-28': '编辑',
+  'TUIKit-TUIChat-mange-29': '群名称',
+  'TUIKit-TUIChat-mange-30': '查看更多',
+  'TUIKit-TUIChat-mange-31': '管理员',
+  'TUIKit-TUIChat-mange-32': '群主',
+  'TUIKit-TUIChat-mange-33': '我',
+  'TUIKit-TUIChat-mange-34': '添加成员',
+  'TUIKit-TUIChat-mange-35': '新增管理员',
+  'TUIKit-TUIChat-mange-36': '移除管理员',
+  'TUIKit-TUIChat-mange-37': '新增禁言用户',
+  'TUIKit-TUIChat-mange-38': '移除禁言用户',
+  'TUIKit-TUIContact-01': '群聊通知',
+  'TUIKit-TUIContact-02': '系统通知',
+  'TUIKit-TUIContact-03': '我的群聊',
+  'TUIKit-TUIContact-04': '输入groupID搜索',
+  'TUIKit-TUIContact-05': '群名称',
+  'TUIKit-TUIContact-06': '群ID',
+  'TUIKit-TUIContact-07': '加入群聊',
+  'TUIKit-TUIContact-08': '解散群聊',
+  'TUIKit-TUIContact-09': '退出群聊',
+  'TUIKit-TUIContact-10': '群类型',
+  'TUIKit-TUIContact-11': '请填写验证信息',
+  'TUIKit-TUIContact-12': '申请加入',
+  'TUIKit-TUIContact-13': '已申请',
+  'TUIKit-TUIContact-14': '接受',
+  'TUIKit-TUIContact-15': '拒绝',
+  'TUIKit-TUIContact-16': '已处理',
+  'TUIKit-TUIConversation-01': '发起单人/多人会话',
+  'TUIKit-TUIConversation-02': '请输入userID',
+  'TUIKit-TUIConversation-03': '删除会话',
+  'TUIKit-TUIConversation-04': '系统通知',
+  'TUIKit-TUIConversation-05': '发起多人会话（群聊）',
+  'TUIKit-TUIConversation-06': '群头像',
+  'TUIKit-TUIConversation-07': '群名称',
+  'TUIKit-TUIConversation-08': '群ID',
+  'TUIKit-TUIConversation-09': '群类型',
+  'TUIKit-TUIConversation-10': '选填',
+  'TUIKit-TUIConversation-11': '取消',
+  'TUIKit-TUIConversation-12': '创建',
+  'TUIKit-TUIConversation-13': '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见产品文档',
+  'TUIKit-TUIConversation-14': '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见产品文档',
+  'TUIKit-TUIConversation-15':
+    '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见产品文档',
+  'TUIKit-TUIConversation-16': '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见产品文档',
+  'TUIKit-TUIProfile-01': '资料设置',
+  'TUIKit-TUIProfile-02': '头像',
+  'TUIKit-TUIProfile-03': '昵称',
+  'TUIKit-TUIProfile-04': '账号',
+  'TUIKit-TUIProfile-05': '个性签名',
+  'TUIKit-TUIProfile-06': '性别',
+  'TUIKit-TUIProfile-07': '男',
+  'TUIKit-TUIProfile-08': '女',
+  'TUIKit-TUIProfile-09': '不显示',
+  'TUIKit-TUIProfile-10': '出生年月',
+  'TUIKit-TUIProfile-11': '取消',
+  'TUIKit-TUIProfile-12': '保存',
+  'TUIKit-time-01': '周',
+  'TUIKit-time-02': '天',
+  'TUIKit-time-03': '小时',
+  'TUIKit-time-04': '分钟',
+  'TUIKit-time-05': '刚刚',
+  'TUIKit-time-06': '前',
+  'TUIKit-message-tip-01': '群成员',
+  'TUIKit-message-tip-02': '加入群组',
+  'TUIKit-message-tip-03': '退出群组',
+  'TUIKit-message-tip-04': '被',
+  'TUIKit-message-tip-05': '踢出群组',
+  'TUIKit-message-tip-06': '成为管理员',
+  'TUIKit-message-tip-07': '被撤销管理员',
+  'TUIKit-message-tip-08': '被禁言',
+  'TUIKit-message-tip-09': '被取消禁言',
+  'TUIKit-message-tip-10': '群提示消息',
+  'TUIKit-message-tip-11': '管理员',
+  'TUIKit-message-tip-12': '开启全员禁言',
+  'TUIKit-message-tip-13': '取消全员禁言',
+  'TUIKit-message-tip-14': '成为新的群主',
+  'TUIKit-message-tip-15': '修改群名为',
+  'TUIKit-message-tip-16': '发布新公告',
+  'TUIKit-message-tip-17': '申请加入群组',
+  'TUIKit-message-tip-18': '成功加入群组',
+  'TUIKit-message-tip-19': '被拒绝',
+  'TUIKit-message-tip-20': '你被管理员',
+  'TUIKit-message-tip-21': '群',
+  'TUIKit-message-tip-22': '解散',
+  'TUIKit-message-tip-23': '创建群',
+  'TUIKit-message-tip-24': '邀请你加群',
+  'TUIKit-message-tip-25': '你退出群组',
+  'TUIKit-message-tip-26': '你被',
+  'TUIKit-message-tip-27': '设置为群',
+  'TUIKit-message-tip-28': '的管理员',
+  'TUIKit-message-tip-29': '撤销群',
+  'TUIKit-message-tip-30': '的管理员身份',
+  'TUIKit-message-tip-31': '同意加群',
+  'TUIKit-message-tip-32': '拒接加群',
+  'TUIKit-message-tip-33': '自定义群系统通知',
+  'TUIKit-message-custom-01': '自定义消息',
+  'TUIKit-message-custom-02': '通话时长',
+  'TUIKit-message-custom-03': '结束群聊',
+  'TUIKit-message-custom-04': '切换语音通话',
+  'TUIKit-message-custom-05': '切换视频通话',
+  'TUIKit-message-custom-06': '发起通话',
+  'TUIKit-message-custom-07': '取消通话',
+  'TUIKit-message-custom-08': '已接听',
+  'TUIKit-message-custom-09': '拒绝通话',
+  'TUIKit-message-custom-10': '无应答',
+  'TUIKit-message-custom-11': '对本次服务评价',
+  'TUIKit-message-custom-12': '查看详情>>',
+  'TUIKit-component-01': '取消',
+  'TUIKit-component-02': '完成',
+  'TUIKit-component-03': '已选中',
+  'TUIKit-component-04': '人',
+  'TUIKit-component-05': '保存',
+  'TUIKit-component-06': '发送',
+  'TUIKit-component-07': '系统通知'
+};
 
 export default translate;
diff --git a/src/TUIKit/locales/zh_cn/words.ts b/src/TUIKit/locales/zh_cn/words.ts
index c0082ae..ac4d27d 100644
--- a/src/TUIKit/locales/zh_cn/words.ts
+++ b/src/TUIKit/locales/zh_cn/words.ts
@@ -1,14 +1,14 @@
 const Words = {
-  "常用语-快捷回复工具": "常用语-快捷回复工具",
-  "在吗？在吗？在吗？重要的话说三遍。": "在吗？在吗？在吗？重要的话说三遍。",
-  "好久没聊天了，快来和我说说话～": "好久没聊天了，快来和我说说话～",
-  "好的，就这么说定了。": "好的，就这么说定了。",
-  "感恩的心，感谢有你。": "感恩的心，感谢有你。",
-  "糟糕！是心动的感觉！": "糟糕！是心动的感觉！",
-  "心疼地抱抱自己，我太难了！":  "心疼地抱抱自己，我太难了！",
-  "没关系，别在意，事情过去就过去了。": "没关系，别在意，事情过去就过去了。",
-  "早上好，今天也是让人期待的一天呢！": "早上好，今天也是让人期待的一天呢！",
-  "熬夜有什么用，又没人陪你聊天，早点休息吧。": "熬夜有什么用，又没人陪你聊天，早点休息吧。"
-}
+  '常用语-快捷回复工具': '常用语-快捷回复工具',
+  '在吗？在吗？在吗？重要的话说三遍。': '在吗？在吗？在吗？重要的话说三遍。',
+  '好久没聊天了，快来和我说说话～': '好久没聊天了，快来和我说说话～',
+  '好的，就这么说定了。': '好的，就这么说定了。',
+  '感恩的心，感谢有你。': '感恩的心，感谢有你。',
+  '糟糕！是心动的感觉！': '糟糕！是心动的感觉！',
+  '心疼地抱抱自己，我太难了！': '心疼地抱抱自己，我太难了！',
+  '没关系，别在意，事情过去就过去了。': '没关系，别在意，事情过去就过去了。',
+  '早上好，今天也是让人期待的一天呢！': '早上好，今天也是让人期待的一天呢！',
+  '熬夜有什么用，又没人陪你聊天，早点休息吧。': '熬夜有什么用，又没人陪你聊天，早点休息吧。'
+};
 
 export default Words;
diff --git a/src/TUIKit/locales/zh_tw/TUIChat.ts b/src/TUIKit/locales/zh_tw/TUIChat.ts
index f387d6f..8df194d 100644
--- a/src/TUIKit/locales/zh_tw/TUIChat.ts
+++ b/src/TUIKit/locales/zh_tw/TUIChat.ts
@@ -1,5 +1,6 @@
 const TUIChat = {
-  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。': '【安全提示】本 APP 僅用於體驗騰訊雲即時通信 IM 產品功能，不可用於業務洽談與拓展。請勿輕信匯款、中奖等涉及錢款的信息，勿輕易撥打陌生電話，謹防上當受騙。',
+  '【安全提示】本 APP 仅用于体验腾讯云即时通信 IM 产品功能，不可用于业务洽谈与拓展。请勿轻信汇款、中奖等涉及钱款的信息，勿轻易拨打陌生电话，谨防上当受骗。':
+    '【安全提示】本 APP 僅用於體驗騰訊雲即時通信 IM 產品功能，不可用於業務洽談與拓展。請勿輕信匯款、中奖等涉及錢款的信息，勿輕易撥打陌生電話，謹防上當受騙。',
   '按Enter发送，Ctrl+Enter换行': '按Enter發送，Ctrl+Enter換行',
   '表情': '[表情]',
   '查看更多': '查看更多',
@@ -150,7 +151,7 @@ const TUIChat = {
   '您已被管理员移出群聊': '您已被管理員移出群聊',
   '该群聊已被解散': '該群聊已被解散',
   '您已退出该群聊': '您已退出該群聊',
-  '您已被禁止聊天': '您已被禁止聊天',
+  '您已被禁止聊天': '您已被禁止聊天'
 };
 
 export default TUIChat;
diff --git a/src/TUIKit/locales/zh_tw/TUIContact.ts b/src/TUIKit/locales/zh_tw/TUIContact.ts
index 8afff55..6af748e 100644
--- a/src/TUIKit/locales/zh_tw/TUIContact.ts
+++ b/src/TUIKit/locales/zh_tw/TUIContact.ts
@@ -1,66 +1,66 @@
 const TUIContact = {
-  "群聊通知": "群聊通知",
-  "系统通知": "系統通知",
-  "我的群聊": "我的群聊",
-  "输入ID": "請輸入用戶/群聊 ID，回車搜索",
-  "群名称": "群名稱",
-  "群ID": "群ID",
-  "加入群聊": "加入群聊",
-  "解散群聊": "解散群聊",
-  "退出群聊": "退出群聊",
-  "进入群聊": "進入群聊",
-  "群类型": "群類型",
-  "请填写验证信息": "請填寫驗證信息",
-  "申请加入": "申請加入",
-  "已申请": "已申請",
-  "接受": "接受",
-  "拒绝": "拒絕",
-  "已处理": "已處理",
-  "添加群聊": "添加群聊",
-  "已加入": "已加入",
-  "该群组不存在": "該群組不存在",
-  "加群": "加群",
-  "我的好友": "我的好友",
-  "发送消息": "發送消息",
-  "个性签名": "個性簽名",
-  "等待管理员同意": "申請成功，等待管理員同意入群申請",
-  "加群成功": "加群成功",
-  "您已是群成员": "您已是群成員",
-  "新的联系人": "新的聯繫人",
-  "黑名单": "黑名單",
-  "无搜索结果": "無搜索結果",
-  "客服号": "客服號",
-  "ID": "ID",
-  "联系人": "聯繫人",
-  "群聊": "群聊",
-  "添加好友/群聊": "添加好友/群聊",
-  "备注名": "備註名",
-  "加入黑名单": "加入黑名單",
-  "删除好友": "刪除好友",
-  "等待验证": "等待驗證",
-  "验证信息": "驗證信息",
-  "发送申请": "發送申請",
-  "加入直播群": "加入直播群",
-  "同意": "同意",
-  "删除好友成功": "刪除好友成功",
-  "删除好友失败": "刪除好友失敗",
-  "申请已发送": "申請已發送",
-  "申请发送失败": "申請發送失敗",
-  "进入会话失败": "進入會話失敗",
-  "添加好友成功": "添加好友成功",
-  "同意好友申请失败": "同意好友申請失敗",
-  "拒绝成功": "拒絕成功",
-  "拒绝好友申请失败": "拒絕好友申請失敗",
-  "解散群聊成功": "解散群聊成功",
-  "解散群聊失败": "解散群聊失敗",
-  "退出群组成功": "退出群組成功",
-  "退出群组失败": "退出群組失敗",
-  "申请入群失败": "申請入群失敗",
-  "加入黑名单失败": "加入黑名單失敗",
-  "移除黑名单失败": "移除黑名單失敗",
-  "修改备注失败: 备注长度不得超过 96 字节": "修改備註失敗: 備註長度不得超過 96 字節",
-  "修改备注成功": "修改備註成功",
-  "修改备注失败": "修改備註失敗",
-}
+  '群聊通知': '群聊通知',
+  '系统通知': '系統通知',
+  '我的群聊': '我的群聊',
+  '输入ID': '請輸入用戶/群聊 ID，回車搜索',
+  '群名称': '群名稱',
+  '群ID': '群ID',
+  '加入群聊': '加入群聊',
+  '解散群聊': '解散群聊',
+  '退出群聊': '退出群聊',
+  '进入群聊': '進入群聊',
+  '群类型': '群類型',
+  '请填写验证信息': '請填寫驗證信息',
+  '申请加入': '申請加入',
+  '已申请': '已申請',
+  '接受': '接受',
+  '拒绝': '拒絕',
+  '已处理': '已處理',
+  '添加群聊': '添加群聊',
+  '已加入': '已加入',
+  '该群组不存在': '該群組不存在',
+  '加群': '加群',
+  '我的好友': '我的好友',
+  '发送消息': '發送消息',
+  '个性签名': '個性簽名',
+  '等待管理员同意': '申請成功，等待管理員同意入群申請',
+  '加群成功': '加群成功',
+  '您已是群成员': '您已是群成員',
+  '新的联系人': '新的聯繫人',
+  '黑名单': '黑名單',
+  '无搜索结果': '無搜索結果',
+  '客服号': '客服號',
+  'ID': 'ID',
+  '联系人': '聯繫人',
+  '群聊': '群聊',
+  '添加好友/群聊': '添加好友/群聊',
+  '备注名': '備註名',
+  '加入黑名单': '加入黑名單',
+  '删除好友': '刪除好友',
+  '等待验证': '等待驗證',
+  '验证信息': '驗證信息',
+  '发送申请': '發送申請',
+  '加入直播群': '加入直播群',
+  '同意': '同意',
+  '删除好友成功': '刪除好友成功',
+  '删除好友失败': '刪除好友失敗',
+  '申请已发送': '申請已發送',
+  '申请发送失败': '申請發送失敗',
+  '进入会话失败': '進入會話失敗',
+  '添加好友成功': '添加好友成功',
+  '同意好友申请失败': '同意好友申請失敗',
+  '拒绝成功': '拒絕成功',
+  '拒绝好友申请失败': '拒絕好友申請失敗',
+  '解散群聊成功': '解散群聊成功',
+  '解散群聊失败': '解散群聊失敗',
+  '退出群组成功': '退出群組成功',
+  '退出群组失败': '退出群組失敗',
+  '申请入群失败': '申請入群失敗',
+  '加入黑名单失败': '加入黑名單失敗',
+  '移除黑名单失败': '移除黑名單失敗',
+  '修改备注失败: 备注长度不得超过 96 字节': '修改備註失敗: 備註長度不得超過 96 字節',
+  '修改备注成功': '修改備註成功',
+  '修改备注失败': '修改備註失敗'
+};
 
 export default TUIContact;
diff --git a/src/TUIKit/locales/zh_tw/TUIConversation.ts b/src/TUIKit/locales/zh_tw/TUIConversation.ts
index d508cde..4f91cd3 100644
--- a/src/TUIKit/locales/zh_tw/TUIConversation.ts
+++ b/src/TUIKit/locales/zh_tw/TUIConversation.ts
@@ -1,24 +1,24 @@
 const TUIConversation = {
-  "发起会话": "發起會話",
-  "发起单聊": "發起單聊",
-  "发起群聊": "發起群聊",
-  "请输入userID": "請輸入userID",
-  "删除会话": "刪除會話",
-  "删除后，将清空该聊天的消息记录": "刪除後，將清空該聊天的消息記錄",
-  "删除后，将清空该群聊的消息记录": "刪除後，將清空該群聊的消息記錄",
-  "置顶会话": "置頂會話",
-  "取消置顶": "取消置頂",
-  "消息免打扰": "消息免打擾",
-  "取消免打扰": "取消免打擾",
-  "系统通知": "系統通知",
-  "有人@我": "有人@我",
-  "@所有人": "@所有人",
-  "条": "條",
-  "我": "我",
-  "网络异常，请您检查网络设置": "網絡異常，請您檢查網絡設置",
-  "您已被群管理员移出群聊": "您已被群管理員移出群聊",
-  "该群聊已被解散": "該群聊已被解散",
-  "您已退出该群聊": "您已退出該群聊",
-}
+  '发起会话': '發起會話',
+  '发起单聊': '發起單聊',
+  '发起群聊': '發起群聊',
+  '请输入userID': '請輸入userID',
+  '删除会话': '刪除會話',
+  '删除后，将清空该聊天的消息记录': '刪除後，將清空該聊天的消息記錄',
+  '删除后，将清空该群聊的消息记录': '刪除後，將清空該群聊的消息記錄',
+  '置顶会话': '置頂會話',
+  '取消置顶': '取消置頂',
+  '消息免打扰': '消息免打擾',
+  '取消免打扰': '取消免打擾',
+  '系统通知': '系統通知',
+  '有人@我': '有人@我',
+  '@所有人': '@所有人',
+  '条': '條',
+  '我': '我',
+  '网络异常，请您检查网络设置': '網絡異常，請您檢查網絡設置',
+  '您已被群管理员移出群聊': '您已被群管理員移出群聊',
+  '该群聊已被解散': '該群聊已被解散',
+  '您已退出该群聊': '您已退出該群聊'
+};
 
 export default TUIConversation;
diff --git a/src/TUIKit/locales/zh_tw/TUIGroup.ts b/src/TUIKit/locales/zh_tw/TUIGroup.ts
index 1db14ed..cb6dcda 100644
--- a/src/TUIKit/locales/zh_tw/TUIGroup.ts
+++ b/src/TUIKit/locales/zh_tw/TUIGroup.ts
@@ -1,87 +1,92 @@
 const TUIGroup = {
-  "输入groupID搜索": "輸入groupID搜索",
-  "群名称": "群名稱",
-  "群ID": "群ID",
-  "加入群聊": "加入群聊",
-  "解散群聊": "解散群聊",
-  "退出群聊": "退出群聊",
-  "群类型": "群類型",
-  "请填写验证信息": "請填寫驗證信息",
-  "申请加入": "申請加入",
-  "已申请": "已申請",
-  "群公告": "群公告",
-  "群成员": "群成員",
-  "群管理": "群管理",
-  "好友工作群": "好友工作群",
-  "陌生人社交群": "陌生人社交群",
-  "临时会议群": "臨時會議群",
-  "直播群": "直播群",
-  "社群": "社群",
-  "自由加入": "自由加入",
-  "需要验证": "需要驗證",
-  "禁止加群": "禁止加群",
-  "人": "人",
-  "群头像": "群頭像",
-  "加群方式": "加群方式",
-  "转让群组": "轉讓群組",
-  "退出群组": "退出群組",
-  "群管理员": "群管理員",
-  "全员禁言": "全員禁言",
-  "全员禁言开启后，只允许群主和管理员发言。": "全員禁言開啟後，只允許群主和管理員發言。",
-  "单独禁言人员": "單獨禁言人員",
-  "删除成员": "刪除成員",
-  "确定从群聊中删除该成员？": "確定從群聊中刪除該成員？",
-  "确定从群聊中删除所选成员？": "確定從群聊中刪除所選成員？",
-  "暂无公告": "暫無公告",
-  "发布": "發布",
-  "编辑": "編輯",
-  "查看更多": "查看更多",
-  "管理员": "管理員",
-  "群主": "群主",
-  "我": "我",
-  "确认": "確認",
-  "添加成员": "添加成員",
-  "新增管理员": "新增管理員",
-  "移除管理员": "移除管理員",
-  "新增禁言用户": "新增禁言用戶",
-  "移除禁言用户": "移除禁言用戶",
-  "修改群聊名称": "修改群聊名稱",
-  "修改群聊名称后，将在群内通知其他成员": "修改群聊名稱後，將在群內通知其他成員",
-  "仅限中文、字母、数字和下划线，2-20个字": "僅限中文、字母、數字和下劃線，2-20個字",
-  "请先注册 TUIGroup 模块": "請先註冊 TUIGroup 模塊",
-  "该用户不存在": "該用戶不存在",
-  "该用户不在群组内": "該用戶不在群組內",
-  "添加群聊": "添加群聊",
-  "该群组不存在": "該群組不存在",
-  "创建群聊，请注册 TUIGroup 模块": "創建群聊，請註冊 TUIGroup 模塊",
-  "创建成功": "創建成功",
-  "发起多人会话（群聊）": "發起多人會話（群聊）",
-  "选填": "選填",
-  "取消": "取消",
-  "创建": "創建",
-  "类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见": "類似普通微信群，創建後僅支持已在群內的好友邀請加群，且無需被邀請方同意或群主審批。詳見",
-  "类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见": "類似 QQ 群，創建後群主可以指定群管理員，用戶搜索群 ID 發起加群申請後，需要群主或管理員審批通過才能入群。詳見",
-  "创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见": "創建後可以隨意進出，且支持查看入群前消息；適合用於音視頻會議場景、在線教育場景等與實時音視頻產品結合的場景。詳見",
-  "创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见": "創建後可以隨意進出，沒有群成員數量上限，但不支持歷史消息存儲；適合與直播產品結合，用於彈幕聊天場景。詳見",
-  "创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见": "創建後可以隨意進出，最多支持100000人，支持歷史消息存儲，用戶搜索群 ID 發起加群申請後，無需管理員審批即可進群。詳見",
-  "产品文档": "產品文檔",
-  "设置群名称": "設置群名稱",
-  "请输入群名称": "請輸入群名稱",
-  "设置群ID": "設置群ID",
-  "请输入群ID": "請輸入群ID",
-  "选择群类型": "選擇群類型",
-  "陌生人社交群（Public）": "陌生人社交群（Public）",
-  "临时会议群（Meeting）": "臨時會議群（Meeting）",
-  "好友工作群（Work）": "好友工作群（Work）",
-  "直播群（AVChatroom）": "直播群（AVChatroom）",
-  "社群（Community）": "社群（Community）",
-  "群组创建成功": "群組創建成功",
-  "群组解散成功": "群組解散成功",
-  "禁言设置成功": "禁言設置成功",
-  "取消禁言成功": "取消禁言成功",
-  "群名称不能为空": "群名稱不能為空",
-  "群名称修改成功": "群名稱修改成功",
-  "群公告字数超出限制，最大长度为150": "群公告字數超出限制，最大長度為150",
+  '输入groupID搜索': '輸入groupID搜索',
+  '群名称': '群名稱',
+  '群ID': '群ID',
+  '加入群聊': '加入群聊',
+  '解散群聊': '解散群聊',
+  '退出群聊': '退出群聊',
+  '群类型': '群類型',
+  '请填写验证信息': '請填寫驗證信息',
+  '申请加入': '申請加入',
+  '已申请': '已申請',
+  '群公告': '群公告',
+  '群成员': '群成員',
+  '群管理': '群管理',
+  '好友工作群': '好友工作群',
+  '陌生人社交群': '陌生人社交群',
+  '临时会议群': '臨時會議群',
+  '直播群': '直播群',
+  '社群': '社群',
+  '自由加入': '自由加入',
+  '需要验证': '需要驗證',
+  '禁止加群': '禁止加群',
+  '人': '人',
+  '群头像': '群頭像',
+  '加群方式': '加群方式',
+  '转让群组': '轉讓群組',
+  '退出群组': '退出群組',
+  '群管理员': '群管理員',
+  '全员禁言': '全員禁言',
+  '全员禁言开启后，只允许群主和管理员发言。': '全員禁言開啟後，只允許群主和管理員發言。',
+  '单独禁言人员': '單獨禁言人員',
+  '删除成员': '刪除成員',
+  '确定从群聊中删除该成员？': '確定從群聊中刪除該成員？',
+  '确定从群聊中删除所选成员？': '確定從群聊中刪除所選成員？',
+  '暂无公告': '暫無公告',
+  '发布': '發布',
+  '编辑': '編輯',
+  '查看更多': '查看更多',
+  '管理员': '管理員',
+  '群主': '群主',
+  '我': '我',
+  '确认': '確認',
+  '添加成员': '添加成員',
+  '新增管理员': '新增管理員',
+  '移除管理员': '移除管理員',
+  '新增禁言用户': '新增禁言用戶',
+  '移除禁言用户': '移除禁言用戶',
+  '修改群聊名称': '修改群聊名稱',
+  '修改群聊名称后，将在群内通知其他成员': '修改群聊名稱後，將在群內通知其他成員',
+  '仅限中文、字母、数字和下划线，2-20个字': '僅限中文、字母、數字和下劃線，2-20個字',
+  '请先注册 TUIGroup 模块': '請先註冊 TUIGroup 模塊',
+  '该用户不存在': '該用戶不存在',
+  '该用户不在群组内': '該用戶不在群組內',
+  '添加群聊': '添加群聊',
+  '该群组不存在': '該群組不存在',
+  '创建群聊，请注册 TUIGroup 模块': '創建群聊，請註冊 TUIGroup 模塊',
+  '创建成功': '創建成功',
+  '发起多人会话（群聊）': '發起多人會話（群聊）',
+  '选填': '選填',
+  '取消': '取消',
+  '创建': '創建',
+  '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见':
+    '類似普通微信群，創建後僅支持已在群內的好友邀請加群，且無需被邀請方同意或群主審批。詳見',
+  '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见':
+    '類似 QQ 群，創建後群主可以指定群管理員，用戶搜索群 ID 發起加群申請後，需要群主或管理員審批通過才能入群。詳見',
+  '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见':
+    '創建後可以隨意進出，且支持查看入群前消息；適合用於音視頻會議場景、在線教育場景等與實時音視頻產品結合的場景。詳見',
+  '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见':
+    '創建後可以隨意進出，沒有群成員數量上限，但不支持歷史消息存儲；適合與直播產品結合，用於彈幕聊天場景。詳見',
+  '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见':
+    '創建後可以隨意進出，最多支持100000人，支持歷史消息存儲，用戶搜索群 ID 發起加群申請後，無需管理員審批即可進群。詳見',
+  '产品文档': '產品文檔',
+  '设置群名称': '設置群名稱',
+  '请输入群名称': '請輸入群名稱',
+  '设置群ID': '設置群ID',
+  '请输入群ID': '請輸入群ID',
+  '选择群类型': '選擇群類型',
+  '陌生人社交群（Public）': '陌生人社交群（Public）',
+  '临时会议群（Meeting）': '臨時會議群（Meeting）',
+  '好友工作群（Work）': '好友工作群（Work）',
+  '直播群（AVChatroom）': '直播群（AVChatroom）',
+  '社群（Community）': '社群（Community）',
+  '群组创建成功': '群組創建成功',
+  '群组解散成功': '群組解散成功',
+  '禁言设置成功': '禁言設置成功',
+  '取消禁言成功': '取消禁言成功',
+  '群名称不能为空': '群名稱不能為空',
+  '群名称修改成功': '群名稱修改成功',
+  '群公告字数超出限制，最大长度为150': '群公告字數超出限制，最大長度為150'
 };
 
 export default TUIGroup;
diff --git a/src/TUIKit/locales/zh_tw/TUISearch.ts b/src/TUIKit/locales/zh_tw/TUISearch.ts
index 243259d..c6bd5f5 100644
--- a/src/TUIKit/locales/zh_tw/TUISearch.ts
+++ b/src/TUIKit/locales/zh_tw/TUISearch.ts
@@ -1,41 +1,41 @@
 const TUISearch = {
-  搜索: "搜索",
-  全部: "全部",
-  联系人: "聯繫人",
-  群聊: "群聊",
-  聊天记录: "聊天記錄",
-  文本: "文本",
-  文件: "文件",
-  "图片/视频": "圖片/視頻",
-  其他: "其他",
-  选择时间: "選擇時間",
-  今天: "今天",
-  近三天: "近三天",
-  近七天: "近七天",
-  查看更多: "查看更多",
-  条相关: "條相關",
-  条与: "條與",
-  相关的: "相關的",
-  进入聊天: "進入聊天",
-  定位到聊天位置: "定位到聊天位置",
-  搜索会话内容: "搜索會話內容",
-  查看更多历史记录: "查看更多歷史記錄",
-  暂无搜索结果: "暫無搜索結果",
-  结果: "結果",
-  取消: "取消",
-  "[文本]": "[文本]",
-  "[图片]": "[圖片]",
-  "[语音]": "[語音]",
-  "[视频]": "[視頻]",
-  "[文件]": "[文件]",
-  "[自定义消息]": "[自定義消息]",
-  "[系统消息]": "[系統消息]",
-  "[合并消息]": "[合併消息]",
-  "[位置消息]": "[位置消息]",
-  "消息云端搜索失败：": "消息雲端搜索失敗：",
-  "查找联系人失败：": "查找聯繫人失敗：",
-  "查找群聊失败：": "查找群聊失敗：",
-  "进入会话失败": "進入會話失敗",
+  搜索: '搜索',
+  全部: '全部',
+  联系人: '聯繫人',
+  群聊: '群聊',
+  聊天记录: '聊天記錄',
+  文本: '文本',
+  文件: '文件',
+  '图片/视频': '圖片/視頻',
+  其他: '其他',
+  选择时间: '選擇時間',
+  今天: '今天',
+  近三天: '近三天',
+  近七天: '近七天',
+  查看更多: '查看更多',
+  条相关: '條相關',
+  条与: '條與',
+  相关的: '相關的',
+  进入聊天: '進入聊天',
+  定位到聊天位置: '定位到聊天位置',
+  搜索会话内容: '搜索會話內容',
+  查看更多历史记录: '查看更多歷史記錄',
+  暂无搜索结果: '暫無搜索結果',
+  结果: '結果',
+  取消: '取消',
+  '[文本]': '[文本]',
+  '[图片]': '[圖片]',
+  '[语音]': '[語音]',
+  '[视频]': '[視頻]',
+  '[文件]': '[文件]',
+  '[自定义消息]': '[自定義消息]',
+  '[系统消息]': '[系統消息]',
+  '[合并消息]': '[合併消息]',
+  '[位置消息]': '[位置消息]',
+  '消息云端搜索失败：': '消息雲端搜索失敗：',
+  '查找联系人失败：': '查找聯繫人失敗：',
+  '查找群聊失败：': '查找群聊失敗：',
+  '进入会话失败': '進入會話失敗'
 };
 
 export default TUISearch;
diff --git a/src/TUIKit/locales/zh_tw/component.ts b/src/TUIKit/locales/zh_tw/component.ts
index 749220b..ba9034a 100644
--- a/src/TUIKit/locales/zh_tw/component.ts
+++ b/src/TUIKit/locales/zh_tw/component.ts
@@ -1,21 +1,21 @@
 const components = {
-  "取消": "取消",
-  "完成": "完成",
-  "已选中": "已選中",
-  "人": "人",
-  "保存": "保存",
-  "请输入userID": "請輸入userID",
-  "请输入groupID": "請輸入groupID",
-  "确定": "確定",
-  "全选": "全選",
-  "已在群聊中": "已在群聊中",
-  "查看更多": "查看更多",
-  "图片 url 不存在": "圖片 url 不存在",
-  "已取消": "已取消",
-  "获取权限失败": "獲取權限失敗",
-  "已保存至相册": "已保存至相冊",
-  "图片下载失败": "圖片下載失敗",
-  "暂不支持下载此类型图片": "暫不支持下載此類型圖片",
+  '取消': '取消',
+  '完成': '完成',
+  '已选中': '已選中',
+  '人': '人',
+  '保存': '保存',
+  '请输入userID': '請輸入userID',
+  '请输入groupID': '請輸入groupID',
+  '确定': '確定',
+  '全选': '全選',
+  '已在群聊中': '已在群聊中',
+  '查看更多': '查看更多',
+  '图片 url 不存在': '圖片 url 不存在',
+  '已取消': '已取消',
+  '获取权限失败': '獲取權限失敗',
+  '已保存至相册': '已保存至相冊',
+  '图片下载失败': '圖片下載失敗',
+  '暂不支持下载此类型图片': '暫不支持下載此類型圖片'
 };
 
 export default components;
diff --git a/src/TUIKit/locales/zh_tw/evaluate.ts b/src/TUIKit/locales/zh_tw/evaluate.ts
index 616bfdf..2e87577 100644
--- a/src/TUIKit/locales/zh_tw/evaluate.ts
+++ b/src/TUIKit/locales/zh_tw/evaluate.ts
@@ -1,11 +1,11 @@
 const Evaluate = {
-  "请对本次服务进行评价": "請對本次服務進行評價",
-  "提交评价": "提交評價",
-  "服务评价工具": "服務評價工具",
-  "使用": "使用",
-  "自定义消息": "自定義消息",
-  "搭建": "搭建",
-  "星": "星"
-}
+  '请对本次服务进行评价': '請對本次服務進行評價',
+  '提交评价': '提交評價',
+  '服务评价工具': '服務評價工具',
+  '使用': '使用',
+  '自定义消息': '自定義消息',
+  '搭建': '搭建',
+  '星': '星'
+};
 
 export default Evaluate;
diff --git a/src/TUIKit/locales/zh_tw/index.ts b/src/TUIKit/locales/zh_tw/index.ts
index d2a2f45..5a307c4 100644
--- a/src/TUIKit/locales/zh_tw/index.ts
+++ b/src/TUIKit/locales/zh_tw/index.ts
@@ -34,8 +34,8 @@ const messages = {
     Evaluate,
     Words,
     TUISearch,
-    Emoji,
-  },
+    Emoji
+  }
 };
 
 export default messages;
diff --git a/src/TUIKit/locales/zh_tw/message.ts b/src/TUIKit/locales/zh_tw/message.ts
index 594572c..2e9288d 100644
--- a/src/TUIKit/locales/zh_tw/message.ts
+++ b/src/TUIKit/locales/zh_tw/message.ts
@@ -1,62 +1,62 @@
 const message = {
-  "tip": {
-    "群成员": "群成員",
-    "加入群组": "加入群組",
-    "退出群组": "退出群組",
-    "被": "被",
-    "踢出群组": "踢出群組",
-    "成为管理员": "成為管理員",
-    "被撤销管理员": "被撤銷管理員",
-    "被禁言": "被禁言",
-    "被取消禁言": "被取消禁言",
-    "群提示消息": "群提示消息",
-    "管理员": "管理員",
-    "开启全员禁言": "開啟全員禁言",
-    "取消全员禁言": "取消全員禁言",
-    "成为新的群主": "成為新的群主",
-    "修改群名为": "修改群名為",
-    "发布新公告": "發布新公告",
-    "把群公告修改为": "把群公告修改為",
-    "申请加入群组": "申請加入群組",
-    "成功加入群组": "成功加入群組",
-    "被拒绝": "被拒絕",
-    "你被管理员": "你被管理員",
-    "群": "群",
-    "解散": "解散",
-    "创建群": "創建群",
-    "邀请你加群": "邀請你加群",
-    "你退出群组": "你退出群組",
-    "你被": "你被",
-    "设置为群": "設置為群",
-    "的管理员": "的管理員",
-    "撤销群": "撤銷群",
-    "的管理员身份": "的管理員身份",
-    "同意加群": "同意加群",
-    "拒接加群": "拒接加群",
-    "自定义群系统通知": "自定義群系統通知"
+  'tip': {
+    '群成员': '群成員',
+    '加入群组': '加入群組',
+    '退出群组': '退出群組',
+    '被': '被',
+    '踢出群组': '踢出群組',
+    '成为管理员': '成為管理員',
+    '被撤销管理员': '被撤銷管理員',
+    '被禁言': '被禁言',
+    '被取消禁言': '被取消禁言',
+    '群提示消息': '群提示消息',
+    '管理员': '管理員',
+    '开启全员禁言': '開啟全員禁言',
+    '取消全员禁言': '取消全員禁言',
+    '成为新的群主': '成為新的群主',
+    '修改群名为': '修改群名為',
+    '发布新公告': '發布新公告',
+    '把群公告修改为': '把群公告修改為',
+    '申请加入群组': '申請加入群組',
+    '成功加入群组': '成功加入群組',
+    '被拒绝': '被拒絕',
+    '你被管理员': '你被管理員',
+    '群': '群',
+    '解散': '解散',
+    '创建群': '創建群',
+    '邀请你加群': '邀請你加群',
+    '你退出群组': '你退出群組',
+    '你被': '你被',
+    '设置为群': '設置為群',
+    '的管理员': '的管理員',
+    '撤销群': '撤銷群',
+    '的管理员身份': '的管理員身份',
+    '同意加群': '同意加群',
+    '拒接加群': '拒接加群',
+    '自定义群系统通知': '自定義群系統通知'
   },
-  "custom": {
-    "自定义消息": "自定義消息",
-    "通话时长": "通話時長",
-    "通话结束": "通話結束",
-    "切换语音通话": "切換語音通話",
-    "切换视频通话": "切換視頻通話",
-    "发起通话": "發起通話",
-    "取消通话": "取消通話",
-    "已接听": "已接聽",
-    "拒绝通话": "拒絕通話",
-    "无应答": "無應答",
-    "对本次服务评价": "對本次服務評價",
-    "查看详情>>": "查看詳情>>",
-    "已取消": "已取消",
-    "对方已取消": "對方已取消",
-    "已拒绝": "已拒絕",
-    "对方已拒绝": "對方已拒絕",
-    "对方忙线中": "對方忙線中",
-    "忙线未接听": "忙線未接聽",
-    "对方无应答": "對方無應答",
-    "超时无应答": "超時無應答",
+  'custom': {
+    '自定义消息': '自定義消息',
+    '通话时长': '通話時長',
+    '通话结束': '通話結束',
+    '切换语音通话': '切換語音通話',
+    '切换视频通话': '切換視頻通話',
+    '发起通话': '發起通話',
+    '取消通话': '取消通話',
+    '已接听': '已接聽',
+    '拒绝通话': '拒絕通話',
+    '无应答': '無應答',
+    '对本次服务评价': '對本次服務評價',
+    '查看详情>>': '查看詳情>>',
+    '已取消': '已取消',
+    '对方已取消': '對方已取消',
+    '已拒绝': '已拒絕',
+    '对方已拒绝': '對方已拒絕',
+    '对方忙线中': '對方忙線中',
+    '忙线未接听': '忙線未接聽',
+    '对方无应答': '對方無應答',
+    '超时无应答': '超時無應答'
   }
-}
+};
 
 export default message;
diff --git a/src/TUIKit/locales/zh_tw/time.ts b/src/TUIKit/locales/zh_tw/time.ts
index 79f92c0..505edba 100644
--- a/src/TUIKit/locales/zh_tw/time.ts
+++ b/src/TUIKit/locales/zh_tw/time.ts
@@ -1,37 +1,37 @@
 const time = {
-  "周": "週",
-  "天": "天",
-  "小时": "小時",
-  "分钟": "分鐘",
-  "刚刚": "剛剛",
-  "前": "前",
-  "昨天": "昨天",
-  "星期一": "星期一",
-  "星期二": "星期二",
-  "星期三": "星期三",
-  "星期四": "星期四",
-  "星期五": "星期五",
-  "星期六": "星期六",
-  "星期日": "星期日",
-  "一月": "一月",
-  "二月": "二月",
-  "三月": "三月",
-  "四月": "四月",
-  "五月": "五月",
-  "六月": "六月",
-  "七月": "七月",
-  "八月": "八月",
-  "九月": "九月",
-  "十月": "十月",
-  "十一月": "十一月",
-  "十二月": "十二月",
-  "一": "一",
-  "二": "二",
-  "三": "三",
-  "四": "四",
-  "五": "五",
-  "六": "六",
-  "日": "日",
-}
+  '周': '週',
+  '天': '天',
+  '小时': '小時',
+  '分钟': '分鐘',
+  '刚刚': '剛剛',
+  '前': '前',
+  '昨天': '昨天',
+  '星期一': '星期一',
+  '星期二': '星期二',
+  '星期三': '星期三',
+  '星期四': '星期四',
+  '星期五': '星期五',
+  '星期六': '星期六',
+  '星期日': '星期日',
+  '一月': '一月',
+  '二月': '二月',
+  '三月': '三月',
+  '四月': '四月',
+  '五月': '五月',
+  '六月': '六月',
+  '七月': '七月',
+  '八月': '八月',
+  '九月': '九月',
+  '十月': '十月',
+  '十一月': '十一月',
+  '十二月': '十二月',
+  '一': '一',
+  '二': '二',
+  '三': '三',
+  '四': '四',
+  '五': '五',
+  '六': '六',
+  '日': '日'
+};
 
 export default time;
diff --git a/src/TUIKit/locales/zh_tw/translate.ts b/src/TUIKit/locales/zh_tw/translate.ts
index e66baac..15f49a9 100644
--- a/src/TUIKit/locales/zh_tw/translate.ts
+++ b/src/TUIKit/locales/zh_tw/translate.ts
@@ -1,164 +1,165 @@
 const translate = {
-  "TUIKit-TUIChat-01": "撤回消息",
-  "TUIKit-TUIChat-02": "刪除消息",
-  "TUIKit-TUIChat-03": "重新發送",
-  "TUIKit-TUIChat-04": "轉發",
-  "TUIKit-TUIChat-05": "打開",
-  "TUIKit-TUIChat-06": "已讀",
-  "TUIKit-TUIChat-07": "未讀",
-  "TUIKit-TUIChat-08": "您",
-  "TUIKit-TUIChat-09": "撤回了一條消息",
-  "TUIKit-TUIChat-10": "重新編輯",
-  "TUIKit-TUIChat-11": "我",
-  "TUIKit-TUIChat-12": "查看更多",
-  "TUIKit-TUIChat-13": "轉發給",
-  "TUIKit-TUIChat-14": "請輸入消息",
-  "TUIKit-TUIChat-15": "描述",
-  "TUIKit-TUIChat-16": "經度",
-  "TUIKit-TUIChat-17": "緯度",
-  "TUIKit-TUIChat-18": "管理員開啟全員禁言",
-  "TUIKit-TUIChat-19": "您已被管理員禁言",
-  "TUIKit-TUIChat-20": "按Enter發送，Ctrl+Enter換行",
-  "TUIKit-TUIChat-mange-01": "群公告",
-  "TUIKit-TUIChat-mange-02": "群成員",
-  "TUIKit-TUIChat-mange-03": "群管理",
-  "TUIKit-TUIChat-mange-04": "好友工作群",
-  "TUIKit-TUIChat-mange-05": "陌生人社交群",
-  "TUIKit-TUIChat-mange-06": "臨時會議群",
-  "TUIKit-TUIChat-mange-07": "直播群",
-  "TUIKit-TUIChat-mange-08": "自由加入",
-  "TUIKit-TUIChat-mange-09": "需要驗證",
-  "TUIKit-TUIChat-mange-10": "禁止加群",
-  "TUIKit-TUIChat-mange-11": "人",
-  "TUIKit-TUIChat-mange-12": "群ID",
-  "TUIKit-TUIChat-mange-13": "群頭像",
-  "TUIKit-TUIChat-mange-14": "群類型",
-  "TUIKit-TUIChat-mange-15": "加群方式",
-  "TUIKit-TUIChat-mange-16": "轉讓群組",
-  "TUIKit-TUIChat-mange-17": "解散群聊",
-  "TUIKit-TUIChat-mange-18": "退出群組",
-  "TUIKit-TUIChat-mange-19": "群管理員",
-  "TUIKit-TUIChat-mange-20": "全員禁言",
-  "TUIKit-TUIChat-mange-21": "全員禁言開啟後，只允許群主和管理員發言。",
-  "TUIKit-TUIChat-mange-22": "單獨禁言人員",
-  "TUIKit-TUIChat-mange-23": "刪除成員",
-  "TUIKit-TUIChat-mange-24": "確定從群聊中刪除該成員？",
-  "TUIKit-TUIChat-mange-25": "確定從群聊中刪除所選成員？",
-  "TUIKit-TUIChat-mange-26": "暫無公告",
-  "TUIKit-TUIChat-mange-27": "發布",
-  "TUIKit-TUIChat-mange-28": "編輯",
-  "TUIKit-TUIChat-mange-29": "群名稱",
-  "TUIKit-TUIChat-mange-30": "查看更多",
-  "TUIKit-TUIChat-mange-31": "管理員",
-  "TUIKit-TUIChat-mange-32": "群主",
-  "TUIKit-TUIChat-mange-33": "我",
-  "TUIKit-TUIChat-mange-34": "添加成員",
-  "TUIKit-TUIChat-mange-35": "新增管理員",
-  "TUIKit-TUIChat-mange-36": "移除管理員",
-  "TUIKit-TUIChat-mange-37": "新增禁言用戶",
-  "TUIKit-TUIChat-mange-38": "移除禁言用戶",
-  "TUIKit-TUIContact-01": "群聊通知",
-  "TUIKit-TUIContact-02": "系統通知",
-  "TUIKit-TUIContact-03": "我的群聊",
-  "TUIKit-TUIContact-04": "輸入groupID搜索",
-  "TUIKit-TUIContact-05": "群名稱",
-  "TUIKit-TUIContact-06": "群ID",
-  "TUIKit-TUIContact-07": "加入群聊",
-  "TUIKit-TUIContact-08": "解散群聊",
-  "TUIKit-TUIContact-09": "退出群聊",
-  "TUIKit-TUIContact-10": "群類型",
-  "TUIKit-TUIContact-11": "請填寫驗證信息",
-  "TUIKit-TUIContact-12": "申請加入",
-  "TUIKit-TUIContact-13": "已申請",
-  "TUIKit-TUIContact-14": "接受",
-  "TUIKit-TUIContact-15": "拒絕",
-  "TUIKit-TUIContact-16": "已處理",
-  "TUIKit-TUIConversation-01": "發起單人/多人會話",
-  "TUIKit-TUIConversation-02": "請輸入userID",
-  "TUIKit-TUIConversation-03": "刪除會話",
-  "TUIKit-TUIConversation-04": "系統通知",
-  "TUIKit-TUIConversation-05": "發起多人會話（群聊）",
-  "TUIKit-TUIConversation-06": "群頭像",
-  "TUIKit-TUIConversation-07": "群名稱",
-  "TUIKit-TUIConversation-08": "群ID",
-  "TUIKit-TUIConversation-09": "群類型",
-  "TUIKit-TUIConversation-10": "選填",
-  "TUIKit-TUIConversation-11": "取消",
-  "TUIKit-TUIConversation-12": "創建",
-  "TUIKit-TUIConversation-13": "類似普通微信群，創建後僅支持已在群內的好友邀請加群，且無需被邀請方同意或群主審批。詳見產品文檔",
-  "TUIKit-TUIConversation-14": "類似 QQ 群，創建後群主可以指定群管理員，用戶搜索群 ID 發起加群申請後，需要群主或管理員審批通過才能入群。詳見產品文檔",
-  "TUIKit-TUIConversation-15": "創建後可以隨意進出，且支持查看入群前消息；適合用於音視頻會議場景、在線教育場景等與實時音視頻產品結合的場景。詳見產品文檔",
-  "TUIKit-TUIConversation-16": "創建後可以隨意進出，沒有群成員數量上限，但不支持歷史消息存儲；適合與直播產品結合，用於彈幕聊天場景。詳見產品文檔",
-  "TUIKit-TUIProfile-01": "資料設置",
-  "TUIKit-TUIProfile-02": "頭像",
-  "TUIKit-TUIProfile-03": "昵稱",
-  "TUIKit-TUIProfile-04": "賬號",
-  "TUIKit-TUIProfile-05": "個性簽名",
-  "TUIKit-TUIProfile-06": "性別",
-  "TUIKit-TUIProfile-07": "男",
-  "TUIKit-TUIProfile-08": "女",
-  "TUIKit-TUIProfile-09": "不顯示",
-  "TUIKit-TUIProfile-10": "出生年月",
-  "TUIKit-TUIProfile-11": "取消",
-  "TUIKit-TUIProfile-12": "保存",
-  "TUIKit-time-01": "週",
-  "TUIKit-time-02": "天",
-  "TUIKit-time-03": "小時",
-  "TUIKit-time-04": "分鐘",
-  "TUIKit-time-05": "剛剛",
-  "TUIKit-time-06": "前",
-  "TUIKit-message-tip-01": "群成員",
-  "TUIKit-message-tip-02": "加入群組",
-  "TUIKit-message-tip-03": "退出群組",
-  "TUIKit-message-tip-04": "被",
-  "TUIKit-message-tip-05": "踢出群組",
-  "TUIKit-message-tip-06": "成為管理員",
-  "TUIKit-message-tip-07": "被撤銷管理員",
-  "TUIKit-message-tip-08": "被禁言",
-  "TUIKit-message-tip-09": "被取消禁言",
-  "TUIKit-message-tip-10": "群提示消息",
-  "TUIKit-message-tip-11": "管理員",
-  "TUIKit-message-tip-12": "開啟全員禁言",
-  "TUIKit-message-tip-13": "取消全員禁言",
-  "TUIKit-message-tip-14": "成為新的群主",
-  "TUIKit-message-tip-15": "修改群名為",
-  "TUIKit-message-tip-16": "發布新公告",
-  "TUIKit-message-tip-17": "申請加入群組",
-  "TUIKit-message-tip-18": "成功加入群組",
-  "TUIKit-message-tip-19": "被拒絕",
-  "TUIKit-message-tip-20": "你被管理員",
-  "TUIKit-message-tip-21": "群",
-  "TUIKit-message-tip-22": "解散",
-  "TUIKit-message-tip-23": "創建群",
-  "TUIKit-message-tip-24": "邀請你加群",
-  "TUIKit-message-tip-25": "你退出群組",
-  "TUIKit-message-tip-26": "你被",
-  "TUIKit-message-tip-27": "設置為群",
-  "TUIKit-message-tip-28": "的管理員",
-  "TUIKit-message-tip-29": "撤銷群",
-  "TUIKit-message-tip-30": "的管理員身份",
-  "TUIKit-message-tip-31": "同意加群",
-  "TUIKit-message-tip-32": "拒接加群",
-  "TUIKit-message-tip-33": "自定義群系統通知",
-  "TUIKit-message-custom-01": "自定義消息",
-  "TUIKit-message-custom-02": "通話時長",
-  "TUIKit-message-custom-03": "結束群聊",
-  "TUIKit-message-custom-04": "切換語音通話",
-  "TUIKit-message-custom-05": "切換視頻通話",
-  "TUIKit-message-custom-06": "發起通話",
-  "TUIKit-message-custom-07": "取消通話",
-  "TUIKit-message-custom-08": "已接聽",
-  "TUIKit-message-custom-09": "拒絕通話",
-  "TUIKit-message-custom-10": "無應答",
-  "TUIKit-message-custom-11": "對本次服務評價",
-  "TUIKit-message-custom-12": "查看詳情>>",
-  "TUIKit-component-01": "取消",
-  "TUIKit-component-02": "完成",
-  "TUIKit-component-03": "已選中",
-  "TUIKit-component-04": "人",
-  "TUIKit-component-05": "保存",
-  "TUIKit-component-06": "發送",
-  "TUIKit-component-07": "系統通知",
-}
+  'TUIKit-TUIChat-01': '撤回消息',
+  'TUIKit-TUIChat-02': '刪除消息',
+  'TUIKit-TUIChat-03': '重新發送',
+  'TUIKit-TUIChat-04': '轉發',
+  'TUIKit-TUIChat-05': '打開',
+  'TUIKit-TUIChat-06': '已讀',
+  'TUIKit-TUIChat-07': '未讀',
+  'TUIKit-TUIChat-08': '您',
+  'TUIKit-TUIChat-09': '撤回了一條消息',
+  'TUIKit-TUIChat-10': '重新編輯',
+  'TUIKit-TUIChat-11': '我',
+  'TUIKit-TUIChat-12': '查看更多',
+  'TUIKit-TUIChat-13': '轉發給',
+  'TUIKit-TUIChat-14': '請輸入消息',
+  'TUIKit-TUIChat-15': '描述',
+  'TUIKit-TUIChat-16': '經度',
+  'TUIKit-TUIChat-17': '緯度',
+  'TUIKit-TUIChat-18': '管理員開啟全員禁言',
+  'TUIKit-TUIChat-19': '您已被管理員禁言',
+  'TUIKit-TUIChat-20': '按Enter發送，Ctrl+Enter換行',
+  'TUIKit-TUIChat-mange-01': '群公告',
+  'TUIKit-TUIChat-mange-02': '群成員',
+  'TUIKit-TUIChat-mange-03': '群管理',
+  'TUIKit-TUIChat-mange-04': '好友工作群',
+  'TUIKit-TUIChat-mange-05': '陌生人社交群',
+  'TUIKit-TUIChat-mange-06': '臨時會議群',
+  'TUIKit-TUIChat-mange-07': '直播群',
+  'TUIKit-TUIChat-mange-08': '自由加入',
+  'TUIKit-TUIChat-mange-09': '需要驗證',
+  'TUIKit-TUIChat-mange-10': '禁止加群',
+  'TUIKit-TUIChat-mange-11': '人',
+  'TUIKit-TUIChat-mange-12': '群ID',
+  'TUIKit-TUIChat-mange-13': '群頭像',
+  'TUIKit-TUIChat-mange-14': '群類型',
+  'TUIKit-TUIChat-mange-15': '加群方式',
+  'TUIKit-TUIChat-mange-16': '轉讓群組',
+  'TUIKit-TUIChat-mange-17': '解散群聊',
+  'TUIKit-TUIChat-mange-18': '退出群組',
+  'TUIKit-TUIChat-mange-19': '群管理員',
+  'TUIKit-TUIChat-mange-20': '全員禁言',
+  'TUIKit-TUIChat-mange-21': '全員禁言開啟後，只允許群主和管理員發言。',
+  'TUIKit-TUIChat-mange-22': '單獨禁言人員',
+  'TUIKit-TUIChat-mange-23': '刪除成員',
+  'TUIKit-TUIChat-mange-24': '確定從群聊中刪除該成員？',
+  'TUIKit-TUIChat-mange-25': '確定從群聊中刪除所選成員？',
+  'TUIKit-TUIChat-mange-26': '暫無公告',
+  'TUIKit-TUIChat-mange-27': '發布',
+  'TUIKit-TUIChat-mange-28': '編輯',
+  'TUIKit-TUIChat-mange-29': '群名稱',
+  'TUIKit-TUIChat-mange-30': '查看更多',
+  'TUIKit-TUIChat-mange-31': '管理員',
+  'TUIKit-TUIChat-mange-32': '群主',
+  'TUIKit-TUIChat-mange-33': '我',
+  'TUIKit-TUIChat-mange-34': '添加成員',
+  'TUIKit-TUIChat-mange-35': '新增管理員',
+  'TUIKit-TUIChat-mange-36': '移除管理員',
+  'TUIKit-TUIChat-mange-37': '新增禁言用戶',
+  'TUIKit-TUIChat-mange-38': '移除禁言用戶',
+  'TUIKit-TUIContact-01': '群聊通知',
+  'TUIKit-TUIContact-02': '系統通知',
+  'TUIKit-TUIContact-03': '我的群聊',
+  'TUIKit-TUIContact-04': '輸入groupID搜索',
+  'TUIKit-TUIContact-05': '群名稱',
+  'TUIKit-TUIContact-06': '群ID',
+  'TUIKit-TUIContact-07': '加入群聊',
+  'TUIKit-TUIContact-08': '解散群聊',
+  'TUIKit-TUIContact-09': '退出群聊',
+  'TUIKit-TUIContact-10': '群類型',
+  'TUIKit-TUIContact-11': '請填寫驗證信息',
+  'TUIKit-TUIContact-12': '申請加入',
+  'TUIKit-TUIContact-13': '已申請',
+  'TUIKit-TUIContact-14': '接受',
+  'TUIKit-TUIContact-15': '拒絕',
+  'TUIKit-TUIContact-16': '已處理',
+  'TUIKit-TUIConversation-01': '發起單人/多人會話',
+  'TUIKit-TUIConversation-02': '請輸入userID',
+  'TUIKit-TUIConversation-03': '刪除會話',
+  'TUIKit-TUIConversation-04': '系統通知',
+  'TUIKit-TUIConversation-05': '發起多人會話（群聊）',
+  'TUIKit-TUIConversation-06': '群頭像',
+  'TUIKit-TUIConversation-07': '群名稱',
+  'TUIKit-TUIConversation-08': '群ID',
+  'TUIKit-TUIConversation-09': '群類型',
+  'TUIKit-TUIConversation-10': '選填',
+  'TUIKit-TUIConversation-11': '取消',
+  'TUIKit-TUIConversation-12': '創建',
+  'TUIKit-TUIConversation-13': '類似普通微信群，創建後僅支持已在群內的好友邀請加群，且無需被邀請方同意或群主審批。詳見產品文檔',
+  'TUIKit-TUIConversation-14': '類似 QQ 群，創建後群主可以指定群管理員，用戶搜索群 ID 發起加群申請後，需要群主或管理員審批通過才能入群。詳見產品文檔',
+  'TUIKit-TUIConversation-15':
+    '創建後可以隨意進出，且支持查看入群前消息；適合用於音視頻會議場景、在線教育場景等與實時音視頻產品結合的場景。詳見產品文檔',
+  'TUIKit-TUIConversation-16': '創建後可以隨意進出，沒有群成員數量上限，但不支持歷史消息存儲；適合與直播產品結合，用於彈幕聊天場景。詳見產品文檔',
+  'TUIKit-TUIProfile-01': '資料設置',
+  'TUIKit-TUIProfile-02': '頭像',
+  'TUIKit-TUIProfile-03': '昵稱',
+  'TUIKit-TUIProfile-04': '賬號',
+  'TUIKit-TUIProfile-05': '個性簽名',
+  'TUIKit-TUIProfile-06': '性別',
+  'TUIKit-TUIProfile-07': '男',
+  'TUIKit-TUIProfile-08': '女',
+  'TUIKit-TUIProfile-09': '不顯示',
+  'TUIKit-TUIProfile-10': '出生年月',
+  'TUIKit-TUIProfile-11': '取消',
+  'TUIKit-TUIProfile-12': '保存',
+  'TUIKit-time-01': '週',
+  'TUIKit-time-02': '天',
+  'TUIKit-time-03': '小時',
+  'TUIKit-time-04': '分鐘',
+  'TUIKit-time-05': '剛剛',
+  'TUIKit-time-06': '前',
+  'TUIKit-message-tip-01': '群成員',
+  'TUIKit-message-tip-02': '加入群組',
+  'TUIKit-message-tip-03': '退出群組',
+  'TUIKit-message-tip-04': '被',
+  'TUIKit-message-tip-05': '踢出群組',
+  'TUIKit-message-tip-06': '成為管理員',
+  'TUIKit-message-tip-07': '被撤銷管理員',
+  'TUIKit-message-tip-08': '被禁言',
+  'TUIKit-message-tip-09': '被取消禁言',
+  'TUIKit-message-tip-10': '群提示消息',
+  'TUIKit-message-tip-11': '管理員',
+  'TUIKit-message-tip-12': '開啟全員禁言',
+  'TUIKit-message-tip-13': '取消全員禁言',
+  'TUIKit-message-tip-14': '成為新的群主',
+  'TUIKit-message-tip-15': '修改群名為',
+  'TUIKit-message-tip-16': '發布新公告',
+  'TUIKit-message-tip-17': '申請加入群組',
+  'TUIKit-message-tip-18': '成功加入群組',
+  'TUIKit-message-tip-19': '被拒絕',
+  'TUIKit-message-tip-20': '你被管理員',
+  'TUIKit-message-tip-21': '群',
+  'TUIKit-message-tip-22': '解散',
+  'TUIKit-message-tip-23': '創建群',
+  'TUIKit-message-tip-24': '邀請你加群',
+  'TUIKit-message-tip-25': '你退出群組',
+  'TUIKit-message-tip-26': '你被',
+  'TUIKit-message-tip-27': '設置為群',
+  'TUIKit-message-tip-28': '的管理員',
+  'TUIKit-message-tip-29': '撤銷群',
+  'TUIKit-message-tip-30': '的管理員身份',
+  'TUIKit-message-tip-31': '同意加群',
+  'TUIKit-message-tip-32': '拒接加群',
+  'TUIKit-message-tip-33': '自定義群系統通知',
+  'TUIKit-message-custom-01': '自定義消息',
+  'TUIKit-message-custom-02': '通話時長',
+  'TUIKit-message-custom-03': '結束群聊',
+  'TUIKit-message-custom-04': '切換語音通話',
+  'TUIKit-message-custom-05': '切換視頻通話',
+  'TUIKit-message-custom-06': '發起通話',
+  'TUIKit-message-custom-07': '取消通話',
+  'TUIKit-message-custom-08': '已接聽',
+  'TUIKit-message-custom-09': '拒絕通話',
+  'TUIKit-message-custom-10': '無應答',
+  'TUIKit-message-custom-11': '對本次服務評價',
+  'TUIKit-message-custom-12': '查看詳情>>',
+  'TUIKit-component-01': '取消',
+  'TUIKit-component-02': '完成',
+  'TUIKit-component-03': '已選中',
+  'TUIKit-component-04': '人',
+  'TUIKit-component-05': '保存',
+  'TUIKit-component-06': '發送',
+  'TUIKit-component-07': '系統通知'
+};
 
 export default translate;
diff --git a/src/TUIKit/locales/zh_tw/words.ts b/src/TUIKit/locales/zh_tw/words.ts
index 78e69e5..d222e7b 100644
--- a/src/TUIKit/locales/zh_tw/words.ts
+++ b/src/TUIKit/locales/zh_tw/words.ts
@@ -1,14 +1,14 @@
 const Words = {
-  "常用语-快捷回复工具": "常用語-快捷回覆工具",
-  "在吗？在吗？在吗？重要的话说三遍。": "在嗎？在嗎？在嗎？重要的話說三遍。",
-  "好久没聊天了，快来和我说说话～": "好久沒聊天了，快來和我說說話～",
-  "好的，就这么说定了。": "好的，就這麼說定了。",
-  "感恩的心，感谢有你。": "感恩的心，感謝有你。",
-  "糟糕！是心动的感觉！": "糟糕！是心動的感覺！",
-  "心疼地抱抱自己，我太难了！": "心疼地抱抱自己，我太難了！",
-  "没关系，别在意，事情过去就过去了。": "沒關係，別在意，事情過去就過去了。",
-  "早上好，今天也是让人期待的一天呢！": "早上好，今天也是讓人期待的一天呢！",
-  "熬夜有什么用，又没人陪你聊天，早点休息吧。": "熬夜有什麼用，又沒人陪你聊天，早點休息吧。"
-}
+  '常用语-快捷回复工具': '常用語-快捷回覆工具',
+  '在吗？在吗？在吗？重要的话说三遍。': '在嗎？在嗎？在嗎？重要的話說三遍。',
+  '好久没聊天了，快来和我说说话～': '好久沒聊天了，快來和我說說話～',
+  '好的，就这么说定了。': '好的，就這麼說定了。',
+  '感恩的心，感谢有你。': '感恩的心，感謝有你。',
+  '糟糕！是心动的感觉！': '糟糕！是心動的感覺！',
+  '心疼地抱抱自己，我太难了！': '心疼地抱抱自己，我太難了！',
+  '没关系，别在意，事情过去就过去了。': '沒關係，別在意，事情過去就過去了。',
+  '早上好，今天也是让人期待的一天呢！': '早上好，今天也是讓人期待的一天呢！',
+  '熬夜有什么用，又没人陪你聊天，早点休息吧。': '熬夜有什麼用，又沒人陪你聊天，早點休息吧。'
+};
 
 export default Words;
diff --git a/src/TUIKit/plugins/plugin-components/index.ts b/src/TUIKit/plugins/plugin-components/index.ts
index 5d89b58..87a72eb 100644
--- a/src/TUIKit/plugins/plugin-components/index.ts
+++ b/src/TUIKit/plugins/plugin-components/index.ts
@@ -15,10 +15,7 @@ export function isCallMessage(message: IMessageModel): boolean {
 
 export function isRoomSignalingMessage(message: IMessageModel): boolean {
   const payloadData = JSONToObject(message?.payload?.data);
-  return (
-    payloadData?.businessID === 'ROOM_INVITE_ACTION'
-    || payloadData?.businessID === 'tuikit_engine_room'
-  );
+  return payloadData?.businessID === 'ROOM_INVITE_ACTION' || payloadData?.businessID === 'tuikit_engine_room';
 }
 
 export function isRoomCardMessage(message: IMessageModel): boolean {
@@ -28,10 +25,7 @@ export function isRoomCardMessage(message: IMessageModel): boolean {
 
 export function isPluginMessage(message: IMessageModel): boolean {
   return (
-    message.type === TUIChatEngine.TYPES.MSG_CUSTOM
-    && (isCallMessage(message)
-    || isCustomerServicePluginMessage(message as any)
-    || isRoomCardMessage(message)
-    || isRoomSignalingMessage(message))
+    message.type === TUIChatEngine.TYPES.MSG_CUSTOM &&
+    (isCallMessage(message) || isCustomerServicePluginMessage(message as any) || isRoomCardMessage(message) || isRoomSignalingMessage(message))
   );
 }
diff --git a/src/TUIKit/plugins/plugin-components/message-call/message-call-c2c.vue b/src/TUIKit/plugins/plugin-components/message-call/message-call-c2c.vue
index beccd1f..2450c2c 100644
--- a/src/TUIKit/plugins/plugin-components/message-call/message-call-c2c.vue
+++ b/src/TUIKit/plugins/plugin-components/message-call/message-call-c2c.vue
@@ -23,16 +23,16 @@ import OfflinePushInfoManager, { PUSH_SCENE } from '../../../components/TUIChat/
 const props = defineProps({
   message: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
   },
   signalingInfo: {
     type: Object,
-    default: () => ({}),
+    default: () => ({})
   },
   customContent: {
     type: Object,
-    default: () => ({}),
-  },
+    default: () => ({})
+  }
 });
 const TYPES = ref(TUIChatEngine.TYPES);
 const isCallMessage = computed(() => props.signalingInfo != null);
@@ -42,19 +42,19 @@ const callInfo = computed((): { type: number; icon: string } => {
     case 1:
       return {
         type: 1,
-        icon: callVoiceSVG,
+        icon: callVoiceSVG
       };
     case 2:
       return {
         type: 2,
-        icon: callVideoSVG,
+        icon: callVideoSVG
       };
     default:
       break;
   }
   return {
     type: 0,
-    icon: '',
+    icon: ''
   };
 });
 const conversationType = computed(() => props.message?.conversationType);
@@ -70,9 +70,9 @@ const callAgain = () => {
         userIDList: [userID],
         type: callInfo?.value?.type,
         callParams: {
-          offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(PUSH_SCENE.CALL),
-        },
-      },
+          offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(PUSH_SCENE.CALL)
+        }
+      }
     });
   }
 };
diff --git a/src/TUIKit/plugins/plugin-components/message-call/message-call-group.vue b/src/TUIKit/plugins/plugin-components/message-call/message-call-group.vue
index b7f9ff5..1547306 100644
--- a/src/TUIKit/plugins/plugin-components/message-call/message-call-group.vue
+++ b/src/TUIKit/plugins/plugin-components/message-call/message-call-group.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="isCallMessage && conversationType === TYPES.CONV_GROUP"
-    :class="{ 'blink-text': isBlink }"
-  >
+  <div v-if="isCallMessage && conversationType === TYPES.CONV_GROUP" :class="{ 'blink-text': isBlink }">
     {{ custom }}
   </div>
 </template>
@@ -22,7 +19,7 @@ const props = withDefaults(defineProps<IProps>(), {
   message: () => ({}) as IMessageModel,
   signalingInfo: () => ({}),
   customContent: () => ({}),
-  blinkMessageIDList: () => [],
+  blinkMessageIDList: () => []
 });
 
 const TYPES = TUIChatEngine.TYPES;
diff --git a/src/TUIKit/plugins/plugin-components/message-customer/index.ts b/src/TUIKit/plugins/plugin-components/message-customer/index.ts
index b5e7d02..45eaa0f 100644
--- a/src/TUIKit/plugins/plugin-components/message-customer/index.ts
+++ b/src/TUIKit/plugins/plugin-components/message-customer/index.ts
@@ -1,5 +1,2 @@
-import {
-  isCustomerServicePluginMessage,
-  isMessageInvisible as isCustomServiceMessageInvisible,
-} from '@tencentcloud/tui-customer-service-plugin';
+import { isCustomerServicePluginMessage, isMessageInvisible as isCustomServiceMessageInvisible } from '@tencentcloud/tui-customer-service-plugin';
 export { isCustomerServicePluginMessage, isCustomServiceMessageInvisible };
diff --git a/src/TUIKit/plugins/plugin-components/message-customer/message-customer-service.vue b/src/TUIKit/plugins/plugin-components/message-customer/message-customer-service.vue
index c474118..ec75ab4 100644
--- a/src/TUIKit/plugins/plugin-components/message-customer/message-customer-service.vue
+++ b/src/TUIKit/plugins/plugin-components/message-customer/message-customer-service.vue
@@ -8,7 +8,7 @@ interface IProps {
   message: IMessageModel;
 }
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/TUIKit/plugins/plugin-components/message-plugin-layout.vue b/src/TUIKit/plugins/plugin-components/message-plugin-layout.vue
index fa8dfde..cd7eeca 100644
--- a/src/TUIKit/plugins/plugin-components/message-plugin-layout.vue
+++ b/src/TUIKit/plugins/plugin-components/message-plugin-layout.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="message-plugin">
     <!-- The following is displayed in the form of messageTip -->
-    <div
-      v-if="props.showStyle === 'tip'"
-      class="message-plugin-tip"
-    >
+    <div v-if="props.showStyle === 'tip'" class="message-plugin-tip">
       <slot name="messageTip" />
     </div>
     <!-- The following is displayed in the form of messageBubble -->
@@ -26,16 +23,10 @@
       >
         <!-- web message-bubble is a named slot, content area slotName is messageElement -->
         <template #messageElement>
-          <slot
-            v-if="!isUniFrameWork"
-            name="messageBubble"
-          />
+          <slot v-if="!isUniFrameWork" name="messageBubble" />
         </template>
         <!-- uni-app message-bubble is an anonymous slot, no slotName -->
-        <slot
-          v-if="isUniFrameWork"
-          name="messageBubble"
-        />
+        <slot v-if="isUniFrameWork" name="messageBubble" />
       </MessageBubble>
     </div>
   </div>
@@ -55,10 +46,10 @@ interface IProps {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel,
   showStyle: '',
   bubbleClassNameList: () => [] as string[],
-  blinkMessageIDList: () => [] as string[],
+  blinkMessageIDList: () => [] as string[]
 });
 
 const emits = defineEmits(['resendMessage', 'handleToggleMessageItem', 'handleH5LongPress']);
diff --git a/src/TUIKit/plugins/plugin-components/message-plugin.vue b/src/TUIKit/plugins/plugin-components/message-plugin.vue
index 5953e47..4454f31 100644
--- a/src/TUIKit/plugins/plugin-components/message-plugin.vue
+++ b/src/TUIKit/plugins/plugin-components/message-plugin.vue
@@ -2,7 +2,7 @@
   <MessagePluginLayout
     :message="props.message"
     :showStyle="pluginMessageType.showStyle"
-    :bubbleClassNameList="[pluginMessageType.pluginType === 'room' ? 'message-bubble-room':'']"
+    :bubbleClassNameList="[pluginMessageType.pluginType === 'room' ? 'message-bubble-room' : '']"
     @resendMessage="resendMessage"
     @handleToggleMessageItem="handleToggleMessageItem"
     @handleH5LongPress="handleH5LongPress"
@@ -22,14 +22,8 @@
         :signalingInfo="messageSignalingInfo"
         :customContent="messageCustomContent"
       />
-      <MessageCustomerService
-        v-if="pluginMessageType.pluginType === 'customer'"
-        :message="props.message"
-      />
-      <MessageRoom
-        v-if="pluginMessageType.pluginType === 'room'"
-        :message="props.message"
-      />
+      <MessageCustomerService v-if="pluginMessageType.pluginType === 'customer'" :message="props.message" />
+      <MessageRoom v-if="pluginMessageType.pluginType === 'room'" :message="props.message" />
     </template>
   </MessagePluginLayout>
 </template>
@@ -38,10 +32,7 @@
 import { computed } from '../../adapter-vue';
 import { TUIStore } from '@tencentcloud/chat-uikit-engine';
 import TUIChatEngine, { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import {
-  isCustomerServicePluginMessage,
-  isCustomServiceMessageInvisible,
-} from './message-customer/index';
+import { isCustomerServicePluginMessage, isCustomServiceMessageInvisible } from './message-customer/index';
 import { isCallMessage, isRoomCardMessage } from './index';
 import MessagePluginLayout from './message-plugin-layout.vue';
 import MessageCallGroup from './message-call/message-call-group.vue';
@@ -58,8 +49,8 @@ interface IProps {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
-  blinkMessageIDList: () => [] as string[],
+  message: () => ({}) as IMessageModel,
+  blinkMessageIDList: () => [] as string[]
 });
 
 const emits = defineEmits(['resendMessage', 'handleToggleMessageItem', 'handleH5LongPress']);
@@ -72,18 +63,17 @@ const pluginMessageType = computed<{ pluginType: string; showStyle: string }>(()
   if (isCallMessage(messageModel.value)) {
     typeObj = {
       pluginType: 'call',
-      showStyle:
-        messageModel.value?.conversationType === TUIChatEngine.TYPES.CONV_GROUP ? 'tip' : 'bubble',
+      showStyle: messageModel.value?.conversationType === TUIChatEngine.TYPES.CONV_GROUP ? 'tip' : 'bubble'
     };
   } else if (isRoomCardMessage(messageModel.value)) {
     typeObj = {
       pluginType: 'room',
-      showStyle: 'bubble',
+      showStyle: 'bubble'
     };
   } else if (isCustomerServicePluginMessage(messageModel.value)) {
     typeObj = {
       pluginType: 'customer',
-      showStyle: isCustomServiceMessageInvisible(messageModel.value) ? '' : 'bubble',
+      showStyle: isCustomServiceMessageInvisible(messageModel.value) ? '' : 'bubble'
     };
   }
   return typeObj;
diff --git a/src/TUIKit/plugins/plugin-components/message-room/message-room-default.vue b/src/TUIKit/plugins/plugin-components/message-room/message-room-default.vue
index 556cd8e..6d28947 100644
--- a/src/TUIKit/plugins/plugin-components/message-room/message-room-default.vue
+++ b/src/TUIKit/plugins/plugin-components/message-room/message-room-default.vue
@@ -1,12 +1,6 @@
 <template>
-  <div
-    :class="[
-      'room-default',
-      isUniFrameWork && 'room-default-uni',
-      props.message.flow === 'in' ? 'room-default-in' : 'room-default-out',
-    ]"
-  >
-    {{ TUITranslateService.t("message.custom.自定义消息") }}
+  <div :class="['room-default', isUniFrameWork && 'room-default-uni', props.message.flow === 'in' ? 'room-default-in' : 'room-default-out']">
+    {{ TUITranslateService.t('message.custom.自定义消息') }}
   </div>
 </template>
 <script setup lang="ts">
@@ -17,7 +11,7 @@ interface IProps {
   message: IMessageModel;
 }
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel
 });
 </script>
 <style lang="scss" scoped>
@@ -25,7 +19,7 @@ const props = withDefaults(defineProps<IProps>(), {
   padding: 12px;
   font-size: 14px;
 
-  &-uni{
+  &-uni {
     padding: 0;
   }
 
diff --git a/src/TUIKit/plugins/plugin-components/message-room/message-room.vue b/src/TUIKit/plugins/plugin-components/message-room/message-room.vue
index 85e7a2c..68e516f 100644
--- a/src/TUIKit/plugins/plugin-components/message-room/message-room.vue
+++ b/src/TUIKit/plugins/plugin-components/message-room/message-room.vue
@@ -9,9 +9,9 @@ import { RoomMessageCard } from '@tencentcloud/roomkit-web-vue3';
 interface IProps {
   message: IMessageModel;
 }
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
+  message: () => ({}) as IMessageModel
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/TUIKit/server.ts b/src/TUIKit/server.ts
index e25a4dd..d0d2c48 100644
--- a/src/TUIKit/server.ts
+++ b/src/TUIKit/server.ts
@@ -89,7 +89,7 @@ export default class TUIChatKit {
       chat,
       SDKAppID,
       userID,
-      userSig,
+      userSig
     });
     this.chat = chat;
     return this.TUIChatEngine;
@@ -105,9 +105,7 @@ export default class TUIChatKit {
    */
   public component(componentName: string, component: any, env?: any) {
     if (this?.TUIComponents?.componentName) {
-      console.warn(
-        `[TUIChatKit]: ${this?.TUIComponents?.componentName} component has already been applied to target TUIChatEngine.`,
-      );
+      console.warn(`[TUIChatKit]: ${this?.TUIComponents?.componentName} component has already been applied to target TUIChatEngine.`);
     } else {
       this.TUIComponents[componentName] = component;
       env?.component(componentName, component);
@@ -145,15 +143,11 @@ export default class TUIChatKit {
    */
   public use(TUIPluginName: string, TUIPlugin: any, options?: any) {
     if (!this.TUICore) {
-      console.warn(
-        `[TUIChatKit]: Plugin ${this.TUIPlugins[TUIPluginName]} can't be used before init.`,
-      );
+      console.warn(`[TUIChatKit]: Plugin ${this.TUIPlugins[TUIPluginName]} can't be used before init.`);
       return;
     }
     if (this.TUIPlugins[TUIPluginName]) {
-      console.warn(
-        `[TUIChatKit]: Plugin ${this.TUIPlugins[TUIPluginName]} has already been applied to target TUIChatEngine.`,
-      );
+      console.warn(`[TUIChatKit]: Plugin ${this.TUIPlugins[TUIPluginName]} has already been applied to target TUIChatEngine.`);
     } else if (TUIPlugin && isFunction(TUIPlugin?.plugin)) {
       this.TUIPlugins[TUIPluginName] = TUIPlugin;
       TUIPlugin?.plugin(this, options);
@@ -162,10 +156,10 @@ export default class TUIChatKit {
       TUIPlugin(this, options);
     } else {
       console.warn(
-        '[TUIChatKit]: A plugin must either be a function or an object with an "plugin" '
-        + 'function.'
-        + this.TUIPlugins[TUIPluginName]
-        + 'does not comply with the above rules.',
+        '[TUIChatKit]: A plugin must either be a function or an object with an "plugin" ' +
+          'function.' +
+          this.TUIPlugins[TUIPluginName] +
+          'does not comply with the above rules.'
       );
     }
     return this.TUIChatEngine;
diff --git a/src/TUIKit/utils/documentLink.ts b/src/TUIKit/utils/documentLink.ts
index ea9d788..811627e 100644
--- a/src/TUIKit/utils/documentLink.ts
+++ b/src/TUIKit/utils/documentLink.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/v3/zh-cn/SDK.html#createCustomMessage',
+    url: 'https://web.sdk.qcloud.com/im/doc/v3/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;
\ No newline at end of file
+export default Link;
diff --git a/src/TUIKit/utils/enableSampleTaskStatus.ts b/src/TUIKit/utils/enableSampleTaskStatus.ts
index 68861e9..d0343a8 100644
--- a/src/TUIKit/utils/enableSampleTaskStatus.ts
+++ b/src/TUIKit/utils/enableSampleTaskStatus.ts
@@ -1,8 +1,8 @@
-import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
 export function enableSampleTaskStatus(taskKey: string) {
-  const tasks = TUIStore.getData(StoreName.APP, "tasks");
+  const tasks = TUIStore.getData(StoreName.APP, 'tasks');
   if (taskKey in tasks && !tasks[taskKey]) {
     tasks[taskKey] = true;
-    TUIStore.update(StoreName.APP, "tasks", tasks);
+    TUIStore.update(StoreName.APP, 'tasks', tasks);
   }
 }
diff --git a/src/TUIKit/utils/riseInput.ts b/src/TUIKit/utils/riseInput.ts
index 8014c8c..68811ca 100644
--- a/src/TUIKit/utils/riseInput.ts
+++ b/src/TUIKit/utils/riseInput.ts
@@ -19,7 +19,6 @@ export default function riseInput(input: HTMLElement, target?: HTMLElement) {
   let scrollTimer: ReturnType<typeof setTimeout>;
 
   if (!target) {
-    // eslint-disable-next-line no-param-reassign
     target = input;
   }
 
diff --git a/src/TUIKit/utils/type-check.ts b/src/TUIKit/utils/type-check.ts
index 0969e4e..d847ac0 100644
--- a/src/TUIKit/utils/type-check.ts
+++ b/src/TUIKit/utils/type-check.ts
@@ -9,18 +9,14 @@ export const isFunction = (val: any) => typeof val === 'function';
 export const isString = (val: any) => typeof val === 'string';
 export const isSymbol = (val: any) => typeof val === 'symbol';
 export const isObject = (val: any) => val !== null && typeof val === 'object';
-export const isPromise = (val: any) =>
-  isObject(val) && isFunction(val.then) && isFunction(val.catch);
+export const isPromise = (val: any) => isObject(val) && isFunction(val.then) && isFunction(val.catch);
 // Determine whether it is url
 export const isUrl = (url: string) => {
-  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(
-    url,
-  );
+  return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(url);
 };
 
 // Determine if it is a JSON string
 export const isJSON = (str: string) => {
-  // eslint-disable-next-line no-useless-escape
   if (typeof str === 'string') {
     try {
       const data = JSON.parse(str);
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index 684ae6a..a6765a3 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -19,7 +19,7 @@
       </template>
       <el-empty v-else :description="'消息为空'"></el-empty>
     </div>
-    <div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div>
+    <!--    <div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div>-->
   </div>
 </template>
 
diff --git a/src/views/ums/withdrawManage/index.vue b/src/views/ums/withdrawManage/index.vue
index 90cbb85..1cc9044 100644
--- a/src/views/ums/withdrawManage/index.vue
+++ b/src/views/ums/withdrawManage/index.vue
@@ -124,13 +124,11 @@
     </el-dialog>
   </div>
 </template>
-
 <script>
-import { getUserWithdrawList, listUmsMember, setWithdrawStatus } from '@/api/ums/member';
-import { useUserStore } from '@/store/modules/user';
+import { getUserWithdrawList, setWithdrawStatus } from '@/api/ums/member';
 
 export default {
-  name: 'UmsMember',
+  name: 'UmsWithdrawManage',
   data() {
     return {
       // 用户提现记录