From 6d18e5a017638fb059d45eb0329b4d602bcd7ad8 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sun, 5 Jul 2026 23:55:27 +0800
Subject: [PATCH] feat(platform): add map shift console

---
 .../apps/web/src/pages/Realtime.tsx           | 80 +++++++++++++++++++
 .../apps/web/src/styles/global.css            | 78 ++++++++++++++++++
 .../apps/web/src/test/App.test.tsx            |  6 ++
 3 files changed, 164 insertions(+)

diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
index ad737317..e3523d95 100644
--- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx
@@ -1217,6 +1217,53 @@ export function Realtime({
       onClick: exportRealtime
     }
   ];
+  const mapShiftTimeWindowLabel = timeWindowDuration === '1 天窗口' ? '24 小时窗口' : timeWindowDuration;
+  const mapShiftConsoleItems = [
+    {
+      label: '今日态势',
+      value: `${onlineCount.toLocaleString()} 在线 / ${mapAttentionRows.length.toLocaleString()} 关注`,
+      detail: `当前页 ${rows.length.toLocaleString()} 辆，定位有效率 ${formatPercent(locatedRate)}。`,
+      action: '只看在线',
+      color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const,
+      disabled: false,
+      onClick: () => applyFilters({ ...filters, online: 'online' })
+    },
+    {
+      label: '优先车辆',
+      value: mapAttentionRows[0]?.plate || mapAttentionRows[0]?.vin || selectedVehicleLabel,
+      detail: mapAttentionRows[0] ? realtimeIssueLabels(mapAttentionRows[0]).join('；') : '当前没有必须优先处理的车辆。',
+      action: '处理关注',
+      color: mapAttentionRows.length > 0 ? 'orange' as const : selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const,
+      disabled: !mapAttentionRows[0] && !selectedMapRow,
+      onClick: () => {
+        if (mapAttentionRows[0]) {
+          selectRealtimeRow(mapAttentionRows[0]);
+          return;
+        }
+        if (selectedMapRow) {
+          selectRealtimeRow(selectedMapRow);
+        }
+      }
+    },
+    {
+      label: '时间窗复盘',
+      value: mapShiftTimeWindowLabel,
+      detail: timeWindowRow ? `${timeWindowRow.plate || timeWindowRow.vin} / ${timeWindowProtocol || '全部数据通道'}` : '先选择一辆车再复盘。',
+      action: '打开轨迹',
+      color: timeWindowReady ? 'blue' as const : 'orange' as const,
+      disabled: !timeWindowReady,
+      onClick: openTimeWindowHistory
+    },
+    {
+      label: '交接说明',
+      value: '可复制',
+      detail: mapAttentionRows.length > 0 ? '交接时先说明关注车辆和处理入口。' : '地图态势稳定，可直接复制交接口径。',
+      action: '复制交接',
+      color: 'blue' as const,
+      disabled: false,
+      onClick: copyRealtimeDutyHandoff
+    }
+  ];
   const mapFieldCommandItems = [
     {
       title: '全域定位',
@@ -1911,6 +1958,39 @@ export function Realtime({
             </div>
           </div>
 
+          <div className="vp-map-shift-console">
+            <div className="vp-map-shift-console-summary">
+              <Space wrap>
+                <Tag color="blue">客户地图值班台</Tag>
+                <Tag color={mapAttentionRows.length > 0 ? 'orange' : 'green'}>
+                  {mapAttentionRows.length > 0 ? '有关注车辆' : '态势稳定'}
+                </Tag>
+                <Tag color={selectedMapRow ? 'green' : 'grey'}>{selectedMapRow ? '已选车辆' : '待选车辆'}</Tag>
+              </Space>
+              <Typography.Text strong>把实时地图收敛成值班员能执行的四件事：交付状态、优先车辆、时间窗复盘和交接说明。</Typography.Text>
+              <Typography.Text type="secondary">
+                值班员不需要先理解协议来源，先确认今天是否可交付、哪辆车优先处理、是否要回放轨迹，以及交接时怎么讲。
+              </Typography.Text>
+            </div>
+            <div className="vp-map-shift-console-grid">
+              {mapShiftConsoleItems.map((item) => (
+                <button
+                  key={item.label}
+                  type="button"
+                  className="vp-map-shift-console-item"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`客户地图值班台 ${item.label} ${item.value} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <strong>{item.value}</strong>
+                  <span>{item.detail}</span>
+                  <em>{item.action}</em>
+                </button>
+              ))}
+            </div>
+          </div>
+
           <div className="vp-map-decision-board">
             <div className="vp-map-decision-summary">
               <Space wrap>
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index 44af5a33..cb8c0d18 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -5538,6 +5538,82 @@ button.vp-realtime-command-item:focus-visible {
   line-height: 18px;
 }
 
+.vp-map-shift-console {
+  display: grid;
+  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
+  gap: 12px;
+}
+
+.vp-map-shift-console-summary {
+  min-height: 154px;
+  padding: 14px;
+  border: 1px solid rgba(0, 174, 116, 0.22);
+  border-radius: var(--vp-radius);
+  background: #f6fffb;
+  display: grid;
+  align-content: start;
+  gap: 10px;
+}
+
+.vp-map-shift-console-summary .semi-typography {
+  line-height: 21px;
+}
+
+.vp-map-shift-console-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.vp-map-shift-console-item {
+  min-height: 154px;
+  padding: 12px;
+  border: 1px solid rgba(0, 174, 116, 0.18);
+  border-radius: var(--vp-radius);
+  background: #fbfffd;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  display: grid;
+  align-content: start;
+  gap: 8px;
+}
+
+.vp-map-shift-console-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.vp-map-shift-console-item:not(:disabled):hover,
+.vp-map-shift-console-item:not(:disabled):focus-visible {
+  border-color: rgba(0, 174, 116, 0.42);
+  background: #f2fff8;
+  outline: none;
+}
+
+.vp-map-shift-console-item strong {
+  color: var(--vp-text);
+  font-size: 17px;
+  line-height: 23px;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.vp-map-shift-console-item span {
+  color: var(--vp-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.vp-map-shift-console-item em {
+  color: #008f5f;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+}
+
 .vp-map-decision-board {
   display: grid;
   grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
@@ -12027,6 +12103,8 @@ button.vp-realtime-command-item:focus-visible {
   .vp-source-coverage-grid,
   .vp-map-service-rail,
   .vp-map-service-rail-actions,
+  .vp-map-shift-console,
+  .vp-map-shift-console-grid,
   .vp-map-decision-board,
   .vp-map-decision-grid,
   .vp-map-view-mode,
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 a66b895a..c064de0d 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -10667,6 +10667,12 @@ test('shows realtime freshness status for recently updated and stale vehicles',
   expect(screen.getByRole('button', { name: '地图服务行动条 路线回放 轨迹回放' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '地图服务行动条 统计查询 统计查询' })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: '地图服务行动条 证据导出 导出CSV' })).toBeInTheDocument();
+  expect(screen.getByText('客户地图值班台')).toBeInTheDocument();
+  expect(screen.getByText('把实时地图收敛成值班员能执行的四件事：交付状态、优先车辆、时间窗复盘和交接说明。')).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户地图值班台 今日态势 1 在线 / 1 关注 只看在线' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户地图值班台 优先车辆 粤A超时1 处理关注' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户地图值班台 时间窗复盘 24 小时窗口 打开轨迹' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '客户地图值班台 交接说明 可复制 复制交接' })).toBeInTheDocument();
   expect(screen.getAllByText('数据新鲜').length).toBeGreaterThan(0);
   expect(screen.getAllByText('更新超时').length).toBeGreaterThan(0);
   expect(screen.getByText('地图客户决策')).toBeInTheDocument();