From 46a1b8c3a834bac4cedb9bcd192b9b50a3b87572 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sun, 5 Jul 2026 13:42:25 +0800
Subject: [PATCH] feat(platform): prioritize fleet monitoring dashboard

---
 .../apps/web/src/pages/Dashboard.tsx          | 116 +++------
 .../apps/web/src/styles/global.css            | 242 ++++++++++++++++++
 .../apps/web/src/test/App.test.tsx            |  20 +-
 3 files changed, 287 insertions(+), 91 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
index 38765e8d..cdfeaab2 100644
--- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx
@@ -1408,28 +1408,28 @@ export function Dashboard({
     <div className="vp-page">
       <PageHeader title="车辆服务工作台" description="面向客户的车辆地图、实时监控、轨迹回放、里程统计、自定义时间监控、历史查询、告警通知和数据导出" />
       <Spin spinning={loading}>
-        <Card bordered className="vp-customer-cockpit" bodyStyle={{ padding: 0 }}>
-          <div className="vp-customer-cockpit-main">
-            <div className="vp-customer-cockpit-copy">
+        <Card bordered className="vp-fleet-monitor" bodyStyle={{ padding: 0 }}>
+          <div className="vp-fleet-monitor-map">
+            <div className="vp-fleet-monitor-copy">
               <Space wrap>
-                <Tag color="blue">客户车辆监控中心</Tag>
-                <Tag color="green">按车服务</Tag>
+                <Tag color="blue">车辆监控中心</Tag>
+                <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
                 <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警车辆</Tag>
               </Space>
-              <Typography.Title heading={3} style={{ margin: 0 }}>客户只需要回答：车在哪、跑了多少、发生了什么</Typography.Title>
+              <Typography.Title heading={3} style={{ margin: 0 }}>先看车在哪里，再处理轨迹、里程、告警和导出</Typography.Title>
               <Typography.Text type="secondary">
-                32960、808、宇通 MQTT 都只是车辆数据来源。产品主线围绕车辆本身提供实时地图、轨迹回放、里程统计、时间窗监控、历史查询、告警通知和数据导出。
+                32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身：地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。
               </Typography.Text>
-              <Space wrap>
-                <Button theme="solid" type="primary" onClick={() => onOpenMap({ online: 'online' })}>打开车辆地图</Button>
-                <Button theme="light" type="primary" onClick={openTimeMonitorHistory}>时间窗复盘</Button>
-                <Button theme="light" type="primary" onClick={openTimeMonitorRaw}>导出历史数据</Button>
-                <Button theme="light" onClick={copyCustomerServiceGuide}>复制客户说明</Button>
-              </Space>
             </div>
-            <div className="vp-customer-cockpit-metrics">
+            <VehicleMap
+              points={commandMapPoints}
+              maxFallbackPoints={120}
+              heightClassName="vp-fleet-monitor-map-canvas"
+              fallbackLabel="显示车辆实时坐标预览"
+            />
+            <div className="vp-fleet-monitor-stats">
               {customerCockpitMetrics.map((item) => (
-                <button key={item.label} type="button" className="vp-customer-cockpit-metric" onClick={item.onClick} aria-label={`客户车辆监控 ${item.label} ${item.value}`}>
+                <button key={item.label} type="button" className="vp-fleet-monitor-stat" onClick={item.onClick} aria-label={`车辆监控指标 ${item.label} ${item.value}`}>
                   <Tag color={item.color}>{item.label}</Tag>
                   <strong>{item.value}</strong>
                   <span>{item.detail}</span>
@@ -1437,10 +1437,14 @@ export function Dashboard({
               ))}
             </div>
           </div>
-          <div className="vp-customer-cockpit-rail">
-            <div className="vp-customer-cockpit-workflows">
+          <div className="vp-fleet-monitor-panel">
+            <div className="vp-fleet-monitor-panel-head">
+              <Typography.Text strong>客户工作流</Typography.Text>
+              <Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
+            </div>
+            <div className="vp-fleet-monitor-actions">
               {customerCockpitWorkflows.map((item) => (
-                <button key={item.title} type="button" className="vp-customer-cockpit-workflow" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
+                <button key={item.title} type="button" className="vp-fleet-monitor-action" onClick={item.onClick} aria-label={`客户车辆工作流 ${item.title} ${item.action}`}>
                   <span>{item.title}</span>
                   <strong>{item.action}</strong>
                   <small>{item.description}</small>
@@ -1448,9 +1452,22 @@ export function Dashboard({
                 </button>
               ))}
             </div>
-            <div className="vp-customer-cockpit-trust">
+            <div className="vp-fleet-monitor-time">
+              <Space wrap>
+                <Tag color="blue">自定义时间窗</Tag>
+                <Tag color={timeMonitorScope().keyword ? 'green' : 'grey'}>{timeMonitorScope().keyword ? '单车' : '全域'}</Tag>
+              </Space>
+              <strong>{timeMonitorSummary}</strong>
+              <span>同一时间窗会同步用于轨迹回放、区间里程、历史查询和告警复盘。</span>
+              <Space wrap>
+                <Button size="small" theme="solid" type="primary" onClick={openTimeMonitorHistory}>轨迹回放</Button>
+                <Button size="small" theme="light" type="primary" onClick={openTimeMonitorMileage}>里程统计</Button>
+                <Button size="small" theme="light" type="primary" onClick={openTimeMonitorRaw}>数据导出</Button>
+              </Space>
+            </div>
+            <div className="vp-fleet-monitor-trust">
               {customerTrustSignals.map((item) => (
-                <div key={item.label} className="vp-customer-cockpit-trust-item">
+                <div key={item.label} className="vp-fleet-monitor-trust-item">
                   <span>{item.label}</span>
                   <strong>{item.value}</strong>
                   <small>{item.detail}</small>
@@ -1459,65 +1476,6 @@ export function Dashboard({
             </div>
           </div>
         </Card>
-        <Card bordered className="vp-customer-hero" bodyStyle={{ padding: 0 }}>
-          <div className="vp-customer-hero-map">
-            <div className="vp-customer-hero-copy">
-              <Space wrap>
-                <Tag color="blue">客户工作台</Tag>
-                <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '地图可用' : '地图待配置'}</Tag>
-                <Tag color={(summary?.issueVehicles ?? 0) > 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警车辆</Tag>
-              </Space>
-              <Typography.Title heading={3} style={{ margin: 0 }}>先看车在哪里，再看车发生了什么</Typography.Title>
-              <Typography.Text type="secondary">
-                平台已把多路接入数据归并为同一套车辆服务。客户每天要直接完成车辆地图监控、轨迹回放、里程统计、时间窗复盘、告警闭环和数据导出。
-              </Typography.Text>
-              <Space wrap>
-                <Button theme="solid" type="primary" onClick={() => onOpenMap({ online: 'online' })}>打开实时地图</Button>
-                <Button theme="light" type="primary" onClick={() => onOpenHistory()}>轨迹回放</Button>
-                <Button theme="light" type="primary" onClick={() => onOpenMileage({})}>里程统计</Button>
-                <Button theme="light" type="primary" onClick={openTimeMonitorRaw}>历史数据</Button>
-                <Button theme="light" onClick={copyCustomerServiceGuide}>复制客户说明</Button>
-              </Space>
-            </div>
-            <VehicleMap
-              points={commandMapPoints}
-              maxFallbackPoints={80}
-              heightClassName="vp-customer-hero-map-canvas"
-              fallbackLabel="显示车辆实时坐标预览"
-            />
-          </div>
-          <div className="vp-customer-hero-side">
-            <div className="vp-customer-hero-side-head">
-              <Typography.Text strong>车辆服务路径</Typography.Text>
-              <Button size="small" theme="light" type="primary" onClick={copyCustomerServiceGuide}>复制说明</Button>
-            </div>
-            <div className="vp-customer-journey">
-              {customerJourneySteps.map((item) => (
-                <button
-                  key={item.step}
-                  type="button"
-                  className="vp-customer-journey-item"
-                  onClick={item.onClick}
-                  aria-label={`车辆服务路径 ${item.title} ${item.action}`}
-                >
-                  <span>{item.step}</span>
-                  <strong>{item.title}</strong>
-                  <em>{item.action}</em>
-                  <small>{item.detail}</small>
-                </button>
-              ))}
-            </div>
-            <div className="vp-customer-health-grid">
-              {customerHealthItems.map((item) => (
-                <button key={item.label} type="button" className="vp-customer-health-item" onClick={item.onClick} aria-label={`车辆运营 ${item.label} ${item.value}`}>
-                  <Tag color={item.color}>{item.label}</Tag>
-                  <strong>{item.value}</strong>
-                  <span>{item.detail}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-        </Card>
         <Card bordered title="车辆服务指挥台" style={{ marginBottom: 16 }}>
           <div className="vp-command-center-grid">
             {commandCenterItems.map((item) => (
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index 03975cb1..e27e9b2f 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -350,6 +350,221 @@ body {
   margin-top: 12px;
 }
 
+.vp-fleet-monitor {
+  margin-bottom: 16px;
+  overflow: hidden;
+  border-color: rgba(22, 100, 255, 0.18);
+}
+
+.vp-fleet-monitor .semi-card-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.68fr);
+  min-height: 560px;
+  background: #ffffff;
+}
+
+.vp-fleet-monitor-map {
+  position: relative;
+  min-width: 0;
+  min-height: 560px;
+  background: #eef5ff;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.vp-fleet-monitor-copy {
+  position: absolute;
+  z-index: 2;
+  left: 22px;
+  top: 22px;
+  max-width: 610px;
+  padding: 16px;
+  border: 1px solid rgba(22, 100, 255, 0.16);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
+  display: grid;
+  gap: 11px;
+}
+
+.vp-fleet-monitor-copy .semi-typography {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.vp-fleet-monitor-map-canvas {
+  min-height: 430px;
+  height: 430px;
+}
+
+.vp-fleet-monitor-stats {
+  min-height: 130px;
+  padding: 14px;
+  border-top: 1px solid rgba(22, 100, 255, 0.14);
+  background: #ffffff;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-fleet-monitor-stat {
+  min-height: 102px;
+  padding: 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.vp-fleet-monitor-stat:hover,
+.vp-fleet-monitor-stat:focus-visible,
+.vp-fleet-monitor-action:hover,
+.vp-fleet-monitor-action:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  outline: none;
+}
+
+.vp-fleet-monitor-stat strong {
+  color: var(--vp-text);
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 700;
+}
+
+.vp-fleet-monitor-stat span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-fleet-monitor-panel {
+  min-width: 0;
+  padding: 18px;
+  border-left: 1px solid var(--vp-border);
+  background: #f8fbff;
+  display: grid;
+  gap: 14px;
+  align-content: start;
+}
+
+.vp-fleet-monitor-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.vp-fleet-monitor-actions {
+  display: grid;
+  gap: 8px;
+}
+
+.vp-fleet-monitor-action {
+  min-height: 70px;
+  padding: 11px 12px;
+  border: 1px solid rgba(22, 100, 255, 0.14);
+  border-radius: var(--vp-radius);
+  background: #ffffff;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  display: grid;
+  grid-template-columns: 72px 78px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+}
+
+.vp-fleet-monitor-action span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.vp-fleet-monitor-action strong {
+  color: var(--vp-primary);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.vp-fleet-monitor-action small {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-fleet-monitor-action em {
+  grid-column: 1 / -1;
+  color: var(--vp-text);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.vp-fleet-monitor-time {
+  padding: 12px;
+  border: 1px solid rgba(0, 164, 184, 0.22);
+  border-radius: var(--vp-radius);
+  background: #f3fbfc;
+  display: grid;
+  gap: 9px;
+}
+
+.vp-fleet-monitor-time strong {
+  color: var(--vp-text);
+  font-size: 15px;
+  line-height: 22px;
+  word-break: break-word;
+}
+
+.vp-fleet-monitor-time span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-fleet-monitor-trust {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.vp-fleet-monitor-trust-item {
+  min-height: 92px;
+  padding: 10px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #ffffff;
+  display: grid;
+  gap: 5px;
+  align-content: start;
+}
+
+.vp-fleet-monitor-trust-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-fleet-monitor-trust-item strong {
+  color: var(--vp-text);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.vp-fleet-monitor-trust-item small {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 17px;
+}
+
 .vp-customer-cockpit {
   margin-bottom: 16px;
   overflow: hidden;
@@ -5394,6 +5609,9 @@ button.vp-realtime-command-item:focus-visible {
 @media (max-width: 900px) {
   .vp-evidence-grid,
   .vp-action-grid,
+  .vp-fleet-monitor .semi-card-body,
+  .vp-fleet-monitor-stats,
+  .vp-fleet-monitor-trust,
   .vp-vehicle-live-view .semi-card-body,
   .vp-vehicle-live-main,
   .vp-vehicle-live-facts,
@@ -5540,6 +5758,30 @@ button.vp-realtime-command-item:focus-visible {
     height: 460px;
   }
 
+  .vp-fleet-monitor-map {
+    min-height: 0;
+  }
+
+  .vp-fleet-monitor-copy {
+    position: static;
+    max-width: none;
+    margin: 14px;
+  }
+
+  .vp-fleet-monitor-map-canvas {
+    min-height: 320px;
+    height: 320px;
+  }
+
+  .vp-fleet-monitor-panel {
+    border-left: 0;
+    border-top: 1px solid var(--vp-border);
+  }
+
+  .vp-fleet-monitor-action {
+    grid-template-columns: 1fr;
+  }
+
   .vp-stat-closure-action {
     align-items: flex-start;
     flex-direction: column;
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 85d1aaf1..f09fdde0 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -797,16 +797,18 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
 
   await renderDashboard();
   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.getByText('32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身：地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆监控指标 车辆总数 1,033' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '车辆监控指标 在线车辆 208' })).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.getByText('来源只作为可信度证据，不作为客户主导航。')).toBeInTheDocument();
-  expect(screen.getByText('先看车在哪里，再看车发生了什么')).toBeInTheDocument();
+  expect(screen.getByText('同一时间窗会同步用于轨迹回放、区间里程、历史查询和告警复盘。')).toBeInTheDocument();
   expect(screen.getByText('车辆服务指挥台')).toBeInTheDocument();
   expect(screen.getByText('全域车辆监控')).toBeInTheDocument();
   expect(screen.getByText('异常车辆闭环')).toBeInTheDocument();
@@ -819,12 +821,6 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
   expect(screen.getByText('客户常用服务')).toBeInTheDocument();
   expect(screen.getAllByText('车辆地图').length).toBeGreaterThanOrEqual(1);
   expect(screen.getAllByText('历史数据').length).toBeGreaterThanOrEqual(1);
-  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.getByText('今日车辆服务任务板')).toBeInTheDocument();
   expect(screen.getByText('先看全域在线')).toBeInTheDocument();
   expect(screen.getByText('再看重点车辆')).toBeInTheDocument();
@@ -843,7 +839,7 @@ test('dashboard exposes vehicle data center capability matrix', async () => {
   expect(screen.getByText('闭环异常')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '车辆服务入口 找车 车辆中心' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '车辆服务入口 看位置 实时地图' })).toBeInTheDocument();
-  expect(screen.getByRole('button', { name: '复制客户服务说明' })).toBeInTheDocument();
+  expect(screen.getAllByRole('button', { name: '复制客户服务说明' }).length).toBeGreaterThanOrEqual(1);
   expect(screen.getByText('自定义时间监控')).toBeInTheDocument();
   expect(screen.getByText('应用时间窗')).toBeInTheDocument();
   expect(screen.getByText('重置最近一天')).toBeInTheDocument();
@@ -1293,7 +1289,7 @@ test('dashboard shows vehicle service action queue', async () => {
 
 test.each([
   { buttonName: '查看在线车辆', expectedHash: '#/vehicles?online=online' },
-  { buttonName: '打开实时地图', expectedHash: '#/map?online=online' },
+  { buttonName: '客户车辆工作流 实时看车 实时地图', expectedHash: '#/map?online=online' },
   { buttonName: '顶部告警事件', expectedHash: '#/alert-events' }
 ])('dashboard posture opens %s', async ({ buttonName, expectedHash }) => {
   window.history.replaceState(null, '', '/#/dashboard');