@pisell/materials 1.8.41 → 1.8.42

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -5,19 +5,23 @@ const require_ItemLayer = require("./components/ItemLayer.js");
 const require_EditableItemLayer = require("./components/EditableItemLayer.js");
 const require_floorMapElementKindUtils = require("./utils/floorMapElementKindUtils.js");
 const require_floorMapDropUtils = require("./utils/floorMapDropUtils.js");
+const require_floorMapLayoutConstants = require("./floorMapLayoutConstants.js");
 const require_FloorMapToolbar = require("./components/FloorMapToolbar.js");
 const require_useEngineContext = require("../../hooks/useEngineContext.js");
 const require_floorMapCanvasDisplay = require("./utils/floorMapCanvasDisplay.js");
 const require_CanvasTabs = require("./components/CanvasTabs.js");
 const require_FloorMapEditTopBar = require("./components/FloorMapEditTopBar.js");
+const require_mergeCanvasesForTabs = require("./utils/mergeCanvasesForTabs.js");
+const require_FloorMapOverview = require("./components/FloorMapOverview.js");
 const require_FloorMapEditPanel = require("./components/FloorMapEditPanel.js");
 const require_ViewControlsWithZoom = require("./components/ViewControlsWithZoom.js");
 const require_layoutMeasurements = require("./utils/layoutMeasurements.js");
 const require_useFloorMapEditState = require("./hooks/useFloorMapEditState.js");
 const require_useFloorMapTransformMetrics = require("./hooks/useFloorMapTransformMetrics.js");
 const require_floorMapFallbackRender = require("./utils/floorMapFallbackRender.js");
+const require_floorMapAppearance = require("./appearance/floorMapAppearance.js");
 const require_useFloorMapPaletteTouchDrag = require("./hooks/useFloorMapPaletteTouchDrag.js");
-const require_mergeCanvasesForTabs = require("./utils/mergeCanvasesForTabs.js");
+const require_floorMapOverviewLayout = require("./utils/floorMapOverviewLayout.js");
 const require_FloorMapLayoutContext = require("./context/FloorMapLayoutContext.js");
 const require_mergeFloorMapLayoutContext = require("./context/mergeFloorMapLayoutContext.js");
 let react = require("react");
@@ -33,10 +37,13 @@ require("./PisellFloorMapLayout.less");
 * PisellFloorMapLayout - 空间布局视图
 * 支持两种用法：1) 仅传入 items + renderItem（原有用法）；2) 传入 floorMapConfig + dataSources + mode 使用平面图视图（含多画布/编辑态）
 */
-const PREFIX = "pisell-floor-map-layout";
+/**
+* 布局根实现（由 {@link PisellFloorMapLayout} forwardRef 包裹）。
+* 负责：上下文与 props 合并、编辑态/阅读态分支、Transform 视口、图元层与工具栏联动。
+*/
 function PisellFloorMapLayoutInner(props, ref) {
-	var _engineCtx$engine, _config$sceneElements;
-	const { className, style, items: itemsProp, renderItem, rowKey, renderItemByKind, getMergedItemWrapperStyle, mapLayer, cellSize: cellSizeProp, itemUnit = "cell", zoom = {}, pan = {}, controls = {}, enableHover = true, onItemClick, onItemHover, onItemLeave, mode = "read", floorMapConfig: floorMapConfigProp, dataSources, onSave, onDataSourceRecordSave, dataSourceLabels, dataSourceFormColumns, dataSourceRecordForm, loading, saveError, onElementRenderError, toolbarShowSave = true, floorMapFullscreenMode, showDataSourceRecordFormBlock, floorMapViewportOverlay, viewportOverlayPlacement = "top-start", viewportOverlayClassName, canvasTabsBarTrailing, viewportDockTrailing } = require_mergeFloorMapLayoutContext.mergeFloorMapLayoutPropsFromContext(props, require_FloorMapLayoutContext.useFloorMapLayoutContext());
+	var _ref, _currentCanvas$mapLay2, _currentCanvas$mapLay3, _mapLayer$backgroundC, _engineCtx$engine, _mapLayer$boundingPad, _config$sceneElements;
+	const { className, style, items: itemsProp, renderItem, rowKey, renderItemByKind, getMergedItemWrapperStyle, mapLayer, cellSize: cellSizeProp, itemUnit = "cell", zoom = {}, pan = {}, controls = {}, enableHover = true, readModeSelectedItemId, onItemClick, onItemHover, onItemLeave, mode = "read", floorMapConfig: floorMapConfigProp, dataSources, onSave, onExitEdit, onDataSourceRecordSave, dataSourceLabels, dataSourceFormColumns, dataSourceRecordForm, loading, saveError, onElementRenderError, toolbarShowSave = true, floorMapFullscreenMode, appearanceMode = "light", showDataSourceRecordFormBlock, floorMapViewportOverlay, viewportOverlayPlacement = "top-start", viewportOverlayClassName, editTopBarPhoneLayout = false, canvasTabsBarTrailing, viewportDockToolButtons, viewportDockTrailing, viewportPersist = true, viewportPersistNamespace } = require_mergeFloorMapLayoutContext.mergeFloorMapLayoutPropsFromContext(props, require_FloorMapLayoutContext.useFloorMapLayoutContext());
 	const { token } = antd.theme.useToken();
 	const isFloorMapView = Boolean(floorMapConfigProp);
 	const contentOffsetRef = (0, react.useRef)({
@@ -45,7 +52,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 	});
 	const mapDropLayerRef = (0, react.useRef)(null);
 	const transformRef = (0, react.useRef)(null);
-	const { config, currentCanvasId, setCurrentCanvasId, selectedId, setSelectedId, placeMode, setPlaceMode, items, saving, savingRecord, handleAddCanvas, handleRemoveCanvas, handleRenameCanvas, handleUpdateItem, handleCanvasPlaceClick, handleSave, placeSceneElementFromPaletteDrop, editPanelParams, placeOverlayClass, isLayoutDirty, toggleDraftCanvasShowGrid, toggleSelectedLayoutLock, duplicateSelectedElement, deleteSelectedElement } = require_useFloorMapEditState.useFloorMapEditState({
+	const { config, currentCanvasId, setCurrentCanvasId, selectedId, setSelectedId, placeMode, setPlaceMode, items, saving, savingRecord, handleAddCanvas, handleRemoveCanvas, handleRenameCanvas, handleUpdateItem, handleCanvasPlaceClick, handleSave, placeSceneElementFromPaletteDrop, editPanelParams, placeOverlayClass, isLayoutDirty, toggleDraftCanvasShowGrid, toggleSelectedLayoutLock, duplicateSelectedElement, deleteSelectedElement, undoDraft, redoDraft, canUndo, canRedo, discardDraft } = require_useFloorMapEditState.useFloorMapEditState({
 		floorMapConfigProp,
 		isFloorMapView,
 		itemsProp,
@@ -56,42 +63,130 @@ function PisellFloorMapLayoutInner(props, ref) {
 		dataSourceFormColumns,
 		dataSourceRecordForm,
 		dataSourceLabels,
-		layoutPrefix: PREFIX,
+		layoutPrefix: require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX,
 		contentOffsetRef,
 		showDataSourceRecordFormBlock
 	});
-	const effectiveMapLayer = (0, react.useMemo)(() => {
-		var _canvas$mapLayer;
-		if (!isFloorMapView || !config || !currentCanvasId) return mapLayer;
-		const canvas = config.canvases.find((c) => c.id === currentCanvasId);
-		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, mapLayer !== null && mapLayer !== void 0 ? mapLayer : {}), (_canvas$mapLayer = canvas === null || canvas === void 0 ? void 0 : canvas.mapLayer) !== null && _canvas$mapLayer !== void 0 ? _canvas$mapLayer : {});
+	/**
+	* 当前选中的画布配置：用于提取当前画布级 mapLayer 显式配置。
+	*/
+	const currentCanvas = (0, react.useMemo)(() => {
+		var _config$canvases$find;
+		if (!isFloorMapView || !config || !currentCanvasId) return null;
+		return (_config$canvases$find = config.canvases.find((canvas) => canvas.id === currentCanvasId)) !== null && _config$canvases$find !== void 0 ? _config$canvases$find : null;
 	}, [
 		isFloorMapView,
 		config,
-		currentCanvasId,
+		currentCanvasId
+	]);
+	/**
+	* 「取消编辑」组合：先丢弃 draft（同步把 draftConfig replace 回上游 props 的值），
+	* 再调用业务侧 onExitEdit 退出编辑模式。
+	*
+	* 不在 onExitEdit 本身做 discard，是因为「完成」按钮链路也会调 onExitEdit，
+	* 完成时草稿应保留等 props 回写（参考 useFloorMapEditState.handleSave 的 baseline 处理），
+	* 一旦在 onExitEdit 里 discard 会把保存中的视觉态闪回旧值。
+	*/
+	const handleCancelEdit = (0, react.useCallback)(() => {
+		discardDraft();
+		onExitEdit === null || onExitEdit === void 0 || onExitEdit();
+	}, [discardDraft, onExitEdit]);
+	/** 当前画布下的 mapLayer：全局 `mapLayer` 与画布级配置合并，供 MapLayer / 吸附等读取 */
+	const effectiveMapLayer = (0, react.useMemo)(() => {
+		var _currentCanvas$mapLay;
+		if (!isFloorMapView || !currentCanvas) return mapLayer;
+		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, mapLayer !== null && mapLayer !== void 0 ? mapLayer : {}), (_currentCanvas$mapLay = currentCanvas.mapLayer) !== null && _currentCanvas$mapLay !== void 0 ? _currentCanvas$mapLay : {});
+	}, [
+		isFloorMapView,
+		currentCanvas,
 		mapLayer
 	]);
+	const appearanceTokens = (0, react.useMemo)(() => require_floorMapAppearance.getFloorMapAppearanceTokens(appearanceMode), [appearanceMode]);
+	const canvasBackgroundColor = (_ref = (_currentCanvas$mapLay2 = currentCanvas === null || currentCanvas === void 0 || (_currentCanvas$mapLay3 = currentCanvas.mapLayer) === null || _currentCanvas$mapLay3 === void 0 ? void 0 : _currentCanvas$mapLay3.backgroundColor) !== null && _currentCanvas$mapLay2 !== void 0 ? _currentCanvas$mapLay2 : mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.backgroundColor) !== null && _ref !== void 0 ? _ref : appearanceTokens.fallbackCanvasBackgroundColor;
+	/**
+	* All 视图整体背景色：不再按各画布区域分别取色（用户明确要求「不要按区域来」），
+	* 改成跟单画布同一套**根级 + appearance 兜底**链。这样：
+	* - root `mapLayer.backgroundColor` 配的深色背景，All 视图整张背景都吃到；
+	* - 没显式配色时按 `appearanceMode`（dark/light）兜底；
+	* - 画布级的 `canvas.mapLayer.backgroundColor` 在 All 视图刻意不读，避免某张画布
+	*   的私有背景污染整体 All 视图。
+	*/
+	const overviewBackgroundColor = (_mapLayer$backgroundC = mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.backgroundColor) !== null && _mapLayer$backgroundC !== void 0 ? _mapLayer$backgroundC : appearanceTokens.fallbackCanvasBackgroundColor;
 	/**
 	* 必须与下方 TransformWrapper 的 `key` 完全一致。
 	* 远程/合并配置落地后 boundingPadding 等会变 → Wrapper 重挂载 → 若 autoFit 仍按旧「仅 canvasId」帧认为已 done，首屏会停在初始 transform；切换画布才因 id 变化再次 fit。
 	*/
+	/**
+	* 「全览」状态：仅阅读态下、启用画布 ≥ 2 时通过画布 Tab 最前的「All」入口进入。
+	* 不写入 `currentCanvasId`，避免：
+	*   - useFloorMapEditState 内的「画布存在性同步」effect 把当前 id 立刻 reset 掉；
+	*   - 触发 transformWrapperKey 变化导致单画布视角缓存被清。
+	* 仅由本组件根据 mode/画布数量切换；外部不感知。
+	*/
+	const [isOverview, setIsOverview] = (0, react.useState)(false);
+	/**
+	* 与下方 TransformWrapper `key` 完全一致；远程合并 padding/默认缩放回包后变化触发重挂载，
+	* 单画布 ↔ 全览（All）切换也通过本 key 切换，避免视角与缓存交叉污染。
+	*/
 	const transformWrapperKey = (0, react.useMemo)(() => {
-		var _effectiveMapLayer$bo, _zoom$defaultScale;
+		var _ref2, _zoom$defaultScale;
 		if (!isFloorMapView) return "fmap-layout";
-		const bp = (_effectiveMapLayer$bo = effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding) !== null && _effectiveMapLayer$bo !== void 0 ? _effectiveMapLayer$bo : "d";
+		const bp = (_ref2 = isOverview ? mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding : effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding) !== null && _ref2 !== void 0 ? _ref2 : "d";
 		const z = (_zoom$defaultScale = zoom.defaultScale) !== null && _zoom$defaultScale !== void 0 ? _zoom$defaultScale : 1;
+		if (isOverview) return `fmap-overview-bp${bp}-z${z}`;
 		return `fmap-${currentCanvasId !== null && currentCanvasId !== void 0 ? currentCanvasId : "na"}-bp${bp}-z${z}`;
 	}, [
 		isFloorMapView,
+		isOverview,
 		currentCanvasId,
 		effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding,
+		mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding,
 		zoom.defaultScale
 	]);
-	const canvasesForTabs = (0, react.useMemo)(() => config ? require_mergeCanvasesForTabs.mergeCanvasesForTabs(config) : [], [config]);
+	/** 供顶栏 Tab 使用：合并草稿画布等后的画布列表（基础列表，不含「全览」） */
+	const canvasesForTabsBase = (0, react.useMemo)(() => config ? require_mergeCanvasesForTabs.mergeCanvasesForTabs(config) : [], [config]);
 	const engineCtx = require_useEngineContext.default();
 	const engineLocale = (engineCtx === null || engineCtx === void 0 || (_engineCtx$engine = engineCtx.engine) === null || _engineCtx$engine === void 0 || (_engineCtx$engine = _engineCtx$engine.props) === null || _engineCtx$engine === void 0 ? void 0 : _engineCtx$engine.locale) || "zh-CN";
 	const hasCanvasTabsBarTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
-	const enabledCanvasCount = (0, react.useMemo)(() => canvasesForTabs.filter((c) => c.enabled).length, [canvasesForTabs]);
+	const enabledCanvasCount = (0, react.useMemo)(() => canvasesForTabsBase.filter((c) => c.enabled).length, [canvasesForTabsBase]);
+	/** 仅阅读态、启用画布 > 1 时，在 Tab 列表最前插入「All」伪 tab */
+	const showOverviewTab = isFloorMapView && mode === "read" && enabledCanvasCount > 1;
+	const overviewTabLabel = (0, react.useMemo)(() => {
+		require_floorMapCanvasDisplay.initFloorMapLayoutLocales(engineLocale);
+		return _pisell_utils.locales.getText("pisell-floor-map-layout.canvas-tabs.overview");
+	}, [engineLocale]);
+	/**
+	* 给 CanvasTabs 渲染用的最终列表：阅读态多画布时在列表最前插入「All」伪 tab。
+	* order 取当前最小 order - 1，保证排序后位于第一个；其它字段留空。
+	*/
+	const canvasesForTabs = (0, react.useMemo)(() => {
+		if (!showOverviewTab) return canvasesForTabsBase;
+		const minOrder = canvasesForTabsBase.reduce((min, c) => c.order < min ? c.order : min, Number.POSITIVE_INFINITY);
+		return [{
+			id: require_floorMapLayoutConstants.FLOOR_MAP_OVERVIEW_TAB_ID,
+			name: overviewTabLabel,
+			order: Number.isFinite(minOrder) ? minOrder - 1 : -1,
+			enabled: true
+		}, ...canvasesForTabsBase];
+	}, [
+		canvasesForTabsBase,
+		showOverviewTab,
+		overviewTabLabel
+	]);
+	/** 编辑态强制退出全览（多画布编辑流程不应进入只读全览界面） */
+	(0, react.useEffect)(() => {
+		if (mode !== "read") {
+			if (isOverview) setIsOverview(false);
+			return;
+		}
+		/** 阅读态下若启用画布回落到 1 张以内，全览 Tab 已不再展示，需自动退出 */
+		if (isOverview && enabledCanvasCount <= 1) setIsOverview(false);
+	}, [
+		mode,
+		isOverview,
+		enabledCanvasCount
+	]);
+	/** 阅读态是否展示画布 Tab：多启用画布或配置了 `canvasTabsBarTrailing` 时出现 */
 	const showReadModeCanvasTabsBar = (0, react.useMemo)(() => {
 		if (!isFloorMapView || mode !== "read" || !config) return false;
 		if (hasCanvasTabsBarTrailing) return true;
@@ -103,12 +198,12 @@ function PisellFloorMapLayoutInner(props, ref) {
 		hasCanvasTabsBarTrailing,
 		enabledCanvasCount
 	]);
+	/** 阅读态画布 Tab 工具条的无障碍标签（随引擎语言初始化文案） */
 	const readCanvasTabsAriaLabel = (0, react.useMemo)(() => {
 		require_floorMapCanvasDisplay.initFloorMapLayoutLocales(engineLocale);
 		return _pisell_utils.locales.getText("pisell-floor-map-layout.read-canvas-tabs.aria");
 	}, [engineLocale]);
-	/** 编辑态始终保留顶栏 Tab（单画布也要能「添加画布」）；仅阅读态在单画布时可隐藏 Tab 行 */
-	const showEditCompactTopBar = isFloorMapView && mode === "edit" && Boolean(config) && !useFullTopChrome;
+	/** 加载遮罩上的文案 */
 	const loadingLabel = (0, react.useMemo)(() => {
 		require_floorMapCanvasDisplay.initFloorMapLayoutLocales(engineLocale);
 		return _pisell_utils.locales.getText("pisell-floor-map-layout.loading");
@@ -148,42 +243,205 @@ function PisellFloorMapLayoutInner(props, ref) {
 		deleteSelectedElement
 	]);
 	const cellSize = cellSizeProp !== null && cellSizeProp !== void 0 ? cellSizeProp : 64;
+	/** 图元间距（像素）：由 mapLayer.gap 解析 */
 	const itemGap = (0, react.useMemo)(() => require_layoutMeasurements.gapToPx(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.gap), [effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.gap]);
+	/** 平面图坐标始终按像素；非平面图沿用 props `itemUnit` */
 	const effectiveItemUnit = isFloorMapView ? "pixel" : itemUnit;
-	const { containerRef, mapAreaRef, mapAreaSize, contentWidth, contentHeight, contentOffsetX, contentOffsetY, initialPositionX, initialPositionY, zoomConfig, scale, setScale, isFullscreen, toggleFullscreen, fitBounds, lastTransformRef, isInteractingWithElement, setIsInteractingWithElement } = require_useFloorMapTransformMetrics.useFloorMapTransformMetrics({
-		items,
+	/**
+	* 「全览」视图布局：把所有启用画布按各自原始尺寸（同一比例尺）紧凑装箱，
+	* 主 TransformWrapper 用整体 totalWidth/Height 作为 stage 尺寸，
+	* FloorMapOverview 按 areas[].x/y 把对应画布的图元绝对定位渲染。
+	* 与单画布共用同一套缩放/平移/锁定/全屏/fitBounds。
+	*/
+	const overviewLayout = (0, react.useMemo)(() => {
+		if (!isFloorMapView || !isOverview || !config) return null;
+		return require_floorMapOverviewLayout.buildFloorMapOverviewLayout({
+			config,
+			globalMapLayer: mapLayer,
+			cellSize,
+			itemUnit: effectiveItemUnit,
+			areaGap: 32
+		});
+	}, [
+		isFloorMapView,
+		isOverview,
+		config,
+		mapLayer,
+		cellSize,
+		effectiveItemUnit
+	]);
+	/**
+	* 视口持久化 key：
+	*   - 仅平面图模式启用（其它模式没有「画布」概念）
+	*   - `viewportPersist === false` 或无 currentCanvasId 时关闭
+	*   - 有 namespace 时拼成 `${ns}:${canvasId}`，隔离不同业务场景（店铺 / 平面图）
+	*   - 未传 namespace 时 fallback 为仅 `${canvasId}`，小心跨场景可能共享视角
+	*   - 不感知 boundingPadding / defaultScale 等渲染参数变化，避免 padding 调整导致缓存失效
+	*   - 「全览」模式使用独立的 `__overview__` key，与单画布缓存互不影响
+	*/
+	const viewportPersistKey = (0, react.useMemo)(() => {
+		if (viewportPersist === false) return void 0;
+		if (!isFloorMapView) return void 0;
+		if (isOverview) return viewportPersistNamespace ? `${viewportPersistNamespace}:__overview__` : "__overview__";
+		if (!currentCanvasId) return void 0;
+		return viewportPersistNamespace ? `${viewportPersistNamespace}:${currentCanvasId}` : currentCanvasId;
+	}, [
+		viewportPersist,
+		viewportPersistNamespace,
+		isFloorMapView,
+		isOverview,
+		currentCanvasId
+	]);
+	/**
+	* 全览模式下喂给 metrics 的虚拟 item：让 stage / fitBounds 把整体当作一张
+	* 0,0,totalWidth,totalHeight 的大图元处理；不参与渲染（渲染走 FloorMapOverview）。
+	* 类型上仅需 FloorMapItemBase，metrics 内部不读 `_sceneElement` 等扩展字段。
+	*/
+	const overviewMetricsItems = (0, react.useMemo)(() => {
+		if (!overviewLayout) return [];
+		return [{
+			id: "__pisell_floor_map_overview_stage__",
+			x: 0,
+			y: 0,
+			width: overviewLayout.totalWidth,
+			height: overviewLayout.totalHeight,
+			shape: "rect"
+		}];
+	}, [overviewLayout]);
+	const { containerRef, mapAreaRef, mapAreaSize, contentWidth, contentHeight, contentOffsetX, contentOffsetY, initialPositionX, initialPositionY, zoomConfig, scale, setScale, isFullscreen, toggleFullscreen, fitBounds, isAtFitBounds, notifyTransformed, persistCurrentViewport, attachTransformContext, isInteractingWithElement, setIsInteractingWithElement, viewportLocked, toggleViewportLocked } = require_useFloorMapTransformMetrics.useFloorMapTransformMetrics({
+		items: isOverview && overviewLayout ? overviewMetricsItems : items,
 		cellSize,
-		itemGap,
+		itemGap: isOverview ? 0 : itemGap,
 		effectiveItemUnit,
 		isFloorMapView,
 		mode,
 		zoom,
 		transformRef,
 		contentOffsetRef,
-		boundingPadding: effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding,
-		frameResetKey: isFloorMapView ? transformWrapperKey : void 0
+		boundingPadding: isOverview ? (_mapLayer$boundingPad = mapLayer === null || mapLayer === void 0 ? void 0 : mapLayer.boundingPadding) !== null && _mapLayer$boundingPad !== void 0 ? _mapLayer$boundingPad : 56 : effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding,
+		frameResetKey: isFloorMapView ? transformWrapperKey : void 0,
+		viewportPersistKey
 	});
-	/** 编辑态全屏策略：toggle 可切换；locked 始终全屏顶栏且不可在组件内退出；disabled 无全屏按钮 */
+	/** 手机：选中图元种类后一键落在当前视口中心（与点击画布落点坐标换算一致） */
+	const handlePlaceActiveAtViewportCenter = (0, react.useCallback)(() => {
+		if (!placeMode || placeMode.type !== "scene") return;
+		const w = mapAreaSize.width;
+		const h = mapAreaSize.height;
+		if (w <= 0 || h <= 0) return;
+		const { x: ox, y: oy } = contentOffsetRef.current;
+		placeSceneElementFromPaletteDrop(Math.round(w / 2 - ox), Math.round(h / 2 - oy), placeMode);
+	}, [
+		placeMode,
+		mapAreaSize.width,
+		mapAreaSize.height,
+		placeSceneElementFromPaletteDrop
+	]);
+	/** 编辑态全屏策略：toggle 全屏与编辑态强绑定；locked 始终全屏顶栏；disabled 无全屏 */
 	const fsMode = floorMapFullscreenMode !== null && floorMapFullscreenMode !== void 0 ? floorMapFullscreenMode : "toggle";
 	const useFullTopChrome = isFloorMapView && mode === "edit" && (fsMode === "locked" || fsMode === "toggle" && isFullscreen);
-	/** toggle 时左下 Dock 展示全屏；locked/disabled 不传 API */
-	const dockToggleFullscreen = isFloorMapView && fsMode === "toggle" ? toggleFullscreen : void 0;
+	/**
+	* 平面图编辑态：全屏与编辑模式强绑定（用户需求："编辑的时候就是全屏，非编辑模式就不是全屏"）。
+	* 因此 toggle 策略下不再展示左下角 Dock 的进出全屏按钮——
+	* 退出全屏 = 退出编辑，由顶栏「保存 / 退出编辑」入口承担。
+	* locked / disabled 行为保持原样：locked 也无按钮；disabled 不允许全屏。
+	*/
+	const dockToggleFullscreen = void 0;
+	/**
+	* 平面图编辑态全屏与编辑模式双向同步：
+	*   - 进 edit → 自动进入伪全屏
+	*   - 退出 edit → 自动退出伪全屏
+	*   - 仅 toggle 策略下生效（locked 已由 useFullTopChrome 强制；disabled 不允许全屏）
+	* 强同步：依赖中包含 isFullscreen，万一被外部 / 副作用切到不一致状态会被纠正回来。
+	* ESC 退出全屏的监听已在 metrics hook 中移除，避免按 ESC 后被本 effect 强制拉回来导致闪烁。
+	*/
+	(0, react.useEffect)(() => {
+		if (!isFloorMapView) return;
+		if (fsMode !== "toggle") return;
+		if (mode === "edit" !== isFullscreen) toggleFullscreen();
+	}, [
+		mode,
+		isFloorMapView,
+		fsMode,
+		isFullscreen,
+		toggleFullscreen
+	]);
+	/** 编辑态始终保留顶栏 Tab（单画布也要能「添加画布」）；仅阅读态在单画布时可隐藏 Tab 行 */
+	const showEditCompactTopBar = isFloorMapView && mode === "edit" && Boolean(config) && !useFullTopChrome;
+	/**
+	* 右下角视口控件：平面图下默认带出全屏按钮（若当前策略允许 toggle），
+	* 并默认带出「视口锁定」按钮（与是否将视口保存到本地解耦；无持久化 key 时仅内存态，默认未锁定）。
+	*/
 	const viewControlsConfig = (0, react.useMemo)(() => {
-		var _controls$showFullscr;
+		var _controls$showFullscr, _controls$showViewpor;
 		if (!isFloorMapView) return controls;
-		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, controls), {}, { showFullscreen: (_controls$showFullscr = controls.showFullscreen) !== null && _controls$showFullscr !== void 0 ? _controls$showFullscr : Boolean(dockToggleFullscreen) });
+		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, controls), {}, {
+			showFullscreen: (_controls$showFullscr = controls.showFullscreen) !== null && _controls$showFullscr !== void 0 ? _controls$showFullscr : Boolean(dockToggleFullscreen),
+			showViewportLock: (_controls$showViewpor = controls.showViewportLock) !== null && _controls$showViewpor !== void 0 ? _controls$showViewpor : true
+		});
 	}, [
 		isFloorMapView,
 		controls,
 		dockToggleFullscreen
 	]);
 	const topBarExtraActions = null;
+	/** 从侧栏/调色板拖入画布时，地图区高亮态（用于 dragleave/over 判定） */
 	const [mapPaletteDragActive, setMapPaletteDragActive] = (0, react.useState)(false);
+	/** 全局 dragend 时清除调色板拖入高亮，避免松手在画布外仍保持 active */
 	(0, react.useEffect)(() => {
 		const clear = () => setMapPaletteDragActive(false);
 		window.addEventListener("dragend", clear);
 		return () => window.removeEventListener("dragend", clear);
 	}, []);
+	/**
+	* 编辑态下的撤销 / 重做键盘快捷键：
+	* - Ctrl/⌘ + Z → undo
+	* - Ctrl/⌘ + Shift + Z 或 Ctrl/⌘ + Y → redo
+	* 在 input/textarea/contenteditable 聚焦时跳过，避免抢走表单原生撤销。
+	* 仅在容器内或容器获得焦点时响应，避免页面其它编辑区被劫持。
+	*/
+	(0, react.useEffect)(() => {
+		if (!isFloorMapView || mode !== "edit" || !(config === null || config === void 0 ? void 0 : config.canvasUi.canEdit)) return;
+		const onKeyDown = (e) => {
+			if (!(e.ctrlKey || e.metaKey)) return;
+			const key = e.key.toLowerCase();
+			const isUndoCombo = key === "z" && !e.shiftKey && !e.altKey;
+			const isRedoCombo = key === "z" && e.shiftKey && !e.altKey || key === "y" && !e.shiftKey && !e.altKey;
+			if (!isUndoCombo && !isRedoCombo) return;
+			const target = e.target;
+			if (target) {
+				const tag = target.tagName;
+				if (tag === "INPUT" || tag === "TEXTAREA") return;
+				if (target.isContentEditable) return;
+			}
+			const root = containerRef.current;
+			if (!root) return;
+			const active = document.activeElement;
+			const focusInside = active ? root.contains(active) : false;
+			const targetInside = target ? root.contains(target) : false;
+			if (!focusInside && !targetInside) return;
+			if (isUndoCombo && canUndo) {
+				e.preventDefault();
+				undoDraft();
+			} else if (isRedoCombo && canRedo) {
+				e.preventDefault();
+				redoDraft();
+			}
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [
+		isFloorMapView,
+		mode,
+		config === null || config === void 0 ? void 0 : config.canvasUi.canEdit,
+		canUndo,
+		canRedo,
+		undoDraft,
+		redoDraft,
+		containerRef
+	]);
+	/**
+	* 桌面端：在画布 drop 层释放拖拽时，解析 dataTransfer 并在场景坐标下落位图元。
+	*/
 	const handlePaletteDropOnCanvas = (0, react.useCallback)((e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -197,13 +455,17 @@ function PisellFloorMapLayoutInner(props, ref) {
 			elementKind: payload.elementKind,
 			dataSourceKey: payload.dataSourceKey,
 			recordId: payload.recordId,
-			recordIds: payload.recordIds
+			recordIds: payload.recordIds,
+			builtinShapeKey: payload.builtinShapeKey
 		});
 	}, [
 		isFloorMapView,
 		mode,
 		placeSceneElementFromPaletteDrop
 	]);
+	/**
+	* 触摸拖拽模拟 drop：由 {@link useFloorMapPaletteTouchDrag} 在松手时调用，逻辑同桌面 drop。
+	*/
 	const applyPaletteTouchDropInScene = (0, react.useCallback)((payload, cx, cy) => {
 		if (!isFloorMapView || mode !== "edit") return;
 		placeSceneElementFromPaletteDrop(cx, cy, {
@@ -211,7 +473,8 @@ function PisellFloorMapLayoutInner(props, ref) {
 			elementKind: payload.elementKind,
 			dataSourceKey: payload.dataSourceKey,
 			recordId: payload.recordId,
-			recordIds: payload.recordIds
+			recordIds: payload.recordIds,
+			builtinShapeKey: payload.builtinShapeKey
 		});
 	}, [
 		isFloorMapView,
@@ -227,9 +490,13 @@ function PisellFloorMapLayoutInner(props, ref) {
 		setMapPaletteDragActive,
 		onDropInScene: applyPaletteTouchDropInScene
 	});
+	/** 平面图下未配置对应 kind 的 `renderItemByKind` 时的占位渲染 */
 	const fallbackPlaceholderRender = (0, react.useCallback)((item) => {
 		return require_floorMapFallbackRender.renderFloorMapFallbackPlaceholder(item);
 	}, []);
+	/**
+	* 统一图元渲染入口：平面图优先按 kind 查 `renderItemByKind`，校验绑定/配置问题后回退占位或 `renderItem`。
+	*/
 	const effectiveRenderItem = (0, react.useCallback)((item, index, options) => {
 		const merged = item;
 		const kind = merged === null || merged === void 0 ? void 0 : merged.elementKind;
@@ -255,6 +522,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 		fallbackPlaceholderRender,
 		onElementRenderError
 	]);
+	/** 点击图元：编辑态同步选中 id，并透传业务 `onItemClick` */
 	const handleItemClick = (0, react.useCallback)((item, index, e) => {
 		if (isFloorMapView && mode === "edit") setSelectedId(item.id);
 		onItemClick === null || onItemClick === void 0 || onItemClick(item, index, e);
@@ -264,6 +532,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 		onItemClick,
 		setSelectedId
 	]);
+	/** 对外 ref：缩放/复位/套合视口/保存布局，见 {@link PisellFloorMapLayoutRef} */
 	(0, react.useImperativeHandle)(ref, () => ({
 		zoomIn: () => {
 			var _transformRef$current;
@@ -290,23 +559,59 @@ function PisellFloorMapLayoutInner(props, ref) {
 	const handleMapAreaBackgroundClick = (0, react.useCallback)((e) => {
 		if (!isFloorMapView || mode !== "edit") return;
 		const t = e.target;
-		if (t.closest(`.${PREFIX}-editable-item`)) return;
-		if (t.closest(`.${PREFIX}-edit-panel-wrap`)) return;
-		if (t.closest(`.${PREFIX}-view-controls`)) return;
-		if (t.closest(`.${PREFIX}-viewport-overlay`)) return;
-		if (t.closest(`.${PREFIX}-place-overlay`)) return;
-		if (t.closest(`.${PREFIX}-map-drop-layer`)) return;
+		if (t.closest(`.pisell-floor-map-layout-editable-item`)) return;
+		if (t.closest(`.pisell-floor-map-layout-edit-panel-wrap`)) return;
+		if (t.closest(`.pisell-floor-map-layout-view-controls`)) return;
+		if (t.closest(`.pisell-floor-map-layout-viewport-overlay`)) return;
+		if (t.closest(`.pisell-floor-map-layout-place-overlay`)) return;
+		if (t.closest(`.pisell-floor-map-layout-map-drop-layer`)) return;
 		setSelectedId(null);
 	}, [
 		isFloorMapView,
 		mode,
 		setSelectedId
 	]);
-	return /* @__PURE__ */ react.default.createElement("div", {
+	/** 右侧手机 Drawer：open 由 props 驱动关闭动画，选中清除延后到 afterOpenChange(false) */
+	const [phoneEditDrawerOpen, setPhoneEditDrawerOpen] = (0, react.useState)(false);
+	(0, react.useLayoutEffect)(() => {
+		if (editTopBarPhoneLayout && (editPanelParams === null || editPanelParams === void 0 ? void 0 : editPanelParams.itemId)) setPhoneEditDrawerOpen(true);
+	}, [editTopBarPhoneLayout, editPanelParams === null || editPanelParams === void 0 ? void 0 : editPanelParams.itemId]);
+	(0, react.useEffect)(() => {
+		if (!editTopBarPhoneLayout || !editPanelParams) setPhoneEditDrawerOpen(false);
+	}, [editTopBarPhoneLayout, editPanelParams]);
+	const handlePhoneEditDrawerClose = (0, react.useCallback)(() => {
+		setPhoneEditDrawerOpen(false);
+	}, []);
+	const handlePhoneEditDrawerAfterOpenChange = (0, react.useCallback)((open) => {
+		if (!open) setSelectedId(null);
+	}, [setSelectedId]);
+	const handleCanvasTabChange = (0, react.useCallback)((id) => {
+		if (id === "__pisell_floor_map_overview__") {
+			/**
+			* 进入全览：保留 `currentCanvasId`（用户上次浏览的画布），
+			* 这样全览中点回某画布或退出后还能继承视角缓存。
+			*/
+			setIsOverview(true);
+			setSelectedId(null);
+			return;
+		}
+		setIsOverview(false);
+		setCurrentCanvasId(id);
+		setSelectedId(null);
+	}, [setCurrentCanvasId, setSelectedId]);
+	/** 全览态下 CanvasTabs 高亮的 id；非全览态用真实当前画布 id */
+	const tabsCurrentCanvasId = isOverview ? require_floorMapLayoutConstants.FLOOR_MAP_OVERVIEW_TAB_ID : currentCanvasId;
+	/**
+	* 新版 All 视图为「单画布平铺所有画布区域」，区域单击/双击不再切换画布；
+	* 切回单画布仅通过顶部 Tab，handleCanvasTabChange 负责退出全览。
+	*/
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", {
 		ref: containerRef,
-		className: (0, classnames.default)(PREFIX, className, {
-			[`${PREFIX}-floor-map-view`]: isFloorMapView,
-			[`${PREFIX}-mode-edit`]: isFloorMapView && mode === "edit"
+		"data-appearance-mode": appearanceMode,
+		className: (0, classnames.default)(require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX, className, {
+			[`${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-floor-map-view`]: isFloorMapView,
+			[`${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-mode-edit`]: isFloorMapView && mode === "edit",
+			[`${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}--pseudo-fullscreen`]: isFullscreen
 		}),
 		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
 			display: "flex",
@@ -317,25 +622,24 @@ function PisellFloorMapLayoutInner(props, ref) {
 		config,
 		canvases: canvasesForTabs,
 		currentCanvasId,
-		onTabChange: (id) => {
-			setCurrentCanvasId(id);
-			setSelectedId(null);
-		},
+		onTabChange: handleCanvasTabChange,
 		canEditTabs: config.canvasUi.canEdit,
 		onAddCanvas: handleAddCanvas,
 		onRemoveCanvas: handleRemoveCanvas,
 		onRenameCanvas: handleRenameCanvas,
 		controls,
-		canvasTabsBarTrailing
+		canvasTabsBarTrailing,
+		phoneLayout: editTopBarPhoneLayout,
+		onUndo: config.canvasUi.canEdit ? undoDraft : void 0,
+		onRedo: config.canvasUi.canEdit ? redoDraft : void 0,
+		canUndo,
+		canRedo
 	}), isFloorMapView && mode === "edit" && config && useFullTopChrome && /* @__PURE__ */ react.default.createElement(require_FloorMapEditTopBar.default, {
 		mode: "full",
 		config,
 		canvases: canvasesForTabs,
 		currentCanvasId,
-		onTabChange: (id) => {
-			setCurrentCanvasId(id);
-			setSelectedId(null);
-		},
+		onTabChange: handleCanvasTabChange,
 		canEditTabs: config.canvasUi.canEdit,
 		onAddCanvas: handleAddCanvas,
 		onRemoveCanvas: handleRemoveCanvas,
@@ -347,25 +651,30 @@ function PisellFloorMapLayoutInner(props, ref) {
 		isFullscreen,
 		controls,
 		extraActions: topBarExtraActions,
-		canvasTabsBarTrailing
+		canvasTabsBarTrailing,
+		onUndo: config.canvasUi.canEdit ? undoDraft : void 0,
+		onRedo: config.canvasUi.canEdit ? redoDraft : void 0,
+		canUndo,
+		canRedo,
+		onExitEdit,
+		onCancelEdit: onExitEdit ? handleCancelEdit : void 0,
+		phoneLayout: editTopBarPhoneLayout
 	}), showReadModeCanvasTabsBar && /* @__PURE__ */ react.default.createElement("div", {
-		className: `${PREFIX}-edit-top-bar ${PREFIX}-read-canvas-tabs-bar`,
+		className: `pisell-floor-map-layout-edit-top-bar pisell-floor-map-layout-read-canvas-tabs-bar`,
 		role: "toolbar",
 		"aria-label": readCanvasTabsAriaLabel
-	}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ react.default.createElement(require_CanvasTabs.default, {
+	}, /* @__PURE__ */ react.default.createElement("div", { className: `pisell-floor-map-layout-edit-top-bar-tabs` }, /* @__PURE__ */ react.default.createElement(require_CanvasTabs.default, {
 		canvases: canvasesForTabs,
-		currentCanvasId,
-		onTabChange: (id) => {
-			setCurrentCanvasId(id);
-			setSelectedId(null);
-		},
+		currentCanvasId: tabsCurrentCanvasId,
+		onTabChange: handleCanvasTabChange,
 		canEdit: false,
-		className: `${PREFIX}-edit-top-bar-canvas-tabs`
-	})), hasCanvasTabsBarTrailing ? /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing) : null), loading && /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-loading` }, /* @__PURE__ */ react.default.createElement("span", null, loadingLabel)), saveError && !(isFloorMapView && mode === "edit" && config) && /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-save-error` }, typeof saveError === "string" ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message), /* @__PURE__ */ react.default.createElement("div", {
-		className: showSidebar ? `${PREFIX}-edit-layout` : void 0,
+		className: `pisell-floor-map-layout-edit-top-bar-canvas-tabs`
+	})), hasCanvasTabsBarTrailing ? /* @__PURE__ */ react.default.createElement("div", { className: `pisell-floor-map-layout-edit-top-bar-actions` }, canvasTabsBarTrailing) : null), loading && /* @__PURE__ */ react.default.createElement("div", { className: `pisell-floor-map-layout-loading` }, /* @__PURE__ */ react.default.createElement("span", null, loadingLabel)), saveError && !(isFloorMapView && mode === "edit" && config) && /* @__PURE__ */ react.default.createElement("div", { className: `pisell-floor-map-layout-save-error` }, typeof saveError === "string" ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message), /* @__PURE__ */ react.default.createElement("div", {
+		className: (0, classnames.default)(showSidebar && `pisell-floor-map-layout-edit-layout`, showSidebar && editTopBarPhoneLayout && `pisell-floor-map-layout-edit-layout--phone-toolbar`),
 		style: {
 			flex: 1,
-			display: "flex",
+			display: showSidebar && editTopBarPhoneLayout ? "block" : "flex",
+			flexDirection: showSidebar && !editTopBarPhoneLayout ? "row" : void 0,
 			minHeight: 0
 		}
 	}, showSidebar && /* @__PURE__ */ react.default.createElement(require_FloorMapToolbar.default, {
@@ -387,16 +696,26 @@ function PisellFloorMapLayoutInner(props, ref) {
 		saveError,
 		layoutDirty: isLayoutDirty,
 		onPaletteCardPointerDown: paletteTouchDrag.handlePaletteCardPointerDown,
-		consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag
+		consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag,
+		phoneLayout: editTopBarPhoneLayout,
+		defaultCollapsed: editTopBarPhoneLayout,
+		onRequestPlaceAtCanvasCenter: editTopBarPhoneLayout ? handlePlaceActiveAtViewportCenter : void 0
 	}), /* @__PURE__ */ react.default.createElement("div", {
 		ref: mapAreaRef,
-		className: (0, classnames.default)(showSidebar && `${PREFIX}-map-area`, editPanelVisible && `${PREFIX}-map-area--edit-panel-inset`),
-		style: {
+		className: (0, classnames.default)(showSidebar && `pisell-floor-map-layout-map-area`, editTopBarPhoneLayout && showSidebar && `pisell-floor-map-layout-map-area--phone-fill`, editPanelVisible && !editTopBarPhoneLayout && `pisell-floor-map-layout-map-area--edit-panel-inset`),
+		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, editTopBarPhoneLayout && showSidebar ? {
+			position: "absolute",
+			left: 0,
+			right: 0,
+			top: 0,
+			bottom: 0
+		} : {
 			flex: 1,
-			position: "relative",
+			position: "relative"
+		}), {}, {
 			minWidth: 0,
 			overflow: "hidden"
-		},
+		}),
 		onClick: handleMapAreaBackgroundClick,
 		onDragEnter: (e) => {
 			if (!isFloorMapView || mode !== "edit") return;
@@ -414,6 +733,8 @@ function PisellFloorMapLayoutInner(props, ref) {
 			var _mapAreaRef$current;
 			if (!mapPaletteDragActive) return;
 			const related = e.relatedTarget;
+			/** 图元侧栏经 Portal 挂到 body 时，移入侧栏不算离开「有效拖放区」链 */
+			if (related && related instanceof Element && (related.closest(`.pisell-floor-map-layout-toolbar`) || related.closest(`.pisell-floor-map-layout-edit-panel-wrap`) || related.closest(`.pisell-floor-map-layout-toolbar-phone-drawer-root`) || related.closest(`.pisell-floor-map-layout-edit-panel-phone-drawer-root`) || related.closest(".ant-drawer") || related.closest(".pisell-lowcode-drawer"))) return;
 			if (!((_mapAreaRef$current = mapAreaRef.current) === null || _mapAreaRef$current === void 0 ? void 0 : _mapAreaRef$current.contains(related))) setMapPaletteDragActive(false);
 		}
 	}, /* @__PURE__ */ react.default.createElement(react_zoom_pan_pinch.TransformWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
@@ -427,26 +748,40 @@ function PisellFloorMapLayoutInner(props, ref) {
 		limitToBounds: pan.boundary !== "none"
 	}, { step: zoomConfig.step }), {}, {
 		panning: {
-			disabled: pan.enabled === false || isInteractingWithElement,
+			disabled: pan.enabled === false || isInteractingWithElement || viewportLocked,
 			velocityDisabled: true
 		},
+		wheel: { disabled: viewportLocked },
+		pinch: { disabled: viewportLocked },
 		doubleClick: { disabled: true },
 		onTransformed: (_, state) => {
 			setScale(state.scale);
-			lastTransformRef.current = {
-				x: state.positionX,
-				y: state.positionY,
-				scale: state.scale
-			};
-		}
+			/**
+			* 由 hook 内部写 lastTransformRef、判定 fitBounds 激活态。
+			* 不在 onTransformed 持久化：挂载/重挂载会触发一次「初始 transform」回调，
+			* 写到 localStorage 会覆盖用户上次保存的视角；
+			* 持久化改由 onPanningStop / onZoomStop / onPinchingStop / onWheelStop 触发。
+			*/
+			notifyTransformed(state.positionX, state.positionY, state.scale);
+		},
+		onPanningStop: persistCurrentViewport,
+		onZoomStop: persistCurrentViewport,
+		onPinchingStop: persistCurrentViewport,
+		onWheelStop: persistCurrentViewport
 	}), (ctx) => {
 		var _effectiveMapLayer$sn;
-		transformRef.current = ctx;
+		/**
+		* 不直接 transformRef.current = ctx：
+		* attachTransformContext 内部会比对 ctx 实例并在每次 wrapper 重挂载时
+		* 立即 schedule 一次 restore，避免「namespace 异步 → autoFit 抢跑 →
+		* restore 被 autoFit 动画吃掉」导致首屏不应用缓存的时序坑。
+		*/
+		attachTransformContext(ctx);
 		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(react_zoom_pan_pinch.TransformComponent, {
 			wrapperStyle: {
 				width: "100%",
 				height: "100%",
-				backgroundColor: "#F2F4F7",
+				backgroundColor: isOverview ? overviewBackgroundColor : canvasBackgroundColor,
 				overflow: "visible"
 			},
 			contentStyle: {
@@ -456,9 +791,36 @@ function PisellFloorMapLayoutInner(props, ref) {
 				minHeight: contentHeight,
 				position: "relative",
 				overflow: "visible",
-				backgroundColor: "#F2F4F7"
+				backgroundColor: isOverview ? overviewBackgroundColor : canvasBackgroundColor
 			}
-		}, /* @__PURE__ */ react.default.createElement(require_MapLayer.default, {
+		}, isOverview && overviewLayout && config ? /* @__PURE__ */ react.default.createElement(
+			"div",
+			/**
+			* 全览模式：不渲染 MapLayer 背景 / 网格 / placeOverlay / dropLayer；
+			* 每个画布的图元由 FloorMapOverview 在 contentOffset 的内部绝对定位渲染，
+			* 缩放/平移/锁定/全屏/fitBounds 由外层 TransformWrapper + ViewControls 接管。
+			*/
+			{ style: {
+				position: "absolute",
+				left: contentOffsetX,
+				top: contentOffsetY,
+				width: overviewLayout.totalWidth,
+				height: overviewLayout.totalHeight
+			} },
+			/* @__PURE__ */ react.default.createElement(require_FloorMapOverview.default, {
+				overviewLayout,
+				config,
+				itemUnit: effectiveItemUnit,
+				renderItem: effectiveRenderItem,
+				viewportScale: scale,
+				enableHover,
+				onItemClick: handleItemClick,
+				onItemHover,
+				onItemLeave,
+				getMergedItemWrapperStyle,
+				readModeSelectedItemId
+			})
+		) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(require_MapLayer.default, {
 			config: effectiveMapLayer,
 			contentWidth,
 			contentHeight,
@@ -487,6 +849,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 		}) : /* @__PURE__ */ react.default.createElement(require_ItemLayer.default, {
 			items,
 			renderItem: effectiveRenderItem,
+			viewportScale: scale,
 			rowKey,
 			cellSize,
 			itemUnit: effectiveItemUnit,
@@ -501,7 +864,8 @@ function PisellFloorMapLayoutInner(props, ref) {
 			onItemHover,
 			onItemLeave,
 			getMergedItemWrapperStyle,
-			onInteractionChange: setIsInteractingWithElement
+			onInteractionChange: setIsInteractingWithElement,
+			readModeSelectedItemId
 		}), isFloorMapView && mode === "edit" && (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && /* @__PURE__ */ react.default.createElement("div", {
 			className: placeOverlayClass,
 			style: {
@@ -511,7 +875,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 			onClick: handleCanvasPlaceClick
 		}), isFloorMapView && mode === "edit" && /* @__PURE__ */ react.default.createElement("div", {
 			ref: mapDropLayerRef,
-			className: (0, classnames.default)(`${PREFIX}-map-drop-layer`, { [`${PREFIX}-map-drop-layer-active`]: mapPaletteDragActive }),
+			className: (0, classnames.default)(`pisell-floor-map-layout-map-drop-layer`, { [`pisell-floor-map-layout-map-drop-layer-active`]: mapPaletteDragActive }),
 			style: {
 				width: contentWidth,
 				height: contentHeight
@@ -521,24 +885,28 @@ function PisellFloorMapLayoutInner(props, ref) {
 				ev.stopPropagation();
 			},
 			onDrop: handlePaletteDropOnCanvas
-		})), /* @__PURE__ */ react.default.createElement(require_ViewControlsWithZoom.ViewControlsWithZoom, {
+		}))), /* @__PURE__ */ react.default.createElement(require_ViewControlsWithZoom.ViewControlsWithZoom, {
 			config: viewControlsConfig,
 			scale,
 			isFullscreen,
+			fitBoundsActive: isAtFitBounds,
 			fitBounds,
 			toggleFullscreen: dockToggleFullscreen,
-			mapGridVisible: Boolean(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.showGrid),
-			onToggleMapGrid: isFloorMapView ? toggleDraftCanvasShowGrid : void 0,
+			mapGridVisible: isOverview ? false : Boolean(effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.showGrid),
+			onToggleMapGrid: isFloorMapView && !isOverview ? toggleDraftCanvasShowGrid : void 0,
+			viewportLocked,
+			onToggleViewportLock: isFloorMapView ? toggleViewportLocked : void 0,
 			dockChrome: isFloorMapView,
+			dockExpandedToolButtons: viewportDockToolButtons,
 			dockExpandedTrailing: viewportDockTrailing,
 			autoCollapseDockMs: 1e4
-		}), isFloorMapView && floorMapViewportOverlay != null ? /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-viewport-overlay`, { [`${PREFIX}-viewport-overlay--bottom-start`]: viewportOverlayPlacement === "bottom-start" }, viewportOverlayClassName) }, typeof floorMapViewportOverlay === "function" ? floorMapViewportOverlay({
+		}), isFloorMapView && floorMapViewportOverlay != null ? /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-viewport-overlay`, { [`${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-viewport-overlay--bottom-start`]: viewportOverlayPlacement === "bottom-start" }, viewportOverlayClassName) }, typeof floorMapViewportOverlay === "function" ? floorMapViewportOverlay({
 			items,
 			dataSources,
 			currentCanvasId,
 			mode
-		}) : floorMapViewportOverlay) : null, isFloorMapView && mode === "edit" && editPanelParams && config && dataSources && /* @__PURE__ */ react.default.createElement("div", {
-			className: (0, classnames.default)(`${PREFIX}-edit-panel-wrap`, mapAreaSize.height > 0 && `${PREFIX}-edit-panel-wrap-constrained`),
+		}) : floorMapViewportOverlay) : null, isFloorMapView && mode === "edit" && editPanelParams && config && dataSources && !editTopBarPhoneLayout && /* @__PURE__ */ react.default.createElement("div", {
+			className: (0, classnames.default)(`pisell-floor-map-layout-edit-panel-wrap`, mapAreaSize.height > 0 && `pisell-floor-map-layout-edit-panel-wrap-constrained`),
 			style: mapAreaSize.height > 0 ? {
 				height: mapAreaSize.height - 32,
 				maxHeight: mapAreaSize.height - 32,
@@ -551,8 +919,32 @@ function PisellFloorMapLayoutInner(props, ref) {
 			dataSources,
 			savingRecord
 		}))));
-	}))));
+	})))), editTopBarPhoneLayout && editPanelParams && config && dataSources && /* @__PURE__ */ react.default.createElement(antd.Drawer, {
+		placement: "right",
+		open: phoneEditDrawerOpen,
+		onClose: handlePhoneEditDrawerClose,
+		afterOpenChange: handlePhoneEditDrawerAfterOpenChange,
+		width: "min(320px, 88vw)",
+		zIndex: 2002,
+		maskClosable: true,
+		destroyOnClose: false,
+		closable: false,
+		rootClassName: `pisell-floor-map-layout-edit-panel-phone-drawer-root`,
+		classNames: { body: `pisell-floor-map-layout-edit-panel-phone-drawer-body` },
+		styles: { body: {
+			padding: 0,
+			overflow: "auto",
+			height: "100%"
+		} },
+		getContainer: typeof document !== "undefined" ? () => document.body : void 0
+	}, /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`pisell-floor-map-layout-edit-panel-wrap`, `pisell-floor-map-layout-edit-panel-wrap--phone-drawer`) }, /* @__PURE__ */ react.default.createElement(require_FloorMapEditPanel.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, editPanelParams), {}, {
+		config,
+		dataSources,
+		savingRecord,
+		className: `pisell-floor-map-layout-edit-panel--phone-drawer`
+	})))));
 }
+/** 空间布局根组件：阅读/编辑、列表与平面图双模式，ref 见 {@link PisellFloorMapLayoutRef} */
 const PisellFloorMapLayout = react.default.forwardRef(PisellFloorMapLayoutInner);
 //#endregion
 exports.default = PisellFloorMapLayout;