feat: densify mobile monitor workspace

vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.tsx

@@ -204,6 +204,7 @@ const MemoFleetMap = memo(FleetMap);
 
 export default function MonitorPage() {
   const [routeParams, setRouteParams] = useSearchParams();
+  const pageRef = useRef<HTMLDivElement>(null);
   const initialContextRef = useRef(parseMonitorRouteContext(routeParams));
   const initialContext = initialContextRef.current;
   const mobileLayout = useMobileLayout(760);
@@ -280,11 +281,16 @@ export default function MonitorPage() {
   const selected = selectedVin
     ? rows.find((vehicle) => vehicle.vin === selectedVin) ?? selectedVehicle.data?.items[0]
     : undefined;
+  const resetMonitorScroll = useCallback(() => {
+    const scrollOwner = pageRef.current?.closest<HTMLElement>('.v2-content');
+    if (scrollOwner) scrollOwner.scrollTop = 0;
+  }, []);
   const selectVehicle = useCallback((vin: string) => {
+    resetMonitorScroll();
     setSelectedVin(vin);
     setDetailOpen(true);
     setMode('map');
-  }, []);
+  }, [resetMonitorScroll]);
   const clearSelection = useCallback(() => {
     setSelectedVin('');
     setDetailOpen(false);
@@ -293,9 +299,10 @@ export default function MonitorPage() {
   const collapseDetail = useCallback(() => setDetailOpen(false), []);
   const expandDetail = useCallback(() => setDetailOpen(true), []);
   const changeMonitorMode = useCallback((nextMode: 'map' | 'list') => {
+    resetMonitorScroll();
     setMode(nextMode);
     if (nextMode === 'list') setDetailOpen(false);
-  }, []);
+  }, [resetMonitorScroll]);
   const clearFilters = useCallback(() => {
     setKeyword('');
     setProtocol('');
@@ -314,7 +321,7 @@ export default function MonitorPage() {
   const lastSyncAt = vehicles.dataUpdatedAt ? new Date(vehicles.dataUpdatedAt) : undefined;
 
   return (
-    <div className="v2-monitor-page">
+    <div ref={pageRef} className={`v2-monitor-page is-${mode}-mode`}>
       <Card className="v2-filterbar" bodyStyle={{ padding: 0 }} aria-label="车辆筛选">
         <div id="monitor-filter-fields" className={`v2-monitor-filter-fields${filtersCollapsed ? ' is-mobile-collapsed' : ''}`} aria-label="筛选条件">
           <div className={`v2-search-field${searchTerms.length > 1 ? ' is-batch' : ''}`}>