@pisell/materials 1.8.38 → 1.8.41

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -16,12 +16,10 @@ 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_FloorMapLayoutContext = require("./context/FloorMapLayoutContext.js");
 const require_mergeFloorMapLayoutContext = require("./context/mergeFloorMapLayoutContext.js");
-const require_floorMapLayoutConstants = require("./floorMapLayoutConstants.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
@@ -35,13 +33,10 @@ require("./PisellFloorMapLayout.less");
 * PisellFloorMapLayout - 空间布局视图
 * 支持两种用法：1) 仅传入 items + renderItem（原有用法）；2) 传入 floorMapConfig + dataSources + mode 使用平面图视图（含多画布/编辑态）
 */
-/**
-* 布局根实现（由 {@link PisellFloorMapLayout} forwardRef 包裹）。
-* 负责：上下文与 props 合并、编辑态/阅读态分支、Transform 视口、图元层与工具栏联动。
-*/
+const PREFIX = "pisell-floor-map-layout";
 function PisellFloorMapLayoutInner(props, ref) {
-	var _ref, _currentCanvas$mapLay2, _currentCanvas$mapLay3, _engineCtx$engine, _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, canvasTabsBarTrailing, viewportDockToolButtons, viewportDockTrailing, viewportPersist = true, viewportPersistNamespace } = require_mergeFloorMapLayoutContext.mergeFloorMapLayoutPropsFromContext(props, require_FloorMapLayoutContext.useFloorMapLayoutContext());
+	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());
 	const { token } = antd.theme.useToken();
 	const isFloorMapView = Boolean(floorMapConfigProp);
 	const contentOffsetRef = (0, react.useRef)({
@@ -50,7 +45,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, undoDraft, redoDraft, canUndo, canRedo, discardDraft } = 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 } = require_useFloorMapEditState.useFloorMapEditState({
 		floorMapConfigProp,
 		isFloorMapView,
 		itemsProp,
@@ -61,46 +56,21 @@ function PisellFloorMapLayoutInner(props, ref) {
 		dataSourceFormColumns,
 		dataSourceRecordForm,
 		dataSourceLabels,
-		layoutPrefix: require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX,
+		layoutPrefix: PREFIX,
 		contentOffsetRef,
 		showDataSourceRecordFormBlock
 	});
-	/**
-	* 当前选中的画布配置：用于提取当前画布级 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
-	]);
-	/**
-	* 「取消编辑」组合：先丢弃 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 : {});
+		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 : {});
 	}, [
 		isFloorMapView,
-		currentCanvas,
+		config,
+		currentCanvasId,
 		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;
 	/**
 	* 必须与下方 TransformWrapper 的 `key` 完全一致。
 	* 远程/合并配置落地后 boundingPadding 等会变 → Wrapper 重挂载 → 若 autoFit 仍按旧「仅 canvasId」帧认为已 done，首屏会停在初始 transform；切换画布才因 id 变化再次 fit。
@@ -117,13 +87,11 @@ function PisellFloorMapLayoutInner(props, ref) {
 		effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding,
 		zoom.defaultScale
 	]);
-	/** 供顶栏 Tab 使用：合并草稿画布等后的画布列表 */
 	const canvasesForTabs = (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]);
-	/** 阅读态是否展示画布 Tab：多启用画布或配置了 `canvasTabsBarTrailing` 时出现 */
 	const showReadModeCanvasTabsBar = (0, react.useMemo)(() => {
 		if (!isFloorMapView || mode !== "read" || !config) return false;
 		if (hasCanvasTabsBarTrailing) return true;
@@ -135,12 +103,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");
@@ -180,29 +148,9 @@ 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;
-	/**
-	* 视口持久化 key：
-	*   - 仅平面图模式启用（其它模式没有「画布」概念）
-	*   - `viewportPersist === false` 或无 currentCanvasId 时关闭
-	*   - 有 namespace 时拼成 `${ns}:${canvasId}`，隔离不同业务场景（店铺 / 平面图）
-	*   - 未传 namespace 时 fallback 为仅 `${canvasId}`，小心跨场景可能共享视角
-	*   - 不感知 boundingPadding / defaultScale 等渲染参数变化，避免 padding 调整导致缓存失效
-	*/
-	const viewportPersistKey = (0, react.useMemo)(() => {
-		if (viewportPersist === false) return void 0;
-		if (!isFloorMapView || !currentCanvasId) return void 0;
-		return viewportPersistNamespace ? `${viewportPersistNamespace}:${currentCanvasId}` : currentCanvasId;
-	}, [
-		viewportPersist,
-		viewportPersistNamespace,
-		isFloorMapView,
-		currentCanvasId
-	]);
-	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({
+	const { containerRef, mapAreaRef, mapAreaSize, contentWidth, contentHeight, contentOffsetX, contentOffsetY, initialPositionX, initialPositionY, zoomConfig, scale, setScale, isFullscreen, toggleFullscreen, fitBounds, lastTransformRef, isInteractingWithElement, setIsInteractingWithElement } = require_useFloorMapTransformMetrics.useFloorMapTransformMetrics({
 		items,
 		cellSize,
 		itemGap,
@@ -213,115 +161,29 @@ function PisellFloorMapLayoutInner(props, ref) {
 		transformRef,
 		contentOffsetRef,
 		boundingPadding: effectiveMapLayer === null || effectiveMapLayer === void 0 ? void 0 : effectiveMapLayer.boundingPadding,
-		frameResetKey: isFloorMapView ? transformWrapperKey : void 0,
-		viewportPersistKey
+		frameResetKey: isFloorMapView ? transformWrapperKey : void 0
 	});
-	/** 编辑态全屏策略：toggle 全屏与编辑态强绑定；locked 始终全屏顶栏；disabled 无全屏 */
+	/** 编辑态全屏策略：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 行为保持原样：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 时仅内存态，默认未锁定）。
-	*/
+	/** toggle 时左下 Dock 展示全屏；locked/disabled 不传 API */
+	const dockToggleFullscreen = isFloorMapView && fsMode === "toggle" ? toggleFullscreen : void 0;
 	const viewControlsConfig = (0, react.useMemo)(() => {
-		var _controls$showFullscr, _controls$showViewpor;
+		var _controls$showFullscr;
 		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),
-			showViewportLock: (_controls$showViewpor = controls.showViewportLock) !== null && _controls$showViewpor !== void 0 ? _controls$showViewpor : true
-		});
+		return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, controls), {}, { showFullscreen: (_controls$showFullscr = controls.showFullscreen) !== null && _controls$showFullscr !== void 0 ? _controls$showFullscr : Boolean(dockToggleFullscreen) });
 	}, [
 		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();
@@ -342,9 +204,6 @@ function PisellFloorMapLayoutInner(props, ref) {
 		mode,
 		placeSceneElementFromPaletteDrop
 	]);
-	/**
-	* 触摸拖拽模拟 drop：由 {@link useFloorMapPaletteTouchDrag} 在松手时调用，逻辑同桌面 drop。
-	*/
 	const applyPaletteTouchDropInScene = (0, react.useCallback)((payload, cx, cy) => {
 		if (!isFloorMapView || mode !== "edit") return;
 		placeSceneElementFromPaletteDrop(cx, cy, {
@@ -368,13 +227,9 @@ 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;
@@ -400,7 +255,6 @@ 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);
@@ -410,7 +264,6 @@ function PisellFloorMapLayoutInner(props, ref) {
 		onItemClick,
 		setSelectedId
 	]);
-	/** 对外 ref：缩放/复位/套合视口/保存布局，见 {@link PisellFloorMapLayoutRef} */
 	(0, react.useImperativeHandle)(ref, () => ({
 		zoomIn: () => {
 			var _transformRef$current;
@@ -437,12 +290,12 @@ function PisellFloorMapLayoutInner(props, ref) {
 	const handleMapAreaBackgroundClick = (0, react.useCallback)((e) => {
 		if (!isFloorMapView || mode !== "edit") return;
 		const t = e.target;
-		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;
+		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;
 		setSelectedId(null);
 	}, [
 		isFloorMapView,
@@ -451,10 +304,9 @@ function PisellFloorMapLayoutInner(props, ref) {
 	]);
 	return /* @__PURE__ */ react.default.createElement("div", {
 		ref: containerRef,
-		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
+		className: (0, classnames.default)(PREFIX, className, {
+			[`${PREFIX}-floor-map-view`]: isFloorMapView,
+			[`${PREFIX}-mode-edit`]: isFloorMapView && mode === "edit"
 		}),
 		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
 			display: "flex",
@@ -474,11 +326,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 		onRemoveCanvas: handleRemoveCanvas,
 		onRenameCanvas: handleRenameCanvas,
 		controls,
-		canvasTabsBarTrailing,
-		onUndo: config.canvasUi.canEdit ? undoDraft : void 0,
-		onRedo: config.canvasUi.canEdit ? redoDraft : void 0,
-		canUndo,
-		canRedo
+		canvasTabsBarTrailing
 	}), isFloorMapView && mode === "edit" && config && useFullTopChrome && /* @__PURE__ */ react.default.createElement(require_FloorMapEditTopBar.default, {
 		mode: "full",
 		config,
@@ -499,18 +347,12 @@ function PisellFloorMapLayoutInner(props, ref) {
 		isFullscreen,
 		controls,
 		extraActions: topBarExtraActions,
-		canvasTabsBarTrailing,
-		onUndo: config.canvasUi.canEdit ? undoDraft : void 0,
-		onRedo: config.canvasUi.canEdit ? redoDraft : void 0,
-		canUndo,
-		canRedo,
-		onExitEdit,
-		onCancelEdit: onExitEdit ? handleCancelEdit : void 0
+		canvasTabsBarTrailing
 	}), showReadModeCanvasTabsBar && /* @__PURE__ */ react.default.createElement("div", {
-		className: `pisell-floor-map-layout-edit-top-bar pisell-floor-map-layout-read-canvas-tabs-bar`,
+		className: `${PREFIX}-edit-top-bar ${PREFIX}-read-canvas-tabs-bar`,
 		role: "toolbar",
 		"aria-label": readCanvasTabsAriaLabel
-	}, /* @__PURE__ */ react.default.createElement("div", { className: `pisell-floor-map-layout-edit-top-bar-tabs` }, /* @__PURE__ */ react.default.createElement(require_CanvasTabs.default, {
+	}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ react.default.createElement(require_CanvasTabs.default, {
 		canvases: canvasesForTabs,
 		currentCanvasId,
 		onTabChange: (id) => {
@@ -518,9 +360,9 @@ function PisellFloorMapLayoutInner(props, ref) {
 			setSelectedId(null);
 		},
 		canEdit: false,
-		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: showSidebar ? `${require_floorMapLayoutConstants.FLOOR_MAP_LAYOUT_CLASS_PREFIX}-edit-layout` : void 0,
+		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,
 		style: {
 			flex: 1,
 			display: "flex",
@@ -548,7 +390,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 		consumeToolbarClickIfTouchDrag: paletteTouchDrag.consumeToolbarClickIfTouchDrag
 	}), /* @__PURE__ */ react.default.createElement("div", {
 		ref: mapAreaRef,
-		className: (0, classnames.default)(showSidebar && `pisell-floor-map-layout-map-area`, editPanelVisible && `pisell-floor-map-layout-map-area--edit-panel-inset`),
+		className: (0, classnames.default)(showSidebar && `${PREFIX}-map-area`, editPanelVisible && `${PREFIX}-map-area--edit-panel-inset`),
 		style: {
 			flex: 1,
 			position: "relative",
@@ -585,40 +427,26 @@ function PisellFloorMapLayoutInner(props, ref) {
 		limitToBounds: pan.boundary !== "none"
 	}, { step: zoomConfig.step }), {}, {
 		panning: {
-			disabled: pan.enabled === false || isInteractingWithElement || viewportLocked,
+			disabled: pan.enabled === false || isInteractingWithElement,
 			velocityDisabled: true
 		},
-		wheel: { disabled: viewportLocked },
-		pinch: { disabled: viewportLocked },
 		doubleClick: { disabled: true },
 		onTransformed: (_, state) => {
 			setScale(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
+			lastTransformRef.current = {
+				x: state.positionX,
+				y: state.positionY,
+				scale: state.scale
+			};
+		}
 	}), (ctx) => {
 		var _effectiveMapLayer$sn;
-		/**
-		* 不直接 transformRef.current = ctx：
-		* attachTransformContext 内部会比对 ctx 实例并在每次 wrapper 重挂载时
-		* 立即 schedule 一次 restore，避免「namespace 异步 → autoFit 抢跑 →
-		* restore 被 autoFit 动画吃掉」导致首屏不应用缓存的时序坑。
-		*/
-		attachTransformContext(ctx);
+		transformRef.current = 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: canvasBackgroundColor,
+				backgroundColor: "#F2F4F7",
 				overflow: "visible"
 			},
 			contentStyle: {
@@ -628,7 +456,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 				minHeight: contentHeight,
 				position: "relative",
 				overflow: "visible",
-				backgroundColor: canvasBackgroundColor
+				backgroundColor: "#F2F4F7"
 			}
 		}, /* @__PURE__ */ react.default.createElement(require_MapLayer.default, {
 			config: effectiveMapLayer,
@@ -659,7 +487,6 @@ function PisellFloorMapLayoutInner(props, ref) {
 		}) : /* @__PURE__ */ react.default.createElement(require_ItemLayer.default, {
 			items,
 			renderItem: effectiveRenderItem,
-			viewportScale: scale,
 			rowKey,
 			cellSize,
 			itemUnit: effectiveItemUnit,
@@ -674,8 +501,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 			onItemHover,
 			onItemLeave,
 			getMergedItemWrapperStyle,
-			onInteractionChange: setIsInteractingWithElement,
-			readModeSelectedItemId
+			onInteractionChange: setIsInteractingWithElement
 		}), isFloorMapView && mode === "edit" && (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && /* @__PURE__ */ react.default.createElement("div", {
 			className: placeOverlayClass,
 			style: {
@@ -685,7 +511,7 @@ function PisellFloorMapLayoutInner(props, ref) {
 			onClick: handleCanvasPlaceClick
 		}), isFloorMapView && mode === "edit" && /* @__PURE__ */ react.default.createElement("div", {
 			ref: mapDropLayerRef,
-			className: (0, classnames.default)(`pisell-floor-map-layout-map-drop-layer`, { [`pisell-floor-map-layout-map-drop-layer-active`]: mapPaletteDragActive }),
+			className: (0, classnames.default)(`${PREFIX}-map-drop-layer`, { [`${PREFIX}-map-drop-layer-active`]: mapPaletteDragActive }),
 			style: {
 				width: contentWidth,
 				height: contentHeight
@@ -699,24 +525,20 @@ function PisellFloorMapLayoutInner(props, ref) {
 			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,
-			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)(`${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({
+		}), 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({
 			items,
 			dataSources,
 			currentCanvasId,
 			mode
 		}) : floorMapViewportOverlay) : null, isFloorMapView && mode === "edit" && editPanelParams && config && dataSources && /* @__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`),
+			className: (0, classnames.default)(`${PREFIX}-edit-panel-wrap`, mapAreaSize.height > 0 && `${PREFIX}-edit-panel-wrap-constrained`),
 			style: mapAreaSize.height > 0 ? {
 				height: mapAreaSize.height - 32,
 				maxHeight: mapAreaSize.height - 32,
@@ -731,7 +553,6 @@ function PisellFloorMapLayoutInner(props, ref) {
 		}))));
 	}))));
 }
-/** 空间布局根组件：阅读/编辑、列表与平面图双模式，ref 见 {@link PisellFloorMapLayoutRef} */
 const PisellFloorMapLayout = react.default.forwardRef(PisellFloorMapLayoutInner);
 //#endregion
 exports.default = PisellFloorMapLayout;

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.less

@@ -1,8 +1,3 @@
-/* 伪全屏宿主：锁定 body 滚动，避免双滚动条与触摸滑动穿透 */
-body.pisell-floor-map-layout-fullscreen-host {
-  overflow: hidden !important;
-}
-
 .pisell-floor-map-layout {
   position: relative;
   width: 100%;
@@ -10,23 +5,6 @@ body.pisell-floor-map-layout-fullscreen-host {
   overflow: hidden;
   background: #fafafa;
 
-  /**
-   * 伪全屏：撑满视口，替代浏览器 Fullscreen API；与资源墙大屏（pisell-resource-wall-fixed-viewport）
-   * 一致体验。z-index 故意高于常见弹层但低于 antd Modal 默认 1000，必要时可在宿主侧覆盖。
-   */
-  &--pseudo-fullscreen {
-    position: fixed !important;
-    inset: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100% !important;
-    max-height: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    z-index: 2000;
-    background: #fff;
-  }
-
   &-loading,
   &-save-error {
     position: absolute;

package/lib/components/pisellFloorMapLayout/components/EditableItemLayer.js

@@ -241,7 +241,7 @@ function EditableItemLayer(props) {
 				}, shapeStyle), wrapperStyle), {}, { zIndex: isSelected ? SELECTED_ITEM_STACK_Z + ((_item$zIndex2 = item.zIndex) !== null && _item$zIndex2 !== void 0 ? _item$zIndex2 : 0) : baseZ }),
 				onPointerDown: (e) => handlePointerDown(e, item, index),
 				onClick: (e) => handleItemClick(e, item)
-			}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-editable-item-inner` }, renderItem(item, index, { viewportScale: scale })), isSelected && !isSceneLayoutTransformLocked(merged) && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, [
+			}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-editable-item-inner` }, renderItem(item, index)), isSelected && !isSceneLayoutTransformLocked(merged) && /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, [
 				"nw",
 				"n",
 				"ne",
@@ -273,8 +273,7 @@ function EditableItemLayer(props) {
 		handleItemClick,
 		handleResizePointerDown,
 		getMergedItemWrapperStyle,
-		editQuickBar,
-		scale
+		editQuickBar
 	]);
 	return /* @__PURE__ */ react.default.createElement("div", {
 		ref: contentRef,

package/lib/components/pisellFloorMapLayout/components/FigmaTableCard.d.ts

@@ -31,9 +31,9 @@ interface FigmaTableCardItem {
 }
 /** 从 merged item + dataSources 得到卡片数据 */
 declare function getFigmaTableCardFromMerged(item: FloorMapMergedItem, dataSources: FloorMapDataSources): FigmaTableCardItem;
-/** 渲染 Figma 样式的方桌卡片（上下小条 + 资源信息标题栏 + 白底卡片 + 状态色边框） */
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 白底卡片 + 状态边框） */
 declare function renderFigmaStyleTableCard(cardItem: FigmaTableCardItem): React.JSX.Element;
-/** 渲染 Figma 样式的圆桌卡片（顶部资源信息 chip + 圆形主体，圆形主体只展示状态相关内容） */
+/** 渲染 Figma 样式的圆桌卡片（圆形轮廓，展示桌号/状态/人数/区域） */
 declare function renderFigmaStyleRoundTableCard(cardItem: FigmaTableCardItem): React.JSX.Element;
 /** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
 declare function getRenderItemByKindTable(dataSources: FloorMapDataSources): (item: unknown) => React.JSX.Element;