银川 1.联调产品维护页面 2.添加IM即时通讯模块

gaoluyang

2026-06-29 27cd042df9aca0383a49f3514bc21958dd890912

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

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

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,
  formatJsonText,
  formatUserLabel,
} from '#/views/im/manager/utils/format';
import { MESSAGE_PRIVATE_READ_ENABLED } from '#/views/im/utils/config';

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

const visible = ref(false);
const detail = ref<ImManagerPrivateMessageApi.PrivateMessage>(
  {} as ImManagerPrivateMessageApi.PrivateMessage,
);

/** æ‰“开详情 */
function open(row: ImManagerPrivateMessageApi.PrivateMessage) {
  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="发送人">
        {{ formatUserLabel(detail.senderNickname, detail.senderId) }}
      </DescriptionsItem>
      <DescriptionsItem label="接收人">
        {{ formatUserLabel(detail.receiverNickname, detail.receiverId) }}
      </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_PRIVATE_READ_ENABLED" label="回执">
        <!-- å›žæ‰§çŠ¶æ€ï¼ˆç§èŠ / ç¾¤èŠå…±ç”¨ im_message_receipt_status），与源端私聊详情「回执」对齐 -->
        <DictTag
          :type="DICT_TYPE.IM_MESSAGE_RECEIPT_STATUS"
          :value="detail.receiptStatus"
        />
      </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>