@tmagic/form 1.8.0-beta.26 → 1.8.0-beta.28

package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
+import { getGroupListHeaderVars } from "../utils/tableGroupList.js";
 import GroupListItem_default from "./GroupListItem.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, withCtx } from "vue";
 import { cloneDeep } from "lodash-es";
 //#region packages/form/src/containers/GroupList.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "m-fields-group-list" };
-var _hoisted_2 = ["innerHTML"];
-var _hoisted_3 = {
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = {
 	key: 1,
 	class: "el-table__empty-block"
 };
-var _hoisted_4 = { class: "el-table__empty-text t-table__empty" };
-var _hoisted_5 = { style: {
+var _hoisted_3 = { class: "el-table__empty-text t-table__empty" };
+var _hoisted_4 = { style: {
 	"display": "flex",
 	"justify-content": "flex-end",
 	"flex": "1"
@@ -54,6 +54,14 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		const asList = (value) => Array.isArray(value) ? value : [];
+		const headerVars = computed(() => getGroupListHeaderVars(props.config.header));
+		/**
+		* 取 `$slots` 而不是 `useSlots()`：宿主切换 `addable` 时插槽会增删，
+		* computed 缓存不随插槽变化失效，只有在渲染期读才拿得到最新的。
+		*/
+		const hasFooter = (slots) => !props.isCompare && Boolean(slots["toggle-button"] || slots["add-button"]);
+		/** 只有真的渲染出吸底 footer，内层列表才需要为它让位 */
+		const isFooterSticky = (slots) => hasFooter(slots) && Boolean(props.config.addButtonConfig?.sticky);
 		const currentList = computed(() => asList(props.model[props.name]));
 		/** 对比时按当前/历史较长一侧对齐，已删除的项也能渲染出来 */
 		const displayItems = computed(() => {
@@ -71,13 +79,19 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}));
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["m-fields-group-list", {
+					"is-header-sticky": Boolean(__props.config.header?.sticky),
+					"is-footer-sticky": isFooterSticky(_ctx.$slots)
+				}]),
+				style: normalizeStyle(headerVars.value)
+			}, [
 				__props.config.extra ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					innerHTML: __props.config.extra,
 					style: { "color": "rgba(0, 0, 0, 0.45)" }
-				}, null, 8, _hoisted_2)) : createCommentVNode("v-if", true),
-				!displayItems.value.length ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("span", _hoisted_4, "暂无" + toDisplayString(__props.config.titlePrefix || "") + "数据", 1)])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(displayItems.value, (entry) => {
+				}, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
+				!displayItems.value.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", _hoisted_3, "暂无" + toDisplayString(__props.config.titlePrefix || "") + "数据", 1)])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(displayItems.value, (entry) => {
 					return openBlock(), createBlock(GroupListItem_default, {
 						key: entry.index,
 						model: entry.item,
@@ -114,11 +128,11 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						"group-model"
 					]);
 				}), 128)),
-				!__props.isCompare && (_ctx.$slots["toggle-button"] || _ctx.$slots["add-button"]) ? (openBlock(), createElementBlock("div", {
+				hasFooter(_ctx.$slots) ? (openBlock(), createElementBlock("div", {
 					key: 3,
 					class: normalizeClass(["m-fields-group-list-footer", { "is-sticky-full": Boolean(__props.config.addButtonConfig?.sticky) }])
-				}, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "add-button")])], 2)) : createCommentVNode("v-if", true)
-			]);
+				}, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "add-button")])], 2)) : createCommentVNode("v-if", true)
+			], 6);
 		};
 	}
 });

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

@@ -199,7 +199,10 @@ var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				prop: props.prop,
 				postOptions
 			});
-			let initData = getValueByKeyPath(initRoot || root, res);
+			let initData;
+			try {
+				initData = getValueByKeyPath(initRoot || root, res);
+			} catch {}
 			if (initData) {
 				if (!Array.isArray(initData)) initData = [initData];
 				if (typeof option.item === "function") options = option.item(initData);
@@ -230,8 +233,12 @@ var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				const v = props.model[props.name];
 				if (Array.isArray(v) ? !v.length : typeof v === "undefined") return;
 				if (typeof v === "undefined" || hasOption(v)) return;
-				const data = await getInitOption();
-				setOptions(data);
+				try {
+					const data = await getInitOption();
+					setOptions(data);
+				} catch {
+					setOptions([]);
+				}
 			};
 			watch(() => props.model?.[props.name], () => {
 				initOption();
@@ -326,7 +333,7 @@ var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(options.value, (option) => {
 					return openBlock(), createBlock(resolveDynamicComponent(unref(optionComponent)?.component || "el-option"), mergeProps({
 						class: "tmagic-design-option",
-						key: __props.config.valueKey ? option.value[__props.config.valueKey] : option.value
+						key: __props.config.valueKey ? option.value?.[__props.config.valueKey] : option.value
 					}, { ref_for: true }, unref(optionComponent)?.props({
 						label: option.text,
 						value: option.value,

package/dist/es/style.css

@@ -333,18 +333,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;
@@ -362,7 +392,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);
@@ -376,10 +406,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 {

package/dist/es/utils/formStateProxy.js

@@ -30,6 +30,36 @@ var mergeFormContexts = (...layers) => {
 	});
 };
 /**
+* 存量下发配置沿用 Vue2 时代的写法，把回调第一个参数当组件实例用，靠 `vm.mForm.xxx`
+* 取表单状态。这类配置除了读，还会往上面挂方法做跨字段通信，例如：
+*
+* ```js
+* vm.mForm.checkPropertyLimit = async (...) => { ... }   // 一个字段的 validator 里挂
+* await vm.mForm.checkPropertyLimit(...)                 // 另一处再取出来调用
+* ```
+*
+* 所以 `mForm` 必须能指回某个 formState：读能落到 core / context，写能经 `set` trap
+* 落到 coreState 并持久化。
+*
+* 优先级是 core > context > 合成自引用，三者都是刻意的：
+*
+* - **core**：`formState.mForm = formState` 这类直写（如 FormPreview 用自建 services 时）
+*   必须最优先。
+* - **context**：唯一的生产者是把父 formState 整体当 context 传下来的嵌套表单
+*   （ComponentForm）。此时 `mForm` 命中 context 指向**父表单**，与 `extendState` 时代
+*   把父 formState 并入子状态的结果一致，跨字段通信仍落在同一份对象上。父 formState
+*   本身也是 Proxy，写入照样持久化，所以这里让 context 赢是对的，别「修正」成指向子表单。
+* - **合成自引用**：前两者都没有时才兜底，让 `vm.mForm.xxx = fn` 落到自己的 coreState。
+*
+* 由此推出一条约束：**不要往 context 里塞普通对象充当 `mForm`**。context 通常是 computed
+* 产物，依赖一变就重建，挂上去的方法会静默丢失。要么直写 core，要么什么都不放交给兜底。
+*
+* 枚举语义上合成的自引用表现得像原型链上的属性：`'mForm' in state` 为真，但不出现在
+* `Object.keys(state)` 里，`getOwnPropertyDescriptor` 也返回 undefined。这是故意的——
+* 按扩展字段打包 formState 的调用方（如发给 AI 的逻辑）会因循环引用炸掉。
+*/
+var SELF_REF_KEY = "mForm";
+/**
 * 将 coreState 与宿主业务上下文关联：读取时优先 core，miss 再读穿到 context。
 *
 * - `get` 用属性访问而非 `Reflect.get(t, k, receiver)`，避免破坏 Vue reactive 的 `__v_raw`；
@@ -42,19 +72,24 @@ var mergeFormContexts = (...layers) => {
 * 独立成文件，避免与 `form.ts` ↔ `typeMatch.ts` 形成循环依赖。
 */
 var createFormStateProxy = (coreState, getContext) => {
-	const resolve = () => (typeof getContext === "function" ? getContext() : unref(getContext)) || EMPTY_CONTEXT;
-	return new Proxy(coreState, {
+	const resolve = () => {
+		const ctx = (typeof getContext === "function" ? getContext() : unref(getContext)) || EMPTY_CONTEXT;
+		return ctx === proxy ? EMPTY_CONTEXT : ctx;
+	};
+	const proxy = new Proxy(coreState, {
 		get(t, k) {
 			if (typeof k === "symbol") return Reflect.get(t, k);
 			const v = t[k];
 			if (v !== void 0 || Reflect.has(t, k)) return v;
-			return resolve()[k];
+			const ctx = resolve();
+			if (k in ctx) return ctx[k];
+			return k === SELF_REF_KEY ? proxy : void 0;
 		},
 		set(t, k, value) {
 			t[k] = value;
 			return true;
 		},
-		has: (t, k) => Reflect.has(t, k) || typeof k !== "symbol" && k in resolve(),
+		has: (t, k) => Reflect.has(t, k) || typeof k !== "symbol" && (k in resolve() || k === SELF_REF_KEY),
 		ownKeys: (t) => [.../* @__PURE__ */ new Set([...Reflect.ownKeys(t), ...Reflect.ownKeys(resolve()).filter((k) => typeof k !== "symbol")])],
 		getOwnPropertyDescriptor: (t, k) => {
 			const own = Reflect.getOwnPropertyDescriptor(t, k);
@@ -70,6 +105,7 @@ var createFormStateProxy = (coreState, getContext) => {
 			};
 		}
 	});
+	return proxy;
 };
 //#endregion
 export { createFormStateProxy, mergeFormContexts };

package/dist/es/utils/tableGroupList.js

@@ -1,4 +1,5 @@
 import { cloneDeep } from "lodash-es";
+import { isNumber } from "@tmagic/utils";
 //#region packages/form/src/utils/tableGroupList.ts
 /**
 * table / group-list 是同一份配置的两种展示形态，可以互相切换（`TableGroupList.vue`）。
@@ -9,6 +10,24 @@ import { cloneDeep } from "lodash-es";
 */
 /** group-list 形态的 type（兼容驼峰与中划线两种写法） */
 var isGroupListType = (type) => type === "groupList" || type === "group-list";
+/**
+* 归一成带单位的 CSS 长度。
+*
+* 配置常常来自 JSON 或表单输入，`'48'` 这类无单位数字串很常见；直接写进 CSS 变量会让
+* 嵌套层的 `calc()` 整体失效、吸顶静默失灵，所以纯数字一律补 `px`。
+*/
+var toCssLength = (height) => {
+	const value = `${height ?? ""}`.trim();
+	if (!value) return void 0;
+	if (isNumber(value)) return `${value}px`;
+	return typeof height === "number" ? void 0 : value;
+};
+/** header.sticky 开启时把 height 写成 CSS 变量，给嵌套吸顶偏移用 */
+var getGroupListHeaderVars = (header) => {
+	if (!header?.sticky) return void 0;
+	const height = toCssLength(header.height);
+	return height ? { "--m-group-list-header-height": height } : void 0;
+};
 /** 按 label 文案长度估算 label 宽度（中文按 20px、其他按 8px，最小 80px） */
 var calcLabelWidth = (label) => {
 	if (!label) return "0px";
@@ -82,4 +101,4 @@ var makeTableColumnConfig = (column, row) => {
 	return newConfig;
 };
 //#endregion
-export { calcLabelWidth, getGroupListRowConfig, isGroupListType, isTableColumnRendered, makeTableColumnConfig, toGroupListConfig, toTableConfig };
+export { calcLabelWidth, getGroupListHeaderVars, getGroupListRowConfig, isGroupListType, isTableColumnRendered, makeTableColumnConfig, toGroupListConfig, toTableConfig };

package/dist/style.css

@@ -333,18 +333,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;
@@ -362,7 +392,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);
@@ -376,10 +406,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 {

package/dist/themes/magic-admin.css

@@ -333,18 +333,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;
@@ -362,7 +392,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);
@@ -376,10 +406,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 {

package/dist/tmagic-form-headless.umd.cjs

@@ -2557,6 +2557,36 @@
 		});
 	};
 	/**
+	* 存量下发配置沿用 Vue2 时代的写法，把回调第一个参数当组件实例用，靠 `vm.mForm.xxx`
+	* 取表单状态。这类配置除了读，还会往上面挂方法做跨字段通信，例如：
+	*
+	* ```js
+	* vm.mForm.checkPropertyLimit = async (...) => { ... }   // 一个字段的 validator 里挂
+	* await vm.mForm.checkPropertyLimit(...)                 // 另一处再取出来调用
+	* ```
+	*
+	* 所以 `mForm` 必须能指回某个 formState：读能落到 core / context，写能经 `set` trap
+	* 落到 coreState 并持久化。
+	*
+	* 优先级是 core > context > 合成自引用，三者都是刻意的：
+	*
+	* - **core**：`formState.mForm = formState` 这类直写（如 FormPreview 用自建 services 时）
+	*   必须最优先。
+	* - **context**：唯一的生产者是把父 formState 整体当 context 传下来的嵌套表单
+	*   （ComponentForm）。此时 `mForm` 命中 context 指向**父表单**，与 `extendState` 时代
+	*   把父 formState 并入子状态的结果一致，跨字段通信仍落在同一份对象上。父 formState
+	*   本身也是 Proxy，写入照样持久化，所以这里让 context 赢是对的，别「修正」成指向子表单。
+	* - **合成自引用**：前两者都没有时才兜底，让 `vm.mForm.xxx = fn` 落到自己的 coreState。
+	*
+	* 由此推出一条约束：**不要往 context 里塞普通对象充当 `mForm`**。context 通常是 computed
+	* 产物，依赖一变就重建，挂上去的方法会静默丢失。要么直写 core，要么什么都不放交给兜底。
+	*
+	* 枚举语义上合成的自引用表现得像原型链上的属性：`'mForm' in state` 为真，但不出现在
+	* `Object.keys(state)` 里，`getOwnPropertyDescriptor` 也返回 undefined。这是故意的——
+	* 按扩展字段打包 formState 的调用方（如发给 AI 的逻辑）会因循环引用炸掉。
+	*/
+	var SELF_REF_KEY = "mForm";
+	/**
 	* 将 coreState 与宿主业务上下文关联：读取时优先 core，miss 再读穿到 context。
 	*
 	* - `get` 用属性访问而非 `Reflect.get(t, k, receiver)`，避免破坏 Vue reactive 的 `__v_raw`；
@@ -2569,19 +2599,24 @@
 	* 独立成文件，避免与 `form.ts` ↔ `typeMatch.ts` 形成循环依赖。
 	*/
 	var createFormStateProxy = (coreState, getContext) => {
-		const resolve = () => (typeof getContext === "function" ? getContext() : (0, vue.unref)(getContext)) || EMPTY_CONTEXT;
-		return new Proxy(coreState, {
+		const resolve = () => {
+			const ctx = (typeof getContext === "function" ? getContext() : (0, vue.unref)(getContext)) || EMPTY_CONTEXT;
+			return ctx === proxy ? EMPTY_CONTEXT : ctx;
+		};
+		const proxy = new Proxy(coreState, {
 			get(t, k) {
 				if (typeof k === "symbol") return Reflect.get(t, k);
 				const v = t[k];
 				if (v !== void 0 || Reflect.has(t, k)) return v;
-				return resolve()[k];
+				const ctx = resolve();
+				if (k in ctx) return ctx[k];
+				return k === SELF_REF_KEY ? proxy : void 0;
 			},
 			set(t, k, value) {
 				t[k] = value;
 				return true;
 			},
-			has: (t, k) => Reflect.has(t, k) || typeof k !== "symbol" && k in resolve(),
+			has: (t, k) => Reflect.has(t, k) || typeof k !== "symbol" && (k in resolve() || k === SELF_REF_KEY),
 			ownKeys: (t) => [.../* @__PURE__ */ new Set([...Reflect.ownKeys(t), ...Reflect.ownKeys(resolve()).filter((k) => typeof k !== "symbol")])],
 			getOwnPropertyDescriptor: (t, k) => {
 				const own = Reflect.getOwnPropertyDescriptor(t, k);
@@ -2597,6 +2632,7 @@
 				};
 			}
 		});
+		return proxy;
 	};
 	//#endregion
 	//#region packages/form/src/utils/form.ts

package/dist/tmagic-form.umd.cjs

@@ -3411,6 +3411,36 @@
 		});
 	};
 	/**
+	* 存量下发配置沿用 Vue2 时代的写法，把回调第一个参数当组件实例用，靠 `vm.mForm.xxx`
+	* 取表单状态。这类配置除了读，还会往上面挂方法做跨字段通信，例如：
+	*
+	* ```js
+	* vm.mForm.checkPropertyLimit = async (...) => { ... }   // 一个字段的 validator 里挂
+	* await vm.mForm.checkPropertyLimit(...)                 // 另一处再取出来调用
+	* ```
+	*
+	* 所以 `mForm` 必须能指回某个 formState：读能落到 core / context，写能经 `set` trap
+	* 落到 coreState 并持久化。
+	*
+	* 优先级是 core > context > 合成自引用，三者都是刻意的：
+	*
+	* - **core**：`formState.mForm = formState` 这类直写（如 FormPreview 用自建 services 时）
+	*   必须最优先。
+	* - **context**：唯一的生产者是把父 formState 整体当 context 传下来的嵌套表单
+	*   （ComponentForm）。此时 `mForm` 命中 context 指向**父表单**，与 `extendState` 时代
+	*   把父 formState 并入子状态的结果一致，跨字段通信仍落在同一份对象上。父 formState
+	*   本身也是 Proxy，写入照样持久化，所以这里让 context 赢是对的，别「修正」成指向子表单。
+	* - **合成自引用**：前两者都没有时才兜底，让 `vm.mForm.xxx = fn` 落到自己的 coreState。
+	*
+	* 由此推出一条约束：**不要往 context 里塞普通对象充当 `mForm`**。context 通常是 computed
+	* 产物，依赖一变就重建，挂上去的方法会静默丢失。要么直写 core，要么什么都不放交给兜底。
+	*
+	* 枚举语义上合成的自引用表现得像原型链上的属性：`'mForm' in state` 为真，但不出现在
+	* `Object.keys(state)` 里，`getOwnPropertyDescriptor` 也返回 undefined。这是故意的——
+	* 按扩展字段打包 formState 的调用方（如发给 AI 的逻辑）会因循环引用炸掉。
+	*/
+	var SELF_REF_KEY = "mForm";
+	/**
 	* 将 coreState 与宿主业务上下文关联：读取时优先 core，miss 再读穿到 context。
 	*
 	* - `get` 用属性访问而非 `Reflect.get(t, k, receiver)`，避免破坏 Vue reactive 的 `__v_raw`；
@@ -3423,19 +3453,24 @@
 	* 独立成文件，避免与 `form.ts` ↔ `typeMatch.ts` 形成循环依赖。
 	*/
 	var createFormStateProxy = (coreState, getContext) => {
-		const resolve = () => (typeof getContext === "function" ? getContext() : (0, vue.unref)(getContext)) || EMPTY_CONTEXT;
-		return new Proxy(coreState, {
+		const resolve = () => {
+			const ctx = (typeof getContext === "function" ? getContext() : (0, vue.unref)(getContext)) || EMPTY_CONTEXT;
+			return ctx === proxy ? EMPTY_CONTEXT : ctx;
+		};
+		const proxy = new Proxy(coreState, {
 			get(t, k) {
 				if (typeof k === "symbol") return Reflect.get(t, k);
 				const v = t[k];
 				if (v !== void 0 || Reflect.has(t, k)) return v;
-				return resolve()[k];
+				const ctx = resolve();
+				if (k in ctx) return ctx[k];
+				return k === SELF_REF_KEY ? proxy : void 0;
 			},
 			set(t, k, value) {
 				t[k] = value;
 				return true;
 			},
-			has: (t, k) => Reflect.has(t, k) || typeof k !== "symbol" && k in resolve(),
+			has: (t, k) => Reflect.has(t, k) || typeof k !== "symbol" && (k in resolve() || k === SELF_REF_KEY),
 			ownKeys: (t) => [.../* @__PURE__ */ new Set([...Reflect.ownKeys(t), ...Reflect.ownKeys(resolve()).filter((k) => typeof k !== "symbol")])],
 			getOwnPropertyDescriptor: (t, k) => {
 				const own = Reflect.getOwnPropertyDescriptor(t, k);
@@ -3451,6 +3486,7 @@
 				};
 			}
 		});
+		return proxy;
 	};
 	//#endregion
 	//#region packages/form/src/utils/form.ts
@@ -3759,6 +3795,24 @@
 	*/
 	/** group-list 形态的 type（兼容驼峰与中划线两种写法） */
 	var isGroupListType = (type) => type === "groupList" || type === "group-list";
+	/**
+	* 归一成带单位的 CSS 长度。
+	*
+	* 配置常常来自 JSON 或表单输入，`'48'` 这类无单位数字串很常见；直接写进 CSS 变量会让
+	* 嵌套层的 `calc()` 整体失效、吸顶静默失灵，所以纯数字一律补 `px`。
+	*/
+	var toCssLength = (height) => {
+		const value = `${height ?? ""}`.trim();
+		if (!value) return void 0;
+		if ((0, _tmagic_utils.isNumber)(value)) return `${value}px`;
+		return typeof height === "number" ? void 0 : value;
+	};
+	/** header.sticky 开启时把 height 写成 CSS 变量，给嵌套吸顶偏移用 */
+	var getGroupListHeaderVars = (header) => {
+		if (!header?.sticky) return void 0;
+		const height = toCssLength(header.height);
+		return height ? { "--m-group-list-header-height": height } : void 0;
+	};
 	/** 按 label 文案长度估算 label 宽度（中文按 20px、其他按 8px，最小 80px） */
 	var calcLabelWidth = (label) => {
 		if (!label) return "0px";
@@ -4689,7 +4743,7 @@
 	};
 	var _hoisted_3$7 = ["innerHTML"];
 	var _hoisted_4$6 = ["innerHTML"];
-	var _hoisted_5$5 = ["innerHTML"];
+	var _hoisted_5$4 = ["innerHTML"];
 	var _hoisted_6$3 = ["innerHTML"];
 	var _hoisted_7$2 = ["innerHTML"];
 	var _hoisted_8$2 = ["innerHTML"];
@@ -5044,7 +5098,7 @@
 							key: 0,
 							placement: tooltip.value.placement
 						}, {
-							content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_5$5)]),
+							content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_5$4)]),
 							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(tagName.value), (0, vue.mergeProps)(fieldsProps.value, {
 								model: __props.model,
 								"last-values": __props.lastValues,
@@ -6442,7 +6496,7 @@
 	var _hoisted_2$7 = ["innerHTML"];
 	var _hoisted_3$6 = { key: 1 };
 	var _hoisted_4$5 = ["innerHTML"];
-	var _hoisted_5$4 = ["innerHTML"];
+	var _hoisted_5$3 = ["innerHTML"];
 	var _hoisted_6$2 = {
 		key: 2,
 		style: { "display": "flex" }
@@ -6533,7 +6587,7 @@
 					key: 0,
 					innerHTML: __props.config.extra,
 					class: "m-form-tip"
-				}, null, 8, _hoisted_5$4)) : (0, vue.createCommentVNode)("v-if", true)])), __props.config.schematic && show.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$2, [(0, vue.createElementVNode)("div", _hoisted_7$1, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.config.items, (item, index) => {
+				}, null, 8, _hoisted_5$3)) : (0, vue.createCommentVNode)("v-if", true)])), __props.config.schematic && show.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6$2, [(0, vue.createElementVNode)("div", _hoisted_7$1, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.config.items, (item, index) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)(Container_default, {
 						key: key(item, index),
 						model: name.value ? __props.model[name.value] : __props.model,
@@ -6671,7 +6725,7 @@
 		style: { "display": "flex" }
 	};
 	var _hoisted_4$4 = { style: { "flex": "1" } };
-	var _hoisted_5$3 = ["src"];
+	var _hoisted_5$2 = ["src"];
 	//#endregion
 	//#region packages/form/src/containers/Panel.vue
 	var Panel_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -6764,7 +6818,7 @@
 					}), 128))]), (0, vue.createElementVNode)("img", {
 						class: "m-form-schematic",
 						src: __props.config.schematic
-					}, null, 8, _hoisted_5$3)])) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(items.value, (item, index) => {
+					}, null, 8, _hoisted_5$2)])) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(items.value, (item, index) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(Container_default, {
 							key: item[(0, vue.unref)(mForm)?.keyProp || "__key"] ?? index,
 							config: item,
@@ -7122,7 +7176,7 @@
 	var _hoisted_2$5 = { class: "m-fields-group-list-item-title" };
 	var _hoisted_3$4 = ["innerHTML"];
 	var _hoisted_4$3 = { class: "m-fields-group-list-item-actions" };
-	var _hoisted_5$2 = { style: {
+	var _hoisted_5$1 = { style: {
 		"text-align": "right",
 		"margin-top": "20px"
 	} };
@@ -7287,7 +7341,7 @@
 										disabled: __props.disabled
 									}, null, 8, ["modelValue", "disabled"]),
 									_cache[11] || (_cache[11] = (0, vue.createTextVNode)("行 ", -1))
-								]), (0, vue.createElementVNode)("div", _hoisted_5$2, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+								]), (0, vue.createElementVNode)("div", _hoisted_5$1, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 									size: "small",
 									text: "",
 									onClick: _cache[4] || (_cache[4] = ($event) => moveSpecifyLocationVisible.value = false)
@@ -7357,14 +7411,13 @@
 	});
 	//#endregion
 	//#region packages/form/src/containers/GroupList.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$8 = { class: "m-fields-group-list" };
-	var _hoisted_2$4 = ["innerHTML"];
-	var _hoisted_3$3 = {
+	var _hoisted_1$8 = ["innerHTML"];
+	var _hoisted_2$4 = {
 		key: 1,
 		class: "el-table__empty-block"
 	};
-	var _hoisted_4$2 = { class: "el-table__empty-text t-table__empty" };
-	var _hoisted_5$1 = { style: {
+	var _hoisted_3$3 = { class: "el-table__empty-text t-table__empty" };
+	var _hoisted_4$2 = { style: {
 		"display": "flex",
 		"justify-content": "flex-end",
 		"flex": "1"
@@ -7411,6 +7464,14 @@
 			};
 			const onAddDiffCount = () => emit("addDiffCount");
 			const asList = (value) => Array.isArray(value) ? value : [];
+			const headerVars = (0, vue.computed)(() => getGroupListHeaderVars(props.config.header));
+			/**
+			* 取 `$slots` 而不是 `useSlots()`：宿主切换 `addable` 时插槽会增删，
+			* computed 缓存不随插槽变化失效，只有在渲染期读才拿得到最新的。
+			*/
+			const hasFooter = (slots) => !props.isCompare && Boolean(slots["toggle-button"] || slots["add-button"]);
+			/** 只有真的渲染出吸底 footer，内层列表才需要为它让位 */
+			const isFooterSticky = (slots) => hasFooter(slots) && Boolean(props.config.addButtonConfig?.sticky);
 			const currentList = (0, vue.computed)(() => asList(props.model[props.name]));
 			/** 对比时按当前/历史较长一侧对齐，已删除的项也能渲染出来 */
 			const displayItems = (0, vue.computed)(() => {
@@ -7428,13 +7489,19 @@
 				}));
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$8, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					class: (0, vue.normalizeClass)(["m-fields-group-list", {
+						"is-header-sticky": Boolean(__props.config.header?.sticky),
+						"is-footer-sticky": isFooterSticky(_ctx.$slots)
+					}]),
+					style: (0, vue.normalizeStyle)(headerVars.value)
+				}, [
 					__props.config.extra ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 						key: 0,
 						innerHTML: __props.config.extra,
 						style: { "color": "rgba(0, 0, 0, 0.45)" }
-					}, null, 8, _hoisted_2$4)) : (0, vue.createCommentVNode)("v-if", true),
-					!displayItems.value.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$3, [(0, vue.createElementVNode)("span", _hoisted_4$2, "暂无" + (0, vue.toDisplayString)(__props.config.titlePrefix || "") + "数据", 1)])) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, (0, vue.renderList)(displayItems.value, (entry) => {
+					}, null, 8, _hoisted_1$8)) : (0, vue.createCommentVNode)("v-if", true),
+					!displayItems.value.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$4, [(0, vue.createElementVNode)("span", _hoisted_3$3, "暂无" + (0, vue.toDisplayString)(__props.config.titlePrefix || "") + "数据", 1)])) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, (0, vue.renderList)(displayItems.value, (entry) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(GroupListItem_default, {
 							key: entry.index,
 							model: entry.item,
@@ -7471,11 +7538,11 @@
 							"group-model"
 						]);
 					}), 128)),
-					!__props.isCompare && (_ctx.$slots["toggle-button"] || _ctx.$slots["add-button"]) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					hasFooter(_ctx.$slots) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 						key: 3,
 						class: (0, vue.normalizeClass)(["m-fields-group-list-footer", { "is-sticky-full": Boolean(__props.config.addButtonConfig?.sticky) }])
-					}, [(0, vue.renderSlot)(_ctx.$slots, "toggle-button"), (0, vue.createElementVNode)("div", _hoisted_5$1, [(0, vue.renderSlot)(_ctx.$slots, "add-button")])], 2)) : (0, vue.createCommentVNode)("v-if", true)
-				]);
+					}, [(0, vue.renderSlot)(_ctx.$slots, "toggle-button"), (0, vue.createElementVNode)("div", _hoisted_4$2, [(0, vue.renderSlot)(_ctx.$slots, "add-button")])], 2)) : (0, vue.createCommentVNode)("v-if", true)
+				], 6);
 			};
 		}
 	});
@@ -9882,7 +9949,10 @@
 					prop: props.prop,
 					postOptions
 				});
-				let initData = (0, _tmagic_utils.getValueByKeyPath)(initRoot || root, res);
+				let initData;
+				try {
+					initData = (0, _tmagic_utils.getValueByKeyPath)(initRoot || root, res);
+				} catch {}
 				if (initData) {
 					if (!Array.isArray(initData)) initData = [initData];
 					if (typeof option.item === "function") options = option.item(initData);
@@ -9913,8 +9983,12 @@
 					const v = props.model[props.name];
 					if (Array.isArray(v) ? !v.length : typeof v === "undefined") return;
 					if (typeof v === "undefined" || hasOption(v)) return;
-					const data = await getInitOption();
-					setOptions(data);
+					try {
+						const data = await getInitOption();
+						setOptions(data);
+					} catch {
+						setOptions([]);
+					}
 				};
 				(0, vue.watch)(() => props.model?.[props.name], () => {
 					initOption();
@@ -10009,7 +10083,7 @@
 					}), 128)) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(options.value, (option) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(optionComponent)?.component || "el-option"), (0, vue.mergeProps)({
 							class: "tmagic-design-option",
-							key: __props.config.valueKey ? option.value[__props.config.valueKey] : option.value
+							key: __props.config.valueKey ? option.value?.[__props.config.valueKey] : option.value
 						}, { ref_for: true }, (0, vue.unref)(optionComponent)?.props({
 							label: option.text,
 							value: option.value,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.26",
+  "version": "1.8.0-beta.28",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -58,9 +58,9 @@
   "peerDependencies": {
     "typescript": "^6.0.3",
     "vue": "^3.5.41",
-    "@tmagic/design": "1.8.0-beta.26",
-    "@tmagic/utils": "1.8.0-beta.26",
-    "@tmagic/form-schema": "1.8.0-beta.26"
+    "@tmagic/design": "1.8.0-beta.28",
+    "@tmagic/utils": "1.8.0-beta.28",
+    "@tmagic/form-schema": "1.8.0-beta.28"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/GroupList.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="m-fields-group-list">
+  <div
+    class="m-fields-group-list"
+    :class="{
+      'is-header-sticky': Boolean(config.header?.sticky),
+      'is-footer-sticky': isFooterSticky($slots),
+    }"
+    :style="headerVars"
+  >
     <div v-if="config.extra" v-html="config.extra" style="color: rgba(0, 0, 0, 0.45)"></div>
     <div v-if="!displayItems.length" class="el-table__empty-block">
       <span class="el-table__empty-text t-table__empty">暂无{{ config.titlePrefix || '' }}数据</span>
@@ -34,7 +41,7 @@
     <div
       class="m-fields-group-list-footer"
       :class="{ 'is-sticky-full': Boolean(config.addButtonConfig?.sticky) }"
-      v-if="!isCompare && ($slots['toggle-button'] || $slots['add-button'])"
+      v-if="hasFooter($slots)"
     >
       <slot name="toggle-button"></slot>
       <div style="display: flex; justify-content: flex-end; flex: 1">
@@ -49,6 +56,7 @@ import { computed } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { ContainerChangeEventData, GroupListConfig } from '../schema';
+import { getGroupListHeaderVars } from '../utils/tableGroupList';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
 
@@ -104,6 +112,19 @@ const onAddDiffCount = () => emit('addDiffCount');
 
 const asList = (value: unknown): any[] => (Array.isArray(value) ? value : []);
 
+const headerVars = computed(() => getGroupListHeaderVars(props.config.header));
+
+/**
+ * 取 `$slots` 而不是 `useSlots()`：宿主切换 `addable` 时插槽会增删，
+ * computed 缓存不随插槽变化失效，只有在渲染期读才拿得到最新的。
+ */
+const hasFooter = (slots: Record<string, unknown>) =>
+  !props.isCompare && Boolean(slots['toggle-button'] || slots['add-button']);
+
+/** 只有真的渲染出吸底 footer，内层列表才需要为它让位 */
+const isFooterSticky = (slots: Record<string, unknown>) =>
+  hasFooter(slots) && Boolean(props.config.addButtonConfig?.sticky);
+
 const currentList = computed(() => asList(props.model[props.name]));
 
 /** 对比时按当前/历史较长一侧对齐，已删除的项也能渲染出来 */

package/src/fields/Select.vue

@@ -57,7 +57,7 @@
       <component
         v-for="option in options as SelectOption[]"
         class="tmagic-design-option"
-        :key="config.valueKey ? option.value[config.valueKey] : option.value"
+        :key="config.valueKey ? option.value?.[config.valueKey] : option.value"
         :is="optionComponent?.component || 'el-option'"
         v-bind="
           optionComponent?.props({
@@ -372,7 +372,12 @@ const getInitOption = async () => {
     });
   }
 
-  let initData = getValueByKeyPath(initRoot || root, res);
+  let initData: any;
+  try {
+    initData = getValueByKeyPath(initRoot || root, res);
+  } catch {
+    // 响应中不存在 initRoot/root 路径时按无数据处理
+  }
   if (initData) {
     if (!Array.isArray(initData)) {
       initData = [initData];
@@ -417,8 +422,12 @@ if (typeof props.config.options === 'function') {
     const v = props.model[props.name];
     if (Array.isArray(v) ? !v.length : typeof v === 'undefined') return;
     if (typeof v === 'undefined' || hasOption(v)) return;
-    const data = await getInitOption();
-    setOptions(data);
+    try {
+      const data = await getInitOption();
+      setOptions(data);
+    } catch {
+      setOptions([]);
+    }
   };
 
   watch(

package/src/theme/group-list.scss

@@ -70,27 +70,60 @@
       flex-shrink: 0;
       gap: 8px;
     }
+  }
 
-    // 卡片标题吸顶；补不透明背景，避免滚动时正文透出。
-    // z-index 必须低于吸底 footer，否则标题会盖住「新增」按钮。
-    > .el-card__header,
-    > .t-card__header {
-      position: sticky;
-      top: var(--m-group-list-header-sticky-top, 0px);
-      z-index: 7;
-      background-color: var(--m-group-list-header-bg, #fff);
-    }
+  // 嵌套吸底按钮叠在外层 footer 之上（如「新增条件」叠在「新增条件组」上面）。
+  // 每穿过一层「自己渲染了吸底 footer」的列表才多让出一个 footer 高度，外层没有吸底按钮时
+  // 内层不能凭空抬高。自定义属性不能自增，所以用 item / list 两个变量交替接力。
+  > .m-fields-group-list-item {
+    --m-group-list-item-footer-bottom: var(
+      --m-group-list-nested-footer-bottom,
+      0px
+    );
+  }
+
+  &.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-item .m-fields-group-list-item {
-    > .el-card__header,
-    > .t-card__header {
-      top: calc(
-        var(--m-group-list-header-sticky-top, 0px) +
-          var(--m-group-list-header-height)
+  .m-fields-group-list-item .m-fields-group-list {
+    --m-group-list-nested-footer-bottom: var(
+      --m-group-list-item-footer-bottom,
+      0px
+    );
+  }
+
+  // 仅 header.sticky 时标题吸顶；直接子 item，避免外层吸顶带动未开启的内层
+  &.is-header-sticky {
+    // 从外层 item 接过已累加的偏移；最外层没有该变量时走 fallback
+    --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-item {
+      --m-group-list-item-sticky-top: var(
+        --m-group-list-nested-sticky-top,
+        var(--m-group-list-header-sticky-top, 0px)
       );
-      z-index: 6;
+      --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
+      );
+
+      // 卡片标题吸顶；补不透明背景，避免滚动时正文透出。
+      // z-index 必须低于吸底 footer，否则标题会盖住「新增」按钮。
+      > .el-card__header,
+      > .t-card__header {
+        position: sticky;
+        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);
+      }
     }
   }
 
@@ -113,10 +146,10 @@
   }
 
   // 吸底全宽主按钮（event-select / code-select / display-conds 外层列表）
-  // z-index 高于 item header，避免吸顶标题挡住新增按钮
+  // z-index 高于 item header，避免吸顶标题挡住新增按钮；多层时 bottom 由内层 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
@@ -133,14 +166,6 @@
       height: var(--m-group-list-footer-button-height);
     }
   }
-
-  // 嵌套吸底按钮叠在外层 footer 之上（如「新增条件」叠在「新增条件组」上面）
-  .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可以实现 */

package/src/utils/formStateProxy.ts

@@ -56,6 +56,37 @@ export const mergeFormContexts = (...layers: (FormContext | undefined | null)[])
   }) as FormContext;
 };
 
+/**
+ * 存量下发配置沿用 Vue2 时代的写法，把回调第一个参数当组件实例用，靠 `vm.mForm.xxx`
+ * 取表单状态。这类配置除了读，还会往上面挂方法做跨字段通信，例如：
+ *
+ * ```js
+ * vm.mForm.checkPropertyLimit = async (...) => { ... }   // 一个字段的 validator 里挂
+ * await vm.mForm.checkPropertyLimit(...)                 // 另一处再取出来调用
+ * ```
+ *
+ * 所以 `mForm` 必须能指回某个 formState：读能落到 core / context，写能经 `set` trap
+ * 落到 coreState 并持久化。
+ *
+ * 优先级是 core > context > 合成自引用，三者都是刻意的：
+ *
+ * - **core**：`formState.mForm = formState` 这类直写（如 FormPreview 用自建 services 时）
+ *   必须最优先。
+ * - **context**：唯一的生产者是把父 formState 整体当 context 传下来的嵌套表单
+ *   （ComponentForm）。此时 `mForm` 命中 context 指向**父表单**，与 `extendState` 时代
+ *   把父 formState 并入子状态的结果一致，跨字段通信仍落在同一份对象上。父 formState
+ *   本身也是 Proxy，写入照样持久化，所以这里让 context 赢是对的，别「修正」成指向子表单。
+ * - **合成自引用**：前两者都没有时才兜底，让 `vm.mForm.xxx = fn` 落到自己的 coreState。
+ *
+ * 由此推出一条约束：**不要往 context 里塞普通对象充当 `mForm`**。context 通常是 computed
+ * 产物，依赖一变就重建，挂上去的方法会静默丢失。要么直写 core，要么什么都不放交给兜底。
+ *
+ * 枚举语义上合成的自引用表现得像原型链上的属性：`'mForm' in state` 为真，但不出现在
+ * `Object.keys(state)` 里，`getOwnPropertyDescriptor` 也返回 undefined。这是故意的——
+ * 按扩展字段打包 formState 的调用方（如发给 AI 的逻辑）会因循环引用炸掉。
+ */
+const SELF_REF_KEY = 'mForm';
+
 /**
  * 将 coreState 与宿主业务上下文关联：读取时优先 core，miss 再读穿到 context。
  *
@@ -72,21 +103,33 @@ export const createFormStateProxy = (
   coreState: FormState,
   getContext: (() => FormContext) | Ref<FormContext>,
 ): FormState => {
-  const resolve = (): Record<string | symbol, any> =>
-    (typeof getContext === 'function' ? getContext() : unref(getContext)) || EMPTY_CONTEXT;
+  const resolve = (): Record<string | symbol, any> => {
+    const ctx = (typeof getContext === 'function' ? getContext() : unref(getContext)) || EMPTY_CONTEXT;
+    // 把 formState 自己当 context 传回来（`:context="formState"`）会让 get / has 无限递归，
+    // 直接爆栈。这种自引用本就提供不了任何额外字段，断掉即可。
+    return ctx === proxy ? EMPTY_CONTEXT : ctx;
+  };
 
-  return new Proxy(coreState as object, {
+  const proxy = new Proxy(coreState as object, {
     get(t, k) {
       if (typeof k === 'symbol') return Reflect.get(t, k);
       const v = (t as any)[k];
       if (v !== undefined || Reflect.has(t, k)) return v;
-      return resolve()[k];
+
+      const ctx = resolve();
+      if (k in ctx) return ctx[k];
+      // 自引用不进 ownKeys：枚举 formState 的调用方（如按扩展字段打包发给 AI 的逻辑）
+      // 会因为循环引用炸掉，这里只在显式读取时才合成
+      return k === SELF_REF_KEY ? proxy : undefined;
     },
     set(t, k, value) {
       (t as any)[k] = value;
       return true;
     },
-    has: (t, k) => Reflect.has(t, k) || (typeof k !== 'symbol' && k in resolve()),
+    // `mForm` 在这里为真，但不进 ownKeys、getOwnPropertyDescriptor 也返回 undefined
+    // （见 SELF_REF_KEY 注释）。因此展开 / Object.entries 不会循环引用，
+    // 但对 proxy 直接做递归遍历（`for...in`、深拷贝、直接 JSON.stringify(formState)）仍会。
+    has: (t, k) => Reflect.has(t, k) || (typeof k !== 'symbol' && (k in resolve() || k === SELF_REF_KEY)),
     ownKeys: (t) => [
       ...new Set([...Reflect.ownKeys(t), ...Reflect.ownKeys(resolve()).filter((k) => typeof k !== 'symbol')]),
     ],
@@ -101,4 +144,6 @@ export const createFormStateProxy = (
       return { configurable: true, enumerable: true, writable: true, value: ctx[k] };
     },
   }) as FormState;
+
+  return proxy;
 };

package/src/utils/tableGroupList.ts

@@ -18,7 +18,9 @@
 
 import { cloneDeep } from 'lodash-es';
 
-import type { GroupListConfig, TableColumnConfig, TableConfig } from '../schema';
+import { isNumber } from '@tmagic/utils';
+
+import type { GroupListConfig, GroupListHeaderConfig, TableColumnConfig, TableConfig } from '../schema';
 
 /**
  * table / group-list 是同一份配置的两种展示形态，可以互相切换（`TableGroupList.vue`）。
@@ -31,6 +33,31 @@ import type { GroupListConfig, TableColumnConfig, TableConfig } from '../schema'
 /** group-list 形态的 type（兼容驼峰与中划线两种写法） */
 export const isGroupListType = (type: unknown): boolean => type === 'groupList' || type === 'group-list';
 
+/**
+ * 归一成带单位的 CSS 长度。
+ *
+ * 配置常常来自 JSON 或表单输入，`'48'` 这类无单位数字串很常见；直接写进 CSS 变量会让
+ * 嵌套层的 `calc()` 整体失效、吸顶静默失灵，所以纯数字一律补 `px`。
+ */
+const toCssLength = (height: number | string | undefined): string | undefined => {
+  const value = `${height ?? ''}`.trim();
+  if (!value) return undefined;
+
+  if (isNumber(value)) return `${value}px`;
+  // 走到这里还是 number 的只剩 NaN / Infinity，不写变量，交给样式默认值兜底
+  return typeof height === 'number' ? undefined : value;
+};
+
+/** header.sticky 开启时把 height 写成 CSS 变量，给嵌套吸顶偏移用 */
+export const getGroupListHeaderVars = (
+  header: GroupListHeaderConfig | undefined,
+): Record<string, string> | undefined => {
+  if (!header?.sticky) return undefined;
+
+  const height = toCssLength(header.height);
+  return height ? { '--m-group-list-header-height': height } : undefined;
+};
+
 /** 按 label 文案长度估算 label 宽度（中文按 20px、其他按 8px，最小 80px） */
 export const calcLabelWidth = (label: string): string => {
   if (!label) return '0px';