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

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

@@ -0,0 +1,287 @@
+import CodeEditor_default from "../CodeEditor.js";
+import CompareForm_default from "../../components/CompareForm.js";
+import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from "@tmagic/design";
+import { Fragment, 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 = {
+	key: 0,
+	class: "m-editor-history-diff-dialog-notice"
+};
+var _hoisted_3 = { class: "m-editor-history-diff-dialog-header" };
+var _hoisted_4 = { class: "m-editor-history-diff-dialog-target" };
+var _hoisted_5 = { class: "m-editor-history-diff-dialog-controls" };
+var _hoisted_6 = { class: "m-editor-history-diff-dialog-legend" };
+var _hoisted_7 = {
+	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: {
+		services: {},
+		extendState: {},
+		loadConfig: {},
+		width: { default: "900px" },
+		isConfirm: { type: Boolean },
+		onConfirm: {},
+		selfDiffFieldTypes: {},
+		compareFormState: {}
+	},
+	emits: ["close"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		/**
+		* 差异对比模式：
+		* - before：该步骤修改前 vs 该步骤修改后（默认行为，体现这一步带来的变化）
+		* - current：该步骤修改后 vs 当前最新值（用于查看「该步骤之后是否还被改过」）
+		*/
+		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 dialogTitle = computed(() => props.onConfirm ? "确认回滚" : "查看修改差异");
+		const hasCurrent = computed(() => payload.value?.currentValue !== void 0 && payload.value?.currentValue !== null);
+		/** 是否存在该步「修改后的值」：不存在（如仅删除）时「与修改前对比」无意义，置灰禁用。 */
+		const hasValue = computed(() => payload.value?.value !== void 0 && payload.value?.value !== null);
+		/**
+		* 计算 open 时的初始对比模式：
+		* 没有「修改后的值」但有当前值时（「与修改前对比」不可用），默认进入「与当前对比」；否则默认「与修改前对比」。
+		*/
+		const resolveInitialMode = () => !hasValue.value && hasCurrent.value ? "current" : "before";
+		/** 左侧（旧/参照）值 */
+		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);
+		});
+		/** confirm() 的 resolve，仅在「等待用户确认回滚」期间存在 */
+		let confirmResolve = null;
+		const onConfirmClick = () => {
+			props.onConfirm?.();
+			confirmResolve?.(true);
+			confirmResolve = null;
+			visible.value = false;
+		};
+		const targetText = computed(() => {
+			if (!payload.value) return "";
+			const categoryText = {
+				node: "节点",
+				"data-source": "数据源",
+				"code-block": "代码块"
+			};
+			const { category } = payload.value;
+			const prefix = category ? categoryText[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 = resolveInitialMode();
+			viewMode.value = "form";
+			visible.value = true;
+		};
+		/**
+		* 以 Promise 形式打开确认回滚弹窗：
+		* - 用户点击「确定回滚」时 resolve(true)；
+		* - 取消 / 关闭 / 按 Esc 等其他方式关闭弹窗时 resolve(false)。
+		*
+		* 同一时刻只允许一个待确认流程，重复调用会先 resolve(false) 掉上一个。
+		*/
+		const confirm = (p) => {
+			confirmResolve?.(false);
+			confirmResolve = null;
+			return new Promise((resolve) => {
+				confirmResolve = resolve;
+				open(p);
+			});
+		};
+		const close = () => {
+			visible.value = false;
+		};
+		watch(visible, (v) => {
+			if (!v) {
+				payload.value = null;
+				confirmResolve?.(false);
+				confirmResolve = null;
+			}
+		});
+		const onClose = () => {
+			emit("close");
+		};
+		__expose({
+			open,
+			confirm,
+			close
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicDialog), {
+				modelValue: visible.value,
+				"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => visible.value = $event),
+				class: "m-editor-history-diff-dialog",
+				title: dialogTitle.value,
+				top: "5vh",
+				"destroy-on-close": "",
+				"append-to-body": "",
+				width: __props.width,
+				onClose
+			}, {
+				footer: withCtx(() => [__props.isConfirm ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(TMagicButton), {
+					size: "small",
+					onClick: _cache[2] || (_cache[2] = ($event) => visible.value = false)
+				}, {
+					default: withCtx(() => [..._cache[10] || (_cache[10] = [createTextVNode("取消", -1)])]),
+					_: 1
+				}), createVNode(unref(TMagicButton), {
+					size: "small",
+					type: "primary",
+					onClick: onConfirmClick
+				}, {
+					default: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode("确定回滚", -1)])]),
+					_: 1
+				})], 64)) : (openBlock(), createBlock(unref(TMagicButton), {
+					key: 1,
+					size: "small",
+					onClick: _cache[3] || (_cache[3] = ($event) => visible.value = false)
+				}, {
+					default: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode("关闭", -1)])]),
+					_: 1
+				}))]),
+				default: withCtx(() => [payload.value && visible.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+					__props.onConfirm ? (openBlock(), createElementBlock("div", _hoisted_2, "仅回滚有差异的字段")) : createCommentVNode("v-if", true),
+					createElementVNode("div", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(targetText.value), 1), createElementVNode("div", _hoisted_5, [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[5] || (_cache[5] = [createTextVNode("表单对比", -1)])]),
+							_: 1
+						}), createVNode(unref(TMagicRadioButton), { value: "code" }, {
+							default: withCtx(() => [..._cache[6] || (_cache[6] = [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",
+							disabled: !hasValue.value
+						}, {
+							default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("与修改前对比", -1)])]),
+							_: 1
+						}, 8, ["disabled"]), createVNode(unref(TMagicRadioButton), {
+							value: "current",
+							disabled: !hasCurrent.value
+						}, {
+							default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode("与当前对比", -1)])]),
+							_: 1
+						}, 8, ["disabled"])]),
+						_: 1
+					}, 8, ["modelValue"])])]),
+					createElementVNode("div", _hoisted_6, [
+						createVNode(unref(TMagicTag), {
+							size: "small",
+							type: "danger"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(leftLabel.value), 1)]),
+							_: 1
+						}),
+						_cache[9] || (_cache[9] = 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_7, " 当前值与该步修改后一致，无差异 ")) : createCommentVNode("v-if", true)
+					]),
+					viewMode.value === "form" ? (openBlock(), createBlock(CompareForm_default, {
+						key: 1,
+						category: payload.value.category,
+						type: payload.value.type,
+						"data-source-type": payload.value.dataSourceType,
+						value: rightValue.value,
+						"last-value": leftValue.value,
+						"base-form-state": __props.compareFormState,
+						"extend-state": __props.extendState,
+						"load-config": __props.loadConfig,
+						"self-diff-field-types": __props.selfDiffFieldTypes,
+						services: props.services,
+						height: "70vh"
+					}, null, 8, [
+						"category",
+						"type",
+						"data-source-type",
+						"value",
+						"last-value",
+						"base-form-state",
+						"extend-state",
+						"load-config",
+						"self-diff-field-types",
+						"services"
+					])) : (openBlock(), createBlock(CodeEditor_default, {
+						key: 2,
+						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",
+				"title",
+				"width"
+			]);
+		};
+	}
+});
+//#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,327 @@
+import { useServices } from "../../hooks/use-services.js";
+import Icon_default from "../../components/Icon.js";
+import { confirmHistoryAction, describeStep, isSingleDiffStepRevertable } from "./composables.js";
+import BucketTab_default from "./BucketTab.js";
+import PageTab_default from "./PageTab.js";
+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" };
+var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorHistoryListPanel",
+	__name: "HistoryListPanel",
+	setup(__props) {
+		/**
+		* 历史记录面板：在顶部 NavMenu 上点击图标打开 popover，分三个 tab：
+		* - 页面：当前活动页面的历史栈，连续修改同一节点的多步会被合并成一组
+		* - 数据源：以 dataSource.id 分桶，每条操作记录独立展示
+		* - 代码块：同上，按 codeBlock.id 分桶，每条操作记录独立展示
+		*
+		* 数据通过 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，数据源 / 代码块复用通用的 BucketTab
+		* （通过 title / prefix / describe* / isStepDiffable 注入差异）。
+		* 共享的描述生成与折叠状态在 composables.ts 中维护。
+		*/
+		const ClockIcon = markRaw(Clock);
+		const CloseIcon = markRaw(Close);
+		const activeTab = ref("page");
+		/**
+		* 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。
+		* 点击面板以外区域的自动收起由 TMagicPopover 通过 v-model:visible 回写完成。
+		*/
+		const visible = ref(false);
+		const tabPaneComponent = getDesignConfig("components")?.tabPane;
+		/**
+		* 业务方自定义的扩展 tab，由 Editor 顶层通过 `historyListExtraTabs` 注入。
+		* 追加在内置「页面 / 数据源 / 代码块」三个 tab 之后，未提供时为空数组。
+		*/
+		const extraTabs = inject("historyListExtraTabs", []);
+		/** label 支持字符串或函数，函数形式便于展示动态数量等内容。 */
+		const resolveTabLabel = (tab) => typeof tab.label === "function" ? tab.label() : tab.label;
+		const services = useServices();
+		const { editorService, dataSourceService, codeBlockService, historyService, propsService, stageOverlayService } = services;
+		/**
+		* 数据源 / 代码块功能可被业务方通过 `disabledDataSource` / `disabledCodeBlock` 禁用，
+		* 禁用后对应的历史记录 tab 不再展示。若当前激活的 tab 恰好被禁用，则回退到「页面」tab。
+		*/
+		const disabledDataSource = computed(() => propsService.getDisabledDataSource());
+		const disabledCodeBlock = computed(() => propsService.getDisabledCodeBlock());
+		watch([disabledDataSource, disabledCodeBlock], ([dsDisabled, cbDisabled]) => {
+			if (activeTab.value === "data-source" && dsDisabled || activeTab.value === "code-block" && cbDisabled) activeTab.value = "page";
+		});
+		/**
+		* 通过 inject 拿到 Editor 顶层注入的 `extendFormState`，转交给 HistoryDiffDialog
+		* 内部的 CompareForm，使差异对比表单的 filterFunction 能拿到完整的业务上下文。
+		* 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
+		*/
+		const extendFormState = inject("extendFormState", void 0);
+		const getPropsPanelFormState = inject("getPropsPanelFormState", void 0);
+		const { expanded, toggleGroup, pageGroups, dataSourceGroups, codeBlockGroups, pageGroupsDisplay, dataSourceGroupsByTarget, codeBlockGroupsByTarget } = useHistoryList();
+		/**
+		* 当前活动页的「加载/初始」标记记录（设置 root 时生成），透传给 PageTab 的底部初始行展示。
+		* 基于 historyService 的 reactive state 派生，活动页切换或标记写入后自动刷新。
+		*/
+		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 isStepDiffable = (step) => Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
+		/**
+		* 数据源 / 代码块两类 bucket 历史的整体渲染配置：把 title / prefix 与各自的描述、
+		* 可差异、可回滚判定收敛为单一对象整体注入 BucketTab，组件内部按需读取。
+		* title / 描述回退名取自可配置的展示名称，故用 computed 使其随 stepNames 变更刷新。
+		*/
+		const dataSourceConfig = computed(() => ({
+			title: dataSourceName.value,
+			prefix: "ds",
+			describeStep: (step) => describeStep(step, (schema) => schema?.title, dataSourceName.value),
+			isStepDiffable,
+			isStepRevertable: isSingleDiffStepRevertable
+		}));
+		const codeBlockConfig = computed(() => ({
+			title: codeBlockName.value,
+			prefix: "cb",
+			describeStep: (step) => describeStep(step, (content) => content?.name, codeBlockName.value),
+			isStepDiffable,
+			isStepRevertable: isSingleDiffStepRevertable
+		}));
+		/** 把"目标 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.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) {
+				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));
+		};
+		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);
+		};
+		/**
+		* 「单步回滚」与「查看差异」的完整逻辑收敛到 useHistoryRevert，面板与业务方共用：
+		* 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
+		* 业务方亦可直接 import useHistoryRevert(options, services) 调用，无需自行挂载任何弹窗。
+		*/
+		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert({
+			extendState: extendFormState,
+			getPropsPanelFormState
+		}, services);
+		/**
+		* 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
+		* 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。
+		* 不支持 IndexedDB 或写入失败时静默忽略（内存清空已生效）。
+		*/
+		const syncIndexedDB = async () => {
+			try {
+				await historyService.saveToIndexedDB();
+			} catch (e) {}
+		};
+		const onPageClear = async () => {
+			if (await confirmHistoryAction("确定清空当前页面的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("page", editorService.get("page")?.id);
+				await syncIndexedDB();
+			}
+		};
+		const onDataSourceClear = async () => {
+			if (await confirmHistoryAction("确定清空数据源的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("dataSource");
+				await syncIndexedDB();
+			}
+		};
+		const onCodeBlockClear = async () => {
+			if (await confirmHistoryAction("确定清空代码块的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("codeBlock");
+				await syncIndexedDB();
+			}
+		};
+		return (_ctx, _cache) => {
+			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",
+					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: `${pageName.value} (${unref(pageGroups).length})`,
+							lazy: true
+						}) || {})), {
+							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})`,
+							lazy: true
+						}) || {})), {
+							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})`,
+							lazy: true
+						}) || {})), {
+							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),
+								lazy: true
+							}) || {}), {
+								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, ["visible"]);
+		};
+	}
+});
+//#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 };