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

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

@@ -1,24 +1,24 @@
 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 { confirmHistoryAction, describeStep, isSingleDiffStepRevertable } from "./composables.js";
+import BucketTab_default from "./BucketTab.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 { 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({
+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
+		* - 数据源：以 dataSource.id 分桶，每条操作记录独立展示
+		* - 代码块：同上，按 codeBlock.id 分桶，每条操作记录独立展示
 		*
 		* 数据通过 historyService 暴露的聚合 API 读取，UI 仅用于只读展示，
 		* 同时支持点击任意一条记录跳转至该状态：
@@ -31,28 +31,103 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		* 此外每条 step 上提供"查看差异"入口（仅在前后值都存在的 update 步骤显示），
 		* 点击后弹出 HistoryDiffDialog，使用 CompareForm 组件以表单形式展示新旧值差异。
 		*
-		* 各 tab 的内容拆分为独立的 SFC（PageTab / DataSourceTab / CodeBlockTab），
+		* 各 tab 的内容拆分为独立的 SFC：页面用 PageTab，数据源 / 代码块复用通用的 BucketTab
+		* （通过 title / prefix / describe* / isStepDiffable 注入差异）。
 		* 共享的描述生成与折叠状态在 composables.ts 中维护。
 		*/
 		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;
-		const { editorService, dataSourceService, codeBlockService, historyService } = useServices();
+		/**
+		* 业务方自定义的扩展 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));
 		};
@@ -73,93 +148,49 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			codeBlockService.goto(id, 0);
 		};
 		/**
-		* 「回滚」入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
-		* 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
+		* 「单步回滚」与「查看差异」的完整逻辑收敛到 useHistoryRevert，面板与业务方共用：
+		* 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
+		* 业务方亦可直接 import useHistoryRevert(options, services) 调用，无需自行挂载任何弹窗。
 		*/
-		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");
+		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert({
+			extendState: extendFormState,
+			getPropsPanelFormState
+		}, services);
 		/**
-		* 页面 step 差异：仅 update 单节点修改可对比，传入旧/新节点。
-		* 节点类型 `type` 优先取 newNode.type，再回退 oldNode.type。
-		* `currentValue` 取自 editorService 中该节点当前实际值，用于支持「与当前对比」。
+		* 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
+		* 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。
+		* 不支持 IndexedDB 或写入失败时静默忽略（内存清空已生效）。
 		*/
-		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 syncIndexedDB = async () => {
+			try {
+				await historyService.saveToIndexedDB();
+			} catch (e) {}
+		};
+		const onPageClear = async () => {
+			if (await confirmHistoryAction("确定清空当前页面的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("page", editorService.get("page")?.id);
+				await syncIndexedDB();
 			}
 		};
-		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 onDataSourceClear = async () => {
+			if (await confirmHistoryAction("确定清空数据源的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("dataSource");
+				await syncIndexedDB();
 			}
 		};
-		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;
+		const onCodeBlockClear = async () => {
+			if (await confirmHistoryAction("确定清空代码块的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。")) {
+				historyService.clear("codeBlock");
+				await syncIndexedDB();
 			}
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(TMagicPopover), {
+			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), {
@@ -200,69 +231,95 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					default: withCtx(() => [
 						(openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(guardReactiveProps(unref(tabPaneComponent)?.props({
 							name: "page",
-							label: `页面 (${unref(pageGroups).length})`
+							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: onPageDiff,
-								onRevertStep: onPageRevert
+								onDiffStep: unref(onPageDiff),
+								onRevertStep: unref(onPageRevert),
+								onSelect: onPageSelect,
+								onClear: onPageClear
 							}, null, 8, [
 								"list",
 								"expanded",
-								"onToggle"
+								"marker",
+								"onToggle",
+								"onDiffStep",
+								"onRevertStep"
 							])]),
 							_: 1
 						}, 16)),
-						(openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(guardReactiveProps(unref(tabPaneComponent)?.props({
+						!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})`
+							label: `${dataSourceName.value} (${unref(dataSourceGroups).length})`,
+							lazy: true
 						}) || {})), {
-							default: withCtx(() => [createVNode(DataSourceTab_default, {
+							default: withCtx(() => [createVNode(BucketTab_default, {
+								config: dataSourceConfig.value,
 								buckets: unref(dataSourceGroupsByTarget),
 								expanded: unref(expanded),
 								onToggle: unref(toggleGroup),
 								onGoto: onDataSourceGoto,
 								onGotoInitial: onDataSourceGotoInitial,
-								onDiffStep: onDataSourceDiff,
-								onRevertStep: onDataSourceRevert
+								onDiffStep: unref(onDataSourceDiff),
+								onRevertStep: unref(onDataSourceRevert),
+								onClear: onDataSourceClear
 							}, null, 8, [
+								"config",
 								"buckets",
 								"expanded",
-								"onToggle"
+								"onToggle",
+								"onDiffStep",
+								"onRevertStep"
 							])]),
 							_: 1
-						}, 16)),
-						(openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(guardReactiveProps(unref(tabPaneComponent)?.props({
+						}, 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})`
+							label: `${codeBlockName.value} (${unref(codeBlockGroups).length})`,
+							lazy: true
 						}) || {})), {
-							default: withCtx(() => [createVNode(CodeBlockTab_default, {
+							default: withCtx(() => [createVNode(BucketTab_default, {
+								config: codeBlockConfig.value,
 								buckets: unref(codeBlockGroupsByTarget),
 								expanded: unref(expanded),
 								onToggle: unref(toggleGroup),
 								onGoto: onCodeBlockGoto,
 								onGotoInitial: onCodeBlockGotoInitial,
-								onDiffStep: onCodeBlockDiff,
-								onRevertStep: onCodeBlockRevert
+								onDiffStep: unref(onCodeBlockDiff),
+								onRevertStep: unref(onCodeBlockRevert),
+								onClear: onCodeBlockClear
 							}, null, 8, [
+								"config",
 								"buckets",
 								"expanded",
-								"onToggle"
+								"onToggle",
+								"onDiffStep",
+								"onRevertStep"
 							])]),
 							_: 1
-						}, 16))
+						}, 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"]), createVNode(HistoryDiffDialog_default, {
-				ref: "diffDialog",
-				"extend-state": unref(extendFormState)
-			}, null, 8, ["extend-state"])], 64);
+			}, 8, ["visible"]);
 		};
 	}
 });

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

@@ -1,24 +1,50 @@
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock } from "vue";
+import { formatHistoryFullTime, formatHistoryTime } from "./composables.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, withModifiers } from "vue";
 //#region packages/editor/src/layouts/history-list/InitialRow.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["title"];
-var _hoisted_2 = {
+var _hoisted_2 = { class: "m-editor-history-list-item-desc" };
+var _hoisted_3 = {
 	key: 0,
-	class: "m-editor-history-list-item-current"
+	class: "m-editor-history-list-item-saved",
+	title: "该记录为最近一次保存的状态"
 };
-var InitialRow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_4 = {
+	key: 1,
+	class: "m-editor-history-list-item-actions"
+};
+var _hoisted_5 = ["title"];
+var InitialRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorHistoryListInitialRow",
 	__name: "InitialRow",
-	props: { isCurrent: { type: Boolean } },
+	props: {
+		isCurrent: { type: Boolean },
+		gotoEnabled: {
+			type: Boolean,
+			default: true
+		},
+		marker: { default: void 0 }
+	},
 	emits: ["goto-initial"],
 	setup(__props, { emit: __emit }) {
 		/**
 		* 「初始状态」记录行：渲染于历史列表底部，作为整个栈的"零点"。
 		* - 点击该行会把对应栈撤销到 cursor === 0（即没有任何已应用步骤），等同于回到所有修改之前。
 		* - 当对应栈本身已处于 cursor === 0 时（isCurrent=true），用户已在初始状态，点击不再触发动作。
+		* - 当上层传入 `marker`（设置 root 时为该页生成的「未修改的初始状态」标记）时，
+		*   用标记的文案与时间渲染本行；标记不进入撤销/重做栈，仅作为该页基线展示。
 		*
 		* 该行不是真实 step，仅作为 UI 入口；上层负责把"点击"翻译为 `service.goto*(0)`。
 		*/
 		const props = __props;
+		const desc = computed(() => props.marker?.historyDescription || "未修改的初始状态");
+		/** 基线（初始状态）是否为最近一次保存点：仅页面栈的 `initial` 基线 step 会被 markSaved 标记。 */
+		const saved = computed(() => Boolean(props.marker?.saved));
+		const time = computed(() => formatHistoryTime(props.marker?.timestamp));
+		const timeTitle = computed(() => formatHistoryFullTime(props.marker?.timestamp));
+		const rowTitle = computed(() => {
+			const base = props.marker?.historyDescription || "未修改的初始状态";
+			return props.isCurrent ? `当前已回到${base}` : `点击回到${base}`;
+		});
 		const emit = __emit;
 		const onClick = () => {
 			if (props.isCurrent) return;
@@ -30,16 +56,25 @@ var InitialRow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"is-current": __props.isCurrent,
 					"is-clickable": !__props.isCurrent
 				}]),
-				title: __props.isCurrent ? "当前已回到未修改的初始状态" : "点击回到未修改的初始状态",
-				onClick
+				title: rowTitle.value
 			}, [
 				_cache[0] || (_cache[0] = createElementVNode("span", {
 					class: "m-editor-history-list-item-index",
 					title: "历史步骤编号 #0（未修改的初始状态）"
 				}, "#0", -1)),
 				_cache[1] || (_cache[1] = createElementVNode("span", { class: "m-editor-history-list-item-op op-initial" }, "初始", -1)),
-				_cache[2] || (_cache[2] = createElementVNode("span", { class: "m-editor-history-list-item-desc" }, "未修改的初始状态", -1)),
-				__props.isCurrent ? (openBlock(), createElementBlock("span", _hoisted_2, "当前")) : createCommentVNode("v-if", true)
+				createElementVNode("span", _hoisted_2, toDisplayString(desc.value), 1),
+				saved.value ? (openBlock(), createElementBlock("span", _hoisted_3, "已保存")) : createCommentVNode("v-if", true),
+				__props.gotoEnabled && !__props.isCurrent ? (openBlock(), createElementBlock("span", _hoisted_4, [createElementVNode("span", {
+					class: "m-editor-history-list-item-goto",
+					title: "回到该记录",
+					onClick: withModifiers(onClick, ["stop"])
+				}, "回到")])) : createCommentVNode("v-if", true),
+				time.value ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: "m-editor-history-list-item-time",
+					title: timeTitle.value
+				}, toDisplayString(time.value), 9, _hoisted_5)) : createCommentVNode("v-if", true)
 			], 10, _hoisted_1);
 		};
 	}

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

@@ -1,4 +1,4 @@
-import { describePageGroup, describePageStep } from "./composables.js";
+import { describePageGroup, describePageStep, isHistoryGroupExpanded, isPageStepRevertable, toRowGroup } from "./composables.js";
 import GroupRow_default from "./GroupRow.js";
 import InitialRow_default from "./InitialRow.js";
 import { TMagicScrollbar } from "@tmagic/design";
@@ -8,90 +8,86 @@ var _hoisted_1 = {
 	key: 0,
 	class: "m-editor-history-list-empty"
 };
-var _hoisted_2 = { class: "m-editor-history-list-ul" };
-var PageTab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-history-list-toolbar"
+};
+var _hoisted_3 = { class: "m-editor-history-list-ul" };
+var PageTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorHistoryListPageTab",
 	__name: "PageTab",
 	props: {
 		list: {},
-		expanded: {}
+		expanded: {},
+		marker: {}
 	},
 	emits: [
 		"toggle",
 		"goto",
 		"goto-initial",
 		"diff-step",
-		"revert-step"
+		"revert-step",
+		"select",
+		"clear"
 	],
 	setup(__props) {
 		const props = __props;
 		/**
 		* 当前 step 是否可查看差异：
 		* - 仅 update 操作；
-		* - 单节点更新（updatedItems.length === 1），且 oldNode / newNode 都存在。
+		* - 单节点更新（diff.length === 1），且 oldSchema / newSchema 都存在。
 		* 多节点更新难以选定单一对比目标，统一不展示差异入口。
 		*/
 		const isPageStepDiffable = (step) => {
 			if (step.opType !== "update") return false;
-			const items = step.updatedItems ?? [];
+			const items = step.diff ?? [];
 			if (items.length !== 1) return false;
-			return Boolean(items[0]?.oldNode && items[0]?.newNode);
+			return Boolean(items[0]?.oldSchema && items[0]?.newSchema);
+		};
+		/** 页面历史的描述 / 可操作性判定集合，注入给统一的 `toRowGroup`。 */
+		const descriptor = {
+			describeGroup: describePageGroup,
+			describeStep: describePageStep,
+			isStepDiffable: isPageStepDiffable,
+			isStepRevertable: isPageStepRevertable
 		};
+		const rowKey = (group) => `pg-${group.steps[0]?.index}`;
+		const toRow = (group) => toRowGroup(group, rowKey(group), descriptor);
 		/**
 		* 是否处于"初始状态"——即对应页面历史栈 cursor===0：
-		* 当 list 中所有 group 的 applied 都为 false 时即为该状态。
-		* 没有任何 group 的情况由外层"暂无操作记录"分支兜底，本计算可以不考虑。
+		* 当 list 中所有 group 的 applied 都为 false 时即为该状态（空列表 `every` 返回 true，
+		* 即仅有 marker、无任何操作记录时也视为处于初始状态）。
 		*/
-		const isInitial = computed(() => props.list.length > 0 && props.list.every((g) => !g.applied));
+		const isInitial = computed(() => props.list.every((g) => !g.applied));
 		return (_ctx, _cache) => {
-			return !__props.list.length ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createBlock(unref(TMagicScrollbar), {
-				key: 1,
-				"max-height": "360px"
-			}, {
-				default: withCtx(() => [createElementVNode("ul", _hoisted_2, [
-					(openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (group, gIdx) => {
+			return !__props.list.length && !__props.marker ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.list.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", {
+				class: "m-editor-history-list-clear",
+				title: "清空当前页面的历史记录",
+				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear"))
+			}, "清空")])) : createCommentVNode("v-if", true), createVNode(unref(TMagicScrollbar), { "max-height": "360px" }, {
+				default: withCtx(() => [createElementVNode("ul", _hoisted_3, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (group) => {
 						return openBlock(), createBlock(GroupRow_default, {
-							key: `pg-${gIdx}`,
-							"group-key": `pg-${gIdx}`,
-							applied: group.applied,
-							merged: group.steps.length > 1,
-							"op-type": group.opType,
-							desc: unref(describePageGroup)(group),
-							"step-count": group.steps.length,
-							"sub-steps": group.steps.map((s) => ({
-								index: s.index,
-								applied: s.applied,
-								isCurrent: s.isCurrent,
-								desc: unref(describePageStep)(s.step),
-								diffable: isPageStepDiffable(s.step),
-								revertable: s.applied
-							})),
-							"is-current": group.isCurrent,
-							expanded: !!__props.expanded[`pg-${gIdx}`],
-							onToggle: _cache[0] || (_cache[0] = (key) => _ctx.$emit("toggle", key)),
-							onGoto: _cache[1] || (_cache[1] = (index) => _ctx.$emit("goto", index)),
-							onDiffStep: _cache[2] || (_cache[2] = (index) => _ctx.$emit("diff-step", index)),
-							onRevertStep: _cache[3] || (_cache[3] = (index) => _ctx.$emit("revert-step", index))
-						}, null, 8, [
-							"group-key",
-							"applied",
-							"merged",
-							"op-type",
-							"desc",
-							"step-count",
-							"sub-steps",
-							"is-current",
-							"expanded"
-						]);
+							key: rowKey(group),
+							group: toRow(group),
+							expanded: unref(isHistoryGroupExpanded)(__props.expanded, rowKey(group)),
+							"select-enabled": true,
+							onToggle: _cache[1] || (_cache[1] = (key) => _ctx.$emit("toggle", key)),
+							onGoto: _cache[2] || (_cache[2] = (index) => _ctx.$emit("goto", index)),
+							onDiffStep: _cache[3] || (_cache[3] = (index) => _ctx.$emit("diff-step", index)),
+							onRevertStep: _cache[4] || (_cache[4] = (index) => _ctx.$emit("revert-step", index)),
+							onSelect: _cache[5] || (_cache[5] = (index) => _ctx.$emit("select", index))
+						}, null, 8, ["group", "expanded"]);
 					}), 128)),
-					createCommentVNode("\n        初始状态项：永远位于列表底部（页面 tab 倒序展示，最底部=最早），\n        作为\"未修改\"零点。当所有 group 都未 applied 时它即为当前位置。\n      "),
+					createCommentVNode("\n        初始状态项：永远位于列表底部（页面 tab 倒序展示，最底部=最早），\n        作为\"未修改\"零点。当所有 group 都未 applied 时它即为当前位置。\n        设置 root 时生成的「未修改的初始状态」标记（marker）会作为该行的文案与时间来源。\n      "),
 					createVNode(InitialRow_default, {
 						"is-current": isInitial.value,
-						onGotoInitial: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("goto-initial"))
-					}, null, 8, ["is-current"])
+						marker: __props.marker,
+						onGotoInitial: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("goto-initial"))
+					}, null, 8, ["is-current", "marker"])
 				])]),
 				_: 1
-			}));
+			})], 64));
 		};
 	}
 });