feat(platform): add vehicle service delivery package

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

@@ -310,6 +310,55 @@ function vehicleCustomerLookupText({
   return lines.join('\n');
 }
 
+function vehicleCustomerServicePackageText({
+  filters,
+  rows,
+  total,
+  summary
+}: {
+  filters: Record<string, string>;
+  rows: VehicleCoverageRow[];
+  total: number;
+  summary: VehicleCoverageSummary | null;
+}) {
+  const scope = filters.keyword?.trim() ? `单车 ${filters.keyword.trim()}` : '当前车辆池';
+  const singleVehicleFilters = filters.keyword?.trim()
+    ? { keyword: filters.keyword.trim(), ...(filters.protocol ? { protocol: filters.protocol } : {}) }
+    : {};
+  const mapFilters = { ...filters, online: filters.online || 'online' };
+  const pageVerdicts = currentPageVerdictStats(rows).map((item) => `${item.status} ${item.count.toLocaleString()}`).join('；') || '-';
+  const pageActions = currentPageActionStats(rows).map((item) => `${item.label} ${item.count.toLocaleString()}`).join('；') || '-';
+  const missingSources = (summary?.missingSources ?? [])
+    .filter((item) => item.count > 0)
+    .map((item) => `${item.protocol} ${item.count.toLocaleString()}`)
+    .join('；') || '-';
+  return [
+    '【客户车辆服务交付包】',
+    `服务范围：${scope}`,
+    `当前筛选：${vehicleFilterSummary(filters).join('；') || '全部车辆'}`,
+    `车辆规模：当前页 ${rows.length.toLocaleString()} 辆 / 当前筛选 ${total.toLocaleString()} 辆`,
+    `服务概览：在线 ${(summary?.onlineVehicles ?? 0).toLocaleString()}；单源 ${(summary?.singleSourceVehicles ?? 0).toLocaleString()}；多源 ${(summary?.multiSourceVehicles ?? 0).toLocaleString()}；暂无来源 ${(summary?.noDataVehicles ?? 0).toLocaleString()}`,
+    `档案状态：待绑定 ${(summary?.unboundVehicles ?? 0).toLocaleString()}；档案不完整 ${(summary?.archiveIncompleteVehicles ?? 0).toLocaleString()}`,
+    `当前页判读：${pageVerdicts}`,
+    `建议动作：${pageActions}`,
+    `缺失来源：${missingSources}`,
+    '',
+    '客户入口：',
+    `车辆地图：${appURL(buildAppHash({ page: 'map', keyword: filters.keyword, protocol: filters.protocol, filters: mapFilters }))}`,
+    `实时监控：${appURL(buildAppHash({ page: 'realtime', ...singleVehicleFilters, filters: filters.keyword?.trim() ? undefined : { ...filters, online: filters.online || 'online' } }))}`,
+    `轨迹回放：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'location' } }))}`,
+    `里程统计：${appURL(buildAppHash({ page: 'mileage', ...singleVehicleFilters }))}`,
+    `告警通知：${appURL(buildAppHash({ page: 'alert-events', ...singleVehicleFilters, filters }))}`,
+    `历史数据导出：${appURL(buildAppHash({ page: 'history', ...singleVehicleFilters, filters: { tab: 'raw', includeFields: 'true' } }))}`,
+    '',
+    '交付口径：',
+    '1. 客户先看地图与实时状态，判断车辆是否在线和位置是否可信',
+    '2. 单车问题进入轨迹回放和里程统计，确认时间窗内发生了什么',
+    '3. 异常车辆进入告警通知，带上原始记录和历史数据作为证据',
+    '4. 对外交付时优先使用车辆口径，协议来源只作为证据说明'
+  ].join('\n');
+}
+
 type VehicleActionRecommendation = {
   label: string;
   color: 'green' | 'orange' | 'red';
@@ -597,6 +646,9 @@ export function Vehicles({
   const copyCustomerLookupPath = () => {
     copyText(vehicleCustomerLookupText({ filters, rows, total: pagination.total, summary }), '客户查车路径');
   };
+  const copyCustomerServicePackage = () => {
+    copyText(vehicleCustomerServicePackageText({ filters, rows, total: pagination.total, summary }), '客户车辆服务交付包');
+  };
   const customerLookupSteps = [
     {
       label: '车辆身份',
@@ -708,6 +760,53 @@ export function Vehicles({
       disabled: rows.length === 0
     }
   ];
+  const servicePackageItems = [
+    {
+      label: '车辆地图',
+      value: `${(summary?.onlineVehicles ?? 0).toLocaleString()} 在线`,
+      detail: '先看当前筛选车辆的位置分布和在线状态。',
+      color: 'blue' as const,
+      action: '打开地图',
+      disabled: !onOpenMap,
+      onClick: () => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })
+    },
+    {
+      label: '轨迹回放',
+      value: filters.keyword?.trim() ? '单车时间线' : '先选车辆',
+      detail: filters.keyword?.trim() ? '按当前车辆回放定位轨迹和断点。' : '客户追问某车时，从车辆列表进入单车回放。',
+      color: filters.keyword?.trim() ? 'green' as const : 'grey' as const,
+      action: '回放轨迹',
+      disabled: !onOpenHistory || !filters.keyword?.trim(),
+      onClick: () => onOpenHistory?.({ ...serviceScopeFilters, tab: 'location' })
+    },
+    {
+      label: '里程统计',
+      value: filters.keyword?.trim() ? '区间复核' : '单车后可用',
+      detail: '核对时间窗里程、日里程和累计口径，支撑 BI 与客户问询。',
+      color: filters.keyword?.trim() ? 'orange' as const : 'grey' as const,
+      action: '查看里程',
+      disabled: !onOpenMileage || !filters.keyword?.trim(),
+      onClick: () => onOpenMileage?.(serviceScopeFilters)
+    },
+    {
+      label: '告警通知',
+      value: `${(summary?.noDataVehicles ?? 0).toLocaleString()} 无来源`,
+      detail: '异常车辆进入告警闭环，确认责任方、通知渠道和证据。',
+      color: (summary?.noDataVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
+      action: '查看告警',
+      disabled: !onOpenQuality,
+      onClick: () => onOpenQuality?.(serviceScopeFilters)
+    },
+    {
+      label: '历史导出',
+      value: `${rows.length.toLocaleString()} 当前页`,
+      detail: '对外交付车辆清单、轨迹、RAW 和字段证据。',
+      color: rows.length > 0 ? 'blue' as const : 'grey' as const,
+      action: '导出清单',
+      disabled: rows.length === 0,
+      onClick: exportVehicles
+    }
+  ];
 
   useEffect(() => {
     setFilters(initialFilters);
@@ -914,6 +1013,42 @@ export function Vehicles({
           ))}
         </div>
       </Card>
+      <Card bordered title="客户车辆服务交付包" style={{ marginTop: 16 }}>
+        <div className="vp-vehicle-package-board">
+          <div className="vp-vehicle-package-summary">
+            <Space wrap>
+              <Tag color="blue">客户交付</Tag>
+              <Tag color={filters.keyword?.trim() ? 'green' : 'grey'}>{filters.keyword?.trim() ? '单车包' : '车辆池包'}</Tag>
+            </Space>
+            <strong>{filters.keyword?.trim() || `${(summary?.totalVehicles ?? pagination.total).toLocaleString()} 辆车`}</strong>
+            <span>
+              把车辆地图、实时监控、轨迹回放、里程统计、告警通知和历史导出放在同一份服务包里，客户不用理解 GB32960、808 或 MQTT 的差异。
+            </span>
+            <Space wrap>
+              <Button size="small" theme="solid" type="primary" icon={<IconCopy />} onClick={copyCustomerServicePackage}>复制交付包</Button>
+              <Button size="small" disabled={!onOpenMap} onClick={() => onOpenMap?.({ ...serviceScopeFilters, online: 'online' })}>查看地图</Button>
+              <Button size="small" disabled={!onOpenQuality} onClick={() => onOpenQuality?.(serviceScopeFilters)}>告警通知</Button>
+            </Space>
+          </div>
+          <div className="vp-vehicle-package-grid">
+            {servicePackageItems.map((item) => (
+              <button
+                key={item.label}
+                type="button"
+                className="vp-vehicle-package-item"
+                disabled={item.disabled}
+                aria-label={`客户车辆服务交付 ${item.label} ${item.action}`}
+                onClick={item.onClick}
+              >
+                <Tag color={item.color}>{item.label}</Tag>
+                <strong>{item.value}</strong>
+                <span>{item.detail}</span>
+                <em>{item.action}</em>
+              </button>
+            ))}
+          </div>
+        </div>
+      </Card>
       <Card bordered>
         <Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => {
           const nextFilters = values as Record<string, string>;