feat(platform): add map status filter strip

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

@@ -1074,8 +1074,46 @@ export function Realtime({
     ? `${realtimePriorityRows.length.toLocaleString()} 辆优先处置`
     : '暂无阻断';
   const missingCoordinateCount = Math.max(0, rows.length - locatedCount);
+  const noCoordinateRows = rows.filter((row) => !isValidCoordinate(row));
   const selectedVehicleProtocol = selectedMapRow ? filters.protocol || selectedMapRow.primaryProtocol || '' : '';
   const selectedVehicleLabel = selectedMapRow?.plate || selectedMapRow?.vin || '未选择车辆';
+  const mapStatusFilterItems = [
+    {
+      label: '在线车辆',
+      value: `${onlineCount.toLocaleString()} 在线`,
+      detail: `在线率 ${formatPercent(onlineRate)}，客户当前可实时看车。`,
+      color: onlineCount > 0 ? 'green' as const : 'orange' as const,
+      onClick: () => applyFilters({ ...filters, online: 'online' })
+    },
+    {
+      label: '离线车辆',
+      value: `${Math.max(0, rows.length - onlineCount).toLocaleString()} 离线`,
+      detail: '优先判断平台是否仍在转发，或车辆是否停止上报。',
+      color: rows.length - onlineCount > 0 ? 'orange' as const : 'green' as const,
+      onClick: () => applyFilters({ ...filters, online: 'offline' })
+    },
+    {
+      label: '无坐标车辆',
+      value: `${missingCoordinateCount.toLocaleString()} 无坐标`,
+      detail: '没有有效经纬度时，地图、轨迹和围栏都需要先复核。',
+      color: missingCoordinateCount > 0 ? 'orange' as const : 'green' as const,
+      onClick: () => {
+        const firstNoCoordinate = noCoordinateRows.find((row) => canOpenVehicle(row.vin));
+        if (firstNoCoordinate) {
+          selectRealtimeRow(firstNoCoordinate);
+          return;
+        }
+        load(filters, pagination.currentPage, pagination.pageSize);
+      }
+    },
+    {
+      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,
+      onClick: () => applyFilters({ ...filters, serviceStatus: 'degraded' })
+    }
+  ];
   const openSelectedVehicleRaw = () => {
     if (!selectedMapRow || !canOpenVehicle(selectedMapRow.vin)) {
       Toast.warning('请先选择可查询的车辆');
@@ -2158,6 +2196,35 @@ export function Realtime({
             </aside>
           </section>
 
+          <section className="vp-map-status-filter-strip" aria-label="地图状态筛选条">
+            <div className="vp-map-status-filter-copy">
+              <Space wrap>
+                <Tag color="blue">地图状态筛选条</Tag>
+                <Tag color={mapAttentionRows.length > 0 ? 'orange' : 'green'}>
+                  {mapAttentionRows.length > 0 ? `${mapAttentionRows.length.toLocaleString()} 关注` : '状态稳定'}
+                </Tag>
+              </Space>
+              <Typography.Text type="secondary">
+                先按客户最关心的在线、离线、无坐标和需关注分组看车，再进入轨迹、统计、导出或告警。
+              </Typography.Text>
+            </div>
+            <div className="vp-map-status-filter-grid">
+              {mapStatusFilterItems.map((item) => (
+                <button
+                  key={item.label}
+                  type="button"
+                  className="vp-map-status-filter-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>
+          </section>
+
           <section className="vp-map-single-service" aria-label="单车服务台">
             <div className="vp-map-single-service-copy">
               <Space wrap>