@tmagic/editor 1.8.0-beta.7 → 1.8.0-beta.9

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

@@ -18,7 +18,9 @@
       <TMagicTabs v-model="activeTab" class="m-editor-history-list-tabs">
         <component
           :is="tabPaneComponent?.component || 'el-tab-pane'"
-          v-bind="tabPaneComponent?.props({ name: 'page', label: `页面 (${pageGroups.length})` }) || {}"
+          v-bind="
+            tabPaneComponent?.props({ name: 'page', label: `${pageName} (${pageGroups.length})`, lazy: true }) || {}
+          "
         >
           <PageTab
             :list="pageGroupsDisplay"
@@ -37,7 +39,13 @@
         <component
           v-if="!disabledDataSource"
           :is="tabPaneComponent?.component || 'el-tab-pane'"
-          v-bind="tabPaneComponent?.props({ name: 'data-source', label: `数据源 (${dataSourceGroups.length})` }) || {}"
+          v-bind="
+            tabPaneComponent?.props({
+              name: 'data-source',
+              label: `${dataSourceName} (${dataSourceGroups.length})`,
+              lazy: true,
+            }) || {}
+          "
         >
           <BucketTab
             :config="dataSourceConfig"
@@ -55,7 +63,13 @@
         <component
           v-if="!disabledCodeBlock"
           :is="tabPaneComponent?.component || 'el-tab-pane'"
-          v-bind="tabPaneComponent?.props({ name: 'code-block', label: `代码块 (${codeBlockGroups.length})` }) || {}"
+          v-bind="
+            tabPaneComponent?.props({
+              name: 'code-block',
+              label: `${codeBlockName} (${codeBlockGroups.length})`,
+              lazy: true,
+            }) || {}
+          "
         >
           <BucketTab
             :config="codeBlockConfig"
@@ -74,7 +88,7 @@
           v-for="tab in extraTabs"
           :key="tab.name"
           :is="tabPaneComponent?.component || 'el-tab-pane'"
-          v-bind="tabPaneComponent?.props({ name: tab.name, label: resolveTabLabel(tab) }) || {}"
+          v-bind="tabPaneComponent?.props({ name: tab.name, label: resolveTabLabel(tab), lazy: true }) || {}"
         >
           <component :is="tab.component" v-bind="tab.props || {}" v-on="tab.listeners || {}" />
         </component>
@@ -91,9 +105,6 @@
       </TMagicTooltip>
     </template>
   </TMagicPopover>
-
-  <HistoryDiffDialog ref="diffDialog" :extend-state="extendFormState" />
-  <HistoryDiffDialog ref="confirmDialog" :is-confirm="true" :extend-state="extendFormState" />
 </template>
 
 <script lang="ts" setup>
@@ -118,18 +129,10 @@
  * （通过 title / prefix / describe* / isStepDiffable 注入差异）。
  * 共享的描述生成与折叠状态在 composables.ts 中维护。
  */
-import { computed, inject, markRaw, ref, useTemplateRef, watch } from 'vue';
+import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Clock, Close } from '@element-plus/icons-vue';
 
-import {
-  getDesignConfig,
-  TMagicButton,
-  tMagicMessage,
-  tMagicMessageBox,
-  TMagicPopover,
-  TMagicTabs,
-  TMagicTooltip,
-} from '@tmagic/design';
+import { getDesignConfig, TMagicButton, tMagicMessage, TMagicPopover, TMagicTabs, TMagicTooltip } from '@tmagic/design';
 import type { FormState } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -138,15 +141,15 @@ import type {
   BaseStepValue,
   CodeBlockStepValue,
   DataSourceStepValue,
-  DiffDialogPayload,
   HistoryBucketConfig,
   HistoryListExtraTab,
 } from '@editor/type';
 
 import BucketTab from './BucketTab.vue';
-import { describeStep, isSingleDiffStepRevertable, useHistoryList } from './composables';
-import HistoryDiffDialog from './HistoryDiffDialog.vue';
+import { confirmHistoryAction, describeStep, isSingleDiffStepRevertable } from './composables';
 import PageTab from './PageTab.vue';
+import { useHistoryList } from './useHistoryList';
+import { useHistoryRevert } from './useHistoryRevert';
 
 defineOptions({
   name: 'MEditorHistoryListPanel',
@@ -173,8 +176,9 @@ const extraTabs = inject<HistoryListExtraTab[]>('historyListExtraTabs', []);
 /** label 支持字符串或函数，函数形式便于展示动态数量等内容。 */
 const resolveTabLabel = (tab: HistoryListExtraTab) => (typeof tab.label === 'function' ? tab.label() : tab.label);
 
+const services = useServices();
 const { editorService, dataSourceService, codeBlockService, historyService, propsService, stageOverlayService } =
-  useServices();
+  services;
 
 /**
  * 数据源 / 代码块功能可被业务方通过 `disabledDataSource` / `disabledCodeBlock` 禁用，
@@ -198,6 +202,7 @@ const extendFormState = inject<((_state: FormState) => Record<string, any> | Pro
   'extendFormState',
   undefined,
 );
+const getPropsPanelFormState = inject<(() => FormState | undefined) | undefined>('getPropsPanelFormState', undefined);
 
 const {
   expanded,
@@ -214,7 +219,15 @@ const {
  * 当前活动页的「加载/初始」标记记录（设置 root 时生成），透传给 PageTab 的底部初始行展示。
  * 基于 historyService 的 reactive state 派生，活动页切换或标记写入后自动刷新。
  */
-const pageMarker = computed(() => historyService.getPageMarker());
+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: BaseStepValue) => Boolean(step.diff?.[0]?.oldSchema && step.diff?.[0]?.newSchema);
@@ -222,23 +235,26 @@ const isStepDiffable = (step: BaseStepValue) => Boolean(step.diff?.[0]?.oldSchem
 /**
  * 数据源 / 代码块两类 bucket 历史的整体渲染配置：把 title / prefix 与各自的描述、
  * 可差异、可回滚判定收敛为单一对象整体注入 BucketTab，组件内部按需读取。
+ * title / 描述回退名取自可配置的展示名称，故用 computed 使其随 stepNames 变更刷新。
  */
 // 数据源/代码块不做相邻合并，每组恒为单步，省略 describeGroup，由 toRowGroup 回退到 describeStep。
-const dataSourceConfig: HistoryBucketConfig<DataSourceStepValue> = {
-  title: '数据源',
+const dataSourceConfig = computed<HistoryBucketConfig<DataSourceStepValue>>(() => ({
+  title: dataSourceName.value,
   prefix: 'ds',
-  describeStep: (step: DataSourceStepValue): string => describeStep(step, (schema) => schema?.title, '数据源'),
+  describeStep: (step: DataSourceStepValue): string =>
+    describeStep(step, (schema) => schema?.title, dataSourceName.value),
   isStepDiffable,
   isStepRevertable: isSingleDiffStepRevertable,
-};
+}));
 
-const codeBlockConfig: HistoryBucketConfig<CodeBlockStepValue> = {
-  title: '代码块',
+const codeBlockConfig = computed<HistoryBucketConfig<CodeBlockStepValue>>(() => ({
+  title: codeBlockName.value,
   prefix: 'cb',
-  describeStep: (step: CodeBlockStepValue): string => describeStep(step, (content) => content?.name, '代码块'),
+  describeStep: (step: CodeBlockStepValue): string =>
+    describeStep(step, (content) => content?.name, codeBlockName.value),
   isStepDiffable,
   isStepRevertable: isSingleDiffStepRevertable,
-};
+}));
 
 /** 把"目标 step 索引"翻译成"目标 cursor"（已应用步骤数量）。 */
 const indexToCursor = (index: number) => index + 1;
@@ -254,7 +270,7 @@ const onPageGoto = (index: number) => {
  * - 该 step 涉及的节点都已不存在（如删除记录、被撤销的新增）时给出提示，不做选中。
  */
 const onPageSelect = async (index: number) => {
-  const step = historyService.getPageStepList()[index]?.step;
+  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)
@@ -294,222 +310,13 @@ const onCodeBlockGotoInitial = (id: string | number) => {
   codeBlockService.goto(id, 0);
 };
 
-const diffDialogRef = useTemplateRef<InstanceType<typeof HistoryDiffDialog>>('diffDialog');
-const confirmDialogRef = useTemplateRef<InstanceType<typeof HistoryDiffDialog>>('confirmDialog');
-
-/**
- * 三类历史（页面 / 数据源 / 代码块）差异弹窗入参的构造差异，收敛为一份配置：
- * 仅「分组来源、当前值读取、类型 / 展示名提取」不同，定位 step、校验前后值、组装 payload 的流程共用。
- */
-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;
-}
-
-/**
- * 构造差异弹窗入参：仅 update（前后值都存在）可对比。
- * - 页面（无 id）：在全部分组中按 index 定位 step，目标 id 取自快照；
- * - 数据源 / 代码块（带 id）：先匹配分组 id 再按 index 定位。
- * 无可对比内容（多节点 / add / remove）或定位不到时返回 null。
- */
-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 =>
-  buildDiffPayload(
-    {
-      category: 'data-source',
-      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 =>
-  buildDiffPayload(
-    {
-      category: 'code-block',
-      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);
-  if (payload) diffDialogRef.value?.open(payload);
-};
-
-const onDataSourceDiff = (id: string | number, index: number) => {
-  const payload = buildDataSourceDiffPayload(id, index);
-  if (payload) diffDialogRef.value?.open(payload);
-};
-
-const onCodeBlockDiff = (id: string | number, index: number) => {
-  const payload = buildCodeBlockDiffPayload(id, index);
-  if (payload) diffDialogRef.value?.open(payload);
-};
-
-/**
- * 「回滚」统一入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
- * 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
- *
- * 交互：
- * - 可差异对比的步骤（单节点 / 单实体 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) => {
-  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) => {
-  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) => {
-  if (isCodeBlockRevertTargetMissing(id, index)) {
-    showRevertTargetMissing();
-    return Promise.resolve(null);
-  }
-  return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) =>
-    result ? codeBlockService.revert(id, index) : null,
-  );
-};
-
-/**
- * 「回滚」二次确认：新增 / 删除 / 多节点更新等无法做差异对比的步骤，
- * 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
- * 用户取消时返回 false，调用方据此中止回滚。
- */
-const confirmRevert = (): Promise<boolean> =>
-  confirmDialog(
-    '确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。',
-  );
-
 /**
- * 通用二次确认弹窗：清空历史 / 无法差异对比的回滚等会改变状态的操作，先弹出确认框，
- * 用户点击「确定」返回 true，取消（confirm reject）时返回 false 并静默忽略。
+ * 「单步回滚」与「查看差异」的完整逻辑收敛到 useHistoryRevert，面板与业务方共用：
+ * 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
+ * 业务方亦可直接 import useHistoryRevert(services) 调用，无需自行挂载任何弹窗。
  */
-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;
-  }
-};
+const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } =
+  useHistoryRevert(services, { extendState: extendFormState, getPropsPanelFormState });
 
 /**
  * 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
@@ -527,27 +334,33 @@ const syncIndexedDB = async () => {
 
 const onPageClear = async () => {
   if (
-    await confirmDialog('确定清空当前页面的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。')
+    await confirmHistoryAction(
+      '确定清空当前页面的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。',
+    )
   ) {
-    historyService.clearPage();
+    historyService.clear('page', editorService.get('page')?.id);
     await syncIndexedDB();
   }
 };
 
 const onDataSourceClear = async () => {
   if (
-    await confirmDialog('确定清空数据源的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。')
+    await confirmHistoryAction(
+      '确定清空数据源的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。',
+    )
   ) {
-    historyService.clearDataSource();
+    historyService.clear('dataSource');
     await syncIndexedDB();
   }
 };
 
 const onCodeBlockClear = async () => {
   if (
-    await confirmDialog('确定清空代码块的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。')
+    await confirmHistoryAction(
+      '确定清空代码块的历史记录吗？清空后将无法撤销/重做之前的操作，本地保存的记录也会一并删除。',
+    )
   ) {
-    historyService.clearCodeBlock();
+    historyService.clear('codeBlock');
     await syncIndexedDB();
   }
 };

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

@@ -34,7 +34,7 @@ import { computed } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
-import type { HistoryRowDescriptor, PageHistoryGroup, StepValue } from '@editor/type';
+import type { HistoryGroup, HistoryRowDescriptor, StepValue } from '@editor/type';
 
 import type { HistoryRowGroup } from './composables';
 import {
@@ -53,7 +53,7 @@ defineOptions({
 
 const props = defineProps<{
   /** 当前活动页面的历史分组列表，已按时间倒序排好（最新一组在最前）。空数组时显示空态。 */
-  list: PageHistoryGroup[];
+  list: HistoryGroup<StepValue>[];
   /**
    * 共享的折叠状态表（key -> 是否展开，缺省或 true 为展开、false 为收起），由顶层 panel 统一维护。
    * 本 tab 使用 `pg-${组内首步 index}` 作为 key——以稳定的 step 索引而非展示位置标识分组，
@@ -105,9 +105,9 @@ const descriptor: HistoryRowDescriptor<StepValue> = {
   isStepRevertable: isPageStepRevertable,
 };
 
-const rowKey = (group: PageHistoryGroup) => `pg-${group.steps[0]?.index}`;
+const rowKey = (group: HistoryGroup<StepValue>) => `pg-${group.steps[0]?.index}`;
 
-const toRow = (group: PageHistoryGroup): HistoryRowGroup => toRowGroup(group, rowKey(group), descriptor);
+const toRow = (group: HistoryGroup<StepValue>): HistoryRowGroup => toRowGroup(group, rowKey(group), descriptor);
 
 /**
  * 是否处于"初始状态"——即对应页面历史栈 cursor===0：