@pisell/materials 1.0.1063 → 1.0.1064

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;

package/es/components/pisellFloorMapLayout/components/ViewControlsWithZoom.js

@@ -22,6 +22,8 @@ export function ViewControlsWithZoom(props) {
     api: api,
     config: props.config,
     scale: props.scale,
-    isFullscreen: props.isFullscreen
+    isFullscreen: props.isFullscreen,
+    mapGridVisible: props.mapGridVisible,
+    onToggleMapGrid: props.onToggleMapGrid
   });
 }

package/es/components/pisellFloorMapLayout/context/mergeFloorMapLayoutContext.js

@@ -4,8 +4,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-/**
- * 将 `FloorMapLayoutContext` 与 Layout props 合并：各字段 props ?? ctx，props 显式值优先。
+/**
+ * 将 `FloorMapLayoutContext` 与 Layout props 合并：各字段 props ?? ctx，props 显式值优先。
  */
 export function mergeFloorMapLayoutPropsFromContext(props, ctx) {
   var _props$floorMapConfig, _props$dataSources, _props$onSave, _props$onDataSourceRe, _props$dataSourceLabe, _props$dataSourceForm, _props$dataSourceReco, _props$loading, _props$saveError, _props$onElementRende, _props$toolbarShowSav, _props$floorMapFullsc, _props$showDataSource;

package/es/components/pisellFloorMapLayout/hooks/useFloorMapEditState.d.ts

@@ -59,4 +59,5 @@ export declare function useFloorMapEditState<T extends FloorMapItemBase>(params:
     } | null;
     placeOverlayClass: string;
     isLayoutDirty: boolean;
+    toggleDraftCanvasShowGrid: () => void;
 };