From e3af4f240fa76aa85015b2873e9ecc3ba5361488 Mon Sep 17 00:00:00 2001
From: qian <wuchengqian5@163.com>
Date: Thu, 24 Sep 2026 21:44:35 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=E9=87=8D=E6=9E=84=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/AnnouncementBanner.vue  | 292 ------------------
 .../src/components/layout/AuthLayout.vue      |  33 +-
 web/tenant/src/styles/main.css                |  10 +
 web/tenant/src/views/Layout.vue               |  15 +-
 4 files changed, 16 insertions(+), 334 deletions(-)
 delete mode 100644 web/tenant/src/components/common/AnnouncementBanner.vue

diff --git a/web/tenant/src/components/common/AnnouncementBanner.vue b/web/tenant/src/components/common/AnnouncementBanner.vue
deleted file mode 100644
index a9e14e8..0000000
--- a/web/tenant/src/components/common/AnnouncementBanner.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
-import { marked } from 'marked'
-import Icon from '@/components/common/Icon.vue'
-
-// Configure marked to allow HTML
-marked.setOptions({
-	breaks: true,
-	gfm: true,
-})
-
-function renderMarkdown(content: string): string {
-	return marked.parse(content) as string
-}
-
-const props = defineProps<{
-	announcements: {
-		id: number
-		title: string
-		type: string
-		content: string
-		is_pinned: number
-		created_at: string
-	}[]
-}>()
-
-const currentIndex = ref(0)
-const showDetail = ref(false)
-const STORAGE_KEY = 'tenant_dismissed_announcements'
-
-function loadDismissedIds(): Set<number> {
-	try {
-		const raw = localStorage.getItem(STORAGE_KEY)
-		if (raw) return new Set(JSON.parse(raw))
-	} catch { /* ignore */ }
-	return new Set()
-}
-
-function saveDismissedIds(ids: Set<number>) {
-	try {
-		localStorage.setItem(STORAGE_KEY, JSON.stringify([...ids]))
-	} catch { /* ignore */ }
-}
-
-const dismissedIds = ref<Set<number>>(loadDismissedIds())
-
-let autoTimer: ReturnType<typeof setInterval> | null = null
-
-const visibleItems = computed(() => {
-	const activeIds = new Set(props.announcements.map(a => a.id))
-	// 清理已不存在的 dismissed ID
-	const changed = [...dismissedIds.value].some(id => !activeIds.has(id))
-	if (changed) {
-		for (const id of [...dismissedIds.value]) {
-			if (!activeIds.has(id)) dismissedIds.value.delete(id)
-		}
-		saveDismissedIds(dismissedIds.value)
-	}
-	return props.announcements.filter(a => !dismissedIds.value.has(a.id))
-})
-
-const currentItem = computed(() => {
-	return visibleItems.value[currentIndex.value] || null
-})
-
-const hasMultiple = computed(() => visibleItems.value.length > 1)
-
-const typeConfig: Record<string, { bg: string; border: string; icon: string }> = {
-	info: { bg: 'bg-primary-500/90', border: 'border-primary-400', icon: 'infoCircle' },
-	warning: { bg: 'bg-amber-500/90', border: 'border-amber-400', icon: 'exclamationTriangle' },
-	important: { bg: 'bg-red-500/90', border: 'border-red-400', icon: 'xCircle' },
-}
-
-function getTypeConfig(type: string) {
-	return typeConfig[type] || typeConfig.info
-}
-
-function dismissCurrent() {
-	if (!currentItem.value) return
-	if (currentItem.value.type === 'important') return
-	dismissedIds.value.add(currentItem.value.id)
-	saveDismissedIds(dismissedIds.value)
-	if (currentIndex.value >= visibleItems.value.length) {
-		currentIndex.value = 0
-	}
-}
-
-function next() {
-	if (visibleItems.value.length <= 1) return
-	currentIndex.value = (currentIndex.value + 1) % visibleItems.value.length
-}
-
-function prev() {
-	if (visibleItems.value.length <= 1) return
-	currentIndex.value = (currentIndex.value - 1 + visibleItems.value.length) % visibleItems.value.length
-}
-
-function openDetail() {
-	if (!currentItem.value) return
-	showDetail.value = true
-}
-
-function startAutoRotate() {
-	stopAutoRotate()
-	if (visibleItems.value.length > 1) {
-		autoTimer = setInterval(() => {
-			next()
-		}, 6000)
-	}
-}
-
-function stopAutoRotate() {
-	if (autoTimer) {
-		clearInterval(autoTimer)
-		autoTimer = null
-	}
-}
-
-watch(() => props.announcements, () => {
-	currentIndex.value = 0
-	startAutoRotate()
-})
-
-onMounted(() => {
-	startAutoRotate()
-})
-
-onBeforeUnmount(() => {
-	stopAutoRotate()
-})
-</script>
-
-<template>
-	<Transition name="slide-down">
-		<div v-if="currentItem" :class="['border-b', getTypeConfig(currentItem.type).bg, getTypeConfig(currentItem.type).border]">
-			<div class="flex items-center justify-center gap-2 px-4 py-2.5 text-sm text-white">
-				<Icon :name="getTypeConfig(currentItem.type).icon" size="sm" class="flex-shrink-0" />
-
-				<!-- Navigation (prev) -->
-				<button v-if="hasMultiple" @click="prev" class="flex-shrink-0 rounded-lg p-0.5 hover:bg-white/20 transition-colors">
-					<Icon name="chevronLeft" size="xs" />
-				</button>
-
-				<!-- Content -->
-				<button class="flex-1 text-center truncate hover:underline cursor-pointer" @click="openDetail">
-					<span :class="{ 'font-semibold': currentItem.is_pinned }">{{ currentItem.title }}</span>
-					<span v-if="hasMultiple" class="ml-2 text-white/70">{{ currentIndex + 1 }}/{{ visibleItems.length }}</span>
-				</button>
-
-				<!-- Navigation (next) -->
-				<button v-if="hasMultiple" @click="next" class="flex-shrink-0 rounded-lg p-0.5 hover:bg-white/20 transition-colors">
-					<Icon name="chevronRight" size="xs" />
-				</button>
-
-				<!-- Dismiss -->
-				<button
-					v-if="currentItem.type !== 'important'"
-					@click="dismissCurrent"
-					class="flex-shrink-0 rounded-lg p-0.5 hover:bg-white/20 transition-colors"
-				>
-					<Icon name="x" size="sm" />
-				</button>
-			</div>
-		</div>
-	</Transition>
-
-	<!-- Detail Modal -->
-	<Teleport to="body">
-		<Transition name="fade">
-			<div v-if="showDetail && currentItem" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click.self="showDetail = false">
-				<div class="w-full max-w-3xl rounded-2xl bg-white shadow-2xl border border-gray-200 animate-scale-in" @click.stop>
-					<!-- Header -->
-					<div class="flex items-start gap-3 px-6 py-4 border-b border-gray-100">
-						<div :class="['flex-shrink-0 mt-0.5 h-8 w-8 rounded-lg flex items-center justify-center', getTypeConfig(currentItem.type).bg]">
-							<Icon :name="getTypeConfig(currentItem.type).icon" size="sm" class="text-white" />
-						</div>
-						<div class="flex-1 min-w-0">
-							<h3 class="text-lg font-semibold text-gray-900">{{ currentItem.title }}</h3>
-							<p class="text-xs text-gray-500 mt-0.5">{{ currentItem.created_at }}</p>
-						</div>
-						<button @click="showDetail = false" class="flex-shrink-0 rounded-lg p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
-							<Icon name="x" size="md" />
-						</button>
-					</div>
-					<!-- Body -->
-					<div class="px-6 py-5 max-h-[60vh] overflow-y-auto">
-						<div class="announcement-content prose prose-sm max-w-none text-gray-700" v-html="renderMarkdown(currentItem.content)"></div>
-					</div>
-					<!-- Footer -->
-					<div class="px-6 py-3 border-t border-gray-100 flex justify-end">
-						<button @click="showDetail = false" class="btn btn-secondary btn-sm">关闭</button>
-					</div>
-				</div>
-			</div>
-		</Transition>
-	</Teleport>
-</template>
-
-<style scoped>
-.slide-down-enter-active,
-.slide-down-leave-active {
-	transition: all 0.3s ease-out;
-}
-.slide-down-enter-from,
-.slide-down-leave-to {
-	opacity: 0;
-	transform: translateY(-100%);
-}
-
-.fade-enter-active { transition: opacity 0.2s ease-out; }
-.fade-leave-active { transition: opacity 0.15s ease-in; }
-.fade-enter-from, .fade-leave-to { opacity: 0; }
-
-.animate-scale-in {
-	animation: scaleIn 0.25s ease-out;
-}
-@keyframes scaleIn {
-	from { transform: scale(0.95); opacity: 0; }
-	to { transform: scale(1); opacity: 1; }
-}
-</style>
-
-<style>
-.announcement-content {
-	font-size: 14px;
-	line-height: 1.75;
-	color: #374151;
-}
-.announcement-content h1 { font-size: 1.5em; font-weight: 700; margin: 0.8em 0 0.4em; }
-.announcement-content h2 { font-size: 1.3em; font-weight: 600; margin: 0.8em 0 0.4em; }
-.announcement-content h3 { font-size: 1.15em; font-weight: 600; margin: 0.6em 0 0.3em; }
-.announcement-content p { margin: 0.5em 0; }
-.announcement-content ul, .announcement-content ol { padding-left: 1.5em; margin: 0.5em 0; }
-.announcement-content li { margin: 0.2em 0; }
-.announcement-content blockquote {
-	border-left: 3px solid var(--color-primary-500);
-	padding: 0.5em 1em;
-	margin: 0.5em 0;
-	background: var(--color-primary-50);
-	border-radius: 0 8px 8px 0;
-}
-.announcement-content code {
-	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-	font-size: 0.9em;
-	background: #f3f4f6;
-	padding: 0.15em 0.4em;
-	border-radius: 4px;
-}
-.announcement-content pre {
-	background: #1e293b;
-	color: #e2e8f0;
-	padding: 1em;
-	border-radius: 12px;
-	overflow-x: auto;
-	margin: 0.5em 0;
-}
-.announcement-content pre code {
-	background: transparent;
-	padding: 0;
-	color: inherit;
-}
-.announcement-content a {
-	color: #6d80f0;
-	text-decoration: underline;
-}
-.announcement-content img {
-	max-width: 100%;
-	border-radius: 8px;
-	margin: 0.5em 0;
-}
-.announcement-content table {
-	width: 100%;
-	border-collapse: collapse;
-	margin: 0.5em 0;
-}
-.announcement-content th, .announcement-content td {
-	border: 1px solid #e5e7eb;
-	padding: 0.5em 0.75em;
-	text-align: left;
-}
-.announcement-content th {
-	background: #f9fafb;
-	font-weight: 600;
-}
-.announcement-content hr {
-	border: none;
-	border-top: 1px solid #e5e7eb;
-	margin: 1em 0;
-}
-.announcement-content strong { font-weight: 600; }
-.announcement-content em { font-style: italic; }
-</style>
diff --git a/web/tenant/src/components/layout/AuthLayout.vue b/web/tenant/src/components/layout/AuthLayout.vue
index b90da29..58e3ac8 100644
--- a/web/tenant/src/components/layout/AuthLayout.vue
+++ b/web/tenant/src/components/layout/AuthLayout.vue
@@ -1,12 +1,5 @@
 <template>
 	<div class="auth-layout relative min-h-[100dvh] overflow-x-hidden">
-		<!-- Announcement Banner (teleported to body, fixed top) -->
-		<Teleport to="body">
-			<div v-if="announcements.length" class="fixed top-0 left-0 right-0 z-50">
-				<AnnouncementBanner :announcements="announcements" />
-			</div>
-		</Teleport>
-
 		<div class="pointer-events-none fixed inset-0 bg-mesh-gradient"></div>
 
 		<div class="relative z-10 flex min-h-[100dvh] flex-col">
@@ -45,35 +38,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
-import AnnouncementBanner from '../common/AnnouncementBanner.vue'
-import request from '@/utils/request'
+import { computed } from 'vue'
 import { usePublicSettings } from '@/composables/usePublicSettings'
-import { createPoller } from '@/composables/usePolling'
 
 const { settings: publicSettings } = usePublicSettings()
 const siteName = computed(() => publicSettings.value.site_name || 'Team-API')
-const announcements = ref<any[]>([])
-// 登录页公告轮询：页面隐藏时暂停，恢复可见时按剩余时间续排
-const announcementPoller = createPoller(fetchAnnouncements, 30 * 60 * 1000)
-
-async function fetchAnnouncements() {
-	try {
-		const res = await request.get('/settings/announcements', { params: { position: 'login' }, _suppressErrorMsg: true } as any)
-		announcements.value = res.data?.data?.list || []
-	} catch {
-		// silently ignore
-	}
-}
-
-onMounted(() => {
-	fetchAnnouncements()
-	announcementPoller.start()
-})
-
-onBeforeUnmount(() => {
-	announcementPoller.stop()
-})
 </script>
 
 <style scoped>
diff --git a/web/tenant/src/styles/main.css b/web/tenant/src/styles/main.css
index 980772c..2dd65c1 100644
--- a/web/tenant/src/styles/main.css
+++ b/web/tenant/src/styles/main.css
@@ -57,6 +57,7 @@
 	--animate-scale-in: scale-in 0.2s ease-out;
 	--animate-shimmer: shimmer 2s linear infinite;
 	--animate-glow: glow 2s ease-in-out infinite alternate;
+	--animate-swing: swing 2.4s ease-in-out infinite;
 
 	@keyframes fade-in {
 		from { opacity: 0; }
@@ -86,6 +87,15 @@
 		from { box-shadow: 0 0 20px rgba(20, 184, 166, 0.22); }
 		to { box-shadow: 0 0 30px rgba(20, 184, 166, 0.38); }
 	}
+	/* 喇叭图标摇摆：静止过半周期后快速晃动几下，用于未读公告提醒 */
+	@keyframes swing {
+		0%, 55%, 100% { transform: rotate(0deg); }
+		60% { transform: rotate(-14deg); }
+		66% { transform: rotate(11deg); }
+		72% { transform: rotate(-8deg); }
+		78% { transform: rotate(5deg); }
+		84% { transform: rotate(0deg); }
+	}
 }
 
 /* ============ 基础样式 ============ */
diff --git a/web/tenant/src/views/Layout.vue b/web/tenant/src/views/Layout.vue
index 4e4ab0c..ef595e2 100644
--- a/web/tenant/src/views/Layout.vue
+++ b/web/tenant/src/views/Layout.vue
@@ -11,7 +11,6 @@ import { formatBilling } from '@/composables/useCurrency'
 import { toast } from '@/utils/toast'
 import Icon from '@/components/common/Icon.vue'
 import MaintenanceBanner from '@/components/common/MaintenanceBanner.vue'
-import AnnouncementBanner from '@/components/common/AnnouncementBanner.vue'
 import RouteErrorBoundary from '@/components/common/RouteErrorBoundary.vue'
 import { marked } from 'marked'
 import request from '@/utils/request'
@@ -264,7 +263,6 @@ onBeforeUnmount(() => {
 	<div class="tenant-layout min-h-screen overflow-x-clip">
 	<!-- Maintenance Banner -->
 		<MaintenanceBanner />
-			<AnnouncementBanner v-if="consoleAnnouncements.length" :announcements="consoleAnnouncements" />
 
 		<!-- Background Decoration -->
 		<div class="pointer-events-none fixed inset-0 bg-mesh-gradient"></div>
@@ -410,17 +408,13 @@ onBeforeUnmount(() => {
 							class="topbar-icon-button relative flex h-10 w-10 items-center justify-center rounded-full border border-white/80 bg-white/65 text-slate-400 shadow-sm transition-all hover:-translate-y-0.5 hover:bg-white hover:text-primary-600"
 								title="平台公告"
 							>
-								<Icon name="megaphone" size="md" />
+								<Icon name="megaphone" size="md" :class="{ 'motion-safe:animate-swing': announceUnreadCount > 0 }" />
+								<!-- 存在未读公告时喇叭摇摆 + 红点标记 -->
 								<span
 									v-if="announceUnreadCount > 0"
 									class="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-white"
 								></span>
 							</button>
-							<!-- Pulse animation layer -->
-							<div
-								v-if="announceUnreadCount > 0"
-								class="absolute inset-0 rounded-xl animate-pulse-soft  pointer-events-none"
-							></div>
 
 							<!-- Announcement Dropdown Panel -->
 							<transition name="fade">
@@ -583,7 +577,7 @@ onBeforeUnmount(() => {
 	<Teleport to="body">
 		<Transition name="fade">
 			<div v-if="announceDetailItem" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click.self="closeAnnouncementDetail">
-				<div class="w-full max-w-3xl rounded-2xl bg-white shadow-2xl border border-gray-200 animate-scale-in" @click.stop>
+				<div class="w-full max-w-3xl flex min-h-[24rem] flex-col rounded-2xl bg-white shadow-2xl border border-gray-200 animate-scale-in" @click.stop>
 					<div class="flex items-start gap-3 px-6 py-4 border-b border-gray-100">
 						<div class="flex-1 min-w-0">
 							<h3 class="text-lg font-semibold text-gray-900">{{ announceDetailItem.title }}</h3>
@@ -593,7 +587,8 @@ onBeforeUnmount(() => {
 							<Icon name="x" size="md" />
 						</button>
 					</div>
-					<div class="px-6 py-5 max-h-[60vh] overflow-y-auto">
+					<!-- 内容区 flex-1 撑满弹窗最小高度，长内容超过 60vh 后内部滚动 -->
+					<div class="flex-1 min-h-0 px-6 py-5 max-h-[60vh] overflow-y-auto">
 						<div class="announcement-content prose prose-sm max-w-none text-gray-700" v-html="renderMarkdown(announceDetailItem.content)"></div>
 					</div>
 					<div class="px-6 py-3 border-t border-gray-100 flex justify-end">