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

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

@@ -1,7 +1,7 @@
 <template>
   <li
     class="m-editor-history-list-item m-editor-history-list-group"
-    :class="{ 'is-undone': !applied, 'is-merged': merged, 'is-current': isCurrent }"
+    :class="{ 'is-undone': !group.applied, 'is-merged': merged, 'is-current': group.isCurrent }"
   >
     <div
       class="m-editor-history-list-group-head"
@@ -10,41 +10,53 @@
       @click="onHeadClick"
     >
       <span class="m-editor-history-list-item-index" :title="headIndexTitle">{{ headIndexLabel }}</span>
-      <span class="m-editor-history-list-item-op" :class="`op-${opType}`">{{ opLabel(opType) }}</span>
-      <span class="m-editor-history-list-item-desc">{{ desc }}</span>
+      <span class="m-editor-history-list-item-op" :class="`op-${group.opType}`">{{ opLabel(group.opType) }}</span>
+      <span class="m-editor-history-list-item-desc">{{ group.desc }}</span>
 
-      <span
-        v-if="!merged && sourceLabel(source)"
-        class="m-editor-history-list-item-source"
-        :title="`操作途径：${sourceLabel(source)}`"
-        >{{ sourceLabel(source) }}</span
-      >
-
-      <span v-if="!merged && time" class="m-editor-history-list-item-time" :title="timeTitle || time">{{ time }}</span>
-
-      <span v-if="merged" class="m-editor-history-list-item-merge">合并 {{ stepCount }} 步</span>
+      <span v-if="headSaved" class="m-editor-history-list-item-saved" title="该记录为最近一次保存的状态">已保存</span>
 
       <span
-        v-if="!merged && headRevertable"
-        class="m-editor-history-list-item-revert"
-        title="将该步骤的修改作为一次新操作反向应用（不影响后续历史）"
-        @click.stop="onRevertClick(subSteps[0].index)"
-        >回滚</span
+        v-if="!merged && (headRevertable || headDiffable || canHeadGoto)"
+        class="m-editor-history-list-item-actions"
       >
+        <span
+          v-if="headRevertable"
+          class="m-editor-history-list-item-revert"
+          title="将该步骤的修改作为一次新操作反向应用（不影响后续历史）"
+          @click.stop="onRevertClick(group.subSteps[0].index)"
+          >回滚</span
+        >
+        <span
+          v-if="canHeadGoto"
+          class="m-editor-history-list-item-goto"
+          title="回到该记录"
+          @click.stop="onGotoClick(group.subSteps[0].index)"
+          >回到</span
+        >
+        <span
+          v-if="headDiffable"
+          class="m-editor-history-list-item-diff"
+          title="查看修改差异"
+          @click.stop="onDiffClick(group.subSteps[0].index)"
+          >查看差异</span
+        >
+      </span>
+
       <span
-        v-if="!merged && gotoEnabled && !isCurrent && subSteps.length"
-        class="m-editor-history-list-item-goto"
-        title="回到该记录"
-        @click.stop="onGotoClick(subSteps[0].index)"
-        >回到</span
+        v-if="!merged && sourceLabel(group.source)"
+        class="m-editor-history-list-item-source"
+        :title="`操作途径：${sourceLabel(group.source)}`"
+        >{{ sourceLabel(group.source) }}</span
       >
+
       <span
-        v-if="!merged && headDiffable"
-        class="m-editor-history-list-item-diff"
-        title="查看修改差异"
-        @click.stop="onDiffClick(subSteps[0].index)"
-        >查看差异</span
+        v-if="!merged && group.time"
+        class="m-editor-history-list-item-time"
+        :title="group.timeTitle || group.time"
+        >{{ group.time }}</span
       >
+
+      <span v-if="merged" class="m-editor-history-list-item-merge">合并 {{ stepCount }} 步</span>
       <span v-if="merged" class="m-editor-history-list-group-toggle" :class="{ 'is-expanded': expanded }">▾</span>
     </div>
 
@@ -52,11 +64,39 @@
       <li
         v-for="s in subStepsDisplay"
         :key="s.index"
-        :class="{ 'is-undone': !s.applied, 'is-current': s.isCurrent }"
+        :class="{ 'is-undone': !s.applied, 'is-current': s.isCurrent, 'is-clickable': selectEnabled }"
         :title="subStepTitle(s)"
+        @click="onSubStepClick(s.index)"
       >
         <span class="m-editor-history-list-item-index">#{{ s.index + 1 }}</span>
         <span class="m-editor-history-list-substep-desc">{{ s.desc }}</span>
+        <span v-if="s.saved" class="m-editor-history-list-item-saved" title="该记录为最近一次保存的状态">已保存</span>
+        <span
+          v-if="s.revertable || s.diffable || (gotoEnabled && !s.isCurrent)"
+          class="m-editor-history-list-item-actions"
+        >
+          <span
+            v-if="s.revertable"
+            class="m-editor-history-list-item-revert"
+            title="将该步骤的修改作为一次新操作反向应用（不影响后续历史）"
+            @click.stop="onRevertClick(s.index)"
+            >回滚</span
+          >
+          <span
+            v-if="gotoEnabled && !s.isCurrent"
+            class="m-editor-history-list-item-goto"
+            title="回到该记录"
+            @click.stop="onGotoClick(s.index)"
+            >回到</span
+          >
+          <span
+            v-if="s.diffable"
+            class="m-editor-history-list-item-diff"
+            title="查看修改差异"
+            @click.stop="onDiffClick(s.index)"
+            >查看差异</span
+          >
+        </span>
         <span
           v-if="sourceLabel(s.source)"
           class="m-editor-history-list-item-source"
@@ -64,27 +104,6 @@
           >{{ sourceLabel(s.source) }}</span
         >
         <span v-if="s.time" class="m-editor-history-list-item-time" :title="s.timeTitle || s.time">{{ s.time }}</span>
-        <span
-          v-if="s.revertable"
-          class="m-editor-history-list-item-revert"
-          title="将该步骤的修改作为一次新操作反向应用（不影响后续历史）"
-          @click.stop="onRevertClick(s.index)"
-          >回滚</span
-        >
-        <span
-          v-if="gotoEnabled && !s.isCurrent"
-          class="m-editor-history-list-item-goto"
-          title="回到该记录"
-          @click.stop="onGotoClick(s.index)"
-          >回到</span
-        >
-        <span
-          v-if="s.diffable"
-          class="m-editor-history-list-item-diff"
-          title="查看修改差异"
-          @click.stop="onDiffClick(s.index)"
-          >查看差异</span
-        >
       </li>
     </ul>
   </li>
@@ -93,8 +112,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import type { HistoryOpSource, HistoryOpType } from '@editor/type';
-
+import type { HistoryRowGroup, HistoryRowStep } from './composables';
 import { opLabel, sourceLabel } from './composables';
 
 defineOptions({
@@ -103,67 +121,42 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    /** 唯一标识当前组的 key，作为 toggle 事件的 payload 回传给上层。形如 `pg-${首步 index}` / `ds-${id}-${首步 index}` / `cb-${id}-${首步 index}`，以稳定的 step 索引标识分组。 */
-    groupKey: string;
-    /** 该组当前是否处于已应用状态（false 表示已被 undo 撤销，UI 会显示为灰态）。 */
-    applied: boolean;
-    /** 是否为合并组（即组内 step 数大于 1，由多次连续操作合并而来）。决定是否展示合并标记与可展开的子步列表。 */
-    merged: boolean;
-    /** 操作类型：`add` / `remove` / `update`，用于决定操作徽标的颜色和文案。 */
-    opType: HistoryOpType;
-    /** 组的整体描述文案，由上层根据 step / group 计算后传入，例如 "修改 button · style.color"。 */
-    desc: string;
-    /** 组的操作途径（一般取组内最近一步），用于头部展示「画布 / 树面板 / 配置面板…」标签。 */
-    source?: HistoryOpSource;
-    /** 组头部展示的时间文案（一般为组内最近一步的时间），为空时不渲染。 */
-    time?: string;
-    /** 组头部时间的 title 悬浮提示（完整时间），缺省时回退为 time。 */
-    timeTitle?: string;
-    /** 组内的 step 总数，仅在 merged 为 true 时显示为 "合并 N 步"。 */
-    stepCount: number;
-    /** 子步列表，用于在展开状态下逐条展示每个 step 的索引、应用状态与描述文案。 */
-    subSteps: {
-      index: number;
-      applied: boolean;
-      desc: string;
-      isCurrent?: boolean;
-      diffable?: boolean;
-      /** 是否可对该子步执行「回滚」（已应用 + 业务侧确认支持反向）。父级根据 step 与 applied 决定。 */
-      revertable?: boolean;
-      /** 该子步的操作途径，用于展示「画布 / 树面板 / 配置面板…」标签。 */
-      source?: HistoryOpSource;
-      /** 该子步的时间文案，为空时不渲染。 */
-      time?: string;
-      /** 该子步时间的 title 悬浮提示（完整时间），缺省时回退为 time。 */
-      timeTitle?: string;
-    }[];
-    /** 当前组是否处于展开状态。仅在 merged 为 true 时生效，控制子步列表是否渲染。 */
+    /**
+     * 该组的视图模型（由 `toRowGroup` 统一派生）：包含 key、应用状态、操作类型、描述、
+     * 来源 / 时间等头部信息以及子步列表。原先散落的十余个扁平 props 收敛于此单一对象。
+     */
+    group: HistoryRowGroup;
+    /** 当前组是否处于展开状态（合并组默认展开）。仅在合并组（子步数 > 1）时生效，控制子步列表是否渲染。 */
     expanded: boolean;
-    /** 是否为当前所在的分组（包含栈中最近一次已应用步骤的那一组），UI 高亮展示。 */
-    isCurrent?: boolean;
     /**
      * 是否支持「跳转到该记录」(goto)。默认 true。
      * 为 false 时：单步组头部与子步条目都不再可点击跳转、也不会触发 goto 事件，
      * 仅保留合并组头部的展开 / 收起能力，以及查看差异、回滚等其它入口。
      */
     gotoEnabled?: boolean;
+    /**
+     * 是否支持「点击记录选中对应节点」。默认 false（仅页面 tab 启用，数据源 / 代码块无节点概念）。
+     * 为 true 时：点击单步组头部、子步条目或合并组头部都会发出 `select` 事件（携带对应 step 索引），
+     * 由上层解析出节点 id 并在画布选中；合并组头部同时保留展开 / 收起能力。
+     */
+    selectEnabled?: boolean;
   }>(),
   {
-    isCurrent: false,
     gotoEnabled: true,
+    selectEnabled: false,
   },
 );
 
 const emit = defineEmits<{
   /**
-   * 用户点击合并组头部时触发，携带 groupKey；上层用其切换 expanded 状态。
+   * 用户点击合并组头部时触发，携带 group.key；上层用其切换 expanded 状态。
    * 对单步组（非合并）头部点击不会发该事件——因为单步组没有"展开"的概念。
    */
   (_e: 'toggle', _key: string): void;
   /**
    * 用户希望跳转到该记录时触发，携带"目标 step 在所属栈中的索引"——上层据此计算目标 cursor (= index + 1)。
    * 触发场景：
-   * - 单步组（merged=false）头部：取该唯一 step 的 index；
+   * - 单步组（非合并）头部：取该唯一 step 的 index；
    * - 子步条目：取该子步的 index。
    * 合并组头部不再触发 goto，避免与展开/收起冲突；用户应展开后点具体子步精准跳转。
    * 当前所在的步骤（isCurrent）始终不会触发 goto。
@@ -171,7 +164,7 @@ const emit = defineEmits<{
   (_e: 'goto', _index: number): void;
   /**
    * 用户希望查看该 step 的修改差异（旧值 vs 新值）。
-   * 只在 step 满足"前后值都存在"（如 update / 数据源、代码块的 update）时由父级标记 `diffable=true`。
+   * 只在 step 满足"前后值都存在"（如 update / 数据源、代码块的 update）时由 `toRowGroup` 标记 `diffable=true`。
    * payload 为该 step 在所属栈中的索引，由上层根据 index 取 step 内容并展示对比。
    */
   (_e: 'diff-step', _index: number): void;
@@ -180,26 +173,48 @@ const emit = defineEmits<{
    * payload 为该 step 在所属栈中的索引。仅在单步组头部（headRevertable）或合并组的可回滚子步上触发。
    */
   (_e: 'revert-step', _index: number): void;
+  /**
+   * 用户希望「选中该记录对应的节点」。payload 为该 step 在所属栈中的索引，
+   * 由上层据 index 取出 step、解析出节点 id 并在画布选中。仅在 `selectEnabled` 为 true 时触发。
+   */
+  (_e: 'select', _index: number): void;
 }>();
 
+/** 子步数大于 1 即为合并组：决定是否展示合并标记与可展开的子步列表。 */
+const merged = computed(() => props.group.subSteps.length > 1);
+
+/** 组内 step 总数，仅在合并组时显示为 "合并 N 步"。 */
+const stepCount = computed(() => props.group.subSteps.length);
+
 /**
- * 仅合并组头部可点击（切换展开 / 收起）；
- * 单步组的跳转改由头部的「回退」按钮触发，整行不再可点击。
+ * 头部可点击的场景：
+ * - 合并组：点击切换展开 / 收起；
+ * - 开启 `selectEnabled`（页面 tab）：点击选中对应节点。
+ * 单步组的跳转仍由头部的「回到」按钮触发。
  */
-const isHeadClickable = computed(() => props.merged);
+const isHeadClickable = computed(() => merged.value || props.selectEnabled);
 
 const headTitle = computed(() => {
-  if (props.merged) return props.expanded ? '点击收起子步' : '点击展开子步';
-  if (props.isCurrent) return '当前所在记录';
+  if (merged.value) {
+    const expandHint = props.expanded ? '点击收起子步' : '点击展开子步';
+    return props.selectEnabled ? `${expandHint}（并选中该节点）` : expandHint;
+  }
+  if (props.selectEnabled) return '点击选中该节点';
+  if (props.group.isCurrent) return '当前所在记录';
   return '';
 });
 
 /**
- * 头部点击行为：仅合并组切换展开 / 收起；单步组不再响应整行点击。
+ * 头部点击行为：
+ * - 开启 selectEnabled 时，发出 select（携带组内首步 index，上层据此选中节点）；
+ * - 合并组同时切换展开 / 收起。
  */
 const onHeadClick = () => {
-  if (props.merged) {
-    emit('toggle', props.groupKey);
+  if (props.selectEnabled && props.group.subSteps.length) {
+    emit('select', props.group.subSteps[0].index);
+  }
+  if (merged.value) {
+    emit('toggle', props.group.key);
   }
 };
 
@@ -208,45 +223,65 @@ const onGotoClick = (index: number) => {
   emit('goto', index);
 };
 
+/** 点击子步行：开启 selectEnabled 时选中该子步对应的节点。 */
+const onSubStepClick = (index: number) => {
+  if (!props.selectEnabled) return;
+  emit('select', index);
+};
+
 const subStepTitle = (s: { isCurrent?: boolean }) => {
+  if (props.selectEnabled) return '点击选中该节点';
   if (s.isCurrent) return '当前所在记录';
   return '';
 };
 
+/**
+ * 头部是否展示「已保存」标记：
+ * - 单步组：取该唯一子步的 saved；
+ * - 合并组：组内任一子步为已保存即在头部提示（具体落在哪一步可展开查看）。
+ */
+const headSaved = computed(() =>
+  merged.value ? props.group.subSteps.some((s) => s.saved) : Boolean(props.group.subSteps[0]?.saved),
+);
+
 /** 单步组头部是否展示"查看差异"入口：要求该唯一子步本身可对比。 */
-const headDiffable = computed(() => !props.merged && Boolean(props.subSteps[0]?.diffable));
+const headDiffable = computed(() => !merged.value && Boolean(props.group.subSteps[0]?.diffable));
 
 /** 单步组头部是否展示"回滚"入口：要求该唯一子步本身可回滚（已应用）。 */
-const headRevertable = computed(() => !props.merged && Boolean(props.subSteps[0]?.revertable));
+const headRevertable = computed(() => !merged.value && Boolean(props.group.subSteps[0]?.revertable));
+
+/** 单步组头部是否展示"回到"入口：可跳转、非当前、且存在唯一子步。 */
+const canHeadGoto = computed(
+  () => !merged.value && props.gotoEnabled && !props.group.isCurrent && props.group.subSteps.length > 0,
+);
 
 /**
  * 合并组展开后的子步渲染顺序：与外层分组列表保持一致——倒序展示（最新的子步在最上方）。
  * 外层 page tab / bucket 都已对 groups 做了 reverse，子步沿用同样的视觉规则更直观。
  * 注意：仅用于渲染，原 `subSteps` 保持时间正序，`headIndexLabel` 等基于首尾索引的展示语义不变。
  */
-const subStepsDisplay = computed(() => props.subSteps.slice().reverse());
+const subStepsDisplay = computed<HistoryRowStep[]>(() => props.group.subSteps.slice().reverse());
 
 /**
  * 头部索引展示：
- * - 单步组（merged=false）：显示该唯一 step 的编号，如 `#5`；
+ * - 单步组（非合并）：显示该唯一 step 的编号，如 `#5`；
  * - 合并组：显示组内 step 的编号范围，如 `#3-#7`（首尾相同则退化为 `#5`）。
  *
  * 这里展示的是 step.index + 1（与子步列表 `#{{ s.index + 1 }}` 保持一致），从 1 起编号更符合直觉。
  */
 const headIndexLabel = computed(() => {
-  const list = props.subSteps;
+  const list = props.group.subSteps;
   if (!list.length) return '';
   const first = list[0].index + 1;
   const last = list[list.length - 1].index + 1;
-  if (!props.merged || first === last) return `#${first}`;
+  if (!merged.value || first === last) return `#${first}`;
   return `#${first}-#${last}`;
 });
 
 const headIndexTitle = computed(() => {
-  if (!props.merged) return `历史步骤编号 #${props.subSteps[0]?.index + 1}`;
-  return `合并了第 ${props.subSteps[0]?.index + 1} 至第 ${
-    props.subSteps[props.subSteps.length - 1]?.index + 1
-  } 共 ${props.subSteps.length} 条历史步骤`;
+  const list = props.group.subSteps;
+  if (!merged.value) return `历史步骤编号 #${list[0]?.index + 1}`;
+  return `合并了第 ${list[0]?.index + 1} 至第 ${list[list.length - 1]?.index + 1} 共 ${list.length} 条历史步骤`;
 });
 
 const onDiffClick = (index: number) => {

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

@@ -1,76 +1,74 @@
 <template>
-  <Teleport to="body">
-    <TMagicDialog
-      v-model="visible"
-      class="m-editor-history-diff-dialog"
-      :title="dialogTitle"
-      top="5vh"
-      destroy-on-close
-      append-to-body
-      :width="width"
-      @close="onClose"
-    >
-      <div v-if="payload" class="m-editor-history-diff-dialog-body">
-        <div v-if="onConfirm" class="m-editor-history-diff-dialog-notice">仅回滚有差异的字段</div>
-
-        <div class="m-editor-history-diff-dialog-header">
-          <span class="m-editor-history-diff-dialog-target">{{ targetText }}</span>
-          <div class="m-editor-history-diff-dialog-controls">
-            <TMagicRadioGroup v-model="viewMode" size="small" class="m-editor-history-diff-dialog-view">
-              <TMagicRadioButton value="form">表单对比</TMagicRadioButton>
-              <TMagicRadioButton value="code">源码对比</TMagicRadioButton>
-            </TMagicRadioGroup>
-
-            <TMagicRadioGroup v-model="mode" size="small" class="m-editor-history-diff-dialog-mode">
-              <TMagicRadioButton value="before">与修改前对比</TMagicRadioButton>
-              <TMagicRadioButton value="current" :disabled="!hasCurrent">与当前对比</TMagicRadioButton>
-            </TMagicRadioGroup>
-          </div>
-        </div>
+  <TMagicDialog
+    v-model="visible"
+    class="m-editor-history-diff-dialog"
+    :title="dialogTitle"
+    top="5vh"
+    destroy-on-close
+    append-to-body
+    :width="width"
+    @close="onClose"
+  >
+    <div v-if="payload && visible" class="m-editor-history-diff-dialog-body">
+      <div v-if="onConfirm" class="m-editor-history-diff-dialog-notice">仅回滚有差异的字段</div>
+
+      <div class="m-editor-history-diff-dialog-header">
+        <span class="m-editor-history-diff-dialog-target">{{ targetText }}</span>
+        <div class="m-editor-history-diff-dialog-controls">
+          <TMagicRadioGroup v-model="viewMode" size="small" class="m-editor-history-diff-dialog-view">
+            <TMagicRadioButton value="form">表单对比</TMagicRadioButton>
+            <TMagicRadioButton value="code">源码对比</TMagicRadioButton>
+          </TMagicRadioGroup>
 
-        <div class="m-editor-history-diff-dialog-legend">
-          <TMagicTag size="small" type="danger">{{ leftLabel }}</TMagicTag>
-          <span class="m-editor-history-diff-dialog-arrow">→</span>
-          <TMagicTag size="small" type="success">{{ rightLabel }}</TMagicTag>
-          <span v-if="mode === 'current' && isSameAsCurrent" class="m-editor-history-diff-dialog-tip">
-            当前值与该步修改后一致，无差异
-          </span>
+          <TMagicRadioGroup v-model="mode" size="small" class="m-editor-history-diff-dialog-mode">
+            <TMagicRadioButton value="before">与修改前对比</TMagicRadioButton>
+            <TMagicRadioButton value="current" :disabled="!hasCurrent">与当前对比</TMagicRadioButton>
+          </TMagicRadioGroup>
         </div>
+      </div>
 
-        <CompareForm
-          v-if="viewMode === 'form'"
-          :category="payload.category"
-          :type="payload.type"
-          :data-source-type="payload.dataSourceType"
-          :value="rightValue"
-          :last-value="leftValue"
-          :extend-state="extendState"
-          :load-config="loadConfig"
-          :self-diff-field-types="selfDiffFieldTypes"
-          height="70vh"
-        />
-
-        <CodeEditor
-          v-else
-          type="diff"
-          language="json"
-          :init-values="leftValue"
-          :modified-values="rightValue"
-          :options="codeDiffOptions"
-          disabled-full-screen
-          height="70vh"
-        />
+      <div class="m-editor-history-diff-dialog-legend">
+        <TMagicTag size="small" type="danger">{{ leftLabel }}</TMagicTag>
+        <span class="m-editor-history-diff-dialog-arrow">→</span>
+        <TMagicTag size="small" type="success">{{ rightLabel }}</TMagicTag>
+        <span v-if="mode === 'current' && isSameAsCurrent" class="m-editor-history-diff-dialog-tip">
+          当前值与该步修改后一致，无差异
+        </span>
       </div>
 
-      <template #footer>
-        <template v-if="onConfirm">
-          <TMagicButton size="small" @click="visible = false">取消</TMagicButton>
-          <TMagicButton size="small" type="primary" @click="onConfirmClick">确定回滚</TMagicButton>
-        </template>
-        <TMagicButton v-else size="small" @click="visible = false">关闭</TMagicButton>
+      <CompareForm
+        v-if="viewMode === 'form'"
+        :category="payload.category"
+        :type="payload.type"
+        :data-source-type="payload.dataSourceType"
+        :value="rightValue"
+        :last-value="leftValue"
+        :extend-state="extendState"
+        :load-config="loadConfig"
+        :self-diff-field-types="selfDiffFieldTypes"
+        height="70vh"
+      />
+
+      <CodeEditor
+        v-else
+        type="diff"
+        language="json"
+        :init-values="leftValue"
+        :modified-values="rightValue"
+        :options="codeDiffOptions"
+        disabled-full-screen
+        height="70vh"
+      />
+    </div>
+
+    <template #footer>
+      <template v-if="isConfirm">
+        <TMagicButton size="small" @click="visible = false">取消</TMagicButton>
+        <TMagicButton size="small" type="primary" @click="onConfirmClick">确定回滚</TMagicButton>
       </template>
-    </TMagicDialog>
-  </Teleport>
+      <TMagicButton v-else size="small" @click="visible = false">关闭</TMagicButton>
+    </template>
+  </TMagicDialog>
 </template>
 
 <script lang="ts" setup>
@@ -102,6 +100,7 @@ const props = withDefaults(
      */
     loadConfig?: CompareFormLoadConfig;
     width?: string;
+    isConfirm?: boolean;
     onConfirm?: () => void;
     selfDiffFieldTypes?: string[];
   }>(),
@@ -178,10 +177,15 @@ const isSameAsCurrent = computed(() => {
   return isEqual(payload.value.value, payload.value.currentValue);
 });
 
+/** confirm() 的 resolve，仅在「等待用户确认回滚」期间存在 */
+let confirmResolve: ((_value: boolean) => void) | null = null;
+
 const onConfirmClick = () => {
-  const cb = props.onConfirm;
+  props.onConfirm?.();
 
-  cb?.();
+  // 用户确认回滚：resolve(true)，并清空以避免随后 visible=false 再 resolve(false)
+  confirmResolve?.(true);
+  confirmResolve = null;
 
   visible.value = false;
 };
@@ -210,6 +214,24 @@ const open = (p: DiffDialogPayload) => {
   visible.value = true;
 };
 
+/**
+ * 以 Promise 形式打开确认回滚弹窗：
+ * - 用户点击「确定回滚」时 resolve(true)；
+ * - 取消 / 关闭 / 按 Esc 等其他方式关闭弹窗时 resolve(false)。
+ *
+ * 同一时刻只允许一个待确认流程，重复调用会先 resolve(false) 掉上一个。
+ */
+const confirm = (p: DiffDialogPayload): Promise<boolean> => {
+  // 终止上一个未完成的确认流程，避免悬挂的 Promise
+  confirmResolve?.(false);
+  confirmResolve = null;
+
+  return new Promise<boolean>((resolve) => {
+    confirmResolve = resolve;
+    open(p);
+  });
+};
+
 const close = () => {
   visible.value = false;
 };
@@ -218,6 +240,9 @@ const close = () => {
 watch(visible, (v) => {
   if (!v) {
     payload.value = null;
+    // 非「确定回滚」方式关闭（取消 / Esc / 点遮罩等）时，resolve(false)
+    confirmResolve?.(false);
+    confirmResolve = null;
   }
 });
 
@@ -227,6 +252,7 @@ const onClose = () => {
 
 defineExpose({
   open,
+  confirm,
   close,
 });
 </script>