feat(platform): add history customer question flow

2026-07-05 16:00:29 +08:00
parent 12aef4461a
commit 0f6b47e97e
3 changed files with 150 additions and 0 deletions
--- a/vehicle-data-platform/apps/web/src/pages/History.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/History.tsx
@@ -1044,6 +1044,44 @@ export function History({
      onClick: () => copyScheduledHistoryReportPlan()
    }
  ];
+  const customerHistoryQuestions = [
+    {
+      question: '这辆车这段时间在哪里？',
+      answer: validLocations.length > 0 ? `${validLocations.length.toLocaleString()} 个有效轨迹点` : '先查询位置历史',
+      evidence: `${filters.dateFrom || '-'} 至 ${filters.dateTo || '-'}`,
+      action: '轨迹回放',
+      color: validLocations.length > 0 ? 'green' as const : 'orange' as const,
+      disabled: false,
+      onClick: () => openQueryTab('location')
+    },
+    {
+      question: '这段时间跑了多少公里？',
+      answer: formatNumber(mileageDelta, ' km'),
+      evidence: `最高速度 ${formatNumber(maxSpeed, ' km/h')}`,
+      action: '统计查询',
+      color: isFiniteNumber(mileageDelta) ? 'green' as const : 'grey' as const,
+      disabled: !onOpenMileage,
+      onClick: () => onOpenMileage?.({ keyword: currentVehicleKeyword, protocol: currentProtocol, ...(filters.dateFrom ? { dateFrom: filters.dateFrom } : {}), ...(filters.dateTo ? { dateTo: filters.dateTo } : {}) })
+    },
+    {
+      question: '为什么定位或里程不连续？',
+      answer: anomalyTotal > 0 ? `${anomalyTotal.toLocaleString()} 项需复核` : '当前页无明显异常',
+      evidence: `断点 ${trajectoryAnomalies.gapCount.toLocaleString()} / 里程回退 ${trajectoryAnomalies.mileageRollbackCount.toLocaleString()} / 超速 ${trajectoryAnomalies.overspeedCount.toLocaleString()}`,
+      action: '复核证据',
+      color: anomalyTotal > 0 ? 'orange' as const : 'green' as const,
+      disabled: false,
+      onClick: () => copyTrajectoryDecision()
+    },
+    {
+      question: '明细能导出给客户吗？',
+      answer: deliveryState,
+      evidence: `位置 ${locations.total.toLocaleString()} / 明细 ${(rawFrames.total ?? 0).toLocaleString()} / 字段 ${rawFieldRows.length.toLocaleString()}`,
+      action: '导出交付包',
+      color: deliveryStateColor,
+      disabled: false,
+      onClick: () => copyDeliveryPackage()
+    }
+  ];
  const clearRangeFilters = () => {
    applyFilters(currentVehicleKeyword ? { keyword: currentVehicleKeyword } : {});
  };
@@ -1456,6 +1494,40 @@ export function History({
          </div>
        </Card>
      ) : null}
+      {mode === 'query' ? (
+        <Card bordered title="客户历史问题" style={{ marginTop: 16 }}>
+          <div className="vp-history-question-board">
+            <div className="vp-history-question-summary">
+              <Space wrap>
+                <Tag color="blue">客户问题</Tag>
+                <Tag color={deliveryStateColor}>{deliveryState}</Tag>
+                <Tag color={currentVehicleKeyword ? 'green' : 'orange'}>{currentVehicleKeyword ? '单车范围' : '全部车辆'}</Tag>
+              </Space>
+              <Typography.Title heading={5} style={{ margin: 0 }}>用客户语言回答路线、里程、异常和导出问题</Typography.Title>
+              <Typography.Text type="secondary">
+                查询页不要求客户理解协议和字段表，先把问题转成轨迹、统计、证据和交付包，再进入对应明细。
+              </Typography.Text>
+            </div>
+            <div className="vp-history-question-grid">
+              {customerHistoryQuestions.map((item) => (
+                <button
+                  key={item.question}
+                  type="button"
+                  className="vp-history-question-item"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`客户历史问题 ${item.question} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.question}</Tag>
+                  <strong>{item.answer}</strong>
+                  <span>{item.evidence}</span>
+                  <em>{item.action}</em>
+                </button>
+              ))}
+            </div>
+          </div>
+        </Card>
+      ) : null}
      <Card bordered className="vp-trip-workbench" bodyStyle={{ padding: 0 }}>
        <div className="vp-trip-workbench-map">
          <div className="vp-trip-workbench-copy">
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -5063,6 +5063,76 @@ button.vp-realtime-command-item:focus-visible {
  font-weight: 700;
 }

+.vp-history-question-board {
+  display: grid;
+  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
+  gap: 14px;
+}
+
+.vp-history-question-summary {
+  padding: 14px;
+  border: 1px solid rgba(22, 100, 255, 0.18);
+  border-radius: var(--vp-radius);
+  background: #f7faff;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.vp-history-question-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-history-question-item {
+  min-height: 150px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+  color: inherit;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-history-question-item:hover,
+.vp-history-question-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  box-shadow: 0 10px 24px rgba(24, 39, 75, 0.08);
+  outline: none;
+}
+
+.vp-history-question-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.vp-history-question-item strong {
+  color: var(--vp-text);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-history-question-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-history-question-item em {
+  color: var(--vp-primary);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+}
+
 .vp-history-query-workbench {
  display: grid;
  grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr);
@@ -6663,6 +6733,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-history-customer-export-steps,
  .vp-history-report-templates,
  .vp-history-report-template-grid,
+  .vp-history-question-board,
+  .vp-history-question-grid,
  .vp-history-query-workbench,
  .vp-history-query-grid,
  .vp-history-package-board,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -6552,6 +6552,12 @@ test('shows parsed field history as a flattened evidence table', async () => {
  expect(screen.getByText('报表交付模板')).toBeInTheDocument();
  expect(screen.getByText('按客户问题选择导出模板')).toBeInTheDocument();
  expect(screen.getByText('车队报表不只是下载 CSV：先选择用途，再生成轨迹报告、明细证据包、字段裁剪包或周期交付计划。')).toBeInTheDocument();
+  expect(screen.getByText('客户历史问题')).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.getByRole('button', { name: '报表交付模板 字段裁剪包 字段配置' })).toBeInTheDocument();