refactor: 消息通知点开后才查询消息列表

src/apis/system/message.ts

@@ -17,3 +17,8 @@ export function deleteMessage(ids: string | Array<string>) {
 export function readMessage(ids?: string | Array<string>) {
   return http.patch(`${BASE_URL}/read`, ids)
 }
+
+/** @desc 查询未读消息数量 */
+export function getUnreadMessageCount() {
+  return http.get(`${BASE_URL}/unread`)
+}

src/layout/components/HeaderRightBar/Message.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="message">
-    <a-list>
+    <a-list :loading="loading">
       <template #header>通知</template>
-      <a-list-item v-for="item in props.data" :key="item.id">
+      <a-list-item v-for="item in messageList" :key="item.id">
         <div class="content-wrapper" @click="open">
           <div class="content">{{ item.title }}</div>
           <div class="date">{{ item.createTime }}</div>
@@ -19,19 +19,33 @@
 </template>
 
 <script setup lang="ts">
-import { readMessage } from '@/apis'
+import { onMounted } from 'vue'
+import { type MessageResp, listMessage, readMessage } from '@/apis'
 
-const props = defineProps({
+const emit = defineEmits<{
-  data: {
+  (e: 'readall-success'): void
-    type: Array as PropType<any>, // 简化数据结构以便测试
+}>()
-    required: true
+
-  },
+const queryParam = reactive({
-  fetch: {
+  isRead: false,
-    type: Function, // 简化数据结构以便测试
+  sort: ['createTime,desc'],
-    required: true
+  page: 1,
-  }
+  size: 5
 })
 
+const messageList = ref<MessageResp[]>()
+const loading = ref(false)
+// 查询消息数据
+const getMessageData = async () => {
+  try {
+    loading.value = true
+    const { data } = await listMessage(queryParam)
+    messageList.value = data.list
+  } finally {
+    loading.value = false
+  }
+}
+
 // 打开消息中心
 const open = () => {
   window.open('/#/setting/message')
@@ -40,8 +54,13 @@ const open = () => {
 // 全部已读
 const readAll = async () => {
   await readMessage()
-  props.fetch()
+  await getMessageData()
+  emit('readall-success')
 }
+
+onMounted(() => {
+  getMessageData()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -71,9 +90,6 @@ const readAll = async () => {
 
     &:hover {
       background-color: var(--color-bg-4);
-    }
-
-    &:active {
       color: rgb(var(--arcoblue-6));
     }
   }

src/layout/components/HeaderRightBar/index.vue

@@ -17,7 +17,7 @@
         :content-style="{ marginTop: '-5px', padding: 0, border: 'none' }"
         :arrow-style="{ width: 0, height: 0 }"
       >
-        <a-badge :count="messageData.length" dot>
+        <a-badge :count="unreadMessageCount" dot>
           <a-button size="mini" class="gi_hover_btn">
             <template #icon>
               <icon-notification :size="18" />
@@ -25,7 +25,7 @@
           </a-button>
         </a-badge>
         <template #content>
-          <Message :fetch="getMessageData" :data="messageData" />
+          <Message @readall-success="getMessageCount" />
         </template>
       </a-popover>
 
@@ -74,10 +74,9 @@
 import { Modal } from '@arco-design/web-vue'
 import { useFullscreen } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
-import dayjs from 'dayjs'
 import Message from './Message.vue'
 import SettingDrawer from './SettingDrawer.vue'
-import { listMessage } from '@/apis'
+import { getUnreadMessageCount } from '@/apis'
 import { useUserStore } from '@/stores'
 import { isMobile } from '@/utils'
 import { getToken } from '@/utils/auth'
@@ -91,8 +90,9 @@ onBeforeUnmount(() => {
   }
 })
 
-const messageData = ref<Array<any>>([])
+const unreadMessageCount = ref(0)
-const createWebSocket = (token) => {
+// 初始化 WebSocket
+const initWebSocket = (token: string) => {
   socket = new WebSocket(`${import.meta.env.VITE_API_WS_URL}/ws?token=${token}`)
   socket.onopen = () => {
     // console.log('WebSocket connection opened')
@@ -100,15 +100,7 @@ const createWebSocket = (token) => {
 
   socket.onmessage = (event) => {
     const data = JSON.parse(event.data)
-    messageData.value.unshift({
+    unreadMessageCount.value = Number.parseInt(data?.content)
-      id: data?.id,
-      title: data?.content,
-      type: data?.type,
-      isRead: data?.isRead,
-      createTime:
-        data?.sendTime
-        && dayjs(data.sendTime).format('YYYY-MM-DD HH:mm:ss')
-    })
   }
 
   socket.onerror = () => {
@@ -120,19 +112,13 @@ const createWebSocket = (token) => {
   }
 }
 
-// 查询消息通知
+// 查询未读消息数量
-const queryMessageParam = reactive({
+const getMessageCount = async () => {
-  isRead: false,
+  const { data } = await getUnreadMessageCount()
-  sort: ['createTime,desc'],
+  unreadMessageCount.value = data.total
-  page: 1,
-  size: 5
-})
-const getMessageData = async () => {
   const token = getToken()
-  const { data } = await listMessage(queryMessageParam)
-  messageData.value = data.list
   if (token) {
-    createWebSocket(token)
+    initWebSocket(token)
   }
 }
 
@@ -187,7 +173,7 @@ const checkPasswordExpired = () => {
 
 onMounted(() => {
   checkPasswordExpired()
-  getMessageData()
+  getMessageCount()
 })
 </script>
 

src/views/system/user/UserDetailDrawer.vue

@@ -1,7 +1,9 @@
 <template>
   <a-drawer v-model:visible="visible" title="用户详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
     <a-descriptions :column="2" size="large" class="general-description">
-      <a-descriptions-item label="ID" :span="2">{{ dataDetail?.id }}</a-descriptions-item>
+      <a-descriptions-item label="ID" :span="2">
+        <a-typography-paragraph copyable>{{ dataDetail?.id }}</a-typography-paragraph>
+      </a-descriptions-item>
       <a-descriptions-item label="用户名">
         <a-typography-paragraph :copyable="!!dataDetail?.username">{{ dataDetail?.username }}</a-typography-paragraph>
       </a-descriptions-item>