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

@@ -55,15 +55,16 @@ type VehicleCoverageRow struct {
 }
 
 type VehicleDetail struct {
-	VIN          string                   `json:"vin"`
+	VIN             string                   `json:"vin"`
-	Identity     *VehicleRow              `json:"identity,omitempty"`
+	Identity        *VehicleRow              `json:"identity,omitempty"`
-	Sources      []string                 `json:"sources"`
+	RealtimeSummary *VehicleRealtimeRow      `json:"realtimeSummary,omitempty"`
-	SourceStatus []VehicleSourceStatus    `json:"sourceStatus"`
+	Sources         []string                 `json:"sources"`
-	Realtime     []RealtimeLocationRow    `json:"realtime"`
+	SourceStatus    []VehicleSourceStatus    `json:"sourceStatus"`
-	History      Page[HistoryLocationRow] `json:"history"`
+	Realtime        []RealtimeLocationRow    `json:"realtime"`
-	Raw          Page[RawFrameRow]        `json:"raw"`
+	History         Page[HistoryLocationRow] `json:"history"`
-	Mileage      Page[DailyMileageRow]    `json:"mileage"`
+	Raw             Page[RawFrameRow]        `json:"raw"`
-	Quality      Page[QualityIssueRow]    `json:"quality"`
+	Mileage         Page[DailyMileageRow]    `json:"mileage"`
+	Quality         Page[QualityIssueRow]    `json:"quality"`
 }
 
 type VehicleSourceStatus struct {

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
@@ -104,15 +112,16 @@ func (s *Service) VehicleDetail(ctx context.Context, vin string, protocol string
 	sourceStatus := vehicleSourceStatus(vehicles.Items, realtime.Items, history.Items, raw.Items, mileage.Items)
 	sourceStatus = s.enrichVehicleSourceStatus(ctx, resolvedVIN, sourceStatus)
 	return VehicleDetail{
-		VIN:          resolvedVIN,
+		VIN:             resolvedVIN,
-		Identity:     identity,
+		Identity:        identity,
-		Sources:      sourceNames(sourceStatus),
+		RealtimeSummary: summary,
-		SourceStatus: sourceStatus,
+		Sources:         sourceNames(sourceStatus),
-		Realtime:     realtime.Items,
+		SourceStatus:    sourceStatus,
-		History:      history,
+		Realtime:        realtime.Items,
-		Raw:          raw,
+		History:         history,
-		Mileage:      mileage,
+		Raw:             raw,
-		Quality:      quality,
+		Mileage:         mileage,
+		Quality:         quality,
 	}, nil
 }
 

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