feat(platform): add mileage report delivery journey

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

@@ -1482,6 +1482,76 @@ export function Mileage({
       '在线影响评估'
     );
   };
+  const copyMileageReportJourneyPackage = () => {
+    const vehicleURL = currentVehicleKeyword
+      ? appURL(buildAppHash({ page: 'detail', keyword: currentVehicleKeyword, protocol: currentProtocol }))
+      : undefined;
+    const reportPeriod = mileageRangeText;
+    const trajectoryProof = peakMileage
+      ? `${peakMileage.plate || peakMileage.vin} / ${peakMileage.date} / ${formatKm(peakMileage.dailyMileageKm)} km`
+      : '暂无轨迹证明样本';
+    copyText([
+      '【里程报表交付旅程包】',
+      `报表周期：${reportPeriod}`,
+      `车辆范围：${currentVehicleKeyword || '全部车辆'}`,
+      `数据通道：${currentProtocol || '全部数据通道'}`,
+      `区间里程：${formatKm(summary.totalMileageKm)} km`,
+      `区间闭合：${closureStatus}`,
+      `记录覆盖：${formatPercent(pageCoverageRate)}`,
+      `异常记录：${anomalyRows.length.toLocaleString()} 条`,
+      `轨迹证明：${trajectoryProof}`,
+      `导出发布：${mileageDeliveryState} / ${publishAuditConclusion}`,
+      `在线影响：${onlineVehicleCount.toLocaleString()} 在线 / ${offlineVehicleCount.toLocaleString()} 离线 / 在线率 ${formatPercent(onlineRatePercent)}`,
+      `里程统计：${appURL(window.location.hash || buildAppHash({ page: 'mileage', keyword: currentVehicleKeyword, protocol: currentProtocol }))}`,
+      `轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: currentVehicleKeyword, protocol: currentProtocol, filters: { ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) } }))}`,
+      `历史明细：${appURL(buildAppHash({ page: 'history-query', keyword: currentVehicleKeyword, protocol: currentProtocol, filters: { ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}), tab: 'raw', includeFields: 'true' } }))}`,
+      ...(vehicleURL ? [`车辆服务：${vehicleURL}`] : [])
+    ].join('\n'), '里程报表交付旅程包');
+  };
+  const mileageReportJourneyItems = [
+    {
+      step: '1',
+      title: '报表周期',
+      value: mileageRangeText,
+      detail: `${currentVehicleKeyword || '全部车辆'} / ${currentProtocol || '全部数据通道'}，先确认客户要看的车辆和时间段。`,
+      color: currentVehicleKeyword ? 'blue' as const : 'orange' as const,
+      disabled: false,
+      onClick: copyStatisticsSummary
+    },
+    {
+      step: '2',
+      title: '区间闭合',
+      value: closureStatus,
+      detail: closureDeltaKm == null ? `当前明细覆盖 ${formatPercent(pageCoverageRate)}，发布前需要拉齐全量。` : `闭合差值 ${formatKm(Math.abs(closureDeltaKm))} km。`,
+      color: closureStatusColor,
+      disabled: false,
+      onClick: copyPublishAudit
+    },
+    {
+      step: '3',
+      title: '轨迹证明',
+      value: peakMileage?.plate || peakMileage?.vin || '待选车辆',
+      detail: peakMileage ? `${peakMileage.date} 最大单日 ${formatKm(peakMileage.dailyMileageKm)} km，建议回放轨迹证明。` : '选择车辆后可进入同一时间窗轨迹回放。',
+      color: currentVehicleKeyword ? 'blue' as const : 'grey' as const,
+      disabled: !currentVehicleKeyword || !onOpenHistory,
+      onClick: () => {
+        if (peakMileage) {
+          openMileageEvidence(peakMileage);
+          return;
+        }
+        onOpenHistory?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, dateFrom: filters.dateFrom ?? '', dateTo: filters.dateTo ?? '' });
+      }
+    },
+    {
+      step: '4',
+      title: '导出发布',
+      value: mileageDeliveryState,
+      detail: `${publishAuditConclusion}，导出明细和交付包给客户或 BI 复核。`,
+      color: mileageDeliveryColor,
+      disabled: false,
+      onClick: copyMileageReportJourneyPackage
+    }
+  ];
   const mileageDeliveryConsoleItems = [
     {
       label: '交付状态',
@@ -1889,6 +1959,41 @@ export function Mileage({
           ))}
         </div>
       </section>
+      <section className="vp-mileage-report-journey" aria-label="里程报表交付旅程">
+        <div className="vp-mileage-report-journey-copy">
+          <Space wrap>
+            <Tag color="blue">里程报表交付旅程</Tag>
+            <Tag color={mileageDeliveryColor}>{mileageDeliveryState}</Tag>
+            <Tag color={publishAuditColor}>{publishAuditConclusion}</Tag>
+          </Space>
+          <Typography.Title heading={5} style={{ margin: 0 }}>
+            按客户报表习惯组织：先确认报表周期和车辆范围，再检查区间闭合、轨迹证明，最后导出或暂缓发布。
+          </Typography.Title>
+          <Typography.Text type="secondary">
+            报表交付不再从协议解释开始，而是围绕车辆、时间、里程闭合和可导出证据完成客户复核。
+          </Typography.Text>
+          <Button size="small" theme="solid" type="primary" onClick={copyMileageReportJourneyPackage}>
+            复制报表旅程包
+          </Button>
+        </div>
+        <div className="vp-mileage-report-journey-steps">
+          {mileageReportJourneyItems.map((item) => (
+            <button
+              key={item.step}
+              type="button"
+              className="vp-mileage-report-journey-step"
+              disabled={item.disabled}
+              onClick={item.onClick}
+              aria-label={`里程报表交付旅程 ${item.step} ${item.title} ${item.value}`}
+            >
+              <Tag color={item.color}>{item.step}</Tag>
+              <strong>{item.title}</strong>
+              <span>{item.value}</span>
+              <small>{item.detail}</small>
+            </button>
+          ))}
+        </div>
+      </section>
       <section className="vp-mileage-conclusion-strip" aria-label="客户里程结论条">
         <div className="vp-mileage-conclusion-copy">
           <Space wrap>

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

@@ -10206,6 +10206,80 @@ button.vp-realtime-command-item:focus-visible {
   align-self: end;
 }
 
+.vp-mileage-report-journey {
+  margin-top: 16px;
+  border: 1px solid rgba(22, 100, 255, 0.18);
+  border-radius: var(--vp-radius);
+  background: #f8fbff;
+  display: grid;
+  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
+  gap: 14px;
+  padding: 16px;
+}
+
+.vp-mileage-report-journey-copy {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+}
+
+.vp-mileage-report-journey-copy .semi-button {
+  width: fit-content;
+}
+
+.vp-mileage-report-journey-steps {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-mileage-report-journey-step {
+  min-height: 138px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+}
+
+.vp-mileage-report-journey-step:hover,
+.vp-mileage-report-journey-step:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.vp-mileage-report-journey-step:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+  box-shadow: none;
+  transform: none;
+}
+
+.vp-mileage-report-journey-step strong {
+  color: var(--vp-text);
+  font-size: 17px;
+  line-height: 23px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-mileage-report-journey-step span,
+.vp-mileage-report-journey-step small {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
 .vp-mileage-customer-query-board {
   margin-top: 16px;
   overflow: hidden;

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

@@ -9900,6 +9900,13 @@ test('shows vehicle-first statistics domains for one vehicle service', async ()
   expect(await screen.findByText('客户统计查询')).toBeInTheDocument();
   expect(screen.getByText('客户里程对账总控')).toBeInTheDocument();
   expect(screen.getByText('把区间里程、每日闭合、轨迹证明、异常通知和报表导出收敛成客户可验收的对账链路。')).toBeInTheDocument();
+  expect(screen.getByText('里程报表交付旅程')).toBeInTheDocument();
+  expect(screen.getByText('按客户报表习惯组织：先确认报表周期和车辆范围，再检查区间闭合、轨迹证明，最后导出或暂缓发布。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '里程报表交付旅程 1 报表周期 全部日期' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '里程报表交付旅程 2 区间闭合 分页抽样' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '里程报表交付旅程 3 轨迹证明 粤A统计服务2' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '里程报表交付旅程 4 导出发布 复核后交付' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /复制报表旅程包/ })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '客户里程对账总控 区间里程 210 km 复制摘要' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '客户里程对账总控 每日闭合 分页抽样 闭合审计' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '客户里程对账总控 轨迹证明 2026-07-02 轨迹复核' })).toBeInTheDocument();
@@ -10038,6 +10045,13 @@ test('shows vehicle-first statistics domains for one vehicle service', async ()
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('区间里程：210 km'));
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('闭合状态：分页抽样'));
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('报表导出：http://localhost:3000/#/mileage?keyword=VIN-STATS-SERVICE&protocol=JT808'));
+  fireEvent.click(screen.getByRole('button', { name: /复制报表旅程包/ }));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【里程报表交付旅程包】'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('报表周期：全部日期'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('车辆范围：VIN-STATS-SERVICE'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('区间闭合：分页抽样'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('轨迹证明：粤A统计服务2 / 2026-07-02 / 80 km'));
+  expect(writeText).toHaveBeenCalledWith(expect.stringContaining('导出发布：复核后交付 / 复核后发布'));
   fireEvent.click(screen.getAllByRole('button', { name: '复制决策说明' })[0]);
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户里程决策说明】'));
   expect(writeText).toHaveBeenCalledWith(expect.stringContaining('决策结论：复核后交付'));