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) => {