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

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

@@ -32,12 +32,19 @@
         </component>
 
         <component
+          v-if="!disabledDataSource"
           :is="tabPaneComponent?.component || 'el-tab-pane'"
           v-bind="tabPaneComponent?.props({ name: 'data-source', label: `数据源 (${dataSourceGroups.length})` }) || {}"
         >
-          <DataSourceTab
+          <BucketTab
+            title="数据源"
+            prefix="ds"
             :buckets="dataSourceGroupsByTarget"
             :expanded="expanded"
+            :describe-group="describeDataSourceGroup"
+            :describe-step="describeDataSourceStep"
+            :is-step-diffable="isDataSourceStepDiffable"
+            :is-step-revertable="isDataSourceStepRevertable"
             @toggle="toggleGroup"
             @goto="onDataSourceGoto"
             @goto-initial="onDataSourceGotoInitial"
@@ -47,12 +54,19 @@
         </component>
 
         <component
+          v-if="!disabledCodeBlock"
           :is="tabPaneComponent?.component || 'el-tab-pane'"
           v-bind="tabPaneComponent?.props({ name: 'code-block', label: `代码块 (${codeBlockGroups.length})` }) || {}"
         >
-          <CodeBlockTab
+          <BucketTab
+            title="代码块"
+            prefix="cb"
             :buckets="codeBlockGroupsByTarget"
             :expanded="expanded"
+            :describe-group="describeCodeBlockGroup"
+            :describe-step="describeCodeBlockStep"
+            :is-step-diffable="isCodeBlockStepDiffable"
+            :is-step-revertable="isCodeBlockStepRevertable"
             @toggle="toggleGroup"
             @goto="onCodeBlockGoto"
             @goto-initial="onCodeBlockGotoInitial"
@@ -60,6 +74,15 @@
             @revert-step="onCodeBlockRevert"
           />
         </component>
+
+        <component
+          v-for="tab in extraTabs"
+          :key="tab.name"
+          :is="tabPaneComponent?.component || 'el-tab-pane'"
+          v-bind="tabPaneComponent?.props({ name: tab.name, label: resolveTabLabel(tab) }) || {}"
+        >
+          <component :is="tab.component" v-bind="tab.props || {}" v-on="tab.listeners || {}" />
+        </component>
       </TMagicTabs>
     </div>
 
@@ -74,7 +97,12 @@
     </template>
   </TMagicPopover>
 
-  <HistoryDiffDialog ref="diffDialog" :extend-state="extendFormState" />
+  <HistoryDiffDialog
+    ref="diffDialog"
+    :extend-state="extendFormState"
+    :on-confirm="onConfirmRevert"
+    @close="onDiffDialogClose"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -95,10 +123,11 @@
  * 此外每条 step 上提供"查看差异"入口（仅在前后值都存在的 update 步骤显示），
  * 点击后弹出 HistoryDiffDialog，使用 CompareForm 组件以表单形式展示新旧值差异。
  *
- * 各 tab 的内容拆分为独立的 SFC（PageTab / DataSourceTab / CodeBlockTab），
+ * 各 tab 的内容拆分为独立的 SFC：页面用 PageTab，数据源 / 代码块复用通用的 BucketTab
+ * （通过 title / prefix / describe* / isStepDiffable 注入差异）。
  * 共享的描述生成与折叠状态在 composables.ts 中维护。
  */
-import { inject, markRaw, ref, useTemplateRef } from 'vue';
+import { computed, inject, markRaw, ref, shallowRef, useTemplateRef, watch } from 'vue';
 import { Clock, Close } from '@element-plus/icons-vue';
 
 import { getDesignConfig, TMagicButton, TMagicPopover, TMagicTabs, TMagicTooltip } from '@tmagic/design';
@@ -106,10 +135,18 @@ 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 CodeBlockTab from './CodeBlockTab.vue';
-import { useHistoryList } from './composables';
-import DataSourceTab from './DataSourceTab.vue';
+import BucketTab from './BucketTab.vue';
+import {
+  describeCodeBlockGroup,
+  describeCodeBlockStep,
+  describeDataSourceGroup,
+  describeDataSourceStep,
+  isCodeBlockStepRevertable,
+  isDataSourceStepRevertable,
+  useHistoryList,
+} from './composables';
 import HistoryDiffDialog from './HistoryDiffDialog.vue';
 import PageTab from './PageTab.vue';
 
@@ -119,14 +156,36 @@ defineOptions({
 
 const ClockIcon = markRaw(Clock);
 const CloseIcon = markRaw(Close);
-const activeTab = ref<'page' | 'data-source' | 'code-block'>('page');
+const activeTab = ref<string>('page');
 
 /** 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。 */
 const visible = ref(false);
 
 const tabPaneComponent = getDesignConfig('components')?.tabPane;
 
-const { editorService, dataSourceService, codeBlockService, historyService } = useServices();
+/**
+ * 业务方自定义的扩展 tab，由 Editor 顶层通过 `historyListExtraTabs` 注入。
+ * 追加在内置「页面 / 数据源 / 代码块」三个 tab 之后，未提供时为空数组。
+ */
+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();
+
+/**
+ * 数据源 / 代码块功能可被业务方通过 `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
@@ -149,6 +208,12 @@ const {
   codeBlockGroupsByTarget,
 } = useHistoryList();
 
+/** 数据源 step 仅 update（前后 schema 都存在）时可查看差异。 */
+const isDataSourceStepDiffable = (step: DataSourceStepValue) => Boolean(step.oldSchema && step.newSchema);
+
+/** 代码块 step 仅 update（前后 content 都存在）时可查看差异。 */
+const isCodeBlockStepDiffable = (step: CodeBlockStepValue) => Boolean(step.oldContent && step.newContent);
+
 /** 把"目标 step 索引"翻译成"目标 cursor"（已应用步骤数量）。 */
 const indexToCursor = (index: number) => index + 1;
 
@@ -180,40 +245,25 @@ const onCodeBlockGotoInitial = (id: string | number) => {
   codeBlockService.goto(id, 0);
 };
 
-/**
- * 「回滚」入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
- * 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
- */
-const onPageRevert = (index: number) => {
-  editorService.revertPageStep(index);
-};
-
-const onDataSourceRevert = (id: string | number, index: number) => {
-  dataSourceService.revert(id, index);
-};
-
-const onCodeBlockRevert = (id: string | number, index: number) => {
-  codeBlockService.revert(id, index);
-};
-
 const diffDialogRef = useTemplateRef<InstanceType<typeof HistoryDiffDialog>>('diffDialog');
 
 /**
- * 页面 step 差异：仅 update 单节点修改可对比，传入旧/新节点。
+ * 构造页面 step 的差异弹窗入参：仅 update 单节点修改可对比，传入旧/新节点。
  * 节点类型 `type` 优先取 newNode.type，再回退 oldNode.type。
  * `currentValue` 取自 editorService 中该节点当前实际值，用于支持「与当前对比」。
+ * 无可对比内容（如多节点 / add / remove）时返回 null。
  */
-const onPageDiff = (index: number) => {
+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;
+    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;
-    diffDialogRef.value?.open({
+    return {
       category: 'node',
       type,
       lastValue: item.oldNode as Record<string, any>,
@@ -221,21 +271,35 @@ const onPageDiff = (index: number) => {
       currentValue: (currentNode as Record<string, any>) || null,
       targetLabel: (item.newNode.name as string) || (item.oldNode.name as string) || type,
       id: nodeId,
-    });
-    return;
+    };
   }
+  return null;
 };
 
-const onDataSourceDiff = (id: string | number, index: number) => {
-  const groups = historyService.getDataSourceHistoryGroups();
+/**
+ * 在指定分组列表中按 id / index 查找命中的 step，命中后交由 build 构造差异弹窗入参。
+ * 用于统一数据源、代码块两类历史的查找逻辑。
+ */
+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;
-    const { oldSchema, newSchema } = entry.step;
-    if (!oldSchema || !newSchema) return;
+    return build(entry.step);
+  }
+  return null;
+};
+
+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}`);
-    diffDialogRef.value?.open({
+    return {
       category: 'data-source',
       type: newSchema.type || oldSchema.type || 'base',
       lastValue: oldSchema as Record<string, any>,
@@ -243,29 +307,78 @@ const onDataSourceDiff = (id: string | number, index: number) => {
       currentValue: (currentSchema as Record<string, any>) || null,
       targetLabel: newSchema.title || oldSchema.title || `${id}`,
       id,
-    });
-    return;
-  }
-};
+    };
+  });
 
-const onCodeBlockDiff = (id: string | number, index: number) => {
-  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 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);
-    diffDialogRef.value?.open({
+    return {
       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,
-    });
-    return;
+    };
+  });
+
+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);
+};
+
+const onConfirmRevert = shallowRef();
+
+/**
+ * 「回滚」入口：把目标历史步骤的修改作为一次新操作反向应用（类 git revert），
+ * 不破坏原有栈结构。各 service 内部完成反向 + 入栈，并自带描述用于面板展示。
+ *
+ * 交互：先弹出该步骤的差异弹窗供用户确认，点击「确定回滚」后再真正执行回滚；
+ * 对没有可对比内容的步骤（如 add / remove / 多节点更新）则直接回滚。
+ */
+const onPageRevert = (index: number) => {
+  const payload = buildPageDiffPayload(index);
+  onConfirmRevert.value = () => editorService.revertPageStep(index);
+  if (payload) {
+    diffDialogRef.value?.open({ ...payload });
+  } else {
+    onConfirmRevert.value();
   }
 };
+
+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();
+  }
+};
+
+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();
+  }
+};
+
+const onDiffDialogClose = () => {
+  onConfirmRevert.value = undefined;
+};
 </script>

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

@@ -3,12 +3,17 @@
     class="m-editor-history-list-item m-editor-history-list-initial"
     :class="{ 'is-current': isCurrent, 'is-clickable': !isCurrent }"
     :title="isCurrent ? '当前已回到未修改的初始状态' : '点击回到未修改的初始状态'"
-    @click="onClick"
   >
     <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="isCurrent" class="m-editor-history-list-item-current">当前</span>
+    <span
+      v-if="gotoEnabled && !isCurrent"
+      class="m-editor-history-list-item-goto"
+      title="回到该记录"
+      @click.stop="onClick"
+      >回到</span
+    >
   </li>
 </template>
 
@@ -24,10 +29,16 @@ defineOptions({
   name: 'MEditorHistoryListInitialRow',
 });
 
-const props = defineProps<{
-  /** 当前对应栈是否已经处于初始状态 (cursor === 0)。true 时用蓝条高亮并禁用点击。 */
-  isCurrent: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /** 当前对应栈是否已经处于初始状态 (cursor === 0)。true 时用蓝条高亮并禁用点击。 */
+    isCurrent: boolean;
+    gotoEnabled?: boolean;
+  }>(),
+  {
+    gotoEnabled: true,
+  },
+);
 
 const emit = defineEmits<{
   /** 点击非当前的初始项时触发，由上层调用对应 service 的 goto 把 cursor 移到 0。 */

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

@@ -3,13 +3,16 @@
   <TMagicScrollbar v-else max-height="360px">
     <ul class="m-editor-history-list-ul">
       <GroupRow
-        v-for="(group, gIdx) in list"
-        :key="`pg-${gIdx}`"
-        :group-key="`pg-${gIdx}`"
+        v-for="group in list"
+        :key="`pg-${group.steps[0]?.index}`"
+        :group-key="`pg-${group.steps[0]?.index}`"
         :applied="group.applied"
         :merged="group.steps.length > 1"
         :op-type="group.opType"
         :desc="describePageGroup(group)"
+        :source="groupSource(group)"
+        :time="formatHistoryTime(groupTimestamp(group))"
+        :time-title="formatHistoryFullTime(groupTimestamp(group))"
         :step-count="group.steps.length"
         :sub-steps="
           group.steps.map((s) => ({
@@ -18,11 +21,14 @@
             isCurrent: s.isCurrent,
             desc: describePageStep(s.step),
             diffable: isPageStepDiffable(s.step),
-            revertable: s.applied,
+            revertable: s.applied && isPageStepRevertable(s.step),
+            source: s.step.source,
+            time: formatHistoryTime(s.step.timestamp),
+            timeTitle: formatHistoryFullTime(s.step.timestamp),
           }))
         "
         :is-current="group.isCurrent"
-        :expanded="!!expanded[`pg-${gIdx}`]"
+        :expanded="!!expanded[`pg-${group.steps[0]?.index}`]"
         @toggle="(key: string) => $emit('toggle', key)"
         @goto="(index: number) => $emit('goto', index)"
         @diff-step="(index: number) => $emit('diff-step', index)"
@@ -44,7 +50,15 @@ import { TMagicScrollbar } from '@tmagic/design';
 
 import type { PageHistoryGroup, StepValue } from '@editor/type';
 
-import { describePageGroup, describePageStep } from './composables';
+import {
+  describePageGroup,
+  describePageStep,
+  formatHistoryFullTime,
+  formatHistoryTime,
+  groupSource,
+  groupTimestamp,
+  isPageStepRevertable,
+} from './composables';
 import GroupRow from './GroupRow.vue';
 import InitialRow from './InitialRow.vue';
 
@@ -55,7 +69,11 @@ defineOptions({
 const props = defineProps<{
   /** 当前活动页面的历史分组列表，已按时间倒序排好（最新一组在最前）。空数组时显示空态。 */
   list: PageHistoryGroup[];
-  /** 共享的折叠状态表（key -> 是否展开），由顶层 panel 统一维护。本 tab 使用 `pg-${idx}` 作为 key。 */
+  /**
+   * 共享的折叠状态表（key -> 是否展开），由顶层 panel 统一维护。
+   * 本 tab 使用 `pg-${组内首步 index}` 作为 key——以稳定的 step 索引而非展示位置标识分组，
+   * 这样历史数据更新（新增 / 撤销重做导致列表顺序变化）后，已展开的分组状态仍能正确保持。
+   */
   expanded: Record<string, boolean>;
 }>();
 

package/src/layouts/history-list/composables.ts

@@ -1,11 +1,14 @@
 import { computed, reactive } from 'vue';
 
+import { datetimeFormatter } from '@tmagic/form';
+
 import { useServices } from '@editor/hooks/use-services';
 import type {
   CodeBlockHistoryGroup,
   CodeBlockStepValue,
   DataSourceHistoryGroup,
   DataSourceStepValue,
+  HistoryOpSource,
   HistoryOpType,
   PageHistoryGroup,
   StepValue,
@@ -22,7 +25,10 @@ import type {
 export const useHistoryList = () => {
   const { historyService } = useServices();
 
-  /** 折叠状态：key 形如 `pg-${groupIdx}` / `ds-${id}-${groupIdx}` / `cb-${id}-${groupIdx}`。 */
+  /**
+   * 折叠状态：key 形如 `pg-${组内首步 index}` / `ds-${id}-${组内首步 index}` / `cb-${id}-${组内首步 index}`。
+   * 用组内首步的稳定 index（而非展示位置）作为 key，确保历史数据更新后已展开的分组状态保持不变。
+   */
   const expanded = reactive<Record<string, boolean>>({});
   const toggleGroup = (key: string) => {
     expanded[key] = !expanded[key];
@@ -64,6 +70,32 @@ export const useHistoryList = () => {
   };
 };
 
+/**
+ * 历史面板的时间展示：
+ * - 当天的记录只显示 `HH:mm:ss`；
+ * - 跨天的记录显示 `MM-DD HH:mm:ss`。
+ * 无时间戳（旧数据 / 未写入）时返回空串，UI 据此不渲染时间。
+ */
+export const formatHistoryTime = (timestamp?: number): string => {
+  if (!timestamp) return '';
+  const isToday =
+    datetimeFormatter(new Date(timestamp), '', 'YYYY-MM-DD') ===
+    (datetimeFormatter(new Date(), '', 'YYYY-MM-DD') as string);
+  return `${
+    isToday
+      ? datetimeFormatter(new Date(timestamp), '', 'HH:mm:ss')
+      : datetimeFormatter(new Date(timestamp), '', 'MM-DD HH:mm:ss')
+  }`;
+};
+
+/** 完整时间（含年份与秒），用于 title 悬浮提示。无时间戳时返回空串。 */
+export const formatHistoryFullTime = (timestamp?: number): string =>
+  timestamp ? `${datetimeFormatter(new Date(timestamp), '', 'YYYY-MM-DD HH:mm:ss')}` : '';
+
+/** 取一组历史步骤里最后一步（最近一次）的时间戳，用于组头部展示。 */
+export const groupTimestamp = (group: { steps: { step: { timestamp?: number } }[] }): number | undefined =>
+  group.steps[group.steps.length - 1]?.step.timestamp;
+
 export const opLabel = (op: HistoryOpType) => {
   switch (op) {
     case 'add':
@@ -76,6 +108,32 @@ export const opLabel = (op: HistoryOpType) => {
   }
 };
 
+/** 内置操作途径的中文文案；自定义来源直接回显原值，未知 / 缺省返回空串（UI 据此不渲染）。 */
+const HISTORY_SOURCE_LABELS: Record<string, string> = {
+  stage: '画布',
+  tree: '树面板',
+  'component-panel': '组件面板',
+  props: '配置面板',
+  code: '源码',
+  'stage-contextmenu': '画布菜单',
+  'tree-contextmenu': '树菜单',
+  toolbar: '工具栏',
+  shortcut: '快捷键',
+  rollback: '回滚',
+  api: '接口',
+  ai: 'AI',
+  unknown: '未知',
+};
+
+/** 操作途径文案：用于历史面板展示「画布 / 树面板 / 配置面板…」标签。 */
+export const sourceLabel = (source: HistoryOpSource = 'unknown'): string => {
+  return HISTORY_SOURCE_LABELS[source] ?? `${source}`;
+};
+
+/** 取一组历史步骤里最后一步（最近一次）的操作途径，用于组头部展示。 */
+export const groupSource = (group: { steps: { step: { source?: HistoryOpSource } }[] }): HistoryOpSource | undefined =>
+  group.steps[group.steps.length - 1]?.step.source;
+
 const nameOf = (node: { name?: string; id?: string | number; type?: string }) =>
   node?.name || node?.type || `${node?.id ?? ''}`;
 
@@ -193,3 +251,36 @@ export const describeCodeBlockGroup = (group: CodeBlockHistoryGroup) => {
   const target = labelWithId(rawName, group.id);
   return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
 };
+
+/**
+ * 页面 step 是否支持「回滚」（类 git revert）：
+ * - 新增 / 删除：不依赖 changeRecords，反向应用即删除 / 加回，始终可回滚；
+ * - 更新：必须每个被更新节点都带有 changeRecords，才支持按 propPath 局部反向 patch。
+ *   缺失 changeRecords 的更新只能整节点替换，会冲掉该节点后续的无关变更，因此不支持回滚。
+ */
+export const isPageStepRevertable = (step: StepValue): boolean => {
+  if (step.opType !== 'update') return true;
+  const items = step.updatedItems ?? [];
+  if (!items.length) return false;
+  return items.every((item) => Boolean(item.changeRecords?.length));
+};
+
+/**
+ * 数据源 step 是否支持「回滚」：
+ * - 新增（oldSchema=null）/ 删除（newSchema=null）：不依赖 changeRecords，始终可回滚；
+ * - 更新（前后 schema 都存在）：必须有 changeRecords 才支持局部反向 patch，否则不支持回滚。
+ */
+export const isDataSourceStepRevertable = (step: DataSourceStepValue): boolean => {
+  if (step.oldSchema === null || step.newSchema === null) return true;
+  return Boolean(step.changeRecords?.length);
+};
+
+/**
+ * 代码块 step 是否支持「回滚」：
+ * - 新增（oldContent=null）/ 删除（newContent=null）：不依赖 changeRecords，始终可回滚；
+ * - 更新（前后 content 都存在）：必须有 changeRecords 才支持局部反向 patch，否则不支持回滚。
+ */
+export const isCodeBlockStepRevertable = (step: CodeBlockStepValue): boolean => {
+  if (step.oldContent === null || step.newContent === null) return true;
+  return Boolean(step.changeRecords?.length);
+};

package/src/layouts/props-panel/PropsPanel.vue

@@ -151,7 +151,11 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
       });
     }
 
-    editorService.update(newValue, { changeRecords: eventData?.changeRecords });
+    // 区分操作途径：表单字段编辑（MForm @change）会带上 eventData（含 changeRecords）；
+    // 源码编辑器（CodeEditor @save → saveCode）保存时不带 eventData，据此标记为「源码编辑器」。
+    const historySource = eventData ? 'props' : 'code';
+
+    editorService.update(newValue, { changeRecords: eventData?.changeRecords, historySource });
   } catch (e: any) {
     emit('submit-error', e);
   }

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -94,11 +94,15 @@ let clientX: number;
 let clientY: number;
 
 const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
-  editorService.add({
-    name: text,
-    type,
-    ...data,
-  });
+  editorService.add(
+    {
+      name: text,
+      type,
+      ...data,
+    },
+    undefined,
+    { historySource: 'component-panel' },
+  );
 };
 
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -24,7 +24,7 @@
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.key}`)"></Icon>
       </TMagicTooltip>
       <TMagicTooltip v-if="data.type === 'code' && editable" effect="dark" content="删除" placement="bottom">
-        <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.key}`)"></Icon>
+        <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.key}`, { historySource: 'tree' })"></Icon>
       </TMagicTooltip>
       <slot name="code-block-panel-tool" :id="data.key" :data="data"></slot>
     </template>
@@ -44,7 +44,7 @@ import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
 import { useNodeStatus } from '@editor/hooks/use-node-status';
 import { useServices } from '@editor/hooks/use-services';
-import { type CodeBlockListSlots, CodeDeleteErrorType, type TreeNodeData } from '@editor/type';
+import { type CodeBlockListSlots, CodeDeleteErrorType, HistoryOpSource, type TreeNodeData } from '@editor/type';
 
 defineSlots<CodeBlockListSlots>();
 
@@ -60,7 +60,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   edit: [id: string];
-  remove: [id: string];
+  remove: [id: string, { historySource?: HistoryOpSource }];
   'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
 }>();
 
@@ -142,7 +142,7 @@ const editCode = (id: string) => {
   emit('edit', id);
 };
 
-const deleteCode = async (id: string) => {
+const deleteCode = async (id: string, { historySource }: { historySource?: HistoryOpSource } = {}) => {
   const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
   const existBinds = Boolean(currentCode?.items?.length);
   const undeleteableList = codeBlockService.getUndeletableList() || [];
@@ -154,7 +154,7 @@ const deleteCode = async (id: string) => {
     });
 
     // 无绑定关系，且不在不可删除列表中
-    emit('remove', id);
+    emit('remove', id, { historySource });
   } else {
     if (typeof props.customError === 'function') {
       props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -122,7 +122,7 @@ const {
   menuData: contentMenuData,
   contentMenuHideHandler,
 } = useContentMenu((id: string) => {
-  codeBlockListRef.value?.deleteCode(id);
+  codeBlockListRef.value?.deleteCode(id, { historySource: 'tree-contextmenu' });
 });
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => props.customContentMenu(contentMenuData, 'code-block'));
 </script>

package/src/layouts/sidebar/code-block/useContentMenu.ts

@@ -41,7 +41,7 @@ export const useContentMenu = (deleteCode: (id: string) => void) => {
 
         const newCodeId = await codeBlockService.getUniqueId();
 
-        codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock));
+        codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock), { historySource: 'tree-contextmenu' });
       },
     },
     {