style: 完善@tmagic/design ts 类型

2025-04-05 19:41:40 +08:00 · 2023-05-29 21:09:26 +08:00 · 2023-05-29 21:09:26 +08:00 · dad90a1cec
commit dad90a1cec
parent 011496fcd8
55 changed files with 663 additions and 569 deletions
--- a/packages/design/src/Autocomplete.vue
+++ b/packages/design/src/Autocomplete.vue
@ -2,7 +2,7 @@
  <component
    class="tmagic-design-auto-complete"
    ref="autocomplete"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @select="selectHandler"
@ -38,9 +38,11 @@ defineOptions({

 const props = defineProps<AutocompleteProps>();

-const uiComponent = getConfig('components').autocomplete;
+const ui = getConfig('components')?.autocomplete;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-autocomplete';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'select', 'update:modelValue']);

--- a/packages/design/src/Badge.vue
+++ b/packages/design/src/Badge.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-badge" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-badge" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,8 @@ defineOptions({

 const props = defineProps<BadgeProps>();

-const uiComponent = getConfig('components').badge;
+const ui = getConfig('components')?.badge;
+const uiComponent = ui?.component || 'el-badge';

-const uiProps = computed(() => uiComponent.props(props));
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Button.vue
+++ b/packages/design/src/Button.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-button" :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+  <component class="tmagic-design-button" :is="uiComponent" v-bind="uiProps" @click="clickHandler">
    <template #default v-if="$slots.default">
      <slot></slot>
    </template>
@ -18,9 +18,11 @@ defineOptions({

 const props = defineProps<ButtonProps>();

-const uiComponent = getConfig('components').button;
+const ui = getConfig('components')?.button;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-button';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['click']);

--- a/packages/design/src/Card.vue
+++ b/packages/design/src/Card.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-card" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-card" :is="uiComponent" v-bind="uiProps">
    <template #header>
      <slot name="header" class="header"></slot>
    </template>
@ -22,7 +22,9 @@ defineOptions({

 const props = defineProps<CardProps>();

-const uiComponent = getConfig('components').card;
+const ui = getConfig('components')?.card;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-card';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Cascader.vue
+++ b/packages/design/src/Cascader.vue
@ -2,7 +2,7 @@
  <component
    ref="cascader"
    class="tmagic-design-cascader"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @update:modelValue="updateModelValue"
    @change="changeHandler"
@ -21,9 +21,11 @@ defineOptions({

 const props = defineProps<CascaderProps>();

-const uiComponent = getConfig('components').cascader;
+const ui = getConfig('components')?.cascader;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-cascader';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const cascader = ref<any>();

--- a/packages/design/src/Checkbox.vue
+++ b/packages/design/src/Checkbox.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-checkbox"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @update:modelValue="updateModelValue"
    @change="changeHandler"
@ -27,9 +27,11 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
  falseLabel: undefined,
 });

-const uiComponent = getConfig('components').checkbox;
+const ui = getConfig('components')?.checkbox;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-checkbox';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/CheckboxGroup.vue
+++ b/packages/design/src/CheckboxGroup.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-checkbox-group"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @update:modelValue="updateModelValue"
@ -22,9 +22,11 @@ defineOptions({

 const props = defineProps<CheckboxGroupProps>();

-const uiComponent = getConfig('components').checkboxGroup;
+const ui = getConfig('components')?.checkboxGroup;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-checkbox-group';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/Col.vue
+++ b/packages/design/src/Col.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-col" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-col" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,9 @@ defineOptions({

 const props = defineProps<ColProps>();

-const uiComponent = getConfig('components').col;
+const ui = getConfig('components')?.col;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-col';
+
+const uiProps = computed(() => ui?.props(props));
 </script>
--- a/packages/design/src/Collapse.vue
+++ b/packages/design/src/Collapse.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-collapse"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @update:modelValue="updateModelValue"
    @change="changeHandler"
@ -22,9 +22,11 @@ defineOptions({

 const props = defineProps<CollapseProps>();

-const uiComponent = getConfig('components').collapse;
+const ui = getConfig('components')?.collapse;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-collapse';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/CollapseItem.vue
+++ b/packages/design/src/CollapseItem.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-collapse-item"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @update:modelValue="updateModelValue"
    @change="changeHandler"
@ -28,9 +28,11 @@ defineOptions({

 const props = defineProps<CollapseItemProps>();

-const uiComponent = getConfig('components').collapseItem;
+const ui = getConfig('components')?.collapseItem;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-collapse-item';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/ColorPicker.vue
+++ b/packages/design/src/ColorPicker.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-color-picker"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @update:modelValue="updateModelValue"
@ -24,9 +24,11 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
  disabled: false,
 });

-const uiComponent = getConfig('components').colorPicker;
+const ui = getConfig('components')?.colorPicker;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-color-picker';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/DatePicker.vue
+++ b/packages/design/src/DatePicker.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-date-picker"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @update:modelValue="updateModelValue"
@ -23,9 +23,11 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
  type: 'date',
 });

-const uiComponent = getConfig('components').datePicker;
+const ui = getConfig('components')?.datePicker;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-date-picker';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/Dialog.vue
+++ b/packages/design/src/Dialog.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-dialog"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @close="closeHandler"
    @update:modelValue="updateModelValue"
@ -26,9 +26,11 @@ defineOptions({

 const props = defineProps<DialogProps>();

-const uiComponent = getConfig('components').dialog;
+const ui = getConfig('components')?.dialog;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-dialog';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['close', 'update:modelValue']);

--- a/packages/design/src/Divider.vue
+++ b/packages/design/src/Divider.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-divider" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-divider" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,9 @@ defineOptions({

 const props = defineProps<DividerProps>();

-const uiComponent = getConfig('components').divider;
+const ui = getConfig('components')?.divider;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-divider';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Drawer.vue
+++ b/packages/design/src/Drawer.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-drawer"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @open="openHandler"
    @opened="openedHandler"
@ -35,9 +35,11 @@ const props = defineProps<DrawerProps>();

 const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);

-const uiComponent = getConfig('components').drawer;
+const ui = getConfig('components')?.drawer;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-drawer';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const openHandler = (...args: any[]) => {
  emit('open', ...args);
--- a/packages/design/src/Dropdown.vue
+++ b/packages/design/src/Dropdown.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-dropdown" :is="uiComponent.component" v-bind="uiProps" @command="commandHandler">
+  <component class="tmagic-design-dropdown" :is="uiComponent" v-bind="uiProps" @command="commandHandler">
    <slot></slot>

    <template #dropdown>
@ -20,9 +20,11 @@ defineOptions({

 const props = defineProps<DropdownProps>();

-const uiComponent = getConfig('components').dropdown;
+const ui = getConfig('components')?.dropdown;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-dropdown';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['command']);

--- a/packages/design/src/DropdownItem.vue
+++ b/packages/design/src/DropdownItem.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-dropdown-item" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-dropdown-item" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,9 @@ defineOptions({

 const props = defineProps<DropdownItemProps>();

-const uiComponent = getConfig('components').dropdownItem;
+const ui = getConfig('components')?.dropdownItem;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-dropdown-item';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/DropdownMenu.vue
+++ b/packages/design/src/DropdownMenu.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-dropdown-menu" :is="uiComponent.component">
+  <component class="tmagic-design-dropdown-menu" :is="uiComponent">
    <slot></slot>
  </component>
 </template>
@ -11,5 +11,7 @@ defineOptions({
  name: 'TMDropdownMenu',
 });

-const uiComponent = getConfig('components').dropdownMenu;
+const ui = getConfig('components')?.dropdownMenu;
+
+const uiComponent = ui?.component || 'el-dropdown-menu';
 </script>
--- a/packages/design/src/Form.vue
+++ b/packages/design/src/Form.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-form" ref="form" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-form" ref="form" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,9 +16,11 @@ defineOptions({

 const props = defineProps<FormProps>();

-const uiComponent = getConfig('components').form;
+const ui = getConfig('components')?.form;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-form';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const form = ref<any>();

--- a/packages/design/src/FormItem.vue
+++ b/packages/design/src/FormItem.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-form-item" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-form-item" :is="uiComponent" v-bind="uiProps">
    <template #label>
      <slot name="label"></slot>
    </template>
@ -19,7 +19,9 @@ defineOptions({

 const props = defineProps<FormItemProps>();

-const uiComponent = getConfig('components').formItem;
+const ui = getConfig('components')?.formItem;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-form-item';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Icon.vue
+++ b/packages/design/src/Icon.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-icon" :is="uiComponent.component">
+  <component class="tmagic-design-icon" :is="uiComponent">
    <slot></slot>
  </component>
 </template>
@ -11,5 +11,6 @@ defineOptions({
  name: 'TMIcon',
 });

-const uiComponent = getConfig('components').icon;
+const ui = getConfig('components')?.icon;
+const uiComponent = ui?.component || 'el-icon';
 </script>
--- a/packages/design/src/Input.vue
+++ b/packages/design/src/Input.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-input"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @input="inputHandler"
@ -34,9 +34,11 @@ defineOptions({

 const props = defineProps<InputProps>();

-const uiComponent = getConfig('components').input;
+const ui = getConfig('components')?.input;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-input';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'input', 'update:modelValue']);

--- a/packages/design/src/InputNumber.vue
+++ b/packages/design/src/InputNumber.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-input-number"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @input="inputHandler"
@ -21,9 +21,11 @@ defineOptions({

 const props = defineProps<InputNumberProps>();

-const uiComponent = getConfig('components').inputNumber;
+const ui = getConfig('components')?.inputNumber;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-input-number';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'input', 'update:modelValue']);

--- a/packages/design/src/Option.vue
+++ b/packages/design/src/Option.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-option" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-option" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,9 @@ defineOptions({

 const props = defineProps<OptionProps>();

-const uiComponent = getConfig('components').option;
+const ui = getConfig('components')?.option;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-option';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/OptionGroup.vue
+++ b/packages/design/src/OptionGroup.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-option-group" ref="optionGroup" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-option-group" ref="optionGroup" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,9 +16,11 @@ defineOptions({

 const props = defineProps<OptionGroupProps>();

-const uiComponent = getConfig('components').optionGroup;
+const ui = getConfig('components')?.optionGroup;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-option-group';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const optionGroup = ref<any>();
 </script>
--- a/packages/design/src/Pagination.vue
+++ b/packages/design/src/Pagination.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-pagination"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @size-change="handleSizeChange"
    @page-size-change="handleSizeChange"
@ -21,9 +21,11 @@ defineOptions({

 const props = defineProps<PaginationProps>();

-const uiComponent = getConfig('components').pagination;
+const ui = getConfig('components')?.pagination;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-pagination';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['size-change', 'current-change']);

--- a/packages/design/src/Popover.vue
+++ b/packages/design/src/Popover.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-popover" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-popover" :is="uiComponent" v-bind="uiProps">
    <slot></slot>

    <template #reference>
@ -20,7 +20,9 @@ defineOptions({

 const props = defineProps<PopoverProps>();

-const uiComponent = getConfig('components').popover;
+const ui = getConfig('components')?.popover;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-popover';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Radio.vue
+++ b/packages/design/src/Radio.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-radio" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-radio" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,9 @@ defineOptions({

 const props = defineProps<RadioProps>();

-const uiComponent = getConfig('components').radio;
+const ui = getConfig('components')?.radio;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-radio';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/RadioButton.vue
+++ b/packages/design/src/RadioButton.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-radio-button" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-radio-button" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,9 @@ defineOptions({

 const props = defineProps<RadioButtonProps>();

-const uiComponent = getConfig('components').radioButton;
+const ui = getConfig('components')?.radioButton;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-radio-button';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/RadioGroup.vue
+++ b/packages/design/src/RadioGroup.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-radio-group"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @update:modelValue="updateModelValue"
@ -22,9 +22,11 @@ defineOptions({

 const props = defineProps<RadioGroupProps>();

-const uiComponent = getConfig('components').radioGroup;
+const ui = getConfig('components')?.radioGroup;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-radio-group';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/Row.vue
+++ b/packages/design/src/Row.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-row" :is="uiComponent.component">
+  <component class="tmagic-design-row" :is="uiComponent">
    <slot></slot>
  </component>
 </template>
@ -11,5 +11,5 @@ defineOptions({
  name: 'TMRow',
 });

-const uiComponent = getConfig('components').row;
+const uiComponent = getConfig('components')?.row.component || 'el-row';
 </script>
--- a/packages/design/src/Scrollbar.vue
+++ b/packages/design/src/Scrollbar.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-scrollbar" :is="uiComponent.component">
+  <component class="tmagic-design-scrollbar" :is="uiComponent">
    <slot></slot>
  </component>
 </template>
@ -11,5 +11,7 @@ defineOptions({
  name: 'TMScrollbar',
 });

-const uiComponent = getConfig('components').scrollbar;
+const ui = getConfig('components')?.scrollbar;
+
+const uiComponent = ui?.component || 'el-scrollbar';
 </script>
--- a/packages/design/src/Select.vue
+++ b/packages/design/src/Select.vue
@ -2,7 +2,7 @@
  <component
    class="tmagic-design-select"
    ref="select"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @visible-change="visibleHandler"
@ -25,9 +25,11 @@ defineOptions({

 const props = defineProps<SelectProps>();

-const uiComponent = getConfig('components').select;
+const ui = getConfig('components')?.select;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-select';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);

--- a/packages/design/src/Step.vue
+++ b/packages/design/src/Step.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-step" :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+  <component class="tmagic-design-step" :is="uiComponent" v-bind="uiProps" @click="clickHandler">
    <slot></slot>
  </component>
 </template>
@ -22,7 +22,9 @@ const clickHandler = (...args: any[]) => {
  emit('click', ...args);
 };

-const uiComponent = getConfig('components').step;
+const ui = getConfig('components')?.step;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-step';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Steps.vue
+++ b/packages/design/src/Steps.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-steps" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-steps" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,9 @@ defineOptions({

 const props = defineProps<StepsProps>();

-const uiComponent = getConfig('components').steps;
+const ui = getConfig('components')?.steps;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-steps';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Switch.vue
+++ b/packages/design/src/Switch.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-switch"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @update:modelValue="updateModelValue"
    @change="changeHandler"
@ -24,9 +24,11 @@ defineOptions({

 const props = defineProps<SwitchProps>();

-const uiComponent = getConfig('components').switch;
+const ui = getConfig('components')?.switch;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-switch';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/TabPane.vue
+++ b/packages/design/src/TabPane.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-tab-pane" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tab-pane" :is="uiComponent" v-bind="uiProps">
    <template #default>
      <slot></slot>
    </template>
@ -21,7 +21,10 @@ defineOptions({
 });

 const props = defineProps<TabPaneProps>();
-const uiComponent = getConfig('components').tabPane;

-const uiProps = computed(() => uiComponent.props(props));
+const ui = getConfig('components')?.tabPane;
+
+const uiComponent = ui?.component || 'el-tab-pane';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Table.vue
+++ b/packages/design/src/Table.vue
@ -2,7 +2,7 @@
  <component
    class="tmagic-design-table"
    ref="table"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @select="selectHandler"
    @sort-change="sortChangeHandler"
@ -27,9 +27,11 @@ const props = withDefaults(defineProps<TableProps>(), {
  data: () => [],
 });

-const uiComponent = getConfig('components').table;
+const ui = getConfig('components')?.table;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-table';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['select', 'sort-change', 'expand-change', 'cell-click']);

--- a/packages/design/src/TableColumn.vue
+++ b/packages/design/src/TableColumn.vue
@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component :is="uiComponent" v-bind="uiProps">
    <template #default="{ $index, row }">
      <!-- eslint-disable-next-line vue/valid-attribute-name -->
      <slot :$index="$index" :row="row"></slot>
@ -19,7 +19,9 @@ defineOptions({

 const props = defineProps<TableColumnProps>();

-const uiComponent = getConfig('components').tableColumn;
+const ui = getConfig('components')?.tableColumn;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-table-column';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Tabs.vue
+++ b/packages/design/src/Tabs.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-tabs"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @tab-click="tabClickHandler"
    @tab-add="onTabAdd"
@ -26,9 +26,11 @@ defineOptions({

 const props = defineProps<TabsProps>();

-const uiComponent = getConfig('components').tabs;
+const ui = getConfig('components')?.tabs;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-tabs';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['tab-click', 'tab-add', 'tab-remove', 'update:model-value']);

--- a/packages/design/src/Tag.vue
+++ b/packages/design/src/Tag.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-tag" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tag" :is="uiComponent" v-bind="uiProps">
    <slot></slot>
  </component>
 </template>
@ -16,7 +16,9 @@ defineOptions({

 const props = defineProps<TagProps>();

-const uiComponent = getConfig('components').tag;
+const ui = getConfig('components')?.tag;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-tag';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/TimePicker.vue
+++ b/packages/design/src/TimePicker.vue
@ -1,7 +1,7 @@
 <template>
  <component
    class="tmagic-design-time-picker"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
    @update:modelValue="updateModelValue"
@ -21,9 +21,11 @@ defineOptions({

 const props = defineProps<TimePickerProps>();

-const uiComponent = getConfig('components').timePicker;
+const ui = getConfig('components')?.timePicker;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-time-picker';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits(['change', 'update:modelValue']);

--- a/packages/design/src/Tooltip.vue
+++ b/packages/design/src/Tooltip.vue
@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-tooltip" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tooltip" :is="uiComponent" v-bind="uiProps">
    <template #content>
      <slot name="content"></slot>
    </template>
@ -19,7 +19,9 @@ defineOptions({

 const props = defineProps<TooltipProps>();

-const uiComponent = getConfig('components').tooltip;
+const ui = getConfig('components')?.tooltip;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-tooltip';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>
--- a/packages/design/src/Tree.vue
+++ b/packages/design/src/Tree.vue
@ -2,7 +2,7 @@
  <component
    class="tmagic-design-tree"
    ref="tree"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @node-click="nodeClickHandler"
    @node-contextmenu="contextmenu"
@ -31,9 +31,11 @@ defineOptions({

 const props = defineProps<TreeProps>();

-const uiComponent = getConfig('components').tree;
+const ui = getConfig('components')?.tree;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-tree';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const emit = defineEmits([
  'node-click',
--- a/packages/design/src/Upload.vue
+++ b/packages/design/src/Upload.vue
@ -2,7 +2,7 @@
  <component
    class="tmagic-design-upload"
    ref="upload"
-    :is="uiComponent.component"
+    :is="uiComponent"
    v-bind="uiProps"
    @change="changeHandler"
  ></component>
@ -25,9 +25,11 @@ const emit = defineEmits(['change']);
 const changeHandler = (...args: any[]) => {
  emit('change', ...args);
 };
-const uiComponent = getConfig('components').upload;
+const ui = getConfig('components')?.upload;

-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-upload';
+
+const uiProps = computed(() => ui?.props(props) || {});

 const upload = ref<any>();

--- a/packages/design/src/config.ts
+++ b/packages/design/src/config.ts
@ -16,7 +16,6 @@
 * limitations under the License.
 */

-import defaultAdapter from './defaultAdapter';
 import { PluginOptions } from './types';

 let $MAGIC_DESIGN: PluginOptions = {};
@ -25,6 +24,6 @@ const setConfig = (options: PluginOptions): void => {
  $MAGIC_DESIGN = options;
 };

-const getConfig = (key: string): any => $MAGIC_DESIGN[key] || (defaultAdapter as any)[key];
+const getConfig = <K extends keyof PluginOptions>(key: K) => $MAGIC_DESIGN[key];

 export { getConfig, setConfig };
--- a/packages/design/src/defaultAdapter.ts
+++ b/packages/design/src/defaultAdapter.ts
@ -1,272 +0,0 @@
-import type {
-  AutocompleteProps,
-  BadgeProps,
-  ButtonProps,
-  CardProps,
-  CascaderProps,
-  CheckboxGroupProps,
-  CheckboxProps,
-  CollapseItemProps,
-  CollapseProps,
-  ColorPickerProps,
-  ColProps,
-  DatePickerProps,
-  DialogProps,
-  DividerProps,
-  DrawerProps,
-  DropdownItemProps,
-  DropdownProps,
-  FormItemProps,
-  FormProps,
-  InputNumberProps,
-  InputProps,
-  OptionGroupProps,
-  OptionProps,
-  PaginationProps,
-  PopoverProps,
-  RadioButtonProps,
-  RadioGroupProps,
-  RadioProps,
-  SelectProps,
-  StepProps,
-  StepsProps,
-  SwitchProps,
-  TableColumnProps,
-  TableProps,
-  TabPaneProps,
-  TabsProps,
-  TagProps,
-  TimePickerProps,
-  TooltipProps,
-  TreeProps,
-  UploadProps,
-} from './types';
-
-export default {
-  components: {
-    badge: {
-      component: 'el-badge',
-      props: (props: BadgeProps) => props,
-    },
-
-    autocomplete: {
-      component: 'el-autocomplete',
-      props: (props: AutocompleteProps) => props,
-    },
-
-    button: {
-      component: 'el-button',
-      props: (props: ButtonProps) => props,
-    },
-
-    card: {
-      component: 'el-card',
-      props: (props: CardProps) => props,
-    },
-
-    cascader: {
-      component: 'el-cascader',
-      props: (props: CascaderProps) => props,
-    },
-
-    checkbox: {
-      component: 'el-checkbox',
-      props: (props: CheckboxProps) => props,
-    },
-
-    checkboxGroup: {
-      component: 'el-checkbox-group',
-      props: (props: CheckboxGroupProps) => props,
-    },
-
-    col: {
-      component: 'el-col',
-      props: (props: ColProps) => props,
-    },
-
-    collapse: {
-      component: 'el-collapse',
-      props: (props: CollapseProps) => props,
-    },
-
-    collapseItem: {
-      component: 'el-collapse-item',
-      props: (props: CollapseItemProps) => props,
-    },
-
-    colorPicker: {
-      component: 'el-color-picker',
-      props: (props: ColorPickerProps) => props,
-    },
-
-    datePicker: {
-      component: 'el-date-picker',
-      props: (props: DatePickerProps) => props,
-    },
-
-    dialog: {
-      component: 'el-dialog',
-      props: (props: DialogProps) => props,
-    },
-
-    divider: {
-      component: 'el-divider',
-      props: (props: DividerProps) => props,
-    },
-
-    drawer: {
-      component: 'el-drawer',
-      props: (props: DrawerProps) => props,
-    },
-
-    dropdown: {
-      component: 'el-dropdown',
-      props: (props: DropdownProps) => props,
-    },
-
-    dropdownItem: {
-      component: 'dropdown-item',
-      props: (props: DropdownItemProps) => props,
-    },
-
-    dropdownMenu: {
-      component: 'dropdown-menu',
-      props: () => ({}),
-    },
-
-    form: {
-      component: 'el-form',
-      props: (props: FormProps) => props,
-    },
-
-    formItem: {
-      component: 'el-form-item',
-      props: (props: FormItemProps) => props,
-    },
-
-    icon: {
-      component: 'el-icon',
-      props: () => ({}),
-    },
-
-    input: {
-      component: 'el-input',
-      props: (props: InputProps) => props,
-    },
-
-    inputNumber: {
-      component: 'el-input-number',
-      props: (props: InputNumberProps) => props,
-    },
-
-    option: {
-      component: 'el-option',
-      props: (props: OptionProps) => props,
-    },
-
-    optionGroup: {
-      component: 'el-option-group',
-      props: (props: OptionGroupProps) => props,
-    },
-
-    pagination: {
-      component: 'el-pagination',
-      props: (props: PaginationProps) => props,
-    },
-
-    popover: {
-      component: 'el-popover',
-      props: (props: PopoverProps) => props,
-    },
-
-    radio: {
-      component: 'el-radio',
-      props: (props: RadioProps) => props,
-    },
-
-    radioButton: {
-      component: 'el-radio-button',
-      props: (props: RadioButtonProps) => props,
-    },
-
-    radioGroup: {
-      component: 'el-radio-group',
-      props: (props: RadioGroupProps) => props,
-    },
-
-    row: {
-      component: 'el-row',
-      props: () => ({}),
-    },
-
-    scrollbar: {
-      component: 'el-scrollbar',
-      props: () => ({}),
-    },
-
-    select: {
-      component: 'el-select',
-      props: (props: SelectProps) => props,
-    },
-
-    step: {
-      component: 'el-step',
-      props: (props: StepProps) => props,
-    },
-
-    steps: {
-      component: 'el-steps',
-      props: (props: StepsProps) => props,
-    },
-
-    switch: {
-      component: 'el-switch',
-      props: (props: SwitchProps) => props,
-    },
-
-    table: {
-      component: 'el-table',
-      props: (props: TableProps) => props,
-    },
-
-    tableColumn: {
-      component: 'el-table-column',
-      props: (props: TableColumnProps) => props,
-    },
-
-    tabPane: {
-      component: 'el-tab-pane',
-      props: (props: TabPaneProps) => props,
-    },
-
-    tabs: {
-      component: 'el-tabs',
-      props: (props: TabsProps) => props,
-    },
-
-    tag: {
-      component: 'el-tag',
-      props: (props: TagProps) => props,
-    },
-
-    timePicker: {
-      component: 'el-time-picker',
-      props: (props: TimePickerProps) => props,
-    },
-
-    tooltip: {
-      component: 'el-tooltip',
-      props: (props: TooltipProps) => props,
-    },
-
-    tree: {
-      component: 'el-tree',
-      props: (props: TreeProps) => props,
-    },
-
-    upload: {
-      component: 'el-upload',
-      props: (props: UploadProps) => props,
-    },
-  },
-};
--- a/packages/design/src/types.ts
+++ b/packages/design/src/types.ts
@ -1,57 +1,4 @@
-import { Directive } from 'vue';
-
-export interface CascaderOption {
-  /** 指定选项的值为选项对象的某个属性值 */
-  value: any;
-  /** 指定选项标签为选项对象的某个属性值 */
-  label: string;
-  /** 指定选项的子选项为选项对象的某个属性值 */
-  children?: CascaderOption[];
-}
-
-export interface TMagicMessage {
-  success: (msg: string) => void;
-  warning: (msg: string) => void;
-  info: (msg: string) => void;
-  error: (msg: string) => void;
-  closeAll: () => void;
-}
-
-export type ElMessageBoxShortcutMethod = ((
-  message: string,
-  title: string,
-  options?: any,
-  appContext?: any | null,
-) => Promise<any>) &
-  ((message: string, options?: any, appContext?: any | null) => Promise<any>);
-
-export interface TMagicMessageBox {
-  alert: ElMessageBoxShortcutMethod;
-
-  confirm: ElMessageBoxShortcutMethod;
-
-  prompt: ElMessageBoxShortcutMethod;
-
-  close(): void;
-}
-
-export type LoadingBinding = boolean;
-
-const INSTANCE_KEY = Symbol('TdesignLoading');
-
-export interface ElementLoading extends HTMLElement {
-  [INSTANCE_KEY]?: {
-    instance: any;
-  };
-}
-
-export interface PluginOptions {
-  message?: TMagicMessage;
-  messageBox?: TMagicMessageBox;
-  components?: Record<string, any>;
-  loading?: Directive<ElementLoading, LoadingBinding>;
-  [key: string]: any;
-}
+import { DefineComponent, Directive } from 'vue';

 export type FieldSize = 'large' | 'default' | 'small';

@ -64,6 +11,7 @@ export interface AutocompleteProps {
  triggerOnFocus?: boolean;
  valueKey?: string;
  debounce?: number;
+  size?: FieldSize;
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
  fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
 }
@ -414,3 +362,328 @@ export interface UploadProps {
  autoUpload?: boolean;
  disabled?: boolean;
 }
+
+export interface CascaderOption {
+  /** 指定选项的值为选项对象的某个属性值 */
+  value: any;
+  /** 指定选项标签为选项对象的某个属性值 */
+  label: string;
+  /** 指定选项的子选项为选项对象的某个属性值 */
+  children?: CascaderOption[];
+}
+
+export interface TMagicMessage {
+  success: (msg: string) => void;
+  warning: (msg: string) => void;
+  info: (msg: string) => void;
+  error: (msg: string) => void;
+  closeAll: () => void;
+}
+
+export type ElMessageBoxShortcutMethod = ((
+  message: string,
+  title: string,
+  options?: any,
+  appContext?: any | null,
+) => Promise<any>) &
+  ((message: string, options?: any, appContext?: any | null) => Promise<any>);
+
+export interface TMagicMessageBox {
+  alert: ElMessageBoxShortcutMethod;
+
+  confirm: ElMessageBoxShortcutMethod;
+
+  prompt: ElMessageBoxShortcutMethod;
+
+  close(): void;
+}
+
+export type LoadingBinding = boolean;
+
+const INSTANCE_KEY = Symbol('TdesignLoading');
+
+export interface ElementLoading extends HTMLElement {
+  [INSTANCE_KEY]?: {
+    instance: any;
+  };
+}
+
+export interface Components {
+  badge: {
+    component: DefineComponent<BadgeProps, {}, any> | string;
+    props: (props: BadgeProps) => BadgeProps;
+  };
+
+  autocomplete: {
+    component: DefineComponent<AutocompleteProps, {}, any> | string;
+    props: (props: AutocompleteProps) => AutocompleteProps;
+  };
+
+  button: {
+    component: DefineComponent<ButtonProps, {}, any> | string;
+    props: (props: ButtonProps) => ButtonProps;
+  };
+
+  card: {
+    component: DefineComponent<CardProps, {}, any> | string;
+    props: (props: CardProps) => CardProps;
+  };
+
+  cascader: {
+    component: DefineComponent<CascaderProps, {}, any> | string;
+    props: (props: CascaderProps) => CascaderProps;
+  };
+
+  checkbox: {
+    component: DefineComponent<CheckboxProps, {}, any> | string;
+    props: (props: CheckboxProps) => CheckboxProps;
+  };
+
+  checkboxGroup: {
+    component: DefineComponent<CheckboxGroupProps, {}, any> | string;
+    props: (props: CheckboxGroupProps) => CheckboxGroupProps;
+  };
+
+  col: {
+    component: DefineComponent<ColProps, {}, any> | string;
+    props: (props: ColProps) => ColProps;
+  };
+
+  collapse: {
+    component: DefineComponent<CollapseProps, {}, any> | string;
+    props: (props: CollapseProps) => CollapseProps;
+  };
+
+  collapseItem: {
+    component: DefineComponent<CollapseItemProps, {}, any> | string;
+    props: (props: CollapseItemProps) => CollapseItemProps;
+  };
+
+  colorPicker: {
+    component: DefineComponent<ColorPickerProps, {}, any> | string;
+    props: (props: ColorPickerProps) => ColorPickerProps;
+  };
+
+  datePicker: {
+    component: DefineComponent<DatePickerProps, {}, any> | string;
+    props: (props: DatePickerProps) => DatePickerProps;
+  };
+
+  dialog: {
+    component: DefineComponent<DialogProps, {}, any> | string;
+    props: (props: DialogProps) => DialogProps;
+  };
+
+  divider: {
+    component: DefineComponent<DividerProps, {}, any> | string;
+    props: (props: DividerProps) => DividerProps;
+  };
+
+  drawer: {
+    component: DefineComponent<DrawerProps, {}, any> | string;
+    props: (props: DrawerProps) => DrawerProps;
+  };
+
+  dropdown: {
+    component: DefineComponent<DropdownProps, {}, any> | string;
+    props: (props: DropdownProps) => DropdownProps;
+  };
+
+  dropdownItem: {
+    component: DefineComponent<DropdownItemProps, {}, any> | string;
+    props: (props: DropdownItemProps) => DropdownItemProps;
+  };
+
+  dropdownMenu: {
+    component: DefineComponent<{}, {}, any> | string;
+    props: () => {};
+  };
+
+  form: {
+    component: DefineComponent<FormProps, {}, any> | string;
+    props: (props: FormProps) => FormProps;
+  };
+
+  formItem: {
+    component: DefineComponent<FormItemProps, {}, any> | string;
+    props: (props: FormItemProps) => FormItemProps;
+  };
+
+  icon: {
+    component: DefineComponent<{}, {}, any> | string;
+    props: () => {};
+  };
+
+  input: {
+    component: DefineComponent<InputProps, {}, any> | string;
+    props: (props: InputProps) => InputProps;
+  };
+
+  inputNumber: {
+    component: DefineComponent<InputNumberProps, {}, any> | string;
+    props: (props: InputNumberProps) => InputNumberProps;
+  };
+
+  option: {
+    component: DefineComponent<OptionProps, {}, any> | string;
+    props: (props: OptionProps) => OptionProps;
+  };
+
+  optionGroup: {
+    component: DefineComponent<OptionGroupProps, {}, any> | string;
+    props: (props: OptionGroupProps) => OptionGroupProps;
+  };
+
+  pagination: {
+    component: DefineComponent<PaginationProps, {}, any> | string;
+    props: (props: PaginationProps) => PaginationProps;
+  };
+
+  popover: {
+    component: DefineComponent<PopoverProps, {}, any> | string;
+    props: (props: PopoverProps) => PopoverProps;
+  };
+
+  radio: {
+    component: DefineComponent<RadioProps, {}, any> | string;
+    props: (props: RadioProps) => RadioProps;
+  };
+
+  radioButton: {
+    component: DefineComponent<RadioButtonProps, {}, any> | string;
+    props: (props: RadioButtonProps) => RadioButtonProps;
+  };
+
+  radioGroup: {
+    component: DefineComponent<RadioGroupProps, {}, any> | string;
+    props: (props: RadioGroupProps) => RadioGroupProps;
+  };
+
+  row: {
+    component: DefineComponent<{}, {}, any> | string;
+    props: () => {};
+  };
+
+  scrollbar: {
+    component: DefineComponent<{}, {}, any> | string;
+    props: () => {};
+  };
+
+  select: {
+    component:
+      | DefineComponent<
+          SelectProps,
+          {
+            scrollbarWrap: HTMLDivElement | undefined;
+            setQuery: (v: string) => void;
+            setPreviousQuery: (v: string) => void;
+            setSelectedLabel: (v: string) => void;
+            setSelected: () => void;
+          },
+          any
+        >
+      | string;
+    props: (props: SelectProps) => SelectProps;
+  };
+
+  step: {
+    component: DefineComponent<StepProps, {}, any> | string;
+    props: (props: StepProps) => StepProps;
+  };
+
+  steps: {
+    component: DefineComponent<StepsProps, {}, any> | string;
+    props: (props: StepsProps) => StepsProps;
+  };
+
+  switch: {
+    component: DefineComponent<SwitchProps, {}, any> | string;
+    props: (props: SwitchProps) => SwitchProps;
+  };
+
+  table: {
+    component:
+      | DefineComponent<
+          TableProps,
+          {
+            instance: any;
+            $el: HTMLDivElement | undefined;
+            clearSelection: (...args: any[]) => void;
+            toggleRowSelection: (...args: any[]) => void;
+            toggleRowExpansion: (...args: any[]) => void;
+          },
+          any
+        >
+      | string;
+    props: (props: TableProps) => TableProps;
+  };
+
+  tableColumn: {
+    component: DefineComponent<TableColumnProps, {}, any> | string;
+    props: (props: TableColumnProps) => TableColumnProps;
+  };
+
+  tabPane: {
+    component: DefineComponent<TabPaneProps, {}, any> | string;
+    props: (props: TabPaneProps) => TabPaneProps;
+  };
+
+  tabs: {
+    component: DefineComponent<TabsProps, {}, any> | string;
+    props: (props: TabsProps) => TabsProps;
+  };
+
+  tag: {
+    component: DefineComponent<TagProps, {}, any> | string;
+    props: (props: TagProps) => TagProps;
+  };
+
+  timePicker: {
+    component: DefineComponent<TimePickerProps, {}, any> | string;
+    props: (props: TimePickerProps) => TimePickerProps;
+  };
+
+  tooltip: {
+    component: DefineComponent<TooltipProps, {}, any> | string;
+    props: (props: TooltipProps) => TooltipProps;
+  };
+
+  tree: {
+    component:
+      | DefineComponent<
+          TreeProps,
+          {
+            getData: () => TreeProps['data'];
+            getStore: () => any;
+            filter: (...args: any[]) => any;
+            getNode: (...args: any[]) => any;
+            setCheckedKeys: (...args: any[]) => any;
+            setCurrentKey: (...args: any[]) => any;
+          },
+          any
+        >
+      | string;
+    props: (props: TreeProps) => TreeProps;
+  };
+
+  upload: {
+    component:
+      | DefineComponent<
+          UploadProps,
+          {
+            clearFiles: (...args: any[]) => any;
+          },
+          any
+        >
+      | string;
+    props: (props: UploadProps) => UploadProps;
+  };
+}
+
+export interface PluginOptions {
+  message?: TMagicMessage;
+  messageBox?: TMagicMessageBox;
+  components?: Components;
+  loading?: Directive<ElementLoading, LoadingBinding>;
+  [key: string]: any;
+}
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/packages/editor/src/fields/DataSourceInput.vue
@ -1,18 +1,18 @@
 <template>
  <component
-    v-if="!disabled && isFocused"
-    :is="getConfig('components').autocomplete.component"
+    v-if="disabled || isFocused"
+    :is="getConfig('components')?.autocomplete.component || 'el-autocomplete'"
    class="tmagic-design-auto-complete"
    ref="autocomplete"
    v-model="state"
    v-bind="
-      getConfig('components').autocomplete.props({
+      getConfig('components')?.autocomplete.props({
        disabled,
        size,
        fetchSuggestions: querySearch,
        triggerOnFocus: false,
        clearable: true,
-      })
+      }) || {}
    "
    style="width: 100%"
    @blur="blurHandler"
@ -31,11 +31,13 @@
    </template>
  </component>
  <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
-    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`" style="justify-content: left">
-      <template v-for="(item, index) in displayState">
-        <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
-        <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
-      </template>
+    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
+      <div class="el-input__inner">
+        <template v-for="(item, index) in displayState">
+          <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
+          <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
+        </template>
+      </div>
    </div>
  </div>
 </template>
@ -44,7 +46,7 @@
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';

-import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import { FieldSize, getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';

 import Icon from '@editor/components/Icon.vue';
@ -66,7 +68,7 @@ const props = withDefaults(
    prop: string;
    disabled: boolean;
    lastValues?: Record<string, any>;
-    size?: 'large' | 'default' | 'small';
+    size?: FieldSize;
  }>(),
  {
    disabled: false,
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@ -3,13 +3,13 @@
    v-if="data.type === 'tabs' && data.items.length"
    v-model="activeTabName"
    class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
-    :is="tabsComponent.component"
+    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
+    :is="tabsComponent?.component || 'el-tabs'"
  >
    <component
      v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent.props({ name: config.text, lazy: config.lazy })"
-      :is="tabPaneComponent.component"
+      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
      :key="config.$key || index"
    >
      <template #label>
@ -112,8 +112,8 @@ const props = withDefaults(
  },
 );

-const tabPaneComponent = getConfig('components').tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabPaneComponent = getConfig('components')?.tabPane;
+const tabsComponent = getConfig('components')?.tabs;

 const activeTabName = ref(props.data?.status);

--- a/packages/element-plus-adapter/src/index.ts
+++ b/packages/element-plus-adapter/src/index.ts
@ -73,6 +73,7 @@ import type {
  OptionGroupProps,
  OptionProps,
  PaginationProps,
+  PluginOptions,
  PopoverProps,
  RadioButtonProps,
  RadioGroupProps,
@ -92,92 +93,92 @@ import type {
  UploadProps,
 } from '@tmagic/design';

-const adapter: any = {
+const adapter: PluginOptions = {
  message: ElMessage,
  messageBox: ElMessageBox,
  components: {
    autocomplete: {
-      component: ElAutocomplete,
+      component: ElAutocomplete as any,
      props: (props: AutocompleteProps) => props,
    },

    badge: {
-      component: ElBadge,
+      component: ElBadge as any,
      props: (props: BadgeProps) => props,
    },

    button: {
-      component: ElButton,
+      component: ElButton as any,
      props: (props: ButtonProps) => props,
    },

    card: {
-      component: ElCard,
+      component: ElCard as any,
      props: (props: CardProps) => props,
    },

    cascader: {
-      component: ElCascader,
+      component: ElCascader as any,
      props: (props: CascaderProps) => props,
    },

    checkbox: {
-      component: ElCheckbox,
+      component: ElCheckbox as any,
      props: (props: CheckboxProps) => props,
    },

    checkboxGroup: {
-      component: ElCheckboxGroup,
+      component: ElCheckboxGroup as any,
      props: (props: CheckboxGroupProps) => props,
    },

    col: {
-      component: ElCol,
+      component: ElCol as any,
      props: (props: ColProps) => props,
    },

    collapse: {
-      component: ElCollapse,
+      component: ElCollapse as any,
      props: (props: CollapseProps) => props,
    },

    collapseItem: {
-      component: ElCollapseItem,
+      component: ElCollapseItem as any,
      props: (props: CollapseItemProps) => props,
    },

    colorPicker: {
-      component: ElColorPicker,
+      component: ElColorPicker as any,
      props: (props: ColorPickerProps) => props,
    },

    datePicker: {
-      component: ElDatePicker,
+      component: ElDatePicker as any,
      props: (props: DatePickerProps) => props,
    },

    dialog: {
-      component: ElDialog,
+      component: ElDialog as any,
      props: (props: DialogProps) => props,
    },

    divider: {
-      component: ElDivider,
+      component: ElDivider as any,
      props: (props: DividerProps) => props,
    },

    drawer: {
-      component: ElDrawer,
+      component: ElDrawer as any,
      props: (props: DrawerProps) => props,
    },

    dropdown: {
-      component: ElDropdown,
+      component: ElDropdown as any,
      props: (props: DropdownProps) => props,
    },

    dropdownItem: {
-      component: ElDropdownItem,
+      component: ElDropdownItem as any,
      props: (props: DropdownItemProps) => props,
    },

@ -187,12 +188,12 @@ const adapter: any = {
    },

    form: {
-      component: ElForm,
+      component: ElForm as any,
      props: (props: FormProps) => props,
    },

    formItem: {
-      component: ElFormItem,
+      component: ElFormItem as any,
      props: (props: FormItemProps) => props,
    },

@ -202,122 +203,122 @@ const adapter: any = {
    },

    input: {
-      component: ElInput,
+      component: ElInput as any,
      props: (props: InputProps) => props,
    },

    inputNumber: {
-      component: ElInputNumber,
+      component: ElInputNumber as any,
      props: (props: InputNumberProps) => props,
    },

    option: {
-      component: ElOption,
+      component: ElOption as any,
      props: (props: OptionProps) => props,
    },

    optionGroup: {
-      component: ElOptionGroup,
+      component: ElOptionGroup as any,
      props: (props: OptionGroupProps) => props,
    },

    pagination: {
-      component: ElPagination,
+      component: ElPagination as any,
      props: (props: PaginationProps) => props,
    },

    popover: {
-      component: ElPopover,
+      component: ElPopover as any,
      props: (props: PopoverProps) => props,
    },

    radio: {
-      component: ElRadio,
+      component: ElRadio as any,
      props: (props: RadioProps) => props,
    },

    radioButton: {
-      component: ElRadioButton,
+      component: ElRadioButton as any,
      props: (props: RadioButtonProps) => props,
    },

    radioGroup: {
-      component: ElRadioGroup,
+      component: ElRadioGroup as any,
      props: (props: RadioGroupProps) => props,
    },

    row: {
-      component: ElRow,
+      component: ElRow as any,
      props: () => ({}),
    },

    scrollbar: {
-      component: ElScrollbar,
+      component: ElScrollbar as any,
      props: () => ({}),
    },

    select: {
-      component: ElSelect,
+      component: ElSelect as any,
      props: (props: SelectProps) => props,
    },

    step: {
-      component: ElStep,
+      component: ElStep as any,
      props: (props: StepProps) => props,
    },

    steps: {
-      component: ElSteps,
+      component: ElSteps as any,
      props: (props: StepsProps) => props,
    },

    switch: {
-      component: ElSwitch,
+      component: ElSwitch as any,
      props: (props: SwitchProps) => props,
    },

    table: {
-      component: ElTable,
+      component: ElTable as any,
      props: (props: TableProps) => props,
    },

    tableColumn: {
-      component: ElTableColumn,
+      component: ElTableColumn as any,
      props: (props: TableColumnProps) => props,
    },

    tabPane: {
-      component: ElTabPane,
+      component: ElTabPane as any,
      props: (props: TabPaneProps) => props,
    },

    tabs: {
-      component: ElTabs,
+      component: ElTabs as any,
      props: (props: TabsProps) => props,
    },

    tag: {
-      component: ElTag,
+      component: ElTag as any,
      props: (props: TagProps) => props,
    },

    timePicker: {
-      component: ElTimePicker,
+      component: ElTimePicker as any,
      props: (props: TimePickerProps) => props,
    },

    tooltip: {
-      component: ElTooltip,
+      component: ElTooltip as any,
      props: (props: TooltipProps) => props,
    },

    tree: {
-      component: ElTree,
+      component: ElTree as any,
      props: (props: TreeProps) => props,
    },

    upload: {
-      component: ElUpload,
+      component: ElUpload as any,
      props: (props: UploadProps) => props,
    },
  },
--- a/packages/form/src/containers/Tabs.vue
+++ b/packages/form/src/containers/Tabs.vue
@ -2,13 +2,13 @@
  <component
    v-model="activeTabName"
    v-bind="
-      tabsComponent.props({
+      tabsComponent?.props({
        type: config.tabType,
        editable: config.editable || false,
        tabPosition: config.tabPosition || 'top',
-      })
+      }) || {}
    "
-    :is="tabsComponent.component"
+    :is="tabsComponent?.component || 'el-tabs'"
    :class="`tmagic-design-tabs ${config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'}`"
    @tab-click="tabClickHandler"
    @tab-add="onTabAdd"
@ -16,9 +16,11 @@
  >
    <component
      v-for="(tab, tabIndex) in tabs"
-      :is="tabPaneComponent.component"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
      :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
-      v-bind="tabPaneComponent.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false })"
+      v-bind="
+        tabPaneComponent?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+      "
    >
      <template #label>
        <span>
@ -86,8 +88,8 @@ type DiffCount = {
  [tabIndex: number]: number;
 };

-const tabPaneComponent = getConfig('components').tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabPaneComponent = getConfig('components')?.tabPane;
+const tabsComponent = getConfig('components')?.tabs;

 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
  const { config, model, prop } = props;
--- a/packages/form/src/fields/SelectOptionGroups.vue
+++ b/packages/form/src/fields/SelectOptionGroups.vue
@ -2,7 +2,7 @@
  <TMagicOptionGroup v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
    <component
      v-for="(item, index) in group.options"
-      :is="uiComponent.component"
+      :is="uiComponent"
      :key="index"
      :label="item.label || item.text"
      :value="item.value"
@ -25,5 +25,5 @@ defineProps<{
  options: SelectGroupOption[];
 }>();

-const uiComponent = getConfig('components').option;
+const uiComponent = getConfig('components')?.option.component || 'el-option';
 </script>
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@ -82,45 +82,47 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';

-const defaultInstallOpt = {};
+export interface InstallOptions {
+  [key: string]: any;
+}

-const install = (app: App, opt: any) => {
-  const option = Object.assign(defaultInstallOpt, opt);
-
-  // eslint-disable-next-line no-param-reassign
-  app.config.globalProperties.$MAGIC_FORM = option;
-  setConfig(option);
-
-  app.component('m-form', Form);
-  app.component('m-form-dialog', FormDialog);
-  app.component('m-form-container', Container);
-  app.component('m-form-fieldset', Fieldset);
-  app.component('m-form-group-list', GroupList);
-  app.component('m-form-panel', Panel);
-  app.component('m-form-row', Row);
-  app.component('m-form-step', MStep);
-  app.component('m-form-table', Table);
-  app.component('m-form-tab', Tabs);
-  app.component('m-fields-text', Text);
-  app.component('m-fields-number', Number);
-  app.component('m-fields-textarea', Textarea);
-  app.component('m-fields-hidden', Hidden);
-  app.component('m-fields-date', Date);
-  app.component('m-fields-datetime', DateTime);
-  app.component('m-fields-daterange', Daterange);
-  app.component('m-fields-time', Time);
-  app.component('m-fields-checkbox', Checkbox);
-  app.component('m-fields-switch', Switch);
-  app.component('m-fields-color-picker', ColorPicker);
-  app.component('m-fields-checkbox-group', CheckboxGroup);
-  app.component('m-fields-radio-group', RadioGroup);
-  app.component('m-fields-display', Display);
-  app.component('m-fields-link', Link);
-  app.component('m-fields-select', Select);
-  app.component('m-fields-cascader', Cascader);
-  app.component('m-fields-dynamic-field', DynamicField);
-};
+const defaultInstallOpt: InstallOptions = {};

 export default {
-  install,
+  install(app: App, opt: InstallOptions = {}) {
+    const option = Object.assign(defaultInstallOpt, opt);
+
+    // eslint-disable-next-line no-param-reassign
+    app.config.globalProperties.$MAGIC_FORM = option;
+    setConfig(option);
+
+    app.component('m-form', Form);
+    app.component('m-form-dialog', FormDialog);
+    app.component('m-form-container', Container);
+    app.component('m-form-fieldset', Fieldset);
+    app.component('m-form-group-list', GroupList);
+    app.component('m-form-panel', Panel);
+    app.component('m-form-row', Row);
+    app.component('m-form-step', MStep);
+    app.component('m-form-table', Table);
+    app.component('m-form-tab', Tabs);
+    app.component('m-fields-text', Text);
+    app.component('m-fields-number', Number);
+    app.component('m-fields-textarea', Textarea);
+    app.component('m-fields-hidden', Hidden);
+    app.component('m-fields-date', Date);
+    app.component('m-fields-datetime', DateTime);
+    app.component('m-fields-daterange', Daterange);
+    app.component('m-fields-time', Time);
+    app.component('m-fields-checkbox', Checkbox);
+    app.component('m-fields-switch', Switch);
+    app.component('m-fields-color-picker', ColorPicker);
+    app.component('m-fields-checkbox-group', CheckboxGroup);
+    app.component('m-fields-radio-group', RadioGroup);
+    app.component('m-fields-display', Display);
+    app.component('m-fields-link', Link);
+    app.component('m-fields-select', Select);
+    app.component('m-fields-cascader', Cascader);
+    app.component('m-fields-dynamic-field', DynamicField);
+  },
 };
--- a/packages/table/src/Table.vue
+++ b/packages/table/src/Table.vue
@ -29,7 +29,7 @@
        <component
          width="40"
          type="selection"
-          :is="tableColumnComponent.component"
+          :is="tableColumnComponent?.component || 'el-table-column'"
          :key="columnIndex"
          :selectable="item.selectable"
        ></component>
@ -114,7 +114,7 @@ const tMagicTable = ref<InstanceType<typeof TMagicTable>>();

 const editState = ref([]);

-const tableColumnComponent = getConfig('components').tableColumn;
+const tableColumnComponent = getConfig('components')?.tableColumn;
 const selectionColumn = computed(() => {
  const column = props.columns.filter((item) => item.selection);
  return column.length ? column[0] : null;