feat: 重新设计公告系统为Header铃铛通知

- 新增 AnnouncementBell 组件，支持 Modal 弹窗和 Markdown 渲染
- 移除 Dashboard 横幅和独立公告页面
- 铃铛位置在 Header 文档按钮左侧，显示未读红点
- 支持点击查看详情、标记已读、全部已读等操作
- 完善国际化，移除所有硬编码中文
- 修复 AnnouncementTargetingEditor watch 循环问题

frontend/package.json

@@ -19,8 +19,10 @@
     "@vueuse/core": "^10.7.0",
     "axios": "^1.6.2",
     "chart.js": "^4.4.1",
+    "dompurify": "^3.3.1",
     "driver.js": "^1.4.0",
     "file-saver": "^2.0.5",
+    "marked": "^17.0.1",
     "pinia": "^2.1.7",
     "qrcode": "^1.5.4",
     "vue": "^3.4.0",
@@ -30,6 +32,7 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/file-saver": "^2.0.7",
     "@types/mdx": "^2.0.13",
     "@types/node": "^20.10.5",

frontend/pnpm-lock.yaml

@@ -20,12 +20,18 @@ importers:
       chart.js:
         specifier: ^4.4.1
         version: 4.5.1
+      dompurify:
+        specifier: ^3.3.1
+        version: 3.3.1
       driver.js:
         specifier: ^1.4.0
         version: 1.4.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
       pinia:
         specifier: ^2.1.7
         version: 2.3.1(typescript@5.6.3)(vue@3.5.26(typescript@5.6.3))
@@ -48,6 +54,9 @@ importers:
         specifier: ^0.18.5
         version: 0.18.5
     devDependencies:
+      '@types/dompurify':
+        specifier: ^3.0.5
+        version: 3.2.0
       '@types/file-saver':
         specifier: ^2.0.7
         version: 2.0.7
@@ -1460,6 +1469,10 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/dompurify@3.2.0':
+    resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
+    deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
+
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
@@ -5901,6 +5914,10 @@ snapshots:
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/dompurify@3.2.0':
+    dependencies:
+      dompurify: 3.3.1
+
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.8

frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue

@@ -323,6 +323,7 @@ function ensureSelectionPath(groupIndex: number, condIndex: number) {
   if (!subscriptionSelections[groupIndex][condIndex]) subscriptionSelections[groupIndex][condIndex] = []
 }
 
+// Sync from modelValue to subscriptionSelections (one-way: model -> local state)
 watch(
   () => props.modelValue,
   (v) => {
@@ -333,20 +334,34 @@ watch(
         const c = allOf[ci]
         if (c?.type === 'subscription') {
           ensureSelectionPath(gi, ci)
-          subscriptionSelections[gi][ci] = (c.group_ids ?? []).slice()
+          // Only update if different to avoid triggering unnecessary updates
+          const newIds = (c.group_ids ?? []).slice()
+          const currentIds = subscriptionSelections[gi]?.[ci] ?? []
+          if (JSON.stringify(newIds.sort()) !== JSON.stringify(currentIds.sort())) {
+            subscriptionSelections[gi][ci] = newIds
+          }
         }
       }
     }
   },
-  { immediate: true, deep: true }
+  { immediate: true }
 )
 
+// Sync from subscriptionSelections to modelValue (one-way: local state -> model)
+// Use a debounced approach to avoid infinite loops
+let syncTimeout: ReturnType<typeof setTimeout> | null = null
 watch(
   () => subscriptionSelections,
   () => {
-    // sync back to targeting
-    updateTargeting((draft) => {
-      const groups = draft.any_of ?? []
+    // Debounce the sync to avoid rapid fire updates
+    if (syncTimeout) clearTimeout(syncTimeout)
+
+    syncTimeout = setTimeout(() => {
+      // Build the new targeting state
+      const newTargeting: TargetingDraft = JSON.parse(JSON.stringify(props.modelValue ?? { any_of: [] }))
+      if (!newTargeting.any_of) newTargeting.any_of = []
+
+      const groups = newTargeting.any_of ?? []
       for (let gi = 0; gi < groups.length; gi++) {
         const allOf = groups[gi]?.all_of ?? []
         for (let ci = 0; ci < allOf.length; ci++) {
@@ -358,7 +373,12 @@ watch(
           }
         }
       }
-    })
+
+      // Only emit if there's an actual change (deep comparison)
+      if (JSON.stringify(props.modelValue) !== JSON.stringify(newTargeting)) {
+        emit('update:modelValue', newTargeting)
+      }
+    }, 0)
   },
   { deep: true }
 )

frontend/src/components/common/AnnouncementBell.vue

+<template>
+  <div>
+    <!-- 铃铛按钮 -->
+    <button
+      @click="openModal"
+      class="relative flex h-9 w-9 items-center justify-center rounded-lg text-gray-600 transition-all hover:bg-gray-100 hover:scale-105 dark:text-gray-400 dark:hover:bg-dark-800"
+      :class="{ 'text-blue-600 dark:text-blue-400': unreadCount > 0 }"
+      :aria-label="t('announcements.title')"
+    >
+      <Icon name="bell" size="md" />
+      <!-- 未读红点 -->
+      <span
+        v-if="unreadCount > 0"
+        class="absolute right-1 top-1 flex h-2 w-2"
+      >
+        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75"></span>
+        <span class="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
+      </span>
+    </button>
+
+    <!-- 公告列表 Modal -->
+    <Teleport to="body">
+      <Transition name="modal-fade">
+        <div
+          v-if="isModalOpen"
+          class="fixed inset-0 z-[100] flex items-start justify-center overflow-y-auto bg-gradient-to-br from-black/70 via-black/60 to-black/70 p-4 pt-[8vh] backdrop-blur-md"
+          @click="closeModal"
+        >
+          <div
+            class="w-full max-w-[620px] overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
+            @click.stop
+          >
+            <!-- Header with Gradient -->
+            <div class="relative overflow-hidden border-b border-gray-100/80 bg-gradient-to-br from-blue-50/50 to-indigo-50/30 px-6 py-5 dark:border-dark-700/50 dark:from-blue-900/10 dark:to-indigo-900/5">
+              <div class="relative z-10 flex items-start justify-between">
+                <div>
+                  <div class="flex items-center gap-2">
+                    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/30">
+                      <Icon name="bell" size="sm" />
+                    </div>
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+                      {{ t('announcements.title') }}
+                    </h2>
+                  </div>
+                  <p v-if="unreadCount > 0" class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                    <span class="font-medium text-blue-600 dark:text-blue-400">{{ unreadCount }}</span>
+                    {{ t('announcements.unread') }}
+                  </p>
+                </div>
+                <div class="flex items-center gap-2">
+                  <button
+                    v-if="unreadCount > 0"
+                    @click="markAllAsRead"
+                    :disabled="loading"
+                    class="rounded-lg bg-blue-600 px-4 py-2 text-xs font-medium text-white shadow-lg shadow-blue-500/30 transition-all hover:bg-blue-700 hover:shadow-xl disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+                  >
+                    {{ t('announcements.markAllRead') }}
+                  </button>
+                  <button
+                    @click="closeModal"
+                    class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/50 text-gray-500 backdrop-blur-sm transition-all hover:bg-white hover:text-gray-700 dark:bg-dark-700/50 dark:text-gray-400 dark:hover:bg-dark-700 dark:hover:text-gray-300"
+                    :aria-label="t('common.close')"
+                  >
+                    <Icon name="x" size="sm" />
+                  </button>
+                </div>
+              </div>
+              <!-- Decorative gradient -->
+              <div class="absolute right-0 top-0 h-full w-48 bg-gradient-to-l from-indigo-100/20 to-transparent dark:from-indigo-900/10"></div>
+            </div>
+
+            <!-- Body -->
+            <div class="max-h-[65vh] overflow-y-auto">
+              <!-- Loading -->
+              <div v-if="loading" class="flex items-center justify-center py-16">
+                <div class="relative">
+                  <div class="h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600 dark:border-dark-600 dark:border-t-blue-400"></div>
+                  <div class="absolute inset-0 h-12 w-12 animate-pulse rounded-full border-4 border-blue-400/30"></div>
+                </div>
+              </div>
+
+              <!-- Announcements List -->
+              <div v-else-if="announcements.length > 0">
+                <div
+                  v-for="item in announcements"
+                  :key="item.id"
+                  class="group relative flex items-center gap-4 border-b border-gray-100 px-6 py-4 transition-all hover:bg-gray-50 dark:border-dark-700 dark:hover:bg-dark-700/30"
+                  :class="{ 'bg-blue-50/30 dark:bg-blue-900/5': !item.read_at }"
+                  style="min-height: 72px"
+                  @click="openDetail(item)"
+                >
+                  <!-- Status Indicator -->
+                  <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center">
+                    <div
+                      v-if="!item.read_at"
+                      class="relative flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/30"
+                    >
+                      <!-- Pulse ring -->
+                      <span class="absolute inline-flex h-full w-full animate-ping rounded-xl bg-blue-400 opacity-75"></span>
+                      <!-- Icon -->
+                      <svg class="relative z-10 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </div>
+                    <div
+                      v-else
+                      class="flex h-10 w-10 items-center justify-center rounded-xl bg-gray-100 text-gray-400 dark:bg-dark-700 dark:text-gray-600"
+                    >
+                      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </div>
+                  </div>
+
+                  <!-- Content -->
+                  <div class="flex min-w-0 flex-1 items-center justify-between gap-4">
+                    <div class="min-w-0 flex-1">
+                      <h3 class="truncate text-sm font-medium text-gray-900 dark:text-white">
+                        {{ item.title }}
+                      </h3>
+                      <div class="mt-1 flex items-center gap-2">
+                        <time class="text-xs text-gray-500 dark:text-gray-400">
+                          {{ formatRelativeTime(item.created_at) }}
+                        </time>
+                        <span
+                          v-if="!item.read_at"
+                          class="inline-flex items-center gap-1 rounded-md bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
+                        >
+                          <span class="relative flex h-1.5 w-1.5">
+                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75"></span>
+                            <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-600"></span>
+                          </span>
+                          {{ t('announcements.unread') }}
+                        </span>
+                      </div>
+                    </div>
+
+                    <!-- Arrow -->
+                    <div class="flex-shrink-0">
+                      <svg
+                        class="h-5 w-5 text-gray-400 transition-transform group-hover:translate-x-1 dark:text-gray-600"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+                      </svg>
+                    </div>
+                  </div>
+
+                  <!-- Unread indicator bar -->
+                  <div
+                    v-if="!item.read_at"
+                    class="absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-blue-500 to-indigo-600"
+                  ></div>
+                </div>
+              </div>
+
+              <!-- Empty State -->
+              <div v-else class="flex flex-col items-center justify-center py-16">
+                <div class="relative mb-4">
+                  <div class="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-dark-700 dark:to-dark-600">
+                    <Icon name="inbox" size="xl" class="text-gray-400 dark:text-gray-500" />
+                  </div>
+                  <div class="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-white">
+                    <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                    </svg>
+                  </div>
+                </div>
+                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ t('announcements.empty') }}</p>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t('announcements.emptyDescription') }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 公告详情 Modal -->
+    <Teleport to="body">
+      <Transition name="modal-fade">
+        <div
+          v-if="detailModalOpen && selectedAnnouncement"
+          class="fixed inset-0 z-[110] flex items-start justify-center overflow-y-auto bg-gradient-to-br from-black/70 via-black/60 to-black/70 p-4 pt-[6vh] backdrop-blur-md"
+          @click="closeDetail"
+        >
+          <div
+            class="w-full max-w-[780px] overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
+            @click.stop
+          >
+            <!-- Header with Decorative Elements -->
+            <div class="relative overflow-hidden border-b border-gray-100 bg-gradient-to-br from-blue-50/80 via-indigo-50/50 to-purple-50/30 px-8 py-6 dark:border-dark-700 dark:from-blue-900/20 dark:via-indigo-900/10 dark:to-purple-900/5">
+              <!-- Decorative background elements -->
+              <div class="absolute right-0 top-0 h-full w-64 bg-gradient-to-l from-indigo-100/30 to-transparent dark:from-indigo-900/20"></div>
+              <div class="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br from-blue-400/20 to-indigo-500/20 blur-3xl"></div>
+              <div class="absolute -left-4 -bottom-4 h-24 w-24 rounded-full bg-gradient-to-tr from-purple-400/20 to-pink-500/20 blur-2xl"></div>
+
+              <div class="relative z-10 flex items-start justify-between gap-4">
+                <div class="flex-1 min-w-0">
+                  <!-- Icon and Category -->
+                  <div class="mb-3 flex items-center gap-2">
+                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/30">
+                      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <span class="rounded-lg bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+                        {{ t('announcements.title') }}
+                      </span>
+                      <span
+                        v-if="!selectedAnnouncement.read_at"
+                        class="inline-flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600 px-2.5 py-1 text-xs font-medium text-white shadow-lg shadow-blue-500/30"
+                      >
+                        <span class="relative flex h-2 w-2">
+                          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
+                          <span class="relative inline-flex h-2 w-2 rounded-full bg-white"></span>
+                        </span>
+                        {{ t('announcements.unread') }}
+                      </span>
+                    </div>
+                  </div>
+
+                  <!-- Title -->
+                  <h2 class="mb-3 text-2xl font-bold leading-tight text-gray-900 dark:text-white">
+                    {{ selectedAnnouncement.title }}
+                  </h2>
+
+                  <!-- Meta Info -->
+                  <div class="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
+                    <div class="flex items-center gap-1.5">
+                      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                      <time>{{ formatRelativeWithDateTime(selectedAnnouncement.created_at) }}</time>
+                    </div>
+                    <div class="flex items-center gap-1.5">
+                      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                      </svg>
+                      <span>{{ selectedAnnouncement.read_at ? t('announcements.read') : t('announcements.unread') }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Close button -->
+                <button
+                  @click="closeDetail"
+                  class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-white/50 text-gray-500 backdrop-blur-sm transition-all hover:bg-white hover:text-gray-700 hover:shadow-lg dark:bg-dark-700/50 dark:text-gray-400 dark:hover:bg-dark-700 dark:hover:text-gray-300"
+                  :aria-label="t('common.close')"
+                >
+                  <Icon name="x" size="md" />
+                </button>
+              </div>
+            </div>
+
+            <!-- Body with Enhanced Markdown -->
+            <div class="max-h-[60vh] overflow-y-auto bg-white px-8 py-8 dark:bg-dark-800">
+              <!-- Content with decorative border -->
+              <div class="relative">
+                <!-- Decorative left border -->
+                <div class="absolute left-0 top-0 bottom-0 w-1 rounded-full bg-gradient-to-b from-blue-500 via-indigo-500 to-purple-500"></div>
+
+                <div class="pl-6">
+                  <div
+                    class="markdown-body prose prose-sm max-w-none dark:prose-invert"
+                    v-html="renderMarkdown(selectedAnnouncement.content)"
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Footer with Actions -->
+            <div class="border-t border-gray-100 bg-gray-50/50 px-8 py-5 dark:border-dark-700 dark:bg-dark-900/30">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <span>{{ selectedAnnouncement.read_at ? t('announcements.readStatus') : t('announcements.markReadHint') }}</span>
+                </div>
+                <div class="flex items-center gap-3">
+                  <button
+                    @click="closeDetail"
+                    class="rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 hover:shadow dark:border-dark-600 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600"
+                  >
+                    {{ t('common.close') }}
+                  </button>
+                  <button
+                    v-if="!selectedAnnouncement.read_at"
+                    @click="markAsReadAndClose(selectedAnnouncement.id)"
+                    class="rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-500/30 transition-all hover:shadow-xl hover:scale-105"
+                  >
+                    <span class="flex items-center gap-2">
+                      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                      </svg>
+                      {{ t('announcements.markRead') }}
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+import { announcementsAPI } from '@/api'
+import { useAppStore } from '@/stores/app'
+import { formatRelativeTime, formatRelativeWithDateTime } from '@/utils/format'
+import type { UserAnnouncement } from '@/types'
+import Icon from '@/components/icons/Icon.vue'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+// Configure marked
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+})
+
+// State
+const announcements = ref<UserAnnouncement[]>([])
+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 {
+  if (!content) return ''
+  const html = marked.parse(content) as 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() {
+  isModalOpen.value = false
+}
+
+function openDetail(announcement: UserAnnouncement) {
+  selectedAnnouncement.value = announcement
+  detailModalOpen.value = true
+  if (!announcement.read_at) {
+    markAsRead(announcement.id)
+  }
+}
+
+function closeDetail() {
+  detailModalOpen.value = false
+  selectedAnnouncement.value = null
+}
+
+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()
+    }
+  } catch (err: any) {
+    appStore.showError(err?.message || t('common.unknownError'))
+  }
+}
+
+async function markAsReadAndClose(id: number) {
+  await markAsRead(id)
+  appStore.showSuccess(t('announcements.markedAsRead'))
+  closeDetail()
+}
+
+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()
+      }
+    })
+    appStore.showSuccess(t('announcements.allMarkedAsRead'))
+  } catch (err: any) {
+    appStore.showError(err?.message || t('common.unknownError'))
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleEscape(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    if (detailModalOpen.value) {
+      closeDetail()
+    } else if (isModalOpen.value) {
+      closeModal()
+    }
+  }
+}
+
+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 = ''
+  }
+})
+</script>
+
+<style scoped>
+/* Modal Animations */
+.modal-fade-enter-active {
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.modal-fade-leave-active {
+  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+.modal-fade-enter-from > div {
+  transform: scale(0.94) translateY(-12px);
+  opacity: 0;
+}
+
+.modal-fade-leave-to > div {
+  transform: scale(0.96) translateY(-8px);
+  opacity: 0;
+}
+
+/* Scrollbar Styling */
+.overflow-y-auto::-webkit-scrollbar {
+  width: 8px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, #cbd5e1, #94a3b8);
+  border-radius: 4px;
+}
+
+.dark .overflow-y-auto::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, #4b5563, #374151);
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to bottom, #94a3b8, #64748b);
+}
+
+.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(to bottom, #6b7280, #4b5563);
+}
+</style>
+
+<style>
+/* Enhanced Markdown Styles */
+.markdown-body {
+  @apply text-[15px] leading-[1.75];
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+.markdown-body h1 {
+  @apply mb-6 mt-8 border-b border-gray-200 pb-3 text-3xl font-bold text-gray-900 dark:border-dark-600 dark:text-white;
+}
+
+.markdown-body h2 {
+  @apply mb-4 mt-7 border-b border-gray-100 pb-2 text-2xl font-bold text-gray-900 dark:border-dark-700 dark:text-white;
+}
+
+.markdown-body h3 {
+  @apply mb-3 mt-6 text-xl font-semibold text-gray-900 dark:text-white;
+}
+
+.markdown-body h4 {
+  @apply mb-2 mt-5 text-lg font-semibold text-gray-900 dark:text-white;
+}
+
+.markdown-body p {
+  @apply mb-4 leading-relaxed;
+}
+
+.markdown-body a {
+  @apply font-medium text-blue-600 underline decoration-blue-600/30 decoration-2 underline-offset-2 transition-all hover:decoration-blue-600 dark:text-blue-400 dark:decoration-blue-400/30 dark:hover:decoration-blue-400;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  @apply mb-4 ml-6 space-y-2;
+}
+
+.markdown-body ul {
+  @apply list-disc;
+}
+
+.markdown-body ol {
+  @apply list-decimal;
+}
+
+.markdown-body li {
+  @apply leading-relaxed;
+  @apply pl-2;
+}
+
+.markdown-body li::marker {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.markdown-body blockquote {
+  @apply relative my-5 border-l-4 border-blue-500 bg-blue-50/50 py-3 pl-5 pr-4 italic text-gray-700 dark:border-blue-400 dark:bg-blue-900/10 dark:text-gray-300;
+}
+
+.markdown-body blockquote::before {
+  content: '"';
+  @apply absolute -left-1 top-0 text-5xl font-serif text-blue-500/20 dark:text-blue-400/20;
+}
+
+.markdown-body code {
+  @apply rounded-lg bg-gray-100 px-2 py-1 text-[13px] font-mono text-pink-600 dark:bg-dark-700 dark:text-pink-400;
+}
+
+.markdown-body pre {
+  @apply my-5 overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 p-5 dark:border-dark-600 dark:bg-dark-900/50;
+}
+
+.markdown-body pre code {
+  @apply bg-transparent p-0 text-[13px] text-gray-800 dark:text-gray-200;
+}
+
+.markdown-body hr {
+  @apply my-8 border-0 border-t-2 border-gray-200 dark:border-dark-700;
+}
+
+.markdown-body table {
+  @apply mb-5 w-full overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600;
+}
+
+.markdown-body th,
+.markdown-body td {
+  @apply border-r border-b border-gray-200 px-4 py-3 text-left dark:border-dark-600;
+}
+
+.markdown-body th:last-child,
+.markdown-body td:last-child {
+  @apply border-r-0;
+}
+
+.markdown-body tr:last-child td {
+  @apply border-b-0;
+}
+
+.markdown-body th {
+  @apply bg-gradient-to-br from-blue-50 to-indigo-50 font-semibold text-gray-900 dark:from-blue-900/20 dark:to-indigo-900/10 dark:text-white;
+}
+
+.markdown-body tbody tr {
+  @apply transition-colors hover:bg-gray-50 dark:hover:bg-dark-700/30;
+}
+
+.markdown-body img {
+  @apply my-5 max-w-full rounded-xl border border-gray-200 shadow-md dark:border-dark-600;
+}
+
+.markdown-body strong {
+  @apply font-semibold text-gray-900 dark:text-white;
+}
+
+.markdown-body em {
+  @apply italic text-gray-600 dark:text-gray-400;
+}
+</style>

frontend/src/components/icons/Icon.vue

@@ -107,6 +107,9 @@ const icons = {
   database: 'M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125',
   cube: 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4',
 
+  // Notification
+  bell: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9',
+
   // Misc
   bolt: 'M13 10V3L4 14h7v7l9-11h-7z',
   sparkles: 'M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z',

frontend/src/components/layout/AppHeader.vue

@@ -21,8 +21,11 @@
         </div>
       </div>
 
-      <!-- Right: Docs + Language + Subscriptions + Balance + User Dropdown -->
+      <!-- Right: Announcements + Docs + Language + Subscriptions + Balance + User Dropdown -->
       <div class="flex items-center gap-3">
+        <!-- Announcement Bell -->
+        <AnnouncementBell v-if="user" />
+
         <!-- Docs Link -->
         <a
           v-if="docUrl"
@@ -210,6 +213,7 @@ import { useI18n } from 'vue-i18n'
 import { useAppStore, useAuthStore, useOnboardingStore } from '@/stores'
 import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue'
 import SubscriptionProgressMini from '@/components/common/SubscriptionProgressMini.vue'
+import AnnouncementBell from '@/components/common/AnnouncementBell.vue'
 import Icon from '@/components/icons/Icon.vue'
 
 const router = useRouter()

frontend/src/components/layout/AppSidebar.vue

@@ -433,7 +433,6 @@ const ChevronDoubleRightIcon = {
 const userNavItems = computed(() => {
   const items = [
     { path: '/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
-    { path: '/announcements', label: t('nav.announcements'), icon: BellIcon },
     { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
     { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
     { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
@@ -456,7 +455,6 @@ const userNavItems = computed(() => {
 // Personal navigation items (for admin's "My Account" section, without Dashboard)
 const personalNavItems = computed(() => {
   const items = [
-    { path: '/announcements', label: t('nav.announcements'), icon: BellIcon },
     { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
     { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
     { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },

frontend/src/i18n/locales/en.ts

@@ -3139,13 +3139,22 @@ export default {
     description: 'View system announcements',
     unreadOnly: 'Show unread only',
     markRead: 'Mark as read',
+    markAllRead: 'Mark all as read',
+    viewAll: 'View all announcements',
+    markedAsRead: 'Marked as read',
+    allMarkedAsRead: 'All announcements marked as read',
+    newCount: '{count} new announcement | {count} new announcements',
     readAt: 'Read at',
     read: 'Read',
     unread: 'Unread',
     startsAt: 'Starts at',
     endsAt: 'Ends at',
     empty: 'No announcements',
-    emptyUnread: 'No unread announcements'
+    emptyUnread: 'No unread announcements',
+    total: 'announcements',
+    emptyDescription: 'There are no system announcements at this time',
+    readStatus: 'You have read this announcement',
+    markReadHint: 'Click "Mark as read" to mark this announcement'
   },
 
   // User Subscriptions Page

frontend/src/i18n/locales/zh.ts

@@ -3288,13 +3288,22 @@ export default {
     description: '查看系统公告',
     unreadOnly: '仅显示未读',
     markRead: '标记已读',
+    markAllRead: '全部已读',
+    viewAll: '查看全部公告',
+    markedAsRead: '已标记为已读',
+    allMarkedAsRead: '所有公告已标记为已读',
+    newCount: '有 {count} 条新公告',
     readAt: '已读时间',
     read: '已读',
     unread: '未读',
     startsAt: '开始时间',
     endsAt: '结束时间',
     empty: '暂无公告',
-    emptyUnread: '暂无未读公告'
+    emptyUnread: '暂无未读公告',
+    total: '条公告',
+    emptyDescription: '暂时没有任何系统公告',
+    readStatus: '您已阅读此公告',
+    markReadHint: '点击"已读"标记此公告'
   },
 
   // User Subscriptions Page

frontend/src/router/index.ts

@@ -187,18 +187,6 @@ const routes: RouteRecordRaw[] = [
       descriptionKey: 'purchase.description'
     }
   },
-  {
-    path: '/announcements',
-    name: 'Announcements',
-    component: () => import('@/views/user/AnnouncementsView.vue'),
-    meta: {
-      requiresAuth: true,
-      requiresAdmin: false,
-      title: 'Announcements',
-      titleKey: 'announcements.title',
-      descriptionKey: 'announcements.description'
-    }
-  },
 
   // ==================== Admin Routes ====================
   {

frontend/src/utils/format.ts

@@ -261,3 +261,22 @@ export function formatCountdownWithSuffix(targetDate: string | Date | null | und
   if (!countdown) return null
   return i18n.global.t('common.time.countdown.withSuffix', { time: countdown })
 }
+
+/**
+ * 格式化为相对时间 + 具体时间组合
+ * @param date 日期字符串或 Date 对象
+ * @returns 组合时间字符串，如 "5 天前 · 2026-01-27 15:25"
+ */
+export function formatRelativeWithDateTime(date: string | Date | null | undefined): string {
+  if (!date) return ''
+
+  const relativeTime = formatRelativeTime(date)
+  const dateTime = formatDateTime(date)
+
+  // 如果是 "从未" 或空字符串，只返回相对时间
+  if (!dateTime || relativeTime === i18n.global.t('common.time.never')) {
+    return relativeTime
+  }
+
+  return `${relativeTime} · ${dateTime}`
+}

frontend/src/views/user/AnnouncementsView.vue

-<template>
-  <AppLayout>
-    <TablePageLayout>
-      <template #actions>
-        <div class="flex justify-end gap-3">
-          <button
-            @click="loadAnnouncements"
-            :disabled="loading"
-            class="btn btn-secondary"
-            :title="t('common.refresh')"
-          >
-            <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
-          </button>
-        </div>
-      </template>
-
-      <template #filters>
-        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
-            <input v-model="unreadOnly" type="checkbox" class="h-4 w-4 rounded border-gray-300" />
-            <span>{{ t('announcements.unreadOnly') }}</span>
-          </label>
-        </div>
-      </template>
-
-      <template #table>
-        <div v-if="loading" class="flex items-center justify-center py-10">
-          <Icon name="refresh" size="lg" class="animate-spin text-gray-400" />
-        </div>
-
-        <div v-else-if="announcements.length === 0" class="py-12 text-center text-gray-500 dark:text-gray-400">
-          {{ unreadOnly ? t('announcements.emptyUnread') : t('announcements.empty') }}
-        </div>
-
-        <div v-else class="space-y-4">
-          <div
-            v-for="item in announcements"
-            :key="item.id"
-            class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-dark-700 dark:bg-dark-800"
-          >
-            <div class="flex items-start justify-between gap-4">
-              <div class="min-w-0 flex-1">
-                <div class="flex items-center gap-2">
-                  <h3 class="truncate text-base font-semibold text-gray-900 dark:text-white">
-                    {{ item.title }}
-                  </h3>
-                  <span v-if="!item.read_at" class="badge badge-warning">
-                    {{ t('announcements.unread') }}
-                  </span>
-                  <span v-else class="badge badge-success">
-                    {{ t('announcements.read') }}
-                  </span>
-                </div>
-                <div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-dark-400">
-                  <span>{{ formatDateTime(item.created_at) }}</span>
-                  <span v-if="item.starts_at">
-                    {{ t('announcements.startsAt') }}: {{ formatDateTime(item.starts_at) }}
-                  </span>
-                  <span v-if="item.ends_at">
-                    {{ t('announcements.endsAt') }}: {{ formatDateTime(item.ends_at) }}
-                  </span>
-                </div>
-              </div>
-
-              <div class="flex flex-shrink-0 items-center gap-2">
-                <button
-                  v-if="!item.read_at"
-                  class="btn btn-secondary"
-                  :disabled="markingReadId === item.id"
-                  @click="markRead(item.id)"
-                >
-                  {{ markingReadId === item.id ? t('common.processing') : t('announcements.markRead') }}
-                </button>
-                <span v-else class="text-xs text-gray-500 dark:text-dark-400">
-                  {{ t('announcements.readAt') }}: {{ formatDateTime(item.read_at) }}
-                </span>
-              </div>
-            </div>
-
-            <div class="mt-4 whitespace-pre-wrap text-sm text-gray-700 dark:text-gray-200">
-              {{ item.content }}
-            </div>
-          </div>
-        </div>
-      </template>
-    </TablePageLayout>
-  </AppLayout>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { announcementsAPI } from '@/api'
-import { useAppStore } from '@/stores/app'
-import { formatDateTime } from '@/utils/format'
-import type { UserAnnouncement } from '@/types'
-import AppLayout from '@/components/layout/AppLayout.vue'
-import TablePageLayout from '@/components/layout/TablePageLayout.vue'
-import Icon from '@/components/icons/Icon.vue'
-
-const { t } = useI18n()
-const appStore = useAppStore()
-
-const announcements = ref<UserAnnouncement[]>([])
-const loading = ref(false)
-const unreadOnly = ref(false)
-const markingReadId = ref<number | null>(null)
-
-async function loadAnnouncements() {
-  try {
-    loading.value = true
-    announcements.value = await announcementsAPI.list(unreadOnly.value)
-  } catch (err: any) {
-    appStore.showError(err?.message || t('common.unknownError'))
-  } finally {
-    loading.value = false
-  }
-}
-
-async function markRead(id: number) {
-  if (markingReadId.value) return
-  try {
-    markingReadId.value = id
-    await announcementsAPI.markRead(id)
-    await loadAnnouncements()
-  } catch (err: any) {
-    appStore.showError(err?.message || t('common.unknownError'))
-  } finally {
-    markingReadId.value = null
-  }
-}
-
-watch(unreadOnly, () => {
-  loadAnnouncements()
-})
-
-onMounted(() => {
-  loadAnnouncements()
-})
-</script>