@pisell/materials 1.8.20 → 1.8.22

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

@@ -11,21 +11,16 @@ 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";
+import { formatDataRecordOptionLabel } from "../utils/floorMapDataRecordLabel";
 import "./FloorMapEditPanel.less";
 var PREFIX = 'pisell-floor-map-layout';
 var I18N_EP = 'pisell-floor-map-layout.edit-panel';
-function formatDataRecordOptionLabel(record) {
-  var name = record.name != null ? String(record.name) : '';
-  var status = record.status != null ? String(record.status) : '';
-  if (name && status) return "".concat(name, "\uFF08").concat(status, "\uFF09");
-  return name || String(record.id);
-}
 function resolveDataSourceRecordForm(content, ctx) {
   if (typeof content === 'function') {
     return content(ctx);
@@ -48,6 +43,7 @@ export function FloorMapEditPanel(props) {
     _props$dataSourceLabe = props.dataSourceLabels,
     dataSourceLabels = _props$dataSourceLabe === void 0 ? {} : _props$dataSourceLabe,
     layoutDraftDirty = props.layoutDraftDirty,
+    showRecordFormProp = props.showDataSourceRecordFormBlock,
     className = props.className;
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -97,9 +93,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) {
@@ -111,7 +121,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;
@@ -196,6 +208,7 @@ export function FloorMapEditPanel(props) {
   var showDataBindingSection = bindingPolicy !== 'none';
   /** 仅在实际绑定到某一行时展示「数据源记录」，避免仅选数据源、recordId 为空时误展示空表单 */
   var showDataSourceRecordBlock = hasBoundDataRecord && Boolean(binding) && (onSaveRecord != null || hasCustomRecordForm);
+  var showDataRecordEditorSection = showRecordFormProp !== false && showDataSourceRecordBlock && Boolean(binding);
   var recordFormContext = useMemo(function () {
     if (!binding) return null;
     return {
@@ -217,13 +230,70 @@ export function FloorMapEditPanel(props) {
       layoutTransformLocked: !sceneElement.layoutTransformLocked
     });
   };
+  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,
+    startY: 0,
+    startScrollTop: 0
+  });
+  var isDragScrollSurface = useCallback(function (target) {
+    if (!(target instanceof Element)) return false;
+    return !target.closest('input,textarea,button,select,.ant-select,.ant-input,[contenteditable="true"]');
+  }, []);
+  var handlePanelPointerDown = useCallback(function (e) {
+    if (!isDragScrollSurface(e.target)) return;
+    var el = panelScrollRef.current;
+    if (!el || el.scrollHeight <= el.clientHeight) return;
+    el.setPointerCapture(e.pointerId);
+    dragScrollRef.current = {
+      active: true,
+      pointerId: e.pointerId,
+      startY: e.clientY,
+      startScrollTop: el.scrollTop
+    };
+  }, [isDragScrollSurface]);
+  var handlePanelPointerMove = useCallback(function (e) {
+    var d = dragScrollRef.current;
+    if (!d.active || e.pointerId !== d.pointerId) return;
+    var el = panelScrollRef.current;
+    if (!el) return;
+    el.scrollTop = d.startScrollTop + (d.startY - e.clientY);
+  }, []);
+  var endPanelDragScroll = useCallback(function (e) {
+    var d = dragScrollRef.current;
+    if (!d.active || e.pointerId !== d.pointerId) return;
+    dragScrollRef.current = {
+      active: false,
+      pointerId: -1,
+      startY: 0,
+      startScrollTop: 0
+    };
+    try {
+      var _panelScrollRef$curre;
+      (_panelScrollRef$curre = panelScrollRef.current) === null || _panelScrollRef$curre === void 0 || _panelScrollRef$curre.releasePointerCapture(e.pointerId);
+    } catch (_unused) {
+      /* ignore */
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(PREFIX, "-edit-panel"), className)
+    ref: panelScrollRef,
+    className: classNames("".concat(PREFIX, "-edit-panel"), className),
+    onPointerDown: handlePanelPointerDown,
+    onPointerMove: handlePanelPointerMove,
+    onPointerUp: endPanelDragScroll,
+    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,
@@ -235,10 +305,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() {
@@ -251,7 +340,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,
@@ -328,11 +417,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", {
@@ -344,7 +434,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%'
     },
@@ -372,13 +462,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%'
@@ -386,8 +477,9 @@ 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 _binding$dataSourceKe2, _dataSources$key2;
       var key = (_binding$dataSourceKe2 = binding === null || binding === void 0 ? void 0 : binding.dataSourceKey) !== null && _binding$dataSourceKe2 !== void 0 ? _binding$dataSourceKe2 : allowedKeys[0];
       if (!key) return;
       if (!newId) {
@@ -404,12 +496,19 @@ export function FloorMapEditPanel(props) {
           dataSourceKey: key,
           recordId: newId
         },
-        name: row ? String((_name = row.name) !== null && _name !== void 0 ? _name : newId) : undefined
+        name: row ? String(function (_ref2, _name) {
+          var m = row.main_field;
+          if (m != null && String(m).trim() !== '') {
+            var _String$split$0$trim, _String$split$;
+            return (_String$split$0$trim = (_String$split$ = String(m).split(' ## ')[0]) === null || _String$split$ === void 0 ? void 0 : _String$split$.trim()) !== null && _String$split$0$trim !== void 0 ? _String$split$0$trim : newId;
+          }
+          return (_ref2 = (_name = row.name) !== null && _name !== void 0 ? _name : row.code) !== null && _ref2 !== void 0 ? _ref2 : newId;
+        }()) : undefined
       });
     }
   }), !hasBoundDataRecord && /*#__PURE__*/React.createElement("p", {
     className: "".concat(PREFIX, "-edit-panel-record-bind-hint")
-  }, ep.hintUnbound))), showDataSourceRecordBlock && binding && /*#__PURE__*/React.createElement("div", {
+  }, ep.hintUnbound))), showDataRecordEditorSection && binding && /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-panel-record-title")
@@ -438,7 +537,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

@@ -7,6 +7,7 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   max-height: 80vh;
   overflow-y: auto;
+  touch-action: pan-y;
 
   &-header {
     display: flex;
@@ -14,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/FloorMapEditTopBar.d.ts

@@ -1,7 +1,7 @@
 /**
  * FloorMapEditTopBar - 编辑态顶栏
- * - `mode="compact"`：画布 Tab + 全屏入口（非全屏时；保存等在侧栏）
- * - `mode="full"`：画布 Tab + 保存 + 全屏退出 + 扩展操作（全屏时）
+ * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing` + 全屏入口（非全屏；保存多在侧栏）
+ * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 全屏退出 + 扩展操作
  */
 import React from 'react';
 import type { CanvasTabsProps } from './CanvasTabs';
@@ -28,7 +28,9 @@ export interface FloorMapEditTopBarProps {
     controls?: FloorMapControlsConfig;
     /** 顶栏右侧扩展（如「区域定位」等），仅 full 模式 */
     extraActions?: React.ReactNode;
+    /** 画布 Tab 同排最右侧业务区（在「进入全屏」/「退出全屏」与保存等之前） */
+    canvasTabsBarTrailing?: React.ReactNode;
     className?: string;
 }
-export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): JSX.Element;
+export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): React.JSX.Element;
 export default FloorMapEditTopBar;

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.js

@@ -1,7 +1,7 @@
 /**
  * FloorMapEditTopBar - 编辑态顶栏
- * - `mode="compact"`：画布 Tab + 全屏入口（非全屏时；保存等在侧栏）
- * - `mode="full"`：画布 Tab + 保存 + 全屏退出 + 扩展操作（全屏时）
+ * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing` + 全屏入口（非全屏；保存多在侧栏）
+ * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 全屏退出 + 扩展操作
  */
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
@@ -36,6 +36,7 @@ export function FloorMapEditTopBar(props) {
     _props$controls = props.controls,
     controls = _props$controls === void 0 ? {} : _props$controls,
     extraActions = props.extraActions,
+    canvasTabsBarTrailing = props.canvasTabsBarTrailing,
     className = props.className;
   var engineCtx = useEngineContext();
   var engineLocale = (engineCtx === null || engineCtx === void 0 || (_engineCtx$engine = engineCtx.engine) === null || _engineCtx$engine === void 0 || (_engineCtx$engine = _engineCtx$engine.props) === null || _engineCtx$engine === void 0 ? void 0 : _engineCtx$engine.locale) || 'zh-CN';
@@ -52,13 +53,17 @@ export function FloorMapEditTopBar(props) {
       saving: locales.getText("".concat(I18N_TB, ".saving"))
     };
   }, [engineLocale]);
-  var showSave = Boolean(onSave && config.canvasUi.canEdit);
-  /** compact：右侧仅「进入全屏」 */
-  var showFullscreenEnter = mode === 'compact' && Boolean(toggleFullscreen);
+
+  /** 浏览器全屏时顶栏不展示保存，改由侧栏承担（见 PisellFloorMapLayout 对 Toolbar onSave 的互斥逻辑） */
+  var showSave = Boolean(onSave && config.canvasUi.canEdit) && !isFullscreen;
+  /** compact：有 toggle 时展示「进入全屏」 */
+  var showFullscreenEnter = Boolean(toggleFullscreen);
   /** full 模式在全屏态下展示「退出全屏」 */
   var showFullscreenExit = mode === 'full' && isFullscreen && Boolean(toggleFullscreen);
-  var hasFullActions = showSave || showFullscreenExit || Boolean(saveError) || extraActions != null && extraActions !== false;
+  var hasTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
+  var hasFullActions = showSave || showFullscreenExit || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing;
   if (mode === 'compact') {
+    var showCompactActions = hasTrailing || showFullscreenEnter;
     return /*#__PURE__*/React.createElement("div", {
       className: classNames("".concat(PREFIX, "-edit-top-bar"), className),
       role: "toolbar",
@@ -74,9 +79,9 @@ export function FloorMapEditTopBar(props) {
       onRemoveCanvas: onRemoveCanvas,
       onRenameCanvas: onRenameCanvas,
       className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
-    })), showFullscreenEnter ? /*#__PURE__*/React.createElement("div", {
+    })), showCompactActions ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-edit-top-bar-actions")
-    }, /*#__PURE__*/React.createElement("button", {
+    }, canvasTabsBarTrailing, showFullscreenEnter ? /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
       onClick: function onClick() {
@@ -84,7 +89,7 @@ export function FloorMapEditTopBar(props) {
       },
       "aria-label": topBarLabels.fsEnterAria,
       title: topBarLabels.fsEnterTitle
-    }, /*#__PURE__*/React.createElement(FullscreenOutlined, null))) : null);
+    }, /*#__PURE__*/React.createElement(FullscreenOutlined, null)) : null) : null);
   }
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(PREFIX, "-edit-top-bar"), className),
@@ -106,7 +111,7 @@ export function FloorMapEditTopBar(props) {
   }, saveError ? /*#__PURE__*/React.createElement("span", {
     className: "".concat(PREFIX, "-edit-top-bar-error"),
     title: typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message
-  }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message) : null, extraActions, showFullscreenExit ? /*#__PURE__*/React.createElement("button", {
+  }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message) : null, canvasTabsBarTrailing, extraActions, showFullscreenExit ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), "".concat(PREFIX, "-edit-top-bar-btn-ghost")),
     onClick: function onClick() {

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

@@ -1,6 +1,9 @@
-/// <reference types="react" />
+/**
+ * 平面图「图片图元」内层展示：支持 URL、object-fit 铺满；无地址或加载失败时占位
+ */
+import React from 'react';
 export interface FloorMapImageElementProps {
     imageUrl?: string;
     name?: string;
 }
-export declare function FloorMapImageElement(props: FloorMapImageElementProps): JSX.Element;
+export declare function FloorMapImageElement(props: FloorMapImageElementProps): React.JSX.Element;

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

@@ -31,5 +31,5 @@ export interface FloorMapToolbarProps {
     /** 触摸拖放结束后吞掉按钮 click，避免误触切换落点模式 */
     consumeToolbarClickIfTouchDrag?: () => boolean;
 }
-export declare function FloorMapToolbar(props: FloorMapToolbarProps): JSX.Element;
+export declare function FloorMapToolbar(props: FloorMapToolbarProps): React.JSX.Element;
 export default FloorMapToolbar;

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

@@ -20,6 +20,7 @@ import { Select } from 'antd';
 import { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types";
 import { resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils";
 import { FLOOR_MAP_PALETTE_DRAG_MIME } from "../utils/floorMapDropUtils";
+import { formatDataRecordOptionLabel } from "../utils/floorMapDataRecordLabel";
 import "./FloorMapToolbar.less";
 var PREFIX = 'pisell-floor-map-layout';
 var DEFAULT_PLACEMENT_SIZE = {
@@ -27,12 +28,6 @@ var DEFAULT_PLACEMENT_SIZE = {
   height: 120
 };
 var DEFAULT_DECORATION_SIZE = 48;
-function formatDataRecordOptionLabel(record) {
-  var name = record.name != null ? String(record.name) : '';
-  var status = record.status != null ? String(record.status) : '';
-  if (name && status) return "".concat(name, "\uFF08").concat(status, "\uFF09");
-  return name || String(record.id);
-}
 function getUnplacedRecordsForKey(dataSourceKey, dataSources, elements) {
   var _dataSources$dataSour;
   var used = new Set(elements.filter(function (e) {
@@ -173,12 +168,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 +208,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 +275,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 +293,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 +307,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/ItemLayer.d.ts

@@ -39,5 +39,5 @@ export interface ItemLayerProps<T extends FloorMapItemBase> {
     getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
     className?: string;
 }
-export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): JSX.Element;
+export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): React.JSX.Element;
 export default ItemLayer;

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

@@ -23,5 +23,5 @@ export interface MapLayerProps {
     /** 自定义类名 */
     className?: string;
 }
-export declare function MapLayer(props: MapLayerProps): JSX.Element;
+export declare function MapLayer(props: MapLayerProps): React.JSX.Element;
 export default MapLayer;

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

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**
+ * ViewControls - 内置视图控制按钮：缩放（Stepper）、复位、区域定位
+ */
+import React from 'react';
 import type { FloorMapControlsConfig } from '../types';
 import './ViewControls.less';
 /** 从 react-zoom-pan-pinch 拿到的控制 API（由主组件传入） */
@@ -21,6 +24,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 declare function ViewControls(props: ViewControlsProps): React.JSX.Element;
 export default ViewControls;