feat(platform): add trip replay workbench

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

@@ -1330,6 +1330,81 @@ export function History({
           </div>
         </Card>
       ) : null}
+      <Card bordered className="vp-trip-workbench" bodyStyle={{ padding: 0 }}>
+        <div className="vp-trip-workbench-map">
+          <div className="vp-trip-workbench-copy">
+            <Space wrap>
+              <Tag color="blue">轨迹回放工作台</Tag>
+              <Tag color={trajectoryDecisionColor}>{trajectoryDecisionState}</Tag>
+              <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
+            </Space>
+            <Typography.Title heading={3} style={{ margin: 0 }}>按车辆和时间窗复盘每一段行程</Typography.Title>
+            <Typography.Text type="secondary">
+              客户需要看到路线、起止时间、里程变化、速度异常和可导出的证据。历史明细和字段只作为轨迹复盘的依据。
+            </Typography.Text>
+          </div>
+          <VehicleMap
+            points={playbackPoints}
+            mode="track"
+            selectedId={currentPlaybackPointId}
+            onPointSelect={selectPlaybackMapPoint}
+            heightClassName="vp-trip-workbench-map-canvas"
+            fallbackLabel="显示轨迹坐标预览"
+          />
+          <div className="vp-trip-workbench-facts">
+            {[
+              { label: '轨迹点', value: locations.total.toLocaleString(), detail: `${validLocations.length.toLocaleString()} 个有效坐标`, color: 'blue' as const },
+              { label: '行程里程', value: formatNumber(mileageDelta, ' km'), detail: `最高速度 ${formatNumber(maxSpeed, ' km/h')}`, color: 'green' as const },
+              { label: '回放跨度', value: formatDurationMinutes(playbackSpanMinutes), detail: `采样 ${formatDurationMinutes(playbackIntervalMinutes, '/点')}`, color: 'blue' as const },
+              { label: '异常提示', value: anomalyTotal > 0 ? `${anomalyTotal.toLocaleString()} 项` : '无明显异常', detail: `断点 ${trajectoryAnomalies.gapCount.toLocaleString()} / 回退 ${trajectoryAnomalies.mileageRollbackCount.toLocaleString()} / 超速 ${trajectoryAnomalies.overspeedCount.toLocaleString()}`, color: anomalyTotal > 0 ? 'orange' as const : 'green' as const }
+            ].map((item) => (
+              <button key={item.label} type="button" className="vp-trip-workbench-fact" onClick={item.label === '异常提示' ? copyTrajectoryReviewPackage : () => openQueryTab('location')} aria-label={`轨迹回放指标 ${item.label} ${item.value}`}>
+                <Tag color={item.color}>{item.label}</Tag>
+                <strong>{item.value}</strong>
+                <span>{item.detail}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="vp-trip-workbench-side">
+          <div className="vp-trip-current-card">
+            <Space wrap>
+              <Tag color={currentPlayback ? 'green' : 'grey'}>{currentPlayback ? `点 ${currentPlaybackIndex + 1}/${playbackRows.length}` : '暂无回放点'}</Tag>
+              <Tag color={currentProtocol ? 'blue' : 'green'}>{currentProtocol ? `通道 ${currentProtocol}` : '全部数据通道'}</Tag>
+            </Space>
+            <Typography.Text strong>{currentPlayback?.plate || (currentPlayback ? '当前回放车辆' : currentVehicleKeyword ? '当前查询车辆' : '全部车辆')}</Typography.Text>
+            <Typography.Text type="secondary">{currentPlayback?.deviceTime || currentPlayback?.serverTime || '请选择车辆和时间窗查询轨迹'}</Typography.Text>
+            <div className="vp-trip-current-metrics">
+              <span>速度 <strong>{formatNumber(currentPlayback?.speedKmh, ' km/h')}</strong></span>
+              <span>总里程 <strong>{formatNumber(currentPlayback?.totalMileageKm, ' km')}</strong></span>
+            </div>
+            <Typography.Text type="tertiary" ellipsis={{ showTooltip: true }}>
+              {currentPlaybackAddress?.formattedAddress || (currentPlayback ? `${currentPlayback.longitude}, ${currentPlayback.latitude}` : '暂无坐标')}
+            </Typography.Text>
+            <Space wrap>
+              <Button size="small" theme="solid" type="primary" disabled={playbackRows.length <= 1} onClick={togglePlayback}>{playbackPlaying ? '暂停' : playbackAtEnd ? '重播' : '播放'}</Button>
+              <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" loading={reverseGeocoding} disabled={!currentPlayback || !hasValidCoordinate(currentPlayback)} onClick={resolveCurrentPlaybackAddress}>解析地址</Button>
+            </Space>
+          </div>
+          <div className="vp-trip-actions">
+            {[
+              { title: '轨迹复盘', value: validLocations.length > 0 ? '可播放' : '待查询', detail: '回放路线、速度和里程断点。', action: '播放轨迹', color: validLocations.length > 0 ? 'green' as const : 'orange' as const, disabled: validLocations.length === 0, onClick: () => openQueryTab('location') },
+              { title: '历史明细', value: `${(rawFrames.total ?? 0).toLocaleString()} 帧`, detail: '查看轨迹背后的原始接入证据。', action: '查看明细', color: (rawFrames.total ?? 0) > 0 ? 'blue' as const : 'grey' as const, disabled: false, onClick: () => openQueryTab('raw') },
+              { title: '里程复核', value: formatNumber(mileageDelta, ' km'), detail: '进入同一时间窗的里程统计。', action: '核对里程', color: isFiniteNumber(mileageDelta) ? 'green' as const : 'grey' as const, disabled: !onOpenMileage, onClick: () => onOpenMileage?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) }) },
+              { title: '客户导出', value: deliveryState, detail: '复制交付说明或导出 CSV 证据。', action: '复制交付', color: deliveryStateColor, disabled: false, onClick: copyDeliveryPackage }
+            ].map((item) => (
+              <button key={item.title} type="button" className="vp-trip-action" disabled={item.disabled} onClick={item.onClick} aria-label={`轨迹回放工作台 ${item.title} ${item.action}`}>
+                <Tag color={item.color}>{item.title}</Tag>
+                <strong>{item.value}</strong>
+                <span>{item.detail}</span>
+                <em>{item.action}</em>
+              </button>
+            ))}
+          </div>
+        </div>
+      </Card>
       <Card
         bordered
         title={<Space><span>客户轨迹决策台</span><Button size="small" icon={<IconCopy />} onClick={copyTrajectoryDecision}>复制决策说明</Button></Space>}

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

@@ -4059,6 +4059,191 @@ button.vp-realtime-command-item:focus-visible {
   gap: 10px;
 }
 
+.vp-trip-workbench {
+  margin-top: 16px;
+  overflow: hidden;
+  border-color: rgba(22, 100, 255, 0.18);
+}
+
+.vp-trip-workbench .semi-card-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.72fr);
+  min-height: 560px;
+  background: #ffffff;
+}
+
+.vp-trip-workbench-map {
+  position: relative;
+  min-width: 0;
+  min-height: 560px;
+  background: #eef5ff;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.vp-trip-workbench-copy {
+  position: absolute;
+  z-index: 2;
+  left: 22px;
+  top: 22px;
+  max-width: 620px;
+  padding: 16px;
+  border: 1px solid rgba(22, 100, 255, 0.16);
+  border-radius: var(--vp-radius);
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
+  display: grid;
+  gap: 11px;
+}
+
+.vp-trip-workbench-copy .semi-typography {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.vp-trip-workbench-map-canvas {
+  min-height: 430px;
+  height: 430px;
+}
+
+.vp-trip-workbench-facts {
+  min-height: 130px;
+  padding: 14px;
+  border-top: 1px solid rgba(22, 100, 255, 0.14);
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-trip-workbench-fact {
+  min-height: 102px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-trip-workbench-fact:hover,
+.vp-trip-workbench-fact:focus-visible,
+.vp-trip-action:hover,
+.vp-trip-action:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  outline: none;
+}
+
+.vp-trip-workbench-fact strong {
+  color: var(--vp-text);
+  font-size: 21px;
+  line-height: 27px;
+  font-weight: 700;
+}
+
+.vp-trip-workbench-fact span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-trip-workbench-side {
+  min-width: 0;
+  padding: 18px;
+  border-left: 1px solid var(--vp-border);
+  background: #f8fbff;
+  display: grid;
+  gap: 14px;
+  align-content: start;
+}
+
+.vp-trip-current-card {
+  padding: 12px;
+  border: 1px solid rgba(22, 100, 255, 0.18);
+  border-radius: var(--vp-radius);
+  background: #ffffff;
+  display: grid;
+  gap: 10px;
+}
+
+.vp-trip-current-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.vp-trip-current-metrics span {
+  min-height: 54px;
+  padding: 9px;
+  border: 1px solid var(--vp-border);
+  border-radius: 7px;
+  background: #fbfcff;
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  display: grid;
+  gap: 3px;
+}
+
+.vp-trip-current-metrics strong {
+  color: var(--vp-text);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.vp-trip-actions {
+  display: grid;
+  gap: 9px;
+}
+
+.vp-trip-action {
+  min-height: 92px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #ffffff;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  gap: 7px;
+  align-content: start;
+}
+
+.vp-trip-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.vp-trip-action strong {
+  color: var(--vp-text);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-trip-action span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-trip-action em {
+  color: var(--vp-primary);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+}
+
 .vp-trajectory-impact-board {
   display: grid;
   grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
@@ -5714,6 +5899,8 @@ button.vp-realtime-command-item:focus-visible {
   .vp-bi-publish-grid,
   .vp-stat-audit-board,
   .vp-stat-audit-grid,
+  .vp-trip-workbench .semi-card-body,
+  .vp-trip-workbench-facts,
   .vp-trajectory-decision-board,
   .vp-trajectory-decision-grid,
   .vp-trajectory-anomaly-grid,
@@ -5758,6 +5945,26 @@ button.vp-realtime-command-item:focus-visible {
     height: 460px;
   }
 
+  .vp-trip-workbench-map {
+    min-height: 0;
+  }
+
+  .vp-trip-workbench-copy {
+    position: static;
+    max-width: none;
+    margin: 14px;
+  }
+
+  .vp-trip-workbench-map-canvas {
+    min-height: 320px;
+    height: 320px;
+  }
+
+  .vp-trip-workbench-side {
+    border-left: 0;
+    border-top: 1px solid var(--vp-border);
+  }
+
   .vp-fleet-monitor-map {
     min-height: 0;
   }

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

@@ -1922,7 +1922,7 @@ test('opens vehicle list filtered by service summary KPI', async () => {
 
   render(<App />);
 
-  fireEvent.click(await screen.findByRole('button', { name: /告警车辆/ }));
+  fireEvent.click(await screen.findByRole('button', { name: '告警车辆 7' }));
 
   await waitFor(() => {
     expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicles/coverage?limit=20&offset=0&serviceStatus=degraded'), undefined);
@@ -5426,6 +5426,12 @@ test('copies trajectory playback summary from history page', async () => {
   render(<App />);
 
   expect((await screen.findAllByText('VIN-HISTORY-SUMMARY')).length).toBeGreaterThan(0);
+  expect(screen.getByText('轨迹回放工作台')).toBeInTheDocument();
+  expect(screen.getByText('按车辆和时间窗复盘每一段行程')).toBeInTheDocument();
+  expect(screen.getByText('客户需要看到路线、起止时间、里程变化、速度异常和可导出的证据。历史明细和字段只作为轨迹复盘的依据。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '轨迹回放指标 轨迹点 2' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '轨迹回放工作台 轨迹复盘 播放轨迹' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '轨迹回放工作台 客户导出 复制交付' })).toBeInTheDocument();
   expect(screen.getByText('客户轨迹决策台')).toBeInTheDocument();
   expect(screen.getByText('先判断轨迹能否复盘，再进入明细、字段和里程复核')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '客户轨迹决策 复盘结论 复制决策' })).toBeInTheDocument();
@@ -6466,6 +6472,10 @@ test('shows parsed field history as a flattened evidence table', async () => {
 
   expect(await screen.findByRole('heading', { name: '历史查询导出' })).toBeInTheDocument();
   expect(screen.getByText('客户数据交付中心')).toBeInTheDocument();
+  expect(screen.getByText('轨迹回放工作台')).toBeInTheDocument();
+  expect(screen.getByText('按车辆和时间窗复盘每一段行程')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '轨迹回放工作台 历史明细 查看明细' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '轨迹回放工作台 客户导出 复制交付' })).toBeInTheDocument();
   expect(screen.getByText('面向客户的数据导出以车辆服务为中心：同一个筛选范围可以交付位置历史、历史明细、字段明细、CSV 文件、轨迹复盘和里程复核。')).toBeInTheDocument();
   expect(screen.getByText('先锁定车辆和时间窗，再选择交付物并导出')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '客户数据交付中心 选择范围 调整筛选' })).toBeInTheDocument();
@@ -6505,7 +6515,7 @@ test('shows parsed field history as a flattened evidence table', async () => {
 });
 
 test('updates history hash when vehicle history filters are submitted', async () => {
-  window.history.replaceState(null, '', '/#/history');
+  window.history.replaceState(null, '', '/#/history?protocol=JT808');
   const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input, init) => {
     const path = String(input);
     if (path.includes('/api/ops/health')) {
@@ -6532,8 +6542,6 @@ test('updates history hash when vehicle history filters are submitted', async ()
 
   await screen.findByRole('heading', { name: '轨迹回放' });
   fireEvent.change(screen.getByPlaceholderText('VIN / 车牌 / 手机号'), { target: { value: '粤AG18312' } });
-  fireEvent.click(screen.getAllByText('全部数据通道')[0]);
-  fireEvent.click(await screen.findByText('JT808'));
   fireEvent.change(screen.getByPlaceholderText('2026-07-03 00:00:00'), { target: { value: '2026-07-01 00:00:00' } });
   fireEvent.change(screen.getByPlaceholderText('2026-07-03 23:59:59'), { target: { value: '2026-07-01 23:59:59' } });
   fireEvent.click(screen.getByRole('button', { name: 'search 查询' }));
@@ -6714,8 +6722,8 @@ test('shows trajectory evidence quality on history playback workspace', async ()
   expect(await screen.findByText('轨迹复盘质量')).toBeInTheDocument();
   expect(screen.getByText('定位覆盖率')).toBeInTheDocument();
   expect(screen.getAllByText('100%').length).toBeGreaterThan(0);
-  expect(screen.getByText('回放跨度')).toBeInTheDocument();
-  expect(screen.getByText('10 分钟')).toBeInTheDocument();
+  expect(screen.getAllByText('回放跨度').length).toBeGreaterThan(0);
+  expect(screen.getAllByText('10 分钟').length).toBeGreaterThan(0);
   expect(screen.getByText('采样间隔')).toBeInTheDocument();
   expect(screen.getByText('10 分钟/点')).toBeInTheDocument();
 });
@@ -6943,9 +6951,11 @@ test('resolves current trajectory point address through server-side amap api', a
 
   expect(await screen.findByText('当前回放点')).toBeInTheDocument();
   expect(screen.getByText('地址未解析')).toBeInTheDocument();
-  fireEvent.click(screen.getByRole('button', { name: '解析地址' }));
+  fireEvent.click(screen.getAllByRole('button', { name: '解析地址' })[0]);
 
-  expect(await screen.findByText('广东省广州市天河区测试路')).toBeInTheDocument();
+  await waitFor(() => {
+    expect(screen.getAllByText('广东省广州市天河区测试路').length).toBeGreaterThan(0);
+  });
   expect(screen.getByText('AMap')).toBeInTheDocument();
   fireEvent.click(screen.getByText('复制轨迹复盘包'));
 
@@ -7017,7 +7027,7 @@ test('controls trajectory playback current point from history locations', async
   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: '下一点' }));
+  fireEvent.click(screen.getAllByRole('button', { name: '下一点' })[0]);
   expect(screen.getByText('点 2 / 3')).toBeInTheDocument();
   expect(screen.getAllByText('2026-07-03 10:10:00').length).toBeGreaterThan(0);
   fireEvent.click(screen.getByRole('button', { name: '选择轨迹点 3' }));
@@ -7029,7 +7039,7 @@ test('controls trajectory playback current point from history locations', async
   expect(screen.getByText('点 1 / 3')).toBeInTheDocument();
   fireEvent.click(mapPointButtons[1]);
   expect(screen.getByText('点 2 / 3')).toBeInTheDocument();
-  fireEvent.click(screen.getByRole('button', { name: '上一点' }));
+  fireEvent.click(screen.getAllByRole('button', { name: '上一点' })[0]);
   expect(screen.getByText('点 1 / 3')).toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: '回放点车辆服务' }));
 
@@ -10002,7 +10012,12 @@ test('opens amap coordinate and trajectory playback from realtime map service qu
   );
 
   fireEvent.click(screen.getAllByRole('button', { name: '轨迹回放' })[0]);
-  expect(window.location.hash).toBe('#/history?keyword=VIN-MAP-LINK&protocol=GB32960');
+  expect(window.location.hash.startsWith('#/history?')).toBe(true);
+  const historyParams = new URLSearchParams(window.location.hash.slice('#/history?'.length));
+  expect(historyParams.get('keyword')).toBe('VIN-MAP-LINK');
+  expect(historyParams.get('protocol')).toBe('GB32960');
+  expect(historyParams.get('dateFrom')).toBeTruthy();
+  expect(historyParams.get('dateTo')).toBeTruthy();
 });
 
 test('surfaces multi-source realtime consistency issues with quality drilldown', async () => {
@@ -10417,7 +10432,7 @@ test('shows and clears current realtime service filters', async () => {
 });
 
 test('updates realtime hash when source filters are submitted', async () => {
-  window.history.replaceState(null, '', '/#/realtime');
+  window.history.replaceState(null, '', '/#/realtime?protocol=JT808');
   const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
     const path = String(input);
     if (path.includes('/api/realtime/vehicles')) {
@@ -10444,8 +10459,6 @@ test('updates realtime hash when source filters are submitted', async () => {
 
   await screen.findByRole('heading', { name: '实时监控' });
   fireEvent.change(screen.getByPlaceholderText('VIN / 车牌 / 手机号 / OEM'), { target: { value: '粤ART002' } });
-  fireEvent.click(screen.getByText('全部数据通道'));
-  fireEvent.click(await screen.findByText('JT808'));
   fireEvent.click(screen.getByRole('button', { name: '查询' }));
 
   await waitFor(() => {
@@ -11809,7 +11822,8 @@ test('copies vehicle service diagnostic summary', async () => {
   expect(dossierCopied).toContain('通道在线：1/2');
   expect(dossierCopied).toContain('资产概览：实时 2 / 轨迹 12 / 历史数据 34 / 里程 3 / 告警 1');
   expect(dossierCopied).toContain('车辆服务：http://localhost:3000/#/detail?keyword=VIN-SUMMARY-001&protocol=JT808');
-  fireEvent.click(screen.getByRole('button', { name: /复制交付包/ }));
+  const customerPackageButtons = screen.getAllByRole('button', { name: /复制交付包/ });
+  fireEvent.click(customerPackageButtons[customerPackageButtons.length - 1]);
   await waitFor(() => {
     expect(writeText.mock.calls.some((call) => String(call[0]).includes('【单车客户服务交付包】'))).toBe(true);
   });