修改撤回、群公告、转发等类型消息的展示逻辑

src/components/talk/ForwardRecord.vue

@@ -16,12 +16,16 @@ const props = defineProps({
   createdAt: {
     type: String,
     required: false  
-  }
+  },
+  modalTitle: {
+    type: String,
+    required: true
+  },
 })
 const isShow=defineModel<boolean>('show')
 const { showUserInfoModal } = useInject()
 const items = ref<ITalkRecord[]>([])
-const title = ref('会话记录')
+const title = ref(props?.modalTitle || '会话记录')
 
 const onMaskClick = () => {
   isShow.value=false
@@ -30,7 +34,7 @@ const onMaskClick = () => {
 const onLoadData = () => {
   ServeGetForwardRecords({
     msg_id: props.msgId,
-    biz_date: parseTime(new Date(props.createdAt), '{y}{m}')
+    biz_date: parseTime(new Date(props.createdAt || ''), '{y}{m}')
   }).then((res) => {
     if (res.code == 200) {
       items.value = res.data.items || []

src/components/talk/message/ForwardMessage.vue

@@ -12,7 +12,13 @@ const props = defineProps<{
 const isShowRecord = ref(false)
 
 const title = computed(() => {
-  return [...new Set(props.extra.records.map((v) => v.nickname))].join('、')
+  const uniqueNames = [...new Set(props.extra.records.map(v => v.nickname))];
+  if (uniqueNames.length <= 2) {
+    return uniqueNames.join('和');
+  } else {
+    return uniqueNames.slice(0, 2).join('和') + '等';
+  }
+  // return [...new Set(props.extra.records.map((v) => v.nickname))].join('和')
 })
 
 const onClick = () => {
@@ -21,7 +27,7 @@ const onClick = () => {
 </script>
 <template>
   <section class="im-message-forward pointer" @click="onClick">
-    <div class="title">{{ title }} 的会话记录</div>
+    <div class="title">{{ extra.forward_name || title}}的会话记录</div>
     <div class="list" v-for="(record, index) in extra.records" :key="index">
       <p>
         <span>{{ record.nickname }}: </span>
@@ -33,7 +39,7 @@ const onClick = () => {
       <span>转发：聊天会话记录 ({{ extra.msg_ids.length }}条)</span>
     </div>
 
-    <ForwardRecord v-model:show="isShowRecord"  :msg-id="data.msg_id" @close="isShowRecord = false" :created-at="data.created_at"/>
+    <ForwardRecord v-model:show="isShowRecord"  :msg-id="data.msg_id" @close="isShowRecord = false" :created-at="data.created_at" :modalTitle="(extra.forward_name || title) + '的会话记录'"/>
   </section>
 </template>
 
@@ -41,19 +47,21 @@ const onClick = () => {
 .im-message-forward {
   width: 250px;
   min-height: 95px;
-  max-height: 150px;
+  max-height: 190px;
   border-radius: 10px;
   padding: 8px 10px;
   border: 1px solid var(--im-message-border-color);
   user-select: none;
 
   .title {
-    height: 30px;
+    max-height: 60px;
     line-height: 30px;
     font-size: 15px;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     font-weight: 400;
     margin-bottom: 5px;
   }

src/components/talk/message/GroupNoticeMessage.vue

@@ -11,12 +11,20 @@ defineProps<{
 let show = ref(false)
 </script>
 <template>
-  <section class="im-message-group-notice pointer" @click="show = !show">
+  <section
+    class="im-message-group-notice pointer"
+    @click="show = !show"
+    :class="{
+      left: data.float === 'left',
+      right: data.float === 'right'
+    }"
+  >
     <div class="title">
-      <n-tag :bordered="false" size="small" type="primary"> 群公告 </n-tag>
+      <!-- <n-tag :bordered="false" size="small" type="primary"> 群公告 </n-tag>
-      《{{ extra.title }}》
+      《{{ extra.title }}》 -->
+      <text>群公告</text>
     </div>
-    <div class="content" :class="{ ellipsis: !show }">
+    <div class="title" :class="{ ellipsis: !show }">
       {{ extra.content }}
     </div>
   </section>
@@ -30,14 +38,14 @@ let show = ref(false)
   padding: 8px 10px;
   border: 1px solid var(--im-message-border-color);
   user-select: none;
+  background-color: #fff;
 
   .title {
-    height: 30px;
+    line-height: 44rpx;
-    line-height: 30px;
+    font-size: 32rpx;
-    font-size: 14px;
+    // overflow: hidden;
-    overflow: hidden;
+    // text-overflow: ellipsis;
-    text-overflow: ellipsis;
+    // white-space: nowrap;
-    white-space: nowrap;
     font-weight: 400;
     margin-bottom: 5px;
     position: relative;
@@ -56,5 +64,18 @@ let show = ref(false)
       white-space: nowrap;
     }
   }
+
+  &.left {
+    background-color: #fff;
+    border-radius: 0 16rpx 16rpx 16rpx;
+  }
+
+  &.right {
+    background-color: #46299d;
+    border-radius: 16rpx 0 16rpx 16rpx;
+    .title {
+      color: #fff;
+    }
+  }
 }
 </style>

src/components/talk/message/RevokeMessage.vue

@@ -27,6 +27,16 @@ const props = defineProps({
   data: {
     type: Object,
     default: () => {}
+  },
+  revokeInfo: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+  extra: {
+    type: String,
+    default: ''
   }
 })
 
@@ -42,16 +52,104 @@ const onRevoke = () => {
 </script>
 <template>
   <div class="im-message-revoke">
-    <div class="content">
+    <div class="content" v-if="JSON.stringify(revokeInfo) !== '{}'">
-      <div v-if="login_uid === user_id">
+      <span v-if="talk_type === 1 && login_uid === revokeInfo.withdraw_id">
-        <span> 你撤回了一条消息 | {{ formatTime(datetime) }} </span>
+        你撤回了一条消息 | {{ formatTime(datetime) }}
-        <n-button @click="onRevoke" v-if="data.msg_type === 1&&data.extra?.content" text class="text-#46299D text-11px">重新编辑</n-button>
+      </span>
-      </div>
+      <span v-if="talk_type === 1 && login_uid !== revokeInfo.withdraw_id">
-      <span v-else-if="talk_type == 1"> 对方撤回了一条消息 | {{ formatTime(datetime) }} </span>
+        {{ revokeInfo.withdraw_name }}撤回了一条消息 | {{ formatTime(datetime) }}
-      <span v-else>
+      </span>
-        "{{ nickname }}" 撤回了一条消息 |
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid === revokeInfo.withdraw_id &&
+          login_uid === revokeInfo.retracted_id
+        "
+      >
+        你撤回了一条消息 |
+        {{ formatTime(datetime) }}
+        <slot></slot>
+      </span>
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid === revokeInfo.withdraw_id &&
+          login_uid !== revokeInfo.retracted_id
+        "
+      >
+        你撤回了{{ revokeInfo.retracted_name }}一条消息 |
         {{ formatTime(datetime) }}
       </span>
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid !== revokeInfo.withdraw_id &&
+          revokeInfo.withdraw_id === revokeInfo.retracted_id
+        "
+      >
+        {{ revokeInfo.withdraw_name }}撤回了一条消息 |
+        {{ formatTime(datetime) }}
+      </span>
+
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid !== revokeInfo.withdraw_id &&
+          login_uid === revokeInfo.retracted_id &&
+          revokeInfo.withdraw_id !== revokeInfo.retracted_id
+        "
+      >
+        {{ revokeInfo.withdraw_name }}撤回了你一条消息 |
+        {{ formatTime(datetime) }}
+      </span>
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid !== revokeInfo.withdraw_id &&
+          login_uid !== revokeInfo.retracted_id &&
+          revokeInfo.withdraw_id !== revokeInfo.retracted_id
+        "
+      >
+        {{ revokeInfo.withdraw_name }}撤回了{{ revokeInfo.retracted_name }}一条消息 |
+        {{ formatTime(datetime) }}
+      </span>
+
+      <div style="display: inline-block;" v-if="login_uid === user_id">
+        <n-button
+          @click="onRevoke"
+          v-if="data.msg_type === 1 && data.extra?.content"
+          text
+          class="text-#46299D text-11px"
+          >重新编辑</n-button
+        >
+      </div>
+      <!-- <span v-if="login_uid == user_idA"> 你撤回B了一条消息 | {{ formatTime(datetime) }} </span>
+      <span v-else-if="login_uid == user_idB"> A撤回你了一条消息 | {{ formatTime(datetime) }} </span>
+      <span v-else> A撤回B了一条消息 | {{ formatTime(datetime) }} </span> -->
+    </div>
+    <div class="content" v-if="JSON.stringify(revokeInfo) === '{}'">
+      <span v-if="talk_type === 1 && login_uid === user_id">
+        你撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span v-if="talk_type === 1 && login_uid !== user_id">
+        {{ nickname }}撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span v-if="talk_type === 2 && !extra && login_uid === user_id">
+        你撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span v-if="talk_type === 2 && !extra && login_uid !== user_id">
+        {{ nickname }}撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span v-if="talk_type === 2 && extra"> {{ extra }} | {{ formatTime(datetime) }} </span>
+      <div style="display: inline-block;" v-if="login_uid === user_id">
+        <n-button
+          @click="onRevoke"
+          v-if="data.msg_type === 1 && data.extra?.content"
+          text
+          class="text-#46299D text-11px"
+          >重新编辑</n-button
+        >
+      </div>
     </div>
   </div>
 </template>

src/event/revoke.js

@@ -70,6 +70,12 @@ class Revoke extends Base {
     useTalkStore().updateItem({
       index_name: this.getIndexName(),
       msg_text: this.resource.text,
+      revokeInfo: {
+        retracted_id: this.resource.retracted_id,
+        retracted_name: this.resource.retracted_name,
+        withdraw_id: this.resource.withdraw_id,
+        withdraw_name: this.resource.withdraw_name,
+      },
       updated_at: parseTime(new Date())
     })
 
@@ -80,6 +86,12 @@ class Revoke extends Base {
 
     useDialogueStore().updateDialogueRecord({
       msg_id: this.msg_id,
+      revokeInfo: {
+        retracted_id: this.resource.retracted_id,
+        retracted_name: this.resource.retracted_name,
+        withdraw_id: this.resource.withdraw_id,
+        withdraw_name: this.resource.withdraw_name,
+      },
       is_revoke: 1
     })
   }

src/types/chat.ts

@@ -51,7 +51,8 @@ export interface ITalkRecord {
   float: string,
   is_convert_text?:number//语音记录的 是否是在展示转文本状态 1：是 0：否,
   erp_user_id:number,
-  read_total_num:number
+  read_total_num:number,
+  revokeInfo?: any
 }
 
 export interface ITalkRecordExtraText {
@@ -81,6 +82,7 @@ export interface ITalkRecordExtraForward {
   }[]
   talk_type: number
   user_id: number
+  forward_name?: any
 }
 
 export interface ITalkRecordExtraGroupNotice {

src/views/message/inner/panel/PanelContent.vue

@@ -766,6 +766,8 @@ const onCustomSkipBottomEvent = () => {
             :nickname="item.nickname"
             :talk_type="item.talk_type"
             :datetime="item.created_at"
+            :revokeInfo="item.revokeInfo"
+            :extra="item.extra"
           />
         </div>