feat(platform): add customer vehicle service journey

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

@@ -1334,6 +1334,53 @@ export function Dashboard({
       onClick: () => onOpenQuality()
     }
   ];
+  const customerServiceJourneySteps = [
+    {
+      step: '1',
+      title: '选车',
+      value: formatCount(serviceSummary?.totalVehicles),
+      detail: '先用 VIN、车牌、手机号或 OEM 锁定服务对象。',
+      action: '车辆中心',
+      color: 'blue' as const,
+      onClick: () => onOpenVehicles({})
+    },
+    {
+      step: '2',
+      title: '实时看车',
+      value: `${formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles)} 在线`,
+      detail: '打开地图看在线、坐标、最后上报和区域态势。',
+      action: '实时地图',
+      color: 'green' as const,
+      onClick: () => onOpenMap({ online: 'online' })
+    },
+    {
+      step: '3',
+      title: '锁定时间窗',
+      value: dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo),
+      detail: '同一范围同步带入轨迹、统计、历史导出和告警。',
+      action: '自定义时间',
+      color: 'blue' as const,
+      onClick: openTimeMonitorHistory
+    },
+    {
+      step: '4',
+      title: '复盘统计',
+      value: `${formatCount(summary?.activeToday)} 活跃`,
+      detail: '用轨迹、位置历史和里程统计回答这段时间发生了什么。',
+      action: '轨迹统计',
+      color: 'blue' as const,
+      onClick: openTimeMonitorMileage
+    },
+    {
+      step: '5',
+      title: '交付闭环',
+      value: `${formatCount(summary?.issueVehicles)} 告警`,
+      detail: '导出证据数据，并把异常车辆推到告警通知闭环。',
+      action: '导出通知',
+      color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const,
+      onClick: openTimeMonitorRaw
+    }
+  ];
   const copyCustomerServiceGuide = () => {
     const scope = timeMonitorScope();
     const rawFilters = { ...scope, tab: 'raw', includeFields: 'true' };
@@ -1861,6 +1908,31 @@ export function Dashboard({
     <div className="vp-page">
       <PageHeader title="车辆服务工作台" description="面向客户的车辆地图、实时监控、轨迹回放、统计查询、自定义时间窗复盘、历史查询、告警通知和数据导出" />
       <Spin spinning={loading}>
+        <section className="vp-customer-service-journey" aria-label="车辆服务闭环">
+          <div className="vp-customer-service-journey-copy">
+            <Tag color="blue">车辆服务闭环</Tag>
+            <Typography.Title heading={5} style={{ margin: 0 }}>客户从首页开始，只需要按这五步完成找车、看车、复盘、统计、导出和通知。</Typography.Title>
+          </div>
+          <div className="vp-customer-service-journey-steps">
+            {customerServiceJourneySteps.map((item) => (
+              <button
+                key={item.step}
+                type="button"
+                className="vp-customer-service-journey-step"
+                onClick={item.onClick}
+                aria-label={`车辆服务闭环 ${item.step} ${item.title} ${item.value} ${item.action}`}
+              >
+                <span>{item.step}</span>
+                <div>
+                  <strong>{item.title}</strong>
+                  <small>{item.value}</small>
+                  <em>{item.detail}</em>
+                </div>
+                <Tag color={item.color}>{item.action}</Tag>
+              </button>
+            ))}
+          </div>
+        </section>
         <section className="vp-customer-service-command" aria-label="客户车辆服务总控台">
           <div className="vp-customer-service-command-main">
             <div className="vp-customer-service-command-copy">

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

@@ -1248,6 +1248,108 @@ body {
   overflow: hidden;
 }
 
+.vp-customer-service-journey {
+  margin-bottom: 16px;
+  padding: 14px;
+  border: 1px solid rgba(22, 100, 255, 0.16);
+  border-radius: 8px;
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1.58fr);
+  gap: 14px;
+  align-items: stretch;
+}
+
+.vp-customer-service-journey-copy {
+  min-width: 0;
+  display: grid;
+  align-content: center;
+  gap: 8px;
+}
+
+.vp-customer-service-journey-copy .semi-typography {
+  color: var(--vp-text);
+  line-height: 24px;
+}
+
+.vp-customer-service-journey-steps {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.vp-customer-service-journey-step {
+  min-width: 0;
+  min-height: 96px;
+  padding: 10px;
+  border: 1px solid var(--vp-border);
+  border-radius: 8px;
+  background: #fbfcff;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  column-gap: 8px;
+  row-gap: 8px;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
+}
+
+.vp-customer-service-journey-step:hover,
+.vp-customer-service-journey-step: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-journey-step > span {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background: #eaf3ff;
+  color: var(--vp-primary);
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 24px;
+  text-align: center;
+}
+
+.vp-customer-service-journey-step > div {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+
+.vp-customer-service-journey-step strong {
+  color: var(--vp-text);
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 800;
+}
+
+.vp-customer-service-journey-step small {
+  color: var(--vp-text);
+  font-size: 15px;
+  line-height: 20px;
+  font-weight: 700;
+}
+
+.vp-customer-service-journey-step em {
+  color: var(--vp-text-muted);
+  font-size: 11px;
+  font-style: normal;
+  line-height: 16px;
+}
+
+.vp-customer-service-journey-step .semi-tag {
+  grid-column: 2;
+  justify-self: start;
+}
+
 .vp-customer-service-command-main {
   padding: 18px;
   border-bottom: 1px solid var(--vp-border);

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

@@ -702,6 +702,13 @@ test('dashboard prioritizes customer vehicle service command over data sources',
 
   render(<App />);
 
+  expect(await screen.findByText('车辆服务闭环')).toBeInTheDocument();
+  expect(screen.getByText('客户从首页开始，只需要按这五步完成找车、看车、复盘、统计、导出和通知。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆服务闭环 1 选车 1,033 车辆中心' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆服务闭环 2 实时看车 208 在线 实时地图' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆服务闭环 3 锁定时间窗 1 天窗口 自定义时间' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆服务闭环 4 复盘统计 4 活跃 轨迹统计' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆服务闭环 5 交付闭环 7 告警 导出通知' })).toBeInTheDocument();
   expect(await screen.findByText('客户车辆服务总控台')).toBeInTheDocument();
   expect(screen.getByText('三个接入来源统一沉到证据层，首页只回答客户怎么监控车辆、回放轨迹、核对里程、导出数据和处理告警。')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '客户车辆服务总控台 实时地图 208 在线 进入地图' })).toBeInTheDocument();