feat: enhance cloud image management

src/views/encyclopedia/CloudTypeView.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { NAlert, NButton, NCard, NEmpty, NSkeleton, NTag } from 'naive-ui'
 import { RouterLink, useRoute } from 'vue-router'
+import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
 import { supabase } from '@/lib/supabase'
 import { useAuthStore } from '@/stores/auth'
 import { useEncyclopediaStore } from '@/stores/encyclopedia'
@@ -11,6 +12,8 @@ interface CloudGalleryItem {
   id: string
   image_url: string
   thumbnail_url: string | null
+  latitude: number | null
+  longitude: number | null
   location_name: string | null
   description: string | null
   captured_at: string | null
@@ -27,6 +30,7 @@ const encyclopediaStore = useEncyclopediaStore()
 const loading = ref(true)
 const loadError = ref('')
 const gallery = ref<CloudGalleryItem[]>([])
+const selectedGalleryItem = ref<CloudGalleryItem | null>(null)
 const publicCount = ref(0)
 
 const rarityMeta = {
@@ -57,10 +61,29 @@ function formatGalleryTime(item: CloudGalleryItem) {
   return formatDate(item.captured_at || item.created_at)
 }
 
+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 openGalleryDetail(item: CloudGalleryItem) {
+  selectedGalleryItem.value = item
+}
+
 async function loadGallery(typeId: number) {
   const galleryQuery = supabase
     .from('clouds')
-    .select('id,image_url,thumbnail_url,location_name,description,captured_at,created_at,profiles(username)')
+    .select('id,image_url,thumbnail_url,latitude,longitude,location_name,description,captured_at,created_at,profiles(username)')
     .eq('cloud_type_id', typeId)
     .eq('status', 'approved')
     .eq('is_hidden', false)
@@ -84,13 +107,15 @@ async function loadGallery(typeId: number) {
   if (countError) throw countError
 
   gallery.value = ((galleryData || []) as Array<Record<string, unknown>>).map(row => {
-    const profiles = Array.isArray(row.profiles) ? row.profiles : []
+    const profiles = Array.isArray(row.profiles) ? row.profiles : row.profiles ? [row.profiles] : []
     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,
+      latitude: (row.latitude as number | null) ?? null,
+      longitude: (row.longitude as number | null) ?? null,
       location_name: (row.location_name as string | null) ?? null,
       description: (row.description as string | null) ?? null,
       captured_at: (row.captured_at as string | null) ?? null,
@@ -132,6 +157,10 @@ async function loadPage() {
 
 onMounted(loadPage)
 watch(() => route.params.id, loadPage)
+
+watch(() => route.params.id, () => {
+  selectedGalleryItem.value = null
+})
 </script>
 
 <template>
@@ -236,10 +265,12 @@ watch(() => route.params.id, loadPage)
         </div>
 
         <div v-if="gallery.length" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-          <article
+          <button
             v-for="item in gallery"
             :key="item.id"
-            class="overflow-hidden border border-slate-200 bg-white shadow-sm"
+            type="button"
+            class="overflow-hidden border border-slate-200 bg-white text-left shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg"
+            @click="openGalleryDetail(item)"
           >
             <img :src="item.thumbnail_url || item.image_url" :alt="cloudType.name" class="h-56 w-full object-cover" />
             <div class="p-5">
@@ -252,7 +283,7 @@ watch(() => route.params.id, loadPage)
                 {{ item.description }}
               </p>
             </div>
-          </article>
+          </button>
         </div>
 
         <div v-else class="border border-dashed border-slate-300 bg-white p-8">
@@ -263,6 +294,47 @@ watch(() => route.params.id, loadPage)
           </NEmpty>
         </div>
       </section>
+
+      <ImageDetailModal
+        v-if="selectedGalleryItem"
+        :open="!!selectedGalleryItem"
+        :image-url="selectedGalleryItem.image_url"
+        :thumbnail-url="selectedGalleryItem.thumbnail_url"
+        :image-alt="cloudType.name"
+        :title="cloudType.name"
+        :subtitle="`上传者：${selectedGalleryItem.profiles?.username || '匿名'}`"
+        :badge-label="rarityMeta[cloudType.rarity].label"
+        :badge-class="rarityMeta[cloudType.rarity].chip"
+        @close="selectedGalleryItem = null"
+      >
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="border border-slate-200 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(selectedGalleryItem.created_at) }}</p>
+          </div>
+          <div class="border border-slate-200 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(selectedGalleryItem.captured_at) }}</p>
+          </div>
+          <div class="border border-slate-200 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">{{ selectedGalleryItem.location_name || '未填写位置名称' }}</p>
+          </div>
+          <div class="border border-slate-200 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(selectedGalleryItem.latitude) }} / 经度 {{ formatCoordinate(selectedGalleryItem.longitude) }}
+            </p>
+          </div>
+        </div>
+
+        <div class="mt-5 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">
+            {{ selectedGalleryItem.description || '上传者没有留下额外说明。' }}
+          </p>
+        </div>
+      </ImageDetailModal>
     </template>
   </div>
 </template>