实现消息删除功能

src/api/message.js

@@ -16,6 +16,10 @@ export const msgChatRevokeMsgService = (obj) => {
   return request.post('/chat/revokeMsg', obj)
 }
 
+export const msgChatDeleteMsgService = (obj) => {
+  return request.post('/chat/deleteMsg', obj)
+}
+
 export const msgAtService = () => {
   return request.get('/chat/queryAt')
 }

src/stores/message.js

@@ -177,7 +177,7 @@ export const useMessageStore = defineStore('anylink-message', () => {
    */
   const removeMsgRecord = (sessionId, msgKey) => {
     if (msgRecordsList.value[sessionId] && msgKey in msgRecordsList.value[sessionId]) {
-      delete msgRecordsList.value[sessionId][msgKey]
+      msgRecordsList.value[sessionId][msgKey].delete = true
     }
   }
 

src/views/message/components/MessageItem.vue

@@ -23,7 +23,7 @@ import MsgBoxVideo from '@/views/message/components/MsgBoxVideo.vue'
 import MsgBoxDocument from '@/views/message/components/MsgBoxDocument.vue'
 import MenuMsgItem from '@/views/message/components/MenuMsgItem.vue'
 import { ElMessage } from 'element-plus'
-import { msgChatRevokeMsgService } from '@/api/message'
+import { msgChatDeleteMsgService, msgChatRevokeMsgService } from '@/api/message'
 
 const props = defineProps([
   'sessionId',
@@ -631,6 +631,10 @@ const isRevoke = computed(() => {
   return msg.value.revoke
 })
 
+const isDelete = computed(() => {
+  return msg.value.delete
+})
+
 const isReedit = computed(() => {
   const contentJson = jsonParseSafe(msg.value.content)
   if (!contentJson) {
@@ -712,13 +716,13 @@ const onSelectMenuMsgItem = async (label) => {
     case 'revoke':
       msgChatRevokeMsgService({
         sessionId: props.sessionId,
-        revokeMsgId: msg.value.msgId, // 服务器上删除用msg.value.msgId
+        revokeMsgId: msg.value.msgId, // 服务器上撤销用msg.value.msgId
         isGroupChat: isGroupChatMsgType.value,
         remoteId: messageData.sessionList[props.sessionId].remoteId
       })
         .then((res) => {
           if (res.data.code === 0) {
-            // 本地删除用props.msgKey，因为key有可能是发送消息时产生的本地UUID
+            // 本地撤销用props.msgKey，因为key有可能是发送消息时产生的本地UUID
             messageData.revokeMsgRcord(props.sessionId, props.msgKey)
             isReeditTimeOut.value = false
             setTimeout(() => {
@@ -731,6 +735,22 @@ const onSelectMenuMsgItem = async (label) => {
           console.error(error)
         })
       break
+    case 'delete':
+      msgChatDeleteMsgService({
+        sessionId: props.sessionId,
+        deleteMsgId: msg.value.msgId // 服务器上删除用msg.value.msgId
+      })
+        .then((res) => {
+          if (res.data.code === 0) {
+            // 本地删除用props.msgKey，因为key有可能是发送消息时产生的本地UUID
+            messageData.removeMsgRecord(props.sessionId, props.msgKey)
+            ElMessage.success('消息已删除')
+          }
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+      break
     default:
       break
   }
@@ -778,7 +798,7 @@ watch(
       v-html="systemMsgContent"
       @click="onClickSystemMsg"
     ></div>
-    <div v-else-if="!isSystemMsg && isRevoke" class="revoke-wrapper">
+    <div v-else-if="!isSystemMsg && isRevoke" class="revoke-delete">
       <div v-if="isSelf">
         <span>你撤回了一条消息</span>
         <span
@@ -794,6 +814,9 @@ watch(
         <div v-else>{{ `“${objectInfo.nickName}”撤回了一条消息` }}</div>
       </div>
     </div>
+    <div v-else-if="!isSystemMsg && isDelete" class="revoke-delete">
+      <span>消息已删除</span>
+    </div>
     <div v-else class="message-container-wrapper">
       <el-container class="el-container-right" v-if="isSelf">
         <el-main class="el-main-right">
@@ -949,7 +972,7 @@ watch(
     user-select: text;
   }
 
-  .revoke-wrapper {
+  .revoke-delete {
     padding: 2px 4px 2px 4px;
     margin-top: 10px;
     margin-bottom: 10px;