From b02aa75ddc2b37a024a8966ddad96cf8d85317bb Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 29 May 2026 14:19:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=8E=86=E5=8F=B2=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E9=9D=A2=E6=9D=BF=E6=94=AF=E6=8C=81=E5=8D=95=E6=AD=A5?=
 =?UTF-8?q?=E5=9B=9E=E6=BB=9A=EF=BC=88=E7=B1=BB=20git=20revert=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将目标历史步骤的修改作为一次新操作反向应用，不破坏原有栈结构，
page/dataSource/codeBlock 三类 service 均提供 revert 能力；
面板新增关闭按钮、步骤编号展示与合并组卡片样式优化。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../editor/src/components/CodeBlockEditor.vue |   2 +-
 .../editor/src/components/CompareForm.vue     |   1 +
 .../src/layouts/history-list/Bucket.vue       |   4 +
 .../src/layouts/history-list/CodeBlockTab.vue |   3 +
 .../layouts/history-list/DataSourceTab.vue    |   3 +
 .../src/layouts/history-list/GroupRow.vue     |  69 ++++++++-
 .../history-list/HistoryDiffDialog.vue        |   2 +-
 .../layouts/history-list/HistoryListPanel.vue |  43 +++++-
 .../src/layouts/history-list/InitialRow.vue   |   1 +
 .../src/layouts/history-list/PageTab.vue      |   4 +
 packages/editor/src/services/codeBlock.ts     |  79 +++++++++++
 packages/editor/src/services/dataSource.ts    |  77 ++++++++++
 packages/editor/src/services/editor.ts        | 132 ++++++++++++++++++
 packages/editor/src/services/history.ts       |  22 +++
 .../editor/src/theme/history-list-panel.scss  | 113 +++++++++++++--
 .../history-list/HistoryListPanel.spec.ts     |   4 +-
 .../layouts/history-list/composables.spec.ts  |   4 +-
 packages/form/src/containers/Container.vue    |   9 +-
 packages/form/src/containers/Tabs.vue         |   7 +-
 packages/form/src/theme/container.scss        |   5 +-
 20 files changed, 556 insertions(+), 28 deletions(-)

diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index 20a981c5..f8395224 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -34,7 +34,7 @@
   <Teleport to="body">
     <TMagicDialog title="查看修改" v-model="difVisible" fullscreen destroy-on-close>
       <div style="display: flex; margin-bottom: 10px">
-        <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
+        <div style="flex: 1"><TMagicTag size="small" type="danger">修改前</TMagicTag></div>
         <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
       </div>
 
diff --git a/packages/editor/src/components/CompareForm.vue b/packages/editor/src/components/CompareForm.vue
index f141816a..8037ef25 100644
--- a/packages/editor/src/components/CompareForm.vue
+++ b/packages/editor/src/components/CompareForm.vue
@@ -139,6 +139,7 @@ const wrapperStyle = computed(() => {
  */
 const isEmptyCodeSelectValue = (v: any): boolean => {
   if (v === '' || v === undefined || v === null) return true;
+  if (Array.isArray(v) && v.length === 0) return true;
   return typeof v === 'object' && v.hookType === HookType.CODE && Array.isArray(v.hookData) && v.hookData.length === 0;
 };
 
diff --git a/packages/editor/src/layouts/history-list/Bucket.vue b/packages/editor/src/layouts/history-list/Bucket.vue
index 86ee43bf..e874820f 100644
--- a/packages/editor/src/layouts/history-list/Bucket.vue
+++ b/packages/editor/src/layouts/history-list/Bucket.vue
@@ -23,6 +23,7 @@
             isCurrent: s.isCurrent,
             desc: describeStep(s.step),
             diffable: isStepDiffable ? isStepDiffable(s.step) : false,
+            revertable: s.applied,
           }))
         "
         :is-current="group.isCurrent"
@@ -30,6 +31,7 @@
         @toggle="(key: string) => $emit('toggle', key)"
         @goto="(index: number) => $emit('goto', bucketId, index)"
         @diff-step="(index: number) => $emit('diff-step', bucketId, index)"
+        @revert-step="(index: number) => $emit('revert-step', bucketId, index)"
       />
       <!--
         初始状态项：永远位于该 bucket 列表底部（同样按倒序展示，最底部 = 最早状态）。
@@ -88,6 +90,8 @@ defineEmits<{
   (_e: 'goto-initial', _bucketId: string | number): void;
   /** 用户点击"查看差异"，携带 bucketId 与 step 索引。 */
   (_e: 'diff-step', _bucketId: string | number, _index: number): void;
+  /** 用户点击"回滚"按钮，携带 bucketId 与 step 索引，类 git revert。 */
+  (_e: 'revert-step', _bucketId: string | number, _index: number): void;
 }>();
 
 /** 该 bucket 是否处于初始状态（栈 cursor=0），等价于全部 group 都未 applied。 */
diff --git a/packages/editor/src/layouts/history-list/CodeBlockTab.vue b/packages/editor/src/layouts/history-list/CodeBlockTab.vue
index 4e265f34..f6b6a2fe 100644
--- a/packages/editor/src/layouts/history-list/CodeBlockTab.vue
+++ b/packages/editor/src/layouts/history-list/CodeBlockTab.vue
@@ -16,6 +16,7 @@
       @goto="(id: string | number, index: number) => $emit('goto', id, index)"
       @goto-initial="(id: string | number) => $emit('goto-initial', id)"
       @diff-step="(id: string | number, index: number) => $emit('diff-step', id, index)"
+      @revert-step="(id: string | number, index: number) => $emit('revert-step', id, index)"
     />
   </TMagicScrollbar>
 </template>
@@ -51,6 +52,8 @@ defineEmits<{
   (_e: 'goto-initial', _codeBlockId: string | number): void;
   /** 透传 Bucket 的 diff-step 事件，携带 codeBlock id 与 step 索引。 */
   (_e: 'diff-step', _codeBlockId: string | number, _index: number): void;
+  /** 透传 Bucket 的 revert-step 事件，携带 codeBlock id 与 step 索引（类 git revert）。 */
+  (_e: 'revert-step', _codeBlockId: string | number, _index: number): void;
 }>();
 
 /** 仅 update（前后 content 都存在）时可查看差异。 */
diff --git a/packages/editor/src/layouts/history-list/DataSourceTab.vue b/packages/editor/src/layouts/history-list/DataSourceTab.vue
index b8087c39..d1b6166e 100644
--- a/packages/editor/src/layouts/history-list/DataSourceTab.vue
+++ b/packages/editor/src/layouts/history-list/DataSourceTab.vue
@@ -16,6 +16,7 @@
       @goto="(id: string | number, index: number) => $emit('goto', id, index)"
       @goto-initial="(id: string | number) => $emit('goto-initial', id)"
       @diff-step="(id: string | number, index: number) => $emit('diff-step', id, index)"
+      @revert-step="(id: string | number, index: number) => $emit('revert-step', id, index)"
     />
   </TMagicScrollbar>
 </template>
@@ -51,6 +52,8 @@ defineEmits<{
   (_e: 'goto-initial', _dataSourceId: string | number): void;
   /** 透传 Bucket 的 diff-step 事件，携带 dataSource id 与 step 索引。 */
   (_e: 'diff-step', _dataSourceId: string | number, _index: number): void;
+  /** 透传 Bucket 的 revert-step 事件，携带 dataSource id 与 step 索引（类 git revert）。 */
+  (_e: 'revert-step', _dataSourceId: string | number, _index: number): void;
 }>();
 
 /** 仅 update（前后 schema 都存在）时可查看差异。 */
diff --git a/packages/editor/src/layouts/history-list/GroupRow.vue b/packages/editor/src/layouts/history-list/GroupRow.vue
index 4f0397ab..03c9134a 100644
--- a/packages/editor/src/layouts/history-list/GroupRow.vue
+++ b/packages/editor/src/layouts/history-list/GroupRow.vue
@@ -9,6 +9,7 @@
       :title="headTitle"
       @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 v-if="isCurrent" class="m-editor-history-list-item-current">当前</span>
@@ -20,12 +21,19 @@
         >查看差异</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"
+        title="将该步骤的修改作为一次新操作反向应用（不影响后续历史）"
+        @click.stop="onRevertClick(subSteps[0].index)"
+        >回滚</span
+      >
       <span v-if="merged" class="m-editor-history-list-group-toggle" :class="{ 'is-expanded': expanded }">▾</span>
     </div>
 
     <ul v-if="merged && expanded" class="m-editor-history-list-substeps">
       <li
-        v-for="s in subSteps"
+        v-for="s in subStepsDisplay"
         :key="s.index"
         :class="{ 'is-undone': !s.applied, 'is-current': s.isCurrent, 'is-clickable': !s.isCurrent }"
         :title="s.isCurrent ? '当前所在记录' : '点击跳转到该记录'"
@@ -41,6 +49,13 @@
           @click.stop="onDiffClick(s.index)"
           >查看差异</span
         >
+        <span
+          v-if="s.revertable"
+          class="m-editor-history-list-item-revert"
+          title="将该步骤的修改作为一次新操作反向应用（不影响后续历史）"
+          @click.stop="onRevertClick(s.index)"
+          >回滚</span
+        >
       </li>
     </ul>
   </li>
@@ -71,7 +86,15 @@ const props = defineProps<{
   /** 组内的 step 总数，仅在 merged 为 true 时显示为 "合并 N 步"。 */
   stepCount: number;
   /** 子步列表，用于在展开状态下逐条展示每个 step 的索引、应用状态与描述文案。 */
-  subSteps: { index: number; applied: boolean; desc: string; isCurrent?: boolean; diffable?: boolean }[];
+  subSteps: {
+    index: number;
+    applied: boolean;
+    desc: string;
+    isCurrent?: boolean;
+    diffable?: boolean;
+    /** 是否可对该子步执行「回滚」（已应用 + 业务侧确认支持反向）。父级根据 step 与 applied 决定。 */
+    revertable?: boolean;
+  }[];
   /** 当前组是否处于展开状态。仅在 merged 为 true 时生效，控制子步列表是否渲染。 */
   expanded: boolean;
   /** 是否为当前所在的分组（包含栈中最近一次已应用步骤的那一组），UI 高亮展示。 */
@@ -99,6 +122,11 @@ const emit = defineEmits<{
    * payload 为该 step 在所属栈中的索引，由上层根据 index 取 step 内容并展示对比。
    */
   (_e: 'diff-step', _index: number): void;
+  /**
+   * 用户希望「回滚」该 step——把它的修改作为一次新操作反向应用（类 git revert）。
+   * payload 为该 step 在所属栈中的索引。仅在单步组头部（headRevertable）或合并组的可回滚子步上触发。
+   */
+  (_e: 'revert-step', _index: number): void;
 }>();
 
 /** 单步组：头部可点击 goto；合并组：头部可点击切换展开。当前组（isCurrent）的单步组头部不可点击。 */
@@ -136,7 +164,44 @@ const onSubStepClick = (s: { index: number; isCurrent?: boolean }) => {
 /** 单步组头部是否展示"查看差异"入口：要求该唯一子步本身可对比。 */
 const headDiffable = computed(() => !props.merged && Boolean(props.subSteps[0]?.diffable));
 
+/** 单步组头部是否展示"回滚"入口：要求该唯一子步本身可回滚（已应用）。 */
+const headRevertable = computed(() => !props.merged && Boolean(props.subSteps[0]?.revertable));
+
+/**
+ * 合并组展开后的子步渲染顺序：与外层分组列表保持一致——倒序展示（最新的子步在最上方）。
+ * 外层 page tab / bucket 都已对 groups 做了 reverse，子步沿用同样的视觉规则更直观。
+ * 注意：仅用于渲染，原 `subSteps` 保持时间正序，`headIndexLabel` 等基于首尾索引的展示语义不变。
+ */
+const subStepsDisplay = computed(() => props.subSteps.slice().reverse());
+
+/**
+ * 头部索引展示：
+ * - 单步组（merged=false）：显示该唯一 step 的编号，如 `#5`；
+ * - 合并组：显示组内 step 的编号范围，如 `#3-#7`（首尾相同则退化为 `#5`）。
+ *
+ * 这里展示的是 step.index + 1（与子步列表 `#{{ s.index + 1 }}` 保持一致），从 1 起编号更符合直觉。
+ */
+const headIndexLabel = computed(() => {
+  const list = props.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}`;
+  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 onDiffClick = (index: number) => {
   emit('diff-step', index);
 };
+
+const onRevertClick = (index: number) => {
+  emit('revert-step', index);
+};
 </script>
diff --git a/packages/editor/src/layouts/history-list/HistoryDiffDialog.vue b/packages/editor/src/layouts/history-list/HistoryDiffDialog.vue
index 06fa8e1b..ac2ea1f2 100644
--- a/packages/editor/src/layouts/history-list/HistoryDiffDialog.vue
+++ b/packages/editor/src/layouts/history-list/HistoryDiffDialog.vue
@@ -18,7 +18,7 @@
         </div>
 
         <div class="m-editor-history-diff-dialog-legend">
-          <TMagicTag size="small" type="info">{{ leftLabel }}</TMagicTag>
+          <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">
diff --git a/packages/editor/src/layouts/history-list/HistoryListPanel.vue b/packages/editor/src/layouts/history-list/HistoryListPanel.vue
index 364b25b5..5ce6d69f 100644
--- a/packages/editor/src/layouts/history-list/HistoryListPanel.vue
+++ b/packages/editor/src/layouts/history-list/HistoryListPanel.vue
@@ -1,6 +1,20 @@
 <template>
-  <TMagicPopover popper-class="m-editor-history-list-popover" placement="bottom" trigger="click" :width="660">
+  <TMagicPopover
+    popper-class="m-editor-history-list-popover"
+    placement="bottom"
+    trigger="click"
+    :visible="visible"
+    :width="660"
+  >
     <div class="m-editor-history-list">
+      <TMagicTooltip effect="dark" placement="top" content="关闭">
+        <TMagicButton class="m-editor-history-list-close" size="small" link @click="visible = false">
+          <template #icon>
+            <MIcon :icon="CloseIcon"></MIcon>
+          </template>
+        </TMagicButton>
+      </TMagicTooltip>
+
       <TMagicTabs v-model="activeTab" class="m-editor-history-list-tabs">
         <component
           :is="tabPaneComponent?.component || 'el-tab-pane'"
@@ -13,6 +27,7 @@
             @goto="onPageGoto"
             @goto-initial="onPageGotoInitial"
             @diff-step="onPageDiff"
+            @revert-step="onPageRevert"
           />
         </component>
 
@@ -27,6 +42,7 @@
             @goto="onDataSourceGoto"
             @goto-initial="onDataSourceGotoInitial"
             @diff-step="onDataSourceDiff"
+            @revert-step="onDataSourceRevert"
           />
         </component>
 
@@ -41,6 +57,7 @@
             @goto="onCodeBlockGoto"
             @goto-initial="onCodeBlockGotoInitial"
             @diff-step="onCodeBlockDiff"
+            @revert-step="onCodeBlockRevert"
           />
         </component>
       </TMagicTabs>
@@ -48,7 +65,7 @@
 
     <template #reference>
       <TMagicTooltip effect="dark" placement="bottom" content="历史记录">
-        <TMagicButton size="small" link>
+        <TMagicButton size="small" link @click="visible = !visible">
           <template #icon>
             <MIcon :icon="ClockIcon"></MIcon>
           </template>
@@ -82,7 +99,7 @@
  * 共享的描述生成与折叠状态在 composables.ts 中维护。
  */
 import { inject, markRaw, ref, useTemplateRef } from 'vue';
-import { Clock } from '@element-plus/icons-vue';
+import { Clock, Close } from '@element-plus/icons-vue';
 
 import { getDesignConfig, TMagicButton, TMagicPopover, TMagicTabs, TMagicTooltip } from '@tmagic/design';
 import type { FormState } from '@tmagic/form';
@@ -101,8 +118,12 @@ defineOptions({
 });
 
 const ClockIcon = markRaw(Clock);
+const CloseIcon = markRaw(Close);
 const activeTab = ref<'page' | 'data-source' | 'code-block'>('page');
 
+/** 面板显隐受控：reference 图标点击切换，右上角关闭按钮置为 false。 */
+const visible = ref(false);
+
 const tabPaneComponent = getDesignConfig('components')?.tabPane;
 
 const { editorService, dataSourceService, codeBlockService, historyService } = useServices();
@@ -159,6 +180,22 @@ 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');
 
 /**
diff --git a/packages/editor/src/layouts/history-list/InitialRow.vue b/packages/editor/src/layouts/history-list/InitialRow.vue
index 014bd5c6..7782f9a7 100644
--- a/packages/editor/src/layouts/history-list/InitialRow.vue
+++ b/packages/editor/src/layouts/history-list/InitialRow.vue
@@ -5,6 +5,7 @@
     :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>
diff --git a/packages/editor/src/layouts/history-list/PageTab.vue b/packages/editor/src/layouts/history-list/PageTab.vue
index a9de4885..5cd5876c 100644
--- a/packages/editor/src/layouts/history-list/PageTab.vue
+++ b/packages/editor/src/layouts/history-list/PageTab.vue
@@ -18,6 +18,7 @@
             isCurrent: s.isCurrent,
             desc: describePageStep(s.step),
             diffable: isPageStepDiffable(s.step),
+            revertable: s.applied,
           }))
         "
         :is-current="group.isCurrent"
@@ -25,6 +26,7 @@
         @toggle="(key: string) => $emit('toggle', key)"
         @goto="(index: number) => $emit('goto', index)"
         @diff-step="(index: number) => $emit('diff-step', index)"
+        @revert-step="(index: number) => $emit('revert-step', index)"
       />
       <!--
         初始状态项：永远位于列表底部（页面 tab 倒序展示，最底部=最早），
@@ -66,6 +68,8 @@ defineEmits<{
   (_e: 'goto-initial'): void;
   /** 用户点击"查看差异"按钮，携带目标 step 在栈中的索引。 */
   (_e: 'diff-step', _index: number): void;
+  /** 用户点击"回滚"按钮，携带目标 step 在栈中的索引，类 git revert。 */
+  (_e: 'revert-step', _index: number): void;
 }>();
 
 /**
diff --git a/packages/editor/src/services/codeBlock.ts b/packages/editor/src/services/codeBlock.ts
index 24055080..a07b0451 100644
--- a/packages/editor/src/services/codeBlock.ts
+++ b/packages/editor/src/services/codeBlock.ts
@@ -48,6 +48,18 @@ const canUsePluginMethods = {
 
 type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
 
+/**
+ * 「回滚」生成的新 step 简短描述。仅 service 层使用。
+ */
+const describeRevertCodeBlockStep = (step: CodeBlockStepValue): string => {
+  const { oldContent, newContent, changeRecords, id } = step;
+  if (oldContent === null && newContent) return `撤回新增 ${newContent.name || newContent.id || id}`;
+  if (oldContent && newContent === null) return `还原已删除的 ${oldContent.name || oldContent.id || id}`;
+  const name = newContent?.name || oldContent?.name || `${id}`;
+  const propPath = changeRecords?.[0]?.propPath;
+  return propPath ? `还原 ${name} · ${propPath}` : `还原 ${name}`;
+};
+
 class CodeBlock extends BaseService {
   private state = reactive<CodeState>({
     codeDsl: null,
@@ -347,6 +359,24 @@ class CodeBlock extends BaseService {
     return cursor;
   }
 
+  /**
+   * 「回滚」指定代码块历史步骤（类 git revert 语义）：
+   * - 不动原始栈结构（不移动 cursor、不丢弃任何步骤）；
+   * - 把目标 step 的修改**反向应用**一次，并作为**新步骤**追加到栈顶；
+   * - 仅对已应用的步骤生效。
+   *
+   * @param id    代码块 id
+   * @param index 目标 step 在该栈中的索引（0 为最早），通常由历史面板传入
+   * @returns 反向后产生的新 step；目标不存在 / 未应用时返回 null
+   */
+  public async revert(id: Id, index: number): Promise<CodeBlockStepValue | null> {
+    const list = historyService.getCodeBlockStepList(id);
+    const entry = list[index];
+    if (!entry?.applied) return null;
+    const description = `回滚 #${index + 1}: ${describeRevertCodeBlockStep(entry.step)}`;
+    return await this.applyRevertStep(entry.step, description);
+  }
+
   /**
    * 生成代码块唯一id
    * @returns {Id} 代码块唯一id
@@ -429,6 +459,55 @@ class CodeBlock extends BaseService {
     super.usePlugin(options);
   }
 
+  /**
+   * 反向应用一个 step 并以新 step 入栈。逻辑与 applyHistoryStep(reverse=true) 同构，
+   * 差异仅在于通过公开的 setCodeDslByIdSync / deleteCodeDslByIds 触发 push。
+   */
+  private async applyRevertStep(
+    step: CodeBlockStepValue,
+    historyDescription: string,
+  ): Promise<CodeBlockStepValue | null> {
+    const { id, oldContent, newContent, changeRecords } = step;
+
+    // 原本是新增 → revert 即删除
+    if (oldContent === null && newContent) {
+      await this.deleteCodeDslByIds([id], { historyDescription });
+      return historyService.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    // 原本是删除 → revert 即写回
+    if (oldContent && newContent === null) {
+      this.setCodeDslByIdSync(id, cloneDeep(oldContent), true, { historyDescription });
+      return historyService.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    if (!oldContent || !newContent) return null;
+
+    // 原本是更新 → 把 oldContent 写回；优先按 changeRecords 局部 patch
+    if (changeRecords?.length) {
+      const current = this.getCodeContentById(id);
+      if (!current) return null;
+      const patched = cloneDeep(current) as CodeBlockContent;
+      let fallbackToFullReplace = false;
+      for (const record of changeRecords) {
+        if (!record.propPath) {
+          fallbackToFullReplace = true;
+          break;
+        }
+        const value = cloneDeep(getValueByKeyPath(record.propPath, oldContent));
+        setValueByKeyPath(record.propPath, value, patched);
+      }
+      this.setCodeDslByIdSync(id, fallbackToFullReplace ? cloneDeep(oldContent) : patched, true, {
+        changeRecords,
+        historyDescription,
+      });
+      return historyService.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    this.setCodeDslByIdSync(id, cloneDeep(oldContent), true, { historyDescription });
+    return historyService.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+  }
+
   /**
    * 把一条历史 step 应用到当前代码块服务上。
    *
diff --git a/packages/editor/src/services/dataSource.ts b/packages/editor/src/services/dataSource.ts
index b6ede6fd..1af8ac1c 100644
--- a/packages/editor/src/services/dataSource.ts
+++ b/packages/editor/src/services/dataSource.ts
@@ -54,6 +54,19 @@ const canUsePluginMethods = {
 
 type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
+/**
+ * 「回滚」生成的新 step 简短描述。
+ * 仅在 service 层使用，避免依赖 UI 层 composables。
+ */
+const describeRevertDataSourceStep = (step: DataSourceStepValue): string => {
+  const { oldSchema, newSchema, changeRecords, id } = step;
+  if (oldSchema === null && newSchema) return `撤回新增 ${newSchema.title || newSchema.id || id}`;
+  if (oldSchema && newSchema === null) return `还原已删除的 ${oldSchema.title || oldSchema.id || id}`;
+  const title = newSchema?.title || oldSchema?.title || `${id}`;
+  const propPath = changeRecords?.[0]?.propPath;
+  return propPath ? `还原 ${title} · ${propPath}` : `还原 ${title}`;
+};
+
 class DataSource extends BaseService {
   private state = reactive<State>({
     datasourceTypeList: [],
@@ -251,6 +264,24 @@ class DataSource extends BaseService {
     return cursor;
   }
 
+  /**
+   * 「回滚」指定数据源历史步骤（类 git revert 语义）：
+   * - 不动原始栈结构（不移动 cursor、不丢弃任何步骤）；
+   * - 把目标 step 的修改**反向应用**一次，并作为**新步骤**追加到栈顶；
+   * - 仅对已应用的步骤生效——未应用步骤本身就不存在于当前 schema 中，反向无意义。
+   *
+   * @param id    数据源 id
+   * @param index 目标 step 在该栈中的索引（0 为最早），通常由历史面板传入
+   * @returns 反向后产生的新 step；目标不存在 / 未应用时返回 null
+   */
+  public revert(id: Id, index: number): DataSourceStepValue | null {
+    const list = historyService.getDataSourceStepList(id);
+    const entry = list[index];
+    if (!entry?.applied) return null;
+    const description = `回滚 #${index + 1}: ${describeRevertDataSourceStep(entry.step)}`;
+    return this.applyRevertStep(entry.step, description);
+  }
+
   public createId(): string {
     return `ds_${guid()}`;
   }
@@ -326,6 +357,52 @@ class DataSource extends BaseService {
     });
   }
 
+  /**
+   * 反向应用一个 step 并以新 step 入栈（不带 doNotPushHistory）。逻辑与 applyHistoryStep(reverse=true)
+   * 同构，差异仅在于走对应的公共 add / update / remove 而不是带 doNotPushHistory 的版本。
+   */
+  private applyRevertStep(step: DataSourceStepValue, historyDescription: string): DataSourceStepValue | null {
+    const { id, oldSchema, newSchema, changeRecords } = step;
+
+    // 原本是新增 → revert 即删除
+    if (oldSchema === null && newSchema) {
+      this.remove(`${id}`, { historyDescription });
+      return historyService.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    // 原本是删除 → revert 即重新加回
+    if (oldSchema && newSchema === null) {
+      this.add(cloneDeep(oldSchema), { historyDescription });
+      return historyService.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    if (!oldSchema || !newSchema) return null;
+
+    // 原本是更新 → 把 oldSchema 写回；优先按 changeRecords 局部 patch
+    if (changeRecords?.length) {
+      const current = this.getDataSourceById(`${id}`);
+      if (!current) return null;
+      const patched = cloneDeep(current) as DataSourceSchema;
+      let fallbackToFullReplace = false;
+      for (const record of changeRecords) {
+        if (!record.propPath) {
+          fallbackToFullReplace = true;
+          break;
+        }
+        const value = cloneDeep(getValueByKeyPath(record.propPath, oldSchema));
+        setValueByKeyPath(record.propPath, value, patched);
+      }
+      this.update(fallbackToFullReplace ? cloneDeep(oldSchema) : patched, {
+        changeRecords,
+        historyDescription,
+      });
+      return historyService.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    this.update(cloneDeep(oldSchema), { historyDescription });
+    return historyService.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+  }
+
   /**
    * 把一条历史 step 应用到当前数据源服务上。
    *
diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index 39ee411b..48394681 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -66,6 +66,38 @@ import { beforePaste, getAddParent } from '@editor/utils/operator';
 
 type MoveItem = { node: MNode; parent: MContainer; pageForOp: { name: string; id: Id } | null };
 
+/**
+ * 给「回滚」生成的新 step 用的简短描述生成器。
+ * 与 UI 层 `describePageStep` 同义，但避免 service 反向依赖 layouts/，故在此本地实现。
+ */
+const describeStepForRevert = (step: StepValue): string => {
+  switch (step.opType) {
+    case 'add': {
+      const count = step.nodes?.length ?? 0;
+      const node = step.nodes?.[0];
+      const label = node?.name || node?.type || (node?.id !== undefined ? `${node.id}` : '');
+      return `撤回新增 ${count} 个节点${count === 1 && label ? `（${label}）` : ''}`;
+    }
+    case 'remove': {
+      const count = step.removedItems?.length ?? 0;
+      const node = step.removedItems?.[0]?.node;
+      const label = node?.name || node?.type || (node?.id !== undefined ? `${node.id}` : '');
+      return `还原已删除的 ${count} 个节点${count === 1 && label ? `（${label}）` : ''}`;
+    }
+    case 'update':
+    default: {
+      const items = step.updatedItems ?? [];
+      if (items.length === 1) {
+        const { newNode, oldNode, changeRecords } = items[0];
+        const target = newNode?.name || newNode?.type || oldNode?.name || oldNode?.type || `${newNode?.id ?? ''}`;
+        const propPath = changeRecords?.[0]?.propPath;
+        return propPath ? `还原 ${target} · ${propPath}` : `还原 ${target}`;
+      }
+      return `还原 ${items.length} 个节点的修改`;
+    }
+  }
+};
+
 class Editor extends BaseService {
   public state: StoreState = reactive({
     root: null,
@@ -1127,6 +1159,106 @@ class Editor extends BaseService {
     return value;
   }
 
+  /**
+   * 「回滚」指定页面历史步骤（类 git revert 语义）：
+   * - 不动原始历史栈结构（不移动 cursor、不丢弃任何步骤）；
+   * - 取出 `index` 对应的 step，**反向应用**一次（add→remove / remove→add / update→旧值）；
+   * - 把这次反向应用作为一条**新步骤**追加到栈顶，可被普通 undo / redo。
+   *
+   * 与 `gotoPageStep`（类 git reset）的区别在于此操作**不丢弃**目标之后的历史。
+   * 与 `applyHistoryOp(reverse=true)` 的区别在于：本方法**不带** `doNotPushHistory`，
+   * 反向应用会以一条新 step 入栈；并且不实施 step 中保存的选区与 modifiedNodeIds 状态，
+   * 选区由用户当前位置决定，符合"新提交"语义。
+   *
+   * 仅对处于「已应用」状态的步骤生效——未应用的步骤本身就不存在于当前 DSL 中，反向无意义。
+   *
+   * @param index 目标 step 在所属页面栈中的索引（0 为最早），通常由历史面板传入
+   * @returns 反向后产生的新 step；目标不存在 / 未应用 / 反向失败时返回 null
+   */
+  public async revertPageStep(index: number): Promise<StepValue | null> {
+    const list = historyService.getPageStepList();
+    const entry = list[index];
+    if (!entry?.applied) return null;
+
+    const { step } = entry;
+    const root = this.get('root');
+    if (!root) return null;
+
+    // 反向应用产生的新 step 由内部 pushOpHistory 触发 history `change` 事件，监听一次以拿到引用。
+    let revertedStep: StepValue | null = null;
+    const captureRevert = (s: StepValue) => {
+      revertedStep = s;
+    };
+    historyService.once('change', captureRevert);
+
+    const historyDescription = `回滚 #${index + 1}: ${describeStepForRevert(step)}`;
+    // revert 走 public add/remove/update，让操作以一条普通新 step 入栈；不要切换选区与页面，避免打断用户。
+    const opts = { doNotSelect: true, doNotSwitchPage: true, historyDescription } as const;
+
+    try {
+      switch (step.opType) {
+        case 'add': {
+          // 原本是新增 → revert 即删除当时被加入的节点
+          const nodes = step.nodes ?? [];
+          for (const n of nodes) {
+            const existing = this.getNodeById(n.id, false);
+            if (existing) {
+              await this.remove(existing, opts);
+            }
+          }
+          break;
+        }
+        case 'remove': {
+          // 原本是删除 → revert 即把节点按原父容器加回来。
+          // 按原 index 升序逐个插回，先小后大避免索引漂移。
+          const items = step.removedItems ?? [];
+          const sorted = [...items].sort((a, b) => a.index - b.index);
+          for (const { node, parentId } of sorted) {
+            const parent = this.getNodeById(parentId, false) as MContainer | null;
+            if (parent) {
+              await this.add([cloneDeep(node)] as MNode[], parent, opts);
+            }
+          }
+          break;
+        }
+        case 'update': {
+          // 原本是更新 → revert 即把 oldNode 的值写回；
+          // 优先按 changeRecords 局部 patch（仅触达 propPath 下的字段，避免冲掉同节点上其它无关变更）。
+          const items = step.updatedItems ?? [];
+          const configs = items.map(({ oldNode, newNode, changeRecords }) => {
+            if (changeRecords?.length) {
+              const patch: MNode = { id: newNode.id, type: newNode.type };
+              for (const record of changeRecords) {
+                if (!record.propPath) {
+                  // 没有 propPath 视为整节点替换
+                  return cloneDeep(oldNode);
+                }
+                const value = cloneDeep(getValueByKeyPath(record.propPath, oldNode));
+                setValueByKeyPath(record.propPath, value, patch);
+              }
+              return patch;
+            }
+            return cloneDeep(oldNode);
+          });
+          if (configs.length) {
+            await this.update(configs, { historyDescription });
+          }
+          break;
+        }
+      }
+    } finally {
+      historyService.off('change', captureRevert);
+    }
+
+    // 通知一次 history-change，让上层（如属性面板）按当前最新 DSL 刷新
+    const page = toRaw(this.get('page'));
+    if (page) {
+      this.emit('history-change', page as MPage | MPageFragment);
+    }
+
+    return revertedStep;
+  }
+
   /**
    * 跳转当前页面历史栈到指定游标位置。
    *
diff --git a/packages/editor/src/services/history.ts b/packages/editor/src/services/history.ts
index 6fe27766..e750d96e 100644
--- a/packages/editor/src/services/history.ts
+++ b/packages/editor/src/services/history.ts
@@ -478,6 +478,28 @@ class History extends BaseService {
     return this.state.dataSourceState[dataSourceId]?.getCursor() ?? 0;
   }
 
+  /**
+   * 取出指定代码块历史栈的平铺步骤列表（含 applied 标记）。供 revert 等按 index 索引步骤使用。
+   */
+  public getCodeBlockStepList(codeBlockId: Id): { step: CodeBlockStepValue; index: number; applied: boolean }[] {
+    const undoRedo = this.state.codeBlockState[codeBlockId];
+    if (!undoRedo) return [];
+    const list = undoRedo.getElementList();
+    const cursor = undoRedo.getCursor();
+    return list.map((step, index) => ({ step, index, applied: index < cursor }));
+  }
+
+  /**
+   * 取出指定数据源历史栈的平铺步骤列表（含 applied 标记）。供 revert 等按 index 索引步骤使用。
+   */
+  public getDataSourceStepList(dataSourceId: Id): { step: DataSourceStepValue; index: number; applied: boolean }[] {
+    const undoRedo = this.state.dataSourceState[dataSourceId];
+    if (!undoRedo) return [];
+    const list = undoRedo.getElementList();
+    const cursor = undoRedo.getCursor();
+    return list.map((step, index) => ({ step, index, applied: index < cursor }));
+  }
+
   /**
    * 取出全部数据源的历史栈，按 dataSourceId 分组。同上。
    */
diff --git a/packages/editor/src/theme/history-list-panel.scss b/packages/editor/src/theme/history-list-panel.scss
index ac05869a..cb8c32ed 100644
--- a/packages/editor/src/theme/history-list-panel.scss
+++ b/packages/editor/src/theme/history-list-panel.scss
@@ -2,9 +2,29 @@
   padding: 0 !important;
 
   .m-editor-history-list {
+    position: relative;
     padding: 4px 8px 8px;
   }
 
+  // 关闭按钮悬浮在 tab 标题同一行（绝对定位，不占布局空间）。
+  // top 对齐容器顶部内边距，height 跟 el-tabs/t-tabs 头部默认高度一致，
+  // 再用 flex 居中让图标与 tab 标题视觉对齐。
+  .m-editor-history-list-close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    margin: 0;
+    color: #909399;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+
   .m-editor-history-list-tabs {
     .el-tabs__header,
     .t-tabs__header {
@@ -36,7 +56,8 @@
     color: #303133;
     cursor: default;
 
-    &:hover {
+    // 合并组（卡片）自己定义了 hover/active 视觉，跳过通用单步 hover 避免色彩叠加
+    &:not(.m-editor-history-list-group.is-merged):hover {
       background-color: rgba(0, 0, 0, 0.04);
     }
 
@@ -48,7 +69,10 @@
       }
     }
 
-    &.is-current {
+    // 当前所在的「单步」记录：左侧蓝条 + 浅蓝底；
+    // 合并组的当前态由 `.is-merged.is-current` 单独覆盖（border-left + 卡片背景），
+    // 故这里仅作用于「非合并组」的单步条目，避免与卡片样式互相干扰。
+    &.is-current:not(.m-editor-history-list-group.is-merged) {
       background-color: rgba(64, 158, 255, 0.1);
       box-shadow: inset 2px 0 0 #409eff;
 
@@ -94,22 +118,64 @@
       }
     }
 
-    &.is-merged .m-editor-history-list-group-head {
-      font-weight: 500;
+    // 合并组（≥2 个连续同节点的修改被聚合）需要与单步条目明显区分：
+    // - 左侧 3px 紫色色条暗示「这是一组」；
+    // - 浅紫背景 + 边框把整个组视觉化为一张「卡片」；
+    // - 头部加 padding，避免和单步条目混在一起难以辨认。
+    &.is-merged {
+      margin: 4px 0;
+      padding: 4px 8px 6px;
+      background-color: rgba(144, 105, 219, 0.06);
+      border: 1px solid rgba(144, 105, 219, 0.18);
+      border-left: 3px solid #9069db;
+      border-radius: 4px;
+
+      // 卡片本体已经有背景色，hover 状态以更深的同色提示交互
+      &:hover {
+        background-color: rgba(144, 105, 219, 0.1);
+      }
+
+      .m-editor-history-list-group-head {
+        font-weight: 600;
+        color: #5b3fa5;
+      }
+
+      // 已撤销态：整张卡片去色
+      &.is-undone {
+        background-color: rgba(192, 196, 204, 0.08);
+        border-color: rgba(192, 196, 204, 0.4);
+        border-left-color: #c0c4cc;
+
+        .m-editor-history-list-group-head {
+          color: #c0c4cc;
+        }
+      }
+
+      // 当前组：卡片左条变蓝，与单步「当前」高亮一致
+      &.is-current {
+        background-color: rgba(64, 158, 255, 0.08);
+        border-color: rgba(64, 158, 255, 0.3);
+        border-left-color: #409eff;
+        box-shadow: none; // 覆盖 .is-current 公共的 inset 阴影
+
+        .m-editor-history-list-group-head {
+          color: #409eff;
+        }
+      }
     }
   }
 
   .m-editor-history-list-substeps {
-    margin: 4px 0 0 18px;
+    margin: 6px 0 0 6px;
     padding: 0;
     list-style: none;
-    border-left: 1px dashed #dcdfe6;
+    border-left: 1px dashed rgba(144, 105, 219, 0.45);
 
     li {
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 2px 8px;
+      padding: 3px 8px;
       font-size: 11px;
       color: #606266;
       cursor: default;
@@ -119,7 +185,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: rgba(0, 0, 0, 0.04);
+          background-color: rgba(144, 105, 219, 0.1);
         }
       }
 
@@ -152,6 +218,8 @@
     color: #909399;
     font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     font-size: 11px;
+    font-weight: 400; // 防止被合并组头部的粗体继承
+    white-space: nowrap;
   }
 
   .m-editor-history-list-item-op {
@@ -203,14 +271,17 @@
     white-space: nowrap;
   }
 
+  // 「合并 N 步」徽标：紫色实心胶囊，与合并组卡片色系一致，醒目区分单步条目。
   .m-editor-history-list-item-merge {
     flex: 0 0 auto;
-    padding: 0 6px;
-    border-radius: 2px;
+    padding: 0 8px;
+    border-radius: 8px;
     font-size: 10px;
     line-height: 16px;
-    color: #e6a23c;
-    background-color: rgba(230, 162, 60, 0.12);
+    color: #fff;
+    background-color: #9069db;
+    font-weight: 500;
+    letter-spacing: 0.2px;
   }
 
   .m-editor-history-list-item-diff {
@@ -229,6 +300,24 @@
     }
   }
 
+  // 「回滚」按钮：类 git revert，把目标 step 反向应用一次作为新提交。
+  // 使用与「查看差异」不同的色调（橙黄），用来区分"可逆操作"与"只读对比"。
+  .m-editor-history-list-item-revert {
+    flex: 0 0 auto;
+    padding: 0 6px;
+    border-radius: 2px;
+    font-size: 10px;
+    line-height: 16px;
+    color: #e6a23c;
+    background-color: rgba(230, 162, 60, 0.12);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background-color: rgba(230, 162, 60, 0.25);
+    }
+  }
+
   .m-editor-history-list-substep-desc {
     flex: 1 1 auto;
     overflow: hidden;
diff --git a/packages/editor/tests/unit/layouts/history-list/HistoryListPanel.spec.ts b/packages/editor/tests/unit/layouts/history-list/HistoryListPanel.spec.ts
index f376386c..85097330 100644
--- a/packages/editor/tests/unit/layouts/history-list/HistoryListPanel.spec.ts
+++ b/packages/editor/tests/unit/layouts/history-list/HistoryListPanel.spec.ts
@@ -70,8 +70,8 @@ afterEach(() => {
 });
 
 const factory = async () => {
-  const { default: HistoryListPanel } = await import('@editor/layouts/history-list/HistoryListPanel.vue');
-  return mount(HistoryListPanel, { attachTo: document.body });
+  const { default: historyListPanel } = await import('@editor/layouts/history-list/HistoryListPanel.vue');
+  return mount(historyListPanel, { attachTo: document.body });
 };
 
 describe('HistoryListPanel.vue', () => {
diff --git a/packages/editor/tests/unit/layouts/history-list/composables.spec.ts b/packages/editor/tests/unit/layouts/history-list/composables.spec.ts
index 1245dfa0..51b0422a 100644
--- a/packages/editor/tests/unit/layouts/history-list/composables.spec.ts
+++ b/packages/editor/tests/unit/layouts/history-list/composables.spec.ts
@@ -469,13 +469,13 @@ describe('useHistoryList', () => {
   // useHistoryList 内部用了 useServices，需要 mount 在一个 host 组件里 provide services
   const mountWithHost = () => {
     let api!: ReturnType<typeof useHistoryList>;
-    const Host = defineComponent({
+    const host = defineComponent({
       setup() {
         api = useHistoryList();
         return () => h('div');
       },
     });
-    const wrapper = mount(Host, {
+    const wrapper = mount(host, {
       global: {
         provide: {
           services: { historyService },
diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index ee879e97..4db59d83 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -78,7 +78,10 @@
       <TMagicFormItem
         v-if="isSelfDiffField"
         v-bind="formItemProps"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true, 'self-diff': true }"
+        :class="{
+          'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text,
+          'self-diff': true,
+        }"
       >
         <template #label>
           <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
@@ -121,7 +124,7 @@
         <!-- 上次内容 -->
         <TMagicFormItem
           v-bind="formItemProps"
-          :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
+          :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-before-diff': true }"
         >
           <template #label>
             <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
@@ -161,7 +164,7 @@
         <TMagicFormItem
           v-bind="formItemProps"
           :style="config.tip ? 'flex: 1' : ''"
-          :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
+          :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-after-diff': true }"
         >
           <template #label>
             <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
diff --git a/packages/form/src/containers/Tabs.vue b/packages/form/src/containers/Tabs.vue
index 7aedcb91..cdb83378 100644
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@@ -79,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, ref, watch, watchEffect } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { getDesignConfig, TMagicBadge } from '@tmagic/design';
@@ -175,6 +175,11 @@ watchEffect(() => {
   }
 });
 
+// model 或 lastValues 变化时，重置差异数
+watch([() => props.model, () => props.lastValues], () => {
+  diffCount.value = {};
+});
+
 const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items);
 
 const tabClickHandler = (tab: any) => {
diff --git a/packages/form/src/theme/container.scss b/packages/form/src/theme/container.scss
index 37afe802..0f185270 100644
--- a/packages/form/src/theme/container.scss
+++ b/packages/form/src/theme/container.scss
@@ -15,7 +15,10 @@
   }
 
   .tmagic-design-form-item {
-    &.show-diff {
+    &.show-after-diff {
+      background: rgb(225, 243, 216);
+    }
+    &.show-before-diff {
       background: #f7dadd;
     }
   }