feat(platform): summarize realtime in vehicle detail

vehicle-data-platform/apps/api/internal/platform/handler_test.go

@@ -56,7 +56,7 @@ func TestHandlerVehicleDetail(t *testing.T) {
 	if rec.Code != http.StatusOK {
 		t.Fatalf("status = %d body=%s", rec.Code, rec.Body.String())
 	}
-	for _, want := range []string{"identity", "realtime", "history", "raw", "mileage", "quality", "sources", "sourceStatus", "VIN_MISSING"} {
+	for _, want := range []string{"identity", "realtimeSummary", "realtime", "history", "raw", "mileage", "quality", "sources", "sourceStatus", "VIN_MISSING"} {
 		if !strings.Contains(rec.Body.String(), want) {
 			t.Fatalf("response missing %q: %s", want, rec.Body.String())
 		}

vehicle-data-platform/apps/api/internal/platform/model.go

@@ -57,6 +57,7 @@ type VehicleCoverageRow struct {
 type VehicleDetail struct {
 	VIN             string                   `json:"vin"`
 	Identity        *VehicleRow              `json:"identity,omitempty"`
+	RealtimeSummary *VehicleRealtimeRow      `json:"realtimeSummary,omitempty"`
 	Sources         []string                 `json:"sources"`
 	SourceStatus    []VehicleSourceStatus    `json:"sourceStatus"`
 	Realtime        []RealtimeLocationRow    `json:"realtime"`

vehicle-data-platform/apps/api/internal/platform/service.go

@@ -81,6 +81,14 @@ func (s *Service) VehicleDetail(ctx context.Context, vin string, protocol string
 		rawQuery.Protocol = protocol
 		qualityQuery.Set("protocol", protocol)
 	}
+	realtimeSummary, err := s.store.VehicleRealtime(ctx, url.Values{"vin": {resolvedVIN}, "limit": {"1"}})
+	if err != nil {
+		return VehicleDetail{}, err
+	}
+	var summary *VehicleRealtimeRow
+	if len(realtimeSummary.Items) > 0 {
+		summary = &realtimeSummary.Items[0]
+	}
 	realtime, err := s.store.RealtimeLocations(ctx, realtimeQuery)
 	if err != nil {
 		return VehicleDetail{}, err
@@ -106,6 +114,7 @@ func (s *Service) VehicleDetail(ctx context.Context, vin string, protocol string
 	return VehicleDetail{
 		VIN:             resolvedVIN,
 		Identity:        identity,
+		RealtimeSummary: summary,
 		Sources:         sourceNames(sourceStatus),
 		SourceStatus:    sourceStatus,
 		Realtime:        realtime.Items,

vehicle-data-platform/apps/web/src/api/types.ts

@@ -54,6 +54,7 @@ export interface VehicleCoverageRow {
 export interface VehicleDetail {
   vin: string;
   identity?: VehicleRow;
+  realtimeSummary?: VehicleRealtimeRow;
   sources: string[];
   sourceStatus: VehicleSourceStatus[];
   realtime: RealtimeLocationRow[];

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

@@ -40,10 +40,13 @@ export function VehicleDetail({ vin }: { vin: string }) {
   }, [vin]);
 
   const identity = detail?.identity;
+  const summary = detail?.realtimeSummary;
   const latest = detail?.realtime[0];
   const protocols = useMemo(() => detail?.sources ?? [], [detail?.sources]);
   const latestRaw = detail?.raw.items[0];
   const qualityCount = detail?.quality.total ?? 0;
+  const online = summary?.online || identity?.online || false;
+  const lastSeen = summary?.lastSeen || latest?.lastSeen || '-';
 
   return (
     <div className="vp-page">
@@ -72,13 +75,17 @@ export function VehicleDetail({ vin }: { vin: string }) {
           <Descriptions
             row
             data={[
-              { key: 'VIN', value: identity?.vin ?? latest?.vin ?? query.vin },
+              { key: 'VIN', value: summary?.vin ?? identity?.vin ?? latest?.vin ?? query.vin },
-              { key: '车牌', value: identity?.plate || latest?.plate || '-' },
+              { key: '车牌', value: summary?.plate || identity?.plate || latest?.plate || '-' },
-              { key: '手机号', value: identity?.phone || '-' },
+              { key: '手机号', value: summary?.phone || identity?.phone || '-' },
-              { key: 'OEM', value: identity?.oem || '-' },
+              { key: 'OEM', value: summary?.oem || identity?.oem || '-' },
-              { key: '在线', value: <StatusTag status={identity?.online || latest ? 'ok' : 'offline'} /> },
+              { key: '在线', value: <StatusTag status={online ? 'ok' : 'offline'} /> },
-              { key: '来源协议', value: protocols.length > 0 ? <Space>{protocols.map((item) => <Tag key={item} color="blue">{item}</Tag>)}</Space> : '-' },
+              {
-              { key: '最后位置时间', value: latest?.lastSeen ?? '-' },
+                key: '来源协议',
+                value: protocols.length > 0 ? <Space>{protocols.map((item) => <Tag key={item} color={item === summary?.primaryProtocol ? 'blue' : 'grey'}>{item}</Tag>)}</Space> : '-'
+              },
+              { key: '在线来源', value: summary ? `${summary.onlineSourceCount}/${summary.sourceCount}` : '-' },
+              { key: '最后位置时间', value: lastSeen },
               { key: '最新 RAW 时间', value: latestRaw?.serverTime ?? '-' },
               { key: '质量问题', value: <Tag color={qualityCount > 0 ? 'orange' : 'green'}>{qualityCount > 0 ? `${qualityCount} 项` : '无'}</Tag> }
             ]}
@@ -107,6 +114,21 @@ export function VehicleDetail({ vin }: { vin: string }) {
       <Card bordered style={{ marginTop: 16 }}>
         <Tabs>
           <Tabs.TabPane tab="实时状态" itemKey="realtime">
+            <div className="vp-realtime-strip">
+              {[
+                { label: '最新来源', value: summary?.primaryProtocol || '-' },
+                { label: '速度 km/h', value: summary ? summary.speedKmh : '-' },
+                { label: 'SOC %', value: summary ? summary.socPercent : '-' },
+                { label: '总里程 km', value: summary ? summary.totalMileageKm : '-' },
+                { label: '经纬度', value: summary ? `${summary.longitude}, ${summary.latitude}` : '-' },
+                { label: '最后时间', value: lastSeen }
+              ].map((item) => (
+                <div key={item.label} className="vp-realtime-strip-item">
+                  <div className="vp-realtime-strip-label">{item.label}</div>
+                  <div className="vp-realtime-strip-value">{item.value}</div>
+                </div>
+              ))}
+            </div>
             <Table
               loading={loading}
               pagination={false}

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

@@ -167,6 +167,36 @@ body {
   align-items: center;
 }
 
+.vp-realtime-strip {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.vp-realtime-strip-item {
+  min-height: 72px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+}
+
+.vp-realtime-strip-label {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-realtime-strip-value {
+  margin-top: 6px;
+  color: var(--vp-text);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22px;
+  word-break: break-all;
+}
+
 .semi-navigation-item-text {
   font-size: 14px;
 }