From cf9e2a9803908f39bf95dbdfecad477be3c684df Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Thu, 16 Jul 2026 10:32:31 +0800
Subject: [PATCH] perf(monitor): synchronize map follow frames

---
 .../apps/web/src/v2/map/FleetMap.test.tsx                | 6 +++++-
 vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx   | 9 ++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx
index e4cfef24..c2ea58c4 100644
--- a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx
@@ -14,6 +14,7 @@ const markerSetMap = vi.fn();
 const markerSetPosition = vi.fn();
 const labelSetPosition = vi.fn();
 const setZoomAndCenter = vi.fn();
+const setCenter = vi.fn();
 const panTo = vi.fn();
 const mapOff = vi.fn();
 const mapDestroy = vi.fn();
@@ -45,6 +46,7 @@ class TestMap {
   getZoom = getZoom;
   getBounds = getBounds;
   setZoomAndCenter = setZoomAndCenter;
+  setCenter = setCenter;
   panTo = panTo;
 }
 
@@ -231,6 +233,7 @@ afterEach(() => {
   markerSetPosition.mockReset();
   labelSetPosition.mockReset();
   setZoomAndCenter.mockReset();
+  setCenter.mockReset();
   panTo.mockReset();
   mapOff.mockReset();
   mapDestroy.mockReset();
@@ -467,7 +470,8 @@ test('renders one selected plate and smoothly follows it until the map is dragge
     />
   );
   await waitFor(() => expect(markerSetPosition).toHaveBeenLastCalledWith(wgs84ToGcj02(113.27, 23.14)), { timeout: 1_800 });
-  expect(panTo).toHaveBeenLastCalledWith(wgs84ToGcj02(113.27, 23.14), 10_000);
+  expect(setCenter).toHaveBeenLastCalledWith(wgs84ToGcj02(113.27, 23.14));
+  expect(panTo).not.toHaveBeenCalled();
   expect(setZoomAndCenter).toHaveBeenCalledTimes(1);
 
   const follow = screen.getByRole('button', { name: '跟随车辆' });
diff --git a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx
index 74d9cd69..777977b0 100644
--- a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx
@@ -524,7 +524,10 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
         const label = labelMarkersRef.current.get(motion.point.id);
         label?.marker.setPosition?.(motion.point.lnglat);
         if (label) label.position = motion.point.lnglat;
-        if (selectedVinRef.current === motion.point.id) selectionRef.current?.setPosition?.(motion.point.lnglat);
+        if (selectedVinRef.current === motion.point.id) {
+          selectionRef.current?.setPosition?.(motion.point.lnglat);
+          if (followSelectedRef.current) mapRef.current?.setCenter?.(motion.point.lnglat);
+        }
       }
     };
     const schedule = () => {
@@ -653,8 +656,8 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
       if (currentZoom < 15) mapRef.current.setZoomAndCenter?.(15, mapPosition);
       else mapRef.current.panTo?.(mapPosition, MAP_INTERACTION_PAN_DURATION_MS);
       centeredVinRef.current = selectedVin;
-    } else if (selectionPositionRef.current && selectionPositionRef.current !== positionKey && followSelectedRef.current) {
-      mapRef.current.panTo?.(mapPosition, pointMoveDurationMs(target.reportIntervalMs));
+    } else if (selectionPositionRef.current && selectionPositionRef.current !== positionKey && followSelectedRef.current && !movingPointIDsRef.current.has(selectedVin)) {
+      mapRef.current.panTo?.(mapPosition, MAP_INTERACTION_PAN_DURATION_MS);
     }
     const previousPositionKey = selectionPositionRef.current;
     selectionPositionRef.current = positionKey;