Add image detail map and quick upload

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>