@tmagic/form 1.8.0-beta.1 → 1.8.0-beta.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.1",
+  "version": "1.8.0-beta.10",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -50,11 +50,11 @@
     "@vue/test-utils": "^2.4.6"
   },
   "peerDependencies": {
-    "vue": "^3.5.34",
+    "vue": "^3.5.38",
     "typescript": "^6.0.3",
-    "@tmagic/design": "1.8.0-beta.1",
-    "@tmagic/form-schema": "1.8.0-beta.1",
-    "@tmagic/utils": "1.8.0-beta.1"
+    "@tmagic/form-schema": "1.8.0-beta.10",
+    "@tmagic/utils": "1.8.0-beta.10",
+    "@tmagic/design": "1.8.0-beta.10"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -22,7 +22,11 @@
         :step-active="stepActive"
         :size="size"
         @change="changeHandler"
-      ></Container>
+      >
+        <template v-if="$slots.label" #label="labelProps">
+          <slot name="label" v-bind="labelProps"></slot>
+        </template>
+      </Container>
     </template>
   </TMagicForm>
 </template>
@@ -37,12 +41,23 @@ import { setValueByKeyPath } from '@tmagic/utils';
 import Container from './containers/Container.vue';
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
-import type { ChangeRecord, ContainerChangeEventData, FormConfig, FormState, FormValue, ValidateError } from './schema';
+import type {
+  ChangeRecord,
+  ContainerChangeEventData,
+  FormConfig,
+  FormSlots,
+  FormState,
+  FormValue,
+  ValidateError,
+} from './schema';
+import { FORM_DIFF_CONFIG_KEY } from './schema';
 
 defineOptions({
   name: 'MForm',
 });
 
+defineSlots<FormSlots>();
+
 const props = withDefaults(
   defineProps<{
     /** 表单配置 */
@@ -64,7 +79,41 @@ const props = withDefaults(
     keyProp?: string;
     popperClass?: string;
     preventSubmitDefault?: boolean;
+    /**
+     * 表单校验失败时，错误提示前缀是否使用字段的 text 文案（通过 `getTextByName` 从 config 中查找）。
+     *
+     * - `true`（默认）：错误提示形如 `字段文案 -> 错误信息`，找不到 text 时回退为字段 name；
+     * - `false`：跳过查找，直接使用字段 name 作为错误提示前缀（形如 `字段name -> 错误信息`）。
+     */
+    useFieldTextInError?: boolean;
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 自定义"是否展示对比内容"的判断函数（仅在 `isCompare === true` 时生效）。
+     *
+     * - 不传：使用默认逻辑 `!isEqual(curValue, lastValue)`；
+     * - 传函数：完全以函数返回值为准，返回 `true` 才展示前后两份对比内容。
+     *
+     * 通过 provide 下发给所有层级的 Container（含嵌套在容器组件内部的 Container），
+     * 调用方只需在 MForm 这一层传一次即可对整棵表单生效。
+     *
+     * 典型场景：某些字段语义上相等但结构不同（例如 `code-select` 字段中 `''` 与
+     * `{ hookType: 'code', hookData: [] }` 应视为相等），调用方在此处显式声明，
+     * 避免被 lodash `isEqual` 误判为差异。
+     */
+    showDiff?: (_data: { curValue: any; lastValue: any; config: any }) => boolean;
+    /**
+     * 自定义「自接管对比」的字段类型（仅在对比模式下生效）。
+     *
+     * 自接管对比的字段不会渲染前后两份独立组件，而是只渲染一次并由字段组件内部展示前后差异
+     * （如 vs-code 使用 monaco diff 编辑器；event-select / code-select-col 等复合字段逐项展示差异）。
+     *
+     * 支持两种形式：
+     * - 传数组：在内置类型基础上「追加」这些类型；
+     * - 传函数：入参为内置类型数组，返回值作为「最终」完整列表（可完全替换内置项）。
+     *
+     * 通过 provide 下发，对整棵表单的所有层级 Container 生效，只需在 MForm 这一层传一次。
+     */
+    selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
   }>(),
   {
     config: () => [],
@@ -79,6 +128,7 @@ const props = withDefaults(
     inline: false,
     labelPosition: 'right',
     keyProp: '__key',
+    useFieldTextInError: true,
   },
 );
 
@@ -201,6 +251,17 @@ watchEffect(async (onCleanup) => {
 
 provide('mForm', formState);
 
+// 对比相关配置单独通过 provide 下发，所有层级的 Container 通过 inject 获取，无需逐层透传 prop。
+// 用 getter 对象保证读取时回到最新的 props 值，维持响应式。
+provide(FORM_DIFF_CONFIG_KEY, {
+  get showDiff() {
+    return props.showDiff;
+  },
+  get selfDiffFieldTypes() {
+    return props.selfDiffFieldTypes;
+  },
+});
+
 const changeRecords = shallowRef<ChangeRecord[]>([]);
 
 watch(
@@ -331,7 +392,7 @@ defineExpose({
       Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
         (ValidateError as ValidateError[]).forEach(({ field, message }) => {
           const name = field || prop;
-          const text = getTextByName(name, props.config) || name;
+          const text = (props.useFieldTextInError ? getTextByName(name, props.config) : undefined) || name;
 
           error.push(`${text} -> ${message}`);
         });

package/src/FormBox.vue

@@ -13,6 +13,7 @@
           :label-position="labelPosition"
           :inline="inline"
           :prevent-submit-default="preventSubmitDefault"
+          :use-field-text-in-error="useFieldTextInError"
           :extend-state="extendState"
           @change="changeHandler"
         ></Form>
@@ -61,12 +62,15 @@ const props = withDefaults(
     inline?: boolean;
     labelPosition?: string;
     preventSubmitDefault?: boolean;
+    /** 透传给内部 `MForm`，控制表单校验失败时错误提示前缀是否使用字段的 text 文案 */
+    useFieldTextInError?: boolean;
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],
     values: () => ({}),
     confirmText: '确定',
+    useFieldTextInError: true,
   },
 );
 

package/src/FormDialog.vue

@@ -31,6 +31,7 @@
         :label-position="labelPosition"
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
+        :use-field-text-in-error="useFieldTextInError"
         :extend-state="extendState"
         @change="changeHandler"
       ></Form>
@@ -96,6 +97,8 @@ const props = withDefaults(
     destroyOnClose?: boolean;
     showClose?: boolean;
     showCancel?: boolean;
+    /** 透传给内部 `MForm`，控制表单校验失败时错误提示前缀是否使用字段的 text 文案 */
+    useFieldTextInError?: boolean;
     /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
@@ -108,6 +111,7 @@ const props = withDefaults(
     destroyOnClose: false,
     showClose: true,
     showCancel: true,
+    useFieldTextInError: true,
   },
 );
 

package/src/FormDrawer.vue

@@ -28,6 +28,7 @@
         :label-position="labelPosition"
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
+        :use-field-text-in-error="useFieldTextInError"
         :extend-state="extendState"
         @change="changeHandler"
       ></Form>
@@ -82,6 +83,8 @@ withDefaults(
     inline?: boolean;
     labelPosition?: string;
     preventSubmitDefault?: boolean;
+    /** 透传给内部 `MForm`，控制表单校验失败时错误提示前缀是否使用字段的 text 文案 */
+    useFieldTextInError?: boolean;
     /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
     beforeClose?: (_done: (_cancel?: boolean) => void) => void;
     /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
@@ -92,6 +95,7 @@ withDefaults(
     config: () => [],
     values: () => ({}),
     confirmText: '确定',
+    useFieldTextInError: true,
   },
 );
 

package/src/containers/Container.vue

@@ -25,13 +25,15 @@
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
         <template #label>
-          <FormLabel
-            :tip="config.tip"
-            :type="type"
-            :use-label="(config as CheckboxConfig).useLabel"
-            :label-title="config.labelTitle"
-            :text="text"
-          ></FormLabel>
+          <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
+            <FormLabel
+              :tip="config.tip"
+              :type="type"
+              :use-label="(config as CheckboxConfig).useLabel"
+              :label-title="config.labelTitle"
+              :text="text"
+            ></FormLabel>
+          </slot>
         </template>
 
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
@@ -71,68 +73,126 @@
 
     <!-- 对比 -->
     <template v-else-if="type && display && showDiff">
-      <!-- 上次内容 -->
+      <!-- 自接管对比的字段类型（如 vs-code）：只渲染一次组件，由字段内部用 diff 编辑器/视图自行展示前后差异 -->
       <TMagicFormItem
+        v-if="isSelfDiffField"
         v-bind="formItemProps"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
+        :class="{
+          'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text,
+          'self-diff': true,
+        }"
       >
         <template #label>
-          <FormLabel
-            :tip="config.tip"
-            :type="type"
-            :use-label="(config as CheckboxConfig).useLabel"
-            :label-title="config.labelTitle"
-            :text="text"
-          ></FormLabel>
+          <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
+            <FormLabel
+              :tip="config.tip"
+              :type="type"
+              :use-label="(config as CheckboxConfig).useLabel"
+              :label-title="config.labelTitle"
+              :text="text"
+            ></FormLabel>
+          </slot>
         </template>
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
-          <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
+          <component
+            v-bind="fieldsProps"
+            :is="tagName"
+            :model="model"
+            :last-values="lastValues"
+            :is-compare="isCompare"
+            @change="onChangeHandler"
+          ></component>
           <template #content>
             <div v-html="tooltip.text"></div>
           </template>
         </TMagicTooltip>
 
-        <component v-else v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
+        <component
+          v-else
+          v-bind="fieldsProps"
+          :is="tagName"
+          :model="model"
+          :last-values="lastValues"
+          :is-compare="isCompare"
+          @change="onChangeHandler"
+        ></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
-        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
-        <template #content>
-          <div v-html="config.tip"></div>
-        </template>
-      </TMagicTooltip>
+      <!-- 普通字段：渲染前后两份独立的组件用于对比 -->
+      <template v-else>
+        <!-- 上次内容 -->
+        <TMagicFormItem
+          v-bind="formItemProps"
+          :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">
+              <FormLabel
+                :tip="config.tip"
+                :type="type"
+                :use-label="(config as CheckboxConfig).useLabel"
+                :label-title="config.labelTitle"
+                :text="text"
+              ></FormLabel>
+            </slot>
+          </template>
+          <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
+            <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
+            <template #content>
+              <div v-html="tooltip.text"></div>
+            </template>
+          </TMagicTooltip>
 
-      <!-- 当前内容 -->
-      <TMagicFormItem
-        v-bind="formItemProps"
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
-      >
-        <template #label>
-          <FormLabel
-            :tip="config.tip"
-            :type="type"
-            :use-label="(config as CheckboxConfig).useLabel"
-            :label-title="config.labelTitle"
-            :text="text"
-          ></FormLabel>
-        </template>
-        <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
-          <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
+          <component
+            v-else
+            v-bind="fieldsProps"
+            :is="tagName"
+            :model="lastValues"
+            @change="onChangeHandler"
+          ></component>
+        </TMagicFormItem>
+
+        <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
+          <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
           <template #content>
-            <div v-html="tooltip.text"></div>
+            <div v-html="config.tip"></div>
           </template>
         </TMagicTooltip>
 
-        <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
-      </TMagicFormItem>
-
-      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
-        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
-        <template #content>
-          <div v-html="config.tip"></div>
-        </template>
-      </TMagicTooltip>
+        <!-- 当前内容 -->
+        <TMagicFormItem
+          v-bind="formItemProps"
+          :style="config.tip ? 'flex: 1' : ''"
+          :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">
+              <FormLabel
+                :tip="config.tip"
+                :type="type"
+                :use-label="(config as CheckboxConfig).useLabel"
+                :label-title="config.labelTitle"
+                :text="text"
+              ></FormLabel>
+            </slot>
+          </template>
+          <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
+            <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
+            <template #content>
+              <div v-html="tooltip.text"></div>
+            </template>
+          </TMagicTooltip>
+
+          <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
+        </TMagicFormItem>
+
+        <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
+          <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
+          <template #content>
+            <div v-html="config.tip"></div>
+          </template>
+        </TMagicTooltip>
+      </template>
     </template>
 
     <template v-else-if="items && display">
@@ -152,7 +212,11 @@
           :prop="itemProp"
           @change="onChangeHandler"
           @addDiffCount="onAddDiffCount"
-        ></Container>
+        >
+          <template v-if="$slots.label" #label="labelProps">
+            <slot name="label" v-bind="labelProps"></slot>
+          </template>
+        </Container>
       </template>
     </template>
 
@@ -178,11 +242,14 @@ import type {
   ComponentConfig,
   ContainerChangeEventData,
   ContainerCommonConfig,
+  FormDiffConfig,
   FormItemConfig,
+  FormSlots,
   FormState,
   FormValue,
   ToolTipConfigType,
 } from '../schema';
+import { FORM_DIFF_CONFIG_KEY } from '../schema';
 import { getField } from '../utils/config';
 import { createObjectProp, display as displayFunction, filterFunction, getRules } from '../utils/form';
 
@@ -192,6 +259,8 @@ defineOptions({
   name: 'MFormContainer',
 });
 
+defineSlots<FormSlots>();
+
 const props = withDefaults(
   defineProps<{
     /** 表单值 */
@@ -224,14 +293,30 @@ const emit = defineEmits<{
 
 const mForm = inject<FormState | undefined>('mForm');
 
+// 对比相关配置由 MForm 通过 provide 下发，这里直接 inject，无需逐层透传 prop。
+const diffConfig = inject<FormDiffConfig>(FORM_DIFF_CONFIG_KEY, {});
+
 const expand = ref(false);
 
 const name = computed(() => props.config.name || '');
+
 // 是否展示两个版本的对比内容
+//
+// 默认逻辑：在对比模式下用 lodash isEqual 比较当前值与历史值，不相等则展示对比。
+// 若调用方通过 MForm 的 `showDiff` 注入了自定义判断函数，则完全以其返回值为准，
+// 便于业务侧自定义"语义上相等"的特殊场景（例如空字符串与空 hook 结构）。
 const showDiff = computed(() => {
   if (!props.isCompare) return false;
-  const curValue = name.value ? props.model[name.value] : props.model;
-  const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+  if (!name.value) return false;
+
+  const curValue = props.model[name.value];
+  const lastValue = props.lastValues[name.value];
+
+  const customShowDiff = diffConfig.showDiff;
+  if (typeof customShowDiff === 'function') {
+    return Boolean(customShowDiff({ curValue, lastValue, config: props.config }));
+  }
+
   return !isEqual(curValue, lastValue);
 });
 
@@ -268,6 +353,45 @@ const tagName = computed(() => {
   return getField(type.value || 'container') || `m-${items.value ? 'form' : 'fields'}-${type.value}`;
 });
 
+/**
+ * 自接管对比的字段类型白名单。
+ *
+ * 这类字段在 `isCompare === true` 且存在差异时，不再由 Container 渲染前后两份独立组件来对比，
+ * 而是只渲染一次组件，将 `model` / `lastValues` / `isCompare` 一并传给字段组件，
+ * 由字段组件内部自行展示前后差异（典型场景：vs-code 字段使用 monaco 自带的 diff 编辑器）。
+ *
+ * 这样做的好处：
+ * 1. 避免重型字段（如 monaco 编辑器）在对比模式下被实例化两次，节省资源；
+ * 2. 提供更专业的对比视觉效果（如 monaco diff 的行级高亮、左右滚动同步等）。
+ *
+ * 注意：像 `event-select` / `code-select-col` 这类内部由列表 / 嵌套子表单组成的复合字段，若按默认逻辑
+ * 渲染前后两份独立组件，会出现两套下拉框 + 两份参数表单（或两套「添加事件」按钮、两份完整面板），
+ * 体验很差。这类字段在内部把 `is-compare`/`lastValues` 透传给子级容器，由子级逐项展示差异，
+ * 因此同样归类为自接管对比字段。
+ */
+const DEFAULT_SELF_DIFF_FIELD_TYPES = ['vs-code', 'event-select', 'code-select-col', 'code-select'];
+
+// 最终生效的自接管对比字段类型集合。
+//
+// - 未自定义：使用内置默认类型；
+// - 自定义传数组：在内置类型基础上「追加」；
+// - 自定义传函数：以函数返回值为「最终」完整列表（可完全替换内置项）。
+const effectiveSelfDiffFieldTypes = computed<Set<string>>(() => {
+  const custom = diffConfig.selfDiffFieldTypes;
+
+  if (typeof custom === 'function') {
+    return new Set(custom([...DEFAULT_SELF_DIFF_FIELD_TYPES]));
+  }
+
+  if (Array.isArray(custom)) {
+    return new Set([...DEFAULT_SELF_DIFF_FIELD_TYPES, ...custom]);
+  }
+
+  return new Set(DEFAULT_SELF_DIFF_FIELD_TYPES);
+});
+
+const isSelfDiffField = computed(() => effectiveSelfDiffFieldTypes.value.has(type.value));
+
 const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 
 const text = computed(() => filterFunction(mForm, props.config.text, props));

package/src/containers/Fieldset.vue

@@ -7,11 +7,11 @@
         :true-value="checkboxTrueValue"
         :false-value="checkboxFalseValue"
         @update:modelValue="valueChangeHandler"
-        ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
+        ><span v-html="legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></TMagicCheckbox>
     </component>
     <legend v-else>
-      <span v-html="config.legend"></span>
+      <span v-html="legend"></span>
       <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
     </legend>
 
@@ -63,6 +63,7 @@ import { computed, inject } from 'vue';
 import { TMagicCheckbox } from '@tmagic/design';
 
 import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
@@ -99,6 +100,8 @@ const mForm = inject<FormState | undefined>('mForm');
 
 const name = computed(() => props.config.name || '');
 
+const legend = computed(() => filterFunction<string>(mForm, props.config.legend, props));
+
 const checkboxName = computed(() => {
   if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') {
     return props.config.checkbox.name;

package/src/containers/GroupList.vue

@@ -26,7 +26,7 @@
       @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
-    <div class="m-fields-group-list-footer">
+    <div class="m-fields-group-list-footer" v-if="!isCompare">
       <slot name="toggle-button"></slot>
       <div style="display: flex; justify-content: flex-end; flex: 1">
         <slot name="add-button"></slot>

package/src/containers/GroupListItem.vue

@@ -7,6 +7,7 @@
         </TMagicButton>
 
         <TMagicButton
+          v-if="!isCompare"
           v-show="showDelete"
           type="danger"
           size="small"
@@ -17,7 +18,7 @@
         ></TMagicButton>
 
         <TMagicButton
-          v-if="copyable"
+          v-if="copyable && !isCompare"
           link
           size="small"
           type="primary"
@@ -27,7 +28,7 @@
           >复制</TMagicButton
         >
 
-        <template v-if="movable">
+        <template v-if="movable && !isCompare">
           <TMagicButton
             v-show="index !== 0"
             link
@@ -49,7 +50,7 @@
         </template>
 
         <TMagicPopover
-          v-if="config.moveSpecifyLocation"
+          v-if="config.moveSpecifyLocation && !isCompare"
           trigger="click"
           placement="top"
           width="200"

package/src/containers/Tabs.vue

@@ -19,7 +19,10 @@
       :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
       v-bind="
-        tabPaneComponent?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+        tabPaneComponent?.props({
+          name: filter(tab.status) || tabIndex.toString(),
+          lazy: isCompare ? false : tab.lazy || false,
+        }) || {}
       "
     >
       <template #label>
@@ -76,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';
@@ -172,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) => {

package/src/containers/table/Table.vue

@@ -44,7 +44,7 @@
               {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
             </TMagicButton>
             <TMagicUpload
-              v-if="importable"
+              v-if="importable && !isCompare"
               style="display: inline-block"
               ref="excelBtn"
               action="/noop"
@@ -54,11 +54,17 @@
             >
               <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
             </TMagicUpload>
-            <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler"
+            <TMagicButton
+              v-if="importable && !isCompare"
+              size="small"
+              type="warning"
+              :disabled="disabled"
+              plain
+              @click="clearHandler"
               >清空</TMagicButton
             >
           </div>
-          <slot name="add-button"></slot>
+          <slot name="add-button" v-if="!isCompare"></slot>
         </div>
 
         <div class="bottom" style="text-align: right" v-if="config.pagination">