@tmagic/editor 1.8.0-beta.15 → 1.8.0-beta.17

package/dist/tmagic-editor.umd.cjs

@@ -5182,7 +5182,7 @@
 	}));
 	//#endregion
 	//#region packages/editor/src/utils/props.ts
-	var arrayOptions, eqOptions, numberOptions, booleanOptions, getCondOpOptionsByFieldType, styleTabConfig, eventTabConfig, advancedTabConfig, displayTabConfig, fillConfig, removeStyleDisplayConfig, validatePropsForm;
+	var arrayOptions, eqOptions, numberOptions, booleanOptions, getCondOpOptionsByFieldType, styleTabConfig, eventTabConfig, advancedTabConfig, displayTabConfig, fillConfig, removeStyleDisplayConfig;
 	var init_props = __esmMin((() => {
 		arrayOptions = [{
 			text: "包含",
@@ -5479,21 +5479,6 @@
 				})
 			};
 		});
-		validatePropsForm = ({ config, values, appContext = null, services, stage, extendState, debug, typeMatchValid }) => (0, _tmagic_form.validateForm)({
-			config,
-			debug,
-			typeMatchValid,
-			initValues: values,
-			appContext: appContext ? {
-				...appContext,
-				provides: { services }
-			} : null,
-			extendState: async (state) => ({
-				...await extendState?.(state) || {},
-				stage,
-				services
-			})
-		});
 	}));
 	//#endregion
 	//#region packages/editor/src/hooks/use-compare-form.ts
@@ -8991,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) => {
@@ -9670,6 +9656,9 @@
 			});
 		}, 1);
 	};
+	globalThis.cancelIdleCallback = globalThis.cancelIdleCallback || function(handle) {
+		clearTimeout(handle);
+	};
 	var IdleTask = class extends events.EventEmitter {
 		taskList = [];
 		hightLevelTaskList = [];
@@ -10807,7 +10796,7 @@
 		}
 		return String(value);
 	};
-	var MAX_SUGGESTION_OPTIONS = 5;
+	var MAX_SUGGESTION_OPTIONS = 20;
 	/**
 	* 生成「请使用以下某一个值：xxx；xxx」形式的参考建议；无可选值时返回空字符串（不追加建议）。
 	*/
@@ -12759,7 +12748,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"
 	};
@@ -12921,7 +12910,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",
@@ -13031,7 +13020,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",
@@ -13093,7 +13082,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);
 			};
 		}
@@ -13475,7 +13464,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();
@@ -13490,7 +13479,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,
@@ -13670,7 +13659,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",
@@ -14815,6 +14804,7 @@
 		containerHighlightClassName: _tmagic_stage.CONTAINER_HIGHLIGHT_CLASS_NAME,
 		containerHighlightDuration: 800,
 		containerHighlightType: _tmagic_stage.ContainerHighlightType.DEFAULT,
+		containerHighlightAddOnly: false,
 		disabledShowSrc: false,
 		disabledDataSource: false,
 		disabledCodeBlock: false,
@@ -14840,7 +14830,6 @@
 	//#endregion
 	//#region packages/editor/src/layouts/props-panel/FormPanel.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	init_props();
 	init_CodeEditor();
 	var _hoisted_1$59 = { class: "m-editor-props-form-panel" };
 	var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -14914,14 +14903,18 @@
 					return;
 				}
 				try {
-					const error = await validatePropsForm({
+					const error = await (0, _tmagic_form.validateForm)({
 						config: props.config,
-						values: newValues,
-						appContext: internalInstance?.appContext ?? null,
-						services,
-						stage: stage.value,
 						typeMatchValid: true,
-						extendState: props.extendState
+						initValues: newValues,
+						appContext: internalInstance?.appContext ? {
+							...internalInstance?.appContext,
+							provides: { services }
+						} : null,
+						extendState: (state) => {
+							if (configFormRef.value?.formState) return { ...configFormRef.value?.formState || {} };
+							return props.extendState?.(state) || {};
+						}
 					});
 					if (error) (0, _tmagic_design.tMagicMessage)({
 						type: "error",
@@ -17896,7 +17889,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, {
@@ -17964,7 +17957,7 @@
 		key: 1,
 		class: "magic-editor-tab-panel-title"
 	};
-	var _hoisted_5$2 = {
+	var _hoisted_5$1 = {
 		key: 0,
 		class: "m-editor-sidebar-tips"
 	};
@@ -18208,7 +18201,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"]))
@@ -19244,6 +19237,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 }) => {
@@ -19293,33 +19289,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) });
@@ -19330,6 +19329,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]);
@@ -19342,6 +19345,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;
 			});
 		}
@@ -19363,6 +19370,7 @@
 			return this.watcher.hasSpecifiedTypeTarget(type);
 		}
 		clearIdleTasks() {
+			this.abortActiveBatches();
 			this.idleTask.clearTasks();
 		}
 		on(eventName, listener) {
@@ -19372,6 +19380,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);
@@ -19396,18 +19409,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
@@ -19851,15 +19909,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);
 			});
 		});
@@ -19946,8 +20004,8 @@
 			})();
 		};
 		const nodeAddHandler = (nodes) => {
-			collectIdle(nodes, true).then(() => {
-				updateStageNodes(nodes);
+			collectIdle(nodes, true).then((completed) => {
+				if (completed) updateStageNodes(nodes);
 			});
 		};
 		const nodeUpdateHandler = (data) => {
@@ -19976,8 +20034,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();
@@ -19990,8 +20048,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);
@@ -20051,7 +20109,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();
 		};
@@ -20065,11 +20129,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);
@@ -20162,6 +20226,7 @@
 			containerHighlightClassName: {},
 			containerHighlightDuration: {},
 			containerHighlightType: {},
+			containerHighlightAddOnly: { type: Boolean },
 			stageRect: {},
 			codeOptions: {},
 			disabledDragStart: { type: Boolean },
@@ -20232,6 +20297,7 @@
 				containerHighlightClassName: props.containerHighlightClassName,
 				containerHighlightDuration: props.containerHighlightDuration,
 				containerHighlightType: props.containerHighlightType,
+				containerHighlightAddOnly: props.containerHighlightAddOnly,
 				disabledDragStart: props.disabledDragStart,
 				renderType: props.renderType,
 				guidesOptions: props.guidesOptions,
@@ -22587,7 +22653,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",
@@ -22668,6 +22733,12 @@
 						typeMatch: true,
 						trigger: "blur"
 					}],
+					onChange: (_mForm, _v, { setModel }) => {
+						setModel("to", "");
+						setModel("method", "");
+						setModel("codeId", "");
+						setModel("dataSourceMethod", []);
+					},
 					...props.config.actionTypeConfig
 				};
 			});
@@ -22678,7 +22749,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: [{
@@ -22885,46 +22956,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",
@@ -25930,7 +25997,6 @@
 	exports.useServices = useServices;
 	exports.useStage = useStage;
 	exports.useWindowRect = useWindowRect;
-	exports.validatePropsForm = validatePropsForm;
 	exports.warn = warn;
 	Object.keys(_tmagic_form).forEach(function(k) {
 		if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.15",
+  "version": "1.8.0-beta.17",
   "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.15",
-    "@tmagic/form": "1.8.0-beta.15",
-    "@tmagic/table": "1.8.0-beta.15",
-    "@tmagic/utils": "1.8.0-beta.15",
-    "@tmagic/stage": "1.8.0-beta.15"
+    "@tmagic/form": "1.8.0-beta.17",
+    "@tmagic/design": "1.8.0-beta.17",
+    "@tmagic/utils": "1.8.0-beta.17",
+    "@tmagic/table": "1.8.0-beta.17",
+    "@tmagic/stage": "1.8.0-beta.17"
   },
   "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.15"
+    "@tmagic/core": "1.8.0-beta.17"
   },
   "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: [

package/src/hooks/use-stage.ts

@@ -28,6 +28,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
+    containerHighlightAddOnly: stageOptions.containerHighlightAddOnly,
     disabledDragStart: stageOptions.disabledDragStart,
     renderType: stageOptions.renderType,
     canSelect: (el, event, stop) => {