@fleet-frontend/mower-maps 0.2.5-beta.8 → 0.2.6-beta.1

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { memo, useMemo, useEffect, useState, useRef, useCallback, createContext, useContext, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
+import React__default, { memo, useMemo, useEffect, useState, useRef, useCallback, createContext, useContext, useLayoutEffect, forwardRef, useImperativeHandle, useId } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 function globals (defs) {
@@ -2089,7 +2089,7 @@ var ellipsoids = {
   }
 };
 
-const WGS84$1 = ellipsoids.WGS84; // default ellipsoid
+const WGS84$2 = ellipsoids.WGS84; // default ellipsoid
 
 function eccentricity(a, b, rf, R_A) {
   var a2 = a * a; // used in geocentric
@@ -2114,7 +2114,7 @@ function sphere(a, b, rf, ellps, sphere) {
   if (!a) { // do we have an ellipsoid?
     var ellipse = match(ellipsoids, ellps);
     if (!ellipse) {
-      ellipse = WGS84$1;
+      ellipse = WGS84$2;
     }
     a = ellipse.a;
     b = ellipse.b;
@@ -10613,9 +10613,16 @@ var SvgMapOpacity;
  * 地图渲染相关常量配置
  */
 // 默认坐标
+// export const DEFAULT_COORDINATES = {
+//   sw: [116.071044, 40.102099],
+//   ne: [116.0734, 40.103901],
+// };
+/** 无效 GPS 时的兜底中心点 [lng, lat] */
+const DEFAULT_GPS_CENTER = [0, 0];
+/** 无 map_width/map_height 时的默认 GPS 边界 [lng, lat]（中心约 (0,0)） */
 const DEFAULT_COORDINATES = {
-    sw: [116.071044, 40.102099],
-    ne: [116.0734, 40.103901],
+    sw: [-225e-6, -225e-6],
+    ne: [0.000225, 0.000225],
 };
 /**
  * 缩放因子 - 将米转换为像素
@@ -13905,6 +13912,23 @@ var CheckDoodleErrorType;
     // doodle与其他元素距离过近
     CheckDoodleErrorType["DOODLE_DISTANCE_TOO_CLOSE_TO_OTHER_ELEMENT"] = "doodle_distance_too_close_to_other_element";
 })(CheckDoodleErrorType || (CheckDoodleErrorType = {}));
+var MapType;
+(function (MapType) {
+    // 普通地图
+    MapType["NORMAL"] = "normal";
+    /**
+     * 主要是用在地理围栏相关的
+     * 此地图没有分区名称气泡，没有孤立子地块，没有设备图标，没有天线
+     */
+    MapType["GEO_FENCE"] = "geo-fence";
+})(MapType || (MapType = {}));
+var HoverType;
+(function (HoverType) {
+    HoverType["Translate"] = "translate";
+    HoverType["Scale"] = "scale";
+    HoverType["Rotate"] = "rotate";
+    HoverType["Delete"] = "delete";
+})(HoverType || (HoverType = {}));
 
 var RealTimeDataType;
 (function (RealTimeDataType) {
@@ -18056,6 +18080,8 @@ const OBSTACLE_STYLES = {
     hoverFillColor: 'rgba(255, 90, 0, 0.4)',
     lineWidth: DEFAULT_LINE_WIDTHS.OBSTACLE,
     opacity: DEFAULT_OPACITIES.FULL,
+    disabledLineColor: 'rgba(255, 90, 0, 0.4)',
+    disabledFillColor: 'rgba(255, 90, 0, 0.1)',
 };
 const CHARGING_PILE_STYLES = {
     lineColor: 'blue',
@@ -18537,6 +18563,38 @@ function calculateBoundaryBoundsCenter(mapData) {
         boundaryBounds.minY + (boundaryBounds.maxY - boundaryBounds.minY) / 2,
     ];
 }
+/**
+ * 由中心点与物理尺寸（米）计算 GPS 边界 [lng, lat]
+ */
+function computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapWidthMeters, mapHeightMeters) {
+    const METERS_PER_DEGREE_LAT = EQUATORIAL_CIRCUMFERENCE / 360;
+    const METERS_PER_DEGREE_LNG = METERS_PER_DEGREE_LAT * Math.cos((centerLat * Math.PI) / 180);
+    const swLat = centerLat - mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
+    const swLng = centerLng - mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
+    const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
+    const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
+    return {
+        sw: [swLng, swLat],
+        ne: [neLng, neLat],
+    };
+}
+/**
+ * GPS 无效时：中心 (0,0) + JSON 的 map_width/map_height；无尺寸则用 DEFAULT_COORDINATES
+ */
+function getFallbackGpsBounds(mapData) {
+    const [centerLng, centerLat] = DEFAULT_GPS_CENTER;
+    const hasMapSize = typeof mapData.map_width === 'number' &&
+        typeof mapData.map_height === 'number' &&
+        mapData.map_width > 0 &&
+        mapData.map_height > 0;
+    if (hasMapSize) {
+        return computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapData.map_width, mapData.map_height);
+    }
+    return {
+        sw: [...DEFAULT_COORDINATES.sw],
+        ne: [...DEFAULT_COORDINATES.ne],
+    };
+}
 /**
  * 检查GPS坐标是否有效
  */
@@ -18572,10 +18630,10 @@ function estimateGpsFromMapBounds(mapData) {
         const mapWidthMeters = maxXMeters - minXMeters;
         const mapHeightMeters = maxYMeters - minYMeters;
         // 凤凰岭的GPS坐标作为地图中心点
-        const centerLat = 40.103;
-        const centerLng = 116.072222;
-        // const centerLat = 40.03806686401367;
-        // const centerLng = 116.35540771484375;
+        // const centerLat = 40.103;
+        // const centerLng = 116.072222;
+        const centerLat = 0;
+        const centerLng = 0;
         // 精确的坐标转换常数
         // 1度纬度 = 约111,320米（在地球上任何地方都基本相同）
         // 1度经度 = 约111,320 * cos(纬度) 米（随纬度变化）
@@ -18641,39 +18699,44 @@ function calculateMapGpsCenter(mapData) {
         }
     }
     // 如果有西南角和东北角坐标，检查其有效性并计算中心点
-    if (mapData.sw_gps &&
-        mapData.ne_gps &&
-        mapData.sw_gps.length >= 2 &&
-        mapData.ne_gps.length >= 2) {
-        const swLat = mapData.sw_gps[1];
-        const swLng = mapData.sw_gps[0];
-        const neLat = mapData.ne_gps[1];
-        const neLng = mapData.ne_gps[0];
-        // 检查边界坐标的有效性
-        if (isValidGpsCoordinate(swLat, swLng) && isValidGpsCoordinate(neLat, neLng)) {
-            return {
-                lat: (swLat + neLat) / 2,
-                lng: (swLng + neLng) / 2,
-            };
-        }
-        else {
-            console.warn('sw_gps或ne_gps坐标无效:', {
-                sw: { lat: swLat, lng: swLng },
-                ne: { lat: neLat, lng: neLng },
-            });
-        }
-    }
+    // if (
+    //   mapData.sw_gps &&
+    //   mapData.ne_gps &&
+    //   mapData.sw_gps.length >= 2 &&
+    //   mapData.ne_gps.length >= 2
+    // ) {
+    //   const swLat = mapData.sw_gps[1];
+    //   const swLng = mapData.sw_gps[0];
+    //   const neLat = mapData.ne_gps[1];
+    //   const neLng = mapData.ne_gps[0];
+    //   // 检查边界坐标的有效性
+    //   if (isValidGpsCoordinate(swLat, swLng) && isValidGpsCoordinate(neLat, neLng)) {
+    //     return {
+    //       lat: (swLat + neLat) / 2,
+    //       lng: (swLng + neLng) / 2,
+    //     };
+    //   } else {
+    //     console.warn('sw_gps或ne_gps坐标无效:', {
+    //       sw: { lat: swLat, lng: swLng },
+    //       ne: { lat: neLat, lng: neLng },
+    //     });
+    //   }
+    // }
     // 尝试从地图几何边界估算GPS坐标
-    const estimatedBounds = estimateGpsFromMapBounds(mapData);
-    if (estimatedBounds) {
-        // 从估算的边界计算中心点
-        const centerLat = (estimatedBounds.sw[1] + estimatedBounds.ne[1]) / 2;
-        const centerLng = (estimatedBounds.sw[0] + estimatedBounds.ne[0]) / 2;
-        return { lat: centerLat, lng: centerLng };
-    }
+    // const estimatedBounds = estimateGpsFromMapBounds(mapData);
+    // if (estimatedBounds) {
+    //   // 从估算的边界计算中心点
+    //   const centerLat = (estimatedBounds.sw[1] + estimatedBounds.ne[1]) / 2;
+    //   const centerLng = (estimatedBounds.sw[0] + estimatedBounds.ne[0]) / 2;
+    //   return { lat: centerLat, lng: centerLng };
+    // }
+    // return {
+    //   lat: 39.9042, // 北京纬度
+    //   lng: 116.4074, // 北京经度
+    // };
     return {
-        lat: 39.9042, // 北京纬度
-        lng: 116.4074, // 北京经度
+        lat: DEFAULT_GPS_CENTER[1],
+        lng: DEFAULT_GPS_CENTER[0],
     };
 }
 // 旋转坐标点
@@ -18703,50 +18766,22 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
         mapData.map_width > 0 &&
         mapData.map_height > 0) {
         const [centerLng, centerLat] = mapData.center_gps;
-        const mapWidthMeters = mapData.map_width;
-        const mapHeightMeters = mapData.map_height;
-        // 精确的坐标转换常数（基于 WGS84 标准 - GPS 国际标准）
-        // WGS84 赤道半径 = 6,378,137 米
-        // 地球赤道周长 = 2 × π × 6,378,137 ≈ 40,075,017 米
-        // 1度纬度 = 40075017 / 360 ≈ 111,319.49 米（在地球上任何地方都基本相同）
-        // 1度经度 = (40075017 / 360) * cos(纬度) 米（随纬度变化）
-        const METERS_PER_DEGREE_LAT = EQUATORIAL_CIRCUMFERENCE / 360;
-        const METERS_PER_DEGREE_LNG = METERS_PER_DEGREE_LAT * Math.cos((centerLat * Math.PI) / 180);
-        // 计算SW（西南角）GPS坐标：从中心点减去半个地图的宽度和高度
-        const swLat = centerLat - mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
-        const swLng = centerLng - mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
-        // 计算NE（东北角）GPS坐标：从中心点加上半个地图的宽度和高度
-        const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
-        const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
-        bounds = {
-            sw: [swLng, swLat],
-            ne: [neLng, neLat],
-        };
-    }
-    else if (isValidGpsCoordinate(mapData.sw_gps?.[1], mapData.sw_gps?.[0]) &&
-        isValidGpsCoordinate(mapData.ne_gps?.[1], mapData.ne_gps?.[0])) {
-        // 降级方案：使用地图数据中的GPS坐标
-        console.warn('center_gps 或 map_width/map_height 不可用，使用 sw_gps 和 ne_gps');
-        bounds = {
-            sw: mapData.sw_gps,
-            ne: mapData.ne_gps,
-        };
-    }
+        bounds = computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapData.map_width, mapData.map_height);
+    }
+    // else if (
+    //   isValidGpsCoordinate(mapData.sw_gps?.[1], mapData.sw_gps?.[0]) &&
+    //   isValidGpsCoordinate(mapData.ne_gps?.[1], mapData.ne_gps?.[0])
+    // ) {
+    //   // 降级方案：使用地图数据中的GPS坐标
+    //   console.warn('center_gps 或 map_width/map_height 不可用，使用 sw_gps 和 ne_gps');
+    //   bounds = {
+    //     sw: mapData.sw_gps,
+    //     ne: mapData.ne_gps,
+    //   };
+    // }
     else {
-        // 如果GPS坐标无效，尝试从地图几何数据估算
-        const { sw, ne } = estimateGpsFromMapBounds(mapData);
-        if (sw && ne) {
-            console.warn('GPS坐标无效，使用地图几何数据估算边界:', sw, ne);
-            bounds = {
-                sw: [sw[0], sw[1]],
-                ne: [ne[0], ne[1]],
-            };
-        }
-        else {
-            // 最后的fallback：使用默认坐标
-            console.warn('无法获取有效的GPS边界，使用默认坐标');
-            bounds = DEFAULT_COORDINATES;
-        }
+        console.warn('无法获取有效的GPS边界，使用 (0,0) 中心 + map_width/map_height 或 DEFAULT_COORDINATES');
+        bounds = getFallbackGpsBounds(mapData);
     }
     // 如果有旋转角度，计算旋转后的边界
     if (rotation !== 0) {
@@ -19179,7 +19214,7 @@ function getMowerImage(positonConfig, mowerIconConfig, modelType, hasEdger) {
     const mowerImage = mowerIconConfig?.mapImgUrl || getMowerImageByModal(model, hasEdger);
     const disabledImage = mowerIconConfig?.mapDisabledUrl || getDisabledMowerImageByModal(model);
     const noPositionImage = mowerIconConfig?.mapNoPositionUrl || getNoPositionMowerImageByModal(model);
-    const positonOutOfRange = isOutOfRange(positonConfig);
+    // const positonOutOfRange = isOutOfRange(positonConfig);
     const positionValid = isInvalidPosition(positonConfig);
     const isOffLine = state === RobotStatus.DISCONNECTED;
     const isInPark = state === RobotStatus.CHARGING || state === RobotStatus.PARKED;
@@ -19189,7 +19224,7 @@ function getMowerImage(positonConfig, mowerIconConfig, modelType, hasEdger) {
     if (isInPark) {
         return mowerImage;
     }
-    if (positionValid || positonOutOfRange) {
+    if (positionValid) {
         return noPositionImage;
     }
     else {
@@ -19213,12 +19248,6 @@ function isInvalidPosition(positonConfig) {
         isNoPosture(positonConfig.postureY) &&
         isNoPosture(positonConfig.postureTheta));
 }
-function isOutOfRange(positonConfig) {
-    return (positonConfig.postureX != null &&
-        Math.abs(positonConfig.postureX) > 1000 &&
-        positonConfig.postureY != null &&
-        Math.abs(positonConfig.postureY) > 1000);
-}
 function getMindistanceByModel(modelType) {
     if (isIModel(modelType)) {
         return I_MIN_DISTANCE;
@@ -19515,8 +19544,16 @@ function formatTime(date) {
  * @param date 目标日期
  * @returns 星期几的英文缩写
  */
-function getWeekdayAbbr(date) {
-    const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+function getWeekdayAbbr(date, locale) {
+    const weekdays = [
+        locale?.['map.renderer.weekday.sun'] || 'Sun',
+        locale?.['map.renderer.weekday.mon'] || 'Mon',
+        locale?.['map.renderer.weekday.tue'] || 'Tue',
+        locale?.['map.renderer.weekday.wed'] || 'Wed',
+        locale?.['map.renderer.weekday.thu'] || 'Thu',
+        locale?.['map.renderer.weekday.fri'] || 'Fri',
+        locale?.['map.renderer.weekday.sat'] || 'Sat'
+    ];
     return weekdays[date.getDay()];
 }
 /**
@@ -19530,7 +19567,7 @@ function getWeekdayAbbr(date) {
  * @param timestamp 时间戳（秒）
  * @returns 格式化后的日期文本
  */
-function formatBoundaryDateText(timestamp) {
+function formatBoundaryDateText(timestamp, locale) {
     if (!timestamp || timestamp <= 0) {
         return '-';
     }
@@ -19538,15 +19575,15 @@ function formatBoundaryDateText(timestamp) {
     const timeStr = formatTime(date);
     // 判断是否为今天
     if (isToday(date)) {
-        return `Today ${timeStr}`;
+        return `${locale?.['map.renderer.today'] || 'Today'} ${timeStr}`;
     }
     // 判断是否为昨天
     if (isYesterday(date)) {
-        return `Yesterday ${timeStr}`;
+        return `${locale?.['map.renderer.yesterday'] || 'Yesterday'} ${timeStr}`;
     }
     // 判断是否为本周内
     if (isThisWeek(date)) {
-        const weekdayAbbr = getWeekdayAbbr(date);
+        const weekdayAbbr = getWeekdayAbbr(date, locale);
         return `${weekdayAbbr} ${timeStr}`;
     }
     // 其他情况显示完整日期
@@ -20038,12 +20075,12 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$7 = ".index-module_edit__-5VvX {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  z-index: 1000;\n  cursor: move;\n  touch-action: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n  position: absolute;\n  inset: -10px;\n  border: 2px dashed rgb(241, 102, 41);\n  border-radius: 2px;\n  pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n  position: absolute;\n  inset: -10px;\n  border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n  position: absolute;\n  top: -20px;\n  right: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: grab;\n  z-index: 1001;\n  pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n  position: absolute;\n  bottom: -20px;\n  left: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: move;\n  z-index: 1001;\n  pointer-events: auto;\n}";
-var styles$7 = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","rotate":"index-module_rotate__H-KIZ","move":"index-module_move__mZF8s"};
-styleInject(css_248z$7);
+var css_248z$9 = ".index-module_edit__-5VvX {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  z-index: 1000;\n  cursor: move;\n  touch-action: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n  position: absolute;\n  inset: -10px;\n  border: 2px dashed rgb(241, 102, 41);\n  border-radius: 2px;\n  pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n  position: absolute;\n  inset: -10px;\n  border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n  position: absolute;\n  top: -20px;\n  right: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: grab;\n  z-index: 1001;\n  pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n  position: absolute;\n  bottom: -20px;\n  left: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: move;\n  z-index: 1001;\n  pointer-events: auto;\n}";
+var styles$9 = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","rotate":"index-module_rotate__H-KIZ","move":"index-module_move__mZF8s"};
+styleInject(css_248z$9);
 
 const RotateHandle = ({ onRotateStart, isRotating }) => {
-    return (jsx("div", { className: styles$7.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
+    return (jsx("div", { className: styles$9.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
 };
 
 /**
@@ -20120,7 +20157,7 @@ const DragHandle = ({ onDragStart, isDragging }) => {
     if (!isMobileDevice()) {
         return null;
     }
-    return (jsx("div", { className: styles$7.move, onMouseDown: (e) => {
+    return (jsx("div", { className: styles$9.move, onMouseDown: (e) => {
             onDragStart(e);
         }, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
             // onDragEnd(e);
@@ -20152,7 +20189,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
     if (!isDragMap) {
         return null;
     }
-    return (jsxs("div", { ref: containerRef, className: styles$7.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$7.border }), canRotateMap && jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsx("div", { className: styles$7.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
+    return (jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$9.border }), canRotateMap && jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
 };
 
 const SvgEditContext = createContext({
@@ -22668,13 +22705,17 @@ const CommonContext = createContext({
     overlayScale: 1,
     showStraddleBoundaryBorder: true,
     googleMapStaticApiKey: '',
+    googleMapStaticUrlSigningSecret: '',
+    locale: {},
+    signGoogleStaticMapUrl: undefined,
     onH5FirstSelectObstaclePoint: undefined,
+    channelClipPathId: '',
 });
 const CommonContextProvider = CommonContext.Provider;
 const useCommonContext = () => useContext(CommonContext);
 
 const ChannelClipPath = React__default.memo(() => {
-    const { svgViewBox, sn } = useCommonContext();
+    const { svgViewBox, channelClipPathId } = useCommonContext();
     const { svgElementDatas } = useSvgEditContext();
     const boundaryData = svgElementDatas?.[DataType.BOUNDARY] || [];
     const [minX, minY, maxX, maxY] = useMemo(() => {
@@ -22853,7 +22894,7 @@ const ChannelClipPath = React__default.memo(() => {
         });
         return baseD;
     }, [boundaryData, minX, minY, maxX, maxY]);
-    return (jsx("defs", { children: jsx("clipPath", { id: `channel-clip-path-${sn}`, fillRule: "evenodd", children: jsx("path", { d: d }) }) }));
+    return (jsx("defs", { children: jsx("clipPath", { id: channelClipPathId, fillRule: "evenodd", children: jsx("path", { d: d }) }) }));
 });
 
 /**
@@ -23149,11 +23190,440 @@ const MapEditContext = createContext({
 const MapEditContextProvider = MapEditContext.Provider;
 const useMapEditContext = () => useContext(MapEditContext);
 
+/**
+ * Google Maps Static API 数字签名
+ * @see https://developers.google.com/maps/documentation/maps-static/digital-signature
+ *
+ * 使用纯 JS HMAC-SHA1，兼容 H5 WebView / 非 HTTPS 等无 crypto.subtle 的环境。
+ */
+/// <reference lib="dom" />
+function removeWebSafe(encoded) {
+    return encoded.replace(/-/g, '+').replace(/_/g, '/');
+}
+function makeWebSafe(encoded) {
+    return encoded.replace(/\+/g, '-').replace(/\//g, '_');
+}
+function decodeUrlSigningSecret(secret) {
+    let base64 = removeWebSafe(secret);
+    const remainder = base64.length % 4;
+    if (remainder) {
+        base64 += '='.repeat(4 - remainder);
+    }
+    const binary = globalThis.atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+}
+function bytesToWebSafeBase64(bytes) {
+    let binary = '';
+    for (let i = 0; i < bytes.length; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return makeWebSafe(globalThis.btoa(binary));
+}
+function utf8Encode(text) {
+    if (typeof globalThis.TextEncoder !== 'undefined') {
+        return new globalThis.TextEncoder().encode(text);
+    }
+    // Static Map URL 仅含 ASCII；兼容无 TextEncoder 的旧 WebView / Jest jsdom
+    const bytes = new Uint8Array(text.length);
+    for (let i = 0; i < text.length; i++) {
+        const code = text.charCodeAt(i);
+        if (code > 127) {
+            throw new Error('signGoogleStaticMapUrl: non-ASCII URL is not supported in this environment');
+        }
+        bytes[i] = code;
+    }
+    return bytes;
+}
+function concatBytes(...parts) {
+    const total = parts.reduce((sum, part) => sum + part.length, 0);
+    const out = new Uint8Array(total);
+    let offset = 0;
+    for (const part of parts) {
+        out.set(part, offset);
+        offset += part.length;
+    }
+    return out;
+}
+function leftRotate(value, amount) {
+    return ((value << amount) | (value >>> (32 - amount))) >>> 0;
+}
+function sha1(message) {
+    const originalLength = message.length;
+    const bitLength = originalLength * 8;
+    const paddedLength = Math.ceil((originalLength + 9) / 64) * 64;
+    const padded = new Uint8Array(paddedLength);
+    padded.set(message);
+    padded[originalLength] = 0x80;
+    const view = new DataView(padded.buffer);
+    view.setUint32(paddedLength - 4, bitLength >>> 0, false);
+    view.setUint32(paddedLength - 8, Math.floor(bitLength / 0x100000000), false);
+    let h0 = 0x67452301;
+    let h1 = 0xefcdab89;
+    let h2 = 0x98badcfe;
+    let h3 = 0x10325476;
+    let h4 = 0xc3d2e1f0;
+    const w = new Uint32Array(80);
+    for (let offset = 0; offset < paddedLength; offset += 64) {
+        for (let i = 0; i < 16; i++) {
+            w[i] = view.getUint32(offset + i * 4, false);
+        }
+        for (let i = 16; i < 80; i++) {
+            w[i] = leftRotate(w[i - 3] ^ w[i - 8] ^ w[i - 14] ^ w[i - 16], 1);
+        }
+        let a = h0;
+        let b = h1;
+        let c = h2;
+        let d = h3;
+        let e = h4;
+        for (let i = 0; i < 80; i++) {
+            let f;
+            let k;
+            if (i < 20) {
+                f = (b & c) | (~b & d);
+                k = 0x5a827999;
+            }
+            else if (i < 40) {
+                f = b ^ c ^ d;
+                k = 0x6ed9eba1;
+            }
+            else if (i < 60) {
+                f = (b & c) | (b & d) | (c & d);
+                k = 0x8f1bbcdc;
+            }
+            else {
+                f = b ^ c ^ d;
+                k = 0xca62c1d6;
+            }
+            const temp = (leftRotate(a, 5) + f + e + k + w[i]) >>> 0;
+            e = d;
+            d = c;
+            c = leftRotate(b, 30);
+            b = a;
+            a = temp;
+        }
+        h0 = (h0 + a) >>> 0;
+        h1 = (h1 + b) >>> 0;
+        h2 = (h2 + c) >>> 0;
+        h3 = (h3 + d) >>> 0;
+        h4 = (h4 + e) >>> 0;
+    }
+    const digest = new Uint8Array(20);
+    const digestView = new DataView(digest.buffer);
+    digestView.setUint32(0, h0, false);
+    digestView.setUint32(4, h1, false);
+    digestView.setUint32(8, h2, false);
+    digestView.setUint32(12, h3, false);
+    digestView.setUint32(16, h4, false);
+    return digest;
+}
+function hmacSha1(key, message) {
+    const blockSize = 64;
+    let normalizedKey = key;
+    if (normalizedKey.length > blockSize) {
+        normalizedKey = sha1(normalizedKey);
+    }
+    const paddedKey = new Uint8Array(blockSize);
+    paddedKey.set(normalizedKey);
+    const innerPad = new Uint8Array(blockSize);
+    const outerPad = new Uint8Array(blockSize);
+    for (let i = 0; i < blockSize; i++) {
+        innerPad[i] = paddedKey[i] ^ 0x36;
+        outerPad[i] = paddedKey[i] ^ 0x5c;
+    }
+    return sha1(concatBytes(outerPad, sha1(concatBytes(innerPad, message))));
+}
+function signUrlToSign(urlToSign, urlSigningSecret) {
+    const keyBytes = decodeUrlSigningSecret(urlSigningSecret);
+    const signatureBytes = hmacSha1(keyBytes, utf8Encode(urlToSign));
+    return bytesToWebSafeBase64(signatureBytes);
+}
+/**
+ * 对 Maps Static API 请求 URL 追加 `signature` 参数。
+ * 签名内容为 pathname + search（不含 scheme/host），算法 HMAC-SHA1 + URL-safe Base64。
+ *
+ * @param inputUrl 完整未签名 URL（须已包含 key 等 query 参数）
+ * @param urlSigningSecret Cloud Console「URL 签名密钥」（URL-safe Base64）
+ */
+function signGoogleStaticMapUrlSync(inputUrl, urlSigningSecret) {
+    if (!inputUrl || !urlSigningSecret) {
+        throw new Error('signGoogleStaticMapUrl: inputUrl and urlSigningSecret are required');
+    }
+    const url = new globalThis.URL(inputUrl);
+    url.searchParams.delete('signature');
+    const urlToSign = `${url.pathname}${url.search}`;
+    const signature = signUrlToSign(urlToSign, urlSigningSecret);
+    return `${url.origin}${urlToSign}&signature=${signature}`;
+}
+/** 异步包装，便于与宿主 signGoogleStaticMapUrl 回调统一 Promise 接口 */
+async function signGoogleStaticMapUrl(inputUrl, urlSigningSecret) {
+    return signGoogleStaticMapUrlSync(inputUrl, urlSigningSecret);
+}
+
 var chargingPileImage = "data:image/png;base64,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";
 
-const useChargingPile = ({ viewBox, rotation = 0 }) => {
+const DEFAULT_SCREEN_PADDING = 50;
+function normalizeScreenPadding(padding, defaultValue = DEFAULT_SCREEN_PADDING) {
+    if (padding == null) {
+        return {
+            top: defaultValue,
+            right: defaultValue,
+            bottom: defaultValue,
+            left: defaultValue,
+        };
+    }
+    if (typeof padding === 'number') {
+        return { top: padding, right: padding, bottom: padding, left: padding };
+    }
+    if (padding.length === 2) {
+        const [vertical, horizontal] = padding;
+        return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+    }
+    if (padding.length === 3) {
+        const [top, horizontal, bottom] = padding;
+        return { top, right: horizontal, bottom, left: horizontal };
+    }
+    const [top, right, bottom, left] = padding;
+    return { top, right, bottom, left };
+}
+function isZeroScreenPadding(padding) {
+    return padding.top === 0 && padding.right === 0 && padding.bottom === 0 && padding.left === 0;
+}
+
+/** 拖拽超过该像素阈值时视为平移，而非点击 */
+const PAN_CLICK_THRESHOLD_PX = 5;
+/**
+ * 根据地图包围盒 + padding 计算「内容 viewBox」
+ * 用于 ChannelClipPath 裁剪，padding 为 SVG 坐标系单位
+ */
+function boundsToContentViewBox(bounds, padding) {
+    if (!Number.isFinite(bounds.minX) || !Number.isFinite(bounds.maxX)) {
+        return { x: 0, y: 0, width: 100, height: 100 };
+    }
+    const width = Math.max(bounds.maxX - bounds.minX + padding * 2, 1);
+    const height = Math.max(bounds.maxY - bounds.minY + padding * 2, 1);
+    return {
+        x: bounds.minX - padding,
+        y: bounds.minY - padding,
+        width,
+        height,
+    };
+}
+/**
+ * 在固定容器宽高比下，计算 fit 的 viewBox（等价于 SVG preserveAspectRatio="meet"）
+ *
+ * 若内容与容器比例不一致，会在 SVG 坐标系中扩展 viewBox 的宽或高，形成 letterbox 区域
+ */
+function computeFitViewBoxToContainer(content, containerWidth, containerHeight) {
+    const containerAspect = containerWidth / containerHeight;
+    const contentAspect = content.width / content.height;
+    // 内容更「宽」：扩展 viewBox 高度，上下留白
+    if (contentAspect > containerAspect) {
+        const height = content.width / containerAspect;
+        return {
+            x: content.x,
+            y: content.y - (height - content.height) / 2,
+            width: content.width,
+            height,
+        };
+    }
+    // 内容更「高」：扩展 viewBox 宽度，左右留白
+    const width = content.height * containerAspect;
+    return {
+        x: content.x - (width - content.width) / 2,
+        y: content.y,
+        width,
+        height: content.height,
+    };
+}
+/**
+ * 计算默认 fit viewBox
+ *
+ * @param screenPadding 容器四边留出的屏幕边距（px），语法同 CSS padding
+ */
+function computeFitViewBox(content, containerWidth, containerHeight, screenPadding = 0) {
+    const baseFit = computeFitViewBoxToContainer(content, containerWidth, containerHeight);
+    const pad = normalizeScreenPadding(screenPadding, 0);
+    if (isZeroScreenPadding(pad)) {
+        return baseFit;
+    }
+    const innerWidth = Math.max(containerWidth - pad.left - pad.right, 1);
+    const innerHeight = Math.max(containerHeight - pad.top - pad.bottom, 1);
+    const scaleX = innerWidth / containerWidth;
+    const scaleY = innerHeight / containerHeight;
+    const scale = Math.min(scaleX, scaleY);
+    if (!Number.isFinite(scale) || scale <= 0 || scale >= 1) {
+        return baseFit;
+    }
+    const newWidth = baseFit.width / scale;
+    const newHeight = baseFit.height / scale;
+    const centerX = baseFit.x + baseFit.width / 2;
+    const centerY = baseFit.y + baseFit.height / 2;
+    const offsetX = ((pad.left - pad.right) / 2) * (newWidth / containerWidth);
+    const offsetY = ((pad.top - pad.bottom) / 2) * (newHeight / containerHeight);
+    return {
+        x: centerX - newWidth / 2 + offsetX,
+        y: centerY - newHeight / 2 + offsetY,
+        width: newWidth,
+        height: newHeight,
+    };
+}
+function viewBoxToString(viewBox) {
+    return `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`;
+}
+/** SVG preserveAspectRatio="xMidYMid meet" 下的实际缩放比（地图单位 → 屏幕 px） */
+function getViewBoxMeetScale(viewBox, containerWidth, containerHeight) {
+    return Math.min(containerWidth / viewBox.width, containerHeight / viewBox.height);
+}
+/** meet 模式下 SVG 内容相对容器左上角的 letterbox 偏移及缩放比 */
+function getViewBoxMeetOffset(viewBox, containerWidth, containerHeight) {
+    const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
+    return {
+        x: (containerWidth - viewBox.width * scale) / 2,
+        y: (containerHeight - viewBox.height * scale) / 2,
+        scale,
+    };
+}
+/** 将屏幕坐标绕指定中心旋转（度，顺时针） */
+function rotatePointAround(x, y, centerX, centerY, rotationDeg) {
+    if (rotationDeg === 0)
+        return { x, y };
+    const rad = (rotationDeg * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const dx = x - centerX;
+    const dy = y - centerY;
+    return {
+        x: centerX + dx * cos - dy * sin,
+        y: centerY + dx * sin + dy * cos,
+    };
+}
+/** 在地图坐标系内绕 viewBox 中心旋转（与 SVG transform="rotate(deg, cx, cy)" 一致） */
+function rotateMapPointAroundViewBoxCenter(mapX, mapY, viewBox, rotationDeg) {
+    if (rotationDeg === 0)
+        return { x: mapX, y: mapY };
+    const cx = viewBox.x + viewBox.width / 2;
+    const cy = viewBox.y + viewBox.height / 2;
+    return rotatePointAround(mapX, mapY, cx, cy, rotationDeg);
+}
+function getViewBoxCenter(viewBox) {
+    return {
+        x: viewBox.x + viewBox.width / 2,
+        y: viewBox.y + viewBox.height / 2,
+    };
+}
+/**
+ * 将地图坐标转换为 HTML overlay 的定位百分比
+ * 需与 SVG viewBox + preserveAspectRatio="meet" 的渲染规则一致
+ *
+ * @returns leftPct / topPct — 相对容器宽高的百分比，配合 translate(-50%, -50%) 居中
+ */
+function mapPointToContainerPercent(mapX, mapY, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
+    const { x: offsetX, y: offsetY, scale } = getViewBoxMeetOffset(viewBox, containerWidth, containerHeight);
+    const { x: projectedX, y: projectedY } = rotateMapPointAroundViewBoxCenter(mapX, mapY, viewBox, mapRotationDeg);
+    const screenX = offsetX + (projectedX - viewBox.x) * scale;
+    const screenY = offsetY + (projectedY - viewBox.y) * scale;
+    return {
+        leftPct: (screenX / containerWidth) * 100,
+        topPct: (screenY / containerHeight) * 100,
+    };
+}
+/** 计算多边形包围盒在当前视口下的屏幕宽度（px） */
+function computePolygonScreenWidthPx(points, viewBox, containerWidth, containerHeight) {
+    const valid = points.filter((point) => point.length >= 2);
+    if (valid.length === 0)
+        return 0;
+    let minX = Infinity;
+    let maxX = -Infinity;
+    for (const [x] of valid) {
+        minX = Math.min(minX, x);
+        maxX = Math.max(maxX, x);
+    }
+    const mapWidth = maxX - minX;
+    if (!Number.isFinite(mapWidth) || mapWidth <= 0)
+        return 0;
+    const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
+    return mapWidth * scale;
+}
+function scaleStrokeWidthForViewBox(baseStrokeWidth, viewBox, fitViewBox, options) {
+    const { containerWidth, containerHeight, minScreenStrokePx = 2 } = options;
+    const meetScale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
+    const fitMeetScale = getViewBoxMeetScale(fitViewBox, containerWidth, containerHeight);
+    if (meetScale <= 0 || fitMeetScale <= 0 || !Number.isFinite(baseStrokeWidth)) {
+        return baseStrokeWidth;
+    }
+    const targetScreenPx = Math.max(baseStrokeWidth * fitMeetScale, minScreenStrokePx);
+    return targetScreenPx / meetScale;
+}
+/** 屏幕拖拽像素 → viewBox 坐标增量（与 mapPointToContainerPercent 互逆，供 applyPan 使用） */
+function containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
+    const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
+    if (mapRotationDeg === 0) {
+        return {
+            dx: deltaXPx / scale,
+            dy: deltaYPx / scale,
+        };
+    }
+    // 地图在屏幕上旋转了 mapRotationDeg，将屏幕位移矢量逆旋转后再换算为 viewBox 增量
+    const rad = (-mapRotationDeg * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const mapDeltaXPx = deltaXPx * cos - deltaYPx * sin;
+    const mapDeltaYPx = deltaXPx * sin + deltaYPx * cos;
+    return {
+        dx: mapDeltaXPx / scale,
+        dy: mapDeltaYPx / scale,
+    };
+}
+/**
+ * 限制 viewBox 宽度在 zoom 范围内
+ *
+ * zoom = fitViewBox.width / viewBox.width
+ * - zoom 越大 → viewBox 越小 → 放得越大
+ * - minZoom=0.5 → 最多缩小到 fit 的 2 倍视野（viewBox.width 最大为 fit/0.5）
+ * - maxZoom=4   → 最多放大 4 倍（viewBox.width 最小为 fit/4）
+ */
+function clampViewBoxWidth(width, fitViewBox, minZoom, maxZoom) {
+    const minWidth = fitViewBox.width / maxZoom;
+    const maxWidth = fitViewBox.width / minZoom;
+    return Math.min(maxWidth, Math.max(minWidth, width));
+}
+/**
+ * 以屏幕 focal 点为中心缩放 viewBox
+ * 将容器像素坐标转换为 SVG 坐标，保持焦点下的地图点位置不变
+ *
+ * @param viewBox 缩放前的 viewBox
+ * @param newWidth 缩放后的 viewBox 宽度（高度按容器宽高比推导）
+ * @param containerWidth 容器宽度（px）
+ * @param containerHeight 容器高度（px）
+ * @param focalX 焦点相对容器左上角的 X（px）
+ * @param focalY 焦点相对容器左上角的 Y（px）
+ */
+function resizeViewBoxAroundPoint(viewBox, newWidth, containerWidth, containerHeight, focalX, focalY) {
+    const containerAspect = containerWidth / containerHeight;
+    const newHeight = newWidth / containerAspect;
+    const relX = focalX / containerWidth;
+    const relY = focalY / containerHeight;
+    const svgFocalX = viewBox.x + relX * viewBox.width;
+    const svgFocalY = viewBox.y + relY * viewBox.height;
+    return {
+        x: svgFocalX - relX * newWidth,
+        y: svgFocalY - relY * newHeight,
+        width: newWidth,
+        height: newHeight,
+    };
+}
+
+const useChargingPile = ({ viewBox, rotation = 0, viewRotationMode = 'overlay-parent', containerWidth, containerHeight, }) => {
     const { svgElementDatas } = useSvgEditContext();
     const { sn } = useCommonContext();
+    const useMeetPositioning = containerWidth != null &&
+        containerHeight != null &&
+        containerWidth > 0 &&
+        containerHeight > 0;
     const items = useMemo(() => {
         if (!svgElementDatas || !viewBox)
             return [];
@@ -23169,13 +23639,26 @@ const useChargingPile = ({ viewBox, rotation = 0 }) => {
             const direction = element?.direction || 0;
             const angle = (direction * 180) / Math.PI;
             const rotationDegree = 270 - angle; // 正东是正方向，需要处理下
-            const actualRotation = rotationDegree - rotation;
-            const relX = (center[0] - viewBox.x) / viewBox.width;
-            const relY = (center[1] - viewBox.y) / viewBox.height;
-            if (isFinite(relX) && isFinite(relY)) {
+            const actualRotation = viewRotationMode === 'svg-transform'
+                ? rotationDegree
+                : rotationDegree - rotation;
+            let leftPct;
+            let topPct;
+            if (useMeetPositioning) {
+                const position = mapPointToContainerPercent(center[0], center[1], viewBox, containerWidth, containerHeight, viewRotationMode === 'svg-transform' ? rotation : 0);
+                leftPct = position.leftPct;
+                topPct = position.topPct;
+            }
+            else {
+                const relX = (center[0] - viewBox.x) / viewBox.width;
+                const relY = (center[1] - viewBox.y) / viewBox.height;
+                leftPct = relX * 100;
+                topPct = relY * 100;
+            }
+            if (isFinite(leftPct) && isFinite(topPct)) {
                 results.push({
-                    leftPct: relX * 100,
-                    topPct: relY * 100,
+                    leftPct,
+                    topPct,
                     size,
                     rotateDeg: actualRotation,
                     imageSrc: chargingPileImage,
@@ -23183,12 +23666,30 @@ const useChargingPile = ({ viewBox, rotation = 0 }) => {
             }
         }
         return results;
-    }, [svgElementDatas, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height, rotation, sn]);
+    }, [
+        svgElementDatas,
+        viewBox?.x,
+        viewBox?.y,
+        viewBox?.width,
+        viewBox?.height,
+        rotation,
+        viewRotationMode,
+        sn,
+        useMeetPositioning,
+        containerWidth,
+        containerHeight,
+    ]);
     return items;
 };
 
-const CharginPile = React__default.memo(({ viewBox, rotation = 0, sizeScale = 1, isHighlight = true }) => {
-    const items = useChargingPile({ viewBox: viewBox || null, rotation });
+const CharginPile = React__default.memo(({ viewBox, rotation = 0, viewRotationMode = 'overlay-parent', containerWidth, containerHeight, sizeScale = 1, sizeInSvgUnits = false, minDisplaySizePx, isHighlight = true, }) => {
+    const items = useChargingPile({
+        viewBox: viewBox || null,
+        rotation,
+        viewRotationMode,
+        containerWidth,
+        containerHeight,
+    });
     const containerStyle = useMemo(() => ({
         position: 'absolute',
         top: 0,
@@ -23199,10 +23700,19 @@ const CharginPile = React__default.memo(({ viewBox, rotation = 0, sizeScale = 1,
         zIndex: 750,
         opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
     }), [isHighlight]);
+    const useMinPx = Boolean(sizeInSvgUnits && viewBox && minDisplaySizePx != null && minDisplaySizePx > 0);
     return (jsx("div", { style: containerStyle, children: items?.map((item, idx) => (jsx("div", { className: "charging-pile", style: {
                 position: 'absolute',
-                width: item.size * sizeScale,
-                height: item.size * sizeScale,
+                width: sizeInSvgUnits && viewBox
+                    ? useMinPx
+                        ? `max(${minDisplaySizePx}px, ${(item.size / Math.max(viewBox.width, 1)) * 100 * sizeScale}%)`
+                        : `${(item.size / Math.max(viewBox.width, 1)) * 100 * sizeScale}%`
+                    : item.size * sizeScale,
+                height: sizeInSvgUnits && viewBox
+                    ? useMinPx
+                        ? `max(${minDisplaySizePx}px, ${(item.size / Math.max(viewBox.height, 1)) * 100 * sizeScale}%)`
+                        : `${(item.size / Math.max(viewBox.height, 1)) * 100 * sizeScale}%`
+                    : item.size * sizeScale,
                 left: `${item.leftPct}%`,
                 top: `${item.topPct}%`,
                 transform: `translate(-50%, -50%) rotate(${item.rotateDeg}deg)`,
@@ -23213,8 +23723,11 @@ const CharginPile = React__default.memo(({ viewBox, rotation = 0, sizeScale = 1,
 
 const MAX_STATIC_SIZE = 640;
 const MAX_STATIC_MAP_RETRY = 3;
+const STATIC_MAP_RETRY_COOLDOWN_MS = 5000;
+/** 放大镜内充电桩屏幕像素下限，避免过小导致通道与桩视觉错位 */
+const MAGNIFIER_CHARGING_PILE_MIN_DISPLAY_PX = 20;
 const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 122, 51, 0.1)', strokeColor = 'rgba(255, 122, 51, 1)', strokeWidth = 2, zoom = 3, size = 200, }) => {
-    const { svgViewBox, mapRef, googleMapStaticApiKey, drag } = useCommonContext();
+    const { svgViewBox, mapRef, googleMapStaticApiKey, googleMapStaticUrlSigningSecret, signGoogleStaticMapUrl: signGoogleStaticMapUrl$1, drag, } = useCommonContext();
     const { svgElementDatas, svgRef } = useSvgEditContext();
     const { editMapInfo } = useMapEditContext();
     const [magnifierPosition, setMagnifierPosition] = useState({ x: 0, y: 0 });
@@ -23227,6 +23740,7 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
     const hasInitializedSideRef = useRef(false);
     const [mapImageFrame, setMapImageFrame] = useState(null);
     const [staticMapRetryCount, setStaticMapRetryCount] = useState(0);
+    const [staticMapBlockedUntil, setStaticMapBlockedUntil] = useState(0);
     // 获取当前正在拖拽的禁区 ID
     const currentObstacleId = editMapInfo?.selectElement?.id;
     // 计算当前 SVG 单位到屏幕像素的比例（用于实现真正 1:1 预览）
@@ -23277,6 +23791,11 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
             // });
             setMapImageFrame(null);
             setStaticMapRetryCount(0);
+            setStaticMapBlockedUntil(0);
+            return;
+        }
+        // 弱网连续失败时进入短暂冷却，避免重试风暴导致底图反复闪烁
+        if (Date.now() < staticMapBlockedUntil) {
             return;
         }
         const mapDiv = mapRef.getDiv?.();
@@ -23289,86 +23808,119 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
             // });
             setMapImageFrame(null);
             setStaticMapRetryCount(0);
+            setStaticMapBlockedUntil(0);
             return;
         }
         const mapRect = mapDiv.getBoundingClientRect();
         const svgPoint = svgRef.createSVGPoint();
         // 只要有 key 就尝试 static api；请求失败时不截图，直接回退灰色背景
         if (googleMapStaticApiKey) {
-            // console.log('[Magnifier] Background source: static api viewport snapshot');
-            const mapBounds = mapRef.getBounds?.();
-            if (!mapBounds) {
-                // console.log('[Magnifier] Skip static map effect: mapBounds missing');
-                setMapImageFrame(null);
-                return;
-            }
-            const screenToSvg = (screenX, screenY) => {
-                svgPoint.x = screenX;
-                svgPoint.y = screenY;
-                const p = svgPoint.matrixTransform(inverseCtm);
-                return { x: p.x, y: p.y };
+            let cancelled = false;
+            (async () => {
+                // console.log('[Magnifier] Background source: static api viewport snapshot');
+                const mapBounds = mapRef.getBounds?.();
+                if (!mapBounds) {
+                    // console.log('[Magnifier] Skip static map effect: mapBounds missing');
+                    if (!cancelled) {
+                        setMapImageFrame(null);
+                    }
+                    return;
+                }
+                const screenToSvg = (screenX, screenY) => {
+                    svgPoint.x = screenX;
+                    svgPoint.y = screenY;
+                    const p = svgPoint.matrixTransform(inverseCtm);
+                    return { x: p.x, y: p.y };
+                };
+                // 使用当前地图视口矩形四角，将屏幕坐标映射到 SVG 坐标，确保底图与主视口对齐
+                const topLeftSvg = screenToSvg(mapRect.left, mapRect.top);
+                const topRightSvg = screenToSvg(mapRect.right, mapRect.top);
+                const bottomLeftSvg = screenToSvg(mapRect.left, mapRect.bottom);
+                if (!topLeftSvg || !topRightSvg || !bottomLeftSvg) {
+                    if (!cancelled) {
+                        setMapImageFrame(null);
+                    }
+                    return;
+                }
+                // 把当前主地图可视区域尺寸，按比例压到 Static API 允许的最大尺寸以内(受 Static API 640 上限约束）)，同时不改变宽高比。
+                const mapWidth = Math.max(1, Math.round(mapRect.width));
+                const mapHeight = Math.max(1, Math.round(mapRect.height));
+                const shrinkRatio = Math.min(1, MAX_STATIC_SIZE / Math.max(mapWidth, mapHeight));
+                const staticWidth = Math.max(1, Math.round(mapWidth * shrinkRatio));
+                const staticHeight = Math.max(1, Math.round(mapHeight * shrinkRatio));
+                const center = mapBounds.getCenter();
+                const currentZoom = mapRef.getZoom() || 20;
+                // 尺寸缩小后同步补偿 zoom，保持与当前主图一致的地理覆盖范围
+                const zoomCompensation = Math.log2(shrinkRatio);
+                const adjustedZoom = currentZoom + zoomCompensation;
+                const staticZoom = Math.max(0, Math.min(Math.floor(adjustedZoom), 22));
+                const unsignedStaticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat()},${center.lng()}&zoom=${staticZoom}&size=${staticWidth}x${staticHeight}&maptype=satellite&key=${googleMapStaticApiKey}`;
+                // 可选：对 Static Map URL 做 Google 数字签名（宿主回调优先，其次客户端 signing secret）
+                let staticMapUrl = unsignedStaticMapUrl;
+                try {
+                    if (signGoogleStaticMapUrl$1) {
+                        staticMapUrl = await Promise.resolve(signGoogleStaticMapUrl$1(unsignedStaticMapUrl));
+                    }
+                    else if (googleMapStaticUrlSigningSecret) {
+                        staticMapUrl = await signGoogleStaticMapUrl(unsignedStaticMapUrl, googleMapStaticUrlSigningSecret);
+                        console.log('[Magnifier] staticMapUrl', staticMapUrl);
+                    }
+                }
+                catch (error) {
+                    console.warn('[Magnifier] Static map URL signing failed', error);
+                    if (!cancelled) {
+                        setMapImageFrame(null);
+                    }
+                    return;
+                }
+                // 通过三角点推导静态图在 SVG 中的宽高和旋转角
+                // Math.hypot(x, y) 等价于 sqrt(x*x + y*y)，计算两点之间的距离
+                const width = Math.hypot(topRightSvg.x - topLeftSvg.x, topRightSvg.y - topLeftSvg.y);
+                const height = Math.hypot(bottomLeftSvg.x - topLeftSvg.x, bottomLeftSvg.y - topLeftSvg.y);
+                // Math.atan2(y, x) 计算反正切值，返回 [-π, π] 弧度，*180/π 转换为角度
+                const rotationDeg = (Math.atan2(topRightSvg.y - topLeftSvg.y, topRightSvg.x - topLeftSvg.x) * 180) / Math.PI;
+                // Static API zoom 只能取整；额外补偿小数部分，避免底图视觉偏小
+                // 在有旋转的坐标系里，做“以中心为锚点”的等比放大补偿。
+                const fractionalZoomScale = Math.pow(2, adjustedZoom - staticZoom); //算出“还差多少缩放比例”。例子：adjustedZoom=19.6，staticZoom=19，差 0.6，比例是 2^0.6 ≈ 1.515。
+                //把原始 width/height 乘这个比例，得到补偿后的尺寸。
+                const compensatedWidth = width * fractionalZoomScale;
+                const compensatedHeight = height * fractionalZoomScale;
+                //尺寸变大后，多出来的宽/高的一半（要从两边均匀扩张）。
+                const offsetAlongX = (compensatedWidth - width) / 2;
+                const offsetAlongY = (compensatedHeight - height) / 2;
+                //“右方向”单位向量（从左上指向右上），因为图可能旋转了，不能只按水平 x 轴算。
+                const unitX = width > 0 ? (topRightSvg.x - topLeftSvg.x) / width : 1;
+                const unitY = width > 0 ? (topRightSvg.y - topLeftSvg.y) / width : 0;
+                //“下方向”单位向量（从左上指向左下），同理用于旋转场景。
+                const unitDownX = height > 0 ? (bottomLeftSvg.x - topLeftSvg.x) / height : 0;
+                const unitDownY = height > 0 ? (bottomLeftSvg.y - topLeftSvg.y) / height : 0;
+                /**
+                 * 计算补偿后的新左上角：
+                 * 从原左上角沿“右方向”回退半个扩展量，再沿“下方向”回退半个扩展量。
+                 * 这样放大后仍以原区域中心为中心，不会放大后位置偏移。
+                 */
+                const compensatedTopLeftX = topLeftSvg.x - unitX * offsetAlongX - unitDownX * offsetAlongY;
+                const compensatedTopLeftY = topLeftSvg.y - unitY * offsetAlongX - unitDownY * offsetAlongY;
+                if (cancelled) {
+                    return;
+                }
+                setMapImageFrame({
+                    url: staticMapUrl,
+                    x: compensatedTopLeftX,
+                    y: compensatedTopLeftY,
+                    width: compensatedWidth,
+                    height: compensatedHeight,
+                    transform: `rotate(${rotationDeg} ${compensatedTopLeftX} ${compensatedTopLeftY})`,
+                });
+            })();
+            return () => {
+                cancelled = true;
             };
-            // 使用当前地图视口矩形四角，将屏幕坐标映射到 SVG 坐标，确保底图与主视口对齐
-            const topLeftSvg = screenToSvg(mapRect.left, mapRect.top);
-            const topRightSvg = screenToSvg(mapRect.right, mapRect.top);
-            const bottomLeftSvg = screenToSvg(mapRect.left, mapRect.bottom);
-            if (!topLeftSvg || !topRightSvg || !bottomLeftSvg) {
-                setMapImageFrame(null);
-                return;
-            }
-            // 把当前主地图可视区域尺寸，按比例压到 Static API 允许的最大尺寸以内(受 Static API 640 上限约束）)，同时不改变宽高比。
-            const mapWidth = Math.max(1, Math.round(mapRect.width));
-            const mapHeight = Math.max(1, Math.round(mapRect.height));
-            const shrinkRatio = Math.min(1, MAX_STATIC_SIZE / Math.max(mapWidth, mapHeight));
-            const staticWidth = Math.max(1, Math.round(mapWidth * shrinkRatio));
-            const staticHeight = Math.max(1, Math.round(mapHeight * shrinkRatio));
-            const center = mapBounds.getCenter();
-            const currentZoom = mapRef.getZoom() || 20;
-            // 尺寸缩小后同步补偿 zoom，保持与当前主图一致的地理覆盖范围
-            const zoomCompensation = Math.log2(shrinkRatio);
-            const adjustedZoom = currentZoom + zoomCompensation;
-            const staticZoom = Math.max(0, Math.min(Math.floor(adjustedZoom), 22));
-            const staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat()},${center.lng()}&zoom=${staticZoom}&size=${staticWidth}x${staticHeight}&maptype=satellite&key=${googleMapStaticApiKey}`;
-            // 通过三角点推导静态图在 SVG 中的宽高和旋转角
-            // Math.hypot(x, y) 等价于 sqrt(x*x + y*y)，计算两点之间的距离
-            const width = Math.hypot(topRightSvg.x - topLeftSvg.x, topRightSvg.y - topLeftSvg.y);
-            const height = Math.hypot(bottomLeftSvg.x - topLeftSvg.x, bottomLeftSvg.y - topLeftSvg.y);
-            // Math.atan2(y, x) 计算反正切值，返回 [-π, π] 弧度，*180/π 转换为角度
-            const rotationDeg = (Math.atan2(topRightSvg.y - topLeftSvg.y, topRightSvg.x - topLeftSvg.x) * 180) / Math.PI;
-            // Static API zoom 只能取整；额外补偿小数部分，避免底图视觉偏小
-            // 在有旋转的坐标系里，做“以中心为锚点”的等比放大补偿。
-            const fractionalZoomScale = Math.pow(2, adjustedZoom - staticZoom); //算出“还差多少缩放比例”。例子：adjustedZoom=19.6，staticZoom=19，差 0.6，比例是 2^0.6 ≈ 1.515。
-            //把原始 width/height 乘这个比例，得到补偿后的尺寸。
-            const compensatedWidth = width * fractionalZoomScale;
-            const compensatedHeight = height * fractionalZoomScale;
-            //尺寸变大后，多出来的宽/高的一半（要从两边均匀扩张）。
-            const offsetAlongX = (compensatedWidth - width) / 2;
-            const offsetAlongY = (compensatedHeight - height) / 2;
-            //“右方向”单位向量（从左上指向右上），因为图可能旋转了，不能只按水平 x 轴算。
-            const unitX = width > 0 ? (topRightSvg.x - topLeftSvg.x) / width : 1;
-            const unitY = width > 0 ? (topRightSvg.y - topLeftSvg.y) / width : 0;
-            //“下方向”单位向量（从左上指向左下），同理用于旋转场景。
-            const unitDownX = height > 0 ? (bottomLeftSvg.x - topLeftSvg.x) / height : 0;
-            const unitDownY = height > 0 ? (bottomLeftSvg.y - topLeftSvg.y) / height : 1;
-            /**
-             * 计算补偿后的新左上角：
-             * 从原左上角沿“右方向”回退半个扩展量，再沿“下方向”回退半个扩展量。
-             * 这样放大后仍以原区域中心为中心，不会放大后位置偏移。
-             */
-            const compensatedTopLeftX = topLeftSvg.x - unitX * offsetAlongX - unitDownX * offsetAlongY;
-            const compensatedTopLeftY = topLeftSvg.y - unitY * offsetAlongX - unitDownY * offsetAlongY;
-            setMapImageFrame({
-                url: staticMapUrl,
-                x: compensatedTopLeftX,
-                y: compensatedTopLeftY,
-                width: compensatedWidth,
-                height: compensatedHeight,
-                transform: `rotate(${rotationDeg} ${compensatedTopLeftX} ${compensatedTopLeftY})`,
-            });
         }
         else {
             setMapImageFrame(null);
             setStaticMapRetryCount(0);
+            setStaticMapBlockedUntil(0);
             // console.log('[Magnifier] Background source: gray fallback (no static api key)');
         }
     }, [
@@ -23383,7 +23935,10 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
         size,
         zoom,
         googleMapStaticApiKey,
+        googleMapStaticUrlSigningSecret,
+        signGoogleStaticMapUrl$1,
         staticMapRetryCount,
+        staticMapBlockedUntil,
     ]);
     useLayoutEffect(() => {
         if (!visible) {
@@ -23519,6 +24074,7 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
                 }, children: [mapImageFrame && (jsx("image", { href: mapImageFrame.url, x: mapImageFrame.x, y: mapImageFrame.y, width: mapImageFrame.width, height: mapImageFrame.height, transform: mapImageFrame.transform, preserveAspectRatio: "none", style: { opacity: 1 }, onLoad: () => {
                             // console.log('✅ Map background loaded in magnifier');
                             setStaticMapRetryCount(0);
+                            setStaticMapBlockedUntil(0);
                         }, onError: (_e) => {
                             // console.error('❌ Failed to load map background in magnifier', {
                             //   retryCount: staticMapRetryCount,
@@ -23529,7 +24085,8 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
                             setStaticMapRetryCount((prev) => {
                                 if (prev < MAX_STATIC_MAP_RETRY)
                                     return prev + 1;
-                                setMapImageFrame(null);
+                                // 重试上限后进入冷却，不立刻清空已显示底图，避免弱网下闪烁
+                                setStaticMapBlockedUntil(Date.now() + STATIC_MAP_RETRY_COOLDOWN_MS);
                                 return 0;
                             });
                         } }, `magnifier-static-map-${staticMapRetryCount}`)), svgElementDatas &&
@@ -23555,14 +24112,16 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
                                     ? 3.6 / styleZoomFactor
                                     : 3 / styleZoomFactor;
                                 return (jsx("circle", { cx: x, cy: y, r: pointRadius, fill: pointFill, stroke: pointStroke, strokeWidth: pointStrokeWidth }, idx));
-                            })] })), dragState.dragType === 'new' && dragState.edgeInfo && (jsx(Fragment, { children: jsx("line", { x1: dragState.edgeInfo.startPoint.x, y1: dragState.edgeInfo.startPoint.y, x2: dragState.edgeInfo.endPoint.x, y2: dragState.edgeInfo.endPoint.y, stroke: "#999", strokeWidth: (strokeWidth * 3.2) / styleZoomFactor, strokeDasharray: `${6 / styleZoomFactor},${6 / styleZoomFactor}` }) }))] }), jsx(CharginPile, { viewBox: magnifierViewBox || null, rotation: actureRotate, sizeScale: Math.max(1, zoom) })] }));
+                            })] })), dragState.dragType === 'new' && dragState.edgeInfo && (jsx(Fragment, { children: jsx("line", { x1: dragState.edgeInfo.startPoint.x, y1: dragState.edgeInfo.startPoint.y, x2: dragState.edgeInfo.endPoint.x, y2: dragState.edgeInfo.endPoint.y, stroke: "#999", strokeWidth: (strokeWidth * 3.2) / styleZoomFactor, strokeDasharray: `${6 / styleZoomFactor},${6 / styleZoomFactor}` }) }))] }), jsx(CharginPile, { viewBox: magnifierViewBox || null, rotation: actureRotate, sizeInSvgUnits: true, minDisplaySizePx: MAGNIFIER_CHARGING_PILE_MIN_DISPLAY_PX, 
+                // 充电桩最多保持原始尺寸，不允许放大超过 1 倍
+                sizeScale: Math.min(1, 1 / styleZoomFactor) })] }));
     // 使用 Portal 渲染到 body，避免层级问题
     return ReactDOM.createPortal(magnifierContent, document.body);
 };
 
-var css_248z$6 = ".index-module_pointerCursor__Ee6pr {\n  cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n  cursor: grabbing;\n}\n\n.index-module_notCreate__bFnkV {\n  cursor: no-drop;\n}";
-var styles$6 = {"pointerCursor":"index-module_pointerCursor__Ee6pr","polygonPath":"index-module_polygonPath__PynOn","dragging":"index-module_dragging__xSFdO","notCreate":"index-module_notCreate__bFnkV"};
-styleInject(css_248z$6);
+var css_248z$8 = ".index-module_pointerCursor__Ee6pr {\n  cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n  cursor: grabbing;\n}\n\n.index-module_notCreate__bFnkV {\n  cursor: no-drop;\n}";
+var styles$8 = {"pointerCursor":"index-module_pointerCursor__Ee6pr","polygonPath":"index-module_polygonPath__PynOn","dragging":"index-module_dragging__xSFdO","notCreate":"index-module_notCreate__bFnkV"};
+styleInject(css_248z$8);
 
 /**
  * 几何计算工具函数
@@ -23985,28 +24544,102 @@ const useCheckElement = () => {
     };
 };
 
+var css_248z$7 = ".Tooltip-module_tooltip__Wexlk {\n  position: fixed;\n  background-color: #fff;\n  border-radius: 4px;\n  height: 20px;\n  line-height: 20px;\n  font-size: 12px;\n  color: #211F1F;\n  padding: 0 4px;\n  white-space: nowrap;\n  z-index: 9999;\n  cursor: pointer;\n  user-select: none;\n}\n.Tooltip-module_tooltip__Wexlk.Tooltip-module_tooltipHover__Tfqme {\n  height: 30px;\n  padding: 5px 12px;\n}\n.Tooltip-module_tooltip__Wexlk.Tooltip-module_tooltipHover__Tfqme:hover {\n  background-color: #FFEFE6;\n  color: #FF5A00;\n}";
+var styles$7 = {"tooltip":"Tooltip-module_tooltip__Wexlk","tooltipHover":"Tooltip-module_tooltipHover__Tfqme"};
+styleInject(css_248z$7);
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames () {
+			var classes = '';
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (arg) {
+					classes = appendClass(classes, parseValue(arg));
+				}
+			}
+
+			return classes;
+		}
+
+		function parseValue (arg) {
+			if (typeof arg === 'string' || typeof arg === 'number') {
+				return arg;
+			}
+
+			if (typeof arg !== 'object') {
+				return '';
+			}
+
+			if (Array.isArray(arg)) {
+				return classNames.apply(null, arg);
+			}
+
+			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+				return arg.toString();
+			}
+
+			var classes = '';
+
+			for (var key in arg) {
+				if (hasOwn.call(arg, key) && arg[key]) {
+					classes = appendClass(classes, key);
+				}
+			}
+
+			return classes;
+		}
+
+		function appendClass (value, newClass) {
+			if (!newClass) {
+				return value;
+			}
+		
+			if (value) {
+				return value + ' ' + newClass;
+			}
+		
+			return value + newClass;
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}()); 
+} (classnames));
+
+var classnamesExports = classnames.exports;
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
 const Tooltip = ({ open, x, y, text, style, onClick }) => {
     if (!open)
         return null;
     const tooltipStyle = {
-        position: 'fixed',
         left: x,
         top: y,
-        backgroundColor: '#fff',
-        borderRadius: '4px',
-        height: '20px',
-        lineHeight: '16px',
-        fontSize: '12px',
-        color: '#211F1F',
-        padding: '2px 4px',
-        whiteSpace: 'nowrap',
-        zIndex: 9999,
-        cursor: 'pointer',
-        userSelect: 'none',
         ...style,
     };
     // 使用 createPortal 挂载到 body
-    return createPortal(jsx("div", { style: tooltipStyle, onClick: (e) => {
+    return createPortal(jsx("div", { className: classNames(styles$7.tooltip, {
+            [styles$7.tooltipHover]: !!onClick,
+        }), style: tooltipStyle, onClick: (e) => {
             e.preventDefault();
             e.stopPropagation();
             onClick?.();
@@ -24104,7 +24737,7 @@ const createPathData = (points) => {
 };
 const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor = 'rgba(0, 0, 0, 0.1)', hoverFillColor = '', fillOpacity = 1, strokeColor = '#000', strokeWidth = 2, strokeOpacity = 1, createMode = false, showPoints = false, onPointClick, completed = false, mousePos = null, editMode = false, onCoordinatesChange, onPathClick, onPolygonClick, onVertexDelete, draggable = true, // 新增参数，如果未指定则根据createMode和editMode自动判断
  }) => {
-    const { overlayScale, unitType, showStraddleBoundaryBorder, platform, onH5FirstSelectObstaclePoint } = useCommonContext();
+    const { overlayScale, unitType, showStraddleBoundaryBorder, platform, locale, onH5FirstSelectObstaclePoint, } = useCommonContext();
     const { onHandleEvent } = useMapEditContext();
     const { svgRef } = useSvgEditContext();
     const [dragState, setDragState] = useState({
@@ -24152,11 +24785,12 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
     const [tooltipIndex, setTooltipIndex] = useState(null);
     const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
     const [completeTooltipOpen, setCompleteTooltipOpen] = useState(false);
+    const [moveTooltipOpen, setMoveTooltipOpen] = useState(false);
     const updateTooltipPos = (target) => {
         const rect = target.getBoundingClientRect();
         setTooltipPos({
             x: rect.left + rect.width + 4,
-            y: rect.top - 10
+            y: rect.top - 10,
         });
     };
     // 处理顶点点击（仅透出点击；不触发删除）
@@ -24291,6 +24925,13 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
             edgeInfo: edgeInfo,
             dragType: 'new',
         });
+        // 边上新点：insertIndex 可能与当前 selectedVertexIndex 相同（例如原选中 2，在 1-2 间插入后仍写 2），
+        // React 会跳过 setState，依赖 selectedVertexIndex 的 useLayoutEffect 不会跑，故用微任务直接震一次
+        if (platform === PlatformType.H5 && editMapInfo?.elementType === DataType.OBSTACLE) {
+            void Promise.resolve().then(() => {
+                onH5FirstSelectObstaclePoint?.();
+            });
+        }
         // 将新创建的点设为选中态，便于后续直接拖拽
         setSelectedVertexIndex(insertIndex);
     }, [
@@ -24301,6 +24942,9 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
         coordinates,
         getSVGCoordinates,
         calculatePerpendicularFoot$1,
+        platform,
+        editMapInfo?.elementType,
+        onH5FirstSelectObstaclePoint,
     ]);
     // H5平台长按边线创建新顶点
     const handleEdgeLongPressStart = useCallback((e, edgeStartIndex) => {
@@ -24345,6 +24989,8 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
     const vertexLongPressTimerRef = useRef(null);
     const isVertexLongPressedRef = useRef(false);
     const longPressVertexIndexRef = useRef(-1);
+    /** 长按选中顶点且 index 发生变化时置 true，在 useLayoutEffect 里再触发震动，避免早于视觉选中态 */
+    const pendingH5ObstacleSelectHapticRef = useRef(false);
     // 长按拖拽判定相关
     const touchStartPosRef = useRef(null);
     const hasStartedDragViaLongPressRef = useRef(false);
@@ -24365,13 +25011,21 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
         vertexLongPressTimerRef.current = window.setTimeout(() => {
             isVertexLongPressedRef.current = true;
             setSelectedVertexIndex((prev) => {
-                if (prev !== index) {
-                    onH5FirstSelectObstaclePoint?.();
-                }
+                pendingH5ObstacleSelectHapticRef.current = prev !== index;
                 return index;
             });
         }, 1000);
-    }, [editMode, createMode, completed, dragState.isDragging, onH5FirstSelectObstaclePoint]);
+    }, [editMode, createMode, completed, dragState.isDragging]);
+    useLayoutEffect(() => {
+        if (!pendingH5ObstacleSelectHapticRef.current)
+            return;
+        pendingH5ObstacleSelectHapticRef.current = false;
+        if (platform !== PlatformType.H5)
+            return;
+        if (editMapInfo?.elementType !== DataType.OBSTACLE)
+            return;
+        onH5FirstSelectObstaclePoint?.();
+    }, [selectedVertexIndex, platform, editMapInfo?.elementType, onH5FirstSelectObstaclePoint]);
     const handleVertexLongPressEnd = useCallback(() => {
         if (vertexLongPressTimerRef.current !== null) {
             window.clearTimeout(vertexLongPressTimerRef.current);
@@ -24400,8 +25054,8 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
     }, [dragState.currentPosition, checkCanNotCreateAtPosition, coordinates]);
     const generateVertexClassName = useMemo(() => {
         if (!dragState.isDragging)
-            return styles$6.pointerCursor;
-        return showNotCreateCursor ? styles$6.notCreate : styles$6.dragging;
+            return styles$8.pointerCursor;
+        return showNotCreateCursor ? styles$8.notCreate : styles$8.dragging;
     }, [dragState.isDragging, showNotCreateCursor]);
     // 使用 useRef 来存储 requestAnimationFrame ID
     const rafIdRef = useRef(null);
@@ -24692,7 +25346,7 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                         WebkitTouchCallout: 'none',
                                         touchAction: 'none',
                                     } })] }));
-                    })()] })), renderCoordinates.length >= 2 && (jsx("polygon", { className: canSelect ? styles$6.pointerCursor : '', points: polygonPoints, fill: isHover ? (hoverFillColor || fillColor) : fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
+                    })()] })), renderCoordinates.length >= 2 && (jsx("polygon", { className: canSelect ? styles$8.pointerCursor : '', points: polygonPoints, fill: isHover ? hoverFillColor || fillColor : fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
                 , onClick: onPolygonClick })), jsx("g", { children: renderCoordinates.length >= 2 &&
                     pathSegments.map((segment, index) => {
                         if (segment.points.length < 2)
@@ -24700,14 +25354,14 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                         const pathData = createPathData(segment.points);
                         const isDash = segment.type === 1;
                         if (isDash && showStraddleBoundaryBorder) {
-                            return (jsx(DashPath, { className: canSelect ? styles$6.polygonPath : '', points: segment.points, stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity }, index));
+                            return (jsx(DashPath, { className: canSelect ? styles$8.polygonPath : '', points: segment.points, stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity }, index));
                         }
                         return (jsxs(Fragment, { children: [(editMode || createMode) && (jsx("path", { d: pathData, fill: "none", stroke: '#fff', strokeWidth: strokeWidth * 2, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", style: {
                                         userSelect: 'none',
                                         WebkitUserSelect: 'none',
                                         WebkitTouchCallout: 'none',
                                         touchAction: 'none',
-                                    } }, 'warp' + index)), jsx("path", { d: pathData, fill: "none", stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$6.polygonPath : '', vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
+                                    } }, 'warp' + index)), jsx("path", { d: pathData, fill: "none", stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$8.polygonPath : '', vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
                                         userSelect: 'none',
                                         WebkitUserSelect: 'none',
                                         WebkitTouchCallout: 'none',
@@ -24718,14 +25372,29 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                 renderCoordinates.map((coord, index) => {
                     const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
                     const isDashPath = coord[2] === 1;
-                    return (jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: platform === PlatformType.H5 ? strokeWidth * 3 : strokeWidth, className: editMode ? styles$6.pointerCursor : '', style: {
-                            userSelect: 'none',
-                            WebkitUserSelect: 'none',
-                            WebkitTouchCallout: 'none',
-                            touchAction: 'none',
-                        }, vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
-                            ? {
-                                onTouchStart: createReactEventHandler((e) => handleEdgeLongPressStart(e, index)),
+                    const edgeLineCommon = {
+                        x1: coord[0],
+                        y1: coord[1],
+                        x2: nextCoord[0],
+                        y2: nextCoord[1],
+                    };
+                    const edgeLineStyle = {
+                        userSelect: 'none',
+                        WebkitUserSelect: 'none',
+                        WebkitTouchCallout: 'none',
+                        touchAction: 'none',
+                    };
+                    // H5 实线：透明粗线仅作长按热区，描边只看上方 path；H5 虚线/Web：沿用透明或主题色边线 + 对应事件（合并为一个 line，避免两段重复）
+                    const isH5SolidHitOnly = platform === PlatformType.H5 && ((editMode && !isDashPath) || createMode);
+                    const edgeStroke = isH5SolidHitOnly || isDashPath ? 'transparent' : strokeColor;
+                    const edgeStrokeWidth = isH5SolidHitOnly
+                        ? strokeWidth * 12
+                        : platform === PlatformType.H5
+                            ? strokeWidth * 2
+                            : strokeWidth;
+                    return (jsx("line", { ...edgeLineCommon, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, ...(isH5SolidHitOnly ? { strokeLinecap: 'round' } : {}), className: editMode ? styles$8.pointerCursor : '', style: edgeLineStyle, vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
+                            ? {
+                                onTouchStart: createReactEventHandler((e) => handleEdgeLongPressStart(e, index)),
                                 onTouchEnd: createReactEventHandler(() => handleEdgeLongPressEnd()),
                                 onTouchCancel: createReactEventHandler(() => handleEdgeLongPressEnd()),
                             }
@@ -24793,7 +25462,7 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                         isDoubleClickingRef.current = false;
                                     }, 300);
                                     // 打开删除确认 Tooltip（仅在可编辑时）
-                                    if (editMode || (createMode && completed)) {
+                                    if ((editMode || (createMode && completed)) && renderCoordinates.length > 3) {
                                         updateTooltipPos(e.target);
                                         setTooltipIndex(idx);
                                     }
@@ -24870,13 +25539,25 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                                 }
                                             }
                                         },
-                                        onMouseEnter: canComplete ? (e) => {
-                                            setCompleteTooltipOpen(true);
-                                            updateTooltipPos(e.target);
-                                        } : undefined,
-                                        onMouseLeave: canComplete ? () => {
-                                            setCompleteTooltipOpen(false);
-                                        } : undefined,
+                                        onMouseEnter: (e) => {
+                                            if (canComplete) {
+                                                setCompleteTooltipOpen(true);
+                                            }
+                                            if (editMode || (createMode && completed)) {
+                                                setMoveTooltipOpen(true);
+                                            }
+                                            if (tooltipIndex === null) {
+                                                updateTooltipPos(e.target);
+                                            }
+                                        },
+                                        onMouseLeave: () => {
+                                            if (canComplete) {
+                                                setCompleteTooltipOpen(false);
+                                            }
+                                            if (editMode || (createMode && completed)) {
+                                                setMoveTooltipOpen(false);
+                                            }
+                                        },
                                     }) }), platform === PlatformType.H5 && tooltipIndex === idx && coordinates.length > 3 && (jsxs("g", { transform: `translate(${coord[0] + 4 * overlayScale * 2}, ${coord[1] - 4 * overlayScale * 2}) scale(${overlayScale * 2})`, onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -24900,12 +25581,16 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                             // >
                             // </rect>
                             )] }, `vertex-${idx}`));
-                }), platform === PlatformType.WEB && tooltipIndex !== null && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: "Remove", onClick: () => {
-                    if (onVertexDelete && (editMode || (createMode && completed)) && coordinates.length > 3) {
+                }), platform === PlatformType.WEB && tooltipIndex !== null && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: locale?.['map.renderer.remove'] || 'Remove', onClick: () => {
+                    if (onVertexDelete &&
+                        (editMode || (createMode && completed)) &&
+                        coordinates.length > 3) {
                         onVertexDelete(renderCoordinates?.length - 1 - tooltipIndex);
                     }
                     setTooltipIndex(null);
-                } })), platform === PlatformType.WEB && completeTooltipOpen && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: "Click to finish" }))] }));
+                } })), platform === PlatformType.WEB && completeTooltipOpen && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: locale?.['map.renderer.tips.clickFinish'] || 'Click to finish' })), platform === PlatformType.WEB && moveTooltipOpen && tooltipIndex === null && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: renderCoordinates.length > 3 ?
+                    (locale?.['map.renderer.tips.dragAndRemove'] || 'Drag to change, double click to remove') :
+                    (locale?.['map.renderer.tips.drag'] || 'Drag to change') }))] }));
 };
 
 const MowPartitionContext = createContext({
@@ -24985,7 +25670,8 @@ const BoundaryElement = ({ data, isHover }) => {
 };
 
 const ChannelElement = ({ data }) => {
-    const { sn } = useCommonContext();
+    const { channelClipPathId } = useCommonContext();
+    const clipPathUrl = `url(#${channelClipPathId})`;
     const points = data.points;
     const style = data.style;
     let pathData = `M ${points[0][0]} ${points[0][1]}`;
@@ -24995,7 +25681,7 @@ const ChannelElement = ({ data }) => {
     const topLineWidth = dp2px(style.lineWidth).toString();
     const bottomLineWidth = dp2px(style.bottomLineWidth).toString();
     const dashLength = dp2px(style.lineWidth);
-    return (jsxs("g", { id: data.id.toString(), children: [jsx("path", { d: pathData, fill: "none", stroke: "#8498A9", strokeWidth: bottomLineWidth, strokeLinejoin: "round", opacity: style.opacity || 1, style: { clipPath: `url(#channel-clip-path-${sn})` } }), jsx("path", { d: pathData, fill: "none", stroke: "#FFFFFF", strokeWidth: topLineWidth, strokeLinejoin: "round", strokeDasharray: `${dashLength * 2} ${dashLength}`, opacity: style.opacity || 1, style: { clipPath: `url(#channel-clip-path-${sn})` } })] }));
+    return (jsxs("g", { id: data.id.toString(), children: [jsx("path", { d: pathData, fill: "none", stroke: "#8498A9", strokeWidth: bottomLineWidth, strokeLinejoin: "round", opacity: style.opacity || 1, style: { clipPath: clipPathUrl } }), jsx("path", { d: pathData, fill: "none", stroke: "#FFFFFF", strokeWidth: topLineWidth, strokeLinejoin: "round", strokeDasharray: `${dashLength * 2} ${dashLength}`, opacity: style.opacity || 1, style: { clipPath: clipPathUrl } })] }));
 };
 
 /**
@@ -25121,10 +25807,11 @@ const ObstacleElement = ({ data, isHover }) => {
     const strokeWidth = useMemo(() => {
         // 如果是h5选中的情况下，禁区只有在start模式下才需要加粗
         // 其他模式展示的是其他的样式
-        if (platform === PlatformType.H5 &&
+        if ((platform === PlatformType.H5 &&
             editMapInfo?.selectElement?.id === data.id &&
-            editMapInfo.mobileMode === MobileEditMode.START) {
-            return dp2px((style.lineWidth || 1) * 2);
+            editMapInfo.mobileMode === MobileEditMode.START) ||
+            editMapInfo.mobileMode === MobileEditMode.EDIT) {
+            return dp2px((style.lineWidth || 1) * 2.2);
             // return dp2px(((style.lineWidth as number) || 3) * 3);
         }
         return dp2px(style.lineWidth || 3);
@@ -25159,7 +25846,10 @@ const ObstacleElement = ({ data, isHover }) => {
         }
         return editMapInfo?.selectElement?.id === data.id;
     }, [editMapInfo, data, platform]);
-    return (jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType) && editMap, points: currentPoints, fillColor: style.fillColor, hoverFillColor: style.hoverFillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, isHover: isHover, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
+    const disabled = useMemo(() => {
+        return data?.status === 0 && !editMode;
+    }, [data?.status, editMode, editMapInfo?.createMode]);
+    return (jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType) && editMap, points: currentPoints, fillColor: disabled ? style.disabledFillColor : style.fillColor, hoverFillColor: style.hoverFillColor, fillOpacity: style.fillOpacity, strokeColor: disabled ? style.disabledLineColor : style.lineColor, strokeWidth: strokeWidth, editMode: editMode, isHover: isHover, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
             onPathClick();
         }, onVertexDelete: (vertexIndex) => handleCreateVertexDelete(vertexIndex), onCoordinatesChange: (coordinates) => {
             if (platform === PlatformType.H5 && editMapInfo.mobileMode === MobileEditMode.CREATE) {
@@ -25760,6 +26450,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
     // 使用自定义hook管理所有变换逻辑
     const { currentPoints, isDragging, isRotating, isScaling, dimensions, initializePoints, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, // 从hook获取containerRef
      } = useVisionOffTransform(dataPoints);
+    const [hoverType, setHoverType] = useState(null);
     const visionOffData = useMemo(() => {
         return {
             ...data,
@@ -25920,7 +26611,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
                                     }
                                     : {
                                         onMouseDown: handleCancel,
-                                    }), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformDelete, {}) }) })), jsx("g", { className: "control-point rotate-point", ...(platform === PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Delete ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Delete), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformDelete, {}) }) })), jsx("g", { className: "control-point rotate-point", ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleRotateStartWithDisabled(e);
@@ -25928,7 +26619,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
                                     }
                                     : {
                                         onMouseDown: handleRotateStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformRotate, {}) }) }), jsx("g", { className: "control-point move-point", ...(platform === PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Rotate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Rotate), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformRotate, {}) }) }), jsx("g", { className: "control-point move-point", ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -25936,7 +26627,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
                                     }
                                     : {
                                         onMouseDown: handleMouseDownWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformTranslate, {}) }) }), jsx("g", { className: "control-point scale-point", ...(platform === PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Translate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Translate), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformTranslate, {}) }) }), jsx("g", { className: "control-point scale-point", ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleScaleStartWithDisabled(e);
@@ -25944,7 +26635,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
                                     }
                                     : {
                                         onMouseDown: handleScaleStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })] }));
+                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Scale ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Scale), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformScale, {}) }) })] }));
                 })()] }));
 };
 
@@ -26489,9 +27180,9 @@ var SvgDisabledTranslate = function SvgDisabledTranslate(props) {
   })))));
 };
 
-var css_248z$5 = ".index-module_doodleHover__jIZHV path {\n  fill: #2EC1B2;\n}";
-var styles$5 = {"doodleHover":"index-module_doodleHover__jIZHV"};
-styleInject(css_248z$5);
+var css_248z$6 = ".index-module_doodleHover__jIZHV path {\n  fill: #00B3A1;\n}";
+var styles$6 = {"doodleHover":"index-module_doodleHover__jIZHV"};
+styleInject(css_248z$6);
 
 const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) => {
     const { editMapInfo } = useMapEditContext();
@@ -26550,7 +27241,7 @@ const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) =
             return (jsx("g", { children: jsx("g", { style: {
                         cursor: canSelect ? 'pointer' : 'inherit',
                         pointerEvents: canSelect ? 'auto' : 'none',
-                    }, className: isHover ? styles$5.doodleHover : '', transform: transform, opacity: data?.style?.opacity || 1, dangerouslySetInnerHTML: { __html: svgString }, onClick: onDoodleClick }) }));
+                    }, className: isHover ? styles$6.doodleHover : '', transform: transform, opacity: data?.style?.opacity || 1, dangerouslySetInnerHTML: { __html: svgString }, onClick: onDoodleClick }) }));
         }
     }
     catch (error) {
@@ -26560,12 +27251,13 @@ const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) =
 };
 
 const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, isHover = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, onClickInfo, }) => {
-    const { platform, overlayScale, unitType } = useCommonContext();
+    const { platform, overlayScale, unitType, locale } = useCommonContext();
     // 使用自定义hook管理所有变换逻辑
     const { currentCenter, currentScale, currentDirection, isDragging, isRotating, isScaling, initializeTransform, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, dimensions, } = useDoodleTransform(data, onTransformChange, {
         minScale,
         onMinScaleReached,
     });
+    const [hoverType, setHoverType] = useState(null);
     // 创建变换后的数据对象 - 需要将转换后的坐标转换回原始格式
     const transformedData = useMemo(() => {
         // 将转换后的坐标转换回原始格式（除以 SCALE_FACTOR 并翻转 Y 轴）
@@ -26686,7 +27378,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
         const infoBoxWidth = 300 * overlayScale; // 信息框宽度
         const infoBoxHeight = 40 * overlayScale; // 信息框高度
         const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
-        const circleScale = platform === PlatformType.H5 ? 1.5 * overlayScale : 2 * overlayScale;
+        const circleScale = platform === PlatformType.H5 ? 1.5 * overlayScale : 3 * overlayScale;
         const disacledScale = circleScale * 1.2;
         return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#B2B4B9", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
                         ? {
@@ -26716,7 +27408,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                 justifyContent: 'center',
                                 gap: '10px',
                                 color: '#325069',
-                            }, children: jsxs("div", { children: ["Remaining time: ", remainingTime] }) }) }) }))] }));
+                            }, children: jsxs("div", { children: [locale?.['map.renderer.remainingTime'] || 'Remaining time', ": ", remainingTime] }) }) }) }))] }));
     };
     useEffect(() => {
         const isMove = isDragging || isRotating || isScaling;
@@ -26768,7 +27460,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                     const infoBoxWidth = 300 * overlayScale; // 信息框宽度
                     const infoBoxHeight = 100 * overlayScale; // 信息框高度
                     const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
-                    const scale = platform === PlatformType.H5 ? 1.8 * overlayScale : 2 * overlayScale;
+                    const scale = platform === PlatformType.H5 ? 1.8 * overlayScale : 3 * overlayScale;
                     const offsetLeft = 10 * scale;
                     return (jsxs(Fragment, { children: [showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
                                     onClickInfo?.();
@@ -26789,7 +27481,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                                 alignItems: 'center',
                                                 justifyContent: 'center',
                                                 gap: `${10 * overlayScale}px`,
-                                            }, children: jsxs("div", { children: ["Active Time: ", activeTime, " >"] }) })] }) })), jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
+                                            }, children: jsxs("div", { children: [locale?.['map.renderer.activeTime'] || 'Active Time', ": ", activeTime, " >"] }) })] }) })), jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -26805,7 +27497,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleCancel,
-                                    }), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformDelete, {}) }) })), jsx("g", { className: "control-point rotate-point", ...(platform === PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Delete ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Delete), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformDelete, {}) }) })), jsx("g", { className: "control-point rotate-point", ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleRotateStartWithDisabled(e);
@@ -26813,7 +27505,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleRotateStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformRotate, {}) }) }), jsx("g", { className: "control-point move-point", ...(platform === PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Rotate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Rotate), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformRotate, {}) }) }), jsx("g", { className: "control-point move-point", ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -26821,7 +27513,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleMouseDownWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformTranslate, {}) }) }), jsx("g", { className: "control-point scale-point", ...(platform === PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Translate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Translate), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformTranslate, {}) }) }), jsx("g", { className: "control-point scale-point", ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleScaleStartWithDisabled(e);
@@ -26829,7 +27521,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleScaleStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })] }));
+                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Scale ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Scale), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformScale, {}) }) })] }));
                 })()] }));
 };
 
@@ -27387,9 +28079,9 @@ const SvgMapComponent = forwardRef(({ editMap, pathData, mapConfig = {}, mowPart
 // 设置显示名称以便调试
 SvgMapComponent.displayName = 'SvgMapComponent';
 
-var css_248z$4 = ".index-module_mowerPosition__yLpIU {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n}";
-var styles$4 = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
-styleInject(css_248z$4);
+var css_248z$5 = ".index-module_mowerPosition__yLpIU {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n}";
+var styles$5 = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
+styleInject(css_248z$5);
 
 const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData, realTimeData, onMowingPositionChange, }) => {
     // DOM 元素引用，用于直接操作
@@ -27548,10 +28240,10 @@ const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData,
         }
         else {
             // 检查位置是否有效
-            const positionOutOfRange = isOutOfRange(mowerPositionData);
+            // const positionOutOfRange = isOutOfRange(mowerPositionData);
             const positionInvalid = isInvalidPosition(mowerPositionData);
             const isStandby = mowerPositionData.vehicleState === RobotStatus.STANDBY;
-            if (positionOutOfRange || positionInvalid || isOffLine) {
+            if (positionInvalid || isOffLine) {
                 // 位置无效时，尝试使用上次位置或充电桩位置
                 updatePositionByLastPosition(mowerPositionData);
             }
@@ -27615,7 +28307,7 @@ const MowerPosition = React__default.memo(({ editMap, mowerPositionData, viewBox
         zIndex: 1000,
         opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
     }), [isHighlight]);
-    return (jsx("div", { className: styles$4.mowerPosition, style: containerStyle, children: jsx("div", { ref: elementRef, className: "mower-position", style: {
+    return (jsx("div", { className: styles$5.mowerPosition, style: containerStyle, children: jsx("div", { ref: elementRef, className: "mower-position", style: {
                 position: 'absolute',
                 width: 30,
                 height: 30,
@@ -27627,11 +28319,12 @@ const MowerPosition = React__default.memo(({ editMap, mowerPositionData, viewBox
             }, children: jsx("img", { src: mowerImage, style: { width: '100%', height: '100%', objectFit: 'contain' } }) }) }));
 });
 
-var css_248z$3 = ".index-module_container__7IatW {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_boundaryLabel__GDHFn {\n  position: absolute;\n  background-color: rgba(30, 30, 31, 0.6);\n  color: rgb(255, 255, 255);\n  padding: 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: bold;\n  max-width: 220px;\n  pointer-events: auto;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n.index-module_boundaryLabel__GDHFn .index-module_isolatedIcon__1pRXN {\n  position: absolute;\n  width: 24px;\n  height: 24px;\n  top: -30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.index-module_base__qy2SG {\n  font-size: 14px;\n}\n\n.index-module_extended__0TMAt {\n  margin-top: 6px;\n  font-size: 11px;\n  opacity: 0.9;\n  border-top: 1px solid rgba(255, 255, 255, 0.2);\n  padding-top: 6px;\n}";
-var styles$3 = {"container":"index-module_container__7IatW","boundaryLabel":"index-module_boundaryLabel__GDHFn","isolatedIcon":"index-module_isolatedIcon__1pRXN","base":"index-module_base__qy2SG","extended":"index-module_extended__0TMAt"};
-styleInject(css_248z$3);
+var css_248z$4 = ".index-module_container__7IatW {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_boundaryLabel__GDHFn {\n  position: absolute;\n  background-color: rgba(30, 30, 31, 0.6);\n  color: rgb(255, 255, 255);\n  padding: 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: bold;\n  max-width: 220px;\n  pointer-events: auto;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n.index-module_boundaryLabel__GDHFn .index-module_isolatedIcon__1pRXN {\n  position: absolute;\n  width: 24px;\n  height: 24px;\n  top: -30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.index-module_base__qy2SG {\n  font-size: 14px;\n}\n\n.index-module_extended__0TMAt {\n  margin-top: 6px;\n  font-size: 11px;\n  opacity: 0.9;\n  border-top: 1px solid rgba(255, 255, 255, 0.2);\n  padding-top: 6px;\n}";
+var styles$4 = {"container":"index-module_container__7IatW","boundaryLabel":"index-module_boundaryLabel__GDHFn","isolatedIcon":"index-module_isolatedIcon__1pRXN","base":"index-module_base__qy2SG","extended":"index-module_extended__0TMAt"};
+styleInject(css_248z$4);
 
 const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionData, realTimeData = [], onlyRead = false, }) => {
+    const { locale } = useCommonContext();
     const [processStateIsMowing, updateProcessStateIsMowing] = useState(false);
     // 处理地图分区边界
     useMemo(() => {
@@ -27671,6 +28364,9 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
             return generateBoundaryData(mapData, newPathData);
         }
     }, [mapData, pathData, realTimeData]);
+    const coverageStr = useMemo(() => {
+        return locale?.['map.renderer.coverage'] || 'Coverage';
+    }, [locale]);
     const items = useMemo(() => {
         // console.log('boundartItme->', viewBox, mapData)
         if (!mapData || !viewBox)
@@ -27680,7 +28376,7 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
         const results = [];
         for (const boundary of boundaryData) {
             // 多边形重心
-            const centroid = computePolygonCentroid(boundary.points);
+            const centroid = computePolygonCentroid$1(boundary.points);
             if (!centroid)
                 continue;
             const relX = (centroid.x - viewBox.x) / viewBox.width;
@@ -27691,9 +28387,9 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
             const baseText = onlyRead ? `${boundary.name}` : `${boundary.name} (${progress})`;
             const totalArea = convertAreaByUnits(boundary.area || 0, unitType);
             const finishedArea = convertAreaByUnits(boundary.finishedArea || 0, unitType);
-            const coverageText = `Coverage: ${finishedArea.value}/${totalArea.value}`;
+            const coverageText = `${coverageStr}: ${finishedArea.value}/${totalArea.value}`;
             const isMowing = mowingIds.includes(boundary.id);
-            const dateText = formatBoundaryDateText(isMowing ? Date.now() / 1000 : boundary.endTime || 0);
+            const dateText = formatBoundaryDateText(isMowing ? Date.now() / 1000 : boundary.endTime || 0, locale);
             results.push({
                 id: boundary.id,
                 name: boundary.name,
@@ -27717,11 +28413,13 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
         mowPartitionData,
         boundaryData,
         onlyRead,
+        coverageStr,
+        locale,
     ]);
     const containerZIndex = 900;
     return { items, containerZIndex };
 };
-function computePolygonCentroid(points) {
+function computePolygonCentroid$1(points) {
     if (!points || points.length < 3)
         return null;
     const valid = points.filter((p) => p.length >= 2);
@@ -27794,7 +28492,7 @@ const BoundaryLabels = React__default.memo(({ editMap, mapData, pathData, unitTy
         display: editMap ? 'none' : 'block',
         opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
     }), [containerZIndex, expandedId, editMap, isHighlight]);
-    return (jsx("div", { className: styles$3.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `${styles$3.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
+    return (jsx("div", { className: styles$4.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `${styles$4.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
                 transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
                 left: `${item.leftPct}%`,
                 top: `${item.topPct}%`,
@@ -27805,12 +28503,12 @@ const BoundaryLabels = React__default.memo(({ editMap, mapData, pathData, unitTy
                 if (onlyRead)
                     return;
                 handleClick(item.id);
-            }, children: [jsx("div", { className: styles$3.base, children: item.baseText }), jsxs("div", { className: styles$3.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsx("div", { children: item.dateText })] }), item.isIsolated && (jsx("div", { className: styles$3.isolatedIcon, dangerouslySetInnerHTML: { __html: ISOLATED_BOUNDARY_SVG } }))] }, item.id))) }));
+            }, children: [jsx("div", { className: styles$4.base, children: item.baseText }), jsxs("div", { className: styles$4.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsx("div", { children: item.dateText })] }), item.isIsolated && (jsx("div", { className: styles$4.isolatedIcon, dangerouslySetInnerHTML: { __html: ISOLATED_BOUNDARY_SVG } }))] }, item.id))) }));
 });
 
-var css_248z$2 = ".index-module_container__gB52e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_item__zHoZP {\n  position: absolute;\n  pointer-events: auto;\n}\n\n.index-module_icon__CS56A {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.index-module_tooltip__NMCmR {\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  background-color: rgb(247, 251, 255);\n  color: rgb(65, 93, 116);\n  padding: 10px;\n  border-radius: 16px;\n  font-size: 14px;\n  text-align: left;\n}";
-var styles$2 = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
-styleInject(css_248z$2);
+var css_248z$3 = ".index-module_container__gB52e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_item__zHoZP {\n  position: absolute;\n  pointer-events: auto;\n}\n\n.index-module_icon__CS56A {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.index-module_tooltip__NMCmR {\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  background-color: rgb(247, 251, 255);\n  color: rgb(65, 93, 116);\n  padding: 10px;\n  border-radius: 16px;\n  font-size: 14px;\n  text-align: left;\n}";
+var styles$3 = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
+styleInject(css_248z$3);
 
 var antennaOneOnline = "data:image/png;base64,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";
 
@@ -27822,6 +28520,7 @@ var antennaTwoOffline = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgC
 
 const useAntennaInfo = (data = [], options = {}) => {
     const { viewBox } = options;
+    const { locale } = useCommonContext();
     const items = useMemo(() => {
         if (!data || data.length === 0 || !viewBox)
             return [];
@@ -27852,8 +28551,8 @@ const useAntennaInfo = (data = [], options = {}) => {
                         isOnline: antenna1.status === 1,
                         imageSrc: getImage(1, antenna1.status === 1),
                         tooltip: {
-                            title: 'Primary Antenna',
-                            statusText: antenna1.status === 1 ? 'Online' : 'Offline',
+                            title: locale?.['map.renderer.primaryAntenna'] || 'Primary Antenna',
+                            statusText: antenna1.status === 1 ? (locale?.['map.renderer.online'] || 'Online') : (locale?.['map.renderer.online'] || 'Offline'),
                             minWidth: 130,
                         },
                     });
@@ -27892,15 +28591,15 @@ const useAntennaInfo = (data = [], options = {}) => {
                 isOnline: antenna2.status === 1,
                 imageSrc: getImage(2, antenna2.status === 1),
                 tooltip: {
-                    title: 'Signal Enhancement Antenna',
-                    statusText: antenna2.status === 1 ? 'Online' : 'Offline',
-                    syncText: antenna2.status === 1 ? ', Synced' : ', To be synced',
+                    title: locale?.['map.renderer.signalAntenna'] || 'Signal Enhancement Antenna',
+                    statusText: antenna2.status === 1 ? (locale?.['map.renderer.online'] || 'Online') : (locale?.['map.renderer.offline'] || 'Offline'),
+                    syncText: antenna2.status === 1 ? `, ${locale?.['map.renderer.synced'] || 'Synced'}` : `, ${locale?.['map.renderer.toBeSynced'] || 'To be synced'}`,
                     minWidth: 195,
                 },
             });
         }
         return results;
-    }, [data, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height]);
+    }, [data, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height, locale]);
     // default stacking order (slightly higher than boundary labels' 900)
     const containerZIndex = 950;
     return { items, containerZIndex };
@@ -27928,13 +28627,13 @@ const Antennas = React__default.memo(({ editMap, antennaConfig = [], viewBox, ro
         document.addEventListener('pointerdown', handleOutside);
         return () => document.removeEventListener('pointerdown', handleOutside);
     }, []);
-    return (jsx("div", { className: styles$2.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `antenna-container-item ${styles$2.item}`, style: {
+    return (jsx("div", { className: styles$3.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `antenna-container-item ${styles$3.item}`, style: {
                 left: `${item.leftPct}%`,
                 top: `${item.topPct}%`,
                 transform: `translate(calc(-50% + ${item.offsetX || 0}px), calc(-50% + ${item.offsetY || 0}px)) rotate(${-rotation}deg)`,
                 zIndex: openType === item.type ? 10000 : containerZIndex,
                 pointerEvents: onlyRead ? 'none' : 'auto',
-            }, children: [jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$2.icon}`, style: {}, onClick: (e) => {
+            }, children: [jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$3.icon}`, style: {}, onClick: (e) => {
                         e.stopPropagation();
                         if (onlyRead)
                             return;
@@ -27949,95 +28648,15 @@ const Antennas = React__default.memo(({ editMap, antennaConfig = [], viewBox, ro
                             return;
                         e.currentTarget.style.transform =
                             'scale(1)';
-                    }, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxs("div", { className: styles$2.tooltip, style: {
+                    }, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxs("div", { className: styles$3.tooltip, style: {
                         display: openType === item.type ? 'block' : 'none',
                         minWidth: item.tooltip.minWidth,
                     }, children: [jsx("div", { style: { marginBottom: 4, fontWeight: 600 }, children: item.tooltip.title }), jsxs("div", { style: { color: 'rgba(65, 93, 116, 1)', fontWeight: 400 }, children: [item.tooltip.statusText, item.tooltip.syncText || ''] })] })] }, `antenna-${item.type}`))) }));
 });
 
-var css_248z$1 = ".index-module_mapEdit__XC5Gw {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  cursor: default;\n  min-width: 1px;\n  min-height: 1px;\n}\n.index-module_mapEdit__XC5Gw.index-module_createMode__14EPH {\n  cursor: crosshair;\n}\n.index-module_mapEdit__XC5Gw.index-module_notCreateCursor__1-OjF {\n  cursor: no-drop;\n}";
-var styles$1 = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
-styleInject(css_248z$1);
-
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames () {
-			var classes = '';
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				if (arg) {
-					classes = appendClass(classes, parseValue(arg));
-				}
-			}
-
-			return classes;
-		}
-
-		function parseValue (arg) {
-			if (typeof arg === 'string' || typeof arg === 'number') {
-				return arg;
-			}
-
-			if (typeof arg !== 'object') {
-				return '';
-			}
-
-			if (Array.isArray(arg)) {
-				return classNames.apply(null, arg);
-			}
-
-			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-				return arg.toString();
-			}
-
-			var classes = '';
-
-			for (var key in arg) {
-				if (hasOwn.call(arg, key) && arg[key]) {
-					classes = appendClass(classes, key);
-				}
-			}
-
-			return classes;
-		}
-
-		function appendClass (value, newClass) {
-			if (!newClass) {
-				return value;
-			}
-		
-			if (value) {
-				return value + ' ' + newClass;
-			}
-		
-			return value + newClass;
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}()); 
-} (classnames));
-
-var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var css_248z$2 = ".index-module_mapEdit__XC5Gw {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  cursor: default;\n  min-width: 1px;\n  min-height: 1px;\n}\n.index-module_mapEdit__XC5Gw.index-module_createMode__14EPH {\n  cursor: crosshair;\n}\n.index-module_mapEdit__XC5Gw.index-module_notCreateCursor__1-OjF {\n  cursor: no-drop;\n}";
+var styles$2 = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
+styleInject(css_248z$2);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -29037,7 +29656,7 @@ const CreateObstacleElement = forwardRef(({ enabled = false, svgElement, onPoint
     if (!enabled || points.length === 0) {
         return null;
     }
-    return (jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 1, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
+    return (jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 1.8, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
 });
 CreateObstacleElement.displayName = 'CreateObstacleElement';
 
@@ -29075,7 +29694,7 @@ const useCreateVisionOffElement = () => {
             [maxX, minY],
         ];
         return elementPoints;
-    }, [centerPoint, elementWidth, editMapInfo.allVisionOffPoints]);
+    }, [centerPoint, elementWidth, editMapInfo.allVisionOffPoints, svgViewBox]);
     return {
         centerPoint,
         getVisionOffPoints,
@@ -29310,9 +29929,9 @@ const SvgEditMap = forwardRef(({ mapConfig, onEditInfoMapChange, editMap }, ref)
     const onMouseLeave = () => {
         setHoverDataId('');
     };
-    return (jsx("div", { ref: containerRef, className: classNames(styles$1.mapEdit, {
-            [styles$1.createMode]: isCreating,
-            [styles$1.notCreateCursor]: showNotCreateCursor,
+    return (jsx("div", { ref: containerRef, className: classNames(styles$2.mapEdit, {
+            [styles$2.createMode]: isCreating,
+            [styles$2.notCreateCursor]: showNotCreateCursor,
         }), 
         // style={{
         //   position: 'absolute',
@@ -29418,6 +30037,22 @@ const SvgEditMap = forwardRef(({ mapConfig, onEditInfoMapChange, editMap }, ref)
 });
 SvgEditMap.displayName = 'SvgEditMap';
 
+/** 清理为合法的 SVG/HTML id 片段 */
+function sanitizeSvgIdPart(value) {
+    return value.replace(/[^a-zA-Z0-9_.-]/g, '_');
+}
+/**
+ * 通道 clipPath 的 SVG id
+ * 组合 sn、useId、时间戳、随机数，避免同页多地图实例 id 冲突
+ */
+function createChannelClipPathId(params) {
+    const snPart = sanitizeSvgIdPart(params.sn || 'map');
+    const reactPart = sanitizeSvgIdPart(params.reactId.replace(/:/g, ''));
+    const timestamp = Date.now();
+    const randomPart = Math.random().toString(36).slice(2, 10);
+    return `channel-clip-path-${snPart}-${reactPart}-${timestamp}-${randomPart}`;
+}
+
 var _path;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
@@ -29435,9 +30070,9 @@ var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
   })));
 };
 
-var css_248z = ".index-module_crosshair__etey6 {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 40px;\n  height: 40px;\n  pointer-events: none;\n  z-index: 99999;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
-var styles = {"crosshair":"index-module_crosshair__etey6"};
-styleInject(css_248z);
+var css_248z$1 = ".index-module_crosshair__etey6 {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 40px;\n  height: 40px;\n  pointer-events: none;\n  z-index: 99999;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
+var styles$1 = {"crosshair":"index-module_crosshair__etey6"};
+styleInject(css_248z$1);
 
 /**
  * 十字准心组件
@@ -29454,19 +30089,19 @@ const Crosshair = () => {
         }
         return false;
     }, [platform, editMapInfo]);
-    return isVisible ? (jsx("div", { className: styles.crosshair, children: jsx(SvgMobileAddPoint, {}) })) : null;
+    return isVisible ? (jsx("div", { className: styles$1.crosshair, children: jsx(SvgMobileAddPoint, {}) })) : null;
 };
 
-const WGS84 = 'EPSG:4326';
-const WEB_MERCATOR = 'EPSG:3857';
-proj4.defs(WGS84, '+proj=longlat +datum=WGS84 +no_defs');
-proj4.defs(WEB_MERCATOR, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+const WGS84$1 = 'EPSG:4326';
+const WEB_MERCATOR$1 = 'EPSG:3857';
+proj4.defs(WGS84$1, '+proj=longlat +datum=WGS84 +no_defs');
+proj4.defs(WEB_MERCATOR$1, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
 // 默认配置
 const defaultMapConfig$1 = DEFAULT_STYLES;
 // 地图渲染器组件
-const MowerMapRenderer = forwardRef(({ sn, mowerIconConfig = {}, platform = PlatformType.WEB, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, isHighlight = true, mapConfig, 
+const MowerMapRenderer = forwardRef(({ sn, mowerIconConfig = {}, platform = PlatformType.WEB, mapType = MapType.NORMAL, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, isHighlight = true, mapConfig, 
 // pathConfig,
-modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onError, className, style, zIndex, googleMapInstance: _googleMapInstance, dragMap = false, canRotateMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, googleMapStaticApiKey, onHandleEvent, onSelectElement, onH5FirstSelectObstaclePoint, }, ref) => {
+modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onError, className, style, zIndex, googleMapInstance: _googleMapInstance, dragMap = false, canRotateMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, googleMapStaticApiKey, googleMapStaticUrlSigningSecret, signGoogleStaticMapUrl, onHandleEvent, onSelectElement, onH5FirstSelectObstaclePoint, locale, }, ref) => {
     const [currentError, setCurrentError] = useState(null);
     // const mapRef = useMap();
     const [processStateIsMowing, setProcessStateIsMowing] = useState(false);
@@ -29494,6 +30129,8 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         ...INIT_EDIT_MAP_INFO,
     });
     const [mowingPartitions, setMowingPartitions] = useState([]);
+    const reactInstanceId = useId();
+    const channelClipPathId = useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
     const minDistance = useMemo(() => {
         return getMinSvgDistanceByModel(modelType);
     }, [modelType]);
@@ -29627,13 +30264,25 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
     const mowerPositionData = useMemo(() => {
         // realTimeData 中包含三个种类的数据，之需要实时坐标的数据即可。
         // 在初始的状态按照正常图标进行渲染，所以构造一个基本在rtk桩的一个数据
-        if (!realTimeData || realTimeData.length === 0)
-            return {
-                postureX: 0.01,
-                postureY: 0.1,
-                postureTheta: 0.01,
-                vehicleState: RobotStatus.PARKED,
-            };
+        if (!realTimeData || realTimeData.length === 0) {
+            const chargingPiles = svgElementDatas?.[DataType.CHARGING_PILE]?.[0];
+            if (chargingPiles?.position) {
+                return {
+                    postureX: chargingPiles.position?.[0],
+                    postureY: chargingPiles.position?.[1],
+                    postureTheta: chargingPiles.direction - Math.PI || 0,
+                    vehicleState: RobotStatus.PARKED,
+                };
+            }
+            else {
+                return {
+                    postureX: 0.01,
+                    postureY: 0.1,
+                    postureTheta: 0.01,
+                    vehicleState: RobotStatus.PARKED,
+                };
+            }
+        }
         let currentPositionData;
         if (realTimeData.length === 1 && realTimeData[0].type === RealTimeDataType.LOCATION) {
             currentPositionData = realTimeData[0];
@@ -29677,14 +30326,14 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         const validBounds = getValidGpsBounds(mapJson, 0);
         const [swLng0, swLat0] = validBounds.sw;
         const [neLng0, neLat0] = validBounds.ne;
-        const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
-        const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
+        const [swX0, swY0] = proj4(WGS84$1, WEB_MERCATOR$1, [swLng0, swLat0]);
+        const [neX0, neY0] = proj4(WGS84$1, WEB_MERCATOR$1, [neLng0, neLat0]);
         const swX = swX0 + drag.x;
         const swY = swY0 + drag.y;
         const neX = neX0 + drag.x;
         const neY = neY0 + drag.y;
-        const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
-        const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
+        const [swLng, swLat] = proj4(WEB_MERCATOR$1, WGS84$1, [swX, swY]);
+        const [neLng, neLat] = proj4(WEB_MERCATOR$1, WGS84$1, [neX, neY]);
         return new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
     }, [mapJson, drag.x, drag.y]);
     const commonValue = useMemo(() => {
@@ -29712,7 +30361,11 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
             showStraddleBoundaryBorder,
             overlayLayout,
             googleMapStaticApiKey,
+            googleMapStaticUrlSigningSecret,
+            locale,
+            signGoogleStaticMapUrl,
             onH5FirstSelectObstaclePoint,
+            channelClipPathId,
         };
     }, [
         sn,
@@ -29735,8 +30388,32 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         showStraddleBoundaryBorder,
         overlayLayout,
         googleMapStaticApiKey,
+        googleMapStaticUrlSigningSecret,
+        locale,
+        signGoogleStaticMapUrl,
         onH5FirstSelectObstaclePoint,
+        channelClipPathId,
     ]);
+    /**
+     * 这里做了一个配置，以防以后如果有多种不同的类型的情况，需要展示不同的元素
+     */
+    const mapHasElements = useMemo(() => {
+        // 地理围栏地图，有充电桩，没有天线，没有割草机位置，没有分区名称气泡
+        if (mapType === MapType.GEO_FENCE) {
+            return {
+                hasChargingPile: true,
+                hasAntenna: false,
+                hasMowerPosition: false,
+                hasBoundaryLabels: false,
+            };
+        }
+        return {
+            hasChargingPile: true,
+            hasAntenna: true,
+            hasMowerPosition: true,
+            hasBoundaryLabels: true,
+        };
+    }, [mapType]);
     const fitBounds = useCallback((padding = 0) => {
         if (!mapJson || !mapRef)
             return null;
@@ -29752,14 +30429,14 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         // 地图数据中的坐标格式是 [longitude, latitude]
         const [swLng0, swLat0] = validBounds.sw;
         const [neLng0, neLat0] = validBounds.ne;
-        const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
-        const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
+        const [swX0, swY0] = proj4(WGS84$1, WEB_MERCATOR$1, [swLng0, swLat0]);
+        const [neX0, neY0] = proj4(WGS84$1, WEB_MERCATOR$1, [neLng0, neLat0]);
         const swX = swX0 + defaultTransform.x;
         const swY = swY0 + defaultTransform.y;
         const neX = neX0 + defaultTransform.x;
         const neY = neY0 + defaultTransform.y;
-        const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
-        const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
+        const [swLng, swLat] = proj4(WEB_MERCATOR$1, WGS84$1, [swX, swY]);
+        const [neLng, neLat] = proj4(WEB_MERCATOR$1, WGS84$1, [neX, neY]);
         const googleBounds = new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), // 西南角
         new window.google.maps.LatLng(neLat, neLng) // 东北角
         );
@@ -29786,8 +30463,8 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         const offsetLatLng = overlayProjection.fromDivPixelToLatLng(offsetPixel);
         if (!offsetLatLng)
             return;
-        const [cx, cy] = proj4(WGS84, WEB_MERCATOR, [centerLatLng.lng(), centerLatLng.lat()]);
-        const [ox, oy] = proj4(WGS84, WEB_MERCATOR, [offsetLatLng.lng(), offsetLatLng.lat()]);
+        const [cx, cy] = proj4(WGS84$1, WEB_MERCATOR$1, [centerLatLng.lng(), centerLatLng.lat()]);
+        const [ox, oy] = proj4(WGS84$1, WEB_MERCATOR$1, [offsetLatLng.lng(), offsetLatLng.lat()]);
         const dx = ox - cx;
         const dy = oy - cy;
         setDrag((prev) => ({
@@ -29830,7 +30507,10 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         // 如果当前是taskDelay的状态，或者状态为mowing或者standby，则指定的地块需要高亮，或者全局高亮
         if ((isTaskDelayRef.current ||
             positionData?.vehicleState === RobotStatus.MOWING ||
-            positionData?.vehicleState === RobotStatus.STANDBY) &&
+            positionData?.vehicleState === RobotStatus.STANDBY ||
+            (!positionData &&
+                (currentVehicleStateRef.current === RobotStatus.MOWING ||
+                    currentVehicleStateRef.current === RobotStatus.STANDBY))) &&
             mowPartitionDataRef.current &&
             !mowPartitionDataRef.current?.partitionIds) {
             // 设置全局高亮
@@ -30051,13 +30731,15 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
                                 // svgEditMapRef?.current?.adjustSvgSize?.(layout);
                                 setOverlayLayout(layout);
                             }
-                        }, map: mapRef, mapPaneName: 'overlayMouseTarget', bounds: bounds, rotate: actureRotate, zIndex: zIndex, children: [jsx(MapDrag, { map: mapRef, dragCallbacks: dragCallbacks, onBoundaryLabelsCollapse: () => { }, onTransformChange: handleDragMove, isDragMap: dragMap, canRotateMap: canRotateMap }), jsx(MowPartitionContextProvider, { value: mowPartitionValue, children: jsx(SvgMapComponent, { isHighlight: isHighlight, editMap: editMap, ref: svgMapRef, pathData: pathJson, mapConfig: mergedMapConfig, mowPartitionData: mowPartitionData }) }), jsx(MowerPosition, { editMap: editMap, mowerPositionData: mowerPositionData, viewBox: svgViewBox || null, modelType: modelType, hasEdger: edger, mapData: mapJson, mapConfig: mergedMapConfig, realTimeData: realTimeData, onMowingPositionChange: onMowingPositionChange, isHighlight: isHighlight }), jsx(CharginPile, { viewBox: svgViewBox || null, rotation: actureRotate, isHighlight: isHighlight }), jsx(BoundaryLabels, { editMap: editMap, mapData: mapJson, onlyRead: onlyRead, pathData: pathJson, unitType: unitType, viewBox: svgViewBox || null, rotation: actureRotate, mowPartitionData: mowPartitionData, realTimeData: realTimeData, isHighlight: isHighlight }), jsx(Antennas, { editMap: editMap, antennaConfig: antennaConfig || [], layout: overlayLayout || undefined, viewBox: svgViewBox || null, rotation: actureRotate, onlyRead: onlyRead, isHighlight: isHighlight }), jsx(SvgEditMap, { editMap: editMap, ref: svgEditMapRef, mapConfig: mergedMapConfig, onEditInfoMapChange: onEditInfoMapChange })] })] }) }) }));
+                        }, map: mapRef, mapPaneName: 'overlayMouseTarget', bounds: bounds, rotate: actureRotate, zIndex: zIndex, children: [jsx(MapDrag, { map: mapRef, dragCallbacks: dragCallbacks, onBoundaryLabelsCollapse: () => { }, onTransformChange: handleDragMove, isDragMap: dragMap, canRotateMap: canRotateMap }), jsx(MowPartitionContextProvider, { value: mowPartitionValue, children: jsx(SvgMapComponent, { isHighlight: isHighlight, editMap: editMap, ref: svgMapRef, pathData: pathJson, mapConfig: mergedMapConfig, mowPartitionData: mowPartitionData }) }), mapHasElements.hasMowerPosition && (jsx(MowerPosition, { editMap: editMap, mowerPositionData: mowerPositionData, viewBox: svgViewBox || null, modelType: modelType, hasEdger: edger, mapData: mapJson, mapConfig: mergedMapConfig, realTimeData: realTimeData, onMowingPositionChange: onMowingPositionChange, isHighlight: isHighlight })), mapHasElements.hasChargingPile && (jsx(CharginPile, { viewBox: svgViewBox || null, rotation: actureRotate, isHighlight: isHighlight })), mapHasElements.hasBoundaryLabels && (jsx(BoundaryLabels, { editMap: editMap, mapData: mapJson, onlyRead: onlyRead, pathData: pathJson, unitType: unitType, viewBox: svgViewBox || null, rotation: actureRotate, mowPartitionData: mowPartitionData, realTimeData: realTimeData, isHighlight: isHighlight })), mapHasElements.hasAntenna && (jsx(Antennas, { editMap: editMap, antennaConfig: antennaConfig || [], layout: overlayLayout || undefined, viewBox: svgViewBox || null, rotation: actureRotate, onlyRead: onlyRead, isHighlight: isHighlight })), jsx(SvgEditMap, { editMap: editMap, ref: svgEditMapRef, mapConfig: mergedMapConfig, onEditInfoMapChange: onEditInfoMapChange })] })] }) }) }));
 });
 MowerMapRenderer.displayName = 'MowerMapRenderer';
 
 // 默认配置
 const defaultMapConfig = DEFAULT_STYLES;
-const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, maxWidth = 300, mapConfig, sn }) => {
+const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, maxWidth = 300, maxHeight, boundaryPadding = 50, mapConfig, sn, }) => {
+    const reactInstanceId = useId();
+    const channelClipPathId = useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
     // 合并配置
     const mergedMapConfig = useMemo(() => {
         return merge$1(defaultMapConfig, mapConfig);
@@ -30103,7 +30785,7 @@ const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, m
             maxY = Math.max(maxY, point[1]);
         });
         // 添加边距
-        const padding = 50;
+        const padding = boundaryPadding;
         const width = maxX - minX + padding * 2;
         const height = maxY - minY + padding * 2;
         return {
@@ -30112,25 +30794,40 @@ const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, m
             width,
             height,
         };
-    }, [boundaryInfo]);
+    }, [boundaryInfo, boundaryPadding]);
     const commonValue = useMemo(() => {
         return {
             sn,
             svgViewBox: boundaryViewBox,
+            channelClipPathId,
         };
-    }, [sn, boundaryViewBox]);
+    }, [sn, boundaryViewBox, channelClipPathId]);
     const style = useMemo(() => {
-        if (boundaryViewBox?.width > boundaryViewBox?.height) {
+        if (!maxHeight) {
+            if (boundaryViewBox?.width > boundaryViewBox?.height) {
+                return {
+                    width: maxWidth,
+                    height: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
+                };
+            }
             return {
-                width: maxWidth,
-                height: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
+                width: maxWidth * (boundaryViewBox.width / boundaryViewBox.height),
+                height: maxWidth,
+            };
+        }
+        const ratio = maxWidth / maxHeight;
+        const boundaryRatio = boundaryViewBox.width / boundaryViewBox.height;
+        if (ratio > boundaryRatio) {
+            return {
+                width: Math.floor(maxHeight * boundaryRatio),
+                height: maxHeight,
             };
         }
         return {
-            width: maxWidth * (boundaryViewBox.width / boundaryViewBox.height),
-            height: maxWidth,
+            width: maxWidth,
+            height: Math.floor(maxWidth / boundaryRatio),
         };
-    }, [boundaryViewBox, maxWidth]);
+    }, [boundaryViewBox, maxWidth, maxHeight]);
     return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxs("div", { style: {
                     position: 'relative',
                     width: style.width,
@@ -30146,4 +30843,1418 @@ const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, m
                         }) }), jsx(CharginPile, { viewBox: boundaryViewBox || null, rotation: 0 })] }) }) }));
 });
 
-export { ALL_DIRECTION_SELECTED, AntennaData, BaseData, BoundaryData, BoundarySvgRender, ChannelData, ChargingPileData, CheckDoodleErrorType, CheckObstaclePointErrorType, ClickEventType, CreateStatus, DataType, DoodleData, MAX_DIRECTION_ANGLE, MIN_DIRECTION_ANGLE, MobileEditMode, MowGateData, MowerMapRenderer, ObstacleData, PathData, PlatformType, RecordFunctionEnum, RecordTypeEnum, RenderType, SCALE_FACTOR, SvgParserNative, UnifiedMapDataProcessor, VisionOffData, calculateMapGpsCenter, estimateGpsFromMapBounds, getValidGpsBounds, initBoundary, initChannel, initDoodle, initObstacle, initVisionOff, restorePointsFormat };
+/** ChannelClipPath 等内容裁剪使用的 SVG 坐标边距（与用户传入的屏幕 padding 无关） */
+const PARTITION_PICKER_CONTENT_CLIP_PADDING = 50;
+/** H5：子区域屏幕宽度超过该值才展示名称标签（px） */
+const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 72;
+/** H5：名称气泡总宽度（px） */
+const H5_PARTITION_LABEL_WIDTH_PX = 72;
+/** 边界线目标屏幕像素宽度（默认态，全缩放级别保持一致） */
+const PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX = 2;
+/** 边界线目标屏幕像素宽度（hover / 选中态） */
+const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5;
+/**
+ * Figma bg/mapping 地图网格背景（Standalone SVG 层）
+ * @see https://www.figma.com/design/j0DdUYf8VFkXQ8ikkA6ZzP — node 20490:84886
+ */
+/** 网格区域底色，也用于容器 letterbox 留白 */
+const PARTITION_PICKER_GRID_BASE_COLOR = '#E3E5EB';
+/** 网格单元边长（SVG 地图坐标，与 viewBox 一致；zoom 时间距同比缩放） */
+const PARTITION_PICKER_GRID_TILE_SIZE = 200;
+/** 网格线宽（地图坐标；随 zoom 同比缩放，不做屏幕像素恒定） */
+const PARTITION_PICKER_GRID_LINE_WIDTH = 4;
+/** 网格交点圆点半径（地图坐标） */
+const PARTITION_PICKER_GRID_DOT_RADIUS = 8;
+/** 网格层整体不透明度（Figma 约 80%） */
+const PARTITION_PICKER_GRID_OPACITY = 0.8;
+/** 网格线与交点颜色 */
+const PARTITION_PICKER_GRID_STROKE = '#FFFFFF';
+/** 可见范围内交点超过该数量时跳过圆点，仅保留网格线（缩小视野时减轻 DOM 压力） */
+const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 400;
+/**
+ * 分区选择地图专用样式
+ *
+ * Web：Figma 灰蓝未选中地块（Vector 360）
+ * H5：高对比度绿色，面向卫星/深色底图
+ */
+const PARTITION_PICKER_MAP_CONFIG_WEB = {
+    boundary: {
+        lineColor: '#91A1B4',
+        fillColor: '#D7DEE6',
+        lineWidth: 2,
+    },
+};
+const PARTITION_PICKER_MAP_CONFIG = {
+    boundary: {
+        lineColor: '#91A1B4',
+        fillColor: '#D7DEE6',
+        lineWidth: 2,
+    },
+};
+/** Web 端地块配色（Figma Vector 360 / 361 / 99788） */
+const PARTITION_PICKER_COLORS_WEB = {
+    defaultFill: 'rgba(222, 225, 231, 1)',
+    defaultStroke: 'rgba(132, 152, 169, 1)',
+    defaultStrokeWidth: 2,
+    hoverFill: 'rgba(211, 216, 226, 1)',
+    hoverStroke: 'rgba(132, 152, 169, 1)',
+    hoverStrokeWidth: 3,
+    selectedFill: 'rgba(202, 214, 238, 1)',
+    selectedStroke: 'rgba(132, 152, 169, 1)',
+    selectedStrokeWidth: 3,
+    selectedHoverFill: 'rgba(202, 214, 238, 1)',
+    selectedHoverStroke: 'rgba(132, 152, 169, 1)',
+    selectedHoverStrokeWidth: 3,
+    isolatedFill: 'rgba(225, 227, 233, 1)',
+    isolatedStroke: 'rgba(189, 198, 208, 1)',
+    isolatedStrokeWidth: 2,
+};
+/** H5 端地块配色 */
+const PARTITION_PICKER_COLORS_H5 = {
+    defaultFill: 'rgba(222, 225, 231, 1)',
+    defaultStroke: 'rgba(132, 152, 169, 1)',
+    defaultStrokeWidth: 1,
+    hoverFill: 'rgba(222, 225, 231, 1)',
+    hoverStroke: 'rgba(132, 152, 169, 1)',
+    hoverStrokeWidth: 1,
+    selectedFill: 'rgba(202, 214, 238, 1)',
+    selectedStroke: 'rgba(132, 152, 169, 1)',
+    selectedStrokeWidth: 1,
+    selectedHoverFill: 'rgba(202, 214, 238, 1)',
+    selectedHoverStroke: 'rgba(132, 152, 169, 1)',
+    selectedHoverStrokeWidth: 1,
+    isolatedFill: 'rgba(225, 227, 233, 1)',
+    isolatedStroke: 'rgba(189, 198, 208, 1)',
+    isolatedStrokeWidth: 1,
+};
+function getPartitionPickerMapConfig(platform = PlatformType.WEB) {
+    return platform === PlatformType.WEB
+        ? PARTITION_PICKER_MAP_CONFIG_WEB
+        : PARTITION_PICKER_MAP_CONFIG;
+}
+function getPartitionPickerColors(platform = PlatformType.WEB) {
+    return platform === PlatformType.WEB ? PARTITION_PICKER_COLORS_WEB : PARTITION_PICKER_COLORS_H5;
+}
+/** Web 分区名气泡（Figma「地块名称」/ 选中区域） */
+const PARTITION_PICKER_LABEL_STYLES_WEB = {
+    default: {
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        color: 'rgba(65, 93, 116, 0.7)',
+        fontSize: 12,
+        fontWeight: 500,
+        padding: '4px 8px',
+        borderRadius: 14,
+        lineHeight: '20px',
+    },
+    selected: {
+        backgroundColor: 'rgba(255, 90, 0, 1)',
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: 12,
+        fontWeight: 500,
+        padding: '4px 8px',
+        borderRadius: 20,
+        lineHeight: '20px',
+    },
+    selectionOrderBadge: {
+        width: '24px',
+        height: '24px',
+        background: '#FF5A00',
+        border: '1px solid #FFFFFF',
+        color: '#FFFFFF',
+        fontSize: 14,
+        fontWeight: 500,
+        lineHeight: '22px',
+    },
+};
+/** H5 分区名气泡（深色底图 / 橙色渐变选中） */
+const PARTITION_PICKER_LABEL_STYLES_H5 = {
+    default: {
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        color: 'rgba(65, 93, 116, 0.7)',
+        fontSize: 12,
+        fontWeight: 400,
+        padding: '6px',
+        width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
+        borderRadius: 100,
+        boxSizing: 'border-box',
+    },
+    selected: {
+        background: 'linear-gradient(266.64deg, #F2942A 4.1%, #F26A2A 86.42%)',
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: 12,
+        fontWeight: 400,
+        padding: '6px',
+        width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
+        borderRadius: 100,
+        boxSizing: 'border-box',
+    },
+    selectionOrderBadge: {
+        width: '24px',
+        height: '24px',
+        background: 'linear-gradient(310.82deg, #F16629 14.52%, #F1A129 103.26%)',
+        border: '1px solid #FFFFFF',
+        color: '#FFFFFF',
+        fontSize: 14,
+        fontWeight: 600,
+        lineHeight: '22px',
+    },
+};
+/** 将 PartitionPickerLabelAppearance 转为 React 内联样式 */
+function labelAppearanceToStyle(appearance) {
+    const { fontSize, borderRadius, ...rest } = appearance;
+    return {
+        ...rest,
+        fontSize: `${fontSize}px`,
+        borderRadius: `${borderRadius}px`,
+    };
+}
+function getPartitionPickerLabelStyles(platform = PlatformType.WEB) {
+    return platform === PlatformType.WEB
+        ? PARTITION_PICKER_LABEL_STYLES_WEB
+        : PARTITION_PICKER_LABEL_STYLES_H5;
+}
+const DEFAULT_PARTITION_PICKER_GRID_STYLE = {
+    baseColor: PARTITION_PICKER_GRID_BASE_COLOR,
+    strokeColor: PARTITION_PICKER_GRID_STROKE,
+    tileSize: PARTITION_PICKER_GRID_TILE_SIZE,
+    lineWidth: PARTITION_PICKER_GRID_LINE_WIDTH,
+    dotRadius: PARTITION_PICKER_GRID_DOT_RADIUS,
+    opacity: PARTITION_PICKER_GRID_OPACITY,
+    maxIntersectionDots: PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS,
+};
+const DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX = {
+    default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
+    emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
+};
+/**
+ * 将 platform 内置默认值与外部 pickerStyleConfig 深度合并。
+ * 调用方只需覆盖变化的字段，无需改组件源码。
+ */
+function resolvePartitionPickerStyles(platform = PlatformType.WEB, config) {
+    const baseLabels = getPartitionPickerLabelStyles(platform);
+    return {
+        boundary: merge$1({}, getPartitionPickerColors(platform), config?.boundary),
+        labels: config?.labels
+            ? {
+                default: merge$1({}, baseLabels.default, config.labels.default),
+                selected: merge$1({}, baseLabels.selected, config.labels.selected),
+                selectionOrderBadge: merge$1({}, baseLabels.selectionOrderBadge, config.labels.selectionOrderBadge),
+            }
+            : baseLabels,
+        grid: merge$1({}, DEFAULT_PARTITION_PICKER_GRID_STYLE, config?.grid),
+        boundaryStrokePx: merge$1({}, DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX, config?.boundaryStrokePx),
+        labelMinScreenWidthPx: config?.labelMinScreenWidthPx ?? H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX,
+    };
+}
+
+/**
+ * Standalone 模式下的视口控制：平移、滚轮缩放、H5 双指 pinch
+ *
+ * 核心思路：通过修改 SVG viewBox 实现平移/缩放，而非 CSS transform
+ * - fitViewBox：初始 fit 状态，resetView 回到此状态
+ * - viewBox：地块/通道/overlay 的可见区域
+ * - gridViewBox：网格底图专用；有地图旋转时平移按屏幕方向（不逆旋转），与地块跟手平移解耦
+ *
+ * 平移可在地块/分区名等任意区域发起；仅当位移小于阈值时才视为点击
+ */
+function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom = 4, enablePanZoom = true, refitOnResize = true, onViewportTap, mapRotationDeg = 0, }) {
+    /** 地图容器 DOM，用于绑定 wheel/pointer/touch 事件 */
+    const internalContainerRef = useRef(null);
+    const containerRef = externalContainerRef ?? internalContainerRef;
+    /** 始终指向最新 padding，供 fitToView 异步调用时使用 */
+    const paddingRef = useRef(padding);
+    paddingRef.current = padding;
+    /** padding 序列化 key，用于 useMemo 依赖（数组/对象形式 padding 变化时触发重算） */
+    const paddingKey = typeof padding === 'number' ? padding : JSON.stringify(padding);
+    /** 始终指向最新 onViewportTap，避免 effect 闭包过期 */
+    const onViewportTapRef = useRef(onViewportTap);
+    onViewportTapRef.current = onViewportTap;
+    /** 始终指向最新 mapRotationDeg，供平移回调读取 */
+    const mapRotationDegRef = useRef(mapRotationDeg);
+    mapRotationDegRef.current = mapRotationDeg;
+    /**
+     * 内容 viewBox：地图包围盒 + 固定 SVG padding
+     * 用于 ChannelClipPath 等裁剪，不随平移/缩放变化
+     */
+    const contentViewBox = useMemo(() => {
+        const bounds = calculateMapBounds(mapJson);
+        return boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
+    }, [mapJson]);
+    /**
+     * 初始 fit viewBox：在 contentViewBox 基础上适配容器宽高比与 screen padding
+     * resetView 会回到此状态
+     */
+    const fitViewBox = useMemo(() => computeFitViewBox(contentViewBox, width, height, padding), [contentViewBox, width, height, paddingKey]);
+    /** fitViewBox 的 ref 副本，供事件回调中读取最新值（zoom 限制基准） */
+    const fitViewBoxRef = useRef(fitViewBox);
+    fitViewBoxRef.current = fitViewBox;
+    /** 地块/通道/overlay 使用的 viewBox */
+    const [viewBox, setViewBox] = useState(fitViewBox);
+    /** 网格底图 viewBox：平移时按屏幕方向，避免与旋转后的地块反向滑动 */
+    const [gridViewBox, setGridViewBox] = useState(fitViewBox);
+    const viewBoxRef = useRef(viewBox);
+    viewBoxRef.current = viewBox;
+    const gridViewBoxRef = useRef(gridViewBox);
+    gridViewBoxRef.current = gridViewBox;
+    const pendingViewBoxRef = useRef(null);
+    const pendingGridViewBoxRef = useRef(null);
+    const viewBoxRafRef = useRef(null);
+    const flushScheduledViewBox = useCallback(() => {
+        viewBoxRafRef.current = null;
+        const mapPending = pendingViewBoxRef.current;
+        const gridPending = pendingGridViewBoxRef.current;
+        if (mapPending) {
+            pendingViewBoxRef.current = null;
+            viewBoxRef.current = mapPending;
+            setViewBox(mapPending);
+        }
+        if (gridPending) {
+            pendingGridViewBoxRef.current = null;
+            gridViewBoxRef.current = gridPending;
+            setGridViewBox(gridPending);
+        }
+    }, []);
+    const cancelScheduledViewBox = useCallback(() => {
+        pendingViewBoxRef.current = null;
+        pendingGridViewBoxRef.current = null;
+        if (viewBoxRafRef.current != null) {
+            cancelAnimationFrame(viewBoxRafRef.current);
+            viewBoxRafRef.current = null;
+        }
+    }, []);
+    const scheduleViewBox = useCallback((updater) => {
+        const base = pendingViewBoxRef.current ?? viewBoxRef.current;
+        const next = updater(base);
+        pendingViewBoxRef.current = next;
+        pendingGridViewBoxRef.current = next;
+        viewBoxRef.current = next;
+        gridViewBoxRef.current = next;
+        if (viewBoxRafRef.current == null) {
+            viewBoxRafRef.current = requestAnimationFrame(flushScheduledViewBox);
+        }
+    }, [flushScheduledViewBox]);
+    const commitViewBox = useCallback((next) => {
+        cancelScheduledViewBox();
+        viewBoxRef.current = next;
+        gridViewBoxRef.current = next;
+        setViewBox(next);
+        setGridViewBox(next);
+    }, [cancelScheduledViewBox]);
+    useEffect(() => () => {
+        cancelScheduledViewBox();
+    }, [cancelScheduledViewBox]);
+    // 地图数据 / padding 变化时始终重新 fit（width/height 取触发时刻的实测值，不作为 resize 依赖）
+    useEffect(() => {
+        if (width <= 0 || height <= 0)
+            return;
+        commitViewBox(computeFitViewBox(contentViewBox, width, height, padding));
+    }, [commitViewBox, contentViewBox, paddingKey]);
+    const prevSizeRef = useRef({ width: 0, height: 0 });
+    // 容器首次获得有效尺寸，或 refitOnResize 下的尺寸变化
+    useEffect(() => {
+        if (width <= 0 || height <= 0)
+            return;
+        const prev = prevSizeRef.current;
+        const sizeChanged = prev.width !== width || prev.height !== height;
+        const isInitialSize = prev.width <= 0 || prev.height <= 0;
+        prevSizeRef.current = { width, height };
+        if (isInitialSize || (refitOnResize && sizeChanged)) {
+            commitViewBox(fitViewBox);
+        }
+    }, [
+        commitViewBox,
+        refitOnResize,
+        width,
+        height,
+        fitViewBox.x,
+        fitViewBox.y,
+        fitViewBox.width,
+        fitViewBox.height,
+    ]);
+    /**
+     * 以屏幕焦点为中心缩放
+     * @param factor 缩放因子，>1 放大，<1 缩小
+     * @param focalX 焦点相对容器左上角的 X（px）
+     * @param focalY 焦点相对容器左上角的 Y（px）
+     */
+    const applyZoom = useCallback((factor, focalX, focalY) => {
+        scheduleViewBox((current) => {
+            const targetWidth = clampViewBoxWidth(current.width / factor, fitViewBoxRef.current, minZoom, maxZoom);
+            return resizeViewBoxAroundPoint(current, targetWidth, width, height, focalX, focalY);
+        });
+    }, [height, maxZoom, minZoom, scheduleViewBox, width]);
+    /**
+     * 平移视口：地块使用逆旋转后的 viewBox 增量（跟手）；网格使用屏幕方向增量（同向滑动）
+     */
+    const applyPan = useCallback((deltaXPx, deltaYPx) => {
+        const mapBase = pendingViewBoxRef.current ?? viewBoxRef.current;
+        const gridBase = pendingGridViewBoxRef.current ?? gridViewBoxRef.current;
+        const mapDelta = containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, mapBase, width, height, mapRotationDegRef.current);
+        const gridDelta = containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, gridBase, width, height, 0);
+        const nextMap = {
+            ...mapBase,
+            x: mapBase.x - mapDelta.dx,
+            y: mapBase.y - mapDelta.dy,
+        };
+        const nextGrid = {
+            ...gridBase,
+            x: gridBase.x - gridDelta.dx,
+            y: gridBase.y - gridDelta.dy,
+            width: nextMap.width,
+            height: nextMap.height,
+        };
+        pendingViewBoxRef.current = nextMap;
+        pendingGridViewBoxRef.current = nextGrid;
+        viewBoxRef.current = nextMap;
+        gridViewBoxRef.current = nextGrid;
+        if (viewBoxRafRef.current == null) {
+            viewBoxRafRef.current = requestAnimationFrame(flushScheduledViewBox);
+        }
+    }, [flushScheduledViewBox, height, width]);
+    /** 恢复到初始 fitViewBox（ref API resetView） */
+    const resetView = useCallback(() => {
+        commitViewBox(fitViewBoxRef.current);
+    }, [commitViewBox]);
+    /**
+     * 重新计算并应用 fit viewBox（ref API fitToView）
+     * @param nextPadding 可选的新 padding，不传则使用当前 paddingRef
+     */
+    const fitToView = useCallback((nextPadding) => {
+        const bounds = calculateMapBounds(mapJson);
+        const content = boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
+        const fit = computeFitViewBox(content, width, height, nextPadding ?? paddingRef.current);
+        fitViewBoxRef.current = fit;
+        commitViewBox(fit);
+    }, [commitViewBox, height, mapJson, width]);
+    /** 桌面端：按 pointerId 追踪多个指针（预留多指，当前仅单指平移） */
+    const pointerMapRef = useRef(new Map());
+    /** H5：双指 pinch 缩放状态 */
+    const pinchRef = useRef(null);
+    /** 单指/单指针平移状态（桌面 pointer 与 H5 touch 共用） */
+    const singlePanRef = useRef(null);
+    /** 当前正在驱动平移的 pointer id（桌面端） */
+    const activePanPointerIdRef = useRef(null);
+    /** 清空所有平移/pinch 相关 ref，防止 pointer 丢失导致状态残留 */
+    const clearPanState = useCallback(() => {
+        pointerMapRef.current.clear();
+        singlePanRef.current = null;
+        activePanPointerIdRef.current = null;
+    }, []);
+    /** 计算 touch 列表中前两指间距 */
+    const getTouchDistance = (touches) => {
+        if (touches.length < 2)
+            return 0;
+        const dx = touches[0].clientX - touches[1].clientX;
+        const dy = touches[0].clientY - touches[1].clientY;
+        return Math.hypot(dx, dy);
+    };
+    /** 计算 touch 列表中前两指中心点，坐标相对容器左上角 */
+    const getTouchCenter = (touches, rect) => {
+        const x = (touches[0].clientX + touches[1].clientX) / 2 - rect.left;
+        const y = (touches[0].clientY + touches[1].clientY) / 2 - rect.top;
+        return { x, y };
+    };
+    /** 判断事件目标是否在地图容器内 */
+    const isInsideContainer = (target, container) => {
+        if (!(target instanceof Element))
+            return false;
+        return container.contains(target);
+    };
+    /** 位移是否超过 PAN_CLICK_THRESHOLD_PX，超过则视为拖拽 */
+    const markPanMoved = (startX, startY, currentX, currentY) => Math.hypot(currentX - startX, currentY - startY) > PAN_CLICK_THRESHOLD_PX;
+    /** 触发点击回调（仅当未发生拖拽时） */
+    const emitViewportTap = (tapTarget) => {
+        if (tapTarget) {
+            onViewportTapRef.current?.(tapTarget);
+        }
+    };
+    // ── 绑定容器交互事件：滚轮缩放 / 桌面拖拽 / H5 pinch+单指平移 ──
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !enablePanZoom)
+            return;
+        /** 滚轮缩放，以鼠标位置为焦点 */
+        const handleWheel = (event) => {
+            event.preventDefault();
+            const rect = container.getBoundingClientRect();
+            const focalX = event.clientX - rect.left;
+            const focalY = event.clientY - rect.top;
+            const factor = event.deltaY < 0 ? 1.1 : 1 / 1.1;
+            applyZoom(factor, focalX, focalY);
+        };
+        /** 结束平移：未拖拽则触发 tap；释放 pointer capture 并清理状态 */
+        const endPan = (event) => {
+            // touch 由 touchend 统一处理，避免 pointerup 抢先清空 singlePanRef
+            if (event?.pointerType === 'touch') {
+                return;
+            }
+            if (event) {
+                const state = pointerMapRef.current.get(event.pointerId);
+                if (state && !state.moved && state.tapTarget) {
+                    emitViewportTap(state.tapTarget);
+                }
+                pointerMapRef.current.delete(event.pointerId);
+                try {
+                    if (container.hasPointerCapture(event.pointerId)) {
+                        container.releasePointerCapture(event.pointerId);
+                    }
+                }
+                catch {
+                    // ignore
+                }
+            }
+            if (!event || pointerMapRef.current.size === 0) {
+                clearPanState();
+            }
+        };
+        // 桌面端：pointer 事件处理平移（touch 交给下方 touch 事件，避免重复）
+        const handlePointerDown = (event) => {
+            if (!isInsideContainer(event.target, container))
+                return;
+            if (event.pointerType === 'touch') {
+                return;
+            }
+            // 仅响应主键（左键）
+            if (event.pointerType === 'mouse' && event.button !== 0) {
+                return;
+            }
+            pointerMapRef.current.set(event.pointerId, {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+                moved: false,
+                tapTarget: event.target instanceof Element ? event.target : null,
+            });
+            activePanPointerIdRef.current = event.pointerId;
+            singlePanRef.current = {
+                startX: event.clientX,
+                startY: event.clientY,
+                viewBox: viewBoxRef.current,
+                moved: false,
+                tapTarget: event.target instanceof Element ? event.target : null,
+            };
+            container.setPointerCapture(event.pointerId);
+        };
+        const handlePointerMove = (event) => {
+            // 主键已松开但 pointerup 未触发时（如释放在容器外），避免继续平移
+            if (event.pointerType === 'mouse' && event.buttons === 0) {
+                endPan(event);
+                return;
+            }
+            if (activePanPointerIdRef.current !== event.pointerId)
+                return;
+            const state = pointerMapRef.current.get(event.pointerId);
+            if (!state || !singlePanRef.current)
+                return;
+            const dx = event.clientX - state.startX;
+            const dy = event.clientY - state.startY;
+            if (markPanMoved(state.startX, state.startY, event.clientX, event.clientY)) {
+                state.moved = true;
+                singlePanRef.current.moved = true;
+            }
+            applyPan(dx, dy);
+            pointerMapRef.current.set(event.pointerId, {
+                ...state,
+                startX: event.clientX,
+                startY: event.clientY,
+            });
+        };
+        const handlePointerUp = (event) => {
+            endPan(event);
+        };
+        const handleLostPointerCapture = (event) => {
+            if (activePanPointerIdRef.current === event.pointerId) {
+                endPan(event);
+            }
+        };
+        const handleWindowPointerUp = (event) => {
+            if (event instanceof PointerEvent && event.pointerType === 'touch') {
+                return;
+            }
+            clearPanState();
+        };
+        // H5：双指 pinch 缩放、单指平移
+        const handleTouchStart = (event) => {
+            if (event.touches.length === 2) {
+                event.preventDefault();
+                const rect = container.getBoundingClientRect();
+                const center = getTouchCenter(event.touches, rect);
+                pinchRef.current = {
+                    initialDistance: getTouchDistance(event.touches),
+                    initialViewBox: viewBoxRef.current,
+                    centerX: center.x,
+                    centerY: center.y,
+                };
+                singlePanRef.current = null;
+                return;
+            }
+            if (event.touches.length === 1 && isInsideContainer(event.target, container)) {
+                singlePanRef.current = {
+                    startX: event.touches[0].clientX,
+                    startY: event.touches[0].clientY,
+                    viewBox: viewBoxRef.current,
+                    moved: false,
+                    tapTarget: event.target instanceof Element ? event.target : null,
+                };
+            }
+        };
+        const handleTouchMove = (event) => {
+            if (event.touches.length === 2 && pinchRef.current) {
+                event.preventDefault();
+                const rect = container.getBoundingClientRect();
+                const distance = getTouchDistance(event.touches);
+                if (distance <= 0 || pinchRef.current.initialDistance <= 0)
+                    return;
+                const scale = distance / pinchRef.current.initialDistance;
+                const center = getTouchCenter(event.touches, rect);
+                const targetWidth = clampViewBoxWidth(pinchRef.current.initialViewBox.width / scale, fitViewBoxRef.current, minZoom, maxZoom);
+                scheduleViewBox(() => resizeViewBoxAroundPoint(pinchRef.current.initialViewBox, targetWidth, width, height, center.x, center.y));
+                return;
+            }
+            if (event.touches.length === 1 && singlePanRef.current) {
+                const panState = singlePanRef.current;
+                const touch = event.touches[0];
+                if (markPanMoved(panState.startX, panState.startY, touch.clientX, touch.clientY)) {
+                    panState.moved = true;
+                }
+                if (panState.moved) {
+                    event.preventDefault();
+                }
+                const dx = touch.clientX - panState.startX;
+                const dy = touch.clientY - panState.startY;
+                applyPan(dx, dy);
+                singlePanRef.current = {
+                    ...panState,
+                    startX: touch.clientX,
+                    startY: touch.clientY,
+                };
+            }
+        };
+        const handleTouchEnd = (event) => {
+            const touchState = singlePanRef.current;
+            if (touchState && !touchState.moved) {
+                let tapTarget = touchState.tapTarget;
+                const touch = event.changedTouches[0];
+                if (touch) {
+                    const hitTarget = document.elementFromPoint(touch.clientX, touch.clientY);
+                    if (hitTarget instanceof Element) {
+                        tapTarget = hitTarget;
+                    }
+                }
+                emitViewportTap(tapTarget);
+            }
+            if (pinchRef.current) {
+                pinchRef.current = null;
+            }
+            clearPanState();
+        };
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        container.addEventListener('pointerdown', handlePointerDown);
+        container.addEventListener('pointermove', handlePointerMove);
+        container.addEventListener('pointerup', handlePointerUp);
+        container.addEventListener('pointercancel', handlePointerUp);
+        container.addEventListener('lostpointercapture', handleLostPointerCapture);
+        container.addEventListener('touchstart', handleTouchStart, { passive: false });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        container.addEventListener('touchend', handleTouchEnd);
+        container.addEventListener('touchcancel', handleTouchEnd);
+        window.addEventListener('pointerup', handleWindowPointerUp);
+        window.addEventListener('mouseup', handleWindowPointerUp);
+        window.addEventListener('blur', handleWindowPointerUp);
+        return () => {
+            container.removeEventListener('wheel', handleWheel);
+            container.removeEventListener('pointerdown', handlePointerDown);
+            container.removeEventListener('pointermove', handlePointerMove);
+            container.removeEventListener('pointerup', handlePointerUp);
+            container.removeEventListener('pointercancel', handlePointerUp);
+            container.removeEventListener('lostpointercapture', handleLostPointerCapture);
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+            container.removeEventListener('touchcancel', handleTouchEnd);
+            window.removeEventListener('pointerup', handleWindowPointerUp);
+            window.removeEventListener('mouseup', handleWindowPointerUp);
+            window.removeEventListener('blur', handleWindowPointerUp);
+        };
+    }, [applyPan, applyZoom, clearPanState, enablePanZoom, height, maxZoom, minZoom, scheduleViewBox, width]);
+    return {
+        /** 绑定到地图外层容器的 ref */
+        containerRef,
+        /** 地块/通道/overlay 使用的 viewBox */
+        viewBox,
+        /** 网格底图 viewBox（平移按屏幕方向，与旋转地块解耦） */
+        gridViewBox,
+        /** 初始 fit viewBox，供 clip path 等需要稳定坐标系的场景 */
+        fitViewBox,
+        /** 恢复到初始 fit 状态 */
+        resetView,
+        /** 重新 fit 地图到容器（可传新 padding） */
+        fitToView,
+    };
+}
+
+/** WGS84 经纬度坐标系 */
+const WGS84 = 'EPSG:4326';
+/** Web Mercator 平面坐标（米），与 MowerMapRenderer / defaultTransform.x|y 一致 */
+const WEB_MERCATOR = 'EPSG:3857';
+proj4.defs(WGS84, '+proj=longlat +datum=WGS84 +no_defs');
+proj4.defs(WEB_MERCATOR, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+/**
+ * Map 模式专用：管理 OverlayViewF 所需的 bounds、viewBox、缩放与 fitBounds。
+ * 逻辑对齐 MowerMapRenderer 的 Google Maps 叠加层。
+ */
+function useGoogleMapsOverlay({ mapJson, mapRef, defaultTransform, originNorthRotate, platform = PlatformType.WEB, padding = 50, }) {
+    /** 仅当外部传入 mapRef 时执行 fitBounds / zoom 监听等副作用 */
+    const enabled = Boolean(mapRef);
+    const transformX = defaultTransform?.x ?? 0;
+    const transformY = defaultTransform?.y ?? 0;
+    const transformRotation = defaultTransform?.rotation ?? 0;
+    /** 叠加层实际旋转 = 地图北向偏移 + 用户 rotation */
+    const actureRotate = originNorthRotate + transformRotation;
+    /** OverlayViewF onDraw 回调写入的 overlay 像素宽高 */
+    const [overlayLayout, setOverlayLayout] = useState(null);
+    const mapBounds = useMemo(() => calculateMapBounds(mapJson), [mapJson]);
+    /**
+     * SVG viewBox：地图 JSON 平面坐标全量范围。
+     * 需等待 overlayLayout 就绪后才可计算（与 MowerMapRenderer svgViewBox 一致）。
+     */
+    const svgViewBox = useMemo(() => {
+        if (!overlayLayout?.width || !overlayLayout?.height)
+            return null;
+        const boundWidth = mapBounds.maxX - mapBounds.minX;
+        const boundHeight = mapBounds.maxY - mapBounds.minY;
+        if (boundWidth <= 0 || boundHeight <= 0)
+            return null;
+        return {
+            x: mapBounds.minX,
+            y: mapBounds.minY,
+            width: boundWidth,
+            height: boundHeight,
+        };
+    }, [mapBounds, overlayLayout?.height, overlayLayout?.width]);
+    /**
+     * OverlayViewF 的 LatLngBounds：
+     * GPS 包围盒 + defaultTransform 在 Web Mercator 下的平移偏移。
+     */
+    const bounds = useMemo(() => {
+        if (!mapJson || typeof window === 'undefined' || !window.google?.maps)
+            return null;
+        const validBounds = getValidGpsBounds(mapJson, 0);
+        const [swLng0, swLat0] = validBounds.sw;
+        const [neLng0, neLat0] = validBounds.ne;
+        const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
+        const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
+        const swX = swX0 + transformX;
+        const swY = swY0 + transformY;
+        const neX = neX0 + transformX;
+        const neY = neY0 + transformY;
+        const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
+        const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
+        return new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
+    }, [mapJson, transformX, transformY]);
+    /** OverlayViewF onDraw：解析 overlay 容器 style，得到像素 layout */
+    const handleOverlayDraw = useCallback((style) => {
+        const layout = Object.keys(style).reduce((acc, key) => {
+            if (!key)
+                return acc;
+            acc[key] = parseFloat(style[key]);
+            return acc;
+        }, {});
+        if (layout.width > 0 && layout.height > 0) {
+            setOverlayLayout({ width: layout.width, height: layout.height });
+        }
+    }, []);
+    /** Map 模式 fitToView：调用 google.maps.Map.fitBounds，考虑旋转后的 GPS 包围盒 */
+    const fitToView = useCallback((nextPadding) => {
+        if (!enabled || !mapRef || !mapJson)
+            return;
+        const rotate = transformRotation + originNorthRotate;
+        const validBounds = getValidGpsBounds(mapJson, rotate);
+        const [swLng0, swLat0] = validBounds.sw;
+        const [neLng0, neLat0] = validBounds.ne;
+        const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
+        const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
+        const swX = swX0 + transformX;
+        const swY = swY0 + transformY;
+        const neX = neX0 + transformX;
+        const neY = neY0 + transformY;
+        const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
+        const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
+        const googleBounds = new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
+        const pad = normalizeScreenPadding(nextPadding ?? padding, 0);
+        const paddingArg = pad.top === pad.right && pad.right === pad.bottom && pad.bottom === pad.left
+            ? pad.top
+            : { top: pad.top, right: pad.right, bottom: pad.bottom, left: pad.left };
+        mapRef.fitBounds(googleBounds, paddingArg);
+    }, [enabled, mapJson, mapRef, originNorthRotate, padding, transformRotation, transformX, transformY]);
+    const resetView = useCallback(() => {
+        fitToView();
+    }, [fitToView]);
+    /** 参考缩放级别，用于计算 overlayScale（通道线宽视觉恒定，与 MowerMapRenderer 一致） */
+    const REFERENCE_ZOOM = platform === PlatformType.WEB ? 21 : 21;
+    const [overlayScale, setOverlayScale] = useState(1);
+    useEffect(() => {
+        if (!enabled || !mapRef)
+            return;
+        const updateScale = () => {
+            const currentZoom = mapRef.getZoom();
+            if (currentZoom === undefined)
+                return;
+            const zoomDiff = currentZoom - REFERENCE_ZOOM;
+            const scale = Math.pow(2, -zoomDiff);
+            if (scale < 1) {
+                setOverlayScale(1);
+            }
+            else if (scale > 200) {
+                setOverlayScale(platform === PlatformType.H5 ? 300 : 200);
+            }
+            else {
+                setOverlayScale(platform === PlatformType.H5 ? 1.5 * scale : scale);
+            }
+        };
+        const handleZoomChanged = throttle$2(updateScale, 50);
+        const listener = mapRef.addListener('zoom_changed', handleZoomChanged);
+        updateScale();
+        return () => {
+            if (listener) {
+                window.google.maps.event.removeListener(listener);
+            }
+            handleZoomChanged.cancel();
+        };
+    }, [enabled, mapRef, platform, REFERENCE_ZOOM]);
+    const overlayWidth = overlayLayout?.width ?? 0;
+    const overlayHeight = overlayLayout?.height ?? 0;
+    const isOverlayReady = overlayWidth > 0 && overlayHeight > 0 && svgViewBox != null;
+    return {
+        actureRotate,
+        bounds,
+        svgViewBox,
+        fitViewBox: svgViewBox,
+        overlayWidth,
+        overlayHeight,
+        overlayScale,
+        isOverlayReady,
+        handleOverlayDraw,
+        fitToView,
+        resetView,
+    };
+}
+
+function getInitialSize(width, height) {
+    return {
+        width: typeof width === 'number' && width > 0 ? width : 0,
+        height: typeof height === 'number' && height > 0 ? height : 0,
+    };
+}
+function cssLengthToStyle(value) {
+    return value;
+}
+/**
+ * 将 width/height（px 或 CSS length）应用到容器，并用 ResizeObserver 测量实际像素尺寸
+ * 供 fit、标签定位、线宽换算等逻辑使用
+ */
+function useContainerSize(width, height) {
+    const containerRef = useRef(null);
+    const [size, setSize] = useState(() => getInitialSize(width, height));
+    const layoutStyle = useMemo(() => ({
+        width: cssLengthToStyle(width),
+        height: cssLengthToStyle(height),
+    }), [width, height]);
+    useLayoutEffect(() => {
+        const element = containerRef.current;
+        if (!element)
+            return;
+        const updateSize = () => {
+            const { width: nextWidth, height: nextHeight } = element.getBoundingClientRect();
+            if (nextWidth <= 0 || nextHeight <= 0)
+                return;
+            setSize((prev) => prev.width === nextWidth && prev.height === nextHeight
+                ? prev
+                : { width: nextWidth, height: nextHeight });
+        };
+        updateSize();
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const isReady = size.width > 0 && size.height > 0;
+    return {
+        containerRef,
+        layoutStyle,
+        width: size.width,
+        height: size.height,
+        isReady,
+    };
+}
+
+/**
+ * 地块 hover 状态管理（受控 / 非受控）
+ *
+ * 用于地图与外部表格等 UI 双向联动：
+ * - 地图 hover → onBoundaryHoverChange → 宿主更新表格行高亮
+ * - 表格 hover → 宿主传入 hoveredBoundaryId → 地图同步高亮
+ */
+function useBoundaryHover({ hoveredBoundaryId, defaultHoveredBoundaryId = null, onBoundaryHoverChange, }) {
+    const isControlled = hoveredBoundaryId !== undefined;
+    const [internalHoveredId, setInternalHoveredId] = useState(defaultHoveredBoundaryId);
+    const hoveredId = isControlled ? hoveredBoundaryId : internalHoveredId;
+    const setHoveredId = useCallback((id) => {
+        if (!isControlled) {
+            setInternalHoveredId(id);
+        }
+        onBoundaryHoverChange?.(id);
+    }, [isControlled, onBoundaryHoverChange]);
+    return {
+        hoveredId,
+        setHoveredId,
+    };
+}
+
+function filterSelectableIds(ids, disabledBoundaryIds) {
+    if (!disabledBoundaryIds?.size)
+        return ids;
+    return ids.filter((id) => !disabledBoundaryIds.has(id));
+}
+/**
+ * 地块多选状态管理（受控 / 非受控）
+ *
+ * - 传入 selectedBoundaryIds → 受控，由宿主维护选中列表（如表格勾选）
+ * - 未传入 → 非受控，内部维护，仍可通过 onSelectionChange 感知变化
+ */
+function useBoundarySelection({ selectedBoundaryIds, defaultSelectedBoundaryIds = [], onSelectionChange, disabledBoundaryIds, }) {
+    const isControlled = selectedBoundaryIds !== undefined;
+    const [internalIds, setInternalIds] = useState(filterSelectableIds(defaultSelectedBoundaryIds, disabledBoundaryIds));
+    const selectedIds = isControlled
+        ? filterSelectableIds(selectedBoundaryIds, disabledBoundaryIds)
+        : internalIds;
+    const setSelectedIds = useCallback((ids) => {
+        const next = filterSelectableIds(ids, disabledBoundaryIds);
+        if (!isControlled) {
+            setInternalIds(next);
+        }
+        onSelectionChange?.(next);
+    }, [disabledBoundaryIds, isControlled, onSelectionChange]);
+    /** 点击同一地块时 toggle，支持多选；孤立子地块不可选 */
+    const toggleBoundary = useCallback((id) => {
+        if (disabledBoundaryIds?.has(id))
+            return;
+        const next = selectedIds.includes(id)
+            ? selectedIds.filter((item) => item !== id)
+            : [...selectedIds, id];
+        setSelectedIds(next);
+    }, [disabledBoundaryIds, selectedIds, setSelectedIds]);
+    return {
+        selectedIds,
+        toggleBoundary,
+        setSelectedIds,
+    };
+}
+
+/** 计算地图中不可选中的孤立子地块 id 集合 */
+function useIsolatedBoundaryIds(mapJson) {
+    return useMemo(() => {
+        const boundaries = generateBoundaryData(mapJson);
+        const ids = new Set();
+        for (const boundary of boundaries) {
+            if (boundary.isIsolated) {
+                ids.add(boundary.id);
+            }
+        }
+        return ids;
+    }, [mapJson]);
+}
+/** 供宿主（如表格）判断某地块是否不可选 */
+function getIsolatedBoundaryIds(mapJson) {
+    return generateBoundaryData(mapJson)
+        .filter((boundary) => boundary.isIsolated)
+        .map((boundary) => boundary.id);
+}
+
+/** 计算多边形重心，作为分区名气泡的锚点 */
+function computePolygonCentroid(points) {
+    if (!points || points.length < 3)
+        return null;
+    const valid = points.filter((p) => p.length >= 2);
+    if (valid.length < 3)
+        return null;
+    const polygon = [...valid];
+    const first = polygon[0];
+    const last = polygon[polygon.length - 1];
+    if (first[0] !== last[0] || first[1] !== last[1]) {
+        polygon.push([first[0], first[1]]);
+    }
+    let area = 0;
+    let cx = 0;
+    let cy = 0;
+    for (let i = 0; i < polygon.length - 1; i++) {
+        const x0 = polygon[i][0];
+        const y0 = polygon[i][1];
+        const x1 = polygon[i + 1][0];
+        const y1 = polygon[i + 1][1];
+        const cross = x0 * y1 - x1 * y0;
+        area += cross;
+        cx += (x0 + x1) * cross;
+        cy += (y0 + y1) * cross;
+    }
+    area = area / 2;
+    if (Math.abs(area) < 1e-10) {
+        let sx = 0;
+        let sy = 0;
+        for (const [x, y] of valid) {
+            sx += x;
+            sy += y;
+        }
+        return { x: sx / valid.length, y: sy / valid.length };
+    }
+    cx = cx / (6 * area);
+    cy = cy / (6 * area);
+    return { x: cx, y: cy };
+}
+function buildBoundaryLabelGeometry(mapData) {
+    const boundaryData = generateBoundaryData(mapData);
+    const results = [];
+    for (const boundary of boundaryData) {
+        const centroid = computePolygonCentroid(boundary.points);
+        if (!centroid)
+            continue;
+        results.push({
+            id: boundary.id,
+            name: boundary.name,
+            points: boundary.points,
+            centroid,
+            isIsolated: boundary.isIsolated,
+        });
+    }
+    return results;
+}
+/**
+ * 根据当前「显示 viewBox」计算分区名气泡位置（不预旋转；由 mapOverlayLayer CSS rotate 处理）
+ */
+function usePartitionLabelItems(mapData, viewBox, containerWidth, containerHeight, options) {
+    const positionMode = options?.positionMode ?? 'meet';
+    const boundaryGeometry = useMemo(() => (mapData ? buildBoundaryLabelGeometry(mapData) : []), [mapData]);
+    return useMemo(() => {
+        if (!viewBox || containerWidth <= 0 || containerHeight <= 0)
+            return [];
+        const results = [];
+        for (const boundary of boundaryGeometry) {
+            let leftPct;
+            let topPct;
+            if (positionMode === 'overlay') {
+                const relX = (boundary.centroid.x - viewBox.x) / viewBox.width;
+                const relY = (boundary.centroid.y - viewBox.y) / viewBox.height;
+                leftPct = relX * 100;
+                topPct = relY * 100;
+            }
+            else {
+                const position = mapPointToContainerPercent(boundary.centroid.x, boundary.centroid.y, viewBox, containerWidth, containerHeight);
+                leftPct = position.leftPct;
+                topPct = position.topPct;
+            }
+            if (!Number.isFinite(leftPct) || !Number.isFinite(topPct))
+                continue;
+            const screenWidthPx = computePolygonScreenWidthPx(boundary.points, viewBox, containerWidth, containerHeight);
+            results.push({
+                id: boundary.id,
+                name: boundary.name,
+                leftPct,
+                topPct,
+                screenWidthPx,
+                isIsolated: boundary.isIsolated,
+            });
+        }
+        return results;
+    }, [
+        boundaryGeometry,
+        containerWidth,
+        containerHeight,
+        viewBox?.x,
+        viewBox?.y,
+        viewBox?.width,
+        viewBox?.height,
+        positionMode,
+    ]);
+}
+
+var css_248z = "@charset \"UTF-8\";\n/* 地图容器：裁剪溢出，禁用浏览器默认 touch 手势以便自定义 pinch */\n.index-module_container__nNYv7 {\n  position: relative;\n  overflow: hidden;\n  touch-action: none;\n  user-select: none;\n  cursor: grab;\n  /* H5 点击时不出现矩形 tap 高亮 */\n  -webkit-tap-highlight-color: transparent;\n  tap-highlight-color: transparent;\n}\n\n/* 网格 + 地块双层 SVG 叠放，共用 viewBox 保证平移/缩放同步 */\n.index-module_mapSvgStack__nz2s2 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.index-module_gridSvg__MoJD6 {\n  position: absolute;\n  inset: 0;\n  display: block;\n  pointer-events: none;\n}\n\n/* 地图 SVG：地块/通道，可绕 viewBox 中心旋转 */\n.index-module_mapSvg__vN0LV {\n  position: absolute;\n  inset: 0;\n  display: block;\n  pointer-events: none;\n  -webkit-tap-highlight-color: transparent;\n  tap-highlight-color: transparent;\n}\n\n/* 可点击地块：点击选中由 viewport 统一处理，此处保留 hover */\n.index-module_boundaryPolygon__uHe-E {\n  cursor: grab;\n  pointer-events: auto;\n  -webkit-tap-highlight-color: transparent;\n  tap-highlight-color: transparent;\n  outline: none;\n  -webkit-touch-callout: none;\n}\n\n.index-module_container__nNYv7:active {\n  cursor: grabbing;\n}\n\n.index-module_boundaryPolygon__uHe-E:active {\n  cursor: grabbing;\n}\n\n/* Map 模式：OverlayViewF 内根节点，铺满 overlay 像素区域 */\n.index-module_googleOverlayRoot__TQ3II {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: visible;\n}\n\n/* HTML overlay 层：CSS rotate 与 MowerMapRenderer OverlayViewF 一致，子元素自行反向补偿 */\n.index-module_mapOverlayLayer__7jTDy {\n  position: absolute;\n  inset: 0;\n  transform-origin: 50% 50%;\n  pointer-events: none;\n  z-index: 2;\n}\n\n/* 分区名气泡层，绝对定位覆盖在 SVG 之上 */\n.index-module_labelsLayer__Rcikw {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.index-module_label__xo3Kc {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  pointer-events: auto;\n  cursor: grab;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  tap-highlight-color: transparent;\n  outline: none;\n  -webkit-touch-callout: none;\n}\n\n.index-module_label__xo3Kc:active {\n  cursor: grabbing;\n}\n\n.index-module_labelWithOrder__uiHNo {\n  gap: 8px;\n}\n\n.index-module_labelWithOrderH5__fg3nU {\n  gap: 4px;\n}\n\n.index-module_labelOrderOnly__TDLBU {\n  gap: 0;\n}\n\n/* H5 名称标签：总宽 72px，文案最大 60px 可换行 */\n.index-module_labelH5Wrap__Es5cA {\n  white-space: normal;\n}\n\n.index-module_labelPill__7jnOo {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n}\n\n.index-module_labelPillH5__iPeHi {\n  width: 72px;\n  max-width: 72px;\n  box-sizing: border-box;\n}\n\n.index-module_labelText__ialST {\n  word-break: break-word;\n  text-align: center;\n}\n\n.index-module_labelTextH5__jz8SO {\n  max-width: 60px;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  line-height: 1.33;\n}\n\n/* 选中序号徽章：尺寸与颜色由 constants 按 platform 注入 */\n.index-module_selectionOrderBadge__uj7LX {\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.index-module_boundaryPolygonIsolated__syN4V {\n  cursor: not-allowed;\n}\n\n.index-module_boundaryPolygonIsolated__syN4V:active {\n  cursor: grabbing;\n}\n\n.index-module_labelIsolated__K3WAB {\n  cursor: not-allowed;\n  pointer-events: auto;\n}\n\n.index-module_labelIsolated__K3WAB:active {\n  cursor: grabbing;\n}\n\n.index-module_labelIsolatedLayout__k-rwI {\n  gap: 4px;\n}\n\n.index-module_isolatedIconBelow__PuVIF {\n  position: static;\n  transform: none;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.index-module_isolatedIconBelow__PuVIF.index-module_isolatedIconWeb__iPkYp {\n  width: 20px;\n  height: 20px;\n}\n\n.index-module_isolatedIcon__Vbxl0 {\n  position: absolute;\n  width: 24px;\n  height: 24px;\n  left: 50%;\n  bottom: calc(100% + 4px);\n  transform: translateX(-50%);\n}\n\n.index-module_isolatedIconWeb__iPkYp {\n  width: 20px;\n  height: 20px;\n  bottom: calc(100% + 2px);\n}";
+var styles = {"container":"index-module_container__nNYv7","mapSvgStack":"index-module_mapSvgStack__nz2s2","gridSvg":"index-module_gridSvg__MoJD6","mapSvg":"index-module_mapSvg__vN0LV","boundaryPolygon":"index-module_boundaryPolygon__uHe-E","googleOverlayRoot":"index-module_googleOverlayRoot__TQ3II","mapOverlayLayer":"index-module_mapOverlayLayer__7jTDy","labelsLayer":"index-module_labelsLayer__Rcikw","label":"index-module_label__xo3Kc","labelWithOrder":"index-module_labelWithOrder__uiHNo","labelWithOrderH5":"index-module_labelWithOrderH5__fg3nU","labelOrderOnly":"index-module_labelOrderOnly__TDLBU","labelH5Wrap":"index-module_labelH5Wrap__Es5cA","labelPill":"index-module_labelPill__7jnOo","labelPillH5":"index-module_labelPillH5__iPeHi","labelText":"index-module_labelText__ialST","labelTextH5":"index-module_labelTextH5__jz8SO","selectionOrderBadge":"index-module_selectionOrderBadge__uj7LX","boundaryPolygonIsolated":"index-module_boundaryPolygonIsolated__syN4V","labelIsolated":"index-module_labelIsolated__K3WAB","labelIsolatedLayout":"index-module_labelIsolatedLayout__k-rwI","isolatedIconBelow":"index-module_isolatedIconBelow__PuVIF","isolatedIconWeb":"index-module_isolatedIconWeb__iPkYp"};
+styleInject(css_248z);
+
+const PARTITION_BOUNDARY_ID_ATTR$1 = 'data-partition-boundary-id';
+const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight, fitViewBox, containerWidth, containerHeight, onHoverChange, onBoundaryClick, }) => {
+    const style = data.style || {};
+    const boundaryId = Number(data.id);
+    const colors = boundaryColors;
+    const strokePx = boundaryStrokePx ?? {
+        default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
+        emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
+    };
+    const pointsString = useMemo(() => data.points.map((point) => `${point[0]},${point[1]}`).join(' '), [data.points]);
+    const fillColor = useMemo(() => {
+        if (isIsolated)
+            return colors.isolatedFill;
+        if (selected) {
+            return hovered ? colors.selectedHoverFill : colors.selectedFill;
+        }
+        if (hovered)
+            return colors.hoverFill;
+        return style.fillColor || colors.defaultFill;
+    }, [colors, hovered, isIsolated, selected, style.fillColor]);
+    const strokeColor = useMemo(() => {
+        if (isIsolated)
+            return colors.isolatedStroke;
+        if (selected) {
+            return hovered ? colors.selectedHoverStroke : colors.selectedStroke;
+        }
+        if (hovered)
+            return colors.hoverStroke;
+        return style.lineColor || colors.defaultStroke;
+    }, [colors, hovered, isIsolated, selected, style.lineColor]);
+    const strokeWidth = useMemo(() => {
+        let baseWidth;
+        let emphasized = false;
+        if (isIsolated)
+            baseWidth = colors.isolatedStrokeWidth;
+        else if (selected) {
+            emphasized = true;
+            baseWidth = hovered ? colors.selectedHoverStrokeWidth : colors.selectedStrokeWidth;
+        }
+        else if (hovered) {
+            emphasized = true;
+            baseWidth = colors.hoverStrokeWidth;
+        }
+        else
+            baseWidth = colors.defaultStrokeWidth;
+        const viewBox = { width: viewBoxWidth, height: viewBoxHeight };
+        return scaleStrokeWidthForViewBox(baseWidth, viewBox, fitViewBox, {
+            containerWidth,
+            containerHeight,
+            minScreenStrokePx: emphasized ? strokePx.emphasized : strokePx.default,
+        });
+    }, [
+        colors,
+        containerHeight,
+        containerWidth,
+        fitViewBox,
+        hovered,
+        isIsolated,
+        selected,
+        strokePx,
+        viewBoxHeight,
+        viewBoxWidth,
+    ]);
+    if (isIsolated) {
+        return (jsx("polygon", { className: `${styles.boundaryPolygon} ${styles.boundaryPolygonIsolated}`, points: pointsString, fill: fillColor, stroke: strokeColor, strokeWidth: strokeWidth, strokeLinejoin: "round" }));
+    }
+    return (jsx("polygon", { className: styles.boundaryPolygon, points: pointsString, fill: fillColor, stroke: strokeColor, strokeWidth: strokeWidth, strokeLinejoin: "round", [PARTITION_BOUNDARY_ID_ATTR$1]: boundaryId, onMouseEnter: () => onHoverChange(boundaryId), onMouseLeave: () => onHoverChange(null), onClick: onBoundaryClick
+            ? (event) => {
+                event.stopPropagation();
+                onBoundaryClick(boundaryId);
+            }
+            : undefined }));
+};
+var SelectableBoundaryElement$1 = memo(SelectableBoundaryElement);
+
+const PartitionPickerSvg = ({ svgElementDatas, viewBox, fitViewBox, containerWidth, containerHeight, mapRotation = 0, boundaryColors, boundaryStrokePx, isolatedBoundaryIds, selectedIds, hoveredId, onHoverChange, onBoundaryClick, }) => {
+    const boundaries = (svgElementDatas[DataType.BOUNDARY] || []);
+    const channels = (svgElementDatas[DataType.CHANNEL] || []);
+    const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const mapContentTransform = useMemo(() => {
+        if (mapRotation === 0)
+            return undefined;
+        const { x: cx, y: cy } = getViewBoxCenter(viewBox);
+        return `rotate(${mapRotation}, ${cx}, ${cy})`;
+    }, [mapRotation, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
+    const mapContent = (jsxs(Fragment, { children: [jsx(GElement, { type: "boundary", children: boundaries.map((item) => {
+                    const boundaryId = Number(item.id);
+                    return (jsx(SelectableBoundaryElement$1, { data: item, boundaryColors: boundaryColors, boundaryStrokePx: boundaryStrokePx, isIsolated: isolatedBoundaryIds.has(boundaryId), selected: selectedIdSet.has(boundaryId), hovered: hoveredId === boundaryId, viewBoxWidth: viewBox.width, viewBoxHeight: viewBox.height, fitViewBox: fitViewBox, containerWidth: containerWidth, containerHeight: containerHeight, onHoverChange: onHoverChange, onBoundaryClick: onBoundaryClick }, item.id));
+                }) }), jsxs(GElement, { type: "channel", children: [jsx(ChannelClipPath, {}), channels.map((item) => (jsx(ChannelElement, { data: item }, item.id)))] })] }));
+    return (jsx("svg", { className: styles.mapSvg, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", shapeRendering: "geometricPrecision", children: mapContentTransform ? (jsx("g", { transform: mapContentTransform, children: mapContent })) : (mapContent) }));
+};
+
+function estimateGridIntersectionCount(viewBox, tileSize) {
+    if (tileSize <= 0)
+        return 0;
+    const cols = Math.floor((viewBox.width + 1e-6) / tileSize) + 1;
+    const rows = Math.floor((viewBox.height + 1e-6) / tileSize) + 1;
+    return cols * rows;
+}
+/** 计算当前 viewBox 可见范围内的网格交点（每个交点只渲染一次圆点） */
+function getVisibleGridIntersections(viewBox, tileSize, maxDots) {
+    if (tileSize <= 0 || estimateGridIntersectionCount(viewBox, tileSize) > maxDots)
+        return [];
+    const points = [];
+    const minX = viewBox.x;
+    const minY = viewBox.y;
+    const maxX = viewBox.x + viewBox.width;
+    const maxY = viewBox.y + viewBox.height;
+    const startX = Math.floor(minX / tileSize) * tileSize;
+    const startY = Math.floor(minY / tileSize) * tileSize;
+    for (let x = startX; x <= maxX + 1e-6; x += tileSize) {
+        for (let y = startY; y <= maxY + 1e-6; y += tileSize) {
+            points.push({ x, y });
+        }
+    }
+    return points;
+}
+const MapGridBackground = ({ viewBox, gridStyle }) => {
+    const reactId = useId();
+    const patternId = useMemo(() => `partition-picker-grid-lines-${reactId.replace(/:/g, '-')}`, [reactId]);
+    const { baseColor, strokeColor, tileSize: tile, lineWidth, dotRadius, opacity, maxIntersectionDots, } = gridStyle;
+    const intersections = useMemo(() => getVisibleGridIntersections(viewBox, tile, maxIntersectionDots), [maxIntersectionDots, tile, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
+    return (jsxs("g", { className: "partition-picker-grid-bg", "aria-hidden": true, pointerEvents: "none", children: [jsx("defs", { children: jsxs("pattern", { id: patternId, patternUnits: "userSpaceOnUse", width: tile, height: tile, children: [jsx("line", { x1: 0, y1: 0, x2: tile, y2: 0, stroke: strokeColor, strokeWidth: lineWidth }), jsx("line", { x1: 0, y1: 0, x2: 0, y2: tile, stroke: strokeColor, strokeWidth: lineWidth })] }) }), jsx("rect", { x: viewBox.x, y: viewBox.y, width: viewBox.width, height: viewBox.height, fill: baseColor }), jsx("rect", { x: viewBox.x, y: viewBox.y, width: viewBox.width, height: viewBox.height, fill: `url(#${patternId})`, opacity: opacity }), jsx("g", { opacity: opacity, children: intersections.map((point, index) => (jsx("circle", { cx: point.x, cy: point.y, r: dotRadius, fill: strokeColor }, `${point.x}-${point.y}-${index}`))) })] }));
+};
+var MapGridBackground$1 = memo(MapGridBackground);
+
+const PartitionPickerGridSvg = ({ viewBox, gridStyle }) => {
+    return (jsx("svg", { className: styles.gridSvg, "data-viewport-background": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", shapeRendering: "geometricPrecision", "aria-hidden": true, children: jsx(MapGridBackground$1, { viewBox: viewBox, gridStyle: gridStyle }) }));
+};
+
+const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWidthPx = 72, platform = PlatformType.WEB, showSelectionOrder = false, rotation = 0, onHoverChange, onBoundaryClick, }) => {
+    const isWeb = platform === PlatformType.WEB;
+    const orderBadgeStyle = useMemo(() => ({
+        width: labelStyles.selectionOrderBadge.width,
+        height: labelStyles.selectionOrderBadge.height,
+        background: labelStyles.selectionOrderBadge.background,
+        border: labelStyles.selectionOrderBadge.border,
+        color: labelStyles.selectionOrderBadge.color,
+        fontSize: `${labelStyles.selectionOrderBadge.fontSize}px`,
+        fontWeight: labelStyles.selectionOrderBadge.fontWeight,
+        lineHeight: labelStyles.selectionOrderBadge.lineHeight,
+    }), [labelStyles]);
+    return (jsx("div", { className: styles.labelsLayer, children: items.map((item) => {
+            const isIsolated = item.isIsolated === true;
+            const selected = !isIsolated && selectedIds.includes(item.id);
+            const selectionOrder = selected ? selectedIds.indexOf(item.id) + 1 : null;
+            const isLargeEnough = item.screenWidthPx > labelMinScreenWidthPx;
+            // Web 始终展示名称；H5 按屏幕宽度决定
+            const showNameLabel = isWeb || isLargeEnough;
+            const showOrderBadge = showSelectionOrder && selected && selectionOrder != null;
+            const h5OrderOnly = !isWeb && showOrderBadge && !isLargeEnough;
+            const h5OrderWithName = !isWeb && showOrderBadge && isLargeEnough;
+            if (!showNameLabel && !showOrderBadge && !isIsolated) {
+                return null;
+            }
+            const pillStyle = labelAppearanceToStyle(selected ? labelStyles.selected : labelStyles.default);
+            const labelClassName = [
+                styles.label,
+                !isWeb && showNameLabel ? styles.labelH5Wrap : '',
+                isIsolated ? styles.labelIsolated : '',
+                isWeb && showOrderBadge ? styles.labelWithOrder : '',
+                h5OrderWithName ? styles.labelWithOrderH5 : '',
+                h5OrderOnly ? styles.labelOrderOnly : '',
+                isIsolated ? styles.labelIsolatedLayout : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const boundaryIdProps = isIsolated ? {} : { [PARTITION_BOUNDARY_ID_ATTR$1]: item.id };
+            return (jsxs("div", { className: labelClassName, style: {
+                    left: `${item.leftPct}%`,
+                    top: `${item.topPct}%`,
+                    transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
+                }, ...boundaryIdProps, onMouseEnter: isIsolated ? undefined : () => onHoverChange(item.id), onMouseLeave: isIsolated ? undefined : () => onHoverChange(null), onClick: onBoundaryClick && !isIsolated
+                    ? (event) => {
+                        event.stopPropagation();
+                        onBoundaryClick(item.id);
+                    }
+                    : undefined, children: [showOrderBadge && (jsx("div", { className: styles.selectionOrderBadge, style: orderBadgeStyle, children: selectionOrder })), showNameLabel && (jsx("div", { className: `${styles.labelPill} ${!isWeb ? styles.labelPillH5 : ''}`, style: pillStyle, children: jsx("span", { className: `${styles.labelText} ${!isWeb ? styles.labelTextH5 : ''}`, children: item.name }) })), isIsolated && (jsx("div", { className: `${styles.isolatedIconBelow} ${isWeb ? styles.isolatedIconWeb : ''}`, dangerouslySetInnerHTML: { __html: ISOLATED_BOUNDARY_SVG } }))] }, item.id));
+        }) }));
+};
+
+const DEFAULT_BACKGROUND = PARTITION_PICKER_GRID_BASE_COLOR;
+/** 地块 polygon / 标签上的 data 属性，供 viewport 点击命中与表格联动 */
+const PARTITION_BOUNDARY_ID_ATTR = 'data-partition-boundary-id';
+/** Map 模式下 OverlayViewF 默认 z-index */
+const DEFAULT_OVERLAY_Z_INDEX = 100;
+const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = PlatformType.WEB, width, height, padding = 50, backgroundColor = DEFAULT_BACKGROUND, defaultTransform, mapRef, minZoom = 0.5, maxZoom = 4, enablePanZoom = true, refitOnResize = true, onSizeChange, selectedBoundaryIds, defaultSelectedBoundaryIds, onSelectionChange, hoveredBoundaryId, defaultHoveredBoundaryId, onBoundaryHoverChange, showSelectionOrder = false, zIndex = DEFAULT_OVERLAY_Z_INDEX, className, style, }, ref) => {
+    /**
+     * 是否为 Map 模式（传入 mapRef 时为 true）：
+     * - true：Google Maps 底图 + OverlayViewF，平移/缩放/fit 由底图负责
+     * - false：Standalone 固定容器 + 网格 SVG + useMapViewport
+     */
+    const isMapMode = Boolean(mapRef);
+    const reactInstanceId = useId();
+    const channelClipPathId = useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
+    /** 外部 pickerStyleConfig 与内置 platform 默认值合并后的最终外观（地块/标签/网格等） */
+    const mergedPickerStyles = useMemo(() => resolvePartitionPickerStyles(platform, pickerStyleConfig), [pickerStyleConfig, platform]);
+    /** Standalone 容器留白与网格底色；pickerStyleConfig.grid.baseColor 优先于 backgroundColor */
+    const resolvedBackgroundColor = pickerStyleConfig?.grid?.baseColor ?? backgroundColor ?? DEFAULT_BACKGROUND;
+    const mergedMapConfig = useMemo(() => merge$1({}, DEFAULT_STYLES, getPartitionPickerMapConfig(platform), mapConfig), [mapConfig, platform]);
+    const svgElementDatas = useMemo(() => UnifiedMapDataProcessor.processMapData(mapJson, mergedMapConfig) || {}, [mapJson, mergedMapConfig]);
+    /** 地图 Y 轴相对正北的偏移（度），与 MowerMapRenderer.originNorthRotate 一致 */
+    const originNorthRotate = useMemo(() => {
+        if (mapJson.map_north_offset)
+            return (mapJson.map_north_offset * 180) / Math.PI;
+        return 0;
+    }, [mapJson.map_north_offset]);
+    /** Standalone 模式：叠加层实际旋转角（度）= 地图北向偏移 + 外部传入 rotation */
+    const standaloneActureRotate = useMemo(() => originNorthRotate + (defaultTransform?.rotation ?? 0), [originNorthRotate, defaultTransform?.rotation]);
+    /**
+     * 稳定的内容 viewBox（地图全量范围 + SVG 裁剪边距）
+     * 供 ChannelClipPath 使用，不随用户平移/缩放变化
+     */
+    const contentViewBox = useMemo(() => {
+        const bounds = calculateMapBounds(mapJson);
+        return boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
+    }, [mapJson]);
+    /** 孤立地块 id 列表（未连接到主地块的子地块） */
+    const isolatedBoundaryIds = useIsolatedBoundaryIds(mapJson);
+    /** 选中地块 id 列表（受控/非受控）与切换选中回调 */
+    const { selectedIds, toggleBoundary, setSelectedIds } = useBoundarySelection({
+        selectedBoundaryIds,
+        defaultSelectedBoundaryIds,
+        onSelectionChange,
+        disabledBoundaryIds: isolatedBoundaryIds,
+    });
+    /** 当前 hover 的地块 id（受控/非受控）与切换 hover 回调 */
+    const { hoveredId, setHoveredId } = useBoundaryHover({
+        hoveredBoundaryId,
+        defaultHoveredBoundaryId,
+        onBoundaryHoverChange,
+    });
+    const handleHoverChange = useCallback((id) => {
+        if (id != null && isolatedBoundaryIds.has(id))
+            return;
+        setHoveredId(id);
+    }, [isolatedBoundaryIds, setHoveredId]);
+    /** Map 模式：地块 polygon / 标签直接 onClick（无底图拖拽抢占） */
+    const handleBoundaryClick = useCallback((id) => {
+        if (isolatedBoundaryIds.has(id))
+            return;
+        toggleBoundary(id);
+    }, [isolatedBoundaryIds, toggleBoundary]);
+    /** Standalone 模式：由 viewport 统一处理点击（支持在地块上拖拽平移） */
+    const handleViewportTap = useCallback((target) => {
+        const boundaryEl = target.closest(`[${PARTITION_BOUNDARY_ID_ATTR}]`);
+        if (!boundaryEl)
+            return;
+        const id = Number(boundaryEl.getAttribute(PARTITION_BOUNDARY_ID_ATTR));
+        if (!Number.isFinite(id) || isolatedBoundaryIds.has(id))
+            return;
+        toggleBoundary(id);
+    }, [isolatedBoundaryIds, toggleBoundary]);
+    /**
+     * Map 模式 overlay 状态（bounds / viewBox / fitBounds / overlayScale）。
+     * 无 mapRef 时 hook 内部 enabled=false，返回值不参与渲染。
+     */
+    const googleOverlay = useGoogleMapsOverlay({
+        mapJson,
+        mapRef,
+        defaultTransform,
+        originNorthRotate,
+        platform,
+        padding,
+    });
+    /** Standalone 才测量容器；Map 模式尺寸由 OverlayViewF onDraw 提供 */
+    const { containerRef, layoutStyle, width: pxWidth, height: pxHeight, isReady, } = useContainerSize(isMapMode ? 0 : width, isMapMode ? 0 : height);
+    useEffect(() => {
+        if (!isMapMode && isReady) {
+            onSizeChange?.(pxWidth, pxHeight);
+        }
+    }, [isMapMode, isReady, onSizeChange, pxWidth, pxHeight]);
+    /** Standalone：平移/缩放 viewBox；Map 模式 enablePanZoom 关闭，仅保留 hook 结构 */
+    const { viewBox: standaloneViewBox, gridViewBox, fitViewBox: standaloneFitViewBox, resetView: standaloneResetView, fitToView: standaloneFitToView, } = useMapViewport({
+        mapJson,
+        containerRef,
+        width: pxWidth,
+        height: pxHeight,
+        padding,
+        minZoom,
+        maxZoom,
+        refitOnResize,
+        enablePanZoom: enablePanZoom && !isMapMode,
+        onViewportTap: handleViewportTap,
+        mapRotationDeg: standaloneActureRotate,
+    });
+    /** 按模式选取 viewBox / 尺寸 / 旋转 / 就绪状态（Map 与 Standalone 数据源不同） */
+    const viewBox = isMapMode ? googleOverlay.svgViewBox : standaloneViewBox;
+    const fitViewBox = isMapMode ? googleOverlay.fitViewBox : standaloneFitViewBox;
+    const overlayWidth = isMapMode ? googleOverlay.overlayWidth : pxWidth;
+    const overlayHeight = isMapMode ? googleOverlay.overlayHeight : pxHeight;
+    const actureRotate = isMapMode ? googleOverlay.actureRotate : standaloneActureRotate;
+    const isLayersReady = isMapMode ? googleOverlay.isOverlayReady : isReady;
+    /**
+     * Standalone：标签/充电桩置于 mapOverlayLayer，CSS rotate 与 MowerMapRenderer 一致。
+     * Map 模式：旋转由 OverlayViewF 承担，此处不需要额外包裹层。
+     */
+    const mapOverlayLayerStyle = useMemo(() => !isMapMode && actureRotate !== 0 ? { transform: `rotate(${actureRotate}deg)` } : undefined, [actureRotate, isMapMode]);
+    /**
+     * 分区名定位：
+     * - Map 模式 overlay：相对 overlay 宽高百分比（与 BoundaryLabels 一致）
+     * - Standalone meet：按 preserveAspectRatio 换算容器百分比
+     */
+    const labelItems = usePartitionLabelItems(mapJson, viewBox, overlayWidth, overlayHeight, {
+        positionMode: isMapMode ? 'overlay' : 'meet',
+    });
+    /**
+     * 复用 ChannelClipPath / ChannelElement / CharginPile 所需的最小 Context
+     * - svgViewBox：稳定 contentViewBox（见上）
+     * - channelClipPathId：同页多实例时避免 SVG id 冲突
+     * - platform：供子组件读取 Web / H5 差异
+     * - Map 模式额外注入 mapRef / bounds / overlayScale（通道线宽等）
+     */
+    const commonValue = useMemo(() => ({
+        sn,
+        platform,
+        svgViewBox: contentViewBox,
+        channelClipPathId,
+        ...(isMapMode && mapRef
+            ? {
+                mapRef,
+                bounds: googleOverlay.bounds,
+                overlayScale: googleOverlay.overlayScale,
+            }
+            : {}),
+    }), [
+        sn,
+        platform,
+        contentViewBox,
+        channelClipPathId,
+        isMapMode,
+        mapRef,
+        googleOverlay.bounds,
+        googleOverlay.overlayScale,
+    ]);
+    const svgEditValue = useMemo(() => ({
+        svgElementDatas,
+    }), [svgElementDatas]);
+    useImperativeHandle(ref, () => ({
+        fitToView: isMapMode ? googleOverlay.fitToView : standaloneFitToView,
+        resetView: isMapMode ? googleOverlay.resetView : standaloneResetView,
+        getSelectedBoundaryIds: () => selectedIds,
+        setSelectedBoundaryIds: setSelectedIds,
+        getHoveredBoundaryId: () => hoveredId,
+        setHoveredBoundaryId: setHoveredId,
+    }), [
+        googleOverlay.fitToView,
+        googleOverlay.resetView,
+        hoveredId,
+        isMapMode,
+        selectedIds,
+        setHoveredId,
+        setSelectedIds,
+        standaloneFitToView,
+        standaloneResetView,
+    ]);
+    const containerStyle = useMemo(() => ({
+        backgroundColor: isMapMode ? 'transparent' : resolvedBackgroundColor,
+        ...style,
+        ...(isMapMode ? {} : layoutStyle),
+    }), [isMapMode, layoutStyle, resolvedBackgroundColor, style]);
+    /** 地块 + 通道 SVG；Map 模式不在 SVG 内旋转（由 OverlayViewF rotate 处理） */
+    const mapSvgLayer = viewBox && isLayersReady ? (jsx(PartitionPickerSvg, { svgElementDatas: svgElementDatas, viewBox: viewBox, fitViewBox: fitViewBox ?? viewBox, containerWidth: overlayWidth, containerHeight: overlayHeight, mapRotation: isMapMode ? 0 : actureRotate, boundaryColors: mergedPickerStyles.boundary, boundaryStrokePx: mergedPickerStyles.boundaryStrokePx, isolatedBoundaryIds: isolatedBoundaryIds, selectedIds: selectedIds, hoveredId: hoveredId, onHoverChange: handleHoverChange, onBoundaryClick: isMapMode ? handleBoundaryClick : undefined })) : null;
+    /**
+     * 分区标签 + 充电桩 HTML 层。
+     * Map 模式：平铺于 overlay 根节点；Standalone：包在 mapOverlayLayer 内做 CSS 旋转。
+     */
+    const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxs(Fragment, { children: [jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, labelMinScreenWidthPx: mergedPickerStyles.labelMinScreenWidthPx, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange, onBoundaryClick: handleBoundaryClick }), jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate })] })) : (jsxs("div", { className: styles.mapOverlayLayer, style: mapOverlayLayerStyle, children: [jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, labelMinScreenWidthPx: mergedPickerStyles.labelMinScreenWidthPx, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange }), jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate, viewRotationMode: "overlay-parent", containerWidth: overlayWidth, containerHeight: overlayHeight })] }))) : null;
+    /** Map 模式：渲染 OverlayViewF，底图为 Google Maps */
+    if (isMapMode && mapRef) {
+        return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsx(OverlayViewF, { map: mapRef, mapPaneName: "overlayMouseTarget", bounds: googleOverlay.bounds ?? undefined, rotate: actureRotate, zIndex: zIndex, onDraw: googleOverlay.handleOverlayDraw, children: jsxs("div", { className: `${styles.googleOverlayRoot} ${className || ''}`, style: containerStyle, onMouseLeave: () => setHoveredId(null), children: [mapSvgLayer, overlayLayers] }) }) }) }));
+    }
+    /** Standalone 模式：固定容器 + 网格底图 + 双层 SVG / HTML overlay */
+    return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxs(Fragment, { children: [jsxs("div", { className: styles.mapSvgStack, children: [jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle: mergedPickerStyles.grid }), mapSvgLayer] }), overlayLayers] })) }) }) }));
+});
+MowerPartitionPickerMap.displayName = 'MowerPartitionPickerMap';
+
+export { ALL_DIRECTION_SELECTED, AntennaData, BaseData, BoundaryData, BoundarySvgRender, ChannelData, ChargingPileData, CheckDoodleErrorType, CheckObstaclePointErrorType, ClickEventType, CreateStatus, DEFAULT_SCREEN_PADDING, DataType, DoodleData, MAX_DIRECTION_ANGLE, MIN_DIRECTION_ANGLE, MapType, MobileEditMode, MowGateData, MowerMapRenderer, MowerPartitionPickerMap, ObstacleData, PARTITION_PICKER_COLORS_H5, PARTITION_PICKER_COLORS_WEB, PARTITION_PICKER_LABEL_STYLES_H5, PARTITION_PICKER_LABEL_STYLES_WEB, PathData, PlatformType, RecordFunctionEnum, RecordTypeEnum, RenderType, SCALE_FACTOR, SvgParserNative, UnifiedMapDataProcessor, VisionOffData, calculateMapGpsCenter, estimateGpsFromMapBounds, getIsolatedBoundaryIds, getPartitionPickerColors, getPartitionPickerLabelStyles, getValidGpsBounds, initBoundary, initChannel, initDoodle, initObstacle, initVisionOff, normalizeScreenPadding, resolvePartitionPickerStyles, restorePointsFormat, signGoogleStaticMapUrl, signGoogleStaticMapUrlSync };