From 8bb01924cd07df84e3b0da2a7aacedff6cf80f27 Mon Sep 17 00:00:00 2001
From: Ap_Tx <3045929398@qq.com>
Date: Fri, 23 Oct 2026 21:42:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=AC=E5=91=8A=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E7=9A=AE=E8=82=A4=E7=AB=99=E5=85=AC=E5=91=8A?=
 =?UTF-8?q?=E9=85=8D=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

公告数据保留 imageName，登录后按公告附件接口拉取图片并以 blob URL 展示，列表显示缩略图、详情显示大图，组件卸载时回收。
---
 .../src/components/ui/RemoteAnnouncements.vue      | 14 ++++++++++++++
 .../src/helpers/remote-announcements.ts            |  9 +++++++++
 2 files changed, 23 insertions(+)

diff --git a/apps/app-frontend/src/components/ui/RemoteAnnouncements.vue b/apps/app-frontend/src/components/ui/RemoteAnnouncements.vue
index af06d37..a743cc7 100644
--- a/apps/app-frontend/src/components/ui/RemoteAnnouncements.vue
+++ b/apps/app-frontend/src/components/ui/RemoteAnnouncements.vue
@@ -236,6 +236,7 @@ async function refresh() {
 		if (parsed && !disposed) {
 			sync(parsed, true)
 			saveCache(parsed)
+			for (const item of parsed) void loadImage(item, token)
 		}
 	} catch {
 		// Remote fetch failed; previously cached items remain displayed
@@ -316,6 +317,7 @@ onUnmounted(() => {
 	if (interval) clearInterval(interval)
 	if (advanceTimer) clearTimeout(advanceTimer)
 	window.removeEventListener(OPEN_REMOTE_ANNOUNCEMENT_CENTER_EVENT, handleOpenCenter)
+	revokeImages()
 })
 </script>
 
@@ -378,6 +380,12 @@ onUnmounted(() => {
 							class="mt-1.5 size-2 shrink-0 rounded-full"
 							:class="read.has(announcementKey(item)) ? 'opacity-0' : 'bg-red'"
 						/>
+						<img
+							v-if="imageUrls[item.id]"
+							:src="imageUrls[item.id]"
+							alt=""
+							class="size-10 shrink-0 rounded object-cover"
+						/>
 						<span class="min-w-0 flex-1">
 							<span class="block truncate font-medium text-[var(--color-text-primary)]">{{
 								item.title
@@ -393,6 +401,12 @@ onUnmounted(() => {
 				<h2 class="mb-4 text-xl font-semibold text-[var(--color-text-primary)]">
 					{{ selected.title }}
 				</h2>
+				<img
+					v-if="imageUrls[selected.id]"
+					:src="imageUrls[selected.id]"
+					alt=""
+					class="mb-4 max-h-80 w-full rounded-lg object-contain"
+				/>
 				<div
 					class="markdown-body break-words"
 					@click="contentClick"
diff --git a/apps/app-frontend/src/helpers/remote-announcements.ts b/apps/app-frontend/src/helpers/remote-announcements.ts
index ddfd85b..867b896 100644
--- a/apps/app-frontend/src/helpers/remote-announcements.ts
+++ b/apps/app-frontend/src/helpers/remote-announcements.ts
@@ -11,6 +11,7 @@ export type RemoteAnnouncement = {
 	published_at: string
 	action_url: string | null
 	action_label: string | null
+	image_name: string | null
 }
 
 export function safeAnnouncementUrl(value: unknown): string | null {
@@ -62,6 +63,10 @@ export function parseAnnouncements(value: unknown): RemoteAnnouncement[] | null
 			ends_at: item.ends_at ?? null,
 			action_label: item.action_label ?? null,
 			action_url: item.action_url ?? null,
+			image_name:
+				typeof item.image_name === 'string' && item.image_name.trim()
+					? item.image_name
+					: null,
 		} as RemoteAnnouncement)
 	}
 	const rank = { low: 0, normal: 1, high: 2, critical: 3 }
@@ -143,6 +148,10 @@ export function mapBroadcastAnnouncements(payload: unknown): RemoteAnnouncement[
 			published_at: published,
 			action_url: null,
 			action_label: null,
+			image_name:
+				typeof item.imageName === 'string' && item.imageName.trim()
+					? item.imageName
+					: null,
 		})
 	}
 	const rank = { low: 0, normal: 1, high: 2, critical: 3 }