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

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

@@ -12,15 +12,18 @@
       <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 v-if="isCurrent" class="m-editor-history-list-item-current">当前</span>
+
       <span
-        v-if="!merged && headDiffable"
-        class="m-editor-history-list-item-diff"
-        title="查看修改差异"
-        @click.stop="onDiffClick(subSteps[0].index)"
-        >查看差异</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="!merged && headRevertable"
         class="m-editor-history-list-item-revert"
@@ -28,6 +31,20 @@
         @click.stop="onRevertClick(subSteps[0].index)"
         >回滚</span
       >
+      <span
+        v-if="!merged && gotoEnabled && !isCurrent && subSteps.length"
+        class="m-editor-history-list-item-goto"
+        title="回到该记录"
+        @click.stop="onGotoClick(subSteps[0].index)"
+        >回到</span
+      >
+      <span
+        v-if="!merged && headDiffable"
+        class="m-editor-history-list-item-diff"
+        title="查看修改差异"
+        @click.stop="onDiffClick(subSteps[0].index)"
+        >查看差异</span
+      >
       <span v-if="merged" class="m-editor-history-list-group-toggle" :class="{ 'is-expanded': expanded }">▾</span>
     </div>
 
@@ -35,20 +52,18 @@
       <li
         v-for="s in subStepsDisplay"
         :key="s.index"
-        :class="{ 'is-undone': !s.applied, 'is-current': s.isCurrent, 'is-clickable': !s.isCurrent }"
-        :title="s.isCurrent ? '当前所在记录' : '点击跳转到该记录'"
-        @click="onSubStepClick(s)"
+        :class="{ 'is-undone': !s.applied, 'is-current': s.isCurrent }"
+        :title="subStepTitle(s)"
       >
         <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.isCurrent" class="m-editor-history-list-item-current">当前</span>
         <span
-          v-if="s.diffable"
-          class="m-editor-history-list-item-diff"
-          title="查看修改差异"
-          @click.stop="onDiffClick(s.index)"
-          >查看差异</span
+          v-if="sourceLabel(s.source)"
+          class="m-editor-history-list-item-source"
+          :title="`操作途径：${sourceLabel(s.source)}`"
+          >{{ 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"
@@ -56,6 +71,20 @@
           @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>
@@ -64,42 +93,66 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import type { HistoryOpType } from '@editor/type';
+import type { HistoryOpSource, HistoryOpType } from '@editor/type';
 
-import { opLabel } from './composables';
+import { opLabel, sourceLabel } from './composables';
 
 defineOptions({
   name: 'MEditorHistoryListGroupRow',
 });
 
-const props = defineProps<{
-  /** 唯一标识当前组的 key，作为 toggle 事件的 payload 回传给上层。形如 `pg-${idx}` / `ds-${id}-${idx}` / `cb-${id}-${idx}`。 */
-  groupKey: string;
-  /** 该组当前是否处于已应用状态（false 表示已被 undo 撤销，UI 会显示为灰态）。 */
-  applied: boolean;
-  /** 是否为合并组（即组内 step 数大于 1，由多次连续操作合并而来）。决定是否展示合并标记与可展开的子步列表。 */
-  merged: boolean;
-  /** 操作类型：`add` / `remove` / `update`，用于决定操作徽标的颜色和文案。 */
-  opType: HistoryOpType;
-  /** 组的整体描述文案，由上层根据 step / group 计算后传入，例如 "修改 button · style.color"。 */
-  desc: string;
-  /** 组内的 step 总数，仅在 merged 为 true 时显示为 "合并 N 步"。 */
-  stepCount: number;
-  /** 子步列表，用于在展开状态下逐条展示每个 step 的索引、应用状态与描述文案。 */
-  subSteps: {
-    index: number;
+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 时生效，控制子步列表是否渲染。 */
+    expanded: boolean;
+    /** 是否为当前所在的分组（包含栈中最近一次已应用步骤的那一组），UI 高亮展示。 */
     isCurrent?: boolean;
-    diffable?: boolean;
-    /** 是否可对该子步执行「回滚」（已应用 + 业务侧确认支持反向）。父级根据 step 与 applied 决定。 */
-    revertable?: boolean;
-  }[];
-  /** 当前组是否处于展开状态。仅在 merged 为 true 时生效，控制子步列表是否渲染。 */
-  expanded: boolean;
-  /** 是否为当前所在的分组（包含栈中最近一次已应用步骤的那一组），UI 高亮展示。 */
-  isCurrent?: boolean;
-}>();
+    /**
+     * 是否支持「跳转到该记录」(goto)。默认 true。
+     * 为 false 时：单步组头部与子步条目都不再可点击跳转、也不会触发 goto 事件，
+     * 仅保留合并组头部的展开 / 收起能力，以及查看差异、回滚等其它入口。
+     */
+    gotoEnabled?: boolean;
+  }>(),
+  {
+    isCurrent: false,
+    gotoEnabled: true,
+  },
+);
 
 const emit = defineEmits<{
   /**
@@ -129,36 +182,35 @@ const emit = defineEmits<{
   (_e: 'revert-step', _index: number): void;
 }>();
 
-/** 单步组：头部可点击 goto；合并组：头部可点击切换展开。当前组（isCurrent）的单步组头部不可点击。 */
-const isHeadClickable = computed(() => {
-  if (props.merged) return true;
-  return !props.isCurrent;
-});
+/**
+ * 仅合并组头部可点击（切换展开 / 收起）；
+ * 单步组的跳转改由头部的「回退」按钮触发，整行不再可点击。
+ */
+const isHeadClickable = computed(() => props.merged);
 
 const headTitle = computed(() => {
   if (props.merged) return props.expanded ? '点击收起子步' : '点击展开子步';
   if (props.isCurrent) return '当前所在记录';
-  return '点击跳转到该记录';
+  return '';
 });
 
 /**
- * 头部点击行为分流：
- * - 合并组：仅切换展开 / 收起，不触发 goto；
- * - 单步组：跳转到该唯一步骤；当前组忽略点击。
+ * 头部点击行为：仅合并组切换展开 / 收起；单步组不再响应整行点击。
  */
 const onHeadClick = () => {
   if (props.merged) {
     emit('toggle', props.groupKey);
-    return;
   }
-  if (props.isCurrent) return;
-  if (!props.subSteps.length) return;
-  emit('goto', props.subSteps[0].index);
 };
 
-const onSubStepClick = (s: { index: number; isCurrent?: boolean }) => {
-  if (s.isCurrent) return;
-  emit('goto', s.index);
+const onGotoClick = (index: number) => {
+  if (!props.gotoEnabled) return;
+  emit('goto', index);
+};
+
+const subStepTitle = (s: { isCurrent?: boolean }) => {
+  if (s.isCurrent) return '当前所在记录';
+  return '';
 };
 
 /** 单步组头部是否展示"查看差异"入口：要求该唯一子步本身可对比。 */

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

@@ -3,13 +3,16 @@
     <TMagicDialog
       v-model="visible"
       class="m-editor-history-diff-dialog"
-      title="查看修改差异"
-      width="900px"
+      :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">
@@ -42,6 +45,8 @@
           :value="rightValue"
           :last-value="leftValue"
           :extend-state="extendState"
+          :load-config="loadConfig"
+          :self-diff-field-types="selfDiffFieldTypes"
           height="70vh"
         />
 
@@ -58,7 +63,11 @@
       </div>
 
       <template #footer>
-        <TMagicButton size="small" @click="visible = false">关闭</TMagicButton>
+        <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>
       </template>
     </TMagicDialog>
   </Teleport>
@@ -71,41 +80,37 @@ import { isEqual } from 'lodash-es';
 import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from '@tmagic/design';
 import type { FormState } from '@tmagic/form';
 
-import CompareForm, { type CompareCategory } from '@editor/components/CompareForm.vue';
+import CompareForm from '@editor/components/CompareForm.vue';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
+import type { CompareCategory, CompareFormLoadConfig, DiffDialogPayload } from '@editor/type';
 
 defineOptions({
   name: 'MEditorHistoryDiffDialog',
 });
 
-defineProps<{
-  /**
-   * 来自 Editor 顶层的 `extendFormState`，用于扩展 MForm.formState。
-   * 透传给 CompareForm，从而让差异对比时表单 item 中依赖业务上下文的
-   * `display` / `disabled` 等 filterFunction 正常工作。
-   */
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
-}>();
-
-/** 差异对话框的入参 */
-export interface DiffDialogPayload {
-  /** 表单类别 */
-  category: CompareCategory;
-  /** 节点类型 / 数据源类型 */
-  type?: string;
-  /** 代码块场景下的数据源类型 */
-  dataSourceType?: string;
-  /** 该 step 修改前的值（oldNode / oldSchema / oldContent） */
-  lastValue: Record<string, any>;
-  /** 该 step 修改后的值（newNode / newSchema / newContent） */
-  value: Record<string, any>;
-  /** 当前编辑器中实际的最新值；不传或为 null 时禁用「与当前对比」 */
-  currentValue?: Record<string, any> | null;
-  /** 用于标题展示的目标名称 */
-  targetLabel?: string;
-  /** 用于标题展示的目标 id */
-  id?: string | number;
-}
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 来自 Editor 顶层的 `extendFormState`，用于扩展 MForm.formState。
+     * 透传给 CompareForm，从而让差异对比时表单 item 中依赖业务上下文的
+     * `display` / `disabled` 等 filterFunction 正常工作。
+     */
+    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 自定义 FormConfig 加载逻辑，透传给 CompareForm。传入后将接管内置的按 `category`
+     * 取配置逻辑，可通过 `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
+     */
+    loadConfig?: CompareFormLoadConfig;
+    width?: string;
+    onConfirm?: () => void;
+    selfDiffFieldTypes?: string[];
+  }>(),
+  {
+    width: '900px',
+  },
+);
+
+const emit = defineEmits(['close']);
 
 /**
  * 差异对比模式：
@@ -146,6 +151,8 @@ const codeDiffOptions = {
   },
 };
 
+const dialogTitle = computed(() => (props.onConfirm ? '确认回滚' : '查看修改差异'));
+
 const hasCurrent = computed(() => payload.value?.currentValue !== undefined && payload.value?.currentValue !== null);
 
 /** 左侧（旧/参照）值 */
@@ -171,6 +178,14 @@ const isSameAsCurrent = computed(() => {
   return isEqual(payload.value.value, payload.value.currentValue);
 });
 
+const onConfirmClick = () => {
+  const cb = props.onConfirm;
+
+  cb?.();
+
+  visible.value = false;
+};
+
 const targetText = computed(() => {
   if (!payload.value) return '';
   const categoryText: Record<CompareCategory, string> = {
@@ -178,7 +193,8 @@ const targetText = computed(() => {
     'data-source': '数据源',
     'code-block': '代码块',
   };
-  const prefix = categoryText[payload.value.category] || '';
+  const { category } = payload.value;
+  const prefix = category ? categoryText[category] : '';
   const label = payload.value.targetLabel || payload.value.type || '';
   const { id } = payload.value;
   const labelWithId = id !== undefined && id !== '' ? `${label}（${id}）` : label;
@@ -205,6 +221,10 @@ watch(visible, (v) => {
   }
 });
 
+const onClose = () => {
+  emit('close');
+};
+
 defineExpose({
   open,
   close,