@pisell/materials 1.8.38 → 1.8.41

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { locales } from "@pisell/utils";
-import { BorderInnerOutlined, ExpandOutlined, FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, LockOutlined, MinusOutlined, PlusOutlined, ReloadOutlined, RightOutlined, UnlockOutlined } from "@ant-design/icons";
+import { BorderInnerOutlined, ExpandOutlined, FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, MinusOutlined, PlusOutlined, ReloadOutlined, RightOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import "./ViewControls.less";
 //#region src/components/pisellFloorMapLayout/components/ViewControls.tsx
@@ -13,30 +13,26 @@ const PREFIX = "pisell-floor-map-layout";
 const I18N_VC = "pisell-floor-map-layout.view-controls";
 function ViewControls(props) {
 	var _config$horizontalAli;
-	const { api, config = {}, scale = 1, isFullscreen = false, fitBoundsActive = false, className, mapGridVisible = false, onToggleMapGrid, viewportLocked = false, onToggleViewportLock, dockChrome = false, dockExpandedToolButtons, dockExpandedTrailing, autoCollapseDockMs = 1e4 } = props;
+	const { api, config = {}, scale = 1, isFullscreen = false, className, mapGridVisible = false, onToggleMapGrid, dockChrome = false, dockExpandedTrailing, autoCollapseDockMs = 1e4 } = props;
 	const showZoom = config.showZoom !== false;
 	const showReset = config.showReset === true;
 	const showFitBounds = config.showFitBounds === true;
 	const showFullscreen = config.showFullscreen === true;
 	const showGridToggle = config.showGridToggle === true && typeof onToggleMapGrid === "function";
-	const showViewportLock = config.showViewportLock === true && typeof onToggleViewportLock === "function";
-	/**
-	* `horizontalAlign` 仅作用于非 dockChrome 的普通横条（决定贴左下还是右下）。
-	* dockChrome（平面图）模式已统一固定在屏右下，不再读这个配置。
-	*/
 	const horizontalAlign = (_config$horizontalAli = config.horizontalAlign) !== null && _config$horizontalAli !== void 0 ? _config$horizontalAli : "start";
+	/** 右下 Dock：`row-reverse` 后入口在屏缘右侧，箭头与左下镜像（展开朝内左、收起朝外右） */
+	const isDockAlignEnd = horizontalAlign === "end";
 	const scalePercent = Math.round(scale * 100);
-	const showTools = showReset || showFitBounds || showFullscreen || showGridToggle || showViewportLock;
-	const hasDockToolButtons = dockExpandedToolButtons != null && dockExpandedToolButtons !== false;
+	const showTools = showReset || showFitBounds || showFullscreen || showGridToggle;
 	const hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
-	const dockHasExpandable = dockChrome && (showTools || hasDockToolButtons || hasTrailingSlot);
-	const showBar = showZoom || showTools || dockChrome && (hasDockToolButtons || hasTrailingSlot);
-	/**
-	* Dock：展开条是否拉宽（与 CSS max-width 过渡联动）。
-	* dockChrome 下 slide 内嵌合并 toggle 按钮，slide 始终 mounted；
-	* 折叠态 max-width 仅露 toggle 宽，展开态拉满。
-	*/
+	const dockHasExpandable = dockChrome && (showTools || hasTrailingSlot);
+	const showBar = showZoom || showTools || dockChrome && hasTrailingSlot;
+	/** Dock：展开条是否拉宽（与 CSS max-width 过渡联动） */
 	const [dockExpanded, setDockExpanded] = useState(false);
+	/** 收起动画结束后再卸载展开条，保证 max-width 能从宽缩回 0 */
+	const [dockPanelMounted, setDockPanelMounted] = useState(false);
+	const dockExpandedRef = useRef(dockExpanded);
+	dockExpandedRef.current = dockExpanded;
 	const idleTimerRef = useRef(null);
 	const clearIdleTimer = useCallback(() => {
 		if (idleTimerRef.current != null) {
@@ -68,8 +64,17 @@ function ViewControls(props) {
 		dockHasExpandable,
 		scheduleDockCollapse
 	]);
+	const handleDockSlideTransitionEnd = useCallback((e) => {
+		if (e.propertyName !== "max-width" || e.target !== e.currentTarget) return;
+		if (!dockExpandedRef.current) setDockPanelMounted(false);
+	}, []);
 	const handleDockExpand = useCallback(() => {
-		setDockExpanded(true);
+		setDockPanelMounted(true);
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				setDockExpanded(true);
+			});
+		});
 	}, []);
 	const handleDockCollapseClick = useCallback(() => {
 		clearIdleTimer();
@@ -82,120 +87,65 @@ function ViewControls(props) {
 		autoCollapseDockMs,
 		scheduleDockCollapse
 	]);
-	/**
-	* dockChrome 下「锁 / 全览」常驻在 `dock-collapsed-extras` 屏右缘，展开条内不再重复渲染。
-	* 非 dockChrome 普通横条不省略，所有按钮顺排。
-	*/
-	const renderToolButtons = (opts) => {
-		const omitLock = (opts === null || opts === void 0 ? void 0 : opts.omitViewportLock) === true;
-		const omitFit = (opts === null || opts === void 0 ? void 0 : opts.omitFitBounds) === true;
-		return /* @__PURE__ */ React.createElement(React.Fragment, null, showReset ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: `${PREFIX}-view-controls-tool-btn`,
-			onClick: () => api.resetTransform(),
-			disabled: viewportLocked,
-			"aria-disabled": viewportLocked,
-			"aria-label": locales.getText(`${I18N_VC}.reset-aria`)
-		}, /* @__PURE__ */ React.createElement(ReloadOutlined, null)) : null, showFitBounds && api.fitBounds && !omitFit ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: classNames(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: fitBoundsActive }),
-			onClick: () => api.fitBounds(),
-			disabled: viewportLocked,
-			"aria-disabled": viewportLocked,
-			"aria-pressed": fitBoundsActive,
-			"aria-label": locales.getText(`${I18N_VC}.fit-bounds-aria`)
-		}, /* @__PURE__ */ React.createElement(ExpandOutlined, null)) : null, showGridToggle ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: classNames(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: mapGridVisible }),
-			onClick: () => onToggleMapGrid(),
-			"aria-pressed": mapGridVisible,
-			"aria-label": locales.getText(mapGridVisible ? `${I18N_VC}.grid-hide-aria` : `${I18N_VC}.grid-show-aria`)
-		}, /* @__PURE__ */ React.createElement(BorderInnerOutlined, null)) : null, showViewportLock && !omitLock ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: classNames(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: viewportLocked }),
-			onClick: () => onToggleViewportLock(),
-			"aria-pressed": viewportLocked,
-			"aria-label": locales.getText(viewportLocked ? `${I18N_VC}.viewport-unlock-aria` : `${I18N_VC}.viewport-lock-aria`),
-			title: locales.getText(viewportLocked ? `${I18N_VC}.viewport-unlock-aria` : `${I18N_VC}.viewport-lock-aria`)
-		}, viewportLocked ? /* @__PURE__ */ React.createElement(LockOutlined, null) : /* @__PURE__ */ React.createElement(UnlockOutlined, null)) : null, showFullscreen && api.toggleFullscreen ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: classNames(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: isFullscreen }),
-			onClick: () => api.toggleFullscreen(),
-			"aria-pressed": isFullscreen,
-			"aria-label": locales.getText(isFullscreen ? `${I18N_VC}.fullscreen-exit-aria` : `${I18N_VC}.fullscreen-aria`)
-		}, isFullscreen ? /* @__PURE__ */ React.createElement(FullscreenExitOutlined, null) : /* @__PURE__ */ React.createElement(FullscreenOutlined, null)) : null);
-	};
-	/**
-	* dockChrome 展开条内的「工具区」按钮：锁 / 全览 已常驻在 `dock-collapsed-extras` 屏右缘，
-	* 展开条内不再重复渲染，避免冗余。
-	*/
-	const dockExpandedBarHasToolButtons = showReset || showGridToggle || showFullscreen && Boolean(api.toggleFullscreen);
-	/**
-	* dockChrome 合并入口：同一个 toggle 按钮承担展开/收起，常驻在 slide 内最左端。
-	* - 折叠态：箭头朝左，点一下展开（slide 由 toggle 宽撑成 max-width）；
-	* - 展开态：箭头朝右，点一下收起；toggle 跟随 slide max-width 收缩"被推回"右侧屏缘。
-	* 主题色样式（紫底白 icon）由 `dock-toggle-btn` 类提供。
-	*/
-	const renderDockToggleButton = () => /* @__PURE__ */ React.createElement("button", {
+	const renderToolButtons = () => /* @__PURE__ */ React.createElement(React.Fragment, null, showReset ? /* @__PURE__ */ React.createElement("button", {
 		type: "button",
-		className: classNames(`${PREFIX}-view-controls-dock-toggle-btn`, { [`${PREFIX}-view-controls-dock-toggle-btn--panel-open`]: dockExpanded }),
-		onClick: dockExpanded ? handleDockCollapseClick : handleDockExpand,
-		"aria-expanded": dockExpanded,
-		"aria-label": locales.getText(dockExpanded ? `${I18N_VC}.collapse-tools-aria` : `${I18N_VC}.expand-tools-aria`)
-	}, dockExpanded ? /* @__PURE__ */ React.createElement(RightOutlined, null) : /* @__PURE__ */ React.createElement(LeftOutlined, null));
-	const renderDockExpandableBarContents = () => /* @__PURE__ */ React.createElement(React.Fragment, null, renderDockToggleButton(), showZoom ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", {
+		className: `${PREFIX}-view-controls-tool-btn`,
+		onClick: () => api.resetTransform(),
+		"aria-label": locales.getText(`${I18N_VC}.reset-aria`)
+	}, /* @__PURE__ */ React.createElement(ReloadOutlined, null)) : null, showFitBounds && api.fitBounds ? /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `${PREFIX}-view-controls-tool-btn`,
+		onClick: () => api.fitBounds(),
+		"aria-label": locales.getText(`${I18N_VC}.fit-bounds-aria`)
+	}, /* @__PURE__ */ React.createElement(ExpandOutlined, null)) : null, showGridToggle ? /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: classNames(`${PREFIX}-view-controls-tool-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: mapGridVisible }),
+		onClick: () => onToggleMapGrid(),
+		"aria-pressed": mapGridVisible,
+		"aria-label": locales.getText(mapGridVisible ? `${I18N_VC}.grid-hide-aria` : `${I18N_VC}.grid-show-aria`)
+	}, /* @__PURE__ */ React.createElement(BorderInnerOutlined, null)) : null, showFullscreen && api.toggleFullscreen ? /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `${PREFIX}-view-controls-tool-btn`,
+		onClick: () => api.toggleFullscreen(),
+		"aria-label": locales.getText(isFullscreen ? `${I18N_VC}.fullscreen-exit-aria` : `${I18N_VC}.fullscreen-aria`)
+	}, isFullscreen ? /* @__PURE__ */ React.createElement(FullscreenExitOutlined, null) : /* @__PURE__ */ React.createElement(FullscreenOutlined, null)) : null);
+	const renderDockExpandableBarContents = () => /* @__PURE__ */ React.createElement(React.Fragment, null, showZoom ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", {
 		type: "button",
 		className: `${PREFIX}-view-controls-tool-btn`,
 		onClick: () => api.zoomOut(),
-		disabled: viewportLocked,
-		"aria-disabled": viewportLocked,
 		"aria-label": locales.getText(`${I18N_VC}.zoom-out-aria`)
 	}, /* @__PURE__ */ React.createElement(MinusOutlined, null)), /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ React.createElement("button", {
 		type: "button",
 		className: `${PREFIX}-view-controls-tool-btn`,
 		onClick: () => api.zoomIn(),
-		disabled: viewportLocked,
-		"aria-disabled": viewportLocked,
 		"aria-label": locales.getText(`${I18N_VC}.zoom-in-aria`)
-	}, /* @__PURE__ */ React.createElement(PlusOutlined, null))) : null, showZoom && (dockExpandedBarHasToolButtons || hasDockToolButtons || hasTrailingSlot) ? /* @__PURE__ */ React.createElement("div", {
+	}, /* @__PURE__ */ React.createElement(PlusOutlined, null))) : null, showZoom && (showTools || hasTrailingSlot) ? /* @__PURE__ */ React.createElement("div", {
 		className: `${PREFIX}-view-controls-bar-divider`,
 		"aria-hidden": true
-	}) : null, dockExpandedBarHasToolButtons ? renderToolButtons({
-		omitViewportLock: true,
-		omitFitBounds: true
-	}) : null, hasDockToolButtons ? dockExpandedToolButtons : null, hasTrailingSlot ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-view-controls-dock-trailing` }, dockExpandedTrailing) : null);
+	}) : null, showTools ? renderToolButtons() : null, hasTrailingSlot ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-view-controls-dock-trailing` }, dockExpandedTrailing) : null, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `${PREFIX}-view-controls-tool-btn`,
+		onClick: handleDockCollapseClick,
+		"aria-expanded": dockExpanded,
+		"aria-label": locales.getText(`${I18N_VC}.collapse-tools-aria`)
+	}, isDockAlignEnd ? /* @__PURE__ */ React.createElement(RightOutlined, null) : /* @__PURE__ */ React.createElement(LeftOutlined, null)));
 	if (!showBar) return null;
-	/**
-	* dockChrome 屏右缘常驻按钮：「锁 / 全览」。两者都是单击操作，与展开条解耦。
-	* dockChrome 模式下 extras 与 slide 共用同一外壳，无 panel-open 收起行为。
-	*/
-	const renderDockCollapsedExtras = () => {
-		const showLockChip = showViewportLock;
-		const showFitChip = showFitBounds && Boolean(api.fitBounds);
-		if (!showLockChip && !showFitChip) return null;
-		return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-view-controls-dock-collapsed-extras` }, showLockChip ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: classNames(`${PREFIX}-view-controls-tool-btn`, `${PREFIX}-view-controls-dock-collapsed-extras-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: viewportLocked }),
-			onClick: () => onToggleViewportLock(),
-			"aria-pressed": viewportLocked,
-			"aria-label": locales.getText(viewportLocked ? `${I18N_VC}.viewport-unlock-aria` : `${I18N_VC}.viewport-lock-aria`),
-			title: locales.getText(viewportLocked ? `${I18N_VC}.viewport-unlock-aria` : `${I18N_VC}.viewport-lock-aria`)
-		}, viewportLocked ? /* @__PURE__ */ React.createElement(LockOutlined, null) : /* @__PURE__ */ React.createElement(UnlockOutlined, null)) : null, showFitChip ? /* @__PURE__ */ React.createElement("button", {
-			type: "button",
-			className: classNames(`${PREFIX}-view-controls-tool-btn`, `${PREFIX}-view-controls-dock-collapsed-extras-btn`, { [`${PREFIX}-view-controls-tool-btn--active`]: fitBoundsActive }),
-			onClick: () => api.fitBounds(),
-			disabled: viewportLocked,
-			"aria-disabled": viewportLocked,
-			"aria-pressed": fitBoundsActive,
-			"aria-label": locales.getText(`${I18N_VC}.fit-bounds-aria`),
-			title: locales.getText(`${I18N_VC}.fit-bounds-aria`)
-		}, /* @__PURE__ */ React.createElement(ExpandOutlined, null)) : null);
-	};
-	if (dockChrome && dockHasExpandable) return /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-view-controls`, `${PREFIX}-view-controls--dock`, `${PREFIX}-view-controls--align-end`, className) }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-view-controls-dock-row` }, renderDockCollapsedExtras(), /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-view-controls-dock-slide`, { [`${PREFIX}-view-controls-dock-slide--open`]: dockExpanded }) }, /* @__PURE__ */ React.createElement("div", {
+	if (dockChrome && dockHasExpandable) return /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-view-controls`, `${PREFIX}-view-controls--dock`, horizontalAlign === "end" && `${PREFIX}-view-controls--align-end`, className) }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-view-controls-dock-row` }, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: classNames(`${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": locales.getText(`${I18N_VC}.expand-tools-aria`)
+	}, isDockAlignEnd ? /* @__PURE__ */ React.createElement(LeftOutlined, null) : /* @__PURE__ */ React.createElement(RightOutlined, null)), dockPanelMounted ? /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${PREFIX}-view-controls-dock-slide`, { [`${PREFIX}-view-controls-dock-slide--open`]: dockExpanded }),
+		onTransitionEnd: handleDockSlideTransitionEnd
+	}, /* @__PURE__ */ React.createElement("div", {
 		className: classNames(`${PREFIX}-view-controls-bar`, `${PREFIX}-view-controls-bar--dock`),
 		role: "group",
 		onPointerDown: handleDockBarPointerDown
-	}, renderDockExpandableBarContents()))));
+	}, renderDockExpandableBarContents())) : null));
 	const barClass = classNames(`${PREFIX}-view-controls-bar`, { [`${PREFIX}-view-controls-bar--dock`]: dockChrome });
 	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-view-controls`, className, {
 		[`${PREFIX}-view-controls--dock`]: dockChrome,
@@ -208,15 +158,11 @@ function ViewControls(props) {
 		type: "button",
 		className: `${PREFIX}-view-controls-tool-btn`,
 		onClick: () => api.zoomOut(),
-		disabled: viewportLocked,
-		"aria-disabled": viewportLocked,
 		"aria-label": locales.getText(`${I18N_VC}.zoom-out-aria`)
 	}, /* @__PURE__ */ React.createElement(MinusOutlined, null)), /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-view-controls-zoom-value` }, scalePercent, "%"), /* @__PURE__ */ React.createElement("button", {
 		type: "button",
 		className: `${PREFIX}-view-controls-tool-btn`,
 		onClick: () => api.zoomIn(),
-		disabled: viewportLocked,
-		"aria-disabled": viewportLocked,
 		"aria-label": locales.getText(`${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: `${PREFIX}-view-controls-bar-divider`,

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

@@ -111,60 +111,23 @@
       background: #f2f4f7;
       color: #101828;
     }
-
-    /**
-     * 视口锁定时：zoom +/- / reset / fit-bounds 等改变视角的按钮 disabled。
-     * 给出灰态 + 禁用 hover 反馈，避免点击但实际拒绝带来的迷惑感。
-     */
-    &:disabled,
-    &[aria-disabled='true'] {
-      cursor: not-allowed;
-      color: #d0d5dd;
-      background: transparent;
-    }
-
-    &:disabled:hover,
-    &[aria-disabled='true']:hover {
-      background: transparent;
-      color: #d0d5dd;
-    }
   }
 
-  /**
-   * 工具按钮激活态（展开条内与外侧折叠 pill 共用同一套色值）。
-   * 主色链：`--color-primary`（与主色展开键、业务 HUD 一致）→ `--fmap-primary`（PisellFloorMapLayout 注入）
-   * → 兜底 #1677ff。淡底用 color-mix 25%/32% hover。
-   */
-  .vc-tool-btn-active-colors() {
-    @vc-p: var(--color-primary, var(--fmap-primary, #1677ff));
-
-    background: color-mix(in srgb, @vc-p 25%, #fff);
-    color: @vc-p;
+  &-bar > &-tool-btn--active {
+    background: #fff4ed;
+    color: #ff692e;
 
     &:hover {
-      background: color-mix(in srgb, @vc-p 32%, #fff);
-      color: @vc-p;
-    }
-
-    &:disabled,
-    &[aria-disabled='true'] {
-      background: transparent;
-      color: #d0d5dd;
+      background: #ffe8d9;
+      color: #ff692e;
     }
   }
 
-  &-bar > &-tool-btn--active,
-  &-dock-collapsed-extras > &-tool-btn--active {
-    .vc-tool-btn-active-colors();
-  }
-
   /* —— 平面图 Dock：折叠入口与展开横条共用同一外框高度，避免切换时跳动 —— */
   @dock-btn-size: 42px;
   @dock-icon-px: 18px;
   /** 折叠按钮正方形边长 = 展开条高度（含 1px 边框的 border-box） */
   @dock-chrome-outer: 56px;
-  /** Dock 展开/收起：与 slide、expand、extras 共用，linear 避免 ease 带来的「回弹」观感 */
-  @dock-slide-ms: 0.18s;
 
   &--dock {
     left: 14px;
@@ -190,24 +153,18 @@
     }
 
     /**
-     * 展开/收起：max-width 过渡（变长 / 变短），内层 bar 为 width:max-content。
-     * 使用 linear + 统一时长（@dock-slide-ms），避免 ease 曲线与 max-width「大数值」组合带来的回弹感。
+     * 展开/收起：max-width 过渡（变长 / 变短），内层 bar 为 width:max-content
      */
+
     .pisell-floor-map-layout-view-controls-dock-slide {
       box-sizing: border-box;
-      /**
-       * 折叠态必须露出 slide 内首位的合并 toggle（42px）+ bar 左 padding（12px）≈ 54px。
-       * 历史上曾用 max-width:0 + 外层覆写，但与 `&--align-end &-dock-slide` 同优先级时
-       * 打包顺序可能导致 0 压过 54px → slide 宽度为 0、toggle 整块被裁掉。
-       */
-      max-width: 54px;
+      max-width: 0;
       overflow: hidden;
       min-width: 0;
-      flex-shrink: 0;
       display: flex;
       flex-direction: row;
       align-items: center;
-      transition: max-width @dock-slide-ms linear;
+      transition: max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
     }
 
     .pisell-floor-map-layout-view-controls-dock-slide--open {
@@ -233,21 +190,7 @@
       align-items: center;
     }
 
-    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-tool-btn,
-    .pisell-floor-map-layout-view-controls-dock-trailing > .pisell-floor-map-layout-view-controls-tool-btn {
-      flex-shrink: 0;
-      box-sizing: border-box;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      margin: 0;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      color: #101828;
-      appearance: none;
-      vertical-align: middle;
+    .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;
@@ -258,18 +201,6 @@
       font-size: @dock-icon-px;
       line-height: 0;
 
-      &:hover {
-        background: #f2f4f7;
-        color: #101828;
-      }
-
-      &:disabled,
-      &[aria-disabled='true'] {
-        background: transparent;
-        color: #d0d5dd;
-        cursor: not-allowed;
-      }
-
       .anticon,
       .pisell-lowcode-icon,
       span[role='img'] {
@@ -289,15 +220,6 @@
       }
     }
 
-    /**
-     * 展开条内激活态：与外侧折叠 pill（锁定 / 全览）同一套色，选择器挂在 bar--dock 上提高优先级，
-     * 避免与其它 hover / 尺寸规则叠在一起时展开条观感发灰、与 pill 不一致。
-     */
-    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-tool-btn--active,
-    .pisell-floor-map-layout-view-controls-dock-trailing > .pisell-floor-map-layout-view-controls-tool-btn--active {
-      .vc-tool-btn-active-colors();
-    }
-
     .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-zoom-value {
       min-width: 50px;
       height: @dock-btn-size;
@@ -312,139 +234,55 @@
     }
   }
 
-  /**
-   * dockChrome 屏右缘常驻 pill：「锁 / 全览」。
-   * 整组与 slide 共用同一外壳（dock-row 提供 border / radius / shadow），
-   * 左侧留 padding，与左侧展开条 / toggle 拉开，避免贴太紧；右侧保留与屏缘的呼吸。
-   */
-  &-dock-collapsed-extras {
+  &-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;
-    gap: 5px;
-    padding: 0 10px 0 10px;
-    background: #fff;
-    flex-shrink: 0;
-    max-width: 240px;
-  }
-
-  /**
-   * 右下 dock：row-reverse 后 DOM [extras][slide] 呈 [slide][extras]，
-   * extras 贴右缘。本场景下整组按钮做成「连体 pill」：
-   *
-   *   - 折叠态视觉：[slide 内紫色 toggle][锁定/全览 extras]
-   *   - 展开态视觉：[slide-bar 工具条][锁定/全览 extras]
-   *   - 展开方向：slide max-width 由 54 → 720px，由于父级锚定 `right:14px`，
-   *     整组横向"从右往左"伸长，视觉上工具条从 extras 左侧扩出来。
-   *
-   * 实现方式：把 box-shadow / border / border-radius 统一挂到外层 `dock-row` 容器上，
-   * 内层 slide-bar / extras 全部去掉自己的边框圆角与投影，
-   * 由 `overflow: hidden` 的外壳负责整体裁剪。这样：
-   *   - 整组只有一道阴影，无相邻拼接处的接缝阴影；
-   *   - 子元素切换宽度（max-width / width）时阴影边界跟随容器自然增长，无需 clip-path 修补；
-   *   - 紫色 toggle / 白色 extras / 白色 slide-bar 在同一个外壳里平铺，自动呈现连体观感。
-   */
-  &--align-end .pisell-floor-map-layout-view-controls-dock-row {
     border: 1px solid #e8eaed;
     border-radius: 14px;
     background: #fff;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    overflow: hidden;
-    /** 容器高度对齐 chrome 高度，避免子元素 1px 边框被外壳 border 双层叠加 */
-    height: @dock-chrome-outer;
-    min-height: @dock-chrome-outer;
-    max-height: @dock-chrome-outer;
-  }
-
-  /** 内层 slide-bar：去掉自身边框圆角阴影，背景仍为白以承接 zoom / 工具按钮 */
-  &--align-end
-    .pisell-floor-map-layout-view-controls-dock-slide
-    .pisell-floor-map-layout-view-controls-bar--dock {
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    /** 高度由外壳决定，自身按外壳内填满 */
-    height: 100%;
-    min-height: 0 !important;
-    max-height: none !important;
-    /**
-     * 贴邻 extras 那一侧（DOM 内的右侧）padding 清零，避免与 extras 左 padding 叠加成接缝空隙；
-     * 外壳左侧（slide-bar 视觉左缘）保留 12px，与外壳圆角留出呼吸空间。
-     */
-    padding-right: 0;
-  }
-
-  /**
-   * 合并入口：紫底白 icon，主题色与原 `dock-expand-btn` 一致。
-   * 尺寸对齐 dock 内其他工具按钮（@dock-btn-size），由外壳负责连体圆角与阴影。
-   */
-  &-dock-toggle-btn {
-    box-sizing: border-box;
-    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;
-    flex-shrink: 0;
-    padding: 0;
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 8px;
-    background: var(--color-primary, var(--ant-color-primary, #5d3f9f));
-    color: #fff;
+    cursor: pointer;
+    color: #101828;
     font-size: @dock-icon-px;
     line-height: 0;
-    cursor: pointer;
     appearance: none;
-    transition: filter @dock-slide-ms linear;
-
-    &:hover {
-      /** 与原 expand-btn 一致：主题色上用 brightness 让 hover 暗一档 */
-      filter: brightness(0.92);
-      background: var(--color-primary, var(--ant-color-primary, #5d3f9f));
-      color: #fff;
-    }
-
-    .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;
+    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;
     }
 
-    .anticon svg,
-    .pisell-lowcode-icon svg,
-    span[role='img'] svg {
-      width: @dock-icon-px !important;
-      height: @dock-icon-px !important;
-      display: block;
+    &:hover {
+      background: #f9fafb;
     }
-  }
-
-  &-dock-collapsed-extras-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'] {
+    .anticon {
       font-size: @dock-icon-px !important;
       line-height: 0;
       display: inline-flex;
@@ -452,9 +290,7 @@
       justify-content: center;
     }
 
-    .anticon svg,
-    .pisell-lowcode-icon svg,
-    span[role='img'] svg {
+    .anticon svg {
       width: @dock-icon-px !important;
       height: @dock-icon-px !important;
       display: block;
@@ -483,7 +319,7 @@
 
 @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-toggle-btn {
+  .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.js

@@ -25,13 +25,9 @@ function ViewControlsWithZoom(props) {
 		config: props.config,
 		scale: props.scale,
 		isFullscreen: props.isFullscreen,
-		fitBoundsActive: props.fitBoundsActive,
 		mapGridVisible: props.mapGridVisible,
 		onToggleMapGrid: props.onToggleMapGrid,
-		viewportLocked: props.viewportLocked,
-		onToggleViewportLock: props.onToggleViewportLock,
 		dockChrome: props.dockChrome,
-		dockExpandedToolButtons: props.dockExpandedToolButtons,
 		dockExpandedTrailing: props.dockExpandedTrailing,
 		autoCollapseDockMs: props.autoCollapseDockMs
 	});

package/es/components/pisellFloorMapLayout/context/mergeFloorMapLayoutContext.js

@@ -4,7 +4,7 @@ import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/
 * 将 `FloorMapLayoutContext` 与 Layout props 合并：各字段 props ?? ctx，props 显式值优先。
 */
 function mergeFloorMapLayoutPropsFromContext(props, ctx) {
-	var _props$floorMapConfig, _props$dataSources, _props$onSave, _props$onDataSourceRe, _props$dataSourceLabe, _props$dataSourceForm, _props$dataSourceReco, _props$loading, _props$saveError, _props$onElementRende, _props$toolbarShowSav, _props$floorMapFullsc, _props$appearanceMode, _props$showDataSource, _props$viewportDockTo, _props$viewportDockTr;
+	var _props$floorMapConfig, _props$dataSources, _props$onSave, _props$onDataSourceRe, _props$dataSourceLabe, _props$dataSourceForm, _props$dataSourceReco, _props$loading, _props$saveError, _props$onElementRende, _props$toolbarShowSav, _props$floorMapFullsc, _props$showDataSource, _props$viewportDockTr;
 	if (ctx == null) return props;
 	return _objectSpread2(_objectSpread2({}, props), {}, {
 		floorMapConfig: (_props$floorMapConfig = props.floorMapConfig) !== null && _props$floorMapConfig !== void 0 ? _props$floorMapConfig : ctx.floorMapConfig,
@@ -19,9 +19,7 @@ function mergeFloorMapLayoutPropsFromContext(props, ctx) {
 		onElementRenderError: (_props$onElementRende = props.onElementRenderError) !== null && _props$onElementRende !== void 0 ? _props$onElementRende : ctx.onElementRenderError,
 		toolbarShowSave: (_props$toolbarShowSav = props.toolbarShowSave) !== null && _props$toolbarShowSav !== void 0 ? _props$toolbarShowSav : ctx.toolbarShowSave,
 		floorMapFullscreenMode: (_props$floorMapFullsc = props.floorMapFullscreenMode) !== null && _props$floorMapFullsc !== void 0 ? _props$floorMapFullsc : ctx.floorMapFullscreenMode,
-		appearanceMode: (_props$appearanceMode = props.appearanceMode) !== null && _props$appearanceMode !== void 0 ? _props$appearanceMode : ctx.appearanceMode,
 		showDataSourceRecordFormBlock: (_props$showDataSource = props.showDataSourceRecordFormBlock) !== null && _props$showDataSource !== void 0 ? _props$showDataSource : ctx.showDataSourceRecordFormBlock,
-		viewportDockToolButtons: (_props$viewportDockTo = props.viewportDockToolButtons) !== null && _props$viewportDockTo !== void 0 ? _props$viewportDockTo : ctx.viewportDockToolButtons,
 		viewportDockTrailing: (_props$viewportDockTr = props.viewportDockTrailing) !== null && _props$viewportDockTr !== void 0 ? _props$viewportDockTr : ctx.viewportDockTrailing
 	});
 }