@tmagic/editor 1.8.0-beta.4 → 1.8.0-beta.5

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

@@ -4,11 +4,17 @@ import { describeCodeBlockGroup, describeCodeBlockStep, describeDataSourceGroup,
 import BucketTab_default from "./BucketTab.js";
 import HistoryDiffDialog_default from "./HistoryDiffDialog.js";
 import PageTab_default from "./PageTab.js";
-import { TMagicButton, TMagicPopover, TMagicTabs, TMagicTooltip, getDesignConfig } from "@tmagic/design";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, inject, markRaw, mergeProps, normalizeProps, openBlock, ref, renderList, resolveDynamicComponent, shallowRef, toHandlers, unref, useTemplateRef, watch, withCtx } from "vue";
+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 { 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",
@@ -37,7 +43,10 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const ClockIcon = markRaw(Clock);
 		const CloseIcon = markRaw(Close);
 		const activeTab = ref("page");
-		/** 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。 */
+		/**
+		* 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。
+		* 点击面板以外区域的自动收起由 TMagicPopover 通过 v-model:visible 回写完成。
+		*/
 		const visible = ref(false);
 		const tabPaneComponent = getDesignConfig("components")?.tabPane;
 		/**
@@ -47,7 +56,7 @@ 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 } = useServices();
+		const { editorService, dataSourceService, codeBlockService, historyService, propsService, stageOverlayService } = useServices();
 		/**
 		* 数据源 / 代码块功能可被业务方通过 `disabledDataSource` / `disabledCodeBlock` 禁用，
 		* 禁用后对应的历史记录 tab 不再展示。若当前激活的 tab 恰好被禁用，则回退到「页面」tab。
@@ -64,15 +73,60 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		*/
 		const extendFormState = inject("extendFormState", void 0);
 		const { expanded, toggleGroup, pageGroups, dataSourceGroups, codeBlockGroups, pageGroupsDisplay, dataSourceGroupsByTarget, codeBlockGroupsByTarget } = useHistoryList();
+		/**
+		* 当前活动页的「加载/初始」标记记录（设置 root 时生成），透传给 PageTab 的底部初始行展示。
+		* 基于 historyService 的 reactive state 派生，活动页切换或标记写入后自动刷新。
+		*/
+		const pageMarker = computed(() => historyService.getPageMarker());
 		/** 数据源 step 仅 update（前后 schema 都存在）时可查看差异。 */
-		const isDataSourceStepDiffable = (step) => Boolean(step.oldSchema && step.newSchema);
+		const isDataSourceStepDiffable = (step) => Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
 		/** 代码块 step 仅 update（前后 content 都存在）时可查看差异。 */
-		const isCodeBlockStepDiffable = (step) => Boolean(step.oldContent && step.newContent);
+		const isCodeBlockStepDiffable = (step) => Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
+		/**
+		* 数据源 / 代码块两类 bucket 历史的整体渲染配置：把 title / prefix 与各自的描述、
+		* 可差异、可回滚判定收敛为单一对象整体注入 BucketTab，组件内部按需读取。
+		*/
+		const dataSourceConfig = {
+			title: "数据源",
+			prefix: "ds",
+			describeGroup: describeDataSourceGroup,
+			describeStep: describeDataSourceStep,
+			isStepDiffable: isDataSourceStepDiffable,
+			isStepRevertable: isDataSourceStepRevertable
+		};
+		const codeBlockConfig = {
+			title: "代码块",
+			prefix: "cb",
+			describeGroup: describeCodeBlockGroup,
+			describeStep: describeCodeBlockStep,
+			isStepDiffable: isCodeBlockStepDiffable,
+			isStepRevertable: isCodeBlockStepRevertable
+		};
 		/** 把"目标 step 索引"翻译成"目标 cursor"（已应用步骤数量）。 */
 		const indexToCursor = (index) => index + 1;
 		const onPageGoto = (index) => {
 			editorService.gotoPageStep(indexToCursor(index));
 		};
+		/**
+		* 点击页面历史记录行：选中该记录对应的画布节点。
+		* - 从目标 step 的 diff 中取节点 id（优先 newSchema，回退 oldSchema），按出现顺序找到第一个当前仍存在的节点；
+		* - 与图层树点击选中一致：editorService.select + 画布 / overlay 画布 select 三者联动；
+		* - 该 step 涉及的节点都已不存在（如删除记录、被撤销的新增）时给出提示，不做选中。
+		*/
+		const onPageSelect = async (index) => {
+			const step = historyService.getPageStepList()[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) {
+				tMagicMessage.warning("该记录对应的节点已不存在，无法选中");
+				return;
+			}
+			const node = editorService.getNodeById(targetId, false);
+			if (!node) return;
+			await editorService.select(node);
+			editorService.get("stage")?.select(targetId);
+			stageOverlayService.get("stage")?.select(targetId);
+		};
 		const onDataSourceGoto = (id, index) => {
 			dataSourceService.goto(id, indexToCursor(index));
 		};
@@ -93,71 +147,53 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			codeBlockService.goto(id, 0);
 		};
 		const diffDialogRef = useTemplateRef("diffDialog");
+		const confirmDialogRef = useTemplateRef("confirmDialog");
 		/**
-		* 构造页面 step 的差异弹窗入参：仅 update 单节点修改可对比，传入旧/新节点。
-		* 节点类型 `type` 优先取 newNode.type，再回退 oldNode.type。
-		* `currentValue` 取自 editorService 中该节点当前实际值，用于支持「与当前对比」。
-		* 无可对比内容（如多节点 / add / remove）时返回 null。
+		* 三类历史（页面 / 数据源 / 代码块）差异弹窗入参的构造差异，收敛为一份配置：
+		* 仅「分组来源、当前值读取、类型 / 展示名提取」不同，定位 step、校验前后值、组装 payload 的流程共用。
 		*/
-		const buildPageDiffPayload = (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 null;
-				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;
+		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: "node",
-					type,
-					lastValue: item.oldNode,
-					value: item.newNode,
-					currentValue: currentNode || null,
-					targetLabel: item.newNode.name || item.oldNode.name || type,
-					id: nodeId
+					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;
 		};
-		/**
-		* 在指定分组列表中按 id / index 查找命中的 step，命中后交由 build 构造差异弹窗入参。
-		* 用于统一数据源、代码块两类历史的查找逻辑。
-		*/
-		const findGroupStep = (groups, id, index, build) => {
-			for (const group of groups) {
-				if (group.id !== id) continue;
-				const entry = group.steps.find((s) => s.index === index);
-				if (!entry) continue;
-				return build(entry.step);
-			}
-			return null;
-		};
-		const buildDataSourceDiffPayload = (id, index) => findGroupStep(historyService.getDataSourceHistoryGroups(), id, index, ({ oldSchema, newSchema }) => {
-			if (!oldSchema || !newSchema) return null;
-			const currentSchema = dataSourceService.getDataSourceById(`${id}`);
-			return {
-				category: "data-source",
-				type: newSchema.type || oldSchema.type || "base",
-				lastValue: oldSchema,
-				value: newSchema,
-				currentValue: currentSchema || null,
-				targetLabel: newSchema.title || oldSchema.title || `${id}`,
-				id
-			};
-		});
-		const buildCodeBlockDiffPayload = (id, index) => findGroupStep(historyService.getCodeBlockHistoryGroups(), id, index, ({ oldContent, newContent }) => {
-			if (!oldContent || !newContent) return null;
-			return {
-				category: "code-block",
-				lastValue: oldContent,
-				value: newContent,
-				currentValue: codeBlockService.getCodeContentById(id) || null,
-				targetLabel: newContent.name || oldContent.name || `${id}`,
-				id
-			};
-		});
+		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);
@@ -170,173 +206,259 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			const payload = buildCodeBlockDiffPayload(id, index);
 			if (payload) diffDialogRef.value?.open(payload);
 		};
-		const onConfirmRevert = shallowRef();
 		/**
-		* 「回滚」入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
+		* 「回滚」统一入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
 		* 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
 		*
-		* 交互：先弹出该步骤的差异弹窗供用户确认，点击「确定回滚」后再真正执行回滚；
-		* 对没有可对比内容的步骤（如 add / remove / 多节点更新）则直接回滚。
+		* 交互：
+		* - 可差异对比的步骤（单节点 / 单实体 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) => {
-			const payload = buildPageDiffPayload(index);
-			onConfirmRevert.value = () => editorService.revertPageStep(index);
-			if (payload) diffDialogRef.value?.open({ ...payload });
-			else onConfirmRevert.value();
+			if (isPageRevertTargetMissing(index)) {
+				showRevertTargetMissing();
+				return Promise.resolve(null);
+			}
+			return runRevert(buildPageDiffPayload(index)).then((result) => result ? editorService.revertPageStep(index) : null);
 		};
 		const onDataSourceRevert = (id, index) => {
-			const payload = buildDataSourceDiffPayload(id, index);
-			onConfirmRevert.value = () => dataSourceService.revert(id, index);
-			if (payload) diffDialogRef.value?.open({ ...payload });
-			else onConfirmRevert.value();
+			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) => {
-			const payload = buildCodeBlockDiffPayload(id, index);
-			onConfirmRevert.value = () => codeBlockService.revert(id, index);
-			if (payload) diffDialogRef.value?.open({ ...payload });
-			else onConfirmRevert.value();
+			if (isCodeBlockRevertTargetMissing(id, index)) {
+				showRevertTargetMissing();
+				return Promise.resolve(null);
+			}
+			return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) => result ? codeBlockService.revert(id, index) : null);
+		};
+		/**
+		* 「回滚」二次确认：新增 / 删除 / 多节点更新等无法做差异对比的步骤，
+		* 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
+		* 用户取消时返回 false，调用方据此中止回滚。
+		*/
+		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;
+			}
+		};
+		/**
+		* 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
+		* 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。
+		* 不支持 IndexedDB 或写入失败时静默忽略（内存清空已生效）。
+		*/
+		const syncIndexedDB = async () => {
+			try {
+				await historyService.saveToIndexedDB();
+			} catch (e) {}
+		};
+		const onPageClear = async () => {
+			if (await confirmDialog("确定清空当前页面的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clearPage();
+				await syncIndexedDB();
+			}
 		};
-		const onDiffDialogClose = () => {
-			onConfirmRevert.value = void 0;
+		const onDataSourceClear = async () => {
+			if (await confirmDialog("确定清空数据源的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clearDataSource();
+				await syncIndexedDB();
+			}
+		};
+		const onCodeBlockClear = async () => {
+			if (await confirmDialog("确定清空代码块的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clearCodeBlock();
+				await syncIndexedDB();
+			}
 		};
 		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",
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(unref(TMagicPopover), {
+					"popper-class": "m-editor-history-list-popover",
 					placement: "bottom",
-					content: "历史记录"
+					trigger: "click",
+					visible: visible.value,
+					"onUpdate:visible": _cache[3] || (_cache[3] = ($event) => visible.value = $event),
+					width: 660
 				}, {
-					default: withCtx(() => [createVNode(unref(TMagicButton), {
-						size: "small",
-						link: "",
-						onClick: _cache[2] || (_cache[2] = ($event) => visible.value = !visible.value)
+					reference: withCtx(() => [createVNode(unref(TMagicTooltip), {
+						effect: "dark",
+						placement: "bottom",
+						content: "历史记录"
 					}, {
-						icon: withCtx(() => [createVNode(Icon_default, { icon: unref(ClockIcon) }, null, 8, ["icon"])]),
+						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
 					})]),
-					_: 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(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(TMagicTooltip), {
+						effect: "dark",
+						placement: "top",
+						content: "关闭"
 					}, {
-						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)),
-						!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, {
-								title: "数据源",
-								prefix: "ds",
-								buckets: unref(dataSourceGroupsByTarget),
-								expanded: unref(expanded),
-								"describe-group": unref(describeDataSourceGroup),
-								"describe-step": unref(describeDataSourceStep),
-								"is-step-diffable": isDataSourceStepDiffable,
-								"is-step-revertable": unref(isDataSourceStepRevertable),
-								onToggle: unref(toggleGroup),
-								onGoto: onDataSourceGoto,
-								onGotoInitial: onDataSourceGotoInitial,
-								onDiffStep: onDataSourceDiff,
-								onRevertStep: onDataSourceRevert
-							}, null, 8, [
-								"buckets",
-								"expanded",
-								"describe-group",
-								"describe-step",
-								"is-step-revertable",
-								"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, {
-								title: "代码块",
-								prefix: "cb",
-								buckets: unref(codeBlockGroupsByTarget),
-								expanded: unref(expanded),
-								"describe-group": unref(describeCodeBlockGroup),
-								"describe-step": unref(describeCodeBlockStep),
-								"is-step-diffable": isCodeBlockStepDiffable,
-								"is-step-revertable": unref(isCodeBlockStepRevertable),
-								onToggle: unref(toggleGroup),
-								onGoto: onCodeBlockGoto,
-								onGotoInitial: onCodeBlockGotoInitial,
-								onDiffStep: onCodeBlockDiff,
-								onRevertStep: onCodeBlockRevert
-							}, null, 8, [
-								"buckets",
-								"expanded",
-								"describe-group",
-								"describe-step",
-								"is-step-revertable",
-								"onToggle"
-							])]),
+						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
-						}, 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
+					}), 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),
+									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))
+						]),
+						_: 1
+					}, 8, ["modelValue"])])]),
 					_: 1
-				}, 8, ["modelValue"])])]),
-				_: 1
-			}, 8, ["visible"]), createVNode(HistoryDiffDialog_default, {
-				ref: "diffDialog",
-				"extend-state": unref(extendFormState),
-				"on-confirm": onConfirmRevert.value,
-				onClose: onDiffDialogClose
-			}, null, 8, ["extend-state", "on-confirm"])], 64);
+				}, 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);
 		};
 	}
 });