feat: 顶部通知铃铛与站内通知中心

src/components/core/layouts/art-header-bar/index.vue

@@ -65,12 +65,16 @@
           </div>
         </div>
         <!-- 通知 -->
-        <!--<div class="btn-box notice-btn" @click="visibleNotice">-->
-        <!--  <div class="btn notice-button">-->
-        <!--    <i class="iconfont-sys notice-btn">&#xe6c2;</i>-->
-        <!--    <span class="count notice-btn"></span>-->
-        <!--  </div>-->
-        <!--</div>-->
+        <div
+          v-if="hasAuth(NOTIFICATION_PERMISSIONS.page)"
+          class="btn-box notice-btn"
+          @click.stop="showNotice = !showNotice"
+        >
+          <div class="btn notice-button">
+            <i class="iconfont-sys">&#xe6c2;</i>
+            <span v-if="unreadCount > 0" class="notice-count">{{ formattedUnreadCount }}</span>
+          </div>
+        </div>
         <!-- 聊天 -->
         <!--<div class="btn-box chat-btn" @click="openChat">-->
         <!--  <div class="btn chat-button">-->
@@ -175,7 +179,7 @@
     </div>
     <ArtWorkTab />
 
-    <art-notification v-model:value="showNotice" ref="notice" />
+    <art-notification v-model="showNotice" />
   </div>
 </template>
 
@@ -189,12 +193,17 @@
   import { useI18n } from 'vue-i18n'
   import { mittBus } from '@/utils/sys'
   import { useMenuStore } from '@/store/modules/menu'
+  import { useNotificationStore } from '@/store/modules/notification'
+  import { useAuth } from '@/composables/useAuth'
+  import { NOTIFICATION_PERMISSIONS } from '@/config/constants/notification'
   import AppConfig from '@/config'
   const isWindows = navigator.userAgent.includes('Windows')
   const { locale } = useI18n()
 
   const settingStore = useSettingStore()
   const userStore = useUserStore()
+  const notificationStore = useNotificationStore()
+  const { hasAuth } = useAuth()
   const router = useRouter()
 
   const {
@@ -214,7 +223,6 @@
   const { menuList } = storeToRefs(useMenuStore())
 
   const showNotice = ref(false)
-  const notice = ref(null)
   const userMenuPopover = ref()
 
   const isLeftMenu = computed(() => menuType.value === MenuTypeEnum.LEFT)
@@ -229,6 +237,11 @@
 
   const { width } = useWindowSize()
 
+  const unreadCount = computed(() => notificationStore.unreadCount)
+  const formattedUnreadCount = computed(() =>
+    unreadCount.value > 99 ? '99+' : String(unreadCount.value)
+  )
+
   const menuTopWidth = computed(() => {
     return width.value * 0.5
   })
@@ -251,11 +264,9 @@
 
   onMounted(() => {
     initLanguage()
-    document.addEventListener('click', bodyCloseNotice)
-  })
-
-  onUnmounted(() => {
-    document.removeEventListener('click', bodyCloseNotice)
+    if (hasAuth(NOTIFICATION_PERMISSIONS.page)) {
+      void notificationStore.refreshUnreadCount().catch(() => undefined)
+    }
   })
 
   const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
@@ -334,24 +345,6 @@
     mittBus.emit('openSearchDialog')
   }
 
-  const bodyCloseNotice = (e: any) => {
-    let { className } = e.target
-
-    if (showNotice.value) {
-      if (typeof className === 'object') {
-        showNotice.value = false
-        return
-      }
-      if (className.indexOf('notice-btn') === -1) {
-        showNotice.value = false
-      }
-    }
-  }
-
-  const openChat = () => {
-    mittBus.emit('openChat')
-  }
-
   const lockScreen = () => {
     mittBus.emit('openLockScreen')
   }