@pisell/materials 1.0.1062 → 1.0.1064

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -135,8 +135,27 @@ function PisellFloorMapLayoutInner(props, ref) {
     placeSceneElementFromPaletteDrop,
     editPanelParams,
     placeOverlayClass,
-    isLayoutDirty
+    isLayoutDirty,
+    toggleDraftCanvasShowGrid
   } = edit;
+  const effectiveMapLayer = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView || !config || !currentCanvasId) {
+      return mapLayer;
+    }
+    const canvas = config.canvases.find((c) => c.id === currentCanvasId);
+    return { ...mapLayer ?? {}, ...(canvas == null ? void 0 : canvas.mapLayer) ?? {} };
+  }, [isFloorMapView, config, currentCanvasId, mapLayer]);
+  const transformWrapperKey = (0, import_react.useMemo)(() => {
+    if (!isFloorMapView) return "fmap-layout";
+    const bp = (effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding) ?? "d";
+    const z = zoom.defaultScale ?? 1;
+    return `fmap-${currentCanvasId ?? "na"}-bp${bp}-z${z}`;
+  }, [
+    isFloorMapView,
+    currentCanvasId,
+    effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding,
+    zoom.defaultScale
+  ]);
   const canvasesForTabs = (0, import_react.useMemo)(
     () => config ? (0, import_mergeCanvasesForTabs.mergeCanvasesForTabs)(config) : [],
     [config]
@@ -156,7 +175,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     return import_utils.locales.getText("pisell-floor-map-layout.loading");
   }, [engineLocale]);
   const cellSize = cellSizeProp ?? import_layoutMeasurements.DEFAULT_CELL_SIZE;
-  const itemGap = (0, import_react.useMemo)(() => (0, import_layoutMeasurements.gapToPx)(mapLayer == null ? void 0 : mapLayer.gap), [mapLayer == null ? void 0 : mapLayer.gap]);
+  const itemGap = (0, import_react.useMemo)(
+    () => (0, import_layoutMeasurements.gapToPx)(effectiveMapLayer == null ? void 0 : effectiveMapLayer.gap),
+    [effectiveMapLayer == null ? void 0 : effectiveMapLayer.gap]
+  );
   const effectiveItemUnit = isFloorMapView ? "pixel" : itemUnit;
   const metrics = (0, import_useFloorMapTransformMetrics.useFloorMapTransformMetrics)({
     items,
@@ -168,8 +190,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     zoom,
     transformRef,
     contentOffsetRef,
-    boundingPadding: mapLayer == null ? void 0 : mapLayer.boundingPadding,
-    frameResetKey: isFloorMapView ? currentCanvasId ?? "" : void 0
+    boundingPadding: effectiveMapLayer == null ? void 0 : effectiveMapLayer.boundingPadding,
+    frameResetKey: isFloorMapView ? transformWrapperKey : void 0
   });
   const {
     containerRef,
@@ -198,28 +220,10 @@ function PisellFloorMapLayoutInner(props, ref) {
     if (!isFloorMapView || mode !== "edit") return controls;
     return {
       ...controls,
-      showFullscreen: false,
-      showFitBounds: false
+      showFullscreen: false
     };
   }, [isFloorMapView, mode, controls]);
-  const topBarExtraActions = (0, import_react.useMemo)(() => {
-    if (!isFloorMapView || mode !== "edit") return null;
-    if (controls.showFitBounds !== true) return null;
-    return /* @__PURE__ */ import_react.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: (0, import_classnames.default)(
-          `${PREFIX}-edit-top-bar-btn`,
-          `${PREFIX}-edit-top-bar-btn-ghost`
-        ),
-        onClick: () => fitBounds(),
-        "aria-label": "区域定位",
-        title: "区域定位"
-      },
-      "⊞"
-    );
-  }, [isFloorMapView, mode, controls.showFitBounds, fitBounds]);
+  const topBarExtraActions = null;
   const [mapPaletteDragActive, setMapPaletteDragActive] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     const clear = () => setMapPaletteDragActive(false);
@@ -243,7 +247,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]
@@ -255,7 +260,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]
@@ -490,7 +496,7 @@ function PisellFloorMapLayoutInner(props, ref) {
         /* @__PURE__ */ import_react.default.createElement(
           import_react_zoom_pan_pinch.TransformWrapper,
           {
-            key: isFloorMapView ? `fmap-${currentCanvasId ?? "na"}-bp${(mapLayer == null ? void 0 : mapLayer.boundingPadding) ?? "d"}-z${zoomConfig.initialScale}` : "fmap-layout",
+            key: transformWrapperKey,
             centerOnInit: false,
             initialScale: zoomConfig.initialScale,
             initialPositionX,
@@ -530,18 +536,13 @@ 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__ */ import_react.default.createElement(
                 import_MapLayer.default,
                 {
-                  config: mapLayer,
+                  config: effectiveMapLayer,
                   contentWidth,
                   contentHeight,
                   cellSize,
@@ -565,7 +566,7 @@ function PisellFloorMapLayoutInner(props, ref) {
                   selectedId,
                   onSelect: setSelectedId,
                   onUpdateItem: handleUpdateItem,
-                  snapStep: (mapLayer == null ? void 0 : mapLayer.snapStep) ?? 0,
+                  snapStep: (effectiveMapLayer == null ? void 0 : effectiveMapLayer.snapStep) ?? 0,
                   scale,
                   onInteractionChange: setIsInteractingWithElement,
                   getMergedItemWrapperStyle
@@ -620,7 +621,9 @@ function PisellFloorMapLayoutInner(props, ref) {
                 scale,
                 isFullscreen,
                 fitBounds,
-                toggleFullscreen: editToggleFullscreen
+                toggleFullscreen: editToggleFullscreen,
+                mapGridVisible: Boolean(effectiveMapLayer == null ? void 0 : effectiveMapLayer.showGrid),
+                onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : void 0
               }
             ), isFloorMapView && mode === "edit" && editPanelParams && config && dataSources && /* @__PURE__ */ import_react.default.createElement(
               "div",

package/lib/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -121,16 +121,40 @@ function FloorMapEditPanel(props) {
       popDesc: import_utils.locales.getText(`${I18N_EP}.pop-desc`),
       btnDelete: import_utils.locales.getText(`${I18N_EP}.btn-delete`),
       btnCancel: import_utils.locales.getText(`${I18N_EP}.btn-cancel`),
-      btnOkDelete: import_utils.locales.getText(`${I18N_EP}.btn-ok-delete`)
+      btnOkDelete: import_utils.locales.getText(`${I18N_EP}.btn-ok-delete`),
+      labelElementKind: import_utils.locales.getText(`${I18N_EP}.label-element-kind`),
+      hintKindBindingCleared: import_utils.locales.getText(
+        `${I18N_EP}.hint-kind-binding-cleared`
+      )
     }),
     [engineLocale]
   );
+  const swappableKinds = (0, import_react.useMemo)(
+    () => (0, import_floorMapElementKindUtils.getSwappableElementKindsInSameCategory)(config, sceneElement.elementKind),
+    [config, sceneElement.elementKind]
+  );
+  const handleElementKindChange = (0, import_react.useCallback)(
+    (nextKind) => {
+      if (nextKind === sceneElement.elementKind) return;
+      const hadBinding = Boolean(sceneElement.dataBinding);
+      const patch = (0, import_floorMapElementKindUtils.patchSceneElementForKindSwitch)(
+        config,
+        sceneElement,
+        nextKind
+      );
+      if (hadBinding && patch.dataBinding === void 0) {
+        import_antd.message.info(ep.hintKindBindingCleared);
+      }
+      onUpdate(patch);
+    },
+    [config, sceneElement, onUpdate, ep.hintKindBindingCleared]
+  );
   const canvasOptions = config.canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
   const kindConfig = (0, import_floorMapElementKindUtils.getElementKindConfig)(config, sceneElement.elementKind);
   const bindingPolicy = (0, import_floorMapElementKindUtils.resolveDataBindingPolicy)(kindConfig);
   const allKeys = Object.keys(dataSources);
   const allowedKeys = ((_c = kindConfig == null ? void 0 : kindConfig.allowedDataSourceKeys) == null ? void 0 : _c.length) ? kindConfig.allowedDataSourceKeys.filter((k) => allKeys.includes(k)) : allKeys;
-  const isImageKind = sceneElement.elementKind === import_types.FLOOR_MAP_IMAGE_ELEMENT_KIND;
+  const isImageKind = (0, import_floorMapElementKindUtils.isFloorMapImageElementKind)(sceneElement.elementKind);
   const layoutLocked = Boolean(sceneElement.layoutTransformLocked);
   const initialValues = import_react.default.useMemo(() => {
     const dw = isImageKind ? 400 : 180;
@@ -250,6 +274,9 @@ function FloorMapEditPanel(props) {
     });
   };
   const panelScrollRef = (0, import_react.useRef)(null);
+  const getSelectPopupContainer = (0, import_react.useCallback)((node) => {
+    return node.parentElement ?? panelScrollRef.current ?? document.body;
+  }, []);
   const dragScrollRef = (0, import_react.useRef)({
     active: false,
     pointerId: -1,
@@ -315,11 +342,11 @@ function FloorMapEditPanel(props) {
       onPointerUp: endPanelDragScroll,
       onPointerCancel: endPanelDragScroll
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-header` }, /* @__PURE__ */ import_react.default.createElement("span", null, ep.elementProps), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-edit-panel-header-title` }, ep.elementProps), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Button,
       {
         type: "text",
-        size: "small",
+        size: "large",
         className: `${PREFIX}-edit-panel-close`,
         icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
         "aria-label": ep.closeAria,
@@ -327,12 +354,26 @@ function FloorMapEditPanel(props) {
       }
     )),
     (formHasUnappliedChanges || layoutDraftDirty) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-hints`, role: "status" }, formHasUnappliedChanges ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint warn` }, ep.hintApply) : null, layoutDraftDirty ? /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-hint muted` }, ep.hintSave) : null),
+    swappableKinds.length > 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-kind-row` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelElementKind), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select,
+      {
+        size: "large",
+        value: sceneElement.elementKind,
+        options: swappableKinds.map((k) => ({
+          value: k.value,
+          label: k.label
+        })),
+        onChange: handleElementKindChange,
+        getPopupContainer: getSelectPopupContainer,
+        style: { width: "100%", marginBottom: 12 }
+      }
+    )) : null,
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Form,
       {
         form,
         layout: "vertical",
-        size: "small",
+        size: "large",
         onFinish: handleFinish,
         initialValues,
         onValuesChange: () => {
@@ -344,7 +385,7 @@ function FloorMapEditPanel(props) {
         import_antd.Button,
         {
           type: "text",
-          size: "small",
+          size: "large",
           className: `${PREFIX}-edit-panel-layout-lock-btn`,
           icon: layoutLocked ? /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.UnlockOutlined, null),
           "aria-pressed": layoutLocked,
@@ -412,15 +453,16 @@ function FloorMapEditPanel(props) {
             value: c.id,
             label: (0, import_floorMapCanvasDisplay.getFloorMapCanvasDisplayName)(c, engineLocale)
           })),
-          allowClear: false
+          allowClear: false,
+          getPopupContainer: getSelectPopupContainer
         }
       )),
-      /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", htmlType: "submit", size: "small" }, ep.apply))
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", htmlType: "submit", size: "large" }, ep.apply))
     ),
     showDataBindingSection && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-title` }, ep.dataBinding), /* @__PURE__ */ import_react.default.createElement("p", { className: `${PREFIX}-edit-panel-record-draft-note` }, ep.dataBindingNote), allowedKeys.length >= 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelDataSource), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Select,
       {
-        size: "small",
+        size: "large",
         style: { width: "100%" },
         placeholder: ep.phDataSource,
         value: binding == null ? void 0 : binding.dataSourceKey,
@@ -441,17 +483,19 @@ function FloorMapEditPanel(props) {
             }
           });
         },
-        allowClear: bindingPolicy === "optional"
+        allowClear: bindingPolicy === "optional",
+        getPopupContainer: getSelectPopupContainer
       }
     )) : null, allowedKeys.length >= 1 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-edit-panel-record-bind-label` }, ep.labelPickRow), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Select,
       {
-        size: "small",
+        size: "large",
         placeholder: dataRecordBindOptions.length ? ep.phPickRow : ep.phNoRows,
         style: { width: "100%" },
         value: hasBoundDataRecord ? binding == null ? void 0 : binding.recordId : void 0,
         allowClear: bindingPolicy === "optional",
         options: dataRecordBindOptions,
+        getPopupContainer: getSelectPopupContainer,
         onChange: (newId) => {
           const key = (binding == null ? void 0 : binding.dataSourceKey) ?? allowedKeys[0];
           if (!key) return;
@@ -497,7 +541,7 @@ function FloorMapEditPanel(props) {
         cancelText: ep.btnCancel,
         okButtonProps: { danger: true }
       },
-      /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "default", danger: true, block: true, size: "small" }, ep.btnDelete)
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "default", danger: true, block: true, size: "large" }, ep.btnDelete)
     )) : null
   );
 }

package/lib/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/lib/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -147,11 +147,17 @@ function FloorMapToolbar(props) {
     onPlaceModeChange({
       ...mode,
       dataSourceKey: key,
-      recordId: void 0
+      recordId: void 0,
+      recordIds: void 0
     });
   };
-  const handleRecordChange = (mode, recordId) => {
-    onPlaceModeChange({ ...mode, recordId: recordId || void 0 });
+  const handleRecordsChange = (mode, ids) => {
+    const list = (ids == null ? void 0 : ids.filter(Boolean)) ?? [];
+    onPlaceModeChange({
+      ...mode,
+      recordIds: list.length > 0 ? list : void 0,
+      recordId: void 0
+    });
   };
   const cancelPlaceMode = () => onPlaceModeChange(null);
   const renderKindCard = (k) => {
@@ -179,7 +185,7 @@ function FloorMapToolbar(props) {
       elementKind: k.value,
       ...(placeMode == null ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? {
         dataSourceKey: placeMode.dataSourceKey,
-        recordId: placeMode.recordId
+        ...placeMode.recordIds && placeMode.recordIds.length > 0 ? { recordIds: placeMode.recordIds } : placeMode.recordId ? { recordId: placeMode.recordId } : {}
       } : {}
     };
     return /* @__PURE__ */ import_react.default.createElement("div", { key: k.value, className: `${PREFIX}-toolbar-preview-card-wrap` }, /* @__PURE__ */ import_react.default.createElement(
@@ -246,7 +252,7 @@ function FloorMapToolbar(props) {
           if ((placeMode == null ? void 0 : placeMode.type) === "scene")
             handleDsChange(placeMode, v);
         },
-        size: "small",
+        size: "large",
         style: { width: "100%" }
       }
     ), (() => {
@@ -263,23 +269,26 @@ function FloorMapToolbar(props) {
       if (unplaced.length === 0) {
         return /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "当前数据源无未绑定记录，或列表为空；可直接在画布落点占位。");
       }
+      const recordValue = (mode == null ? void 0 : mode.recordIds) && mode.recordIds.length > 0 ? mode.recordIds : (mode == null ? void 0 : mode.recordId) ? [mode.recordId] : void 0;
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
         import_antd.Select,
         {
-          placeholder: "选择要展示的记录（可选）",
+          mode: "multiple",
+          placeholder: "选择要展示的记录（可选，可多选）",
           allowClear: true,
-          value: mode == null ? void 0 : mode.recordId,
+          maxTagCount: "responsive",
+          value: recordValue,
           options: unplaced.map((r) => ({
             value: r.id,
             label: formatDataRecordOptionLabel(r)
           })),
           onChange: (v) => {
-            if (mode) handleRecordChange(mode, v);
+            if (mode) handleRecordsChange(mode, v);
           },
-          size: "small",
+          size: "large",
           style: { width: "100%", marginTop: 4 }
         }
-      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "选中后在画布点击完成落位；留空则先占位，稍后在侧栏绑定。"));
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, "可选多条，在画布点击一次将按阶梯偏移落多条；留空则先占位，稍后在侧栏绑定。"));
     })()), allowedKeys.length === 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-toolbar-record-hint` }, "无可用数据源"), /* @__PURE__ */ import_react.default.createElement(
       "button",
       {

package/lib/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/lib/components/pisellFloorMapLayout/components/MapLayer.js

@@ -85,12 +85,14 @@ function MapLayer(props) {
     gap: gapCss,
     ...pointerEventsNone ? { pointerEvents: "none" } : {}
   };
+  const snapStep = Math.max(1, Number(config.snapStep ?? 1) || 1);
+  const gridSize = Math.max(50, Math.round(cellSize * snapStep));
   const gridStyle = showGrid ? {
     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)
         `,
-    backgroundSize: `${cellSize}px ${cellSize}px`
+    backgroundSize: `${gridSize}px ${gridSize}px`
   } : {};
   return /* @__PURE__ */ import_react.default.createElement(
     "div",

package/lib/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/lib/components/pisellFloorMapLayout/components/ViewControls.js

@@ -39,12 +39,22 @@ var import_icons = require("@ant-design/icons");
 var import_ViewControls = require("./ViewControls.less");
 var PREFIX = "pisell-floor-map-layout";
 function ViewControls(props) {
-  const { api, config = {}, scale = 1, isFullscreen = false, className } = props;
+  const {
+    api,
+    config = {},
+    scale = 1,
+    isFullscreen = false,
+    className,
+    mapGridVisible = false,
+    onToggleMapGrid
+  } = props;
   const showZoom = config.showZoom !== false;
   const showReset = config.showReset === true;
   const showFitBounds = config.showFitBounds === true;
   const showFullscreen = config.showFullscreen === true;
+  const showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === "function";
   const scalePercent = Math.round(scale * 100);
+  const showToolsCapsule = showReset || showFitBounds || showFullscreen || showGridToggle;
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className) }, showZoom && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-zoom-stepper` }, /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
@@ -63,11 +73,11 @@ function ViewControls(props) {
       "aria-label": "放大"
     },
     /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
-  )), showReset && /* @__PURE__ */ import_react.default.createElement(
+  )), showToolsCapsule && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-tools-capsule` }, showReset && /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
-      className: `${PREFIX}-view-controls-btn`,
+      className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.resetTransform(),
       "aria-label": "复位"
     },
@@ -76,21 +86,33 @@ function ViewControls(props) {
     "button",
     {
       type: "button",
-      className: `${PREFIX}-view-controls-btn`,
+      className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.fitBounds(),
       "aria-label": "区域定位"
     },
     "⊞"
+  ), showGridToggle && /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: (0, import_classnames.default)(`${PREFIX}-view-controls-tool-btn`, {
+        [`${PREFIX}-view-controls-tool-btn--active`]: mapGridVisible
+      }),
+      onClick: () => onToggleMapGrid(),
+      "aria-pressed": mapGridVisible,
+      "aria-label": mapGridVisible ? "隐藏网格" : "显示网格"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.BorderInnerOutlined, null)
   ), showFullscreen && api.toggleFullscreen && /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
-      className: `${PREFIX}-view-controls-btn`,
+      className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.toggleFullscreen(),
       "aria-label": isFullscreen ? "退出全屏" : "全屏"
     },
     isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
-  ));
+  )));
 }
 var ViewControls_default = ViewControls;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/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/lib/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/lib/components/pisellFloorMapLayout/components/ViewControlsWithZoom.js

@@ -53,7 +53,9 @@ function ViewControlsWithZoom(props) {
       api,
       config: props.config,
       scale: props.scale,
-      isFullscreen: props.isFullscreen
+      isFullscreen: props.isFullscreen,
+      mapGridVisible: props.mapGridVisible,
+      onToggleMapGrid: props.onToggleMapGrid
     }
   );
 }

package/lib/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;
 };