style(map): refine layer and zoom controls

features/map/core/components/zoom.tsx

@@ -36,34 +36,49 @@ export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomPro
   return (
     <TooltipProvider delayDuration={180}>
       <div
+        role="group"
         aria-label="地图缩放"
         className={cn(
-          "pointer-events-auto flex w-[46px] flex-col p-[3px]",
-          MAP_CONTROL_RADIUS_CLASS_NAME,
-          MAP_CONTROL_SURFACE_CLASS_NAME,
+          "pointer-events-auto flex w-[46px] flex-col gap-2",
           className
         )}
       >
-        <ControlButton
-          icon={Plus}
-          label="放大"
-          disabled={!mapReady}
-          onClick={handleZoomIn}
-        />
-        <Divider />
-        <ControlButton
-          icon={Minus}
-          label="缩小"
-          disabled={!mapReady}
-          onClick={handleZoomOut}
-        />
-        <Divider />
-        <ControlButton
-          icon={Home}
-          label="缩放到全局"
-          disabled={!mapReady}
-          onClick={onHome}
-        />
+        <div
+          className={cn(
+            "flex flex-col p-[3px]",
+            MAP_CONTROL_RADIUS_CLASS_NAME,
+            MAP_CONTROL_SURFACE_CLASS_NAME
+          )}
+        >
+          <ControlButton
+            icon={Plus}
+            label="放大"
+            disabled={!mapReady}
+            onClick={handleZoomIn}
+          />
+          <Divider />
+          <ControlButton
+            icon={Minus}
+            label="缩小"
+            disabled={!mapReady}
+            onClick={handleZoomOut}
+          />
+        </div>
+
+        <div
+          className={cn(
+            "p-[3px]",
+            MAP_CONTROL_RADIUS_CLASS_NAME,
+            MAP_CONTROL_SURFACE_CLASS_NAME
+          )}
+        >
+          <ControlButton
+            icon={Home}
+            label="缩放到全局"
+            disabled={!mapReady}
+            onClick={onHome}
+          />
+        </div>
       </div>
     </TooltipProvider>
   );