fix: 修复消息已读后计数未更新的问题

src/apis/system/user-message.ts

@@ -15,6 +15,11 @@ export function listMessage(query: T.MessagePageQuery) {
   return http.get<PageRes<T.MessageResp[]>>(`${BASE_URL}`, query)
 }
 
+/** @desc 获取用户消息详情 */
+export function getUserMessage(id: number) {
+  return http.get<T.MessageResp>(`${BASE_URL}/${id}`)
+}
+
 /** @desc 删除消息 */
 export function deleteMessage(ids: Array<string>) {
   return http.del(`${BASE_URL}`, { ids })

src/layout/components/HeaderRightBar/Message.vue

@@ -108,6 +108,22 @@ onMounted(() => {
 
     .arco-list-content {
       max-height: 184px;
+      overflow-y: auto;
+      padding-right: 8px;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-text-4);
+        border-radius: 3px;
+
+        &:hover {
+          background-color: var(--color-text-3);
+        }
+      }
 
       .arco-list-item {
         padding: 6px;

src/views/user/message/components/MyMessage.vue

@@ -101,7 +101,15 @@
 import type { TableInstance } from '@arco-design/web-vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
-import { type MessageQuery, deleteMessage, listMessage, readAllMessage, readMessage } from '@/apis'
+import {
+  type MessageQuery,
+  type MessageResp,
+  deleteMessage,
+  getUserMessage,
+  listMessage,
+  readAllMessage,
+  readMessage,
+} from '@/apis'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import mittBus from '@/utils/mitt'
@@ -183,28 +191,15 @@ const onReadAll = async () => {
   })
 }
 
-// 消息详情弹窗相关
 const messageDetailVisible = ref(false)
-const currentMessage = ref()
+const currentMessage = ref<MessageResp>()
-
-// 标记单条消息为已读
-const markAsRead = async (messageId: string) => {
-  try {
-    await readMessage([messageId])
-    search()
-  } catch (error) {
-    Message.error('操作失败')
-  }
-}
-
 // 显示消息详情
 const showMessageDetail = async (record: any) => {
-  currentMessage.value = record
   messageDetailVisible.value = true
-  // 如果消息未读，自动标记为已读
+  const { data } = await getUserMessage(record.id)
-  if (!record.isRead) {
+  currentMessage.value = data
-    await markAsRead(record.id)
+  record.isRead = currentMessage.value?.isRead
-  }
+  onSuccess()
 }
 </script>