feat(platform): link realtime table map selection

vehicle-data-platform/apps/web/src/pages/Realtime.tsx

@@ -353,6 +353,7 @@ export function Realtime({
     .slice(0, 5);
   const defaultMapRow = mapServiceRows[0] ?? rows.find((row) => isValidCoordinate(row) && canOpenVehicle(row.vin));
   const selectedMapRow = rows.find((row, index) => realtimeMapPointId(row, index) === selectedMapPointId) ?? defaultMapRow;
+  const selectedMapPointKey = selectedMapRow ? realtimeMapPointId(selectedMapRow, rows.indexOf(selectedMapRow)) : selectedMapPointId;
   const mapPoints: VehicleMapPoint[] = rows.map((row, index) => ({
     id: realtimeMapPointId(row, index),
     label: row.plate || row.vin || 'unknown',
@@ -416,6 +417,14 @@ export function Realtime({
     amapConfigured,
     sourceIssueRows
   }), '实时摘要');
+  const selectRealtimeRow = (row: VehicleRealtimeRow) => {
+    const index = rows.indexOf(row);
+    if (index < 0) return;
+    setSelectedMapPointId(realtimeMapPointId(row, index));
+  };
+  const selectRealtimeMapPoint = (point: VehicleMapPoint) => {
+    setSelectedMapPointId(point.id);
+  };
 
   return (
     <div className="vp-page">
@@ -485,8 +494,8 @@ export function Realtime({
             <VehicleMap
               points={mapPoints}
               maxFallbackPoints={80}
-              selectedId={selectedMapRow ? realtimeMapPointId(selectedMapRow, rows.indexOf(selectedMapRow)) : selectedMapPointId}
+              selectedId={selectedMapPointKey}
-              onPointSelect={(point) => setSelectedMapPointId(point.id)}
+              onPointSelect={selectRealtimeMapPoint}
               fallbackLabel="高德地图未配置，显示实时坐标预览"
             />
           </div>
@@ -597,11 +606,11 @@ export function Realtime({
                       role="button"
                       tabIndex={0}
                       className={`vp-map-service-item vp-map-service-item-button ${selectedMapRow?.vin === row.vin ? 'vp-map-service-item-selected' : ''}`}
-                      onClick={() => setSelectedMapPointId(realtimeMapPointId(row, rows.indexOf(row)))}
+                      onClick={() => selectRealtimeRow(row)}
                       onKeyDown={(event) => {
                         if (event.key === 'Enter' || event.key === ' ') {
                           event.preventDefault();
-                          setSelectedMapPointId(realtimeMapPointId(row, rows.indexOf(row)));
+                          selectRealtimeRow(row);
                         }
                       }}
                     >
@@ -722,6 +731,7 @@ export function Realtime({
                     width: 190,
                     render: (_: unknown, row: VehicleRealtimeRow) => (
                       <Space spacing={4} wrap>
+                        <Button disabled={!isValidCoordinate(row)} onClick={() => selectRealtimeRow(row)}>地图定位</Button>
                         <Button disabled={!canOpenVehicle(row.vin)} onClick={() => onOpenVehicle(row.vin, filters.protocol || row.primaryProtocol)}>车辆服务</Button>
                         <Button disabled={!canOpenVehicle(row.vin) || !onOpenQuality} onClick={() => openQualityEvidence(row)}>质量问题</Button>
                       </Space>
@@ -732,7 +742,13 @@ export function Realtime({
             )}
           </Tabs.TabPane>
           <Tabs.TabPane tab="地图视图" itemKey="map">
-            <VehicleMap points={mapPoints} heightClassName="" fallbackLabel="高德地图未配置，显示实时坐标预览" />
+            <VehicleMap
+              points={mapPoints}
+              heightClassName=""
+              selectedId={selectedMapPointKey}
+              onPointSelect={selectRealtimeMapPoint}
+              fallbackLabel="高德地图未配置，显示实时坐标预览"
+            />
           </Tabs.TabPane>
         </Tabs>
       </Card>

vehicle-data-platform/apps/web/src/test/App.test.tsx

@@ -8329,6 +8329,12 @@ test('selects realtime map vehicle from fallback map point', async () => {
     expect(within(selectedPanel as HTMLElement).getByText('粤A选中2')).toBeInTheDocument();
   });
   expect(within(selectedPanel as HTMLElement).getByText('42 km/h')).toBeInTheDocument();
+
+  const locateButtons = screen.getAllByRole('button', { name: '地图定位' });
+  fireEvent.click(locateButtons[0]);
+  expect(within(selectedPanel as HTMLElement).getByText('粤A选中1')).toBeInTheDocument();
+  fireEvent.click(locateButtons[1]);
+  expect(within(selectedPanel as HTMLElement).getByText('粤A选中2')).toBeInTheDocument();
 });
 
 test('opens vehicle service from realtime map service queue', async () => {