feat(announcement): 公告图片支持点击放大预览

frontend/src/features/announcement/components/AnnouncementContent.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+defineProps<{ html: string }>()
+
+const viewerVisible = ref(false)
+const viewerImages = ref<string[]>([])
+const viewerAlts = ref<string[]>([])
+const viewerIndex = ref(0)
+const viewerAlt = ref('公告图片预览')
+const zoomed = ref(false)
+
+const currentImage = computed(() => viewerImages.value[viewerIndex.value] || '')
+const hasMultiple = computed(() => viewerImages.value.length > 1)
+
+let previousBodyOverflow = ''
+
+function handleContentClick(event: MouseEvent) {
+  const target = event.target as HTMLElement | null
+  if (!target || target.tagName !== 'IMG') return
+  event.preventDefault()
+
+  const container = event.currentTarget as HTMLElement | null
+  if (!container) return
+
+  const items = Array.from(container.querySelectorAll('img'))
+    .map(img => ({
+      src: img.getAttribute('src')?.trim() || '',
+      alt: img.getAttribute('alt')?.trim() || '公告图片预览',
+    }))
+    .filter(item => item.src !== '')
+  const clickedSrc = target.getAttribute('src')?.trim() || ''
+  const clickedAlt = target.getAttribute('alt')?.trim() || '公告图片预览'
+  if (!clickedSrc) return
+
+  viewerImages.value = items.length ? items.map(item => item.src) : [clickedSrc]
+  viewerAlts.value = items.length ? items.map(item => item.alt) : [clickedAlt]
+  const clickedIndex = viewerImages.value.indexOf(clickedSrc)
+  viewerIndex.value = clickedIndex >= 0 ? clickedIndex : 0
+  viewerAlt.value = clickedAlt
+  zoomed.value = false
+  viewerVisible.value = true
+}
+
+function closeViewer() {
+  viewerVisible.value = false
+  zoomed.value = false
+}
+
+function showPrev() {
+  if (!hasMultiple.value) return
+  viewerIndex.value =
+    (viewerIndex.value - 1 + viewerImages.value.length) % viewerImages.value.length
+  viewerAlt.value = viewerAlts.value[viewerIndex.value] || '公告图片预览'
+  zoomed.value = false
+}
+
+function showNext() {
+  if (!hasMultiple.value) return
+  viewerIndex.value = (viewerIndex.value + 1) % viewerImages.value.length
+  viewerAlt.value = viewerAlts.value[viewerIndex.value] || '公告图片预览'
+  zoomed.value = false
+}
+
+function toggleZoom() {
+  zoomed.value = !zoomed.value
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeViewer()
+  } else if (event.key === 'ArrowLeft') {
+    showPrev()
+  } else if (event.key === 'ArrowRight') {
+    showNext()
+  }
+}
+
+watch(viewerVisible, visible => {
+  if (typeof window === 'undefined') return
+  if (visible) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+
+  if (typeof document === 'undefined') return
+  if (visible) {
+    previousBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = previousBodyOverflow
+  }
+})
+
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') window.removeEventListener('keydown', handleKeydown)
+  if (typeof document !== 'undefined' && viewerVisible.value) {
+    document.body.style.overflow = previousBodyOverflow
+  }
+})
+</script>
+
+<template>
+  <div class="announcement-content" v-bind="$attrs" @click="handleContentClick" v-html="html" />
+
+  <Teleport to="body">
+    <Transition name="announcement-viewer-fade">
+      <div
+        v-if="viewerVisible && currentImage"
+        class="announcement-image-viewer"
+        role="dialog"
+        aria-modal="true"
+        aria-label="查看公告大图"
+      >
+        <div class="viewer-toolbar">
+          <span v-if="hasMultiple" class="viewer-counter">
+            {{ viewerIndex + 1 }} / {{ viewerImages.length }}
+          </span>
+          <button type="button" class="viewer-tool-btn" @click.stop="toggleZoom">
+            {{ zoomed ? '适应屏幕' : '原始大小' }}
+          </button>
+          <button
+            type="button"
+            class="viewer-tool-btn viewer-close"
+            aria-label="关闭预览"
+            @click.stop="closeViewer"
+          >
+            ×
+          </button>
+        </div>
+
+        <button
+          v-if="hasMultiple"
+          type="button"
+          class="viewer-arrow viewer-arrow-prev"
+          aria-label="上一张"
+          @click.stop="showPrev"
+        >
+          ‹
+        </button>
+
+        <div class="viewer-stage" @click.self="closeViewer">
+          <div class="viewer-canvas">
+            <img
+              class="viewer-image"
+              :class="{ 'is-natural': zoomed }"
+              :src="currentImage"
+              :alt="viewerAlt"
+              @click.stop="toggleZoom"
+            />
+          </div>
+        </div>
+
+        <button
+          v-if="hasMultiple"
+          type="button"
+          class="viewer-arrow viewer-arrow-next"
+          aria-label="下一张"
+          @click.stop="showNext"
+        >
+          ›
+        </button>
+
+        <p class="viewer-hint">点击图片切换缩放，点击空白处关闭</p>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.announcement-content :deep(img) {
+  cursor: zoom-in;
+  transition: filter 0.2s ease;
+}
+
+.announcement-content :deep(img:hover) {
+  filter: brightness(0.96);
+}
+
+.announcement-image-viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 4000;
+  background: rgba(9, 13, 22, 0.94);
+}
+
+.viewer-stage {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  overflow: auto;
+  padding: 64px 72px 48px;
+  box-sizing: border-box;
+  overscroll-behavior: contain;
+}
+
+.viewer-canvas {
+  flex: 0 0 auto;
+  margin: auto;
+}
+
+.viewer-image {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: calc(100vw - 144px);
+  max-height: calc(100vh - 112px);
+  border-radius: 6px;
+  cursor: zoom-in;
+  user-select: none;
+  -webkit-user-drag: none;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
+}
+
+.viewer-image.is-natural {
+  max-width: none;
+  max-height: none;
+  cursor: zoom-out;
+}
+
+.viewer-toolbar {
+  position: fixed;
+  top: 16px;
+  right: 18px;
+  z-index: 4002;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.viewer-counter {
+  padding: 0 4px;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.viewer-tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: background 0.2s ease;
+}
+
+.viewer-tool-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.viewer-close {
+  width: 36px;
+  padding: 0;
+  font-size: 22px;
+  line-height: 1;
+}
+
+.viewer-arrow {
+  position: fixed;
+  top: 50%;
+  z-index: 4002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  font-size: 34px;
+  line-height: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+  backdrop-filter: blur(8px);
+}
+
+.viewer-arrow:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.viewer-arrow-prev {
+  left: 18px;
+}
+
+.viewer-arrow-next {
+  right: 18px;
+}
+
+.viewer-hint {
+  position: fixed;
+  bottom: 14px;
+  left: 0;
+  z-index: 4002;
+  width: 100%;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 12px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.announcement-viewer-fade-enter-active,
+.announcement-viewer-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.announcement-viewer-fade-enter-from,
+.announcement-viewer-fade-leave-to {
+  opacity: 0;
+}
+
+@media (max-width: 640px) {
+  .viewer-stage {
+    padding: 58px 10px 46px;
+  }
+
+  .viewer-image {
+    max-width: calc(100vw - 20px);
+    max-height: calc(100vh - 104px);
+  }
+
+  .viewer-toolbar {
+    top: 10px;
+    right: 10px;
+  }
+
+  .viewer-arrow {
+    width: 38px;
+    height: 38px;
+    font-size: 28px;
+  }
+
+  .viewer-arrow-prev {
+    left: 8px;
+  }
+
+  .viewer-arrow-next {
+    right: 8px;
+  }
+}
+</style>

frontend/src/features/announcement/components/AnnouncementPopup.vue

@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { fetchPopupAnnouncement, type Announcement } from '@/features/announcement'
+import AnnouncementContent from '@/features/announcement/components/AnnouncementContent.vue'
 import { renderAnnouncementMarkdown } from '@/features/announcement/utils/markdown'
 import {
   isPopupDismissedToday,
@@ -94,7 +95,7 @@ function handleClose() {
           <!-- 正文区域：独立圆角浅色阅读卡片 -->
           <div class="popup-body">
             <div class="popup-content-box">
-              <div class="popup-content" v-html="contentHtml" />
+              <AnnouncementContent class="popup-content" :html="contentHtml" />
             </div>
             <div v-if="publishedAtText" class="popup-meta">
               <svg viewBox="0 0 24 24" class="meta-clock-icon" aria-hidden="true">

frontend/src/features/announcement/views/AnnouncementDetailView.vue

@@ -11,6 +11,7 @@ import {
   Warning,
 } from '@element-plus/icons-vue'
 import { fetchAnnouncementDetail, type Announcement } from '@/features/announcement'
+import AnnouncementContent from '@/features/announcement/components/AnnouncementContent.vue'
 import { renderAnnouncementMarkdown } from '@/features/announcement/utils/markdown'
 import { debugError } from '@/shared/utils/debug'
 import { formatDateTime } from '@/shared/utils/time'
@@ -116,7 +117,7 @@ function getCategoryLabel(category: string) {
 
       <div class="detail-divider"></div>
 
-      <div class="detail-content" v-html="renderedContent"></div>
+      <AnnouncementContent class="detail-content" :html="renderedContent" />
     </div>
   </section>
 </template>

frontend/src/features/announcement/views/MobileAnnouncementDetailView.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import { fetchAnnouncementDetail, type Announcement } from '@/features/announcement'
+import AnnouncementContent from '@/features/announcement/components/AnnouncementContent.vue'
 import { renderAnnouncementMarkdown } from '@/features/announcement/utils/markdown'
 import { formatDateTime } from '@/shared/utils/time'
 
@@ -77,7 +78,7 @@ function getCategoryLabel(category: string) {
       </div>
 
       <div class="detail-divider"></div>
-      <div class="detail-content" v-html="renderedContent"></div>
+      <AnnouncementContent class="detail-content" :html="renderedContent" />
     </article>
   </main>
 </template>