From 50b74d10e6e52f14ac46547292eaba8fe9bbae11 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 30 Apr 2025 16:05:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor,form,form-schema):=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9Eform-schema=EF=BC=8C=E5=B0=86=E8=A1=A8=E5=8D=95schema?=
 =?UTF-8?q?=E6=94=BE=E5=85=A5=E5=85=B6=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/fields/Code.vue           |  22 +-
 packages/editor/src/fields/CodeLink.vue       |  12 +-
 packages/editor/src/fields/CodeSelect.vue     |  13 +-
 packages/editor/src/fields/CodeSelectCol.vue  |   3 +-
 packages/editor/src/fields/CondOpSelect.vue   |   3 +-
 .../fields/DataSourceFieldSelect/Index.vue    |   3 +-
 .../editor/src/fields/DataSourceFields.vue    |  14 +-
 .../editor/src/fields/DataSourceInput.vue     |  17 +-
 .../src/fields/DataSourceMethodSelect.vue     |   3 +-
 .../editor/src/fields/DataSourceMethods.vue   |  15 +-
 .../editor/src/fields/DataSourceMocks.vue     |  15 +-
 .../editor/src/fields/DataSourceSelect.vue    |  11 +-
 packages/editor/src/fields/DisplayConds.vue   |  16 +-
 packages/editor/src/fields/EventSelect.vue    |   4 +-
 packages/editor/src/fields/KeyValue.vue       |  18 +-
 .../editor/src/fields/PageFragmentSelect.vue  |   3 +-
 packages/editor/src/fields/UISelect.vue       |   4 +-
 packages/editor/src/type.ts                   | 105 +--
 .../src/utils/data-source/formConfigs/base.ts |   9 +-
 .../src/utils/data-source/formConfigs/http.ts |   6 +-
 packages/form-schema/package.json             |  41 +
 packages/form-schema/src/base.ts              | 783 ++++++++++++++++++
 packages/form-schema/src/editor.ts            | 155 ++++
 packages/form-schema/src/index.ts             |   6 +
 packages/form/package.json                    |   1 +
 packages/form/src/Form.vue                    |   2 +-
 packages/form/src/containers/Panel.vue        |   4 +-
 packages/form/src/containers/Row.vue          |   2 +-
 packages/form/src/containers/Step.vue         |   2 +-
 packages/form/src/containers/Tabs.vue         |   2 +-
 packages/form/src/schema.ts                   | 777 +----------------
 packages/schema/package.json                  |   3 -
 playground/vite.config.ts                     |   1 +
 pnpm-lock.yaml                                |  72 ++
 react-components/button/package.json          |   3 +
 react-components/button/src/formConfig.ts     |   6 +-
 react-components/container/package.json       |   3 +
 react-components/container/src/formConfig.ts  |   5 +-
 react-components/img/package.json             |   3 +
 react-components/img/src/formConfig.ts        |   6 +-
 .../iterator-container/package.json           |   3 +
 .../iterator-container/src/formConfig.ts      |   5 +-
 react-components/overlay/package.json         |   3 +
 react-components/overlay/src/formConfig.ts    |   4 +-
 .../page-fragment-container/package.json      |   3 +
 .../page-fragment-container/src/formConfig.ts |   6 +-
 react-components/page-fragment/package.json   |   3 +
 .../page-fragment/src/formConfig.ts           |   5 +-
 react-components/page/package.json            |   3 +
 react-components/page/src/formConfig.ts       |   5 +-
 react-components/qrcode/package.json          |   3 +-
 react-components/qrcode/src/formConfig.ts     |   6 +-
 react-components/text/package.json            |   3 +
 react-components/text/src/formConfig.ts       |   6 +-
 tsconfig.build-browser.json                   |   1 +
 tsconfig.check.json                           |   1 +
 vue-components/button/package.json            |   1 +
 vue-components/button/src/formConfig.ts       |   6 +-
 vue-components/container/package.json         |   1 +
 vue-components/container/src/formConfig.ts    |   5 +-
 vue-components/img/package.json               |   1 +
 vue-components/img/src/formConfig.ts          |   6 +-
 .../iterator-container/package.json           |   1 +
 .../iterator-container/src/formConfig.ts      |   5 +-
 vue-components/overlay/package.json           |   1 +
 vue-components/overlay/src/formConfig.ts      |   4 +-
 .../page-fragment-container/package.json      |   1 +
 .../page-fragment-container/src/formConfig.ts |   6 +-
 vue-components/page-fragment/package.json     |   1 +
 .../page-fragment/src/formConfig.ts           |   5 +-
 vue-components/page/package.json              |   1 +
 vue-components/page/src/formConfig.ts         |   5 +-
 vue-components/qrcode/package.json            |   1 +
 vue-components/qrcode/src/formConfig.ts       |   6 +-
 vue-components/text/package.json              |   1 +
 vue-components/text/src/formConfig.ts         |   6 +-
 76 files changed, 1239 insertions(+), 1058 deletions(-)
 create mode 100644 packages/form-schema/package.json
 create mode 100644 packages/form-schema/src/base.ts
 create mode 100644 packages/form-schema/src/editor.ts
 create mode 100644 packages/form-schema/src/index.ts

diff --git a/packages/editor/src/fields/Code.vue b/packages/editor/src/fields/Code.vue
index 7d3a975e..a1287b1f 100644
--- a/packages/editor/src/fields/Code.vue
+++ b/packages/editor/src/fields/Code.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { CodeConfig, FieldProps } from '@tmagic/form';
 
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
@@ -25,23 +25,9 @@ const emit = defineEmits<{
   change: [value: string | any];
 }>();
 
-withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        language?: string;
-        options?: {
-          [key: string]: any;
-        };
-        height?: string;
-        parse?: boolean;
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
+withDefaults(defineProps<FieldProps<CodeConfig>>(), {
+  disabled: false,
+});
 
 const save = (v: string | any) => {
   emit('change', v);
diff --git a/packages/editor/src/fields/CodeLink.vue b/packages/editor/src/fields/CodeLink.vue
index 84b7fb1a..89b05b02 100644
--- a/packages/editor/src/fields/CodeLink.vue
+++ b/packages/editor/src/fields/CodeLink.vue
@@ -6,7 +6,7 @@
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { CodeLinkConfig, FieldProps } from '@tmagic/form';
 
 import { getEditorConfig } from '@editor/utils/config';
 
@@ -14,15 +14,7 @@ defineOptions({
   name: 'MFieldsCodeLink',
 });
 
-const props = defineProps<
-  FieldProps<
-    {
-      type: 'code-link';
-      formTitle?: string;
-      codeOptions?: Object;
-    } & FormItem
-  >
->();
+const props = defineProps<FieldProps<CodeLinkConfig>>();
 
 const emit = defineEmits(['change']);
 
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index e8ce5fe5..9ed2cbd4 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -21,7 +21,7 @@ import { isEmpty } from 'lodash-es';
 
 import { HookCodeType, HookType } from '@tmagic/core';
 import { TMagicCard } from '@tmagic/design';
-import type { ContainerChangeEventData, FieldProps, FormItem, GroupListConfig } from '@tmagic/form';
+import type { CodeSelectConfig, ContainerChangeEventData, FieldProps, GroupListConfig } from '@tmagic/form';
 import { MContainer } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
@@ -36,16 +36,7 @@ const emit = defineEmits<{
 
 const { dataSourceService, codeBlockService } = useServices();
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        className?: string;
-      } & FormItem
-    >
-  >(),
-  {},
-);
+const props = withDefaults(defineProps<FieldProps<CodeSelectConfig>>(), {});
 
 const codeConfig = computed<GroupListConfig>(() => ({
   type: 'group-list',
diff --git a/packages/editor/src/fields/CodeSelectCol.vue b/packages/editor/src/fields/CodeSelectCol.vue
index ade54975..179b0513 100644
--- a/packages/editor/src/fields/CodeSelectCol.vue
+++ b/packages/editor/src/fields/CodeSelectCol.vue
@@ -42,6 +42,7 @@ import { isEmpty, map } from 'lodash-es';
 import type { Id } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import {
+  type CodeSelectColConfig,
   type ContainerChangeEventData,
   createValues,
   type FieldProps,
@@ -53,7 +54,7 @@ import {
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { CodeParamStatement, CodeSelectColConfig, EventBus } from '@editor/type';
+import type { CodeParamStatement, EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({
diff --git a/packages/editor/src/fields/CondOpSelect.vue b/packages/editor/src/fields/CondOpSelect.vue
index b445aa4d..6ad2ae46 100644
--- a/packages/editor/src/fields/CondOpSelect.vue
+++ b/packages/editor/src/fields/CondOpSelect.vue
@@ -30,10 +30,9 @@
 import { computed } from 'vue';
 
 import { getDesignConfig, TMagicSelect } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
-import type { CondOpSelectConfig } from '@editor/type';
 import { arrayOptions, eqOptions, numberOptions } from '@editor/utils';
 
 defineOptions({
diff --git a/packages/editor/src/fields/DataSourceFieldSelect/Index.vue b/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
index 285086c8..7fb624f2 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
+++ b/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
@@ -44,12 +44,11 @@ import { Coin } from '@element-plus/icons-vue';
 
 import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import type { ContainerChangeEventData, FieldProps, FormState } from '@tmagic/form';
+import type { ContainerChangeEventData, DataSourceFieldSelectConfig, FieldProps, FormState } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { DataSourceFieldSelectConfig } from '@editor/type';
 import { removeDataSourceFieldPrefix } from '@editor/utils';
 
 import FieldSelect from './FieldSelect.vue';
diff --git a/packages/editor/src/fields/DataSourceFields.vue b/packages/editor/src/fields/DataSourceFields.vue
index b3acc7f3..cb6924d6 100644
--- a/packages/editor/src/fields/DataSourceFields.vue
+++ b/packages/editor/src/fields/DataSourceFields.vue
@@ -53,6 +53,7 @@ import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import {
   type ContainerChangeEventData,
+  type DataSourceFieldsConfig,
   type FieldProps,
   type FormConfig,
   type FormState,
@@ -71,16 +72,9 @@ defineOptions({
   name: 'MFieldsDataSourceFields',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-fields';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceFieldsConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];
diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue
index e27b2faa..6be0ba22 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/packages/editor/src/fields/DataSourceInput.vue
@@ -53,7 +53,7 @@ import { Coin } from '@element-plus/icons-vue';
 
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
 import { getDesignConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { DataSourceInputConfig, FieldProps } from '@tmagic/form';
 import { getKeysArray, isNumber } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
@@ -64,18 +64,9 @@ defineOptions({
   name: 'MFieldsDataSourceInput',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        type: 'data-source-input';
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceInputConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits<{
   change: [value: string];
diff --git a/packages/editor/src/fields/DataSourceMethodSelect.vue b/packages/editor/src/fields/DataSourceMethodSelect.vue
index a06eaba6..b9f3e416 100644
--- a/packages/editor/src/fields/DataSourceMethodSelect.vue
+++ b/packages/editor/src/fields/DataSourceMethodSelect.vue
@@ -39,6 +39,7 @@ import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import {
   createValues,
+  type DataSourceMethodSelectConfig,
   type FieldProps,
   filterFunction,
   type FormState,
@@ -49,7 +50,7 @@ import {
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus } from '@editor/type';
+import type { CodeParamStatement, EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({
diff --git a/packages/editor/src/fields/DataSourceMethods.vue b/packages/editor/src/fields/DataSourceMethods.vue
index 2680a65d..4eaa5f69 100644
--- a/packages/editor/src/fields/DataSourceMethods.vue
+++ b/packages/editor/src/fields/DataSourceMethods.vue
@@ -26,7 +26,7 @@ import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
+import type { ContainerChangeEventData, DataSourceMethodsConfig, FieldProps } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -37,16 +37,9 @@ defineOptions({
   name: 'MFieldsDataSourceMethods',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-methods';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits(['change']);
 
diff --git a/packages/editor/src/fields/DataSourceMocks.vue b/packages/editor/src/fields/DataSourceMocks.vue
index 4b7b15e1..f949b98d 100644
--- a/packages/editor/src/fields/DataSourceMocks.vue
+++ b/packages/editor/src/fields/DataSourceMocks.vue
@@ -32,7 +32,7 @@ import { inject, Ref, ref } from 'vue';
 
 import type { MockSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import { type DataSourceMocksConfig, type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
@@ -47,16 +47,9 @@ defineOptions({
   name: 'MFieldsDataSourceMocks',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-mocks';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceMocksConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits(['change']);
 
diff --git a/packages/editor/src/fields/DataSourceSelect.vue b/packages/editor/src/fields/DataSourceSelect.vue
index 75bcaad4..baafcd3a 100644
--- a/packages/editor/src/fields/DataSourceSelect.vue
+++ b/packages/editor/src/fields/DataSourceSelect.vue
@@ -24,11 +24,18 @@ import { computed, inject } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
+import {
+  type DataSourceSelect,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MSelect,
+  type SelectConfig,
+} from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { DataSourceSelect, EventBus } from '@editor/type';
+import type { EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({
diff --git a/packages/editor/src/fields/DisplayConds.vue b/packages/editor/src/fields/DisplayConds.vue
index ec48fe1f..a08f851b 100644
--- a/packages/editor/src/fields/DisplayConds.vue
+++ b/packages/editor/src/fields/DisplayConds.vue
@@ -18,8 +18,8 @@ import { computed, inject } from 'vue';
 import type { DisplayCond } from '@tmagic/core';
 import {
   type ContainerChangeEventData,
+  type DisplayCondsConfig,
   type FieldProps,
-  type FilterFunction,
   filterFunction,
   type FormState,
   type GroupListConfig,
@@ -37,17 +37,9 @@ const emit = defineEmits<{
   change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
 }>();
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      titlePrefix?: string;
-      parentFields?: string[] | FilterFunction<string[]>;
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DisplayCondsConfig>>(), {
+  disabled: false,
+});
 
 const { dataSourceService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue
index 7ede202b..3da6aeac 100644
--- a/packages/editor/src/fields/EventSelect.vue
+++ b/packages/editor/src/fields/EventSelect.vue
@@ -60,7 +60,10 @@ import { TMagicButton } from '@tmagic/design';
 import type {
   CascaderOption,
   ChildConfig,
+  CodeSelectColConfig,
   ContainerChangeEventData,
+  DataSourceMethodSelectConfig,
+  EventSelectConfig,
   FieldProps,
   FormState,
   OnChangeHandlerData,
@@ -70,7 +73,6 @@ import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
-import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig } from '@editor/type';
 import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
diff --git a/packages/editor/src/fields/KeyValue.vue b/packages/editor/src/fields/KeyValue.vue
index cb433ebb..31f30276 100644
--- a/packages/editor/src/fields/KeyValue.vue
+++ b/packages/editor/src/fields/KeyValue.vue
@@ -63,7 +63,7 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { FieldProps, KeyValueConfig } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -72,19 +72,9 @@ defineOptions({
   name: 'MFieldsKeyValue',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        type: 'key-value';
-        advanced?: boolean;
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<KeyValueConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits<{
   change: [value: Record<string, any>];
diff --git a/packages/editor/src/fields/PageFragmentSelect.vue b/packages/editor/src/fields/PageFragmentSelect.vue
index 00c91c10..6247a3fb 100644
--- a/packages/editor/src/fields/PageFragmentSelect.vue
+++ b/packages/editor/src/fields/PageFragmentSelect.vue
@@ -20,11 +20,10 @@ import { computed } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { Id, NodeType } from '@tmagic/core';
-import { FieldProps } from '@tmagic/form';
+import { FieldProps, type PageFragmentSelectConfig } from '@tmagic/form';
 
 import Icon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { PageFragmentSelectConfig } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsPageFragmentSelect',
diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index 35275f67..6dae68d6 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@@ -47,7 +47,7 @@ import { throttle } from 'lodash-es';
 
 import type { Id, MNode } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormItem, FormState } from '@tmagic/form';
+import type { FieldProps, FormState, UISelectConfig } from '@tmagic/form';
 import { getIdFromEl } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
@@ -57,7 +57,7 @@ defineOptions({
   name: 'MFieldsUISelect',
 });
 
-const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
+const props = defineProps<FieldProps<UISelectConfig>>();
 
 const emit = defineEmits(['change']);
 
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 096c724d..4f105897 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -21,27 +21,8 @@ import type EventEmitter from 'events';
 import Sortable, { type Options, type SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties } from 'type-fest';
 
-import type {
-  CodeBlockContent,
-  CodeBlockDSL,
-  DataSourceFieldType,
-  DataSourceSchema,
-  Id,
-  MApp,
-  MContainer,
-  MNode,
-  MPage,
-  MPageFragment,
-} from '@tmagic/core';
-import type {
-  ChildConfig,
-  FilterFunction,
-  FormConfig,
-  FormItem,
-  FormState,
-  Input,
-  TableColumnConfig,
-} from '@tmagic/form';
+import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
+import type { FormConfig, TableColumnConfig } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
@@ -562,25 +543,6 @@ export interface HistoryState {
   canUndo: boolean;
 }
 
-export interface EventSelectConfig {
-  name: string;
-  type: 'event-select';
-  src: 'datasource' | 'component';
-  labelWidth?: string;
-  /** 事件名称表单配置 */
-  eventNameConfig?: FormItem;
-  /** 动作类型配置 */
-  actionTypeConfig?: FormItem;
-  /** 联动组件配置 */
-  targetCompConfig?: FormItem;
-  /** 联动组件动作配置 */
-  compActionConfig?: FormItem;
-  /** 联动代码配置 */
-  codeActionConfig?: FormItem;
-  /** 联动数据源配置 */
-  dataSourceActionConfig?: FormItem;
-}
-
 export enum KeyBindingCommand {
   /** 复制 */
   COPY_NODE = 'tmagic-system-copy-node',
@@ -636,69 +598,6 @@ export interface KeyBindingCacheItem {
   bound: boolean;
 }
 
-export interface CodeSelectColConfig extends FormItem {
-  type: 'code-select-col';
-  /** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
-  notEditable?: boolean | FilterFunction;
-}
-
-export interface PageFragmentSelectConfig extends FormItem {
-  type: 'page-fragment-select';
-}
-
-export interface DataSourceSelect extends FormItem, Input {
-  type: 'data-source-select';
-  /** 数据源类型: base、http... */
-  dataSourceType?: string;
-  /** 是否要编译成数据源的data。
-   * id: 不编译，就是要数据源id;
-   * value: 要编译（数据源data）
-   * */
-  value?: 'id' | 'value';
-  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
-  notEditable?: boolean | FilterFunction;
-}
-
-export interface DataSourceMethodSelectConfig extends FormItem {
-  type: 'data-source-method-select';
-  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
-  notEditable?: boolean | FilterFunction;
-}
-
-export interface DataSourceFieldSelectConfig extends FormItem {
-  type: 'data-source-field-select';
-  /**
-   * 是否要编译成数据源的data。
-   * key: 不编译，就是要数据源id和field name;
-   * value: 要编译（数据源data[`${filed}`]）
-   * */
-  value?: 'key' | 'value';
-  /** 是否严格的遵守父子节点不互相关联 */
-  checkStrictly?:
-    | boolean
-    | ((
-        mForm: FormState | undefined,
-        data: {
-          model: Record<any, any>;
-          values: Record<any, any>;
-          parent?: Record<any, any>;
-          formValue: Record<any, any>;
-          prop: string;
-          config: DataSourceFieldSelectConfig;
-          dataSource?: DataSourceSchema;
-        },
-      ) => boolean);
-  dataSourceFieldType?: DataSourceFieldType[];
-  fieldConfig?: ChildConfig;
-  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
-  notEditable?: boolean | FilterFunction;
-}
-
-export interface CondOpSelectConfig extends FormItem {
-  type: 'cond-op';
-  parentFields?: string[];
-}
-
 /** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
   /** 数据源类型 */
diff --git a/packages/editor/src/utils/data-source/formConfigs/base.ts b/packages/editor/src/utils/data-source/formConfigs/base.ts
index 9fa725d0..b1785ba6 100644
--- a/packages/editor/src/utils/data-source/formConfigs/base.ts
+++ b/packages/editor/src/utils/data-source/formConfigs/base.ts
@@ -1,7 +1,7 @@
-import type { FormConfig } from '@tmagic/form';
+import { defineFormConfig } from '@tmagic/form';
 
-export default function (): FormConfig {
-  return [
+export default () =>
+  defineFormConfig([
     {
       name: 'id',
       type: 'hidden',
@@ -26,5 +26,4 @@ export default function (): FormConfig {
       name: 'description',
       text: '描述',
     },
-  ];
-}
+  ]);
diff --git a/packages/editor/src/utils/data-source/formConfigs/http.ts b/packages/editor/src/utils/data-source/formConfigs/http.ts
index f1a88910..1618905a 100644
--- a/packages/editor/src/utils/data-source/formConfigs/http.ts
+++ b/packages/editor/src/utils/data-source/formConfigs/http.ts
@@ -1,6 +1,6 @@
-import { FormConfig } from '@tmagic/form';
+import { defineFormConfig } from '@tmagic/form';
 
-export default [
+export default defineFormConfig([
   {
     name: 'autoFetch',
     text: '自动请求',
@@ -59,4 +59,4 @@ export default [
       },
     ],
   },
-] as FormConfig;
+]);
diff --git a/packages/form-schema/package.json b/packages/form-schema/package.json
new file mode 100644
index 00000000..55574368
--- /dev/null
+++ b/packages/form-schema/package.json
@@ -0,0 +1,41 @@
+{
+  "version": "1.5.16",
+  "name": "@tmagic/form-schema",
+  "type": "module",
+  "main": "dist/tmagic-form-schema.umd.cjs",
+  "module": "dist/tmagic-form-schema.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/tmagic-form-schema.js",
+      "require": "./dist/tmagic-form-schema.umd.cjs"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "directory": "packages/form-schema",
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@tmagic/schema": "workspace:*"
+  },
+  "peerDependencies": {
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  }
+}
diff --git a/packages/form-schema/src/base.ts b/packages/form-schema/src/base.ts
new file mode 100644
index 00000000..d34af7d0
--- /dev/null
+++ b/packages/form-schema/src/base.ts
@@ -0,0 +1,783 @@
+import type { EditorChildConfig } from './editor';
+
+type ElMessageBoxShortcutMethod = ((
+  message: string,
+  title: string,
+  options?: any,
+  appContext?: any | null,
+) => Promise<any>) &
+  ((message: string, options?: any, appContext?: any | null) => Promise<any>);
+
+export interface ChangeRecord {
+  propPath?: string;
+  value: any;
+}
+
+export interface OnChangeHandlerData {
+  model: FormValue;
+  values?: FormValue;
+  parent?: FormValue;
+  formValue?: FormValue;
+  config: any;
+  prop: string;
+  changeRecords: ChangeRecord[];
+  setModel: (prop: string, value: any) => void;
+}
+
+export type FormValue = Record<string | number, any>;
+
+export type OnChangeHandler = (mForm: FormState | undefined, value: any, data: OnChangeHandlerData) => any;
+
+type DefaultValueFunction = (mForm: FormState | undefined) => any;
+
+export interface FieldProps<T = any> {
+  config: T;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+  lastValues?: Record<string, any>;
+}
+
+/**
+ * 整个表单的数据，会注入到各个组件中去
+ */
+export type FormState = {
+  config: FormConfig;
+  popperClass?: string;
+  initValues: FormValue;
+  lastValues: FormValue;
+  isCompare: boolean;
+  values: FormValue;
+  $emit: (event: string, ...args: any[]) => void;
+  keyProp?: string;
+  parentValues?: FormValue;
+  setField: (prop: string, field: any) => void;
+  getField: (prop: string) => any;
+  deleteField: (prop: string) => any;
+  $messageBox: {
+    alert: ElMessageBoxShortcutMethod;
+    confirm: ElMessageBoxShortcutMethod;
+    prompt: ElMessageBoxShortcutMethod;
+    close(): void;
+  };
+  $message: {
+    success: (msg: string) => void;
+    warning: (msg: string) => void;
+    info: (msg: string) => void;
+    error: (msg: string) => void;
+    closeAll: () => void;
+  };
+  [key: string]: any;
+};
+
+/**
+ * 排序配置
+ */
+export interface SortProp {
+  /** 跟该值排序 */
+  prop: string;
+  order: 'ascending' | 'descending';
+}
+
+export interface FormItem {
+  /** vnode的key值，默认是遍历数组时的index */
+  __key?: string | number;
+  /** 表单域标签的的宽度，例如 '50px'。支持 auto。 */
+  labelWidth?: string;
+  /** label 标签的title属性 */
+  labelTitle?: string;
+  className?: string;
+  /** 表单组件类型 */
+  type?: string | TypeFunction;
+  /** 字段名 */
+  name?: string | number;
+  /** 额外的提示信息，和 help 类似，当提示文案同时出现时，可以使用这个。 */
+  extra?: string | FilterFunction<string>;
+  /** 配置提示信息 */
+  tooltip?: string | FilterFunction<string>;
+  /** 是否置灰 */
+  disabled?: boolean | FilterFunction;
+  /** 使用表单中的值作为key，例如配置了text，则使用model.text作为key */
+  key?: string;
+  /** 是否显示 */
+  display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
+  /** 值发生改变时调用的方法 */
+  onChange?: OnChangeHandler;
+  /** label 标签的文本 */
+  text?: string | FilterFunction<string>;
+  /** 右侧感叹号 */
+  tip?: string;
+
+  filter?: 'number' | OnChangeHandler;
+  /** 是否去除首尾空格 */
+  trim?: boolean;
+  /** 默认值 */
+  defaultValue?: any | DefaultValueFunction;
+  /** 表单验证规则 */
+  rules?: Rule[];
+  extensible?: boolean;
+  dynamicKey?: string;
+  /** 是否需要显示`展开更多配置` */
+  expand?: boolean;
+  [key: string]: any;
+}
+
+export interface ContainerCommonConfig {
+  items: FormConfig;
+  onInitValue?: (
+    mForm: FormState | undefined,
+    data: {
+      formValue: FormValue;
+      initValue: FormValue;
+    },
+  ) => FormValue;
+  extensible?: boolean;
+}
+
+export interface Rule {
+  message?: string;
+  /** 系统提供的验证器类型。有：string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any */
+  type?: string;
+  /** 是否必填 */
+  required?: boolean;
+  trigger?: string;
+  /** 自定义验证器 */
+  validator?: (
+    options: {
+      rule: string;
+      value: any;
+      callback: Function;
+      source: Object;
+      options: {
+        messages: string;
+      };
+    },
+    data: {
+      /** 表单的初始值 */
+      values: FormValue;
+      /** 当前作用域下的值 */
+      model: FormValue;
+      parent: FormValue;
+      /** 整个表单的值 */
+      formValue: FormValue;
+      prop: string;
+      config: any;
+    },
+    mForm: FormState | undefined,
+  ) => void;
+}
+
+export interface Input {
+  /** 输入框没有内容时显示的文案 */
+  placeholder?: string;
+}
+
+export type TypeFunction = (
+  mForm: FormState | undefined,
+  data: {
+    model: FormValue;
+  },
+) => string;
+
+export type FilterFunction<T = boolean> = (
+  mForm: FormState | undefined,
+  data: {
+    model: FormValue;
+    values: FormValue;
+    parent?: FormValue;
+    formValue: FormValue;
+    prop: string;
+    config: any;
+    index?: number;
+  },
+) => T;
+
+/**
+ * 下拉选择器选项配置
+ */
+export interface SelectConfigOption {
+  /** 选项的标签 */
+  text: string | SelectOptionTextFunction;
+  /** 选项的值 */
+  value: any | SelectOptionValueFunction;
+  /** 是否禁用该选项 */
+  disabled?: boolean;
+}
+
+export interface SelectOption {
+  /** 选项的标签 */
+  text: string;
+  /** 选项的值 */
+  value: any;
+  /** 是否禁用该选项 */
+  disabled?: boolean;
+}
+
+/**
+ * 下拉选择器分组选项配置
+ */
+export interface SelectConfigGroupOption {
+  /** 分组的组名 */
+  label: string;
+  /** 是否禁用该选项组 */
+  disabled: boolean;
+  options: {
+    /** 选项的标签 */
+    label: string | SelectOptionTextFunction;
+    /** 选项的值 */
+    value: any | SelectOptionValueFunction;
+    /** 是否禁用该选项 */
+    disabled?: boolean;
+  }[];
+}
+
+export interface SelectGroupOption {
+  /** 分组的组名 */
+  label: string;
+  /** 是否禁用该选项组 */
+  disabled: boolean;
+  options: {
+    /** 选项的标签 */
+    label?: string;
+    text?: string;
+    /** 选项的值 */
+    value: any;
+    /** 是否禁用该选项 */
+    disabled?: boolean;
+  }[];
+}
+
+type SelectOptionFunction = (
+  mForm: FormState | undefined,
+  data: {
+    model: any;
+    prop?: string;
+    formValues: any;
+    formValue: any;
+    config: any;
+  },
+) => SelectOption[] | SelectGroupOption[];
+
+type RemoteSelectOptionBodyFunction = (
+  mForm: FormState | undefined,
+  data: {
+    model: any;
+    formValue: any;
+    formValues: any;
+    config: any;
+  },
+) => Record<string, any>;
+
+type RemoteSelectOptionAfterRequestFunction = (
+  mForm: FormState | undefined,
+  res: any,
+  data: {
+    model: any;
+    formValue: any;
+    formValues: any;
+    config: any;
+    prop: string;
+    postOptions: Record<string, any>;
+  },
+) => any;
+
+type RemoteSelectOptionBeforeRequestFunction = (
+  mForm: FormState | undefined,
+  postOptions: Record<string, any>,
+  data: {
+    model: any;
+    formValue: any;
+    formValues: any;
+    config: any;
+    prop: string;
+  },
+) => Record<string, any>;
+
+type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[] | SelectGroupOption[];
+type SelectOptionValueFunction = (item: Record<string, any>) => any;
+type SelectOptionTextFunction = (item: Record<string, any>) => string;
+
+export interface CascaderOption {
+  /** 指定选项的值为选项对象的某个属性值 */
+  value: any;
+  /** 指定选项标签为选项对象的某个属性值 */
+  label: string;
+  /** 指定选项的子选项为选项对象的某个属性值 */
+  children?: CascaderOption[];
+}
+
+/**
+ * 日期范围
+ */
+export interface DaterangeConfig extends FormItem {
+  type: 'daterange';
+  defaultTime?: Date[];
+  names?: string[];
+  valueFormat?: string;
+  dateFormat?: string;
+  timeFormat?: string;
+}
+
+/**
+ * html编辑器
+ */
+export interface HtmlField extends FormItem {
+  type: 'html';
+  /** 是否异步加载编辑的内容 */
+  asyncLoad?: {
+    name: string | number;
+  };
+}
+
+/** 展示文本，不可编辑 */
+export interface DisplayConfig extends FormItem {
+  type: 'display';
+  initValue?: string | number | boolean;
+}
+
+/** 文本输入框 */
+export interface TextConfig extends FormItem, Input {
+  type?: 'text';
+  tooltip?: string;
+  /** 后置元素，一般为标签或按钮 */
+  append?:
+    | string
+    | {
+        text: string;
+        value?: 0 | 1;
+        type: 'button';
+        handler?: (
+          mForm: FormState | undefined,
+          data: {
+            model: any;
+            values: any;
+          },
+        ) => void;
+      };
+}
+
+/**
+ * 文本域
+ */
+export interface TextareaConfig extends FormItem {
+  type: 'textarea';
+  placeholder?: string;
+}
+
+/**
+ * 计数器
+ */
+export interface NumberConfig extends FormItem {
+  type?: 'number';
+  tooltip?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  placeholder?: string;
+}
+
+/**
+ * 数值范围
+ */
+export interface NumberRangeConfig extends FormItem {
+  type?: 'number-range';
+}
+
+/**
+ * 隐藏域
+ */
+export interface HiddenConfig extends FormItem {
+  type: 'hidden';
+}
+
+/**
+ * 日期选择器
+ */
+export interface DateConfig extends FormItem, Input {
+  type: 'date';
+  format?: 'YYYY-MM-dd HH:mm:ss' | string;
+  valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
+}
+
+/**
+ * 日期时间选择器
+ */
+export interface DateTimeConfig extends FormItem, Input {
+  type: 'datetime';
+  defaultTime?: Date[];
+  format?: 'YYYY-MM-dd HH:mm:ss' | string;
+  valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
+}
+
+/**
+ * 时间选择器
+ */
+export interface TimeConfig extends FormItem, Input {
+  type: 'time';
+  format?: 'HH:mm:ss' | string;
+  valueFormat?: 'HH:mm:ss' | string;
+}
+
+/**
+ * 单个多选框
+ */
+export interface CheckboxConfig extends FormItem {
+  type: 'checkbox';
+  activeValue?: number | string;
+  inactiveValue?: number | string;
+}
+
+/**
+ * 开关
+ */
+export interface SwitchConfig extends FormItem {
+  type: 'switch';
+  activeValue?: boolean | number | string;
+  inactiveValue?: boolean | number | string;
+}
+
+/**
+ * 单选框
+ */
+export interface RadioGroupConfig extends FormItem {
+  type: 'radio-group';
+  childType?: 'default' | 'button';
+  options: {
+    value: string | number | boolean;
+    text: string;
+    icon?: any;
+    tooltip?: string;
+  }[];
+}
+
+/**
+ * 颜色选择器
+ */
+export interface ColorPickConfig extends FormItem {
+  type: 'colorPicker';
+}
+
+export interface CheckboxGroupOption {
+  value: any;
+  text: string;
+  disabled?: boolean;
+}
+
+/**
+ * 多选框组
+ */
+export interface CheckboxGroupConfig extends FormItem {
+  type: 'checkbox-group';
+  options: CheckboxGroupOption[] | FilterFunction<CheckboxGroupOption[]>;
+}
+
+/**
+ * 下拉选择器
+ */
+export interface SelectConfig extends FormItem, Input {
+  type: 'select';
+  clearable?: boolean;
+  multiple?: boolean;
+  valueKey?: string;
+  allowCreate?: boolean;
+  filterable?: boolean;
+  group?: boolean;
+  options?: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
+  remote?: true;
+  option?: {
+    url: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
+    initUrl?: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
+    method?: 'jsonp' | string;
+    cache?: boolean;
+    timeout?: number;
+    mode?: string;
+    headers?: {
+      [key: string]: string;
+    };
+    json?: false | boolean;
+    body?: Record<string, any> | RemoteSelectOptionBodyFunction;
+    initBody?: Record<string, any> | RemoteSelectOptionBodyFunction;
+    jsonpCallback?: 'callback' | string;
+    afterRequest?: RemoteSelectOptionAfterRequestFunction;
+    afterInitRequest?: RemoteSelectOptionAfterRequestFunction;
+    beforeRequest?: RemoteSelectOptionBeforeRequestFunction;
+    beforeInitRequest?: RemoteSelectOptionBeforeRequestFunction;
+    root?: string;
+    totalKey?: string;
+    initRoot?: string;
+    item?: RemoteSelectOptionItemFunction;
+    value?: string | SelectOptionValueFunction;
+    text?: string | SelectOptionTextFunction;
+  };
+}
+
+/**
+ * 链接
+ */
+export interface LinkConfig extends FormItem {
+  type: 'link';
+  href?: string | ((model: Record<string, any>) => string);
+  css?: {
+    [key: string]: string | number;
+  };
+  disabledCss?: {
+    [key: string]: string | number;
+  };
+  formTitle?: string;
+  formWidth?: number | string;
+  displayText?:
+    | ((
+        mForm: FormState | undefined,
+        data: {
+          model: Record<any, any>;
+        },
+      ) => string)
+    | string;
+  form:
+    | FormConfig
+    | ((
+        mForm: FormState | undefined,
+        data: {
+          model: Record<any, any>;
+          values: Record<any, any>;
+        },
+      ) => FormConfig);
+  fullscreen?: boolean;
+}
+
+/**
+ * 级联选择器
+ */
+export interface CascaderConfig extends FormItem, Input {
+  type: 'cascader';
+  remote?: boolean;
+  /** 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值，默认 true */
+  emitPath?: boolean;
+  /** 是否多选，默认 false */
+  multiple?: boolean;
+  /** 是否严格的遵守父子节点不互相关联，默认 false */
+  checkStrictly?: boolean | FilterFunction<boolean>;
+  /** 弹出内容的自定义类名 */
+  popperClass?: string;
+  /** 合并成字符串时的分隔符 */
+  valueSeparator?: string | FilterFunction<string>;
+  options?:
+    | ((
+        mForm: FormState | undefined,
+        data: {
+          model: Record<any, any>;
+          prop: string;
+          formValue: Record<any, any>;
+        },
+      ) => CascaderOption[])
+    | CascaderOption[];
+  option?: {
+    url: string;
+    cache?: boolean;
+    timeout?: number;
+    body?: Record<string, any> | RemoteSelectOptionBodyFunction;
+    root: 'string';
+    item: (optionsData: Record<string, any>) => CascaderOption[];
+  };
+}
+
+export interface DynamicFieldConfig extends FormItem {
+  type: 'dynamic-field';
+  returnFields: (
+    config: DynamicFieldConfig,
+    model: Record<any, any>,
+    request: Object,
+  ) => {
+    name: string;
+    label: string;
+    defaultValue: string;
+  }[];
+  dynamicKey: string;
+}
+
+/**
+ * 分组容器
+ */
+export interface RowConfig extends FormItem {
+  type: 'row';
+  span: number;
+  items: ({ span?: number } & (ChildConfig | EditorChildConfig))[];
+}
+
+/**
+ * 标签页容器
+ */
+export interface TabPaneConfig {
+  status?: string;
+  title: string;
+  lazy?: boolean;
+  labelWidth?: string;
+  items: FormConfig;
+  onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
+  [key: string]: any;
+}
+
+export interface TabConfig extends FormItem, ContainerCommonConfig {
+  type: 'tab' | 'dynamic-tab';
+  tabType?: string;
+  editable?: boolean;
+  dynamic?: boolean;
+  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
+  items: TabPaneConfig[];
+  onChange?: (mForm: FormState | undefined, data: any) => void;
+  onTabAdd?: (mForm: FormState | undefined, data: any) => void;
+  onTabRemove?: (mForm: FormState | undefined, tabName: string, data: any) => void;
+  onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
+  activeChange?: (mForm: FormState | undefined, tabName: string, data: any) => void;
+}
+
+/**
+ * 分组
+ */
+export interface FieldsetConfig extends FormItem, ContainerCommonConfig {
+  type: 'fieldset';
+  checkbox?: boolean;
+  expand?: boolean;
+  legend?: string;
+  schematic?: string;
+}
+
+/**
+ * 面板容器
+ */
+export interface PanelConfig extends FormItem, ContainerCommonConfig {
+  type: 'panel';
+  expand?: boolean;
+  title?: string;
+  schematic?: string;
+}
+
+export interface TableColumnConfig extends FormItem {
+  name?: string;
+  label: string;
+  width?: string | number;
+  sortable?: boolean;
+  [key: string]: any;
+}
+
+/**
+ * 表格容器
+ */
+export interface TableConfig extends FormItem {
+  type: 'table' | 'groupList' | 'group-list';
+  items: TableColumnConfig[];
+  tableItems?: TableColumnConfig[];
+  groupItems?: TableColumnConfig[];
+  enableToggleMode?: boolean;
+  /** 最大行数 */
+  max?: number;
+  /** 最大高度 */
+  maxHeight?: number | string;
+  border?: boolean;
+  /** 显示行号 */
+  showIndex?: boolean;
+  /** 操作栏宽度 */
+  operateColWidth?: number | string;
+  pagination?: boolean;
+  enum?: any[];
+  /** 是否显示添加按钮 */
+  addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
+  /** 是否显示删除按钮 */
+  delete?: (model: any, index: number, values: any) => boolean | boolean;
+  copyable?: (model: any, data: any) => boolean | boolean;
+  /** 是否显示导入按钮 */
+  importable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
+  /** 是否显示checkbox */
+  selection?: (mForm: FormState | undefined, data: any) => boolean | boolean | 'single';
+  /** 新增的默认行 */
+  defaultAdd?: (mForm: FormState | undefined, data: any) => any;
+  onSelect?: (mForm: FormState | undefined, data: any) => any;
+  defautSort?: SortProp;
+  defaultSort?: SortProp;
+  dropSort?: boolean;
+  /** 是否显示全屏按钮 */
+  enableFullscreen?: boolean;
+  fixed?: boolean;
+  itemExtra?: string | FilterFunction<string>;
+  rowKey?: string;
+  /** table 新增行时前置回调 */
+  beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean;
+}
+
+export interface GroupListConfig extends FormItem {
+  type: 'table' | 'groupList' | 'group-list';
+  span?: number;
+  enableToggleMode?: boolean;
+  items: FormConfig;
+  groupItems?: FormConfig;
+  tableItems?: FormConfig;
+  titleKey?: string;
+  titlePrefix?: string;
+  title?: string | FilterFunction<string>;
+  itemExtra?: string | FilterFunction<string>;
+  expandAll?: boolean;
+  addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
+  defaultAdd?: (mForm: FormState | undefined, data: any) => any;
+  delete?: (model: any, index: number | string | symbol, values: any) => boolean | boolean;
+  copyable?: FilterFunction<boolean>;
+  movable?: (
+    mForm: FormState | undefined,
+    index: number | string | symbol,
+    model: any,
+    groupModel: any,
+  ) => boolean | boolean;
+  moveSpecifyLocation?: boolean;
+  [key: string]: any;
+}
+
+interface StepItemConfig extends FormItem, ContainerCommonConfig {
+  title: string;
+}
+
+export interface StepConfig extends FormItem {
+  type: 'step';
+  /** 每个 step 的间距，不填写将自适应间距。支持百分比。 */
+  space?: string | number;
+  items: StepItemConfig[];
+}
+
+export interface ComponentConfig extends FormItem {
+  type: 'component';
+  id: string;
+  extend: any;
+  display: any;
+}
+
+export type ChildConfig =
+  | FormItem
+  | TabConfig
+  | RowConfig
+  | FieldsetConfig
+  | PanelConfig
+  | TableConfig
+  | GroupListConfig
+  | StepConfig
+  | DisplayConfig
+  | TextConfig
+  | HiddenConfig
+  | LinkConfig
+  | DaterangeConfig
+  | SelectConfig
+  | CascaderConfig
+  | HtmlField
+  | DateConfig
+  | ColorPickConfig
+  | TimeConfig
+  | DateTimeConfig
+  | CheckboxConfig
+  | SwitchConfig
+  | RadioGroupConfig
+  | TextareaConfig
+  | DynamicFieldConfig
+  | ComponentConfig;
+
+export type FormConfig = (ChildConfig | EditorChildConfig)[];
diff --git a/packages/form-schema/src/editor.ts b/packages/form-schema/src/editor.ts
new file mode 100644
index 00000000..1994c9db
--- /dev/null
+++ b/packages/form-schema/src/editor.ts
@@ -0,0 +1,155 @@
+import type { DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
+
+import type { ChildConfig, FilterFunction, FormItem, FormState, Input } from './base';
+
+export interface DataSourceFieldSelectConfig extends FormItem {
+  type: 'data-source-field-select';
+  /**
+   * 是否要编译成数据源的data。
+   * key: 不编译，就是要数据源id和field name;
+   * value: 要编译（数据源data[`${filed}`]）
+   * */
+  value?: 'key' | 'value';
+  /** 是否严格的遵守父子节点不互相关联 */
+  checkStrictly?:
+    | boolean
+    | ((
+        mForm: FormState | undefined,
+        data: {
+          model: Record<any, any>;
+          values: Record<any, any>;
+          parent?: Record<any, any>;
+          formValue: Record<any, any>;
+          prop: string;
+          config: DataSourceFieldSelectConfig;
+          dataSource?: DataSourceSchema;
+        },
+      ) => boolean);
+  dataSourceFieldType?: DataSourceFieldType[];
+  fieldConfig?: ChildConfig;
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
+}
+
+export interface CodeConfig extends FormItem {
+  type: 'code';
+  language?: string;
+  options?: {
+    [key: string]: any;
+  };
+  height?: string;
+  parse?: boolean;
+}
+
+export interface CodeLinkConfig extends FormItem {
+  type: 'code-link';
+  formTitle?: string;
+  codeOptions?: Object;
+}
+
+export interface CodeSelectConfig extends FormItem {
+  type: 'code-select';
+  className?: string;
+}
+
+export interface CodeSelectColConfig extends FormItem {
+  type: 'code-select-col';
+  /** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
+  notEditable?: boolean | FilterFunction;
+}
+
+export interface CondOpSelectConfig extends FormItem {
+  type: 'cond-op';
+  parentFields?: string[];
+}
+
+export interface DataSourceFieldsConfig extends FormItem {
+  type: 'data-source-fields';
+}
+
+export interface DataSourceInputConfig extends FormItem {
+  type: 'data-source-input';
+}
+
+export interface DataSourceMethodsConfig extends FormItem {
+  type: 'data-source-methods';
+}
+
+export interface DataSourceMethodSelectConfig extends FormItem {
+  type: 'data-source-method-select';
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
+}
+
+export interface DataSourceMocksConfig extends FormItem {
+  type: 'data-source-mocks';
+}
+
+export interface DataSourceSelect extends FormItem, Input {
+  type: 'data-source-select';
+  /** 数据源类型: base、http... */
+  dataSourceType?: string;
+  /** 是否要编译成数据源的data。
+   * id: 不编译，就是要数据源id;
+   * value: 要编译（数据源data）
+   * */
+  value?: 'id' | 'value';
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
+}
+
+export interface DisplayCondsConfig extends FormItem {
+  titlePrefix?: string;
+  parentFields?: string[] | FilterFunction<string[]>;
+}
+
+export interface EventSelectConfig {
+  name: string;
+  type: 'event-select';
+  src: 'datasource' | 'component';
+  labelWidth?: string;
+  /** 事件名称表单配置 */
+  eventNameConfig?: FormItem;
+  /** 动作类型配置 */
+  actionTypeConfig?: FormItem;
+  /** 联动组件配置 */
+  targetCompConfig?: FormItem;
+  /** 联动组件动作配置 */
+  compActionConfig?: FormItem;
+  /** 联动代码配置 */
+  codeActionConfig?: FormItem;
+  /** 联动数据源配置 */
+  dataSourceActionConfig?: FormItem;
+}
+
+export interface KeyValueConfig extends FormItem {
+  type: 'key-value';
+  advanced?: boolean;
+}
+
+export interface PageFragmentSelectConfig extends FormItem {
+  type: 'page-fragment-select';
+}
+
+export interface UISelectConfig extends FormItem {
+  type: 'ui-select';
+}
+
+export type EditorChildConfig =
+  | DataSourceFieldSelectConfig
+  | CodeConfig
+  | CodeLinkConfig
+  | CodeSelectConfig
+  | CodeSelectColConfig
+  | CondOpSelectConfig
+  | DataSourceFieldsConfig
+  | DataSourceInputConfig
+  | DataSourceMethodsConfig
+  | DataSourceMethodSelectConfig
+  | DataSourceMocksConfig
+  | DataSourceSelect
+  | DisplayCondsConfig
+  | EventSelectConfig
+  | KeyValueConfig
+  | PageFragmentSelectConfig
+  | UISelectConfig;
diff --git a/packages/form-schema/src/index.ts b/packages/form-schema/src/index.ts
new file mode 100644
index 00000000..592590ba
--- /dev/null
+++ b/packages/form-schema/src/index.ts
@@ -0,0 +1,6 @@
+import type { FormConfig } from './base';
+
+export * from './base';
+export * from './editor';
+
+export const defineFormConfig = <T = FormConfig>(config: T): T => config;
diff --git a/packages/form/package.json b/packages/form/package.json
index 34f0cb88..98e71a30 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -51,6 +51,7 @@
   "peerDependencies": {
     "@tmagic/design": "workspace:*",
     "@tmagic/utils": "workspace:*",
+    "@tmagic/form-schema": "workspace:*",
     "vue": ">=3.5.0",
     "typescript": "*"
   },
diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index 3824d78a..34c20ab7 100644
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@@ -13,7 +13,7 @@
       <Container
         v-for="(item, index) in config"
         :disabled="disabled"
-        :key="item[keyProp] ?? index"
+        :key="(item as Record<string, any>)[keyProp] ?? index"
         :config="item"
         :model="values"
         :last-values="lastValuesProcessed"
diff --git a/packages/form/src/containers/Panel.vue b/packages/form/src/containers/Panel.vue
index 1d9f3ded..f6526a4c 100644
--- a/packages/form/src/containers/Panel.vue
+++ b/packages/form/src/containers/Panel.vue
@@ -20,7 +20,7 @@
         <div style="flex: 1">
           <Container
             v-for="(item, index) in items"
-            :key="item[mForm?.keyProp || '__key'] ?? index"
+            :key="(item as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
             :config="item"
             :model="name ? model[name] : model"
             :lastValues="name ? lastValues[name] : lastValues"
@@ -40,7 +40,7 @@
       <template v-else>
         <Container
           v-for="(item, index) in items"
-          :key="item[mForm?.keyProp || '__key'] ?? index"
+          :key="(item as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
           :config="item"
           :model="name ? model[name] : model"
           :lastValues="name ? lastValues[name] : lastValues"
diff --git a/packages/form/src/containers/Row.vue b/packages/form/src/containers/Row.vue
index 0a35f41b..2aa2610c 100644
--- a/packages/form/src/containers/Row.vue
+++ b/packages/form/src/containers/Row.vue
@@ -2,7 +2,7 @@
   <TMagicRow :gutter="10">
     <Col
       v-for="(col, index) in config.items"
-      :key="col[mForm?.keyProp || '__key'] ?? index"
+      :key="(col as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
       :span="col.span || config.span || 24 / config.items.length"
       :config="col"
       :labelWidth="config.labelWidth || labelWidth"
diff --git a/packages/form/src/containers/Step.vue b/packages/form/src/containers/Step.vue
index 9ed2fb50..85218697 100644
--- a/packages/form/src/containers/Step.vue
+++ b/packages/form/src/containers/Step.vue
@@ -15,7 +15,7 @@
         <Container
           v-if="item"
           v-show="active - 1 === index"
-          :key="item[mForm?.keyProp || '__key']"
+          :key="(item as Record<string, any>)[mForm?.keyProp || '__key']"
           :config="item"
           :model="step.name ? model[step.name] : model"
           :lastValues="step.name ? lastValues[step.name] : lastValues"
diff --git a/packages/form/src/containers/Tabs.vue b/packages/form/src/containers/Tabs.vue
index f5d77f87..d36c04f7 100644
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@@ -34,7 +34,7 @@
       </template>
       <Container
         v-for="item in tabItems(tab)"
-        :key="item[mForm?.keyProp || '__key']"
+        :key="(item as Record<string, any>)[mForm?.keyProp || '__key']"
         :config="item"
         :disabled="disabled"
         :model="
diff --git a/packages/form/src/schema.ts b/packages/form/src/schema.ts
index 52ec2aec..60f3f942 100644
--- a/packages/form/src/schema.ts
+++ b/packages/form/src/schema.ts
@@ -1,22 +1,4 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { TMagicMessage, TMagicMessageBox } from '@tmagic/design';
+export * from '@tmagic/form-schema';
 
 export interface ValidateError {
   message: string;
@@ -32,760 +14,3 @@ export interface ContainerChangeEventData {
   modifyKey?: string;
   changeRecords?: ChangeRecord[];
 }
-
-export interface FieldProps<T = any> {
-  config: T;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}
-
-/**
- * 整个表单的数据，会注入到各个组件中去
- */
-export type FormState = {
-  config: FormConfig;
-  popperClass?: string;
-  initValues: FormValue;
-  lastValues: FormValue;
-  isCompare: boolean;
-  values: FormValue;
-  $emit: (event: string, ...args: any[]) => void;
-  keyProp?: string;
-  parentValues?: FormValue;
-  setField: (prop: string, field: any) => void;
-  getField: (prop: string) => any;
-  deleteField: (prop: string) => any;
-  $messageBox: TMagicMessageBox;
-  $message: TMagicMessage;
-  [key: string]: any;
-};
-
-/**
- * 排序配置
- */
-export interface SortProp {
-  /** 跟该值排序 */
-  prop: string;
-  order: 'ascending' | 'descending';
-}
-
-export interface FormItem {
-  /** vnode的key值，默认是遍历数组时的index */
-  __key?: string | number;
-  /** 表单域标签的的宽度，例如 '50px'。支持 auto。 */
-  labelWidth?: string;
-  /** label 标签的title属性 */
-  labelTitle?: string;
-  className?: string;
-  /** 表单组件类型 */
-  type?: string | TypeFunction;
-  /** 字段名 */
-  name?: string | number;
-  /** 额外的提示信息，和 help 类似，当提示文案同时出现时，可以使用这个。 */
-  extra?: string | FilterFunction<string>;
-  /** 配置提示信息 */
-  tooltip?: string | FilterFunction<string>;
-  /** 是否置灰 */
-  disabled?: boolean | FilterFunction;
-  /** 使用表单中的值作为key，例如配置了text，则使用model.text作为key */
-  key?: string;
-  /** 是否显示 */
-  display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
-  /** 值发生改变时调用的方法 */
-  onChange?: OnChangeHandler;
-  /** label 标签的文本 */
-  text?: string | FilterFunction<string>;
-  /** 右侧感叹号 */
-  tip?: string;
-
-  filter?: 'number' | OnChangeHandler;
-  /** 是否去除首尾空格 */
-  trim?: boolean;
-  /** 默认值 */
-  defaultValue?: any | DefaultValueFunction;
-  /** 表单验证规则 */
-  rules?: Rule[];
-  extensible?: boolean;
-  dynamicKey?: string;
-  /** 是否需要显示`展开更多配置` */
-  expand?: boolean;
-  [key: string]: any;
-}
-
-export interface ContainerCommonConfig {
-  items: FormConfig;
-  onInitValue?: (
-    mForm: FormState | undefined,
-    data: {
-      formValue: FormValue;
-      initValue: FormValue;
-    },
-  ) => FormValue;
-  extensible?: boolean;
-}
-
-export interface Rule {
-  message?: string;
-  /** 系统提供的验证器类型。有：string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any */
-  type?: string;
-  /** 是否必填 */
-  required?: boolean;
-  trigger?: string;
-  /** 自定义验证器 */
-  validator?: (
-    options: {
-      rule: string;
-      value: any;
-      callback: Function;
-      source: Object;
-      options: {
-        messages: string;
-      };
-    },
-    data: {
-      /** 表单的初始值 */
-      values: FormValue;
-      /** 当前作用域下的值 */
-      model: FormValue;
-      parent: FormValue;
-      /** 整个表单的值 */
-      formValue: FormValue;
-      prop: string;
-      config: any;
-    },
-    mForm: FormState | undefined,
-  ) => void;
-}
-
-export interface Input {
-  /** 输入框没有内容时显示的文案 */
-  placeholder?: string;
-}
-
-export type TypeFunction = (
-  mForm: FormState | undefined,
-  data: {
-    model: FormValue;
-  },
-) => string;
-
-export type FilterFunction<T = boolean> = (
-  mForm: FormState | undefined,
-  data: {
-    model: FormValue;
-    values: FormValue;
-    parent?: FormValue;
-    formValue: FormValue;
-    prop: string;
-    config: any;
-    index?: number;
-  },
-) => T;
-
-export interface OnChangeHandlerData {
-  model: FormValue;
-  values?: FormValue;
-  parent?: FormValue;
-  formValue?: FormValue;
-  config: any;
-  prop: string;
-  changeRecords: ChangeRecord[];
-  setModel: (prop: string, value: any) => void;
-}
-
-export type OnChangeHandler = (mForm: FormState | undefined, value: any, data: OnChangeHandlerData) => any;
-
-type DefaultValueFunction = (mForm: FormState | undefined) => any;
-
-/**
- * 下拉选择器选项配置
- */
-export interface SelectConfigOption {
-  /** 选项的标签 */
-  text: string | SelectOptionTextFunction;
-  /** 选项的值 */
-  value: any | SelectOptionValueFunction;
-  /** 是否禁用该选项 */
-  disabled?: boolean;
-}
-
-export interface SelectOption {
-  /** 选项的标签 */
-  text: string;
-  /** 选项的值 */
-  value: any;
-  /** 是否禁用该选项 */
-  disabled?: boolean;
-}
-
-/**
- * 下拉选择器分组选项配置
- */
-export interface SelectConfigGroupOption {
-  /** 分组的组名 */
-  label: string;
-  /** 是否禁用该选项组 */
-  disabled: boolean;
-  options: {
-    /** 选项的标签 */
-    label: string | SelectOptionTextFunction;
-    /** 选项的值 */
-    value: any | SelectOptionValueFunction;
-    /** 是否禁用该选项 */
-    disabled?: boolean;
-  }[];
-}
-
-export interface SelectGroupOption {
-  /** 分组的组名 */
-  label: string;
-  /** 是否禁用该选项组 */
-  disabled: boolean;
-  options: {
-    /** 选项的标签 */
-    label?: string;
-    text?: string;
-    /** 选项的值 */
-    value: any;
-    /** 是否禁用该选项 */
-    disabled?: boolean;
-  }[];
-}
-
-type SelectOptionFunction = (
-  mForm: FormState | undefined,
-  data: {
-    model: any;
-    prop?: string;
-    formValues: any;
-    formValue: any;
-    config: any;
-  },
-) => SelectOption[] | SelectGroupOption[];
-
-type RemoteSelectOptionBodyFunction = (
-  mForm: FormState | undefined,
-  data: {
-    model: any;
-    formValue: any;
-    formValues: any;
-    config: any;
-  },
-) => Record<string, any>;
-
-type RemoteSelectOptionAfterRequestFunction = (
-  mForm: FormState | undefined,
-  res: any,
-  data: {
-    model: any;
-    formValue: any;
-    formValues: any;
-    config: any;
-    prop: string;
-    postOptions: Record<string, any>;
-  },
-) => any;
-
-type RemoteSelectOptionBeforeRequestFunction = (
-  mForm: FormState | undefined,
-  postOptions: Record<string, any>,
-  data: {
-    model: any;
-    formValue: any;
-    formValues: any;
-    config: any;
-    prop: string;
-  },
-) => Record<string, any>;
-
-type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[] | SelectGroupOption[];
-type SelectOptionValueFunction = (item: Record<string, any>) => any;
-type SelectOptionTextFunction = (item: Record<string, any>) => string;
-
-export interface CascaderOption {
-  /** 指定选项的值为选项对象的某个属性值 */
-  value: any;
-  /** 指定选项标签为选项对象的某个属性值 */
-  label: string;
-  /** 指定选项的子选项为选项对象的某个属性值 */
-  children?: CascaderOption[];
-}
-
-/**
- * 日期范围
- */
-export interface DaterangeConfig extends FormItem {
-  type: 'daterange';
-  defaultTime?: Date[];
-  names?: string[];
-  valueFormat?: string;
-  dateFormat?: string;
-  timeFormat?: string;
-}
-
-/**
- * html编辑器
- */
-export interface HtmlField extends FormItem {
-  type: 'html';
-  /** 是否异步加载编辑的内容 */
-  asyncLoad?: {
-    name: string | number;
-  };
-}
-
-/** 展示文本，不可编辑 */
-export interface DisplayConfig extends FormItem {
-  type: 'display';
-  initValue?: string | number | boolean;
-}
-
-/** 文本输入框 */
-export interface TextConfig extends FormItem, Input {
-  type?: 'text';
-  tooltip?: string;
-  /** 后置元素，一般为标签或按钮 */
-  append?:
-    | string
-    | {
-        text: string;
-        value?: 0 | 1;
-        type: 'button';
-        handler?: (
-          mForm: FormState | undefined,
-          data: {
-            model: any;
-            values: any;
-          },
-        ) => void;
-      };
-}
-
-/**
- * 文本域
- */
-export interface TextareaConfig extends FormItem {
-  type: 'textarea';
-  placeholder?: string;
-}
-
-/**
- * 计数器
- */
-export interface NumberConfig extends FormItem {
-  type?: 'number';
-  tooltip?: string;
-  min?: number;
-  max?: number;
-  step?: number;
-  placeholder?: string;
-}
-
-/**
- * 数值范围
- */
-export interface NumberRangeConfig extends FormItem {
-  type?: 'number-range';
-}
-
-/**
- * 隐藏域
- */
-export interface HiddenConfig extends FormItem {
-  type: 'hidden';
-}
-
-/**
- * 日期选择器
- */
-export interface DateConfig extends FormItem, Input {
-  type: 'date';
-  format?: 'YYYY-MM-dd HH:mm:ss' | string;
-  valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
-}
-
-/**
- * 日期时间选择器
- */
-export interface DateTimeConfig extends FormItem, Input {
-  type: 'datetime';
-  defaultTime?: Date[];
-  format?: 'YYYY-MM-dd HH:mm:ss' | string;
-  valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
-}
-
-/**
- * 时间选择器
- */
-export interface TimeConfig extends FormItem, Input {
-  type: 'time';
-  format?: 'HH:mm:ss' | string;
-  valueFormat?: 'HH:mm:ss' | string;
-}
-
-/**
- * 单个多选框
- */
-export interface CheckboxConfig extends FormItem {
-  type: 'checkbox';
-  activeValue?: number | string;
-  inactiveValue?: number | string;
-}
-
-/**
- * 开关
- */
-export interface SwitchConfig extends FormItem {
-  type: 'switch';
-  activeValue?: boolean | number | string;
-  inactiveValue?: boolean | number | string;
-}
-
-/**
- * 单选框
- */
-export interface RadioGroupConfig extends FormItem {
-  type: 'radio-group';
-  childType?: 'default' | 'button';
-  options: {
-    value: string | number | boolean;
-    text: string;
-    icon?: any;
-    tooltip?: string;
-  }[];
-}
-
-/**
- * 颜色选择器
- */
-export interface ColorPickConfig extends FormItem {
-  type: 'colorPicker';
-}
-
-export interface CheckboxGroupOption {
-  value: any;
-  text: string;
-  disabled?: boolean;
-}
-
-/**
- * 多选框组
- */
-export interface CheckboxGroupConfig extends FormItem {
-  type: 'checkbox-group';
-  options: CheckboxGroupOption[] | FilterFunction<CheckboxGroupOption[]>;
-}
-
-/**
- * 下拉选择器
- */
-export interface SelectConfig extends FormItem, Input {
-  type: 'select';
-  clearable?: boolean;
-  multiple?: boolean;
-  valueKey?: string;
-  allowCreate?: boolean;
-  filterable?: boolean;
-  group?: boolean;
-  options?: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
-  remote?: true;
-  option?: {
-    url: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
-    initUrl?: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
-    method?: 'jsonp' | string;
-    cache?: boolean;
-    timeout?: number;
-    mode?: string;
-    headers?: {
-      [key: string]: string;
-    };
-    json?: false | boolean;
-    body?: Record<string, any> | RemoteSelectOptionBodyFunction;
-    initBody?: Record<string, any> | RemoteSelectOptionBodyFunction;
-    jsonpCallback?: 'callback' | string;
-    afterRequest?: RemoteSelectOptionAfterRequestFunction;
-    afterInitRequest?: RemoteSelectOptionAfterRequestFunction;
-    beforeRequest?: RemoteSelectOptionBeforeRequestFunction;
-    beforeInitRequest?: RemoteSelectOptionBeforeRequestFunction;
-    root?: string;
-    totalKey?: string;
-    initRoot?: string;
-    item?: RemoteSelectOptionItemFunction;
-    value?: string | SelectOptionValueFunction;
-    text?: string | SelectOptionTextFunction;
-  };
-}
-
-/**
- * 链接
- */
-export interface LinkConfig extends FormItem {
-  type: 'link';
-  href?: string | ((model: Record<string, any>) => string);
-  css?: {
-    [key: string]: string | number;
-  };
-  disabledCss?: {
-    [key: string]: string | number;
-  };
-  formTitle?: string;
-  formWidth?: number | string;
-  displayText?:
-    | ((
-        mForm: FormState | undefined,
-        data: {
-          model: Record<any, any>;
-        },
-      ) => string)
-    | string;
-  form:
-    | FormConfig
-    | ((
-        mForm: FormState | undefined,
-        data: {
-          model: Record<any, any>;
-          values: Record<any, any>;
-        },
-      ) => FormConfig);
-  fullscreen?: boolean;
-}
-
-/**
- * 级联选择器
- */
-export interface CascaderConfig extends FormItem, Input {
-  type: 'cascader';
-  remote?: boolean;
-  /** 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值，默认 true */
-  emitPath?: boolean;
-  /** 是否多选，默认 false */
-  multiple?: boolean;
-  /** 是否严格的遵守父子节点不互相关联，默认 false */
-  checkStrictly?: boolean | FilterFunction<boolean>;
-  /** 弹出内容的自定义类名 */
-  popperClass?: string;
-  /** 合并成字符串时的分隔符 */
-  valueSeparator?: string | FilterFunction<string>;
-  options?:
-    | ((
-        mForm: FormState | undefined,
-        data: {
-          model: Record<any, any>;
-          prop: string;
-          formValue: Record<any, any>;
-        },
-      ) => CascaderOption[])
-    | CascaderOption[];
-  option?: {
-    url: string;
-    cache?: boolean;
-    timeout?: number;
-    body?: Record<string, any> | RemoteSelectOptionBodyFunction;
-    root: 'string';
-    item: (optionsData: Record<string, any>) => CascaderOption[];
-  };
-}
-
-export interface DynamicFieldConfig extends FormItem {
-  type: 'dynamic-field';
-  returnFields: (
-    config: DynamicFieldConfig,
-    model: Record<any, any>,
-    request: Object,
-  ) => {
-    name: string;
-    label: string;
-    defaultValue: string;
-  }[];
-  dynamicKey: string;
-}
-
-/**
- * 分组容器
- */
-export interface RowConfig extends FormItem, ContainerCommonConfig {
-  type: 'row';
-  span: number;
-}
-
-/**
- * 标签页容器
- */
-export interface TabPaneConfig {
-  status?: string;
-  title: string;
-  lazy?: boolean;
-  labelWidth?: string;
-  items: FormConfig;
-  onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
-  [key: string]: any;
-}
-
-export interface TabConfig extends FormItem, ContainerCommonConfig {
-  type: 'tab' | 'dynamic-tab';
-  tabType?: string;
-  editable?: boolean;
-  dynamic?: boolean;
-  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
-  items: TabPaneConfig[];
-  onChange?: (mForm: FormState | undefined, data: any) => void;
-  onTabAdd?: (mForm: FormState | undefined, data: any) => void;
-  onTabRemove?: (mForm: FormState | undefined, tabName: string, data: any) => void;
-  onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
-  activeChange?: (mForm: FormState | undefined, tabName: string, data: any) => void;
-}
-
-/**
- * 分组
- */
-export interface FieldsetConfig extends FormItem, ContainerCommonConfig {
-  type: 'fieldset';
-  checkbox?: boolean;
-  expand?: boolean;
-  legend?: string;
-  schematic?: string;
-}
-
-/**
- * 面板容器
- */
-export interface PanelConfig extends FormItem, ContainerCommonConfig {
-  type: 'panel';
-  expand?: boolean;
-  title?: string;
-  schematic?: string;
-}
-
-export interface TableColumnConfig extends FormItem {
-  name?: string;
-  label: string;
-  width?: string | number;
-  sortable?: boolean;
-  [key: string]: any;
-}
-
-/**
- * 表格容器
- */
-export interface TableConfig extends FormItem {
-  type: 'table' | 'groupList' | 'group-list';
-  items: TableColumnConfig[];
-  tableItems?: TableColumnConfig[];
-  groupItems?: TableColumnConfig[];
-  enableToggleMode?: boolean;
-  /** 最大行数 */
-  max?: number;
-  /** 最大高度 */
-  maxHeight?: number | string;
-  border?: boolean;
-  /** 显示行号 */
-  showIndex?: boolean;
-  /** 操作栏宽度 */
-  operateColWidth?: number | string;
-  pagination?: boolean;
-  enum?: any[];
-  /** 是否显示添加按钮 */
-  addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
-  /** 是否显示删除按钮 */
-  delete?: (model: any, index: number, values: any) => boolean | boolean;
-  copyable?: (model: any, data: any) => boolean | boolean;
-  /** 是否显示导入按钮 */
-  importable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
-  /** 是否显示checkbox */
-  selection?: (mForm: FormState | undefined, data: any) => boolean | boolean | 'single';
-  /** 新增的默认行 */
-  defaultAdd?: (mForm: FormState | undefined, data: any) => any;
-  onSelect?: (mForm: FormState | undefined, data: any) => any;
-  defautSort?: SortProp;
-  defaultSort?: SortProp;
-  dropSort?: boolean;
-  /** 是否显示全屏按钮 */
-  enableFullscreen?: boolean;
-  fixed?: boolean;
-  itemExtra?: string | FilterFunction<string>;
-  rowKey?: string;
-  /** table 新增行时前置回调 */
-  beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean;
-}
-
-export interface GroupListConfig extends FormItem {
-  type: 'table' | 'groupList' | 'group-list';
-  span?: number;
-  enableToggleMode?: boolean;
-  items: FormConfig;
-  groupItems?: FormConfig;
-  tableItems?: FormConfig;
-  titleKey?: string;
-  titlePrefix?: string;
-  title?: string | FilterFunction<string>;
-  itemExtra?: string | FilterFunction<string>;
-  expandAll?: boolean;
-  addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
-  defaultAdd?: (mForm: FormState | undefined, data: any) => any;
-  delete?: (model: any, index: number | string | symbol, values: any) => boolean | boolean;
-  copyable?: FilterFunction<boolean>;
-  movable?: (
-    mForm: FormState | undefined,
-    index: number | string | symbol,
-    model: any,
-    groupModel: any,
-  ) => boolean | boolean;
-  moveSpecifyLocation?: boolean;
-  [key: string]: any;
-}
-
-interface StepItemConfig extends FormItem, ContainerCommonConfig {
-  title: string;
-}
-
-export interface StepConfig extends FormItem {
-  type: 'step';
-  /** 每个 step 的间距，不填写将自适应间距。支持百分比。 */
-  space?: string | number;
-  items: StepItemConfig[];
-}
-
-export interface ComponentConfig extends FormItem {
-  type: 'component';
-  id: string;
-  extend: any;
-  display: any;
-}
-
-export type ChildConfig =
-  | FormItem
-  | TabConfig
-  | RowConfig
-  | FieldsetConfig
-  | PanelConfig
-  | TableConfig
-  | GroupListConfig
-  | StepConfig
-  | DisplayConfig
-  | TextConfig
-  | HiddenConfig
-  | LinkConfig
-  | DaterangeConfig
-  | SelectConfig
-  | CascaderConfig
-  | HtmlField
-  | DateConfig
-  | ColorPickConfig
-  | TimeConfig
-  | DateTimeConfig
-  | CheckboxConfig
-  | SwitchConfig
-  | RadioGroupConfig
-  | TextareaConfig
-  | DynamicFieldConfig
-  | ComponentConfig;
-
-export type FormConfig = ChildConfig[];
-
-export type FormValue = Record<string | number, any>;
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 621b6cb7..04a4f54b 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -18,9 +18,6 @@
     "types",
     "src"
   ],
-  "scripts": {
-    "build": "vite build"
-  },
   "engines": {
     "node": ">=18"
   },
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index f8a582af..9e77f759 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -64,6 +64,7 @@ export default defineConfig({
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../packages/core/src/index.ts') },
       { find: /^@editor/, replacement: path.join(__dirname, '../packages/editor/src/') },
       { find: /^@tmagic\/editor/, replacement: path.join(__dirname, '../packages/editor/src/index.ts') },
+      { find: /^@tmagic\/form-schema/, replacement: path.join(__dirname, '../packages/form-schema/src/index.ts') },
       { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../packages/schema/src/index.ts') },
       { find: /^@tmagic\/form/, replacement: path.join(__dirname, '../packages/form/src/index.ts') },
       {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd724985..79f6caf8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -387,6 +387,9 @@ importers:
       '@tmagic/design':
         specifier: workspace:*
         version: link:../design
+      '@tmagic/form-schema':
+        specifier: workspace:*
+        version: link:../form-schema
       '@tmagic/utils':
         specifier: workspace:*
         version: link:../utils
@@ -416,6 +419,15 @@ importers:
         specifier: ^2.4.6
         version: 2.4.6
 
+  packages/form-schema:
+    dependencies:
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../schema
+      typescript:
+        specifier: '*'
+        version: 5.8.2
+
   packages/schema:
     dependencies:
       typescript:
@@ -665,6 +677,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -690,6 +705,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -715,6 +733,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -740,6 +761,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -765,6 +789,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -790,6 +817,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -815,6 +845,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -840,6 +873,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -865,6 +901,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -896,6 +935,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/react-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/react-runtime-help
@@ -1139,6 +1181,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1160,6 +1205,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1181,6 +1229,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1202,6 +1253,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1223,6 +1277,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1238,6 +1295,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1253,6 +1313,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1268,6 +1331,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1283,6 +1349,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
@@ -1311,6 +1380,9 @@ importers:
       '@tmagic/core':
         specifier: workspace:^
         version: link:../../packages/core
+      '@tmagic/form-schema':
+        specifier: workspace:^
+        version: link:../../packages/form-schema
       '@tmagic/vue-runtime-help':
         specifier: workspace:^
         version: link:../../runtime/vue-runtime-help
diff --git a/react-components/button/package.json b/react-components/button/package.json
index 47798e21..86386fd1 100644
--- a/react-components/button/package.json
+++ b/react-components/button/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/button/src/formConfig.ts b/react-components/button/src/formConfig.ts
index 22a9a517..4a97e242 100644
--- a/react-components/button/src/formConfig.ts
+++ b/react-components/button/src/formConfig.ts
@@ -16,10 +16,12 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     text: '文本',
     name: 'text',
     type: 'data-source-input',
   },
-];
+]);
diff --git a/react-components/container/package.json b/react-components/container/package.json
index d4a92df0..d291d659 100644
--- a/react-components/container/package.json
+++ b/react-components/container/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/container/src/formConfig.ts b/react-components/container/src/formConfig.ts
index 7b134a61..77a097b4 100644
--- a/react-components/container/src/formConfig.ts
+++ b/react-components/container/src/formConfig.ts
@@ -17,8 +17,9 @@
  */
 
 import { getElById } from '@tmagic/core';
+import { defineFormConfig } from '@tmagic/form-schema';
 
-export default [
+export default defineFormConfig([
   {
     name: 'layout',
     text: '容器布局',
@@ -40,4 +41,4 @@ export default [
       }
     },
   },
-];
+]);
diff --git a/react-components/img/package.json b/react-components/img/package.json
index 52578c54..81b2943d 100644
--- a/react-components/img/package.json
+++ b/react-components/img/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/img/src/formConfig.ts b/react-components/img/src/formConfig.ts
index 0e20604a..8855f0a4 100644
--- a/react-components/img/src/formConfig.ts
+++ b/react-components/img/src/formConfig.ts
@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     type: 'data-source-field-select',
     name: 'src',
@@ -32,4 +34,4 @@ export default [
     name: 'url',
     type: 'data-source-input',
   },
-];
+]);
diff --git a/react-components/iterator-container/package.json b/react-components/iterator-container/package.json
index 537c5238..808bb500 100644
--- a/react-components/iterator-container/package.json
+++ b/react-components/iterator-container/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/iterator-container/src/formConfig.ts b/react-components/iterator-container/src/formConfig.ts
index 461ffcf0..af66574b 100644
--- a/react-components/iterator-container/src/formConfig.ts
+++ b/react-components/iterator-container/src/formConfig.ts
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';
+import { defineFormConfig } from '@tmagic/form-schema';
 
-export default [
+export default defineFormConfig([
   {
     name: 'iteratorData',
     text: '数据源数据',
@@ -116,4 +117,4 @@ export default [
       },
     ],
   },
-];
+]);
diff --git a/react-components/overlay/package.json b/react-components/overlay/package.json
index ff0402f9..d41999cb 100644
--- a/react-components/overlay/package.json
+++ b/react-components/overlay/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/overlay/src/formConfig.ts b/react-components/overlay/src/formConfig.ts
index 0d8b5189..4da8f014 100644
--- a/react-components/overlay/src/formConfig.ts
+++ b/react-components/overlay/src/formConfig.ts
@@ -16,4 +16,6 @@
  * limitations under the License.
  */
 
-export default [];
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([]);
diff --git a/react-components/page-fragment-container/package.json b/react-components/page-fragment-container/package.json
index c6372002..3f249251 100644
--- a/react-components/page-fragment-container/package.json
+++ b/react-components/page-fragment-container/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/page-fragment-container/src/formConfig.ts b/react-components/page-fragment-container/src/formConfig.ts
index 3ba71aa2..07f1de2a 100644
--- a/react-components/page-fragment-container/src/formConfig.ts
+++ b/react-components/page-fragment-container/src/formConfig.ts
@@ -16,10 +16,12 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     name: 'pageFragmentId',
     text: '页面片ID',
     type: 'page-fragment-select',
   },
-];
+]);
diff --git a/react-components/page-fragment/package.json b/react-components/page-fragment/package.json
index a418c378..697fdce4 100644
--- a/react-components/page-fragment/package.json
+++ b/react-components/page-fragment/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/page-fragment/src/formConfig.ts b/react-components/page-fragment/src/formConfig.ts
index 0bd318ad..b2b9818f 100644
--- a/react-components/page-fragment/src/formConfig.ts
+++ b/react-components/page-fragment/src/formConfig.ts
@@ -17,8 +17,9 @@
  */
 
 import { getElById } from '@tmagic/core';
+import { defineFormConfig } from '@tmagic/form-schema';
 
-export default [
+export default defineFormConfig([
   {
     text: '页面片标识',
     name: 'name',
@@ -49,4 +50,4 @@ export default [
       }
     },
   },
-];
+]);
diff --git a/react-components/page/package.json b/react-components/page/package.json
index fff832c8..24defc3e 100644
--- a/react-components/page/package.json
+++ b/react-components/page/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/page/src/formConfig.ts b/react-components/page/src/formConfig.ts
index bc3a1d88..ec54d387 100644
--- a/react-components/page/src/formConfig.ts
+++ b/react-components/page/src/formConfig.ts
@@ -17,8 +17,9 @@
  */
 
 import { getElById } from '@tmagic/core';
+import { defineFormConfig } from '@tmagic/form-schema';
 
-export default [
+export default defineFormConfig([
   {
     text: '页面标识',
     name: 'name',
@@ -51,4 +52,4 @@ export default [
       }
     },
   },
-];
+]);
diff --git a/react-components/qrcode/package.json b/react-components/qrcode/package.json
index 147444ab..c329533c 100644
--- a/react-components/qrcode/package.json
+++ b/react-components/qrcode/package.json
@@ -14,7 +14,8 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "qrcode": "^1.5.0"
+    "@tmagic/form-schema": "workspace:^",
+     "qrcode": "^1.5.0"
   },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
diff --git a/react-components/qrcode/src/formConfig.ts b/react-components/qrcode/src/formConfig.ts
index e5c4ef09..31f877c8 100644
--- a/react-components/qrcode/src/formConfig.ts
+++ b/react-components/qrcode/src/formConfig.ts
@@ -16,10 +16,12 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     text: '链接',
     name: 'url',
     type: 'data-source-input',
   },
-];
+]);
diff --git a/react-components/text/package.json b/react-components/text/package.json
index 283af071..b9b67cac 100644
--- a/react-components/text/package.json
+++ b/react-components/text/package.json
@@ -13,6 +13,9 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "dependencies": {
+    "@tmagic/form-schema": "workspace:^"
+  },
   "peerDependencies": {
     "@tmagic/core": "workspace:^",
     "@tmagic/react-runtime-help": "workspace:^",
diff --git a/react-components/text/src/formConfig.ts b/react-components/text/src/formConfig.ts
index 2e86b78c..841a4281 100644
--- a/react-components/text/src/formConfig.ts
+++ b/react-components/text/src/formConfig.ts
@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     name: 'text',
     text: '文本',
@@ -27,4 +29,4 @@ export default [
     text: '多行文本',
     type: 'switch',
   },
-];
+]);
diff --git a/tsconfig.build-browser.json b/tsconfig.build-browser.json
index 943631ed..653da257 100644
--- a/tsconfig.build-browser.json
+++ b/tsconfig.build-browser.json
@@ -9,6 +9,7 @@
     "packages/core/src",
     "packages/data-source/src",
     "packages/dep/src",
+    "packages/form-schema/src",
     "packages/schema/src",
     "packages/stage/src",
     "packages/utils/src",
diff --git a/tsconfig.check.json b/tsconfig.check.json
index 44dca5df..058ee1fd 100644
--- a/tsconfig.check.json
+++ b/tsconfig.check.json
@@ -4,6 +4,7 @@
     "packages/core/src",
     "packages/data-source/src",
     "packages/dep/src",
+    "packages/form-schema/src",
     "packages/schema/src",
     "packages/stage/src",
     "packages/utils/src",
diff --git a/vue-components/button/package.json b/vue-components/button/package.json
index 689f5fbf..38cf1573 100644
--- a/vue-components/button/package.json
+++ b/vue-components/button/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/button/src/formConfig.ts b/vue-components/button/src/formConfig.ts
index 689c5d92..a5e0daed 100644
--- a/vue-components/button/src/formConfig.ts
+++ b/vue-components/button/src/formConfig.ts
@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     name: 'className',
     type: 'data-source-input',
@@ -27,4 +29,4 @@ export default [
     name: 'text',
     type: 'data-source-input',
   },
-];
+]);
diff --git a/vue-components/container/package.json b/vue-components/container/package.json
index 120f81b6..0dd8a66a 100644
--- a/vue-components/container/package.json
+++ b/vue-components/container/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/container/src/formConfig.ts b/vue-components/container/src/formConfig.ts
index 549f7dbb..ecf3dfb6 100644
--- a/vue-components/container/src/formConfig.ts
+++ b/vue-components/container/src/formConfig.ts
@@ -17,8 +17,9 @@
  */
 
 import { getElById } from '@tmagic/core';
+import { defineFormConfig } from '@tmagic/form-schema';
 
-export default [
+export default defineFormConfig([
   {
     name: 'className',
     type: 'data-source-input',
@@ -45,4 +46,4 @@ export default [
       }
     },
   },
-];
+]);
diff --git a/vue-components/img/package.json b/vue-components/img/package.json
index 2240c772..f000f90b 100644
--- a/vue-components/img/package.json
+++ b/vue-components/img/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/img/src/formConfig.ts b/vue-components/img/src/formConfig.ts
index 78d58a31..504e36a3 100644
--- a/vue-components/img/src/formConfig.ts
+++ b/vue-components/img/src/formConfig.ts
@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     name: 'className',
     type: 'data-source-input',
@@ -37,4 +39,4 @@ export default [
     name: 'url',
     type: 'data-source-input',
   },
-];
+]);
diff --git a/vue-components/iterator-container/package.json b/vue-components/iterator-container/package.json
index 9d6b30b8..7004fe60 100644
--- a/vue-components/iterator-container/package.json
+++ b/vue-components/iterator-container/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/iterator-container/src/formConfig.ts b/vue-components/iterator-container/src/formConfig.ts
index bb8736ce..a9d92b4a 100644
--- a/vue-components/iterator-container/src/formConfig.ts
+++ b/vue-components/iterator-container/src/formConfig.ts
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';
+import { defineFormConfig } from '@tmagic/form-schema';
 
-export default [
+export default defineFormConfig([
   {
     name: 'className',
     type: 'data-source-input',
@@ -121,4 +122,4 @@ export default [
       },
     ],
   },
-];
+]);
diff --git a/vue-components/overlay/package.json b/vue-components/overlay/package.json
index b87e4a8b..60e20a55 100644
--- a/vue-components/overlay/package.json
+++ b/vue-components/overlay/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/overlay/src/formConfig.ts b/vue-components/overlay/src/formConfig.ts
index d6d1738d..b737ef9b 100644
--- a/vue-components/overlay/src/formConfig.ts
+++ b/vue-components/overlay/src/formConfig.ts
@@ -1 +1,3 @@
-export default [];
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([]);
diff --git a/vue-components/page-fragment-container/package.json b/vue-components/page-fragment-container/package.json
index 097a0cbe..0f7ea2ac 100644
--- a/vue-components/page-fragment-container/package.json
+++ b/vue-components/page-fragment-container/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/page-fragment-container/src/formConfig.ts b/vue-components/page-fragment-container/src/formConfig.ts
index 756beec7..01f2c01a 100644
--- a/vue-components/page-fragment-container/src/formConfig.ts
+++ b/vue-components/page-fragment-container/src/formConfig.ts
@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     name: 'className',
     type: 'data-source-input',
@@ -27,4 +29,4 @@ export default [
     text: '页面片ID',
     type: 'page-fragment-select',
   },
-];
+]);
diff --git a/vue-components/page-fragment/package.json b/vue-components/page-fragment/package.json
index 5adbd394..0936dc1b 100644
--- a/vue-components/page-fragment/package.json
+++ b/vue-components/page-fragment/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/page-fragment/src/formConfig.ts b/vue-components/page-fragment/src/formConfig.ts
index 0bd318ad..b2b9818f 100644
--- a/vue-components/page-fragment/src/formConfig.ts
+++ b/vue-components/page-fragment/src/formConfig.ts
@@ -17,8 +17,9 @@
  */
 
 import { getElById } from '@tmagic/core';
+import { defineFormConfig } from '@tmagic/form-schema';
 
-export default [
+export default defineFormConfig([
   {
     text: '页面片标识',
     name: 'name',
@@ -49,4 +50,4 @@ export default [
       }
     },
   },
-];
+]);
diff --git a/vue-components/page/package.json b/vue-components/page/package.json
index b44775cf..5bfbe28e 100644
--- a/vue-components/page/package.json
+++ b/vue-components/page/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/page/src/formConfig.ts b/vue-components/page/src/formConfig.ts
index 0d0e389f..65bfc32c 100644
--- a/vue-components/page/src/formConfig.ts
+++ b/vue-components/page/src/formConfig.ts
@@ -17,8 +17,9 @@
  */
 
 import { getElById } from '@tmagic/core';
+import { defineFormConfig } from '@tmagic/form-schema';
 
-export default [
+export default defineFormConfig([
   {
     text: '页面标识',
     name: 'name',
@@ -79,4 +80,4 @@ export default [
     language: 'css',
     height: '500px',
   },
-];
+]);
diff --git a/vue-components/qrcode/package.json b/vue-components/qrcode/package.json
index e5fefd98..34a8ce15 100644
--- a/vue-components/qrcode/package.json
+++ b/vue-components/qrcode/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "qrcode": "^1.5.0",
     "vue-demi": "^0.14.10"
   },
diff --git a/vue-components/qrcode/src/formConfig.ts b/vue-components/qrcode/src/formConfig.ts
index a14c98df..047b25a9 100644
--- a/vue-components/qrcode/src/formConfig.ts
+++ b/vue-components/qrcode/src/formConfig.ts
@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     name: 'className',
     type: 'data-source-input',
@@ -27,4 +29,4 @@ export default [
     name: 'url',
     type: 'data-source-input',
   },
-];
+]);
diff --git a/vue-components/text/package.json b/vue-components/text/package.json
index 87d2cbde..a09d850b 100644
--- a/vue-components/text/package.json
+++ b/vue-components/text/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
+    "@tmagic/form-schema": "workspace:^",
     "vue-demi": "^0.14.10"
   },
   "peerDependencies": {
diff --git a/vue-components/text/src/formConfig.ts b/vue-components/text/src/formConfig.ts
index 3bb9b153..df674302 100644
--- a/vue-components/text/src/formConfig.ts
+++ b/vue-components/text/src/formConfig.ts
@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-export default [
+import { defineFormConfig } from '@tmagic/form-schema';
+
+export default defineFormConfig([
   {
     name: 'className',
     type: 'data-source-input',
@@ -32,4 +34,4 @@ export default [
     text: '多行文本',
     type: 'switch',
   },
-];
+]);