@tmagic/editor 1.7.14-beta.1 → 1.7.14-beta.3

package/dist/tmagic-editor.umd.cjs

@@ -5146,10 +5146,10 @@
 			const { protocol = options.protocol, item } = this.getValueAndProtocol(storage.getItem(`${options.namespace || namespace}:${key}`));
 			if (item === null) return null;
 			switch (protocol) {
-				case Protocol.OBJECT: return getEditorConfig("parseDSL")(`(${item})`);
-				case Protocol.JSON: return JSON.parse(item);
-				case Protocol.NUMBER: return Number(item);
-				case Protocol.BOOLEAN:
+				case "object": return getEditorConfig("parseDSL")(`(${item})`);
+				case "json": return JSON.parse(item);
+				case "number": return Number(item);
+				case "boolean":
 					if (item === "true") return true;
 					if (item === "false") return false;
 				default: return item;
@@ -5177,7 +5177,7 @@
 			const namespace = this.getNamespace();
 			let item = value;
 			const protocol = options.protocol ? `${options.protocol}:` : "";
-			if (typeof value === Protocol.STRING || typeof value === Protocol.NUMBER) item = `${protocol}${value}`;
+			if (typeof value === "string" || typeof value === "number") item = `${protocol}${value}`;
 			else item = `${protocol}${(0, serialize_javascript.default)(value)}`;
 			storage.setItem(`${options.namespace || namespace}:${key}`, item);
 		}
@@ -5793,6 +5793,23 @@
 	};
 	//#endregion
 	//#region packages/editor/src/services/editor.ts
+	/**
+	* 经过 BaseService 的插件 / 中间件包装后，源方法的最后一个形参可能被注入为 dispatch 函数
+	* 当 options 形参位置被注入为函数（或为 null）时，将其归一为空对象，避免后续逻辑误读
+	*/
+	var safeOptions = (options) => {
+		const empty = {};
+		if (!options || typeof options === "function") return empty;
+		return options;
+	};
+	/**
+	* 经过 BaseService 的插件 / 中间件包装后，源方法的形参可能被注入为 dispatch 函数
+	* 当 parent 形参位置被注入为函数（或为空值）时，归一为 null，由调用方继续走默认 parent 逻辑
+	*/
+	var safeParent = (parent) => {
+		if (!parent || typeof parent === "function") return null;
+		return parent;
+	};
 	var Editor = class extends BaseService_default {
 		state = (0, vue.reactive)({
 			root: null,
@@ -6003,9 +6020,13 @@
 		* 向指点容器添加组件节点
 		* @param addConfig 将要添加的组件节点配置
 		* @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+		* @param options 可选配置
+		* @param options.doNotSelect 添加后是否不更新当前选中节点（默认 false，添加后会选中新增的节点）
 		* @returns 添加后的节点
 		*/
-		async add(addNode, parent) {
+		async add(addNode, parent, options) {
+			const safeParentNode = safeParent(parent);
+			const { doNotSelect = false } = safeOptions(options);
 			this.captureSelectionBeforeOp();
 			const stage = this.get("stage");
 			const addNodes = [];
@@ -6017,19 +6038,21 @@
 			const newNodes = await Promise.all(addNodes.map((node) => {
 				const root = this.get("root");
 				if (((0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.isPageFragment)(node)) && root) return this.doAdd(node, root);
-				const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
+				const parentNode = safeParentNode ?? getAddParent(node);
 				if (!parentNode) throw new Error("未找到父元素");
 				return this.doAdd(node, parentNode);
 			}));
 			if (newNodes.length > 1) {
-				const newNodeIds = newNodes.map((node) => node.id);
-				stage?.multiSelect(newNodeIds);
-				await this.multiSelect(newNodeIds);
+				if (!doNotSelect) {
+					const newNodeIds = newNodes.map((node) => node.id);
+					stage?.multiSelect(newNodeIds);
+					await this.multiSelect(newNodeIds);
+				}
 			} else {
-				await this.select(newNodes[0]);
+				if (!doNotSelect) await this.select(newNodes[0]);
 				if ((0, _tmagic_utils.isPage)(newNodes[0])) this.state.pageLength += 1;
 				else if ((0, _tmagic_utils.isPageFragment)(newNodes[0])) this.state.pageFragmentLength += 1;
-				else stage?.select(newNodes[0].id);
+				else if (!doNotSelect) stage?.select(newNodes[0].id);
 			}
 			if (!((0, _tmagic_utils.isPage)(newNodes[0]) || (0, _tmagic_utils.isPageFragment)(newNodes[0]))) {
 				const pageForOp = this.getNodeInfo(newNodes[0].id, false).page;
@@ -6048,7 +6071,8 @@
 			this.emit("add", newNodes);
 			return Array.isArray(addNode) ? newNodes : newNodes[0];
 		}
-		async doRemove(node) {
+		async doRemove(node, options) {
+			const { doNotSelect = false } = safeOptions(options);
 			const root = this.get("root");
 			if (!root) throw new Error("root不能为空");
 			const { parent, node: curNode } = this.getNodeInfo(node.id, false);
@@ -6062,6 +6086,19 @@
 				parentId: parent.id,
 				root: cloneDeep(root)
 			});
+			if (doNotSelect) {
+				const selectedNodes = this.get("nodes");
+				const removedSelectedIndex = selectedNodes.findIndex((n) => `${n.id}` === `${node.id}`);
+				if (removedSelectedIndex !== -1) {
+					const nextSelected = [...selectedNodes];
+					nextSelected.splice(removedSelectedIndex, 1);
+					this.set("nodes", nextSelected);
+				}
+				if ((0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.isPageFragment)(node)) {
+					const currentPage = this.get("page");
+					if (currentPage && `${currentPage.id}` === `${node.id}`) this.set("page", null);
+				}
+			}
 			const selectDefault = async (pages) => {
 				if (pages[0]) {
 					await this.select(pages[0]);
@@ -6074,13 +6111,15 @@
 			const rootItems = root.items || [];
 			if ((0, _tmagic_utils.isPage)(node)) {
 				this.state.pageLength -= 1;
-				await selectDefault(rootItems);
+				if (!doNotSelect) await selectDefault(rootItems);
 			} else if ((0, _tmagic_utils.isPageFragment)(node)) {
 				this.state.pageFragmentLength -= 1;
-				await selectDefault(rootItems);
+				if (!doNotSelect) await selectDefault(rootItems);
 			} else {
-				await this.select(parent);
-				stage?.select(parent.id);
+				if (!doNotSelect) {
+					await this.select(parent);
+					stage?.select(parent.id);
+				}
 				this.addModifiedNodeId(parent.id);
 			}
 			if (!rootItems.length) {
@@ -6090,9 +6129,12 @@
 		}
 		/**
 		* 删除组件
-		* @param {Object} node
+		* @param {Object} node 要删除的节点或节点集合
+		* @param options 可选配置
+		* @param options.doNotSelect 删除后是否不更新当前选中节点（默认 false，删除后会选中父节点或首个页面）
 		*/
-		async remove(nodeOrNodeList) {
+		async remove(nodeOrNodeList, options) {
+			const { doNotSelect = false } = safeOptions(options);
 			this.captureSelectionBeforeOp();
 			const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 			const removedItems = [];
@@ -6112,11 +6154,11 @@
 					});
 				}
 			}
-			await Promise.all(nodes.map((node) => this.doRemove(node)));
+			await Promise.all(nodes.map((node) => this.doRemove(node, { doNotSelect })));
 			if (removedItems.length > 0 && pageForOp) this.pushOpHistory("remove", { removedItems }, pageForOp);
 			this.emit("remove", nodes);
 		}
-		async doUpdate(config, { changeRecords = [], selectedAfterUpdate = true } = {}) {
+		async doUpdate(config, { changeRecords = [] } = {}) {
 			const root = this.get("root");
 			if (!root) throw new Error("root为空");
 			if (!config?.id) throw new Error("没有配置或者配置缺少id值");
@@ -6143,11 +6185,11 @@
 			const layout = await this.getLayout(node);
 			if (Array.isArray(newConfig.items) && newLayout !== layout) newConfig = setChildrenLayout(newConfig, newLayout);
 			parentNodeItems[index] = newConfig;
-			if (selectedAfterUpdate) {
-				const nodes = this.get("nodes");
-				const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
-				nodes.splice(targetIndex, 1, newConfig);
-				this.set("nodes", [...nodes]);
+			const selectedNodes = this.get("nodes");
+			const targetIndex = selectedNodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
+			if (targetIndex !== -1) {
+				selectedNodes.splice(targetIndex, 1, newConfig);
+				this.set("nodes", [...selectedNodes]);
 			}
 			if ((0, _tmagic_utils.isPage)(newConfig) || (0, _tmagic_utils.isPageFragment)(newConfig)) this.set("page", newConfig);
 			this.addModifiedNodeId(newConfig.id);
@@ -6188,9 +6230,12 @@
 		* 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
 		* @param id1 组件ID
 		* @param id2 组件ID
+		* @param options 可选配置
+		* @param options.doNotSelect 排序后是否不更新当前选中节点（默认 false）
 		* @returns void
 		*/
-		async sort(id1, id2) {
+		async sort(id1, id2, options) {
+			const { doNotSelect = false } = safeOptions(options);
 			this.captureSelectionBeforeOp();
 			const root = this.get("root");
 			if (!root) throw new Error("root为空");
@@ -6203,7 +6248,7 @@
 			const index1 = parent.items.findIndex((node) => `${node.id}` === `${id1}`);
 			parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
 			await this.update(parent);
-			await this.select(node);
+			if (!doNotSelect) await this.select(node);
 			this.get("stage")?.update({
 				config: cloneDeep(node),
 				parentId: parent.id,
@@ -6231,9 +6276,13 @@
 		/**
 		* 从localStorage中获取节点，然后添加到当前容器中
 		* @param position 粘贴的坐标
+		* @param collectorOptions 可选的依赖收集器配置
+		* @param options 可选配置
+		* @param options.doNotSelect 粘贴后是否不更新当前选中节点（默认 false）
 		* @returns 添加后的组件节点配置
 		*/
-		async paste(position = {}, collectorOptions) {
+		async paste(position = {}, collectorOptions, options) {
+			const { doNotSelect = false } = safeOptions(options);
 			const config = storage_default.getItem(COPY_STORAGE_KEY);
 			if (!Array.isArray(config)) return;
 			const node = this.get("node");
@@ -6244,7 +6293,7 @@
 			}
 			const pasteConfigs = await this.doPaste(config, position);
 			if (collectorOptions && typeof collectorOptions.isTarget === "function") props_default.replaceRelateId(config, pasteConfigs, collectorOptions);
-			return this.add(pasteConfigs, parent);
+			return this.add(pasteConfigs, parent, { doNotSelect });
 		}
 		async doPaste(config, position = {}) {
 			props_default.clearRelateId();
@@ -6265,14 +6314,17 @@
 		/**
 		* 将指点节点设置居中
 		* @param config 组件节点配置
+		* @param options 可选配置
+		* @param options.doNotSelect 居中后是否不更新当前选中节点（默认 false）
 		* @returns 当前组件节点配置
 		*/
-		async alignCenter(config) {
+		async alignCenter(config, options) {
+			const { doNotSelect = false } = safeOptions(options);
 			const nodes = Array.isArray(config) ? config : [config];
 			const stage = this.get("stage");
 			const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
 			const newNode = await this.update(newNodes);
-			if (newNodes.length > 1) await stage?.multiSelect(newNodes.map((node) => node.id));
+			if (!doNotSelect) if (newNodes.length > 1) await stage?.multiSelect(newNodes.map((node) => node.id));
 			else await stage?.select(newNodes[0].id);
 			return newNode;
 		}
@@ -6317,8 +6369,11 @@
 		* 移动到指定容器中
 		* @param config 需要移动的节点
 		* @param targetId 容器ID
+		* @param options 可选配置
+		* @param options.doNotSelect 移动后是否不更新当前选中节点（默认 false）
 		*/
-		async moveToContainer(config, targetId) {
+		async moveToContainer(config, targetId, options) {
+			const { doNotSelect = false } = safeOptions(options);
 			this.captureSelectionBeforeOp();
 			const root = this.get("root");
 			const { node, parent, page: pageForOp } = this.getNodeInfo(config.id, false);
@@ -6340,15 +6395,17 @@
 				});
 				newConfig.style = getInitPositionStyle(newConfig.style, layout);
 				target.items.push(newConfig);
-				await stage.select(targetId);
+				if (!doNotSelect) await stage.select(targetId);
 				const targetParent = this.getParentById(target.id);
 				await stage.update({
 					config: cloneDeep(target),
 					parentId: targetParent?.id,
 					root: cloneDeep(root)
 				});
-				await this.select(newConfig);
-				stage.select(newConfig.id);
+				if (!doNotSelect) {
+					await this.select(newConfig);
+					stage.select(newConfig.id);
+				}
 				this.addModifiedNodeId(target.id);
 				this.addModifiedNodeId(parent.id);
 				this.pushOpHistory("update", { updatedItems: [{
@@ -7674,7 +7731,7 @@
 	var SplitView_default = SplitView_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/components/Icon.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$63 = ["src"];
+	var _hoisted_1$64 = ["src"];
 	var Icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MEditorIcon",
 		__name: "Icon",
@@ -7692,7 +7749,7 @@
 					key: 1,
 					class: "magic-editor-icon"
 				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("img", { src: __props.icon }, null, 8, _hoisted_1$63)]),
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("img", { src: __props.icon }, null, 8, _hoisted_1$64)]),
 					_: 1
 				})) : typeof __props.icon === "string" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("i", {
 					key: 2,
@@ -7712,7 +7769,7 @@
 	var Icon_default = Icon_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/components/ToolButton.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$62 = {
+	var _hoisted_1$63 = {
 		key: 1,
 		class: "menu-item-text"
 	};
@@ -7727,9 +7784,11 @@
 			}) },
 			eventType: { default: "click" }
 		},
-		setup(__props) {
+		setup(__props, { expose: __expose }) {
 			const props = __props;
 			const services = useServices();
+			const rootElRef = (0, vue.useTemplateRef)("rootEl");
+			const getElRef = () => rootElRef;
 			const disabled = (0, vue.computed)(() => {
 				if (typeof props.data === "string") return false;
 				if (props.data.type === "component") return false;
@@ -7761,9 +7820,11 @@
 				if (props.eventType !== "mouseup") return;
 				if (item.type === "button" && event.button === 0) buttonHandler(item, event);
 			};
+			__expose({ getElRef });
 			return (_ctx, _cache) => {
 				return display.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					key: 0,
+					ref: "rootEl",
 					class: (0, vue.normalizeClass)(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
 					onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(__props.data, $event)),
 					onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
@@ -7771,7 +7832,7 @@
 				}, [__props.data.type === "divider" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicDivider), {
 					key: 0,
 					direction: __props.data.direction || "vertical"
-				}, null, 8, ["direction"])) : __props.data.type === "text" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$62, (0, vue.toDisplayString)(__props.data.text), 1)) : __props.data.type === "button" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [__props.data.tooltip ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+				}, null, 8, ["direction"])) : __props.data.type === "text" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$63, (0, vue.toDisplayString)(__props.data.text), 1)) : __props.data.type === "button" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [__props.data.tooltip ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 					key: 0,
 					effect: "dark",
 					placement: "bottom-start",
@@ -7840,7 +7901,7 @@
 	var ToolButton_default = ToolButton_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/AddButton.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$61 = {
+	var _hoisted_1$62 = {
 		key: 0,
 		id: "m-editor-page-bar-add-icon",
 		class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -7866,7 +7927,7 @@
 				editorService.add(pageConfig);
 			};
 			return (_ctx, _cache) => {
-				return showAddPageButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$61, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
+				return showAddPageButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$62, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
 					reference: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Plus) }, null, 8, ["icon"])]),
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(ToolButton_default, { data: {
 						type: "button",
@@ -7891,7 +7952,7 @@
 	var AddButton_default = AddButton_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$60 = {
+	var _hoisted_1$61 = {
 		class: "m-editor-page-bar",
 		ref: "pageBar"
 	};
@@ -7985,7 +8046,7 @@
 				}
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$60, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$61, [
 					(0, vue.renderSlot)(_ctx.$slots, "prepend"),
 					__props.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$22, [(0, vue.renderSlot)(_ctx.$slots, "default")], 512)) : (0, vue.createCommentVNode)("v-if", true),
 					canScroll.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -8007,7 +8068,7 @@
 	var PageBarScrollContainer_default = PageBarScrollContainer_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageList.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$59 = {
+	var _hoisted_1$60 = {
 		key: 0,
 		id: "m-editor-page-bar-list-icon",
 		class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -8026,7 +8087,7 @@
 				await editorService.select(id);
 			};
 			return (_ctx, _cache) => {
-				return showPageListButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$59, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
+				return showPageListButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$60, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
 					"popper-class": "page-bar-popover",
 					placement: "top",
 					trigger: "hover",
@@ -8058,7 +8119,7 @@
 	var PageList_default = PageList_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/Search.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$58 = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
+	var _hoisted_1$59 = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
 	var Search_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		__name: "Search",
 		props: {
@@ -8091,7 +8152,7 @@
 				emit("search", values);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$58, [(0, vue.createVNode)(Icon_default, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$59, [(0, vue.createVNode)(Icon_default, {
 					icon: (0, vue.unref)(_element_plus_icons_vue.Search),
 					onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
 					class: (0, vue.normalizeClass)({ "icon-active": visible.value })
@@ -8115,7 +8176,7 @@
 	var Search_default = Search_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageBar.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$57 = { class: "m-editor-page-bar-tabs" };
+	var _hoisted_1$58 = { class: "m-editor-page-bar-tabs" };
 	var _hoisted_2$20 = ["data-page-id", "onClick"];
 	var _hoisted_3$6 = { class: "m-editor-page-bar-title" };
 	var _hoisted_4$5 = ["title"];
@@ -8183,7 +8244,7 @@
 				}
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$57, [(0, vue.createVNode)(PageBarScrollContainer_default, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$58, [(0, vue.createVNode)(PageBarScrollContainer_default, {
 					ref: "pageBarScrollContainer",
 					"page-bar-sort-options": __props.pageBarSortOptions,
 					length: list.value.length
@@ -8242,7 +8303,7 @@
 	var PageBar_default = PageBar_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/AddPageBox.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$56 = { class: "m-editor-empty-panel" };
+	var _hoisted_1$57 = { class: "m-editor-empty-panel" };
 	var _hoisted_2$19 = { class: "m-editor-empty-content" };
 	var AddPageBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MEditorAddPageBox",
@@ -8260,7 +8321,7 @@
 				});
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$56, [(0, vue.createElementVNode)("div", _hoisted_2$19, [(0, vue.createElementVNode)("div", {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$57, [(0, vue.createElementVNode)("div", _hoisted_2$19, [(0, vue.createElementVNode)("div", {
 					class: "m-editor-empty-button",
 					onClick: _cache[0] || (_cache[0] = ($event) => clickHandler((0, vue.unref)(_tmagic_core.NodeType).PAGE))
 				}, [(0, vue.createElementVNode)("div", null, [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Plus) }, null, 8, ["icon"])]), _cache[2] || (_cache[2] = (0, vue.createElementVNode)("p", null, "新增页面", -1))]), !__props.disabledPageFragment ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -8276,7 +8337,7 @@
 	var AddPageBox_default = AddPageBox_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/CodeEditor.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$55 = { class: "magic-code-editor" };
+	var _hoisted_1$56 = { class: "magic-code-editor" };
 	var _hoisted_2$18 = {
 		ref: "codeEditor",
 		class: "magic-code-editor-content"
@@ -8393,23 +8454,23 @@
 				if (props.type === "diff") {
 					const originalModel = monaco.editor.createModel(values.value, "text/javascript");
 					const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
-					const position = vsDiffEditor?.getPosition();
+					const viewState = vsDiffEditor?.saveViewState();
 					const result = vsDiffEditor?.setModel({
 						original: originalModel,
 						modified: modifiedModel
 					});
-					if (position) {
-						vsDiffEditor?.setPosition(position);
+					if (viewState) (0, vue.nextTick)(() => {
+						vsDiffEditor?.restoreViewState(viewState);
 						vsDiffEditor?.focus();
-					}
+					});
 					return result;
 				}
-				const position = vsEditor?.getPosition();
+				const viewState = vsEditor?.saveViewState();
 				const result = vsEditor?.setValue(values.value);
-				if (position) {
-					vsEditor?.setPosition(position);
+				if (viewState) (0, vue.nextTick)(() => {
+					vsEditor?.restoreViewState(viewState);
 					vsEditor?.focus();
-				}
+				});
 				return result;
 			};
 			const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
@@ -8513,7 +8574,7 @@
 				}
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$55, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$56, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
 					to: "body",
 					disabled: !fullScreen.value
 				}, [(0, vue.createElementVNode)("div", {
@@ -8540,7 +8601,7 @@
 	var CodeEditor_default = CodeEditor_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/Framework.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$54 = {
+	var _hoisted_1$55 = {
 		class: "m-editor",
 		ref: "content",
 		style: { "min-width": "900px" }
@@ -8602,7 +8663,7 @@
 				}
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$54, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$55, [
 					(0, vue.renderSlot)(_ctx.$slots, "header"),
 					(0, vue.renderSlot)(_ctx.$slots, "nav"),
 					(0, vue.renderSlot)(_ctx.$slots, "content-before"),
@@ -8666,6 +8727,205 @@
 	//#region packages/editor/src/layouts/Framework.vue
 	var Framework_default = Framework_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
+	//#region packages/editor/src/layouts/NavMenuColumn.vue?vue&type=script&setup=true&lang.ts
+	var _hoisted_1$54 = { class: "m-editor-nav-menu-overflow-list" };
+	var NavMenuColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		name: "MEditorNavMenuColumn",
+		__name: "NavMenuColumn",
+		props: {
+			columnKey: {},
+			items: { default: () => [] },
+			width: {},
+			gap: { default: 3 },
+			popoverWidth: { default: 180 }
+		},
+		setup(__props) {
+			const props = __props;
+			const columnEl = (0, vue.useTemplateRef)("columnEl");
+			const moreWrapperEl = (0, vue.useTemplateRef)("moreWrapperEl");
+			const popoverVisible = (0, vue.ref)(false);
+			const togglePopover = () => {
+				popoverVisible.value = !popoverVisible.value;
+			};
+			const itemInstances = (0, vue.ref)([]);
+			let slotsRO;
+			const observedEls = /* @__PURE__ */ new Set();
+			const setItemRef = (inst, index) => {
+				itemInstances.value[index] = inst ?? null;
+			};
+			const itemEls = (0, vue.computed)(() => itemInstances.value.map((inst) => inst?.getElRef?.().value ?? null));
+			const reobserveSlots = () => {
+				if (!slotsRO) return;
+				for (const el of observedEls) slotsRO.unobserve(el);
+				observedEls.clear();
+				for (const el of itemEls.value) if (el) {
+					slotsRO.observe(el);
+					observedEls.add(el);
+				}
+			};
+			const cachedWidths = (0, vue.ref)(/* @__PURE__ */ new Map());
+			const moreWidth = (0, vue.ref)(0);
+			const containerWidth = (0, vue.ref)(0);
+			const hiddenIndexSet = (0, vue.ref)(/* @__PURE__ */ new Set());
+			const hasOverflow = (0, vue.computed)(() => hiddenIndexSet.value.size > 0);
+			const overflowItems = (0, vue.computed)(() => props.items.filter((_, index) => hiddenIndexSet.value.has(index)));
+			const measureAndCompute = () => {
+				if (!columnEl.value) return;
+				containerWidth.value = columnEl.value.clientWidth;
+				const els = itemEls.value;
+				for (let i = 0; i < props.items.length; i++) {
+					const el = els[i];
+					if (!el) {
+						cachedWidths.value.delete(i);
+						continue;
+					}
+					const w = el.getBoundingClientRect().width;
+					if (w > 0) cachedWidths.value.set(i, w);
+					else cachedWidths.value.delete(i);
+				}
+				if (moreWrapperEl.value) {
+					const w = moreWrapperEl.value.getBoundingClientRect().width;
+					if (w > 0) moreWidth.value = w;
+				}
+				const total = props.items.length;
+				if (total === 0 || containerWidth.value <= 0) {
+					if (hiddenIndexSet.value.size > 0) hiddenIndexSet.value = /* @__PURE__ */ new Set();
+					return;
+				}
+				let fullSum = 0;
+				let positive = 0;
+				for (let i = 0; i < total; i++) {
+					const w = cachedWidths.value.get(i) ?? 0;
+					if (w > 0) {
+						fullSum += w;
+						positive += 1;
+					}
+				}
+				fullSum += props.gap * Math.max(0, positive - 1);
+				const effectiveMoreWidth = moreWidth.value > 0 ? moreWidth.value : 32;
+				const reservedMore = effectiveMoreWidth + (positive > 0 ? props.gap : 0);
+				let nextHidden = null;
+				if (fullSum + reservedMore <= containerWidth.value + .5) {
+					if (hiddenIndexSet.value.size > 0) nextHidden = /* @__PURE__ */ new Set();
+				} else {
+					const newHidden = /* @__PURE__ */ new Set();
+					let used = effectiveMoreWidth;
+					let cutoff = -1;
+					for (let i = 0; i < total; i++) {
+						const w = cachedWidths.value.get(i) ?? 0;
+						if (w === 0) continue;
+						const need = props.gap + w;
+						if (used + need > containerWidth.value) {
+							cutoff = i;
+							break;
+						}
+						used += need;
+					}
+					if (cutoff >= 0) for (let j = cutoff; j < total; j++) newHidden.add(j);
+					nextHidden = newHidden;
+				}
+				if (nextHidden) {
+					if (!(nextHidden.size === hiddenIndexSet.value.size && [...nextHidden].every((v) => hiddenIndexSet.value.has(v)))) hiddenIndexSet.value = nextHidden;
+				}
+			};
+			let raf = 0;
+			const scheduleMeasure = () => {
+				if (raf) cancelAnimationFrame(raf);
+				raf = requestAnimationFrame(() => {
+					raf = 0;
+					measureAndCompute();
+					if (hasOverflow.value && moreWidth.value === 0) raf = requestAnimationFrame(() => {
+						raf = 0;
+						measureAndCompute();
+					});
+				});
+			};
+			(0, vue.watch)(hasOverflow, (value) => {
+				if (!value) popoverVisible.value = false;
+			});
+			(0, vue.watch)(() => props.items, () => {
+				cachedWidths.value = /* @__PURE__ */ new Map();
+				hiddenIndexSet.value = /* @__PURE__ */ new Set();
+			}, { deep: true });
+			(0, vue.watch)(itemEls, () => {
+				cachedWidths.value = /* @__PURE__ */ new Map();
+				reobserveSlots();
+				scheduleMeasure();
+			});
+			(0, vue.watch)(() => props.width, () => scheduleMeasure());
+			let ro;
+			(0, vue.onMounted)(() => {
+				if (typeof ResizeObserver !== "undefined") {
+					if (columnEl.value) {
+						ro = new ResizeObserver(() => scheduleMeasure());
+						ro.observe(columnEl.value);
+					}
+					slotsRO = new ResizeObserver(() => scheduleMeasure());
+					reobserveSlots();
+				}
+				scheduleMeasure();
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				if (raf) cancelAnimationFrame(raf);
+				ro?.disconnect();
+				slotsRO?.disconnect();
+				slotsRO = void 0;
+				observedEls.clear();
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					class: (0, vue.normalizeClass)(`menu-${__props.columnKey} m-editor-nav-menu-column`),
+					style: (0, vue.normalizeStyle)(__props.width != null ? `width: ${__props.width}px` : ""),
+					ref_key: "columnEl",
+					ref: columnEl
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.items, (item, index) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(ToolButton_default, {
+						data: item,
+						key: `item-${index}`,
+						class: (0, vue.normalizeClass)({ "m-editor-nav-menu-slot-hidden": hiddenIndexSet.value.has(index) }),
+						ref_for: true,
+						ref: (comp) => setItemRef(comp, index)
+					}, null, 8, ["data", "class"]);
+				}), 128)), (0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)(["m-editor-nav-menu-more-wrapper", { "m-editor-nav-menu-more-wrapper-hidden": !hasOverflow.value }]),
+					ref_key: "moreWrapperEl",
+					ref: moreWrapperEl
+				}, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
+					placement: "bottom-end",
+					"popper-class": "m-editor-nav-menu-popover",
+					width: __props.popoverWidth,
+					visible: popoverVisible.value
+				}, {
+					reference: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+						class: "menu-item button m-editor-nav-menu-more",
+						ref: "referenceEl",
+						onClick: togglePopover
+					}, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						size: "small",
+						text: "",
+						icon: popoverVisible.value ? (0, vue.unref)(_element_plus_icons_vue.ArrowUp) : (0, vue.unref)(_element_plus_icons_vue.ArrowDown),
+						bg: popoverVisible.value,
+						type: popoverVisible.value ? "primary" : ""
+					}, null, 8, [
+						"icon",
+						"bg",
+						"type"
+					])], 512)]),
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$54, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(overflowItems.value, (item, index) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)(ToolButton_default, {
+							data: item,
+							key: `o-${index}`
+						}, null, 8, ["data"]);
+					}), 128))])]),
+					_: 1
+				}, 8, ["width", "visible"])], 2)], 6);
+			};
+		}
+	});
+	//#endregion
+	//#region packages/editor/src/layouts/NavMenuColumn.vue
+	var NavMenuColumn_default = NavMenuColumn_vue_vue_type_script_setup_true_lang_default;
+	//#endregion
 	//#region packages/editor/src/layouts/NavMenu.vue?vue&type=script&setup=true&lang.ts
 	var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MEditorNavMenu",
@@ -8827,16 +9087,16 @@
 					style: (0, vue.normalizeStyle)({ height: `${__props.height}px` }),
 					ref: "navMenu"
 				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(keys), (key) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-						class: (0, vue.normalizeClass)(`menu-${key}`),
+					return (0, vue.openBlock)(), (0, vue.createBlock)(NavMenuColumn_default, {
 						key,
-						style: (0, vue.normalizeStyle)(`width: ${columnWidth.value?.[key]}px`)
-					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(buttons.value[key], (item, index) => {
-						return (0, vue.openBlock)(), (0, vue.createBlock)(ToolButton_default, {
-							data: item,
-							key: index
-						}, null, 8, ["data"]);
-					}), 128))], 6);
+						"column-key": key,
+						items: buttons.value[key],
+						width: columnWidth.value?.[key]
+					}, null, 8, [
+						"column-key",
+						"items",
+						"width"
+					]);
 				}), 128))], 4);
 			};
 		}
@@ -11315,97 +11575,97 @@
 		{
 			command: KeyBindingCommand.DELETE_NODE,
 			keybinding: ["delete", "backspace"],
-			when: [[KeyBindingContainerKey.STAGE, "keyup"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keyup"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.COPY_NODE,
 			keybinding: "ctrl+c",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.PASTE_NODE,
 			keybinding: "ctrl+v",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.CUT_NODE,
 			keybinding: "ctrl+x",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.UNDO,
 			keybinding: "ctrl+z",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.REDO,
 			keybinding: "ctrl+shift+z",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_UP_1,
 			keybinding: "up",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_DOWN_1,
 			keybinding: "down",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_LEFT_1,
 			keybinding: "left",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_RIGHT_1,
 			keybinding: "right",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_UP_10,
 			keybinding: "ctrl+up",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_DOWN_10,
 			keybinding: "ctrl+down",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_LEFT_10,
 			keybinding: "ctrl+left",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_RIGHT_10,
 			keybinding: "ctrl+right",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.SWITCH_NODE,
 			keybinding: "tab",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.ZOOM_IN,
 			keybinding: ["ctrl+=", "ctrl+numpadplus"],
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.ZOOM_OUT,
 			keybinding: ["ctrl+-", "ctrl+numpad-"],
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.ZOOM_FIT,
 			keybinding: "ctrl+0",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.ZOOM_RESET,
 			keybinding: "ctrl+1",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		}
 	];
 	//#endregion