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">