feat: announcement支持强制弹窗通知

frontend/src/components/common/AnnouncementBell.vue

@@ -314,16 +314,18 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { storeToRefs } from 'pinia'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
-import { announcementsAPI } from '@/api'
 import { useAppStore } from '@/stores/app'
+import { useAnnouncementStore } from '@/stores/announcements'
 import { formatRelativeTime, formatRelativeWithDateTime } from '@/utils/format'
 import type { UserAnnouncement } from '@/types'
 import Icon from '@/components/icons/Icon.vue'
 
 const { t } = useI18n()
 const appStore = useAppStore()
+const announcementStore = useAnnouncementStore()
 
 // Configure marked
 marked.setOptions({
@@ -331,17 +333,14 @@ marked.setOptions({
   gfm: true,
 })
 
-// State
-const announcements = ref<UserAnnouncement[]>([])
+// Use store state (storeToRefs for reactivity)
+const { announcements, loading } = storeToRefs(announcementStore)
+const unreadCount = computed(() => announcementStore.unreadCount)
+
+// Local modal state
 const isModalOpen = ref(false)
 const detailModalOpen = ref(false)
 const selectedAnnouncement = ref<UserAnnouncement | null>(null)
-const loading = ref(false)
-
-// Computed
-const unreadCount = computed(() =>
-  announcements.value.filter((a) => !a.read_at).length
-)
 
 // Methods
 function renderMarkdown(content: string): string {
@@ -350,24 +349,8 @@ function renderMarkdown(content: string): string {
   return DOMPurify.sanitize(html)
 }
 
-async function loadAnnouncements() {
-  try {
-    loading.value = true
-    const allAnnouncements = await announcementsAPI.list(false)
-    announcements.value = allAnnouncements.slice(0, 20)
-  } catch (err: any) {
-    console.error('Failed to load announcements:', err)
-    appStore.showError(err?.message || t('common.unknownError'))
-  } finally {
-    loading.value = false
-  }
-}
-
 function openModal() {
   isModalOpen.value = true
-  if (announcements.value.length === 0) {
-    loadAnnouncements()
-  }
 }
 
 function closeModal() {
@@ -389,14 +372,7 @@ function closeDetail() {
 
 async function markAsRead(id: number) {
   try {
-    await announcementsAPI.markRead(id)
-    const announcement = announcements.value.find((a) => a.id === id)
-    if (announcement) {
-      announcement.read_at = new Date().toISOString()
-    }
-    if (selectedAnnouncement.value?.id === id) {
-      selectedAnnouncement.value.read_at = new Date().toISOString()
-    }
+    await announcementStore.markAsRead(id)
   } catch (err: any) {
     appStore.showError(err?.message || t('common.unknownError'))
   }
@@ -410,19 +386,10 @@ async function markAsReadAndClose(id: number) {
 
 async function markAllAsRead() {
   try {
-    loading.value = true
-    const unreadAnnouncements = announcements.value.filter((a) => !a.read_at)
-    await Promise.all(unreadAnnouncements.map((a) => announcementsAPI.markRead(a.id)))
-    announcements.value.forEach((a) => {
-      if (!a.read_at) {
-        a.read_at = new Date().toISOString()
-      }
-    })
+    await announcementStore.markAllAsRead()
     appStore.showSuccess(t('announcements.allMarkedAsRead'))
   } catch (err: any) {
     appStore.showError(err?.message || t('common.unknownError'))
-  } finally {
-    loading.value = false
   }
 }
 
@@ -438,22 +405,19 @@ function handleEscape(e: KeyboardEvent) {
 
 onMounted(() => {
   document.addEventListener('keydown', handleEscape)
-  loadAnnouncements()
 })
 
 onBeforeUnmount(() => {
   document.removeEventListener('keydown', handleEscape)
-  // Restore body overflow in case component is unmounted while modals are open
   document.body.style.overflow = ''
 })
 
-watch([isModalOpen, detailModalOpen], ([modal, detail]) => {
-  if (modal || detail) {
-    document.body.style.overflow = 'hidden'
-  } else {
-    document.body.style.overflow = ''
+watch(
+  [isModalOpen, detailModalOpen, () => announcementStore.currentPopup],
+  ([modal, detail, popup]) => {
+    document.body.style.overflow = (modal || detail || popup) ? 'hidden' : ''
   }
-})
+)
 </script>
 
 <style scoped>