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

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

@@ -20,10 +20,12 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 	__name: "Layout",
 	props: {
 		values: {},
+		lastValues: {},
+		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
 		size: {}
 	},
-	emits: ["change"],
+	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const config = defineFormItem({ items: [
@@ -259,25 +261,35 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(MContainer), {
 				config: unref(config),
 				model: __props.values,
+				"last-values": __props.lastValues,
+				"is-compare": __props.isCompare,
 				size: __props.size,
 				disabled: __props.disabled,
-				onChange: change
+				onChange: change,
+				onAddDiffCount
 			}, null, 8, [
 				"config",
 				"model",
+				"last-values",
+				"is-compare",
 				"size",
 				"disabled"
 			]), withDirectives(createVNode(Box_default, {
 				model: __props.values,
+				"last-values": __props.lastValues,
+				"is-compare": __props.isCompare,
 				size: __props.size,
 				disabled: __props.disabled,
 				onChange: change
 			}, null, 8, [
 				"model",
+				"last-values",
+				"is-compare",
 				"size",
 				"disabled"
 			]), [[vShow, !["fixed", "absolute"].includes(__props.values.position)]])], 64);

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

@@ -5,10 +5,12 @@ var Position_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	__name: "Position",
 	props: {
 		values: {},
+		lastValues: {},
+		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
 		size: {}
 	},
-	emits: ["change"],
+	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -76,16 +78,22 @@ var Position_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MContainer), {
 				config: unref(config),
 				model: __props.values,
+				"last-values": __props.lastValues,
+				"is-compare": __props.isCompare,
 				size: __props.size,
 				disabled: __props.disabled,
-				onChange: change
+				onChange: change,
+				onAddDiffCount
 			}, null, 8, [
 				"config",
 				"model",
+				"last-values",
+				"is-compare",
 				"size",
 				"disabled"
 			]);

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

@@ -5,10 +5,12 @@ var Transform_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	__name: "Transform",
 	props: {
 		values: {},
+		lastValues: {},
+		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
 		size: {}
 	},
-	emits: ["change"],
+	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const config = defineFormItem({ items: [{
@@ -34,16 +36,22 @@ var Transform_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MContainer), {
 				config: unref(config),
 				model: __props.values,
+				"last-values": __props.lastValues,
+				"is-compare": __props.isCompare,
 				size: __props.size,
 				disabled: __props.disabled,
-				onChange: change
+				onChange: change,
+				onAddDiffCount
 			}, null, 8, [
 				"config",
 				"model",
+				"last-values",
+				"is-compare",
 				"size",
 				"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 };

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

@@ -0,0 +1,84 @@
+import GroupRow_default from "./GroupRow.js";
+import InitialRow_default from "./InitialRow.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+//#region packages/editor/src/layouts/history-list/Bucket.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-editor-history-list-bucket" };
+var _hoisted_2 = { class: "m-editor-history-list-bucket-title" };
+var _hoisted_3 = { class: "m-editor-history-list-bucket-count" };
+var _hoisted_4 = { class: "m-editor-history-list-ul" };
+var Bucket_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorHistoryListBucket",
+	__name: "Bucket",
+	props: {
+		title: {},
+		bucketId: {},
+		prefix: {},
+		groups: {},
+		describeGroup: { type: Function },
+		describeStep: { type: Function },
+		isStepDiffable: { type: Function },
+		expanded: {}
+	},
+	emits: [
+		"toggle",
+		"goto",
+		"goto-initial",
+		"diff-step",
+		"revert-step"
+	],
+	setup(__props) {
+		const props = __props;
+		/** 该 bucket 是否处于初始状态（栈 cursor=0），等价于全部 group 都未 applied。 */
+		const isInitial = computed(() => props.groups.length > 0 && props.groups.every((g) => !g.applied));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+				createElementVNode("span", null, toDisplayString(__props.title), 1),
+				createElementVNode("code", null, toDisplayString(String(__props.bucketId)), 1),
+				createElementVNode("span", _hoisted_3, toDisplayString(__props.groups.length) + " 组", 1)
+			]), createElementVNode("ul", _hoisted_4, [
+				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (group, gIdx) => {
+					return openBlock(), createBlock(GroupRow_default, {
+						key: `${__props.prefix}-${__props.bucketId}-${gIdx}`,
+						"group-key": `${__props.prefix}-${__props.bucketId}-${gIdx}`,
+						applied: group.applied,
+						merged: group.steps.length > 1,
+						"op-type": group.opType,
+						desc: __props.describeGroup(group),
+						"step-count": group.steps.length,
+						"sub-steps": group.steps.map((s) => ({
+							index: s.index,
+							applied: s.applied,
+							isCurrent: s.isCurrent,
+							desc: __props.describeStep(s.step),
+							diffable: __props.isStepDiffable ? __props.isStepDiffable(s.step) : false,
+							revertable: s.applied
+						})),
+						"is-current": group.isCurrent,
+						expanded: !!__props.expanded[`${__props.prefix}-${__props.bucketId}-${gIdx}`],
+						onToggle: _cache[0] || (_cache[0] = (key) => _ctx.$emit("toggle", key)),
+						onGoto: _cache[1] || (_cache[1] = (index) => _ctx.$emit("goto", __props.bucketId, index)),
+						onDiffStep: _cache[2] || (_cache[2] = (index) => _ctx.$emit("diff-step", __props.bucketId, index)),
+						onRevertStep: _cache[3] || (_cache[3] = (index) => _ctx.$emit("revert-step", __props.bucketId, index))
+					}, null, 8, [
+						"group-key",
+						"applied",
+						"merged",
+						"op-type",
+						"desc",
+						"step-count",
+						"sub-steps",
+						"is-current",
+						"expanded"
+					]);
+				}), 128)),
+				createCommentVNode("\n        初始状态项：永远位于该 bucket 列表底部（同样按倒序展示，最底部 = 最早状态）。\n        当 bucket 内所有 group 都未 applied 时即为当前位置。\n      "),
+				createVNode(InitialRow_default, {
+					"is-current": isInitial.value,
+					onGotoInitial: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("goto-initial", __props.bucketId))
+				}, null, 8, ["is-current"])
+			])]);
+		};
+	}
+});
+//#endregion
+export { Bucket_vue_vue_type_script_setup_true_lang_default as default };

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

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

package/dist/es/layouts/history-list/CodeBlockTab.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,62 @@
+import { describeCodeBlockGroup, describeCodeBlockStep } from "./composables.js";
+import Bucket_default from "./Bucket.js";
+import { TMagicScrollbar } from "@tmagic/design";
+import { Fragment, createBlock, createElementBlock, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+//#region packages/editor/src/layouts/history-list/CodeBlockTab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "m-editor-history-list-empty"
+};
+var CodeBlockTab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorHistoryListCodeBlockTab",
+	__name: "CodeBlockTab",
+	props: {
+		buckets: {},
+		expanded: {}
+	},
+	emits: [
+		"toggle",
+		"goto",
+		"goto-initial",
+		"diff-step",
+		"revert-step"
+	],
+	setup(__props) {
+		/** 仅 update（前后 content 都存在）时可查看差异。 */
+		const isCodeBlockStepDiffable = (step) => Boolean(step.oldContent && step.newContent);
+		return (_ctx, _cache) => {
+			return !__props.buckets.length ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createBlock(unref(TMagicScrollbar), {
+				key: 1,
+				"max-height": "360px"
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.buckets, (bucket) => {
+					return openBlock(), createBlock(Bucket_default, {
+						key: `cb-${bucket.id}`,
+						title: "代码块",
+						"bucket-id": bucket.id,
+						prefix: "cb",
+						groups: bucket.groups,
+						"describe-group": unref(describeCodeBlockGroup),
+						"describe-step": unref(describeCodeBlockStep),
+						"is-step-diffable": isCodeBlockStepDiffable,
+						expanded: __props.expanded,
+						onToggle: _cache[0] || (_cache[0] = (key) => _ctx.$emit("toggle", key)),
+						onGoto: _cache[1] || (_cache[1] = (id, index) => _ctx.$emit("goto", id, index)),
+						onGotoInitial: _cache[2] || (_cache[2] = (id) => _ctx.$emit("goto-initial", id)),
+						onDiffStep: _cache[3] || (_cache[3] = (id, index) => _ctx.$emit("diff-step", id, index)),
+						onRevertStep: _cache[4] || (_cache[4] = (id, index) => _ctx.$emit("revert-step", id, index))
+					}, null, 8, [
+						"bucket-id",
+						"groups",
+						"describe-group",
+						"describe-step",
+						"expanded"
+					]);
+				}), 128))]),
+				_: 1
+			}));
+		};
+	}
+});
+//#endregion
+export { CodeBlockTab_vue_vue_type_script_setup_true_lang_default as default };

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

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

package/dist/es/layouts/history-list/DataSourceTab.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,62 @@
+import { describeDataSourceGroup, describeDataSourceStep } from "./composables.js";
+import Bucket_default from "./Bucket.js";
+import { TMagicScrollbar } from "@tmagic/design";
+import { Fragment, createBlock, createElementBlock, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+//#region packages/editor/src/layouts/history-list/DataSourceTab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "m-editor-history-list-empty"
+};
+var DataSourceTab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorHistoryListDataSourceTab",
+	__name: "DataSourceTab",
+	props: {
+		buckets: {},
+		expanded: {}
+	},
+	emits: [
+		"toggle",
+		"goto",
+		"goto-initial",
+		"diff-step",
+		"revert-step"
+	],
+	setup(__props) {
+		/** 仅 update（前后 schema 都存在）时可查看差异。 */
+		const isDataSourceStepDiffable = (step) => Boolean(step.oldSchema && step.newSchema);
+		return (_ctx, _cache) => {
+			return !__props.buckets.length ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createBlock(unref(TMagicScrollbar), {
+				key: 1,
+				"max-height": "360px"
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.buckets, (bucket) => {
+					return openBlock(), createBlock(Bucket_default, {
+						key: `ds-${bucket.id}`,
+						title: "数据源",
+						"bucket-id": bucket.id,
+						prefix: "ds",
+						groups: bucket.groups,
+						"describe-group": unref(describeDataSourceGroup),
+						"describe-step": unref(describeDataSourceStep),
+						"is-step-diffable": isDataSourceStepDiffable,
+						expanded: __props.expanded,
+						onToggle: _cache[0] || (_cache[0] = (key) => _ctx.$emit("toggle", key)),
+						onGoto: _cache[1] || (_cache[1] = (id, index) => _ctx.$emit("goto", id, index)),
+						onGotoInitial: _cache[2] || (_cache[2] = (id) => _ctx.$emit("goto-initial", id)),
+						onDiffStep: _cache[3] || (_cache[3] = (id, index) => _ctx.$emit("diff-step", id, index)),
+						onRevertStep: _cache[4] || (_cache[4] = (id, index) => _ctx.$emit("revert-step", id, index))
+					}, null, 8, [
+						"bucket-id",
+						"groups",
+						"describe-group",
+						"describe-step",
+						"expanded"
+					]);
+				}), 128))]),
+				_: 1
+			}));
+		};
+	}
+});
+//#endregion
+export { DataSourceTab_vue_vue_type_script_setup_true_lang_default as default };

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

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