feat: extend supply workbench demo and map navigation

src/features/map/core/components/zoom.tsx

@@ -1,13 +1,13 @@
 import type { Map as MapLibreMap } from "maplibre-gl";
-import { Home, Minus, Plus, type LucideIcon } from "lucide-react";
-import { type RefObject, useCallback } from "react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "@/shared/ui/tooltip";
+import { Home, Minus, Navigation2, Plus, type LucideIcon } from "lucide-react";
+import { type ReactNode, type RefObject, useCallback, useEffect, useState } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shared/ui/tooltip";
 import { cn } from "@/shared/ui/cn";
+import {
+  CAMERA_MODE_ANGLE_TOLERANCE,
+  getCombinedCameraAction,
+  setThreeDimensionalNavigation
+} from "./camera-actions";
 import {
   MAP_CONTROL_HOVER_CLASS_NAME,
   MAP_CONTROL_RADIUS_CLASS_NAME,
@@ -19,10 +19,60 @@ type MapZoomProps = {
   mapRef: RefObject<MapLibreMap | null>;
   mapReady: boolean;
   onHome: () => void;
+  reducedMotion?: boolean;
   className?: string;
 };
 
-export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomProps) {
+export function MapZoom({
+  mapRef,
+  mapReady,
+  onHome,
+  reducedMotion = false,
+  className = ""
+}: MapZoomProps) {
+  const [orientation, setOrientation] = useState({ bearing: 0, pitch: 0 });
+  const is3d = orientation.pitch > CAMERA_MODE_ANGLE_TOLERANCE;
+  const cameraAction = getCombinedCameraAction(orientation.bearing, orientation.pitch);
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || !mapReady) return;
+    const syncOrientation = () => {
+      const nextOrientation = { bearing: map.getBearing(), pitch: map.getPitch() };
+      setOrientation(nextOrientation);
+      setThreeDimensionalNavigation(map, nextOrientation.pitch > CAMERA_MODE_ANGLE_TOLERANCE);
+    };
+    syncOrientation();
+    map.on("pitch", syncOrientation);
+    map.on("rotate", syncOrientation);
+    return () => {
+      map.off("pitch", syncOrientation);
+      map.off("rotate", syncOrientation);
+    };
+  }, [mapRef, mapReady]);
+
+  const handleCameraMode = useCallback(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const action = getCombinedCameraAction(map.getBearing(), map.getPitch());
+    const duration = reducedMotion ? 0 : 350;
+
+    if (action === "enter-3d") {
+      setThreeDimensionalNavigation(map, true);
+      map.easeTo({
+        pitch: window.matchMedia("(max-width: 639px)").matches ? 45 : 50,
+        duration
+      });
+      return;
+    }
+
+    if (action === "reset-north") {
+      map.easeTo({ bearing: 0, duration });
+      return;
+    }
+
+    setThreeDimensionalNavigation(map, false);
+    map.easeTo({ pitch: 0, bearing: 0, duration });
+  }, [mapRef, reducedMotion]);
   const handleZoomIn = useCallback(() => {
     mapRef.current?.zoomIn({ duration: 260 });
   }, [mapRef]);
@@ -36,10 +86,7 @@ export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomPro
       <div
         role="group"
         aria-label="地图缩放"
-        className={cn(
-          "pointer-events-auto flex w-12 flex-col gap-2",
-          className
-        )}
+        className={cn("pointer-events-auto flex w-12 flex-col gap-2", className)}
       >
         <div
           className={cn(
@@ -48,34 +95,33 @@ export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomPro
             MAP_CONTROL_SURFACE_CLASS_NAME
           )}
         >
-          <ControlButton
-            icon={Plus}
-            label="放大"
-            disabled={!mapReady}
-            onClick={handleZoomIn}
-          />
+          <ControlButton icon={Plus} label="放大" disabled={!mapReady} onClick={handleZoomIn} />
+          <Divider />
+          <ControlButton icon={Minus} label="缩小" disabled={!mapReady} onClick={handleZoomOut} />
           <Divider />
           <ControlButton
-            icon={Minus}
-            label="缩小"
+            content={
+              <CompassModeIndicator
+                bearing={orientation.bearing}
+                pitch={orientation.pitch}
+                mode={is3d ? "3D" : "2D"}
+              />
+            }
+            label={
+              cameraAction === "reset-north"
+                ? "恢复北向"
+                : cameraAction === "exit-3d"
+                  ? "切换到二维"
+                  : "切换到三维"
+            }
+            pressed={is3d}
             disabled={!mapReady}
-            onClick={handleZoomOut}
+            onClick={handleCameraMode}
           />
         </div>
 
-        <div
-          className={cn(
-            "p-1",
-            MAP_CONTROL_RADIUS_CLASS_NAME,
-            MAP_CONTROL_SURFACE_CLASS_NAME
-          )}
-        >
-          <ControlButton
-            icon={Home}
-            label="缩放到全局"
-            disabled={!mapReady}
-            onClick={onHome}
-          />
+        <div className={cn("p-1", MAP_CONTROL_RADIUS_CLASS_NAME, MAP_CONTROL_SURFACE_CLASS_NAME)}>
+          <ControlButton icon={Home} label="缩放到全局" disabled={!mapReady} onClick={onHome} />
         </div>
       </div>
     </TooltipProvider>
@@ -83,19 +129,29 @@ export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomPro
 }
 
 type ControlButtonProps = {
-  icon: LucideIcon;
+  icon?: LucideIcon;
+  content?: ReactNode;
+  pressed?: boolean;
   label: string;
   disabled: boolean;
   onClick: () => void;
 };
 
-function ControlButton({ icon: Icon, label, disabled, onClick }: ControlButtonProps) {
+function ControlButton({
+  icon: Icon,
+  content,
+  pressed,
+  label,
+  disabled,
+  onClick
+}: ControlButtonProps) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <button
           type="button"
           aria-label={label}
+          aria-pressed={pressed}
           disabled={disabled}
           onClick={onClick}
           className={cn(
@@ -103,11 +159,11 @@ function ControlButton({ icon: Icon, label, disabled, onClick }: ControlButtonPr
             MAP_ICON_CELL_RADIUS_CLASS_NAME,
             "bg-transparent text-slate-700",
             MAP_CONTROL_HOVER_CLASS_NAME,
-            disabled &&
-              "text-slate-400 opacity-45 hover:bg-transparent hover:text-slate-400"
+            pressed && "bg-blue-50 text-blue-700",
+            disabled && "text-slate-400 opacity-45 hover:bg-transparent hover:text-slate-400"
           )}
         >
-          <Icon size={18} strokeWidth={2.2} aria-hidden="true" />
+          {Icon ? <Icon size={18} strokeWidth={2.2} aria-hidden="true" /> : content}
         </button>
       </TooltipTrigger>
       <TooltipContent
@@ -121,11 +177,45 @@ function ControlButton({ icon: Icon, label, disabled, onClick }: ControlButtonPr
   );
 }
 
-function Divider() {
+function CompassModeIndicator({
+  bearing,
+  pitch,
+  mode
+}: {
+  bearing: number;
+  pitch: number;
+  mode: "2D" | "3D";
+}) {
   return (
-    <div
-      className="my-0.5 h-px w-3.5 self-center bg-slate-300/70"
+    <span
+      className="relative grid h-7 w-7 place-items-center"
+      style={{ perspective: "70px" }}
       aria-hidden="true"
-    />
+      data-map-compass="true"
+      data-bearing={bearing.toFixed(1)}
+      data-pitch={pitch.toFixed(1)}
+      data-map-mode={mode.toLowerCase()}
+    >
+      <Navigation2
+        size={17}
+        strokeWidth={2.2}
+        className="transition-transform duration-150 ease-out motion-reduce:transition-none"
+        style={{ transform: `rotateX(${Math.min(pitch, 60) * 0.65}deg) rotateZ(${-bearing}deg)` }}
+      />
+      <span
+        className={cn(
+          "absolute -bottom-0.5 -right-0.5 min-w-4 rounded-[4px] px-0.5 text-center text-[8px] font-bold leading-3 tracking-[-0.02em] shadow-xs ring-1",
+          mode === "3D"
+            ? "bg-blue-600 text-white ring-blue-700/30"
+            : "bg-white text-slate-600 ring-slate-300"
+        )}
+      >
+        {mode}
+      </span>
+    </span>
   );
 }
+
+function Divider() {
+  return <div className="my-0.5 h-px w-3.5 self-center bg-slate-300/70" aria-hidden="true" />;
+}