Merge remote-tracking branch 'origin/dev_pro2.0' into dev_pro2.0

gaoluyang

2 天以前 b64a0deae5b5d33f9e20671a68936b27f0b9b00b

 src/views/im/manager/message/group/modules/detail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,92 @@
<script lang="ts" setup>
import type { ImManagerGroupMessageApi } from '#/api/im/manager/message/group';

import { ref } from 'vue';

import { DICT_TYPE } from '#/packages/constants/src';

import { Descriptions, DescriptionsItem, Modal } from 'ant-design-vue';

import { DictTag } from '#/components/dict-tag';
import {
  formatDateTimeText,
  formatGroupLabel,
  formatJsonText,
  formatUserLabel,
} from '#/views/im/manager/utils/format';
import { MESSAGE_GROUP_READ_ENABLED } from '#/views/im/utils/config';
import {
  IM_AT_ALL_NICKNAME,
  IM_AT_ALL_USER_ID,
} from '#/views/im/utils/constants';

import { MessageContentPreview } from '../..';

const visible = ref(false);
const detail = ref<ImManagerGroupMessageApi.GroupMessage>({} as ImManagerGroupMessageApi.GroupMessage);

/** æ‰“开详情 */
function open(row: ImManagerGroupMessageApi.GroupMessage) {
  detail.value = row;
  visible.value = true;
}

defineExpose({ open });
</script>

<template>
  <Modal v-model:open="visible" :footer="null" title="群聊消息详情" width="700px">
    <Descriptions bordered :column="2">
      <DescriptionsItem label="编号">{{ detail.id }}</DescriptionsItem>
      <DescriptionsItem label="客户端编号">
        {{ detail.clientMessageId || '-' }}
      </DescriptionsItem>
      <DescriptionsItem label="群">
        {{ formatGroupLabel(detail.groupName, detail.groupId) }}
      </DescriptionsItem>
      <DescriptionsItem label="发送人">
        {{ formatUserLabel(detail.senderNickname, detail.senderId) }}
      </DescriptionsItem>
      <DescriptionsItem label="类型">
        <DictTag :type="DICT_TYPE.IM_CONTENT_TYPE" :value="detail.type" />
      </DescriptionsItem>
      <DescriptionsItem label="状态">
        <DictTag :type="DICT_TYPE.IM_MESSAGE_STATUS" :value="detail.status" />
      </DescriptionsItem>
      <DescriptionsItem v-if="MESSAGE_GROUP_READ_ENABLED" label="回执" :span="2">
        <DictTag
          :type="DICT_TYPE.IM_MESSAGE_RECEIPT_STATUS"
          :value="detail.receiptStatus"
        />
      </DescriptionsItem>
      <DescriptionsItem label="@用户" :span="2">
        <template v-if="detail.atUserIds?.length">
          <span v-for="(userId, index) in detail.atUserIds" :key="userId">
            <span v-if="Number(index) > 0">、</span>
            <template v-if="userId === IM_AT_ALL_USER_ID">
              @{{ IM_AT_ALL_NICKNAME }}
            </template>
            <template v-else>
              @{{ detail.atUserNicknames?.[index] || userId }}
              <span class="text-gray-400">({{ userId }})</span>
            </template>
          </span>
        </template>
        <span v-else>-</span>
      </DescriptionsItem>
      <DescriptionsItem label="发送时间" :span="2">
        {{ formatDateTimeText(detail.sendTime) }}
      </DescriptionsItem>
      <DescriptionsItem label="消息内容" :span="2">
        <MessageContentPreview
          :content="detail.content"
          :sender-nickname="detail.senderNickname"
          :type="detail.type"
        />
      </DescriptionsItem>
      <DescriptionsItem label="原始 JSON" :span="2">
        <pre class="m-0 whitespace-pre-wrap break-all rounded bg-gray-100 p-2 font-mono text-xs">{{ formatJsonText(detail.content) }}</pre>
      </DescriptionsItem>
    </Descriptions>
  </Modal>
</template>