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

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

@@ -66,15 +66,29 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			if (contains(target)) return;
 			hide();
 		};
+		const fixPosition = () => {
+			const menu = menuEl.value;
+			if (!menu || !visible.value) return;
+			const menuHeight = menu.clientHeight;
+			const menuWidth = menu.clientWidth;
+			let { top, left } = menuPosition.value;
+			if (top + menuHeight > document.body.clientHeight) top = Math.max(0, document.body.clientHeight - menuHeight);
+			if (left + menuWidth > document.body.clientWidth) left = Math.max(0, document.body.clientWidth - menuWidth);
+			if (top !== menuPosition.value.top || left !== menuPosition.value.left) menuPosition.value = {
+				top,
+				left
+			};
+		};
 		const setPosition = (e) => {
-			const menuHeight = menuEl.value?.clientHeight || 0;
-			let top = e.clientY;
-			if (menuHeight + e.clientY > document.body.clientHeight) top = document.body.clientHeight - menuHeight;
 			menuPosition.value = {
-				top,
+				top: e.clientY,
 				left: e.clientX
 			};
+			fixPosition();
 		};
+		const resizeObserver = new ResizeObserver(() => {
+			fixPosition();
+		});
 		const show = (e) => {
 			visible.value = true;
 			nextTick(() => {
@@ -103,10 +117,12 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			emit("mouseenter");
 		};
 		onMounted(() => {
+			if (menuEl.value) resizeObserver.observe(menuEl.value);
 			if (props.isSubMenu) return;
 			globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
 		});
 		onBeforeUnmount(() => {
+			resizeObserver.disconnect();
 			if (props.isSubMenu) return;
 			globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
 		});

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

@@ -1,5 +1,6 @@
 import CodeEditor_default from "../layouts/CodeEditor.js";
-import { computed, createBlock, defineComponent, openBlock } from "vue";
+import { FORM_SILENT_MODE_KEY } from "@tmagic/form";
+import { computed, createBlock, createCommentVNode, defineComponent, inject, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/Code.vue?vue&type=script&setup=true&lang.ts
 var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsVsCode",
@@ -24,6 +25,12 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
+		/**
+		* 静默模式（submitForm/validateForm 隐藏挂载）下跳过 monaco 渲染：
+		* 校验由 FormItem 针对 model 中的值完成，与编辑器实例无关；本组件挂载无值副作用
+		* （save 仅由用户操作/编辑器内容变更触发），跳过可省去 monaco worker/model 的无谓实例化。
+		*/
+		const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 		const emit = __emit;
 		const props = __props;
 		/**
@@ -41,7 +48,8 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			emit("change", v);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(CodeEditor_default, {
+			return !unref(silentMode) ? (openBlock(), createBlock(CodeEditor_default, {
+				key: 0,
 				height: __props.config.height,
 				type: diffMode.value ? "diff" : void 0,
 				"init-values": diffMode.value ? (__props.lastValues || {})[__props.name] : __props.model[__props.name],
@@ -65,7 +73,7 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				"autosize",
 				"parse",
 				"editor-custom-type"
-			]);
+			])) : createCommentVNode("v-if", true);
 		};
 	}
 });

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

@@ -72,14 +72,14 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					...v,
 					style: {}
 				};
-				if (v.style) {
+				if (v.style) if (eventData) {
 					Object.entries(v.style).forEach(([key, value]) => {
 						if (value !== "" && newValue.style) newValue.style[key] = value;
 					});
-					eventData?.changeRecords?.forEach((record) => {
+					eventData.changeRecords?.forEach((record) => {
 						if (record.propPath?.startsWith("style") && record.value === "") setValueByKeyPath(record.propPath, record.value, newValue);
 					});
-				}
+				} else newValue.style = { ...v.style };
 				const historySource = eventData ? "props" : "code";
 				editorService.update(newValue, {
 					changeRecords: eventData?.changeRecords,

package/dist/es/services/editor.js

@@ -351,6 +351,11 @@ var Editor = class extends BaseService {
 			historySource,
 			doNotPushHistory
 		});
+		const addedPages = newNodes.filter((node) => isPage(node) || isPageFragment(node));
+		if (addedPages.length) history_default.notifyPageStructureChange({
+			add: addedPages,
+			remove: []
+		});
 		return Array.isArray(addNode) ? newNodes : newNodes[0];
 	}
 	async doRemove(node, { doNotSelect = false, doNotSwitchPage = false } = {}) {
@@ -454,6 +459,11 @@ var Editor = class extends BaseService {
 			historySource,
 			doNotPushHistory
 		});
+		const removedPages = nodes.filter((node) => isPage(node) || isPageFragment(node));
+		if (removedPages.length) history_default.notifyPageStructureChange({
+			add: [],
+			remove: removedPages
+		});
 	}
 	async doUpdate(config, { changeRecords = [], historySource } = {}) {
 		if (!this.get("root")) throw new Error("root为空");
@@ -1238,24 +1248,35 @@ var Editor = class extends BaseService {
 		const prevMap = new Map(prevPages.map((p) => [`${p.id}`, p]));
 		const nextMap = new Map(nextPages.map((p) => [`${p.id}`, p]));
 		const indexInItems = (root, id) => (root.items ?? []).findIndex((item) => `${item.id}` === `${id}`);
+		const addedPages = [];
+		const removedPages = [];
 		nextPages.forEach((nextPage) => {
 			const prevPage = prevMap.get(`${nextPage.id}`);
-			if (!prevPage) this.pushPageDiffStep("add", nextPage, {
-				newSchema: cloneDeep$1(toRaw(nextPage)),
-				parentId: nextRoot.id,
-				index: indexInItems(nextRoot, nextPage.id)
-			}, source);
-			else if (!isEqual(toRaw(prevPage), toRaw(nextPage))) this.pushPageDiffStep("update", nextPage, {
+			if (!prevPage) {
+				this.pushPageDiffStep("add", nextPage, {
+					newSchema: cloneDeep$1(toRaw(nextPage)),
+					parentId: nextRoot.id,
+					index: indexInItems(nextRoot, nextPage.id)
+				}, source);
+				addedPages.push(nextPage);
+			} else if (!isEqual(toRaw(prevPage), toRaw(nextPage))) this.pushPageDiffStep("update", nextPage, {
 				oldSchema: cloneDeep$1(toRaw(prevPage)),
 				newSchema: cloneDeep$1(toRaw(nextPage))
 			}, source);
 		});
 		prevPages.forEach((prevPage) => {
-			if (!nextMap.has(`${prevPage.id}`)) this.pushPageDiffStep("remove", prevPage, {
-				oldSchema: cloneDeep$1(toRaw(prevPage)),
-				parentId: preRoot.id,
-				index: indexInItems(preRoot, prevPage.id)
-			}, source);
+			if (!nextMap.has(`${prevPage.id}`)) {
+				this.pushPageDiffStep("remove", prevPage, {
+					oldSchema: cloneDeep$1(toRaw(prevPage)),
+					parentId: preRoot.id,
+					index: indexInItems(preRoot, prevPage.id)
+				}, source);
+				removedPages.push(prevPage);
+			}
+		});
+		if (addedPages.length || removedPages.length) history_default.notifyPageStructureChange({
+			add: addedPages,
+			remove: removedPages
 		});
 	}
 	/**

package/dist/es/services/history.js

@@ -244,6 +244,22 @@ var History = class extends BaseService {
 		});
 	}
 	/**
+	* 派发「页面 / 页面片结构变更」事件（`page-structure-change`）。
+	*
+	* 常规 `editorService.add` / `remove` 页面节点不会写入 `page` 历史栈（见 editor.add / remove 中
+	* 对 isPage / isPageFragment 的分支），因此不会产生任何 historyService 事件。该方法用于在这些
+	* 场景（以及 setRoot 整体替换 DSL 增删页面）下，向外统一通知页面结构的增删变化，供业务方感知。
+	*
+	* 一次操作涉及多个页面时，调用方应把本次增删的页面**合并为一个 change 一次性传入**，
+	* 使一次操作只派发一个事件；`add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+	*
+	* @param change 本次结构变更：{ add: 新增的页面列表, remove: 删除的页面列表 }
+	*/
+	notifyPageStructureChange(change) {
+		if (!change.add.length && !change.remove.length) return;
+		this.emit("page-structure-change", change);
+	}
+	/**
 	* 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
 	*
 	* - 每个 UndoRedo 栈连同其游标、容量一并保存，恢复后可继续 undo/redo；

package/dist/es/style.css

@@ -103,6 +103,10 @@
   width: calc(var(--el-input-width, 100%) - 40px);
 }
 
+.tmagic-design-color-picker {
+  flex: 0 0 auto;
+}
+
 .m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }

package/dist/es/utils/data-source/index.js

@@ -199,12 +199,14 @@ var resolveFieldByPath = (fields, fieldNames, options = {}) => {
 		if (options.skipNumberIndices && isNumber(name)) continue;
 		if (!currentFields.length) return {
 			ok: false,
-			fields: currentFields
+			fields: currentFields,
+			failedName: name
 		};
 		field = currentFields.find((item) => item.name === name);
 		if (!field) return {
 			ok: false,
-			fields: currentFields
+			fields: currentFields,
+			failedName: name
 		};
 		currentFields = field.fields || [];
 	}

package/dist/es/utils/type-match-rules.js

@@ -3,6 +3,7 @@ import editor_default from "../services/editor.js";
 import { getFieldType, resolveFieldByPath } from "./data-source/index.js";
 import codeBlock_default from "../services/codeBlock.js";
 import dataSource_default from "../services/dataSource.js";
+import { validateTypeMatch } from "@tmagic/form";
 import { appendValidateSuggestion } from "@tmagic/design";
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, DATA_SOURCE_SET_DATA_METHOD_NAME, dataSourceTemplateRegExp, getKeysArray, removeDataSourceFieldPrefix } from "@tmagic/utils";
 import { NodeType } from "@tmagic/core";
@@ -181,10 +182,10 @@ var validateDataSourceFieldPath = (path, options = {}) => {
 		fieldNames = path.slice(1);
 	}
 	const ds = findDataSource(`${dsId}`);
-	if (!ds) return defaultMessage(options.message, "值不在可选项中", dataSourceIdSuggestion());
+	if (!ds) return defaultMessage(options.message, `数据源(${dsId})不存在`, dataSourceIdSuggestion());
 	if (!fieldNames.length) return;
-	const { field, ok } = resolveFieldByPath(ds.fields, fieldNames);
-	if (!ok) return defaultMessage(options.message, "值不在可选项中", dataSourceIdSuggestion());
+	const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, fieldNames);
+	if (!ok) return defaultMessage(options.message, `数据源字段(${failedName})不存在`, listSuggestion(fields.map((item) => item.name)));
 	const allowedTypes = options.dataSourceFieldType || ["any"];
 	if (!allowedTypes.length || allowedTypes.includes("any")) return;
 	const leafType = field?.type || "any";
@@ -267,9 +268,15 @@ var isDataSourceFieldPathValue = (value, config) => {
 	if (config.value === "key") return true;
 	return `${value[0]}`.startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
 };
-var validateDataSourceFieldSelect = (value, { message, props }) => {
+var validateDataSourceFieldSelect = (value, { mForm, message, props }) => {
 	const config = props.config || {};
-	if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) return;
+	if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) return validateTypeMatch(value, mForm, {
+		...props,
+		config: {
+			name: config.name,
+			...config.fieldConfig
+		}
+	}, message);
 	if (!Array.isArray(value) || value.some((item) => typeof item !== "string")) return defaultMessage(message, `${value}类型应为字符串数组`, dataSourceFieldPathSuggestion());
 	return validateDataSourceFieldPath(value, {
 		dataSourceId: config.dataSourceId,

package/dist/style.css

@@ -103,6 +103,10 @@
   width: calc(var(--el-input-width, 100%) - 40px);
 }
 
+.tmagic-design-color-picker {
+  flex: 0 0 auto;
+}
+
 .m-table .el-button.action-btn + .el-button.action-btn {
   margin-left: 0;
 }

package/dist/themes/magic-admin.css

@@ -103,6 +103,10 @@
   width: calc(var(--el-input-width, 100%) - 40px);
 }
 
+.tmagic-design-color-picker {
+  flex: 0 0 auto;
+}
+
 .m-form.m-form--magic-admin .el-collapse-item__header {
   background-color: transparent;
   padding: 0;

package/dist/tmagic-editor.umd.cjs

@@ -6605,6 +6605,22 @@
 			});
 		}
 		/**
+		* 派发「页面 / 页面片结构变更」事件（`page-structure-change`）。
+		*
+		* 常规 `editorService.add` / `remove` 页面节点不会写入 `page` 历史栈（见 editor.add / remove 中
+		* 对 isPage / isPageFragment 的分支），因此不会产生任何 historyService 事件。该方法用于在这些
+		* 场景（以及 setRoot 整体替换 DSL 增删页面）下，向外统一通知页面结构的增删变化，供业务方感知。
+		*
+		* 一次操作涉及多个页面时，调用方应把本次增删的页面**合并为一个 change 一次性传入**，
+		* 使一次操作只派发一个事件；`add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+		*
+		* @param change 本次结构变更：{ add: 新增的页面列表, remove: 删除的页面列表 }
+		*/
+		notifyPageStructureChange(change) {
+			if (!change.add.length && !change.remove.length) return;
+			this.emit("page-structure-change", change);
+		}
+		/**
 		* 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
 		*
 		* - 每个 UndoRedo 栈连同其游标、容量一并保存，恢复后可继续 undo/redo；
@@ -7701,6 +7717,11 @@
 				historySource,
 				doNotPushHistory
 			});
+			const addedPages = newNodes.filter((node) => (0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.isPageFragment)(node));
+			if (addedPages.length) history_default.notifyPageStructureChange({
+				add: addedPages,
+				remove: []
+			});
 			return Array.isArray(addNode) ? newNodes : newNodes[0];
 		}
 		async doRemove(node, { doNotSelect = false, doNotSwitchPage = false } = {}) {
@@ -7804,6 +7825,11 @@
 				historySource,
 				doNotPushHistory
 			});
+			const removedPages = nodes.filter((node) => (0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.isPageFragment)(node));
+			if (removedPages.length) history_default.notifyPageStructureChange({
+				add: [],
+				remove: removedPages
+			});
 		}
 		async doUpdate(config, { changeRecords = [], historySource } = {}) {
 			if (!this.get("root")) throw new Error("root为空");
@@ -8588,24 +8614,35 @@
 			const prevMap = new Map(prevPages.map((p) => [`${p.id}`, p]));
 			const nextMap = new Map(nextPages.map((p) => [`${p.id}`, p]));
 			const indexInItems = (root, id) => (root.items ?? []).findIndex((item) => `${item.id}` === `${id}`);
+			const addedPages = [];
+			const removedPages = [];
 			nextPages.forEach((nextPage) => {
 				const prevPage = prevMap.get(`${nextPage.id}`);
-				if (!prevPage) this.pushPageDiffStep("add", nextPage, {
-					newSchema: cloneDeep$1((0, vue.toRaw)(nextPage)),
-					parentId: nextRoot.id,
-					index: indexInItems(nextRoot, nextPage.id)
-				}, source);
-				else if (!isEqual((0, vue.toRaw)(prevPage), (0, vue.toRaw)(nextPage))) this.pushPageDiffStep("update", nextPage, {
+				if (!prevPage) {
+					this.pushPageDiffStep("add", nextPage, {
+						newSchema: cloneDeep$1((0, vue.toRaw)(nextPage)),
+						parentId: nextRoot.id,
+						index: indexInItems(nextRoot, nextPage.id)
+					}, source);
+					addedPages.push(nextPage);
+				} else if (!isEqual((0, vue.toRaw)(prevPage), (0, vue.toRaw)(nextPage))) this.pushPageDiffStep("update", nextPage, {
 					oldSchema: cloneDeep$1((0, vue.toRaw)(prevPage)),
 					newSchema: cloneDeep$1((0, vue.toRaw)(nextPage))
 				}, source);
 			});
 			prevPages.forEach((prevPage) => {
-				if (!nextMap.has(`${prevPage.id}`)) this.pushPageDiffStep("remove", prevPage, {
-					oldSchema: cloneDeep$1((0, vue.toRaw)(prevPage)),
-					parentId: preRoot.id,
-					index: indexInItems(preRoot, prevPage.id)
-				}, source);
+				if (!nextMap.has(`${prevPage.id}`)) {
+					this.pushPageDiffStep("remove", prevPage, {
+						oldSchema: cloneDeep$1((0, vue.toRaw)(prevPage)),
+						parentId: preRoot.id,
+						index: indexInItems(preRoot, prevPage.id)
+					}, source);
+					removedPages.push(prevPage);
+				}
+			});
+			if (addedPages.length || removedPages.length) history_default.notifyPageStructureChange({
+				add: addedPages,
+				remove: removedPages
 			});
 		}
 		/**
@@ -9598,12 +9635,14 @@
 			if (options.skipNumberIndices && (0, _tmagic_utils.isNumber)(name)) continue;
 			if (!currentFields.length) return {
 				ok: false,
-				fields: currentFields
+				fields: currentFields,
+				failedName: name
 			};
 			field = currentFields.find((item) => item.name === name);
 			if (!field) return {
 				ok: false,
-				fields: currentFields
+				fields: currentFields,
+				failedName: name
 			};
 			currentFields = field.fields || [];
 		}
@@ -10929,10 +10968,10 @@
 			fieldNames = path.slice(1);
 		}
 		const ds = findDataSource(`${dsId}`);
-		if (!ds) return defaultMessage(options.message, "值不在可选项中", dataSourceIdSuggestion());
+		if (!ds) return defaultMessage(options.message, `数据源(${dsId})不存在`, dataSourceIdSuggestion());
 		if (!fieldNames.length) return;
-		const { field, ok } = resolveFieldByPath(ds.fields, fieldNames);
-		if (!ok) return defaultMessage(options.message, "值不在可选项中", dataSourceIdSuggestion());
+		const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, fieldNames);
+		if (!ok) return defaultMessage(options.message, `数据源字段(${failedName})不存在`, listSuggestion(fields.map((item) => item.name)));
 		const allowedTypes = options.dataSourceFieldType || ["any"];
 		if (!allowedTypes.length || allowedTypes.includes("any")) return;
 		const leafType = field?.type || "any";
@@ -11015,9 +11054,15 @@
 		if (config.value === "key") return true;
 		return `${value[0]}`.startsWith(_tmagic_utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
 	};
-	var validateDataSourceFieldSelect = (value, { message, props }) => {
+	var validateDataSourceFieldSelect = (value, { mForm, message, props }) => {
 		const config = props.config || {};
-		if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) return;
+		if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) return (0, _tmagic_form.validateTypeMatch)(value, mForm, {
+			...props,
+			config: {
+				name: config.name,
+				...config.fieldConfig
+			}
+		}, message);
 		if (!Array.isArray(value) || value.some((item) => typeof item !== "string")) return defaultMessage(message, `${value}类型应为字符串数组`, dataSourceFieldPathSuggestion());
 		return validateDataSourceFieldPath(value, {
 			dataSourceId: config.dataSourceId,
@@ -15055,14 +15100,14 @@
 						...v,
 						style: {}
 					};
-					if (v.style) {
+					if (v.style) if (eventData) {
 						Object.entries(v.style).forEach(([key, value]) => {
 							if (value !== "" && newValue.style) newValue.style[key] = value;
 						});
-						eventData?.changeRecords?.forEach((record) => {
+						eventData.changeRecords?.forEach((record) => {
 							if (record.propPath?.startsWith("style") && record.value === "") (0, _tmagic_utils.setValueByKeyPath)(record.propPath, record.value, newValue);
 						});
-					}
+					} else newValue.style = { ...v.style };
 					const historySource = eventData ? "props" : "code";
 					editorService.update(newValue, {
 						changeRecords: eventData?.changeRecords,
@@ -15700,15 +15745,29 @@
 				if (contains(target)) return;
 				hide();
 			};
+			const fixPosition = () => {
+				const menu = menuEl.value;
+				if (!menu || !visible.value) return;
+				const menuHeight = menu.clientHeight;
+				const menuWidth = menu.clientWidth;
+				let { top, left } = menuPosition.value;
+				if (top + menuHeight > document.body.clientHeight) top = Math.max(0, document.body.clientHeight - menuHeight);
+				if (left + menuWidth > document.body.clientWidth) left = Math.max(0, document.body.clientWidth - menuWidth);
+				if (top !== menuPosition.value.top || left !== menuPosition.value.left) menuPosition.value = {
+					top,
+					left
+				};
+			};
 			const setPosition = (e) => {
-				const menuHeight = menuEl.value?.clientHeight || 0;
-				let top = e.clientY;
-				if (menuHeight + e.clientY > document.body.clientHeight) top = document.body.clientHeight - menuHeight;
 				menuPosition.value = {
-					top,
+					top: e.clientY,
 					left: e.clientX
 				};
+				fixPosition();
 			};
+			const resizeObserver = new ResizeObserver(() => {
+				fixPosition();
+			});
 			const show = (e) => {
 				visible.value = true;
 				(0, vue.nextTick)(() => {
@@ -15737,10 +15796,12 @@
 				emit("mouseenter");
 			};
 			(0, vue.onMounted)(() => {
+				if (menuEl.value) resizeObserver.observe(menuEl.value);
 				if (props.isSubMenu) return;
 				globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
 			});
 			(0, vue.onBeforeUnmount)(() => {
+				resizeObserver.disconnect();
 				if (props.isSubMenu) return;
 				globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
 			});
@@ -25323,6 +25384,12 @@
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
+			/**
+			* 静默模式（submitForm/validateForm 隐藏挂载）下跳过 monaco 渲染：
+			* 校验由 FormItem 针对 model 中的值完成，与编辑器实例无关；本组件挂载无值副作用
+			* （save 仅由用户操作/编辑器内容变更触发），跳过可省去 monaco worker/model 的无谓实例化。
+			*/
+			const silentMode = (0, vue.inject)(_tmagic_form.FORM_SILENT_MODE_KEY, false);
 			const emit = __emit;
 			const props = __props;
 			/**
@@ -25340,7 +25407,8 @@
 				emit("change", v);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createBlock)(CodeEditor_default, {
+				return !(0, vue.unref)(silentMode) ? ((0, vue.openBlock)(), (0, vue.createBlock)(CodeEditor_default, {
+					key: 0,
 					height: __props.config.height,
 					type: diffMode.value ? "diff" : void 0,
 					"init-values": diffMode.value ? (__props.lastValues || {})[__props.name] : __props.model[__props.name],
@@ -25364,7 +25432,7 @@
 					"autosize",
 					"parse",
 					"editor-custom-type"
-				]);
+				])) : (0, vue.createCommentVNode)("v-if", true);
 			};
 		}
 	});

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.14",
+  "version": "1.8.0-beta.15",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-beta.14",
-    "@tmagic/form": "1.8.0-beta.14",
-    "@tmagic/stage": "1.8.0-beta.14",
-    "@tmagic/table": "1.8.0-beta.14",
-    "@tmagic/utils": "1.8.0-beta.14"
+    "@tmagic/design": "1.8.0-beta.15",
+    "@tmagic/form": "1.8.0-beta.15",
+    "@tmagic/table": "1.8.0-beta.15",
+    "@tmagic/utils": "1.8.0-beta.15",
+    "@tmagic/stage": "1.8.0-beta.15"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.40",
-    "@tmagic/core": "1.8.0-beta.14"
+    "@tmagic/core": "1.8.0-beta.15"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/ContentMenu.vue

@@ -128,20 +128,42 @@ const outsideClickHideHandler = (e: MouseEvent) => {
   hide();
 };
 
-const setPosition = (e: { clientY: number; clientX: number }) => {
-  const menuHeight = menuEl.value?.clientHeight || 0;
+// 根据菜单实际尺寸修正位置，避免超出可视范围
+const fixPosition = () => {
+  const menu = menuEl.value;
+  if (!menu || !visible.value) return;
+
+  const menuHeight = menu.clientHeight;
+  const menuWidth = menu.clientWidth;
+
+  let { top, left } = menuPosition.value;
+
+  if (top + menuHeight > document.body.clientHeight) {
+    top = Math.max(0, document.body.clientHeight - menuHeight);
+  }
+
+  if (left + menuWidth > document.body.clientWidth) {
+    left = Math.max(0, document.body.clientWidth - menuWidth);
+  }
 
-  let top = e.clientY;
-  if (menuHeight + e.clientY > document.body.clientHeight) {
-    top = document.body.clientHeight - menuHeight;
+  if (top !== menuPosition.value.top || left !== menuPosition.value.left) {
+    menuPosition.value = { top, left };
   }
+};
 
+const setPosition = (e: { clientY: number; clientX: number }) => {
   menuPosition.value = {
-    top,
+    top: e.clientY,
     left: e.clientX,
   };
+  fixPosition();
 };
 
+// 菜单大小动态变化（如菜单项更新）后重新修正位置
+const resizeObserver = new ResizeObserver(() => {
+  fixPosition();
+});
+
 const show = (e?: { clientY: number; clientX: number }) => {
   visible.value = true;
 
@@ -186,12 +208,18 @@ const mouseenterHandler = () => {
 };
 
 onMounted(() => {
+  if (menuEl.value) {
+    resizeObserver.observe(menuEl.value);
+  }
+
   if (props.isSubMenu) return;
 
   globalThis.addEventListener('mousedown', outsideClickHideHandler, true);
 });
 
 onBeforeUnmount(() => {
+  resizeObserver.disconnect();
+
   if (props.isSubMenu) return;
 
   globalThis.removeEventListener('mousedown', outsideClickHideHandler, true);

package/src/fields/Code.vue

@@ -1,5 +1,6 @@
 <template>
   <MagicCodeEditor
+    v-if="!silentMode"
     :height="config.height"
     :type="diffMode ? 'diff' : undefined"
     :init-values="diffMode ? (lastValues || {})[name] : model[name]"
@@ -17,9 +18,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 
-import type { CodeConfig, FieldProps } from '@tmagic/form';
+import { type CodeConfig, type FieldProps, FORM_SILENT_MODE_KEY } from '@tmagic/form';
 
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
@@ -27,6 +28,13 @@ defineOptions({
   name: 'MFieldsVsCode',
 });
 
+/**
+ * 静默模式（submitForm/validateForm 隐藏挂载）下跳过 monaco 渲染：
+ * 校验由 FormItem 针对 model 中的值完成，与编辑器实例无关；本组件挂载无值副作用
+ * （save 仅由用户操作/编辑器内容变更触发），跳过可省去 monaco worker/model 的无谓实例化。
+ */
+const silentMode = inject(FORM_SILENT_MODE_KEY, false);
+
 const emit = defineEmits<{
   change: [value: string | any];
 }>();

package/src/layouts/props-panel/PropsPanel.vue

@@ -164,17 +164,25 @@ const submit = async (
     };
 
     if (v.style) {
-      Object.entries(v.style).forEach(([key, value]) => {
-        if (value !== '' && newValue.style) {
-          newValue.style[key] = value;
-        }
-      });
-
-      eventData?.changeRecords?.forEach((record) => {
-        if (record.propPath?.startsWith('style') && record.value === '') {
-          setValueByKeyPath(record.propPath, record.value, newValue);
-        }
-      });
+      // 空字符串样式值表示「清除该样式」，需保留才能在 doUpdate 的 mergeWith 中覆盖旧值。
+      if (eventData) {
+        // 表单编辑：先过滤掉空字符串（避免表单默认空值污染 DSL），
+        // 再按 changeRecords 恢复被主动清空的字段。
+        Object.entries(v.style).forEach(([key, value]) => {
+          if (value !== '' && newValue.style) {
+            newValue.style[key] = value;
+          }
+        });
+
+        eventData.changeRecords?.forEach((record) => {
+          if (record.propPath?.startsWith('style') && record.value === '') {
+            setValueByKeyPath(record.propPath, record.value, newValue);
+          }
+        });
+      } else {
+        // 源码编辑器保存（无 eventData）：style 原样保留，其中的空字符串视为用户主动清除该样式。
+        newValue.style = { ...v.style };
+      }
     }
 
     // 区分操作途径：表单字段编辑（MForm @change）会带上 eventData（含 changeRecords）；

package/src/services/editor.ts

@@ -554,6 +554,12 @@ class Editor extends BaseService {
       doNotPushHistory,
     });
 
+    // 页面 / 页面片新增不入历史栈（见上方 isPage / isPageFragment 分支），这里合并补发一次结构变更通知
+    const addedPages = newNodes.filter((node) => isPage(node) || isPageFragment(node)) as (MPage | MPageFragment)[];
+    if (addedPages.length) {
+      historyService.notifyPageStructureChange({ add: addedPages, remove: [] });
+    }
+
     return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
 
@@ -695,6 +701,12 @@ class Editor extends BaseService {
 
     this.emit('remove', nodes);
     this.emit('change', { type: 'remove', data: changeItems, historySource, doNotPushHistory });
+
+    // 页面 / 页面片删除不入历史栈（见上方 isPage / isPageFragment 分支），这里合并补发一次结构变更通知
+    const removedPages = nodes.filter((node) => isPage(node) || isPageFragment(node)) as (MPage | MPageFragment)[];
+    if (removedPages.length) {
+      historyService.notifyPageStructureChange({ add: [], remove: removedPages });
+    }
   }
 
   public async doUpdate(
@@ -1776,6 +1788,10 @@ class Editor extends BaseService {
     const nextMap = new Map(nextPages.map((p) => [`${p.id}`, p]));
     const indexInItems = (root: MApp, id: Id) => (root.items ?? []).findIndex((item) => `${item.id}` === `${id}`);
 
+    // 收集本次整体替换中增删的页面，循环结束后合并为一次结构变更通知（避免逐页派发多个事件）
+    const addedPages: (MPage | MPageFragment)[] = [];
+    const removedPages: (MPage | MPageFragment)[] = [];
+
     nextPages.forEach((nextPage) => {
       const prevPage = prevMap.get(`${nextPage.id}`);
       if (!prevPage) {
@@ -1785,6 +1801,7 @@ class Editor extends BaseService {
           { newSchema: cloneDeep(toRaw(nextPage)), parentId: nextRoot.id, index: indexInItems(nextRoot, nextPage.id) },
           source,
         );
+        addedPages.push(nextPage);
       } else if (!isEqual(toRaw(prevPage), toRaw(nextPage))) {
         this.pushPageDiffStep(
           'update',
@@ -1803,8 +1820,13 @@ class Editor extends BaseService {
           { oldSchema: cloneDeep(toRaw(prevPage)), parentId: preRoot.id, index: indexInItems(preRoot, prevPage.id) },
           source,
         );
+        removedPages.push(prevPage);
       }
     });
+
+    if (addedPages.length || removedPages.length) {
+      historyService.notifyPageStructureChange({ add: addedPages, remove: removedPages });
+    }
   }
 
   /**

package/src/services/history.ts

@@ -19,7 +19,7 @@
 import { reactive } from 'vue';
 import type { Writable } from 'type-fest';
 
-import type { Id } from '@tmagic/core';
+import type { Id, MPage, MPageFragment } from '@tmagic/core';
 import { guid } from '@tmagic/utils';
 
 import type {
@@ -353,6 +353,27 @@ class History extends BaseService {
     this.emit('mark-saved', { kind: stepType, id });
   }
 
+  /**
+   * 派发「页面 / 页面片结构变更」事件（`page-structure-change`）。
+   *
+   * 常规 `editorService.add` / `remove` 页面节点不会写入 `page` 历史栈（见 editor.add / remove 中
+   * 对 isPage / isPageFragment 的分支），因此不会产生任何 historyService 事件。该方法用于在这些
+   * 场景（以及 setRoot 整体替换 DSL 增删页面）下，向外统一通知页面结构的增删变化，供业务方感知。
+   *
+   * 一次操作涉及多个页面时，调用方应把本次增删的页面**合并为一个 change 一次性传入**，
+   * 使一次操作只派发一个事件；`add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+   *
+   * @param change 本次结构变更：{ add: 新增的页面列表, remove: 删除的页面列表 }
+   */
+  public notifyPageStructureChange(change: {
+    add: (MPage | MPageFragment)[];
+    remove: (MPage | MPageFragment)[];
+  }): void {
+    // 增删均为空时不派发，避免无意义通知
+    if (!change.add.length && !change.remove.length) return;
+    this.emit('page-structure-change', change);
+  }
+
   /**
    * 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
    *

package/src/type.ts

@@ -1385,6 +1385,12 @@ export interface HistoryEvents {
   'mark-saved': [{ kind: HistoryStepType; id?: Id }];
   clear: [{ id: Id; stepType: HistoryStepType }];
   'marker-change': [{ id: Id; marker: StepValue; stepType: HistoryStepType }];
+  /**
+   * 页面 / 页面片结构变更（新增 / 删除）时派发，见 {@link HistoryService.notifyPageStructureChange}。
+   * 一次操作（add / remove / setRoot 整体替换）涉及多个页面时合并为**一个**事件；
+   * `add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+   */
+  'page-structure-change': [change: { add: (MPage | MPageFragment)[]; remove: (MPage | MPageFragment)[] }];
 }
 
 export const canUsePluginMethods = {

package/src/utils/data-source/index.ts

@@ -243,7 +243,7 @@ export const resolveFieldByPath = (
   fields: DataSchema[] | undefined,
   fieldNames: string[],
   options: { skipNumberIndices?: boolean } = {},
-): { ok: boolean; field?: DataSchema; fields: DataSchema[] } => {
+): { ok: boolean; field?: DataSchema; fields: DataSchema[]; failedName?: string } => {
   let currentFields = fields || [];
   let field: DataSchema | undefined;
 
@@ -252,11 +252,11 @@ export const resolveFieldByPath = (
       continue;
     }
     if (!currentFields.length) {
-      return { ok: false, fields: currentFields };
+      return { ok: false, fields: currentFields, failedName: name };
     }
     field = currentFields.find((item) => item.name === name);
     if (!field) {
-      return { ok: false, fields: currentFields };
+      return { ok: false, fields: currentFields, failedName: name };
     }
     currentFields = field.fields || [];
   }

package/src/utils/type-match-rules.ts

@@ -20,6 +20,7 @@ import type { DataSourceFieldType, DataSourceSchema, Id } from '@tmagic/core';
 import { NodeType } from '@tmagic/core';
 import { appendValidateSuggestion } from '@tmagic/design';
 import type { TypeMatchValidateContext, TypeMatchValidator } from '@tmagic/form';
+import { validateTypeMatch } from '@tmagic/form';
 import {
   DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
   DATA_SOURCE_SET_DATA_METHOD_NAME,
@@ -261,16 +262,20 @@ const validateDataSourceFieldPath = (
 
   const ds = findDataSource(`${dsId}`);
   if (!ds) {
-    return defaultMessage(options.message, '值不在可选项中', dataSourceIdSuggestion());
+    return defaultMessage(options.message, `数据源(${dsId})不存在`, dataSourceIdSuggestion());
   }
 
   if (!fieldNames.length) {
     return undefined;
   }
 
-  const { field, ok } = resolveFieldByPath(ds.fields, fieldNames);
+  const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, fieldNames);
   if (!ok) {
-    return defaultMessage(options.message, '值不在可选项中', dataSourceIdSuggestion());
+    return defaultMessage(
+      options.message,
+      `数据源字段(${failedName})不存在`,
+      listSuggestion(fields.map((item) => item.name)),
+    );
   }
 
   const allowedTypes = options.dataSourceFieldType || ['any'];
@@ -471,11 +476,12 @@ const isDataSourceFieldPathValue = (value: any, config: any): value is string[]
   return `${value[0]}`.startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
 };
 
-const validateDataSourceFieldSelect: TypeMatchValidator = (value, { message, props }) => {
+const validateDataSourceFieldSelect: TypeMatchValidator = (value, { mForm, message, props }) => {
   const config = props.config || {};
 
   if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) {
-    return undefined;
+    // 值不是数据源字段路径时，按 fieldConfig 的类型校验（与表单项自身 typeMatch 行为一致）
+    return validateTypeMatch(value, mForm, { ...props, config: { name: config.name, ...config.fieldConfig } }, message);
   }
 
   if (!Array.isArray(value) || value.some((item) => typeof item !== 'string')) {

package/types/index.d.ts

@@ -1214,6 +1214,22 @@ declare class History extends BaseService {
    * @param id       目标栈 id；缺省表示标记全部类型 / 全部栈
    */
   markSaved(stepType: HistoryStepType, id?: Id): void;
+  /**
+   * 派发「页面 / 页面片结构变更」事件（`page-structure-change`）。
+   *
+   * 常规 `editorService.add` / `remove` 页面节点不会写入 `page` 历史栈（见 editor.add / remove 中
+   * 对 isPage / isPageFragment 的分支），因此不会产生任何 historyService 事件。该方法用于在这些
+   * 场景（以及 setRoot 整体替换 DSL 增删页面）下，向外统一通知页面结构的增删变化，供业务方感知。
+   *
+   * 一次操作涉及多个页面时，调用方应把本次增删的页面**合并为一个 change 一次性传入**，
+   * 使一次操作只派发一个事件；`add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+   *
+   * @param change 本次结构变更：{ add: 新增的页面列表, remove: 删除的页面列表 }
+   */
+  notifyPageStructureChange(change: {
+    add: (MPage | MPageFragment)[];
+    remove: (MPage | MPageFragment)[];
+  }): void;
   /**
    * 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
    *
@@ -2694,6 +2710,15 @@ interface HistoryEvents {
     marker: StepValue;
     stepType: HistoryStepType;
   }];
+  /**
+   * 页面 / 页面片结构变更（新增 / 删除）时派发，见 {@link HistoryService.notifyPageStructureChange}。
+   * 一次操作（add / remove / setRoot 整体替换）涉及多个页面时合并为**一个**事件；
+   * `add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+   */
+  'page-structure-change': [change: {
+    add: (MPage | MPageFragment)[];
+    remove: (MPage | MPageFragment)[];
+  }];
 }
 declare const canUsePluginMethods: {
   async: readonly ["getLayout", "highlight", "select", "multiSelect", "doAdd", "add", "doRemove", "remove", "doUpdate", "update", "sort", "copy", "paste", "doPaste", "doAlignCenter", "alignCenter", "moveLayer", "moveToContainer", "dragTo", "undo", "redo", "move"];
@@ -3370,6 +3395,7 @@ declare const resolveFieldByPath: (fields: DataSchema[] | undefined, fieldNames:
   ok: boolean;
   field?: DataSchema;
   fields: DataSchema[];
+  failedName?: string;
 };
 declare const getFieldType: (ds: DataSourceSchema | undefined, fieldNames: string[]) => "" | DataSourceFieldType;
 //#endregion