@tmagic/editor 1.8.0-beta.1 → 1.8.0-beta.11

package/dist/es/utils/dep/worker.js

@@ -1,5 +1,5 @@
 //#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/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		if (process.env.NODE_ENV === \"development\") 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 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 = /* @__PURE__ */ 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			const targets = this.getCollectableTargets(type);\n			if (!targets.length) return;\n			for (const node of nodes) {\n				this.removeTargetsDep(targets, node);\n				this.collectItems(node, targets, depExtendedData, deep);\n			}\n		}\n		/**\n		* 获取本次需要参与收集的 target（过滤规则与 collectByCallback 一致）\n		*\n		* 注：供 editor 的 dep service / worker 跨包批量收集时复用，因此为 public。\n		* @param type 强制收集指定类型的依赖\n		*/\n		getCollectableTargets(type) {\n			const targets = [];\n			traverseTarget(this.targetsList, (target) => {\n				if (!type && !target.isCollectByDefault) return;\n				targets.push(target);\n			}, type);\n			return targets;\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		/**\n		* 收集单个 target 的依赖，等价于 collectItems(node, [target], ...)\n		*/\n		collectItem(node, target, depExtendedData = {}, deep = false) {\n			this.collectItems(node, [target], depExtendedData, deep);\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		* 与 removeTargetDep 等价，但一次子树递归同时处理多个 target，\n		* 把删除阶段的结构遍历从 ×targets 降到 ×1。\n		*\n		* 注：供 editor 的 dep service 跨包批量删除时复用，因此为 public。\n		*/\n		removeTargetsDep(targets, node, key) {\n			const id = node[this.idProp];\n			for (const target of targets) target.removeDep(id, key);\n			if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) for (const item of node[this.childrenProp]) this.removeTargetsDep(targets, item, key);\n		}\n		/**\n		* 与 collectItem 等价，但一次遍历同时处理多个 target（不含删除阶段）。\n		*\n		* 关键优化：原实现对每个 target 都完整遍历一遍节点树（O(targets × 树规模)），大页面 + 大量数据源时，\n		* 结构遍历（Object.entries / 递归 / fullKey 字符串拼接）会被重复 targets 次。这里改为「整棵树只遍历一次，\n		* 在每个属性上检查所有 target」，把结构遍历开销从 ×targets 降到 ×1，isTarget 调用次数不变，收集结果完全一致。\n		*\n		* 注：供 editor 的 dep service / worker 跨包批量收集时复用，因此为 public。\n		*/\n		collectItems(node, targets, depExtendedData = {}, deep = false) {\n			const activeTargets = this.filterTargetsByNode(node, targets);\n			if (!activeTargets.length) return;\n			this.collectTargetForTargets(node, node, \"\", activeTargets, depExtendedData, deep);\n		}\n		filterTargetsByNode(node, targets) {\n			const disableDataSource = Boolean(node[NODE_DISABLE_DATA_SOURCE_KEY]);\n			const disableCodeBlock = Boolean(node[NODE_DISABLE_CODE_BLOCK_KEY]);\n			if (!disableDataSource && !disableCodeBlock) return targets;\n			return targets.filter((target) => {\n				if (disableDataSource && DATA_SOURCE_TARGET_TYPES.has(target.type)) return false;\n				if (disableCodeBlock && target.type === DepTargetType.CODE_BLOCK) return false;\n				return true;\n			});\n		}\n		collectTargetForTargets(node, config, prop, targets, depExtendedData, deep) {\n			const id = node[this.idProp];\n			const name = `${node[this.nameProp] || node[this.idProp]}`;\n			for (const [key, value] of Object.entries(config)) {\n				if (typeof value === \"undefined\" || value === \"\") continue;\n				const keyIsItems = key === this.childrenProp;\n				const fullKey = prop ? `${prop}.${key}` : key;\n				let notMatched = null;\n				for (let i = 0, l = targets.length; i < l; i++) {\n					const target = targets[i];\n					if (target.isTarget(fullKey, value, config)) target.updateDep({\n						id,\n						name,\n						data: depExtendedData,\n						key: fullKey\n					});\n					else (notMatched || (notMatched = [])).push(target);\n				}\n				if (notMatched) {\n					if (!keyIsItems && Array.isArray(value)) for (let i = 0, l = value.length; i < l; i++) {\n						const item = value[i];\n						if (isObject(item)) this.collectTargetForTargets(node, item, `${fullKey}[${i}]`, notMatched, depExtendedData, deep);\n					}\n					else if (isObject(value)) this.collectTargetForTargets(node, value, fullKey, notMatched, depExtendedData, deep);\n				}\n				if (keyIsItems && deep && Array.isArray(value)) for (const child of value) this.collectItems(child, targets, depExtendedData, deep);\n			}\n		}\n	};\n	//#endregion\n	//#region packages/editor/src/utils/logger.ts\n	const error = (...args) => {\n		if (process.env.NODE_ENV === \"development\") 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			const targets = watcher.getCollectableTargets();\n			for (const page of mApp.items) watcher.collectItems(page, targets, { pageId: page.id }, true);\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;

package/dist/es/utils/editor.js

@@ -2,7 +2,7 @@ import { LayerOffset, Layout } from "../type.js";
 import { isFixed } from "@tmagic/stage";
 import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop, isValueIncludeDataSource } from "@tmagic/utils";
 import { NODE_CONDS_KEY, Target, Watcher } from "@tmagic/core";
-import { cloneDeep, get, isObject } from "lodash-es";
+import { cloneDeep as cloneDeep$1, get, isObject } from "lodash-es";
 import serialize from "serialize-javascript";
 import { detailedDiff } from "deep-object-diff";
 //#region packages/editor/src/utils/editor.ts
@@ -74,12 +74,26 @@ var getMiddleTop = (node, parentNode, stage) => {
 	}
 	return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
+var removeConflictPosition = (style, primary, secondary) => {
+	const isInvalid = (value) => value === "" || value === 0 || value === void 0 || value === null;
+	if (!(primary in style) || !(secondary in style)) return;
+	const primaryValue = style[primary];
+	const secondaryValue = style[secondary];
+	const primaryInvalid = isInvalid(primaryValue);
+	const secondaryInvalid = isInvalid(secondaryValue);
+	if (primaryInvalid && !secondaryInvalid) delete style[primary];
+	else if (secondaryInvalid && !primaryInvalid) delete style[secondary];
+	else if (primaryInvalid && secondaryInvalid) if (secondaryValue === 0 && primaryValue !== 0) delete style[primary];
+	else delete style[secondary];
+};
 var getInitPositionStyle = (style = {}, layout) => {
 	if (layout === Layout.ABSOLUTE) {
 		const newStyle = {
 			...style,
 			position: "absolute"
 		};
+		removeConflictPosition(newStyle, "left", "right");
+		removeConflictPosition(newStyle, "top", "bottom");
 		if (typeof newStyle.left === "undefined" && typeof newStyle.right === "undefined") newStyle.left = 0;
 		return newStyle;
 	}
@@ -104,58 +118,63 @@ var setLayout = (node, layout) => {
 	}
 	return node;
 };
-var change2Fixed = (node, root) => {
+var hasPositionValue = (style, key) => typeof style?.[key] !== "undefined" && style?.[key] !== "";
+/**
+* 沿节点路径累加（或抵消）某一方向上的定位偏移量
+* 当路径上的祖先使用了反方向定位（例如计算 left 时祖先用了 right）或非数值定位时，
+* 无法简单地通过求和换算坐标，此时返回 0 表示放弃补偿、保持原值
+* @param path 从根到目标节点的路径（含节点自身）
+* @param dir 需要累加的定位方向
+* @param opposite 反方向定位属性
+* @param sign change2Fixed 取 1（累加祖先偏移），Fixed2Other 取 -1（抵消祖先偏移）
+* @param init 偏移量初始值
+*/
+var accumulatePositionOffset = (path, dir, opposite, sign, init = 0) => {
+	let offset = init;
+	for (const value of path) {
+		if (hasPositionValue(value.style, opposite) || !isNumber(value.style?.[dir] || 0)) return 0;
+		offset = offset + sign * Number(value.style?.[dir] || 0);
+	}
+	return offset;
+};
+var change2Fixed = (node, path) => {
 	const style = { ...node.style || {} };
-	const path = getNodePath(node.id, root.items);
-	const offset = {
-		left: 0,
-		top: 0
-	};
-	if (!node.style?.right && isNumber(node.style?.left || 0)) for (const value of path) {
-		if (value.style?.right || !isNumber(value.style?.left || 0)) {
-			offset.left = 0;
-			break;
-		}
-		offset.left = offset.left + Number(value.style?.left || 0);
+	if (!hasPositionValue(node.style, "right") && isNumber(node.style?.left || 0)) {
+		const left = accumulatePositionOffset(path, "left", "right", 1);
+		if (left) style.left = left;
+	} else if (hasPositionValue(node.style, "right") && isNumber(node.style?.right || 0)) {
+		const right = accumulatePositionOffset(path, "right", "left", 1);
+		if (right) style.right = right;
 	}
-	if (!node.style?.bottom && isNumber(node.style?.top || 0)) for (const value of path) {
-		if (value.style?.bottom || !isNumber(value.style?.top || 0)) {
-			offset.top = 0;
-			break;
-		}
-		offset.top = offset.top + Number(value.style?.top || 0);
+	if (!hasPositionValue(node.style, "bottom") && isNumber(node.style?.top || 0)) {
+		const top = accumulatePositionOffset(path, "top", "bottom", 1);
+		if (top) style.top = top;
+	} else if (hasPositionValue(node.style, "bottom") && isNumber(node.style?.bottom || 0)) {
+		const bottom = accumulatePositionOffset(path, "bottom", "top", 1);
+		if (bottom) style.bottom = bottom;
 	}
-	if (offset.left) style.left = offset.left;
-	if (offset.top) style.top = offset.top;
 	return style;
 };
-var Fixed2Other = async (node, root, getLayout) => {
-	const path = getNodePath(node.id, root.items);
+var Fixed2Other = async (node, path, getLayout) => {
 	const cur = path.pop();
 	const offset = {
-		left: cur?.style?.left || 0,
-		top: cur?.style?.top || 0
+		left: 0,
+		top: 0,
+		right: 0,
+		bottom: 0
 	};
-	if (!node.style?.right && isNumber(node.style?.left || 0)) for (const value of path) {
-		if (value.style?.right || !isNumber(value.style?.left || 0)) {
-			offset.left = 0;
-			break;
-		}
-		offset.left = offset.left - Number(value.style?.left || 0);
-	}
-	if (!node.style?.bottom && isNumber(node.style?.top || 0)) for (const value of path) {
-		if (value.style?.bottom || !isNumber(value.style?.top || 0)) {
-			offset.top = 0;
-			break;
-		}
-		offset.top = offset.top - Number(value.style?.top || 0);
-	}
+	if (!hasPositionValue(node.style, "right") && isNumber(node.style?.left || 0)) offset.left = accumulatePositionOffset(path, "left", "right", -1, Number(cur?.style?.left || 0));
+	else if (hasPositionValue(node.style, "right") && isNumber(node.style?.right || 0)) offset.right = accumulatePositionOffset(path, "right", "left", -1, Number(cur?.style?.right || 0));
+	if (!hasPositionValue(node.style, "bottom") && isNumber(node.style?.top || 0)) offset.top = accumulatePositionOffset(path, "top", "bottom", -1, Number(cur?.style?.top || 0));
+	else if (hasPositionValue(node.style, "bottom") && isNumber(node.style?.bottom || 0)) offset.bottom = accumulatePositionOffset(path, "bottom", "top", -1, Number(cur?.style?.bottom || 0));
 	const style = node.style || {};
 	const parent = path.pop();
 	if (!parent) return getRelativeStyle(style);
 	if (await getLayout(parent) !== Layout.RELATIVE) {
 		if (offset.left) style.left = offset.left;
 		if (offset.top) style.top = offset.top;
+		if (offset.right) style.right = offset.right;
+		if (offset.bottom) style.bottom = offset.bottom;
 		return {
 			...style,
 			position: "absolute"
@@ -187,11 +206,11 @@ var fixNodeLeft = (config, parent, doc) => {
 };
 var fixNodePosition = (config, parent, stage) => {
 	if (config.style?.position !== "absolute") return config.style;
-	return {
-		...config.style || {},
-		top: getMiddleTop(config, parent, stage),
-		left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
-	};
+	const style = { ...config.style || {} };
+	const baseStyle = config.style || {};
+	if (!("right" in baseStyle)) style.left = fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document);
+	if (!("top" in baseStyle) && !("bottom" in baseStyle)) style.top = getMiddleTop(config, parent, stage);
+	return style;
 };
 var serializeConfig = (config) => serialize(config, {
 	space: 2,
@@ -268,13 +287,14 @@ var buildChangeRecords = (value, basePath) => {
 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);
+	const { node, parent, page, path } = getNodeInfoFn(id);
 	if (!node) throw new Error("获取不到组件信息");
 	if (node.id === rootId) throw new Error("不能选根节点");
 	return {
 		node,
 		parent,
-		page
+		page,
+		path
 	};
 };
 /**
@@ -286,11 +306,11 @@ var resolveSelectedNode = (config, getNodeInfoFn, rootId) => {
 * @param getLayoutFn 获取父节点布局方式的回调函数
 * @returns 处理后的节点配置（深拷贝）
 */
-var toggleFixedPosition = async (dist, src, root, getLayoutFn) => {
-	const newConfig = cloneDeep(dist);
+var toggleFixedPosition = async (dist, src, path, getLayoutFn) => {
+	const newConfig = cloneDeep$1(dist);
 	if (!isPop(src) && newConfig.style?.position) {
-		if (isFixed(newConfig.style) && !isFixed(src.style || {})) newConfig.style = change2Fixed(newConfig, root);
-		else if (!isFixed(newConfig.style) && isFixed(src.style || {})) newConfig.style = await Fixed2Other(newConfig, root, getLayoutFn);
+		if (isFixed(newConfig.style) && !isFixed(src.style || {})) newConfig.style = change2Fixed(newConfig, path);
+		else if (!isFixed(newConfig.style) && isFixed(src.style || {})) newConfig.style = await Fixed2Other(newConfig, path, getLayoutFn);
 	}
 	return newConfig;
 };
@@ -431,5 +451,39 @@ var classifyDragSources = (configs, targetParent, getNodeInfo) => {
 		aborted: false
 	};
 };
+/**
+* 给「回滚」生成的新 step 用的简短描述生成器。
+* 与 UI 层 `describePageStep` 同义，但避免 service 反向依赖 layouts/，故放在此工具函数中。
+*/
+var describeStepForRevert = (step) => {
+	const items = step.diff ?? [];
+	const withId = (node, label) => {
+		const id = node?.id;
+		if (id === void 0 || id === null || `${id}` === "") return label;
+		return label ? `${label}（id: ${id}）` : `id: ${id}`;
+	};
+	switch (step.opType) {
+		case "add": {
+			const count = items.length;
+			const node = items[0]?.newSchema;
+			const label = node?.name || node?.type || "";
+			return `撤回新增 ${count} 个节点${count === 1 ? `（${withId(node, label)}）` : ""}`;
+		}
+		case "remove": {
+			const count = items.length;
+			const node = items[0]?.oldSchema;
+			const label = node?.name || node?.type || "";
+			return `还原已删除的 ${count} 个节点${count === 1 ? `（${withId(node, label)}）` : ""}`;
+		}
+		default:
+			if (items.length === 1) {
+				const { newSchema, oldSchema, changeRecords } = items[0];
+				const target = withId(newSchema || oldSchema, newSchema?.name || newSchema?.type || oldSchema?.name || oldSchema?.type || "");
+				const propPath = changeRecords?.[0]?.propPath;
+				return propPath ? `还原 ${target} · ${propPath}` : `还原 ${target}`;
+			}
+			return `还原 ${items.length} 个节点的修改`;
+	}
+};
 //#endregion
-export { COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, Fixed2Other, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, change2Fixed, classifyDragSources, collectRelatedNodes, editorNodeMergeCustomizer, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getRelativeStyle, isIncludeDataSource, moveItemsInContainer, resolveSelectedNode, serializeConfig, setChildrenLayout, setLayout, toggleFixedPosition };
+export { COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, Fixed2Other, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, change2Fixed, classifyDragSources, collectRelatedNodes, describeStepForRevert, editorNodeMergeCustomizer, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getRelativeStyle, isIncludeDataSource, moveItemsInContainer, resolveSelectedNode, serializeConfig, setChildrenLayout, setLayout, toggleFixedPosition };

package/dist/es/utils/history.js

@@ -0,0 +1,220 @@
+import { UndoRedo } from "./undo-redo.js";
+import { guid } from "@tmagic/utils";
+import { cloneDeep } from "lodash-es";
+import serialize from "serialize-javascript";
+//#region packages/editor/src/utils/history.ts
+/**
+* 「回滚」生成的新 step 简短描述。代码块 / 数据源共用。
+* 二者逻辑一致，仅展示名取值字段不同（代码块取 `name`，数据源取 `title`），
+* 因此通过 `getLabel` 注入取值方式。
+*
+* @param id 关联的代码块 / 数据源 id
+* @param diff 单条变更 diff（缺省视为空）
+* @param getLabel 从快照取展示名
+*/
+var describeRevertStep = (id, { oldSchema, newSchema, changeRecords } = {}, getLabel) => {
+	const labelOf = (schema) => getLabel(schema) || schema.id;
+	if (!oldSchema && newSchema) return `撤回新增 ${labelOf(newSchema) || id}`;
+	if (oldSchema && !newSchema) return `还原已删除的 ${labelOf(oldSchema) || id}`;
+	const label = newSchema && getLabel(newSchema) || oldSchema && getLabel(oldSchema) || `${id}`;
+	const propPath = changeRecords?.[0]?.propPath;
+	return propPath ? `还原 ${label} · ${propPath}` : `还原 ${label}`;
+};
+/**
+* 根据 old/new 是否为 null 推断 opType（与 push 时的约定一致）。
+*/
+var detectStackOpType = (oldVal, newVal) => {
+	if (oldVal === null && newVal !== null) return "add";
+	if (oldVal !== null && newVal === null) return "remove";
+	return "update";
+};
+/**
+* 构造一条代码块 / 数据源「按 id 分栈」的历史记录：两者除 payload 字段命名外完全一致。
+*
+* - `add`：oldValue = null；`remove`：newValue = null；`update`：两者都有，可带 changeRecords 做局部更新。
+* - 内容会做 cloneDeep 防止后续被外部引用篡改；opType 依据 old/new 是否为 null 推断。
+* - 仅负责构造 step 并返回，入栈与事件 emit 由统一的 history.push(stepType, step, id) 处理。
+* - 不直接驱动业务 service，调用方负责实际写回。
+*/
+var createStackStep = (id, payload) => {
+	if (!id) return null;
+	const oldSchema = payload.oldValue ? cloneDeep(payload.oldValue) : null;
+	const newSchema = payload.newValue ? cloneDeep(payload.newValue) : null;
+	const changeRecords = payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : void 0;
+	const opType = detectStackOpType(payload.oldValue, payload.newValue);
+	const schema = payload.newValue ?? payload.oldValue;
+	const name = payload.name ?? schema?.name ?? schema?.title ?? "";
+	return {
+		uuid: guid(),
+		data: {
+			name,
+			id
+		},
+		opType,
+		diff: [{
+			...newSchema !== null ? { newSchema } : {},
+			...oldSchema !== null ? { oldSchema } : {},
+			...opType === "update" && changeRecords ? { changeRecords } : {}
+		}],
+		historyDescription: payload.historyDescription,
+		source: payload.source,
+		operator: payload.operator,
+		rootStep: payload.rootStep,
+		timestamp: Date.now(),
+		extra: payload.extra
+	};
+};
+var markStackSaved = (undoRedo) => {
+	if (!undoRedo) return;
+	undoRedo.updateElements((element) => {
+		element.saved = false;
+	});
+	undoRedo.updateCurrentElement((element) => {
+		element.saved = true;
+	});
+};
+/**
+* 把单个历史栈（页面 / 代码块 / 数据源 / 扩展类型）的步骤列表按"目标"做相邻合并：
+* - 单实体的 'update' 按 targetId 与相邻同 targetId 的 update 合并到一个 group，组内可展开查看每步；
+* - 'add' / 'remove' 始终独立成组（语义上是结构变更，不应被收纳进单实体修改组）；
+* - 多实体 'update'（如页面批量改属性）也独立成组（无明确单一目标，避免误合并）。
+*
+* 各类型行为完全一致，仅 `kind` 与 step 快照类型不同，统一由本方法处理。
+*/
+var mergeSteps = (kind, id, list, cursor) => {
+	const groups = [];
+	let current = null;
+	const currentIndex = cursor - 1;
+	list.forEach((step, index) => {
+		const applied = index < cursor;
+		const isCurrent = index === currentIndex;
+		const targetId = detectTargetId(step);
+		const targetName = detectTargetName(step);
+		const entry = {
+			step,
+			index,
+			applied,
+			isCurrent
+		};
+		const mergeable = step.opType === "update" && targetId !== void 0;
+		if (mergeable && current?.opType === "update" && current.targetId === targetId) {
+			current.steps.push(entry);
+			current.applied = applied;
+			if (isCurrent) current.isCurrent = true;
+			if (targetName) current.targetName = targetName;
+		} else {
+			current = {
+				kind,
+				id,
+				opType: step.opType,
+				targetId: mergeable ? targetId : void 0,
+				targetName,
+				steps: [entry],
+				applied,
+				isCurrent
+			};
+			groups.push(current);
+		}
+	});
+	return groups;
+};
+/**
+* 解析 step 中的"目标 id"用于合并：
+* - 单实体 update：取唯一一项 diff 的快照 id；快照无 id 时（如 CodeBlockContent）回退到 `step.data.id`
+*   （即资源 id），使代码块 / 数据源同样能按资源合并相邻 update；
+* - 其它情形（多实体 update / add / remove）：返回 undefined，表示不参与合并。
+*/
+var detectTargetId = (step) => {
+	if (step.opType !== "update") return void 0;
+	const items = step.diff;
+	if (items?.length !== 1) return void 0;
+	const newSchema = items[0].newSchema;
+	const oldSchema = items[0].oldSchema;
+	return newSchema?.id ?? oldSchema?.id ?? step.data?.id;
+};
+/** 解析 step 中的目标可读名（用于 UI 展示）。 */
+var detectTargetName = (step) => {
+	const items = step.diff;
+	if (step.opType === "update") {
+		if (items?.length === 1) {
+			const node = items[0].newSchema || items[0].oldSchema;
+			return node?.name || node?.type || (node?.id !== void 0 ? `${node.id}` : void 0);
+		}
+		return items?.length ? `${items.length} 个节点` : void 0;
+	}
+	if (step.opType === "add") {
+		if (items?.length === 1) {
+			const n = items[0].newSchema;
+			return n?.name || n?.type || `${n?.id}`;
+		}
+		return items?.length ? `${items.length} 个节点` : void 0;
+	}
+	if (step.opType === "remove") {
+		if (items?.length === 1) {
+			const n = items[0].oldSchema;
+			return n?.name || n?.type || `${n?.id}`;
+		}
+		return items?.length ? `${items.length} 个节点` : void 0;
+	}
+};
+/**
+* 把 `Record<Id, UndoRedo>` 整体序列化为 `Record<Id, SerializedUndoRedo>`。
+*
+* 序列化（深克隆）的同一趟里，只把每条 step 中可能含函数的 `diff` 用 serialize-javascript 序列化成字符串，
+* 其余字段（uuid / opType / timestamp / `modifiedNodeIds` Map 等）原样保留，交给 IndexedDB 结构化克隆。
+* 这样既能写入函数，又避免序列化整份快照的开销；读取时再由 {@link parseStacksStepDiff} 还原 diff。
+* 不含 `diff` 的元素（如通用栈）原样透传。
+*/
+var serializeStacks = (stacks) => {
+	const result = {};
+	Object.entries(stacks).forEach(([id, undoRedo]) => {
+		if (!undoRedo) return;
+		const serialized = undoRedo.serialize();
+		result[id] = {
+			...serialized,
+			elementList: serialized.elementList.map((step) => step.diff === void 0 ? step : Object.assign({}, step, { diff: serialize(step.diff) }))
+		};
+	});
+	return result;
+};
+/**
+* 把 `Record<Id, SerializedUndoRedo>` 整体还原为 `Record<Id, UndoRedo>`。
+* 还原时把每个栈的游标定位到最近一条已保存（`saved === true`）记录之后。
+*
+* 与 {@link serializeStacks} 相反：当传入 `parse`（parseDSL）时，把每条 step 中以字符串形式存储的 `diff`
+* 解析回真实对象（含函数）；不含 `diff` 的元素（如通用栈）原样透传。
+*/
+var deserializeStacks = (stacks = {}, parse) => {
+	const result = {};
+	Object.entries(stacks).forEach(([id, serialized]) => {
+		if (!serialized) return;
+		const elementList = parse ? serialized.elementList.map((step) => {
+			const { diff } = step;
+			return typeof diff === "string" ? Object.assign({}, step, { diff: parse(`(${diff})`) }) : step;
+		}) : serialized.elementList;
+		result[id] = UndoRedo.fromSerialized({
+			...serialized,
+			elementList
+		}, { isSavedStep: (element) => element.saved === true });
+	});
+	return result;
+};
+/**
+* 按 id 从「按 id 分栈」的记录表（代码块 / 数据源）中获取（或创建）对应的 UndoRedo 栈。
+*/
+var getOrCreateStack = (stacks, id) => {
+	if (!stacks[id]) stacks[id] = new UndoRedo();
+	return stacks[id];
+};
+/**
+* 撤销下限：当栈 index 0 是 `opType: 'initial'` 的基线 step 时为 1（基线不可被撤销），否则为 0。
+* 适用于所有历史类型（page / codeBlock / dataSource / 扩展），把 cursor 钉在基线之上，
+* 保证 undo / canUndo / goto 都不会越过初始基线。
+*/
+var undoFloor = (undoRedo) => {
+	return undoRedo.getElementList()[0]?.opType === "initial" ? 1 : 0;
+};
+/** 将单次 push 产生的 history uuid（或 null）转为 *AndGetHistoryId 返回用的 uuid 列表。 */
+var getLastPushedHistoryIds = (historyId) => historyId ? [historyId] : [];
+//#endregion
+export { createStackStep, describeRevertStep, deserializeStacks, detectStackOpType, detectTargetId, detectTargetName, getLastPushedHistoryIds, getOrCreateStack, markStackSaved, mergeSteps, serializeStacks, undoFloor };

package/dist/es/utils/indexed-db.js

@@ -0,0 +1,86 @@
+//#region packages/editor/src/utils/indexed-db.ts
+/**
+* 一组极简的、基于原生 IndexedDB 的 Promise KV 工具，避免引入额外依赖。
+* 仅用于浏览器环境；在不支持 IndexedDB 的环境（如 SSR / 部分测试环境）下会 reject。
+*/
+/** 是否处于支持 IndexedDB 的环境。 */
+var isIndexedDBSupported = () => typeof indexedDB !== "undefined" && indexedDB !== null;
+/**
+* 打开（必要时升级）数据库，确保目标 objectStore 存在后返回连接。
+*
+* 由于 objectStore 只能在 `onupgradeneeded` 内创建，这里先以当前版本打开，
+* 若发现 store 不存在则关闭连接、以更高版本重开来按需创建，兼容动态 storeName。
+*/
+var openIndexedDB = (dbName, storeName) => new Promise((resolve, reject) => {
+	if (!isIndexedDBSupported()) {
+		reject(/* @__PURE__ */ new Error("当前环境不支持 IndexedDB"));
+		return;
+	}
+	const request = indexedDB.open(dbName);
+	request.onupgradeneeded = () => {
+		const db = request.result;
+		if (!db.objectStoreNames.contains(storeName)) db.createObjectStore(storeName);
+	};
+	request.onerror = () => reject(request.error);
+	request.onsuccess = () => {
+		const db = request.result;
+		if (db.objectStoreNames.contains(storeName)) {
+			resolve(db);
+			return;
+		}
+		const nextVersion = db.version + 1;
+		db.close();
+		const upgradeRequest = indexedDB.open(dbName, nextVersion);
+		upgradeRequest.onupgradeneeded = () => {
+			const upgradeDb = upgradeRequest.result;
+			if (!upgradeDb.objectStoreNames.contains(storeName)) upgradeDb.createObjectStore(storeName);
+		};
+		upgradeRequest.onerror = () => reject(upgradeRequest.error);
+		upgradeRequest.onsuccess = () => resolve(upgradeRequest.result);
+	};
+});
+/** 写入（覆盖）一条记录。value 通过结构化克隆存储，支持 Map / Set 等结构。 */
+var idbSet = async (dbName, storeName, key, value) => {
+	const db = await openIndexedDB(dbName, storeName);
+	try {
+		await new Promise((resolve, reject) => {
+			const tx = db.transaction(storeName, "readwrite");
+			tx.objectStore(storeName).put(value, key);
+			tx.oncomplete = () => resolve();
+			tx.onabort = () => reject(tx.error);
+			tx.onerror = () => reject(tx.error);
+		});
+	} finally {
+		db.close();
+	}
+};
+/** 读取一条记录，不存在时返回 undefined。 */
+var idbGet = async (dbName, storeName, key) => {
+	const db = await openIndexedDB(dbName, storeName);
+	try {
+		return await new Promise((resolve, reject) => {
+			const request = db.transaction(storeName, "readonly").objectStore(storeName).get(key);
+			request.onsuccess = () => resolve(request.result);
+			request.onerror = () => reject(request.error);
+		});
+	} finally {
+		db.close();
+	}
+};
+/** 删除一条记录。 */
+var idbDelete = async (dbName, storeName, key) => {
+	const db = await openIndexedDB(dbName, storeName);
+	try {
+		await new Promise((resolve, reject) => {
+			const tx = db.transaction(storeName, "readwrite");
+			tx.objectStore(storeName).delete(key);
+			tx.oncomplete = () => resolve();
+			tx.onabort = () => reject(tx.error);
+			tx.onerror = () => reject(tx.error);
+		});
+	} finally {
+		db.close();
+	}
+};
+//#endregion
+export { idbDelete, idbGet, idbSet, isIndexedDBSupported, openIndexedDB };