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

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -50,6 +50,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		containerHighlightClassName: {},
 		containerHighlightDuration: {},
 		containerHighlightType: {},
+		containerHighlightAddOnly: { type: Boolean },
 		stageRect: {},
 		codeOptions: {},
 		disabledDragStart: { type: Boolean },
@@ -120,6 +121,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			containerHighlightClassName: props.containerHighlightClassName,
 			containerHighlightDuration: props.containerHighlightDuration,
 			containerHighlightType: props.containerHighlightType,
+			containerHighlightAddOnly: props.containerHighlightAddOnly,
 			disabledDragStart: props.disabledDragStart,
 			renderType: props.renderType,
 			guidesOptions: props.guidesOptions,

package/dist/es/editorProps.js

@@ -16,6 +16,7 @@ var defaultEditorProps = {
 	containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
 	containerHighlightDuration: 800,
 	containerHighlightType: ContainerHighlightType.DEFAULT,
+	containerHighlightAddOnly: false,
 	disabledShowSrc: false,
 	disabledDataSource: false,
 	disabledCodeBlock: false,

package/dist/es/fields/EventSelect.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { getCompActionAllowedValues, getCompActionOptions, getEventNameAllowedVa
 import { MContainer, MPanel, MTable, defineFormItem } from "@tmagic/form";
 import { TMagicButton } from "@tmagic/design";
 import { ActionType } from "@tmagic/core";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
 import { has } from "lodash-es";
 import { Delete, Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/EventSelect.vue?vue&type=script&setup=true&lang.ts
@@ -14,7 +14,6 @@ var _hoisted_2 = {
 };
 var _hoisted_3 = { class: "event-select-header" };
 var _hoisted_4 = { class: "event-item-header" };
-var _hoisted_5 = { class: "event-item-title" };
 var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsEventSelect",
 	__name: "EventSelect",
@@ -95,6 +94,12 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					typeMatch: true,
 					trigger: "blur"
 				}],
+				onChange: (_mForm, _v, { setModel }) => {
+					setModel("to", "");
+					setModel("method", "");
+					setModel("codeId", "");
+					setModel("dataSourceMethod", []);
+				},
 				...props.config.actionTypeConfig
 			};
 		});
@@ -105,7 +110,7 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				type: "ui-select",
 				labelPosition: "left",
 				display: (_mForm, { model }) => model.actionType === ActionType.COMP,
-				onChange: (_MForm, _v, { setModel }) => {
+				onChange: (_mForm, _v, { setModel }) => {
 					setModel("method", "");
 				},
 				rules: [{
@@ -312,46 +317,42 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						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: withCtx(() => [createElementVNode("div", _hoisted_4, [
-							createElementVNode("div", _hoisted_5, "事件" + toDisplayString(Number(entry.index) + 1), 1),
-							createVNode(unref(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 ? (openBlock(), createBlock(unref(TMagicButton), {
-								key: 0,
-								class: "event-item-delete-button",
-								link: "",
-								icon: unref(Delete),
-								disabled: __props.disabled,
-								size: __props.size,
-								onClick: ($event) => removeEvent(Number(entry.index))
-							}, null, 8, [
-								"icon",
-								"disabled",
-								"size",
-								"onClick"
-							])) : createCommentVNode("v-if", true)
-						])]),
+						header: withCtx(() => [createElementVNode("div", _hoisted_4, [createVNode(unref(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 ? (openBlock(), createBlock(unref(TMagicButton), {
+							key: 0,
+							class: "event-item-delete-button",
+							link: "",
+							icon: unref(Delete),
+							disabled: __props.disabled,
+							size: __props.size,
+							onClick: ($event) => removeEvent(Number(entry.index))
+						}, null, 8, [
+							"icon",
+							"disabled",
+							"size",
+							"onClick"
+						])) : createCommentVNode("v-if", true)])]),
 						_: 2
 					}, 1032, [
 						"disabled",

package/dist/es/hooks/use-stage.js

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

package/dist/es/index.js

@@ -2,7 +2,7 @@ import { CODE_DRAFT_STORAGE_KEY, CodeDeleteErrorType, ColumnLayout, DragType, Ke
 import { useCodeBlockEdit } from "./hooks/use-code-block-edit.js";
 import { getEditorConfig, isGlobalFlat, setEditorConfig } from "./utils/config.js";
 import { getCodeBlockFormConfig } from "./utils/code-block.js";
-import { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig, validatePropsForm } from "./utils/props.js";
+import { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig } from "./utils/props.js";
 import { useCompareForm } from "./hooks/use-compare-form.js";
 import props_default from "./services/props.js";
 import { UndoRedo } from "./utils/undo-redo.js";
@@ -92,4 +92,4 @@ export * from "@tmagic/table";
 export * from "@tmagic/stage";
 export * from "@tmagic/design";
 export * from "@tmagic/utils";
-export { ALL_COND_OPS, CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EVENT_NAME_VALUE_SEPARATOR, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerNodeContent_default as LayerNodeContent, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, ViewForm_default as ViewForm, advancedTabConfig, arrayOptions, beforePaste, booleanOptions, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectEventNameOptionValues, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, editorTypeMatchRules, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getCompActionAllowedValues, getCompActionOptions, getCondOpOptionsByFieldType, getDefaultConfig, getDisplayField, getEditorConfig, getEventNameAllowedValues, getEventNameOptions, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isEventNameCheckStrictly, isGlobalFlat, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, normalizeCompActionValue, numberOptions, openIndexedDB, props_default as propsService, removeStyleDisplayConfig, resolveFieldByPath, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useCompareForm, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, validatePropsForm, warn };
+export { ALL_COND_OPS, CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EVENT_NAME_VALUE_SEPARATOR, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerNodeContent_default as LayerNodeContent, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, ViewForm_default as ViewForm, advancedTabConfig, arrayOptions, beforePaste, booleanOptions, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectEventNameOptionValues, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, editorTypeMatchRules, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getCompActionAllowedValues, getCompActionOptions, getCondOpOptionsByFieldType, getDefaultConfig, getDisplayField, getEditorConfig, getEventNameAllowedValues, getEventNameOptions, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isEventNameCheckStrictly, isGlobalFlat, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, normalizeCompActionValue, numberOptions, openIndexedDB, props_default as propsService, removeStyleDisplayConfig, resolveFieldByPath, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useCompareForm, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };

package/dist/es/initService.js

@@ -110,15 +110,15 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		return pageId;
 	};
 	const collectIdle = (nodes, deep, type) => Promise.all(nodes.map((node) => {
-		if (node.type === NodeType.ROOT) return Promise.resolve();
+		if (node.type === NodeType.ROOT) return Promise.resolve(true);
 		return depService.collectIdle([node], { pageId: getPageIdByNode(node) }, deep, type);
-	}));
+	})).then((results) => results.every(Boolean));
 	watch(() => editorService.get("stage"), (stage) => {
 		if (!stage) return;
 		stage.on("rerender", async () => {
 			const node = editorService.get("node");
 			if (!node) return;
-			await collectIdle([node], true, DepTargetType.DATA_SOURCE);
+			if (!await collectIdle([node], true, DepTargetType.DATA_SOURCE)) return;
 			updateStageNode(node);
 		});
 	});
@@ -205,8 +205,8 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		})();
 	};
 	const nodeAddHandler = (nodes) => {
-		collectIdle(nodes, true).then(() => {
-			updateStageNodes(nodes);
+		collectIdle(nodes, true).then((completed) => {
+			if (completed) updateStageNodes(nodes);
 		});
 	};
 	const nodeUpdateHandler = (data) => {
@@ -235,8 +235,8 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		else normalNodes.push(newNode);
 		if (needRecollectNodes.length) {
 			const handler = async () => {
-				await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
-				await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+				if (!await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE)) return;
+				if (!await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND)) return;
 				updateStageNodes(needRecollectNodes);
 			};
 			handler();
@@ -249,8 +249,8 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		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);
@@ -310,7 +310,13 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 					depService.addTarget(createDataSourceMethodTarget(config, reactive({})));
 					collectIdlePromises = [collectIdle(root.items, true, 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();
 	};
@@ -324,11 +330,11 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		if (!root) return;
 		const handler = async () => {
 			const nodes = getNodes(Object.keys(root.dataSourceDeps?.[id] || {}), root.items);
-			await Promise.all([
+			if (!(await Promise.all([
 				collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
 				collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
 				collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD)
-			]);
+			])).every(Boolean)) return;
 			updateDataSourceSchema();
 			(await getTMagicApp())?.dataSourceManager?.removeDataSource(id);
 			updateStageNodes(nodes);

package/dist/es/layouts/props-panel/FormPanel.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,9 @@
-import { validatePropsForm } from "../../utils/props.js";
 import { useServices } from "../../hooks/use-services.js";
 import { useEditorContentHeight } from "../../hooks/use-editor-content-height.js";
 import Icon_default from "../../components/Icon.js";
 import CodeEditor_default from "../CodeEditor.js";
 import { ENABLE_PROPS_FORM_VALIDATE } from "../../editorProps.js";
-import { MForm } from "@tmagic/form";
+import { MForm, validateForm } from "@tmagic/form";
 import { TMagicButton, TMagicScrollbar, tMagicMessage } from "@tmagic/design";
 import { filterXSS } from "@tmagic/utils";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, inject, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderSlot, unref, useTemplateRef, watchEffect, withCtx } from "vue";
@@ -82,14 +81,18 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				return;
 			}
 			try {
-				const error = await validatePropsForm({
+				const error = await 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) tMagicMessage({
 					type: "error",

package/dist/es/layouts/sidebar/ComponentListPanel.vue_vue_type_script_setup_true_lang.js

@@ -70,7 +70,7 @@ var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 				return;
 			}
 			if (timeout || !stage.value) return;
-			timeout = stage.value.delayedMarkContainer(e);
+			timeout = stage.value.delayedMarkContainer(e, [], true);
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TMagicScrollbar), null, {

package/dist/es/services/dep.js

@@ -15,6 +15,9 @@ var Dep = class extends BaseService {
 	idleTask = new IdleTask();
 	watcher = new Watcher({ initialTargets: reactive({}) });
 	waitingWorker;
+	resolveWaitingWorker;
+	workerGeneration = 0;
+	activeBatches = /* @__PURE__ */ new Set();
 	constructor() {
 		super();
 		this.idleTask.on("update-task-length", throttle(({ length }) => {
@@ -64,33 +67,36 @@ var Dep = class extends BaseService {
 	}
 	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: serialize(dsl) });
@@ -101,6 +107,10 @@ var Dep = class extends BaseService {
 				resolve({});
 			};
 		}).then((depsData) => {
+			if (generation !== this.workerGeneration) {
+				waitingResolve();
+				return depsData;
+			}
 			traverseTarget(this.watcher.getTargetsList(), (target) => {
 				if (depsData[target.type]?.[target.id]) {
 					target.deps = reactive(depsData[target.type][target.id]);
@@ -113,6 +123,10 @@ var Dep = class extends BaseService {
 			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;
 		});
 	}
@@ -134,6 +148,7 @@ var Dep = class extends BaseService {
 		return this.watcher.hasSpecifiedTypeTarget(type);
 	}
 	clearIdleTasks() {
+		this.abortActiveBatches();
 		this.idleTask.clearTasks();
 	}
 	on(eventName, listener) {
@@ -143,6 +158,11 @@ var Dep = class extends BaseService {
 		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);
@@ -167,18 +187,63 @@ var Dep = class extends BaseService {
 			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 === 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 === 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

package/dist/es/style.css

@@ -59,6 +59,9 @@
   border-radius: 0;
   border-bottom: 0;
 }
+.tmagic-design-card.tmagic-design-card--flat.m-flat-hide-body .el-card__header {
+  border-bottom: 0 !important;
+}
 .tmagic-design-card.tmagic-design-card--flat.m-fields-group-list-item {
   margin-bottom: 0;
 }
@@ -67,18 +70,22 @@
 }
 .tmagic-design-card.tmagic-design-card--flat .el-card__header {
   border-bottom: none;
-  padding: 16px;
+  padding: 8px 16px;
 }
 .tmagic-design-card.tmagic-design-card--flat .el-card__header:hover {
   background: transparent;
   box-shadow: none;
   cursor: default;
 }
+.tmagic-design-card.tmagic-design-card--flat .m-fields-group-list-footer {
+  margin-bottom: 4px;
+  margin-top: 4px;
+}
 .tmagic-design-card.tmagic-design-card--flat .el-card__body {
   padding: 0 16px 0 16px;
 }
 .tmagic-design-card.tmagic-design-card--flat .el-card__body .tmagic-design-form-item:not(tbody .tmagic-design-form-item) {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 .tmagic-design-card.tmagic-design-card--flat .el-card__body > .m-container-row {
   overflow-x: hidden;
@@ -95,7 +102,7 @@
 }
 .m-split-title-card-container > .tmagic-design-card.tmagic-design-card--flat > .el-card__body {
   background-color: #fff;
-  padding-top: 16px;
+  padding-top: 8px;
 }
 
 .tmagic-design-color-picker-input {
@@ -434,12 +441,16 @@ fieldset.m-fieldset .m-form-tip {
   gap: 8px;
 }
 .m-fields-group-list .m-fields-group-list-footer {
-  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
 
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
+  margin-bottom: 10px;
+}
+
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }
@@ -1927,20 +1938,23 @@ fieldset.m-fieldset .m-form-tip {
   margin-bottom: 18px;
 }
 .m-fields-code-select .code-select-content > .m-fields-group-list > .tmagic-design-card--flat > .el-card__header {
-  padding: 16px 0;
+  padding: 8px 0;
 }
 .m-fields-code-select .create-button.fullWidth {
   width: 100%;
-  margin: 0 0 16px 0;
+  margin: 0 0 8px 0;
 }
 
 .m-fields-event-select {
   width: 100%;
 }
 .m-fields-event-select .fullWidth {
-  width: 100%;
+  width: calc(100% - 32px);
   box-sizing: border-box;
 }
+.m-fields-event-select .fullWidth.create-button {
+  width: 100%;
+}
 .m-fields-event-select .event-select-container {
   padding: 0 16px;
 }
@@ -1948,13 +1962,13 @@ fieldset.m-fieldset .m-form-tip {
   border-bottom: 1px solid #ebeef5;
 }
 .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body {
-  padding-bottom: 16px;
+  padding-bottom: 8px;
 }
 .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .m-fields-group-list-footer div {
   justify-content: flex-start !important;
 }
 .m-fields-event-select .event-select-container > .el-card.tmagic-design-card--flat > .el-card__body .el-card.tmagic-design-card--flat > .el-card__header {
-  padding: 16px 0;
+  padding: 8px 0;
 }
 .m-fields-event-select .event-select-code {
   margin-left: 20px;
@@ -2008,18 +2022,19 @@ fieldset.m-fieldset .m-form-tip {
 .event-item-header {
   position: relative;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .event-item-header .event-item-title {
   color: #0f1113;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 .event-item-header .event-item-delete-button {
-  position: absolute;
-  right: 0;
-  top: 0;
+  color: #0f1113;
 }
 .event-item-header .el-form-item .el-form-item.is-error {
   margin-bottom: 18px;

package/dist/es/utils/dep/idle-task.js

@@ -11,6 +11,9 @@ globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb)
 		});
 	}, 1);
 };
+globalThis.cancelIdleCallback = globalThis.cancelIdleCallback || function(handle) {
+	clearTimeout(handle);
+};
 var IdleTask = class extends EventEmitter {
 	taskList = [];
 	hightLevelTaskList = [];