feat(platform): recommend vehicle detail actions

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

@@ -56,6 +56,14 @@ function sourceServiceRole(source: VehicleSourceStatus, primaryProtocol?: string
   return { label: '离线证据', color: 'grey' as const };
 }
 
+type VehicleServiceAction = {
+  key: string;
+  label: string;
+  description: string;
+  color: 'green' | 'orange' | 'red' | 'blue';
+  onClick: () => void;
+};
+
 async function copyVehicleServiceURL() {
   try {
     await navigator.clipboard.writeText(`${window.location.origin}${window.location.pathname}${window.location.hash}`);
@@ -214,6 +222,56 @@ export function VehicleDetail({
       </Button>
     );
   };
+  const serviceActions = useMemo<VehicleServiceAction[]>(() => {
+    const actions: VehicleServiceAction[] = [];
+    if (!hasResolvedVIN) {
+      actions.push({
+        key: 'identity',
+        label: '维护身份绑定',
+        description: `关键词 ${displayLookupKey} 暂未解析到 VIN，先补齐绑定后再看跨来源服务。`,
+        color: 'orange',
+        onClick: () => onOpenVehicles?.({ bindingStatus: 'unbound' })
+      });
+    }
+    for (const item of missingProtocols) {
+      actions.push({
+        key: `missing-${item}`,
+        label: `补齐 ${item} 来源`,
+        description: `${item} 当前没有形成有效来源证据，会影响这辆车的统一服务可信度。`,
+        color: 'orange',
+        onClick: () => onOpenVehicles?.({ serviceStatus: 'degraded', missingProtocol: item })
+      });
+    }
+    for (const source of detail?.sourceStatus ?? []) {
+      if (source.online) continue;
+      actions.push({
+        key: `offline-${source.protocol}`,
+        label: `排查 ${source.protocol} 离线`,
+        description: `${source.protocol} 最后上报时间：${source.lastSeen || '无上报'}。`,
+        color: 'orange',
+        onClick: () => switchSource(source.protocol)
+      });
+    }
+    if (qualityCount > 0) {
+      actions.push({
+        key: 'quality',
+        label: `处理质量问题 ${qualityCount} 项`,
+        description: '质量问题会影响车辆服务的定位、里程和实时状态可信度。',
+        color: 'orange',
+        onClick: () => onOpenQuality?.(qualityFiltersForCurrentVehicle())
+      });
+    }
+    if (actions.length === 0 && hasResolvedVIN) {
+      actions.push({
+        key: 'healthy',
+        label: '查看实时服务',
+        description: '当前没有明确处置项，可直接查看该车统一实时状态。',
+        color: 'green',
+        onClick: () => onOpenRealtime(resolvedVIN, activeProtocol)
+      });
+    }
+    return actions;
+  }, [activeProtocol, detail?.sourceStatus, displayLookupKey, hasResolvedVIN, missingProtocols, onOpenQuality, onOpenRealtime, onOpenVehicles, qualityCount, resolvedVIN]);
   const qualityTable = (
     <Table
       loading={loading}
@@ -315,6 +373,22 @@ export function VehicleDetail({
         </Card>
       ) : null}
 
+      <Card bordered title="服务处置建议" style={{ marginTop: 16 }}>
+        <div className="vp-action-grid">
+          {serviceActions.map((item) => (
+            <div key={item.key} className="vp-action-item">
+              <div>
+                <Tag color={item.color}>{item.label}</Tag>
+                <Typography.Text type="secondary" style={{ display: 'block', marginTop: 8 }}>{item.description}</Typography.Text>
+              </div>
+              <Button size="small" theme="light" type={item.color === 'red' ? 'danger' : item.color === 'green' ? 'primary' : 'warning'} onClick={item.onClick}>
+                {item.label}
+              </Button>
+            </div>
+          ))}
+        </div>
+      </Card>
+
       <Card bordered style={{ marginTop: 16 }}>
         <div className="vp-vehicle-summary">
           <Descriptions

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

@@ -318,6 +318,28 @@ body {
   word-break: break-all;
 }
 
+.vp-action-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-action-item {
+  min-height: 92px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.vp-action-item > div {
+  min-width: 0;
+}
+
 .vp-source-toolbar {
   margin-bottom: 12px;
 }

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

@@ -5223,3 +5223,105 @@ test('shows cross-source consistency for one vehicle service', async () => {
   fireEvent.click(screen.getByRole('button', { name: '查看缺 YUTONG_MQTT 车辆' }));
   expect(window.location.hash).toBe('#/vehicles?serviceStatus=degraded&missingProtocol=YUTONG_MQTT');
 });
+
+test('shows actionable vehicle service recommendations on detail', async () => {
+  window.history.replaceState(null, '', '/#/detail?keyword=VIN-ACTION-001');
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/vehicle-service')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            vin: 'VIN-ACTION-001',
+            lookupKey: 'VIN-ACTION-001',
+            lookupResolved: true,
+            resolution: {
+              lookupKey: 'VIN-ACTION-001',
+              resolved: true,
+              vin: 'VIN-ACTION-001',
+              plate: '粤A处置1',
+              phone: '13307795425',
+              oem: 'G7s',
+              protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'],
+              online: true,
+              lastSeen: '2026-07-03T20:12:10+08:00'
+            },
+            realtimeSummary: {
+              vin: 'VIN-ACTION-001',
+              plate: '粤A处置1',
+              phone: '13307795425',
+              oem: 'G7s',
+              protocols: ['GB32960', 'JT808', 'YUTONG_MQTT'],
+              sourceCount: 3,
+              onlineSourceCount: 2,
+              online: true,
+              bindingStatus: 'bound',
+              primaryProtocol: 'GB32960',
+              longitude: 113.2,
+              latitude: 23.1,
+              speedKmh: 32,
+              socPercent: 78,
+              totalMileageKm: 1000.5,
+              lastSeen: '2026-07-03T20:12:10+08:00'
+            },
+            serviceStatus: {
+              status: 'degraded',
+              severity: 'warning',
+              title: '来源不完整',
+              detail: '2/3 个来源在线，车辆服务可用但缺少 YUTONG_MQTT 来源。',
+              sourceCount: 3,
+              onlineSourceCount: 2
+            },
+            sourceConsistency: {
+              sourceCount: 3,
+              onlineSourceCount: 2,
+              locatedSourceCount: 2,
+              missingProtocols: ['YUTONG_MQTT'],
+              mileageDeltaKm: 0.4,
+              sourceTimeDeltaSeconds: 35,
+              scope: 'all_sources',
+              status: 'degraded',
+              severity: 'warning',
+              title: '来源不完整',
+              detail: '2/3 个来源在线，车辆服务可用但缺少 YUTONG_MQTT 来源。'
+            },
+            sources: ['GB32960', 'JT808', 'YUTONG_MQTT'],
+            sourceStatus: [
+              { protocol: 'GB32960', online: true, lastSeen: '2026-07-03T20:12:10+08:00', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true },
+              { protocol: 'JT808', online: true, lastSeen: '2026-07-03T20:12:05+08:00', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true },
+              { protocol: 'YUTONG_MQTT', online: false, lastSeen: '2026-07-03T20:11:40+08:00', hasRealtime: true, hasHistory: false, hasRaw: true, hasMileage: false }
+            ],
+            realtime: [],
+            history: { items: [], total: 0, limit: 20, offset: 0 },
+            raw: { items: [], total: 2, limit: 10, offset: 0 },
+            mileage: { items: [], total: 0, limit: 20, offset: 0 },
+            quality: { items: [], total: 3, limit: 20, offset: 0 }
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: path.includes('/api/ops/health')
+          ? { linkHealth: [], kafkaLag: 0, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } }
+          : { items: [], total: 0, limit: 10, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByText('服务处置建议')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '补齐 YUTONG_MQTT 来源' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '处理质量问题 3 项' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '排查 YUTONG_MQTT 离线' })).toBeInTheDocument();
+
+  fireEvent.click(screen.getByRole('button', { name: '补齐 YUTONG_MQTT 来源' }));
+  expect(window.location.hash).toBe('#/vehicles?serviceStatus=degraded&missingProtocol=YUTONG_MQTT');
+});