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

package/dist/es/fields/StyleSetter/icons/text-align/Left.js

@@ -9,6 +9,6 @@ var _hoisted_1 = {
 function _sfc_render(_ctx, _cache) {
 	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M128 810.666667h768v85.333333H128z m0-170.666667h512v85.333333H128z m0-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m0 170.666667h512v85.333333H128z" }, null, -1)])]);
 }
-var Left_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+var Left_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion
 export { Left_default as default };

package/dist/es/fields/StyleSetter/icons/text-align/Right.js

@@ -9,6 +9,6 @@ var _hoisted_1 = {
 function _sfc_render(_ctx, _cache) {
 	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M128 128h768v85.333333H128z m0 682.666667h768v85.333333H128z m213.333333-170.666667h554.666667v85.333333H341.333333z m-213.333333-170.666667h768v85.333334H128z m213.333333-170.666666h554.666667v85.333333H341.333333z" }, null, -1)])]);
 }
-var Right_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+var Right_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion
 export { Right_default as default };

package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ import NoRepeat_default from "../icons/background-repeat/NoRepeat.js";
 import { MContainer, defineFormItem } from "@tmagic/form";
 import { createBlock, defineComponent, markRaw, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Background.vue?vue&type=script&setup=true&lang.ts
-var Background_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Background",
 	props: {
 		values: {},

package/dist/es/fields/StyleSetter/pro/Border.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import Border_default from "../components/Border.js";
 import { MContainer, defineFormItem } from "@tmagic/form";
 import { Fragment, createElementBlock, createVNode, defineComponent, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Border.vue?vue&type=script&setup=true&lang.ts
-var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Border_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Border",
 	props: {
 		values: {},

package/dist/es/fields/StyleSetter/pro/Font.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import Right_default from "../icons/text-align/Right.js";
 import { MContainer, defineFormItem } from "@tmagic/form";
 import { createBlock, defineComponent, markRaw, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Font.vue?vue&type=script&setup=true&lang.ts
-var Font_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Font_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Font",
 	props: {
 		values: {},

package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js

@@ -16,7 +16,7 @@ import SpaceBetween_default from "../icons/justify-content/SpaceBetween.js";
 import { MContainer, defineFormItem } from "@tmagic/form";
 import { Fragment, createElementBlock, createVNode, defineComponent, markRaw, openBlock, unref, vShow, withDirectives } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Layout.vue?vue&type=script&setup=true&lang.ts
-var Layout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Layout",
 	props: {
 		values: {},

package/dist/es/fields/StyleSetter/pro/Position.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { MContainer, defineFormItem } from "@tmagic/form";
 import { createBlock, defineComponent, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Position.vue?vue&type=script&setup=true&lang.ts
-var Position_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Position_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Position",
 	props: {
 		values: {},

package/dist/es/fields/StyleSetter/pro/Transform.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { MContainer, defineFormItem } from "@tmagic/form";
 import { createBlock, defineComponent, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Transform.vue?vue&type=script&setup=true&lang.ts
-var Transform_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Transform_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Transform",
 	props: {
 		values: {},

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
@@ -11,7 +11,7 @@ var _hoisted_1 = {
 	class: "m-fields-ui-select",
 	style: { "display": "flex" }
 };
-var UISelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var UISelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsUISelect",
 	__name: "UISelect",
 	props: {
@@ -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

@@ -33,12 +33,15 @@ var useCodeBlockEdit = (codeBlockService) => {
 		await nextTick();
 		codeBlockEditorRef.value?.show();
 	};
-	const deleteCode = async (key) => {
-		codeBlockService.deleteCodeDslByIds([key]);
+	const deleteCode = async (key, { historySource } = {}) => {
+		codeBlockService.deleteCodeDslByIds([key], { historySource });
 	};
-	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,
+			historySource: "props"
+		});
 		codeBlockEditorRef.value?.hide();
 	};
 	return {

package/dist/es/hooks/use-data-source-edit.js

@@ -12,8 +12,11 @@ var useDataSourceEdit = (dataSourceService) => {
 		editDialog.value.show();
 	};
 	const submitDataSourceHandler = (value, eventData) => {
-		if (value.id) dataSourceService.update(value, { changeRecords: eventData.changeRecords });
-		else dataSourceService.add(value);
+		if (value.id) dataSourceService.update(value, {
+			changeRecords: eventData.changeRecords,
+			historySource: "props"
+		});
+		else dataSourceService.add(value, { historySource: "props" });
 		editDialog.value?.hide();
 	};
 	return {

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

@@ -38,7 +38,8 @@ var useStage = (stageOptions) => {
 		guidesOptions: stageOptions.guidesOptions,
 		disabledMultiSelect: stageOptions.disabledMultiSelect,
 		alwaysMultiSelect: stageOptions.alwaysMultiSelect,
-		disabledRule: stageOptions.disabledRule
+		disabledRule: stageOptions.disabledRule,
+		disabledFlashTip: stageOptions.disabledFlashTip
 	});
 	watch(() => editor_default.get("disabledMultiSelect"), (disabledMultiSelect) => {
 		if (disabledMultiSelect) stage.disableMultiSelect();
@@ -69,32 +70,43 @@ 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,
+			historySource: "stage"
 		});
 	});
 	stage.on("sort", (ev) => {
-		editor_default.sort(ev.src, ev.dist);
+		editor_default.sort(ev.src, ev.dist, { historySource: "stage" });
 	});
 	stage.on("remove", (ev) => {
 		const nodes = ev.data.map(({ el }) => editor_default.getNodeById(getIdFromEl()(el) || ""));
-		editor_default.remove(nodes.filter((node) => Boolean(node)));
+		editor_default.remove(nodes.filter((node) => Boolean(node)), { historySource: "stage" });
 	});
 	stage.on("select-parent", () => {
 		const parent = editor_default.get("parent");

package/dist/es/icons/CenterIcon.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,7 @@ var _hoisted_1 = {
 	fill: "none",
 	xmlns: "http://www.w3.org/2000/svg"
 };
-var CenterIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CenterIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCenterIcon",
 	__name: "CenterIcon",
 	setup(__props) {

package/dist/es/icons/CodeIcon.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,7 @@ var _hoisted_1 = {
 	xmlns: "http://www.w3.org/2000/svg",
 	"xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-var CodeIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeIcon",
 	__name: "CodeIcon",
 	setup(__props) {

package/dist/es/icons/FolderMinusIcon.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ var _hoisted_1 = {
 	fill: "currentColor",
 	xmlns: "http://www.w3.org/2000/svg"
 };
-var FolderMinusIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FolderMinusIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorFolderMinusIcon",
 	__name: "FolderMinusIcon",
 	setup(__props) {

package/dist/es/index.js

@@ -2,11 +2,13 @@ import { CODE_DRAFT_STORAGE_KEY, CodeDeleteErrorType, ColumnLayout, DragType, Ke
 import { useCodeBlockEdit } from "./hooks/use-code-block-edit.js";
 import { advancedTabConfig, arrayOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, numberOptions, styleTabConfig } from "./utils/props.js";
 import props_default from "./services/props.js";
+import { getEditorConfig, setEditorConfig } from "./utils/config.js";
 import { UndoRedo } from "./utils/undo-redo.js";
+import { createStackStep, describeRevertStep, deserializeStacks, detectStackOpType, detectTargetId, detectTargetName, getLastPushedHistoryIds, getOrCreateStack, markStackSaved, mergeSteps, serializeStacks, undoFloor } from "./utils/history.js";
+import { idbDelete, idbGet, idbSet, isIndexedDBSupported, openIndexedDB } from "./utils/indexed-db.js";
 import history_default from "./services/history.js";
-import { getEditorConfig, setEditorConfig } from "./utils/config.js";
 import storage_default from "./services/storage.js";
-import { COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, Fixed2Other, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, change2Fixed, classifyDragSources, collectRelatedNodes, editorNodeMergeCustomizer, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getRelativeStyle, isIncludeDataSource, moveItemsInContainer, resolveSelectedNode, serializeConfig, setChildrenLayout, setLayout, toggleFixedPosition } from "./utils/editor.js";
+import { COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, Fixed2Other, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, change2Fixed, classifyDragSources, collectRelatedNodes, describeStepForRevert, editorNodeMergeCustomizer, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getRelativeStyle, isIncludeDataSource, moveItemsInContainer, resolveSelectedNode, serializeConfig, setChildrenLayout, setLayout, toggleFixedPosition } from "./utils/editor.js";
 import { beforePaste, getAddParent, getDefaultConfig, getPositionInContainer } from "./utils/operator.js";
 import editor_default from "./services/editor.js";
 import { DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, H_GUIDE_LINE_STORAGE_KEY, LEFT_COLUMN_WIDTH_STORAGE_KEY, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, RIGHT_COLUMN_WIDTH_STORAGE_KEY, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY } from "./utils/const.js";
@@ -21,6 +23,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 +34,10 @@ 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 { confirmHistoryAction } from "./layouts/history-list/composables.js";
+import Bucket_default from "./layouts/history-list/Bucket.js";
+import BucketTab_default from "./layouts/history-list/BucketTab.js";
+import { useHistoryRevert } from "./layouts/history-list/useHistoryRevert.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";
@@ -45,9 +52,11 @@ import DataSourceConfigPanel_default from "./layouts/sidebar/data-source/DataSou
 import LayerPanel_default from "./layouts/sidebar/layer/LayerPanel.js";
 import ComponentListPanel_default from "./layouts/sidebar/ComponentListPanel.js";
 import codeBlock_default from "./services/codeBlock.js";
+import componentList_default from "./services/componentList.js";
 import dataSource_default from "./services/dataSource.js";
 import dep_default from "./services/dep.js";
 import events_default from "./services/events.js";
+import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
 import Editor_default from "./Editor.js";
 import CodeSelect_default from "./fields/CodeSelect.js";
@@ -61,6 +70,8 @@ import DataSourceMethodSelect_default from "./fields/DataSourceMethodSelect.js";
 import Index_default from "./fields/DataSourceFieldSelect/Index.js";
 import EventSelect_default from "./fields/EventSelect.js";
 import KeyValue_default from "./fields/KeyValue.js";
+import CompareForm_default from "./components/CompareForm.js";
+import HistoryDiffDialog_default from "./layouts/history-list/HistoryDiffDialog.js";
 import PageFragmentSelect_default from "./fields/PageFragmentSelect.js";
 import DisplayConds_default from "./fields/DisplayConds.js";
 import CondOpSelect_default from "./fields/CondOpSelect.js";
@@ -76,4 +87,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, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, 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, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, 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, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, numberOptions, openIndexedDB, props_default as propsService, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };

package/dist/es/initService.js

@@ -2,11 +2,11 @@ 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) => {
-		editorService.set("root", modelValue || null);
+		editorService.set("root", modelValue || null, { historySource: "initial" });
 	}, { immediate: true });
 	watch(() => props.disabledMultiSelect, (disabledMultiSelect) => {
 		editorService.set("disabledMultiSelect", disabledMultiSelect || false);
@@ -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/AddPageBox.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/AddPageBox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-empty-panel" };
 var _hoisted_2 = { class: "m-editor-empty-content" };
-var AddPageBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var AddPageBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorAddPageBox",
 	__name: "AddPageBox",
 	props: { disabledPageFragment: { type: Boolean } },

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

@@ -1,10 +1,10 @@
 import { getEditorConfig } from "../utils/config.js";
+import { serializeConfig } from "../utils/editor.js";
 import monaco_editor_default from "../utils/monaco-editor.js";
 import Icon_default from "../components/Icon.js";
 import { TMagicButton } from "@tmagic/design";
 import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, ref, unref, useTemplateRef, watch, withCtx } from "vue";
 import { throttle } from "lodash-es";
-import serialize from "serialize-javascript";
 import { FullScreen } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/CodeEditor.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "magic-code-editor" };
@@ -12,7 +12,7 @@ var _hoisted_2 = {
 	ref: "codeEditor",
 	class: "magic-code-editor-content"
 };
-var CodeEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeEditor",
 	__name: "CodeEditor",
 	props: {
@@ -94,10 +94,7 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const toString = (v, language) => {
 			let value;
 			if (typeof v !== "string") if (language === "json") value = JSON.stringify(v, null, 2);
-			else value = serialize(v, {
-				space: 2,
-				unsafe: true
-			}).replace(/"(\w+)":\s/g, "$1: ");
+			else value = serializeConfig(v);
 			else value = v;
 			if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) value = `(${value})`;
 			return value;
@@ -194,6 +191,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

@@ -13,15 +13,17 @@ var _hoisted_1 = {
 	ref: "content",
 	style: { "min-width": "900px" }
 };
-var Framework_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorFramework",
 	__name: "Framework",
 	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);
 		};
@@ -64,7 +66,7 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const saveCode = (value) => {
 			try {
 				const parseDSL = getEditorConfig("parseDSL");
-				editorService.set("root", parseDSL(value));
+				editorService.set("root", parseDSL(value), { historySource: "root-code" });
 			} catch (e) {
 				console.error(e);
 			}
@@ -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,11 +1,12 @@
 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";
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/NavMenu.vue?vue&type=script&setup=true&lang.ts
-var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var NavMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorNavMenu",
 	__name: "NavMenu",
 	props: {
@@ -44,7 +45,7 @@ var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						disabled: () => editorService.get("node")?.type === NodeType.PAGE,
 						handler: () => {
 							const node = editorService.get("node");
-							node && editorService.remove(node);
+							node && editorService.remove(node, { historySource: "toolbar" });
 						}
 					});
 					break;
@@ -54,7 +55,7 @@ var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						className: "undo",
 						icon: markRaw(Back),
 						tooltip: `后退(${ctrl}+z)`,
-						disabled: () => !historyService.state.canUndo,
+						disabled: () => !historyService.canUndo("page", editorService.get("page")?.id),
 						handler: () => editorService.undo()
 					});
 					break;
@@ -64,10 +65,17 @@ var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						className: "redo",
 						icon: markRaw(Right),
 						tooltip: `前进(${ctrl}+Shift+z)`,
-						disabled: () => !historyService.state.canRedo,
+						disabled: () => !historyService.canRedo("page", editorService.get("page")?.id),
 						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/NavMenuColumn.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { Fragment, computed, createBlock, createElementBlock, createElementVNode
 import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/NavMenuColumn.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-nav-menu-overflow-list" };
-var NavMenuColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var NavMenuColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorNavMenuColumn",
 	__name: "NavMenuColumn",
 	props: {

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 };