feat(platform): clarify customer service entry

2026-07-05 03:29:53 +08:00
parent 3097fd59eb
commit 5cb2509457
4 changed files with 181 additions and 20 deletions
--- a/vehicle-data-platform/apps/web/src/App.tsx
+++ b/vehicle-data-platform/apps/web/src/App.tsx
@@ -429,9 +429,6 @@ export default function App() {
    const nextFilters = normalizeMileageFilterValues(filters);
    const nextVin = nextFilters.keyword?.trim() || analysisVin;
    const nextProtocol = nextFilters.protocol?.trim() ?? activeProtocol;
-    if (!nextVin) {
-      return;
-    }
    setAnalysisVin(nextVin);
    setActiveProtocol(nextProtocol);
    setMileageFilters({ ...nextFilters, keyword: nextVin, protocol: nextProtocol });
--- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
@@ -1215,6 +1215,73 @@ export function Dashboard({
      onSecondary: () => exportDashboardSnapshot()
    }
  ];
+  const customerServicePathItems = [
+    {
+      title: '找车',
+      value: formatCount(serviceSummary?.totalVehicles),
+      detail: '按 VIN、车牌、手机号或 OEM 进入车辆服务，协议来源只作为证据。',
+      action: '车辆中心',
+      color: 'blue' as const,
+      onClick: () => onOpenVehicles({})
+    },
+    {
+      title: '看位置',
+      value: `${commandLocatedCount.toLocaleString()} 有定位`,
+      detail: '优先打开实时地图，判断车辆是否在线、坐标是否有效、是否存在断链。',
+      action: '实时地图',
+      color: commandLocatedCount > 0 ? 'green' as const : 'orange' as const,
+      onClick: () => onOpenMap({ online: 'online' })
+    },
+    {
+      title: '复盘时间',
+      value: dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo),
+      detail: '同一个时间窗贯穿轨迹回放、里程统计、RAW 证据和告警复盘。',
+      action: '轨迹回放',
+      color: 'blue' as const,
+      onClick: openTimeMonitorHistory
+    },
+    {
+      title: '交付数据',
+      value: `${formatCount(summary?.frameToday)} 今日数据`,
+      detail: '按车辆、时间、字段裁剪导出位置历史、原始记录和字段明细。',
+      action: '数据导出',
+      color: 'blue' as const,
+      onClick: openTimeMonitorRaw
+    },
+    {
+      title: '闭环异常',
+      value: `${formatCount(summary?.issueVehicles)} 告警`,
+      detail: highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '暂无高优先级告警，保持日常巡检。',
+      action: '告警事件',
+      color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
+      onClick: () => onOpenQuality()
+    }
+  ];
+  const copyCustomerServiceGuide = () => {
+    const scope = timeMonitorScope();
+    const rawFilters = { ...scope, tab: 'raw', includeFields: 'true' };
+    const lines = [
+      '【车辆客户服务说明】',
+      '服务对象：车辆，不是协议数据源。',
+      `车辆规模：${formatCount(serviceSummary?.totalVehicles)}，在线车辆：${formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles)}，有效定位：${commandLocatedCount.toLocaleString()}`,
+      `当前时间窗：${timeMonitorSummary}（${dayRangeText(scope.dateFrom, scope.dateTo)}）`,
+      `告警车辆：${formatCount(summary?.issueVehicles)}，最高优先级：${highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '暂无'}`,
+      '',
+      '客户服务路径：',
+      '1. 找车：先按 VIN、车牌、手机号或 OEM 锁定车辆。',
+      '2. 看位置：打开实时地图确认车辆在线、坐标和最新上报。',
+      '3. 复盘时间：同一时间窗查看轨迹、里程和告警。',
+      '4. 交付数据：按车辆、时间、字段导出位置历史、RAW 和字段明细。',
+      '5. 闭环异常：告警事件进入通知和处置流程。',
+      `车辆中心：${appURL(buildAppHash({ page: 'vehicles' }))}`,
+      `实时地图：${appURL(buildAppHash({ page: 'map', filters: { online: 'online' } }))}`,
+      `轨迹回放：${appURL(buildAppHash({ page: 'history', keyword: scope.keyword, protocol: scope.protocol, filters: scope }))}`,
+      `里程统计：${appURL(buildAppHash({ page: 'mileage', keyword: scope.keyword, protocol: scope.protocol, filters: scope }))}`,
+      `数据导出：${appURL(buildAppHash({ page: 'history-query', keyword: scope.keyword, protocol: scope.protocol, filters: rawFilters }))}`,
+      `告警事件：${appURL(buildAppHash({ page: 'alert-events', keyword: scope.keyword, protocol: scope.protocol, filters: scope }))}`
+    ];
+    copyText(lines.join('\n'), '客户服务说明');
+  };

  return (
    <div className="vp-page">
@@ -1350,22 +1417,41 @@ export function Dashboard({
          ))}
        </div>
        <Card bordered title="车辆服务入口" style={{ marginBottom: 16 }}>
-          <Space wrap>
-            <Tag color="blue">{vehicleServiceOnlineText(serviceSummary, summary)}</Tag>
-            <Button size="small" theme="light" type="primary" onClick={() => onOpenVehicles({ online: 'online' })}>查看在线车辆</Button>
-            <Tag color="blue">有效定位 {commandLocatedCount.toLocaleString()}</Tag>
-            <Button size="small" theme="light" type="primary" onClick={() => onOpenMap({ online: 'online' })}>实时地图</Button>
-            <Tag color="blue">今日活跃 {formatCount(summary?.activeToday)}</Tag>
-            <Button size="small" theme="light" type="primary" onClick={() => onOpenHistory()}>轨迹回放</Button>
-            <Tag color="blue">今日数据 {formatCount(summary?.frameToday)}</Tag>
-            <Button size="small" theme="light" type="primary" onClick={() => onOpenHistory({ tab: 'raw', includeFields: 'true' })}>历史查询导出</Button>
-            <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>
-              {formatCount(summary?.issueVehicles)} 告警事件
-            </Tag>
-            <Button size="small" theme="light" type={(summary?.issueVehicles ?? 0) > 0 ? 'warning' : 'tertiary'} onClick={() => onOpenQuality()}>查看告警事件</Button>
-            <Button size="small" theme="solid" type="primary" onClick={copyOperationsHandoff}>复制运营交接摘要</Button>
-            <Button size="small" theme="light" type="primary" onClick={exportDashboardSnapshot}>导出驾驶舱 CSV</Button>
-          </Space>
+          <div className="vp-service-entry-board">
+            <div className="vp-service-entry-summary">
+              <Space wrap>
+                <Tag color="blue">客户服务路径</Tag>
+                <Tag color="green">{vehicleServiceOnlineText(serviceSummary, summary)}</Tag>
+                <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警事件</Tag>
+              </Space>
+              <Typography.Title heading={5} style={{ margin: 0 }}>从车辆出发，完成监控、复盘、统计、导出和告警闭环</Typography.Title>
+              <Typography.Text type="secondary">
+                客户看到的是车辆服务结果；32960、808、MQTT 只在需要追溯时作为证据通道出现。
+              </Typography.Text>
+              <Space wrap>
+                <Button size="small" theme="solid" type="primary" onClick={() => onOpenVehicles({ online: 'online' })}>查看在线车辆</Button>
+                <Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制客户服务说明</Button>
+                <Button size="small" theme="light" type="primary" onClick={exportDashboardSnapshot}>导出驾驶舱 CSV</Button>
+                <Button size="small" theme="light" type="tertiary" onClick={copyOperationsHandoff}>复制运营交接摘要</Button>
+              </Space>
+            </div>
+            <div className="vp-service-entry-grid">
+              {customerServicePathItems.map((item) => (
+                <button
+                  key={item.title}
+                  type="button"
+                  className="vp-service-entry-item"
+                  onClick={item.onClick}
+                  aria-label={`车辆服务入口 ${item.title} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.title}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                  <em>{item.action}</em>
+                </button>
+              ))}
+            </div>
+          </div>
        </Card>
        <Card
          bordered
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -503,6 +503,71 @@ body {
  line-height: 20px;
 }

+.vp-service-entry-board {
+  display: grid;
+  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
+  gap: 14px;
+}
+
+.vp-service-entry-summary {
+  min-height: 188px;
+  padding: 16px;
+  border: 1px solid rgba(10, 168, 107, 0.24);
+  border-radius: 8px;
+  background: #f5fbf8;
+  display: grid;
+  align-content: start;
+  gap: 12px;
+}
+
+.vp-service-entry-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.vp-service-entry-item {
+  min-height: 188px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: #fbfcff;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  align-content: start;
+  gap: 10px;
+}
+
+.vp-service-entry-item:hover,
+.vp-service-entry-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.45);
+  background: #f5f9ff;
+  outline: none;
+}
+
+.vp-service-entry-item strong {
+  color: var(--vp-text);
+  font-size: 20px;
+  line-height: 26px;
+  word-break: break-word;
+}
+
+.vp-service-entry-item span {
+  color: var(--vp-text-muted);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.vp-service-entry-item em {
+  align-self: end;
+  color: #1664ff;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+}
+
 .vp-time-monitor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -4097,6 +4162,8 @@ button.vp-realtime-command-item:focus-visible {
  .vp-time-monitor-grid,
  .vp-command-center-grid,
  .vp-customer-task-grid,
+  .vp-service-entry-board,
+  .vp-service-entry-grid,
  .vp-current-service-board,
  .vp-current-service-grid,
  .vp-vehicle-service-desk,
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -814,6 +814,17 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
  expect(screen.getByText('导出证据数据')).toBeInTheDocument();
  expect(screen.getByText('闭环告警通知')).toBeInTheDocument();
  expect(screen.getByText('车辆服务入口')).toBeInTheDocument();
+  expect(screen.getByText('客户服务路径')).toBeInTheDocument();
+  expect(screen.getByText('从车辆出发，完成监控、复盘、统计、导出和告警闭环')).toBeInTheDocument();
+  expect(screen.getByText('客户看到的是车辆服务结果；32960、808、MQTT 只在需要追溯时作为证据通道出现。')).toBeInTheDocument();
+  expect(screen.getByText('找车')).toBeInTheDocument();
+  expect(screen.getByText('看位置')).toBeInTheDocument();
+  expect(screen.getAllByText('复盘时间').length).toBeGreaterThanOrEqual(1);
+  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.getByText('自定义时间监控')).toBeInTheDocument();
  expect(screen.getByText('应用时间窗')).toBeInTheDocument();
  expect(screen.getByText('重置最近一天')).toBeInTheDocument();
@@ -821,7 +832,7 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
  expect(screen.getByText('客户时间窗复盘包')).toBeInTheDocument();
  expect(screen.getByText('客户问某辆车、某段时间发生了什么时，直接按这个时间窗串起轨迹、里程、历史数据、告警通知和地图定位。')).toBeInTheDocument();
  expect(screen.getByText('车辆范围')).toBeInTheDocument();
-  expect(screen.getByText('复盘时间')).toBeInTheDocument();
+  expect(screen.getAllByText('复盘时间').length).toBeGreaterThanOrEqual(1);
  expect(screen.getByText('统计证据')).toBeInTheDocument();
  expect(screen.getByText('时间窗服务核对')).toBeInTheDocument();
  expect(screen.getByText('交付给客户前，先确认范围、轨迹、导出和异常闭环四件事都能讲清楚。')).toBeInTheDocument();