From f068fc772dd4de7acc23902748008dfc06f7f79f Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Mon, 6 Jul 2026 04:24:18 +0800
Subject: [PATCH] feat(platform): surface customer next best actions

---
 .../apps/web/src/pages/Dashboard.tsx          | 24 ++++++
 .../apps/web/src/styles/global.css            | 82 ++++++++++++++++++
 .../apps/web/src/test/App.test.tsx            | 83 +++++++++++++++++++
 3 files changed, 189 insertions(+)

diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
index facf614b..01fd6e39 100644
--- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
@@ -2729,6 +2729,30 @@ export function Dashboard({
                 </button>
               ))}
             </div>
+            <div className="vp-customer-service-next" aria-label="建议下一步">
+              <div className="vp-customer-service-next-copy">
+                <Typography.Text strong>建议下一步</Typography.Text>
+                <Typography.Text type="secondary">
+                  根据当前告警、车辆在线和时间窗状态，优先给客户一个明确行动。
+                </Typography.Text>
+              </div>
+              <div className="vp-customer-service-next-grid">
+                {customerNextActions.map((item) => (
+                  <button
+                    key={`${item.level}-${item.title}`}
+                    type="button"
+                    className="vp-customer-service-next-item"
+                    onClick={item.onClick}
+                    aria-label={`建议下一步 ${item.level} ${item.title} ${item.action}`}
+                  >
+                    <Tag color={item.color}>{item.level}</Tag>
+                    <strong>{item.title}</strong>
+                    <span>{item.detail}</span>
+                    <em>{item.action}</em>
+                  </button>
+                ))}
+              </div>
+            </div>
           </section>
         ) : null}
         {focusMode === 'time-window' ? (
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index a2597179..e73c9a73 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -1311,6 +1311,85 @@ body {
   line-height: 18px;
 }
 
+.vp-customer-service-next {
+  grid-column: 1 / -1;
+  border-top: 1px solid var(--vp-border);
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
+}
+
+.vp-customer-service-next-copy {
+  min-width: 0;
+  padding: 14px 18px;
+  border-right: 1px solid var(--vp-border);
+  display: grid;
+  gap: 4px;
+  align-content: center;
+}
+
+.vp-customer-service-next-copy .semi-typography-secondary {
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-customer-service-next-grid {
+  min-width: 0;
+  padding: 12px 14px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-customer-service-next-item {
+  min-width: 0;
+  min-height: 116px;
+  padding: 10px 12px;
+  border: 1px solid rgba(22, 100, 255, 0.14);
+  border-radius: 8px;
+  background: #fbfcff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  gap: 7px;
+  align-content: start;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.vp-customer-service-next-item:hover,
+.vp-customer-service-next-item:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.08);
+  outline: none;
+}
+
+.vp-customer-service-next-item strong {
+  color: var(--vp-text);
+  font-size: 15px;
+  line-height: 21px;
+  font-weight: 800;
+  word-break: break-word;
+}
+
+.vp-customer-service-next-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
+.vp-customer-service-next-item em {
+  align-self: end;
+  color: var(--vp-primary);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 18px;
+}
+
 .vp-vehicle-priority-queue {
   padding: 12px;
   border: 1px solid rgba(255, 127, 0, 0.2);
@@ -14489,6 +14568,8 @@ button.vp-realtime-command-item:focus-visible {
   .vp-vehicle-question-grid,
   .vp-customer-service-path,
   .vp-customer-service-path-grid,
+  .vp-customer-service-next,
+  .vp-customer-service-next-grid,
   .vp-unified-service-board,
   .vp-unified-service-grid,
   .vp-service-dossier,
@@ -14867,6 +14948,7 @@ button.vp-realtime-command-item:focus-visible {
   .vp-time-next-action-copy,
   .vp-time-next-action-actions,
   .vp-customer-service-path-copy,
+  .vp-customer-service-next-copy,
   .vp-time-monitor-dedicated-copy,
   .vp-map-layer-control-copy,
   .vp-map-layer-control-actions,
diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx
index 6b950ee1..f6bfb9af 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -238,6 +238,89 @@ test('dashboard keeps advanced customer workbench collapsed behind the service p
   expect(within(details as HTMLElement).getByText('车辆地图态势')).toBeInTheDocument();
 });
 
+test('dashboard gives a customer next best action directly on the first screen', async () => {
+  window.history.replaceState(null, '', '/#/dashboard');
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/ops/health')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            linkHealth: [],
+            kafkaLag: 0,
+            activeConnections: 15,
+            redisOnlineKeys: 92,
+            tdengineWritable: true,
+            mysqlWritable: true,
+            runtime: { requestTimeoutMs: 5000, amapWebJsConfigured: true, amapSecurityProxyEnabled: true, amapSecurityCodeExposed: false }
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/dashboard/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            onlineVehicles: 92,
+            activeToday: 120,
+            frameToday: 21000,
+            issueVehicles: 7,
+            kafkaLag: 0,
+            protocols: [],
+            serviceStatuses: [],
+            linkHealth: []
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/vehicle-service/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            totalVehicles: 1033,
+            boundVehicles: 988,
+            onlineVehicles: 92,
+            singleSourceVehicles: 170,
+            multiSourceVehicles: 220,
+            noDataVehicles: 15,
+            identityRequiredVehicles: 9,
+            serviceStatuses: [],
+            protocols: [],
+            missingSources: []
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 8, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByRole('heading', { name: '客户车辆服务路径' })).toBeInTheDocument();
+  const nextActionRegion = screen.getByLabelText('建议下一步');
+  expect(within(nextActionRegion).getByText('建议下一步')).toBeInTheDocument();
+  expect(within(nextActionRegion).getByText('先处理告警车辆')).toBeInTheDocument();
+  expect(within(nextActionRegion).getByRole('button', { name: '建议下一步 优先 先处理告警车辆 进入告警' })).toBeInTheDocument();
+  expect(within(nextActionRegion).getByRole('button', { name: '建议下一步 范围 选择一辆车复盘 车辆中心' })).toBeInTheDocument();
+  expect(within(nextActionRegion).getByRole('button', { name: '建议下一步 时间窗 按同一范围交付数据 复制复盘包' })).toBeInTheDocument();
+});
+
 test('topbar frames customer work as a vehicle service delivery strip', () => {
   vi.spyOn(globalThis, 'fetch').mockImplementation(async () => ({
     ok: true,