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>}