From b1193b909e5e15f78783f72eb21959a52128e973 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 26 May 2026 20:59:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=A0=B7=E5=BC=8F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=99=A8=20StyleSetter=20=E6=94=AF=E6=8C=81=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=AF=B9=E6=AF=94=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Index.vue 透传 lastValues/isCompare 给各分类子组件，并冒泡 addDiffCount

- pro 下 6 个分类组件接受新 props 并向 MContainer 传递

- Layout/Border 同时将新 props 传递给内部 Box/Border 组件

- components/Border.vue 接受新 props 并冒泡 MContainer 的 addDiffCount

- components/Box.vue 接受 props 以保持接口一致

- 补充单元测试覆盖透传与事件冒泡
---
 .../editor/src/fields/StyleSetter/Index.vue   |  6 ++
 .../fields/StyleSetter/components/Border.vue  | 16 ++++-
 .../src/fields/StyleSetter/components/Box.vue |  2 +
 .../src/fields/StyleSetter/pro/Background.vue | 16 ++++-
 .../src/fields/StyleSetter/pro/Border.vue     | 26 ++++++-
 .../src/fields/StyleSetter/pro/Font.vue       | 16 ++++-
 .../src/fields/StyleSetter/pro/Layout.vue     | 18 ++++-
 .../src/fields/StyleSetter/pro/Position.vue   | 16 ++++-
 .../src/fields/StyleSetter/pro/Transform.vue  | 16 ++++-
 .../unit/fields/StyleSetter/Index.spec.ts     | 48 ++++++++++++-
 .../unit/fields/StyleSetter/Layout.spec.ts    | 42 ++++++++++-
 .../unit/fields/StyleSetter/Position.spec.ts  | 27 ++++++-
 .../StyleSetter/components/Border.spec.ts     | 25 ++++++-
 .../tests/unit/fields/StyleSetter/pro.spec.ts | 72 +++++++++++++++++--
 14 files changed, 324 insertions(+), 22 deletions(-)

diff --git a/packages/editor/src/fields/StyleSetter/Index.vue b/packages/editor/src/fields/StyleSetter/Index.vue
index e3fab9c2..13aa759a 100644
--- a/packages/editor/src/fields/StyleSetter/Index.vue
+++ b/packages/editor/src/fields/StyleSetter/Index.vue
@@ -7,9 +7,12 @@
           v-if="item.component"
           :is="item.component"
           :values="model[name]"
+          :last-values="lastValues?.[name]"
+          :is-compare="isCompare"
           :size="size"
           :disabled="disabled"
           @change="change"
+          @add-diff-count="onAddDiffCount"
         ></component>
       </TMagicCollapseItem>
     </template>
@@ -36,6 +39,7 @@ const props = defineProps<FieldProps<StyleSchema>>();
 
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const list = [
@@ -82,4 +86,6 @@ const change = (v: any, eventData: ContainerChangeEventData) => {
   });
   emit('change', v, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/editor/src/fields/StyleSetter/components/Border.vue b/packages/editor/src/fields/StyleSetter/components/Border.vue
index 6b7e4b52..85842a9b 100644
--- a/packages/editor/src/fields/StyleSetter/components/Border.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Border.vue
@@ -30,7 +30,16 @@
       </div>
     </div>
     <div class="border-value-container">
-      <MContainer :config="config" :model="model" :size="size" :disabled="disabled" @change="change"></MContainer>
+      <MContainer
+        :config="config"
+        :model="model"
+        :last-values="lastValues"
+        :is-compare="isCompare"
+        :size="size"
+        :disabled="disabled"
+        @change="change"
+        @add-diff-count="onAddDiffCount"
+      ></MContainer>
     </div>
   </div>
 </template>
@@ -86,11 +95,14 @@ const selectDirection = (d?: string) => (direction.value = d || '');
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 withDefaults(
   defineProps<{
     model: FormValue;
+    lastValues?: FormValue;
+    isCompare?: boolean;
     disabled?: boolean;
     size?: 'large' | 'default' | 'small';
   }>(),
@@ -104,4 +116,6 @@ const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
     });
   });
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/editor/src/fields/StyleSetter/components/Box.vue b/packages/editor/src/fields/StyleSetter/components/Box.vue
index 396fd591..c3c20bd3 100644
--- a/packages/editor/src/fields/StyleSetter/components/Box.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Box.vue
@@ -64,6 +64,8 @@ withDefaults(
     disabled?: boolean;
     size?: 'large' | 'default' | 'small';
     model: FormValue;
+    lastValues?: FormValue;
+    isCompare?: boolean;
   }>(),
   {},
 );
diff --git a/packages/editor/src/fields/StyleSetter/pro/Background.vue b/packages/editor/src/fields/StyleSetter/pro/Background.vue
index 51050221..601dfa6b 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Background.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Background.vue
@@ -1,5 +1,14 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -13,12 +22,15 @@ import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepe
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -79,4 +91,6 @@ const config = defineFormItem({
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/editor/src/fields/StyleSetter/pro/Border.vue b/packages/editor/src/fields/StyleSetter/pro/Border.vue
index cd336381..b7b7c17f 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Border.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Border.vue
@@ -1,6 +1,23 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
-  <Border :model="values" :size="size" :disabled="disabled" @change="change"></Border>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
+  <Border
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></Border>
 </template>
 
 <script lang="ts" setup>
@@ -11,12 +28,15 @@ import Border from '../components/Border.vue';
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -36,4 +56,6 @@ const config = defineFormItem({
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/editor/src/fields/StyleSetter/pro/Font.vue b/packages/editor/src/fields/StyleSetter/pro/Font.vue
index d5d9e42e..d3174693 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Font.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Font.vue
@@ -1,5 +1,14 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -12,12 +21,15 @@ import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -91,4 +103,6 @@ const config = defineFormItem({
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/editor/src/fields/StyleSetter/pro/Layout.vue b/packages/editor/src/fields/StyleSetter/pro/Layout.vue
index 69d4de8c..7d97849e 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Layout.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Layout.vue
@@ -1,8 +1,19 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
   <Box
     v-show="!['fixed', 'absolute'].includes(values.position)"
     :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
     :size="size"
     :disabled="disabled"
     @change="change"
@@ -34,12 +45,15 @@ import {
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -185,4 +199,6 @@ const config = defineFormItem({
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/editor/src/fields/StyleSetter/pro/Position.vue b/packages/editor/src/fields/StyleSetter/pro/Position.vue
index 8e79eab3..2d821938 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Position.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Position.vue
@@ -1,5 +1,14 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -8,12 +17,15 @@ import type { StyleSchema } from '@tmagic/schema';
 
 const props = defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const positionText: Record<string, string> = {
@@ -100,4 +112,6 @@ const config = defineFormItem({
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/editor/src/fields/StyleSetter/pro/Transform.vue b/packages/editor/src/fields/StyleSetter/pro/Transform.vue
index e4bc771a..c36675d8 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Transform.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Transform.vue
@@ -1,5 +1,14 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -8,12 +17,15 @@ import type { StyleSchema } from '@tmagic/schema';
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -51,4 +63,6 @@ const config = defineFormItem({
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/editor/tests/unit/fields/StyleSetter/Index.spec.ts b/packages/editor/tests/unit/fields/StyleSetter/Index.spec.ts
index f8b24fbd..6ec7ee5a 100644
--- a/packages/editor/tests/unit/fields/StyleSetter/Index.spec.ts
+++ b/packages/editor/tests/unit/fields/StyleSetter/Index.spec.ts
@@ -34,13 +34,14 @@ vi.mock('@editor/fields/StyleSetter/pro/index', () => {
   const make = (name: string) =>
     defineComponent({
       name,
-      props: ['values', 'size', 'disabled'],
-      emits: ['change'],
+      props: ['values', 'lastValues', 'isCompare', 'size', 'disabled'],
+      emits: ['change', 'addDiffCount'],
       setup(_p, { emit }) {
         return () =>
           h('div', {
             class: name,
             onClick: () => emit('change', { foo: 1 }, { changeRecords: [{ propPath: 'foo', value: 1 }] }),
+            onDblclick: () => emit('addDiffCount'),
           });
       },
     });
@@ -131,4 +132,47 @@ describe('StyleSetter Index', () => {
     expect(layout.props('size')).toBe('small');
     expect(layout.props('disabled')).toBe(true);
   });
+
+  test('lastValues/isCompare 正确透传到子组件', () => {
+    const wrapper = mount(StyleSetter, {
+      props: {
+        model: { style: { color: 'red' } },
+        lastValues: { style: { color: 'blue' } },
+        isCompare: true,
+        name: 'style',
+        prop: 'style',
+      } as any,
+    });
+    const layout = wrapper.findComponent({ name: 'Layout' });
+    expect(layout.props('lastValues')).toEqual({ color: 'blue' });
+    expect(layout.props('isCompare')).toBe(true);
+  });
+
+  test('lastValues 为空时透传 undefined / isCompare 默认 false', () => {
+    const wrapper = mount(StyleSetter, {
+      props: { model: { style: {} }, name: 'style', prop: 'style' } as any,
+    });
+    const layout = wrapper.findComponent({ name: 'Layout' });
+    expect(layout.props('lastValues')).toBeUndefined();
+    // Boolean 类型 prop 未传时 Vue 默认为 false
+    expect(layout.props('isCompare')).toBe(false);
+  });
+
+  test('子组件 addDiffCount 事件向上冒泡', async () => {
+    const wrapper = mount(StyleSetter, {
+      props: {
+        model: { style: {} },
+        lastValues: { style: {} },
+        isCompare: true,
+        name: 'style',
+        prop: 'style',
+      } as any,
+    });
+    await wrapper.find('.Layout').trigger('dblclick');
+    expect(wrapper.emitted('addDiffCount')).toBeTruthy();
+    expect(wrapper.emitted('addDiffCount')?.length).toBe(1);
+
+    await wrapper.find('.Background').trigger('dblclick');
+    expect(wrapper.emitted('addDiffCount')?.length).toBe(2);
+  });
 });
diff --git a/packages/editor/tests/unit/fields/StyleSetter/Layout.spec.ts b/packages/editor/tests/unit/fields/StyleSetter/Layout.spec.ts
index 4f699ff0..50fa38b4 100644
--- a/packages/editor/tests/unit/fields/StyleSetter/Layout.spec.ts
+++ b/packages/editor/tests/unit/fields/StyleSetter/Layout.spec.ts
@@ -13,8 +13,8 @@ vi.mock('@tmagic/form', () => ({
   defineFormItem: (cfg: any) => cfg,
   MContainer: defineComponent({
     name: 'FakeMContainer',
-    props: ['config', 'model', 'size', 'disabled'],
-    emits: ['change'],
+    props: ['config', 'model', 'lastValues', 'isCompare', 'size', 'disabled'],
+    emits: ['change', 'addDiffCount'],
     setup(_p, { emit }) {
       return () =>
         h(
@@ -22,6 +22,7 @@ vi.mock('@tmagic/form', () => ({
           {
             class: 'fake-mcontainer',
             onClick: () => emit('change', 'val', { propPath: 'p' }),
+            onDblclick: () => emit('addDiffCount'),
           },
           'mc',
         );
@@ -32,7 +33,7 @@ vi.mock('@tmagic/form', () => ({
 vi.mock('@editor/fields/StyleSetter/components/Box.vue', () => ({
   default: defineComponent({
     name: 'FakeBox',
-    props: ['model', 'size', 'disabled'],
+    props: ['model', 'lastValues', 'isCompare', 'size', 'disabled'],
     emits: ['change'],
     setup(_p, { emit }) {
       return () =>
@@ -110,4 +111,39 @@ describe('StyleSetter/Layout.vue', () => {
     const values = displayItem.options.map((o: any) => o.value);
     expect(values).toEqual(['inline', 'flex', 'block', 'inline-block', 'none']);
   });
+
+  test('lastValues/isCompare 透传到 MContainer 与 Box', () => {
+    const wrapper = mount(Layout, {
+      props: {
+        values: { position: 'static', display: 'flex' },
+        lastValues: { position: 'relative', display: 'block' },
+        isCompare: true,
+      } as any,
+    });
+    const container = wrapper.findComponent({ name: 'FakeMContainer' });
+    expect(container.props('lastValues')).toEqual({ position: 'relative', display: 'block' });
+    expect(container.props('isCompare')).toBe(true);
+    const box = wrapper.findComponent({ name: 'FakeBox' });
+    expect(box.props('lastValues')).toEqual({ position: 'relative', display: 'block' });
+    expect(box.props('isCompare')).toBe(true);
+  });
+
+  test('未传 lastValues 时为 undefined / isCompare 默认 false', () => {
+    const wrapper = mount(Layout, {
+      props: { values: { position: 'static', display: 'flex' } } as any,
+    });
+    const container = wrapper.findComponent({ name: 'FakeMContainer' });
+    expect(container.props('lastValues')).toBeUndefined();
+    // Boolean 类型 prop 未传时 Vue 默认为 false
+    expect(container.props('isCompare')).toBe(false);
+  });
+
+  test('MContainer 的 addDiffCount 事件向上冒泡', async () => {
+    const wrapper = mount(Layout, {
+      props: { values: { position: 'static', display: 'flex' } } as any,
+    });
+    await wrapper.find('.fake-mcontainer').trigger('dblclick');
+    expect(wrapper.emitted('addDiffCount')).toBeTruthy();
+    expect(wrapper.emitted('addDiffCount')?.length).toBe(1);
+  });
 });
diff --git a/packages/editor/tests/unit/fields/StyleSetter/Position.spec.ts b/packages/editor/tests/unit/fields/StyleSetter/Position.spec.ts
index b2b26dcb..c3bb435b 100644
--- a/packages/editor/tests/unit/fields/StyleSetter/Position.spec.ts
+++ b/packages/editor/tests/unit/fields/StyleSetter/Position.spec.ts
@@ -13,8 +13,8 @@ vi.mock('@tmagic/form', () => ({
   defineFormItem: (cfg: any) => cfg,
   MContainer: defineComponent({
     name: 'FakeMContainer',
-    props: ['config', 'model', 'size', 'disabled'],
-    emits: ['change'],
+    props: ['config', 'model', 'lastValues', 'isCompare', 'size', 'disabled'],
+    emits: ['change', 'addDiffCount'],
     setup(props, { emit }) {
       return () =>
         h(
@@ -22,6 +22,7 @@ vi.mock('@tmagic/form', () => ({
           {
             class: 'fake-mcontainer',
             onClick: () => emit('change', 'val', { propPath: 'p' }),
+            onDblclick: () => emit('addDiffCount'),
           },
           JSON.stringify(props.config?.items?.length || 0),
         );
@@ -62,4 +63,26 @@ describe('StyleSetter/Position.vue', () => {
     const rowItems = config.items.filter((it: any) => it.type === 'row');
     expect(rowItems[0].display()).toBe(true);
   });
+
+  test('lastValues/isCompare 透传到 MContainer', () => {
+    const wrapper = mount(Position, {
+      props: {
+        values: { position: 'absolute' },
+        lastValues: { position: 'static' },
+        isCompare: true,
+      } as any,
+    });
+    const container = wrapper.findComponent({ name: 'FakeMContainer' });
+    expect(container.props('lastValues')).toEqual({ position: 'static' });
+    expect(container.props('isCompare')).toBe(true);
+  });
+
+  test('MContainer 的 addDiffCount 事件向上冒泡', async () => {
+    const wrapper = mount(Position, {
+      props: { values: { position: 'absolute' } } as any,
+    });
+    await wrapper.find('.fake-mcontainer').trigger('dblclick');
+    expect(wrapper.emitted('addDiffCount')).toBeTruthy();
+    expect(wrapper.emitted('addDiffCount')?.length).toBe(1);
+  });
 });
diff --git a/packages/editor/tests/unit/fields/StyleSetter/components/Border.spec.ts b/packages/editor/tests/unit/fields/StyleSetter/components/Border.spec.ts
index 0c50dc47..df0f5d71 100644
--- a/packages/editor/tests/unit/fields/StyleSetter/components/Border.spec.ts
+++ b/packages/editor/tests/unit/fields/StyleSetter/components/Border.spec.ts
@@ -13,8 +13,8 @@ vi.mock('@tmagic/form', () => ({
   defineFormItem: (cfg: any) => cfg,
   MContainer: defineComponent({
     name: 'MContainer',
-    props: ['config', 'model', 'size', 'disabled'],
-    emits: ['change'],
+    props: ['config', 'model', 'lastValues', 'isCompare', 'size', 'disabled'],
+    emits: ['change', 'addDiffCount'],
     setup(_props, { expose }) {
       expose({ trigger: () => null });
       return () => h('div', { class: 'm-container' });
@@ -61,4 +61,25 @@ describe('StyleSetter Border', () => {
     await wrapper.find('.border-icon-right').trigger('click');
     expect(wrapper.find('.border-icon-right').classes()).toContain('active');
   });
+
+  test('lastValues/isCompare 透传到 MContainer', () => {
+    const wrapper = mount(Border, {
+      props: {
+        model: { borderWidth: '2px' },
+        lastValues: { borderWidth: '1px' },
+        isCompare: true,
+      } as any,
+    });
+    const container = wrapper.findComponent({ name: 'MContainer' });
+    expect(container.props('lastValues')).toEqual({ borderWidth: '1px' });
+    expect(container.props('isCompare')).toBe(true);
+  });
+
+  test('MContainer 的 addDiffCount 事件向上冒泡', () => {
+    const wrapper = mount(Border, { props: { model: {} } });
+    const container = wrapper.findComponent({ name: 'MContainer' });
+    container.vm.$emit('addDiffCount');
+    expect(wrapper.emitted('addDiffCount')).toBeTruthy();
+    expect(wrapper.emitted('addDiffCount')?.length).toBe(1);
+  });
 });
diff --git a/packages/editor/tests/unit/fields/StyleSetter/pro.spec.ts b/packages/editor/tests/unit/fields/StyleSetter/pro.spec.ts
index 858d9aa2..fca2414f 100644
--- a/packages/editor/tests/unit/fields/StyleSetter/pro.spec.ts
+++ b/packages/editor/tests/unit/fields/StyleSetter/pro.spec.ts
@@ -17,8 +17,8 @@ vi.mock('@tmagic/form', () => ({
   defineFormItem: (cfg: any) => cfg,
   MContainer: defineComponent({
     name: 'MContainer',
-    props: ['config', 'model', 'size', 'disabled'],
-    emits: ['change'],
+    props: ['config', 'model', 'lastValues', 'isCompare', 'size', 'disabled'],
+    emits: ['change', 'addDiffCount'],
     setup() {
       return () => h('div', { class: 'm-container' });
     },
@@ -28,7 +28,7 @@ vi.mock('@tmagic/form', () => ({
 vi.mock('@editor/fields/StyleSetter/components/Box.vue', () => ({
   default: defineComponent({
     name: 'StyleBox',
-    props: ['model', 'size', 'disabled'],
+    props: ['model', 'lastValues', 'isCompare', 'size', 'disabled'],
     emits: ['change'],
     setup() {
       return () => h('div', { class: 'fake-box' });
@@ -39,8 +39,8 @@ vi.mock('@editor/fields/StyleSetter/components/Box.vue', () => ({
 vi.mock('@editor/fields/StyleSetter/components/Border.vue', () => ({
   default: defineComponent({
     name: 'StyleBorder',
-    props: ['model', 'size', 'disabled'],
-    emits: ['change'],
+    props: ['model', 'lastValues', 'isCompare', 'size', 'disabled'],
+    emits: ['change', 'addDiffCount'],
     setup() {
       return () => h('div', { class: 'fake-border' });
     },
@@ -88,4 +88,66 @@ describe('StyleSetter pro 组件', () => {
     const wrapper = mount(BorderPro, { props: { values: {} } });
     expect(wrapper.find('.fake-border').exists()).toBe(true);
   });
+
+  test.each([
+    ['Background', Background],
+    ['BorderPro', BorderPro],
+    ['Font', Font],
+    ['Layout', Layout],
+    ['Transform', Transform],
+  ])('%s 透传 lastValues/isCompare 给 MContainer', (_name, comp) => {
+    const wrapper = mount(comp as any, {
+      props: {
+        values: { color: 'red' },
+        lastValues: { color: 'blue' },
+        isCompare: true,
+      },
+    });
+    const container = wrapper.findComponent({ name: 'MContainer' });
+    expect(container.props('lastValues')).toEqual({ color: 'blue' });
+    expect(container.props('isCompare')).toBe(true);
+  });
+
+  test.each([
+    ['Background', Background],
+    ['BorderPro', BorderPro],
+    ['Font', Font],
+    ['Layout', Layout],
+    ['Transform', Transform],
+  ])('%s 冒泡 MContainer 的 addDiffCount 事件', (_name, comp) => {
+    const wrapper = mount(comp as any, { props: { values: {} } });
+    const container = wrapper.findComponent({ name: 'MContainer' });
+    container.vm.$emit('addDiffCount');
+    expect(wrapper.emitted('addDiffCount')).toBeTruthy();
+    expect(wrapper.emitted('addDiffCount')?.length).toBe(1);
+  });
+
+  test('Layout 透传 lastValues/isCompare 给 Box', () => {
+    const wrapper = mount(Layout, {
+      props: {
+        values: { position: 'static' } as any,
+        lastValues: { position: 'static' } as any,
+        isCompare: true,
+      },
+    });
+    const box = wrapper.findComponent({ name: 'StyleBox' });
+    expect(box.props('lastValues')).toEqual({ position: 'static' });
+    expect(box.props('isCompare')).toBe(true);
+  });
+
+  test('BorderPro 透传 lastValues/isCompare 给 Border 子组件，并冒泡其 addDiffCount', () => {
+    const wrapper = mount(BorderPro, {
+      props: {
+        values: { borderRadius: '4px' } as any,
+        lastValues: { borderRadius: '2px' } as any,
+        isCompare: true,
+      },
+    });
+    const border = wrapper.findComponent({ name: 'StyleBorder' });
+    expect(border.props('lastValues')).toEqual({ borderRadius: '2px' });
+    expect(border.props('isCompare')).toBe(true);
+
+    border.vm.$emit('addDiffCount');
+    expect(wrapper.emitted('addDiffCount')).toBeTruthy();
+  });
 });