@tmagic/editor 1.8.0-beta.2 → 1.8.0-beta.21

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

@@ -2,7 +2,7 @@ import ToolButton_default from "../../../components/ToolButton.js";
 import { TMagicButton, TMagicPopover } from "@tmagic/design";
 import { Fragment, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/data-source/DataSourceAddButton.vue?vue&type=script&setup=true&lang.ts
-var DataSourceAddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceAddButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorDataSourceAddButton",
 	__name: "DataSourceAddButton",
 	props: {

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

@@ -4,15 +4,17 @@ import { useNextFloatBoxPosition } from "../../../hooks/use-next-float-box-posit
 import FloatingBox_default from "../../../components/FloatingBox.js";
 import { MFormBox } from "@tmagic/form";
 import { tMagicMessage } from "@tmagic/design";
-import { createBlock, createVNode, defineComponent, inject, isRef, mergeModels, nextTick, openBlock, ref, unref, useModel, watch, watchEffect, withCtx } from "vue";
+import { computed, createBlock, createVNode, defineComponent, inject, isRef, mergeModels, nextTick, openBlock, provide, ref, unref, useModel, watch, watchEffect, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue?vue&type=script&setup=true&lang.ts
-var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorDataSourceConfigPanel",
 	__name: "DataSourceConfigPanel",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		title: {},
 		values: {},
-		disabled: { type: Boolean }
+		disabled: { type: Boolean },
+		editMethodName: {},
+		editFieldPath: {}
 	}, {
 		"visible": {
 			type: Boolean,
@@ -22,7 +24,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PU
 		"width": { default: 670 },
 		"widthModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels([
+	emits: /*@__PURE__*/ mergeModels([
 		"submit",
 		"close",
 		"open"
@@ -37,9 +39,21 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PU
 		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 内的字段消费，用于打开数据源详情后自动打开指定字段 */
+		provide("editingDataSourceFieldPath", computed(() => props.editFieldPath || []));
 		watchEffect(() => {
 			initValues.value = props.values;
-			dataSourceConfig.value = dataSourceService.getFormConfig(initValues.value.type);
+			const config = dataSourceService.getFormConfig(initValues.value.type);
+			let activeTab = "fields";
+			if (props.editMethodName) activeTab = "methods";
+			else if (props.editFieldPath?.length) activeTab = "fields";
+			dataSourceConfig.value = config.map((item) => item.type === "tab" ? {
+				...item,
+				active: activeTab
+			} : item);
 		});
 		const submitHandler = (values, data) => {
 			emit("submit", values, data);
@@ -64,6 +78,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PU
 		});
 		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,
@@ -71,6 +86,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PU
 				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), {
@@ -94,6 +110,7 @@ var DataSourceConfigPanel_vue_vue_type_script_setup_true_lang_default = /* @__PU
 				"width",
 				"height",
 				"title",
+				"framework-width",
 				"position"
 			]);
 		};

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

@@ -8,7 +8,7 @@ import { DepTargetType } from "@tmagic/core";
 import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 import { Close, Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue?vue&type=script&setup=true&lang.ts
-var DataSourceList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorDataSourceList",
 	__name: "DataSourceList",
 	props: {

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

@@ -7,11 +7,11 @@ import DataSourceConfigPanel_default from "./DataSourceConfigPanel.js";
 import DataSourceList_default from "./DataSourceList.js";
 import { useContentMenu } from "./useContentMenu.js";
 import { TMagicScrollbar, tMagicMessageBox } from "@tmagic/design";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, ref, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
 import { mergeWith } from "lodash-es";
 //#region packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "search-wrapper" };
-var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorDataSourceListPanel",
 	__name: "DataSourceListPanel",
 	props: {
@@ -24,7 +24,13 @@ var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		const eventBus = inject("eventBus");
 		const { dataSourceService } = useServices();
 		const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
+		/** 打开数据源详情时需要直接定位并打开的方法名，为空则正常展示「数据定义」tab */
+		const editMethodName = ref("");
+		/** 打开数据源详情时需要直接定位并打开的字段路径，为空则不自动打开字段配置 */
+		const editFieldPath = ref([]);
 		const editDialogCloseHandler = () => {
+			editMethodName.value = "";
+			editFieldPath.value = [];
 			if (dataSourceListRef.value) for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) status.selected = false;
 		};
 		watch(dataSourceValues, (dataSourceValues) => {
@@ -55,20 +61,32 @@ var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				cancelButtonText: "取消",
 				type: "warning"
 			});
-			dataSourceService.remove(id);
+			dataSourceService.remove(id, { historySource: "tree-contextmenu" });
 		};
 		const dataSourceListRef = useTemplateRef("dataSourceList");
 		const filterTextChangeHandler = (val) => {
 			dataSourceListRef.value?.filter(val);
 		};
 		eventBus?.on("edit-data-source", (id) => {
+			editMethodName.value = "";
+			editFieldPath.value = [];
+			editHandler(id);
+		});
+		eventBus?.on("edit-data-source-method", (id, methodName) => {
+			editMethodName.value = methodName;
+			editFieldPath.value = [];
+			editHandler(id);
+		});
+		eventBus?.on("edit-data-source-field", (id, fieldPath) => {
+			editMethodName.value = "";
+			editFieldPath.value = fieldPath;
 			editHandler(id);
 		});
 		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" }, {
@@ -110,12 +128,16 @@ var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 					disabled: !unref(editable),
 					values: unref(dataSourceValues),
 					title: unref(dialogTitle),
+					"edit-method-name": editMethodName.value,
+					"edit-field-path": editFieldPath.value,
 					onSubmit: unref(submitDataSourceHandler),
 					onClose: editDialogCloseHandler
 				}, null, 8, [
 					"disabled",
 					"values",
 					"title",
+					"edit-method-name",
+					"edit-field-path",
 					"onSubmit"
 				]),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [menuData.value.length ? (openBlock(), createBlock(ContentMenu_default, {

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",
@@ -25,7 +33,7 @@ var useContentMenu = () => {
 				if (!selectId) return;
 				const ds = dataSourceService.getDataSourceById(selectId);
 				if (!ds) return;
-				dataSourceService.add(cloneDeep(ds));
+				dataSourceService.add(cloneDeep(ds), { historySource: "tree-contextmenu" });
 			}
 		},
 		{
@@ -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/LayerMenu.vue_vue_type_script_setup_true_lang.js

@@ -2,11 +2,11 @@ import { useServices } from "../../../hooks/use-services.js";
 import ContentMenu_default from "../../../components/ContentMenu.js";
 import FolderMinusIcon_default from "../../../icons/FolderMinusIcon.js";
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from "../../../utils/content-menu.js";
-import { isPage, isPageFragment } from "@tmagic/utils";
+import { isPageOrFragment } from "@tmagic/utils";
 import { computed, createBlock, defineComponent, markRaw, openBlock, useTemplateRef } from "vue";
 import { Files, Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerMenu.vue?vue&type=script&setup=true&lang.ts
-var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorLayerMenu",
 	__name: "LayerMenu",
 	props: {
@@ -32,7 +32,7 @@ var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					name: component.text,
 					type: component.type,
 					...component.data || {}
-				});
+				}, void 0, { historySource: "tree-contextmenu" });
 			}
 		}));
 		const getSubMenuData = computed(() => {
@@ -41,7 +41,7 @@ var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				type: "button",
 				icon: Files,
 				handler: () => {
-					editorService.add({ type: "tab-pane" });
+					editorService.add({ type: "tab-pane" }, void 0, { historySource: "tree-contextmenu" });
 				}
 			}];
 			if (node.value?.items) return componentList.value.reduce((subMenuData, group, index) => subMenuData.concat(createMenuItems(group), index < componentList.value.length - 1 ? [{
@@ -55,7 +55,7 @@ var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				type: "button",
 				text: "全部折叠",
 				icon: FolderMinusIcon_default,
-				display: () => isPage(node.value) || isPageFragment(node.value),
+				display: () => isPageOrFragment(node.value),
 				handler: () => {
 					emit("collapse-all");
 				}
@@ -68,9 +68,9 @@ var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				items: getSubMenuData.value
 			},
 			useCopyMenu(),
-			usePasteMenu(),
-			useDeleteMenu(),
-			useMoveToMenu(services),
+			usePasteMenu("tree-contextmenu"),
+			useDeleteMenu("tree-contextmenu"),
+			useMoveToMenu(services, "tree-contextmenu"),
 			...props.layerContentMenu
 		], "layer"));
 		const show = (e) => {

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/LayerNodeTool.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { TMagicButton } from "@tmagic/design";
 import { createBlock, createCommentVNode, defineComponent, openBlock, unref, withModifiers } from "vue";
 import { Hide, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue?vue&type=script&setup=true&lang.ts
-var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "LayerNodeTool",
 	props: { data: {} },
 	setup(__props) {
@@ -13,7 +13,7 @@ var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			editorService.update({
 				id: props.data.id,
 				visible
-			});
+			}, { historySource: "tree" });
 		};
 		return (_ctx, _cache) => {
 			return __props.data.type !== "page" ? (openBlock(), createBlock(unref(TMagicButton), {

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";
@@ -11,7 +12,7 @@ import { useNodeStatus } from "./use-node-status.js";
 import { TMagicScrollbar } from "@tmagic/design";
 import { Teleport, computed, createBlock, createCommentVNode, createVNode, defineComponent, openBlock, renderSlot, unref, useTemplateRef, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerPanel.vue?vue&type=script&setup=true&lang.ts
-var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorLayerPanel",
 	__name: "LayerPanel",
 	props: {
@@ -83,7 +84,7 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					}, {
 						"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/sidebar/layer/use-click.js

@@ -1,6 +1,6 @@
 import { UI_SELECT_MODE_EVENT_NAME } from "../../../utils/const.js";
 import { updateStatus } from "../../../utils/tree.js";
-import { getElById, isPage, isPageFragment } from "@tmagic/utils";
+import { getElById, isPageOrFragment } from "@tmagic/utils";
 import { computed, nextTick } from "vue";
 import { throttle } from "lodash-es";
 //#region packages/editor/src/layouts/sidebar/layer/use-click.ts
@@ -16,7 +16,7 @@ var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown
 		}
 	};
 	const multiSelect = async (data) => {
-		if (isPage(data) || isPageFragment(data)) return;
+		if (isPageOrFragment(data)) return;
 		const nodes = editorService.get("nodes") || [];
 		const newNodes = [];
 		let isCancel = false;
@@ -25,7 +25,7 @@ var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown
 				isCancel = true;
 				return;
 			}
-			if (isPage(node) || isPageFragment(node)) return;
+			if (isPageOrFragment(node)) return;
 			newNodes.push(node.id);
 		});
 		if (!isCancel || newNodes.length === 0) newNodes.push(data.id);

package/dist/es/layouts/sidebar/layer/use-node-status.js

@@ -1,5 +1,5 @@
 import { updateStatus } from "../../../utils/tree.js";
-import { getNodePath, isPage, isPageFragment, traverseNode } from "@tmagic/utils";
+import { getNodePath, isPageOrFragment, traverseNode } from "@tmagic/utils";
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 //#region packages/editor/src/layouts/sidebar/layer/use-node-status.ts
 var createPageNodeStatus = (page, initialLayerNodeStatus) => {
@@ -75,7 +75,7 @@ var useNodeStatus = ({ editorService }) => {
 	}, { immediate: true });
 	const addHandler = (newNodes) => {
 		newNodes.forEach((node) => {
-			if (isPage(node) || isPageFragment(node)) return;
+			if (isPageOrFragment(node)) return;
 			traverseNode(node, (node) => {
 				nodeStatusMap.value?.set(node.id, {
 					visible: true,

package/dist/es/layouts/workspace/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,7 @@ var _hoisted_2 = {
 	class: "m-editor-breadcrumb-separator"
 };
 var COLLAPSE_RATIO = .8;
-var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorBreadcrumb",
 	__name: "Breadcrumb",
 	setup(__props) {

package/dist/es/layouts/workspace/Workspace.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import Breadcrumb_default from "./Breadcrumb.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, renderSlot, unref, withCtx } from "vue";
 //#region packages/editor/src/layouts/workspace/Workspace.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-workspace" };
-var Workspace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Workspace_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorWorkspace",
 	__name: "Workspace",
 	props: {

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

@@ -7,11 +7,12 @@ import { TMagicTooltip } from "@tmagic/design";
 import { getIdFromEl } from "@tmagic/utils";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, useTemplateRef, watch, withCtx } from "vue";
 //#region packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue?vue&type=script&setup=true&lang.ts
-var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__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__ */ d
 				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__ */ d
 					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/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ import { getOffset } from "@tmagic/stage";
 import { calcValueByFontsize, getIdFromEl } from "@tmagic/utils";
 import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderSlot, resolveDirective, useTemplateRef, watch, watchEffect, withCtx, withDirectives } from "vue";
 //#region packages/editor/src/layouts/workspace/viewer/Stage.vue?vue&type=script&setup=true&lang.ts
-var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Stage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorStage",
 	__name: "Stage",
 	props: {
@@ -226,7 +226,7 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					left: calcValueByFontsize(doc, left / zoom.value)
 				};
 				config.data.inputEvent = e;
-				editorService.add(config.data, parent);
+				editorService.add(config.data, parent, { historySource: "component-panel" });
 			}
 		};
 		return (_ctx, _cache) => {

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

@@ -8,7 +8,7 @@ var _hoisted_1 = {
 	key: 0,
 	class: "m-editor-stage-overlay"
 };
-var StageOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var StageOverlay_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StageOverlay",
 	setup(__props) {
 		const { stageOverlayService, editorService, uiService } = useServices();

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

@@ -3,12 +3,12 @@ import { useServices } from "../../../hooks/use-services.js";
 import ContentMenu_default from "../../../components/ContentMenu.js";
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from "../../../utils/content-menu.js";
 import CenterIcon_default from "../../../icons/CenterIcon.js";
-import { isPage, isPageFragment } from "@tmagic/utils";
+import { isPageOrFragment } from "@tmagic/utils";
 import { NodeType } from "@tmagic/core";
 import { computed, createBlock, defineComponent, markRaw, openBlock, ref, useTemplateRef, watch } from "vue";
 import { Bottom, Top } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue?vue&type=script&setup=true&lang.ts
-var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorViewerMenu",
 	__name: "ViewerMenu",
 	props: {
@@ -36,62 +36,62 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				display: () => canCenter.value,
 				handler: () => {
 					if (!nodes.value) return;
-					editorService.alignCenter(nodes.value);
+					editorService.alignCenter(nodes.value, { historySource: "stage-contextmenu" });
 				}
 			},
 			useCopyMenu(),
-			usePasteMenu(menuRef),
+			usePasteMenu("stage-contextmenu", menuRef),
 			{
 				type: "divider",
 				direction: "horizontal",
 				display: () => {
 					if (!node.value) return false;
-					return !isPage(node.value) && !isPageFragment(node.value);
+					return !isPageOrFragment(node.value);
 				}
 			},
 			{
 				type: "button",
 				text: "上移一层",
 				icon: markRaw(Top),
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
-					editorService.moveLayer(1);
+					editorService.moveLayer(1, { historySource: "stage-contextmenu" });
 				}
 			},
 			{
 				type: "button",
 				text: "下移一层",
 				icon: markRaw(Bottom),
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
-					editorService.moveLayer(-1);
+					editorService.moveLayer(-1, { historySource: "stage-contextmenu" });
 				}
 			},
 			{
 				type: "button",
 				text: "置顶",
 				icon: markRaw(Top),
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
-					editorService.moveLayer(LayerOffset.TOP);
+					editorService.moveLayer(LayerOffset.TOP, { historySource: "stage-contextmenu" });
 				}
 			},
 			{
 				type: "button",
 				text: "置底",
 				icon: markRaw(Bottom),
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
-					editorService.moveLayer(LayerOffset.BOTTOM);
+					editorService.moveLayer(LayerOffset.BOTTOM, { historySource: "stage-contextmenu" });
 				}
 			},
-			useMoveToMenu(services),
+			useMoveToMenu(services, "stage-contextmenu"),
 			{
 				type: "divider",
 				direction: "horizontal",
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect
 			},
-			useDeleteMenu(),
+			useDeleteMenu("stage-contextmenu"),
 			{
 				type: "divider",
 				direction: "horizontal"

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,20 +21,22 @@ 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
 var defaultInstallOpt = {
 	parseDSL: (dsl) => eval(dsl),
 	customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
-	customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options)
+	customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options),
+	flat: false
 };
 var plugin_default = { install: (app, opt) => {
 	const option = Object.assign(defaultInstallOpt, 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);