feat(platform): add vehicle live service view

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

@@ -900,6 +900,53 @@ export function VehicleDetail({
       onClick: () => onOpenMileage(resolvedVIN, activeProtocol)
     }
   ];
+  const liveViewActions = [
+    {
+      title: '实时位置',
+      value: formatLocation(latest),
+      detail: lastSeen === '-' ? '暂无最后上报时间' : `最后上报 ${lastSeen}`,
+      action: '查看实时',
+      color: online ? 'green' as const : 'orange' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenRealtime(resolvedVIN, activeProtocol)
+    },
+    {
+      title: '轨迹历史',
+      value: `${formatCompactNumber(overview?.historyCount ?? detail?.history?.total ?? 0)} 条`,
+      detail: evidenceLocatedSourceCount > 0 ? `${evidenceLocatedSourceCount} 个定位证据` : '暂无有效定位',
+      action: '轨迹回放',
+      color: evidenceLocatedSourceCount > 0 ? 'blue' as const : 'grey' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenHistory(resolvedVIN, activeProtocol)
+    },
+    {
+      title: '里程能源',
+      value: `${formatCompactNumber(latest?.totalMileageKm, ' km')}`,
+      detail: `SOC ${formatCompactNumber(latest?.socPercent, '%')} / 速度 ${formatCompactNumber(latest?.speedKmh, ' km/h')}`,
+      action: '里程统计',
+      color: isFiniteNumber(latest?.totalMileageKm) ? 'green' as const : 'orange' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenMileage(resolvedVIN, activeProtocol)
+    },
+    {
+      title: '数据导出',
+      value: `${formatCompactNumber(overview?.rawCount ?? detail?.raw?.total ?? 0)} 帧`,
+      detail: latestRaw?.frameType ? `最新 ${latestRaw.frameType}` : '历史明细与字段',
+      action: '历史导出',
+      color: (overview?.rawCount ?? detail?.raw?.total ?? 0) > 0 ? 'blue' as const : 'grey' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenRaw(resolvedVIN, activeProtocol)
+    },
+    {
+      title: '告警通知',
+      value: `${qualityCount.toLocaleString()} 项`,
+      detail: priorityQualityIssue ? `${qualityIssueLabel(priorityQualityIssue.issueType)} / ${priorityQualityIssue.lastSeen || '-'}` : '暂无待通知告警',
+      action: '告警闭环',
+      color: qualityCount > 0 ? 'orange' as const : 'green' as const,
+      disabled: !onOpenQuality || (!hasResolvedVIN && qualityCount <= 0),
+      onClick: () => onOpenQuality?.(qualityFiltersForCurrentVehicle())
+    }
+  ];
   const copyCustomerServicePackage = () => {
     if (!detail) {
       Toast.warning('当前没有可复制的客户服务交付包');
@@ -1030,6 +1077,67 @@ export function VehicleDetail({
         </div>
       ) : null}
 
+      <Card bordered className="vp-vehicle-live-view">
+        <div className="vp-vehicle-live-main">
+          <div className="vp-vehicle-live-copy">
+            <Space wrap>
+              <Tag color="blue">单车 Live View</Tag>
+              <Tag color={online ? 'green' : hasResolvedVIN ? 'orange' : 'grey'}>{online ? '在线' : hasResolvedVIN ? '离线' : '待绑定'}</Tag>
+              <Tag color={serviceConclusion.color}>{customerStatusTitle(serviceStatus?.title) || serviceConclusion.status}</Tag>
+            </Space>
+            <Typography.Title heading={3} style={{ margin: 0 }}>
+              {[archivePlate, displayVIN].filter((item) => item && item !== '-').join(' / ') || displayLookupKey}
+            </Typography.Title>
+            <Typography.Text type="secondary">
+              客户打开一辆车时，先看当前位置、最后上报、速度、SOC、总里程和告警，再进入轨迹回放、里程统计、数据导出和告警闭环。
+            </Typography.Text>
+            <div className="vp-vehicle-live-facts">
+              {[
+                { label: '当前位置', value: formatLocation(latest) },
+                { label: '最后上报', value: lastSeen },
+                { label: '速度', value: formatCompactNumber(latest?.speedKmh, ' km/h') },
+                { label: 'SOC', value: formatCompactNumber(latest?.socPercent, '%') },
+                { label: '总里程', value: formatCompactNumber(latest?.totalMileageKm, ' km') }
+              ].map((item) => (
+                <div key={item.label}>
+                  <span>{item.label}</span>
+                  <strong>{item.value}</strong>
+                </div>
+              ))}
+            </div>
+            <Space wrap>
+              <Button theme="solid" type="primary" disabled={!hasResolvedVIN} onClick={() => onOpenRealtime(resolvedVIN, activeProtocol)}>实时监控</Button>
+              <Button theme="light" type="primary" disabled={!hasResolvedVIN} onClick={() => onOpenHistory(resolvedVIN, activeProtocol)}>轨迹回放</Button>
+              <Button theme="light" type="primary" disabled={!hasResolvedVIN} onClick={() => onOpenRaw(resolvedVIN, activeProtocol)}>数据导出</Button>
+              <Button theme="light" disabled={!detail} icon={<IconCopy />} onClick={copyCustomerServicePackage}>复制交付包</Button>
+            </Space>
+          </div>
+          <VehicleMap
+            points={vehicleMapPoints}
+            maxFallbackPoints={16}
+            heightClassName="vp-vehicle-live-map"
+            fallbackLabel="显示该车最新位置"
+          />
+        </div>
+        <div className="vp-vehicle-live-actions">
+          {liveViewActions.map((item) => (
+            <button
+              key={item.title}
+              type="button"
+              className="vp-vehicle-live-action"
+              disabled={item.disabled}
+              aria-label={`单车实时视图 ${item.title} ${item.action}`}
+              onClick={item.onClick}
+            >
+              <Tag color={item.color}>{item.title}</Tag>
+              <strong>{item.value}</strong>
+              <span>{item.detail}</span>
+              <em>{item.action}</em>
+            </button>
+          ))}
+        </div>
+      </Card>
+
       <Card
         bordered
         title={<Space><span>车辆运营总览</span><Button size="small" disabled={!detail} icon={<IconCopy />} onClick={copyUnifiedVehicleService}>复制归一摘要</Button></Space>}