@tmagic/editor 1.8.0-beta.27 → 1.8.0-beta.29

package/dist/es/components/ScrollBar.vue_vue_type_script_setup_true_lang.js

@@ -48,9 +48,10 @@ var ScrollBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return props.scrollSize * ratio;
 		};
 		const scrollBy = (delta) => {
-			if (delta < 0) if (props.pos <= 0) emit("scroll", 0);
-			else emit("scroll", -Math.min(-delta, props.pos));
-			else {
+			if (delta < 0) {
+				if (props.pos <= 0) emit("scroll", 0);
+				else emit("scroll", -Math.min(-delta, props.pos));
+			} else {
 				const leftPos = props.size - (thumbSize.value + thumbPos.value);
 				if (leftPos <= 0) emit("scroll", 0);
 				else emit("scroll", Math.min(delta, leftPos));

package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,7 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		notEditable: { type: [Boolean, Function] },
 		dataSourceId: {}
 	}, {
-		"modelValue": { default: [] },
+		"modelValue": { default: () => [] },
 		"modelModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),

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

@@ -42,8 +42,10 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		let editIndex = -1;
 		const editMethod = (method, index) => {
 			let codeContent = "({ params, dataSource, app }) => {\n  // place your code here\n}";
-			if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
-			else codeContent = method.content;
+			if (method.content) {
+				if (typeof method.content !== "string") codeContent = method.content.toString();
+				else codeContent = method.content;
+			}
 			codeConfig.value = {
 				...cloneDeep(method),
 				content: codeContent

package/dist/es/fields/configs/stickyAddButton.js

@@ -1,11 +1,12 @@
 //#region packages/editor/src/fields/configs/stickyAddButton.ts
 /**
-* 属性面板列表字段共用的吸底全宽「添加」按钮，展开到 group-list 配置上。
+* 属性面板列表字段共用的吸底全宽「添加」按钮与吸顶标题，展开到 group-list 配置上。
 *
-* 吸底按钮会盖住列表底部，新增的项必须同时滚进视口才看得见，两者一起给出避免漏配。
+* 吸底按钮会盖住列表底部，吸顶标题会盖住列表顶部，新增的项必须同时滚进视口才看得见。
 */
 var stickyAddButton = (text) => ({
 	scrollLastItemIntoView: true,
+	header: { sticky: true },
 	addButtonConfig: {
 		sticky: true,
 		text,

package/dist/es/hooks/use-code-block-edit.js

@@ -23,8 +23,10 @@ var useCodeBlockEdit = (codeBlockService) => {
 			return;
 		}
 		let codeContent = "";
-		if (codeBlock.content) if (typeof codeBlock.content !== "string") codeContent = codeBlock.content.toString();
-		else codeContent = codeBlock.content;
+		if (codeBlock.content) {
+			if (typeof codeBlock.content !== "string") codeContent = codeBlock.content.toString();
+			else codeContent = codeBlock.content;
+		}
 		codeConfig.value = {
 			...cloneDeep(codeBlock),
 			content: codeContent

package/dist/es/initService.js

@@ -168,10 +168,20 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 			});
 		});
 	};
+	/**
+	* root 是否已经不是编辑器当前的 root。
+	*
+	* `editorService.set('root', v)` 是同步赋值后再派发 `root-change`，因此派发那一刻 `v` 一定
+	* 就是当前 root；但处理 `root-change` 要等 stage / runtime / 依赖收集等异步过程，期间 root
+	* 可能被新的一次整体替换（外部重设 DSL、更新 root 节点、源码保存等）顶掉，此时手上的 `v`
+	* 已是过期快照，继续用它刷画布或回写给外部都会与新 root 互相覆盖。
+	*/
+	const isStaleRoot = (value) => toRaw(editorService.get("root")) !== toRaw(value);
 	const updateStageDsl = async (value) => {
 		const stage = await getStage();
 		const runtime = await stage.renderer?.getRuntime();
 		const app = await getTMagicApp();
+		if (isStaleRoot(value)) return;
 		if (!app?.dataSourceManager) runtime?.updateRootConfig?.(cloneDeep$1(toRaw(value)));
 		const page = editorService.get("page");
 		const node = editorService.get("node");
@@ -182,6 +192,7 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		if (value) {
 			depService.clearIdleTasks();
 			await (typeof Worker === "undefined" ? collectIdle(value.items, true) : depService.collectByWorker(value));
+			if (isStaleRoot(value)) return;
 			const dsl = cloneDeep$1(toRaw(value));
 			if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) for (const node of getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items)) updateNode(app.dataSourceManager.compiledNode(node), dsl);
 			runtime?.updateRootConfig?.(dsl);
@@ -192,7 +203,7 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
 		depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
 	};
-	const rootChangeHandler = (value, preValue) => {
+	const rootChangeHandler = (value) => {
 		if (!value) return;
 		value.codeBlocks = value.codeBlocks || {};
 		value.dataSources = value.dataSources || [];
@@ -218,7 +229,8 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 				editorService.set("parent", null);
 				editorService.set("page", null);
 			}
-			if (toRaw(value) !== toRaw(preValue)) emit("update:modelValue", value);
+			if (isStaleRoot(value)) return;
+			if (toRaw(props.modelValue) !== toRaw(value)) emit("update:modelValue", value);
 		})();
 	};
 	const nodeAddHandler = (nodes) => {

package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -93,9 +93,10 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		};
 		const toString = (v, language) => {
 			let value;
-			if (typeof v !== "string") if (language === "json") value = JSON.stringify(v, null, 2);
-			else value = serializeConfig(v);
-			else value = v;
+			if (typeof v !== "string") {
+				if (language === "json") value = JSON.stringify(v, null, 2);
+				else value = serializeConfig(v);
+			} else value = v;
 			if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) value = `(${value})`;
 			return value;
 		};

package/dist/es/layouts/history-list/useHistoryRevert.js

@@ -135,7 +135,7 @@ var useHistoryRevert = (options = {}, services) => {
 	* 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
 	* 用户取消时返回 false，调用方据此中止回滚。
 	*/
-	const confirmRevert = () => confirmHistoryAction("确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。");
+	const confirmRevert = () => confirmHistoryAction("确定回滚该步骤吗？");
 	/**
 	* 「回滚」统一确认入口：可差异对比的步骤动态挂载 HistoryDiffDialog 走差异确认弹窗，
 	* 无法对比的步骤（add / remove / 多节点更新）回退到普通二次确认框。

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

@@ -68,13 +68,14 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				const historySource = eventData ? "props" : "code";
 				const replace = historySource === "code";
 				let newValue;
-				if (replace) if (source === "style") newValue = {
-					...values.value,
-					id: v.id || values.value.id,
-					style: { ...v.style || {} }
-				};
-				else newValue = { ...v };
-				else {
+				if (replace) {
+					if (source === "style") newValue = {
+						...values.value,
+						id: v.id || values.value.id,
+						style: { ...v.style || {} }
+					};
+					else newValue = { ...v };
+				} else {
 					newValue = {
 						...v,
 						style: {}

package/dist/es/layouts/sidebar/layer/use-drag.js

@@ -109,16 +109,17 @@ var useDrag = ({ editorService }, options = {}) => {
 			let targetParent = targetInfo.parent;
 			if (!targetParent || !targetNode) return;
 			let targetIndex = -1;
-			if (Array.isArray(targetNode.items) && dragState.dropType === "inner") if (dragState.redirectedTargetId !== void 0) {
-				const redirectedNode = editorService.getNodeInfo(dragState.redirectedTargetId, false).node;
-				if (!redirectedNode || !Array.isArray(redirectedNode.items)) return;
-				targetParent = redirectedNode;
-				targetIndex = redirectedNode.items.length;
-			} else {
-				targetIndex = targetNode.items.length;
-				targetParent = targetNode;
-			}
-			else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
+			if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
+				if (dragState.redirectedTargetId !== void 0) {
+					const redirectedNode = editorService.getNodeInfo(dragState.redirectedTargetId, false).node;
+					if (!redirectedNode || !Array.isArray(redirectedNode.items)) return;
+					targetParent = redirectedNode;
+					targetIndex = redirectedNode.items.length;
+				} else {
+					targetIndex = targetNode.items.length;
+					targetParent = targetNode;
+				}
+			} else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
 			if (dragState.dropType === "after") targetIndex += 1;
 			const selectedNodes = editorService.get("nodes");
 			if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) editorService.dragTo(selectedNodes, targetParent, targetIndex);

package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js

@@ -151,11 +151,44 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				height: contentRect.height
 			});
 		});
+		const parseDSL = getEditorConfig("parseDSL");
+		/**
+		* 本次拖拽是否由编辑器文档内部发起
+		*
+		* drop 的 text/json 里可能带函数（组件配置的事件、钩子等），还原只能交给 parseDSL，
+		* 而 parseDSL 的默认实现是 eval；HTML 拖放又允许其他源的页面在 DataTransfer 中投递
+		* 自定义 MIME 数据，跨源页面只要诱导用户拖拽一次，就能让 eval 执行任意脚本。
+		*
+		* 跨源页面既不会在本文档触发 dragstart，也无法往本文档创建的 DataTransfer 中写数据，
+		* 因此只有起源于本文档的拖拽才交给 parseDSL 还原。
+		* 同源拖拽源写入的 text/json 由业务保证可信。
+		*/
+		let isInternalDrag = false;
+		let internalDragSession = 0;
+		let clearInternalDragTimer;
+		const documentDragStartHandler = () => {
+			internalDragSession += 1;
+			isInternalDrag = true;
+			if (clearInternalDragTimer !== void 0) {
+				globalThis.clearTimeout(clearInternalDragTimer);
+				clearInternalDragTimer = void 0;
+			}
+		};
+		const documentDragEndHandler = () => {
+			const session = internalDragSession;
+			if (clearInternalDragTimer !== void 0) globalThis.clearTimeout(clearInternalDragTimer);
+			clearInternalDragTimer = globalThis.setTimeout(() => {
+				clearInternalDragTimer = void 0;
+				if (session === internalDragSession) isInternalDrag = false;
+			}, 0);
+		};
 		onMounted(() => {
 			if (stageWrapRef.value?.container) {
 				resizeObserver.observe(stageWrapRef.value.container);
 				keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
 			}
+			globalThis.document.addEventListener("dragstart", documentDragStartHandler, true);
+			globalThis.document.addEventListener("dragend", documentDragEndHandler, true);
 		});
 		onBeforeUnmount(() => {
 			stage?.destroy();
@@ -163,8 +196,13 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			resizeObserver.disconnect();
 			editorService.set("stage", null);
 			keybindingService.unregisterEl("stage");
+			if (clearInternalDragTimer !== void 0) {
+				globalThis.clearTimeout(clearInternalDragTimer);
+				clearInternalDragTimer = void 0;
+			}
+			globalThis.document.removeEventListener("dragstart", documentDragStartHandler, true);
+			globalThis.document.removeEventListener("dragend", documentDragEndHandler, true);
 		});
-		const parseDSL = getEditorConfig("parseDSL");
 		const contextmenuHandler = (e) => {
 			e.preventDefault();
 			menuRef.value?.show(e);
@@ -175,11 +213,19 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			e.dataTransfer.dropEffect = "move";
 		};
 		const dropHandler = async (e) => {
+			const allowed = isInternalDrag;
+			isInternalDrag = false;
 			if (!e.dataTransfer) return;
 			const data = e.dataTransfer.getData("text/json");
-			if (!data) return;
-			const config = parseDSL(`(${data})`);
-			if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
+			if (!data || !allowed) return;
+			let config;
+			try {
+				config = parseDSL(`(${data})`);
+			} catch {
+				return;
+			}
+			if (!config || config.dragType !== DragType.COMPONENT_LIST || !config.data) return;
+			const dragData = config.data;
 			e.preventDefault();
 			const doc = stage?.renderer?.contentWindow?.document;
 			const parentEl = doc?.querySelector(`.${props.stageOptions?.containerHighlightClassName}`);
@@ -201,7 +247,7 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				const layout = await editorService.getLayout(parent);
 				const containerRect = stageContainerEl.value.getBoundingClientRect();
 				const { scrollTop, scrollLeft } = stage.mask;
-				const { style = {} } = config.data;
+				const { style = {} } = dragData;
 				let top = 0;
 				let left = 0;
 				let position = "relative";
@@ -219,14 +265,14 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						top = top - parentTop * zoom.value;
 					}
 				}
-				config.data.style = {
+				dragData.style = {
 					...style,
 					position,
 					top: calcValueByFontsize(doc, top / zoom.value),
 					left: calcValueByFontsize(doc, left / zoom.value)
 				};
-				config.data.inputEvent = e;
-				editorService.add(config.data, parent, { historySource: "component-panel" });
+				dragData.inputEvent = e;
+				editorService.add(dragData, parent, { historySource: "component-panel" });
 			}
 		};
 		return (_ctx, _cache) => {

package/dist/es/services/editor.js

@@ -455,13 +455,15 @@ var Editor = class extends BaseService {
 		}
 		await Promise.all(nodes.map((node) => this.doRemove(node, options)));
 		this.removeInvalidNodesBySubtree(nodes);
-		if (removedItems.length > 0 && pageForOp) if (!doNotPushHistory) this.pushOpHistory("remove", {
-			diff: removedItems,
-			pageData: pageForOp,
-			historyDescription,
-			source: historySource
-		});
-		else this.selectionBeforeOp = null;
+		if (removedItems.length > 0 && pageForOp) {
+			if (!doNotPushHistory) this.pushOpHistory("remove", {
+				diff: removedItems,
+				pageData: pageForOp,
+				historyDescription,
+				source: historySource
+			});
+			else this.selectionBeforeOp = null;
+		}
 		this.emit("remove", nodes);
 		this.emit("change", {
 			type: "remove",
@@ -541,22 +543,24 @@ var Editor = class extends BaseService {
 		}));
 		this.applyInvalidInfo(config, invalidInfo);
 		if (updateData[0].oldNode?.type !== NodeType.ROOT) {
-			if (this.get("nodes").length) if (!doNotPushHistory) {
-				const pageForOp = this.getNodeInfo(nodes[0].id, false).page;
-				this.pushOpHistory("update", {
-					diff: buildUpdateDiff(updateData.map((d) => ({
-						oldNode: cloneDeep$1(d.oldNode),
-						newNode: cloneDeep$1(d.newNode),
-						changeRecords: d.changeRecords?.length ? cloneDeep$1(d.changeRecords) : void 0
-					}))),
-					pageData: {
-						name: pageForOp?.name || "",
-						id: pageForOp.id
-					},
-					historyDescription,
-					source: historySource
-				});
-			} else this.selectionBeforeOp = null;
+			if (this.get("nodes").length) {
+				if (!doNotPushHistory) {
+					const pageForOp = this.getNodeInfo(nodes[0].id, false).page;
+					this.pushOpHistory("update", {
+						diff: buildUpdateDiff(updateData.map((d) => ({
+							oldNode: cloneDeep$1(d.oldNode),
+							newNode: cloneDeep$1(d.newNode),
+							changeRecords: d.changeRecords?.length ? cloneDeep$1(d.changeRecords) : void 0
+						}))),
+						pageData: {
+							name: pageForOp?.name || "",
+							id: pageForOp.id
+						},
+						historyDescription,
+						source: historySource
+					});
+				} else this.selectionBeforeOp = null;
+			}
 		}
 		this.emit("update", updateData);
 		this.emit("change", {
@@ -684,8 +688,10 @@ var Editor = class extends BaseService {
 			historyDescription,
 			historySource
 		});
-		if (!doNotSelect) if (newNodes.length > 1) await stage?.multiSelect(newNodes.map((node) => node.id));
-		else await stage?.select(newNodes[0].id);
+		if (!doNotSelect) {
+			if (newNodes.length > 1) await stage?.multiSelect(newNodes.map((node) => node.id));
+			else await stage?.select(newNodes[0].id);
+		}
 		return newNode;
 	}
 	/**

package/dist/es/style.css

@@ -478,18 +478,48 @@ fieldset.m-fieldset .m-form-tip {
   flex-shrink: 0;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item > .t-card__header {
+.m-fields-group-list > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: var(
+    --m-group-list-nested-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-footer-sticky > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: calc(
+    var(--m-group-list-nested-footer-bottom, 0px) +
+      var(--m-group-list-footer-height)
+  );
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list {
+  --m-group-list-nested-footer-bottom: var(
+    --m-group-list-item-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-header-sticky {
+  --m-group-list-nested-sticky-top: var(--m-group-list-child-list-sticky-top);
+  --m-group-list-nested-header-z: var(--m-group-list-child-list-header-z);
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item {
+  --m-group-list-item-sticky-top: var(
+    --m-group-list-nested-sticky-top,
+    var(--m-group-list-header-sticky-top, 0px)
+  );
+  --m-group-list-item-header-z: var(--m-group-list-nested-header-z, 7);
+  --m-group-list-child-list-sticky-top: calc(
+    var(--m-group-list-item-sticky-top) + var(--m-group-list-header-height)
+  );
+  --m-group-list-child-list-header-z: calc(
+    var(--m-group-list-item-header-z) - 1
+  );
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .t-card__header {
   position: sticky;
-  top: var(--m-group-list-header-sticky-top, 0px);
-  z-index: 7;
+  top: var(--m-group-list-item-sticky-top);
+  z-index: var(--m-group-list-item-header-z);
   background-color: var(--m-group-list-header-bg, #fff);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
-  top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
-  z-index: 6;
-}
 .m-fields-group-list .el-table__empty-block {
   width: 100%;
   min-height: 0;
@@ -507,7 +537,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
   position: sticky;
-  bottom: 0;
+  bottom: var(--m-group-list-nested-footer-bottom, 0px);
   z-index: 7;
   margin-bottom: 0;
   padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
@@ -521,10 +551,6 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
   height: var(--m-group-list-footer-button-height);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
-  bottom: var(--m-group-list-footer-height);
-  z-index: 7;
-}
 
 /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
 .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
@@ -1369,7 +1395,7 @@ fieldset.m-fieldset .m-form-tip {
   left: 40px;
   width: calc(100% - 40px);
   text-align: center;
-  background-color: rgba(252.5, 245.7, 235.5, 0.9);
+  background-color: rgba(99.0196078431%, 96.3529411765%, 92.3529411765%, 0.9);
   color: #e6a23c;
   padding: 5px 0;
   font-size: 12px;

package/dist/es/utils/editor.js

@@ -83,8 +83,10 @@ var removeConflictPosition = (style, primary, secondary) => {
 	const secondaryInvalid = isInvalid(secondaryValue);
 	if (primaryInvalid && !secondaryInvalid) delete style[primary];
 	else if (secondaryInvalid && !primaryInvalid) delete style[secondary];
-	else if (primaryInvalid && secondaryInvalid) if (secondaryValue === 0 && primaryValue !== 0) delete style[primary];
-	else delete style[secondary];
+	else if (primaryInvalid && secondaryInvalid) {
+		if (secondaryValue === 0 && primaryValue !== 0) delete style[primary];
+		else delete style[secondary];
+	}
 };
 var getInitPositionStyle = (style = {}, layout) => {
 	if (layout === Layout.ABSOLUTE) {

package/dist/style.css

@@ -478,18 +478,48 @@ fieldset.m-fieldset .m-form-tip {
   flex-shrink: 0;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item > .t-card__header {
+.m-fields-group-list > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: var(
+    --m-group-list-nested-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-footer-sticky > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: calc(
+    var(--m-group-list-nested-footer-bottom, 0px) +
+      var(--m-group-list-footer-height)
+  );
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list {
+  --m-group-list-nested-footer-bottom: var(
+    --m-group-list-item-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-header-sticky {
+  --m-group-list-nested-sticky-top: var(--m-group-list-child-list-sticky-top);
+  --m-group-list-nested-header-z: var(--m-group-list-child-list-header-z);
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item {
+  --m-group-list-item-sticky-top: var(
+    --m-group-list-nested-sticky-top,
+    var(--m-group-list-header-sticky-top, 0px)
+  );
+  --m-group-list-item-header-z: var(--m-group-list-nested-header-z, 7);
+  --m-group-list-child-list-sticky-top: calc(
+    var(--m-group-list-item-sticky-top) + var(--m-group-list-header-height)
+  );
+  --m-group-list-child-list-header-z: calc(
+    var(--m-group-list-item-header-z) - 1
+  );
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .t-card__header {
   position: sticky;
-  top: var(--m-group-list-header-sticky-top, 0px);
-  z-index: 7;
+  top: var(--m-group-list-item-sticky-top);
+  z-index: var(--m-group-list-item-header-z);
   background-color: var(--m-group-list-header-bg, #fff);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
-  top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
-  z-index: 6;
-}
 .m-fields-group-list .el-table__empty-block {
   width: 100%;
   min-height: 0;
@@ -507,7 +537,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
   position: sticky;
-  bottom: 0;
+  bottom: var(--m-group-list-nested-footer-bottom, 0px);
   z-index: 7;
   margin-bottom: 0;
   padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
@@ -521,10 +551,6 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
   height: var(--m-group-list-footer-button-height);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
-  bottom: var(--m-group-list-footer-height);
-  z-index: 7;
-}
 
 /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
 .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
@@ -1369,7 +1395,7 @@ fieldset.m-fieldset .m-form-tip {
   left: 40px;
   width: calc(100% - 40px);
   text-align: center;
-  background-color: rgba(252.5, 245.7, 235.5, 0.9);
+  background-color: rgba(99.0196078431%, 96.3529411765%, 92.3529411765%, 0.9);
   color: #e6a23c;
   padding: 5px 0;
   font-size: 12px;

package/dist/themes/magic-admin.css

@@ -509,18 +509,48 @@ fieldset.m-fieldset .m-form-tip {
   flex-shrink: 0;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item > .t-card__header {
+.m-fields-group-list > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: var(
+    --m-group-list-nested-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-footer-sticky > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: calc(
+    var(--m-group-list-nested-footer-bottom, 0px) +
+      var(--m-group-list-footer-height)
+  );
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list {
+  --m-group-list-nested-footer-bottom: var(
+    --m-group-list-item-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-header-sticky {
+  --m-group-list-nested-sticky-top: var(--m-group-list-child-list-sticky-top);
+  --m-group-list-nested-header-z: var(--m-group-list-child-list-header-z);
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item {
+  --m-group-list-item-sticky-top: var(
+    --m-group-list-nested-sticky-top,
+    var(--m-group-list-header-sticky-top, 0px)
+  );
+  --m-group-list-item-header-z: var(--m-group-list-nested-header-z, 7);
+  --m-group-list-child-list-sticky-top: calc(
+    var(--m-group-list-item-sticky-top) + var(--m-group-list-header-height)
+  );
+  --m-group-list-child-list-header-z: calc(
+    var(--m-group-list-item-header-z) - 1
+  );
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .t-card__header {
   position: sticky;
-  top: var(--m-group-list-header-sticky-top, 0px);
-  z-index: 7;
+  top: var(--m-group-list-item-sticky-top);
+  z-index: var(--m-group-list-item-header-z);
   background-color: var(--m-group-list-header-bg, #fff);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
-  top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
-  z-index: 6;
-}
 .m-fields-group-list .el-table__empty-block {
   width: 100%;
   min-height: 0;
@@ -538,7 +568,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
   position: sticky;
-  bottom: 0;
+  bottom: var(--m-group-list-nested-footer-bottom, 0px);
   z-index: 7;
   margin-bottom: 0;
   padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
@@ -552,10 +582,6 @@ fieldset.m-fieldset .m-form-tip {
   width: 100%;
   height: var(--m-group-list-footer-button-height);
 }
-.m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
-  bottom: var(--m-group-list-footer-height);
-  z-index: 7;
-}
 
 /** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
 .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
@@ -1455,7 +1481,7 @@ fieldset.m-fieldset .m-form-tip {
   left: 40px;
   width: calc(100% - 40px);
   text-align: center;
-  background-color: rgba(252.5, 245.7, 235.5, 0.9);
+  background-color: rgba(99.0196078431%, 96.3529411765%, 92.3529411765%, 0.9);
   color: #e6a23c;
   padding: 5px 0;
   font-size: 12px;