@pisell/materials 1.8.41 → 1.8.43

package/es/components/pisellFloorMapLayout/components/FloorMapBuiltinShapeElement.js

@@ -0,0 +1,123 @@
+import { getFloorMapBuiltinShapeDef } from "../utils/floorMapBuiltinShapes.js";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { locales } from "@pisell/utils";
+//#region src/components/pisellFloorMapLayout/components/FloorMapBuiltinShapeElement.tsx
+/**
+* 平面图「内置图形图元」内层展示：根据 `builtinShapeKey` 渲染内置 SVG 图形；
+* 未选 / key 已失效时给出与图片图元一致风格的虚线占位（可在侧栏 Select 中选择）。
+*
+* 与 {@link FloorMapImageElement} 对位：
+* - 同样无数据源绑定；
+* - 同样以「容器铺满」的方式渲染单一视觉；
+* - 同样允许 `name` 作为占位时的标题。
+*
+* 方向自适应：def 标了 `orientationAware: true` 的图形（沙发 / 大门），
+* wrapper 用 `ResizeObserver` 跟踪容器宽高；高 > 宽时把整张图形 rotate 90deg
+* + swap dims，让横向设计的图形（沙发）或贴底墙的图形（大门）在瘦高槽位里
+* 自然变成竖向 / 贴侧墙 —— 不需要额外的「-vertical」key 或持久化方向字段。
+*/
+const PREFIX = "pisell-floor-map-layout";
+const I18N = "pisell-floor-map-layout.builtin-shape";
+function FloorMapBuiltinShapeElement(props) {
+	const { builtinShapeKey, name, fillColor, strokeColor } = props;
+	const def = getFloorMapBuiltinShapeDef(builtinShapeKey);
+	const fallbackLabel = name != null && String(name).trim() ? String(name).trim() : locales.getText(`${I18N}.default-name`);
+	/**
+	* 测量容器宽高用于「方向自适应」。仅在 `def.orientationAware === true` 时
+	* 真正订阅 ResizeObserver；其它图形不付任何 JS 成本（保持原有零开销）。
+	* 初始用同步 `getBoundingClientRect()` 喂一帧，避免首次 paint 出现「先横后旋」
+	* 的闪烁。
+	*/
+	const orientationAware = !!(def === null || def === void 0 ? void 0 : def.orientationAware);
+	const wrapperRef = useRef(null);
+	const [size, setSize] = useState(null);
+	useLayoutEffect(() => {
+		if (!orientationAware) return;
+		const el = wrapperRef.current;
+		if (!el) return;
+		const measure = (w, h) => {
+			setSize((prev) => prev && prev.w === w && prev.h === h ? prev : {
+				w,
+				h
+			});
+		};
+		const rect = el.getBoundingClientRect();
+		measure(rect.width, rect.height);
+		const ro = new ResizeObserver((entries) => {
+			const e = entries[0];
+			if (!e) return;
+			measure(e.contentRect.width, e.contentRect.height);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [orientationAware]);
+	if (!def) return /* @__PURE__ */ React.createElement("div", {
+		className: `${PREFIX}-builtin-shape-placeholder`,
+		style: {
+			width: "100%",
+			height: "100%",
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: 8,
+			background: "#fafafa",
+			border: "2px dashed #bfbfbf",
+			borderRadius: 4,
+			fontSize: 11,
+			color: "#8c8c8c",
+			textAlign: "center",
+			lineHeight: 1.4,
+			overflow: "hidden"
+		}
+	}, /* @__PURE__ */ React.createElement("span", { style: {
+		fontWeight: 600,
+		color: "#595959",
+		marginBottom: 4
+	} }, fallbackLabel), /* @__PURE__ */ React.createElement("span", null, locales.getText(`${I18N}.hint-no-key`)));
+	const isVertical = orientationAware && size != null && size.h > size.w;
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: wrapperRef,
+		className: `${PREFIX}-builtin-shape`,
+		style: {
+			width: "100%",
+			height: "100%",
+			display: "block",
+			position: "relative",
+			pointerEvents: "none",
+			userSelect: "none",
+			overflow: "hidden"
+		},
+		"aria-label": fallbackLabel,
+		role: "img",
+		"data-orientation": isVertical ? "vertical" : "horizontal"
+	}, isVertical ? /* @__PURE__ */ React.createElement(
+		"div",
+		/**
+		* 容器更高时，让内层方框 swap dims（h × w），再 `rotate(90deg)`：
+		* - 旋转前框尺寸 = 父容器 height × width；
+		* - 旋转后视觉占位 = 父容器 width × height（刚好填满）；
+		* - SVG 在内层用 100% 宽高，最终图形按原始横向 viewBox 比例缩放并旋转，
+		*   保持沙发坐垫 / 大门门扇等细节比例不被压扁。
+		*/
+		{ style: {
+			position: "absolute",
+			left: "50%",
+			top: "50%",
+			width: size.h,
+			height: size.w,
+			transform: "translate(-50%, -50%) rotate(90deg)",
+			transformOrigin: "center center"
+		} },
+		def.render({
+			fillColor,
+			strokeColor
+		})
+	) : def.render({
+		fillColor,
+		strokeColor
+	}));
+}
+//#endregion
+export { FloorMapBuiltinShapeElement };

package/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.js

@@ -1,12 +1,15 @@
 import { FLOOR_MAP_STAGE_ELEMENT_KIND } from "../types.js";
-import { getElementKindConfig, getSwappableElementKindsInSameCategory, isFloorMapImageElementKind, patchSceneElementForKindSwitch, resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils.js";
+import { FLOOR_MAP_BUILTIN_SHAPES, getFloorMapBuiltinShapeDef } from "../utils/floorMapBuiltinShapes.js";
+import { getElementKindConfig, getSwappableElementKindsInSameCategory, isFloorMapBuiltinShapeElementKind, isFloorMapImageElementKind, patchSceneElementForKindSwitch, resolveDataBindingPolicy } from "../utils/floorMapElementKindUtils.js";
 import { formatDataRecordOptionLabel } from "../utils/floorMapDataRecordLabel.js";
+import { FLOOR_MAP_CONFIRM_OVERLAY_Z_INDEX } from "../floorMapLayoutConstants.js";
 import useEngineContext from "../../../hooks/useEngineContext.js";
 import { getFloorMapCanvasDisplayName, initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay.js";
+import { buildNameAsTitleExtensionsPatch, isElementNameAsTitleEnabled } from "../utils/floorMapElementNameAsTitle.js";
 import FloorMapDataForm from "./FloorMapDataForm.js";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { locales } from "@pisell/utils";
-import { Button, Form, Input, InputNumber, Popconfirm, Select, message } from "antd";
+import { Button, Checkbox, Form, Input, InputNumber, Popconfirm, Select, message } from "antd";
 import { CloseOutlined, LockOutlined, UnlockOutlined } from "@ant-design/icons";
 import classNames from "classnames";
 import "./FloorMapEditPanel.less";
@@ -47,9 +50,14 @@ function FloorMapEditPanel(props) {
 		labelNameStage: locales.getText(`${I18N_EP}.label-name-stage`),
 		phNameStage: locales.getText(`${I18N_EP}.ph-name-stage`),
 		phName: locales.getText(`${I18N_EP}.ph-name`),
+		labelNameAsTitle: locales.getText(`${I18N_EP}.label-name-as-title`),
+		tipNameAsTitle: locales.getText(`${I18N_EP}.tip-name-as-title`),
 		labelImageUrl: locales.getText(`${I18N_EP}.label-image-url`),
 		extraImageUrl: locales.getText(`${I18N_EP}.extra-image-url`),
 		phHttps: locales.getText(`${I18N_EP}.ph-https`),
+		labelBuiltinShape: locales.getText(`${I18N_EP}.label-builtin-shape`),
+		extraBuiltinShape: locales.getText(`${I18N_EP}.extra-builtin-shape`),
+		phBuiltinShape: locales.getText(`${I18N_EP}.ph-builtin-shape`),
 		labelCanvas: locales.getText(`${I18N_EP}.label-canvas`),
 		apply: locales.getText(`${I18N_EP}.apply`),
 		dataBinding: locales.getText(`${I18N_EP}.data-binding`),
@@ -85,15 +93,24 @@ function FloorMapEditPanel(props) {
 	const canvasOptions = config.canvases.filter((c) => c.enabled).sort((a, b) => a.order - b.order);
 	const kindConfig = getElementKindConfig(config, sceneElement.elementKind);
 	const bindingPolicy = resolveDataBindingPolicy(kindConfig);
+	/**
+	* 是否在编辑面板渲染「将图元名作为资源标题」勾选项，由 kindConfig 显式声明；
+	* 未声明的 kind（含将来新增）保持现状不出现该项。
+	*/
+	const kindAllowsNameAsTitle = Boolean(kindConfig === null || kindConfig === void 0 ? void 0 : kindConfig.nameAsTitleConfigurable);
 	const allKeys = Object.keys(dataSources);
 	const allowedKeys = (kindConfig === null || kindConfig === void 0 || (_kindConfig$allowedDa = kindConfig.allowedDataSourceKeys) === null || _kindConfig$allowedDa === void 0 ? void 0 : _kindConfig$allowedDa.length) ? kindConfig.allowedDataSourceKeys.filter((k) => allKeys.includes(k)) : allKeys;
 	/** 与 RecordBoard Story 图片图元一致：`floorMapImage` */
 	const isImageKind = isFloorMapImageElementKind(sceneElement.elementKind);
+	/** 内置图形图元：用 builtinShapeKey 选择厕所 / 沙发 / 大门 等预设 SVG */
+	const isBuiltinShapeKind = isFloorMapBuiltinShapeElementKind(sceneElement.elementKind);
 	const layoutLocked = Boolean(sceneElement.layoutTransformLocked);
 	const initialValues = React.useMemo(() => {
-		var _sceneElement$name, _sceneElement$zIndex, _sceneElement$width, _sceneElement$height, _sceneElement$imageUr;
-		const dw = isImageKind ? 400 : 180;
-		const dh = isImageKind ? 240 : 120;
+		var _builtinDef$defaultSi, _builtinDef$defaultSi2, _sceneElement$name, _sceneElement$zIndex, _sceneElement$width, _sceneElement$height, _sceneElement$imageUr, _sceneElement$builtin;
+		/** 内置图形宽高优先采用当前选定预设的 defaultSize，未选则给一个保底正方形 */
+		const builtinDef = isBuiltinShapeKind ? getFloorMapBuiltinShapeDef(sceneElement.builtinShapeKey) : void 0;
+		const dw = isImageKind ? 400 : isBuiltinShapeKind ? (_builtinDef$defaultSi = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.width) !== null && _builtinDef$defaultSi !== void 0 ? _builtinDef$defaultSi : 96 : 180;
+		const dh = isImageKind ? 240 : isBuiltinShapeKind ? (_builtinDef$defaultSi2 = builtinDef === null || builtinDef === void 0 ? void 0 : builtinDef.defaultSize.height) !== null && _builtinDef$defaultSi2 !== void 0 ? _builtinDef$defaultSi2 : 96 : 120;
 		return {
 			x: sceneElement.x,
 			y: sceneElement.y,
@@ -102,9 +119,15 @@ function FloorMapEditPanel(props) {
 			width: (_sceneElement$width = sceneElement.width) !== null && _sceneElement$width !== void 0 ? _sceneElement$width : dw,
 			height: (_sceneElement$height = sceneElement.height) !== null && _sceneElement$height !== void 0 ? _sceneElement$height : dh,
 			canvasId: sceneElement.canvasId,
-			imageUrl: (_sceneElement$imageUr = sceneElement.imageUrl) !== null && _sceneElement$imageUr !== void 0 ? _sceneElement$imageUr : ""
+			imageUrl: (_sceneElement$imageUr = sceneElement.imageUrl) !== null && _sceneElement$imageUr !== void 0 ? _sceneElement$imageUr : "",
+			builtinShapeKey: (_sceneElement$builtin = sceneElement.builtinShapeKey) !== null && _sceneElement$builtin !== void 0 ? _sceneElement$builtin : void 0,
+			nameAsTitle: isElementNameAsTitleEnabled(sceneElement)
 		};
-	}, [sceneElement, isImageKind]);
+	}, [
+		sceneElement,
+		isImageKind,
+		isBuiltinShapeKind
+	]);
 	React.useEffect(() => {
 		setFormHasUnappliedChanges(false);
 	}, [itemId]);
@@ -121,14 +144,19 @@ function FloorMapEditPanel(props) {
 		form
 	]);
 	const handleFinish = useCallback((values) => {
+		const name = values.name != null ? String(values.name).trim() || void 0 : void 0;
 		const patch = {
-			name: values.name != null ? String(values.name).trim() || void 0 : void 0,
+			name,
 			canvasId: String(values.canvasId)
 		};
 		if (isImageKind) {
 			var _values$imageUrl;
 			patch.imageUrl = String((_values$imageUrl = values.imageUrl) !== null && _values$imageUrl !== void 0 ? _values$imageUrl : "").trim() || void 0;
 		}
+		if (isBuiltinShapeKind) {
+			const raw = values.builtinShapeKey;
+			patch.builtinShapeKey = (raw != null ? String(raw).trim() : "") || void 0;
+		}
 		if (!layoutLocked) {
 			patch.x = Number(values.x);
 			patch.y = Number(values.y);
@@ -138,12 +166,24 @@ function FloorMapEditPanel(props) {
 			patch.width = Number.isFinite(w) ? Math.max(20, w) : void 0;
 			patch.height = Number.isFinite(h) ? Math.max(20, h) : void 0;
 		}
+		/**
+		* 「图元名作为资源标题」开关：仅在 kindConfig 允许配置时才会出现在表单里；
+		* 没有 name 的场景下即便勾选也无意义，因此用 `name` 是否为空决定写入是 true 还是清掉。
+		* 写入路径走 extensions，避免顶层 schema 出现仅供 UI 偏好的字段。
+		*/
+		if (kindAllowsNameAsTitle) {
+			const enabled = Boolean(values.nameAsTitle) && Boolean(name);
+			patch.extensions = buildNameAsTitleExtensionsPatch(sceneElement.extensions, enabled);
+		}
 		onUpdate(patch);
 		setFormHasUnappliedChanges(false);
 	}, [
 		onUpdate,
 		isImageKind,
-		layoutLocked
+		isBuiltinShapeKind,
+		layoutLocked,
+		kindAllowsNameAsTitle,
+		sceneElement.extensions
 	]);
 	const binding = sceneElement.dataBinding;
 	const record = binding ? (_dataSources$binding$ = (_dataSources$binding$2 = dataSources[binding.dataSourceKey]) === null || _dataSources$binding$2 === void 0 ? void 0 : _dataSources$binding$2.find((r) => r.id === binding.recordId)) !== null && _dataSources$binding$ !== void 0 ? _dataSources$binding$ : {} : {};
@@ -343,14 +383,49 @@ function FloorMapEditPanel(props) {
 	}, /* @__PURE__ */ React.createElement(Input, {
 		placeholder: isStageLike ? ep.phNameStage : ep.phName,
 		allowClear: true
-	})), isImageKind ? /* @__PURE__ */ React.createElement(Form.Item, {
+	})), kindAllowsNameAsTitle ? /* @__PURE__ */ React.createElement(
+		Form.Item,
+		/**
+		* 仅在 kindConfig.nameAsTitleConfigurable 时渲染。
+		* 业务侧通过 {@link resolveSceneElementDisplayTitle} 读取该偏好，
+		* 决定卡片标题是否覆盖业务字段（如 row.main_field / row.code）。
+		*/
+		{
+			name: "nameAsTitle",
+			valuePropName: "checked",
+			extra: ep.tipNameAsTitle,
+			style: { marginTop: -4 }
+		},
+		/* @__PURE__ */ React.createElement(Checkbox, null, ep.labelNameAsTitle)
+	) : null, isImageKind ? /* @__PURE__ */ React.createElement(Form.Item, {
 		name: "imageUrl",
 		label: ep.labelImageUrl,
 		extra: ep.extraImageUrl
 	}, /* @__PURE__ */ React.createElement(Input, {
 		allowClear: true,
 		placeholder: ep.phHttps
-	})) : null, /* @__PURE__ */ React.createElement(Form.Item, {
+	})) : null, isBuiltinShapeKind ? /* @__PURE__ */ React.createElement(
+		Form.Item,
+		/**
+		* 内置图形选择：与图片图元的 imageUrl 字段对位，但把 URL 输入换成 Select；
+		* 选项由 {@link FLOOR_MAP_BUILTIN_SHAPES} 驱动（厕所 / 分隔 / 柱子 / 沙发 / 大门 等）。
+		* 用 i18n key 取展示名，跟随引擎语言切换。
+		*/
+		{
+			name: "builtinShapeKey",
+			label: ep.labelBuiltinShape,
+			extra: ep.extraBuiltinShape
+		},
+		/* @__PURE__ */ React.createElement(Select, {
+			allowClear: true,
+			placeholder: ep.phBuiltinShape,
+			getPopupContainer: getSelectPopupContainer,
+			options: FLOOR_MAP_BUILTIN_SHAPES.map((s) => ({
+				value: s.key,
+				label: locales.getText(s.labelKey)
+			}))
+		})
+	) : null, /* @__PURE__ */ React.createElement(Form.Item, {
 		name: "canvasId",
 		label: ep.labelCanvas
 	}, /* @__PURE__ */ React.createElement(Select, {
@@ -436,7 +511,8 @@ function FloorMapEditPanel(props) {
 		onConfirm: onDelete,
 		okText: ep.btnOkDelete,
 		cancelText: ep.btnCancel,
-		okButtonProps: { danger: true }
+		okButtonProps: { danger: true },
+		zIndex: FLOOR_MAP_CONFIRM_OVERLAY_Z_INDEX
 	}, /* @__PURE__ */ React.createElement(Button, {
 		type: "default",
 		danger: true,

package/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.less

@@ -143,6 +143,21 @@
 }
 
 /* 父 wrap 根据画布限制高度时，面板填满 wrap 并内部滚动 */
+/** 手机右侧抽屉：铺满滑轨高度，内部纵向滚动 */
+.pisell-floor-map-layout-edit-panel--phone-drawer {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  max-height: none;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+}
+
 .pisell-floor-map-layout-edit-panel-wrap-constrained .pisell-floor-map-layout-edit-panel {
   height: 100%;
   max-height: 100%;

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.js

@@ -1,8 +1,10 @@
+import { RedoHistoryIcon, UndoHistoryIcon } from "./HistoryIcons.js";
 import useEngineContext from "../../../hooks/useEngineContext.js";
 import { initFloorMapLayoutLocales } from "../utils/floorMapCanvasDisplay.js";
 import CanvasTabs from "./CanvasTabs.js";
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { locales } from "@pisell/utils";
+import { Button, Modal } from "antd";
 import classNames from "classnames";
 import "./FloorMapEditTopBar.less";
 //#region src/components/pisellFloorMapLayout/components/FloorMapEditTopBar.tsx
@@ -13,9 +15,16 @@ import "./FloorMapEditTopBar.less";
 */
 const PREFIX = "pisell-floor-map-layout";
 const I18N_TB = "pisell-floor-map-layout.edit-top-bar";
+/** 检测 macOS / iPad，决定快捷键提示用 ⌘ 还是 Ctrl */
+function detectIsMacLike() {
+	if (typeof navigator === "undefined") return false;
+	const p = navigator.platform || "";
+	const ua = navigator.userAgent || "";
+	return /Mac|iPhone|iPad|iPod/i.test(p) || /Macintosh/i.test(ua);
+}
 function FloorMapEditTopBar(props) {
 	var _engineCtx$engine;
-	const { mode = "full", config, canvases, currentCanvasId, onTabChange, canEditTabs = false, onAddCanvas, onRemoveCanvas, onRenameCanvas, onSave, saving, saveError, layoutDirty, isFullscreen = false, extraActions, canvasTabsBarTrailing, hideCanvasTabs = false, className } = props;
+	const { mode = "full", config, canvases, currentCanvasId, onTabChange, canEditTabs = false, onAddCanvas, onRemoveCanvas, onRenameCanvas, onSave, saving, saveError, layoutDirty, isFullscreen = false, extraActions, canvasTabsBarTrailing, hideCanvasTabs = false, onUndo, onRedo, canUndo = false, canRedo = false, onExitEdit, onCancelEdit, className, phoneLayout = false } = 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";
 	const topBarLabels = useMemo(() => {
@@ -24,21 +33,115 @@ function FloorMapEditTopBar(props) {
 			aria: locales.getText(`${I18N_TB}.aria`),
 			unsaved: locales.getText(`${I18N_TB}.unsaved`),
 			save: locales.getText(`${I18N_TB}.save`),
-			saving: locales.getText(`${I18N_TB}.saving`)
+			saving: locales.getText(`${I18N_TB}.saving`),
+			undo: locales.getText(`${I18N_TB}.undo`),
+			redo: locales.getText(`${I18N_TB}.redo`),
+			cancelEdit: locales.getText(`${I18N_TB}.cancel-edit`),
+			finishEdit: locales.getText(`${I18N_TB}.finish-edit`),
+			cancelConfirmTitle: locales.getText(`${I18N_TB}.cancel-confirm-title`),
+			cancelConfirmContent: locales.getText(`${I18N_TB}.cancel-confirm-content`),
+			cancelConfirmOk: locales.getText(`${I18N_TB}.cancel-confirm-ok`),
+			cancelConfirmCancel: locales.getText(`${I18N_TB}.cancel-confirm-cancel`)
 		};
 	}, [engineLocale]);
+	const showHistory = Boolean(onUndo || onRedo);
+	/** 历史按钮组（撤销/重做）：full、compact 共用同一段渲染 */
+	const historyGroup = useMemo(() => {
+		if (!showHistory) return null;
+		const cmd = detectIsMacLike() ? "⌘" : "Ctrl";
+		const undoTitle = `${topBarLabels.undo} (${cmd}+Z)`;
+		const redoTitle = `${topBarLabels.redo} (${cmd}+Shift+Z)`;
+		return /* @__PURE__ */ React.createElement("div", {
+			className: `${PREFIX}-edit-top-bar-history`,
+			role: "group",
+			"aria-label": `${topBarLabels.undo} / ${topBarLabels.redo}`
+		}, /* @__PURE__ */ React.createElement(Button, {
+			type: "text",
+			size: "small",
+			className: `${PREFIX}-edit-top-bar-history-btn`,
+			icon: /* @__PURE__ */ React.createElement(UndoHistoryIcon, null),
+			disabled: !canUndo,
+			onClick: onUndo,
+			"aria-label": undoTitle
+		}, topBarLabels.undo), /* @__PURE__ */ React.createElement(Button, {
+			type: "text",
+			size: "small",
+			className: `${PREFIX}-edit-top-bar-history-btn`,
+			icon: /* @__PURE__ */ React.createElement(RedoHistoryIcon, null),
+			disabled: !canRedo,
+			onClick: onRedo,
+			"aria-label": redoTitle
+		}, topBarLabels.redo));
+	}, [
+		showHistory,
+		topBarLabels.undo,
+		topBarLabels.redo,
+		canUndo,
+		canRedo,
+		onUndo,
+		onRedo
+	]);
 	/** 浏览器全屏时顶栏不展示保存，改由侧栏承担（见 PisellFloorMapLayout 对 Toolbar onSave 的互斥逻辑） */
 	const showSave = Boolean(onSave && config.canvasUi.canEdit) && !isFullscreen;
+	/**
+	* 业务层提供 onExitEdit 时改用「取消编辑 + 完成」组合，
+	* 此时不再展示独立的「保存」按钮（完成 = 保存 + 退出，避免冗余）。
+	*/
+	const showExitGroup = Boolean(onExitEdit && config.canvasUi.canEdit);
+	/**
+	* 「未保存」徽章独立成一段：放到 undo / redo 左边，与「编辑历史」视觉上同属一个状态区。
+	* 触发条件保持原样：必须 layoutDirty 且当前确实有保存通道（showSave 或 showExitGroup），
+	* 否则纯阅读态出现「未保存」会让用户困惑。
+	*/
+	const dirtyBadge = layoutDirty && (showExitGroup || showSave) ? /* @__PURE__ */ React.createElement("span", {
+		className: `${PREFIX}-edit-top-bar-dirty-badge`,
+		role: "status",
+		"aria-live": "polite"
+	}, topBarLabels.unsaved) : null;
+	/**
+	* 取消编辑：layoutDirty 时弹二次确认，避免误触丢失草稿；
+	* 干净状态直接走原本的退出路径，不打扰用户。
+	* onOk 里复用「优先 onCancelEdit，回退 onExitEdit」的语义，与保存按钮链路对称。
+	*
+	* 走 {@link Modal.useModal} 拿到的实例 + 同级渲染的 `modalContextHolder`，确保：
+	* - OK 按钮颜色继承当前 ConfigProvider 主题主色（静态 `Modal.confirm` 不会继承）；
+	* - 不依赖外层是否包了 PisellConfigProvider/`App` —— 这个组件可能被低代码引擎
+	*   单独挂在画布层，并不一定有上述 Provider，原先走 `PisellModal.confirm`
+	*   会因为 `setModal` 没被调用拿到 `undefined.confirm` 直接抛错。
+	*/
+	const [modalApi, modalContextHolder] = Modal.useModal();
+	const performCancel = useCallback(() => {
+		if (onCancelEdit) onCancelEdit();
+		else onExitEdit === null || onExitEdit === void 0 || onExitEdit();
+	}, [onCancelEdit, onExitEdit]);
+	const handleCancelClick = useCallback(() => {
+		if (!layoutDirty) {
+			performCancel();
+			return;
+		}
+		modalApi.confirm({
+			title: topBarLabels.cancelConfirmTitle,
+			content: topBarLabels.cancelConfirmContent,
+			okText: topBarLabels.cancelConfirmOk,
+			cancelText: topBarLabels.cancelConfirmCancel,
+			onOk: () => performCancel(),
+			autoFocusButton: "cancel"
+		});
+	}, [
+		layoutDirty,
+		performCancel,
+		modalApi,
+		topBarLabels.cancelConfirmTitle,
+		topBarLabels.cancelConfirmContent,
+		topBarLabels.cancelConfirmOk,
+		topBarLabels.cancelConfirmCancel
+	]);
 	const hasTrailing = canvasTabsBarTrailing != null && canvasTabsBarTrailing !== false;
-	const hasFullActions = showSave || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing;
+	const hasFullActions = showSave || showExitGroup || Boolean(saveError) || extraActions != null && extraActions !== false || hasTrailing || showHistory;
 	const tabsHiddenClass = hideCanvasTabs ? `${PREFIX}-edit-top-bar--tabs-hidden` : void 0;
 	if (mode === "compact") {
-		const showCompactActions = hasTrailing;
-		return /* @__PURE__ */ React.createElement("div", {
-			className: classNames(`${PREFIX}-edit-top-bar`, `${PREFIX}-edit-top-bar--compact`, tabsHiddenClass, className),
-			role: "toolbar",
-			"aria-label": topBarLabels.aria
-		}, !hideCanvasTabs ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ React.createElement(CanvasTabs, {
+		const showCompactActions = hasTrailing || showHistory;
+		const tabsInner = /* @__PURE__ */ React.createElement(CanvasTabs, {
 			canvases,
 			currentCanvasId,
 			onTabChange,
@@ -47,14 +150,29 @@ function FloorMapEditTopBar(props) {
 			onRemoveCanvas,
 			onRenameCanvas,
 			className: `${PREFIX}-edit-top-bar-canvas-tabs`
-		})) : null, showCompactActions ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, canvasTabsBarTrailing) : null);
+		});
+		const actionsInner = /* @__PURE__ */ React.createElement(React.Fragment, null, historyGroup, canvasTabsBarTrailing);
+		/**
+		* 手机：第一行与阅读态相同（`read-canvas-tabs-bar` + 仅 CanvasTabs），
+		* 撤销/图例等放第二行，且左对齐（非居中）。
+		* 桌面：单行与阅读态相同结构（左 Tabs 右操作）。
+		*/
+		if (phoneLayout) return /* @__PURE__ */ React.createElement(React.Fragment, null, !hideCanvasTabs ? /* @__PURE__ */ React.createElement("div", {
+			className: classNames(`${PREFIX}-edit-top-bar`, `${PREFIX}-read-canvas-tabs-bar`, `${PREFIX}-edit-top-bar--compact`, `${PREFIX}-edit-top-bar--phone-edit-canvas-row`, className),
+			role: "toolbar",
+			"aria-label": topBarLabels.aria
+		}, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, tabsInner)) : null, showCompactActions ? /* @__PURE__ */ React.createElement("div", {
+			className: classNames(`${PREFIX}-edit-top-bar`, `${PREFIX}-edit-top-bar--compact`, `${PREFIX}-edit-top-bar--phone-actions-row`),
+			role: "toolbar"
+		}, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, actionsInner)) : null, modalContextHolder);
+		return /* @__PURE__ */ React.createElement("div", {
+			className: classNames(`${PREFIX}-edit-top-bar`, `${PREFIX}-read-canvas-tabs-bar`, `${PREFIX}-edit-top-bar--compact`, tabsHiddenClass, className),
+			role: "toolbar",
+			"aria-label": topBarLabels.aria
+		}, !hideCanvasTabs ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, tabsInner) : null, showCompactActions ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, actionsInner) : null, modalContextHolder);
 	}
 	if (hideCanvasTabs && !hasFullActions) return null;
-	return /* @__PURE__ */ React.createElement("div", {
-		className: classNames(`${PREFIX}-edit-top-bar`, `${PREFIX}-edit-top-bar--full-chrome`, tabsHiddenClass, className),
-		role: "toolbar",
-		"aria-label": topBarLabels.aria
-	}, !hideCanvasTabs ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, /* @__PURE__ */ React.createElement(CanvasTabs, {
+	const fullTabsInner = /* @__PURE__ */ React.createElement(CanvasTabs, {
 		canvases,
 		currentCanvasId,
 		onTabChange,
@@ -63,19 +181,47 @@ function FloorMapEditTopBar(props) {
 		onRemoveCanvas,
 		onRenameCanvas,
 		className: `${PREFIX}-edit-top-bar-canvas-tabs`
-	})) : null, hasFullActions ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, saveError ? /* @__PURE__ */ React.createElement("span", {
+	});
+	const fullActionsInner = /* @__PURE__ */ React.createElement(React.Fragment, null, saveError ? /* @__PURE__ */ React.createElement("span", {
 		className: `${PREFIX}-edit-top-bar-error`,
 		title: typeof saveError === "string" ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message
-	}, typeof saveError === "string" ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message) : null, canvasTabsBarTrailing, extraActions, showSave ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-save-group` }, layoutDirty ? /* @__PURE__ */ React.createElement("span", {
-		className: `${PREFIX}-edit-top-bar-dirty-badge`,
-		role: "status",
-		"aria-live": "polite"
-	}, topBarLabels.unsaved) : null, /* @__PURE__ */ React.createElement("button", {
+	}, typeof saveError === "string" ? saveError : saveError === null || saveError === void 0 ? void 0 : saveError.message) : null, dirtyBadge, historyGroup, canvasTabsBarTrailing, extraActions, showExitGroup ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-save-group` }, /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `${PREFIX}-edit-top-bar-btn`,
+		disabled: saving,
+		onClick: handleCancelClick
+	}, topBarLabels.cancelEdit), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: classNames(`${PREFIX}-edit-top-bar-btn`, "primary"),
+		disabled: saving,
+		onClick: () => {
+			/**
+			* 完成 = 保存 + 退出；保存按 onSave 同步触发，
+			* 即便 onSave 是异步上报也立即调 onExitEdit，
+			* 业务层若需「保存成功后再退出」可在自身 onExitEdit 内做控制。
+			*/
+			onSave === null || onSave === void 0 || onSave();
+			onExitEdit === null || onExitEdit === void 0 || onExitEdit();
+		}
+	}, saving ? topBarLabels.saving : topBarLabels.finishEdit)) : showSave ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-save-group` }, /* @__PURE__ */ React.createElement("button", {
 		type: "button",
 		className: classNames(`${PREFIX}-edit-top-bar-btn`, "primary"),
 		disabled: saving,
 		onClick: onSave
-	}, saving ? topBarLabels.saving : topBarLabels.save)) : null) : null);
+	}, saving ? topBarLabels.saving : topBarLabels.save)) : null);
+	if (phoneLayout) return /* @__PURE__ */ React.createElement(React.Fragment, null, !hideCanvasTabs ? /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${PREFIX}-edit-top-bar`, `${PREFIX}-read-canvas-tabs-bar`, `${PREFIX}-edit-top-bar--full-chrome`, `${PREFIX}-edit-top-bar--phone-edit-canvas-row`, className),
+		role: "toolbar",
+		"aria-label": topBarLabels.aria
+	}, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, fullTabsInner)) : null, hasFullActions ? /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${PREFIX}-edit-top-bar`, `${PREFIX}-edit-top-bar--full-chrome`, `${PREFIX}-edit-top-bar--phone-actions-row`),
+		role: "toolbar"
+	}, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, fullActionsInner)) : null, modalContextHolder);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classNames(`${PREFIX}-edit-top-bar`, `${PREFIX}-read-canvas-tabs-bar`, `${PREFIX}-edit-top-bar--full-chrome`, tabsHiddenClass, className),
+		role: "toolbar",
+		"aria-label": topBarLabels.aria
+	}, !hideCanvasTabs ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-tabs` }, fullTabsInner) : null, hasFullActions ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-edit-top-bar-actions` }, fullActionsInner) : null, modalContextHolder);
 }
 //#endregion
 export { FloorMapEditTopBar as default };