Merge pull request #267 from nagisa77/codex/fix-unread-indicator-not-disappearing

Fix menu unread indicator

open-isle-cli/src/components/HeaderComponent.vue

@@ -45,7 +45,7 @@
 <script>
 import { authState, clearToken, loadCurrentUser } from '../utils/auth'
 import { watch, nextTick } from 'vue'
-import { fetchUnreadCount } from '../utils/notification'
+import { fetchUnreadCount, notificationState } from '../utils/notification'
 import DropdownMenu from './DropdownMenu.vue'
 import SearchDropdown from './SearchDropdown.vue'
 import { isMobile } from '../utils/screen'
@@ -62,8 +62,7 @@ export default {
   data() {
     return {
       avatar: '',
-      showSearch: false,
-      unreadCount: 0
+      showSearch: false
     }
   },
   computed: {
@@ -79,6 +78,9 @@ export default {
         { text: '个人主页', onClick: this.goToProfile },
         { text: '退出', onClick: this.goToLogout }
       ]
+    },
+    unreadCount() {
+      return notificationState.unreadCount
     }
   },
   async mounted() {
@@ -92,9 +94,9 @@ export default {
     }
     const updateUnread = async () => {
       if (authState.loggedIn) {
-        this.unreadCount = await fetchUnreadCount()
+        await fetchUnreadCount()
       } else {
-        this.unreadCount = 0
+        notificationState.unreadCount = 0
       }
     }
 

open-isle-cli/src/components/MenuComponent.vue

@@ -111,7 +111,7 @@
 <script>
 import { themeState, cycleTheme, ThemeMode } from '../utils/theme'
 import { authState } from '../utils/auth'
-import { fetchUnreadCount } from '../utils/notification'
+import { fetchUnreadCount, notificationState } from '../utils/notification'
 import { watch } from 'vue'
 import { API_BASE_URL } from '../main'
 import { hatch } from 'ldrs'
@@ -127,7 +127,6 @@ export default {
   },
   data() {
     return {
-      unreadCount: 0,
       categories: [],
       tags: [],
       categoryOpen: true,
@@ -147,6 +146,9 @@ export default {
           return 'fas fa-desktop'
       }
     },
+    unreadCount() {
+      return notificationState.unreadCount
+    },
     showUnreadCount() {
       return this.unreadCount > 99 ? '99+' : this.unreadCount
     },
@@ -157,9 +159,9 @@ export default {
   async mounted() {
     const updateCount = async () => {
       if (authState.loggedIn) {
-        this.unreadCount = await fetchUnreadCount()
+        await fetchUnreadCount()
       } else {
-        this.unreadCount = 0
+        notificationState.unreadCount = 0
       }
     }
     await updateCount()

open-isle-cli/src/utils/notification.js

@@ -1,17 +1,30 @@
 import { API_BASE_URL } from '../main'
 import { getToken } from './auth'
+import { reactive } from 'vue'
+
+export const notificationState = reactive({
+  unreadCount: 0
+})
 
 export async function fetchUnreadCount() {
   try {
     const token = getToken()
-    if (!token) return 0
+    if (!token) {
+      notificationState.unreadCount = 0
+      return 0
+    }
     const res = await fetch(`${API_BASE_URL}/api/notifications/unread-count`, {
       headers: { Authorization: `Bearer ${token}` }
     })
-    if (!res.ok) return 0
+    if (!res.ok) {
+      notificationState.unreadCount = 0
+      return 0
+    }
     const data = await res.json()
+    notificationState.unreadCount = data.count
     return data.count
   } catch (e) {
+    notificationState.unreadCount = 0
     return 0
   }
 }

open-isle-cli/src/views/MessagePageView.vue

@@ -238,7 +238,7 @@ import BaseTimeline from '../components/BaseTimeline.vue'
 import BasePlaceholder from '../components/BasePlaceholder.vue'
 import NotificationContainer from '../components/NotificationContainer.vue'
 import { getToken, authState } from '../utils/auth'
-import { markNotificationsRead } from '../utils/notification'
+import { markNotificationsRead, fetchUnreadCount } from '../utils/notification'
 import { toast } from '../main'
 import { stripMarkdown } from '../utils/markdown'
 import TimeManager from '../utils/time'
@@ -265,6 +265,7 @@ export default {
       if (ok) {
         const n = notifications.value.find(n => n.id === id)
         if (n) n.read = true
+        await fetchUnreadCount()
       }
     }
 
@@ -276,6 +277,7 @@ export default {
         notifications.value.forEach(n => {
           if (n.type !== 'REGISTER_REQUEST') n.read = true
         })
+        await fetchUnreadCount()
         toast.success('已读所有消息（注册请求除外）')
       }
     }