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

package/src/layouts/history-list/HistoryListPanel.vue

@@ -3,7 +3,7 @@
     popper-class="m-editor-history-list-popover"
     placement="bottom"
     trigger="click"
-    :visible="visible"
+    v-model:visible="visible"
     :width="660"
   >
     <div class="m-editor-history-list">
@@ -23,11 +23,14 @@
           <PageTab
             :list="pageGroupsDisplay"
             :expanded="expanded"
+            :marker="pageMarker"
             @toggle="toggleGroup"
             @goto="onPageGoto"
             @goto-initial="onPageGotoInitial"
             @diff-step="onPageDiff"
             @revert-step="onPageRevert"
+            @select="onPageSelect"
+            @clear="onPageClear"
           />
         </component>
 
@@ -37,18 +40,15 @@
           v-bind="tabPaneComponent?.props({ name: 'data-source', label: `数据源 (${dataSourceGroups.length})` }) || {}"
         >
           <BucketTab
-            title="数据源"
-            prefix="ds"
+            :config="dataSourceConfig"
             :buckets="dataSourceGroupsByTarget"
             :expanded="expanded"
-            :describe-group="describeDataSourceGroup"
-            :describe-step="describeDataSourceStep"
-            :is-step-diffable="isDataSourceStepDiffable"
             @toggle="toggleGroup"
             @goto="onDataSourceGoto"
             @goto-initial="onDataSourceGotoInitial"
             @diff-step="onDataSourceDiff"
             @revert-step="onDataSourceRevert"
+            @clear="onDataSourceClear"
           />
         </component>
 
@@ -58,18 +58,15 @@
           v-bind="tabPaneComponent?.props({ name: 'code-block', label: `代码块 (${codeBlockGroups.length})` }) || {}"
         >
           <BucketTab
-            title="代码块"
-            prefix="cb"
+            :config="codeBlockConfig"
             :buckets="codeBlockGroupsByTarget"
             :expanded="expanded"
-            :describe-group="describeCodeBlockGroup"
-            :describe-step="describeCodeBlockStep"
-            :is-step-diffable="isCodeBlockStepDiffable"
             @toggle="toggleGroup"
             @goto="onCodeBlockGoto"
             @goto-initial="onCodeBlockGotoInitial"
             @diff-step="onCodeBlockDiff"
             @revert-step="onCodeBlockRevert"
+            @clear="onCodeBlockClear"
           />
         </component>
 
@@ -95,12 +92,8 @@
     </template>
   </TMagicPopover>
 
-  <HistoryDiffDialog
-    ref="diffDialog"
-    :extend-state="extendFormState"
-    :on-confirm="onConfirmRevert"
-    @close="onDiffDialogClose"
-  />
+  <HistoryDiffDialog ref="diffDialog" :extend-state="extendFormState" />
+  <HistoryDiffDialog ref="confirmDialog" :is-confirm="true" :extend-state="extendFormState" />
 </template>
 
 <script lang="ts" setup>
@@ -125,15 +118,29 @@
  * （通过 title / prefix / describe* / isStepDiffable 注入差异）。
  * 共享的描述生成与折叠状态在 composables.ts 中维护。
  */
-import { computed, inject, markRaw, ref, shallowRef, useTemplateRef, watch } from 'vue';
+import { computed, inject, markRaw, ref, useTemplateRef, watch } from 'vue';
 import { Clock, Close } from '@element-plus/icons-vue';
 
-import { getDesignConfig, TMagicButton, TMagicPopover, TMagicTabs, TMagicTooltip } from '@tmagic/design';
+import {
+  getDesignConfig,
+  TMagicButton,
+  tMagicMessage,
+  tMagicMessageBox,
+  TMagicPopover,
+  TMagicTabs,
+  TMagicTooltip,
+} from '@tmagic/design';
 import type { FormState } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { CodeBlockStepValue, DataSourceStepValue, DiffDialogPayload, HistoryListExtraTab } from '@editor/type';
+import type {
+  CodeBlockStepValue,
+  DataSourceStepValue,
+  DiffDialogPayload,
+  HistoryBucketConfig,
+  HistoryListExtraTab,
+} from '@editor/type';
 
 import BucketTab from './BucketTab.vue';
 import {
@@ -141,6 +148,8 @@ import {
   describeCodeBlockStep,
   describeDataSourceGroup,
   describeDataSourceStep,
+  isCodeBlockStepRevertable,
+  isDataSourceStepRevertable,
   useHistoryList,
 } from './composables';
 import HistoryDiffDialog from './HistoryDiffDialog.vue';
@@ -154,7 +163,10 @@ const ClockIcon = markRaw(Clock);
 const CloseIcon = markRaw(Close);
 const activeTab = ref<string>('page');
 
-/** 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。 */
+/**
+ * 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。
+ * 点击面板以外区域的自动收起由 TMagicPopover 通过 v-model:visible 回写完成。
+ */
 const visible = ref(false);
 
 const tabPaneComponent = getDesignConfig('components')?.tabPane;
@@ -168,7 +180,8 @@ const extraTabs = inject<HistoryListExtraTab[]>('historyListExtraTabs', []);
 /** label 支持字符串或函数，函数形式便于展示动态数量等内容。 */
 const resolveTabLabel = (tab: HistoryListExtraTab) => (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` 禁用，
@@ -204,11 +217,41 @@ const {
   codeBlockGroupsByTarget,
 } = useHistoryList();
 
+/**
+ * 当前活动页的「加载/初始」标记记录（设置 root 时生成），透传给 PageTab 的底部初始行展示。
+ * 基于 historyService 的 reactive state 派生，活动页切换或标记写入后自动刷新。
+ */
+const pageMarker = computed(() => historyService.getPageMarker());
+
 /** 数据源 step 仅 update（前后 schema 都存在）时可查看差异。 */
-const isDataSourceStepDiffable = (step: DataSourceStepValue) => Boolean(step.oldSchema && step.newSchema);
+const isDataSourceStepDiffable = (step: DataSourceStepValue) =>
+  Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
 
 /** 代码块 step 仅 update（前后 content 都存在）时可查看差异。 */
-const isCodeBlockStepDiffable = (step: CodeBlockStepValue) => Boolean(step.oldContent && step.newContent);
+const isCodeBlockStepDiffable = (step: CodeBlockStepValue) =>
+  Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
+
+/**
+ * 数据源 / 代码块两类 bucket 历史的整体渲染配置：把 title / prefix 与各自的描述、
+ * 可差异、可回滚判定收敛为单一对象整体注入 BucketTab，组件内部按需读取。
+ */
+const dataSourceConfig: HistoryBucketConfig<DataSourceStepValue> = {
+  title: '数据源',
+  prefix: 'ds',
+  describeGroup: describeDataSourceGroup,
+  describeStep: describeDataSourceStep,
+  isStepDiffable: isDataSourceStepDiffable,
+  isStepRevertable: isDataSourceStepRevertable,
+};
+
+const codeBlockConfig: HistoryBucketConfig<CodeBlockStepValue> = {
+  title: '代码块',
+  prefix: 'cb',
+  describeGroup: describeCodeBlockGroup,
+  describeStep: describeCodeBlockStep,
+  isStepDiffable: isCodeBlockStepDiffable,
+  isStepRevertable: isCodeBlockStepRevertable,
+};
 
 /** 把"目标 step 索引"翻译成"目标 cursor"（已应用步骤数量）。 */
 const indexToCursor = (index: number) => index + 1;
@@ -217,6 +260,29 @@ const onPageGoto = (index: number) => {
   editorService.gotoPageStep(indexToCursor(index));
 };
 
+/**
+ * 点击页面历史记录行：选中该记录对应的画布节点。
+ * - 从目标 step 的 diff 中取节点 id（优先 newSchema，回退 oldSchema），按出现顺序找到第一个当前仍存在的节点；
+ * - 与图层树点击选中一致：editorService.select + 画布 / overlay 画布 select 三者联动；
+ * - 该 step 涉及的节点都已不存在（如删除记录、被撤销的新增）时给出提示，不做选中。
+ */
+const onPageSelect = async (index: number) => {
+  const step = historyService.getPageStepList()[index]?.step;
+  if (!step) return;
+  const targetId = (step.diff ?? [])
+    .map((item) => item.newSchema?.id ?? item.oldSchema?.id)
+    .find((id) => id !== undefined && id !== null && editorService.getNodeById(id, false));
+  if (targetId === undefined || 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: string | number, index: number) => {
   dataSourceService.goto(id, indexToCursor(index));
 };
@@ -242,83 +308,90 @@ const onCodeBlockGotoInitial = (id: string | number) => {
 };
 
 const diffDialogRef = useTemplateRef<InstanceType<typeof HistoryDiffDialog>>('diffDialog');
+const confirmDialogRef = useTemplateRef<InstanceType<typeof HistoryDiffDialog>>('confirmDialog');
 
 /**
- * 构造页面 step 的差异弹窗入参：仅 update 单节点修改可对比，传入旧/新节点。
- * 节点类型 `type` 优先取 newNode.type，再回退 oldNode.type。
- * `currentValue` 取自 editorService 中该节点当前实际值，用于支持「与当前对比」。
- * 无可对比内容（如多节点 / add / remove）时返回 null。
+ * 三类历史（页面 / 数据源 / 代码块）差异弹窗入参的构造差异，收敛为一份配置：
+ * 仅「分组来源、当前值读取、类型 / 展示名提取」不同，定位 step、校验前后值、组装 payload 的流程共用。
  */
-const buildPageDiffPayload = (index: number): DiffDialogPayload | null => {
-  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 as string) || (item.oldNode.type as string) || '';
-    const nodeId = item.newNode.id ?? item.oldNode.id;
-    const currentNode = nodeId !== undefined ? editorService.getNodeById(nodeId) : null;
-    return {
-      category: 'node',
-      type,
-      lastValue: item.oldNode as Record<string, any>,
-      value: item.newNode as Record<string, any>,
-      currentValue: (currentNode as Record<string, any>) || null,
-      targetLabel: (item.newNode.name as string) || (item.oldNode.name as string) || type,
-      id: nodeId,
-    };
-  }
-  return null;
-};
+interface DiffPayloadSource {
+  /** 表单类别：节点 / 数据源 / 代码块。 */
+  category: DiffDialogPayload['category'];
+  /** 该类别按时间正序的历史分组列表（含已撤销）。 */
+  groups: () => { id?: string | number; steps: { index: number; step: { diff?: any[] } }[] }[];
+  /** 读取目标当前实际值，用于「与当前对比」；不存在时返回空即禁用对比。 */
+  getCurrent: (_id: string | number) => Record<string, any> | null | undefined;
+  /** 由新/旧快照提取展示名（含各自的兜底，如节点回退 type、数据源 / 代码块回退 id）。 */
+  resolveLabel: (_newSchema: Record<string, any>, _oldSchema: Record<string, any>, _id: string | number) => string;
+  /** 由新/旧快照提取类型；代码块无 type 字段则不传。 */
+  resolveType?: (_newSchema: Record<string, any>, _oldSchema: Record<string, any>) => string;
+}
 
 /**
- * 在指定分组列表中按 id / index 查找命中的 step，命中后交由 build 构造差异弹窗入参。
- * 用于统一数据源、代码块两类历史的查找逻辑。
+ * 构造差异弹窗入参：仅 update（前后值都存在）可对比。
+ * - 页面（无 id）：在全部分组中按 index 定位 step，目标 id 取自快照；
+ * - 数据源 / 代码块（带 id）：先匹配分组 id 再按 index 定位。
+ * 无可对比内容（多节点 / add / remove）或定位不到时返回 null。
  */
-const findGroupStep = <G extends { id: string | number; steps: { index: number; step: any }[] }>(
-  groups: G[],
-  id: string | number,
-  index: number,
-  build: (_step: G['steps'][number]['step']) => DiffDialogPayload | null,
-): DiffDialogPayload | null => {
-  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);
+const buildDiffPayload = (source: DiffPayloadSource, index: number, id?: string | number): DiffDialogPayload | null => {
+  for (const group of source.groups()) {
+    if (id !== undefined && group.id !== id) continue;
+    const step = group.steps.find((s) => s.index === index)?.step;
+    if (!step) continue;
+    const oldSchema = step.diff?.[0]?.oldSchema as Record<string, any> | undefined;
+    const newSchema = step.diff?.[0]?.newSchema as Record<string, any> | undefined;
+    if (!oldSchema || !newSchema) return null;
+    const targetId = id ?? newSchema.id ?? oldSchema.id;
+    const type = source.resolveType?.(newSchema, oldSchema);
+    return {
+      category: source.category,
+      ...(type !== undefined ? { type } : {}),
+      lastValue: oldSchema,
+      value: newSchema,
+      currentValue: (targetId !== undefined ? source.getCurrent(targetId) : null) || null,
+      targetLabel: source.resolveLabel(newSchema, oldSchema, targetId),
+      id: targetId,
+    };
   }
   return null;
 };
 
+const buildPageDiffPayload = (index: number): DiffDialogPayload | null =>
+  buildDiffPayload(
+    {
+      category: 'node',
+      groups: () => historyService.getPageHistoryGroups(),
+      getCurrent: (id) => editorService.getNodeById(id) as Record<string, any> | null,
+      resolveType: (n, o) => n.type || o.type || '',
+      resolveLabel: (n, o) => n.name || o.name || n.type || o.type || '',
+    },
+    index,
+  );
+
 const buildDataSourceDiffPayload = (id: string | number, index: number): DiffDialogPayload | null =>
-  findGroupStep(historyService.getDataSourceHistoryGroups(), id, index, ({ oldSchema, newSchema }) => {
-    if (!oldSchema || !newSchema) return null;
-    const currentSchema = dataSourceService.getDataSourceById(`${id}`);
-    return {
+  buildDiffPayload(
+    {
       category: 'data-source',
-      type: newSchema.type || oldSchema.type || 'base',
-      lastValue: oldSchema as Record<string, any>,
-      value: newSchema as Record<string, any>,
-      currentValue: (currentSchema as Record<string, any>) || null,
-      targetLabel: newSchema.title || oldSchema.title || `${id}`,
-      id,
-    };
-  });
+      groups: () => historyService.getDataSourceHistoryGroups(),
+      getCurrent: (id) => dataSourceService.getDataSourceById(`${id}`) as Record<string, any> | null,
+      resolveType: (n, o) => n.type || o.type || 'base',
+      resolveLabel: (n, o, id) => n.title || o.title || `${id}`,
+    },
+    index,
+    id,
+  );
 
 const buildCodeBlockDiffPayload = (id: string | number, index: number): DiffDialogPayload | null =>
-  findGroupStep(historyService.getCodeBlockHistoryGroups(), id, index, ({ oldContent, newContent }) => {
-    if (!oldContent || !newContent) return null;
-    const currentContent = codeBlockService.getCodeContentById(id);
-    return {
+  buildDiffPayload(
+    {
       category: 'code-block',
-      lastValue: oldContent as Record<string, any>,
-      value: newContent as Record<string, any>,
-      currentValue: (currentContent as Record<string, any>) || null,
-      targetLabel: newContent.name || oldContent.name || `${id}`,
-      id,
-    };
-  });
+      groups: () => historyService.getCodeBlockHistoryGroups(),
+      getCurrent: (id) => codeBlockService.getCodeContentById(id) as Record<string, any> | null,
+      resolveLabel: (n, o, id) => n.name || o.name || `${id}`,
+    },
+    index,
+    id,
+  );
 
 const onPageDiff = (index: number) => {
   const payload = buildPageDiffPayload(index);
@@ -335,46 +408,160 @@ const onCodeBlockDiff = (id: string | number, index: number) => {
   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: DiffDialogPayload | null): Promise<boolean> => {
+  if (payload && confirmDialogRef.value) {
+    return confirmDialogRef.value.confirm(payload);
+  }
+  return confirmRevert();
+};
+
+/**
+ * 回滚前置校验：若该历史步骤回滚所依赖的目标数据已被删除，则无法回滚。
+ * - update（把旧值写回）：被修改的目标必须仍存在；
+ * - 页面 remove（还原被删节点）：被删节点的原父容器必须仍存在，否则无处插回；
+ * add（回滚即删除）即使目标已不在，也已达成「删除」目的，不视为失败。
+ *
+ * 命中时弹出「回滚失败」提示并返回 true，调用方据此中止本次回滚。
  */
+const isPageRevertTargetMissing = (index: number): boolean => {
+  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 !== undefined && !editorService.getNodeById(id, false);
+    });
+  }
+  if (step.opType === 'remove') {
+    return (step.diff ?? []).some(
+      (item) => item.parentId !== undefined && !editorService.getNodeById(item.parentId, false),
+    );
+  }
+  return false;
+};
+
+/** 数据源 update 步骤回滚时，对应数据源必须仍存在（已删除则无处写回旧值）。 */
+const isDataSourceRevertTargetMissing = (id: string | number, index: number): boolean => {
+  const step = historyService.getDataSourceStepList(id)[index]?.step;
+  return Boolean(step && step.opType === 'update' && !dataSourceService.getDataSourceById(`${id}`));
+};
+
+/** 代码块 update 步骤回滚时，对应代码块必须仍存在（已删除则无处写回旧值）。 */
+const isCodeBlockRevertTargetMissing = (id: string | number, index: number): boolean => {
+  const step = historyService.getCodeBlockStepList(id)[index]?.step;
+  return Boolean(step && step.opType === 'update' && !codeBlockService.getCodeContentById(id));
+};
+
+/** 目标数据已被删除、无法回滚时的统一提示。 */
+const showRevertTargetMissing = () => {
+  tMagicMessage.error('回滚失败：该记录对应的数据已被删除');
+};
+
 const onPageRevert = (index: number) => {
-  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: string | number, index: number) => {
-  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: string | number, index: number) => {
-  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,
+  );
 };
 
-const onDiffDialogClose = () => {
-  onConfirmRevert.value = undefined;
+/**
+ * 「回滚」二次确认：新增 / 删除 / 多节点更新等无法做差异对比的步骤，
+ * 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
+ * 用户取消时返回 false，调用方据此中止回滚。
+ */
+const confirmRevert = (): Promise<boolean> =>
+  confirmDialog(
+    '确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。',
+  );
+
+/**
+ * 通用二次确认弹窗：清空历史 / 无法差异对比的回滚等会改变状态的操作，先弹出确认框，
+ * 用户点击「确定」返回 true，取消（confirm reject）时返回 false 并静默忽略。
+ */
+const confirmDialog = async (message: string): Promise<boolean> => {
+  try {
+    await tMagicMessageBox.confirm(message, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+    return true;
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
+ * 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。
+ * 不支持 IndexedDB 或写入失败时静默忽略（内存清空已生效）。
+ */
+const syncIndexedDB = async () => {
+  try {
+    await historyService.saveToIndexedDB();
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    // ignore: 内存清空已生效，本地同步失败不阻塞交互
+  }
+};
+
+const onPageClear = async () => {
+  if (
+    await confirmDialog('确定清空当前页面的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。')
+  ) {
+    historyService.clearPage();
+    await syncIndexedDB();
+  }
+};
+
+const onDataSourceClear = async () => {
+  if (
+    await confirmDialog('确定清空数据源的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。')
+  ) {
+    historyService.clearDataSource();
+    await syncIndexedDB();
+  }
+};
+
+const onCodeBlockClear = async () => {
+  if (
+    await confirmDialog('确定清空代码块的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。')
+  ) {
+    historyService.clearCodeBlock();
+    await syncIndexedDB();
+  }
 };
 </script>

package/src/layouts/history-list/InitialRow.vue

@@ -2,18 +2,15 @@
   <li
     class="m-editor-history-list-item m-editor-history-list-initial"
     :class="{ 'is-current': isCurrent, 'is-clickable': !isCurrent }"
-    :title="isCurrent ? '当前已回到未修改的初始状态' : '点击回到未修改的初始状态'"
+    :title="rowTitle"
   >
     <span class="m-editor-history-list-item-index" title="历史步骤编号 #0（未修改的初始状态）">#0</span>
     <span class="m-editor-history-list-item-op op-initial">初始</span>
-    <span class="m-editor-history-list-item-desc">未修改的初始状态</span>
-    <span
-      v-if="gotoEnabled && !isCurrent"
-      class="m-editor-history-list-item-goto"
-      title="回到该记录"
-      @click.stop="onClick"
-      >回到</span
-    >
+    <span class="m-editor-history-list-item-desc">{{ desc }}</span>
+    <span v-if="gotoEnabled && !isCurrent" class="m-editor-history-list-item-actions">
+      <span class="m-editor-history-list-item-goto" title="回到该记录" @click.stop="onClick">回到</span>
+    </span>
+    <span v-if="time" class="m-editor-history-list-item-time" :title="timeTitle">{{ time }}</span>
   </li>
 </template>
 
@@ -22,9 +19,17 @@
  * 「初始状态」记录行：渲染于历史列表底部，作为整个栈的"零点"。
  * - 点击该行会把对应栈撤销到 cursor === 0（即没有任何已应用步骤），等同于回到所有修改之前。
  * - 当对应栈本身已处于 cursor === 0 时（isCurrent=true），用户已在初始状态，点击不再触发动作。
+ * - 当上层传入 `marker`（设置 root 时为该页生成的「未修改的初始状态」标记）时，
+ *   用标记的文案与时间渲染本行；标记不进入撤销/重做栈，仅作为该页基线展示。
  *
  * 该行不是真实 step，仅作为 UI 入口；上层负责把"点击"翻译为 `service.goto*(0)`。
  */
+import { computed } from 'vue';
+
+import type { StepValue } from '@editor/type';
+
+import { formatHistoryFullTime, formatHistoryTime } from './composables';
+
 defineOptions({
   name: 'MEditorHistoryListInitialRow',
 });
@@ -34,12 +39,23 @@ const props = withDefaults(
     /** 当前对应栈是否已经处于初始状态 (cursor === 0)。true 时用蓝条高亮并禁用点击。 */
     isCurrent: boolean;
     gotoEnabled?: boolean;
+    /** 该页面的「加载/初始」基线记录（设置 root 时生成的 `opType: 'initial'` StepValue）；提供时用其文案与时间展示。 */
+    marker?: StepValue;
   }>(),
   {
     gotoEnabled: true,
+    marker: undefined,
   },
 );
 
+const desc = computed(() => props.marker?.historyDescription || '未修改的初始状态');
+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 = defineEmits<{
   /** 点击非当前的初始项时触发，由上层调用对应 service 的 goto 把 cursor 移到 0。 */
   (_e: 'goto-initial'): void;