更新公告展示

frontend/package-lock.json

@@ -8,7 +8,7 @@
       "name": "vivid-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "fflate": "^0.8.2",
+        "fflate": "^0.8.3",
         "marked": "^18.0.5",
         "qrcode": "^1.5.4",
         "vue": "^3.5.13",
@@ -1499,9 +1499,9 @@
       }
     },
     "node_modules/fflate": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
-      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "version": "0.8.3",
+      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
       "license": "MIT"
     },
     "node_modules/find-up": {

frontend/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "fflate": "^0.8.2",
+    "fflate": "^0.8.3",
     "marked": "^18.0.5",
     "qrcode": "^1.5.4",
     "vue": "^3.5.13",

frontend/src/announcement.js

@@ -19,6 +19,19 @@ export async function loadAnnouncement() {
   } catch { /* offline — skip */ }
 }
 
+// Manual open (公告 button in the left rail): re-fetch so the text is fresh
+// even if nothing was loaded yet, then show regardless of seen-state.
+export async function openAnnouncement() {
+  try {
+    const r = await api('/announcement')
+    if (r.ok && r.data) {
+      announcement.content = r.data.content || ''
+      announcement.version = r.data.version || ''
+    }
+  } catch { /* offline — show whatever we have */ }
+  announcement.show = true
+}
+
 // Dismiss: hide + remember this version server-side so it won't re-pop.
 export async function dismissAnnouncement() {
   announcement.show = false

frontend/src/components/AnnouncementModal.vue

@@ -5,7 +5,7 @@ import { announcement, dismissAnnouncement } from '../announcement'
 import Icon from './Icon.vue'
 
 marked.setOptions({ breaks: true, gfm: true })
-const html = computed(() => marked.parse(announcement.content || ''))
+const html = computed(() => marked.parse(announcement.content.trim() || '暂无公告'))
 </script>
 
 <template>

frontend/src/layouts/PublicLayout.vue

@@ -8,6 +8,7 @@ import Icon from '../components/Icon.vue'
 import Logo from '../components/Logo.vue'
 import { pointsLabel } from '../credits'
 import { draft } from '../playground'
+import { announcement, openAnnouncement } from '../announcement'
 
 const route = useRoute()
 
@@ -73,7 +74,7 @@ const currentLabel = computed(() => {
         </router-link>
       </nav>
 
-      <!-- Bottom: admin shortcut (admins only) + settings -->
+      <!-- Bottom: admin shortcut (admins only) + 公告 + settings -->
       <div class="flex flex-col items-center gap-3">
         <router-link v-if="isAdmin()" to="/admin/overview" title="进入管理后台"
                      class="rail-bottom">
@@ -86,6 +87,12 @@ const currentLabel = computed(() => {
           <svg v-if="isDark" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
           <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
         </button>
+        <!-- 公告 — sits right above 设置. Only for logged-in users, and only
+             when there actually is an announcement to show. -->
+        <button v-if="isAuthed() && announcement.content.trim()" type="button"
+                @click="openAnnouncement" title="公告" class="rail-bottom">
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l18-7-4 14-6-3-3 4-1-6z"/></svg>
+        </button>
         <router-link to="/settings" title="设置" @click="onSettings"
                      :class="$route.path === '/settings' ? 'rail-bottom active' : 'rail-bottom'">
           <Icon name="config" class="w-4 h-4" />