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

package/dist/es/layouts/page-bar/PageBar.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import AddButton_default from "./AddButton.js";
 import PageBarScrollContainer_default from "./PageBarScrollContainer.js";
 import PageList_default from "./PageList.js";
 import Search_default from "./Search.js";
-import { TMagicIcon, TMagicPopover } from "@tmagic/design";
+import { TMagicIcon, TMagicPopover, tMagicMessageBox } from "@tmagic/design";
 import { NodeType } from "@tmagic/core";
 import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
 import { CaretBottom, Delete, DocumentCopy } from "@element-plus/icons-vue";
@@ -13,7 +13,7 @@ var _hoisted_1 = { class: "m-editor-page-bar-tabs" };
 var _hoisted_2 = ["data-page-id", "onClick"];
 var _hoisted_3 = { class: "m-editor-page-bar-title" };
 var _hoisted_4 = ["title"];
-var PageBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PageBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorPageBar",
 	__name: "PageBar",
 	props: {
@@ -54,7 +54,8 @@ var PageBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				top: 0
 			});
 		};
-		const remove = (node) => {
+		const remove = async (node) => {
+			await tMagicMessageBox.confirm("确定删除该页面吗？");
 			editorService.remove(node);
 		};
 		const pageBarScrollContainerRef = useTemplateRef("pageBarScrollContainer");
@@ -121,6 +122,7 @@ var PageBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 							type: "button",
 							text: "删除",
 							icon: unref(Delete),
+							buttonProps: { type: "danger" },
 							handler: () => remove(item)
 						} }, null, 8, ["data"])])])]),
 						_: 2

package/dist/es/layouts/page-bar/PageBarScrollContainer.vue_vue_type_script_setup_true_lang.js

@@ -13,7 +13,7 @@ var _hoisted_2 = {
 	class: "m-editor-page-bar-items",
 	ref: "itemsContainer"
 };
-var PageBarScrollContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PageBarScrollContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorPageBarScrollContainer",
 	__name: "PageBarScrollContainer",
 	props: {

package/dist/es/layouts/page-bar/PageList.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ var _hoisted_1 = {
 };
 var _hoisted_2 = { class: "page-bar-popover-wrapper" };
 var _hoisted_3 = { class: "page-bar-popover-inner" };
-var PageList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PageList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorPageList",
 	__name: "PageList",
 	props: { list: {} },

package/dist/es/layouts/page-bar/Search.vue_vue_type_script_setup_true_lang.js

@@ -5,13 +5,13 @@ import { Teleport, createBlock, createCommentVNode, createElementBlock, createVN
 import { Search } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/page-bar/Search.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
-var Search_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Search_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Search",
 	props: {
 		"query": {},
 		"queryModifiers": {}
 	},
-	emits: /* @__PURE__ */ mergeModels(["search"], ["update:query"]),
+	emits: /*@__PURE__*/ mergeModels(["search"], ["update:query"]),
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const query = useModel(__props, "query");

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

@@ -2,13 +2,15 @@ import { useServices } from "../../hooks/use-services.js";
 import { useEditorContentHeight } from "../../hooks/use-editor-content-height.js";
 import Icon_default from "../../components/Icon.js";
 import CodeEditor_default from "../CodeEditor.js";
-import { MForm } from "@tmagic/form";
-import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
+import { ENABLE_PROPS_FORM_VALIDATE } from "../../editorProps.js";
+import { MForm, validateForm } from "@tmagic/form";
+import { TMagicButton, TMagicScrollbar, tMagicMessage } from "@tmagic/design";
+import { filterXSS } from "@tmagic/utils";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, inject, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderSlot, unref, useTemplateRef, watchEffect, withCtx } from "vue";
 import { Document } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/props-panel/FormPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-props-form-panel" };
-var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorFormPanel",
 	__name: "FormPanel",
 	props: {
@@ -30,6 +32,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
 		const services = useServices();
 		const { editorService, uiService } = services;
 		const codeOptions = inject("codeOptions", {});
@@ -53,16 +56,54 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		});
 		const submit = async (v, eventData) => {
 			try {
-				emit("submit", await configFormRef.value?.submitForm(), eventData);
+				const values = await configFormRef.value?.submitForm();
+				emit("submit", values, eventData);
 			} catch (e) {
-				emit("submit-error", e);
+				if (enablePropsFormValidate) emit("submit", v, eventData, e);
+				else emit("submit-error", e);
 			}
 		};
 		const errorHandler = (e) => {
 			emit("form-error", e);
 		};
-		const saveCode = (values) => {
-			emit("submit", props.codeValueKey ? { [props.codeValueKey]: values } : values);
+		/**
+		* 将校验错误文案安全地转为用于弹窗展示的 HTML。
+		*
+		* 文案形如 `字段 -> 主文案\n\n建议`，多条以结构性 `<br>` 拼接。为在保留换行排版的同时
+		* 避免 `${value}`/字段名中可能夹带的 HTML 造成 XSS：先按结构性 `<br>` 拆分，对每段做 HTML
+		* 转义后再把段内换行 `\n` 替换为 `<br>`，最后用 `<br>` 拼回。
+		*/
+		const formatValidateErrorHtml = (error) => error.split(/<br\s*\/?>/i).map((segment) => filterXSS(segment).replaceAll("\n", "<br>")).join("<br>");
+		const saveCode = async (values) => {
+			const newValues = props.codeValueKey ? { [props.codeValueKey]: values } : values;
+			if (!enablePropsFormValidate) {
+				emit("submit", newValues);
+				return;
+			}
+			try {
+				const error = await validateForm({
+					config: props.config,
+					typeMatchValid: true,
+					initValues: newValues,
+					appContext: internalInstance?.appContext ? {
+						...internalInstance?.appContext,
+						provides: { services }
+					} : null,
+					extendState: (state) => {
+						if (configFormRef.value?.formState) return { ...configFormRef.value?.formState || {} };
+						return props.extendState?.(state) || {};
+					}
+				});
+				if (error) tMagicMessage({
+					type: "error",
+					message: formatValidateErrorHtml(error),
+					dangerouslyUseHTMLString: true
+				});
+				emit("submit", newValues, void 0, error ? new Error(error) : void 0);
+			} catch (e) {
+				console.log("validateForm error", e);
+				emit("submit", newValues);
+			}
 		};
 		__expose({
 			configForm: configFormRef,
@@ -81,7 +122,9 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						size: propsPanelSize.value,
 						"init-values": __props.values,
 						config: __props.config,
+						"type-match-valid": true,
 						"extend-state": __props.extendState,
+						"validate-on-init": true,
 						onChange: submit,
 						onError: errorHandler
 					}, null, 8, [

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 = {
@@ -16,7 +17,7 @@ var _hoisted_1 = {
 	class: "m-editor-props-panel"
 };
 var _hoisted_2 = { class: "m-editor-props-style-panel-title" };
-var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorPropsPanel",
 	__name: "PropsPanel",
 	props: {
@@ -32,6 +33,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 	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"));
@@ -40,36 +42,54 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			tabPosition: "right",
 			items: styleTabConfig.items
 		}];
+		let initSeq = 0;
+		let mounted = true;
 		const init = async () => {
+			initSeq += 1;
+			const seq = initSeq;
 			if (!node.value) {
+				if (seq !== initSeq || !mounted) return;
 				curFormConfig.value = [];
 				return;
 			}
 			const type = node.value.type || (node.value.items ? "container" : "text");
-			curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
+			const config = await propsService.getPropsConfig(type, { node: node.value });
+			if (seq !== initSeq || !mounted) return;
+			if (!node.value) return;
+			curFormConfig.value = config;
 			values.value = node.value;
 		};
 		watchEffect(init);
 		propsService.on("props-configs-change", init);
 		onBeforeUnmount(() => {
+			mounted = false;
 			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 = {
 					...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);
 					});
-				}
-				editorService.update(newValue, { changeRecords: eventData?.changeRecords });
+				} else newValue.style = { ...v.style };
+				const historySource = eventData ? "props" : "code";
+				editorService.update(newValue, {
+					changeRecords: eventData?.changeRecords,
+					historySource,
+					...enablePropsFormValidate && error ? { invalidInfo: {
+						id: newValue.id,
+						source,
+						error: error?.message
+					} } : {}
+				});
 			} catch (e) {
 				emit("submit-error", e);
 			}
@@ -119,7 +139,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					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,
@@ -144,14 +164,14 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					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
@@ -166,7 +186,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					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/ComponentListPanel.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,7 @@ import { Grid } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/ComponentListPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["onClick", "onDragstart"];
 var _hoisted_2 = ["title"];
-var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorComponentListPanel",
 	__name: "ComponentListPanel",
 	setup(__props) {
@@ -37,7 +37,7 @@ var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 				name: text,
 				type,
 				...data
-			});
+			}, void 0, { historySource: "component-panel" });
 		};
 		const dragstartHandler = ({ text, type, data = {} }, e) => {
 			e.dataTransfer?.setData("text/json", serialize({
@@ -70,7 +70,7 @@ var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 				return;
 			}
 			if (timeout || !stage.value) return;
-			timeout = stage.value.delayedMarkContainer(e);
+			timeout = stage.value.delayedMarkContainer(e, [], true);
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TMagicScrollbar), null, {

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

@@ -9,7 +9,7 @@ import DataSourceListPanel_default from "./data-source/DataSourceListPanel.js";
 import LayerPanel_default from "./layer/LayerPanel.js";
 import ComponentListPanel_default from "./ComponentListPanel.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toHandlers, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
-import { Close, Coin, EditPen, Goods, List } from "@element-plus/icons-vue";
+import { Box, Close, Coin, EditPen, Finished } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -30,7 +30,7 @@ var _hoisted_5 = {
 	class: "m-editor-sidebar-tips"
 };
 var _hoisted_6 = { class: "m-editor-slide-list-box" };
-var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorSidebar",
 	__name: "Sidebar",
 	props: {
@@ -61,6 +61,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		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) => {
@@ -71,21 +72,25 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				});
 			}
 		}, { immediate: true });
-		const activeTabName = ref(props.data?.status);
+		const activeTabName = computed({
+			get: () => uiService.get("sideBarActiveTabName"),
+			set: (value) => uiService.set("sideBarActiveTabName", value)
+		});
+		uiService.set("sideBarActiveTabName", props.data?.status || "");
 		const getItemConfig = (data) => {
 			const map = {
 				[SideItemKey.COMPONENT_LIST]: {
 					$key: SideItemKey.COMPONENT_LIST,
 					type: "component",
-					icon: Goods,
+					icon: Box,
 					text: "组件",
 					component: ComponentListPanel_default,
 					slots: {}
 				},
 				layer: {
-					$key: "layer",
+					$key: SideItemKey.LAYER,
 					type: "component",
-					icon: List,
+					icon: Finished,
 					text: "已选组件",
 					props: {
 						layerContentMenu: props.layerContentMenu,
@@ -101,7 +106,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					slots: {}
 				},
 				[SideItemKey.CODE_BLOCK]: {
-					$key: "code-block",
+					$key: SideItemKey.CODE_BLOCK,
 					type: "component",
 					icon: EditPen,
 					text: "代码编辑",
@@ -185,23 +190,17 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					}, 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)]),
@@ -209,34 +208,30 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						} : 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)]),
@@ -244,10 +239,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						} : 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)]),
@@ -255,10 +247,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						} : 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)]),
@@ -266,15 +255,12 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						} : 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, [
@@ -297,6 +283,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"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
@@ -313,6 +300,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"height",
 					"width",
 					"title",
+					"framework-width",
 					"position"
 				])) : createCommentVNode("v-if", true)], 64);
 			}), 256))]))], 64);

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

@@ -9,7 +9,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/code-block/CodeBlockList.vue?vue&type=script&setup=true&lang.ts
-var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeBlockList",
 	__name: "CodeBlockList",
 	props: {
@@ -78,7 +78,7 @@ var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const editCode = (id) => {
 			emit("edit", id);
 		};
-		const deleteCode = async (id) => {
+		const deleteCode = async (id, { historySource } = {}) => {
 			const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
 			const existBinds = Boolean(currentCode?.items?.length);
 			const undeleteableList = codeBlockService.getUndeletableList() || [];
@@ -88,7 +88,7 @@ var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					cancelButtonText: "取消",
 					type: "warning"
 				});
-				emit("remove", id);
+				emit("remove", id, { historySource });
 			} else if (typeof props.customError === "function") props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
 			else if (existBinds) tMagicMessage.error("代码块存在绑定关系，不可删除");
 			else tMagicMessage.error("代码块不可删除");
@@ -138,7 +138,7 @@ var CodeBlockList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						default: withCtx(() => [createVNode(Icon_default, {
 							icon: unref(Close),
 							class: "edit-icon",
-							onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
+							onClick: withModifiers(($event) => deleteCode(`${data.key}`, { historySource: "tree" }), ["stop"])
 						}, null, 8, ["icon", "onClick"])]),
 						_: 2
 					}, 1024)) : createCommentVNode("v-if", true),

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

@@ -9,7 +9,7 @@ import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, openBlock, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "search-wrapper" };
-var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeBlockListPanel",
 	__name: "CodeBlockListPanel",
 	props: {
@@ -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) => {
-			codeBlockListRef.value?.deleteCode(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",
@@ -26,7 +34,7 @@ var useContentMenu = (deleteCode) => {
 				const codeBlock = codeBlockService.getCodeContentById(selectId);
 				if (!codeBlock) return;
 				const newCodeId = await codeBlockService.getUniqueId();
-				codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock));
+				codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock), { historySource: "tree-contextmenu" });
 			}
 		},
 		{
@@ -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