fix: 标签栏图标修正；概览页展示数据切换；消息通知异常显示修复

src/components/message-box/index.vue

@@ -16,11 +16,6 @@
           @view-history="openHistory"
         />
       </a-tab-pane>
-      <template #extra>
-        <a-button type="text" @click="emptyList">
-          {{ $t('messageBox.tab.button') }}
-        </a-button>
-      </template>
     </a-tabs>
     <a-drawer v-model:visible="historyVisible" width="760px" title="通知投递历史" :footer="false" unmount-on-close @open="fetchHistory">
       <a-table :columns="historyColumns" :data="historyList" :loading="historyLoading" :pagination="historyPagination" row-key="id" @page-change="onHistoryPageChange">
@@ -50,7 +45,7 @@ import {
 import useLoading from '@/hooks/loading'
 import useNotificationSocket from '@/hooks/useNotificationSocket'
 import { Message } from '@arco-design/web-vue'
-import { computed, reactive, ref, toRefs } from 'vue'
+import { computed, reactive, ref, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import List from './list.vue'
 
@@ -59,9 +54,13 @@ interface TabItem {
   title: string
   avatar?: string
 }
+const visibleMessageTypes = ['message']
 const { loading, setLoading } = useLoading(true)
 const messageType = ref('message')
 const { t } = useI18n()
+const emit = defineEmits<{
+  (event: 'unread-count-change', count: number): void
+}>()
 const messageData = reactive<{
   renderList: MessageRecord[]
   messageList: MessageRecord[]
@@ -92,14 +91,6 @@ const tabList: TabItem[] = [
     key: 'message',
     title: t('messageBox.tab.title.message'),
   },
-  {
-    key: 'notice',
-    title: t('messageBox.tab.title.notice'),
-  },
-  {
-    key: 'todo',
-    title: t('messageBox.tab.title.todo'),
-  },
 ]
 async function fetchSourceData() {
   setLoading(true)
@@ -176,6 +167,9 @@ const getDeliveryColor = (status: string) => {
 const renderList = computed(() => {
   return messageData.messageList.filter((item) => messageType.value === item.type)
 })
+const totalUnreadCount = computed(() => {
+  return messageData.messageList.filter((item) => visibleMessageTypes.includes(item.type) && !item.status).length
+})
 const unreadCount = computed(() => {
   return renderList.value.filter((item) => !item.status).length
 })
@@ -190,9 +184,7 @@ const formatUnreadLength = (type: string) => {
 const handleItemClick = (items: MessageListType) => {
   if (renderList.value.length) readMessage([...items])
 }
-const emptyList = () => {
-  messageData.messageList = []
-}
+watch(totalUnreadCount, (count) => emit('unread-count-change', count), { immediate: true })
 fetchSourceData()
 useNotificationSocket<MessageRecord>({
   onNotification: upsertMessageToTop,

src/components/message-box/locale/en-US.ts

@@ -1,8 +1,5 @@
 export default {
   'messageBox.tab.title.message': 'Message',
-  'messageBox.tab.title.notice': 'Notice',
-  'messageBox.tab.title.todo': 'Todo',
-  'messageBox.tab.button': 'empty',
   'messageBox.allRead': 'All Read',
   'messageBox.viewMore': 'View More',
   'messageBox.noContent': 'No Content',

src/components/message-box/locale/zh-CN.ts

@@ -1,8 +1,5 @@
 export default {
   'messageBox.tab.title.message': '消息',
-  'messageBox.tab.title.notice': '通知',
-  'messageBox.tab.title.todo': '待办',
-  'messageBox.tab.button': '清空',
   'messageBox.allRead': '全部已读',
   'messageBox.viewMore': '查看更多',
   'messageBox.noContent': '暂无内容',

src/components/navbar/index.vue

@@ -52,7 +52,7 @@
       <li>
         <a-tooltip :content="$t('settings.navbar.alerts')">
           <div class="message-box-trigger">
-            <a-badge dot>
+            <a-badge dot :count="notificationUnreadCount">
               <a-button class="nav-btn" type="outline" :shape="'circle'" @click="setPopoverVisible">
                 <icon-notification />
               </a-button>
@@ -67,7 +67,7 @@
         >
           <div ref="refBtn" class="ref-btn"></div>
           <template #content>
-            <message-box />
+            <message-box @unread-count-change="handleMessageBoxUnreadCountChange" />
           </template>
         </a-popover>
       </li>
@@ -126,8 +126,10 @@
 </template>
 
 <script lang="ts" setup>
+import { MessageRecord, queryMessageList } from '@/api/message'
 import useLocale from '@/hooks/locale'
 import useUser from '@/hooks/user'
+import useNotificationSocket from '@/hooks/useNotificationSocket'
 import { LOCALE_OPTIONS } from '@/locale'
 import { useAppStore, useUserStore } from '@/store'
 import { Message } from '@arco-design/web-vue'
@@ -173,8 +175,24 @@ const setVisible = () => {
 }
 const refBtn = ref()
 const triggerBtn = ref()
+const notificationUnreadCount = ref(0)
+const visibleMessageTypes = ['message']
 const passwordChangeVisible = ref(false)
 const profileChangeVisible = ref(false)
+const updateNotificationUnreadCount = (list: MessageRecord[] = []) => {
+  notificationUnreadCount.value = list.filter((item) => visibleMessageTypes.includes(item.type) && !item.status).length
+}
+const fetchNotificationUnreadCount = async () => {
+  try {
+    const { data } = await queryMessageList()
+    updateNotificationUnreadCount(data)
+  } catch (err) {
+    updateNotificationUnreadCount()
+  }
+}
+const handleMessageBoxUnreadCountChange = (count: number) => {
+  notificationUnreadCount.value = count
+}
 const setPopoverVisible = () => {
   const event = new MouseEvent('click', {
     view: window,
@@ -201,6 +219,12 @@ const setDropDownVisible = () => {
   triggerBtn.value.dispatchEvent(event)
 }
 const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void
+
+fetchNotificationUnreadCount()
+useNotificationSocket<MessageRecord>({
+  onNotification: fetchNotificationUnreadCount,
+  onReconnectAfter: fetchNotificationUnreadCount,
+})
 </script>
 
 <style scoped lang="less">