feat(platform): add vehicle detail customer questions

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

@@ -947,6 +947,56 @@ export function VehicleDetail({
       onClick: () => onOpenQuality?.(qualityFiltersForCurrentVehicle())
     }
   ];
+  const customerQuestionActions = [
+    {
+      question: '这辆车现在在哪里？',
+      answer: formatLocation(latest),
+      action: '实时监控',
+      color: online ? 'green' as const : 'orange' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenRealtime(resolvedVIN, activeProtocol)
+    },
+    {
+      question: '最近是否还在线？',
+      answer: lastSeen === '-' ? '暂无最后上报' : `最后上报 ${lastSeen}`,
+      action: '查看实时',
+      color: online ? 'green' as const : 'orange' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenRealtime(resolvedVIN, activeProtocol)
+    },
+    {
+      question: '能不能回放轨迹？',
+      answer: `${formatCompactNumber(overview?.historyCount ?? detail?.history?.total ?? 0)} 条轨迹证据`,
+      action: '轨迹回放',
+      color: evidenceLocatedSourceCount > 0 ? 'blue' as const : 'grey' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenHistory(resolvedVIN, activeProtocol)
+    },
+    {
+      question: '这辆车跑了多少？',
+      answer: `${formatCompactNumber(latest?.totalMileageKm, ' km')} / ${formatCompactNumber(overview?.mileageCount ?? detail?.mileage?.total ?? 0)} 条统计`,
+      action: '统计查询',
+      color: isFiniteNumber(latest?.totalMileageKm) ? 'green' as const : 'orange' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenMileage(resolvedVIN, activeProtocol)
+    },
+    {
+      question: '数据能导出吗？',
+      answer: `${formatCompactNumber(overview?.rawCount ?? detail?.raw?.total ?? 0)} 条历史数据`,
+      action: '历史导出',
+      color: (overview?.rawCount ?? detail?.raw?.total ?? 0) > 0 ? 'blue' as const : 'grey' as const,
+      disabled: !hasResolvedVIN,
+      onClick: () => onOpenRaw(resolvedVIN, activeProtocol)
+    },
+    {
+      question: '是否需要通知处理？',
+      answer: 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('当前没有可复制的客户服务交付包');
@@ -1138,6 +1188,25 @@ export function VehicleDetail({
         </div>
       </Card>
 
+      <Card bordered title="客户常问" style={{ marginTop: 16 }}>
+        <div className="vp-vehicle-question-grid">
+          {customerQuestionActions.map((item) => (
+            <button
+              key={item.question}
+              type="button"
+              className="vp-vehicle-question-item"
+              disabled={item.disabled}
+              aria-label={`单车客户常问 ${item.question} ${item.action}`}
+              onClick={item.onClick}
+            >
+              <strong>{item.question}</strong>
+              <span>{item.answer}</span>
+              <Tag color={item.color}>{item.action}</Tag>
+            </button>
+          ))}
+        </div>
+      </Card>
+
       <Card
         bordered
         title={<Space><span>车辆运营总览</span><Button size="small" disabled={!detail} icon={<IconCopy />} onClick={copyUnifiedVehicleService}>复制归一摘要</Button></Space>}

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

@@ -5585,6 +5585,53 @@ button.vp-realtime-command-item:focus-visible {
   line-height: 18px;
 }
 
+.vp-vehicle-question-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-vehicle-question-item {
+  min-height: 118px;
+  padding: 12px;
+  border: 1px solid rgba(22, 100, 255, 0.16);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  gap: 9px;
+  align-content: start;
+}
+
+.vp-vehicle-question-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.vp-vehicle-question-item:not(:disabled):hover,
+.vp-vehicle-question-item:not(:disabled):focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  outline: none;
+}
+
+.vp-vehicle-question-item strong {
+  color: var(--vp-text);
+  font-size: 14px;
+  line-height: 20px;
+  word-break: break-word;
+}
+
+.vp-vehicle-question-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
 .vp-unified-service-main {
   min-height: 178px;
   padding: 14px;
@@ -6491,6 +6538,7 @@ button.vp-realtime-command-item:focus-visible {
   .vp-vehicle-live-view .semi-card-body,
   .vp-vehicle-live-main,
   .vp-vehicle-live-facts,
+  .vp-vehicle-question-grid,
   .vp-unified-service-board,
   .vp-unified-service-grid,
   .vp-service-dossier,

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

@@ -11891,6 +11891,13 @@ test('copies vehicle service diagnostic summary', async () => {
   expect(screen.getByText('当前位置')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '单车实时视图 实时位置 查看实时' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '单车实时视图 数据导出 历史导出' })).toBeInTheDocument();
+  expect(screen.getByText('客户常问')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '单车客户常问 这辆车现在在哪里？ 实时监控' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '单车客户常问 最近是否还在线？ 查看实时' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '单车客户常问 能不能回放轨迹？ 轨迹回放' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '单车客户常问 这辆车跑了多少？ 统计查询' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '单车客户常问 数据能导出吗？ 历史导出' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '单车客户常问 是否需要通知处理？ 告警通知' })).toBeInTheDocument();
   expect(screen.getByText('车辆服务档案总览')).toBeInTheDocument();
   expect(screen.getByText('单车客户服务交付包')).toBeInTheDocument();
   expect(screen.getByText('面向客户交付时，以车辆为主对象提供实时监控、轨迹回放、历史数据查询、告警通知和统计查询，协议来源只作为可追溯证据。')).toBeInTheDocument();