From 9f7d67b17bbe41f32ad96d23f4a605a9cd3c8224 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 21 Nov 2024 19:11:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(form,editor):=20=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/CodeBlockEditor.vue |  16 ++-
 packages/editor/src/components/CodeParams.vue |   6 +-
 packages/editor/src/fields/Code.vue           |   3 +-
 packages/editor/src/fields/CodeSelect.vue     |  24 ++--
 packages/editor/src/fields/CodeSelectCol.vue  |  37 +++++-
 packages/editor/src/fields/CondOpSelect.vue   |   7 +-
 .../editor/src/fields/DataSourceFields.vue    |  45 +++++--
 .../editor/src/fields/DataSourceMethods.vue   |  86 ++++++++++---
 packages/editor/src/fields/DisplayConds.vue   |  11 +-
 packages/editor/src/fields/EventSelect.vue    |  33 +++--
 packages/editor/src/fields/KeyValue.vue       |   4 +-
 packages/form/src/Form.vue                    |  23 +++-
 packages/form/src/FormBox.vue                 |  14 ++-
 packages/form/src/FormDialog.vue              |   8 +-
 packages/form/src/FormDrawer.vue              |   8 +-
 packages/form/src/containers/Col.vue          |   9 +-
 packages/form/src/containers/Container.vue    | 117 +++++++++++++-----
 packages/form/src/containers/Fieldset.vue     |  19 +--
 packages/form/src/containers/GroupList.vue    |  36 ++++--
 .../form/src/containers/GroupListItem.vue     |   6 +-
 packages/form/src/containers/Panel.vue        |  11 +-
 packages/form/src/containers/Row.vue          |  11 +-
 packages/form/src/containers/Step.vue         |  13 +-
 packages/form/src/containers/Table.vue        |  18 ++-
 packages/form/src/containers/Tabs.vue         |  55 +++++---
 packages/form/src/fields/DynamicField.vue     |   6 +-
 packages/form/src/schema.ts                   |  42 ++++---
 playground/src/configs/dsl.ts                 |  12 +-
 playground/src/configs/formDsl.ts             |  19 +++
 29 files changed, 501 insertions(+), 198 deletions(-)

diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index 5d2c095b..7aee2fb6 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -63,7 +63,13 @@ import { computed, inject, Ref, ref } from 'vue';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { type FormConfig, type FormState, MFormBox, type TableColumnConfig } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type FormConfig,
+  type FormState,
+  MFormBox,
+  type TableColumnConfig,
+} from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
@@ -88,7 +94,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  submit: [values: CodeBlockContent];
+  submit: [values: CodeBlockContent, eventData: ContainerChangeEventData];
 }>();
 
 const services = inject<Services>('services');
@@ -209,9 +215,9 @@ const functionConfig = computed<FormConfig>(() => [
   },
 ]);
 
-const submitForm = (values: CodeBlockContent) => {
+const submitForm = (values: CodeBlockContent, data: ContainerChangeEventData) => {
   changedValue.value = undefined;
-  emit('submit', values);
+  emit('submit', values, data);
 };
 
 const errorHandler = (error: any) => {
@@ -238,7 +244,7 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
       distinguishCancelAndClose: true,
     })
     .then(() => {
-      changedValue.value && submitForm(changedValue.value);
+      changedValue.value && submitForm(changedValue.value, { changeRecords: formBox.value?.form?.changeRecords });
       done();
     })
     .catch((action: string) => {
diff --git a/packages/editor/src/components/CodeParams.vue b/packages/editor/src/components/CodeParams.vue
index c307ea7d..be4778de 100644
--- a/packages/editor/src/components/CodeParams.vue
+++ b/packages/editor/src/components/CodeParams.vue
@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 
-import { FormConfig, MForm } from '@tmagic/form';
+import { type ContainerChangeEventData, type FormConfig, type FormValue, MForm } from '@tmagic/form';
 
 import type { CodeParamStatement } from '@editor/type';
 import { error } from '@editor/utils';
@@ -59,10 +59,10 @@ const codeParamsConfig = computed(() =>
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = async () => {
+const onParamsChangeHandler = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const value = await form.value?.submitForm(true);
-    emit('change', value);
+    emit('change', value, eventData);
   } catch (e) {
     error(e);
   }
diff --git a/packages/editor/src/fields/Code.vue b/packages/editor/src/fields/Code.vue
index 0ff8af80..7d3a975e 100644
--- a/packages/editor/src/fields/Code.vue
+++ b/packages/editor/src/fields/Code.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
   change: [value: string | any];
 }>();
 
-const props = withDefaults(
+withDefaults(
   defineProps<
     FieldProps<
       {
@@ -44,7 +44,6 @@ const props = withDefaults(
 );
 
 const save = (v: string | any) => {
-  props.model[props.name] = v;
   emit('change', v);
 };
 </script>
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index dc4b78d9..5bfa4988 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -21,8 +21,8 @@ import { isEmpty } from 'lodash-es';
 
 import { HookCodeType, HookType } from '@tmagic/core';
 import { TMagicCard } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
-import { FormState, MContainer } from '@tmagic/form';
+import type { ContainerChangeEventData, FieldProps, FormItem, GroupListConfig } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
@@ -30,7 +30,9 @@ defineOptions({
   name: 'MFieldsCodeSelect',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -45,12 +47,12 @@ const props = withDefaults(
   {},
 );
 
-const codeConfig = computed(() => ({
+const codeConfig = computed<GroupListConfig>(() => ({
   type: 'group-list',
   name: 'hookData',
   enableToggleMode: false,
   expandAll: true,
-  title: (mForm: FormState, { model, index }: any) => {
+  title: (mForm, { model, index }: any) => {
     if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
       if (Array.isArray(model.codeId)) {
         if (model.codeId.length < 2) {
@@ -78,11 +80,13 @@ const codeConfig = computed(() => ({
             { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
           ],
           defaultValue: 'code',
-          onChange: (mForm: FormState, v: HookCodeType, { model }: any) => {
+          onChange: (mForm, v: HookCodeType, { model, prop, changeRecords }) => {
             if (v === HookCodeType.DATA_SOURCE_METHOD) {
               model.codeId = [];
+              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: [] });
             } else {
               model.codeId = '';
+              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: '' });
             }
 
             return v;
@@ -93,7 +97,7 @@ const codeConfig = computed(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+          display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !services?.codeBlockService.getEditStatus(),
         },
         {
@@ -101,7 +105,7 @@ const codeConfig = computed(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+          display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !services?.dataSourceService.get('editable'),
         },
       ],
@@ -126,7 +130,5 @@ watch(
   },
 );
 
-const changeHandler = async () => {
-  emit('change', props.model[props.name]);
-};
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => emit('change', v, eventData);
 </script>
diff --git a/packages/editor/src/fields/CodeSelectCol.vue b/packages/editor/src/fields/CodeSelectCol.vue
index b3fbd98c..2987c424 100644
--- a/packages/editor/src/fields/CodeSelectCol.vue
+++ b/packages/editor/src/fields/CodeSelectCol.vue
@@ -7,7 +7,7 @@
         :config="selectConfig"
         :model="model"
         :size="size"
-        @change="onParamsChangeHandler"
+        @change="onCodeIdChangeHandler"
       ></MContainer>
 
       <!-- 查看/编辑按钮 -->
@@ -41,7 +41,14 @@ import { isEmpty, map } from 'lodash-es';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  createValues,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MContainer,
+} from '@tmagic/form';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -55,7 +62,9 @@ defineOptions({
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
 const eventBus = inject<EventBus>('eventBus');
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+}>();
 
 const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
   disabled: false,
@@ -125,12 +134,30 @@ const selectConfig = {
   },
 };
 
+const onCodeIdChangeHandler = (value: any) => {
+  props.model.params = value.params;
+  emit('change', props.model, {
+    changeRecords: [
+      {
+        propPath: props.prop,
+        value: value[props.name],
+      },
+    ],
+  });
+};
+
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = (value: any) => {
+const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
   props.model.params = value.params;
-  emit('change', props.model);
+  emit('change', props.model, {
+    ...eventData,
+    changeRecords: (eventData.changeRecords || []).map((item) => ({
+      prop: `${props.prop.replace(props.name, '')}${item.propPath}`,
+      value: item.value,
+    })),
+  });
 };
 
 const editCode = (id: string) => {
diff --git a/packages/editor/src/fields/CondOpSelect.vue b/packages/editor/src/fields/CondOpSelect.vue
index 5dc75400..ea33ffcb 100644
--- a/packages/editor/src/fields/CondOpSelect.vue
+++ b/packages/editor/src/fields/CondOpSelect.vue
@@ -39,7 +39,10 @@ defineOptions({
   name: 'MFieldsCondOpSelect',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
 const { dataSourceService } = inject<Services>('services') || {};
 
 const props = defineProps<FieldProps<CondOpSelectConfig>>();
@@ -81,7 +84,7 @@ const options = computed(() => {
   return [...arrayOptions, ...eqOptions, ...numberOptions];
 });
 
-const fieldChangeHandler = (v: string[]) => {
+const fieldChangeHandler = (v: string) => {
   emit('change', v);
 };
 </script>
diff --git a/packages/editor/src/fields/DataSourceFields.vue b/packages/editor/src/fields/DataSourceFields.vue
index d8c941bc..aa9c3440 100644
--- a/packages/editor/src/fields/DataSourceFields.vue
+++ b/packages/editor/src/fields/DataSourceFields.vue
@@ -51,7 +51,13 @@ import { inject, Ref, ref } from 'vue';
 
 import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type FieldProps,
+  type FormConfig,
+  type FormState,
+  MFormBox,
+} from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
@@ -75,7 +81,9 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -91,16 +99,29 @@ const newHandler = () => {
   addDialogVisible.value = true;
 };
 
-const fieldChange = ({ index, ...value }: Record<string, any>) => {
-  if (index > -1) {
-    props.model[props.name][index] = value;
-  } else {
-    props.model[props.name].push(value);
-  }
-
+const fieldChange = ({ index, ...value }: Record<string, any>, data: ContainerChangeEventData) => {
   addDialogVisible.value = false;
 
-  emit('change', props.model[props.name]);
+  if (index > -1) {
+    emit('change', value, {
+      modifyKey: index,
+      changeRecords: (data.changeRecords || []).map((item) => ({
+        propPath: `${props.prop}.${index}.${item.propPath}`,
+        value: item.value,
+      })),
+    });
+  } else {
+    const modifyKey = props.model[props.name].length;
+    emit('change', value, {
+      modifyKey,
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${modifyKey}`,
+          value,
+        },
+      ],
+    });
+  }
 };
 
 const fieldColumns: ColumnConfig[] = [
@@ -310,11 +331,9 @@ const addFromJsonFromChange = ({ data }: { data: string }) => {
   try {
     const value = JSON.parse(data);
 
-    props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
-
     addFromJsonDialogVisible.value = false;
 
-    emit('change', props.model[props.name]);
+    emit('change', getFieldsConfig(value, props.model[props.name]));
   } catch (e: any) {
     tMagicMessage.error(e.message);
   }
diff --git a/packages/editor/src/fields/DataSourceMethods.vue b/packages/editor/src/fields/DataSourceMethods.vue
index b01b27b6..b5b564db 100644
--- a/packages/editor/src/fields/DataSourceMethods.vue
+++ b/packages/editor/src/fields/DataSourceMethods.vue
@@ -21,14 +21,17 @@
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
 import type { CodeBlockContent } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
+import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement } from '@editor/type';
+import { getEditorConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MFieldsDataSourceMethods',
@@ -47,7 +50,10 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
-const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+const codeConfig = ref<CodeBlockContent>();
+const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
+
+let editIndex = -1;
 
 const methodColumns: ColumnConfig[] = [
   {
@@ -73,16 +79,31 @@ const methodColumns: ColumnConfig[] = [
     actions: [
       {
         text: '编辑',
-        handler: (row: CodeBlockContent) => {
-          editCode(props.model, row.name);
-          emit('change', props.model[props.name]);
+        handler: (method: CodeBlockContent, index: number) => {
+          let codeContent = method.content || `({ params, dataSource, app }) => {\n  // place your code here\n}`;
+
+          if (typeof codeContent !== 'string') {
+            codeContent = codeContent.toString();
+          }
+
+          codeConfig.value = {
+            ...cloneDeep(method),
+            content: codeContent,
+          };
+
+          editIndex = index;
+
+          nextTick(() => {
+            codeBlockEditor.value?.show();
+          });
         },
       },
       {
         text: '删除',
         buttonType: 'danger',
-        handler: (row: CodeBlockContent) => {
-          deleteCode(props.model, row.name);
+        handler: async (row: CodeBlockContent, index: number) => {
+          await tMagicMessageBox.confirm(`确定删除${row.name}?`, '提示');
+          props.model[props.name].splice(index, 1);
           emit('change', props.model[props.name]);
         },
       },
@@ -91,14 +112,51 @@ const methodColumns: ColumnConfig[] = [
 ];
 
 const createCodeHandler = () => {
-  createCode(props.model);
+  codeConfig.value = {
+    name: '',
+    content: `({ params, dataSource, app, flowState }) => {\n  // place your code here\n}`,
+    params: [],
+  };
 
-  emit('change', props.model[props.name]);
+  editIndex = -1;
+
+  nextTick(() => {
+    codeBlockEditor.value?.show();
+  });
 };
 
-const submitCodeHandler = (values: CodeBlockContent) => {
-  submitCode(values);
+const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventData) => {
+  if (value.content) {
+    // 在保存的时候转换代码内容
+    const parseDSL = getEditorConfig('parseDSL');
+    if (typeof value.content === 'string') {
+      value.content = parseDSL<(...args: any[]) => any>(value.content);
+    }
+  }
+  if (editIndex > -1) {
+    emit('change', value, {
+      modifyKey: editIndex,
+      changeRecords: (data.changeRecords || []).map((item) => ({
+        propPath: `${props.prop}.${editIndex}.${item.propPath}`,
+        value: item.value,
+      })),
+    });
+  } else {
+    const modifyKey = props.model[props.name].length;
+    emit('change', value, {
+      modifyKey,
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${modifyKey}`,
+          value,
+        },
+      ],
+    });
+  }
 
-  emit('change', props.model[props.name]);
+  editIndex = -1;
+  codeConfig.value = void 0;
+
+  codeBlockEditor.value?.hide();
 };
 </script>
diff --git a/packages/editor/src/fields/DisplayConds.vue b/packages/editor/src/fields/DisplayConds.vue
index 09f4c032..688ffc1a 100644
--- a/packages/editor/src/fields/DisplayConds.vue
+++ b/packages/editor/src/fields/DisplayConds.vue
@@ -17,6 +17,7 @@ import { computed, inject } from 'vue';
 
 import type { DisplayCond } from '@tmagic/core';
 import {
+  type ContainerChangeEventData,
   type FieldProps,
   type FilterFunction,
   filterFunction,
@@ -33,7 +34,7 @@ defineOptions({
 });
 
 const emit = defineEmits<{
-  change: [value: DisplayCond[]];
+  change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
 }>();
 
 const props = withDefaults(
@@ -149,7 +150,11 @@ const config = computed<GroupListConfig>(() => ({
   ],
 }));
 
-const changeHandler = (v: DisplayCond[]) => {
-  emit('change', v);
+const changeHandler = (v: DisplayCond[], eventData?: ContainerChangeEventData) => {
+  if (!Array.isArray(props.model[props.name])) {
+    props.model[props.name] = [];
+  }
+
+  emit('change', v, eventData);
 };
 </script>
diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue
index 51b4db4a..a60e9bdf 100644
--- a/packages/editor/src/fields/EventSelect.vue
+++ b/packages/editor/src/fields/EventSelect.vue
@@ -20,6 +20,7 @@
         :key="index"
         :disabled="disabled"
         :size="size"
+        :prop="`${prop}.${index}`"
         :config="actionsConfig"
         :model="cardItem"
         :label-width="config.labelWidth || '100px'"
@@ -32,7 +33,8 @@
             :model="cardItem"
             :disabled="disabled"
             :size="size"
-            @change="onChangeHandler"
+            :prop="`${prop}.${index}`"
+            @change="eventNameChangeHandler"
           ></MFormContainer>
           <TMagicButton
             style="color: #f56c6c"
@@ -56,7 +58,14 @@ import { has } from 'lodash-es';
 import type { EventOption, MComponent, MContainer } from '@tmagic/core';
 import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import type {
+  CascaderOption,
+  ChildConfig,
+  ContainerChangeEventData,
+  FieldProps,
+  FormState,
+  PanelConfig,
+} from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
@@ -69,7 +78,9 @@ defineOptions({
 
 const props = defineProps<FieldProps<EventSelectConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -355,21 +366,27 @@ const addEvent = () => {
     name: '',
     actions: [],
   };
+
   if (!props.model[props.name]) {
     props.model[props.name] = [];
   }
-  props.model[props.name].push(defaultEvent);
-  onChangeHandler();
+
+  emit('change', defaultEvent, {
+    modifyKey: props.model[props.name].length,
+  });
 };
 
 // 删除事件
 const removeEvent = (index: number) => {
   if (!props.name) return;
   props.model[props.name].splice(index, 1);
-  onChangeHandler();
+  emit('change', props.model[props.name]);
 };
 
-const onChangeHandler = () => {
-  emit('change', props.model);
+const eventNameChangeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model[props.name], eventData);
 };
+
+const onChangeHandler = (v: any, eventData: ContainerChangeEventData) =>
+  emit('change', props.model[props.name], eventData);
 </script>
diff --git a/packages/editor/src/fields/KeyValue.vue b/packages/editor/src/fields/KeyValue.vue
index 48c89e9c..379e7826 100644
--- a/packages/editor/src/fields/KeyValue.vue
+++ b/packages/editor/src/fields/KeyValue.vue
@@ -86,7 +86,9 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits<(e: 'change', value: Record<string, any>) => void>();
+const emit = defineEmits<{
+  change: [value: Record<string, any>];
+}>();
 
 const records = ref<[string, string][]>([]);
 const showCode = ref(false);
diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index 84e0b86a..24f1dfd8 100644
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
+import { provide, reactive, ref, shallowRef, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep, isEqual } from 'lodash-es';
 
 import { TMagicForm } from '@tmagic/design';
@@ -36,7 +36,7 @@ import { TMagicForm } from '@tmagic/design';
 import Container from './containers/Container.vue';
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
-import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
+import type { ChangeRecord, ContainerChangeEventData, FormConfig, FormState, FormValue, ValidateError } from './schema';
 
 defineOptions({
   name: 'MForm',
@@ -81,7 +81,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'error', 'field-input', 'field-change']);
+const emit = defineEmits(['change', 'error', 'field-input', 'field-change', 'update:stepActive']);
 
 const tMagicForm = ref<InstanceType<typeof TMagicForm>>();
 const initialized = ref(false);
@@ -135,9 +135,13 @@ watchEffect(async () => {
 
 provide('mForm', formState);
 
+const changeRecords = shallowRef<ChangeRecord[]>([]);
+
 watch(
   [() => props.config, () => props.initValues],
   ([config], [preConfig]) => {
+    changeRecords.value = [];
+
     if (!isEqual(toRaw(config), toRaw(preConfig))) {
       initialized.value = false;
     }
@@ -165,8 +169,11 @@ watch(
   { immediate: true },
 );
 
-const changeHandler = () => {
-  emit('change', values.value);
+const changeHandler = (v: FormValue, eventData: ContainerChangeEventData) => {
+  if (eventData.changeRecords?.length) {
+    changeRecords.value.push(...eventData.changeRecords);
+  }
+  emit('change', values.value, eventData);
 };
 
 const submitHandler = (e: SubmitEvent) => {
@@ -180,10 +187,14 @@ defineExpose({
   lastValuesProcessed,
   formState,
   initialized,
+  changeRecords,
 
   changeHandler,
 
-  resetForm: () => tMagicForm.value?.resetFields(),
+  resetForm: () => {
+    tMagicForm.value?.resetFields();
+    changeRecords.value = [];
+  },
 
   submitForm: async (native?: boolean): Promise<any> => {
     try {
diff --git a/packages/form/src/FormBox.vue b/packages/form/src/FormBox.vue
index 65c3d2ad..53a57c6b 100644
--- a/packages/form/src/FormBox.vue
+++ b/packages/form/src/FormBox.vue
@@ -40,7 +40,7 @@ import { computed, ref, watchEffect } from 'vue';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
 
 import Form from './Form.vue';
-import type { FormConfig } from './schema';
+import type { ContainerChangeEventData, FormConfig, FormValue } from './schema';
 
 defineOptions({
   name: 'MFormBox',
@@ -68,7 +68,11 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['submit', 'change', 'error']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  submit: [v: any, eventData: ContainerChangeEventData];
+  error: [e: any];
+}>();
 
 const footerHeight = 60;
 
@@ -98,14 +102,14 @@ watchEffect(() => {
 const submitHandler = async () => {
   try {
     const values = await form.value?.submitForm();
-    emit('submit', values);
+    emit('submit', values, { changeRecords: form.value?.changeRecords });
   } catch (e) {
     emit('error', e);
   }
 };
 
-const changeHandler = (value: any) => {
-  emit('change', value);
+const changeHandler = (value: FormValue, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
 };
 
 const show = () => {};
diff --git a/packages/form/src/FormDialog.vue b/packages/form/src/FormDialog.vue
index b52811be..6488d247 100644
--- a/packages/form/src/FormDialog.vue
+++ b/packages/form/src/FormDialog.vue
@@ -65,7 +65,7 @@ import { computed, ref } from 'vue';
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
-import { FormConfig, StepConfig } from './schema';
+import { ContainerChangeEventData, FormConfig, FormValue, StepConfig } from './schema';
 
 defineOptions({
   name: 'MFormDialog',
@@ -132,7 +132,7 @@ const closeHandler = () => {
 const save = async () => {
   try {
     const values = await form.value?.submitForm();
-    emit('submit', values);
+    emit('submit', values, { changeRecords: form.value?.changeRecords });
   } catch (e) {
     emit('error', e);
   }
@@ -146,8 +146,8 @@ const nextStep = () => {
   stepActive.value += 1;
 };
 
-const changeHandler = (value: any) => {
-  emit('change', value);
+const changeHandler = (value: FormValue, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
 };
 
 const show = () => {
diff --git a/packages/form/src/FormDrawer.vue b/packages/form/src/FormDrawer.vue
index 62ca6248..649473de 100644
--- a/packages/form/src/FormDrawer.vue
+++ b/packages/form/src/FormDrawer.vue
@@ -59,7 +59,7 @@ import { ref, watchEffect } from 'vue';
 import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
-import type { FormConfig } from './schema';
+import type { ContainerChangeEventData, FormConfig, FormValue } from './schema';
 
 defineOptions({
   name: 'MFormDialog',
@@ -110,14 +110,14 @@ watchEffect(() => {
 const submitHandler = async () => {
   try {
     const values = await form.value?.submitForm();
-    emit('submit', values);
+    emit('submit', values, { changeRecords: form.value?.changeRecords });
   } catch (e) {
     emit('error', e);
   }
 };
 
-const changeHandler = (value: any) => {
-  emit('change', value);
+const changeHandler = (value: FormValue, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
 };
 
 const openHandler = () => {
diff --git a/packages/form/src/containers/Col.vue b/packages/form/src/containers/Col.vue
index b3683c65..f12fbcde 100644
--- a/packages/form/src/containers/Col.vue
+++ b/packages/form/src/containers/Col.vue
@@ -21,7 +21,7 @@ import { computed, inject } from 'vue';
 
 import { TMagicCol } from '@tmagic/design';
 
-import { ChildConfig, FormState } from '../schema';
+import type { ChildConfig, ContainerChangeEventData, FormState } from '../schema';
 import { display as displayFunction } from '../utils/form';
 
 import Container from './Container.vue';
@@ -43,10 +43,13 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 const display = computed(() => displayFunction(mForm, props.config.display, props));
-const changeHandler = () => emit('change', props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => emit('change', v, eventData);
 const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index c7a778fa..c000a3b8 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -191,12 +191,12 @@
     </template>
 
     <template v-else-if="items && display">
-      <template v-if="name || name === 0 ? model[name] : model">
+      <template v-if="isValidName() ? model[name] : model">
         <Container
           v-for="item in items"
           :key="key(item)"
-          :model="name || name === 0 ? model[name] : model"
-          :last-values="name || name === 0 ? lastValues[name] || {} : lastValues"
+          :model="isValidName() ? model[name] : model"
+          :last-values="isValidName() ? lastValues[name] || {} : lastValues"
           :is-compare="isCompare"
           :config="item"
           :size="size"
@@ -220,13 +220,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch, watchEffect } from 'vue';
+import { computed, inject, 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 { ChildConfig, ContainerCommonConfig, FormState, FormValue, TypeFunction } from '../schema';
+import type {
+  ChildConfig,
+  ContainerChangeEventData,
+  ContainerCommonConfig,
+  FormState,
+  FormValue,
+  TypeFunction,
+} from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
 defineOptions({
@@ -258,7 +265,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -285,7 +295,12 @@ const itemProp = computed(() => {
   } else {
     return props.prop;
   }
-  return `${props.prop}${props.prop ? '.' : ''}${n}`;
+
+  if (typeof props.prop !== 'undefined' && props.prop !== '') {
+    return `${props.prop}.${n}`;
+  }
+
+  return `${n}`;
 });
 
 const tagName = computed(() => `m-${items.value ? 'form' : 'fields'}-${type.value}`);
@@ -360,18 +375,6 @@ const filterHandler = (filter: any, value: FormValue | number | string) => {
   return value;
 };
 
-const changeHandler = (onChange: any, value: FormValue | number | string) => {
-  if (typeof onChange === 'function') {
-    return onChange(mForm, value, {
-      model: props.model,
-      values: mForm?.initValues,
-      formValue: mForm?.values,
-      prop: itemProp.value,
-      config: props.config,
-    });
-  }
-};
-
 const trimHandler = (trim: any, value: FormValue | number | string) => {
   if (typeof value === 'string' && trim) {
     return value.replace(/^\s*/, '').replace(/\s*$/, '');
@@ -381,28 +384,80 @@ const trimHandler = (trim: any, value: FormValue | number | string) => {
 // 继续抛出给更高层级的组件
 const onAddDiffCount = () => emit('addDiffCount');
 
-const onChangeHandler = async function (v: FormValue, key?: string) {
-  const { filter, onChange, trim, name, dynamicKey } = props.config as any;
-  let value: FormValue | number | string = v;
+const hasModifyKey = (eventDataItem: ContainerChangeEventData) =>
+  typeof eventDataItem?.modifyKey !== 'undefined' && eventDataItem.modifyKey !== '';
+
+const isValidName = () => {
+  const valueType = typeof name.value;
+  if (valueType !== 'string' && valueType !== 'symbol' && valueType !== 'number') {
+    return false;
+  }
+
+  if (name.value === '') {
+    return false;
+  }
+
+  if (typeof name.value === 'number') {
+    return name.value >= 0;
+  }
+
+  return true;
+};
+
+const onChangeHandler = async function (v: any, eventData: ContainerChangeEventData = {}) {
+  const { filter, onChange, trim, dynamicKey } = props.config as any;
+  let value: FormValue | number | string | any[] = toRaw(v);
+  const changeRecords = eventData.changeRecords || [];
+  const newChangeRecords = [...changeRecords];
 
   try {
     value = filterHandler(filter, v);
-    value = (await changeHandler(onChange, value)) ?? value;
+
+    if (typeof onChange === 'function') {
+      value =
+        (await onChange(mForm, value, {
+          model: props.model,
+          values: mForm?.initValues,
+          formValue: mForm?.values,
+          prop: itemProp.value,
+          config: props.config,
+          changeRecords: newChangeRecords,
+        })) ?? value;
+    }
     value = trimHandler(trim, value) ?? value;
   } catch (e) {
     console.error(e);
   }
 
-  // field内容下包含field-link时，model===value, 这里避免循环引用
-  if ((name || name === 0) && props.model !== value && (v !== value || props.model[name] !== value)) {
+  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, 这里避免循环引用
     // eslint-disable-next-line vue/no-mutating-props
-    props.model[name] = value;
+    props.model[name.value] = value;
   }
-  // 动态表单类型，根据value和key参数，直接修改model
-  if (key !== undefined && dynamicKey) {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.model[key] = value;
+
+  if (changeRecords.length === 0) {
+    newChangeRecords.push({
+      propPath: valueProp,
+      value,
+    });
   }
-  emit('change', props.model);
+
+  emit('change', props.model, {
+    ...eventData,
+    changeRecords: newChangeRecords,
+  });
 };
 </script>
diff --git a/packages/form/src/containers/Fieldset.vue b/packages/form/src/containers/Fieldset.vue
index 9b24ae80..c636d4b7 100644
--- a/packages/form/src/containers/Fieldset.vue
+++ b/packages/form/src/containers/Fieldset.vue
@@ -6,7 +6,7 @@
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
         :true-value="1"
         :false-value="0"
-        @update:modelValue="change"
+        @update:modelValue="valueChangeHandler"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></TMagicCheckbox>
     </component>
@@ -29,7 +29,7 @@
           :disabled="disabled"
           :labelWidth="lWidth"
           :size="size"
-          @change="change"
+          @change="changeHandler"
           @add-diff-count="onAddDiffCount()"
         ></Container>
       </div>
@@ -50,7 +50,7 @@
         :labelWidth="lWidth"
         :size="size"
         :disabled="disabled"
-        @change="change"
+        @change="changeHandler"
         @addDiffCount="onAddDiffCount()"
       ></Container>
     </template>
@@ -62,7 +62,7 @@ import { computed, inject } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
 
-import { FieldsetConfig, FormState } from '../schema';
+import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema';
 
 import Container from './Container.vue';
 
@@ -90,7 +90,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -110,10 +113,12 @@ const lWidth = computed(() => {
   return props.config.labelWidth || props.labelWidth || (props.config.text ? undefined : '0');
 });
 
-const change = () => {
-  emit('change', props.model);
+const valueChangeHandler = (value: number | boolean) => {
+  emit('change', value, { modifyKey: 'value' });
 };
 
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => emit('change', v, eventData);
+
 const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
 
 const onAddDiffCount = () => emit('addDiffCount');
diff --git a/packages/form/src/containers/GroupList.vue b/packages/form/src/containers/GroupList.vue
index a2f9d88b..87b8ee57 100644
--- a/packages/form/src/containers/GroupList.vue
+++ b/packages/form/src/containers/GroupList.vue
@@ -25,7 +25,14 @@
       @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
-    <TMagicButton @click="addHandler" type="primary" :disabled="disabled" v-if="addable">新增</TMagicButton>
+    <TMagicButton
+      v-if="addable"
+      type="primary"
+      :size="config.enableToggleMode ? 'small' : 'default'"
+      :disabled="disabled"
+      @click="addHandler"
+      >新增</TMagicButton
+    >
 
     <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
   </div>
@@ -37,7 +44,7 @@ import { Grid } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
 
-import { FormState, GroupListConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
 import { initValue } from '../utils/form';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
@@ -58,7 +65,10 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -77,10 +87,8 @@ const addable = computed(() => {
   return typeof props.config.addable === 'undefined' ? true : props.config.addable;
 });
 
-const changeHandler = () => {
-  if (!props.name) return false;
-
-  emit('change', props.model[props.name]);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
 };
 
 const addHandler = async () => {
@@ -105,14 +113,22 @@ const addHandler = async () => {
   });
 
   props.model[props.name].push(groupValue);
-  changeHandler();
+
+  emit('change', props.model[props.name], {
+    changeRecords: [
+      {
+        propPath: `${props.prop}.${props.model[props.name].length - 1}`,
+        value: groupValue,
+      },
+    ],
+  });
 };
 
 const removeHandler = (index: number) => {
   if (!props.name) return false;
 
   props.model[props.name].splice(index, 1);
-  changeHandler();
+  emit('change', props.model[props.name]);
 };
 
 const swapHandler = (idx1: number, idx2: number) => {
@@ -120,7 +136,7 @@ const swapHandler = (idx1: number, idx2: number) => {
 
   const [currRow] = props.model[props.name].splice(idx1, 1);
   props.model[props.name].splice(idx2, 0, currRow);
-  changeHandler();
+  emit('change', props.model[props.name]);
 };
 
 const toggleMode = () => {
diff --git a/packages/form/src/containers/GroupListItem.vue b/packages/form/src/containers/GroupListItem.vue
index 7e096eff..ac29e0f6 100644
--- a/packages/form/src/containers/GroupListItem.vue
+++ b/packages/form/src/containers/GroupListItem.vue
@@ -48,7 +48,7 @@ import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-v
 
 import { TMagicButton, TMagicIcon } from '@tmagic/design';
 
-import { FormState, GroupListConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
@@ -103,7 +103,9 @@ const itemExtra = computed(() => filterFunction(mForm, props.config.itemExtra, p
 
 const removeHandler = () => emit('remove-item', props.index);
 
-const changeHandler = () => emit('change');
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
 
 const expandHandler = () => {
   expand.value = !expand.value;
diff --git a/packages/form/src/containers/Panel.vue b/packages/form/src/containers/Panel.vue
index b1668a9b..1d9f3ded 100644
--- a/packages/form/src/containers/Panel.vue
+++ b/packages/form/src/containers/Panel.vue
@@ -63,7 +63,7 @@ import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicCard } from '@tmagic/design';
 
-import { FormState, PanelConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, PanelConfig } from '../schema';
 import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
@@ -84,7 +84,10 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -94,6 +97,8 @@ const items = computed(() => props.config.items);
 
 const filter = (config: any) => filterFunction(mForm, config, props);
 
-const changeHandler = () => emit('change', props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
 const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/form/src/containers/Row.vue b/packages/form/src/containers/Row.vue
index 82de1193..0a35f41b 100644
--- a/packages/form/src/containers/Row.vue
+++ b/packages/form/src/containers/Row.vue
@@ -24,7 +24,7 @@ import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';
 
-import { FormState, RowConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, RowConfig } from '../schema';
 
 import Col from './Col.vue';
 
@@ -45,10 +45,15 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
-const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.name ? props.model[props.name] : props.model, eventData);
+};
 const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/form/src/containers/Step.vue b/packages/form/src/containers/Step.vue
index 19e1d19b..9ed2fb50 100644
--- a/packages/form/src/containers/Step.vue
+++ b/packages/form/src/containers/Step.vue
@@ -37,7 +37,7 @@ import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicStep, TMagicSteps } from '@tmagic/design';
 
-import { FormState, StepConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, StepConfig } from '../schema';
 
 import Container from './Container.vue';
 
@@ -48,6 +48,7 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     model: any;
+    name?: string;
     lastValues?: any;
     isCompare?: boolean;
     config: StepConfig;
@@ -61,7 +62,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 const active = ref(1);
@@ -75,8 +79,9 @@ const stepClick = (index: number) => {
   mForm?.$emit('update:stepActive', active.value);
 };
 
-const changeHandler = () => {
-  emit('change', props.model);
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
 };
+
 const onAddDiffCount = () => emit('addDiffCount');
 </script>
diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index da1542c8..2f607249 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -113,7 +113,7 @@
                     :lastValues="lastData[scope.$index]"
                     :is-compare="isCompare"
                     :size="size"
-                    @change="$emit('change', model[modelName])"
+                    @change="changeHandler"
                     @addDiffCount="onAddDiffCount()"
                   ></Container>
                 </template>
@@ -206,7 +206,7 @@ import {
 } from '@tmagic/design';
 import { asyncLoadJs, sleep } from '@tmagic/utils';
 
-import { FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
+import type { ContainerChangeEventData, FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
 import { display as displayFunc, initValue } from '../utils/form';
 
 import Container from './Container.vue';
@@ -395,7 +395,15 @@ const newHandler = async (row?: any) => {
   }
 
   props.model[modelName.value].push(inputs);
-  emit('change', props.model[modelName.value]);
+
+  emit('change', props.model[modelName.value], {
+    changeRecords: [
+      {
+        propPath: `${props.prop}.${props.model[modelName.value].length - 1}`,
+        value: inputs,
+      },
+    ],
+  });
 };
 
 onMounted(() => {
@@ -644,6 +652,10 @@ const getProp = (index: number) => {
 
 const onAddDiffCount = () => emit('addDiffCount');
 
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
+
 defineExpose({
   toggleRowSelection,
 });
diff --git a/packages/form/src/containers/Tabs.vue b/packages/form/src/containers/Tabs.vue
index 2fb310af..a5632c3d 100644
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@@ -71,12 +71,12 @@
 
 <script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
-import { cloneDeep, isEmpty } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 
 import { getDesignConfig, TMagicBadge } from '@tmagic/design';
 
-import { FormState, TabConfig, TabPaneConfig } from '../schema';
-import { display as displayFunc, filterFunction } from '../utils/form';
+import type { ContainerChangeEventData, FormState, TabConfig, TabPaneConfig } from '../schema';
+import { display as displayFunc, filterFunction, initValue } from '../utils/form';
 
 import Container from './Container.vue';
 
@@ -137,7 +137,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'addDiffCount']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
 
 const mForm = inject<FormState | undefined>('mForm');
 const activeTabName = ref(getActive(mForm, props, ''));
@@ -166,8 +169,8 @@ const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.it
 
 const tabClickHandler = (tab: any) => tabClick(mForm, tab, props);
 
-const onTabAdd = () => {
-  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+const onTabAdd = async () => {
+  if (!props.name) throw new Error('dynamic tab 必须配置name');
 
   if (typeof props.config.onTabAdd === 'function') {
     props.config.onTabAdd(mForm, {
@@ -175,17 +178,32 @@ const onTabAdd = () => {
       prop: props.prop,
       config: props.config,
     });
-  } else if (tabs.value.length > 0) {
-    const newObj = cloneDeep(tabs.value[0]);
+    emit('change', props.model);
+  } else {
+    const newObj = await initValue(mForm, {
+      config: props.config.items,
+      initValues: {},
+    });
+
     newObj.title = `标签${tabs.value.length + 1}`;
-    props.model[props.config.name].push(newObj);
+
+    props.model[props.name].push(newObj);
+
+    emit('change', props.model[props.name], {
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${props.model[props.name].length - 1}`,
+          value: newObj,
+        },
+      ],
+    });
   }
-  emit('change', props.model);
-  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+
+  mForm?.$emit('field-change', props.prop, props.model[props.name]);
 };
 
 const onTabRemove = (tabName: string) => {
-  if (!props.config.name) throw new Error('dynamic tab 必须配置name');
+  if (!props.name) throw new Error('dynamic tab 必须配置name');
 
   if (typeof props.config.onTabRemove === 'function') {
     props.config.onTabRemove(mForm, tabName, {
@@ -194,23 +212,20 @@ const onTabRemove = (tabName: string) => {
       config: props.config,
     });
   } else {
-    props.model[props.config.name].splice(+tabName, 1);
+    props.model[props.name].splice(+tabName, 1);
 
     // 防止删除后没有选中的问题
-    if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
+    if (tabName < activeTabName.value || activeTabName.value >= props.model[props.name].length) {
       activeTabName.value = (+activeTabName.value - 1).toString();
       tabClick(mForm, { name: activeTabName.value }, props);
     }
   }
   emit('change', props.model);
-  mForm?.$emit('field-change', props.prop, props.model[props.config.name]);
+  mForm?.$emit('field-change', props.prop, props.model[props.name]);
 };
 
-const changeHandler = () => {
-  emit('change', props.model);
-  if (typeof props.config.onChange === 'function') {
-    props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
-  }
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
 };
 
 // 在tabs组件中收集事件触发次数，即该tab下的差异数
diff --git a/packages/form/src/fields/DynamicField.vue b/packages/form/src/fields/DynamicField.vue
index aa36bde0..0cc48380 100644
--- a/packages/form/src/fields/DynamicField.vue
+++ b/packages/form/src/fields/DynamicField.vue
@@ -59,7 +59,7 @@ const changeFieldMap = async () => {
     let oldVal = props.model?.[v.name] || '';
     if (!oldVal && v.defaultValue !== undefined) {
       oldVal = v.defaultValue;
-      emit('change', oldVal, v.name);
+      emit('change', oldVal, { modifyKey: v.name });
     }
     fieldMap.value[v.name] = oldVal;
     fieldLabelMap.value[v.name] = v.label || '';
@@ -85,6 +85,8 @@ onBeforeUnmount(() => {
 });
 
 const inputChangeHandler = (key: string) => {
-  emit('change', fieldMap.value[key], key);
+  emit('change', fieldMap.value[key], {
+    modifyKey: key,
+  });
 };
 </script>
diff --git a/packages/form/src/schema.ts b/packages/form/src/schema.ts
index 94c5c5f8..70865b80 100644
--- a/packages/form/src/schema.ts
+++ b/packages/form/src/schema.ts
@@ -21,6 +21,16 @@ export interface ValidateError {
   field: string;
 }
 
+export interface ChangeRecord {
+  propPath?: string;
+  value: any;
+}
+
+export interface ContainerChangeEventData {
+  modifyKey?: string;
+  changeRecords?: ChangeRecord[];
+}
+
 export interface FieldProps<T = any> {
   config: T;
   model: any;
@@ -157,34 +167,34 @@ export interface Input {
 export type TypeFunction = (
   mForm: FormState | undefined,
   data: {
-    model: Record<any, any>;
+    model: FormValue;
   },
 ) => string;
 
 export type FilterFunction<T = boolean> = (
   mForm: FormState | undefined,
   data: {
-    model: Record<any, any>;
-    values: Record<any, any>;
-    parent?: Record<any, any>;
-    formValue: Record<any, any>;
+    model: FormValue;
+    values: FormValue;
+    parent?: FormValue;
+    formValue: FormValue;
     prop: string;
     config: any;
     index?: number;
   },
 ) => T;
 
-type OnChangeHandler = (
-  mForm: FormState | undefined,
-  value: any,
-  data: {
-    model: Record<any, any>;
-    values: Record<any, any>;
-    parent?: Record<any, any>;
-    formValue: Record<any, any>;
-    config: any;
-  },
-) => any;
+export interface OnChangeHandlerData {
+  model: FormValue;
+  values?: FormValue;
+  parent?: FormValue;
+  formValue?: FormValue;
+  config: any;
+  prop: string;
+  changeRecords: ChangeRecord[];
+}
+
+export type OnChangeHandler = (mForm: FormState | undefined, value: any, data: OnChangeHandlerData) => any;
 
 type DefaultValueFunction = (mForm: FormState | undefined) => any;
 
diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts
index b66c3611..9952c88e 100644
--- a/playground/src/configs/dsl.ts
+++ b/playground/src/configs/dsl.ts
@@ -152,6 +152,7 @@ const dsl: MApp = {
           text: 'Tmagic editor 营销活动编辑器',
           multiple: true,
           events: [],
+          displayConds: [],
         },
         {
           type: 'qrcode',
@@ -176,6 +177,7 @@ const dsl: MApp = {
           url: 'https://github.com/Tencent/tmagic-editor',
           events: [],
           created: [],
+          displayConds: [],
         },
         {
           type: 'img',
@@ -201,6 +203,7 @@ const dsl: MApp = {
           url: '',
           events: [],
           created: [],
+          displayConds: [],
         },
         {
           type: 'button',
@@ -245,6 +248,7 @@ const dsl: MApp = {
             },
           ],
           created: [],
+          displayConds: [],
         },
         {
           type: 'overlay',
@@ -479,14 +483,6 @@ const dsl: MApp = {
       afterResponse: '',
     },
   ],
-  dataSourceDeps: {
-    ds_b64c92b5: {
-      button_430: {
-        name: '按钮',
-        keys: ['text'],
-      },
-    },
-  },
 };
 
 export default dsl;
diff --git a/playground/src/configs/formDsl.ts b/playground/src/configs/formDsl.ts
index d60c113a..bc7a63f7 100644
--- a/playground/src/configs/formDsl.ts
+++ b/playground/src/configs/formDsl.ts
@@ -189,6 +189,25 @@ export default createForm([
       },
     ],
   },
+  {
+    type: 'tab',
+    name: 'tab',
+    editable: true,
+    dynamic: true,
+    active: '0',
+    tabType: 'border-card',
+    items: [
+      {
+        name: 'xx',
+        items: [
+          {
+            name: 'text',
+            text: 'text',
+          },
+        ],
+      },
+    ],
+  },
   {
     type: 'table',
     name: 'table',