feat(platform): sharpen customer vehicle cockpit

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

@@ -1319,11 +1319,146 @@ export function Dashboard({
     ];
     copyText(lines.join('\n'), '客户服务说明');
   };
+  const customerCockpitMetrics = [
+    {
+      label: '车辆总数',
+      value: formatCount(serviceSummary?.totalVehicles),
+      detail: '以 VIN 聚合车牌、手机号、OEM 和来源证据',
+      color: 'blue' as const,
+      onClick: () => onOpenVehicles({})
+    },
+    {
+      label: '在线车辆',
+      value: formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles),
+      detail: vehicleServiceOnlineText(serviceSummary, summary),
+      color: 'green' as const,
+      onClick: () => onOpenMap({ online: 'online' })
+    },
+    {
+      label: '有效定位',
+      value: commandLocatedCount.toLocaleString(),
+      detail: '用于实时地图、轨迹回放和客户位置问询',
+      color: commandLocatedCount > 0 ? 'green' as const : 'orange' as const,
+      onClick: () => onOpenRealtime({ online: 'online' })
+    },
+    {
+      label: '告警车辆',
+      value: formatCount(summary?.issueVehicles),
+      detail: highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '暂无高优先级告警',
+      color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
+      onClick: () => onOpenQuality()
+    }
+  ];
+  const customerCockpitWorkflows = [
+    {
+      title: '实时看车',
+      description: '打开地图确认车辆在哪里、是否在线、最后上报是否新鲜。',
+      action: '实时地图',
+      evidence: `${commandLocatedCount.toLocaleString()} 辆有定位`,
+      onClick: () => onOpenMap({ online: 'online' })
+    },
+    {
+      title: '轨迹复盘',
+      description: '用同一辆车和同一时间窗回放位置、速度、里程断点。',
+      action: '轨迹回放',
+      evidence: `${formatCount(summary?.activeToday)} 今日活跃`,
+      onClick: openTimeMonitorHistory
+    },
+    {
+      title: '里程核对',
+      description: '按车辆口径核对区间里程、日统计和异常来源。',
+      action: '里程统计',
+      evidence: `${formatCount(serviceSummary?.totalVehicles)} 辆可统计`,
+      onClick: openTimeMonitorMileage
+    },
+    {
+      title: '数据交付',
+      description: '按车辆、时间和字段导出位置历史、原始记录和解析字段。',
+      action: '历史导出',
+      evidence: `${formatCount(summary?.frameToday)} 今日数据`,
+      onClick: openTimeMonitorRaw
+    },
+    {
+      title: '告警通知',
+      description: '将断链、离线、定位异常和字段缺失变成可通知事件。',
+      action: '告警事件',
+      evidence: `${formatCount(summary?.issueVehicles)} 告警车辆`,
+      onClick: () => onOpenQuality()
+    }
+  ];
+  const customerTrustSignals = [
+    {
+      label: '数据来源',
+      value: `${formatCount(serviceSummary?.multiSourceVehicles)} 多源 / ${formatCount(serviceSummary?.singleSourceVehicles)} 单源`,
+      detail: '来源只作为可信度证据，不作为客户主导航。'
+    },
+    {
+      label: '地图能力',
+      value: amapConfigured ? '高德地图可用' : '坐标预览',
+      detail: amapConfigured ? '支持实时看车和轨迹底图。' : '地图配置缺失时仍可查看坐标证据。'
+    },
+    {
+      label: '时间窗',
+      value: dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo),
+      detail: '同一时间范围贯穿轨迹、里程、历史和告警。'
+    }
+  ];
 
   return (
     <div className="vp-page">
       <PageHeader title="车辆服务工作台" description="面向客户的车辆地图、实时监控、轨迹回放、里程统计、自定义时间监控、历史查询、告警通知和数据导出" />
       <Spin spinning={loading}>
+        <Card bordered className="vp-customer-cockpit" bodyStyle={{ padding: 0 }}>
+          <div className="vp-customer-cockpit-main">
+            <div className="vp-customer-cockpit-copy">
+              <Space wrap>
+                <Tag color="blue">客户车辆监控中心</Tag>
+                <Tag color="green">按车服务</Tag>
+                <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警车辆</Tag>
+              </Space>
+              <Typography.Title heading={3} style={{ margin: 0 }}>客户只需要回答：车在哪、跑了多少、发生了什么</Typography.Title>
+              <Typography.Text type="secondary">
+                32960、808、宇通 MQTT 都只是车辆数据来源。产品主线围绕车辆本身提供实时地图、轨迹回放、里程统计、时间窗监控、历史查询、告警通知和数据导出。
+              </Typography.Text>
+              <Space wrap>
+                <Button theme="solid" type="primary" onClick={() => onOpenMap({ online: 'online' })}>打开车辆地图</Button>
+                <Button theme="light" type="primary" onClick={openTimeMonitorHistory}>时间窗复盘</Button>
+                <Button theme="light" type="primary" onClick={openTimeMonitorRaw}>导出历史数据</Button>
+                <Button theme="light" onClick={copyCustomerServiceGuide}>复制客户说明</Button>
+              </Space>
+            </div>
+            <div className="vp-customer-cockpit-metrics">
+              {customerCockpitMetrics.map((item) => (
+                <button key={item.label} type="button" className="vp-customer-cockpit-metric" onClick={item.onClick} aria-label={`客户车辆监控 ${item.label} ${item.value}`}>
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="vp-customer-cockpit-rail">
+            <div className="vp-customer-cockpit-workflows">
+              {customerCockpitWorkflows.map((item) => (
+                <button key={item.title} type="button" className="vp-customer-cockpit-workflow" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
+                  <span>{item.title}</span>
+                  <strong>{item.action}</strong>
+                  <small>{item.description}</small>
+                  <em>{item.evidence}</em>
+                </button>
+              ))}
+            </div>
+            <div className="vp-customer-cockpit-trust">
+              {customerTrustSignals.map((item) => (
+                <div key={item.label} className="vp-customer-cockpit-trust-item">
+                  <span>{item.label}</span>
+                  <strong>{item.value}</strong>
+                  <small>{item.detail}</small>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Card>
         <Card bordered className="vp-customer-hero" bodyStyle={{ padding: 0 }}>
           <div className="vp-customer-hero-map">
             <div className="vp-customer-hero-copy">