@pisell/materials 1.0.1062 → 1.0.1064

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -42,7 +42,7 @@ import { initFloorMapLayoutLocales } from "./utils/floorMapCanvasDisplay";
 import "./PisellFloorMapLayout.less";
 var PREFIX = 'pisell-floor-map-layout';
 function PisellFloorMapLayoutInner(props, ref) {
-  var _engineCtx$engine, _config$sceneElements, _mapLayer$boundingPad;
+  var _engineCtx$engine, _config$sceneElements;
   var layoutCtx = useFloorMapLayoutContext();
   var p = mergeFloorMapLayoutPropsFromContext(props, layoutCtx);
   var className = p.className,
@@ -124,7 +124,30 @@ function PisellFloorMapLayoutInner(props, ref) {
     placeSceneElementFromPaletteDrop = edit.placeSceneElementFromPaletteDrop,
     editPanelParams = edit.editPanelParams,
     placeOverlayClass = edit.placeOverlayClass,
-    isLayoutDirty = edit.isLayoutDirty;
+    isLayoutDirty = edit.isLayoutDirty,
+    toggleDraftCanvasShowGrid = edit.toggleDraftCanvasShowGrid;
+  var effectiveMapLayer = useMemo(function () {
+    var _canvas$mapLayer;
+    if (!isFloorMapView || !config || !currentCanvasId) {
+      return mapLayer;
+    }
+    var canvas = config.canvases.find(function (c) {
+      return c.id === currentCanvasId;
+    });
+    return _objectSpread(_objectSpread({}, mapLayer !== null && mapLayer !== void 0 ? mapLayer : {}), (_canvas$mapLayer = canvas === null || canvas === void 0 ? void 0 : canvas.mapLayer) !== null && _canvas$mapLayer !== void 0 ? _canvas$mapLayer : {});
+  }, [isFloorMapView, config, currentCanvasId, mapLayer]);
+
+  /**
+   * 必须与下方 TransformWrapper 的 `key` 完全一致。
+   * 远程/合并配置落地后 boundingPadding 等会变 → Wrapper 重挂载 → 若 autoFit 仍按旧「仅 canvasId」帧认为已 done，首屏会停在初始 transform；切换画布才因 id 变化再次 fit。
+   */
+  var transformWrapperKey = useMemo(function () {
+    var _effectiveMapLayer$bo, _zoom$defaultScale;
+    if (!isFloorMapView) return 'fmap-layout';
+    var bp = (_effectiveMapLayer$bo = effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding) !== null && _effectiveMapLayer$bo !== void 0 ? _effectiveMapLayer$bo : 'd';
+    var z = (_zoom$defaultScale = zoom.defaultScale) !== null && _zoom$defaultScale !== void 0 ? _zoom$defaultScale : 1;
+    return "fmap-".concat(currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : 'na', "-bp").concat(bp, "-z").concat(z);
+  }, [isFloorMapView, currentCanvasId, effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding, zoom.defaultScale]);
   var canvasesForTabs = useMemo(function () {
     return config ? mergeCanvasesForTabs(config) : [];
   }, [config]);
@@ -146,8 +169,8 @@ function PisellFloorMapLayoutInner(props, ref) {
   }, [engineLocale]);
   var cellSize = cellSizeProp !== null && cellSizeProp !== void 0 ? cellSizeProp : DEFAULT_CELL_SIZE;
   var itemGap = useMemo(function () {
-    return gapToPx(mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.gap);
-  }, [mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.gap]);
+    return gapToPx(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.gap);
+  }, [effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.gap]);
   var effectiveItemUnit = isFloorMapView ? 'pixel' : itemUnit;
   var metrics = useFloorMapTransformMetrics({
     items: items,
@@ -159,8 +182,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     zoom: zoom,
     transformRef: transformRef,
     contentOffsetRef: contentOffsetRef,
-    boundingPadding: mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding,
-    frameResetKey: isFloorMapView ? currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : '' : undefined
+    boundingPadding: effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding,
+    frameResetKey: isFloorMapView ? transformWrapperKey : undefined
   });
   var containerRef = metrics.containerRef,
     mapAreaRef = metrics.mapAreaRef,
@@ -189,23 +212,10 @@ function PisellFloorMapLayoutInner(props, ref) {
   var viewControlsConfig = useMemo(function () {
     if (!isFloorMapView || mode !== 'edit') return controls;
     return _objectSpread(_objectSpread({}, controls), {}, {
-      showFullscreen: false,
-      showFitBounds: false
+      showFullscreen: false
     });
   }, [isFloorMapView, mode, controls]);
-  var topBarExtraActions = useMemo(function () {
-    if (!isFloorMapView || mode !== 'edit') return null;
-    if (controls.showFitBounds !== true) return null;
-    return /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
-      onClick: function onClick() {
-        return fitBounds();
-      },
-      "aria-label": "\u533A\u57DF\u5B9A\u4F4D",
-      title: "\u533A\u57DF\u5B9A\u4F4D"
-    }, "\u229E");
-  }, [isFloorMapView, mode, controls.showFitBounds, fitBounds]);
+  var topBarExtraActions = null;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     mapPaletteDragActive = _useState2[0],
@@ -233,7 +243,8 @@ function PisellFloorMapLayoutInner(props, ref) {
       type: 'scene',
       elementKind: payload.elementKind,
       dataSourceKey: payload.dataSourceKey,
-      recordId: payload.recordId
+      recordId: payload.recordId,
+      recordIds: payload.recordIds
     });
   }, [isFloorMapView, mode, placeSceneElementFromPaletteDrop]);
   var applyPaletteTouchDropInScene = useCallback(function (payload, cx, cy) {
@@ -242,7 +253,8 @@ function PisellFloorMapLayoutInner(props, ref) {
       type: 'scene',
       elementKind: payload.elementKind,
       dataSourceKey: payload.dataSourceKey,
-      recordId: payload.recordId
+      recordId: payload.recordId,
+      recordIds: payload.recordIds
     });
   }, [isFloorMapView, mode, placeSceneElementFromPaletteDrop]);
   var paletteTouchDrag = useFloorMapPaletteTouchDrag({
@@ -431,7 +443,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       }
     }
   }, /*#__PURE__*/React.createElement(TransformWrapper, {
-    key: isFloorMapView ? "fmap-".concat(currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : 'na', "-bp").concat((_mapLayer$boundingPad = mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding) !== null && _mapLayer$boundingPad !== void 0 ? _mapLayer$boundingPad : 'd', "-z").concat(zoomConfig.initialScale) : 'fmap-layout',
+    key: transformWrapperKey,
     centerOnInit: false,
     initialScale: zoomConfig.initialScale,
     initialPositionX: initialPositionX,
@@ -457,7 +469,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       };
     }
   }, function (ctx) {
-    var _mapLayer$snapStep;
+    var _effectiveMapLayer$sn;
     transformRef.current = ctx;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TransformComponent, {
       wrapperStyle: {
@@ -473,12 +485,10 @@ function PisellFloorMapLayoutInner(props, ref) {
         minHeight: contentHeight,
         position: 'relative',
         overflow: 'visible',
-        backgroundColor: '#F2F4F7',
-        backgroundImage: ['linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px)', 'linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)'].join(', '),
-        backgroundSize: '50px 50px'
+        backgroundColor: '#F2F4F7'
       }
     }, /*#__PURE__*/React.createElement(MapLayer, {
-      config: mapLayer,
+      config: effectiveMapLayer,
       contentWidth: contentWidth,
       contentHeight: contentHeight,
       cellSize: cellSize,
@@ -498,7 +508,7 @@ function PisellFloorMapLayoutInner(props, ref) {
       selectedId: selectedId,
       onSelect: setSelectedId,
       onUpdateItem: handleUpdateItem,
-      snapStep: (_mapLayer$snapStep = mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.snapStep) !== null && _mapLayer$snapStep !== void 0 ? _mapLayer$snapStep : 0,
+      snapStep: (_effectiveMapLayer$sn = effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.snapStep) !== null && _effectiveMapLayer$sn !== void 0 ? _effectiveMapLayer$sn : 0,
       scale: scale,
       onInteractionChange: setIsInteractingWithElement,
       getMergedItemWrapperStyle: getMergedItemWrapperStyle
@@ -542,7 +552,9 @@ function PisellFloorMapLayoutInner(props, ref) {
       scale: scale,
       isFullscreen: isFullscreen,
       fitBounds: fitBounds,
-      toggleFullscreen: editToggleFullscreen
+      toggleFullscreen: editToggleFullscreen,
+      mapGridVisible: Boolean(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.showGrid),
+      onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : undefined
     }), isFloorMapView && mode === 'edit' && editPanelParams && config && dataSources && /*#__PURE__*/React.createElement("div", {
       className: classNames("".concat(PREFIX, "-edit-panel-wrap"), mapAreaSize.height > 0 && "".concat(PREFIX, "-edit-panel-wrap-constrained")),
       style: mapAreaSize.height > 0 ? {

package/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -11,9 +11,9 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { locales } from '@pisell/utils';
 import classNames from 'classnames';
 import { CloseOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
-import { Input, InputNumber, Select, Button, Form, Popconfirm } from 'antd';
-import { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
-import { getElementKindConfig, resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils";
+import { Input, InputNumber, Select, Button, Form, Popconfirm, message } from 'antd';
+import { FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
+import { getElementKindConfig, resolveDataBindingPolicy, isFloorMapImageElementKind, getSwappableElementKindsInSameCategory, patchSceneElementForKindSwitch } from "../utils/floorMapElementKindUtils";
 import { FloorMapDataForm } from "./FloorMapDataForm";
 import useEngineContext from "../../../hooks/useEngineContext";
 import { getFloorMapCanvasDisplayName, initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay";
@@ -98,9 +98,23 @@ export function FloorMapEditPanel(props) {
       popDesc: locales.getText("".concat(I18N_EP, ".pop-desc")),
       btnDelete: locales.getText("".concat(I18N_EP, ".btn-delete")),
       btnCancel: locales.getText("".concat(I18N_EP, ".btn-cancel")),
-      btnOkDelete: locales.getText("".concat(I18N_EP, ".btn-ok-delete"))
+      btnOkDelete: locales.getText("".concat(I18N_EP, ".btn-ok-delete")),
+      labelElementKind: locales.getText("".concat(I18N_EP, ".label-element-kind")),
+      hintKindBindingCleared: locales.getText("".concat(I18N_EP, ".hint-kind-binding-cleared"))
     };
   }, [engineLocale]);
+  var swappableKinds = useMemo(function () {
+    return getSwappableElementKindsInSameCategory(config, sceneElement.elementKind);
+  }, [config, sceneElement.elementKind]);
+  var handleElementKindChange = useCallback(function (nextKind) {
+    if (nextKind === sceneElement.elementKind) return;
+    var hadBinding = Boolean(sceneElement.dataBinding);
+    var patch = patchSceneElementForKindSwitch(config, sceneElement, nextKind);
+    if (hadBinding && patch.dataBinding === undefined) {
+      message.info(ep.hintKindBindingCleared);
+    }
+    onUpdate(patch);
+  }, [config, sceneElement, onUpdate, ep.hintKindBindingCleared]);
   var canvasOptions = config.canvases.filter(function (c) {
     return c.enabled;
   }).sort(function (a, b) {
@@ -112,7 +126,9 @@ export function FloorMapEditPanel(props) {
   var allowedKeys = kindConfig !== null && kindConfig !== void 0 && (_kindConfig$allowedDa = kindConfig.allowedDataSourceKeys) !== null && _kindConfig$allowedDa !== void 0 && _kindConfig$allowedDa.length ? kindConfig.allowedDataSourceKeys.filter(function (k) {
     return allKeys.includes(k);
   }) : allKeys;
-  var isImageKind = sceneElement.elementKind === FLOOR_MAP_IMAGE_ELEMENT_KIND;
+
+  /** 与 RecordBoard Story 图片图元一致：`floorMapImage` */
+  var isImageKind = isFloorMapImageElementKind(sceneElement.elementKind);
   var layoutLocked = Boolean(sceneElement.layoutTransformLocked);
   var initialValues = React.useMemo(function () {
     var _sceneElement$name, _sceneElement$zIndex, _sceneElement$width, _sceneElement$height, _sceneElement$imageUr;
@@ -220,6 +236,10 @@ export function FloorMapEditPanel(props) {
     });
   };
   var panelScrollRef = useRef(null);
+  var getSelectPopupContainer = useCallback(function (node) {
+    var _ref, _node$parentElement;
+    return (_ref = (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : panelScrollRef.current) !== null && _ref !== void 0 ? _ref : document.body;
+  }, []);
   var dragScrollRef = useRef({
     active: false,
     pointerId: -1,
@@ -274,9 +294,11 @@ export function FloorMapEditPanel(props) {
     onPointerCancel: endPanelDragScroll
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-header")
-  }, /*#__PURE__*/React.createElement("span", null, ep.elementProps), /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-edit-panel-header-title")
+  }, ep.elementProps), /*#__PURE__*/React.createElement(Button, {
     type: "text",
-    size: "small",
+    size: "large",
     className: "".concat(PREFIX, "-edit-panel-close"),
     icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
     "aria-label": ep.closeAria,
@@ -288,10 +310,29 @@ export function FloorMapEditPanel(props) {
     className: "".concat(PREFIX, "-edit-panel-hint warn")
   }, ep.hintApply) : null, layoutDraftDirty ? /*#__PURE__*/React.createElement("p", {
     className: "".concat(PREFIX, "-edit-panel-hint muted")
-  }, ep.hintSave) : null), /*#__PURE__*/React.createElement(Form, {
+  }, ep.hintSave) : null), swappableKinds.length > 1 ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-kind-row")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-panel-record-bind-label")
+  }, ep.labelElementKind), /*#__PURE__*/React.createElement(Select, {
+    size: "large",
+    value: sceneElement.elementKind,
+    options: swappableKinds.map(function (k) {
+      return {
+        value: k.value,
+        label: k.label
+      };
+    }),
+    onChange: handleElementKindChange,
+    getPopupContainer: getSelectPopupContainer,
+    style: {
+      width: '100%',
+      marginBottom: 12
+    }
+  })) : null, /*#__PURE__*/React.createElement(Form, {
     form: form,
     layout: "vertical",
-    size: "small",
+    size: "large",
     onFinish: handleFinish,
     initialValues: initialValues,
     onValuesChange: function onValuesChange() {
@@ -304,7 +345,7 @@ export function FloorMapEditPanel(props) {
     className: "".concat(PREFIX, "-edit-panel-layout-lock-title")
   }, ep.sectionLayout), /*#__PURE__*/React.createElement(Button, {
     type: "text",
-    size: "small",
+    size: "large",
     className: "".concat(PREFIX, "-edit-panel-layout-lock-btn"),
     icon: layoutLocked ? /*#__PURE__*/React.createElement(LockOutlined, null) : /*#__PURE__*/React.createElement(UnlockOutlined, null),
     "aria-pressed": layoutLocked,
@@ -381,11 +422,12 @@ export function FloorMapEditPanel(props) {
         label: getFloorMapCanvasDisplayName(c, engineLocale)
       };
     }),
-    allowClear: false
+    allowClear: false,
+    getPopupContainer: getSelectPopupContainer
   })), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     htmlType: "submit",
-    size: "small"
+    size: "large"
   }, ep.apply))), showDataBindingSection && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record")
   }, /*#__PURE__*/React.createElement("div", {
@@ -397,7 +439,7 @@ export function FloorMapEditPanel(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record-bind-label")
   }, ep.labelDataSource), /*#__PURE__*/React.createElement(Select, {
-    size: "small",
+    size: "large",
     style: {
       width: '100%'
     },
@@ -425,13 +467,14 @@ export function FloorMapEditPanel(props) {
         }
       });
     },
-    allowClear: bindingPolicy === 'optional'
+    allowClear: bindingPolicy === 'optional',
+    getPopupContainer: getSelectPopupContainer
   })) : null, allowedKeys.length >= 1 && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record-bind")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record-bind-label")
   }, ep.labelPickRow), /*#__PURE__*/React.createElement(Select, {
-    size: "small",
+    size: "large",
     placeholder: dataRecordBindOptions.length ? ep.phPickRow : ep.phNoRows,
     style: {
       width: '100%'
@@ -439,6 +482,7 @@ export function FloorMapEditPanel(props) {
     value: hasBoundDataRecord ? binding === null || binding === void 0 ? void 0 : binding.recordId : undefined,
     allowClear: bindingPolicy === 'optional',
     options: dataRecordBindOptions,
+    getPopupContainer: getSelectPopupContainer,
     onChange: function onChange(newId) {
       var _binding$dataSourceKe2, _dataSources$key2, _name;
       var key = (_binding$dataSourceKe2 = binding === null || binding === void 0 ? void 0 : binding.dataSourceKey) !== null && _binding$dataSourceKe2 !== void 0 ? _binding$dataSourceKe2 : allowedKeys[0];
@@ -491,7 +535,7 @@ export function FloorMapEditPanel(props) {
     type: "default",
     danger: true,
     block: true,
-    size: "small"
+    size: "large"
   }, ep.btnDelete))) : null);
 }
 export default FloorMapEditPanel;

package/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.less

@@ -15,7 +15,15 @@
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 12px;
+  }
+
+  /** 与下方分组标题（如「数据绑定」「数据源记录」）统一的标题样式 */
+
+  &-header-title {
+    font-size: 14px;
     font-weight: 500;
+    color: #262626;
+    line-height: 1.4;
   }
 
   &-close {

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -173,12 +173,16 @@ export function FloorMapToolbar(props) {
   var handleDsChange = function handleDsChange(mode, key) {
     onPlaceModeChange(_objectSpread(_objectSpread({}, mode), {}, {
       dataSourceKey: key,
-      recordId: undefined
+      recordId: undefined,
+      recordIds: undefined
     }));
   };
-  var handleRecordChange = function handleRecordChange(mode, recordId) {
+  var handleRecordsChange = function handleRecordsChange(mode, ids) {
+    var _ids$filter;
+    var list = (_ids$filter = ids === null || ids === void 0 ? void 0 : ids.filter(Boolean)) !== null && _ids$filter !== void 0 ? _ids$filter : [];
     onPlaceModeChange(_objectSpread(_objectSpread({}, mode), {}, {
-      recordId: recordId || undefined
+      recordIds: list.length > 0 ? list : undefined,
+      recordId: undefined
     }));
   };
   var cancelPlaceMode = function cancelPlaceMode() {
@@ -209,10 +213,13 @@ export function FloorMapToolbar(props) {
     }) : allKeys;
     var paletteDragPayload = _objectSpread({
       elementKind: k.value
-    }, (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && placeMode.elementKind === k.value ? {
-      dataSourceKey: placeMode.dataSourceKey,
+    }, (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && placeMode.elementKind === k.value ? _objectSpread({
+      dataSourceKey: placeMode.dataSourceKey
+    }, placeMode.recordIds && placeMode.recordIds.length > 0 ? {
+      recordIds: placeMode.recordIds
+    } : placeMode.recordId ? {
       recordId: placeMode.recordId
-    } : {});
+    } : {}) : {});
     return /*#__PURE__*/React.createElement("div", {
       key: k.value,
       className: "".concat(PREFIX, "-toolbar-preview-card-wrap")
@@ -273,7 +280,7 @@ export function FloorMapToolbar(props) {
       onChange: function onChange(v) {
         if ((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene') handleDsChange(placeMode, v);
       },
-      size: "small",
+      size: "large",
       style: {
         width: '100%'
       }
@@ -291,10 +298,13 @@ export function FloorMapToolbar(props) {
           className: "".concat(PREFIX, "-toolbar-record-pick-hint")
         }, "\u5F53\u524D\u6570\u636E\u6E90\u65E0\u672A\u7ED1\u5B9A\u8BB0\u5F55\uFF0C\u6216\u5217\u8868\u4E3A\u7A7A\uFF1B\u53EF\u76F4\u63A5\u5728\u753B\u5E03\u843D\u70B9\u5360\u4F4D\u3002");
       }
+      var recordValue = mode !== null && mode !== void 0 && mode.recordIds && mode.recordIds.length > 0 ? mode.recordIds : mode !== null && mode !== void 0 && mode.recordId ? [mode.recordId] : undefined;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
-        placeholder: "\u9009\u62E9\u8981\u5C55\u793A\u7684\u8BB0\u5F55\uFF08\u53EF\u9009\uFF09",
+        mode: "multiple",
+        placeholder: "\u9009\u62E9\u8981\u5C55\u793A\u7684\u8BB0\u5F55\uFF08\u53EF\u9009\uFF0C\u53EF\u591A\u9009\uFF09",
         allowClear: true,
-        value: mode === null || mode === void 0 ? void 0 : mode.recordId,
+        maxTagCount: "responsive",
+        value: recordValue,
         options: unplaced.map(function (r) {
           return {
             value: r.id,
@@ -302,16 +312,16 @@ export function FloorMapToolbar(props) {
           };
         }),
         onChange: function onChange(v) {
-          if (mode) handleRecordChange(mode, v);
+          if (mode) handleRecordsChange(mode, v);
         },
-        size: "small",
+        size: "large",
         style: {
           width: '100%',
           marginTop: 4
         }
       }), /*#__PURE__*/React.createElement("div", {
         className: "".concat(PREFIX, "-toolbar-record-pick-hint")
-      }, "\u9009\u4E2D\u540E\u5728\u753B\u5E03\u70B9\u51FB\u5B8C\u6210\u843D\u4F4D\uFF1B\u7559\u7A7A\u5219\u5148\u5360\u4F4D\uFF0C\u7A0D\u540E\u5728\u4FA7\u680F\u7ED1\u5B9A\u3002"));
+      }, "\u53EF\u9009\u591A\u6761\uFF0C\u5728\u753B\u5E03\u70B9\u51FB\u4E00\u6B21\u5C06\u6309\u9636\u68AF\u504F\u79FB\u843D\u591A\u6761\uFF1B\u7559\u7A7A\u5219\u5148\u5360\u4F4D\uFF0C\u7A0D\u540E\u5728\u4FA7\u680F\u7ED1\u5B9A\u3002"));
     }()), allowedKeys.length === 0 && /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-toolbar-record-hint")
     }, "\u65E0\u53EF\u7528\u6570\u636E\u6E90"), /*#__PURE__*/React.createElement("button", {

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -2,7 +2,7 @@
 .pisell-floor-map-layout-toolbar {
   &.pisell-floor-map-layout-toolbar-sidebar {
     position: relative;
-    width: 220px;
+    width: 248px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
@@ -131,8 +131,9 @@
     display: block;
     width: 100%;
     margin-top: 8px;
-    padding: 8px 12px;
-    font-size: 13px;
+    padding: 10px 16px;
+    font-size: 15px;
+    min-height: 40px;
     color: #333;
     background: #f5f5f5;
     border: 1px solid #d9d9d9;
@@ -152,8 +153,9 @@
 
     &.cancel-inline {
       margin-top: 0;
-      padding: 4px 8px;
-      font-size: 12px;
+      padding: 8px 12px;
+      font-size: 14px;
+      min-height: 40px;
       color: #8c8c8c;
     }
 

package/es/components/pisellFloorMapLayout/components/MapLayer.js

@@ -20,6 +20,7 @@ function toCssSize(v) {
   return typeof v === 'number' ? "".concat(v, "px") : v;
 }
 export function MapLayer(props) {
+  var _config$snapStep;
   var _props$config = props.config,
     config = _props$config === void 0 ? {} : _props$config,
     _props$contentWidth = props.contentWidth,
@@ -69,10 +70,12 @@ export function MapLayer(props) {
     pointerEvents: 'none'
   } : {});
 
-  /** 网格线：用 CSS 线性渐变模拟 */
+  /** 网格线：用 CSS 线性渐变模拟（默认不小于 50px，避免像素模式下格线过密） */
+  var snapStep = Math.max(1, Number((_config$snapStep = config.snapStep) !== null && _config$snapStep !== void 0 ? _config$snapStep : 1) || 1);
+  var gridSize = Math.max(50, Math.round(cellSize * snapStep));
   var gridStyle = showGrid ? {
     backgroundImage: "\n          linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)\n        ",
-    backgroundSize: "".concat(cellSize, "px ").concat(cellSize, "px")
+    backgroundSize: "".concat(gridSize, "px ").concat(gridSize, "px")
   } : {};
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(PREFIX, "-map-layer"), className),

package/es/components/pisellFloorMapLayout/components/ViewControls.d.ts

@@ -21,6 +21,10 @@ export interface ViewControlsProps {
     /** 当前是否处于全屏 */
     isFullscreen?: boolean;
     className?: string;
+    /** 与 config.showGridToggle 联用：当前画布是否显示网格 */
+    mapGridVisible?: boolean;
+    /** 切换当前画布 draft 的 mapLayer.showGrid */
+    onToggleMapGrid?: () => void;
 }
 export declare function ViewControls(props: ViewControlsProps): JSX.Element;
 export default ViewControls;

package/es/components/pisellFloorMapLayout/components/ViewControls.js

@@ -1,9 +1,13 @@
-/**
- * ViewControls - 内置视图控制按钮：缩放（Stepper）、复位、区域定位
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * ViewControls - 内置视图控制按钮：缩放（Stepper）、复位、区域定位
  */
 import React from 'react';
 import classNames from 'classnames';
-import { MinusOutlined, PlusOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
+import { MinusOutlined, PlusOutlined, FullscreenOutlined, FullscreenExitOutlined, BorderInnerOutlined } from '@ant-design/icons';
 import "./ViewControls.less";
 var PREFIX = 'pisell-floor-map-layout';
 
@@ -17,12 +21,17 @@ export function ViewControls(props) {
     scale = _props$scale === void 0 ? 1 : _props$scale,
     _props$isFullscreen = props.isFullscreen,
     isFullscreen = _props$isFullscreen === void 0 ? false : _props$isFullscreen,
-    className = props.className;
+    className = props.className,
+    _props$mapGridVisible = props.mapGridVisible,
+    mapGridVisible = _props$mapGridVisible === void 0 ? false : _props$mapGridVisible,
+    onToggleMapGrid = props.onToggleMapGrid;
   var showZoom = config.showZoom !== false;
   var showReset = config.showReset === true;
   var showFitBounds = config.showFitBounds === true;
   var showFullscreen = config.showFullscreen === true;
+  var showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === 'function';
   var scalePercent = Math.round(scale * 100);
+  var showToolsCapsule = showReset || showFitBounds || showFullscreen || showGridToggle;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(PREFIX, "-view-controls"), className)
   }, showZoom && /*#__PURE__*/React.createElement("div", {
@@ -43,27 +52,37 @@ export function ViewControls(props) {
       return api.zoomIn();
     },
     "aria-label": "\u653E\u5927"
-  }, /*#__PURE__*/React.createElement(PlusOutlined, null))), showReset && /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(PlusOutlined, null))), showToolsCapsule && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-view-controls-tools-capsule")
+  }, showReset && /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(PREFIX, "-view-controls-btn"),
+    className: "".concat(PREFIX, "-view-controls-tool-btn"),
     onClick: function onClick() {
       return api.resetTransform();
     },
     "aria-label": "\u590D\u4F4D"
   }, "\u27F2"), showFitBounds && api.fitBounds && /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(PREFIX, "-view-controls-btn"),
+    className: "".concat(PREFIX, "-view-controls-tool-btn"),
     onClick: function onClick() {
       return api.fitBounds();
     },
     "aria-label": "\u533A\u57DF\u5B9A\u4F4D"
-  }, "\u229E"), showFullscreen && api.toggleFullscreen && /*#__PURE__*/React.createElement("button", {
+  }, "\u229E"), showGridToggle && /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(PREFIX, "-view-controls-btn"),
+    className: classNames("".concat(PREFIX, "-view-controls-tool-btn"), _defineProperty({}, "".concat(PREFIX, "-view-controls-tool-btn--active"), mapGridVisible)),
+    onClick: function onClick() {
+      return onToggleMapGrid();
+    },
+    "aria-pressed": mapGridVisible,
+    "aria-label": mapGridVisible ? '隐藏网格' : '显示网格'
+  }, /*#__PURE__*/React.createElement(BorderInnerOutlined, null)), showFullscreen && api.toggleFullscreen && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(PREFIX, "-view-controls-tool-btn"),
     onClick: function onClick() {
       return api.toggleFullscreen();
     },
     "aria-label": isFullscreen ? '退出全屏' : '全屏'
-  }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null)));
+  }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null))));
 }
 export default ViewControls;

package/es/components/pisellFloorMapLayout/components/ViewControls.less

@@ -10,6 +10,7 @@
   gap: 6px;
 
   /* Stepper：胶囊形 [减] 数值% [加] */
+
   &-zoom-stepper {
     display: flex;
     align-items: center;
@@ -52,26 +53,49 @@
     color: #101828;
   }
 
-  &-btn {
-    width: 32px;
-    height: 32px;
+  /* 复位 / 区域定位 / 全屏 / 网格：与 Stepper 同系胶囊条 */
+
+  &-tools-capsule {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-height: 56px;
+    padding: 2px 6px;
+    background: #fff;
+    border: 1px solid #98a2b3;
+    border-radius: 100px;
+    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
+  }
+
+  &-tool-btn {
+    width: 52px;
+    height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    background: #fff;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
     cursor: pointer;
-    font-size: 18px;
+    color: #101828;
+    font-size: 20px;
     line-height: 1;
-    color: rgba(0, 0, 0, 0.65);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
     &:hover {
-      color: #1890ff;
-      border-color: #1890ff;
-      background: #e6f7ff;
+      background: #f2f4f7;
+      color: #101828;
+    }
+  }
+
+  &-tool-btn--active {
+    background: #fff4ed;
+    color: #ff692e;
+
+    &:hover {
+      background: #ffe8d9;
+      color: #ff692e;
     }
   }
 }

package/es/components/pisellFloorMapLayout/components/ViewControlsWithZoom.d.ts

@@ -7,5 +7,7 @@ export interface ViewControlsWithZoomProps {
     fitBounds: () => void;
     /** 未传时不展示全屏按钮（如编辑态 floorMapFullscreenMode 为 disabled） */
     toggleFullscreen?: () => void;
+    mapGridVisible?: boolean;
+    onToggleMapGrid?: () => void;
 }
 export declare function ViewControlsWithZoom(props: ViewControlsWithZoomProps): JSX.Element;