@tmagic/editor 1.7.8 → 1.7.10

package/dist/tmagic-editor.umd.cjs

@@ -141,6 +141,33 @@
 		DragType["LAYER_TREE"] = "layer-tree";
 		return DragType;
 	}({});
+	var canUsePluginMethods = {
+		async: [
+			"getLayout",
+			"highlight",
+			"select",
+			"multiSelect",
+			"doAdd",
+			"add",
+			"doRemove",
+			"remove",
+			"doUpdate",
+			"update",
+			"sort",
+			"copy",
+			"paste",
+			"doPaste",
+			"doAlignCenter",
+			"alignCenter",
+			"moveLayer",
+			"moveToContainer",
+			"dragTo",
+			"undo",
+			"redo",
+			"move"
+		],
+		sync: []
+	};
 	//#endregion
 	//#region node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_freeGlobal.js
 	/** Detect free variable `global` from Node.js. */
@@ -4259,8 +4286,9 @@
 				_tmagic_design.tMagicMessage.error("获取代码块内容失败");
 				return;
 			}
-			let codeContent = codeBlock.content;
-			if (typeof codeContent !== "string") codeContent = codeContent.toString();
+			let codeContent = "";
+			if (codeBlock.content) if (typeof codeBlock.content !== "string") codeContent = codeBlock.content.toString();
+			else codeContent = codeBlock.content;
 			codeConfig.value = {
 				...cloneDeep(codeBlock),
 				content: codeContent
@@ -4575,7 +4603,10 @@
 				"borderWidth",
 				"borderStyle",
 				"borderColor"
-			] }]
+			] }, {
+				name: "transform",
+				defaultValue: () => ({})
+			}]
 		}]
 	};
 	var eventTabConfig = {
@@ -4918,7 +4949,7 @@
 		elementList;
 		listCursor;
 		listMaxSize;
-		constructor(listMaxSize = 20) {
+		constructor(listMaxSize = 100) {
 			const minListMaxSize = 2;
 			this.elementList = [];
 			this.listCursor = 0;
@@ -4933,20 +4964,23 @@
 			}
 		}
 		canUndo() {
-			return this.listCursor > 1;
+			return this.listCursor > 0;
 		}
+		/** 返回被撤销的操作 */
 		undo() {
 			if (!this.canUndo()) return null;
 			this.listCursor -= 1;
-			return this.getCurrentElement();
+			return cloneDeep(this.elementList[this.listCursor]);
 		}
 		canRedo() {
 			return this.elementList.length > this.listCursor;
 		}
+		/** 返回被重做的操作 */
 		redo() {
 			if (!this.canRedo()) return null;
+			const element = cloneDeep(this.elementList[this.listCursor]);
 			this.listCursor += 1;
-			return this.getCurrentElement();
+			return element;
 		}
 		getCurrentElement() {
 			if (this.listCursor < 1) return null;
@@ -4978,15 +5012,7 @@
 		changePage(page) {
 			if (!page) return;
 			this.state.pageId = page.id;
-			if (!this.state.pageSteps[this.state.pageId]) {
-				const undoRedo = new UndoRedo();
-				undoRedo.pushElement({
-					data: page,
-					modifiedNodeIds: /* @__PURE__ */ new Map(),
-					nodeId: page.id
-				});
-				this.state.pageSteps[this.state.pageId] = undoRedo;
-			}
+			if (!this.state.pageSteps[this.state.pageId]) this.state.pageSteps[this.state.pageId] = new UndoRedo();
 			this.setCanUndoRedo();
 			this.emit("page-change", this.state.pageSteps[this.state.pageId]);
 		}
@@ -5417,6 +5443,273 @@
 		buildChangeRecords(value, basePath);
 		return changeRecords;
 	};
+	/**
+	* 根据节点配置或ID解析出选中节点信息，并进行合法性校验
+	* @param config 节点配置或节点ID
+	* @param getNodeInfoFn 获取节点信息的回调函数
+	* @param rootId 根节点ID，用于排除根节点被选中
+	* @returns 选中节点的完整信息（node、parent、page）
+	*/
+	var resolveSelectedNode = (config, getNodeInfoFn, rootId) => {
+		const id = typeof config === "string" || typeof config === "number" ? config : config.id;
+		if (!id) throw new Error("没有ID，无法选中");
+		const { node, parent, page } = getNodeInfoFn(id);
+		if (!node) throw new Error("获取不到组件信息");
+		if (node.id === rootId) throw new Error("不能选根节点");
+		return {
+			node,
+			parent,
+			page
+		};
+	};
+	/**
+	* 处理节点在 fixed 定位与其他定位之间的切换
+	* 当节点从非 fixed 变为 fixed 时，根据节点路径累加偏移量；反之则还原偏移量
+	* @param dist 更新后的节点配置（目标状态）
+	* @param src 更新前的节点配置（原始状态）
+	* @param root 根节点配置，用于计算节点路径上的偏移量
+	* @param getLayoutFn 获取父节点布局方式的回调函数
+	* @returns 处理后的节点配置（深拷贝）
+	*/
+	var toggleFixedPosition = async (dist, src, root, getLayoutFn) => {
+		const newConfig = cloneDeep(dist);
+		if (!(0, _tmagic_utils.isPop)(src) && newConfig.style?.position) {
+			if ((0, _tmagic_stage.isFixed)(newConfig.style) && !(0, _tmagic_stage.isFixed)(src.style || {})) newConfig.style = change2Fixed(newConfig, root);
+			else if (!(0, _tmagic_stage.isFixed)(newConfig.style) && (0, _tmagic_stage.isFixed)(src.style || {})) newConfig.style = await Fixed2Other(newConfig, root, getLayoutFn);
+		}
+		return newConfig;
+	};
+	/**
+	* 根据键盘移动的偏移量计算节点的新样式
+	* 仅对 absolute 或 fixed 定位的节点生效；优先修改 top/left，若未设置则修改 bottom/right
+	* @param style 节点当前样式
+	* @param left 水平方向偏移量（正值向右，负值向左）
+	* @param top 垂直方向偏移量（正值向下，负值向上）
+	* @returns 计算后的新样式对象，若节点不支持移动则返回 null
+	*/
+	var calcMoveStyle = (style, left, top) => {
+		if (!style || !["absolute", "fixed"].includes(style.position)) return null;
+		const newStyle = { ...style };
+		if (top) {
+			if ((0, _tmagic_utils.isNumber)(style.top)) {
+				newStyle.top = Number(style.top) + Number(top);
+				newStyle.bottom = "";
+			} else if ((0, _tmagic_utils.isNumber)(style.bottom)) {
+				newStyle.bottom = Number(style.bottom) - Number(top);
+				newStyle.top = "";
+			}
+		}
+		if (left) {
+			if ((0, _tmagic_utils.isNumber)(style.left)) {
+				newStyle.left = Number(style.left) + Number(left);
+				newStyle.right = "";
+			} else if ((0, _tmagic_utils.isNumber)(style.right)) {
+				newStyle.right = Number(style.right) - Number(left);
+				newStyle.left = "";
+			}
+		}
+		return newStyle;
+	};
+	/**
+	* 计算节点水平居中对齐后的样式
+	* 流式布局（relative）下不做处理；优先通过 DOM 元素实际宽度计算，回退到配置中的 width 值
+	* @param node 需要居中的节点配置
+	* @param parent 父容器节点配置
+	* @param layout 当前布局方式
+	* @param doc 画布 document 对象，用于获取 DOM 元素实际宽度
+	* @returns 计算后的新样式对象，若不支持居中则返回 null
+	*/
+	var calcAlignCenterStyle = (node, parent, layout, doc) => {
+		if (layout === Layout.RELATIVE || !node.style) return null;
+		const style = { ...node.style };
+		if (doc) {
+			const el = (0, _tmagic_utils.getElById)()(doc, node.id);
+			const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
+			if (parentEl && el) {
+				style.left = (0, _tmagic_utils.calcValueByFontsize)(doc, (parentEl.clientWidth - el.clientWidth) / 2);
+				style.right = "";
+			}
+		} else if (parent.style && (0, _tmagic_utils.isNumber)(parent.style?.width) && (0, _tmagic_utils.isNumber)(node.style?.width)) {
+			style.left = (parent.style.width - node.style.width) / 2;
+			style.right = "";
+		}
+		return style;
+	};
+	/**
+	* 计算图层移动后的目标索引
+	* 流式布局与绝对定位布局的移动方向相反：流式布局中"上移"对应索引减小，绝对定位中"上移"对应索引增大
+	* @param currentIndex 节点当前在兄弟列表中的索引
+	* @param offset 移动偏移量，支持数值或 LayerOffset.TOP / LayerOffset.BOTTOM
+	* @param brothersLength 兄弟节点总数
+	* @param isRelative 是否为流式布局
+	* @returns 目标索引位置
+	*/
+	var calcLayerTargetIndex = (currentIndex, offset, brothersLength, isRelative) => {
+		if (offset === LayerOffset.TOP) return isRelative ? 0 : brothersLength;
+		if (offset === LayerOffset.BOTTOM) return isRelative ? brothersLength : 0;
+		return currentIndex + (isRelative ? -offset : offset);
+	};
+	/**
+	* 节点配置合并策略：用于 mergeWith 的自定义回调
+	* - undefined 且 source 拥有该 key 时返回空字符串
+	* - 原来是数组而新值是对象时，使用新值
+	* - 新值是数组时，直接替换而非逐元素合并
+	*/
+	var editorNodeMergeCustomizer = (objValue, srcValue, key, _object, source) => {
+		if (typeof srcValue === "undefined" && Object.hasOwn(source, key)) return "";
+		if (isObject(srcValue) && Array.isArray(objValue)) return srcValue;
+		if (Array.isArray(srcValue)) return srcValue;
+	};
+	/**
+	* 收集复制节点关联的依赖节点，将关联节点追加到 copyNodes 数组中
+	* @param copyNodes 待复制的节点列表（会被就地修改）
+	* @param collectorOptions 依赖收集器配置
+	* @param getNodeById 根据 ID 获取节点的回调函数
+	*/
+	var collectRelatedNodes = (copyNodes, collectorOptions, getNodeById) => {
+		const customTarget = new _tmagic_core.Target({ ...collectorOptions });
+		const coperWatcher = new _tmagic_core.Watcher();
+		coperWatcher.addTarget(customTarget);
+		coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+		Object.keys(customTarget.deps).forEach((nodeId) => {
+			const node = getNodeById(nodeId);
+			if (!node) return;
+			customTarget.deps[nodeId].keys.forEach((key) => {
+				const relateNodeId = get(node, key);
+				if (!copyNodes.find((n) => n.id === relateNodeId)) {
+					const relateNode = getNodeById(relateNodeId);
+					if (relateNode) copyNodes.push(relateNode);
+				}
+			});
+		});
+	};
+	/**
+	* 对拖拽的节点进行分类：同父容器内移动 vs 跨容器移动
+	* @param configs 被拖拽的节点列表
+	* @param targetParent 目标父容器
+	* @param getNodeInfo 获取节点信息的回调
+	* @returns 分类结果，包含同容器索引列表和跨容器节点列表
+	*/
+	var classifyDragSources = (configs, targetParent, getNodeInfo) => {
+		const sameParentIndices = [];
+		const crossParentConfigs = [];
+		for (const config of configs) {
+			const { parent, node: curNode } = getNodeInfo(config.id, false);
+			if (!parent || !curNode) continue;
+			if ((0, _tmagic_utils.getNodePath)(curNode.id, parent.items).some((node) => `${targetParent.id}` === `${node.id}`)) continue;
+			const index = getNodeIndex(curNode.id, parent);
+			if (`${parent.id}` === `${targetParent.id}`) {
+				if (typeof index !== "number" || index === -1) return {
+					sameParentIndices,
+					crossParentConfigs,
+					aborted: true
+				};
+				sameParentIndices.push(index);
+			} else crossParentConfigs.push({
+				config,
+				parent
+			});
+		}
+		return {
+			sameParentIndices,
+			crossParentConfigs,
+			aborted: false
+		};
+	};
+	//#endregion
+	//#region packages/editor/src/utils/editor-history.ts
+	/**
+	* 应用 add 类型的历史操作
+	* reverse=true（撤销）：从父节点中移除已添加的节点
+	* reverse=false（重做）：重新添加节点到父节点中
+	*/
+	async function applyHistoryAddOp(step, reverse, ctx) {
+		const { root, stage } = ctx;
+		if (reverse) for (const node of step.nodes ?? []) {
+			const parent = ctx.getNodeById(step.parentId, false);
+			if (!parent?.items) continue;
+			const idx = getNodeIndex(node.id, parent);
+			if (typeof idx === "number" && idx !== -1) parent.items.splice(idx, 1);
+			await stage?.remove({
+				id: node.id,
+				parentId: parent.id,
+				root: cloneDeep(root)
+			});
+		}
+		else {
+			const parent = ctx.getNodeById(step.parentId, false);
+			if (parent?.items) for (const node of step.nodes ?? []) {
+				const idx = step.indexMap?.[node.id] ?? parent.items.length;
+				parent.items.splice(idx, 0, cloneDeep(node));
+				await stage?.add({
+					config: cloneDeep(node),
+					parent: cloneDeep(parent),
+					parentId: parent.id,
+					root: cloneDeep(root)
+				});
+			}
+		}
+	}
+	/**
+	* 应用 remove 类型的历史操作
+	* reverse=true（撤销）：将已删除的节点按原位置重新插入
+	* reverse=false（重做）：再次删除节点
+	*/
+	async function applyHistoryRemoveOp(step, reverse, ctx) {
+		const { root, stage } = ctx;
+		if (reverse) {
+			const sorted = [...step.removedItems ?? []].sort((a, b) => a.index - b.index);
+			for (const { node, parentId, index } of sorted) {
+				const parent = ctx.getNodeById(parentId, false);
+				if (!parent?.items) continue;
+				parent.items.splice(index, 0, cloneDeep(node));
+				await stage?.add({
+					config: cloneDeep(node),
+					parent: cloneDeep(parent),
+					parentId,
+					root: cloneDeep(root)
+				});
+			}
+		} else for (const { node, parentId } of step.removedItems ?? []) {
+			const parent = ctx.getNodeById(parentId, false);
+			if (!parent?.items) continue;
+			const idx = getNodeIndex(node.id, parent);
+			if (typeof idx === "number" && idx !== -1) parent.items.splice(idx, 1);
+			await stage?.remove({
+				id: node.id,
+				parentId,
+				root: cloneDeep(root)
+			});
+		}
+	}
+	/**
+	* 应用 update 类型的历史操作
+	* reverse=true（撤销）：将节点恢复为 oldNode
+	* reverse=false（重做）：将节点更新为 newNode
+	*/
+	async function applyHistoryUpdateOp(step, reverse, ctx) {
+		const { root, stage } = ctx;
+		const items = step.updatedItems ?? [];
+		for (const { oldNode, newNode } of items) {
+			const config = reverse ? oldNode : newNode;
+			if (config.type === _tmagic_core.NodeType.ROOT) {
+				ctx.setRoot(cloneDeep(config));
+				continue;
+			}
+			const info = ctx.getNodeInfo(config.id, false);
+			if (!info.parent) continue;
+			const idx = getNodeIndex(config.id, info.parent);
+			if (typeof idx !== "number" || idx === -1) continue;
+			info.parent.items[idx] = cloneDeep(config);
+			if ((0, _tmagic_utils.isPage)(config) || (0, _tmagic_utils.isPageFragment)(config)) ctx.setPage(config);
+		}
+		const curPage = ctx.getPage();
+		if (stage && curPage) await stage.update({
+			config: cloneDeep((0, vue.toRaw)(curPage)),
+			parentId: root.id,
+			root: cloneDeep((0, vue.toRaw)(root))
+		});
+	}
 	//#endregion
 	//#region packages/editor/src/utils/operator.ts
 	/**
@@ -5484,33 +5777,6 @@
 	};
 	//#endregion
 	//#region packages/editor/src/services/editor.ts
-	var canUsePluginMethods$5 = {
-		async: [
-			"getLayout",
-			"highlight",
-			"select",
-			"multiSelect",
-			"doAdd",
-			"add",
-			"doRemove",
-			"remove",
-			"doUpdate",
-			"update",
-			"sort",
-			"copy",
-			"paste",
-			"doPaste",
-			"doAlignCenter",
-			"alignCenter",
-			"moveLayer",
-			"moveToContainer",
-			"dragTo",
-			"undo",
-			"redo",
-			"move"
-		],
-		sync: []
-	};
 	var Editor = class extends BaseService_default {
 		state = (0, vue.reactive)({
 			root: null,
@@ -5527,8 +5793,9 @@
 			disabledMultiSelect: false
 		});
 		isHistoryStateChange = false;
+		selectionBeforeOp = null;
 		constructor() {
-			super(canUsePluginMethods$5.async.map((methodName) => ({
+			super(canUsePluginMethods.async.map((methodName) => ({
 				name: methodName,
 				isAsync: true
 			})), [
@@ -5722,6 +5989,7 @@
 		* @returns 添加后的节点
 		*/
 		async add(addNode, parent) {
+			this.captureSelectionBeforeOp();
 			const stage = this.get("stage");
 			const addNodes = [];
 			if (!Array.isArray(addNode)) {
@@ -5746,7 +6014,20 @@
 				else if ((0, _tmagic_utils.isPageFragment)(newNodes[0])) this.state.pageFragmentLength += 1;
 				else stage?.select(newNodes[0].id);
 			}
-			if (!((0, _tmagic_utils.isPage)(newNodes[0]) || (0, _tmagic_utils.isPageFragment)(newNodes[0]))) this.pushHistoryState();
+			if (!((0, _tmagic_utils.isPage)(newNodes[0]) || (0, _tmagic_utils.isPageFragment)(newNodes[0]))) {
+				const pageForOp = this.getNodeInfo(newNodes[0].id, false).page;
+				this.pushOpHistory("add", {
+					nodes: newNodes.map((n) => cloneDeep((0, vue.toRaw)(n))),
+					parentId: (this.getParentById(newNodes[0].id, false) ?? this.get("root")).id,
+					indexMap: Object.fromEntries(newNodes.map((n) => {
+						const p = this.getParentById(n.id, false);
+						return [n.id, p ? getNodeIndex(n.id, p) : -1];
+					}))
+				}, {
+					name: pageForOp?.name || "",
+					id: pageForOp.id
+				});
+			}
 			this.emit("add", newNodes);
 			return Array.isArray(addNode) ? newNodes : newNodes[0];
 		}
@@ -5795,9 +6076,27 @@
 		* @param {Object} node
 		*/
 		async remove(nodeOrNodeList) {
+			this.captureSelectionBeforeOp();
 			const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
+			const removedItems = [];
+			let pageForOp = null;
+			if (!((0, _tmagic_utils.isPage)(nodes[0]) || (0, _tmagic_utils.isPageFragment)(nodes[0]))) for (const n of nodes) {
+				const { parent, node: curNode, page } = this.getNodeInfo(n.id, false);
+				if (parent && curNode) {
+					if (!pageForOp && page) pageForOp = {
+						name: page.name || "",
+						id: page.id
+					};
+					const idx = getNodeIndex(curNode.id, parent);
+					removedItems.push({
+						node: cloneDeep((0, vue.toRaw)(curNode)),
+						parentId: parent.id,
+						index: typeof idx === "number" ? idx : -1
+					});
+				}
+			}
 			await Promise.all(nodes.map((node) => this.doRemove(node)));
-			if (!((0, _tmagic_utils.isPage)(nodes[0]) || (0, _tmagic_utils.isPageFragment)(nodes[0]))) this.pushHistoryState();
+			if (removedItems.length > 0 && pageForOp) this.pushOpHistory("remove", { removedItems }, pageForOp);
 			this.emit("remove", nodes);
 		}
 		async doUpdate(config, { changeRecords = [] } = {}) {
@@ -5807,12 +6106,8 @@
 			const info = this.getNodeInfo(config.id, false);
 			if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 			const node = (0, vue.toRaw)(info.node);
-			let newConfig = await this.toggleFixedPosition((0, vue.toRaw)(config), node, root);
-			newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key, object, source) => {
-				if (typeof srcValue === "undefined" && Object.hasOwn(source, key)) return "";
-				if (isObject(srcValue) && Array.isArray(objValue)) return srcValue;
-				if (Array.isArray(srcValue)) return srcValue;
-			});
+			let newConfig = await toggleFixedPosition((0, vue.toRaw)(config), node, root, this.getLayout);
+			newConfig = mergeWith(cloneDeep(node), newConfig, editorNodeMergeCustomizer);
 			if (!newConfig.type) throw new Error("配置缺少type值");
 			if (newConfig.type === _tmagic_core.NodeType.ROOT) {
 				this.set("root", newConfig);
@@ -5850,9 +6145,23 @@
 		* @returns 更新后的节点配置
 		*/
 		async update(config, data = {}) {
+			this.captureSelectionBeforeOp();
 			const nodes = Array.isArray(config) ? config : [config];
 			const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
-			if (updateData[0].oldNode?.type !== _tmagic_core.NodeType.ROOT) this.pushHistoryState();
+			if (updateData[0].oldNode?.type !== _tmagic_core.NodeType.ROOT) {
+				const curNodes = this.get("nodes");
+				if (!this.isHistoryStateChange && curNodes.length) {
+					const pageForOp = this.getNodeInfo(nodes[0].id, false).page;
+					this.pushOpHistory("update", { updatedItems: updateData.map((d) => ({
+						oldNode: cloneDeep(d.oldNode),
+						newNode: cloneDeep((0, vue.toRaw)(d.newNode))
+					})) }, {
+						name: pageForOp?.name || "",
+						id: pageForOp.id
+					});
+				}
+				this.isHistoryStateChange = false;
+			}
 			this.emit("update", updateData);
 			return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
 		}
@@ -5863,6 +6172,7 @@
 		* @returns void
 		*/
 		async sort(id1, id2) {
+			this.captureSelectionBeforeOp();
 			const root = this.get("root");
 			if (!root) throw new Error("root为空");
 			const node = this.get("node");
@@ -5880,8 +6190,6 @@
 				parentId: parent.id,
 				root: cloneDeep(root)
 			});
-			this.addModifiedNodeId(parent.id);
-			this.pushHistoryState();
 		}
 		/**
 		* 将组件节点配置存储到localStorage中
@@ -5898,23 +6206,7 @@
 		*/
 		copyWithRelated(config, collectorOptions) {
 			const copyNodes = Array.isArray(config) ? config : [config];
-			if (collectorOptions && typeof collectorOptions.isTarget === "function") {
-				const customTarget = new _tmagic_core.Target({ ...collectorOptions });
-				const coperWatcher = new _tmagic_core.Watcher();
-				coperWatcher.addTarget(customTarget);
-				coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
-				Object.keys(customTarget.deps).forEach((nodeId) => {
-					const node = this.getNodeById(nodeId);
-					if (!node) return;
-					customTarget.deps[nodeId].keys.forEach((key) => {
-						const relateNodeId = get(node, key);
-						if (!copyNodes.find((node) => node.id === relateNodeId)) {
-							const relateNode = this.getNodeById(relateNodeId);
-							if (relateNode) copyNodes.push(relateNode);
-						}
-					});
-				});
-			}
+			if (collectorOptions && typeof collectorOptions.isTarget === "function") collectRelatedNodes(copyNodes, collectorOptions, (id) => this.getNodeById(id));
 			storage_default.setItem(COPY_STORAGE_KEY, copyNodes, { protocol: Protocol.OBJECT });
 		}
 		/**
@@ -5945,20 +6237,10 @@
 			if (!parent) throw new Error("找不到父节点");
 			const node = cloneDeep((0, vue.toRaw)(config));
 			const layout = await this.getLayout(parent, node);
-			if (layout === Layout.RELATIVE) return config;
-			if (!node.style) return config;
 			const doc = this.get("stage")?.renderer?.contentWindow?.document;
-			if (doc) {
-				const el = (0, _tmagic_utils.getElById)()(doc, node.id);
-				const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
-				if (parentEl && el) {
-					node.style.left = (0, _tmagic_utils.calcValueByFontsize)(doc, (parentEl.clientWidth - el.clientWidth) / 2);
-					node.style.right = "";
-				}
-			} else if (parent.style && (0, _tmagic_utils.isNumber)(parent.style?.width) && (0, _tmagic_utils.isNumber)(node.style?.width)) {
-				node.style.left = (parent.style.width - node.style.width) / 2;
-				node.style.right = "";
-			}
+			const newStyle = calcAlignCenterStyle(node, parent, layout, doc);
+			if (!newStyle) return config;
+			node.style = newStyle;
 			return node;
 		}
 		/**
@@ -5980,6 +6262,7 @@
 		* @param offset 偏移量
 		*/
 		async moveLayer(offset) {
+			this.captureSelectionBeforeOp();
 			const root = this.get("root");
 			if (!root) throw new Error("root为空");
 			const parent = this.get("parent");
@@ -5989,11 +6272,9 @@
 			const brothers = parent.items || [];
 			const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 			const isRelative = await this.getLayout(parent, node) === Layout.RELATIVE;
-			let offsetIndex;
-			if (offset === LayerOffset.TOP) offsetIndex = isRelative ? 0 : brothers.length;
-			else if (offset === LayerOffset.BOTTOM) offsetIndex = isRelative ? brothers.length : 0;
-			else offsetIndex = index + (isRelative ? -offset : offset);
+			const offsetIndex = calcLayerTargetIndex(index, offset, brothers.length, isRelative);
 			if (offsetIndex > 0 && offsetIndex > brothers.length || offsetIndex < 0) return;
+			const oldParent = cloneDeep((0, vue.toRaw)(parent));
 			brothers.splice(index, 1);
 			brothers.splice(offsetIndex, 0, node);
 			const grandparent = this.getParentById(parent.id);
@@ -6003,7 +6284,14 @@
 				root: cloneDeep(root)
 			});
 			this.addModifiedNodeId(parent.id);
-			this.pushHistoryState();
+			const pageForOp = this.getNodeInfo(node.id, false).page;
+			this.pushOpHistory("update", { updatedItems: [{
+				oldNode: oldParent,
+				newNode: cloneDeep((0, vue.toRaw)(parent))
+			}] }, {
+				name: pageForOp?.name || "",
+				id: pageForOp.id
+			});
 			this.emit("move-layer", offset);
 		}
 		/**
@@ -6012,11 +6300,14 @@
 		* @param targetId 容器ID
 		*/
 		async moveToContainer(config, targetId) {
+			this.captureSelectionBeforeOp();
 			const root = this.get("root");
-			const { node, parent } = this.getNodeInfo(config.id, false);
+			const { node, parent, page: pageForOp } = this.getNodeInfo(config.id, false);
 			const target = this.getNodeById(targetId, false);
 			const stage = this.get("stage");
 			if (root && node && parent && stage) {
+				const oldSourceParent = cloneDeep((0, vue.toRaw)(parent));
+				const oldTarget = cloneDeep((0, vue.toRaw)(target));
 				const index = getNodeIndex(node.id, parent);
 				parent.items?.splice(index, 1);
 				await stage.remove({
@@ -6041,36 +6332,42 @@
 				stage.select(newConfig.id);
 				this.addModifiedNodeId(target.id);
 				this.addModifiedNodeId(parent.id);
-				this.pushHistoryState();
+				this.pushOpHistory("update", { updatedItems: [{
+					oldNode: oldSourceParent,
+					newNode: cloneDeep((0, vue.toRaw)(parent))
+				}, {
+					oldNode: oldTarget,
+					newNode: cloneDeep((0, vue.toRaw)(target))
+				}] }, {
+					name: pageForOp?.name || "",
+					id: pageForOp.id
+				});
 				return newConfig;
 			}
 		}
 		async dragTo(config, targetParent, targetIndex) {
+			this.captureSelectionBeforeOp();
 			if (!targetParent || !Array.isArray(targetParent.items)) return;
 			const configs = Array.isArray(config) ? config : [config];
-			const sourceIndicesInTargetParent = [];
-			const sourceOutTargetParent = [];
+			const beforeSnapshots = /* @__PURE__ */ new Map();
+			for (const cfg of configs) {
+				const { parent } = this.getNodeInfo(cfg.id, false);
+				if (parent && !beforeSnapshots.has(`${parent.id}`)) beforeSnapshots.set(`${parent.id}`, cloneDeep((0, vue.toRaw)(parent)));
+			}
+			if (!beforeSnapshots.has(`${targetParent.id}`)) beforeSnapshots.set(`${targetParent.id}`, cloneDeep((0, vue.toRaw)(targetParent)));
 			const newLayout = await this.getLayout(targetParent);
-			forConfigs: for (const config of configs) {
-				const { parent, node: curNode } = this.getNodeInfo(config.id, false);
-				if (!parent || !curNode) continue;
-				const path = (0, _tmagic_utils.getNodePath)(curNode.id, parent.items);
-				for (const node of path) if (targetParent.id === node.id) continue forConfigs;
-				const index = getNodeIndex(curNode.id, parent);
-				if (parent.id === targetParent.id) {
-					if (typeof index !== "number" || index === -1) return;
-					sourceIndicesInTargetParent.push(index);
-				} else {
-					if (newLayout !== await this.getLayout(parent)) setLayout(config, newLayout);
-					parent.items?.splice(index, 1);
-					sourceOutTargetParent.push(config);
-					this.addModifiedNodeId(parent.id);
-				}
+			const { sameParentIndices, crossParentConfigs, aborted } = classifyDragSources(configs, targetParent, (id, raw) => this.getNodeInfo(id, raw));
+			if (aborted) return;
+			for (const { config: crossConfig, parent } of crossParentConfigs) {
+				if (newLayout !== await this.getLayout(parent)) setLayout(crossConfig, newLayout);
+				const index = getNodeIndex(crossConfig.id, parent);
+				parent.items?.splice(index, 1);
+				this.addModifiedNodeId(parent.id);
 			}
-			moveItemsInContainer(sourceIndicesInTargetParent, targetParent, targetIndex);
-			sourceOutTargetParent.forEach((config, index) => {
-				targetParent.items?.splice(targetIndex + index, 0, config);
-				this.addModifiedNodeId(config.id);
+			moveItemsInContainer(sameParentIndices, targetParent, targetIndex);
+			crossParentConfigs.forEach(({ config: crossConfig }, index) => {
+				targetParent.items?.splice(targetIndex + index, 0, crossConfig);
+				this.addModifiedNodeId(crossConfig.id);
 			});
 			const page = this.get("page");
 			const root = this.get("root");
@@ -6080,7 +6377,19 @@
 				parentId: root.id,
 				root: cloneDeep(root)
 			});
-			this.pushHistoryState();
+			const updatedItems = [];
+			for (const oldNode of beforeSnapshots.values()) {
+				const newNode = this.getNodeById(oldNode.id, false);
+				if (newNode) updatedItems.push({
+					oldNode,
+					newNode: cloneDeep((0, vue.toRaw)(newNode))
+				});
+			}
+			const pageForOp = this.getNodeInfo(configs[0].id, false).page;
+			this.pushOpHistory("update", { updatedItems }, {
+				name: pageForOp?.name || "",
+				id: pageForOp.id
+			});
 			this.emit("drag-to", {
 				targetIndex,
 				configs,
@@ -6089,56 +6398,32 @@
 		}
 		/**
 		* 撤销当前操作
-		* @returns 上一次数据
+		* @returns 被撤销的操作
 		*/
 		async undo() {
 			const value = history_default.undo();
-			await this.changeHistoryState(value);
+			if (value) await this.applyHistoryOp(value, true);
 			return value;
 		}
 		/**
 		* 恢复到下一步
-		* @returns 下一步数据
+		* @returns 被恢复的操作
 		*/
 		async redo() {
 			const value = history_default.redo();
-			await this.changeHistoryState(value);
+			if (value) await this.applyHistoryOp(value, false);
 			return value;
 		}
 		async move(left, top) {
 			const node = (0, vue.toRaw)(this.get("node"));
 			if (!node || (0, _tmagic_utils.isPage)(node)) return;
-			const { style, id, type } = node;
-			if (!style || !["absolute", "fixed"].includes(style.position)) return;
-			const update = (style) => this.update({
-				id,
-				type,
-				style
+			const newStyle = calcMoveStyle(node.style || {}, left, top);
+			if (!newStyle) return;
+			await this.update({
+				id: node.id,
+				type: node.type,
+				style: newStyle
 			});
-			if (top) {
-				if ((0, _tmagic_utils.isNumber)(style.top)) update({
-					...style,
-					top: Number(style.top) + Number(top),
-					bottom: ""
-				});
-				else if ((0, _tmagic_utils.isNumber)(style.bottom)) update({
-					...style,
-					bottom: Number(style.bottom) - Number(top),
-					top: ""
-				});
-			}
-			if (left) {
-				if ((0, _tmagic_utils.isNumber)(style.left)) update({
-					...style,
-					left: Number(style.left) + Number(left),
-					right: ""
-				});
-				else if ((0, _tmagic_utils.isNumber)(style.right)) update({
-					...style,
-					right: Number(style.right) - Number(left),
-					left: ""
-				});
-			}
 		}
 		resetState() {
 			this.set("root", null);
@@ -6174,50 +6459,74 @@
 		addModifiedNodeId(id) {
 			if (!this.isHistoryStateChange) this.get("modifiedNodeIds").set(id, id);
 		}
-		pushHistoryState() {
-			const curNode = cloneDeep((0, vue.toRaw)(this.get("node")));
-			const page = this.get("page");
-			if (!this.isHistoryStateChange && curNode && page) history_default.push({
-				data: cloneDeep((0, vue.toRaw)(page)),
-				modifiedNodeIds: this.get("modifiedNodeIds"),
-				nodeId: curNode.id
-			});
+		captureSelectionBeforeOp() {
+			if (this.isHistoryStateChange || this.selectionBeforeOp) return;
+			this.selectionBeforeOp = this.get("nodes").map((n) => n.id);
+		}
+		pushOpHistory(opType, extra, pageData) {
+			if (this.isHistoryStateChange) {
+				this.selectionBeforeOp = null;
+				return;
+			}
+			const step = {
+				data: pageData,
+				opType,
+				selectedBefore: this.selectionBeforeOp ?? [],
+				selectedAfter: this.get("nodes").map((n) => n.id),
+				modifiedNodeIds: new Map(this.get("modifiedNodeIds")),
+				...extra
+			};
+			history_default.push(step);
+			this.selectionBeforeOp = null;
 			this.isHistoryStateChange = false;
 		}
-		async changeHistoryState(value) {
-			if (!value) return;
+		/**
+		* 应用历史操作（撤销 / 重做）
+		* @param step 操作记录
+		* @param reverse true = 撤销，false = 重做
+		*/
+		async applyHistoryOp(step, reverse) {
 			this.isHistoryStateChange = true;
-			await this.update(value.data);
-			this.set("modifiedNodeIds", value.modifiedNodeIds);
-			setTimeout(() => {
-				if (!value.nodeId) return;
-				this.select(value.nodeId).then(() => {
-					this.get("stage")?.select(value.nodeId);
-				});
-			}, 0);
-			this.emit("history-change", value.data);
-		}
-		async toggleFixedPosition(dist, src, root) {
-			const newConfig = cloneDeep(dist);
-			if (!(0, _tmagic_utils.isPop)(src) && newConfig.style?.position) {
-				if ((0, _tmagic_stage.isFixed)(newConfig.style) && !(0, _tmagic_stage.isFixed)(src.style || {})) newConfig.style = change2Fixed(newConfig, root);
-				else if (!(0, _tmagic_stage.isFixed)(newConfig.style) && (0, _tmagic_stage.isFixed)(src.style || {})) newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
+			const root = this.get("root");
+			const stage = this.get("stage");
+			if (!root) return;
+			const ctx = {
+				root,
+				stage,
+				getNodeById: (id, raw) => this.getNodeById(id, raw),
+				getNodeInfo: (id, raw) => this.getNodeInfo(id, raw),
+				setRoot: (r) => this.set("root", r),
+				setPage: (p) => this.set("page", p),
+				getPage: () => this.get("page")
+			};
+			switch (step.opType) {
+				case "add":
+					await applyHistoryAddOp(step, reverse, ctx);
+					break;
+				case "remove":
+					await applyHistoryRemoveOp(step, reverse, ctx);
+					break;
+				case "update":
+					await applyHistoryUpdateOp(step, reverse, ctx);
+					break;
 			}
-			return newConfig;
+			this.set("modifiedNodeIds", step.modifiedNodeIds);
+			const page = (0, vue.toRaw)(this.get("page"));
+			if (page) {
+				const selectIds = reverse ? step.selectedBefore : step.selectedAfter;
+				setTimeout(() => {
+					if (!selectIds.length) return;
+					if (selectIds.length > 1) {
+						this.multiSelect(selectIds);
+						stage?.multiSelect(selectIds);
+					} else this.select(selectIds[0]).then(() => stage?.select(selectIds[0])).catch(() => {});
+				}, 0);
+				this.emit("history-change", page);
+			}
+			this.isHistoryStateChange = false;
 		}
 		selectedConfigExceptionHandler(config) {
-			let id;
-			if (typeof config === "string" || typeof config === "number") id = config;
-			else id = config.id;
-			if (!id) throw new Error("没有ID，无法选中");
-			const { node, parent, page } = this.getNodeInfo(id);
-			if (!node) throw new Error("获取不到组件信息");
-			if (node.id === this.state.root?.id) throw new Error("不能选根节点");
-			return {
-				node,
-				parent,
-				page
-			};
+			return resolveSelectedNode(config, (id) => this.getNodeInfo(id), this.state.root?.id);
 		}
 	};
 	var editor_default = new Editor();
@@ -6275,13 +6584,13 @@
 			top: 0
 		}
 	});
-	var canUsePluginMethods$4 = {
+	var canUsePluginMethods$5 = {
 		async: ["zoom", "calcZoom"],
 		sync: []
 	};
 	var Ui = class extends BaseService_default {
 		constructor() {
-			super(canUsePluginMethods$4.async.map((methodName) => ({
+			super(canUsePluginMethods$5.async.map((methodName) => ({
 				name: methodName,
 				isAsync: true
 			})));
@@ -11899,11 +12208,7 @@
 			const frameworkRect = (0, vue.computed)(() => uiService.get("frameworkRect"));
 			const style = (0, vue.computed)(() => ({ transform: `scale(${zoom.value})` }));
 			(0, vue.watch)(stage, (stage) => {
-				if (stage) stage.on("dblclick", async (event) => {
-					const el = await stage.actionManager?.getElementFromPoint(event) || null;
-					stageOverlayService.openOverlay(el);
-				});
-				else stageOverlayService.closeOverlay();
+				if (!stage) stageOverlayService.closeOverlay();
 			});
 			(0, vue.watch)(zoom, (zoom) => {
 				const stage = stageOverlayService.get("stage");
@@ -12148,7 +12453,7 @@
 			const props = __props;
 			let stage = null;
 			let runtime = null;
-			const { editorService, uiService, keybindingService } = useServices();
+			const { editorService, uiService, keybindingService, stageOverlayService } = useServices();
 			const stageLoading = (0, vue.computed)(() => editorService.get("stageLoading"));
 			const stageWrapRef = (0, vue.useTemplateRef)("stageWrap");
 			const stageContainerEl = (0, vue.useTemplateRef)("stageContainer");
@@ -12161,6 +12466,42 @@
 			const page = (0, vue.computed)(() => editorService.get("page"));
 			const zoom = (0, vue.computed)(() => uiService.get("zoom"));
 			const node = (0, vue.computed)(() => editorService.get("node"));
+			/**
+			* 判断元素是否被非页面级的滚动容器裁剪（未完整显示）
+			*
+			* 从元素向上遍历祖先节点，跳过页面/页面片容器，
+			* 检查是否存在设置了 overflow 的滚动容器将该元素裁剪，
+			* 只有元素未被完整显示时才需要打开 overlay 以展示完整内容
+			*/
+			const isClippedByScrollContainer = (el) => {
+				const win = el.ownerDocument.defaultView;
+				if (!win) return false;
+				const root = editorService.get("root");
+				const pageIds = new Set(root?.items?.map((item) => `${item.id}`) ?? []);
+				const elId = (0, _tmagic_utils.getIdFromEl)()(el);
+				if (elId && pageIds.has(elId)) return false;
+				let parent = el.parentElement;
+				while (parent && parent !== el.ownerDocument.documentElement) {
+					const parentId = (0, _tmagic_utils.getIdFromEl)()(parent);
+					if (parentId && pageIds.has(parentId)) return false;
+					const { overflowX, overflowY } = win.getComputedStyle(parent);
+					if ([
+						"auto",
+						"scroll",
+						"hidden"
+					].includes(overflowX) || [
+						"auto",
+						"scroll",
+						"hidden"
+					].includes(overflowY) || parent.scrollWidth > parent.clientWidth || parent.scrollHeight > parent.clientHeight) {
+						const elRect = el.getBoundingClientRect();
+						const containerRect = parent.getBoundingClientRect();
+						if (elRect.top < containerRect.top || elRect.left < containerRect.left || elRect.bottom > containerRect.bottom || elRect.right > containerRect.right) return true;
+					}
+					parent = parent.parentElement;
+				}
+				return false;
+			};
 			(0, vue.watchEffect)(() => {
 				if (stage || !page.value) return;
 				if (!stageContainerEl.value) return;
@@ -12169,6 +12510,33 @@
 				stage.on("select", () => {
 					stageWrapRef.value?.container?.focus();
 				});
+				stage.on("dblclick", async (event) => {
+					if (props.stageOptions.beforeDblclick) {
+						if (await props.stageOptions.beforeDblclick(event) === false) return;
+					}
+					const el = await stage?.actionManager?.getElementFromPoint(event) || null;
+					if (!el) return;
+					const id = (0, _tmagic_utils.getIdFromEl)()(el);
+					if (id) {
+						const node = editorService.getNodeById(id);
+						if (node?.type === "page-fragment-container" && node.pageFragmentId) {
+							await editorService.select(node.pageFragmentId);
+							return;
+						}
+					}
+					if (!props.disabledStageOverlay && isClippedByScrollContainer(el)) {
+						stageOverlayService.openOverlay(el);
+						return;
+					}
+					const nextEl = await stage?.actionManager?.getNextElementFromPoint(event) || null;
+					if (nextEl) {
+						const nextId = (0, _tmagic_utils.getIdFromEl)()(nextEl);
+						if (nextId) {
+							await editorService.select(nextId);
+							editorService.get("stage")?.select(nextId);
+						}
+					}
+				});
 				editorService.set("stage", (0, vue.markRaw)(stage));
 				stage.mount(stageContainerEl.value);
 				if (!node.value?.id) return;
@@ -12406,7 +12774,7 @@
 	var Workspace_default = Workspace_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/services/codeBlock.ts
-	var canUsePluginMethods$3 = {
+	var canUsePluginMethods$4 = {
 		async: [
 			"setCodeDslById",
 			"setEditStatus",
@@ -12425,10 +12793,10 @@
 			paramsColConfig: void 0
 		});
 		constructor() {
-			super([...canUsePluginMethods$3.async.map((methodName) => ({
+			super([...canUsePluginMethods$4.async.map((methodName) => ({
 				name: methodName,
 				isAsync: true
-			})), ...canUsePluginMethods$3.sync.map((methodName) => ({
+			})), ...canUsePluginMethods$4.sync.map((methodName) => ({
 				name: methodName,
 				isAsync: false
 			}))]);
@@ -12673,7 +13041,7 @@
 	var componentList_default = new ComponentList();
 	//#endregion
 	//#region packages/editor/src/services/dataSource.ts
-	var canUsePluginMethods$2 = {
+	var canUsePluginMethods$3 = {
 		async: [],
 		sync: [
 			"getFormConfig",
@@ -12701,7 +13069,7 @@
 			methods: {}
 		});
 		constructor() {
-			super(canUsePluginMethods$2.sync.map((methodName) => ({
+			super(canUsePluginMethods$3.sync.map((methodName) => ({
 				name: methodName,
 				isAsync: false
 			})));
@@ -12820,7 +13188,7 @@
 	var dataSource_default = new DataSource();
 	//#endregion
 	//#region packages/editor/src/utils/dep/worker.ts?worker&inline
-	var jsContent = "(function() {\n	//#region packages/schema/src/index.ts\n	const NODE_CONDS_KEY = \"displayConds\";\n	const NODE_DISABLE_DATA_SOURCE_KEY = \"_tmagic_node_disabled_data_source\";\n	const NODE_DISABLE_CODE_BLOCK_KEY = \"_tmagic_node_disabled_code_block\";\n	let HookType = /* @__PURE__ */ function(HookType) {\n		/** 代码块钩子标识 */\n		HookType[\"CODE\"] = \"code\";\n		return HookType;\n	}({});\n	//#endregion\n	//#region packages/utils/src/index.ts\n	const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n	const getKeysArray = (keys) => `${keys}`.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\");\n	const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n	const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n	//#endregion\n	//#region packages/dep/src/types.ts\n	/** 依赖收集的目标类型 */\n	let DepTargetType = /* @__PURE__ */ function(DepTargetType) {\n		DepTargetType[\"DEFAULT\"] = \"default\";\n		/** 代码块 */\n		DepTargetType[\"CODE_BLOCK\"] = \"code-block\";\n		/** 数据源 */\n		DepTargetType[\"DATA_SOURCE\"] = \"data-source\";\n		/** 数据源方法 */\n		DepTargetType[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n		/** 数据源条件 */\n		DepTargetType[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n		return DepTargetType;\n	}({});\n	//#endregion\n	//#region packages/dep/src/Target.ts\n	/**\n	* 需要收集依赖的目标\n	* 例如：一个代码块可以为一个目标\n	*/\n	var Target = class {\n		/**\n		* 如何识别目标\n		*/\n		isTarget;\n		/**\n		* 目标id，不可重复\n		* 例如目标是代码块，则为代码块id\n		*/\n		id;\n		/**\n		* 目标名称，用于显示在依赖列表中\n		*/\n		name;\n		/**\n		* 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type\n		*/\n		type = DepTargetType.DEFAULT;\n		/**\n		* 依赖详情\n		* 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n		*/\n		deps = {};\n		/**\n		* 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集\n		*/\n		isCollectByDefault;\n		constructor(options) {\n			this.isTarget = options.isTarget;\n			this.id = options.id;\n			this.name = options.name;\n			this.isCollectByDefault = options.isCollectByDefault ?? true;\n			if (options.type) this.type = options.type;\n			if (options.initialDeps) this.deps = options.initialDeps;\n		}\n		/**\n		* 更新依赖\n		* @param option 节点配置\n		* @param key 哪个key配置了这个目标的id\n		*/\n		updateDep({ id, name, key, data }) {\n			const dep = this.deps[id] || {\n				name,\n				keys: []\n			};\n			dep.name = name;\n			dep.data = data;\n			this.deps[id] = dep;\n			if (!dep.keys.includes(key)) dep.keys.push(key);\n		}\n		/**\n		* 删除依赖\n		* @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖\n		* @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key\n		* @returns void\n		*/\n		removeDep(id, key) {\n			if (typeof id === \"undefined\") {\n				Object.keys(this.deps).forEach((depKey) => {\n					delete this.deps[depKey];\n				});\n				return;\n			}\n			const dep = this.deps[id];\n			if (!dep) return;\n			if (key) {\n				const index = dep.keys.indexOf(key);\n				dep.keys.splice(index, 1);\n				if (dep.keys.length === 0) delete this.deps[id];\n			} else delete this.deps[id];\n		}\n		/**\n		* 判断指定节点下的指定key是否存在在依赖列表中\n		* @param node 哪个节点\n		* @param key 哪个key\n		* @returns boolean\n		*/\n		hasDep(id, key) {\n			return this.deps[id]?.keys.includes(key) ?? false;\n		}\n		destroy() {\n			this.deps = {};\n		}\n	};\n	//#endregion\n	//#region packages/dep/src/utils.ts\n	const INTEGER_REGEXP = /^\\d+$/;\n	const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n		type: DepTargetType.CODE_BLOCK,\n		id,\n		initialDeps,\n		name: codeBlock.name,\n		isTarget: (_key, value) => {\n			if (id === value) return true;\n			if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) return value.hookData.some((item) => item.codeId === id);\n			return false;\n		}\n	});\n	/**\n	* ['array'] ['array', '0'] ['array', '0', 'a'] 这种返回false\n	* ['array', 'a'] 这种返回true\n	* @param keys\n	* @param fields\n	* @returns boolean\n	*/\n	const isIncludeArrayField = (keys, fields) => {\n		let f = fields;\n		return keys.some((key, index) => {\n			const field = f.find(({ name }) => name === key);\n			f = field?.fields || [];\n			return field?.type === \"array\" && index < keys.length - 1 && !INTEGER_REGEXP.test(keys[index + 1]);\n		});\n	};\n	/**\n	* 判断模板(value)是不是使用数据源Id(dsId)，如：`xxx${dsId.field}xxx${dsId.field}`\n	* @param value any\n	* @param dsId string | number\n	* @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板;\n	* @returns boolean\n	*/\n	const isDataSourceTemplate = (value, ds, hasArray = false) => {\n		const templates = value.match(dataSourceTemplateRegExp) || [];\n		if (templates.length <= 0) return false;\n		for (const tpl of templates) {\n			const keys = getKeysArray(tpl.substring(2, tpl.length - 1));\n			const dsId = keys.shift();\n			if (!dsId || dsId !== ds.id) continue;\n			if (hasArray === isIncludeArrayField(keys, ds.fields)) return true;\n		}\n		return false;\n	};\n	/**\n	* 指定数据源的字符串模板,如：{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`}\n	* @param value any\n	* @param dsId string | number\n	* @returns boolean\n	*/\n	const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n	/**\n	* 关联数据源字段，格式为 [前缀+数据源ID, 字段名]\n	* 使用data-source-field-select value: 'value' 可以配置出来\n	* @param value any[]\n	* @param id string | number\n	* @returns boolean\n	*/\n	const isUseDataSourceField = (value, id) => {\n		if (!Array.isArray(value) || typeof value[0] !== \"string\") return false;\n		const [prefixId] = value;\n		const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n		if (prefixIndex === -1) return false;\n		return prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length) === id;\n	};\n	const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n		if (!value) return false;\n		const valueType = typeof value;\n		if (valueType !== \"string\" && valueType !== \"object\") return false;\n		if (`${key}`.startsWith(\"displayConds\")) return false;\n		if (valueType === \"string\") return isDataSourceTemplate(value, ds, hasArray);\n		if (isObject(value) && value.isBindDataSource && value.dataSourceId === ds.id) return true;\n		if (isSpecificDataSourceTemplate(value, ds.id)) return true;\n		if (isUseDataSourceField(value, ds.id)) {\n			const [, ...keys] = value;\n			const includeArray = isIncludeArrayField(keys, ds.fields);\n			return hasArray ? includeArray : !includeArray;\n		}\n		return false;\n	};\n	const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n		if (!Array.isArray(value) || !ds) return false;\n		const [dsId, ...keys] = value;\n		if (dsId !== ds.id || !`${key}`.startsWith(\"displayConds\")) return false;\n		if (ds.fields?.some((field) => field.name === keys[0])) {\n			const includeArray = isIncludeArrayField(keys, ds.fields);\n			return hasArray ? includeArray : !includeArray;\n		}\n		return false;\n	};\n	const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE,\n		id: ds.id,\n		initialDeps,\n		isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n	});\n	const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE_COND,\n		id: ds.id,\n		initialDeps,\n		isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n	});\n	const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE_METHOD,\n		id: ds.id,\n		initialDeps,\n		isTarget: (_key, value) => {\n			if (!Array.isArray(value)) return false;\n			const [dsId, methodName] = value;\n			if (!methodName || dsId !== ds.id) return false;\n			if (ds.methods?.some((method) => method.name === methodName)) return true;\n			if (ds.fields?.some((field) => field.name === methodName)) return false;\n			return true;\n		}\n	});\n	const traverseTarget = (targetsList, cb, type) => {\n		if (type) {\n			const targets = targetsList[type];\n			if (targets) for (const target of Object.values(targets)) cb(target);\n			return;\n		}\n		for (const targets of Object.values(targetsList)) for (const target of Object.values(targets)) cb(target);\n	};\n	//#endregion\n	//#region packages/dep/src/Watcher.ts\n	const DATA_SOURCE_TARGET_TYPES = new Set([\n		DepTargetType.DATA_SOURCE,\n		DepTargetType.DATA_SOURCE_COND,\n		DepTargetType.DATA_SOURCE_METHOD\n	]);\n	var Watcher = class {\n		targetsList = {};\n		childrenProp = \"items\";\n		idProp = \"id\";\n		nameProp = \"name\";\n		constructor(options) {\n			if (options?.initialTargets) this.targetsList = options.initialTargets;\n			if (options?.childrenProp) this.childrenProp = options.childrenProp;\n		}\n		getTargetsList() {\n			return this.targetsList;\n		}\n		/**\n		* 获取指定类型中的所有target\n		* @param type 分类\n		* @returns Target[]\n		*/\n		getTargets(type = DepTargetType.DEFAULT) {\n			return this.targetsList[type] || {};\n		}\n		/**\n		* 添加新的目标\n		* @param target Target\n		*/\n		addTarget(target) {\n			const targets = this.getTargets(target.type) || {};\n			this.targetsList[target.type] = targets;\n			targets[target.id] = target;\n		}\n		/**\n		* 获取指定id的target\n		* @param id target id\n		* @returns Target\n		*/\n		getTarget(id, type = DepTargetType.DEFAULT) {\n			return this.getTargets(type)[id];\n		}\n		/**\n		* 判断是否存在指定id的target\n		* @param id target id\n		* @returns boolean\n		*/\n		hasTarget(id, type = DepTargetType.DEFAULT) {\n			return Boolean(this.getTarget(id, type));\n		}\n		/**\n		* 判断是否存在指定类型的target\n		* @param type target type\n		* @returns boolean\n		*/\n		hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n			return Object.keys(this.getTargets(type)).length > 0;\n		}\n		/**\n		* 删除指定id的target\n		* @param id target id\n		*/\n		removeTarget(id, type = DepTargetType.DEFAULT) {\n			const targets = this.getTargets(type);\n			if (targets[id]) {\n				targets[id].destroy();\n				delete targets[id];\n			}\n		}\n		/**\n		* 删除指定分类的所有target\n		* @param type 分类\n		* @returns void\n		*/\n		removeTargets(type = DepTargetType.DEFAULT) {\n			const targets = this.targetsList[type];\n			if (!targets) return;\n			for (const target of Object.values(targets)) target.destroy();\n			delete this.targetsList[type];\n		}\n		/**\n		* 删除所有target\n		*/\n		clearTargets() {\n			for (const key of Object.keys(this.targetsList)) delete this.targetsList[key];\n		}\n		/**\n		* 收集依赖\n		* @param nodes 需要收集的节点\n		* @param deep 是否需要收集子节点\n		* @param type 强制收集指定类型的依赖\n		*/\n		collect(nodes, depExtendedData = {}, deep = false, type) {\n			this.collectByCallback(nodes, type, ({ node, target }) => {\n				this.removeTargetDep(target, node);\n				this.collectItem(node, target, depExtendedData, deep);\n			});\n		}\n		collectByCallback(nodes, type, cb) {\n			traverseTarget(this.targetsList, (target) => {\n				if (!type && !target.isCollectByDefault) return;\n				for (const node of nodes) cb({\n					node,\n					target\n				});\n			}, type);\n		}\n		/**\n		* 清除所有目标的依赖\n		* @param nodes 需要清除依赖的节点\n		*/\n		clear(nodes, type) {\n			let { targetsList } = this;\n			if (type) targetsList = { [type]: this.getTargets(type) };\n			const clearedItemsNodeIds = /* @__PURE__ */ new Set();\n			traverseTarget(targetsList, (target) => {\n				if (nodes) for (const node of nodes) {\n					target.removeDep(node[this.idProp]);\n					if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.has(node[this.idProp])) {\n						clearedItemsNodeIds.add(node[this.idProp]);\n						this.clear(node[this.childrenProp]);\n					}\n				}\n				else target.removeDep();\n			});\n		}\n		/**\n		* 清除指定类型的依赖\n		* @param type 类型\n		* @param nodes 需要清除依赖的节点\n		*/\n		clearByType(type, nodes) {\n			this.clear(nodes, type);\n		}\n		collectItem(node, target, depExtendedData = {}, deep = false) {\n			if (node[\"_tmagic_node_disabled_data_source\"] && DATA_SOURCE_TARGET_TYPES.has(target.type)) return;\n			if (node[\"_tmagic_node_disabled_code_block\"] && target.type === DepTargetType.CODE_BLOCK) return;\n			const collectTarget = (config, prop = \"\") => {\n				const doCollect = (key, value) => {\n					const keyIsItems = key === this.childrenProp;\n					const fullKey = prop ? `${prop}.${key}` : key;\n					if (target.isTarget(fullKey, value)) target.updateDep({\n						id: node[this.idProp],\n						name: `${node[this.nameProp] || node[this.idProp]}`,\n						data: depExtendedData,\n						key: fullKey\n					});\n					else if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n						const item = value[i];\n						if (isObject(item)) collectTarget(item, `${fullKey}[${i}]`);\n					}\n					else if (isObject(value)) collectTarget(value, fullKey);\n					if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItem(child, target, depExtendedData, deep);\n				};\n				for (const [key, value] of Object.entries(config)) {\n					if (typeof value === \"undefined\" || value === \"\") continue;\n					doCollect(key, value);\n				}\n			};\n			collectTarget(node);\n		}\n		removeTargetDep(target, node, key) {\n			target.removeDep(node[this.idProp], key);\n			if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetDep(target, item, key);\n		}\n	};\n	//#endregion\n	//#region packages/editor/src/utils/logger.ts\n	const error = (...args) => {};\n	//#endregion\n	//#region packages/editor/src/utils/dep/worker.ts\n	onmessage = (e) => {\n		const watcher = new Watcher({ initialTargets: {} });\n		const { dsl } = e.data;\n		try {\n			const mApp = eval(`(${dsl})`);\n			if (!mApp) postMessage({});\n			watcher.clearTargets();\n			if (mApp.codeBlocks) for (const [id, code] of Object.entries(mApp.codeBlocks)) watcher.addTarget(createCodeBlockTarget(id, code));\n			if (mApp.dataSources) for (const ds of mApp.dataSources) {\n				watcher.addTarget(createDataSourceTarget(ds, {}));\n				watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n				watcher.addTarget(createDataSourceCondTarget(ds, {}));\n			}\n			watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n				watcher.collectItem(node, target, { pageId: node.id }, true);\n			});\n			const data = {\n				[DepTargetType.DATA_SOURCE]: {},\n				[DepTargetType.DATA_SOURCE_METHOD]: {},\n				[DepTargetType.DATA_SOURCE_COND]: {},\n				[DepTargetType.CODE_BLOCK]: {}\n			};\n			traverseTarget(watcher.getTargetsList(), (target) => {\n				data[target.type][target.id] = target.deps;\n			});\n			postMessage(data);\n		} catch (e) {\n			postMessage({});\n		}\n	};\n	//#endregion\n})();\n";
+	var jsContent = "(function() {\n	//#region packages/schema/src/index.ts\n	const NODE_CONDS_KEY = \"displayConds\";\n	const NODE_DISABLE_DATA_SOURCE_KEY = \"_tmagic_node_disabled_data_source\";\n	const NODE_DISABLE_CODE_BLOCK_KEY = \"_tmagic_node_disabled_code_block\";\n	let HookType = /* @__PURE__ */ function(HookType) {\n		/** 代码块钩子标识 */\n		HookType[\"CODE\"] = \"code\";\n		return HookType;\n	}({});\n	//#endregion\n	//#region packages/utils/src/const.ts\n	const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n	//#endregion\n	//#region packages/utils/src/index.ts\n	const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n	const getKeysArray = (keys) => `${keys}`.replace(/\\[(\\d+)\\]/g, \".$1\").split(\".\");\n	const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n	//#endregion\n	//#region packages/dep/src/types.ts\n	/** 依赖收集的目标类型 */\n	let DepTargetType = /* @__PURE__ */ function(DepTargetType) {\n		DepTargetType[\"DEFAULT\"] = \"default\";\n		/** 代码块 */\n		DepTargetType[\"CODE_BLOCK\"] = \"code-block\";\n		/** 数据源 */\n		DepTargetType[\"DATA_SOURCE\"] = \"data-source\";\n		/** 数据源方法 */\n		DepTargetType[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n		/** 数据源条件 */\n		DepTargetType[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n		return DepTargetType;\n	}({});\n	//#endregion\n	//#region packages/dep/src/Target.ts\n	/**\n	* 需要收集依赖的目标\n	* 例如：一个代码块可以为一个目标\n	*/\n	var Target = class {\n		/**\n		* 如何识别目标\n		*/\n		isTarget;\n		/**\n		* 目标id，不可重复\n		* 例如目标是代码块，则为代码块id\n		*/\n		id;\n		/**\n		* 目标名称，用于显示在依赖列表中\n		*/\n		name;\n		/**\n		* 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type\n		*/\n		type = DepTargetType.DEFAULT;\n		/**\n		* 依赖详情\n		* 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n		*/\n		deps = {};\n		/**\n		* 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集\n		*/\n		isCollectByDefault;\n		constructor(options) {\n			this.isTarget = options.isTarget;\n			this.id = options.id;\n			this.name = options.name;\n			this.isCollectByDefault = options.isCollectByDefault ?? true;\n			if (options.type) this.type = options.type;\n			if (options.initialDeps) this.deps = options.initialDeps;\n		}\n		/**\n		* 更新依赖\n		* @param option 节点配置\n		* @param key 哪个key配置了这个目标的id\n		*/\n		updateDep({ id, name, key, data }) {\n			const dep = this.deps[id] || {\n				name,\n				keys: []\n			};\n			dep.name = name;\n			dep.data = data;\n			this.deps[id] = dep;\n			if (!dep.keys.includes(key)) dep.keys.push(key);\n		}\n		/**\n		* 删除依赖\n		* @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖\n		* @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key\n		* @returns void\n		*/\n		removeDep(id, key) {\n			if (typeof id === \"undefined\") {\n				Object.keys(this.deps).forEach((depKey) => {\n					delete this.deps[depKey];\n				});\n				return;\n			}\n			const dep = this.deps[id];\n			if (!dep) return;\n			if (key) {\n				const index = dep.keys.indexOf(key);\n				dep.keys.splice(index, 1);\n				if (dep.keys.length === 0) delete this.deps[id];\n			} else delete this.deps[id];\n		}\n		/**\n		* 判断指定节点下的指定key是否存在在依赖列表中\n		* @param node 哪个节点\n		* @param key 哪个key\n		* @returns boolean\n		*/\n		hasDep(id, key) {\n			return this.deps[id]?.keys.includes(key) ?? false;\n		}\n		destroy() {\n			this.deps = {};\n		}\n	};\n	//#endregion\n	//#region packages/dep/src/utils.ts\n	const INTEGER_REGEXP = /^\\d+$/;\n	const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n		type: DepTargetType.CODE_BLOCK,\n		id,\n		initialDeps,\n		name: codeBlock.name,\n		isTarget: (_key, value) => {\n			if (id === value) return true;\n			if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) return value.hookData.some((item) => item.codeId === id);\n			return false;\n		}\n	});\n	/**\n	* ['array'] ['array', '0'] ['array', '0', 'a'] 这种返回false\n	* ['array', 'a'] 这种返回true\n	* @param keys\n	* @param fields\n	* @returns boolean\n	*/\n	const isIncludeArrayField = (keys, fields) => {\n		let f = fields;\n		return keys.some((key, index) => {\n			const field = f.find(({ name }) => name === key);\n			f = field?.fields || [];\n			return field?.type === \"array\" && index < keys.length - 1 && !INTEGER_REGEXP.test(keys[index + 1]);\n		});\n	};\n	/**\n	* 判断模板(value)是不是使用数据源Id(dsId)，如：`xxx${dsId.field}xxx${dsId.field}`\n	* @param value any\n	* @param dsId string | number\n	* @param hasArray boolean true: 一定要包含有需要迭代的模板; false: 一定要包含普通模板;\n	* @returns boolean\n	*/\n	const isDataSourceTemplate = (value, ds, hasArray = false) => {\n		const templates = value.match(dataSourceTemplateRegExp) || [];\n		if (templates.length <= 0) return false;\n		for (const tpl of templates) {\n			const keys = getKeysArray(tpl.substring(2, tpl.length - 1));\n			const dsId = keys.shift();\n			if (!dsId || dsId !== ds.id) continue;\n			if (hasArray === isIncludeArrayField(keys, ds.fields)) return true;\n		}\n		return false;\n	};\n	/**\n	* 指定数据源的字符串模板,如：{ isBindDataSourceField: true, dataSourceId: 'id', template: `xxx${field}xxx`}\n	* @param value any\n	* @param dsId string | number\n	* @returns boolean\n	*/\n	const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n	/**\n	* 关联数据源字段，格式为 [前缀+数据源ID, 字段名]\n	* 使用data-source-field-select value: 'value' 可以配置出来\n	* @param value any[]\n	* @param id string | number\n	* @returns boolean\n	*/\n	const isUseDataSourceField = (value, id) => {\n		if (!Array.isArray(value) || typeof value[0] !== \"string\") return false;\n		const [prefixId] = value;\n		const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n		if (prefixIndex === -1) return false;\n		return prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length) === id;\n	};\n	const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n		if (!value) return false;\n		const valueType = typeof value;\n		if (valueType !== \"string\" && valueType !== \"object\") return false;\n		if (`${key}`.startsWith(\"displayConds\")) return false;\n		if (valueType === \"string\") return isDataSourceTemplate(value, ds, hasArray);\n		if (isObject(value) && value.isBindDataSource && value.dataSourceId === ds.id) return true;\n		if (isSpecificDataSourceTemplate(value, ds.id)) return true;\n		if (isUseDataSourceField(value, ds.id)) {\n			const [, ...keys] = value;\n			const includeArray = isIncludeArrayField(keys, ds.fields);\n			return hasArray ? includeArray : !includeArray;\n		}\n		return false;\n	};\n	const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n		if (!Array.isArray(value) || !ds) return false;\n		const [dsId, ...keys] = value;\n		if (dsId !== ds.id || !`${key}`.startsWith(\"displayConds\")) return false;\n		if (ds.fields?.some((field) => field.name === keys[0])) {\n			const includeArray = isIncludeArrayField(keys, ds.fields);\n			return hasArray ? includeArray : !includeArray;\n		}\n		return false;\n	};\n	const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE,\n		id: ds.id,\n		initialDeps,\n		isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n	});\n	const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE_COND,\n		id: ds.id,\n		initialDeps,\n		isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n	});\n	const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n		type: DepTargetType.DATA_SOURCE_METHOD,\n		id: ds.id,\n		initialDeps,\n		isTarget: (_key, value) => {\n			if (!Array.isArray(value)) return false;\n			const [dsId, methodName] = value;\n			if (!methodName || dsId !== ds.id) return false;\n			if (ds.methods?.some((method) => method.name === methodName)) return true;\n			if (ds.fields?.some((field) => field.name === methodName)) return false;\n			return true;\n		}\n	});\n	const traverseTarget = (targetsList, cb, type) => {\n		if (type) {\n			const targets = targetsList[type];\n			if (targets) for (const target of Object.values(targets)) cb(target);\n			return;\n		}\n		for (const targets of Object.values(targetsList)) for (const target of Object.values(targets)) cb(target);\n	};\n	//#endregion\n	//#region packages/dep/src/Watcher.ts\n	const DATA_SOURCE_TARGET_TYPES = new Set([\n		DepTargetType.DATA_SOURCE,\n		DepTargetType.DATA_SOURCE_COND,\n		DepTargetType.DATA_SOURCE_METHOD\n	]);\n	var Watcher = class {\n		targetsList = {};\n		childrenProp = \"items\";\n		idProp = \"id\";\n		nameProp = \"name\";\n		constructor(options) {\n			if (options?.initialTargets) this.targetsList = options.initialTargets;\n			if (options?.childrenProp) this.childrenProp = options.childrenProp;\n		}\n		getTargetsList() {\n			return this.targetsList;\n		}\n		/**\n		* 获取指定类型中的所有target\n		* @param type 分类\n		* @returns Target[]\n		*/\n		getTargets(type = DepTargetType.DEFAULT) {\n			return this.targetsList[type] || {};\n		}\n		/**\n		* 添加新的目标\n		* @param target Target\n		*/\n		addTarget(target) {\n			const targets = this.getTargets(target.type) || {};\n			this.targetsList[target.type] = targets;\n			targets[target.id] = target;\n		}\n		/**\n		* 获取指定id的target\n		* @param id target id\n		* @returns Target\n		*/\n		getTarget(id, type = DepTargetType.DEFAULT) {\n			return this.getTargets(type)[id];\n		}\n		/**\n		* 判断是否存在指定id的target\n		* @param id target id\n		* @returns boolean\n		*/\n		hasTarget(id, type = DepTargetType.DEFAULT) {\n			return Boolean(this.getTarget(id, type));\n		}\n		/**\n		* 判断是否存在指定类型的target\n		* @param type target type\n		* @returns boolean\n		*/\n		hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n			return Object.keys(this.getTargets(type)).length > 0;\n		}\n		/**\n		* 删除指定id的target\n		* @param id target id\n		*/\n		removeTarget(id, type = DepTargetType.DEFAULT) {\n			const targets = this.getTargets(type);\n			if (targets[id]) {\n				targets[id].destroy();\n				delete targets[id];\n			}\n		}\n		/**\n		* 删除指定分类的所有target\n		* @param type 分类\n		* @returns void\n		*/\n		removeTargets(type = DepTargetType.DEFAULT) {\n			const targets = this.targetsList[type];\n			if (!targets) return;\n			for (const target of Object.values(targets)) target.destroy();\n			delete this.targetsList[type];\n		}\n		/**\n		* 删除所有target\n		*/\n		clearTargets() {\n			for (const key of Object.keys(this.targetsList)) delete this.targetsList[key];\n		}\n		/**\n		* 收集依赖\n		* @param nodes 需要收集的节点\n		* @param deep 是否需要收集子节点\n		* @param type 强制收集指定类型的依赖\n		*/\n		collect(nodes, depExtendedData = {}, deep = false, type) {\n			this.collectByCallback(nodes, type, ({ node, target }) => {\n				this.removeTargetDep(target, node);\n				this.collectItem(node, target, depExtendedData, deep);\n			});\n		}\n		collectByCallback(nodes, type, cb) {\n			traverseTarget(this.targetsList, (target) => {\n				if (!type && !target.isCollectByDefault) return;\n				for (const node of nodes) cb({\n					node,\n					target\n				});\n			}, type);\n		}\n		/**\n		* 清除所有目标的依赖\n		* @param nodes 需要清除依赖的节点\n		*/\n		clear(nodes, type) {\n			let { targetsList } = this;\n			if (type) targetsList = { [type]: this.getTargets(type) };\n			const clearedItemsNodeIds = /* @__PURE__ */ new Set();\n			traverseTarget(targetsList, (target) => {\n				if (nodes) for (const node of nodes) {\n					target.removeDep(node[this.idProp]);\n					if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.has(node[this.idProp])) {\n						clearedItemsNodeIds.add(node[this.idProp]);\n						this.clear(node[this.childrenProp]);\n					}\n				}\n				else target.removeDep();\n			});\n		}\n		/**\n		* 清除指定类型的依赖\n		* @param type 类型\n		* @param nodes 需要清除依赖的节点\n		*/\n		clearByType(type, nodes) {\n			this.clear(nodes, type);\n		}\n		collectItem(node, target, depExtendedData = {}, deep = false) {\n			if (node[\"_tmagic_node_disabled_data_source\"] && DATA_SOURCE_TARGET_TYPES.has(target.type)) return;\n			if (node[\"_tmagic_node_disabled_code_block\"] && target.type === DepTargetType.CODE_BLOCK) return;\n			const collectTarget = (config, prop = \"\") => {\n				const doCollect = (key, value) => {\n					const keyIsItems = key === this.childrenProp;\n					const fullKey = prop ? `${prop}.${key}` : key;\n					if (target.isTarget(fullKey, value)) target.updateDep({\n						id: node[this.idProp],\n						name: `${node[this.nameProp] || node[this.idProp]}`,\n						data: depExtendedData,\n						key: fullKey\n					});\n					else if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n						const item = value[i];\n						if (isObject(item)) collectTarget(item, `${fullKey}[${i}]`);\n					}\n					else if (isObject(value)) collectTarget(value, fullKey);\n					if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItem(child, target, depExtendedData, deep);\n				};\n				for (const [key, value] of Object.entries(config)) {\n					if (typeof value === \"undefined\" || value === \"\") continue;\n					doCollect(key, value);\n				}\n			};\n			collectTarget(node);\n		}\n		removeTargetDep(target, node, key) {\n			target.removeDep(node[this.idProp], key);\n			if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetDep(target, item, key);\n		}\n	};\n	//#endregion\n	//#region packages/editor/src/utils/logger.ts\n	const error = (...args) => {\n		console.error(\"magic editor: \", ...args);\n	};\n	//#endregion\n	//#region packages/editor/src/utils/dep/worker.ts\n	onmessage = (e) => {\n		const watcher = new Watcher({ initialTargets: {} });\n		const { dsl } = e.data;\n		try {\n			const mApp = eval(`(${dsl})`);\n			if (!mApp) postMessage({});\n			watcher.clearTargets();\n			if (mApp.codeBlocks) for (const [id, code] of Object.entries(mApp.codeBlocks)) watcher.addTarget(createCodeBlockTarget(id, code));\n			if (mApp.dataSources) for (const ds of mApp.dataSources) {\n				watcher.addTarget(createDataSourceTarget(ds, {}));\n				watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n				watcher.addTarget(createDataSourceCondTarget(ds, {}));\n			}\n			watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n				watcher.collectItem(node, target, { pageId: node.id }, true);\n			});\n			const data = {\n				[DepTargetType.DATA_SOURCE]: {},\n				[DepTargetType.DATA_SOURCE_METHOD]: {},\n				[DepTargetType.DATA_SOURCE_COND]: {},\n				[DepTargetType.CODE_BLOCK]: {}\n			};\n			traverseTarget(watcher.getTargetsList(), (target) => {\n				data[target.type][target.id] = target.deps;\n			});\n			postMessage(data);\n		} catch (e) {\n			error(e);\n			postMessage({});\n		}\n	};\n	//#endregion\n})();\n";
 	var blob = typeof self !== "undefined" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", jsContent], { type: "text/javascript;charset=utf-8" });
 	function WorkerWrapper(options) {
 		let objURL;
@@ -13002,7 +13370,7 @@
 	var dep_default = new Dep();
 	//#endregion
 	//#region packages/editor/src/services/events.ts
-	var canUsePluginMethods$1 = {
+	var canUsePluginMethods$2 = {
 		async: [],
 		sync: [
 			"setEvent",
@@ -13015,10 +13383,10 @@
 	var methodMap = (0, vue.reactive)({});
 	var Events = class extends BaseService_default {
 		constructor() {
-			super([...canUsePluginMethods$1.async.map((methodName) => ({
+			super([...canUsePluginMethods$2.async.map((methodName) => ({
 				name: methodName,
 				isAsync: true
-			})), ...canUsePluginMethods$1.sync.map((methodName) => ({
+			})), ...canUsePluginMethods$2.sync.map((methodName) => ({
 				name: methodName,
 				isAsync: false
 			}))]);
@@ -13236,7 +13604,7 @@
 	var keybinding_default = new Keybinding();
 	//#endregion
 	//#region packages/editor/src/services/stageOverlay.ts
-	var canUsePluginMethods = {
+	var canUsePluginMethods$1 = {
 		async: [],
 		sync: [
 			"openOverlay",
@@ -13257,7 +13625,7 @@
 			stageOverlayVisible: false
 		});
 		constructor() {
-			super(canUsePluginMethods.sync.map((methodName) => ({
+			super(canUsePluginMethods$1.sync.map((methodName) => ({
 				name: methodName,
 				isAsync: false
 			})));
@@ -13477,13 +13845,13 @@
 		});
 	};
 	var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
-		let getTMagicAppPrimise = null;
+		let getTMagicAppPromise = null;
 		const getTMagicApp = async () => {
 			const { renderer } = await getStage();
 			if (!renderer) return;
 			if (renderer.runtime) return renderer.runtime.getApp?.();
-			if (getTMagicAppPrimise) return getTMagicAppPrimise;
-			getTMagicAppPrimise = new Promise((resolve) => {
+			if (getTMagicAppPromise) return getTMagicAppPromise;
+			getTMagicAppPromise = new Promise((resolve) => {
 				const timeout = globalThis.setTimeout(() => {
 					resolve(void 0);
 				}, 1e4);
@@ -13492,7 +13860,7 @@
 					resolve(renderer.runtime?.getApp?.());
 				});
 			});
-			return getTMagicAppPrimise;
+			return getTMagicAppPromise;
 		};
 		const updateStageNodes = (nodes) => {
 			for (const node of nodes) updateStageNode(node);
@@ -13850,6 +14218,7 @@
 			canSelect: { type: Function },
 			isContainer: { type: Function },
 			customContentMenu: { type: Function },
+			beforeDblclick: { type: Function },
 			extendFormState: { type: Function },
 			pageBarSortOptions: {},
 			pageFilterFunction: { type: Function }
@@ -13896,7 +14265,8 @@
 				disabledDragStart: props.disabledDragStart,
 				renderType: props.renderType,
 				guidesOptions: props.guidesOptions,
-				disabledMultiSelect: props.disabledMultiSelect
+				disabledMultiSelect: props.disabledMultiSelect,
+				beforeDblclick: props.beforeDblclick
 			};
 			stageOverlay_default.set("stageOptions", stageOptions);
 			(0, vue.provide)("services", services);
@@ -14136,13 +14506,23 @@
 				labelWidth: "120px",
 				name: props.name
 			}];
-			const codeParamsConfig = (0, vue.computed)(() => getFormConfig(props.paramsConfig.map(({ name, text, extra, ...config }) => ({
-				type: "data-source-field-select",
-				name,
-				text,
-				extra,
-				fieldConfig: config
-			}))));
+			const codeParamsConfig = (0, vue.computed)(() => getFormConfig(props.paramsConfig.map(({ name, text, extra, ...config }) => {
+				let { type } = config;
+				if (typeof type === "function") type = type(void 0, { model: props.model[props.name] });
+				if (type && ["data-source-field-select", "vs-code"].includes(type)) return {
+					...config,
+					name,
+					text,
+					extra
+				};
+				return {
+					type: "data-source-field-select",
+					name,
+					text,
+					extra,
+					fieldConfig: config
+				};
+			})));
 			/**
 			* 参数值修改更新
 			*/
@@ -14998,8 +15378,9 @@
 					actions: [{
 						text: "编辑",
 						handler: (method, index) => {
-							let codeContent = method.content || "({ params, dataSource, app }) => {\n  // place your code here\n}";
-							if (typeof codeContent !== "string") codeContent = codeContent.toString();
+							let codeContent = "({ params, dataSource, app }) => {\n  // place your code here\n}";
+							if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
+							else codeContent = method.content;
 							codeConfig.value = {
 								...cloneDeep(method),
 								content: codeContent
@@ -15488,6 +15869,30 @@
 			});
 			const getParamItemsConfig = ([dataSourceId, methodName] = ["", ""]) => {
 				if (!dataSourceId) return [];
+				if (methodName === _tmagic_utils.DATA_SOURCE_SET_DATA_METHOD_NAME) return [{
+					name: "field",
+					text: "字段",
+					type: "data-source-field-select",
+					dataSourceId,
+					checkStrictly: true
+				}, {
+					name: "data",
+					text: "数据",
+					type: (_formState, { model }) => {
+						const fieldType = getFieldType(dataSourceService.getDataSourceById(`${dataSourceId}`), model.field);
+						let type = "vs-code";
+						if (fieldType === "number") type = "number";
+						else if (fieldType === "string") type = "text";
+						else if (fieldType === "boolean") type = "switch";
+						return type;
+					},
+					language: "javascript",
+					options: (0, vue.inject)("codeOptions", {}),
+					autosize: {
+						minRows: 1,
+						maxRows: 10
+					}
+				}];
 				const paramStatements = dataSources.value?.find((item) => item.id === dataSourceId)?.methods?.find((item) => item.name === methodName)?.params;
 				if (!paramStatements) return [];
 				return paramStatements.map((paramState) => ({
@@ -15496,13 +15901,20 @@
 				}));
 			};
 			const paramsConfig = (0, vue.ref)(getParamItemsConfig(props.model[props.name || "dataSourceMethod"]));
-			const methodsOptions = (0, vue.computed)(() => dataSources.value?.filter((ds) => ds.methods?.length || dataSourceService.getFormMethod(ds.type).length)?.map((ds) => ({
+			const methodsOptions = (0, vue.computed)(() => dataSources.value?.map((ds) => ({
 				label: ds.title || ds.id,
 				value: ds.id,
-				children: [...dataSourceService?.getFormMethod(ds.type) || [], ...(ds.methods || []).map((method) => ({
-					label: method.name,
-					value: method.name
-				}))]
+				children: [
+					{
+						label: "设置数据",
+						value: _tmagic_utils.DATA_SOURCE_SET_DATA_METHOD_NAME
+					},
+					...dataSourceService?.getFormMethod(ds.type) || [],
+					...(ds.methods || []).map((method) => ({
+						label: method.name,
+						value: method.name
+					}))
+				]
 			})) || []);
 			const cascaderConfig = (0, vue.computed)(() => ({
 				type: "cascader",
@@ -15598,7 +16010,8 @@
 			checkStrictly: { type: Boolean },
 			size: {},
 			dataSourceFieldType: {},
-			notEditable: { type: [Boolean, Function] }
+			notEditable: { type: [Boolean, Function] },
+			dataSourceId: {}
 		}, {
 			"modelValue": { default: [] },
 			"modelModifiers": {}
@@ -15612,7 +16025,11 @@
 			const { dataSourceService, uiService } = useServices();
 			const mForm = (0, vue.inject)("mForm");
 			const eventBus = (0, vue.inject)("eventBus");
-			const dataSources = (0, vue.computed)(() => dataSourceService.get("dataSources") || []);
+			const allDataSources = (0, vue.computed)(() => dataSourceService.get("dataSources") || []);
+			const dataSources = (0, vue.computed)(() => {
+				if (!props.dataSourceId) return allDataSources.value;
+				return allDataSources.value.filter((ds) => ds.id === props.dataSourceId);
+			});
 			const valueIsKey = (0, vue.computed)(() => props.value === "key");
 			const notEditable = (0, vue.computed)(() => (0, _tmagic_form.filterFunction)(mForm, props.notEditable, props));
 			const dataSourcesOptions = (0, vue.computed)(() => dataSources.value.map((ds) => ({
@@ -15622,7 +16039,10 @@
 			const selectDataSourceId = (0, vue.ref)("");
 			const selectFieldsId = (0, vue.ref)([]);
 			(0, vue.watch)(modelValue, (value) => {
-				if (Array.isArray(value)) {
+				if (props.dataSourceId) {
+					selectDataSourceId.value = valueIsKey.value ? props.dataSourceId : `${_tmagic_utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${props.dataSourceId}`;
+					selectFieldsId.value = Array.isArray(value) ? value : [];
+				} else if (Array.isArray(value) && value.length) {
 					const [dsId, ...fields] = value;
 					selectDataSourceId.value = dsId;
 					selectFieldsId.value = fields;
@@ -15632,7 +16052,7 @@
 				}
 			}, { immediate: true });
 			const fieldsOptions = (0, vue.computed)(() => {
-				const ds = dataSources.value.find((ds) => ds.id === (0, _tmagic_utils.removeDataSourceFieldPrefix)(selectDataSourceId.value));
+				const ds = allDataSources.value.find((ds) => ds.id === (0, _tmagic_utils.removeDataSourceFieldPrefix)(selectDataSourceId.value));
 				if (!ds) return [];
 				return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType);
 			});
@@ -15648,8 +16068,13 @@
 				emit("change", modelValue.value);
 			};
 			const fieldChangeHandler = (v = []) => {
-				modelValue.value = [selectDataSourceId.value, ...v];
-				emit("change", modelValue.value);
+				if (props.dataSourceId) {
+					modelValue.value = v;
+					emit("change", v);
+				} else {
+					modelValue.value = [selectDataSourceId.value, ...v];
+					emit("change", modelValue.value);
+				}
 			};
 			const onChangeHandler = (v = []) => {
 				modelValue.value = v;
@@ -15660,7 +16085,23 @@
 				eventBus?.emit("edit-data-source", (0, _tmagic_utils.removeDataSourceFieldPrefix)(id));
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$30, [__props.checkStrictly ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicSelect), {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$30, [__props.dataSourceId ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicCascader), {
+					key: 0,
+					"model-value": selectFieldsId.value,
+					clearable: "",
+					filterable: "",
+					size: __props.size,
+					disabled: __props.disabled,
+					options: fieldsOptions.value,
+					props: { checkStrictly: __props.checkStrictly },
+					onChange: fieldChangeHandler
+				}, null, 8, [
+					"model-value",
+					"size",
+					"disabled",
+					"options",
+					"props"
+				])) : __props.checkStrictly ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicSelect), {
 					"model-value": selectDataSourceId.value,
 					clearable: "",
 					filterable: "",
@@ -15703,7 +16144,7 @@
 					"options",
 					"props"
 				])], 64)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicCascader), {
-					key: 1,
+					key: 2,
 					clearable: "",
 					filterable: "",
 					"model-value": modelValue.value,
@@ -15719,7 +16160,7 @@
 					"options",
 					"props"
 				])), selectDataSourceId.value && hasDataSourceSidePanel.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
-					key: 2,
+					key: 3,
 					content: notEditable.value ? "查看" : "编辑"
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
@@ -15837,6 +16278,7 @@
 					value: __props.config.value,
 					checkStrictly: checkStrictly.value,
 					dataSourceFieldType: __props.config.dataSourceFieldType,
+					dataSourceId: __props.config.dataSourceId,
 					onChange: onChangeHandler
 				}, null, 8, [
 					"model-value",
@@ -15844,7 +16286,8 @@
 					"size",
 					"value",
 					"checkStrictly",
-					"dataSourceFieldType"
+					"dataSourceFieldType",
+					"dataSourceId"
 				])) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), {
 					key: 1,
 					config: __props.config.fieldConfig,
@@ -17854,6 +18297,60 @@
 	//#region packages/editor/src/fields/StyleSetter/pro/Border.vue
 	var Border_default = Border_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
+	//#region packages/editor/src/fields/StyleSetter/pro/Transform.vue?vue&type=script&setup=true&lang.ts
+	var Transform_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		__name: "Transform",
+		props: {
+			values: {},
+			disabled: { type: Boolean },
+			size: {}
+		},
+		emits: ["change"],
+		setup(__props, { emit: __emit }) {
+			const emit = __emit;
+			const config = (0, _tmagic_form.defineFormItem)({ items: [{
+				name: "transform",
+				items: [{
+					name: "rotate",
+					text: "旋转角度",
+					labelWidth: "68px",
+					type: "data-source-field-select",
+					checkStrictly: false,
+					dataSourceFieldType: ["string", "number"],
+					fieldConfig: { type: "text" }
+				}, {
+					name: "scale",
+					text: "缩放",
+					labelWidth: "68px",
+					type: "data-source-field-select",
+					checkStrictly: false,
+					dataSourceFieldType: ["string", "number"],
+					fieldConfig: { type: "text" }
+				}]
+			}] });
+			const change = (value, eventData) => {
+				emit("change", value, eventData);
+			};
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
+					config: (0, vue.unref)(config),
+					model: __props.values,
+					size: __props.size,
+					disabled: __props.disabled,
+					onChange: change
+				}, null, 8, [
+					"config",
+					"model",
+					"size",
+					"disabled"
+				]);
+			};
+		}
+	});
+	//#endregion
+	//#region packages/editor/src/fields/StyleSetter/pro/Transform.vue
+	var Transform_default = Transform_vue_vue_type_script_setup_true_lang_default;
+	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/Index.vue?vue&type=script&setup=true&lang.ts
 	var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MFieldsStyleSetter",
@@ -17895,6 +18392,10 @@
 				{
 					title: "边框与圆角",
 					component: Border_default
+				},
+				{
+					title: "变形",
+					component: Transform_default
 				}
 			];
 			const collapseValue = (0, vue.shallowRef)(Array(list.length).fill(1).map((x, i) => `${i}`));
@@ -18330,8 +18831,14 @@
 	exports.arrayOptions = arrayOptions;
 	exports.beforePaste = beforePaste;
 	exports.buildChangeRecords = buildChangeRecords;
+	exports.calcAlignCenterStyle = calcAlignCenterStyle;
+	exports.calcLayerTargetIndex = calcLayerTargetIndex;
+	exports.calcMoveStyle = calcMoveStyle;
+	exports.canUsePluginMethods = canUsePluginMethods;
 	exports.change2Fixed = change2Fixed;
+	exports.classifyDragSources = classifyDragSources;
 	exports.codeBlockService = codeBlock_default;
+	exports.collectRelatedNodes = collectRelatedNodes;
 	exports.dataSourceService = dataSource_default;
 	exports.debug = debug;
 	exports.default = plugin_default;
@@ -18343,6 +18850,7 @@
 		}
 	});
 	exports.displayTabConfig = displayTabConfig;
+	exports.editorNodeMergeCustomizer = editorNodeMergeCustomizer;
 	exports.editorService = editor_default;
 	exports.eqOptions = eqOptions;
 	exports.error = error;
@@ -18383,6 +18891,7 @@
 	exports.moveItemsInContainer = moveItemsInContainer;
 	exports.numberOptions = numberOptions;
 	exports.propsService = props_default;
+	exports.resolveSelectedNode = resolveSelectedNode;
 	exports.serializeConfig = serializeConfig;
 	exports.setChildrenLayout = setChildrenLayout;
 	exports.setEditorConfig = setEditorConfig;
@@ -18396,6 +18905,7 @@
 			return _tmagic_table.default;
 		}
 	});
+	exports.toggleFixedPosition = toggleFixedPosition;
 	exports.uiService = ui_default;
 	exports.updateStatus = updateStatus;
 	exports.useCodeBlockEdit = useCodeBlockEdit;