feat: adopt naive ui and refine shell interactions

src/views/map/MapView.vue

@@ -26,6 +26,7 @@ const statusText = ref('加载中...')
 
 const VISIBLE_WINDOW_MS = 2 * 60 * 60 * 1000
 const MIN_MARKER_OPACITY = 0.3
+const HIDE_HEADER_EVENT = 'opencloud:hide-header'
 
 let AMapLib: typeof AMap | null = null
 let mapInst: AMap.Map | null = null
@@ -135,6 +136,10 @@ function hideHoverCard() {
   hoverIW = null
 }
 
+function hideHeader() {
+  window.dispatchEvent(new CustomEvent(HIDE_HEADER_EVENT))
+}
+
 async function loadClouds(): Promise<CloudMarkerData[]> {
   const { data, error } = await supabase
     .from('clouds')
@@ -261,6 +266,9 @@ onMounted(async () => {
     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() })
+    mapInst.on('zoomstart', hideHeader)
+    mapInst.on('movestart', hideHeader)
+    mapInst.on('dragstart', hideHeader)
     await refresh()
     startMarkerDecayTimer()
   } catch (e) {
@@ -280,7 +288,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="relative h-[calc(100vh-4rem)]">
+  <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">