@pisell/materials 1.8.41 → 1.8.43

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.less

@@ -49,6 +49,25 @@
     border-left: 1px solid #f0f0f0;
   }
 
+  /**
+   * 编辑态 compact / full：画布切换条上下收紧；操作区（含 undo/redo）左右收紧。
+   */
+  &--compact.pisell-floor-map-layout-read-canvas-tabs-bar,
+  &--full-chrome.pisell-floor-map-layout-read-canvas-tabs-bar {
+    min-height: 40px;
+
+    .pisell-floor-map-layout-edit-top-bar-canvas-tabs.pisell-floor-map-layout-canvas-tabs {
+      padding: 3px 6px;
+      gap: 6px;
+    }
+  }
+
+  &--compact > .pisell-floor-map-layout-edit-top-bar-actions,
+  &--full-chrome > .pisell-floor-map-layout-edit-top-bar-actions {
+    padding: 0 6px;
+    gap: 6px;
+  }
+
   &-error {
     max-width: 160px;
     font-size: 12px;
@@ -58,7 +77,7 @@
     text-overflow: ellipsis;
   }
 
-  /* 全屏顶栏：未保存标签在保存按钮左侧，单行对齐 */
+  /* 全屏顶栏右侧：取消 / 完成按钮组（未保存徽章已外提到 history 左侧，不再属于本组） */
 
   &-save-group {
     display: inline-flex;
@@ -67,6 +86,28 @@
     gap: 10px;
   }
 
+  /* 撤销 / 重做按钮组：作为 actions 区第一组元素显示 */
+  &-history {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+
+    /** 关闭 antd text 按钮的 hover / active 视觉反馈，避免顶栏闪动 */
+    .pisell-floor-map-layout-edit-top-bar-history-btn {
+      &.ant-btn-text:not(:disabled),
+      &.pisell-lowcode-btn-text:not(:disabled) {
+        &:hover,
+        &:focus-visible,
+        &:active {
+          color: rgba(0, 0, 0, 0.88);
+          background: transparent;
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
   &-dirty-badge {
     display: inline-flex;
     align-items: center;
@@ -161,4 +202,57 @@
       background: transparent;
     }
   }
+
+  /**
+   * 与阅读态同一行的画布 Tab：多画布时不压缩胶囊，整行横向滑动（触摸友好）。
+   */
+  &.pisell-floor-map-layout-read-canvas-tabs-bar {
+    .pisell-floor-map-layout-edit-top-bar-tabs {
+      flex: 1;
+      min-width: 0;
+      /** 覆盖根级 &-tabs 的 overflow:hidden */
+      overflow-x: auto;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .pisell-floor-map-layout-edit-top-bar-canvas-tabs.pisell-floor-map-layout-canvas-tabs {
+      flex: 0 0 auto;
+      width: max-content;
+      max-width: none;
+    }
+  }
+
+  /**
+   * 手机编辑：首行与阅读态 `read-canvas-tabs-bar` 一致（仅多 canEdit 能力）；
+   * 第二行放撤销/业务尾区/保存等，**左对齐**（不居中、不整行右对齐）。
+   */
+  &--phone-edit-canvas-row {
+    flex-direction: row;
+    align-items: center;
+    min-height: 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  &--phone-actions-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    min-height: 44px;
+    background: rgba(0, 0, 0, 0.04);
+    border-bottom: 1px solid #f0f0f0;
+    z-index: 3;
+
+    .pisell-floor-map-layout-edit-top-bar-actions {
+      flex: 1;
+      min-width: 0;
+      padding: 0 4px;
+      border-left: none;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      row-gap: 4px;
+      column-gap: 6px;
+    }
+  }
 }

package/es/components/pisellFloorMapLayout/components/FloorMapOverview.js

@@ -0,0 +1,94 @@
+import ItemLayer from "./ItemLayer.js";
+import { FLOOR_MAP_LAYOUT_CLASS_PREFIX } from "../floorMapLayoutConstants.js";
+import useEngineContext from "../../../hooks/useEngineContext.js";
+import { getFloorMapCanvasDisplayName } from "../utils/floorMapCanvasDisplay.js";
+import { mergeCanvasesForTabs } from "../utils/mergeCanvasesForTabs.js";
+import React from "react";
+import { locales } from "@pisell/utils";
+import classNames from "classnames";
+import "./FloorMapOverview.less";
+//#region src/components/pisellFloorMapLayout/components/FloorMapOverview.tsx
+/**
+* FloorMapOverview - 阅读态「All」全览视图（纯渲染版）
+*
+* 仅负责把 {@link OverviewLayout} 中各画布的图元渲染到对应的绝对定位区域里；
+* 由 PisellFloorMapLayout 在主 TransformWrapper 内挂载，与单画布共享同一套
+* 视口控件（缩放、平移、锁定、全屏、fitBounds、网格按钮等）。
+*
+* 设计要点：
+* - 不再自带 TransformWrapper / ResizeObserver / fit 算法；
+* - 每个画布作为独立区域，仅一条细边框作分隔，无背景色/网格；
+* - 区域左上角用小 chip 显示画布名；chip 不拦截图元交互；
+* - 仅渲染 ItemLayer（阅读态），与单画布的 hover/click 行为一致；编辑层不渲染。
+*/
+const I18N_EMPTY = "pisell-floor-map-layout.overview.empty";
+function FloorMapOverview(props) {
+	var _engineCtx$engine;
+	const { overviewLayout, config, itemUnit = "pixel", renderItem, viewportScale, enableHover = true, onItemClick, onItemHover, onItemLeave, getMergedItemWrapperStyle, readModeSelectedItemId, className } = props;
+	const engineCtx = useEngineContext();
+	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";
+	if (overviewLayout.areas.length === 0) return /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview`, `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview--empty`, className),
+		style: {
+			width: "100%",
+			height: "100%"
+		}
+	}, locales.getText(I18N_EMPTY));
+	/**
+	* 用 mergeCanvasesForTabs 构造 canvasId → displayName 的映射；
+	* 避免在循环里多次调用。
+	*/
+	const displayNameById = /* @__PURE__ */ new Map();
+	for (const canvas of mergeCanvasesForTabs(config)) displayNameById.set(canvas.id, getFloorMapCanvasDisplayName(canvas, engineLocale));
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview`, className),
+		style: {
+			position: "relative",
+			width: overviewLayout.totalWidth,
+			height: overviewLayout.totalHeight
+		}
+	}, overviewLayout.areas.map((area) => {
+		var _displayNameById$get;
+		const displayName = (_displayNameById$get = displayNameById.get(area.canvasId)) !== null && _displayNameById$get !== void 0 ? _displayNameById$get : area.canvasId;
+		const safeScale = viewportScale != null && Number.isFinite(viewportScale) && viewportScale > 0 ? viewportScale : 1;
+		const inverseScale = 1 / safeScale;
+		return /* @__PURE__ */ React.createElement("div", {
+			key: area.canvasId,
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area`,
+			style: {
+				position: "absolute",
+				left: area.x,
+				top: area.y,
+				width: area.contentWidth,
+				height: area.contentHeight
+			}
+		}, /* @__PURE__ */ React.createElement("span", {
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-overview-area-title`,
+			title: displayName,
+			style: {
+				transform: `scale(${inverseScale})`,
+				transformOrigin: "top left",
+				maxWidth: `calc((100% - 16px) * ${safeScale})`
+			}
+		}, displayName), /* @__PURE__ */ React.createElement(ItemLayer, {
+			items: area.items,
+			renderItem,
+			viewportScale,
+			cellSize: area.cellSize,
+			itemUnit,
+			contentWidth: area.contentWidth,
+			contentHeight: area.contentHeight,
+			contentOffsetX: area.contentOffsetX,
+			contentOffsetY: area.contentOffsetY,
+			enableHover,
+			itemHoverOutline: enableHover,
+			onItemClick,
+			onItemHover,
+			onItemLeave,
+			getMergedItemWrapperStyle,
+			readModeSelectedItemId
+		}));
+	}));
+}
+//#endregion
+export { FloorMapOverview as default };

package/es/components/pisellFloorMapLayout/components/FloorMapOverview.less

@@ -0,0 +1,65 @@
+/**
+ * 全览（All）视图：把所有启用画布的图元渲染在主 TransformWrapper 内的同一张
+ * 大画布里，每个画布占据各自的区域。仅用细边框区分区域，无背景色 / 网格。
+ *
+ * 视觉规则：
+ * - 大画布自身没有背景（沿用外层 map-area 背景）；
+ * - 每个区域只有一条细边框 + 圆角；
+ * - 区域左上角小 chip 显示画布名，半透明白底 + 模糊，不拦截图元交互。
+ */
+
+.pisell-floor-map-layout-overview {
+  &--empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 14px;
+  }
+
+  &-area {
+    /**
+     * 区域边框：浅色外观深色描边，深色外观浅色描边；
+     * 都用 2px 粗描边，避免在大画布远缩放时被吃成 1 个亚像素而看不见。
+     * 自身不响应平移/缩放（由主 TransformWrapper 接管），仅作为区域边框；
+     * 内部 ItemLayer 的图元仍可点击/hover。
+     */
+    border: 2px solid rgba(0, 0, 0, 0.22);
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    /**
+     * 深色外观下深色描边几乎贴近背景，区域分割不可见——切换到浅色描边。
+     * 选择器命中 PisellFloorMapLayout 根容器上的 `data-appearance-mode="dark"`，
+     * 该属性来源于外层 ResourceWallViewportToolbar 浅/深切换按钮。
+     */
+    [data-appearance-mode='dark'] & {
+      border-color: rgba(255, 255, 255, 0.32);
+    }
+  }
+
+  /**
+   * 区域标题：左上角 chip，半透明白底 + 模糊；不占独立行高。
+   * pointer-events: none 让标题不拦截图元交互（点击/拖拽）。
+   */
+  &-area-title {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 2;
+    display: inline-block;
+    max-width: calc(100% - 16px);
+    padding: 2px 10px;
+    font-size: 12px;
+    line-height: 1.5;
+    color: rgba(0, 0, 0, 0.65);
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(8px);
+    border-radius: 999px;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500;
+  }
+}

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.js

@@ -1,18 +1,20 @@
 import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
-import { FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types.js";
+import { FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND, FLOOR_MAP_IMAGE_ELEMENT_KIND, FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types.js";
+import { FLOOR_MAP_BUILTIN_SHAPES } from "../utils/floorMapBuiltinShapes.js";
 import { resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils.js";
 import { FLOOR_MAP_PALETTE_DRAG_MIME } from "../utils/floorMapDropUtils.js";
 import { formatDataRecordOptionLabel } from "../utils/floorMapDataRecordLabel.js";
-import React, { useMemo } from "react";
+import { FLOOR_MAP_LAYOUT_CLASS_PREFIX, FLOOR_MAP_PHONE_TOOLBAR_DRAWER_Z_INDEX } from "../floorMapLayoutConstants.js";
+import React, { useCallback, useMemo, useState } from "react";
 import { locales } from "@pisell/utils";
-import { Select } from "antd";
+import { Drawer, Select } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import "./FloorMapToolbar.less";
 //#region src/components/pisellFloorMapLayout/components/FloorMapToolbar.tsx
 /**
 * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
 */
-const PREFIX = "pisell-floor-map-layout";
 const I18N_TB = "pisell-floor-map-layout.toolbar";
 const I18N_EP_DS = "pisell-floor-map-layout.edit-panel.ph-data-source";
 const DEFAULT_PLACEMENT_SIZE = {
@@ -28,8 +30,9 @@ function getUnplacedRecordsForKey(dataSourceKey, dataSources, elements) {
 	}).map((e) => e.dataBinding.recordId));
 	return ((_dataSources$dataSour = dataSources[dataSourceKey]) !== null && _dataSources$dataSour !== void 0 ? _dataSources$dataSour : []).filter((r) => r && typeof r.id === "string" && !used.has(r.id));
 }
-function buildScenePreviewMergedItem(kind, dataSourceKey, size) {
-	const el = _objectSpread2({
+function buildScenePreviewMergedItem(kind, dataSourceKey, size, builtinShapeKey) {
+	var _FLOOR_MAP_BUILTIN_SH;
+	const el = _objectSpread2(_objectSpread2({
 		instanceId: `preview_${kind.value}`,
 		canvasId: "",
 		x: 0,
@@ -42,7 +45,7 @@ function buildScenePreviewMergedItem(kind, dataSourceKey, size) {
 			dataSourceKey,
 			recordId: ""
 		} : void 0
-	}, kind.value === "floorMapImage" ? { imageUrl: "" } : {});
+	}, kind.value === "floorMapImage" ? { imageUrl: "" } : {}), kind.value === "floorMapBuiltinShape" ? { builtinShapeKey: builtinShapeKey !== null && builtinShapeKey !== void 0 ? builtinShapeKey : (_FLOOR_MAP_BUILTIN_SH = FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH.key } : {});
 	return {
 		id: el.instanceId,
 		instanceId: el.instanceId,
@@ -63,8 +66,21 @@ const IMAGE_PREVIEW_SIZE = {
 	width: 140,
 	height: 80
 };
+/** 内置图形预览：略小于图片，正方形便于 5 种图形（厕所/柱子/沙发/大门/分隔）通用展示 */
+const BUILTIN_SHAPE_PREVIEW_SIZE = {
+	width: 96,
+	height: 96
+};
 function FloorMapToolbar(props) {
-	const { config, dataSources, dataSourceLabels = {}, canCreate, placeMode, onPlaceModeChange, renderPreviewItem, placementPreviewSize = DEFAULT_PLACEMENT_SIZE, decorationPreviewSize = DEFAULT_DECORATION_SIZE, sceneElements = [], onSave, saving, saveError, layoutDirty, className, onPaletteCardPointerDown, consumeToolbarClickIfTouchDrag } = props;
+	const { config, dataSources, dataSourceLabels = {}, canCreate, placeMode, onPlaceModeChange, renderPreviewItem, placementPreviewSize = DEFAULT_PLACEMENT_SIZE, decorationPreviewSize = DEFAULT_DECORATION_SIZE, sceneElements = [], onSave, saving, saveError, layoutDirty, className, onPaletteCardPointerDown, consumeToolbarClickIfTouchDrag, phoneLayout = false, defaultCollapsed = false, onRequestPlaceAtCanvasCenter } = props;
+	/**
+	* 侧栏收起 / 展开：仅会话内状态，**不写入 localStorage**。
+	* 桌面默认展开；手机编辑态可由 `defaultCollapsed` 默认收起。
+	*/
+	const [collapsed, setCollapsed] = useState(() => defaultCollapsed === true);
+	const handleToggleCollapsed = useCallback(() => {
+		setCollapsed((prev) => !prev);
+	}, []);
 	const paletteKinds = useMemo(() => {
 		var _config$elementKinds;
 		return ((_config$elementKinds = config.elementKinds) !== null && _config$elementKinds !== void 0 ? _config$elementKinds : []).filter((k) => k.showInPalette !== false);
@@ -95,7 +111,6 @@ function FloorMapToolbar(props) {
 		return map;
 	}, [categories, paletteKinds]);
 	const handleSelectKind = (kind) => {
-		resolveDataBindingPolicy(kind);
 		const next = {
 			type: "scene",
 			elementKind: kind.value,
@@ -119,35 +134,55 @@ function FloorMapToolbar(props) {
 			recordId: void 0
 		}));
 	};
+	/**
+	* 内置图形 kind：用户在侧栏 Select 切换形状（与资源类切换 dataSource 同款 UX）。
+	* 不清掉 placeMode 本身，仅替换 `builtinShapeKey`；落点 / 拖拽时透传。
+	*/
+	const handleBuiltinShapeKeyChange = (mode, key) => {
+		onPlaceModeChange(_objectSpread2(_objectSpread2({}, mode), {}, { builtinShapeKey: key }));
+	};
 	const cancelPlaceMode = () => onPlaceModeChange(null);
 	const renderKindCard = (k) => {
-		var _k$allowedDataSourceK;
+		var _placeMode$builtinSha, _FLOOR_MAP_BUILTIN_SH2, _FLOOR_MAP_BUILTIN_SH3, _k$allowedDataSourceK, _FLOOR_MAP_BUILTIN_SH4, _placeMode$builtinSha2, _FLOOR_MAP_BUILTIN_SH5;
 		const policy = resolveDataBindingPolicy(k);
 		const isStage = k.value === FLOOR_MAP_STAGE_ELEMENT_KIND;
 		const isImageKind = k.value === FLOOR_MAP_IMAGE_ELEMENT_KIND;
-		const placementLike = policy !== "none" && !isStage || isImageKind;
-		const size = isStage ? STAGE_PREVIEW_SIZE : placementLike ? isImageKind ? IMAGE_PREVIEW_SIZE : placementPreviewSize : {
+		const isBuiltinShapeKind = k.value === FLOOR_MAP_BUILTIN_SHAPE_ELEMENT_KIND;
+		/** 与图片图元同档：无数据绑定但展示一个完整视觉单体，按 placement 大卡片预览 */
+		const placementLike = policy !== "none" && !isStage || isImageKind || isBuiltinShapeKind;
+		const size = isStage ? STAGE_PREVIEW_SIZE : placementLike ? isImageKind ? IMAGE_PREVIEW_SIZE : isBuiltinShapeKind ? BUILTIN_SHAPE_PREVIEW_SIZE : placementPreviewSize : {
 			width: decorationPreviewSize,
 			height: decorationPreviewSize
 		};
-		const item = buildScenePreviewMergedItem(k, (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? placeMode.dataSourceKey : void 0, size);
+		const activeDs = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? placeMode.dataSourceKey : void 0;
+		/**
+		* 内置图形 kind：侧栏 Select 当前选中的图形 key。读 `placeMode.builtinShapeKey`，
+		* 未选时回退枚举首项，让 palette 预览缩略图与 Select 默认值始终一致。
+		*/
+		const activeBuiltinShapeKey = isBuiltinShapeKind ? (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? (_placeMode$builtinSha = placeMode.builtinShapeKey) !== null && _placeMode$builtinSha !== void 0 ? _placeMode$builtinSha : (_FLOOR_MAP_BUILTIN_SH2 = FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH2 === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH2.key : (_FLOOR_MAP_BUILTIN_SH3 = FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH3 === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH3.key : void 0;
+		const item = buildScenePreviewMergedItem(k, activeDs, size, activeBuiltinShapeKey);
 		const isActive = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value;
+		/**
+		* 预览缩略图尺寸：配合 sidebar 124px 抽屉宽度。
+		* stage 92×40、placement-like 80×54、装饰类按 props.decorationPreviewSize（默认 48）。
+		* placeScale / stageScale 都基于 cellW/cellH 推导，改尺寸时缩放因子自动适配。
+		*/
 		const cellW = isStage ? 92 : placementLike ? 80 : decorationPreviewSize;
 		const cellH = isStage ? 40 : placementLike ? 54 : decorationPreviewSize;
-		const previewW = isImageKind ? IMAGE_PREVIEW_SIZE.width : placementPreviewSize.width;
-		const previewH = isImageKind ? IMAGE_PREVIEW_SIZE.height : placementPreviewSize.height;
+		const previewW = isImageKind ? IMAGE_PREVIEW_SIZE.width : isBuiltinShapeKind ? BUILTIN_SHAPE_PREVIEW_SIZE.width : placementPreviewSize.width;
+		const previewH = isImageKind ? IMAGE_PREVIEW_SIZE.height : isBuiltinShapeKind ? BUILTIN_SHAPE_PREVIEW_SIZE.height : placementPreviewSize.height;
 		const placeScale = placementLike ? Math.min(cellW / previewW, cellH / previewH) : 1;
 		const stageScale = isStage ? Math.min(cellW / item.width, cellH / item.height, 1) : 1;
 		const allKeys = Object.keys(dataSources);
 		const allowedKeys = ((_k$allowedDataSourceK = k.allowedDataSourceKeys) === null || _k$allowedDataSourceK === void 0 ? void 0 : _k$allowedDataSourceK.length) ? k.allowedDataSourceKeys.filter((x) => allKeys.includes(x)) : allKeys;
-		const paletteDragPayload = _objectSpread2({ elementKind: k.value }, (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? _objectSpread2({ dataSourceKey: placeMode.dataSourceKey }, placeMode.recordIds && placeMode.recordIds.length > 0 ? { recordIds: placeMode.recordIds } : placeMode.recordId ? { recordId: placeMode.recordId } : {}) : {});
+		const paletteDragPayload = _objectSpread2(_objectSpread2({ elementKind: k.value }, (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" && placeMode.elementKind === k.value ? _objectSpread2({ dataSourceKey: placeMode.dataSourceKey }, placeMode.recordIds && placeMode.recordIds.length > 0 ? { recordIds: placeMode.recordIds } : placeMode.recordId ? { recordId: placeMode.recordId } : {}) : {}), isBuiltinShapeKind ? { builtinShapeKey: activeBuiltinShapeKey !== null && activeBuiltinShapeKey !== void 0 ? activeBuiltinShapeKey : (_FLOOR_MAP_BUILTIN_SH4 = FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH4 === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH4.key } : {});
 		return /* @__PURE__ */ React.createElement("div", {
 			key: k.value,
-			className: `${PREFIX}-toolbar-preview-card-wrap`
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card-wrap`
 		}, /* @__PURE__ */ React.createElement("button", {
 			type: "button",
 			draggable: true,
-			className: classNames(`${PREFIX}-toolbar-preview-card`, !placementLike ? `${PREFIX}-toolbar-preview-card-deco` : void 0, { [`${PREFIX}-toolbar-preview-card-active`]: isActive }),
+			className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card`, !placementLike ? `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card-deco` : void 0, { [`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card-active`]: isActive }),
 			onClick: () => {
 				if (consumeToolbarClickIfTouchDrag === null || consumeToolbarClickIfTouchDrag === void 0 ? void 0 : consumeToolbarClickIfTouchDrag()) return;
 				handleSelectKind(k);
@@ -159,13 +194,13 @@ function FloorMapToolbar(props) {
 			},
 			title: locales.getText(`${I18N_TB}.palette-card-title`).replace(/\{name\}/g, k.label)
 		}, /* @__PURE__ */ React.createElement("div", {
-			className: `${PREFIX}-toolbar-preview-cell`,
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-cell`,
 			style: {
 				width: cellW,
 				height: cellH
 			}
 		}, renderPreviewItem ? /* @__PURE__ */ React.createElement("div", {
-			className: `${PREFIX}-toolbar-preview-content`,
+			className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-content`,
 			style: placementLike ? {
 				width: previewW,
 				height: previewH,
@@ -177,7 +212,7 @@ function FloorMapToolbar(props) {
 				transform: `scale(${stageScale})`,
 				transformOrigin: "top left"
 			} : void 0
-		}, renderPreviewItem(item)) : /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-toolbar-preview-fallback` }, k.label)), /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-toolbar-preview-card-label` }, k.label)), isActive && policy !== "none" && /* @__PURE__ */ React.createElement(React.Fragment, null, allowedKeys.length >= 1 && /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-record-pick` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-record-pick-label` }, locales.getText(`${I18N_TB}.data-binding-optional`)), /* @__PURE__ */ React.createElement(Select, {
+		}, renderPreviewItem(item)) : /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-fallback` }, k.label)), /* @__PURE__ */ React.createElement("span", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-preview-card-label` }, k.label)), isActive && policy !== "none" && /* @__PURE__ */ React.createElement(React.Fragment, null, allowedKeys.length >= 1 && /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick` }, /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-label` }, locales.getText(`${I18N_TB}.data-binding-optional`)), /* @__PURE__ */ React.createElement(Select, {
 			placeholder: locales.getText(I18N_EP_DS),
 			allowClear: true,
 			value: placeMode.type === "scene" ? placeMode.dataSourceKey : void 0,
@@ -192,13 +227,14 @@ function FloorMapToolbar(props) {
 				if ((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene") handleDsChange(placeMode, v);
 			},
 			size: "large",
-			style: { width: "100%" }
+			style: { width: "100%" },
+			popupMatchSelectWidth: false
 		}), (() => {
 			const mode = (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" ? placeMode : null;
 			const key = mode === null || mode === void 0 ? void 0 : mode.dataSourceKey;
-			if (!key) return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-after-select-ds`));
+			if (!key) return /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-after-select-ds`));
 			const unplaced = getUnplacedRecordsForKey(key, dataSources, sceneElements);
-			if (unplaced.length === 0) return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-no-unplaced-rows`));
+			if (unplaced.length === 0) return /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-no-unplaced-rows`));
 			const recordValue = (mode === null || mode === void 0 ? void 0 : mode.recordIds) && mode.recordIds.length > 0 ? mode.recordIds : (mode === null || mode === void 0 ? void 0 : mode.recordId) ? [mode.recordId] : void 0;
 			return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Select, {
 				mode: "multiple",
@@ -217,35 +253,114 @@ function FloorMapToolbar(props) {
 				style: {
 					width: "100%",
 					marginTop: 4
-				}
-			}), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-multi-drop`)));
-		})()), allowedKeys.length === 0 && /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-record-hint` }, locales.getText(`${I18N_TB}.no-data-sources`)), /* @__PURE__ */ React.createElement("button", {
+				},
+				popupMatchSelectWidth: false
+			}), /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-hint` }, locales.getText(`${I18N_TB}.hint-multi-drop`)));
+		})()), allowedKeys.length === 0 && /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-hint` }, locales.getText(`${I18N_TB}.no-data-sources`)), phoneLayout && onRequestPlaceAtCanvasCenter ? /* @__PURE__ */ React.createElement("button", {
 			type: "button",
-			className: `${PREFIX}-toolbar-btn cancel-inline`,
+			className: classNames(`pisell-floor-map-layout-toolbar-btn`, "primary"),
+			onClick: onRequestPlaceAtCanvasCenter
+		}, locales.getText(`${I18N_TB}.add-to-canvas`)) : null, /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: `pisell-floor-map-layout-toolbar-btn cancel-inline`,
 			onClick: cancelPlaceMode
-		}, locales.getText(`${I18N_TB}.cancel-place`))), isActive && policy === "none" && /* @__PURE__ */ React.createElement("button", {
+		}, locales.getText(`${I18N_TB}.cancel-place`))), isActive && policy === "none" && /* @__PURE__ */ React.createElement(React.Fragment, null, isBuiltinShapeKind && /* @__PURE__ */ React.createElement(
+			"div",
+			/**
+			* 内置图形 kind：在「点击 / 拖拽落点」之前，先在这里选好要落的图形
+			* （厕所 / 分隔 / 柱子 / 沙发 / 大门 等）。落点的初始 builtinShapeKey
+			* 即取自当前 Select 值；落点后仍可在右侧编辑面板再切换。
+			*
+			* 与资源类 kind 的「dataSource + records」预选 UX 同款，避免必须先落
+			* 一个默认图形再到编辑面板里改。
+			*/
+			{ className: `pisell-floor-map-layout-toolbar-record-pick` },
+			/* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-record-pick-label` }, locales.getText("pisell-floor-map-layout.builtin-shape.palette-pick-label")),
+			/* @__PURE__ */ React.createElement(Select, {
+				placeholder: locales.getText("pisell-floor-map-layout.edit-panel.ph-builtin-shape"),
+				value: (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene" ? (_placeMode$builtinSha2 = placeMode.builtinShapeKey) !== null && _placeMode$builtinSha2 !== void 0 ? _placeMode$builtinSha2 : (_FLOOR_MAP_BUILTIN_SH5 = FLOOR_MAP_BUILTIN_SHAPES[0]) === null || _FLOOR_MAP_BUILTIN_SH5 === void 0 ? void 0 : _FLOOR_MAP_BUILTIN_SH5.key : void 0,
+				options: FLOOR_MAP_BUILTIN_SHAPES.map((s) => ({
+					value: s.key,
+					label: locales.getText(s.labelKey)
+				})),
+				onChange: (v) => {
+					if ((placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === "scene") handleBuiltinShapeKeyChange(placeMode, v);
+				},
+				size: "large",
+				style: { width: "100%" },
+				popupMatchSelectWidth: false
+			})
+		), phoneLayout && onRequestPlaceAtCanvasCenter ? /* @__PURE__ */ React.createElement("button", {
+			type: "button",
+			className: classNames(`pisell-floor-map-layout-toolbar-btn`, "primary"),
+			onClick: onRequestPlaceAtCanvasCenter
+		}, locales.getText(`${I18N_TB}.add-to-canvas`)) : null, /* @__PURE__ */ React.createElement("button", {
 			type: "button",
-			className: `${PREFIX}-toolbar-btn cancel-inline`,
+			className: `pisell-floor-map-layout-toolbar-btn cancel-inline`,
 			onClick: cancelPlaceMode
-		}, locales.getText(`${I18N_TB}.cancel-place`)));
+		}, locales.getText(`${I18N_TB}.cancel-place`))));
 	};
-	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${PREFIX}-toolbar`, `${PREFIX}-toolbar-sidebar`, className) }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-body` }, canCreate && /* @__PURE__ */ React.createElement(React.Fragment, null, categories.map((cat) => {
+	const collapseBtn = /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-collapse-handle`, phoneLayout && `pisell-floor-map-layout-toolbar-collapse-handle--in-drawer`),
+		onClick: handleToggleCollapsed,
+		"aria-label": collapsed ? locales.getText(`${I18N_TB}.expand`) : locales.getText(`${I18N_TB}.collapse`),
+		title: collapsed ? locales.getText(`${I18N_TB}.expand`) : locales.getText(`${I18N_TB}.collapse`)
+	}, collapsed ? /* @__PURE__ */ React.createElement(RightOutlined, null) : /* @__PURE__ */ React.createElement(LeftOutlined, null));
+	/**
+	* 内层容器：实际承载 body / footer，并在动画过程中负责水平裁剪。
+	* 桌面：宽度跟随 sidebar（100%）伸缩；手机：antd Drawer 承载内容 + 边缘折叠柄。
+	*/
+	const toolbarInner = /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-inner` }, /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-body` }, canCreate && /* @__PURE__ */ React.createElement(React.Fragment, null, categories.map((cat) => {
 		var _kindsByCategory$get;
 		const kinds = (_kindsByCategory$get = kindsByCategory.get(cat.id)) !== null && _kindsByCategory$get !== void 0 ? _kindsByCategory$get : [];
 		if (!kinds.length) return null;
 		return /* @__PURE__ */ React.createElement("section", {
 			key: cat.id,
-			className: `${PREFIX}-toolbar-section`
-		}, /* @__PURE__ */ React.createElement("h3", { className: `${PREFIX}-toolbar-section-title` }, cat.label), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-preview-list` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-preview-group` }, kinds.map((k) => renderKindCard(k)))));
-	}))), onSave && config.canvasUi.canEdit && /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-toolbar-footer` }, layoutDirty ? /* @__PURE__ */ React.createElement("span", {
-		className: `${PREFIX}-toolbar-dirty-hint`,
+			className: `pisell-floor-map-layout-toolbar-section`
+		}, /* @__PURE__ */ React.createElement("h3", { className: `pisell-floor-map-layout-toolbar-section-title` }, cat.label), /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-preview-list` }, /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-preview-group` }, kinds.map((k) => renderKindCard(k)))));
+	}))), onSave && config.canvasUi.canEdit && /* @__PURE__ */ React.createElement("div", { className: `pisell-floor-map-layout-toolbar-footer` }, layoutDirty ? /* @__PURE__ */ React.createElement("span", {
+		className: `pisell-floor-map-layout-toolbar-dirty-hint`,
 		role: "status"
-	}, locales.getText(`${I18N_TB}.layout-dirty-hint`)) : null, saveError && /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-toolbar-error` }, typeof saveError === "string" ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message), /* @__PURE__ */ React.createElement("button", {
+	}, locales.getText(`${I18N_TB}.layout-dirty-hint`)) : null, saveError && /* @__PURE__ */ React.createElement("span", { className: `pisell-floor-map-layout-toolbar-error` }, typeof saveError === "string" ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message), /* @__PURE__ */ React.createElement("button", {
 		type: "button",
-		className: classNames(`${PREFIX}-toolbar-btn`, "primary", { [`${PREFIX}-toolbar-save-dirty`]: layoutDirty }),
+		className: classNames(`pisell-floor-map-layout-toolbar-btn`, "primary", { [`pisell-floor-map-layout-toolbar-save-dirty`]: layoutDirty }),
 		disabled: saving,
 		onClick: onSave
 	}, saving ? locales.getText(`${I18N_TB}.saving`) : locales.getText(`${I18N_TB}.save`))));
+	if (phoneLayout)
+ /**
+	* 必须包在 `${PREFIX}-toolbar` 根下，否则 Less 里 `.pisell-floor-map-layout-toolbar &-collapse-handle`
+	* 等选择器无法命中，展开态右侧折叠柄会失去定位与样式。
+	*/
+	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar`, className) }, /* @__PURE__ */ React.createElement(Drawer, {
+		placement: "left",
+		open: !collapsed,
+		onClose: () => setCollapsed(true),
+		width: "min(320px, 88vw)",
+		zIndex: FLOOR_MAP_PHONE_TOOLBAR_DRAWER_Z_INDEX,
+		maskClosable: true,
+		destroyOnClose: false,
+		closable: false,
+		forceRender: false,
+		rootClassName: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-phone-drawer-root`,
+		classNames: { body: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-phone-drawer-body` },
+		styles: { body: {
+			padding: 0,
+			overflow: "visible",
+			display: "flex",
+			flexDirection: "column",
+			height: "100%"
+		} },
+		getContainer: typeof document !== "undefined" ? () => document.body : void 0
+	}, /* @__PURE__ */ React.createElement("div", { className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-phone-drawer-inner` }, toolbarInner, collapseBtn)), collapsed ? /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-phone-peek-trigger`,
+		onClick: () => setCollapsed(false),
+		"aria-label": locales.getText(`${I18N_TB}.expand`),
+		title: locales.getText(`${I18N_TB}.expand`)
+	}, /* @__PURE__ */ React.createElement(RightOutlined, null)) : null);
+	return /* @__PURE__ */ React.createElement("div", { className: classNames(`${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar`, `${FLOOR_MAP_LAYOUT_CLASS_PREFIX}-toolbar-sidebar`, collapsed && `pisell-floor-map-layout-toolbar-sidebar--collapsed`, className) }, collapseBtn, toolbarInner);
 }
 //#endregion
 export { FloorMapToolbar as default };