@tmagic/editor 1.8.0-beta.16 → 1.8.0-beta.18

package/dist/tmagic-editor.umd.cjs

@@ -8976,6 +8976,7 @@
 			containerHighlightClassName: stageOptions.containerHighlightClassName,
 			containerHighlightDuration: stageOptions.containerHighlightDuration,
 			containerHighlightType: stageOptions.containerHighlightType,
+			containerHighlightAddOnly: stageOptions.containerHighlightAddOnly,
 			disabledDragStart: stageOptions.disabledDragStart,
 			renderType: stageOptions.renderType,
 			canSelect: (el, event, stop) => {
@@ -9655,6 +9656,9 @@
 			});
 		}, 1);
 	};
+	globalThis.cancelIdleCallback = globalThis.cancelIdleCallback || function(handle) {
+		clearTimeout(handle);
+	};
 	var IdleTask = class extends events.EventEmitter {
 		taskList = [];
 		hightLevelTaskList = [];
@@ -9676,7 +9680,7 @@
 			this.taskList = [];
 			this.taskHandle = null;
 			this.emit("update-task-length", {
-				length: this.taskList.length + this.hightLevelTaskList.length,
+				length: this.getTaskLength(),
 				hightLevelLength: this.hightLevelTaskList.length
 			});
 		}
@@ -9690,30 +9694,51 @@
 			return super.emit(eventName, ...args);
 		}
 		runTaskQueue(deadline) {
-			const { hightLevelTaskList, taskList } = this;
-			while (deadline.timeRemaining() > 0 && (taskList.length || hightLevelTaskList.length)) {
-				const timeRemaining = deadline.timeRemaining();
-				let times = 0;
-				if (timeRemaining <= 5) times = 10;
-				else if (timeRemaining <= 10) times = 100;
-				else if (timeRemaining <= 15) times = 300;
-				else times = 600;
-				for (let i = 0; i < times; i++) {
-					const task = hightLevelTaskList.length > 0 ? hightLevelTaskList.shift() : taskList.shift();
-					if (task) task.handler(task.data);
-					if (hightLevelTaskList.length === 0 && taskList.length === 0) break;
+			this.taskHandle = null;
+			try {
+				while (deadline.timeRemaining() > 0 && this.getTaskLength()) {
+					const timeRemaining = deadline.timeRemaining();
+					let times = 0;
+					if (timeRemaining <= 5) times = 10;
+					else if (timeRemaining <= 10) times = 100;
+					else if (timeRemaining <= 15) times = 300;
+					else times = 600;
+					for (let i = 0; i < times; i++) {
+						const task = this.hightLevelTaskList.length > 0 ? this.hightLevelTaskList.shift() : this.taskList.shift();
+						if (task) this.runTask(task);
+						if (!this.getTaskLength()) break;
+					}
 				}
+			} finally {
+				this.finishRun();
 			}
-			if (!hightLevelTaskList.length) this.emit("hight-level-finish");
-			if (hightLevelTaskList.length || taskList.length) this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
-			else {
-				this.taskHandle = 0;
-				this.emit("finish");
+		}
+		/**
+		* 单个任务失败不能中断整个队列，否则后续任务永远不会被执行，
+		* 依赖收集会停在半路（收集中状态与剩余任务数都不再变化）
+		*/
+		runTask(task) {
+			try {
+				task.handler(task.data);
+			} catch (e) {
+				error("magic editor: 空闲任务执行失败", e);
 			}
-			this.emit("update-task-length", {
-				length: taskList.length + hightLevelTaskList.length,
-				hightLevelLength: hightLevelTaskList.length
-			});
+		}
+		finishRun() {
+			try {
+				if (!this.hightLevelTaskList.length) this.emit("hight-level-finish");
+			} finally {
+				if (this.getTaskLength()) {
+					if (!this.taskHandle) this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
+				} else this.emit("finish");
+				this.emit("update-task-length", {
+					length: this.getTaskLength(),
+					hightLevelLength: this.hightLevelTaskList.length
+				});
+			}
+		}
+		getTaskLength() {
+			return this.taskList.length + this.hightLevelTaskList.length;
 		}
 	};
 	//#endregion
@@ -12744,7 +12769,7 @@
 		class: "m-editor-history-list-item-saved",
 		title: "该记录为最近一次保存的状态"
 	};
-	var _hoisted_5$5 = {
+	var _hoisted_5$4 = {
 		key: 1,
 		class: "m-editor-history-list-item-actions"
 	};
@@ -12906,7 +12931,7 @@
 					(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(["m-editor-history-list-item-op", `op-${__props.group.opType}`]) }, (0, vue.toDisplayString)((0, vue.unref)(opLabel)(__props.group.opType)), 3),
 					(0, vue.createElementVNode)("span", _hoisted_3$12, (0, vue.toDisplayString)(__props.group.desc), 1),
 					headSaved.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$9, "已保存")) : (0, vue.createCommentVNode)("v-if", true),
-					!merged.value && (headRevertable.value || headDiffable.value || canHeadGoto.value) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$5, [
+					!merged.value && (headRevertable.value || headDiffable.value || canHeadGoto.value) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$4, [
 						headRevertable.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 							key: 0,
 							class: "m-editor-history-list-item-revert",
@@ -13016,7 +13041,7 @@
 		key: 1,
 		class: "m-editor-history-list-item-actions"
 	};
-	var _hoisted_5$4 = ["title"];
+	var _hoisted_5$3 = ["title"];
 	var InitialRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorHistoryListInitialRow",
 		__name: "InitialRow",
@@ -13078,7 +13103,7 @@
 						key: 2,
 						class: "m-editor-history-list-item-time",
 						title: timeTitle.value
-					}, (0, vue.toDisplayString)(time.value), 9, _hoisted_5$4)) : (0, vue.createCommentVNode)("v-if", true)
+					}, (0, vue.toDisplayString)(time.value), 9, _hoisted_5$3)) : (0, vue.createCommentVNode)("v-if", true)
 				], 10, _hoisted_1$66);
 			};
 		}
@@ -13460,7 +13485,7 @@
 	}));
 	//#endregion
 	//#region packages/editor/src/layouts/history-list/HistoryDiffDialog.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$62, _hoisted_2$19, _hoisted_3$7, _hoisted_4$6, _hoisted_5$3, _hoisted_6$2, _hoisted_7, HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default;
+	var _hoisted_1$62, _hoisted_2$19, _hoisted_3$7, _hoisted_4$6, _hoisted_5$2, _hoisted_6$2, _hoisted_7, HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default;
 	var init_HistoryDiffDialog_vue_vue_type_script_setup_true_lang = __esmMin((() => {
 		init_lodash();
 		init_CompareForm();
@@ -13475,7 +13500,7 @@
 		};
 		_hoisted_3$7 = { class: "m-editor-history-diff-dialog-header" };
 		_hoisted_4$6 = { class: "m-editor-history-diff-dialog-target" };
-		_hoisted_5$3 = { class: "m-editor-history-diff-dialog-controls" };
+		_hoisted_5$2 = { class: "m-editor-history-diff-dialog-controls" };
 		_hoisted_6$2 = { class: "m-editor-history-diff-dialog-legend" };
 		_hoisted_7 = {
 			key: 0,
@@ -13655,7 +13680,7 @@
 						}))]),
 						default: (0, vue.withCtx)(() => [payload.value && visible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$62, [
 							__props.onConfirm ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$19, "仅回滚有差异的字段")) : (0, vue.createCommentVNode)("v-if", true),
-							(0, vue.createElementVNode)("div", _hoisted_3$7, [(0, vue.createElementVNode)("span", _hoisted_4$6, (0, vue.toDisplayString)(targetText.value), 1), (0, vue.createElementVNode)("div", _hoisted_5$3, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicRadioGroup), {
+							(0, vue.createElementVNode)("div", _hoisted_3$7, [(0, vue.createElementVNode)("span", _hoisted_4$6, (0, vue.toDisplayString)(targetText.value), 1), (0, vue.createElementVNode)("div", _hoisted_5$2, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicRadioGroup), {
 								modelValue: viewMode.value,
 								"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => viewMode.value = $event),
 								size: "small",
@@ -14800,6 +14825,7 @@
 		containerHighlightClassName: _tmagic_stage.CONTAINER_HIGHLIGHT_CLASS_NAME,
 		containerHighlightDuration: 800,
 		containerHighlightType: _tmagic_stage.ContainerHighlightType.DEFAULT,
+		containerHighlightAddOnly: false,
 		disabledShowSrc: false,
 		disabledDataSource: false,
 		disabledCodeBlock: false,
@@ -17884,7 +17910,7 @@
 					return;
 				}
 				if (timeout || !stage.value) return;
-				timeout = stage.value.delayedMarkContainer(e);
+				timeout = stage.value.delayedMarkContainer(e, [], true);
 			};
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicScrollbar), null, {
@@ -17952,7 +17978,7 @@
 		key: 1,
 		class: "magic-editor-tab-panel-title"
 	};
-	var _hoisted_5$2 = {
+	var _hoisted_5$1 = {
 		key: 0,
 		class: "m-editor-sidebar-tips"
 	};
@@ -18196,7 +18222,7 @@
 							`${index}`
 						].includes(activeTabName.value)]]);
 					}), 128)),
-					tipsBarVisible.value && collecting.value && taskLength.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5$2, [(0, vue.createElementVNode)("span", null, "依赖收集中(剩余任务：" + (0, vue.toDisplayString)(taskLength.value) + ")", 1), (0, vue.createVNode)(Icon_default, {
+					tipsBarVisible.value && collecting.value && taskLength.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5$1, [(0, vue.createElementVNode)("span", null, "依赖收集中(剩余任务：" + (0, vue.toDisplayString)(taskLength.value) + ")", 1), (0, vue.createVNode)(Icon_default, {
 						icon: (0, vue.unref)(_element_plus_icons_vue.Close),
 						class: "close-icon",
 						onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)(($event) => tipsBarVisible.value = false, ["stop"]))
@@ -19232,6 +19258,9 @@
 		idleTask = new IdleTask();
 		watcher = new _tmagic_core.Watcher({ initialTargets: (0, vue.reactive)({}) });
 		waitingWorker;
+		resolveWaitingWorker;
+		workerGeneration = 0;
+		activeBatches = /* @__PURE__ */ new Set();
 		constructor() {
 			super();
 			this.idleTask.on("update-task-length", throttle(({ length }) => {
@@ -19281,33 +19310,36 @@
 		}
 		async collectIdle(nodes, depExtendedData = {}, deep = false, type) {
 			if (this.waitingWorker) await this.waitingWorker;
-			this.set("collecting", true);
-			let startTask = false;
+			const batch = {
+				nodes,
+				deep,
+				pending: 0,
+				dsPending: 0,
+				collectedEmitted: false,
+				dsSettled: false,
+				resolve: () => {}
+			};
 			this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
-				startTask = true;
-				this.enqueueTask(node, target, depExtendedData, deep);
+				this.enqueueTask(node, target, depExtendedData, deep, batch);
 			});
+			if (batch.pending === 0) {
+				this.emit("collected", nodes, deep);
+				this.updateCollectingState();
+				return true;
+			}
+			this.activeBatches.add(batch);
+			this.set("collecting", true);
 			return new Promise((resolve) => {
-				if (!startTask) {
-					this.emit("collected", nodes, deep);
-					this.set("collecting", false);
-					resolve();
-					return;
-				}
-				this.idleTask.once("finish", () => {
-					this.emit("collected", nodes, deep);
-					this.set("collecting", false);
-				});
-				this.idleTask.once("hight-level-finish", () => {
-					this.emit("ds-collected", nodes, deep);
-					resolve();
-				});
+				batch.resolve = resolve;
 			});
 		}
 		collectByWorker(dsl) {
 			this.set("collecting", true);
+			this.workerGeneration += 1;
+			const generation = this.workerGeneration;
 			const { promise, resolve: waitingResolve } = Promise.withResolvers();
 			this.waitingWorker = promise;
+			this.resolveWaitingWorker = waitingResolve;
 			return new Promise((resolve) => {
 				const worker = new WorkerWrapper();
 				worker.postMessage({ dsl: (0, serialize_javascript.default)(dsl) });
@@ -19318,6 +19350,10 @@
 					resolve({});
 				};
 			}).then((depsData) => {
+				if (generation !== this.workerGeneration) {
+					waitingResolve();
+					return depsData;
+				}
 				(0, _tmagic_core.traverseTarget)(this.watcher.getTargetsList(), (target) => {
 					if (depsData[target.type]?.[target.id]) {
 						target.deps = (0, vue.reactive)(depsData[target.type][target.id]);
@@ -19330,6 +19366,10 @@
 				this.emit("collected", dsl.items, true);
 				this.emit("ds-collected", dsl.items, true);
 				waitingResolve();
+				if (this.waitingWorker === promise) {
+					this.waitingWorker = void 0;
+					this.resolveWaitingWorker = void 0;
+				}
 				return depsData;
 			});
 		}
@@ -19351,6 +19391,7 @@
 			return this.watcher.hasSpecifiedTypeTarget(type);
 		}
 		clearIdleTasks() {
+			this.abortActiveBatches();
 			this.idleTask.clearTasks();
 		}
 		on(eventName, listener) {
@@ -19360,6 +19401,11 @@
 			return super.once(eventName, listener);
 		}
 		reset() {
+			this.abortActiveBatches();
+			this.workerGeneration += 1;
+			this.resolveWaitingWorker?.();
+			this.resolveWaitingWorker = void 0;
+			this.waitingWorker = void 0;
 			this.idleTask.clearTasks();
 			for (const type of Object.keys(this.watcher.getTargetsList())) this.removeTargets(type);
 			this.set("collecting", false);
@@ -19384,18 +19430,63 @@
 				if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) delete target.deps[depKey];
 			}
 		}
-		enqueueTask(node, target, depExtendedData, deep) {
+		enqueueTask(node, target, depExtendedData, deep, batch) {
+			const isDataSource = target.type === _tmagic_core.DepTargetType.DATA_SOURCE;
+			batch.pending += 1;
+			if (isDataSource) batch.dsPending += 1;
 			this.idleTask.enqueueTask(({ node, deep, target }) => {
-				this.collectNode(node, target, depExtendedData, deep);
+				try {
+					this.collectNode(node, target, depExtendedData, deep);
+				} finally {
+					this.onBatchTaskDone(batch, isDataSource);
+				}
 			}, {
 				node,
 				deep: false,
 				target
-			}, target.type === _tmagic_core.DepTargetType.DATA_SOURCE);
+			}, isDataSource);
 			if (deep && Array.isArray(node.items) && node.items.length) node.items.forEach((item) => {
-				this.enqueueTask(item, target, depExtendedData, deep);
+				this.enqueueTask(item, target, depExtendedData, deep, batch);
 			});
 		}
+		onBatchTaskDone(batch, isDataSource) {
+			if (isDataSource) {
+				batch.dsPending -= 1;
+				if (batch.dsPending === 0) this.settleBatchDs(batch);
+			}
+			batch.pending -= 1;
+			if (batch.pending === 0) this.finishBatch(batch);
+		}
+		settleBatchDs(batch) {
+			if (batch.dsSettled) return;
+			batch.dsSettled = true;
+			this.emit("ds-collected", batch.nodes, batch.deep);
+			batch.resolve(true);
+		}
+		finishBatch(batch) {
+			if (!batch.collectedEmitted) {
+				batch.collectedEmitted = true;
+				this.emit("collected", batch.nodes, batch.deep);
+			}
+			this.settleBatchDs(batch);
+			this.activeBatches.delete(batch);
+			this.updateCollectingState();
+		}
+		/**
+		* idleTask 被清空时，在途批次的任务不会再执行，必须主动结算，
+		* 否则对应的 collectIdle Promise 永远不会 resolve（collecting 卡在 true、once 监听器泄漏）。
+		* 收集被中断（通常紧跟一次全量重新收集），因此不再 emit collected/ds-collected，仅结算 Promise。
+		*/
+		abortActiveBatches() {
+			if (!this.activeBatches.size) return;
+			const batches = [...this.activeBatches];
+			this.activeBatches.clear();
+			for (const batch of batches) batch.resolve(false);
+			this.updateCollectingState();
+		}
+		updateCollectingState() {
+			this.set("collecting", this.activeBatches.size > 0);
+		}
 	};
 	var dep_default = new Dep();
 	//#endregion
@@ -19839,15 +19930,15 @@
 			return pageId;
 		};
 		const collectIdle = (nodes, deep, type) => Promise.all(nodes.map((node) => {
-			if (node.type === _tmagic_core.NodeType.ROOT) return Promise.resolve();
+			if (node.type === _tmagic_core.NodeType.ROOT) return Promise.resolve(true);
 			return depService.collectIdle([node], { pageId: getPageIdByNode(node) }, deep, type);
-		}));
+		})).then((results) => results.every(Boolean));
 		(0, vue.watch)(() => editorService.get("stage"), (stage) => {
 			if (!stage) return;
 			stage.on("rerender", async () => {
 				const node = editorService.get("node");
 				if (!node) return;
-				await collectIdle([node], true, _tmagic_core.DepTargetType.DATA_SOURCE);
+				if (!await collectIdle([node], true, _tmagic_core.DepTargetType.DATA_SOURCE)) return;
 				updateStageNode(node);
 			});
 		});
@@ -19934,8 +20025,8 @@
 			})();
 		};
 		const nodeAddHandler = (nodes) => {
-			collectIdle(nodes, true).then(() => {
-				updateStageNodes(nodes);
+			collectIdle(nodes, true).then((completed) => {
+				if (completed) updateStageNodes(nodes);
 			});
 		};
 		const nodeUpdateHandler = (data) => {
@@ -19964,8 +20055,8 @@
 			else normalNodes.push(newNode);
 			if (needRecollectNodes.length) {
 				const handler = async () => {
-					await collectIdle(needRecollectNodes, true, _tmagic_core.DepTargetType.DATA_SOURCE);
-					await collectIdle(needRecollectNodes, true, _tmagic_core.DepTargetType.DATA_SOURCE_COND);
+					if (!await collectIdle(needRecollectNodes, true, _tmagic_core.DepTargetType.DATA_SOURCE)) return;
+					if (!await collectIdle(needRecollectNodes, true, _tmagic_core.DepTargetType.DATA_SOURCE_COND)) return;
 					updateStageNodes(needRecollectNodes);
 				};
 				handler();
@@ -19978,8 +20069,8 @@
 			depService.clear(nodes);
 		};
 		const historyChangeHandler = (page) => {
-			collectIdle([page], true).then(() => {
-				updateStageNode(page);
+			collectIdle([page], true).then((completed) => {
+				if (completed) updateStageNode(page);
 			});
 		};
 		editorService.on("history-change", historyChangeHandler);
@@ -20039,7 +20130,13 @@
 						depService.addTarget((0, _tmagic_core.createDataSourceMethodTarget)(config, (0, vue.reactive)({})));
 						collectIdlePromises = [collectIdle(root.items, true, _tmagic_core.DepTargetType.DATA_SOURCE_METHOD)];
 					}
-					Promise.all(collectIdlePromises).then(() => updateDataSourceSchema()).then(() => updateDsData()).then(() => updateStageNodes(root.items));
+					const handler = async () => {
+						if (!(await Promise.all(collectIdlePromises)).every(Boolean)) return;
+						updateDataSourceSchema();
+						await updateDsData();
+						updateStageNodes(root.items);
+					};
+					handler();
 				}
 			} else if (root?.dataSources) updateDsData();
 		};
@@ -20053,11 +20150,11 @@
 			if (!root) return;
 			const handler = async () => {
 				const nodes = (0, _tmagic_utils.getNodes)(Object.keys(root.dataSourceDeps?.[id] || {}), root.items);
-				await Promise.all([
+				if (!(await Promise.all([
 					collectIdle(nodes, false, _tmagic_core.DepTargetType.DATA_SOURCE),
 					collectIdle(nodes, false, _tmagic_core.DepTargetType.DATA_SOURCE_COND),
 					collectIdle(nodes, false, _tmagic_core.DepTargetType.DATA_SOURCE_METHOD)
-				]);
+				])).every(Boolean)) return;
 				updateDataSourceSchema();
 				(await getTMagicApp())?.dataSourceManager?.removeDataSource(id);
 				updateStageNodes(nodes);
@@ -20150,6 +20247,7 @@
 			containerHighlightClassName: {},
 			containerHighlightDuration: {},
 			containerHighlightType: {},
+			containerHighlightAddOnly: { type: Boolean },
 			stageRect: {},
 			codeOptions: {},
 			disabledDragStart: { type: Boolean },
@@ -20220,6 +20318,7 @@
 				containerHighlightClassName: props.containerHighlightClassName,
 				containerHighlightDuration: props.containerHighlightDuration,
 				containerHighlightType: props.containerHighlightType,
+				containerHighlightAddOnly: props.containerHighlightAddOnly,
 				disabledDragStart: props.disabledDragStart,
 				renderType: props.renderType,
 				guidesOptions: props.guidesOptions,
@@ -22575,7 +22674,6 @@
 	};
 	var _hoisted_3$3 = { class: "event-select-header" };
 	var _hoisted_4$2 = { class: "event-item-header" };
-	var _hoisted_5$1 = { class: "event-item-title" };
 	var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsEventSelect",
 		__name: "EventSelect",
@@ -22656,6 +22754,12 @@
 						typeMatch: true,
 						trigger: "blur"
 					}],
+					onChange: (_mForm, _v, { setModel }) => {
+						setModel("to", "");
+						setModel("method", "");
+						setModel("codeId", "");
+						setModel("dataSourceMethod", []);
+					},
 					...props.config.actionTypeConfig
 				};
 			});
@@ -22666,7 +22770,7 @@
 					type: "ui-select",
 					labelPosition: "left",
 					display: (_mForm, { model }) => model.actionType === _tmagic_core.ActionType.COMP,
-					onChange: (_MForm, _v, { setModel }) => {
+					onChange: (_mForm, _v, { setModel }) => {
 						setModel("method", "");
 					},
 					rules: [{
@@ -22873,46 +22977,42 @@
 							model: entry.cardItem,
 							"last-values": entry.lastCardItem,
 							"is-compare": isCompareMode.value,
-							"hide-expand": true,
+							"hide-expand": false,
 							"label-width": __props.config.labelWidth || "100px",
 							onChange: onChangeHandler
 						}, {
-							header: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_4$2, [
-								(0, vue.createElementVNode)("div", _hoisted_5$1, "事件" + (0, vue.toDisplayString)(Number(entry.index) + 1), 1),
-								(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
-									class: "fullWidth",
-									config: eventNameConfig.value,
-									model: entry.cardItem,
-									"last-values": entry.lastCardItem,
-									"is-compare": isCompareMode.value,
-									disabled: __props.disabled,
-									size: __props.size,
-									prop: `${__props.prop}.${entry.index}`,
-									onChange: eventNameChangeHandler
-								}, null, 8, [
-									"config",
-									"model",
-									"last-values",
-									"is-compare",
-									"disabled",
-									"size",
-									"prop"
-								]),
-								!isCompareMode.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
-									key: 0,
-									class: "event-item-delete-button",
-									link: "",
-									icon: (0, vue.unref)(_element_plus_icons_vue.Delete),
-									disabled: __props.disabled,
-									size: __props.size,
-									onClick: ($event) => removeEvent(Number(entry.index))
-								}, null, 8, [
-									"icon",
-									"disabled",
-									"size",
-									"onClick"
-								])) : (0, vue.createCommentVNode)("v-if", true)
-							])]),
+							header: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_4$2, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
+								class: "fullWidth",
+								config: eventNameConfig.value,
+								model: entry.cardItem,
+								"last-values": entry.lastCardItem,
+								"is-compare": isCompareMode.value,
+								disabled: __props.disabled,
+								size: __props.size,
+								prop: `${__props.prop}.${entry.index}`,
+								onChange: eventNameChangeHandler
+							}, null, 8, [
+								"config",
+								"model",
+								"last-values",
+								"is-compare",
+								"disabled",
+								"size",
+								"prop"
+							]), !isCompareMode.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
+								key: 0,
+								class: "event-item-delete-button",
+								link: "",
+								icon: (0, vue.unref)(_element_plus_icons_vue.Delete),
+								disabled: __props.disabled,
+								size: __props.size,
+								onClick: ($event) => removeEvent(Number(entry.index))
+							}, null, 8, [
+								"icon",
+								"disabled",
+								"size",
+								"onClick"
+							])) : (0, vue.createCommentVNode)("v-if", true)])]),
 							_: 2
 						}, 1032, [
 							"disabled",

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.16",
+  "version": "1.8.0-beta.18",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-beta.16",
-    "@tmagic/stage": "1.8.0-beta.16",
-    "@tmagic/form": "1.8.0-beta.16",
-    "@tmagic/utils": "1.8.0-beta.16",
-    "@tmagic/table": "1.8.0-beta.16"
+    "@tmagic/design": "1.8.0-beta.18",
+    "@tmagic/form": "1.8.0-beta.18",
+    "@tmagic/stage": "1.8.0-beta.18",
+    "@tmagic/table": "1.8.0-beta.18",
+    "@tmagic/utils": "1.8.0-beta.18"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.40",
-    "@tmagic/core": "1.8.0-beta.16"
+    "@tmagic/core": "1.8.0-beta.18"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -218,6 +218,7 @@ const stageOptions: StageOptions = {
   containerHighlightClassName: props.containerHighlightClassName,
   containerHighlightDuration: props.containerHighlightDuration,
   containerHighlightType: props.containerHighlightType,
+  containerHighlightAddOnly: props.containerHighlightAddOnly,
   disabledDragStart: props.disabledDragStart,
   renderType: props.renderType,
   guidesOptions: props.guidesOptions,

package/src/editorProps.ts

@@ -82,6 +82,11 @@ export interface EditorProps {
   containerHighlightDuration?: number;
   /** 拖入画布中容器时，识别容器的操作类型 */
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用识别容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   /** 画布大小 */
   stageRect?: StageRect;
   /** monaco editor 的配置 */
@@ -163,6 +168,7 @@ export const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
+  containerHighlightAddOnly: false,
   disabledShowSrc: false,
   disabledDataSource: false,
   disabledCodeBlock: false,

package/src/fields/EventSelect.vue

@@ -37,13 +37,12 @@
         :model="entry.cardItem"
         :last-values="entry.lastCardItem"
         :is-compare="isCompareMode"
-        :hide-expand="true"
+        :hide-expand="false"
         :label-width="config.labelWidth || '100px'"
         @change="onChangeHandler"
       >
         <template #header>
           <div class="event-item-header">
-            <div class="event-item-title">事件{{ Number(entry.index) + 1 }}</div>
             <MFormContainer
               class="fullWidth"
               :config="eventNameConfig"
@@ -210,6 +209,12 @@ const actionTypeConfig = computed(() => {
         trigger: 'blur',
       },
     ],
+    onChange: (_mForm: FormState, _v: string, { setModel }: any) => {
+      setModel('to', '');
+      setModel('method', '');
+      setModel('codeId', '');
+      setModel('dataSourceMethod', []);
+    },
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
 });
@@ -222,7 +227,7 @@ const targetCompConfig = computed(() => {
     type: 'ui-select',
     labelPosition: 'left',
     display: (_mForm, { model }) => model.actionType === ActionType.COMP,
-    onChange: (_MForm, _v, { setModel }) => {
+    onChange: (_mForm, _v, { setModel }) => {
       setModel('method', '');
     },
     rules: [