@pisell/materials 6.11.42 → 6.11.44

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

@@ -1,10 +1,18 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * FloorMapEditTopBar - 编辑态顶栏
  * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing`（全屏入口在左下 Dock）
  * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 扩展操作
  */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import classNames from 'classnames';
+import { Button, Modal } from 'antd';
+import { RedoHistoryIcon, UndoHistoryIcon } from "./HistoryIcons";
 import { locales } from '@pisell/utils';
 import useEngineContext from "../../../hooks/useEngineContext";
 import { initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay";
@@ -12,6 +20,13 @@ import { CanvasTabs } from "./CanvasTabs";
 import "./FloorMapEditTopBar.less";
 var PREFIX = 'pisell-floor-map-layout';
 var I18N_TB = 'pisell-floor-map-layout.edit-top-bar';
+/** 检测 macOS / iPad，决定快捷键提示用 ⌘ 还是 Ctrl */
+function detectIsMacLike() {
+  if (typeof navigator === 'undefined') return false;
+  var p = navigator.platform || '';
+  var ua = navigator.userAgent || '';
+  return /Mac|iPhone|iPad|iPod/i.test(p) || /Macintosh/i.test(ua);
+}
 export function FloorMapEditTopBar(props) {
   var _engineCtx$engine;
   var _props$mode = props.mode,
@@ -35,6 +50,14 @@ export function FloorMapEditTopBar(props) {
     canvasTabsBarTrailing = props.canvasTabsBarTrailing,
     _props$hideCanvasTabs = props.hideCanvasTabs,
     hideCanvasTabs = _props$hideCanvasTabs === void 0 ? false : _props$hideCanvasTabs,
+    onUndo = props.onUndo,
+    onRedo = props.onRedo,
+    _props$canUndo = props.canUndo,
+    canUndo = _props$canUndo === void 0 ? false : _props$canUndo,
+    _props$canRedo = props.canRedo,
+    canRedo = _props$canRedo === void 0 ? false : _props$canRedo,
+    onExitEdit = props.onExitEdit,
+    onCancelEdit = props.onCancelEdit,
     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';
@@ -44,17 +67,104 @@ export function FloorMapEditTopBar(props) {
       aria: locales.getText("".concat(I18N_TB, ".aria")),
       unsaved: locales.getText("".concat(I18N_TB, ".unsaved")),
       save: locales.getText("".concat(I18N_TB, ".save")),
-      saving: locales.getText("".concat(I18N_TB, ".saving"))
+      saving: locales.getText("".concat(I18N_TB, ".saving")),
+      undo: locales.getText("".concat(I18N_TB, ".undo")),
+      redo: locales.getText("".concat(I18N_TB, ".redo")),
+      cancelEdit: locales.getText("".concat(I18N_TB, ".cancel-edit")),
+      finishEdit: locales.getText("".concat(I18N_TB, ".finish-edit")),
+      cancelConfirmTitle: locales.getText("".concat(I18N_TB, ".cancel-confirm-title")),
+      cancelConfirmContent: locales.getText("".concat(I18N_TB, ".cancel-confirm-content")),
+      cancelConfirmOk: locales.getText("".concat(I18N_TB, ".cancel-confirm-ok")),
+      cancelConfirmCancel: locales.getText("".concat(I18N_TB, ".cancel-confirm-cancel"))
     };
   }, [engineLocale]);
+  var showHistory = Boolean(onUndo || onRedo);
+  /** 历史按钮组（撤销/重做）：full、compact 共用同一段渲染 */
+  var historyGroup = useMemo(function () {
+    if (!showHistory) return null;
+    var isMac = detectIsMacLike();
+    var cmd = isMac ? '⌘' : 'Ctrl';
+    var undoTitle = "".concat(topBarLabels.undo, " (").concat(cmd, "+Z)");
+    var redoTitle = "".concat(topBarLabels.redo, " (").concat(cmd, "+Shift+Z)");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-edit-top-bar-history"),
+      role: "group",
+      "aria-label": "".concat(topBarLabels.undo, " / ").concat(topBarLabels.redo)
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      size: "small",
+      icon: /*#__PURE__*/React.createElement(UndoHistoryIcon, null),
+      disabled: !canUndo,
+      onClick: onUndo,
+      "aria-label": undoTitle
+    }, topBarLabels.undo), /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      size: "small",
+      icon: /*#__PURE__*/React.createElement(RedoHistoryIcon, null),
+      disabled: !canRedo,
+      onClick: onRedo,
+      "aria-label": redoTitle
+    }, topBarLabels.redo));
+  }, [showHistory, topBarLabels.undo, topBarLabels.redo, canUndo, canRedo, onUndo, onRedo]);
 
   /** 浏览器全屏时顶栏不展示保存，改由侧栏承担（见 PisellFloorMapLayout 对 Toolbar onSave 的互斥逻辑） */
   var showSave = Boolean(onSave && config.canvasUi.canEdit) && !isFullscreen;
+  /**
+   * 业务层提供 onExitEdit 时改用「取消编辑 + 完成」组合，
+   * 此时不再展示独立的「保存」按钮（完成 = 保存 + 退出，避免冗余）。
+   */
+  var showExitGroup = Boolean(onExitEdit && config.canvasUi.canEdit);
+
+  /**
+   * 「未保存」徽章独立成一段：放到 undo / redo 左边，与「编辑历史」视觉上同属一个状态区。
+   * 触发条件保持原样：必须 layoutDirty 且当前确实有保存通道（showSave 或 showExitGroup），
+   * 否则纯阅读态出现「未保存」会让用户困惑。
+   */
+  var dirtyBadge = layoutDirty && (showExitGroup || showSave) ? /*#__PURE__*/React.createElement("span", {
+    className: "".concat(PREFIX, "-edit-top-bar-dirty-badge"),
+    role: "status",
+    "aria-live": "polite"
+  }, topBarLabels.unsaved) : null;
+
+  /**
+   * 取消编辑：layoutDirty 时弹二次确认，避免误触丢失草稿；
+   * 干净状态直接走原本的退出路径，不打扰用户。
+   * onOk 里复用「优先 onCancelEdit，回退 onExitEdit」的语义，与保存按钮链路对称。
+   *
+   * 走 {@link Modal.useModal} 拿到的实例 + 同级渲染的 `modalContextHolder`，确保：
+   * - OK 按钮颜色继承当前 ConfigProvider 主题主色（静态 `Modal.confirm` 不会继承）；
+   * - 不依赖外层是否包了 PisellConfigProvider/`App` —— 这个组件可能被低代码引擎
+   *   单独挂在画布层，并不一定有上述 Provider，原先走 `PisellModal.confirm`
+   *   会因为 `setModal` 没被调用拿到 `undefined.confirm` 直接抛错。
+   */
+  var _Modal$useModal = Modal.useModal(),
+    _Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
+    modalApi = _Modal$useModal2[0],
+    modalContextHolder = _Modal$useModal2[1];
+  var performCancel = useCallback(function () {
+    if (onCancelEdit) onCancelEdit();else onExitEdit === null || onExitEdit === void 0 || onExitEdit();
+  }, [onCancelEdit, onExitEdit]);
+  var handleCancelClick = useCallback(function () {
+    if (!layoutDirty) {
+      performCancel();
+      return;
+    }
+    modalApi.confirm({
+      title: topBarLabels.cancelConfirmTitle,
+      content: topBarLabels.cancelConfirmContent,
+      okText: topBarLabels.cancelConfirmOk,
+      cancelText: topBarLabels.cancelConfirmCancel,
+      onOk: function onOk() {
+        return performCancel();
+      },
+      autoFocusButton: 'cancel'
+    });
+  }, [layoutDirty, performCancel, modalApi, topBarLabels.cancelConfirmTitle, topBarLabels.cancelConfirmContent, topBarLabels.cancelConfirmOk, topBarLabels.cancelConfirmCancel]);
   var hasTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
-  var hasFullActions = showSave || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing;
+  var hasFullActions = showSave || showExitGroup || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing || showHistory;
   var tabsHiddenClass = hideCanvasTabs ? "".concat(PREFIX, "-edit-top-bar--tabs-hidden") : undefined;
   if (mode === 'compact') {
-    var showCompactActions = hasTrailing;
+    var showCompactActions = hasTrailing || showHistory;
     return /*#__PURE__*/React.createElement("div", {
       className: classNames("".concat(PREFIX, "-edit-top-bar"), "".concat(PREFIX, "-edit-top-bar--compact"), tabsHiddenClass, className),
       role: "toolbar",
@@ -72,7 +182,7 @@ export function FloorMapEditTopBar(props) {
       className: "".concat(PREFIX, "-edit-top-bar-canvas-tabs")
     })) : null, showCompactActions ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(PREFIX, "-edit-top-bar-actions")
-    }, canvasTabsBarTrailing) : null);
+    }, historyGroup, canvasTabsBarTrailing) : null, modalContextHolder);
   }
   if (hideCanvasTabs && !hasFullActions) {
     return null;
@@ -97,17 +207,33 @@ 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, canvasTabsBarTrailing, extraActions, showSave ? /*#__PURE__*/React.createElement("div", {
+  }, typeof saveError === 'string' ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message) : null, dirtyBadge, historyGroup, canvasTabsBarTrailing, extraActions, showExitGroup ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-edit-top-bar-save-group")
-  }, layoutDirty ? /*#__PURE__*/React.createElement("span", {
-    className: "".concat(PREFIX, "-edit-top-bar-dirty-badge"),
-    role: "status",
-    "aria-live": "polite"
-  }, topBarLabels.unsaved) : null, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(PREFIX, "-edit-top-bar-btn"),
+    disabled: saving,
+    onClick: handleCancelClick
+  }, topBarLabels.cancelEdit), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), 'primary'),
+    disabled: saving,
+    onClick: function onClick() {
+      /**
+       * 完成 = 保存 + 退出；保存按 onSave 同步触发，
+       * 即便 onSave 是异步上报也立即调 onExitEdit，
+       * 业务层若需「保存成功后再退出」可在自身 onExitEdit 内做控制。
+       */
+      onSave === null || onSave === void 0 || onSave();
+      onExitEdit === null || onExitEdit === void 0 || onExitEdit();
+    }
+  }, saving ? topBarLabels.saving : topBarLabels.finishEdit)) : showSave ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-edit-top-bar-save-group")
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: classNames("".concat(PREFIX, "-edit-top-bar-btn"), 'primary'),
     disabled: saving,
     onClick: onSave
-  }, saving ? topBarLabels.saving : topBarLabels.save)) : null) : null);
+  }, saving ? topBarLabels.saving : topBarLabels.save)) : null) : null, modalContextHolder);
 }
 export default FloorMapEditTopBar;

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.less

@@ -58,7 +58,7 @@
     text-overflow: ellipsis;
   }
 
-  /* 全屏顶栏：未保存标签在保存按钮左侧，单行对齐 */
+  /* 全屏顶栏右侧：取消 / 完成按钮组（未保存徽章已外提到 history 左侧，不再属于本组） */
 
   &-save-group {
     display: inline-flex;
@@ -67,6 +67,14 @@
     gap: 10px;
   }
 
+  /* 撤销 / 重做按钮组：作为 actions 区第一组元素显示 */
+  &-history {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
+
   &-dirty-badge {
     display: inline-flex;
     align-items: center;

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

@@ -2,10 +2,14 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function (_e) { function e(_x) { return _e.apply(this, arguments); } e.toString = function () { return _e.toString(); }; return e; }(function (e) { throw e; }), f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function (_e2) { function e(_x2) { return _e2.apply(this, arguments); } e.toString = function () { return _e2.toString(); }; return e; }(function (e) { didErr = true; err = e; }), f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
@@ -14,9 +18,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 /**
  * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
  */
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 import { Select } from 'antd';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 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";
@@ -81,6 +86,29 @@ var IMAGE_PREVIEW_SIZE = {
   width: 140,
   height: 80
 };
+
+/**
+ * 侧栏收起态偏好持久化 key（跨画布/跨业务共享，仅是个人 UI 偏好）。
+ * `1` = 收起；缺省、`0` = 展开（编辑态左侧栏默认展开）。
+ * key 迭代后不再读旧 key，首次进入为展开；用户收起/展开后会写入新偏好。
+ */
+var TOOLBAR_COLLAPSED_STORAGE_KEY = 'pisell-floor-map-layout.toolbar.leftbar-collapsed.v1';
+function readToolbarCollapsedPreference() {
+  if (typeof window === 'undefined') return false;
+  try {
+    return window.localStorage.getItem(TOOLBAR_COLLAPSED_STORAGE_KEY) === '1';
+  } catch (_unused) {
+    return false;
+  }
+}
+function writeToolbarCollapsedPreference(collapsed) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(TOOLBAR_COLLAPSED_STORAGE_KEY, collapsed ? '1' : '0');
+  } catch (_unused2) {
+    /** 隐私模式 / quota 失败时静默：UI 偏好丢失对功能无影响 */
+  }
+}
 export function FloorMapToolbar(props) {
   var config = props.config,
     dataSources = props.dataSources,
@@ -103,6 +131,26 @@ export function FloorMapToolbar(props) {
     className = props.className,
     onPaletteCardPointerDown = props.onPaletteCardPointerDown,
     consumeToolbarClickIfTouchDrag = props.consumeToolbarClickIfTouchDrag;
+
+  /**
+   * 侧栏收起 / 展开本地状态：默认展开；有持久化记录时恢复用户偏好。
+   * 收起后整个 body / footer 隐藏、容器宽度收缩到一条；
+   * 切换按钮挂在容器右边垂直居中，外突半个按钮宽度。
+   */
+  var _useState = useState(function () {
+      return readToolbarCollapsedPreference();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  useEffect(function () {
+    writeToolbarCollapsedPreference(collapsed);
+  }, [collapsed]);
+  var handleToggleCollapsed = useCallback(function () {
+    setCollapsed(function (prev) {
+      return !prev;
+    });
+  }, []);
   var paletteKinds = useMemo(function () {
     var _config$elementKinds;
     return ((_config$elementKinds = config.elementKinds) !== null && _config$elementKinds !== void 0 ? _config$elementKinds : []).filter(function (k) {
@@ -199,6 +247,11 @@ export function FloorMapToolbar(props) {
     var activeDs = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && placeMode.elementKind === k.value ? placeMode.dataSourceKey : undefined;
     var item = buildScenePreviewMergedItem(k, activeDs, size);
     var isActive = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && placeMode.elementKind === k.value;
+    /**
+     * 预览缩略图尺寸：配合 sidebar 124px 抽屉宽度。
+     * stage 92×40、placement-like 80×54、装饰类按 props.decorationPreviewSize（默认 48）。
+     * placeScale / stageScale 都基于 cellW/cellH 推导，改尺寸时缩放因子自动适配。
+     */
     var cellW = isStage ? 92 : placementLike ? 80 : decorationPreviewSize;
     var cellH = isStage ? 40 : placementLike ? 54 : decorationPreviewSize;
     var previewW = isImageKind ? IMAGE_PREVIEW_SIZE.width : placementPreviewSize.width;
@@ -333,7 +386,15 @@ export function FloorMapToolbar(props) {
     }, locales.getText("".concat(I18N_TB, ".cancel-place"))));
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(PREFIX, "-toolbar"), "".concat(PREFIX, "-toolbar-sidebar"), className)
+    className: classNames("".concat(PREFIX, "-toolbar"), "".concat(PREFIX, "-toolbar-sidebar"), collapsed && "".concat(PREFIX, "-toolbar-sidebar--collapsed"), className)
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(PREFIX, "-toolbar-collapse-handle"),
+    onClick: handleToggleCollapsed,
+    "aria-label": collapsed ? locales.getText("".concat(I18N_TB, ".expand")) : locales.getText("".concat(I18N_TB, ".collapse")),
+    title: collapsed ? locales.getText("".concat(I18N_TB, ".expand")) : locales.getText("".concat(I18N_TB, ".collapse"))
+  }, collapsed ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(LeftOutlined, null)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-toolbar-inner")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(PREFIX, "-toolbar-body")
   }, canCreate && /*#__PURE__*/React.createElement(React.Fragment, null, categories.map(function (cat) {
@@ -364,6 +425,6 @@ export function FloorMapToolbar(props) {
     className: classNames("".concat(PREFIX, "-toolbar-btn"), 'primary', _defineProperty({}, "".concat(PREFIX, "-toolbar-save-dirty"), layoutDirty)),
     disabled: saving,
     onClick: onSave
-  }, saving ? locales.getText("".concat(I18N_TB, ".saving")) : locales.getText("".concat(I18N_TB, ".save")))));
+  }, saving ? locales.getText("".concat(I18N_TB, ".saving")) : locales.getText("".concat(I18N_TB, ".save"))))));
 }
 export default FloorMapToolbar;

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -2,20 +2,108 @@
 .pisell-floor-map-layout-toolbar {
   &.pisell-floor-map-layout-toolbar-sidebar {
     position: relative;
-    width: 248px;
+    /**
+     * 中等宽度抽屉：248px → 124px。
+     * 配合 cellW/cellH（见 FloorMapToolbar.tsx）按 0.5 倍渲染，preview-cell（最大 92px）
+     * + 标准 padding（12 8）正好落在 124px 内，兼顾画布展示空间与图元预览可视性。
+     */
+    width: 124px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     background: #fff;
     border-right: 1px solid #e8e8e8;
     z-index: 10;
+    /** 收起态：只保留一条边和外突的切换按钮 */
+    transition: width 0.2s ease;
+    /**
+     * 注意：根元素必须保持 overflow: visible —— 否则下方 collapse-handle
+     * 用 right: -22px 外突的按钮会被裁掉。横向裁剪转移到 &-inner 内层做。
+     */
+
+    &.pisell-floor-map-layout-toolbar-sidebar--collapsed {
+      width: 0;
+      border-right: none;
+      /**
+       * 不再给 body/footer 设 display: none —— 让它们维持固定宽度参与动画的横向裁剪，
+       * 否则收起态切换会先 hide 后再瞬间 show，反而更容易暴露挤压的瞬间。
+       */
+    }
+  }
+
+  /**
+   * 内层容器：宽度跟随 sidebar 100% 伸缩，但用 overflow: hidden + 子元素固定宽度
+   * 把中间帧的水平挤压裁掉。这样 0→124px 展开过程中，body/footer 始终按 124px
+   * 排版，只是从右侧逐步揭开，避免文案被压成竖排。
+   */
+  &-inner {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /**
+   * 收起 / 展开按钮：固定挂在容器右边垂直居中，外突大半个按钮宽度。
+   * 124px 抽屉下整体视觉更宽松，handle 用 28×72 配合放大的箭头，
+   * 在窄边栏旁仍然显眼、易点（之前 16×48 几乎看不见，参考用户截图）。
+   * 收起态下容器宽度为 0，按钮仍能完整露出（z-index 高于地图区遮罩）。
+   */
+  &-collapse-handle {
+    position: absolute;
+    top: 50%;
+    right: -22px;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 72px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    color: #595959;
+    border: 1px solid #e8e8e8;
+    border-left: none;
+    border-radius: 0 12px 12px 0;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    z-index: 11;
+    transition: color 0.15s, background 0.15s, border-color 0.15s,
+      box-shadow 0.15s;
+
+    &:hover {
+      color: var(--fmap-primary, #1677ff);
+      background: color-mix(in srgb, var(--fmap-primary, #1677ff) 8%, #fff);
+      border-color: var(--fmap-primary, #1677ff);
+      box-shadow: 2px 0 12px rgba(22, 119, 255, 0.16);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--fmap-primary, #1677ff);
+      outline-offset: 2px;
+    }
+
+    .anticon {
+      font-size: 16px;
+      line-height: 1;
+    }
   }
 
   &-body {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 12px 10px;
+    /** 124px 抽屉下，左右各留 8px 给 preview-card 的标准 padding 兜住 92px cell */
+    padding: 12px 8px;
+    /**
+     * 写死 124px 防止展开动画过程中跟随父容器 0→124px 同步缩放，避免文案被挤成竖排。
+     * 父容器 overflow: hidden 会裁掉超出的部分，视觉上就是抽屉从右侧划出。
+     */
+    width: 124px;
+    box-sizing: border-box;
+    flex-shrink: 0;
   }
 
   &-section {
@@ -64,7 +152,8 @@
   &-preview-card {
     display: block;
     width: 100%;
-    padding: 6px;
+    /** 标准 padding 适配 124px 抽屉 + 92px cell 的尺寸预算 */
+    padding: 8px;
     text-align: center;
     background: #fafafa;
     border: 1px solid #e8e8e8;
@@ -186,11 +275,15 @@
 
   &-footer {
     flex-shrink: 0;
-    padding: 12px 10px;
+    /** 与 body 同步水平 padding，124px 抽屉下按钮宽度足够呈现 */
+    padding: 12px 8px;
     border-top: 1px solid #f0f0f0;
     display: flex;
     flex-direction: column;
     gap: 8px;
+    /** 同 body：固定 124px 防止展开动画期间被父容器宽度挤压换行 */
+    width: 124px;
+    box-sizing: border-box;
   }
 
   &-dirty-hint {

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

@@ -0,0 +1,39 @@
+/**
+ * 编辑顶栏 Undo / Redo 自定义 SVG icon。
+ *
+ * 设计来源：业务方提供的「圆勾箭头」风格 —— 整圈 ~270° 回环 + 末端三角箭头。
+ * 替换 antd 的 `UndoOutlined` / `RedoOutlined`：原版箭头偏方、回勾过短，
+ * 在 24/16px 的小尺寸下与界面其它细线 icon 不齐，且 Undo/Redo 镜像不够直观。
+ *
+ * 实现要点：
+ * - `stroke="currentColor"`、无填充：颜色完全跟随父级 `color`，与 Ant Button text 模式一致；
+ * - viewBox 14×14，配合 `font-size: 14px` 自动得到 14px icon；调用方可通过 fontSize/CSS 调整；
+ * - `stroke-linecap=round` + `stroke-linejoin=round`：在 1.5px 细线下保持圆润、抗锯齿友好；
+ * - 箭头用同色 `path` 三角，避免 marker-end 在不同浏览器下的尺寸漂移；
+ * - 接受 `className` / `style` / 其它 SVG 属性透传（与 antd icon 体感一致）。
+ */
+import React from 'react';
+declare type HistoryIconProps = React.SVGProps<SVGSVGElement> & {
+    /** 与 antd icon 类似：用于覆盖默认 1em 尺寸 */
+    size?: number | string;
+};
+/**
+ * Undo 图标：「↰」L 形带小圆角 —— 箭头在左侧水平指向左，主干由箭头水平向右、
+ * 经一个 1.5 半径的圆角折下、再竖直向下。
+ *
+ * 关于"看起来偏上"：antd `.anticon { vertical-align: -0.125em }` 已经把整个 svg
+ * 相对文字基线下移 ~0.125em，但我们的形状在 viewBox 内是几何居中的（y ∈ [3,11]），
+ * 与 antd 自家 outline icon（路径几乎铺满 viewBox）在视觉密度上不同 ——
+ * 留白对称会让人眼判断"图形在 viewBox 上半"。
+ *
+ * 解决：把形状整体下移 1 单位到 y ∈ [4, 12]，上侧留 4 / 下侧留 2，
+ * 让 icon 视觉中心匹配文字 x-height 中心，与 "Undo" 文本视觉齐平。
+ * x 仍保持 [3, 11] 居中。
+ */
+export declare function UndoHistoryIcon(props: HistoryIconProps): JSX.Element;
+/**
+ * Redo 图标：与 Undo 水平镜像，箭头在右侧指向右，干线右→左→下。
+ * 几何范围与 Undo 完全对称：x ∈ [3, 11]、y ∈ [4, 12]。
+ */
+export declare function RedoHistoryIcon(props: HistoryIconProps): JSX.Element;
+export {};

package/es/components/pisellFloorMapLayout/components/HistoryIcons.js

@@ -0,0 +1,75 @@
+var _excluded = ["size", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * 编辑顶栏 Undo / Redo 自定义 SVG icon。
+ *
+ * 设计来源：业务方提供的「圆勾箭头」风格 —— 整圈 ~270° 回环 + 末端三角箭头。
+ * 替换 antd 的 `UndoOutlined` / `RedoOutlined`：原版箭头偏方、回勾过短，
+ * 在 24/16px 的小尺寸下与界面其它细线 icon 不齐，且 Undo/Redo 镜像不够直观。
+ *
+ * 实现要点：
+ * - `stroke="currentColor"`、无填充：颜色完全跟随父级 `color`，与 Ant Button text 模式一致；
+ * - viewBox 14×14，配合 `font-size: 14px` 自动得到 14px icon；调用方可通过 fontSize/CSS 调整；
+ * - `stroke-linecap=round` + `stroke-linejoin=round`：在 1.5px 细线下保持圆润、抗锯齿友好；
+ * - 箭头用同色 `path` 三角，避免 marker-end 在不同浏览器下的尺寸漂移；
+ * - 接受 `className` / `style` / 其它 SVG 属性透传（与 antd icon 体感一致）。
+ */
+import React from 'react';
+/**
+ * 通用渲染：差异仅在 path 上，所以提取一个内核组件，
+ * Undo / Redo 各自传入自己的箭头路径。
+ */
+function HistoryIconShell(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '1em' : _ref$size,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    role: "img",
+    "aria-hidden": "true",
+    focusable: "false",
+    width: size,
+    height: size,
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), children);
+}
+
+/**
+ * Undo 图标：「↰」L 形带小圆角 —— 箭头在左侧水平指向左，主干由箭头水平向右、
+ * 经一个 1.5 半径的圆角折下、再竖直向下。
+ *
+ * 关于"看起来偏上"：antd `.anticon { vertical-align: -0.125em }` 已经把整个 svg
+ * 相对文字基线下移 ~0.125em，但我们的形状在 viewBox 内是几何居中的（y ∈ [3,11]），
+ * 与 antd 自家 outline icon（路径几乎铺满 viewBox）在视觉密度上不同 ——
+ * 留白对称会让人眼判断"图形在 viewBox 上半"。
+ *
+ * 解决：把形状整体下移 1 单位到 y ∈ [4, 12]，上侧留 4 / 下侧留 2，
+ * 让 icon 视觉中心匹配文字 x-height 中心，与 "Undo" 文本视觉齐平。
+ * x 仍保持 [3, 11] 居中。
+ */
+export function UndoHistoryIcon(props) {
+  return /*#__PURE__*/React.createElement(HistoryIconShell, props, /*#__PURE__*/React.createElement("path", {
+    d: "M3 6h6.5a1.5 1.5 0 0 1 1.5 1.5V12"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5 4 3 6l2 2"
+  }));
+}
+
+/**
+ * Redo 图标：与 Undo 水平镜像，箭头在右侧指向右，干线右→左→下。
+ * 几何范围与 Undo 完全对称：x ∈ [3, 11]、y ∈ [4, 12]。
+ */
+export function RedoHistoryIcon(props) {
+  return /*#__PURE__*/React.createElement(HistoryIconShell, props, /*#__PURE__*/React.createElement("path", {
+    d: "M11 6H4.5A1.5 1.5 0 0 0 3 7.5V12"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9 4l2 2-2 2"
+  }));
+}

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

@@ -97,9 +97,22 @@ export function ItemLayer(props) {
       passive: true
     });
   }, [onInteractionChange]);
+
+  /**
+   * 只对触屏指针拦截画布 pan：触屏在卡内纵向滑动时会和画布 pan 抢事件，
+   * 这里把 `isInteractingWithElement` 拉起来让 TransformWrapper 关掉 panning，
+   * 让原生 scroll 接管列表。
+   *
+   * 鼠标 / 触控笔（pen）不走这条路径——桌面端鼠标要可以从任意图元上按下并直接拖动画布，
+   * 否则用户会发现「只有空白处才能拖动画布」（react-zoom-pan-pinch 的鼠标 pan 走的是
+   * window 的 mousedown 监听，但 panning.disabled=true 一样会让它直接拒绝启动）。
+   *
+   * 触屏 e.button 默认为 0，不再前置 `e.button !== 0` 早返；鼠标右键此时已被 pointerType 过滤掉。
+   */
   var handleItemPointerDownCapture = useCallback(function (e) {
     var _el$closest;
-    if (!onInteractionChange || e.button !== 0) return;
+    if (!onInteractionChange) return;
+    if (e.pointerType !== 'touch') 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();

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

@@ -25,11 +25,20 @@ export interface ViewControlsProps {
     scale?: number;
     /** 当前是否处于全屏 */
     isFullscreen?: boolean;
+    /** 当前 transform 是否处于「适配视口」结果（用于按钮激活态） */
+    fitBoundsActive?: boolean;
     className?: string;
     /** 与 config.showGridToggle 联用：当前画布是否显示网格 */
     mapGridVisible?: boolean;
     /** 切换当前画布 draft 的 mapLayer.showGrid */
     onToggleMapGrid?: () => void;
+    /**
+     * 视口锁定态：true 时显示「已锁定」图标，并禁用所有改变视角的按钮
+     * （zoom +/- / reset / fitBounds）。pan / wheel / pinch 由调用方在 TransformWrapper 上同步关闭。
+     */
+    viewportLocked?: boolean;
+    /** 切换视口锁定；未传时不展示锁定按钮 */
+    onToggleViewportLock?: () => void;
     /**
      * 平面图 Dock：圆角浅底样式，默认折叠为单入口；展开后含缩放、工具、全屏与 dockExpandedTrailing
      */