完善分享功能 console.log(item, '==2222222=')

2026-01-28 17:54:45 +08:00
parent 5d0700ee70
commit 990f2df972
12 changed files with 1368 additions and 743 deletions
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-bubble.vue
@@ -177,7 +177,7 @@

  const props = withDefaults(defineProps<IProps>(), {
    isAudioPlayed: false,
-    messageItem: () => ({} as IMessageModel),
+    messageItem: () => ({}) as IMessageModel,
    content: () => ({}),
    blinkMessageIDList: () => [],
    classNameList: () => [],
@@ -411,7 +411,7 @@
          }

          .content-out {
-            background: #00D9C5;
+            background: #00d9c5;
            border-radius: 10px 0 10px 10px;
          }

--- a/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-quote/index.vue
@@ -3,197 +3,233 @@
    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 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-lite';
-import { getBoundingClientRect, getScrollInfo } from '@tencentcloud/universal-api';
-import { isUniFrameWork } from '../../../../../utils/env';
-import { Toast, TOAST_TYPE } from '../../../../../components/common/Toast/index';
-import { ICloudCustomData, IQuoteContent, MessageQuoteTypeEnum } from './interface.ts';
-import { transformTextWithKeysToEmojiNames } from '../../../emoji-config';
+  import { computed, ref, onMounted } from '../../../../../adapter-vue'
+  import {
+    TUIStore,
+    StoreName,
+    IMessageModel,
+    TUITranslateService
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import {
+    getBoundingClientRect,
+    getScrollInfo
+  } from '@tencentcloud/universal-api'
+  import { isUniFrameWork } from '../../../../../utils/env'
+  import {
+    Toast,
+    TOAST_TYPE
+  } from '../../../../../components/common/Toast/index'
+  import {
+    ICloudCustomData,
+    IQuoteContent,
+    MessageQuoteTypeEnum
+  } from './interface.ts'
+  import { transformTextWithKeysToEmojiNames } from '../../../emoji-config'

-export interface IProps {
-  message: IMessageModel;
-}
-
-export interface IEmits {
-  (e: 'scrollTo', scrollHeight: number): void;
-  (e: 'blinkMessage', messageID: string | undefined): void;
-}
-
-const emits = defineEmits<IEmits>();
-const props = withDefaults(defineProps<IProps>(), {
-  message: () => ({} as IMessageModel),
-});
-
-let selfAddValue = 0;
-const messageQuoteText = ref<string>('');
-const hasQuoteContent = ref(false);
-const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent);
-
-const isMessageRevoked = computed<boolean>(() => {
-  try {
-    const cloudCustomData: ICloudCustomData = JSON.parse(props.message?.cloudCustomData || '{}');
-    const quotedMessageModel = TUIStore.getMessageModel(cloudCustomData.messageReply.messageID);
-    return quotedMessageModel?.isRevoked;
-  } catch (error) {
-    return true;
+  export interface IProps {
+    message: IMessageModel
  }
-});

-onMounted(() => {
-  try {
-    const cloudCustomData: ICloudCustomData = JSON.parse(props.message?.cloudCustomData || '{}');
-    hasQuoteContent.value = Boolean(cloudCustomData.messageReply);
-    if (hasQuoteContent.value) {
-      messageQuoteContent.value = cloudCustomData.messageReply;
-      messageQuoteText.value = performQuoteContent(messageQuoteContent.value);
-    }
-  } catch (error) {
-    hasQuoteContent.value = false;
+  export interface IEmits {
+    (e: 'scrollTo', scrollHeight: number): void
+    (e: 'blinkMessage', messageID: string | undefined): void
  }
-});

-function performQuoteContent(params: IQuoteContent) {
-  let messageKey: string = '';
-  let quoteContent: string = '';
-  switch (params.messageType) {
-    case MessageQuoteTypeEnum.TYPE_TEXT:
-      messageKey = '[文本]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_CUSTOM:
-      messageKey = '[自定义消息]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_IMAGE:
-      messageKey = '[图片]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_SOUND:
-      messageKey = '[音频]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_VIDEO:
-      messageKey = '[视频]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_FILE:
-      messageKey = '[文件]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_LOCATION:
-      messageKey = '[地理位置]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_FACE:
-      messageKey = '[动画表情]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_GROUP_TIPS:
-      messageKey = '[群提示]';
-      break;
-    case MessageQuoteTypeEnum.TYPE_MERGER:
-      messageKey = '[聊天记录]';
-      break;
-    default:
-      messageKey = '[消息]';
-      break;
-  }
-  if (
-    [
-      MessageQuoteTypeEnum.TYPE_TEXT,
-      MessageQuoteTypeEnum.TYPE_MERGER,
-    ].includes(params.messageType)
-  ) {
-    quoteContent = params.messageAbstract;
-  }
-  return quoteContent ? quoteContent : TUITranslateService.t(`TUIChat.${messageKey}`);
-}
+  const emits = defineEmits<IEmits>()
+  const props = withDefaults(defineProps<IProps>(), {
+    message: () => ({}) as IMessageModel
+  })

-async function scrollToOriginalMessage() {
-  if (isMessageRevoked.value) {
-    return;
-  }
-  const originMessageID = messageQuoteContent.value?.messageID;
-  const currentMessageList = TUIStore.getData(StoreName.CHAT, 'messageList');
-  const isOriginalMessageInScreen = currentMessageList.some(msg => msg.ID === originMessageID);
-  if (originMessageID && isOriginalMessageInScreen) {
+  let selfAddValue = 0
+  const messageQuoteText = ref<string>('')
+  const hasQuoteContent = ref(false)
+  const messageQuoteContent = ref<IQuoteContent>({} as IQuoteContent)
+
+  const isMessageRevoked = computed<boolean>(() => {
    try {
-      const scrollViewRect = await getBoundingClientRect('#messageScrollList', 'messageList');
-      const originalMessageRect = await getBoundingClientRect('#tui-' + originMessageID, 'messageList');
-      const { scrollTop } = await getScrollInfo('#messageScrollList', 'messageList');
-      const finalScrollTop = originalMessageRect.top + scrollTop - scrollViewRect.top - (selfAddValue++ % 2);
-      const isNeedScroll = originalMessageRect.top < scrollViewRect.top;
-      if (!isUniFrameWork && window) {
-        const scrollView = document.getElementById('messageScrollList');
-        if (isNeedScroll && scrollView) {
-          scrollView.scrollTop = finalScrollTop;
-        }
-      } else if (isUniFrameWork && isNeedScroll) {
-        emits('scrollTo', finalScrollTop);
-      }
-      emits('blinkMessage', originMessageID);
+      const cloudCustomData: ICloudCustomData = JSON.parse(
+        props.message?.cloudCustomData || '{}'
+      )
+      const quotedMessageModel = TUIStore.getMessageModel(
+        cloudCustomData.messageReply.messageID
+      )
+      return quotedMessageModel?.isRevoked
    } catch (error) {
-      console.error(error);
+      return true
+    }
+  })
+
+  onMounted(() => {
+    try {
+      const cloudCustomData: ICloudCustomData = JSON.parse(
+        props.message?.cloudCustomData || '{}'
+      )
+
+      hasQuoteContent.value = Boolean(cloudCustomData.messageReply)
+
+      if (hasQuoteContent.value) {
+        messageQuoteContent.value = cloudCustomData.messageReply
+        messageQuoteText.value = performQuoteContent(
+          messageQuoteContent.value
+        )
+      }
+    } catch (error) {
+      hasQuoteContent.value = false
+    }
+  })
+
+  function performQuoteContent(params: IQuoteContent) {
+    let messageKey: string = ''
+    let quoteContent: string = ''
+
+    switch (params.messageType) {
+      case MessageQuoteTypeEnum.TYPE_TEXT:
+        messageKey = '[文本]'
+        break
+      case MessageQuoteTypeEnum.TYPE_CUSTOM:
+        messageKey = '[自定义消息]'
+        break
+      case MessageQuoteTypeEnum.TYPE_IMAGE:
+        messageKey = '[图片]'
+        break
+      case MessageQuoteTypeEnum.TYPE_SOUND:
+        messageKey = '[音频]'
+        break
+      case MessageQuoteTypeEnum.TYPE_VIDEO:
+        messageKey = '[视频]'
+        break
+      case MessageQuoteTypeEnum.TYPE_FILE:
+        messageKey = '[文件]'
+        break
+      case MessageQuoteTypeEnum.TYPE_LOCATION:
+        messageKey = '[地理位置]'
+        break
+      case MessageQuoteTypeEnum.TYPE_FACE:
+        messageKey = '[动画表情]'
+        break
+      case MessageQuoteTypeEnum.TYPE_GROUP_TIPS:
+        messageKey = '[群提示]'
+        break
+      case MessageQuoteTypeEnum.TYPE_MERGER:
+        messageKey = '[聊天记录]'
+        break
+      default:
+        messageKey = '[消息]'
+        break
+    }
+    if (
+      [
+        MessageQuoteTypeEnum.TYPE_TEXT,
+        MessageQuoteTypeEnum.TYPE_MERGER
+      ].includes(params.messageType)
+    ) {
+      quoteContent = params.messageAbstract
+    }
+    return quoteContent
+      ? quoteContent
+      : TUITranslateService.t(`TUIChat.${messageKey}`)
+  }
+
+  async function scrollToOriginalMessage() {
+    if (isMessageRevoked.value) {
+      return
+    }
+    const originMessageID = messageQuoteContent.value?.messageID
+    const currentMessageList = TUIStore.getData(
+      StoreName.CHAT,
+      'messageList'
+    )
+    const isOriginalMessageInScreen = currentMessageList.some(
+      msg => msg.ID === originMessageID
+    )
+    if (originMessageID && isOriginalMessageInScreen) {
+      try {
+        const scrollViewRect = await getBoundingClientRect(
+          '#messageScrollList',
+          'messageList'
+        )
+        const originalMessageRect = await getBoundingClientRect(
+          '#tui-' + originMessageID,
+          'messageList'
+        )
+        const { scrollTop } = await getScrollInfo(
+          '#messageScrollList',
+          'messageList'
+        )
+        const finalScrollTop =
+          originalMessageRect.top +
+          scrollTop -
+          scrollViewRect.top -
+          (selfAddValue++ % 2)
+        const isNeedScroll = originalMessageRect.top < scrollViewRect.top
+        if (!isUniFrameWork && window) {
+          const scrollView = document.getElementById('messageScrollList')
+          if (isNeedScroll && scrollView) {
+            scrollView.scrollTop = finalScrollTop
+          }
+        } else if (isUniFrameWork && isNeedScroll) {
+          emits('scrollTo', finalScrollTop)
+        }
+        emits('blinkMessage', originMessageID)
+      } catch (error) {
+        console.error(error)
+      }
+    } else {
+      Toast({
+        message: TUITranslateService.t('TUIChat.无法定位到原消息'),
+        type: TOAST_TYPE.WARNING
+      })
    }
-  } else {
-    Toast({
-      message: TUITranslateService.t('TUIChat.无法定位到原消息'),
-      type: TOAST_TYPE.WARNING,
-    });
  }
-}
 </script>

 <style lang="scss" scoped>
-.reference-content {
-  max-width: 272px;
-  margin-top: 4px;
-  margin-left: 44px;
-  padding: 12px;
-  font-size: 12px;
-  color: #666;
-  word-wrap: break-word;
-  word-break: break-all;
-  background-color: #fbfbfb;
-  border-radius: 8px;
-  line-height: 16.8px;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
+  .reference-content {
+    max-width: 272px;
+    margin-top: 4px;
+    margin-left: 44px;
+    padding: 12px;
+    font-size: 12px;
+    color: #666;
+    word-wrap: break-word;
+    word-break: break-all;
+    background-color: #fbfbfb;
+    border-radius: 8px;
+    line-height: 16.8px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }

-.reverse.reference-content {
+  .reverse.reference-content {
    margin-right: 44px;
    margin-left: auto;
-}
+  }

-.revoked-text {
-  color: #999;
-}
+  .revoked-text {
+    color: #999;
+  }

-.max-double-line {
-  word-break: break-all;
-  overflow: hidden;
-  display: -webkit-box;
-  max-height: 33px;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
+  .max-double-line {
+    word-break: break-all;
+    overflow: hidden;
+    display: -webkit-box;
+    max-height: 33px;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 </style>
--- a/TUIKit/components/TUIChat/message-list/message-tool/index.vue
+++ b/TUIKit/components/TUIChat/message-list/message-tool/index.vue
@@ -4,10 +4,7 @@
    ref="messageToolDom"
    :class="['dialog-item', !isPC ? 'dialog-item-h5' : 'dialog-item-web']"
  >
-    <slot
-      v-if="featureConfig.EmojiReaction"
-      name="TUIEmojiPlugin"
-    />
+    <slot v-if="featureConfig.EmojiReaction" name="TUIEmojiPlugin" />
    <div
      class="dialog-item-list"
      :class="!isPC ? 'dialog-item-list-h5' : 'dialog-item-list-web'"
@@ -20,10 +17,7 @@
          @click="getFunction(index)"
          @mousedown="beforeCopy(item.key)"
        >
-          <Icon
-            :file="item.iconUrl"
-            :size="'15px'"
-          />
+          <Icon :file="item.iconUrl" :size="'15px'" />
          <span class="list-item-text">{{ item.text }}</span>
        </div>
      </template>
@@ -32,422 +26,505 @@
 </template>

 <script lang="ts" setup>
-import TUIChatEngine, {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-  IMessageModel,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import { TUIGlobal } from '@tencentcloud/universal-api';
-import { ref, watchEffect, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
-import Icon from '../../../common/Icon.vue';
-import { Toast, TOAST_TYPE } from '../../../common/Toast/index';
-import delIcon from '../../../../assets/icon/msg-del.svg';
-import copyIcon from '../../../../assets/icon/msg-copy.svg';
-import quoteIcon from '../../../../assets/icon/msg-quote.svg';
-import revokeIcon from '../../../../assets/icon/msg-revoke.svg';
-import forwardIcon from '../../../../assets/icon/msg-forward.svg';
-import translateIcon from '../../../../assets/icon/translate.svg';
-import multipleSelectIcon from '../../../../assets/icon/multiple-select.svg';
-import convertText from '../../../../assets/icon/convertText_zh.svg';
-import { enableSampleTaskStatus } from '../../../../utils/enableSampleTaskStatus';
-import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
-import { isH5, isPC, isUniFrameWork } from '../../../../utils/env';
-import { ITranslateInfo, IConvertInfo } from '../../../../interface';
-import TUIChatConfig from '../../config';
-import AiRobotManager from '../../aiRobotManager';
-
-// uni-app conditional compilation will not run the following code
-// #ifndef APP || APP-PLUS || MP || H5
-import CopyManager from '../../utils/copy';
-// #endif
-
-interface IProps {
-  messageItem: IMessageModel;
-  isMultipleSelectMode: boolean;
-}
-
-interface IEmits {
-  (key: 'toggleMultipleSelectMode'): void;
-}
-
-const emits = defineEmits<IEmits>();
-const props = withDefaults(defineProps<IProps>(), {
-  isMultipleSelectMode: false,
-  messageItem: () => ({}) as IMessageModel,
-});
-const featureConfig = TUIChatConfig.getFeatureConfig();
-
-const TYPES = TUIChatEngine.TYPES;
-
-const actionItems = ref([
-  {
-    key: 'open',
-    text: TUITranslateService.t('TUIChat.打开'),
-    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);
-    },
-    clickEvent: openMessage,
-  },
-  {
-    key: 'copy',
-    text: TUITranslateService.t('TUIChat.复制'),
-    iconUrl: copyIcon,
-    renderCondition() {
-      if (!featureConfig.CopyMessage || !message.value) return false;
-      const isAiRobotTextMessage = AiRobotManager.isRobotMessage(message.value);
-      return message.value.type === TYPES.MSG_TEXT || isAiRobotTextMessage;
-    },
-    clickEvent: copyMessage,
-  },
-  {
-    key: 'revoke',
-    text: TUITranslateService.t('TUIChat.撤回'),
-    iconUrl: revokeIcon,
-    renderCondition() {
-      if (!featureConfig.RevokeMessage || !message.value) return false;
-      return message.value.flow === 'out' && message.value.status === 'success';
-    },
-    clickEvent: revokeMessage,
-  },
-  {
-    key: 'delete',
-    text: TUITranslateService.t('TUIChat.删除'),
-    iconUrl: delIcon,
-    renderCondition() {
-      if (!featureConfig.DeleteMessage || !message.value) return false;
-      return message.value.status === 'success';
-    },
-    clickEvent: deleteMessage,
-  },
-  {
-    key: 'forward',
-    text: TUITranslateService.t('TUIChat.转发'),
-    iconUrl: forwardIcon,
-    renderCondition() {
-      if (!featureConfig.ForwardMessage || !message.value) return false;
-      return message.value.status === 'success';
-    },
-    clickEvent: forwardSingleMessage,
-  },
-  {
-    key: 'quote',
-    text: TUITranslateService.t('TUIChat.引用'),
-    iconUrl: quoteIcon,
-    renderCondition() {
-      if (!featureConfig.QuoteMessage || !message.value) return false;
-      const _message = TUIStore.getMessageModel(message.value.ID);
-      return message.value.status === 'success' && !_message.getSignalingInfo();
-    },
-    clickEvent: quoteMessage,
-  },
-  {
-    key: 'translate',
-    text: TUITranslateService.t('TUIChat.翻译'),
-    visible: false,
-    iconUrl: translateIcon,
-    renderCondition() {
-      if (!featureConfig.TranslateMessage || !message.value) return false;
-      return message.value.status === 'success' && message.value.type === TYPES.MSG_TEXT;
-    },
-    clickEvent: translateMessage,
-  },
-  {
-    key: 'convert',
-    text: TUITranslateService.t('TUIChat.转文字'),
-    visible: false,
-    iconUrl: convertText,
-    renderCondition() {
-      if (!featureConfig.VoiceToText || !message.value) return false;
-      return message.value.status === 'success' && message.value.type === TYPES.MSG_AUDIO;
-    },
-    clickEvent: convertVoiceToText,
-  },
-  {
-    key: 'multi-select',
-    text: TUITranslateService.t('TUIChat.多选'),
-    iconUrl: multipleSelectIcon,
-    renderCondition() {
-      if (!featureConfig.MultiSelection || !message.value) return false;
-      return message.value.status === 'success';
-    },
-    clickEvent: multipleSelectMessage,
-  },
-]);
-
-const message = ref<IMessageModel>();
-const messageToolDom = ref<HTMLElement>();
-
-onMounted(() => {
-  TUIStore.watch(StoreName.CHAT, {
-    translateTextInfo: onMessageTranslationInfoUpdated,
-    voiceToTextInfo: onMessageConvertInfoUpdated,
-  });
-});
-
-onUnmounted(() => {
-  TUIStore.unwatch(StoreName.CHAT, {
-    translateTextInfo: onMessageTranslationInfoUpdated,
-    voiceToTextInfo: onMessageConvertInfoUpdated,
-  });
-});
-
-watchEffect(() => {
-  message.value = TUIStore.getMessageModel(props.messageItem.ID);
-});
-
-const isAllActionItemInvalid = computed(() => {
-  for (let i = 0; i < actionItems.value.length; ++i) {
-    if (actionItems.value[i].renderCondition()) {
-      return false;
-    }
-  }
-  return true;
-});
-
-function getFunction(index: number) {
-  // Compatible with Vue2 and WeChat Mini Program syntax, dynamic binding is not allowed.
-  actionItems.value[index].clickEvent();
-}
-
-function openMessage() {
-  let url = '';
-  switch (message.value?.type) {
-    case TUIChatEngine.TYPES.MSG_FILE:
-      url = message.value.payload.fileUrl;
-      break;
-    case TUIChatEngine.TYPES.MSG_VIDEO:
-      url = message.value.payload.remoteVideoUrl;
-      break;
-    case TUIChatEngine.TYPES.MSG_IMAGE:
-      url = message.value.payload.imageInfoArray[0].url;
-      break;
-  }
-  window?.open(url, '_blank');
-}
-
-function revokeMessage() {
-  if (!message.value) return;
-  const messageModel = TUIStore.getMessageModel(message.value.ID);
-  messageModel
-    .revokeMessage()
-    .then(() => {
-      enableSampleTaskStatus('revokeMessage');
-    })
-    .catch((error: any) => {
-      // The message cannot be recalled after the time limit was reached, which is 2 minutes by default.
-      if (error.code === 20016 || error.code === 10031) {
-        const message = TUITranslateService.t('TUIChat.已过撤回时限');
-        Toast({
-          message,
-          type: TOAST_TYPE.ERROR,
-        });
-      }
-    });
-}
-
-function deleteMessage() {
-  if (!message.value) return;
-  if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) {
-    const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答');
-    return Toast({
-      message,
-      type: TOAST_TYPE.NORMAL,
-    });
-  }
-  const messageModel = TUIStore.getMessageModel(message.value.ID);
-  messageModel.deleteMessage();
-}
-
-async function copyMessage() {
-  if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) {
-    const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答');
-    return Toast({
-      message,
-      type: TOAST_TYPE.NORMAL,
-    });
-  }
-  const isAiRobotText = AiRobotManager.getRobotRenderText(message.value as IMessageModel);
-  const text = isAiRobotText ? isAiRobotText : message.value?.payload.text;
-
-  if (isUniFrameWork) {
-    TUIGlobal?.setClipboardData({
-      data: transformTextWithKeysToEmojiNames(text),
-    });
-  } else {
-    // uni-app conditional compilation will not run the following code
-    // #ifndef APP || APP-PLUS || MP || H5
-    CopyManager.copySelection(text);
-    // #endif
-  }
-}
-
-function beforeCopy(key: string) {
-  // only pc support copy selection or copy full message text
-  // uni-app and h5 only support copy full message text
-  if (key !== 'copy' || isH5) {
-    return;
-  }
+  import TUIChatEngine, {
+    TUIStore,
+    StoreName,
+    TUITranslateService,
+    IMessageModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { TUIGlobal } from '@tencentcloud/universal-api'
+  import {
+    ref,
+    watchEffect,
+    computed,
+    onMounted,
+    onUnmounted
+  } from '../../../../adapter-vue'
+  import Icon from '../../../common/Icon.vue'
+  import { Toast, TOAST_TYPE } from '../../../common/Toast/index'
+  import delIcon from '../../../../assets/icon/msg-del.svg'
+  import copyIcon from '../../../../assets/icon/msg-copy.svg'
+  import quoteIcon from '../../../../assets/icon/msg-quote.svg'
+  import revokeIcon from '../../../../assets/icon/msg-revoke.svg'
+  import forwardIcon from '../../../../assets/icon/msg-forward.svg'
+  import translateIcon from '../../../../assets/icon/translate.svg'
+  import multipleSelectIcon from '../../../../assets/icon/multiple-select.svg'
+  import convertText from '../../../../assets/icon/convertText_zh.svg'
+  import { enableSampleTaskStatus } from '../../../../utils/enableSampleTaskStatus'
+  import { transformTextWithKeysToEmojiNames } from '../../emoji-config'
+  import { isH5, isPC, isUniFrameWork } from '../../../../utils/env'
+  import { ITranslateInfo, IConvertInfo } from '../../../../interface'
+  import TUIChatConfig from '../../config'
+  import AiRobotManager from '../../aiRobotManager'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'

  // uni-app conditional compilation will not run the following code
  // #ifndef APP || APP-PLUS || MP || H5
-  CopyManager.saveCurrentSelection();
+  import CopyManager from '../../utils/copy'
  // #endif
-}

-function forwardSingleMessage() {
-  if (!message.value) return;
-  if (AiRobotManager.isStreamingMessage(message.value as IMessageModel)) {
-    const message = TUITranslateService.t('TUIChat.回答输出中，请稍后或点击停止回答');
-    return Toast({
-      message,
-      type: TOAST_TYPE.NORMAL,
-    });
-  }
-  TUIStore.update(StoreName.CUSTOM, 'singleForwardMessageID', message.value.ID);
-}
-
-function quoteMessage() {
-  if (!message.value) return;
-  message.value.quoteMessage();
-}
-
-function translateMessage() {
-  const enable = TUIStore.getData(StoreName.APP, 'enabledTranslationPlugin');
-  if (!enable) {
-    Toast({
-      message: TUITranslateService.t('TUIChat.请开通翻译功能'),
-      type: TOAST_TYPE.WARNING,
-    });
-    return;
+  interface IProps {
+    messageItem: IMessageModel
+    isMultipleSelectMode: boolean
  }

-  if (!message.value) return;
-  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,
-  });
-}
-
-function convertVoiceToText() {
-  const enable = TUIStore.getData(StoreName.APP, 'enabledVoiceToText');
-  if (!enable) {
-    Toast({
-      message: TUITranslateService.t('TUIChat.请开通语音转文字功能'),
-      type: '',
-    });
-    return;
+  interface IEmits {
+    (key: 'toggleMultipleSelectMode'): void
  }

-  if (!message.value) return;
-  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,
-  });
-}
+  const emits = defineEmits<IEmits>()
+  const props = withDefaults(defineProps<IProps>(), {
+    isMultipleSelectMode: false,
+    messageItem: () => ({}) as IMessageModel
+  })
+  const featureConfig = TUIChatConfig.getFeatureConfig()

-function multipleSelectMessage() {
-  emits('toggleMultipleSelectMode');
-}
+  const TYPES = TUIChatEngine.TYPES

-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');
-  for (let i = 0; i < translationInfoList.length; ++i) {
-    const { messageID, visible } = translationInfoList[i];
-    if (messageID === props.messageItem.ID) {
-      actionItems.value[idx].text = TUITranslateService.t(visible ? 'TUIChat.隐藏' : 'TUIChat.翻译');
-      actionItems.value[idx].visible = !!visible;
-      return;
+  const actionItems = ref([
+    {
+      key: 'open',
+      text: TUITranslateService.t('TUIChat.打开'),
+      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)
+        )
+      },
+      clickEvent: openMessage
+    },
+    {
+      key: 'copy',
+      text: TUITranslateService.t('TUIChat.复制'),
+      iconUrl: copyIcon,
+      renderCondition() {
+        if (!featureConfig.CopyMessage || !message.value) return false
+        const isAiRobotTextMessage = AiRobotManager.isRobotMessage(
+          message.value
+        )
+        return (
+          message.value.type === TYPES.MSG_TEXT || isAiRobotTextMessage
+        )
+      },
+      clickEvent: copyMessage
+    },
+    {
+      key: 'revoke',
+      text: TUITranslateService.t('TUIChat.撤回'),
+      iconUrl: revokeIcon,
+      renderCondition() {
+        if (!featureConfig.RevokeMessage || !message.value) return false
+        if (isRedEnvelopeMessage(message.value)) return false
+        return (
+          message.value.flow === 'out' &&
+          message.value.status === 'success'
+        )
+      },
+      clickEvent: revokeMessage
+    },
+    {
+      key: 'delete',
+      text: TUITranslateService.t('TUIChat.删除'),
+      iconUrl: delIcon,
+      renderCondition() {
+        if (!featureConfig.DeleteMessage || !message.value) return false
+        return message.value.status === 'success'
+      },
+      clickEvent: deleteMessage
+    },
+    {
+      key: 'forward',
+      text: TUITranslateService.t('TUIChat.转发'),
+      iconUrl: forwardIcon,
+      renderCondition() {
+        if (!featureConfig.ForwardMessage || !message.value) return false
+        if (isRedEnvelopeMessage(message.value)) return false
+        return message.value.status === 'success'
+      },
+      clickEvent: forwardSingleMessage
+    },
+    {
+      key: 'quote',
+      text: TUITranslateService.t('TUIChat.引用'),
+      iconUrl: quoteIcon,
+      renderCondition() {
+        if (!featureConfig.QuoteMessage || !message.value) return false
+        const _message = TUIStore.getMessageModel(message.value.ID)
+        return (
+          message.value.status === 'success' &&
+          !_message.getSignalingInfo()
+        )
+      },
+      clickEvent: quoteMessage
+    },
+    {
+      key: 'translate',
+      text: TUITranslateService.t('TUIChat.翻译'),
+      visible: false,
+      iconUrl: translateIcon,
+      renderCondition() {
+        if (!featureConfig.TranslateMessage || !message.value)
+          return false
+        return (
+          message.value.status === 'success' &&
+          message.value.type === TYPES.MSG_TEXT
+        )
+      },
+      clickEvent: translateMessage
+    },
+    {
+      key: 'convert',
+      text: TUITranslateService.t('TUIChat.转文字'),
+      visible: false,
+      iconUrl: convertText,
+      renderCondition() {
+        if (!featureConfig.VoiceToText || !message.value) return false
+        return (
+          message.value.status === 'success' &&
+          message.value.type === TYPES.MSG_AUDIO
+        )
+      },
+      clickEvent: convertVoiceToText
+    },
+    {
+      key: 'multi-select',
+      text: TUITranslateService.t('TUIChat.多选'),
+      iconUrl: multipleSelectIcon,
+      renderCondition() {
+        if (!featureConfig.MultiSelection || !message.value) return false
+        return message.value.status === 'success'
+      },
+      clickEvent: multipleSelectMessage
+    }
+  ])
+
+  const message = ref<IMessageModel>()
+  const messageToolDom = ref<HTMLElement>()
+
+  onMounted(() => {
+    TUIStore.watch(StoreName.CHAT, {
+      translateTextInfo: onMessageTranslationInfoUpdated,
+      voiceToTextInfo: onMessageConvertInfoUpdated
+    })
+  })
+
+  onUnmounted(() => {
+    TUIStore.unwatch(StoreName.CHAT, {
+      translateTextInfo: onMessageTranslationInfoUpdated,
+      voiceToTextInfo: onMessageConvertInfoUpdated
+    })
+  })
+
+  watchEffect(() => {
+    message.value = TUIStore.getMessageModel(props.messageItem.ID)
+  })
+
+  const isAllActionItemInvalid = computed(() => {
+    for (let i = 0; i < actionItems.value.length; ++i) {
+      if (actionItems.value[i].renderCondition()) {
+        return false
+      }
+    }
+    return true
+  })
+
+  function getFunction(index: number) {
+    // Compatible with Vue2 and WeChat Mini Program syntax, dynamic binding is not allowed.
+    actionItems.value[index].clickEvent()
+  }
+
+  function openMessage() {
+    let url = ''
+    switch (message.value?.type) {
+      case TUIChatEngine.TYPES.MSG_FILE:
+        url = message.value.payload.fileUrl
+        break
+      case TUIChatEngine.TYPES.MSG_VIDEO:
+        url = message.value.payload.remoteVideoUrl
+        break
+      case TUIChatEngine.TYPES.MSG_IMAGE:
+        url = message.value.payload.imageInfoArray[0].url
+        break
+    }
+    window?.open(url, '_blank')
+  }
+
+  function revokeMessage() {
+    if (!message.value) return
+    const messageModel = TUIStore.getMessageModel(message.value.ID)
+    messageModel
+      .revokeMessage()
+      .then(() => {
+        enableSampleTaskStatus('revokeMessage')
+      })
+      .catch((error: any) => {
+        // The message cannot be recalled after the time limit was reached, which is 2 minutes by default.
+        if (error.code === 20016 || error.code === 10031) {
+          const message = TUITranslateService.t('TUIChat.已过撤回时限')
+          Toast({
+            message,
+            type: TOAST_TYPE.ERROR
+          })
+        }
+      })
+  }
+
+  function deleteMessage() {
+    if (!message.value) return
+    if (
+      AiRobotManager.isStreamingMessage(message.value as IMessageModel)
+    ) {
+      const message = TUITranslateService.t(
+        'TUIChat.回答输出中，请稍后或点击停止回答'
+      )
+      return Toast({
+        message,
+        type: TOAST_TYPE.NORMAL
+      })
+    }
+    const messageModel = TUIStore.getMessageModel(message.value.ID)
+    messageModel.deleteMessage()
+  }
+
+  async function copyMessage() {
+    if (
+      AiRobotManager.isStreamingMessage(message.value as IMessageModel)
+    ) {
+      const message = TUITranslateService.t(
+        'TUIChat.回答输出中，请稍后或点击停止回答'
+      )
+      return Toast({
+        message,
+        type: TOAST_TYPE.NORMAL
+      })
+    }
+    const isAiRobotText = AiRobotManager.getRobotRenderText(
+      message.value as IMessageModel
+    )
+    const text = isAiRobotText
+      ? isAiRobotText
+      : message.value?.payload.text
+
+    if (isUniFrameWork) {
+      TUIGlobal?.setClipboardData({
+        data: transformTextWithKeysToEmojiNames(text)
+      })
+    } else {
+      // uni-app conditional compilation will not run the following code
+      // #ifndef APP || APP-PLUS || MP || H5
+      CopyManager.copySelection(text)
+      // #endif
    }
  }
-  actionItems.value[idx].text = TUITranslateService.t('TUIChat.翻译');
-}

-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');
-  for (let i = 0; i < convertInfoList.length; ++i) {
-    const { messageID, visible } = convertInfoList[i];
-    if (messageID === props.messageItem.ID) {
-      actionItems.value[idx].text = TUITranslateService.t(visible ? 'TUIChat.隐藏' : 'TUIChat.转文字');
-      actionItems.value[idx].visible = !!visible;
-      return;
+  function beforeCopy(key: string) {
+    // only pc support copy selection or copy full message text
+    // uni-app and h5 only support copy full message text
+    if (key !== 'copy' || isH5) {
+      return
+    }
+
+    // uni-app conditional compilation will not run the following code
+    // #ifndef APP || APP-PLUS || MP || H5
+    CopyManager.saveCurrentSelection()
+    // #endif
+  }
+
+  function forwardSingleMessage() {
+    if (!message.value) return
+    if (
+      AiRobotManager.isStreamingMessage(message.value as IMessageModel)
+    ) {
+      const message = TUITranslateService.t(
+        'TUIChat.回答输出中，请稍后或点击停止回答'
+      )
+      return Toast({
+        message,
+        type: TOAST_TYPE.NORMAL
+      })
+    }
+    TUIStore.update(
+      StoreName.CUSTOM,
+      'singleForwardMessageID',
+      message.value.ID
+    )
+  }
+
+  function quoteMessage() {
+    if (!message.value) return
+    message.value.quoteMessage()
+  }
+
+  function translateMessage() {
+    const enable = TUIStore.getData(
+      StoreName.APP,
+      'enabledTranslationPlugin'
+    )
+    if (!enable) {
+      Toast({
+        message: TUITranslateService.t('TUIChat.请开通翻译功能'),
+        type: TOAST_TYPE.WARNING
+      })
+      return
+    }
+
+    if (!message.value) return
+    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
+    })
+  }
+
+  function convertVoiceToText() {
+    const enable = TUIStore.getData(StoreName.APP, 'enabledVoiceToText')
+    if (!enable) {
+      Toast({
+        message: TUITranslateService.t('TUIChat.请开通语音转文字功能'),
+        type: ''
+      })
+      return
+    }
+
+    if (!message.value) return
+    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
+    })
+  }
+
+  function multipleSelectMessage() {
+    emits('toggleMultipleSelectMode')
+  }
+
+  /** 判断是否是红包消息 */
+  const isRedEnvelopeMessage = (message: IMessageModel) => {
+    const modelData = message?.payload?.data
+    // 判断是否是红包消息
+    if (
+      modelData &&
+      JSON.parse(modelData)?.businessID ===
+        CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+    ) {
+      return true
    }
  }
-  actionItems.value[idx].text = TUITranslateService.t('TUIChat.转文字');
-}

-defineExpose({
-  messageToolDom,
-});
+  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'
+    )
+    for (let i = 0; i < translationInfoList.length; ++i) {
+      const { messageID, visible } = translationInfoList[i]
+      if (messageID === props.messageItem.ID) {
+        actionItems.value[idx].text = TUITranslateService.t(
+          visible ? 'TUIChat.隐藏' : 'TUIChat.翻译'
+        )
+        actionItems.value[idx].visible = !!visible
+        return
+      }
+    }
+    actionItems.value[idx].text = TUITranslateService.t('TUIChat.翻译')
+  }
+
+  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'
+    )
+    for (let i = 0; i < convertInfoList.length; ++i) {
+      const { messageID, visible } = convertInfoList[i]
+      if (messageID === props.messageItem.ID) {
+        actionItems.value[idx].text = TUITranslateService.t(
+          visible ? 'TUIChat.隐藏' : 'TUIChat.转文字'
+        )
+        actionItems.value[idx].visible = !!visible
+        return
+      }
+    }
+    actionItems.value[idx].text = TUITranslateService.t('TUIChat.转文字')
+  }
+
+  defineExpose({
+    messageToolDom
+  })
 </script>

 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+  @import '../../../../assets/styles/common';

-.dialog-item-web {
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  padding: 12px 0;
+  .dialog-item-web {
+    background: #fff;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+    padding: 12px 0;

-  .dialog-item-list {
-    display: flex;
-    align-items: baseline;
-    white-space: nowrap;
-    flex-wrap: wrap;
-    max-width: 280px;
-
-    .list-item {
-      padding: 4px 12px;
+    .dialog-item-list {
      display: flex;
-      flex-direction: row;
-      align-items: center;
+      align-items: baseline;
+      white-space: nowrap;
+      flex-wrap: wrap;
+      max-width: 280px;

-      .list-item-text {
-        padding-left: 4px;
-        font-size: 12px;
-        line-height: 17px;
-        color: #000;
+      .list-item {
+        padding: 4px 12px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .list-item-text {
+          padding-left: 4px;
+          font-size: 12px;
+          line-height: 17px;
+          color: #000;
+        }
      }
    }
  }
-}

-.dialog-item-h5 {
-  @extend .dialog-item-web;
+  .dialog-item-h5 {
+    @extend .dialog-item-web;

-  padding: 0;
+    padding: 0;

-  .dialog-item-list {
-    margin: 10px;
-    white-space: nowrap;
-    flex-wrap: wrap;
-    max-width: 280px;
+    .dialog-item-list {
+      margin: 10px;
+      white-space: nowrap;
+      flex-wrap: wrap;
+      max-width: 280px;

-    .list-item {
-      padding: 0 8px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      color: #4f4f4f;
+      .list-item {
+        padding: 0 8px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #4f4f4f;

-      .list-item-text {
-        padding-left: 0;
-        color: #000;
+        .list-item-text {
+          padding-left: 0;
+          color: #000;
+        }
      }
    }
  }
-}
 </style>
--- a/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue
+++ b/TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :class="['tui-contact-list-card', !isPC && 'tui-contact-list-card-h5']">
+  <div
+    :class="[
+      'tui-contact-list-card',
+      !isPC && 'tui-contact-list-card-h5'
+    ]"
+  >
    <div class="tui-contact-list-card-left">
      <Avatar
        useSkeletonAnimation
@@ -11,7 +16,7 @@
        :class="{
          'online-status': true,
          'online-status-online': isOnline,
-          'online-status-offline': !isOnline,
+          'online-status-offline': !isOnline
        }"
      />
    </div>
@@ -41,212 +46,240 @@
          v-if="showApplicationStatus.style === 'text'"
          class="tui-contact-list-card-right-application-text"
        >
-          {{ TUITranslateService.t(`TUIContact.${showApplicationStatus.label}`) }}
+          {{
+            TUITranslateService.t(
+              `TUIContact.${showApplicationStatus.label}`
+            )
+          }}
        </div>
        <button
          v-else-if="showApplicationStatus.style === 'button'"
          class="tui-contact-list-card-right-application-button"
          @click.stop="showApplicationStatus.onClick"
        >
-          {{ TUITranslateService.t(`TUIContact.${showApplicationStatus.label}`) }}
+          {{
+            TUITranslateService.t(
+              `TUIContact.${showApplicationStatus.label}`
+            )
+          }}
        </button>
      </div>
    </div>
  </div>
 </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-lite';
-import { IContactInfoType, IUserStatus } from '../../../../interface';
-import Avatar from '../../../common/Avatar/index.vue';
-import { generateAvatar, generateName, acceptFriendApplication } from '../../utils';
-import { isPC } from '../../../../utils/env';
+  import {
+    computed,
+    withDefaults,
+    inject,
+    watch,
+    ref,
+    Ref
+  } from '../../../../adapter-vue'
+  import TUIChatEngine, {
+    TUITranslateService,
+    IGroupModel,
+    FriendApplication,
+    Friend
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { IContactInfoType, IUserStatus } from '../../../../interface'
+  import Avatar from '../../../common/Avatar/index.vue'
+  import {
+    generateAvatar,
+    generateName,
+    acceptFriendApplication
+  } from '../../utils'
+  import { isPC } from '../../../../utils/env'

-const props = withDefaults(
-  defineProps<{
-    item: IContactInfoType;
-    displayOnlineStatus?: boolean;
-  }>(),
-  {
-    item: () => ({} as IContactInfoType),
-    displayOnlineStatus: false,
-  },
-);
-const userOnlineStatusMap = inject<Ref<Map<string, IUserStatus>>>('userOnlineStatusMap');
-const isOnline = ref<boolean>(false);
+  const props = withDefaults(
+    defineProps<{
+      item: IContactInfoType
+      displayOnlineStatus?: boolean
+    }>(),
+    {
+      item: () => ({}) as IContactInfoType,
+      displayOnlineStatus: false
+    }
+  )
+  const userOnlineStatusMap = inject<Ref<Map<string, IUserStatus>>>(
+    'userOnlineStatusMap'
+  )
+  const isOnline = ref<boolean>(false)

-const groupType = {
-  [TUIChatEngine.TYPES.GRP_WORK]: 'Work',
-  [TUIChatEngine.TYPES.GRP_AVCHATROOM]: 'AVChatRoom',
-  [TUIChatEngine.TYPES.GRP_PUBLIC]: 'Public',
-  [TUIChatEngine.TYPES.GRP_MEETING]: 'Meeting',
-  [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
-  ) {
-    content = (props.item as FriendApplication)?.wording || '';
-  } else if ((props.item as IGroupModel)?.groupID) {
-    content = `ID:${(props.item as IGroupModel)?.groupID}`;
+  const groupType = {
+    [TUIChatEngine.TYPES.GRP_WORK]: 'Work',
+    [TUIChatEngine.TYPES.GRP_AVCHATROOM]: 'AVChatRoom',
+    [TUIChatEngine.TYPES.GRP_PUBLIC]: 'Public',
+    [TUIChatEngine.TYPES.GRP_MEETING]: 'Meeting',
+    [TUIChatEngine.TYPES.GRP_COMMUNITY]: 'Community'
  }
-  return content;
-});

-const groupTypeForShow = computed((): string => {
-  let type = '';
-  if ((props.item as IGroupModel)?.groupID) {
-    type = groupType[(props.item as IGroupModel)?.type];
+  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
+    ) {
+      content = (props.item as FriendApplication)?.wording || ''
+    } else if ((props.item as IGroupModel)?.groupID) {
+      content = `ID:${(props.item as IGroupModel)?.groupID}`
+    }
+    return content
+  })
+
+  const groupTypeForShow = computed((): string => {
+    let type = ''
+    if ((props.item as IGroupModel)?.groupID) {
+      type = groupType[(props.item as IGroupModel)?.type]
+    }
+    return type
+  })
+
+  const showApplicationStatus = computed(() => {
+    if (
+      (props.item as FriendApplication)?.type ===
+      TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
+    ) {
+      return {
+        style: 'text',
+        label: '等待验证'
+      }
+    } 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
+  })
+
+  watch(
+    () => userOnlineStatusMap?.value,
+    () => {
+      isOnline.value = getOnlineStatus()
+    },
+    {
+      immediate: 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
+    )
  }
-  return type;
-});
-
-const showApplicationStatus = computed(() => {
-  if (
-    (props.item as FriendApplication)?.type === TUIChatEngine?.TYPES?.SNS_APPLICATION_SENT_BY_ME
-  ) {
-    return {
-      style: 'text',
-      label: '等待验证',
-    };
-  } 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;
-});
-
-watch(
-  () => userOnlineStatusMap?.value,
-  () => {
-    isOnline.value = getOnlineStatus();
-  },
-  {
-    immediate: 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
-  );
-}
 </script>
 <style lang="scss" scoped>
-.tui-contact-list-card {
-  padding: 10px 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  overflow: hidden;
-  flex: 1;
-
-  &-left {
-    position: relative;
-    width: 30px;
-    height: 30px;
-
-    .online-status {
-      box-sizing: border-box;
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      left: 30px;
-      top: 30px;
-      border: 2px solid #fff;
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-      border-radius: 50%;
-
-      &-online {
-        background: #29cc85;
-      }
-
-      &-offline {
-        background: #a4a4a4;
-      }
-    }
-  }
-
-  &-main {
-    flex: 1;
-    padding: 0 10px;
+  .tui-contact-list-card {
+    padding: 10rpx 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
    overflow: hidden;
+    flex: 1;

-    &-name,
-    &-other {
-      font-size: 16px;
+    &-left {
+      position: relative;
+      width: 30px;
+      height: 30px;
+
+      .online-status {
+        box-sizing: border-box;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        left: 30px;
+        top: 30px;
+        border: 2px solid #fff;
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+        border-radius: 50%;
+
+        &-online {
+          background: #29cc85;
+        }
+
+        &-offline {
+          background: #a4a4a4;
+        }
+      }
+    }
+
+    &-main {
      flex: 1;
+      padding: 0 10px;
      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }

-    &-other {
-      color: #999;
-    }
-  }
-
-  &-right {
-    width: fit-content;
-
-    &-group-type {
-      padding: 0 4px;
-      line-height: 14px;
-      font-size: 12px;
-      border-radius: 1px;
-      font-weight: 400;
-      color: rgba(0, 0, 0, 0.3);
-      border: 1px solid rgba(0, 0, 0, 0.3);
-    }
-
-    &-application {
-      &-text {
-        color: #999;
-        font-size: 12px;
+      &-name,
+      &-other {
+        font-size: 16px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
      }

-      &-button {
-        border: 1px solid #006eff;
-        background: #006eff;
-        color: #fff;
-        padding: 3px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        text-align: center;
-        cursor: pointer;
-        user-select: none;
-        line-height: 150%;
+      &-other {
+        color: #999;
+      }
+    }

-        &::after {
-          border: none;
+    &-right {
+      width: fit-content;
+
+      &-group-type {
+        padding: 0 4px;
+        line-height: 14px;
+        font-size: 12px;
+        border-radius: 1px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.3);
+        border: 1px solid rgba(0, 0, 0, 0.3);
+      }
+
+      &-application {
+        &-text {
+          color: #999;
+          font-size: 12px;
+        }
+
+        &-button {
+          border: 1px solid #006eff;
+          background: #006eff;
+          color: #fff;
+          padding: 3px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          text-align: center;
+          cursor: pointer;
+          user-select: none;
+          line-height: 150%;
+
+          &::after {
+            border: none;
+          }
        }
      }
    }
  }
-}

-.tui-contact-list-card-h5 {
-  cursor: none !important;
-}
+  .tui-contact-list-card-h5 {
+    cursor: none !important;
+  }
 </style>
--- a/TUIKit/components/TUIContact/contact-list/index.vue
+++ b/TUIKit/components/TUIContact/contact-list/index.vue
@@ -254,7 +254,6 @@
    } else {
      currentContactListKey.value = key
      TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', key)
-
      if (key === 'friendApplicationList') {
        TUIFriendService.setFriendApplicationRead()
      }
--- a/TUIKit/components/TUIConversation/conversation-list/index.vue
+++ b/TUIKit/components/TUIConversation/conversation-list/index.vue
@@ -365,6 +365,7 @@
    }
    return false
  }
+
  /** 红包文案 */
  const redEnvelopeText = (item: IConversationModel) => {
    const payload = JSON.parse(item.lastMessage?.payload?.data)
@@ -379,12 +380,22 @@

  /** 是否最开始创建群聊 */
  const isFirstCreateGroup = (item: IConversationModel) => {
+    // 打印
    if (item.type === 'GROUP' && item?.lastMessage?.payload?.data) {
      const data = JSON.parse(item?.lastMessage?.payload?.data)
      return data.content === 'Create Group'
        ? `${item.getLastMessage('text')?.split(':')[0]}:创建群聊`
        : ''
    }
+    if (item?.lastMessage?.payload?.data) {
+      const data = JSON.parse(item?.lastMessage?.payload?.data)
+      if (data.businessID === CHAT_MSG_CUSTOM_TYPE.GOODS) {
+        console.log(item, '==2222222=')
+
+        return `自定义数据--`
+      }
+      return ''
+    }
    return ''
  }

--- a/TUIKit/components/common/Avatar/index.vue
+++ b/TUIKit/components/common/Avatar/index.vue
@@ -108,6 +108,7 @@
  }

  .avatar-container {
+    flex-shrink: 0;
    position: relative;
    justify-content: center;
    align-items: center;
@@ -121,7 +122,9 @@
      width: 100%;
      height: 100%;
      background-color: #ececec;
-      transition: opacity 0.3s, background-color 0.1s ease-out;
+      transition:
+        opacity 0.3s,
+        background-color 0.1s ease-out;

      &.skeleton-animation {
        animation: breath 2s linear 0.3s infinite;
@@ -134,6 +137,7 @@
  }

  .avatar-image {
+    flex-shrink: 0;
    width: 80rpx !important;
    height: 80rpx !important;
    border-radius: 80rpx !important;
--- a/TUIKit/constant.ts
+++ b/TUIKit/constant.ts
@@ -19,7 +19,11 @@ export const CHAT_MSG_CUSTOM_TYPE = {
  CALL: 1,
  ORDER: "order",
  /** 红包 */
-  RED_ENVELOPE: "redEnvelope"
+  RED_ENVELOPE: "redEnvelope",
+  /** 商品详情 */
+  GOODS: "goods",
+  /** 直播 */
+  LIVE: "live"
 };

 export const DIALOG_CONTENT = {
--- a/components/share-popup/share-popup.vue
+++ b/components/share-popup/share-popup.vue
@@ -0,0 +1,449 @@
+<script setup>
+  import TUIChatEngine, {
+    TUIStore,
+    StoreName,
+    TUIChatService
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { ref, watch, onMounted, onUnmounted } from 'vue'
+  import { useUI } from '../../utils/use-ui'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../TUIKit/constant'
+  import { isEnabledMessageReadReceiptGlobal } from '../../TUIKit/components/TUIChat/utils/utils'
+
+  const { showLoading, hideLoading, showToast, showDialog } = useUI()
+
+  const isShow = defineModel('show', {
+    type: Boolean,
+    default: false
+  })
+
+  const props = defineProps({
+    /** 分享类型: 1 直播 2 商品详情*/
+    type: {
+      type: String,
+      default: '2'
+    },
+    id: {
+      type: String,
+      default: ''
+    },
+    /** 分享文本 */
+    text: {
+      type: String,
+      default: ''
+    },
+    /** 封面图 */
+    cover: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const refPopup = ref(null)
+  /** 多选状态 */
+  const isMultiple = ref(false)
+  /** 群列表 */
+  const groupList = ref([])
+  /** 好友列表 */
+  const friendList = ref([])
+  /** 选中数据 */
+  const selectedList = ref([])
+
+  watch(
+    () => isShow.value,
+    v => {
+      if (v) {
+        refPopup.value.open()
+      } else {
+        refPopup.value.close()
+        selectedList.value = []
+        isMultiple.value = false
+      }
+    }
+  )
+
+  const onShow = v => {
+    isShow.value = v.show
+  }
+
+  /** 获取好友列表 */
+  const onFriendListUpdated = list => {
+    console.log('好友列表：', list)
+    friendList.value = list
+  }
+
+  /** 获取群列表 */
+  const onGroupListUpdated = list => {
+    console.log('群列表：', list)
+    groupList.value = list
+  }
+
+  /** 判断多选状态 */
+  const multipleShow = id => {
+    return selectedList.value.some(item => item.id === id)
+  }
+
+  /**
+   * 选项
+   * @param item
+   * @param state 1 群聊 0 好友
+   */
+  const onSelect = (item, state) => {
+    let data = {}
+    if (state) {
+      data = {
+        id: `GROUP${item.groupID}`,
+        name: item.name,
+        avatar: item.avatar
+      }
+    } else {
+      data = {
+        id: `C2C${item.profile.userID}`,
+        name: item.profile.nick || item.profile.userID,
+        avatar: item.profile.avatar
+      }
+    }
+    if (isMultiple.value) {
+      if (multipleShow(data.id)) {
+        selectedList.value = selectedList.value.filter(
+          item => item.id !== data.id
+        )
+      } else {
+        if (selectedList.value.length >= 9) {
+          showDialog('提示', '最多选择9个', false)
+          return
+        }
+        selectedList.value.push(data)
+      }
+    } else {
+      onConfirm(0, data)
+    }
+  }
+
+  /**
+   * 确定分享
+   * @param state 1 多选 0 单选
+   * @param data
+   */
+  const onConfirm = async (state, item) => {
+    if (state) {
+      console.log('多选分享?')
+    } else {
+      // props
+      const show = await showDialog(
+        '提示',
+        `确定分享${props.type == 1 ? '直播间' : '商品'}吗？`
+      )
+      if (!show) {
+        return
+      }
+      console.log('单选数据', item.id)
+      // 字符串匹配 GROUP  C2C
+      let to = ''
+      let isGroup = false
+      if (item.id.includes('GROUP')) {
+        // 分割 GROUP
+        to = item.id.split('GROUP')[1]
+        isGroup = true
+      } else {
+        to = item.id.split('C2C')[1]
+        isGroup = false
+      }
+      const payload = {
+        data: JSON.stringify({
+          id: props.id,
+          businessID: CHAT_MSG_CUSTOM_TYPE.GOODS,
+          title: props.text,
+          cover: props.cover
+        }),
+        description: props.text,
+        extension: props.text
+      }
+      const options = {
+        to,
+        payload,
+        conversationType: isGroup
+          ? TUIChatEngine.TYPES.CONV_GROUP
+          : TUIChatEngine.TYPES.CONV_C2C,
+        needReadReceipt: isEnabledMessageReadReceiptGlobal()
+      }
+      showLoading()
+      await TUIChatService.sendCustomMessage(options)
+      hideLoading()
+      await showToast('分享成功', 'success')
+      isShow.value = false
+      console.log(options)
+    }
+  }
+
+  onMounted(() => {
+    TUIStore.watch(StoreName.GRP, {
+      groupList: onGroupListUpdated
+    })
+
+    TUIStore.watch(StoreName.FRIEND, {
+      friendList: onFriendListUpdated
+    })
+  })
+
+  onUnmounted(() => {
+    TUIStore.unwatch(StoreName.GRP, {
+      groupList: onGroupListUpdated
+    })
+
+    TUIStore.unwatch(StoreName.FRIEND, {
+      friendList: onFriendListUpdated
+    })
+  })
+</script>
+
+<template>
+  <uni-popup
+    ref="refPopup"
+    type="bottom"
+    background-color="#ffffff"
+    borderRadius="16rpx 16rpx 0 0"
+    @change="onShow"
+  >
+    <!-- 顶部标题 -->
+    <view class="top-box">
+      <text
+        class="close"
+        @click="
+          () => {
+            if (!isMultiple) {
+              isShow = false
+            } else {
+              selectedList = []
+              isMultiple = false
+            }
+          }
+        "
+      >
+        {{ isMultiple ? '关闭' : '取消' }}
+      </text>
+      <text class="text">选择聊天</text>
+      <text
+        v-if="isMultiple"
+        :class="{ 'on-btn': !selectedList.length > 0 }"
+        class="multiple-btn"
+        @click="onConfirm(1)"
+      >
+        {{
+          `下一步 ${selectedList.length > 0 ? selectedList.length : ''}`
+        }}
+      </text>
+      <text v-else class="multiple" @click="isMultiple = true">多选</text>
+    </view>
+    <!-- 选项数据 -->
+    <view v-if="selectedList.length > 0" class="option-box">
+      <view
+        v-for="(item, index) in selectedList"
+        :key="index"
+        class="option-card"
+      >
+        <image
+          v-if="item.avatar"
+          :src="item.avatar"
+          mode="aspectFill"
+          class="avatar"
+        ></image>
+        <view v-else class="avatar">
+          <uni-icons type="contact-filled" size="98rpx"></uni-icons>
+        </view>
+      </view>
+    </view>
+    <!-- 列表 -->
+    <view class="list-box">
+      <!-- 群聊列表 ================ -->
+      <view
+        v-for="(item, index) in groupList"
+        :key="index"
+        class="item-box"
+        @click="onSelect(item, 1)"
+      >
+        <view v-if="isMultiple" class="box">
+          <uni-icons
+            v-if="!multipleShow(`GROUP${item.groupID}`)"
+            type="circle"
+            color="#b7b7b7"
+            size="30"
+          ></uni-icons>
+          <uni-icons
+            v-else
+            type="checkbox-filled"
+            color="#00d993"
+            size="30"
+          ></uni-icons>
+        </view>
+        <view class="card-box">
+          <image
+            v-if="item.avatar"
+            :src="item.avatar"
+            mode="aspectFill"
+            class="head-img"
+          ></image>
+          <view v-else class="head-img">
+            <uni-icons type="contact-filled" size="108rpx"></uni-icons>
+          </view>
+          <view class="right-box">
+            <text class="name">
+              {{ item.name }}
+            </text>
+            <text class="num">({{ item.memberCount }}人)</text>
+          </view>
+        </view>
+      </view>
+      <!-- 好友列表================== -->
+      <view
+        v-for="(item, index) in friendList"
+        :key="index"
+        class="item-box"
+        @click="onSelect(item, 0)"
+      >
+        <view v-if="isMultiple" class="box">
+          <uni-icons
+            v-if="!multipleShow(`C2C${item.profile.userID}`)"
+            type="circle"
+            color="#b7b7b7"
+            size="30"
+          ></uni-icons>
+          <uni-icons
+            v-else
+            type="checkbox-filled"
+            color="#00d993"
+            size="30"
+          ></uni-icons>
+        </view>
+        <view class="card-box">
+          <image
+            v-if="item.profile.avatar"
+            :src="item.profile.avatar"
+            mode="aspectFill"
+            class="head-img"
+          ></image>
+          <view v-else class="head-img">
+            <uni-icons type="contact-filled" size="108rpx"></uni-icons>
+          </view>
+          <view class="right-box">
+            <text class="name">
+              {{ item.profile.nick || item.profile.userID }}
+            </text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<style lang="scss" scoped>
+  .top-box {
+    padding: 32rpx 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #333333;
+    font-weight: 400;
+    border-bottom: 2rpx solid #f2f2f2;
+    box-sizing: border-box;
+    position: relative;
+    .close {
+      font-size: 28rpx;
+    }
+    .multiple {
+      font-size: 28rpx;
+    }
+    .multiple-btn {
+      position: absolute;
+      right: 24rpx;
+      font-size: 28rpx;
+      color: #ffffff;
+      background: #00d993;
+      border-radius: 8rpx;
+      padding: 4rpx 12rpx;
+    }
+    .on-btn {
+      background: #b7b7b7;
+    }
+    .text {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 32rpx;
+      font-weight: 500;
+    }
+  }
+
+  .list-box {
+    padding: 22rpx 24rpx;
+    height: 46vh;
+    overflow-y: auto;
+    .item-box + .item-box {
+      margin-top: 12rpx;
+      padding-top: 12rpx;
+      border-top: 2rpx solid #f2f2f2;
+    }
+
+    .item-box {
+      display: flex;
+      align-items: center;
+      .box {
+        margin-right: 10rpx;
+      }
+      .card-box {
+        display: flex;
+        align-items: center;
+        .head-img {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 80rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 16rpx;
+        }
+        .right-box {
+          display: flex;
+          .name {
+            flex-shrink: 0;
+            max-width: 340rpx;
+            font-size: 28rpx;
+            font-weight: 500;
+            // 显示省略号
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .num {
+            margin-left: 8rpx;
+            font-size: 24rpx;
+            color: #999999;
+          }
+        }
+      }
+    }
+  }
+
+  .option-box {
+    padding: 20rpx 24rpx;
+    border-bottom: 2rpx solid #f2f2f2;
+    // 超过宽度左右滑动
+    overflow-x: auto;
+    display: flex;
+    align-items: center;
+    .option-card + .option-card {
+      margin-left: 14rpx;
+    }
+    .option-card {
+      .avatar {
+        flex-shrink: 0;
+        width: 70rpx;
+        height: 70rpx;
+        border-radius: 70rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgb(194, 194, 194);
+      }
+    }
+  }
+</style>
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -69,7 +69,9 @@
      <agreement-checkbox v-model="formData.agreement" />
      <cb-button
        class="bottom-btn"
-        :disabled="!formData.username || !formData.password"
+        :disabled="
+          !formData.username || !formData.password || !formData.agreement
+        "
        @click="onLogin"
      >
        登录
--- a/pages/mall/detail.vue
+++ b/pages/mall/detail.vue
@@ -10,6 +10,8 @@
  const groupId = ref('')
  /** 评论数量 */
  const commentNum = ref(0)
+  /** 分享弹窗 */
+  const shareDialog = ref(false)
  const getData = async productId => {
    const res = await getProductDetail(productId)
    viewData.value = res.data
@@ -69,13 +71,14 @@
          class="left-icon"
        ></image>
      </template>
-      <!-- <template #right>
+      <template #right>
        <image
          src="/static/images/public/share-icon.png"
          mode="heightFix"
          class="right-icon"
+          @click="shareDialog = true"
        ></image>
-      </template> -->
+      </template>
    </nav-bar>
    <!-- 顶部图片 -->
    <view class="top-img">
@@ -158,6 +161,14 @@
    <bottom-view>
      <cb-button @click="onConfirm">拼单购买</cb-button>
    </bottom-view>
+
+    <!-- 分享弹窗 -->
+    <share-popup
+      v-model:show="shareDialog"
+      :id="productId"
+      :text="viewData.productName"
+      :cover="viewData.mainImage"
+    ></share-popup>
  </view>
 </template>

--- a/pages/mall/list.vue
+++ b/pages/mall/list.vue
@@ -61,7 +61,6 @@
    :default-page-size="formData.pageSize"
    safe-area-inset-bottom
    use-safe-area-placeholder
-    :show-loading-more-no-more-view="false"
    :paging-style="{ 'background-color': '#f9f9f9' }"
    @query="getListData"
  >