@pisell/materials 1.8.41 → 1.8.42

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, MinusOutlined, PlusOutlined, ReloadOutlined, RightOutlined } from "@ant-design/icons";
+import { BorderInnerOutlined, ExpandOutlined, FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, LockOutlined, MinusOutlined, PlusOutlined, ReloadOutlined, RightOutlined, UnlockOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import "./ViewControls.less";
 //#region src/components/pisellFloorMapLayout/components/ViewControls.tsx
@@ -13,26 +13,30 @@ 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, className, mapGridVisible = false, onToggleMapGrid, dockChrome = false, dockExpandedTrailing, autoCollapseDockMs = 1e4 } = props;
+	const { api, config = {}, scale = 1, isFullscreen = false, fitBoundsActive = false, className, mapGridVisible = false, onToggleMapGrid, viewportLocked = false, onToggleViewportLock, dockChrome = false, dockExpandedToolButtons, 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;
+	const showTools = showReset || showFitBounds || showFullscreen || showGridToggle || showViewportLock;
+	const hasDockToolButtons = dockExpandedToolButtons != null && dockExpandedToolButtons !== false;
 	const hasTrailingSlot = dockExpandedTrailing != null && dockExpandedTrailing !== false;
-	const dockHasExpandable = dockChrome && (showTools || hasTrailingSlot);
-	const showBar = showZoom || showTools || dockChrome && hasTrailingSlot;
-	/** Dock：展开条是否拉宽（与 CSS max-width 过渡联动） */
+	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 [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) {
@@ -64,17 +68,8 @@ 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(() => {
-		setDockPanelMounted(true);
-		requestAnimationFrame(() => {
-			requestAnimationFrame(() => {
-				setDockExpanded(true);
-			});
-		});
+		setDockExpanded(true);
 	}, []);
 	const handleDockCollapseClick = useCallback(() => {
 		clearIdleTimer();
@@ -87,65 +82,120 @@ function ViewControls(props) {
 		autoCollapseDockMs,
 		scheduleDockCollapse
 	]);
-	const renderToolButtons = () => /* @__PURE__ */ React.createElement(React.Fragment, null, showReset ? /* @__PURE__ */ React.createElement("button", {
-		type: "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", {
+	/**
+	* 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", {
 		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", {
+		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(), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-view-controls-dock-scroll` }, 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 && (showTools || hasTrailingSlot) ? /* @__PURE__ */ React.createElement("div", {
+	}, /* @__PURE__ */ React.createElement(PlusOutlined, null))) : null, showZoom && (dockExpandedBarHasToolButtons || hasDockToolButtons || hasTrailingSlot) ? /* @__PURE__ */ React.createElement("div", {
 		className: `${PREFIX}-view-controls-bar-divider`,
 		"aria-hidden": true
-	}) : 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)));
+	}) : null, dockExpandedBarHasToolButtons ? renderToolButtons({
+		omitViewportLock: true,
+		omitFitBounds: true
+	}) : null, hasDockToolButtons ? dockExpandedToolButtons : null, hasTrailingSlot ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-view-controls-dock-trailing` }, dockExpandedTrailing) : null));
 	if (!showBar) return null;
-	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", {
+	/**
+	* 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", {
 		className: classNames(`${PREFIX}-view-controls-bar`, `${PREFIX}-view-controls-bar--dock`),
 		role: "group",
 		onPointerDown: handleDockBarPointerDown
-	}, renderDockExpandableBarContents())) : null));
+	}, renderDockExpandableBarContents()))));
 	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,
@@ -158,11 +208,15 @@ 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,16 +111,51 @@
       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;
+    }
   }
 
-  &-bar > &-tool-btn--active {
-    background: #fff4ed;
-    color: #ff692e;
+  /**
+   * 工具按钮激活态（展开条内与外侧折叠 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;
 
     &:hover {
-      background: #ffe8d9;
-      color: #ff692e;
+      background: color-mix(in srgb, @vc-p 32%, #fff);
+      color: @vc-p;
     }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      background: transparent;
+      color: #d0d5dd;
+    }
+  }
+
+  &-bar > &-tool-btn--active,
+  &-dock-collapsed-extras > &-tool-btn--active {
+    .vc-tool-btn-active-colors();
   }
 
   /* —— 平面图 Dock：折叠入口与展开横条共用同一外框高度，避免切换时跳动 —— */
@@ -128,10 +163,16 @@
   @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;
     bottom: 14px;
+    /**
+     * 屏缘各 14px：整条 Dock（extras + 展开条）不得超出视口，否则展开态会向左溢出。
+     */
+    max-width: calc(100vw - 28px);
 
     &.pisell-floor-map-layout-view-controls--align-end {
       left: auto;
@@ -150,31 +191,74 @@
       align-items: center;
       gap: 0;
       min-height: 0;
+      max-width: 100%;
     }
 
     /**
-     * 展开/收起：max-width 过渡（变长 / 变短），内层 bar 为 width:max-content
+     * 展开/收起：max-width 过渡（变长 / 变短），内层 bar 为 width:max-content。
+     * 使用 linear + 统一时长（@dock-slide-ms），避免 ease 曲线与 max-width「大数值」组合带来的回弹感。
      */
-
     .pisell-floor-map-layout-view-controls-dock-slide {
       box-sizing: border-box;
-      max-width: 0;
+      /**
+       * 折叠态必须露出 slide 内首位的合并 toggle（42px）+ bar 左 padding（12px）≈ 54px。
+       * 历史上曾用 max-width:0 + 外层覆写，但与 `&--align-end &-dock-slide` 同优先级时
+       * 打包顺序可能导致 0 压过 54px → slide 宽度为 0、toggle 整块被裁掉。
+       */
+      max-width: 54px;
       overflow: hidden;
       min-width: 0;
+      flex-shrink: 0;
       display: flex;
       flex-direction: row;
       align-items: center;
-      transition: max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+      transition: max-width @dock-slide-ms linear;
     }
 
+    /**
+     * 展开宽度上限：设计 720px；整条 Dock 外层另有 `max-width: calc(100vw - 28px)`，不再预留固定像素。
+     * 窄屏时中间区见 `.dock-scroll` 横向滚动，收起键始终在 toggle 位固定。
+     */
     .pisell-floor-map-layout-view-controls-dock-slide--open {
-      max-width: min(90vw, 720px);
+      max-width: min(720px, calc(100vw - 28px));
+      flex-shrink: 1;
     }
 
+    /**
+     * toggle 与 `.dock-scroll` 之间不加 gap，否则折叠态 max-width 54px（12+42）不够；
+     * 工具区间距只在 `.dock-scroll` 内用 gap；首项用 margin-left 顶替原 bar 上 toggle 与首个按钮的间隔。
+     */
     .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;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0;
+      flex: 1;
+      min-width: 0;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    /**
+     * 收起键与可滚动区分栏并列：仅中间区域 overflow-x，toggle 不参与滚动。
+     */
+    .pisell-floor-map-layout-view-controls-dock-scroll {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: 5px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: thin;
+    }
+
+    .pisell-floor-map-layout-view-controls-dock-scroll > :first-child {
+      margin-left: 5px;
     }
 
     .pisell-floor-map-layout-view-controls-bar--dock {
@@ -190,7 +274,22 @@
       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-bar--dock .pisell-floor-map-layout-view-controls-dock-scroll .pisell-floor-map-layout-view-controls-tool-btn,
+    .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;
       width: @dock-btn-size;
       min-width: @dock-btn-size;
       max-width: @dock-btn-size;
@@ -201,6 +300,18 @@
       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'] {
@@ -220,7 +331,21 @@
       }
     }
 
-    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-zoom-value {
+    /**
+     * 展开条内激活态：与外侧折叠 pill（锁定 / 全览）同一套色，选择器挂在 bar--dock 上提高优先级，
+     * 避免与其它 hover / 尺寸规则叠在一起时展开条观感发灰、与 pill 不一致。
+     */
+    .pisell-floor-map-layout-view-controls-bar--dock
+      .pisell-floor-map-layout-view-controls-dock-scroll
+      .pisell-floor-map-layout-view-controls-tool-btn--active,
+    .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-dock-scroll
+      .pisell-floor-map-layout-view-controls-zoom-value {
       min-width: 50px;
       height: @dock-btn-size;
       line-height: @dock-btn-size;
@@ -228,61 +353,147 @@
       padding: 0 6px;
     }
 
-    .pisell-floor-map-layout-view-controls-bar--dock > .pisell-floor-map-layout-view-controls-bar-divider {
+    .pisell-floor-map-layout-view-controls-bar--dock
+      .pisell-floor-map-layout-view-controls-dock-scroll
+      .pisell-floor-map-layout-view-controls-bar-divider {
       height: 28px;
       margin: 0 6px;
     }
   }
 
-  &-dock-expand-btn {
+  /**
+   * dockChrome 屏右缘常驻 pill：「锁 / 全览」。
+   * 整组与 slide 共用同一外壳（dock-row 提供 border / radius / shadow），
+   * 左侧留 padding，与左侧展开条 / toggle 拉开，避免贴太紧；右侧保留与屏缘的呼吸。
+   */
+  &-dock-collapsed-extras {
     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);
-    cursor: pointer;
-    color: #101828;
+    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;
     font-size: @dock-icon-px;
     line-height: 0;
+    cursor: pointer;
     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;
-    }
+    transition: filter @dock-slide-ms linear;
 
     &:hover {
-      background: #f9fafb;
+      /** 与原 expand-btn 一致：主题色上用 brightness 让 hover 暗一档 */
+      filter: brightness(0.92);
+      background: var(--color-primary, var(--ant-color-primary, #5d3f9f));
+      color: #fff;
     }
 
-    .anticon {
+    .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;
+    }
+  }
+
+  &-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'] {
       font-size: @dock-icon-px !important;
       line-height: 0;
       display: inline-flex;
@@ -290,7 +501,9 @@
       justify-content: center;
     }
 
-    .anticon svg {
+    .anticon svg,
+    .pisell-lowcode-icon svg,
+    span[role='img'] svg {
       width: @dock-icon-px !important;
       height: @dock-icon-px !important;
       display: block;
@@ -319,7 +532,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-expand-btn {
+  .pisell-floor-map-layout-view-controls--dock .pisell-floor-map-layout-view-controls-dock-toggle-btn {
     transition-duration: 0.01ms;
   }
 }