@pisell/materials 1.8.23 → 1.8.25

package/lib/components/pisellFloorMapLayout/components/ViewControls.js

@@ -36,8 +36,10 @@ module.exports = __toCommonJS(ViewControls_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_icons = require("@ant-design/icons");
+var import_utils = require("@pisell/utils");
 var import_ViewControls = require("./ViewControls.less");
 var PREFIX = "pisell-floor-map-layout";
+var I18N_VC = "pisell-floor-map-layout.view-controls";
 function ViewControls(props) {
   const {
     api,
@@ -46,7 +48,10 @@ function ViewControls(props) {
     isFullscreen = false,
     className,
     mapGridVisible = false,
-    onToggleMapGrid
+    onToggleMapGrid,
+    dockChrome = false,
+    dockExpandedTrailing,
+    autoCollapseDockMs = 1e4
   } = props;
   const showZoom = config.showZoom !== false;
   const showReset = config.showReset === true;
@@ -54,44 +59,92 @@ function ViewControls(props) {
   const showFullscreen = config.showFullscreen === true;
   const showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === "function";
   const scalePercent = Math.round(scale * 100);
-  const showToolsCapsule = showReset || showFitBounds || showFullscreen || showGridToggle;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className) }, showZoom && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-zoom-stepper` }, /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      type: "button",
-      className: `${PREFIX}-view-controls-zoom-stepper-btn`,
-      onClick: () => api.zoomOut(),
-      "aria-label": "缩小"
+  const showTools = showReset || showFitBounds || showFullscreen || showGridToggle;
+  const hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
+  const dockHasExpandable = dockChrome && (showTools || hasTrailingSlot);
+  const showBar = showZoom || showTools || dockChrome && hasTrailingSlot;
+  const [dockExpanded, setDockExpanded] = (0, import_react.useState)(false);
+  const [dockPanelMounted, setDockPanelMounted] = (0, import_react.useState)(false);
+  const dockExpandedRef = (0, import_react.useRef)(dockExpanded);
+  dockExpandedRef.current = dockExpanded;
+  const idleTimerRef = (0, import_react.useRef)(null);
+  const clearIdleTimer = (0, import_react.useCallback)(() => {
+    if (idleTimerRef.current != null) {
+      clearTimeout(idleTimerRef.current);
+      idleTimerRef.current = null;
+    }
+  }, []);
+  const scheduleDockCollapse = (0, import_react.useCallback)(() => {
+    clearIdleTimer();
+    if (!dockChrome || !dockHasExpandable || !dockExpanded || autoCollapseDockMs <= 0) {
+      return;
+    }
+    idleTimerRef.current = setTimeout(() => {
+      setDockExpanded(false);
+      idleTimerRef.current = null;
+    }, autoCollapseDockMs);
+  }, [
+    dockChrome,
+    dockHasExpandable,
+    dockExpanded,
+    autoCollapseDockMs,
+    clearIdleTimer
+  ]);
+  (0, import_react.useEffect)(() => {
+    return () => clearIdleTimer();
+  }, [clearIdleTimer]);
+  (0, import_react.useEffect)(() => {
+    if (dockExpanded && dockHasExpandable) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, dockHasExpandable, scheduleDockCollapse]);
+  const handleDockSlideTransitionEnd = (0, import_react.useCallback)(
+    (e) => {
+      if (e.propertyName !== "max-width" || e.target !== e.currentTarget) {
+        return;
+      }
+      if (!dockExpandedRef.current) {
+        setDockPanelMounted(false);
+      }
     },
-    /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
-  ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-stepper-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      type: "button",
-      className: `${PREFIX}-view-controls-zoom-stepper-btn`,
-      onClick: () => api.zoomIn(),
-      "aria-label": "放大"
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
-  )), showToolsCapsule && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-tools-capsule` }, showReset && /* @__PURE__ */ import_react.default.createElement(
+    []
+  );
+  const handleDockExpand = (0, import_react.useCallback)(() => {
+    setDockPanelMounted(true);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setDockExpanded(true);
+      });
+    });
+  }, []);
+  const handleDockCollapseClick = (0, import_react.useCallback)(() => {
+    clearIdleTimer();
+    setDockExpanded(false);
+  }, [clearIdleTimer]);
+  const handleDockBarPointerDown = (0, import_react.useCallback)(() => {
+    if (dockExpanded && autoCollapseDockMs > 0) {
+      scheduleDockCollapse();
+    }
+  }, [dockExpanded, autoCollapseDockMs, scheduleDockCollapse]);
+  const renderToolButtons = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showReset ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
       className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.resetTransform(),
-      "aria-label": "复位"
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.reset-aria`)
     },
-    "⟲"
-  ), showFitBounds && api.fitBounds && /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_icons.ReloadOutlined, null)
+  ) : null, showFitBounds && api.fitBounds ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
       className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.fitBounds(),
-      "aria-label": "区域定位"
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.fit-bounds-aria`)
     },
-    "⊞"
-  ), showGridToggle && /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_icons.ExpandOutlined, null)
+  ) : null, showGridToggle ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
@@ -100,19 +153,147 @@ function ViewControls(props) {
       }),
       onClick: () => onToggleMapGrid(),
       "aria-pressed": mapGridVisible,
-      "aria-label": mapGridVisible ? "隐藏网格" : "显示网格"
+      "aria-label": import_utils.locales.getText(
+        mapGridVisible ? `${I18N_VC}.grid-hide-aria` : `${I18N_VC}.grid-show-aria`
+      )
     },
     /* @__PURE__ */ import_react.default.createElement(import_icons.BorderInnerOutlined, null)
-  ), showFullscreen && api.toggleFullscreen && /* @__PURE__ */ import_react.default.createElement(
+  ) : null, showFullscreen && api.toggleFullscreen ? /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
       className: `${PREFIX}-view-controls-tool-btn`,
       onClick: () => api.toggleFullscreen(),
-      "aria-label": isFullscreen ? "退出全屏" : "全屏"
+      "aria-label": import_utils.locales.getText(
+        isFullscreen ? `${I18N_VC}.fullscreen-exit-aria` : `${I18N_VC}.fullscreen-aria`
+      )
     },
     isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
-  )));
+  ) : null);
+  const renderDockExpandableBarContents = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showZoom ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: () => api.zoomOut(),
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
+  ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: () => api.zoomIn(),
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
+  )) : null, showZoom && (showTools || hasTrailingSlot) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-bar-divider`, "aria-hidden": true }) : null, showTools ? renderToolButtons() : null, hasTrailingSlot ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-trailing` }, dockExpandedTrailing) : null, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-tool-btn`,
+      onClick: handleDockCollapseClick,
+      "aria-expanded": dockExpanded,
+      "aria-label": import_utils.locales.getText(`${I18N_VC}.collapse-tools-aria`)
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
+  ));
+  if (!showBar) {
+    return null;
+  }
+  if (dockChrome && dockHasExpandable) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          `${PREFIX}-view-controls`,
+          `${PREFIX}-view-controls--dock`,
+          className
+        )
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-dock-row` }, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: (0, import_classnames.default)(`${PREFIX}-view-controls-dock-expand-btn`, {
+            [`${PREFIX}-view-controls-dock-expand-btn--panel-open`]: dockExpanded
+          }),
+          onClick: handleDockExpand,
+          "aria-expanded": dockExpanded,
+          "aria-hidden": dockExpanded,
+          tabIndex: dockExpanded ? -1 : 0,
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.expand-tools-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
+      ), dockPanelMounted ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)(`${PREFIX}-view-controls-dock-slide`, {
+            [`${PREFIX}-view-controls-dock-slide--open`]: dockExpanded
+          }),
+          onTransitionEnd: handleDockSlideTransitionEnd
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              `${PREFIX}-view-controls-bar`,
+              `${PREFIX}-view-controls-bar--dock`
+            ),
+            role: "group",
+            onPointerDown: handleDockBarPointerDown
+          },
+          renderDockExpandableBarContents()
+        )
+      ) : null)
+    );
+  }
+  const barClass = (0, import_classnames.default)(`${PREFIX}-view-controls-bar`, {
+    [`${PREFIX}-view-controls-bar--dock`]: dockChrome
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className, {
+        [`${PREFIX}-view-controls--dock`]: dockChrome
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: barClass,
+        role: "group",
+        onPointerDown: dockChrome ? handleDockBarPointerDown : void 0
+      },
+      showZoom ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: `${PREFIX}-view-controls-tool-btn`,
+          onClick: () => api.zoomOut(),
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-out-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
+      ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: `${PREFIX}-view-controls-tool-btn`,
+          onClick: () => api.zoomIn(),
+          "aria-label": import_utils.locales.getText(`${I18N_VC}.zoom-in-aria`)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
+      )) : null,
+      !dockChrome && showTools ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showZoom ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${PREFIX}-view-controls-bar-divider`,
+          "aria-hidden": true
+        }
+      ) : null, renderToolButtons()) : null
+    )
+  );
 }
 var ViewControls_default = ViewControls;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/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/lib/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/lib/components/pisellFloorMapLayout/components/ViewControlsWithZoom.js

@@ -55,7 +55,10 @@ 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
     }
   );
 }