From d59428d2d63cd8131f169f1c2b002fd5f4934636 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 16 Oct 2025 21:03:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(form):=20=E4=BF=9D=E6=8C=81=E5=8D=95?=
 =?UTF-8?q?=E5=90=91=E6=95=B0=E6=8D=AE=E6=B5=81,=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=86=85=E9=83=A8=E7=9A=84=E7=BB=84=E4=BB=B6=E4=B8=8D=E5=8E=BB?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A1=A8=E5=8D=95=E7=9A=84=E5=80=BC,?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E9=80=9A=E8=BF=87chang=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E8=A1=A8=E5=8D=95=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form-schema/src/base.ts           |   6 +-
 packages/form/src/Form.vue                 |  15 +-
 packages/form/src/containers/Container.vue | 192 ++++++++-------------
 packages/form/src/containers/Fieldset.vue  |   2 +-
 packages/form/src/fields/Cascader.vue      |  41 +++--
 packages/form/src/fields/Checkbox.vue      |   4 +-
 packages/form/src/fields/CheckboxGroup.vue |   2 +-
 packages/form/src/fields/ColorPicker.vue   |   4 +-
 packages/form/src/fields/Date.vue          |   4 +-
 packages/form/src/fields/DateTime.vue      |   4 +-
 packages/form/src/fields/Daterange.vue     |   4 +-
 packages/form/src/fields/Number.vue        |   4 +-
 packages/form/src/fields/NumberRange.vue   |  12 +-
 packages/form/src/fields/RadioGroup.vue    |  20 +--
 packages/form/src/fields/Select.vue        |   4 +-
 packages/form/src/fields/Switch.vue        |   4 +-
 packages/form/src/fields/Text.vue          |   4 +-
 packages/form/src/fields/Textarea.vue      |   4 +-
 packages/form/src/fields/Time.vue          |   4 +-
 packages/form/src/fields/Timerange.vue     |   4 +-
 packages/form/src/theme/container.scss     |  17 ++
 packages/form/tests/unit/Form.spec.ts      | 190 +++++++++++++++++++-
 22 files changed, 360 insertions(+), 185 deletions(-)

diff --git a/packages/form-schema/src/base.ts b/packages/form-schema/src/base.ts
index e2326be4..57a8ea43 100644
--- a/packages/form-schema/src/base.ts
+++ b/packages/form-schema/src/base.ts
@@ -15,13 +15,14 @@ export interface ChangeRecord {
 
 export interface OnChangeHandlerData {
   model: FormValue;
-  values?: FormValue;
+  values?: Readonly<FormValue>;
   parent?: FormValue;
   formValue?: FormValue;
-  config: any;
+  config: Readonly<any>;
   prop: string;
   changeRecords: ChangeRecord[];
   setModel: (prop: string, value: any) => void;
+  setFromValue: (prop: string, value: any) => void;
 }
 
 export type FormValue = Record<string | number, any>;
@@ -385,6 +386,7 @@ export interface NumberConfig extends FormItem {
  */
 export interface NumberRangeConfig extends FormItem {
   type?: 'number-range';
+  clearable?: boolean;
 }
 
 /**
diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index 34c20ab7..ee3e7431 100644
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@@ -32,6 +32,7 @@ import { provide, reactive, ref, shallowRef, toRaw, watch, watchEffect } from 'v
 import { cloneDeep, isEqual } from 'lodash-es';
 
 import { TMagicForm, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import { setValueByKeyPath } from '@tmagic/utils';
 
 import Container from './containers/Container.vue';
 import { getConfig } from './utils/config';
@@ -173,7 +174,18 @@ watch(
 
 const changeHandler = (v: FormValue, eventData: ContainerChangeEventData) => {
   if (eventData.changeRecords?.length) {
-    changeRecords.value.push(...eventData.changeRecords);
+    for (const record of eventData.changeRecords) {
+      if (record.propPath) {
+        const index = changeRecords.value.findIndex((item) => item.propPath === record.propPath);
+        if (index > -1) {
+          changeRecords.value[index] = record;
+        } else {
+          changeRecords.value.push(record);
+        }
+
+        setValueByKeyPath(record.propPath, record.value, values.value);
+      }
+    }
   }
   emit('change', values.value, eventData);
 };
@@ -201,6 +213,7 @@ defineExpose({
   submitForm: async (native?: boolean): Promise<any> => {
     try {
       await tMagicForm.value?.validate();
+      changeRecords.value = [];
       return native ? values.value : cloneDeep(toRaw(values.value));
     } catch (invalidFields: any) {
       emit('error', invalidFields);
diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index 55a1e21c..744db643 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -1,32 +1,18 @@
 <template>
   <div
-    v-if="config"
     :data-tmagic-id="config.id"
     :data-tmagic-form-item-prop="itemProp"
-    :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
-    :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
+    :class="`m-form-container m-container-${type || ''} ${config.className || ''}${config.tip ? ' has-tip' : ''}`"
   >
-    <m-fields-hidden
-      v-if="type === 'hidden'"
-      :model="model"
-      :config="config"
-      :name="config.name"
-      :disabled="disabled"
-      :prop="itemProp"
-    ></m-fields-hidden>
+    <m-fields-hidden v-if="type === 'hidden'" v-bind="fieldsProps" :model="model"></m-fields-hidden>
 
     <component
       v-else-if="items && !text && type && display"
-      :key="key(config)"
-      :size="size"
+      v-bind="fieldsProps"
       :is="tagName"
       :model="model"
       :last-values="lastValues"
       :is-compare="isCompare"
-      :config="config"
-      :disabled="disabled"
-      :name="name"
-      :prop="itemProp"
       :step-active="stepActive"
       :expand-more="expand"
       :label-width="itemLabelWidth"
@@ -35,45 +21,28 @@
     ></component>
 
     <template v-else-if="type && display && !showDiff">
-      <TMagicFormItem
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :label-position="config.labelPosition"
-        :rules="rule"
-      >
+      <TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
         <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
-            :key="key(config)"
-            :size="size"
+            v-bind="fieldsProps"
             :is="tagName"
             :model="model"
             :last-values="lastValues"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
             @change="onChangeHandler"
             @addDiffCount="onAddDiffCount"
           ></component>
-          <template #content>
+          <template #content v-if="tooltip">
             <div v-html="tooltip"></div>
           </template>
         </TMagicTooltip>
 
         <component
           v-else
-          :key="key(config)"
-          :size="size"
+          v-bind="fieldsProps"
           :is="tagName"
           :model="model"
           :last-values="lastValues"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
           @change="onChangeHandler"
           @addDiffCount="onAddDiffCount"
         ></component>
@@ -93,44 +62,18 @@
     <template v-else-if="type && display && showDiff">
       <!-- 上次内容 -->
       <TMagicFormItem
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :label-position="config.labelPosition"
-        :rules="rule"
-        style="background: #f7dadd"
+        v-bind="formItemProps"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
-          <component
-            :key="key(config)"
-            :size="size"
-            :is="tagName"
-            :model="lastValues"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
-            @change="onChangeHandler"
-          ></component>
-          <template #content>
+          <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
+          <template #content v-if="tooltip">
             <div v-html="tooltip"></div>
           </template>
         </TMagicTooltip>
 
-        <component
-          v-else
-          :key="key(config)"
-          :size="size"
-          :is="tagName"
-          :model="lastValues"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
-          @change="onChangeHandler"
-        ></component>
+        <component v-else v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
 
         <div v-if="extra" v-html="extra" class="m-form-tip"></div>
       </TMagicFormItem>
@@ -141,46 +84,22 @@
           <div v-html="config.tip"></div>
         </template>
       </TMagicTooltip>
+
       <!-- 当前内容 -->
       <TMagicFormItem
+        v-bind="formItemProps"
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :label-position="config.labelPosition"
-        :rules="rule"
-        style="background: #def7da"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
-          <component
-            :key="key(config)"
-            :size="size"
-            :is="tagName"
-            :model="model"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
-            @change="onChangeHandler"
-          ></component>
+          <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
           <template #content>
             <div v-html="tooltip"></div>
           </template>
         </TMagicTooltip>
 
-        <component
-          v-else
-          :key="key(config)"
-          :size="size"
-          :is="tagName"
-          :model="model"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
-          @change="onChangeHandler"
-        ></component>
+        <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
 
         <div v-if="extra" v-html="extra" class="m-form-tip"></div>
       </TMagicFormItem>
@@ -223,12 +142,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, toRaw, watch, watchEffect } from 'vue';
+import { computed, inject, readonly, ref, toRaw, watch, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
 
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
-import { setValueByKeyPath } from '@tmagic/utils';
 
 import type { ChildConfig, ContainerChangeEventData, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
@@ -334,6 +252,22 @@ const display = computed((): boolean => {
   return value;
 });
 
+const fieldsProps = computed(() => ({
+  size: props.size,
+  config: props.config,
+  name: name.value,
+  disabled: disabled.value,
+  prop: itemProp.value,
+  key: props.config[mForm?.keyProps],
+}));
+
+const formItemProps = computed(() => ({
+  prop: itemProp.value,
+  labelWidth: itemLabelWidth.value,
+  labelPosition: props.config.labelPosition,
+  rules: rule.value,
+}));
+
 const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
 
 watchEffect(() => {
@@ -406,8 +340,29 @@ const isValidName = () => {
   return true;
 };
 
+const createModelProxy = (
+  target: any,
+  setModelFn: (_key: string, _value: any) => void,
+  pathPrefix: string = '',
+): any => {
+  return new Proxy(target, {
+    get: (obj, key: string) => {
+      const value = obj[key];
+      if (value && typeof value === 'object') {
+        const newPath = pathPrefix ? `${pathPrefix}.${key}` : key;
+        return createModelProxy(value, setModelFn, newPath);
+      }
+      return value;
+    },
+    set: (obj, key: string, value) => {
+      setModelFn(pathPrefix ? `${pathPrefix}.${key}` : key, value);
+      return true;
+    },
+  });
+};
+
 const onChangeHandler = async function (v: any, eventData: ContainerChangeEventData = {}) {
-  const { filter, onChange, trim, dynamicKey } = props.config as any;
+  const { filter, onChange, trim } = props.config as any;
   let value: FormValue | number | string | any[] = toRaw(v);
   const changeRecords = eventData.changeRecords || [];
   const newChangeRecords = [...changeRecords];
@@ -416,20 +371,28 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
     value = filterHandler(filter, v);
 
     if (typeof onChange === 'function') {
+      const setModel = (key: string, value: any) => {
+        if (props.config.name) {
+          newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key), value });
+        } else {
+          newChangeRecords.push({ propPath: itemProp.value, value });
+        }
+      };
+
+      const setFormValue = (key: string, value: any) => {
+        newChangeRecords.push({ propPath: key, value });
+      };
+
       value =
         (await onChange(mForm, value, {
-          model: props.model,
-          values: mForm?.initValues,
-          formValue: mForm?.values,
+          model: createModelProxy(props.model, setModel),
+          values: mForm ? readonly(mForm.initValues) : null,
+          formValue: createModelProxy(mForm?.values || {}, setFormValue),
           prop: itemProp.value,
           config: props.config,
           changeRecords: newChangeRecords,
-          setModel: (key: string, value: any) => {
-            setValueByKeyPath(key, value, props.model);
-            if (props.config.name) {
-              newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key), value });
-            }
-          },
+          setModel,
+          setFormValue,
         })) ?? value;
     }
     value = trimHandler(trim, value) ?? value;
@@ -440,19 +403,10 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
   let valueProp = itemProp.value;
 
   if (hasModifyKey(eventData)) {
-    if (dynamicKey) {
-      props.model[eventData.modifyKey!] = value;
-    } else if (isValidName()) {
-      props.model[name.value][eventData.modifyKey!] = value;
-    }
-
     valueProp = valueProp ? `${valueProp}.${eventData.modifyKey}` : eventData.modifyKey!;
 
     // 需要清除掉modifyKey，不然往上层抛出后还会被认为需要修改
     delete eventData.modifyKey;
-  } else if (isValidName() && props.model !== value && (v !== value || props.model[name.value] !== value)) {
-    // field内容下包含field-link时，model===value, 这里避免循环引用
-    props.model[name.value] = value;
   }
 
   if (changeRecords.length === 0) {
diff --git a/packages/form/src/containers/Fieldset.vue b/packages/form/src/containers/Fieldset.vue
index c636d4b7..5d2cc617 100644
--- a/packages/form/src/containers/Fieldset.vue
+++ b/packages/form/src/containers/Fieldset.vue
@@ -2,7 +2,7 @@
   <fieldset v-if="name ? model[name] : model" class="m-fieldset" :style="show ? 'padding: 15px' : 'border: 0'">
     <component v-if="name && config.checkbox" :is="!show ? 'div' : 'legend'">
       <TMagicCheckbox
-        v-model="model[name].value"
+        :model-value="model[name].value"
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
         :true-value="1"
         :false-value="0"
diff --git a/packages/form/src/fields/Cascader.vue b/packages/form/src/fields/Cascader.vue
index fad3a5f6..5200bec7 100644
--- a/packages/form/src/fields/Cascader.vue
+++ b/packages/form/src/fields/Cascader.vue
@@ -1,6 +1,6 @@
 <template>
   <TMagicCascader
-    v-model="value"
+    :model-value="value"
     ref="tMagicCascader"
     style="width: 100%"
     clearable
@@ -15,6 +15,7 @@
       emitPath: config.emitPath ?? true,
       checkStrictly: checkStrictly ?? false,
     }"
+    @update:model-value="updateModelValueHandler"
     @change="changeHandler"
   ></TMagicCascader>
 </template>
@@ -51,22 +52,31 @@ const remoteData = ref<any>(null);
 const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
 const valueSeparator = computed(() => filterFunction<string>(mForm, props.config.valueSeparator, props));
 
-const value = computed({
-  get() {
-    if (typeof props.model[props.name] === 'string' && valueSeparator.value) {
-      return props.model[props.name].split(valueSeparator.value);
-    }
-    return props.model[props.name];
-  },
-  set(value) {
-    let result = value;
-    if (valueSeparator.value) {
-      result = value.join(valueSeparator.value);
-    }
-    props.model[props.name] = result;
-  },
+const value = computed(() => {
+  if (typeof props.model[props.name] === 'string' && valueSeparator.value) {
+    return props.model[props.name].split(valueSeparator.value);
+  }
+  return props.model[props.name];
 });
 
+const updateModelValueHandler = (value: string[] | number[] | any) => {
+  let result = value;
+  if (valueSeparator.value) {
+    result = value.join(valueSeparator.value);
+  }
+
+  if (typeof result === 'undefined') {
+    if (Array.isArray(props.model[props.name])) {
+      emit('change', []);
+    } else if (typeof props.model[props.name] === 'string') {
+      emit('change', '');
+    } else if (typeof props.model[props.name] === 'object') {
+      emit('change', null);
+    }
+  }
+  emit('change', result);
+};
+
 const setRemoteOptions = async function () {
   const { config } = props;
   const { option } = config;
@@ -126,6 +136,5 @@ const changeHandler = () => {
   if (!tMagicCascader.value) return;
   tMagicCascader.value.setQuery('');
   tMagicCascader.value.setPreviousQuery(null);
-  emit('change', props.model[props.name]);
 };
 </script>
diff --git a/packages/form/src/fields/Checkbox.vue b/packages/form/src/fields/Checkbox.vue
index afac0e98..b0b15637 100644
--- a/packages/form/src/fields/Checkbox.vue
+++ b/packages/form/src/fields/Checkbox.vue
@@ -1,11 +1,11 @@
 <template>
   <TMagicCheckbox
-    v-model="model[name]"
+    :model-value="model[name]"
     :size="size"
     :trueValue="activeValue"
     :falseValue="inactiveValue"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
     >{{ config.text }}</TMagicCheckbox
   >
 </template>
diff --git a/packages/form/src/fields/CheckboxGroup.vue b/packages/form/src/fields/CheckboxGroup.vue
index 4990b935..58cc2146 100644
--- a/packages/form/src/fields/CheckboxGroup.vue
+++ b/packages/form/src/fields/CheckboxGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <TMagicCheckboxGroup v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
+  <TMagicCheckboxGroup :model-value="model[name]" :size="size" :disabled="disabled" @update:model-value="changeHandler">
     <TMagicCheckbox v-for="option in options" :value="option.value" :key="option.value" :disabled="option.disabled"
       >{{ option.text }}
     </TMagicCheckbox>
diff --git a/packages/form/src/fields/ColorPicker.vue b/packages/form/src/fields/ColorPicker.vue
index 1d861b6f..f6d1e16b 100644
--- a/packages/form/src/fields/ColorPicker.vue
+++ b/packages/form/src/fields/ColorPicker.vue
@@ -1,10 +1,10 @@
 <template>
   <TMagicColorPicker
-    v-model="model[name]"
+    :model-value="model[name]"
     :size="size"
     :disabled="disabled"
     :showAlpha="true"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicColorPicker>
 </template>
 
diff --git a/packages/form/src/fields/Date.vue b/packages/form/src/fields/Date.vue
index dc0eaa99..67dc08c6 100644
--- a/packages/form/src/fields/Date.vue
+++ b/packages/form/src/fields/Date.vue
@@ -1,13 +1,13 @@
 <template>
   <TMagicDatePicker
-    v-model="model[name]"
+    :model-value="model[name]"
     type="date"
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
     :format="config.format || 'YYYY/MM/DD'"
     :value-format="config.valueFormat || 'YYYY/MM/DD'"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicDatePicker>
 </template>
 
diff --git a/packages/form/src/fields/DateTime.vue b/packages/form/src/fields/DateTime.vue
index 2acf3d4f..d18b6d23 100644
--- a/packages/form/src/fields/DateTime.vue
+++ b/packages/form/src/fields/DateTime.vue
@@ -1,6 +1,6 @@
 <template>
   <TMagicDatePicker
-    v-model="model[name]"
+    :model-value="model[name]"
     popper-class="magic-datetime-picker-popper"
     type="datetime"
     :size="size"
@@ -9,7 +9,7 @@
     :format="config.format || 'YYYY/MM/DD HH:mm:ss'"
     :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     :default-time="config.defaultTime"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicDatePicker>
 </template>
 
diff --git a/packages/form/src/fields/Daterange.vue b/packages/form/src/fields/Daterange.vue
index 83b00d75..fa25e006 100644
--- a/packages/form/src/fields/Daterange.vue
+++ b/packages/form/src/fields/Daterange.vue
@@ -1,6 +1,6 @@
 <template>
   <TMagicDatePicker
-    v-model="value"
+    :model-value="value"
     type="datetimerange"
     range-separator="-"
     start-placeholder="开始日期"
@@ -12,7 +12,7 @@
     :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
     :date-format="config.dateFormat || 'YYYY/MM/DD'"
     :time-format="config.timeFormat || 'HH:mm:ss'"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicDatePicker>
 </template>
 
diff --git a/packages/form/src/fields/Number.vue b/packages/form/src/fields/Number.vue
index 43cfcf05..3474298c 100644
--- a/packages/form/src/fields/Number.vue
+++ b/packages/form/src/fields/Number.vue
@@ -1,7 +1,7 @@
 <template>
   <TMagicInputNumber
     v-if="model"
-    v-model="model[name]"
+    :model-value="model[name]"
     clearable
     controls-position="right"
     :size="size"
@@ -10,7 +10,7 @@
     :step="config.step"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
     @input="inputHandler"
   ></TMagicInputNumber>
 </template>
diff --git a/packages/form/src/fields/NumberRange.vue b/packages/form/src/fields/NumberRange.vue
index 11f4b7b3..9aedb263 100644
--- a/packages/form/src/fields/NumberRange.vue
+++ b/packages/form/src/fields/NumberRange.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="m-fields-number-range">
     <TMagicInput
-      v-model="model[name][0]"
-      clearable
+      :model-value="model[name][0]"
+      :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @change="minChangeHandler"
+      @update:model-value="minChangeHandler"
     ></TMagicInput>
     <span class="split-tag">-</span>
     <TMagicInput
-      v-model="model[name][1]"
-      clearable
+      :model-value="model[name][1]"
+      :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @change="maxChangeHandler"
+      @update:model-value="maxChangeHandler"
     ></TMagicInput>
   </div>
 </template>
diff --git a/packages/form/src/fields/RadioGroup.vue b/packages/form/src/fields/RadioGroup.vue
index 52ebebe2..4c39069a 100644
--- a/packages/form/src/fields/RadioGroup.vue
+++ b/packages/form/src/fields/RadioGroup.vue
@@ -1,22 +1,18 @@
 <template>
-  <TMagicRadioGroup v-if="model" v-model="model[name]" :size="size" :disabled="disabled">
+  <TMagicRadioGroup v-if="model" :model-value="model[name]" :size="size" :disabled="disabled">
     <component
-      :is="itemComponent"
       v-for="option in config.options"
+      :is="itemComponent"
       :value="option.value"
       :key="`${option.value}`"
       @click.prevent="clickHandler(option.value)"
     >
-      <TMagicTooltip v-if="option.tooltip" placement="top-start" :content="option.tooltip">
+      <TMagicTooltip :disabled="!Boolean(option.tooltip)" placement="top-start" :content="option.tooltip">
         <div>
           <TMagicIcon v-if="option.icon" :size="iconSize"><component :is="option.icon"></component></TMagicIcon>
           <span>{{ option.text }}</span>
         </div>
       </TMagicTooltip>
-      <div v-else>
-        <TMagicIcon v-if="option.icon" :size="iconSize"><component :is="option.icon"></component></TMagicIcon>
-        <span>{{ option.text }}</span>
-      </div>
     </component>
   </TMagicRadioGroup>
 </template>
@@ -39,13 +35,9 @@ const itemComponent = computed(() => (props.config.childType === 'button' ? TMag
 
 const emit = defineEmits(['change']);
 
-const changeHandler = (value: number) => {
-  emit('change', value);
-};
-
-const clickHandler = (item: any) => {
-  props.model[props.name] = props.model[props.name] === item ? '' : item;
-  changeHandler(props.model[props.name]);
+const clickHandler = (item: string | number | boolean) => {
+  // 再次点击取消选中
+  emit('change', props.model[props.name] === item ? '' : item);
 };
 
 useAddField(props.prop);
diff --git a/packages/form/src/fields/Select.vue b/packages/form/src/fields/Select.vue
index 660ccb07..81303bf2 100644
--- a/packages/form/src/fields/Select.vue
+++ b/packages/form/src/fields/Select.vue
@@ -1,7 +1,7 @@
 <template>
   <TMagicSelect
     v-if="model"
-    v-model="model[name]"
+    :model-value="model[name]"
     v-loading="loading"
     class="m-select"
     ref="tMagicSelect"
@@ -16,7 +16,7 @@
     :allow-create="config.allowCreate"
     :disabled="disabled"
     :remote-method="config.remote && remoteMethod"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
     @visible-change="visibleHandler"
   >
     <template v-if="config.group">
diff --git a/packages/form/src/fields/Switch.vue b/packages/form/src/fields/Switch.vue
index b8b75f75..d04bb9f4 100644
--- a/packages/form/src/fields/Switch.vue
+++ b/packages/form/src/fields/Switch.vue
@@ -1,11 +1,11 @@
 <template>
   <TMagicSwitch
-    v-model="model[name]"
+    :model-value="model[name]"
     :size="size"
     :activeValue="activeValue"
     :inactiveValue="inactiveValue"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicSwitch>
 </template>
 
diff --git a/packages/form/src/fields/Text.vue b/packages/form/src/fields/Text.vue
index d3ed8f86..82434a64 100644
--- a/packages/form/src/fields/Text.vue
+++ b/packages/form/src/fields/Text.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="m-fields-text">
     <TMagicInput
-      v-model="model[name]"
+      :model-value="model[name]"
       ref="input"
       clearable
       :size="size"
       :placeholder="config.placeholder"
       :disabled="disabled"
-      @change="changeHandler"
+      @update:model-value="changeHandler"
       @input="inputHandler"
       @keyup="keyUpHandler($event)"
     >
diff --git a/packages/form/src/fields/Textarea.vue b/packages/form/src/fields/Textarea.vue
index 907e988c..f5de3bed 100644
--- a/packages/form/src/fields/Textarea.vue
+++ b/packages/form/src/fields/Textarea.vue
@@ -1,12 +1,12 @@
 <template>
   <TMagicInput
-    v-model="model[name]"
+    :model-value="model[name]"
     type="textarea"
     :size="size"
     clearable
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
     @input="inputHandler"
   >
   </TMagicInput>
diff --git a/packages/form/src/fields/Time.vue b/packages/form/src/fields/Time.vue
index 96ab3b6b..87906565 100644
--- a/packages/form/src/fields/Time.vue
+++ b/packages/form/src/fields/Time.vue
@@ -1,12 +1,12 @@
 <template>
   <TMagicTimePicker
-    v-model="model[name]"
+    :model-value="model[name]"
     :value-format="config.valueFormat || 'HH:mm:ss'"
     :format="config.format || 'HH:mm:ss'"
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicTimePicker>
 </template>
 
diff --git a/packages/form/src/fields/Timerange.vue b/packages/form/src/fields/Timerange.vue
index 84479625..fedeb752 100644
--- a/packages/form/src/fields/Timerange.vue
+++ b/packages/form/src/fields/Timerange.vue
@@ -1,6 +1,6 @@
 <template>
   <TMagicTimePicker
-    v-model="value"
+    :model-value="value"
     is-range
     range-separator="-"
     start-placeholder="开始时间"
@@ -9,7 +9,7 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
-    @change="changeHandler"
+    @update:model-value="changeHandler"
   ></TMagicTimePicker>
 </template>
 
diff --git a/packages/form/src/theme/container.scss b/packages/form/src/theme/container.scss
index 44fedaa6..37afe802 100644
--- a/packages/form/src/theme/container.scss
+++ b/packages/form/src/theme/container.scss
@@ -3,3 +3,20 @@
     display: inline-flex;
   }
 }
+
+.m-form-container {
+  &.has-tip {
+    display: flex;
+    align-items: baseline;
+
+    .tmagic-design-form-item {
+      flex: 1;
+    }
+  }
+
+  .tmagic-design-form-item {
+    &.show-diff {
+      background: #f7dadd;
+    }
+  }
+}
diff --git a/packages/form/tests/unit/Form.spec.ts b/packages/form/tests/unit/Form.spec.ts
index 7fba15f7..fc1e3e25 100644
--- a/packages/form/tests/unit/Form.spec.ts
+++ b/packages/form/tests/unit/Form.spec.ts
@@ -17,7 +17,7 @@
  */
 import { describe, expect, test } from 'vitest';
 import { nextTick } from 'vue';
-import MagicForm, { MForm } from '@form/index';
+import MagicForm, { createForm, MForm } from '@form/index';
 import { mount } from '@vue/test-utils';
 import ElementPlus from 'element-plus';
 
@@ -45,4 +45,192 @@ describe('表单', () => {
 
     expect(wrapper.text()).toBe('text');
   });
+
+  test('changeRecords', async () => {
+    const initValues = {};
+    const config = [
+      {
+        text: 'text',
+        name: 'text',
+      },
+      {
+        name: 'object',
+        items: [
+          {
+            text: 'text',
+            name: 'objectText',
+          },
+        ],
+      },
+      {
+        items: [
+          {
+            text: 'text',
+            name: 'text1',
+          },
+        ],
+      },
+
+      {
+        items: [
+          {
+            name: 'object',
+            items: [
+              {
+                text: 'text',
+                name: 'text1',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    const wrapper = mount(MForm, {
+      global: {
+        plugins: [ElementPlus as any, MagicForm as any],
+      },
+      props: {
+        initValues,
+        config,
+      },
+    });
+
+    await nextTick();
+
+    const inputs = wrapper.findAll('input');
+
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i];
+      input.setValue(i);
+    }
+    expect(wrapper.vm.changeRecords).toEqual([
+      { propPath: 'text', value: '0' },
+      { propPath: 'object.objectText', value: '1' },
+      { propPath: 'text1', value: '2' },
+      { propPath: 'object.text1', value: '3' },
+    ]);
+    expect(wrapper.vm.values).toEqual({
+      text: '0',
+      object: {
+        objectText: '1',
+        text1: '3',
+      },
+      text1: '2',
+    });
+  });
+
+  test('onChange setFormValue', async () => {
+    const initValues = {};
+    const config = createForm([
+      {
+        text: 'text',
+        name: 'text',
+        onChange: (vm, value: string, { formValue, setFormValue }: any) => {
+          setFormValue('object.objectText', value);
+          formValue!.object.objectText2 = value;
+        },
+      },
+      {
+        name: 'object',
+        items: [
+          {
+            text: 'text',
+            name: 'objectText',
+          },
+          {
+            text: 'text',
+            name: 'objectText2',
+          },
+        ],
+      },
+    ]);
+    const wrapper = mount(MForm, {
+      global: {
+        plugins: [ElementPlus as any, MagicForm as any],
+      },
+      props: {
+        initValues,
+        config,
+      },
+    });
+
+    await nextTick();
+
+    const input = wrapper.find('input');
+
+    input.setValue('a');
+
+    await nextTick();
+
+    expect(wrapper.vm.changeRecords).toEqual([
+      { propPath: 'object.objectText', value: 'a' },
+      { propPath: 'object.objectText2', value: 'a' },
+      { propPath: 'text', value: 'a' },
+    ]);
+    expect(wrapper.vm.values).toEqual({
+      text: 'a',
+      object: {
+        objectText: 'a',
+        objectText2: 'a',
+      },
+    });
+  });
+
+  test('onChange setModel', async () => {
+    const initValues = {};
+    const config = createForm([
+      {
+        name: 'object',
+        items: [
+          {
+            text: 'text',
+            name: 'objectText',
+            onChange: (vm: any, value: string, { model, setModel }: any) => {
+              model.objectText2 = value;
+              setModel('objectText3', value);
+            },
+          },
+          {
+            text: 'text',
+            name: 'objectText2',
+          },
+
+          {
+            text: 'text',
+            name: 'objectText3',
+          },
+        ],
+      },
+    ]);
+    const wrapper = mount(MForm, {
+      global: {
+        plugins: [ElementPlus as any, MagicForm as any],
+      },
+      props: {
+        initValues,
+        config,
+      },
+    });
+
+    await nextTick();
+
+    const input = wrapper.find('input');
+
+    input.setValue('a');
+
+    await nextTick();
+
+    expect(wrapper.vm.changeRecords).toEqual([
+      { propPath: 'object.objectText2', value: 'a' },
+      { propPath: 'object.objectText3', value: 'a' },
+      { propPath: 'object.objectText', value: 'a' },
+    ]);
+    expect(wrapper.vm.values).toEqual({
+      object: {
+        objectText: 'a',
+        objectText2: 'a',
+        objectText3: 'a',
+      },
+    });
+  });
 });