修改

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-group" v-for="item in controllers" :key="item.key">
-      <div class="map-controller-item" 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>
+      </a-tooltip>
     </div>
   </div>
 </template>
@@ -18,25 +18,35 @@ const uiStore = useUiStore();
 const drawerOpen = ref(uiStore.drawerOpen);
 
 // 监听 store 中的 drawerOpen 变化
-watch(() => uiStore.drawerOpen, (newVal) => {
+watch(
+  () => uiStore.drawerOpen,
+  (newVal) => {
     drawerOpen.value = newVal;
-});
+  }
+);
 
 const isFullScreen = ref(false);
 const mapType = ref("2D");
 
 // 响应式的控制器配置
 const controllers = ref([
+  {
+    children: [
       {
         name: "全屏",
         key: "fullScreen",
         icon: isFullScreen.value ? "exitFullScreen" : "fullScreen",
       },
+    ],
+  },
+
   {
     name: "定位",
     key: "positioning",
     icon: "iconGlobal",
   },
+  {
+    children: [
       {
         name: "放大",
         key: "zoomIn",
@@ -47,6 +57,8 @@ const controllers = ref([
         key: "zoomOut",
         icon: "zoomOut",
       },
+    ],
+  },
   {
     name: "3D",
     key: "dim",
@@ -78,7 +90,6 @@ const controllers = ref([
     icon: "roaming",
   },
 ]);
-
 </script>
 
 <style lang="scss" scoped>