feat(platform): add trajectory autoplay controls

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

@@ -247,6 +247,8 @@ export function History({
   const [locationPagination, setLocationPagination] = useState({ currentPage: 1, pageSize: 10 });
   const [rawPagination, setRawPagination] = useState({ currentPage: 1, pageSize: 10 });
   const [playbackIndex, setPlaybackIndex] = useState(0);
+  const [playbackPlaying, setPlaybackPlaying] = useState(false);
+  const [playbackSpeedMs, setPlaybackSpeedMs] = useState(1200);
 
   const buildParams = (nextFilters: HistoryFilters, limit: number, offset: number, raw: boolean) => {
     const params = new URLSearchParams({ limit: String(limit), offset: String(offset) });
@@ -278,6 +280,7 @@ export function History({
         setLocations(nextPage);
         setLocationPagination({ currentPage: page, pageSize });
         setPlaybackIndex(0);
+        setPlaybackPlaying(false);
       })
       .catch((error: Error) => Toast.error(error.message))
       .finally(() => setLoadingLocations(false));
@@ -361,6 +364,7 @@ export function History({
   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 playbackAtEnd = playbackRows.length > 0 && currentPlaybackIndex >= playbackRows.length - 1;
   const playbackPoints: VehicleMapPoint[] = validLocations.map((row, index) => ({
     id: `${row.vin}-${row.deviceTime || row.serverTime || index}`,
     label: row.plate || row.vin || `点 ${index + 1}`,
@@ -418,8 +422,33 @@ export function History({
     }
     window.open(url, '_blank', 'noopener,noreferrer');
   };
+  useEffect(() => {
+    if (!playbackPlaying || playbackRows.length <= 1) return undefined;
+    const timer = window.setInterval(() => {
+      setPlaybackIndex((current) => {
+        if (current >= playbackRows.length - 1) {
+          setPlaybackPlaying(false);
+          return current;
+        }
+        const next = current + 1;
+        if (next >= playbackRows.length - 1) setPlaybackPlaying(false);
+        return next;
+      });
+    }, playbackSpeedMs);
+    return () => window.clearInterval(timer);
+  }, [playbackPlaying, playbackRows.length, playbackSpeedMs]);
+  const togglePlayback = () => {
+    if (playbackPlaying) {
+      setPlaybackPlaying(false);
+      return;
+    }
+    if (playbackRows.length <= 1) return;
+    if (playbackAtEnd) setPlaybackIndex(0);
+    setPlaybackPlaying(true);
+  };
   const movePlayback = (delta: number) => {
     if (playbackRows.length === 0) return;
+    setPlaybackPlaying(false);
     setPlaybackIndex((current) => Math.min(Math.max(current + delta, 0), playbackRows.length - 1));
   };
   const openPlaybackVehicle = () => {
@@ -560,6 +589,27 @@ export function History({
                     <Tag color="green">{formatNumber(currentPlayback.speedKmh, ' km/h')}</Tag>
                     <Tag color="blue">{formatNumber(currentPlayback.totalMileageKm, ' km')}</Tag>
                   </Space>
+                  <Space wrap>
+                    <Button
+                      size="small"
+                      aria-label={playbackPlaying ? '暂停轨迹' : '播放轨迹'}
+                      disabled={playbackRows.length <= 1}
+                      onClick={togglePlayback}
+                    >
+                      {playbackPlaying ? '暂停' : playbackAtEnd ? '重播' : '播放'}
+                    </Button>
+                    <Typography.Text type="secondary" size="small">播放速度</Typography.Text>
+                    <Select
+                      size="small"
+                      value={String(playbackSpeedMs)}
+                      style={{ width: 108 }}
+                      onChange={(value) => setPlaybackSpeedMs(Number(value))}
+                    >
+                      <Select.Option value="1800">慢速</Select.Option>
+                      <Select.Option value="1200">标准</Select.Option>
+                      <Select.Option value="600">快速</Select.Option>
+                    </Select>
+                  </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>

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

@@ -5683,6 +5683,57 @@ test('controls trajectory playback current point from history locations', async
   });
 });
 
+test('auto plays trajectory playback points with selectable speed', async () => {
+  window.history.replaceState(null, '', '/#/history?keyword=VIN-TRACK-AUTO&protocol=JT808');
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/history/locations')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            items: [
+              { vin: 'VIN-TRACK-AUTO', 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-AUTO', 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-AUTO', 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;
+    }
+    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();
+  vi.useFakeTimers();
+  expect(screen.getByText('点 1 / 3')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: '播放轨迹' }));
+  expect(screen.getByRole('button', { name: '暂停轨迹' })).toBeInTheDocument();
+
+  await vi.advanceTimersByTimeAsync(1200);
+  expect(screen.getByText('点 2 / 3')).toBeInTheDocument();
+
+  await vi.advanceTimersByTimeAsync(2400);
+  expect(screen.getByText('点 3 / 3')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '播放轨迹' })).toBeInTheDocument();
+
+  vi.useRealTimers();
+});
+
 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');