feat(platform): add trajectory playback controls

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

@@ -124,6 +124,7 @@ export function History({
   const [loadingRaw, setLoadingRaw] = useState(false);
   const [locationPagination, setLocationPagination] = useState({ currentPage: 1, pageSize: 10 });
   const [rawPagination, setRawPagination] = useState({ currentPage: 1, pageSize: 10 });
+  const [playbackIndex, setPlaybackIndex] = useState(0);
 
   const buildParams = (nextFilters: HistoryFilters, limit: number, offset: number, raw: boolean) => {
     const params = new URLSearchParams({ limit: String(limit), offset: String(offset) });
@@ -154,6 +155,7 @@ export function History({
       .then((nextPage) => {
         setLocations(nextPage);
         setLocationPagination({ currentPage: page, pageSize });
+        setPlaybackIndex(0);
       })
       .catch((error: Error) => Toast.error(error.message))
       .finally(() => setLoadingLocations(false));
@@ -223,6 +225,9 @@ export function History({
   const currentProtocol = filters.protocol?.trim() ?? '';
   const amapConfigured = isAMapConfigured();
   const selectedFieldCount = splitFields(filters.fields).length;
+  const playbackRows = validLocations.length > 0 ? validLocations : locationItems;
+  const currentPlaybackIndex = playbackRows.length === 0 ? -1 : Math.min(playbackIndex, playbackRows.length - 1);
+  const currentPlayback = currentPlaybackIndex >= 0 ? playbackRows[currentPlaybackIndex] : undefined;
   const playbackPoints: VehicleMapPoint[] = validLocations.map((row, index) => ({
     id: `${row.vin}-${row.deviceTime || row.serverTime || index}`,
     label: row.plate || row.vin || `点 ${index + 1}`,
@@ -258,6 +263,14 @@ export function History({
     downloadCsv(exportFileName('raw-frames', filters), buildCsv(rawExportColumns, rawFrames.items));
     Toast.success(`已导出 ${rawFrames.items.length} 条 RAW 帧`);
   };
+  const movePlayback = (delta: number) => {
+    if (playbackRows.length === 0) return;
+    setPlaybackIndex((current) => Math.min(Math.max(current + delta, 0), playbackRows.length - 1));
+  };
+  const openPlaybackVehicle = () => {
+    if (!currentPlayback || !canOpenVehicle(currentPlayback.vin)) return;
+    onOpenVehicle(currentPlayback.vin, currentPlayback.protocol);
+  };
 
   return (
     <div className="vp-page">
@@ -340,6 +353,30 @@ export function History({
                 <div className="vp-monitor-metric-value">{item.value}</div>
               </div>
             ))}
+            <div className="vp-playback-current">
+              <div className="vp-map-service-queue-title">当前回放点</div>
+              {currentPlayback ? (
+                <>
+                  <Space wrap>
+                    <Tag color="blue">点 {currentPlaybackIndex + 1} / {playbackRows.length}</Tag>
+                    <Tag color={currentPlayback.protocol ? 'blue' : 'grey'}>{currentPlayback.protocol || '-'}</Tag>
+                  </Space>
+                  <Typography.Text strong>{currentPlayback.plate || currentPlayback.vin}</Typography.Text>
+                  <Typography.Text type="tertiary" size="small">{currentPlayback.deviceTime || currentPlayback.serverTime || '-'}</Typography.Text>
+                  <Space wrap>
+                    <Tag color="green">{formatNumber(currentPlayback.speedKmh, ' km/h')}</Tag>
+                    <Tag color="blue">{formatNumber(currentPlayback.totalMileageKm, ' km')}</Tag>
+                  </Space>
+                  <Space wrap>
+                    <Button size="small" disabled={currentPlaybackIndex <= 0} onClick={() => movePlayback(-1)}>上一点</Button>
+                    <Button size="small" disabled={currentPlaybackIndex >= playbackRows.length - 1} onClick={() => movePlayback(1)}>下一点</Button>
+                    <Button size="small" disabled={!canOpenVehicle(currentPlayback.vin)} onClick={openPlaybackVehicle}>回放点车辆服务</Button>
+                  </Space>
+                </>
+              ) : (
+                <Typography.Text type="tertiary">暂无可回放位置点</Typography.Text>
+              )}
+            </div>
           </div>
         </div>
         <div className="vp-playback-timeline">

vehicle-data-platform/apps/web/src/styles/global.css

@@ -565,6 +565,15 @@ body {
   align-content: start;
 }
 
+.vp-playback-current {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fff;
+}
+
 .vp-playback-timeline {
   margin-top: 16px;
   display: grid;

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

@@ -3381,6 +3381,81 @@ test('shows trajectory playback workspace from history locations', async () => {
   expect(screen.getByText('终点')).toBeInTheDocument();
 });
 
+test('controls trajectory playback current point from history locations', async () => {
+  window.history.replaceState(null, '', '/#/history?keyword=VIN-TRACK-CONTROL&protocol=JT808');
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input, init) => {
+    const path = String(input);
+    if (path.includes('/api/history/locations')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            items: [
+              { vin: 'VIN-TRACK-CONTROL', plate: '粤A回放1', protocol: 'JT808', longitude: 113.2, latitude: 23.1, speedKmh: 10, socPercent: 0, totalMileageKm: 100, lastSeen: '2026-07-03 10:00:00', deviceTime: '2026-07-03 10:00:00', serverTime: '2026-07-03 10:00:01' },
+              { vin: 'VIN-TRACK-CONTROL', plate: '粤A回放1', protocol: 'JT808', longitude: 113.3, latitude: 23.2, speedKmh: 42, socPercent: 0, totalMileageKm: 112.4, lastSeen: '2026-07-03 10:10:00', deviceTime: '2026-07-03 10:10:00', serverTime: '2026-07-03 10:10:01' },
+              { vin: 'VIN-TRACK-CONTROL', plate: '粤A回放1', protocol: 'JT808', longitude: 113.4, latitude: 23.3, speedKmh: 28, socPercent: 0, totalMileageKm: 119.9, lastSeen: '2026-07-03 10:20:00', deviceTime: '2026-07-03 10:20:00', serverTime: '2026-07-03 10:20:01' }
+            ],
+            total: 3,
+            limit: 10,
+            offset: 0
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/history/raw-frames/query')) {
+      expect(init?.method).toBe('POST');
+    }
+    if (path.includes('/api/vehicle-service/overview')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            vin: 'VIN-TRACK-CONTROL',
+            plate: '粤A回放1',
+            sourceCount: 1,
+            onlineSourceCount: 1,
+            coverageStatus: 'healthy',
+            primaryProtocol: 'JT808',
+            lastSeen: '2026-07-03 10:20:00',
+            historyCount: 3,
+            rawCount: 0,
+            mileageCount: 1,
+            qualityIssueCount: 0
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 10, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByText('当前回放点')).toBeInTheDocument();
+  expect(screen.getByText('点 1 / 3')).toBeInTheDocument();
+  expect(screen.getAllByText('2026-07-03 10:00:00').length).toBeGreaterThan(0);
+  fireEvent.click(screen.getByRole('button', { name: '下一点' }));
+  expect(screen.getByText('点 2 / 3')).toBeInTheDocument();
+  expect(screen.getAllByText('2026-07-03 10:10:00').length).toBeGreaterThan(0);
+  fireEvent.click(screen.getByRole('button', { name: '上一点' }));
+  expect(screen.getByText('点 1 / 3')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: '回放点车辆服务' }));
+
+  await waitFor(() => {
+    expect(window.location.hash).toBe('#/detail?keyword=VIN-TRACK-CONTROL&protocol=JT808');
+  });
+});
+
 test('exports current history location page as csv', async () => {
   window.history.replaceState(null, '', '/#/history?keyword=VIN-EXPORT-LOC&protocol=JT808');
   const createObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:history-location');