feat: improve map and upload experience
This commit is contained in:
+224
-4
@@ -1,11 +1,231 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { loadAMap } from '@/lib/amap'
|
||||
|
||||
interface CloudMarkerData {
|
||||
id: string
|
||||
latitude: number
|
||||
longitude: number
|
||||
imageUrl: string
|
||||
cloudTypeName: string
|
||||
rarity: 'common' | 'uncommon' | 'rare'
|
||||
username: string
|
||||
capturedAt: string
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
const mapEl = ref<HTMLDivElement>()
|
||||
const previewCloud = ref<CloudMarkerData | null>(null)
|
||||
const satelliteOn = ref(false)
|
||||
const statusText = ref('加载中...')
|
||||
|
||||
let AMapLib: typeof AMap | null = null
|
||||
let mapInst: AMap.Map | null = null
|
||||
let satLayer: AMap.TileLayer | null = null
|
||||
let roadLayer: AMap.TileLayer | null = null
|
||||
let mks: AMap.Marker[] = []
|
||||
let hoverIW: AMap.InfoWindow | null = null
|
||||
|
||||
const rarityColors: Record<string, string> = {
|
||||
common: '#cbd5e1',
|
||||
uncommon: '#60a5fa',
|
||||
rare: '#c084fc',
|
||||
}
|
||||
|
||||
function timeAgo(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime()
|
||||
const m = Math.floor(diff / 60000)
|
||||
if (m < 1) return '刚刚'
|
||||
if (m < 60) return `${m} 分钟前`
|
||||
const h = Math.floor(m / 60)
|
||||
if (h < 24) return `${h} 小时前`
|
||||
const d = Math.floor(h / 24)
|
||||
if (d < 30) return `${d} 天前`
|
||||
return new Date(iso).toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
function bubbleHtml(cloud: CloudMarkerData): string {
|
||||
const border = rarityColors[cloud.rarity] || rarityColors.common
|
||||
const hours = (Date.now() - new Date(cloud.createdAt).getTime()) / 36e5
|
||||
let opacity = 1
|
||||
if (hours > 24) opacity = 0.35
|
||||
else if (hours > 2) opacity = 0.6
|
||||
else if (hours > 0.5) opacity = 0.85
|
||||
return `<div style="opacity:${opacity};width:46px;height:46px;cursor:pointer;line-height:0">
|
||||
<div style="box-sizing:border-box;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#ffffff 0%,#e8ecf1 100%);border:3px solid ${border};box-shadow:0 4px 16px rgba(0,0,0,0.3),inset 0 2px 4px rgba(255,255,255,0.6),0 0 0 2px rgba(0,0,0,0.06);overflow:hidden">
|
||||
<img src="${cloud.imageUrl}" style="display:block;width:100%;height:100%;object-fit:cover" />
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
function hoverCardHtml(cloud: CloudMarkerData): string {
|
||||
const border = rarityColors[cloud.rarity] || rarityColors.common
|
||||
const label = cloud.rarity === 'common' ? '常见' : cloud.rarity === 'uncommon' ? '少见' : '罕见'
|
||||
return `<div style="background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.18);overflow:hidden;width:200px;font-family:system-ui,-apple-system,sans-serif">
|
||||
<img src="${cloud.imageUrl}" style="display:block;width:100%;height:110px;object-fit:cover" />
|
||||
<div style="padding:8px 10px">
|
||||
<div style="display:flex;align-items:center;gap:6px">
|
||||
<span style="font-size:13px;font-weight:600;color:#1f2937">${cloud.cloudTypeName}</span>
|
||||
<span style="font-size:10px;padding:1px 5px;border-radius:3px;color:${border};background:${border}22">${label}</span>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#9ca3af;margin-top:3px">📷 ${cloud.username} · ${timeAgo(cloud.capturedAt)}</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
function showHoverCard(cloud: CloudMarkerData, pos: [number, number]) {
|
||||
if (!AMapLib || !mapInst) return
|
||||
hoverIW?.close()
|
||||
const iw = new AMapLib.InfoWindow({
|
||||
content: hoverCardHtml(cloud),
|
||||
offset: new AMapLib.Pixel(-100, -60),
|
||||
isCustom: true,
|
||||
} as AMap.InfoWindowOptions)
|
||||
iw.open(mapInst, pos)
|
||||
hoverIW = iw
|
||||
}
|
||||
|
||||
function hideHoverCard() {
|
||||
hoverIW?.close()
|
||||
hoverIW = null
|
||||
}
|
||||
|
||||
async function loadClouds(): Promise<CloudMarkerData[]> {
|
||||
const { data, error } = await supabase
|
||||
.from('clouds')
|
||||
.select('id,image_url,latitude,longitude,captured_at,created_at,custom_cloud_type,cloud_types(name,rarity),profiles(username)')
|
||||
.eq('status', 'approved')
|
||||
.eq('is_hidden', false)
|
||||
.not('latitude', 'is', null)
|
||||
.not('longitude', 'is', null)
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(500)
|
||||
|
||||
if (error) {
|
||||
statusText.value = `查询失败: ${error.message}`
|
||||
return []
|
||||
}
|
||||
|
||||
const rows = data as Array<Record<string, unknown>> || []
|
||||
statusText.value = `${rows.length} 朵云`
|
||||
const result: CloudMarkerData[] = []
|
||||
for (const r of rows) {
|
||||
const ct = r.cloud_types as Record<string, unknown> | null
|
||||
const pf = r.profiles as Record<string, unknown> | null
|
||||
result.push({
|
||||
id: r.id as string,
|
||||
latitude: r.latitude as number,
|
||||
longitude: r.longitude as number,
|
||||
imageUrl: r.image_url as string,
|
||||
cloudTypeName: (ct?.name as string) || (r.custom_cloud_type as string) || '未知',
|
||||
rarity: (ct?.rarity as 'common' | 'uncommon' | 'rare') || 'common',
|
||||
username: (pf?.username as string) || '匿名',
|
||||
capturedAt: (r.captured_at as string) || (r.created_at as string),
|
||||
createdAt: r.created_at as string,
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function clearMarkers() {
|
||||
hideHoverCard()
|
||||
for (const m of mks) m.setMap(null)
|
||||
mks = []
|
||||
}
|
||||
|
||||
function drawMarkers(clouds: CloudMarkerData[]) {
|
||||
if (!AMapLib) return
|
||||
clearMarkers()
|
||||
for (const c of clouds) {
|
||||
const m = new AMapLib.Marker({
|
||||
position: [c.longitude, c.latitude],
|
||||
content: bubbleHtml(c),
|
||||
offset: new AMapLib.Pixel(-23, -23),
|
||||
zIndex: 200,
|
||||
} as AMap.MarkerOptions)
|
||||
m.on('mouseover', () => showHoverCard(c, [c.longitude, c.latitude]))
|
||||
m.on('mouseout', () => hideHoverCard())
|
||||
m.on('click', () => { previewCloud.value = c })
|
||||
m.setMap(mapInst!)
|
||||
mks.push(m)
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
statusText.value = '加载中...'
|
||||
drawMarkers(await loadClouds())
|
||||
}
|
||||
|
||||
function toggleSat() {
|
||||
if (!AMapLib || !mapInst) return
|
||||
if (satelliteOn.value) {
|
||||
if (satLayer) mapInst.remove(satLayer as unknown as Parameters<typeof mapInst.remove>[0])
|
||||
if (roadLayer) mapInst.remove(roadLayer as unknown as Parameters<typeof mapInst.remove>[0])
|
||||
satelliteOn.value = false
|
||||
} else {
|
||||
satLayer = satLayer || new AMapLib.TileLayer.Satellite()
|
||||
roadLayer = roadLayer || new AMapLib.TileLayer.RoadNet()
|
||||
mapInst.add(satLayer as unknown as Parameters<typeof mapInst.add>[0])
|
||||
mapInst.add(roadLayer as unknown as Parameters<typeof mapInst.add>[0])
|
||||
satelliteOn.value = true
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
AMapLib = await loadAMap()
|
||||
mapInst = new AMapLib.Map(mapEl.value!, {
|
||||
viewMode: '3D',
|
||||
pitch: 0,
|
||||
rotation: 0,
|
||||
zoom: 5,
|
||||
center: [104.07, 30.67],
|
||||
mapStyle: 'amap://styles/normal',
|
||||
features: ['bg', 'road', 'building', 'point'],
|
||||
resizeEnable: true,
|
||||
} as AMap.MapOptions)
|
||||
|
||||
mapInst.addControl(new AMapLib.Scale())
|
||||
mapInst.addControl(new AMapLib.ToolBar({ position: 'LT' } as Record<string, unknown>))
|
||||
mapInst.addControl(new AMapLib.ControlBar({ position: { right: '10px', top: '80px' } } as Record<string, unknown>))
|
||||
mapInst.on('click', () => { previewCloud.value = null; hideHoverCard() })
|
||||
await refresh()
|
||||
} catch (e) {
|
||||
statusText.value = `加载失败: ${e instanceof Error ? e.message : String(e)}`
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
mapInst?.destroy()
|
||||
mapInst = null
|
||||
AMapLib = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-4rem)]">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4">☁️ OpenCloud</h1>
|
||||
<p class="text-gray-500">实时云图地图加载中...</p>
|
||||
<div class="relative h-[calc(100vh-4rem)]">
|
||||
<div ref="mapEl" class="w-full h-full"></div>
|
||||
|
||||
<div class="absolute bottom-6 right-4 flex flex-col gap-2 z-10">
|
||||
<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">🔄</span></button>
|
||||
<button @click="toggleSat" class="w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50" :title="satelliteOn ? '切换普通视图' : '切换卫星视图'"><span class="text-lg">{{ satelliteOn ? '🗺️' : '🛰️' }}</span></button>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="previewCloud" class="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-6" @click="previewCloud = null">
|
||||
<button @click="previewCloud = null" class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 text-white text-xl flex items-center justify-center">✕</button>
|
||||
<div class="max-w-4xl max-h-full flex flex-col items-center" @click.stop>
|
||||
<img :src="previewCloud.imageUrl" alt="" class="max-w-full max-h-[75vh] rounded-lg object-contain" />
|
||||
<div class="mt-4 text-white text-center">
|
||||
<div class="flex items-center justify-center gap-2 mb-1">
|
||||
<span class="text-lg font-semibold">{{ previewCloud.cloudTypeName }}</span>
|
||||
<span class="text-xs px-2 py-0.5 rounded-full border" :style="{ color: rarityColors[previewCloud.rarity] || rarityColors.common, borderColor: rarityColors[previewCloud.rarity] || rarityColors.common }">{{ previewCloud.rarity === 'common' ? '常见' : previewCloud.rarity === 'uncommon' ? '少见' : '罕见' }}</span>
|
||||
</div>
|
||||
<div class="text-sm text-white/70">📷 {{ previewCloud.username }} · 🕐 {{ timeAgo(previewCloud.capturedAt) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user