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

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

@@ -0,0 +1,180 @@
+import { opLabel } from "./composables.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withModifiers } from "vue";
+//#region packages/editor/src/layouts/history-list/GroupRow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["title"];
+var _hoisted_2 = ["title"];
+var _hoisted_3 = { class: "m-editor-history-list-item-desc" };
+var _hoisted_4 = {
+	key: 0,
+	class: "m-editor-history-list-item-current"
+};
+var _hoisted_5 = {
+	key: 2,
+	class: "m-editor-history-list-item-merge"
+};
+var _hoisted_6 = {
+	key: 0,
+	class: "m-editor-history-list-substeps"
+};
+var _hoisted_7 = ["title", "onClick"];
+var _hoisted_8 = { class: "m-editor-history-list-item-index" };
+var _hoisted_9 = { class: "m-editor-history-list-substep-desc" };
+var _hoisted_10 = {
+	key: 0,
+	class: "m-editor-history-list-item-current"
+};
+var _hoisted_11 = ["onClick"];
+var _hoisted_12 = ["onClick"];
+var GroupRow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorHistoryListGroupRow",
+	__name: "GroupRow",
+	props: {
+		groupKey: {},
+		applied: { type: Boolean },
+		merged: { type: Boolean },
+		opType: {},
+		desc: {},
+		stepCount: {},
+		subSteps: {},
+		expanded: { type: Boolean },
+		isCurrent: { type: Boolean }
+	},
+	emits: [
+		"toggle",
+		"goto",
+		"diff-step",
+		"revert-step"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/** 单步组：头部可点击 goto；合并组：头部可点击切换展开。当前组（isCurrent）的单步组头部不可点击。 */
+		const isHeadClickable = computed(() => {
+			if (props.merged) return true;
+			return !props.isCurrent;
+		});
+		const headTitle = computed(() => {
+			if (props.merged) return props.expanded ? "点击收起子步" : "点击展开子步";
+			if (props.isCurrent) return "当前所在记录";
+			return "点击跳转到该记录";
+		});
+		/**
+		* 头部点击行为分流：
+		* - 合并组：仅切换展开 / 收起，不触发 goto；
+		* - 单步组：跳转到该唯一步骤；当前组忽略点击。
+		*/
+		const onHeadClick = () => {
+			if (props.merged) {
+				emit("toggle", props.groupKey);
+				return;
+			}
+			if (props.isCurrent) return;
+			if (!props.subSteps.length) return;
+			emit("goto", props.subSteps[0].index);
+		};
+		const onSubStepClick = (s) => {
+			if (s.isCurrent) return;
+			emit("goto", s.index);
+		};
+		/** 单步组头部是否展示"查看差异"入口：要求该唯一子步本身可对比。 */
+		const headDiffable = computed(() => !props.merged && Boolean(props.subSteps[0]?.diffable));
+		/** 单步组头部是否展示"回滚"入口：要求该唯一子步本身可回滚（已应用）。 */
+		const headRevertable = computed(() => !props.merged && Boolean(props.subSteps[0]?.revertable));
+		/**
+		* 合并组展开后的子步渲染顺序：与外层分组列表保持一致——倒序展示（最新的子步在最上方）。
+		* 外层 page tab / bucket 都已对 groups 做了 reverse，子步沿用同样的视觉规则更直观。
+		* 注意：仅用于渲染，原 `subSteps` 保持时间正序，`headIndexLabel` 等基于首尾索引的展示语义不变。
+		*/
+		const subStepsDisplay = computed(() => props.subSteps.slice().reverse());
+		/**
+		* 头部索引展示：
+		* - 单步组（merged=false）：显示该唯一 step 的编号，如 `#5`；
+		* - 合并组：显示组内 step 的编号范围，如 `#3-#7`（首尾相同则退化为 `#5`）。
+		*
+		* 这里展示的是 step.index + 1（与子步列表 `#{{ s.index + 1 }}` 保持一致），从 1 起编号更符合直觉。
+		*/
+		const headIndexLabel = computed(() => {
+			const list = props.subSteps;
+			if (!list.length) return "";
+			const first = list[0].index + 1;
+			const last = list[list.length - 1].index + 1;
+			if (!props.merged || first === last) return `#${first}`;
+			return `#${first}-#${last}`;
+		});
+		const headIndexTitle = computed(() => {
+			if (!props.merged) return `历史步骤编号 #${props.subSteps[0]?.index + 1}`;
+			return `合并了第 ${props.subSteps[0]?.index + 1} 至第 ${props.subSteps[props.subSteps.length - 1]?.index + 1} 共 ${props.subSteps.length} 条历史步骤`;
+		});
+		const onDiffClick = (index) => {
+			emit("diff-step", index);
+		};
+		const onRevertClick = (index) => {
+			emit("revert-step", index);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", { class: normalizeClass(["m-editor-history-list-item m-editor-history-list-group", {
+				"is-undone": !__props.applied,
+				"is-merged": __props.merged,
+				"is-current": __props.isCurrent
+			}]) }, [createElementVNode("div", {
+				class: normalizeClass(["m-editor-history-list-group-head", { "is-clickable": isHeadClickable.value }]),
+				title: headTitle.value,
+				onClick: onHeadClick
+			}, [
+				createElementVNode("span", {
+					class: "m-editor-history-list-item-index",
+					title: headIndexTitle.value
+				}, toDisplayString(headIndexLabel.value), 9, _hoisted_2),
+				createElementVNode("span", { class: normalizeClass(["m-editor-history-list-item-op", `op-${__props.opType}`]) }, toDisplayString(unref(opLabel)(__props.opType)), 3),
+				createElementVNode("span", _hoisted_3, toDisplayString(__props.desc), 1),
+				__props.isCurrent ? (openBlock(), createElementBlock("span", _hoisted_4, "当前")) : createCommentVNode("v-if", true),
+				!__props.merged && headDiffable.value ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: "m-editor-history-list-item-diff",
+					title: "查看修改差异",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onDiffClick(__props.subSteps[0].index), ["stop"]))
+				}, "查看差异")) : createCommentVNode("v-if", true),
+				__props.merged ? (openBlock(), createElementBlock("span", _hoisted_5, "合并 " + toDisplayString(__props.stepCount) + " 步", 1)) : createCommentVNode("v-if", true),
+				!__props.merged && headRevertable.value ? (openBlock(), createElementBlock("span", {
+					key: 3,
+					class: "m-editor-history-list-item-revert",
+					title: "将该步骤的修改作为一次新操作反向应用（不影响后续历史）",
+					onClick: _cache[1] || (_cache[1] = withModifiers(($event) => onRevertClick(__props.subSteps[0].index), ["stop"]))
+				}, "回滚")) : createCommentVNode("v-if", true),
+				__props.merged ? (openBlock(), createElementBlock("span", {
+					key: 4,
+					class: normalizeClass(["m-editor-history-list-group-toggle", { "is-expanded": __props.expanded }])
+				}, "▾", 2)) : createCommentVNode("v-if", true)
+			], 10, _hoisted_1), __props.merged && __props.expanded ? (openBlock(), createElementBlock("ul", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(subStepsDisplay.value, (s) => {
+				return openBlock(), createElementBlock("li", {
+					key: s.index,
+					class: normalizeClass({
+						"is-undone": !s.applied,
+						"is-current": s.isCurrent,
+						"is-clickable": !s.isCurrent
+					}),
+					title: s.isCurrent ? "当前所在记录" : "点击跳转到该记录",
+					onClick: ($event) => onSubStepClick(s)
+				}, [
+					createElementVNode("span", _hoisted_8, "#" + toDisplayString(s.index + 1), 1),
+					createElementVNode("span", _hoisted_9, toDisplayString(s.desc), 1),
+					s.isCurrent ? (openBlock(), createElementBlock("span", _hoisted_10, "当前")) : createCommentVNode("v-if", true),
+					s.diffable ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: "m-editor-history-list-item-diff",
+						title: "查看修改差异",
+						onClick: withModifiers(($event) => onDiffClick(s.index), ["stop"])
+					}, "查看差异", 8, _hoisted_11)) : createCommentVNode("v-if", true),
+					s.revertable ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: "m-editor-history-list-item-revert",
+						title: "将该步骤的修改作为一次新操作反向应用（不影响后续历史）",
+						onClick: withModifiers(($event) => onRevertClick(s.index), ["stop"])
+					}, "回滚", 8, _hoisted_12)) : createCommentVNode("v-if", true)
+				], 10, _hoisted_7);
+			}), 128))])) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { GroupRow_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -0,0 +1,195 @@
+import CodeEditor_default from "../CodeEditor.js";
+import CompareForm_default from "../../components/CompareForm.js";
+import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from "@tmagic/design";
+import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { isEqual } from "lodash-es";
+//#region packages/editor/src/layouts/history-list/HistoryDiffDialog.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "m-editor-history-diff-dialog-body"
+};
+var _hoisted_2 = { class: "m-editor-history-diff-dialog-header" };
+var _hoisted_3 = { class: "m-editor-history-diff-dialog-target" };
+var _hoisted_4 = { class: "m-editor-history-diff-dialog-controls" };
+var _hoisted_5 = { class: "m-editor-history-diff-dialog-legend" };
+var _hoisted_6 = {
+	key: 0,
+	class: "m-editor-history-diff-dialog-tip"
+};
+var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorHistoryDiffDialog",
+	__name: "HistoryDiffDialog",
+	props: { extendState: { type: Function } },
+	setup(__props, { expose: __expose }) {
+		/** 差异对话框的入参 */
+		const visible = ref(false);
+		const payload = ref(null);
+		const mode = ref("before");
+		const viewMode = ref("form");
+		/**
+		* 源码对比始终只读，关闭小地图，强制左右并排（side-by-side）展示。
+		*
+		* monaco diff 编辑器在宽度低于 `renderSideBySideInlineBreakpoint`（默认 900px）时
+		* 会自动退化为 inline（上下/单栏）视图。本弹窗宽度约 900px，去掉内边距后编辑器实际
+		* 宽度小于该阈值，会被切到 inline。这里通过 `useInlineViewWhenSpaceIsLimited: false`
+		* 关闭该自动降级，确保始终保持左右两栏对比。
+		*/
+		const codeDiffOptions = {
+			readOnly: true,
+			tabSize: 2,
+			minimap: { enabled: false },
+			renderSideBySide: true,
+			useInlineViewWhenSpaceIsLimited: false,
+			scrollBeyondLastLine: false,
+			hideUnchangedRegions: { enabled: true }
+		};
+		const hasCurrent = computed(() => payload.value?.currentValue !== void 0 && payload.value?.currentValue !== null);
+		/** 左侧（旧/参照）值 */
+		const leftValue = computed(() => {
+			if (!payload.value) return {};
+			if (mode.value === "current") return payload.value.value;
+			return payload.value.lastValue;
+		});
+		/** 右侧（新/对比）值 */
+		const rightValue = computed(() => {
+			if (!payload.value) return {};
+			if (mode.value === "current") return payload.value.currentValue || {};
+			return payload.value.value;
+		});
+		const leftLabel = computed(() => mode.value === "current" ? "该步修改后" : "修改前");
+		const rightLabel = computed(() => mode.value === "current" ? "当前" : "修改后");
+		/** 「与当前对比」模式下，若当前值与该步修改后值相等，则展示提示 */
+		const isSameAsCurrent = computed(() => {
+			if (mode.value !== "current" || !payload.value) return false;
+			return isEqual(payload.value.value, payload.value.currentValue);
+		});
+		const targetText = computed(() => {
+			if (!payload.value) return "";
+			const prefix = {
+				node: "节点",
+				"data-source": "数据源",
+				"code-block": "代码块"
+			}[payload.value.category] || "";
+			const label = payload.value.targetLabel || payload.value.type || "";
+			const { id } = payload.value;
+			return [prefix, id !== void 0 && id !== "" ? `${label}（${id}）` : label].filter(Boolean).join("：");
+		});
+		const open = (p) => {
+			payload.value = p;
+			mode.value = "before";
+			viewMode.value = "form";
+			visible.value = true;
+		};
+		const close = () => {
+			visible.value = false;
+		};
+		watch(visible, (v) => {
+			if (!v) payload.value = null;
+		});
+		__expose({
+			open,
+			close
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(unref(TMagicDialog), {
+				modelValue: visible.value,
+				"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => visible.value = $event),
+				class: "m-editor-history-diff-dialog",
+				title: "查看修改差异",
+				width: "900px",
+				top: "5vh",
+				"destroy-on-close": "",
+				"append-to-body": ""
+			}, {
+				footer: withCtx(() => [createVNode(unref(TMagicButton), {
+					size: "small",
+					onClick: _cache[2] || (_cache[2] = ($event) => visible.value = false)
+				}, {
+					default: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode("关闭", -1)])]),
+					_: 1
+				})]),
+				default: withCtx(() => [payload.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+					createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(targetText.value), 1), createElementVNode("div", _hoisted_4, [createVNode(unref(TMagicRadioGroup), {
+						modelValue: viewMode.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => viewMode.value = $event),
+						size: "small",
+						class: "m-editor-history-diff-dialog-view"
+					}, {
+						default: withCtx(() => [createVNode(unref(TMagicRadioButton), { value: "form" }, {
+							default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("表单对比", -1)])]),
+							_: 1
+						}), createVNode(unref(TMagicRadioButton), { value: "code" }, {
+							default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("源码对比", -1)])]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["modelValue"]), createVNode(unref(TMagicRadioGroup), {
+						modelValue: mode.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => mode.value = $event),
+						size: "small",
+						class: "m-editor-history-diff-dialog-mode"
+					}, {
+						default: withCtx(() => [createVNode(unref(TMagicRadioButton), { value: "before" }, {
+							default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("与修改前对比", -1)])]),
+							_: 1
+						}), createVNode(unref(TMagicRadioButton), {
+							value: "current",
+							disabled: !hasCurrent.value
+						}, {
+							default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("与当前对比", -1)])]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					}, 8, ["modelValue"])])]),
+					createElementVNode("div", _hoisted_5, [
+						createVNode(unref(TMagicTag), {
+							size: "small",
+							type: "danger"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(leftLabel.value), 1)]),
+							_: 1
+						}),
+						_cache[8] || (_cache[8] = createElementVNode("span", { class: "m-editor-history-diff-dialog-arrow" }, "→", -1)),
+						createVNode(unref(TMagicTag), {
+							size: "small",
+							type: "success"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(rightLabel.value), 1)]),
+							_: 1
+						}),
+						mode.value === "current" && isSameAsCurrent.value ? (openBlock(), createElementBlock("span", _hoisted_6, " 当前值与该步修改后一致，无差异 ")) : createCommentVNode("v-if", true)
+					]),
+					viewMode.value === "form" ? (openBlock(), createBlock(CompareForm_default, {
+						key: 0,
+						category: payload.value.category,
+						type: payload.value.type,
+						"data-source-type": payload.value.dataSourceType,
+						value: rightValue.value,
+						"last-value": leftValue.value,
+						"extend-state": __props.extendState,
+						height: "70vh"
+					}, null, 8, [
+						"category",
+						"type",
+						"data-source-type",
+						"value",
+						"last-value",
+						"extend-state"
+					])) : (openBlock(), createBlock(CodeEditor_default, {
+						key: 1,
+						type: "diff",
+						language: "json",
+						"init-values": leftValue.value,
+						"modified-values": rightValue.value,
+						options: codeDiffOptions,
+						"disabled-full-screen": "",
+						height: "70vh"
+					}, null, 8, ["init-values", "modified-values"]))
+				])) : createCommentVNode("v-if", true)]),
+				_: 1
+			}, 8, ["modelValue"])]);
+		};
+	}
+});
+//#endregion
+export { HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default as default };

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

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

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

@@ -0,0 +1,270 @@
+import { useServices } from "../../hooks/use-services.js";
+import Icon_default from "../../components/Icon.js";
+import { useHistoryList } from "./composables.js";
+import CodeBlockTab_default from "./CodeBlockTab.js";
+import DataSourceTab_default from "./DataSourceTab.js";
+import HistoryDiffDialog_default from "./HistoryDiffDialog.js";
+import PageTab_default from "./PageTab.js";
+import { TMagicButton, TMagicPopover, TMagicTabs, TMagicTooltip, getDesignConfig } from "@tmagic/design";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, inject, markRaw, normalizeProps, openBlock, ref, resolveDynamicComponent, unref, useTemplateRef, withCtx } from "vue";
+import { Clock, Close } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/history-list/HistoryListPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-editor-history-list" };
+var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorHistoryListPanel",
+	__name: "HistoryListPanel",
+	setup(__props) {
+		/**
+		* 历史记录面板：在顶部 NavMenu 上点击图标打开 popover，分三个 tab：
+		* - 页面：当前活动页面的历史栈，连续修改同一节点的多步会被合并成一组
+		* - 数据源：以 dataSource.id 分组，每组内部相邻的连续 update 自动合并
+		* - 代码块：同上，按 codeBlock.id 分组并合并相邻 update
+		*
+		* 数据通过 historyService 暴露的聚合 API 读取，UI 仅用于只读展示，
+		* 同时支持点击任意一条记录跳转至该状态：
+		* - 页面 tab：调用 editorService.gotoPageStep(targetCursor)
+		* - 数据源 tab：调用 dataSourceService.goto(id, targetCursor)
+		* - 代码块 tab：调用 codeBlockService.goto(id, targetCursor)
+		*
+		* 这里的 targetCursor = 用户点击的 step.index + 1，即"应用至此步完成的状态"。
+		*
+		* 此外每条 step 上提供"查看差异"入口（仅在前后值都存在的 update 步骤显示），
+		* 点击后弹出 HistoryDiffDialog，使用 CompareForm 组件以表单形式展示新旧值差异。
+		*
+		* 各 tab 的内容拆分为独立的 SFC（PageTab / DataSourceTab / CodeBlockTab），
+		* 共享的描述生成与折叠状态在 composables.ts 中维护。
+		*/
+		const ClockIcon = markRaw(Clock);
+		const CloseIcon = markRaw(Close);
+		const activeTab = ref("page");
+		/** 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。 */
+		const visible = ref(false);
+		const tabPaneComponent = getDesignConfig("components")?.tabPane;
+		const { editorService, dataSourceService, codeBlockService, historyService } = useServices();
+		/**
+		* 通过 inject 拿到 Editor 顶层注入的 `extendFormState`，转交给 HistoryDiffDialog
+		* 内部的 CompareForm，使差异对比表单的 filterFunction 能拿到完整的业务上下文。
+		* 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
+		*/
+		const extendFormState = inject("extendFormState", void 0);
+		const { expanded, toggleGroup, pageGroups, dataSourceGroups, codeBlockGroups, pageGroupsDisplay, dataSourceGroupsByTarget, codeBlockGroupsByTarget } = useHistoryList();
+		/** 把"目标 step 索引"翻译成"目标 cursor"（已应用步骤数量）。 */
+		const indexToCursor = (index) => index + 1;
+		const onPageGoto = (index) => {
+			editorService.gotoPageStep(indexToCursor(index));
+		};
+		const onDataSourceGoto = (id, index) => {
+			dataSourceService.goto(id, indexToCursor(index));
+		};
+		const onCodeBlockGoto = (id, index) => {
+			codeBlockService.goto(id, indexToCursor(index));
+		};
+		/**
+		* "回到初始状态" = 把对应栈 cursor 移到 0（全部已撤销）。
+		* 复用 service.goto*(0) 即可，所有真实 step 的反向应用由 service 层的 undo 链路完成。
+		*/
+		const onPageGotoInitial = () => {
+			editorService.gotoPageStep(0);
+		};
+		const onDataSourceGotoInitial = (id) => {
+			dataSourceService.goto(id, 0);
+		};
+		const onCodeBlockGotoInitial = (id) => {
+			codeBlockService.goto(id, 0);
+		};
+		/**
+		* 「回滚」入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
+		* 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
+		*/
+		const onPageRevert = (index) => {
+			editorService.revertPageStep(index);
+		};
+		const onDataSourceRevert = (id, index) => {
+			dataSourceService.revert(id, index);
+		};
+		const onCodeBlockRevert = (id, index) => {
+			codeBlockService.revert(id, index);
+		};
+		const diffDialogRef = useTemplateRef("diffDialog");
+		/**
+		* 页面 step 差异：仅 update 单节点修改可对比，传入旧/新节点。
+		* 节点类型 `type` 优先取 newNode.type，再回退 oldNode.type。
+		* `currentValue` 取自 editorService 中该节点当前实际值，用于支持「与当前对比」。
+		*/
+		const onPageDiff = (index) => {
+			const groups = historyService.getPageHistoryGroups();
+			for (const group of groups) {
+				const entry = group.steps.find((s) => s.index === index);
+				if (!entry) continue;
+				const item = entry.step.updatedItems?.[0];
+				if (!item?.oldNode || !item?.newNode) return;
+				const type = item.newNode.type || item.oldNode.type || "";
+				const nodeId = item.newNode.id ?? item.oldNode.id;
+				const currentNode = nodeId !== void 0 ? editorService.getNodeById(nodeId) : null;
+				diffDialogRef.value?.open({
+					category: "node",
+					type,
+					lastValue: item.oldNode,
+					value: item.newNode,
+					currentValue: currentNode || null,
+					targetLabel: item.newNode.name || item.oldNode.name || type,
+					id: nodeId
+				});
+				return;
+			}
+		};
+		const onDataSourceDiff = (id, index) => {
+			const groups = historyService.getDataSourceHistoryGroups();
+			for (const group of groups) {
+				if (group.id !== id) continue;
+				const entry = group.steps.find((s) => s.index === index);
+				if (!entry) continue;
+				const { oldSchema, newSchema } = entry.step;
+				if (!oldSchema || !newSchema) return;
+				const currentSchema = dataSourceService.getDataSourceById(`${id}`);
+				diffDialogRef.value?.open({
+					category: "data-source",
+					type: newSchema.type || oldSchema.type || "base",
+					lastValue: oldSchema,
+					value: newSchema,
+					currentValue: currentSchema || null,
+					targetLabel: newSchema.title || oldSchema.title || `${id}`,
+					id
+				});
+				return;
+			}
+		};
+		const onCodeBlockDiff = (id, index) => {
+			const groups = historyService.getCodeBlockHistoryGroups();
+			for (const group of groups) {
+				if (group.id !== id) continue;
+				const entry = group.steps.find((s) => s.index === index);
+				if (!entry) continue;
+				const { oldContent, newContent } = entry.step;
+				if (!oldContent || !newContent) return;
+				const currentContent = codeBlockService.getCodeContentById(id);
+				diffDialogRef.value?.open({
+					category: "code-block",
+					lastValue: oldContent,
+					value: newContent,
+					currentValue: currentContent || null,
+					targetLabel: newContent.name || oldContent.name || `${id}`,
+					id
+				});
+				return;
+			}
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(TMagicPopover), {
+				"popper-class": "m-editor-history-list-popover",
+				placement: "bottom",
+				trigger: "click",
+				visible: visible.value,
+				width: 660
+			}, {
+				reference: withCtx(() => [createVNode(unref(TMagicTooltip), {
+					effect: "dark",
+					placement: "bottom",
+					content: "历史记录"
+				}, {
+					default: withCtx(() => [createVNode(unref(TMagicButton), {
+						size: "small",
+						link: "",
+						onClick: _cache[2] || (_cache[2] = ($event) => visible.value = !visible.value)
+					}, {
+						icon: withCtx(() => [createVNode(Icon_default, { icon: unref(ClockIcon) }, null, 8, ["icon"])]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(TMagicTooltip), {
+					effect: "dark",
+					placement: "top",
+					content: "关闭"
+				}, {
+					default: withCtx(() => [createVNode(unref(TMagicButton), {
+						class: "m-editor-history-list-close",
+						size: "small",
+						link: "",
+						onClick: _cache[0] || (_cache[0] = ($event) => visible.value = false)
+					}, {
+						icon: withCtx(() => [createVNode(Icon_default, { icon: unref(CloseIcon) }, null, 8, ["icon"])]),
+						_: 1
+					})]),
+					_: 1
+				}), createVNode(unref(TMagicTabs), {
+					modelValue: activeTab.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => activeTab.value = $event),
+					class: "m-editor-history-list-tabs"
+				}, {
+					default: withCtx(() => [
+						(openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(guardReactiveProps(unref(tabPaneComponent)?.props({
+							name: "page",
+							label: `页面 (${unref(pageGroups).length})`
+						}) || {})), {
+							default: withCtx(() => [createVNode(PageTab_default, {
+								list: unref(pageGroupsDisplay),
+								expanded: unref(expanded),
+								onToggle: unref(toggleGroup),
+								onGoto: onPageGoto,
+								onGotoInitial: onPageGotoInitial,
+								onDiffStep: onPageDiff,
+								onRevertStep: onPageRevert
+							}, null, 8, [
+								"list",
+								"expanded",
+								"onToggle"
+							])]),
+							_: 1
+						}, 16)),
+						(openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(guardReactiveProps(unref(tabPaneComponent)?.props({
+							name: "data-source",
+							label: `数据源 (${unref(dataSourceGroups).length})`
+						}) || {})), {
+							default: withCtx(() => [createVNode(DataSourceTab_default, {
+								buckets: unref(dataSourceGroupsByTarget),
+								expanded: unref(expanded),
+								onToggle: unref(toggleGroup),
+								onGoto: onDataSourceGoto,
+								onGotoInitial: onDataSourceGotoInitial,
+								onDiffStep: onDataSourceDiff,
+								onRevertStep: onDataSourceRevert
+							}, null, 8, [
+								"buckets",
+								"expanded",
+								"onToggle"
+							])]),
+							_: 1
+						}, 16)),
+						(openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(guardReactiveProps(unref(tabPaneComponent)?.props({
+							name: "code-block",
+							label: `代码块 (${unref(codeBlockGroups).length})`
+						}) || {})), {
+							default: withCtx(() => [createVNode(CodeBlockTab_default, {
+								buckets: unref(codeBlockGroupsByTarget),
+								expanded: unref(expanded),
+								onToggle: unref(toggleGroup),
+								onGoto: onCodeBlockGoto,
+								onGotoInitial: onCodeBlockGotoInitial,
+								onDiffStep: onCodeBlockDiff,
+								onRevertStep: onCodeBlockRevert
+							}, null, 8, [
+								"buckets",
+								"expanded",
+								"onToggle"
+							])]),
+							_: 1
+						}, 16))
+					]),
+					_: 1
+				}, 8, ["modelValue"])])]),
+				_: 1
+			}, 8, ["visible"]), createVNode(HistoryDiffDialog_default, {
+				ref: "diffDialog",
+				"extend-state": unref(extendFormState)
+			}, null, 8, ["extend-state"])], 64);
+		};
+	}
+});
+//#endregion
+export { HistoryListPanel_vue_vue_type_script_setup_true_lang_default as default };

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

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