session中可以显示[未送达]

src/const/msgConst.js

@@ -20,3 +20,10 @@ export const msgContentType = {
   VIDEO: 4, // 视频
   EMOJI: 5 //表情
 }
+
+// 消息发送状态
+export const msgSendStatus = {
+  PENDING: 'pending', // 发送中
+  OK: 'ok', // 发送成功
+  FAILED: 'failed' // 发送失败
+}

src/views/message/MessageLayout.vue

@@ -42,7 +42,7 @@ import { el_loading_options } from '@/const/commonConst'
 import { combineId, sessionIdConvert } from '@/js/utils/common'
 import SessionMenu from '@/views/message/components/SessionMenu.vue'
 import router from '@/router'
-import { BEGIN_MSG_ID } from '@/const/msgConst'
+import { BEGIN_MSG_ID, msgSendStatus } from '@/const/msgConst'
 import EditDialog from '@/components/common/EditDialog.vue'
 import AddOprMenu from './components/AddOprMenu.vue'
 import MessageGroupRightSide from './components/MessageGroupRightSide.vue'
@@ -485,7 +485,7 @@ const handleSendMessage = (content, resendSeq = '') => {
     fromId: myAccount.value,
     msgType: selectedSession.value.sessionType,
     content: content,
-    status: 'pending',
+    status: msgSendStatus.PENDING,
     msgTime: new Date(),
     sendTime: new Date()
   }
@@ -494,18 +494,18 @@ const handleSendMessage = (content, resendSeq = '') => {
   const before = (seq, data) => {
     // 当2s内status如果还是pending中，则重发3次。如果最后还是pending，则把status置为failed
     setTimeout(() => {
-      if (msg.status === 'pending') {
+      if (msg.status === msgSendStatus.PENDING) {
         wsConnect.sendAgent(data)
         setTimeout(() => {
-          if (msg.status === 'pending') {
+          if (msg.status === msgSendStatus.PENDING) {
             wsConnect.sendAgent(data)
             setTimeout(() => {
-              if (msg.status === 'pending') {
+              if (msg.status === msgSendStatus.PENDING) {
                 wsConnect.sendAgent(data)
                 setTimeout(() => {
-                  if (msg.status === 'pending') {
+                  if (msg.status === msgSendStatus.PENDING) {
                     messageData.removeMsgRecord(msg.sessionId, msg.msgId)
-                    msg.status = 'failed'
+                    msg.status = msgSendStatus.FAILED
                     messageData.addMsgRecords(msg.sessionId, [msg])
                     ElMessage.error('消息发送失败')
                   }
@@ -535,7 +535,7 @@ const handleSendMessage = (content, resendSeq = '') => {
     })
     messageData.removeMsgRecord(msg.sessionId, msg.msgId) //移除seq为key的msg
     msg.msgId = msgId
-    msg.status = 'ok'
+    msg.status = msgSendStatus.OK
     messageData.addMsgRecords(msg.sessionId, [msg]) //添加服务端返回msgId为key的msg
     if (!messageData.sessionList[msg.sessionId].dnd) {
       playMsgSend()

src/views/message/components/MessageItem.vue

@@ -7,7 +7,7 @@ import { userStore, messageStore, groupStore, groupCardStore, imageStore } from
 import { messageSysShowTime, showTimeFormat, jsonParseSafe } from '@/js/utils/common'
 import UserAvatarIcon from '@/components/common/UserAvatarIcon.vue'
 import { emojis } from '@/js/utils/emojis'
-import { msgContentType } from '@/const/msgConst'
+import { msgContentType, msgSendStatus } from '@/const/msgConst'
 
 const props = defineProps([
   'sessionId',
@@ -194,7 +194,7 @@ const msg = computed(() => {
 })
 
 const msgStatus = computed(() => {
-  return msg.value.status || 'ok'
+  return msg.value.status || msgSendStatus.OK
 })
 
 const isSystemMsg = computed(() => {
@@ -640,13 +640,13 @@ watch(
             </el-header>
             <el-main class="message-content">
               <div
-                v-if="msgStatus === 'pending'"
+                v-if="msgStatus === msgSendStatus.PENDING"
                 class="my-message-status my-message-status-pending"
               >
                 <div class="loading-circular" v-loading="true"></div>
               </div>
               <div
-                v-else-if="msgStatus === 'failed'"
+                v-else-if="msgStatus === msgSendStatus.FAILED"
                 class="my-message-status my-message-status-failed"
               >
                 <el-icon color="red" title="点击重发" @click="onResendMsg"

src/views/message/components/SessionItem.vue

@@ -10,6 +10,7 @@ import { userStore, messageStore, groupStore } from '@/stores'
 import { msgChatCloseSessionService } from '@/api/message'
 import router from '@/router'
 import { ElMessage } from 'element-plus'
+import { msgSendStatus } from '@/const/msgConst'
 
 const props = defineProps([
   'sessionId',
@@ -278,6 +279,7 @@ const isShowUnread = computed(() => {
     sessionInfo.value.sessionType === MsgType.CHAT &&
     !isShowDraft.value &&
     lastMsg.value?.fromId === myAccount.value &&
+    lastMsg.value?.status === msgSendStatus.OK &&
     +sessionInfo.value?.remoteRead < +lastMsgId.value
   ) {
     return true
@@ -291,6 +293,7 @@ const isShowRead = computed(() => {
     sessionInfo.value.sessionType === MsgType.CHAT &&
     !isShowDraft.value &&
     lastMsg.value?.fromId === myAccount.value &&
+    lastMsg.value?.status === msgSendStatus.OK &&
     +sessionInfo.value?.remoteRead === +lastMsgId.value
   ) {
     return true
@@ -299,6 +302,19 @@ const isShowRead = computed(() => {
   }
 })
 
+const isShowUnSend = computed(() => {
+  if (
+    sessionInfo.value.sessionType === MsgType.CHAT &&
+    !isShowDraft.value &&
+    lastMsg.value?.fromId === myAccount.value &&
+    lastMsg.value?.status === msgSendStatus.FAILED
+  ) {
+    return true
+  } else {
+    return false
+  }
+})
+
 const isShowUnreadCount = computed(() => {
   return sessionInfo.value.unreadCount > 0
 })
@@ -429,8 +445,9 @@ defineExpose({
               >[{{ sessionInfo.unreadCount > 99 ? '99+' : sessionInfo.unreadCount }}条]</span
             >
             <span v-if="isShowDraft" class="draft">[草稿]</span>
-            <span v-if="isShowUnread" class="unread-or-read">[未读]</span>
-            <span v-if="isShowRead" class="unread-or-read">[已读]</span>
+            <span v-else-if="isShowUnread" class="unread-or-read">[未读]</span>
+            <span v-else-if="isShowRead" class="unread-or-read">[已读]</span>
+            <span v-else-if="isShowUnSend" class="unread-or-read">[未送达]</span>
             <span class="detail text-ellipsis"> {{ showDetailContent }}</span>
           </div>
           <div class="action">