@fleet-frontend/mower-maps 0.2.6-beta.2 → 0.2.6-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -23568,15 +23568,13 @@ function computePolygonScreenWidthPx(points, viewBox, containerWidth, containerH
23568
23568
  const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
23569
23569
  return mapWidth * scale;
23570
23570
  }
23571
- function scaleStrokeWidthForViewBox(baseStrokeWidth, viewBox, fitViewBox, options) {
23572
- const { containerWidth, containerHeight, minScreenStrokePx = 2 } = options;
23571
+ function scaleStrokeWidthForViewBox(viewBox, options) {
23572
+ const { containerWidth, containerHeight, targetScreenStrokePx = 2 } = options;
23573
23573
  const meetScale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
23574
- const fitMeetScale = getViewBoxMeetScale(fitViewBox, containerWidth, containerHeight);
23575
- if (meetScale <= 0 || fitMeetScale <= 0 || !Number.isFinite(baseStrokeWidth)) {
23576
- return baseStrokeWidth;
23574
+ if (meetScale <= 0 || !Number.isFinite(targetScreenStrokePx)) {
23575
+ return targetScreenStrokePx;
23577
23576
  }
23578
- const targetScreenPx = Math.max(baseStrokeWidth * fitMeetScale, minScreenStrokePx);
23579
- return targetScreenPx / meetScale;
23577
+ return targetScreenStrokePx / meetScale;
23580
23578
  }
23581
23579
  /** 屏幕拖拽像素 → viewBox 坐标增量(与 mapPointToContainerPercent 互逆,供 applyPan 使用) */
23582
23580
  function containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
@@ -30864,15 +30862,27 @@ const BoundarySvgRender = React.memo(({ mapJson, unStructMapData, id, maxWidth =
30864
30862
  });
30865
30863
 
30866
30864
  /** ChannelClipPath 等内容裁剪使用的 SVG 坐标边距(与用户传入的屏幕 padding 无关) */
30867
- const PARTITION_PICKER_CONTENT_CLIP_PADDING = 50;
30865
+ const PARTITION_PICKER_CONTENT_CLIP_PADDING = 0;
30868
30866
  /** H5:子区域屏幕宽度超过该值才展示名称标签(px) */
30869
- const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 72;
30867
+ const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 92;
30870
30868
  /** H5:名称气泡总宽度(px) */
30871
- const H5_PARTITION_LABEL_WIDTH_PX = 72;
30872
- /** 边界线目标屏幕像素宽度(默认态,全缩放级别保持一致) */
30873
- const PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX = 2;
30874
- /** 边界线目标屏幕像素宽度(hover / 选中态) */
30875
- const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5;
30869
+ const H5_PARTITION_LABEL_WIDTH_PX = 92;
30870
+ /** Web:序号徽章与名称标签间距(px) */
30871
+ const WEB_SELECTION_ORDER_GAP_PX = 8;
30872
+ /** H5:序号徽章与名称标签间距(px) */
30873
+ const H5_SELECTION_ORDER_GAP_PX = 4;
30874
+ /** Standalone:充电桩图标最小屏幕尺寸(px),缩小全图 fit 时避免过小;放大时随 viewBox 同比缩放 */
30875
+ const PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX = 16;
30876
+ /** Web 地块描边屏幕像素宽度:未选中 2px,选中 3px */
30877
+ const WEB_PARTITION_BOUNDARY_STROKE_PX = {
30878
+ default: 2,
30879
+ selected: 3,
30880
+ };
30881
+ /** H5 地块描边屏幕像素宽度:选中与否均为 1px */
30882
+ const H5_PARTITION_BOUNDARY_STROKE_PX = {
30883
+ default: 1,
30884
+ selected: 1,
30885
+ };
30876
30886
  /**
30877
30887
  * Figma bg/mapping 地图网格背景(Standalone SVG 层)
30878
30888
  * @see https://www.figma.com/design/j0DdUYf8VFkXQ8ikkA6ZzP — node 20490:84886
@@ -30880,17 +30890,17 @@ const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5;
30880
30890
  /** 网格区域底色,也用于容器 letterbox 留白 */
30881
30891
  const PARTITION_PICKER_GRID_BASE_COLOR = '#E3E5EB';
30882
30892
  /** 网格单元边长(SVG 地图坐标,与 viewBox 一致;zoom 时间距同比缩放) */
30883
- const PARTITION_PICKER_GRID_TILE_SIZE = 100;
30893
+ const PARTITION_PICKER_GRID_TILE_SIZE = 10;
30884
30894
  /** 网格线宽(地图坐标;随 zoom 同比缩放,不做屏幕像素恒定) */
30885
- const PARTITION_PICKER_GRID_LINE_WIDTH = 2;
30895
+ const PARTITION_PICKER_GRID_LINE_WIDTH = 0.5;
30886
30896
  /** 网格交点圆点半径(地图坐标) */
30887
- const PARTITION_PICKER_GRID_DOT_RADIUS = 4;
30897
+ const PARTITION_PICKER_GRID_DOT_RADIUS = 0.5;
30888
30898
  /** 网格层整体不透明度(Figma 约 80%) */
30889
- const PARTITION_PICKER_GRID_OPACITY = 0.8;
30899
+ const PARTITION_PICKER_GRID_OPACITY = 0.4;
30890
30900
  /** 网格线与交点颜色 */
30891
30901
  const PARTITION_PICKER_GRID_STROKE = '#FFFFFF';
30892
30902
  /** 可见范围内交点超过该数量时跳过圆点,仅保留网格线(缩小视野时减轻 DOM 压力) */
30893
- const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 800;
30903
+ const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 2000;
30894
30904
  /**
30895
30905
  * 分区选择地图专用样式
30896
30906
  *
@@ -30915,37 +30925,27 @@ const PARTITION_PICKER_MAP_CONFIG = {
30915
30925
  const PARTITION_PICKER_COLORS_WEB = {
30916
30926
  defaultFill: 'rgba(222, 225, 231, 1)',
30917
30927
  defaultStroke: 'rgba(132, 152, 169, 1)',
30918
- defaultStrokeWidth: 2,
30919
30928
  hoverFill: 'rgba(211, 216, 226, 1)',
30920
30929
  hoverStroke: 'rgba(132, 152, 169, 1)',
30921
- hoverStrokeWidth: 3,
30922
30930
  selectedFill: 'rgba(202, 214, 238, 1)',
30923
30931
  selectedStroke: 'rgba(132, 152, 169, 1)',
30924
- selectedStrokeWidth: 3,
30925
30932
  selectedHoverFill: 'rgba(202, 214, 238, 1)',
30926
30933
  selectedHoverStroke: 'rgba(132, 152, 169, 1)',
30927
- selectedHoverStrokeWidth: 3,
30928
30934
  isolatedFill: 'rgba(225, 227, 233, 1)',
30929
30935
  isolatedStroke: 'rgba(189, 198, 208, 1)',
30930
- isolatedStrokeWidth: 2,
30931
30936
  };
30932
30937
  /** H5 端地块配色 */
30933
30938
  const PARTITION_PICKER_COLORS_H5 = {
30934
30939
  defaultFill: 'rgba(222, 225, 231, 1)',
30935
30940
  defaultStroke: 'rgba(132, 152, 169, 1)',
30936
- defaultStrokeWidth: 1,
30937
30941
  hoverFill: 'rgba(222, 225, 231, 1)',
30938
30942
  hoverStroke: 'rgba(132, 152, 169, 1)',
30939
- hoverStrokeWidth: 1,
30940
30943
  selectedFill: 'rgba(202, 214, 238, 1)',
30941
30944
  selectedStroke: 'rgba(132, 152, 169, 1)',
30942
- selectedStrokeWidth: 1,
30943
30945
  selectedHoverFill: 'rgba(202, 214, 238, 1)',
30944
30946
  selectedHoverStroke: 'rgba(132, 152, 169, 1)',
30945
- selectedHoverStrokeWidth: 1,
30946
30947
  isolatedFill: 'rgba(225, 227, 233, 1)',
30947
30948
  isolatedStroke: 'rgba(189, 198, 208, 1)',
30948
- isolatedStrokeWidth: 1,
30949
30949
  };
30950
30950
  function getPartitionPickerMapConfig(platform = exports.PlatformType.WEB) {
30951
30951
  return platform === exports.PlatformType.WEB
@@ -30955,6 +30955,11 @@ function getPartitionPickerMapConfig(platform = exports.PlatformType.WEB) {
30955
30955
  function getPartitionPickerColors(platform = exports.PlatformType.WEB) {
30956
30956
  return platform === exports.PlatformType.WEB ? PARTITION_PICKER_COLORS_WEB : PARTITION_PICKER_COLORS_H5;
30957
30957
  }
30958
+ function getPartitionPickerBoundaryStrokePx(platform = exports.PlatformType.WEB) {
30959
+ return platform === exports.PlatformType.WEB
30960
+ ? { ...WEB_PARTITION_BOUNDARY_STROKE_PX }
30961
+ : { ...H5_PARTITION_BOUNDARY_STROKE_PX };
30962
+ }
30958
30963
  /** Web 分区名气泡(Figma「地块名称」/ 选中区域) */
30959
30964
  const PARTITION_PICKER_LABEL_STYLES_WEB = {
30960
30965
  default: {
@@ -30995,6 +31000,7 @@ const PARTITION_PICKER_LABEL_STYLES_H5 = {
30995
31000
  fontWeight: 400,
30996
31001
  padding: '6px',
30997
31002
  width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
31003
+ maxWidth: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
30998
31004
  borderRadius: 100,
30999
31005
  boxSizing: 'border-box',
31000
31006
  },
@@ -31005,6 +31011,7 @@ const PARTITION_PICKER_LABEL_STYLES_H5 = {
31005
31011
  fontWeight: 400,
31006
31012
  padding: '6px',
31007
31013
  width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
31014
+ maxWidth: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
31008
31015
  borderRadius: 100,
31009
31016
  boxSizing: 'border-box',
31010
31017
  },
@@ -31042,10 +31049,6 @@ const DEFAULT_PARTITION_PICKER_GRID_STYLE = {
31042
31049
  opacity: PARTITION_PICKER_GRID_OPACITY,
31043
31050
  maxIntersectionDots: PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS,
31044
31051
  };
31045
- const DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX = {
31046
- default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
31047
- emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
31048
- };
31049
31052
  /**
31050
31053
  * 将 platform 内置默认值与外部 pickerStyleConfig 深度合并。
31051
31054
  * 调用方只需覆盖变化的字段,无需改组件源码。
@@ -31062,8 +31065,7 @@ function resolvePartitionPickerStyles(platform = exports.PlatformType.WEB, confi
31062
31065
  }
31063
31066
  : baseLabels,
31064
31067
  grid: merge$1({}, DEFAULT_PARTITION_PICKER_GRID_STYLE, config?.grid),
31065
- boundaryStrokePx: merge$1({}, DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX, config?.boundaryStrokePx),
31066
- labelMinScreenWidthPx: config?.labelMinScreenWidthPx ?? H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX,
31068
+ boundaryStrokePx: merge$1({}, getPartitionPickerBoundaryStrokePx(platform), config?.boundaryStrokePx),
31067
31069
  };
31068
31070
  }
31069
31071
 
@@ -31077,7 +31079,7 @@ function resolvePartitionPickerStyles(platform = exports.PlatformType.WEB, confi
31077
31079
  *
31078
31080
  * 平移可在地块/分区名等任意区域发起;仅当位移小于阈值时才视为点击
31079
31081
  */
31080
- function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom = 4, enablePanZoom = true, refitOnResize = true, onViewportTap, mapRotationDeg = 0, }) {
31082
+ function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom = 3, enablePanZoom = true, refitOnResize = true, onViewportTap, mapRotationDeg = 0, }) {
31081
31083
  /** 地图容器 DOM,用于绑定 wheel/pointer/touch 事件 */
31082
31084
  const internalContainerRef = React.useRef(null);
31083
31085
  const containerRef = externalContainerRef ?? internalContainerRef;
@@ -31496,7 +31498,17 @@ function useMapViewport({ mapJson, containerRef: externalContainerRef, width, he
31496
31498
  window.removeEventListener('mouseup', handleWindowPointerUp);
31497
31499
  window.removeEventListener('blur', handleWindowPointerUp);
31498
31500
  };
31499
- }, [applyPan, applyZoom, clearPanState, enablePanZoom, height, maxZoom, minZoom, scheduleViewBox, width]);
31501
+ }, [
31502
+ applyPan,
31503
+ applyZoom,
31504
+ clearPanState,
31505
+ enablePanZoom,
31506
+ height,
31507
+ maxZoom,
31508
+ minZoom,
31509
+ scheduleViewBox,
31510
+ width,
31511
+ ]);
31500
31512
  return {
31501
31513
  /** 绑定到地图外层容器的 ref */
31502
31514
  containerRef,
@@ -31899,19 +31911,16 @@ function usePartitionLabelItems(mapData, viewBox, containerWidth, containerHeigh
31899
31911
  ]);
31900
31912
  }
31901
31913
 
31902
- 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}";
31903
- 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"};
31914
+ 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_labelOrderOnly__TDLBU {\n gap: 0;\n}\n\n/* H5 名称标签:气泡宽度 / 文案最大宽度由 constants.ts 内联样式控制 */\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 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: 100%;\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}";
31915
+ 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","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"};
31904
31916
  styleInject(css_248z);
31905
31917
 
31906
31918
  const PARTITION_BOUNDARY_ID_ATTR$1 = 'data-partition-boundary-id';
31907
- const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight, fitViewBox, containerWidth, containerHeight, onHoverChange, onBoundaryClick, }) => {
31919
+ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight, containerWidth, containerHeight, onHoverChange, onBoundaryClick, }) => {
31908
31920
  const style = data.style || {};
31909
31921
  const boundaryId = Number(data.id);
31910
31922
  const colors = boundaryColors;
31911
- const strokePx = boundaryStrokePx ?? {
31912
- default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
31913
- emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
31914
- };
31923
+ const strokePx = boundaryStrokePx ?? { ...WEB_PARTITION_BOUNDARY_STROKE_PX };
31915
31924
  const pointsString = React.useMemo(() => data.points.map((point) => `${point[0]},${point[1]}`).join(' '), [data.points]);
31916
31925
  const fillColor = React.useMemo(() => {
31917
31926
  if (isIsolated)
@@ -31934,31 +31943,16 @@ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isI
31934
31943
  return style.lineColor || colors.defaultStroke;
31935
31944
  }, [colors, hovered, isIsolated, selected, style.lineColor]);
31936
31945
  const strokeWidth = React.useMemo(() => {
31937
- let baseWidth;
31938
- let emphasized = false;
31939
- if (isIsolated)
31940
- baseWidth = colors.isolatedStrokeWidth;
31941
- else if (selected) {
31942
- emphasized = true;
31943
- baseWidth = hovered ? colors.selectedHoverStrokeWidth : colors.selectedStrokeWidth;
31944
- }
31945
- else if (hovered) {
31946
- emphasized = true;
31947
- baseWidth = colors.hoverStrokeWidth;
31948
- }
31949
- else
31950
- baseWidth = colors.defaultStrokeWidth;
31951
31946
  const viewBox = { width: viewBoxWidth, height: viewBoxHeight };
31952
- return scaleStrokeWidthForViewBox(baseWidth, viewBox, fitViewBox, {
31947
+ const targetScreenStrokePx = !isIsolated && (selected || hovered) ? strokePx.selected : strokePx.default;
31948
+ return scaleStrokeWidthForViewBox(viewBox, {
31953
31949
  containerWidth,
31954
31950
  containerHeight,
31955
- minScreenStrokePx: emphasized ? strokePx.emphasized : strokePx.default,
31951
+ targetScreenStrokePx,
31956
31952
  });
31957
31953
  }, [
31958
- colors,
31959
31954
  containerHeight,
31960
31955
  containerWidth,
31961
- fitViewBox,
31962
31956
  hovered,
31963
31957
  isIsolated,
31964
31958
  selected,
@@ -31978,7 +31972,7 @@ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isI
31978
31972
  };
31979
31973
  var SelectableBoundaryElement$1 = React.memo(SelectableBoundaryElement);
31980
31974
 
31981
- const PartitionPickerSvg = ({ svgElementDatas, viewBox, fitViewBox, containerWidth, containerHeight, mapRotation = 0, boundaryColors, boundaryStrokePx, isolatedBoundaryIds, selectedIds, hoveredId, onHoverChange, onBoundaryClick, }) => {
31975
+ const PartitionPickerSvg = ({ svgElementDatas, viewBox, containerWidth, containerHeight, mapRotation = 0, boundaryColors, boundaryStrokePx, isolatedBoundaryIds, selectedIds, hoveredId, onHoverChange, onBoundaryClick, }) => {
31982
31976
  const boundaries = (svgElementDatas[exports.DataType.BOUNDARY] || []);
31983
31977
  const channels = (svgElementDatas[exports.DataType.CHANNEL] || []);
31984
31978
  const selectedIdSet = React.useMemo(() => new Set(selectedIds), [selectedIds]);
@@ -31990,7 +31984,7 @@ const PartitionPickerSvg = ({ svgElementDatas, viewBox, fitViewBox, containerWid
31990
31984
  }, [mapRotation, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
31991
31985
  const mapContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(GElement, { type: "boundary", children: boundaries.map((item) => {
31992
31986
  const boundaryId = Number(item.id);
31993
- return (jsxRuntime.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));
31987
+ return (jsxRuntime.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, containerWidth: containerWidth, containerHeight: containerHeight, onHoverChange: onHoverChange, onBoundaryClick: onBoundaryClick }, item.id));
31994
31988
  }) }), jsxRuntime.jsxs(GElement, { type: "channel", children: [jsxRuntime.jsx(ChannelClipPath, {}), channels.map((item) => (jsxRuntime.jsx(ChannelElement, { data: item }, item.id)))] })] }));
31995
31989
  return (jsxRuntime.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 ? (jsxRuntime.jsx("g", { transform: mapContentTransform, children: mapContent })) : (mapContent) }));
31996
31990
  };
@@ -32030,10 +32024,21 @@ const MapGridBackground = ({ viewBox, gridStyle }) => {
32030
32024
  var MapGridBackground$1 = React.memo(MapGridBackground);
32031
32025
 
32032
32026
  const PartitionPickerGridSvg = ({ viewBox, gridStyle }) => {
32033
- return (jsxRuntime.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: jsxRuntime.jsx(MapGridBackground$1, { viewBox: viewBox, gridStyle: gridStyle }) }));
32027
+ return (jsxRuntime.jsx("svg", { className: styles.gridSvg, "data-viewport-background": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%",
32028
+ // 设置缩放的规则
32029
+ //等比缩放 viewBox 内容,使其完整落在容器内;
32030
+ //水平、垂直都居中;
32031
+ //比例不一致时,上下或左右留空(letterboxing),不裁切、不拉伸变形。
32032
+ preserveAspectRatio: "xMidYMid meet",
32033
+ /**
32034
+ * 控制浏览器如何绘制路径/线条:
32035
+ * geometricPrecision:优先几何精度,线条更平滑、对齐更稳,缩放时不易发虚或抖动。
32036
+ * 网格是大量细线,用这个属性能让缩放/平移时网格更清晰稳定。
32037
+ */
32038
+ shapeRendering: "geometricPrecision", "aria-hidden": true, children: jsxRuntime.jsx(MapGridBackground$1, { viewBox: viewBox, gridStyle: gridStyle }) }));
32034
32039
  };
32035
32040
 
32036
- const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWidthPx = 72, platform = exports.PlatformType.WEB, showSelectionOrder = false, rotation = 0, onHoverChange, onBoundaryClick, }) => {
32041
+ const PartitionNameLabels = ({ items, selectedIds, labelStyles, platform = exports.PlatformType.WEB, showSelectionOrder = false, rotation = 0, onHoverChange, onBoundaryClick, }) => {
32037
32042
  const isWeb = platform === exports.PlatformType.WEB;
32038
32043
  const orderBadgeStyle = React.useMemo(() => ({
32039
32044
  width: labelStyles.selectionOrderBadge.width,
@@ -32043,18 +32048,18 @@ const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWi
32043
32048
  color: labelStyles.selectionOrderBadge.color,
32044
32049
  fontSize: `${labelStyles.selectionOrderBadge.fontSize}px`,
32045
32050
  fontWeight: labelStyles.selectionOrderBadge.fontWeight,
32051
+ fontFamily: labelStyles.selectionOrderBadge.fontFamily,
32046
32052
  lineHeight: labelStyles.selectionOrderBadge.lineHeight,
32047
32053
  }), [labelStyles]);
32048
32054
  return (jsxRuntime.jsx("div", { className: styles.labelsLayer, children: items.map((item) => {
32049
32055
  const isIsolated = item.isIsolated === true;
32050
32056
  const selected = !isIsolated && selectedIds.includes(item.id);
32051
32057
  const selectionOrder = selected ? selectedIds.indexOf(item.id) + 1 : null;
32052
- const isLargeEnough = item.screenWidthPx > labelMinScreenWidthPx;
32058
+ const isLargeEnough = item.screenWidthPx > H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX;
32053
32059
  // Web 始终展示名称;H5 按屏幕宽度决定
32054
32060
  const showNameLabel = isWeb || isLargeEnough;
32055
32061
  const showOrderBadge = showSelectionOrder && selected && selectionOrder != null;
32056
32062
  const h5OrderOnly = !isWeb && showOrderBadge && !isLargeEnough;
32057
- const h5OrderWithName = !isWeb && showOrderBadge && isLargeEnough;
32058
32063
  if (!showNameLabel && !showOrderBadge && !isIsolated) {
32059
32064
  return null;
32060
32065
  }
@@ -32063,18 +32068,21 @@ const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWi
32063
32068
  styles.label,
32064
32069
  !isWeb && showNameLabel ? styles.labelH5Wrap : '',
32065
32070
  isIsolated ? styles.labelIsolated : '',
32066
- isWeb && showOrderBadge ? styles.labelWithOrder : '',
32067
- h5OrderWithName ? styles.labelWithOrderH5 : '',
32068
32071
  h5OrderOnly ? styles.labelOrderOnly : '',
32069
32072
  isIsolated ? styles.labelIsolatedLayout : '',
32070
32073
  ]
32071
32074
  .filter(Boolean)
32072
32075
  .join(' ');
32076
+ const showOrderWithName = showOrderBadge && showNameLabel;
32077
+ const selectionOrderGapPx = isWeb
32078
+ ? WEB_SELECTION_ORDER_GAP_PX
32079
+ : H5_SELECTION_ORDER_GAP_PX;
32073
32080
  const boundaryIdProps = isIsolated ? {} : { [PARTITION_BOUNDARY_ID_ATTR$1]: item.id };
32074
32081
  return (jsxRuntime.jsxs("div", { className: labelClassName, style: {
32075
32082
  left: `${item.leftPct}%`,
32076
32083
  top: `${item.topPct}%`,
32077
32084
  transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
32085
+ ...(showOrderWithName ? { gap: selectionOrderGapPx } : undefined),
32078
32086
  }, ...boundaryIdProps, onMouseEnter: isIsolated ? undefined : () => onHoverChange(item.id), onMouseLeave: isIsolated ? undefined : () => onHoverChange(null), onClick: onBoundaryClick && !isIsolated
32079
32087
  ? (event) => {
32080
32088
  event.stopPropagation();
@@ -32089,7 +32097,7 @@ const DEFAULT_BACKGROUND = PARTITION_PICKER_GRID_BASE_COLOR;
32089
32097
  const PARTITION_BOUNDARY_ID_ATTR = 'data-partition-boundary-id';
32090
32098
  /** Map 模式下 OverlayViewF 默认 z-index */
32091
32099
  const DEFAULT_OVERLAY_Z_INDEX = 100;
32092
- const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = exports.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) => {
32100
+ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = exports.PlatformType.WEB, width, height, padding = 0, backgroundColor = DEFAULT_BACKGROUND, defaultTransform, mapRef, minZoom = 0.5, maxZoom = 3, enablePanZoom = true, refitOnResize = true, onSizeChange, selectedBoundaryIds, defaultSelectedBoundaryIds, onSelectionChange, hoveredBoundaryId, defaultHoveredBoundaryId, onBoundaryHoverChange, showSelectionOrder = false, zIndex = DEFAULT_OVERLAY_Z_INDEX, className, style, }, ref) => {
32093
32101
  /**
32094
32102
  * 是否为 Map 模式(传入 mapRef 时为 true):
32095
32103
  * - true:Google Maps 底图 + OverlayViewF,平移/缩放/fit 由底图负责
@@ -32100,8 +32108,34 @@ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerSt
32100
32108
  const channelClipPathId = React.useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
32101
32109
  /** 外部 pickerStyleConfig 与内置 platform 默认值合并后的最终外观(地块/标签/网格等) */
32102
32110
  const mergedPickerStyles = React.useMemo(() => resolvePartitionPickerStyles(platform, pickerStyleConfig), [pickerStyleConfig, platform]);
32103
- /** Standalone 容器留白与网格底色;pickerStyleConfig.grid.baseColor 优先于 backgroundColor */
32104
- const resolvedBackgroundColor = pickerStyleConfig?.grid?.baseColor ?? backgroundColor ?? DEFAULT_BACKGROUND;
32111
+ /** Standalone 容器背景与 grid.baseColor 对齐(合并后的最终值) */
32112
+ const resolvedBackgroundColor = React.useMemo(() => {
32113
+ if (isMapMode)
32114
+ return undefined;
32115
+ if (pickerStyleConfig?.grid?.baseColor != null) {
32116
+ return mergedPickerStyles.grid.baseColor;
32117
+ }
32118
+ return backgroundColor ?? mergedPickerStyles.grid.baseColor;
32119
+ }, [
32120
+ backgroundColor,
32121
+ isMapMode,
32122
+ mergedPickerStyles.grid.baseColor,
32123
+ pickerStyleConfig?.grid?.baseColor,
32124
+ ]);
32125
+ /** Standalone 网格层:backgroundColor 未显式指定 grid.baseColor 时与容器背景同步 */
32126
+ const standaloneGridStyle = React.useMemo(() => {
32127
+ if (pickerStyleConfig?.grid?.baseColor != null) {
32128
+ return mergedPickerStyles.grid;
32129
+ }
32130
+ if (backgroundColor != null) {
32131
+ return { ...mergedPickerStyles.grid, baseColor: backgroundColor };
32132
+ }
32133
+ return mergedPickerStyles.grid;
32134
+ }, [
32135
+ backgroundColor,
32136
+ mergedPickerStyles.grid,
32137
+ pickerStyleConfig?.grid?.baseColor,
32138
+ ]);
32105
32139
  const mergedMapConfig = React.useMemo(() => merge$1({}, DEFAULT_STYLES, getPartitionPickerMapConfig(platform), mapConfig), [mapConfig, platform]);
32106
32140
  const svgElementDatas = React.useMemo(() => UnifiedMapDataProcessor.processMapData(mapJson, mergedMapConfig) || {}, [mapJson, mergedMapConfig]);
32107
32141
  /** 地图 Y 轴相对正北的偏移(度),与 MowerMapRenderer.originNorthRotate 一致 */
@@ -32176,7 +32210,7 @@ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerSt
32176
32210
  }
32177
32211
  }, [isMapMode, isReady, onSizeChange, pxWidth, pxHeight]);
32178
32212
  /** Standalone:平移/缩放 viewBox;Map 模式 enablePanZoom 关闭,仅保留 hook 结构 */
32179
- const { viewBox: standaloneViewBox, gridViewBox, fitViewBox: standaloneFitViewBox, resetView: standaloneResetView, fitToView: standaloneFitToView, } = useMapViewport({
32213
+ const { viewBox: standaloneViewBox, gridViewBox, resetView: standaloneResetView, fitToView: standaloneFitToView, } = useMapViewport({
32180
32214
  mapJson,
32181
32215
  containerRef,
32182
32216
  width: pxWidth,
@@ -32191,7 +32225,6 @@ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerSt
32191
32225
  });
32192
32226
  /** 按模式选取 viewBox / 尺寸 / 旋转 / 就绪状态(Map 与 Standalone 数据源不同) */
32193
32227
  const viewBox = isMapMode ? googleOverlay.svgViewBox : standaloneViewBox;
32194
- const fitViewBox = isMapMode ? googleOverlay.fitViewBox : standaloneFitViewBox;
32195
32228
  const overlayWidth = isMapMode ? googleOverlay.overlayWidth : pxWidth;
32196
32229
  const overlayHeight = isMapMode ? googleOverlay.overlayHeight : pxHeight;
32197
32230
  const actureRotate = isMapMode ? googleOverlay.actureRotate : standaloneActureRotate;
@@ -32265,18 +32298,18 @@ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerSt
32265
32298
  ...(isMapMode ? {} : layoutStyle),
32266
32299
  }), [isMapMode, layoutStyle, resolvedBackgroundColor, style]);
32267
32300
  /** 地块 + 通道 SVG;Map 模式不在 SVG 内旋转(由 OverlayViewF rotate 处理) */
32268
- const mapSvgLayer = viewBox && isLayersReady ? (jsxRuntime.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;
32301
+ const mapSvgLayer = viewBox && isLayersReady ? (jsxRuntime.jsx(PartitionPickerSvg, { svgElementDatas: svgElementDatas, viewBox: 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;
32269
32302
  /**
32270
32303
  * 分区标签 + 充电桩 HTML 层。
32271
32304
  * Map 模式:平铺于 overlay 根节点;Standalone:包在 mapOverlayLayer 内做 CSS 旋转。
32272
32305
  */
32273
- const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, labelMinScreenWidthPx: mergedPickerStyles.labelMinScreenWidthPx, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange, onBoundaryClick: handleBoundaryClick }), jsxRuntime.jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate })] })) : (jsxRuntime.jsxs("div", { className: styles.mapOverlayLayer, style: mapOverlayLayerStyle, children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, labelMinScreenWidthPx: mergedPickerStyles.labelMinScreenWidthPx, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange }), jsxRuntime.jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate, viewRotationMode: "overlay-parent", containerWidth: overlayWidth, containerHeight: overlayHeight })] }))) : null;
32306
+ const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange, onBoundaryClick: handleBoundaryClick }), jsxRuntime.jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate })] })) : (jsxRuntime.jsxs("div", { className: styles.mapOverlayLayer, style: mapOverlayLayerStyle, children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange }), jsxRuntime.jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate, viewRotationMode: "overlay-parent", containerWidth: overlayWidth, containerHeight: overlayHeight, sizeInSvgUnits: true, minDisplaySizePx: PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX })] }))) : null;
32274
32307
  /** Map 模式:渲染 OverlayViewF,底图为 Google Maps */
32275
32308
  if (isMapMode && mapRef) {
32276
32309
  return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsx(OverlayViewF, { map: mapRef, mapPaneName: "overlayMouseTarget", bounds: googleOverlay.bounds ?? undefined, rotate: actureRotate, zIndex: zIndex, onDraw: googleOverlay.handleOverlayDraw, children: jsxRuntime.jsxs("div", { className: `${styles.googleOverlayRoot} ${className || ''}`, style: containerStyle, onMouseLeave: () => setHoveredId(null), children: [mapSvgLayer, overlayLayers] }) }) }) }));
32277
32310
  }
32278
32311
  /** Standalone 模式:固定容器 + 网格底图 + 双层 SVG / HTML overlay */
32279
- return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles.mapSvgStack, children: [jsxRuntime.jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle: mergedPickerStyles.grid }), mapSvgLayer] }), overlayLayers] })) }) }) }));
32312
+ return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles.mapSvgStack, children: [jsxRuntime.jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle: standaloneGridStyle }), mapSvgLayer] }), overlayLayers] })) }) }) }));
32280
32313
  });
32281
32314
  MowerPartitionPickerMap.displayName = 'MowerPartitionPickerMap';
32282
32315
 
@@ -11,7 +11,7 @@ import React from 'react';
11
11
  import { MowerPartitionPickerMapProps, MowerPartitionPickerMapRef } from './partitionPicker/types';
12
12
  export declare const MowerPartitionPickerMap: React.ForwardRefExoticComponent<MowerPartitionPickerMapProps & React.RefAttributes<MowerPartitionPickerMapRef>>;
13
13
  export default MowerPartitionPickerMap;
14
- export type { MowerPartitionPickerMapProps, MowerPartitionPickerMapRef, CssLength } from './partitionPicker/types';
14
+ export type { MowerPartitionPickerMapProps, MowerPartitionPickerMapRef, CssLength, } from './partitionPicker/types';
15
15
  export type { PartitionPickerStyleConfig, PartitionPickerBoundaryColors, PartitionPickerLabelStyles, PartitionPickerGridStyle, ResolvedPartitionPickerStyles, } from './partitionPicker/constants';
16
16
  export { resolvePartitionPickerStyles, getPartitionPickerColors, getPartitionPickerLabelStyles, PARTITION_PICKER_COLORS_WEB, PARTITION_PICKER_COLORS_H5, PARTITION_PICKER_LABEL_STYLES_WEB, PARTITION_PICKER_LABEL_STYLES_H5, } from './partitionPicker/constants';
17
17
  //# sourceMappingURL=MowerPartitionPickerMap.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MowerPartitionPickerMap.d.ts","sourceRoot":"","sources":["../../src/render/MowerPartitionPickerMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAON,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAgBnG,eAAO,MAAM,uBAAuB,iHAkZnC,CAAC;AAIF,eAAe,uBAAuB,CAAC;AAEvC,YAAY,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnH,YAAY,EACV,0BAA0B,EAC1B,6BAA6B,EAC7B,0BAA0B,EAC1B,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,4BAA4B,EAC5B,wBAAwB,EACxB,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,iCAAiC,EACjC,gCAAgC,GACjC,MAAM,6BAA6B,CAAC"}
1
+ {"version":3,"file":"MowerPartitionPickerMap.d.ts","sourceRoot":"","sources":["../../src/render/MowerPartitionPickerMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAON,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAiBnG,eAAO,MAAM,uBAAuB,iHAwanC,CAAC;AAIF,eAAe,uBAAuB,CAAC;AAEvC,YAAY,EACV,4BAA4B,EAC5B,0BAA0B,EAC1B,SAAS,GACV,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,0BAA0B,EAC1B,6BAA6B,EAC7B,0BAA0B,EAC1B,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,4BAA4B,EAC5B,wBAAwB,EACxB,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,iCAAiC,EACjC,gCAAgC,GACjC,MAAM,6BAA6B,CAAC"}
@@ -1,19 +1,29 @@
1
1
  import { CSSProperties } from 'react';
2
2
  import { MapConfig, PlatformType } from '../../types';
3
3
  /** ChannelClipPath 等内容裁剪使用的 SVG 坐标边距(与用户传入的屏幕 padding 无关) */
4
- export declare const PARTITION_PICKER_CONTENT_CLIP_PADDING = 50;
4
+ export declare const PARTITION_PICKER_CONTENT_CLIP_PADDING = 0;
5
5
  /** H5:子区域屏幕宽度超过该值才展示名称标签(px) */
6
- export declare const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 72;
6
+ export declare const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 92;
7
7
  /** H5:名称气泡总宽度(px) */
8
- export declare const H5_PARTITION_LABEL_WIDTH_PX = 72;
9
- /** H5:名称文案最大宽度(px),可换行 */
10
- export declare const H5_PARTITION_LABEL_TEXT_MAX_WIDTH_PX = 60;
8
+ export declare const H5_PARTITION_LABEL_WIDTH_PX = 92;
9
+ /** H5:名称文案最大宽度(px,可换行);默认设计值,实际随 labels.width/maxWidth 与 padding 自适应 */
10
+ export declare const H5_PARTITION_LABEL_TEXT_MAX_WIDTH_PX = 80;
11
+ /** Web:序号徽章与名称标签间距(px) */
12
+ export declare const WEB_SELECTION_ORDER_GAP_PX = 8;
11
13
  /** H5:序号徽章与名称标签间距(px) */
12
14
  export declare const H5_SELECTION_ORDER_GAP_PX = 4;
13
- /** 边界线目标屏幕像素宽度(默认态,全缩放级别保持一致) */
14
- export declare const PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX = 2;
15
- /** 边界线目标屏幕像素宽度(hover / 选中态) */
16
- export declare const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5;
15
+ /** Standalone:充电桩图标最小屏幕尺寸(px),缩小全图 fit 时避免过小;放大时随 viewBox 同比缩放 */
16
+ export declare const PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX = 16;
17
+ /** Web 地块描边屏幕像素宽度:未选中 2px,选中 3px */
18
+ export declare const WEB_PARTITION_BOUNDARY_STROKE_PX: {
19
+ readonly default: 2;
20
+ readonly selected: 3;
21
+ };
22
+ /** H5 地块描边屏幕像素宽度:选中与否均为 1px */
23
+ export declare const H5_PARTITION_BOUNDARY_STROKE_PX: {
24
+ readonly default: 1;
25
+ readonly selected: 1;
26
+ };
17
27
  /**
18
28
  * Figma bg/mapping 地图网格背景(Standalone SVG 层)
19
29
  * @see https://www.figma.com/design/j0DdUYf8VFkXQ8ikkA6ZzP — node 20490:84886
@@ -21,17 +31,17 @@ export declare const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5
21
31
  /** 网格区域底色,也用于容器 letterbox 留白 */
22
32
  export declare const PARTITION_PICKER_GRID_BASE_COLOR = "#E3E5EB";
23
33
  /** 网格单元边长(SVG 地图坐标,与 viewBox 一致;zoom 时间距同比缩放) */
24
- export declare const PARTITION_PICKER_GRID_TILE_SIZE = 100;
34
+ export declare const PARTITION_PICKER_GRID_TILE_SIZE = 10;
25
35
  /** 网格线宽(地图坐标;随 zoom 同比缩放,不做屏幕像素恒定) */
26
- export declare const PARTITION_PICKER_GRID_LINE_WIDTH = 2;
36
+ export declare const PARTITION_PICKER_GRID_LINE_WIDTH = 0.5;
27
37
  /** 网格交点圆点半径(地图坐标) */
28
- export declare const PARTITION_PICKER_GRID_DOT_RADIUS = 4;
38
+ export declare const PARTITION_PICKER_GRID_DOT_RADIUS = 0.5;
29
39
  /** 网格层整体不透明度(Figma 约 80%) */
30
- export declare const PARTITION_PICKER_GRID_OPACITY = 0.8;
40
+ export declare const PARTITION_PICKER_GRID_OPACITY = 0.4;
31
41
  /** 网格线与交点颜色 */
32
42
  export declare const PARTITION_PICKER_GRID_STROKE = "#FFFFFF";
33
43
  /** 可见范围内交点超过该数量时跳过圆点,仅保留网格线(缩小视野时减轻 DOM 压力) */
34
- export declare const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 800;
44
+ export declare const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 2000;
35
45
  /**
36
46
  * 分区选择地图专用样式
37
47
  *
@@ -43,28 +53,27 @@ export declare const PARTITION_PICKER_MAP_CONFIG: MapConfig;
43
53
  export interface PartitionPickerBoundaryColors {
44
54
  defaultFill: string;
45
55
  defaultStroke: string;
46
- defaultStrokeWidth: number;
47
56
  hoverFill: string;
48
57
  hoverStroke: string;
49
- hoverStrokeWidth: number;
50
58
  selectedFill: string;
51
59
  selectedStroke: string;
52
- selectedStrokeWidth: number;
53
60
  selectedHoverFill: string;
54
61
  selectedHoverStroke: string;
55
- selectedHoverStrokeWidth: number;
56
62
  isolatedFill: string;
57
63
  isolatedStroke: string;
58
- isolatedStrokeWidth: number;
59
64
  }
60
65
  /** Web 端地块配色(Figma Vector 360 / 361 / 99788) */
61
66
  export declare const PARTITION_PICKER_COLORS_WEB: PartitionPickerBoundaryColors;
62
67
  /** H5 端地块配色 */
63
68
  export declare const PARTITION_PICKER_COLORS_H5: PartitionPickerBoundaryColors;
64
- /** @deprecated 使用 getPartitionPickerColors */
65
- export declare const PARTITION_PICKER_COLORS: PartitionPickerBoundaryColors;
66
69
  export declare function getPartitionPickerMapConfig(platform?: PlatformType): MapConfig;
67
70
  export declare function getPartitionPickerColors(platform?: PlatformType): PartitionPickerBoundaryColors;
71
+ /** 地块描边屏幕像素目标(Web / H5 平台默认值不同) */
72
+ export interface PartitionPickerBoundaryStrokePx {
73
+ default: number;
74
+ selected: number;
75
+ }
76
+ export declare function getPartitionPickerBoundaryStrokePx(platform?: PlatformType): PartitionPickerBoundaryStrokePx;
68
77
  /** 分区名气泡单态样式(默认 / 选中) */
69
78
  export interface PartitionPickerLabelAppearance {
70
79
  backgroundColor?: string;
@@ -76,6 +85,7 @@ export interface PartitionPickerLabelAppearance {
76
85
  padding: string;
77
86
  borderRadius: number;
78
87
  width?: string;
88
+ maxWidth?: string;
79
89
  boxSizing?: CSSProperties['boxSizing'];
80
90
  border?: string;
81
91
  boxShadow?: string;
@@ -121,20 +131,13 @@ export interface PartitionPickerGridStyle {
121
131
  maxIntersectionDots: number;
122
132
  }
123
133
  export declare const DEFAULT_PARTITION_PICKER_GRID_STYLE: PartitionPickerGridStyle;
124
- /** 地块描边屏幕像素恒定目标 */
125
- export interface PartitionPickerBoundaryStrokePx {
126
- default: number;
127
- emphasized: number;
128
- }
129
- export declare const DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX: PartitionPickerBoundaryStrokePx;
130
134
  /**
131
135
  * 分区选择器外观配置(由外部传入,与内置默认值深度合并)
132
136
  *
133
- * - boundary:地块 default / hover / selected / isolated 配色
137
+ * - boundary:地块 fill / stroke 颜色(线宽见 boundaryStrokePx)
134
138
  * - labels:分区名气泡与序号徽章
135
- * - grid:Standalone 网格底图(Map 模式不使用)
136
- * - boundaryStrokePx:描边换算时的屏幕像素目标
137
- * - labelMinScreenWidthPx:H5 名称标签最小展示宽度
139
+ * - grid:Standalone 网格底图(Map 模式不渲染;baseColor 同时影响 Standalone 容器背景)
140
+ * - boundaryStrokePx:描边屏幕像素目标(Web 2/3px,H5 1px)
138
141
  */
139
142
  export interface PartitionPickerStyleConfig {
140
143
  boundary?: Partial<PartitionPickerBoundaryColors>;
@@ -145,7 +148,6 @@ export interface PartitionPickerStyleConfig {
145
148
  };
146
149
  grid?: Partial<PartitionPickerGridStyle>;
147
150
  boundaryStrokePx?: Partial<PartitionPickerBoundaryStrokePx>;
148
- labelMinScreenWidthPx?: number;
149
151
  }
150
152
  export interface ResolvedPartitionPickerStyles {
151
153
  /** 地块 default / hover / selected / isolated 最终配色 */
@@ -155,7 +157,6 @@ export interface ResolvedPartitionPickerStyles {
155
157
  /** Standalone 网格底图最终样式 */
156
158
  grid: PartitionPickerGridStyle;
157
159
  boundaryStrokePx: PartitionPickerBoundaryStrokePx;
158
- labelMinScreenWidthPx: number;
159
160
  }
160
161
  /**
161
162
  * 将 platform 内置默认值与外部 pickerStyleConfig 深度合并。