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

package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js

@@ -38,6 +38,8 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
 		const props = __props;
 		const hasDataSourceSidePanel = computed(() => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE));
 		const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+		/** 对比模式下隐藏查看/编辑操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const dataSources = computed(() => dataSourceService.get("dataSources"));
 		const isCustomMethod = computed(() => {
 			const [id, name] = props.model[props.name];
@@ -143,7 +145,7 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
 				"size",
 				"disabled",
 				"prop"
-			]), __props.model[__props.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+			]), __props.model[__props.name] && isCustomMethod.value && hasDataSourceSidePanel.value && !isCompare.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 0,
 				content: notEditable.value ? "查看" : "编辑"
 			}, {

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

@@ -1,11 +1,14 @@
 import CodeBlockEditor_default from "../components/CodeBlockEditor.js";
 import { MagicTable } from "@tmagic/table";
 import { TMagicButton, tMagicMessageBox } from "@tmagic/design";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, useTemplateRef, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, nextTick, openBlock, ref, unref, useTemplateRef, withCtx } from "vue";
 import { cloneDeep } from "lodash-es";
 //#region packages/editor/src/fields/DataSourceMethods.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-methods" };
-var _hoisted_2 = { class: "m-editor-data-source-methods-footer" };
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-data-source-methods-footer"
+};
 var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "MFieldsDataSourceMethods",
 	__name: "DataSourceMethods",
@@ -28,6 +31,9 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const mForm = inject("mForm");
+		/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const codeConfig = ref();
 		const codeBlockEditorRef = useTemplateRef("codeBlockEditor");
 		let editIndex = -1;
@@ -78,6 +84,8 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				}]
 			}
 		];
+		/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+		const displayColumns = computed(() => isCompare.value ? methodColumns.filter((col) => !col.actions) : methodColumns);
 		const createCodeHandler = () => {
 			codeConfig.value = {
 				name: "",
@@ -115,10 +123,10 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
 					data: __props.model[__props.name],
-					columns: methodColumns,
+					columns: displayColumns.value,
 					border: true
-				}, null, 8, ["data"]),
-				createElementVNode("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+				}, null, 8, ["data", "columns"]),
+				!isCompare.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
 					size: "small",
 					type: "primary",
 					disabled: __props.disabled,
@@ -127,9 +135,9 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				}, {
 					default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("添加", -1)])]),
 					_: 1
-				}, 8, ["disabled"])]),
+				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				codeConfig.value ? (openBlock(), createBlock(CodeBlockEditor_default, {
-					key: 0,
+					key: 1,
 					ref: "codeBlockEditor",
 					disabled: __props.disabled,
 					content: codeConfig.value,

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

@@ -7,10 +7,13 @@ import { MFormBox } from "@tmagic/form";
 import { MagicTable } from "@tmagic/table";
 import { TMagicButton, TMagicSwitch, tMagicMessageBox } from "@tmagic/design";
 import { getDefaultValueFromFields } from "@tmagic/utils";
-import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, openBlock, ref, unref, useModel, withCtx } from "vue";
+import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, openBlock, ref, unref, useModel, withCtx } from "vue";
 //#region packages/editor/src/fields/DataSourceMocks.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-fields" };
-var _hoisted_2 = { class: "m-editor-data-source-fields-footer" };
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-data-source-fields-footer"
+};
 var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "MFieldsDataSourceMocks",
 	__name: "DataSourceMocks",
@@ -42,6 +45,9 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		const props = __props;
 		const emit = __emit;
 		const { uiService } = useServices();
+		const mForm = inject("mForm");
+		/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const width = useModel(__props, "width");
 		const drawerTitle = ref("");
 		const formValues = ref({});
@@ -175,6 +181,8 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				}]
 			}
 		];
+		/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+		const displayColumns = computed(() => isCompare.value ? columns.filter((col) => !col.actions) : columns);
 		const newHandler = () => {
 			const isFirstRow = props.model[props.name].length === 0;
 			formValues.value = {
@@ -209,9 +217,9 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
 					data: __props.model[__props.name],
-					columns
-				}, null, 8, ["data"]),
-				createElementVNode("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+					columns: displayColumns.value
+				}, null, 8, ["data", "columns"]),
+				!isCompare.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
 					size: "small",
 					type: "primary",
 					disabled: __props.disabled,
@@ -220,7 +228,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				}, {
 					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("添加", -1)])]),
 					_: 1
-				}, 8, ["disabled"])]),
+				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				createVNode(FloatingBox_default, {
 					visible: addDialogVisible.value,
 					"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),

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

@@ -34,6 +34,8 @@ var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const eventBus = inject("eventBus");
 		const dataSources = computed(() => dataSourceService.get("dataSources"));
 		const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+		/** 对比模式下隐藏查看/编辑操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const hasDataSourceSidePanel = computed(() => uiService.get("sideBarItems").find((item) => item.$key === SideItemKey.DATA_SOURCE));
 		const selectConfig = computed(() => {
 			const { type, dataSourceType, value, ...config } = props.config;
@@ -80,7 +82,7 @@ var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"disabled",
 				"config",
 				"last-values"
-			]), __props.model[__props.name] && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+			]), __props.model[__props.name] && hasDataSourceSidePanel.value && !isCompare.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 0,
 				content: notEditable.value ? "查看" : "编辑"
 			}, {

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

@@ -4,7 +4,7 @@ import { MContainer, MPanel, MTable, defineFormItem } from "@tmagic/form";
 import { TMagicButton } from "@tmagic/design";
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from "@tmagic/utils";
 import { ActionType } from "@tmagic/core";
-import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
 import { has } from "lodash-es";
 import { Delete } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/EventSelect.vue?vue&type=script&setup=true&lang.ts
@@ -243,6 +243,39 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			if (props.model[props.name].length === 0) return false;
 			return !has(props.model[props.name][0], "actions");
 		});
+		/**
+		* 对比模式判定：
+		*
+		* event-select 内部由「事件列表 + 嵌套子表单」组成，属于复合字段。父级 `MFormContainer` 已将其
+		* 归入「自接管对比字段」（见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），即对比时只渲染一次本组件，
+		* 并把当前值 `model` 与历史值 `lastValues` 一并传入，由本组件把 `is-compare`/`lastValues` 透传给
+		* 内部的 MPanel / MFormContainer，逐项（事件名、动作）展示前后差异。
+		*
+		* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
+		*/
+		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
+		/**
+		* 待渲染的事件卡片列表。
+		*
+		* - 非对比模式：直接映射当前事件列表，`lastCardItem` 为空；
+		* - 对比模式：按索引对齐当前值与历史值，取两者长度的最大值，使得「新增」（仅当前有）与
+		*   「删除」（仅历史有）的事件都能被渲染出来；缺失的一侧用空对象兜底，从而让子级正确高亮差异。
+		*/
+		const displayList = computed(() => {
+			const current = props.model[props.name] || [];
+			if (!isCompareMode.value) return current.map((cardItem, index) => ({
+				cardItem,
+				lastCardItem: void 0,
+				index
+			}));
+			const last = props.lastValues?.[props.name] || [];
+			const length = Math.max(current.length, last.length);
+			return Array.from({ length }, (_, index) => ({
+				cardItem: current[index] ?? {},
+				lastCardItem: last[index] ?? {},
+				index
+			}));
+		});
 		const addEvent = () => {
 			const defaultEvent = {
 				name: "",
@@ -267,14 +300,19 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				size: __props.size,
 				disabled: __props.disabled,
 				model: __props.model,
+				"last-values": __props.lastValues,
+				"is-compare": isCompareMode.value,
 				config: tableConfig.value,
 				onChange: onChangeHandler
 			}, null, 8, [
 				"size",
 				"disabled",
 				"model",
+				"last-values",
+				"is-compare",
 				"config"
-			])) : (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+			])) : (openBlock(), createElementBlock("div", _hoisted_2, [!isCompareMode.value ? (openBlock(), createBlock(unref(TMagicButton), {
+				key: 0,
 				class: "create-button",
 				type: "primary",
 				size: __props.size,
@@ -283,44 +321,51 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			}, {
 				default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("添加事件", -1)])]),
 				_: 1
-			}, 8, ["size", "disabled"]), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.model[__props.name], (cardItem, index) => {
+			}, 8, ["size", "disabled"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(displayList.value, (entry) => {
 				return openBlock(), createBlock(unref(MPanel), {
-					key: index,
+					key: entry.index,
 					disabled: __props.disabled,
 					size: __props.size,
-					prop: `${__props.prop}.${index}`,
+					prop: `${__props.prop}.${entry.index}`,
 					config: actionsConfig.value,
-					model: cardItem,
+					model: entry.cardItem,
+					"last-values": entry.lastCardItem,
+					"is-compare": isCompareMode.value,
 					"label-width": __props.config.labelWidth || "100px",
 					onChange: onChangeHandler
 				}, {
 					header: withCtx(() => [createVNode(unref(MContainer), {
 						class: "fullWidth",
 						config: eventNameConfig.value,
-						model: cardItem,
+						model: entry.cardItem,
+						"last-values": entry.lastCardItem,
+						"is-compare": isCompareMode.value,
 						disabled: __props.disabled,
 						size: __props.size,
-						prop: `${__props.prop}.${index}`,
+						prop: `${__props.prop}.${entry.index}`,
 						onChange: eventNameChangeHandler
 					}, null, 8, [
 						"config",
 						"model",
+						"last-values",
+						"is-compare",
 						"disabled",
 						"size",
 						"prop"
-					]), createVNode(unref(TMagicButton), {
+					]), !isCompareMode.value ? (openBlock(), createBlock(unref(TMagicButton), {
+						key: 0,
 						style: { "color": "#f56c6c" },
 						link: "",
 						icon: unref(Delete),
 						disabled: __props.disabled,
 						size: __props.size,
-						onClick: ($event) => removeEvent(Number(index))
+						onClick: ($event) => removeEvent(Number(entry.index))
 					}, null, 8, [
 						"icon",
 						"disabled",
 						"size",
 						"onClick"
-					])]),
+					])) : createCommentVNode("v-if", true)]),
 					_: 2
 				}, 1032, [
 					"disabled",
@@ -328,6 +373,8 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					"prop",
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"label-width"
 				]);
 			}), 128))]))]);

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

@@ -1,7 +1,7 @@
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import CodeIcon_default from "../icons/CodeIcon.js";
 import { TMagicButton, TMagicInput } from "@tmagic/design";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, unref, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, openBlock, ref, renderList, unref, watchEffect, withCtx } from "vue";
 import { Delete, Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/KeyValue.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-key-value" };
@@ -28,6 +28,9 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const mForm = inject("mForm");
+		/** 对比模式下隐藏增删/代码切换等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const records = ref([]);
 		const showCode = ref(false);
 		watchEffect(() => {
@@ -98,7 +101,8 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							"disabled",
 							"size"
 						]),
-						createVNode(unref(TMagicButton), {
+						!isCompare.value ? (openBlock(), createBlock(unref(TMagicButton), {
+							key: 0,
 							class: "m-fields-key-value-delete",
 							type: "danger",
 							size: __props.size,
@@ -112,9 +116,10 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							"disabled",
 							"icon",
 							"onClick"
-						])
+						])) : createCommentVNode("v-if", true)
 					]);
-				}), 128)), createVNode(unref(TMagicButton), {
+				}), 128)), !isCompare.value ? (openBlock(), createBlock(unref(TMagicButton), {
+					key: 0,
 					type: "primary",
 					size: __props.size,
 					disabled: __props.disabled,
@@ -128,7 +133,7 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"size",
 					"disabled",
 					"icon"
-				])])) : createCommentVNode("v-if", true),
+				])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
 				__props.config.advanced && showCode.value ? (openBlock(), createBlock(CodeEditor_default, {
 					key: 1,
 					"editor-custom-type": "m-fields-key-value",
@@ -142,7 +147,7 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					parse: true,
 					onSave: save
 				}, null, 8, ["init-values", "options"])) : createCommentVNode("v-if", true),
-				__props.config.advanced ? (openBlock(), createBlock(unref(TMagicButton), {
+				__props.config.advanced && !isCompare.value ? (openBlock(), createBlock(unref(TMagicButton), {
 					key: 2,
 					size: "default",
 					disabled: __props.disabled,

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

@@ -2,7 +2,7 @@ import { UI_SELECT_MODE_EVENT_NAME } from "../utils/const.js";
 import { useServices } from "../hooks/use-services.js";
 import { TMagicButton, TMagicTooltip } from "@tmagic/design";
 import { getIdFromEl } from "@tmagic/utils";
-import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, inject, openBlock, ref, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, openBlock, ref, toDisplayString, unref, withCtx, withModifiers } from "vue";
 import { throttle } from "lodash-es";
 import { Close, Delete } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/UISelect.vue?vue&type=script&setup=true&lang.ts
@@ -34,6 +34,8 @@ var UISelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const mForm = inject("mForm");
 		const val = computed(() => props.model[props.name]);
 		const uiSelectMode = ref(false);
+		/** 对比模式下隐藏清除/选择等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const cancelHandler = () => {
 			uiService.set("uiSelectMode", false);
 			uiSelectMode.value = false;
@@ -96,7 +98,8 @@ var UISelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				"icon",
 				"disabled",
 				"size"
-			])])) : (openBlock(), createElementBlock("div", _hoisted_1, [val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(TMagicTooltip), {
+			])])) : (openBlock(), createElementBlock("div", _hoisted_1, [val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [!isCompare.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+				key: 0,
 				content: "清除",
 				placement: "top"
 			}, {
@@ -114,7 +117,7 @@ var UISelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"size"
 				])]),
 				_: 1
-			}), createVNode(unref(TMagicTooltip), {
+			})) : createCommentVNode("v-if", true), createVNode(unref(TMagicTooltip), {
 				content: "点击选中组件",
 				placement: "top"
 			}, {
@@ -134,7 +137,7 @@ var UISelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					_: 1
 				}, 8, ["disabled", "size"])]),
 				_: 1
-			})], 64)) : (openBlock(), createBlock(unref(TMagicTooltip), {
+			})], 64)) : !isCompare.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 1,
 				content: "点击此处选择",
 				placement: "top"
@@ -153,7 +156,7 @@ var UISelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					_: 1
 				}, 8, ["disabled", "size"])]),
 				_: 1
-			}))]));
+			})) : createCommentVNode("v-if", true)]));
 		};
 	}
 });

package/dist/es/hooks/use-code-block-edit.js

@@ -36,9 +36,9 @@ var useCodeBlockEdit = (codeBlockService) => {
 	const deleteCode = async (key) => {
 		codeBlockService.deleteCodeDslByIds([key]);
 	};
-	const submitCodeBlockHandler = async (values) => {
+	const submitCodeBlockHandler = async (values, eventData) => {
 		if (!codeId.value) return;
-		await codeBlockService.setCodeDslById(codeId.value, values);
+		await codeBlockService.setCodeDslById(codeId.value, values, { changeRecords: eventData?.changeRecords });
 		codeBlockEditorRef.value?.hide();
 	};
 	return {

package/dist/es/hooks/use-stage.js

@@ -69,25 +69,33 @@ var useStage = (stageOptions) => {
 	});
 	stage.on("update", (ev) => {
 		if (ev.parentEl) {
-			for (const data of ev.data) {
+			const pId = getIdFromEl()(ev.parentEl);
+			if (!pId) return;
+			const configs = ev.data.map((data) => {
 				const id = getIdFromEl()(data.el);
-				const pId = getIdFromEl()(ev.parentEl);
-				id && pId && editor_default.moveToContainer({
+				if (!id) return null;
+				return {
 					id,
 					style: data.style
-				}, pId);
-			}
+				};
+			}).filter((cfg) => Boolean(cfg));
+			if (configs.length > 0) editor_default.moveToContainer(configs, pId);
 			return;
 		}
+		const configs = [];
+		const changeRecordList = [];
 		ev.data.forEach((data) => {
 			const id = getIdFromEl()(data.el);
 			if (!id) return;
 			const { style = {} } = data;
-			editor_default.update({
+			configs.push({
 				id,
 				style
-			}, { changeRecords: buildChangeRecords(style, "style") });
+			});
+			changeRecordList.push(buildChangeRecords(style, "style"));
 		});
+		if (configs.length === 0) return;
+		editor_default.update(configs, { changeRecordList });
 	});
 	stage.on("sort", (ev) => {
 		editor_default.sort(ev.src, ev.dist);

package/dist/es/index.js

@@ -21,6 +21,7 @@ import { useFilter } from "./hooks/use-filter.js";
 import { useGetSo } from "./hooks/use-getso.js";
 import { useNextFloatBoxPosition } from "./hooks/use-next-float-box-position.js";
 import { useNodeStatus } from "./hooks/use-node-status.js";
+import { getCodeBlockFormConfig } from "./utils/code-block.js";
 import { debug, error, info, log, warn } from "./utils/logger.js";
 import { getCascaderOptionsFromFields, getDisplayField, getFieldType, getFormConfig, getFormValue } from "./utils/data-source/index.js";
 import { IdleTask } from "./utils/dep/idle-task.js";
@@ -31,6 +32,7 @@ import SplitView_default from "./components/SplitView.js";
 import Icon_default from "./components/Icon.js";
 import ToolButton_default from "./components/ToolButton.js";
 import CodeEditor_default from "./layouts/CodeEditor.js";
+import CompareForm_default from "./components/CompareForm.js";
 import FormPanel_default from "./layouts/props-panel/FormPanel.js";
 import PropsPanel_default from "./layouts/props-panel/PropsPanel.js";
 import FloatingBox_default from "./components/FloatingBox.js";
@@ -76,4 +78,4 @@ export * from "@tmagic/table";
 export * from "@tmagic/stage";
 export * from "@tmagic/design";
 export * from "@tmagic/utils";
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, designPlugin, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, info, isIncludeDataSource, monaco_editor_default as loadMonaco, log, moveItemsInContainer, numberOptions, props_default as propsService, resolveSelectedNode, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, designPlugin, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, info, isIncludeDataSource, monaco_editor_default as loadMonaco, log, moveItemsInContainer, numberOptions, props_default as propsService, resolveSelectedNode, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };

package/dist/es/initService.js

@@ -2,7 +2,7 @@ import { isIncludeDataSource } from "./utils/editor.js";
 import { getDepNodeIds, getNodes, isPage, isValueIncludeDataSource } from "@tmagic/utils";
 import { DepTargetType, NODE_CONDS_KEY, NodeType, createCodeBlockTarget, createDataSourceCondTarget, createDataSourceMethodTarget, createDataSourceTarget, updateNode } from "@tmagic/core";
 import { nextTick, onBeforeUnmount, reactive, toRaw, watch } from "vue";
-import { cloneDeep } from "lodash-es";
+import { cloneDeep as cloneDeep$1 } from "lodash-es";
 //#region packages/editor/src/initService.ts
 var initServiceState = (props, { editorService, historyService, componentListService, propsService, eventsService, uiService, codeBlockService, keybindingService, dataSourceService, depService }) => {
 	watch(() => props.modelValue, (modelValue) => {
@@ -86,9 +86,9 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		const root = editorService.get("root");
 		if (!root) return;
 		return editorService.get("stage")?.update({
-			config: cloneDeep(node),
+			config: cloneDeep$1(node),
 			parentId: editorService.getParentById(node.id)?.id,
-			root: cloneDeep(root)
+			root: cloneDeep$1(root)
 		});
 	};
 	const updateDataSourceSchema = async () => {
@@ -128,7 +128,7 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		if (!stage) return;
 		stage.reloadIframe(url);
 		stage.renderer?.once("runtime-ready", (runtime) => {
-			runtime.updateRootConfig?.(cloneDeep(toRaw(editorService.get("root"))));
+			runtime.updateRootConfig?.(cloneDeep$1(toRaw(editorService.get("root"))));
 			const page = editorService.get("page");
 			const node = editorService.get("node");
 			page?.id && runtime?.updatePageId?.(page.id);
@@ -155,7 +155,7 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		const stage = await getStage();
 		const runtime = await stage.renderer?.getRuntime();
 		const app = await getTMagicApp();
-		if (!app?.dataSourceManager) runtime?.updateRootConfig?.(cloneDeep(toRaw(value)));
+		if (!app?.dataSourceManager) runtime?.updateRootConfig?.(cloneDeep$1(toRaw(value)));
 		const page = editorService.get("page");
 		const node = editorService.get("node");
 		page?.id && runtime?.updatePageId?.(page.id);
@@ -165,7 +165,7 @@ var initServiceEvents = (props, emit, { editorService, codeBlockService, dataSou
 		if (value) {
 			depService.clearIdleTasks();
 			await (typeof Worker === "undefined" ? collectIdle(value.items, true) : depService.collectByWorker(value));
-			const dsl = cloneDeep(toRaw(value));
+			const dsl = cloneDeep$1(toRaw(value));
 			if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) for (const node of getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items)) updateNode(app.dataSourceManager.compiledNode(node), dsl);
 			runtime?.updateRootConfig?.(dsl);
 		}

package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -194,6 +194,10 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			deep: true,
 			immediate: true
 		});
+		watch(() => props.modifiedValues, (v, preV) => {
+			if (props.type !== "diff") return;
+			if (v !== preV) setEditorValue(props.initValues, props.modifiedValues);
+		}, { deep: true });
 		watch(() => props.options, (v) => {
 			vsEditor?.updateOptions(v);
 			vsDiffEditor?.updateOptions(v);

package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js

@@ -19,9 +19,11 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	props: {
 		disabledPageFragment: { type: Boolean },
 		pageBarSortOptions: {},
-		pageFilterFunction: { type: Function }
+		pageFilterFunction: { type: Function },
+		hideSidebar: { type: Boolean }
 	},
 	setup(__props) {
+		const props = __props;
 		const codeOptions = inject("codeOptions", {});
 		const { editorService, uiService, storageService } = useServices();
 		const contentEl = useTemplateRef("content");
@@ -41,7 +43,7 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			});
 		});
 		const columnWidthChange = (columnW) => {
-			storageService.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, columnW.left, { protocol: Protocol.NUMBER });
+			if (!props.hideSidebar) storageService.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, columnW.left, { protocol: Protocol.NUMBER });
 			storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnW.right, { protocol: Protocol.NUMBER });
 			uiService.set("columnWidth", columnW);
 		};
@@ -87,15 +89,14 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					"left-class": "m-editor-framework-left",
 					"center-class": "m-editor-framework-center",
 					"right-class": "m-editor-framework-right",
-					left: columnWidth.value.left,
+					left: __props.hideSidebar ? void 0 : columnWidth.value.left,
 					right: columnWidth.value.right,
-					"min-left": unref(200),
+					"min-left": __props.hideSidebar ? 0 : unref(200),
 					"min-right": unref(300),
 					"min-center": unref(400),
 					width: frameworkRect.value.width,
 					onChange: columnWidthChange
 				}, createSlots({
-					left: withCtx(() => [renderSlot(_ctx.$slots, "sidebar")]),
 					center: withCtx(() => [page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [createVNode(AddPageBox_default, { "disabled-page-fragment": __props.disabledPageFragment }, null, 8, ["disabled-page-fragment"])]), renderSlot(_ctx.$slots, "page-bar", {}, () => [createVNode(PageBar_default, {
 						"disabled-page-fragment": __props.disabledPageFragment,
 						"page-bar-sort-options": __props.pageBarSortOptions,
@@ -112,10 +113,14 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						"filter-function"
 					])])]),
 					_: 2
-				}, [page.value ? {
+				}, [!__props.hideSidebar ? {
+					name: "left",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "sidebar")]),
+					key: "0"
+				} : void 0, page.value ? {
 					name: "right",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "props-panel")]),
-					key: "0"
+					key: "1"
 				} : void 0]), 1032, [
 					"left",
 					"right",

package/dist/es/layouts/NavMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { ColumnLayout } from "../type.js";
 import { useServices } from "../hooks/use-services.js";
+import HistoryListPanel_default from "./history-list/HistoryListPanel.js";
 import NavMenuColumn_default from "./NavMenuColumn.js";
 import { NodeType } from "@tmagic/core";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, markRaw, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, unref, useTemplateRef } from "vue";
@@ -68,6 +69,13 @@ var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						handler: () => editorService.redo()
 					});
 					break;
+				case "history-list":
+					config.push({
+						type: "component",
+						className: "history-list",
+						component: markRaw(HistoryListPanel_default)
+					});
+					break;
 				case "zoom-in":
 					config.push({
 						type: "button",

package/dist/es/layouts/history-list/Bucket.js

@@ -0,0 +1,5 @@
+import Bucket_vue_vue_type_script_setup_true_lang_default from "./Bucket.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/history-list/Bucket.vue
+var Bucket_default = Bucket_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Bucket_default as default };