feat: enhance cloud image management

src/components/cloud/MapPickerModal.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { NButton } from 'naive-ui'
+import { loadAMap } from '@/lib/amap'
+
+const props = withDefaults(defineProps<{
+  open: boolean
+  latitude: number | null
+  longitude: number | null
+  title?: string
+  description?: string
+  footerText?: string
+}>(), {
+  title: '地图选点',
+  description: '点击地图即可回填经纬度，也可以继续手动修改。',
+  footerText: '建议点选大致拍摄位置，保存时会继续做模糊化处理。',
+})
+
+const emit = defineEmits<{
+  close: []
+  confirm: [payload: { latitude: number; longitude: number }]
+}>()
+
+const loading = ref(false)
+const errorMsg = ref('')
+const pickedLat = ref<number | null>(null)
+const pickedLng = ref<number | null>(null)
+const mapEl = ref<HTMLDivElement | null>(null)
+
+let mapPickerAMap: typeof AMap | null = null
+let mapPickerInstance: AMap.Map | null = null
+let mapPickerMarker: AMap.Marker | null = null
+
+function formatCoordinate(value: number | null) {
+  return value === null ? '未选择' : value.toFixed(6)
+}
+
+function destroyMapPicker() {
+  mapPickerMarker?.setMap(null)
+  mapPickerMarker = null
+  mapPickerInstance?.destroy()
+  mapPickerInstance = null
+}
+
+function placeMarker(longitude: number, latitude: number) {
+  if (!mapPickerAMap || !mapPickerInstance) return
+
+  if (!mapPickerMarker) {
+    mapPickerMarker = new mapPickerAMap.Marker({
+      position: [longitude, latitude],
+      title: '拍摄位置',
+    } as AMap.MarkerOptions)
+    mapPickerMarker.setMap(mapPickerInstance)
+  } else {
+    mapPickerMarker.setPosition([longitude, latitude])
+  }
+}
+
+function extractLngLat(event: unknown) {
+  const payload = event as { lnglat?: { lng?: number; lat?: number } } | undefined
+  const lng = payload?.lnglat?.lng
+  const lat = payload?.lnglat?.lat
+
+  if (typeof lng !== 'number' || typeof lat !== 'number') return null
+  return { lng, lat }
+}
+
+function handleMapClick(event: unknown) {
+  const picked = extractLngLat(event)
+  if (!picked) return
+
+  pickedLng.value = picked.lng
+  pickedLat.value = picked.lat
+  placeMarker(picked.lng, picked.lat)
+}
+
+async function initializeMap() {
+  loading.value = true
+  errorMsg.value = ''
+  pickedLat.value = props.latitude
+  pickedLng.value = props.longitude
+
+  await nextTick()
+  destroyMapPicker()
+
+  try {
+    mapPickerAMap = await loadAMap()
+
+    const hasCoordinates =
+      typeof props.latitude === 'number' &&
+      typeof props.longitude === 'number'
+
+    const center: [number, number] = hasCoordinates
+      ? [props.longitude as number, props.latitude as number]
+      : [104.07, 30.67]
+
+    mapPickerInstance = new mapPickerAMap.Map(mapEl.value!, {
+      viewMode: '2D',
+      pitch: 0,
+      rotation: 0,
+      zoom: hasCoordinates ? 11 : 4,
+      center,
+      mapStyle: 'amap://styles/normal',
+      resizeEnable: true,
+    } as AMap.MapOptions)
+
+    mapPickerInstance.on('click', handleMapClick)
+
+    if (hasCoordinates) {
+      placeMarker(props.longitude as number, props.latitude as number)
+    }
+  } catch (error) {
+    errorMsg.value = error instanceof Error ? error.message : '地图加载失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+function close() {
+  emit('close')
+}
+
+function confirm() {
+  if (pickedLat.value === null || pickedLng.value === null) return
+  emit('confirm', {
+    latitude: pickedLat.value,
+    longitude: pickedLng.value,
+  })
+}
+
+watch(() => props.open, open => {
+  if (open) {
+    initializeMap()
+  } else {
+    loading.value = false
+    errorMsg.value = ''
+    destroyMapPicker()
+  }
+})
+
+onBeforeUnmount(() => {
+  destroyMapPicker()
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-[140] flex items-center justify-center bg-slate-950/55 px-4 py-6"
+      @click="close"
+    >
+      <div class="w-full max-w-3xl overflow-hidden bg-white shadow-2xl" @click.stop>
+        <div class="flex items-start justify-between border-b border-slate-200 px-6 py-5">
+          <div>
+            <h3 class="text-xl font-semibold text-slate-900">{{ title }}</h3>
+            <p class="mt-1 text-sm text-slate-500">{{ description }}</p>
+          </div>
+          <button
+            type="button"
+            class="p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+            @click="close"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div class="px-6 py-5">
+          <div class="mb-4 flex flex-wrap items-center gap-3 border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+            <span>当前选择：</span>
+            <span class="font-medium text-slate-900">纬度 {{ formatCoordinate(pickedLat) }}</span>
+            <span class="font-medium text-slate-900">经度 {{ formatCoordinate(pickedLng) }}</span>
+          </div>
+
+          <div class="relative overflow-hidden border border-slate-200 bg-slate-100">
+            <div ref="mapEl" class="h-[420px] w-full"></div>
+
+            <div
+              v-if="loading"
+              class="absolute inset-0 flex items-center justify-center bg-white/80 text-sm font-medium text-slate-600"
+            >
+              正在加载地图...
+            </div>
+
+            <div
+              v-if="errorMsg"
+              class="absolute inset-0 flex items-center justify-center bg-white/90 px-6 text-center text-sm text-red-600"
+            >
+              {{ errorMsg }}
+            </div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between border-t border-slate-200 px-6 py-4">
+          <p class="text-sm text-slate-500">{{ footerText }}</p>
+          <div class="flex gap-3">
+            <NButton secondary strong @click="close">取消</NButton>
+            <NButton
+              type="primary"
+              secondary
+              strong
+              :disabled="pickedLat === null || pickedLng === null"
+              @click="confirm"
+            >
+              使用这个位置
+            </NButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>