From ffb84cffca8afda45bc153e467a926cf1ec5c0be Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 9 Dec 2022 19:58:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(design):=20=E6=B7=BB=E5=8A=A0class?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design/src/Button.vue        |  4 ++--
 packages/design/src/Card.vue          |  8 +++++---
 packages/design/src/Cascader.vue      |  3 ++-
 packages/design/src/Checkbox.vue      | 10 ++++++++--
 packages/design/src/CheckboxGroup.vue | 10 ++++++++--
 packages/design/src/Col.vue           |  2 +-
 packages/design/src/Collapse.vue      |  8 +++++++-
 packages/design/src/CollapseItem.vue  | 11 ++++++++++-
 packages/design/src/ColorPicker.vue   | 10 ++++++++--
 packages/design/src/DatePicker.vue    | 10 ++++++++--
 packages/design/src/Dialog.vue        |  9 +++++++--
 packages/design/src/Divider.vue       |  2 +-
 packages/design/src/Dropdown.vue      |  2 +-
 packages/design/src/DropdownItem.vue  |  2 +-
 packages/design/src/DropdownMenu.vue  |  2 +-
 packages/design/src/Form.vue          |  2 +-
 packages/design/src/FormItem.vue      |  2 +-
 packages/design/src/Icon.vue          |  2 +-
 packages/design/src/Input.vue         |  5 +++--
 packages/design/src/InputNumber.vue   |  3 ++-
 packages/design/src/Option.vue        |  2 +-
 packages/design/src/OptionGroup.vue   |  2 +-
 packages/design/src/Pagination.vue    |  1 +
 packages/design/src/Popover.vue       |  2 +-
 packages/design/src/Radio.vue         |  2 +-
 packages/design/src/RadioGroup.vue    | 10 ++++++++--
 packages/design/src/Row.vue           |  2 +-
 packages/design/src/Scrollbar.vue     |  2 +-
 packages/design/src/Select.vue        | 18 ++++++++++--------
 packages/design/src/Step.vue          |  2 +-
 packages/design/src/Steps.vue         |  2 +-
 packages/design/src/Switch.vue        | 10 ++++++++--
 packages/design/src/TabPane.vue       |  2 +-
 packages/design/src/Table.vue         |  1 +
 packages/design/src/Tabs.vue          |  1 +
 packages/design/src/Tag.vue           |  4 ++--
 packages/design/src/TimePicker.vue    | 10 ++++++++--
 packages/design/src/Tooltip.vue       |  2 +-
 packages/design/src/Tree.vue          |  1 +
 packages/design/src/Upload.vue        |  9 ++++++++-
 40 files changed, 136 insertions(+), 56 deletions(-)

diff --git a/packages/design/src/Button.vue b/packages/design/src/Button.vue
index 0d266dc6..cb308d4c 100644
--- a/packages/design/src/Button.vue
+++ b/packages/design/src/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+  <component class="tmagic-design-button" :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
     <slot></slot>
   </component>
 </template>
@@ -11,7 +11,7 @@ import { getConfig } from './config';
 
 const props = defineProps<{
   type?: string;
-  size?: string;
+  size?: 'large' | 'default' | 'small';
   text?: boolean;
   icon?: any;
 }>();
diff --git a/packages/design/src/Card.vue b/packages/design/src/Card.vue
index eda48465..c5f4d94e 100644
--- a/packages/design/src/Card.vue
+++ b/packages/design/src/Card.vue
@@ -1,10 +1,12 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-card" :is="uiComponent.component" v-bind="uiProps">
     <template #header>
-      <slot name="header"></slot>
+      <slot name="header" class="header"></slot>
     </template>
 
-    <slot></slot>
+    <template #default>
+      <slot name="default"></slot>
+    </template>
   </component>
 </template>
 
diff --git a/packages/design/src/Cascader.vue b/packages/design/src/Cascader.vue
index 8b1234d8..ba5f0822 100644
--- a/packages/design/src/Cascader.vue
+++ b/packages/design/src/Cascader.vue
@@ -1,6 +1,7 @@
 <template>
   <component
     ref="cascader"
+    class="tmagic-design-cascader"
     :is="uiComponent.component"
     v-bind="uiProps"
     @update:modelValue="updateModelValue"
@@ -21,7 +22,7 @@ const props = defineProps<{
   clearable?: boolean;
   filterable?: boolean;
   options?: CascaderOption[];
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
   props: {
     expandTrigger?: 'click' | 'hover';
     multiple?: boolean;
diff --git a/packages/design/src/Checkbox.vue b/packages/design/src/Checkbox.vue
index 69a38846..f5e0708f 100644
--- a/packages/design/src/Checkbox.vue
+++ b/packages/design/src/Checkbox.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+  <component
+    class="tmagic-design-checkbox"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  >
     <template #default>
       <slot></slot>
     </template>
@@ -18,7 +24,7 @@ const props = withDefaults(
     trueLabel?: string | number | boolean;
     falseLabel?: string | number | boolean;
     disabled?: boolean;
-    size?: 'mini' | 'small' | 'medium';
+    size?: 'large' | 'default' | 'small';
   }>(),
   {
     trueLabel: undefined,
diff --git a/packages/design/src/CheckboxGroup.vue b/packages/design/src/CheckboxGroup.vue
index ed6dae73..2d017825 100644
--- a/packages/design/src/CheckboxGroup.vue
+++ b/packages/design/src/CheckboxGroup.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-checkbox-group"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
     <slot></slot>
   </component>
 </template>
@@ -13,7 +19,7 @@ const props = defineProps<{
   modelValue?: any[];
   label?: string;
   disabled?: boolean;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').checkboxGroup;
diff --git a/packages/design/src/Col.vue b/packages/design/src/Col.vue
index 02ea889b..84239d41 100644
--- a/packages/design/src/Col.vue
+++ b/packages/design/src/Col.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-col" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Collapse.vue b/packages/design/src/Collapse.vue
index 829ee821..779a4c07 100644
--- a/packages/design/src/Collapse.vue
+++ b/packages/design/src/Collapse.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+  <component
+    class="tmagic-design-collapse"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  >
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/CollapseItem.vue b/packages/design/src/CollapseItem.vue
index 008cead1..aebbbff0 100644
--- a/packages/design/src/CollapseItem.vue
+++ b/packages/design/src/CollapseItem.vue
@@ -1,9 +1,18 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+  <component
+    class="tmagic-design-collapse-item"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  >
     <slot></slot>
     <template #title>
       <slot name="title"></slot>
     </template>
+    <template #header>
+      <slot name="title"></slot>
+    </template>
   </component>
 </template>
 
diff --git a/packages/design/src/ColorPicker.vue b/packages/design/src/ColorPicker.vue
index 3ccc31aa..3ce02fbc 100644
--- a/packages/design/src/ColorPicker.vue
+++ b/packages/design/src/ColorPicker.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-color-picker"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
   </component>
 </template>
 
@@ -13,7 +19,7 @@ const props = withDefaults(
     modelValue?: string;
     disabled?: boolean;
     showAlpha?: boolean;
-    size?: 'mini' | 'small' | 'medium';
+    size?: 'large' | 'default' | 'small';
   }>(),
   {
     showAlpha: false,
diff --git a/packages/design/src/DatePicker.vue b/packages/design/src/DatePicker.vue
index 07a6b478..64e1d610 100644
--- a/packages/design/src/DatePicker.vue
+++ b/packages/design/src/DatePicker.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-date-picker"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
   </component>
 </template>
 
@@ -23,7 +29,7 @@ const props = withDefaults(
     /** 在范围选择器里取消两个日期面板之间的联动 */
     unlinkPanels?: boolean;
     defaultTime?: any;
-    size?: 'mini' | 'small' | 'medium';
+    size?: 'large' | 'default' | 'small';
   }>(),
   {
     type: 'date',
diff --git a/packages/design/src/Dialog.vue b/packages/design/src/Dialog.vue
index 703b6b11..3f696110 100644
--- a/packages/design/src/Dialog.vue
+++ b/packages/design/src/Dialog.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @close="closeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-dialog"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @close="closeHandler"
+    @update:modelValue="updateModelValue"
+  >
     <slot></slot>
 
     <template #footer>
@@ -21,7 +27,6 @@ const props = defineProps<{
   width?: string | number;
   fullscreen?: boolean;
   closeOnClickModal?: boolean;
-  labelPosition?: string;
 }>();
 
 const uiComponent = getConfig('components').dialog;
diff --git a/packages/design/src/Divider.vue b/packages/design/src/Divider.vue
index ec723604..e6f75432 100644
--- a/packages/design/src/Divider.vue
+++ b/packages/design/src/Divider.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-divider" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Dropdown.vue b/packages/design/src/Dropdown.vue
index 1b6dc184..ae397c69 100644
--- a/packages/design/src/Dropdown.vue
+++ b/packages/design/src/Dropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @command="commandHandler">
+  <component class="tmagic-design-dropdown" :is="uiComponent.component" v-bind="uiProps" @command="commandHandler">
     <slot></slot>
 
     <template #dropdown>
diff --git a/packages/design/src/DropdownItem.vue b/packages/design/src/DropdownItem.vue
index 1700b2f6..82f51d5f 100644
--- a/packages/design/src/DropdownItem.vue
+++ b/packages/design/src/DropdownItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-dropdown-item" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/DropdownMenu.vue b/packages/design/src/DropdownMenu.vue
index 9bcc1b71..c290f9ad 100644
--- a/packages/design/src/DropdownMenu.vue
+++ b/packages/design/src/DropdownMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-dropdown-menu" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Form.vue b/packages/design/src/Form.vue
index d407a3fb..d7a1105b 100644
--- a/packages/design/src/Form.vue
+++ b/packages/design/src/Form.vue
@@ -1,5 +1,5 @@
 <template>
-  <component ref="form" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-form" ref="form" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/FormItem.vue b/packages/design/src/FormItem.vue
index 6b13cacc..20b2eec0 100644
--- a/packages/design/src/FormItem.vue
+++ b/packages/design/src/FormItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-form-item" :is="uiComponent.component" v-bind="uiProps">
     <template #label>
       <slot name="label"></slot>
     </template>
diff --git a/packages/design/src/Icon.vue b/packages/design/src/Icon.vue
index c6d67e5d..9f6a6471 100644
--- a/packages/design/src/Icon.vue
+++ b/packages/design/src/Icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component">
+  <component class="tmagic-design-icon" :is="uiComponent.component">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Input.vue b/packages/design/src/Input.vue
index 25722495..14e21e45 100644
--- a/packages/design/src/Input.vue
+++ b/packages/design/src/Input.vue
@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-input"
     :is="uiComponent.component"
     v-bind="uiProps"
     @change="changeHandler"
@@ -21,12 +22,12 @@ import { computed } from 'vue';
 import { getConfig } from './config';
 
 const props = defineProps<{
-  modelValue?: string | number | boolean;
+  modelValue?: string | number;
   clearable?: boolean;
   disabled?: boolean;
   placeholder?: string;
   type?: string;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').input;
diff --git a/packages/design/src/InputNumber.vue b/packages/design/src/InputNumber.vue
index 2ce6b361..cb583de8 100644
--- a/packages/design/src/InputNumber.vue
+++ b/packages/design/src/InputNumber.vue
@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-input-number"
     :is="uiComponent.component"
     v-bind="uiProps"
     @change="changeHandler"
@@ -22,7 +23,7 @@ const props = defineProps<{
   step?: number;
   min?: number;
   max?: number;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').inputNumber;
diff --git a/packages/design/src/Option.vue b/packages/design/src/Option.vue
index 859e6021..699f3eed 100644
--- a/packages/design/src/Option.vue
+++ b/packages/design/src/Option.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-option" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/OptionGroup.vue b/packages/design/src/OptionGroup.vue
index ede4a22b..7f054eb7 100644
--- a/packages/design/src/OptionGroup.vue
+++ b/packages/design/src/OptionGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <component ref="optionGroup" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-option-group" ref="optionGroup" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Pagination.vue b/packages/design/src/Pagination.vue
index 3d98dc45..ab6c890c 100644
--- a/packages/design/src/Pagination.vue
+++ b/packages/design/src/Pagination.vue
@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-pagination"
     :is="uiComponent.component"
     v-bind="uiProps"
     @size-change="handleSizeChange"
diff --git a/packages/design/src/Popover.vue b/packages/design/src/Popover.vue
index cb2639ee..38f5d70d 100644
--- a/packages/design/src/Popover.vue
+++ b/packages/design/src/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-popover" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
 
     <template #reference>
diff --git a/packages/design/src/Radio.vue b/packages/design/src/Radio.vue
index 605455fa..2eb5f8e0 100644
--- a/packages/design/src/Radio.vue
+++ b/packages/design/src/Radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-radio" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/RadioGroup.vue b/packages/design/src/RadioGroup.vue
index 1e340920..c63f3106 100644
--- a/packages/design/src/RadioGroup.vue
+++ b/packages/design/src/RadioGroup.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-radio-group"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
     <slot></slot>
   </component>
 </template>
@@ -12,7 +18,7 @@ import { getConfig } from './config';
 const props = defineProps<{
   modelValue?: string | number | boolean;
   disabled?: boolean;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').radioGroup;
diff --git a/packages/design/src/Row.vue b/packages/design/src/Row.vue
index dc1337f2..c7ee252a 100644
--- a/packages/design/src/Row.vue
+++ b/packages/design/src/Row.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component">
+  <component class="tmagic-design-row" :is="uiComponent.component">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Scrollbar.vue b/packages/design/src/Scrollbar.vue
index ef177a1c..5c77e94a 100644
--- a/packages/design/src/Scrollbar.vue
+++ b/packages/design/src/Scrollbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-scrollbar" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Select.vue b/packages/design/src/Select.vue
index 08eab0a4..3979a9db 100644
--- a/packages/design/src/Select.vue
+++ b/packages/design/src/Select.vue
@@ -1,10 +1,12 @@
 <template>
   <component
+    class="tmagic-design-select"
     ref="select"
     :is="uiComponent.component"
     v-bind="uiProps"
     @change="changeHandler"
     @visible-change="visibleHandler"
+    @popup-visible-change="visibleHandler"
     @update:modelValue="updateModelValue"
   >
     <slot></slot>
@@ -30,7 +32,7 @@ const props = defineProps<{
   allowCreate?: boolean;
   valueKey?: string;
   remoteMethod?: any;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').select;
@@ -39,22 +41,22 @@ const uiProps = computed(() => uiComponent.props(props));
 
 const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
 
-const changeHandler = (v: any) => {
-  emit('change', v);
+const changeHandler = (...args: any[]) => {
+  emit('change', ...args);
 };
 
-const updateModelValue = (v: any) => {
-  emit('update:modelValue', v);
+const updateModelValue = (...args: any[]) => {
+  emit('update:modelValue', ...args);
 };
 
-const visibleHandler = (v: any) => {
-  emit('visibleHandler', v);
+const visibleHandler = (...args: any[]) => {
+  emit('visibleHandler', ...args);
 };
 
 const scrollbarWrap = ref<HTMLDivElement | undefined>();
 
 onMounted(() => {
-  scrollbarWrap.value = select.value?.scrollbar.wrap$;
+  scrollbarWrap.value = select.value?.scrollbar?.wrap$;
 });
 
 defineExpose({
diff --git a/packages/design/src/Step.vue b/packages/design/src/Step.vue
index 07258629..154a9e66 100644
--- a/packages/design/src/Step.vue
+++ b/packages/design/src/Step.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+  <component class="tmagic-design-step" :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Steps.vue b/packages/design/src/Steps.vue
index 5e3f6ef1..a5261469 100644
--- a/packages/design/src/Steps.vue
+++ b/packages/design/src/Steps.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-steps" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
diff --git a/packages/design/src/Switch.vue b/packages/design/src/Switch.vue
index 52679b24..cc2c4b94 100644
--- a/packages/design/src/Switch.vue
+++ b/packages/design/src/Switch.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+  <component
+    class="tmagic-design-switch"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  >
     <template #default>
       <slot></slot>
     </template>
@@ -17,7 +23,7 @@ const props = defineProps<{
   activeValue?: string | number | boolean;
   inactiveValue?: string | number | boolean;
   disabled?: boolean;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').switch;
diff --git a/packages/design/src/TabPane.vue b/packages/design/src/TabPane.vue
index 30a64756..3441c81b 100644
--- a/packages/design/src/TabPane.vue
+++ b/packages/design/src/TabPane.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tab-pane" :is="uiComponent.component" v-bind="uiProps">
     <template #default>
       <slot></slot>
     </template>
diff --git a/packages/design/src/Table.vue b/packages/design/src/Table.vue
index 7fa40bb5..6f51e476 100644
--- a/packages/design/src/Table.vue
+++ b/packages/design/src/Table.vue
@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-table"
     ref="table"
     :is="uiComponent.component"
     v-bind="uiProps"
diff --git a/packages/design/src/Tabs.vue b/packages/design/src/Tabs.vue
index ea21cfa6..7096eecc 100644
--- a/packages/design/src/Tabs.vue
+++ b/packages/design/src/Tabs.vue
@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-tabs"
     :is="uiComponent.component"
     v-bind="uiProps"
     @tab-click="tabClickHandler"
diff --git a/packages/design/src/Tag.vue b/packages/design/src/Tag.vue
index fe8c7ca4..253a6503 100644
--- a/packages/design/src/Tag.vue
+++ b/packages/design/src/Tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tag" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -11,7 +11,7 @@ import { getConfig } from './config';
 
 const props = defineProps<{
   type?: string;
-  closeTransition?: boolean;
+  disableTransition?: boolean;
 }>();
 
 const uiComponent = getConfig('components').tag;
diff --git a/packages/design/src/TimePicker.vue b/packages/design/src/TimePicker.vue
index c0dcc060..6e86e1c1 100644
--- a/packages/design/src/TimePicker.vue
+++ b/packages/design/src/TimePicker.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-time-picker"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
   </component>
 </template>
 
@@ -12,7 +18,7 @@ const props = defineProps<{
   modelValue?: any;
   disabled?: boolean;
   placeholder?: string;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').timePicker;
diff --git a/packages/design/src/Tooltip.vue b/packages/design/src/Tooltip.vue
index 5ee87a40..27b564c3 100644
--- a/packages/design/src/Tooltip.vue
+++ b/packages/design/src/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tooltip" :is="uiComponent.component" v-bind="uiProps">
     <template #content>
       <slot name="content"></slot>
     </template>
diff --git a/packages/design/src/Tree.vue b/packages/design/src/Tree.vue
index 2c89c482..5621db77 100644
--- a/packages/design/src/Tree.vue
+++ b/packages/design/src/Tree.vue
@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-tree"
     ref="tree"
     :is="uiComponent.component"
     v-bind="uiProps"
diff --git a/packages/design/src/Upload.vue b/packages/design/src/Upload.vue
index 0740dbfc..52bc75f7 100644
--- a/packages/design/src/Upload.vue
+++ b/packages/design/src/Upload.vue
@@ -1,5 +1,11 @@
 <template>
-  <component ref="upload" :is="uiComponent.component" v-bind="uiProps" @change="changeHandler"></component>
+  <component
+    class="tmagic-design-upload"
+    ref="upload"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+  ></component>
 </template>
 
 <script setup lang="ts" name="TMUpload">
@@ -10,6 +16,7 @@ import { getConfig } from './config';
 const props = defineProps<{
   action?: string;
   autoUpload?: boolean;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['change']);