完善弹窗功能

src/components/index/Maps.vue

@@ -1,12 +1,28 @@
 <script setup>
 import { defineAsyncComponent } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const emit = defineEmits(['show-modal'])
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '创建地图',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
+const handleDownload = () => {
+  emit('show-modal', {
+    title: '下载地图',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-maps"><i class="fa-solid fa-location-dot"></i> 创建地图</button>
-      <button class="header-button download-maps"><i class="fa-solid fa-download"></i> 地图下载</button>
+      <button class="header-button create-maps" @click="handleCreate"><i class="fa-solid fa-location-dot"></i> 创建地图</button>
+      <button class="header-button download-maps" @click="handleDownload"><i class="fa-solid fa-download"></i> 地图下载</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
@@ -15,10 +31,11 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-maps {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-maps:hover {
     background-color: #00a2e2;
@@ -29,6 +46,7 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   .download-maps {
     color: #fff;
     background-color: #f472b6;
+    transition: background-color 0.2s ease;
   }
   .download-maps:hover {
     background-color: #e267a7;