@tmagic/editor 1.8.0-beta.16 → 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/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/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 = [];

package/dist/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;