位置信息

src/components/LocationPicker.vue

@@ -6,6 +6,44 @@ import Dialog from 'primevue/dialog'
 let L = null
 let searchAbortController = null
 
+const MAP_DEFAULT_CENTER = Object.freeze({
+  lat: 40.7128,
+  lng: -74.006
+})
+const MAP_DEFAULT_ZOOM = 13
+const GEOLOCATION_TIMEOUT = 5000
+const REVERSE_GEOCODE_THROTTLE = 500
+
+const createThrottle = (fn, wait = 300) => {
+  let timeoutId = null
+  let lastArgs = null
+  let lastInvokeTime = 0
+
+  return (...args) => {
+    const now = Date.now()
+    const remaining = wait - (now - lastInvokeTime)
+
+    if (remaining <= 0) {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+        timeoutId = null
+      }
+      lastInvokeTime = now
+      fn(...args)
+      return
+    }
+
+    lastArgs = args
+    if (!timeoutId) {
+      timeoutId = setTimeout(() => {
+        lastInvokeTime = Date.now()
+        timeoutId = null
+        fn(...(lastArgs || []))
+      }, remaining)
+    }
+  }
+}
+
 const props = defineProps({
   modelValue: {
     type: Boolean,
@@ -104,8 +142,8 @@ const initMap = async () => {
   }
 
   // 默认位置：纽约市
-  const defaultLat = 40.7128
-  const defaultLng = -74.0060
+  const defaultLat = MAP_DEFAULT_CENTER.lat
+  const defaultLng = MAP_DEFAULT_CENTER.lng
   let initialLat = defaultLat
   let initialLng = defaultLng
 
@@ -127,7 +165,7 @@ const initMap = async () => {
             },
             {
               enableHighAccuracy: true,
-              timeout: 5000,
+              timeout: GEOLOCATION_TIMEOUT,
               maximumAge: 0
             }
           )
@@ -143,7 +181,7 @@ const initMap = async () => {
   // 初始化地图
   mapInstance.value = L.map(mapContainer.value, {
     center: [initialLat, initialLng],
-    zoom: 13,
+    zoom: MAP_DEFAULT_ZOOM,
     zoomControl: true
   })
 
@@ -158,8 +196,6 @@ const initMap = async () => {
     draggable: !props.readonly
   }).addTo(mapInstance.value)
 
-  selectedLocation.value = { lat: initialLat, lng: initialLng, address: '' }
-
   // 确保地图正确渲染
   setTimeout(() => {
     if (mapInstance.value) {
@@ -184,15 +220,15 @@ const initMap = async () => {
   })
 
   // 初始位置的反向地理编码
-  reverseGeocode(initialLat, initialLng)
+  updateMarker(initialLat, initialLng, { immediate: true })
 }
 
-const updateMarker = (lat, lng) => {
+const updateMarker = (lat, lng, options = {}) => {
   if (mapMarker.value) {
     mapMarker.value.setLatLng([lat, lng])
   }
   selectedLocation.value = { lat, lng, address: '' }
-  reverseGeocode(lat, lng)
+  reverseGeocode(lat, lng, options)
 }
 
 // 精简地址，只保留关键信息
@@ -260,7 +296,7 @@ const geocode = async (address) => {
   }
 }
 
-const reverseGeocode = async (lat, lng) => {
+const reverseGeocodeImpl = async (lat, lng) => {
   try {
     const response = await fetch(
       `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1&accept-language=en`
@@ -284,6 +320,18 @@ const reverseGeocode = async (lat, lng) => {
   }
 }
 
+const throttledReverseGeocode = createThrottle((lat, lng) => {
+  reverseGeocodeImpl(lat, lng)
+}, REVERSE_GEOCODE_THROTTLE)
+
+const reverseGeocode = (lat, lng, { immediate = false } = {}) => {
+  if (immediate) {
+    reverseGeocodeImpl(lat, lng)
+    return
+  }
+  throttledReverseGeocode(lat, lng)
+}
+
 const ensureMapReady = async () => {
   if (!mapInstance.value) {
     await initMap()
@@ -434,7 +482,7 @@ const handleSearchSelect = async (result) => {
     })
   }
 
-  updateMarker(result.lat, result.lng)
+  updateMarker(result.lat, result.lng, { immediate: true })
 }
 
 // 监听弹窗显示状态
@@ -518,7 +566,7 @@ watch(
 
                     // 如果有已保存的位置，更新地图视图
                     if (selectedLocation.value.lat && selectedLocation.value.lng) {
-                      mapInstance.value.setView([selectedLocation.value.lat, selectedLocation.value.lng], 13, { animate: false })
+                      mapInstance.value.setView([selectedLocation.value.lat, selectedLocation.value.lng], MAP_DEFAULT_ZOOM, { animate: false })
                       if (!mapMarker.value) {
                         // 如果标记不存在，重新创建
                         mapMarker.value = L.marker([selectedLocation.value.lat, selectedLocation.value.lng], {
@@ -529,13 +577,13 @@ watch(
                           updateMarker(lat, lng)
                         })
                       } else {
-                        updateMarker(selectedLocation.value.lat, selectedLocation.value.lng)
+                        updateMarker(selectedLocation.value.lat, selectedLocation.value.lng, { immediate: true })
                       }
                     } else {
                       // 如果没有保存的位置，重新获取用户位置或使用默认位置
-                      const defaultLat = 40.7128
-                      const defaultLng = -74.0060
-                      mapInstance.value.setView([defaultLat, defaultLng], 13, { animate: false })
+                      const defaultLat = MAP_DEFAULT_CENTER.lat
+                      const defaultLng = MAP_DEFAULT_CENTER.lng
+                      mapInstance.value.setView([defaultLat, defaultLng], MAP_DEFAULT_ZOOM, { animate: false })
                       if (!mapMarker.value) {
                         mapMarker.value = L.marker([defaultLat, defaultLng], {
                           draggable: !props.readonly
@@ -545,7 +593,7 @@ watch(
                           updateMarker(lat, lng)
                         })
                       } else {
-                        updateMarker(defaultLat, defaultLng)
+                        updateMarker(defaultLat, defaultLng, { immediate: true })
                       }
                     }
                   }

src/views/ScanView.vue

@@ -43,20 +43,23 @@ const isEditing = ref(false)
 const showLocationDialog = ref(false)
 const showLocationViewDialog = ref(false)
 
-const personKeys = [
-  'photoUrl',
-  'name',
-  'gender',
-  'phone',
-  'specialNote',
-  'emergencyContactName',
-  'emergencyContactPhone',
-  'emergencyContactEmail'
-]
-const petKeys = ['photoUrl', 'name', 'contactName', 'contactPhone', 'contactEmail', 'location', 'remark']
-const goodsKeys = ['photoUrl', 'name', 'contactName', 'contactPhone', 'contactEmail', 'location', 'remark']
-
-const formData = reactive({
+const FORM_KEY_MAP = Object.freeze({
+  person: [
+    'photoUrl',
+    'name',
+    'gender',
+    'phone',
+    'specialNote',
+    'emergencyContactName',
+    'emergencyContactPhone',
+    'emergencyContactEmail',
+    'location'
+  ],
+  pet: ['photoUrl', 'name', 'contactName', 'contactPhone', 'contactEmail', 'location', 'remark'],
+  goods: ['photoUrl', 'name', 'contactName', 'contactPhone', 'contactEmail', 'location', 'remark']
+})
+
+const DEFAULT_FORM_STATE = Object.freeze({
   photoUrl: '',
   name: '',
   gender: 'unknown',
@@ -72,6 +75,25 @@ const formData = reactive({
   location: ''
 })
 
+const createDefaultFormState = () => ({
+  ...DEFAULT_FORM_STATE
+})
+
+const formData = ref(createDefaultFormState())
+
+const profileApiMap = Object.freeze({
+  person: updatePersonProfileApi,
+  pet: updatePetProfileApi,
+  goods: updateGoodsInfoApi
+})
+
+const MAX_PHOTO_SIZE = 15 * 1024 * 1024
+const DEFAULT_NAME_BY_TYPE = Object.freeze({
+  person: 'Person',
+  pet: 'Pet',
+  goods: 'Goods'
+})
+
 const qrType = computed(() => qrDetail.value?.qrType || 'person')
 const isPerson = computed(() => qrType.value === 'person')
 const isPet = computed(() => qrType.value === 'pet')
@@ -82,45 +104,39 @@ const heroTitle = computed(() => {
   if (!qrDetail.value) return 'Contact Card'
   if (isPerson.value) return 'Person Card'
   if (isPet.value) return 'Pet Card'
-  if (isGoods.value) return 'Item Card'
+  if (isGoods.value) return 'Goods Card'
   return 'Contact Card'
 })
 
+const getActiveFormKeys = () => FORM_KEY_MAP[qrType.value] || FORM_KEY_MAP.person
+
 const parseError = (error) => {
-  if (!error) return 'Request failed'
-  if (typeof error === 'string') return error
-  if (error.message) return error.message
-  if (error.detail) return error.detail
-  if (error.response?.data?.message) return error.response.data.message
-  if (error.data?.message) return error.data.message
-  if (error.message === undefined && error?.error) return error.error
-  return 'Request failed'
+  return (
+    error?.response?.data?.message ||
+    error?.data?.message ||
+    error?.detail ||
+    error?.message ||
+    error?.error ||
+    (typeof error === 'string' ? error : '') ||
+    'Request failed'
+  )
 }
 
-const resetForm = (source) => {
-  const allKeys = Array.from(new Set([...personKeys, ...petKeys, ...goodsKeys]))
-  allKeys.forEach((key) => {
-    if (key === 'gender') {
-      formData[key] = 'unknown'
-      return
-    }
-    formData[key] = ''
-  })
-  let keys = personKeys
-  if (isPet.value) keys = petKeys
-  if (isGoods.value) keys = goodsKeys
-  keys.forEach((key) => {
-    if (source && Object.prototype.hasOwnProperty.call(source, key)) {
-      formData[key] = source[key] ?? (key === 'gender' ? 'unknown' : '')
-    }
-  })
+const resetForm = (source = null) => {
+  const nextState = createDefaultFormState()
+  if (source) {
+    getActiveFormKeys().forEach((key) => {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        nextState[key] = source[key] ?? DEFAULT_FORM_STATE[key] ?? ''
+      }
+    })
+  }
+  formData.value = nextState
 }
 
 const setDocumentTitle = () => {
   if (typeof document === 'undefined') return
-  let defaultName = 'Person'
-  if (isPet.value) defaultName = 'Pet'
-  if (isGoods.value) defaultName = 'Item'
+  const defaultName = DEFAULT_NAME_BY_TYPE[qrType.value] || DEFAULT_NAME_BY_TYPE.person
   const name = profile.value?.name || defaultName
   document.title = `${name} | Emergency QR`
 }
@@ -182,14 +198,11 @@ const handleVerifyMaintenance = async () => {
 }
 
 const buildProfilePayload = () => {
-  let keys = personKeys
-  if (isPet.value) keys = petKeys
-  if (isGoods.value) keys = goodsKeys
   const payload = {
     qrCode: qrCode.value
   }
-  keys.forEach((key) => {
-    payload[key] = formData[key] ?? ''
+  getActiveFormKeys().forEach((key) => {
+    payload[key] = formData.value[key] ?? ''
   })
   if (maintenanceCode.value) {
     payload.maintenanceCode = maintenanceCode.value
@@ -202,9 +215,7 @@ const handleSaveProfile = async () => {
   loading.saving = true
   try {
     const payload = buildProfilePayload()
-    let updater = updatePersonProfileApi
-    if (isPet.value) updater = updatePetProfileApi
-    if (isGoods.value) updater = updateGoodsInfoApi
+    const updater = profileApiMap[qrType.value] || profileApiMap.person
     await updater(payload)
     toast.add({ severity: 'success', summary: 'Saved', detail: 'Profile has been updated.', life: 3000 })
     await fetchQrDetails()
@@ -226,7 +237,7 @@ const triggerPhotoPicker = () => {
 
 const handleImageError = (event) => {
   // Handle broken image preview
-  console.warn('Image load failed:', formData.photoUrl)
+  console.warn('Image load failed:', formData.value.photoUrl)
   event.target.style.display = 'none'
 }
 
@@ -241,8 +252,7 @@ const handlePhotoChange = async (event) => {
   }
 
   // Validate file size (limit 15MB)
-  const maxSize = 15 * 1024 * 1024
-  if (file.size > maxSize) {
+  if (file.size > MAX_PHOTO_SIZE) {
     toast.add({ severity: 'warn', summary: 'Notice', detail: 'Image size cannot exceed 15MB.', life: 2400 })
     return
   }
@@ -253,7 +263,7 @@ const handlePhotoChange = async (event) => {
     // Normalize upload response shape
     const url = response?.data?.url || response?.url || ''
     if (url) {
-      formData.photoUrl = url
+      formData.value.photoUrl = url
       toast.add({ severity: 'success', summary: 'Uploaded', detail: 'Photo has been updated.', life: 2400 })
     } else {
       throw new Error('Image URL not found')
@@ -342,9 +352,6 @@ watch(
 
 watch([qrType, profile], () => {
   resetForm(profile.value)
-})
-
-watch([qrType, () => profile.value?.name], () => {
   setDocumentTitle()
 })
 
@@ -360,7 +367,7 @@ const handleOpenLocationDialog = () => {
 }
 
 const handleSaveLocation = (location) => {
-  formData.location = location
+  formData.value.location = location
   toast.add({ severity: 'success', summary: 'Saved', detail: 'Address selected.', life: 2400 })
 }
 
@@ -369,7 +376,7 @@ const handleOpenLocationView = () => {
 }
 
 const openGoogleMaps = () => {
-  const location = isPerson.value ? null : profile.value?.location
+  const location = profile.value?.location
   if (!location) return
 
   // Try to parse coordinate format (lat, lng)
@@ -499,14 +506,16 @@ onMounted(() => {
                         <p class="text-[11px] font-semibold uppercase tracking-[0.35em] text-slate-500">{{ isPerson ?
                           'EMERGENCY CONTACT' : 'CONTACT' }}</p>
                       </div>
-                      <p class="mt-3 cursor-pointer text-3xl font-semibold leading-tight text-slate-800" title="Click to copy name"
+                      <p class="mt-3 cursor-pointer text-3xl font-semibold leading-tight text-slate-800"
+                        title="Click to copy name"
                         @click="copyInfo(isPerson ? profile?.emergencyContactName : profile?.contactName, 'Name')">
                         {{ isPerson ? profile?.emergencyContactName || '-' : profile?.contactName || '-' }}
                       </p>
                       <div class="mt-4 space-y-3 text-sm text-slate-600">
                         <div class="flex items-center gap-3">
                           <i class="pi pi-phone text-lg text-slate-500" />
-                          <div class="leading-tight cursor-pointer select-text text-slate-600" title="Click to copy phone"
+                          <div class="leading-tight cursor-pointer select-text text-slate-600"
+                            title="Click to copy phone"
                             @click="copyInfo(isPerson ? profile?.emergencyContactPhone : profile?.contactPhone, 'Phone')">
                             <p class="text-[10px] uppercase tracking-[0.4em] text-slate-400">PHONE</p>
                             <p class="text-base font-semibold text-slate-700">
@@ -517,7 +526,8 @@ onMounted(() => {
                         <div v-if="(isPerson ? profile?.emergencyContactEmail : profile?.contactEmail)"
                           class="flex items-center gap-3">
                           <i class="pi pi-envelope text-lg text-slate-500" />
-                          <div class="leading-tight min-w-0 cursor-pointer select-text text-slate-600" title="Click to copy email"
+                          <div class="leading-tight min-w-0 cursor-pointer select-text text-slate-600"
+                            title="Click to copy email"
                             @click="copyInfo(isPerson ? profile?.emergencyContactEmail : profile?.contactEmail, 'Email')">
                             <p class="text-[10px] uppercase tracking-[0.4em] text-slate-400">EMAIL</p>
                             <p class="truncate text-base font-semibold text-slate-700">
@@ -525,10 +535,10 @@ onMounted(() => {
                             </p>
                           </div>
                         </div>
-                        <div v-if="!isPerson && profile?.location" class="flex items-start gap-3">
+                        <div v-if="profile?.location" class="flex items-start gap-3">
                           <i class="pi pi-map-marker text-lg text-slate-500 mt-0.5 flex-shrink-0" />
-                          <div class="leading-tight cursor-pointer select-text text-slate-600" title="Click to copy address"
-                            @click="copyInfo(profile?.location, 'Address')">
+                          <div class="leading-tight cursor-pointer select-text text-slate-600"
+                            title="Click to copy address" @click="copyInfo(profile?.location, 'Address')">
                             <p class="text-[10px] uppercase tracking-[0.4em] text-slate-400">LOCATION</p>
                             <p class="flex-1 break-words whitespace-normal text-base font-medium text-slate-700">
                               {{ profile.location }}
@@ -549,12 +559,12 @@ onMounted(() => {
                           @click="sendEmail(isPerson ? profile?.emergencyContactEmail : profile?.contactEmail)">
                           <i class="pi pi-envelope" /> Email
                         </button>
-                        <button v-if="!isPerson && profile?.location" type="button"
+                        <button v-if="profile?.location" type="button"
                           class="inline-flex w-full items-center justify-center gap-1.5 rounded-full border border-purple-200 bg-purple-50 px-3 py-1.5 text-xs font-medium text-purple-700 transition hover:bg-purple-100"
                           @click="handleOpenLocationView">
                           <i class="pi pi-map" /> Map
                         </button>
-                        <button v-if="!isPerson && profile?.location" type="button"
+                        <button v-if="profile?.location" type="button"
                           class="inline-flex w-full items-center justify-center gap-1.5 rounded-full border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 transition hover:bg-red-100"
                           @click="openGoogleMaps">
                           <i class="pi pi-external-link" /> Google Maps
@@ -566,8 +576,7 @@ onMounted(() => {
                         <div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-100">
                           <i class="pi pi-info-circle text-sm text-amber-600" />
                         </div>
-                        <p class="text-xs font-medium uppercase tracking-wider text-slate-500">{{ isPerson ? 'Additional notes' :
-                          isGoods ? 'Item notes' : 'Extra description' }}</p>
+                        <p class="text-xs font-medium uppercase tracking-wider text-slate-500">{{ isPerson ? 'Additional notes' : isGoods ? 'Item notes' : 'Extra description' }}</p>
                       </div>
                       <p class="mt-3 whitespace-pre-wrap text-sm leading-relaxed text-slate-700">
                         {{ isPerson ? (profile?.specialNote || 'No extra details') : (profile?.remark || 'No extra details') }}
@@ -600,7 +609,8 @@ onMounted(() => {
               <div class="flex-1 text-sm text-emerald-700">
                 <p class="font-semibold">First-time tip</p>
                 <p class="mt-1">
-                  This is the first record for this QR code. Once submitted, it becomes active. Keep the maintenance code
+                  This is the first record for this QR code. Once submitted, it becomes active. Keep the maintenance
+                  code
                   safe for future edits.
                 </p>
               </div>
@@ -703,6 +713,21 @@ onMounted(() => {
                 <input v-model="formData.emergencyContactEmail" type="email"
                   class="w-full rounded-2xl border border-slate-200 px-4 py-3" placeholder="Optional" />
               </label>
+
+              <label class="space-y-2 text-sm md:col-span-2">
+                <span class="text-slate-500">Address</span>
+                <div class="flex gap-2">
+                  <input v-model="formData.location" type="text" readonly
+                    class="flex-1 rounded-2xl border border-slate-200 px-4 py-3 bg-slate-50 cursor-pointer"
+                    placeholder="Click to select address" @click="handleOpenLocationDialog" />
+                  <button type="button"
+                    class="rounded-2xl border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-50 whitespace-nowrap"
+                    @click="handleOpenLocationDialog">
+                    <i class="pi pi-map-marker mr-2" />
+                    Select address
+                  </button>
+                </div>
+              </label>
             </div>
 
             <div v-else class="grid gap-4 md:grid-cols-2">
@@ -743,7 +768,8 @@ onMounted(() => {
             <label class="block space-y-2 text-sm">
               <span class="text-slate-500">{{ isPerson ? 'Additional notes / health tips' : isGoods ? 'Item notes' : 'Extra remarks' }}</span>
               <textarea v-if="isPerson" v-model="formData.specialNote" rows="4"
-                class="w-full rounded-2xl border border-slate-200 px-4 py-3" placeholder="e.g. allergies, medical needs, carried items" />
+                class="w-full rounded-2xl border border-slate-200 px-4 py-3"
+                placeholder="e.g. allergies, medical needs, carried items" />
               <textarea v-else v-model="formData.remark" rows="4"
                 class="w-full rounded-2xl border border-slate-200 px-4 py-3"
                 :placeholder="isGoods ? 'e.g. item features, usage notes, handling tips' : 'e.g. pet habits, health info, behavior notes'" />
@@ -777,7 +803,7 @@ onMounted(() => {
     <LocationPicker v-model="showLocationDialog" :initial-location="formData.location" @save="handleSaveLocation" />
 
     <!-- Location preview dialog (read-only) -->
-    <LocationPicker v-model="showLocationViewDialog" :initial-location="isPerson ? null : profile?.location"
+    <LocationPicker v-model="showLocationViewDialog" :initial-location="profile?.location"
       :closable="true" :readonly="true" />
 
     <!-- Maintenance code dialog -->