修改

frontend/src/components/mapController/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="map-controller" :style="{ right: drawerOpen ? '480px' : '12px' }">
-    <div class="map-controller-group">
-      <div class="map-controller-item" v-for="item in controllers" :key="item.key">
-        <a-tooltip :title="item.name" placement="left">
+    <div class="map-controller-group" v-for="item in controllers" :key="item.key">
+      <a-tooltip :title="item.name" placement="left">
+        <div class="map-controller-item">
           <i class="icon iconfont" :class="'icon-' + item.icon"></i>
-        </a-tooltip>
-      </div>
+        </div>
+      </a-tooltip>
     </div>
   </div>
 </template>
@@ -18,9 +18,12 @@ const uiStore = useUiStore();
 const drawerOpen = ref(uiStore.drawerOpen);
 
 // 监听 store 中的 drawerOpen 变化
-watch(() => uiStore.drawerOpen, (newVal) => {
-  drawerOpen.value = newVal;
-});
+watch(
+  () => uiStore.drawerOpen,
+  (newVal) => {
+    drawerOpen.value = newVal;
+  }
+);
 
 const isFullScreen = ref(false);
 const mapType = ref("2D");
@@ -28,24 +31,33 @@ const mapType = ref("2D");
 // 响应式的控制器配置
 const controllers = ref([
   {
-    name: "全屏",
-    key: "fullScreen",
-    icon: isFullScreen.value ? "exitFullScreen" : "fullScreen",
+    children: [
+      {
+        name: "全屏",
+        key: "fullScreen",
+        icon: isFullScreen.value ? "exitFullScreen" : "fullScreen",
+      },
+    ],
   },
+
   {
     name: "定位",
     key: "positioning",
     icon: "iconGlobal",
   },
   {
-    name: "放大",
-    key: "zoomIn",
-    icon: "zoomIn",
-  },
-  {
-    name: "缩小",
-    key: "zoomOut",
-    icon: "zoomOut",
+    children: [
+      {
+        name: "放大",
+        key: "zoomIn",
+        icon: "zoomIn",
+      },
+      {
+        name: "缩小",
+        key: "zoomOut",
+        icon: "zoomOut",
+      },
+    ],
   },
   {
     name: "3D",
@@ -78,7 +90,6 @@ const controllers = ref([
     icon: "roaming",
   },
 ]);
-
 </script>
 
 <style lang="scss" scoped>