style(editor,form): 统一表单组件props定义

packages/editor/src/fields/Code.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { FieldProps } from '@tmagic/form';
+
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
@@ -21,19 +23,13 @@ defineOptions({
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
-  defineProps<{
+  defineProps<
-    config: {
+    FieldProps<{
       language?: string;
       options?: Object;
       height?: string;
-    };
+    }>
-    model: any;
+  >(),
-    name: string;
-    prop: string;
-    lastValues?: any;
-    disabled?: boolean;
-    size?: 'small' | 'default' | 'large';
-  }>(),
   {
     disabled: false,
   },

packages/editor/src/fields/CodeLink.vue

@@ -6,24 +6,23 @@
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
+import type { FieldProps } from '@tmagic/form';
+
 import { getConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MEditorCodeLink',
 });
 
-const props = defineProps<{
+const props = defineProps<
-  config: {
+  FieldProps<{
     type: 'code-link';
     name: string;
     text?: string;
     formTitle?: string;
     codeOptions?: Object;
-  };
+  }>
-  model: any;
+>();
-  name: string;
-  prop: string;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/editor/src/fields/CodeSelect.vue

@@ -11,6 +11,7 @@ import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 import { HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
@@ -24,15 +25,11 @@ const emit = defineEmits(['change']);
 const services = inject<Services>('services');
 
 const props = withDefaults(
-  defineProps<{
+  defineProps<
-    config: {
+    FieldProps<{
       className?: string;
-    };
+    }>
-    model: any;
+  >(),
-    prop: string;
-    name: string;
-    size: 'small' | 'default' | 'large';
-  }>(),
   {},
 );
 

packages/editor/src/fields/CodeSelectCol.vue

@@ -37,7 +37,7 @@ import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues } from '@tmagic/form';
+import { createValues, FieldProps } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -53,20 +53,9 @@ defineOptions({
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
+const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
-  defineProps<{
+  disabled: false,
-    config: CodeSelectColConfig;
+});
-    model: any;
-    prop: string;
-    name: string;
-    lastValues?: any;
-    disabled?: boolean;
-    size: 'small' | 'default' | 'large';
-  }>(),
-  {
-    disabled: false,
-  },
-);
 
 /**
  * 根据代码块id获取代码块参数配置

packages/editor/src/fields/DataSourceFieldSelect.vue

@@ -12,25 +12,16 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { DataSourceFieldSelectConfig, Services } from '@editor/type';
+import type { FieldProps } from '@tmagic/form';
+
+import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
+const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
-  defineProps<{
+  disabled: false,
-    config: DataSourceFieldSelectConfig;
+});
-    model: any;
-    lastValues?: any;
-    prop: string;
-    name: string;
-    disabled?: boolean;
-    size: 'small' | 'default' | 'large';
-  }>(),
-  {
-    disabled: false,
-  },
-);
 
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 

packages/editor/src/fields/DataSourceFields.vue

@@ -22,7 +22,7 @@
 import { ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
+import { FieldProps, FormConfig, FormState, MFormDialog } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
 defineOptions({
@@ -30,16 +30,11 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{
+  defineProps<
-    config: {
+    FieldProps<{
       type: 'data-source-fields';
-    };
+    }>
-    model: any;
+  >(),
-    prop: string;
-    lastValues?: any;
-    disabled: boolean;
-    name: string;
-  }>(),
   {
     disabled: false,
   },

packages/editor/src/fields/DataSourceInput.vue

@@ -48,7 +48,8 @@
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
-import { FieldSize, getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
@@ -59,25 +60,21 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{
+  defineProps<
-    config: {
+    FieldProps<{
       type: 'data-source-input';
       name: string;
       text: string;
-    };
+    }>
-    model: Record<string, any>;
+  >(),
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: FieldSize;
-  }>(),
   {
     disabled: false,
   },
 );
 
-const emit = defineEmits<(e: 'change', value: string) => void>();
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 const { dataSourceService } = inject<Services>('services') || {};
 

packages/editor/src/fields/DataSourceMethodSelect.vue

@@ -34,7 +34,7 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { createValues } from '@tmagic/form';
+import { createValues, FieldProps } from '@tmagic/form';
 import type { CodeBlockContent, Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -50,20 +50,9 @@ defineOptions({
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
+const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>(), {
-  defineProps<{
+  disabled: false,
-    config: DataSourceMethodSelectConfig;
+});
-    model: any;
-    lastValues?: any;
-    prop: string;
-    name: string;
-    disabled?: boolean;
-    size: 'small' | 'default' | 'large';
-  }>(),
-  {
-    disabled: false,
-  },
-);
 
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 

packages/editor/src/fields/DataSourceMethods.vue

@@ -20,29 +20,24 @@
 
 <script setup lang="ts">
 import { TMagicButton } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import type { CodeParamStatement } from '@editor/type';
 import { useDataSourceMethod } from '@editor/utils/use-data-source-method';
 
-import { CodeParamStatement } from '..';
-
 defineOptions({
   name: 'MEditorDataSourceMethods',
 });
 
 const props = withDefaults(
-  defineProps<{
+  defineProps<
-    config: {
+    FieldProps<{
       type: 'data-source-methods';
-    };
+    }>
-    model: any;
+  >(),
-    prop: string;
-    lastValues?: any;
-    disabled: boolean;
-    name: string;
-  }>(),
   {
     disabled: false,
   },

packages/editor/src/fields/DataSourceSelect.vue

@@ -14,8 +14,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { FieldSize } from '@tmagic/design';
+import { FieldProps, MSelect, SelectConfig } from '@tmagic/form';
-import { MSelect, SelectConfig } from '@tmagic/form';
 
 import { Services } from '../type';
 
@@ -26,21 +25,15 @@ defineOptions({
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
-  defineProps<{
+  defineProps<
-    config: {
+    FieldProps<{
       type: 'data-source-select';
       name: string;
       text: string;
       placeholder: string;
       dataSourceType?: string;
-    };
+    }>
-    model: Record<string, any>;
+  >(),
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: FieldSize;
-  }>(),
   {
     disabled: false,
   },

packages/editor/src/fields/EventSelect.vue

@@ -3,18 +3,23 @@
     <m-form-table
       v-if="isOldVersion"
       ref="eventForm"
-      :size="props.size"
-      :model="model"
       name="events"
+      :size="size"
+      :disabled="disabled"
+      :model="model"
       :config="tableConfig"
       @change="onChangeHandler"
     ></m-form-table>
 
     <div v-else class="fullWidth">
-      <TMagicButton class="create-button" type="primary" size="small" @click="addEvent()">添加事件</TMagicButton>
+      <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
+        >添加事件</TMagicButton
+      >
       <m-form-panel
         v-for="(cardItem, index) in model[name]"
         :key="index"
+        :disabled="disabled"
+        :size="size"
         :config="actionsConfig"
         :model="cardItem"
         @change="onChangeHandler"
@@ -24,9 +29,18 @@
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
+            :disabled="disabled"
+            :size="size"
             @change="onChangeHandler"
           ></m-form-container>
-          <TMagicButton style="color: #f56c6c" text :icon="Delete" @click="removeEvent(index)"></TMagicButton>
+          <TMagicButton
+            style="color: #f56c6c"
+            text
+            :icon="Delete"
+            :disabled="disabled"
+            :size="size"
+            @click="removeEvent(index)"
+          ></TMagicButton>
         </template>
       </m-form-panel>
     </div>
@@ -39,7 +53,7 @@ import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
 import { TMagicButton } from '@tmagic/design';
-import { FormState } from '@tmagic/form';
+import type { FieldProps, FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
@@ -48,13 +62,7 @@ defineOptions({
   name: 'MEditorEventSelect',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<EventSelectConfig>>();
-  config: EventSelectConfig;
-  model: any;
-  prop: string;
-  name: string;
-  size: 'small' | 'default' | 'large';
-}>();
 
 const emit = defineEmits(['change']);
 

packages/editor/src/fields/KeyValue.vue

@@ -21,6 +21,7 @@
         class="m-fileds-key-value-delete"
         type="danger"
         :size="size"
+        :disabled="disabled"
         circle
         plain
         :icon="Delete"
@@ -28,7 +29,9 @@
       ></TMagicButton>
     </div>
 
-    <TMagicButton type="primary" :size="size" plain :icon="Plus" @click="addHandler">添加</TMagicButton>
+    <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
+      >添加</TMagicButton
+    >
   </div>
 </template>
 
@@ -37,25 +40,20 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 
 defineOptions({
   name: 'MEditorKeyValue',
 });
 
 const props = withDefaults(
-  defineProps<{
+  defineProps<
-    config: {
+    FieldProps<{
       type: 'key-value';
       name: string;
       text: string;
-    };
+    }>
-    model: Record<string, any>;
+  >(),
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: 'large' | 'default' | 'small';
-  }>(),
   {
     disabled: false,
   },

packages/editor/src/fields/UISelect.vue

@@ -1,17 +1,29 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
+    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" text style="padding: 0"
+      >取消</TMagicButton
+    >
   </div>
   <div class="m-fields-ui-select" v-else style="display: flex">
     <template v-if="val">
       <TMagicTooltip content="清除" placement="top">
-        <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
+        <TMagicButton
+          style="padding: 0"
+          type="danger"
+          :icon="Close"
+          :disabled="disabled"
+          :size="size"
+          text
+          @click.stop="deleteHandler"
+        ></TMagicButton>
       </TMagicTooltip>
 
       <TMagicTooltip content="点击选中组件" placement="top">
         <TMagicButton
           text
           style="padding: 0; margin: 0"
+          :disabled="disabled"
+          :size="size"
           @click="selectNode(val)"
           @mouseenter="highlight(val)"
           @mouseleave="unhightlight"
@@ -21,7 +33,9 @@
     </template>
 
     <TMagicTooltip v-else content="点击此处选择" placement="top">
-      <TMagicButton text style="padding: 0; margin: 0" @click="startSelect">点击此处选择</TMagicButton>
+      <TMagicButton text style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
+        >点击此处选择</TMagicButton
+      >
     </TMagicTooltip>
   </div>
 </template>
@@ -32,7 +46,7 @@ import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { FormState } from '@tmagic/form';
+import type { FieldProps, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
@@ -41,12 +55,7 @@ defineOptions({
   name: 'MEditorUISelect',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<any>>();
-  config: any;
-  model: any;
-  prop: string;
-  name: string;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/form/src/fields/Cascader.vue

@@ -19,7 +19,7 @@ import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
 
-import { CascaderConfig, FormState } from '../schema';
+import type { CascaderConfig, FieldProps, FormState } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
@@ -27,17 +27,7 @@ defineOptions({
   name: 'MFormCascader',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<CascaderConfig>>();
-  config: CascaderConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/form/src/fields/Checkbox.vue

@@ -15,24 +15,14 @@ import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
 
-import { CheckboxConfig } from '../schema';
+import type { CheckboxConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormCheckbox',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<CheckboxConfig>>();
-  config: CheckboxConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/form/src/fields/CheckboxGroup.vue

@@ -16,7 +16,7 @@ import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
 
-import { CheckboxGroupConfig, FormState } from '../schema';
+import type { CheckboxGroupConfig, FieldProps, FormState } from '../schema';
 import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
@@ -24,17 +24,7 @@ defineOptions({
   name: 'MFormCheckGroup',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<CheckboxGroupConfig>>();
-  config: CheckboxGroupConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/form/src/fields/ColorPicker.vue

@@ -11,26 +11,18 @@
 <script lang="ts" setup>
 import { TMagicColorPicker } from '@tmagic/design';
 
-import { ColorPickConfig } from '../schema';
+import type { ColorPickConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormColorPicker',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<ColorPickConfig>>();
-  config: ColorPickConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

packages/form/src/fields/Date.vue

@@ -15,26 +15,18 @@
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DateConfig } from '../schema';
+import type { DateConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDate',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<DateConfig>>();
-  config: DateConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

packages/form/src/fields/DateTime.vue

@@ -17,26 +17,18 @@
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DateTimeConfig } from '../schema';
+import type { DateTimeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDateTime',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<DateTimeConfig>>();
-  config: DateTimeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

packages/form/src/fields/Daterange.vue

@@ -19,24 +19,14 @@ import { ref, watch } from 'vue';
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DaterangeConfig } from '../schema';
+import type { DaterangeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDateRange',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<DaterangeConfig>>();
-  config: DaterangeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/form/src/fields/Display.vue

@@ -3,22 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { DisplayConfig } from '../schema';
+import type { DisplayConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDisplay',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<DisplayConfig>>();
-  config: DisplayConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  lastValues?: Record<string, any>;
-}>();
 
 if (props.config.initValue && props.model) {
   // eslint-disable-next-line vue/no-setup-props-destructure

packages/form/src/fields/DynamicField.vue

@@ -27,7 +27,7 @@ import { onBeforeUnmount, reactive, watch } from 'vue';
 
 import { TMagicForm, TMagicFormItem, TMagicInput } from '@tmagic/design';
 
-import { DynamicFieldConfig } from '../schema';
+import type { DynamicFieldConfig, FieldProps } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
@@ -35,23 +35,13 @@ defineOptions({
   name: 'MFormDynamicField',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<DynamicFieldConfig>>();
-  config: DynamicFieldConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 
-const request = getConfig('request') as Function;
+const request = getConfig<Function>('request');
 const fieldMap = reactive<{ [key: string]: any }>({
   value: {},
 });

packages/form/src/fields/Hidden.vue

@@ -3,22 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { HiddenConfig } from '../schema';
+import type { FieldProps, HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormHidden',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<HiddenConfig>>();
-  config: HiddenConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  lastValues?: Record<string, any>;
-}>();
 
 useAddField(props.prop);
 </script>

packages/form/src/fields/Link.vue

@@ -22,24 +22,14 @@ import { computed, inject, ref } from 'vue';
 import { TMagicButton } from '@tmagic/design';
 
 import FormDialog from '../FormDialog.vue';
-import { FormState, LinkConfig } from '../schema';
+import type { FieldProps, FormState, LinkConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormLink',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<LinkConfig>>();
-  config: LinkConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/form/src/fields/Number.vue

@@ -20,26 +20,19 @@ import { inject } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';
 
-import { FormState, NumberConfig } from '../schema';
+import type { FieldProps, FormState, NumberConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormNumber',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<NumberConfig>>();
-  config: NumberConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
-const emit = defineEmits(['change', 'input']);
+const emit = defineEmits<{
+  change: [values: number];
+  input: [values: number];
+}>();
 
 useAddField(props.prop);
 
@@ -49,7 +42,7 @@ const changeHandler = (value: number) => {
   emit('change', value);
 };
 
-const inputHandler = (v: string) => {
+const inputHandler = (v: number) => {
   emit('input', v);
   mForm?.$emit('field-input', props.prop, v);
 };

packages/form/src/fields/NumberRange.vue

@@ -21,24 +21,14 @@
 <script lang="ts" setup>
 import { TMagicInput } from '@tmagic/design';
 
-import type { NumberRangeConfig } from '../schema';
+import type { FieldProps, NumberRangeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormNumberRange',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<NumberRangeConfig>>();
-  config: NumberRangeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits<{
   change: [values: [number, number]];

packages/form/src/fields/RadioGroup.vue

@@ -13,24 +13,14 @@
 <script lang="ts" setup>
 import { TMagicRadio, TMagicRadioGroup } from '@tmagic/design';
 
-import { RadioGroupConfig } from '../schema';
+import type { FieldProps, RadioGroupConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormRadioGroup',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<RadioGroupConfig>>();
-  config: RadioGroupConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/form/src/fields/Select.vue

@@ -31,7 +31,7 @@ import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 import { TMagicSelect } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
 
-import { FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
+import type { FieldProps, FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
@@ -42,17 +42,7 @@ defineOptions({
   name: 'MFormSelect',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<SelectConfig>>();
-  config: SelectConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
 const emit = defineEmits(['change']);
 

packages/form/src/fields/Switch.vue

@@ -14,30 +14,22 @@ import { computed } from 'vue';
 
 import { TMagicSwitch } from '@tmagic/design';
 
-import { SwitchConfig } from '../schema';
+import type { FieldProps, SwitchConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormSwitch',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<SwitchConfig>>();
-  config: SwitchConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: any];
+}>();
 
 useAddField(props.prop);
 
-const changeHandler = (value: number) => {
+const changeHandler = (value: any) => {
   emit('change', value);
 };
 

packages/form/src/fields/Text.vue

@@ -29,32 +29,25 @@ import { inject } from 'vue';
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
-import { FormState, TextConfig } from '../schema';
+import type { FieldProps, FormState, TextConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormText',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<TextConfig>>();
-  config: TextConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
-const emit = defineEmits(['change', 'input']);
+const emit = defineEmits<{
+  change: [value: string];
+  input: [value: string];
+}>();
 
 useAddField(props.prop);
 
 const mForm = inject<FormState | undefined>('mForm');
 
-const changeHandler = (value: number) => {
+const changeHandler = (value: string) => {
   emit('change', value);
 };
 

packages/form/src/fields/Textarea.vue

@@ -17,32 +17,25 @@ import { inject } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
 
-import { FormState, TextareaConfig } from '../schema';
+import type { FieldProps, FormState, TextareaConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormTextarea',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<TextareaConfig>>();
-  config: TextareaConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
-const emit = defineEmits(['change', 'input']);
+const emit = defineEmits<{
+  change: [value: string];
+  input: [value: string];
+}>();
 
 useAddField(props.prop);
 
 const mForm = inject<FormState | null>('mForm');
 
-const changeHandler = (value: number) => {
+const changeHandler = (value: string) => {
   emit('change', value);
 };
 

packages/form/src/fields/Time.vue

@@ -13,26 +13,18 @@
 <script lang="ts" setup>
 import { TMagicTimePicker } from '@tmagic/design';
 
-import { TimeConfig } from '../schema';
+import type { FieldProps, TimeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormTime',
 });
 
-const props = defineProps<{
+const props = defineProps<FieldProps<TimeConfig>>();
-  config: TimeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

packages/form/src/schema.ts

@@ -21,6 +21,18 @@ export interface ValidateError {
   field: string;
 }
 
+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>;
+}
+
 /**
  * 整个表单的数据，会注入到各个组件中去
  */

packages/form/src/utils/config.ts

@@ -22,6 +22,6 @@ const setConfig = (option: any): void => {
   $MAGIC_FORM = option;
 };
 
-const getConfig = (key: string): unknown => $MAGIC_FORM[key];
+const getConfig = <T = unknown>(key: string): T => $MAGIC_FORM[key];
 
 export { getConfig, setConfig };