feat: improve image browsing experience

src/views/encyclopedia/EncyclopediaView.vue

@@ -129,7 +129,7 @@ onMounted(async () => {
           >
             <img
               v-if="getCollectionEntry(cloudType.id)?.firstCloud?.image_url"
-              :src="getCollectionEntry(cloudType.id)?.firstCloud?.image_url || ''"
+              :src="getCollectionEntry(cloudType.id)?.firstCloud?.thumbnail_url || getCollectionEntry(cloudType.id)?.firstCloud?.image_url || ''"
               :alt="cloudType.name"
               class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
               :class="isUnlocked(cloudType.id) ? '' : 'grayscale'"

src/views/gallery/GalleryView.vue

@@ -1,9 +1,325 @@
 <script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
+import { supabase } from '@/lib/supabase'
+import { useCloudsStore } from '@/stores/clouds'
+import type { CloudType } from '@/types/database'
+
+interface GalleryCloud {
+  id: string
+  image_url: string
+  thumbnail_url: string | null
+  location_name: string | null
+  description: string | null
+  latitude: number | null
+  longitude: number | null
+  captured_at: string | null
+  created_at: string
+  cloudTypeName: string
+  cloudTypeRarity: CloudType['rarity']
+  username: string
+}
+
+const PAGE_SIZE = 20
+
+const cloudsStore = useCloudsStore()
+
+const loading = ref(true)
+const loadingMore = ref(false)
+const loadError = ref('')
+const galleryItems = ref<GalleryCloud[]>([])
+const selectedTypeId = ref<number | 'all'>('all')
+const selectedCloud = ref<GalleryCloud | null>(null)
+const sentinel = ref<HTMLDivElement | null>(null)
+const totalLoaded = ref(0)
+const hasMore = ref(true)
+
+let observer: IntersectionObserver | null = null
+
+const rarityMeta = {
+  common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200' },
+  uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200' },
+  rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200' },
+} satisfies Record<CloudType['rarity'], { label: string; chip: string }>
+
+function formatDateTime(iso: string | null) {
+  if (!iso) return '未知时间'
+  return new Date(iso).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function formatUploadTime(cloud: GalleryCloud) {
+  return formatDateTime(cloud.created_at)
+}
+
+function formatCapturedTime(cloud: GalleryCloud) {
+  return formatDateTime(cloud.captured_at)
+}
+
+function formatCoordinate(value: number | null) {
+  return value === null ? '未记录' : value.toFixed(2)
+}
+
+function toGalleryCloud(row: Record<string, unknown>) {
+  const cloudTypes = Array.isArray(row.cloud_types) ? row.cloud_types : row.cloud_types ? [row.cloud_types] : []
+  const profiles = Array.isArray(row.profiles) ? row.profiles : row.profiles ? [row.profiles] : []
+  const cloudType = cloudTypes[0] as Record<string, unknown> | undefined
+  const profile = profiles[0] as Record<string, unknown> | undefined
+
+  return {
+    id: row.id as string,
+    image_url: row.image_url as string,
+    thumbnail_url: (row.thumbnail_url as string | null) ?? null,
+    location_name: (row.location_name as string | null) ?? null,
+    description: (row.description as string | null) ?? null,
+    latitude: (row.latitude as number | null) ?? null,
+    longitude: (row.longitude as number | null) ?? null,
+    captured_at: (row.captured_at as string | null) ?? null,
+    created_at: row.created_at as string,
+    cloudTypeName: (cloudType?.name as string) || (row.custom_cloud_type as string) || '未知',
+    cloudTypeRarity: (cloudType?.rarity as CloudType['rarity']) || 'common',
+    username: (profile?.username as string) || '匿名',
+  } satisfies GalleryCloud
+}
+
+async function fetchPage(offset: number) {
+  let query = supabase
+    .from('clouds')
+    .select('id,image_url,thumbnail_url,location_name,description,latitude,longitude,captured_at,created_at,custom_cloud_type,cloud_types(name,rarity),profiles(username)')
+    .eq('status', 'approved')
+    .eq('is_hidden', false)
+    .order('created_at', { ascending: false })
+    .range(offset, offset + PAGE_SIZE - 1)
+
+  if (selectedTypeId.value !== 'all') {
+    query = query.eq('cloud_type_id', selectedTypeId.value)
+  }
+
+  const { data, error } = await query
+  if (error) throw error
+
+  return ((data || []) as Array<Record<string, unknown>>).map(toGalleryCloud)
+}
+
+async function loadInitial() {
+  loading.value = true
+  loadError.value = ''
+  galleryItems.value = []
+  totalLoaded.value = 0
+  hasMore.value = true
+
+  try {
+    const firstPage = await fetchPage(0)
+    galleryItems.value = firstPage
+    totalLoaded.value = firstPage.length
+    hasMore.value = firstPage.length === PAGE_SIZE
+  } catch (error) {
+    loadError.value = error instanceof Error ? error.message : '画廊加载失败'
+  } finally {
+    loading.value = false
+    await nextTick()
+    setupObserver()
+  }
+}
+
+async function loadMore() {
+  if (loading.value || loadingMore.value || !hasMore.value) return
+
+  loadingMore.value = true
+  try {
+    const nextPage = await fetchPage(totalLoaded.value)
+    galleryItems.value = [...galleryItems.value, ...nextPage]
+    totalLoaded.value += nextPage.length
+    hasMore.value = nextPage.length === PAGE_SIZE
+  } catch (error) {
+    loadError.value = error instanceof Error ? error.message : '加载更多失败'
+  } finally {
+    loadingMore.value = false
+  }
+}
+
+function setupObserver() {
+  observer?.disconnect()
+  if (!sentinel.value) return
+
+  observer = new IntersectionObserver(entries => {
+    if (entries[0]?.isIntersecting) {
+      loadMore()
+    }
+  }, {
+    rootMargin: '320px 0px',
+  })
+
+  observer.observe(sentinel.value)
+}
+
+function openDetail(cloud: GalleryCloud) {
+  selectedCloud.value = cloud
+}
+
+function closeDetail() {
+  selectedCloud.value = null
+}
+
+const filterTabs = computed(() => [
+  { id: 'all' as const, label: '全部' },
+  ...cloudsStore.cloudTypes.map(type => ({ id: type.id, label: type.name })),
+])
+
+onMounted(async () => {
+  await cloudsStore.fetchCloudTypes()
+  await loadInitial()
+})
+
+watch(selectedTypeId, async () => {
+  selectedCloud.value = null
+  await loadInitial()
+})
+
+watch(sentinel, () => {
+  if (!loading.value) setupObserver()
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
 </script>
 
 <template>
-  <div class="max-w-5xl mx-auto px-4 py-12">
-    <h1 class="text-3xl font-bold text-gray-900 mb-8">🖼️ 画廊</h1>
-    <p class="text-gray-500">画廊功能开发中...</p>
+  <div>
+    <section class="border-b border-sky-100 bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)]">
+      <div class="max-w-7xl mx-auto px-4 py-10">
+        <p class="text-sm font-medium uppercase tracking-[0.24em] text-sky-700">Community Gallery</p>
+        <h1 class="mt-3 text-4xl font-bold text-slate-900">云图画廊</h1>
+        <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-600">
+          按上传时间倒序浏览社区云图。卡片采用 Instagram 风格的整齐宫格排布，悬停即可快速查看基本信息，点开可看大图和详细记录。
+        </p>
+      </div>
+    </section>
+
+    <div class="max-w-7xl mx-auto px-4 py-8">
+
+    <section>
+      <div class="flex gap-3 overflow-x-auto pb-2">
+        <button
+          v-for="tab in filterTabs"
+          :key="tab.id"
+          type="button"
+          @click="selectedTypeId = tab.id"
+          class="shrink-0 rounded-full border px-4 py-2 text-sm font-medium transition-colors"
+          :class="selectedTypeId === tab.id ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:text-slate-900'"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </section>
+
+    <div v-if="loadError" class="mt-6 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+      {{ loadError }}
+    </div>
+
+    <section v-if="loading" class="mt-6 grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4">
+      <div v-for="n in 8" :key="n" class="aspect-square animate-pulse rounded-[26px] bg-slate-200"></div>
+    </section>
+
+    <section v-else-if="galleryItems.length" class="mt-6 grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4">
+      <button
+        v-for="cloud in galleryItems"
+        :key="cloud.id"
+        type="button"
+        @click="openDetail(cloud)"
+        class="group relative aspect-square overflow-hidden rounded-[26px] bg-slate-200 text-left shadow-sm"
+      >
+        <img
+          :src="cloud.thumbnail_url || cloud.image_url"
+          :alt="cloud.cloudTypeName"
+          class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.04]"
+        />
+
+        <div class="absolute inset-0 bg-gradient-to-t from-slate-950/82 via-slate-950/8 to-transparent opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"></div>
+        <div class="absolute inset-x-0 bottom-0 p-4 text-white opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100">
+          <div class="rounded-2xl bg-black/28 px-3 py-3 backdrop-blur-[2px]">
+            <div class="flex items-center justify-between gap-3">
+              <p class="truncate text-sm font-semibold">{{ cloud.cloudTypeName }}</p>
+              <span class="shrink-0 rounded-full border border-white/20 bg-white/10 px-2 py-0.5 text-[11px]">
+                {{ rarityMeta[cloud.cloudTypeRarity].label }}
+              </span>
+            </div>
+            <p class="mt-2 truncate text-xs text-white/78">📷 {{ cloud.username }}</p>
+            <p class="mt-1 truncate text-xs text-white/78">🕐 {{ formatUploadTime(cloud) }}</p>
+            <p class="mt-1 truncate text-xs text-white/65">{{ cloud.location_name || '未填写位置' }}</p>
+          </div>
+        </div>
+      </button>
+    </section>
+
+    <section v-else class="mt-6 rounded-[28px] border border-dashed border-slate-300 bg-white px-6 py-12 text-center">
+      <p class="text-xl font-semibold text-slate-900">还没有符合条件的云图</p>
+      <p class="mt-2 text-sm text-slate-500">换个云型筛选试试，或者等社区上传更多作品。</p>
+    </section>
+
+    <div ref="sentinel" class="h-10"></div>
+
+    <div v-if="loadingMore" class="flex justify-center py-4">
+      <div class="rounded-full border border-slate-200 bg-white px-4 py-2 text-sm text-slate-500 shadow-sm">
+        正在加载更多云图...
+      </div>
+    </div>
+
+    <div v-else-if="hasMore && galleryItems.length" class="flex justify-center py-4">
+      <button
+        type="button"
+        @click="loadMore"
+        class="rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:border-slate-300 hover:text-slate-900"
+      >
+        手动加载更多
+      </button>
+    </div>
+
+    <ImageDetailModal
+      v-if="selectedCloud"
+      :open="!!selectedCloud"
+      :image-url="selectedCloud.image_url"
+      :image-alt="selectedCloud.cloudTypeName"
+      :title="selectedCloud.cloudTypeName"
+      :subtitle="`上传者：${selectedCloud.username}`"
+      :badge-label="rarityMeta[selectedCloud.cloudTypeRarity].label"
+      :badge-class="rarityMeta[selectedCloud.cloudTypeRarity].chip"
+      @close="closeDetail"
+    >
+      <div class="grid gap-4 sm:grid-cols-2">
+        <div class="rounded-2xl bg-slate-50 p-4">
+          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">上传时间</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">{{ formatUploadTime(selectedCloud) }}</p>
+        </div>
+        <div class="rounded-2xl bg-slate-50 p-4">
+          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">拍摄时间</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">{{ formatCapturedTime(selectedCloud) }}</p>
+        </div>
+        <div class="rounded-2xl bg-slate-50 p-4">
+          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">位置</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">{{ selectedCloud.location_name || '未填写位置名称' }}</p>
+        </div>
+        <div class="rounded-2xl bg-slate-50 p-4">
+          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">模糊化经纬度</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">
+            纬度 {{ formatCoordinate(selectedCloud.latitude) }} / 经度 {{ formatCoordinate(selectedCloud.longitude) }}
+          </p>
+        </div>
+      </div>
+
+      <div class="mt-5 rounded-[28px] border border-slate-200 bg-white p-5">
+        <p class="text-xs uppercase tracking-[0.18em] text-slate-500">图片说明</p>
+        <p class="mt-3 text-sm leading-7 text-slate-700">
+          {{ selectedCloud.description || '上传者没有留下额外说明。' }}
+        </p>
+      </div>
+    </ImageDetailModal>
+    </div>
   </div>
 </template>

src/views/map/MapView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
 import { supabase } from '@/lib/supabase'
 import { loadAMap } from '@/lib/amap'
 
@@ -8,6 +9,9 @@ interface CloudMarkerData {
   latitude: number
   longitude: number
   imageUrl: string
+  thumbnailUrl: string | null
+  locationName: string | null
+  description: string | null
   cloudTypeName: string
   rarity: 'common' | 'uncommon' | 'rare'
   username: string
@@ -20,12 +24,17 @@ const previewCloud = ref<CloudMarkerData | null>(null)
 const satelliteOn = ref(false)
 const statusText = ref('加载中...')
 
+const VISIBLE_WINDOW_MS = 2 * 60 * 60 * 1000
+const MIN_MARKER_OPACITY = 0.3
+
 let AMapLib: typeof AMap | null = null
 let mapInst: AMap.Map | null = null
 let satLayer: AMap.TileLayer | null = null
 let roadLayer: AMap.TileLayer | null = null
 let mks: AMap.Marker[] = []
 let hoverIW: AMap.InfoWindow | null = null
+let allClouds: CloudMarkerData[] = []
+let redrawTimer: number | null = null
 
 const rarityColors: Record<string, string> = {
   common: '#cbd5e1',
@@ -33,6 +42,12 @@ const rarityColors: Record<string, string> = {
   rare: '#c084fc',
 }
 
+const rarityMeta = {
+  common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200' },
+  uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200' },
+  rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200' },
+} as const
+
 function timeAgo(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime()
   const m = Math.floor(diff / 60000)
@@ -45,25 +60,54 @@ function timeAgo(iso: string): string {
   return new Date(iso).toLocaleDateString('zh-CN')
 }
 
+function formatDateTime(iso: string | null) {
+  if (!iso) return '未知时间'
+  return new Date(iso).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function formatCoordinate(value: number | null) {
+  return value === null ? '未记录' : value.toFixed(2)
+}
+
+function getCloudAgeMs(cloud: CloudMarkerData) {
+  const capturedTime = new Date(cloud.capturedAt).getTime()
+  const fallbackTime = new Date(cloud.createdAt).getTime()
+  const targetTime = Number.isNaN(capturedTime) ? fallbackTime : capturedTime
+  return Date.now() - targetTime
+}
+
+function getMarkerOpacity(cloud: CloudMarkerData) {
+  const ageMs = getCloudAgeMs(cloud)
+  if (ageMs >= VISIBLE_WINDOW_MS) return null
+  if (ageMs <= 0) return 1
+
+  const progress = ageMs / VISIBLE_WINDOW_MS
+  return 1 - progress * (1 - MIN_MARKER_OPACITY)
+}
+
 function bubbleHtml(cloud: CloudMarkerData): string {
   const border = rarityColors[cloud.rarity] || rarityColors.common
-  const hours = (Date.now() - new Date(cloud.createdAt).getTime()) / 36e5
-  let opacity = 1
-  if (hours > 24) opacity = 0.35
-  else if (hours > 2) opacity = 0.6
-  else if (hours > 0.5) opacity = 0.85
+  const bubbleImage = cloud.thumbnailUrl || cloud.imageUrl
+  const opacity = getMarkerOpacity(cloud) ?? MIN_MARKER_OPACITY
   return `<div style="opacity:${opacity};width:46px;height:46px;cursor:pointer;line-height:0">
     <div style="box-sizing:border-box;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#ffffff 0%,#e8ecf1 100%);border:3px solid ${border};box-shadow:0 4px 16px rgba(0,0,0,0.3),inset 0 2px 4px rgba(255,255,255,0.6),0 0 0 2px rgba(0,0,0,0.06);overflow:hidden">
-      <img src="${cloud.imageUrl}" style="display:block;width:100%;height:100%;object-fit:cover" />
+      <img src="${bubbleImage}" style="display:block;width:100%;height:100%;object-fit:cover" />
     </div>
   </div>`
 }
 
 function hoverCardHtml(cloud: CloudMarkerData): string {
   const border = rarityColors[cloud.rarity] || rarityColors.common
+  const cardImage = cloud.thumbnailUrl || cloud.imageUrl
   const label = cloud.rarity === 'common' ? '常见' : cloud.rarity === 'uncommon' ? '少见' : '罕见'
   return `<div style="background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.18);overflow:hidden;width:200px;font-family:system-ui,-apple-system,sans-serif">
-    <img src="${cloud.imageUrl}" style="display:block;width:100%;height:110px;object-fit:cover" />
+    <img src="${cardImage}" style="display:block;width:100%;height:110px;object-fit:cover" />
     <div style="padding:8px 10px">
       <div style="display:flex;align-items:center;gap:6px">
         <span style="font-size:13px;font-weight:600;color:#1f2937">${cloud.cloudTypeName}</span>
@@ -94,7 +138,7 @@ function hideHoverCard() {
 async function loadClouds(): Promise<CloudMarkerData[]> {
   const { data, error } = await supabase
     .from('clouds')
-    .select('id,image_url,latitude,longitude,captured_at,created_at,custom_cloud_type,cloud_types(name,rarity),profiles(username)')
+    .select('id,image_url,thumbnail_url,latitude,longitude,location_name,description,captured_at,created_at,custom_cloud_type,cloud_types(name,rarity),profiles(username)')
     .eq('status', 'approved')
     .eq('is_hidden', false)
     .not('latitude', 'is', null)
@@ -118,6 +162,9 @@ async function loadClouds(): Promise<CloudMarkerData[]> {
       latitude: r.latitude as number,
       longitude: r.longitude as number,
       imageUrl: r.image_url as string,
+      thumbnailUrl: (r.thumbnail_url as string | null) ?? null,
+      locationName: (r.location_name as string | null) ?? null,
+      description: (r.description as string | null) ?? null,
       cloudTypeName: (ct?.name as string) || (r.custom_cloud_type as string) || '未知',
       rarity: (ct?.rarity as 'common' | 'uncommon' | 'rare') || 'common',
       username: (pf?.username as string) || '匿名',
@@ -128,6 +175,13 @@ async function loadClouds(): Promise<CloudMarkerData[]> {
   return result
 }
 
+function getVisibleClouds(clouds: CloudMarkerData[]) {
+  return clouds.filter(cloud => {
+    const opacity = getMarkerOpacity(cloud)
+    return opacity !== null
+  })
+}
+
 function clearMarkers() {
   hideHoverCard()
   for (const m of mks) m.setMap(null)
@@ -137,7 +191,14 @@ function clearMarkers() {
 function drawMarkers(clouds: CloudMarkerData[]) {
   if (!AMapLib) return
   clearMarkers()
-  for (const c of clouds) {
+  const visibleClouds = getVisibleClouds(clouds)
+  statusText.value = `${visibleClouds.length} 朵云（近 2 小时）`
+
+  if (previewCloud.value && !visibleClouds.some(item => item.id === previewCloud.value?.id)) {
+    previewCloud.value = null
+  }
+
+  for (const c of visibleClouds) {
     const m = new AMapLib.Marker({
       position: [c.longitude, c.latitude],
       content: bubbleHtml(c),
@@ -146,7 +207,9 @@ function drawMarkers(clouds: CloudMarkerData[]) {
     } as AMap.MarkerOptions)
     m.on('mouseover', () => showHoverCard(c, [c.longitude, c.latitude]))
     m.on('mouseout', () => hideHoverCard())
-    m.on('click', () => { previewCloud.value = c })
+    m.on('click', () => {
+      previewCloud.value = c
+    })
     m.setMap(mapInst!)
     mks.push(m)
   }
@@ -154,7 +217,15 @@ function drawMarkers(clouds: CloudMarkerData[]) {
 
 async function refresh() {
   statusText.value = '加载中...'
-  drawMarkers(await loadClouds())
+  allClouds = await loadClouds()
+  drawMarkers(allClouds)
+}
+
+function startMarkerDecayTimer() {
+  if (redrawTimer !== null) window.clearInterval(redrawTimer)
+  redrawTimer = window.setInterval(() => {
+    drawMarkers(allClouds)
+  }, 60 * 1000)
 }
 
 function toggleSat() {
@@ -191,12 +262,17 @@ onMounted(async () => {
     mapInst.addControl(new AMapLib.ControlBar({ position: { right: '10px', top: '80px' } } as Record<string, unknown>))
     mapInst.on('click', () => { previewCloud.value = null; hideHoverCard() })
     await refresh()
+    startMarkerDecayTimer()
   } catch (e) {
     statusText.value = `加载失败: ${e instanceof Error ? e.message : String(e)}`
   }
 })
 
 onUnmounted(() => {
+  if (redrawTimer !== null) {
+    window.clearInterval(redrawTimer)
+    redrawTimer = null
+  }
   mapInst?.destroy()
   mapInst = null
   AMapLib = null
@@ -212,20 +288,44 @@ onUnmounted(() => {
       <button @click="toggleSat" class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50" :title="satelliteOn ? '切换普通视图' : '切换卫星视图'"><span class="text-lg">{{ satelliteOn ? '🗺️' : '🛰️' }}</span></button>
     </div>
 
-    <Teleport to="body">
-      <div v-if="previewCloud" class="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-6" @click="previewCloud = null">
-        <button @click="previewCloud = null" class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 text-white text-xl flex items-center justify-center">✕</button>
-        <div class="max-w-4xl max-h-full flex flex-col items-center" @click.stop>
-          <img :src="previewCloud.imageUrl" alt="" class="max-w-full max-h-[75vh] rounded-lg object-contain" />
-          <div class="mt-4 text-white text-center">
-            <div class="flex items-center justify-center gap-2 mb-1">
-              <span class="text-lg font-semibold">{{ previewCloud.cloudTypeName }}</span>
-              <span class="text-xs px-2 py-0.5 rounded-full border" :style="{ color: rarityColors[previewCloud.rarity] || rarityColors.common, borderColor: rarityColors[previewCloud.rarity] || rarityColors.common }">{{ previewCloud.rarity === 'common' ? '常见' : previewCloud.rarity === 'uncommon' ? '少见' : '罕见' }}</span>
-            </div>
-            <div class="text-sm text-white/70">📷 {{ previewCloud.username }} &middot; 🕐 {{ timeAgo(previewCloud.capturedAt) }}</div>
-          </div>
+    <ImageDetailModal
+      v-if="previewCloud"
+      :open="!!previewCloud"
+      :image-url="previewCloud.imageUrl"
+      :image-alt="previewCloud.cloudTypeName"
+      :title="previewCloud.cloudTypeName"
+      :subtitle="`上传者：${previewCloud.username}`"
+      :badge-label="rarityMeta[previewCloud.rarity].label"
+      :badge-class="rarityMeta[previewCloud.rarity].chip"
+      @close="previewCloud = null"
+    >
+      <div class="grid gap-4 sm:grid-cols-2">
+        <div class="rounded-2xl bg-slate-50 p-4">
+          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">上传时间</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(previewCloud.createdAt) }}</p>
+        </div>
+        <div class="rounded-2xl bg-slate-50 p-4">
+          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">拍摄时间</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(previewCloud.capturedAt) }}</p>
+        </div>
+        <div class="rounded-2xl bg-slate-50 p-4">
+          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">位置</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">{{ previewCloud.locationName || '未填写位置名称' }}</p>
+        </div>
+        <div class="rounded-2xl bg-slate-50 p-4">
+          <p class="text-xs uppercase tracking-[0.18em] text-slate-500">模糊化经纬度</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">
+            纬度 {{ formatCoordinate(previewCloud.latitude) }} / 经度 {{ formatCoordinate(previewCloud.longitude) }}
+          </p>
         </div>
       </div>
-    </Teleport>
+
+      <div class="mt-5 rounded-[28px] border border-slate-200 bg-white p-5">
+        <p class="text-xs uppercase tracking-[0.18em] text-slate-500">图片说明</p>
+        <p class="mt-3 text-sm leading-7 text-slate-700">
+          {{ previewCloud.description || '上传者没有留下额外说明。' }}
+        </p>
+      </div>
+    </ImageDetailModal>
   </div>
 </template>