@pisell/materials 1.0.1055 → 1.0.1057

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

@@ -0,0 +1,36 @@
+/**
+ * ItemLayer - 楼层图展示层
+ * 按 items 的 (x, y) 与 cellSize 定位，用 renderItem 渲染每项内容
+ */
+import React from 'react';
+import type { FloorMapItemBase, FloorMapItemUnit } from '../types';
+import './ItemLayer.less';
+export interface ItemLayerProps<T extends FloorMapItemBase> {
+    /** 资源列表 */
+    items: T[];
+    /** 每项渲染函数 */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** 每项 key */
+    rowKey?: string | ((item: T, index: number) => string);
+    /** 每格像素尺寸（cell 单位时用；pixel 单位时作为缺省宽高） */
+    cellSize: number;
+    /** item 坐标与尺寸单位：cell 格子数，pixel 像素 */
+    itemUnit?: FloorMapItemUnit;
+    /** item 之间的间距（像素），仅 cell 单位时生效 */
+    itemGap?: number;
+    /** 内容区总宽度（像素），由 items 推导或外部传入 */
+    contentWidth: number;
+    /** 内容区总高度（像素） */
+    contentHeight: number;
+    /** 是否启用 hover 事件 */
+    enableHover?: boolean;
+    /** 点击回调 */
+    onItemClick?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 进入 */
+    onItemHover?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 离开 */
+    onItemLeave?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    className?: string;
+}
+export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): JSX.Element;
+export default ItemLayer;

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

@@ -0,0 +1,121 @@
+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); }
+/**
+ * ItemLayer - 楼层图展示层
+ * 按 items 的 (x, y) 与 cellSize 定位，用 renderItem 渲染每项内容
+ */
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import "./ItemLayer.less";
+var PREFIX = 'pisell-floor-map-layout';
+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$enableHover = props.enableHover,
+    enableHover = _props$enableHover === void 0 ? true : _props$enableHover,
+    onItemClick = props.onItemClick,
+    onItemHover = props.onItemHover,
+    onItemLeave = props.onItemLeave,
+    className = props.className;
+  var itemNodes = useMemo(function () {
+    var isPixel = itemUnit === 'pixel';
+    var g = itemGap;
+    return items.map(function (item, index) {
+      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({
+          position: 'absolute',
+          left: left,
+          top: top,
+          width: width,
+          height: height,
+          boxSizing: 'border-box'
+        }, shapeStyle),
+        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);
+        }
+      }, renderItem(item, index));
+    });
+  }, [items, renderItem, rowKey, cellSize, itemUnit, itemGap, enableHover, onItemClick, onItemHover, onItemLeave]);
+  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
+    }
+  }, 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,23 @@
+/**
+ * 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;
+    /** 子节点（展示层会叠在上方） */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+}
+export declare function MapLayer(props: MapLayerProps): JSX.Element;
+export default MapLayer;

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

@@ -0,0 +1,74 @@
+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 _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,
+    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 (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 = {
+    padding: paddingCss,
+    gap: gapCss
+  };
+
+  /** 网格线：用 CSS 线性渐变模拟 */
+  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")
+  } : {};
+  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,22 @@
+/// <reference types="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;
+}
+export interface ViewControlsProps {
+    /** 控制 API */
+    api: ViewControlsApi;
+    /** 显隐配置 */
+    config?: FloorMapControlsConfig;
+    /** 当前缩放比例（1 = 100%），用于 Stepper 展示 */
+    scale?: number;
+    className?: string;
+}
+export declare function ViewControls(props: ViewControlsProps): JSX.Element;
+export default ViewControls;

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

@@ -0,0 +1,59 @@
+/**
+ * ViewControls - 内置视图控制按钮：缩放（Stepper）、复位、区域定位
+ */
+import React from 'react';
+import classNames from 'classnames';
+import { MinusOutlined, PlusOutlined } 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,
+    className = props.className;
+  var showZoom = config.showZoom !== false;
+  var showReset = config.showReset === true;
+  var showFitBounds = config.showFitBounds === true;
+  var scalePercent = Math.round(scale * 100);
+  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))), showReset && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(PREFIX, "-view-controls-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"),
+    onClick: function onClick() {
+      return api.fitBounds();
+    },
+    "aria-label": "\u533A\u57DF\u5B9A\u4F4D"
+  }, "\u229E"));
+}
+export default ViewControls;

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

@@ -0,0 +1,76 @@
+/* Figma 14131:6265：缩放在左下角；Figma 14004:1149 Stepper 样式 */
+.pisell-floor-map-layout-view-controls {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  z-index: 10;
+  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;
+  }
+
+  &-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    background: #fff;
+    cursor: pointer;
+    font-size: 18px;
+    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;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+/**
+ * 楼层图布局子组件导出
+ */
+export { MapLayer } from './MapLayer';
+export { ItemLayer } from './ItemLayer';
+export { ViewControls } from './ViewControls';
+export type { ViewControlsApi } from './ViewControls';

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

@@ -0,0 +1,6 @@
+/**
+ * 楼层图布局子组件导出
+ */
+export { MapLayer } from "./MapLayer";
+export { ItemLayer } from "./ItemLayer";
+export { ViewControls } from "./ViewControls";

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

@@ -0,0 +1,6 @@
+/**
+ * PisellFloorMapLayout 组件入口
+ * 空间布局视图：在二维平面按坐标渲染资源，支持缩放/平移/复位
+ */
+export { PisellFloorMapLayout } from './PisellFloorMapLayout';
+export type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, FloorMapItemBase, FloorMapItemUnit, FloorMapLayerConfig, FloorMapZoomConfig, FloorMapPanConfig, FloorMapControlsConfig, FloorMapItemShape, FloorMapBackgroundType, FloorMapPanBoundary, FloorMapLayoutMode, FloorMapGridLayoutConfig, } from './types';

package/es/components/pisellFloorMapLayout/index.js

@@ -0,0 +1,5 @@
+/**
+ * PisellFloorMapLayout 组件入口
+ * 空间布局视图：在二维平面按坐标渲染资源，支持缩放/平移/复位
+ */
+export { PisellFloorMapLayout } from "./PisellFloorMapLayout";

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

@@ -0,0 +1,197 @@
+import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+/**
+ * 资源项形状
+ * @description 展示层支持的基础形状
+ */
+export declare type FloorMapItemShape = 'rect' | 'circle' | 'triangle' | 'polygon' | 'custom';
+/**
+ * 底层背景类型
+ * @description 地图底层的展示方式
+ */
+export declare type FloorMapBackgroundType = 'none' | 'color' | 'image' | 'svg';
+/**
+ * 平移边界策略
+ * @description 拖拽/手势平移时的边界行为
+ */
+export declare type FloorMapPanBoundary = 'none' | 'clamp' | 'bounce';
+/**
+ * 资源项坐标/尺寸单位
+ * - cell：x/y/width/height 为格子数，由 cellSize 转为像素
+ * - pixel：x/y/width/height 为像素
+ */
+export declare type FloorMapItemUnit = 'cell' | 'pixel';
+/**
+ * 资源项基础类型
+ * @description 每个资源至少包含 id 与坐标 (x, y)，其余由外部扩展。
+ * 单位由布局的 itemUnit 决定：cell 时为格子数，pixel 时为像素。
+ */
+export interface FloorMapItemBase {
+    /** 唯一标识 */
+    id: string;
+    /** 坐标 x（cell 时为格子索引，pixel 时为像素） */
+    x: number;
+    /** 坐标 y */
+    y: number;
+    /** 宽度（可选；cell 时为格子数，pixel 时为像素，缺省时 cell 为 1，pixel 为 cellSize） */
+    width?: number;
+    /** 高度（可选） */
+    height?: number;
+    /** 形状，默认 rect */
+    shape?: FloorMapItemShape;
+}
+/**
+ * 底层（MapLayer）配置
+ */
+export interface FloorMapLayerConfig {
+    /** 背景类型 */
+    backgroundType?: FloorMapBackgroundType;
+    /** 纯色背景时的颜色（backgroundType 为 color 时有效） */
+    backgroundColor?: string;
+    /** 图片背景 URL（backgroundType 为 image 时有效） */
+    backgroundImage?: string;
+    /** SVG 背景内容或 URL（backgroundType 为 svg 时有效） */
+    backgroundSvg?: string;
+    /** 是否显示网格线，默认 false */
+    showGrid?: boolean;
+    /** 底层内边距（如 16 或 "16px"） */
+    padding?: number | string;
+    /** 格子/元素间距 */
+    gap?: number | string;
+    /** 坐标吸附间隔（逻辑单位），0 表示不吸附 */
+    snapStep?: number;
+}
+/**
+ * 缩放配置
+ */
+export interface FloorMapZoomConfig {
+    /** 默认缩放比例，如 1 表示 100% */
+    defaultScale?: number;
+    /** 最小缩放，默认 0.5 (50%) */
+    min?: number;
+    /** 最大缩放，默认 2 (200%) */
+    max?: number;
+    /** 缩放步进，默认 0.1 (10%) */
+    step?: number;
+}
+/**
+ * 平移配置
+ */
+export interface FloorMapPanConfig {
+    /** 是否允许平移，默认 false */
+    enabled?: boolean;
+    /** 边界策略，默认 none */
+    boundary?: FloorMapPanBoundary;
+}
+/**
+ * 视图控制显隐（默认仅显示放大/缩小，复位与区域定位需配置开启）
+ */
+export interface FloorMapControlsConfig {
+    /** 是否显示缩放按钮（+ / −），默认 true */
+    showZoom?: boolean;
+    /** 是否显示复位按钮，默认 false */
+    showReset?: boolean;
+    /** 是否显示区域定位（fitBounds）按钮，默认 false */
+    showFitBounds?: boolean;
+}
+/**
+ * 布局模式（规则网格 vs 完全自由坐标）
+ */
+export declare type FloorMapLayoutMode = 'grid' | 'free';
+/**
+ * 规则网格布局配置（layoutMode 为 grid 时可用）
+ */
+export interface FloorMapGridLayoutConfig {
+    /** 每行列数 */
+    columns?: number;
+}
+/**
+ * PisellFloorMapLayout 组件 Props
+ * @template T - 资源项类型，需继承 FloorMapItemBase 或兼容 id/x/y
+ */
+export interface PisellFloorMapLayoutProps<T extends FloorMapItemBase = FloorMapItemBase> {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式（作用于最外层容器）
+     */
+    style?: CSSProperties;
+    /**
+     * 资源列表；每项至少包含 id、x、y
+     */
+    items: T[];
+    /**
+     * 每个资源项的渲染函数；内容与样式由调用方完全控制
+     */
+    renderItem: (item: T, index: number) => ReactNode;
+    /**
+     * 指定每项的唯一 key，默认使用 item.id
+     */
+    rowKey?: string | ((item: T, index: number) => string);
+    /**
+     * 底层（地图层）配置：背景、网格、padding、gap、吸附
+     */
+    mapLayer?: FloorMapLayerConfig;
+    /**
+     * 每格像素尺寸（itemUnit 为 cell 时：逻辑 1 单位对应的像素；为 pixel 时：缺省宽高的默认像素）
+     * @default 64
+     */
+    cellSize?: number;
+    /**
+     * item 坐标与尺寸单位：cell 格子数，pixel 像素
+     * @default 'cell'
+     */
+    itemUnit?: FloorMapItemUnit;
+    /**
+     * 布局模式：grid 规则网格，free 完全按坐标
+     * @default 'free'
+     */
+    layoutMode?: FloorMapLayoutMode;
+    /**
+     * 规则网格时的配置（列数等）
+     */
+    gridLayout?: FloorMapGridLayoutConfig;
+    /**
+     * 缩放配置
+     */
+    zoom?: FloorMapZoomConfig;
+    /**
+     * 平移配置
+     */
+    pan?: FloorMapPanConfig;
+    /**
+     * 视图控制按钮显隐
+     */
+    controls?: FloorMapControlsConfig;
+    /**
+     * 是否开启 hover 高亮或 hover 事件，默认 true
+     */
+    enableHover?: boolean;
+    /**
+     * 资源项点击回调
+     */
+    onItemClick?: (item: T, index: number, event: ReactMouseEvent<HTMLElement>) => void;
+    /**
+     * 资源项鼠标进入
+     */
+    onItemHover?: (item: T, index: number, event: ReactMouseEvent<HTMLElement>) => void;
+    /**
+     * 资源项鼠标离开
+     */
+    onItemLeave?: (item: T, index: number, event: ReactMouseEvent<HTMLElement>) => void;
+}
+/**
+ * PisellFloorMapLayout Ref 方法
+ * @description 供外部调用缩放、复位、区域定位等
+ */
+export interface PisellFloorMapLayoutRef {
+    /** 放大 */
+    zoomIn: () => void;
+    /** 缩小 */
+    zoomOut: () => void;
+    /** 复位到默认缩放与位置 */
+    reset: () => void;
+    /** 区域定位：使所有 items 落在视口内 */
+    fitBounds: () => void;
+}

package/es/components/pisellFloorMapLayout/types.js

@@ -0,0 +1 @@
+export {};