@pisell/materials 1.8.23 → 1.8.25

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

@@ -2,14 +2,24 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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 _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; }
 /**
- * ViewControls - 内置视图控制按钮：缩放（Stepper）、复位、区域定位
+ * ViewControls - 内置视图控制：默认仅缩放；可选复位、区域定位、全屏等
+ * 平面图（dockChrome）：Dock 折叠入口 + 展开条（含业务插槽、空闲自动收起）
+ * 非平面图：单条横栏，缩放与工具始终同排（无 Menu 折叠）
  */
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { MinusOutlined, PlusOutlined, FullscreenOutlined, FullscreenExitOutlined, BorderInnerOutlined } from '@ant-design/icons';
+import { MinusOutlined, PlusOutlined, FullscreenOutlined, FullscreenExitOutlined, BorderInnerOutlined, LeftOutlined, RightOutlined, ReloadOutlined, ExpandOutlined } from '@ant-design/icons';
+import { locales } from '@pisell/utils';
 import "./ViewControls.less";
 var PREFIX = 'pisell-floor-map-layout';
+var I18N_VC = 'pisell-floor-map-layout.view-controls';
 
 /** 从 react-zoom-pan-pinch 拿到的控制 API（由主组件传入） */
 
@@ -24,65 +34,200 @@ export function ViewControls(props) {
     className = props.className,
     _props$mapGridVisible = props.mapGridVisible,
     mapGridVisible = _props$mapGridVisible === void 0 ? false : _props$mapGridVisible,
-    onToggleMapGrid = props.onToggleMapGrid;
+    onToggleMapGrid = props.onToggleMapGrid,
+    _props$dockChrome = props.dockChrome,
+    dockChrome = _props$dockChrome === void 0 ? false : _props$dockChrome,
+    dockExpandedTrailing = props.dockExpandedTrailing,
+    _props$autoCollapseDo = props.autoCollapseDockMs,
+    autoCollapseDockMs = _props$autoCollapseDo === void 0 ? 10000 : _props$autoCollapseDo;
   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;
+  var showTools = showReset || showFitBounds || showFullscreen || showGridToggle;
+  var hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
+  var dockHasExpandable = dockChrome && (showTools || hasTrailingSlot);
+  var showBar = showZoom || showTools || dockChrome && hasTrailingSlot;
+
+  /** Dock：展开条是否拉宽（与 CSS max-width 过渡联动） */
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dockExpanded = _useState2[0],
+    setDockExpanded = _useState2[1];
+  /** 收起动画结束后再卸载展开条，保证 max-width 能从宽缩回 0 */
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dockPanelMounted = _useState4[0],
+    setDockPanelMounted = _useState4[1];
+  var dockExpandedRef = useRef(dockExpanded);
+  dockExpandedRef.current = dockExpanded;
+  var idleTimerRef = useRef(null);
+  var clearIdleTimer = useCallback(function () {
+    if (idleTimerRef.current != null) {
+      clearTimeout(idleTimerRef.current);
+      idleTimerRef.current = null;
+    }
+  }, []);
+  var scheduleDockCollapse = useCallback(function () {
+    clearIdleTimer();
+    if (!dockChrome || !dockHasExpandable || !dockExpanded || autoCollapseDockMs <= 0) {
+      return;
+    }
+    idleTimerRef.current = setTimeout(function () {
+      setDockExpanded(false);
+      idleTimerRef.current = null;
+    }, autoCollapseDockMs);
+  }, [dockChrome, dockHasExpandable, dockExpanded, autoCollapseDockMs, clearIdleTimer]);
+  useEffect(function () {
+    return function () {
+      return clearIdleTimer();
+    };
+  }, [clearIdleTimer]);
+  useEffect(function () {
+    if (dockExpanded && dockHasExpandable) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, dockHasExpandable, scheduleDockCollapse]);
+  var handleDockSlideTransitionEnd = useCallback(function (e) {
+    if (e.propertyName !== 'max-width' || e.target !== e.currentTarget) {
+      return;
+    }
+    if (!dockExpandedRef.current) {
+      setDockPanelMounted(false);
+    }
+  }, []);
+  var handleDockExpand = useCallback(function () {
+    setDockPanelMounted(true);
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        setDockExpanded(true);
+      });
+    });
+  }, []);
+  var handleDockCollapseClick = useCallback(function () {
+    clearIdleTimer();
+    setDockExpanded(false);
+  }, [clearIdleTimer]);
+  var handleDockBarPointerDown = useCallback(function () {
+    if (dockExpanded && autoCollapseDockMs > 0) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, autoCollapseDockMs, scheduleDockCollapse]);
+  var renderToolButtons = function renderToolButtons() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showReset ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.resetTransform();
+      },
+      "aria-label": locales.getText("".concat(I18N_VC, ".reset-aria"))
+    }, /*#__PURE__*/React.createElement(ReloadOutlined, null)) : null, showFitBounds && api.fitBounds ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.fitBounds();
+      },
+      "aria-label": locales.getText("".concat(I18N_VC, ".fit-bounds-aria"))
+    }, /*#__PURE__*/React.createElement(ExpandOutlined, null)) : null, 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": locales.getText(mapGridVisible ? "".concat(I18N_VC, ".grid-hide-aria") : "".concat(I18N_VC, ".grid-show-aria"))
+    }, /*#__PURE__*/React.createElement(BorderInnerOutlined, null)) : 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": locales.getText(isFullscreen ? "".concat(I18N_VC, ".fullscreen-exit-aria") : "".concat(I18N_VC, ".fullscreen-aria"))
+    }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null)) : null);
+  };
+  var renderDockExpandableBarContents = function renderDockExpandableBarContents() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showZoom ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.zoomOut();
+      },
+      "aria-label": locales.getText("".concat(I18N_VC, ".zoom-out-aria"))
+    }, /*#__PURE__*/React.createElement(MinusOutlined, null)), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(PREFIX, "-view-controls-zoom-value")
+    }, scalePercent, "%"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: function onClick() {
+        return api.zoomIn();
+      },
+      "aria-label": locales.getText("".concat(I18N_VC, ".zoom-in-aria"))
+    }, /*#__PURE__*/React.createElement(PlusOutlined, null))) : null, showZoom && (showTools || hasTrailingSlot) ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-view-controls-bar-divider"),
+      "aria-hidden": true
+    }) : null, showTools ? renderToolButtons() : null, hasTrailingSlot ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-view-controls-dock-trailing")
+    }, dockExpandedTrailing) : null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(PREFIX, "-view-controls-tool-btn"),
+      onClick: handleDockCollapseClick,
+      "aria-expanded": dockExpanded,
+      "aria-label": locales.getText("".concat(I18N_VC, ".collapse-tools-aria"))
+    }, /*#__PURE__*/React.createElement(LeftOutlined, null)));
+  };
+  if (!showBar) {
+    return null;
+  }
+  if (dockChrome && dockHasExpandable) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-view-controls"), "".concat(PREFIX, "-view-controls--dock"), className)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "-view-controls-dock-row")
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames("".concat(PREFIX, "-view-controls-dock-expand-btn"), _defineProperty({}, "".concat(PREFIX, "-view-controls-dock-expand-btn--panel-open"), dockExpanded)),
+      onClick: handleDockExpand,
+      "aria-expanded": dockExpanded,
+      "aria-hidden": dockExpanded,
+      tabIndex: dockExpanded ? -1 : 0,
+      "aria-label": locales.getText("".concat(I18N_VC, ".expand-tools-aria"))
+    }, /*#__PURE__*/React.createElement(RightOutlined, null)), dockPanelMounted ? /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-view-controls-dock-slide"), _defineProperty({}, "".concat(PREFIX, "-view-controls-dock-slide--open"), dockExpanded)),
+      onTransitionEnd: handleDockSlideTransitionEnd
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(PREFIX, "-view-controls-bar"), "".concat(PREFIX, "-view-controls-bar--dock")),
+      role: "group",
+      onPointerDown: handleDockBarPointerDown
+    }, renderDockExpandableBarContents())) : null));
+  }
+  var barClass = classNames("".concat(PREFIX, "-view-controls-bar"), _defineProperty({}, "".concat(PREFIX, "-view-controls-bar--dock"), dockChrome));
   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", {
+    className: classNames("".concat(PREFIX, "-view-controls"), className, _defineProperty({}, "".concat(PREFIX, "-view-controls--dock"), dockChrome))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: barClass,
+    role: "group",
+    onPointerDown: dockChrome ? handleDockBarPointerDown : undefined
+  }, showZoom ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(PREFIX, "-view-controls-zoom-stepper-btn"),
+    className: "".concat(PREFIX, "-view-controls-tool-btn"),
     onClick: function onClick() {
       return api.zoomOut();
     },
-    "aria-label": "\u7F29\u5C0F"
+    "aria-label": locales.getText("".concat(I18N_VC, ".zoom-out-aria"))
   }, /*#__PURE__*/React.createElement(MinusOutlined, null)), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(PREFIX, "-view-controls-zoom-stepper-value")
+    className: "".concat(PREFIX, "-view-controls-zoom-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();
+      return api.zoomIn();
     },
-    "aria-label": isFullscreen ? '退出全屏' : '全屏'
-  }, isFullscreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null))));
+    "aria-label": locales.getText("".concat(I18N_VC, ".zoom-in-aria"))
+  }, /*#__PURE__*/React.createElement(PlusOutlined, null))) : null, !dockChrome && showTools ? /*#__PURE__*/React.createElement(React.Fragment, null, showZoom ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "-view-controls-bar-divider"),
+    "aria-hidden": true
+  }) : null, renderToolButtons()) : null));
 }
 export default ViewControls;

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

@@ -1,87 +1,106 @@
-/* Figma 14131:6265：缩放在左下角；Figma 14004:1149 Stepper 样式；z-index 保证在画布之上可点击 */
+/* 左下角：缩放 + 工具同一横条，圆角矩形（非胶囊） */
 .pisell-floor-map-layout-view-controls {
+  @vc-btn-size: 32px;
+  @vc-bar-padding-y: 1px;
+  @vc-bar-padding-x: 4px;
+  @vc-bar-height: (@vc-btn-size + 2 * @vc-bar-padding-y + 2px); /* + 上下 border */
+
   position: absolute;
   left: 12px;
   bottom: 12px;
   z-index: 20;
   pointer-events: auto;
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  /* Stepper：胶囊形 [减] 数值% [加] */
+  flex-direction: row;
+  align-items: center;
 
-  &-zoom-stepper {
+  &-bar {
     display: flex;
     align-items: center;
-    height: 56px;
-    padding: 0 4px;
+    flex-wrap: nowrap;
+    gap: 2px;
+    height: @vc-bar-height;
+    min-height: @vc-bar-height !important;
+    max-height: @vc-bar-height !important;
+    padding: @vc-bar-padding-y @vc-bar-padding-x;
+    box-sizing: border-box;
     background: #fff;
     border: 1px solid #98a2b3;
-    border-radius: 100px;
+    border-radius: 6px;
     box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
+    width: max-content;
+    max-width: 100%;
   }
 
-  &-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;
-    }
+  &-bar-divider {
+    flex-shrink: 0;
+    width: 1px;
+    height: 22px;
+    margin: 0 4px;
+    background: #e4e7ec;
+    align-self: center;
   }
 
-  &-zoom-stepper-value {
-    min-width: 56px;
-    padding: 0 8px;
+  &-zoom-value {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    min-width: 40px;
+    height: @vc-btn-size;
+    padding: 0 4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
-    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     font-weight: 600;
-    font-size: 18px;
-    line-height: 1;
+    font-size: 13px;
+    line-height: @vc-btn-size;
     color: #101828;
   }
 
-  /* 复位 / 区域定位 / 全屏 / 网格：与 Stepper 同系胶囊条 */
+  @vc-icon-px: 14px;
 
-  &-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;
+  &-bar > &-tool-btn {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: @vc-btn-size;
+    height: @vc-btn-size;
+    min-width: @vc-btn-size;
+    min-height: @vc-btn-size !important;
+    max-width: @vc-btn-size;
+    max-height: @vc-btn-size !important;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0;
+    margin: 0;
     border: none;
-    border-radius: 50%;
+    border-radius: 4px;
     background: transparent;
     cursor: pointer;
     color: #101828;
-    font-size: 20px;
+    font-size: @vc-icon-px;
     line-height: 1;
+    appearance: none;
+    vertical-align: middle;
+
+    .anticon,
+    .pisell-lowcode-icon,
+    span[role='img'] {
+      font-size: @vc-icon-px;
+      line-height: 0;
+      vertical-align: middle;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .anticon svg,
+    .pisell-lowcode-icon svg,
+    span[role='img'] svg {
+      width: @vc-icon-px;
+      height: @vc-icon-px;
+      display: block;
+    }
 
     &:hover {
       background: #f2f4f7;
@@ -89,7 +108,7 @@
     }
   }
 
-  &-tool-btn--active {
+  &-bar > &-tool-btn--active {
     background: #fff4ed;
     color: #ff692e;
 
@@ -98,4 +117,195 @@
       color: #ff692e;
     }
   }
+
+  /* —— 平面图 Dock：折叠入口与展开横条共用同一外框高度，避免切换时跳动 —— */
+  @dock-btn-size: 42px;
+  @dock-icon-px: 18px;
+  /** 折叠按钮正方形边长 = 展开条高度（含 1px 边框的 border-box） */
+  @dock-chrome-outer: 56px;
+
+  &--dock {
+    left: 14px;
+    bottom: 14px;
+
+    /** 折叠键与可伸缩展开区同一行 */
+
+    .pisell-floor-map-layout-view-controls-dock-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0;
+      min-height: 0;
+    }
+
+    /**
+     * 展开/收起：max-width 过渡（变长 / 变短），内层 bar 为 width:max-content
+     */
+
+    .pisell-floor-map-layout-view-controls-dock-slide {
+      box-sizing: border-box;
+      max-width: 0;
+      overflow: hidden;
+      min-width: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      transition: max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    .pisell-floor-map-layout-view-controls-dock-slide--open {
+      max-width: min(90vw, 720px);
+    }
+
+    .pisell-floor-map-layout-view-controls-dock-slide .pisell-floor-map-layout-view-controls-bar--dock {
+      flex-shrink: 0;
+      width: max-content;
+      max-width: none;
+    }
+
+    .pisell-floor-map-layout-view-controls-bar--dock {
+      border-radius: 14px;
+      border-color: #e8eaed;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      gap: 5px;
+      box-sizing: border-box;
+      height: @dock-chrome-outer;
+      min-height: @dock-chrome-outer !important;
+      max-height: @dock-chrome-outer !important;
+      padding: 0 12px;
+      align-items: center;
+    }
+
+    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-tool-btn {
+      width: @dock-btn-size;
+      min-width: @dock-btn-size;
+      max-width: @dock-btn-size;
+      height: @dock-btn-size;
+      min-height: @dock-btn-size !important;
+      max-height: @dock-btn-size !important;
+      border-radius: 8px;
+      font-size: @dock-icon-px;
+      line-height: 0;
+
+      .anticon,
+      .pisell-lowcode-icon,
+      span[role='img'] {
+        font-size: @dock-icon-px !important;
+        line-height: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .anticon svg,
+      .pisell-lowcode-icon svg,
+      span[role='img'] svg {
+        width: @dock-icon-px !important;
+        height: @dock-icon-px !important;
+        display: block;
+      }
+    }
+
+    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-zoom-value {
+      min-width: 50px;
+      height: @dock-btn-size;
+      line-height: @dock-btn-size;
+      font-size: 15px;
+      padding: 0 6px;
+    }
+
+    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-bar-divider {
+      height: 28px;
+      margin: 0 6px;
+    }
+  }
+
+  &-dock-expand-btn {
+    box-sizing: border-box;
+    width: @dock-chrome-outer;
+    height: @dock-chrome-outer;
+    min-width: @dock-chrome-outer;
+    min-height: @dock-chrome-outer;
+    padding: 0;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e8eaed;
+    border-radius: 14px;
+    background: #fff;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    color: #101828;
+    font-size: @dock-icon-px;
+    line-height: 0;
+    appearance: none;
+    flex-shrink: 0;
+    overflow: hidden;
+    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+    min-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+    max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.22s ease,
+    border-color 0.22s ease,
+    box-shadow 0.22s ease,
+    margin 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+
+    /** 与右侧条带同时：条带变长时入口收起为 0 宽；收起条带时入口从 0 拉回到正方形 */
+
+    &--panel-open {
+      width: 0;
+      min-width: 0;
+      max-width: 0;
+      margin: 0;
+      opacity: 0;
+      border-color: transparent;
+      box-shadow: none;
+      pointer-events: none;
+      cursor: default;
+    }
+
+    &:hover {
+      background: #f9fafb;
+    }
+
+    .anticon {
+      font-size: @dock-icon-px !important;
+      line-height: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .anticon svg {
+      width: @dock-icon-px !important;
+      height: @dock-icon-px !important;
+      display: block;
+    }
+  }
+
+  &-dock-trailing {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: 4px;
+    max-width: min(300px, 58vw);
+
+    .pisell-lowcode-btn,
+    .ant-btn {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-height: @dock-btn-size;
+      height: @dock-btn-size;
+      padding: 0 16px;
+      font-size: 14px;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pisell-floor-map-layout-view-controls--dock .pisell-floor-map-layout-view-controls-dock-slide,
+  .pisell-floor-map-layout-view-controls--dock .pisell-floor-map-layout-view-controls-dock-expand-btn {
+    transition-duration: 0.01ms;
+  }
 }

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

@@ -0,0 +1,19 @@
+/**
+ * 在 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;
+    dockChrome?: boolean;
+    dockExpandedTrailing?: React.ReactNode;
+    autoCollapseDockMs?: number;
+}
+export declare function ViewControlsWithZoom(props: ViewControlsWithZoomProps): JSX.Element;

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

@@ -24,6 +24,9 @@ export function ViewControlsWithZoom(props) {
     scale: props.scale,
     isFullscreen: props.isFullscreen,
     mapGridVisible: props.mapGridVisible,
-    onToggleMapGrid: props.onToggleMapGrid
+    onToggleMapGrid: props.onToggleMapGrid,
+    dockChrome: props.dockChrome,
+    dockExpandedTrailing: props.dockExpandedTrailing,
+    autoCollapseDockMs: props.autoCollapseDockMs
   });
 }