Add image detail map and quick upload

src/views/admin/AdminView.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { NAlert, NButton, NEmpty, NIcon, NSkeleton, NTag, useMessage } from 'naive-ui'
 import { Check, Eye, EyeOff, Refresh, Trash, X } from '@vicons/tabler'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
+import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
 import { supabase } from '@/lib/supabase'
 import { useAuthStore } from '@/stores/auth'
 import { useProfileStore } from '@/stores/profile'
@@ -792,6 +793,11 @@ onMounted(loadAdminData)
           {{ selectedImage.description || '上传者没有留下额外说明。' }}
         </p>
       </div>
+      <MiniLocationMap
+        :latitude="selectedImage.latitude"
+        :longitude="selectedImage.longitude"
+        :location-name="selectedImage.location_name"
+      />
     </ImageDetailModal>
   </div>
 </template>

src/views/encyclopedia/CloudTypeView.vue

@@ -3,6 +3,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 MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
 import { supabase } from '@/lib/supabase'
 import { useAuthStore } from '@/stores/auth'
 import { useEncyclopediaStore } from '@/stores/encyclopedia'
@@ -334,6 +335,11 @@ watch(() => route.params.id, () => {
             {{ selectedGalleryItem.description || '上传者没有留下额外说明。' }}
           </p>
         </div>
+        <MiniLocationMap
+          :latitude="selectedGalleryItem.latitude"
+          :longitude="selectedGalleryItem.longitude"
+          :location-name="selectedGalleryItem.location_name"
+        />
       </ImageDetailModal>
     </template>
   </div>

src/views/gallery/GalleryView.vue

@@ -4,6 +4,7 @@ import { NAlert, NButton, NDropdown, NEmpty, NIcon, NSkeleton, NTag, useMessage
 import { Clock, Location, Settings, User } from '@vicons/tabler'
 import CloudEditModal, { type CloudEditFormValue } from '@/components/cloud/CloudEditModal.vue'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
+import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
 import { supabase } from '@/lib/supabase'
 import { useAuthStore } from '@/stores/auth'
 import { useCloudsStore } from '@/stores/clouds'
@@ -524,6 +525,11 @@ onUnmounted(() => {
             {{ selectedCloud.description || '上传者没有留下额外说明。' }}
           </p>
         </div>
+        <MiniLocationMap
+          :latitude="selectedCloud.latitude"
+          :longitude="selectedCloud.longitude"
+          :location-name="selectedCloud.location_name"
+        />
 
         <template v-if="selectedCloudIsMine" #actions>
           <div class="flex items-center justify-between gap-3">

src/views/map/MapView.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
+import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
+import QuickUploadModal from '@/components/cloud/QuickUploadModal.vue'
 import { supabase } from '@/lib/supabase'
 import { loadAMap } from '@/lib/amap'
 import { NIcon } from 'naive-ui'
-import { Refresh,Map,Satellite} from '@vicons/tabler'
+import { CloudUpload, Refresh, Map, Satellite } from '@vicons/tabler'
 
 interface CloudMarkerData {
   id: string
@@ -25,6 +27,7 @@ const mapEl = ref<HTMLDivElement>()
 const previewCloud = ref<CloudMarkerData | null>(null)
 const satelliteOn = ref(false)
 const statusText = ref('加载中...')
+const quickUploadOpen = ref(false)
 
 const VISIBLE_WINDOW_MS = 2 * 60 * 60 * 1000
 const MIN_MARKER_OPACITY = 0.3
@@ -250,6 +253,18 @@ function toggleSat() {
   }
 }
 
+function openQuickUpload() {
+  quickUploadOpen.value = true
+}
+
+function closeQuickUpload() {
+  quickUploadOpen.value = false
+}
+
+async function handleQuickUploaded() {
+  await refresh()
+}
+
 onMounted(async () => {
   try {
     AMapLib = await loadAMap()
@@ -293,7 +308,18 @@ onUnmounted(() => {
   <div class="relative h-[100dvh] min-h-screen">
     <div ref="mapEl" class="w-full h-full"></div>
 
-    <div class="absolute bottom-6 right-4 flex flex-col gap-2 z-10">
+    <div class="absolute bottom-6 right-4 flex flex-col items-end gap-2 z-10">
+      <button
+        type="button"
+        class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50"
+        title="快速上传图片"
+        aria-label="快速上传图片"
+        @click="openQuickUpload"
+      >
+        <NIcon size="20" style="display: inline-flex; vertical-align: middle;">
+          <CloudUpload />
+        </NIcon>
+      </button>
       <button @click="refresh" class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50" title="刷新">
         <span class="text-lg">
           <NIcon>
@@ -348,6 +374,17 @@ onUnmounted(() => {
           {{ previewCloud.description || '上传者没有留下额外说明。' }}
         </p>
       </div>
+      <MiniLocationMap
+        :latitude="previewCloud.latitude"
+        :longitude="previewCloud.longitude"
+        :location-name="previewCloud.locationName"
+      />
     </ImageDetailModal>
+
+    <QuickUploadModal
+      :open="quickUploadOpen"
+      @close="closeQuickUpload"
+      @uploaded="handleQuickUploaded"
+    />
   </div>
 </template>

src/views/profile/ProfileView.vue

@@ -5,6 +5,7 @@ import { NAlert, NButton, NCard, NDropdown, NEmpty, NIcon, NProgress, NSkeleton,
 import { Settings } from '@vicons/tabler'
 import CloudEditModal, { type CloudEditFormValue } from '@/components/cloud/CloudEditModal.vue'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
+import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
 import ContributionHeatmap from '@/components/profile/ContributionHeatmap.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useCloudsStore } from '@/stores/clouds'
@@ -839,6 +840,11 @@ watch(selectedUploadDate, async newValue => {
           {{ selectedCloud.description || '上传者没有留下额外说明。' }}
         </p>
       </div>
+      <MiniLocationMap
+        :latitude="selectedCloud.latitude"
+        :longitude="selectedCloud.longitude"
+        :location-name="selectedCloud.location_name"
+      />
 
       <template v-if="isOwnProfile" #actions>
         <div class="flex items-center justify-between gap-3">