style(map): refine layer and zoom controls

features/map/core/components/layer-panel.tsx

@@ -46,7 +46,7 @@ function LayerVisibilitySection({ items, onToggleLayer }: LayerVisibilitySection
   return (
     <div>
       <div className="mb-1.5 px-1 text-xs font-semibold text-slate-500">业务图层</div>
-      <div className="space-y-1.5">
+      <div className="grid grid-cols-3 gap-2">
         {items.map((item) => {
           const Icon = item.visible ? Eye : EyeOff;
           const disabled = item.disabled || item.locked;
@@ -57,33 +57,28 @@ function LayerVisibilitySection({ items, onToggleLayer }: LayerVisibilitySection
               type="button"
               disabled={disabled}
               aria-pressed={item.visible}
+              aria-label={`${item.label}${item.description ? `，${item.description}` : ""}`}
+              title={item.description}
               onClick={() => onToggleLayer(item.id, !item.visible)}
               className={cn(
-                "flex min-h-12 w-full items-center gap-3 border px-2.5 text-left text-sm transition duration-150",
+                "relative flex min-h-[76px] w-full flex-col items-center justify-center gap-1.5 border px-1.5 py-2 text-center transition duration-150 active:translate-y-px active:scale-[0.98]",
                 MAP_COMPACT_RADIUS_CLASS_NAME,
                 item.visible
-                  ? "border-blue-100 bg-white/95 text-slate-900"
-                  : "border-white/70 bg-white/95 text-slate-500 hover:border-slate-200 hover:bg-white",
+                  ? "border-blue-200 bg-blue-50/90 text-blue-950 shadow-sm shadow-blue-950/5"
+                  : "border-white/70 bg-white/90 text-slate-500 hover:border-slate-200 hover:bg-white",
                 disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
               )}
             >
               <span
                 className={cn(
-                  "grid h-8 w-8 shrink-0 place-items-center",
+                  "grid h-8 w-8 shrink-0 place-items-center transition-colors",
                   MAP_ICON_CELL_RADIUS_CLASS_NAME,
                   item.visible ? "bg-blue-600 text-white" : "bg-slate-100 text-slate-400"
                 )}
               >
                 {item.locked ? <Lock size={15} aria-hidden="true" /> : <Icon size={15} aria-hidden="true" />}
               </span>
-              <span className="min-w-0 flex-1">
-                <span className="block truncate font-semibold">{item.label}</span>
-                {item.description ? <span className="block truncate text-xs text-slate-500">{item.description}</span> : null}
-              </span>
-              <span
-                className={cn("h-2.5 w-2.5 rounded-full", item.visible ? "bg-blue-600" : "bg-slate-300")}
-                aria-hidden="true"
-              />
+              <span className="block w-full truncate text-xs font-semibold leading-tight">{item.label}</span>
             </button>
           );
         })}

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>
   );