@pisell/materials 6.11.16 → 6.11.18

package/es/components/pisellFloorMapLayout/components/ItemLayer.js

@@ -0,0 +1,195 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * ItemLayer - 楼层图展示层
+ * 按 items 的 (x, y) 与 cellSize 定位，用 renderItem 渲染每项内容
+ */
+import React, { useCallback, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import "./ItemLayer.less";
+var PREFIX = 'pisell-floor-map-layout';
+
+/** 图元内可滚动区标记（如预约房间卡 body / multi-list），与 private-materials 约定一致 */
+var ROOM_SCROLL_SURFACE_SELECTOR = '[data-pisell-floor-room-scroll-surface]';
+function getItemKey(item, index, rowKey) {
+  var _rowKey;
+  if (!rowKey) return item.id;
+  if (typeof rowKey === 'string') return String((_rowKey = item[rowKey]) !== null && _rowKey !== void 0 ? _rowKey : item.id);
+  return rowKey(item, index);
+}
+
+/**
+ * 根据形状返回 item 容器的 style（clip-path / border-radius）
+ */
+function getShapeStyle() {
+  var shape = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'rect';
+  switch (shape) {
+    case 'circle':
+      return {
+        borderRadius: '50%'
+      };
+    case 'triangle':
+      return {
+        clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)'
+      };
+    case 'polygon':
+    case 'custom':
+      return {};
+    default:
+      return {};
+  }
+}
+export function ItemLayer(props) {
+  var items = props.items,
+    renderItem = props.renderItem,
+    rowKey = props.rowKey,
+    cellSize = props.cellSize,
+    _props$itemUnit = props.itemUnit,
+    itemUnit = _props$itemUnit === void 0 ? 'cell' : _props$itemUnit,
+    _props$itemGap = props.itemGap,
+    itemGap = _props$itemGap === void 0 ? 0 : _props$itemGap,
+    contentWidth = props.contentWidth,
+    contentHeight = props.contentHeight,
+    _props$contentOffsetX = props.contentOffsetX,
+    contentOffsetX = _props$contentOffsetX === void 0 ? 0 : _props$contentOffsetX,
+    _props$contentOffsetY = props.contentOffsetY,
+    contentOffsetY = _props$contentOffsetY === void 0 ? 0 : _props$contentOffsetY,
+    _props$enableHover = props.enableHover,
+    enableHover = _props$enableHover === void 0 ? true : _props$enableHover,
+    onItemClick = props.onItemClick,
+    onItemHover = props.onItemHover,
+    onItemLeave = props.onItemLeave,
+    getMergedItemWrapperStyle = props.getMergedItemWrapperStyle,
+    onInteractionChange = props.onInteractionChange,
+    className = props.className;
+
+  /** 触控/指针在房间卡滚动区内按下时禁用画布 pan，松手恢复 */
+  var notifyRoomScrollSurfaceActive = useCallback(function () {
+    if (!onInteractionChange) return;
+    onInteractionChange(true);
+    var finish = function finish() {
+      onInteractionChange(false);
+    };
+    window.addEventListener('pointerup', finish, {
+      once: true
+    });
+    window.addEventListener('pointercancel', finish, {
+      once: true
+    });
+    window.addEventListener('touchend', finish, {
+      once: true,
+      passive: true
+    });
+    window.addEventListener('touchcancel', finish, {
+      once: true,
+      passive: true
+    });
+  }, [onInteractionChange]);
+  var handleItemPointerDownCapture = useCallback(function (e) {
+    var _el$closest;
+    if (!onInteractionChange || e.button !== 0) return;
+    var el = e.target;
+    if (!(el !== null && el !== void 0 && (_el$closest = el.closest) !== null && _el$closest !== void 0 && _el$closest.call(el, ROOM_SCROLL_SURFACE_SELECTOR))) return;
+    notifyRoomScrollSurfaceActive();
+  }, [onInteractionChange, notifyRoomScrollSurfaceActive]);
+  var handleItemTouchStartCapture = useCallback(function (e) {
+    var _el$closest2;
+    if (!onInteractionChange) return;
+    var el = e.target;
+    if (!(el !== null && el !== void 0 && (_el$closest2 = el.closest) !== null && _el$closest2 !== void 0 && _el$closest2.call(el, ROOM_SCROLL_SURFACE_SELECTOR))) return;
+    notifyRoomScrollSurfaceActive();
+  }, [onInteractionChange, notifyRoomScrollSurfaceActive]);
+  useEffect(function () {
+    return function () {
+      onInteractionChange === null || onInteractionChange === void 0 || onInteractionChange(false);
+    };
+  }, [onInteractionChange]);
+  var itemNodes = useMemo(function () {
+    var isPixel = itemUnit === 'pixel';
+    var g = itemGap;
+    var sorted = _toConsumableArray(items).sort(function (a, b) {
+      var _a$zIndex, _b$zIndex;
+      return ((_a$zIndex = a.zIndex) !== null && _a$zIndex !== void 0 ? _a$zIndex : 0) - ((_b$zIndex = b.zIndex) !== null && _b$zIndex !== void 0 ? _b$zIndex : 0);
+    });
+    return sorted.map(function (item, index) {
+      var _item$zIndex;
+      var left;
+      var top;
+      var width;
+      var height;
+      if (isPixel) {
+        var _item$width, _item$height;
+        width = (_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : cellSize;
+        height = (_item$height = item.height) !== null && _item$height !== void 0 ? _item$height : cellSize;
+        left = item.x;
+        top = item.y;
+      } else {
+        var _item$width2, _item$height2;
+        var w = (_item$width2 = item.width) !== null && _item$width2 !== void 0 ? _item$width2 : 1;
+        var h = (_item$height2 = item.height) !== null && _item$height2 !== void 0 ? _item$height2 : 1;
+        left = g > 0 ? item.x * (cellSize + g) + g : item.x * cellSize;
+        top = g > 0 ? item.y * (cellSize + g) + g : item.y * cellSize;
+        width = g > 0 ? w * cellSize + (w - 1) * g : w * cellSize;
+        height = g > 0 ? h * cellSize + (h - 1) * g : h * cellSize;
+      }
+      var key = getItemKey(item, index, rowKey);
+      var shapeStyle = getShapeStyle(item.shape);
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: classNames("".concat(PREFIX, "-item"), _defineProperty({}, "".concat(PREFIX, "-item-hoverable"), enableHover)),
+        style: _objectSpread(_objectSpread({
+          position: 'absolute',
+          left: left,
+          top: top,
+          width: width,
+          height: height,
+          boxSizing: 'border-box',
+          zIndex: (_item$zIndex = item.zIndex) !== null && _item$zIndex !== void 0 ? _item$zIndex : 0
+        }, shapeStyle), getMergedItemWrapperStyle === null || getMergedItemWrapperStyle === void 0 ? void 0 : getMergedItemWrapperStyle(item, index)),
+        onClick: function onClick(e) {
+          return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, index, e);
+        },
+        onMouseEnter: function onMouseEnter(e) {
+          return onItemHover === null || onItemHover === void 0 ? void 0 : onItemHover(item, index, e);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return onItemLeave === null || onItemLeave === void 0 ? void 0 : onItemLeave(item, index, e);
+        },
+        onPointerDownCapture: handleItemPointerDownCapture,
+        onTouchStartCapture: handleItemTouchStartCapture
+      }, renderItem(item, index));
+    });
+  }, [items, renderItem, rowKey, cellSize, itemUnit, itemGap, enableHover, onItemClick, onItemHover, onItemLeave, getMergedItemWrapperStyle, handleItemPointerDownCapture, handleItemTouchStartCapture]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "-item-layer"), className),
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: contentWidth,
+      height: contentHeight,
+      minWidth: contentWidth,
+      minHeight: contentHeight
+    }
+  }, contentOffsetX !== 0 || contentOffsetY !== 0 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: contentWidth,
+      height: contentHeight,
+      transform: "translate(".concat(contentOffsetX, "px, ").concat(contentOffsetY, "px)")
+    }
+  }, itemNodes) : itemNodes);
+}
+export default ItemLayer;

package/es/components/pisellFloorMapLayout/components/ItemLayer.less

@@ -0,0 +1,19 @@
+.pisell-floor-map-layout-item-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.pisell-floor-map-layout-item {
+  /* 必须裁剪在格子内，避免内容溢出到格子外导致位置错乱 */
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 0;
+
+  &-hoverable:hover {
+    outline: 2px solid rgba(24, 144, 255, 0.5);
+    outline-offset: -2px;
+    z-index: 1;
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * MapLayer - 楼层图底层
+ * 负责背景（无/纯色/图片/SVG）、网格线、padding、gap
+ */
+import React from 'react';
+import type { FloorMapLayerConfig } from '../types';
+import './MapLayer.less';
+export interface MapLayerProps {
+    /** 底层配置 */
+    config?: FloorMapLayerConfig;
+    /** 内容区域宽度（逻辑单位或像素，用于网格线计算） */
+    contentWidth?: number;
+    /** 内容区域高度 */
+    contentHeight?: number;
+    /** 每格像素尺寸（用于网格线间距） */
+    cellSize?: number;
+    /** 为 true 时不应用纯色背景，让画布底层网格透出 */
+    preferCanvasGrid?: boolean;
+    /** 为 true 时容器设置 pointer-events: none，空白处点击可透传到下层，供 react-zoom-pan-pinch 画布平移 */
+    pointerEventsNone?: boolean;
+    /** 子节点（展示层会叠在上方） */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+}
+export declare function MapLayer(props: MapLayerProps): React.JSX.Element;
+export default MapLayer;

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

@@ -0,0 +1,85 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+/**
+ * MapLayer - 楼层图底层
+ * 负责背景（无/纯色/图片/SVG）、网格线、padding、gap
+ */
+import React from 'react';
+import classNames from 'classnames';
+import "./MapLayer.less";
+var PREFIX = 'pisell-floor-map-layout';
+/**
+ * 解析 padding/gap 为 CSS 值
+ */
+function toCssSize(v) {
+  if (v === undefined) return undefined;
+  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,
+    contentWidth = _props$contentWidth === void 0 ? 0 : _props$contentWidth,
+    _props$contentHeight = props.contentHeight,
+    contentHeight = _props$contentHeight === void 0 ? 0 : _props$contentHeight,
+    _props$cellSize = props.cellSize,
+    cellSize = _props$cellSize === void 0 ? 64 : _props$cellSize,
+    _props$preferCanvasGr = props.preferCanvasGrid,
+    preferCanvasGrid = _props$preferCanvasGr === void 0 ? false : _props$preferCanvasGr,
+    _props$pointerEventsN = props.pointerEventsNone,
+    pointerEventsNone = _props$pointerEventsN === void 0 ? false : _props$pointerEventsN,
+    children = props.children,
+    className = props.className;
+  var _config$backgroundTyp = config.backgroundType,
+    backgroundType = _config$backgroundTyp === void 0 ? 'none' : _config$backgroundTyp,
+    backgroundColor = config.backgroundColor,
+    backgroundImage = config.backgroundImage,
+    backgroundSvg = config.backgroundSvg,
+    _config$showGrid = config.showGrid,
+    showGrid = _config$showGrid === void 0 ? false : _config$showGrid,
+    padding = config.padding,
+    gap = config.gap;
+  var paddingCss = toCssSize(padding);
+  var gapCss = toCssSize(gap);
+  var backgroundStyle = {};
+  if (preferCanvasGrid) {
+    backgroundStyle.backgroundColor = 'transparent';
+  } else if (backgroundType === 'color' && backgroundColor) {
+    backgroundStyle.backgroundColor = backgroundColor;
+  }
+  if (backgroundType === 'image' && backgroundImage) {
+    backgroundStyle.backgroundImage = "url(".concat(backgroundImage, ")");
+    backgroundStyle.backgroundSize = 'cover';
+    backgroundStyle.backgroundPosition = 'center';
+  }
+  if (backgroundType === 'svg' && backgroundSvg) {
+    var isUrl = backgroundSvg.startsWith('http') || backgroundSvg.startsWith('/');
+    backgroundStyle.backgroundImage = isUrl ? "url(".concat(backgroundSvg, ")") : "url(\"data:image/svg+xml,".concat(encodeURIComponent(backgroundSvg), "\")");
+    backgroundStyle.backgroundSize = 'cover';
+    backgroundStyle.backgroundPosition = 'center';
+  }
+  var containerStyle = _objectSpread({
+    padding: paddingCss,
+    gap: gapCss
+  }, pointerEventsNone ? {
+    pointerEvents: 'none'
+  } : {});
+
+  /** 网格线：用 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(gridSize, "px ").concat(gridSize, "px")
+  } : {};
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(PREFIX, "-map-layer"), className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, backgroundStyle), containerStyle), gridStyle)
+  }, children);
+}
+export default MapLayer;

package/es/components/pisellFloorMapLayout/components/MapLayer.less

@@ -0,0 +1,7 @@
+.pisell-floor-map-layout-map-layer {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  z-index: 0;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * ViewControls - 内置视图控制按钮：缩放（Stepper）、复位、区域定位
+ */
+import React from 'react';
+import type { FloorMapControlsConfig } from '../types';
+import './ViewControls.less';
+/** 从 react-zoom-pan-pinch 拿到的控制 API（由主组件传入） */
+export interface ViewControlsApi {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetTransform: () => void;
+    /** 区域定位，可能由主组件基于 items 计算后封装 */
+    fitBounds?: () => void;
+    /** 切换全屏（requestFullscreen / exitFullscreen） */
+    toggleFullscreen?: () => void;
+}
+export interface ViewControlsProps {
+    /** 控制 API */
+    api: ViewControlsApi;
+    /** 显隐配置 */
+    config?: FloorMapControlsConfig;
+    /** 当前缩放比例（1 = 100%），用于 Stepper 展示 */
+    scale?: number;
+    /** 当前是否处于全屏 */
+    isFullscreen?: boolean;
+    className?: string;
+    /** 与 config.showGridToggle 联用：当前画布是否显示网格 */
+    mapGridVisible?: boolean;
+    /** 切换当前画布 draft 的 mapLayer.showGrid */
+    onToggleMapGrid?: () => void;
+}
+export declare function ViewControls(props: ViewControlsProps): React.JSX.Element;
+export default ViewControls;

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

@@ -0,0 +1,88 @@
+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, BorderInnerOutlined } from '@ant-design/icons';
+import "./ViewControls.less";
+var PREFIX = 'pisell-floor-map-layout';
+
+/** 从 react-zoom-pan-pinch 拿到的控制 API（由主组件传入） */
+
+export function ViewControls(props) {
+  var api = props.api,
+    _props$config = props.config,
+    config = _props$config === void 0 ? {} : _props$config,
+    _props$scale = props.scale,
+    scale = _props$scale === void 0 ? 1 : _props$scale,
+    _props$isFullscreen = props.isFullscreen,
+    isFullscreen = _props$isFullscreen === void 0 ? false : _props$isFullscreen,
+    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", {
+    className: "".concat(PREFIX, "-view-controls-zoom-stepper")
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(PREFIX, "-view-controls-zoom-stepper-btn"),
+    onClick: function onClick() {
+      return api.zoomOut();
+    },
+    "aria-label": "\u7F29\u5C0F"
+  }, /*#__PURE__*/React.createElement(MinusOutlined, null)), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-view-controls-zoom-stepper-value")
+  }, scalePercent, "%"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(PREFIX, "-view-controls-zoom-stepper-btn"),
+    onClick: function onClick() {
+      return api.zoomIn();
+    },
+    "aria-label": "\u653E\u5927"
+  }, /*#__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-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-tool-btn"),
+    onClick: function onClick() {
+      return api.fitBounds();
+    },
+    "aria-label": "\u533A\u57DF\u5B9A\u4F4D"
+  }, "\u229E"), showGridToggle && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    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))));
+}
+export default ViewControls;

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

@@ -0,0 +1,101 @@
+/* Figma 14131:6265：缩放在左下角；Figma 14004:1149 Stepper 样式；z-index 保证在画布之上可点击 */
+.pisell-floor-map-layout-view-controls {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  z-index: 20;
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  /* Stepper：胶囊形 [减] 数值% [加] */
+
+  &-zoom-stepper {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 0 4px;
+    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);
+  }
+
+  &-zoom-stepper-btn {
+    width: 52px;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    color: #101828;
+    font-size: 18px;
+
+    &:hover {
+      background: #f2f4f7;
+      color: #101828;
+    }
+  }
+
+  &-zoom-stepper-value {
+    min-width: 56px;
+    padding: 0 8px;
+    text-align: center;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 1;
+    color: #101828;
+  }
+
+  /* 复位 / 区域定位 / 全屏 / 网格：与 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: none;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    color: #101828;
+    font-size: 20px;
+    line-height: 1;
+
+    &:hover {
+      background: #f2f4f7;
+      color: #101828;
+    }
+  }
+
+  &-tool-btn--active {
+    background: #fff4ed;
+    color: #ff692e;
+
+    &:hover {
+      background: #ffe8d9;
+      color: #ff692e;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * 在 TransformWrapper 内用 useControls 拿到 zoom 控制并渲染 ViewControls，确保点击加减能缩放
+ */
+import React from 'react';
+import type { FloorMapControlsConfig } from '../types';
+export interface ViewControlsWithZoomProps {
+    config?: FloorMapControlsConfig;
+    scale?: number;
+    isFullscreen?: boolean;
+    fitBounds: () => void;
+    /** 未传时不展示全屏按钮（如编辑态 floorMapFullscreenMode 为 disabled） */
+    toggleFullscreen?: () => void;
+    mapGridVisible?: boolean;
+    onToggleMapGrid?: () => void;
+}
+export declare function ViewControlsWithZoom(props: ViewControlsWithZoomProps): React.JSX.Element;

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

@@ -0,0 +1,29 @@
+/**
+ * 在 TransformWrapper 内用 useControls 拿到 zoom 控制并渲染 ViewControls，确保点击加减能缩放
+ */
+import React, { useMemo } from 'react';
+import { useControls } from 'react-zoom-pan-pinch';
+import ViewControls from "./ViewControls";
+export function ViewControlsWithZoom(props) {
+  var _useControls = useControls(),
+    zoomIn = _useControls.zoomIn,
+    zoomOut = _useControls.zoomOut,
+    resetTransform = _useControls.resetTransform;
+  var api = useMemo(function () {
+    return {
+      zoomIn: zoomIn,
+      zoomOut: zoomOut,
+      resetTransform: resetTransform,
+      fitBounds: props.fitBounds,
+      toggleFullscreen: props.toggleFullscreen
+    };
+  }, [zoomIn, zoomOut, resetTransform, props.fitBounds, props.toggleFullscreen]);
+  return /*#__PURE__*/React.createElement(ViewControls, {
+    api: api,
+    config: props.config,
+    scale: props.scale,
+    isFullscreen: props.isFullscreen,
+    mapGridVisible: props.mapGridVisible,
+    onToggleMapGrid: props.onToggleMapGrid
+  });
+}

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

@@ -0,0 +1,21 @@
+/**
+ * 楼层图布局子组件导出
+ */
+export { MapLayer } from './MapLayer';
+export { ItemLayer } from './ItemLayer';
+export { ViewControls } from './ViewControls';
+export { ViewControlsWithZoom } from './ViewControlsWithZoom';
+export { CanvasTabs } from './CanvasTabs';
+export { EditableItemLayer } from './EditableItemLayer';
+export { FloorMapToolbar } from './FloorMapToolbar';
+export { FloorMapEditTopBar } from './FloorMapEditTopBar';
+export { FloorMapEditPanel } from './FloorMapEditPanel';
+export { FloorMapDataForm } from './FloorMapDataForm';
+export type { ViewControlsApi } from './ViewControls';
+export type { ViewControlsWithZoomProps } from './ViewControlsWithZoom';
+export type { CanvasTabsProps } from './CanvasTabs';
+export type { EditableItemLayerProps } from './EditableItemLayer';
+export type { FloorMapToolbarProps, PlaceMode } from './FloorMapToolbar';
+export type { FloorMapEditTopBarProps, FloorMapEditTopBarMode, } from './FloorMapEditTopBar';
+export type { FloorMapEditPanelProps } from './FloorMapEditPanel';
+export type { FloorMapDataFormProps } from './FloorMapDataForm';

package/es/components/pisellFloorMapLayout/components/index.js

@@ -0,0 +1,13 @@
+/**
+ * 楼层图布局子组件导出
+ */
+export { MapLayer } from "./MapLayer";
+export { ItemLayer } from "./ItemLayer";
+export { ViewControls } from "./ViewControls";
+export { ViewControlsWithZoom } from "./ViewControlsWithZoom";
+export { CanvasTabs } from "./CanvasTabs";
+export { EditableItemLayer } from "./EditableItemLayer";
+export { FloorMapToolbar } from "./FloorMapToolbar";
+export { FloorMapEditTopBar } from "./FloorMapEditTopBar";
+export { FloorMapEditPanel } from "./FloorMapEditPanel";
+export { FloorMapDataForm } from "./FloorMapDataForm";

package/es/components/pisellFloorMapLayout/context/FloorMapLayoutContext.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 平面图数据/保存等注入上下文；单独页面包 `FloorMapLayoutProvider`，RecordBoard 由 Shell 内置 Provider。
+ */
+import React from 'react';
+import type { FloorMapLayoutContextValue } from '../types';
+/**
+ * 未传 `floorMapLayoutContext` 时 Shell 使用该稳定引用，避免无意义变更引用。
+ */
+export declare const EMPTY_FLOOR_MAP_LAYOUT_CONTEXT: FloorMapLayoutContextValue;
+export declare function useFloorMapLayoutContext(): FloorMapLayoutContextValue | undefined;
+export interface FloorMapLayoutProviderProps {
+    value: FloorMapLayoutContextValue;
+    children: React.ReactNode;
+}
+/** 注入 `FloorMapLayoutContextValue`；`value` 建议由调用方 `useMemo` 稳定化 */
+export declare function FloorMapLayoutProvider({ value, children, }: FloorMapLayoutProviderProps): React.JSX.Element;