@tmagic/editor 1.8.0-beta.11 → 1.8.0-beta.13

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

@@ -4,11 +4,12 @@ import { PROPS_PANEL_WIDTH_STORAGE_KEY } from "../../utils/const.js";
 import { useServices } from "../../hooks/use-services.js";
 import Resizer_default from "../../components/Resizer.js";
 import Icon_default from "../../components/Icon.js";
+import { ENABLE_PROPS_FORM_VALIDATE } from "../../editorProps.js";
 import FormPanel_default from "./FormPanel.js";
 import { useStylePanel } from "./use-style-panel.js";
 import { TMagicButton } from "@tmagic/design";
 import { setValueByKeyPath } from "@tmagic/utils";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives } from "vue";
 import { Close, Sugar } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/props-panel/PropsPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -32,6 +33,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const { editorService, uiService, propsService, storageService } = useServices();
+		const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
 		const values = ref({});
 		const curFormConfig = ref([]);
 		const node = computed(() => editorService.get("node"));
@@ -54,7 +56,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		onBeforeUnmount(() => {
 			propsService.off("props-configs-change", init);
 		});
-		const submit = async (v, eventData) => {
+		const submit = async (v, eventData, error, source = "props") => {
 			try {
 				if (!v.id) v.id = values.value.id;
 				const newValue = {
@@ -72,7 +74,12 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				const historySource = eventData ? "props" : "code";
 				editorService.update(newValue, {
 					changeRecords: eventData?.changeRecords,
-					historySource
+					historySource,
+					...enablePropsFormValidate && error ? { invalidInfo: {
+						id: newValue.id,
+						source,
+						error: error?.message
+					} } : {}
 				});
 			} catch (e) {
 				emit("submit-error", e);
@@ -123,7 +130,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					values: values.value,
 					disabledShowSrc: __props.disabledShowSrc,
 					extendState: __props.extendState,
-					onSubmit: submit,
+					onSubmit: _cache[0] || (_cache[0] = (v, eventData, error) => submit(v, eventData, error, "props")),
 					onSubmitError: errorHandler,
 					onFormError: errorHandler,
 					onMounted: mountedHandler,
@@ -148,14 +155,14 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					values: values.value,
 					disabledShowSrc: __props.disabledShowSrc,
 					extendState: __props.extendState,
-					onSubmit: submit,
+					onSubmit: _cache[2] || (_cache[2] = (v, eventData, error) => submit(v, eventData, error, "style")),
 					onSubmitError: errorHandler,
 					onFormError: errorHandler
 				}, {
-					"props-form-panel-header": withCtx(() => [createElementVNode("div", _hoisted_2, [_cache[2] || (_cache[2] = createElementVNode("span", null, "样式", -1)), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
+					"props-form-panel-header": withCtx(() => [createElementVNode("div", _hoisted_2, [_cache[4] || (_cache[4] = createElementVNode("span", null, "样式", -1)), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
 						link: "",
 						size: "small",
-						onClick: _cache[0] || (_cache[0] = ($event) => unref(toggleStylePanel)(false))
+						onClick: _cache[1] || (_cache[1] = ($event) => unref(toggleStylePanel)(false))
 					}, {
 						default: withCtx(() => [createVNode(Icon_default, { icon: unref(Close) }, null, 8, ["icon"])]),
 						_: 1
@@ -170,7 +177,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					key: 2,
 					class: "m-editor-props-panel-style-icon",
 					circle: "",
-					onClick: _cache[1] || (_cache[1] = ($event) => unref(toggleStylePanel)(true))
+					onClick: _cache[3] || (_cache[3] = ($event) => unref(toggleStylePanel)(true))
 				}, {
 					default: withCtx(() => [createVNode(Icon_default, { icon: unref(Sugar) }, null, 8, ["icon"])]),
 					_: 1

package/dist/es/layouts/props-panel/use-style-panel.js

@@ -23,8 +23,9 @@ var useStylePanel = ({ uiService, storageService }, propsPanelWidth) => {
 			columnWidth.center += propsPanelWidth.value;
 		}
 		if (columnWidth.center < 0) {
-			columnWidth.right = columnWidth.right + columnWidth.center - 400;
-			columnWidth.center = 400;
+			const minCenterColumnWidth = uiService.get("minCenterColumnWidth");
+			columnWidth.right = columnWidth.right + columnWidth.center - minCenterColumnWidth;
+			columnWidth.center = minCenterColumnWidth;
 			propsPanelWidth.value = columnWidth.right / 2;
 		}
 		storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });

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

@@ -61,6 +61,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const taskLength = computed(() => depService.get("taskLength"));
 		const tipsBarVisible = ref(true);
 		const columnLeftWidth = computed(() => uiService.get("columnWidth")[ColumnLayout.LEFT]);
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		const { height: editorContentHeight } = useEditorContentHeight();
 		const columnLeftHeight = ref(0);
 		const unWatchEditorContentHeight = watch(editorContentHeight, (height) => {
@@ -189,23 +190,17 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					}, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
 						config.$key === "component-list" || config.slots?.componentList ? {
 							name: "component-list",
-							fn: withCtx(({ componentGroupList }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list", {
-								key: 0,
-								componentGroupList
-							}) : config.slots?.componentList ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentList), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(({ componentGroupList }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list", { componentGroupList }, void 0, void 0, 0) : config.slots?.componentList ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentList), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "0"
 						} : void 0,
 						config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
 							name: "component-list-panel-header",
-							fn: withCtx(() => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", {}, void 0, void 0, 0) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "1"
 						} : void 0,
 						config.$key === "component-list" || config.slots?.componentListItem ? {
 							name: "component-list-item",
-							fn: withCtx(({ component }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
-								key: 0,
-								component
-							}) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
+							fn: withCtx(({ component }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", { component }, void 0, void 0, 0) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
 								key: 1,
 								component
 							}, null, 8, ["component"])) : createCommentVNode("v-if", true)]),
@@ -213,34 +208,30 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						} : void 0,
 						config.$key === "layer" || config.slots?.layerPanelHeader ? {
 							name: "layer-panel-header",
-							fn: withCtx(() => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", {}, void 0, void 0, 0) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "3"
 						} : void 0,
 						config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
 							name: "code-block-panel-header",
-							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", {}, void 0, void 0, 0) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "4"
 						} : void 0,
 						config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
 							name: "code-block-panel-tool",
 							fn: withCtx(({ id, data }) => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
-								key: 0,
 								id,
 								data
-							}) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
+							}, void 0, void 0, 0) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "5"
 						} : void 0,
 						config.$key === "code-block" || config.slots?.codeBlockPanelSearch ? {
 							name: "code-block-panel-search",
-							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-search", { key: 0 }) : config.slots?.codeBlockPanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-search", {}, void 0, void 0, 0) : config.slots?.codeBlockPanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "6"
 						} : void 0,
 						config.$key === "layer" || config.slots?.layerNodeContent ? {
 							name: "layer-node-content",
-							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
-								key: 0,
-								data: nodeData
-							}) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData }, void 0, void 0, 0) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
 								key: 1,
 								data: nodeData
 							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
@@ -248,10 +239,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						} : void 0,
 						config.$key === "layer" || config.slots?.layerNodeLabel ? {
 							name: "layer-node-label",
-							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-label", {
-								key: 0,
-								data: nodeData
-							}) : config.slots?.layerNodeLabel ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData }, void 0, void 0, 0) : config.slots?.layerNodeLabel ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
 								key: 1,
 								data: nodeData
 							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
@@ -259,10 +247,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						} : void 0,
 						config.$key === "layer" || config.slots?.layerNodeTool ? {
 							name: "layer-node-tool",
-							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", {
-								key: 0,
-								data: nodeData
-							}) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, void 0, void 0, 0) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
 								key: 1,
 								data: nodeData
 							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
@@ -270,15 +255,12 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 						} : void 0,
 						config.$key === "data-source" || config.slots?.dataSourcePanelTool ? {
 							name: "data-source-panel-tool",
-							fn: withCtx(({ data }) => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", {
-								key: 0,
-								data
-							}) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(({ data }) => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", { data }, void 0, void 0, 0) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "10"
 						} : void 0,
 						config.$key === "data-source" || config.slots?.dataSourcePanelSearch ? {
 							name: "data-source-panel-search",
-							fn: withCtx(() => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-search", { key: 0 }) : config.slots?.dataSourcePanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.dataSourcePanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
+							fn: withCtx(() => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-search", {}, void 0, void 0, 0) : config.slots?.dataSourcePanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.dataSourcePanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
 							key: "11"
 						} : void 0
 					]), 1040)) : createCommentVNode("v-if", true)], 2)), [[vShow, [
@@ -301,6 +283,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"onUpdate:height": _cache[2] || (_cache[2] = ($event) => columnLeftHeight.value = $event),
 					width: columnLeftWidth.value,
 					title: config.text,
+					"framework-width": frameworkWidth.value,
 					position: {
 						left: unref(floatBoxStates)[config.$key].left,
 						top: unref(floatBoxStates)[config.$key].top
@@ -317,6 +300,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"height",
 					"width",
 					"title",
+					"framework-width",
 					"position"
 				])) : createCommentVNode("v-if", true)], 64);
 			}), 256))]))], 64);

package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.vue_vue_type_script_setup_true_lang.js

@@ -37,10 +37,10 @@ var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const editDialogCloseHandler = () => {
 			if (codeBlockListRef.value) for (const [, status] of codeBlockListRef.value.nodeStatusMap.entries()) status.selected = false;
 		};
-		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu((id) => {
+		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler, getTarget } = useContentMenu((id) => {
 			codeBlockListRef.value?.deleteCode(id, { historySource: "tree-contextmenu" });
 		});
-		const menuData = computed(() => props.customContentMenu(contentMenuData, "code-block"));
+		const menuData = computed(() => props.customContentMenu(contentMenuData, "code-block", getTarget));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {

package/dist/es/layouts/sidebar/code-block/useContentMenu.js

@@ -6,6 +6,14 @@ var useContentMenu = (deleteCode) => {
 	const eventBus = inject("eventBus");
 	const menuRef = useTemplateRef("menu");
 	let selectId = "";
+	let selectData = null;
+	const getTarget = () => {
+		if (!selectId) return null;
+		return {
+			id: selectId,
+			data: selectData ?? void 0
+		};
+	};
 	const menuData = [
 		{
 			type: "button",
@@ -43,17 +51,24 @@ var useContentMenu = (deleteCode) => {
 		event.preventDefault();
 		if (data.type === "code") {
 			menuRef.value?.show(event);
-			if (data.id) selectId = `${data.id}`;
-			else selectId = "";
+			if (data.id) {
+				selectId = `${data.id}`;
+				selectData = data;
+			} else {
+				selectId = "";
+				selectData = null;
+			}
 		}
 	};
 	const contentMenuHideHandler = () => {
 		selectId = "";
+		selectData = null;
 	};
 	return {
 		menuData,
 		nodeContentMenuHandler,
-		contentMenuHideHandler
+		contentMenuHideHandler,
+		getTarget
 	};
 };
 //#endregion

package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.vue_vue_type_script_setup_true_lang.js

@@ -39,6 +39,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 		const dataSourceConfig = ref([]);
 		const { height: editorHeight } = useEditorContentHeight();
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		/** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
 		provide("editingDataSourceMethodName", computed(() => props.editMethodName));
 		/** 供「数据定义」tab 内的字段消费，用于打开数据源详情后自动打开指定字段 */
@@ -77,6 +78,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FloatingBox_default, {
+				"body-style": { padding: "0 16px" },
 				visible: boxVisible.value,
 				"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
 				width: width.value,
@@ -84,6 +86,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 				height: unref(editorHeight),
 				"onUpdate:height": _cache[2] || (_cache[2] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 				title: __props.title,
+				"framework-width": frameworkWidth.value,
 				position: unref(boxPosition)
 			}, {
 				body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -107,6 +110,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PUR
 				"width",
 				"height",
 				"title",
+				"framework-width",
 				"position"
 			]);
 		};

package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js

@@ -85,8 +85,8 @@ var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		eventBus?.on("remove-data-source", (id) => {
 			removeHandler(id);
 		});
-		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu();
-		const menuData = computed(() => props.customContentMenu(contentMenuData, "data-source"));
+		const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler, getTarget } = useContentMenu();
+		const menuData = computed(() => props.customContentMenu(contentMenuData, "data-source", getTarget));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {

package/dist/es/layouts/sidebar/data-source/useContentMenu.js

@@ -6,6 +6,14 @@ var useContentMenu = () => {
 	const eventBus = inject("eventBus");
 	const menuRef = useTemplateRef("menu");
 	let selectId = "";
+	let selectData = null;
+	const getTarget = () => {
+		if (!selectId) return null;
+		return {
+			id: selectId,
+			data: selectData ?? void 0
+		};
+	};
 	const menuData = [
 		{
 			type: "button",
@@ -42,17 +50,24 @@ var useContentMenu = () => {
 		event.preventDefault();
 		if (data.type === "ds") {
 			menuRef.value?.show(event);
-			if (data.id) selectId = `${data.id}`;
-			else selectId = "";
+			if (data.id) {
+				selectId = `${data.id}`;
+				selectData = data;
+			} else {
+				selectId = "";
+				selectData = null;
+			}
 		}
 	};
 	const contentMenuHideHandler = () => {
 		selectId = "";
+		selectData = null;
 	};
 	return {
 		menuData,
 		nodeContentMenuHandler,
-		contentMenuHideHandler
+		contentMenuHideHandler,
+		getTarget
 	};
 };
 //#endregion

package/dist/es/layouts/sidebar/layer/LayerNodeContent.js

@@ -0,0 +1,5 @@
+import LayerNodeContent_vue_vue_type_script_setup_true_lang_default from "./LayerNodeContent.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/layer/LayerNodeContent.vue
+var LayerNodeContent_default = LayerNodeContent_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LayerNodeContent_default as default };

package/dist/es/layouts/sidebar/layer/LayerNodeContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import { useServices } from "../../../hooks/use-services.js";
+import Icon_default from "../../../components/Icon.js";
+import { TMagicTooltip, stripValidateSuggestion } from "@tmagic/design";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { WarningFilled } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/layer/LayerNodeContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-editor-layer-node-label" };
+var _hoisted_2 = ["innerHTML"];
+var LayerNodeContent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorLayerNodeContent",
+	__name: "LayerNodeContent",
+	props: { data: {} },
+	setup(__props) {
+		const props = __props;
+		const { editorService } = useServices();
+		const label = computed(() => `${props.data.name} (${props.data.id})`);
+		/** 读取集中存储的校验错误状态，建立响应式依赖 */
+		const invalidInfo = computed(() => editorService.get("invalidNodeIds").get(props.data.id));
+		const hasError = computed(() => Boolean(invalidInfo.value?.props || invalidInfo.value?.style));
+		/**
+		* 去掉单条校验文案中的「修改建议」部分。
+		*
+		* 错误文案可能是多条错误以 `<br>` 拼接的 HTML，每条本身形如 `主文案\n\n建议`。
+		* 组件树 tooltip 仅展示错误描述，不展示修改建议（建议仅在错误汇总面板展示），
+		* 故先按 `<br>` 拆分，每段用 `stripValidateSuggestion` 截断建议后再拼回。
+		*/
+		const stripSuggestion = (text) => String(text ?? "").split(/<br\s*\/?>/i).map((segment) => stripValidateSuggestion(segment)).join("<br>");
+		/** 合并属性表单与样式表单的错误文案（去掉建议，本身可能仍是含 <br> 的 HTML） */
+		const errorMessage = computed(() => [stripSuggestion(invalidInfo.value?.props), stripSuggestion(invalidInfo.value?.style)].filter(Boolean).join("<br>"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(["m-editor-layer-node-content", { "is-invalid": hasError.value }]) }, [createElementVNode("span", _hoisted_1, toDisplayString(label.value), 1), hasError.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+				key: 0,
+				placement: "top"
+			}, {
+				content: withCtx(() => [createElementVNode("span", { innerHTML: errorMessage.value }, null, 8, _hoisted_2)]),
+				default: withCtx(() => [createVNode(Icon_default, {
+					class: "m-editor-layer-node-error-icon",
+					icon: unref(WarningFilled)
+				}, null, 8, ["icon"])]),
+				_: 1
+			})) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { LayerNodeContent_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,7 @@ import { useFilter } from "../../../hooks/use-filter.js";
 import SearchInput_default from "../../../components/SearchInput.js";
 import Tree_default from "../../../components/Tree.js";
 import LayerMenu_default from "./LayerMenu.js";
+import LayerNodeContent_default from "./LayerNodeContent.js";
 import LayerNodeTool_default from "./LayerNodeTool.js";
 import { useClick } from "./use-click.js";
 import { useDrag } from "./use-drag.js";
@@ -83,7 +84,7 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					}, {
 						"tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })]),
 						"tree-node-tool": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [createVNode(LayerNodeTool_default, { data: nodeData }, null, 8, ["data"])])]),
-						"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData })]),
+						"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData }, () => [createVNode(LayerNodeContent_default, { data: nodeData }, null, 8, ["data"])])]),
 						_: 3
 					}, 8, [
 						"data",

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

@@ -11,7 +11,8 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	__name: "NodeListMenu",
 	setup(__props) {
 		const services = useServices();
-		const { editorService } = services;
+		const { editorService, uiService } = services;
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		const visible = ref(false);
 		const buttonVisible = ref(false);
 		const buttonEl = useTemplateRef("button");
@@ -71,6 +72,7 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				visible: visible.value,
 				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
 				title: "当前位置下的组件",
+				"framework-width": frameworkWidth.value,
 				position: menuPosition.value
 			}, {
 				body: withCtx(() => [createVNode(Tree_default, {
@@ -80,7 +82,11 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					onNodeClick: clickHandler
 				}, null, 8, ["data", "node-status-map"])]),
 				_: 1
-			}, 8, ["visible", "position"])) : createCommentVNode("v-if", true)], 64);
+			}, 8, [
+				"visible",
+				"framework-width",
+				"position"
+			])) : createCommentVNode("v-if", true)], 64);
 		};
 	}
 });

package/dist/es/plugin.js

@@ -1,4 +1,5 @@
 import { setEditorConfig } from "./utils/config.js";
+import { editorTypeMatchRules } from "./utils/type-match-rules.js";
 import CodeEditor_default from "./layouts/CodeEditor.js";
 import Editor_default from "./Editor.js";
 import CodeSelect_default from "./fields/CodeSelect.js";
@@ -20,7 +21,7 @@ import Code_default from "./fields/Code.js";
 import CodeLink_default from "./fields/CodeLink.js";
 import UISelect_default from "./fields/UISelect.js";
 /* empty css            */
-import formPlugin from "@tmagic/form";
+import formPlugin, { registerTypeMatchRules } from "@tmagic/form";
 import tablePlugin from "@tmagic/table";
 import designPlugin from "@tmagic/design";
 //#region packages/editor/src/plugin.ts
@@ -34,6 +35,7 @@ var plugin_default = { install: (app, opt) => {
 	app.use(designPlugin, opt || {});
 	app.use(formPlugin, opt || {});
 	app.use(tablePlugin);
+	registerTypeMatchRules(editorTypeMatchRules);
 	app.config.globalProperties.$TMAGIC_EDITOR = option;
 	setEditorConfig(option);
 	app.component(`${Editor_default.name || "MEditor"}`, Editor_default);

package/dist/es/services/codeBlock.js

@@ -1,6 +1,6 @@
 import { CODE_DRAFT_STORAGE_KEY } from "../type.js";
-import BaseService from "./BaseService.js";
 import { getEditorConfig } from "../utils/config.js";
+import BaseService from "./BaseService.js";
 import { createStackStep, describeRevertStep, getLastPushedHistoryIds } from "../utils/history.js";
 import history_default from "./history.js";
 import storage_default, { Protocol } from "./storage.js";