@tmagic/editor 1.8.0-beta.6 → 1.8.0-beta.8

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

@@ -1,20 +1,15 @@
 import { useServices } from "../../hooks/use-services.js";
 import Icon_default from "../../components/Icon.js";
-import { describeCodeBlockGroup, describeCodeBlockStep, describeDataSourceGroup, describeDataSourceStep, isCodeBlockStepRevertable, isDataSourceStepRevertable, useHistoryList } from "./composables.js";
+import { confirmHistoryAction, describeStep, isSingleDiffStepRevertable } from "./composables.js";
 import BucketTab_default from "./BucketTab.js";
-import HistoryDiffDialog_default from "./HistoryDiffDialog.js";
 import PageTab_default from "./PageTab.js";
-import { TMagicButton, TMagicPopover, TMagicTabs, TMagicTooltip, getDesignConfig, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, inject, markRaw, mergeProps, normalizeProps, openBlock, ref, renderList, resolveDynamicComponent, toHandlers, unref, useTemplateRef, watch, withCtx } from "vue";
+import { useHistoryList } from "./useHistoryList.js";
+import { useHistoryRevert } from "./useHistoryRevert.js";
+import { TMagicButton, TMagicPopover, TMagicTabs, TMagicTooltip, getDesignConfig, tMagicMessage } from "@tmagic/design";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, inject, markRaw, mergeProps, normalizeProps, openBlock, ref, renderList, resolveDynamicComponent, toHandlers, unref, watch, 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" };
-/**
-* 构造差异弹窗入参：仅 update（前后值都存在）可对比。
-* - 页面（无 id）：在全部分组中按 index 定位 step，目标 id 取自快照；
-* - 数据源 / 代码块（带 id）：先匹配分组 id 再按 index 定位。
-* 无可对比内容（多节点 / add / remove）或定位不到时返回 null。
-*/
 var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "MEditorHistoryListPanel",
 	__name: "HistoryListPanel",
@@ -56,7 +51,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const extraTabs = inject("historyListExtraTabs", []);
 		/** label 支持字符串或函数，函数形式便于展示动态数量等内容。 */
 		const resolveTabLabel = (tab) => typeof tab.label === "function" ? tab.label() : tab.label;
-		const { editorService, dataSourceService, codeBlockService, historyService, propsService, stageOverlayService } = useServices();
+		const services = useServices();
+		const { editorService, dataSourceService, codeBlockService, historyService, propsService, stageOverlayService } = services;
 		/**
 		* 数据源 / 代码块功能可被业务方通过 `disabledDataSource` / `disabledCodeBlock` 禁用，
 		* 禁用后对应的历史记录 tab 不再展示。若当前激活的 tab 恰好被禁用，则回退到「页面」tab。
@@ -77,31 +73,35 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		* 当前活动页的「加载/初始」标记记录（设置 root 时生成），透传给 PageTab 的底部初始行展示。
 		* 基于 historyService 的 reactive state 派生，活动页切换或标记写入后自动刷新。
 		*/
-		const pageMarker = computed(() => historyService.getPageMarker());
-		/** 数据源 step 仅 update（前后 schema 都存在）时可查看差异。 */
-		const isDataSourceStepDiffable = (step) => Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
+		const pageMarker = computed(() => historyService.getMarker("page", editorService.get("page")?.id));
+		/**
+		* 各历史类型的展示名称（页面 / 数据源 / 代码块），由 historyService.state.stepNames 配置，
+		* 业务方可通过 historyService.setStepName / registerStepType 覆盖。基于 reactive state 派生，配置变更后自动刷新。
+		*/
+		const pageName = computed(() => historyService.getStepName("page"));
+		const dataSourceName = computed(() => historyService.getStepName("dataSource"));
+		const codeBlockName = computed(() => historyService.getStepName("codeBlock"));
 		/** 代码块 step 仅 update（前后 content 都存在）时可查看差异。 */
-		const isCodeBlockStepDiffable = (step) => Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
+		const isStepDiffable = (step) => Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
 		/**
 		* 数据源 / 代码块两类 bucket 历史的整体渲染配置：把 title / prefix 与各自的描述、
 		* 可差异、可回滚判定收敛为单一对象整体注入 BucketTab，组件内部按需读取。
+		* title / 描述回退名取自可配置的展示名称，故用 computed 使其随 stepNames 变更刷新。
 		*/
-		const dataSourceConfig = {
-			title: "数据源",
+		const dataSourceConfig = computed(() => ({
+			title: dataSourceName.value,
 			prefix: "ds",
-			describeGroup: describeDataSourceGroup,
-			describeStep: describeDataSourceStep,
-			isStepDiffable: isDataSourceStepDiffable,
-			isStepRevertable: isDataSourceStepRevertable
-		};
-		const codeBlockConfig = {
-			title: "代码块",
+			describeStep: (step) => describeStep(step, (schema) => schema?.title, dataSourceName.value),
+			isStepDiffable,
+			isStepRevertable: isSingleDiffStepRevertable
+		}));
+		const codeBlockConfig = computed(() => ({
+			title: codeBlockName.value,
 			prefix: "cb",
-			describeGroup: describeCodeBlockGroup,
-			describeStep: describeCodeBlockStep,
-			isStepDiffable: isCodeBlockStepDiffable,
-			isStepRevertable: isCodeBlockStepRevertable
-		};
+			describeStep: (step) => describeStep(step, (content) => content?.name, codeBlockName.value),
+			isStepDiffable,
+			isStepRevertable: isSingleDiffStepRevertable
+		}));
 		/** 把"目标 step 索引"翻译成"目标 cursor"（已应用步骤数量）。 */
 		const indexToCursor = (index) => index + 1;
 		const onPageGoto = (index) => {
@@ -114,7 +114,7 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		* - 该 step 涉及的节点都已不存在（如删除记录、被撤销的新增）时给出提示，不做选中。
 		*/
 		const onPageSelect = async (index) => {
-			const step = historyService.getPageStepList()[index]?.step;
+			const step = historyService.getStepList("page", editorService.get("page")?.id)[index]?.step;
 			if (!step) return;
 			const targetId = (step.diff ?? []).map((item) => item.newSchema?.id ?? item.oldSchema?.id).find((id) => id !== void 0 && id !== null && editorService.getNodeById(id, false));
 			if (targetId === void 0 || targetId === null) {
@@ -146,156 +146,12 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const onCodeBlockGotoInitial = (id) => {
 			codeBlockService.goto(id, 0);
 		};
-		const diffDialogRef = useTemplateRef("diffDialog");
-		const confirmDialogRef = useTemplateRef("confirmDialog");
-		/**
-		* 三类历史（页面 / 数据源 / 代码块）差异弹窗入参的构造差异，收敛为一份配置：
-		* 仅「分组来源、当前值读取、类型 / 展示名提取」不同，定位 step、校验前后值、组装 payload 的流程共用。
-		*/
-		const buildDiffPayload = (source, index, id) => {
-			for (const group of source.groups()) {
-				if (id !== void 0 && group.id !== id) continue;
-				const step = group.steps.find((s) => s.index === index)?.step;
-				if (!step) continue;
-				const oldSchema = step.diff?.[0]?.oldSchema;
-				const newSchema = step.diff?.[0]?.newSchema;
-				if (!oldSchema || !newSchema) return null;
-				const targetId = id ?? newSchema.id ?? oldSchema.id;
-				const type = source.resolveType?.(newSchema, oldSchema);
-				return {
-					category: source.category,
-					...type !== void 0 ? { type } : {},
-					lastValue: oldSchema,
-					value: newSchema,
-					currentValue: (targetId !== void 0 ? source.getCurrent(targetId) : null) || null,
-					targetLabel: source.resolveLabel(newSchema, oldSchema, targetId),
-					id: targetId
-				};
-			}
-			return null;
-		};
-		const buildPageDiffPayload = (index) => buildDiffPayload({
-			category: "node",
-			groups: () => historyService.getPageHistoryGroups(),
-			getCurrent: (id) => editorService.getNodeById(id),
-			resolveType: (n, o) => n.type || o.type || "",
-			resolveLabel: (n, o) => n.name || o.name || n.type || o.type || ""
-		}, index);
-		const buildDataSourceDiffPayload = (id, index) => buildDiffPayload({
-			category: "data-source",
-			groups: () => historyService.getDataSourceHistoryGroups(),
-			getCurrent: (id) => dataSourceService.getDataSourceById(`${id}`),
-			resolveType: (n, o) => n.type || o.type || "base",
-			resolveLabel: (n, o, id) => n.title || o.title || `${id}`
-		}, index, id);
-		const buildCodeBlockDiffPayload = (id, index) => buildDiffPayload({
-			category: "code-block",
-			groups: () => historyService.getCodeBlockHistoryGroups(),
-			getCurrent: (id) => codeBlockService.getCodeContentById(id),
-			resolveLabel: (n, o, id) => n.name || o.name || `${id}`
-		}, index, id);
-		const onPageDiff = (index) => {
-			const payload = buildPageDiffPayload(index);
-			if (payload) diffDialogRef.value?.open(payload);
-		};
-		const onDataSourceDiff = (id, index) => {
-			const payload = buildDataSourceDiffPayload(id, index);
-			if (payload) diffDialogRef.value?.open(payload);
-		};
-		const onCodeBlockDiff = (id, index) => {
-			const payload = buildCodeBlockDiffPayload(id, index);
-			if (payload) diffDialogRef.value?.open(payload);
-		};
-		/**
-		* 「回滚」统一入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
-		* 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
-		*
-		* 交互：
-		* - 可差异对比的步骤（单节点 / 单实体 update）：弹出差异弹窗供用户确认，点「确定回滚」再执行；
-		* - 无法对比的步骤（add / remove / 多节点更新，payload 为 null）：弹出普通二次确认框，确认后执行。
-		*
-		* 页面 / 数据源 / 代码块三类回滚仅「差异入参构造」与「实际 revert 调用」不同，
-		* 由调用方分别传入 payload 与 revert，公共的弹窗 / 确认流程在此收敛。
-		*/
-		const runRevert = (payload) => {
-			if (payload && confirmDialogRef.value) return confirmDialogRef.value.confirm(payload);
-			return confirmRevert();
-		};
-		/**
-		* 回滚前置校验：若该历史步骤回滚所依赖的目标数据已被删除，则无法回滚。
-		* - update（把旧值写回）：被修改的目标必须仍存在；
-		* - 页面 remove（还原被删节点）：被删节点的原父容器必须仍存在，否则无处插回；
-		* add（回滚即删除）即使目标已不在，也已达成「删除」目的，不视为失败。
-		*
-		* 命中时弹出「回滚失败」提示并返回 true，调用方据此中止本次回滚。
-		*/
-		const isPageRevertTargetMissing = (index) => {
-			const step = historyService.getPageStepList()[index]?.step;
-			if (!step) return false;
-			if (step.opType === "update") return (step.diff ?? []).some((item) => {
-				const id = item.newSchema?.id ?? item.oldSchema?.id;
-				return id !== void 0 && !editorService.getNodeById(id, false);
-			});
-			if (step.opType === "remove") return (step.diff ?? []).some((item) => item.parentId !== void 0 && !editorService.getNodeById(item.parentId, false));
-			return false;
-		};
-		/** 数据源 update 步骤回滚时，对应数据源必须仍存在（已删除则无处写回旧值）。 */
-		const isDataSourceRevertTargetMissing = (id, index) => {
-			const step = historyService.getDataSourceStepList(id)[index]?.step;
-			return Boolean(step && step.opType === "update" && !dataSourceService.getDataSourceById(`${id}`));
-		};
-		/** 代码块 update 步骤回滚时，对应代码块必须仍存在（已删除则无处写回旧值）。 */
-		const isCodeBlockRevertTargetMissing = (id, index) => {
-			const step = historyService.getCodeBlockStepList(id)[index]?.step;
-			return Boolean(step && step.opType === "update" && !codeBlockService.getCodeContentById(id));
-		};
-		/** 目标数据已被删除、无法回滚时的统一提示。 */
-		const showRevertTargetMissing = () => {
-			tMagicMessage.error("回滚失败：该记录对应的数据已被删除");
-		};
-		const onPageRevert = (index) => {
-			if (isPageRevertTargetMissing(index)) {
-				showRevertTargetMissing();
-				return Promise.resolve(null);
-			}
-			return runRevert(buildPageDiffPayload(index)).then((result) => result ? editorService.revertPageStep(index) : null);
-		};
-		const onDataSourceRevert = (id, index) => {
-			if (isDataSourceRevertTargetMissing(id, index)) {
-				showRevertTargetMissing();
-				return Promise.resolve(null);
-			}
-			return runRevert(buildDataSourceDiffPayload(id, index)).then((result) => result ? dataSourceService.revert(id, index) : null);
-		};
-		const onCodeBlockRevert = (id, index) => {
-			if (isCodeBlockRevertTargetMissing(id, index)) {
-				showRevertTargetMissing();
-				return Promise.resolve(null);
-			}
-			return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) => result ? codeBlockService.revert(id, index) : null);
-		};
 		/**
-		* 「回滚」二次确认：新增 / 删除 / 多节点更新等无法做差异对比的步骤，
-		* 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
-		* 用户取消时返回 false，调用方据此中止回滚。
+		* 「单步回滚」与「查看差异」的完整逻辑收敛到 useHistoryRevert，面板与业务方共用：
+		* 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
+		* 业务方亦可直接 import useHistoryRevert(services) 调用，无需自行挂载任何弹窗。
 		*/
-		const confirmRevert = () => confirmDialog("确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。");
-		/**
-		* 通用二次确认弹窗：清空历史 / 无法差异对比的回滚等会改变状态的操作，先弹出确认框，
-		* 用户点击「确定」返回 true，取消（confirm reject）时返回 false 并静默忽略。
-		*/
-		const confirmDialog = async (message) => {
-			try {
-				await tMagicMessageBox.confirm(message, "提示", {
-					confirmButtonText: "确定",
-					cancelButtonText: "取消",
-					type: "warning"
-				});
-				return true;
-			} catch (e) {
-				return false;
-			}
-		};
+		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert(services, { extendState: extendFormState });
 		/**
 		* 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
 		* 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。
@@ -307,158 +163,155 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			} catch (e) {}
 		};
 		const onPageClear = async () => {
-			if (await confirmDialog("确定清空当前页面的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
-				historyService.clearPage();
+			if (await confirmHistoryAction("确定清空当前页面的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("page", editorService.get("page")?.id);
 				await syncIndexedDB();
 			}
 		};
 		const onDataSourceClear = async () => {
-			if (await confirmDialog("确定清空数据源的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
-				historyService.clearDataSource();
+			if (await confirmHistoryAction("确定清空数据源的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("dataSource");
 				await syncIndexedDB();
 			}
 		};
 		const onCodeBlockClear = async () => {
-			if (await confirmDialog("确定清空代码块的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
-				historyService.clearCodeBlock();
+			if (await confirmHistoryAction("确定清空代码块的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("codeBlock");
 				await syncIndexedDB();
 			}
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [
-				createVNode(unref(TMagicPopover), {
-					"popper-class": "m-editor-history-list-popover",
+			return openBlock(), createBlock(unref(TMagicPopover), {
+				"popper-class": "m-editor-history-list-popover",
+				placement: "bottom",
+				trigger: "click",
+				visible: visible.value,
+				"onUpdate:visible": _cache[3] || (_cache[3] = ($event) => visible.value = $event),
+				width: 660
+			}, {
+				reference: withCtx(() => [createVNode(unref(TMagicTooltip), {
+					effect: "dark",
 					placement: "bottom",
-					trigger: "click",
-					visible: visible.value,
-					"onUpdate:visible": _cache[3] || (_cache[3] = ($event) => visible.value = $event),
-					width: 660
+					content: "历史记录"
 				}, {
-					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)
 					}, {
-						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
-						})]),
+						icon: withCtx(() => [createVNode(Icon_default, { icon: unref(ClockIcon) }, null, 8, ["icon"])]),
 						_: 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"
+					_: 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)
 					}, {
-						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),
-									marker: pageMarker.value,
-									onToggle: unref(toggleGroup),
-									onGoto: onPageGoto,
-									onGotoInitial: onPageGotoInitial,
-									onDiffStep: onPageDiff,
-									onRevertStep: onPageRevert,
-									onSelect: onPageSelect,
-									onClear: onPageClear
-								}, null, 8, [
-									"list",
-									"expanded",
-									"marker",
-									"onToggle"
-								])]),
-								_: 1
-							}, 16)),
-							!disabledDataSource.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(mergeProps({ key: 0 }, unref(tabPaneComponent)?.props({
-								name: "data-source",
-								label: `数据源 (${unref(dataSourceGroups).length})`
-							}) || {})), {
-								default: withCtx(() => [createVNode(BucketTab_default, {
-									config: dataSourceConfig,
-									buckets: unref(dataSourceGroupsByTarget),
-									expanded: unref(expanded),
-									onToggle: unref(toggleGroup),
-									onGoto: onDataSourceGoto,
-									onGotoInitial: onDataSourceGotoInitial,
-									onDiffStep: onDataSourceDiff,
-									onRevertStep: onDataSourceRevert,
-									onClear: onDataSourceClear
-								}, null, 8, [
-									"buckets",
-									"expanded",
-									"onToggle"
-								])]),
-								_: 1
-							}, 16)) : createCommentVNode("v-if", true),
-							!disabledCodeBlock.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(mergeProps({ key: 1 }, unref(tabPaneComponent)?.props({
-								name: "code-block",
-								label: `代码块 (${unref(codeBlockGroups).length})`
-							}) || {})), {
-								default: withCtx(() => [createVNode(BucketTab_default, {
-									config: codeBlockConfig,
-									buckets: unref(codeBlockGroupsByTarget),
-									expanded: unref(expanded),
-									onToggle: unref(toggleGroup),
-									onGoto: onCodeBlockGoto,
-									onGotoInitial: onCodeBlockGotoInitial,
-									onDiffStep: onCodeBlockDiff,
-									onRevertStep: onCodeBlockRevert,
-									onClear: onCodeBlockClear
-								}, null, 8, [
-									"buckets",
-									"expanded",
-									"onToggle"
-								])]),
-								_: 1
-							}, 16)) : createCommentVNode("v-if", true),
-							(openBlock(true), createElementBlock(Fragment, null, renderList(unref(extraTabs), (tab) => {
-								return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps({ key: tab.name }, { ref_for: true }, unref(tabPaneComponent)?.props({
-									name: tab.name,
-									label: resolveTabLabel(tab)
-								}) || {}), {
-									default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tab.component), mergeProps({ ref_for: true }, tab.props || {}, toHandlers(tab.listeners || {})), null, 16))]),
-									_: 2
-								}, 1040);
-							}), 128))
-						]),
+						icon: withCtx(() => [createVNode(Icon_default, { icon: unref(CloseIcon) }, null, 8, ["icon"])]),
 						_: 1
-					}, 8, ["modelValue"])])]),
+					})]),
+					_: 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: `${pageName.value} (${unref(pageGroups).length})`
+						}) || {})), {
+							default: withCtx(() => [createVNode(PageTab_default, {
+								list: unref(pageGroupsDisplay),
+								expanded: unref(expanded),
+								marker: pageMarker.value,
+								onToggle: unref(toggleGroup),
+								onGoto: onPageGoto,
+								onGotoInitial: onPageGotoInitial,
+								onDiffStep: unref(onPageDiff),
+								onRevertStep: unref(onPageRevert),
+								onSelect: onPageSelect,
+								onClear: onPageClear
+							}, null, 8, [
+								"list",
+								"expanded",
+								"marker",
+								"onToggle",
+								"onDiffStep",
+								"onRevertStep"
+							])]),
+							_: 1
+						}, 16)),
+						!disabledDataSource.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(mergeProps({ key: 0 }, unref(tabPaneComponent)?.props({
+							name: "data-source",
+							label: `${dataSourceName.value} (${unref(dataSourceGroups).length})`
+						}) || {})), {
+							default: withCtx(() => [createVNode(BucketTab_default, {
+								config: dataSourceConfig.value,
+								buckets: unref(dataSourceGroupsByTarget),
+								expanded: unref(expanded),
+								onToggle: unref(toggleGroup),
+								onGoto: onDataSourceGoto,
+								onGotoInitial: onDataSourceGotoInitial,
+								onDiffStep: unref(onDataSourceDiff),
+								onRevertStep: unref(onDataSourceRevert),
+								onClear: onDataSourceClear
+							}, null, 8, [
+								"config",
+								"buckets",
+								"expanded",
+								"onToggle",
+								"onDiffStep",
+								"onRevertStep"
+							])]),
+							_: 1
+						}, 16)) : createCommentVNode("v-if", true),
+						!disabledCodeBlock.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(mergeProps({ key: 1 }, unref(tabPaneComponent)?.props({
+							name: "code-block",
+							label: `${codeBlockName.value} (${unref(codeBlockGroups).length})`
+						}) || {})), {
+							default: withCtx(() => [createVNode(BucketTab_default, {
+								config: codeBlockConfig.value,
+								buckets: unref(codeBlockGroupsByTarget),
+								expanded: unref(expanded),
+								onToggle: unref(toggleGroup),
+								onGoto: onCodeBlockGoto,
+								onGotoInitial: onCodeBlockGotoInitial,
+								onDiffStep: unref(onCodeBlockDiff),
+								onRevertStep: unref(onCodeBlockRevert),
+								onClear: onCodeBlockClear
+							}, null, 8, [
+								"config",
+								"buckets",
+								"expanded",
+								"onToggle",
+								"onDiffStep",
+								"onRevertStep"
+							])]),
+							_: 1
+						}, 16)) : createCommentVNode("v-if", true),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(extraTabs), (tab) => {
+							return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps({ key: tab.name }, { ref_for: true }, unref(tabPaneComponent)?.props({
+								name: tab.name,
+								label: resolveTabLabel(tab)
+							}) || {}), {
+								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tab.component), mergeProps({ ref_for: true }, tab.props || {}, toHandlers(tab.listeners || {})), null, 16))]),
+								_: 2
+							}, 1040);
+						}), 128))
+					]),
 					_: 1
-				}, 8, ["visible"]),
-				createVNode(HistoryDiffDialog_default, {
-					ref: "diffDialog",
-					"extend-state": unref(extendFormState)
-				}, null, 8, ["extend-state"]),
-				createVNode(HistoryDiffDialog_default, {
-					ref: "confirmDialog",
-					"is-confirm": true,
-					"extend-state": unref(extendFormState)
-				}, null, 8, ["extend-state"])
-			], 64);
+				}, 8, ["modelValue"])])]),
+				_: 1
+			}, 8, ["visible"]);
 		};
 	}
 });