feat(platform): add realtime vehicle snapshot

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

@@ -1348,6 +1348,56 @@ export function Realtime({
       disabled: rows.length === 0
     }
   ];
+  const realtimeSingleVehicleItems = [
+    {
+      label: '车辆服务',
+      value: selectedMapRow?.plate || selectedMapRow?.vin || '未选车辆',
+      detail: selectedMapRow ? `${vehicleServiceStatus(selectedMapRow).label}，${sourceEvidenceText(selectedMapRow)}` : '先从地图或列表选择车辆。',
+      color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const,
+      action: '车辆档案',
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      label: '轨迹回放',
+      value: selectedMapRow ? dataFreshness(selectedMapRow).label : '待选车',
+      detail: selectedMapRow ? `${dataFreshness(selectedMapRow).detail}，回看位置、速度和里程断点。` : '选择车辆后进入轨迹回放。',
+      color: selectedMapRow ? dataFreshness(selectedMapRow).color : 'grey' as const,
+      action: '打开轨迹',
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      label: '统计查询',
+      value: selectedMapRow?.totalMileageKm != null ? `${selectedMapRow.totalMileageKm} km` : '无里程',
+      detail: '核对单车总里程、日里程和区间闭合。',
+      color: selectedMapRow?.totalMileageKm != null ? 'blue' as const : 'grey' as const,
+      action: '查里程',
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => {
+        if (!selectedMapRow) return;
+        window.location.hash = buildAppHash({ page: 'mileage', keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol });
+      }
+    },
+    {
+      label: '历史导出',
+      value: selectedVehicleProtocol || selectedMapRow?.primaryProtocol || '全部通道',
+      detail: '进入历史查询导出同一车辆的 RAW、位置和字段证据。',
+      color: selectedMapRow ? 'blue' as const : 'grey' as const,
+      action: '导出证据',
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: openSelectedVehicleRaw
+    },
+    {
+      label: '告警通知',
+      value: selectedMapRow ? vehicleServiceStatus(selectedMapRow).label : '待选车',
+      detail: selectedMapRow ? realtimeIssueLabels(selectedMapRow).join('；') : '选择车辆后查看断链、离线和定位异常。',
+      color: selectedMapRow && hasSourceIssue(selectedMapRow) ? 'orange' as const : selectedMapRow ? 'green' as const : 'grey' as const,
+      action: '查看告警',
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin) || !onOpenQuality,
+      onClick: () => selectedMapRow && onOpenQuality?.({ keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol })
+    }
+  ];
   const realtimeNextActions = [
     {
       level: degradedCount > 0 || staleCount > 0 ? '优先' : '巡检',
@@ -2073,6 +2123,36 @@ export function Realtime({
           ))}
         </div>
       </Card>
+      <section className="vp-realtime-single-snapshot" aria-label="实时单车服务快照">
+        <div className="vp-realtime-single-summary">
+          <Space wrap>
+            <Tag color="blue">实时单车服务快照</Tag>
+            <Tag color={selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey'}>{selectedMapRow ? vehicleServiceStatus(selectedMapRow).label : '未选车辆'}</Tag>
+            <Tag color={selectedMapRow ? dataFreshness(selectedMapRow).color : 'grey'}>{selectedMapRow ? dataFreshness(selectedMapRow).label : '等待数据'}</Tag>
+          </Space>
+          <Typography.Title heading={5} style={{ margin: 0 }}>客户打开实时监控时，直接围绕选中车辆查看在线、位置、里程、新鲜度，并进入轨迹、统计、历史导出和告警通知。</Typography.Title>
+          <Typography.Text type="secondary">
+            {selectedMapRow ? `${selectedMapRow.plate || selectedMapRow.vin} / ${selectedVehicleProtocol || selectedMapRow.primaryProtocol || '全部通道'} / ${selectedMapRow.lastSeen || '无最后时间'}` : '从地图或实时列表选择一辆车后，快照会自动聚焦到单车服务。'}
+          </Typography.Text>
+        </div>
+        <div className="vp-realtime-single-grid">
+          {realtimeSingleVehicleItems.map((item) => (
+            <button
+              key={item.label}
+              type="button"
+              className="vp-realtime-single-item"
+              disabled={item.disabled}
+              onClick={item.onClick}
+              aria-label={`实时单车服务快照 ${item.label} ${item.value} ${item.action}`}
+            >
+              <Tag color={item.color}>{item.label}</Tag>
+              <strong>{item.value}</strong>
+              <span>{item.detail}</span>
+              <em>{item.action}</em>
+            </button>
+          ))}
+        </div>
+      </section>
       {timeWindowMonitorBlock}
       <Card bordered>
         <Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => {

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

@@ -2324,6 +2324,82 @@ body {
   align-self: end;
 }
 
+.vp-realtime-single-snapshot {
+  margin-bottom: 16px;
+  border: 1px solid rgba(22, 100, 255, 0.16);
+  border-radius: var(--vp-radius);
+  background: #fff;
+  display: grid;
+  grid-template-columns: minmax(280px, 0.56fr) minmax(0, 1.44fr);
+  overflow: hidden;
+}
+
+.vp-realtime-single-summary {
+  padding: 18px;
+  border-right: 1px solid var(--vp-border);
+  background: #f8fbff;
+  display: grid;
+  gap: 11px;
+  align-content: start;
+}
+
+.vp-realtime-single-grid {
+  padding: 16px;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-realtime-single-item {
+  min-height: 146px;
+  padding: 12px;
+  border: 1px solid rgba(22, 100, 255, 0.14);
+  border-radius: 8px;
+  background: #fbfcff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-realtime-single-item:hover,
+.vp-realtime-single-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  box-shadow: var(--vp-shadow-sm);
+  outline: none;
+}
+
+.vp-realtime-single-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.vp-realtime-single-item strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  word-break: break-word;
+}
+
+.vp-realtime-single-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
+.vp-realtime-single-item em {
+  color: var(--vp-primary);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+}
+
 .vp-time-window-monitor {
   margin-bottom: 16px;
   overflow: hidden;
@@ -8590,6 +8666,8 @@ button.vp-realtime-command-item:focus-visible {
   .vp-realtime-map-dispatch,
   .vp-realtime-map-dispatch-grid,
   .vp-realtime-customer-steps,
+  .vp-realtime-single-snapshot,
+  .vp-realtime-single-grid,
   .vp-time-window-monitor .semi-card-body,
   .vp-time-window-controls,
   .vp-time-window-actions,

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

@@ -9336,6 +9336,13 @@ test('frames realtime page as one vehicle service with source evidence', async (
   expect(screen.getByRole('button', { name: '实时监控路径 异常优先 关注车辆' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '实时监控路径 单车复盘 轨迹回放' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '实时监控路径 查询导出 导出 CSV' })).toBeInTheDocument();
+  expect(screen.getByText('实时单车服务快照')).toBeInTheDocument();
+  expect(screen.getByText('客户打开实时监控时，直接围绕选中车辆查看在线、位置、里程、新鲜度，并进入轨迹、统计、历史导出和告警通知。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '实时单车服务快照 车辆服务 粤ART002 车辆档案' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '实时单车服务快照 轨迹回放 更新超时 打开轨迹' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '实时单车服务快照 统计查询 119925 km 查里程' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '实时单车服务快照 历史导出 GB32960 导出证据' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '实时单车服务快照 告警通知 服务正常 查看告警' })).toBeInTheDocument();
   expect(screen.getAllByText('定位有效').length).toBeGreaterThan(0);
   expect(screen.getByText('车辆核心数据')).toBeInTheDocument();
   expect(screen.getByText('实时通道')).toBeInTheDocument();