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

package/src/fields/DataSourceFields.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="m-editor-data-source-fields">
-    <MagicTable :data="model[name]" :columns="fieldColumns" :border="true"></MagicTable>
+    <MagicTable :data="model[name]" :columns="displayColumns" :border="true"></MagicTable>
 
-    <div class="m-editor-data-source-fields-footer">
+    <div v-if="!isCompare" class="m-editor-data-source-fields-footer">
       <TMagicButton size="small" :disabled="disabled" plain @click="newFromJsonHandler()">快速添加</TMagicButton>
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, Ref, ref } from 'vue';
+import { computed, inject, Ref, ref } from 'vue';
 
 import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
@@ -84,6 +84,10 @@ const emit = defineEmits<{
 }>();
 
 const { uiService } = useServices();
+const mForm = inject<FormState | undefined>('mForm');
+
+/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+const isCompare = computed(() => Boolean(mForm?.isCompare));
 
 const fieldValues = ref<Record<string, any>>({});
 const fieldTitle = ref('');
@@ -176,6 +180,11 @@ const fieldColumns: ColumnConfig[] = [
   },
 ];
 
+/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+const displayColumns = computed<ColumnConfig[]>(() =>
+  isCompare.value ? fieldColumns.filter((col) => !col.actions) : fieldColumns,
+);
+
 const dataSourceFieldsConfig: FormConfig = [
   { name: 'index', type: 'hidden', filter: 'number', defaultValue: -1 },
   {

package/src/fields/DataSourceMethodSelect.vue

@@ -13,7 +13,7 @@
       ></MCascader>
 
       <TMagicTooltip
-        v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
+        v-if="model[name] && isCustomMethod && hasDataSourceSidePanel && !isCompare"
         :content="notEditable ? '查看' : '编辑'"
       >
         <TMagicButton class="m-fields-select-action-button" :size="size" @click="editCodeHandler">
@@ -81,6 +81,9 @@ const hasDataSourceSidePanel = computed(() =>
 
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
+/** 对比模式下隐藏查看/编辑操作按钮，仅保留只读展示。 */
+const isCompare = computed(() => Boolean(mForm?.isCompare));
+
 const dataSources = computed(() => dataSourceService.get('dataSources'));
 
 const isCustomMethod = computed(() => {

package/src/fields/DataSourceMethods.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="m-editor-data-source-methods">
-    <MagicTable :data="model[name]" :columns="methodColumns" :border="true"></MagicTable>
+    <MagicTable :data="model[name]" :columns="displayColumns" :border="true"></MagicTable>
 
-    <div class="m-editor-data-source-methods-footer">
+    <div v-if="!isCompare" class="m-editor-data-source-methods-footer">
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="createCodeHandler"
         >添加</TMagicButton
       >
@@ -21,12 +21,12 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, useTemplateRef } from 'vue';
+import { computed, inject, nextTick, ref, useTemplateRef } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import type { ContainerChangeEventData, DataSourceMethodsConfig, FieldProps } from '@tmagic/form';
+import type { ContainerChangeEventData, DataSourceMethodsConfig, FieldProps, FormState } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -42,6 +42,11 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
 
 const emit = defineEmits(['change']);
 
+const mForm = inject<FormState | undefined>('mForm');
+
+/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+const isCompare = computed(() => Boolean(mForm?.isCompare));
+
 const codeConfig = ref<Omit<CodeBlockContent, 'content'> & { content: string }>();
 const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
@@ -107,6 +112,11 @@ const methodColumns: ColumnConfig[] = [
   },
 ];
 
+/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+const displayColumns = computed<ColumnConfig[]>(() =>
+  isCompare.value ? methodColumns.filter((col) => !col.actions) : methodColumns,
+);
+
 const createCodeHandler = () => {
   codeConfig.value = {
     name: '',

package/src/fields/DataSourceMocks.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="m-editor-data-source-fields">
-    <MagicTable :data="model[name]" :columns="columns"></MagicTable>
+    <MagicTable :data="model[name]" :columns="displayColumns"></MagicTable>
 
-    <div class="m-editor-data-source-fields-footer">
+    <div v-if="!isCompare" class="m-editor-data-source-fields-footer">
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, Ref, ref } from 'vue';
+import { computed, inject, Ref, ref } from 'vue';
 
 import type { MockSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
@@ -54,6 +54,11 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMocksConfig>>(), {
 const emit = defineEmits(['change']);
 
 const { uiService } = useServices();
+const mForm = inject<FormState | undefined>('mForm');
+
+/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+const isCompare = computed(() => Boolean(mForm?.isCompare));
+
 const width = defineModel<number>('width', { default: 670 });
 
 const drawerTitle = ref('');
@@ -202,6 +207,11 @@ const columns: ColumnConfig[] = [
   },
 ];
 
+/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+const displayColumns = computed<ColumnConfig[]>(() =>
+  isCompare.value ? columns.filter((col) => !col.actions) : columns,
+);
+
 const newHandler = () => {
   const isFirstRow = props.model[props.name].length === 0;
   formValues.value = {

package/src/fields/DataSourceSelect.vue

@@ -11,7 +11,7 @@
       @change="changeHandler"
     ></MSelect>
 
-    <TMagicTooltip v-if="model[name] && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
+    <TMagicTooltip v-if="model[name] && hasDataSourceSidePanel && !isCompare" :content="notEditable ? '查看' : '编辑'">
       <TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler"
         ><MIcon :icon="!notEditable ? Edit : View"></MIcon
       ></TMagicButton>
@@ -56,6 +56,9 @@ const dataSources = computed(() => dataSourceService.get('dataSources'));
 
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
+/** 对比模式下隐藏查看/编辑操作按钮，仅保留只读展示。 */
+const isCompare = computed(() => Boolean(mForm?.isCompare));
+
 const hasDataSourceSidePanel = computed(() =>
   uiService.get('sideBarItems').find((item) => item.$key === SideItemKey.DATA_SOURCE),
 );

package/src/fields/EventSelect.vue

@@ -6,22 +6,32 @@
       :size="size"
       :disabled="disabled"
       :model="model"
+      :last-values="lastValues"
+      :is-compare="isCompareMode"
       :config="tableConfig"
       @change="onChangeHandler"
     ></MTable>
 
     <div v-else class="fullWidth">
-      <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
+      <TMagicButton
+        v-if="!isCompareMode"
+        class="create-button"
+        type="primary"
+        :size="size"
+        :disabled="disabled"
+        @click="addEvent()"
         >添加事件</TMagicButton
       >
       <MPanel
-        v-for="(cardItem, index) in model[name]"
-        :key="index"
+        v-for="entry in displayList"
+        :key="entry.index"
         :disabled="disabled"
         :size="size"
-        :prop="`${prop}.${index}`"
+        :prop="`${prop}.${entry.index}`"
         :config="actionsConfig"
-        :model="cardItem"
+        :model="entry.cardItem"
+        :last-values="entry.lastCardItem"
+        :is-compare="isCompareMode"
         :label-width="config.labelWidth || '100px'"
         @change="onChangeHandler"
       >
@@ -29,19 +39,22 @@
           <MFormContainer
             class="fullWidth"
             :config="eventNameConfig"
-            :model="cardItem"
+            :model="entry.cardItem"
+            :last-values="entry.lastCardItem"
+            :is-compare="isCompareMode"
             :disabled="disabled"
             :size="size"
-            :prop="`${prop}.${index}`"
+            :prop="`${prop}.${entry.index}`"
             @change="eventNameChangeHandler"
           ></MFormContainer>
           <TMagicButton
+            v-if="!isCompareMode"
             style="color: #f56c6c"
             link
             :icon="Delete"
             :disabled="disabled"
             :size="size"
-            @click="removeEvent(Number(index))"
+            @click="removeEvent(Number(entry.index))"
           ></TMagicButton>
         </template>
       </MPanel>
@@ -374,6 +387,42 @@ const isOldVersion = computed(() => {
   return !has(props.model[props.name][0], 'actions');
 });
 
+/**
+ * 对比模式判定：
+ *
+ * event-select 内部由「事件列表 + 嵌套子表单」组成，属于复合字段。父级 `MFormContainer` 已将其
+ * 归入「自接管对比字段」（见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），即对比时只渲染一次本组件，
+ * 并把当前值 `model` 与历史值 `lastValues` 一并传入，由本组件把 `is-compare`/`lastValues` 透传给
+ * 内部的 MPanel / MFormContainer，逐项（事件名、动作）展示前后差异。
+ *
+ * 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
+ */
+const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
+
+/**
+ * 待渲染的事件卡片列表。
+ *
+ * - 非对比模式：直接映射当前事件列表，`lastCardItem` 为空；
+ * - 对比模式：按索引对齐当前值与历史值，取两者长度的最大值，使得「新增」（仅当前有）与
+ *   「删除」（仅历史有）的事件都能被渲染出来；缺失的一侧用空对象兜底，从而让子级正确高亮差异。
+ */
+const displayList = computed<{ cardItem: any; lastCardItem: any; index: number }[]>(() => {
+  const current = props.model[props.name] || [];
+
+  if (!isCompareMode.value) {
+    return current.map((cardItem: any, index: number) => ({ cardItem, lastCardItem: undefined, index }));
+  }
+
+  const last = props.lastValues?.[props.name] || [];
+  const length = Math.max(current.length, last.length);
+
+  return Array.from({ length }, (_, index) => ({
+    cardItem: current[index] ?? {},
+    lastCardItem: last[index] ?? {},
+    index,
+  }));
+});
+
 // 添加事件
 const addEvent = () => {
   const defaultEvent = {

package/src/fields/KeyValue.vue

@@ -19,6 +19,7 @@
         ></TMagicInput>
 
         <TMagicButton
+          v-if="!isCompare"
           class="m-fields-key-value-delete"
           type="danger"
           :size="size"
@@ -30,7 +31,14 @@
         ></TMagicButton>
       </div>
 
-      <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
+      <TMagicButton
+        v-if="!isCompare"
+        type="primary"
+        :size="size"
+        :disabled="disabled"
+        plain
+        :icon="Plus"
+        @click="addHandler"
         >添加</TMagicButton
       >
     </div>
@@ -52,7 +60,7 @@
     ></MagicCodeEditor>
 
     <TMagicButton
-      v-if="config.advanced"
+      v-if="config.advanced && !isCompare"
       size="default"
       :disabled="disabled"
       link
@@ -63,11 +71,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { computed, inject, ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, KeyValueConfig } from '@tmagic/form';
+import type { FieldProps, FormState, KeyValueConfig } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -84,6 +92,11 @@ const emit = defineEmits<{
   change: [value: Record<string, any>];
 }>();
 
+const mForm = inject<FormState | undefined>('mForm');
+
+/** 对比模式下隐藏增删/代码切换等操作按钮，仅保留只读展示。 */
+const isCompare = computed(() => Boolean(mForm?.isCompare));
+
 const records = ref<[string, string][]>([]);
 const showCode = ref(false);
 

package/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>

package/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>

package/src/fields/StyleSetter/components/Box.vue

@@ -64,6 +64,8 @@ withDefaults(
     disabled?: boolean;
     size?: 'large' | 'default' | 'small';
     model: FormValue;
+    lastValues?: FormValue;
+    isCompare?: boolean;
   }>(),
   {},
 );

package/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>

package/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>

package/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>

package/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>

package/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>

package/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>