feat(platform): center map page on vehicle service

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

@@ -1248,6 +1248,92 @@ export function Realtime({
     }
   ];
   const mapShiftTimeWindowLabel = timeWindowDuration === '1 天窗口' ? '24 小时窗口' : timeWindowDuration;
+  const mapCommandTaskItems = [
+    {
+      label: '实时监控',
+      value: `${onlineCount.toLocaleString()} 在线`,
+      detail: `${locatedCount.toLocaleString()} 辆有定位，${staleCount.toLocaleString()} 辆更新超时。`,
+      color: onlineCount > 0 ? 'green' as const : 'orange' as const,
+      disabled: false,
+      onClick: () => applyFilters({ ...filters, online: 'online' })
+    },
+    {
+      label: '轨迹回放',
+      value: selectedMapRow?.plate || selectedMapRow?.vin || '先选车',
+      detail: selectedMapRow ? `${dataFreshness(selectedMapRow).detail}，回放位置、速度和里程。` : '从地图或车辆列表选择一辆车。',
+      color: selectedMapRow ? 'blue' as const : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      label: '历史查询',
+      value: selectedVehicleProtocol || '全部来源',
+      detail: '查看位置、原始帧和解析字段，支撑客户复核。',
+      color: 'blue' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: openSelectedVehicleRaw
+    },
+    {
+      label: '告警通知',
+      value: `${mapAttentionRows.length.toLocaleString()} 关注`,
+      detail: mapAttentionRows[0] ? `${mapAttentionRows[0].plate || mapAttentionRows[0].vin}：${realtimeIssueLabels(mapAttentionRows[0]).join('；')}` : '当前筛选下暂无关注车辆。',
+      color: mapAttentionRows.length > 0 ? 'orange' as const : 'green' as const,
+      disabled: !onOpenQuality,
+      onClick: () => onOpenQuality?.(selectedMapRow && canOpenVehicle(selectedMapRow.vin)
+        ? { keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol }
+        : { serviceStatus: 'degraded' })
+    },
+    {
+      label: '统计导出',
+      value: `${rows.length.toLocaleString()} 辆`,
+      detail: '进入里程统计，或导出当前地图车辆清单。',
+      color: 'blue' as const,
+      disabled: rows.length === 0,
+      onClick: exportRealtime
+    }
+  ];
+  const mapSelectedServiceItems = [
+    {
+      label: '车辆档案',
+      action: '查看车辆',
+      detail: selectedVehicleLabel,
+      color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      label: '轨迹回放',
+      action: '回放轨迹',
+      detail: selectedMapRow ? dataFreshness(selectedMapRow).detail : '等待选择',
+      color: selectedMapRow ? 'blue' as const : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol)
+    },
+    {
+      label: '历史数据',
+      action: '查询历史',
+      detail: selectedVehicleProtocol || '全部来源',
+      color: 'blue' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: openSelectedVehicleRaw
+    },
+    {
+      label: '告警通知',
+      action: '查看告警',
+      detail: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : '等待选择',
+      color: selectedMapRow && hasSourceIssue(selectedMapRow) ? 'orange' as const : selectedMapRow ? 'green' as const : 'grey' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin) || !onOpenQuality,
+      onClick: () => selectedMapRow && onOpenQuality?.({ keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol })
+    },
+    {
+      label: '交接卡',
+      action: '复制交接',
+      detail: selectedMapRow ? realtimeIssueLabels(selectedMapRow)[0] : '等待选择',
+      color: 'blue' as const,
+      disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin),
+      onClick: copySelectedMapVehicleHandoff
+    }
+  ];
   const mapShiftConsoleItems = [
     {
       label: '今日态势',
@@ -1957,6 +2043,89 @@ export function Realtime({
           </Space>
           </div>
 
+          <section className="vp-map-command-center" aria-label="车辆服务地图中枢">
+            <div className="vp-map-command-main">
+              <div className="vp-map-command-copy">
+                <Space wrap>
+                  <Tag color="blue">车辆服务地图中枢</Tag>
+                  <Tag color={amapConfigured ? 'green' : 'orange'}>{amapConfigured ? '高德地图可用' : '坐标预览'}</Tag>
+                  <Tag color={mapAttentionRows.length > 0 ? 'orange' : 'green'}>{mapAttentionRows.length.toLocaleString()} 辆关注</Tag>
+                </Space>
+                <Typography.Title heading={4} style={{ margin: 0 }}>
+                  把 32960、808、MQTT 收敛成同一张车辆地图：看位置、判在线、选车辆、回放轨迹、处理告警和导出证据。
+                </Typography.Title>
+                <Typography.Text type="secondary">
+                  来源证据仅用于筛选和追溯，不作为客户主路径。
+                </Typography.Text>
+              </div>
+              <div className="vp-map-command-tasks">
+                {mapCommandTaskItems.map((item) => (
+                  <button
+                    key={item.label}
+                    type="button"
+                    className="vp-map-command-task"
+                    disabled={item.disabled}
+                    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>
+            <aside className="vp-map-command-side">
+              <div className="vp-map-command-side-card">
+                <Typography.Text strong>高德地图底座</Typography.Text>
+                <div className="vp-map-foundation-facts">
+                  <span>Web JS</span><strong>{amapConfigured ? '已配置' : '未配置'}</strong>
+                  <span>安全代理</span><strong>{amapSecurityProxyEnabled ? '已启用' : '未启用'}</strong>
+                  <span>服务端 Key</span><strong>{runtime?.amapApiConfigured ? '已配置' : '未配置'}</strong>
+                </div>
+              </div>
+              <div className="vp-map-command-side-card">
+                <Typography.Text strong>车辆服务闭环</Typography.Text>
+                <Typography.Text type="secondary">
+                  客户从这里完成看车、选车、查轨迹、查历史、查统计、收告警和导出。
+                </Typography.Text>
+              </div>
+            </aside>
+          </section>
+
+          <section className="vp-map-single-service" aria-label="单车服务台">
+            <div className="vp-map-single-service-copy">
+              <Space wrap>
+                <Tag color="blue">单车服务台</Tag>
+                {selectedMapRow ? (
+                  <>
+                    <Tag color={vehicleServiceStatus(selectedMapRow).color}>{vehicleServiceStatus(selectedMapRow).label}</Tag>
+                    <Tag color={dataFreshness(selectedMapRow).color}>{dataFreshness(selectedMapRow).detail}</Tag>
+                  </>
+                ) : (
+                  <Tag color="grey">等待选车</Tag>
+                )}
+              </Space>
+              <Typography.Title heading={5} style={{ margin: 0 }}>{selectedVehicleLabel}</Typography.Title>
+            </div>
+            <div className="vp-map-single-service-actions">
+              {mapSelectedServiceItems.map((item) => (
+                <button
+                  key={item.label}
+                  type="button"
+                  className="vp-map-single-service-action"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                  aria-label={`单车服务台 ${item.label} ${item.action}`}
+                >
+                  <Tag color={item.color}>{item.label}</Tag>
+                  <strong>{item.action}</strong>
+                  <span>{item.detail}</span>
+                </button>
+              ))}
+            </div>
+          </section>
+
           <div className="vp-map-service-rail">
             <div className="vp-map-service-rail-summary">
               <Space wrap>