diff --git a/examples/sites/demos/mobile-first/app/action-sheet/action.vue b/examples/sites/demos/mobile-first/app/action-sheet/action.vue
index 9091ddb11..5d52b8a06 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/action.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/action.vue
@@ -27,12 +27,12 @@
 </template>
 
 <script>
-import { ActionSheet, Button, Modal } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
@@ -43,10 +43,10 @@ export default {
   },
   methods: {
     selectOption(option, index) {
-      Modal.message(`选择了第${index + 1}项 [${option}]`)
+      TinyModal.message(`选择了第${index + 1}项 [${option}]`)
     },
     close() {
-      Modal.message('点击取消了')
+      TinyModal.message('点击取消了')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/basic-usage.vue b/examples/sites/demos/mobile-first/app/action-sheet/basic-usage.vue
index 67b40c77c..beb9ec92a 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/basic-usage.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/before-close.vue b/examples/sites/demos/mobile-first/app/action-sheet/before-close.vue
index d1ce45d40..ecbf48917 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/before-close.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/before-close.vue
@@ -10,18 +10,18 @@
 </template>
 
 <script>
-import { ActionSheet, Button, Modal } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
       boxVisibility: false,
       beforeCloseFn() {
-        Modal.message('已拦截关闭动作!')
+        TinyModal.message('已拦截关闭动作!')
         return false
       }
     }
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/ellipsis.vue b/examples/sites/demos/mobile-first/app/action-sheet/ellipsis.vue
index 7f993facb..f1cb79204 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/ellipsis.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/ellipsis.vue
@@ -33,12 +33,12 @@
 </template>
 
 <script>
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/fullscreen.vue b/examples/sites/demos/mobile-first/app/action-sheet/fullscreen.vue
index 44e409115..bb2837e38 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/fullscreen.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/fullscreen.vue
@@ -10,18 +10,18 @@
 </template>
 
 <script>
-import { ActionSheet, Button, Modal } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
       boxVisibility: false,
       beforeCloseFn() {
-        Modal.message('已拦截关闭动作!')
+        TinyModal.message('已拦截关闭动作!')
         return false
       }
     }
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/mask-event.vue b/examples/sites/demos/mobile-first/app/action-sheet/mask-event.vue
index 45eef2e06..30b806607 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/mask-event.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/mask-event.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/mask.vue b/examples/sites/demos/mobile-first/app/action-sheet/mask.vue
index d4af0dbe0..3221308a6 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/mask.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/mask.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/multiple.vue b/examples/sites/demos/mobile-first/app/action-sheet/multiple.vue
index 6c6980e8a..a15459459 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/multiple.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/multiple.vue
@@ -32,12 +32,12 @@
 </template>
 
 <script>
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/show.vue b/examples/sites/demos/mobile-first/app/action-sheet/show.vue
index 92382b7dc..69a56c2c3 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/show.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/show.vue
@@ -35,12 +35,12 @@
 </template>
 
 <script>
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/action-sheet/slot.vue b/examples/sites/demos/mobile-first/app/action-sheet/slot.vue
index 58e023b99..6c8218085 100644
--- a/examples/sites/demos/mobile-first/app/action-sheet/slot.vue
+++ b/examples/sites/demos/mobile-first/app/action-sheet/slot.vue
@@ -65,12 +65,12 @@
 </template>
 
 <script>
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/alert/base.vue b/examples/sites/demos/mobile-first/app/alert/base.vue
index c88f1fbd2..f2086caeb 100644
--- a/examples/sites/demos/mobile-first/app/alert/base.vue
+++ b/examples/sites/demos/mobile-first/app/alert/base.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/center.vue b/examples/sites/demos/mobile-first/app/alert/center.vue
index 2feb5dc64..9ab20810c 100644
--- a/examples/sites/demos/mobile-first/app/alert/center.vue
+++ b/examples/sites/demos/mobile-first/app/alert/center.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/closable.vue b/examples/sites/demos/mobile-first/app/alert/closable.vue
index e6cf3141b..844d2b62c 100644
--- a/examples/sites/demos/mobile-first/app/alert/closable.vue
+++ b/examples/sites/demos/mobile-first/app/alert/closable.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/close-text.vue b/examples/sites/demos/mobile-first/app/alert/close-text.vue
index de71bcf88..ab6c22bf4 100644
--- a/examples/sites/demos/mobile-first/app/alert/close-text.vue
+++ b/examples/sites/demos/mobile-first/app/alert/close-text.vue
@@ -6,15 +6,15 @@
 </template>
 
 <script>
-import { Alert, Modal } from '@opentiny/vue'
+import { TinyAlert, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   },
   methods: {
     close() {
-      Modal('关闭了')
+      TinyModal('关闭了')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/alert/close.vue b/examples/sites/demos/mobile-first/app/alert/close.vue
index daf24f75d..af478aa94 100644
--- a/examples/sites/demos/mobile-first/app/alert/close.vue
+++ b/examples/sites/demos/mobile-first/app/alert/close.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Alert, Modal } from '@opentiny/vue'
+import { TinyAlert, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   },
   methods: {
     close() {
-      Modal.message('关闭了')
+      TinyModal.message('关闭了')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/alert/custom-class.vue b/examples/sites/demos/mobile-first/app/alert/custom-class.vue
index 88df90305..da3b1cc0f 100644
--- a/examples/sites/demos/mobile-first/app/alert/custom-class.vue
+++ b/examples/sites/demos/mobile-first/app/alert/custom-class.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/custom-description.vue b/examples/sites/demos/mobile-first/app/alert/custom-description.vue
index 3318972ea..5437a4887 100644
--- a/examples/sites/demos/mobile-first/app/alert/custom-description.vue
+++ b/examples/sites/demos/mobile-first/app/alert/custom-description.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/custom-icon.vue b/examples/sites/demos/mobile-first/app/alert/custom-icon.vue
index 75cd76408..37b2fbd0e 100644
--- a/examples/sites/demos/mobile-first/app/alert/custom-icon.vue
+++ b/examples/sites/demos/mobile-first/app/alert/custom-icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 import { iconBoat } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/alert/feedback-of-result.vue b/examples/sites/demos/mobile-first/app/alert/feedback-of-result.vue
index d74d30018..7cd30170f 100644
--- a/examples/sites/demos/mobile-first/app/alert/feedback-of-result.vue
+++ b/examples/sites/demos/mobile-first/app/alert/feedback-of-result.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Alert, Button } from '@opentiny/vue'
+import { TinyAlert, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinyButton: Button
+    TinyAlert,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/icon.vue b/examples/sites/demos/mobile-first/app/alert/icon.vue
index 34a25dcc5..9ecd5a0df 100644
--- a/examples/sites/demos/mobile-first/app/alert/icon.vue
+++ b/examples/sites/demos/mobile-first/app/alert/icon.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 import { IconBoat } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/alert/show-foldable.vue b/examples/sites/demos/mobile-first/app/alert/show-foldable.vue
index 841c36730..63de25f92 100644
--- a/examples/sites/demos/mobile-first/app/alert/show-foldable.vue
+++ b/examples/sites/demos/mobile-first/app/alert/show-foldable.vue
@@ -32,12 +32,12 @@
 </template>
 
 <script>
-import { Alert, Link } from '@opentiny/vue'
+import { TinyAlert, TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinyLink: Link
+    TinyAlert,
+    TinyLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/alert/show-icon.vue b/examples/sites/demos/mobile-first/app/alert/show-icon.vue
index e86f0eed3..6bc3c8a63 100644
--- a/examples/sites/demos/mobile-first/app/alert/show-icon.vue
+++ b/examples/sites/demos/mobile-first/app/alert/show-icon.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/size.vue b/examples/sites/demos/mobile-first/app/alert/size.vue
index b36b27aa7..a76eeef0c 100644
--- a/examples/sites/demos/mobile-first/app/alert/size.vue
+++ b/examples/sites/demos/mobile-first/app/alert/size.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/slot-default.vue b/examples/sites/demos/mobile-first/app/alert/slot-default.vue
index 4f69bceaf..5af865c23 100644
--- a/examples/sites/demos/mobile-first/app/alert/slot-default.vue
+++ b/examples/sites/demos/mobile-first/app/alert/slot-default.vue
@@ -38,12 +38,12 @@
 </template>
 
 <script>
-import { Alert, Button } from '@opentiny/vue'
+import { TinyAlert, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinyButton: Button
+    TinyAlert,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/alert/title.vue b/examples/sites/demos/mobile-first/app/alert/title.vue
index 80689d0ef..9e8b07b37 100644
--- a/examples/sites/demos/mobile-first/app/alert/title.vue
+++ b/examples/sites/demos/mobile-first/app/alert/title.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/alert/type.vue b/examples/sites/demos/mobile-first/app/alert/type.vue
index c88f1fbd2..f2086caeb 100644
--- a/examples/sites/demos/mobile-first/app/alert/type.vue
+++ b/examples/sites/demos/mobile-first/app/alert/type.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/amount/amount-disable.vue b/examples/sites/demos/mobile-first/app/amount/amount-disable.vue
index ba442d3e1..11a133861 100644
--- a/examples/sites/demos/mobile-first/app/amount/amount-disable.vue
+++ b/examples/sites/demos/mobile-first/app/amount/amount-disable.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Amount, Button } from '@opentiny/vue'
+import { TinyAmount, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount,
-    TinyButton: Button
+    TinyAmount,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/basic-usage.vue b/examples/sites/demos/mobile-first/app/amount/basic-usage.vue
index 607aeb358..2fa5c7bfc 100644
--- a/examples/sites/demos/mobile-first/app/amount/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/amount/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/custom-currency.vue b/examples/sites/demos/mobile-first/app/amount/custom-currency.vue
index 48277dbcd..a73dc6ed5 100644
--- a/examples/sites/demos/mobile-first/app/amount/custom-currency.vue
+++ b/examples/sites/demos/mobile-first/app/amount/custom-currency.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/custom-service.vue b/examples/sites/demos/mobile-first/app/amount/custom-service.vue
index eb7636493..73b40edde 100644
--- a/examples/sites/demos/mobile-first/app/amount/custom-service.vue
+++ b/examples/sites/demos/mobile-first/app/amount/custom-service.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/date-allow-empty.vue b/examples/sites/demos/mobile-first/app/amount/date-allow-empty.vue
index 6563b4620..a46a9b075 100644
--- a/examples/sites/demos/mobile-first/app/amount/date-allow-empty.vue
+++ b/examples/sites/demos/mobile-first/app/amount/date-allow-empty.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({
+      TinyModal.message({
         message: `改变后的值：${JSON.stringify(val)}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/amount/digits-maxlen.vue b/examples/sites/demos/mobile-first/app/amount/digits-maxlen.vue
index c608f28a5..db7b7aa51 100644
--- a/examples/sites/demos/mobile-first/app/amount/digits-maxlen.vue
+++ b/examples/sites/demos/mobile-first/app/amount/digits-maxlen.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     handleChange(value) {
-      Modal.message({ message: `当前值为 ${value.amount}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${value.amount}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/amount/display-only.vue b/examples/sites/demos/mobile-first/app/amount/display-only.vue
index 7f3b91867..9d1c8866c 100644
--- a/examples/sites/demos/mobile-first/app/amount/display-only.vue
+++ b/examples/sites/demos/mobile-first/app/amount/display-only.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/filter-box.vue b/examples/sites/demos/mobile-first/app/amount/filter-box.vue
index 60826a431..b258e5417 100644
--- a/examples/sites/demos/mobile-first/app/amount/filter-box.vue
+++ b/examples/sites/demos/mobile-first/app/amount/filter-box.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/filter-event.vue b/examples/sites/demos/mobile-first/app/amount/filter-event.vue
index 8833ae8fe..1c5f8807b 100644
--- a/examples/sites/demos/mobile-first/app/amount/filter-event.vue
+++ b/examples/sites/demos/mobile-first/app/amount/filter-event.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Amount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
@@ -24,10 +24,10 @@ export default {
   },
   methods: {
     clearHander() {
-      Modal.message({ message: '清除 事件', status: 'info' })
+      TinyModal.message({ message: '清除 事件', status: 'info' })
     },
     changeHander(label) {
-      Modal.message({ message: 'change 事件' + label, status: 'info' })
+      TinyModal.message({ message: 'change 事件' + label, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/amount/filter.vue b/examples/sites/demos/mobile-first/app/amount/filter.vue
index c4c5aced6..da2847036 100644
--- a/examples/sites/demos/mobile-first/app/amount/filter.vue
+++ b/examples/sites/demos/mobile-first/app/amount/filter.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/format.vue b/examples/sites/demos/mobile-first/app/amount/format.vue
index 5efb06de0..6996fdaa0 100644
--- a/examples/sites/demos/mobile-first/app/amount/format.vue
+++ b/examples/sites/demos/mobile-first/app/amount/format.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/hide-currency.vue b/examples/sites/demos/mobile-first/app/amount/hide-currency.vue
index 45b6cbbda..f7e7bf3bc 100644
--- a/examples/sites/demos/mobile-first/app/amount/hide-currency.vue
+++ b/examples/sites/demos/mobile-first/app/amount/hide-currency.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/hide-icon.vue b/examples/sites/demos/mobile-first/app/amount/hide-icon.vue
index d42902cc8..6af94e090 100644
--- a/examples/sites/demos/mobile-first/app/amount/hide-icon.vue
+++ b/examples/sites/demos/mobile-first/app/amount/hide-icon.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/hold-zero.vue b/examples/sites/demos/mobile-first/app/amount/hold-zero.vue
index bca748fbe..9465e3c1e 100644
--- a/examples/sites/demos/mobile-first/app/amount/hold-zero.vue
+++ b/examples/sites/demos/mobile-first/app/amount/hold-zero.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Amount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     handleChange(value) {
-      Modal.message({ message: `当前值为 ${value.amount}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${value.amount}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/amount/negative.vue b/examples/sites/demos/mobile-first/app/amount/negative.vue
index 21e5d6db3..b8481ef10 100644
--- a/examples/sites/demos/mobile-first/app/amount/negative.vue
+++ b/examples/sites/demos/mobile-first/app/amount/negative.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Amount, Form, FormItem } from '@opentiny/vue'
+import { TinyAmount, TinyForm, TinyFormItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount,
-    TinyForm: Form,
-    TinyFormItem: FormItem
+    TinyAmount,
+    TinyForm,
+    TinyFormItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/num-allow-empty.vue b/examples/sites/demos/mobile-first/app/amount/num-allow-empty.vue
index 883acb2a0..c9a63ef2a 100644
--- a/examples/sites/demos/mobile-first/app/amount/num-allow-empty.vue
+++ b/examples/sites/demos/mobile-first/app/amount/num-allow-empty.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/pop-up.vue b/examples/sites/demos/mobile-first/app/amount/pop-up.vue
index e8eb88deb..3d49b8229 100644
--- a/examples/sites/demos/mobile-first/app/amount/pop-up.vue
+++ b/examples/sites/demos/mobile-first/app/amount/pop-up.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/set-date.vue b/examples/sites/demos/mobile-first/app/amount/set-date.vue
index 5d7b13369..700cedd01 100644
--- a/examples/sites/demos/mobile-first/app/amount/set-date.vue
+++ b/examples/sites/demos/mobile-first/app/amount/set-date.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({
+      TinyModal.message({
         message: `改变后的值：${JSON.stringify(val)}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/amount/size.vue b/examples/sites/demos/mobile-first/app/amount/size.vue
index 93d4b057a..ce9ba4745 100644
--- a/examples/sites/demos/mobile-first/app/amount/size.vue
+++ b/examples/sites/demos/mobile-first/app/amount/size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/amount/string-mode.vue b/examples/sites/demos/mobile-first/app/amount/string-mode.vue
index 5030b5005..532f62a54 100644
--- a/examples/sites/demos/mobile-first/app/amount/string-mode.vue
+++ b/examples/sites/demos/mobile-first/app/amount/string-mode.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/anchor/basic-usage.vue b/examples/sites/demos/mobile-first/app/anchor/basic-usage.vue
index a9693f99e..2f182ed28 100644
--- a/examples/sites/demos/mobile-first/app/anchor/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/anchor/basic-usage.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Anchor, Switch } from '@opentiny/vue'
+import { TinyAnchor, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAnchor: Anchor,
-    TinySwitch: Switch
+    TinyAnchor,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/anchor/change.vue b/examples/sites/demos/mobile-first/app/anchor/change.vue
index 3a1b3f272..cf364c059 100644
--- a/examples/sites/demos/mobile-first/app/anchor/change.vue
+++ b/examples/sites/demos/mobile-first/app/anchor/change.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Anchor, Modal } from '@opentiny/vue'
+import { TinyAnchor, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAnchor: Anchor
+    TinyAnchor
   },
   data() {
     return {
@@ -49,7 +49,7 @@ export default {
   },
   methods: {
     handleChange(link) {
-      Modal.message({ message: `change${link}`, status: 'info' })
+      TinyModal.message({ message: `change${link}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/anchor/is-affix.vue b/examples/sites/demos/mobile-first/app/anchor/is-affix.vue
index 00e0cb666..c3d748379 100644
--- a/examples/sites/demos/mobile-first/app/anchor/is-affix.vue
+++ b/examples/sites/demos/mobile-first/app/anchor/is-affix.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Anchor, Switch } from '@opentiny/vue'
+import { TinyAnchor, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAnchor: Anchor,
-    TinySwitch: Switch
+    TinyAnchor,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/anchor/set-container.vue b/examples/sites/demos/mobile-first/app/anchor/set-container.vue
index 116098952..4fdd01c6f 100644
--- a/examples/sites/demos/mobile-first/app/anchor/set-container.vue
+++ b/examples/sites/demos/mobile-first/app/anchor/set-container.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script>
-import { Anchor, Row, Col } from '@opentiny/vue'
+import { TinyAnchor, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAnchor: Anchor,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyAnchor,
+    TinyRow,
+    TinyCol
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/badge/base.vue b/examples/sites/demos/mobile-first/app/badge/base.vue
index 178b12893..4bb71463a 100644
--- a/examples/sites/demos/mobile-first/app/badge/base.vue
+++ b/examples/sites/demos/mobile-first/app/badge/base.vue
@@ -40,16 +40,16 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
-import { UserHead } from '@opentiny/vue'
-import { UserContact } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 import { IconSmile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyBadge: Badge,
-    TinyUserHead: UserHead,
-    TinyUserContact: UserContact
+    TinyBadge,
+    TinyUserHead,
+    TinyUserContact
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/badge/dynamic-hidden.vue b/examples/sites/demos/mobile-first/app/badge/dynamic-hidden.vue
index 032be0867..af9fed876 100644
--- a/examples/sites/demos/mobile-first/app/badge/dynamic-hidden.vue
+++ b/examples/sites/demos/mobile-first/app/badge/dynamic-hidden.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Badge, Button } from '@opentiny/vue'
+import { TinyBadge, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge,
-    TinyButton: Button
+    TinyBadge,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/badge/is-dot.vue b/examples/sites/demos/mobile-first/app/badge/is-dot.vue
index eb8176578..cfe242103 100644
--- a/examples/sites/demos/mobile-first/app/badge/is-dot.vue
+++ b/examples/sites/demos/mobile-first/app/badge/is-dot.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/badge/max.vue b/examples/sites/demos/mobile-first/app/badge/max.vue
index a969ba60f..a4604d09a 100644
--- a/examples/sites/demos/mobile-first/app/badge/max.vue
+++ b/examples/sites/demos/mobile-first/app/badge/max.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/badge/props-content.vue b/examples/sites/demos/mobile-first/app/badge/props-content.vue
index 80b23eb96..09ac47e93 100644
--- a/examples/sites/demos/mobile-first/app/badge/props-content.vue
+++ b/examples/sites/demos/mobile-first/app/badge/props-content.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/badge/slot-content.vue b/examples/sites/demos/mobile-first/app/badge/slot-content.vue
index 1cfe1f3c4..650f13c49 100644
--- a/examples/sites/demos/mobile-first/app/badge/slot-content.vue
+++ b/examples/sites/demos/mobile-first/app/badge/slot-content.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/badge/slot-default.vue b/examples/sites/demos/mobile-first/app/badge/slot-default.vue
index 1c1273716..37b53ac13 100644
--- a/examples/sites/demos/mobile-first/app/badge/slot-default.vue
+++ b/examples/sites/demos/mobile-first/app/badge/slot-default.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/badge/target.vue b/examples/sites/demos/mobile-first/app/badge/target.vue
index a10addf07..4bef9506f 100644
--- a/examples/sites/demos/mobile-first/app/badge/target.vue
+++ b/examples/sites/demos/mobile-first/app/badge/target.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/badge/type-left.vue b/examples/sites/demos/mobile-first/app/badge/type-left.vue
index d3af40fa3..90645f2d3 100644
--- a/examples/sites/demos/mobile-first/app/badge/type-left.vue
+++ b/examples/sites/demos/mobile-first/app/badge/type-left.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/badge/type.vue b/examples/sites/demos/mobile-first/app/badge/type.vue
index c8ca1de71..73a3eee95 100644
--- a/examples/sites/demos/mobile-first/app/badge/type.vue
+++ b/examples/sites/demos/mobile-first/app/badge/type.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button-group/base.vue b/examples/sites/demos/mobile-first/app/button-group/base.vue
index e3b916306..a8a3c4526 100644
--- a/examples/sites/demos/mobile-first/app/button-group/base.vue
+++ b/examples/sites/demos/mobile-first/app/button-group/base.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button-group/data.vue b/examples/sites/demos/mobile-first/app/button-group/data.vue
index 01a935e1b..9edb610ec 100644
--- a/examples/sites/demos/mobile-first/app/button-group/data.vue
+++ b/examples/sites/demos/mobile-first/app/button-group/data.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button-group/disabled.vue b/examples/sites/demos/mobile-first/app/button-group/disabled.vue
index 020780b09..79f1a9d29 100644
--- a/examples/sites/demos/mobile-first/app/button-group/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/button-group/disabled.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button-group/plain.vue b/examples/sites/demos/mobile-first/app/button-group/plain.vue
index 5f75a3570..8d5d46973 100644
--- a/examples/sites/demos/mobile-first/app/button-group/plain.vue
+++ b/examples/sites/demos/mobile-first/app/button-group/plain.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button-group/size.vue b/examples/sites/demos/mobile-first/app/button-group/size.vue
index b226422cf..7b80a101f 100644
--- a/examples/sites/demos/mobile-first/app/button-group/size.vue
+++ b/examples/sites/demos/mobile-first/app/button-group/size.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button-group/slot-default.vue b/examples/sites/demos/mobile-first/app/button-group/slot-default.vue
index 1b2708fa5..95f77a233 100644
--- a/examples/sites/demos/mobile-first/app/button-group/slot-default.vue
+++ b/examples/sites/demos/mobile-first/app/button-group/slot-default.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Button, ButtonGroup } from '@opentiny/vue'
+import { TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyButtonGroup: ButtonGroup
+    TinyButton,
+    TinyButtonGroup
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button-group/text-value-field.vue b/examples/sites/demos/mobile-first/app/button-group/text-value-field.vue
index 4d5a0a8b0..5bffb3ab8 100644
--- a/examples/sites/demos/mobile-first/app/button-group/text-value-field.vue
+++ b/examples/sites/demos/mobile-first/app/button-group/text-value-field.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button/autofocus.vue b/examples/sites/demos/mobile-first/app/button/autofocus.vue
index 3fbc5f897..0e6f85c4e 100644
--- a/examples/sites/demos/mobile-first/app/button/autofocus.vue
+++ b/examples/sites/demos/mobile-first/app/button/autofocus.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/banner.vue b/examples/sites/demos/mobile-first/app/button/banner.vue
index e4903469a..c6ad0297e 100644
--- a/examples/sites/demos/mobile-first/app/button/banner.vue
+++ b/examples/sites/demos/mobile-first/app/button/banner.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/basic-usage.vue b/examples/sites/demos/mobile-first/app/button/basic-usage.vue
index 86a97e643..6351bbb2c 100644
--- a/examples/sites/demos/mobile-first/app/button/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/button/basic-usage.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script>
-import { Button, Layout, Row } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
 import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyLayout: Layout,
-    TinyRow: Row
+    TinyButton,
+    TinyLayout,
+    TinyRow
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button/button-class.vue b/examples/sites/demos/mobile-first/app/button/button-class.vue
index b133da3f6..5d6470139 100644
--- a/examples/sites/demos/mobile-first/app/button/button-class.vue
+++ b/examples/sites/demos/mobile-first/app/button/button-class.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/circle.vue b/examples/sites/demos/mobile-first/app/button/circle.vue
index 98dc0375e..11b4d36d4 100644
--- a/examples/sites/demos/mobile-first/app/button/circle.vue
+++ b/examples/sites/demos/mobile-first/app/button/circle.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script>
-import { Button, Layout, Row } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
 import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyLayout: Layout,
-    TinyRow: Row
+    TinyButton,
+    TinyLayout,
+    TinyRow
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button/click.vue b/examples/sites/demos/mobile-first/app/button/click.vue
index 073ecd143..e62f7277c 100644
--- a/examples/sites/demos/mobile-first/app/button/click.vue
+++ b/examples/sites/demos/mobile-first/app/button/click.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     click() {
-      Modal.message('click')
+      TinyModal.message('click')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/button/dynamic-disabled.vue b/examples/sites/demos/mobile-first/app/button/dynamic-disabled.vue
index 8bd129a1e..314e3f2ab 100644
--- a/examples/sites/demos/mobile-first/app/button/dynamic-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/button/dynamic-disabled.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script>
-import { Button, Layout, Row } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyLayout: Layout,
-    TinyRow: Row
+    TinyButton,
+    TinyLayout,
+    TinyRow
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button/icon.vue b/examples/sites/demos/mobile-first/app/button/icon.vue
index c4b6be925..a3b6e433b 100644
--- a/examples/sites/demos/mobile-first/app/button/icon.vue
+++ b/examples/sites/demos/mobile-first/app/button/icon.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button/image.vue b/examples/sites/demos/mobile-first/app/button/image.vue
index 8f129456a..f88caad12 100644
--- a/examples/sites/demos/mobile-first/app/button/image.vue
+++ b/examples/sites/demos/mobile-first/app/button/image.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button/link.vue b/examples/sites/demos/mobile-first/app/button/link.vue
index 75265460d..28f537a1d 100644
--- a/examples/sites/demos/mobile-first/app/button/link.vue
+++ b/examples/sites/demos/mobile-first/app/button/link.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/loading.vue b/examples/sites/demos/mobile-first/app/button/loading.vue
index c9ddd799a..6e84e03a3 100644
--- a/examples/sites/demos/mobile-first/app/button/loading.vue
+++ b/examples/sites/demos/mobile-first/app/button/loading.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/plain.vue b/examples/sites/demos/mobile-first/app/button/plain.vue
index bcace6b2e..d07e37d6d 100644
--- a/examples/sites/demos/mobile-first/app/button/plain.vue
+++ b/examples/sites/demos/mobile-first/app/button/plain.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/reset-time.vue b/examples/sites/demos/mobile-first/app/button/reset-time.vue
index 48ff6181d..ac5be7a2f 100644
--- a/examples/sites/demos/mobile-first/app/button/reset-time.vue
+++ b/examples/sites/demos/mobile-first/app/button/reset-time.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/round.vue b/examples/sites/demos/mobile-first/app/button/round.vue
index 2717dccc8..35e7d9e45 100644
--- a/examples/sites/demos/mobile-first/app/button/round.vue
+++ b/examples/sites/demos/mobile-first/app/button/round.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/size.vue b/examples/sites/demos/mobile-first/app/button/size.vue
index 83f4202bb..cfb70a6df 100644
--- a/examples/sites/demos/mobile-first/app/button/size.vue
+++ b/examples/sites/demos/mobile-first/app/button/size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/slot-default.vue b/examples/sites/demos/mobile-first/app/button/slot-default.vue
index 6804ef93c..ed9462994 100644
--- a/examples/sites/demos/mobile-first/app/button/slot-default.vue
+++ b/examples/sites/demos/mobile-first/app/button/slot-default.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { IconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
     IconUpload: IconUpload(),
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/button/text.vue b/examples/sites/demos/mobile-first/app/button/text.vue
index e966c7c58..cdd39f761 100644
--- a/examples/sites/demos/mobile-first/app/button/text.vue
+++ b/examples/sites/demos/mobile-first/app/button/text.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/button/type.vue b/examples/sites/demos/mobile-first/app/button/type.vue
index 0ced6ffe1..b4aa33c8e 100644
--- a/examples/sites/demos/mobile-first/app/button/type.vue
+++ b/examples/sites/demos/mobile-first/app/button/type.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/basic-usage.vue b/examples/sites/demos/mobile-first/app/calendar-bar/basic-usage.vue
index bf0d0e55b..280c66e0e 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar } from '@opentiny/vue'
+import { TinyCalendarBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/cascader-position.vue b/examples/sites/demos/mobile-first/app/calendar-bar/cascader-position.vue
index e44707874..7954f9715 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/cascader-position.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/cascader-position.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar } from '@opentiny/vue'
+import { TinyCalendarBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/disabled.vue b/examples/sites/demos/mobile-first/app/calendar-bar/disabled.vue
index 1e1674fad..4403977c7 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/disabled.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar } from '@opentiny/vue'
+import { TinyCalendarBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/expand.vue b/examples/sites/demos/mobile-first/app/calendar-bar/expand.vue
index 2c9f03296..4e5778d8f 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/expand.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/expand.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar, Modal } from '@opentiny/vue'
+import { TinyCalendarBar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
@@ -17,9 +17,9 @@ export default {
   methods: {
     expand(expanded) {
       if (expanded) {
-        Modal.message('处于展开状态')
+        TinyModal.message('处于展开状态')
       } else {
-        Modal.message('处于收起状态')
+        TinyModal.message('处于收起状态')
       }
     }
   }
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/marked.vue b/examples/sites/demos/mobile-first/app/calendar-bar/marked.vue
index f669876f6..7d2af70cc 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/marked.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/marked.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar } from '@opentiny/vue'
+import { TinyCalendarBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/render-current.vue b/examples/sites/demos/mobile-first/app/calendar-bar/render-current.vue
index 42b7f7cca..ed9e98caa 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/render-current.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/render-current.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar } from '@opentiny/vue'
+import { TinyCalendarBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/render-today.vue b/examples/sites/demos/mobile-first/app/calendar-bar/render-today.vue
index 2d037790e..4c4a53fb5 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/render-today.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/render-today.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar } from '@opentiny/vue'
+import { TinyCalendarBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/week-first.vue b/examples/sites/demos/mobile-first/app/calendar-bar/week-first.vue
index 36deb554e..18b882ad1 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/week-first.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/week-first.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar } from '@opentiny/vue'
+import { TinyCalendarBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-bar/workday.vue b/examples/sites/demos/mobile-first/app/calendar-bar/workday.vue
index b8de908e3..12ff57d89 100644
--- a/examples/sites/demos/mobile-first/app/calendar-bar/workday.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-bar/workday.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarBar } from '@opentiny/vue'
+import { TinyCalendarBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarBar: CalendarBar
+    TinyCalendarBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/basic-usage.vue b/examples/sites/demos/mobile-first/app/calendar-view/basic-usage.vue
index a66eefe1e..2bb22d457 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-day-mark.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-day-mark.vue
index 23f812ef9..4155911c5 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-day-mark.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-day-mark.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-disabled-day.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-disabled-day.vue
index 361560249..6e30985a0 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-disabled-day.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-disabled-day.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue
index 80732c29e..e25a78f1a 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { CalendarView, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
@@ -26,19 +26,19 @@ export default {
   },
   methods: {
     prevWeekClick(date) {
-      Modal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' })
+      TinyModal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' })
     },
     nextWeekClick(date) {
-      Modal.message({ message: `下一周按钮点击事件： ${date[0].value}`, status: 'info' })
+      TinyModal.message({ message: `下一周按钮点击事件： ${date[0].value}`, status: 'info' })
     },
     weekChange(weekDate) {
-      Modal.message({ message: `周改变事件： ${weekDate[0].value}`, status: 'info' })
+      TinyModal.message({ message: `周改变事件： ${weekDate[0].value}`, status: 'info' })
     },
     yearChange(newVal, oldVal) {
-      Modal.message({ message: `年改变事件: ${newVal}年, ${oldVal}年`, status: 'info' })
+      TinyModal.message({ message: `年改变事件: ${newVal}年, ${oldVal}年`, status: 'info' })
     },
     monthChange(newVal, oldVal) {
-      Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
+      TinyModal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue
index f86bfbaf8..82716365f 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-mode.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-schedule-slot.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-schedule-slot.vue
index 3c786bb1b..b8794e8d5 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-schedule-slot.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-schedule-slot.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-timeline-range.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-timeline-range.vue
index 7076b4323..7414cb2ee 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-timeline-range.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-timeline-range.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/calendar-timeline-slot.vue b/examples/sites/demos/mobile-first/app/calendar-view/calendar-timeline-slot.vue
index cd5a38d46..52c036fe4 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/calendar-timeline-slot.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/calendar-timeline-slot.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/custom-calendar-toolbar.vue b/examples/sites/demos/mobile-first/app/calendar-view/custom-calendar-toolbar.vue
index 2a32b8f85..ca23161f0 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/custom-calendar-toolbar.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/custom-calendar-toolbar.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/custom-day-bg-color.vue b/examples/sites/demos/mobile-first/app/calendar-view/custom-day-bg-color.vue
index f2ea1d9c3..668da785c 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/custom-day-bg-color.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/custom-day-bg-color.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/custom-header.vue b/examples/sites/demos/mobile-first/app/calendar-view/custom-header.vue
index 7585973fa..b2d3c6d74 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/custom-header.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/custom-header.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/hide-mode.vue b/examples/sites/demos/mobile-first/app/calendar-view/hide-mode.vue
index 9b09f0787..f1dfdb94f 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/hide-mode.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/hide-mode.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/mode-combination.vue b/examples/sites/demos/mobile-first/app/calendar-view/mode-combination.vue
index ddfe65631..c6ca96fcb 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/mode-combination.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/mode-combination.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   methods: {}
 }
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/multi-select.vue b/examples/sites/demos/mobile-first/app/calendar-view/multi-select.vue
index 37c4e1062..6a40a8461 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/multi-select.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/multi-select.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { CalendarView, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     selectedDateChange(date) {
-      Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
+      TinyModal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/calendar-view/set-working-day.vue b/examples/sites/demos/mobile-first/app/calendar-view/set-working-day.vue
index 6ce20f095..090098592 100644
--- a/examples/sites/demos/mobile-first/app/calendar-view/set-working-day.vue
+++ b/examples/sites/demos/mobile-first/app/calendar-view/set-working-day.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { CalendarView, Button, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView,
-    TinyButton: Button
+    TinyCalendarView,
+    TinyButton
   },
   data() {
     return {
@@ -37,7 +37,7 @@ export default {
   methods: {
     setDays(type) {
       if (!this.selectedDate.length) {
-        Modal.message({ message: '请选择日期', status: 'info' })
+        TinyModal.message({ message: '请选择日期', status: 'info' })
         return
       }
       this[type].push(...this.selectedDate)
diff --git a/examples/sites/demos/mobile-first/app/card/basic-usage.vue b/examples/sites/demos/mobile-first/app/card/basic-usage.vue
index 1a6840dd0..44ebbe8d3 100644
--- a/examples/sites/demos/mobile-first/app/card/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/card/basic-usage.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/card-disabled.vue b/examples/sites/demos/mobile-first/app/card/card-disabled.vue
index 2f8ef4f21..80f80200f 100644
--- a/examples/sites/demos/mobile-first/app/card/card-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/card/card-disabled.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/card-events.vue b/examples/sites/demos/mobile-first/app/card/card-events.vue
index a531fedfb..6dc849122 100644
--- a/examples/sites/demos/mobile-first/app/card/card-events.vue
+++ b/examples/sites/demos/mobile-first/app/card/card-events.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Card, Modal } from '@opentiny/vue'
+import { TinyCard, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
@@ -52,13 +52,13 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({
+      TinyModal.message({
         message: val.toString(),
         status: 'info'
       })
     },
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/card/card-group.vue b/examples/sites/demos/mobile-first/app/card/card-group.vue
index 2a099cd89..877759bdb 100644
--- a/examples/sites/demos/mobile-first/app/card/card-group.vue
+++ b/examples/sites/demos/mobile-first/app/card/card-group.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script>
-import { Card, CardGroup } from '@opentiny/vue'
+import { TinyCard, TinyCardGroup } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card,
-    TinyCardGroup: CardGroup
+    TinyCard,
+    TinyCardGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/card-size.vue b/examples/sites/demos/mobile-first/app/card/card-size.vue
index d098600f2..fa13e5980 100644
--- a/examples/sites/demos/mobile-first/app/card/card-size.vue
+++ b/examples/sites/demos/mobile-first/app/card/card-size.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/card-status.vue b/examples/sites/demos/mobile-first/app/card/card-status.vue
index 7f2659aef..83eff8992 100644
--- a/examples/sites/demos/mobile-first/app/card/card-status.vue
+++ b/examples/sites/demos/mobile-first/app/card/card-status.vue
@@ -31,11 +31,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile-first/app/card/card-type.vue b/examples/sites/demos/mobile-first/app/card/card-type.vue
index c0a30b331..c7cfc83f1 100644
--- a/examples/sites/demos/mobile-first/app/card/card-type.vue
+++ b/examples/sites/demos/mobile-first/app/card/card-type.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/check-type-checkbox.vue b/examples/sites/demos/mobile-first/app/card/check-type-checkbox.vue
index d01e7a5d0..01948201b 100644
--- a/examples/sites/demos/mobile-first/app/card/check-type-checkbox.vue
+++ b/examples/sites/demos/mobile-first/app/card/check-type-checkbox.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/check-type-radio.vue b/examples/sites/demos/mobile-first/app/card/check-type-radio.vue
index ef00ed845..aaf238c65 100644
--- a/examples/sites/demos/mobile-first/app/card/check-type-radio.vue
+++ b/examples/sites/demos/mobile-first/app/card/check-type-radio.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/custom-class.vue b/examples/sites/demos/mobile-first/app/card/custom-class.vue
index 289f26575..2a2b67d0e 100644
--- a/examples/sites/demos/mobile-first/app/card/custom-class.vue
+++ b/examples/sites/demos/mobile-first/app/card/custom-class.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/operate-bar.vue b/examples/sites/demos/mobile-first/app/card/operate-bar.vue
index 36b28dc40..186cf35a3 100644
--- a/examples/sites/demos/mobile-first/app/card/operate-bar.vue
+++ b/examples/sites/demos/mobile-first/app/card/operate-bar.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/card/slot.vue b/examples/sites/demos/mobile-first/app/card/slot.vue
index 9055886ba..0aef5da70 100644
--- a/examples/sites/demos/mobile-first/app/card/slot.vue
+++ b/examples/sites/demos/mobile-first/app/card/slot.vue
@@ -46,13 +46,13 @@
 </template>
 
 <script>
-import { Card, Tag } from '@opentiny/vue'
+import { TinyCard, TinyTag } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card,
-    TinyTag: Tag
+    TinyCard,
+    TinyTag
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/aspect-ratio.vue b/examples/sites/demos/mobile-first/app/carousel/aspect-ratio.vue
index 1cfa157c1..c8594bd53 100644
--- a/examples/sites/demos/mobile-first/app/carousel/aspect-ratio.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/aspect-ratio.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/autoplay.vue b/examples/sites/demos/mobile-first/app/carousel/autoplay.vue
index 8fdb55f0c..7a9014e32 100644
--- a/examples/sites/demos/mobile-first/app/carousel/autoplay.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/autoplay.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/basic-usage.vue b/examples/sites/demos/mobile-first/app/carousel/basic-usage.vue
index 81c94a4b6..2bf13e48f 100644
--- a/examples/sites/demos/mobile-first/app/carousel/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/basic-usage.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/card-mode.vue b/examples/sites/demos/mobile-first/app/carousel/card-mode.vue
index 00d54710a..38156f6da 100644
--- a/examples/sites/demos/mobile-first/app/carousel/card-mode.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/card-mode.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-always.vue b/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-always.vue
index 6baf1e640..a23ea82ca 100644
--- a/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-always.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-always.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-hover.vue b/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-hover.vue
index 9cc1b8b85..ee58ed032 100644
--- a/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-hover.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-hover.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-never.vue b/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-never.vue
index b28c04b59..ca008df00 100644
--- a/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-never.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/carousel-arrow-never.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/carousel-events.vue b/examples/sites/demos/mobile-first/app/carousel/carousel-events.vue
index 0c67559ad..1535d8981 100644
--- a/examples/sites/demos/mobile-first/app/carousel/carousel-events.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/carousel-events.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/close-loop.vue b/examples/sites/demos/mobile-first/app/carousel/close-loop.vue
index 471a0006e..0ad8a64e6 100644
--- a/examples/sites/demos/mobile-first/app/carousel/close-loop.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/close-loop.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/custom-height.vue b/examples/sites/demos/mobile-first/app/carousel/custom-height.vue
index 487ad55b6..23563276d 100644
--- a/examples/sites/demos/mobile-first/app/carousel/custom-height.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/custom-height.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/indicator-style.vue b/examples/sites/demos/mobile-first/app/carousel/indicator-style.vue
index 5f61d5e76..8d4d375e8 100644
--- a/examples/sites/demos/mobile-first/app/carousel/indicator-style.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/indicator-style.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/indicator-trigger.vue b/examples/sites/demos/mobile-first/app/carousel/indicator-trigger.vue
index 25cf5ae77..e33429e2e 100644
--- a/examples/sites/demos/mobile-first/app/carousel/indicator-trigger.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/indicator-trigger.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/initial-index.vue b/examples/sites/demos/mobile-first/app/carousel/initial-index.vue
index f137acfc9..86f00ea44 100644
--- a/examples/sites/demos/mobile-first/app/carousel/initial-index.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/initial-index.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/manual-play.vue b/examples/sites/demos/mobile-first/app/carousel/manual-play.vue
index fb60a6ef5..363beb12c 100644
--- a/examples/sites/demos/mobile-first/app/carousel/manual-play.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/manual-play.vue
@@ -15,15 +15,15 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem, Numeric, Button, ButtonGroup } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem, TinyNumeric, TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem,
-    TinyNumeric: Numeric,
-    TinyButton: Button,
-    TinyButtonGroup: ButtonGroup
+    TinyCarousel,
+    TinyCarouselItem,
+    TinyNumeric,
+    TinyButton,
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/play-interval.vue b/examples/sites/demos/mobile-first/app/carousel/play-interval.vue
index 2873d9d52..ec090d147 100644
--- a/examples/sites/demos/mobile-first/app/carousel/play-interval.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/play-interval.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/show-title.vue b/examples/sites/demos/mobile-first/app/carousel/show-title.vue
index 50517f462..c06a28d2c 100644
--- a/examples/sites/demos/mobile-first/app/carousel/show-title.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/show-title.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/carousel/up-down-carousel.vue b/examples/sites/demos/mobile-first/app/carousel/up-down-carousel.vue
index 6c9e2de92..22966138a 100644
--- a/examples/sites/demos/mobile-first/app/carousel/up-down-carousel.vue
+++ b/examples/sites/demos/mobile-first/app/carousel/up-down-carousel.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-mobile/basic-usage.vue b/examples/sites/demos/mobile-first/app/cascader-mobile/basic-usage.vue
index a79c8d4f6..834037765 100644
--- a/examples/sites/demos/mobile-first/app/cascader-mobile/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-mobile/basic-usage.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { CascaderMobile, Button } from '@opentiny/vue'
+import { TinyCascaderMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderMobile: CascaderMobile,
-    TinyButton: Button
+    TinyCascaderMobile,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-mobile/check-strictly.vue b/examples/sites/demos/mobile-first/app/cascader-mobile/check-strictly.vue
index dce5ef04a..13917fcb0 100644
--- a/examples/sites/demos/mobile-first/app/cascader-mobile/check-strictly.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-mobile/check-strictly.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { CascaderMobile, Button } from '@opentiny/vue'
+import { TinyCascaderMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderMobile: CascaderMobile,
-    TinyButton: Button
+    TinyCascaderMobile,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-mobile/lazyload.vue b/examples/sites/demos/mobile-first/app/cascader-mobile/lazyload.vue
index a7d607d4e..095c0b355 100644
--- a/examples/sites/demos/mobile-first/app/cascader-mobile/lazyload.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-mobile/lazyload.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { CascaderMobile, Button } from '@opentiny/vue'
+import { TinyCascaderMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderMobile: CascaderMobile,
-    TinyButton: Button
+    TinyCascaderMobile,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-mobile/placeholder.vue b/examples/sites/demos/mobile-first/app/cascader-mobile/placeholder.vue
index 58254afc8..83ead6c5e 100644
--- a/examples/sites/demos/mobile-first/app/cascader-mobile/placeholder.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-mobile/placeholder.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { CascaderMobile, Button } from '@opentiny/vue'
+import { TinyCascaderMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderMobile: CascaderMobile,
-    TinyButton: Button
+    TinyCascaderMobile,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-select/basic-usage.vue b/examples/sites/demos/mobile-first/app/cascader-select/basic-usage.vue
index ad6ff77c7..5effd1059 100644
--- a/examples/sites/demos/mobile-first/app/cascader-select/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-select/basic-usage.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { CascaderSelect, Button } from '@opentiny/vue'
+import { TinyCascaderSelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderSelect: CascaderSelect,
-    TinyButton: Button
+    TinyCascaderSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-select/cities.vue b/examples/sites/demos/mobile-first/app/cascader-select/cities.vue
index 90bbaee9d..5f0b0a081 100644
--- a/examples/sites/demos/mobile-first/app/cascader-select/cities.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-select/cities.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { CascaderSelect, Button } from '@opentiny/vue'
+import { TinyCascaderSelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderSelect: CascaderSelect,
-    TinyButton: Button
+    TinyCascaderSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-select/disabled-array.vue b/examples/sites/demos/mobile-first/app/cascader-select/disabled-array.vue
index bae159edf..6588913bb 100644
--- a/examples/sites/demos/mobile-first/app/cascader-select/disabled-array.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-select/disabled-array.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { CascaderSelect, Button } from '@opentiny/vue'
+import { TinyCascaderSelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderSelect: CascaderSelect,
-    TinyButton: Button
+    TinyCascaderSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-select/disabled.vue b/examples/sites/demos/mobile-first/app/cascader-select/disabled.vue
index 1115e4f81..dc5a32b84 100644
--- a/examples/sites/demos/mobile-first/app/cascader-select/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-select/disabled.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { CascaderSelect, Button } from '@opentiny/vue'
+import { TinyCascaderSelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderSelect: CascaderSelect,
-    TinyButton: Button
+    TinyCascaderSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-select/object-option.vue b/examples/sites/demos/mobile-first/app/cascader-select/object-option.vue
index 561b62baf..25079c86f 100644
--- a/examples/sites/demos/mobile-first/app/cascader-select/object-option.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-select/object-option.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { CascaderSelect, Button } from '@opentiny/vue'
+import { TinyCascaderSelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderSelect: CascaderSelect,
-    TinyButton: Button
+    TinyCascaderSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-select/text-color-class.vue b/examples/sites/demos/mobile-first/app/cascader-select/text-color-class.vue
index fc07bdea0..191ae87ca 100644
--- a/examples/sites/demos/mobile-first/app/cascader-select/text-color-class.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-select/text-color-class.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { CascaderSelect, Button } from '@opentiny/vue'
+import { TinyCascaderSelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderSelect: CascaderSelect,
-    TinyButton: Button
+    TinyCascaderSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-view/basic-usage.vue b/examples/sites/demos/mobile-first/app/cascader-view/basic-usage.vue
index f159fe1f5..033619b8b 100644
--- a/examples/sites/demos/mobile-first/app/cascader-view/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-view/basic-usage.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { CascaderView, Button } from '@opentiny/vue'
+import { TinyCascaderView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderView: CascaderView,
-    TinyButton: Button
+    TinyCascaderView,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-view/check-strictly.vue b/examples/sites/demos/mobile-first/app/cascader-view/check-strictly.vue
index f78ac4b74..3bbf091bb 100644
--- a/examples/sites/demos/mobile-first/app/cascader-view/check-strictly.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-view/check-strictly.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { CascaderView, Button } from '@opentiny/vue'
+import { TinyCascaderView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderView: CascaderView,
-    TinyButton: Button
+    TinyCascaderView,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-view/disabled.vue b/examples/sites/demos/mobile-first/app/cascader-view/disabled.vue
index 6d61c1e18..938fde756 100644
--- a/examples/sites/demos/mobile-first/app/cascader-view/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-view/disabled.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { CascaderView, Button } from '@opentiny/vue'
+import { TinyCascaderView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderView: CascaderView,
-    TinyButton: Button
+    TinyCascaderView,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-view/emit-path.vue b/examples/sites/demos/mobile-first/app/cascader-view/emit-path.vue
index 632b50a5b..faa81f3c9 100644
--- a/examples/sites/demos/mobile-first/app/cascader-view/emit-path.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-view/emit-path.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { CascaderView, Button } from '@opentiny/vue'
+import { TinyCascaderView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderView: CascaderView,
-    TinyButton: Button
+    TinyCascaderView,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-view/lazyload.vue b/examples/sites/demos/mobile-first/app/cascader-view/lazyload.vue
index b5497e217..4ad3015ec 100644
--- a/examples/sites/demos/mobile-first/app/cascader-view/lazyload.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-view/lazyload.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { CascaderView, Button } from '@opentiny/vue'
+import { TinyCascaderView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderView: CascaderView,
-    TinyButton: Button
+    TinyCascaderView,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader-view/placeholder.vue b/examples/sites/demos/mobile-first/app/cascader-view/placeholder.vue
index 4adba8dfb..224909018 100644
--- a/examples/sites/demos/mobile-first/app/cascader-view/placeholder.vue
+++ b/examples/sites/demos/mobile-first/app/cascader-view/placeholder.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { CascaderMobile, Button } from '@opentiny/vue'
+import { TinyCascaderMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderMobile: CascaderMobile,
-    TinyButton: Button
+    TinyCascaderMobile,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader/basic-usage.vue b/examples/sites/demos/mobile-first/app/cascader/basic-usage.vue
index 440a01e2c..291cd94a8 100644
--- a/examples/sites/demos/mobile-first/app/cascader/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/cascader/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader/check-strictly.vue b/examples/sites/demos/mobile-first/app/cascader/check-strictly.vue
index 358198003..369d5b2fa 100644
--- a/examples/sites/demos/mobile-first/app/cascader/check-strictly.vue
+++ b/examples/sites/demos/mobile-first/app/cascader/check-strictly.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader/disabled-items.vue b/examples/sites/demos/mobile-first/app/cascader/disabled-items.vue
index 0840f843a..d9f026041 100644
--- a/examples/sites/demos/mobile-first/app/cascader/disabled-items.vue
+++ b/examples/sites/demos/mobile-first/app/cascader/disabled-items.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Cascader, Button } from '@opentiny/vue'
+import { TinyCascader, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader,
-    TinyButton: Button
+    TinyCascader,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader/filter-method.vue b/examples/sites/demos/mobile-first/app/cascader/filter-method.vue
index b5b715cb5..912fdc575 100644
--- a/examples/sites/demos/mobile-first/app/cascader/filter-method.vue
+++ b/examples/sites/demos/mobile-first/app/cascader/filter-method.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { Cascader, Button } from '@opentiny/vue'
+import { TinyCascader, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader,
-    TinyButton: Button
+    TinyCascader,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader/lazy-load.vue b/examples/sites/demos/mobile-first/app/cascader/lazy-load.vue
index ed3e6c96b..b69746404 100644
--- a/examples/sites/demos/mobile-first/app/cascader/lazy-load.vue
+++ b/examples/sites/demos/mobile-first/app/cascader/lazy-load.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     let id = 0
diff --git a/examples/sites/demos/mobile-first/app/cascader/level-title.vue b/examples/sites/demos/mobile-first/app/cascader/level-title.vue
index c64c29596..edd968abb 100644
--- a/examples/sites/demos/mobile-first/app/cascader/level-title.vue
+++ b/examples/sites/demos/mobile-first/app/cascader/level-title.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader/placeholder.vue b/examples/sites/demos/mobile-first/app/cascader/placeholder.vue
index e67a3bbd0..26882c828 100644
--- a/examples/sites/demos/mobile-first/app/cascader/placeholder.vue
+++ b/examples/sites/demos/mobile-first/app/cascader/placeholder.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cascader/title.vue b/examples/sites/demos/mobile-first/app/cascader/title.vue
index 2c7838444..bf0e0d261 100644
--- a/examples/sites/demos/mobile-first/app/cascader/title.vue
+++ b/examples/sites/demos/mobile-first/app/cascader/title.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cell/basic-usage.vue b/examples/sites/demos/mobile-first/app/cell/basic-usage.vue
index f43ac561c..55c64e9b4 100644
--- a/examples/sites/demos/mobile-first/app/cell/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/cell/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cell } from '@opentiny/vue'
+import { TinyCell } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCell: Cell
+    TinyCell
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cell/disabled.vue b/examples/sites/demos/mobile-first/app/cell/disabled.vue
index 9689fbb0f..19c5378e8 100644
--- a/examples/sites/demos/mobile-first/app/cell/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/cell/disabled.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cell } from '@opentiny/vue'
+import { TinyCell } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCell: Cell
+    TinyCell
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cell/icon.vue b/examples/sites/demos/mobile-first/app/cell/icon.vue
index 7c2de59b2..d48685d57 100644
--- a/examples/sites/demos/mobile-first/app/cell/icon.vue
+++ b/examples/sites/demos/mobile-first/app/cell/icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Cell } from '@opentiny/vue'
+import { TinyCell } from '@opentiny/vue'
 import { IconWriting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCell: Cell
+    TinyCell
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cell/placeholder.vue b/examples/sites/demos/mobile-first/app/cell/placeholder.vue
index 7a06a79a6..2951bc382 100644
--- a/examples/sites/demos/mobile-first/app/cell/placeholder.vue
+++ b/examples/sites/demos/mobile-first/app/cell/placeholder.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Cell } from '@opentiny/vue'
+import { TinyCell } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCell: Cell
+    TinyCell
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/cell/with-date-picker.vue b/examples/sites/demos/mobile-first/app/cell/with-date-picker.vue
index 61a91a580..82c03ff21 100644
--- a/examples/sites/demos/mobile-first/app/cell/with-date-picker.vue
+++ b/examples/sites/demos/mobile-first/app/cell/with-date-picker.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Cell } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyCell } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobileFirst: DatePickerMobileFirst,
-    TinyCell: Cell
+    TinyDatePickerMobileFirst,
+    TinyCell
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/basic-usage.vue b/examples/sites/demos/mobile-first/app/checkbox/basic-usage.vue
index 340debd33..a6e15591b 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Checkbox } from '@opentiny/vue'
+import { TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/checkbox-button.vue b/examples/sites/demos/mobile-first/app/checkbox/checkbox-button.vue
index 173fd61b8..0fd3d7c99 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/checkbox-button.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/checkbox-button.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxButton: CheckboxButton,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxButton,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/checkbox-events.vue b/examples/sites/demos/mobile-first/app/checkbox/checkbox-events.vue
index 080c1d5f1..ecf033f25 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/checkbox-events.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/checkbox-events.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     valueChange(val) {
-      Modal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
+      TinyModal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/checkbox/checkbox-group.vue b/examples/sites/demos/mobile-first/app/checkbox/checkbox-group.vue
index eb6b6344b..0c662c36a 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/checkbox-group.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/checkbox-group.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/checkbox-size.vue b/examples/sites/demos/mobile-first/app/checkbox/checkbox-size.vue
index d9699651b..1cf150c8f 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/checkbox-size.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/checkbox-size.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/checkbox-slot.vue b/examples/sites/demos/mobile-first/app/checkbox/checkbox-slot.vue
index 0d6f3c167..4329dfc10 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/checkbox-slot.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/checkbox-slot.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/checked.vue b/examples/sites/demos/mobile-first/app/checkbox/checked.vue
index 5bb87e2be..3e2891854 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/checked.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/checked.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/content-overflow.vue b/examples/sites/demos/mobile-first/app/checkbox/content-overflow.vue
index ff4d7bb00..e32a6ab9e 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/content-overflow.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/content-overflow.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Checkbox, Tooltip } from '@opentiny/vue'
+import { TinyCheckbox, TinyTooltip } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyTooltip: Tooltip
+    TinyCheckbox,
+    TinyTooltip
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/display-only-no-label.vue b/examples/sites/demos/mobile-first/app/checkbox/display-only-no-label.vue
index 52b33b4ec..e05033cef 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/display-only-no-label.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/display-only-no-label.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Checkbox } from '@opentiny/vue'
+import { TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/display-only.vue b/examples/sites/demos/mobile-first/app/checkbox/display-only.vue
index f274d82b6..3b0ac0927 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/display-only.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/display-only.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Checkbox } from '@opentiny/vue'
+import { TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/dynamic-create-checkbox.vue b/examples/sites/demos/mobile-first/app/checkbox/dynamic-create-checkbox.vue
index 3dc2252dd..eb99fbdd1 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/dynamic-create-checkbox.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/dynamic-create-checkbox.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   methods: {
     valueChange(val) {
-      Modal.message({
+      TinyModal.message({
         message: `当前选择：${JSON.stringify(val)}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/checkbox/group-options.vue b/examples/sites/demos/mobile-first/app/checkbox/group-options.vue
index 713a9ae0c..530440634 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/group-options.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/group-options.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxGroup
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message({ message: 'click', status: 'info' })
+      TinyModal.message({ message: 'click', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/checkbox/indeterminate.vue b/examples/sites/demos/mobile-first/app/checkbox/indeterminate.vue
index 718c74dd1..2ced877ec 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/indeterminate.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/indeterminate.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/min-max.vue b/examples/sites/demos/mobile-first/app/checkbox/min-max.vue
index c6dab83ce..16cc1869b 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/min-max.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/min-max.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/checkbox/text.vue b/examples/sites/demos/mobile-first/app/checkbox/text.vue
index 165e5c008..9b35a2a7a 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/text.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/text.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Checkbox, Modal, Button } from '@opentiny/vue'
+import { TinyCheckbox, TinyModal, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyButton: Button
+    TinyCheckbox,
+    TinyButton
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     getValue() {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，当前选中的值为:' + this.checked,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/checkbox/vertical-checkbox.vue b/examples/sites/demos/mobile-first/app/checkbox/vertical-checkbox.vue
index bc9513ff8..6acdd0334 100644
--- a/examples/sites/demos/mobile-first/app/checkbox/vertical-checkbox.vue
+++ b/examples/sites/demos/mobile-first/app/checkbox/vertical-checkbox.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { CheckboxGroup, Checkbox } from '@opentiny/vue'
+import { TinyCheckboxGroup, TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxGroup: CheckboxGroup,
-    TinyCheckbox: Checkbox
+    TinyCheckboxGroup,
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/collapse/accordion.vue b/examples/sites/demos/mobile-first/app/collapse/accordion.vue
index 432f4fedd..7765a7bb7 100644
--- a/examples/sites/demos/mobile-first/app/collapse/accordion.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/accordion.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，当前选中的值为：' + val,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/collapse/basic-usage.vue b/examples/sites/demos/mobile-first/app/collapse/basic-usage.vue
index c4eb3e300..395c56d87 100644
--- a/examples/sites/demos/mobile-first/app/collapse/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/basic-usage.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/collapse/block-close.vue b/examples/sites/demos/mobile-first/app/collapse/block-close.vue
index 6ca635ae6..ca28d35cc 100644
--- a/examples/sites/demos/mobile-first/app/collapse/block-close.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/block-close.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     blockClose(value) {
-      Modal.message({ message: '阻止面板关闭；传入value：' + value })
+      TinyModal.message({ message: '阻止面板关闭；传入value：' + value })
       return false
     }
   }
diff --git a/examples/sites/demos/mobile-first/app/collapse/collapse-events.vue b/examples/sites/demos/mobile-first/app/collapse/collapse-events.vue
index db848d775..c90fc0670 100644
--- a/examples/sites/demos/mobile-first/app/collapse/collapse-events.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/collapse-events.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     change(activeNames) {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，当前激活面板：' + activeNames,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/collapse/custom-collapse-title-right.vue b/examples/sites/demos/mobile-first/app/collapse/custom-collapse-title-right.vue
index 05b968b02..99ceab614 100644
--- a/examples/sites/demos/mobile-first/app/collapse/custom-collapse-title-right.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/custom-collapse-title-right.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 import { IconClockWork } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
+    TinyCollapse,
+    TinyCollapseItem,
     IconClockWork: IconClockWork()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/collapse/custom-collapse-title.vue b/examples/sites/demos/mobile-first/app/collapse/custom-collapse-title.vue
index a5fe9b173..51cd9756f 100644
--- a/examples/sites/demos/mobile-first/app/collapse/custom-collapse-title.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/custom-collapse-title.vue
@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 import { IconClockWork } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
+    TinyCollapse,
+    TinyCollapseItem,
     IconClockWork: IconClockWork()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/collapse/dynamic-disable.vue b/examples/sites/demos/mobile-first/app/collapse/dynamic-disable.vue
index 19950ed3b..b3100b237 100644
--- a/examples/sites/demos/mobile-first/app/collapse/dynamic-disable.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/dynamic-disable.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/collapse/nested-form.vue b/examples/sites/demos/mobile-first/app/collapse/nested-form.vue
index 2a6cc90b6..b2c7b63b2 100644
--- a/examples/sites/demos/mobile-first/app/collapse/nested-form.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/nested-form.vue
@@ -22,19 +22,29 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem, Layout, Form, FormItem, Row, Col, Input, Numeric } from '@opentiny/vue'
+import {
+  TinyCollapse,
+  TinyCollapseItem,
+  TinyLayout,
+  TinyForm,
+  TinyFormItem,
+  TinyRow,
+  TinyCol,
+  TinyInput,
+  TinyNumeric
+} from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
-    TinyLayout: Layout,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyRow: Row,
-    TinyCol: Col,
-    TinyInput: Input,
-    TinyNumeric: Numeric
+    TinyCollapse,
+    TinyCollapseItem,
+    TinyLayout,
+    TinyForm,
+    TinyFormItem,
+    TinyRow,
+    TinyCol,
+    TinyInput,
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/collapse/nested-grid.vue b/examples/sites/demos/mobile-first/app/collapse/nested-grid.vue
index 908a410a9..d82631125 100644
--- a/examples/sites/demos/mobile-first/app/collapse/nested-grid.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/nested-grid.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script lang="jsx">
-import { Collapse, CollapseItem, Grid, GridColumn } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyCollapse,
+    TinyCollapseItem,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/collapse/slot-icon.vue b/examples/sites/demos/mobile-first/app/collapse/slot-icon.vue
index 01b5c2036..507107231 100644
--- a/examples/sites/demos/mobile-first/app/collapse/slot-icon.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/slot-icon.vue
@@ -25,13 +25,13 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 import { IconArrowBottom } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
+    TinyCollapse,
+    TinyCollapseItem,
     IconArrowBottom: IconArrowBottom()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/collapse/slot-title-right.vue b/examples/sites/demos/mobile-first/app/collapse/slot-title-right.vue
index c8f43ec44..749e71621 100644
--- a/examples/sites/demos/mobile-first/app/collapse/slot-title-right.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/slot-title-right.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 import { IconWriting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
+    TinyCollapse,
+    TinyCollapseItem,
     IconWriting: IconWriting()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/collapse/slot-title.vue b/examples/sites/demos/mobile-first/app/collapse/slot-title.vue
index 26afc8ad6..ed8b23483 100644
--- a/examples/sites/demos/mobile-first/app/collapse/slot-title.vue
+++ b/examples/sites/demos/mobile-first/app/collapse/slot-title.vue
@@ -33,12 +33,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/basic-usage.vue b/examples/sites/demos/mobile-first/app/column-list-item/basic-usage.vue
index ae3297f42..df50d6357 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/basic-usage.vue
@@ -92,12 +92,12 @@
 </template>
 
 <script>
-import { ColumnListItem, Modal } from '@opentiny/vue'
+import { TinyColumnListItem, TinyModal } from '@opentiny/vue'
 import { iconDel, iconWriting, iconAscending, iconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem
+    TinyColumnListItem
   },
   data() {
     return {
@@ -146,7 +146,7 @@ export default {
   },
   methods: {
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/content-slot.vue b/examples/sites/demos/mobile-first/app/column-list-item/content-slot.vue
index 771b0ccd7..7c9ec47f5 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/content-slot.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/content-slot.vue
@@ -73,12 +73,12 @@
 </template>
 
 <script>
-import { ColumnListItem, Tag } from '@opentiny/vue'
+import { TinyColumnListItem, TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem,
-    TinyTag: Tag
+    TinyColumnListItem,
+    TinyTag
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/custom-width.vue b/examples/sites/demos/mobile-first/app/column-list-item/custom-width.vue
index 8e0da29cd..449e9bd10 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/custom-width.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/custom-width.vue
@@ -49,11 +49,11 @@
 </template>
 
 <script>
-import { ColumnListItem } from '@opentiny/vue'
+import { TinyColumnListItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem
+    TinyColumnListItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/icon-click-event.vue b/examples/sites/demos/mobile-first/app/column-list-item/icon-click-event.vue
index f898dc57d..0adba4706 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/icon-click-event.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/icon-click-event.vue
@@ -33,12 +33,12 @@
 </template>
 
 <script>
-import { ColumnListItem, Modal } from '@opentiny/vue'
+import { TinyColumnListItem, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem
+    TinyColumnListItem
   },
   data() {
     return {
@@ -65,7 +65,7 @@ export default {
   },
   methods: {
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/icon-disabled.vue b/examples/sites/demos/mobile-first/app/column-list-item/icon-disabled.vue
index 277a55138..80e9133d1 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/icon-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/icon-disabled.vue
@@ -33,12 +33,12 @@
 </template>
 
 <script>
-import { ColumnListItem, Modal } from '@opentiny/vue'
+import { TinyColumnListItem, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem
+    TinyColumnListItem
   },
   data() {
     return {
@@ -72,7 +72,7 @@ export default {
   },
   methods: {
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/image-operate-slot.vue b/examples/sites/demos/mobile-first/app/column-list-item/image-operate-slot.vue
index f293a8e25..a3a3d6e6d 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/image-operate-slot.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/image-operate-slot.vue
@@ -42,12 +42,12 @@
 </template>
 
 <script>
-import { ColumnListItem } from '@opentiny/vue'
+import { TinyColumnListItem } from '@opentiny/vue'
 import { IconAdministrator } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem,
+    TinyColumnListItem,
     IconAdministrator: IconAdministrator()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/list-group.vue b/examples/sites/demos/mobile-first/app/column-list-item/list-group.vue
index cd4968f22..c53955b0c 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/list-group.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/list-group.vue
@@ -44,13 +44,13 @@
 </template>
 
 <script>
-import { ColumnListItem, ColumnListGroup, Checkbox } from '@opentiny/vue'
+import { TinyColumnListItem, TinyColumnListGroup, TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem,
-    TinyColumnListGroup: ColumnListGroup,
-    TinyCheckbox: Checkbox
+    TinyColumnListItem,
+    TinyColumnListGroup,
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/show-checkbox.vue b/examples/sites/demos/mobile-first/app/column-list-item/show-checkbox.vue
index 6d9ca12cf..c104178a2 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/show-checkbox.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/show-checkbox.vue
@@ -44,11 +44,11 @@
 </template>
 
 <script>
-import { ColumnListItem } from '@opentiny/vue'
+import { TinyColumnListItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem
+    TinyColumnListItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/show-radio.vue b/examples/sites/demos/mobile-first/app/column-list-item/show-radio.vue
index 7f81bff64..557729eef 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/show-radio.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/show-radio.vue
@@ -36,11 +36,11 @@
 </template>
 
 <script>
-import { ColumnListItem } from '@opentiny/vue'
+import { TinyColumnListItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem
+    TinyColumnListItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/column-list-item/size.vue b/examples/sites/demos/mobile-first/app/column-list-item/size.vue
index ad9955c41..f1779ed5b 100644
--- a/examples/sites/demos/mobile-first/app/column-list-item/size.vue
+++ b/examples/sites/demos/mobile-first/app/column-list-item/size.vue
@@ -53,12 +53,12 @@
 </template>
 
 <script>
-import { ColumnListItem, Modal } from '@opentiny/vue'
+import { TinyColumnListItem, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyColumnListItem: ColumnListItem
+    TinyColumnListItem
   },
   data() {
     return {
@@ -87,7 +87,7 @@ export default {
   },
   methods: {
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/currency/basic-usage.vue b/examples/sites/demos/mobile-first/app/currency/basic-usage.vue
index 37c7472ad..2caa3059f 100644
--- a/examples/sites/demos/mobile-first/app/currency/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/currency/basic-usage.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Currency, Modal, Button } from '@opentiny/vue'
+import { TinyCurrency, TinyModal, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency,
-    TinyButton: Button
+    TinyCurrency,
+    TinyButton
   },
   data() {
     return {
@@ -31,7 +31,7 @@ export default {
       this.visible = true
     },
     change(value) {
-      Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/currency/custom-service.vue b/examples/sites/demos/mobile-first/app/currency/custom-service.vue
index b07ccb28f..e29bbb4a8 100644
--- a/examples/sites/demos/mobile-first/app/currency/custom-service.vue
+++ b/examples/sites/demos/mobile-first/app/currency/custom-service.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Currency } from '@opentiny/vue'
+import { TinyCurrency } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/currency/mode-form.vue b/examples/sites/demos/mobile-first/app/currency/mode-form.vue
index 47c23f19d..cae3896da 100644
--- a/examples/sites/demos/mobile-first/app/currency/mode-form.vue
+++ b/examples/sites/demos/mobile-first/app/currency/mode-form.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Currency } from '@opentiny/vue'
+import { TinyCurrency } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/currency/multiple.vue b/examples/sites/demos/mobile-first/app/currency/multiple.vue
index 22e10c498..af970fe91 100644
--- a/examples/sites/demos/mobile-first/app/currency/multiple.vue
+++ b/examples/sites/demos/mobile-first/app/currency/multiple.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Currency, Button } from '@opentiny/vue'
+import { TinyCurrency, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency,
-    TinyButton: Button
+    TinyCurrency,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker-mobile/basic-usage.vue b/examples/sites/demos/mobile-first/app/date-picker-mobile/basic-usage.vue
index 4a5f14a49..4ee2a3d72 100644
--- a/examples/sites/demos/mobile-first/app/date-picker-mobile/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker-mobile/basic-usage.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Button } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinyButton: Button
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker-mobile/date-range.vue b/examples/sites/demos/mobile-first/app/date-picker-mobile/date-range.vue
index 30dddf605..2900bcefa 100644
--- a/examples/sites/demos/mobile-first/app/date-picker-mobile/date-range.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker-mobile/date-range.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Button } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinyButton: Button
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker-mobile/datetime-range.vue b/examples/sites/demos/mobile-first/app/date-picker-mobile/datetime-range.vue
index 899af32a8..fe3449361 100644
--- a/examples/sites/demos/mobile-first/app/date-picker-mobile/datetime-range.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker-mobile/datetime-range.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Button } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinyButton: Button
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker-mobile/datetime.vue b/examples/sites/demos/mobile-first/app/date-picker-mobile/datetime.vue
index 8b87d89c8..0f1d046a8 100644
--- a/examples/sites/demos/mobile-first/app/date-picker-mobile/datetime.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker-mobile/datetime.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Button } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinyButton: Button
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker-mobile/disabled.vue b/examples/sites/demos/mobile-first/app/date-picker-mobile/disabled.vue
index ba4bfca1d..9849682fb 100644
--- a/examples/sites/demos/mobile-first/app/date-picker-mobile/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker-mobile/disabled.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Button } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinyButton: Button
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month-disabled.vue b/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month-disabled.vue
index 2d41fe8fa..2dcc5797f 100644
--- a/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month-disabled.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Button } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinyButton: Button
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month-range.vue b/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month-range.vue
index 1bc8de63a..fc4a9b0be 100644
--- a/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month-range.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month-range.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Button } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinyButton: Button
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month.vue b/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month.vue
index 74753f974..f6d0ad359 100644
--- a/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker-mobile/year-month.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { DatePickerMobileFirst, Button } from '@opentiny/vue'
+import { TinyDatePickerMobileFirst, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinyButton: Button
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue b/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue
index f61a96c40..c5f57dc35 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker/basic-usage.vue b/examples/sites/demos/mobile-first/app/date-picker/basic-usage.vue
index c9dc3dc5b..d54e13f79 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker/date-range.vue b/examples/sites/demos/mobile-first/app/date-picker/date-range.vue
index 62e0d1375..09152fbb1 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/date-range.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/date-range.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { DatePicker, Modal } from '@opentiny/vue'
+import { TinyDatePicker, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
@@ -18,11 +18,11 @@ export default {
       onPickOptions: {
         onPick: (val) => {
           if (val.maxDate) {
-            Modal.message({
+            TinyModal.message({
               message: '当前获取的值 maxDate' + val.maxDate,
               status: 'info'
             })
-            Modal.message({
+            TinyModal.message({
               message: '当前获取的值 minDate：' + val.minDate,
               status: 'info'
             })
diff --git a/examples/sites/demos/mobile-first/app/date-picker/datetime-range.vue b/examples/sites/demos/mobile-first/app/date-picker/datetime-range.vue
index 774931a0e..d6657977c 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/datetime-range.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/datetime-range.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker/datetime.vue b/examples/sites/demos/mobile-first/app/date-picker/datetime.vue
index a411958a3..5fe4e1c97 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/datetime.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/datetime.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker/disabled.vue b/examples/sites/demos/mobile-first/app/date-picker/disabled.vue
index 7ed934cb6..b73a9d3a4 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/disabled.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { DatePicker, Button } from '@opentiny/vue'
+import { TinyDatePicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker,
-    TinyButton: Button
+    TinyDatePicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker/placeholder.vue b/examples/sites/demos/mobile-first/app/date-picker/placeholder.vue
index 5b78d3c65..7352973d6 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/placeholder.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/placeholder.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker/step.vue b/examples/sites/demos/mobile-first/app/date-picker/step.vue
index 658f00e9c..d5d2b03ae 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/step.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/step.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/date-picker/year.vue b/examples/sites/demos/mobile-first/app/date-picker/year.vue
index f2136f8cf..063308b91 100644
--- a/examples/sites/demos/mobile-first/app/date-picker/year.vue
+++ b/examples/sites/demos/mobile-first/app/date-picker/year.vue
@@ -37,14 +37,14 @@
 </template>
 
 <script>
-import { Layout, Row, Col, DatePicker } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol, TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col,
-    TinyDatePicker: DatePicker
+    TinyLayout,
+    TinyRow,
+    TinyCol,
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/dialog-box/basic-usage.vue b/examples/sites/demos/mobile-first/app/dialog-box/basic-usage.vue
index e15e3d19c..2c8cad101 100644
--- a/examples/sites/demos/mobile-first/app/dialog-box/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/dialog-box/basic-usage.vue
@@ -38,12 +38,12 @@
 </template>
 
 <script>
-import { DialogBox, Button } from '@opentiny/vue'
+import { TinyDialogBox, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDialogBox: DialogBox,
-    TinyButton: Button
+    TinyDialogBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/dialog-box/dialog-before-close.vue b/examples/sites/demos/mobile-first/app/dialog-box/dialog-before-close.vue
index c947ba075..9bc7c0423 100644
--- a/examples/sites/demos/mobile-first/app/dialog-box/dialog-before-close.vue
+++ b/examples/sites/demos/mobile-first/app/dialog-box/dialog-before-close.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/dialog-box/dialog-destroy-close.vue b/examples/sites/demos/mobile-first/app/dialog-box/dialog-destroy-close.vue
index 9e906750e..a54374d37 100644
--- a/examples/sites/demos/mobile-first/app/dialog-box/dialog-destroy-close.vue
+++ b/examples/sites/demos/mobile-first/app/dialog-box/dialog-destroy-close.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script>
-import { Button, DialogBox, Radio } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyRadio: Radio
+    TinyButton,
+    TinyDialogBox,
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/dialog-box/dialog-fullscreen.vue b/examples/sites/demos/mobile-first/app/dialog-box/dialog-fullscreen.vue
index 66a1cac68..7c52957fb 100644
--- a/examples/sites/demos/mobile-first/app/dialog-box/dialog-fullscreen.vue
+++ b/examples/sites/demos/mobile-first/app/dialog-box/dialog-fullscreen.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { DialogBox, Button } from '@opentiny/vue'
+import { TinyDialogBox, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDialogBox: DialogBox,
-    TinyButton: Button
+    TinyDialogBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/dialog-box/dialog-modal.vue b/examples/sites/demos/mobile-first/app/dialog-box/dialog-modal.vue
index 903430d37..28fe86cba 100644
--- a/examples/sites/demos/mobile-first/app/dialog-box/dialog-modal.vue
+++ b/examples/sites/demos/mobile-first/app/dialog-box/dialog-modal.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { DialogBox, Button } from '@opentiny/vue'
+import { TinyDialogBox, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDialogBox: DialogBox,
-    TinyButton: Button
+    TinyDialogBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/dialog-box/dialog-slot.vue b/examples/sites/demos/mobile-first/app/dialog-box/dialog-slot.vue
index f0f62ff24..20db3ef2d 100644
--- a/examples/sites/demos/mobile-first/app/dialog-box/dialog-slot.vue
+++ b/examples/sites/demos/mobile-first/app/dialog-box/dialog-slot.vue
@@ -30,12 +30,12 @@
 </template>
 
 <script>
-import { DialogBox, Button } from '@opentiny/vue'
+import { TinyDialogBox, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDialogBox: DialogBox,
-    TinyButton: Button
+    TinyDialogBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/drawer/basic-usage.vue b/examples/sites/demos/mobile-first/app/drawer/basic-usage.vue
index 8ec98a69d..7b16d520b 100644
--- a/examples/sites/demos/mobile-first/app/drawer/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/basic-usage.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/drawer/dragable.vue b/examples/sites/demos/mobile-first/app/drawer/dragable.vue
index faaed9cbc..890fcb0b3 100644
--- a/examples/sites/demos/mobile-first/app/drawer/dragable.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/dragable.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/drawer/event.vue b/examples/sites/demos/mobile-first/app/drawer/event.vue
index 53679a429..625222387 100644
--- a/examples/sites/demos/mobile-first/app/drawer/event.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/event.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Drawer, Button, Modal } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
@@ -32,10 +32,10 @@ export default {
       this.visible = true
     },
     close() {
-      Modal.message('关闭事件')
+      TinyModal.message('关闭事件')
     },
     confirm() {
-      Modal.message('确认事件')
+      TinyModal.message('确认事件')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/drawer/mask-event.vue b/examples/sites/demos/mobile-first/app/drawer/mask-event.vue
index be7828385..9f5c27b2c 100644
--- a/examples/sites/demos/mobile-first/app/drawer/mask-event.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/mask-event.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/drawer/mask.vue b/examples/sites/demos/mobile-first/app/drawer/mask.vue
index dd74d5413..4a89538f5 100644
--- a/examples/sites/demos/mobile-first/app/drawer/mask.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/mask.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/drawer/placement.vue b/examples/sites/demos/mobile-first/app/drawer/placement.vue
index 90f9320c6..675dd9352 100644
--- a/examples/sites/demos/mobile-first/app/drawer/placement.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/placement.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/drawer/show.vue b/examples/sites/demos/mobile-first/app/drawer/show.vue
index 61adb4a3d..6c9bc427f 100644
--- a/examples/sites/demos/mobile-first/app/drawer/show.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/show.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/drawer/slot.vue b/examples/sites/demos/mobile-first/app/drawer/slot.vue
index 66bc0c0d6..c8525a0d8 100644
--- a/examples/sites/demos/mobile-first/app/drawer/slot.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/slot.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/drawer/width.vue b/examples/sites/demos/mobile-first/app/drawer/width.vue
index c531c6915..16d30137f 100644
--- a/examples/sites/demos/mobile-first/app/drawer/width.vue
+++ b/examples/sites/demos/mobile-first/app/drawer/width.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/dropdown/arrow-button.vue b/examples/sites/demos/mobile-first/app/dropdown/arrow-button.vue
index e163b1ace..8cdb6b1f3 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/arrow-button.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/arrow-button.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/basic-usage.vue b/examples/sites/demos/mobile-first/app/dropdown/basic-usage.vue
index 7f86dbc58..c7604f787 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/basic-usage.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/border-size.vue b/examples/sites/demos/mobile-first/app/dropdown/border-size.vue
index 51e574c8b..71ecddc33 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/border-size.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/border-size.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/button-dropdown.vue b/examples/sites/demos/mobile-first/app/dropdown/button-dropdown.vue
index bc5084302..c00447ffc 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/button-dropdown.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/button-dropdown.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/button-size.vue b/examples/sites/demos/mobile-first/app/dropdown/button-size.vue
index 93745eb06..929ae31aa 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/button-size.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/button-size.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/button-type.vue b/examples/sites/demos/mobile-first/app/dropdown/button-type.vue
index 821fcc131..3001a15fd 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/button-type.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/button-type.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/checked-status.vue b/examples/sites/demos/mobile-first/app/dropdown/checked-status.vue
index 9fb1a95a2..f75102121 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/checked-status.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/checked-status.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/disabled.vue b/examples/sites/demos/mobile-first/app/dropdown/disabled.vue
index 926b809ea..cfd44b704 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/disabled.vue
@@ -33,13 +33,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/events-button-click.vue b/examples/sites/demos/mobile-first/app/dropdown/events-button-click.vue
index 328423cb8..6f435c975 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/events-button-click.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/events-button-click.vue
@@ -12,17 +12,17 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   methods: {
     buttonClick() {
-      Modal.message({ message: '下拉菜单内置按钮点击事件', status: 'info' })
+      TinyModal.message({ message: '下拉菜单内置按钮点击事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/dropdown/events-item-click.vue b/examples/sites/demos/mobile-first/app/dropdown/events-item-click.vue
index ec205da7d..eb1c5da39 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/events-item-click.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/events-item-click.vue
@@ -14,17 +14,17 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   methods: {
     itemClick(itemData) {
-      Modal.message({ message: `点击菜单项触发的事件回调，当前为第${itemData}个菜单项`, status: 'info' })
+      TinyModal.message({ message: `点击菜单项触发的事件回调，当前为第${itemData}个菜单项`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/dropdown/events-visible-change.vue b/examples/sites/demos/mobile-first/app/dropdown/events-visible-change.vue
index a61b61979..089b863e5 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/events-visible-change.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/events-visible-change.vue
@@ -14,17 +14,17 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem, Modal } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   methods: {
     visibleChange(status) {
-      Modal.message({
+      TinyModal.message({
         message: `下拉菜单显隐事件，当前为${status ? '显示' : '隐藏'}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/dropdown/hide-on-click.vue b/examples/sites/demos/mobile-first/app/dropdown/hide-on-click.vue
index 7e63f74b8..1f2ebcfd1 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/hide-on-click.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/hide-on-click.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/label-over.vue b/examples/sites/demos/mobile-first/app/dropdown/label-over.vue
index ff2ac7a2a..a27698bfd 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/label-over.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/label-over.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/many-dropdown.vue b/examples/sites/demos/mobile-first/app/dropdown/many-dropdown.vue
index 4a7513980..87c999ace 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/many-dropdown.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/many-dropdown.vue
@@ -13,13 +13,13 @@
 
 <script>
 import { IconEllipsis } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem,
     IconEllipsis: IconEllipsis()
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/dropdown/max-height.vue b/examples/sites/demos/mobile-first/app/dropdown/max-height.vue
index dc1cd28e7..491a9c627 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/max-height.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/max-height.vue
@@ -40,13 +40,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/multi-stage.vue b/examples/sites/demos/mobile-first/app/dropdown/multi-stage.vue
index adc214396..57d809960 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/multi-stage.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/multi-stage.vue
@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/pop-direction.vue b/examples/sites/demos/mobile-first/app/dropdown/pop-direction.vue
index 21b406e84..28a9e7a20 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/pop-direction.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/pop-direction.vue
@@ -45,16 +45,16 @@
 </template>
 
 <script>
-import { Layout, Row, Col, Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol, TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col,
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyLayout,
+    TinyRow,
+    TinyCol,
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/round.vue b/examples/sites/demos/mobile-first/app/dropdown/round.vue
index 68cfd842b..47c431a28 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/round.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/round.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/dropdown/trigger-event.vue b/examples/sites/demos/mobile-first/app/dropdown/trigger-event.vue
index a90748507..30a96ccde 100644
--- a/examples/sites/demos/mobile-first/app/dropdown/trigger-event.vue
+++ b/examples/sites/demos/mobile-first/app/dropdown/trigger-event.vue
@@ -74,16 +74,16 @@
 
 <script>
 import { IconPlus, IconPlusCircle, IconPlusSquare, IconCheckedLinear, IconCheckedSur } from '@opentiny/vue-icon'
-import { Layout, Row, Col, Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol, TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col,
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
+    TinyLayout,
+    TinyRow,
+    TinyCol,
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem,
     IconPlus: IconPlus(),
     IconPlusCircle: IconPlusCircle(),
     IconPlusSquare: IconPlusSquare(),
diff --git a/examples/sites/demos/mobile-first/app/exception/button-text.vue b/examples/sites/demos/mobile-first/app/exception/button-text.vue
index b861e117c..951db945a 100644
--- a/examples/sites/demos/mobile-first/app/exception/button-text.vue
+++ b/examples/sites/demos/mobile-first/app/exception/button-text.vue
@@ -1,20 +1,20 @@
-<template>
+<template>
   <tiny-exception type="pagenoperm">
     <tiny-button type="primary" @click="test">立即新建</tiny-button>
   </tiny-exception>
 </template>
 
 <script>
-import { Exception, Modal, Button } from '@opentiny/vue'
+import { TinyException, TinyModal, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception,
-    TinyButton: Button
+    TinyException,
+    TinyButton
   },
   methods: {
     test() {
-      Modal.alert('111')
+      TinyModal.alert('111')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/exception/component-empty.vue b/examples/sites/demos/mobile-first/app/exception/component-empty.vue
index 4993de301..5b970142d 100644
--- a/examples/sites/demos/mobile-first/app/exception/component-empty.vue
+++ b/examples/sites/demos/mobile-first/app/exception/component-empty.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
   <div>
     <tiny-grid :data="tableData" height="300">
       <tiny-grid-column type="index" width="5%"></tiny-grid-column>
@@ -24,14 +24,14 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Exception, Split } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyException, TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyException: Exception,
-    TinySplit: Split
+    TinyGrid,
+    TinyGridColumn,
+    TinyException,
+    TinySplit
   },
   methods: {
     renderEmpty() {
diff --git a/examples/sites/demos/mobile-first/app/exception/content-slot.vue b/examples/sites/demos/mobile-first/app/exception/content-slot.vue
index 937551b8c..c58c8ab98 100644
--- a/examples/sites/demos/mobile-first/app/exception/content-slot.vue
+++ b/examples/sites/demos/mobile-first/app/exception/content-slot.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/exception/message.vue b/examples/sites/demos/mobile-first/app/exception/message.vue
index b8091ee01..465e67290 100644
--- a/examples/sites/demos/mobile-first/app/exception/message.vue
+++ b/examples/sites/demos/mobile-first/app/exception/message.vue
@@ -1,13 +1,13 @@
-<template>
+<template>
   <tiny-exception type="pageservererror"></tiny-exception>
 </template>
 
 <script>
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/exception/page-empty.vue b/examples/sites/demos/mobile-first/app/exception/page-empty.vue
index 6c7816b91..51df52805 100644
--- a/examples/sites/demos/mobile-first/app/exception/page-empty.vue
+++ b/examples/sites/demos/mobile-first/app/exception/page-empty.vue
@@ -1,13 +1,13 @@
-<template>
+<template>
   <tiny-exception page-empty type="pageservererror"></tiny-exception>
 </template>
 
 <script>
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/exception/sub-message.vue b/examples/sites/demos/mobile-first/app/exception/sub-message.vue
index ad8acd3a8..dc61997a1 100644
--- a/examples/sites/demos/mobile-first/app/exception/sub-message.vue
+++ b/examples/sites/demos/mobile-first/app/exception/sub-message.vue
@@ -1,13 +1,13 @@
-<template>
+<template>
   <tiny-exception type="pageservererror" sub-message="自定义副文本内容"></tiny-exception>
 </template>
 
 <script>
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile-first/app/file-upload/assist-content.vue b/examples/sites/demos/mobile-first/app/file-upload/assist-content.vue
index ed0295247..7c6097b73 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/assist-content.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/assist-content.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/audio.vue b/examples/sites/demos/mobile-first/app/file-upload/audio.vue
index 5d7797d66..f874561e0 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/audio.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/audio.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/basic-usage.vue b/examples/sites/demos/mobile-first/app/file-upload/basic-usage.vue
index ceb21c6cf..a141b98da 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/basic-usage.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/bubble.vue b/examples/sites/demos/mobile-first/app/file-upload/bubble.vue
index 8191d86f5..bb43514dc 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/bubble.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/bubble.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/display-only-picture.vue b/examples/sites/demos/mobile-first/app/file-upload/display-only-picture.vue
index 036ac7c05..b7e9e499d 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/display-only-picture.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/display-only-picture.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/display-only-video-audio.vue b/examples/sites/demos/mobile-first/app/file-upload/display-only-video-audio.vue
index 5bd9b23d7..88f6a4303 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/display-only-video-audio.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/display-only-video-audio.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/display-only.vue b/examples/sites/demos/mobile-first/app/file-upload/display-only.vue
index b268f9642..fa32639d1 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/display-only.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/display-only.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/download-all.vue b/examples/sites/demos/mobile-first/app/file-upload/download-all.vue
index c12f05073..587fd6244 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/download-all.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/download-all.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/download-picture.vue b/examples/sites/demos/mobile-first/app/file-upload/download-picture.vue
index a0b810ee5..6e64d9d95 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/download-picture.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/download-picture.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/download.vue b/examples/sites/demos/mobile-first/app/file-upload/download.vue
index 9c0f6efa3..cff622804 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/download.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/download.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/drag-file-list.vue b/examples/sites/demos/mobile-first/app/file-upload/drag-file-list.vue
index e0ad5e5c0..f4c501b42 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/drag-file-list.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/drag-file-list.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/drag.vue b/examples/sites/demos/mobile-first/app/file-upload/drag.vue
index af8e6f236..cd3a98ac8 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/drag.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/drag.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/encrypt-config.vue b/examples/sites/demos/mobile-first/app/file-upload/encrypt-config.vue
index 3b82004b1..fce8f25b6 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/encrypt-config.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/encrypt-config.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/event-trigger-click.vue b/examples/sites/demos/mobile-first/app/file-upload/event-trigger-click.vue
index 73ac503d1..d19588220 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/event-trigger-click.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/event-trigger-click.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/file-list.vue b/examples/sites/demos/mobile-first/app/file-upload/file-list.vue
index 9c77e5b74..7782ea915 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/file-list.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/file-list.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/file-size-array.vue b/examples/sites/demos/mobile-first/app/file-upload/file-size-array.vue
index 68e6ec2cd..a835de96d 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/file-size-array.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/file-size-array.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/file-size.vue b/examples/sites/demos/mobile-first/app/file-upload/file-size.vue
index 421ce9c3a..da872bafd 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/file-size.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/file-size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/file-type.vue b/examples/sites/demos/mobile-first/app/file-upload/file-type.vue
index 6abf4579b..eb86fe034 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/file-type.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/file-type.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/multi-media-native.vue b/examples/sites/demos/mobile-first/app/file-upload/multi-media-native.vue
index cb57d78c5..69423de45 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/multi-media-native.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/multi-media-native.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/multi-media.vue b/examples/sites/demos/mobile-first/app/file-upload/multi-media.vue
index 77b137b22..8e848a726 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/multi-media.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/multi-media.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/notice.vue b/examples/sites/demos/mobile-first/app/file-upload/notice.vue
index 5606f9f4b..eaf1201ee 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/notice.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/notice.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { FileUpload, Alert } from '@opentiny/vue'
+import { TinyFileUpload, TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinyFileUpload: FileUpload
+    TinyAlert,
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/picture-card.vue b/examples/sites/demos/mobile-first/app/file-upload/picture-card.vue
index 3f3830513..cc3830c8f 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/picture-card.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/picture-card.vue
@@ -3,13 +3,13 @@
 </template>
 
 <script>
-import { FileUpload, DialogBox } from '@opentiny/vue'
+import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue'
 import { IconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyDialogBox: DialogBox,
+    TinyFileUpload,
+    TinyDialogBox,
     IconPlus: IconPlus()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/picture-show-name.vue b/examples/sites/demos/mobile-first/app/file-upload/picture-show-name.vue
index 99e1fac01..1dcb5d7ba 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/picture-show-name.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/picture-show-name.vue
@@ -3,13 +3,13 @@
 </template>
 
 <script>
-import { FileUpload, DialogBox } from '@opentiny/vue'
+import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue'
 import { IconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyDialogBox: DialogBox,
+    TinyFileUpload,
+    TinyDialogBox,
     IconPlus: IconPlus()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/picture.vue b/examples/sites/demos/mobile-first/app/file-upload/picture.vue
index 3005e73ec..bd179dd07 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/picture.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/picture.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/preview-picture.vue b/examples/sites/demos/mobile-first/app/file-upload/preview-picture.vue
index cf8cfaa1d..426e2d329 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/preview-picture.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/preview-picture.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/preview.vue b/examples/sites/demos/mobile-first/app/file-upload/preview.vue
index 5c6d5bf40..739e6b0a2 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/preview.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/preview.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/prompt-tip.vue b/examples/sites/demos/mobile-first/app/file-upload/prompt-tip.vue
index 72aa84bc4..f594c7011 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/prompt-tip.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/prompt-tip.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/re-upload-picture.vue b/examples/sites/demos/mobile-first/app/file-upload/re-upload-picture.vue
index bdc976e0d..b4ced0764 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/re-upload-picture.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/re-upload-picture.vue
@@ -4,12 +4,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/re-upload.vue b/examples/sites/demos/mobile-first/app/file-upload/re-upload.vue
index df9f4d99b..4cecd73b6 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/re-upload.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/re-upload.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/show-download-bar.vue b/examples/sites/demos/mobile-first/app/file-upload/show-download-bar.vue
index 6c90660f0..e100866ba 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/show-download-bar.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/show-download-bar.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { FileUpload, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
@@ -59,7 +59,7 @@ export default {
               file.showDownloadBar = false
             }, 1000)
 
-            Modal.message({ message: '下载成功', status: 'success' })
+            TinyModal.message({ message: '下载成功', status: 'success' })
             return
           }
           file.downloadPercentage += 10
@@ -78,7 +78,7 @@ export default {
             clearInterval(timer)
             // file.showDownloadBar = false
             file.downloadStatus = 'exception'
-            Modal.message({ message: '下载失败', status: 'error' })
+            TinyModal.message({ message: '下载失败', status: 'error' })
             return
           }
           file.downloadPercentage += 10
diff --git a/examples/sites/demos/mobile-first/app/file-upload/show-title.vue b/examples/sites/demos/mobile-first/app/file-upload/show-title.vue
index ca1083418..338172115 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/show-title.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/show-title.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/slot-operate.vue b/examples/sites/demos/mobile-first/app/file-upload/slot-operate.vue
index 97bf62bde..434d4afca 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/slot-operate.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/slot-operate.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/title.vue b/examples/sites/demos/mobile-first/app/file-upload/title.vue
index 18204b3bf..3ef4f33a6 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/title.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/title.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/file-upload/video.vue b/examples/sites/demos/mobile-first/app/file-upload/video.vue
index a6658158c..6d15ba0ab 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/video.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/video.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/filter-bar/basic-usage.vue b/examples/sites/demos/mobile-first/app/filter-bar/basic-usage.vue
index 4a0ad9adb..891a88fcf 100644
--- a/examples/sites/demos/mobile-first/app/filter-bar/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/filter-bar/basic-usage.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { FilterBar, Button } from '@opentiny/vue'
+import { TinyFilterBar, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilterBar: FilterBar,
-    TinyButton: Button
+    TinyFilterBar,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/filter-bar/readonly.vue b/examples/sites/demos/mobile-first/app/filter-bar/readonly.vue
index f4c038639..c9681b826 100644
--- a/examples/sites/demos/mobile-first/app/filter-bar/readonly.vue
+++ b/examples/sites/demos/mobile-first/app/filter-bar/readonly.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FilterBar, Modal } from '@opentiny/vue'
+import { TinyFilterBar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilterBar: FilterBar
+    TinyFilterBar
   },
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     click(index) {
-      Modal.message(`当前点击第 ${index + 1} 项，值为 【${this.data[index]}】`)
+      TinyModal.message(`当前点击第 ${index + 1} 项，值为 【${this.data[index]}】`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/filter-bar/slot.vue b/examples/sites/demos/mobile-first/app/filter-bar/slot.vue
index d5f0ef991..f03e59f97 100644
--- a/examples/sites/demos/mobile-first/app/filter-bar/slot.vue
+++ b/examples/sites/demos/mobile-first/app/filter-bar/slot.vue
@@ -9,13 +9,13 @@
 </template>
 
 <script>
-import { FilterBar, Modal } from '@opentiny/vue'
+import { TinyFilterBar, TinyModal } from '@opentiny/vue'
 import { IconUnfilter } from '@opentiny/vue-icon'
 
 export default {
   components: {
     IconUnfilter: IconUnfilter(),
-    TinyFilterBar: FilterBar
+    TinyFilterBar
   },
   data() {
     return {
@@ -25,10 +25,10 @@ export default {
   },
   methods: {
     click(index) {
-      Modal.message(`当前点击第 ${index + 1} 项，值为 【${this.data[index]}】`)
+      TinyModal.message(`当前点击第 ${index + 1} 项，值为 【${this.data[index]}】`)
     },
     filterClickHandler() {
-      Modal.message(`插槽内点击过滤图标事件`)
+      TinyModal.message(`插槽内点击过滤图标事件`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/filter/basic-usage.vue b/examples/sites/demos/mobile-first/app/filter/basic-usage.vue
index 6130ba607..5d96444c3 100644
--- a/examples/sites/demos/mobile-first/app/filter/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/filter/basic-usage.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Filter, Button } from '@opentiny/vue'
+import { TinyFilter, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilter: Filter,
-    TinyButton: Button
+    TinyFilter,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/filter/column-num.vue b/examples/sites/demos/mobile-first/app/filter/column-num.vue
index 62adabb0d..fc14946af 100644
--- a/examples/sites/demos/mobile-first/app/filter/column-num.vue
+++ b/examples/sites/demos/mobile-first/app/filter/column-num.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Filter } from '@opentiny/vue'
+import { TinyFilter } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilter: Filter
+    TinyFilter
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/filter/enumeration.vue b/examples/sites/demos/mobile-first/app/filter/enumeration.vue
index aa840bf4b..a87c85194 100644
--- a/examples/sites/demos/mobile-first/app/filter/enumeration.vue
+++ b/examples/sites/demos/mobile-first/app/filter/enumeration.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Filter, Button } from '@opentiny/vue'
+import { TinyFilter, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilter: Filter,
-    TinyButton: Button
+    TinyFilter,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/filter/filter-group.vue b/examples/sites/demos/mobile-first/app/filter/filter-group.vue
index 3d60adee3..8a98980e4 100644
--- a/examples/sites/demos/mobile-first/app/filter/filter-group.vue
+++ b/examples/sites/demos/mobile-first/app/filter/filter-group.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { Filter } from '@opentiny/vue'
+import { TinyFilter } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilter: Filter
+    TinyFilter
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/filter/manual.vue b/examples/sites/demos/mobile-first/app/filter/manual.vue
index bb9d87f46..21b74f639 100644
--- a/examples/sites/demos/mobile-first/app/filter/manual.vue
+++ b/examples/sites/demos/mobile-first/app/filter/manual.vue
@@ -27,13 +27,13 @@
 </template>
 
 <script>
-import { Filter, Button, SelectMobile } from '@opentiny/vue'
+import { TinyFilter, TinyButton, TinySelectMobile } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilter: Filter,
-    TinySelectMobile: SelectMobile,
-    TinyButton: Button
+    TinyFilter,
+    TinySelectMobile,
+    TinyButton
   },
   data() {
     return {
@@ -162,6 +162,7 @@ const filterList = [
     ]
   }
 ]
+
 const list = [
   {
     id: 1,
diff --git a/examples/sites/demos/mobile-first/app/filter/manual2.vue b/examples/sites/demos/mobile-first/app/filter/manual2.vue
index 61f0a64a3..abda2c528 100644
--- a/examples/sites/demos/mobile-first/app/filter/manual2.vue
+++ b/examples/sites/demos/mobile-first/app/filter/manual2.vue
@@ -27,13 +27,13 @@
 </template>
 
 <script>
-import { Filter, Button, SelectView } from '@opentiny/vue'
+import { TinyFilter, TinyButton, TinySelectView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilter: Filter,
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinyFilter,
+    TinySelectView,
+    TinyButton
   },
   data() {
     return {
@@ -162,6 +162,7 @@ const filterList = [
     ]
   }
 ]
+
 const list = [
   {
     id: 1,
diff --git a/examples/sites/demos/mobile-first/app/filter/slot.vue b/examples/sites/demos/mobile-first/app/filter/slot.vue
index e86467932..6eafe87e0 100644
--- a/examples/sites/demos/mobile-first/app/filter/slot.vue
+++ b/examples/sites/demos/mobile-first/app/filter/slot.vue
@@ -43,13 +43,13 @@
 </template>
 
 <script>
-import { Filter, Button } from '@opentiny/vue'
+import { TinyFilter, TinyButton } from '@opentiny/vue'
 import { IconExpressSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFilter: Filter,
-    TinyButton: Button,
+    TinyFilter,
+    TinyButton,
     IconExpressSearch: IconExpressSearch()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/floating-button/animated.vue b/examples/sites/demos/mobile-first/app/floating-button/animated.vue
index 17a6c15b3..fd0d7c319 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/animated.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/animated.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { FloatingButton, Button } from '@opentiny/vue'
+import { TinyFloatingButton, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton,
-    TinyButton: Button
+    TinyFloatingButton,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/floating-button/basic-usage.vue b/examples/sites/demos/mobile-first/app/floating-button/basic-usage.vue
index 44bb81a47..088c66eed 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FloatingButton } from '@opentiny/vue'
+import { TinyFloatingButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton
+    TinyFloatingButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/floating-button/button-bgcolor.vue b/examples/sites/demos/mobile-first/app/floating-button/button-bgcolor.vue
index de782c695..9fea709d7 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/button-bgcolor.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/button-bgcolor.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FloatingButton } from '@opentiny/vue'
+import { TinyFloatingButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton
+    TinyFloatingButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/floating-button/button-position.vue b/examples/sites/demos/mobile-first/app/floating-button/button-position.vue
index fb172cfac..ad6d81d02 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/button-position.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/button-position.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FloatingButton } from '@opentiny/vue'
+import { TinyFloatingButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton
+    TinyFloatingButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/floating-button/custom-icon.vue b/examples/sites/demos/mobile-first/app/floating-button/custom-icon.vue
index 68b21391a..4cb7f57e9 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/custom-icon.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/custom-icon.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { FloatingButton } from '@opentiny/vue'
+import { TinyFloatingButton } from '@opentiny/vue'
 import { IconArrowUp } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton
+    TinyFloatingButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/floating-button/event.vue b/examples/sites/demos/mobile-first/app/floating-button/event.vue
index 3e4fc49d4..6041cc2ba 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/event.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/event.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import { FloatingButton, Modal, Button } from '@opentiny/vue'
+import { TinyFloatingButton, TinyModal, TinyButton } from '@opentiny/vue'
 import { IconCopy } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton,
-    TinyButton: Button
+    TinyFloatingButton,
+    TinyButton
   },
   data() {
     return {
@@ -32,7 +32,7 @@ export default {
   },
   methods: {
     touchstartHandler(event, index) {
-      Modal.message('按钮--' + index)
+      TinyModal.message('按钮--' + index)
     },
     clickHander1() {
       this.showExpand = false
diff --git a/examples/sites/demos/mobile-first/app/floating-button/expand.vue b/examples/sites/demos/mobile-first/app/floating-button/expand.vue
index d6dd00751..c2418ceec 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/expand.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/expand.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import { FloatingButton, Button } from '@opentiny/vue'
+import { TinyFloatingButton, TinyButton } from '@opentiny/vue'
 import { IconCopy } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton,
-    TinyButton: Button
+    TinyFloatingButton,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/floating-button/mask.vue b/examples/sites/demos/mobile-first/app/floating-button/mask.vue
index 7da5202f9..65c3d72ce 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/mask.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/mask.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script>
-import { FloatingButton, Button } from '@opentiny/vue'
+import { TinyFloatingButton, TinyButton } from '@opentiny/vue'
 import { IconCopy } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton,
-    TinyButton: Button
+    TinyFloatingButton,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/floating-button/reclick.vue b/examples/sites/demos/mobile-first/app/floating-button/reclick.vue
index 48a679e06..0fb1ff7f2 100644
--- a/examples/sites/demos/mobile-first/app/floating-button/reclick.vue
+++ b/examples/sites/demos/mobile-first/app/floating-button/reclick.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { FloatingButton, Modal } from '@opentiny/vue'
+import { TinyFloatingButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatingButton: FloatingButton
+    TinyFloatingButton
   },
   methods: {
     touchstartHandler() {
-      Modal.message('click')
+      TinyModal.message('click')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/flowchart/basic-usage.vue b/examples/sites/demos/mobile-first/app/flowchart/basic-usage.vue
index 457818fce..d2e60e424 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/basic-usage.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Flowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyModal } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 import { IconSuccessful } from '@opentiny/vue-icon'
 
-const { createConfig } = Flowchart
+const { createConfig } = TinyFlowchart
 
 const chartData = {
   nodes: [
@@ -130,7 +130,7 @@ Object.assign(chartConfig, {
 
 export default {
   components: {
-    TinyFlowchart: Flowchart
+    TinyFlowchart
   },
   data() {
     return {
@@ -141,15 +141,15 @@ export default {
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/flowchart/dot-horizon-async.vue b/examples/sites/demos/mobile-first/app/flowchart/dot-horizon-async.vue
index b9005ffc0..d41a23466 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/dot-horizon-async.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/dot-horizon-async.vue
@@ -10,9 +10,9 @@
 </template>
 
 <script>
-import { Flowchart, AsyncFlowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyAsyncFlowchart, TinyModal } from '@opentiny/vue'
 
-const { createConfig, Node } = Flowchart
+const { createConfig, Node } = TinyFlowchart
 const nodeWrapperSize = 32
 
 const chartData = {
@@ -97,20 +97,20 @@ Object.assign(chartConfig, {
 
 export default {
   components: {
-    TinyAsyncFlowchart: AsyncFlowchart
+    TinyAsyncFlowchart
   },
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     },
     fetchFunc() {
       return new Promise((resolve) => {
diff --git a/examples/sites/demos/mobile-first/app/flowchart/dot-horizon.vue b/examples/sites/demos/mobile-first/app/flowchart/dot-horizon.vue
index 108906ebc..a09e5c9c8 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/dot-horizon.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/dot-horizon.vue
@@ -11,10 +11,10 @@
 </template>
 
 <script>
-import { Flowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyModal } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 
-const { createConfig, Node, resizeMixin } = Flowchart
+const { createConfig, Node, resizeMixin } = TinyFlowchart
 const nodeWrapperSize = 32
 
 const chartData = {
@@ -100,7 +100,7 @@ Object.assign(chartConfig, {
 export default {
   mixins: [resizeMixin({ refName: 'chart', nodeWrapperSize })],
   components: {
-    TinyFlowchart: Flowchart
+    TinyFlowchart
   },
   data() {
     return {
@@ -111,15 +111,15 @@ export default {
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/flowchart/dot-vertical-async.vue b/examples/sites/demos/mobile-first/app/flowchart/dot-vertical-async.vue
index 66dd1f322..4475f48ff 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/dot-vertical-async.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/dot-vertical-async.vue
@@ -11,9 +11,9 @@
 </template>
 
 <script>
-import { Flowchart, AsyncFlowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyAsyncFlowchart, TinyModal } from '@opentiny/vue'
 
-const { createConfig, Node } = Flowchart
+const { createConfig, Node } = TinyFlowchart
 const nodeWrapperSize = 32
 
 const chartData = {
@@ -107,8 +107,7 @@ const chartData = {
   groups: [
     {
       nodes: ['2', '3'],
-      padding: [20, 100],
-      // fillStyle: '#f5f6f8',
+      padding: [20, 100], // fillStyle: '#f5f6f8',
       lineDash: [6, 6],
       strokeStyle: '#8d959e',
       title: '主账',
@@ -193,24 +192,24 @@ Object.assign(chartConfig, {
 
 export default {
   components: {
-    TinyAsyncFlowchart: AsyncFlowchart
+    TinyAsyncFlowchart
   },
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     },
     onClickGroup(afterGroup, e) {
       // console.log(afterGroup, e)
-      Modal.message('click-group')
+      TinyModal.message('click-group')
     },
     fetchFunc() {
       return new Promise((resolve) => {
diff --git a/examples/sites/demos/mobile-first/app/flowchart/dot-vertical.vue b/examples/sites/demos/mobile-first/app/flowchart/dot-vertical.vue
index a9e057554..e9ac7fc86 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/dot-vertical.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/dot-vertical.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script>
-import { Flowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyModal } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 
-const { createConfig, Node, resizeMixin } = Flowchart
+const { createConfig, Node, resizeMixin } = TinyFlowchart
 const nodeWrapperSize = 32
 
 const chartData = {
@@ -109,8 +109,7 @@ const chartData = {
   groups: [
     {
       nodes: ['2', '3'],
-      padding: [20, 100],
-      // fillStyle: '#f5f6f8',
+      padding: [20, 100], // fillStyle: '#f5f6f8',
       lineDash: [6, 6],
       strokeStyle: '#8d959e',
       title: '主账',
@@ -196,7 +195,7 @@ Object.assign(chartConfig, {
 export default {
   mixins: [resizeMixin({ refName: 'chart', nodeWrapperSize })],
   components: {
-    TinyFlowchart: Flowchart
+    TinyFlowchart
   },
   data() {
     return {
@@ -207,19 +206,19 @@ export default {
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     },
     onClickGroup(afterGroup, e) {
       // console.log(afterGroup, e)
-      Modal.message('click-group')
+      TinyModal.message('click-group')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/flowchart/holistic-fork.vue b/examples/sites/demos/mobile-first/app/flowchart/holistic-fork.vue
index 3215591c9..d7914c3ca 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/holistic-fork.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/holistic-fork.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script>
-import { Flowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyModal } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 
-const { createConfig, resizeMixin } = Flowchart
+const { createConfig, resizeMixin } = TinyFlowchart
 const nodeWrapperSize = 130
 
 const chartData = {
@@ -322,7 +322,7 @@ Object.assign(chartConfig, {
 export default {
   mixins: [resizeMixin({ refName: 'chart', nodeWrapperSize })],
   components: {
-    TinyFlowchart: Flowchart
+    TinyFlowchart
   },
   data() {
     return {
@@ -333,15 +333,15 @@ export default {
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/flowchart/holistic.vue b/examples/sites/demos/mobile-first/app/flowchart/holistic.vue
index cdb0533e9..da52a355e 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/holistic.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/holistic.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script>
-import { Flowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyModal } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 
-const { createConfig, resizeMixin } = Flowchart
+const { createConfig, resizeMixin } = TinyFlowchart
 const nodeWrapperSize = 130
 
 const chartData = {
@@ -151,7 +151,7 @@ Object.assign(chartConfig, {
 export default {
   mixins: [resizeMixin({ refName: 'chart', nodeWrapperSize })],
   components: {
-    TinyFlowchart: Flowchart
+    TinyFlowchart
   },
   data() {
     return {
@@ -162,15 +162,15 @@ export default {
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/flowchart/horizon.vue b/examples/sites/demos/mobile-first/app/flowchart/horizon.vue
index 72d0cba99..76fafff32 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/horizon.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/horizon.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script>
-import { Flowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyModal } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 
-const { createConfig } = Flowchart
+const { createConfig } = TinyFlowchart
 
 const chartData = {
   nodes: [
@@ -89,7 +89,7 @@ Object.assign(chartConfig, {
 
 export default {
   components: {
-    TinyFlowchart: Flowchart
+    TinyFlowchart
   },
   data() {
     return {
@@ -100,15 +100,15 @@ export default {
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/flowchart/link-path.vue b/examples/sites/demos/mobile-first/app/flowchart/link-path.vue
index bdf7d7971..3691c9891 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/link-path.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/link-path.vue
@@ -10,9 +10,9 @@
 </template>
 
 <script>
-import { Flowchart, AsyncFlowchart, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyAsyncFlowchart, TinyModal } from '@opentiny/vue'
 
-const { createConfig, Node } = Flowchart
+const { createConfig, Node } = TinyFlowchart
 const nodeWrapperSize = 32
 
 const chartData = {
@@ -121,20 +121,20 @@ Object.assign(chartConfig, {
 
 export default {
   components: {
-    TinyAsyncFlowchart: AsyncFlowchart
+    TinyAsyncFlowchart
   },
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     },
     fetchFunc() {
       return new Promise((resolve) => {
diff --git a/examples/sites/demos/mobile-first/app/flowchart/node-size.vue b/examples/sites/demos/mobile-first/app/flowchart/node-size.vue
index aed55cb54..82fb1c106 100644
--- a/examples/sites/demos/mobile-first/app/flowchart/node-size.vue
+++ b/examples/sites/demos/mobile-first/app/flowchart/node-size.vue
@@ -15,9 +15,9 @@
 </template>
 
 <script>
-import { Flowchart, AsyncFlowchart, ButtonGroup, Modal } from '@opentiny/vue'
+import { TinyFlowchart, TinyAsyncFlowchart, TinyButtonGroup, TinyModal } from '@opentiny/vue'
 
-const { createConfig, Node } = Flowchart
+const { createConfig, Node } = TinyFlowchart
 const nodeWrapperSize = 32
 
 const chartData = {
@@ -87,8 +87,8 @@ Object.assign(chartConfig, {
 
 export default {
   components: {
-    TinyAsyncFlowchart: AsyncFlowchart,
-    TinyButtonGroup: ButtonGroup
+    TinyAsyncFlowchart,
+    TinyButtonGroup
   },
   data() {
     return {
@@ -103,15 +103,15 @@ export default {
   methods: {
     onClickNode(afterNode, e) {
       // console.log(afterNode, e)
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(afterLink, e) {
       // console.log(afterLink, e)
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(param, e) {
       // console.log(param, e)
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     },
     fetchFunc() {
       return new Promise((resolve) => {
diff --git a/examples/sites/demos/mobile-first/app/fluent-editor/image-upload.vue b/examples/sites/demos/mobile-first/app/fluent-editor/image-upload.vue
index 0a7554fa0..0cefad593 100644
--- a/examples/sites/demos/mobile-first/app/fluent-editor/image-upload.vue
+++ b/examples/sites/demos/mobile-first/app/fluent-editor/image-upload.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { Modal } from '@opentiny/vue'
+import { TinyModal } from '@opentiny/vue'
 import TinyFluentEditor from '@opentiny/vue-fluent-editor'
 
 export default {
@@ -34,7 +34,7 @@ export default {
           next(file.downloadUrl)
         },
         fail: (serverError) => {
-          Modal.message({
+          TinyModal.message({
             message: `上传失败回调事件：${serverError}`,
             status: 'info'
           })
diff --git a/examples/sites/demos/mobile-first/app/fluent-editor/options.vue b/examples/sites/demos/mobile-first/app/fluent-editor/options.vue
index 0448ebbfc..f0f901f70 100644
--- a/examples/sites/demos/mobile-first/app/fluent-editor/options.vue
+++ b/examples/sites/demos/mobile-first/app/fluent-editor/options.vue
@@ -25,7 +25,7 @@ export default {
             [{ list: 'bullet' }, { list: 'ordered' }],
             [{ align: '' }, { align: 'center' }, { align: 'right' }],
             ['better-table'],
-            ['fullscreen'],
+            ['fullscreen']
           ],
           // 字数统计
           counter: true,
@@ -35,10 +35,30 @@ export default {
               color: {
                 text: '主题色',
                 colors: [
-                  '#ffffff', '#f2f2f2', '#dddddd', '#a6a6a6', '#666666', '#000000',
-                  '#c00000', '#ff0000', '#ffc8d3', '#ffc000', '#ffff00', '#fff4cb',
-                  '#92d050', '#00b050', '#dff3d2', '#00b0f0', '#0070c0', '#d4f1f5',
-                  '#002060', '#7030a0', '#7b69ee', '#1476ff', '#ec66ab', '#42b883',
+                  '#ffffff',
+                  '#f2f2f2',
+                  '#dddddd',
+                  '#a6a6a6',
+                  '#666666',
+                  '#000000',
+                  '#c00000',
+                  '#ff0000',
+                  '#ffc8d3',
+                  '#ffc000',
+                  '#ffff00',
+                  '#fff4cb',
+                  '#92d050',
+                  '#00b050',
+                  '#dff3d2',
+                  '#00b0f0',
+                  '#0070c0',
+                  '#d4f1f5',
+                  '#002060',
+                  '#7030a0',
+                  '#7b69ee',
+                  '#1476ff',
+                  '#ec66ab',
+                  '#42b883'
                 ]
               }
             }
diff --git a/examples/sites/demos/mobile-first/app/form/custom-validation-rule.vue b/examples/sites/demos/mobile-first/app/form/custom-validation-rule.vue
index c8fb1e2f8..c9727e162 100644
--- a/examples/sites/demos/mobile-first/app/form/custom-validation-rule.vue
+++ b/examples/sites/demos/mobile-first/app/form/custom-validation-rule.vue
@@ -23,14 +23,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     let validatePass = (rule, value, callback) => {
@@ -61,7 +61,7 @@ export default {
   },
   methods: {
     validate(val) {
-      Modal.message({
+      TinyModal.message({
         message: `表单项被校验后触发的事件,所校验字段为:${val}`,
         status: 'info'
       })
@@ -69,9 +69,9 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('校验通过，开始注册！')
+          TinyModal.alert('校验通过，开始注册！')
         } else {
-          Modal.message({ message: '校验不通过！！', status: 'warning' })
+          TinyModal.message({ message: '校验不通过！！', status: 'warning' })
           return false
         }
       })
diff --git a/examples/sites/demos/mobile-first/app/form/form-clear-validate.vue b/examples/sites/demos/mobile-first/app/form/form-clear-validate.vue
index 95730ad97..82e6366f5 100644
--- a/examples/sites/demos/mobile-first/app/form/form-clear-validate.vue
+++ b/examples/sites/demos/mobile-first/app/form/form-clear-validate.vue
@@ -28,16 +28,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyModal, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyRadioGroup: RadioGroup
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -88,7 +88,7 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/form/form-disabled.vue b/examples/sites/demos/mobile-first/app/form/form-disabled.vue
index 3673bd0c9..ed4ebff3f 100644
--- a/examples/sites/demos/mobile-first/app/form/form-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/form/form-disabled.vue
@@ -86,46 +86,46 @@
 
 <script>
 import {
-  Form,
-  FormItem,
-  Switch,
-  Checkbox,
-  Numeric,
-  Radio,
-  DatePicker,
-  Tooltip,
-  Input,
-  Button,
-  Autocomplete,
-  ButtonGroup,
-  CheckboxGroup,
-  IpAddress,
-  Link,
-  Popeditor,
-  Slider,
-  TimePicker
+  TinyForm,
+  TinyFormItem,
+  TinySwitch,
+  TinyCheckbox,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyTooltip,
+  TinyInput,
+  TinyButton,
+  TinyAutocomplete,
+  TinyButtonGroup,
+  TinyCheckboxGroup,
+  TinyIpAddress,
+  TinyLink,
+  TinyPopeditor,
+  TinySlider,
+  TinyTimePicker
 } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyCheckbox: Checkbox,
-    TinySwitch: Switch,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyDatePicker: DatePicker,
-    TinyTooltip: Tooltip,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyAutocomplete: Autocomplete,
-    TinyButtonGroup: ButtonGroup,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinyIpAddress: IpAddress,
-    TinyLink: Link,
-    TinyPopeditor: Popeditor,
-    TinySlider: Slider,
-    TinyTimePicker: TimePicker
+    TinyForm,
+    TinyFormItem,
+    TinyCheckbox,
+    TinySwitch,
+    TinyNumeric,
+    TinyRadio,
+    TinyDatePicker,
+    TinyTooltip,
+    TinyInput,
+    TinyButton,
+    TinyAutocomplete,
+    TinyButtonGroup,
+    TinyCheckboxGroup,
+    TinyIpAddress,
+    TinyLink,
+    TinyPopeditor,
+    TinySlider,
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/form/form-display-only.vue b/examples/sites/demos/mobile-first/app/form/form-display-only.vue
index 146a22851..6bb2aece4 100644
--- a/examples/sites/demos/mobile-first/app/form/form-display-only.vue
+++ b/examples/sites/demos/mobile-first/app/form/form-display-only.vue
@@ -83,38 +83,38 @@
 
 <script>
 import {
-  Form,
-  FormItem,
-  Switch,
-  Checkbox,
-  Numeric,
-  Radio,
-  Rate,
-  Input,
-  Button,
-  CheckboxGroup,
-  RadioGroup,
-  SelectMobile,
-  DatePickerMobileFirst,
-  Cell
+  TinyForm,
+  TinyFormItem,
+  TinySwitch,
+  TinyCheckbox,
+  TinyNumeric,
+  TinyRadio,
+  TinyRate,
+  TinyInput,
+  TinyButton,
+  TinyCheckboxGroup,
+  TinyRadioGroup,
+  TinySelectMobile,
+  TinyDatePickerMobileFirst,
+  TinyCell
 } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinySelectMobile: SelectMobile,
-    TinyCell: Cell,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyCheckbox: Checkbox,
-    TinySwitch: Switch,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyRate: Rate,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinyRadioGroup: RadioGroup
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinySelectMobile,
+    TinyCell,
+    TinyForm,
+    TinyFormItem,
+    TinyCheckbox,
+    TinySwitch,
+    TinyNumeric,
+    TinyRadio,
+    TinyRate,
+    TinyInput,
+    TinyButton,
+    TinyCheckboxGroup,
+    TinyRadioGroup
   },
   data() {
     const list = [
@@ -136,6 +136,7 @@ export default {
           '已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期'
       }
     ]
+
     return {
       displayOnly: true,
       top: false,
diff --git a/examples/sites/demos/mobile-first/app/form/form-in-row.vue b/examples/sites/demos/mobile-first/app/form/form-in-row.vue
index 9fcd1ecd2..13eba05e5 100644
--- a/examples/sites/demos/mobile-first/app/form/form-in-row.vue
+++ b/examples/sites/demos/mobile-first/app/form/form-in-row.vue
@@ -46,18 +46,27 @@
 </template>
 
 <script>
-import { Form, FormItem, Numeric, Radio, Input, SelectMobile, DatePickerMobileFirst, Cell } from '@opentiny/vue'
+import {
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyInput,
+  TinySelectMobile,
+  TinyDatePickerMobileFirst,
+  TinyCell
+} from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinySelectMobile: SelectMobile,
-    TinyCell: Cell,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyInput: Input
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinySelectMobile,
+    TinyCell,
+    TinyForm,
+    TinyFormItem,
+    TinyNumeric,
+    TinyRadio,
+    TinyInput
   },
   data() {
     const list = [
@@ -79,6 +88,7 @@ export default {
           '已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期'
       }
     ]
+
     return {
       dateVisibility: false,
       datetimeVisibility: false,
diff --git a/examples/sites/demos/mobile-first/app/form/form-item-tip.vue b/examples/sites/demos/mobile-first/app/form/form-item-tip.vue
index 7d65a121d..0cff7705d 100644
--- a/examples/sites/demos/mobile-first/app/form/form-item-tip.vue
+++ b/examples/sites/demos/mobile-first/app/form/form-item-tip.vue
@@ -22,14 +22,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
@@ -46,7 +46,7 @@ export default {
   },
   methods: {
     validate(val) {
-      Modal.message({
+      TinyModal.message({
         message: `表单项被校验后触发的事件,所校验字段为:${val}`,
         status: 'info'
       })
@@ -54,7 +54,7 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('校验通过，开始注册！')
+          TinyModal.alert('校验通过，开始注册！')
         } else {
           return false
         }
diff --git a/examples/sites/demos/mobile-first/app/form/form-validation.vue b/examples/sites/demos/mobile-first/app/form/form-validation.vue
index 3a2f79c55..542fe30e8 100644
--- a/examples/sites/demos/mobile-first/app/form/form-validation.vue
+++ b/examples/sites/demos/mobile-first/app/form/form-validation.vue
@@ -34,16 +34,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyModal, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyRadioGroup: RadioGroup
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -91,7 +91,7 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/form/frequently-used-form.vue b/examples/sites/demos/mobile-first/app/form/frequently-used-form.vue
index 0f6dafc23..2052629e8 100644
--- a/examples/sites/demos/mobile-first/app/form/frequently-used-form.vue
+++ b/examples/sites/demos/mobile-first/app/form/frequently-used-form.vue
@@ -46,18 +46,27 @@
 </template>
 
 <script>
-import { Form, FormItem, Numeric, Radio, Input, SelectMobile, DatePickerMobileFirst, Cell } from '@opentiny/vue'
+import {
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyInput,
+  TinySelectMobile,
+  TinyDatePickerMobileFirst,
+  TinyCell
+} from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePickerMobile: DatePickerMobileFirst,
-    TinySelectMobile: SelectMobile,
-    TinyCell: Cell,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyInput: Input
+    TinyDatePickerMobile: TinyDatePickerMobileFirst,
+    TinySelectMobile,
+    TinyCell,
+    TinyForm,
+    TinyFormItem,
+    TinyNumeric,
+    TinyRadio,
+    TinyInput
   },
   data() {
     const list = [
@@ -79,6 +88,7 @@ export default {
           '已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期已过期'
       }
     ]
+
     return {
       dateVisibility: false,
       datetimeVisibility: false,
diff --git a/examples/sites/demos/mobile-first/app/form/no-validate-to-add.vue b/examples/sites/demos/mobile-first/app/form/no-validate-to-add.vue
index fad47820f..07ab84fba 100644
--- a/examples/sites/demos/mobile-first/app/form/no-validate-to-add.vue
+++ b/examples/sites/demos/mobile-first/app/form/no-validate-to-add.vue
@@ -33,33 +33,33 @@
 
 <script>
 import {
-  Form,
-  FormItem,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  Radio,
-  RadioGroup,
-  Switch,
-  TimePicker,
-  DatePicker,
-  Input
+  TinyForm,
+  TinyFormItem,
+  TinyButton,
+  TinyCheckbox,
+  TinyCheckboxGroup,
+  TinyRadio,
+  TinyRadioGroup,
+  TinySwitch,
+  TinyTimePicker,
+  TinyDatePicker,
+  TinyInput
 } from '@opentiny/vue'
 import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinySwitch: Switch,
-    TinyTimePicker: TimePicker,
-    TinyDatePicker: DatePicker
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyCheckbox,
+    TinyCheckboxGroup,
+    TinyRadio,
+    TinyRadioGroup,
+    TinySwitch,
+    TinyTimePicker,
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/form/popper-options-bubbling.vue b/examples/sites/demos/mobile-first/app/form/popper-options-bubbling.vue
index 059f6befe..9fac4e8a5 100644
--- a/examples/sites/demos/mobile-first/app/form/popper-options-bubbling.vue
+++ b/examples/sites/demos/mobile-first/app/form/popper-options-bubbling.vue
@@ -33,15 +33,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton
   },
 
   data() {
@@ -68,7 +68,7 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/form/prompt-slot.vue b/examples/sites/demos/mobile-first/app/form/prompt-slot.vue
index f37c7f74c..b2db963c6 100644
--- a/examples/sites/demos/mobile-first/app/form/prompt-slot.vue
+++ b/examples/sites/demos/mobile-first/app/form/prompt-slot.vue
@@ -18,14 +18,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
@@ -46,7 +46,7 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/form/size.vue b/examples/sites/demos/mobile-first/app/form/size.vue
index 0dcb938cc..ba3ad9b1f 100644
--- a/examples/sites/demos/mobile-first/app/form/size.vue
+++ b/examples/sites/demos/mobile-first/app/form/size.vue
@@ -30,19 +30,28 @@
 </template>
 
 <script>
-import { Form, FormItem, Numeric, Radio, DatePicker, Tooltip, Input, Button } from '@opentiny/vue'
+import {
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyTooltip,
+  TinyInput,
+  TinyButton
+} from '@opentiny/vue'
 import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyDatePicker: DatePicker,
-    TinyTooltip: Tooltip,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyNumeric,
+    TinyRadio,
+    TinyDatePicker,
+    TinyTooltip,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/form/slot-label.vue b/examples/sites/demos/mobile-first/app/form/slot-label.vue
index 5d6ed3b22..83ae40642 100644
--- a/examples/sites/demos/mobile-first/app/form/slot-label.vue
+++ b/examples/sites/demos/mobile-first/app/form/slot-label.vue
@@ -25,16 +25,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyModal, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyRadioGroup: RadioGroup
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -84,7 +84,7 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/form/switch-from-item.vue b/examples/sites/demos/mobile-first/app/form/switch-from-item.vue
index 4f1eddd37..3f2acd42f 100644
--- a/examples/sites/demos/mobile-first/app/form/switch-from-item.vue
+++ b/examples/sites/demos/mobile-first/app/form/switch-from-item.vue
@@ -25,16 +25,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal, RadioGroup, Cascader } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal, TinyRadioGroup, TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyRadioGroup: RadioGroup,
-    TinyCascader: Cascader
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyRadioGroup,
+    TinyCascader
   },
   data() {
     return {
@@ -85,7 +85,7 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/form/validate-debounce.vue b/examples/sites/demos/mobile-first/app/form/validate-debounce.vue
index a2c6175c0..996867770 100644
--- a/examples/sites/demos/mobile-first/app/form/validate-debounce.vue
+++ b/examples/sites/demos/mobile-first/app/form/validate-debounce.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
@@ -44,12 +44,12 @@ export default {
     handleSubmit() {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
-          Modal.message('提交成功')
+          TinyModal.message('提交成功')
         }
       })
     },
     validateUser(rule, value, callback) {
-      Modal.message('开始校验')
+      TinyModal.message('开始校验')
       /**
        * 模拟异步校验
        * 如果validate-debounce为false，在连续输入的情况下，这里会创建很多校验请求
@@ -57,10 +57,10 @@ export default {
       new Promise((resolve, reject) => {
         setTimeout(() => {
           if (value && value.length > 30) {
-            Modal.message('校验成功')
+            TinyModal.message('校验成功')
             resolve()
           } else {
-            Modal.message('校验失败')
+            TinyModal.message('校验失败')
             reject(new Error('The length must be greater than 30 characters.'))
           }
         }, 300)
diff --git a/examples/sites/demos/mobile-first/app/form/validate-type.vue b/examples/sites/demos/mobile-first/app/form/validate-type.vue
index b5701a4a9..9a3eadf46 100644
--- a/examples/sites/demos/mobile-first/app/form/validate-type.vue
+++ b/examples/sites/demos/mobile-first/app/form/validate-type.vue
@@ -24,15 +24,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/form/validation-position.vue b/examples/sites/demos/mobile-first/app/form/validation-position.vue
index 98aaad071..6a3ff1283 100644
--- a/examples/sites/demos/mobile-first/app/form/validation-position.vue
+++ b/examples/sites/demos/mobile-first/app/form/validation-position.vue
@@ -24,15 +24,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/grid/basic-usage.vue b/examples/sites/demos/mobile-first/app/grid/basic-usage.vue
index 822876b00..da88a922e 100644
--- a/examples/sites/demos/mobile-first/app/grid/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/grid/basic-usage.vue
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal, Tag, Radio, ColumnListItem, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyTag, TinyRadio, TinyColumnListItem, TinyPager } from '@opentiny/vue'
 import {
   IconChevronRight,
   IconAreaChart,
@@ -91,19 +91,19 @@ import {
 
 export default {
   components: {
-    TinyTag: Tag,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyRadio: Radio,
-    TinyColumnListItem: ColumnListItem,
+    TinyTag,
+    TinyGrid,
+    TinyGridColumn,
+    TinyRadio,
+    TinyColumnListItem,
     IconChevronRight: IconChevronRight()
   },
   methods: {
     clickHandler(e, { row, buttonConfig }) {
-      Modal.message(`点击按钮 - ${row.name} - ${buttonConfig.name}`)
+      TinyModal.message(`点击按钮 - ${row.name} - ${buttonConfig.name}`)
     },
     onCardClick(row, e) {
-      Modal.message('onCardClick')
+      TinyModal.message('onCardClick')
     },
     getData({ page }) {
       let curPage = page.currentPage
@@ -140,7 +140,7 @@ export default {
         }
       },
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
@@ -168,7 +168,7 @@ export default {
             {
               render: ({ h, row, field, value, config, color }) =>
                 h(
-                  Tag,
+                  TinyTag,
                   {
                     props: { size: 'mini', type: color, customClass: 'inline-block truncate max-w-[6.25rem] h-[18px]' }
                   },
@@ -177,6 +177,7 @@ export default {
             }
           ]
         ],
+
         tagColorFields: ['tagColor1', 'tagColor2', 'tagColor3']
       },
       operationConfig: {
diff --git a/examples/sites/demos/mobile-first/app/grid/basicUsage-conf.vue b/examples/sites/demos/mobile-first/app/grid/basicUsage-conf.vue
index 644b2cbd0..8f9568e71 100644
--- a/examples/sites/demos/mobile-first/app/grid/basicUsage-conf.vue
+++ b/examples/sites/demos/mobile-first/app/grid/basicUsage-conf.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Grid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid
+    TinyGrid
   },
   data() {
     const tableData = [
@@ -76,6 +76,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       op: {
         editConfig: {
diff --git a/examples/sites/demos/mobile-first/app/grid/column-anchor.vue b/examples/sites/demos/mobile-first/app/grid/column-anchor.vue
index 222a115f4..43f01a5b2 100644
--- a/examples/sites/demos/mobile-first/app/grid/column-anchor.vue
+++ b/examples/sites/demos/mobile-first/app/grid/column-anchor.vue
@@ -63,14 +63,14 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Radio } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyRadio } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyRadio: Radio,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyRadio,
+    TinyGridColumn
   },
   data() {
     return {
@@ -106,6 +106,7 @@ export default {
           ]
         ]
       ],
+
       tableData: [
         {
           id: '1',
diff --git a/examples/sites/demos/mobile-first/app/grid/height-auto.vue b/examples/sites/demos/mobile-first/app/grid/height-auto.vue
index 7789271aa..5ada1d9fe 100644
--- a/examples/sites/demos/mobile-first/app/grid/height-auto.vue
+++ b/examples/sites/demos/mobile-first/app/grid/height-auto.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager, Radio } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyRadio } from '@opentiny/vue'
 
 const total = 300
 const mockData = () => {
@@ -59,9 +59,9 @@ const tableDatas = mockData()
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyRadio: Radio
+    TinyGrid,
+    TinyGridColumn,
+    TinyRadio
   },
   data() {
     return {
@@ -71,7 +71,7 @@ export default {
         contentFields: ['area', 'abc', 'address', 'introduction']
       },
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 60,
diff --git a/examples/sites/demos/mobile-first/app/grid/operation-column.vue b/examples/sites/demos/mobile-first/app/grid/operation-column.vue
index 9c7135a10..ff89bdd40 100644
--- a/examples/sites/demos/mobile-first/app/grid/operation-column.vue
+++ b/examples/sites/demos/mobile-first/app/grid/operation-column.vue
@@ -15,22 +15,22 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal, Radio } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyRadio } from '@opentiny/vue'
 import { IconAreaChart, IconBarChart, IconDotChart, IconLineChart, IconPieChart } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyRadio: Radio
+    TinyGrid,
+    TinyGridColumn,
+    TinyRadio
   },
   methods: {
     clickHandler(e, { row, buttonConfig }) {
-      Modal.message(`点击按钮 - ${row.name} - ${buttonConfig.name}`)
+      TinyModal.message(`点击按钮 - ${row.name} - ${buttonConfig.name}`)
       row.flag = !row.flag
     },
     clickHandler2(e, { row, buttonConfig }) {
-      Modal.message(`点击按钮 - ${row.name} - ${buttonConfig.name}`)
+      TinyModal.message(`点击按钮 - ${row.name} - ${buttonConfig.name}`)
     }
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/grid/toolbar-custom-teleport.vue b/examples/sites/demos/mobile-first/app/grid/toolbar-custom-teleport.vue
index 0dd98c4bb..ba147efdb 100644
--- a/examples/sites/demos/mobile-first/app/grid/toolbar-custom-teleport.vue
+++ b/examples/sites/demos/mobile-first/app/grid/toolbar-custom-teleport.vue
@@ -22,18 +22,18 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar, Tabs, TabItem } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar,
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar,
+    TinyTabs,
+    TinyTabItem
   },
   provide() {
-    return { 'TinyMode': 'mobile-first' }
+    return { TinyMode: 'mobile-first' }
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/auto-fit-container-size.vue b/examples/sites/demos/mobile-first/app/image/auto-fit-container-size.vue
index 04bec3471..569bfde1f 100644
--- a/examples/sites/demos/mobile-first/app/image/auto-fit-container-size.vue
+++ b/examples/sites/demos/mobile-first/app/image/auto-fit-container-size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/basic-usage.vue b/examples/sites/demos/mobile-first/app/image/basic-usage.vue
index ded52a140..bca8e3fef 100644
--- a/examples/sites/demos/mobile-first/app/image/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/image/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/custom-load-failed-text.vue b/examples/sites/demos/mobile-first/app/image/custom-load-failed-text.vue
index a232359ec..c21746ae1 100644
--- a/examples/sites/demos/mobile-first/app/image/custom-load-failed-text.vue
+++ b/examples/sites/demos/mobile-first/app/image/custom-load-failed-text.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/custom-placeholder.vue b/examples/sites/demos/mobile-first/app/image/custom-placeholder.vue
index 1c0e96256..a091dec01 100644
--- a/examples/sites/demos/mobile-first/app/image/custom-placeholder.vue
+++ b/examples/sites/demos/mobile-first/app/image/custom-placeholder.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/lazy-load.vue b/examples/sites/demos/mobile-first/app/image/lazy-load.vue
index a3da332f4..97779c891 100644
--- a/examples/sites/demos/mobile-first/app/image/lazy-load.vue
+++ b/examples/sites/demos/mobile-first/app/image/lazy-load.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/load-error.vue b/examples/sites/demos/mobile-first/app/image/load-error.vue
index 6de8f7782..f5c9854ab 100644
--- a/examples/sites/demos/mobile-first/app/image/load-error.vue
+++ b/examples/sites/demos/mobile-first/app/image/load-error.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Image, Modal } from '@opentiny/vue'
+import { TinyImage, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     errorHandler() {
-      Modal.message({ message: '加载失败触发事件', status: 'info' })
+      TinyModal.message({ message: '加载失败触发事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/image/load-event.vue b/examples/sites/demos/mobile-first/app/image/load-event.vue
index cf7112fac..42b5e8cc6 100644
--- a/examples/sites/demos/mobile-first/app/image/load-event.vue
+++ b/examples/sites/demos/mobile-first/app/image/load-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Image, Modal } from '@opentiny/vue'
+import { TinyImage, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     loadHandler() {
-      Modal.message({ message: '加载成功触发事件', status: 'info' })
+      TinyModal.message({ message: '加载成功触发事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/image/menu-modal-view.vue b/examples/sites/demos/mobile-first/app/image/menu-modal-view.vue
index 0f3020715..df1412888 100644
--- a/examples/sites/demos/mobile-first/app/image/menu-modal-view.vue
+++ b/examples/sites/demos/mobile-first/app/image/menu-modal-view.vue
@@ -39,13 +39,13 @@
 </template>
 
 <script>
-import { ImageViewer, Button, Fullscreen } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton, TinyFullscreen } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button,
-    TinyFullscreen: Fullscreen
+    TinyImageViewer,
+    TinyButton,
+    TinyFullscreen
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/menu-rename.vue b/examples/sites/demos/mobile-first/app/image/menu-rename.vue
index 397cfc497..ce2e58d54 100644
--- a/examples/sites/demos/mobile-first/app/image/menu-rename.vue
+++ b/examples/sites/demos/mobile-first/app/image/menu-rename.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/menu-view.vue b/examples/sites/demos/mobile-first/app/image/menu-view.vue
index 8ffc67dce..a559544a1 100644
--- a/examples/sites/demos/mobile-first/app/image/menu-view.vue
+++ b/examples/sites/demos/mobile-first/app/image/menu-view.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/menu-viewer-bg.vue b/examples/sites/demos/mobile-first/app/image/menu-viewer-bg.vue
index 3132157d4..6e0561cf4 100644
--- a/examples/sites/demos/mobile-first/app/image/menu-viewer-bg.vue
+++ b/examples/sites/demos/mobile-first/app/image/menu-viewer-bg.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/preview-in-dialog.vue b/examples/sites/demos/mobile-first/app/image/preview-in-dialog.vue
index 7e1cb3cd0..e7285cf0f 100644
--- a/examples/sites/demos/mobile-first/app/image/preview-in-dialog.vue
+++ b/examples/sites/demos/mobile-first/app/image/preview-in-dialog.vue
@@ -13,10 +13,10 @@
 </template>
 
 <script>
-import { Button, DialogBox, Image } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyImage } from '@opentiny/vue'
 
 export default {
-  components: { TinyButton: Button, TinyDialogBox: DialogBox, TinyImage: Image },
+  components: { TinyButton, TinyDialogBox, TinyImage },
   data() {
     return {
       visible3: false,
diff --git a/examples/sites/demos/mobile-first/app/image/preview-src-list.vue b/examples/sites/demos/mobile-first/app/image/preview-src-list.vue
index e95507594..7c02a1654 100644
--- a/examples/sites/demos/mobile-first/app/image/preview-src-list.vue
+++ b/examples/sites/demos/mobile-first/app/image/preview-src-list.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/preview-z-index.vue b/examples/sites/demos/mobile-first/app/image/preview-z-index.vue
index 80bbc7f2a..9f7ac4cb8 100644
--- a/examples/sites/demos/mobile-first/app/image/preview-z-index.vue
+++ b/examples/sites/demos/mobile-first/app/image/preview-z-index.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/round.vue b/examples/sites/demos/mobile-first/app/image/round.vue
index 4c98372e2..a94faf499 100644
--- a/examples/sites/demos/mobile-first/app/image/round.vue
+++ b/examples/sites/demos/mobile-first/app/image/round.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/show-hover.vue b/examples/sites/demos/mobile-first/app/image/show-hover.vue
index 7e27fa2b1..1a655c0bb 100644
--- a/examples/sites/demos/mobile-first/app/image/show-hover.vue
+++ b/examples/sites/demos/mobile-first/app/image/show-hover.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/thumbnail-modal-view.vue b/examples/sites/demos/mobile-first/app/image/thumbnail-modal-view.vue
index 33cb1836c..702f18cb6 100644
--- a/examples/sites/demos/mobile-first/app/image/thumbnail-modal-view.vue
+++ b/examples/sites/demos/mobile-first/app/image/thumbnail-modal-view.vue
@@ -39,13 +39,13 @@
 </template>
 
 <script>
-import { ImageViewer, Button, Fullscreen } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton, TinyFullscreen } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button,
-    TinyFullscreen: Fullscreen
+    TinyImageViewer,
+    TinyButton,
+    TinyFullscreen
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/thumbnail-rename.vue b/examples/sites/demos/mobile-first/app/image/thumbnail-rename.vue
index bc9729b8e..486aa95f8 100644
--- a/examples/sites/demos/mobile-first/app/image/thumbnail-rename.vue
+++ b/examples/sites/demos/mobile-first/app/image/thumbnail-rename.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/thumbnail-viewer-bg.vue b/examples/sites/demos/mobile-first/app/image/thumbnail-viewer-bg.vue
index 6d6505119..508753bf1 100644
--- a/examples/sites/demos/mobile-first/app/image/thumbnail-viewer-bg.vue
+++ b/examples/sites/demos/mobile-first/app/image/thumbnail-viewer-bg.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/image/thumbnail.vue b/examples/sites/demos/mobile-first/app/image/thumbnail.vue
index de0b5a1ab..4724182ea 100644
--- a/examples/sites/demos/mobile-first/app/image/thumbnail.vue
+++ b/examples/sites/demos/mobile-first/app/image/thumbnail.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/autocomplete.vue b/examples/sites/demos/mobile-first/app/input/autocomplete.vue
index 903027123..4a88b657b 100644
--- a/examples/sites/demos/mobile-first/app/input/autocomplete.vue
+++ b/examples/sites/demos/mobile-first/app/input/autocomplete.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/autofocus.vue b/examples/sites/demos/mobile-first/app/input/autofocus.vue
index e2d8b51c0..11a08677e 100644
--- a/examples/sites/demos/mobile-first/app/input/autofocus.vue
+++ b/examples/sites/demos/mobile-first/app/input/autofocus.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/autosize.vue b/examples/sites/demos/mobile-first/app/input/autosize.vue
index 2ebb67124..9de3cfc9d 100644
--- a/examples/sites/demos/mobile-first/app/input/autosize.vue
+++ b/examples/sites/demos/mobile-first/app/input/autosize.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/basic-usage.vue b/examples/sites/demos/mobile-first/app/input/basic-usage.vue
index ae4767dd6..a477efb8a 100644
--- a/examples/sites/demos/mobile-first/app/input/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/input/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/clearable.vue b/examples/sites/demos/mobile-first/app/input/clearable.vue
index 974d706f6..9989b70c3 100644
--- a/examples/sites/demos/mobile-first/app/input/clearable.vue
+++ b/examples/sites/demos/mobile-first/app/input/clearable.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/cols.vue b/examples/sites/demos/mobile-first/app/input/cols.vue
index f832586e9..baebfe2e2 100644
--- a/examples/sites/demos/mobile-first/app/input/cols.vue
+++ b/examples/sites/demos/mobile-first/app/input/cols.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/counter.vue b/examples/sites/demos/mobile-first/app/input/counter.vue
index b19b35bea..4dd5e7a62 100644
--- a/examples/sites/demos/mobile-first/app/input/counter.vue
+++ b/examples/sites/demos/mobile-first/app/input/counter.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/custom-class.vue b/examples/sites/demos/mobile-first/app/input/custom-class.vue
index 3209ce67d..ead8cf07c 100644
--- a/examples/sites/demos/mobile-first/app/input/custom-class.vue
+++ b/examples/sites/demos/mobile-first/app/input/custom-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/custom-height.vue b/examples/sites/demos/mobile-first/app/input/custom-height.vue
index 2ac0d3f84..1bfc6c5c8 100644
--- a/examples/sites/demos/mobile-first/app/input/custom-height.vue
+++ b/examples/sites/demos/mobile-first/app/input/custom-height.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/disabled.vue b/examples/sites/demos/mobile-first/app/input/disabled.vue
index 85105edae..7ff4b0e8b 100644
--- a/examples/sites/demos/mobile-first/app/input/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/input/disabled.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/input/display-only-content.vue b/examples/sites/demos/mobile-first/app/input/display-only-content.vue
index 7417e8eb4..e5f25db82 100644
--- a/examples/sites/demos/mobile-first/app/input/display-only-content.vue
+++ b/examples/sites/demos/mobile-first/app/input/display-only-content.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/event-blur.vue b/examples/sites/demos/mobile-first/app/input/event-blur.vue
index e8a49bb69..2e2afa3a8 100644
--- a/examples/sites/demos/mobile-first/app/input/event-blur.vue
+++ b/examples/sites/demos/mobile-first/app/input/event-blur.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     blur() {
-      Modal.message('blur')
+      TinyModal.message('blur')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/input/event-change.vue b/examples/sites/demos/mobile-first/app/input/event-change.vue
index f02a4808e..c96af36d7 100644
--- a/examples/sites/demos/mobile-first/app/input/event-change.vue
+++ b/examples/sites/demos/mobile-first/app/input/event-change.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     change() {
-      Modal.message('change')
+      TinyModal.message('change')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/input/event-clear.vue b/examples/sites/demos/mobile-first/app/input/event-clear.vue
index b7d570166..4d527071d 100644
--- a/examples/sites/demos/mobile-first/app/input/event-clear.vue
+++ b/examples/sites/demos/mobile-first/app/input/event-clear.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     clear() {
-      Modal.message('clear')
+      TinyModal.message('clear')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/input/event-focus.vue b/examples/sites/demos/mobile-first/app/input/event-focus.vue
index 7880d815d..ddbbe3a65 100644
--- a/examples/sites/demos/mobile-first/app/input/event-focus.vue
+++ b/examples/sites/demos/mobile-first/app/input/event-focus.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     focus() {
-      Modal.message('focus')
+      TinyModal.message('focus')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/input/event-input.vue b/examples/sites/demos/mobile-first/app/input/event-input.vue
index 125ff0ae6..7f1d70213 100644
--- a/examples/sites/demos/mobile-first/app/input/event-input.vue
+++ b/examples/sites/demos/mobile-first/app/input/event-input.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     input() {
-      Modal.message('input')
+      TinyModal.message('input')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/input/form.vue b/examples/sites/demos/mobile-first/app/input/form.vue
index e264a03c7..d27fe39ce 100644
--- a/examples/sites/demos/mobile-first/app/input/form.vue
+++ b/examples/sites/demos/mobile-first/app/input/form.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Input, Form } from '@opentiny/vue'
+import { TinyInput, TinyForm } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyInput: Input
+    TinyForm,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/hover-expand-autosize.vue b/examples/sites/demos/mobile-first/app/input/hover-expand-autosize.vue
index 8c44c2b5a..5b90f3a4f 100644
--- a/examples/sites/demos/mobile-first/app/input/hover-expand-autosize.vue
+++ b/examples/sites/demos/mobile-first/app/input/hover-expand-autosize.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/hover-expand.vue b/examples/sites/demos/mobile-first/app/input/hover-expand.vue
index 9b6b9b46f..217d61ef8 100644
--- a/examples/sites/demos/mobile-first/app/input/hover-expand.vue
+++ b/examples/sites/demos/mobile-first/app/input/hover-expand.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/label.vue b/examples/sites/demos/mobile-first/app/input/label.vue
index 105107e21..214255db2 100644
--- a/examples/sites/demos/mobile-first/app/input/label.vue
+++ b/examples/sites/demos/mobile-first/app/input/label.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/mask-disabled.vue b/examples/sites/demos/mobile-first/app/input/mask-disabled.vue
index 806ee0b62..214972f40 100644
--- a/examples/sites/demos/mobile-first/app/input/mask-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/input/mask-disabled.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/mask-display-only.vue b/examples/sites/demos/mobile-first/app/input/mask-display-only.vue
index f0cd21844..0b333d46c 100644
--- a/examples/sites/demos/mobile-first/app/input/mask-display-only.vue
+++ b/examples/sites/demos/mobile-first/app/input/mask-display-only.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/mask.vue b/examples/sites/demos/mobile-first/app/input/mask.vue
index 1a655b211..ee4968cba 100644
--- a/examples/sites/demos/mobile-first/app/input/mask.vue
+++ b/examples/sites/demos/mobile-first/app/input/mask.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/max.vue b/examples/sites/demos/mobile-first/app/input/max.vue
index 6ce5bdd7b..bf38d55b9 100644
--- a/examples/sites/demos/mobile-first/app/input/max.vue
+++ b/examples/sites/demos/mobile-first/app/input/max.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/maxlength.vue b/examples/sites/demos/mobile-first/app/input/maxlength.vue
index 0b81d899c..37d3f44f9 100644
--- a/examples/sites/demos/mobile-first/app/input/maxlength.vue
+++ b/examples/sites/demos/mobile-first/app/input/maxlength.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/method-addMemory.vue b/examples/sites/demos/mobile-first/app/input/method-addMemory.vue
index eb0035ccc..0e5798c74 100644
--- a/examples/sites/demos/mobile-first/app/input/method-addMemory.vue
+++ b/examples/sites/demos/mobile-first/app/input/method-addMemory.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     addMemory(val) {
-      Modal.message({ message: val, status: 'success' })
+      TinyModal.message({ message: val, status: 'success' })
       this.$refs.textMemory.addMemory(val)
     }
   }
diff --git a/examples/sites/demos/mobile-first/app/input/method-blur.vue b/examples/sites/demos/mobile-first/app/input/method-blur.vue
index 275b1152a..1be0f9467 100644
--- a/examples/sites/demos/mobile-first/app/input/method-blur.vue
+++ b/examples/sites/demos/mobile-first/app/input/method-blur.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/method-focus.vue b/examples/sites/demos/mobile-first/app/input/method-focus.vue
index d1bea664f..a42c915b5 100644
--- a/examples/sites/demos/mobile-first/app/input/method-focus.vue
+++ b/examples/sites/demos/mobile-first/app/input/method-focus.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Input, Button } from '@opentiny/vue'
+import { TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input,
-    TinyButton: Button
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/method-select.vue b/examples/sites/demos/mobile-first/app/input/method-select.vue
index 9d84efb68..860275f2c 100644
--- a/examples/sites/demos/mobile-first/app/input/method-select.vue
+++ b/examples/sites/demos/mobile-first/app/input/method-select.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Input, Button } from '@opentiny/vue'
+import { TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input,
-    TinyButton: Button
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/min.vue b/examples/sites/demos/mobile-first/app/input/min.vue
index 72719776f..1514cb7c1 100644
--- a/examples/sites/demos/mobile-first/app/input/min.vue
+++ b/examples/sites/demos/mobile-first/app/input/min.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/name.vue b/examples/sites/demos/mobile-first/app/input/name.vue
index e99035a2d..618e9e3a1 100644
--- a/examples/sites/demos/mobile-first/app/input/name.vue
+++ b/examples/sites/demos/mobile-first/app/input/name.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/placeholder.vue b/examples/sites/demos/mobile-first/app/input/placeholder.vue
index dad7eb89b..bf97eff24 100644
--- a/examples/sites/demos/mobile-first/app/input/placeholder.vue
+++ b/examples/sites/demos/mobile-first/app/input/placeholder.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/prefix-icon.vue b/examples/sites/demos/mobile-first/app/input/prefix-icon.vue
index 45c059607..4cfb8da54 100644
--- a/examples/sites/demos/mobile-first/app/input/prefix-icon.vue
+++ b/examples/sites/demos/mobile-first/app/input/prefix-icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { IconCalendar } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/readonly.vue b/examples/sites/demos/mobile-first/app/input/readonly.vue
index 19fb5fe57..1ea86c6a2 100644
--- a/examples/sites/demos/mobile-first/app/input/readonly.vue
+++ b/examples/sites/demos/mobile-first/app/input/readonly.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/input/resize.vue b/examples/sites/demos/mobile-first/app/input/resize.vue
index 221727003..e6be4bc11 100644
--- a/examples/sites/demos/mobile-first/app/input/resize.vue
+++ b/examples/sites/demos/mobile-first/app/input/resize.vue
@@ -43,11 +43,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/rows.vue b/examples/sites/demos/mobile-first/app/input/rows.vue
index 3d1681b2a..301e44e0a 100644
--- a/examples/sites/demos/mobile-first/app/input/rows.vue
+++ b/examples/sites/demos/mobile-first/app/input/rows.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/show-password.vue b/examples/sites/demos/mobile-first/app/input/show-password.vue
index 93f871916..ecd4222d1 100644
--- a/examples/sites/demos/mobile-first/app/input/show-password.vue
+++ b/examples/sites/demos/mobile-first/app/input/show-password.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/show-word-limit.vue b/examples/sites/demos/mobile-first/app/input/show-word-limit.vue
index cc6722e7a..dcf6e1515 100644
--- a/examples/sites/demos/mobile-first/app/input/show-word-limit.vue
+++ b/examples/sites/demos/mobile-first/app/input/show-word-limit.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/size.vue b/examples/sites/demos/mobile-first/app/input/size.vue
index eb0b58c96..35c2b882e 100644
--- a/examples/sites/demos/mobile-first/app/input/size.vue
+++ b/examples/sites/demos/mobile-first/app/input/size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/slot-append.vue b/examples/sites/demos/mobile-first/app/input/slot-append.vue
index 31c213043..a1a008ea4 100644
--- a/examples/sites/demos/mobile-first/app/input/slot-append.vue
+++ b/examples/sites/demos/mobile-first/app/input/slot-append.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/slot-prefix.vue b/examples/sites/demos/mobile-first/app/input/slot-prefix.vue
index 29a52de6d..6fce0305f 100644
--- a/examples/sites/demos/mobile-first/app/input/slot-prefix.vue
+++ b/examples/sites/demos/mobile-first/app/input/slot-prefix.vue
@@ -9,13 +9,13 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
     IconSearch: IconSearch(),
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/slot-prepend.vue b/examples/sites/demos/mobile-first/app/input/slot-prepend.vue
index 1e8a5088c..c23a4553a 100644
--- a/examples/sites/demos/mobile-first/app/input/slot-prepend.vue
+++ b/examples/sites/demos/mobile-first/app/input/slot-prepend.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/slot-suffix.vue b/examples/sites/demos/mobile-first/app/input/slot-suffix.vue
index 45d8f368a..b862b5ee6 100644
--- a/examples/sites/demos/mobile-first/app/input/slot-suffix.vue
+++ b/examples/sites/demos/mobile-first/app/input/slot-suffix.vue
@@ -9,13 +9,13 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { IconCalendar } from '@opentiny/vue-icon'
 
 export default {
   components: {
     IconCalendar: IconCalendar(),
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/step.vue b/examples/sites/demos/mobile-first/app/input/step.vue
index 0ea10e120..aa3280bc9 100644
--- a/examples/sites/demos/mobile-first/app/input/step.vue
+++ b/examples/sites/demos/mobile-first/app/input/step.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/suffix-icon.vue b/examples/sites/demos/mobile-first/app/input/suffix-icon.vue
index 04b1c4db0..03a549e10 100644
--- a/examples/sites/demos/mobile-first/app/input/suffix-icon.vue
+++ b/examples/sites/demos/mobile-first/app/input/suffix-icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { IconCalendar } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/tabindex.vue b/examples/sites/demos/mobile-first/app/input/tabindex.vue
index 108364a25..f4633e128 100644
--- a/examples/sites/demos/mobile-first/app/input/tabindex.vue
+++ b/examples/sites/demos/mobile-first/app/input/tabindex.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/type.vue b/examples/sites/demos/mobile-first/app/input/type.vue
index 17358115b..03bf5acde 100644
--- a/examples/sites/demos/mobile-first/app/input/type.vue
+++ b/examples/sites/demos/mobile-first/app/input/type.vue
@@ -50,11 +50,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/input/validate-event.vue b/examples/sites/demos/mobile-first/app/input/validate-event.vue
index 09194f9d3..232a8b1b4 100644
--- a/examples/sites/demos/mobile-first/app/input/validate-event.vue
+++ b/examples/sites/demos/mobile-first/app/input/validate-event.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script>
-import { Input, Form, FormItem } from '@opentiny/vue'
+import { TinyInput, TinyForm, TinyFormItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input,
-    TinyForm: Form,
-    TinyFormItem: FormItem
+    TinyInput,
+    TinyForm,
+    TinyFormItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/load-list/basic-usage.vue b/examples/sites/demos/mobile-first/app/load-list/basic-usage.vue
index 436d23464..c2d9ad599 100644
--- a/examples/sites/demos/mobile-first/app/load-list/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/load-list/basic-usage.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import { LoadList } from '@opentiny/vue'
+import { TinyLoadList } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLoadList: LoadList
+    TinyLoadList
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/load-list/delay.vue b/examples/sites/demos/mobile-first/app/load-list/delay.vue
index 648de2085..17a61b912 100644
--- a/examples/sites/demos/mobile-first/app/load-list/delay.vue
+++ b/examples/sites/demos/mobile-first/app/load-list/delay.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import { LoadList } from '@opentiny/vue'
+import { TinyLoadList } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLoadList: LoadList
+    TinyLoadList
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/load-list/disabled.vue b/examples/sites/demos/mobile-first/app/load-list/disabled.vue
index fa7b94807..6e1274dbd 100644
--- a/examples/sites/demos/mobile-first/app/load-list/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/load-list/disabled.vue
@@ -24,12 +24,12 @@
 </template>
 
 <script>
-import { LoadList, Button } from '@opentiny/vue'
+import { TinyLoadList, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLoadList: LoadList,
-    TinyButton: Button
+    TinyLoadList,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/load-list/error-text.vue b/examples/sites/demos/mobile-first/app/load-list/error-text.vue
index a24e15f5b..984ab2d7c 100644
--- a/examples/sites/demos/mobile-first/app/load-list/error-text.vue
+++ b/examples/sites/demos/mobile-first/app/load-list/error-text.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script>
-import { LoadList } from '@opentiny/vue'
+import { TinyLoadList } from '@opentiny/vue'
 
 const fetchSomething = () => Promise.reject('请求失败，点击重新加载')
 
 export default {
   components: {
-    TinyLoadList: LoadList
+    TinyLoadList
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/load-list/pull-refresh.vue b/examples/sites/demos/mobile-first/app/load-list/pull-refresh.vue
index 8655f06f2..3a1ee48cf 100644
--- a/examples/sites/demos/mobile-first/app/load-list/pull-refresh.vue
+++ b/examples/sites/demos/mobile-first/app/load-list/pull-refresh.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { LoadList, PullRefresh } from '@opentiny/vue'
+import { TinyLoadList, TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLoadList: LoadList,
-    TinyPullRefresh: PullRefresh
+    TinyLoadList,
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/load-list/slots.vue b/examples/sites/demos/mobile-first/app/load-list/slots.vue
index 6e77c3c2d..cbbacaa18 100644
--- a/examples/sites/demos/mobile-first/app/load-list/slots.vue
+++ b/examples/sites/demos/mobile-first/app/load-list/slots.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { LoadList, Loading } from '@opentiny/vue'
+import { TinyLoadList, TinyLoading } from '@opentiny/vue'
 
 let index = 0
 const fetchSomething = () => {
@@ -57,10 +57,10 @@ const fetchSomething = () => {
 
 export default {
   components: {
-    TinyLoadList: LoadList
+    TinyLoadList
   },
   directives: {
-    loading: Loading.directive
+    loading: TinyLoading.directive
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/loading/background.vue b/examples/sites/demos/mobile-first/app/loading/background.vue
index 002d5d7b6..d22f0bffd 100644
--- a/examples/sites/demos/mobile-first/app/loading/background.vue
+++ b/examples/sites/demos/mobile-first/app/loading/background.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '自定义背景颜色和透明度',
       target: document.getElementById('boxtwo'),
       background: 'rgba(0, 0, 0, 0.3)',
diff --git a/examples/sites/demos/mobile-first/app/loading/basic-usage.vue b/examples/sites/demos/mobile-first/app/loading/basic-usage.vue
index cec61aeec..f8beee73c 100644
--- a/examples/sites/demos/mobile-first/app/loading/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/loading/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Loading, Button } from '@opentiny/vue'
+import { TinyLoading, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
     }
   },
   mounted() {
-    this.loadingInstance = Loading.service({
+    this.loadingInstance = TinyLoading.service({
       target: document.getElementById('tiny-loading1'),
       tiny_mode: 'mobile-first'
     })
diff --git a/examples/sites/demos/mobile-first/app/loading/body.vue b/examples/sites/demos/mobile-first/app/loading/body.vue
index 634e54483..85f764cf4 100644
--- a/examples/sites/demos/mobile-first/app/loading/body.vue
+++ b/examples/sites/demos/mobile-first/app/loading/body.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script>
-import { Loading, Button } from '@opentiny/vue'
+import { TinyLoading, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   directives: {
-    loading: Loading.directive
+    loading: TinyLoading.directive
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/loading/custom-class.vue b/examples/sites/demos/mobile-first/app/loading/custom-class.vue
index 876b251b4..0cd8164f3 100644
--- a/examples/sites/demos/mobile-first/app/loading/custom-class.vue
+++ b/examples/sites/demos/mobile-first/app/loading/custom-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '自定义loading类名',
       customClass: 'new-loading',
       target: document.getElementById('tiny-loading'),
diff --git a/examples/sites/demos/mobile-first/app/loading/fullscreen.vue b/examples/sites/demos/mobile-first/app/loading/fullscreen.vue
index d0c6a863d..2bf0ab721 100644
--- a/examples/sites/demos/mobile-first/app/loading/fullscreen.vue
+++ b/examples/sites/demos/mobile-first/app/loading/fullscreen.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script>
-import { Button, Loading } from '@opentiny/vue'
+import { TinyButton, TinyLoading } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   directives: {
-    loading: Loading.directive
+    loading: TinyLoading.directive
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/loading/loading-size.vue b/examples/sites/demos/mobile-first/app/loading/loading-size.vue
index e836dea25..ee720d498 100644
--- a/examples/sites/demos/mobile-first/app/loading/loading-size.vue
+++ b/examples/sites/demos/mobile-first/app/loading/loading-size.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   data() {
@@ -12,7 +12,7 @@ export default {
     }
   },
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       lock: true,
       text: '加载中',
       target: '#boxeight', // 可传DOM节点对应ID名或类名字符串，也可以传入DOM对象，例如：domObj，let domObj = document.getElementById('boxeight').
diff --git a/examples/sites/demos/mobile-first/app/loading/loading-tip-text.vue b/examples/sites/demos/mobile-first/app/loading/loading-tip-text.vue
index 3dae87942..0d979ad87 100644
--- a/examples/sites/demos/mobile-first/app/loading/loading-tip-text.vue
+++ b/examples/sites/demos/mobile-first/app/loading/loading-tip-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '加载中',
       tiny_mode: 'mobile-first',
       target: document.getElementById('boxone')
diff --git a/examples/sites/demos/mobile-first/app/loading/spinner.vue b/examples/sites/demos/mobile-first/app/loading/spinner.vue
index ccf568452..5129e6673 100644
--- a/examples/sites/demos/mobile-first/app/loading/spinner.vue
+++ b/examples/sites/demos/mobile-first/app/loading/spinner.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 import { IconLoading } from '@opentiny/vue-icon'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '自定义loading图标',
       spinner: IconLoading(), // 添加自定义类名，动画需要自己实现
       target: document.getElementById('boxseven'),
diff --git a/examples/sites/demos/mobile-first/app/menu/actived-keys.vue b/examples/sites/demos/mobile-first/app/menu/actived-keys.vue
index 2c178e025..7d3e4515c 100644
--- a/examples/sites/demos/mobile-first/app/menu/actived-keys.vue
+++ b/examples/sites/demos/mobile-first/app/menu/actived-keys.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Menu } from '@opentiny/vue'
+import { TinyMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/menu/basic-usage.vue b/examples/sites/demos/mobile-first/app/menu/basic-usage.vue
index 78e9bc323..32fffe555 100644
--- a/examples/sites/demos/mobile-first/app/menu/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/menu/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Menu } from '@opentiny/vue'
+import { TinyMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/menu/empty-text.vue b/examples/sites/demos/mobile-first/app/menu/empty-text.vue
index 01d89e396..0f075e842 100644
--- a/examples/sites/demos/mobile-first/app/menu/empty-text.vue
+++ b/examples/sites/demos/mobile-first/app/menu/empty-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Menu } from '@opentiny/vue'
+import { TinyMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/menu/event-current-change.vue b/examples/sites/demos/mobile-first/app/menu/event-current-change.vue
index 550bf77d7..5d1c09564 100644
--- a/examples/sites/demos/mobile-first/app/menu/event-current-change.vue
+++ b/examples/sites/demos/mobile-first/app/menu/event-current-change.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Menu, Modal } from '@opentiny/vue'
+import { TinyMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
@@ -173,7 +173,7 @@ export default {
   },
   methods: {
     currentChange(data) {
-      Modal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
+      TinyModal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/menu/event-node-click.vue b/examples/sites/demos/mobile-first/app/menu/event-node-click.vue
index 15b4f88ca..ebc042951 100644
--- a/examples/sites/demos/mobile-first/app/menu/event-node-click.vue
+++ b/examples/sites/demos/mobile-first/app/menu/event-node-click.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Menu, Modal } from '@opentiny/vue'
+import { TinyMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
@@ -173,7 +173,7 @@ export default {
   },
   methods: {
     handleNodeClick(data) {
-      Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
+      TinyModal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/menu/expand-all.vue b/examples/sites/demos/mobile-first/app/menu/expand-all.vue
index 9ffa3cdaa..f15fbe481 100644
--- a/examples/sites/demos/mobile-first/app/menu/expand-all.vue
+++ b/examples/sites/demos/mobile-first/app/menu/expand-all.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Menu } from '@opentiny/vue'
+import { TinyMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/menu/expanded-keys.vue b/examples/sites/demos/mobile-first/app/menu/expanded-keys.vue
index 15dbaed01..b56e7350d 100644
--- a/examples/sites/demos/mobile-first/app/menu/expanded-keys.vue
+++ b/examples/sites/demos/mobile-first/app/menu/expanded-keys.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Menu } from '@opentiny/vue'
+import { TinyMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/menu/filter-node.vue b/examples/sites/demos/mobile-first/app/menu/filter-node.vue
index a2f13f7bc..7535bf420 100644
--- a/examples/sites/demos/mobile-first/app/menu/filter-node.vue
+++ b/examples/sites/demos/mobile-first/app/menu/filter-node.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Menu } from '@opentiny/vue'
+import { TinyMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/menu/only-check-children.vue b/examples/sites/demos/mobile-first/app/menu/only-check-children.vue
index 6492acd9d..8a5248f6a 100644
--- a/examples/sites/demos/mobile-first/app/menu/only-check-children.vue
+++ b/examples/sites/demos/mobile-first/app/menu/only-check-children.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Menu } from '@opentiny/vue'
+import { TinyMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/menu/with-icon.vue b/examples/sites/demos/mobile-first/app/menu/with-icon.vue
index 3eb7bf38c..819ad00fe 100644
--- a/examples/sites/demos/mobile-first/app/menu/with-icon.vue
+++ b/examples/sites/demos/mobile-first/app/menu/with-icon.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Menu } from '@opentiny/vue'
+import { TinyMenu } from '@opentiny/vue'
 import { IconPlusCircle, IconPlusSquare, IconPreChecked, IconNode, IconNew } from '@opentiny/vue-icon'
 export default {
   components: {
-    TinyMenu: Menu
+    TinyMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/message/base.vue b/examples/sites/demos/mobile-first/app/message/base.vue
index abcf43dcc..61dee3756 100644
--- a/examples/sites/demos/mobile-first/app/message/base.vue
+++ b/examples/sites/demos/mobile-first/app/message/base.vue
@@ -5,15 +5,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     messageClick() {
-      Modal.message('message 提示框')
+      TinyModal.message('message 提示框')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/message/duration.vue b/examples/sites/demos/mobile-first/app/message/duration.vue
index 06c5c26c6..ab6deed1f 100644
--- a/examples/sites/demos/mobile-first/app/message/duration.vue
+++ b/examples/sites/demos/mobile-first/app/message/duration.vue
@@ -7,25 +7,25 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Modal.message('默认3000ms后自动关闭提示框')
+      TinyModal.message('默认3000ms后自动关闭提示框')
     },
     successClick() {
-      Modal.message({
+      TinyModal.message({
         message: '500ms后自动关闭提示框',
         status: 'success',
         duration: '500'
       })
     },
     errorClick() {
-      Modal.message({
+      TinyModal.message({
         message: '5000ms后自动关闭提示框',
         status: 'error',
         duration: '5000'
diff --git a/examples/sites/demos/mobile-first/app/message/id.vue b/examples/sites/demos/mobile-first/app/message/id.vue
index 7c1cff617..2cc7cb685 100644
--- a/examples/sites/demos/mobile-first/app/message/id.vue
+++ b/examples/sites/demos/mobile-first/app/message/id.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.message({ message: '不允许重复点击', id: 'unique' })
+      TinyModal.message({ message: '不允许重复点击', id: 'unique' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/message/status.vue b/examples/sites/demos/mobile-first/app/message/status.vue
index 88515cb34..f61624022 100644
--- a/examples/sites/demos/mobile-first/app/message/status.vue
+++ b/examples/sites/demos/mobile-first/app/message/status.vue
@@ -8,24 +8,24 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Modal.message({ message: '基本提示图标', status: 'info', showClose: true })
+      TinyModal.message({ message: '基本提示图标', status: 'info', showClose: true })
     },
     successClick() {
-      Modal.message({ message: '成功提示图标', status: 'success' })
+      TinyModal.message({ message: '成功提示图标', status: 'success' })
     },
     warningClick() {
-      Modal.message({ message: '警告提示图标', status: 'warning' })
+      TinyModal.message({ message: '警告提示图标', status: 'warning' })
     },
     errorClick() {
-      Modal.message({ message: '错误提示图标', status: 'error' })
+      TinyModal.message({ message: '错误提示图标', status: 'error' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/base.vue b/examples/sites/demos/mobile-first/app/modal/base.vue
index 5090df588..2483a6025 100644
--- a/examples/sites/demos/mobile-first/app/modal/base.vue
+++ b/examples/sites/demos/mobile-first/app/modal/base.vue
@@ -16,31 +16,31 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     successClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '密码已经修改成功，为保障信息安全，建议每30天修改1次密码。',
         title: '成功提示',
         status: 'success'
       })
     },
     errorClick() {
-      Modal.alert({ message: '共提交12张表单，成功10张，失败2张。', title: '未完成', status: 'error' })
+      TinyModal.alert({ message: '共提交12张表单，成功10张，失败2张。', title: '未完成', status: 'error' })
     },
     confirmClick() {
-      Modal.confirm({ message: '更新大约需要30分钟，确定立即开始吗？', title: '更新确认' })
+      TinyModal.confirm({ message: '更新大约需要30分钟，确定立即开始吗？', title: '更新确认' })
     },
     warnningClick() {
-      Modal.alert({ message: '删除后数据不可恢复，确定删除吗？', title: '删除确认', status: 'warning' })
+      TinyModal.alert({ message: '删除后数据不可恢复，确定删除吗？', title: '删除确认', status: 'warning' })
     },
     popClickRef() {
-      Modal.popconfirm({
+      TinyModal.popconfirm({
         title: '这是气泡标题',
         message: '这是气泡确认框提示内容文本描述，这是两行的样是两行的样式，内容很长很长',
         reference: this.$refs.popRef.$el,
@@ -60,7 +60,7 @@ export default {
       })
     },
     popClickTarget(event) {
-      Modal.popconfirm({
+      TinyModal.popconfirm({
         title: '这是气泡标题',
         message: '这是气泡确认框提示内容文本描述，这是两行的样是两行的样式，内容很长很长',
         reference: event.currentTarget,
@@ -80,7 +80,7 @@ export default {
       })
     },
     popInfoClick() {
-      Modal.popconfirm({
+      TinyModal.popconfirm({
         type: 'info',
         title: '这是提示气泡',
         message: '内容很短',
@@ -90,7 +90,7 @@ export default {
       })
     },
     popWarningClick() {
-      Modal.popconfirm({
+      TinyModal.popconfirm({
         type: 'warning',
         title: '这是警告气泡',
         message: '内容很短',
diff --git a/examples/sites/demos/mobile-first/app/modal/before-close.vue b/examples/sites/demos/mobile-first/app/modal/before-close.vue
index 992f464e7..e9c903625 100644
--- a/examples/sites/demos/mobile-first/app/modal/before-close.vue
+++ b/examples/sites/demos/mobile-first/app/modal/before-close.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Radio, Modal, Button } from '@opentiny/vue'
+import { TinyRadio, TinyModal, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyButton: Button
+    TinyRadio,
+    TinyButton
   },
   data() {
     return {
@@ -46,13 +46,13 @@ export default {
 
       switch (this.value) {
         case 'message':
-          method = Modal.message
+          method = TinyModal.message
           break
         case 'confirm':
-          method = Modal.confirm
+          method = TinyModal.confirm
           break
         case 'alert':
-          method = Modal.alert
+          method = TinyModal.alert
           break
       }
 
diff --git a/examples/sites/demos/mobile-first/app/modal/cancel-event.vue b/examples/sites/demos/mobile-first/app/modal/cancel-event.vue
index 7a085652b..77a54b5bb 100644
--- a/examples/sites/demos/mobile-first/app/modal/cancel-event.vue
+++ b/examples/sites/demos/mobile-first/app/modal/cancel-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     cancelClick() {
-      Modal.message({ message: '点击取消按钮时触发事件' })
+      TinyModal.message({ message: '点击取消按钮时触发事件' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/close-event.vue b/examples/sites/demos/mobile-first/app/modal/close-event.vue
index e223ff32a..e46c4f1f0 100644
--- a/examples/sites/demos/mobile-first/app/modal/close-event.vue
+++ b/examples/sites/demos/mobile-first/app/modal/close-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     closeClick() {
-      Modal.message({ message: '点击关闭按钮时触发事件' })
+      TinyModal.message({ message: '点击关闭按钮时触发事件' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/confirm-event.vue b/examples/sites/demos/mobile-first/app/modal/confirm-event.vue
index b04955487..809c052ca 100644
--- a/examples/sites/demos/mobile-first/app/modal/confirm-event.vue
+++ b/examples/sites/demos/mobile-first/app/modal/confirm-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     confirmClick() {
-      Modal.message({ message: '点击确定按钮时触发事件' })
+      TinyModal.message({ message: '点击确定按钮时触发事件' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/div-button-content.vue b/examples/sites/demos/mobile-first/app/modal/div-button-content.vue
index 774c857a9..f7c92a27d 100644
--- a/examples/sites/demos/mobile-first/app/modal/div-button-content.vue
+++ b/examples/sites/demos/mobile-first/app/modal/div-button-content.vue
@@ -6,15 +6,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '基本提示框',
         title: '基本标题',
         confirmContent: '自定义确认',
@@ -22,7 +22,7 @@ export default {
       })
     },
     successClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '密码已经修改成功，为保障信息安全，建议每30天修改1次密码。',
         title: '成功提示',
         status: 'success'
diff --git a/examples/sites/demos/mobile-first/app/modal/duration.vue b/examples/sites/demos/mobile-first/app/modal/duration.vue
index a5e006bda..38eb7bdc0 100644
--- a/examples/sites/demos/mobile-first/app/modal/duration.vue
+++ b/examples/sites/demos/mobile-first/app/modal/duration.vue
@@ -7,25 +7,25 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Modal.message({ message: '默认3000ms后自动关闭提示框' })
+      TinyModal.message({ message: '默认3000ms后自动关闭提示框' })
     },
     successClick() {
-      Modal.message({
+      TinyModal.message({
         message: '500ms后自动关闭提示框',
         status: 'success',
         duration: '500'
       })
     },
     errorClick() {
-      Modal.message({
+      TinyModal.message({
         message: '5000ms后自动关闭提示框',
         status: 'error',
         duration: '5000'
diff --git a/examples/sites/demos/mobile-first/app/modal/esc-closable.vue b/examples/sites/demos/mobile-first/app/modal/esc-closable.vue
index c1447490c..1c5adefa9 100644
--- a/examples/sites/demos/mobile-first/app/modal/esc-closable.vue
+++ b/examples/sites/demos/mobile-first/app/modal/esc-closable.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '按 Esc 键可以关闭', escClosable: true })
+      TinyModal.alert({ message: '按 Esc 键可以关闭', escClosable: true })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/footer-slot.vue b/examples/sites/demos/mobile-first/app/modal/footer-slot.vue
index 352376169..e777d4584 100644
--- a/examples/sites/demos/mobile-first/app/modal/footer-slot.vue
+++ b/examples/sites/demos/mobile-first/app/modal/footer-slot.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/modal/fullscreen.vue b/examples/sites/demos/mobile-first/app/modal/fullscreen.vue
index 6a505d879..e6096893f 100644
--- a/examples/sites/demos/mobile-first/app/modal/fullscreen.vue
+++ b/examples/sites/demos/mobile-first/app/modal/fullscreen.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '最大化显示', fullscreen: true })
+      TinyModal.alert({ message: '最大化显示', fullscreen: true })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/grid.vue b/examples/sites/demos/mobile-first/app/modal/grid.vue
index 26bdf5c7c..25baedd70 100644
--- a/examples/sites/demos/mobile-first/app/modal/grid.vue
+++ b/examples/sites/demos/mobile-first/app/modal/grid.vue
@@ -18,14 +18,14 @@
 </template>
 
 <script>
-import { Button, Modal, Grid, GridColumn } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButton,
+    TinyModal,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/modal/hide-event.vue b/examples/sites/demos/mobile-first/app/modal/hide-event.vue
index 162dee51c..413e526da 100644
--- a/examples/sites/demos/mobile-first/app/modal/hide-event.vue
+++ b/examples/sites/demos/mobile-first/app/modal/hide-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     hideClick() {
-      Modal.message({ message: '在窗口关闭时会触发事件' })
+      TinyModal.message({ message: '在窗口关闭时会触发事件' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/id.vue b/examples/sites/demos/mobile-first/app/modal/id.vue
index 7c1cff617..2cc7cb685 100644
--- a/examples/sites/demos/mobile-first/app/modal/id.vue
+++ b/examples/sites/demos/mobile-first/app/modal/id.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.message({ message: '不允许重复点击', id: 'unique' })
+      TinyModal.message({ message: '不允许重复点击', id: 'unique' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/lock-scroll.vue b/examples/sites/demos/mobile-first/app/modal/lock-scroll.vue
index 9921a341a..8933579d6 100644
--- a/examples/sites/demos/mobile-first/app/modal/lock-scroll.vue
+++ b/examples/sites/demos/mobile-first/app/modal/lock-scroll.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '不锁住滚动条不要遮罩层',
         lockScroll: false,
         mask: false
diff --git a/examples/sites/demos/mobile-first/app/modal/lock-view.vue b/examples/sites/demos/mobile-first/app/modal/lock-view.vue
index 31d88f37d..c53854401 100644
--- a/examples/sites/demos/mobile-first/app/modal/lock-view.vue
+++ b/examples/sites/demos/mobile-first/app/modal/lock-view.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '不锁界面不要遮罩层',
         lockView: false,
         mask: false
diff --git a/examples/sites/demos/mobile-first/app/modal/mask-closable.vue b/examples/sites/demos/mobile-first/app/modal/mask-closable.vue
index 41f708f3d..052260ecc 100644
--- a/examples/sites/demos/mobile-first/app/modal/mask-closable.vue
+++ b/examples/sites/demos/mobile-first/app/modal/mask-closable.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '点击遮罩层可以关闭', maskClosable: true })
+      TinyModal.alert({ message: '点击遮罩层可以关闭', maskClosable: true })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/message-jsx.vue b/examples/sites/demos/mobile-first/app/modal/message-jsx.vue
index 568bc9a0d..8751ed0a6 100644
--- a/examples/sites/demos/mobile-first/app/modal/message-jsx.vue
+++ b/examples/sites/demos/mobile-first/app/modal/message-jsx.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Radio, Modal, Button } from '@opentiny/vue'
+import { TinyRadio, TinyModal, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyButton: Button
+    TinyRadio,
+    TinyButton
   },
   data() {
     return {
@@ -44,13 +44,13 @@ export default {
 
       switch (this.value) {
         case 'message':
-          method = Modal.message
+          method = TinyModal.message
           break
         case 'confirm':
-          method = Modal.confirm
+          method = TinyModal.confirm
           break
         case 'alert':
-          method = Modal.alert
+          method = TinyModal.alert
           break
       }
 
@@ -72,27 +72,27 @@ export default {
         ],
         events: {
           show() {
-            Modal.message('show')
+            TinyModal.message('show')
           },
           hide() {
-            Modal.message('hide')
+            TinyModal.message('hide')
           },
           close() {
-            Modal.message('close')
+            TinyModal.message('close')
           },
           confirm() {
-            Modal.message('confirm')
+            TinyModal.message('confirm')
           },
           cancel() {
-            Modal.message('cancel')
+            TinyModal.message('cancel')
           }
         }
       }).then((type) => {
-        Modal.message('关闭就会触发，' + type)
+        TinyModal.message('关闭就会触发，' + type)
       })
     },
     showDialog() {
-      Modal.alert({
+      TinyModal.alert({
         status: 'error',
         title: '错误提示',
         message: '嵌套弹出框'
diff --git a/examples/sites/demos/mobile-first/app/modal/message.vue b/examples/sites/demos/mobile-first/app/modal/message.vue
index bcf1371e4..a98a660de 100644
--- a/examples/sites/demos/mobile-first/app/modal/message.vue
+++ b/examples/sites/demos/mobile-first/app/modal/message.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '自定义提示框的内容' })
+      TinyModal.alert({ message: '自定义提示框的内容' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/min-height.vue b/examples/sites/demos/mobile-first/app/modal/min-height.vue
index 77026a6f4..3e92222c4 100644
--- a/examples/sites/demos/mobile-first/app/modal/min-height.vue
+++ b/examples/sites/demos/mobile-first/app/modal/min-height.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '提示框拖动最小高度为300',
         resize: true,
         minHeight: 300
diff --git a/examples/sites/demos/mobile-first/app/modal/min-width.vue b/examples/sites/demos/mobile-first/app/modal/min-width.vue
index 9f3da5ff4..9259c729b 100644
--- a/examples/sites/demos/mobile-first/app/modal/min-width.vue
+++ b/examples/sites/demos/mobile-first/app/modal/min-width.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '提示框拖动最小宽度为700',
         resize: true,
         minWidth: 700
diff --git a/examples/sites/demos/mobile-first/app/modal/resize.vue b/examples/sites/demos/mobile-first/app/modal/resize.vue
index 127e355ae..709ff1db8 100644
--- a/examples/sites/demos/mobile-first/app/modal/resize.vue
+++ b/examples/sites/demos/mobile-first/app/modal/resize.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '可以拖动调整窗口大小',
         resize: true,
         height: 188,
diff --git a/examples/sites/demos/mobile-first/app/modal/show-event.vue b/examples/sites/demos/mobile-first/app/modal/show-event.vue
index b13bd1cbc..ebc6fed1c 100644
--- a/examples/sites/demos/mobile-first/app/modal/show-event.vue
+++ b/examples/sites/demos/mobile-first/app/modal/show-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     showClick() {
-      Modal.message({ message: '在窗口显示时触发事件' })
+      TinyModal.message({ message: '在窗口显示时触发事件' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/showFooter.vue b/examples/sites/demos/mobile-first/app/modal/showFooter.vue
index 594e8da09..7d721112f 100644
--- a/examples/sites/demos/mobile-first/app/modal/showFooter.vue
+++ b/examples/sites/demos/mobile-first/app/modal/showFooter.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '不显示底部', showFooter: false })
+      TinyModal.alert({ message: '不显示底部', showFooter: false })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/showHeader.vue b/examples/sites/demos/mobile-first/app/modal/showHeader.vue
index c420ceabf..92a4c81dd 100644
--- a/examples/sites/demos/mobile-first/app/modal/showHeader.vue
+++ b/examples/sites/demos/mobile-first/app/modal/showHeader.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '不显示头部', showHeader: false })
+      TinyModal.alert({ message: '不显示头部', showHeader: false })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/status.vue b/examples/sites/demos/mobile-first/app/modal/status.vue
index 5cd983a0c..57bb4afe4 100644
--- a/examples/sites/demos/mobile-first/app/modal/status.vue
+++ b/examples/sites/demos/mobile-first/app/modal/status.vue
@@ -10,27 +10,27 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Modal.message({ message: '基本提示图标', status: 'info' })
+      TinyModal.message({ message: '基本提示图标', status: 'info' })
     },
     successClick() {
-      Modal.message({ message: '成功提示图标', status: 'success' })
+      TinyModal.message({ message: '成功提示图标', status: 'success' })
     },
     warningClick() {
-      Modal.message({ message: '警告提示图标', status: 'warning' })
+      TinyModal.message({ message: '警告提示图标', status: 'warning' })
     },
     errorClick() {
-      Modal.message({ message: '错误提示图标', status: 'error' })
+      TinyModal.message({ message: '错误提示图标', status: 'error' })
     },
     loadingClick() {
-      Modal.message({ message: '加载提示图标', status: 'loading' })
+      TinyModal.message({ message: '加载提示图标', status: 'loading' })
     },
     statusCommonpentClick() {
       const IconComp = {
@@ -40,7 +40,7 @@ export default {
           return {}
         }
       }
-      Modal.message({ message: 'status 为自定义组件', status: IconComp })
+      TinyModal.message({ message: 'status 为自定义组件', status: IconComp })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/title.vue b/examples/sites/demos/mobile-first/app/modal/title.vue
index a97f4aa3b..bae893fe3 100644
--- a/examples/sites/demos/mobile-first/app/modal/title.vue
+++ b/examples/sites/demos/mobile-first/app/modal/title.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '自定义标题', title: '自定义标题' })
+      TinyModal.alert({ message: '自定义标题', title: '自定义标题' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/type.vue b/examples/sites/demos/mobile-first/app/modal/type.vue
index 223bc28eb..04983dd20 100644
--- a/examples/sites/demos/mobile-first/app/modal/type.vue
+++ b/examples/sites/demos/mobile-first/app/modal/type.vue
@@ -7,21 +7,21 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     alertClick() {
-      Modal.alert('alert 弹框', '弹框')
+      TinyModal.alert('alert 弹框', '弹框')
     },
     messageClick() {
-      Modal.message('message 提示框')
+      TinyModal.message('message 提示框')
     },
     confirmClick() {
-      Modal.confirm('您确定要删除吗？', '确定框')
+      TinyModal.confirm('您确定要删除吗？', '确定框')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/value.vue b/examples/sites/demos/mobile-first/app/modal/value.vue
index 9d1e3580f..36862fcbe 100644
--- a/examples/sites/demos/mobile-first/app/modal/value.vue
+++ b/examples/sites/demos/mobile-first/app/modal/value.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/modal/zIndex.vue b/examples/sites/demos/mobile-first/app/modal/zIndex.vue
index f03864359..9204e9a0f 100644
--- a/examples/sites/demos/mobile-first/app/modal/zIndex.vue
+++ b/examples/sites/demos/mobile-first/app/modal/zIndex.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: 'zIndex的值为500', zIndex: 500 })
+      TinyModal.alert({ message: 'zIndex的值为500', zIndex: 500 })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/modal/zoom-event.vue b/examples/sites/demos/mobile-first/app/modal/zoom-event.vue
index 180225e3a..03cc026a1 100644
--- a/examples/sites/demos/mobile-first/app/modal/zoom-event.vue
+++ b/examples/sites/demos/mobile-first/app/modal/zoom-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     zoomClick() {
-      Modal.message({ message: '窗口缩放时触发事件' })
+      TinyModal.message({ message: '窗口缩放时触发事件' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/numeric/about-step.vue b/examples/sites/demos/mobile-first/app/numeric/about-step.vue
index 47115e578..1ab4e60ed 100644
--- a/examples/sites/demos/mobile-first/app/numeric/about-step.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/about-step.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/numeric/allow-empty.vue b/examples/sites/demos/mobile-first/app/numeric/allow-empty.vue
index 8a2fe8a6d..b8c7d4629 100644
--- a/examples/sites/demos/mobile-first/app/numeric/allow-empty.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/allow-empty.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/numeric/basic-usage.vue b/examples/sites/demos/mobile-first/app/numeric/basic-usage.vue
index be45bcd33..a4e7127fc 100644
--- a/examples/sites/demos/mobile-first/app/numeric/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/numeric/blur-event.vue b/examples/sites/demos/mobile-first/app/numeric/blur-event.vue
index 01338666f..3370756cd 100644
--- a/examples/sites/demos/mobile-first/app/numeric/blur-event.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/blur-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     Eblur() {
-      Modal.message({ message: 'blur 事件', status: 'info' })
+      TinyModal.message({ message: 'blur 事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/numeric/change-event.vue b/examples/sites/demos/mobile-first/app/numeric/change-event.vue
index c87e8a816..72edd8870 100644
--- a/examples/sites/demos/mobile-first/app/numeric/change-event.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/change-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     Echange(newVal, oldVal) {
-      Modal.message({
+      TinyModal.message({
         message: '新值：' + newVal + '，旧值：' + oldVal,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/numeric/controls.vue b/examples/sites/demos/mobile-first/app/numeric/controls.vue
index a0707f769..9f09374e0 100644
--- a/examples/sites/demos/mobile-first/app/numeric/controls.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/controls.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/numeric/dynamic-disabled.vue b/examples/sites/demos/mobile-first/app/numeric/dynamic-disabled.vue
index 5778ee91c..e1b418546 100644
--- a/examples/sites/demos/mobile-first/app/numeric/dynamic-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/dynamic-disabled.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/numeric/empty-value-composition-api.vue b/examples/sites/demos/mobile-first/app/numeric/empty-value-composition-api.vue
index 5305dfb4c..8d7126492 100644
--- a/examples/sites/demos/mobile-first/app/numeric/empty-value-composition-api.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/empty-value-composition-api.vue
@@ -4,12 +4,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const step = ref(2)
 const stepNum = ref(1)
 
 function onChange(val, oldVal) {
-  Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+  TinyModal.message({ message: `${val} ${oldVal}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/numeric/empty-value.vue b/examples/sites/demos/mobile-first/app/numeric/empty-value.vue
index d724c3717..bb6414f55 100644
--- a/examples/sites/demos/mobile-first/app/numeric/empty-value.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/empty-value.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     onChange(val, oldVal) {
-      Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+      TinyModal.message({ message: `${val} ${oldVal}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/numeric/focus-event.vue b/examples/sites/demos/mobile-first/app/numeric/focus-event.vue
index 78548e458..6b47077e3 100644
--- a/examples/sites/demos/mobile-first/app/numeric/focus-event.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/focus-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     Efocus() {
-      Modal.message({ message: 'focus 事件', status: 'info' })
+      TinyModal.message({ message: 'focus 事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/numeric/max-min.vue b/examples/sites/demos/mobile-first/app/numeric/max-min.vue
index 55c1fd040..ed6fb6db9 100644
--- a/examples/sites/demos/mobile-first/app/numeric/max-min.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/max-min.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/numeric/numeric-size.vue b/examples/sites/demos/mobile-first/app/numeric/numeric-size.vue
index 4c7306620..dcf70a420 100644
--- a/examples/sites/demos/mobile-first/app/numeric/numeric-size.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/numeric-size.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/numeric/unit.vue b/examples/sites/demos/mobile-first/app/numeric/unit.vue
index 9126438d8..7890e7f77 100644
--- a/examples/sites/demos/mobile-first/app/numeric/unit.vue
+++ b/examples/sites/demos/mobile-first/app/numeric/unit.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pager/basic-usage.vue b/examples/sites/demos/mobile-first/app/pager/basic-usage.vue
index 95ef3891f..b5e64e1d8 100644
--- a/examples/sites/demos/mobile-first/app/pager/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/pager/basic-usage.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/pager/before-page-change.vue b/examples/sites/demos/mobile-first/app/pager/before-page-change.vue
index bcbb3b25c..3156598ed 100644
--- a/examples/sites/demos/mobile-first/app/pager/before-page-change.vue
+++ b/examples/sites/demos/mobile-first/app/pager/before-page-change.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Pager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   methods: {
     onBeforePageChange(param) {
       const { callback, rollback } = param
-      Modal.confirm('您确定要放弃当前页的修改吗？').then((res) => {
+      TinyModal.confirm('您确定要放弃当前页的修改吗？').then((res) => {
         if (res === 'confirm') {
           callback && callback()
         } else {
diff --git a/examples/sites/demos/mobile-first/app/pager/current-change.vue b/examples/sites/demos/mobile-first/app/pager/current-change.vue
index 70a2a6c82..ec7123aa8 100644
--- a/examples/sites/demos/mobile-first/app/pager/current-change.vue
+++ b/examples/sites/demos/mobile-first/app/pager/current-change.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Pager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     handleCurrentChange(val) {
-      Modal.message({
+      TinyModal.message({
         message: `current-change 事件，当前页: ${val}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/pager/current-page.vue b/examples/sites/demos/mobile-first/app/pager/current-page.vue
index 321ea4c86..5c544a1be 100644
--- a/examples/sites/demos/mobile-first/app/pager/current-page.vue
+++ b/examples/sites/demos/mobile-first/app/pager/current-page.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/pager/custom-next-prev-text.vue b/examples/sites/demos/mobile-first/app/pager/custom-next-prev-text.vue
index 7c7337e86..d12ae703b 100644
--- a/examples/sites/demos/mobile-first/app/pager/custom-next-prev-text.vue
+++ b/examples/sites/demos/mobile-first/app/pager/custom-next-prev-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/pager/hide-on-single-page.vue b/examples/sites/demos/mobile-first/app/pager/hide-on-single-page.vue
index 7bdf8c4d6..c42a2ace6 100644
--- a/examples/sites/demos/mobile-first/app/pager/hide-on-single-page.vue
+++ b/examples/sites/demos/mobile-first/app/pager/hide-on-single-page.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/pager/next-click.vue b/examples/sites/demos/mobile-first/app/pager/next-click.vue
index 9ca1ff50e..e9e9b9b78 100644
--- a/examples/sites/demos/mobile-first/app/pager/next-click.vue
+++ b/examples/sites/demos/mobile-first/app/pager/next-click.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Pager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     nextClick(val) {
-      Modal.message({
+      TinyModal.message({
         message: `next-click 事件，当前页: ${val}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/pager/page-count.vue b/examples/sites/demos/mobile-first/app/pager/page-count.vue
index 2def35b89..5ece4dd2b 100644
--- a/examples/sites/demos/mobile-first/app/pager/page-count.vue
+++ b/examples/sites/demos/mobile-first/app/pager/page-count.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/pager/page-size.vue b/examples/sites/demos/mobile-first/app/pager/page-size.vue
index 9478aebb1..433c89935 100644
--- a/examples/sites/demos/mobile-first/app/pager/page-size.vue
+++ b/examples/sites/demos/mobile-first/app/pager/page-size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/pager/prev-click.vue b/examples/sites/demos/mobile-first/app/pager/prev-click.vue
index 14c382ab6..b3363de0e 100644
--- a/examples/sites/demos/mobile-first/app/pager/prev-click.vue
+++ b/examples/sites/demos/mobile-first/app/pager/prev-click.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Pager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     prevClick(val) {
-      Modal.message({
+      TinyModal.message({
         message: `prev-click 事件，当前页: ${val}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/popconfirm/basic-usage.vue b/examples/sites/demos/mobile-first/app/popconfirm/basic-usage.vue
index 30aa3d972..869189262 100644
--- a/examples/sites/demos/mobile-first/app/popconfirm/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/popconfirm/basic-usage.vue
@@ -37,12 +37,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/arrow-offset.vue b/examples/sites/demos/mobile-first/app/popover/arrow-offset.vue
index f64a4dfbe..b22235f6a 100644
--- a/examples/sites/demos/mobile-first/app/popover/arrow-offset.vue
+++ b/examples/sites/demos/mobile-first/app/popover/arrow-offset.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/popover/basic-usage.vue b/examples/sites/demos/mobile-first/app/popover/basic-usage.vue
index 09bdab74a..3aeff4553 100644
--- a/examples/sites/demos/mobile-first/app/popover/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/popover/basic-usage.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/popover/close-delay.vue b/examples/sites/demos/mobile-first/app/popover/close-delay.vue
index df4eb8f0a..7ea885a7e 100644
--- a/examples/sites/demos/mobile-first/app/popover/close-delay.vue
+++ b/examples/sites/demos/mobile-first/app/popover/close-delay.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/custom-tip-text.vue b/examples/sites/demos/mobile-first/app/popover/custom-tip-text.vue
index f85faa5c9..758c6a3cf 100644
--- a/examples/sites/demos/mobile-first/app/popover/custom-tip-text.vue
+++ b/examples/sites/demos/mobile-first/app/popover/custom-tip-text.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/dynamic-disable.vue b/examples/sites/demos/mobile-first/app/popover/dynamic-disable.vue
index 720eeee36..2837af670 100644
--- a/examples/sites/demos/mobile-first/app/popover/dynamic-disable.vue
+++ b/examples/sites/demos/mobile-first/app/popover/dynamic-disable.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/frame-offset.vue b/examples/sites/demos/mobile-first/app/popover/frame-offset.vue
index d4b9ada55..87bd4fbd6 100644
--- a/examples/sites/demos/mobile-first/app/popover/frame-offset.vue
+++ b/examples/sites/demos/mobile-first/app/popover/frame-offset.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/popover/hidden-arrow.vue b/examples/sites/demos/mobile-first/app/popover/hidden-arrow.vue
index 23b32dab9..8bded9f9e 100644
--- a/examples/sites/demos/mobile-first/app/popover/hidden-arrow.vue
+++ b/examples/sites/demos/mobile-first/app/popover/hidden-arrow.vue
@@ -28,12 +28,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/popover/open-delay.vue b/examples/sites/demos/mobile-first/app/popover/open-delay.vue
index 481cfcc4a..666e0e239 100644
--- a/examples/sites/demos/mobile-first/app/popover/open-delay.vue
+++ b/examples/sites/demos/mobile-first/app/popover/open-delay.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/popover-content.vue b/examples/sites/demos/mobile-first/app/popover/popover-content.vue
index 6cc0341e2..f9347d569 100644
--- a/examples/sites/demos/mobile-first/app/popover/popover-content.vue
+++ b/examples/sites/demos/mobile-first/app/popover/popover-content.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/popover/popover-events.vue b/examples/sites/demos/mobile-first/app/popover/popover-events.vue
index 250e2855a..88aee50d8 100644
--- a/examples/sites/demos/mobile-first/app/popover/popover-events.vue
+++ b/examples/sites/demos/mobile-first/app/popover/popover-events.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { Popover, Notify, Button } from '@opentiny/vue'
+import { TinyPopover, TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
@@ -31,28 +31,28 @@ export default {
   },
   methods: {
     enter() {
-      Notify({
+      TinyNotify({
         title: '提示',
         message: '显示动画播放完毕后触发',
         offset: 100
       })
     },
     leave() {
-      Notify({
+      TinyNotify({
         title: '提示',
         message: '隐藏动画播放完毕后触发',
         offset: 100
       })
     },
     show() {
-      Notify({
+      TinyNotify({
         title: '提示',
         message: '显示时触发',
         offset: 100
       })
     },
     hide() {
-      Notify({
+      TinyNotify({
         title: '提示',
         message: '隐藏时触发',
         offset: 100
diff --git a/examples/sites/demos/mobile-first/app/popover/popover-placement.vue b/examples/sites/demos/mobile-first/app/popover/popover-placement.vue
index 5546a3338..e6d2a9f37 100644
--- a/examples/sites/demos/mobile-first/app/popover/popover-placement.vue
+++ b/examples/sites/demos/mobile-first/app/popover/popover-placement.vue
@@ -56,12 +56,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/popover/popover-width.vue b/examples/sites/demos/mobile-first/app/popover/popover-width.vue
index ddad784d2..3bb32f3bb 100644
--- a/examples/sites/demos/mobile-first/app/popover/popover-width.vue
+++ b/examples/sites/demos/mobile-first/app/popover/popover-width.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/popper-class.vue b/examples/sites/demos/mobile-first/app/popover/popper-class.vue
index 58246c237..b6ceb0e98 100644
--- a/examples/sites/demos/mobile-first/app/popover/popper-class.vue
+++ b/examples/sites/demos/mobile-first/app/popover/popper-class.vue
@@ -28,12 +28,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/popper-options.vue b/examples/sites/demos/mobile-first/app/popover/popper-options.vue
index 32b6f3f53..b719d94b8 100644
--- a/examples/sites/demos/mobile-first/app/popover/popper-options.vue
+++ b/examples/sites/demos/mobile-first/app/popover/popper-options.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/trigger-mode.vue b/examples/sites/demos/mobile-first/app/popover/trigger-mode.vue
index 32d2f164a..9f1c623f2 100644
--- a/examples/sites/demos/mobile-first/app/popover/trigger-mode.vue
+++ b/examples/sites/demos/mobile-first/app/popover/trigger-mode.vue
@@ -50,12 +50,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/popover/trigger-reference.vue b/examples/sites/demos/mobile-first/app/popover/trigger-reference.vue
index 0094fed5a..16c499ca3 100644
--- a/examples/sites/demos/mobile-first/app/popover/trigger-reference.vue
+++ b/examples/sites/demos/mobile-first/app/popover/trigger-reference.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/progress/basic-usage.vue b/examples/sites/demos/mobile-first/app/progress/basic-usage.vue
index 36add9de4..42b51db6e 100644
--- a/examples/sites/demos/mobile-first/app/progress/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/progress/basic-usage.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/progress/custom-color.vue b/examples/sites/demos/mobile-first/app/progress/custom-color.vue
index 2a9828b0b..060d44c03 100644
--- a/examples/sites/demos/mobile-first/app/progress/custom-color.vue
+++ b/examples/sites/demos/mobile-first/app/progress/custom-color.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/progress/dynamic-control-changes.vue b/examples/sites/demos/mobile-first/app/progress/dynamic-control-changes.vue
index ead0f3d20..aa31a242b 100644
--- a/examples/sites/demos/mobile-first/app/progress/dynamic-control-changes.vue
+++ b/examples/sites/demos/mobile-first/app/progress/dynamic-control-changes.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/progress/format-text.vue b/examples/sites/demos/mobile-first/app/progress/format-text.vue
index 676fb8e90..e1df01da5 100644
--- a/examples/sites/demos/mobile-first/app/progress/format-text.vue
+++ b/examples/sites/demos/mobile-first/app/progress/format-text.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   methods: {
     formatText() {
diff --git a/examples/sites/demos/mobile-first/app/progress/progress-size.vue b/examples/sites/demos/mobile-first/app/progress/progress-size.vue
index 194c1d281..93382fb04 100644
--- a/examples/sites/demos/mobile-first/app/progress/progress-size.vue
+++ b/examples/sites/demos/mobile-first/app/progress/progress-size.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/progress/progress-status.vue b/examples/sites/demos/mobile-first/app/progress/progress-status.vue
index 1728286a2..343781249 100644
--- a/examples/sites/demos/mobile-first/app/progress/progress-status.vue
+++ b/examples/sites/demos/mobile-first/app/progress/progress-status.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/progress/progress-type-circle.vue b/examples/sites/demos/mobile-first/app/progress/progress-type-circle.vue
index 5c17d6756..6bfbe8ab0 100644
--- a/examples/sites/demos/mobile-first/app/progress/progress-type-circle.vue
+++ b/examples/sites/demos/mobile-first/app/progress/progress-type-circle.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/progress/progress-type.vue b/examples/sites/demos/mobile-first/app/progress/progress-type.vue
index 101a8510b..cd857794c 100644
--- a/examples/sites/demos/mobile-first/app/progress/progress-type.vue
+++ b/examples/sites/demos/mobile-first/app/progress/progress-type.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/progress/progress-width.vue b/examples/sites/demos/mobile-first/app/progress/progress-width.vue
index bffba8c00..e94e6c46b 100644
--- a/examples/sites/demos/mobile-first/app/progress/progress-width.vue
+++ b/examples/sites/demos/mobile-first/app/progress/progress-width.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/progress/status-error.vue b/examples/sites/demos/mobile-first/app/progress/status-error.vue
index 68b9a5662..2045c4ce2 100644
--- a/examples/sites/demos/mobile-first/app/progress/status-error.vue
+++ b/examples/sites/demos/mobile-first/app/progress/status-error.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 import { IconOperationfaildL } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyProgress: Progress,
+    TinyProgress,
     IconOperationfaildL: IconOperationfaildL()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/progress/status-loading.vue b/examples/sites/demos/mobile-first/app/progress/status-loading.vue
index 7e53f8435..a7fcf69d1 100644
--- a/examples/sites/demos/mobile-first/app/progress/status-loading.vue
+++ b/examples/sites/demos/mobile-first/app/progress/status-loading.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/progress/status-reloading.vue b/examples/sites/demos/mobile-first/app/progress/status-reloading.vue
index 52ecac0cd..ceff10c91 100644
--- a/examples/sites/demos/mobile-first/app/progress/status-reloading.vue
+++ b/examples/sites/demos/mobile-first/app/progress/status-reloading.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 import { IconOperationfaildL } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyProgress: Progress,
+    TinyProgress,
     IconOperationfaildL: IconOperationfaildL()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/progress/status-sucess.vue b/examples/sites/demos/mobile-first/app/progress/status-sucess.vue
index a4015817d..18ddb04cc 100644
--- a/examples/sites/demos/mobile-first/app/progress/status-sucess.vue
+++ b/examples/sites/demos/mobile-first/app/progress/status-sucess.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 import { IconSuccessful } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyProgress: Progress,
+    TinyProgress,
     IconSuccessful: IconSuccessful()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/progress/text-inside-or-no-text.vue b/examples/sites/demos/mobile-first/app/progress/text-inside-or-no-text.vue
index 1a6c3fb95..69cfaeb5c 100644
--- a/examples/sites/demos/mobile-first/app/progress/text-inside-or-no-text.vue
+++ b/examples/sites/demos/mobile-first/app/progress/text-inside-or-no-text.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/animation-duration.vue b/examples/sites/demos/mobile-first/app/pull-refresh/animation-duration.vue
index b52544376..83e19f2b9 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/animation-duration.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/animation-duration.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/basic-usage.vue b/examples/sites/demos/mobile-first/app/pull-refresh/basic-usage.vue
index d624d8e34..ba937f879 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/basic-usage.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
@@ -34,6 +34,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .page__hd {
   padding: 40px;
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/disabled.vue b/examples/sites/demos/mobile-first/app/pull-refresh/disabled.vue
index 7b69a8f9e..601bad05a 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/disabled.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/head-height.vue b/examples/sites/demos/mobile-first/app/pull-refresh/head-height.vue
index 1139feded..08fd730a0 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/head-height.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/head-height.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/loosing-text.vue b/examples/sites/demos/mobile-first/app/pull-refresh/loosing-text.vue
index b2022a6d0..fbd9341e7 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/loosing-text.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/loosing-text.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/pull-refresh-slot.vue b/examples/sites/demos/mobile-first/app/pull-refresh/pull-refresh-slot.vue
index 26b7286a8..d60534bb4 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/pull-refresh-slot.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/pull-refresh-slot.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/pulling-text.vue b/examples/sites/demos/mobile-first/app/pull-refresh/pulling-text.vue
index 145884ee1..0b2d24442 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/pulling-text.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/pulling-text.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/success-duration.vue b/examples/sites/demos/mobile-first/app/pull-refresh/success-duration.vue
index b920e4add..783d70d41 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/success-duration.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/success-duration.vue
@@ -1,4 +1,4 @@
-<template>
+<template>
   <tiny-pull-refresh
     ref="refresh"
     v-model="isLoading"
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/pull-refresh/success-text.vue b/examples/sites/demos/mobile-first/app/pull-refresh/success-text.vue
index 66dd46f78..95bc1add4 100644
--- a/examples/sites/demos/mobile-first/app/pull-refresh/success-text.vue
+++ b/examples/sites/demos/mobile-first/app/pull-refresh/success-text.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio-block/basic-usage.vue b/examples/sites/demos/mobile-first/app/radio-block/basic-usage.vue
index b9699686e..d8fda419c 100644
--- a/examples/sites/demos/mobile-first/app/radio-block/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/radio-block/basic-usage.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio-block/dynamic-disable.vue b/examples/sites/demos/mobile-first/app/radio-block/dynamic-disable.vue
index 90ac8c7db..2d9aab19f 100644
--- a/examples/sites/demos/mobile-first/app/radio-block/dynamic-disable.vue
+++ b/examples/sites/demos/mobile-first/app/radio-block/dynamic-disable.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio-block/group-options.vue b/examples/sites/demos/mobile-first/app/radio-block/group-options.vue
index 40e30b1de..c2386ac4c 100644
--- a/examples/sites/demos/mobile-first/app/radio-block/group-options.vue
+++ b/examples/sites/demos/mobile-first/app/radio-block/group-options.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { RadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioGroup: RadioGroup
+    TinyRadioGroup
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message({ message: 'click' })
+      TinyModal.message({ message: 'click' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/radio-block/radio-button.vue b/examples/sites/demos/mobile-first/app/radio-block/radio-button.vue
index 02a26de52..aed2d857c 100644
--- a/examples/sites/demos/mobile-first/app/radio-block/radio-button.vue
+++ b/examples/sites/demos/mobile-first/app/radio-block/radio-button.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio-block/radio-events.vue b/examples/sites/demos/mobile-first/app/radio-block/radio-events.vue
index 5aa0b3fbe..4052bf553 100644
--- a/examples/sites/demos/mobile-first/app/radio-block/radio-events.vue
+++ b/examples/sites/demos/mobile-first/app/radio-block/radio-events.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   methods: {
     change(label) {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，选中的 Radio label 值为：' + label,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/radio-block/radio-size.vue b/examples/sites/demos/mobile-first/app/radio-block/radio-size.vue
index 345125c4e..db78c2074 100644
--- a/examples/sites/demos/mobile-first/app/radio-block/radio-size.vue
+++ b/examples/sites/demos/mobile-first/app/radio-block/radio-size.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio-block/radio-tips.vue b/examples/sites/demos/mobile-first/app/radio-block/radio-tips.vue
index 1cc71d0ae..fb7888f50 100644
--- a/examples/sites/demos/mobile-first/app/radio-block/radio-tips.vue
+++ b/examples/sites/demos/mobile-first/app/radio-block/radio-tips.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/active-color.vue b/examples/sites/demos/mobile-first/app/radio/active-color.vue
index ab546510d..8886ccc47 100644
--- a/examples/sites/demos/mobile-first/app/radio/active-color.vue
+++ b/examples/sites/demos/mobile-first/app/radio/active-color.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/basic-usage.vue b/examples/sites/demos/mobile-first/app/radio/basic-usage.vue
index ffbd9abc0..151378b69 100644
--- a/examples/sites/demos/mobile-first/app/radio/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/radio/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/dynamic-disable.vue b/examples/sites/demos/mobile-first/app/radio/dynamic-disable.vue
index d1075f588..6ca04aa5a 100644
--- a/examples/sites/demos/mobile-first/app/radio/dynamic-disable.vue
+++ b/examples/sites/demos/mobile-first/app/radio/dynamic-disable.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Radio, RadioGroup } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/group-options.vue b/examples/sites/demos/mobile-first/app/radio/group-options.vue
index 40e30b1de..c2386ac4c 100644
--- a/examples/sites/demos/mobile-first/app/radio/group-options.vue
+++ b/examples/sites/demos/mobile-first/app/radio/group-options.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { RadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioGroup: RadioGroup
+    TinyRadioGroup
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message({ message: 'click' })
+      TinyModal.message({ message: 'click' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/radio/radio-button.vue b/examples/sites/demos/mobile-first/app/radio/radio-button.vue
index f8b90472f..1733c50b7 100644
--- a/examples/sites/demos/mobile-first/app/radio/radio-button.vue
+++ b/examples/sites/demos/mobile-first/app/radio/radio-button.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/radio-default.vue b/examples/sites/demos/mobile-first/app/radio/radio-default.vue
index 882170e73..1c4dd8cca 100644
--- a/examples/sites/demos/mobile-first/app/radio/radio-default.vue
+++ b/examples/sites/demos/mobile-first/app/radio/radio-default.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/radio-events.vue b/examples/sites/demos/mobile-first/app/radio/radio-events.vue
index 96aabb367..13e29daf4 100644
--- a/examples/sites/demos/mobile-first/app/radio/radio-events.vue
+++ b/examples/sites/demos/mobile-first/app/radio/radio-events.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Radio, RadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     change(label) {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，选中的 Radio label 值为：' + label,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/radio/radio-size.vue b/examples/sites/demos/mobile-first/app/radio/radio-size.vue
index 422ce0800..b5ec235ba 100644
--- a/examples/sites/demos/mobile-first/app/radio/radio-size.vue
+++ b/examples/sites/demos/mobile-first/app/radio/radio-size.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { Radio, RadioGroup } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/radio-text.vue b/examples/sites/demos/mobile-first/app/radio/radio-text.vue
index 4f554f1cd..99def9b7a 100644
--- a/examples/sites/demos/mobile-first/app/radio/radio-text.vue
+++ b/examples/sites/demos/mobile-first/app/radio/radio-text.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/radio-value.vue b/examples/sites/demos/mobile-first/app/radio/radio-value.vue
index 39b9e1cb0..d575a5668 100644
--- a/examples/sites/demos/mobile-first/app/radio/radio-value.vue
+++ b/examples/sites/demos/mobile-first/app/radio/radio-value.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Radio, RadioGroup } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/read-only.vue b/examples/sites/demos/mobile-first/app/radio/read-only.vue
index eac81d687..10466db37 100644
--- a/examples/sites/demos/mobile-first/app/radio/read-only.vue
+++ b/examples/sites/demos/mobile-first/app/radio/read-only.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Radio, RadioGroup } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/radio/vertical.vue b/examples/sites/demos/mobile-first/app/radio/vertical.vue
index 46b6a1941..46df06dd4 100644
--- a/examples/sites/demos/mobile-first/app/radio/vertical.vue
+++ b/examples/sites/demos/mobile-first/app/radio/vertical.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Radio, RadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({ message: `当前变化的值：${val}`, status: 'info' })
+      TinyModal.message({ message: `当前变化的值：${val}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/radio/with-border.vue b/examples/sites/demos/mobile-first/app/radio/with-border.vue
index e0256c436..645fd9492 100644
--- a/examples/sites/demos/mobile-first/app/radio/with-border.vue
+++ b/examples/sites/demos/mobile-first/app/radio/with-border.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/allow-half.vue b/examples/sites/demos/mobile-first/app/rate/allow-half.vue
index 87cc5bad6..c97808a20 100644
--- a/examples/sites/demos/mobile-first/app/rate/allow-half.vue
+++ b/examples/sites/demos/mobile-first/app/rate/allow-half.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/basic-usage.vue b/examples/sites/demos/mobile-first/app/rate/basic-usage.vue
index 15da32337..eb2bffc47 100644
--- a/examples/sites/demos/mobile-first/app/rate/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/rate/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/custom-3-threshold-colors.vue b/examples/sites/demos/mobile-first/app/rate/custom-3-threshold-colors.vue
index cc67b8be3..33bc84a5a 100644
--- a/examples/sites/demos/mobile-first/app/rate/custom-3-threshold-colors.vue
+++ b/examples/sites/demos/mobile-first/app/rate/custom-3-threshold-colors.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/custom-3-threshold-icon.vue b/examples/sites/demos/mobile-first/app/rate/custom-3-threshold-icon.vue
index c654054c0..a75fad4f2 100644
--- a/examples/sites/demos/mobile-first/app/rate/custom-3-threshold-icon.vue
+++ b/examples/sites/demos/mobile-first/app/rate/custom-3-threshold-icon.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/disabled-not-selected-class.vue b/examples/sites/demos/mobile-first/app/rate/disabled-not-selected-class.vue
index 34a690854..becf3182f 100644
--- a/examples/sites/demos/mobile-first/app/rate/disabled-not-selected-class.vue
+++ b/examples/sites/demos/mobile-first/app/rate/disabled-not-selected-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/disabled-not-selected-color.vue b/examples/sites/demos/mobile-first/app/rate/disabled-not-selected-color.vue
index 808d5a97e..e9c9747c9 100644
--- a/examples/sites/demos/mobile-first/app/rate/disabled-not-selected-color.vue
+++ b/examples/sites/demos/mobile-first/app/rate/disabled-not-selected-color.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/dynamic-disable.vue b/examples/sites/demos/mobile-first/app/rate/dynamic-disable.vue
index 8af22c842..39a14ae9e 100644
--- a/examples/sites/demos/mobile-first/app/rate/dynamic-disable.vue
+++ b/examples/sites/demos/mobile-first/app/rate/dynamic-disable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/max-score.vue b/examples/sites/demos/mobile-first/app/rate/max-score.vue
index 495432505..afbab0639 100644
--- a/examples/sites/demos/mobile-first/app/rate/max-score.vue
+++ b/examples/sites/demos/mobile-first/app/rate/max-score.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/not-selected-class.vue b/examples/sites/demos/mobile-first/app/rate/not-selected-class.vue
index 90e6e3ad9..ff61dd6e4 100644
--- a/examples/sites/demos/mobile-first/app/rate/not-selected-class.vue
+++ b/examples/sites/demos/mobile-first/app/rate/not-selected-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/not-selected-color.vue b/examples/sites/demos/mobile-first/app/rate/not-selected-color.vue
index 454cea8bb..571d6d81f 100644
--- a/examples/sites/demos/mobile-first/app/rate/not-selected-color.vue
+++ b/examples/sites/demos/mobile-first/app/rate/not-selected-color.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/radio-rate.vue b/examples/sites/demos/mobile-first/app/rate/radio-rate.vue
index 0d4f1252b..e09e7bac2 100644
--- a/examples/sites/demos/mobile-first/app/rate/radio-rate.vue
+++ b/examples/sites/demos/mobile-first/app/rate/radio-rate.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/rate-events.vue b/examples/sites/demos/mobile-first/app/rate/rate-events.vue
index 0ca1a362d..a0a0d8a29 100644
--- a/examples/sites/demos/mobile-first/app/rate/rate-events.vue
+++ b/examples/sites/demos/mobile-first/app/rate/rate-events.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate, Modal } from '@opentiny/vue'
+import { TinyRate, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     onchange(v) {
-      Modal.message({ message: `选中的值是${v}`, status: 'info' })
+      TinyModal.message({ message: `选中的值是${v}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/rate/show-score.vue b/examples/sites/demos/mobile-first/app/rate/show-score.vue
index 410b9f360..d838ce372 100644
--- a/examples/sites/demos/mobile-first/app/rate/show-score.vue
+++ b/examples/sites/demos/mobile-first/app/rate/show-score.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/size.vue b/examples/sites/demos/mobile-first/app/rate/size.vue
index bd2b67da3..951159b1a 100644
--- a/examples/sites/demos/mobile-first/app/rate/size.vue
+++ b/examples/sites/demos/mobile-first/app/rate/size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/text-on-bottom.vue b/examples/sites/demos/mobile-first/app/rate/text-on-bottom.vue
index a7fd3bd6f..bbc9d251a 100644
--- a/examples/sites/demos/mobile-first/app/rate/text-on-bottom.vue
+++ b/examples/sites/demos/mobile-first/app/rate/text-on-bottom.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/texts-and-text-color.vue b/examples/sites/demos/mobile-first/app/rate/texts-and-text-color.vue
index 537483f36..08b030a13 100644
--- a/examples/sites/demos/mobile-first/app/rate/texts-and-text-color.vue
+++ b/examples/sites/demos/mobile-first/app/rate/texts-and-text-color.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/rate/threshold-value.vue b/examples/sites/demos/mobile-first/app/rate/threshold-value.vue
index ca0ae81dd..650c41fc1 100644
--- a/examples/sites/demos/mobile-first/app/rate/threshold-value.vue
+++ b/examples/sites/demos/mobile-first/app/rate/threshold-value.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/record/basic-usage.vue b/examples/sites/demos/mobile-first/app/record/basic-usage.vue
index a70795a7f..99cdb0cb5 100644
--- a/examples/sites/demos/mobile-first/app/record/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/record/basic-usage.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Record, Button } from '@opentiny/vue'
+import { TinyRecord, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRecord: Record,
-    TinyButton: Button
+    TinyRecord,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/scrollbar/basic-usage.vue b/examples/sites/demos/mobile-first/app/scrollbar/basic-usage.vue
index bec29eb33..e9dfb25f8 100644
--- a/examples/sites/demos/mobile-first/app/scrollbar/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/scrollbar/basic-usage.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import { Scrollbar } from '@opentiny/vue'
+import { TinyScrollbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScrollbar: Scrollbar
+    TinyScrollbar
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/scrollbar/horizon.vue b/examples/sites/demos/mobile-first/app/scrollbar/horizon.vue
index 104bd3f46..af80c87b0 100644
--- a/examples/sites/demos/mobile-first/app/scrollbar/horizon.vue
+++ b/examples/sites/demos/mobile-first/app/scrollbar/horizon.vue
@@ -21,11 +21,11 @@
 </template>
 
 <script>
-import { Scrollbar } from '@opentiny/vue'
+import { TinyScrollbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScrollbar: Scrollbar
+    TinyScrollbar
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/search/basic-usage.vue b/examples/sites/demos/mobile-first/app/search/basic-usage.vue
index 013f04d09..6b2f550d3 100644
--- a/examples/sites/demos/mobile-first/app/search/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/search/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/big-mode.vue b/examples/sites/demos/mobile-first/app/search/big-mode.vue
index 258cf15e0..c7a28dd8b 100644
--- a/examples/sites/demos/mobile-first/app/search/big-mode.vue
+++ b/examples/sites/demos/mobile-first/app/search/big-mode.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/button-search.vue b/examples/sites/demos/mobile-first/app/search/button-search.vue
index 9dc1979ab..87ec77161 100644
--- a/examples/sites/demos/mobile-first/app/search/button-search.vue
+++ b/examples/sites/demos/mobile-first/app/search/button-search.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/change-bg.vue b/examples/sites/demos/mobile-first/app/search/change-bg.vue
index 00a1888a8..e73ff16ac 100644
--- a/examples/sites/demos/mobile-first/app/search/change-bg.vue
+++ b/examples/sites/demos/mobile-first/app/search/change-bg.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/change-events.vue b/examples/sites/demos/mobile-first/app/search/change-events.vue
index de5a08e20..5922cb814 100644
--- a/examples/sites/demos/mobile-first/app/search/change-events.vue
+++ b/examples/sites/demos/mobile-first/app/search/change-events.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Search, Modal } from '@opentiny/vue'
+import { TinySearch, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   methods: {
     change(key, value) {
-      Modal.message(`${value}`)
+      TinyModal.message(`${value}`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/search/clearable.vue b/examples/sites/demos/mobile-first/app/search/clearable.vue
index da935df36..8627bfc3d 100644
--- a/examples/sites/demos/mobile-first/app/search/clearable.vue
+++ b/examples/sites/demos/mobile-first/app/search/clearable.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/custom-search-types.vue b/examples/sites/demos/mobile-first/app/search/custom-search-types.vue
index 8b0bdbd6d..1a0a141a1 100644
--- a/examples/sites/demos/mobile-first/app/search/custom-search-types.vue
+++ b/examples/sites/demos/mobile-first/app/search/custom-search-types.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/default-value.vue b/examples/sites/demos/mobile-first/app/search/default-value.vue
index de056226c..d2effb192 100644
--- a/examples/sites/demos/mobile-first/app/search/default-value.vue
+++ b/examples/sites/demos/mobile-first/app/search/default-value.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/enter-search.vue b/examples/sites/demos/mobile-first/app/search/enter-search.vue
index 514956189..321948bd7 100644
--- a/examples/sites/demos/mobile-first/app/search/enter-search.vue
+++ b/examples/sites/demos/mobile-first/app/search/enter-search.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Search, Modal } from '@opentiny/vue'
+import { TinySearch, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   methods: {
     search(key, value) {
-      Modal.message(`${value}`)
+      TinyModal.message(`${value}`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/search/search-events.vue b/examples/sites/demos/mobile-first/app/search/search-events.vue
index d7802be4f..d1b0dd9c2 100644
--- a/examples/sites/demos/mobile-first/app/search/search-events.vue
+++ b/examples/sites/demos/mobile-first/app/search/search-events.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Search, Modal } from '@opentiny/vue'
+import { TinySearch, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   methods: {
     search(key, value) {
-      Modal.message(`${value}`)
+      TinyModal.message(`${value}`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/search/search-types.vue b/examples/sites/demos/mobile-first/app/search/search-types.vue
index ba8338fd5..2553038d1 100644
--- a/examples/sites/demos/mobile-first/app/search/search-types.vue
+++ b/examples/sites/demos/mobile-first/app/search/search-types.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/select-events.vue b/examples/sites/demos/mobile-first/app/search/select-events.vue
index ae110d363..8621e0ce2 100644
--- a/examples/sites/demos/mobile-first/app/search/select-events.vue
+++ b/examples/sites/demos/mobile-first/app/search/select-events.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Search, Modal } from '@opentiny/vue'
+import { TinySearch, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
@@ -31,7 +31,7 @@ export default {
   },
   methods: {
     select(value) {
-      Modal.message({ message: `${value.text}`, status: 'info' })
+      TinyModal.message({ message: `${value.text}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/search/show-selected-types.vue b/examples/sites/demos/mobile-first/app/search/show-selected-types.vue
index 1dce17016..f17845d10 100644
--- a/examples/sites/demos/mobile-first/app/search/show-selected-types.vue
+++ b/examples/sites/demos/mobile-first/app/search/show-selected-types.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/size.vue b/examples/sites/demos/mobile-first/app/search/size.vue
index 5e8741142..7a8823b60 100644
--- a/examples/sites/demos/mobile-first/app/search/size.vue
+++ b/examples/sites/demos/mobile-first/app/search/size.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/search/transparent-mode.vue b/examples/sites/demos/mobile-first/app/search/transparent-mode.vue
index f2529d24f..88b95b790 100644
--- a/examples/sites/demos/mobile-first/app/search/transparent-mode.vue
+++ b/examples/sites/demos/mobile-first/app/search/transparent-mode.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select-mobile/basic-usage.vue b/examples/sites/demos/mobile-first/app/select-mobile/basic-usage.vue
index 5864da8bb..3fa085564 100644
--- a/examples/sites/demos/mobile-first/app/select-mobile/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/select-mobile/basic-usage.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { SelectMobile, Button } from '@opentiny/vue'
+import { TinySelectMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectMobile: SelectMobile,
-    TinyButton: Button
+    TinySelectMobile,
+    TinyButton
   },
   data() {
     const list = [
@@ -60,6 +60,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .page__hd {
   padding: 40px;
diff --git a/examples/sites/demos/mobile-first/app/select-mobile/ellipsis.vue b/examples/sites/demos/mobile-first/app/select-mobile/ellipsis.vue
index f9c7d778b..a3ee201de 100644
--- a/examples/sites/demos/mobile-first/app/select-mobile/ellipsis.vue
+++ b/examples/sites/demos/mobile-first/app/select-mobile/ellipsis.vue
@@ -37,12 +37,12 @@
 </template>
 
 <script>
-import { SelectMobile, Button } from '@opentiny/vue'
+import { TinySelectMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectMobile: SelectMobile,
-    TinyButton: Button
+    TinySelectMobile,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-mobile/field.vue b/examples/sites/demos/mobile-first/app/select-mobile/field.vue
index 5fcb76aae..467aa34dc 100644
--- a/examples/sites/demos/mobile-first/app/select-mobile/field.vue
+++ b/examples/sites/demos/mobile-first/app/select-mobile/field.vue
@@ -47,12 +47,12 @@
 </template>
 
 <script>
-import { SelectMobile, Button } from '@opentiny/vue'
+import { TinySelectMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectMobile: SelectMobile,
-    TinyButton: Button
+    TinySelectMobile,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-mobile/mode-form.vue b/examples/sites/demos/mobile-first/app/select-mobile/mode-form.vue
index e5249573c..0fcc01c6e 100644
--- a/examples/sites/demos/mobile-first/app/select-mobile/mode-form.vue
+++ b/examples/sites/demos/mobile-first/app/select-mobile/mode-form.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { SelectMobile } from '@opentiny/vue'
+import { TinySelectMobile } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectMobile: SelectMobile
+    TinySelectMobile
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-mobile/multiple.vue b/examples/sites/demos/mobile-first/app/select-mobile/multiple.vue
index 545c32174..cd0069184 100644
--- a/examples/sites/demos/mobile-first/app/select-mobile/multiple.vue
+++ b/examples/sites/demos/mobile-first/app/select-mobile/multiple.vue
@@ -56,12 +56,12 @@
 </template>
 
 <script>
-import { SelectMobile, Button } from '@opentiny/vue'
+import { TinySelectMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectMobile: SelectMobile,
-    TinyButton: Button
+    TinySelectMobile,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-mobile/remote-search.vue b/examples/sites/demos/mobile-first/app/select-mobile/remote-search.vue
index 8c835252b..09052f8e1 100644
--- a/examples/sites/demos/mobile-first/app/select-mobile/remote-search.vue
+++ b/examples/sites/demos/mobile-first/app/select-mobile/remote-search.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { SelectMobile, Button } from '@opentiny/vue'
+import { TinySelectMobile, TinyButton } from '@opentiny/vue'
 
 const list = [
   {
@@ -43,8 +43,8 @@ const list = [
 
 export default {
   components: {
-    TinySelectMobile: SelectMobile,
-    TinyButton: Button
+    TinySelectMobile,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select-view/basic-usage.vue b/examples/sites/demos/mobile-first/app/select-view/basic-usage.vue
index 56ddf9070..bf66f9535 100644
--- a/examples/sites/demos/mobile-first/app/select-view/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/basic-usage.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { SelectView, Button } from '@opentiny/vue'
+import { TinySelectView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-view/field.vue b/examples/sites/demos/mobile-first/app/select-view/field.vue
index 480200cce..824fb2e02 100644
--- a/examples/sites/demos/mobile-first/app/select-view/field.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/field.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { SelectView, Button } from '@opentiny/vue'
+import { TinySelectView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-view/infinit-scroll.vue b/examples/sites/demos/mobile-first/app/select-view/infinit-scroll.vue
index 058e5f454..202f11579 100644
--- a/examples/sites/demos/mobile-first/app/select-view/infinit-scroll.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/infinit-scroll.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { SelectView, Button } from '@opentiny/vue'
+import { TinySelectView, TinyButton } from '@opentiny/vue'
 
 const list = [
   {
@@ -76,8 +76,8 @@ const list = [
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select-view/multiple-required.vue b/examples/sites/demos/mobile-first/app/select-view/multiple-required.vue
index eb81999c8..4b7611b3f 100644
--- a/examples/sites/demos/mobile-first/app/select-view/multiple-required.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/multiple-required.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { SelectView, Button } from '@opentiny/vue'
+import { TinySelectView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-view/multiple.vue b/examples/sites/demos/mobile-first/app/select-view/multiple.vue
index b14e9cdff..3667a9a66 100644
--- a/examples/sites/demos/mobile-first/app/select-view/multiple.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/multiple.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { SelectView, Button } from '@opentiny/vue'
+import { TinySelectView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-view/place-holder.vue b/examples/sites/demos/mobile-first/app/select-view/place-holder.vue
index d928e78a0..00036ed08 100644
--- a/examples/sites/demos/mobile-first/app/select-view/place-holder.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/place-holder.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { SelectView, Button } from '@opentiny/vue'
+import { TinySelectView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-view/required.vue b/examples/sites/demos/mobile-first/app/select-view/required.vue
index 67cc79e72..9b5c174eb 100644
--- a/examples/sites/demos/mobile-first/app/select-view/required.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/required.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { SelectView, Button, Modal } from '@opentiny/vue'
+import { TinySelectView, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     const list = [
@@ -93,7 +93,7 @@ export default {
     searchClick(option, actionIsSuccessful) {
       if (!actionIsSuccessful) {
         // 选择操作失败，必选不能取消选择
-        Modal.message(`选择项 [${option.userName} ${option.employeeNumber}] 操作失败，该必选不能取消选择`)
+        TinyModal.message(`选择项 [${option.userName} ${option.employeeNumber}] 操作失败，该必选不能取消选择`)
       }
     }
   }
diff --git a/examples/sites/demos/mobile-first/app/select-view/slot.vue b/examples/sites/demos/mobile-first/app/select-view/slot.vue
index 6cebcc1ba..cf712354f 100644
--- a/examples/sites/demos/mobile-first/app/select-view/slot.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/slot.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { SelectView, Button } from '@opentiny/vue'
+import { TinySelectView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select-view/text.vue b/examples/sites/demos/mobile-first/app/select-view/text.vue
index ac4705de1..1a44e76d4 100644
--- a/examples/sites/demos/mobile-first/app/select-view/text.vue
+++ b/examples/sites/demos/mobile-first/app/select-view/text.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { SelectView, Button } from '@opentiny/vue'
+import { TinySelectView, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelectView: SelectView,
-    TinyButton: Button
+    TinySelectView,
+    TinyButton
   },
   data() {
     const list = [
diff --git a/examples/sites/demos/mobile-first/app/select/allow-create.vue b/examples/sites/demos/mobile-first/app/select/allow-create.vue
index 518f81374..64b893d57 100644
--- a/examples/sites/demos/mobile-first/app/select/allow-create.vue
+++ b/examples/sites/demos/mobile-first/app/select/allow-create.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/automatic-dropdown.vue b/examples/sites/demos/mobile-first/app/select/automatic-dropdown.vue
index 03bf6ea6b..3b66ceb7e 100644
--- a/examples/sites/demos/mobile-first/app/select/automatic-dropdown.vue
+++ b/examples/sites/demos/mobile-first/app/select/automatic-dropdown.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Select, Option, Button } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyButton: Button
+    TinySelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/basic-usage.vue b/examples/sites/demos/mobile-first/app/select/basic-usage.vue
index bce6d25ad..a013ca0ff 100644
--- a/examples/sites/demos/mobile-first/app/select/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/select/basic-usage.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/binding-obj.vue b/examples/sites/demos/mobile-first/app/select/binding-obj.vue
index 23b9b0795..329513f56 100644
--- a/examples/sites/demos/mobile-first/app/select/binding-obj.vue
+++ b/examples/sites/demos/mobile-first/app/select/binding-obj.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/cache-usage.vue b/examples/sites/demos/mobile-first/app/select/cache-usage.vue
index 36c5c212b..28d7024b4 100644
--- a/examples/sites/demos/mobile-first/app/select/cache-usage.vue
+++ b/examples/sites/demos/mobile-first/app/select/cache-usage.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/clearable.vue b/examples/sites/demos/mobile-first/app/select/clearable.vue
index 19c46b7b4..8817778c8 100644
--- a/examples/sites/demos/mobile-first/app/select/clearable.vue
+++ b/examples/sites/demos/mobile-first/app/select/clearable.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/close-by-mask.vue b/examples/sites/demos/mobile-first/app/select/close-by-mask.vue
index 2e11f40b4..09b186a6b 100644
--- a/examples/sites/demos/mobile-first/app/select/close-by-mask.vue
+++ b/examples/sites/demos/mobile-first/app/select/close-by-mask.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/collapse-tags.vue b/examples/sites/demos/mobile-first/app/select/collapse-tags.vue
index 031e48901..a0082ad82 100644
--- a/examples/sites/demos/mobile-first/app/select/collapse-tags.vue
+++ b/examples/sites/demos/mobile-first/app/select/collapse-tags.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/custom-icon.vue b/examples/sites/demos/mobile-first/app/select/custom-icon.vue
index 51772eba9..0136efdb0 100644
--- a/examples/sites/demos/mobile-first/app/select/custom-icon.vue
+++ b/examples/sites/demos/mobile-first/app/select/custom-icon.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { IconPopup } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/custom-options.vue b/examples/sites/demos/mobile-first/app/select/custom-options.vue
index 8cfb22b1e..7052ecc1b 100644
--- a/examples/sites/demos/mobile-first/app/select/custom-options.vue
+++ b/examples/sites/demos/mobile-first/app/select/custom-options.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/custom-prefix.vue b/examples/sites/demos/mobile-first/app/select/custom-prefix.vue
index bd57a89d8..4a6e00d76 100644
--- a/examples/sites/demos/mobile-first/app/select/custom-prefix.vue
+++ b/examples/sites/demos/mobile-first/app/select/custom-prefix.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
+    TinySelect,
+    TinyOption,
     IconShare: IconShare()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/select/custom-select-dropdown-style.vue b/examples/sites/demos/mobile-first/app/select/custom-select-dropdown-style.vue
index 244885577..efb17bec5 100644
--- a/examples/sites/demos/mobile-first/app/select/custom-select-dropdown-style.vue
+++ b/examples/sites/demos/mobile-first/app/select/custom-select-dropdown-style.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { IconPopup } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/disable-grid-select-radio.vue b/examples/sites/demos/mobile-first/app/select/disable-grid-select-radio.vue
index d8d0c5232..38afd89ee 100644
--- a/examples/sites/demos/mobile-first/app/select/disable-grid-select-radio.vue
+++ b/examples/sites/demos/mobile-first/app/select/disable-grid-select-radio.vue
@@ -26,11 +26,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/disabled-options.vue b/examples/sites/demos/mobile-first/app/select/disabled-options.vue
index 2dc0a89b3..675cf484e 100644
--- a/examples/sites/demos/mobile-first/app/select/disabled-options.vue
+++ b/examples/sites/demos/mobile-first/app/select/disabled-options.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/disabled.vue b/examples/sites/demos/mobile-first/app/select/disabled.vue
index fd1d49712..d4322613b 100644
--- a/examples/sites/demos/mobile-first/app/select/disabled.vue
+++ b/examples/sites/demos/mobile-first/app/select/disabled.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/envts-change.vue b/examples/sites/demos/mobile-first/app/select/envts-change.vue
index 267206001..c71752d85 100644
--- a/examples/sites/demos/mobile-first/app/select/envts-change.vue
+++ b/examples/sites/demos/mobile-first/app/select/envts-change.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Select, Option, Modal } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
@@ -51,27 +51,27 @@ export default {
   },
   methods: {
     change() {
-      Modal.message({
+      TinyModal.message({
         message: 'changes事件'
       })
     },
     clear() {
-      Modal.message({
+      TinyModal.message({
         message: 'clear事件'
       })
     },
     focus() {
-      Modal.message({
+      TinyModal.message({
         message: 'focus事件'
       })
     },
     blur() {
-      Modal.message({
+      TinyModal.message({
         message: 'blur事件'
       })
     },
     dropdownClick() {
-      Modal.message({
+      TinyModal.message({
         message: 'dropdown-click事件'
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/select/envts-remove.vue b/examples/sites/demos/mobile-first/app/select/envts-remove.vue
index a0f1dce77..c7d5172ef 100644
--- a/examples/sites/demos/mobile-first/app/select/envts-remove.vue
+++ b/examples/sites/demos/mobile-first/app/select/envts-remove.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Select, Option, Modal } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
@@ -49,12 +49,12 @@ export default {
   },
   methods: {
     removeTag() {
-      Modal.message({
+      TinyModal.message({
         message: 'removeTag事件'
       })
     },
     visibleChange() {
-      Modal.message({
+      TinyModal.message({
         message: 'visibleChange事件'
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/select/filter-method.vue b/examples/sites/demos/mobile-first/app/select/filter-method.vue
index edfbf4bed..77071a239 100644
--- a/examples/sites/demos/mobile-first/app/select/filter-method.vue
+++ b/examples/sites/demos/mobile-first/app/select/filter-method.vue
@@ -48,12 +48,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/filter-mode.vue b/examples/sites/demos/mobile-first/app/select/filter-mode.vue
index d99e991a3..56cb75739 100644
--- a/examples/sites/demos/mobile-first/app/select/filter-mode.vue
+++ b/examples/sites/demos/mobile-first/app/select/filter-mode.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/focus-remote-method.vue b/examples/sites/demos/mobile-first/app/select/focus-remote-method.vue
index 051915c4d..13be9559c 100644
--- a/examples/sites/demos/mobile-first/app/select/focus-remote-method.vue
+++ b/examples/sites/demos/mobile-first/app/select/focus-remote-method.vue
@@ -56,12 +56,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/hide-select-input-border.vue b/examples/sites/demos/mobile-first/app/select/hide-select-input-border.vue
index db147c500..2c6500d84 100644
--- a/examples/sites/demos/mobile-first/app/select/hide-select-input-border.vue
+++ b/examples/sites/demos/mobile-first/app/select/hide-select-input-border.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/hover-expand-disabled.vue b/examples/sites/demos/mobile-first/app/select/hover-expand-disabled.vue
index 9325c1412..e835e5fbe 100644
--- a/examples/sites/demos/mobile-first/app/select/hover-expand-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/select/hover-expand-disabled.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/hover-expand.vue b/examples/sites/demos/mobile-first/app/select/hover-expand.vue
index 13a7aca32..4429508be 100644
--- a/examples/sites/demos/mobile-first/app/select/hover-expand.vue
+++ b/examples/sites/demos/mobile-first/app/select/hover-expand.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/is-drop-inherit-width.vue b/examples/sites/demos/mobile-first/app/select/is-drop-inherit-width.vue
index c88023cfb..3368ae6ca 100644
--- a/examples/sites/demos/mobile-first/app/select/is-drop-inherit-width.vue
+++ b/examples/sites/demos/mobile-first/app/select/is-drop-inherit-width.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/manual-focus-blur.vue b/examples/sites/demos/mobile-first/app/select/manual-focus-blur.vue
index 3a18a007a..7a09f5416 100644
--- a/examples/sites/demos/mobile-first/app/select/manual-focus-blur.vue
+++ b/examples/sites/demos/mobile-first/app/select/manual-focus-blur.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Select, Option, Button } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyButton: Button
+    TinySelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/memoize-usage.vue b/examples/sites/demos/mobile-first/app/select/memoize-usage.vue
index 63f82c79a..6e074570e 100644
--- a/examples/sites/demos/mobile-first/app/select/memoize-usage.vue
+++ b/examples/sites/demos/mobile-first/app/select/memoize-usage.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import Memorize from '@opentiny/vue-renderless/common/deps/memorize'
 
 const MemorizeInstance = new Memorize({ key: 'test456' })
@@ -44,8 +44,8 @@ const options = MemorizeInstance.assemble([
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/multiple-limit.vue b/examples/sites/demos/mobile-first/app/select/multiple-limit.vue
index b29a62196..70162f211 100644
--- a/examples/sites/demos/mobile-first/app/select/multiple-limit.vue
+++ b/examples/sites/demos/mobile-first/app/select/multiple-limit.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/multiple-mix.vue b/examples/sites/demos/mobile-first/app/select/multiple-mix.vue
index 7c537e66c..f6abe0cc1 100644
--- a/examples/sites/demos/mobile-first/app/select/multiple-mix.vue
+++ b/examples/sites/demos/mobile-first/app/select/multiple-mix.vue
@@ -78,15 +78,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Select, Option, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyButton: Button,
-    TinyFormItem: FormItem,
-    TinySelect: Select,
-    TinyOption: Option
+    TinyForm,
+    TinyButton,
+    TinyFormItem,
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/multiple.vue b/examples/sites/demos/mobile-first/app/select/multiple.vue
index d3ffb270d..05d1ac338 100644
--- a/examples/sites/demos/mobile-first/app/select/multiple.vue
+++ b/examples/sites/demos/mobile-first/app/select/multiple.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/name.vue b/examples/sites/demos/mobile-first/app/select/name.vue
index 8119f7d61..3452cb421 100644
--- a/examples/sites/demos/mobile-first/app/select/name.vue
+++ b/examples/sites/demos/mobile-first/app/select/name.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/nest-checkbox-tree-lazy.vue b/examples/sites/demos/mobile-first/app/select/nest-checkbox-tree-lazy.vue
index 70061f07a..164f47974 100644
--- a/examples/sites/demos/mobile-first/app/select/nest-checkbox-tree-lazy.vue
+++ b/examples/sites/demos/mobile-first/app/select/nest-checkbox-tree-lazy.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/nest-checkbox-tree.vue b/examples/sites/demos/mobile-first/app/select/nest-checkbox-tree.vue
index 990d7e9bc..a2c770b1e 100644
--- a/examples/sites/demos/mobile-first/app/select/nest-checkbox-tree.vue
+++ b/examples/sites/demos/mobile-first/app/select/nest-checkbox-tree.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/nest-filterable-tree.vue b/examples/sites/demos/mobile-first/app/select/nest-filterable-tree.vue
index 1a056a110..35546d908 100644
--- a/examples/sites/demos/mobile-first/app/select/nest-filterable-tree.vue
+++ b/examples/sites/demos/mobile-first/app/select/nest-filterable-tree.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/nest-radio-tree-lazy.vue b/examples/sites/demos/mobile-first/app/select/nest-radio-tree-lazy.vue
index 3079b169b..406667329 100644
--- a/examples/sites/demos/mobile-first/app/select/nest-radio-tree-lazy.vue
+++ b/examples/sites/demos/mobile-first/app/select/nest-radio-tree-lazy.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/nest-radio-tree.vue b/examples/sites/demos/mobile-first/app/select/nest-radio-tree.vue
index 777187ccc..4c31943d6 100644
--- a/examples/sites/demos/mobile-first/app/select/nest-radio-tree.vue
+++ b/examples/sites/demos/mobile-first/app/select/nest-radio-tree.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/nest-remote-grid.vue b/examples/sites/demos/mobile-first/app/select/nest-remote-grid.vue
index 6f05726c9..2cd8dc119 100644
--- a/examples/sites/demos/mobile-first/app/select/nest-remote-grid.vue
+++ b/examples/sites/demos/mobile-first/app/select/nest-remote-grid.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   methods: {
     remoteMethod(query) {
diff --git a/examples/sites/demos/mobile-first/app/select/no-data-text.vue b/examples/sites/demos/mobile-first/app/select/no-data-text.vue
index f39a74dd8..2faa01a8b 100644
--- a/examples/sites/demos/mobile-first/app/select/no-data-text.vue
+++ b/examples/sites/demos/mobile-first/app/select/no-data-text.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/no-match-text.vue b/examples/sites/demos/mobile-first/app/select/no-match-text.vue
index 8763160e4..381423ef8 100644
--- a/examples/sites/demos/mobile-first/app/select/no-match-text.vue
+++ b/examples/sites/demos/mobile-first/app/select/no-match-text.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/optimization.vue b/examples/sites/demos/mobile-first/app/select/optimization.vue
index 2ce2529b4..e3343aead 100644
--- a/examples/sites/demos/mobile-first/app/select/optimization.vue
+++ b/examples/sites/demos/mobile-first/app/select/optimization.vue
@@ -19,16 +19,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Select, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinySelect, TinyModal } from '@opentiny/vue'
 
 const buildOptions = () =>
   Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项${i}","label":"黄金糕${i}"}`))
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinySelect: Select
+    TinyForm,
+    TinyFormItem,
+    TinySelect
   },
   data() {
     return {
@@ -39,7 +39,7 @@ export default {
   },
   methods: {
     onChange(e) {
-      Modal.message(e.toString())
+      TinyModal.message(e.toString())
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/select/option-group-disable.vue b/examples/sites/demos/mobile-first/app/select/option-group-disable.vue
index 0463b17b0..0e67acc4f 100644
--- a/examples/sites/demos/mobile-first/app/select/option-group-disable.vue
+++ b/examples/sites/demos/mobile-first/app/select/option-group-disable.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Select, Option, OptionGroup } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyOptionGroup: OptionGroup
+    TinySelect,
+    TinyOption,
+    TinyOptionGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/option-group.vue b/examples/sites/demos/mobile-first/app/select/option-group.vue
index aae8a9e75..3e01dfe5b 100644
--- a/examples/sites/demos/mobile-first/app/select/option-group.vue
+++ b/examples/sites/demos/mobile-first/app/select/option-group.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Select, Option, OptionGroup } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyOptionGroup: OptionGroup
+    TinySelect,
+    TinyOption,
+    TinyOptionGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/popup-style-position.vue b/examples/sites/demos/mobile-first/app/select/popup-style-position.vue
index 254b5be17..f71e9adeb 100644
--- a/examples/sites/demos/mobile-first/app/select/popup-style-position.vue
+++ b/examples/sites/demos/mobile-first/app/select/popup-style-position.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/remote-method.vue b/examples/sites/demos/mobile-first/app/select/remote-method.vue
index 8d09b6995..8273a1ac8 100644
--- a/examples/sites/demos/mobile-first/app/select/remote-method.vue
+++ b/examples/sites/demos/mobile-first/app/select/remote-method.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/remote-search-allow-copy.vue b/examples/sites/demos/mobile-first/app/select/remote-search-allow-copy.vue
index 56585192a..fdef9f111 100644
--- a/examples/sites/demos/mobile-first/app/select/remote-search-allow-copy.vue
+++ b/examples/sites/demos/mobile-first/app/select/remote-search-allow-copy.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/required-option.vue b/examples/sites/demos/mobile-first/app/select/required-option.vue
index 5284115a4..bbaef149e 100644
--- a/examples/sites/demos/mobile-first/app/select/required-option.vue
+++ b/examples/sites/demos/mobile-first/app/select/required-option.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/search-allow-copy.vue b/examples/sites/demos/mobile-first/app/select/search-allow-copy.vue
index 617a1a6d4..0a206baf6 100644
--- a/examples/sites/demos/mobile-first/app/select/search-allow-copy.vue
+++ b/examples/sites/demos/mobile-first/app/select/search-allow-copy.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/set-input-value.vue b/examples/sites/demos/mobile-first/app/select/set-input-value.vue
index efa9a4056..ab1531ab3 100644
--- a/examples/sites/demos/mobile-first/app/select/set-input-value.vue
+++ b/examples/sites/demos/mobile-first/app/select/set-input-value.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Select, Option, Button } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyButton: Button
+    TinySelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/show-alloption.vue b/examples/sites/demos/mobile-first/app/select/show-alloption.vue
index 5b111c5ce..4af6353f3 100644
--- a/examples/sites/demos/mobile-first/app/select/show-alloption.vue
+++ b/examples/sites/demos/mobile-first/app/select/show-alloption.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/show-tip.vue b/examples/sites/demos/mobile-first/app/select/show-tip.vue
index 339cee4ba..6d259f3ed 100644
--- a/examples/sites/demos/mobile-first/app/select/show-tip.vue
+++ b/examples/sites/demos/mobile-first/app/select/show-tip.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/size-medium.vue b/examples/sites/demos/mobile-first/app/select/size-medium.vue
index ac3390362..e898a37c8 100644
--- a/examples/sites/demos/mobile-first/app/select/size-medium.vue
+++ b/examples/sites/demos/mobile-first/app/select/size-medium.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/size-mini.vue b/examples/sites/demos/mobile-first/app/select/size-mini.vue
index 732f271bd..17ca0c88f 100644
--- a/examples/sites/demos/mobile-first/app/select/size-mini.vue
+++ b/examples/sites/demos/mobile-first/app/select/size-mini.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/size-small.vue b/examples/sites/demos/mobile-first/app/select/size-small.vue
index bb4b860b0..fd5302f31 100644
--- a/examples/sites/demos/mobile-first/app/select/size-small.vue
+++ b/examples/sites/demos/mobile-first/app/select/size-small.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/slot-default.vue b/examples/sites/demos/mobile-first/app/select/slot-default.vue
index 7cc8683f5..4201e2072 100644
--- a/examples/sites/demos/mobile-first/app/select/slot-default.vue
+++ b/examples/sites/demos/mobile-first/app/select/slot-default.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/slot-empty.vue b/examples/sites/demos/mobile-first/app/select/slot-empty.vue
index 7dc2d7bc8..2daaf7a6e 100644
--- a/examples/sites/demos/mobile-first/app/select/slot-empty.vue
+++ b/examples/sites/demos/mobile-first/app/select/slot-empty.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/slot-label.vue b/examples/sites/demos/mobile-first/app/select/slot-label.vue
index 89ca2e9e5..3a17c9ff5 100644
--- a/examples/sites/demos/mobile-first/app/select/slot-label.vue
+++ b/examples/sites/demos/mobile-first/app/select/slot-label.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/tag-copy-all-split.vue b/examples/sites/demos/mobile-first/app/select/tag-copy-all-split.vue
index a4957f3b5..f677610a1 100644
--- a/examples/sites/demos/mobile-first/app/select/tag-copy-all-split.vue
+++ b/examples/sites/demos/mobile-first/app/select/tag-copy-all-split.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/tag-copy-all.vue b/examples/sites/demos/mobile-first/app/select/tag-copy-all.vue
index ebabbc00c..aa61489ac 100644
--- a/examples/sites/demos/mobile-first/app/select/tag-copy-all.vue
+++ b/examples/sites/demos/mobile-first/app/select/tag-copy-all.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/tag-select.vue b/examples/sites/demos/mobile-first/app/select/tag-select.vue
index 38f73560b..b2898f620 100644
--- a/examples/sites/demos/mobile-first/app/select/tag-select.vue
+++ b/examples/sites/demos/mobile-first/app/select/tag-select.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/select/title.vue b/examples/sites/demos/mobile-first/app/select/title.vue
index 65762c300..2d6163035 100644
--- a/examples/sites/demos/mobile-first/app/select/title.vue
+++ b/examples/sites/demos/mobile-first/app/select/title.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/selected-box/basic-usage.vue b/examples/sites/demos/mobile-first/app/selected-box/basic-usage.vue
index beba7e87b..b951f15f8 100644
--- a/examples/sites/demos/mobile-first/app/selected-box/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/selected-box/basic-usage.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script>
-import { SelectedBox, Button } from '@opentiny/vue'
+import { TinySelectedBox, TinyButton } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinySelectedBox: SelectedBox,
-    TinyButton: Button
+    TinySelectedBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/selected-box/inverse.vue b/examples/sites/demos/mobile-first/app/selected-box/inverse.vue
index d9783a4b3..5e70e7231 100644
--- a/examples/sites/demos/mobile-first/app/selected-box/inverse.vue
+++ b/examples/sites/demos/mobile-first/app/selected-box/inverse.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { SelectedBox, Button } from '@opentiny/vue'
+import { TinySelectedBox, TinyButton } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinySelectedBox: SelectedBox,
-    TinyButton: Button
+    TinySelectedBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/selected-box/slots.vue b/examples/sites/demos/mobile-first/app/selected-box/slots.vue
index 58aa5b694..47787c125 100644
--- a/examples/sites/demos/mobile-first/app/selected-box/slots.vue
+++ b/examples/sites/demos/mobile-first/app/selected-box/slots.vue
@@ -30,13 +30,13 @@
 </template>
 
 <script>
-import { SelectedBox, Button } from '@opentiny/vue'
+import { TinySelectedBox, TinyButton } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinySelectedBox: SelectedBox,
-    TinyButton: Button
+    TinySelectedBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/signature/basic-usage.vue b/examples/sites/demos/mobile-first/app/signature/basic-usage.vue
index 984e4a9ea..2fea15d0f 100644
--- a/examples/sites/demos/mobile-first/app/signature/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/signature/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Signature } from '@opentiny/vue'
+import { TinySignature } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature
+    TinySignature
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/signature/bgcolor.vue b/examples/sites/demos/mobile-first/app/signature/bgcolor.vue
index 82d97f5fc..be8a80ccc 100644
--- a/examples/sites/demos/mobile-first/app/signature/bgcolor.vue
+++ b/examples/sites/demos/mobile-first/app/signature/bgcolor.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Signature } from '@opentiny/vue'
+import { TinySignature } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature
+    TinySignature
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/signature/button-text.vue b/examples/sites/demos/mobile-first/app/signature/button-text.vue
index 169830cdb..45ef387f6 100644
--- a/examples/sites/demos/mobile-first/app/signature/button-text.vue
+++ b/examples/sites/demos/mobile-first/app/signature/button-text.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Signature } from '@opentiny/vue'
+import { TinySignature } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature
+    TinySignature
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/signature/get-image.vue b/examples/sites/demos/mobile-first/app/signature/get-image.vue
index ed7b295ec..e5a96a43c 100644
--- a/examples/sites/demos/mobile-first/app/signature/get-image.vue
+++ b/examples/sites/demos/mobile-first/app/signature/get-image.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script>
-import { Signature, Image, Button } from '@opentiny/vue'
+import { TinySignature, TinyImage, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature,
-    TinyImage: Image,
-    TinyButton: Button
+    TinySignature,
+    TinyImage,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/signature/in-dialogbox.vue b/examples/sites/demos/mobile-first/app/signature/in-dialogbox.vue
index 45bcadf72..5aac08b03 100644
--- a/examples/sites/demos/mobile-first/app/signature/in-dialogbox.vue
+++ b/examples/sites/demos/mobile-first/app/signature/in-dialogbox.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import { Signature, Button, DialogBox } from '@opentiny/vue'
+import { TinySignature, TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature,
-    TinyDialogBox: DialogBox,
-    TinyButton: Button
+    TinySignature,
+    TinyDialogBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/signature/line-style.vue b/examples/sites/demos/mobile-first/app/signature/line-style.vue
index c32a79892..93e182432 100644
--- a/examples/sites/demos/mobile-first/app/signature/line-style.vue
+++ b/examples/sites/demos/mobile-first/app/signature/line-style.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Signature } from '@opentiny/vue'
+import { TinySignature } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature
+    TinySignature
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/signature/placeholder.vue b/examples/sites/demos/mobile-first/app/signature/placeholder.vue
index a54d49035..37bad9dc7 100644
--- a/examples/sites/demos/mobile-first/app/signature/placeholder.vue
+++ b/examples/sites/demos/mobile-first/app/signature/placeholder.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Signature } from '@opentiny/vue'
+import { TinySignature } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature
+    TinySignature
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/signature/preview.vue b/examples/sites/demos/mobile-first/app/signature/preview.vue
index ffd6a58ae..f879ba4dc 100644
--- a/examples/sites/demos/mobile-first/app/signature/preview.vue
+++ b/examples/sites/demos/mobile-first/app/signature/preview.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Signature, Image } from '@opentiny/vue'
+import { TinySignature, TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature,
-    TinyImage: Image
+    TinySignature,
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/signature/value.vue b/examples/sites/demos/mobile-first/app/signature/value.vue
index bdd7a99eb..bc172e836 100644
--- a/examples/sites/demos/mobile-first/app/signature/value.vue
+++ b/examples/sites/demos/mobile-first/app/signature/value.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Signature } from '@opentiny/vue'
+import { TinySignature } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySignature: Signature
+    TinySignature
   },
   mounted() {
     setTimeout(() => {
diff --git a/examples/sites/demos/mobile-first/app/slider-button/basic-usage.vue b/examples/sites/demos/mobile-first/app/slider-button/basic-usage.vue
index 93cd65e4f..a5a385882 100644
--- a/examples/sites/demos/mobile-first/app/slider-button/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/slider-button/basic-usage.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { SliderButton, SliderButtonGroup } from '@opentiny/vue'
+import { TinySliderButton, TinySliderButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySliderButton: SliderButton,
-    TinySliderButtonGroup: SliderButtonGroup
+    TinySliderButton,
+    TinySliderButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider-button/custom-content.vue b/examples/sites/demos/mobile-first/app/slider-button/custom-content.vue
index c1c596d64..140713bd5 100644
--- a/examples/sites/demos/mobile-first/app/slider-button/custom-content.vue
+++ b/examples/sites/demos/mobile-first/app/slider-button/custom-content.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { SliderButton, SliderButtonGroup, Modal } from '@opentiny/vue'
+import { TinySliderButton, TinySliderButtonGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySliderButton: SliderButton,
-    TinySliderButtonGroup: SliderButtonGroup
+    TinySliderButton,
+    TinySliderButtonGroup
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   },
   methods: {
     change(label) {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，选中的 Radio label 值为：' + label,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/slider-button/page-turn.vue b/examples/sites/demos/mobile-first/app/slider-button/page-turn.vue
index 0a959fa5f..3783d3aa3 100644
--- a/examples/sites/demos/mobile-first/app/slider-button/page-turn.vue
+++ b/examples/sites/demos/mobile-first/app/slider-button/page-turn.vue
@@ -28,14 +28,14 @@
 </template>
 
 <script>
-import { SliderButtonGroup, Modal, SliderButton, Button } from '@opentiny/vue'
+import { TinySliderButtonGroup, TinyModal, TinySliderButton, TinyButton } from '@opentiny/vue'
 import { IconCardMode, IconEditorMenuLeft, IconException, IconDerive } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySliderButtonGroup: SliderButtonGroup,
-    TinySliderButton: SliderButton,
-    TinyButton: Button,
+    TinySliderButtonGroup,
+    TinySliderButton,
+    TinyButton,
     IconCardMode: IconCardMode(),
     IconEditorMenuLeft: IconEditorMenuLeft(),
     IconException: IconException(),
@@ -89,7 +89,7 @@ export default {
     advancedClick(label) {
       this.advancedActive1 = label
 
-      Modal.message(`节点label: ${label}`)
+      TinyModal.message(`节点label: ${label}`)
     },
     changeButtonSize() {
       this.buttonSize = 'large'
diff --git a/examples/sites/demos/mobile-first/app/slider-button/slider-button-options.vue b/examples/sites/demos/mobile-first/app/slider-button/slider-button-options.vue
index 3ec784b14..b7fe75cb9 100644
--- a/examples/sites/demos/mobile-first/app/slider-button/slider-button-options.vue
+++ b/examples/sites/demos/mobile-first/app/slider-button/slider-button-options.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { SliderButtonGroup, Modal } from '@opentiny/vue'
+import { TinySliderButtonGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySliderButtonGroup: SliderButtonGroup
+    TinySliderButtonGroup
   },
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message({ message: 'click' })
+      TinyModal.message({ message: 'click' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/slider-button/slider-button-size.vue b/examples/sites/demos/mobile-first/app/slider-button/slider-button-size.vue
index b42173cf8..bce50cedb 100644
--- a/examples/sites/demos/mobile-first/app/slider-button/slider-button-size.vue
+++ b/examples/sites/demos/mobile-first/app/slider-button/slider-button-size.vue
@@ -49,13 +49,13 @@
 </template>
 
 <script>
-import { SliderButton, SliderButtonGroup } from '@opentiny/vue'
+import { TinySliderButton, TinySliderButtonGroup } from '@opentiny/vue'
 import { IconCardMode, IconEditorMenuLeft, IconException, IconDerive } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySliderButton: SliderButton,
-    TinySliderButtonGroup: SliderButtonGroup,
+    TinySliderButton,
+    TinySliderButtonGroup,
     IconCardMode: IconCardMode(),
     IconEditorMenuLeft: IconEditorMenuLeft(),
     IconException: IconException(),
diff --git a/examples/sites/demos/mobile-first/app/slider-button/slider-button-type.vue b/examples/sites/demos/mobile-first/app/slider-button/slider-button-type.vue
index be29d057f..503a57886 100644
--- a/examples/sites/demos/mobile-first/app/slider-button/slider-button-type.vue
+++ b/examples/sites/demos/mobile-first/app/slider-button/slider-button-type.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script>
-import { SliderButton, SliderButtonGroup } from '@opentiny/vue'
+import { TinySliderButton, TinySliderButtonGroup } from '@opentiny/vue'
 import { IconCardMode, IconEditorMenuLeft, IconException, IconDerive } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySliderButton: SliderButton,
-    TinySliderButtonGroup: SliderButtonGroup,
+    TinySliderButton,
+    TinySliderButtonGroup,
     IconCardMode: IconCardMode(),
     IconEditorMenuLeft: IconEditorMenuLeft(),
     IconException: IconException(),
diff --git a/examples/sites/demos/mobile-first/app/slider-button/slider-disabled.vue b/examples/sites/demos/mobile-first/app/slider-button/slider-disabled.vue
index 291f9336f..cc3461735 100644
--- a/examples/sites/demos/mobile-first/app/slider-button/slider-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/slider-button/slider-disabled.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { SliderButton, SliderButtonGroup } from '@opentiny/vue'
+import { TinySliderButton, TinySliderButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySliderButton: SliderButton,
-    TinySliderButtonGroup: SliderButtonGroup
+    TinySliderButton,
+    TinySliderButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/about-step.vue b/examples/sites/demos/mobile-first/app/slider/about-step.vue
index 41a9b4a26..bb2ab596e 100644
--- a/examples/sites/demos/mobile-first/app/slider/about-step.vue
+++ b/examples/sites/demos/mobile-first/app/slider/about-step.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/basic-usage.vue b/examples/sites/demos/mobile-first/app/slider/basic-usage.vue
index 51e57fe24..9edc386dc 100644
--- a/examples/sites/demos/mobile-first/app/slider/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/slider/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/dynamic-disable.vue b/examples/sites/demos/mobile-first/app/slider/dynamic-disable.vue
index c89270fcc..1651499d6 100644
--- a/examples/sites/demos/mobile-first/app/slider/dynamic-disable.vue
+++ b/examples/sites/demos/mobile-first/app/slider/dynamic-disable.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/format-tooltip.vue b/examples/sites/demos/mobile-first/app/slider/format-tooltip.vue
index 5798d477e..bdcc14ea0 100644
--- a/examples/sites/demos/mobile-first/app/slider/format-tooltip.vue
+++ b/examples/sites/demos/mobile-first/app/slider/format-tooltip.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/left-right-slot.vue b/examples/sites/demos/mobile-first/app/slider/left-right-slot.vue
index 6adead441..aef4af0cb 100644
--- a/examples/sites/demos/mobile-first/app/slider/left-right-slot.vue
+++ b/examples/sites/demos/mobile-first/app/slider/left-right-slot.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 import { IconFrown, IconSmile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySlider: Slider,
+    TinySlider,
     TinyIconFrown: IconFrown(),
     TinyIconSmile: IconSmile()
   },
diff --git a/examples/sites/demos/mobile-first/app/slider/max-min.vue b/examples/sites/demos/mobile-first/app/slider/max-min.vue
index df8fb1e48..6cafe28e0 100644
--- a/examples/sites/demos/mobile-first/app/slider/max-min.vue
+++ b/examples/sites/demos/mobile-first/app/slider/max-min.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/range-select.vue b/examples/sites/demos/mobile-first/app/slider/range-select.vue
index dd671a7ab..81116a7c4 100644
--- a/examples/sites/demos/mobile-first/app/slider/range-select.vue
+++ b/examples/sites/demos/mobile-first/app/slider/range-select.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/show-graduate.vue b/examples/sites/demos/mobile-first/app/slider/show-graduate.vue
index 23cff5330..519ab3beb 100644
--- a/examples/sites/demos/mobile-first/app/slider/show-graduate.vue
+++ b/examples/sites/demos/mobile-first/app/slider/show-graduate.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/show-input.vue b/examples/sites/demos/mobile-first/app/slider/show-input.vue
index 7e7006734..15b38091f 100644
--- a/examples/sites/demos/mobile-first/app/slider/show-input.vue
+++ b/examples/sites/demos/mobile-first/app/slider/show-input.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/show-label.vue b/examples/sites/demos/mobile-first/app/slider/show-label.vue
index dc668583a..b5fba48ac 100644
--- a/examples/sites/demos/mobile-first/app/slider/show-label.vue
+++ b/examples/sites/demos/mobile-first/app/slider/show-label.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/show-tip.vue b/examples/sites/demos/mobile-first/app/slider/show-tip.vue
index 379df7a13..8581c9b2b 100644
--- a/examples/sites/demos/mobile-first/app/slider/show-tip.vue
+++ b/examples/sites/demos/mobile-first/app/slider/show-tip.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/slider/slider-event-change.vue b/examples/sites/demos/mobile-first/app/slider/slider-event-change.vue
index 1ffff20b2..8f6a354c2 100644
--- a/examples/sites/demos/mobile-first/app/slider/slider-event-change.vue
+++ b/examples/sites/demos/mobile-first/app/slider/slider-event-change.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider, Notify } from '@opentiny/vue'
+import { TinySlider, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     change(val) {
-      Notify({
+      TinyNotify({
         title: '触发change事件',
         message: `改变值为${val}`,
         offset: 100
diff --git a/examples/sites/demos/mobile-first/app/slider/slider-event-start.vue b/examples/sites/demos/mobile-first/app/slider/slider-event-start.vue
index ff71ff840..8569ab701 100644
--- a/examples/sites/demos/mobile-first/app/slider/slider-event-start.vue
+++ b/examples/sites/demos/mobile-first/app/slider/slider-event-start.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider, Notify } from '@opentiny/vue'
+import { TinySlider, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     start(val) {
-      Notify({
+      TinyNotify({
         title: '触发开始滑动事件',
         message: `${JSON.stringify(val)}`,
         offset: 100
diff --git a/examples/sites/demos/mobile-first/app/slider/slider-event-stop.vue b/examples/sites/demos/mobile-first/app/slider/slider-event-stop.vue
index 6f5fecbc7..1196bc7a4 100644
--- a/examples/sites/demos/mobile-first/app/slider/slider-event-stop.vue
+++ b/examples/sites/demos/mobile-first/app/slider/slider-event-stop.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Slider, Notify } from '@opentiny/vue'
+import { TinySlider, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
   },
   methods: {
     stop(val) {
-      Notify({
+      TinyNotify({
         title: '触发停止滑动事件',
         message: `停止后值为${val}`,
         offset: 150
diff --git a/examples/sites/demos/mobile-first/app/slider/slider-slot.vue b/examples/sites/demos/mobile-first/app/slider/slider-slot.vue
index 237973805..6f9d0014a 100644
--- a/examples/sites/demos/mobile-first/app/slider/slider-slot.vue
+++ b/examples/sites/demos/mobile-first/app/slider/slider-slot.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/standard-list-item/basic-usage.vue b/examples/sites/demos/mobile-first/app/standard-list-item/basic-usage.vue
index 5bf6cfccf..9faf26f6f 100644
--- a/examples/sites/demos/mobile-first/app/standard-list-item/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/standard-list-item/basic-usage.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { StandardListItem } from '@opentiny/vue'
+import { TinyStandardListItem } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare, IconHelp } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyStandardListItem: StandardListItem
+    TinyStandardListItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/standard-list-item/content-slot.vue b/examples/sites/demos/mobile-first/app/standard-list-item/content-slot.vue
index 642baf7cd..04f1de572 100644
--- a/examples/sites/demos/mobile-first/app/standard-list-item/content-slot.vue
+++ b/examples/sites/demos/mobile-first/app/standard-list-item/content-slot.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { StandardListItem } from '@opentiny/vue'
+import { TinyStandardListItem } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyStandardListItem: StandardListItem
+    TinyStandardListItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/standard-list-item/custom-class.vue b/examples/sites/demos/mobile-first/app/standard-list-item/custom-class.vue
index b3736e538..b24513b5d 100644
--- a/examples/sites/demos/mobile-first/app/standard-list-item/custom-class.vue
+++ b/examples/sites/demos/mobile-first/app/standard-list-item/custom-class.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { StandardListItem } from '@opentiny/vue'
+import { TinyStandardListItem } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyStandardListItem: StandardListItem
+    TinyStandardListItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/standard-list-item/icon-click-event.vue b/examples/sites/demos/mobile-first/app/standard-list-item/icon-click-event.vue
index 19ed85d7e..ce5612f9a 100644
--- a/examples/sites/demos/mobile-first/app/standard-list-item/icon-click-event.vue
+++ b/examples/sites/demos/mobile-first/app/standard-list-item/icon-click-event.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { StandardListItem, Modal } from '@opentiny/vue'
+import { TinyStandardListItem, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyStandardListItem: StandardListItem
+    TinyStandardListItem
   },
   data() {
     return {
@@ -48,7 +48,7 @@ export default {
   },
   methods: {
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/standard-list-item/icon-disabled.vue b/examples/sites/demos/mobile-first/app/standard-list-item/icon-disabled.vue
index 316bbd71f..b3611c26d 100644
--- a/examples/sites/demos/mobile-first/app/standard-list-item/icon-disabled.vue
+++ b/examples/sites/demos/mobile-first/app/standard-list-item/icon-disabled.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { StandardListItem, Modal } from '@opentiny/vue'
+import { TinyStandardListItem, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyStandardListItem: StandardListItem
+    TinyStandardListItem
   },
   data() {
     return {
@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/standard-list-item/image-operate-slot.vue b/examples/sites/demos/mobile-first/app/standard-list-item/image-operate-slot.vue
index 45ffb4759..bc04943b2 100644
--- a/examples/sites/demos/mobile-first/app/standard-list-item/image-operate-slot.vue
+++ b/examples/sites/demos/mobile-first/app/standard-list-item/image-operate-slot.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { StandardListItem } from '@opentiny/vue'
+import { TinyStandardListItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyStandardListItem: StandardListItem
+    TinyStandardListItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/standard-list-item/type.vue b/examples/sites/demos/mobile-first/app/standard-list-item/type.vue
index f012f5348..b877c0932 100644
--- a/examples/sites/demos/mobile-first/app/standard-list-item/type.vue
+++ b/examples/sites/demos/mobile-first/app/standard-list-item/type.vue
@@ -24,12 +24,12 @@
 </template>
 
 <script>
-import { StandardListItem, Modal } from '@opentiny/vue'
+import { TinyStandardListItem, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyStandardListItem: StandardListItem
+    TinyStandardListItem
   },
   data() {
     return {
@@ -68,7 +68,7 @@ export default {
   },
   methods: {
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/mobile-first/app/steps/advanced-flex.vue b/examples/sites/demos/mobile-first/app/steps/advanced-flex.vue
index 7b489ec8e..3b22d5d15 100644
--- a/examples/sites/demos/mobile-first/app/steps/advanced-flex.vue
+++ b/examples/sites/demos/mobile-first/app/steps/advanced-flex.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -36,7 +36,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/steps/advanced-no-arrow.vue b/examples/sites/demos/mobile-first/app/steps/advanced-no-arrow.vue
index 70b389ae4..a0e95240b 100644
--- a/examples/sites/demos/mobile-first/app/steps/advanced-no-arrow.vue
+++ b/examples/sites/demos/mobile-first/app/steps/advanced-no-arrow.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -38,7 +38,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/steps/advanced-steps.vue b/examples/sites/demos/mobile-first/app/steps/advanced-steps.vue
index 0ffc12285..ff9a9ea5a 100644
--- a/examples/sites/demos/mobile-first/app/steps/advanced-steps.vue
+++ b/examples/sites/demos/mobile-first/app/steps/advanced-steps.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -39,7 +39,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/steps/complicated.vue b/examples/sites/demos/mobile-first/app/steps/complicated.vue
index 2c79cfb3a..45dc7dc05 100644
--- a/examples/sites/demos/mobile-first/app/steps/complicated.vue
+++ b/examples/sites/demos/mobile-first/app/steps/complicated.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import { Steps, Popover } from '@opentiny/vue'
+import { TinySteps, TinyPopover } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinySteps: Steps
+    TinyPopover,
+    TinySteps
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/steps/data-resource-saas.vue b/examples/sites/demos/mobile-first/app/steps/data-resource-saas.vue
index 287b06732..7487e8946 100644
--- a/examples/sites/demos/mobile-first/app/steps/data-resource-saas.vue
+++ b/examples/sites/demos/mobile-first/app/steps/data-resource-saas.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -46,12 +46,12 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     },
     advancedClick2(index, node) {
       this.advancedActive2 = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/steps/data-resource.vue b/examples/sites/demos/mobile-first/app/steps/data-resource.vue
index f33ac4475..fe655f026 100644
--- a/examples/sites/demos/mobile-first/app/steps/data-resource.vue
+++ b/examples/sites/demos/mobile-first/app/steps/data-resource.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/steps/duration.vue b/examples/sites/demos/mobile-first/app/steps/duration.vue
index 00ae32bb4..bb5146c1f 100644
--- a/examples/sites/demos/mobile-first/app/steps/duration.vue
+++ b/examples/sites/demos/mobile-first/app/steps/duration.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Steps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/steps/slot-bottom.vue b/examples/sites/demos/mobile-first/app/steps/slot-bottom.vue
index 5226503df..e280fe1bb 100644
--- a/examples/sites/demos/mobile-first/app/steps/slot-bottom.vue
+++ b/examples/sites/demos/mobile-first/app/steps/slot-bottom.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -53,7 +53,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/steps/slot-item.vue b/examples/sites/demos/mobile-first/app/steps/slot-item.vue
index 2c14a4562..7e6a5ce51 100644
--- a/examples/sites/demos/mobile-first/app/steps/slot-item.vue
+++ b/examples/sites/demos/mobile-first/app/steps/slot-item.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -49,7 +49,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/steps/slot.vue b/examples/sites/demos/mobile-first/app/steps/slot.vue
index 23fd5c479..51a8ed605 100644
--- a/examples/sites/demos/mobile-first/app/steps/slot.vue
+++ b/examples/sites/demos/mobile-first/app/steps/slot.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -47,7 +47,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/steps/vertical.vue b/examples/sites/demos/mobile-first/app/steps/vertical.vue
index fcb092040..d931cfea0 100644
--- a/examples/sites/demos/mobile-first/app/steps/vertical.vue
+++ b/examples/sites/demos/mobile-first/app/steps/vertical.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/sticky/basic-usage-composition-api.vue b/examples/sites/demos/mobile-first/app/sticky/basic-usage-composition-api.vue
index 7268e34e7..2e748db44 100644
--- a/examples/sites/demos/mobile-first/app/sticky/basic-usage-composition-api.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/basic-usage-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/mobile-first/app/sticky/basic-usage.vue b/examples/sites/demos/mobile-first/app/sticky/basic-usage.vue
index f31e99f5b..d72161c2f 100644
--- a/examples/sites/demos/mobile-first/app/sticky/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/basic-usage.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/sticky/events-composition-api.vue b/examples/sites/demos/mobile-first/app/sticky/events-composition-api.vue
index 3ecf47ccc..8f9ba047c 100644
--- a/examples/sites/demos/mobile-first/app/sticky/events-composition-api.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/events-composition-api.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinySticky, TinyButton, TinyModal } from '@opentiny/vue'
 
 let isShowNumber = 0
 
 const change = (isFixed) => {
-  Modal.message({
+  TinyModal.message({
     message: `触发 change 事件，当前isFixed为：${isFixed}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/mobile-first/app/sticky/events.vue b/examples/sites/demos/mobile-first/app/sticky/events.vue
index 2166a4deb..bcede4f57 100644
--- a/examples/sites/demos/mobile-first/app/sticky/events.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/events.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   },
   methods: {
     change(isFixed) {
diff --git a/examples/sites/demos/mobile-first/app/sticky/offset-composition-api.vue b/examples/sites/demos/mobile-first/app/sticky/offset-composition-api.vue
index 8e2778061..c1dc88e7d 100644
--- a/examples/sites/demos/mobile-first/app/sticky/offset-composition-api.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/offset-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/mobile-first/app/sticky/offset.vue b/examples/sites/demos/mobile-first/app/sticky/offset.vue
index 2a53af73d..c961267fa 100644
--- a/examples/sites/demos/mobile-first/app/sticky/offset.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/offset.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/sticky/position-composition-api.vue b/examples/sites/demos/mobile-first/app/sticky/position-composition-api.vue
index 2875fed3c..c2dfef18b 100644
--- a/examples/sites/demos/mobile-first/app/sticky/position-composition-api.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/position-composition-api.vue
@@ -8,5 +8,5 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/mobile-first/app/sticky/position.vue b/examples/sites/demos/mobile-first/app/sticky/position.vue
index 1aa87fca3..b9c1eda53 100644
--- a/examples/sites/demos/mobile-first/app/sticky/position.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/position.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/sticky/target-composition-api.vue b/examples/sites/demos/mobile-first/app/sticky/target-composition-api.vue
index 1ac014cab..d1e7a0307 100644
--- a/examples/sites/demos/mobile-first/app/sticky/target-composition-api.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/target-composition-api.vue
@@ -9,5 +9,5 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/mobile-first/app/sticky/target.vue b/examples/sites/demos/mobile-first/app/sticky/target.vue
index 85e1a1003..db035b785 100644
--- a/examples/sites/demos/mobile-first/app/sticky/target.vue
+++ b/examples/sites/demos/mobile-first/app/sticky/target.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/switch/basic-usage.vue b/examples/sites/demos/mobile-first/app/switch/basic-usage.vue
index 38e19f1fe..02c11d2a0 100644
--- a/examples/sites/demos/mobile-first/app/switch/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/switch/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/switch/custom-open-close.vue b/examples/sites/demos/mobile-first/app/switch/custom-open-close.vue
index 10fe0f7bb..d0ea4bb01 100644
--- a/examples/sites/demos/mobile-first/app/switch/custom-open-close.vue
+++ b/examples/sites/demos/mobile-first/app/switch/custom-open-close.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/switch/custom-true-false-value.vue b/examples/sites/demos/mobile-first/app/switch/custom-true-false-value.vue
index bfbadef12..0ddb29b8f 100644
--- a/examples/sites/demos/mobile-first/app/switch/custom-true-false-value.vue
+++ b/examples/sites/demos/mobile-first/app/switch/custom-true-false-value.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/switch/dynamic-disable.vue b/examples/sites/demos/mobile-first/app/switch/dynamic-disable.vue
index 836bf9b96..c1cf9a7cb 100644
--- a/examples/sites/demos/mobile-first/app/switch/dynamic-disable.vue
+++ b/examples/sites/demos/mobile-first/app/switch/dynamic-disable.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/switch/enent.vue b/examples/sites/demos/mobile-first/app/switch/enent.vue
index 68c8f76a7..1aa11f18f 100644
--- a/examples/sites/demos/mobile-first/app/switch/enent.vue
+++ b/examples/sites/demos/mobile-first/app/switch/enent.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Switch, Modal } from '@opentiny/vue'
+import { TinySwitch, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   methods: {
     enent(val) {
-      Modal.message({ message: `${val}`, status: 'info' })
+      TinyModal.message({ message: `${val}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/switch/icon-mode.vue b/examples/sites/demos/mobile-first/app/switch/icon-mode.vue
index c10b86f42..1b6537049 100644
--- a/examples/sites/demos/mobile-first/app/switch/icon-mode.vue
+++ b/examples/sites/demos/mobile-first/app/switch/icon-mode.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/switch/loading-mode.vue b/examples/sites/demos/mobile-first/app/switch/loading-mode.vue
index 171e08d1a..e714e41d6 100644
--- a/examples/sites/demos/mobile-first/app/switch/loading-mode.vue
+++ b/examples/sites/demos/mobile-first/app/switch/loading-mode.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/switch/mini-mode.vue b/examples/sites/demos/mobile-first/app/switch/mini-mode.vue
index f7e3d7fa3..931187761 100644
--- a/examples/sites/demos/mobile-first/app/switch/mini-mode.vue
+++ b/examples/sites/demos/mobile-first/app/switch/mini-mode.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return { value1: true }
diff --git a/examples/sites/demos/mobile-first/app/switch/word-mode.vue b/examples/sites/demos/mobile-first/app/switch/word-mode.vue
index 307e71d2c..8413d1bd9 100644
--- a/examples/sites/demos/mobile-first/app/switch/word-mode.vue
+++ b/examples/sites/demos/mobile-first/app/switch/word-mode.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabbar/active-inactive-color.vue b/examples/sites/demos/mobile-first/app/tabbar/active-inactive-color.vue
index 74cb3a891..045831894 100644
--- a/examples/sites/demos/mobile-first/app/tabbar/active-inactive-color.vue
+++ b/examples/sites/demos/mobile-first/app/tabbar/active-inactive-color.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabbar/badge.vue b/examples/sites/demos/mobile-first/app/tabbar/badge.vue
index 3bf4a67f0..095ce71d5 100644
--- a/examples/sites/demos/mobile-first/app/tabbar/badge.vue
+++ b/examples/sites/demos/mobile-first/app/tabbar/badge.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabbar/base.vue b/examples/sites/demos/mobile-first/app/tabbar/base.vue
index b3d215a45..8308de4a4 100644
--- a/examples/sites/demos/mobile-first/app/tabbar/base.vue
+++ b/examples/sites/demos/mobile-first/app/tabbar/base.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabbar/border.vue b/examples/sites/demos/mobile-first/app/tabbar/border.vue
index 9f62dc93d..84e724a07 100644
--- a/examples/sites/demos/mobile-first/app/tabbar/border.vue
+++ b/examples/sites/demos/mobile-first/app/tabbar/border.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabbar/custom-icon.vue b/examples/sites/demos/mobile-first/app/tabbar/custom-icon.vue
index f1ce49cf2..cb60e6585 100644
--- a/examples/sites/demos/mobile-first/app/tabbar/custom-icon.vue
+++ b/examples/sites/demos/mobile-first/app/tabbar/custom-icon.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script>
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { IconWebPlus, IconNode, IconUser } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabbar/event-change.vue b/examples/sites/demos/mobile-first/app/tabbar/event-change.vue
index 523a73eba..9288fe41a 100644
--- a/examples/sites/demos/mobile-first/app/tabbar/event-change.vue
+++ b/examples/sites/demos/mobile-first/app/tabbar/event-change.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Tabbar, TabbarItem, Modal } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem, TinyModal } from '@opentiny/vue'
 import { IconWebPlus, IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     handleChange(val) {
-      Modal.message({ message: '当前标签页为：' + val, status: 'info' })
+      TinyModal.message({ message: '当前标签页为：' + val, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/tabbar/options.vue b/examples/sites/demos/mobile-first/app/tabbar/options.vue
index d58c2d778..d68da3007 100644
--- a/examples/sites/demos/mobile-first/app/tabbar/options.vue
+++ b/examples/sites/demos/mobile-first/app/tabbar/options.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { Tabbar } from '@opentiny/vue'
+import { TinyTabbar } from '@opentiny/vue'
 import { IconWebPlus, IconMail, IconMarkOn, IconUser, IconEllipsis } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar
+    TinyTabbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabbar/slot-icon.vue b/examples/sites/demos/mobile-first/app/tabbar/slot-icon.vue
index 1b544dd09..acfdc987f 100644
--- a/examples/sites/demos/mobile-first/app/tabbar/slot-icon.vue
+++ b/examples/sites/demos/mobile-first/app/tabbar/slot-icon.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { IconMail, IconMarkOn, IconUser } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/align-center.vue b/examples/sites/demos/mobile-first/app/tabs/align-center.vue
index d9f68426a..069956b43 100644
--- a/examples/sites/demos/mobile-first/app/tabs/align-center.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/align-center.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return { activeName: '1' }
diff --git a/examples/sites/demos/mobile-first/app/tabs/basic-usage.vue b/examples/sites/demos/mobile-first/app/tabs/basic-usage.vue
index fa6b220f8..5045ca75f 100644
--- a/examples/sites/demos/mobile-first/app/tabs/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/basic-usage.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/before-leave.vue b/examples/sites/demos/mobile-first/app/tabs/before-leave.vue
index 4d42998af..2448f615d 100644
--- a/examples/sites/demos/mobile-first/app/tabs/before-leave.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/before-leave.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/change-title.vue b/examples/sites/demos/mobile-first/app/tabs/change-title.vue
index 7c733a119..ada3a6f72 100644
--- a/examples/sites/demos/mobile-first/app/tabs/change-title.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/change-title.vue
@@ -9,13 +9,13 @@
 </template>
 
 <script>
-import { Tabs, TabItem, Button } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyButton: Button
+    TinyTabs,
+    TinyTabItem,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/custom-tab-content.vue b/examples/sites/demos/mobile-first/app/tabs/custom-tab-content.vue
index c228da3f2..ea543bf10 100644
--- a/examples/sites/demos/mobile-first/app/tabs/custom-tab-content.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/custom-tab-content.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/custom-tab-title.vue b/examples/sites/demos/mobile-first/app/tabs/custom-tab-title.vue
index 748227cd3..1403692a8 100644
--- a/examples/sites/demos/mobile-first/app/tabs/custom-tab-title.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/custom-tab-title.vue
@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { IconCalendar, IconReplies } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
+    TinyTabs,
+    TinyTabItem,
     IconCalendar: IconCalendar(),
     IconReplies: IconReplies()
   },
diff --git a/examples/sites/demos/mobile-first/app/tabs/mobile-first.vue b/examples/sites/demos/mobile-first/app/tabs/mobile-first.vue
index 35b0a6479..11d15ff61 100644
--- a/examples/sites/demos/mobile-first/app/tabs/mobile-first.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/mobile-first.vue
@@ -48,17 +48,17 @@
 </template>
 
 <script>
-import { Tabs, TabItem, Modal, Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyModal, TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 import { IconSetting } from '@opentiny/vue-icon'
 import { h } from '@opentiny/vue-common'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
+    TinyTabs,
+    TinyTabItem,
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem,
     IconSetting: IconSetting()
   },
   data() {
@@ -66,20 +66,20 @@ export default {
   },
   methods: {
     edit(targetName, action) {
-      Modal.message(`edit事件 - ${targetName} - ${action}`)
+      TinyModal.message(`edit事件 - ${targetName} - ${action}`)
     },
     click(tab) {
-      Modal.message(`click事件 - ${tab.name}`)
+      TinyModal.message(`click事件 - ${tab.name}`)
     },
     close(name) {
-      Modal.message(`close事件 - ${name}`)
+      TinyModal.message(`close事件 - ${name}`)
     },
     add() {
-      Modal.message('add事件')
+      TinyModal.message('add事件')
     },
     itemClick(itemData) {
       const parts = itemData.split('-')
-      Modal.message('点击了' + parts[1] + '的操作' + parts[2])
+      TinyModal.message('点击了' + parts[1] + '的操作' + parts[2])
     },
     renderTitle() {
       return h('span', 'renderTitle')
diff --git a/examples/sites/demos/mobile-first/app/tabs/optimized-lazy.vue b/examples/sites/demos/mobile-first/app/tabs/optimized-lazy.vue
index 6f9b097d5..9e02de03d 100644
--- a/examples/sites/demos/mobile-first/app/tabs/optimized-lazy.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/optimized-lazy.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/optimized.vue b/examples/sites/demos/mobile-first/app/tabs/optimized.vue
index 218b5f467..d5c8ea343 100644
--- a/examples/sites/demos/mobile-first/app/tabs/optimized.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/optimized.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/position-bottom.vue b/examples/sites/demos/mobile-first/app/tabs/position-bottom.vue
index ccc603025..8635f70e1 100644
--- a/examples/sites/demos/mobile-first/app/tabs/position-bottom.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/position-bottom.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/position-left.vue b/examples/sites/demos/mobile-first/app/tabs/position-left.vue
index 9cfc32a10..394d2fdc8 100644
--- a/examples/sites/demos/mobile-first/app/tabs/position-left.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/position-left.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/position-right.vue b/examples/sites/demos/mobile-first/app/tabs/position-right.vue
index e71a7183d..0f477d194 100644
--- a/examples/sites/demos/mobile-first/app/tabs/position-right.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/position-right.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/position.vue b/examples/sites/demos/mobile-first/app/tabs/position.vue
index 933173f96..eae6883d6 100644
--- a/examples/sites/demos/mobile-first/app/tabs/position.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/position.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/prevent-tab-switching.vue b/examples/sites/demos/mobile-first/app/tabs/prevent-tab-switching.vue
index e2ec815ee..19074db0b 100644
--- a/examples/sites/demos/mobile-first/app/tabs/prevent-tab-switching.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/prevent-tab-switching.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return { activeName: 'third' }
diff --git a/examples/sites/demos/mobile-first/app/tabs/reactive.vue b/examples/sites/demos/mobile-first/app/tabs/reactive.vue
index 7ff36ce67..7e62171ad 100644
--- a/examples/sites/demos/mobile-first/app/tabs/reactive.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/reactive.vue
@@ -23,15 +23,15 @@
 </template>
 
 <script>
-import { DatePicker, Tabs, TabItem, Select, Option } from '@opentiny/vue'
+import { TinyDatePicker, TinyTabs, TinyTabItem, TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker,
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinySelect: Select,
-    TinyOption: Option
+    TinyDatePicker,
+    TinyTabs,
+    TinyTabItem,
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/show-different-grid-data.vue b/examples/sites/demos/mobile-first/app/tabs/show-different-grid-data.vue
index 3e647bb94..63e702a8c 100644
--- a/examples/sites/demos/mobile-first/app/tabs/show-different-grid-data.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/show-different-grid-data.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script>
-import { Tabs, TabItem, Grid, GridColumn } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyTabs,
+    TinyTabItem,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/show-echarts.vue b/examples/sites/demos/mobile-first/app/tabs/show-echarts.vue
index 9c5fe60f6..6002a6ec0 100644
--- a/examples/sites/demos/mobile-first/app/tabs/show-echarts.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/show-echarts.vue
@@ -10,14 +10,14 @@
 </template>
 
 <script>
-import { Tabs, TabItem, HuichartsBar, HuichartsGauge } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyHuichartsBar, TinyHuichartsGauge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyBar: HuichartsBar,
-    TinyGauge: HuichartsGauge
+    TinyTabs,
+    TinyTabItem,
+    TinyBar: TinyHuichartsBar,
+    TinyGauge: TinyHuichartsGauge
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/size.vue b/examples/sites/demos/mobile-first/app/tabs/size.vue
index 8800c7811..6d46f7500 100644
--- a/examples/sites/demos/mobile-first/app/tabs/size.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/size.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/stretch-wh.vue b/examples/sites/demos/mobile-first/app/tabs/stretch-wh.vue
index 7b9db4e42..692aa59d5 100644
--- a/examples/sites/demos/mobile-first/app/tabs/stretch-wh.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/stretch-wh.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/tab-style-bordercard.vue b/examples/sites/demos/mobile-first/app/tabs/tab-style-bordercard.vue
index ba9b9b920..4ddb2a958 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tab-style-bordercard.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tab-style-bordercard.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/tab-style-card.vue b/examples/sites/demos/mobile-first/app/tabs/tab-style-card.vue
index ca258d69d..7d76e7e79 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tab-style-card.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tab-style-card.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue b/examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue
index 705d7fd7e..6fedcea37 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue
@@ -7,23 +7,23 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
       activeName: '',
       showTab: false,
-      Tabs: []
+      TinyTabs: []
     }
   },
   mounted() {
     setTimeout(() => {
-      this.Tabs = [
+      this.TinyTabs = [
         {
           title: '表单组件',
           name: 'first',
@@ -57,7 +57,7 @@ export default {
   },
   methods: {
     close(name) {
-      this.Tabs = this.Tabs.filter((tab) => {
+      this.TinyTabs = this.TinyTabs.filter((tab) => {
         return tab.name !== name
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue
index 4c559f652..79a6b9769 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue
@@ -19,13 +19,13 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
@@ -34,7 +34,7 @@ export default {
       dropConfig: {
         plugin: Sortable
       },
-      Tabs: [
+      TinyTabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -62,15 +62,15 @@ export default {
     },
     handleEnd(event) {
       const { oldDraggableIndex, newDraggableIndex } = event
-      const tab = this.Tabs.splice(oldDraggableIndex, 1)[0]
-      this.Tabs.splice(newDraggableIndex, 0, tab)
+      const tab = this.TinyTabs.splice(oldDraggableIndex, 1)[0]
+      this.TinyTabs.splice(newDraggableIndex, 0, tab)
 
-      console.log(this.Tabs)
+      console.log(this.TinyTabs)
     },
     handleAdd() {
-      this.Tabs.push({
-        title: 'Tab ' + String(this.Tabs.length + 1),
-        name: String(this.Tabs.length + 1),
+      this.TinyTabs.push({
+        title: 'Tab ' + String(this.TinyTabs.length + 1),
+        name: String(this.TinyTabs.length + 1),
         content: '动态增加tabitem'
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue
index 81ef4dc1b..39efdc681 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue
@@ -7,16 +7,16 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
-      Tabs: [
+      TinyTabs: [
         {
           title: '表单组件',
           name: 'first',
@@ -49,7 +49,7 @@ export default {
         message: '动态增加 tabitem'
       })
 
-      this.Tabs.push({
+      this.TinyTabs.push({
         title: 'Tab ++',
         name: ++this.tabIndex + '',
         content: '动态增加 tabitem'
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-events-click.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-events-click.vue
index 6d05380ca..472309821 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-events-click.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-events-click.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue
index 67705ad91..87ce5eb59 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue
@@ -7,17 +7,17 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
       activeName: 'first',
-      Tabs: [
+      TinyTabs: [
         {
           title: '表单组件',
           name: 'first',
@@ -57,7 +57,7 @@ export default {
         message: '关闭 ' + name + ' 页签'
       })
 
-      this.Tabs = this.Tabs.filter((tab) => {
+      this.TinyTabs = this.TinyTabs.filter((tab) => {
         return tab.name !== name
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue
index c4ef8e899..ca03e2b34 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue
@@ -7,17 +7,17 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
       activeName: 'first',
-      Tabs: [
+      TinyTabs: [
         {
           title: '表单组件',
           name: 'first',
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-separator.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-separator.vue
index 489474ad4..9efb80df2 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-separator.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-separator.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-size.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-size.vue
index e05b1dd8b..89b54250e 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-size.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-size.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue
index d2c06781b..2ceda522b 100644
--- a/examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
@@ -32,7 +32,7 @@ export default {
       activeName: 'f1',
       activeName2: 'ss1',
       showTab: true,
-      Tabs: [
+      TinyTabs: [
         {
           title: '表单组件',
           name: 'f1',
@@ -53,7 +53,7 @@ export default {
   },
   methods: {
     close(name) {
-      this.Tabs = this.Tabs.filter((tab) => {
+      this.TinyTabs = this.TinyTabs.filter((tab) => {
         return tab.name !== name
       })
     }
diff --git a/examples/sites/demos/mobile-first/app/tabs/with-add.vue b/examples/sites/demos/mobile-first/app/tabs/with-add.vue
index 031ad708c..399c2bcf2 100644
--- a/examples/sites/demos/mobile-first/app/tabs/with-add.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/with-add.vue
@@ -7,16 +7,16 @@
 </template>
 
 <script>
-import { Tabs, TabItem, Modal } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
-      Tabs: [
+      TinyTabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -35,12 +35,12 @@ export default {
   methods: {
     handleadd() {
       // 如果tabItem数量小于指定值就可以新增
-      if (this.Tabs.length < this.maxCount) {
+      if (this.TinyTabs.length < this.maxCount) {
         const name = `${++this.tabIndex}`
         const title = `Tab ++ ${name}`
-        this.Tabs.push({ title, name, content: '动态增加tabitem - ' + name })
+        this.TinyTabs.push({ title, name, content: '动态增加tabitem - ' + name })
       } else {
-        Modal.message('tabitem数量已到最大值')
+        TinyModal.message('tabitem数量已到最大值')
       }
     }
   }
diff --git a/examples/sites/demos/mobile-first/app/tag-group/basic-usage.vue b/examples/sites/demos/mobile-first/app/tag-group/basic-usage.vue
index 6418301b3..fe497d46a 100644
--- a/examples/sites/demos/mobile-first/app/tag-group/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/tag-group/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tag-group/tag-group-effect.vue b/examples/sites/demos/mobile-first/app/tag-group/tag-group-effect.vue
index 0a9b7d270..e46456036 100644
--- a/examples/sites/demos/mobile-first/app/tag-group/tag-group-effect.vue
+++ b/examples/sites/demos/mobile-first/app/tag-group/tag-group-effect.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { TagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tag-group/tag-group-event.vue b/examples/sites/demos/mobile-first/app/tag-group/tag-group-event.vue
index 2769f541d..d0c527788 100644
--- a/examples/sites/demos/mobile-first/app/tag-group/tag-group-event.vue
+++ b/examples/sites/demos/mobile-first/app/tag-group/tag-group-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TagGroup, Modal } from '@opentiny/vue'
+import { TinyTagGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
@@ -105,7 +105,7 @@ export default {
   },
   methods: {
     itemClick(item, i, e) {
-      Modal.message(`当前点击的是第${i + 1}个标签`)
+      TinyModal.message(`当前点击的是第${i + 1}个标签`)
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/tag-group/tag-group-size.vue b/examples/sites/demos/mobile-first/app/tag-group/tag-group-size.vue
index bc8c23dae..8782e5493 100644
--- a/examples/sites/demos/mobile-first/app/tag-group/tag-group-size.vue
+++ b/examples/sites/demos/mobile-first/app/tag-group/tag-group-size.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { TagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tag-group/tag-group-type.vue b/examples/sites/demos/mobile-first/app/tag-group/tag-group-type.vue
index 6436b337b..c43907263 100644
--- a/examples/sites/demos/mobile-first/app/tag-group/tag-group-type.vue
+++ b/examples/sites/demos/mobile-first/app/tag-group/tag-group-type.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { TagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 // success / warning / alerting / error / info / default
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tag/basic-usage.vue b/examples/sites/demos/mobile-first/app/tag/basic-usage.vue
index 0c58659f4..7c1cd1366 100644
--- a/examples/sites/demos/mobile-first/app/tag/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/tag/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/tag/closable.vue b/examples/sites/demos/mobile-first/app/tag/closable.vue
index 810d7d43f..034deb979 100644
--- a/examples/sites/demos/mobile-first/app/tag/closable.vue
+++ b/examples/sites/demos/mobile-first/app/tag/closable.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tag/color3.vue b/examples/sites/demos/mobile-first/app/tag/color3.vue
index 5aed8926f..ec140bf93 100644
--- a/examples/sites/demos/mobile-first/app/tag/color3.vue
+++ b/examples/sites/demos/mobile-first/app/tag/color3.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/tag/colorful-tag.vue b/examples/sites/demos/mobile-first/app/tag/colorful-tag.vue
index 9bc9b4bc8..c573ff060 100644
--- a/examples/sites/demos/mobile-first/app/tag/colorful-tag.vue
+++ b/examples/sites/demos/mobile-first/app/tag/colorful-tag.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tag/content.vue b/examples/sites/demos/mobile-first/app/tag/content.vue
index 5df0931db..14ae5a34d 100644
--- a/examples/sites/demos/mobile-first/app/tag/content.vue
+++ b/examples/sites/demos/mobile-first/app/tag/content.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/tag/create.vue b/examples/sites/demos/mobile-first/app/tag/create.vue
index c02eb4aba..14c9bca9c 100644
--- a/examples/sites/demos/mobile-first/app/tag/create.vue
+++ b/examples/sites/demos/mobile-first/app/tag/create.vue
@@ -30,13 +30,13 @@
 </template>
 
 <script>
-import { Tag, Input } from '@opentiny/vue'
+import { TinyTag, TinyInput } from '@opentiny/vue'
 import { IconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTag: Tag,
-    TinyInput: Input,
+    TinyTag,
+    TinyInput,
     IconPlus: IconPlus()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/tag/effect.vue b/examples/sites/demos/mobile-first/app/tag/effect.vue
index 5f588cfdd..17932099f 100644
--- a/examples/sites/demos/mobile-first/app/tag/effect.vue
+++ b/examples/sites/demos/mobile-first/app/tag/effect.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tag/hit.vue b/examples/sites/demos/mobile-first/app/tag/hit.vue
index 3826ef66b..7048d38d9 100644
--- a/examples/sites/demos/mobile-first/app/tag/hit.vue
+++ b/examples/sites/demos/mobile-first/app/tag/hit.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/tag/tag-event-click.vue b/examples/sites/demos/mobile-first/app/tag/tag-event-click.vue
index cbafc5cdc..53026d3f0 100644
--- a/examples/sites/demos/mobile-first/app/tag/tag-event-click.vue
+++ b/examples/sites/demos/mobile-first/app/tag/tag-event-click.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Tag, Modal } from '@opentiny/vue'
+import { TinyTag, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message('click 事件')
+      TinyModal.message('click 事件')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/tag/tag-event-close.vue b/examples/sites/demos/mobile-first/app/tag/tag-event-close.vue
index 704d92071..a52c4cd42 100644
--- a/examples/sites/demos/mobile-first/app/tag/tag-event-close.vue
+++ b/examples/sites/demos/mobile-first/app/tag/tag-event-close.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Tag, Modal } from '@opentiny/vue'
+import { TinyTag, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
@@ -28,7 +28,7 @@ export default {
   methods: {
     handleClose1(tag) {
       this.tags.splice(this.tags.indexOf(tag), 1)
-      Modal.message('close 事件')
+      TinyModal.message('close 事件')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/tag/tag-selectable.vue b/examples/sites/demos/mobile-first/app/tag/tag-selectable.vue
index 56156065c..c0689e998 100644
--- a/examples/sites/demos/mobile-first/app/tag/tag-selectable.vue
+++ b/examples/sites/demos/mobile-first/app/tag/tag-selectable.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tag/tag-size.vue b/examples/sites/demos/mobile-first/app/tag/tag-size.vue
index 32d6a40be..e87e37df6 100644
--- a/examples/sites/demos/mobile-first/app/tag/tag-size.vue
+++ b/examples/sites/demos/mobile-first/app/tag/tag-size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/auto-slot.vue b/examples/sites/demos/mobile-first/app/time-line-new/auto-slot.vue
index 320417ac9..735bf8715 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/auto-slot.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/auto-slot.vue
@@ -25,13 +25,13 @@
 </template>
 
 <script>
-import { TimeLineNew, UserHead } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyUserHead } from '@opentiny/vue'
 import { IconLoading } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeLine: TimeLineNew,
-    TinyUserHead: UserHead
+    TinyTimeLine: TinyTimeLineNew,
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/basic-usage.vue b/examples/sites/demos/mobile-first/app/time-line-new/basic-usage.vue
index 5f3378235..2ad0aac6e 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLineNew
+    TinyTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/fold-time.vue b/examples/sites/demos/mobile-first/app/time-line-new/fold-time.vue
index 2516d125b..f8d278251 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/fold-time.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/fold-time.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLineNew
+    TinyTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/limited-nodes.vue b/examples/sites/demos/mobile-first/app/time-line-new/limited-nodes.vue
index d0002f78e..555680aa2 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/limited-nodes.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/limited-nodes.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLineNew
+    TinyTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/many-status.vue b/examples/sites/demos/mobile-first/app/time-line-new/many-status.vue
index a9db0ac72..922691b9c 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/many-status.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/many-status.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLineNew
+    TinyTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/node-max.vue b/examples/sites/demos/mobile-first/app/time-line-new/node-max.vue
index f9d67946b..0f495fc80 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/node-max.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/node-max.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLineNew
+    TinyTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/node-toset.vue b/examples/sites/demos/mobile-first/app/time-line-new/node-toset.vue
index 1fb93923b..b8426a3cb 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/node-toset.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/node-toset.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 import { IconLoading, IconTime } from '@opentiny/vue-icon'
 
 export default {
   components: {
     IconLoading: IconLoading(),
     IconTime: IconTime(),
-    TinyTimeLine: TimeLineNew
+    TinyTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/single-status.vue b/examples/sites/demos/mobile-first/app/time-line-new/single-status.vue
index e3e7c73ab..79247dfea 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/single-status.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/single-status.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 import { IconCopy, IconLoading } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeLine: TimeLineNew,
+    TinyTimeLine: TinyTimeLineNew,
     IconCopy: IconCopy()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/time-line-new/sub-field.vue b/examples/sites/demos/mobile-first/app/time-line-new/sub-field.vue
index bec6907ee..a122d065d 100644
--- a/examples/sites/demos/mobile-first/app/time-line-new/sub-field.vue
+++ b/examples/sites/demos/mobile-first/app/time-line-new/sub-field.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLineNew
+    TinyTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line/auto-slot.vue b/examples/sites/demos/mobile-first/app/time-line/auto-slot.vue
index 495bf53b8..4495df30d 100644
--- a/examples/sites/demos/mobile-first/app/time-line/auto-slot.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/auto-slot.vue
@@ -25,13 +25,13 @@
 </template>
 
 <script>
-import { TimeLine, UserHead } from '@opentiny/vue'
+import { TinyTimeLine, TinyUserHead } from '@opentiny/vue'
 import { IconLoading } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine,
-    TinyUserHead: UserHead
+    TinyTimeLine,
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line/basic-usage.vue b/examples/sites/demos/mobile-first/app/time-line/basic-usage.vue
index 73b35d99f..1d99a23c3 100644
--- a/examples/sites/demos/mobile-first/app/time-line/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line/fold-time.vue b/examples/sites/demos/mobile-first/app/time-line/fold-time.vue
index cf19e09a6..939db07b1 100644
--- a/examples/sites/demos/mobile-first/app/time-line/fold-time.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/fold-time.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line/limited-nodes.vue b/examples/sites/demos/mobile-first/app/time-line/limited-nodes.vue
index 2cabdae02..f00f9cbf4 100644
--- a/examples/sites/demos/mobile-first/app/time-line/limited-nodes.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/limited-nodes.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line/many-status.vue b/examples/sites/demos/mobile-first/app/time-line/many-status.vue
index 32d8c8b46..385c28372 100644
--- a/examples/sites/demos/mobile-first/app/time-line/many-status.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/many-status.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line/node-max.vue b/examples/sites/demos/mobile-first/app/time-line/node-max.vue
index 92150a36d..6ae07c858 100644
--- a/examples/sites/demos/mobile-first/app/time-line/node-max.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/node-max.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line/node-toset.vue b/examples/sites/demos/mobile-first/app/time-line/node-toset.vue
index e07084ce0..6f1cac758 100644
--- a/examples/sites/demos/mobile-first/app/time-line/node-toset.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/node-toset.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 import { IconLoading, IconTime } from '@opentiny/vue-icon'
 
 export default {
   components: {
     IconLoading: IconLoading(),
     IconTime: IconTime(),
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-line/single-status.vue b/examples/sites/demos/mobile-first/app/time-line/single-status.vue
index 36ac5b045..01e6674d9 100644
--- a/examples/sites/demos/mobile-first/app/time-line/single-status.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/single-status.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 import { IconCopy, IconLoading } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine,
+    TinyTimeLine,
     IconCopy: IconCopy()
   },
   data() {
diff --git a/examples/sites/demos/mobile-first/app/time-line/sub-field.vue b/examples/sites/demos/mobile-first/app/time-line/sub-field.vue
index e8daceeb2..5ad6c0640 100644
--- a/examples/sites/demos/mobile-first/app/time-line/sub-field.vue
+++ b/examples/sites/demos/mobile-first/app/time-line/sub-field.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/time-picker-mobile/basic-usage.vue b/examples/sites/demos/mobile-first/app/time-picker-mobile/basic-usage.vue
index 0721636f1..08aa35609 100644
--- a/examples/sites/demos/mobile-first/app/time-picker-mobile/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/time-picker-mobile/basic-usage.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { TimePickerMobile, Button } from '@opentiny/vue'
+import { TinyTimePickerMobile, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePickerMobile: TimePickerMobile,
-    TinyButton: Button
+    TinyTimePickerMobile,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/basic-usage.vue b/examples/sites/demos/mobile-first/app/tooltip/basic-usage.vue
index 65ffb787c..1949f8ee3 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/basic-usage.vue
@@ -48,12 +48,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/tooltip/content-pre.vue b/examples/sites/demos/mobile-first/app/tooltip/content-pre.vue
index cc5711859..f16ddde8d 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/content-pre.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/content-pre.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/content-render.vue b/examples/sites/demos/mobile-first/app/tooltip/content-render.vue
index a0077865b..842b163c4 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/content-render.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/content-render.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/dynamic-disable.vue b/examples/sites/demos/mobile-first/app/tooltip/dynamic-disable.vue
index 96b75d62f..e58c302ac 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/dynamic-disable.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/dynamic-disable.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/enterable.vue b/examples/sites/demos/mobile-first/app/tooltip/enterable.vue
index d8636e15a..d11a9093c 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/enterable.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/enterable.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/manual-control-tip.vue b/examples/sites/demos/mobile-first/app/tooltip/manual-control-tip.vue
index fe3a57625..41775661c 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/manual-control-tip.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/manual-control-tip.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/open-delay.vue b/examples/sites/demos/mobile-first/app/tooltip/open-delay.vue
index 3fc2b74e4..0961bb9fc 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/open-delay.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/open-delay.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile-first/app/tooltip/popper-class.vue b/examples/sites/demos/mobile-first/app/tooltip/popper-class.vue
index f9bd37c43..923c1a597 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/popper-class.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/popper-class.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/popper-options-bubbling.vue b/examples/sites/demos/mobile-first/app/tooltip/popper-options-bubbling.vue
index 9193ed659..f2d1e8a0e 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/popper-options-bubbling.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/popper-options-bubbling.vue
@@ -30,12 +30,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
 
   data() {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/popper-options.vue b/examples/sites/demos/mobile-first/app/tooltip/popper-options.vue
index 7dc126e79..9ea8b17b1 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/popper-options.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/popper-options.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/tabindex.vue b/examples/sites/demos/mobile-first/app/tooltip/tabindex.vue
index d8ac3ed2b..9bb29bdae 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/tabindex.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/tabindex.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/tooltip/tooltip-content.vue b/examples/sites/demos/mobile-first/app/tooltip/tooltip-content.vue
index e52874b25..adbf50951 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/tooltip-content.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/tooltip-content.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile-first/app/tooltip/tooltip-offset.vue b/examples/sites/demos/mobile-first/app/tooltip/tooltip-offset.vue
index 282103652..cc7eed604 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/tooltip-offset.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/tooltip-offset.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile-first/app/tooltip/tooltip-theme.vue b/examples/sites/demos/mobile-first/app/tooltip/tooltip-theme.vue
index c219b62e8..7759363f5 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/tooltip-theme.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/tooltip-theme.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile-first/app/tooltip/visible-arrow.vue b/examples/sites/demos/mobile-first/app/tooltip/visible-arrow.vue
index c5e88d364..96bee2bfd 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/visible-arrow.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/visible-arrow.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/tooltip/z-index.vue b/examples/sites/demos/mobile-first/app/tooltip/z-index.vue
index dfc158660..09c5dc529 100644
--- a/examples/sites/demos/mobile-first/app/tooltip/z-index.vue
+++ b/examples/sites/demos/mobile-first/app/tooltip/z-index.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/user-head/basic-usage.vue b/examples/sites/demos/mobile-first/app/user-head/basic-usage.vue
index 9a7f09e02..79423889e 100644
--- a/examples/sites/demos/mobile-first/app/user-head/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/user-head/basic-usage.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/user-head/user-head-event.vue b/examples/sites/demos/mobile-first/app/user-head/user-head-event.vue
index 14ad40b24..5f5a526da 100644
--- a/examples/sites/demos/mobile-first/app/user-head/user-head-event.vue
+++ b/examples/sites/demos/mobile-first/app/user-head/user-head-event.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { UserHeadGroup, Popover, Modal } from '@opentiny/vue'
+import { TinyUserHeadGroup, TinyPopover, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHeadGroup: UserHeadGroup,
-    TinyPopover: Popover
+    TinyUserHeadGroup,
+    TinyPopover
   },
   data() {
     return {
@@ -81,10 +81,10 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message('click')
+      TinyModal.message('click')
     },
     mouseEnter() {
-      Modal.message('mouseEnter')
+      TinyModal.message('mouseEnter')
     }
   }
 }
diff --git a/examples/sites/demos/mobile-first/app/user-head/user-head-group.vue b/examples/sites/demos/mobile-first/app/user-head/user-head-group.vue
index ed477aab5..be864ad01 100644
--- a/examples/sites/demos/mobile-first/app/user-head/user-head-group.vue
+++ b/examples/sites/demos/mobile-first/app/user-head/user-head-group.vue
@@ -79,11 +79,11 @@
 </template>
 
 <script>
-import { UserHeadGroup } from '@opentiny/vue'
+import { TinyUserHeadGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHeadGroup: UserHeadGroup
+    TinyUserHeadGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/user-head/user-head-size.vue b/examples/sites/demos/mobile-first/app/user-head/user-head-size.vue
index f40eb7271..bca37c99b 100644
--- a/examples/sites/demos/mobile-first/app/user-head/user-head-size.vue
+++ b/examples/sites/demos/mobile-first/app/user-head/user-head-size.vue
@@ -54,11 +54,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile-first/app/user-head/user-head-style.vue b/examples/sites/demos/mobile-first/app/user-head/user-head-style.vue
index ccb9988d8..56cf65848 100644
--- a/examples/sites/demos/mobile-first/app/user-head/user-head-style.vue
+++ b/examples/sites/demos/mobile-first/app/user-head/user-head-style.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/actionsheet/clickfn.vue b/examples/sites/demos/mobile/app/actionsheet/clickfn.vue
index 25f25b627..347fd8dcd 100644
--- a/examples/sites/demos/mobile/app/actionsheet/clickfn.vue
+++ b/examples/sites/demos/mobile/app/actionsheet/clickfn.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="jsx">
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue b/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
index 10e6187f8..ebeade966 100644
--- a/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
+++ b/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="jsx">
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/actionsheet/slot-action.vue b/examples/sites/demos/mobile/app/actionsheet/slot-action.vue
index e399c014c..0970e06f4 100644
--- a/examples/sites/demos/mobile/app/actionsheet/slot-action.vue
+++ b/examples/sites/demos/mobile/app/actionsheet/slot-action.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="jsx">
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/actionsheet/slot-item.vue b/examples/sites/demos/mobile/app/actionsheet/slot-item.vue
index 000d89b54..3ae696df4 100644
--- a/examples/sites/demos/mobile/app/actionsheet/slot-item.vue
+++ b/examples/sites/demos/mobile/app/actionsheet/slot-item.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="jsx">
-import { ActionSheet, Button } from '@opentiny/vue'
+import { TinyActionSheet, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionSheet: ActionSheet,
-    TinyButton: Button
+    TinyActionSheet,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/alert/basic-usage.vue b/examples/sites/demos/mobile/app/alert/basic-usage.vue
index ab0615278..9849dc504 100644
--- a/examples/sites/demos/mobile/app/alert/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/alert/basic-usage.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/alert/center.vue b/examples/sites/demos/mobile/app/alert/center.vue
index 2feb5dc64..9ab20810c 100644
--- a/examples/sites/demos/mobile/app/alert/center.vue
+++ b/examples/sites/demos/mobile/app/alert/center.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/alert/custom-close.vue b/examples/sites/demos/mobile/app/alert/custom-close.vue
index 70fb23243..4a649bd29 100644
--- a/examples/sites/demos/mobile/app/alert/custom-close.vue
+++ b/examples/sites/demos/mobile/app/alert/custom-close.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { Alert, Switch, Toast } from '@opentiny/vue'
+import { TinyAlert, TinySwitch, TinyToast } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinySwitch: Switch
+    TinyAlert,
+    TinySwitch
   },
   data() {
     return {
@@ -34,7 +34,7 @@ export default {
   },
   methods: {
     close() {
-      Toast.service({
+      TinyToast.service({
         text: 'close事件!',
         time: 100000
       })
diff --git a/examples/sites/demos/mobile/app/alert/icon.vue b/examples/sites/demos/mobile/app/alert/icon.vue
index 083ff94ce..e72d34cb6 100644
--- a/examples/sites/demos/mobile/app/alert/icon.vue
+++ b/examples/sites/demos/mobile/app/alert/icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 import { iconCustom } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/alert/size.vue b/examples/sites/demos/mobile/app/alert/size.vue
index b35d0de09..fd022bb58 100644
--- a/examples/sites/demos/mobile/app/alert/size.vue
+++ b/examples/sites/demos/mobile/app/alert/size.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/alert/slot-default.vue b/examples/sites/demos/mobile/app/alert/slot-default.vue
index af6694287..a4031a890 100644
--- a/examples/sites/demos/mobile/app/alert/slot-default.vue
+++ b/examples/sites/demos/mobile/app/alert/slot-default.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/alert/target.vue b/examples/sites/demos/mobile/app/alert/target.vue
index 08698d020..e6dc91c7d 100644
--- a/examples/sites/demos/mobile/app/alert/target.vue
+++ b/examples/sites/demos/mobile/app/alert/target.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Alert, Tabs, TabItem } from '@opentiny/vue'
+import { TinyAlert, TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyAlert,
+    TinyTabs,
+    TinyTabItem
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/avatar/avatar-size.vue b/examples/sites/demos/mobile/app/avatar/avatar-size.vue
index dcb4b52c2..af13e9ed9 100644
--- a/examples/sites/demos/mobile/app/avatar/avatar-size.vue
+++ b/examples/sites/demos/mobile/app/avatar/avatar-size.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script lang="jsx">
-import { Avatar } from '@opentiny/vue'
+import { TinyAvatar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAvatar: Avatar
+    TinyAvatar
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/avatar/avatar-src-set.vue b/examples/sites/demos/mobile/app/avatar/avatar-src-set.vue
index 35abdc2b6..bc481d5a1 100644
--- a/examples/sites/demos/mobile/app/avatar/avatar-src-set.vue
+++ b/examples/sites/demos/mobile/app/avatar/avatar-src-set.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Avatar } from '@opentiny/vue'
+import { TinyAvatar } from '@opentiny/vue'
 import { iconClockWork } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyAvatar: Avatar
+    TinyAvatar
   },
   data() {
     const urlPrefix = import.meta.env.VITE_APP_BUILD_BASE_URL
diff --git a/examples/sites/demos/mobile/app/badge/content.vue b/examples/sites/demos/mobile/app/badge/content.vue
index 9b9272035..54246b229 100644
--- a/examples/sites/demos/mobile/app/badge/content.vue
+++ b/examples/sites/demos/mobile/app/badge/content.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/badge/hidden.vue b/examples/sites/demos/mobile/app/badge/hidden.vue
index 095d01938..76c221471 100644
--- a/examples/sites/demos/mobile/app/badge/hidden.vue
+++ b/examples/sites/demos/mobile/app/badge/hidden.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Badge, Button } from '@opentiny/vue'
+import { TinyBadge, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge,
-    TinyButton: Button
+    TinyBadge,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/badge/href-target.vue b/examples/sites/demos/mobile/app/badge/href-target.vue
index 8069885e1..df9c5b881 100644
--- a/examples/sites/demos/mobile/app/badge/href-target.vue
+++ b/examples/sites/demos/mobile/app/badge/href-target.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/badge/is-dot.vue b/examples/sites/demos/mobile/app/badge/is-dot.vue
index dab98daf7..3d7399598 100644
--- a/examples/sites/demos/mobile/app/badge/is-dot.vue
+++ b/examples/sites/demos/mobile/app/badge/is-dot.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/badge/is-mini.vue b/examples/sites/demos/mobile/app/badge/is-mini.vue
index 9c56493fd..68ee7d9e9 100644
--- a/examples/sites/demos/mobile/app/badge/is-mini.vue
+++ b/examples/sites/demos/mobile/app/badge/is-mini.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/badge/type.vue b/examples/sites/demos/mobile/app/badge/type.vue
index 28e17a59c..b0eac5372 100644
--- a/examples/sites/demos/mobile/app/badge/type.vue
+++ b/examples/sites/demos/mobile/app/badge/type.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script lang="jsx">
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/button/base.vue b/examples/sites/demos/mobile/app/button/base.vue
index a7b3bf36f..dd2f94e38 100644
--- a/examples/sites/demos/mobile/app/button/base.vue
+++ b/examples/sites/demos/mobile/app/button/base.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/button/disabled.vue b/examples/sites/demos/mobile/app/button/disabled.vue
index df9667522..5b41d97cd 100644
--- a/examples/sites/demos/mobile/app/button/disabled.vue
+++ b/examples/sites/demos/mobile/app/button/disabled.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/button/event.vue b/examples/sites/demos/mobile/app/button/event.vue
index ff77a2116..afabb6a94 100644
--- a/examples/sites/demos/mobile/app/button/event.vue
+++ b/examples/sites/demos/mobile/app/button/event.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/button/icon.vue b/examples/sites/demos/mobile/app/button/icon.vue
index 2642342b8..27c8f90f3 100644
--- a/examples/sites/demos/mobile/app/button/icon.vue
+++ b/examples/sites/demos/mobile/app/button/icon.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { iconDel, iconYes, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/button/loading.vue b/examples/sites/demos/mobile/app/button/loading.vue
index fe6f7a5bf..ccf6a1e47 100644
--- a/examples/sites/demos/mobile/app/button/loading.vue
+++ b/examples/sites/demos/mobile/app/button/loading.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/button/reset-time.vue b/examples/sites/demos/mobile/app/button/reset-time.vue
index f937dcce3..6045da63c 100644
--- a/examples/sites/demos/mobile/app/button/reset-time.vue
+++ b/examples/sites/demos/mobile/app/button/reset-time.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/button/size.vue b/examples/sites/demos/mobile/app/button/size.vue
index e5beda15a..417a48536 100644
--- a/examples/sites/demos/mobile/app/button/size.vue
+++ b/examples/sites/demos/mobile/app/button/size.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkbox/basic-usage.vue b/examples/sites/demos/mobile/app/checkbox/basic-usage.vue
index 4310bad18..734fff10d 100644
--- a/examples/sites/demos/mobile/app/checkbox/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/checkbox/basic-usage.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Checkbox } from '@opentiny/vue'
+import { TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkbox/checkbox-group.vue b/examples/sites/demos/mobile/app/checkbox/checkbox-group.vue
index 7d48ac72d..47d25a630 100644
--- a/examples/sites/demos/mobile/app/checkbox/checkbox-group.vue
+++ b/examples/sites/demos/mobile/app/checkbox/checkbox-group.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkbox/disabled.vue b/examples/sites/demos/mobile/app/checkbox/disabled.vue
index ebdd2940f..45378f5c8 100644
--- a/examples/sites/demos/mobile/app/checkbox/disabled.vue
+++ b/examples/sites/demos/mobile/app/checkbox/disabled.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkbox/event-change.vue b/examples/sites/demos/mobile/app/checkbox/event-change.vue
index f26b13ffa..bb478e331 100644
--- a/examples/sites/demos/mobile/app/checkbox/event-change.vue
+++ b/examples/sites/demos/mobile/app/checkbox/event-change.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Checkbox } from '@opentiny/vue'
+import { TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkbox/icon-position.vue b/examples/sites/demos/mobile/app/checkbox/icon-position.vue
index f31226c1d..92f6a9c70 100644
--- a/examples/sites/demos/mobile/app/checkbox/icon-position.vue
+++ b/examples/sites/demos/mobile/app/checkbox/icon-position.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkbox/indeterminate.vue b/examples/sites/demos/mobile/app/checkbox/indeterminate.vue
index 3c9abacd8..89c785eb1 100644
--- a/examples/sites/demos/mobile/app/checkbox/indeterminate.vue
+++ b/examples/sites/demos/mobile/app/checkbox/indeterminate.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkbox/true-false-label.vue b/examples/sites/demos/mobile/app/checkbox/true-false-label.vue
index c2fb8fd55..60d34e0f3 100644
--- a/examples/sites/demos/mobile/app/checkbox/true-false-label.vue
+++ b/examples/sites/demos/mobile/app/checkbox/true-false-label.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Checkbox } from '@opentiny/vue'
+import { TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/disabled.vue b/examples/sites/demos/mobile/app/checkboxgroup/disabled.vue
index c5562c8e1..e1929c67c 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/disabled.vue
+++ b/examples/sites/demos/mobile/app/checkboxgroup/disabled.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/event-change.vue b/examples/sites/demos/mobile/app/checkboxgroup/event-change.vue
index 4205f07b7..770e8c310 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/event-change.vue
+++ b/examples/sites/demos/mobile/app/checkboxgroup/event-change.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/min-max.vue b/examples/sites/demos/mobile/app/checkboxgroup/min-max.vue
index 4457d5139..243d5dd2b 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/min-max.vue
+++ b/examples/sites/demos/mobile/app/checkboxgroup/min-max.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/vertical.vue b/examples/sites/demos/mobile/app/checkboxgroup/vertical.vue
index b00e419b1..a4747427b 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/vertical.vue
+++ b/examples/sites/demos/mobile/app/checkboxgroup/vertical.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/container/basic-usage.vue b/examples/sites/demos/mobile/app/container/basic-usage.vue
index 1274a800a..d2b91afb8 100644
--- a/examples/sites/demos/mobile/app/container/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/container/basic-usage.vue
@@ -38,13 +38,13 @@
 </template>
 
 <script>
-import { Container, Radio, RadioGroup } from '@opentiny/vue'
+import { TinyContainer, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyContainer: Container,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyContainer,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/container/custom-width.vue b/examples/sites/demos/mobile/app/container/custom-width.vue
index a8300490c..c50c25b30 100644
--- a/examples/sites/demos/mobile/app/container/custom-width.vue
+++ b/examples/sites/demos/mobile/app/container/custom-width.vue
@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import { Container, Radio, RadioGroup } from '@opentiny/vue'
+import { TinyContainer, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyContainer: Container,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyContainer,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/append-to-body.vue b/examples/sites/demos/mobile/app/dialogbox/append-to-body.vue
index 6b953a283..5a03db742 100644
--- a/examples/sites/demos/mobile/app/dialogbox/append-to-body.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/append-to-body.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/cancel-confirm.vue b/examples/sites/demos/mobile/app/dialogbox/cancel-confirm.vue
index 9785be15c..5e8ec7871 100644
--- a/examples/sites/demos/mobile/app/dialogbox/cancel-confirm.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/cancel-confirm.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/close-on-click-modal.vue b/examples/sites/demos/mobile/app/dialogbox/close-on-click-modal.vue
index 4cdc46f42..6a8c4edd0 100644
--- a/examples/sites/demos/mobile/app/dialogbox/close-on-click-modal.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/close-on-click-modal.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/events-open-close.vue b/examples/sites/demos/mobile/app/dialogbox/events-open-close.vue
index 2f19752c2..3189f5a45 100644
--- a/examples/sites/demos/mobile/app/dialogbox/events-open-close.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/events-open-close.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/lock-scroll.vue b/examples/sites/demos/mobile/app/dialogbox/lock-scroll.vue
index 92ee894d8..999950f10 100644
--- a/examples/sites/demos/mobile/app/dialogbox/lock-scroll.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/lock-scroll.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/show-header.vue b/examples/sites/demos/mobile/app/dialogbox/show-header.vue
index 264ff3141..ab397b2d9 100644
--- a/examples/sites/demos/mobile/app/dialogbox/show-header.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/show-header.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/slot-footer.vue b/examples/sites/demos/mobile/app/dialogbox/slot-footer.vue
index bfd4372cd..37b0a34a2 100644
--- a/examples/sites/demos/mobile/app/dialogbox/slot-footer.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/slot-footer.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/slot-title.vue b/examples/sites/demos/mobile/app/dialogbox/slot-title.vue
index 3dfb0bc55..125565f5a 100644
--- a/examples/sites/demos/mobile/app/dialogbox/slot-title.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/slot-title.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dialogbox/with-input.vue b/examples/sites/demos/mobile/app/dialogbox/with-input.vue
index 8fa165453..e9e0a38d0 100644
--- a/examples/sites/demos/mobile/app/dialogbox/with-input.vue
+++ b/examples/sites/demos/mobile/app/dialogbox/with-input.vue
@@ -19,13 +19,13 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox, Input } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyInput: Input
+    TinyButton,
+    TinyDialogBox,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/activeColor.vue b/examples/sites/demos/mobile/app/dropdownmenu/activeColor.vue
index cd0c683d8..4bbf5a404 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/activeColor.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/activeColor.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOutside.vue b/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOutside.vue
index 0f8b75e57..8dd312529 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOutside.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOutside.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOverlay.vue b/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOverlay.vue
index 245eccbfc..586d1ff2f 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOverlay.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOverlay.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/direction.vue b/examples/sites/demos/mobile/app/dropdownmenu/direction.vue
index 238ae4104..42f4f7729 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/direction.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/direction.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/duration.vue b/examples/sites/demos/mobile/app/dropdownmenu/duration.vue
index 30d44ce7f..dfc07992c 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/duration.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/duration.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/event.vue b/examples/sites/demos/mobile/app/dropdownmenu/event.vue
index cdc9e6f4d..33634d3b6 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/event.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/event.vue
@@ -24,12 +24,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/icon.vue b/examples/sites/demos/mobile/app/dropdownmenu/icon.vue
index 6df94264b..a3f927932 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/icon.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/icon.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 import { iconAdministrator } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/item-disabled.vue b/examples/sites/demos/mobile/app/dropdownmenu/item-disabled.vue
index 9005804e4..793a162ae 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/item-disabled.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/item-disabled.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/overlay.vue b/examples/sites/demos/mobile/app/dropdownmenu/overlay.vue
index 317855c1b..04a0edd9c 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/overlay.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/overlay.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/screen-funnel.vue b/examples/sites/demos/mobile/app/dropdownmenu/screen-funnel.vue
index fb4065f9e..472d164ef 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/screen-funnel.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/screen-funnel.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/slot.vue b/examples/sites/demos/mobile/app/dropdownmenu/slot.vue
index e9d654ba9..ed74c76d7 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/slot.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/slot.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 import { iconAssociation } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
+    TinyDropdownMenu,
+    TinyDropdownItem,
     IconAssociation: iconAssociation()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/title-class.vue b/examples/sites/demos/mobile/app/dropdownmenu/title-class.vue
index 024708950..bd2f234b5 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/title-class.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/title-class.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/type.vue b/examples/sites/demos/mobile/app/dropdownmenu/type.vue
index 5945ba966..1abe8ebe9 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/type.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/type.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/exception/buttonText.vue b/examples/sites/demos/mobile/app/exception/buttonText.vue
index c27fb5e5e..02b979088 100644
--- a/examples/sites/demos/mobile/app/exception/buttonText.vue
+++ b/examples/sites/demos/mobile/app/exception/buttonText.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/exception/exceptionClass.vue b/examples/sites/demos/mobile/app/exception/exceptionClass.vue
index c27fb5e5e..02b979088 100644
--- a/examples/sites/demos/mobile/app/exception/exceptionClass.vue
+++ b/examples/sites/demos/mobile/app/exception/exceptionClass.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/exception/message.vue b/examples/sites/demos/mobile/app/exception/message.vue
index 87040ced6..3f81aa108 100644
--- a/examples/sites/demos/mobile/app/exception/message.vue
+++ b/examples/sites/demos/mobile/app/exception/message.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/exception/mobileexception.vue b/examples/sites/demos/mobile/app/exception/mobileexception.vue
index 812620714..309a54a32 100644
--- a/examples/sites/demos/mobile/app/exception/mobileexception.vue
+++ b/examples/sites/demos/mobile/app/exception/mobileexception.vue
@@ -101,12 +101,12 @@
 </template>
 
 <script lang="jsx">
-import { Exception, Button } from '@opentiny/vue'
+import { TinyException, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyException: Exception
+    TinyButton,
+    TinyException
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/exception/subMessage.vue b/examples/sites/demos/mobile/app/exception/subMessage.vue
index 8da69e407..af22fadc0 100644
--- a/examples/sites/demos/mobile/app/exception/subMessage.vue
+++ b/examples/sites/demos/mobile/app/exception/subMessage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile/app/exception/type.vue b/examples/sites/demos/mobile/app/exception/type.vue
index c27fb5e5e..02b979088 100644
--- a/examples/sites/demos/mobile/app/exception/type.vue
+++ b/examples/sites/demos/mobile/app/exception/type.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { Exception } from '@opentiny/vue'
+import { TinyException } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException: Exception
+    TinyException
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/file-upload/abort-quest.vue b/examples/sites/demos/mobile/app/file-upload/abort-quest.vue
index 3a8527c65..336608994 100644
--- a/examples/sites/demos/mobile/app/file-upload/abort-quest.vue
+++ b/examples/sites/demos/mobile/app/file-upload/abort-quest.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button,
+    TinyFileUpload,
+    TinyButton,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/accept-file-image.vue b/examples/sites/demos/mobile/app/file-upload/accept-file-image.vue
index 88b10a646..958e1d960 100644
--- a/examples/sites/demos/mobile/app/file-upload/accept-file-image.vue
+++ b/examples/sites/demos/mobile/app/file-upload/accept-file-image.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/accept-file.vue b/examples/sites/demos/mobile/app/file-upload/accept-file.vue
index 54133af3a..e2bde709a 100644
--- a/examples/sites/demos/mobile/app/file-upload/accept-file.vue
+++ b/examples/sites/demos/mobile/app/file-upload/accept-file.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/clear-files.vue b/examples/sites/demos/mobile/app/file-upload/clear-files.vue
index 10d003fd6..2830f2143 100644
--- a/examples/sites/demos/mobile/app/file-upload/clear-files.vue
+++ b/examples/sites/demos/mobile/app/file-upload/clear-files.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button,
+    TinyFileUpload,
+    TinyButton,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/custom-prefix.vue b/examples/sites/demos/mobile/app/file-upload/custom-prefix.vue
index 3b8d9d1d5..83cbcdc97 100644
--- a/examples/sites/demos/mobile/app/file-upload/custom-prefix.vue
+++ b/examples/sites/demos/mobile/app/file-upload/custom-prefix.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/custom-trigger.vue b/examples/sites/demos/mobile/app/file-upload/custom-trigger.vue
index 3cdc83c5e..3532f183c 100644
--- a/examples/sites/demos/mobile/app/file-upload/custom-trigger.vue
+++ b/examples/sites/demos/mobile/app/file-upload/custom-trigger.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/file-upload/custom-upload-request.vue b/examples/sites/demos/mobile/app/file-upload/custom-upload-request.vue
index d8c8c3e53..80abd47d7 100644
--- a/examples/sites/demos/mobile/app/file-upload/custom-upload-request.vue
+++ b/examples/sites/demos/mobile/app/file-upload/custom-upload-request.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue b/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue
index a6ac5b7f5..b2abfec2a 100644
--- a/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue
+++ b/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/data.vue b/examples/sites/demos/mobile/app/file-upload/data.vue
index 7cb3151f8..a42006998 100644
--- a/examples/sites/demos/mobile/app/file-upload/data.vue
+++ b/examples/sites/demos/mobile/app/file-upload/data.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/drag-select-file.vue b/examples/sites/demos/mobile/app/file-upload/drag-select-file.vue
index 6d721f48a..13295f2bc 100644
--- a/examples/sites/demos/mobile/app/file-upload/drag-select-file.vue
+++ b/examples/sites/demos/mobile/app/file-upload/drag-select-file.vue
@@ -10,14 +10,14 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 import { iconFileupload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconFileupload: iconFileupload(),
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/file-upload/drag-upload.vue b/examples/sites/demos/mobile/app/file-upload/drag-upload.vue
index 6376f55fa..a39fb244e 100644
--- a/examples/sites/demos/mobile/app/file-upload/drag-upload.vue
+++ b/examples/sites/demos/mobile/app/file-upload/drag-upload.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconFileupload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconFileupload: iconFileupload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/dynamic-disable.vue b/examples/sites/demos/mobile/app/file-upload/dynamic-disable.vue
index 1bbeb11d6..731bcebda 100644
--- a/examples/sites/demos/mobile/app/file-upload/dynamic-disable.vue
+++ b/examples/sites/demos/mobile/app/file-upload/dynamic-disable.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/file-upload/file-icon-list.vue b/examples/sites/demos/mobile/app/file-upload/file-icon-list.vue
index af4264a4c..e4820b622 100644
--- a/examples/sites/demos/mobile/app/file-upload/file-icon-list.vue
+++ b/examples/sites/demos/mobile/app/file-upload/file-icon-list.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/file-picture-card.vue b/examples/sites/demos/mobile/app/file-upload/file-picture-card.vue
index e11c1d117..c3f9f402b 100644
--- a/examples/sites/demos/mobile/app/file-upload/file-picture-card.vue
+++ b/examples/sites/demos/mobile/app/file-upload/file-picture-card.vue
@@ -26,13 +26,13 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, DialogBox } from '@opentiny/vue'
+import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue'
 import { iconPlus, iconView, iconDownload, iconDel } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyDialogBox: DialogBox,
+    TinyFileUpload,
+    TinyDialogBox,
     IconPlus: iconPlus(),
     IconView: iconView(),
     IconDownload: iconDownload(),
diff --git a/examples/sites/demos/mobile/app/file-upload/file-title.vue b/examples/sites/demos/mobile/app/file-upload/file-title.vue
index 2ae5869d5..716aea1c7 100644
--- a/examples/sites/demos/mobile/app/file-upload/file-title.vue
+++ b/examples/sites/demos/mobile/app/file-upload/file-title.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/header-show.vue b/examples/sites/demos/mobile/app/file-upload/header-show.vue
index cd498b364..e6d1f6c9d 100644
--- a/examples/sites/demos/mobile/app/file-upload/header-show.vue
+++ b/examples/sites/demos/mobile/app/file-upload/header-show.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/file-upload/image-size.vue b/examples/sites/demos/mobile/app/file-upload/image-size.vue
index fd5165c3e..9809a24ff 100644
--- a/examples/sites/demos/mobile/app/file-upload/image-size.vue
+++ b/examples/sites/demos/mobile/app/file-upload/image-size.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/manual-upload.vue b/examples/sites/demos/mobile/app/file-upload/manual-upload.vue
index 468bce6b1..0bab6a38d 100644
--- a/examples/sites/demos/mobile/app/file-upload/manual-upload.vue
+++ b/examples/sites/demos/mobile/app/file-upload/manual-upload.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/file-upload/max-file-count.vue b/examples/sites/demos/mobile/app/file-upload/max-file-count.vue
index 41384f474..fac026d6b 100644
--- a/examples/sites/demos/mobile/app/file-upload/max-file-count.vue
+++ b/examples/sites/demos/mobile/app/file-upload/max-file-count.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/mini-mode.vue b/examples/sites/demos/mobile/app/file-upload/mini-mode.vue
index b236408a0..7a9d43f6d 100644
--- a/examples/sites/demos/mobile/app/file-upload/mini-mode.vue
+++ b/examples/sites/demos/mobile/app/file-upload/mini-mode.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/multiple-file.vue b/examples/sites/demos/mobile/app/file-upload/multiple-file.vue
index c1587ff31..fccd27c25 100644
--- a/examples/sites/demos/mobile/app/file-upload/multiple-file.vue
+++ b/examples/sites/demos/mobile/app/file-upload/multiple-file.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/picture-card.vue b/examples/sites/demos/mobile/app/file-upload/picture-card.vue
index 694521dcc..b22ba5bf4 100644
--- a/examples/sites/demos/mobile/app/file-upload/picture-card.vue
+++ b/examples/sites/demos/mobile/app/file-upload/picture-card.vue
@@ -33,13 +33,13 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, DialogBox } from '@opentiny/vue'
+import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyDialogBox: DialogBox,
+    TinyFileUpload,
+    TinyDialogBox,
     IconPlus: iconPlus()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/prevent-delete-file.vue b/examples/sites/demos/mobile/app/file-upload/prevent-delete-file.vue
index 86c0647ef..1045b3398 100644
--- a/examples/sites/demos/mobile/app/file-upload/prevent-delete-file.vue
+++ b/examples/sites/demos/mobile/app/file-upload/prevent-delete-file.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/prevent-upload-file.vue b/examples/sites/demos/mobile/app/file-upload/prevent-upload-file.vue
index 1d095294c..9beb5be2c 100644
--- a/examples/sites/demos/mobile/app/file-upload/prevent-upload-file.vue
+++ b/examples/sites/demos/mobile/app/file-upload/prevent-upload-file.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/size.vue b/examples/sites/demos/mobile/app/file-upload/size.vue
index bc430c6a9..3faccfefa 100644
--- a/examples/sites/demos/mobile/app/file-upload/size.vue
+++ b/examples/sites/demos/mobile/app/file-upload/size.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-events.vue b/examples/sites/demos/mobile/app/file-upload/upload-events.vue
index d51ed7134..92fa7756d 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-events.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-events.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-file-list.vue b/examples/sites/demos/mobile/app/file-upload/upload-file-list.vue
index 3df0e131d..f22db02f6 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-file-list.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-file-list.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-http-request.vue b/examples/sites/demos/mobile/app/file-upload/upload-http-request.vue
index 7636a5367..dcf24b42c 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-http-request.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-http-request.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-limit.vue b/examples/sites/demos/mobile/app/file-upload/upload-limit.vue
index 3961e91f6..afb478e08 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-limit.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-limit.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-request.vue b/examples/sites/demos/mobile/app/file-upload/upload-request.vue
index 4627c0973..c8b60b559 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-request.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-request.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconUpload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconUpload: iconUpload()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-user-head.vue b/examples/sites/demos/mobile/app/file-upload/upload-user-head.vue
index 38c104b83..e48f3cc2b 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-user-head.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-user-head.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconPlus: iconPlus()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/file-upload/with-credentials.vue b/examples/sites/demos/mobile/app/file-upload/with-credentials.vue
index e53526370..5afdbb76f 100644
--- a/examples/sites/demos/mobile/app/file-upload/with-credentials.vue
+++ b/examples/sites/demos/mobile/app/file-upload/with-credentials.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/auto-wordwrap.vue b/examples/sites/demos/mobile/app/form/auto-wordwrap.vue
index cc059191f..2fecc191e 100644
--- a/examples/sites/demos/mobile/app/form/auto-wordwrap.vue
+++ b/examples/sites/demos/mobile/app/form/auto-wordwrap.vue
@@ -29,15 +29,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/form-label-suffix.vue b/examples/sites/demos/mobile/app/form/form-label-suffix.vue
index 9773ea287..af11264da 100644
--- a/examples/sites/demos/mobile/app/form/form-label-suffix.vue
+++ b/examples/sites/demos/mobile/app/form/form-label-suffix.vue
@@ -34,14 +34,14 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
@@ -80,7 +80,7 @@ export default {
     handleSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/mobile/app/form/form-select.vue b/examples/sites/demos/mobile/app/form/form-select.vue
index c881baedd..7090e4694 100644
--- a/examples/sites/demos/mobile/app/form/form-select.vue
+++ b/examples/sites/demos/mobile/app/form/form-select.vue
@@ -117,13 +117,13 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
+    TinyForm,
+    TinyFormItem,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/form-tabselect.vue b/examples/sites/demos/mobile/app/form/form-tabselect.vue
index 99d1d4f28..4affd9207 100644
--- a/examples/sites/demos/mobile/app/form/form-tabselect.vue
+++ b/examples/sites/demos/mobile/app/form/form-tabselect.vue
@@ -39,11 +39,11 @@
 </template>
 
 <script lang="jsx">
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/form-writeone.vue b/examples/sites/demos/mobile/app/form/form-writeone.vue
index 62461b587..460f64616 100644
--- a/examples/sites/demos/mobile/app/form/form-writeone.vue
+++ b/examples/sites/demos/mobile/app/form/form-writeone.vue
@@ -71,14 +71,14 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, DialogBox } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDialogBox: DialogBox
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/form-writetwo.vue b/examples/sites/demos/mobile/app/form/form-writetwo.vue
index 68fe96e51..7bdb2f8f6 100644
--- a/examples/sites/demos/mobile/app/form/form-writetwo.vue
+++ b/examples/sites/demos/mobile/app/form/form-writetwo.vue
@@ -41,11 +41,11 @@
 </template>
 
 <script lang="jsx">
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/hide-required-asterisk.vue b/examples/sites/demos/mobile/app/form/hide-required-asterisk.vue
index 1eafd4955..84f00fd47 100644
--- a/examples/sites/demos/mobile/app/form/hide-required-asterisk.vue
+++ b/examples/sites/demos/mobile/app/form/hide-required-asterisk.vue
@@ -35,15 +35,15 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/label-width.vue b/examples/sites/demos/mobile/app/form/label-width.vue
index 8e89af4f6..f6aa72e71 100644
--- a/examples/sites/demos/mobile/app/form/label-width.vue
+++ b/examples/sites/demos/mobile/app/form/label-width.vue
@@ -35,15 +35,15 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/only-read.vue b/examples/sites/demos/mobile/app/form/only-read.vue
index d4f7355f1..c3442bc8f 100644
--- a/examples/sites/demos/mobile/app/form/only-read.vue
+++ b/examples/sites/demos/mobile/app/form/only-read.vue
@@ -66,13 +66,13 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
+    TinyForm,
+    TinyFormItem,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/validate-position.vue b/examples/sites/demos/mobile/app/form/validate-position.vue
index 79c79fac8..89a129bf2 100644
--- a/examples/sites/demos/mobile/app/form/validate-position.vue
+++ b/examples/sites/demos/mobile/app/form/validate-position.vue
@@ -35,15 +35,15 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/form/validate.vue b/examples/sites/demos/mobile/app/form/validate.vue
index bd12c417f..60a43db99 100644
--- a/examples/sites/demos/mobile/app/form/validate.vue
+++ b/examples/sites/demos/mobile/app/form/validate.vue
@@ -37,15 +37,15 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/imageviewer/events-change-close.vue b/examples/sites/demos/mobile/app/imageviewer/events-change-close.vue
index 3aa6e6c20..108ad284a 100644
--- a/examples/sites/demos/mobile/app/imageviewer/events-change-close.vue
+++ b/examples/sites/demos/mobile/app/imageviewer/events-change-close.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/imageviewer/image-full-current.vue b/examples/sites/demos/mobile/app/imageviewer/image-full-current.vue
index f78813f23..55a1cd88b 100644
--- a/examples/sites/demos/mobile/app/imageviewer/image-full-current.vue
+++ b/examples/sites/demos/mobile/app/imageviewer/image-full-current.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/imageviewer/slot-index.vue b/examples/sites/demos/mobile/app/imageviewer/slot-index.vue
index 33df071f4..3b35275e9 100644
--- a/examples/sites/demos/mobile/app/imageviewer/slot-index.vue
+++ b/examples/sites/demos/mobile/app/imageviewer/slot-index.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/imageviewer/start-position.vue b/examples/sites/demos/mobile/app/imageviewer/start-position.vue
index fa86ecb3d..f432a88b0 100644
--- a/examples/sites/demos/mobile/app/imageviewer/start-position.vue
+++ b/examples/sites/demos/mobile/app/imageviewer/start-position.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { ImageViewer, Button } from '@opentiny/vue'
+import { TinyImageViewer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImageViewer: ImageViewer,
-    TinyButton: Button
+    TinyImageViewer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/index-bar/base.vue b/examples/sites/demos/mobile/app/index-bar/base.vue
index f4d58875b..52243dda8 100644
--- a/examples/sites/demos/mobile/app/index-bar/base.vue
+++ b/examples/sites/demos/mobile/app/index-bar/base.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { IndexBar, IndexBarAnchor } from '@opentiny/vue'
+import { TinyIndexBar, TinyIndexBarAnchor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyIndexBar: IndexBar,
-    TinyIndexBarAnchor: IndexBarAnchor
+    TinyIndexBar,
+    TinyIndexBarAnchor
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/index-bar/event.vue b/examples/sites/demos/mobile/app/index-bar/event.vue
index c7b0d9352..d8f674335 100644
--- a/examples/sites/demos/mobile/app/index-bar/event.vue
+++ b/examples/sites/demos/mobile/app/index-bar/event.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { IndexBar, IndexBarAnchor, Modal } from '@opentiny/vue'
+import { TinyIndexBar, TinyIndexBarAnchor, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyIndexBar: IndexBar,
-    TinyIndexBarAnchor: IndexBarAnchor
+    TinyIndexBar,
+    TinyIndexBarAnchor
   },
   data() {
     return {
@@ -30,10 +30,10 @@ export default {
   },
   methods: {
     indexChange(value) {
-      Modal.message({ message: 'change事件:' + value })
+      TinyModal.message({ message: 'change事件:' + value })
     },
     selectIndex(value) {
-      Modal.message({ message: 'select事件:' + value })
+      TinyModal.message({ message: 'select事件:' + value })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/input/basic-usage.vue b/examples/sites/demos/mobile/app/input/basic-usage.vue
index 5250952aa..9f7fc167d 100644
--- a/examples/sites/demos/mobile/app/input/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/input/basic-usage.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/clearable.vue b/examples/sites/demos/mobile/app/input/clearable.vue
index 4adeac379..800cc7540 100644
--- a/examples/sites/demos/mobile/app/input/clearable.vue
+++ b/examples/sites/demos/mobile/app/input/clearable.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/counter.vue b/examples/sites/demos/mobile/app/input/counter.vue
index afba24a41..75c55163d 100644
--- a/examples/sites/demos/mobile/app/input/counter.vue
+++ b/examples/sites/demos/mobile/app/input/counter.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/disabled.vue b/examples/sites/demos/mobile/app/input/disabled.vue
index 2e46ce203..a6ecedd59 100644
--- a/examples/sites/demos/mobile/app/input/disabled.vue
+++ b/examples/sites/demos/mobile/app/input/disabled.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/events.vue b/examples/sites/demos/mobile/app/input/events.vue
index bcfe7ef39..26c5ead6b 100644
--- a/examples/sites/demos/mobile/app/input/events.vue
+++ b/examples/sites/demos/mobile/app/input/events.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -24,19 +24,19 @@ export default {
   },
   methods: {
     onChange() {
-      Modal.message('change')
+      TinyModal.message('change')
     },
     onInput() {
-      Modal.message('input')
+      TinyModal.message('input')
     },
     onBlur() {
-      Modal.message('blur')
+      TinyModal.message('blur')
     },
     onFocus() {
-      Modal.message('focus')
+      TinyModal.message('focus')
     },
     onClear() {
-      Modal.message('clear')
+      TinyModal.message('clear')
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/input/max-min-length.vue b/examples/sites/demos/mobile/app/input/max-min-length.vue
index 49dfc94e8..88dcd6719 100644
--- a/examples/sites/demos/mobile/app/input/max-min-length.vue
+++ b/examples/sites/demos/mobile/app/input/max-min-length.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/methods.vue b/examples/sites/demos/mobile/app/input/methods.vue
index 6d5cfb4ce..5c3bf52d8 100644
--- a/examples/sites/demos/mobile/app/input/methods.vue
+++ b/examples/sites/demos/mobile/app/input/methods.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Input, Button } from '@opentiny/vue'
+import { TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input,
-    TinyButton: Button
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/native-attributes.vue b/examples/sites/demos/mobile/app/input/native-attributes.vue
index 002b12a78..a1673e7e5 100644
--- a/examples/sites/demos/mobile/app/input/native-attributes.vue
+++ b/examples/sites/demos/mobile/app/input/native-attributes.vue
@@ -26,11 +26,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue b/examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue
index 69e83a8a8..1e8a8c846 100644
--- a/examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue
+++ b/examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -32,4 +32,4 @@ export default {
 .demo-input-icons .tiny-mobile-input {
   margin-bottom: 16px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/mobile/app/input/show-password.vue b/examples/sites/demos/mobile/app/input/show-password.vue
index 552066833..d248a959f 100644
--- a/examples/sites/demos/mobile/app/input/show-password.vue
+++ b/examples/sites/demos/mobile/app/input/show-password.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/slots.vue b/examples/sites/demos/mobile/app/input/slots.vue
index 7593adbd5..145b43fba 100644
--- a/examples/sites/demos/mobile/app/input/slots.vue
+++ b/examples/sites/demos/mobile/app/input/slots.vue
@@ -31,12 +31,12 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { IconSearch, IconCalendar } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyInput: Input,
+    TinyInput,
     TinyIconSearch: IconSearch(),
     TinyIconCalendar: IconCalendar()
   },
diff --git a/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue b/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
index 694d93cea..10c81d854 100644
--- a/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
+++ b/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/textarea-scalable.vue b/examples/sites/demos/mobile/app/input/textarea-scalable.vue
index 61e1a9c50..1be493321 100644
--- a/examples/sites/demos/mobile/app/input/textarea-scalable.vue
+++ b/examples/sites/demos/mobile/app/input/textarea-scalable.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/type-select.vue b/examples/sites/demos/mobile/app/input/type-select.vue
index 89b43c9f6..4273b4af8 100644
--- a/examples/sites/demos/mobile/app/input/type-select.vue
+++ b/examples/sites/demos/mobile/app/input/type-select.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/type.vue b/examples/sites/demos/mobile/app/input/type.vue
index 6e9a41066..22bdd1b86 100644
--- a/examples/sites/demos/mobile/app/input/type.vue
+++ b/examples/sites/demos/mobile/app/input/type.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/input/validate-event.vue b/examples/sites/demos/mobile/app/input/validate-event.vue
index 800d5858f..f74a46499 100644
--- a/examples/sites/demos/mobile/app/input/validate-event.vue
+++ b/examples/sites/demos/mobile/app/input/validate-event.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script>
-import { Input, Form, FormItem } from '@opentiny/vue'
+import { TinyInput, TinyForm, TinyFormItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input,
-    TinyForm: Form,
-    TinyFormItem: FormItem
+    TinyInput,
+    TinyForm,
+    TinyFormItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/label/base.vue b/examples/sites/demos/mobile/app/label/base.vue
index 06c491ed2..be77d283a 100644
--- a/examples/sites/demos/mobile/app/label/base.vue
+++ b/examples/sites/demos/mobile/app/label/base.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/bold.vue b/examples/sites/demos/mobile/app/label/bold.vue
index 84e1dca32..c200df532 100644
--- a/examples/sites/demos/mobile/app/label/bold.vue
+++ b/examples/sites/demos/mobile/app/label/bold.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/color.vue b/examples/sites/demos/mobile/app/label/color.vue
index e70d599d6..0c29421da 100644
--- a/examples/sites/demos/mobile/app/label/color.vue
+++ b/examples/sites/demos/mobile/app/label/color.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/decimal.vue b/examples/sites/demos/mobile/app/label/decimal.vue
index 4eb59d398..686124a74 100644
--- a/examples/sites/demos/mobile/app/label/decimal.vue
+++ b/examples/sites/demos/mobile/app/label/decimal.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/ellipsis.vue b/examples/sites/demos/mobile/app/label/ellipsis.vue
index 9e9a77c2d..6c27f0cf4 100644
--- a/examples/sites/demos/mobile/app/label/ellipsis.vue
+++ b/examples/sites/demos/mobile/app/label/ellipsis.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/label/limit.vue b/examples/sites/demos/mobile/app/label/limit.vue
index d7a40ded8..d2207698e 100644
--- a/examples/sites/demos/mobile/app/label/limit.vue
+++ b/examples/sites/demos/mobile/app/label/limit.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/position.vue b/examples/sites/demos/mobile/app/label/position.vue
index 892f56060..748281751 100644
--- a/examples/sites/demos/mobile/app/label/position.vue
+++ b/examples/sites/demos/mobile/app/label/position.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/required.vue b/examples/sites/demos/mobile/app/label/required.vue
index cdb3e9d76..fc735b7a3 100644
--- a/examples/sites/demos/mobile/app/label/required.vue
+++ b/examples/sites/demos/mobile/app/label/required.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/size.vue b/examples/sites/demos/mobile/app/label/size.vue
index 53631504c..e711e6477 100644
--- a/examples/sites/demos/mobile/app/label/size.vue
+++ b/examples/sites/demos/mobile/app/label/size.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/type.vue b/examples/sites/demos/mobile/app/label/type.vue
index 0d487ff3f..ee48a489e 100644
--- a/examples/sites/demos/mobile/app/label/type.vue
+++ b/examples/sites/demos/mobile/app/label/type.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/label/wholeline.vue b/examples/sites/demos/mobile/app/label/wholeline.vue
index 40035f345..dc3748fd4 100644
--- a/examples/sites/demos/mobile/app/label/wholeline.vue
+++ b/examples/sites/demos/mobile/app/label/wholeline.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Label } from '@opentiny/vue'
+import { TinyLabel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLabel: Label
+    TinyLabel
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/list/double-line.vue b/examples/sites/demos/mobile/app/list/double-line.vue
index f14a965d7..b34c4cb80 100644
--- a/examples/sites/demos/mobile/app/list/double-line.vue
+++ b/examples/sites/demos/mobile/app/list/double-line.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { List } from '@opentiny/vue'
+import { TinyList } from '@opentiny/vue'
 import { iconChevronRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyList: List,
+    TinyList,
     IconChevronRight: iconChevronRight()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/list/double-list.vue b/examples/sites/demos/mobile/app/list/double-list.vue
index cd92876de..37495ac7c 100644
--- a/examples/sites/demos/mobile/app/list/double-list.vue
+++ b/examples/sites/demos/mobile/app/list/double-list.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="jsx">
-import { List } from '@opentiny/vue'
+import { TinyList } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyList: List
+    TinyList
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/list/imformation-list.vue b/examples/sites/demos/mobile/app/list/imformation-list.vue
index 9c82ca16d..56cb90c9d 100644
--- a/examples/sites/demos/mobile/app/list/imformation-list.vue
+++ b/examples/sites/demos/mobile/app/list/imformation-list.vue
@@ -82,12 +82,12 @@
 </template>
 
 <script lang="jsx">
-import { List } from '@opentiny/vue'
+import { TinyList } from '@opentiny/vue'
 import { iconDialog } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyList: List,
+    TinyList,
     IconDialog: iconDialog()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/list/single-line.vue b/examples/sites/demos/mobile/app/list/single-line.vue
index 39e2420f7..aef05acb5 100644
--- a/examples/sites/demos/mobile/app/list/single-line.vue
+++ b/examples/sites/demos/mobile/app/list/single-line.vue
@@ -60,12 +60,12 @@
 </template>
 
 <script lang="jsx">
-import { List } from '@opentiny/vue'
+import { TinyList } from '@opentiny/vue'
 import { iconHelp, iconChevronRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyList: List,
+    TinyList,
     IconHelp: iconHelp(),
     IconChevronRight: iconChevronRight()
   },
diff --git a/examples/sites/demos/mobile/app/list/slots.vue b/examples/sites/demos/mobile/app/list/slots.vue
index 14a16c5eb..65ed2eb72 100644
--- a/examples/sites/demos/mobile/app/list/slots.vue
+++ b/examples/sites/demos/mobile/app/list/slots.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { List } from '@opentiny/vue'
+import { TinyList } from '@opentiny/vue'
 import { iconRightward } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyList: List,
+    TinyList,
     IconRightward: iconRightward()
   },
   data() {
diff --git a/examples/sites/demos/mobile/app/loading/background.vue b/examples/sites/demos/mobile/app/loading/background.vue
index 8b5683a5b..ba28a8402 100644
--- a/examples/sites/demos/mobile/app/loading/background.vue
+++ b/examples/sites/demos/mobile/app/loading/background.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       background: '#19191960',
       text: '自定义遮罩层背景色',
       target: document.getElementById('demo-loading'),
diff --git a/examples/sites/demos/mobile/app/loading/base.vue b/examples/sites/demos/mobile/app/loading/base.vue
index 9318e411c..aa957dbd6 100644
--- a/examples/sites/demos/mobile/app/loading/base.vue
+++ b/examples/sites/demos/mobile/app/loading/base.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Loading, Button } from '@opentiny/vue'
+import { TinyLoading, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
     }
   },
   mounted() {
-    this.loadingInstance = Loading.service({
+    this.loadingInstance = TinyLoading.service({
       tiny_mode: 'mobile',
       target: document.getElementById('loading-box')
     })
diff --git a/examples/sites/demos/mobile/app/loading/custom-class.vue b/examples/sites/demos/mobile/app/loading/custom-class.vue
index f5ee4a6c8..03236794f 100644
--- a/examples/sites/demos/mobile/app/loading/custom-class.vue
+++ b/examples/sites/demos/mobile/app/loading/custom-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '自定义 loading 类名',
       customClass: 'my-loading',
       target: document.getElementById('demo-loading'),
diff --git a/examples/sites/demos/mobile/app/loading/global-registry.vue b/examples/sites/demos/mobile/app/loading/global-registry.vue
index d77db605e..59cfd5d88 100644
--- a/examples/sites/demos/mobile/app/loading/global-registry.vue
+++ b/examples/sites/demos/mobile/app/loading/global-registry.vue
@@ -9,14 +9,14 @@
 </template>
 
 <script>
-import { Loading, Button } from '@opentiny/vue'
+import { TinyLoading, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   directives: {
-    loading: Loading.directive
+    loading: TinyLoading.directive
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/loading/size.vue b/examples/sites/demos/mobile/app/loading/size.vue
index 9e5f285be..a0bc44629 100644
--- a/examples/sites/demos/mobile/app/loading/size.vue
+++ b/examples/sites/demos/mobile/app/loading/size.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
     // mini 尺寸
-    Loading.service({
+    TinyLoading.service({
       size: 'mini',
       text: 'mini 尺寸',
       target: '#loading-box0',
@@ -21,7 +21,7 @@ export default {
     })
 
     // small 尺寸
-    Loading.service({
+    TinyLoading.service({
       size: 'small',
       text: 'small 尺寸',
       target: '#loading-box1',
@@ -29,7 +29,7 @@ export default {
     })
 
     // medium 尺寸
-    Loading.service({
+    TinyLoading.service({
       size: 'medium',
       text: 'medium 尺寸',
       target: '#loading-box2',
@@ -37,7 +37,7 @@ export default {
     })
 
     // large 尺寸
-    Loading.service({
+    TinyLoading.service({
       size: 'large',
       text: 'large 尺寸',
       target: '#loading-box3',
diff --git a/examples/sites/demos/mobile/app/loading/spinner.vue b/examples/sites/demos/mobile/app/loading/spinner.vue
index 007383868..ffd95de0c 100644
--- a/examples/sites/demos/mobile/app/loading/spinner.vue
+++ b/examples/sites/demos/mobile/app/loading/spinner.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 import { iconLoading } from '@opentiny/vue-icon'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       spinner: iconLoading(),
       text: '自定义 loading 图标',
       target: document.getElementById('demo-loading'),
diff --git a/examples/sites/demos/mobile/app/loading/tip-text.vue b/examples/sites/demos/mobile/app/loading/tip-text.vue
index 57609b212..bd42569c0 100644
--- a/examples/sites/demos/mobile/app/loading/tip-text.vue
+++ b/examples/sites/demos/mobile/app/loading/tip-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '加载中...',
       tiny_mode: 'mobile',
       target: document.getElementById('demo-loading')
diff --git a/examples/sites/demos/mobile/app/loading/type.vue b/examples/sites/demos/mobile/app/loading/type.vue
index f5292f00e..0901b4ff1 100644
--- a/examples/sites/demos/mobile/app/loading/type.vue
+++ b/examples/sites/demos/mobile/app/loading/type.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   data() {
@@ -14,7 +14,7 @@ export default {
     }
   },
   mounted() {
-    this.loadingInstance = Loading.service({
+    this.loadingInstance = TinyLoading.service({
       tiny_mode: 'mobile',
       target: document.getElementById('tiny-mobile-loading2'),
       type: 'simple'
diff --git a/examples/sites/demos/mobile/app/mask/basic-usage.vue b/examples/sites/demos/mobile/app/mask/basic-usage.vue
index e6c9c76ac..79c9e7415 100644
--- a/examples/sites/demos/mobile/app/mask/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/mask/basic-usage.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Mask, Button } from '@opentiny/vue'
+import { TinyMask, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMask: Mask,
-    TinyButton: Button
+    TinyMask,
+    TinyButton
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
     handleClick() {
       this.showMsg = true
     }
-  },
+  }
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/mask/click-no-hide.vue b/examples/sites/demos/mobile/app/mask/click-no-hide.vue
index d39f88b09..76f768feb 100644
--- a/examples/sites/demos/mobile/app/mask/click-no-hide.vue
+++ b/examples/sites/demos/mobile/app/mask/click-no-hide.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Mask, Button } from '@opentiny/vue'
+import { TinyMask, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMask: Mask,
-    TinyButton: Button
+    TinyMask,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/mask/slot-default.vue b/examples/sites/demos/mobile/app/mask/slot-default.vue
index 756f60fba..5cb70eb52 100644
--- a/examples/sites/demos/mobile/app/mask/slot-default.vue
+++ b/examples/sites/demos/mobile/app/mask/slot-default.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Mask, Button } from '@opentiny/vue'
+import { TinyMask, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMask: Mask,
-    TinyButton: Button
+    TinyMask,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/mask/z-index.vue b/examples/sites/demos/mobile/app/mask/z-index.vue
index 96e8d696b..c1661e95e 100644
--- a/examples/sites/demos/mobile/app/mask/z-index.vue
+++ b/examples/sites/demos/mobile/app/mask/z-index.vue
@@ -6,19 +6,19 @@
 </template>
 
 <script>
-import { Mask, Button } from '@opentiny/vue'
+import { TinyMask, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMask: Mask,
-    TinyButton: Button
+    TinyMask,
+    TinyButton
   },
   data() {
     return {
       visible: false,
       zIndex: 9999
     }
-  },
+  }
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/minipicker/cancel-button-text.vue b/examples/sites/demos/mobile/app/minipicker/cancel-button-text.vue
index a3a493227..6a584810e 100644
--- a/examples/sites/demos/mobile/app/minipicker/cancel-button-text.vue
+++ b/examples/sites/demos/mobile/app/minipicker/cancel-button-text.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, MiniPicker } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyMiniPicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
+    TinyMiniPicker,
+    TinyForm,
+    TinyFormItem,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/cancel.vue b/examples/sites/demos/mobile/app/minipicker/cancel.vue
index 98d35b5ca..3806ee6ae 100644
--- a/examples/sites/demos/mobile/app/minipicker/cancel.vue
+++ b/examples/sites/demos/mobile/app/minipicker/cancel.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { MiniPicker, Button } from '@opentiny/vue'
+import { TinyMiniPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyButton: Button
+    TinyMiniPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/cascad.vue b/examples/sites/demos/mobile/app/minipicker/cascad.vue
index 82f24c615..8855cb759 100644
--- a/examples/sites/demos/mobile/app/minipicker/cascad.vue
+++ b/examples/sites/demos/mobile/app/minipicker/cascad.vue
@@ -17,14 +17,14 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, MiniPicker } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyMiniPicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
+    TinyMiniPicker,
+    TinyForm,
+    TinyFormItem,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/change.vue b/examples/sites/demos/mobile/app/minipicker/change.vue
index 2f2a25ab0..78638b797 100644
--- a/examples/sites/demos/mobile/app/minipicker/change.vue
+++ b/examples/sites/demos/mobile/app/minipicker/change.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { MiniPicker, Button } from '@opentiny/vue'
+import { TinyMiniPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyButton: Button
+    TinyMiniPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/column.vue b/examples/sites/demos/mobile/app/minipicker/column.vue
index f8ab1086c..699a0735e 100644
--- a/examples/sites/demos/mobile/app/minipicker/column.vue
+++ b/examples/sites/demos/mobile/app/minipicker/column.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { MiniPicker, Button } from '@opentiny/vue'
+import { TinyMiniPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyButton: Button
+    TinyMiniPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/defaultindex.vue b/examples/sites/demos/mobile/app/minipicker/defaultindex.vue
index 43e34e713..b4c1c1044 100644
--- a/examples/sites/demos/mobile/app/minipicker/defaultindex.vue
+++ b/examples/sites/demos/mobile/app/minipicker/defaultindex.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { MiniPicker, Button } from '@opentiny/vue'
+import { TinyMiniPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyButton: Button
+    TinyMiniPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/itemheight.vue b/examples/sites/demos/mobile/app/minipicker/itemheight.vue
index 1a9be225e..89bd707bd 100644
--- a/examples/sites/demos/mobile/app/minipicker/itemheight.vue
+++ b/examples/sites/demos/mobile/app/minipicker/itemheight.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { MiniPicker, Button } from '@opentiny/vue'
+import { TinyMiniPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyButton: Button
+    TinyMiniPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/methods.vue b/examples/sites/demos/mobile/app/minipicker/methods.vue
index 6c5fe3b1e..5316279af 100644
--- a/examples/sites/demos/mobile/app/minipicker/methods.vue
+++ b/examples/sites/demos/mobile/app/minipicker/methods.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { MiniPicker, Button } from '@opentiny/vue'
+import { TinyMiniPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyButton: Button
+    TinyMiniPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/multicolumn.vue b/examples/sites/demos/mobile/app/minipicker/multicolumn.vue
index 913c1160e..de2876f91 100644
--- a/examples/sites/demos/mobile/app/minipicker/multicolumn.vue
+++ b/examples/sites/demos/mobile/app/minipicker/multicolumn.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, MiniPicker } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyMiniPicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
+    TinyMiniPicker,
+    TinyForm,
+    TinyFormItem,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/toolbar.vue b/examples/sites/demos/mobile/app/minipicker/toolbar.vue
index 11b36456b..0d62b565c 100644
--- a/examples/sites/demos/mobile/app/minipicker/toolbar.vue
+++ b/examples/sites/demos/mobile/app/minipicker/toolbar.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Input, MiniPicker } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyMiniPicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
+    TinyMiniPicker,
+    TinyForm,
+    TinyFormItem,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/minipicker/visibleitemcount.vue b/examples/sites/demos/mobile/app/minipicker/visibleitemcount.vue
index 63f0acab1..d5e04ed30 100644
--- a/examples/sites/demos/mobile/app/minipicker/visibleitemcount.vue
+++ b/examples/sites/demos/mobile/app/minipicker/visibleitemcount.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { MiniPicker, Button } from '@opentiny/vue'
+import { TinyMiniPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMiniPicker: MiniPicker,
-    TinyButton: Button
+    TinyMiniPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/modal/base.vue b/examples/sites/demos/mobile/app/modal/base.vue
index 156d397d8..ce42af731 100644
--- a/examples/sites/demos/mobile/app/modal/base.vue
+++ b/examples/sites/demos/mobile/app/modal/base.vue
@@ -9,21 +9,21 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal, Notify } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick1() {
-      Modal.alert({ message: '单行居中对齐，多行居左对齐', showHeader: false, tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '单行居中对齐，多行居左对齐', showHeader: false, tiny_mode: 'mobile' })
     },
     baseClick2() {
-      Modal.alert({ message: '单行居中对齐，多行居左对齐', title: '标题', tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '单行居中对齐，多行居左对齐', title: '标题', tiny_mode: 'mobile' })
     },
     baseClick3() {
-      Modal.alert({
+      TinyModal.alert({
         message:
           '单行居中对齐，多行居左对齐,单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐',
         title: '标题',
@@ -31,8 +31,8 @@ export default {
       })
     },
     baseClick4() {
-      Modal.confirm({ message: '您确定要删除吗？', tiny_mode: 'mobile' }).then((res) => {
-        Notify({
+      TinyModal.confirm({ message: '您确定要删除吗？', tiny_mode: 'mobile' }).then((res) => {
+        TinyNotify({
           type: 'info',
           title: '触发回调事件',
           message: `点击${res}按钮`
@@ -40,8 +40,8 @@ export default {
       })
     },
     baseClick5() {
-      Modal.confirm({ message: '您确定要删除吗？', showHeader: false, tiny_mode: 'mobile' }).then((res) => {
-        Notify({
+      TinyModal.confirm({ message: '您确定要删除吗？', showHeader: false, tiny_mode: 'mobile' }).then((res) => {
+        TinyNotify({
           type: 'info',
           title: '触发回调事件',
           message: `点击${res}按钮`
diff --git a/examples/sites/demos/mobile/app/modal/cancel-event.vue b/examples/sites/demos/mobile/app/modal/cancel-event.vue
index 5a3fa5c5c..61d956cc2 100644
--- a/examples/sites/demos/mobile/app/modal/cancel-event.vue
+++ b/examples/sites/demos/mobile/app/modal/cancel-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     cancelClick() {
-      Modal.message({ message: '点击取消按钮时触发事件', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '点击取消按钮时触发事件', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/close-event.vue b/examples/sites/demos/mobile/app/modal/close-event.vue
index 3b883a1d5..ba914cd94 100644
--- a/examples/sites/demos/mobile/app/modal/close-event.vue
+++ b/examples/sites/demos/mobile/app/modal/close-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     closeClick() {
-      Modal.message({ message: '点击关闭按钮时触发事件', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '点击关闭按钮时触发事件', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/confirm-event.vue b/examples/sites/demos/mobile/app/modal/confirm-event.vue
index 67805f50a..53469f321 100644
--- a/examples/sites/demos/mobile/app/modal/confirm-event.vue
+++ b/examples/sites/demos/mobile/app/modal/confirm-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     confirmClick() {
-      Modal.message({ message: '点击确定按钮时触发事件', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '点击确定按钮时触发事件', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/duration.vue b/examples/sites/demos/mobile/app/modal/duration.vue
index 456c34434..f82021df6 100644
--- a/examples/sites/demos/mobile/app/modal/duration.vue
+++ b/examples/sites/demos/mobile/app/modal/duration.vue
@@ -7,18 +7,18 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Modal.message({ message: '默认3000ms后自动关闭提示框', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '默认3000ms后自动关闭提示框', tiny_mode: 'mobile' })
     },
     successClick() {
-      Modal.message({
+      TinyModal.message({
         message: '500ms后自动关闭提示框',
         status: 'success',
         duration: '500',
@@ -26,7 +26,7 @@ export default {
       })
     },
     errorClick() {
-      Modal.message({
+      TinyModal.message({
         message: '5000ms后自动关闭提示框',
         status: 'error',
         duration: '5000',
diff --git a/examples/sites/demos/mobile/app/modal/esc-closable.vue b/examples/sites/demos/mobile/app/modal/esc-closable.vue
index 534fb2804..a8c575fa1 100644
--- a/examples/sites/demos/mobile/app/modal/esc-closable.vue
+++ b/examples/sites/demos/mobile/app/modal/esc-closable.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '按 Esc 键可以关闭', escClosable: true, tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '按 Esc 键可以关闭', escClosable: true, tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/footer-slot.vue b/examples/sites/demos/mobile/app/modal/footer-slot.vue
index 217d4a8ee..7dbb166e4 100644
--- a/examples/sites/demos/mobile/app/modal/footer-slot.vue
+++ b/examples/sites/demos/mobile/app/modal/footer-slot.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/modal/fullscreen.vue b/examples/sites/demos/mobile/app/modal/fullscreen.vue
index bf4879c85..60d09e548 100644
--- a/examples/sites/demos/mobile/app/modal/fullscreen.vue
+++ b/examples/sites/demos/mobile/app/modal/fullscreen.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '最大化显示', fullscreen: true, tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '最大化显示', fullscreen: true, tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/grid.vue b/examples/sites/demos/mobile/app/modal/grid.vue
index 2929b63db..a2fd4f272 100644
--- a/examples/sites/demos/mobile/app/modal/grid.vue
+++ b/examples/sites/demos/mobile/app/modal/grid.vue
@@ -18,14 +18,14 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal, Grid, GridColumn } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButton,
+    TinyModal,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/modal/hide-event.vue b/examples/sites/demos/mobile/app/modal/hide-event.vue
index b9ddf427e..d1615d154 100644
--- a/examples/sites/demos/mobile/app/modal/hide-event.vue
+++ b/examples/sites/demos/mobile/app/modal/hide-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     hideClick() {
-      Modal.message({ message: '在窗口关闭时会触发事件', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '在窗口关闭时会触发事件', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/id.vue b/examples/sites/demos/mobile/app/modal/id.vue
index 0487963a9..3ed0dad06 100644
--- a/examples/sites/demos/mobile/app/modal/id.vue
+++ b/examples/sites/demos/mobile/app/modal/id.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.message({ message: '不允许重复点击', id: 'unique', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '不允许重复点击', id: 'unique', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/is-form-reset.vue b/examples/sites/demos/mobile/app/modal/is-form-reset.vue
index 872bbb947..f21ecd70e 100644
--- a/examples/sites/demos/mobile/app/modal/is-form-reset.vue
+++ b/examples/sites/demos/mobile/app/modal/is-form-reset.vue
@@ -16,15 +16,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal, Notify, Form, FormItem, Input } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyNotify, TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
+    TinyButton,
+    TinyModal,
+    TinyForm,
+    TinyFormItem,
+    TinyInput
   },
   data() {
     return {
@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     closeClick() {
-      Notify({
+      TinyNotify({
         title: 'closeClick事件',
         message: '点击关闭按钮时触发事件',
         position: 'top-right'
diff --git a/examples/sites/demos/mobile/app/modal/lock-scroll.vue b/examples/sites/demos/mobile/app/modal/lock-scroll.vue
index 4a451eb18..7289522e3 100644
--- a/examples/sites/demos/mobile/app/modal/lock-scroll.vue
+++ b/examples/sites/demos/mobile/app/modal/lock-scroll.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '不锁住滚动条不要遮罩层',
         lockScroll: false,
         mask: false,
diff --git a/examples/sites/demos/mobile/app/modal/lock-view.vue b/examples/sites/demos/mobile/app/modal/lock-view.vue
index e8e172ce7..4841399f1 100644
--- a/examples/sites/demos/mobile/app/modal/lock-view.vue
+++ b/examples/sites/demos/mobile/app/modal/lock-view.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '不锁界面不要遮罩层',
         lockView: false,
         mask: false,
diff --git a/examples/sites/demos/mobile/app/modal/mask-closable.vue b/examples/sites/demos/mobile/app/modal/mask-closable.vue
index 3752ab4c5..c57de0744 100644
--- a/examples/sites/demos/mobile/app/modal/mask-closable.vue
+++ b/examples/sites/demos/mobile/app/modal/mask-closable.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '点击遮罩层可以关闭', maskClosable: true, tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '点击遮罩层可以关闭', maskClosable: true, tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/message.vue b/examples/sites/demos/mobile/app/modal/message.vue
index f604b7ab3..d1cb5dc16 100644
--- a/examples/sites/demos/mobile/app/modal/message.vue
+++ b/examples/sites/demos/mobile/app/modal/message.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '自定义提示框的内容', tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '自定义提示框的内容', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/min-height.vue b/examples/sites/demos/mobile/app/modal/min-height.vue
index a5417fe8c..869f29010 100644
--- a/examples/sites/demos/mobile/app/modal/min-height.vue
+++ b/examples/sites/demos/mobile/app/modal/min-height.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '提示框拖动最小高度为300',
         resize: true,
         minHeight: 300,
diff --git a/examples/sites/demos/mobile/app/modal/min-width.vue b/examples/sites/demos/mobile/app/modal/min-width.vue
index 793bdb514..1144c11b1 100644
--- a/examples/sites/demos/mobile/app/modal/min-width.vue
+++ b/examples/sites/demos/mobile/app/modal/min-width.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '提示框拖动最小宽度为700',
         resize: true,
         minWidth: 700,
diff --git a/examples/sites/demos/mobile/app/modal/resize.vue b/examples/sites/demos/mobile/app/modal/resize.vue
index 1d72c7581..028fdbce3 100644
--- a/examples/sites/demos/mobile/app/modal/resize.vue
+++ b/examples/sites/demos/mobile/app/modal/resize.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: '可以拖动调整窗口大小',
         resize: true,
         height: 188,
diff --git a/examples/sites/demos/mobile/app/modal/show-event.vue b/examples/sites/demos/mobile/app/modal/show-event.vue
index f946a2883..4d570554b 100644
--- a/examples/sites/demos/mobile/app/modal/show-event.vue
+++ b/examples/sites/demos/mobile/app/modal/show-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     showClick() {
-      Modal.message({ message: '在窗口显示时触发事件', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '在窗口显示时触发事件', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/showFooter.vue b/examples/sites/demos/mobile/app/modal/showFooter.vue
index f75bd3fd0..542e2a623 100644
--- a/examples/sites/demos/mobile/app/modal/showFooter.vue
+++ b/examples/sites/demos/mobile/app/modal/showFooter.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '不显示底部', showFooter: false, tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '不显示底部', showFooter: false, tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/showHeader.vue b/examples/sites/demos/mobile/app/modal/showHeader.vue
index 46d222ff3..cec46a0d7 100644
--- a/examples/sites/demos/mobile/app/modal/showHeader.vue
+++ b/examples/sites/demos/mobile/app/modal/showHeader.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '不显示头部', showHeader: false, tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '不显示头部', showHeader: false, tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/status.vue b/examples/sites/demos/mobile/app/modal/status.vue
index 44bfe75a9..86b6236c1 100644
--- a/examples/sites/demos/mobile/app/modal/status.vue
+++ b/examples/sites/demos/mobile/app/modal/status.vue
@@ -9,27 +9,27 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Modal.message({ message: '基本提示图标', status: 'info', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '基本提示图标', status: 'info', tiny_mode: 'mobile' })
     },
     successClick() {
-      Modal.message({ message: '成功提示图标', status: 'success', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '成功提示图标', status: 'success', tiny_mode: 'mobile' })
     },
     warningClick() {
-      Modal.message({ message: '警告提示图标', status: 'warning', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '警告提示图标', status: 'warning', tiny_mode: 'mobile' })
     },
     errorClick() {
-      Modal.message({ message: '错误提示图标', status: 'error', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '错误提示图标', status: 'error', tiny_mode: 'mobile' })
     },
     loadingClick() {
-      Modal.message({ message: '加载提示图标', status: 'loading', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '加载提示图标', status: 'loading', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/title.vue b/examples/sites/demos/mobile/app/modal/title.vue
index e52c4fda8..3ebc68dba 100644
--- a/examples/sites/demos/mobile/app/modal/title.vue
+++ b/examples/sites/demos/mobile/app/modal/title.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '自定义标题', title: '自定义标题', tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '自定义标题', title: '自定义标题', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/top.vue b/examples/sites/demos/mobile/app/modal/top.vue
index 30681d47a..71ffec111 100644
--- a/examples/sites/demos/mobile/app/modal/top.vue
+++ b/examples/sites/demos/mobile/app/modal/top.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.message({ message: '距离顶部的位置为500', top: 500, tiny_mode: 'mobile' })
+      TinyModal.message({ message: '距离顶部的位置为500', top: 500, tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/type.vue b/examples/sites/demos/mobile/app/modal/type.vue
index 1c4c086e6..46bab6d26 100644
--- a/examples/sites/demos/mobile/app/modal/type.vue
+++ b/examples/sites/demos/mobile/app/modal/type.vue
@@ -7,22 +7,22 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal, Notify } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     alertClick() {
-      Modal.alert({ message: 'alert 弹框', title: '弹框', tiny_mode: 'mobile' })
+      TinyModal.alert({ message: 'alert 弹框', title: '弹框', tiny_mode: 'mobile' })
     },
     messageClick() {
-      Modal.message({ message: 'message 提示框', title: '弹框', tiny_mode: 'mobile' })
+      TinyModal.message({ message: 'message 提示框', title: '弹框', tiny_mode: 'mobile' })
     },
     confirmClick() {
-      Modal.confirm({ message: '您确定要删除吗？', title: '确定框', tiny_mode: 'mobile' }).then((res) => {
-        Notify({
+      TinyModal.confirm({ message: '您确定要删除吗？', title: '确定框', tiny_mode: 'mobile' }).then((res) => {
+        TinyNotify({
           type: 'info',
           title: '触发回调事件',
           message: `点击${res}按钮`
diff --git a/examples/sites/demos/mobile/app/modal/value.vue b/examples/sites/demos/mobile/app/modal/value.vue
index f131b7eef..e0f8784ff 100644
--- a/examples/sites/demos/mobile/app/modal/value.vue
+++ b/examples/sites/demos/mobile/app/modal/value.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/modal/zIndex.vue b/examples/sites/demos/mobile/app/modal/zIndex.vue
index d65ac61a2..109d919ca 100644
--- a/examples/sites/demos/mobile/app/modal/zIndex.vue
+++ b/examples/sites/demos/mobile/app/modal/zIndex.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: 'zIndex的值为500', zIndex: 500, tiny_mode: 'mobile' })
+      TinyModal.alert({ message: 'zIndex的值为500', zIndex: 500, tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/modal/zoom-event.vue b/examples/sites/demos/mobile/app/modal/zoom-event.vue
index 6deeddbd2..2ea000322 100644
--- a/examples/sites/demos/mobile/app/modal/zoom-event.vue
+++ b/examples/sites/demos/mobile/app/modal/zoom-event.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     zoomClick() {
-      Modal.message({ message: '窗口缩放时触发事件', tiny_mode: 'mobile' })
+      TinyModal.message({ message: '窗口缩放时触发事件', tiny_mode: 'mobile' })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/multi-select/basic-usage.vue b/examples/sites/demos/mobile/app/multi-select/basic-usage.vue
index c67f73496..a6c5f0305 100644
--- a/examples/sites/demos/mobile/app/multi-select/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/multi-select/basic-usage.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { MultiSelect } from '@opentiny/vue'
+import { TinyMultiSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMultiSelect: MultiSelect
+    TinyMultiSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/multi-select/disabled.vue b/examples/sites/demos/mobile/app/multi-select/disabled.vue
index feec1517f..d8cc31158 100644
--- a/examples/sites/demos/mobile/app/multi-select/disabled.vue
+++ b/examples/sites/demos/mobile/app/multi-select/disabled.vue
@@ -14,17 +14,16 @@
 </template>
 
 <script>
-import { MultiSelect } from '@opentiny/vue'
+import { TinyMultiSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMultiSelect: MultiSelect
+    TinyMultiSelect
   },
   data() {
     return {
       value1: ['', '', ''],
       value2: [''],
-
       data1: [
         {
           title: '时间',
diff --git a/examples/sites/demos/mobile/app/multi-select/event-click-item.vue b/examples/sites/demos/mobile/app/multi-select/event-click-item.vue
index 1b820be0e..927a6414a 100644
--- a/examples/sites/demos/mobile/app/multi-select/event-click-item.vue
+++ b/examples/sites/demos/mobile/app/multi-select/event-click-item.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { MultiSelect, Toast } from '@opentiny/vue'
+import { TinyMultiSelect, TinyToast } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMultiSelect: MultiSelect
+    TinyMultiSelect
   },
   data() {
     return {
@@ -233,7 +233,7 @@ export default {
   methods: {
     handleItemClick(item, headerIndex) {
       const text = `${this.data[headerIndex].title}: ${item.label}`
-      Toast.service({
+      TinyToast.service({
         text
       })
     }
diff --git a/examples/sites/demos/mobile/app/multi-select/filter.vue b/examples/sites/demos/mobile/app/multi-select/filter.vue
index a868c44f4..165fdbca2 100644
--- a/examples/sites/demos/mobile/app/multi-select/filter.vue
+++ b/examples/sites/demos/mobile/app/multi-select/filter.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { MultiSelect } from '@opentiny/vue'
+import { TinyMultiSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMultiSelect: MultiSelect
+    TinyMultiSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/multi-select/mask.vue b/examples/sites/demos/mobile/app/multi-select/mask.vue
index 96775c6c9..f690d70f2 100644
--- a/examples/sites/demos/mobile/app/multi-select/mask.vue
+++ b/examples/sites/demos/mobile/app/multi-select/mask.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { MultiSelect } from '@opentiny/vue'
+import { TinyMultiSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMultiSelect: MultiSelect
+    TinyMultiSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/multi-select/slots.vue b/examples/sites/demos/mobile/app/multi-select/slots.vue
index c2a7a3ccb..16bf8696d 100644
--- a/examples/sites/demos/mobile/app/multi-select/slots.vue
+++ b/examples/sites/demos/mobile/app/multi-select/slots.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { MultiSelect } from '@opentiny/vue'
+import { TinyMultiSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMultiSelect: MultiSelect
+    TinyMultiSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/multi-select/type-wheel.vue b/examples/sites/demos/mobile/app/multi-select/type-wheel.vue
index 534ded195..eec7ad55b 100644
--- a/examples/sites/demos/mobile/app/multi-select/type-wheel.vue
+++ b/examples/sites/demos/mobile/app/multi-select/type-wheel.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { MultiSelect, Toast } from '@opentiny/vue'
+import { TinyMultiSelect, TinyToast } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMultiSelect: MultiSelect
+    TinyMultiSelect
   },
   data() {
     return {
@@ -197,12 +197,12 @@ export default {
   methods: {
     confirm(selectedOptions, headerIndex, columnIndices) {
       const selectVal = selectedOptions.reduce((prev, current) => `${prev} - ${current.label}`, '')
-      Toast.service({
+      TinyToast.service({
         text: `选中值: ${selectVal}`
       })
     },
     reset(currentValue, headerIndex, columnIndices) {
-      Toast.service({
+      TinyToast.service({
         text: '已重置为初始值'
       })
     }
diff --git a/examples/sites/demos/mobile/app/navbar/left-right-arrow.vue b/examples/sites/demos/mobile/app/navbar/left-right-arrow.vue
index f600892ef..13ac67901 100644
--- a/examples/sites/demos/mobile/app/navbar/left-right-arrow.vue
+++ b/examples/sites/demos/mobile/app/navbar/left-right-arrow.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { NavBar } from '@opentiny/vue'
+import { TinyNavBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavBar: NavBar
+    TinyNavBar
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile/app/navbar/left-right-text.vue b/examples/sites/demos/mobile/app/navbar/left-right-text.vue
index f2b3cf837..e2d34d405 100644
--- a/examples/sites/demos/mobile/app/navbar/left-right-text.vue
+++ b/examples/sites/demos/mobile/app/navbar/left-right-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { NavBar } from '@opentiny/vue'
+import { TinyNavBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavBar: NavBar
+    TinyNavBar
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile/app/navbar/slots.vue b/examples/sites/demos/mobile/app/navbar/slots.vue
index 2bd6fd32d..5f0b37482 100644
--- a/examples/sites/demos/mobile/app/navbar/slots.vue
+++ b/examples/sites/demos/mobile/app/navbar/slots.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { NavBar } from '@opentiny/vue'
+import { TinyNavBar } from '@opentiny/vue'
 import { iconArrowLeft, iconMore } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyNavBar: NavBar,
+    TinyNavBar,
     IconArrowLeft: iconArrowLeft(),
     IconMore: iconMore()
   },
diff --git a/examples/sites/demos/mobile/app/navbar/z-index.vue b/examples/sites/demos/mobile/app/navbar/z-index.vue
index 5879ef3b5..3bdf5850f 100644
--- a/examples/sites/demos/mobile/app/navbar/z-index.vue
+++ b/examples/sites/demos/mobile/app/navbar/z-index.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { NavBar } from '@opentiny/vue'
+import { TinyNavBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavBar: NavBar
+    TinyNavBar
   },
   data() {
     return {}
diff --git a/examples/sites/demos/mobile/app/numeric/automatic-price.vue b/examples/sites/demos/mobile/app/numeric/automatic-price.vue
index b67813aa8..7188031c2 100644
--- a/examples/sites/demos/mobile/app/numeric/automatic-price.vue
+++ b/examples/sites/demos/mobile/app/numeric/automatic-price.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/numeric/circulate.vue b/examples/sites/demos/mobile/app/numeric/circulate.vue
index fd7f19623..25b869c06 100644
--- a/examples/sites/demos/mobile/app/numeric/circulate.vue
+++ b/examples/sites/demos/mobile/app/numeric/circulate.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/numeric/controls-position.vue b/examples/sites/demos/mobile/app/numeric/controls-position.vue
index 9f98f86b2..1d6b964c6 100644
--- a/examples/sites/demos/mobile/app/numeric/controls-position.vue
+++ b/examples/sites/demos/mobile/app/numeric/controls-position.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/numeric/controls.vue b/examples/sites/demos/mobile/app/numeric/controls.vue
index a7ec9c130..bd697724f 100644
--- a/examples/sites/demos/mobile/app/numeric/controls.vue
+++ b/examples/sites/demos/mobile/app/numeric/controls.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/numeric/event.vue b/examples/sites/demos/mobile/app/numeric/event.vue
index bde9b91fe..131ecc21f 100644
--- a/examples/sites/demos/mobile/app/numeric/event.vue
+++ b/examples/sites/demos/mobile/app/numeric/event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/numeric/max.vue b/examples/sites/demos/mobile/app/numeric/max.vue
index a50a31a96..4e855cb6b 100644
--- a/examples/sites/demos/mobile/app/numeric/max.vue
+++ b/examples/sites/demos/mobile/app/numeric/max.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/numeric/placeholder.vue b/examples/sites/demos/mobile/app/numeric/placeholder.vue
index 63dcf8428..f5db56937 100644
--- a/examples/sites/demos/mobile/app/numeric/placeholder.vue
+++ b/examples/sites/demos/mobile/app/numeric/placeholder.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/numeric/precision.vue b/examples/sites/demos/mobile/app/numeric/precision.vue
index 21cedd2af..286338e8f 100644
--- a/examples/sites/demos/mobile/app/numeric/precision.vue
+++ b/examples/sites/demos/mobile/app/numeric/precision.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/numeric/step.vue b/examples/sites/demos/mobile/app/numeric/step.vue
index a288d0e42..a44caad86 100644
--- a/examples/sites/demos/mobile/app/numeric/step.vue
+++ b/examples/sites/demos/mobile/app/numeric/step.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/popover/base.vue b/examples/sites/demos/mobile/app/popover/base.vue
index 9032433f3..76b8e22d8 100644
--- a/examples/sites/demos/mobile/app/popover/base.vue
+++ b/examples/sites/demos/mobile/app/popover/base.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="jsx">
-import { Popover } from '@opentiny/vue'
+import { TinyPopover } from '@opentiny/vue'
 
 export default {
   data() {
@@ -92,7 +92,7 @@ export default {
     }
   },
   components: {
-    TinyPopover: Popover
+    TinyPopover
   },
   methods: {
     itemClick(item) {
diff --git a/examples/sites/demos/mobile/app/popover/direction.vue b/examples/sites/demos/mobile/app/popover/direction.vue
index a2e7fcd8e..0fa8efd3a 100644
--- a/examples/sites/demos/mobile/app/popover/direction.vue
+++ b/examples/sites/demos/mobile/app/popover/direction.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="jsx">
-import { Popover } from '@opentiny/vue'
+import { TinyPopover } from '@opentiny/vue'
 
 export default {
   data() {
@@ -90,7 +90,7 @@ export default {
     }
   },
   components: {
-    TinyPopover: Popover
+    TinyPopover
   },
   methods: {
     itemClick(item) {
diff --git a/examples/sites/demos/mobile/app/progress/custom-color.vue b/examples/sites/demos/mobile/app/progress/custom-color.vue
index 14950bae5..5173baf36 100644
--- a/examples/sites/demos/mobile/app/progress/custom-color.vue
+++ b/examples/sites/demos/mobile/app/progress/custom-color.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
 
   data() {
diff --git a/examples/sites/demos/mobile/app/progress/dynamic-control-changes.vue b/examples/sites/demos/mobile/app/progress/dynamic-control-changes.vue
index 2f6cd453d..21cfcab1e 100644
--- a/examples/sites/demos/mobile/app/progress/dynamic-control-changes.vue
+++ b/examples/sites/demos/mobile/app/progress/dynamic-control-changes.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
 
   data() {
diff --git a/examples/sites/demos/mobile/app/progress/dynamic-progress.vue b/examples/sites/demos/mobile/app/progress/dynamic-progress.vue
index 3a8e8c19f..f310d3704 100644
--- a/examples/sites/demos/mobile/app/progress/dynamic-progress.vue
+++ b/examples/sites/demos/mobile/app/progress/dynamic-progress.vue
@@ -12,14 +12,14 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 // import { setInterval, clearInterval } from 'timers'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/progress/format-text.vue b/examples/sites/demos/mobile/app/progress/format-text.vue
index c301e2f06..055b817a7 100644
--- a/examples/sites/demos/mobile/app/progress/format-text.vue
+++ b/examples/sites/demos/mobile/app/progress/format-text.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
 
   data() {
diff --git a/examples/sites/demos/mobile/app/progress/format.vue b/examples/sites/demos/mobile/app/progress/format.vue
index 906a116dd..85d9c9694 100644
--- a/examples/sites/demos/mobile/app/progress/format.vue
+++ b/examples/sites/demos/mobile/app/progress/format.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/progress/progress-status.vue b/examples/sites/demos/mobile/app/progress/progress-status.vue
index 87bbaf829..a01b8c700 100644
--- a/examples/sites/demos/mobile/app/progress/progress-status.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-status.vue
@@ -27,11 +27,11 @@
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
 
   data() {
diff --git a/examples/sites/demos/mobile/app/progress/progress-type-circle.vue b/examples/sites/demos/mobile/app/progress/progress-type-circle.vue
index b49c3e22f..50c3c8571 100644
--- a/examples/sites/demos/mobile/app/progress/progress-type-circle.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-type-circle.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/progress-type-dashboard.vue b/examples/sites/demos/mobile/app/progress/progress-type-dashboard.vue
index 4607ad85c..4066ecb6f 100644
--- a/examples/sites/demos/mobile/app/progress/progress-type-dashboard.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-type-dashboard.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/progress/progress-type.vue b/examples/sites/demos/mobile/app/progress/progress-type.vue
index cf6f8d14e..48d0b8873 100644
--- a/examples/sites/demos/mobile/app/progress/progress-type.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-type.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/progress-width.vue b/examples/sites/demos/mobile/app/progress/progress-width.vue
index 98056733c..beef9d0a3 100644
--- a/examples/sites/demos/mobile/app/progress/progress-width.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-width.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   },
 
   data() {
diff --git a/examples/sites/demos/mobile/app/progress/text-inside-or-no-text.vue b/examples/sites/demos/mobile/app/progress/text-inside-or-no-text.vue
index 4d5054c15..eb53fc6d9 100644
--- a/examples/sites/demos/mobile/app/progress/text-inside-or-no-text.vue
+++ b/examples/sites/demos/mobile/app/progress/text-inside-or-no-text.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
 
   data() {
diff --git a/examples/sites/demos/mobile/app/progress/width.vue b/examples/sites/demos/mobile/app/progress/width.vue
index 42bf1aa5e..c6df60c5c 100644
--- a/examples/sites/demos/mobile/app/progress/width.vue
+++ b/examples/sites/demos/mobile/app/progress/width.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress
+    TinyProgress
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/pull-refresh/animation-duration.vue b/examples/sites/demos/mobile/app/pull-refresh/animation-duration.vue
index 38c206552..e7fd2be49 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/animation-duration.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/animation-duration.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/base.vue b/examples/sites/demos/mobile/app/pull-refresh/base.vue
index 71d4a1366..db8572480 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/base.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/base.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-down.vue b/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-down.vue
index 319bb8054..a636466a5 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-down.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-down.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-up.vue b/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-up.vue
index 1d717ba81..9e5655e3e 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-up.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-up.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/event.vue b/examples/sites/demos/mobile/app/pull-refresh/event.vue
index 71d4a1366..db8572480 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/event.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/event.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/has-more.vue b/examples/sites/demos/mobile/app/pull-refresh/has-more.vue
index 71d4a1366..db8572480 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/has-more.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/has-more.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/loosing-text.vue b/examples/sites/demos/mobile/app/pull-refresh/loosing-text.vue
index 85ea9e132..c3f9393fd 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/loosing-text.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/loosing-text.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/pull-refresh-slot.vue b/examples/sites/demos/mobile/app/pull-refresh/pull-refresh-slot.vue
index 0a5d384d1..9eca6204d 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/pull-refresh-slot.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/pull-refresh-slot.vue
@@ -25,11 +25,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/pull-up-distance.vue b/examples/sites/demos/mobile/app/pull-refresh/pull-up-distance.vue
index 5ed54b357..7b40030cf 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/pull-up-distance.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/pull-up-distance.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/pull-refresh/pulling-text.vue b/examples/sites/demos/mobile/app/pull-refresh/pulling-text.vue
index 3d43fb491..2468f2c1a 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/pulling-text.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/pulling-text.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import { PullRefresh } from '@opentiny/vue'
+import { TinyPullRefresh } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPullRefresh: PullRefresh
+    TinyPullRefresh
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/radio/base.vue b/examples/sites/demos/mobile/app/radio/base.vue
index 10154eea4..f6899fbc1 100644
--- a/examples/sites/demos/mobile/app/radio/base.vue
+++ b/examples/sites/demos/mobile/app/radio/base.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/radio/disabled.vue b/examples/sites/demos/mobile/app/radio/disabled.vue
index 5394637c0..8d58ad3f8 100644
--- a/examples/sites/demos/mobile/app/radio/disabled.vue
+++ b/examples/sites/demos/mobile/app/radio/disabled.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/radio/event.vue b/examples/sites/demos/mobile/app/radio/event.vue
index 989a8d46e..9ebf5ab0f 100644
--- a/examples/sites/demos/mobile/app/radio/event.vue
+++ b/examples/sites/demos/mobile/app/radio/event.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/radio/label.vue b/examples/sites/demos/mobile/app/radio/label.vue
index 21446b5fd..5134bc29c 100644
--- a/examples/sites/demos/mobile/app/radio/label.vue
+++ b/examples/sites/demos/mobile/app/radio/label.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/search/base.vue b/examples/sites/demos/mobile/app/search/base.vue
index e8dc1f182..0760cd7b3 100644
--- a/examples/sites/demos/mobile/app/search/base.vue
+++ b/examples/sites/demos/mobile/app/search/base.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/search/button-text.vue b/examples/sites/demos/mobile/app/search/button-text.vue
index bd4f14619..86bc01585 100644
--- a/examples/sites/demos/mobile/app/search/button-text.vue
+++ b/examples/sites/demos/mobile/app/search/button-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/search/clear.vue b/examples/sites/demos/mobile/app/search/clear.vue
index e3c32fb6d..8e882cb81 100644
--- a/examples/sites/demos/mobile/app/search/clear.vue
+++ b/examples/sites/demos/mobile/app/search/clear.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/search/default-value.vue b/examples/sites/demos/mobile/app/search/default-value.vue
index a4ee7db0f..3e8dd3309 100644
--- a/examples/sites/demos/mobile/app/search/default-value.vue
+++ b/examples/sites/demos/mobile/app/search/default-value.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/search/events.vue b/examples/sites/demos/mobile/app/search/events.vue
index 9d0f49c71..c5398711b 100644
--- a/examples/sites/demos/mobile/app/search/events.vue
+++ b/examples/sites/demos/mobile/app/search/events.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/about-step.vue b/examples/sites/demos/mobile/app/slider/about-step.vue
index 218d56c1a..9949f4beb 100644
--- a/examples/sites/demos/mobile/app/slider/about-step.vue
+++ b/examples/sites/demos/mobile/app/slider/about-step.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/dynamic-disable.vue b/examples/sites/demos/mobile/app/slider/dynamic-disable.vue
index ee46d015e..a4d64420b 100644
--- a/examples/sites/demos/mobile/app/slider/dynamic-disable.vue
+++ b/examples/sites/demos/mobile/app/slider/dynamic-disable.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/format-tooltip.vue b/examples/sites/demos/mobile/app/slider/format-tooltip.vue
index e7f142219..dececf775 100644
--- a/examples/sites/demos/mobile/app/slider/format-tooltip.vue
+++ b/examples/sites/demos/mobile/app/slider/format-tooltip.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/max-min.vue b/examples/sites/demos/mobile/app/slider/max-min.vue
index 0f1de6e3a..f5ccae1b3 100644
--- a/examples/sites/demos/mobile/app/slider/max-min.vue
+++ b/examples/sites/demos/mobile/app/slider/max-min.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/range-select.vue b/examples/sites/demos/mobile/app/slider/range-select.vue
index 192591d81..305b3cdcb 100644
--- a/examples/sites/demos/mobile/app/slider/range-select.vue
+++ b/examples/sites/demos/mobile/app/slider/range-select.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/shortcut-operation.vue b/examples/sites/demos/mobile/app/slider/shortcut-operation.vue
index c4ee2166d..d3a3f72ff 100644
--- a/examples/sites/demos/mobile/app/slider/shortcut-operation.vue
+++ b/examples/sites/demos/mobile/app/slider/shortcut-operation.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/show-input.vue b/examples/sites/demos/mobile/app/slider/show-input.vue
index 08e0b9595..75f0c50d7 100644
--- a/examples/sites/demos/mobile/app/slider/show-input.vue
+++ b/examples/sites/demos/mobile/app/slider/show-input.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/show-tip.vue b/examples/sites/demos/mobile/app/slider/show-tip.vue
index e8825d6ae..fb8f186b4 100644
--- a/examples/sites/demos/mobile/app/slider/show-tip.vue
+++ b/examples/sites/demos/mobile/app/slider/show-tip.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/slider-event-change.vue b/examples/sites/demos/mobile/app/slider/slider-event-change.vue
index 5e2fc5c31..14aea1fce 100644
--- a/examples/sites/demos/mobile/app/slider/slider-event-change.vue
+++ b/examples/sites/demos/mobile/app/slider/slider-event-change.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/slider-event-start.vue b/examples/sites/demos/mobile/app/slider/slider-event-start.vue
index c3acecf78..0fb647119 100644
--- a/examples/sites/demos/mobile/app/slider/slider-event-start.vue
+++ b/examples/sites/demos/mobile/app/slider/slider-event-start.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/slider-event-stop.vue b/examples/sites/demos/mobile/app/slider/slider-event-stop.vue
index 34063183a..f5118c2e8 100644
--- a/examples/sites/demos/mobile/app/slider/slider-event-stop.vue
+++ b/examples/sites/demos/mobile/app/slider/slider-event-stop.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/slider-slot.vue b/examples/sites/demos/mobile/app/slider/slider-slot.vue
index dfc6f5687..1f030087f 100644
--- a/examples/sites/demos/mobile/app/slider/slider-slot.vue
+++ b/examples/sites/demos/mobile/app/slider/slider-slot.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/slider/vertical-mode.vue b/examples/sites/demos/mobile/app/slider/vertical-mode.vue
index a35d14bbd..223bd802a 100644
--- a/examples/sites/demos/mobile/app/slider/vertical-mode.vue
+++ b/examples/sites/demos/mobile/app/slider/vertical-mode.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/switch/base.vue b/examples/sites/demos/mobile/app/switch/base.vue
index a0cf0b148..08b7baefa 100644
--- a/examples/sites/demos/mobile/app/switch/base.vue
+++ b/examples/sites/demos/mobile/app/switch/base.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/switch/disabled.vue b/examples/sites/demos/mobile/app/switch/disabled.vue
index 60ecf31e5..96c55357c 100644
--- a/examples/sites/demos/mobile/app/switch/disabled.vue
+++ b/examples/sites/demos/mobile/app/switch/disabled.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/switch/event.vue b/examples/sites/demos/mobile/app/switch/event.vue
index e34ebb7bc..c834e6843 100644
--- a/examples/sites/demos/mobile/app/switch/event.vue
+++ b/examples/sites/demos/mobile/app/switch/event.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/switch/loading.vue b/examples/sites/demos/mobile/app/switch/loading.vue
index 834209efd..8cb1a2587 100644
--- a/examples/sites/demos/mobile/app/switch/loading.vue
+++ b/examples/sites/demos/mobile/app/switch/loading.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/switch/mini.vue b/examples/sites/demos/mobile/app/switch/mini.vue
index 92030ec73..1f5fbdf02 100644
--- a/examples/sites/demos/mobile/app/switch/mini.vue
+++ b/examples/sites/demos/mobile/app/switch/mini.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/tabbar/active-inactive-color.vue b/examples/sites/demos/mobile/app/tabbar/active-inactive-color.vue
index 384487441..9512731bd 100644
--- a/examples/sites/demos/mobile/app/tabbar/active-inactive-color.vue
+++ b/examples/sites/demos/mobile/app/tabbar/active-inactive-color.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script lang="jsx">
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabbar/badge.vue b/examples/sites/demos/mobile/app/tabbar/badge.vue
index 7a72093ac..9d45ce7b5 100644
--- a/examples/sites/demos/mobile/app/tabbar/badge.vue
+++ b/examples/sites/demos/mobile/app/tabbar/badge.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script lang="jsx">
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabbar/base.vue b/examples/sites/demos/mobile/app/tabbar/base.vue
index 176b296f1..70c7bb90c 100644
--- a/examples/sites/demos/mobile/app/tabbar/base.vue
+++ b/examples/sites/demos/mobile/app/tabbar/base.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script lang="jsx">
-import { Tabbar, TabbarItem, Button } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem, TinyButton } from '@opentiny/vue'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting, iconAdministrator } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem,
-    TinyButton: Button
+    TinyTabbar,
+    TinyTabbarItem,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabbar/border.vue b/examples/sites/demos/mobile/app/tabbar/border.vue
index 63ec61e8a..cce933488 100644
--- a/examples/sites/demos/mobile/app/tabbar/border.vue
+++ b/examples/sites/demos/mobile/app/tabbar/border.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script lang="jsx">
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabbar/event-change.vue b/examples/sites/demos/mobile/app/tabbar/event-change.vue
index 145bf765f..c9812c70c 100644
--- a/examples/sites/demos/mobile/app/tabbar/event-change.vue
+++ b/examples/sites/demos/mobile/app/tabbar/event-change.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script lang="jsx">
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabbar/onlytext.vue b/examples/sites/demos/mobile/app/tabbar/onlytext.vue
index 7d68adaeb..0fbe1f5a4 100644
--- a/examples/sites/demos/mobile/app/tabbar/onlytext.vue
+++ b/examples/sites/demos/mobile/app/tabbar/onlytext.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script lang="jsx">
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabbar/route.vue b/examples/sites/demos/mobile/app/tabbar/route.vue
index f8e5b3ca4..bf90e3a7b 100644
--- a/examples/sites/demos/mobile/app/tabbar/route.vue
+++ b/examples/sites/demos/mobile/app/tabbar/route.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script lang="jsx">
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabbar/slot-icon.vue b/examples/sites/demos/mobile/app/tabbar/slot-icon.vue
index f41d76cc4..b1b8a3331 100644
--- a/examples/sites/demos/mobile/app/tabbar/slot-icon.vue
+++ b/examples/sites/demos/mobile/app/tabbar/slot-icon.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="jsx">
-import { Tabbar, TabbarItem } from '@opentiny/vue'
+import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabbar: Tabbar,
-    TinyTabbarItem: TabbarItem
+    TinyTabbar,
+    TinyTabbarItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/table/base.vue b/examples/sites/demos/mobile/app/table/base.vue
index 05724e3f5..a436d3155 100644
--- a/examples/sites/demos/mobile/app/table/base.vue
+++ b/examples/sites/demos/mobile/app/table/base.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Table } from '@opentiny/vue'
+import { TinyTable } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTable: Table
+    TinyTable
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabs/active-color.vue b/examples/sites/demos/mobile/app/tabs/active-color.vue
index f3e59afcb..6f437851c 100644
--- a/examples/sites/demos/mobile/app/tabs/active-color.vue
+++ b/examples/sites/demos/mobile/app/tabs/active-color.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabs/add-delete-tab.vue b/examples/sites/demos/mobile/app/tabs/add-delete-tab.vue
index 482db0811..3f1b41e6c 100644
--- a/examples/sites/demos/mobile/app/tabs/add-delete-tab.vue
+++ b/examples/sites/demos/mobile/app/tabs/add-delete-tab.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabs/basic-usage.vue b/examples/sites/demos/mobile/app/tabs/basic-usage.vue
index d6080b028..7250dff94 100644
--- a/examples/sites/demos/mobile/app/tabs/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/tabs/basic-usage.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabs/before-leave.vue b/examples/sites/demos/mobile/app/tabs/before-leave.vue
index 917c7339c..f17772cea 100644
--- a/examples/sites/demos/mobile/app/tabs/before-leave.vue
+++ b/examples/sites/demos/mobile/app/tabs/before-leave.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem, Toast } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyToast } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     beforeLeave(activeName, oldActiveName) {
-      Toast.service({
+      TinyToast.service({
         text: '页签切换被阻止'
       })
       return false
diff --git a/examples/sites/demos/mobile/app/tabs/expand.vue b/examples/sites/demos/mobile/app/tabs/expand.vue
index 0c902f0c6..dce254ee9 100644
--- a/examples/sites/demos/mobile/app/tabs/expand.vue
+++ b/examples/sites/demos/mobile/app/tabs/expand.vue
@@ -7,16 +7,16 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
-      Tabs: [
+      TinyTabs: [
         {
           title: '标签 1',
           name: '1',
diff --git a/examples/sites/demos/mobile/app/tabs/size.vue b/examples/sites/demos/mobile/app/tabs/size.vue
index 1fc3fd488..5df2cc782 100644
--- a/examples/sites/demos/mobile/app/tabs/size.vue
+++ b/examples/sites/demos/mobile/app/tabs/size.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabs/stretch.vue b/examples/sites/demos/mobile/app/tabs/stretch.vue
index bbc5d2a78..be24a0763 100644
--- a/examples/sites/demos/mobile/app/tabs/stretch.vue
+++ b/examples/sites/demos/mobile/app/tabs/stretch.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabs/swipe.vue b/examples/sites/demos/mobile/app/tabs/swipe.vue
index f6d68605a..d992e392c 100644
--- a/examples/sites/demos/mobile/app/tabs/swipe.vue
+++ b/examples/sites/demos/mobile/app/tabs/swipe.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/tabs/tabs-events.vue b/examples/sites/demos/mobile/app/tabs/tabs-events.vue
index 05a0b67e0..6cd2c0ccd 100644
--- a/examples/sites/demos/mobile/app/tabs/tabs-events.vue
+++ b/examples/sites/demos/mobile/app/tabs/tabs-events.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem, Toast } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyToast } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
@@ -51,7 +51,7 @@ export default {
   methods: {
     click(tabItem, event) {
       event.stopPropagation()
-      Toast.service({
+      TinyToast.service({
         text: '点击的页签 name 是 ' + tabItem.name
       })
     }
diff --git a/examples/sites/demos/mobile/app/tag/basic-usage.vue b/examples/sites/demos/mobile/app/tag/basic-usage.vue
index a07ed4111..00dcc7565 100644
--- a/examples/sites/demos/mobile/app/tag/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/tag/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/tag/different-color.vue b/examples/sites/demos/mobile/app/tag/different-color.vue
index fdc080229..82fb6b772 100644
--- a/examples/sites/demos/mobile/app/tag/different-color.vue
+++ b/examples/sites/demos/mobile/app/tag/different-color.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/tag/max-width.vue b/examples/sites/demos/mobile/app/tag/max-width.vue
index 5906ebdba..7409ea197 100644
--- a/examples/sites/demos/mobile/app/tag/max-width.vue
+++ b/examples/sites/demos/mobile/app/tag/max-width.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/tag/mini.vue b/examples/sites/demos/mobile/app/tag/mini.vue
index f03d2e2cd..8acb2e972 100644
--- a/examples/sites/demos/mobile/app/tag/mini.vue
+++ b/examples/sites/demos/mobile/app/tag/mini.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/timeline/different-data.vue b/examples/sites/demos/mobile/app/timeline/different-data.vue
index a64dfd07b..069ce270a 100644
--- a/examples/sites/demos/mobile/app/timeline/different-data.vue
+++ b/examples/sites/demos/mobile/app/timeline/different-data.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/timeline/mobileTimeLine.vue b/examples/sites/demos/mobile/app/timeline/mobileTimeLine.vue
index d493d53a7..15deaac51 100644
--- a/examples/sites/demos/mobile/app/timeline/mobileTimeLine.vue
+++ b/examples/sites/demos/mobile/app/timeline/mobileTimeLine.vue
@@ -37,11 +37,11 @@
 </template>
 
 <script lang="jsx">
-import { TimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
@@ -66,7 +66,7 @@ export default {
     timeClick1(index, node) {
       this.timeActive1 = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     },
     timeClick2(index) {
       this.timeActive2 = index
diff --git a/examples/sites/demos/mobile/app/timeline/slot.vue b/examples/sites/demos/mobile/app/timeline/slot.vue
index 627a8195a..4172cfb3b 100644
--- a/examples/sites/demos/mobile/app/timeline/slot.vue
+++ b/examples/sites/demos/mobile/app/timeline/slot.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script lang="jsx">
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/timeline/space.vue b/examples/sites/demos/mobile/app/timeline/space.vue
index 0223c17f1..17057dc89 100644
--- a/examples/sites/demos/mobile/app/timeline/space.vue
+++ b/examples/sites/demos/mobile/app/timeline/space.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/timeline/steps.vue b/examples/sites/demos/mobile/app/timeline/steps.vue
index 522017fc5..67d5c7c66 100644
--- a/examples/sites/demos/mobile/app/timeline/steps.vue
+++ b/examples/sites/demos/mobile/app/timeline/steps.vue
@@ -37,11 +37,11 @@
 </template>
 
 <script>
-import { TimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
@@ -66,7 +66,7 @@ export default {
     timeClick1(index, node) {
       this.timeActive1 = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
     },
     timeClick2(index) {
       this.timeActive2 = index
diff --git a/examples/sites/demos/mobile/app/toast/base.vue b/examples/sites/demos/mobile/app/toast/base.vue
index c17eb4eb3..143337027 100644
--- a/examples/sites/demos/mobile/app/toast/base.vue
+++ b/examples/sites/demos/mobile/app/toast/base.vue
@@ -5,16 +5,16 @@
 </template>
 
 <script lang="jsx">
-import { Toast, Button } from '@opentiny/vue'
+import { TinyToast, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyToast: Toast
+    TinyButton,
+    TinyToast
   },
   methods: {
     showTextToast() {
-      Toast.service({
+      TinyToast.service({
         text: 'Toast',
         type: 'text',
         time: 2000,
diff --git a/examples/sites/demos/mobile/app/toast/failed.vue b/examples/sites/demos/mobile/app/toast/failed.vue
index 7db548c0a..d4b498325 100644
--- a/examples/sites/demos/mobile/app/toast/failed.vue
+++ b/examples/sites/demos/mobile/app/toast/failed.vue
@@ -5,16 +5,16 @@
 </template>
 
 <script lang="jsx">
-import { Toast, Button } from '@opentiny/vue'
+import { TinyToast, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyToast: Toast
+    TinyButton,
+    TinyToast
   },
   methods: {
     showErrorToast() {
-      Toast.service({
+      TinyToast.service({
         text: 'error',
         type: 'error',
         time: 2000,
diff --git a/examples/sites/demos/mobile/app/toast/success.vue b/examples/sites/demos/mobile/app/toast/success.vue
index 6cd5d480b..80b99e7c3 100644
--- a/examples/sites/demos/mobile/app/toast/success.vue
+++ b/examples/sites/demos/mobile/app/toast/success.vue
@@ -5,16 +5,16 @@
 </template>
 
 <script lang="jsx">
-import { Toast, Button } from '@opentiny/vue'
+import { TinyToast, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyToast: Toast
+    TinyButton,
+    TinyToast
   },
   methods: {
     showCorrectToast() {
-      Toast.service({
+      TinyToast.service({
         text: 'success',
         type: 'correct',
         time: 4000,
diff --git a/examples/sites/demos/mobile/app/user-head/basic-usage.vue b/examples/sites/demos/mobile/app/user-head/basic-usage.vue
index d8924627e..845e80fd5 100644
--- a/examples/sites/demos/mobile/app/user-head/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/user-head/basic-usage.vue
@@ -26,11 +26,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/user-head/color.vue b/examples/sites/demos/mobile/app/user-head/color.vue
index 175c42af1..f2fd31456 100644
--- a/examples/sites/demos/mobile/app/user-head/color.vue
+++ b/examples/sites/demos/mobile/app/user-head/color.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/custom-background-color.vue b/examples/sites/demos/mobile/app/user-head/custom-background-color.vue
index 318bfdd04..6b9c23f79 100644
--- a/examples/sites/demos/mobile/app/user-head/custom-background-color.vue
+++ b/examples/sites/demos/mobile/app/user-head/custom-background-color.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/custom-user-head-content.vue b/examples/sites/demos/mobile/app/user-head/custom-user-head-content.vue
index 9558d84df..1838ee58e 100644
--- a/examples/sites/demos/mobile/app/user-head/custom-user-head-content.vue
+++ b/examples/sites/demos/mobile/app/user-head/custom-user-head-content.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyUserHead: UserHead,
+    TinyUserHead,
     IconMail: iconMail()
   }
 }
diff --git a/examples/sites/demos/mobile/app/user-head/icon-user-head.vue b/examples/sites/demos/mobile/app/user-head/icon-user-head.vue
index d5922b3a0..7c4e53d19 100644
--- a/examples/sites/demos/mobile/app/user-head/icon-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/icon-user-head.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 import { iconSmile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/user-head/image-user-head.vue b/examples/sites/demos/mobile/app/user-head/image-user-head.vue
index 60c4a96cd..cba33b576 100644
--- a/examples/sites/demos/mobile/app/user-head/image-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/image-user-head.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/user-head/label-user-head.vue b/examples/sites/demos/mobile/app/user-head/label-user-head.vue
index c4f3bade4..d435ac77c 100644
--- a/examples/sites/demos/mobile/app/user-head/label-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/label-user-head.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/mobile/app/user-head/message-count-limit.vue b/examples/sites/demos/mobile/app/user-head/message-count-limit.vue
index a0c0e0028..f13c0f1b8 100644
--- a/examples/sites/demos/mobile/app/user-head/message-count-limit.vue
+++ b/examples/sites/demos/mobile/app/user-head/message-count-limit.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/message-count-total.vue b/examples/sites/demos/mobile/app/user-head/message-count-total.vue
index 0aacb967f..8e9334aab 100644
--- a/examples/sites/demos/mobile/app/user-head/message-count-total.vue
+++ b/examples/sites/demos/mobile/app/user-head/message-count-total.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/message-count-type.vue b/examples/sites/demos/mobile/app/user-head/message-count-type.vue
index 594c843c2..cb80a86a0 100644
--- a/examples/sites/demos/mobile/app/user-head/message-count-type.vue
+++ b/examples/sites/demos/mobile/app/user-head/message-count-type.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/min-user-head.vue b/examples/sites/demos/mobile/app/user-head/min-user-head.vue
index 9602fe667..6d5f17bf4 100644
--- a/examples/sites/demos/mobile/app/user-head/min-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/min-user-head.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/render-user-head-in-grid.vue b/examples/sites/demos/mobile/app/user-head/render-user-head-in-grid.vue
index 5e9d038e5..d78b2a12c 100644
--- a/examples/sites/demos/mobile/app/user-head/render-user-head-in-grid.vue
+++ b/examples/sites/demos/mobile/app/user-head/render-user-head-in-grid.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, UserHead } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const mockData = [
@@ -90,6 +90,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       tableData: mockData
     }
@@ -107,7 +108,7 @@ export default {
       )
     },
     renderUserHead(h, { row }) {
-      const UserHeadImg = UserHead
+      const UserHeadImg = TinyUserHead
 
       return (
         <span>
diff --git a/examples/sites/demos/mobile/app/user-head/round-user-head.vue b/examples/sites/demos/mobile/app/user-head/round-user-head.vue
index 0b2795e59..e6f95d444 100644
--- a/examples/sites/demos/mobile/app/user-head/round-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/round-user-head.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/action-menu/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/action-menu/basic-usage-composition-api.vue
index eaa27836d..f2a7db2ce 100644
--- a/examples/sites/demos/pc/app/action-menu/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/action-menu/basic-usage.vue b/examples/sites/demos/pc/app/action-menu/basic-usage.vue
index be3952fa1..3345c87b2 100644
--- a/examples/sites/demos/pc/app/action-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/action-menu/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/action-menu/card-mode-composition-api.vue b/examples/sites/demos/pc/app/action-menu/card-mode-composition-api.vue
index 881ee9d6e..2936ac4c6 100644
--- a/examples/sites/demos/pc/app/action-menu/card-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/card-mode-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/action-menu/card-mode.vue b/examples/sites/demos/pc/app/action-menu/card-mode.vue
index 7f6149075..1df2509bb 100644
--- a/examples/sites/demos/pc/app/action-menu/card-mode.vue
+++ b/examples/sites/demos/pc/app/action-menu/card-mode.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/action-menu/disabled-composition-api.vue b/examples/sites/demos/pc/app/action-menu/disabled-composition-api.vue
index 59fe335e8..9c083dbfb 100644
--- a/examples/sites/demos/pc/app/action-menu/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/disabled-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/action-menu/disabled.vue b/examples/sites/demos/pc/app/action-menu/disabled.vue
index 1f79b19b3..d512cf167 100644
--- a/examples/sites/demos/pc/app/action-menu/disabled.vue
+++ b/examples/sites/demos/pc/app/action-menu/disabled.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 import { iconWebPlus, iconSuccessful, iconCloseSquare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/action-menu/events-composition-api.vue b/examples/sites/demos/pc/app/action-menu/events-composition-api.vue
index 57210d87e..1144733bc 100644
--- a/examples/sites/demos/pc/app/action-menu/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/events-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu, Notify } from '@opentiny/vue'
+import { TinyActionMenu, TinyNotify } from '@opentiny/vue'
 
 const options = ref([
   {
@@ -33,7 +33,7 @@ const options = ref([
 ])
 
 const itemClick = (data) => {
-  Notify({
+  TinyNotify({
     message: JSON.stringify(data.itemData),
     position: 'top-right',
     duration: 2000
@@ -41,14 +41,14 @@ const itemClick = (data) => {
 }
 
 const visibleChange = (status) => {
-  Notify({
+  TinyNotify({
     message: `触发 visible-change 事件,下拉状态为 ${status}`,
     position: 'top-right',
     duration: 2000
   })
 }
 const moreClick = () => {
-  Notify({
+  TinyNotify({
     message: '触发 moreClick 事件',
     position: 'top-right',
     duration: 2000
diff --git a/examples/sites/demos/pc/app/action-menu/events.vue b/examples/sites/demos/pc/app/action-menu/events.vue
index f61e36e95..22125b6e0 100644
--- a/examples/sites/demos/pc/app/action-menu/events.vue
+++ b/examples/sites/demos/pc/app/action-menu/events.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { ActionMenu, Notify } from '@opentiny/vue'
+import { TinyActionMenu, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
@@ -41,21 +41,21 @@ export default {
   methods: {
     itemClick(data) {
       console.log(data)
-      Notify({
+      TinyNotify({
         message: JSON.stringify(data.itemData),
         position: 'top-right',
         duration: 2000
       })
     },
     visibleChange(status) {
-      Notify({
+      TinyNotify({
         message: `触发 visible-change 事件,下拉状态为 ${status}`,
         position: 'top-right',
         duration: 2000
       })
     },
     moreClick() {
-      Notify({
+      TinyNotify({
         message: '触发 moreClick 事件',
         position: 'top-right',
         duration: 2000
diff --git a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
index 8c92063d0..d89b08a9d 100644
--- a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 import { iconWebPlus, iconSuccessful, iconShutdown, iconEllipsis } from '@opentiny/vue-icon'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/action-menu/icon.vue b/examples/sites/demos/pc/app/action-menu/icon.vue
index 2a8d323ad..12425818f 100644
--- a/examples/sites/demos/pc/app/action-menu/icon.vue
+++ b/examples/sites/demos/pc/app/action-menu/icon.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 import { iconWebPlus, iconSuccessful, iconShutdown, iconEllipsis } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/action-menu/max-show-num-composition-api.vue b/examples/sites/demos/pc/app/action-menu/max-show-num-composition-api.vue
index 8d8b1adc9..d150dd966 100644
--- a/examples/sites/demos/pc/app/action-menu/max-show-num-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/max-show-num-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/action-menu/max-show-num.vue b/examples/sites/demos/pc/app/action-menu/max-show-num.vue
index 970faf72d..89e4f3f04 100644
--- a/examples/sites/demos/pc/app/action-menu/max-show-num.vue
+++ b/examples/sites/demos/pc/app/action-menu/max-show-num.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/action-menu/more-text-composition-api.vue b/examples/sites/demos/pc/app/action-menu/more-text-composition-api.vue
index d08e9b550..fbf2e3f8d 100644
--- a/examples/sites/demos/pc/app/action-menu/more-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/more-text-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/action-menu/more-text.vue b/examples/sites/demos/pc/app/action-menu/more-text.vue
index 30219e931..bcea87c13 100644
--- a/examples/sites/demos/pc/app/action-menu/more-text.vue
+++ b/examples/sites/demos/pc/app/action-menu/more-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/action-menu/popper-class-composition-api.vue b/examples/sites/demos/pc/app/action-menu/popper-class-composition-api.vue
index cd0654244..21d638886 100644
--- a/examples/sites/demos/pc/app/action-menu/popper-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/popper-class-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/action-menu/popper-class.vue b/examples/sites/demos/pc/app/action-menu/popper-class.vue
index 3c2dd0409..b3f460690 100644
--- a/examples/sites/demos/pc/app/action-menu/popper-class.vue
+++ b/examples/sites/demos/pc/app/action-menu/popper-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue b/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue
index 08cdb54c9..dfff2912b 100644
--- a/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/slot-item-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 import { iconSmile } from '@opentiny/vue-icon'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/action-menu/slot-item.vue b/examples/sites/demos/pc/app/action-menu/slot-item.vue
index cdde94029..73c8c36a1 100644
--- a/examples/sites/demos/pc/app/action-menu/slot-item.vue
+++ b/examples/sites/demos/pc/app/action-menu/slot-item.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 import { iconSmile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu,
+    TinyActionMenu,
     IconSmile: iconSmile()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/action-menu/spacing-composition-api.vue b/examples/sites/demos/pc/app/action-menu/spacing-composition-api.vue
index 8b7c2020d..281139650 100644
--- a/examples/sites/demos/pc/app/action-menu/spacing-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/spacing-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/action-menu/spacing.vue b/examples/sites/demos/pc/app/action-menu/spacing.vue
index 955a425a5..b1a612734 100644
--- a/examples/sites/demos/pc/app/action-menu/spacing.vue
+++ b/examples/sites/demos/pc/app/action-menu/spacing.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/action-menu/text-field-composition-api.vue b/examples/sites/demos/pc/app/action-menu/text-field-composition-api.vue
index 8ee05fef4..f36e560ff 100644
--- a/examples/sites/demos/pc/app/action-menu/text-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/text-field-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/action-menu/text-field.vue b/examples/sites/demos/pc/app/action-menu/text-field.vue
index 258b4daf3..791fc17d8 100644
--- a/examples/sites/demos/pc/app/action-menu/text-field.vue
+++ b/examples/sites/demos/pc/app/action-menu/text-field.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ActionMenu } from '@opentiny/vue'
+import { TinyActionMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyActionMenu: ActionMenu
+    TinyActionMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/alert/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/alert/basic-usage-composition-api.vue
index 035a9f569..521321583 100644
--- a/examples/sites/demos/pc/app/alert/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/basic-usage-composition-api.vue
@@ -11,5 +11,5 @@
 </template>
 
 <script setup>
-import { Alert as TinyAlert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/alert/basic-usage.vue b/examples/sites/demos/pc/app/alert/basic-usage.vue
index 4f553868a..004b4a2fd 100644
--- a/examples/sites/demos/pc/app/alert/basic-usage.vue
+++ b/examples/sites/demos/pc/app/alert/basic-usage.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/alert/center-composition-api.vue b/examples/sites/demos/pc/app/alert/center-composition-api.vue
index 45460e454..0b43f58fe 100644
--- a/examples/sites/demos/pc/app/alert/center-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/center-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Alert as TinyAlert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/alert/center.vue b/examples/sites/demos/pc/app/alert/center.vue
index 2feb5dc64..9ab20810c 100644
--- a/examples/sites/demos/pc/app/alert/center.vue
+++ b/examples/sites/demos/pc/app/alert/center.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/alert/custom-class-composition-api.vue b/examples/sites/demos/pc/app/alert/custom-class-composition-api.vue
index 555f7e354..f4689001a 100644
--- a/examples/sites/demos/pc/app/alert/custom-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/custom-class-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { Alert as TinyAlert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/alert/custom-class.vue b/examples/sites/demos/pc/app/alert/custom-class.vue
index 18d408e2f..3ba1d2584 100644
--- a/examples/sites/demos/pc/app/alert/custom-class.vue
+++ b/examples/sites/demos/pc/app/alert/custom-class.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/alert/custom-close-composition-api.vue b/examples/sites/demos/pc/app/alert/custom-close-composition-api.vue
index 128809531..1115f7c1b 100644
--- a/examples/sites/demos/pc/app/alert/custom-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/custom-close-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Alert as TinyAlert, Switch as TinySwitch, Notify } from '@opentiny/vue'
+import { TinyAlert, TinySwitch, TinyNotify } from '@opentiny/vue'
 import { iconCloseCircle } from '@opentiny/vue-icon'
 
 const show = ref(true)
@@ -22,7 +22,7 @@ const show = ref(true)
 const TinyIconCloseCircle = iconCloseCircle()
 
 const close = () => {
-  Notify({
+  TinyNotify({
     type: 'success',
     message: '触发关闭事件',
     position: 'top-right',
diff --git a/examples/sites/demos/pc/app/alert/custom-close.vue b/examples/sites/demos/pc/app/alert/custom-close.vue
index 0151f789a..1fb03f1fc 100644
--- a/examples/sites/demos/pc/app/alert/custom-close.vue
+++ b/examples/sites/demos/pc/app/alert/custom-close.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Alert, Notify, Switch } from '@opentiny/vue'
+import { TinyAlert, TinyNotify, TinySwitch } from '@opentiny/vue'
 import { iconCloseCircle } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinySwitch: Switch,
+    TinyAlert,
+    TinySwitch,
     TinyIconCloseCircle: iconCloseCircle()
   },
   data() {
@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     close() {
-      Notify({
+      TinyNotify({
         type: 'success',
         message: '触发关闭事件',
         position: 'top-right',
diff --git a/examples/sites/demos/pc/app/alert/icon-composition-api.vue b/examples/sites/demos/pc/app/alert/icon-composition-api.vue
index e472bbaaf..4a017e63c 100644
--- a/examples/sites/demos/pc/app/alert/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/icon-composition-api.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { Alert as TinyAlert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 import { iconBoat, iconWarningTriangle } from '@opentiny/vue-icon'
 
 const TinyIconBoat = iconBoat()
diff --git a/examples/sites/demos/pc/app/alert/icon.vue b/examples/sites/demos/pc/app/alert/icon.vue
index 39143937a..193241df6 100644
--- a/examples/sites/demos/pc/app/alert/icon.vue
+++ b/examples/sites/demos/pc/app/alert/icon.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 import { iconBoat, iconWarningTriangle } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/alert/show-icon-composition-api.vue b/examples/sites/demos/pc/app/alert/show-icon-composition-api.vue
index 521b706e7..3b934706b 100644
--- a/examples/sites/demos/pc/app/alert/show-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/show-icon-composition-api.vue
@@ -6,5 +6,5 @@
 </template>
 
 <script setup>
-import { Alert as TinyAlert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/alert/show-icon.vue b/examples/sites/demos/pc/app/alert/show-icon.vue
index e86f0eed3..6bc3c8a63 100644
--- a/examples/sites/demos/pc/app/alert/show-icon.vue
+++ b/examples/sites/demos/pc/app/alert/show-icon.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/alert/size-composition-api.vue b/examples/sites/demos/pc/app/alert/size-composition-api.vue
index 2419abc9f..d3a6341bb 100644
--- a/examples/sites/demos/pc/app/alert/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/size-composition-api.vue
@@ -6,5 +6,5 @@
 </template>
 
 <script setup>
-import { Alert as TinyAlert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/alert/size.vue b/examples/sites/demos/pc/app/alert/size.vue
index c9bd65488..6947e5a2e 100644
--- a/examples/sites/demos/pc/app/alert/size.vue
+++ b/examples/sites/demos/pc/app/alert/size.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/alert/slot-default-composition-api.vue b/examples/sites/demos/pc/app/alert/slot-default-composition-api.vue
index 8f6debd04..70ef5f98a 100644
--- a/examples/sites/demos/pc/app/alert/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/slot-default-composition-api.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { Alert as TinyAlert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 </script>
 
 <style>
diff --git a/examples/sites/demos/pc/app/alert/slot-default.vue b/examples/sites/demos/pc/app/alert/slot-default.vue
index 61778a7ee..e66932634 100644
--- a/examples/sites/demos/pc/app/alert/slot-default.vue
+++ b/examples/sites/demos/pc/app/alert/slot-default.vue
@@ -39,11 +39,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/alert/title-composition-api.vue b/examples/sites/demos/pc/app/alert/title-composition-api.vue
index f6530868b..785ff2af2 100644
--- a/examples/sites/demos/pc/app/alert/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/alert/title-composition-api.vue
@@ -17,5 +17,5 @@
 </template>
 
 <script setup>
-import { Alert as TinyAlert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/alert/title.vue b/examples/sites/demos/pc/app/alert/title.vue
index 1c88b846b..d0020861b 100644
--- a/examples/sites/demos/pc/app/alert/title.vue
+++ b/examples/sites/demos/pc/app/alert/title.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { Alert } from '@opentiny/vue'
+import { TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert
+    TinyAlert
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/amount/amount-disable-composition-api.vue b/examples/sites/demos/pc/app/amount/amount-disable-composition-api.vue
index 056c4fc68..79fa55e59 100644
--- a/examples/sites/demos/pc/app/amount/amount-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/amount-disable-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Amount as TinyAmount, Button as TinyButton } from '@opentiny/vue'
+import { TinyAmount, TinyButton } from '@opentiny/vue'
 
 const value = ref(88.88)
 const disabled = ref(false)
diff --git a/examples/sites/demos/pc/app/amount/amount-disable.vue b/examples/sites/demos/pc/app/amount/amount-disable.vue
index 5a5f18368..d3839484e 100644
--- a/examples/sites/demos/pc/app/amount/amount-disable.vue
+++ b/examples/sites/demos/pc/app/amount/amount-disable.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="jsx">
-import { Amount, Button } from '@opentiny/vue'
+import { TinyAmount, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount,
-    TinyButton: Button
+    TinyAmount,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/amount/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/amount/basic-usage-composition-api.vue
index e23fd81a9..06d8b369d 100644
--- a/examples/sites/demos/pc/app/amount/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Amount as TinyAmount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 const value = ref(88.88)
 </script>
diff --git a/examples/sites/demos/pc/app/amount/basic-usage.vue b/examples/sites/demos/pc/app/amount/basic-usage.vue
index a861d7444..367ad3d61 100644
--- a/examples/sites/demos/pc/app/amount/basic-usage.vue
+++ b/examples/sites/demos/pc/app/amount/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/amount/custom-currency-composition-api.vue b/examples/sites/demos/pc/app/amount/custom-currency-composition-api.vue
index 4a658426f..caf41b236 100644
--- a/examples/sites/demos/pc/app/amount/custom-currency-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/custom-currency-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Amount as TinyAmount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 const value = ref(88.88)
 </script>
diff --git a/examples/sites/demos/pc/app/amount/custom-currency.vue b/examples/sites/demos/pc/app/amount/custom-currency.vue
index 971385056..4bb883ecc 100644
--- a/examples/sites/demos/pc/app/amount/custom-currency.vue
+++ b/examples/sites/demos/pc/app/amount/custom-currency.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/amount/custom-service-composition-api.vue b/examples/sites/demos/pc/app/amount/custom-service-composition-api.vue
index 77f0963ce..07469a499 100644
--- a/examples/sites/demos/pc/app/amount/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/custom-service-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Amount as TinyAmount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 const value = ref('')
 
diff --git a/examples/sites/demos/pc/app/amount/custom-service.vue b/examples/sites/demos/pc/app/amount/custom-service.vue
index 2a01fe3c6..d40c0d866 100644
--- a/examples/sites/demos/pc/app/amount/custom-service.vue
+++ b/examples/sites/demos/pc/app/amount/custom-service.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/amount/digits-maxlen-composition-api.vue b/examples/sites/demos/pc/app/amount/digits-maxlen-composition-api.vue
index 38f1fb725..e491be303 100644
--- a/examples/sites/demos/pc/app/amount/digits-maxlen-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/digits-maxlen-composition-api.vue
@@ -4,11 +4,11 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Amount as TinyAmount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 const value = ref(888888888888.88)
 
 function handleChange(value) {
-  Modal.message({ message: `当前值为 ${value.amount}`, status: 'info' })
+  TinyModal.message({ message: `当前值为 ${value.amount}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/amount/digits-maxlen.vue b/examples/sites/demos/pc/app/amount/digits-maxlen.vue
index d66da887c..798a6c221 100644
--- a/examples/sites/demos/pc/app/amount/digits-maxlen.vue
+++ b/examples/sites/demos/pc/app/amount/digits-maxlen.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Amount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     handleChange(value) {
-      Modal.message({ message: `当前值为 ${value.amount}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${value.amount}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/amount/set-date-composition-api.vue b/examples/sites/demos/pc/app/amount/set-date-composition-api.vue
index 3045105ce..5646dd022 100644
--- a/examples/sites/demos/pc/app/amount/set-date-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/set-date-composition-api.vue
@@ -4,13 +4,13 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Amount as TinyAmount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 const value = ref(88.88)
 const date = ref(new Date())
 
 function change(val) {
-  Modal.message({
+  TinyModal.message({
     message: `改变后的值：${JSON.stringify(val)}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/amount/set-date.vue b/examples/sites/demos/pc/app/amount/set-date.vue
index f290c2ade..b143190c2 100644
--- a/examples/sites/demos/pc/app/amount/set-date.vue
+++ b/examples/sites/demos/pc/app/amount/set-date.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Amount, Modal } from '@opentiny/vue'
+import { TinyAmount, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({
+      TinyModal.message({
         message: `改变后的值：${JSON.stringify(val)}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/amount/size-composition-api.vue b/examples/sites/demos/pc/app/amount/size-composition-api.vue
index cf229f0ba..c14d9538c 100644
--- a/examples/sites/demos/pc/app/amount/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/size-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Amount as TinyAmount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 const value = ref(88.88)
 const date = ref(new Date())
diff --git a/examples/sites/demos/pc/app/amount/size.vue b/examples/sites/demos/pc/app/amount/size.vue
index cd9056e88..20aa9c483 100644
--- a/examples/sites/demos/pc/app/amount/size.vue
+++ b/examples/sites/demos/pc/app/amount/size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Amount } from '@opentiny/vue'
+import { TinyAmount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAmount: Amount
+    TinyAmount
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue
index e42653844..749766064 100644
--- a/examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Anchor as TinyAnchor, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyAnchor, TinySwitch } from '@opentiny/vue'
 
 const links = ref([
   {
diff --git a/examples/sites/demos/pc/app/anchor/basic-usage.vue b/examples/sites/demos/pc/app/anchor/basic-usage.vue
index fb9b859ee..e3762642e 100644
--- a/examples/sites/demos/pc/app/anchor/basic-usage.vue
+++ b/examples/sites/demos/pc/app/anchor/basic-usage.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Anchor, Switch } from '@opentiny/vue'
+import { TinyAnchor, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAnchor: Anchor,
-    TinySwitch: Switch
+    TinyAnchor,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/anchor/change-composition-api.vue b/examples/sites/demos/pc/app/anchor/change-composition-api.vue
index f7f944b3d..2312fe62f 100644
--- a/examples/sites/demos/pc/app/anchor/change-composition-api.vue
+++ b/examples/sites/demos/pc/app/anchor/change-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Anchor as TinyAnchor, Modal } from '@opentiny/vue'
+import { TinyAnchor, TinyModal } from '@opentiny/vue'
 
 const links = ref([
   {
@@ -42,6 +42,6 @@ const links = ref([
 ])
 
 function handleChange(link) {
-  Modal.message({ message: `change${link}`, status: 'info' })
+  TinyModal.message({ message: `change${link}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/anchor/change.vue b/examples/sites/demos/pc/app/anchor/change.vue
index 3a1b3f272..cf364c059 100644
--- a/examples/sites/demos/pc/app/anchor/change.vue
+++ b/examples/sites/demos/pc/app/anchor/change.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Anchor, Modal } from '@opentiny/vue'
+import { TinyAnchor, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAnchor: Anchor
+    TinyAnchor
   },
   data() {
     return {
@@ -49,7 +49,7 @@ export default {
   },
   methods: {
     handleChange(link) {
-      Modal.message({ message: `change${link}`, status: 'info' })
+      TinyModal.message({ message: `change${link}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue b/examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue
index d3fee640b..70ab2d49b 100644
--- a/examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue
+++ b/examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Anchor as TinyAnchor, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyAnchor, TinySwitch } from '@opentiny/vue'
 
 const isAffix = ref(false)
 const links = ref([
diff --git a/examples/sites/demos/pc/app/anchor/is-affix.vue b/examples/sites/demos/pc/app/anchor/is-affix.vue
index 00e0cb666..c3d748379 100644
--- a/examples/sites/demos/pc/app/anchor/is-affix.vue
+++ b/examples/sites/demos/pc/app/anchor/is-affix.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Anchor, Switch } from '@opentiny/vue'
+import { TinyAnchor, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAnchor: Anchor,
-    TinySwitch: Switch
+    TinyAnchor,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue b/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue
index 697823a34..eb0ce2b4e 100644
--- a/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue
+++ b/examples/sites/demos/pc/app/anchor/set-container-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Anchor as TinyAnchor, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyAnchor, TinyRow, TinyCol } from '@opentiny/vue'
 
 const links = ref([
   {
diff --git a/examples/sites/demos/pc/app/anchor/set-container.vue b/examples/sites/demos/pc/app/anchor/set-container.vue
index 116098952..4fdd01c6f 100644
--- a/examples/sites/demos/pc/app/anchor/set-container.vue
+++ b/examples/sites/demos/pc/app/anchor/set-container.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script>
-import { Anchor, Row, Col } from '@opentiny/vue'
+import { TinyAnchor, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAnchor: Anchor,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyAnchor,
+    TinyRow,
+    TinyCol
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/area/area-events-composition-api.vue b/examples/sites/demos/pc/app/area/area-events-composition-api.vue
index e0f331b10..dc86c6737 100644
--- a/examples/sites/demos/pc/app/area/area-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/area/area-events-composition-api.vue
@@ -10,26 +10,26 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Area as TinyArea, Notify } from '@opentiny/vue'
+import { TinyArea, TinyNotify } from '@opentiny/vue'
 
 const value = ref(['3623', '4199', '649991', '661414'])
 
 function changeRegion(value) {
-  Notify({
+  TinyNotify({
     message: '当前选择的 Region 为:' + value,
     position: 'top-right'
   })
 }
 
 function changeRep(value) {
-  Notify({
+  TinyNotify({
     message: '当前选择的 Rep 为:' + value,
     position: 'top-right'
   })
 }
 
 function changeOffice(value) {
-  Notify({
+  TinyNotify({
     message: '当前选择的 Office 为:' + value,
     position: 'top-right'
   })
diff --git a/examples/sites/demos/pc/app/area/area-events.vue b/examples/sites/demos/pc/app/area/area-events.vue
index a0db328e8..b2e37f5be 100644
--- a/examples/sites/demos/pc/app/area/area-events.vue
+++ b/examples/sites/demos/pc/app/area/area-events.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Area, Notify } from '@opentiny/vue'
+import { TinyArea, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyArea: Area
+    TinyArea
   },
   data() {
     return {
@@ -22,19 +22,19 @@ export default {
   },
   methods: {
     changeRegion(value) {
-      Notify({
+      TinyNotify({
         message: '当前选择的 Region 为:' + value,
         position: 'top-right'
       })
     },
     changeRep(value) {
-      Notify({
+      TinyNotify({
         message: '当前选择的 Rep 为:' + value,
         position: 'top-right'
       })
     },
     changeOffice(value) {
-      Notify({
+      TinyNotify({
         message: '当前选择的 Office 为:' + value,
         position: 'top-right'
       })
diff --git a/examples/sites/demos/pc/app/area/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/area/basic-usage-composition-api.vue
index 3f82563cd..3a31b9a85 100644
--- a/examples/sites/demos/pc/app/area/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/area/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Area as TinyArea } from '@opentiny/vue'
+import { TinyArea } from '@opentiny/vue'
 
 const area = ref(['3623', '4199', '649991', '661414'])
 </script>
diff --git a/examples/sites/demos/pc/app/area/basic-usage.vue b/examples/sites/demos/pc/app/area/basic-usage.vue
index 60345dee4..8502b202d 100644
--- a/examples/sites/demos/pc/app/area/basic-usage.vue
+++ b/examples/sites/demos/pc/app/area/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Area } from '@opentiny/vue'
+import { TinyArea } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyArea: Area
+    TinyArea
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/area/custom-service-composition-api.vue b/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
index 664365756..d4bb2674f 100644
--- a/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Area as TinyArea } from '@opentiny/vue'
+import { TinyArea } from '@opentiny/vue'
 
 const value = ref([])
 const field = ref({ label: 'name', value: 'id' })
diff --git a/examples/sites/demos/pc/app/area/custom-service.vue b/examples/sites/demos/pc/app/area/custom-service.vue
index 6afc2de4d..0086c56cc 100644
--- a/examples/sites/demos/pc/app/area/custom-service.vue
+++ b/examples/sites/demos/pc/app/area/custom-service.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Area } from '@opentiny/vue'
+import { TinyArea } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyArea: Area
+    TinyArea
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/area/disabled-composition-api.vue b/examples/sites/demos/pc/app/area/disabled-composition-api.vue
index e6128b334..929fadd98 100644
--- a/examples/sites/demos/pc/app/area/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/area/disabled-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Area as TinyArea, Button as TinyButton } from '@opentiny/vue'
+import { TinyArea, TinyButton } from '@opentiny/vue'
 
 const area = ref(['3623', '4199', '649991', '661414'])
 const disabled = ref(false)
diff --git a/examples/sites/demos/pc/app/area/disabled.vue b/examples/sites/demos/pc/app/area/disabled.vue
index dc4b04468..234c45b2e 100644
--- a/examples/sites/demos/pc/app/area/disabled.vue
+++ b/examples/sites/demos/pc/app/area/disabled.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Area, Button } from '@opentiny/vue'
+import { TinyArea, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyArea: Area,
-    TinyButton: Button
+    TinyArea,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/area/size-composition-api.vue b/examples/sites/demos/pc/app/area/size-composition-api.vue
index a805343b1..0e54c37a0 100644
--- a/examples/sites/demos/pc/app/area/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/area/size-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Area as TinyArea } from '@opentiny/vue'
+import { TinyArea } from '@opentiny/vue'
 
 const area = ref(['3623', '4199', '649991', '661414'])
 </script>
diff --git a/examples/sites/demos/pc/app/area/size.vue b/examples/sites/demos/pc/app/area/size.vue
index 3f87ca318..4c6105cf3 100644
--- a/examples/sites/demos/pc/app/area/size.vue
+++ b/examples/sites/demos/pc/app/area/size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Area } from '@opentiny/vue'
+import { TinyArea } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyArea: Area
+    TinyArea
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/basic-usage-composition-api.vue
index 7093635e2..722fb9b25 100644
--- a/examples/sites/demos/pc/app/autocomplete/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/basic-usage-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/basic-usage.vue b/examples/sites/demos/pc/app/autocomplete/basic-usage.vue
index 4a5b57b55..bb9fc278d 100644
--- a/examples/sites/demos/pc/app/autocomplete/basic-usage.vue
+++ b/examples/sites/demos/pc/app/autocomplete/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/clearable-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/clearable-composition-api.vue
index 6eef21f58..39ed0a913 100644
--- a/examples/sites/demos/pc/app/autocomplete/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/clearable-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/clearable.vue b/examples/sites/demos/pc/app/autocomplete/clearable.vue
index e95749c33..78b1f5567 100644
--- a/examples/sites/demos/pc/app/autocomplete/clearable.vue
+++ b/examples/sites/demos/pc/app/autocomplete/clearable.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/custom-icon-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/custom-icon-composition-api.vue
index 58d9e68a1..4404102c2 100644
--- a/examples/sites/demos/pc/app/autocomplete/custom-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/custom-icon-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 import { iconEdit, iconApp } from '@opentiny/vue-icon'
 
 const restaurants = ref([])
diff --git a/examples/sites/demos/pc/app/autocomplete/custom-icon.vue b/examples/sites/demos/pc/app/autocomplete/custom-icon.vue
index f21118602..6a5366ed0 100644
--- a/examples/sites/demos/pc/app/autocomplete/custom-icon.vue
+++ b/examples/sites/demos/pc/app/autocomplete/custom-icon.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 import { iconEdit, iconApp } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/debounce-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/debounce-composition-api.vue
index 76dff780b..f185a4025 100644
--- a/examples/sites/demos/pc/app/autocomplete/debounce-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/debounce-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/debounce.vue b/examples/sites/demos/pc/app/autocomplete/debounce.vue
index 570effdf2..f74baf49a 100644
--- a/examples/sites/demos/pc/app/autocomplete/debounce.vue
+++ b/examples/sites/demos/pc/app/autocomplete/debounce.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/disabled-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/disabled-composition-api.vue
index 15f8b3a3a..5a1439a8d 100644
--- a/examples/sites/demos/pc/app/autocomplete/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/disabled-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/autocomplete/disabled.vue b/examples/sites/demos/pc/app/autocomplete/disabled.vue
index 3809ff012..71a07d1f8 100644
--- a/examples/sites/demos/pc/app/autocomplete/disabled.vue
+++ b/examples/sites/demos/pc/app/autocomplete/disabled.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/display-only-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/display-only-composition-api.vue
index ff93dc4ad..65beb9e1d 100644
--- a/examples/sites/demos/pc/app/autocomplete/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/display-only-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('Autocomplete 自动完成')
diff --git a/examples/sites/demos/pc/app/autocomplete/display-only.vue b/examples/sites/demos/pc/app/autocomplete/display-only.vue
index 4d59badd3..12a89f992 100644
--- a/examples/sites/demos/pc/app/autocomplete/display-only.vue
+++ b/examples/sites/demos/pc/app/autocomplete/display-only.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/hide-loading-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/hide-loading-composition-api.vue
index 8bf3f8fe7..5fef96e2b 100644
--- a/examples/sites/demos/pc/app/autocomplete/hide-loading-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/hide-loading-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const list = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/hide-loading.vue b/examples/sites/demos/pc/app/autocomplete/hide-loading.vue
index 48d6d37f6..143a0455d 100644
--- a/examples/sites/demos/pc/app/autocomplete/hide-loading.vue
+++ b/examples/sites/demos/pc/app/autocomplete/hide-loading.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/highlight-first-item-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/highlight-first-item-composition-api.vue
index 19adfb999..111ffa86e 100644
--- a/examples/sites/demos/pc/app/autocomplete/highlight-first-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/highlight-first-item-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/highlight-first-item.vue b/examples/sites/demos/pc/app/autocomplete/highlight-first-item.vue
index 9b3a781b9..17a09db6e 100644
--- a/examples/sites/demos/pc/app/autocomplete/highlight-first-item.vue
+++ b/examples/sites/demos/pc/app/autocomplete/highlight-first-item.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/no-trigger-on-focus-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/no-trigger-on-focus-composition-api.vue
index 985138615..35f5f2da3 100644
--- a/examples/sites/demos/pc/app/autocomplete/no-trigger-on-focus-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/no-trigger-on-focus-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/no-trigger-on-focus.vue b/examples/sites/demos/pc/app/autocomplete/no-trigger-on-focus.vue
index a9b1eea26..398be1536 100644
--- a/examples/sites/demos/pc/app/autocomplete/no-trigger-on-focus.vue
+++ b/examples/sites/demos/pc/app/autocomplete/no-trigger-on-focus.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/placement-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/placement-composition-api.vue
index 358f2d71a..2222613bd 100644
--- a/examples/sites/demos/pc/app/autocomplete/placement-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/placement-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/placement.vue b/examples/sites/demos/pc/app/autocomplete/placement.vue
index 7b4ed22ff..e7a505238 100644
--- a/examples/sites/demos/pc/app/autocomplete/placement.vue
+++ b/examples/sites/demos/pc/app/autocomplete/placement.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/popper-class-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/popper-class-composition-api.vue
index 78529280a..b7c384bf4 100644
--- a/examples/sites/demos/pc/app/autocomplete/popper-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/popper-class-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/popper-class.vue b/examples/sites/demos/pc/app/autocomplete/popper-class.vue
index e4a1ff0f3..e83ea09f7 100644
--- a/examples/sites/demos/pc/app/autocomplete/popper-class.vue
+++ b/examples/sites/demos/pc/app/autocomplete/popper-class.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/remote-search-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/remote-search-composition-api.vue
index b53a58208..1d2b9beac 100644
--- a/examples/sites/demos/pc/app/autocomplete/remote-search-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/remote-search-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const state1 = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/remote-search.vue b/examples/sites/demos/pc/app/autocomplete/remote-search.vue
index 5b95f7887..96ee71fd5 100644
--- a/examples/sites/demos/pc/app/autocomplete/remote-search.vue
+++ b/examples/sites/demos/pc/app/autocomplete/remote-search.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/select-event-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/select-event-composition-api.vue
index 5dabbdb1e..595c7a56f 100644
--- a/examples/sites/demos/pc/app/autocomplete/select-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/select-event-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete, Modal } from '@opentiny/vue'
+import { TinyAutocomplete, TinyModal } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
@@ -64,7 +64,7 @@ function loadAll() {
 function handleSelect(item) {
   if (item instanceof Event) return
 
-  Modal.message({
+  TinyModal.message({
     message: `当前选择：${JSON.stringify(item)}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/autocomplete/select-event.vue b/examples/sites/demos/pc/app/autocomplete/select-event.vue
index 83f68fed5..85e385ef3 100644
--- a/examples/sites/demos/pc/app/autocomplete/select-event.vue
+++ b/examples/sites/demos/pc/app/autocomplete/select-event.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Autocomplete, Modal } from '@opentiny/vue'
+import { TinyAutocomplete, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
@@ -65,7 +65,7 @@ export default {
     handleSelect(item) {
       if (item instanceof Event) return
 
-      Modal.message({
+      TinyModal.message({
         message: `当前选择：${JSON.stringify(item)}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/autocomplete/size-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/size-composition-api.vue
index f7362994f..845c27911 100644
--- a/examples/sites/demos/pc/app/autocomplete/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/size-composition-api.vue
@@ -36,7 +36,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/size.vue b/examples/sites/demos/pc/app/autocomplete/size.vue
index ce8c1d2c3..2c64af8c1 100644
--- a/examples/sites/demos/pc/app/autocomplete/size.vue
+++ b/examples/sites/demos/pc/app/autocomplete/size.vue
@@ -35,11 +35,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/autocomplete/slot-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/slot-composition-api.vue
index bed0c8d85..3dafb3289 100644
--- a/examples/sites/demos/pc/app/autocomplete/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/slot-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 import { iconEdit, iconAssociation } from '@opentiny/vue-icon'
 
 const restaurants = ref([])
diff --git a/examples/sites/demos/pc/app/autocomplete/slot.vue b/examples/sites/demos/pc/app/autocomplete/slot.vue
index c978c7a0f..0101f92a9 100644
--- a/examples/sites/demos/pc/app/autocomplete/slot.vue
+++ b/examples/sites/demos/pc/app/autocomplete/slot.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 import { IconEdit, IconAssociation } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete,
+    TinyAutocomplete,
     TinyIconEdit: IconEdit(),
     TinyIconAssociation: IconAssociation()
   },
diff --git a/examples/sites/demos/pc/app/autocomplete/value-key-composition-api.vue b/examples/sites/demos/pc/app/autocomplete/value-key-composition-api.vue
index 20b86666b..a041540cb 100644
--- a/examples/sites/demos/pc/app/autocomplete/value-key-composition-api.vue
+++ b/examples/sites/demos/pc/app/autocomplete/value-key-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Autocomplete as TinyAutocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 const restaurants = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/autocomplete/value-key.vue b/examples/sites/demos/pc/app/autocomplete/value-key.vue
index c741ba151..d18aafa62 100644
--- a/examples/sites/demos/pc/app/autocomplete/value-key.vue
+++ b/examples/sites/demos/pc/app/autocomplete/value-key.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Autocomplete } from '@opentiny/vue'
+import { TinyAutocomplete } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutocomplete: Autocomplete
+    TinyAutocomplete
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/badge/badge-class-composition-api.vue b/examples/sites/demos/pc/app/badge/badge-class-composition-api.vue
index fbbc900da..fcac54716 100644
--- a/examples/sites/demos/pc/app/badge/badge-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/badge-class-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 </script>
 
 <style>
diff --git a/examples/sites/demos/pc/app/badge/badge-class.vue b/examples/sites/demos/pc/app/badge/badge-class.vue
index 2d9cfbb7d..fae7a74be 100644
--- a/examples/sites/demos/pc/app/badge/badge-class.vue
+++ b/examples/sites/demos/pc/app/badge/badge-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/badge/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/badge/basic-usage-composition-api.vue
index ed22709d7..662d7e0d7 100644
--- a/examples/sites/demos/pc/app/badge/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/basic-usage-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/badge/basic-usage.vue b/examples/sites/demos/pc/app/badge/basic-usage.vue
index 0f575885c..fc59486a1 100644
--- a/examples/sites/demos/pc/app/badge/basic-usage.vue
+++ b/examples/sites/demos/pc/app/badge/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/badge/dynamic-hidden-composition-api.vue b/examples/sites/demos/pc/app/badge/dynamic-hidden-composition-api.vue
index 2d68f7f36..c327e5095 100644
--- a/examples/sites/demos/pc/app/badge/dynamic-hidden-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/dynamic-hidden-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Badge as TinyBadge, Button as TinyButton } from '@opentiny/vue'
+import { TinyBadge, TinyButton } from '@opentiny/vue'
 
 const unread = ref(2)
 
diff --git a/examples/sites/demos/pc/app/badge/dynamic-hidden.vue b/examples/sites/demos/pc/app/badge/dynamic-hidden.vue
index 2b28332c2..359809705 100644
--- a/examples/sites/demos/pc/app/badge/dynamic-hidden.vue
+++ b/examples/sites/demos/pc/app/badge/dynamic-hidden.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Badge, Button } from '@opentiny/vue'
+import { TinyBadge, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge,
-    TinyButton: Button
+    TinyBadge,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/badge/is-dot-composition-api.vue b/examples/sites/demos/pc/app/badge/is-dot-composition-api.vue
index 104459c8a..c864b919f 100644
--- a/examples/sites/demos/pc/app/badge/is-dot-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/is-dot-composition-api.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
-import { Button as TinyButton } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 const TinyIconMail = iconMail()
 </script>
diff --git a/examples/sites/demos/pc/app/badge/is-dot.vue b/examples/sites/demos/pc/app/badge/is-dot.vue
index ff27af74a..72f53aca3 100644
--- a/examples/sites/demos/pc/app/badge/is-dot.vue
+++ b/examples/sites/demos/pc/app/badge/is-dot.vue
@@ -9,14 +9,14 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
-import { Button } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyBadge: Badge
+    TinyButton,
+    TinyBadge
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/badge/link-composition-api.vue b/examples/sites/demos/pc/app/badge/link-composition-api.vue
index 1567ae107..61221f6d6 100644
--- a/examples/sites/demos/pc/app/badge/link-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/link-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/badge/link.vue b/examples/sites/demos/pc/app/badge/link.vue
index 9d538ba2b..726025e27 100644
--- a/examples/sites/demos/pc/app/badge/link.vue
+++ b/examples/sites/demos/pc/app/badge/link.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/badge/max-composition-api.vue b/examples/sites/demos/pc/app/badge/max-composition-api.vue
index deef76bb3..7115f398f 100644
--- a/examples/sites/demos/pc/app/badge/max-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/max-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/badge/max.vue b/examples/sites/demos/pc/app/badge/max.vue
index f857b4adf..e0249c07d 100644
--- a/examples/sites/demos/pc/app/badge/max.vue
+++ b/examples/sites/demos/pc/app/badge/max.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/badge/offset-composition-api.vue b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
index dca31fb48..73c4584de 100644
--- a/examples/sites/demos/pc/app/badge/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/badge/offset.vue b/examples/sites/demos/pc/app/badge/offset.vue
index 1928fcc84..7a852e565 100644
--- a/examples/sites/demos/pc/app/badge/offset.vue
+++ b/examples/sites/demos/pc/app/badge/offset.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/badge/slot-content-composition-api.vue b/examples/sites/demos/pc/app/badge/slot-content-composition-api.vue
index 827f2bd18..fe4cdbdc4 100644
--- a/examples/sites/demos/pc/app/badge/slot-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/slot-content-composition-api.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/badge/slot-content.vue b/examples/sites/demos/pc/app/badge/slot-content.vue
index 825e5b351..7f7bd2cc2 100644
--- a/examples/sites/demos/pc/app/badge/slot-content.vue
+++ b/examples/sites/demos/pc/app/badge/slot-content.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/badge/slot-default-composition-api.vue b/examples/sites/demos/pc/app/badge/slot-default-composition-api.vue
index 12afac3a4..05b6c04b2 100644
--- a/examples/sites/demos/pc/app/badge/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/slot-default-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/badge/slot-default.vue b/examples/sites/demos/pc/app/badge/slot-default.vue
index 2edf36e06..4b5002edc 100644
--- a/examples/sites/demos/pc/app/badge/slot-default.vue
+++ b/examples/sites/demos/pc/app/badge/slot-default.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/badge/type-composition-api.vue b/examples/sites/demos/pc/app/badge/type-composition-api.vue
index dc1891a28..c9ebb70f2 100644
--- a/examples/sites/demos/pc/app/badge/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/type-composition-api.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { Badge as TinyBadge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/badge/type.vue b/examples/sites/demos/pc/app/badge/type.vue
index 3ae10bfac..b9b357249 100644
--- a/examples/sites/demos/pc/app/badge/type.vue
+++ b/examples/sites/demos/pc/app/badge/type.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Badge } from '@opentiny/vue'
+import { TinyBadge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBadge: Badge
+    TinyBadge
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/base-select/all-text-composition-api.vue b/examples/sites/demos/pc/app/base-select/all-text-composition-api.vue
index 5d5112330..2a6a1abda 100644
--- a/examples/sites/demos/pc/app/base-select/all-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/all-text-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '黄金糕' },
diff --git a/examples/sites/demos/pc/app/base-select/all-text.vue b/examples/sites/demos/pc/app/base-select/all-text.vue
index ccd74b466..e82f327fe 100644
--- a/examples/sites/demos/pc/app/base-select/all-text.vue
+++ b/examples/sites/demos/pc/app/base-select/all-text.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/allow-create-composition-api.vue b/examples/sites/demos/pc/app/base-select/allow-create-composition-api.vue
index 1fd7223fb..eb6990649 100644
--- a/examples/sites/demos/pc/app/base-select/allow-create-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/allow-create-composition-api.vue
@@ -52,14 +52,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  BaseSelect as TinyBaseSelect,
-  Option as TinyOption,
-  Input as TinyInput,
-  Button as TinyButton,
-  DialogBox as TinyDialogBox,
-  Modal
-} from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
@@ -83,7 +76,7 @@ const handleAddOption = () => {
 
 const handleConfirm = () => {
   if (!optionLabel.value || !optionValue.value) {
-    Modal.message({ message: '选项不能为空！', status: 'warning' })
+    TinyModal.message({ message: '选项不能为空！', status: 'warning' })
     return
   }
   boxVisibility.value = false
diff --git a/examples/sites/demos/pc/app/base-select/allow-create.vue b/examples/sites/demos/pc/app/base-select/allow-create.vue
index 18299f53c..178b657e3 100644
--- a/examples/sites/demos/pc/app/base-select/allow-create.vue
+++ b/examples/sites/demos/pc/app/base-select/allow-create.vue
@@ -51,15 +51,15 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Input, Button, DialogBox, Modal } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyBaseSelect,
+    TinyOption,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
@@ -84,7 +84,7 @@ export default {
     },
     handleConfirm() {
       if (!this.optionLabel || !this.optionValue) {
-        Modal.message({ message: '选项不能为空！', status: 'warning' })
+        TinyModal.message({ message: '选项不能为空！', status: 'warning' })
         return
       }
       this.boxVisibility = false
diff --git a/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue b/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue
index 8fac27b31..6814e49a6 100644
--- a/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/automatic-dropdown.vue b/examples/sites/demos/pc/app/base-select/automatic-dropdown.vue
index 4c98f18e3..ef697e8dd 100644
--- a/examples/sites/demos/pc/app/base-select/automatic-dropdown.vue
+++ b/examples/sites/demos/pc/app/base-select/automatic-dropdown.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Button } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
-    TinyButton: Button
+    TinyBaseSelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/base-select/basic-usage-composition-api.vue
index d32cd127f..40d506451 100644
--- a/examples/sites/demos/pc/app/base-select/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/basic-usage-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import { iconFile } from '@opentiny/vue-icon'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/base-select/basic-usage.vue b/examples/sites/demos/pc/app/base-select/basic-usage.vue
index add4b8033..c633b72ae 100644
--- a/examples/sites/demos/pc/app/base-select/basic-usage.vue
+++ b/examples/sites/demos/pc/app/base-select/basic-usage.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import { iconFile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/binding-obj-composition-api.vue b/examples/sites/demos/pc/app/base-select/binding-obj-composition-api.vue
index e2626f811..fb5c7d48a 100644
--- a/examples/sites/demos/pc/app/base-select/binding-obj-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/binding-obj-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { obj: { val: '选项1', id: 1 }, text: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/binding-obj.vue b/examples/sites/demos/pc/app/base-select/binding-obj.vue
index 0539b406d..0af2638ab 100644
--- a/examples/sites/demos/pc/app/base-select/binding-obj.vue
+++ b/examples/sites/demos/pc/app/base-select/binding-obj.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/cache-usage-composition-api.vue b/examples/sites/demos/pc/app/base-select/cache-usage-composition-api.vue
index 08aca15af..8a53288ee 100644
--- a/examples/sites/demos/pc/app/base-select/cache-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/cache-usage-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect } from '@opentiny/vue'
+import { TinyBaseSelect } from '@opentiny/vue'
 
 const cacheOp = ref({
   key: 'test'
diff --git a/examples/sites/demos/pc/app/base-select/cache-usage.vue b/examples/sites/demos/pc/app/base-select/cache-usage.vue
index 54aca34e2..6b479795f 100644
--- a/examples/sites/demos/pc/app/base-select/cache-usage.vue
+++ b/examples/sites/demos/pc/app/base-select/cache-usage.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { BaseSelect } from '@opentiny/vue'
+import { TinyBaseSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect
+    TinyBaseSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/clear-no-match-value-composition-api.vue b/examples/sites/demos/pc/app/base-select/clear-no-match-value-composition-api.vue
index b4854e569..997215ed6 100644
--- a/examples/sites/demos/pc/app/base-select/clear-no-match-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/clear-no-match-value-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/clear-no-match-value.vue b/examples/sites/demos/pc/app/base-select/clear-no-match-value.vue
index 8af03b11e..64779c9c8 100644
--- a/examples/sites/demos/pc/app/base-select/clear-no-match-value.vue
+++ b/examples/sites/demos/pc/app/base-select/clear-no-match-value.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/clearable-composition-api.vue b/examples/sites/demos/pc/app/base-select/clearable-composition-api.vue
index f301d6c70..7e2b0a1bd 100644
--- a/examples/sites/demos/pc/app/base-select/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/clearable-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/clearable.vue b/examples/sites/demos/pc/app/base-select/clearable.vue
index 7b6878f82..e9125f0d9 100644
--- a/examples/sites/demos/pc/app/base-select/clearable.vue
+++ b/examples/sites/demos/pc/app/base-select/clearable.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/collapse-tags-composition-api.vue b/examples/sites/demos/pc/app/base-select/collapse-tags-composition-api.vue
index 1c6b672d3..f39e3d214 100644
--- a/examples/sites/demos/pc/app/base-select/collapse-tags-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/collapse-tags-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/collapse-tags.vue b/examples/sites/demos/pc/app/base-select/collapse-tags.vue
index b980f4ddb..033ca60d5 100644
--- a/examples/sites/demos/pc/app/base-select/collapse-tags.vue
+++ b/examples/sites/demos/pc/app/base-select/collapse-tags.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/copy-multi-composition-api.vue b/examples/sites/demos/pc/app/base-select/copy-multi-composition-api.vue
index 1cc595d44..f9b44f737 100644
--- a/examples/sites/demos/pc/app/base-select/copy-multi-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/copy-multi-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption, Input as TinyInput } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyInput } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/copy-multi.vue b/examples/sites/demos/pc/app/base-select/copy-multi.vue
index bd5e0f37b..1934aabe2 100644
--- a/examples/sites/demos/pc/app/base-select/copy-multi.vue
+++ b/examples/sites/demos/pc/app/base-select/copy-multi.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Input } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
-    TinyInput: Input
+    TinyBaseSelect,
+    TinyOption,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/copy-single-composition-api.vue b/examples/sites/demos/pc/app/base-select/copy-single-composition-api.vue
index 7720f5038..ba399646e 100644
--- a/examples/sites/demos/pc/app/base-select/copy-single-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/copy-single-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption, Input as TinyInput } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyInput } from '@opentiny/vue'
 
 const options1 = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/copy-single.vue b/examples/sites/demos/pc/app/base-select/copy-single.vue
index bcced5d5c..d85d80aa1 100644
--- a/examples/sites/demos/pc/app/base-select/copy-single.vue
+++ b/examples/sites/demos/pc/app/base-select/copy-single.vue
@@ -32,13 +32,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Input } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
-    TinyInput: Input
+    TinyBaseSelect,
+    TinyOption,
+    TinyInput
   },
   data() {
     return {
@@ -110,6 +110,7 @@ export default {
       'Wisconsin',
       'Wyoming'
     ]
+
     this.list = states.map((item) => {
       return { value: item, label: item }
     })
diff --git a/examples/sites/demos/pc/app/base-select/disabled-composition-api.vue b/examples/sites/demos/pc/app/base-select/disabled-composition-api.vue
index 8ee34bcd9..4c2b67260 100644
--- a/examples/sites/demos/pc/app/base-select/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/disabled-composition-api.vue
@@ -68,7 +68,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options1 = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/disabled.vue b/examples/sites/demos/pc/app/base-select/disabled.vue
index b3454b885..236f81e8d 100644
--- a/examples/sites/demos/pc/app/base-select/disabled.vue
+++ b/examples/sites/demos/pc/app/base-select/disabled.vue
@@ -67,12 +67,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/events-composition-api.vue b/examples/sites/demos/pc/app/base-select/events-composition-api.vue
index 535d997a5..f9e6221a7 100644
--- a/examples/sites/demos/pc/app/base-select/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/events-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption, Modal } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyModal } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
@@ -46,49 +46,49 @@ const value1 = ref('')
 const value2 = ref([])
 
 const change = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 change 事件',
     status: 'info'
   })
 }
 
 const clear = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 clear 事件',
     status: 'info'
   })
 }
 
 const focus = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 focus 事件',
     status: 'info'
   })
 }
 
 const blur = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 blur 事件',
     status: 'info'
   })
 }
 
 const removeTag = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 remove-tag 事件',
     status: 'info'
   })
 }
 
 const visibleChange = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 visible-change 事件',
     status: 'info'
   })
 }
 
 const dropdownClick = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 dropdown-click 事件',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/base-select/events.vue b/examples/sites/demos/pc/app/base-select/events.vue
index 466cfb353..9cad6a366 100644
--- a/examples/sites/demos/pc/app/base-select/events.vue
+++ b/examples/sites/demos/pc/app/base-select/events.vue
@@ -35,12 +35,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Modal } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
@@ -57,42 +57,42 @@ export default {
   },
   methods: {
     change() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 change 事件',
         status: 'info'
       })
     },
     clear() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 clear 事件',
         status: 'info'
       })
     },
     focus() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 focus 事件'
       })
     },
     blur() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 blur 事件',
         status: 'info'
       })
     },
     removeTag() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 remove-tag 事件',
         status: 'info'
       })
     },
     visibleChange() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 visible-change 事件',
         status: 'info'
       })
     },
     dropdownClick() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 dropdown-click 事件',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/base-select/filter-method-composition-api.vue b/examples/sites/demos/pc/app/base-select/filter-method-composition-api.vue
index 0b1b13878..0af648d55 100644
--- a/examples/sites/demos/pc/app/base-select/filter-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/filter-method-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/filter-method.vue b/examples/sites/demos/pc/app/base-select/filter-method.vue
index e4fa323ae..ad59c67b5 100644
--- a/examples/sites/demos/pc/app/base-select/filter-method.vue
+++ b/examples/sites/demos/pc/app/base-select/filter-method.vue
@@ -33,12 +33,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/base-select/filter-mode-composition-api.vue
index 855d833f3..0fad1dd33 100644
--- a/examples/sites/demos/pc/app/base-select/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/filter-mode-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/filter-mode.vue b/examples/sites/demos/pc/app/base-select/filter-mode.vue
index 6d94947c7..1dc10546e 100644
--- a/examples/sites/demos/pc/app/base-select/filter-mode.vue
+++ b/examples/sites/demos/pc/app/base-select/filter-mode.vue
@@ -28,12 +28,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/hide-drop-composition-api.vue b/examples/sites/demos/pc/app/base-select/hide-drop-composition-api.vue
index a2cdd2148..c81a22382 100644
--- a/examples/sites/demos/pc/app/base-select/hide-drop-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/hide-drop-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/hide-drop.vue b/examples/sites/demos/pc/app/base-select/hide-drop.vue
index bb2c0c4ff..bc274ce80 100644
--- a/examples/sites/demos/pc/app/base-select/hide-drop.vue
+++ b/examples/sites/demos/pc/app/base-select/hide-drop.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/input-box-type-composition-api.vue b/examples/sites/demos/pc/app/base-select/input-box-type-composition-api.vue
index ee4290556..1e1eadf78 100644
--- a/examples/sites/demos/pc/app/base-select/input-box-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/input-box-type-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/input-box-type.vue b/examples/sites/demos/pc/app/base-select/input-box-type.vue
index 66d7752d5..394e5b246 100644
--- a/examples/sites/demos/pc/app/base-select/input-box-type.vue
+++ b/examples/sites/demos/pc/app/base-select/input-box-type.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/is-drop-inherit-width-composition-api.vue b/examples/sites/demos/pc/app/base-select/is-drop-inherit-width-composition-api.vue
index a3925d81a..9aed76a2c 100644
--- a/examples/sites/demos/pc/app/base-select/is-drop-inherit-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/is-drop-inherit-width-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/base-select/is-drop-inherit-width.vue b/examples/sites/demos/pc/app/base-select/is-drop-inherit-width.vue
index 36628dc70..fbfb93e1c 100644
--- a/examples/sites/demos/pc/app/base-select/is-drop-inherit-width.vue
+++ b/examples/sites/demos/pc/app/base-select/is-drop-inherit-width.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/manual-focus-blur-composition-api.vue b/examples/sites/demos/pc/app/base-select/manual-focus-blur-composition-api.vue
index 1aad187f7..7eda550be 100644
--- a/examples/sites/demos/pc/app/base-select/manual-focus-blur-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/manual-focus-blur-composition-api.vue
@@ -37,7 +37,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/manual-focus-blur.vue b/examples/sites/demos/pc/app/base-select/manual-focus-blur.vue
index 4360f350c..f74975492 100644
--- a/examples/sites/demos/pc/app/base-select/manual-focus-blur.vue
+++ b/examples/sites/demos/pc/app/base-select/manual-focus-blur.vue
@@ -36,13 +36,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Button } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
-    TinyButton: Button
+    TinyBaseSelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/map-field-composition-api.vue b/examples/sites/demos/pc/app/base-select/map-field-composition-api.vue
index 764e66d7a..1c10c9d57 100644
--- a/examples/sites/demos/pc/app/base-select/map-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/map-field-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const value1 = ref(['选项1', '选项2'])
 
diff --git a/examples/sites/demos/pc/app/base-select/map-field.vue b/examples/sites/demos/pc/app/base-select/map-field.vue
index e34cb89db..9b539da51 100644
--- a/examples/sites/demos/pc/app/base-select/map-field.vue
+++ b/examples/sites/demos/pc/app/base-select/map-field.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/memoize-usage-composition-api.vue b/examples/sites/demos/pc/app/base-select/memoize-usage-composition-api.vue
index 20472b336..f7b7f9cfa 100644
--- a/examples/sites/demos/pc/app/base-select/memoize-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/memoize-usage-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import Memorize from '@opentiny/vue-renderless/common/deps/memorize'
 
 const MemorizeInstance = new Memorize({ key: 'test456' })
diff --git a/examples/sites/demos/pc/app/base-select/memoize-usage.vue b/examples/sites/demos/pc/app/base-select/memoize-usage.vue
index c14abf8bd..29a411758 100644
--- a/examples/sites/demos/pc/app/base-select/memoize-usage.vue
+++ b/examples/sites/demos/pc/app/base-select/memoize-usage.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import Memorize from '@opentiny/vue-renderless/common/deps/memorize'
 
 const MemorizeInstance = new Memorize({ key: 'test456' })
@@ -32,8 +32,8 @@ const options = MemorizeInstance.assemble([
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/multiple-composition-api.vue b/examples/sites/demos/pc/app/base-select/multiple-composition-api.vue
index 001abf60d..592e408ca 100644
--- a/examples/sites/demos/pc/app/base-select/multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/multiple-composition-api.vue
@@ -54,7 +54,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 const options1 = ref([
diff --git a/examples/sites/demos/pc/app/base-select/multiple-mix-composition-api.vue b/examples/sites/demos/pc/app/base-select/multiple-mix-composition-api.vue
index a4b37bb82..cad65b4f8 100644
--- a/examples/sites/demos/pc/app/base-select/multiple-mix-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/multiple-mix-composition-api.vue
@@ -84,13 +84,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  BaseSelect as TinyBaseSelect,
-  Option as TinyOption,
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyForm, TinyFormItem, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/base-select/multiple-mix.vue b/examples/sites/demos/pc/app/base-select/multiple-mix.vue
index c6ec1f117..3fc91060a 100644
--- a/examples/sites/demos/pc/app/base-select/multiple-mix.vue
+++ b/examples/sites/demos/pc/app/base-select/multiple-mix.vue
@@ -83,15 +83,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Option, Button, BaseSelect } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyOption, TinyButton, TinyBaseSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyButton: Button,
-    TinyFormItem: FormItem,
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyForm,
+    TinyButton,
+    TinyFormItem,
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/multiple.vue b/examples/sites/demos/pc/app/base-select/multiple.vue
index d4d741dfb..f93ac6823 100644
--- a/examples/sites/demos/pc/app/base-select/multiple.vue
+++ b/examples/sites/demos/pc/app/base-select/multiple.vue
@@ -53,13 +53,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/native-properties-composition-api.vue b/examples/sites/demos/pc/app/base-select/native-properties-composition-api.vue
index 23d150f46..159a56d49 100644
--- a/examples/sites/demos/pc/app/base-select/native-properties-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/native-properties-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/native-properties.vue b/examples/sites/demos/pc/app/base-select/native-properties.vue
index b38ad9bcc..33ca9e92d 100644
--- a/examples/sites/demos/pc/app/base-select/native-properties.vue
+++ b/examples/sites/demos/pc/app/base-select/native-properties.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/no-data-text-composition-api.vue b/examples/sites/demos/pc/app/base-select/no-data-text-composition-api.vue
index f6e89a422..c403b7b2d 100644
--- a/examples/sites/demos/pc/app/base-select/no-data-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/no-data-text-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/base-select/no-data-text.vue b/examples/sites/demos/pc/app/base-select/no-data-text.vue
index f6ff66fc9..9aa093ba4 100644
--- a/examples/sites/demos/pc/app/base-select/no-data-text.vue
+++ b/examples/sites/demos/pc/app/base-select/no-data-text.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/optimization-composition-api.vue b/examples/sites/demos/pc/app/base-select/optimization-composition-api.vue
index b6180f632..ebe19ec20 100644
--- a/examples/sites/demos/pc/app/base-select/optimization-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/optimization-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Modal } from '@opentiny/vue'
+import { TinyBaseSelect, TinyModal } from '@opentiny/vue'
 
 const buildOptions = () =>
   Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项${i}","label":"北京${i}"}`))
@@ -27,7 +27,7 @@ const value2 = ref([])
 const options = ref(buildOptions())
 
 const onChange = (value) => {
-  Modal.message({
+  TinyModal.message({
     message: JSON.stringify(value),
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/base-select/optimization.vue b/examples/sites/demos/pc/app/base-select/optimization.vue
index bdba747cb..b8ab1a846 100644
--- a/examples/sites/demos/pc/app/base-select/optimization.vue
+++ b/examples/sites/demos/pc/app/base-select/optimization.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script>
-import { BaseSelect, Modal } from '@opentiny/vue'
+import { TinyBaseSelect, TinyModal } from '@opentiny/vue'
 
 const buildOptions = () =>
   Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项${i}","label":"北京${i}"}`))
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect
+    TinyBaseSelect
   },
   data() {
     return {
@@ -34,7 +34,7 @@ export default {
   },
   methods: {
     onChange(value) {
-      Modal.message({
+      TinyModal.message({
         message: JSON.stringify(value),
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/base-select/option-group-composition-api.vue b/examples/sites/demos/pc/app/base-select/option-group-composition-api.vue
index 59b140486..f20f793ef 100644
--- a/examples/sites/demos/pc/app/base-select/option-group-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/option-group-composition-api.vue
@@ -59,7 +59,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption, OptionGroup as TinyOptionGroup } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
 
 const options3 = ref([
   {
diff --git a/examples/sites/demos/pc/app/base-select/option-group.vue b/examples/sites/demos/pc/app/base-select/option-group.vue
index bd0ea5ad7..4adfa95ec 100644
--- a/examples/sites/demos/pc/app/base-select/option-group.vue
+++ b/examples/sites/demos/pc/app/base-select/option-group.vue
@@ -58,13 +58,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option, OptionGroup } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
-    TinyOptionGroup: OptionGroup
+    TinyBaseSelect,
+    TinyOption,
+    TinyOptionGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/popup-style-position-composition-api.vue b/examples/sites/demos/pc/app/base-select/popup-style-position-composition-api.vue
index 63cef96f2..22a4ac539 100644
--- a/examples/sites/demos/pc/app/base-select/popup-style-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/popup-style-position-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { reactive, ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = reactive([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/popup-style-position.vue b/examples/sites/demos/pc/app/base-select/popup-style-position.vue
index 5a82cb145..3ab7905f0 100644
--- a/examples/sites/demos/pc/app/base-select/popup-style-position.vue
+++ b/examples/sites/demos/pc/app/base-select/popup-style-position.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/remote-method-composition-api.vue b/examples/sites/demos/pc/app/base-select/remote-method-composition-api.vue
index 43857c143..2bb3a8208 100644
--- a/examples/sites/demos/pc/app/base-select/remote-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/remote-method-composition-api.vue
@@ -104,7 +104,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 const loading1 = ref(false)
 const loading2 = ref(false)
diff --git a/examples/sites/demos/pc/app/base-select/remote-method.vue b/examples/sites/demos/pc/app/base-select/remote-method.vue
index a2b6df6c9..aebb6eb99 100644
--- a/examples/sites/demos/pc/app/base-select/remote-method.vue
+++ b/examples/sites/demos/pc/app/base-select/remote-method.vue
@@ -103,13 +103,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Button } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
-    TinyButton: Button
+    TinyBaseSelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
@@ -187,6 +187,7 @@ export default {
       'Wisconsin',
       'Wyoming'
     ]
+
     this.list = states.map((item) => {
       return { value: item, label: item }
     })
diff --git a/examples/sites/demos/pc/app/base-select/searchable-composition-api.vue b/examples/sites/demos/pc/app/base-select/searchable-composition-api.vue
index 69bc2e9b2..e8a757e7d 100644
--- a/examples/sites/demos/pc/app/base-select/searchable-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/searchable-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/searchable.vue b/examples/sites/demos/pc/app/base-select/searchable.vue
index 6eccd84cc..784bbf9ef 100644
--- a/examples/sites/demos/pc/app/base-select/searchable.vue
+++ b/examples/sites/demos/pc/app/base-select/searchable.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/show-alloption-composition-api.vue b/examples/sites/demos/pc/app/base-select/show-alloption-composition-api.vue
index b996442d0..8275d7f6a 100644
--- a/examples/sites/demos/pc/app/base-select/show-alloption-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/show-alloption-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/show-alloption.vue b/examples/sites/demos/pc/app/base-select/show-alloption.vue
index cd9760a98..3cd8fc8e1 100644
--- a/examples/sites/demos/pc/app/base-select/show-alloption.vue
+++ b/examples/sites/demos/pc/app/base-select/show-alloption.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/show-tip-composition-api.vue b/examples/sites/demos/pc/app/base-select/show-tip-composition-api.vue
index 65d2c4423..7149c4dc4 100644
--- a/examples/sites/demos/pc/app/base-select/show-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/show-tip-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/show-tip.vue b/examples/sites/demos/pc/app/base-select/show-tip.vue
index 81c5e7042..72e5f92ff 100644
--- a/examples/sites/demos/pc/app/base-select/show-tip.vue
+++ b/examples/sites/demos/pc/app/base-select/show-tip.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/size-composition-api.vue b/examples/sites/demos/pc/app/base-select/size-composition-api.vue
index e00eafb0e..edc934496 100644
--- a/examples/sites/demos/pc/app/base-select/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/size-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect } from '@opentiny/vue'
+import { TinyBaseSelect } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/size.vue b/examples/sites/demos/pc/app/base-select/size.vue
index f97e973a0..fdbb04d2c 100644
--- a/examples/sites/demos/pc/app/base-select/size.vue
+++ b/examples/sites/demos/pc/app/base-select/size.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { BaseSelect } from '@opentiny/vue'
+import { TinyBaseSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect
+    TinyBaseSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue
index b45f7410a..d521744cb 100644
--- a/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-default-composition-api.vue
@@ -32,12 +32,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  BaseSelect as TinyBaseSelect,
-  Option as TinyOption,
-  Tag as TinyTag,
-  Tooltip as TinyTooltip
-} from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyTag, TinyTooltip } from '@opentiny/vue'
 
 const options1 = ref([
   { value: '选项1', label: '北京', tag: 'New', tip: '自定义提示' },
diff --git a/examples/sites/demos/pc/app/base-select/slot-default.vue b/examples/sites/demos/pc/app/base-select/slot-default.vue
index 1a386dabe..e9da3c5fb 100644
--- a/examples/sites/demos/pc/app/base-select/slot-default.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-default.vue
@@ -31,14 +31,14 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Tag, Tooltip } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyTag, TinyTooltip } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
-    TinyTag: Tag,
-    TinyTooltip: Tooltip
+    TinyBaseSelect,
+    TinyOption,
+    TinyTag,
+    TinyTooltip
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/slot-empty-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-empty-composition-api.vue
index 07edc4cc3..0626518d1 100644
--- a/examples/sites/demos/pc/app/base-select/slot-empty-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-empty-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Button as TinyButton } from '@opentiny/vue'
+import { TinyBaseSelect, TinyButton } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/base-select/slot-empty.vue b/examples/sites/demos/pc/app/base-select/slot-empty.vue
index b36c6a5e5..b47887f59 100644
--- a/examples/sites/demos/pc/app/base-select/slot-empty.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-empty.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { BaseSelect, Button } from '@opentiny/vue'
+import { TinyBaseSelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyButton: Button
+    TinyBaseSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-footer-composition-api.vue
index 234c21597..b59b6ab22 100644
--- a/examples/sites/demos/pc/app/base-select/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-footer-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/slot-footer.vue b/examples/sites/demos/pc/app/base-select/slot-footer.vue
index d9fc137a4..7e437b885 100644
--- a/examples/sites/demos/pc/app/base-select/slot-footer.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-footer.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option, Button } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyButton,
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/slot-label-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-label-composition-api.vue
index c67305acc..3dc8f9ef0 100644
--- a/examples/sites/demos/pc/app/base-select/slot-label-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-label-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/base-select/slot-label.vue b/examples/sites/demos/pc/app/base-select/slot-label.vue
index 1aa17ab9c..f1bbd37f1 100644
--- a/examples/sites/demos/pc/app/base-select/slot-label.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-label.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
index 7e8fae58c..4d621228d 100644
--- a/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue
@@ -80,7 +80,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Tree as TinyTree } from '@opentiny/vue'
+import { TinyBaseSelect, TinyTree } from '@opentiny/vue'
 
 const treeRef = ref()
 
diff --git a/examples/sites/demos/pc/app/base-select/slot-panel.vue b/examples/sites/demos/pc/app/base-select/slot-panel.vue
index c88515648..c46d7133d 100644
--- a/examples/sites/demos/pc/app/base-select/slot-panel.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-panel.vue
@@ -79,12 +79,12 @@
 </template>
 
 <script>
-import { BaseSelect, Tree } from '@opentiny/vue'
+import { TinyBaseSelect, TinyTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyTree: Tree
+    TinyBaseSelect,
+    TinyTree
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/base-select/slot-prefix-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-prefix-composition-api.vue
index 99095fb08..e9e76adbe 100644
--- a/examples/sites/demos/pc/app/base-select/slot-prefix-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-prefix-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import { iconShare } from '@opentiny/vue-icon'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/base-select/slot-prefix.vue b/examples/sites/demos/pc/app/base-select/slot-prefix.vue
index dd1fba214..c03d91ee1 100644
--- a/examples/sites/demos/pc/app/base-select/slot-prefix.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-prefix.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import { iconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
+    TinyBaseSelect,
+    TinyOption,
     IconShare: iconShare()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/base-select/slot-reference-composition-api.vue b/examples/sites/demos/pc/app/base-select/slot-reference-composition-api.vue
index b8f558cac..0cbe0a67f 100644
--- a/examples/sites/demos/pc/app/base-select/slot-reference-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-reference-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import { iconSetting } from '@opentiny/vue-icon'
 
 const TinyIconSetting = iconSetting()
diff --git a/examples/sites/demos/pc/app/base-select/slot-reference.vue b/examples/sites/demos/pc/app/base-select/slot-reference.vue
index c6deaf6c1..ae5322b1a 100644
--- a/examples/sites/demos/pc/app/base-select/slot-reference.vue
+++ b/examples/sites/demos/pc/app/base-select/slot-reference.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 import { iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option,
+    TinyBaseSelect,
+    TinyOption,
     TinyIconSetting: iconSetting()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/base-select/tag-type-composition-api.vue b/examples/sites/demos/pc/app/base-select/tag-type-composition-api.vue
index 95a855665..6a7c8b767 100644
--- a/examples/sites/demos/pc/app/base-select/tag-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/base-select/tag-type-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/base-select/tag-type.vue b/examples/sites/demos/pc/app/base-select/tag-type.vue
index b27f9707f..cc602be31 100644
--- a/examples/sites/demos/pc/app/base-select/tag-type.vue
+++ b/examples/sites/demos/pc/app/base-select/tag-type.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { BaseSelect, Option } from '@opentiny/vue'
+import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaseSelect: BaseSelect,
-    TinyOption: Option
+    TinyBaseSelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/breadcrumb/base-composition-api.vue b/examples/sites/demos/pc/app/breadcrumb/base-composition-api.vue
index 8fb23e29c..ee057d5c2 100644
--- a/examples/sites/demos/pc/app/breadcrumb/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/base-composition-api.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script setup>
-import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem, Notify } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem, TinyNotify } from '@opentiny/vue'
 
 function breadcrumbClick(value) {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: 'tiny-breadcrumb 触发选择面包屑事件',
     message: JSON.stringify(value),
@@ -23,7 +23,7 @@ function breadcrumbClick(value) {
 }
 
 function breadcrumbItemClick(value) {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: 'tiny-breadcrumb-item 触发选择面包屑事件',
     message: JSON.stringify(value),
diff --git a/examples/sites/demos/pc/app/breadcrumb/base-on-route-composition-api.vue b/examples/sites/demos/pc/app/breadcrumb/base-on-route-composition-api.vue
index 76896993a..bb8e8b172 100644
--- a/examples/sites/demos/pc/app/breadcrumb/base-on-route-composition-api.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/base-on-route-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
 
 const routes = computed(() => {
   return []
diff --git a/examples/sites/demos/pc/app/breadcrumb/base-on-route.vue b/examples/sites/demos/pc/app/breadcrumb/base-on-route.vue
index e1bbcd9a3..8541d4d19 100644
--- a/examples/sites/demos/pc/app/breadcrumb/base-on-route.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/base-on-route.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Breadcrumb, BreadcrumbItem } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBreadcrumb: Breadcrumb,
-    TinyBreadcrumbItem: BreadcrumbItem
+    TinyBreadcrumb,
+    TinyBreadcrumbItem
   },
   computed: {
     routes() {
diff --git a/examples/sites/demos/pc/app/breadcrumb/base.vue b/examples/sites/demos/pc/app/breadcrumb/base.vue
index 11a0cd581..674214e4a 100644
--- a/examples/sites/demos/pc/app/breadcrumb/base.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/base.vue
@@ -10,16 +10,16 @@
 </template>
 
 <script>
-import { Breadcrumb, BreadcrumbItem, Notify } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBreadcrumb: Breadcrumb,
-    TinyBreadcrumbItem: BreadcrumbItem
+    TinyBreadcrumb,
+    TinyBreadcrumbItem
   },
   methods: {
     breadcrumbClick: (value) => {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: 'tiny-breadcrumb 触发选择面包屑事件',
         message: JSON.stringify(value),
@@ -28,7 +28,7 @@ export default {
       })
     },
     breadcrumbItemClick: (value) => {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: 'tiny-breadcrumb-item 触发选择面包屑事件',
         message: JSON.stringify(value),
diff --git a/examples/sites/demos/pc/app/breadcrumb/options-composition-api.vue b/examples/sites/demos/pc/app/breadcrumb/options-composition-api.vue
index 6a8ff9ac3..988bb4159 100644
--- a/examples/sites/demos/pc/app/breadcrumb/options-composition-api.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/options-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Breadcrumb as TinyBreadcrumb, Notify } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyNotify } from '@opentiny/vue'
 
 const options = ref([
   {
@@ -39,7 +39,7 @@ const options1 = ref([
 ])
 
 function itemClick(value) {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '触发选择面包屑事件',
     message: JSON.stringify(value),
diff --git a/examples/sites/demos/pc/app/breadcrumb/options.vue b/examples/sites/demos/pc/app/breadcrumb/options.vue
index b7a2393fe..3f9f73f57 100644
--- a/examples/sites/demos/pc/app/breadcrumb/options.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/options.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Breadcrumb, Notify } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBreadcrumb: Breadcrumb
+    TinyBreadcrumb
   },
   data() {
     return {
@@ -46,7 +46,7 @@ export default {
   },
   methods: {
     itemClick: (value) => {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '触发选择面包屑事件',
         message: JSON.stringify(value),
diff --git a/examples/sites/demos/pc/app/breadcrumb/separator-composition-api.vue b/examples/sites/demos/pc/app/breadcrumb/separator-composition-api.vue
index 1d71b2ccb..b7b038186 100644
--- a/examples/sites/demos/pc/app/breadcrumb/separator-composition-api.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/separator-composition-api.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
 import { iconBoat } from '@opentiny/vue-icon'
 
 const IconBoat = iconBoat()
diff --git a/examples/sites/demos/pc/app/breadcrumb/separator.vue b/examples/sites/demos/pc/app/breadcrumb/separator.vue
index d5f54b3ba..404cb0329 100644
--- a/examples/sites/demos/pc/app/breadcrumb/separator.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/separator.vue
@@ -19,13 +19,13 @@
 </template>
 
 <script>
-import { Breadcrumb, BreadcrumbItem } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
 import { IconBoat } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyBreadcrumb: Breadcrumb,
-    TinyBreadcrumbItem: BreadcrumbItem
+    TinyBreadcrumb,
+    TinyBreadcrumbItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/breadcrumb/size-composition-api.vue b/examples/sites/demos/pc/app/breadcrumb/size-composition-api.vue
index c0944da73..0cfec1559 100644
--- a/examples/sites/demos/pc/app/breadcrumb/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/size-composition-api.vue
@@ -9,10 +9,10 @@
 </template>
 
 <script setup>
-import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem, Notify } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem, TinyNotify } from '@opentiny/vue'
 
 function breadcrumbClick(value) {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: 'tiny-breadcrumb 触发选择面包屑事件',
     message: JSON.stringify(value),
@@ -22,7 +22,7 @@ function breadcrumbClick(value) {
 }
 
 function breadcrumbItemClick(value) {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: 'tiny-breadcrumb-item 触发选择面包屑事件',
     message: JSON.stringify(value),
diff --git a/examples/sites/demos/pc/app/breadcrumb/size.vue b/examples/sites/demos/pc/app/breadcrumb/size.vue
index efebb5d45..b6f328899 100644
--- a/examples/sites/demos/pc/app/breadcrumb/size.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/size.vue
@@ -9,16 +9,16 @@
 </template>
 
 <script>
-import { Breadcrumb, BreadcrumbItem, Notify } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBreadcrumb: Breadcrumb,
-    TinyBreadcrumbItem: BreadcrumbItem
+    TinyBreadcrumb,
+    TinyBreadcrumbItem
   },
   methods: {
     breadcrumbClick: (value) => {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: 'tiny-breadcrumb 触发选择面包屑事件',
         message: JSON.stringify(value),
@@ -27,7 +27,7 @@ export default {
       })
     },
     breadcrumbItemClick: (value) => {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: 'tiny-breadcrumb-item 触发选择面包屑事件',
         message: JSON.stringify(value),
diff --git a/examples/sites/demos/pc/app/breadcrumb/slot-default-composition-api.vue b/examples/sites/demos/pc/app/breadcrumb/slot-default-composition-api.vue
index 3175803ea..58c9edf4c 100644
--- a/examples/sites/demos/pc/app/breadcrumb/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/slot-default-composition-api.vue
@@ -11,5 +11,5 @@
 </template>
 
 <script setup>
-import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/breadcrumb/slot-default.vue b/examples/sites/demos/pc/app/breadcrumb/slot-default.vue
index 37b4f3efd..2000c5c36 100644
--- a/examples/sites/demos/pc/app/breadcrumb/slot-default.vue
+++ b/examples/sites/demos/pc/app/breadcrumb/slot-default.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Breadcrumb, BreadcrumbItem } from '@opentiny/vue'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBreadcrumb: Breadcrumb,
-    TinyBreadcrumbItem: BreadcrumbItem
+    TinyBreadcrumb,
+    TinyBreadcrumbItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/bulletin-board/active-name-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/active-name-composition-api.vue
index 88a160327..5dc32d57a 100644
--- a/examples/sites/demos/pc/app/bulletin-board/active-name-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/active-name-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { BulletinBoard as TinyBulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 const activeName = ref('2')
 const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
diff --git a/examples/sites/demos/pc/app/bulletin-board/active-name.vue b/examples/sites/demos/pc/app/bulletin-board/active-name.vue
index 00e05643f..cac876228 100644
--- a/examples/sites/demos/pc/app/bulletin-board/active-name.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/active-name.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { BulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBulletinBoard: BulletinBoard
+    TinyBulletinBoard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/bulletin-board/base-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/base-composition-api.vue
index 2d4b991b3..39a8fee21 100644
--- a/examples/sites/demos/pc/app/bulletin-board/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/base-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { BulletinBoard as TinyBulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
 const data = ref([
diff --git a/examples/sites/demos/pc/app/bulletin-board/base.vue b/examples/sites/demos/pc/app/bulletin-board/base.vue
index 58a6b8e83..bd3c42a6c 100644
--- a/examples/sites/demos/pc/app/bulletin-board/base.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/base.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { BulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBulletinBoard: BulletinBoard
+    TinyBulletinBoard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/bulletin-board/icon-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/icon-composition-api.vue
index e80a19c64..63ed56012 100644
--- a/examples/sites/demos/pc/app/bulletin-board/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/icon-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { BulletinBoard as TinyBulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 import { iconShare } from '@opentiny/vue-icon'
 
 const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
diff --git a/examples/sites/demos/pc/app/bulletin-board/icon.vue b/examples/sites/demos/pc/app/bulletin-board/icon.vue
index 8149e565e..f581a09bd 100644
--- a/examples/sites/demos/pc/app/bulletin-board/icon.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script lang="jsx">
-import { BulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 import { IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyBulletinBoard: BulletinBoard
+    TinyBulletinBoard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/bulletin-board/more-link-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/more-link-composition-api.vue
index 6365d57cc..0cf2dd090 100644
--- a/examples/sites/demos/pc/app/bulletin-board/more-link-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/more-link-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { BulletinBoard as TinyBulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 const moreLink = ref({ route: 'Alert', target: '_blank', text: '更多' })
 const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
diff --git a/examples/sites/demos/pc/app/bulletin-board/more-link.vue b/examples/sites/demos/pc/app/bulletin-board/more-link.vue
index ef62634b7..02055fe06 100644
--- a/examples/sites/demos/pc/app/bulletin-board/more-link.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/more-link.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { BulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBulletinBoard: BulletinBoard
+    TinyBulletinBoard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/bulletin-board/route-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/route-composition-api.vue
index 72b0df26d..2982bd95a 100644
--- a/examples/sites/demos/pc/app/bulletin-board/route-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/route-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { BulletinBoard as TinyBulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 const tabTitle = ref(['页面跳转'])
 const data = ref([
diff --git a/examples/sites/demos/pc/app/bulletin-board/route.vue b/examples/sites/demos/pc/app/bulletin-board/route.vue
index 647d965c6..5478ce5a2 100644
--- a/examples/sites/demos/pc/app/bulletin-board/route.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/route.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { BulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBulletinBoard: BulletinBoard
+    TinyBulletinBoard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/bulletin-board/tab-title-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/tab-title-composition-api.vue
index 2d4b991b3..39a8fee21 100644
--- a/examples/sites/demos/pc/app/bulletin-board/tab-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/tab-title-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { BulletinBoard as TinyBulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
 const data = ref([
diff --git a/examples/sites/demos/pc/app/bulletin-board/tab-title.vue b/examples/sites/demos/pc/app/bulletin-board/tab-title.vue
index 58a6b8e83..bd3c42a6c 100644
--- a/examples/sites/demos/pc/app/bulletin-board/tab-title.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/tab-title.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { BulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBulletinBoard: BulletinBoard
+    TinyBulletinBoard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/bulletin-board/title-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/title-composition-api.vue
index 9ca09037b..59557754a 100644
--- a/examples/sites/demos/pc/app/bulletin-board/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/title-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { BulletinBoard as TinyBulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
 const data = ref([
diff --git a/examples/sites/demos/pc/app/bulletin-board/title.vue b/examples/sites/demos/pc/app/bulletin-board/title.vue
index 33b0bb988..d59707209 100644
--- a/examples/sites/demos/pc/app/bulletin-board/title.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/title.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { BulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBulletinBoard: BulletinBoard
+    TinyBulletinBoard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/bulletin-board/url-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/url-composition-api.vue
index 391c6e34c..cfdb75d89 100644
--- a/examples/sites/demos/pc/app/bulletin-board/url-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/url-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { BulletinBoard as TinyBulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 const tabTitle = ref(['页面跳转'])
 const data = ref([
diff --git a/examples/sites/demos/pc/app/bulletin-board/url.vue b/examples/sites/demos/pc/app/bulletin-board/url.vue
index e35afca70..644b7cb89 100644
--- a/examples/sites/demos/pc/app/bulletin-board/url.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/url.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { BulletinBoard } from '@opentiny/vue'
+import { TinyBulletinBoard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBulletinBoard: BulletinBoard
+    TinyBulletinBoard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button-group/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/button-group/basic-usage-composition-api.vue
index 2ebe4d3c9..523921636 100644
--- a/examples/sites/demos/pc/app/button-group/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 const checkedVal = ref('Button1')
 const groupData = ref([
diff --git a/examples/sites/demos/pc/app/button-group/basic-usage.vue b/examples/sites/demos/pc/app/button-group/basic-usage.vue
index c4315e2b2..1dea9832f 100644
--- a/examples/sites/demos/pc/app/button-group/basic-usage.vue
+++ b/examples/sites/demos/pc/app/button-group/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button-group/button-group-multiple-composition-api.vue b/examples/sites/demos/pc/app/button-group/button-group-multiple-composition-api.vue
index 70b4c18fc..fbd0890cf 100644
--- a/examples/sites/demos/pc/app/button-group/button-group-multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/button-group-multiple-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 const checkedVal = ref('Button1')
 const groupData = ref([
diff --git a/examples/sites/demos/pc/app/button-group/button-group-multiple.vue b/examples/sites/demos/pc/app/button-group/button-group-multiple.vue
index e4da25888..6399bb7d7 100644
--- a/examples/sites/demos/pc/app/button-group/button-group-multiple.vue
+++ b/examples/sites/demos/pc/app/button-group/button-group-multiple.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button-group/change-event-composition-api.vue b/examples/sites/demos/pc/app/button-group/change-event-composition-api.vue
index 1fa95f777..81b6e8bd7 100644
--- a/examples/sites/demos/pc/app/button-group/change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/change-event-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup, Modal } from '@opentiny/vue'
+import { TinyButtonGroup, TinyModal } from '@opentiny/vue'
 
 const checkedVal = ref('Button1')
 const groupData = ref([
@@ -16,6 +16,6 @@ const groupData = ref([
 ])
 
 function handleChange(val) {
-  Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
+  TinyModal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/button-group/change-event.vue b/examples/sites/demos/pc/app/button-group/change-event.vue
index 8998d062f..38bc0a5a2 100644
--- a/examples/sites/demos/pc/app/button-group/change-event.vue
+++ b/examples/sites/demos/pc/app/button-group/change-event.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { ButtonGroup, Modal } from '@opentiny/vue'
+import { TinyButtonGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     handleChange(val) {
-      Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
+      TinyModal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue b/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue
index 1d857b5bb..a51f60d80 100644
--- a/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 const value = ref(1)
 const groupData = ref([
diff --git a/examples/sites/demos/pc/app/button-group/disabled.vue b/examples/sites/demos/pc/app/button-group/disabled.vue
index df07f5c9b..9c42d2abe 100644
--- a/examples/sites/demos/pc/app/button-group/disabled.vue
+++ b/examples/sites/demos/pc/app/button-group/disabled.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button-group/plain-composition-api.vue b/examples/sites/demos/pc/app/button-group/plain-composition-api.vue
index 67a46f562..7c1caf21e 100644
--- a/examples/sites/demos/pc/app/button-group/plain-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/plain-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 const groupData = ref([
   { text: 'Button1', value: 1 },
diff --git a/examples/sites/demos/pc/app/button-group/plain.vue b/examples/sites/demos/pc/app/button-group/plain.vue
index 5f75a3570..8d5d46973 100644
--- a/examples/sites/demos/pc/app/button-group/plain.vue
+++ b/examples/sites/demos/pc/app/button-group/plain.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button-group/show-more-composition-api.vue b/examples/sites/demos/pc/app/button-group/show-more-composition-api.vue
index d5271c17f..b31dc181a 100644
--- a/examples/sites/demos/pc/app/button-group/show-more-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/show-more-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 const checkedVal = ref('Button1')
 const groupData = ref([
diff --git a/examples/sites/demos/pc/app/button-group/show-more.vue b/examples/sites/demos/pc/app/button-group/show-more.vue
index 8572b5344..90a4b9868 100644
--- a/examples/sites/demos/pc/app/button-group/show-more.vue
+++ b/examples/sites/demos/pc/app/button-group/show-more.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button-group/size-composition-api.vue b/examples/sites/demos/pc/app/button-group/size-composition-api.vue
index 74404e14d..e93a69449 100644
--- a/examples/sites/demos/pc/app/button-group/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/size-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 const checkedVal = ref('Button1')
 const groupData = ref([
diff --git a/examples/sites/demos/pc/app/button-group/size.vue b/examples/sites/demos/pc/app/button-group/size.vue
index 88b91c4be..2c826f97e 100644
--- a/examples/sites/demos/pc/app/button-group/size.vue
+++ b/examples/sites/demos/pc/app/button-group/size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button-group/slot-default-composition-api.vue b/examples/sites/demos/pc/app/button-group/slot-default-composition-api.vue
index 052f3e858..71f5c35a5 100644
--- a/examples/sites/demos/pc/app/button-group/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/slot-default-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButton, TinyButtonGroup } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/button-group/slot-default.vue b/examples/sites/demos/pc/app/button-group/slot-default.vue
index 1b2708fa5..95f77a233 100644
--- a/examples/sites/demos/pc/app/button-group/slot-default.vue
+++ b/examples/sites/demos/pc/app/button-group/slot-default.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Button, ButtonGroup } from '@opentiny/vue'
+import { TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyButtonGroup: ButtonGroup
+    TinyButton,
+    TinyButtonGroup
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/button-group/slot-empty-composition-api.vue b/examples/sites/demos/pc/app/button-group/slot-empty-composition-api.vue
index 22223368c..0af1595f9 100644
--- a/examples/sites/demos/pc/app/button-group/slot-empty-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/slot-empty-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 const checkedVal = ref('')
 const groupData = ref([])
diff --git a/examples/sites/demos/pc/app/button-group/slot-empty.vue b/examples/sites/demos/pc/app/button-group/slot-empty.vue
index c92f51a5f..f50c5a7ac 100644
--- a/examples/sites/demos/pc/app/button-group/slot-empty.vue
+++ b/examples/sites/demos/pc/app/button-group/slot-empty.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button-group/sup-composition-api.vue b/examples/sites/demos/pc/app/button-group/sup-composition-api.vue
index 450e4df32..ac43891f0 100644
--- a/examples/sites/demos/pc/app/button-group/sup-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/sup-composition-api.vue
@@ -27,8 +27,8 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
-import { Tag as TinyTag } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 import { iconSearch, iconPlusCircle } from '@opentiny/vue-icon'
 
 const TinyIconPlusCircle = iconPlusCircle()
diff --git a/examples/sites/demos/pc/app/button-group/sup.vue b/examples/sites/demos/pc/app/button-group/sup.vue
index ff09397a1..1a1f173e7 100644
--- a/examples/sites/demos/pc/app/button-group/sup.vue
+++ b/examples/sites/demos/pc/app/button-group/sup.vue
@@ -26,15 +26,15 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
-import { Tag } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 import { iconSearch, iconPlusCircle } from '@opentiny/vue-icon'
 
 const IconPlusCircle = iconPlusCircle()
 export default {
   components: {
-    TinyTag: Tag,
-    TinyButtonGroup: ButtonGroup,
+    TinyTag,
+    TinyButtonGroup,
     IconPlusCircle
   },
   data() {
diff --git a/examples/sites/demos/pc/app/button-group/text-value-field-composition-api.vue b/examples/sites/demos/pc/app/button-group/text-value-field-composition-api.vue
index e86a4c4dc..8e5ac7289 100644
--- a/examples/sites/demos/pc/app/button-group/text-value-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/text-value-field-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 const checkedVal = ref(1)
 const textField = ref('text-key')
diff --git a/examples/sites/demos/pc/app/button-group/text-value-field.vue b/examples/sites/demos/pc/app/button-group/text-value-field.vue
index 4e3b086bf..11372ee30 100644
--- a/examples/sites/demos/pc/app/button-group/text-value-field.vue
+++ b/examples/sites/demos/pc/app/button-group/text-value-field.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { ButtonGroup } from '@opentiny/vue'
+import { TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButtonGroup: ButtonGroup
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button/autofocus.vue b/examples/sites/demos/pc/app/button/autofocus.vue
index d435dad6d..40c5cf505 100644
--- a/examples/sites/demos/pc/app/button/autofocus.vue
+++ b/examples/sites/demos/pc/app/button/autofocus.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/button/basic-usage.vue b/examples/sites/demos/pc/app/button/basic-usage.vue
index 65699c99a..c1556b382 100644
--- a/examples/sites/demos/pc/app/button/basic-usage.vue
+++ b/examples/sites/demos/pc/app/button/basic-usage.vue
@@ -30,14 +30,14 @@
 </template>
 
 <script>
-import { Button, Layout, Row } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
 import { IconDeleteL, IconYes, IconEditor, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyLayout: Layout,
-    TinyRow: Row
+    TinyButton,
+    TinyLayout,
+    TinyRow
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button/click-composition-api.vue b/examples/sites/demos/pc/app/button/click-composition-api.vue
index 1af9bb82c..9faa6359a 100644
--- a/examples/sites/demos/pc/app/button/click-composition-api.vue
+++ b/examples/sites/demos/pc/app/button/click-composition-api.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script setup>
-import { TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 function click() {
-  Modal.message({ message: 'click', status: 'info' })
+  TinyModal.message({ message: 'click', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/button/click.vue b/examples/sites/demos/pc/app/button/click.vue
index 1cd78f5f9..f17ad2fc6 100644
--- a/examples/sites/demos/pc/app/button/click.vue
+++ b/examples/sites/demos/pc/app/button/click.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     click() {
-      Modal.message({ message: 'click', status: 'info' })
+      TinyModal.message({ message: 'click', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/button/dynamic-disabled.vue b/examples/sites/demos/pc/app/button/dynamic-disabled.vue
index 07c24b811..4d2c504b4 100644
--- a/examples/sites/demos/pc/app/button/dynamic-disabled.vue
+++ b/examples/sites/demos/pc/app/button/dynamic-disabled.vue
@@ -29,15 +29,15 @@
 </template>
 
 <script>
-import { Button, Layout, Row, Switch } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow, TinySwitch } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinySwitch: Switch
+    TinyButton,
+    TinyLayout,
+    TinyRow,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button/ghost.vue b/examples/sites/demos/pc/app/button/ghost.vue
index ad303e10f..26602c632 100644
--- a/examples/sites/demos/pc/app/button/ghost.vue
+++ b/examples/sites/demos/pc/app/button/ghost.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/button/icon.vue b/examples/sites/demos/pc/app/button/icon.vue
index a05e03da2..79bc59ef1 100644
--- a/examples/sites/demos/pc/app/button/icon.vue
+++ b/examples/sites/demos/pc/app/button/icon.vue
@@ -22,14 +22,14 @@
 </template>
 
 <script>
-import { Button, Layout, Row } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
 import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyLayout: Layout,
-    TinyRow: Row
+    TinyButton,
+    TinyLayout,
+    TinyRow
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button/image.vue b/examples/sites/demos/pc/app/button/image.vue
index c8a20487c..8927925c2 100644
--- a/examples/sites/demos/pc/app/button/image.vue
+++ b/examples/sites/demos/pc/app/button/image.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button/loading.vue b/examples/sites/demos/pc/app/button/loading.vue
index 6c74a9833..7072b3f60 100644
--- a/examples/sites/demos/pc/app/button/loading.vue
+++ b/examples/sites/demos/pc/app/button/loading.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/button/reset-time.vue b/examples/sites/demos/pc/app/button/reset-time.vue
index 5b4836f78..08eb80d01 100644
--- a/examples/sites/demos/pc/app/button/reset-time.vue
+++ b/examples/sites/demos/pc/app/button/reset-time.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/button/size.vue b/examples/sites/demos/pc/app/button/size.vue
index 758a1270d..c997de704 100644
--- a/examples/sites/demos/pc/app/button/size.vue
+++ b/examples/sites/demos/pc/app/button/size.vue
@@ -39,14 +39,14 @@
 </template>
 
 <script>
-import { Button, Layout, Row } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
 import { IconDel, IconYes, IconEdit, IconMail, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyLayout: Layout,
-    TinyRow: Row
+    TinyButton,
+    TinyLayout,
+    TinyRow
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/button/text.vue b/examples/sites/demos/pc/app/button/text.vue
index 45e9e97f6..457d221d8 100644
--- a/examples/sites/demos/pc/app/button/text.vue
+++ b/examples/sites/demos/pc/app/button/text.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Button } from '@opentiny/vue'
+import { TinyButton } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue
index 9c52975aa..da15d92f9 100644
--- a/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([
   {
diff --git a/examples/sites/demos/pc/app/calendar-view/basic-usage.vue b/examples/sites/demos/pc/app/calendar-view/basic-usage.vue
index a66eefe1e..2bb22d457 100644
--- a/examples/sites/demos/pc/app/calendar-view/basic-usage.vue
+++ b/examples/sites/demos/pc/app/calendar-view/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue
index 8f2af3c03..9a0ceeb79 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([])
 
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-day-mark.vue b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark.vue
index 23f812ef9..4155911c5 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-day-mark.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
index 303fb92c7..060fbc73d 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([])
 
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue
index a3d1cdd79..bb47d4856 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
index 8cf337de3..206459841 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
@@ -15,31 +15,31 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyModal } from '@opentiny/vue'
 
 const eventslist = ref([])
 
 const prevWeekClick = (date) => {
-  Modal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' })
+  TinyModal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' })
 }
 
 const nextWeekClick = (date) => {
-  Modal.message({ message: `下一周按钮点击事件： ${date[0].value}`, status: 'info' })
+  TinyModal.message({ message: `下一周按钮点击事件： ${date[0].value}`, status: 'info' })
 }
 
 const weekChange = (weekDate) => {
-  Modal.message({ message: `周改变事件： ${weekDate[0].value}`, status: 'info' })
+  TinyModal.message({ message: `周改变事件： ${weekDate[0].value}`, status: 'info' })
 }
 
 const yearChange = (newVal, oldVal) => {
-  Modal.message({ message: `年改变事件: ${newVal}年, ${oldVal}年`, status: 'info' })
+  TinyModal.message({ message: `年改变事件: ${newVal}年, ${oldVal}年`, status: 'info' })
 }
 
 const monthChange = (newVal, oldVal) => {
-  Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
+  TinyModal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
 }
 
 const modeChange = (val) => {
-  Modal.message({ message: `模式切换事件: ${val}`, status: 'info' })
+  TinyModal.message({ message: `模式切换事件: ${val}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event.vue b/examples/sites/demos/pc/app/calendar-view/calendar-event.vue
index fab264e98..e5b28291a 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-event.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-event.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { CalendarView, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
@@ -27,22 +27,22 @@ export default {
   },
   methods: {
     prevWeekClick(date) {
-      Modal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' })
+      TinyModal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' })
     },
     nextWeekClick(date) {
-      Modal.message({ message: `下一周按钮点击事件： ${date[0].value}`, status: 'info' })
+      TinyModal.message({ message: `下一周按钮点击事件： ${date[0].value}`, status: 'info' })
     },
     weekChange(weekDate) {
-      Modal.message({ message: `周改变事件： ${weekDate[0].value}`, status: 'info' })
+      TinyModal.message({ message: `周改变事件： ${weekDate[0].value}`, status: 'info' })
     },
     yearChange(newVal, oldVal) {
-      Modal.message({ message: `年改变事件: ${newVal}年, ${oldVal}年`, status: 'info' })
+      TinyModal.message({ message: `年改变事件: ${newVal}年, ${oldVal}年`, status: 'info' })
     },
     monthChange(newVal, oldVal) {
-      Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
+      TinyModal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
     },
     modeChange(val) {
-      Modal.message({ message: `模式切换事件: ${val}`, status: 'info' })
+      TinyModal.message({ message: `模式切换事件: ${val}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue
index 36668b062..0b1cd6575 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue
@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([])
 </script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-mode.vue b/examples/sites/demos/pc/app/calendar-view/calendar-mode.vue
index f86bfbaf8..82716365f 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-mode.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-mode.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue
index 649eca597..44b3b5c3a 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([
   {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.vue b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.vue
index 1fb95097e..6f3160046 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue
index ffb74e53d..960e96c01 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue
@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([
   {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.vue b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.vue
index 7076b4323..7414cb2ee 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue
index 09ad9dc94..c014a8bf8 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([
   {
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.vue b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.vue
index cd5a38d46..52c036fe4 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue
index 7264fddea..5bf1ef0c7 100644
--- a/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup lang="ts">
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.vue b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.vue
index 2a32b8f85..ca23161f0 100644
--- a/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.vue
+++ b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {}
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue
index 75dec2bc1..63ab9e149 100644
--- a/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue
@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([])
 
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.vue b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.vue
index f2ea1d9c3..668da785c 100644
--- a/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.vue
+++ b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue
index 616f1c59a..d583f8f08 100644
--- a/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([
   {
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-header.vue b/examples/sites/demos/pc/app/calendar-view/custom-header.vue
index 7585973fa..b2d3c6d74 100644
--- a/examples/sites/demos/pc/app/calendar-view/custom-header.vue
+++ b/examples/sites/demos/pc/app/calendar-view/custom-header.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { TinyCalendarView } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
index 5bc650ace..085450e90 100644
--- a/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
@@ -13,11 +13,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyModal } from '@opentiny/vue'
 
 const eventslist = ref([])
 
 const selectedDateChange = (date) => {
-  Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
+  TinyModal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/calendar-view/multi-select.vue b/examples/sites/demos/pc/app/calendar-view/multi-select.vue
index 37c4e1062..6a40a8461 100644
--- a/examples/sites/demos/pc/app/calendar-view/multi-select.vue
+++ b/examples/sites/demos/pc/app/calendar-view/multi-select.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { CalendarView, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView
+    TinyCalendarView
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     selectedDateChange(date) {
-      Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
+      TinyModal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
index 9ca8cda40..c2ae96292 100644
--- a/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CalendarView as TinyCalendarView, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyButton, TinyModal } from '@opentiny/vue'
 
 const workingDays = ref([])
 const offDays = ref([])
@@ -35,7 +35,7 @@ const map = {
 
 const setDays = (type) => {
   if (!selectedDate.value.length) {
-    Modal.message({ message: '请选择日期', status: 'info' })
+    TinyModal.message({ message: '请选择日期', status: 'info' })
     return
   }
   map[type].value.push(...selectedDate.value)
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day.vue b/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
index 33fb4fbcf..99d86dbe4 100644
--- a/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { CalendarView, Button, Modal } from '@opentiny/vue'
+import { TinyCalendarView, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendarView: CalendarView,
-    TinyButton: Button
+    TinyCalendarView,
+    TinyButton
   },
   data() {
     return {
@@ -37,7 +37,7 @@ export default {
   methods: {
     setDays(type) {
       if (!this.selectedDate.length) {
-        Modal.message({ message: '请选择日期', status: 'info' })
+        TinyModal.message({ message: '请选择日期', status: 'info' })
         return
       }
       this[type].push(...this.selectedDate)
diff --git a/examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue
index 3c3d8094f..2dc07d6c7 100644
--- a/examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/basic-usage-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Calendar as TinyCalendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/basic-usage.vue b/examples/sites/demos/pc/app/calendar/basic-usage.vue
index e0946e2b8..4656905da 100644
--- a/examples/sites/demos/pc/app/calendar/basic-usage.vue
+++ b/examples/sites/demos/pc/app/calendar/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Calendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendar: Calendar
+    TinyCalendar
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue b/examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue
index 85617e13f..b4eaf691e 100644
--- a/examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/calendar-mode-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Calendar as TinyCalendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/calendar-mode.vue b/examples/sites/demos/pc/app/calendar/calendar-mode.vue
index d9c697553..e017fefa0 100644
--- a/examples/sites/demos/pc/app/calendar/calendar-mode.vue
+++ b/examples/sites/demos/pc/app/calendar/calendar-mode.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Calendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendar: Calendar
+    TinyCalendar
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
index 44b76e330..c1bd805c2 100644
--- a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Calendar as TinyCalendar, Button as TinyButton } from '@opentiny/vue'
+import { TinyCalendar, TinyButton } from '@opentiny/vue'
 
 function toToday(scope) {
   let year = new Date().getFullYear()
diff --git a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
index 4bdb87d67..f73439d27 100644
--- a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Calendar, Button } from '@opentiny/vue'
+import { TinyCalendar, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendar: Calendar,
-    TinyButton: Button
+    TinyCalendar,
+    TinyButton
   },
   methods: {
     toToday(scope) {
diff --git a/examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue b/examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue
index 0c3bd132d..dadd2b0cd 100644
--- a/examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-day-cell-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Calendar as TinyCalendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 
 const eventslist = ref([
   {
diff --git a/examples/sites/demos/pc/app/calendar/custom-day-cell.vue b/examples/sites/demos/pc/app/calendar/custom-day-cell.vue
index 343d05280..ce855ad28 100644
--- a/examples/sites/demos/pc/app/calendar/custom-day-cell.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-day-cell.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Calendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendar: Calendar
+    TinyCalendar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue
index 05c840b6b..a2717f403 100644
--- a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Calendar as TinyCalendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 
 const eventslist = ref([
   {
diff --git a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue
index 24fd359d4..919fd9b35 100644
--- a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue
+++ b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Calendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendar: Calendar
+    TinyCalendar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue b/examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue
index 4a0f86d0e..5687f9a25 100644
--- a/examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/show-selected-date-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Calendar as TinyCalendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/calendar/show-selected-date.vue b/examples/sites/demos/pc/app/calendar/show-selected-date.vue
index eff34192c..076c835d9 100644
--- a/examples/sites/demos/pc/app/calendar/show-selected-date.vue
+++ b/examples/sites/demos/pc/app/calendar/show-selected-date.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Calendar } from '@opentiny/vue'
+import { TinyCalendar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCalendar: Calendar
+    TinyCalendar
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
index 29e45e817..46fa04cd5 100644
--- a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
diff --git a/examples/sites/demos/pc/app/card/basic-usage.vue b/examples/sites/demos/pc/app/card/basic-usage.vue
index 2b28289b0..0f472b937 100644
--- a/examples/sites/demos/pc/app/card/basic-usage.vue
+++ b/examples/sites/demos/pc/app/card/basic-usage.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue b/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue
index 6dc3879bd..9936f99d0 100644
--- a/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 import { ref } from 'vue'
 
diff --git a/examples/sites/demos/pc/app/card/card-disabled.vue b/examples/sites/demos/pc/app/card/card-disabled.vue
index 63814b59f..c07a89627 100644
--- a/examples/sites/demos/pc/app/card/card-disabled.vue
+++ b/examples/sites/demos/pc/app/card/card-disabled.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/card-events-composition-api.vue b/examples/sites/demos/pc/app/card/card-events-composition-api.vue
index 51cafdb41..c26906032 100644
--- a/examples/sites/demos/pc/app/card/card-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-events-composition-api.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard, Modal } from '@opentiny/vue'
+import { TinyCard, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 import { ref } from 'vue'
@@ -45,13 +45,13 @@ const options = ref([
   }
 ])
 function change(val) {
-  Modal.message({
+  TinyModal.message({
     message: val.toString(),
     status: 'info'
   })
 }
 function iconClick(item, index) {
-  Modal.message({
+  TinyModal.message({
     message: `当前点击的是第${index + 1}个图标`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/card/card-events.vue b/examples/sites/demos/pc/app/card/card-events.vue
index 965509fb3..c7404b1e7 100644
--- a/examples/sites/demos/pc/app/card/card-events.vue
+++ b/examples/sites/demos/pc/app/card/card-events.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Card, Modal } from '@opentiny/vue'
+import { TinyCard, TinyModal } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
@@ -52,13 +52,13 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({
+      TinyModal.message({
         message: val.toString(),
         status: 'info'
       })
     },
     iconClick(item, index) {
-      Modal.message({
+      TinyModal.message({
         message: `当前点击的是第${index + 1}个图标`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/card/card-group-composition-api.vue b/examples/sites/demos/pc/app/card/card-group-composition-api.vue
index 52b40ac2e..34c651ff1 100644
--- a/examples/sites/demos/pc/app/card/card-group-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-group-composition-api.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard, CardGroup as TinyCardGroup } from '@opentiny/vue'
+import { TinyCard, TinyCardGroup } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 import { ref } from 'vue'
diff --git a/examples/sites/demos/pc/app/card/card-group.vue b/examples/sites/demos/pc/app/card/card-group.vue
index 2a8088eec..7ffca04ed 100644
--- a/examples/sites/demos/pc/app/card/card-group.vue
+++ b/examples/sites/demos/pc/app/card/card-group.vue
@@ -30,13 +30,13 @@
 </template>
 
 <script>
-import { Card, CardGroup } from '@opentiny/vue'
+import { TinyCard, TinyCardGroup } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card,
-    TinyCardGroup: CardGroup
+    TinyCard,
+    TinyCardGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/card-select-composition-api.vue b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
index 59d8a4751..4e1cfdae1 100644
--- a/examples/sites/demos/pc/app/card/card-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard, CardGroup as TinyCardGroup, Select as TinySelect } from '@opentiny/vue'
+import { TinyCard, TinyCardGroup, TinySelect } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const radioValue = ref('TinyVue')
diff --git a/examples/sites/demos/pc/app/card/card-select.vue b/examples/sites/demos/pc/app/card/card-select.vue
index a69db653b..892f39225 100644
--- a/examples/sites/demos/pc/app/card/card-select.vue
+++ b/examples/sites/demos/pc/app/card/card-select.vue
@@ -53,13 +53,13 @@
 </template>
 
 <script>
-import { Card, CardGroup, Select } from '@opentiny/vue'
+import { TinyCard, TinyCardGroup, TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card,
-    TinyCardGroup: CardGroup,
-    TinySelect: Select
+    TinyCard,
+    TinyCardGroup,
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/card-size-composition-api.vue b/examples/sites/demos/pc/app/card/card-size-composition-api.vue
index 8fc54ac4e..137bbc164 100644
--- a/examples/sites/demos/pc/app/card/card-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-size-composition-api.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDeleteL, IconEditor, IconSortTriangle, IconFilletExternalLink } from '@opentiny/vue-icon'
 import { ref } from 'vue'
 
diff --git a/examples/sites/demos/pc/app/card/card-size.vue b/examples/sites/demos/pc/app/card/card-size.vue
index 1106ffbeb..259b2d0eb 100644
--- a/examples/sites/demos/pc/app/card/card-size.vue
+++ b/examples/sites/demos/pc/app/card/card-size.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDeleteL, IconEditor, IconSortTriangle, IconFilletExternalLink } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/card-status-composition-api.vue b/examples/sites/demos/pc/app/card/card-status-composition-api.vue
index e68bba417..7535e6219 100644
--- a/examples/sites/demos/pc/app/card/card-status-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-status-composition-api.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/card/card-status.vue b/examples/sites/demos/pc/app/card/card-status.vue
index b76830558..9373afc68 100644
--- a/examples/sites/demos/pc/app/card/card-status.vue
+++ b/examples/sites/demos/pc/app/card/card-status.vue
@@ -38,11 +38,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {}
diff --git a/examples/sites/demos/pc/app/card/card-type-composition-api.vue b/examples/sites/demos/pc/app/card/card-type-composition-api.vue
index e9d331eee..5865b5e3d 100644
--- a/examples/sites/demos/pc/app/card/card-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-type-composition-api.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const dsj = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
diff --git a/examples/sites/demos/pc/app/card/card-type.vue b/examples/sites/demos/pc/app/card/card-type.vue
index e049333c7..c2928e304 100644
--- a/examples/sites/demos/pc/app/card/card-type.vue
+++ b/examples/sites/demos/pc/app/card/card-type.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
index f7213db9f..aafe33208 100644
--- a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard, CardGroup as TinyCardGroup } from '@opentiny/vue'
+import { TinyCard, TinyCardGroup } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const radioValue = ref('TinyVue')
diff --git a/examples/sites/demos/pc/app/card/check-mode.vue b/examples/sites/demos/pc/app/card/check-mode.vue
index be6bde91d..5ec34bf51 100644
--- a/examples/sites/demos/pc/app/card/check-mode.vue
+++ b/examples/sites/demos/pc/app/card/check-mode.vue
@@ -54,12 +54,12 @@
 </template>
 
 <script>
-import { Card, CardGroup } from '@opentiny/vue'
+import { TinyCard, TinyCardGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card,
-    TinyCardGroup: CardGroup
+    TinyCard,
+    TinyCardGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue b/examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue
index 265567af9..199e4b6f9 100644
--- a/examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const radioValue = ref(false)
diff --git a/examples/sites/demos/pc/app/card/check-type-checkbox.vue b/examples/sites/demos/pc/app/card/check-type-checkbox.vue
index 02be4f026..07a553e3f 100644
--- a/examples/sites/demos/pc/app/card/check-type-checkbox.vue
+++ b/examples/sites/demos/pc/app/card/check-type-checkbox.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue b/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue
index 1e2ea5d61..2b4c9333f 100644
--- a/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const value = ref('1')
diff --git a/examples/sites/demos/pc/app/card/check-type-radio.vue b/examples/sites/demos/pc/app/card/check-type-radio.vue
index 16b8266a7..cd413ccbd 100644
--- a/examples/sites/demos/pc/app/card/check-type-radio.vue
+++ b/examples/sites/demos/pc/app/card/check-type-radio.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
index b39215682..b5ae3b06a 100644
--- a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 import { ref } from 'vue'
 
diff --git a/examples/sites/demos/pc/app/card/custom-class.vue b/examples/sites/demos/pc/app/card/custom-class.vue
index 4af349ba8..525c35457 100644
--- a/examples/sites/demos/pc/app/card/custom-class.vue
+++ b/examples/sites/demos/pc/app/card/custom-class.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue b/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue
index 11635e623..0eac59b95 100644
--- a/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 import { ref } from 'vue'
diff --git a/examples/sites/demos/pc/app/card/operate-bar.vue b/examples/sites/demos/pc/app/card/operate-bar.vue
index ea5f5314c..882f6e6cc 100644
--- a/examples/sites/demos/pc/app/card/operate-bar.vue
+++ b/examples/sites/demos/pc/app/card/operate-bar.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Card } from '@opentiny/vue'
+import { TinyCard } from '@opentiny/vue'
 import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card
+    TinyCard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/card/slot-composition-api.vue b/examples/sites/demos/pc/app/card/slot-composition-api.vue
index 2cc870dab..9ffabf30b 100644
--- a/examples/sites/demos/pc/app/card/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/slot-composition-api.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import { Card as TinyCard, Tag as TinyTag } from '@opentiny/vue'
+import { TinyCard, TinyTag } from '@opentiny/vue'
 import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
 import { ref } from 'vue'
 
diff --git a/examples/sites/demos/pc/app/card/slot.vue b/examples/sites/demos/pc/app/card/slot.vue
index b398b6afd..5a7a40df9 100644
--- a/examples/sites/demos/pc/app/card/slot.vue
+++ b/examples/sites/demos/pc/app/card/slot.vue
@@ -49,13 +49,13 @@
 </template>
 
 <script>
-import { Card, Tag } from '@opentiny/vue'
+import { TinyCard, TinyTag } from '@opentiny/vue'
 import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCard: Card,
-    TinyTag: Tag,
+    TinyCard,
+    TinyTag,
     TinyIconChevronDown: IconChevronDown(),
     TinyIconChevronUp: IconChevronUp()
   },
diff --git a/examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue b/examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue
index 25064a5ac..df89dd715 100644
--- a/examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/autoplay-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/autoplay.vue b/examples/sites/demos/pc/app/carousel/autoplay.vue
index 96f775d35..da22b0936 100644
--- a/examples/sites/demos/pc/app/carousel/autoplay.vue
+++ b/examples/sites/demos/pc/app/carousel/autoplay.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue
index b2bbec5f8..e5c679637 100644
--- a/examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/basic-usage.vue b/examples/sites/demos/pc/app/carousel/basic-usage.vue
index 3c71b4d03..3ab07da11 100644
--- a/examples/sites/demos/pc/app/carousel/basic-usage.vue
+++ b/examples/sites/demos/pc/app/carousel/basic-usage.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue b/examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue
index 314dbbfc6..2cb172be4 100644
--- a/examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/card-mode-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/card-mode.vue b/examples/sites/demos/pc/app/carousel/card-mode.vue
index 3b94555fc..9748d8ace 100644
--- a/examples/sites/demos/pc/app/carousel/card-mode.vue
+++ b/examples/sites/demos/pc/app/carousel/card-mode.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/card-show-composition-api.vue b/examples/sites/demos/pc/app/carousel/card-show-composition-api.vue
index 1be37ba6f..017dfb281 100644
--- a/examples/sites/demos/pc/app/carousel/card-show-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/card-show-composition-api.vue
@@ -32,12 +32,7 @@
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import {
-  Carousel as TinyCarousel,
-  CarouselItem as TinyCarouselItem,
-  Card as TinyCard,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem, TinyCard, TinyButton } from '@opentiny/vue'
 import { IconChevronRight, IconChevronLeft } from '@opentiny/vue-icon'
 
 const TinyIconChevronRight = IconChevronRight()
diff --git a/examples/sites/demos/pc/app/carousel/card-show.vue b/examples/sites/demos/pc/app/carousel/card-show.vue
index dcc3b3b72..16263b8f4 100644
--- a/examples/sites/demos/pc/app/carousel/card-show.vue
+++ b/examples/sites/demos/pc/app/carousel/card-show.vue
@@ -31,15 +31,15 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem, Card, Button } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem, TinyCard, TinyButton } from '@opentiny/vue'
 import { IconChevronRight, IconChevronLeft } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem,
-    TinyCard: Card,
-    TinyButton: Button
+    TinyCarousel,
+    TinyCarouselItem,
+    TinyCard,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue
index d59ac5822..9d51be148 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-always-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue
index c24a6a582..7588b89ca 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-always.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue
index ecbc9814f..13c23635a 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-hover-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue
index 6bbe9633e..8830c12aa 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-hover.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue
index 92d4e8623..664fc8840 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-never-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue b/examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue
index b2019d5d2..ba40db089 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-arrow-never.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue b/examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue
index 2f7546989..05c1a9a06 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-events-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 const curValue = ref(0)
 const preValue = ref(0)
diff --git a/examples/sites/demos/pc/app/carousel/carousel-events.vue b/examples/sites/demos/pc/app/carousel/carousel-events.vue
index 4244bdbba..ecb54d0ab 100644
--- a/examples/sites/demos/pc/app/carousel/carousel-events.vue
+++ b/examples/sites/demos/pc/app/carousel/carousel-events.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue b/examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue
index 4b90f3eed..0d67af387 100644
--- a/examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/close-loop-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/close-loop.vue b/examples/sites/demos/pc/app/carousel/close-loop.vue
index df3db61a0..c9295c929 100644
--- a/examples/sites/demos/pc/app/carousel/close-loop.vue
+++ b/examples/sites/demos/pc/app/carousel/close-loop.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue b/examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue
index 9b61a5f0c..4be868ad3 100644
--- a/examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/custom-height-composition-api.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/custom-height.vue b/examples/sites/demos/pc/app/carousel/custom-height.vue
index faf8bf8e2..9d297c7e7 100644
--- a/examples/sites/demos/pc/app/carousel/custom-height.vue
+++ b/examples/sites/demos/pc/app/carousel/custom-height.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue b/examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue
index 86dbfda4d..183ff2c2f 100644
--- a/examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/dialog-show-composition-api.vue
@@ -23,12 +23,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Carousel as TinyCarousel,
-  CarouselItem as TinyCarouselItem,
-  Button as TinyButton,
-  DialogBox as TinyDialogBox
-} from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem, TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 function handleSubmit() {
diff --git a/examples/sites/demos/pc/app/carousel/dialog-show.vue b/examples/sites/demos/pc/app/carousel/dialog-show.vue
index b5b43b7b8..33e829012 100644
--- a/examples/sites/demos/pc/app/carousel/dialog-show.vue
+++ b/examples/sites/demos/pc/app/carousel/dialog-show.vue
@@ -22,14 +22,14 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem, Button, DialogBox } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem, TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem,
-    TinyDialogBox: DialogBox,
-    TinyButton: Button
+    TinyCarousel,
+    TinyCarouselItem,
+    TinyDialogBox,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue b/examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue
index 94161706e..16237ce62 100644
--- a/examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/indicator-trigger-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/indicator-trigger.vue b/examples/sites/demos/pc/app/carousel/indicator-trigger.vue
index e8048c07b..7e3dbd08a 100644
--- a/examples/sites/demos/pc/app/carousel/indicator-trigger.vue
+++ b/examples/sites/demos/pc/app/carousel/indicator-trigger.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue b/examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue
index af6bccc25..2a1942d23 100644
--- a/examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/initial-index-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/initial-index.vue b/examples/sites/demos/pc/app/carousel/initial-index.vue
index c83da1fcc..a130ccf7d 100644
--- a/examples/sites/demos/pc/app/carousel/initial-index.vue
+++ b/examples/sites/demos/pc/app/carousel/initial-index.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue b/examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue
index b64f3deb3..52bb94d5d 100644
--- a/examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/manual-play-composition-api.vue
@@ -21,13 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Carousel as TinyCarousel,
-  CarouselItem as TinyCarouselItem,
-  Numeric as TinyNumeric,
-  Button as TinyButton,
-  ButtonGroup as TinyButtonGroup
-} from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem, TinyNumeric, TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 const index = ref(3)
 const carouselRef = ref()
diff --git a/examples/sites/demos/pc/app/carousel/manual-play.vue b/examples/sites/demos/pc/app/carousel/manual-play.vue
index 5de0d50c8..e5901c077 100644
--- a/examples/sites/demos/pc/app/carousel/manual-play.vue
+++ b/examples/sites/demos/pc/app/carousel/manual-play.vue
@@ -20,15 +20,15 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem, Numeric, Button, ButtonGroup } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem, TinyNumeric, TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem,
-    TinyNumeric: Numeric,
-    TinyButton: Button,
-    TinyButtonGroup: ButtonGroup
+    TinyCarousel,
+    TinyCarouselItem,
+    TinyNumeric,
+    TinyButton,
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue b/examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue
index 1396319d4..d10330c6b 100644
--- a/examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/play-interval-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/play-interval.vue b/examples/sites/demos/pc/app/carousel/play-interval.vue
index 21a4da60e..3f2959862 100644
--- a/examples/sites/demos/pc/app/carousel/play-interval.vue
+++ b/examples/sites/demos/pc/app/carousel/play-interval.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue b/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue
index 576ef9d5d..bfc44bbf0 100644
--- a/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/show-title.vue b/examples/sites/demos/pc/app/carousel/show-title.vue
index d7e2df448..2efc2921a 100644
--- a/examples/sites/demos/pc/app/carousel/show-title.vue
+++ b/examples/sites/demos/pc/app/carousel/show-title.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue b/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue
index c397c101c..3a69825bd 100644
--- a/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/swipeable.vue b/examples/sites/demos/pc/app/carousel/swipeable.vue
index 0cbe61fcb..941834dea 100644
--- a/examples/sites/demos/pc/app/carousel/swipeable.vue
+++ b/examples/sites/demos/pc/app/carousel/swipeable.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue b/examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue
index 9d2aca50f..79f830e89 100644
--- a/examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue
+++ b/examples/sites/demos/pc/app/carousel/up-down-carousel-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/carousel/up-down-carousel.vue b/examples/sites/demos/pc/app/carousel/up-down-carousel.vue
index de424b8a4..aa4859c7d 100644
--- a/examples/sites/demos/pc/app/carousel/up-down-carousel.vue
+++ b/examples/sites/demos/pc/app/carousel/up-down-carousel.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Carousel, CarouselItem } from '@opentiny/vue'
+import { TinyCarousel, TinyCarouselItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCarousel: Carousel,
-    TinyCarouselItem: CarouselItem
+    TinyCarousel,
+    TinyCarouselItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/cascader-panel/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/cascader-panel/basic-usage-composition-api.vue
index 23d6dc934..b7151a876 100644
--- a/examples/sites/demos/pc/app/cascader-panel/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CascaderPanel as TinyCascaderPanel } from '@opentiny/vue'
+import { TinyCascaderPanel } from '@opentiny/vue'
 
 const value = ref('')
 
diff --git a/examples/sites/demos/pc/app/cascader-panel/basic-usage.vue b/examples/sites/demos/pc/app/cascader-panel/basic-usage.vue
index c03746240..078ca8b1d 100644
--- a/examples/sites/demos/pc/app/cascader-panel/basic-usage.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CascaderPanel } from '@opentiny/vue'
+import { TinyCascaderPanel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderPanel: CascaderPanel
+    TinyCascaderPanel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader-panel/cascader-panel-props-composition-api.vue b/examples/sites/demos/pc/app/cascader-panel/cascader-panel-props-composition-api.vue
index 471b83928..cef4d7ebd 100644
--- a/examples/sites/demos/pc/app/cascader-panel/cascader-panel-props-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/cascader-panel-props-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CascaderPanel as TinyCascaderPanel } from '@opentiny/vue'
+import { TinyCascaderPanel } from '@opentiny/vue'
 
 const value = ref('')
 const optionsCascader = ref([
diff --git a/examples/sites/demos/pc/app/cascader-panel/cascader-panel-props.vue b/examples/sites/demos/pc/app/cascader-panel/cascader-panel-props.vue
index f1ae68839..5abbdbff0 100644
--- a/examples/sites/demos/pc/app/cascader-panel/cascader-panel-props.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/cascader-panel-props.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { CascaderPanel } from '@opentiny/vue'
+import { TinyCascaderPanel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderPanel: CascaderPanel
+    TinyCascaderPanel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader-panel/change-composition-api.vue b/examples/sites/demos/pc/app/cascader-panel/change-composition-api.vue
index f40cffb26..e4ae01d67 100644
--- a/examples/sites/demos/pc/app/cascader-panel/change-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/change-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CascaderPanel as TinyCascaderPanel, Modal, Button as TinyButton } from '@opentiny/vue'
+import { TinyCascaderPanel, TinyModal, TinyButton } from '@opentiny/vue'
 
 const value = ref('')
 const optionsCascader = ref([
@@ -224,14 +224,14 @@ function change(value) {
     mess = checkVal[0].label
   }
 
-  Modal.message({
+  TinyModal.message({
     message: 'change 事件，当前选中的值为:' + mess + '；传入的值为:' + value,
     status: 'info'
   })
 }
 
 function expandChange(value) {
-  Modal.message({ message: `节点展开：${value}`, status: 'info' })
+  TinyModal.message({ message: `节点展开：${value}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/cascader-panel/change.vue b/examples/sites/demos/pc/app/cascader-panel/change.vue
index 4a41a7086..b371a7eb4 100644
--- a/examples/sites/demos/pc/app/cascader-panel/change.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/change.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { CascaderPanel, Modal, Button } from '@opentiny/vue'
+import { TinyCascaderPanel, TinyModal, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderPanel: CascaderPanel,
-    TinyButton: Button
+    TinyCascaderPanel,
+    TinyButton
   },
   data() {
     return {
@@ -223,7 +223,7 @@ export default {
       this.$refs.cascaderPanel.clearCheckedNodes()
     },
     expandChange(value) {
-      Modal.message({ message: `节点展开：${value}`, status: 'info' })
+      TinyModal.message({ message: `节点展开：${value}`, status: 'info' })
     },
     change(value) {
       const checkVal = this.$refs.cascaderPanel.getCheckedNodes()
@@ -233,7 +233,7 @@ export default {
         mess = checkVal[0].label
       }
 
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，当前选中的值为:' + mess + '；传入的值为:' + value,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/cascader-panel/custom-option-content-composition-api.vue b/examples/sites/demos/pc/app/cascader-panel/custom-option-content-composition-api.vue
index e07b8089b..34ab96fc2 100644
--- a/examples/sites/demos/pc/app/cascader-panel/custom-option-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/custom-option-content-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CascaderPanel as TinyCascaderPanel } from '@opentiny/vue'
+import { TinyCascaderPanel } from '@opentiny/vue'
 
 const optionsCascader = ref([
   {
diff --git a/examples/sites/demos/pc/app/cascader-panel/custom-option-content.vue b/examples/sites/demos/pc/app/cascader-panel/custom-option-content.vue
index 0a8ac6198..72c57caef 100644
--- a/examples/sites/demos/pc/app/cascader-panel/custom-option-content.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/custom-option-content.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { CascaderPanel } from '@opentiny/vue'
+import { TinyCascaderPanel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderPanel: CascaderPanel
+    TinyCascaderPanel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader-panel/multiple-composition-api.vue b/examples/sites/demos/pc/app/cascader-panel/multiple-composition-api.vue
index 1e89bcd76..44ff0e536 100644
--- a/examples/sites/demos/pc/app/cascader-panel/multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/multiple-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CascaderPanel as TinyCascaderPanel } from '@opentiny/vue'
+import { TinyCascaderPanel } from '@opentiny/vue'
 
 const value = ref([
   ['zhinan', 'anzhuang', 'xiangmudengji'],
diff --git a/examples/sites/demos/pc/app/cascader-panel/multiple.vue b/examples/sites/demos/pc/app/cascader-panel/multiple.vue
index 168d0896f..d65b6584b 100644
--- a/examples/sites/demos/pc/app/cascader-panel/multiple.vue
+++ b/examples/sites/demos/pc/app/cascader-panel/multiple.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { CascaderPanel } from '@opentiny/vue'
+import { TinyCascaderPanel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascaderPanel: CascaderPanel
+    TinyCascaderPanel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly-composition-api.vue b/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly-composition-api.vue
index 9b1c52ba6..387d74a10 100644
--- a/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 let id = 0
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.vue b/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.vue
index 76bf9194c..c33c4bda3 100644
--- a/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.vue
+++ b/examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     let id = 0
diff --git a/examples/sites/demos/pc/app/cascader/auto-load-composition-api.vue b/examples/sites/demos/pc/app/cascader/auto-load-composition-api.vue
index d4127aaf9..02aac413e 100644
--- a/examples/sites/demos/pc/app/cascader/auto-load-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/auto-load-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 let id = 0
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/cascader/auto-load.vue b/examples/sites/demos/pc/app/cascader/auto-load.vue
index 23a4cca6f..5c7d056e9 100644
--- a/examples/sites/demos/pc/app/cascader/auto-load.vue
+++ b/examples/sites/demos/pc/app/cascader/auto-load.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     let id = 0
diff --git a/examples/sites/demos/pc/app/cascader/auto-size-composition-api.vue b/examples/sites/demos/pc/app/cascader/auto-size-composition-api.vue
index 2e7bee22d..ca7429bc3 100644
--- a/examples/sites/demos/pc/app/cascader/auto-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/auto-size-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const value = ref('anzhuangcli')
 const options = ref([
diff --git a/examples/sites/demos/pc/app/cascader/auto-size.vue b/examples/sites/demos/pc/app/cascader/auto-size.vue
index 8c6c6cfae..3ea15e826 100644
--- a/examples/sites/demos/pc/app/cascader/auto-size.vue
+++ b/examples/sites/demos/pc/app/cascader/auto-size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/cascader/basic-usage-composition-api.vue
index 442430755..120d8e6d1 100644
--- a/examples/sites/demos/pc/app/cascader/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const value = ref('anzhuangcli')
 const options = ref([
diff --git a/examples/sites/demos/pc/app/cascader/basic-usage.vue b/examples/sites/demos/pc/app/cascader/basic-usage.vue
index 25d6df008..602bd8727 100644
--- a/examples/sites/demos/pc/app/cascader/basic-usage.vue
+++ b/examples/sites/demos/pc/app/cascader/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/check-strictly-composition-api.vue b/examples/sites/demos/pc/app/cascader/check-strictly-composition-api.vue
index ce9c79d7f..974fb1f5f 100644
--- a/examples/sites/demos/pc/app/cascader/check-strictly-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/check-strictly-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const value = ref(['zhinan', 'anzhuang', 'xiangmudengji'])
 const options = ref([
diff --git a/examples/sites/demos/pc/app/cascader/check-strictly-multiple-composition-api.vue b/examples/sites/demos/pc/app/cascader/check-strictly-multiple-composition-api.vue
index cd73cd20c..8dfd1786f 100644
--- a/examples/sites/demos/pc/app/cascader/check-strictly-multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/check-strictly-multiple-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const value = ref([
   ['zhinan', 'anzhuang'],
diff --git a/examples/sites/demos/pc/app/cascader/check-strictly-multiple.vue b/examples/sites/demos/pc/app/cascader/check-strictly-multiple.vue
index 73ca47118..a1e56210c 100644
--- a/examples/sites/demos/pc/app/cascader/check-strictly-multiple.vue
+++ b/examples/sites/demos/pc/app/cascader/check-strictly-multiple.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/check-strictly.vue b/examples/sites/demos/pc/app/cascader/check-strictly.vue
index ae3f3c3d7..d37fd96a8 100644
--- a/examples/sites/demos/pc/app/cascader/check-strictly.vue
+++ b/examples/sites/demos/pc/app/cascader/check-strictly.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/clearable-composition-api.vue b/examples/sites/demos/pc/app/cascader/clearable-composition-api.vue
index 0dc292a63..9414886ff 100644
--- a/examples/sites/demos/pc/app/cascader/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/clearable-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const value = ref(['zhinan', 'anzhuang', 'xiangmudengji'])
 const options = ref([
diff --git a/examples/sites/demos/pc/app/cascader/clearable.vue b/examples/sites/demos/pc/app/cascader/clearable.vue
index a59f11bc6..811eeb8f2 100644
--- a/examples/sites/demos/pc/app/cascader/clearable.vue
+++ b/examples/sites/demos/pc/app/cascader/clearable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/collapse-tags-composition-api.vue b/examples/sites/demos/pc/app/cascader/collapse-tags-composition-api.vue
index 849dfc0d6..851bcb850 100644
--- a/examples/sites/demos/pc/app/cascader/collapse-tags-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/collapse-tags-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const value = ref([
   ['zhinan', 'anzhuang', 'huanjingzhunbei'],
diff --git a/examples/sites/demos/pc/app/cascader/collapse-tags.vue b/examples/sites/demos/pc/app/cascader/collapse-tags.vue
index 561ebb9d6..dc03fed56 100644
--- a/examples/sites/demos/pc/app/cascader/collapse-tags.vue
+++ b/examples/sites/demos/pc/app/cascader/collapse-tags.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/default-multiple-composition-api.vue b/examples/sites/demos/pc/app/cascader/default-multiple-composition-api.vue
index f1750e40e..62f0bf8c0 100644
--- a/examples/sites/demos/pc/app/cascader/default-multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/default-multiple-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader, Modal } from '@opentiny/vue'
+import { TinyCascader, TinyModal } from '@opentiny/vue'
 
 const value = ref([
   ['zhinan', 'anzhuang', 'xiangmudengji'],
@@ -213,7 +213,7 @@ const options = ref([
 ])
 
 function removeTag(val) {
-  Modal.message({
+  TinyModal.message({
     message: '当前触发了 remove-tag 事件删除的值为：' + val,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/cascader/default-multiple.vue b/examples/sites/demos/pc/app/cascader/default-multiple.vue
index 4ed20d44b..8f1eb8fc0 100644
--- a/examples/sites/demos/pc/app/cascader/default-multiple.vue
+++ b/examples/sites/demos/pc/app/cascader/default-multiple.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Cascader, Modal } from '@opentiny/vue'
+import { TinyCascader, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
@@ -220,7 +220,7 @@ export default {
   },
   methods: {
     removeTag(val) {
-      Modal.message({
+      TinyModal.message({
         message: '当前触发了 remove-tag 事件删除的值为：' + val,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/cascader/disabled-items-composition-api.vue b/examples/sites/demos/pc/app/cascader/disabled-items-composition-api.vue
index 2d4a8eb99..c87fb2d51 100644
--- a/examples/sites/demos/pc/app/cascader/disabled-items-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/disabled-items-composition-api.vue
@@ -4,9 +4,10 @@
     <tiny-cascader :options="optionsDis" disabled></tiny-cascader>
   </div>
 </template>
+
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const optionsDis = ref([
   {
@@ -209,4 +210,4 @@ const optionsDis = ref([
 .cascader-demo-disabled > :not(:last-child){
   margin-right: 12px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/cascader/disabled-items.vue b/examples/sites/demos/pc/app/cascader/disabled-items.vue
index 079069f9b..b37631f22 100644
--- a/examples/sites/demos/pc/app/cascader/disabled-items.vue
+++ b/examples/sites/demos/pc/app/cascader/disabled-items.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
@@ -218,4 +218,4 @@ export default {
 .cascader-demo-disabled > :not(:last-child){
   margin-right: 12px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/cascader/events-composition-api.vue b/examples/sites/demos/pc/app/cascader/events-composition-api.vue
index 496bcab63..7ce70f20a 100644
--- a/examples/sites/demos/pc/app/cascader/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/events-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader, Modal } from '@opentiny/vue'
+import { TinyCascader, TinyModal } from '@opentiny/vue'
 
 const value = ref('anzhuangcli')
 const options = ref([
@@ -217,30 +217,30 @@ const options = ref([
 const cascaderRef = ref()
 
 function visibleChange(val) {
-  Modal.message({
+  TinyModal.message({
     message: '当前触发了:visible-change 事件,当前状态为：' + val,
     status: 'info'
   })
 }
 
 function handleFocus() {
-  Modal.message({ message: '当前触发了:focus 事件', status: 'info' })
+  TinyModal.message({ message: '当前触发了:focus 事件', status: 'info' })
 }
 
 function expandChange() {
-  Modal.message({
+  TinyModal.message({
     message: '当前触发了:expand-change 事件',
     status: 'info'
   })
 }
 
 function handleblur() {
-  Modal.message({ message: '当前触发了:blur 事件', status: 'info' })
+  TinyModal.message({ message: '当前触发了:blur 事件', status: 'info' })
 }
 
 function handleChange(value) {
   let checkVal = cascaderRef.value.getCheckedNodes(true)
-  Modal.message({
+  TinyModal.message({
     message: 'change 事件，当前选中的值为:' + checkVal[0].label + '；传入的值为：' + value,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/cascader/events.vue b/examples/sites/demos/pc/app/cascader/events.vue
index c5f0f7f6f..76d25bdb2 100644
--- a/examples/sites/demos/pc/app/cascader/events.vue
+++ b/examples/sites/demos/pc/app/cascader/events.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Cascader, Modal } from '@opentiny/vue'
+import { TinyCascader, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
@@ -223,26 +223,26 @@ export default {
   },
   methods: {
     visibleChange(val) {
-      Modal.message({
+      TinyModal.message({
         message: '当前触发了:visible-change 事件,当前状态为：' + val,
         status: 'info'
       })
     },
     handleFocus() {
-      Modal.message({ message: '当前触发了:focus 事件', status: 'info' })
+      TinyModal.message({ message: '当前触发了:focus 事件', status: 'info' })
     },
     expandChange() {
-      Modal.message({
+      TinyModal.message({
         message: '当前触发了:expand-change 事件',
         status: 'info'
       })
     },
     handleblur() {
-      Modal.message({ message: '当前触发了:blur 事件', status: 'info' })
+      TinyModal.message({ message: '当前触发了:blur 事件', status: 'info' })
     },
     handleChange(value) {
       let checkVal = this.$refs.cascader.getCheckedNodes(true)
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，当前选中的值为:' + checkVal[0].label + '；传入的值为：' + value,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/cascader/expand-trigger-composition-api.vue b/examples/sites/demos/pc/app/cascader/expand-trigger-composition-api.vue
index 5936de82e..6de95ecad 100644
--- a/examples/sites/demos/pc/app/cascader/expand-trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/expand-trigger-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/cascader/expand-trigger.vue b/examples/sites/demos/pc/app/cascader/expand-trigger.vue
index cac223f82..cb1537ec4 100644
--- a/examples/sites/demos/pc/app/cascader/expand-trigger.vue
+++ b/examples/sites/demos/pc/app/cascader/expand-trigger.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   setup() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/filter-method-composition-api.vue b/examples/sites/demos/pc/app/cascader/filter-method-composition-api.vue
index 00240d986..9c82e575e 100644
--- a/examples/sites/demos/pc/app/cascader/filter-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/filter-method-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/cascader/filter-method.vue b/examples/sites/demos/pc/app/cascader/filter-method.vue
index 723de5ba2..8c9adce63 100644
--- a/examples/sites/demos/pc/app/cascader/filter-method.vue
+++ b/examples/sites/demos/pc/app/cascader/filter-method.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/cascader/filter-mode-composition-api.vue
index 8b9b23a67..ac3d87a47 100644
--- a/examples/sites/demos/pc/app/cascader/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/filter-mode-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/cascader/filter-mode.vue b/examples/sites/demos/pc/app/cascader/filter-mode.vue
index f512399eb..6b800a2c5 100644
--- a/examples/sites/demos/pc/app/cascader/filter-mode.vue
+++ b/examples/sites/demos/pc/app/cascader/filter-mode.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue b/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
index 23221043e..456a47b81 100644
--- a/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/cascader/filterable-multiple-composition-api.vue b/examples/sites/demos/pc/app/cascader/filterable-multiple-composition-api.vue
index 97517fa61..511d2d2e4 100644
--- a/examples/sites/demos/pc/app/cascader/filterable-multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/filterable-multiple-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/cascader/filterable-multiple.vue b/examples/sites/demos/pc/app/cascader/filterable-multiple.vue
index eeab4d5a9..a2dfda878 100644
--- a/examples/sites/demos/pc/app/cascader/filterable-multiple.vue
+++ b/examples/sites/demos/pc/app/cascader/filterable-multiple.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/filterable.vue b/examples/sites/demos/pc/app/cascader/filterable.vue
index cc45f3d36..ce215ea96 100644
--- a/examples/sites/demos/pc/app/cascader/filterable.vue
+++ b/examples/sites/demos/pc/app/cascader/filterable.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/props-children-composition-api.vue b/examples/sites/demos/pc/app/cascader/props-children-composition-api.vue
index 17516886d..ef4382a95 100644
--- a/examples/sites/demos/pc/app/cascader/props-children-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/props-children-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const value = ref(['zhinan', 'anzhuang', 'anzhuangcli'])
 const options = ref([
diff --git a/examples/sites/demos/pc/app/cascader/props-children.vue b/examples/sites/demos/pc/app/cascader/props-children.vue
index 0475f08c3..7e6564ad8 100644
--- a/examples/sites/demos/pc/app/cascader/props-children.vue
+++ b/examples/sites/demos/pc/app/cascader/props-children.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/show-all-levels-composition-api.vue b/examples/sites/demos/pc/app/cascader/show-all-levels-composition-api.vue
index 6339f9351..cc3ceeaa6 100644
--- a/examples/sites/demos/pc/app/cascader/show-all-levels-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/show-all-levels-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const value = ref(['zhinan', 'anzhuang', 'anzhuangcli'])
diff --git a/examples/sites/demos/pc/app/cascader/show-all-levels.vue b/examples/sites/demos/pc/app/cascader/show-all-levels.vue
index 054d7bc7f..a8fedb338 100644
--- a/examples/sites/demos/pc/app/cascader/show-all-levels.vue
+++ b/examples/sites/demos/pc/app/cascader/show-all-levels.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   setup() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/size-composition-api.vue b/examples/sites/demos/pc/app/cascader/size-composition-api.vue
index 5cf6785fc..13b5eaad8 100644
--- a/examples/sites/demos/pc/app/cascader/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/size-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 const value = ref(['zhinan', 'anzhuang', 'xiangmudengji'])
 const options = ref([
diff --git a/examples/sites/demos/pc/app/cascader/size.vue b/examples/sites/demos/pc/app/cascader/size.vue
index 0c892c0d7..e08dea4d9 100644
--- a/examples/sites/demos/pc/app/cascader/size.vue
+++ b/examples/sites/demos/pc/app/cascader/size.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCascader: Cascader
+    TinyCascader
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/cascader/slot-composition-api.vue b/examples/sites/demos/pc/app/cascader/slot-composition-api.vue
index edf45c3aa..88af1886f 100644
--- a/examples/sites/demos/pc/app/cascader/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/slot-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Cascader as TinyCascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 import { iconFilletExternalLink } from '@opentiny/vue-icon'
 
 const TinyIconFilletExternalLink = iconFilletExternalLink()
diff --git a/examples/sites/demos/pc/app/cascader/slot.vue b/examples/sites/demos/pc/app/cascader/slot.vue
index cd0ecce49..9bf54ef7a 100644
--- a/examples/sites/demos/pc/app/cascader/slot.vue
+++ b/examples/sites/demos/pc/app/cascader/slot.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { Cascader } from '@opentiny/vue'
+import { TinyCascader } from '@opentiny/vue'
 import { iconFilletExternalLink } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCascader: Cascader,
+    TinyCascader,
     TinyIconFilletExternalLink: iconFilletExternalLink()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/chart/amap/base-composition-api.vue b/examples/sites/demos/pc/app/chart/amap/base-composition-api.vue
index 2c4effd03..7167195dc 100644
--- a/examples/sites/demos/pc/app/chart/amap/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/amap/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsAmap as TinyAutonaviMap } from '@opentiny/vue'
+import { TinyHuichartsAmap as TinyAutonaviMap } from '@opentiny/vue'
 
 const options = ref({
   key: '4b5f2cf2cba25200cc6b68c398468899',
diff --git a/examples/sites/demos/pc/app/chart/amap/base.vue b/examples/sites/demos/pc/app/chart/amap/base.vue
index a1e41bd0d..229397763 100644
--- a/examples/sites/demos/pc/app/chart/amap/base.vue
+++ b/examples/sites/demos/pc/app/chart/amap/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsAmap } from '@opentiny/vue'
+import { TinyHuichartsAmap } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAutonaviMap: HuichartsAmap
+    TinyAutonaviMap: TinyHuichartsAmap
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/bar/base-composition-api.vue b/examples/sites/demos/pc/app/chart/bar/base-composition-api.vue
index f43aa4a10..ad72e32eb 100644
--- a/examples/sites/demos/pc/app/chart/bar/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/bar/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/bar/base.vue b/examples/sites/demos/pc/app/chart/bar/base.vue
index a9d0b29ea..141ef1054 100644
--- a/examples/sites/demos/pc/app/chart/bar/base.vue
+++ b/examples/sites/demos/pc/app/chart/bar/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBar: HuichartsBar
+    TinyBar: TinyHuichartsBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/bar/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/bar/demo2-composition-api.vue
index e4178f04c..76a986331 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo2-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="jsx">
-import { HuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
 
 const options = {
   data: [
diff --git a/examples/sites/demos/pc/app/chart/bar/demo2.vue b/examples/sites/demos/pc/app/chart/bar/demo2.vue
index 3807491be..3ce5da057 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBar: HuichartsBar
+    TinyBar: TinyHuichartsBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/bar/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/bar/demo3-composition-api.vue
index 98835c3d1..590981e7b 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/bar/demo3.vue b/examples/sites/demos/pc/app/chart/bar/demo3.vue
index 9871de536..2697e7e19 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBar: HuichartsBar
+    TinyBar: TinyHuichartsBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/bar/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/bar/demo4-composition-api.vue
index 9ba3e6cfb..7371c4712 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/bar/demo4.vue b/examples/sites/demos/pc/app/chart/bar/demo4.vue
index 6cfc1e4f8..282de707c 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBar: HuichartsBar
+    TinyBar: TinyHuichartsBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/bar/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/bar/demo5-composition-api.vue
index 32ea9b1d7..732f3daa8 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/bar/demo5.vue b/examples/sites/demos/pc/app/chart/bar/demo5.vue
index 3650452ac..8fce26f41 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBar: HuichartsBar
+    TinyBar: TinyHuichartsBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/bar/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/bar/demo6-composition-api.vue
index 47d0ff0fa..f9c40dccc 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/bar/demo6.vue b/examples/sites/demos/pc/app/chart/bar/demo6.vue
index d127226e5..d650b64e3 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBar: HuichartsBar
+    TinyBar: TinyHuichartsBar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/bar/demo7-composition-api.vue b/examples/sites/demos/pc/app/chart/bar/demo7-composition-api.vue
index 7352224bf..30658902e 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo7-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo7-composition-api.vue
@@ -6,24 +6,24 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBar as TinyChartBar } from '@opentiny/vue'
+import { TinyHuichartsBar as TinyChartBar } from '@opentiny/vue'
 const options = ref({
   // 双向柱状图形态
   type: 'double-sides',
   direction: 'horizontal',
   data: [
-    { 'Month': 'Jan', '上行': 43, '下行': 37 },
-    { 'Month': 'Feb', '上行': 27, '下行': 19 },
-    { 'Month': 'Mar', '上行': 31, '下行': 20 },
-    { 'Month': 'Apr', '上行': 20, '下行': 15 },
-    { 'Month': 'May', '上行': 37, '下行': 13 },
-    { 'Month': 'Jun', '上行': 38, '下行': 17 },
-    { 'Month': 'Jul', '上行': 42, '下行': 22 },
-    { 'Month': 'Aug', '上行': 22, '下行': 22 },
-    { 'Month': 'Sep', '上行': 17, '下行': 12 },
-    { 'Month': 'Oct', '上行': 41, '下行': 33 },
-    { 'Month': 'Nov', '上行': 42, '下行': 22 },
-    { 'Month': 'Dec', '上行': 37, '下行': 17 }
+    { Month: 'Jan', 上行: 43, 下行: 37 },
+    { Month: 'Feb', 上行: 27, 下行: 19 },
+    { Month: 'Mar', 上行: 31, 下行: 20 },
+    { Month: 'Apr', 上行: 20, 下行: 15 },
+    { Month: 'May', 上行: 37, 下行: 13 },
+    { Month: 'Jun', 上行: 38, 下行: 17 },
+    { Month: 'Jul', 上行: 42, 下行: 22 },
+    { Month: 'Aug', 上行: 22, 下行: 22 },
+    { Month: 'Sep', 上行: 17, 下行: 12 },
+    { Month: 'Oct', 上行: 41, 下行: 33 },
+    { Month: 'Nov', 上行: 42, 下行: 22 },
+    { Month: 'Dec', 上行: 37, 下行: 17 }
   ]
 })
 </script>
diff --git a/examples/sites/demos/pc/app/chart/bar/demo7.vue b/examples/sites/demos/pc/app/chart/bar/demo7.vue
index 2da35f3cd..956d353db 100644
--- a/examples/sites/demos/pc/app/chart/bar/demo7.vue
+++ b/examples/sites/demos/pc/app/chart/bar/demo7.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBar } from '@opentiny/vue'
+import { TinyHuichartsBar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBar: HuichartsBar
+    TinyBar: TinyHuichartsBar
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
         type: 'double-sides',
         direction: 'horizontal',
         data: [
-          { 'Month': 'Jan', '上行': 43, '下行': 37 },
-          { 'Month': 'Feb', '上行': 27, '下行': 19 },
-          { 'Month': 'Mar', '上行': 31, '下行': 20 },
-          { 'Month': 'Apr', '上行': 20, '下行': 15 },
-          { 'Month': 'May', '上行': 37, '下行': 13 },
-          { 'Month': 'Jun', '上行': 38, '下行': 17 },
-          { 'Month': 'Jul', '上行': 42, '下行': 22 },
-          { 'Month': 'Aug', '上行': 22, '下行': 22 },
-          { 'Month': 'Sep', '上行': 17, '下行': 12 },
-          { 'Month': 'Oct', '上行': 41, '下行': 33 },
-          { 'Month': 'Nov', '上行': 42, '下行': 22 },
-          { 'Month': 'Dec', '上行': 37, '下行': 17 }
+          { Month: 'Jan', 上行: 43, 下行: 37 },
+          { Month: 'Feb', 上行: 27, 下行: 19 },
+          { Month: 'Mar', 上行: 31, 下行: 20 },
+          { Month: 'Apr', 上行: 20, 下行: 15 },
+          { Month: 'May', 上行: 37, 下行: 13 },
+          { Month: 'Jun', 上行: 38, 下行: 17 },
+          { Month: 'Jul', 上行: 42, 下行: 22 },
+          { Month: 'Aug', 上行: 22, 下行: 22 },
+          { Month: 'Sep', 上行: 17, 下行: 12 },
+          { Month: 'Oct', 上行: 41, 下行: 33 },
+          { Month: 'Nov', 上行: 42, 下行: 22 },
+          { Month: 'Dec', 上行: 37, 下行: 17 }
         ]
       }
     }
diff --git a/examples/sites/demos/pc/app/chart/base-composition-api.vue b/examples/sites/demos/pc/app/chart/base-composition-api.vue
index 2f8b41531..b03e32fd5 100644
--- a/examples/sites/demos/pc/app/chart/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/base-composition-api.vue
@@ -28,7 +28,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Huicharts as TinyChart, Button as TinyButton } from '@opentiny/vue'
+import { TinyHuicharts as TinyChart, TinyButton } from '@opentiny/vue'
 
 const colorMode = ref('default')
 const key = ref(0)
@@ -43,18 +43,18 @@ const options1 = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
@@ -71,18 +71,18 @@ const options2 = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/base.vue b/examples/sites/demos/pc/app/chart/base.vue
index c6b839eae..c8a859673 100644
--- a/examples/sites/demos/pc/app/chart/base.vue
+++ b/examples/sites/demos/pc/app/chart/base.vue
@@ -27,12 +27,12 @@
 </template>
 
 <script lang="jsx">
-import { Huicharts, Button } from '@opentiny/vue'
+import { TinyHuicharts, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyChart: Huicharts,
-    TinyButton: Button
+    TinyChart: TinyHuicharts,
+    TinyButton
   },
   methods: {
     switchTheme() {
@@ -62,18 +62,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
@@ -89,18 +89,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/bmap/base-composition-api.vue b/examples/sites/demos/pc/app/chart/bmap/base-composition-api.vue
index e25e28688..4513a4938 100644
--- a/examples/sites/demos/pc/app/chart/bmap/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/bmap/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBmap as TinyBaiduMap } from '@opentiny/vue'
+import { TinyHuichartsBmap as TinyBaiduMap } from '@opentiny/vue'
 
 const options = ref({
   key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK',
diff --git a/examples/sites/demos/pc/app/chart/bmap/base.vue b/examples/sites/demos/pc/app/chart/bmap/base.vue
index 5a39d1ca1..054cd85a0 100644
--- a/examples/sites/demos/pc/app/chart/bmap/base.vue
+++ b/examples/sites/demos/pc/app/chart/bmap/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBmap } from '@opentiny/vue'
+import { TinyHuichartsBmap } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBaiduMap: HuichartsBmap
+    TinyBaiduMap: TinyHuichartsBmap
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/boxplot/base-composition-api.vue b/examples/sites/demos/pc/app/chart/boxplot/base-composition-api.vue
index f19b5d335..098a07e39 100644
--- a/examples/sites/demos/pc/app/chart/boxplot/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/boxplot/base-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBoxplot as TinyChartBoxplot } from '@opentiny/vue'
+import { TinyHuichartsBoxplot as TinyChartBoxplot } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/boxplot/base.vue b/examples/sites/demos/pc/app/chart/boxplot/base.vue
index 35f24512e..4d728c01b 100644
--- a/examples/sites/demos/pc/app/chart/boxplot/base.vue
+++ b/examples/sites/demos/pc/app/chart/boxplot/base.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBoxplot } from '@opentiny/vue'
+import { TinyHuichartsBoxplot } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBoxplot: HuichartsBoxplot
+    TinyBoxplot: TinyHuichartsBoxplot
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/boxplot/multiple-composition-api.vue b/examples/sites/demos/pc/app/chart/boxplot/multiple-composition-api.vue
index 5e04427cc..6c28bd815 100644
--- a/examples/sites/demos/pc/app/chart/boxplot/multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/boxplot/multiple-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsBoxplot as TinyChartBoxplot } from '@opentiny/vue'
+import { TinyHuichartsBoxplot as TinyChartBoxplot } from '@opentiny/vue'
 
 const options = ref({
   direction: 'horizontal', // 横向
diff --git a/examples/sites/demos/pc/app/chart/boxplot/multiple.vue b/examples/sites/demos/pc/app/chart/boxplot/multiple.vue
index 5efd5a517..333fc187f 100644
--- a/examples/sites/demos/pc/app/chart/boxplot/multiple.vue
+++ b/examples/sites/demos/pc/app/chart/boxplot/multiple.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBoxplot } from '@opentiny/vue'
+import { TinyHuichartsBoxplot } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBoxplot: HuichartsBoxplot
+    TinyBoxplot: TinyHuichartsBoxplot
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/boxplot/vertical-composition-api.vue b/examples/sites/demos/pc/app/chart/boxplot/vertical-composition-api.vue
index 15d86e04b..fcf9ecb10 100644
--- a/examples/sites/demos/pc/app/chart/boxplot/vertical-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/boxplot/vertical-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="jsx">
-import { HuichartsBoxplot as TinyChartBoxplot } from '@opentiny/vue'
+import { TinyHuichartsBoxplot as TinyChartBoxplot } from '@opentiny/vue'
 import { ref } from 'vue'
 
 function makeData() {
@@ -61,15 +61,15 @@ const options = ref({
     },
     {
       fromDatasetIndex: 0,
-      transform: { 'type': 'boxplot' }
+      transform: { type: 'boxplot' }
     },
     {
       fromDatasetIndex: 1,
-      transform: { 'type': 'boxplot' }
+      transform: { type: 'boxplot' }
     },
     {
       fromDatasetIndex: 2,
-      transform: { 'type': 'boxplot' }
+      transform: { type: 'boxplot' }
     }
   ],
   series: [
diff --git a/examples/sites/demos/pc/app/chart/boxplot/vertical.vue b/examples/sites/demos/pc/app/chart/boxplot/vertical.vue
index d74ff8a3b..983d6b8f3 100644
--- a/examples/sites/demos/pc/app/chart/boxplot/vertical.vue
+++ b/examples/sites/demos/pc/app/chart/boxplot/vertical.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsBoxplot } from '@opentiny/vue'
+import { TinyHuichartsBoxplot } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyBoxplot: HuichartsBoxplot
+    TinyBoxplot: TinyHuichartsBoxplot
   },
   data() {
     const sourceData0 = this.makeData()
@@ -53,15 +53,15 @@ export default {
           },
           {
             fromDatasetIndex: 0,
-            transform: { 'type': 'boxplot' }
+            transform: { type: 'boxplot' }
           },
           {
             fromDatasetIndex: 1,
-            transform: { 'type': 'boxplot' }
+            transform: { type: 'boxplot' }
           },
           {
             fromDatasetIndex: 2,
-            transform: { 'type': 'boxplot' }
+            transform: { type: 'boxplot' }
           }
         ],
         series: [
diff --git a/examples/sites/demos/pc/app/chart/candle/base-composition-api.vue b/examples/sites/demos/pc/app/chart/candle/base-composition-api.vue
index 494767c64..1bdb47b69 100644
--- a/examples/sites/demos/pc/app/chart/candle/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/candle/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsCandle as TinyChartCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle as TinyChartCandle } from '@opentiny/vue'
 
 const baseData = [
   ['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
diff --git a/examples/sites/demos/pc/app/chart/candle/base.vue b/examples/sites/demos/pc/app/chart/candle/base.vue
index 1a42ce04c..56fb19590 100644
--- a/examples/sites/demos/pc/app/chart/candle/base.vue
+++ b/examples/sites/demos/pc/app/chart/candle/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCandle: HuichartsCandle
+    TinyCandle: TinyHuichartsCandle
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/candle/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/candle/demo2-composition-api.vue
index 3d5b45ee7..ec7e5d9c5 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsCandle as TinyChartCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle as TinyChartCandle } from '@opentiny/vue'
 
 const baseData = [
   ['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
diff --git a/examples/sites/demos/pc/app/chart/candle/demo2.vue b/examples/sites/demos/pc/app/chart/candle/demo2.vue
index 9991442b1..c32c31231 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCandle: HuichartsCandle
+    TinyCandle: TinyHuichartsCandle
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/candle/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/candle/demo3-composition-api.vue
index 5a3988b06..cf6b7175c 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsCandle as TinyChartCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle as TinyChartCandle } from '@opentiny/vue'
 
 const baseData = [
   ['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
diff --git a/examples/sites/demos/pc/app/chart/candle/demo3.vue b/examples/sites/demos/pc/app/chart/candle/demo3.vue
index 877d0a152..29b01ae40 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCandle: HuichartsCandle
+    TinyCandle: TinyHuichartsCandle
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/candle/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/candle/demo4-composition-api.vue
index d1ac9d86f..93e5be56b 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsCandle as TinyChartCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle as TinyChartCandle } from '@opentiny/vue'
 
 const baseData = [
   ['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
diff --git a/examples/sites/demos/pc/app/chart/candle/demo4.vue b/examples/sites/demos/pc/app/chart/candle/demo4.vue
index 7ac201dd6..c913b649a 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCandle: HuichartsCandle
+    TinyCandle: TinyHuichartsCandle
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/candle/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/candle/demo5-composition-api.vue
index e221ee908..ddc4a619f 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsCandle as TinyChartCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle as TinyChartCandle } from '@opentiny/vue'
 
 const baseData = [
   ['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
diff --git a/examples/sites/demos/pc/app/chart/candle/demo5.vue b/examples/sites/demos/pc/app/chart/candle/demo5.vue
index 3b998df04..3bd50cd19 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCandle: HuichartsCandle
+    TinyCandle: TinyHuichartsCandle
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/candle/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/candle/demo6-composition-api.vue
index 73afb1880..650f37fe7 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsCandle as TinyChartCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle as TinyChartCandle } from '@opentiny/vue'
 
 const baseData = [
   ['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
diff --git a/examples/sites/demos/pc/app/chart/candle/demo6.vue b/examples/sites/demos/pc/app/chart/candle/demo6.vue
index d58a26223..1cc1b05ba 100644
--- a/examples/sites/demos/pc/app/chart/candle/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/candle/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsCandle } from '@opentiny/vue'
+import { TinyHuichartsCandle } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCandle: HuichartsCandle
+    TinyCandle: TinyHuichartsCandle
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/events/base-composition-api.vue b/examples/sites/demos/pc/app/chart/events/base-composition-api.vue
index 901f475d9..9457d6044 100644
--- a/examples/sites/demos/pc/app/chart/events/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/events/base-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsPie as TinyChartPie, Modal as TinyModal } from '@opentiny/vue'
+import { TinyHuichartsPie as TinyChartPie, TinyModal } from '@opentiny/vue'
 
 const options = ref({
   type: 'pie',
diff --git a/examples/sites/demos/pc/app/chart/events/base.vue b/examples/sites/demos/pc/app/chart/events/base.vue
index c8cd9643a..8bb5e5335 100644
--- a/examples/sites/demos/pc/app/chart/events/base.vue
+++ b/examples/sites/demos/pc/app/chart/events/base.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsPie, Modal as TinyModal } from '@opentiny/vue'
+import { TinyHuichartsPie, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPie: HuichartsPie
+    TinyPie: TinyHuichartsPie
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/funnel/base-composition-api.vue b/examples/sites/demos/pc/app/chart/funnel/base-composition-api.vue
index 923613b8c..604a66b66 100644
--- a/examples/sites/demos/pc/app/chart/funnel/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/funnel/base.vue b/examples/sites/demos/pc/app/chart/funnel/base.vue
index eab2391ee..3b29f8424 100644
--- a/examples/sites/demos/pc/app/chart/funnel/base.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFunnel: HuichartsFunnel
+    TinyFunnel: TinyHuichartsFunnel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/funnel/demo2-composition-api.vue
index c84b84422..4e2c29aaf 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
 
 const options = ref({
   sort: 'ascending',
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo2.vue b/examples/sites/demos/pc/app/chart/funnel/demo2.vue
index 7ffdaf19f..8084161d7 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFunnel: HuichartsFunnel
+    TinyFunnel: TinyHuichartsFunnel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/funnel/demo3-composition-api.vue
index 141c9562e..0cda43fe8 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
 
 const options = ref({
   maxSize: '80%',
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo3.vue b/examples/sites/demos/pc/app/chart/funnel/demo3.vue
index 0d105943b..f6edd28f5 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFunnel: HuichartsFunnel
+    TinyFunnel: TinyHuichartsFunnel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/funnel/demo4-composition-api.vue
index 693ae104a..7f240465c 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
 
 const options = ref({
   gap: 10,
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo4.vue b/examples/sites/demos/pc/app/chart/funnel/demo4.vue
index 72838a5df..f55f189fb 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFunnel: HuichartsFunnel
+    TinyFunnel: TinyHuichartsFunnel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/funnel/demo5-composition-api.vue
index c3448bfa0..0e1a9962d 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
 
 const options = ref({
   color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41'], // 自定义颜色组，循环使用该颜色组
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo5.vue b/examples/sites/demos/pc/app/chart/funnel/demo5.vue
index bb55bee01..2689f1832 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFunnel: HuichartsFunnel
+    TinyFunnel: TinyHuichartsFunnel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/funnel/demo6-composition-api.vue
index 8c6d0beeb..4c95fa79a 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
 
 const options = ref({
   legend: {
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo6.vue b/examples/sites/demos/pc/app/chart/funnel/demo6.vue
index 3c2b667fe..74eeb1ecc 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFunnel: HuichartsFunnel
+    TinyFunnel: TinyHuichartsFunnel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo7-composition-api.vue b/examples/sites/demos/pc/app/chart/funnel/demo7-composition-api.vue
index 5a61a35a2..8e253304b 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo7-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo7-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel as TinyChartFunnel } from '@opentiny/vue'
 
 const options = ref({
   tipHtml: (params, ticket, callback) => {
diff --git a/examples/sites/demos/pc/app/chart/funnel/demo7.vue b/examples/sites/demos/pc/app/chart/funnel/demo7.vue
index fbdd3d203..0d62ead4c 100644
--- a/examples/sites/demos/pc/app/chart/funnel/demo7.vue
+++ b/examples/sites/demos/pc/app/chart/funnel/demo7.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsFunnel } from '@opentiny/vue'
+import { TinyHuichartsFunnel } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFunnel: HuichartsFunnel
+    TinyFunnel: TinyHuichartsFunnel
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/gauge/base-composition-api.vue b/examples/sites/demos/pc/app/chart/gauge/base-composition-api.vue
index 44a16cae7..221c39a2b 100644
--- a/examples/sites/demos/pc/app/chart/gauge/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsGauge as TinyChartGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge as TinyChartGauge } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/gauge/base.vue b/examples/sites/demos/pc/app/chart/gauge/base.vue
index 309681c4e..acdab8b16 100644
--- a/examples/sites/demos/pc/app/chart/gauge/base.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGauge: HuichartsGauge
+    TinyGauge: TinyHuichartsGauge
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/gauge/demo2-composition-api.vue
index 4e7caea24..3f6f0eb47 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsGauge as TinyChartGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge as TinyChartGauge } from '@opentiny/vue'
 
 const options = ref({
   // 仪表盘的最小值
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo2.vue b/examples/sites/demos/pc/app/chart/gauge/demo2.vue
index 9cec9505c..e80c6c9e5 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGauge: HuichartsGauge
+    TinyGauge: TinyHuichartsGauge
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/gauge/demo3-composition-api.vue
index 8f7b40d54..6a4b01cfe 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsGauge as TinyChartGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge as TinyChartGauge } from '@opentiny/vue'
 
 const options = ref({
   // splitColor 分割仪表盘
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo3.vue b/examples/sites/demos/pc/app/chart/gauge/demo3.vue
index 273731e70..9a1e9b3f4 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGauge: HuichartsGauge
+    TinyGauge: TinyHuichartsGauge
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/gauge/demo4-composition-api.vue
index 5cae94f4f..541eb79d8 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsGauge as TinyChartGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge as TinyChartGauge } from '@opentiny/vue'
 
 const options = ref({
   position: {
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo4.vue b/examples/sites/demos/pc/app/chart/gauge/demo4.vue
index a194ebc73..19d9eb1ba 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGauge: HuichartsGauge
+    TinyGauge: TinyHuichartsGauge
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/gauge/demo5-composition-api.vue
index 254455d67..92a5cced3 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsGauge as TinyChartGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge as TinyChartGauge } from '@opentiny/vue'
 
 const options = ref({
   // gradientColor表示从仪表盘左到右的渐变色
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo5.vue b/examples/sites/demos/pc/app/chart/gauge/demo5.vue
index 746ba5c56..213012424 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGauge: HuichartsGauge
+    TinyGauge: TinyHuichartsGauge
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/gauge/demo6-composition-api.vue
index ebd67250d..282b7232c 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsGauge as TinyChartGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge as TinyChartGauge } from '@opentiny/vue'
 
 const options = ref({
   min: 0,
diff --git a/examples/sites/demos/pc/app/chart/gauge/demo6.vue b/examples/sites/demos/pc/app/chart/gauge/demo6.vue
index 5a4bca4c2..1f250b5ca 100644
--- a/examples/sites/demos/pc/app/chart/gauge/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/gauge/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsGauge } from '@opentiny/vue'
+import { TinyHuichartsGauge } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGauge: HuichartsGauge
+    TinyGauge: TinyHuichartsGauge
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/graph/base-composition-api.vue b/examples/sites/demos/pc/app/chart/graph/base-composition-api.vue
index a300c43eb..45802b942 100644
--- a/examples/sites/demos/pc/app/chart/graph/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/graph/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsGraph as TinyChartGraph } from '@opentiny/vue'
+import { TinyHuichartsGraph as TinyChartGraph } from '@opentiny/vue'
 
 const options = ref({
   animationDurationUpdate: 1600,
diff --git a/examples/sites/demos/pc/app/chart/graph/base.vue b/examples/sites/demos/pc/app/chart/graph/base.vue
index e5a054ef7..d5cde1c72 100644
--- a/examples/sites/demos/pc/app/chart/graph/base.vue
+++ b/examples/sites/demos/pc/app/chart/graph/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsGraph } from '@opentiny/vue'
+import { TinyHuichartsGraph } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGraph: HuichartsGraph
+    TinyGraph: TinyHuichartsGraph
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/graph/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/graph/demo2-composition-api.vue
index 8b2a17879..62123dbde 100644
--- a/examples/sites/demos/pc/app/chart/graph/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/graph/demo2-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { HuichartsGraph as TinyChartGraph } from '@opentiny/vue'
+import { TinyHuichartsGraph as TinyChartGraph } from '@opentiny/vue'
 
 let axisData = ['周一', '周二', '周三', '很长很长的周四', '周五', '周六', '周日']
 
diff --git a/examples/sites/demos/pc/app/chart/graph/demo2.vue b/examples/sites/demos/pc/app/chart/graph/demo2.vue
index 77e1b1e85..1adab1e2b 100644
--- a/examples/sites/demos/pc/app/chart/graph/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/graph/demo2.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { HuichartsGraph } from '@opentiny/vue'
+import { TinyHuichartsGraph } from '@opentiny/vue'
 
 let axisData = ['周一', '周二', '周三', '很长很长的周四', '周五', '周六', '周日']
 const data = [800, 600, 900, 1500, 3200, 4800, 900]
@@ -52,7 +52,7 @@ let option = {
 
 export default {
   components: {
-    TinyGraph: HuichartsGraph
+    TinyGraph: TinyHuichartsGraph
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/heatmap/base-composition-api.vue b/examples/sites/demos/pc/app/chart/heatmap/base-composition-api.vue
index 30e7c318b..c701f33d3 100644
--- a/examples/sites/demos/pc/app/chart/heatmap/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/heatmap/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHeatmap as TinyChartHeatmap } from '@opentiny/vue'
+import { TinyHuichartsHeatmap as TinyChartHeatmap } from '@opentiny/vue'
 
 const options = ref({
   // 图表类型(矩形热力图)
diff --git a/examples/sites/demos/pc/app/chart/heatmap/base.vue b/examples/sites/demos/pc/app/chart/heatmap/base.vue
index f32527ced..578b10c46 100644
--- a/examples/sites/demos/pc/app/chart/heatmap/base.vue
+++ b/examples/sites/demos/pc/app/chart/heatmap/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHeatmap } from '@opentiny/vue'
+import { TinyHuichartsHeatmap } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHeatmap: HuichartsHeatmap
+    TinyHeatmap: TinyHuichartsHeatmap
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/heatmap/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/heatmap/demo2-composition-api.vue
index e54c9774f..baa6e43cc 100644
--- a/examples/sites/demos/pc/app/chart/heatmap/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/heatmap/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHeatmap as TinyChartHeatmap } from '@opentiny/vue'
+import { TinyHuichartsHeatmap as TinyChartHeatmap } from '@opentiny/vue'
 
 const options = ref({
   // 图表类型(矩形热力图)
@@ -14,7 +14,6 @@ const options = ref({
 
   // padding控制图表距离容器的上，右，下，左padding值
   padding: [50, 120, 20, 20],
-
   // 矩形的颜色，默认值'#1F55B5'
   color: '#1F55B5',
 
@@ -25,7 +24,6 @@ const options = ref({
 
     // 两端的文本，默认值为data第三个属性值的最大值和最小值
     text: ['亮', '暗'],
-
     // 水平与垂直放置，默认值vertical
     // vertical 或者 horizontal
     orient: 'vertical',
diff --git a/examples/sites/demos/pc/app/chart/heatmap/demo2.vue b/examples/sites/demos/pc/app/chart/heatmap/demo2.vue
index d3868c56d..1f2883f3c 100644
--- a/examples/sites/demos/pc/app/chart/heatmap/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/heatmap/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHeatmap } from '@opentiny/vue'
+import { TinyHuichartsHeatmap } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHeatmap: HuichartsHeatmap
+    TinyHeatmap: TinyHuichartsHeatmap
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // padding控制图表距离容器的上，右，下，左padding值
         padding: [50, 120, 20, 20],
-
         // 矩形的颜色，默认值'#1F55B5'
         color: '#1F55B5',
 
@@ -30,7 +29,6 @@ export default {
 
           // 两端的文本，默认值为data第三个属性值的最大值和最小值
           text: ['亮', '暗'],
-
           // 水平与垂直放置，默认值vertical
           // vertical 或者 horizontal
           orient: 'vertical',
diff --git a/examples/sites/demos/pc/app/chart/heatmap/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/heatmap/demo3-composition-api.vue
index f8bfdcd24..2280f0bf2 100644
--- a/examples/sites/demos/pc/app/chart/heatmap/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/heatmap/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHeatmap as TinyChartHeatmap } from '@opentiny/vue'
+import { TinyHuichartsHeatmap as TinyChartHeatmap } from '@opentiny/vue'
 
 const options = ref({
   // 图表类型(矩形热力图)
@@ -14,7 +14,6 @@ const options = ref({
 
   // padding控制图表距离容器的上，右，下，左padding值
   padding: [50, 120, 20, 20],
-
   // 矩形的颜色，默认值'#1F55B5'
   color: '#745ef7',
 
diff --git a/examples/sites/demos/pc/app/chart/heatmap/demo3.vue b/examples/sites/demos/pc/app/chart/heatmap/demo3.vue
index b271a329d..915a722d0 100644
--- a/examples/sites/demos/pc/app/chart/heatmap/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/heatmap/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHeatmap } from '@opentiny/vue'
+import { TinyHuichartsHeatmap } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHeatmap: HuichartsHeatmap
+    TinyHeatmap: TinyHuichartsHeatmap
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // padding控制图表距离容器的上，右，下，左padding值
         padding: [50, 120, 20, 20],
-
         // 矩形的颜色，默认值'#1F55B5'
         color: '#745ef7',
 
diff --git a/examples/sites/demos/pc/app/chart/histogram/base-composition-api.vue b/examples/sites/demos/pc/app/chart/histogram/base-composition-api.vue
index e1eb004d4..59d608be2 100644
--- a/examples/sites/demos/pc/app/chart/histogram/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/base-composition-api.vue
@@ -6,22 +6,22 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: 'Month',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/histogram/base.vue b/examples/sites/demos/pc/app/chart/histogram/base.vue
index 7320e258a..5e88763c4 100644
--- a/examples/sites/demos/pc/app/chart/histogram/base.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/base.vue
@@ -5,28 +5,28 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
       options: {
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: 'Month',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/histogram/demo2-composition-api.vue
index 1baa88ff6..16eeb32ed 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo2-composition-api.vue
@@ -6,17 +6,17 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   padding: [40, 10, 40, 10],
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 }
   ],
   xAxis: 'Month',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo2.vue b/examples/sites/demos/pc/app/chart/histogram/demo2.vue
index 2e0d64544..b3b3efd4f 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo2.vue
@@ -5,23 +5,23 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
       options: {
         padding: [40, 10, 40, 10],
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 }
         ],
         xAxis: 'Month',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/histogram/demo3-composition-api.vue
index 266f8a5ae..dc39703a2 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo3-composition-api.vue
@@ -6,25 +6,25 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   itemStyle: {
     barMinHeight: 2 // 最小高度为2
   },
   data: [
-    { 'Month': 'Jan', 'Value': 100 },
-    { 'Month': 'Feb', 'Value': 0.01 },
-    { 'Month': 'Mar', 'Value': 0.01 },
-    { 'Month': 'Apr', 'Value': 0.01 },
-    { 'Month': 'May', 'Value': 0.01 },
-    { 'Month': 'Jun', 'Value': 0.01 },
-    { 'Month': 'Jul', 'Value': 0.01 },
-    { 'Month': 'Aug', 'Value': 0.01 },
-    { 'Month': 'Sep', 'Value': 0.01 },
-    { 'Month': 'Oct', 'Value': 0.01 },
-    { 'Month': 'Nov', 'Value': 0.01 },
-    { 'Month': 'Dec', 'Value': 0.01 }
+    { Month: 'Jan', Value: 100 },
+    { Month: 'Feb', Value: 0.01 },
+    { Month: 'Mar', Value: 0.01 },
+    { Month: 'Apr', Value: 0.01 },
+    { Month: 'May', Value: 0.01 },
+    { Month: 'Jun', Value: 0.01 },
+    { Month: 'Jul', Value: 0.01 },
+    { Month: 'Aug', Value: 0.01 },
+    { Month: 'Sep', Value: 0.01 },
+    { Month: 'Oct', Value: 0.01 },
+    { Month: 'Nov', Value: 0.01 },
+    { Month: 'Dec', Value: 0.01 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo3.vue b/examples/sites/demos/pc/app/chart/histogram/demo3.vue
index a6b747fa6..ca2959b42 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           barMinHeight: 2 // 最小高度为2
         },
         data: [
-          { 'Month': 'Jan', 'Value': 100 },
-          { 'Month': 'Feb', 'Value': 0.01 },
-          { 'Month': 'Mar', 'Value': 0.01 },
-          { 'Month': 'Apr', 'Value': 0.01 },
-          { 'Month': 'May', 'Value': 0.01 },
-          { 'Month': 'Jun', 'Value': 0.01 },
-          { 'Month': 'Jul', 'Value': 0.01 },
-          { 'Month': 'Aug', 'Value': 0.01 },
-          { 'Month': 'Sep', 'Value': 0.01 },
-          { 'Month': 'Oct', 'Value': 0.01 },
-          { 'Month': 'Nov', 'Value': 0.01 },
-          { 'Month': 'Dec', 'Value': 0.01 }
+          { Month: 'Jan', Value: 100 },
+          { Month: 'Feb', Value: 0.01 },
+          { Month: 'Mar', Value: 0.01 },
+          { Month: 'Apr', Value: 0.01 },
+          { Month: 'May', Value: 0.01 },
+          { Month: 'Jun', Value: 0.01 },
+          { Month: 'Jul', Value: 0.01 },
+          { Month: 'Aug', Value: 0.01 },
+          { Month: 'Sep', Value: 0.01 },
+          { Month: 'Oct', Value: 0.01 },
+          { Month: 'Nov', Value: 0.01 },
+          { Month: 'Dec', Value: 0.01 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/histogram/demo4-composition-api.vue
index 8cc8c9a47..5be10cc46 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   legend: {
@@ -33,18 +33,18 @@ const options = ref({
     return htmlString
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 17 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 27 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 17 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 17 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 37 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 17 }
+    { Month: 'Jan', Domestic: 33, Abroad: 17 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 27 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 17 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 17 },
+    { Month: 'Sep', Domestic: 17, Abroad: 37 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 17 }
   ],
   xAxis: 'Month',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo4.vue b/examples/sites/demos/pc/app/chart/histogram/demo4.vue
index 8b0e2fe18..850cf097b 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
@@ -38,18 +38,18 @@ export default {
           return htmlString
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 17 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 27 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 17 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 17 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 37 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 17 }
+          { Month: 'Jan', Domestic: 33, Abroad: 17 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 27 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 17 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 17 },
+          { Month: 'Sep', Domestic: 17, Abroad: 37 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 17 }
         ],
         xAxis: 'Month',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/histogram/demo5-composition-api.vue
index c3111d153..e743d84e2 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   legend: {
@@ -14,18 +14,18 @@ const options = ref({
   },
   type: 'stack',
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: 'Month',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo5.vue b/examples/sites/demos/pc/app/chart/histogram/demo5.vue
index e97e3427a..90bf5ad18 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
@@ -19,18 +19,18 @@ export default {
         },
         type: 'stack',
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: 'Month',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/histogram/demo6-composition-api.vue
index eb5dfec59..d71cb0002 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   itemStyle: {
@@ -30,67 +30,67 @@ const options = ref({
     }
   },
   data: [
-    { 'Time': '01:00', 'Domestic': 33, 'Abroad': 41 },
-    { 'Time': '01:01', 'Domestic': 27, 'Abroad': 39 },
-    { 'Time': '01:02', 'Domestic': 31, 'Abroad': 20 },
-    { 'Time': '01:03', 'Domestic': 30, 'Abroad': 15 },
-    { 'Time': '01:04', 'Domestic': 41, 'Abroad': 13 },
-    { 'Time': '01:05', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:06', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:07', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:08', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:09', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:10', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:11', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:12', 'Domestic': 33, 'Abroad': 37 },
-    { 'Time': '01:13', 'Domestic': 27, 'Abroad': 39 },
-    { 'Time': '01:14', 'Domestic': 41, 'Abroad': 20 },
-    { 'Time': '01:15', 'Domestic': 30, 'Abroad': 15 },
-    { 'Time': '01:16', 'Domestic': 37, 'Abroad': 13 },
-    { 'Time': '01:17', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:18', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:19', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:20', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:21', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:22', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:23', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:24', 'Domestic': 33, 'Abroad': 41 },
-    { 'Time': '01:25', 'Domestic': 27, 'Abroad': 39 },
-    { 'Time': '01:26', 'Domestic': 31, 'Abroad': 20 },
-    { 'Time': '01:27', 'Domestic': 41, 'Abroad': 15 },
-    { 'Time': '01:28', 'Domestic': 37, 'Abroad': 13 },
-    { 'Time': '01:29', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:30', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:31', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:32', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:33', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:34', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:35', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:36', 'Domestic': 33, 'Abroad': 37 },
-    { 'Time': '01:37', 'Domestic': 41, 'Abroad': 39 },
-    { 'Time': '01:38', 'Domestic': 31, 'Abroad': 20 },
-    { 'Time': '01:39', 'Domestic': 30, 'Abroad': 15 },
-    { 'Time': '01:40', 'Domestic': 37, 'Abroad': 13 },
-    { 'Time': '01:41', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:42', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:43', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:44', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:45', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:46', 'Domestic': 41, 'Abroad': 22 },
-    { 'Time': '01:47', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:48', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:49', 'Domestic': 33, 'Abroad': 37 },
-    { 'Time': '01:50', 'Domestic': 27, 'Abroad': 39 },
-    { 'Time': '01:51', 'Domestic': 31, 'Abroad': 20 },
-    { 'Time': '01:52', 'Domestic': 41, 'Abroad': 15 },
-    { 'Time': '01:53', 'Domestic': 37, 'Abroad': 13 },
-    { 'Time': '01:54', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:55', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:56', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:57', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:58', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:59', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '02:00', 'Domestic': 41, 'Abroad': 11 }
+    { Time: '01:00', Domestic: 33, Abroad: 41 },
+    { Time: '01:01', Domestic: 27, Abroad: 39 },
+    { Time: '01:02', Domestic: 31, Abroad: 20 },
+    { Time: '01:03', Domestic: 30, Abroad: 15 },
+    { Time: '01:04', Domestic: 41, Abroad: 13 },
+    { Time: '01:05', Domestic: 36, Abroad: 17 },
+    { Time: '01:06', Domestic: 42, Abroad: 22 },
+    { Time: '01:07', Domestic: 22, Abroad: 12 },
+    { Time: '01:08', Domestic: 17, Abroad: 30 },
+    { Time: '01:09', Domestic: 40, Abroad: 33 },
+    { Time: '01:10', Domestic: 42, Abroad: 22 },
+    { Time: '01:11', Domestic: 32, Abroad: 11 },
+    { Time: '01:12', Domestic: 33, Abroad: 37 },
+    { Time: '01:13', Domestic: 27, Abroad: 39 },
+    { Time: '01:14', Domestic: 41, Abroad: 20 },
+    { Time: '01:15', Domestic: 30, Abroad: 15 },
+    { Time: '01:16', Domestic: 37, Abroad: 13 },
+    { Time: '01:17', Domestic: 36, Abroad: 17 },
+    { Time: '01:18', Domestic: 42, Abroad: 22 },
+    { Time: '01:19', Domestic: 22, Abroad: 12 },
+    { Time: '01:20', Domestic: 17, Abroad: 30 },
+    { Time: '01:21', Domestic: 40, Abroad: 33 },
+    { Time: '01:22', Domestic: 42, Abroad: 22 },
+    { Time: '01:23', Domestic: 32, Abroad: 11 },
+    { Time: '01:24', Domestic: 33, Abroad: 41 },
+    { Time: '01:25', Domestic: 27, Abroad: 39 },
+    { Time: '01:26', Domestic: 31, Abroad: 20 },
+    { Time: '01:27', Domestic: 41, Abroad: 15 },
+    { Time: '01:28', Domestic: 37, Abroad: 13 },
+    { Time: '01:29', Domestic: 36, Abroad: 17 },
+    { Time: '01:30', Domestic: 42, Abroad: 22 },
+    { Time: '01:31', Domestic: 22, Abroad: 12 },
+    { Time: '01:32', Domestic: 17, Abroad: 30 },
+    { Time: '01:33', Domestic: 40, Abroad: 33 },
+    { Time: '01:34', Domestic: 42, Abroad: 22 },
+    { Time: '01:35', Domestic: 32, Abroad: 11 },
+    { Time: '01:36', Domestic: 33, Abroad: 37 },
+    { Time: '01:37', Domestic: 41, Abroad: 39 },
+    { Time: '01:38', Domestic: 31, Abroad: 20 },
+    { Time: '01:39', Domestic: 30, Abroad: 15 },
+    { Time: '01:40', Domestic: 37, Abroad: 13 },
+    { Time: '01:41', Domestic: 36, Abroad: 17 },
+    { Time: '01:42', Domestic: 42, Abroad: 22 },
+    { Time: '01:43', Domestic: 22, Abroad: 12 },
+    { Time: '01:44', Domestic: 17, Abroad: 30 },
+    { Time: '01:45', Domestic: 40, Abroad: 33 },
+    { Time: '01:46', Domestic: 41, Abroad: 22 },
+    { Time: '01:47', Domestic: 32, Abroad: 11 },
+    { Time: '01:48', Domestic: 32, Abroad: 11 },
+    { Time: '01:49', Domestic: 33, Abroad: 37 },
+    { Time: '01:50', Domestic: 27, Abroad: 39 },
+    { Time: '01:51', Domestic: 31, Abroad: 20 },
+    { Time: '01:52', Domestic: 41, Abroad: 15 },
+    { Time: '01:53', Domestic: 37, Abroad: 13 },
+    { Time: '01:54', Domestic: 36, Abroad: 17 },
+    { Time: '01:55', Domestic: 42, Abroad: 22 },
+    { Time: '01:56', Domestic: 22, Abroad: 12 },
+    { Time: '01:57', Domestic: 17, Abroad: 30 },
+    { Time: '01:58', Domestic: 40, Abroad: 33 },
+    { Time: '01:59', Domestic: 42, Abroad: 22 },
+    { Time: '02:00', Domestic: 41, Abroad: 11 }
   ],
   xAxis: 'Month'
 })
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo6.vue b/examples/sites/demos/pc/app/chart/histogram/demo6.vue
index 23e65fff7..74fe7df3e 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
@@ -35,67 +35,67 @@ export default {
           }
         },
         data: [
-          { 'Time': '01:00', 'Domestic': 33, 'Abroad': 41 },
-          { 'Time': '01:01', 'Domestic': 27, 'Abroad': 39 },
-          { 'Time': '01:02', 'Domestic': 31, 'Abroad': 20 },
-          { 'Time': '01:03', 'Domestic': 30, 'Abroad': 15 },
-          { 'Time': '01:04', 'Domestic': 41, 'Abroad': 13 },
-          { 'Time': '01:05', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:06', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:07', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:08', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:09', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:10', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:11', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:12', 'Domestic': 33, 'Abroad': 37 },
-          { 'Time': '01:13', 'Domestic': 27, 'Abroad': 39 },
-          { 'Time': '01:14', 'Domestic': 41, 'Abroad': 20 },
-          { 'Time': '01:15', 'Domestic': 30, 'Abroad': 15 },
-          { 'Time': '01:16', 'Domestic': 37, 'Abroad': 13 },
-          { 'Time': '01:17', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:18', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:19', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:20', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:21', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:22', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:23', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:24', 'Domestic': 33, 'Abroad': 41 },
-          { 'Time': '01:25', 'Domestic': 27, 'Abroad': 39 },
-          { 'Time': '01:26', 'Domestic': 31, 'Abroad': 20 },
-          { 'Time': '01:27', 'Domestic': 41, 'Abroad': 15 },
-          { 'Time': '01:28', 'Domestic': 37, 'Abroad': 13 },
-          { 'Time': '01:29', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:30', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:31', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:32', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:33', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:34', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:35', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:36', 'Domestic': 33, 'Abroad': 37 },
-          { 'Time': '01:37', 'Domestic': 41, 'Abroad': 39 },
-          { 'Time': '01:38', 'Domestic': 31, 'Abroad': 20 },
-          { 'Time': '01:39', 'Domestic': 30, 'Abroad': 15 },
-          { 'Time': '01:40', 'Domestic': 37, 'Abroad': 13 },
-          { 'Time': '01:41', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:42', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:43', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:44', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:45', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:46', 'Domestic': 41, 'Abroad': 22 },
-          { 'Time': '01:47', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:48', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:49', 'Domestic': 33, 'Abroad': 37 },
-          { 'Time': '01:50', 'Domestic': 27, 'Abroad': 39 },
-          { 'Time': '01:51', 'Domestic': 31, 'Abroad': 20 },
-          { 'Time': '01:52', 'Domestic': 41, 'Abroad': 15 },
-          { 'Time': '01:53', 'Domestic': 37, 'Abroad': 13 },
-          { 'Time': '01:54', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:55', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:56', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:57', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:58', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:59', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '02:00', 'Domestic': 41, 'Abroad': 11 }
+          { Time: '01:00', Domestic: 33, Abroad: 41 },
+          { Time: '01:01', Domestic: 27, Abroad: 39 },
+          { Time: '01:02', Domestic: 31, Abroad: 20 },
+          { Time: '01:03', Domestic: 30, Abroad: 15 },
+          { Time: '01:04', Domestic: 41, Abroad: 13 },
+          { Time: '01:05', Domestic: 36, Abroad: 17 },
+          { Time: '01:06', Domestic: 42, Abroad: 22 },
+          { Time: '01:07', Domestic: 22, Abroad: 12 },
+          { Time: '01:08', Domestic: 17, Abroad: 30 },
+          { Time: '01:09', Domestic: 40, Abroad: 33 },
+          { Time: '01:10', Domestic: 42, Abroad: 22 },
+          { Time: '01:11', Domestic: 32, Abroad: 11 },
+          { Time: '01:12', Domestic: 33, Abroad: 37 },
+          { Time: '01:13', Domestic: 27, Abroad: 39 },
+          { Time: '01:14', Domestic: 41, Abroad: 20 },
+          { Time: '01:15', Domestic: 30, Abroad: 15 },
+          { Time: '01:16', Domestic: 37, Abroad: 13 },
+          { Time: '01:17', Domestic: 36, Abroad: 17 },
+          { Time: '01:18', Domestic: 42, Abroad: 22 },
+          { Time: '01:19', Domestic: 22, Abroad: 12 },
+          { Time: '01:20', Domestic: 17, Abroad: 30 },
+          { Time: '01:21', Domestic: 40, Abroad: 33 },
+          { Time: '01:22', Domestic: 42, Abroad: 22 },
+          { Time: '01:23', Domestic: 32, Abroad: 11 },
+          { Time: '01:24', Domestic: 33, Abroad: 41 },
+          { Time: '01:25', Domestic: 27, Abroad: 39 },
+          { Time: '01:26', Domestic: 31, Abroad: 20 },
+          { Time: '01:27', Domestic: 41, Abroad: 15 },
+          { Time: '01:28', Domestic: 37, Abroad: 13 },
+          { Time: '01:29', Domestic: 36, Abroad: 17 },
+          { Time: '01:30', Domestic: 42, Abroad: 22 },
+          { Time: '01:31', Domestic: 22, Abroad: 12 },
+          { Time: '01:32', Domestic: 17, Abroad: 30 },
+          { Time: '01:33', Domestic: 40, Abroad: 33 },
+          { Time: '01:34', Domestic: 42, Abroad: 22 },
+          { Time: '01:35', Domestic: 32, Abroad: 11 },
+          { Time: '01:36', Domestic: 33, Abroad: 37 },
+          { Time: '01:37', Domestic: 41, Abroad: 39 },
+          { Time: '01:38', Domestic: 31, Abroad: 20 },
+          { Time: '01:39', Domestic: 30, Abroad: 15 },
+          { Time: '01:40', Domestic: 37, Abroad: 13 },
+          { Time: '01:41', Domestic: 36, Abroad: 17 },
+          { Time: '01:42', Domestic: 42, Abroad: 22 },
+          { Time: '01:43', Domestic: 22, Abroad: 12 },
+          { Time: '01:44', Domestic: 17, Abroad: 30 },
+          { Time: '01:45', Domestic: 40, Abroad: 33 },
+          { Time: '01:46', Domestic: 41, Abroad: 22 },
+          { Time: '01:47', Domestic: 32, Abroad: 11 },
+          { Time: '01:48', Domestic: 32, Abroad: 11 },
+          { Time: '01:49', Domestic: 33, Abroad: 37 },
+          { Time: '01:50', Domestic: 27, Abroad: 39 },
+          { Time: '01:51', Domestic: 31, Abroad: 20 },
+          { Time: '01:52', Domestic: 41, Abroad: 15 },
+          { Time: '01:53', Domestic: 37, Abroad: 13 },
+          { Time: '01:54', Domestic: 36, Abroad: 17 },
+          { Time: '01:55', Domestic: 42, Abroad: 22 },
+          { Time: '01:56', Domestic: 22, Abroad: 12 },
+          { Time: '01:57', Domestic: 17, Abroad: 30 },
+          { Time: '01:58', Domestic: 40, Abroad: 33 },
+          { Time: '01:59', Domestic: 42, Abroad: 22 },
+          { Time: '02:00', Domestic: 41, Abroad: 11 }
         ],
         xAxis: 'Month'
       }
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo7-composition-api.vue b/examples/sites/demos/pc/app/chart/histogram/demo7-composition-api.vue
index 46999b500..6e4d744f5 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo7-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo7-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   legend: {
@@ -18,18 +18,18 @@ const options = ref({
     offset: [0, -6]
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: 'Month'
 })
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo7.vue b/examples/sites/demos/pc/app/chart/histogram/demo7.vue
index f5d7bb76e..93a55a461 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo7.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo7.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
@@ -23,18 +23,18 @@ export default {
           offset: [0, -6]
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: 'Month'
       }
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo8-composition-api.vue b/examples/sites/demos/pc/app/chart/histogram/demo8-composition-api.vue
index 5cca8efb3..f7f09df53 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo8-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo8-composition-api.vue
@@ -6,22 +6,22 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: {
     data: 'Month',
diff --git a/examples/sites/demos/pc/app/chart/histogram/demo8.vue b/examples/sites/demos/pc/app/chart/histogram/demo8.vue
index b436775bb..b3265b02b 100644
--- a/examples/sites/demos/pc/app/chart/histogram/demo8.vue
+++ b/examples/sites/demos/pc/app/chart/histogram/demo8.vue
@@ -5,28 +5,28 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
       options: {
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: {
           data: 'Month',
diff --git a/examples/sites/demos/pc/app/chart/line/base-composition-api.vue b/examples/sites/demos/pc/app/chart/line/base-composition-api.vue
index 743df30cc..1882e82a9 100644
--- a/examples/sites/demos/pc/app/chart/line/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -15,18 +15,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: 'Month',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/base.vue b/examples/sites/demos/pc/app/chart/line/base.vue
index dc25c74c2..99d0a2903 100644
--- a/examples/sites/demos/pc/app/chart/line/base.vue
+++ b/examples/sites/demos/pc/app/chart/line/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -20,18 +20,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: 'Month',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/line/demo2-composition-api.vue
index d827befc7..103cfa2c9 100644
--- a/examples/sites/demos/pc/app/chart/line/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -16,18 +16,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: {
     data: 'Month',
diff --git a/examples/sites/demos/pc/app/chart/line/demo2.vue b/examples/sites/demos/pc/app/chart/line/demo2.vue
index 148dcc197..cbbe11e82 100644
--- a/examples/sites/demos/pc/app/chart/line/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -21,18 +21,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: {
           data: 'Month',
diff --git a/examples/sites/demos/pc/app/chart/line/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/line/demo3-composition-api.vue
index 09ef00d72..6635a0545 100644
--- a/examples/sites/demos/pc/app/chart/line/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -16,18 +16,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: 'Month',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo3.vue b/examples/sites/demos/pc/app/chart/line/demo3.vue
index 889735d7b..ebac9db62 100644
--- a/examples/sites/demos/pc/app/chart/line/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -21,18 +21,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: 'Month',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/line/demo4-composition-api.vue
index ab7e29330..be967d061 100644
--- a/examples/sites/demos/pc/app/chart/line/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -15,18 +15,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': '', 'Abroad': undefined },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': '', 'Abroad': '' },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: '', Abroad: undefined },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: '', Abroad: '' },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: 'Month',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo4.vue b/examples/sites/demos/pc/app/chart/line/demo4.vue
index bec6b2479..ff756c26d 100644
--- a/examples/sites/demos/pc/app/chart/line/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -20,18 +20,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': '', 'Abroad': undefined },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': '', 'Abroad': '' },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: '', Abroad: undefined },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: '', Abroad: '' },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: 'Month',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/line/demo5-composition-api.vue
index 7092f6e97..cac0442ef 100644
--- a/examples/sites/demos/pc/app/chart/line/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -14,18 +14,18 @@ const options = ref({
     show: true
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: {
     data: 'Month',
diff --git a/examples/sites/demos/pc/app/chart/line/demo5.vue b/examples/sites/demos/pc/app/chart/line/demo5.vue
index 357f56093..03169d204 100644
--- a/examples/sites/demos/pc/app/chart/line/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -19,18 +19,18 @@ export default {
           show: true
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: {
           data: 'Month',
diff --git a/examples/sites/demos/pc/app/chart/line/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/line/demo6-composition-api.vue
index 1db8bba56..32c11e7bc 100644
--- a/examples/sites/demos/pc/app/chart/line/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -15,18 +15,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: 'Month',
 
diff --git a/examples/sites/demos/pc/app/chart/line/demo6.vue b/examples/sites/demos/pc/app/chart/line/demo6.vue
index f709b5b60..8255f804f 100644
--- a/examples/sites/demos/pc/app/chart/line/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -20,18 +20,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: 'Month',
 
diff --git a/examples/sites/demos/pc/app/chart/line/demo7-composition-api.vue b/examples/sites/demos/pc/app/chart/line/demo7-composition-api.vue
index 43ec2bb35..3d22e988c 100644
--- a/examples/sites/demos/pc/app/chart/line/demo7-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo7-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   markLine: {
@@ -14,18 +14,18 @@ const options = ref({
     bottom: 20
   },
   data: [
-    { 'Month': 'Jan', 'Domestic': 33 },
-    { 'Month': 'Feb', 'Domestic': 27 },
-    { 'Month': 'Mar', 'Domestic': 31 },
-    { 'Month': 'Apr', 'Domestic': 30 },
-    { 'Month': 'May', 'Domestic': 37 },
-    { 'Month': 'Jun', 'Domestic': 36 },
-    { 'Month': 'Jul', 'Domestic': 42 },
-    { 'Month': 'Aug', 'Domestic': 22 },
-    { 'Month': 'Sep', 'Domestic': 17 },
-    { 'Month': 'Oct', 'Domestic': 40 },
-    { 'Month': 'Nov', 'Domestic': 42 },
-    { 'Month': 'Dec', 'Domestic': 32 }
+    { Month: 'Jan', Domestic: 33 },
+    { Month: 'Feb', Domestic: 27 },
+    { Month: 'Mar', Domestic: 31 },
+    { Month: 'Apr', Domestic: 30 },
+    { Month: 'May', Domestic: 37 },
+    { Month: 'Jun', Domestic: 36 },
+    { Month: 'Jul', Domestic: 42 },
+    { Month: 'Aug', Domestic: 22 },
+    { Month: 'Sep', Domestic: 17 },
+    { Month: 'Oct', Domestic: 40 },
+    { Month: 'Nov', Domestic: 42 },
+    { Month: 'Dec', Domestic: 32 }
   ],
   xAxis: 'Month',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo7.vue b/examples/sites/demos/pc/app/chart/line/demo7.vue
index 62a393d7b..8680aa492 100644
--- a/examples/sites/demos/pc/app/chart/line/demo7.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo7.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -19,18 +19,18 @@ export default {
           bottom: 20
         },
         data: [
-          { 'Month': 'Jan', 'Domestic': 33 },
-          { 'Month': 'Feb', 'Domestic': 27 },
-          { 'Month': 'Mar', 'Domestic': 31 },
-          { 'Month': 'Apr', 'Domestic': 30 },
-          { 'Month': 'May', 'Domestic': 37 },
-          { 'Month': 'Jun', 'Domestic': 36 },
-          { 'Month': 'Jul', 'Domestic': 42 },
-          { 'Month': 'Aug', 'Domestic': 22 },
-          { 'Month': 'Sep', 'Domestic': 17 },
-          { 'Month': 'Oct', 'Domestic': 40 },
-          { 'Month': 'Nov', 'Domestic': 42 },
-          { 'Month': 'Dec', 'Domestic': 32 }
+          { Month: 'Jan', Domestic: 33 },
+          { Month: 'Feb', Domestic: 27 },
+          { Month: 'Mar', Domestic: 31 },
+          { Month: 'Apr', Domestic: 30 },
+          { Month: 'May', Domestic: 37 },
+          { Month: 'Jun', Domestic: 36 },
+          { Month: 'Jul', Domestic: 42 },
+          { Month: 'Aug', Domestic: 22 },
+          { Month: 'Sep', Domestic: 17 },
+          { Month: 'Oct', Domestic: 40 },
+          { Month: 'Nov', Domestic: 42 },
+          { Month: 'Dec', Domestic: 32 }
         ],
         xAxis: 'Month',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo8-composition-api.vue b/examples/sites/demos/pc/app/chart/line/demo8-composition-api.vue
index d5fde0808..20aabd5d8 100644
--- a/examples/sites/demos/pc/app/chart/line/demo8-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo8-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -27,67 +27,67 @@ const options = ref({
     }
   },
   data: [
-    { 'Time': '01:00', 'Domestic': 33, 'Abroad': 41 },
-    { 'Time': '01:01', 'Domestic': 27, 'Abroad': 39 },
-    { 'Time': '01:02', 'Domestic': 31, 'Abroad': 20 },
-    { 'Time': '01:03', 'Domestic': 30, 'Abroad': 15 },
-    { 'Time': '01:04', 'Domestic': 41, 'Abroad': 13 },
-    { 'Time': '01:05', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:06', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:07', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:08', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:09', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:10', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:11', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:12', 'Domestic': 33, 'Abroad': 37 },
-    { 'Time': '01:13', 'Domestic': 27, 'Abroad': 39 },
-    { 'Time': '01:14', 'Domestic': 41, 'Abroad': 20 },
-    { 'Time': '01:15', 'Domestic': 30, 'Abroad': 15 },
-    { 'Time': '01:16', 'Domestic': 37, 'Abroad': 13 },
-    { 'Time': '01:17', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:18', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:19', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:20', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:21', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:22', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:23', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:24', 'Domestic': 33, 'Abroad': 41 },
-    { 'Time': '01:25', 'Domestic': 27, 'Abroad': 39 },
-    { 'Time': '01:26', 'Domestic': 31, 'Abroad': 20 },
-    { 'Time': '01:27', 'Domestic': 41, 'Abroad': 15 },
-    { 'Time': '01:28', 'Domestic': 37, 'Abroad': 13 },
-    { 'Time': '01:29', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:30', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:31', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:32', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:33', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:34', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:35', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:36', 'Domestic': 33, 'Abroad': 37 },
-    { 'Time': '01:37', 'Domestic': 41, 'Abroad': 39 },
-    { 'Time': '01:38', 'Domestic': 31, 'Abroad': 20 },
-    { 'Time': '01:39', 'Domestic': 30, 'Abroad': 15 },
-    { 'Time': '01:40', 'Domestic': 37, 'Abroad': 13 },
-    { 'Time': '01:41', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:42', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:43', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:44', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:45', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:46', 'Domestic': 41, 'Abroad': 22 },
-    { 'Time': '01:47', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:48', 'Domestic': 32, 'Abroad': 11 },
-    { 'Time': '01:49', 'Domestic': 33, 'Abroad': 37 },
-    { 'Time': '01:50', 'Domestic': 27, 'Abroad': 39 },
-    { 'Time': '01:51', 'Domestic': 31, 'Abroad': 20 },
-    { 'Time': '01:52', 'Domestic': 41, 'Abroad': 15 },
-    { 'Time': '01:53', 'Domestic': 37, 'Abroad': 13 },
-    { 'Time': '01:54', 'Domestic': 36, 'Abroad': 17 },
-    { 'Time': '01:55', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '01:56', 'Domestic': 22, 'Abroad': 12 },
-    { 'Time': '01:57', 'Domestic': 17, 'Abroad': 30 },
-    { 'Time': '01:58', 'Domestic': 40, 'Abroad': 33 },
-    { 'Time': '01:59', 'Domestic': 42, 'Abroad': 22 },
-    { 'Time': '02:00', 'Domestic': 41, 'Abroad': 11 }
+    { Time: '01:00', Domestic: 33, Abroad: 41 },
+    { Time: '01:01', Domestic: 27, Abroad: 39 },
+    { Time: '01:02', Domestic: 31, Abroad: 20 },
+    { Time: '01:03', Domestic: 30, Abroad: 15 },
+    { Time: '01:04', Domestic: 41, Abroad: 13 },
+    { Time: '01:05', Domestic: 36, Abroad: 17 },
+    { Time: '01:06', Domestic: 42, Abroad: 22 },
+    { Time: '01:07', Domestic: 22, Abroad: 12 },
+    { Time: '01:08', Domestic: 17, Abroad: 30 },
+    { Time: '01:09', Domestic: 40, Abroad: 33 },
+    { Time: '01:10', Domestic: 42, Abroad: 22 },
+    { Time: '01:11', Domestic: 32, Abroad: 11 },
+    { Time: '01:12', Domestic: 33, Abroad: 37 },
+    { Time: '01:13', Domestic: 27, Abroad: 39 },
+    { Time: '01:14', Domestic: 41, Abroad: 20 },
+    { Time: '01:15', Domestic: 30, Abroad: 15 },
+    { Time: '01:16', Domestic: 37, Abroad: 13 },
+    { Time: '01:17', Domestic: 36, Abroad: 17 },
+    { Time: '01:18', Domestic: 42, Abroad: 22 },
+    { Time: '01:19', Domestic: 22, Abroad: 12 },
+    { Time: '01:20', Domestic: 17, Abroad: 30 },
+    { Time: '01:21', Domestic: 40, Abroad: 33 },
+    { Time: '01:22', Domestic: 42, Abroad: 22 },
+    { Time: '01:23', Domestic: 32, Abroad: 11 },
+    { Time: '01:24', Domestic: 33, Abroad: 41 },
+    { Time: '01:25', Domestic: 27, Abroad: 39 },
+    { Time: '01:26', Domestic: 31, Abroad: 20 },
+    { Time: '01:27', Domestic: 41, Abroad: 15 },
+    { Time: '01:28', Domestic: 37, Abroad: 13 },
+    { Time: '01:29', Domestic: 36, Abroad: 17 },
+    { Time: '01:30', Domestic: 42, Abroad: 22 },
+    { Time: '01:31', Domestic: 22, Abroad: 12 },
+    { Time: '01:32', Domestic: 17, Abroad: 30 },
+    { Time: '01:33', Domestic: 40, Abroad: 33 },
+    { Time: '01:34', Domestic: 42, Abroad: 22 },
+    { Time: '01:35', Domestic: 32, Abroad: 11 },
+    { Time: '01:36', Domestic: 33, Abroad: 37 },
+    { Time: '01:37', Domestic: 41, Abroad: 39 },
+    { Time: '01:38', Domestic: 31, Abroad: 20 },
+    { Time: '01:39', Domestic: 30, Abroad: 15 },
+    { Time: '01:40', Domestic: 37, Abroad: 13 },
+    { Time: '01:41', Domestic: 36, Abroad: 17 },
+    { Time: '01:42', Domestic: 42, Abroad: 22 },
+    { Time: '01:43', Domestic: 22, Abroad: 12 },
+    { Time: '01:44', Domestic: 17, Abroad: 30 },
+    { Time: '01:45', Domestic: 40, Abroad: 33 },
+    { Time: '01:46', Domestic: 41, Abroad: 22 },
+    { Time: '01:47', Domestic: 32, Abroad: 11 },
+    { Time: '01:48', Domestic: 32, Abroad: 11 },
+    { Time: '01:49', Domestic: 33, Abroad: 37 },
+    { Time: '01:50', Domestic: 27, Abroad: 39 },
+    { Time: '01:51', Domestic: 31, Abroad: 20 },
+    { Time: '01:52', Domestic: 41, Abroad: 15 },
+    { Time: '01:53', Domestic: 37, Abroad: 13 },
+    { Time: '01:54', Domestic: 36, Abroad: 17 },
+    { Time: '01:55', Domestic: 42, Abroad: 22 },
+    { Time: '01:56', Domestic: 22, Abroad: 12 },
+    { Time: '01:57', Domestic: 17, Abroad: 30 },
+    { Time: '01:58', Domestic: 40, Abroad: 33 },
+    { Time: '01:59', Domestic: 42, Abroad: 22 },
+    { Time: '02:00', Domestic: 41, Abroad: 11 }
   ],
   xAxis: 'Time',
   yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo8.vue b/examples/sites/demos/pc/app/chart/line/demo8.vue
index 1d9c6dedd..9cae02cbc 100644
--- a/examples/sites/demos/pc/app/chart/line/demo8.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo8.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -32,67 +32,67 @@ export default {
           }
         },
         data: [
-          { 'Time': '01:00', 'Domestic': 33, 'Abroad': 41 },
-          { 'Time': '01:01', 'Domestic': 27, 'Abroad': 39 },
-          { 'Time': '01:02', 'Domestic': 31, 'Abroad': 20 },
-          { 'Time': '01:03', 'Domestic': 30, 'Abroad': 15 },
-          { 'Time': '01:04', 'Domestic': 41, 'Abroad': 13 },
-          { 'Time': '01:05', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:06', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:07', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:08', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:09', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:10', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:11', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:12', 'Domestic': 33, 'Abroad': 37 },
-          { 'Time': '01:13', 'Domestic': 27, 'Abroad': 39 },
-          { 'Time': '01:14', 'Domestic': 41, 'Abroad': 20 },
-          { 'Time': '01:15', 'Domestic': 30, 'Abroad': 15 },
-          { 'Time': '01:16', 'Domestic': 37, 'Abroad': 13 },
-          { 'Time': '01:17', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:18', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:19', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:20', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:21', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:22', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:23', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:24', 'Domestic': 33, 'Abroad': 41 },
-          { 'Time': '01:25', 'Domestic': 27, 'Abroad': 39 },
-          { 'Time': '01:26', 'Domestic': 31, 'Abroad': 20 },
-          { 'Time': '01:27', 'Domestic': 41, 'Abroad': 15 },
-          { 'Time': '01:28', 'Domestic': 37, 'Abroad': 13 },
-          { 'Time': '01:29', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:30', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:31', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:32', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:33', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:34', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:35', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:36', 'Domestic': 33, 'Abroad': 37 },
-          { 'Time': '01:37', 'Domestic': 41, 'Abroad': 39 },
-          { 'Time': '01:38', 'Domestic': 31, 'Abroad': 20 },
-          { 'Time': '01:39', 'Domestic': 30, 'Abroad': 15 },
-          { 'Time': '01:40', 'Domestic': 37, 'Abroad': 13 },
-          { 'Time': '01:41', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:42', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:43', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:44', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:45', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:46', 'Domestic': 41, 'Abroad': 22 },
-          { 'Time': '01:47', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:48', 'Domestic': 32, 'Abroad': 11 },
-          { 'Time': '01:49', 'Domestic': 33, 'Abroad': 37 },
-          { 'Time': '01:50', 'Domestic': 27, 'Abroad': 39 },
-          { 'Time': '01:51', 'Domestic': 31, 'Abroad': 20 },
-          { 'Time': '01:52', 'Domestic': 41, 'Abroad': 15 },
-          { 'Time': '01:53', 'Domestic': 37, 'Abroad': 13 },
-          { 'Time': '01:54', 'Domestic': 36, 'Abroad': 17 },
-          { 'Time': '01:55', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '01:56', 'Domestic': 22, 'Abroad': 12 },
-          { 'Time': '01:57', 'Domestic': 17, 'Abroad': 30 },
-          { 'Time': '01:58', 'Domestic': 40, 'Abroad': 33 },
-          { 'Time': '01:59', 'Domestic': 42, 'Abroad': 22 },
-          { 'Time': '02:00', 'Domestic': 41, 'Abroad': 11 }
+          { Time: '01:00', Domestic: 33, Abroad: 41 },
+          { Time: '01:01', Domestic: 27, Abroad: 39 },
+          { Time: '01:02', Domestic: 31, Abroad: 20 },
+          { Time: '01:03', Domestic: 30, Abroad: 15 },
+          { Time: '01:04', Domestic: 41, Abroad: 13 },
+          { Time: '01:05', Domestic: 36, Abroad: 17 },
+          { Time: '01:06', Domestic: 42, Abroad: 22 },
+          { Time: '01:07', Domestic: 22, Abroad: 12 },
+          { Time: '01:08', Domestic: 17, Abroad: 30 },
+          { Time: '01:09', Domestic: 40, Abroad: 33 },
+          { Time: '01:10', Domestic: 42, Abroad: 22 },
+          { Time: '01:11', Domestic: 32, Abroad: 11 },
+          { Time: '01:12', Domestic: 33, Abroad: 37 },
+          { Time: '01:13', Domestic: 27, Abroad: 39 },
+          { Time: '01:14', Domestic: 41, Abroad: 20 },
+          { Time: '01:15', Domestic: 30, Abroad: 15 },
+          { Time: '01:16', Domestic: 37, Abroad: 13 },
+          { Time: '01:17', Domestic: 36, Abroad: 17 },
+          { Time: '01:18', Domestic: 42, Abroad: 22 },
+          { Time: '01:19', Domestic: 22, Abroad: 12 },
+          { Time: '01:20', Domestic: 17, Abroad: 30 },
+          { Time: '01:21', Domestic: 40, Abroad: 33 },
+          { Time: '01:22', Domestic: 42, Abroad: 22 },
+          { Time: '01:23', Domestic: 32, Abroad: 11 },
+          { Time: '01:24', Domestic: 33, Abroad: 41 },
+          { Time: '01:25', Domestic: 27, Abroad: 39 },
+          { Time: '01:26', Domestic: 31, Abroad: 20 },
+          { Time: '01:27', Domestic: 41, Abroad: 15 },
+          { Time: '01:28', Domestic: 37, Abroad: 13 },
+          { Time: '01:29', Domestic: 36, Abroad: 17 },
+          { Time: '01:30', Domestic: 42, Abroad: 22 },
+          { Time: '01:31', Domestic: 22, Abroad: 12 },
+          { Time: '01:32', Domestic: 17, Abroad: 30 },
+          { Time: '01:33', Domestic: 40, Abroad: 33 },
+          { Time: '01:34', Domestic: 42, Abroad: 22 },
+          { Time: '01:35', Domestic: 32, Abroad: 11 },
+          { Time: '01:36', Domestic: 33, Abroad: 37 },
+          { Time: '01:37', Domestic: 41, Abroad: 39 },
+          { Time: '01:38', Domestic: 31, Abroad: 20 },
+          { Time: '01:39', Domestic: 30, Abroad: 15 },
+          { Time: '01:40', Domestic: 37, Abroad: 13 },
+          { Time: '01:41', Domestic: 36, Abroad: 17 },
+          { Time: '01:42', Domestic: 42, Abroad: 22 },
+          { Time: '01:43', Domestic: 22, Abroad: 12 },
+          { Time: '01:44', Domestic: 17, Abroad: 30 },
+          { Time: '01:45', Domestic: 40, Abroad: 33 },
+          { Time: '01:46', Domestic: 41, Abroad: 22 },
+          { Time: '01:47', Domestic: 32, Abroad: 11 },
+          { Time: '01:48', Domestic: 32, Abroad: 11 },
+          { Time: '01:49', Domestic: 33, Abroad: 37 },
+          { Time: '01:50', Domestic: 27, Abroad: 39 },
+          { Time: '01:51', Domestic: 31, Abroad: 20 },
+          { Time: '01:52', Domestic: 41, Abroad: 15 },
+          { Time: '01:53', Domestic: 37, Abroad: 13 },
+          { Time: '01:54', Domestic: 36, Abroad: 17 },
+          { Time: '01:55', Domestic: 42, Abroad: 22 },
+          { Time: '01:56', Domestic: 22, Abroad: 12 },
+          { Time: '01:57', Domestic: 17, Abroad: 30 },
+          { Time: '01:58', Domestic: 40, Abroad: 33 },
+          { Time: '01:59', Domestic: 42, Abroad: 22 },
+          { Time: '02:00', Domestic: 41, Abroad: 11 }
         ],
         xAxis: 'Time',
         yAxis: {
diff --git a/examples/sites/demos/pc/app/chart/line/demo9-composition-api.vue b/examples/sites/demos/pc/app/chart/line/demo9-composition-api.vue
index 498478778..359579cb8 100644
--- a/examples/sites/demos/pc/app/chart/line/demo9-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo9-composition-api.vue
@@ -6,23 +6,23 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   area: true,
   data: [
-    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+    { Month: 'Jan', Domestic: 33, Abroad: 1 },
+    { Month: 'Feb', Domestic: 27, Abroad: 39 },
+    { Month: 'Mar', Domestic: 31, Abroad: 20 },
+    { Month: 'Apr', Domestic: 30, Abroad: 15 },
+    { Month: 'May', Domestic: 37, Abroad: 1 },
+    { Month: 'Jun', Domestic: 36, Abroad: 17 },
+    { Month: 'Jul', Domestic: 42, Abroad: 22 },
+    { Month: 'Aug', Domestic: 22, Abroad: 12 },
+    { Month: 'Sep', Domestic: 17, Abroad: 30 },
+    { Month: 'Oct', Domestic: 40, Abroad: 33 },
+    { Month: 'Nov', Domestic: 42, Abroad: 22 },
+    { Month: 'Dec', Domestic: 32, Abroad: 1 }
   ],
   xAxis: {
     data: 'Month',
diff --git a/examples/sites/demos/pc/app/chart/line/demo9.vue b/examples/sites/demos/pc/app/chart/line/demo9.vue
index f7db56106..25ff09a55 100644
--- a/examples/sites/demos/pc/app/chart/line/demo9.vue
+++ b/examples/sites/demos/pc/app/chart/line/demo9.vue
@@ -5,29 +5,29 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
       options: {
         area: true,
         data: [
-          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
-          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
-          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+          { Month: 'Jan', Domestic: 33, Abroad: 1 },
+          { Month: 'Feb', Domestic: 27, Abroad: 39 },
+          { Month: 'Mar', Domestic: 31, Abroad: 20 },
+          { Month: 'Apr', Domestic: 30, Abroad: 15 },
+          { Month: 'May', Domestic: 37, Abroad: 1 },
+          { Month: 'Jun', Domestic: 36, Abroad: 17 },
+          { Month: 'Jul', Domestic: 42, Abroad: 22 },
+          { Month: 'Aug', Domestic: 22, Abroad: 12 },
+          { Month: 'Sep', Domestic: 17, Abroad: 30 },
+          { Month: 'Oct', Domestic: 40, Abroad: 33 },
+          { Month: 'Nov', Domestic: 42, Abroad: 22 },
+          { Month: 'Dec', Domestic: 32, Abroad: 1 }
         ],
         xAxis: {
           data: 'Month',
diff --git a/examples/sites/demos/pc/app/chart/liquidfill/base-composition-api.vue b/examples/sites/demos/pc/app/chart/liquidfill/base-composition-api.vue
index ca01b318c..51a18858a 100644
--- a/examples/sites/demos/pc/app/chart/liquidfill/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/liquidfill/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLiquidfill as TinyChartLiquidfill } from '@opentiny/vue'
+import { TinyHuichartsLiquidfill as TinyChartLiquidfill } from '@opentiny/vue'
 
 const options = ref({
   label: {
diff --git a/examples/sites/demos/pc/app/chart/liquidfill/base.vue b/examples/sites/demos/pc/app/chart/liquidfill/base.vue
index f41bae17d..c710d2908 100644
--- a/examples/sites/demos/pc/app/chart/liquidfill/base.vue
+++ b/examples/sites/demos/pc/app/chart/liquidfill/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLiquidfill } from '@opentiny/vue'
+import { TinyHuichartsLiquidfill } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLiquidfill: HuichartsLiquidfill
+    TinyLiquidfill: TinyHuichartsLiquidfill
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/map/base-composition-api.vue b/examples/sites/demos/pc/app/chart/map/base-composition-api.vue
index c452f5a50..05cf42d84 100644
--- a/examples/sites/demos/pc/app/chart/map/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/map/base-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { HuichartsMap as TinyChartMap } from '@opentiny/vue'
+import { TinyHuichartsMap as TinyChartMap } from '@opentiny/vue'
 import chinaData from './china.js'
 
 const chartData = ref({
diff --git a/examples/sites/demos/pc/app/chart/map/base.vue b/examples/sites/demos/pc/app/chart/map/base.vue
index b5d45bbba..be3c8fec2 100644
--- a/examples/sites/demos/pc/app/chart/map/base.vue
+++ b/examples/sites/demos/pc/app/chart/map/base.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsMap } from '@opentiny/vue'
+import { TinyHuichartsMap } from '@opentiny/vue'
 import chinaData from './china.js'
 
 export default {
   components: {
-    TinyMap: HuichartsMap
+    TinyMap: TinyHuichartsMap
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/pie/base-composition-api.vue b/examples/sites/demos/pc/app/chart/pie/base-composition-api.vue
index 526fda266..b61d0148b 100644
--- a/examples/sites/demos/pc/app/chart/pie/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/pie/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsPie as TinyChartPie } from '@opentiny/vue'
+import { TinyHuichartsPie as TinyChartPie } from '@opentiny/vue'
 
 const options = ref({
   type: 'pie',
diff --git a/examples/sites/demos/pc/app/chart/pie/base.vue b/examples/sites/demos/pc/app/chart/pie/base.vue
index d176db2a2..ee2095345 100644
--- a/examples/sites/demos/pc/app/chart/pie/base.vue
+++ b/examples/sites/demos/pc/app/chart/pie/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsPie } from '@opentiny/vue'
+import { TinyHuichartsPie } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPie: HuichartsPie
+    TinyPie: TinyHuichartsPie
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/pie/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/pie/demo2-composition-api.vue
index b2ccbcfbd..69e90aefb 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsPie as TinyChartPie } from '@opentiny/vue'
+import { TinyHuichartsPie as TinyChartPie } from '@opentiny/vue'
 
 const options = ref({
   type: 'pie',
diff --git a/examples/sites/demos/pc/app/chart/pie/demo2.vue b/examples/sites/demos/pc/app/chart/pie/demo2.vue
index 33dffdf3b..f072ce31c 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsPie } from '@opentiny/vue'
+import { TinyHuichartsPie } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPie: HuichartsPie
+    TinyPie: TinyHuichartsPie
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/pie/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/pie/demo3-composition-api.vue
index 72f70f91e..583b22514 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsPie as TinyChartPie } from '@opentiny/vue'
+import { TinyHuichartsPie as TinyChartPie } from '@opentiny/vue'
 
 const options = ref({
   type: 'pie',
diff --git a/examples/sites/demos/pc/app/chart/pie/demo3.vue b/examples/sites/demos/pc/app/chart/pie/demo3.vue
index 3890af485..d508fe261 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsPie } from '@opentiny/vue'
+import { TinyHuichartsPie } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPie: HuichartsPie
+    TinyPie: TinyHuichartsPie
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/pie/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/pie/demo4-composition-api.vue
index 6102e87bb..1ba70256e 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsPie as TinyChartPie } from '@opentiny/vue'
+import { TinyHuichartsPie as TinyChartPie } from '@opentiny/vue'
 
 const options = ref({
   type: 'pie',
diff --git a/examples/sites/demos/pc/app/chart/pie/demo4.vue b/examples/sites/demos/pc/app/chart/pie/demo4.vue
index ef46f1d03..313afdae9 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsPie } from '@opentiny/vue'
+import { TinyHuichartsPie } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPie: HuichartsPie
+    TinyPie: TinyHuichartsPie
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/pie/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/pie/demo5-composition-api.vue
index f856650d2..3e446e175 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsPie as TinyChartPie } from '@opentiny/vue'
+import { TinyHuichartsPie as TinyChartPie } from '@opentiny/vue'
 
 const options = ref({
   type: 'pie',
diff --git a/examples/sites/demos/pc/app/chart/pie/demo5.vue b/examples/sites/demos/pc/app/chart/pie/demo5.vue
index 6f1bd0266..45c286f21 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsPie } from '@opentiny/vue'
+import { TinyHuichartsPie } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPie: HuichartsPie
+    TinyPie: TinyHuichartsPie
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/pie/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/pie/demo6-composition-api.vue
index 8f0fed10a..d37d8e439 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsPie as TinyChartPie } from '@opentiny/vue'
+import { TinyHuichartsPie as TinyChartPie } from '@opentiny/vue'
 
 const options = ref({
   type: 'pie',
diff --git a/examples/sites/demos/pc/app/chart/pie/demo6.vue b/examples/sites/demos/pc/app/chart/pie/demo6.vue
index 003266806..4cb87cdb2 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsPie } from '@opentiny/vue'
+import { TinyHuichartsPie } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPie: HuichartsPie
+    TinyPie: TinyHuichartsPie
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/pie/demo7-composition-api.vue b/examples/sites/demos/pc/app/chart/pie/demo7-composition-api.vue
index 82ea48cca..c4c4d5381 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo7-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo7-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsPie as TinyChartPie } from '@opentiny/vue'
+import { TinyHuichartsPie as TinyChartPie } from '@opentiny/vue'
 
 const options = ref({
   type: 'pie',
diff --git a/examples/sites/demos/pc/app/chart/pie/demo7.vue b/examples/sites/demos/pc/app/chart/pie/demo7.vue
index 8df634c17..8b3646b28 100644
--- a/examples/sites/demos/pc/app/chart/pie/demo7.vue
+++ b/examples/sites/demos/pc/app/chart/pie/demo7.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsPie } from '@opentiny/vue'
+import { TinyHuichartsPie } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPie: HuichartsPie
+    TinyPie: TinyHuichartsPie
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/process/base-composition-api.vue b/examples/sites/demos/pc/app/chart/process/base-composition-api.vue
index fee7d1745..a6543b07d 100644
--- a/examples/sites/demos/pc/app/chart/process/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/process/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsProcess as TinyChartProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess as TinyChartProcess } from '@opentiny/vue'
 
 const options = ref({
   // 图表名称
@@ -14,10 +14,8 @@ const options = ref({
   // 主题,默认值'light'
   theme: 'light',
   // Padding控制图表距离容器的上、右、下、左padding值
-  padding: [32, 32, 0, 32],
-  // 颜色组，循环使用
-  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
-  // 数据
+  padding: [32, 32, 0, 32], // 颜色组，循环使用
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'], // 数据
   data: [
     { name: 'UniEPMgr', value: 80 },
     { name: 'SMLoglic', value: 65 },
diff --git a/examples/sites/demos/pc/app/chart/process/base.vue b/examples/sites/demos/pc/app/chart/process/base.vue
index d17baaad6..74c6f7943 100644
--- a/examples/sites/demos/pc/app/chart/process/base.vue
+++ b/examples/sites/demos/pc/app/chart/process/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProcess: HuichartsProcess
+    TinyProcess: TinyHuichartsProcess
   },
   data() {
     return {
@@ -19,10 +19,8 @@ export default {
         // 主题,默认值'light'
         theme: 'light',
         // Padding控制图表距离容器的上、右、下、左padding值
-        padding: [32, 32, 0, 32],
-        // 颜色组，循环使用
-        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
-        // 数据
+        padding: [32, 32, 0, 32], // 颜色组，循环使用
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'], // 数据
         data: [
           { name: 'UniEPMgr', value: 80 },
           { name: 'SMLoglic', value: 65 },
diff --git a/examples/sites/demos/pc/app/chart/process/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo2-composition-api.vue
index 310f2aa34..f8a9cc501 100644
--- a/examples/sites/demos/pc/app/chart/process/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsProcess as TinyChartProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess as TinyChartProcess } from '@opentiny/vue'
 
 const options = ref({
   // 图表名称
@@ -14,8 +14,7 @@ const options = ref({
   // 主题,默认值'light'
   theme: 'light',
   // Padding控制图表距离容器的上、右、下、左padding值
-  padding: [32, 32, 0, 32],
-  // 颜色组，循环使用
+  padding: [32, 32, 0, 32], // 颜色组，循环使用
   color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
   barWidth: 25,
   unit: '',
diff --git a/examples/sites/demos/pc/app/chart/process/demo2.vue b/examples/sites/demos/pc/app/chart/process/demo2.vue
index 7e8996584..00a47ed68 100644
--- a/examples/sites/demos/pc/app/chart/process/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProcess: HuichartsProcess
+    TinyProcess: TinyHuichartsProcess
   },
   data() {
     return {
@@ -19,8 +19,7 @@ export default {
         // 主题,默认值'light'
         theme: 'light',
         // Padding控制图表距离容器的上、右、下、左padding值
-        padding: [32, 32, 0, 32],
-        // 颜色组，循环使用
+        padding: [32, 32, 0, 32], // 颜色组，循环使用
         color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
         barWidth: 25,
         unit: '',
diff --git a/examples/sites/demos/pc/app/chart/process/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo3-composition-api.vue
index e742ae7ed..c6f1a0ca7 100644
--- a/examples/sites/demos/pc/app/chart/process/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsProcess as TinyChartProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess as TinyChartProcess } from '@opentiny/vue'
 
 const options = ref({
   // 图表名称
@@ -14,8 +14,7 @@ const options = ref({
   // 主题,默认值'light'
   theme: 'light',
   // Padding控制图表距离容器的上、右、下、左padding值
-  padding: [32, 32, 0, 32],
-  // 颜色组，循环使用
+  padding: [32, 32, 0, 32], // 颜色组，循环使用
   color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
   barWidth: 25,
   calibrationValue: 250,
diff --git a/examples/sites/demos/pc/app/chart/process/demo3.vue b/examples/sites/demos/pc/app/chart/process/demo3.vue
index bf603682d..b0dd14e66 100644
--- a/examples/sites/demos/pc/app/chart/process/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProcess: HuichartsProcess
+    TinyProcess: TinyHuichartsProcess
   },
   data() {
     return {
@@ -19,8 +19,7 @@ export default {
         // 主题,默认值'light'
         theme: 'light',
         // Padding控制图表距离容器的上、右、下、左padding值
-        padding: [32, 32, 0, 32],
-        // 颜色组，循环使用
+        padding: [32, 32, 0, 32], // 颜色组，循环使用
         color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
         barWidth: 25,
         calibrationValue: 250,
diff --git a/examples/sites/demos/pc/app/chart/process/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo4-composition-api.vue
index d2393b4e9..9890371cb 100644
--- a/examples/sites/demos/pc/app/chart/process/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsProcess as TinyChartProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess as TinyChartProcess } from '@opentiny/vue'
 
 const options = ref({
   name: 'ProcessBarChart',
diff --git a/examples/sites/demos/pc/app/chart/process/demo4.vue b/examples/sites/demos/pc/app/chart/process/demo4.vue
index 98bb64a9a..fe5eb4343 100644
--- a/examples/sites/demos/pc/app/chart/process/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProcess: HuichartsProcess
+    TinyProcess: TinyHuichartsProcess
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/process/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo5-composition-api.vue
index 9ed624850..a1a0697ee 100644
--- a/examples/sites/demos/pc/app/chart/process/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsProcess as TinyChartProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess as TinyChartProcess } from '@opentiny/vue'
 
 const options = ref({
   name: 'ProcessBarChart',
diff --git a/examples/sites/demos/pc/app/chart/process/demo5.vue b/examples/sites/demos/pc/app/chart/process/demo5.vue
index 4f6079ae7..b4cad4640 100644
--- a/examples/sites/demos/pc/app/chart/process/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProcess: HuichartsProcess
+    TinyProcess: TinyHuichartsProcess
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/process/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo6-composition-api.vue
index 041edb397..0b4f5123b 100644
--- a/examples/sites/demos/pc/app/chart/process/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsProcess as TinyChartProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess as TinyChartProcess } from '@opentiny/vue'
 
 const options = ref({
   name: 'ProcessBarChart',
diff --git a/examples/sites/demos/pc/app/chart/process/demo6.vue b/examples/sites/demos/pc/app/chart/process/demo6.vue
index 3ba3211c3..9f40497b2 100644
--- a/examples/sites/demos/pc/app/chart/process/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/process/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsProcess } from '@opentiny/vue'
+import { TinyHuichartsProcess } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProcess: HuichartsProcess
+    TinyProcess: TinyHuichartsProcess
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/props/base-composition-api.vue b/examples/sites/demos/pc/app/chart/props/base-composition-api.vue
index c91146e12..c39fbe4fe 100644
--- a/examples/sites/demos/pc/app/chart/props/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/base-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram as TinyChartHistogram } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -17,18 +17,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/base.vue b/examples/sites/demos/pc/app/chart/props/base.vue
index d9f79ca5d..08bbe9440 100644
--- a/examples/sites/demos/pc/app/chart/props/base.vue
+++ b/examples/sites/demos/pc/app/chart/props/base.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsHistogram } from '@opentiny/vue'
+import { TinyHuichartsHistogram } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHistogram: HuichartsHistogram
+    TinyHistogram: TinyHuichartsHistogram
   },
   data() {
     return {
@@ -22,18 +22,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo10-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo10-composition-api.vue
index e194493f9..2438f7b84 100644
--- a/examples/sites/demos/pc/app/chart/props/demo10-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo10-composition-api.vue
@@ -16,7 +16,7 @@
 // 使用前需先引入对应模块
 import { ref } from 'vue'
 import 'echarts/lib/component/dataZoom'
-import { HuichartsLine as TinyLine, Button as TinyButton } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyLine, TinyButton } from '@opentiny/vue'
 
 const extend = ref({
   legend: {
@@ -33,18 +33,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo10.vue b/examples/sites/demos/pc/app/chart/props/demo10.vue
index 334b0eec4..10908a544 100644
--- a/examples/sites/demos/pc/app/chart/props/demo10.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo10.vue
@@ -15,12 +15,12 @@
 <script>
 // 使用前需先引入对应模块
 import 'echarts/lib/component/dataZoom'
-import { HuichartsLine, Button } from '@opentiny/vue'
+import { TinyHuichartsLine, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine,
-    TinyButton: Button
+    TinyLine: TinyHuichartsLine,
+    TinyButton
   },
   data() {
     return {
@@ -39,18 +39,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo11-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo11-composition-api.vue
index dd2c43393..249c105f2 100644
--- a/examples/sites/demos/pc/app/chart/props/demo11-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo11-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo11.vue b/examples/sites/demos/pc/app/chart/props/demo11.vue
index 521ea3615..e9f853ca8 100644
--- a/examples/sites/demos/pc/app/chart/props/demo11.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo11.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo12-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo12-composition-api.vue
index c3a2c01fb..9ec1bfdec 100644
--- a/examples/sites/demos/pc/app/chart/props/demo12-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo12-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo12.vue b/examples/sites/demos/pc/app/chart/props/demo12.vue
index d5c00ec76..dfd2131bc 100644
--- a/examples/sites/demos/pc/app/chart/props/demo12.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo12.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo2-composition-api.vue
index 42c7edfd2..3e16c85de 100644
--- a/examples/sites/demos/pc/app/chart/props/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo2-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo2.vue b/examples/sites/demos/pc/app/chart/props/demo2.vue
index 5fbc7ce1e..f2427c0ae 100644
--- a/examples/sites/demos/pc/app/chart/props/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo2.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo3-composition-api.vue
index 78eb7214d..511e10c04 100644
--- a/examples/sites/demos/pc/app/chart/props/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo3-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo3.vue b/examples/sites/demos/pc/app/chart/props/demo3.vue
index 6e6b0052c..ec8e53a8a 100644
--- a/examples/sites/demos/pc/app/chart/props/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo3.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo4-composition-api.vue
index 9f4e1fa0e..badef569b 100644
--- a/examples/sites/demos/pc/app/chart/props/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo4-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo4.vue b/examples/sites/demos/pc/app/chart/props/demo4.vue
index 1086d94d4..5932f5b56 100644
--- a/examples/sites/demos/pc/app/chart/props/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo4.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo5-composition-api.vue
index d251d822f..3e8273de3 100644
--- a/examples/sites/demos/pc/app/chart/props/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   data: []
diff --git a/examples/sites/demos/pc/app/chart/props/demo5.vue b/examples/sites/demos/pc/app/chart/props/demo5.vue
index 77774fd16..e47b8b8a5 100644
--- a/examples/sites/demos/pc/app/chart/props/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/props/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo6-composition-api.vue
index 9d8a44ae6..d8e519063 100644
--- a/examples/sites/demos/pc/app/chart/props/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo6-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo6.vue b/examples/sites/demos/pc/app/chart/props/demo6.vue
index 63984c9a7..9d948ca91 100644
--- a/examples/sites/demos/pc/app/chart/props/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo6.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo7-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo7-composition-api.vue
index fd466c8a7..78e9f7011 100644
--- a/examples/sites/demos/pc/app/chart/props/demo7-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo7-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo7.vue b/examples/sites/demos/pc/app/chart/props/demo7.vue
index 6aeff4259..f82ba5185 100644
--- a/examples/sites/demos/pc/app/chart/props/demo7.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo7.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo8-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo8-composition-api.vue
index 4d09c5f05..2b796c8a8 100644
--- a/examples/sites/demos/pc/app/chart/props/demo8-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo8-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo8.vue b/examples/sites/demos/pc/app/chart/props/demo8.vue
index b4d16ab5c..42c7ec0e0 100644
--- a/examples/sites/demos/pc/app/chart/props/demo8.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo8.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo9-composition-api.vue b/examples/sites/demos/pc/app/chart/props/demo9-composition-api.vue
index 088b2481b..0e5e29c3e 100644
--- a/examples/sites/demos/pc/app/chart/props/demo9-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo9-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -13,18 +13,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/props/demo9.vue b/examples/sites/demos/pc/app/chart/props/demo9.vue
index 128207648..5c993159d 100644
--- a/examples/sites/demos/pc/app/chart/props/demo9.vue
+++ b/examples/sites/demos/pc/app/chart/props/demo9.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -18,18 +18,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/question/base-composition-api.vue b/examples/sites/demos/pc/app/chart/question/base-composition-api.vue
index 11a9493e1..000dc509b 100644
--- a/examples/sites/demos/pc/app/chart/question/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/question/base-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref, watch, nextTick } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem, HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const activeName = ref('1')
 const options = ref({
@@ -27,18 +27,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/question/base.vue b/examples/sites/demos/pc/app/chart/question/base.vue
index 9bf1d3548..035562175 100644
--- a/examples/sites/demos/pc/app/chart/question/base.vue
+++ b/examples/sites/demos/pc/app/chart/question/base.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem, HuichartsLine } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyLine: HuichartsLine
+    TinyTabs,
+    TinyTabItem,
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -34,18 +34,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/question/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/question/demo2-composition-api.vue
index 1e272fba0..7c3eee001 100644
--- a/examples/sites/demos/pc/app/chart/question/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/question/demo2-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const chartSettings = {
   yAxisType: ['percent']
diff --git a/examples/sites/demos/pc/app/chart/question/demo2.vue b/examples/sites/demos/pc/app/chart/question/demo2.vue
index f18370b12..135dec7ba 100644
--- a/examples/sites/demos/pc/app/chart/question/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/question/demo2.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     this.chartSettings = {
diff --git a/examples/sites/demos/pc/app/chart/question/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/question/demo3-composition-api.vue
index b62af843d..1a8181fde 100644
--- a/examples/sites/demos/pc/app/chart/question/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/question/demo3-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const chartSettings = {
   yAxisType: ['percent'],
diff --git a/examples/sites/demos/pc/app/chart/question/demo3.vue b/examples/sites/demos/pc/app/chart/question/demo3.vue
index 5769012fc..3188f7129 100644
--- a/examples/sites/demos/pc/app/chart/question/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/question/demo3.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     this.chartSettings = {
diff --git a/examples/sites/demos/pc/app/chart/question/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/question/demo4-composition-api.vue
index 019fcb8d8..16570c079 100644
--- a/examples/sites/demos/pc/app/chart/question/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/question/demo4-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsLine as TinyChartLine } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyChartLine } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -16,18 +16,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Day': '1月4日', 'Domestics': 33, 'Abroad': 37 },
-    { 'Day': '1月5日', 'Domestics': 27, 'Abroad': 39 },
-    { 'Day': '1月6日', 'Domestics': 31, 'Abroad': 20 },
-    { 'Day': '1月7日', 'Domestics': 30, 'Abroad': 15 },
-    { 'Day': '1月8日', 'Domestics': 37, 'Abroad': 13 },
-    { 'Day': '1月9日', 'Domestics': 36, 'Abroad': 17 },
-    { 'Day': '1月10日', 'Domestics': 42, 'Abroad': 22 },
-    { 'Day': '1月11日', 'Domestics': 22, 'Abroad': 12 },
-    { 'Day': '1月12日', 'Domestics': 17, 'Abroad': 30 },
-    { 'Day': '1月13日', 'Domestics': 40, 'Abroad': 33 },
-    { 'Day': '1月14日', 'Domestics': 42, 'Abroad': 22 },
-    { 'Day': '1月15日', 'Domestics': 32, 'Abroad': 11 }
+    { Day: '1月4日', Domestics: 33, Abroad: 37 },
+    { Day: '1月5日', Domestics: 27, Abroad: 39 },
+    { Day: '1月6日', Domestics: 31, Abroad: 20 },
+    { Day: '1月7日', Domestics: 30, Abroad: 15 },
+    { Day: '1月8日', Domestics: 37, Abroad: 13 },
+    { Day: '1月9日', Domestics: 36, Abroad: 17 },
+    { Day: '1月10日', Domestics: 42, Abroad: 22 },
+    { Day: '1月11日', Domestics: 22, Abroad: 12 },
+    { Day: '1月12日', Domestics: 17, Abroad: 30 },
+    { Day: '1月13日', Domestics: 40, Abroad: 33 },
+    { Day: '1月14日', Domestics: 42, Abroad: 22 },
+    { Day: '1月15日', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Day'
@@ -39,9 +39,9 @@ const options = ref({
 
 function addData() {
   options.value.data.push({
-    'Day': `1月${options.value.data.length + 1}日`,
-    'Domestics': Math.ceil(50 * Math.random()),
-    'Abroad': Math.ceil(50 * Math.random())
+    Day: `1月${options.value.data.length + 1}日`,
+    Domestics: Math.ceil(50 * Math.random()),
+    Abroad: Math.ceil(50 * Math.random())
   })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/chart/question/demo4.vue b/examples/sites/demos/pc/app/chart/question/demo4.vue
index c1b4a6651..b16c544b1 100644
--- a/examples/sites/demos/pc/app/chart/question/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/question/demo4.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsLine } from '@opentiny/vue'
+import { TinyHuichartsLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine
+    TinyLine: TinyHuichartsLine
   },
   data() {
     return {
@@ -21,18 +21,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Day': '1月4日', 'Domestics': 33, 'Abroad': 37 },
-          { 'Day': '1月5日', 'Domestics': 27, 'Abroad': 39 },
-          { 'Day': '1月6日', 'Domestics': 31, 'Abroad': 20 },
-          { 'Day': '1月7日', 'Domestics': 30, 'Abroad': 15 },
-          { 'Day': '1月8日', 'Domestics': 37, 'Abroad': 13 },
-          { 'Day': '1月9日', 'Domestics': 36, 'Abroad': 17 },
-          { 'Day': '1月10日', 'Domestics': 42, 'Abroad': 22 },
-          { 'Day': '1月11日', 'Domestics': 22, 'Abroad': 12 },
-          { 'Day': '1月12日', 'Domestics': 17, 'Abroad': 30 },
-          { 'Day': '1月13日', 'Domestics': 40, 'Abroad': 33 },
-          { 'Day': '1月14日', 'Domestics': 42, 'Abroad': 22 },
-          { 'Day': '1月15日', 'Domestics': 32, 'Abroad': 11 }
+          { Day: '1月4日', Domestics: 33, Abroad: 37 },
+          { Day: '1月5日', Domestics: 27, Abroad: 39 },
+          { Day: '1月6日', Domestics: 31, Abroad: 20 },
+          { Day: '1月7日', Domestics: 30, Abroad: 15 },
+          { Day: '1月8日', Domestics: 37, Abroad: 13 },
+          { Day: '1月9日', Domestics: 36, Abroad: 17 },
+          { Day: '1月10日', Domestics: 42, Abroad: 22 },
+          { Day: '1月11日', Domestics: 22, Abroad: 12 },
+          { Day: '1月12日', Domestics: 17, Abroad: 30 },
+          { Day: '1月13日', Domestics: 40, Abroad: 33 },
+          { Day: '1月14日', Domestics: 42, Abroad: 22 },
+          { Day: '1月15日', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Day'
@@ -46,9 +46,9 @@ export default {
   methods: {
     addData() {
       this.options.data.push({
-        'Day': `1月${this.options.data.length + 1}日`,
-        'Domestics': Math.ceil(50 * Math.random()),
-        'Abroad': Math.ceil(50 * Math.random())
+        Day: `1月${this.options.data.length + 1}日`,
+        Domestics: Math.ceil(50 * Math.random()),
+        Abroad: Math.ceil(50 * Math.random())
       })
     }
   }
diff --git a/examples/sites/demos/pc/app/chart/question/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/question/demo5-composition-api.vue
index 1a1542477..bb8c9a95a 100644
--- a/examples/sites/demos/pc/app/chart/question/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/question/demo5-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { HuichartsLine as TinyLine, Button as TinyButton } from '@opentiny/vue'
+import { TinyHuichartsLine as TinyLine, TinyButton } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -23,18 +23,18 @@ const options = ref({
     icon: 'line'
   },
   data: [
-    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+    { Month: 'Jan', Domestics: 33, Abroad: 37 },
+    { Month: 'Feb', Domestics: 27, Abroad: 39 },
+    { Month: 'Mar', Domestics: 31, Abroad: 20 },
+    { Month: 'Apr', Domestics: 30, Abroad: 15 },
+    { Month: 'May', Domestics: 37, Abroad: 13 },
+    { Month: 'Jun', Domestics: 36, Abroad: 17 },
+    { Month: 'Jul', Domestics: 42, Abroad: 22 },
+    { Month: 'Aug', Domestics: 22, Abroad: 12 },
+    { Month: 'Sep', Domestics: 17, Abroad: 30 },
+    { Month: 'Oct', Domestics: 40, Abroad: 33 },
+    { Month: 'Nov', Domestics: 42, Abroad: 22 },
+    { Month: 'Dec', Domestics: 32, Abroad: 11 }
   ],
   xAxis: {
     data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/question/demo5.vue b/examples/sites/demos/pc/app/chart/question/demo5.vue
index 86aa3d56f..ec558c3d3 100644
--- a/examples/sites/demos/pc/app/chart/question/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/question/demo5.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { HuichartsLine, Button } from '@opentiny/vue'
+import { TinyHuichartsLine, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLine: HuichartsLine,
-    TinyButton: Button
+    TinyLine: TinyHuichartsLine,
+    TinyButton
   },
   data() {
     return {
@@ -29,18 +29,18 @@ export default {
           icon: 'line'
         },
         data: [
-          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
-          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
-          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
-          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
-          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
-          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
-          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
-          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
-          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
-          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
-          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+          { Month: 'Jan', Domestics: 33, Abroad: 37 },
+          { Month: 'Feb', Domestics: 27, Abroad: 39 },
+          { Month: 'Mar', Domestics: 31, Abroad: 20 },
+          { Month: 'Apr', Domestics: 30, Abroad: 15 },
+          { Month: 'May', Domestics: 37, Abroad: 13 },
+          { Month: 'Jun', Domestics: 36, Abroad: 17 },
+          { Month: 'Jul', Domestics: 42, Abroad: 22 },
+          { Month: 'Aug', Domestics: 22, Abroad: 12 },
+          { Month: 'Sep', Domestics: 17, Abroad: 30 },
+          { Month: 'Oct', Domestics: 40, Abroad: 33 },
+          { Month: 'Nov', Domestics: 42, Abroad: 22 },
+          { Month: 'Dec', Domestics: 32, Abroad: 11 }
         ],
         xAxis: {
           data: 'Month'
diff --git a/examples/sites/demos/pc/app/chart/radar/base-composition-api.vue b/examples/sites/demos/pc/app/chart/radar/base-composition-api.vue
index d1593bda1..67a2a7155 100644
--- a/examples/sites/demos/pc/app/chart/radar/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/radar/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { HuichartsRadar as TinyRadar } from '@opentiny/vue'
+import { TinyHuichartsRadar as TinyRadar } from '@opentiny/vue'
 
 const options = ref({
   legend: {
@@ -21,12 +21,12 @@ const options = ref({
   // 当不设置 radarMax 时， 雷达图坐标系为数据中的最大值
   radarMax: 100,
   data: {
-    'Domestic': {
-      'Equipment': 41,
-      'VM': 91,
-      'CSP': 81,
-      'RD': 51,
-      'Markets': 71
+    Domestic: {
+      Equipment: 41,
+      VM: 91,
+      CSP: 81,
+      RD: 51,
+      Markets: 71
     }
   }
 })
diff --git a/examples/sites/demos/pc/app/chart/radar/base.vue b/examples/sites/demos/pc/app/chart/radar/base.vue
index f5f985813..7e53e7e21 100644
--- a/examples/sites/demos/pc/app/chart/radar/base.vue
+++ b/examples/sites/demos/pc/app/chart/radar/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { HuichartsRadar } from '@opentiny/vue'
+import { TinyHuichartsRadar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadar: HuichartsRadar
+    TinyRadar: TinyHuichartsRadar
   },
   data() {
     return {
@@ -27,12 +27,12 @@ export default {
         // 当不设置 radarMax 时， 雷达图坐标系为数据中的最大值
         radarMax: 100,
         data: {
-          'Domestic': {
-            'Equipment': 41,
-            'VM': 91,
-            'CSP': 81,
-            'RD': 51,
-            'Markets': 71
+          Domestic: {
+            Equipment: 41,
+            VM: 91,
+            CSP: 81,
+            RD: 51,
+            Markets: 71
           }
         }
       }
diff --git a/examples/sites/demos/pc/app/chart/radar/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/radar/demo2-composition-api.vue
index b85c15a8f..3c1392819 100644
--- a/examples/sites/demos/pc/app/chart/radar/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/radar/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { HuichartsRadar as TinyRadar } from '@opentiny/vue'
+import { TinyHuichartsRadar as TinyRadar } from '@opentiny/vue'
 
 const options = ref({
   legend: {
@@ -21,19 +21,19 @@ const options = ref({
   // 当不设置 radarMax 时， 雷达图坐标系为数据中的最大值
   radarMax: 100,
   data: {
-    'Domestic': {
-      'Equipment': 41,
-      'VM': 91,
-      'CSP': 81,
-      'RD': 51,
-      'Markets': 71
+    Domestic: {
+      Equipment: 41,
+      VM: 91,
+      CSP: 81,
+      RD: 51,
+      Markets: 71
     },
-    'Abroad': {
-      'Equipment': 72,
-      'VM': 55,
-      'CSP': 93,
-      'RD': 90,
-      'Markets': 82
+    Abroad: {
+      Equipment: 72,
+      VM: 55,
+      CSP: 93,
+      RD: 90,
+      Markets: 82
     }
   }
 })
diff --git a/examples/sites/demos/pc/app/chart/radar/demo2.vue b/examples/sites/demos/pc/app/chart/radar/demo2.vue
index 313e35416..90e1786a3 100644
--- a/examples/sites/demos/pc/app/chart/radar/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/radar/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { HuichartsRadar } from '@opentiny/vue'
+import { TinyHuichartsRadar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadar: HuichartsRadar
+    TinyRadar: TinyHuichartsRadar
   },
   data() {
     return {
@@ -26,19 +26,19 @@ export default {
         // 当不设置 radarMax 时， 雷达图坐标系为数据中的最大值
         radarMax: 100,
         data: {
-          'Domestic': {
-            'Equipment': 41,
-            'VM': 91,
-            'CSP': 81,
-            'RD': 51,
-            'Markets': 71
+          Domestic: {
+            Equipment: 41,
+            VM: 91,
+            CSP: 81,
+            RD: 51,
+            Markets: 71
           },
-          'Abroad': {
-            'Equipment': 72,
-            'VM': 55,
-            'CSP': 93,
-            'RD': 90,
-            'Markets': 82
+          Abroad: {
+            Equipment: 72,
+            VM: 55,
+            CSP: 93,
+            RD: 90,
+            Markets: 82
           }
         }
       }
diff --git a/examples/sites/demos/pc/app/chart/radar/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/radar/demo3-composition-api.vue
index fa51ff148..46c3b0102 100644
--- a/examples/sites/demos/pc/app/chart/radar/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/radar/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { HuichartsRadar as TinyRadar } from '@opentiny/vue'
+import { TinyHuichartsRadar as TinyRadar } from '@opentiny/vue'
 
 const options = ref({
   color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'], // 自定义颜色组，会循环使用该颜色组
@@ -20,19 +20,19 @@ const options = ref({
   },
   radarMax: 100,
   data: {
-    'Domestic': {
-      'Equipment': 41,
-      'VM': 91,
-      'CSP': 81,
-      'RD': 51,
-      'Markets': 71
+    Domestic: {
+      Equipment: 41,
+      VM: 91,
+      CSP: 81,
+      RD: 51,
+      Markets: 71
     },
-    'Abroad': {
-      'Equipment': 77,
-      'VM': 55,
-      'CSP': 93,
-      'RD': 90,
-      'Markets': 87
+    Abroad: {
+      Equipment: 77,
+      VM: 55,
+      CSP: 93,
+      RD: 90,
+      Markets: 87
     }
   }
 })
diff --git a/examples/sites/demos/pc/app/chart/radar/demo3.vue b/examples/sites/demos/pc/app/chart/radar/demo3.vue
index 9c6fe6869..6df90c7ae 100644
--- a/examples/sites/demos/pc/app/chart/radar/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/radar/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { HuichartsRadar } from '@opentiny/vue'
+import { TinyHuichartsRadar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadar: HuichartsRadar
+    TinyRadar: TinyHuichartsRadar
   },
   data() {
     return {
@@ -25,19 +25,19 @@ export default {
         },
         radarMax: 100,
         data: {
-          'Domestic': {
-            'Equipment': 41,
-            'VM': 91,
-            'CSP': 81,
-            'RD': 51,
-            'Markets': 71
+          Domestic: {
+            Equipment: 41,
+            VM: 91,
+            CSP: 81,
+            RD: 51,
+            Markets: 71
           },
-          'Abroad': {
-            'Equipment': 77,
-            'VM': 55,
-            'CSP': 93,
-            'RD': 90,
-            'Markets': 87
+          Abroad: {
+            Equipment: 77,
+            VM: 55,
+            CSP: 93,
+            RD: 90,
+            Markets: 87
           }
         }
       }
diff --git a/examples/sites/demos/pc/app/chart/ring/base-composition-api.vue b/examples/sites/demos/pc/app/chart/ring/base-composition-api.vue
index 4e4beb532..5816ce286 100644
--- a/examples/sites/demos/pc/app/chart/ring/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/ring/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsRing as TinyChartRing } from '@opentiny/vue'
+import { TinyHuichartsRing as TinyChartRing } from '@opentiny/vue'
 
 const options = ref({
   type: 'circle',
diff --git a/examples/sites/demos/pc/app/chart/ring/base.vue b/examples/sites/demos/pc/app/chart/ring/base.vue
index 3d207ba40..eb109d1b3 100644
--- a/examples/sites/demos/pc/app/chart/ring/base.vue
+++ b/examples/sites/demos/pc/app/chart/ring/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsRing } from '@opentiny/vue'
+import { TinyHuichartsRing } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRing: HuichartsRing
+    TinyRing: TinyHuichartsRing
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/ring/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/ring/demo2-composition-api.vue
index a2fe539bd..d86ab8773 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsRing as TinyChartRing } from '@opentiny/vue'
+import { TinyHuichartsRing as TinyChartRing } from '@opentiny/vue'
 
 const options = ref({
   type: 'multi-circle',
diff --git a/examples/sites/demos/pc/app/chart/ring/demo2.vue b/examples/sites/demos/pc/app/chart/ring/demo2.vue
index d06a44496..0e2fd2bf4 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsRing } from '@opentiny/vue'
+import { TinyHuichartsRing } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRing: HuichartsRing
+    TinyRing: TinyHuichartsRing
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/ring/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/ring/demo3-composition-api.vue
index 128bd5893..4465d8a41 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsRing as TinyChartRing } from '@opentiny/vue'
+import { TinyHuichartsRing as TinyChartRing } from '@opentiny/vue'
 
 const options = ref({
   type: 'nulti-circle',
diff --git a/examples/sites/demos/pc/app/chart/ring/demo3.vue b/examples/sites/demos/pc/app/chart/ring/demo3.vue
index 1c257cf56..e9c353622 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsRing } from '@opentiny/vue'
+import { TinyHuichartsRing } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRing: HuichartsRing
+    TinyRing: TinyHuichartsRing
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/ring/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/ring/demo4-composition-api.vue
index d5a9d6089..c5bea292e 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsRing as TinyChartRing } from '@opentiny/vue'
+import { TinyHuichartsRing as TinyChartRing } from '@opentiny/vue'
 
 const options = ref({
   type: 'circle',
diff --git a/examples/sites/demos/pc/app/chart/ring/demo4.vue b/examples/sites/demos/pc/app/chart/ring/demo4.vue
index 0059e82f9..4da1811ea 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsRing } from '@opentiny/vue'
+import { TinyHuichartsRing } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRing: HuichartsRing
+    TinyRing: TinyHuichartsRing
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/ring/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/ring/demo5-composition-api.vue
index 9e0872aae..6ee7d4a11 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsRing as TinyChartRing } from '@opentiny/vue'
+import { TinyHuichartsRing as TinyChartRing } from '@opentiny/vue'
 
 const options = ref({
   color: ['#10c7c1', '#ff88800'],
diff --git a/examples/sites/demos/pc/app/chart/ring/demo5.vue b/examples/sites/demos/pc/app/chart/ring/demo5.vue
index fabb62e4e..110fe4290 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsRing } from '@opentiny/vue'
+import { TinyHuichartsRing } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRing: HuichartsRing
+    TinyRing: TinyHuichartsRing
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/ring/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/ring/demo6-composition-api.vue
index 2d0d3cf31..a4f5bc6e1 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo6-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo6-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsRing as TinyChartRing } from '@opentiny/vue'
+import { TinyHuichartsRing as TinyChartRing } from '@opentiny/vue'
 
 const options = ref({
   tipHtml: (params, ticket, callback) => {
diff --git a/examples/sites/demos/pc/app/chart/ring/demo6.vue b/examples/sites/demos/pc/app/chart/ring/demo6.vue
index 1eb05d666..cd03dbd3c 100644
--- a/examples/sites/demos/pc/app/chart/ring/demo6.vue
+++ b/examples/sites/demos/pc/app/chart/ring/demo6.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsRing } from '@opentiny/vue'
+import { TinyHuichartsRing } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRing: HuichartsRing
+    TinyRing: TinyHuichartsRing
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/ring/ring-title-composition-api.vue b/examples/sites/demos/pc/app/chart/ring/ring-title-composition-api.vue
index ec54f7864..f61a02d9b 100644
--- a/examples/sites/demos/pc/app/chart/ring/ring-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/ring/ring-title-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsRing as TinyChartRing } from '@opentiny/vue'
+import { TinyHuichartsRing as TinyChartRing } from '@opentiny/vue'
 
 const options = ref({
   title: {
diff --git a/examples/sites/demos/pc/app/chart/ring/ring-title.vue b/examples/sites/demos/pc/app/chart/ring/ring-title.vue
index d231b59e6..6ae9d927a 100644
--- a/examples/sites/demos/pc/app/chart/ring/ring-title.vue
+++ b/examples/sites/demos/pc/app/chart/ring/ring-title.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsRing } from '@opentiny/vue'
+import { TinyHuichartsRing } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRing: HuichartsRing
+    TinyRing: TinyHuichartsRing
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/sankey/base-composition-api.vue b/examples/sites/demos/pc/app/chart/sankey/base-composition-api.vue
index 323858054..4017c5b30 100644
--- a/examples/sites/demos/pc/app/chart/sankey/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/sankey/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsSankey as TinyChartSankey } from '@opentiny/vue'
+import { TinyHuichartsSankey as TinyChartSankey } from '@opentiny/vue'
 
 const options = ref({
   // 页面节点是否可被拖动,布尔值,默认值为true
@@ -14,7 +14,6 @@ const options = ref({
 
   // widthSpace, 自定义节点矩形宽度及每列间距, 默认[10, 30]
   widthSpace: [10, 30],
-
   // value: 传递的数据值,与连接带的高度大小正相关
   sortType: 'unset', // 设置数据的排序方式 ascend decline
   emptyStatus: 'node', // 空节点的展示状态 churnBar
diff --git a/examples/sites/demos/pc/app/chart/sankey/base.vue b/examples/sites/demos/pc/app/chart/sankey/base.vue
index e646ec452..31ddd54e4 100644
--- a/examples/sites/demos/pc/app/chart/sankey/base.vue
+++ b/examples/sites/demos/pc/app/chart/sankey/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsSankey } from '@opentiny/vue'
+import { TinyHuichartsSankey } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySankey: HuichartsSankey
+    TinySankey: TinyHuichartsSankey
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // widthSpace, 自定义节点矩形宽度及每列间距, 默认[10, 30]
         widthSpace: [10, 30],
-
         // value: 传递的数据值,与连接带的高度大小正相关
         sortType: 'unset', // 设置数据的排序方式 ascend decline
         emptyStatus: 'node', // 空节点的展示状态 churnBar
diff --git a/examples/sites/demos/pc/app/chart/sankey/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/sankey/demo2-composition-api.vue
index f1f952f38..c80e3d6e9 100644
--- a/examples/sites/demos/pc/app/chart/sankey/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/sankey/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsSankey as TinyChartSankey } from '@opentiny/vue'
+import { TinyHuichartsSankey as TinyChartSankey } from '@opentiny/vue'
 
 const options = ref({
   padding: [70, 70, 70, 70],
diff --git a/examples/sites/demos/pc/app/chart/sankey/demo2.vue b/examples/sites/demos/pc/app/chart/sankey/demo2.vue
index 88d64e163..ddd819f94 100644
--- a/examples/sites/demos/pc/app/chart/sankey/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/sankey/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsSankey } from '@opentiny/vue'
+import { TinyHuichartsSankey } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySankey: HuichartsSankey
+    TinySankey: TinyHuichartsSankey
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/scatter/base-composition-api.vue b/examples/sites/demos/pc/app/chart/scatter/base-composition-api.vue
index b198fd39b..3291b6058 100644
--- a/examples/sites/demos/pc/app/chart/scatter/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/scatter/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsScatter as TinyChartScatter } from '@opentiny/vue'
+import { TinyHuichartsScatter as TinyChartScatter } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
diff --git a/examples/sites/demos/pc/app/chart/scatter/base.vue b/examples/sites/demos/pc/app/chart/scatter/base.vue
index 2a293a4d9..49f061377 100644
--- a/examples/sites/demos/pc/app/chart/scatter/base.vue
+++ b/examples/sites/demos/pc/app/chart/scatter/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsScatter } from '@opentiny/vue'
+import { TinyHuichartsScatter } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScatter: HuichartsScatter
+    TinyScatter: TinyHuichartsScatter
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/scatter/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/scatter/demo2-composition-api.vue
index 904de823a..b10e342b7 100644
--- a/examples/sites/demos/pc/app/chart/scatter/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/scatter/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsScatter as TinyChartScatter } from '@opentiny/vue'
+import { TinyHuichartsScatter as TinyChartScatter } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
@@ -25,19 +25,19 @@ const options = ref({
   xAxisType: 'category',
   yAxisNameL: 'Member',
   data: {
-    'Bus': [
+    Bus: [
       ['Q1', 70, 20, 'Q1', 'Bus'],
       ['Q2', 80, 15, 'Q2', 'Bus'],
       ['Q3', 200, 60, 'Q3', 'Bus'],
       ['Q4', 160, 40, 'Q4', 'Bus']
     ],
-    'Car': [
+    Car: [
       ['Q1', 95, 30, 'Q1', 'Car'],
       ['Q2', 120, 60, 'Q2', 'Car'],
       ['Q3', 180, 40, 'Q3', 'Car'],
       ['Q4', 230, 60, 'Q4', 'Car']
     ],
-    'Bicycle': [
+    Bicycle: [
       ['Q1', 268, 50, 'Q1', 'Bicycle'],
       ['Q2', 150, 36, 'Q2', 'Bicycle'],
       ['Q3', 110, 20, 'Q3', 'Bicycle'],
diff --git a/examples/sites/demos/pc/app/chart/scatter/demo2.vue b/examples/sites/demos/pc/app/chart/scatter/demo2.vue
index 4b231546e..bdd370c99 100644
--- a/examples/sites/demos/pc/app/chart/scatter/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/scatter/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsScatter } from '@opentiny/vue'
+import { TinyHuichartsScatter } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScatter: HuichartsScatter
+    TinyScatter: TinyHuichartsScatter
   },
   data() {
     return {
@@ -30,19 +30,19 @@ export default {
         xAxisType: 'category',
         yAxisNameL: 'Member',
         data: {
-          'Bus': [
+          Bus: [
             ['Q1', 70, 20, 'Q1', 'Bus'],
             ['Q2', 80, 15, 'Q2', 'Bus'],
             ['Q3', 200, 60, 'Q3', 'Bus'],
             ['Q4', 160, 40, 'Q4', 'Bus']
           ],
-          'Car': [
+          Car: [
             ['Q1', 95, 30, 'Q1', 'Car'],
             ['Q2', 120, 60, 'Q2', 'Car'],
             ['Q3', 180, 40, 'Q3', 'Car'],
             ['Q4', 230, 60, 'Q4', 'Car']
           ],
-          'Bicycle': [
+          Bicycle: [
             ['Q1', 268, 50, 'Q1', 'Bicycle'],
             ['Q2', 150, 36, 'Q2', 'Bicycle'],
             ['Q3', 110, 20, 'Q3', 'Bicycle'],
diff --git a/examples/sites/demos/pc/app/chart/scatter/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/scatter/demo3-composition-api.vue
index c04b66c6c..39d0046b8 100644
--- a/examples/sites/demos/pc/app/chart/scatter/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/scatter/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsScatter as TinyChartScatter } from '@opentiny/vue'
+import { TinyHuichartsScatter as TinyChartScatter } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 50, 20],
diff --git a/examples/sites/demos/pc/app/chart/scatter/demo3.vue b/examples/sites/demos/pc/app/chart/scatter/demo3.vue
index 24e00fbc5..81171df26 100644
--- a/examples/sites/demos/pc/app/chart/scatter/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/scatter/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsScatter } from '@opentiny/vue'
+import { TinyHuichartsScatter } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScatter: HuichartsScatter
+    TinyScatter: TinyHuichartsScatter
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/sunburst/base-composition-api.vue b/examples/sites/demos/pc/app/chart/sunburst/base-composition-api.vue
index e70bbbc37..df9890bbc 100644
--- a/examples/sites/demos/pc/app/chart/sunburst/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/sunburst/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsSunburst as TinyChartSunburst } from '@opentiny/vue'
+import { TinyHuichartsSunburst as TinyChartSunburst } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/sunburst/base.vue b/examples/sites/demos/pc/app/chart/sunburst/base.vue
index e97b342e8..52b1d8e37 100644
--- a/examples/sites/demos/pc/app/chart/sunburst/base.vue
+++ b/examples/sites/demos/pc/app/chart/sunburst/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsSunburst } from '@opentiny/vue'
+import { TinyHuichartsSunburst } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySunburst: HuichartsSunburst
+    TinySunburst: TinyHuichartsSunburst
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/sunburst/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/sunburst/demo2-composition-api.vue
index 77878c231..2dbe14318 100644
--- a/examples/sites/demos/pc/app/chart/sunburst/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/sunburst/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsSunburst as TinyChartSunburst } from '@opentiny/vue'
+import { TinyHuichartsSunburst as TinyChartSunburst } from '@opentiny/vue'
 
 const options = ref({
   series: {
diff --git a/examples/sites/demos/pc/app/chart/sunburst/demo2.vue b/examples/sites/demos/pc/app/chart/sunburst/demo2.vue
index 878772475..d5bae610b 100644
--- a/examples/sites/demos/pc/app/chart/sunburst/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/sunburst/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsSunburst } from '@opentiny/vue'
+import { TinyHuichartsSunburst } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySunburst: HuichartsSunburst
+    TinySunburst: TinyHuichartsSunburst
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/sunburst/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/sunburst/demo3-composition-api.vue
index 74ccd18b4..bdb76d318 100644
--- a/examples/sites/demos/pc/app/chart/sunburst/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/sunburst/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsSunburst as TinyChartSunburst } from '@opentiny/vue'
+import { TinyHuichartsSunburst as TinyChartSunburst } from '@opentiny/vue'
 
 const options = ref({
   series: {
diff --git a/examples/sites/demos/pc/app/chart/sunburst/demo3.vue b/examples/sites/demos/pc/app/chart/sunburst/demo3.vue
index ffaf747c8..01931fcbc 100644
--- a/examples/sites/demos/pc/app/chart/sunburst/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/sunburst/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsSunburst } from '@opentiny/vue'
+import { TinyHuichartsSunburst } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySunburst: HuichartsSunburst
+    TinySunburst: TinyHuichartsSunburst
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/tree/base-composition-api.vue b/examples/sites/demos/pc/app/chart/tree/base-composition-api.vue
index ca5e688ee..f193859cf 100644
--- a/examples/sites/demos/pc/app/chart/tree/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/tree/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsTree as TinyChartTree } from '@opentiny/vue'
+import { TinyHuichartsTree as TinyChartTree } from '@opentiny/vue'
 
 const options = ref({
   // 图表类型（线型树图）
@@ -14,7 +14,6 @@ const options = ref({
 
   // padding控制图表距离容器的上、右、下、左padding值
   padding: [20, 80, 20, 80],
-
   // 图元的大小，默认值10
   symbolSize: 10,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/base.vue b/examples/sites/demos/pc/app/chart/tree/base.vue
index cb4b334cd..4b8d5ca85 100644
--- a/examples/sites/demos/pc/app/chart/tree/base.vue
+++ b/examples/sites/demos/pc/app/chart/tree/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsTree } from '@opentiny/vue'
+import { TinyHuichartsTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeChart: HuichartsTree
+    TinyTreeChart: TinyHuichartsTree
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // padding控制图表距离容器的上、右、下、左padding值
         padding: [20, 80, 20, 80],
-
         // 图元的大小，默认值10
         symbolSize: 10,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/tree/demo2-composition-api.vue
index d262dec17..589e4b9f3 100644
--- a/examples/sites/demos/pc/app/chart/tree/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/tree/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsTree as TinyChartTree } from '@opentiny/vue'
+import { TinyHuichartsTree as TinyChartTree } from '@opentiny/vue'
 
 const options = ref({
   // 图表类型（线型树图）
@@ -14,7 +14,6 @@ const options = ref({
 
   // padding控制图表距离容器的上、右、下、左padding值
   padding: [20, 80, 20, 80],
-
   // 图元的大小，默认值10
   symbolSize: 10,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/demo2.vue b/examples/sites/demos/pc/app/chart/tree/demo2.vue
index a0f3218e6..9cf2bf3a5 100644
--- a/examples/sites/demos/pc/app/chart/tree/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/tree/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsTree } from '@opentiny/vue'
+import { TinyHuichartsTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeChart: HuichartsTree
+    TinyTreeChart: TinyHuichartsTree
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // padding控制图表距离容器的上、右、下、左padding值
         padding: [20, 80, 20, 80],
-
         // 图元的大小，默认值10
         symbolSize: 10,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/tree/demo3-composition-api.vue
index 08caa45e9..8a3d48080 100644
--- a/examples/sites/demos/pc/app/chart/tree/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/tree/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsTree as TinyChartTree } from '@opentiny/vue'
+import { TinyHuichartsTree as TinyChartTree } from '@opentiny/vue'
 
 const options = ref({
   // 图表类型（线型树图）
@@ -14,7 +14,6 @@ const options = ref({
 
   // padding控制图表距离容器的上、右、下、左padding值
   padding: [20, 80, 20, 80],
-
   // 图元的大小，默认值10
   symbolSize: 15,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/demo3.vue b/examples/sites/demos/pc/app/chart/tree/demo3.vue
index 1c90f5dc1..29c76d02f 100644
--- a/examples/sites/demos/pc/app/chart/tree/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/tree/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsTree } from '@opentiny/vue'
+import { TinyHuichartsTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeChart: HuichartsTree
+    TinyTreeChart: TinyHuichartsTree
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // padding控制图表距离容器的上、右、下、左padding值
         padding: [20, 80, 20, 80],
-
         // 图元的大小，默认值10
         symbolSize: 15,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/tree/demo4-composition-api.vue
index 8d0312f07..aec62f667 100644
--- a/examples/sites/demos/pc/app/chart/tree/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/tree/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsTree as TinyChartTree } from '@opentiny/vue'
+import { TinyHuichartsTree as TinyChartTree } from '@opentiny/vue'
 
 const options = ref({
   // 图表类型（线型树图）
@@ -14,7 +14,6 @@ const options = ref({
 
   // padding控制图表距离容器的上、右、下、左padding值
   padding: [20, 80, 20, 80],
-
   // 图元的大小，默认值10
   symbolSize: 10,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/demo4.vue b/examples/sites/demos/pc/app/chart/tree/demo4.vue
index 17730be6a..b143645f0 100644
--- a/examples/sites/demos/pc/app/chart/tree/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/tree/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsTree } from '@opentiny/vue'
+import { TinyHuichartsTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeChart: HuichartsTree
+    TinyTreeChart: TinyHuichartsTree
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // padding控制图表距离容器的上、右、下、左padding值
         padding: [20, 80, 20, 80],
-
         // 图元的大小，默认值10
         symbolSize: 10,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/tree/demo5-composition-api.vue
index 32cc12ad4..d4c366009 100644
--- a/examples/sites/demos/pc/app/chart/tree/demo5-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/tree/demo5-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsTree as TinyChartTree } from '@opentiny/vue'
+import { TinyHuichartsTree as TinyChartTree } from '@opentiny/vue'
 
 const options = ref({
   // 图表类型（线型树图）
@@ -14,7 +14,6 @@ const options = ref({
 
   // padding控制图表距离容器的上、右、下、左padding值
   padding: [20, 80, 20, 80],
-
   // 图元的大小，默认值10
   symbolSize: 10,
 
diff --git a/examples/sites/demos/pc/app/chart/tree/demo5.vue b/examples/sites/demos/pc/app/chart/tree/demo5.vue
index 02cac45a6..fd1c18300 100644
--- a/examples/sites/demos/pc/app/chart/tree/demo5.vue
+++ b/examples/sites/demos/pc/app/chart/tree/demo5.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsTree } from '@opentiny/vue'
+import { TinyHuichartsTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeChart: HuichartsTree
+    TinyTreeChart: TinyHuichartsTree
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // padding控制图表距离容器的上、右、下、左padding值
         padding: [20, 80, 20, 80],
-
         // 图元的大小，默认值10
         symbolSize: 10,
 
diff --git a/examples/sites/demos/pc/app/chart/waterfall/base-composition-api.vue b/examples/sites/demos/pc/app/chart/waterfall/base-composition-api.vue
index 173a21860..fcc2a85a2 100644
--- a/examples/sites/demos/pc/app/chart/waterfall/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/waterfall/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsWaterfall as TinyChartWaterfall } from '@opentiny/vue'
+import { TinyHuichartsWaterfall as TinyChartWaterfall } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 20, 20],
diff --git a/examples/sites/demos/pc/app/chart/waterfall/base.vue b/examples/sites/demos/pc/app/chart/waterfall/base.vue
index d02a7d861..c0faa72cc 100644
--- a/examples/sites/demos/pc/app/chart/waterfall/base.vue
+++ b/examples/sites/demos/pc/app/chart/waterfall/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsWaterfall } from '@opentiny/vue'
+import { TinyHuichartsWaterfall } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWaterfall: HuichartsWaterfall
+    TinyWaterfall: TinyHuichartsWaterfall
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/waterfall/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/waterfall/demo2-composition-api.vue
index f7f1c6097..4a2421b37 100644
--- a/examples/sites/demos/pc/app/chart/waterfall/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/waterfall/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsWaterfall as TinyChartWaterfall } from '@opentiny/vue'
+import { TinyHuichartsWaterfall as TinyChartWaterfall } from '@opentiny/vue'
 
 const options = ref({
   padding: [30, 90, 50, 20],
diff --git a/examples/sites/demos/pc/app/chart/waterfall/demo2.vue b/examples/sites/demos/pc/app/chart/waterfall/demo2.vue
index 2410055bd..c828ecfe6 100644
--- a/examples/sites/demos/pc/app/chart/waterfall/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/waterfall/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsWaterfall } from '@opentiny/vue'
+import { TinyHuichartsWaterfall } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWaterfall: HuichartsWaterfall
+    TinyWaterfall: TinyHuichartsWaterfall
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/waterfall/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/waterfall/demo3-composition-api.vue
index 638b6d2ca..eb0adacbc 100644
--- a/examples/sites/demos/pc/app/chart/waterfall/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/waterfall/demo3-composition-api.vue
@@ -6,11 +6,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsWaterfall as TinyChartWaterfall } from '@opentiny/vue'
+import { TinyHuichartsWaterfall as TinyChartWaterfall } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 20, 20],
-
   // water-fall表示为瀑布形态，此时图中会自动添加一个Total(总和)数据
   type: 'water-fall',
   data: [
diff --git a/examples/sites/demos/pc/app/chart/waterfall/demo3.vue b/examples/sites/demos/pc/app/chart/waterfall/demo3.vue
index ada276f10..c99f7e9ee 100644
--- a/examples/sites/demos/pc/app/chart/waterfall/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/waterfall/demo3.vue
@@ -5,17 +5,16 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsWaterfall } from '@opentiny/vue'
+import { TinyHuichartsWaterfall } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWaterfall: HuichartsWaterfall
+    TinyWaterfall: TinyHuichartsWaterfall
   },
   data() {
     return {
       options: {
         padding: [50, 30, 20, 20],
-
         // water-fall表示为瀑布形态，此时图中会自动添加一个Total(总和)数据
         type: 'water-fall',
         data: [
diff --git a/examples/sites/demos/pc/app/chart/waterfall/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/waterfall/demo4-composition-api.vue
index caaab74af..68f7cd4a1 100644
--- a/examples/sites/demos/pc/app/chart/waterfall/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/waterfall/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsWaterfall as TinyChartWaterfall } from '@opentiny/vue'
+import { TinyHuichartsWaterfall as TinyChartWaterfall } from '@opentiny/vue'
 
 const options = ref({
   padding: [50, 30, 20, 20],
diff --git a/examples/sites/demos/pc/app/chart/waterfall/demo4.vue b/examples/sites/demos/pc/app/chart/waterfall/demo4.vue
index 263ce3046..b8e3cbbec 100644
--- a/examples/sites/demos/pc/app/chart/waterfall/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/waterfall/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsWaterfall } from '@opentiny/vue'
+import { TinyHuichartsWaterfall } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWaterfall: HuichartsWaterfall
+    TinyWaterfall: TinyHuichartsWaterfall
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/base-composition-api.vue b/examples/sites/demos/pc/app/chart/wordcloud/base-composition-api.vue
index 7c8085de2..f2b67a129 100644
--- a/examples/sites/demos/pc/app/chart/wordcloud/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/wordcloud/base-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsWordcloud as TinyChartWordcloud } from '@opentiny/vue'
+import { TinyHuichartsWordcloud as TinyChartWordcloud } from '@opentiny/vue'
 
 const options = ref({
   data: [
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/base.vue b/examples/sites/demos/pc/app/chart/wordcloud/base.vue
index 2643115c3..8f9e04851 100644
--- a/examples/sites/demos/pc/app/chart/wordcloud/base.vue
+++ b/examples/sites/demos/pc/app/chart/wordcloud/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsWordcloud } from '@opentiny/vue'
+import { TinyHuichartsWordcloud } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWordcloud: HuichartsWordcloud
+    TinyWordcloud: TinyHuichartsWordcloud
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/wordcloud/demo2-composition-api.vue
index 6dbb625a5..cea2715dc 100644
--- a/examples/sites/demos/pc/app/chart/wordcloud/demo2-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/wordcloud/demo2-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsWordcloud as TinyChartWordcloud } from '@opentiny/vue'
+import { TinyHuichartsWordcloud as TinyChartWordcloud } from '@opentiny/vue'
 
 const options = ref({
   // 网格大小， 各文本之间距离，默认值16
@@ -14,10 +14,8 @@ const options = ref({
 
   // 字体大小范围，默认值[16，64]
   sizeRange: [14, 60],
-
   // 文字旋转角度范围，默认[0,0]
   rotationRange: [-90, 90],
-
   // 文字旋转步值，默认0
   rotationStep: 45,
   data: [
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/demo2.vue b/examples/sites/demos/pc/app/chart/wordcloud/demo2.vue
index 9cd9ae472..71c5c3b0c 100644
--- a/examples/sites/demos/pc/app/chart/wordcloud/demo2.vue
+++ b/examples/sites/demos/pc/app/chart/wordcloud/demo2.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsWordcloud } from '@opentiny/vue'
+import { TinyHuichartsWordcloud } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWordcloud: HuichartsWordcloud
+    TinyWordcloud: TinyHuichartsWordcloud
   },
   data() {
     return {
@@ -19,10 +19,8 @@ export default {
 
         // 字体大小范围，默认值[16，64]
         sizeRange: [14, 60],
-
         // 文字旋转角度范围，默认[0,0]
         rotationRange: [-90, 90],
-
         // 文字旋转步值，默认0
         rotationStep: 45,
         data: [
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/wordcloud/demo3-composition-api.vue
index 7ecdf997f..5a2b13c8b 100644
--- a/examples/sites/demos/pc/app/chart/wordcloud/demo3-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/wordcloud/demo3-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsWordcloud as TinyChartWordcloud } from '@opentiny/vue'
+import { TinyHuichartsWordcloud as TinyChartWordcloud } from '@opentiny/vue'
 
 const options = ref({
   // 形状支持 circle, cardioid, diamond, triangle-forward, triangle, pentagon, star
@@ -23,7 +23,6 @@ const options = ref({
 
   // 字体大小范围, 默认值 [16,64]
   sizeRange: [-90, 90],
-
   // 文字旋转步值，默认0
   rotationStep: 45,
   data: [
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/demo3.vue b/examples/sites/demos/pc/app/chart/wordcloud/demo3.vue
index fa691fcf6..325fdcf9a 100644
--- a/examples/sites/demos/pc/app/chart/wordcloud/demo3.vue
+++ b/examples/sites/demos/pc/app/chart/wordcloud/demo3.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsWordcloud } from '@opentiny/vue'
+import { TinyHuichartsWordcloud } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWordcloud: HuichartsWordcloud
+    TinyWordcloud: TinyHuichartsWordcloud
   },
   data() {
     return {
@@ -28,7 +28,6 @@ export default {
 
         // 字体大小范围, 默认值 [16,64]
         sizeRange: [-90, 90],
-
         // 文字旋转步值，默认0
         rotationStep: 45,
         data: [
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/wordcloud/demo4-composition-api.vue
index ada7b9b2d..52126d455 100644
--- a/examples/sites/demos/pc/app/chart/wordcloud/demo4-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/wordcloud/demo4-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { HuichartsWordcloud as TinyChartWordcloud } from '@opentiny/vue'
+import { TinyHuichartsWordcloud as TinyChartWordcloud } from '@opentiny/vue'
 
 const options = ref({
   // 网格大小，各文本之间距离，默认值16
@@ -14,7 +14,6 @@ const options = ref({
 
   // 字体大小范围，默认值[16,64]
   sizeRange: [14, 60],
-
   // 文字旋转角度范围，默认[0,0]
   rotationStep: 45,
   data: [
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/demo4.vue b/examples/sites/demos/pc/app/chart/wordcloud/demo4.vue
index 73c0e1370..65efe8292 100644
--- a/examples/sites/demos/pc/app/chart/wordcloud/demo4.vue
+++ b/examples/sites/demos/pc/app/chart/wordcloud/demo4.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { HuichartsWordcloud } from '@opentiny/vue'
+import { TinyHuichartsWordcloud } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWordcloud: HuichartsWordcloud
+    TinyWordcloud: TinyHuichartsWordcloud
   },
   data() {
     return {
@@ -19,7 +19,6 @@ export default {
 
         // 字体大小范围，默认值[16,64]
         sizeRange: [14, 60],
-
         // 文字旋转角度范围，默认[0,0]
         rotationStep: 45,
         data: [
diff --git a/examples/sites/demos/pc/app/checkbox/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/checkbox/basic-usage-composition-api.vue
index 4dd3f4def..b328699ea 100644
--- a/examples/sites/demos/pc/app/checkbox/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Checkbox as TinyCheckbox } from '@opentiny/vue'
+import { TinyCheckbox } from '@opentiny/vue'
 
 const checked = ref(true)
 </script>
diff --git a/examples/sites/demos/pc/app/checkbox/basic-usage.vue b/examples/sites/demos/pc/app/checkbox/basic-usage.vue
index e4f4eaf35..800d4f34d 100644
--- a/examples/sites/demos/pc/app/checkbox/basic-usage.vue
+++ b/examples/sites/demos/pc/app/checkbox/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Checkbox } from '@opentiny/vue'
+import { TinyCheckbox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-button-composition-api.vue b/examples/sites/demos/pc/app/checkbox/checkbox-button-composition-api.vue
index 7e2d5b798..104a9dccc 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-button-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-button-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 const checked = ref(['复选框1'])
 </script>
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-button-multiple-composition-api.vue b/examples/sites/demos/pc/app/checkbox/checkbox-button-multiple-composition-api.vue
index 014d16ccf..4c8a28a1a 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-button-multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-button-multiple-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 const cities = ref(['上海', '北京', '广州', '深圳', '西安', '南京', '天津', '四川', '河北', '云南', '海南', '厦门'])
 const checkboxGroup = ref(['上海'])
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-button-multiple.vue b/examples/sites/demos/pc/app/checkbox/checkbox-button-multiple.vue
index a57ee9a6d..01671a29f 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-button-multiple.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-button-multiple.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxButton: CheckboxButton,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxButton,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-button.vue b/examples/sites/demos/pc/app/checkbox/checkbox-button.vue
index 173fd61b8..0fd3d7c99 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-button.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-button.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxButton: CheckboxButton,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxButton,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-events-composition-api.vue b/examples/sites/demos/pc/app/checkbox/checkbox-events-composition-api.vue
index 81adb8270..d843eb7cc 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-events-composition-api.vue
@@ -9,11 +9,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 const checked = ref(['复选框1'])
 
 function valueChange(val) {
-  Modal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
+  TinyModal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-events.vue b/examples/sites/demos/pc/app/checkbox/checkbox-events.vue
index f089352c4..f1c78d1b8 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-events.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-events.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { CheckboxButton, CheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxButton: CheckboxButton,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxButton,
+    TinyCheckboxGroup
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     valueChange(val) {
-      Modal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
+      TinyModal.message({ message: `change 事件触发了，选中值为：${val}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-group-composition-api.vue b/examples/sites/demos/pc/app/checkbox/checkbox-group-composition-api.vue
index 7e7e89473..f61d3418c 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-group-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-group-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 const checked = ref(['复选框1', '复选框2'])
 </script>
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-group.vue b/examples/sites/demos/pc/app/checkbox/checkbox-group.vue
index 75f225ec1..569754642 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-group.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-group.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-slot-composition-api.vue b/examples/sites/demos/pc/app/checkbox/checkbox-slot-composition-api.vue
index b5a39176f..d6a4b52f0 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-slot-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 const checked = ref(['复选框1'])
 </script>
diff --git a/examples/sites/demos/pc/app/checkbox/checkbox-slot.vue b/examples/sites/demos/pc/app/checkbox/checkbox-slot.vue
index 76186a7ba..bc2236dcd 100644
--- a/examples/sites/demos/pc/app/checkbox/checkbox-slot.vue
+++ b/examples/sites/demos/pc/app/checkbox/checkbox-slot.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/checked-composition-api.vue b/examples/sites/demos/pc/app/checkbox/checked-composition-api.vue
index b0c44a247..b65ac72b3 100644
--- a/examples/sites/demos/pc/app/checkbox/checked-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/checked-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 const checkedData = ref(['复选框1'])
 </script>
diff --git a/examples/sites/demos/pc/app/checkbox/checked.vue b/examples/sites/demos/pc/app/checkbox/checked.vue
index 40e85f183..40d97672d 100644
--- a/examples/sites/demos/pc/app/checkbox/checked.vue
+++ b/examples/sites/demos/pc/app/checkbox/checked.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/custom-color-composition-api.vue b/examples/sites/demos/pc/app/checkbox/custom-color-composition-api.vue
index e1e3115a6..be024e65c 100644
--- a/examples/sites/demos/pc/app/checkbox/custom-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/custom-color-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 const checked = ref(['复选框1'])
 </script>
diff --git a/examples/sites/demos/pc/app/checkbox/custom-color.vue b/examples/sites/demos/pc/app/checkbox/custom-color.vue
index cf5aa2713..94b0b2a35 100644
--- a/examples/sites/demos/pc/app/checkbox/custom-color.vue
+++ b/examples/sites/demos/pc/app/checkbox/custom-color.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxButton: CheckboxButton,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxButton,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/description-composition-api.vue b/examples/sites/demos/pc/app/checkbox/description-composition-api.vue
index e88ecd271..f88a826e9 100644
--- a/examples/sites/demos/pc/app/checkbox/description-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/description-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 const checked = ref(['复选框1', '复选框2', '复选框3'])
 </script>
diff --git a/examples/sites/demos/pc/app/checkbox/description.vue b/examples/sites/demos/pc/app/checkbox/description.vue
index 4ecfe37d4..1b96cc3f8 100644
--- a/examples/sites/demos/pc/app/checkbox/description.vue
+++ b/examples/sites/demos/pc/app/checkbox/description.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/dynamic-create-checkbox-composition-api.vue b/examples/sites/demos/pc/app/checkbox/dynamic-create-checkbox-composition-api.vue
index 83288acb3..ecc286097 100644
--- a/examples/sites/demos/pc/app/checkbox/dynamic-create-checkbox-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/dynamic-create-checkbox-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 const list = ref([])
 const checked = ref([])
@@ -17,7 +17,7 @@ getData().then((data) => {
 })
 
 function valueChange(val) {
-  Modal.message({
+  TinyModal.message({
     message: `当前选择：${JSON.stringify(val)}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/checkbox/dynamic-create-checkbox.vue b/examples/sites/demos/pc/app/checkbox/dynamic-create-checkbox.vue
index 9acad80af..5c0f11a1c 100644
--- a/examples/sites/demos/pc/app/checkbox/dynamic-create-checkbox.vue
+++ b/examples/sites/demos/pc/app/checkbox/dynamic-create-checkbox.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { CheckboxButton, CheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxButton: CheckboxButton,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxButton,
+    TinyCheckboxGroup
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   methods: {
     valueChange(val) {
-      Modal.message({
+      TinyModal.message({
         message: `当前选择：${JSON.stringify(val)}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/checkbox/group-options-composition-api.vue b/examples/sites/demos/pc/app/checkbox/group-options-composition-api.vue
index d6d8689c0..9818b65a8 100644
--- a/examples/sites/demos/pc/app/checkbox/group-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/group-options-composition-api.vue
@@ -4,10 +4,10 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CheckboxGroup as TinyCheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 function handleClick() {
-  Modal.message({ message: 'click', status: 'info' })
+  TinyModal.message({ message: 'click', status: 'info' })
 }
 const checkList = ref(['A'])
 const options = ref([
diff --git a/examples/sites/demos/pc/app/checkbox/group-options.vue b/examples/sites/demos/pc/app/checkbox/group-options.vue
index 713a9ae0c..530440634 100644
--- a/examples/sites/demos/pc/app/checkbox/group-options.vue
+++ b/examples/sites/demos/pc/app/checkbox/group-options.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { CheckboxGroup, Modal } from '@opentiny/vue'
+import { TinyCheckboxGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxGroup
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message({ message: 'click', status: 'info' })
+      TinyModal.message({ message: 'click', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/checkbox/indeterminate-composition-api.vue b/examples/sites/demos/pc/app/checkbox/indeterminate-composition-api.vue
index 40189cc5f..11721cbc7 100644
--- a/examples/sites/demos/pc/app/checkbox/indeterminate-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/indeterminate-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup, TinySwitch } from '@opentiny/vue'
 
 const isDisabled = ref(false)
 const checkboxGroup = ref(['北京'])
diff --git a/examples/sites/demos/pc/app/checkbox/indeterminate.vue b/examples/sites/demos/pc/app/checkbox/indeterminate.vue
index d495a1561..08cee517e 100644
--- a/examples/sites/demos/pc/app/checkbox/indeterminate.vue
+++ b/examples/sites/demos/pc/app/checkbox/indeterminate.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup, Switch } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinySwitch: Switch
+    TinyCheckbox,
+    TinyCheckboxGroup,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/min-max-composition-api.vue b/examples/sites/demos/pc/app/checkbox/min-max-composition-api.vue
index d030dd457..58311844f 100644
--- a/examples/sites/demos/pc/app/checkbox/min-max-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/min-max-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 const checkboxGroup = ref(['上海', '北京'])
 const cities = ref(['上海', '北京', '广州', '深圳'])
diff --git a/examples/sites/demos/pc/app/checkbox/min-max.vue b/examples/sites/demos/pc/app/checkbox/min-max.vue
index c6dab83ce..16cc1869b 100644
--- a/examples/sites/demos/pc/app/checkbox/min-max.vue
+++ b/examples/sites/demos/pc/app/checkbox/min-max.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/shape-composition-api.vue b/examples/sites/demos/pc/app/checkbox/shape-composition-api.vue
index eee989f5d..a29691ff8 100644
--- a/examples/sites/demos/pc/app/checkbox/shape-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/shape-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 const checked = ref(true)
 const checkedArr = ref(['复选框1'])
diff --git a/examples/sites/demos/pc/app/checkbox/shape.vue b/examples/sites/demos/pc/app/checkbox/shape.vue
index 49f0f86d2..2bd37fc98 100644
--- a/examples/sites/demos/pc/app/checkbox/shape.vue
+++ b/examples/sites/demos/pc/app/checkbox/shape.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckbox,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/size-composition-api.vue b/examples/sites/demos/pc/app/checkbox/size-composition-api.vue
index 152087f05..df354bd9d 100644
--- a/examples/sites/demos/pc/app/checkbox/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/size-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 const cities = ref(['上海', '北京', '广州', '深圳'])
 const sizeList = ref(['medium', '', 'small', 'mini'])
diff --git a/examples/sites/demos/pc/app/checkbox/size.vue b/examples/sites/demos/pc/app/checkbox/size.vue
index 6d92e908f..eb0a2ede1 100644
--- a/examples/sites/demos/pc/app/checkbox/size.vue
+++ b/examples/sites/demos/pc/app/checkbox/size.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
+import { TinyCheckboxButton, TinyCheckboxGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxButton: CheckboxButton,
-    TinyCheckboxGroup: CheckboxGroup
+    TinyCheckboxButton,
+    TinyCheckboxGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/checkbox/text-composition-api.vue b/examples/sites/demos/pc/app/checkbox/text-composition-api.vue
index 8a04cb435..766c1c3d8 100644
--- a/examples/sites/demos/pc/app/checkbox/text-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/text-composition-api.vue
@@ -7,12 +7,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Checkbox as TinyCheckbox, Modal, Button as TinyButton } from '@opentiny/vue'
+import { TinyCheckbox, TinyModal, TinyButton } from '@opentiny/vue'
 
 const checked = ref('假文本')
 
 function getValue() {
-  Modal.message({
+  TinyModal.message({
     message: '当前状态对应的值为:' + checked.value,
     top: 200,
     status: 'info'
diff --git a/examples/sites/demos/pc/app/checkbox/text.vue b/examples/sites/demos/pc/app/checkbox/text.vue
index 47e033c0f..43d2d371e 100644
--- a/examples/sites/demos/pc/app/checkbox/text.vue
+++ b/examples/sites/demos/pc/app/checkbox/text.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Checkbox, Modal, Button } from '@opentiny/vue'
+import { TinyCheckbox, TinyModal, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckbox: Checkbox,
-    TinyButton: Button
+    TinyCheckbox,
+    TinyButton
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     getValue() {
-      Modal.message({
+      TinyModal.message({
         message: '当前状态对应的值为:' + this.checked,
         top: 200,
         status: 'info'
diff --git a/examples/sites/demos/pc/app/checkbox/vertical-checkbox-composition-api.vue b/examples/sites/demos/pc/app/checkbox/vertical-checkbox-composition-api.vue
index 3005e2ff7..fa8fd7a96 100644
--- a/examples/sites/demos/pc/app/checkbox/vertical-checkbox-composition-api.vue
+++ b/examples/sites/demos/pc/app/checkbox/vertical-checkbox-composition-api.vue
@@ -19,11 +19,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import {
-  CheckboxGroup as TinyCheckboxGroup,
-  CheckboxButton as TinyCheckboxButton,
-  Checkbox as TinyCheckbox
-} from '@opentiny/vue'
+import { TinyCheckboxGroup, TinyCheckboxButton, TinyCheckbox } from '@opentiny/vue'
 
 const checkboxGroup = ref(['上海'])
 const cities = ref(['上海', '北京', '广州', '深圳'])
diff --git a/examples/sites/demos/pc/app/checkbox/vertical-checkbox.vue b/examples/sites/demos/pc/app/checkbox/vertical-checkbox.vue
index 29e0c2355..1250586d0 100644
--- a/examples/sites/demos/pc/app/checkbox/vertical-checkbox.vue
+++ b/examples/sites/demos/pc/app/checkbox/vertical-checkbox.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script>
-import { Checkbox, CheckboxGroup, CheckboxButton } from '@opentiny/vue'
+import { TinyCheckbox, TinyCheckboxGroup, TinyCheckboxButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCheckboxGroup: CheckboxGroup,
-    TinyCheckboxButton: CheckboxButton,
-    TinyCheckbox: Checkbox
+    TinyCheckboxGroup,
+    TinyCheckboxButton,
+    TinyCheckbox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/collapse/accordion-composition-api.vue b/examples/sites/demos/pc/app/collapse/accordion-composition-api.vue
index 76bef49e7..8657d7b76 100644
--- a/examples/sites/demos/pc/app/collapse/accordion-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/accordion-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 const activeName = ref('1')
 </script>
diff --git a/examples/sites/demos/pc/app/collapse/accordion.vue b/examples/sites/demos/pc/app/collapse/accordion.vue
index 4b0c4aaf8..e1ac20960 100644
--- a/examples/sites/demos/pc/app/collapse/accordion.vue
+++ b/examples/sites/demos/pc/app/collapse/accordion.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/collapse/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/collapse/basic-usage-composition-api.vue
index 2998f1f87..2ccb94704 100644
--- a/examples/sites/demos/pc/app/collapse/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/basic-usage-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 const activeNames = ref(['1', '3'])
 </script>
diff --git a/examples/sites/demos/pc/app/collapse/basic-usage.vue b/examples/sites/demos/pc/app/collapse/basic-usage.vue
index 0ff81e059..e3a94151b 100644
--- a/examples/sites/demos/pc/app/collapse/basic-usage.vue
+++ b/examples/sites/demos/pc/app/collapse/basic-usage.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/collapse/before-close-composition-api.vue b/examples/sites/demos/pc/app/collapse/before-close-composition-api.vue
index 929d362d9..1fc3d354e 100644
--- a/examples/sites/demos/pc/app/collapse/before-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/before-close-composition-api.vue
@@ -22,12 +22,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem, Modal } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem, TinyModal } from '@opentiny/vue'
 
 const activeName = ref('1')
 
 function beforeClose(item, activeNames) {
-  Modal.message({ message: '阻止面板切换，当前点击面板：' + item.name, status: 'error' })
+  TinyModal.message({ message: '阻止面板切换，当前点击面板：' + item.name, status: 'error' })
   return false
 }
 </script>
diff --git a/examples/sites/demos/pc/app/collapse/before-close.vue b/examples/sites/demos/pc/app/collapse/before-close.vue
index 770b4abd8..b2ceb9a0e 100644
--- a/examples/sites/demos/pc/app/collapse/before-close.vue
+++ b/examples/sites/demos/pc/app/collapse/before-close.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     beforeClose(item, activeNames) {
-      Modal.message({ message: '阻止面板切换，当前点击面板：' + item.name, status: 'error' })
+      TinyModal.message({ message: '阻止面板切换，当前点击面板：' + item.name, status: 'error' })
       return false
     }
   }
diff --git a/examples/sites/demos/pc/app/collapse/disable-composition-api.vue b/examples/sites/demos/pc/app/collapse/disable-composition-api.vue
index 32b05e278..9d9952d80 100644
--- a/examples/sites/demos/pc/app/collapse/disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/disable-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 const activeNames = ref(['1'])
 </script>
diff --git a/examples/sites/demos/pc/app/collapse/disable.vue b/examples/sites/demos/pc/app/collapse/disable.vue
index d2b934c3e..59aa14b9a 100644
--- a/examples/sites/demos/pc/app/collapse/disable.vue
+++ b/examples/sites/demos/pc/app/collapse/disable.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/collapse/events-composition-api.vue b/examples/sites/demos/pc/app/collapse/events-composition-api.vue
index 49a674116..dd2401a6d 100644
--- a/examples/sites/demos/pc/app/collapse/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/events-composition-api.vue
@@ -22,12 +22,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem, Modal } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem, TinyModal } from '@opentiny/vue'
 
 const activeNames = ref([1, 3])
 
 function change(activeNames) {
-  Modal.message({
+  TinyModal.message({
     message: 'change 事件，当前激活面板：' + activeNames,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/collapse/events.vue b/examples/sites/demos/pc/app/collapse/events.vue
index fc2c4e578..391e0700f 100644
--- a/examples/sites/demos/pc/app/collapse/events.vue
+++ b/examples/sites/demos/pc/app/collapse/events.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem
+    TinyCollapse,
+    TinyCollapseItem
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     change(activeNames) {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，当前激活面板：' + activeNames,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/collapse/icon-composition-api.vue b/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
index 52e1fb6ab..82390883e 100644
--- a/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 import { iconDeltaRight, iconDeltaRightO } from '@opentiny/vue-icon'
 
 const activeNames = ref(['1', '2'])
diff --git a/examples/sites/demos/pc/app/collapse/icon.vue b/examples/sites/demos/pc/app/collapse/icon.vue
index 0a4cf2021..2aef90e2c 100644
--- a/examples/sites/demos/pc/app/collapse/icon.vue
+++ b/examples/sites/demos/pc/app/collapse/icon.vue
@@ -26,13 +26,13 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 import { IconDeltaRight, IconDeltaRightO } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
+    TinyCollapse,
+    TinyCollapseItem,
     IconDeltaRight: IconDeltaRight()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/collapse/nested-content-composition-api.vue b/examples/sites/demos/pc/app/collapse/nested-content-composition-api.vue
index e1d5316cc..0db3ffa51 100644
--- a/examples/sites/demos/pc/app/collapse/nested-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/nested-content-composition-api.vue
@@ -48,20 +48,20 @@
 <script setup>
 import { ref } from 'vue'
 import {
-  Collapse as TinyCollapse,
-  CollapseItem as TinyCollapseItem,
-  Layout as TinyLayout,
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Row as TinyRow,
-  Col as TinyCol,
-  Input as TinyInput,
-  Numeric as TinyNumeric,
-  IpAddress as TinyIpAddress,
-  Select as TinySelect,
-  Option as TinyOption,
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn
+  TinyCollapse,
+  TinyCollapseItem,
+  TinyLayout,
+  TinyForm,
+  TinyFormItem,
+  TinyRow,
+  TinyCol,
+  TinyInput,
+  TinyNumeric,
+  TinyIpAddress,
+  TinySelect,
+  TinyOption,
+  TinyGrid,
+  TinyGridColumn
 } from '@opentiny/vue'
 
 const activeNames = ref(['1', '2'])
diff --git a/examples/sites/demos/pc/app/collapse/nested-content.vue b/examples/sites/demos/pc/app/collapse/nested-content.vue
index 026e6968d..fec568179 100644
--- a/examples/sites/demos/pc/app/collapse/nested-content.vue
+++ b/examples/sites/demos/pc/app/collapse/nested-content.vue
@@ -47,38 +47,38 @@
 
 <script>
 import {
-  Collapse,
-  CollapseItem,
-  Layout,
-  Form,
-  FormItem,
-  Row,
-  Col,
-  Input,
-  Numeric,
-  IpAddress,
-  Select,
-  Option,
-  Grid,
-  GridColumn
+  TinyCollapse,
+  TinyCollapseItem,
+  TinyLayout,
+  TinyForm,
+  TinyFormItem,
+  TinyRow,
+  TinyCol,
+  TinyInput,
+  TinyNumeric,
+  TinyIpAddress,
+  TinySelect,
+  TinyOption,
+  TinyGrid,
+  TinyGridColumn
 } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
-    TinyLayout: Layout,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyRow: Row,
-    TinyCol: Col,
-    TinyInput: Input,
-    TinyNumeric: Numeric,
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyIpAddress: IpAddress,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyCollapse,
+    TinyCollapseItem,
+    TinyLayout,
+    TinyForm,
+    TinyFormItem,
+    TinyRow,
+    TinyCol,
+    TinyInput,
+    TinyNumeric,
+    TinySelect,
+    TinyOption,
+    TinyIpAddress,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/collapse/title-composition-api.vue b/examples/sites/demos/pc/app/collapse/title-composition-api.vue
index 2bf11830d..f7f246d71 100644
--- a/examples/sites/demos/pc/app/collapse/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/title-composition-api.vue
@@ -35,7 +35,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 import { iconStarO, iconSetting } from '@opentiny/vue-icon'
 
 const activeNames = ref(['1'])
diff --git a/examples/sites/demos/pc/app/collapse/title.vue b/examples/sites/demos/pc/app/collapse/title.vue
index 9c02a211a..80b6225c8 100644
--- a/examples/sites/demos/pc/app/collapse/title.vue
+++ b/examples/sites/demos/pc/app/collapse/title.vue
@@ -34,13 +34,13 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem } from '@opentiny/vue'
+import { TinyCollapse, TinyCollapseItem } from '@opentiny/vue'
 import { iconStarO, iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
+    TinyCollapse,
+    TinyCollapseItem,
     TinyIconStarO: iconStarO(),
     TinyIconSetting: iconSetting()
   },
diff --git a/examples/sites/demos/pc/app/color-picker/alpha-composition-api.vue b/examples/sites/demos/pc/app/color-picker/alpha-composition-api.vue
index db561de27..8168e39dd 100644
--- a/examples/sites/demos/pc/app/color-picker/alpha-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/alpha-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { ColorPicker as TinyColorPicker, Notify } from '@opentiny/vue'
+import { TinyColorPicker, TinyNotify } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const color = ref('#66ccff')
@@ -12,7 +12,7 @@ const color = ref('#66ccff')
  * @param {string} hex #rrggbb
  */
 const onConfirm = (hex) => {
-  Notify({
+  TinyNotify({
     type: 'success',
     position: 'top-right',
     title: '用户点击了选择',
@@ -21,7 +21,7 @@ const onConfirm = (hex) => {
 }
 
 const onCancel = () => {
-  Notify({
+  TinyNotify({
     type: 'warning',
     position: 'top-right',
     title: '用户选择了取消'
diff --git a/examples/sites/demos/pc/app/color-picker/alpha.vue b/examples/sites/demos/pc/app/color-picker/alpha.vue
index 3b07f90e1..d705c63fb 100644
--- a/examples/sites/demos/pc/app/color-picker/alpha.vue
+++ b/examples/sites/demos/pc/app/color-picker/alpha.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { ColorPicker, Notify } from '@opentiny/vue'
+import { TinyColorPicker, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorPicker: ColorPicker
+    TinyColorPicker
   },
   methods: {
     onConfirm(hex) {
-      Notify({
+      TinyNotify({
         type: 'success',
         position: 'top-right',
         title: '用户点击了选择',
@@ -19,7 +19,7 @@ export default {
       })
     },
     onCacnel() {
-      Notify({
+      TinyNotify({
         type: 'warning',
         position: 'top-right',
         title: '用户选择了取消'
diff --git a/examples/sites/demos/pc/app/color-picker/base-composition-api.vue b/examples/sites/demos/pc/app/color-picker/base-composition-api.vue
index f101328ec..2a05ec7db 100644
--- a/examples/sites/demos/pc/app/color-picker/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/base-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { ColorPicker as TinyColorPicker } from '@opentiny/vue'
+import { TinyColorPicker } from '@opentiny/vue'
 import { ref } from 'vue'
 const color = ref('#66ccff')
 </script>
diff --git a/examples/sites/demos/pc/app/color-picker/base.vue b/examples/sites/demos/pc/app/color-picker/base.vue
index aeacfc3d8..93ad1153e 100644
--- a/examples/sites/demos/pc/app/color-picker/base.vue
+++ b/examples/sites/demos/pc/app/color-picker/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { ColorPicker } from '@opentiny/vue'
+import { TinyColorPicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorPicker: ColorPicker
+    TinyColorPicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/color-picker/default-visible-composition-api.vue b/examples/sites/demos/pc/app/color-picker/default-visible-composition-api.vue
index 0f0da86d7..3a4255978 100644
--- a/examples/sites/demos/pc/app/color-picker/default-visible-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/default-visible-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { ColorPicker as TinyColorPicker } from '@opentiny/vue'
+import { TinyColorPicker } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const color = ref('#66ccff')
diff --git a/examples/sites/demos/pc/app/color-picker/default-visible.vue b/examples/sites/demos/pc/app/color-picker/default-visible.vue
index a896d1593..20c04bb30 100644
--- a/examples/sites/demos/pc/app/color-picker/default-visible.vue
+++ b/examples/sites/demos/pc/app/color-picker/default-visible.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ColorPicker } from '@opentiny/vue'
+import { TinyColorPicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorPicker: ColorPicker
+    TinyColorPicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/color-picker/dynamic-color-change-composition-api.vue b/examples/sites/demos/pc/app/color-picker/dynamic-color-change-composition-api.vue
index a9d43516f..1921fa36d 100644
--- a/examples/sites/demos/pc/app/color-picker/dynamic-color-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/dynamic-color-change-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { ColorPicker as TinyColorPicker, Button as TinyButton } from '@opentiny/vue'
+import { TinyColorPicker, TinyButton } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const color = ref('#66ccff')
diff --git a/examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue b/examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue
index 732604d90..2db6c36a4 100644
--- a/examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue
+++ b/examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { ColorPicker, Button } from '@opentiny/vue'
+import { TinyColorPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorPicker: ColorPicker,
-    TinyButton: Button
+    TinyColorPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/color-picker/event-composition-api.vue b/examples/sites/demos/pc/app/color-picker/event-composition-api.vue
index eaf4744bd..ccf6bfe83 100644
--- a/examples/sites/demos/pc/app/color-picker/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/event-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { ColorPicker as TinyColorPicker, Notify } from '@opentiny/vue'
+import { TinyColorPicker, TinyNotify } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const color = ref('#66ccff')
@@ -12,7 +12,7 @@ const color = ref('#66ccff')
  * @param {string} hex #rrggbb
  */
 const onConfirm = (hex) => {
-  Notify({
+  TinyNotify({
     type: 'success',
     position: 'top-right',
     title: '用户点击了选择',
@@ -21,7 +21,7 @@ const onConfirm = (hex) => {
 }
 
 const onCancel = () => {
-  Notify({
+  TinyNotify({
     type: 'warning',
     position: 'top-right',
     title: '用户选择了取消'
diff --git a/examples/sites/demos/pc/app/color-picker/event.vue b/examples/sites/demos/pc/app/color-picker/event.vue
index dfa084fa2..769db43a6 100644
--- a/examples/sites/demos/pc/app/color-picker/event.vue
+++ b/examples/sites/demos/pc/app/color-picker/event.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { ColorPicker, Notify } from '@opentiny/vue'
+import { TinyColorPicker, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorPicker: ColorPicker
+    TinyColorPicker
   },
   methods: {
     onConfirm(hex) {
-      Notify({
+      TinyNotify({
         type: 'success',
         position: 'top-right',
         title: '用户点击了选择',
@@ -19,7 +19,7 @@ export default {
       })
     },
     onCacnel() {
-      Notify({
+      TinyNotify({
         type: 'warning',
         position: 'top-right',
         title: '用户选择了取消'
diff --git a/examples/sites/demos/pc/app/color-picker/history-composition-api.vue b/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
index e06c7e353..4108cf32e 100644
--- a/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/history-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ColorPicker, Button } from '@opentiny/vue'
+import { TinyColorPicker, TinyButton } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const history = ref(['#66ccff'])
diff --git a/examples/sites/demos/pc/app/color-picker/history.vue b/examples/sites/demos/pc/app/color-picker/history.vue
index 61de53198..724f84178 100644
--- a/examples/sites/demos/pc/app/color-picker/history.vue
+++ b/examples/sites/demos/pc/app/color-picker/history.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ColorPicker, Button } from '@opentiny/vue'
+import { TinyColorPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorPicker: ColorPicker,
-    TinyButton: Button
+    TinyColorPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue b/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
index 9e7128d42..96281bd10 100644
--- a/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/predefine-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ColorPicker, Button } from '@opentiny/vue'
+import { TinyColorPicker, TinyButton } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const randomHex = () =>
diff --git a/examples/sites/demos/pc/app/color-picker/predefine.vue b/examples/sites/demos/pc/app/color-picker/predefine.vue
index 801fbf7bf..4a5c73183 100644
--- a/examples/sites/demos/pc/app/color-picker/predefine.vue
+++ b/examples/sites/demos/pc/app/color-picker/predefine.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ColorPicker, Button } from '@opentiny/vue'
+import { TinyColorPicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorPicker: ColorPicker,
-    TinyButton: Button
+    TinyColorPicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/color-picker/size-composition-api.vue b/examples/sites/demos/pc/app/color-picker/size-composition-api.vue
index 6b8131ec5..e01fa4a19 100644
--- a/examples/sites/demos/pc/app/color-picker/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-picker/size-composition-api.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { ColorPicker as TinyColorPicker } from '@opentiny/vue'
+import { TinyColorPicker } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const color = ref('#66ccff')
diff --git a/examples/sites/demos/pc/app/color-picker/size.vue b/examples/sites/demos/pc/app/color-picker/size.vue
index 4a7a9c8bf..01ee20a59 100644
--- a/examples/sites/demos/pc/app/color-picker/size.vue
+++ b/examples/sites/demos/pc/app/color-picker/size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { ColorPicker } from '@opentiny/vue'
+import { TinyColorPicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorPicker: ColorPicker
+    TinyColorPicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/color-select-panel/alpha-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/alpha-composition-api.vue
index 79c891c97..06ec4129c 100644
--- a/examples/sites/demos/pc/app/color-select-panel/alpha-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/alpha-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ColorSelectPanel as TinyColorSelectPanel, Button } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const visible = ref(false)
diff --git a/examples/sites/demos/pc/app/color-select-panel/alpha.vue b/examples/sites/demos/pc/app/color-select-panel/alpha.vue
index 5bd38908a..bb333810b 100644
--- a/examples/sites/demos/pc/app/color-select-panel/alpha.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/alpha.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ColorSelectPanel, Button } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorSelectPanel: ColorSelectPanel,
-    TinyButton: Button
+    TinyColorSelectPanel,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/color-select-panel/base-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/base-composition-api.vue
index 92db2a9cc..348e0c309 100644
--- a/examples/sites/demos/pc/app/color-select-panel/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/base-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ColorSelectPanel as TinyColorSelectPanel, Button } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const visible = ref(false)
diff --git a/examples/sites/demos/pc/app/color-select-panel/base.vue b/examples/sites/demos/pc/app/color-select-panel/base.vue
index 321be6502..ddff9d085 100644
--- a/examples/sites/demos/pc/app/color-select-panel/base.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/base.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ColorSelectPanel, Button } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorSelectPanel: ColorSelectPanel,
-    TinyButton: Button
+    TinyColorSelectPanel,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/color-select-panel/event-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/event-composition-api.vue
index 78393d74d..146510c21 100644
--- a/examples/sites/demos/pc/app/color-select-panel/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/event-composition-api.vue
@@ -9,14 +9,14 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ColorSelectPanel as TinyColorSelectPanel, Button, Notify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const visible = ref(false)
 const changeVisible = () => (visible.value = !visible.value)
 const hidden = () => (visible.value = false)
 const onConfirm = (hex) => {
-  Notify({
+  TinyNotify({
     type: 'success',
     position: 'top-right',
     title: '用户点击了选择',
@@ -25,7 +25,7 @@ const onConfirm = (hex) => {
   hidden()
 }
 const onCancel = () => {
-  Notify({
+  TinyNotify({
     type: 'error',
     position: 'top-right',
     title: '用户点击了取消'
diff --git a/examples/sites/demos/pc/app/color-select-panel/event.vue b/examples/sites/demos/pc/app/color-select-panel/event.vue
index f23cb2546..eba209b73 100644
--- a/examples/sites/demos/pc/app/color-select-panel/event.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/event.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { ColorSelectPanel, Button, Notify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorSelectPanel: ColorSelectPanel,
-    TinyButton: Button
+    TinyColorSelectPanel,
+    TinyButton
   },
   data() {
     return {
@@ -29,7 +29,7 @@ export default {
       this.visible = false
     },
     onConfirm(hex) {
-      Notify({
+      TinyNotify({
         type: 'success',
         position: 'top-right',
         title: '用户点击了选择',
@@ -38,7 +38,7 @@ export default {
       this.hidden()
     },
     onCancel() {
-      Notify({
+      TinyNotify({
         type: 'error',
         position: 'top-right',
         title: '用户点击了取消'
diff --git a/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue
index 821a91f56..010330d3e 100644
--- a/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue
@@ -11,14 +11,14 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ColorSelectPanel, Button as TinyButton, Notify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const visible = ref(false)
 const changeVisible = () => (visible.value = !visible.value)
 const hidden = () => (visible.value = false)
 const onConfirm = (msg) => {
-  Notify({
+  TinyNotify({
     type: 'success',
     position: 'top-right',
     title: '用户点击了选择',
@@ -27,7 +27,7 @@ const onConfirm = (msg) => {
   hidden()
 }
 const onCancel = () => {
-  Notify({
+  TinyNotify({
     type: 'error',
     position: 'top-right',
     title: '用户点击了取消'
diff --git a/examples/sites/demos/pc/app/color-select-panel/history.vue b/examples/sites/demos/pc/app/color-select-panel/history.vue
index ad6d3ffa5..8def81822 100644
--- a/examples/sites/demos/pc/app/color-select-panel/history.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/history.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { ColorSelectPanel, Button, Notify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorSelectPanel: ColorSelectPanel,
-    TinyButton: Button
+    TinyColorSelectPanel,
+    TinyButton
   },
   data() {
     return {
@@ -39,7 +39,7 @@ export default {
       this.visible = false
     },
     onConfirm(msg) {
-      Notify({
+      TinyNotify({
         type: 'success',
         position: 'top-right',
         title: '用户点击了选择',
@@ -48,7 +48,7 @@ export default {
       this.hidden()
     },
     onCancel() {
-      Notify({
+      TinyNotify({
         type: 'error',
         position: 'top-right',
         title: '用户点击了取消'
diff --git a/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue b/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue
index 3639d0fe8..6e956bd6b 100644
--- a/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue
@@ -18,14 +18,14 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ColorSelectPanel, Button as TinyButton, Notify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const visible = ref(false)
 const changeVisible = () => (visible.value = !visible.value)
 const hidden = () => (visible.value = false)
 const onConfirm = (msg) => {
-  Notify({
+  TinyNotify({
     type: 'success',
     position: 'top-right',
     title: '用户点击了选择',
@@ -34,7 +34,7 @@ const onConfirm = (msg) => {
   hidden()
 }
 const onCancel = () => {
-  Notify({
+  TinyNotify({
     type: 'error',
     position: 'top-right',
     title: '用户点击了取消'
diff --git a/examples/sites/demos/pc/app/color-select-panel/predefine.vue b/examples/sites/demos/pc/app/color-select-panel/predefine.vue
index 45cc4d495..f478f3243 100644
--- a/examples/sites/demos/pc/app/color-select-panel/predefine.vue
+++ b/examples/sites/demos/pc/app/color-select-panel/predefine.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { ColorSelectPanel, Button, Notify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyColorSelectPanel: ColorSelectPanel,
-    TinyButton: Button
+    TinyColorSelectPanel,
+    TinyButton
   },
   data() {
     return {
@@ -39,7 +39,7 @@ export default {
       this.visible = false
     },
     onConfirm(msg) {
-      Notify({
+      TinyNotify({
         type: 'success',
         position: 'top-right',
         title: '用户点击了选择',
@@ -48,7 +48,7 @@ export default {
       this.hidden()
     },
     onCancel() {
-      Notify({
+      TinyNotify({
         type: 'error',
         position: 'top-right',
         title: '用户点击了取消'
diff --git a/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
index 9e93c96b9..f718b0c7c 100644
--- a/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
@@ -14,20 +14,20 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Company as TinyCompany, Modal } from '@opentiny/vue'
+import { TinyCompany, TinyModal } from '@opentiny/vue'
 
 const value = ref('')
 
 function visibleChange(val) {
-  Modal.message({ message: `visible:${val}`, status: 'info' })
+  TinyModal.message({ message: `visible:${val}`, status: 'info' })
 }
 
 function clear() {
-  Modal.message({ message: 'clear:触发了', status: 'info' })
+  TinyModal.message({ message: 'clear:触发了', status: 'info' })
 }
 
 function change(value) {
-  Modal.message({ message: `change:${value}`, status: 'info' })
+  TinyModal.message({ message: `change:${value}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/company/basic-usage.vue b/examples/sites/demos/pc/app/company/basic-usage.vue
index a56e48d9c..a659d5f1c 100644
--- a/examples/sites/demos/pc/app/company/basic-usage.vue
+++ b/examples/sites/demos/pc/app/company/basic-usage.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="jsx">
-import { Company, Modal } from '@opentiny/vue'
+import { TinyCompany, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCompany: Company
+    TinyCompany
   },
   data() {
     return {
@@ -26,13 +26,13 @@ export default {
   },
   methods: {
     visibleChange(val) {
-      Modal.message({ message: `visible:${val}`, status: 'info' })
+      TinyModal.message({ message: `visible:${val}`, status: 'info' })
     },
     clear() {
-      Modal.message({ message: 'clear:触发了', status: 'info' })
+      TinyModal.message({ message: 'clear:触发了', status: 'info' })
     },
     change(value) {
-      Modal.message({ message: `change:${value}`, status: 'info' })
+      TinyModal.message({ message: `change:${value}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/company/custom-service-composition-api.vue b/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
index 240cf11fd..3ccc160de 100644
--- a/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Company as TinyCompany, Modal } from '@opentiny/vue'
+import { TinyCompany, TinyModal } from '@opentiny/vue'
 
 const fields = ref({
   textField: 'name',
@@ -46,10 +46,10 @@ function getCompanyData() {
 }
 
 function clear() {
-  Modal.message({ message: 'clear:触发了', status: 'info' })
+  TinyModal.message({ message: 'clear:触发了', status: 'info' })
 }
 
 function change(value) {
-  Modal.message({ message: `change:${value}`, status: 'info' })
+  TinyModal.message({ message: `change:${value}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/company/custom-service.vue b/examples/sites/demos/pc/app/company/custom-service.vue
index 84d69410e..d8fff6e21 100644
--- a/examples/sites/demos/pc/app/company/custom-service.vue
+++ b/examples/sites/demos/pc/app/company/custom-service.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="jsx">
-import { Company, Modal } from '@opentiny/vue'
+import { TinyCompany, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCompany: Company
+    TinyCompany
   },
   data() {
     return {
@@ -52,10 +52,10 @@ export default {
       })
     },
     clear() {
-      Modal.message({ message: 'clear:触发了', status: 'info' })
+      TinyModal.message({ message: 'clear:触发了', status: 'info' })
     },
     change(value) {
-      Modal.message({ message: `change:${value}`, status: 'info' })
+      TinyModal.message({ message: `change:${value}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue b/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
index 64e1ba81d..80beadaf8 100644
--- a/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Company as TinyCompany } from '@opentiny/vue'
+import { TinyCompany } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/company/custom-show-num.vue b/examples/sites/demos/pc/app/company/custom-show-num.vue
index 5214dd72a..d52056a7f 100644
--- a/examples/sites/demos/pc/app/company/custom-show-num.vue
+++ b/examples/sites/demos/pc/app/company/custom-show-num.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Company } from '@opentiny/vue'
+import { TinyCompany } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCompany: Company
+    TinyCompany
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/company/fields-composition-api.vue b/examples/sites/demos/pc/app/company/fields-composition-api.vue
index 4db0d1f56..c1388e0e4 100644
--- a/examples/sites/demos/pc/app/company/fields-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/fields-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Company as TinyCompany } from '@opentiny/vue'
+import { TinyCompany } from '@opentiny/vue'
 
 const value = ref('')
 const fields = ref({
diff --git a/examples/sites/demos/pc/app/company/fields.vue b/examples/sites/demos/pc/app/company/fields.vue
index 037c66533..3a48e18a0 100644
--- a/examples/sites/demos/pc/app/company/fields.vue
+++ b/examples/sites/demos/pc/app/company/fields.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Company } from '@opentiny/vue'
+import { TinyCompany } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCompany: Company
+    TinyCompany
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/config-provider/base-composition-api.vue b/examples/sites/demos/pc/app/config-provider/base-composition-api.vue
index 0eaa7b4af..55ea66738 100644
--- a/examples/sites/demos/pc/app/config-provider/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/config-provider/base-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { ConfigProvider as TinyConfigProvider, Alert as TinyAlert, Modal } from '@opentiny/vue'
+import { TinyConfigProvider, TinyAlert, TinyModal } from '@opentiny/vue'
 import { iconWarningTriangle } from '@opentiny/vue-icon'
 
 const design = ref({
@@ -31,7 +31,7 @@ const design = ref({
         return {
           handleClose() {
             state.show = false
-            Modal.message('触发自定方法')
+            TinyModal.message('触发自定方法')
             emit('close')
           }
         }
@@ -40,5 +40,3 @@ const design = ref({
   }
 })
 </script>
-
-<style scoped></style>
diff --git a/examples/sites/demos/pc/app/config-provider/base.vue b/examples/sites/demos/pc/app/config-provider/base.vue
index 0aa9e755d..a4c1a3e43 100644
--- a/examples/sites/demos/pc/app/config-provider/base.vue
+++ b/examples/sites/demos/pc/app/config-provider/base.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script>
-import { ConfigProvider, Alert, Modal } from '@opentiny/vue'
+import { TinyConfigProvider, TinyAlert, TinyModal } from '@opentiny/vue'
 import { iconWarningTriangle } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyConfigProvider: ConfigProvider,
-    TinyAlert: Alert
+    TinyConfigProvider,
+    TinyAlert
   },
   data() {
     return {
@@ -21,7 +21,7 @@ export default {
         name: 'smb', // 设计规范名称
         version: '1.0.0', // 设计规范版本号
         components: {
-          Alert: {
+          TinyAlert: {
             icons: {
               warning: iconWarningTriangle()
             },
@@ -37,7 +37,7 @@ export default {
               return {
                 handleClose() {
                   state.show = false
-                  Modal.message('触发自定方法')
+                  TinyModal.message('触发自定方法')
                   emit('close')
                 }
               }
@@ -49,5 +49,3 @@ export default {
   }
 }
 </script>
-
-<style scoped></style>
diff --git a/examples/sites/demos/pc/app/config-provider/tag-composition-api.vue b/examples/sites/demos/pc/app/config-provider/tag-composition-api.vue
index d52743bed..3fcaaae34 100644
--- a/examples/sites/demos/pc/app/config-provider/tag-composition-api.vue
+++ b/examples/sites/demos/pc/app/config-provider/tag-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { ConfigProvider as TinyConfigProvider, Tag as TinyTag, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyConfigProvider, TinyTag, TinySwitch } from '@opentiny/vue'
 
 const tag = ref({
   enable: true,
diff --git a/examples/sites/demos/pc/app/config-provider/tag.vue b/examples/sites/demos/pc/app/config-provider/tag.vue
index dea9ad763..3a333944e 100644
--- a/examples/sites/demos/pc/app/config-provider/tag.vue
+++ b/examples/sites/demos/pc/app/config-provider/tag.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { ConfigProvider, Tag, Switch } from '@opentiny/vue'
+import { TinyConfigProvider, TinyTag, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyConfigProvider: ConfigProvider,
-    TinyTag: Tag,
-    TinySwitch: Switch
+    TinyConfigProvider,
+    TinyTag,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/config-provider/text-direct-composition-api.vue b/examples/sites/demos/pc/app/config-provider/text-direct-composition-api.vue
index c7cf8ec41..cb81d92ed 100644
--- a/examples/sites/demos/pc/app/config-provider/text-direct-composition-api.vue
+++ b/examples/sites/demos/pc/app/config-provider/text-direct-composition-api.vue
@@ -56,14 +56,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  ConfigProvider as TinyConfigProvider,
-  Button as TinyButton,
-  Input as TinyInput,
-  Layout as TinyLayout,
-  Row as TinyRow,
-  Col as TinyCol
-} from '@opentiny/vue'
+import { TinyConfigProvider, TinyButton, TinyInput, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 const direction = ref('ltr')
 const input = ref('')
diff --git a/examples/sites/demos/pc/app/config-provider/text-direct.vue b/examples/sites/demos/pc/app/config-provider/text-direct.vue
index baa1bd86c..39eac74a8 100644
--- a/examples/sites/demos/pc/app/config-provider/text-direct.vue
+++ b/examples/sites/demos/pc/app/config-provider/text-direct.vue
@@ -55,16 +55,16 @@
 </template>
 
 <script>
-import { ConfigProvider, Button, Input, Layout, Row, Col } from '@opentiny/vue'
+import { TinyConfigProvider, TinyButton, TinyInput, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyConfigProvider: ConfigProvider,
-    TinyButton: Button,
-    TinyInput: Input,
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyConfigProvider,
+    TinyButton,
+    TinyInput,
+    TinyLayout,
+    TinyRow,
+    TinyCol
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/container/basic-usage.vue b/examples/sites/demos/pc/app/container/basic-usage.vue
index 115daa471..cf1604c5e 100644
--- a/examples/sites/demos/pc/app/container/basic-usage.vue
+++ b/examples/sites/demos/pc/app/container/basic-usage.vue
@@ -26,13 +26,13 @@
 </template>
 
 <script lang="jsx">
-import { Container, Radio, RadioGroup } from '@opentiny/vue'
+import { TinyContainer, TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyContainer: Container,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyContainer,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/container/custom-with-height.vue b/examples/sites/demos/pc/app/container/custom-with-height.vue
index 98047438b..be300585e 100644
--- a/examples/sites/demos/pc/app/container/custom-with-height.vue
+++ b/examples/sites/demos/pc/app/container/custom-with-height.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script lang="jsx">
-import { Container, Layout } from '@opentiny/vue'
+import { TinyContainer, TinyLayout } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyContainer: Container,
-    TinyLayout: Layout
+    TinyContainer,
+    TinyLayout
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
index 2e79b57ca..12723c81f 100644
--- a/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
@@ -7,12 +7,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Country as TinyCountry, Modal } from '@opentiny/vue'
+import { TinyCountry, TinyModal } from '@opentiny/vue'
 
 const value = ref('')
 
 function change(value) {
-  Modal.message({ message: '当前选中国家：' + value, status: 'info' })
+  TinyModal.message({ message: '当前选中国家：' + value, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/country/basic-usage.vue b/examples/sites/demos/pc/app/country/basic-usage.vue
index 24806c0c4..f1dfc8cd6 100644
--- a/examples/sites/demos/pc/app/country/basic-usage.vue
+++ b/examples/sites/demos/pc/app/country/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Country, Modal } from '@opentiny/vue'
+import { TinyCountry, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCountry: Country
+    TinyCountry
   },
   data() {
     return {
@@ -19,7 +19,7 @@ export default {
   },
   methods: {
     change(value) {
-      Modal.message({ message: '当前选中国家：' + value, status: 'info' })
+      TinyModal.message({ message: '当前选中国家：' + value, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/country/custom-service-composition-api.vue b/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
index 6d7667b60..209c5e1f8 100644
--- a/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Country as TinyCountry } from '@opentiny/vue'
+import { TinyCountry } from '@opentiny/vue'
 
 const value = ref('')
 
@@ -12,28 +12,28 @@ function getCountryData() {
   return new Promise((resolve) => {
     resolve([
       {
-        'territory_short_name': 'China',
-        'description': 'the Peoples Republic of China',
-        'language': 'US',
-        'territory_code': 'CN'
+        territory_short_name: 'China',
+        description: 'the Peoples Republic of China',
+        language: 'US',
+        territory_code: 'CN'
       },
       {
-        'territory_short_name': 'France',
-        'description': 'the French Republic',
-        'language': 'US',
-        'territory_code': 'FR'
+        territory_short_name: 'France',
+        description: 'the French Republic',
+        language: 'US',
+        territory_code: 'FR'
       },
       {
-        'territory_short_name': 'Finland',
-        'description': 'the Republic of Finland',
-        'language': 'US',
-        'territory_code': 'FI'
+        territory_short_name: 'Finland',
+        description: 'the Republic of Finland',
+        language: 'US',
+        territory_code: 'FI'
       },
       {
-        'territory_short_name': 'Kuwait',
-        'description': 'the State of Kuwait',
-        'language': 'US',
-        'territory_code': 'KW'
+        territory_short_name: 'Kuwait',
+        description: 'the State of Kuwait',
+        language: 'US',
+        territory_code: 'KW'
       }
     ])
   })
diff --git a/examples/sites/demos/pc/app/country/custom-service.vue b/examples/sites/demos/pc/app/country/custom-service.vue
index 019576132..df26f051a 100644
--- a/examples/sites/demos/pc/app/country/custom-service.vue
+++ b/examples/sites/demos/pc/app/country/custom-service.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Country } from '@opentiny/vue'
+import { TinyCountry } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCountry: Country
+    TinyCountry
   },
   data() {
     return {
@@ -19,28 +19,28 @@ export default {
       return new Promise((resolve) => {
         resolve([
           {
-            'territory_short_name': 'China',
-            'description': 'the Peoples Republic of China',
-            'language': 'US',
-            'territory_code': 'CN'
+            territory_short_name: 'China',
+            description: 'the Peoples Republic of China',
+            language: 'US',
+            territory_code: 'CN'
           },
           {
-            'territory_short_name': 'France',
-            'description': 'the French Republic',
-            'language': 'US',
-            'territory_code': 'FR'
+            territory_short_name: 'France',
+            description: 'the French Republic',
+            language: 'US',
+            territory_code: 'FR'
           },
           {
-            'territory_short_name': 'Finland',
-            'description': 'the Republic of Finland',
-            'language': 'US',
-            'territory_code': 'FI'
+            territory_short_name: 'Finland',
+            description: 'the Republic of Finland',
+            language: 'US',
+            territory_code: 'FI'
           },
           {
-            'territory_short_name': 'Kuwait',
-            'description': 'the State of Kuwait',
-            'language': 'US',
-            'territory_code': 'KW'
+            territory_short_name: 'Kuwait',
+            description: 'the State of Kuwait',
+            language: 'US',
+            territory_code: 'KW'
           }
         ])
       })
diff --git a/examples/sites/demos/pc/app/country/fields-composition-api.vue b/examples/sites/demos/pc/app/country/fields-composition-api.vue
index 1ff26cdc5..5c375816d 100644
--- a/examples/sites/demos/pc/app/country/fields-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/fields-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Country as TinyCountry } from '@opentiny/vue'
+import { TinyCountry } from '@opentiny/vue'
 
 const value = ref('')
 const fields = ref({
diff --git a/examples/sites/demos/pc/app/country/fields.vue b/examples/sites/demos/pc/app/country/fields.vue
index caf81feb3..1ba408c9b 100644
--- a/examples/sites/demos/pc/app/country/fields.vue
+++ b/examples/sites/demos/pc/app/country/fields.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Country } from '@opentiny/vue'
+import { TinyCountry } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCountry: Country
+    TinyCountry
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue b/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue
index 3aad1857b..92efcbafd 100644
--- a/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/aspect-ratio-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/aspect-ratio.vue b/examples/sites/demos/pc/app/crop/aspect-ratio.vue
index 415719f61..e75ee4e39 100644
--- a/examples/sites/demos/pc/app/crop/aspect-ratio.vue
+++ b/examples/sites/demos/pc/app/crop/aspect-ratio.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/auto-crop-area-composition-api.vue b/examples/sites/demos/pc/app/crop/auto-crop-area-composition-api.vue
index a9b4090aa..a8ec2dc16 100644
--- a/examples/sites/demos/pc/app/crop/auto-crop-area-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/auto-crop-area-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/auto-crop-area.vue b/examples/sites/demos/pc/app/crop/auto-crop-area.vue
index ec587c127..b677d8366 100644
--- a/examples/sites/demos/pc/app/crop/auto-crop-area.vue
+++ b/examples/sites/demos/pc/app/crop/auto-crop-area.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/crop/basic-usage-composition-api.vue
index e39743f5e..d73a32819 100644
--- a/examples/sites/demos/pc/app/crop/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/basic-usage.vue b/examples/sites/demos/pc/app/crop/basic-usage.vue
index f260684dd..4f70e68af 100644
--- a/examples/sites/demos/pc/app/crop/basic-usage.vue
+++ b/examples/sites/demos/pc/app/crop/basic-usage.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/crop-meth-composition-api.vue b/examples/sites/demos/pc/app/crop/crop-meth-composition-api.vue
index 7f5be1d79..8c496bba2 100644
--- a/examples/sites/demos/pc/app/crop/crop-meth-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/crop-meth-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
diff --git a/examples/sites/demos/pc/app/crop/crop-meth.vue b/examples/sites/demos/pc/app/crop/crop-meth.vue
index b0f750527..682b2cfe5 100644
--- a/examples/sites/demos/pc/app/crop/crop-meth.vue
+++ b/examples/sites/demos/pc/app/crop/crop-meth.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/drag-mode-composition-api.vue b/examples/sites/demos/pc/app/crop/drag-mode-composition-api.vue
index 905a4f53f..6c37f078c 100644
--- a/examples/sites/demos/pc/app/crop/drag-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/drag-mode-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/drag-mode.vue b/examples/sites/demos/pc/app/crop/drag-mode.vue
index 183617694..bf39044ea 100644
--- a/examples/sites/demos/pc/app/crop/drag-mode.vue
+++ b/examples/sites/demos/pc/app/crop/drag-mode.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue b/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue
index 70dba9982..75b57385f 100644
--- a/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/event-about-crop-composition-api.vue
@@ -19,45 +19,45 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop, Modal } from '@opentiny/vue'
+import { TinyButton, TinyCrop, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 
 function getCanvasData() {
-  Modal.message({
+  TinyModal.message({
     message: `Canvas 数据：${JSON.stringify(cropRef.value.getCropBoxData())}`,
     status: 'info'
   })
 }
 
 function cropdata(data) {
-  Modal.message({
+  TinyModal.message({
     message: `Canvas 数据：${JSON.stringify(data)}`,
     status: 'info'
   })
 }
 
 function cropstart(e) {
-  Modal.message({
+  TinyModal.message({
     message: 'cropstart 事件，回调参数：' + e,
     status: 'info'
   })
 }
 
 function cropmove(e) {
-  Modal.message({
+  TinyModal.message({
     message: 'cropmove 事件，回调参数：' + e,
     status: 'info'
   })
 }
 
 function cropend(e) {
-  Modal.message({ message: 'cropend 事件，回调参数：' + e, status: 'info' })
+  TinyModal.message({ message: 'cropend 事件，回调参数：' + e, status: 'info' })
 }
 
 function crop(e) {
-  Modal.message({ message: 'crop 事件，回调参数：' + e, status: 'info' })
+  TinyModal.message({ message: 'crop 事件，回调参数：' + e, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/crop/event-about-crop.vue b/examples/sites/demos/pc/app/crop/event-about-crop.vue
index 13ef9f17c..17e18f176 100644
--- a/examples/sites/demos/pc/app/crop/event-about-crop.vue
+++ b/examples/sites/demos/pc/app/crop/event-about-crop.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop, Modal } from '@opentiny/vue'
+import { TinyButton, TinyCrop, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
@@ -33,34 +33,34 @@ export default {
   },
   methods: {
     getCanvasData() {
-      Modal.message({
+      TinyModal.message({
         message: `Canvas 数据：${JSON.stringify(this.$refs.crop.getCropBoxData())}`,
         status: 'info'
       })
     },
     cropdata(data) {
-      Modal.message({
+      TinyModal.message({
         message: `Canvas 数据：${JSON.stringify(data)}`,
         status: 'info'
       })
     },
     cropstart(e) {
-      Modal.message({
+      TinyModal.message({
         message: 'cropstart 事件，回调参数：' + e,
         status: 'info'
       })
     },
     cropmove(e) {
-      Modal.message({
+      TinyModal.message({
         message: 'cropmove 事件，回调参数：' + e,
         status: 'info'
       })
     },
     cropend(e) {
-      Modal.message({ message: 'cropend 事件，回调参数：' + e, status: 'info' })
+      TinyModal.message({ message: 'cropend 事件，回调参数：' + e, status: 'info' })
     },
     crop(e) {
-      Modal.message({ message: 'crop 事件，回调参数：' + e, status: 'info' })
+      TinyModal.message({ message: 'crop 事件，回调参数：' + e, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/crop/event-ready-composition-api.vue b/examples/sites/demos/pc/app/crop/event-ready-composition-api.vue
index c65f82fa0..34bd9653e 100644
--- a/examples/sites/demos/pc/app/crop/event-ready-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/event-ready-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop, Modal } from '@opentiny/vue'
+import { TinyButton, TinyCrop, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
@@ -25,6 +25,6 @@ function destroy() {
 }
 
 function ready() {
-  Modal.message('触发 ready 事件')
+  TinyModal.message('触发 ready 事件')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/crop/event-ready.vue b/examples/sites/demos/pc/app/crop/event-ready.vue
index 03bf77dc2..79e80ba77 100644
--- a/examples/sites/demos/pc/app/crop/event-ready.vue
+++ b/examples/sites/demos/pc/app/crop/event-ready.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop, Modal } from '@opentiny/vue'
+import { TinyButton, TinyCrop, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
@@ -31,7 +31,7 @@ export default {
       this.$refs.crop.destroy()
     },
     ready() {
-      Modal.message('触发 ready 事件')
+      TinyModal.message('触发 ready 事件')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/crop/get-container-data-composition-api.vue b/examples/sites/demos/pc/app/crop/get-container-data-composition-api.vue
index ce9ef60e3..9095e23d8 100644
--- a/examples/sites/demos/pc/app/crop/get-container-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-container-data-composition-api.vue
@@ -8,14 +8,14 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Crop as TinyCrop, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 
 function getContainerData() {
-  Modal.message({
+  TinyModal.message({
     message: `容器数据：${JSON.stringify(cropRef.value.getContainerData())}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/crop/get-container-data.vue b/examples/sites/demos/pc/app/crop/get-container-data.vue
index 594acaa0a..8a250e0c1 100644
--- a/examples/sites/demos/pc/app/crop/get-container-data.vue
+++ b/examples/sites/demos/pc/app/crop/get-container-data.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Crop, Button, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   },
   methods: {
     getContainerData() {
-      Modal.message({
+      TinyModal.message({
         message: `容器数据：${JSON.stringify(this.$refs.crop.getContainerData())}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/crop/get-crop-box-data-composition-api.vue b/examples/sites/demos/pc/app/crop/get-crop-box-data-composition-api.vue
index 63f3dbdb2..8e9a73516 100644
--- a/examples/sites/demos/pc/app/crop/get-crop-box-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-crop-box-data-composition-api.vue
@@ -8,14 +8,14 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Crop as TinyCrop, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 
 function getCropBoxData() {
-  Modal.message({
+  TinyModal.message({
     message: `裁剪框数据：${JSON.stringify(cropRef.value.getCropBoxData())}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/crop/get-crop-box-data.vue b/examples/sites/demos/pc/app/crop/get-crop-box-data.vue
index c190df2a0..d8a7933dc 100644
--- a/examples/sites/demos/pc/app/crop/get-crop-box-data.vue
+++ b/examples/sites/demos/pc/app/crop/get-crop-box-data.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Crop, Button, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   },
   methods: {
     getCropBoxData() {
-      Modal.message({
+      TinyModal.message({
         message: `裁剪框数据：${JSON.stringify(this.$refs.crop.getCropBoxData())}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue b/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue
index 2ae9484c1..585f69672 100644
--- a/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-cropped-canvas-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Crop as TinyCrop, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
@@ -28,12 +28,12 @@ function getCroppedCanvas() {
   if (canvas.toBlob) {
     // 生成 Blob 图片格式
     canvas.toBlob((img) => {
-      Modal.message({ message: `Blob：${img.size}`, status: 'info' })
+      TinyModal.message({ message: `Blob：${img.size}`, status: 'info' })
     })
   } else if (canvas.msToBlob) {
     // 生成兼容 IE 的 Blob 图片格式
     const img = canvas.msToBlob()
-    Modal.message({ message: `Blob：${img.size}`, status: 'info' })
+    TinyModal.message({ message: `Blob：${img.size}`, status: 'info' })
   } else {
     // 生成 base64 图片格式
     canvas.toDataURL('image/jpeg')
diff --git a/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue b/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue
index b1064b3fa..19a6432d0 100644
--- a/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue
+++ b/examples/sites/demos/pc/app/crop/get-cropped-canvas.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { Crop, Button, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
@@ -35,12 +35,12 @@ export default {
       if (canvas.toBlob) {
         // 生成 Blob 图片格式
         canvas.toBlob((img) => {
-          Modal.message({ message: `Blob：${img.size}`, status: 'info' })
+          TinyModal.message({ message: `Blob：${img.size}`, status: 'info' })
         })
       } else if (canvas.msToBlob) {
         // 生成兼容 IE 的 Blob 图片格式
         const img = canvas.msToBlob()
-        Modal.message({ message: `Blob：${img.size}`, status: 'info' })
+        TinyModal.message({ message: `Blob：${img.size}`, status: 'info' })
       } else {
         // 生成 base64 图片格式
         canvas.toDataURL('image/jpeg')
diff --git a/examples/sites/demos/pc/app/crop/get-data-composition-api.vue b/examples/sites/demos/pc/app/crop/get-data-composition-api.vue
index 5fdf4fe2e..5948d3b34 100644
--- a/examples/sites/demos/pc/app/crop/get-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-data-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Crop as TinyCrop, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
@@ -20,7 +20,7 @@ function clearn() {
 }
 
 function getData() {
-  Modal.message({
+  TinyModal.message({
     message: `裁剪区域数据：${JSON.stringify(cropRef.value.getData())}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/crop/get-data.vue b/examples/sites/demos/pc/app/crop/get-data.vue
index 945dffe77..2a991ce2c 100644
--- a/examples/sites/demos/pc/app/crop/get-data.vue
+++ b/examples/sites/demos/pc/app/crop/get-data.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Crop, Button, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
       this.$refs.crop.clear()
     },
     getData() {
-      Modal.message({
+      TinyModal.message({
         message: `裁剪区域数据：${JSON.stringify(this.$refs.crop.getData())}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue b/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue
index 215b4d976..c14d67ca2 100644
--- a/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/get-image-data-composition-api.vue
@@ -9,20 +9,20 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Crop as TinyCrop, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 
 function getImageData() {
-  Modal.message({
+  TinyModal.message({
     message: `图像数据：${JSON.stringify(cropRef.value.getImageData())}`,
     status: 'info'
   })
 }
 function getCanvasData() {
-  Modal.message({
+  TinyModal.message({
     message: `画布位置和大小数据: ${JSON.stringify(cropRef.value.getCanvasData())}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/crop/get-image-data.vue b/examples/sites/demos/pc/app/crop/get-image-data.vue
index 69739589d..0082a8b9d 100644
--- a/examples/sites/demos/pc/app/crop/get-image-data.vue
+++ b/examples/sites/demos/pc/app/crop/get-image-data.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Crop, Button, Modal } from '@opentiny/vue'
+import { TinyCrop, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
@@ -23,13 +23,13 @@ export default {
   },
   methods: {
     getImageData() {
-      Modal.message({
+      TinyModal.message({
         message: `图像数据：${JSON.stringify(this.$refs.crop.getImageData())}`,
         status: 'info'
       })
     },
     getCanvasData() {
-      Modal.message({
+      TinyModal.message({
         message: `画布位置和大小数据: ${JSON.stringify(this.$refs.crop.getCanvasData())}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/crop/min-crop-box-width-height-composition-api.vue b/examples/sites/demos/pc/app/crop/min-crop-box-width-height-composition-api.vue
index 348ee83d6..17d494d49 100644
--- a/examples/sites/demos/pc/app/crop/min-crop-box-width-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/min-crop-box-width-height-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/min-crop-box-width-height.vue b/examples/sites/demos/pc/app/crop/min-crop-box-width-height.vue
index 14d7e4c8b..19f5538c7 100644
--- a/examples/sites/demos/pc/app/crop/min-crop-box-width-height.vue
+++ b/examples/sites/demos/pc/app/crop/min-crop-box-width-height.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/no-background-composition-api.vue b/examples/sites/demos/pc/app/crop/no-background-composition-api.vue
index 703ddf0ba..3032c457f 100644
--- a/examples/sites/demos/pc/app/crop/no-background-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/no-background-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/no-background.vue b/examples/sites/demos/pc/app/crop/no-background.vue
index 4dcf4f204..470b77bf8 100644
--- a/examples/sites/demos/pc/app/crop/no-background.vue
+++ b/examples/sites/demos/pc/app/crop/no-background.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/no-guides-composition-api.vue b/examples/sites/demos/pc/app/crop/no-guides-composition-api.vue
index 0e014c9bc..3951e3c1f 100644
--- a/examples/sites/demos/pc/app/crop/no-guides-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/no-guides-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/no-guides.vue b/examples/sites/demos/pc/app/crop/no-guides.vue
index a212c760a..7da4f76f4 100644
--- a/examples/sites/demos/pc/app/crop/no-guides.vue
+++ b/examples/sites/demos/pc/app/crop/no-guides.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/no-modal-composition-api.vue b/examples/sites/demos/pc/app/crop/no-modal-composition-api.vue
index f5c87066f..7cdcf5bd5 100644
--- a/examples/sites/demos/pc/app/crop/no-modal-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/no-modal-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/no-modal.vue b/examples/sites/demos/pc/app/crop/no-modal.vue
index a45b49d76..2d721e8da 100644
--- a/examples/sites/demos/pc/app/crop/no-modal.vue
+++ b/examples/sites/demos/pc/app/crop/no-modal.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/replace-image-composition-api.vue b/examples/sites/demos/pc/app/crop/replace-image-composition-api.vue
index 72efd9bea..e5a30ebaf 100644
--- a/examples/sites/demos/pc/app/crop/replace-image-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/replace-image-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Crop as TinyCrop, Button as TinyButton } from '@opentiny/vue'
+import { TinyCrop, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 const cropRef = ref()
diff --git a/examples/sites/demos/pc/app/crop/replace-image.vue b/examples/sites/demos/pc/app/crop/replace-image.vue
index e2e5f2a54..64ade4138 100644
--- a/examples/sites/demos/pc/app/crop/replace-image.vue
+++ b/examples/sites/demos/pc/app/crop/replace-image.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { Crop, Button } from '@opentiny/vue'
+import { TinyCrop, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/view-mode-composition-api.vue b/examples/sites/demos/pc/app/crop/view-mode-composition-api.vue
index 601f04b48..2c3cb53f8 100644
--- a/examples/sites/demos/pc/app/crop/view-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/view-mode-composition-api.vue
@@ -14,13 +14,13 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop, Modal } from '@opentiny/vue'
+import { TinyButton, TinyCrop, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 let num = ref(0)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 function changeMode() {
   num.value = (num.value + 1) % 4
-  Modal.message({ message: '模式:' + num.value })
+  TinyModal.message({ message: '模式:' + num.value })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/crop/view-mode.vue b/examples/sites/demos/pc/app/crop/view-mode.vue
index 1c0c84b9b..ce9f82841 100644
--- a/examples/sites/demos/pc/app/crop/view-mode.vue
+++ b/examples/sites/demos/pc/app/crop/view-mode.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop, Modal } from '@opentiny/vue'
+import { TinyButton, TinyCrop, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
@@ -30,7 +30,7 @@ export default {
   methods: {
     changeMode() {
       this.num = (this.num + 1) % 4
-      Modal.message({ message: '模式:' + this.num })
+      TinyModal.message({ message: '模式:' + this.num })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/crop/wheel-zoom-ratio-composition-api.vue b/examples/sites/demos/pc/app/crop/wheel-zoom-ratio-composition-api.vue
index 05c37d206..8376b4b49 100644
--- a/examples/sites/demos/pc/app/crop/wheel-zoom-ratio-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/wheel-zoom-ratio-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/wheel-zoom-ratio.vue b/examples/sites/demos/pc/app/crop/wheel-zoom-ratio.vue
index 4ce5ebc49..84ab98b54 100644
--- a/examples/sites/demos/pc/app/crop/wheel-zoom-ratio.vue
+++ b/examples/sites/demos/pc/app/crop/wheel-zoom-ratio.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/crop/zoom-on-wheel-composition-api.vue b/examples/sites/demos/pc/app/crop/zoom-on-wheel-composition-api.vue
index ae91cb023..1562f960e 100644
--- a/examples/sites/demos/pc/app/crop/zoom-on-wheel-composition-api.vue
+++ b/examples/sites/demos/pc/app/crop/zoom-on-wheel-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Crop as TinyCrop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 const visible = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/crop/zoom-on-wheel.vue b/examples/sites/demos/pc/app/crop/zoom-on-wheel.vue
index cae7ac024..18788e168 100644
--- a/examples/sites/demos/pc/app/crop/zoom-on-wheel.vue
+++ b/examples/sites/demos/pc/app/crop/zoom-on-wheel.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Crop } from '@opentiny/vue'
+import { TinyButton, TinyCrop } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCrop: Crop,
-    TinyButton: Button
+    TinyCrop,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
index ed335e64e..6dda7eac2 100644
--- a/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
@@ -7,12 +7,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Currency as TinyCurrency, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyModal } from '@opentiny/vue'
 
 const value = ref('VUV')
 
 function change(value) {
-  Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+  TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/currency/basic-usage.vue b/examples/sites/demos/pc/app/currency/basic-usage.vue
index 80fbd8459..d5e58c80a 100644
--- a/examples/sites/demos/pc/app/currency/basic-usage.vue
+++ b/examples/sites/demos/pc/app/currency/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Currency, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
@@ -19,7 +19,7 @@ export default {
   },
   methods: {
     change(value) {
-      Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue b/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
index e22bda1c7..c26b9ac6c 100644
--- a/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Currency as TinyCurrency } from '@opentiny/vue'
+import { TinyCurrency } from '@opentiny/vue'
 
 const value = ref('')
 
@@ -13,52 +13,52 @@ function getCurrencyData() {
     setTimeout(() => {
       resolve([
         {
-          'symbol': '$',
-          'currency_code': 'MZN'
+          symbol: '$',
+          currency_code: 'MZN'
         },
         {
-          'symbol': null,
-          'currency_code': 'CNY'
+          symbol: null,
+          currency_code: 'CNY'
         },
         {
-          'symbol': '*NULL*',
-          'currency_code': 'CHE'
+          symbol: '*NULL*',
+          currency_code: 'CHE'
         },
         {
-          'symbol': '$',
-          'currency_code': 'USD'
+          symbol: '$',
+          currency_code: 'USD'
         },
         {
-          'symbol': null,
-          'currency_code': 'VND'
+          symbol: null,
+          currency_code: 'VND'
         },
         {
-          'symbol': null,
-          'currency_code': 'VUV'
+          symbol: null,
+          currency_code: 'VUV'
         },
         {
-          'symbol': null,
-          'currency_code': 'WST'
+          symbol: null,
+          currency_code: 'WST'
         },
         {
-          'symbol': null,
-          'currency_code': 'XAF'
+          symbol: null,
+          currency_code: 'XAF'
         },
         {
-          'symbol': null,
-          'currency_code': 'IRU'
+          symbol: null,
+          currency_code: 'IRU'
         },
         {
-          'symbol': null,
-          'currency_code': 'IRE'
+          symbol: null,
+          currency_code: 'IRE'
         },
         {
-          'symbol': null,
-          'currency_code': 'BYN'
+          symbol: null,
+          currency_code: 'BYN'
         },
         {
-          'symbol': null,
-          'currency_code': 'HKD'
+          symbol: null,
+          currency_code: 'HKD'
         }
       ])
     }, 500)
diff --git a/examples/sites/demos/pc/app/currency/custom-service.vue b/examples/sites/demos/pc/app/currency/custom-service.vue
index 734bf162e..69728f519 100644
--- a/examples/sites/demos/pc/app/currency/custom-service.vue
+++ b/examples/sites/demos/pc/app/currency/custom-service.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Currency } from '@opentiny/vue'
+import { TinyCurrency } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
@@ -20,52 +20,52 @@ export default {
         setTimeout(() => {
           resolve([
             {
-              'symbol': '$',
-              'currency_code': 'MZN'
+              symbol: '$',
+              currency_code: 'MZN'
             },
             {
-              'symbol': null,
-              'currency_code': 'CNY'
+              symbol: null,
+              currency_code: 'CNY'
             },
             {
-              'symbol': '*NULL*',
-              'currency_code': 'CHE'
+              symbol: '*NULL*',
+              currency_code: 'CHE'
             },
             {
-              'symbol': '$',
-              'currency_code': 'USD'
+              symbol: '$',
+              currency_code: 'USD'
             },
             {
-              'symbol': null,
-              'currency_code': 'VND'
+              symbol: null,
+              currency_code: 'VND'
             },
             {
-              'symbol': null,
-              'currency_code': 'VUV'
+              symbol: null,
+              currency_code: 'VUV'
             },
             {
-              'symbol': null,
-              'currency_code': 'WST'
+              symbol: null,
+              currency_code: 'WST'
             },
             {
-              'symbol': null,
-              'currency_code': 'XAF'
+              symbol: null,
+              currency_code: 'XAF'
             },
             {
-              'symbol': null,
-              'currency_code': 'IRU'
+              symbol: null,
+              currency_code: 'IRU'
             },
             {
-              'symbol': null,
-              'currency_code': 'IRE'
+              symbol: null,
+              currency_code: 'IRE'
             },
             {
-              'symbol': null,
-              'currency_code': 'BYN'
+              symbol: null,
+              currency_code: 'BYN'
             },
             {
-              'symbol': null,
-              'currency_code': 'HKD'
+              symbol: null,
+              currency_code: 'HKD'
             }
           ])
         }, 500)
diff --git a/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue b/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
index 3a5092ba9..9a3627723 100644
--- a/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
@@ -8,13 +8,13 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Currency as TinyCurrency, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyButton, TinyModal } from '@opentiny/vue'
 
 const value = ref('VUV')
 const disabled = ref(false)
 
 function change(val) {
-  Modal.message({ message: '当前选择值：' + val, status: 'info' })
+  TinyModal.message({ message: '当前选择值：' + val, status: 'info' })
 }
 
 function Switchover() {
diff --git a/examples/sites/demos/pc/app/currency/disable-currency.vue b/examples/sites/demos/pc/app/currency/disable-currency.vue
index 04066ae4c..16ed0c54a 100644
--- a/examples/sites/demos/pc/app/currency/disable-currency.vue
+++ b/examples/sites/demos/pc/app/currency/disable-currency.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Currency, Button, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency,
-    TinyButton: Button
+    TinyCurrency,
+    TinyButton
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({ message: '当前选择值：' + val, status: 'info' })
+      TinyModal.message({ message: '当前选择值：' + val, status: 'info' })
     },
     Switchover() {
       this.disabled = !this.disabled
diff --git a/examples/sites/demos/pc/app/currency/fields-composition-api.vue b/examples/sites/demos/pc/app/currency/fields-composition-api.vue
index 36dcf62ea..5aa622e78 100644
--- a/examples/sites/demos/pc/app/currency/fields-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/fields-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Currency as TinyCurrency } from '@opentiny/vue'
+import { TinyCurrency } from '@opentiny/vue'
 
 const value = ref('')
 const fields = ref({
diff --git a/examples/sites/demos/pc/app/currency/fields.vue b/examples/sites/demos/pc/app/currency/fields.vue
index 45814d963..e3cfd6013 100644
--- a/examples/sites/demos/pc/app/currency/fields.vue
+++ b/examples/sites/demos/pc/app/currency/fields.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Currency } from '@opentiny/vue'
+import { TinyCurrency } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/currency/filter-composition-api.vue b/examples/sites/demos/pc/app/currency/filter-composition-api.vue
index ca5bb42d2..46b9e1c31 100644
--- a/examples/sites/demos/pc/app/currency/filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/filter-composition-api.vue
@@ -14,11 +14,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Currency as TinyCurrency, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyModal } from '@opentiny/vue'
 
 const value = ref('CNY')
 
 const change = (value) => {
-  Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+  TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/currency/filter.vue b/examples/sites/demos/pc/app/currency/filter.vue
index 6e27f2ef0..b999aefe6 100644
--- a/examples/sites/demos/pc/app/currency/filter.vue
+++ b/examples/sites/demos/pc/app/currency/filter.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Currency, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   methods: {
     change(value) {
-      Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/currency/set-default-composition-api.vue b/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
index 7c32f68e3..2b59e4f01 100644
--- a/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Currency as TinyCurrency } from '@opentiny/vue'
+import { TinyCurrency } from '@opentiny/vue'
 
 const value = ref('CNY')
 </script>
diff --git a/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue b/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
index bf6ddeefb..9669cbfeb 100644
--- a/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
@@ -11,13 +11,13 @@
 
 <script setup>
 import { ref, getCurrentInstance } from 'vue'
-import { Currency as TinyCurrency, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyModal } from '@opentiny/vue'
 
 const value = ref('')
 const defaultCurrency = ref('VUV')
 
 const change = (value) => {
-  Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+  TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 
 const fetchDefaultCurrency = () => {
@@ -32,7 +32,7 @@ const setDefaultCurrency = (value) => {
   return new Promise((resolve) => {
     setTimeout(() => {
       defaultCurrency.value = value
-      Modal.message({ message: `设置默认值成功，值为${value} `, status: 'success' })
+      TinyModal.message({ message: `设置默认值成功，值为${value} `, status: 'success' })
       resolve(value)
     }, 500)
   })
diff --git a/examples/sites/demos/pc/app/currency/set-default-custom-service.vue b/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
index aae4980a5..d32b65a93 100644
--- a/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Currency, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     change(value) {
-      Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
     },
     fetchDefaultCurrency() {
       return new Promise((resolve) => {
@@ -37,7 +37,7 @@ export default {
       return new Promise((resolve) => {
         setTimeout(() => {
           this.defaultCurrency = value
-          Modal.message({ message: `设置默认值成功，值为${value} `, status: 'success' })
+          TinyModal.message({ message: `设置默认值成功，值为${value} `, status: 'success' })
           resolve(value)
         }, 500)
       })
diff --git a/examples/sites/demos/pc/app/currency/set-default.vue b/examples/sites/demos/pc/app/currency/set-default.vue
index b1104dfb7..12acde8c2 100644
--- a/examples/sites/demos/pc/app/currency/set-default.vue
+++ b/examples/sites/demos/pc/app/currency/set-default.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Currency } from '@opentiny/vue'
+import { TinyCurrency } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/currency/size-composition-api.vue b/examples/sites/demos/pc/app/currency/size-composition-api.vue
index bd5b4527a..92b18ed02 100644
--- a/examples/sites/demos/pc/app/currency/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/size-composition-api.vue
@@ -7,12 +7,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Currency as TinyCurrency, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyModal } from '@opentiny/vue'
 
 const value = ref('VUV')
 
 function change(value) {
-  Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+  TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/currency/size.vue b/examples/sites/demos/pc/app/currency/size.vue
index 163c1eb4f..625ea9e81 100644
--- a/examples/sites/demos/pc/app/currency/size.vue
+++ b/examples/sites/demos/pc/app/currency/size.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Currency, Modal } from '@opentiny/vue'
+import { TinyCurrency, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyCurrency: Currency
+    TinyCurrency
   },
   data() {
     return {
@@ -19,7 +19,7 @@ export default {
   },
   methods: {
     change(value) {
-      Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
index 2cec3c8af..1757db3dc 100644
--- a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/date-picker/align.vue b/examples/sites/demos/pc/app/date-picker/align.vue
index 72f1c98d1..74203587c 100644
--- a/examples/sites/demos/pc/app/date-picker/align.vue
+++ b/examples/sites/demos/pc/app/date-picker/align.vue
@@ -23,11 +23,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
index 94afbfa07..0f2594eb9 100644
--- a/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value = ref('')
 const dateTimeValue = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage.vue b/examples/sites/demos/pc/app/date-picker/basic-usage.vue
index c8c4faa39..82f1c16e8 100644
--- a/examples/sites/demos/pc/app/date-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue b/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
index 8ae172fc7..6662b6ed8 100644
--- a/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 
 const value = ref(new Date('2023-05-24'))
diff --git a/examples/sites/demos/pc/app/date-picker/clear.vue b/examples/sites/demos/pc/app/date-picker/clear.vue
index 29236fde9..a67f791a4 100644
--- a/examples/sites/demos/pc/app/date-picker/clear.vue
+++ b/examples/sites/demos/pc/app/date-picker/clear.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
index 79ae7d811..511a629dd 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 import { iconMinus } from '@opentiny/vue-icon'
 
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
index 3e66b3890..453713f03 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 import { iconMinus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
index 4713aa498..31ea3ef29 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
@@ -32,7 +32,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const eachWeekFirstDay = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/custom-weeks.vue b/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
index b3cea104c..f4748b39e 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
@@ -31,11 +31,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue b/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
index d3fe5b7fe..fded32954 100644
--- a/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value = ref('')
 const dateTimeValue = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/date-range.vue b/examples/sites/demos/pc/app/date-picker/date-range.vue
index 2bd3dc075..0560c4023 100644
--- a/examples/sites/demos/pc/app/date-picker/date-range.vue
+++ b/examples/sites/demos/pc/app/date-picker/date-range.vue
@@ -28,11 +28,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue b/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
index 0e26f8d5c..3a165ad22 100644
--- a/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value = ref('')
 const dateTimeValue = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/default-value.vue b/examples/sites/demos/pc/app/date-picker/default-value.vue
index d4167ea92..e5f75e4c5 100644
--- a/examples/sites/demos/pc/app/date-picker/default-value.vue
+++ b/examples/sites/demos/pc/app/date-picker/default-value.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue b/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
index 7044c4c87..b2cb90495 100644
--- a/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const disabledValue = ref('2020/10/29')
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/disabled.vue b/examples/sites/demos/pc/app/date-picker/disabled.vue
index 3b17dcd0c..2d4632581 100644
--- a/examples/sites/demos/pc/app/date-picker/disabled.vue
+++ b/examples/sites/demos/pc/app/date-picker/disabled.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
index 341b905d1..d7f4ddb63 100644
--- a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
@@ -25,13 +25,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Layout as TinyLayout,
-  Row as TinyRow,
-  Col as TinyCol,
-  DatePicker as TinyDatePicker,
-  Modal
-} from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol, TinyDatePicker, TinyModal } from '@opentiny/vue'
 
 const valueFocus = ref('')
 const valueBlur = ref('')
@@ -39,20 +33,20 @@ const valueChange = ref('')
 const valueOnPick = ref('')
 
 function handleFocus() {
-  Modal.message({ message: '触发 focus 事件', status: 'info' })
+  TinyModal.message({ message: '触发 focus 事件', status: 'info' })
 }
 
 function handleBlur() {
-  Modal.message({ message: '触发 blur 事件', status: 'info' })
+  TinyModal.message({ message: '触发 blur 事件', status: 'info' })
 }
 
 function handleChange(value) {
-  Modal.message({ message: '触发 change 事件，组件绑定值为：' + value, status: 'info' })
+  TinyModal.message({ message: '触发 change 事件，组件绑定值为：' + value, status: 'info' })
 }
 
 const pickerOptions = {
   onPick: ({ minDate, maxDate }) => {
-    Modal.message({ message: `触发 onPick 事件，开始日期为：${minDate}，结束日期为：${maxDate}`, status: 'info' })
+    TinyModal.message({ message: `触发 onPick 事件，开始日期为：${minDate}，结束日期为：${maxDate}`, status: 'info' })
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/date-picker/events.vue b/examples/sites/demos/pc/app/date-picker/events.vue
index b009573cb..43e5050d4 100644
--- a/examples/sites/demos/pc/app/date-picker/events.vue
+++ b/examples/sites/demos/pc/app/date-picker/events.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script>
-import { Layout, Row, Col, DatePicker, Modal } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol, TinyDatePicker, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col,
-    TinyDatePicker: DatePicker
+    TinyLayout,
+    TinyRow,
+    TinyCol,
+    TinyDatePicker
   },
   data() {
     return {
@@ -41,20 +41,23 @@ export default {
       valueOnPick: '',
       pickerOptions: {
         onPick: ({ minDate, maxDate }) => {
-          Modal.message({ message: `触发 onPick 事件，开始日期为：${minDate}，结束日期为：${maxDate}`, status: 'info' })
+          TinyModal.message({
+            message: `触发 onPick 事件，开始日期为：${minDate}，结束日期为：${maxDate}`,
+            status: 'info'
+          })
         }
       }
     }
   },
   methods: {
     handleFocus() {
-      Modal.message({ message: '触发 focus 事件', status: 'info' })
+      TinyModal.message({ message: '触发 focus 事件', status: 'info' })
     },
     handleBlur() {
-      Modal.message({ message: '触发 blur 事件', status: 'info' })
+      TinyModal.message({ message: '触发 blur 事件', status: 'info' })
     },
     handleChange(value) {
-      Modal.message({ message: '触发 change 事件，组件绑定值为：' + value, status: 'info' })
+      TinyModal.message({ message: '触发 change 事件，组件绑定值为：' + value, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
index 18db78f05..8ba0f5f5c 100644
--- a/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value = ref('')
 const rangeValue = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/filter-mode.vue b/examples/sites/demos/pc/app/date-picker/filter-mode.vue
index 36c22ccdf..0c6a02341 100644
--- a/examples/sites/demos/pc/app/date-picker/filter-mode.vue
+++ b/examples/sites/demos/pc/app/date-picker/filter-mode.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/format-composition-api.vue b/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
index 0b2637077..3fcfe2f86 100644
--- a/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
@@ -27,7 +27,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value = ref(new Date('2023-05-24'))
 const selectedValue = ref(1590076800000)
diff --git a/examples/sites/demos/pc/app/date-picker/format.vue b/examples/sites/demos/pc/app/date-picker/format.vue
index c7360c8dd..dc261fbbc 100644
--- a/examples/sites/demos/pc/app/date-picker/format.vue
+++ b/examples/sites/demos/pc/app/date-picker/format.vue
@@ -26,11 +26,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue b/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
index ff0f3cd15..4a474e0a1 100644
--- a/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const dateValue = ref(new Date())
 const dateRangeValue = ref([])
diff --git a/examples/sites/demos/pc/app/date-picker/label-inside.vue b/examples/sites/demos/pc/app/date-picker/label-inside.vue
index fb2d2184c..e3acbf2c2 100644
--- a/examples/sites/demos/pc/app/date-picker/label-inside.vue
+++ b/examples/sites/demos/pc/app/date-picker/label-inside.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue b/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
index c8fd93c0d..192986e63 100644
--- a/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const datesValue = ref('')
 const yearsValue = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/multiple-dates.vue b/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
index f5a898aef..c2f17b9ae 100644
--- a/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
+++ b/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
index 50c971cdf..562ff831b 100644
--- a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value1 = ref('2020-11-11 10:10:11')
 const value2 = ref('2020-11-11 10:10:11')
diff --git a/examples/sites/demos/pc/app/date-picker/now.vue b/examples/sites/demos/pc/app/date-picker/now.vue
index 3a7297a46..565d0a3ab 100644
--- a/examples/sites/demos/pc/app/date-picker/now.vue
+++ b/examples/sites/demos/pc/app/date-picker/now.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/shortcuts-composition-api.vue b/examples/sites/demos/pc/app/date-picker/shortcuts-composition-api.vue
index 57914fcaa..3689442c2 100644
--- a/examples/sites/demos/pc/app/date-picker/shortcuts-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/shortcuts-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value = ref('')
 const dateRangeValue = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/shortcuts.vue b/examples/sites/demos/pc/app/date-picker/shortcuts.vue
index 38588d186..1a3eb7f9d 100644
--- a/examples/sites/demos/pc/app/date-picker/shortcuts.vue
+++ b/examples/sites/demos/pc/app/date-picker/shortcuts.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/size-composition-api.vue b/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
index 099f3cf0c..87eb54732 100644
--- a/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
@@ -35,11 +35,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  DatePicker as TinyDatePicker,
-  RadioGroup as TinyRadioGroup,
-  RadioButton as TinyRadioButton
-} from '@opentiny/vue'
+import { TinyDatePicker, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 const value = ref('')
 const dateTimeValue = ref('')
diff --git a/examples/sites/demos/pc/app/date-picker/size.vue b/examples/sites/demos/pc/app/date-picker/size.vue
index 4dd3a8169..e7d905681 100644
--- a/examples/sites/demos/pc/app/date-picker/size.vue
+++ b/examples/sites/demos/pc/app/date-picker/size.vue
@@ -34,13 +34,13 @@
 </template>
 
 <script>
-import { DatePicker, RadioGroup, RadioButton } from '@opentiny/vue'
+import { TinyDatePicker, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker,
-    TinyRadioGroup: RadioGroup,
-    TinyRadioButton: RadioButton
+    TinyDatePicker,
+    TinyRadioGroup,
+    TinyRadioButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/step-composition-api.vue b/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
index f4134851f..e0e4757f1 100644
--- a/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const step = ref({
   hour: 2,
diff --git a/examples/sites/demos/pc/app/date-picker/step.vue b/examples/sites/demos/pc/app/date-picker/step.vue
index 526c475bc..89c931bb1 100644
--- a/examples/sites/demos/pc/app/date-picker/step.vue
+++ b/examples/sites/demos/pc/app/date-picker/step.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
index 90aae215f..db8ec4022 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
@@ -31,7 +31,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker, Modal } from '@opentiny/vue'
+import { TinyDatePicker, TinyModal } from '@opentiny/vue'
 import tzData from '@opentiny/vue-renderless/picker/timezone'
 
 const timezoneValue = ref('')
@@ -39,7 +39,7 @@ const value = ref('')
 const referenceDate = ref('2020-10-28T00:00:00.000+0800')
 
 function selectChange(tz) {
-  Modal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
+  TinyModal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/date-picker/timezone.vue b/examples/sites/demos/pc/app/date-picker/timezone.vue
index e148dc86f..08c63bba5 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone.vue
@@ -30,12 +30,12 @@
 </template>
 
 <script>
-import { DatePicker, Modal } from '@opentiny/vue'
+import { TinyDatePicker, TinyModal } from '@opentiny/vue'
 import tzData from '@opentiny/vue-renderless/picker/timezone'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     selectChange(tz) {
-      Modal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
+      TinyModal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue b/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
index 78799e78e..5c74fffe1 100644
--- a/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DatePicker as TinyDatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 const value = ref([])
 </script>
diff --git a/examples/sites/demos/pc/app/date-picker/unlink-panels.vue b/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
index fce19d102..8aa7ab504 100644
--- a/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
+++ b/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { DatePicker } from '@opentiny/vue'
+import { TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDatePicker: DatePicker
+    TinyDatePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue b/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
index 73600329e..71a65a8de 100644
--- a/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
@@ -27,15 +27,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Button as TinyButton,
-  TimePicker as TinyTimePicker,
-  DatePicker as TinyDatePicker,
-  Input as TinyInput,
-  Modal
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyButton, TinyTimePicker, TinyDatePicker, TinyInput, TinyModal } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 const ruleForm = ref({
@@ -68,9 +60,9 @@ const rules = ref({
 function submitForm() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      Modal.message({ message: 'Submitted successfully !', status: 'success' })
+      TinyModal.message({ message: 'Submitted successfully !', status: 'success' })
     } else {
-      Modal.message({ message: 'Data verification failed !', status: 'error' })
+      TinyModal.message({ message: 'Data verification failed !', status: 'error' })
 
       return false
     }
diff --git a/examples/sites/demos/pc/app/date-picker/validate-event.vue b/examples/sites/demos/pc/app/date-picker/validate-event.vue
index 496bc4348..618806bc9 100644
--- a/examples/sites/demos/pc/app/date-picker/validate-event.vue
+++ b/examples/sites/demos/pc/app/date-picker/validate-event.vue
@@ -26,16 +26,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Button, TimePicker, DatePicker, Input, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyButton, TinyTimePicker, TinyDatePicker, TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyTimePicker: TimePicker,
-    TinyDatePicker: DatePicker
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyTimePicker,
+    TinyDatePicker
   },
   data() {
     return {
@@ -71,9 +71,9 @@ export default {
     submitForm() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          Modal.message({ message: 'Submitted successfully !', status: 'success' })
+          TinyModal.message({ message: 'Submitted successfully !', status: 'success' })
         } else {
-          Modal.message({ message: 'Data verification failed !', status: 'error' })
+          TinyModal.message({ message: 'Data verification failed !', status: 'error' })
 
           return false
         }
diff --git a/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue b/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
index 89a40ddd9..4ce732f5a 100644
--- a/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
diff --git a/examples/sites/demos/pc/app/dept/auto-select.vue b/examples/sites/demos/pc/app/dept/auto-select.vue
index 82e830c49..820323b1a 100644
--- a/examples/sites/demos/pc/app/dept/auto-select.vue
+++ b/examples/sites/demos/pc/app/dept/auto-select.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
index 3ac9bf7c2..d5817da78 100644
--- a/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
diff --git a/examples/sites/demos/pc/app/dept/basic-usage.vue b/examples/sites/demos/pc/app/dept/basic-usage.vue
index 8ec417119..c335056b6 100644
--- a/examples/sites/demos/pc/app/dept/basic-usage.vue
+++ b/examples/sites/demos/pc/app/dept/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue b/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
index c1886c717..57d549619 100644
--- a/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script setup lang="jsx">
-import { Dept as TinyDept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const value = ref('022471')
 
 function beforeConfirm() {
   return new Promise((resolve, reject) => {
-    Modal.confirm('确定关闭弹框？').then((res) => {
+    TinyModal.confirm('确定关闭弹框？').then((res) => {
       res === 'confirm' ? resolve() : reject(new Error('已取消关闭'))
     })
   })
diff --git a/examples/sites/demos/pc/app/dept/before-confirm.vue b/examples/sites/demos/pc/app/dept/before-confirm.vue
index 934a94886..f6973ca25 100644
--- a/examples/sites/demos/pc/app/dept/before-confirm.vue
+++ b/examples/sites/demos/pc/app/dept/before-confirm.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   setup() {
     return {
@@ -22,7 +22,7 @@ export default {
   methods: {
     beforeConfirm() {
       return new Promise((resolve, reject) => {
-        Modal.confirm('确定关闭弹框？').then((res) => {
+        TinyModal.confirm('确定关闭弹框？').then((res) => {
           res === 'confirm' ? resolve() : reject(new Error('已取消关闭'))
         })
       })
diff --git a/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue b/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
index 8ba165ccd..c7dba8ca2 100644
--- a/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
@@ -9,173 +9,173 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 // mock数据
 const DEPT_LIST = [
   {
-    'upperCode': '000001',
-    'list': [
+    upperCode: '000001',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '022471',
-        'dept_Code': null,
-        'hrName': 'SZ技术',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '022471',
+        dept_Code: null,
+        hrName: 'SZ技术',
+        coaCode: null
       },
       {
-        'coa_Combination': null,
-        'hrCode': '030055',
-        'dept_Code': null,
-        'hrName': 'SZ海洋网络',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '030055',
+        dept_Code: null,
+        hrName: 'SZ海洋网络',
+        coaCode: null
       },
       {
-        'coa_Combination': null,
-        'hrCode': '035021',
-        'dept_Code': null,
-        'hrName': '天闻数媒',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '035021',
+        dept_Code: null,
+        hrName: '天闻数媒',
+        coaCode: null
       },
       {
-        'coa_Combination': null,
-        'hrCode': '022279',
-        'dept_Code': null,
-        'hrName': '贝托SZ',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '022279',
+        dept_Code: null,
+        hrName: '贝托SZ',
+        coaCode: null
       },
       {
-        'coa_Combination': null,
-        'hrCode': '030736',
-        'dept_Code': null,
-        'hrName': '鼎桥通信',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '030736',
+        dept_Code: null,
+        hrName: '鼎桥通信',
+        coaCode: null
       }
     ]
   },
   {
-    'upperCode': '023114',
-    'list': [
+    upperCode: '023114',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '041963',
-        'dept_Code': null,
-        'hrName': 'BPIT&QM HRBP管理部',
-        'coaCode': '0021.000.0001.041963'
+        coa_Combination: null,
+        hrCode: '041963',
+        dept_Code: null,
+        hrName: 'BPIT&QM HRBP管理部',
+        coaCode: '0021.000.0001.041963'
       }
     ]
   },
   {
-    'upperCode': '038384',
-    'list': [
+    upperCode: '038384',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '038759',
-        'dept_Code': null,
-        'hrName': '公共技术平台部',
-        'coaCode': '0021.000.0001.038759'
+        coa_Combination: null,
+        hrCode: '038759',
+        dept_Code: null,
+        hrName: '公共技术平台部',
+        coaCode: '0021.000.0001.038759'
       }
     ]
   },
   {
-    'upperCode': '022471',
-    'list': [
+    upperCode: '022471',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '023338',
-        'dept_Code': null,
-        'hrName': '测试数据室XX',
-        'coaCode': '0021.000.0001.023338'
+        coa_Combination: null,
+        hrCode: '023338',
+        dept_Code: null,
+        hrName: '测试数据室XX',
+        coaCode: '0021.000.0001.023338'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '027425',
-        'dept_Code': null,
-        'hrName': '中国XX测试数据部',
-        'coaCode': '0021.000.0002.027425'
+        coa_Combination: null,
+        hrCode: '027425',
+        dept_Code: null,
+        hrName: '中国XX测试数据部',
+        coaCode: '0021.000.0002.027425'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '023093',
-        'dept_Code': null,
-        'hrName': '测试数据XX管理部',
-        'coaCode': '0021.000.0001.023093'
+        coa_Combination: null,
+        hrCode: '023093',
+        dept_Code: null,
+        hrName: '测试数据XX管理部',
+        coaCode: '0021.000.0001.023093'
       }
     ]
   },
   {
-    'upperCode': '023093',
-    'list': [
+    upperCode: '023093',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '038370',
-        'dept_Code': null,
-        'hrName': '业务应用与XX测试数据部',
-        'coaCode': '0021.000.0001.038370'
+        coa_Combination: null,
+        hrCode: '038370',
+        dept_Code: null,
+        hrName: '业务应用与XX测试数据部',
+        coaCode: '0021.000.0001.038370'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '038371',
-        'dept_Code': null,
-        'hrName': '企业架构与流程管理部',
-        'coaCode': '0021.000.0001.038371'
+        coa_Combination: null,
+        hrCode: '038371',
+        dept_Code: null,
+        hrName: '企业架构与流程管理部',
+        coaCode: '0021.000.0001.038371'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '023114',
-        'dept_Code': null,
-        'hrName': '测试数据XX人力资源部',
-        'coaCode': '0021.000.0001.023114'
+        coa_Combination: null,
+        hrCode: '023114',
+        dept_Code: null,
+        hrName: '测试数据XX人力资源部',
+        coaCode: '0021.000.0001.023114'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '034899',
-        'dept_Code': null,
-        'hrName': '测试数据XX财经管理部',
-        'coaCode': '0021.000.0001.034899'
+        coa_Combination: null,
+        hrCode: '034899',
+        dept_Code: null,
+        hrName: '测试数据XX财经管理部',
+        coaCode: '0021.000.0001.034899'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '023221',
-        'dept_Code': null,
-        'hrName': '测试数据XX质量与运营部',
-        'coaCode': '0021.000.0001.023221'
+        coa_Combination: null,
+        hrCode: '023221',
+        dept_Code: null,
+        hrName: '测试数据XX质量与运营部',
+        coaCode: '0021.000.0001.023221'
       }
     ]
   },
   {
-    'upperCode': '023338',
-    'list': [
+    upperCode: '023338',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '023489',
-        'dept_Code': null,
-        'hrName': '中央XX测试数据部',
-        'coaCode': '0021.000.0001.023489'
+        coa_Combination: null,
+        hrCode: '023489',
+        dept_Code: null,
+        hrName: '中央XX测试数据部',
+        coaCode: '0021.000.0001.023489'
       }
     ]
   },
   {
-    'upperCode': '023489',
-    'list': [
+    upperCode: '023489',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '023286',
-        'dept_Code': null,
-        'hrName': 'XX应用交付部',
-        'coaCode': '0021.000.0001.023286'
+        coa_Combination: null,
+        hrCode: '023286',
+        dept_Code: null,
+        hrName: 'XX应用交付部',
+        coaCode: '0021.000.0001.023286'
       }
     ]
   },
   {
-    'upperCode': '023286',
-    'list': [
+    upperCode: '023286',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '022471',
-        'dept_Code': null,
-        'hrName': 'XX应用实施部',
-        'coaCode': '0021.000.0001.022471'
+        coa_Combination: null,
+        hrCode: '022471',
+        dept_Code: null,
+        hrName: 'XX应用实施部',
+        coaCode: '0021.000.0001.022471'
       }
     ]
   }
@@ -188,34 +188,34 @@ function getfetchDeptByValue(searchValue) {
     setTimeout(() => {
       resolve([
         {
-          'coaCode': '0021.000.0001.037106',
-          'hrCode': '037106',
-          'hrName': '无线网络业务架构与设计部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.037106',
+          hrCode: '037106',
+          hrName: '无线网络业务架构与设计部',
+          coaStatus: '1-有效-VALID'
         },
         {
-          'coaCode': '0021.000.0001.037271',
-          'hrCode': '037271',
-          'hrName': '服务架构与技术规划部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.037271',
+          hrCode: '037271',
+          hrName: '服务架构与技术规划部',
+          coaStatus: '1-有效-VALID'
         },
         {
-          'coaCode': '0021.000.0001.023475',
-          'hrCode': '023475',
-          'hrName': '测试数据室XX质量与运营部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.023475',
+          hrCode: '023475',
+          hrName: '测试数据室XX质量与运营部',
+          coaStatus: '1-有效-VALID'
         },
         {
-          'coaCode': '0021.000.0001.023114',
-          'hrCode': '023114',
-          'hrName': '测试数据XX人力资源部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.023114',
+          hrCode: '023114',
+          hrName: '测试数据XX人力资源部',
+          coaStatus: '1-有效-VALID'
         },
         {
-          'coaCode': '0021.000.0001.023093',
-          'hrCode': '023093',
-          'hrName': '测试数据XX管理部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.023093',
+          hrCode: '023093',
+          hrName: '测试数据XX管理部',
+          coaStatus: '1-有效-VALID'
         }
       ])
     }, 100)
@@ -227,34 +227,34 @@ function getfetchDept(code) {
     setTimeout(() => {
       resolve([
         {
-          'coaCode': '0021.000.0001.037106',
-          'hrCode': '037106',
-          'hrName': '无线网络业务架构与设计部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.037106',
+          hrCode: '037106',
+          hrName: '无线网络业务架构与设计部',
+          coaStatus: '1-有效-VALID'
         },
         {
-          'coaCode': '0021.000.0001.037271',
-          'hrCode': '037271',
-          'hrName': '服务架构与技术规划部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.037271',
+          hrCode: '037271',
+          hrName: '服务架构与技术规划部',
+          coaStatus: '1-有效-VALID'
         },
         {
-          'coaCode': '0021.000.0001.023475',
-          'hrCode': '023475',
-          'hrName': '测试数据室XX质量与运营部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.023475',
+          hrCode: '023475',
+          hrName: '测试数据室XX质量与运营部',
+          coaStatus: '1-有效-VALID'
         },
         {
-          'coaCode': '0021.000.0001.023114',
-          'hrCode': '023114',
-          'hrName': '测试数据XX人力资源部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.023114',
+          hrCode: '023114',
+          hrName: '测试数据XX人力资源部',
+          coaStatus: '1-有效-VALID'
         },
         {
-          'coaCode': '0021.000.0001.023093',
-          'hrCode': '023093',
-          'hrName': '测试数据XX管理部',
-          'coaStatus': '1-有效-VALID'
+          coaCode: '0021.000.0001.023093',
+          hrCode: '023093',
+          hrName: '测试数据XX管理部',
+          coaStatus: '1-有效-VALID'
         }
       ])
     }, 100)
diff --git a/examples/sites/demos/pc/app/dept/custom-service.vue b/examples/sites/demos/pc/app/dept/custom-service.vue
index 9ccd9af86..a5a349e1f 100644
--- a/examples/sites/demos/pc/app/dept/custom-service.vue
+++ b/examples/sites/demos/pc/app/dept/custom-service.vue
@@ -8,173 +8,173 @@
 </template>
 
 <script lang="jsx">
-import { Dept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 // mock数据
 const DEPT_LIST = [
   {
-    'upperCode': '000001',
-    'list': [
+    upperCode: '000001',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '022471',
-        'dept_Code': null,
-        'hrName': 'SZ技术',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '022471',
+        dept_Code: null,
+        hrName: 'SZ技术',
+        coaCode: null
       },
       {
-        'coa_Combination': null,
-        'hrCode': '030055',
-        'dept_Code': null,
-        'hrName': 'SZ海洋网络',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '030055',
+        dept_Code: null,
+        hrName: 'SZ海洋网络',
+        coaCode: null
       },
       {
-        'coa_Combination': null,
-        'hrCode': '035021',
-        'dept_Code': null,
-        'hrName': '天闻数媒',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '035021',
+        dept_Code: null,
+        hrName: '天闻数媒',
+        coaCode: null
       },
       {
-        'coa_Combination': null,
-        'hrCode': '022279',
-        'dept_Code': null,
-        'hrName': '贝托SZ',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '022279',
+        dept_Code: null,
+        hrName: '贝托SZ',
+        coaCode: null
       },
       {
-        'coa_Combination': null,
-        'hrCode': '030736',
-        'dept_Code': null,
-        'hrName': '鼎桥通信',
-        'coaCode': null
+        coa_Combination: null,
+        hrCode: '030736',
+        dept_Code: null,
+        hrName: '鼎桥通信',
+        coaCode: null
       }
     ]
   },
   {
-    'upperCode': '023114',
-    'list': [
+    upperCode: '023114',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '041963',
-        'dept_Code': null,
-        'hrName': 'BPIT&QM HRBP管理部',
-        'coaCode': '0021.000.0001.041963'
+        coa_Combination: null,
+        hrCode: '041963',
+        dept_Code: null,
+        hrName: 'BPIT&QM HRBP管理部',
+        coaCode: '0021.000.0001.041963'
       }
     ]
   },
   {
-    'upperCode': '038384',
-    'list': [
+    upperCode: '038384',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '038759',
-        'dept_Code': null,
-        'hrName': '公共技术平台部',
-        'coaCode': '0021.000.0001.038759'
+        coa_Combination: null,
+        hrCode: '038759',
+        dept_Code: null,
+        hrName: '公共技术平台部',
+        coaCode: '0021.000.0001.038759'
       }
     ]
   },
   {
-    'upperCode': '022471',
-    'list': [
+    upperCode: '022471',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '023338',
-        'dept_Code': null,
-        'hrName': '测试数据室XX',
-        'coaCode': '0021.000.0001.023338'
+        coa_Combination: null,
+        hrCode: '023338',
+        dept_Code: null,
+        hrName: '测试数据室XX',
+        coaCode: '0021.000.0001.023338'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '027425',
-        'dept_Code': null,
-        'hrName': '中国XX测试数据部',
-        'coaCode': '0021.000.0002.027425'
+        coa_Combination: null,
+        hrCode: '027425',
+        dept_Code: null,
+        hrName: '中国XX测试数据部',
+        coaCode: '0021.000.0002.027425'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '023093',
-        'dept_Code': null,
-        'hrName': '测试数据XX管理部',
-        'coaCode': '0021.000.0001.023093'
+        coa_Combination: null,
+        hrCode: '023093',
+        dept_Code: null,
+        hrName: '测试数据XX管理部',
+        coaCode: '0021.000.0001.023093'
       }
     ]
   },
   {
-    'upperCode': '023093',
-    'list': [
+    upperCode: '023093',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '038370',
-        'dept_Code': null,
-        'hrName': '业务应用与XX测试数据部',
-        'coaCode': '0021.000.0001.038370'
+        coa_Combination: null,
+        hrCode: '038370',
+        dept_Code: null,
+        hrName: '业务应用与XX测试数据部',
+        coaCode: '0021.000.0001.038370'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '038371',
-        'dept_Code': null,
-        'hrName': '企业架构与流程管理部',
-        'coaCode': '0021.000.0001.038371'
+        coa_Combination: null,
+        hrCode: '038371',
+        dept_Code: null,
+        hrName: '企业架构与流程管理部',
+        coaCode: '0021.000.0001.038371'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '023114',
-        'dept_Code': null,
-        'hrName': '测试数据XX人力资源部',
-        'coaCode': '0021.000.0001.023114'
+        coa_Combination: null,
+        hrCode: '023114',
+        dept_Code: null,
+        hrName: '测试数据XX人力资源部',
+        coaCode: '0021.000.0001.023114'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '034899',
-        'dept_Code': null,
-        'hrName': '测试数据XX财经管理部',
-        'coaCode': '0021.000.0001.034899'
+        coa_Combination: null,
+        hrCode: '034899',
+        dept_Code: null,
+        hrName: '测试数据XX财经管理部',
+        coaCode: '0021.000.0001.034899'
       },
       {
-        'coa_Combination': null,
-        'hrCode': '023221',
-        'dept_Code': null,
-        'hrName': '测试数据XX质量与运营部',
-        'coaCode': '0021.000.0001.023221'
+        coa_Combination: null,
+        hrCode: '023221',
+        dept_Code: null,
+        hrName: '测试数据XX质量与运营部',
+        coaCode: '0021.000.0001.023221'
       }
     ]
   },
   {
-    'upperCode': '023338',
-    'list': [
+    upperCode: '023338',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '023489',
-        'dept_Code': null,
-        'hrName': '中央XX测试数据部',
-        'coaCode': '0021.000.0001.023489'
+        coa_Combination: null,
+        hrCode: '023489',
+        dept_Code: null,
+        hrName: '中央XX测试数据部',
+        coaCode: '0021.000.0001.023489'
       }
     ]
   },
   {
-    'upperCode': '023489',
-    'list': [
+    upperCode: '023489',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '023286',
-        'dept_Code': null,
-        'hrName': 'XX应用交付部',
-        'coaCode': '0021.000.0001.023286'
+        coa_Combination: null,
+        hrCode: '023286',
+        dept_Code: null,
+        hrName: 'XX应用交付部',
+        coaCode: '0021.000.0001.023286'
       }
     ]
   },
   {
-    'upperCode': '023286',
-    'list': [
+    upperCode: '023286',
+    list: [
       {
-        'coa_Combination': null,
-        'hrCode': '022471',
-        'dept_Code': null,
-        'hrName': 'XX应用实施部',
-        'coaCode': '0021.000.0001.022471'
+        coa_Combination: null,
+        hrCode: '022471',
+        dept_Code: null,
+        hrName: 'XX应用实施部',
+        coaCode: '0021.000.0001.022471'
       }
     ]
   }
@@ -182,7 +182,7 @@ const DEPT_LIST = [
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
@@ -195,34 +195,34 @@ export default {
         setTimeout(() => {
           resolve([
             {
-              'coaCode': '0021.000.0001.037106',
-              'hrCode': '037106',
-              'hrName': '无线网络业务架构与设计部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.037106',
+              hrCode: '037106',
+              hrName: '无线网络业务架构与设计部',
+              coaStatus: '1-有效-VALID'
             },
             {
-              'coaCode': '0021.000.0001.037271',
-              'hrCode': '037271',
-              'hrName': '服务架构与技术规划部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.037271',
+              hrCode: '037271',
+              hrName: '服务架构与技术规划部',
+              coaStatus: '1-有效-VALID'
             },
             {
-              'coaCode': '0021.000.0001.023475',
-              'hrCode': '023475',
-              'hrName': '测试数据室XX质量与运营部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.023475',
+              hrCode: '023475',
+              hrName: '测试数据室XX质量与运营部',
+              coaStatus: '1-有效-VALID'
             },
             {
-              'coaCode': '0021.000.0001.023114',
-              'hrCode': '023114',
-              'hrName': '测试数据XX人力资源部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.023114',
+              hrCode: '023114',
+              hrName: '测试数据XX人力资源部',
+              coaStatus: '1-有效-VALID'
             },
             {
-              'coaCode': '0021.000.0001.023093',
-              'hrCode': '023093',
-              'hrName': '测试数据XX管理部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.023093',
+              hrCode: '023093',
+              hrName: '测试数据XX管理部',
+              coaStatus: '1-有效-VALID'
             }
           ])
         }, 100)
@@ -233,34 +233,34 @@ export default {
         setTimeout(() => {
           resolve([
             {
-              'coaCode': '0021.000.0001.037106',
-              'hrCode': '037106',
-              'hrName': '无线网络业务架构与设计部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.037106',
+              hrCode: '037106',
+              hrName: '无线网络业务架构与设计部',
+              coaStatus: '1-有效-VALID'
             },
             {
-              'coaCode': '0021.000.0001.037271',
-              'hrCode': '037271',
-              'hrName': '服务架构与技术规划部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.037271',
+              hrCode: '037271',
+              hrName: '服务架构与技术规划部',
+              coaStatus: '1-有效-VALID'
             },
             {
-              'coaCode': '0021.000.0001.023475',
-              'hrCode': '023475',
-              'hrName': '测试数据室XX质量与运营部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.023475',
+              hrCode: '023475',
+              hrName: '测试数据室XX质量与运营部',
+              coaStatus: '1-有效-VALID'
             },
             {
-              'coaCode': '0021.000.0001.023114',
-              'hrCode': '023114',
-              'hrName': '测试数据XX人力资源部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.023114',
+              hrCode: '023114',
+              hrName: '测试数据XX人力资源部',
+              coaStatus: '1-有效-VALID'
             },
             {
-              'coaCode': '0021.000.0001.023093',
-              'hrCode': '023093',
-              'hrName': '测试数据XX管理部',
-              'coaStatus': '1-有效-VALID'
+              coaCode: '0021.000.0001.023093',
+              hrCode: '023093',
+              hrName: '测试数据XX管理部',
+              coaStatus: '1-有效-VALID'
             }
           ])
         }, 100)
diff --git a/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
index 290a06296..6bcfd8341 100644
--- a/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script setup lang="jsx">
-import { Dept as TinyDept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const value = ref('022471')
 
 function cancel() {
-  Modal.message({ message: 'Dept部门 cancel 事件' })
+  TinyModal.message({ message: 'Dept部门 cancel 事件' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/dept/dept-cancel.vue b/examples/sites/demos/pc/app/dept/dept-cancel.vue
index c3eafaae7..d6f1039d6 100644
--- a/examples/sites/demos/pc/app/dept/dept-cancel.vue
+++ b/examples/sites/demos/pc/app/dept/dept-cancel.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   setup() {
     return {
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     cancel() {
-      Modal.message({ message: 'Dept部门 cancel 事件' })
+      TinyModal.message({ message: 'Dept部门 cancel 事件' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
index 9d869052d..c0eb90330 100644
--- a/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
@@ -4,11 +4,11 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 const value = ref('022471')
 
 function close() {
-  Modal.message('关闭弹出框')
+  TinyModal.message('关闭弹出框')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dept/dept-close.vue b/examples/sites/demos/pc/app/dept/dept-close.vue
index 2e2d072b3..64d37754c 100644
--- a/examples/sites/demos/pc/app/dept/dept-close.vue
+++ b/examples/sites/demos/pc/app/dept/dept-close.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     close() {
-      Modal.message('关闭弹出框')
+      TinyModal.message('关闭弹出框')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
index 00a7e7b80..b5bbaa9f9 100644
--- a/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script setup lang="jsx">
-import { Dept as TinyDept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const value = ref('022471')
 
 function confirm() {
-  Modal.message({ message: 'Dept部门 confirm 事件' })
+  TinyModal.message({ message: 'Dept部门 confirm 事件' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/dept/dept-confirm.vue b/examples/sites/demos/pc/app/dept/dept-confirm.vue
index 977c2c204..9513402b7 100644
--- a/examples/sites/demos/pc/app/dept/dept-confirm.vue
+++ b/examples/sites/demos/pc/app/dept/dept-confirm.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   setup() {
     return {
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     confirm() {
-      Modal.message({ message: 'Dept部门 confirm 事件' })
+      TinyModal.message({ message: 'Dept部门 confirm 事件' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
index c94dc3cc5..d3a041aac 100644
--- a/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
@@ -4,15 +4,15 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 const value = ref('022471')
 
 function open() {
-  Modal.message('打开弹出框')
+  TinyModal.message('打开弹出框')
 }
 
 function change(value) {
-  Modal.message({ message: '改变的部门值: ' + value, status: 'info' })
+  TinyModal.message({ message: '改变的部门值: ' + value, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dept/dept-events.vue b/examples/sites/demos/pc/app/dept/dept-events.vue
index a8df580e6..46ef04512 100644
--- a/examples/sites/demos/pc/app/dept/dept-events.vue
+++ b/examples/sites/demos/pc/app/dept/dept-events.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
@@ -16,10 +16,10 @@ export default {
   },
   methods: {
     open() {
-      Modal.message('打开弹出框')
+      TinyModal.message('打开弹出框')
     },
     change(value) {
-      Modal.message({ message: '改变的部门值: ' + value, status: 'info' })
+      TinyModal.message({ message: '改变的部门值: ' + value, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
index 40321d8b4..656bbf7fb 100644
--- a/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
@@ -4,11 +4,11 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 const value = ref('022471')
 
 function selected(value) {
-  Modal.message({ message: '下拉选项值改变为: ' + value, status: 'info' })
+  TinyModal.message({ message: '下拉选项值改变为: ' + value, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dept/dept-selected.vue b/examples/sites/demos/pc/app/dept/dept-selected.vue
index a8084324f..824465fa0 100644
--- a/examples/sites/demos/pc/app/dept/dept-selected.vue
+++ b/examples/sites/demos/pc/app/dept/dept-selected.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept, Modal } from '@opentiny/vue'
+import { TinyDept, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     selected(value) {
-      Modal.message({ message: '下拉选项值改变为: ' + value, status: 'info' })
+      TinyModal.message({ message: '下拉选项值改变为: ' + value, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
index 60b8e5d37..f7902dd25 100644
--- a/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
diff --git a/examples/sites/demos/pc/app/dept/dynamic-disable.vue b/examples/sites/demos/pc/app/dept/dynamic-disable.vue
index 9304892dc..906037a8b 100644
--- a/examples/sites/demos/pc/app/dept/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/dept/dynamic-disable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dept/size-composition-api.vue b/examples/sites/demos/pc/app/dept/size-composition-api.vue
index 47526b41b..1b10012fe 100644
--- a/examples/sites/demos/pc/app/dept/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/size-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
diff --git a/examples/sites/demos/pc/app/dept/size.vue b/examples/sites/demos/pc/app/dept/size.vue
index a605e37f1..a5657fdaa 100644
--- a/examples/sites/demos/pc/app/dept/size.vue
+++ b/examples/sites/demos/pc/app/dept/size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue b/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
index 85683d4ba..166b3195a 100644
--- a/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
diff --git a/examples/sites/demos/pc/app/dept/slot-hrapprover.vue b/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
index 01b452233..ee6a8eb64 100644
--- a/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
+++ b/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dept/title-composition-api.vue b/examples/sites/demos/pc/app/dept/title-composition-api.vue
index 1e3adc48d..a7be07a6b 100644
--- a/examples/sites/demos/pc/app/dept/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/title-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Dept as TinyDept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
diff --git a/examples/sites/demos/pc/app/dept/title.vue b/examples/sites/demos/pc/app/dept/title.vue
index b0d337ef5..a226e91d2 100644
--- a/examples/sites/demos/pc/app/dept/title.vue
+++ b/examples/sites/demos/pc/app/dept/title.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Dept } from '@opentiny/vue'
+import { TinyDept } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDept: Dept
+    TinyDept
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue
index aa707db6d..a730e4d5b 100644
--- a/examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/basic-usage.vue b/examples/sites/demos/pc/app/dialog-box/basic-usage.vue
index bf85a0eb9..6a49fe068 100644
--- a/examples/sites/demos/pc/app/dialog-box/basic-usage.vue
+++ b/examples/sites/demos/pc/app/dialog-box/basic-usage.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/center-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/center-composition-api.vue
index 41cd5fec2..37ca9d721 100644
--- a/examples/sites/demos/pc/app/dialog-box/center-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/center-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/center.vue b/examples/sites/demos/pc/app/dialog-box/center.vue
index 66d7a4f72..1b960c06c 100644
--- a/examples/sites/demos/pc/app/dialog-box/center.vue
+++ b/examples/sites/demos/pc/app/dialog-box/center.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/close-on-click-modal-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/close-on-click-modal-composition-api.vue
index b2586bd32..b2ec1a1ea 100644
--- a/examples/sites/demos/pc/app/dialog-box/close-on-click-modal-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/close-on-click-modal-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/close-on-click-modal.vue b/examples/sites/demos/pc/app/dialog-box/close-on-click-modal.vue
index a3db03b7b..99bb0fca7 100644
--- a/examples/sites/demos/pc/app/dialog-box/close-on-click-modal.vue
+++ b/examples/sites/demos/pc/app/dialog-box/close-on-click-modal.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/close-on-press-escape-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/close-on-press-escape-composition-api.vue
index a14c22377..930c806a6 100644
--- a/examples/sites/demos/pc/app/dialog-box/close-on-press-escape-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/close-on-press-escape-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 
diff --git a/examples/sites/demos/pc/app/dialog-box/close-on-press-escape.vue b/examples/sites/demos/pc/app/dialog-box/close-on-press-escape.vue
index 6e0ae3f1f..99cda51aa 100644
--- a/examples/sites/demos/pc/app/dialog-box/close-on-press-escape.vue
+++ b/examples/sites/demos/pc/app/dialog-box/close-on-press-escape.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue
index 5b3d0e2f8..64386dad9 100644
--- a/examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox, Alert as TinyAlert } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyAlert } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue b/examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue
index 9cfd0e707..4e140782f 100644
--- a/examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue
+++ b/examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox, Alert } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyAlert: Alert
+    TinyButton,
+    TinyDialogBox,
+    TinyAlert
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue
index c5b9db591..cce308af1 100644
--- a/examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.vue b/examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.vue
index 72ae5ed4b..8cef6ab6e 100644
--- a/examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.vue
+++ b/examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue
index 188d609f6..f4f780bf9 100644
--- a/examples/sites/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/custom-dialog-title.vue b/examples/sites/demos/pc/app/dialog-box/custom-dialog-title.vue
index cbedf5621..7a8b78e6c 100644
--- a/examples/sites/demos/pc/app/dialog-box/custom-dialog-title.vue
+++ b/examples/sites/demos/pc/app/dialog-box/custom-dialog-title.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/destroy-on-close-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/destroy-on-close-composition-api.vue
index fe13bd417..15b17f8ec 100644
--- a/examples/sites/demos/pc/app/dialog-box/destroy-on-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/destroy-on-close-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox, Radio as TinyRadio } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio } from '@opentiny/vue'
 
 const value = ref(true)
 const boxVisibility = ref(false)
diff --git a/examples/sites/demos/pc/app/dialog-box/destroy-on-close.vue b/examples/sites/demos/pc/app/dialog-box/destroy-on-close.vue
index 95743a90a..ccf85e263 100644
--- a/examples/sites/demos/pc/app/dialog-box/destroy-on-close.vue
+++ b/examples/sites/demos/pc/app/dialog-box/destroy-on-close.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script>
-import { Button, DialogBox, Radio } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyRadio: Radio
+    TinyButton,
+    TinyDialogBox,
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-top-height-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/dialog-top-height-composition-api.vue
index c60abe099..65487588c 100644
--- a/examples/sites/demos/pc/app/dialog-box/dialog-top-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/dialog-top-height-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility1 = ref(false)
 const boxVisibility2 = ref(false)
diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-top-height.vue b/examples/sites/demos/pc/app/dialog-box/dialog-top-height.vue
index 69675dc9f..e271e113a 100644
--- a/examples/sites/demos/pc/app/dialog-box/dialog-top-height.vue
+++ b/examples/sites/demos/pc/app/dialog-box/dialog-top-height.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue
index 379187cfa..4e66ea6b6 100644
--- a/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/dialog-width-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility1 = ref(false)
 const boxVisibility2 = ref(false)
diff --git a/examples/sites/demos/pc/app/dialog-box/dialog-width.vue b/examples/sites/demos/pc/app/dialog-box/dialog-width.vue
index 9afb40c97..41e5a591f 100644
--- a/examples/sites/demos/pc/app/dialog-box/dialog-width.vue
+++ b/examples/sites/demos/pc/app/dialog-box/dialog-width.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/draggable-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/draggable-composition-api.vue
index 09bc74940..8ece3ccc0 100644
--- a/examples/sites/demos/pc/app/dialog-box/draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/draggable-composition-api.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox, Notify, Input as TinyInput, Modal } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyNotify, TinyInput, TinyModal } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 const isDragOutSideFlag = ref(false)
@@ -38,14 +38,14 @@ const isNotifyMoving = ref(false)
 const input = ref('鼠标移入标题区域单击拖拽')
 
 function dragStart() {
-  Notify({
+  TinyNotify({
     message: '拖拽开始',
     position: 'top-right'
   })
 }
 
 function dragEnd() {
-  Notify({
+  TinyNotify({
     message: '拖拽结束',
     position: 'top-right'
   })
@@ -53,7 +53,7 @@ function dragEnd() {
 
 function dragMove() {
   if (!isNotifyMoving.value) {
-    Notify({
+    TinyNotify({
       message: '拖拽移动',
       position: 'top-right'
     })
@@ -61,7 +61,7 @@ function dragMove() {
   }
 }
 function beforeClose() {
-  Modal.message({ message: 'before-close', status: 'info' })
+  TinyModal.message({ message: 'before-close', status: 'info' })
 }
 function dragDialog() {
   boxVisibility.value = true
diff --git a/examples/sites/demos/pc/app/dialog-box/draggable.vue b/examples/sites/demos/pc/app/dialog-box/draggable.vue
index 586e1add8..d3f242ba8 100644
--- a/examples/sites/demos/pc/app/dialog-box/draggable.vue
+++ b/examples/sites/demos/pc/app/dialog-box/draggable.vue
@@ -29,13 +29,13 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox, Notify, Input, Modal } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyNotify, TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyInput: Input
+    TinyButton,
+    TinyDialogBox,
+    TinyInput
   },
   data() {
     return {
@@ -47,20 +47,20 @@ export default {
   },
   methods: {
     dragStart() {
-      Notify({
+      TinyNotify({
         message: '拖拽开始',
         position: 'top-right'
       })
     },
     dragEnd() {
-      Notify({
+      TinyNotify({
         message: '拖拽结束',
         position: 'top-right'
       })
     },
     dragMove() {
       if (!this.isNotifyMoving) {
-        Notify({
+        TinyNotify({
           message: '拖拽移动',
           position: 'top-right'
         })
@@ -68,7 +68,7 @@ export default {
       }
     },
     beforeClose() {
-      Modal.message({ message: 'before-close', status: 'info' })
+      TinyModal.message({ message: 'before-close', status: 'info' })
     },
     dragDialog() {
       this.boxVisibility = true
diff --git a/examples/sites/demos/pc/app/dialog-box/form-in-dialog-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/form-in-dialog-composition-api.vue
index aa42f2ee1..73ee659e7 100644
--- a/examples/sites/demos/pc/app/dialog-box/form-in-dialog-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/form-in-dialog-composition-api.vue
@@ -48,18 +48,18 @@
 <script setup lang="jsx">
 import { ref, computed } from 'vue'
 import {
-  Button as TinyButton,
-  DialogBox as TinyDialogBox,
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Checkbox as TinyCheckbox,
-  CheckboxGroup as TinyCheckboxGroup,
-  Notify,
-  Option as TinyOption,
-  Select as TinySelect
+  TinyButton,
+  TinyDialogBox,
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyRadio,
+  TinyRadioGroup,
+  TinyCheckbox,
+  TinyCheckboxGroup,
+  TinyNotify,
+  TinyOption,
+  TinySelect
 } from '@opentiny/vue'
 
 const options = ref([
@@ -108,7 +108,7 @@ function handleSubmit() {
     if (response.status === 200) {
       btnSubmit.value.loading = false
       boxVisibility.value = false
-      Notify({
+      TinyNotify({
         title: '成功',
         message: '表单已成功提交！',
         offset: 0
diff --git a/examples/sites/demos/pc/app/dialog-box/form-in-dialog.vue b/examples/sites/demos/pc/app/dialog-box/form-in-dialog.vue
index 554b4c22b..27ab57ee9 100644
--- a/examples/sites/demos/pc/app/dialog-box/form-in-dialog.vue
+++ b/examples/sites/demos/pc/app/dialog-box/form-in-dialog.vue
@@ -47,33 +47,33 @@
 
 <script lang="jsx">
 import {
-  Button,
-  DialogBox,
-  Form,
-  FormItem,
-  Input,
-  Radio,
-  RadioGroup,
-  Checkbox,
-  CheckboxGroup,
-  Notify,
-  Select,
-  Option
+  TinyButton,
+  TinyDialogBox,
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyRadio,
+  TinyRadioGroup,
+  TinyCheckbox,
+  TinyCheckboxGroup,
+  TinyNotify,
+  TinySelect,
+  TinyOption
 } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinySelect: Select,
-    TinyOption: Option
+    TinyButton,
+    TinyDialogBox,
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyRadio,
+    TinyRadioGroup,
+    TinyCheckbox,
+    TinyCheckboxGroup,
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
@@ -108,7 +108,7 @@ export default {
         if (response.status === 200) {
           this.btnSubmit.loading = false
           this.boxVisibility = false
-          Notify({
+          TinyNotify({
             title: '成功',
             message: '表单已成功提交！',
             offset: 0
diff --git a/examples/sites/demos/pc/app/dialog-box/fullscreen-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/fullscreen-composition-api.vue
index 6ee90b8ab..69cfcf23f 100644
--- a/examples/sites/demos/pc/app/dialog-box/fullscreen-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/fullscreen-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 
diff --git a/examples/sites/demos/pc/app/dialog-box/fullscreen.vue b/examples/sites/demos/pc/app/dialog-box/fullscreen.vue
index 581cbb5c1..a98132cc4 100644
--- a/examples/sites/demos/pc/app/dialog-box/fullscreen.vue
+++ b/examples/sites/demos/pc/app/dialog-box/fullscreen.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/hidden-close-buttons-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/hidden-close-buttons-composition-api.vue
index ed8d39572..96835f82b 100644
--- a/examples/sites/demos/pc/app/dialog-box/hidden-close-buttons-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/hidden-close-buttons-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/hidden-close-buttons.vue b/examples/sites/demos/pc/app/dialog-box/hidden-close-buttons.vue
index 8b91c1f04..485fdbf66 100644
--- a/examples/sites/demos/pc/app/dialog-box/hidden-close-buttons.vue
+++ b/examples/sites/demos/pc/app/dialog-box/hidden-close-buttons.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue
index e68c91d65..65ff581ac 100644
--- a/examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/hidden-header-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/hidden-header.vue b/examples/sites/demos/pc/app/dialog-box/hidden-header.vue
index 7b88a46e9..483cc0629 100644
--- a/examples/sites/demos/pc/app/dialog-box/hidden-header.vue
+++ b/examples/sites/demos/pc/app/dialog-box/hidden-header.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
index b4fdfff75..804ec5eae 100644
--- a/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const visible1 = ref(false)
 const visible2 = ref(false)
diff --git a/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue b/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
index 4dbfd3b76..5c91ddace 100644
--- a/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
+++ b/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/no-modal-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/no-modal-composition-api.vue
index c3c789830..82e49f84f 100644
--- a/examples/sites/demos/pc/app/dialog-box/no-modal-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/no-modal-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/no-modal.vue b/examples/sites/demos/pc/app/dialog-box/no-modal.vue
index fee86e036..c769e61b9 100644
--- a/examples/sites/demos/pc/app/dialog-box/no-modal.vue
+++ b/examples/sites/demos/pc/app/dialog-box/no-modal.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/open-close-events-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/open-close-events-composition-api.vue
index 4fcda0e55..9bd39a418 100644
--- a/examples/sites/demos/pc/app/dialog-box/open-close-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/open-close-events-composition-api.vue
@@ -25,14 +25,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Button as TinyButton,
-  DialogBox as TinyDialogBox,
-  Notify,
-  Input as TinyInput,
-  Form as TinyForm,
-  FormItem as TinyFormItem
-} from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyNotify, TinyInput, TinyForm, TinyFormItem } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 
@@ -41,7 +34,7 @@ const createData = ref({
 })
 
 function open() {
-  Notify({
+  TinyNotify({
     title: '窗口弹出',
     message: getTime(new Date()),
     offset: 0
@@ -49,7 +42,7 @@ function open() {
 }
 
 function opened() {
-  Notify({
+  TinyNotify({
     title: '窗口弹出动画完成',
     message: getTime(new Date()),
     offset: 0
@@ -57,7 +50,7 @@ function opened() {
 }
 
 function close() {
-  Notify({
+  TinyNotify({
     title: '窗口关闭',
     message: getTime(new Date()),
     offset: 0
@@ -65,7 +58,7 @@ function close() {
 }
 
 function closed() {
-  Notify({
+  TinyNotify({
     title: '窗口关闭动画完成',
     message: getTime(new Date()),
     offset: 0
diff --git a/examples/sites/demos/pc/app/dialog-box/open-close-events.vue b/examples/sites/demos/pc/app/dialog-box/open-close-events.vue
index 2e7fd4e0b..18f49a7d3 100644
--- a/examples/sites/demos/pc/app/dialog-box/open-close-events.vue
+++ b/examples/sites/demos/pc/app/dialog-box/open-close-events.vue
@@ -24,15 +24,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox, Notify, Input, Form, FormItem } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyNotify, TinyInput, TinyForm, TinyFormItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyInput: Input,
-    TinyForm: Form,
-    TinyFormItem: FormItem
+    TinyButton,
+    TinyDialogBox,
+    TinyInput,
+    TinyForm,
+    TinyFormItem
   },
   data() {
     return {
@@ -44,28 +44,28 @@ export default {
   },
   methods: {
     open() {
-      Notify({
+      TinyNotify({
         title: '窗口弹出',
         message: this.getTime(new Date()),
         offset: 0
       })
     },
     opened() {
-      Notify({
+      TinyNotify({
         title: '窗口弹出动画完成',
         message: this.getTime(new Date()),
         offset: 0
       })
     },
     close() {
-      Notify({
+      TinyNotify({
         title: '窗口关闭',
         message: this.getTime(new Date()),
         offset: 0
       })
     },
     closed() {
-      Notify({
+      TinyNotify({
         title: '窗口关闭动画完成',
         message: this.getTime(new Date()),
         offset: 0
diff --git a/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
index 9ba86aaa5..4ca07ac5b 100644
--- a/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/right-dialog-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 import { iconHelpCircle } from '@opentiny/vue-icon'
 
 const boxVisibility = ref(false)
diff --git a/examples/sites/demos/pc/app/dialog-box/right-dialog.vue b/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
index 2387f1def..5524d7cfe 100644
--- a/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
+++ b/examples/sites/demos/pc/app/dialog-box/right-dialog.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 import { iconHelpCircle } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
+    TinyButton,
+    TinyDialogBox,
     IconHelpCircle: iconHelpCircle()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/dialog-box/secondary-dialog-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/secondary-dialog-composition-api.vue
index 2ecc6544b..f2a47053c 100644
--- a/examples/sites/demos/pc/app/dialog-box/secondary-dialog-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/secondary-dialog-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 const boxVisibility2 = ref(false)
diff --git a/examples/sites/demos/pc/app/dialog-box/secondary-dialog.vue b/examples/sites/demos/pc/app/dialog-box/secondary-dialog.vue
index 74664252a..4a83a3c2d 100644
--- a/examples/sites/demos/pc/app/dialog-box/secondary-dialog.vue
+++ b/examples/sites/demos/pc/app/dialog-box/secondary-dialog.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-box/transition-effect-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/transition-effect-composition-api.vue
index 37cadc346..07d0ee2ee 100644
--- a/examples/sites/demos/pc/app/dialog-box/transition-effect-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/transition-effect-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/transition-effect.vue b/examples/sites/demos/pc/app/dialog-box/transition-effect.vue
index ed63d53b8..bf67f2acb 100644
--- a/examples/sites/demos/pc/app/dialog-box/transition-effect.vue
+++ b/examples/sites/demos/pc/app/dialog-box/transition-effect.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Button, DialogBox } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-select/nest-grid-multi-composition-api.vue b/examples/sites/demos/pc/app/dialog-select/nest-grid-multi-composition-api.vue
index b5ae6be11..350234aeb 100644
--- a/examples/sites/demos/pc/app/dialog-select/nest-grid-multi-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-select/nest-grid-multi-composition-api.vue
@@ -45,12 +45,7 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import {
-  DialogSelect as TinyDialogSelect,
-  Button as TinyButton,
-  Search as TinySearch,
-  Select as TinySelect
-} from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton, TinySearch, TinySelect } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 // 模拟服务侧数据
@@ -111,8 +106,7 @@ const state = reactive({
       { field: 'province', title: '省份', width: 80 },
       { field: 'city', title: '城市', width: 80 }
     ],
-    data: [],
-    // 多选时生效
+    data: [], // 多选时生效
     selectConfig: {
       reserve: true,
       checkRowKeys: ['1', '6']
diff --git a/examples/sites/demos/pc/app/dialog-select/nest-grid-multi.vue b/examples/sites/demos/pc/app/dialog-select/nest-grid-multi.vue
index 94596d870..7b66de14b 100644
--- a/examples/sites/demos/pc/app/dialog-select/nest-grid-multi.vue
+++ b/examples/sites/demos/pc/app/dialog-select/nest-grid-multi.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { DialogSelect, Button, Search, Select } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton, TinySearch, TinySelect } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 // 模拟服务侧数据
@@ -80,10 +80,10 @@ const queryFilter = (pager, search) => {
 
 export default {
   components: {
-    TinyDialogSelect: DialogSelect,
-    TinyButton: Button,
-    TinySearch: Search,
-    TinySelect: Select
+    TinyDialogSelect,
+    TinyButton,
+    TinySearch,
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-select/nest-grid-single-composition-api.vue b/examples/sites/demos/pc/app/dialog-select/nest-grid-single-composition-api.vue
index 7e375bf61..858aebe50 100644
--- a/examples/sites/demos/pc/app/dialog-select/nest-grid-single-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-select/nest-grid-single-composition-api.vue
@@ -42,12 +42,7 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import {
-  DialogSelect as TinyDialogSelect,
-  Button as TinyButton,
-  Search as TinySearch,
-  Select as TinySelect
-} from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton, TinySearch, TinySelect } from '@opentiny/vue'
 
 // 模拟服务侧数据
 const datas = [
diff --git a/examples/sites/demos/pc/app/dialog-select/nest-grid-single.vue b/examples/sites/demos/pc/app/dialog-select/nest-grid-single.vue
index dbd715ab1..78e610b80 100644
--- a/examples/sites/demos/pc/app/dialog-select/nest-grid-single.vue
+++ b/examples/sites/demos/pc/app/dialog-select/nest-grid-single.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { DialogSelect, Button, Search, Select } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton, TinySearch, TinySelect } from '@opentiny/vue'
 
 // 模拟服务侧数据
 const datas = [
@@ -76,10 +76,10 @@ const queryFilter = (pager, search) => {
 
 export default {
   components: {
-    TinyDialogSelect: DialogSelect,
-    TinyButton: Button,
-    TinySearch: Search,
-    TinySelect: Select
+    TinyDialogSelect,
+    TinyButton,
+    TinySearch,
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-select/nest-tree-multi-composition-api.vue b/examples/sites/demos/pc/app/dialog-select/nest-tree-multi-composition-api.vue
index ae8046ee2..13fd7a657 100644
--- a/examples/sites/demos/pc/app/dialog-select/nest-tree-multi-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-select/nest-tree-multi-composition-api.vue
@@ -59,7 +59,7 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { DialogSelect as TinyDialogSelect, Button as TinyButton } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import Sortable from 'sortablejs'
 
diff --git a/examples/sites/demos/pc/app/dialog-select/nest-tree-multi.vue b/examples/sites/demos/pc/app/dialog-select/nest-tree-multi.vue
index 2e44242f0..6cba8d4e3 100644
--- a/examples/sites/demos/pc/app/dialog-select/nest-tree-multi.vue
+++ b/examples/sites/demos/pc/app/dialog-select/nest-tree-multi.vue
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import { DialogSelect, Button } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import Sortable from 'sortablejs'
 
@@ -136,8 +136,8 @@ const dedup = (ids, tmp = []) => {
 
 export default {
   components: {
-    TinyDialogSelect: DialogSelect,
-    TinyButton: Button,
+    TinyDialogSelect,
+    TinyButton,
     TinyIconClose: iconClose()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/dialog-select/nest-tree-single-composition-api.vue b/examples/sites/demos/pc/app/dialog-select/nest-tree-single-composition-api.vue
index ea1548189..92332f02e 100644
--- a/examples/sites/demos/pc/app/dialog-select/nest-tree-single-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-select/nest-tree-single-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { DialogSelect as TinyDialogSelect, Button as TinyButton } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton } from '@opentiny/vue'
 
 // 模拟服务侧数据
 const datas = [
diff --git a/examples/sites/demos/pc/app/dialog-select/nest-tree-single.vue b/examples/sites/demos/pc/app/dialog-select/nest-tree-single.vue
index 3fab39dac..de99e4305 100644
--- a/examples/sites/demos/pc/app/dialog-select/nest-tree-single.vue
+++ b/examples/sites/demos/pc/app/dialog-select/nest-tree-single.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { DialogSelect, Button } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton } from '@opentiny/vue'
 
 // 模拟服务侧数据
 const datas = [
@@ -97,8 +97,8 @@ const dedup = (ids, tmp = []) => {
 
 export default {
   components: {
-    TinyDialogSelect: DialogSelect,
-    TinyButton: Button
+    TinyDialogSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dialog-select/set-selection-composition-api.vue b/examples/sites/demos/pc/app/dialog-select/set-selection-composition-api.vue
index 9d995fd5c..13ed4022c 100644
--- a/examples/sites/demos/pc/app/dialog-select/set-selection-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-select/set-selection-composition-api.vue
@@ -44,12 +44,7 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import {
-  DialogSelect as TinyDialogSelect,
-  Button as TinyButton,
-  Search as TinySearch,
-  Select as TinySelect
-} from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton, TinySearch, TinySelect } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 // 模拟服务侧数据
@@ -112,8 +107,7 @@ const state = reactive({
       { field: 'province', title: '省份', width: 80 },
       { field: 'city', title: '城市', width: 80 }
     ],
-    data: [],
-    // 多选时生效
+    data: [], // 多选时生效
     selectConfig: {
       reserve: true,
       checkRowKeys: ['1', '6']
diff --git a/examples/sites/demos/pc/app/dialog-select/set-selection.vue b/examples/sites/demos/pc/app/dialog-select/set-selection.vue
index 30d9cd884..7e5937957 100644
--- a/examples/sites/demos/pc/app/dialog-select/set-selection.vue
+++ b/examples/sites/demos/pc/app/dialog-select/set-selection.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { DialogSelect, Button, Search, Select } from '@opentiny/vue'
+import { TinyDialogSelect, TinyButton, TinySearch, TinySelect } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 // 模拟服务侧数据
@@ -74,10 +74,10 @@ const queryFilter = (pager, search) => {
 
 export default {
   components: {
-    TinyDialogSelect: DialogSelect,
-    TinyButton: Button,
-    TinySearch: Search,
-    TinySelect: Select
+    TinyDialogSelect,
+    TinyButton,
+    TinySearch,
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/directives/highlight-query/avoid-composition-api.vue b/examples/sites/demos/pc/app/directives/highlight-query/avoid-composition-api.vue
index 4c8f0dfdc..a55b7d79f 100644
--- a/examples/sites/demos/pc/app/directives/highlight-query/avoid-composition-api.vue
+++ b/examples/sites/demos/pc/app/directives/highlight-query/avoid-composition-api.vue
@@ -31,7 +31,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { TinyInput, TinyButton } from '@opentiny/vue'
 import { HighlightQuery } from '@opentiny/vue-directive'
 
 const vHighlightQuery = HighlightQuery
diff --git a/examples/sites/demos/pc/app/directives/highlight-query/avoid.vue b/examples/sites/demos/pc/app/directives/highlight-query/avoid.vue
index 95260da14..fe823e923 100644
--- a/examples/sites/demos/pc/app/directives/highlight-query/avoid.vue
+++ b/examples/sites/demos/pc/app/directives/highlight-query/avoid.vue
@@ -31,13 +31,13 @@
 
 <script>
 import { HighlightQuery } from '@opentiny/vue-directive'
-import { Input, Button } from '@opentiny/vue'
+import { TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   directives: { HighlightQuery },
   components: {
-    TinyInput: Input,
-    TinyButton: Button
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/directives/highlight-query/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/directives/highlight-query/basic-usage-composition-api.vue
index 0bce17a44..d04ea50ee 100644
--- a/examples/sites/demos/pc/app/directives/highlight-query/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/directives/highlight-query/basic-usage-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { HighlightQuery } from '@opentiny/vue-directive'
 
 const vHighlightQuery = HighlightQuery
diff --git a/examples/sites/demos/pc/app/directives/highlight-query/basic-usage.vue b/examples/sites/demos/pc/app/directives/highlight-query/basic-usage.vue
index d50c55e7b..6ed192fec 100644
--- a/examples/sites/demos/pc/app/directives/highlight-query/basic-usage.vue
+++ b/examples/sites/demos/pc/app/directives/highlight-query/basic-usage.vue
@@ -13,12 +13,12 @@
 
 <script>
 import { HighlightQuery } from '@opentiny/vue-directive'
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   directives: { HighlightQuery },
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/divider/base-composition-api.vue b/examples/sites/demos/pc/app/divider/base-composition-api.vue
index eeb85935c..d2314186d 100644
--- a/examples/sites/demos/pc/app/divider/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/divider/base-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Divider as TinyDivider } from '@opentiny/vue'
+import { TinyDivider } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/divider/base.vue b/examples/sites/demos/pc/app/divider/base.vue
index 87b9047e5..408d83afb 100644
--- a/examples/sites/demos/pc/app/divider/base.vue
+++ b/examples/sites/demos/pc/app/divider/base.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Divider } from '@opentiny/vue'
+import { TinyDivider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDivider: Divider
+    TinyDivider
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/divider/contentPosition-composition-api.vue b/examples/sites/demos/pc/app/divider/contentPosition-composition-api.vue
index 1d1d43b77..bee75d836 100644
--- a/examples/sites/demos/pc/app/divider/contentPosition-composition-api.vue
+++ b/examples/sites/demos/pc/app/divider/contentPosition-composition-api.vue
@@ -8,5 +8,5 @@
 </template>
 
 <script setup>
-import { Divider as TinyDivider } from '@opentiny/vue'
+import { TinyDivider } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/divider/contentPosition.vue b/examples/sites/demos/pc/app/divider/contentPosition.vue
index d2e75c1fd..b0407675e 100644
--- a/examples/sites/demos/pc/app/divider/contentPosition.vue
+++ b/examples/sites/demos/pc/app/divider/contentPosition.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Divider } from '@opentiny/vue'
+import { TinyDivider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDivider: Divider
+    TinyDivider
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/divider/customStyle-composition-api.vue b/examples/sites/demos/pc/app/divider/customStyle-composition-api.vue
index 86ee9b9e6..060b08c37 100644
--- a/examples/sites/demos/pc/app/divider/customStyle-composition-api.vue
+++ b/examples/sites/demos/pc/app/divider/customStyle-composition-api.vue
@@ -10,5 +10,5 @@
 </template>
 
 <script setup>
-import { Divider as TinyDivider } from '@opentiny/vue'
+import { TinyDivider } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/divider/customStyle.vue b/examples/sites/demos/pc/app/divider/customStyle.vue
index bb7e24fbb..21eb07621 100644
--- a/examples/sites/demos/pc/app/divider/customStyle.vue
+++ b/examples/sites/demos/pc/app/divider/customStyle.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Divider } from '@opentiny/vue'
+import { TinyDivider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDivider: Divider
+    TinyDivider
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/divider/direction-composition-api.vue b/examples/sites/demos/pc/app/divider/direction-composition-api.vue
index d9f1a37d4..aba3bf5d3 100644
--- a/examples/sites/demos/pc/app/divider/direction-composition-api.vue
+++ b/examples/sites/demos/pc/app/divider/direction-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import { Divider as TinyDivider } from '@opentiny/vue'
+import { TinyDivider } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/divider/direction.vue b/examples/sites/demos/pc/app/divider/direction.vue
index f504cc186..bfa6dc58a 100644
--- a/examples/sites/demos/pc/app/divider/direction.vue
+++ b/examples/sites/demos/pc/app/divider/direction.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Divider } from '@opentiny/vue'
+import { TinyDivider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDivider: Divider
+    TinyDivider
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
index 74a21a811..b7bb7baa0 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
diff --git a/examples/sites/demos/pc/app/drawer/basic-usage.vue b/examples/sites/demos/pc/app/drawer/basic-usage.vue
index 82f546b02..03c274869 100644
--- a/examples/sites/demos/pc/app/drawer/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drawer/basic-usage.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/before-close-composition-api.vue b/examples/sites/demos/pc/app/drawer/before-close-composition-api.vue
index b155977dc..83258260b 100644
--- a/examples/sites/demos/pc/app/drawer/before-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/before-close-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const drawer = ref()
@@ -29,7 +29,7 @@ const forceClose = () => {
 }
 
 const onBeforeClose = (type) => {
-  Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
+  TinyModal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
   return false
 }
 </script>
diff --git a/examples/sites/demos/pc/app/drawer/before-close.vue b/examples/sites/demos/pc/app/drawer/before-close.vue
index de5c01f56..da104fe5c 100644
--- a/examples/sites/demos/pc/app/drawer/before-close.vue
+++ b/examples/sites/demos/pc/app/drawer/before-close.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Drawer, Button, Modal } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
       this.$refs.drawer.close(true)
     },
     onBeforeClose(type) {
-      Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
+      TinyModal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
       return false
     }
   }
diff --git a/examples/sites/demos/pc/app/drawer/confirm-event.vue b/examples/sites/demos/pc/app/drawer/confirm-event.vue
index f6307b94d..0a7557613 100644
--- a/examples/sites/demos/pc/app/drawer/confirm-event.vue
+++ b/examples/sites/demos/pc/app/drawer/confirm-event.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Drawer, Button, Modal } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
@@ -31,7 +31,7 @@ export default {
       this.visible = true
     },
     confirm() {
-      Modal.message({ message: '确认事件', status: 'success' })
+      TinyModal.message({ message: '确认事件', status: 'success' })
       this.visible = false
     }
   }
diff --git a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
index 878093d33..415ba13aa 100644
--- a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 const placement = ref('right')
@@ -32,7 +32,7 @@ const openDrawer = (target) => {
 }
 
 const drag = ({ width, height }) => {
-  Modal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
+  TinyModal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/drawer/dragable.vue b/examples/sites/demos/pc/app/drawer/dragable.vue
index c1d732bad..76b5c4807 100644
--- a/examples/sites/demos/pc/app/drawer/dragable.vue
+++ b/examples/sites/demos/pc/app/drawer/dragable.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { Drawer, Button, Modal } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
@@ -39,7 +39,7 @@ export default {
       this.placement = target === 'width' ? 'right' : 'bottom'
     },
     drag({ width, height }) {
-      Modal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
+      TinyModal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/drawer/events-composition-api.vue b/examples/sites/demos/pc/app/drawer/events-composition-api.vue
index 518f51ef5..8f139584b 100644
--- a/examples/sites/demos/pc/app/drawer/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/events-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 
@@ -28,12 +28,12 @@ const showDrawer = () => {
 }
 
 const onOpen = () => {
-  Modal.message({ message: '打开事件', status: 'info' })
+  TinyModal.message({ message: '打开事件', status: 'info' })
 }
 const onClose = () => {
-  Modal.message({ message: '关闭事件', status: 'info' })
+  TinyModal.message({ message: '关闭事件', status: 'info' })
 }
 const onConfirm = () => {
-  Modal.message({ message: '确定事件', status: 'info' })
+  TinyModal.message({ message: '确定事件', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/drawer/events.vue b/examples/sites/demos/pc/app/drawer/events.vue
index 3809882ab..6bdc89da5 100644
--- a/examples/sites/demos/pc/app/drawer/events.vue
+++ b/examples/sites/demos/pc/app/drawer/events.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Drawer, Button, Modal } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
@@ -35,13 +35,13 @@ export default {
       this.visible = true
     },
     onOpen() {
-      Modal.message({ message: '打开事件', status: 'info' })
+      TinyModal.message({ message: '打开事件', status: 'info' })
     },
     onClose() {
-      Modal.message({ message: '关闭事件', status: 'info' })
+      TinyModal.message({ message: '关闭事件', status: 'info' })
     },
     onConfirm() {
-      Modal.message({ message: '确定事件', status: 'info' })
+      TinyModal.message({ message: '确定事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
index 5adf7297c..34d160a56 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
diff --git a/examples/sites/demos/pc/app/drawer/footer-slot.vue b/examples/sites/demos/pc/app/drawer/footer-slot.vue
index db3815623..71734d3ac 100644
--- a/examples/sites/demos/pc/app/drawer/footer-slot.vue
+++ b/examples/sites/demos/pc/app/drawer/footer-slot.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue
index a0ac857c8..8c96e6d5d 100644
--- a/examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
diff --git a/examples/sites/demos/pc/app/drawer/header-right-slot.vue b/examples/sites/demos/pc/app/drawer/header-right-slot.vue
index 56ad9a3f7..f17131c9c 100644
--- a/examples/sites/demos/pc/app/drawer/header-right-slot.vue
+++ b/examples/sites/demos/pc/app/drawer/header-right-slot.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue b/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
index 61259130b..5245d7324 100644
--- a/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
diff --git a/examples/sites/demos/pc/app/drawer/header-slot.vue b/examples/sites/demos/pc/app/drawer/header-slot.vue
index e81b0eeb3..0bbbcb4aa 100644
--- a/examples/sites/demos/pc/app/drawer/header-slot.vue
+++ b/examples/sites/demos/pc/app/drawer/header-slot.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/mask-closable-composition-api.vue b/examples/sites/demos/pc/app/drawer/mask-closable-composition-api.vue
index 115a7b4c9..acb8a3025 100644
--- a/examples/sites/demos/pc/app/drawer/mask-closable-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/mask-closable-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
diff --git a/examples/sites/demos/pc/app/drawer/mask-closable.vue b/examples/sites/demos/pc/app/drawer/mask-closable.vue
index d676ba0ec..4b45e7e6c 100644
--- a/examples/sites/demos/pc/app/drawer/mask-closable.vue
+++ b/examples/sites/demos/pc/app/drawer/mask-closable.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/mask-composition-api.vue b/examples/sites/demos/pc/app/drawer/mask-composition-api.vue
index 6f02675c0..7d28383e1 100644
--- a/examples/sites/demos/pc/app/drawer/mask-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/mask-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
diff --git a/examples/sites/demos/pc/app/drawer/mask.vue b/examples/sites/demos/pc/app/drawer/mask.vue
index 6cb758604..07fc98ae5 100644
--- a/examples/sites/demos/pc/app/drawer/mask.vue
+++ b/examples/sites/demos/pc/app/drawer/mask.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
index 7be79741a..a3bed2d36 100644
--- a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
@@ -28,7 +28,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 const placement = ref('right')
diff --git a/examples/sites/demos/pc/app/drawer/placement.vue b/examples/sites/demos/pc/app/drawer/placement.vue
index 3e5cb9488..8792828a2 100644
--- a/examples/sites/demos/pc/app/drawer/placement.vue
+++ b/examples/sites/demos/pc/app/drawer/placement.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue b/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
index d7e7e8671..966f2f744 100644
--- a/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
diff --git a/examples/sites/demos/pc/app/drawer/show-close.vue b/examples/sites/demos/pc/app/drawer/show-close.vue
index 3f2f9cb09..dee17f0f4 100644
--- a/examples/sites/demos/pc/app/drawer/show-close.vue
+++ b/examples/sites/demos/pc/app/drawer/show-close.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue b/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
index e03516b4b..aad48d0f5 100644
--- a/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 const showFooter = ref(true)
diff --git a/examples/sites/demos/pc/app/drawer/show-footer.vue b/examples/sites/demos/pc/app/drawer/show-footer.vue
index 3c5f8ebea..8f1e46177 100644
--- a/examples/sites/demos/pc/app/drawer/show-footer.vue
+++ b/examples/sites/demos/pc/app/drawer/show-footer.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/show-header-composition-api.vue b/examples/sites/demos/pc/app/drawer/show-header-composition-api.vue
index ee2384793..9bc9f7f30 100644
--- a/examples/sites/demos/pc/app/drawer/show-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/show-header-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
diff --git a/examples/sites/demos/pc/app/drawer/show-header.vue b/examples/sites/demos/pc/app/drawer/show-header.vue
index 44b3c8737..27010dcac 100644
--- a/examples/sites/demos/pc/app/drawer/show-header.vue
+++ b/examples/sites/demos/pc/app/drawer/show-header.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue b/examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue
index 71701a0a1..a315836eb 100644
--- a/examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { reactive, ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 const tipsProps = reactive({
diff --git a/examples/sites/demos/pc/app/drawer/tips-props.vue b/examples/sites/demos/pc/app/drawer/tips-props.vue
index 3950b9ed5..1a5a23d89 100644
--- a/examples/sites/demos/pc/app/drawer/tips-props.vue
+++ b/examples/sites/demos/pc/app/drawer/tips-props.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
index 249221dbd..06c33ac98 100644
--- a/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script lang="tsx" setup>
 import { ref } from 'vue'
-import { Drawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 import { iconHelp } from '@opentiny/vue-icon'
 
 let drawerInstance = null
@@ -42,6 +42,6 @@ const config = ref({
   }
 })
 const showDrawer = () => {
-  drawerInstance = Drawer.service(config.value)
+  drawerInstance = TinyDrawer.service(config.value)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method.vue b/examples/sites/demos/pc/app/drawer/use-through-method.vue
index 821296397..cce926f62 100644
--- a/examples/sites/demos/pc/app/drawer/use-through-method.vue
+++ b/examples/sites/demos/pc/app/drawer/use-through-method.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script lang="tsx">
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 import { iconHelp } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
@@ -44,7 +44,7 @@ export default {
           )
         }
       }
-      this.drawerInstance = Drawer.service(config)
+      this.drawerInstance = TinyDrawer.service(config)
     },
     closeDrawer() {
       this.drawerInstance.close()
diff --git a/examples/sites/demos/pc/app/drawer/width-composition-api.vue b/examples/sites/demos/pc/app/drawer/width-composition-api.vue
index 6838a6985..22b0b523c 100644
--- a/examples/sites/demos/pc/app/drawer/width-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/width-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 const width = ref('900px')
diff --git a/examples/sites/demos/pc/app/drawer/width.vue b/examples/sites/demos/pc/app/drawer/width.vue
index 781aaf903..d5d122b5d 100644
--- a/examples/sites/demos/pc/app/drawer/width.vue
+++ b/examples/sites/demos/pc/app/drawer/width.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue b/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
index a503738c9..788017af8 100644
--- a/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 const zIndex = ref(3000)
diff --git a/examples/sites/demos/pc/app/drawer/z-index.vue b/examples/sites/demos/pc/app/drawer/z-index.vue
index 6c6999f55..baf71945b 100644
--- a/examples/sites/demos/pc/app/drawer/z-index.vue
+++ b/examples/sites/demos/pc/app/drawer/z-index.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Drawer, Button } from '@opentiny/vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
+    TinyDrawer,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
index c9488fcf0..a2549db25 100644
--- a/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { DropRoles as TinyDropRoles, Notify } from '@opentiny/vue'
+import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
 
 const value = ref('')
 const instance = getCurrentInstance()
@@ -16,7 +16,7 @@ const { $service } = instance.appContext.config.globalProperties
 function change(role) {
   // 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
   $service?.common.getChangeRoleUrl(role).then((url) => {
-    Notify({
+    TinyNotify({
       title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
       message: url,
       offset: 0
diff --git a/examples/sites/demos/pc/app/drop-roles/basic-usage.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
index e22d8113f..ca10a038f 100644
--- a/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { DropRoles, Notify } from '@opentiny/vue'
+import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropRoles: DropRoles
+    TinyDropRoles
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
       // 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
       this.$service?.common.getChangeRoleUrl(role).then((url) => {
         // window.location.href = url
-        Notify({
+        TinyNotify({
           title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
           message: url,
           offset: 0
diff --git a/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
index 6ecb09a7a..9ef43f2cc 100644
--- a/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { DropRoles as TinyDropRoles, Notify } from '@opentiny/vue'
+import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
 
 const value = ref('')
 const instance = getCurrentInstance()
@@ -13,7 +13,7 @@ const { $service } = instance.appContext.config.globalProperties
 function change(role) {
   // 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
   $service?.common.getChangeRoleUrl(role).then((url) => {
-    Notify({
+    TinyNotify({
       title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
       message: url,
       offset: 0
diff --git a/examples/sites/demos/pc/app/drop-roles/change-role-event.vue b/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
index ab4c107d0..444df1a4f 100644
--- a/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
+++ b/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { DropRoles, Notify } from '@opentiny/vue'
+import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropRoles: DropRoles
+    TinyDropRoles
   },
   data() {
     return {
@@ -19,7 +19,7 @@ export default {
       // 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
       this.$service.common.getChangeRoleUrl(role).then((url) => {
         // window.location.href = url
-        Notify({
+        TinyNotify({
           title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
           message: url,
           offset: 0
diff --git a/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
index e13badc08..d75ef4750 100644
--- a/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { DropRoles as TinyDropRoles, Notify } from '@opentiny/vue'
+import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
 
 const value = ref('')
 const fields = ref({
@@ -33,7 +33,7 @@ function getCurrentRole() {
 function change(role) {
   // 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
   return Promise.resolve(
-    Notify({
+    TinyNotify({
       title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
       message: window.location.href,
       offset: 0
diff --git a/examples/sites/demos/pc/app/drop-roles/custom-service.vue b/examples/sites/demos/pc/app/drop-roles/custom-service.vue
index d3d062896..659a7401d 100644
--- a/examples/sites/demos/pc/app/drop-roles/custom-service.vue
+++ b/examples/sites/demos/pc/app/drop-roles/custom-service.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { DropRoles, Notify } from '@opentiny/vue'
+import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropRoles: DropRoles
+    TinyDropRoles
   },
   data() {
     return {
@@ -38,7 +38,7 @@ export default {
     change(role) {
       // 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
       return Promise.resolve(
-        Notify({
+        TinyNotify({
           title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
           message: window.location.href,
           offset: 0
diff --git a/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
index 28b5109b2..da3366d2a 100644
--- a/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { DropRoles as TinyDropRoles, Notify } from '@opentiny/vue'
+import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
 
 const value = ref('')
 const instance = getCurrentInstance()
@@ -16,7 +16,7 @@ const { $service } = instance.appContext.config.globalProperties
 function change(role) {
   // 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
   $service?.common.getChangeRoleUrl(role).then((url) => {
-    Notify({
+    TinyNotify({
       title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
       message: url,
       offset: 0
diff --git a/examples/sites/demos/pc/app/drop-roles/size.vue b/examples/sites/demos/pc/app/drop-roles/size.vue
index 44db58dbe..e508fcc74 100644
--- a/examples/sites/demos/pc/app/drop-roles/size.vue
+++ b/examples/sites/demos/pc/app/drop-roles/size.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { DropRoles, Notify } from '@opentiny/vue'
+import { TinyDropRoles, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropRoles: DropRoles
+    TinyDropRoles
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
       // 下拉角色组件需要触发 change 事件去发送请求，role 为要切换的角色
       this.$service.common.getChangeRoleUrl(role).then((url) => {
         // window.location.href = url
-        Notify({
+        TinyNotify({
           title: '切换后的角色是：' + role + '，根据角色发送请求的 URL 如下：',
           message: url,
           offset: 0
diff --git a/examples/sites/demos/pc/app/drop-times/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drop-times/basic-usage-composition-api.vue
index 110306689..ffd6c5dd8 100644
--- a/examples/sites/demos/pc/app/drop-times/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-times/basic-usage-composition-api.vue
@@ -8,12 +8,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DropTimes as TinyDropTimes, Modal } from '@opentiny/vue'
+import { TinyDropTimes, TinyModal } from '@opentiny/vue'
 
 const value = ref('')
 
 function change(value) {
-  Modal.message({ message: 'change 事件，当前值为 ' + value })
+  TinyModal.message({ message: 'change 事件，当前值为 ' + value })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/drop-times/basic-usage.vue b/examples/sites/demos/pc/app/drop-times/basic-usage.vue
index 7661d5c55..2aad627a6 100644
--- a/examples/sites/demos/pc/app/drop-times/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drop-times/basic-usage.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { DropTimes, Modal } from '@opentiny/vue'
+import { TinyDropTimes, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropTimes: DropTimes
+    TinyDropTimes
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     change(value) {
-      Modal.message({ message: 'change 事件，当前值为 ' + value })
+      TinyModal.message({ message: 'change 事件，当前值为 ' + value })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/drop-times/size-composition-api.vue b/examples/sites/demos/pc/app/drop-times/size-composition-api.vue
index 8076da233..602944572 100644
--- a/examples/sites/demos/pc/app/drop-times/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-times/size-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DropTimes as TinyDropTimes } from '@opentiny/vue'
+import { TinyDropTimes } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/drop-times/size.vue b/examples/sites/demos/pc/app/drop-times/size.vue
index 22ec60012..2ddba75ac 100644
--- a/examples/sites/demos/pc/app/drop-times/size.vue
+++ b/examples/sites/demos/pc/app/drop-times/size.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { DropTimes } from '@opentiny/vue'
+import { TinyDropTimes } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropTimes: DropTimes
+    TinyDropTimes
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/drop-times/start-end-step-composition-api.vue b/examples/sites/demos/pc/app/drop-times/start-end-step-composition-api.vue
index 1b94ce895..a8382c430 100644
--- a/examples/sites/demos/pc/app/drop-times/start-end-step-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-times/start-end-step-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { DropTimes as TinyDropTimes } from '@opentiny/vue'
+import { TinyDropTimes } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/drop-times/start-end-step.vue b/examples/sites/demos/pc/app/drop-times/start-end-step.vue
index d74617f67..d8e74d292 100644
--- a/examples/sites/demos/pc/app/drop-times/start-end-step.vue
+++ b/examples/sites/demos/pc/app/drop-times/start-end-step.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { DropTimes } from '@opentiny/vue'
+import { TinyDropTimes } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropTimes: DropTimes
+    TinyDropTimes
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dropdown/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/dropdown/basic-usage-composition-api.vue
index 24fea4041..b110b00bd 100644
--- a/examples/sites/demos/pc/app/dropdown/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/basic-usage-composition-api.vue
@@ -14,9 +14,5 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/basic-usage.vue b/examples/sites/demos/pc/app/dropdown/basic-usage.vue
index f01a050c3..64c13140d 100644
--- a/examples/sites/demos/pc/app/dropdown/basic-usage.vue
+++ b/examples/sites/demos/pc/app/dropdown/basic-usage.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/border-composition-api.vue b/examples/sites/demos/pc/app/dropdown/border-composition-api.vue
index bcb971c1f..e09b8731f 100644
--- a/examples/sites/demos/pc/app/dropdown/border-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/border-composition-api.vue
@@ -50,9 +50,5 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/border.vue b/examples/sites/demos/pc/app/dropdown/border.vue
index e340f30c6..81935b2fa 100644
--- a/examples/sites/demos/pc/app/dropdown/border.vue
+++ b/examples/sites/demos/pc/app/dropdown/border.vue
@@ -50,13 +50,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/check-status-composition-api.vue b/examples/sites/demos/pc/app/dropdown/check-status-composition-api.vue
index db905ae91..79c8f3da1 100644
--- a/examples/sites/demos/pc/app/dropdown/check-status-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/check-status-composition-api.vue
@@ -14,11 +14,7 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
 
 <style lang="less" scoped>
diff --git a/examples/sites/demos/pc/app/dropdown/check-status.vue b/examples/sites/demos/pc/app/dropdown/check-status.vue
index 33a071725..87bc7fe54 100644
--- a/examples/sites/demos/pc/app/dropdown/check-status.vue
+++ b/examples/sites/demos/pc/app/dropdown/check-status.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue b/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
index 021e0020f..048f5210b 100644
--- a/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
@@ -42,11 +42,7 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/dropdown/disabled.vue b/examples/sites/demos/pc/app/dropdown/disabled.vue
index 9564c467d..4780fea34 100644
--- a/examples/sites/demos/pc/app/dropdown/disabled.vue
+++ b/examples/sites/demos/pc/app/dropdown/disabled.vue
@@ -42,13 +42,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
index 88aa33106..1070a3942 100644
--- a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
@@ -28,12 +28,7 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem,
-  Notify
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyNotify } from '@opentiny/vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
 
 const options = [
@@ -61,7 +56,7 @@ const itemClick = (data, vm) => {
   // Aurora主题 item-click 有第二个参数，其他主题只有第一个参数
   const label = vm?.label || data.vm.label
 
-  Notify({
+  TinyNotify({
     type: 'info',
     title: 'itemClick 回调事件',
     message: `使用 dropdown-item 的label属性：${label},\n 使用 dropdown-item 的默认插槽：${data.vm.$el.innerText}`,
@@ -71,11 +66,11 @@ const itemClick = (data, vm) => {
 }
 
 const buttonClick = () => {
-  Notify({ message: '下拉菜单内置按钮点击事件', status: 'info' })
+  TinyNotify({ message: '下拉菜单内置按钮点击事件', status: 'info' })
 }
 
 const visibleChange = (status) => {
-  Notify({
+  TinyNotify({
     message: `下拉菜单显隐事件，当前为${status ? '显示' : '隐藏'}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/dropdown/events.vue b/examples/sites/demos/pc/app/dropdown/events.vue
index ec3b6cc33..ef16e511b 100644
--- a/examples/sites/demos/pc/app/dropdown/events.vue
+++ b/examples/sites/demos/pc/app/dropdown/events.vue
@@ -28,14 +28,14 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem, Notify } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyNotify } from '@opentiny/vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
@@ -66,7 +66,7 @@ export default {
       // Aurora主题 item-click 有第二个参数，其他主题只有第一个参数
       const label = vm?.label || data.vm.label
 
-      Notify({
+      TinyNotify({
         type: 'info',
         title: 'itemClick 回调事件',
         message: `使用 dropdown-item 的label属性：${label}`,
@@ -75,10 +75,10 @@ export default {
       })
     },
     buttonClick() {
-      Notify({ message: '下拉菜单内置按钮点击事件', status: 'info' })
+      TinyNotify({ message: '下拉菜单内置按钮点击事件', status: 'info' })
     },
     visibleChange(status) {
-      Notify({
+      TinyNotify({
         message: `下拉菜单显隐事件，当前为${status ? '显示' : '隐藏'}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue b/examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue
index bfd37c205..dc532dcdb 100644
--- a/examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue
@@ -16,11 +16,7 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
 
 <style lang="less" scoped>
diff --git a/examples/sites/demos/pc/app/dropdown/hide-on-click.vue b/examples/sites/demos/pc/app/dropdown/hide-on-click.vue
index 7eb4de441..22be33c68 100644
--- a/examples/sites/demos/pc/app/dropdown/hide-on-click.vue
+++ b/examples/sites/demos/pc/app/dropdown/hide-on-click.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue b/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
index f62d6966a..dae556bdf 100644
--- a/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/inherit-width-composition-api.vue
@@ -31,11 +31,7 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
 
 <style lang="less" scoped>
diff --git a/examples/sites/demos/pc/app/dropdown/inherit-width.vue b/examples/sites/demos/pc/app/dropdown/inherit-width.vue
index f0db8e6d9..572f7fe69 100644
--- a/examples/sites/demos/pc/app/dropdown/inherit-width.vue
+++ b/examples/sites/demos/pc/app/dropdown/inherit-width.vue
@@ -31,13 +31,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/lazy-show-popper-composition-api.vue b/examples/sites/demos/pc/app/dropdown/lazy-show-popper-composition-api.vue
index 509306369..ff3a804b2 100644
--- a/examples/sites/demos/pc/app/dropdown/lazy-show-popper-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/lazy-show-popper-composition-api.vue
@@ -35,9 +35,5 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/lazy-show-popper.vue b/examples/sites/demos/pc/app/dropdown/lazy-show-popper.vue
index dd1a4c318..61e9e9ec8 100644
--- a/examples/sites/demos/pc/app/dropdown/lazy-show-popper.vue
+++ b/examples/sites/demos/pc/app/dropdown/lazy-show-popper.vue
@@ -35,13 +35,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue b/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
index 980991adc..e4802c831 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
@@ -37,7 +37,7 @@
 <script setup>
 import { reactive } from 'vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Modal } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyModal } from '@opentiny/vue'
 
 const options = reactive([
   {
@@ -109,7 +109,7 @@ const menuOptions = reactive({
 })
 
 const itemClick = (data) => {
-  Modal.message({
+  TinyModal.message({
     message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
   })
 }
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level.vue b/examples/sites/demos/pc/app/dropdown/multi-level.vue
index 6ec3c4cd3..951f75c77 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level.vue
+++ b/examples/sites/demos/pc/app/dropdown/multi-level.vue
@@ -35,12 +35,12 @@
 
 <script>
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, Modal } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu
+    TinyDropdown,
+    TinyDropdownMenu
   },
   data() {
     return {
@@ -114,7 +114,7 @@ export default {
   },
   methods: {
     itemClick(data) {
-      Modal.message({
+      TinyModal.message({
         message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
       })
     }
diff --git a/examples/sites/demos/pc/app/dropdown/options-composition-api.vue b/examples/sites/demos/pc/app/dropdown/options-composition-api.vue
index 97dc13167..565d0e5a1 100644
--- a/examples/sites/demos/pc/app/dropdown/options-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/options-composition-api.vue
@@ -24,7 +24,7 @@
 <script setup>
 import { ref } from 'vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Notify } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyNotify } from '@opentiny/vue'
 
 const options = ref([
   {
@@ -93,7 +93,7 @@ const menuOptions1 = ref({
 })
 
 function itemClick(data) {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: 'itemData',
     message: `配置式可以通过data.itemData获取配置数据：${JSON.stringify(data.itemData)}`,
diff --git a/examples/sites/demos/pc/app/dropdown/options.vue b/examples/sites/demos/pc/app/dropdown/options.vue
index c66bd0608..908e2665c 100644
--- a/examples/sites/demos/pc/app/dropdown/options.vue
+++ b/examples/sites/demos/pc/app/dropdown/options.vue
@@ -23,12 +23,12 @@
 
 <script>
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, Notify } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu
+    TinyDropdown,
+    TinyDropdownMenu
   },
   data() {
     return {
@@ -101,7 +101,7 @@ export default {
   },
   methods: {
     itemClick(data) {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: 'itemData',
         message: `配置式可以通过data.itemData获取配置数据：${JSON.stringify(data.itemData)}`,
diff --git a/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue b/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
index ff236814b..36c446304 100644
--- a/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/show-icon-composition-api.vue
@@ -44,11 +44,7 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 import { iconEllipsis, iconLanguage } from '@opentiny/vue-icon'
 
 const tinyIconEllipsis = iconEllipsis()
diff --git a/examples/sites/demos/pc/app/dropdown/show-icon.vue b/examples/sites/demos/pc/app/dropdown/show-icon.vue
index a89c7c518..f520b0c3a 100644
--- a/examples/sites/demos/pc/app/dropdown/show-icon.vue
+++ b/examples/sites/demos/pc/app/dropdown/show-icon.vue
@@ -43,14 +43,14 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 import { iconEllipsis, iconLanguage } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/dropdown/size-composition-api.vue b/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
index 77ce6789e..aa70be572 100644
--- a/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/size-composition-api.vue
@@ -56,11 +56,7 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
 
 <style lang="less" scoped>
diff --git a/examples/sites/demos/pc/app/dropdown/size.vue b/examples/sites/demos/pc/app/dropdown/size.vue
index 3aa5c23bb..4ecf7e377 100644
--- a/examples/sites/demos/pc/app/dropdown/size.vue
+++ b/examples/sites/demos/pc/app/dropdown/size.vue
@@ -56,13 +56,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/slots-composition-api.vue b/examples/sites/demos/pc/app/dropdown/slots-composition-api.vue
index 3090899cd..977a97106 100644
--- a/examples/sites/demos/pc/app/dropdown/slots-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/slots-composition-api.vue
@@ -18,11 +18,7 @@
 
 <script setup>
 import { iconAscending } from '@opentiny/vue-icon'
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 const TinyIconAscending = iconAscending()
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/slots.vue b/examples/sites/demos/pc/app/dropdown/slots.vue
index 45267edf9..51aa98e1c 100644
--- a/examples/sites/demos/pc/app/dropdown/slots.vue
+++ b/examples/sites/demos/pc/app/dropdown/slots.vue
@@ -18,13 +18,13 @@
 
 <script>
 import { iconAscending } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem,
     TinyIconAscending: iconAscending()
   }
 }
diff --git a/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue b/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
index 419bf2f6f..075521fca 100644
--- a/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/split-button-composition-api.vue
@@ -34,9 +34,5 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/split-button.vue b/examples/sites/demos/pc/app/dropdown/split-button.vue
index a8e74c458..10fc96ebd 100644
--- a/examples/sites/demos/pc/app/dropdown/split-button.vue
+++ b/examples/sites/demos/pc/app/dropdown/split-button.vue
@@ -34,13 +34,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/tip-composition-api.vue b/examples/sites/demos/pc/app/dropdown/tip-composition-api.vue
index 4973bd575..31c23a307 100644
--- a/examples/sites/demos/pc/app/dropdown/tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/tip-composition-api.vue
@@ -25,12 +25,7 @@
 <script setup>
 import { ref } from 'vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem,
-  Notify
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyNotify } from '@opentiny/vue'
 
 const options = ref([
   {
@@ -54,7 +49,7 @@ const options = ref([
 ])
 
 function itemClick(data) {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: 'itemData',
     message: `配置式可以通过data.itemData获取配置数据：${JSON.stringify(data.itemData)}`,
diff --git a/examples/sites/demos/pc/app/dropdown/tip.vue b/examples/sites/demos/pc/app/dropdown/tip.vue
index 05b05d2ee..e8793622d 100644
--- a/examples/sites/demos/pc/app/dropdown/tip.vue
+++ b/examples/sites/demos/pc/app/dropdown/tip.vue
@@ -24,13 +24,13 @@
 
 <script>
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, DropdownItem, Notify } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
@@ -58,7 +58,7 @@ export default {
   },
   methods: {
     itemClick(data) {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: 'itemData',
         message: `配置式可以通过data.itemData获取配置数据：${JSON.stringify(data.itemData)}`,
diff --git a/examples/sites/demos/pc/app/dropdown/title-composition-api.vue b/examples/sites/demos/pc/app/dropdown/title-composition-api.vue
index f069f698a..fb1003981 100644
--- a/examples/sites/demos/pc/app/dropdown/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/title-composition-api.vue
@@ -13,9 +13,5 @@
 </template>
 
 <script setup>
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/title.vue b/examples/sites/demos/pc/app/dropdown/title.vue
index 32b694f74..e0bfffbf2 100644
--- a/examples/sites/demos/pc/app/dropdown/title.vue
+++ b/examples/sites/demos/pc/app/dropdown/title.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue b/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
index 86309e7e6..931bdecfa 100644
--- a/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
@@ -30,11 +30,7 @@
 
 <script setup>
 import { iconPlus, iconPlusCircle, iconPlusSquare, iconCheckedLinear, iconCheckedSur } from '@opentiny/vue-icon'
-import {
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 const tinyIconPlus = iconPlus()
 const tinyIconPlusCircle = iconPlusCircle()
diff --git a/examples/sites/demos/pc/app/dropdown/trigger.vue b/examples/sites/demos/pc/app/dropdown/trigger.vue
index 50b12f594..0dfd01a2f 100644
--- a/examples/sites/demos/pc/app/dropdown/trigger.vue
+++ b/examples/sites/demos/pc/app/dropdown/trigger.vue
@@ -30,13 +30,13 @@
 
 <script>
 import { iconPlus, iconPlusCircle, iconPlusSquare, iconCheckedLinear, iconCheckedSur } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem,
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem,
     TinyIconPlus: iconPlus(),
     TinyIconPlusCircle: iconPlusCircle(),
     TinyIconPlusSquare: iconPlusSquare(),
diff --git a/examples/sites/demos/pc/app/espace/data-composition-api.vue b/examples/sites/demos/pc/app/espace/data-composition-api.vue
index 699eca44f..6dfc1e638 100644
--- a/examples/sites/demos/pc/app/espace/data-composition-api.vue
+++ b/examples/sites/demos/pc/app/espace/data-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Espace as TinyEspace } from '@opentiny/vue'
+import { TinyEspace } from '@opentiny/vue'
 
 const op = ref([
   {
diff --git a/examples/sites/demos/pc/app/espace/data.vue b/examples/sites/demos/pc/app/espace/data.vue
index 82d6bb060..593ad9112 100644
--- a/examples/sites/demos/pc/app/espace/data.vue
+++ b/examples/sites/demos/pc/app/espace/data.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Espace } from '@opentiny/vue'
+import { TinyEspace } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyEspace: Espace
+    TinyEspace
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/espace/support-open-espace-composition-api.vue b/examples/sites/demos/pc/app/espace/support-open-espace-composition-api.vue
index 5ce798c59..9e181e01c 100644
--- a/examples/sites/demos/pc/app/espace/support-open-espace-composition-api.vue
+++ b/examples/sites/demos/pc/app/espace/support-open-espace-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserContact as TinyUserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 
 const data = ref({
   imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
diff --git a/examples/sites/demos/pc/app/espace/support-open-espace.vue b/examples/sites/demos/pc/app/espace/support-open-espace.vue
index 25118911d..cfe9cfa4f 100644
--- a/examples/sites/demos/pc/app/espace/support-open-espace.vue
+++ b/examples/sites/demos/pc/app/espace/support-open-espace.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserContact: UserContact
+    TinyUserContact
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/fall-menu/custom-menuitem-composition-api.vue b/examples/sites/demos/pc/app/fall-menu/custom-menuitem-composition-api.vue
index 5efc899c4..2cc8cc777 100644
--- a/examples/sites/demos/pc/app/fall-menu/custom-menuitem-composition-api.vue
+++ b/examples/sites/demos/pc/app/fall-menu/custom-menuitem-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FallMenu as TinyFallMenu } from '@opentiny/vue'
+import { TinyFallMenu } from '@opentiny/vue'
 
 const dataset = ref([
   { title: '首页', url: '#/zh-CN/index' },
diff --git a/examples/sites/demos/pc/app/fall-menu/custom-menuitem.vue b/examples/sites/demos/pc/app/fall-menu/custom-menuitem.vue
index f9f26b34d..be2efeecb 100644
--- a/examples/sites/demos/pc/app/fall-menu/custom-menuitem.vue
+++ b/examples/sites/demos/pc/app/fall-menu/custom-menuitem.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="jsx">
-import { FallMenu } from '@opentiny/vue'
+import { TinyFallMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    FallMenu
+    TinyFallMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/fall-menu/custom-slider-icon-composition-api.vue b/examples/sites/demos/pc/app/fall-menu/custom-slider-icon-composition-api.vue
index 01bf05bac..87ba165ec 100644
--- a/examples/sites/demos/pc/app/fall-menu/custom-slider-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/fall-menu/custom-slider-icon-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FallMenu as TinyFallMenu } from '@opentiny/vue'
+import { TinyFallMenu } from '@opentiny/vue'
 import { iconLeft, iconRight } from '@opentiny/vue-icon'
 
 const dataset = ref([
diff --git a/examples/sites/demos/pc/app/fall-menu/custom-slider-icon.vue b/examples/sites/demos/pc/app/fall-menu/custom-slider-icon.vue
index d0c1e9c99..6cfd1947c 100644
--- a/examples/sites/demos/pc/app/fall-menu/custom-slider-icon.vue
+++ b/examples/sites/demos/pc/app/fall-menu/custom-slider-icon.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { FallMenu } from '@opentiny/vue'
+import { TinyFallMenu } from '@opentiny/vue'
 import { IconLeft, IconRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    FallMenu,
+    TinyFallMenu,
     IconLeft: IconLeft(),
     IconRight: IconRight()
   },
diff --git a/examples/sites/demos/pc/app/fall-menu/data-resource-composition-api.vue b/examples/sites/demos/pc/app/fall-menu/data-resource-composition-api.vue
index 9375f19ee..808052cc8 100644
--- a/examples/sites/demos/pc/app/fall-menu/data-resource-composition-api.vue
+++ b/examples/sites/demos/pc/app/fall-menu/data-resource-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FallMenu as TinyFallMenu } from '@opentiny/vue'
+import { TinyFallMenu } from '@opentiny/vue'
 
 const dataset = ref([
   { title: '首页', url: '#/zh-CN/index' },
diff --git a/examples/sites/demos/pc/app/fall-menu/data-resource.vue b/examples/sites/demos/pc/app/fall-menu/data-resource.vue
index 484f33414..89ce84a28 100644
--- a/examples/sites/demos/pc/app/fall-menu/data-resource.vue
+++ b/examples/sites/demos/pc/app/fall-menu/data-resource.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { FallMenu } from '@opentiny/vue'
+import { TinyFallMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    FallMenu
+    TinyFallMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue b/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue
index 9aeabc3f0..9dafdf29b 100644
--- a/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue
@@ -10,13 +10,13 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const uploadRef = ref()
 
 function cancelUpload() {
-  Modal.message({ message: '手动取消上传', status: 'info' })
+  TinyModal.message({ message: '手动取消上传', status: 'info' })
   uploadRef.value.abort()
 }
 </script>
diff --git a/examples/sites/demos/pc/app/file-upload/abort-quest.vue b/examples/sites/demos/pc/app/file-upload/abort-quest.vue
index 28eac0571..34d954a6f 100644
--- a/examples/sites/demos/pc/app/file-upload/abort-quest.vue
+++ b/examples/sites/demos/pc/app/file-upload/abort-quest.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     cancelUpload() {
-      Modal.message({ message: '手动取消上传', status: 'info' })
+      TinyModal.message({ message: '手动取消上传', status: 'info' })
       this.$refs.upload.abort()
     }
   }
diff --git a/examples/sites/demos/pc/app/file-upload/accept-file-image-composition-api.vue b/examples/sites/demos/pc/app/file-upload/accept-file-image-composition-api.vue
index 6a2413bd1..b04bfd64b 100644
--- a/examples/sites/demos/pc/app/file-upload/accept-file-image-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/accept-file-image-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([])
diff --git a/examples/sites/demos/pc/app/file-upload/accept-file-image.vue b/examples/sites/demos/pc/app/file-upload/accept-file-image.vue
index 1e1e3a088..5ea6a1216 100644
--- a/examples/sites/demos/pc/app/file-upload/accept-file-image.vue
+++ b/examples/sites/demos/pc/app/file-upload/accept-file-image.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/file-upload/basic-usage-composition-api.vue
index 393117e7f..e4a1099db 100644
--- a/examples/sites/demos/pc/app/file-upload/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/basic-usage-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const requestData = ref({
   id: 123
diff --git a/examples/sites/demos/pc/app/file-upload/basic-usage.vue b/examples/sites/demos/pc/app/file-upload/basic-usage.vue
index a17d39170..6b6081984 100644
--- a/examples/sites/demos/pc/app/file-upload/basic-usage.vue
+++ b/examples/sites/demos/pc/app/file-upload/basic-usage.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue b/examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue
index db154c09b..c06703c18 100644
--- a/examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -25,9 +25,11 @@ function beforeAvatarUpload(file) {
     const allow = isJPG && isLt2M
 
     if (!allow) {
-      Modal.confirm(`自定义提示：《${file.name}》文件不合规范，文件类型或大小超出限制，确定要上传吗？`).then((res) => {
-        res === 'confirm' ? resolve() : reject(new Error('取消上传'))
-      })
+      TinyModal.confirm(`自定义提示：《${file.name}》文件不合规范，文件类型或大小超出限制，确定要上传吗？`).then(
+        (res) => {
+          res === 'confirm' ? resolve() : reject(new Error('取消上传'))
+        }
+      )
     } else {
       resolve()
     }
diff --git a/examples/sites/demos/pc/app/file-upload/before-upload-limit.vue b/examples/sites/demos/pc/app/file-upload/before-upload-limit.vue
index f930cee7e..682e80d2b 100644
--- a/examples/sites/demos/pc/app/file-upload/before-upload-limit.vue
+++ b/examples/sites/demos/pc/app/file-upload/before-upload-limit.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
@@ -33,7 +33,7 @@ export default {
         const allow = isJPG && isLt2M
 
         if (!allow) {
-          Modal.confirm(`自定义提示：《${file.name}》文件不合规范，文件类型或大小超出限制，确定要上传吗？`).then(
+          TinyModal.confirm(`自定义提示：《${file.name}》文件不合规范，文件类型或大小超出限制，确定要上传吗？`).then(
             (res) => {
               res === 'confirm' ? resolve() : reject(new Error('取消上传'))
             }
diff --git a/examples/sites/demos/pc/app/file-upload/clear-files-composition-api.vue b/examples/sites/demos/pc/app/file-upload/clear-files-composition-api.vue
index fa96be7dc..9e972affb 100644
--- a/examples/sites/demos/pc/app/file-upload/clear-files-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/clear-files-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
diff --git a/examples/sites/demos/pc/app/file-upload/clear-files.vue b/examples/sites/demos/pc/app/file-upload/clear-files.vue
index 05815f3b2..2056b5349 100644
--- a/examples/sites/demos/pc/app/file-upload/clear-files.vue
+++ b/examples/sites/demos/pc/app/file-upload/clear-files.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/custom-prefix-composition-api.vue b/examples/sites/demos/pc/app/file-upload/custom-prefix-composition-api.vue
index 1d5192fbb..3e19f78ed 100644
--- a/examples/sites/demos/pc/app/file-upload/custom-prefix-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/custom-prefix-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 import Modal from '@opentiny/vue-modal'
 
 const action = ref('http://localhost:3000/api/upload')
diff --git a/examples/sites/demos/pc/app/file-upload/custom-prefix.vue b/examples/sites/demos/pc/app/file-upload/custom-prefix.vue
index 3151960c2..0dddb4e2e 100644
--- a/examples/sites/demos/pc/app/file-upload/custom-prefix.vue
+++ b/examples/sites/demos/pc/app/file-upload/custom-prefix.vue
@@ -15,13 +15,13 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 import Modal from '@opentiny/vue-modal'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/custom-trigger-composition-api.vue b/examples/sites/demos/pc/app/file-upload/custom-trigger-composition-api.vue
index 6d8d7b65d..d86b59f8e 100644
--- a/examples/sites/demos/pc/app/file-upload/custom-trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/custom-trigger-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 </script>
diff --git a/examples/sites/demos/pc/app/file-upload/custom-trigger.vue b/examples/sites/demos/pc/app/file-upload/custom-trigger.vue
index 8476c994a..6d615eacf 100644
--- a/examples/sites/demos/pc/app/file-upload/custom-trigger.vue
+++ b/examples/sites/demos/pc/app/file-upload/custom-trigger.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue b/examples/sites/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue
index 8d82d3f1a..63e7bbd5b 100644
--- a/examples/sites/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const reUploadTip = (count) => `我是自定义重新上传的左侧提示，${count}个文件变红啦！`
diff --git a/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue b/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue
index 6804183fd..38a667d42 100644
--- a/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue
+++ b/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/disabled-composition-api.vue b/examples/sites/demos/pc/app/file-upload/disabled-composition-api.vue
index e9a631480..118ed5223 100644
--- a/examples/sites/demos/pc/app/file-upload/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/disabled-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/file-upload/disabled.vue b/examples/sites/demos/pc/app/file-upload/disabled.vue
index 9ce5ef6b8..1574606b1 100644
--- a/examples/sites/demos/pc/app/file-upload/disabled.vue
+++ b/examples/sites/demos/pc/app/file-upload/disabled.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api.vue b/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api.vue
index 2b6c2fbd5..d30090546 100644
--- a/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyModal } from '@opentiny/vue'
 import { iconPicture } from '@opentiny/vue-icon'
 
 const action = ref('http://localhost:3000/api/upload')
@@ -15,7 +15,7 @@ const action = ref('http://localhost:3000/api/upload')
 const TinyIconPicture = iconPicture()
 
 function dropErrorHandler(files) {
-  Modal.message(`有${files.length}个文件拖拽失败`)
+  TinyModal.message(`有${files.length}个文件拖拽失败`)
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/file-upload/drag-upload.vue b/examples/sites/demos/pc/app/file-upload/drag-upload.vue
index 601a4503b..60d42f0f6 100644
--- a/examples/sites/demos/pc/app/file-upload/drag-upload.vue
+++ b/examples/sites/demos/pc/app/file-upload/drag-upload.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { FileUpload, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyModal } from '@opentiny/vue'
 import { iconPicture } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     TinyIconPicture: iconPicture()
   },
   data() {
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     dropErrorHandler(files) {
-      Modal.message(`有${files.length}个文件拖拽失败`)
+      TinyModal.message(`有${files.length}个文件拖拽失败`)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/file-upload/encrypt-config-composition-api.vue b/examples/sites/demos/pc/app/file-upload/encrypt-config-composition-api.vue
index 9ad27ccec..2aac3c37b 100644
--- a/examples/sites/demos/pc/app/file-upload/encrypt-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/encrypt-config-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref, reactive, computed } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const encryptConfig = reactive({
diff --git a/examples/sites/demos/pc/app/file-upload/encrypt-config.vue b/examples/sites/demos/pc/app/file-upload/encrypt-config.vue
index ce916bab1..33191df34 100644
--- a/examples/sites/demos/pc/app/file-upload/encrypt-config.vue
+++ b/examples/sites/demos/pc/app/file-upload/encrypt-config.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/file-picture-card-composition-api.vue b/examples/sites/demos/pc/app/file-upload/file-picture-card-composition-api.vue
index bf3eb54c9..665c63c7e 100644
--- a/examples/sites/demos/pc/app/file-upload/file-picture-card-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/file-picture-card-composition-api.vue
@@ -35,7 +35,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue'
 import { iconPlus, iconView, iconDownload, iconDel } from '@opentiny/vue-icon'
 
 const action = ref('http://localhost:3000/api/upload')
diff --git a/examples/sites/demos/pc/app/file-upload/file-picture-card.vue b/examples/sites/demos/pc/app/file-upload/file-picture-card.vue
index c04e5bb92..a5de1bff4 100644
--- a/examples/sites/demos/pc/app/file-upload/file-picture-card.vue
+++ b/examples/sites/demos/pc/app/file-upload/file-picture-card.vue
@@ -34,13 +34,13 @@
 </template>
 
 <script>
-import { FileUpload, DialogBox } from '@opentiny/vue'
+import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue'
 import { IconPlus, IconView, IconDownload, IconDel } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyDialogBox: DialogBox,
+    TinyFileUpload,
+    TinyDialogBox,
     IconPlus: IconPlus(),
     IconView: IconView(),
     IconDownload: IconDownload(),
diff --git a/examples/sites/demos/pc/app/file-upload/file-size-array-composition-api.vue b/examples/sites/demos/pc/app/file-upload/file-size-array-composition-api.vue
index 03796c8a7..8306e7887 100644
--- a/examples/sites/demos/pc/app/file-upload/file-size-array-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/file-size-array-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
diff --git a/examples/sites/demos/pc/app/file-upload/file-size-array.vue b/examples/sites/demos/pc/app/file-upload/file-size-array.vue
index 3d39344a9..3b5872f66 100644
--- a/examples/sites/demos/pc/app/file-upload/file-size-array.vue
+++ b/examples/sites/demos/pc/app/file-upload/file-size-array.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/file-size-composition-api.vue b/examples/sites/demos/pc/app/file-upload/file-size-composition-api.vue
index cd34b813c..49b36b131 100644
--- a/examples/sites/demos/pc/app/file-upload/file-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/file-size-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
diff --git a/examples/sites/demos/pc/app/file-upload/file-size.vue b/examples/sites/demos/pc/app/file-upload/file-size.vue
index d4cef901f..687dfbafa 100644
--- a/examples/sites/demos/pc/app/file-upload/file-size.vue
+++ b/examples/sites/demos/pc/app/file-upload/file-size.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue b/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue
index 488c50ab9..bda125d4c 100644
--- a/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue
@@ -30,13 +30,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  FileUpload as TinyFileUpload,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const ruleFormRef = ref(null)
@@ -78,9 +72,9 @@ const beforeUpload = (file) => {
 const formValidate = () => {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      Modal.alert('校验通过')
+      TinyModal.alert('校验通过')
     } else {
-      Modal.message({ message: '校验不通过', status: 'warning' })
+      TinyModal.message({ message: '校验不通过', status: 'warning' })
       return false
     }
   })
diff --git a/examples/sites/demos/pc/app/file-upload/form-validation.vue b/examples/sites/demos/pc/app/file-upload/form-validation.vue
index f56ec2e9e..d9da034d8 100644
--- a/examples/sites/demos/pc/app/file-upload/form-validation.vue
+++ b/examples/sites/demos/pc/app/file-upload/form-validation.vue
@@ -31,14 +31,14 @@
 </template>
 
 <script>
-import { Form, FormItem, FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     const validatePass = (rule, value, callback) => {
@@ -78,9 +78,9 @@ export default {
     formValidate() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          Modal.alert('校验通过')
+          TinyModal.alert('校验通过')
         } else {
-          Modal.message({ message: '校验不通过', status: 'warning' })
+          TinyModal.message({ message: '校验不通过', status: 'warning' })
           return false
         }
       })
diff --git a/examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue b/examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue
index b0b5f2b6a..587540d46 100644
--- a/examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue
@@ -8,14 +8,14 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const fileList = reactive([])
 const httpRequest = ref((files) => {
   return new Promise((resolve) => {
     // 此处为用户自定义的上传服务请求
     setTimeout(() => {
-      Modal.message('上传成功')
+      TinyModal.message('上传成功')
       fileList.push(files.file)
     }, 500)
   })
diff --git a/examples/sites/demos/pc/app/file-upload/http-request.vue b/examples/sites/demos/pc/app/file-upload/http-request.vue
index 651a42101..ba7634d66 100644
--- a/examples/sites/demos/pc/app/file-upload/http-request.vue
+++ b/examples/sites/demos/pc/app/file-upload/http-request.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
@@ -21,7 +21,7 @@ export default {
         return new Promise((resolve) => {
           // 此处为用户自定义的上传服务请求
           setTimeout(() => {
-            Modal.message('上传成功')
+            TinyModal.message('上传成功')
             this.fileList.push(files.file)
           }, 500)
         })
diff --git a/examples/sites/demos/pc/app/file-upload/image-size-composition-api.vue b/examples/sites/demos/pc/app/file-upload/image-size-composition-api.vue
index 63476aa99..7bbed4780 100644
--- a/examples/sites/demos/pc/app/file-upload/image-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/image-size-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([])
@@ -32,7 +32,7 @@ function beforeUpload(file) {
 
     img.src = base64
     img.onload = function () {
-      Modal.message({
+      TinyModal.message({
         message: '宽：' + img.naturalWidth + ' 高：' + img.naturalHeight,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/file-upload/image-size.vue b/examples/sites/demos/pc/app/file-upload/image-size.vue
index efb612a66..91d373afc 100644
--- a/examples/sites/demos/pc/app/file-upload/image-size.vue
+++ b/examples/sites/demos/pc/app/file-upload/image-size.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
@@ -34,7 +34,7 @@ export default {
 
         img.src = base64
         img.onload = function () {
-          Modal.message({
+          TinyModal.message({
             message: '宽：' + img.naturalWidth + ' 高：' + img.naturalHeight,
             status: 'info'
           })
diff --git a/examples/sites/demos/pc/app/file-upload/manual-upload-composition-api.vue b/examples/sites/demos/pc/app/file-upload/manual-upload-composition-api.vue
index a350a6802..abc393e97 100644
--- a/examples/sites/demos/pc/app/file-upload/manual-upload-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/manual-upload-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([])
diff --git a/examples/sites/demos/pc/app/file-upload/manual-upload.vue b/examples/sites/demos/pc/app/file-upload/manual-upload.vue
index c1bcb0e42..ac194139a 100644
--- a/examples/sites/demos/pc/app/file-upload/manual-upload.vue
+++ b/examples/sites/demos/pc/app/file-upload/manual-upload.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/max-file-count-composition-api.vue b/examples/sites/demos/pc/app/file-upload/max-file-count-composition-api.vue
index fa54a419f..3af69ce2d 100644
--- a/examples/sites/demos/pc/app/file-upload/max-file-count-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/max-file-count-composition-api.vue
@@ -6,12 +6,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const limit = ref(1)
 
 function handleExceed() {
-  Modal.message(`文件个数不能超过${limit.value}个`)
+  TinyModal.message(`文件个数不能超过${limit.value}个`)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/file-upload/max-file-count.vue b/examples/sites/demos/pc/app/file-upload/max-file-count.vue
index 8124bd292..60fdfe6b3 100644
--- a/examples/sites/demos/pc/app/file-upload/max-file-count.vue
+++ b/examples/sites/demos/pc/app/file-upload/max-file-count.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     handleExceed() {
-      Modal.message(`文件个数不能超过${this.limit}个`)
+      TinyModal.message(`文件个数不能超过${this.limit}个`)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/file-upload/multiple-file-composition-api.vue b/examples/sites/demos/pc/app/file-upload/multiple-file-composition-api.vue
index 41ef97541..845c755df 100644
--- a/examples/sites/demos/pc/app/file-upload/multiple-file-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/multiple-file-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 </script>
diff --git a/examples/sites/demos/pc/app/file-upload/multiple-file.vue b/examples/sites/demos/pc/app/file-upload/multiple-file.vue
index 22c114fce..1b0971ec1 100644
--- a/examples/sites/demos/pc/app/file-upload/multiple-file.vue
+++ b/examples/sites/demos/pc/app/file-upload/multiple-file.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/paste-upload-composition-api.vue b/examples/sites/demos/pc/app/file-upload/paste-upload-composition-api.vue
index 8a88d7036..02b0363a4 100644
--- a/examples/sites/demos/pc/app/file-upload/paste-upload-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/paste-upload-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { FileUpload as TinyFileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconFileupload } from '@opentiny/vue-icon'
 
 const IconFileUpload = iconFileupload()
diff --git a/examples/sites/demos/pc/app/file-upload/paste-upload.vue b/examples/sites/demos/pc/app/file-upload/paste-upload.vue
index ba2a12334..23fd4e816 100644
--- a/examples/sites/demos/pc/app/file-upload/paste-upload.vue
+++ b/examples/sites/demos/pc/app/file-upload/paste-upload.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconFileupload } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconFileupload: iconFileupload()
   }
 }
diff --git a/examples/sites/demos/pc/app/file-upload/picture-card-composition-api.vue b/examples/sites/demos/pc/app/file-upload/picture-card-composition-api.vue
index 07844a820..623fdcdbb 100644
--- a/examples/sites/demos/pc/app/file-upload/picture-card-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/picture-card-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, DialogBox as TinyDialogBox } from '@opentiny/vue'
+import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue'
 import { iconAddPicture } from '@opentiny/vue-icon'
 
 const action = ref('http://localhost:3000/api/upload')
diff --git a/examples/sites/demos/pc/app/file-upload/picture-card.vue b/examples/sites/demos/pc/app/file-upload/picture-card.vue
index 92bc18062..dfd6d26ea 100644
--- a/examples/sites/demos/pc/app/file-upload/picture-card.vue
+++ b/examples/sites/demos/pc/app/file-upload/picture-card.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script>
-import { FileUpload, DialogBox } from '@opentiny/vue'
+import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue'
 import { iconAddPicture } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyDialogBox: DialogBox,
+    TinyFileUpload,
+    TinyDialogBox,
     TinyIconAddPicture: iconAddPicture()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/file-upload/picture-list-composition-api.vue b/examples/sites/demos/pc/app/file-upload/picture-list-composition-api.vue
index 9bcd01ace..0b1b24941 100644
--- a/examples/sites/demos/pc/app/file-upload/picture-list-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/picture-list-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
diff --git a/examples/sites/demos/pc/app/file-upload/picture-list.vue b/examples/sites/demos/pc/app/file-upload/picture-list.vue
index a1ec40714..2583e4d27 100644
--- a/examples/sites/demos/pc/app/file-upload/picture-list.vue
+++ b/examples/sites/demos/pc/app/file-upload/picture-list.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/prevent-delete-file-composition-api.vue b/examples/sites/demos/pc/app/file-upload/prevent-delete-file-composition-api.vue
index 32f634e5c..5da0fd191 100644
--- a/examples/sites/demos/pc/app/file-upload/prevent-delete-file-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/prevent-delete-file-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -20,7 +20,7 @@ const fileList = ref([
 
 function beforeRemove(file) {
   return new Promise((resolve, reject) => {
-    Modal.confirm(`确定移除 ${file.name}？`).then((res) => {
+    TinyModal.confirm(`确定移除 ${file.name}？`).then((res) => {
       res === 'confirm' ? resolve() : reject(new Error('取消移除'))
     })
   })
diff --git a/examples/sites/demos/pc/app/file-upload/prevent-delete-file.vue b/examples/sites/demos/pc/app/file-upload/prevent-delete-file.vue
index 56d04f967..ee7047a2c 100644
--- a/examples/sites/demos/pc/app/file-upload/prevent-delete-file.vue
+++ b/examples/sites/demos/pc/app/file-upload/prevent-delete-file.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
@@ -28,7 +28,7 @@ export default {
   methods: {
     beforeRemove(file) {
       return new Promise((resolve, reject) => {
-        Modal.confirm(`确定移除 ${file.name}？`).then((res) => {
+        TinyModal.confirm(`确定移除 ${file.name}？`).then((res) => {
           res === 'confirm' ? resolve() : reject(new Error('取消移除'))
         })
       })
diff --git a/examples/sites/demos/pc/app/file-upload/prompt-tip-composition-api.vue b/examples/sites/demos/pc/app/file-upload/prompt-tip-composition-api.vue
index a3214452a..f66c06568 100644
--- a/examples/sites/demos/pc/app/file-upload/prompt-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/prompt-tip-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
diff --git a/examples/sites/demos/pc/app/file-upload/prompt-tip.vue b/examples/sites/demos/pc/app/file-upload/prompt-tip.vue
index 72aa84bc4..f594c7011 100644
--- a/examples/sites/demos/pc/app/file-upload/prompt-tip.vue
+++ b/examples/sites/demos/pc/app/file-upload/prompt-tip.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/show-download-bar-composition-api.vue b/examples/sites/demos/pc/app/file-upload/show-download-bar-composition-api.vue
index 198b079fc..04da638d8 100644
--- a/examples/sites/demos/pc/app/file-upload/show-download-bar-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/show-download-bar-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { FileUpload as TinyFileUpload, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = reactive([
@@ -47,7 +47,7 @@ const handleDownloadFile = (file) => {
           file.showDownloadBar = false
         }, 1000)
 
-        Modal.message({ message: '下载成功', status: 'success' })
+        TinyModal.message({ message: '下载成功', status: 'success' })
         return
       }
       file.downloadPercentage += 10
@@ -64,7 +64,7 @@ const handleDownloadFile = (file) => {
         // file.showDownloadBar = false
         file.downloadStatus = 'exception'
 
-        Modal.message({ message: '下载失败', status: 'error' })
+        TinyModal.message({ message: '下载失败', status: 'error' })
         return
       }
       file.downloadPercentage += 10
diff --git a/examples/sites/demos/pc/app/file-upload/show-download-bar.vue b/examples/sites/demos/pc/app/file-upload/show-download-bar.vue
index 67f28aca4..a2ed7da3e 100644
--- a/examples/sites/demos/pc/app/file-upload/show-download-bar.vue
+++ b/examples/sites/demos/pc/app/file-upload/show-download-bar.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { FileUpload, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
@@ -59,7 +59,7 @@ export default {
               file.showDownloadBar = false
             }, 1000)
 
-            Modal.message({ message: '下载成功', status: 'success' })
+            TinyModal.message({ message: '下载成功', status: 'success' })
             return
           }
           file.downloadPercentage += 10
@@ -82,7 +82,7 @@ export default {
             // 更新downloadStatus，vue3下写法
             file.downloadStatus = 'exception'
 
-            Modal.message({ message: '下载失败', status: 'error' })
+            TinyModal.message({ message: '下载失败', status: 'error' })
             return
           }
           file.downloadPercentage += 10
diff --git a/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue
index aa5b9fba1..b725db3bf 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -36,34 +36,34 @@ const fileList = ref([
 ])
 
 function handleRemove() {
-  Modal.message({ message: '触发删除文件回调事件', status: 'info' })
+  TinyModal.message({ message: '触发删除文件回调事件', status: 'info' })
 }
 
 function handlePreview(file) {
-  Modal.message({ message: file.url, status: 'info' })
+  TinyModal.message({ message: file.url, status: 'info' })
 }
 
 function progressEvent() {
-  Modal.message({ message: '文件上传时的回调 返回进程', status: 'loading' })
+  TinyModal.message({ message: '文件上传时的回调 返回进程', status: 'loading' })
 }
 
 function errorEvent() {
-  Modal.message({ message: '文件上传失败回调', status: 'error' })
+  TinyModal.message({ message: '文件上传失败回调', status: 'error' })
 }
 
 function handleExceed() {
-  Modal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' })
+  TinyModal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' })
 }
 
 function handleAvatarSuccess() {
-  Modal.message({ message: '触发上传文件成功回调事件', status: 'success' })
+  TinyModal.message({ message: '触发上传文件成功回调事件', status: 'success' })
 }
 
 function handleChange() {
-  Modal.message({ message: '触发上传文件改变回调事件', status: 'info' })
+  TinyModal.message({ message: '触发上传文件改变回调事件', status: 'info' })
 }
 
 function handleHashProgress() {
-  Modal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' })
+  TinyModal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/file-upload/upload-events.vue b/examples/sites/demos/pc/app/file-upload/upload-events.vue
index b9928bb2f..4b3ff963c 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-events.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-events.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
@@ -44,28 +44,28 @@ export default {
   },
   methods: {
     handleRemove() {
-      Modal.message({ message: '触发删除文件回调事件', status: 'info' })
+      TinyModal.message({ message: '触发删除文件回调事件', status: 'info' })
     },
     handlePreview(file) {
-      Modal.message({ message: file.url, status: 'info' })
+      TinyModal.message({ message: file.url, status: 'info' })
     },
     progressEvent() {
-      Modal.message({ message: '文件上传时的回调 返回进程', status: 'loading' })
+      TinyModal.message({ message: '文件上传时的回调 返回进程', status: 'loading' })
     },
     errorEvent() {
-      Modal.message({ message: '文件上传失败回调', status: 'error' })
+      TinyModal.message({ message: '文件上传失败回调', status: 'error' })
     },
     handleExceed() {
-      Modal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' })
+      TinyModal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' })
     },
     handleAvatarSuccess() {
-      Modal.message({ message: '触发上传文件成功回调事件', status: 'success' })
+      TinyModal.message({ message: '触发上传文件成功回调事件', status: 'success' })
     },
     handleChange() {
-      Modal.message({ message: '触发上传文件改变回调事件', status: 'info' })
+      TinyModal.message({ message: '触发上传文件改变回调事件', status: 'info' })
     },
     handleHashProgress() {
-      Modal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' })
+      TinyModal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-file-list-composition-api.vue
index 44255d515..190a715e7 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-file-list-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-file-list-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list-saas-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-file-list-saas-composition-api.vue
index d45205f7f..03f5fe54e 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-file-list-saas-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-file-list-saas-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { FileUpload as TinyFileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = reactive([
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list-saas.vue b/examples/sites/demos/pc/app/file-upload/upload-file-list-saas.vue
index 2802233f6..7985d2077 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-file-list-saas.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-file-list-saas.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload
+    TinyFileUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list-slot-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-file-list-slot-composition-api.vue
index 62a39b8e0..52d32d175 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-file-list-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-file-list-slot-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list-slot.vue b/examples/sites/demos/pc/app/file-upload/upload-file-list-slot.vue
index 661619bad..b404bcb65 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-file-list-slot.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-file-list-slot.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list-thumb-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-file-list-thumb-composition-api.vue
index f2b971547..344dc2a55 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-file-list-thumb-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-file-list-thumb-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 import { IconEditorList } from '@opentiny/vue-icon'
 
 const options = ref({
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list-thumb.vue b/examples/sites/demos/pc/app/file-upload/upload-file-list-thumb.vue
index 8d49ea2de..89464e521 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-file-list-thumb.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-file-list-thumb.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 import { IconEditorList } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list.vue b/examples/sites/demos/pc/app/file-upload/upload-file-list.vue
index 9e55b53c8..86fae5fcc 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-file-list.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-file-list.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue
index 69b8f654d..bb4541c1a 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -30,7 +30,7 @@ const headers = ref({
 })
 
 function beforeUpload() {
-  Modal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' })
+  TinyModal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' })
 
   return true
 }
diff --git a/examples/sites/demos/pc/app/file-upload/upload-request.vue b/examples/sites/demos/pc/app/file-upload/upload-request.vue
index 6a2a358e6..c6c04fa80 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-request.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-request.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { FileUpload, Button, Modal } from '@opentiny/vue'
+import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload,
+    TinyButton
   },
   data() {
     return {
@@ -38,7 +38,7 @@ export default {
   },
   methods: {
     beforeUpload() {
-      Modal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' })
+      TinyModal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' })
 
       return true
     }
diff --git a/examples/sites/demos/pc/app/file-upload/upload-user-head-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-user-head-composition-api.vue
index b64f0b26e..f5c5a9417 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-user-head-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-user-head-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'
 
 const action = ref('http://localhost:3000/api/upload')
diff --git a/examples/sites/demos/pc/app/file-upload/upload-user-head.vue b/examples/sites/demos/pc/app/file-upload/upload-user-head.vue
index a9d042361..cc4f30a86 100644
--- a/examples/sites/demos/pc/app/file-upload/upload-user-head.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-user-head.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { FileUpload } from '@opentiny/vue'
+import { TinyFileUpload } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
+    TinyFileUpload,
     IconPlus: iconPlus()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue
index 3fc8b085c..6eb9921ad 100644
--- a/examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue
@@ -22,13 +22,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput,
-  Switch as TinySwitch
-} from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput, TinySwitch } from '@opentiny/vue'
 
 const inputVal = ref('')
 const radioVal = ref('')
diff --git a/examples/sites/demos/pc/app/filter-panel/basic-usage.vue b/examples/sites/demos/pc/app/filter-panel/basic-usage.vue
index 63dac0d8d..4e62cddc3 100644
--- a/examples/sites/demos/pc/app/filter-panel/basic-usage.vue
+++ b/examples/sites/demos/pc/app/filter-panel/basic-usage.vue
@@ -21,15 +21,15 @@
 </template>
 
 <script>
-import { FilterPanel, Radio, RadioGroup, Input, Switch } from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyFilterPanel: FilterPanel,
-    TinyInput: Input,
-    TinySwitch: Switch
+    TinyRadio,
+    TinyRadioGroup,
+    TinyFilterPanel,
+    TinyInput,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/filter-panel/code-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/code-composition-api.vue
index c4b4e590c..2ffd4e742 100644
--- a/examples/sites/demos/pc/app/filter-panel/code-composition-api.vue
+++ b/examples/sites/demos/pc/app/filter-panel/code-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { FilterPanel as TinyFilterPanel, Input as TinyInput, Button as TinyButton, Tag as TinyTag } from '@opentiny/vue'
+import { TinyFilterPanel, TinyInput, TinyButton, TinyTag } from '@opentiny/vue'
 
 const tip = ref('请选择物品数量')
 const inputVal = ref('')
diff --git a/examples/sites/demos/pc/app/filter-panel/code.vue b/examples/sites/demos/pc/app/filter-panel/code.vue
index 92e2309e3..b28399fe1 100644
--- a/examples/sites/demos/pc/app/filter-panel/code.vue
+++ b/examples/sites/demos/pc/app/filter-panel/code.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script>
-import { FilterPanel, Input, Button, Tag } from '@opentiny/vue'
+import { TinyFilterPanel, TinyInput, TinyButton, TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFilterPanel: FilterPanel,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyTag: Tag
+    TinyFilterPanel,
+    TinyInput,
+    TinyButton,
+    TinyTag
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/filter-panel/event-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/event-composition-api.vue
index 752a2ef20..9fbe2ead2 100644
--- a/examples/sites/demos/pc/app/filter-panel/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/filter-panel/event-composition-api.vue
@@ -19,13 +19,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput,
-  Modal
-} from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput, TinyModal } from '@opentiny/vue'
 
 const inputVal = ref('')
 const radioVal = ref('')
@@ -39,7 +33,7 @@ function handleClear() {
 }
 
 function visibleChange(v) {
-  Modal.message({
+  TinyModal.message({
     message: `${v} visibleChange`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/filter-panel/event.vue b/examples/sites/demos/pc/app/filter-panel/event.vue
index 4d5a5ae86..b755258aa 100644
--- a/examples/sites/demos/pc/app/filter-panel/event.vue
+++ b/examples/sites/demos/pc/app/filter-panel/event.vue
@@ -18,14 +18,14 @@
 </template>
 
 <script>
-import { FilterPanel, Radio, RadioGroup, Input, Modal } from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyFilterPanel: FilterPanel,
-    TinyInput: Input
+    TinyRadio,
+    TinyRadioGroup,
+    TinyFilterPanel,
+    TinyInput
   },
   data() {
     return {
@@ -44,7 +44,7 @@ export default {
       this.inputVal = ''
     },
     visibleChange(v) {
-      Modal.message({
+      TinyModal.message({
         message: `${v} visibleChange`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/filter-panel/manual-hide-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/manual-hide-composition-api.vue
index c96bb2580..ad9a82538 100644
--- a/examples/sites/demos/pc/app/filter-panel/manual-hide-composition-api.vue
+++ b/examples/sites/demos/pc/app/filter-panel/manual-hide-composition-api.vue
@@ -14,13 +14,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput, TinyButton } from '@opentiny/vue'
 
 const inputVal = ref('')
 const radioVal = ref('')
diff --git a/examples/sites/demos/pc/app/filter-panel/manual-hide.vue b/examples/sites/demos/pc/app/filter-panel/manual-hide.vue
index a75e4444a..9d41d04a0 100644
--- a/examples/sites/demos/pc/app/filter-panel/manual-hide.vue
+++ b/examples/sites/demos/pc/app/filter-panel/manual-hide.vue
@@ -13,15 +13,15 @@
 </template>
 
 <script>
-import { FilterPanel, Radio, RadioGroup, Input, Button } from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyFilterPanel: FilterPanel,
-    TinyButton: Button,
-    TinyInput: Input
+    TinyRadio,
+    TinyRadioGroup,
+    TinyFilterPanel,
+    TinyButton,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue
index 0713a95f1..851164cbe 100644
--- a/examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue
@@ -21,12 +21,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput
-} from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput } from '@opentiny/vue'
 
 const inputVal = ref('')
 const radioVal = ref('')
diff --git a/examples/sites/demos/pc/app/filter-panel/popper-class.vue b/examples/sites/demos/pc/app/filter-panel/popper-class.vue
index 0ebb0d094..aa313b758 100644
--- a/examples/sites/demos/pc/app/filter-panel/popper-class.vue
+++ b/examples/sites/demos/pc/app/filter-panel/popper-class.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script>
-import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyFilterPanel: FilterPanel,
-    TinyInput: Input
+    TinyRadio,
+    TinyRadioGroup,
+    TinyFilterPanel,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/filter-panel/tip-composition-api.vue b/examples/sites/demos/pc/app/filter-panel/tip-composition-api.vue
index 54f1423ca..dd12a106f 100644
--- a/examples/sites/demos/pc/app/filter-panel/tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/filter-panel/tip-composition-api.vue
@@ -26,14 +26,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  FilterPanel as TinyFilterPanel,
-  Radio as TinyRadio,
-  RadioGroup as TinyRadioGroup,
-  Input as TinyInput,
-  Switch as TinySwitch,
-  Tag as TinyTag
-} from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput, TinySwitch, TinyTag } from '@opentiny/vue'
 
 const tip = ref('请选择物品数量')
 const inputVal = ref('')
diff --git a/examples/sites/demos/pc/app/filter-panel/tip.vue b/examples/sites/demos/pc/app/filter-panel/tip.vue
index 50e225eb8..7f93a2ac9 100644
--- a/examples/sites/demos/pc/app/filter-panel/tip.vue
+++ b/examples/sites/demos/pc/app/filter-panel/tip.vue
@@ -24,16 +24,16 @@
 </template>
 
 <script>
-import { FilterPanel, Radio, RadioGroup, Input, Switch, Tag } from '@opentiny/vue'
+import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput, TinySwitch, TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyFilterPanel: FilterPanel,
-    TinyInput: Input,
-    TinySwitch: Switch,
-    TinyTag: Tag
+    TinyRadio,
+    TinyRadioGroup,
+    TinyFilterPanel,
+    TinyInput,
+    TinySwitch,
+    TinyTag
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/float-button/backTop-composition-api.vue b/examples/sites/demos/pc/app/float-button/backTop-composition-api.vue
index b366e58f9..d79bcdfab 100644
--- a/examples/sites/demos/pc/app/float-button/backTop-composition-api.vue
+++ b/examples/sites/demos/pc/app/float-button/backTop-composition-api.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 import { ref } from 'vue'
 
diff --git a/examples/sites/demos/pc/app/float-button/backTop.vue b/examples/sites/demos/pc/app/float-button/backTop.vue
index b49d758a0..9c50b3ba9 100644
--- a/examples/sites/demos/pc/app/float-button/backTop.vue
+++ b/examples/sites/demos/pc/app/float-button/backTop.vue
@@ -16,7 +16,7 @@
 
 <script>
 import { iconDel } from '@opentiny/vue-icon'
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 
 export default {
   components: {
diff --git a/examples/sites/demos/pc/app/float-button/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/float-button/basic-usage-composition-api.vue
index 84fd4965d..088a70651 100644
--- a/examples/sites/demos/pc/app/float-button/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/float-button/basic-usage-composition-api.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 import { iconDel, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
 
 const IconDel = iconDel()
diff --git a/examples/sites/demos/pc/app/float-button/basic-usage.vue b/examples/sites/demos/pc/app/float-button/basic-usage.vue
index 7f0dbdca0..361f531bc 100644
--- a/examples/sites/demos/pc/app/float-button/basic-usage.vue
+++ b/examples/sites/demos/pc/app/float-button/basic-usage.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { FloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 import { IconDel, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyFloatButton: FloatButton
+    TinyFloatButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/float-button/icon-composition-api.vue b/examples/sites/demos/pc/app/float-button/icon-composition-api.vue
index 122bec927..c4594c170 100644
--- a/examples/sites/demos/pc/app/float-button/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/float-button/icon-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 
 const IconDel = iconDel()
diff --git a/examples/sites/demos/pc/app/float-button/icon.vue b/examples/sites/demos/pc/app/float-button/icon.vue
index 4f9dc3fe5..275c4b9a0 100644
--- a/examples/sites/demos/pc/app/float-button/icon.vue
+++ b/examples/sites/demos/pc/app/float-button/icon.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 
 export default {
diff --git a/examples/sites/demos/pc/app/float-button/jump-composition-api.vue b/examples/sites/demos/pc/app/float-button/jump-composition-api.vue
index 2dc52ba7d..ba7e8229f 100644
--- a/examples/sites/demos/pc/app/float-button/jump-composition-api.vue
+++ b/examples/sites/demos/pc/app/float-button/jump-composition-api.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/float-button/jump.vue b/examples/sites/demos/pc/app/float-button/jump.vue
index 577b96d28..9d19ff816 100644
--- a/examples/sites/demos/pc/app/float-button/jump.vue
+++ b/examples/sites/demos/pc/app/float-button/jump.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 
 export default {
   components: {
diff --git a/examples/sites/demos/pc/app/float-button/reset-time-composition-api.vue b/examples/sites/demos/pc/app/float-button/reset-time-composition-api.vue
index 9fff91465..27fe85152 100644
--- a/examples/sites/demos/pc/app/float-button/reset-time-composition-api.vue
+++ b/examples/sites/demos/pc/app/float-button/reset-time-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/float-button/reset-time.vue b/examples/sites/demos/pc/app/float-button/reset-time.vue
index 255c507a5..50aeca173 100644
--- a/examples/sites/demos/pc/app/float-button/reset-time.vue
+++ b/examples/sites/demos/pc/app/float-button/reset-time.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 
 export default {
   TinyFloatButton
diff --git a/examples/sites/demos/pc/app/float-button/trigger-composition-api.vue b/examples/sites/demos/pc/app/float-button/trigger-composition-api.vue
index 55bbbf2a0..1990a96a9 100644
--- a/examples/sites/demos/pc/app/float-button/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/float-button/trigger-composition-api.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 
 const IconDel = iconDel()
diff --git a/examples/sites/demos/pc/app/float-button/trigger.vue b/examples/sites/demos/pc/app/float-button/trigger.vue
index c97494cb1..7eb5ca1c3 100644
--- a/examples/sites/demos/pc/app/float-button/trigger.vue
+++ b/examples/sites/demos/pc/app/float-button/trigger.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { TinyFloatButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 
 export default {
diff --git a/examples/sites/demos/pc/app/floatbar/base-composition-api.vue b/examples/sites/demos/pc/app/floatbar/base-composition-api.vue
index 74e612641..3281e1e64 100644
--- a/examples/sites/demos/pc/app/floatbar/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/floatbar/base-composition-api.vue
@@ -13,5 +13,5 @@
 </template>
 
 <script setup lang="jsx">
-import { Floatbar as TinyFloatbar } from '@opentiny/vue'
+import { TinyFloatbar } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/floatbar/base.vue b/examples/sites/demos/pc/app/floatbar/base.vue
index 8c3219442..c40633ecd 100644
--- a/examples/sites/demos/pc/app/floatbar/base.vue
+++ b/examples/sites/demos/pc/app/floatbar/base.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="jsx">
-import { Floatbar } from '@opentiny/vue'
+import { TinyFloatbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatbar: Floatbar
+    TinyFloatbar
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/floatbar/custom-floatbar-item-composition-api.vue b/examples/sites/demos/pc/app/floatbar/custom-floatbar-item-composition-api.vue
index 129f73040..910e66119 100644
--- a/examples/sites/demos/pc/app/floatbar/custom-floatbar-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/floatbar/custom-floatbar-item-composition-api.vue
@@ -13,5 +13,5 @@
 </template>
 
 <script setup lang="jsx">
-import { Floatbar as TinyFloatbar } from '@opentiny/vue'
+import { TinyFloatbar } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/floatbar/custom-floatbar-item.vue b/examples/sites/demos/pc/app/floatbar/custom-floatbar-item.vue
index 5b6ccd34f..9bc2ee66e 100644
--- a/examples/sites/demos/pc/app/floatbar/custom-floatbar-item.vue
+++ b/examples/sites/demos/pc/app/floatbar/custom-floatbar-item.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="jsx">
-import { Floatbar } from '@opentiny/vue'
+import { TinyFloatbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatbar: Floatbar
+    TinyFloatbar
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/floatbar/custom-style-composition-api.vue b/examples/sites/demos/pc/app/floatbar/custom-style-composition-api.vue
index c3b4ca3a8..85600b143 100644
--- a/examples/sites/demos/pc/app/floatbar/custom-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/floatbar/custom-style-composition-api.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Floatbar as TinyFloatbar } from '@opentiny/vue'
+import { TinyFloatbar } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/floatbar/custom-style.vue b/examples/sites/demos/pc/app/floatbar/custom-style.vue
index 44a2e492b..0b3f77bd6 100644
--- a/examples/sites/demos/pc/app/floatbar/custom-style.vue
+++ b/examples/sites/demos/pc/app/floatbar/custom-style.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { Floatbar } from '@opentiny/vue'
+import { TinyFloatbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatbar: Floatbar
+    TinyFloatbar
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/floatbar/operation-floatbar-item-composition-api.vue b/examples/sites/demos/pc/app/floatbar/operation-floatbar-item-composition-api.vue
index 6c7e67bfd..67ba62636 100644
--- a/examples/sites/demos/pc/app/floatbar/operation-floatbar-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/floatbar/operation-floatbar-item-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Floatbar as TinyFloatbar, Button as TinyButton } from '@opentiny/vue'
+import { TinyFloatbar, TinyButton } from '@opentiny/vue'
 
 const lists = ref(['custom-A', 'custom-B', 'custom-C', 'custom-D'])
 
diff --git a/examples/sites/demos/pc/app/floatbar/operation-floatbar-item.vue b/examples/sites/demos/pc/app/floatbar/operation-floatbar-item.vue
index ea0bc8b80..483d0c029 100644
--- a/examples/sites/demos/pc/app/floatbar/operation-floatbar-item.vue
+++ b/examples/sites/demos/pc/app/floatbar/operation-floatbar-item.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { Floatbar, Button } from '@opentiny/vue'
+import { TinyFloatbar, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFloatbar: Floatbar,
-    TinyButton: Button
+    TinyFloatbar,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vue
index 4d7642ab8..9b8c1a222 100644
--- a/examples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Modal, Popover } from '@opentiny/vue'
+import { TinyModal, TinyPopover } from '@opentiny/vue'
 import Flowchart from '@opentiny/vue-flowchart'
 import { iconYes, iconPanelMini, iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
 
@@ -117,7 +117,7 @@ const HandlerList = {
     TinyIconDown: iconChevronDown(),
     TinyIconUp: iconChevronUp(),
     HandlerDropdown,
-    TinyPopover: Popover
+    TinyPopover
   },
   props: {
     params: Object
@@ -229,15 +229,15 @@ function toggleStatus() {
 }
 
 function onClickNode(_afterNode, _e) {
-  Modal.message('click-node')
+  TinyModal.message('click-node')
 }
 
 function onClickLink(_afterLink, _e) {
-  Modal.message('click-link')
+  TinyModal.message('click-link')
 }
 
 function onClickBlank(_param, _e) {
-  Modal.message('click-blank')
+  TinyModal.message('click-blank')
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/flowchart/basic-usage.vue b/examples/sites/demos/pc/app/flowchart/basic-usage.vue
index 979cc457d..1838ec174 100644
--- a/examples/sites/demos/pc/app/flowchart/basic-usage.vue
+++ b/examples/sites/demos/pc/app/flowchart/basic-usage.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { Modal, Popover } from '@opentiny/vue'
+import { TinyModal, TinyPopover } from '@opentiny/vue'
 import Flowchart from '@opentiny/vue-flowchart'
 import { hooks } from '@opentiny/vue-common'
 import { iconYes, iconPanelMini, iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
@@ -117,7 +117,7 @@ const HandlerList = {
     IconDown: iconChevronDown(),
     IconUp: iconChevronUp(),
     HandlerDropdown,
-    TinyPopover: Popover
+    TinyPopover
   },
   props: {
     params: Object
@@ -237,13 +237,13 @@ export default {
       this.$refs.chart.refresh()
     },
     onClickNode(_afterNode, _e) {
-      Modal.message('click-node')
+      TinyModal.message('click-node')
     },
     onClickLink(_afterLink, _e) {
-      Modal.message('click-link')
+      TinyModal.message('click-link')
     },
     onClickBlank(_param, _e) {
-      Modal.message('click-blank')
+      TinyModal.message('click-blank')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/fluent-editor/image-upload-composition-api.vue b/examples/sites/demos/pc/app/fluent-editor/image-upload-composition-api.vue
index 8a2595e42..e4663e725 100644
--- a/examples/sites/demos/pc/app/fluent-editor/image-upload-composition-api.vue
+++ b/examples/sites/demos/pc/app/fluent-editor/image-upload-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Modal } from '@opentiny/vue'
+import { TinyModal } from '@opentiny/vue'
 import { TinyFluentEditor } from '@opentiny/vue'
 
 const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
@@ -30,7 +30,7 @@ const imageUpload = {
     next(file.downloadUrl)
   },
   fail: (serverError) => {
-    Modal.message({
+    TinyModal.message({
       message: `上传失败回调事件：${serverError}`,
       status: 'info'
     })
diff --git a/examples/sites/demos/pc/app/fluent-editor/image-upload.vue b/examples/sites/demos/pc/app/fluent-editor/image-upload.vue
index 6b8e9397a..39d0d5ec7 100644
--- a/examples/sites/demos/pc/app/fluent-editor/image-upload.vue
+++ b/examples/sites/demos/pc/app/fluent-editor/image-upload.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { Modal } from '@opentiny/vue'
+import { TinyModal } from '@opentiny/vue'
 import { TinyFluentEditor } from '@opentiny/vue'
 
 export default {
@@ -35,7 +35,7 @@ export default {
           next(file.downloadUrl)
         },
         fail: (serverError) => {
-          Modal.message({
+          TinyModal.message({
             message: `上传失败回调事件：${serverError}`,
             status: 'info'
           })
diff --git a/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
index c4b9c79d7..a6152faac 100644
--- a/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
@@ -32,16 +32,16 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Numeric as TinyNumeric,
-  Radio as TinyRadio,
-  DatePicker as TinyDatePicker,
-  DropTimes as TinyDropTimes,
-  Tooltip as TinyTooltip,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal as TinyModal
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyDropTimes,
+  TinyTooltip,
+  TinyInput,
+  TinyButton,
+  TinyModal
 } from '@opentiny/vue'
 
 const createData = reactive({
diff --git a/examples/sites/demos/pc/app/form/basic-usage.vue b/examples/sites/demos/pc/app/form/basic-usage.vue
index faf9af61d..81412ce77 100644
--- a/examples/sites/demos/pc/app/form/basic-usage.vue
+++ b/examples/sites/demos/pc/app/form/basic-usage.vue
@@ -31,29 +31,29 @@
 
 <script>
 import {
-  Form,
-  FormItem,
-  Numeric,
-  Radio,
-  DatePicker,
-  DropTimes,
-  Tooltip,
-  Input,
-  Button,
-  Modal as TinyModal
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyDropTimes,
+  TinyTooltip,
+  TinyInput,
+  TinyButton,
+  TinyModal
 } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyDatePicker: DatePicker,
-    TinyDropTimes: DropTimes,
-    TinyTooltip: Tooltip,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyNumeric,
+    TinyRadio,
+    TinyDatePicker,
+    TinyDropTimes,
+    TinyTooltip,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
index 156f7f624..5c20174f1 100644
--- a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 const createData = reactive({
diff --git a/examples/sites/demos/pc/app/form/custom-validation-rule.vue b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
index 2e6813289..db3a8906c 100644
--- a/examples/sites/demos/pc/app/form/custom-validation-rule.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     let validatePass = (rule, value, callback) => {
diff --git a/examples/sites/demos/pc/app/form/display-only-composition-api.vue b/examples/sites/demos/pc/app/form/display-only-composition-api.vue
index a9345a074..164569826 100644
--- a/examples/sites/demos/pc/app/form/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/display-only-composition-api.vue
@@ -57,19 +57,19 @@
 <script setup>
 import { ref } from 'vue'
 import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Numeric as TinyNumeric,
-  Radio as TinyRadio,
-  DatePicker as TinyDatePicker,
-  Input as TinyInput,
-  Checkbox as TinyCheckbox,
-  CheckboxGroup as TinyCheckboxGroup,
-  Switch as TinySwitch,
-  Autocomplete as TinyAutocomplete,
-  Select as TinySelect,
-  Option as TinyOption,
-  Modal
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyInput,
+  TinyCheckbox,
+  TinyCheckboxGroup,
+  TinySwitch,
+  TinyAutocomplete,
+  TinySelect,
+  TinyOption,
+  TinyModal
 } from '@opentiny/vue'
 
 const displayOnly = ref(true)
@@ -101,11 +101,11 @@ const options = ref([
 const onPickOptions = ref({
   onPick: (val) => {
     if (val.maxDate) {
-      Modal.message({
+      TinyModal.message({
         message: '当前获取的值 maxDate' + val.maxDate,
         status: 'info'
       })
-      Modal.message({
+      TinyModal.message({
         message: '当前获取的值 minDate：' + val.minDate,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/form/display-only.vue b/examples/sites/demos/pc/app/form/display-only.vue
index 62ba1bd4e..c97f87824 100644
--- a/examples/sites/demos/pc/app/form/display-only.vue
+++ b/examples/sites/demos/pc/app/form/display-only.vue
@@ -56,35 +56,35 @@
 
 <script>
 import {
-  Form,
-  FormItem,
-  Numeric,
-  Radio,
-  DatePicker,
-  Input,
-  Checkbox,
-  CheckboxGroup,
-  Switch,
-  Autocomplete,
-  Select,
-  Option,
-  Modal
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyInput,
+  TinyCheckbox,
+  TinyCheckboxGroup,
+  TinySwitch,
+  TinyAutocomplete,
+  TinySelect,
+  TinyOption,
+  TinyModal
 } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyDatePicker: DatePicker,
-    TinyInput: Input,
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyCheckbox: Checkbox,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinySwitch: Switch,
-    TinyAutocomplete: Autocomplete
+    TinyForm,
+    TinyFormItem,
+    TinyNumeric,
+    TinyRadio,
+    TinyDatePicker,
+    TinyInput,
+    TinySelect,
+    TinyOption,
+    TinyCheckbox,
+    TinyCheckboxGroup,
+    TinySwitch,
+    TinyAutocomplete
   },
   data() {
     return {
@@ -117,11 +117,11 @@ export default {
       onPickOptions: {
         onPick: (val) => {
           if (val.maxDate) {
-            Modal.message({
+            TinyModal.message({
               message: '当前获取的值 maxDate' + val.maxDate,
               status: 'info'
             })
-            Modal.message({
+            TinyModal.message({
               message: '当前获取的值 minDate：' + val.minDate,
               status: 'info'
             })
diff --git a/examples/sites/demos/pc/app/form/error-slot-composition-api.vue b/examples/sites/demos/pc/app/form/error-slot-composition-api.vue
index e60b0f3be..22f1049a0 100644
--- a/examples/sites/demos/pc/app/form/error-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/error-slot-composition-api.vue
@@ -28,7 +28,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 import { iconError } from '@opentiny/vue-icon'
 
 const TinyIconError = iconError()
diff --git a/examples/sites/demos/pc/app/form/error-slot.vue b/examples/sites/demos/pc/app/form/error-slot.vue
index 6655dd47e..64a2945fc 100644
--- a/examples/sites/demos/pc/app/form/error-slot.vue
+++ b/examples/sites/demos/pc/app/form/error-slot.vue
@@ -27,15 +27,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 import { iconError } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
     TinyIconError: iconError()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/form/events-composition-api.vue b/examples/sites/demos/pc/app/form/events-composition-api.vue
index 7ba308387..5df3c1620 100644
--- a/examples/sites/demos/pc/app/form/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/events-composition-api.vue
@@ -16,13 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal as TinyModal
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 const createData = ref({
   name: '',
diff --git a/examples/sites/demos/pc/app/form/events.vue b/examples/sites/demos/pc/app/form/events.vue
index 85bb47213..c3f806872 100644
--- a/examples/sites/demos/pc/app/form/events.vue
+++ b/examples/sites/demos/pc/app/form/events.vue
@@ -15,14 +15,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal as TinyModal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/extra-tip-composition-api.vue b/examples/sites/demos/pc/app/form/extra-tip-composition-api.vue
index 1548f57a3..a9caef746 100644
--- a/examples/sites/demos/pc/app/form/extra-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/extra-tip-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 
 const createData = ref({
   name: '',
diff --git a/examples/sites/demos/pc/app/form/extra-tip.vue b/examples/sites/demos/pc/app/form/extra-tip.vue
index 9e333af4d..ef5d25889 100644
--- a/examples/sites/demos/pc/app/form/extra-tip.vue
+++ b/examples/sites/demos/pc/app/form/extra-tip.vue
@@ -15,14 +15,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue b/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
index 0f7edcd51..514a4b2bd 100644
--- a/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
@@ -90,28 +90,28 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Switch as TinySwitch,
-  Checkbox as TinyCheckbox,
-  Numeric as TinyNumeric,
-  Radio as TinyRadio,
-  DatePicker as TinyDatePicker,
-  DropTimes as TinyDropTimes,
-  Tooltip as TinyTooltip,
-  Input as TinyInput,
-  Button as TinyButton,
-  Autocomplete as TinyAutocomplete,
-  ButtonGroup as TinyButtonGroup,
-  Cascader as TinyCascader,
-  CheckboxGroup as TinyCheckboxGroup,
-  IpAddress as TinyIpAddress,
-  Link as TinyLink,
-  Popeditor as TinyPopeditor,
-  Select as TinySelect,
-  Option as TinyOption,
-  Slider as TinySlider,
-  TimePicker as TinyTimePicker
+  TinyForm,
+  TinyFormItem,
+  TinySwitch,
+  TinyCheckbox,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyDropTimes,
+  TinyTooltip,
+  TinyInput,
+  TinyButton,
+  TinyAutocomplete,
+  TinyButtonGroup,
+  TinyCascader,
+  TinyCheckboxGroup,
+  TinyIpAddress,
+  TinyLink,
+  TinyPopeditor,
+  TinySelect,
+  TinyOption,
+  TinySlider,
+  TinyTimePicker
 } from '@opentiny/vue'
 
 const createData = reactive({
diff --git a/examples/sites/demos/pc/app/form/form-disabled.vue b/examples/sites/demos/pc/app/form/form-disabled.vue
index d88142686..9fe11f583 100644
--- a/examples/sites/demos/pc/app/form/form-disabled.vue
+++ b/examples/sites/demos/pc/app/form/form-disabled.vue
@@ -89,54 +89,54 @@
 
 <script>
 import {
-  Form,
-  FormItem,
-  Switch,
-  Checkbox,
-  Numeric,
-  Radio,
-  DatePicker,
-  DropTimes,
-  Tooltip,
-  Input,
-  Button,
-  Autocomplete,
-  ButtonGroup,
-  Cascader,
-  CheckboxGroup,
-  IpAddress,
-  Link,
-  Popeditor,
-  Select,
-  Option,
-  Slider,
-  TimePicker
+  TinyForm,
+  TinyFormItem,
+  TinySwitch,
+  TinyCheckbox,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyDropTimes,
+  TinyTooltip,
+  TinyInput,
+  TinyButton,
+  TinyAutocomplete,
+  TinyButtonGroup,
+  TinyCascader,
+  TinyCheckboxGroup,
+  TinyIpAddress,
+  TinyLink,
+  TinyPopeditor,
+  TinySelect,
+  TinyOption,
+  TinySlider,
+  TinyTimePicker
 } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyCheckbox: Checkbox,
-    TinySwitch: Switch,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyDatePicker: DatePicker,
-    TinyDropTimes: DropTimes,
-    TinyTooltip: Tooltip,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyAutocomplete: Autocomplete,
-    TinyButtonGroup: ButtonGroup,
-    TinyCascader: Cascader,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinyIpAddress: IpAddress,
-    TinyLink: Link,
-    TinyPopeditor: Popeditor,
-    TinySelect: Select,
-    TinyOption: Option,
-    TinySlider: Slider,
-    TinyTimePicker: TimePicker
+    TinyForm,
+    TinyFormItem,
+    TinyCheckbox,
+    TinySwitch,
+    TinyNumeric,
+    TinyRadio,
+    TinyDatePicker,
+    TinyDropTimes,
+    TinyTooltip,
+    TinyInput,
+    TinyButton,
+    TinyAutocomplete,
+    TinyButtonGroup,
+    TinyCascader,
+    TinyCheckboxGroup,
+    TinyIpAddress,
+    TinyLink,
+    TinyPopeditor,
+    TinySelect,
+    TinyOption,
+    TinySlider,
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/form-in-row-composition-api.vue b/examples/sites/demos/pc/app/form/form-in-row-composition-api.vue
index 2d8ebec67..c22775153 100644
--- a/examples/sites/demos/pc/app/form/form-in-row-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-in-row-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { reactive } from 'vue'
-import { Form as TinyForm, FormItem as TinyFormItem, Numeric as TinyNumeric, Radio as TinyRadio } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyNumeric, TinyRadio } from '@opentiny/vue'
 
 const formData = reactive({
   quantity: 0,
diff --git a/examples/sites/demos/pc/app/form/form-in-row.vue b/examples/sites/demos/pc/app/form/form-in-row.vue
index 855de3182..541e66c8e 100644
--- a/examples/sites/demos/pc/app/form/form-in-row.vue
+++ b/examples/sites/demos/pc/app/form/form-in-row.vue
@@ -11,14 +11,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Numeric, Radio } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyNumeric, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio
+    TinyForm,
+    TinyFormItem,
+    TinyNumeric,
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/form-row-col-composition-api.vue b/examples/sites/demos/pc/app/form/form-row-col-composition-api.vue
index a807d80ca..10561b95f 100644
--- a/examples/sites/demos/pc/app/form/form-row-col-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-row-col-composition-api.vue
@@ -45,15 +45,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton,
-  Row as TinyRow,
-  Col as TinyCol
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyRow, TinyCol } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 const createData = reactive({
diff --git a/examples/sites/demos/pc/app/form/form-row-col.vue b/examples/sites/demos/pc/app/form/form-row-col.vue
index 715c30eea..72c3dfacd 100644
--- a/examples/sites/demos/pc/app/form/form-row-col.vue
+++ b/examples/sites/demos/pc/app/form/form-row-col.vue
@@ -44,17 +44,17 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Row, Col } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyRow,
+    TinyCol
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
index bf8334de9..7120e385c 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
@@ -21,14 +21,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyModal } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 const dateRef = ref()
@@ -65,7 +58,7 @@ async function validateField() {
   if (errArray.length > 0) {
     // empty
   } else {
-    Modal.alert('日期和url通过校验')
+    TinyModal.alert('日期和url通过校验')
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field.vue b/examples/sites/demos/pc/app/form/form-validate-field.vue
index 32421de5a..375129fa4 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field.vue
@@ -20,15 +20,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton
   },
   data() {
     return {
@@ -58,7 +58,7 @@ export default {
       if (errArray.length > 0) {
         // empty
       } else {
-        Modal.alert('日期和url通过校验')
+        TinyModal.alert('日期和url通过校验')
       }
     },
     clearValidate() {
diff --git a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
index 5ead3d49f..5b8751233 100644
--- a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
@@ -39,22 +39,22 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton,
-  Modal,
-  RadioGroup as TinyRadioGroup,
-  Numeric as TinyNumeric,
-  IpAddress as TinyIpAddress,
-  ButtonGroup as TinyButtonGroup
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyDatePicker,
+  TinyButton,
+  TinyModal,
+  TinyRadioGroup,
+  TinyNumeric,
+  TinyIpAddress,
+  TinyButtonGroup
 } from '@opentiny/vue'
 import { iconWarning } from '@opentiny/vue-icon'
 
 const ruleFormRef = ref()
 function handleClick() {
-  Modal.message({ message: 'click', status: 'info' })
+  TinyModal.message({ message: 'click', status: 'info' })
 }
 const validateIcon = ref(iconWarning())
 const validType = ref('promise')
@@ -96,9 +96,9 @@ const rules = ref({
 function handleSubmit() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      Modal.alert('回调用法：提交成功')
+      TinyModal.alert('回调用法：提交成功')
     } else {
-      Modal.alert('回调用法：提交失败')
+      TinyModal.alert('回调用法：提交失败')
     }
   })
 }
@@ -107,10 +107,10 @@ function handleSubmitPromise() {
   ruleFormRef.value
     .validate()
     .then(() => {
-      Modal.alert('promise用法:提交成功')
+      TinyModal.alert('promise用法:提交成功')
     })
     .catch(() => {
-      Modal.alert('promise用法:提交失败')
+      TinyModal.alert('promise用法:提交失败')
     })
 }
 
diff --git a/examples/sites/demos/pc/app/form/form-validation.vue b/examples/sites/demos/pc/app/form/form-validation.vue
index b5fcf74e1..9c608045f 100644
--- a/examples/sites/demos/pc/app/form/form-validation.vue
+++ b/examples/sites/demos/pc/app/form/form-validation.vue
@@ -38,30 +38,30 @@
 
 <script>
 import {
-  Form,
-  FormItem,
-  Input,
-  DatePicker,
-  Button,
-  Modal,
-  RadioGroup,
-  Numeric,
-  IpAddress,
-  ButtonGroup
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyDatePicker,
+  TinyButton,
+  TinyModal,
+  TinyRadioGroup,
+  TinyNumeric,
+  TinyIpAddress,
+  TinyButtonGroup
 } from '@opentiny/vue'
 import { iconWarning } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyRadioGroup: RadioGroup,
-    TinyNumeric: Numeric,
-    TinyIpAddress: IpAddress,
-    TinyButtonGroup: ButtonGroup
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyRadioGroup,
+    TinyNumeric,
+    TinyIpAddress,
+    TinyButtonGroup
   },
   data() {
     return {
@@ -107,9 +107,9 @@ export default {
     handleSubmit() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          Modal.alert('回调用法：提交成功')
+          TinyModal.alert('回调用法：提交成功')
         } else {
-          Modal.alert('回调用法：提交失败')
+          TinyModal.alert('回调用法：提交失败')
         }
       })
     },
@@ -117,10 +117,10 @@ export default {
       this.$refs.ruleFormRef
         .validate()
         .then(() => {
-          Modal.alert('promise用法:提交成功')
+          TinyModal.alert('promise用法:提交成功')
         })
         .catch(() => {
-          Modal.alert('promise用法:提交失败')
+          TinyModal.alert('promise用法:提交失败')
         })
     },
     clearFormValid() {
diff --git a/examples/sites/demos/pc/app/form/group-form-composition-api.vue b/examples/sites/demos/pc/app/form/group-form-composition-api.vue
index 7e1b9367f..d1cc34572 100644
--- a/examples/sites/demos/pc/app/form/group-form-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/group-form-composition-api.vue
@@ -36,14 +36,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal,
-  Radio as TinyRadio
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal, TinyRadio } from '@opentiny/vue'
 import { iconHelpCircle } from '@opentiny/vue-icon'
 
 const createData = reactive({
@@ -76,7 +69,7 @@ function handleSubmit() {
   Promise.all([validForm(groupForm1Ref), validForm(groupForm2Ref)]).then((res) => {
     const [valid1, valid2] = res
     if (valid1 && valid2) {
-      Modal.alert('提交成功！')
+      TinyModal.alert('提交成功！')
     }
   })
 }
diff --git a/examples/sites/demos/pc/app/form/group-form.vue b/examples/sites/demos/pc/app/form/group-form.vue
index 87256b6da..bed31b5cb 100644
--- a/examples/sites/demos/pc/app/form/group-form.vue
+++ b/examples/sites/demos/pc/app/form/group-form.vue
@@ -35,16 +35,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal, Radio } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal, TinyRadio } from '@opentiny/vue'
 import { IconHelpCircle } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyRadio: Radio,
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinyRadio,
     IconHelpCircle: IconHelpCircle()
   },
   data() {
@@ -75,7 +75,7 @@ export default {
       Promise.all([this.validForm(this.$refs.groupForm1Ref), this.validForm(this.$refs.groupForm2Ref)]).then((res) => {
         const [valid1, valid2] = res
         if (valid1 && valid2) {
-          Modal.alert('提交成功！')
+          TinyModal.alert('提交成功！')
         }
       })
     },
diff --git a/examples/sites/demos/pc/app/form/label-align-composition-api.vue b/examples/sites/demos/pc/app/form/label-align-composition-api.vue
index 84998b250..16551e616 100644
--- a/examples/sites/demos/pc/app/form/label-align-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/label-align-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinySwitch } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 
diff --git a/examples/sites/demos/pc/app/form/label-align.vue b/examples/sites/demos/pc/app/form/label-align.vue
index f3df876a8..64eb4d065 100644
--- a/examples/sites/demos/pc/app/form/label-align.vue
+++ b/examples/sites/demos/pc/app/form/label-align.vue
@@ -22,14 +22,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Switch } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinySwitch: Switch
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/label-position-composition-api.vue b/examples/sites/demos/pc/app/form/label-position-composition-api.vue
index dc90b8859..df3ab2ffa 100644
--- a/examples/sites/demos/pc/app/form/label-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/label-position-composition-api.vue
@@ -19,12 +19,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  ButtonGroup as TinyButtonGroup
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButtonGroup } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 
diff --git a/examples/sites/demos/pc/app/form/label-position.vue b/examples/sites/demos/pc/app/form/label-position.vue
index 54cca1a39..413a46896 100644
--- a/examples/sites/demos/pc/app/form/label-position.vue
+++ b/examples/sites/demos/pc/app/form/label-position.vue
@@ -18,14 +18,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, ButtonGroup } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButtonGroup: ButtonGroup
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/message-type-composition-api.vue b/examples/sites/demos/pc/app/form/message-type-composition-api.vue
index 5fac84bda..769bd48b6 100644
--- a/examples/sites/demos/pc/app/form/message-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/message-type-composition-api.vue
@@ -29,14 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton,
-  ButtonGroup as TinyButtonGroup
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 
diff --git a/examples/sites/demos/pc/app/form/message-type.vue b/examples/sites/demos/pc/app/form/message-type.vue
index 02065b66d..b6170f12e 100644
--- a/examples/sites/demos/pc/app/form/message-type.vue
+++ b/examples/sites/demos/pc/app/form/message-type.vue
@@ -28,16 +28,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, ButtonGroup } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyButtonGroup: ButtonGroup
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/novalid-tip-composition-api.vue b/examples/sites/demos/pc/app/form/novalid-tip-composition-api.vue
index b38b8d704..1ebf8a6f6 100644
--- a/examples/sites/demos/pc/app/form/novalid-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/novalid-tip-composition-api.vue
@@ -16,13 +16,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 const createData = reactive({
   username: '',
@@ -37,7 +31,7 @@ const ruleFormRef = ref()
 function handleSubmit() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      Modal.alert('校验通过，开始注册！')
+      TinyModal.alert('校验通过，开始注册！')
     } else {
       return false
     }
diff --git a/examples/sites/demos/pc/app/form/novalid-tip.vue b/examples/sites/demos/pc/app/form/novalid-tip.vue
index 78648c340..b36984782 100644
--- a/examples/sites/demos/pc/app/form/novalid-tip.vue
+++ b/examples/sites/demos/pc/app/form/novalid-tip.vue
@@ -15,14 +15,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
@@ -40,7 +40,7 @@ export default {
     handleSubmit() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          Modal.alert('校验通过，开始注册！')
+          TinyModal.alert('校验通过，开始注册！')
         } else {
           return false
         }
diff --git a/examples/sites/demos/pc/app/form/overflow-title-composition-api.vue b/examples/sites/demos/pc/app/form/overflow-title-composition-api.vue
index 4ca3e3121..403f43f52 100644
--- a/examples/sites/demos/pc/app/form/overflow-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/overflow-title-composition-api.vue
@@ -17,13 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Numeric as TinyNumeric,
-  Radio as TinyRadio
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyNumeric, TinyRadio } from '@opentiny/vue'
 
 const formData = ref({
   user: '',
diff --git a/examples/sites/demos/pc/app/form/overflow-title.vue b/examples/sites/demos/pc/app/form/overflow-title.vue
index 9015a5ea2..93f317bc0 100644
--- a/examples/sites/demos/pc/app/form/overflow-title.vue
+++ b/examples/sites/demos/pc/app/form/overflow-title.vue
@@ -16,15 +16,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Numeric, Radio } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyNumeric, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyNumeric,
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/popper-options-composition-api.vue b/examples/sites/demos/pc/app/form/popper-options-composition-api.vue
index f7b380562..f3c857159 100644
--- a/examples/sites/demos/pc/app/form/popper-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/popper-options-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 
 const createData = ref({
   name: '',
diff --git a/examples/sites/demos/pc/app/form/popper-options.vue b/examples/sites/demos/pc/app/form/popper-options.vue
index 228f1b2f3..ff0a702c4 100644
--- a/examples/sites/demos/pc/app/form/popper-options.vue
+++ b/examples/sites/demos/pc/app/form/popper-options.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/size-composition-api.vue b/examples/sites/demos/pc/app/form/size-composition-api.vue
index 118266b30..1c8c4e7b0 100644
--- a/examples/sites/demos/pc/app/form/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/size-composition-api.vue
@@ -33,17 +33,17 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Numeric as TinyNumeric,
-  Radio as TinyRadio,
-  DatePicker as TinyDatePicker,
-  DropTimes as TinyDropTimes,
-  Tooltip as TinyTooltip,
-  Input as TinyInput,
-  Button as TinyButton,
-  ButtonGroup as TinyButtonGroup,
-  Modal as TinyModal
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyDropTimes,
+  TinyTooltip,
+  TinyInput,
+  TinyButton,
+  TinyButtonGroup,
+  TinyModal
 } from '@opentiny/vue'
 
 const sizeList = ref([
diff --git a/examples/sites/demos/pc/app/form/size.vue b/examples/sites/demos/pc/app/form/size.vue
index f8cd426c6..adc9691a9 100644
--- a/examples/sites/demos/pc/app/form/size.vue
+++ b/examples/sites/demos/pc/app/form/size.vue
@@ -32,31 +32,31 @@
 
 <script>
 import {
-  Form,
-  FormItem,
-  Numeric,
-  Radio,
-  DatePicker,
-  DropTimes,
-  Tooltip,
-  Input,
-  Button,
-  ButtonGroup,
-  Modal as TinyModal
+  TinyForm,
+  TinyFormItem,
+  TinyNumeric,
+  TinyRadio,
+  TinyDatePicker,
+  TinyDropTimes,
+  TinyTooltip,
+  TinyInput,
+  TinyButton,
+  TinyButtonGroup,
+  TinyModal
 } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyNumeric: Numeric,
-    TinyRadio: Radio,
-    TinyDatePicker: DatePicker,
-    TinyDropTimes: DropTimes,
-    TinyTooltip: Tooltip,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyButtonGroup: ButtonGroup
+    TinyForm,
+    TinyFormItem,
+    TinyNumeric,
+    TinyRadio,
+    TinyDatePicker,
+    TinyDropTimes,
+    TinyTooltip,
+    TinyInput,
+    TinyButton,
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/slot-label-composition-api.vue b/examples/sites/demos/pc/app/form/slot-label-composition-api.vue
index ca0f7b48c..22d0e5a19 100644
--- a/examples/sites/demos/pc/app/form/slot-label-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/slot-label-composition-api.vue
@@ -28,19 +28,11 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton,
-  Modal,
-  RadioGroup as TinyRadioGroup
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyModal, TinyRadioGroup } from '@opentiny/vue'
 import { AutoTip as VAutoTip } from '@opentiny/vue-directive'
 
 function handleClick() {
-  Modal.message({ message: 'click', status: 'info' })
+  TinyModal.message({ message: 'click', status: 'info' })
 }
 
 const options = ref([
@@ -72,7 +64,7 @@ const ruleFormRef = ref()
 function handleSubmit() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      Modal.alert('提交成功')
+      TinyModal.alert('提交成功')
     }
   })
 }
diff --git a/examples/sites/demos/pc/app/form/slot-label.vue b/examples/sites/demos/pc/app/form/slot-label.vue
index f0e54726b..8ff21602b 100644
--- a/examples/sites/demos/pc/app/form/slot-label.vue
+++ b/examples/sites/demos/pc/app/form/slot-label.vue
@@ -27,17 +27,17 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyModal, TinyRadioGroup } from '@opentiny/vue'
 import { AutoTip } from '@opentiny/vue-directive'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyRadioGroup: RadioGroup
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyRadioGroup
   },
   directives: { AutoTip },
   data() {
@@ -72,7 +72,7 @@ export default {
     handleSubmit() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/pc/app/form/smb-required-composition-api.vue b/examples/sites/demos/pc/app/form/smb-required-composition-api.vue
index 829fe9c54..764ebcd65 100644
--- a/examples/sites/demos/pc/app/form/smb-required-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/smb-required-composition-api.vue
@@ -31,13 +31,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Switch as TinySwitch
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinySwitch } from '@opentiny/vue'
 
 const hideRequiredAsterisk = ref(true)
 const createData = reactive({
diff --git a/examples/sites/demos/pc/app/form/smb-required.vue b/examples/sites/demos/pc/app/form/smb-required.vue
index d118152ff..8b60173ab 100644
--- a/examples/sites/demos/pc/app/form/smb-required.vue
+++ b/examples/sites/demos/pc/app/form/smb-required.vue
@@ -30,15 +30,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Switch } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinySwitch: Switch
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue b/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
index 6fe0d5f70..614ddd21c 100644
--- a/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
@@ -17,13 +17,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 const createData = reactive({
   user1: '',
@@ -42,7 +36,7 @@ function clearFormValid() {
 function handleSubmit() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      Modal.message({ message: '提交成功', status: 'info' })
+      TinyModal.message({ message: '提交成功', status: 'info' })
     }
   })
 }
@@ -55,10 +49,10 @@ function validateUser(rule, value, callback) {
   new Promise((resolve, reject) => {
     setTimeout(() => {
       if (value && value.length > 30) {
-        Modal.message({ message: '校验成功', status: 'info' })
+        TinyModal.message({ message: '校验成功', status: 'info' })
         resolve()
       } else {
-        Modal.message({ message: '校验失败', status: 'info' })
+        TinyModal.message({ message: '校验失败', status: 'info' })
         reject(new Error('The length must be greater than 30 characters.'))
       }
     }, 300)
diff --git a/examples/sites/demos/pc/app/form/validate-debounce.vue b/examples/sites/demos/pc/app/form/validate-debounce.vue
index 8bc231d7c..a65bdbc9c 100644
--- a/examples/sites/demos/pc/app/form/validate-debounce.vue
+++ b/examples/sites/demos/pc/app/form/validate-debounce.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, Button, Modal } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
@@ -44,7 +44,7 @@ export default {
     handleSubmit() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          Modal.message({ message: '提交成功', status: 'info' })
+          TinyModal.message({ message: '提交成功', status: 'info' })
         }
       })
     },
@@ -56,10 +56,10 @@ export default {
       new Promise((resolve, reject) => {
         setTimeout(() => {
           if (value && value.length > 30) {
-            Modal.message({ message: '校验成功', status: 'info' })
+            TinyModal.message({ message: '校验成功', status: 'info' })
             resolve()
           } else {
-            Modal.message({ message: '校验失败', status: 'info' })
+            TinyModal.message({ message: '校验失败', status: 'info' })
             reject(new Error('The length must be greater than 30 characters.'))
           }
         }, 300)
diff --git a/examples/sites/demos/pc/app/form/validate-type-composition-api.vue b/examples/sites/demos/pc/app/form/validate-type-composition-api.vue
index b40db33ea..55f43d365 100644
--- a/examples/sites/demos/pc/app/form/validate-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/validate-type-composition-api.vue
@@ -22,14 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton,
-  ButtonGroup as TinyButtonGroup
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 
diff --git a/examples/sites/demos/pc/app/form/validate-type.vue b/examples/sites/demos/pc/app/form/validate-type.vue
index 0f297864c..2824927a7 100644
--- a/examples/sites/demos/pc/app/form/validate-type.vue
+++ b/examples/sites/demos/pc/app/form/validate-type.vue
@@ -21,16 +21,16 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, ButtonGroup } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton, TinyButtonGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyButtonGroup: ButtonGroup
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyButtonGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/form/validation-position-composition-api.vue b/examples/sites/demos/pc/app/form/validation-position-composition-api.vue
index 4a6787646..9037fb43c 100644
--- a/examples/sites/demos/pc/app/form/validation-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/validation-position-composition-api.vue
@@ -16,13 +16,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton } from '@opentiny/vue'
 
 const ruleFormRef = ref()
 
diff --git a/examples/sites/demos/pc/app/form/validation-position.vue b/examples/sites/demos/pc/app/form/validation-position.vue
index 1a88b1f8b..6f57bd2c6 100644
--- a/examples/sites/demos/pc/app/form/validation-position.vue
+++ b/examples/sites/demos/pc/app/form/validation-position.vue
@@ -15,15 +15,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinyInput, TinyDatePicker, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/fullscreen/before-change-composition-api.vue b/examples/sites/demos/pc/app/fullscreen/before-change-composition-api.vue
index 3548ef380..69ca6658b 100644
--- a/examples/sites/demos/pc/app/fullscreen/before-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/fullscreen/before-change-composition-api.vue
@@ -41,7 +41,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Fullscreen as TinyFullscreen, Modal } from '@opentiny/vue'
+import { TinyFullscreen, TinyModal } from '@opentiny/vue'
 
 const teleport = ref(true)
 const fullscreen = ref(false)
@@ -49,7 +49,9 @@ const pageOnly = ref(false)
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/8.jpg`)
 
 function beforeChange(done) {
-  Modal.message('全屏切换功能已被拦截，必须调用 done 方法才能执行全屏状态的切换，2s后将自动调用 done 方法切换全屏状态')
+  TinyModal.message(
+    '全屏切换功能已被拦截，必须调用 done 方法才能执行全屏状态的切换，2s后将自动调用 done 方法切换全屏状态'
+  )
   setTimeout(done, 2000)
 }
 
diff --git a/examples/sites/demos/pc/app/fullscreen/before-change.vue b/examples/sites/demos/pc/app/fullscreen/before-change.vue
index 0a0d928ee..89efe8390 100644
--- a/examples/sites/demos/pc/app/fullscreen/before-change.vue
+++ b/examples/sites/demos/pc/app/fullscreen/before-change.vue
@@ -40,12 +40,12 @@
 </template>
 
 <script>
-import { Fullscreen, Modal } from '@opentiny/vue'
+import { TinyFullscreen, TinyModal } from '@opentiny/vue'
 
 export default {
   name: 'ComponentExample',
   components: {
-    TinyFullscreen: Fullscreen
+    TinyFullscreen
   },
   data() {
     return {
@@ -57,7 +57,7 @@ export default {
   },
   methods: {
     beforeChange(done) {
-      Modal.message(
+      TinyModal.message(
         '全屏切换功能已被拦截，必须调用 done 方法才能执行全屏状态的切换，2s后将自动调用 done 方法切换全屏状态'
       )
       setTimeout(done, 2000)
diff --git a/examples/sites/demos/pc/app/fullscreen/example-api-composition-api.vue b/examples/sites/demos/pc/app/fullscreen/example-api-composition-api.vue
index 1ad97a7c7..8380cb98e 100644
--- a/examples/sites/demos/pc/app/fullscreen/example-api-composition-api.vue
+++ b/examples/sites/demos/pc/app/fullscreen/example-api-composition-api.vue
@@ -27,7 +27,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { Fullscreen } from '@opentiny/vue'
+import { TinyFullscreen } from '@opentiny/vue'
 
 const fullscreen = ref(false)
 const teleport = ref(true)
@@ -37,7 +37,7 @@ const smallImg = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bo
 const bigImg = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/book-big.jpg`)
 
 async function toggle() {
-  await Fullscreen.toggle(instance.vnode.el.querySelector('.tiny-fullscreen-wrapper'), {
+  await TinyFullscreen.toggle(instance.vnode.el.querySelector('.tiny-fullscreen-wrapper'), {
     teleport: teleport.value,
     pageOnly: pageOnly.value,
     zIndex: 999,
@@ -46,7 +46,7 @@ async function toggle() {
     }
   })
 
-  fullscreen.value = Fullscreen.isFullscreen
+  fullscreen.value = TinyFullscreen.isFullscreen
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/fullscreen/example-api.vue b/examples/sites/demos/pc/app/fullscreen/example-api.vue
index 5438c601f..57857625b 100644
--- a/examples/sites/demos/pc/app/fullscreen/example-api.vue
+++ b/examples/sites/demos/pc/app/fullscreen/example-api.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="jsx">
-import { Fullscreen } from '@opentiny/vue'
+import { TinyFullscreen } from '@opentiny/vue'
 
 export default {
   name: 'ApiExample',
@@ -41,7 +41,7 @@ export default {
   },
   methods: {
     async toggle() {
-      await Fullscreen.toggle(this.$el.querySelector('.tiny-fullscreen-wrapper'), {
+      await TinyFullscreen.toggle(this.$el.querySelector('.tiny-fullscreen-wrapper'), {
         teleport: this.teleport,
         pageOnly: this.pageOnly,
         zIndex: 999,
@@ -50,7 +50,7 @@ export default {
         }
       })
 
-      this.fullscreen = Fullscreen.isFullscreen
+      this.fullscreen = TinyFullscreen.isFullscreen
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/fullscreen/example-component-composition-api.vue b/examples/sites/demos/pc/app/fullscreen/example-component-composition-api.vue
index bb2e90929..54812b789 100644
--- a/examples/sites/demos/pc/app/fullscreen/example-component-composition-api.vue
+++ b/examples/sites/demos/pc/app/fullscreen/example-component-composition-api.vue
@@ -41,7 +41,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Fullscreen as TinyFullscreen } from '@opentiny/vue'
+import { TinyFullscreen } from '@opentiny/vue'
 
 const teleport = ref(true)
 const fullscreen = ref(false)
diff --git a/examples/sites/demos/pc/app/fullscreen/example-component.vue b/examples/sites/demos/pc/app/fullscreen/example-component.vue
index 315f89862..4c785af23 100644
--- a/examples/sites/demos/pc/app/fullscreen/example-component.vue
+++ b/examples/sites/demos/pc/app/fullscreen/example-component.vue
@@ -40,12 +40,12 @@
 </template>
 
 <script lang="jsx">
-import { Fullscreen } from '@opentiny/vue'
+import { TinyFullscreen } from '@opentiny/vue'
 
 export default {
   name: 'ComponentExample',
   components: {
-    TinyFullscreen: Fullscreen
+    TinyFullscreen
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/align/footer-align-composition-api.vue b/examples/sites/demos/pc/app/grid/align/footer-align-composition-api.vue
index de2be4e11..0b1a2c39f 100644
--- a/examples/sites/demos/pc/app/grid/align/footer-align-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/align/footer-align-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/align/footer-align.vue b/examples/sites/demos/pc/app/grid/align/footer-align.vue
index 8d27926ff..11209fde1 100644
--- a/examples/sites/demos/pc/app/grid/align/footer-align.vue
+++ b/examples/sites/demos/pc/app/grid/align/footer-align.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -94,7 +94,7 @@ export default {
           if (column.property === 'age') {
             return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
           }
-          
+
           if (column.property === 'wages') {
             return Math.floor(data.map((item) => item[column.property]).reduce((acc, item) => acc + item) / data.length)
           }
diff --git a/examples/sites/demos/pc/app/grid/align/grid-align-composition-api.vue b/examples/sites/demos/pc/app/grid/align/grid-align-composition-api.vue
index 7617efb77..ba6bb9fb6 100644
--- a/examples/sites/demos/pc/app/grid/align/grid-align-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/align/grid-align-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/align/grid-align.vue b/examples/sites/demos/pc/app/grid/align/grid-align.vue
index 3c44038c3..4b52338a8 100644
--- a/examples/sites/demos/pc/app/grid/align/grid-align.vue
+++ b/examples/sites/demos/pc/app/grid/align/grid-align.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/align/header-align-composition-api.vue b/examples/sites/demos/pc/app/grid/align/header-align-composition-api.vue
index a8cf10b03..a805ad010 100644
--- a/examples/sites/demos/pc/app/grid/align/header-align-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/align/header-align-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/align/header-align.vue b/examples/sites/demos/pc/app/grid/align/header-align.vue
index b84dbd739..054a44e93 100644
--- a/examples/sites/demos/pc/app/grid/align/header-align.vue
+++ b/examples/sites/demos/pc/app/grid/align/header-align.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/appearance-settings/grid-border-composition-api.vue b/examples/sites/demos/pc/app/grid/appearance-settings/grid-border-composition-api.vue
index 0108ebdb3..ea37a4d57 100644
--- a/examples/sites/demos/pc/app/grid/appearance-settings/grid-border-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/appearance-settings/grid-border-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/appearance-settings/grid-border.vue b/examples/sites/demos/pc/app/grid/appearance-settings/grid-border.vue
index b69165c49..f7659692a 100644
--- a/examples/sites/demos/pc/app/grid/appearance-settings/grid-border.vue
+++ b/examples/sites/demos/pc/app/grid/appearance-settings/grid-border.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/appearance-settings/stripe-composition-api.vue b/examples/sites/demos/pc/app/grid/appearance-settings/stripe-composition-api.vue
index 40bfcea0f..30c24de40 100644
--- a/examples/sites/demos/pc/app/grid/appearance-settings/stripe-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/appearance-settings/stripe-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/appearance-settings/stripe.vue b/examples/sites/demos/pc/app/grid/appearance-settings/stripe.vue
index 52443d14a..ad54636e4 100644
--- a/examples/sites/demos/pc/app/grid/appearance-settings/stripe.vue
+++ b/examples/sites/demos/pc/app/grid/appearance-settings/stripe.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
index 0ab2b5e14..bf36c18d3 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { reactive } from 'vue'
 
 const tableData = reactive([
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage-conf-composition-api.vue b/examples/sites/demos/pc/app/grid/base/basic-usage-conf-composition-api.vue
index c0ba7df8b..682528347 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage-conf-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage-conf-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 const tableData = [
   {
@@ -72,6 +72,7 @@ const tableData = [
     employees: 540
   }
 ]
+
 const op = ref({
   editConfig: {
     trigger: 'click',
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage-conf.vue b/examples/sites/demos/pc/app/grid/base/basic-usage-conf.vue
index 06aa0894e..81ad57878 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage-conf.vue
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage-conf.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Grid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid
+    TinyGrid
   },
   data() {
     const tableData = [
@@ -76,6 +76,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       op: {
         editConfig: {
diff --git a/examples/sites/demos/pc/app/grid/base/basic-usage.vue b/examples/sites/demos/pc/app/grid/base/basic-usage.vue
index 5ebfd8461..35750a203 100644
--- a/examples/sites/demos/pc/app/grid/base/basic-usage.vue
+++ b/examples/sites/demos/pc/app/grid/base/basic-usage.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const tableData = [
@@ -90,6 +90,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       op: {
         editConfig: {
diff --git a/examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue b/examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue
index 65c4a7b72..42208c380 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/cell-menu-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import { IconDel, IconCopy } from '@opentiny/vue-icon'
 
 const bodyMenus = ref([
@@ -159,14 +159,14 @@ function visibleMethod({ options, column }) {
 }
 
 function cellContextMenuEvent({ row }) {
-  Modal.message({ message: `${row.id}`, status: 'info' })
+  TinyModal.message({ message: `${row.id}`, status: 'info' })
 }
 
 function contextMenuClickEvent({ menu, row, column }) {
   switch (menu.code) {
     case 'copy':
       if (row && column) {
-        Modal.message({ message: `${row.id}`, status: 'info' })
+        TinyModal.message({ message: `${row.id}`, status: 'info' })
       }
       break
     default:
diff --git a/examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue b/examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue
index c0587339e..3c4166771 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/cell-menu.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import { IconDel, IconCopy } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -55,6 +55,7 @@ export default {
           }
         ]
       ],
+
       tableData: [
         {
           id: '1',
@@ -165,13 +166,13 @@ export default {
       return true
     },
     cellContextMenuEvent({ row }) {
-      Modal.message({ message: `${row.id}`, status: 'info' })
+      TinyModal.message({ message: `${row.id}`, status: 'info' })
     },
     contextMenuClickEvent({ menu, row, column }) {
       switch (menu.code) {
         case 'copy':
           if (row && column) {
-            Modal.message({ message: `${row.id}`, status: 'info' })
+            TinyModal.message({ message: `${row.id}`, status: 'info' })
           }
           break
         default:
diff --git a/examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue b/examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue
index 6537ed8b6..0f14bc5e1 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/footer-menu-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const bodyMenus = ref([
   [
@@ -193,11 +193,11 @@ function contextMenuClickEvent({ menu, row, column }) {
   switch (menu.code) {
     case 'copy':
       if (row && column) {
-        Modal.message({ message: `${row.id}`, status: 'info' })
+        TinyModal.message({ message: `${row.id}`, status: 'info' })
       }
       break
     default:
-      Modal.alert(`点击了 ${menu.name} 选项`)
+      TinyModal.alert(`点击了 ${menu.name} 选项`)
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue b/examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue
index 0e6027498..ce6e99614 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/footer-menu.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -52,6 +52,7 @@ export default {
           }
         ]
       ],
+
       footerMenus: [
         [
           {
@@ -68,6 +69,7 @@ export default {
           }
         ]
       ],
+
       tableData: [
         {
           id: '1',
@@ -199,11 +201,11 @@ export default {
       switch (menu.code) {
         case 'copy':
           if (row && column) {
-            Modal.message({ message: `${row.id}`, status: 'info' })
+            TinyModal.message({ message: `${row.id}`, status: 'info' })
           }
           break
         default:
-          Modal.alert(`点击了 ${menu.name} 选项`)
+          TinyModal.alert(`点击了 ${menu.name} 选项`)
       }
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue b/examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue
index 185a7fac9..037c8c846 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/header-menu-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const headerMenus = ref([
   [
@@ -150,11 +150,11 @@ function contextMenuClickEvent({ menu, row, column }) {
   switch (menu.code) {
     case 'copy':
       if (row && column) {
-        Modal.message({ message: `${row}`, status: 'info' })
+        TinyModal.message({ message: `${row}`, status: 'info' })
       }
       break
     default:
-      Modal.alert(`点击了 ${menu.name} 选项`)
+      TinyModal.alert(`点击了 ${menu.name} 选项`)
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/context-menu/header-menu.vue b/examples/sites/demos/pc/app/grid/context-menu/header-menu.vue
index 4ea23983e..31b760360 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/header-menu.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/header-menu.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -158,11 +158,11 @@ export default {
       switch (menu.code) {
         case 'copy':
           if (row && column) {
-            Modal.message({ message: `${row}`, status: 'info' })
+            TinyModal.message({ message: `${row}`, status: 'info' })
           }
           break
         default:
-          Modal.alert(`点击了 ${menu.name} 选项`)
+          TinyModal.alert(`点击了 ${menu.name} 选项`)
       }
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue b/examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue
index 86f9d76c8..27425e53f 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/menu-permissions-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import { IconCopy } from '@opentiny/vue-icon'
 
 const bodyMenus = ref([
@@ -242,18 +242,18 @@ function visibleMethod({ options, column }) {
 }
 
 function cellContextMenuEvent({ row }) {
-  Modal.message({ message: `${row.id}`, status: 'info' })
+  TinyModal.message({ message: `${row.id}`, status: 'info' })
 }
 
 function contextMenuClickEvent({ menu, row, column }) {
   switch (menu.code) {
     case 'copy':
       if (row && column) {
-        Modal.message({ message: `${row.id}`, status: 'info' })
+        TinyModal.message({ message: `${row.id}`, status: 'info' })
       }
       break
     default:
-      Modal.alert(`点击了 ${menu.name} 选项`)
+      TinyModal.alert(`点击了 ${menu.name} 选项`)
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue b/examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue
index 1cede5a04..334508ecb 100644
--- a/examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue
+++ b/examples/sites/demos/pc/app/grid/context-menu/menu-permissions.vue
@@ -24,13 +24,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import { IconCopy } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -86,6 +86,7 @@ export default {
           }
         ]
       ],
+
       footerMenus: [
         [
           {
@@ -98,6 +99,7 @@ export default {
           }
         ]
       ],
+
       headerMenus: [
         [
           {
@@ -249,17 +251,17 @@ export default {
       return true
     },
     cellContextMenuEvent({ row }) {
-      Modal.message({ message: `${row.id}`, status: 'info' })
+      TinyModal.message({ message: `${row.id}`, status: 'info' })
     },
     contextMenuClickEvent({ menu, row, column }) {
       switch (menu.code) {
         case 'copy':
           if (row && column) {
-            Modal.message({ message: `${row.id}`, status: 'info' })
+            TinyModal.message({ message: `${row.id}`, status: 'info' })
           }
           break
         default:
-          Modal.alert(`点击了 ${menu.name} 选项`)
+          TinyModal.alert(`点击了 ${menu.name} 选项`)
       }
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/custom-style/body-style-composition-api.vue b/examples/sites/demos/pc/app/grid/custom-style/body-style-composition-api.vue
index 389688107..a851e96e6 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/body-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/body-style-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom-style/body-style.vue b/examples/sites/demos/pc/app/grid/custom-style/body-style.vue
index 0ccdc6cea..a707e7c7b 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/body-style.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/body-style.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue b/examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue
index 9ad2a959b..a111b5a0d 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/class-name-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom-style/class-name.vue b/examples/sites/demos/pc/app/grid/custom-style/class-name.vue
index 56eb419f2..ef06408b6 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/class-name.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/class-name.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue b/examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue
index dc59df117..1a07f522e 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue
@@ -35,7 +35,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom-style/footer-style.vue b/examples/sites/demos/pc/app/grid/custom-style/footer-style.vue
index b686498a2..3c1928a8a 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/footer-style.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/footer-style.vue
@@ -34,12 +34,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue b/examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue
index 146e20e2c..fee1f7852 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom-style/header-style.vue b/examples/sites/demos/pc/app/grid/custom-style/header-style.vue
index f99c7c07d..a503441c7 100644
--- a/examples/sites/demos/pc/app/grid/custom-style/header-style.vue
+++ b/examples/sites/demos/pc/app/grid/custom-style/header-style.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/column-fixed-composition-api.vue
index 25a8ad7cf..c9d5a405a 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-fixed-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-fixed-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const fetchData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-fixed.vue b/examples/sites/demos/pc/app/grid/custom/column-fixed.vue
index daec37775..6c58b8423 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-fixed.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-fixed.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
@@ -67,6 +67,7 @@ export default {
           employees: 800
         }
       ]
+
       // tableData: window.MOCK_GRID_DATA.slice(5, 10)  //mock tableData数据
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/custom/column-simple-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/column-simple-composition-api.vue
index 515a94ba5..35c268632 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-simple-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-simple-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-simple.vue b/examples/sites/demos/pc/app/grid/custom/column-simple.vue
index 25d409388..1631bbc3d 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-simple.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-simple.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   methods: {
     customDisable(column) {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-sort-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/column-sort-composition-api.vue
index 63e3f9466..33f6727fe 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-sort-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-sort.vue b/examples/sites/demos/pc/app/grid/custom/column-sort.vue
index 3c57b4f56..ed8808f76 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-sort.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-sort.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-visible-hidden-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/column-visible-hidden-composition-api.vue
index 0b2e31f55..1ca71a53a 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-visible-hidden-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-visible-hidden-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-visible-hidden.vue b/examples/sites/demos/pc/app/grid/custom/column-visible-hidden.vue
index d267ccced..9ff82df57 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-visible-hidden.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-visible-hidden.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/column-width-composition-api.vue
index cc67b6e31..5bcd9a773 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-width-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom/column-width.vue b/examples/sites/demos/pc/app/grid/custom/column-width.vue
index 16d3dfb28..5c0822129 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-width.vue
+++ b/examples/sites/demos/pc/app/grid/custom/column-width.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom/hide-column-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/hide-column-composition-api.vue
index c6e82ae03..2b3dad7e6 100644
--- a/examples/sites/demos/pc/app/grid/custom/hide-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/hide-column-composition-api.vue
@@ -23,12 +23,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Button as TinyButton,
-  GridToolbar as TinyGridToolbar
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom/hide-column.vue b/examples/sites/demos/pc/app/grid/custom/hide-column.vue
index f587fddd5..3bfebc7ea 100644
--- a/examples/sites/demos/pc/app/grid/custom/hide-column.vue
+++ b/examples/sites/demos/pc/app/grid/custom/hide-column.vue
@@ -22,14 +22,14 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton,
+    TinyGridToolbar
   },
   data() {
     const tableData = [
diff --git a/examples/sites/demos/pc/app/grid/custom/multiple-column-sort-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/multiple-column-sort-composition-api.vue
index 045c74b36..c2771772f 100644
--- a/examples/sites/demos/pc/app/grid/custom/multiple-column-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/multiple-column-sort-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom/multiple-column-sort.vue b/examples/sites/demos/pc/app/grid/custom/multiple-column-sort.vue
index 8cb525016..ec9cedabd 100644
--- a/examples/sites/demos/pc/app/grid/custom/multiple-column-sort.vue
+++ b/examples/sites/demos/pc/app/grid/custom/multiple-column-sort.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom/ordercolumn-local-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/ordercolumn-local-composition-api.vue
index cf4b31611..0e3c5dd26 100644
--- a/examples/sites/demos/pc/app/grid/custom/ordercolumn-local-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/ordercolumn-local-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const tableData = ref([
@@ -71,12 +71,12 @@ const tableData = ref([
 ])
 
 const saveSetting = (settingConfigs) => {
-  Modal.alert(`点击了确认按钮${JSON.stringify(settingConfigs)}`)
+  TinyModal.alert(`点击了确认按钮${JSON.stringify(settingConfigs)}`)
 }
 const cancelSetting = (settingConfigs) => {
-  Modal.alert(`点击了取消按钮${JSON.stringify(settingConfigs)}`)
+  TinyModal.alert(`点击了取消按钮${JSON.stringify(settingConfigs)}`)
 }
 const resetSetting = () => {
-  Modal.alert('点击了重置按钮')
+  TinyModal.alert('点击了重置按钮')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/custom/ordercolumn-local.vue b/examples/sites/demos/pc/app/grid/custom/ordercolumn-local.vue
index 37de3e85f..439ebbbae 100644
--- a/examples/sites/demos/pc/app/grid/custom/ordercolumn-local.vue
+++ b/examples/sites/demos/pc/app/grid/custom/ordercolumn-local.vue
@@ -21,24 +21,24 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   methods: {
     saveSetting(settingConfigs) {
-      Modal.alert(`点击了确认按钮${JSON.stringify(settingConfigs)}`)
+      TinyModal.alert(`点击了确认按钮${JSON.stringify(settingConfigs)}`)
     },
     cancelSetting(settingConfigs) {
-      Modal.alert(`点击了取消按钮${JSON.stringify(settingConfigs)}`)
+      TinyModal.alert(`点击了取消按钮${JSON.stringify(settingConfigs)}`)
     },
     resetSetting() {
-      Modal.alert('点击了重置按钮')
+      TinyModal.alert('点击了重置按钮')
     }
   },
   data() {
diff --git a/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue
index 7b7e65795..dc13559a2 100644
--- a/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue
@@ -20,12 +20,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 import Sortable from 'sortablejs'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 3,
diff --git a/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue b/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue
index 616c9335d..5c14a2405 100644
--- a/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue
+++ b/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue
@@ -19,21 +19,21 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
       Sortable,
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 3,
diff --git a/examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue
index 9bd5ea1e5..3fd1e0f13 100644
--- a/examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue
@@ -15,10 +15,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/custom/page-size.vue b/examples/sites/demos/pc/app/grid/custom/page-size.vue
index 60df10bf4..339fff3cd 100644
--- a/examples/sites/demos/pc/app/grid/custom/page-size.vue
+++ b/examples/sites/demos/pc/app/grid/custom/page-size.vue
@@ -14,18 +14,18 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/custom/prsonalized-drag-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/prsonalized-drag-composition-api.vue
index 8ba2896a1..c18467049 100644
--- a/examples/sites/demos/pc/app/grid/custom/prsonalized-drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/prsonalized-drag-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const setting = ref({
diff --git a/examples/sites/demos/pc/app/grid/custom/prsonalized-drag.vue b/examples/sites/demos/pc/app/grid/custom/prsonalized-drag.vue
index 3192a6145..f3cadfb32 100644
--- a/examples/sites/demos/pc/app/grid/custom/prsonalized-drag.vue
+++ b/examples/sites/demos/pc/app/grid/custom/prsonalized-drag.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   methods: {
     onBeforeMove() {
diff --git a/examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue
index fa3ad9b62..06b0a85ba 100644
--- a/examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue
@@ -19,11 +19,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/custom/reset-method.vue b/examples/sites/demos/pc/app/grid/custom/reset-method.vue
index 88c65e134..e59facb3e 100644
--- a/examples/sites/demos/pc/app/grid/custom/reset-method.vue
+++ b/examples/sites/demos/pc/app/grid/custom/reset-method.vue
@@ -18,14 +18,14 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   methods: {
     resetMethod() {
@@ -59,7 +59,7 @@ export default {
     return {
       Sortable,
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/custom/reset-resizable-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/reset-resizable-composition-api.vue
index 507ee4485..b52ae2c58 100644
--- a/examples/sites/demos/pc/app/grid/custom/reset-resizable-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/reset-resizable-composition-api.vue
@@ -17,12 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  GridToolbar as TinyGridToolbar,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/custom/reset-resizable.vue b/examples/sites/demos/pc/app/grid/custom/reset-resizable.vue
index 806755d83..4986a87a3 100644
--- a/examples/sites/demos/pc/app/grid/custom/reset-resizable.vue
+++ b/examples/sites/demos/pc/app/grid/custom/reset-resizable.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue
index e07554207..0a280f03b 100644
--- a/examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue
@@ -20,10 +20,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 3,
diff --git a/examples/sites/demos/pc/app/grid/custom/server-storage.vue b/examples/sites/demos/pc/app/grid/custom/server-storage.vue
index ddda31cd2..a95cccfde 100644
--- a/examples/sites/demos/pc/app/grid/custom/server-storage.vue
+++ b/examples/sites/demos/pc/app/grid/custom/server-storage.vue
@@ -19,18 +19,18 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 3,
diff --git a/examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue
index 2c5b72eb4..981e6573e 100644
--- a/examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue
@@ -15,10 +15,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/custom/sort-type.vue b/examples/sites/demos/pc/app/grid/custom/sort-type.vue
index 3b7a3bd03..ddec3aedc 100644
--- a/examples/sites/demos/pc/app/grid/custom/sort-type.vue
+++ b/examples/sites/demos/pc/app/grid/custom/sort-type.vue
@@ -14,18 +14,18 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue
index 034f5484d..47f7fe63f 100644
--- a/examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue
@@ -12,10 +12,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/data-source/auto-load.vue b/examples/sites/demos/pc/app/grid/data-source/auto-load.vue
index bedc150be..86bff075c 100644
--- a/examples/sites/demos/pc/app/grid/data-source/auto-load.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/auto-load.vue
@@ -11,17 +11,17 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue
index 75aebe96c..eebe6d1a7 100644
--- a/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue
@@ -15,10 +15,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue b/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue
index ca89725ff..fe25c794b 100644
--- a/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue
@@ -14,17 +14,17 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue
index 34ba44014..4047cd00c 100644
--- a/examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/columns-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/data-source/columns.vue b/examples/sites/demos/pc/app/grid/data-source/columns.vue
index d5df4d3ee..b72ba3521 100644
--- a/examples/sites/demos/pc/app/grid/data-source/columns.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/columns.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Grid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid
+    TinyGrid
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue
index a07b4bcd5..1176d1a8f 100644
--- a/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue
@@ -14,10 +14,10 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue b/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue
index f3504c0ae..8d15da7d6 100644
--- a/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue
@@ -13,17 +13,17 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue
index fc3b67cfa..fab71bbf2 100644
--- a/examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue
@@ -14,11 +14,11 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
 
 const prefetchArgs = ref([{ property: 'name', sort: 'desc' }])
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/data-source/request-service.vue b/examples/sites/demos/pc/app/grid/data-source/request-service.vue
index d46d3cc1b..6231bfa97 100644
--- a/examples/sites/demos/pc/app/grid/data-source/request-service.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/request-service.vue
@@ -13,19 +13,19 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyButton: Button,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyButton,
+    TinyGridColumn
   },
   data() {
     return {
       prefetchArgs: [{ property: 'name', sort: 'desc' }],
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/data-source/static-data-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/static-data-composition-api.vue
index 21e6c48ba..22130eea2 100644
--- a/examples/sites/demos/pc/app/grid/data-source/static-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/static-data-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/data-source/static-data.vue b/examples/sites/demos/pc/app/grid/data-source/static-data.vue
index cb81334a7..cc17826c7 100644
--- a/examples/sites/demos/pc/app/grid/data-source/static-data.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/static-data.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   methods: {
     addRow() {
diff --git a/examples/sites/demos/pc/app/grid/drag/column-drag-composition-api.vue b/examples/sites/demos/pc/app/grid/drag/column-drag-composition-api.vue
index adf350d12..c1bda283a 100644
--- a/examples/sites/demos/pc/app/grid/drag/column-drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/drag/column-drag-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const dropConfig = ref({
@@ -85,14 +85,14 @@ const tableData = ref([
 ])
 
 function columnDropStart() {
-  Modal.message({ message: '列拖拽开始', status: 'info' })
+  TinyModal.message({ message: '列拖拽开始', status: 'info' })
 }
 
 function columnDropEnd() {
-  Modal.message({ message: '列拖拽结束', status: 'info' })
+  TinyModal.message({ message: '列拖拽结束', status: 'info' })
 }
 
 function columnDropMove() {
-  Modal.message({ message: '列拖拽移动', status: 'info' })
+  TinyModal.message({ message: '列拖拽移动', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/drag/column-drag.vue b/examples/sites/demos/pc/app/grid/drag/column-drag.vue
index 13740e603..a50825886 100644
--- a/examples/sites/demos/pc/app/grid/drag/column-drag.vue
+++ b/examples/sites/demos/pc/app/grid/drag/column-drag.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -93,13 +93,13 @@ export default {
   },
   methods: {
     columnDropStart() {
-      Modal.message({ message: '列拖拽开始', status: 'info' })
+      TinyModal.message({ message: '列拖拽开始', status: 'info' })
     },
     columnDropEnd() {
-      Modal.message({ message: '列拖拽结束', status: 'info' })
+      TinyModal.message({ message: '列拖拽结束', status: 'info' })
     },
     columnDropMove() {
-      Modal.message({ message: '列拖拽移动', status: 'info' })
+      TinyModal.message({ message: '列拖拽移动', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/drag/multi-header-drag-composition-api.vue b/examples/sites/demos/pc/app/grid/drag/multi-header-drag-composition-api.vue
index 49e0208c3..d1e40aa7f 100644
--- a/examples/sites/demos/pc/app/grid/drag/multi-header-drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/drag/multi-header-drag-composition-api.vue
@@ -99,7 +99,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const dropConfig = ref({
   // 在设置 scheme 标志位 v2 时，列拖拽使用新方案。不影响行拖拽使用 sortablejs
@@ -141,10 +141,10 @@ const tableData = ref([
 ])
 
 function columnDragStart() {
-  Modal.message({ message: '列拖拽开始', status: 'info' })
+  TinyModal.message({ message: '列拖拽开始', status: 'info' })
 }
 function columnDrop() {
-  Modal.message({ message: '列拖拽结束', status: 'info' })
+  TinyModal.message({ message: '列拖拽结束', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/grid/drag/multi-header-drag.vue b/examples/sites/demos/pc/app/grid/drag/multi-header-drag.vue
index 9c77c5ae0..e429ab017 100644
--- a/examples/sites/demos/pc/app/grid/drag/multi-header-drag.vue
+++ b/examples/sites/demos/pc/app/grid/drag/multi-header-drag.vue
@@ -98,12 +98,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -149,10 +149,10 @@ export default {
   },
   methods: {
     columnDragStart() {
-      Modal.message({ message: '列拖拽开始', status: 'info' })
+      TinyModal.message({ message: '列拖拽开始', status: 'info' })
     },
     columnDrop() {
-      Modal.message({ message: '列拖拽结束', status: 'info' })
+      TinyModal.message({ message: '列拖拽结束', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag-composition-api.vue b/examples/sites/demos/pc/app/grid/drag/row-drag-composition-api.vue
index 8cc0402c4..7038c910e 100644
--- a/examples/sites/demos/pc/app/grid/drag/row-drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/drag/row-drag-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const dropConfig = ref({
@@ -87,14 +87,14 @@ const tableData = ref([
 ])
 
 function rowDropStart() {
-  Modal.message({ message: '行拖拽开始', status: 'info' })
+  TinyModal.message({ message: '行拖拽开始', status: 'info' })
 }
 
 function rowDropEnd() {
-  Modal.message({ message: '行拖拽结束', status: 'info' })
+  TinyModal.message({ message: '行拖拽结束', status: 'info' })
 }
 
 function rowDropMove() {
-  Modal.message({ message: '行拖拽移动', status: 'info' })
+  TinyModal.message({ message: '行拖拽移动', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue b/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue
index f00c64e5d..4d2ed06a6 100644
--- a/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const dropConfig = {
diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue b/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue
index bdd875ec4..ece0c0069 100644
--- a/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue
+++ b/examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag.vue b/examples/sites/demos/pc/app/grid/drag/row-drag.vue
index 615a33b0b..aa01ef463 100644
--- a/examples/sites/demos/pc/app/grid/drag/row-drag.vue
+++ b/examples/sites/demos/pc/app/grid/drag/row-drag.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -95,13 +95,13 @@ export default {
   },
   methods: {
     rowDropStart() {
-      Modal.message({ message: '行拖拽开始', status: 'info' })
+      TinyModal.message({ message: '行拖拽开始', status: 'info' })
     },
     rowDropEnd() {
-      Modal.message({ message: '行拖拽结束', status: 'info' })
+      TinyModal.message({ message: '行拖拽结束', status: 'info' })
     },
     rowDropMove() {
-      Modal.message({ message: '行拖拽移动', status: 'info' })
+      TinyModal.message({ message: '行拖拽移动', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll-composition-api.vue
index a2cdfa035..eee1eff5c 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll-composition-api.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const flag = ref(false)
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll.vue
index 606700043..5bd60f9c5 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/column-switching-scroll.vue
@@ -48,13 +48,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButton,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic-composition-api.vue
index 3ed0641be..3e1489fa9 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const fetchData = ref({ api: getData })
 const tableColumnList = ref([])
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic.vue
index 0cbeb66eb..2d95ebd4d 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot-composition-api.vue
index 0e0ec56d1..e8d0f5563 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 let times = 1
 
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue
index 961eea271..f0a2ccdb2 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 let times = 1
 
@@ -40,11 +40,12 @@ const createNewCols = () => [
     }
   }
 ]
+
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   methods: {
     change() {
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
index db30f049a..d0acfe321 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
@@ -29,10 +29,10 @@
 
 <script setup lang="jsx">
 import { ref, onMounted } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, DatePicker as TinyDatePicker, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyDatePicker, TinyPager } from '@opentiny/vue'
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
index 21dc5488d..dbb4a383f 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
@@ -28,18 +28,18 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, DatePicker, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyDatePicker, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyDatePicker: DatePicker
+    TinyGrid,
+    TinyGridColumn,
+    TinyDatePicker
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue
index 45972fc93..8bc2d3ccb 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const cols = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue
index e518924dd..69d8fb795 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButton,
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     change() {
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row-composition-api.vue
index a39f748b1..3bce0777b 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyButton } from '@opentiny/vue'
 
 const columns = [
   { field: 'name', title: '名称' },
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row.vue
index 6081fbf76..22ca649aa 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, Button } from '@opentiny/vue'
+import { TinyGrid, TinyButton } from '@opentiny/vue'
 
 const columns = [
   { field: 'name', title: '名称' },
@@ -112,8 +112,8 @@ const data = [
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyButton: Button
+    TinyGrid,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/edit/custom-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/custom-editing-composition-api.vue
index aaed4ca73..fedbf8dbb 100644
--- a/examples/sites/demos/pc/app/grid/edit/custom-editing-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/custom-editing-composition-api.vue
@@ -42,7 +42,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
diff --git a/examples/sites/demos/pc/app/grid/edit/custom-editing.vue b/examples/sites/demos/pc/app/grid/edit/custom-editing.vue
index f8b1a85c4..a6dafcdee 100644
--- a/examples/sites/demos/pc/app/grid/edit/custom-editing.vue
+++ b/examples/sites/demos/pc/app/grid/edit/custom-editing.vue
@@ -41,12 +41,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue
index ebd130e6d..cc08211f6 100644
--- a/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue
@@ -61,7 +61,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
diff --git a/examples/sites/demos/pc/app/grid/edit/editing.vue b/examples/sites/demos/pc/app/grid/edit/editing.vue
index ee7041c77..8f939ff1c 100644
--- a/examples/sites/demos/pc/app/grid/edit/editing.vue
+++ b/examples/sites/demos/pc/app/grid/edit/editing.vue
@@ -60,12 +60,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/edit/editor-is-valid-always-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/editor-is-valid-always-composition-api.vue
index 89467f5ed..2ceb76dca 100644
--- a/examples/sites/demos/pc/app/grid/edit/editor-is-valid-always-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/editor-is-valid-always-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/edit/editor-is-valid-always.vue b/examples/sites/demos/pc/app/grid/edit/editor-is-valid-always.vue
index 148ef6099..a69b7f845 100644
--- a/examples/sites/demos/pc/app/grid/edit/editor-is-valid-always.vue
+++ b/examples/sites/demos/pc/app/grid/edit/editor-is-valid-always.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const validRules = {
diff --git a/examples/sites/demos/pc/app/grid/edit/grid-equals-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/grid-equals-composition-api.vue
index 7d61a261b..3bfe99580 100644
--- a/examples/sites/demos/pc/app/grid/edit/grid-equals-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/grid-equals-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/edit/grid-equals.vue b/examples/sites/demos/pc/app/grid/edit/grid-equals.vue
index 59f44f830..13b2a4a41 100644
--- a/examples/sites/demos/pc/app/grid/edit/grid-equals.vue
+++ b/examples/sites/demos/pc/app/grid/edit/grid-equals.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     employeesEquals({ value, originalValue }) {
diff --git a/examples/sites/demos/pc/app/grid/edit/has-row-change-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/has-row-change-composition-api.vue
index 56724598d..9950d7e81 100644
--- a/examples/sites/demos/pc/app/grid/edit/has-row-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/has-row-change-composition-api.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyModal } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
@@ -86,9 +86,9 @@ const changeGridRef = ref()
 function handleSave(row) {
   changeGridRef.value.clearActived().then(() => {
     if (!changeGridRef.value.hasRowChange(row)) {
-      Modal.alert('当前数据未改变！')
+      TinyModal.alert('当前数据未改变！')
     } else {
-      Modal.alert('保存成功！')
+      TinyModal.alert('保存成功！')
     }
   })
 }
diff --git a/examples/sites/demos/pc/app/grid/edit/has-row-change.vue b/examples/sites/demos/pc/app/grid/edit/has-row-change.vue
index 6ebd68a39..f4fb8f671 100644
--- a/examples/sites/demos/pc/app/grid/edit/has-row-change.vue
+++ b/examples/sites/demos/pc/app/grid/edit/has-row-change.vue
@@ -29,13 +29,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
@@ -94,9 +94,9 @@ export default {
     handleSave(row) {
       this.$refs.changeGrid.clearActived().then(() => {
         if (!this.$refs.changeGrid.hasRowChange(row)) {
-          Modal.alert('当前数据未改变！')
+          TinyModal.alert('当前数据未改变！')
         } else {
-          Modal.alert('保存成功！')
+          TinyModal.alert('保存成功！')
         }
       })
     }
diff --git a/examples/sites/demos/pc/app/grid/edit/revert-data-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/revert-data-composition-api.vue
index 3787acb66..9457e18d9 100644
--- a/examples/sites/demos/pc/app/grid/edit/revert-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/revert-data-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
diff --git a/examples/sites/demos/pc/app/grid/edit/revert-data.vue b/examples/sites/demos/pc/app/grid/edit/revert-data.vue
index b9ff013ad..697d991a1 100644
--- a/examples/sites/demos/pc/app/grid/edit/revert-data.vue
+++ b/examples/sites/demos/pc/app/grid/edit/revert-data.vue
@@ -32,13 +32,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
index 229975faf..f7d946e1d 100644
--- a/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
@@ -48,7 +48,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButotn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton as TinyButotn } from '@opentiny/vue'
 
 const insertGrid = ref('insertGrid')
 
diff --git a/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue b/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue
index f30f84c78..613d0f3eb 100644
--- a/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue
+++ b/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue
@@ -47,13 +47,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButotn: Button,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButotn: TinyButton,
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     addRow() {
diff --git a/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing-composition-api.vue
index b7baa711c..4aa1dab2e 100644
--- a/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing-composition-api.vue
@@ -39,7 +39,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
diff --git a/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.vue b/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.vue
index a03a03e83..e8866e84d 100644
--- a/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.vue
+++ b/examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.vue
@@ -38,12 +38,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue
index b3639865e..59b62106b 100644
--- a/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue
@@ -39,7 +39,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const activedRow = ref('')
 const options = ref([
diff --git a/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue b/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue
index 0ce979ba0..5b4e52144 100644
--- a/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue
+++ b/examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue
@@ -38,13 +38,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButton,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue
index fcccab240..bae3d19c7 100644
--- a/examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/active-strictly-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
diff --git a/examples/sites/demos/pc/app/grid/editor/active-strictly.vue b/examples/sites/demos/pc/app/grid/editor/active-strictly.vue
index 0553c711e..92a2f9c21 100644
--- a/examples/sites/demos/pc/app/grid/editor/active-strictly.vue
+++ b/examples/sites/demos/pc/app/grid/editor/active-strictly.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/editor/custom-edit-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/custom-edit-composition-api.vue
index 9dd7a7c7d..efc289471 100644
--- a/examples/sites/demos/pc/app/grid/editor/custom-edit-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/custom-edit-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input, Select, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinySelect, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
@@ -87,7 +87,7 @@ const tableData = ref([
 function renderInput(field) {
   return (h, { row }) =>
     row.editing
-      ? h(Input, {
+      ? h(TinyInput, {
           props: { modelValue: row[field] },
           on: { 'update:modelValue': (value) => (row[field] = value) }
         })
@@ -97,7 +97,7 @@ function renderInput(field) {
 function renderSelect(field) {
   return (h, { row }) =>
     row.editing
-      ? h(Select, {
+      ? h(TinySelect, {
           props: { modelValue: row[field], options: options.value, textField: 'label', valueField: 'value' },
           on: { 'update:modelValue': (value) => (row[field] = value) }
         })
diff --git a/examples/sites/demos/pc/app/grid/editor/custom-edit.vue b/examples/sites/demos/pc/app/grid/editor/custom-edit.vue
index f4f82bb19..d28ea2e27 100644
--- a/examples/sites/demos/pc/app/grid/editor/custom-edit.vue
+++ b/examples/sites/demos/pc/app/grid/editor/custom-edit.vue
@@ -25,19 +25,19 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Input, Select, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinySelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   methods: {
     renderInput(field) {
       return (h, { row }) =>
         row.editing
-          ? h(Input, {
+          ? h(TinyInput, {
               props: { modelValue: row[field] },
               on: { 'update:modelValue': (value) => (row[field] = value) }
             })
@@ -46,7 +46,7 @@ export default {
     renderSelect(field) {
       return (h, { row }) =>
         row.editing
-          ? h(Select, {
+          ? h(TinySelect, {
               props: { modelValue: row[field], options: this.options, textField: 'label', valueField: 'value' },
               on: { 'update:modelValue': (value) => (row[field] = value) }
             })
diff --git a/examples/sites/demos/pc/app/grid/editor/custom-editor-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/custom-editor-composition-api.vue
index bf3b6e221..ba9f7629d 100644
--- a/examples/sites/demos/pc/app/grid/editor/custom-editor-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/custom-editor-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const CustomInputDefault = {
   inheritAttrs: false,
diff --git a/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue
index 044d69cfc..5e1448b32 100644
--- a/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/custom-editor-select-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Select } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'
 
 const options = ref([
   { name: '华中区', id: '1' },
diff --git a/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue b/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue
index 6956d20fc..0bf651332 100644
--- a/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue
+++ b/examples/sites/demos/pc/app/grid/editor/custom-editor-select.vue
@@ -33,16 +33,16 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Select } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      Select,
+      TinySelect,
       options: [
         { name: '华中区', id: '1' },
         { name: '华东区', id: '2' },
diff --git a/examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue
index d1f30a37b..89a6d952f 100644
--- a/examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/editor-bg-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
diff --git a/examples/sites/demos/pc/app/grid/editor/editor-bg.vue b/examples/sites/demos/pc/app/grid/editor/editor-bg.vue
index 162951b66..242e7087a 100644
--- a/examples/sites/demos/pc/app/grid/editor/editor-bg.vue
+++ b/examples/sites/demos/pc/app/grid/editor/editor-bg.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/editor/inner-editor-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/inner-editor-composition-api.vue
index eed34256c..02def1d3c 100644
--- a/examples/sites/demos/pc/app/grid/editor/inner-editor-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/inner-editor-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const options = ref([
   { label: '华中区', value: '华中区' },
@@ -135,10 +135,10 @@ const tableData = ref([
 ])
 
 function change() {
-  Modal.message({ message: 'change:', status: 'info' })
+  TinyModal.message({ message: 'change:', status: 'info' })
 }
 
 function input() {
-  Modal.message({ message: 'input:', status: 'info' })
+  TinyModal.message({ message: 'input:', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/editor/inner-editor.vue b/examples/sites/demos/pc/app/grid/editor/inner-editor.vue
index bbe2e190b..ac2da841f 100644
--- a/examples/sites/demos/pc/app/grid/editor/inner-editor.vue
+++ b/examples/sites/demos/pc/app/grid/editor/inner-editor.vue
@@ -32,12 +32,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -143,10 +143,10 @@ export default {
   },
   methods: {
     change() {
-      Modal.message({ message: 'change:', status: 'info' })
+      TinyModal.message({ message: 'change:', status: 'info' })
     },
     input() {
-      Modal.message({ message: 'input:', status: 'info' })
+      TinyModal.message({ message: 'input:', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue
index e07e62270..b2affaae0 100644
--- a/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/mutil-render-composition-api.vue
@@ -38,7 +38,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Select } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'
 
 const options = ref([
   { name: '华中区', id: '1' },
diff --git a/examples/sites/demos/pc/app/grid/editor/mutil-render.vue b/examples/sites/demos/pc/app/grid/editor/mutil-render.vue
index 677864aab..046d58898 100644
--- a/examples/sites/demos/pc/app/grid/editor/mutil-render.vue
+++ b/examples/sites/demos/pc/app/grid/editor/mutil-render.vue
@@ -37,16 +37,16 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Select } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      Select,
+      TinySelect,
       options: [
         { name: '华中区', id: '1' },
         { name: '华东区', id: '2' },
diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
index 033803b77..f402e449e 100644
--- a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup lang="jsx">
 import { ref, onMounted } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Popeditor } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPopeditor } from '@opentiny/vue'
 
 const popeditOptions = ref([])
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
index 9903da43a..0cc751b2a 100644
--- a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
+++ b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
@@ -28,16 +28,16 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Popeditor } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      Popeditor,
+      TinyPopeditor,
       popeditOptions: [],
       tableData: [
         {
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue
index d98c1b2a5..0baea6538 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { reactive } from 'vue'
 
 const tableData = reactive([])
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue
index ba6c1bb60..9822ecbb6 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   setup() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-iscenter-composition-api.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-iscenter-composition-api.vue
index 751d685a5..9cebc9bb8 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-iscenter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-iscenter-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([])
 </script>
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-iscenter.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-iscenter.vue
index 4d8e5afa5..da5ee545e 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-iscenter.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-iscenter.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
index d36bbbaae..cdcbb38de 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([])
 
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
index 1398109e9..2d7bfc1a8 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     renderEmpty() {
diff --git a/examples/sites/demos/pc/app/grid/event/cell-mouse-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/cell-mouse-event-composition-api.vue
index c8a342fd2..f85f5402a 100644
--- a/examples/sites/demos/pc/app/grid/event/cell-mouse-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/cell-mouse-event-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -60,14 +60,14 @@ const tableData = ref([
 ])
 
 const cellMouseenterEvent = ({ column }) => {
-  Modal.message({
+  TinyModal.message({
     message: `鼠标进入单元格${column.title}`,
     status: 'info'
   })
 }
 
 const cellMouseleaveEvent = ({ column }) => {
-  Modal.message({
+  TinyModal.message({
     message: `鼠标离开单元格${column.title}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/cell-mouse-event.vue b/examples/sites/demos/pc/app/grid/event/cell-mouse-event.vue
index 0b8684475..86ab2f204 100644
--- a/examples/sites/demos/pc/app/grid/event/cell-mouse-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/cell-mouse-event.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -68,13 +68,13 @@ export default {
   },
   methods: {
     cellMouseenterEvent({ column }) {
-      Modal.message({
+      TinyModal.message({
         message: `鼠标进入单元格${column.title}`,
         status: 'info'
       })
     },
     cellMouseleaveEvent({ column }) {
-      Modal.message({
+      TinyModal.message({
         message: `鼠标离开单元格${column.title}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue
index b4d746b23..b6ba51748 100644
--- a/examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -119,33 +119,33 @@ const tableData = ref([
 ])
 
 const headerCellClickEvent = ({ column }) => {
-  Modal.message({
+  TinyModal.message({
     message: `表头点击${column.title}`,
     status: 'info'
   })
 }
 
 const cellClickEvent = ({ column }) => {
-  Modal.message({ message: `单元格点击${column.title}`, status: 'info' })
+  TinyModal.message({ message: `单元格点击${column.title}`, status: 'info' })
 }
 
 const cellDBLClickEvent = ({ column }) => {
-  Modal.message({ message: `单元格双击${column.title}`, status: 'info' })
+  TinyModal.message({ message: `单元格双击${column.title}`, status: 'info' })
 }
 
 const headerCellDBLClickEvent = ({ column }) => {
-  Modal.message({
+  TinyModal.message({
     message: `表头双击${column.title}`,
     status: 'info'
   })
 }
 
 const footerClick = ({ columnIndex }) => {
-  Modal.message({ message: `${columnIndex}`, status: 'info' })
+  TinyModal.message({ message: `${columnIndex}`, status: 'info' })
 }
 
 const footerCellDbClick = () => {
-  Modal.alert('触发表尾双击点击事件')
+  TinyModal.alert('触发表尾双击点击事件')
 }
 
 const footerMethod = ({ columns, data }) => {
diff --git a/examples/sites/demos/pc/app/grid/event/click-event.vue b/examples/sites/demos/pc/app/grid/event/click-event.vue
index ea61d26bf..e9de82ba1 100644
--- a/examples/sites/demos/pc/app/grid/event/click-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/click-event.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -127,28 +127,28 @@ export default {
   },
   methods: {
     headerCellClickEvent({ column }) {
-      Modal.message({
+      TinyModal.message({
         message: `表头点击${column.title}`,
         status: 'info'
       })
     },
     cellClickEvent({ column }) {
-      Modal.message({ message: `单元格点击${column.title}`, status: 'info' })
+      TinyModal.message({ message: `单元格点击${column.title}`, status: 'info' })
     },
     cellDBLClickEvent({ column }) {
-      Modal.message({ message: `单元格双击${column.title}`, status: 'info' })
+      TinyModal.message({ message: `单元格双击${column.title}`, status: 'info' })
     },
     headerCellDBLClickEvent({ column }) {
-      Modal.message({
+      TinyModal.message({
         message: `表头双击${column.title}`,
         status: 'info'
       })
     },
     footerClick(a) {
-      Modal.message({ message: `${a.columnIndex}`, status: 'info' })
+      TinyModal.message({ message: `${a.columnIndex}`, status: 'info' })
     },
     footerCellDbClick() {
-      Modal.alert('触发表尾双击点击事件')
+      TinyModal.alert('触发表尾双击点击事件')
     },
     footerMethod({ columns, data }) {
       return [
diff --git a/examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue
index 72544af80..52369c5b3 100644
--- a/examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/context-menu-event-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const headerMenus = ref([
   [
@@ -176,14 +176,14 @@ const tableData = ref([
 ])
 
 const headerMenuClick = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发表头右键点击事件',
     status: 'info'
   })
 }
 
 function footerMenuClick() {
-  Modal.message({
+  TinyModal.message({
     message: '触发表尾右键点击事件',
     status: 'info'
   })
@@ -232,11 +232,11 @@ function contextMenuClickEvent({ menu, row, column }) {
   switch (menu.code) {
     case 'copy':
       if (row && column) {
-        Modal.alert(`copy ${row}`)
+        TinyModal.alert(`copy ${row}`)
       }
       break
     default:
-      Modal.alert(`点击了 ${menu.name} 选项`)
+      TinyModal.alert(`点击了 ${menu.name} 选项`)
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/event/context-menu-event.vue b/examples/sites/demos/pc/app/grid/event/context-menu-event.vue
index 6920ec422..67b8f5f69 100644
--- a/examples/sites/demos/pc/app/grid/event/context-menu-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/context-menu-event.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -50,6 +50,7 @@ export default {
           }
         ]
       ],
+
       bodyMenus: [
         [
           {
@@ -71,6 +72,7 @@ export default {
           }
         ]
       ],
+
       footerMenus: [
         [
           {
@@ -87,6 +89,7 @@ export default {
           }
         ]
       ],
+
       tableData: [
         {
           id: '1',
@@ -183,13 +186,13 @@ export default {
   },
   methods: {
     headerMenuClick() {
-      Modal.message({
+      TinyModal.message({
         message: '触发表头右键点击事件',
         status: 'info'
       })
     },
     footerMenuClick() {
-      Modal.message({
+      TinyModal.message({
         message: '触发表尾右键点击事件',
         status: 'info'
       })
@@ -235,11 +238,11 @@ export default {
       switch (menu.code) {
         case 'copy':
           if (row && column) {
-            Modal.alert(`copy ${row}`)
+            TinyModal.alert(`copy ${row}`)
           }
           break
         default:
-          Modal.alert(`点击了 ${menu.name} 选项`)
+          TinyModal.alert(`点击了 ${menu.name} 选项`)
       }
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/event/current-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/current-change-event-composition-api.vue
index e7b7221b3..f82a90b63 100644
--- a/examples/sites/demos/pc/app/grid/event/current-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/current-change-event-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -60,7 +60,7 @@ const tableData = ref([
 ])
 
 function handleCurrentChange() {
-  Modal.message({
+  TinyModal.message({
     message: '触发行选中事件',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/current-change-event.vue b/examples/sites/demos/pc/app/grid/event/current-change-event.vue
index 34b60a792..e8fc90a2c 100644
--- a/examples/sites/demos/pc/app/grid/event/current-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/current-change-event.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -68,7 +68,7 @@ export default {
   },
   methods: {
     handleCurrentChange() {
-      Modal.message({
+      TinyModal.message({
         message: '触发行选中事件',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/edit-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/edit-event-composition-api.vue
index ee686ce04..ff9fd04a0 100644
--- a/examples/sites/demos/pc/app/grid/event/edit-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/edit-event-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
@@ -79,14 +79,14 @@ const tableData = ref([
 ])
 
 const editActive = () => {
-  Modal.message({
+  TinyModal.message({
     message: '激活编辑事件',
     status: 'info'
   })
 }
 
 const editClosed = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发关闭编辑事件',
     status: 'info'
   })
@@ -97,7 +97,7 @@ const activeMethod = ({ row }) => {
 }
 
 const editDisabled = () => {
-  Modal.message({
+  TinyModal.message({
     message: '激活editDisable事件',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/edit-event.vue b/examples/sites/demos/pc/app/grid/event/edit-event.vue
index 835273238..adb35fcef 100644
--- a/examples/sites/demos/pc/app/grid/event/edit-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/edit-event.vue
@@ -25,22 +25,22 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     editActive() {
-      Modal.message({
+      TinyModal.message({
         message: '激活编辑事件',
         status: 'info'
       })
     },
     editClosed() {
-      Modal.message({
+      TinyModal.message({
         message: '触发关闭编辑事件',
         status: 'info'
       })
@@ -49,7 +49,7 @@ export default {
       return row.area !== '华东区'
     },
     editDisabled() {
-      Modal.message({
+      TinyModal.message({
         message: '激活editDisable事件',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/get-row-method-composition-api.vue b/examples/sites/demos/pc/app/grid/event/get-row-method-composition-api.vue
index b63c89dd2..7cc3cdb80 100644
--- a/examples/sites/demos/pc/app/grid/event/get-row-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/get-row-method-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton, Modal as TinyModal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/event/get-row-method.vue b/examples/sites/demos/pc/app/grid/event/get-row-method.vue
index ffb51ad8c..f4acc6376 100644
--- a/examples/sites/demos/pc/app/grid/event/get-row-method.vue
+++ b/examples/sites/demos/pc/app/grid/event/get-row-method.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button, Modal as TinyModal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButton,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/event/grid-events-composition-api.vue b/examples/sites/demos/pc/app/grid/event/grid-events-composition-api.vue
index b164eeb3d..d3e394fdb 100644
--- a/examples/sites/demos/pc/app/grid/event/grid-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/grid-events-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const eventsData = ref({
   cellClick: cellClickEvent
@@ -63,7 +63,7 @@ const tableData = ref([
 ])
 
 function cellClickEvent({ column }) {
-  Modal.message({ message: `单元格点击${column.title}`, status: 'info' })
+  TinyModal.message({ message: `单元格点击${column.title}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/grid/event/grid-events.vue b/examples/sites/demos/pc/app/grid/event/grid-events.vue
index 3d0c178f0..72a192095 100644
--- a/examples/sites/demos/pc/app/grid/event/grid-events.vue
+++ b/examples/sites/demos/pc/app/grid/event/grid-events.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -71,7 +71,7 @@ export default {
   },
   methods: {
     cellClickEvent({ column }) {
-      Modal.message({ message: `单元格点击${column.title}`, status: 'info' })
+      TinyModal.message({ message: `单元格点击${column.title}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue
index 2fb032c13..4be156112 100644
--- a/examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -124,7 +124,7 @@ const tableData = ref([
 ])
 
 function ScrollEvent() {
-  Modal.message({ message: '提示：触发了表格滚动事件', status: 'info' })
+  TinyModal.message({ message: '提示：触发了表格滚动事件', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue b/examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue
index 3f1e27cc1..0db319df5 100644
--- a/examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -132,7 +132,7 @@ export default {
   },
   methods: {
     ScrollEvent() {
-      Modal.message({ message: '提示：触发了表格滚动事件', status: 'info' })
+      TinyModal.message({ message: '提示：触发了表格滚动事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue
index ebb0e8b55..c6a688787 100644
--- a/examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue
@@ -18,10 +18,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
@@ -108,7 +108,7 @@ const tableData = ref([
 
 function onBeforePageChange(params) {
   const { callback, rollback } = params
-  Modal.confirm('您确定要放弃修改吗？').then((res) => {
+  TinyModal.confirm('您确定要放弃修改吗？').then((res) => {
     if (res === 'confirm') {
       callback && callback()
     } else {
diff --git a/examples/sites/demos/pc/app/grid/event/page-before-change-event.vue b/examples/sites/demos/pc/app/grid/event/page-before-change-event.vue
index 0dc104be6..b42cd9f11 100644
--- a/examples/sites/demos/pc/app/grid/event/page-before-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/page-before-change-event.vue
@@ -17,17 +17,17 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
@@ -116,7 +116,7 @@ export default {
   methods: {
     onBeforePageChange(params) {
       const { callback, rollback } = params
-      Modal.confirm('您确定要放弃修改吗？').then((res) => {
+      TinyModal.confirm('您确定要放弃修改吗？').then((res) => {
         if (res === 'confirm') {
           callback && callback()
         } else {
diff --git a/examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue
index c367c16c7..044440d32 100644
--- a/examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue
@@ -12,10 +12,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 const pager = ref({
-  component: Pager, // 引入ElementUI的分页组件
+  component: TinyPager, // 引入ElementUI的分页组件
   attrs: {
     currentPage: 1,
     pageSize: 5,
@@ -101,7 +101,7 @@ const tableData = ref([
 ])
 
 function pageChange() {
-  Modal.message({
+  TinyModal.message({
     message: '触发分页change事件',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/page-change-event.vue b/examples/sites/demos/pc/app/grid/event/page-change-event.vue
index f824d89ee..00dc70ff9 100644
--- a/examples/sites/demos/pc/app/grid/event/page-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/page-change-event.vue
@@ -11,17 +11,17 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pager: {
-        component: Pager, // 引入ElementUI的分页组件
+        component: TinyPager, // 引入ElementUI的分页组件
         attrs: {
           currentPage: 1,
           pageSize: 5,
@@ -109,7 +109,7 @@ export default {
   },
   methods: {
     pageChange() {
-      Modal.message({
+      TinyModal.message({
         message: '触发分页change事件',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/radio-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/radio-change-event-composition-api.vue
index 5a52ab838..79b5bf812 100644
--- a/examples/sites/demos/pc/app/grid/event/radio-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/radio-change-event-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -59,7 +59,7 @@ const tableData = ref([
 ])
 
 function radioChange() {
-  Modal.message({
+  TinyModal.message({
     message: '选项改变',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/radio-change-event.vue b/examples/sites/demos/pc/app/grid/event/radio-change-event.vue
index 2b6b1a5da..feb856cb6 100644
--- a/examples/sites/demos/pc/app/grid/event/radio-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/radio-change-event.vue
@@ -10,16 +10,16 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     radioChange() {
-      Modal.message({
+      TinyModal.message({
         message: '选项改变',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/resizable-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/resizable-change-event-composition-api.vue
index 6e8d81fd3..f37c92568 100644
--- a/examples/sites/demos/pc/app/grid/event/resizable-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/resizable-change-event-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -59,7 +59,7 @@ const tableData = ref([
 ])
 
 function sizeChange() {
-  Modal.message({
+  TinyModal.message({
     message: '列宽发生了变化',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/resizable-change-event.vue b/examples/sites/demos/pc/app/grid/event/resizable-change-event.vue
index 479832151..ad483e2bf 100644
--- a/examples/sites/demos/pc/app/grid/event/resizable-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/resizable-change-event.vue
@@ -10,16 +10,16 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     sizeChange() {
-      Modal.message({
+      TinyModal.message({
         message: '列宽发生了变化',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/select-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/select-event-composition-api.vue
index a4eb58f35..962f7b2cc 100644
--- a/examples/sites/demos/pc/app/grid/event/select-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/select-event-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -60,14 +60,14 @@ const tableData = ref([
 ])
 
 const selectAll = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发全选事件',
     status: 'info'
   })
 }
 
 const selectChange = () => {
-  Modal.message({
+  TinyModal.message({
     message: '选项改变了',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/select-event.vue b/examples/sites/demos/pc/app/grid/event/select-event.vue
index 768057f04..76f7b98e8 100644
--- a/examples/sites/demos/pc/app/grid/event/select-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/select-event.vue
@@ -11,22 +11,22 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     selectAll() {
-      Modal.message({
+      TinyModal.message({
         message: '触发全选事件',
         status: 'info'
       })
     },
     selectChange() {
-      Modal.message({
+      TinyModal.message({
         message: '选项改变了',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/toggle-expand-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/toggle-expand-change-event-composition-api.vue
index 4c239810a..7a55fb640 100644
--- a/examples/sites/demos/pc/app/grid/event/toggle-expand-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/toggle-expand-change-event-composition-api.vue
@@ -38,7 +38,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -167,7 +167,7 @@ function expandChange({ row, rowIndex }) {
   } else {
     message = `当前收缩行：${JSON.stringify(rowIndex + 1)}`
   }
-  Modal.message({
+  TinyModal.message({
     message,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/toggle-expand-change-event.vue b/examples/sites/demos/pc/app/grid/event/toggle-expand-change-event.vue
index f563cf69b..718be4a6a 100644
--- a/examples/sites/demos/pc/app/grid/event/toggle-expand-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/toggle-expand-change-event.vue
@@ -37,12 +37,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     expandChange({ row, rowIndex }) {
@@ -52,7 +52,7 @@ export default {
       } else {
         message = `当前收缩行：${JSON.stringify(rowIndex + 1)}`
       }
-      Modal.message({
+      TinyModal.message({
         message,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/toggle-tree-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/toggle-tree-change-event-composition-api.vue
index 61d93d746..dea4751ed 100644
--- a/examples/sites/demos/pc/app/grid/event/toggle-tree-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/toggle-tree-change-event-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -155,7 +155,7 @@ const tableData = ref([
 ])
 
 function expandTree() {
-  Modal.message({
+  TinyModal.message({
     message: '触树展开事件',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/event/toggle-tree-change-event.vue b/examples/sites/demos/pc/app/grid/event/toggle-tree-change-event.vue
index ebf3a4bf0..b2328f195 100644
--- a/examples/sites/demos/pc/app/grid/event/toggle-tree-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/toggle-tree-change-event.vue
@@ -32,16 +32,16 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     expandTree() {
-      Modal.message({
+      TinyModal.message({
         message: '触树展开事件',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/event/toolbar-button-click-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/toolbar-button-click-event-composition-api.vue
index 75c8b77e0..ef68032a8 100644
--- a/examples/sites/demos/pc/app/grid/event/toolbar-button-click-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/toolbar-button-click-event-composition-api.vue
@@ -31,7 +31,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -117,21 +117,21 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        Modal.alert('请至少选中一条记录')
+        TinyModal.alert('请至少选中一条记录')
       }
       $grid.removeSelecteds()
       break
     }
     case 'getDelete': {
       const removeRecords = $grid.getRemoveRecords() // 获取删除的数据
-      Modal.alert('获取删除的数据' + JSON.stringify(removeRecords))
+      TinyModal.alert('获取删除的数据' + JSON.stringify(removeRecords))
       break
     }
     case 'save': {
       if (!updateData.length && !insertData.length && !removeData.length) {
-        Modal.alert('没有修改记录')
+        TinyModal.alert('没有修改记录')
       } else {
-        Modal.message({
+        TinyModal.message({
           message: '点击保存触发, 新增的数据',
           status: 'info'
         })
@@ -143,7 +143,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'getRecordset': {
       const records = $grid.getRecordset()
-      Modal.alert('增删改记录集合：' + JSON.stringify(records))
+      TinyModal.alert('增删改记录集合：' + JSON.stringify(records))
       break
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/event/toolbar-button-click-event.vue b/examples/sites/demos/pc/app/grid/event/toolbar-button-click-event.vue
index b9fca6713..75e12b324 100644
--- a/examples/sites/demos/pc/app/grid/event/toolbar-button-click-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/toolbar-button-click-event.vue
@@ -30,13 +30,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
@@ -125,21 +125,21 @@ export default {
         }
         case 'delete': {
           if (data.length === 0) {
-            Modal.alert('请至少选中一条记录')
+            TinyModal.alert('请至少选中一条记录')
           }
           $grid.removeSelecteds()
           break
         }
         case 'getDelete': {
           const removeRecords = $grid.getRemoveRecords() // 获取删除的数据
-          Modal.alert('获取删除的数据' + JSON.stringify(removeRecords))
+          TinyModal.alert('获取删除的数据' + JSON.stringify(removeRecords))
           break
         }
         case 'save': {
           if (!updateData.length && !insertData.length && !removeData.length) {
-            Modal.alert('没有修改记录')
+            TinyModal.alert('没有修改记录')
           } else {
-            Modal.message({
+            TinyModal.message({
               message: '点击保存触发, 新增的数据',
               status: 'info'
             })
@@ -151,7 +151,7 @@ export default {
         }
         case 'getRecordset': {
           const records = $grid.getRecordset()
-          Modal.alert('增删改记录集合：' + JSON.stringify(records))
+          TinyModal.alert('增删改记录集合：' + JSON.stringify(records))
           break
         }
       }
diff --git a/examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue
index feac05682..d1e2b4725 100644
--- a/examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/valid-error-event-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const validRules = {
   name: [
@@ -139,6 +139,6 @@ const tableData = ref([
 ])
 
 function validError() {
-  Modal.message({ message: '触发校验不通过事件', status: 'info' })
+  TinyModal.message({ message: '触发校验不通过事件', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/event/valid-error-event.vue b/examples/sites/demos/pc/app/grid/event/valid-error-event.vue
index 98e2148c9..793790691 100644
--- a/examples/sites/demos/pc/app/grid/event/valid-error-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/valid-error-event.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const validRules = {
@@ -148,7 +148,7 @@ export default {
   },
   methods: {
     validError() {
-      Modal.message({ message: '触发校验不通过事件', status: 'info' })
+      TinyModal.message({ message: '触发校验不通过事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/expand/expand-config-composition-api.vue b/examples/sites/demos/pc/app/grid/expand/expand-config-composition-api.vue
index 6606f8f1b..ea913b7e8 100644
--- a/examples/sites/demos/pc/app/grid/expand/expand-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/expand/expand-config-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const expandConfigData = {
   expandAll: false, // 默认展开所有行
diff --git a/examples/sites/demos/pc/app/grid/expand/expand-config.vue b/examples/sites/demos/pc/app/grid/expand/expand-config.vue
index 7db06b5d2..a4b180fe6 100644
--- a/examples/sites/demos/pc/app/grid/expand/expand-config.vue
+++ b/examples/sites/demos/pc/app/grid/expand/expand-config.vue
@@ -32,12 +32,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   mounted() {
     let allData = this.$refs.selfTable.getData()
diff --git a/examples/sites/demos/pc/app/grid/expand/has-row-expand-composition-api.vue b/examples/sites/demos/pc/app/grid/expand/has-row-expand-composition-api.vue
index c8a6ad7ae..6b5f6b7ca 100644
--- a/examples/sites/demos/pc/app/grid/expand/has-row-expand-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/expand/has-row-expand-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -73,7 +73,7 @@ const expandGridRef = ref()
 
 function handleExpand({ row, rowIndex }) {
   if (expandGridRef.value.hasRowExpand(row)) {
-    Modal.message({
+    TinyModal.message({
       message: `当前展开行：${JSON.stringify(rowIndex + 1)}`,
       status: 'info'
     })
diff --git a/examples/sites/demos/pc/app/grid/expand/has-row-expand.vue b/examples/sites/demos/pc/app/grid/expand/has-row-expand.vue
index 8062b37a0..95119c272 100644
--- a/examples/sites/demos/pc/app/grid/expand/has-row-expand.vue
+++ b/examples/sites/demos/pc/app/grid/expand/has-row-expand.vue
@@ -32,12 +32,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -80,7 +80,7 @@ export default {
   methods: {
     handleExpand({ row, rowIndex }) {
       if (this.$refs.expandGrid.hasRowExpand(row)) {
-        Modal.message({
+        TinyModal.message({
           message: `当前展开行：${JSON.stringify(rowIndex + 1)}`,
           status: 'info'
         })
diff --git a/examples/sites/demos/pc/app/grid/expand/nested-grid-composition-api.vue b/examples/sites/demos/pc/app/grid/expand/nested-grid-composition-api.vue
index 18bcf07e4..71a1a46c2 100644
--- a/examples/sites/demos/pc/app/grid/expand/nested-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/expand/nested-grid-composition-api.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/expand/nested-grid.vue b/examples/sites/demos/pc/app/grid/expand/nested-grid.vue
index bfd3a26e2..5c274bb87 100644
--- a/examples/sites/demos/pc/app/grid/expand/nested-grid.vue
+++ b/examples/sites/demos/pc/app/grid/expand/nested-grid.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const expandTableData = [
   {
@@ -57,9 +57,9 @@ const expandTableData = [
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/expand/set-row-expansion-composition-api.vue b/examples/sites/demos/pc/app/grid/expand/set-row-expansion-composition-api.vue
index e906f2697..794157b21 100644
--- a/examples/sites/demos/pc/app/grid/expand/set-row-expansion-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/expand/set-row-expansion-composition-api.vue
@@ -43,7 +43,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/expand/set-row-expansion.vue b/examples/sites/demos/pc/app/grid/expand/set-row-expansion.vue
index aa793bf65..193bcab0d 100644
--- a/examples/sites/demos/pc/app/grid/expand/set-row-expansion.vue
+++ b/examples/sites/demos/pc/app/grid/expand/set-row-expansion.vue
@@ -37,13 +37,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     const tableData = [
@@ -88,6 +88,7 @@ export default {
         boole: true
       }
     ]
+
     return {
       tableData
     }
diff --git a/examples/sites/demos/pc/app/grid/faq/custom-column-composition-api.vue b/examples/sites/demos/pc/app/grid/faq/custom-column-composition-api.vue
index 297c7f280..ba47d417c 100644
--- a/examples/sites/demos/pc/app/grid/faq/custom-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/faq/custom-column-composition-api.vue
@@ -22,7 +22,7 @@
 <script setup>
 import { ref } from 'vue'
 import { h } from '@opentiny/vue-common'
-import { GridColumn, Grid as TinyGrid } from '@opentiny/vue'
+import { TinyGridColumn, TinyGrid } from '@opentiny/vue'
 
 const GridColumnWrapper = {
   name: 'MyGridColumn',
@@ -31,7 +31,7 @@ const GridColumnWrapper = {
     return () => {
       const config = { props, scopedSlots: { ...slots } }
 
-      return h(GridColumn, config)
+      return h(TinyGridColumn, config)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/faq/custom-column.vue b/examples/sites/demos/pc/app/grid/faq/custom-column.vue
index 6231e7835..708d63554 100644
--- a/examples/sites/demos/pc/app/grid/faq/custom-column.vue
+++ b/examples/sites/demos/pc/app/grid/faq/custom-column.vue
@@ -21,7 +21,7 @@
 
 <script>
 import { h } from '@opentiny/vue-common'
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const GridColumnWrapper = {
   name: 'MyGridColumn',
@@ -30,14 +30,14 @@ const GridColumnWrapper = {
     return () => {
       const config = { props, scopedSlots: { ...slots } }
 
-      return h(GridColumn, config)
+      return h(TinyGridColumn, config)
     }
   }
 }
 
 export default {
   components: {
-    TinyGrid: Grid,
+    TinyGrid,
     GridColumnWrapper
   },
   data() {
diff --git a/examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box-composition-api.vue b/examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box-composition-api.vue
index 4c7cb3930..b45179523 100644
--- a/examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box-composition-api.vue
@@ -59,12 +59,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Button as TinyButton,
-  DialogBox as TinyDialogBox,
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn
-} from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
 const options = ref([
diff --git a/examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box.vue b/examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box.vue
index 386f56e10..472e27a7c 100644
--- a/examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box.vue
+++ b/examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box.vue
@@ -58,14 +58,14 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox, Grid, GridColumn } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButton,
+    TinyDialogBox,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/faq/many-poppover-composition-api.vue b/examples/sites/demos/pc/app/grid/faq/many-poppover-composition-api.vue
index 623ddf392..a119cd433 100644
--- a/examples/sites/demos/pc/app/grid/faq/many-poppover-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/faq/many-poppover-composition-api.vue
@@ -37,7 +37,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Popover as TinyPopover } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPopover } from '@opentiny/vue'
 
 const flag = ref(false)
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/faq/many-poppover.vue b/examples/sites/demos/pc/app/grid/faq/many-poppover.vue
index 4a2e674ad..39277ee00 100644
--- a/examples/sites/demos/pc/app/grid/faq/many-poppover.vue
+++ b/examples/sites/demos/pc/app/grid/faq/many-poppover.vue
@@ -36,13 +36,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Popover } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPopover } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyPopover: Popover
+    TinyGrid,
+    TinyGridColumn,
+    TinyPopover
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/faq/op-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/faq/op-slot-composition-api.vue
index 3bc589cce..0a41f2d3f 100644
--- a/examples/sites/demos/pc/app/grid/faq/op-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/faq/op-slot-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 const columns = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/faq/op-slot.vue b/examples/sites/demos/pc/app/grid/faq/op-slot.vue
index 98316acda..742a08fb2 100644
--- a/examples/sites/demos/pc/app/grid/faq/op-slot.vue
+++ b/examples/sites/demos/pc/app/grid/faq/op-slot.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Grid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid
+    TinyGrid
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue b/examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue
index 647d40773..c7190c121 100644
--- a/examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue
@@ -40,7 +40,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { iconAdministrator, iconVersiontree } from '@opentiny/vue-icon'
 
 const IconVersiontree = iconVersiontree()
diff --git a/examples/sites/demos/pc/app/grid/faq/unbalanced.vue b/examples/sites/demos/pc/app/grid/faq/unbalanced.vue
index 2ee3caaf6..6ebe1936e 100644
--- a/examples/sites/demos/pc/app/grid/faq/unbalanced.vue
+++ b/examples/sites/demos/pc/app/grid/faq/unbalanced.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import {
   IconAdministrator,
   IconVersiontree,
@@ -51,8 +51,8 @@ import {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/filter/advanced-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/advanced-filter-composition-api.vue
index cd30c38d8..84c71735c 100644
--- a/examples/sites/demos/pc/app/grid/filter/advanced-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/advanced-filter-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, DatePicker, Numeric, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyDatePicker, TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const filteData = [
   { label: '福州', value: '福州' },
@@ -20,6 +20,7 @@ const filteData = [
   { label: '龙岩', value: '龙岩' },
   { label: '韶关', value: '韶关' }
 ]
+
 const tableData = ref([
   {
     id: '1',
@@ -95,7 +96,7 @@ const cityFilter = ref({
 const employeesFilter = ref({
   layout: 'input,enum,default,extends,base',
   inputFilter: {
-    component: Numeric,
+    component: TinyNumeric,
     attrs: { format: 'yyyy/MM/dd hh:mm:ss' },
     relations: [
       {
@@ -137,7 +138,7 @@ const employeesFilter = ref({
 })
 const dateFilter = ref({
   inputFilter: {
-    component: DatePicker,
+    component: TinyDatePicker,
     attrs: {
       format: 'yyyy-MM-dd hh:mm:ss',
       valueFormat: 'yyyy-MM-dd hh:mm:ss'
@@ -157,6 +158,6 @@ const nameFilter = ref({
 })
 
 function filterChangeEvent({ filters }) {
-  Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+  TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/filter/advanced-filter.vue b/examples/sites/demos/pc/app/grid/filter/advanced-filter.vue
index c06e331d2..a9adb87ee 100644
--- a/examples/sites/demos/pc/app/grid/filter/advanced-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/advanced-filter.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, DatePicker, Numeric, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyDatePicker, TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const filteData = [
   { label: '福州', value: '福州' },
@@ -22,8 +22,8 @@ const filteData = [
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -102,7 +102,7 @@ export default {
       employeesFilter: {
         layout: 'input,enum,default,extends,base',
         inputFilter: {
-          component: Numeric,
+          component: TinyNumeric,
           attrs: { format: 'yyyy/MM/dd hh:mm:ss' },
           relations: [
             {
@@ -144,7 +144,7 @@ export default {
       },
       dateFilter: {
         inputFilter: {
-          component: DatePicker,
+          component: TinyDatePicker,
           attrs: {
             format: 'yyyy-MM-dd hh:mm:ss',
             valueFormat: 'yyyy-MM-dd hh:mm:ss'
@@ -166,7 +166,7 @@ export default {
   },
   methods: {
     filterChangeEvent({ filters }) {
-      Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+      TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/filter/custom-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/custom-filter-composition-api.vue
index 86f0162b1..7299eef69 100644
--- a/examples/sites/demos/pc/app/grid/filter/custom-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/custom-filter-composition-api.vue
@@ -35,7 +35,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/filter/custom-filter.vue b/examples/sites/demos/pc/app/grid/filter/custom-filter.vue
index b96e720bd..6b0ed9e74 100644
--- a/examples/sites/demos/pc/app/grid/filter/custom-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/custom-filter.vue
@@ -34,12 +34,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue
index 605749325..fb84d762e 100644
--- a/examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/default-filter-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const filteData = [
   { label: '福州', value: '福州' },
diff --git a/examples/sites/demos/pc/app/grid/filter/default-filter.vue b/examples/sites/demos/pc/app/grid/filter/default-filter.vue
index de8b22d6e..1b7ff1235 100644
--- a/examples/sites/demos/pc/app/grid/filter/default-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/default-filter.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const filteData = [
   { label: '福州', value: '福州' },
@@ -31,9 +31,9 @@ const filteData = [
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/filter/default-relation-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/default-relation-composition-api.vue
index 3cf234bf6..58f346866 100644
--- a/examples/sites/demos/pc/app/grid/filter/default-relation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/default-relation-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Numeric, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -60,7 +60,7 @@ const tableData = ref([
 const employeesFilter = ref({
   layout: 'input,enum,default,extends,base',
   inputFilter: {
-    component: Numeric,
+    component: TinyNumeric,
     attrs: { format: 'yyyy/MM/dd hh:mm:ss' },
     relation: 'A',
     relations: [
@@ -111,6 +111,6 @@ const nameFilter = ref({
 })
 
 function filterChangeEvent({ filters }) {
-  Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+  TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/filter/default-relation.vue b/examples/sites/demos/pc/app/grid/filter/default-relation.vue
index 2a1b6d5e5..adc9bce6e 100644
--- a/examples/sites/demos/pc/app/grid/filter/default-relation.vue
+++ b/examples/sites/demos/pc/app/grid/filter/default-relation.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Numeric, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -66,7 +66,7 @@ export default {
       employeesFilter: {
         layout: 'input,enum,default,extends,base',
         inputFilter: {
-          component: Numeric,
+          component: TinyNumeric,
           attrs: { format: 'yyyy/MM/dd hh:mm:ss' },
           relation: 'A',
           relations: [
@@ -119,7 +119,7 @@ export default {
   },
   methods: {
     filterChangeEvent({ filters }) {
-      Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+      TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/filter/dynamic-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/dynamic-filter-composition-api.vue
index b5f28c388..6898288c6 100644
--- a/examples/sites/demos/pc/app/grid/filter/dynamic-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/dynamic-filter-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const filteData = [
   { label: '福州', value: '福州' },
diff --git a/examples/sites/demos/pc/app/grid/filter/dynamic-filter.vue b/examples/sites/demos/pc/app/grid/filter/dynamic-filter.vue
index f0534eff8..a703aeec1 100644
--- a/examples/sites/demos/pc/app/grid/filter/dynamic-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/dynamic-filter.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const filteData = [
   { label: '福州', value: '福州' },
@@ -32,9 +32,9 @@ let filterNumber = 1
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter-composition-api.vue
index 611349dce..e3b0bf615 100644
--- a/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter-composition-api.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const tableData = ref([
@@ -85,7 +85,7 @@ const nameFilter = {
   defaultFilter: true
 }
 const pagerConfig = {
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.vue b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.vue
index 1b44545bf..bed89a801 100644
--- a/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
 
 const tableData = [
   {
@@ -77,9 +77,9 @@ const tableData = [
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
@@ -89,7 +89,7 @@ export default {
         defaultFilter: true
       },
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue
index 60c818566..be591dcbb 100644
--- a/examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue
@@ -11,10 +11,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
@@ -93,7 +93,7 @@ const tableData = ref([
 ])
 
 function filterChangeEvent({ filters }) {
-  Modal.message({
+  TinyModal.message({
     message: `筛选条件 change 事件：${JSON.stringify(filters)}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue
index fd884543e..8b2c124e7 100644
--- a/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue
@@ -14,10 +14,10 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue b/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue
index 901726f94..13ca5f4b6 100644
--- a/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue
+++ b/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue
@@ -13,18 +13,18 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter.vue b/examples/sites/demos/pc/app/grid/filter/server-filter.vue
index b7ed49ae9..778433acb 100644
--- a/examples/sites/demos/pc/app/grid/filter/server-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/server-filter.vue
@@ -10,17 +10,17 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
@@ -101,7 +101,7 @@ export default {
   },
   methods: {
     filterChangeEvent({ filters }) {
-      Modal.message({
+      TinyModal.message({
         message: `筛选条件 change 事件：${JSON.stringify(filters)}`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-date-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/simple-date-filter-composition-api.vue
index 3fe40162d..4e07dba2b 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-date-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/simple-date-filter-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal, DatePicker } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyDatePicker } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -48,7 +48,7 @@ const birthdayFilter = ref({
   layout: 'simple',
   simpleFilter: {
     datetimeConfig: {
-      component: DatePicker,
+      component: TinyDatePicker,
       format: 'yyyy-MM-dd',
       valueFormat: 'yyyy-MM-dd',
       // 最大允许选择的时间
@@ -63,7 +63,7 @@ const hireDateFilter = ref({
   layout: 'simple',
   simpleFilter: {
     datetimeConfig: {
-      component: DatePicker,
+      component: TinyDatePicker,
       format: 'yyyy/MM/dd',
       valueFormat: 'yyyy/MM/dd',
       // 最大允许选择的时间
@@ -78,7 +78,7 @@ const startFilter = ref({
   layout: 'simple',
   simpleFilter: {
     datetimeConfig: {
-      component: DatePicker,
+      component: TinyDatePicker,
       format: 'yyyy-MM-dd hh:mm:ss',
       valueFormat: 'yyyy-MM-dd hh:mm:ss',
       type: 'datetime',
@@ -94,7 +94,7 @@ const expiredFilter = ref({
   layout: 'simple',
   simpleFilter: {
     datetimeConfig: {
-      component: DatePicker,
+      component: TinyDatePicker,
       format: 'yyyy-MM-dd hh:mm:ss',
       valueFormat: 'yyyy-MM-dd hh:mm:ss',
       // 最大允许选择的时间
@@ -107,6 +107,6 @@ const expiredFilter = ref({
 })
 
 function filterChangeEvent({ filters }) {
-  Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+  TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-date-filter.vue b/examples/sites/demos/pc/app/grid/filter/simple-date-filter.vue
index 7017aa001..ec9d5c96c 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-date-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/simple-date-filter.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal, DatePicker } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyDatePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -54,7 +54,7 @@ export default {
         layout: 'simple',
         simpleFilter: {
           datetimeConfig: {
-            component: DatePicker,
+            component: TinyDatePicker,
             format: 'yyyy-MM-dd',
             valueFormat: 'yyyy-MM-dd',
             // 最大允许选择的时间
@@ -69,7 +69,7 @@ export default {
         layout: 'simple',
         simpleFilter: {
           datetimeConfig: {
-            component: DatePicker,
+            component: TinyDatePicker,
             format: 'yyyy/MM/dd',
             valueFormat: 'yyyy/MM/dd',
             // 最大允许选择的时间
@@ -84,7 +84,7 @@ export default {
         layout: 'simple',
         simpleFilter: {
           datetimeConfig: {
-            component: DatePicker,
+            component: TinyDatePicker,
             format: 'yyyy-MM-dd hh:mm:ss',
             valueFormat: 'yyyy-MM-dd hh:mm:ss',
             type: 'datetime',
@@ -100,7 +100,7 @@ export default {
         layout: 'simple',
         simpleFilter: {
           datetimeConfig: {
-            component: DatePicker,
+            component: TinyDatePicker,
             format: 'yyyy-MM-dd hh:mm:ss',
             valueFormat: 'yyyy-MM-dd hh:mm:ss',
             // 最大允许选择的时间
@@ -115,7 +115,7 @@ export default {
   },
   methods: {
     filterChangeEvent({ filters }) {
-      Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+      TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-default-value-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/simple-default-value-filter-composition-api.vue
index 6e9172232..ad52c7d4d 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-default-value-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/simple-default-value-filter-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal, Input } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyInput } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -87,12 +87,12 @@ const nameFilter = ref({
   },
   simpleFilter: {
     searchConfig: {
-      component: Input
+      component: TinyInput
     }
   }
 })
 
 function filterChangeEvent({ filters }) {
-  Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+  TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-default-value-filter.vue b/examples/sites/demos/pc/app/grid/filter/simple-default-value-filter.vue
index 601cd28c7..5e3ee5a2c 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-default-value-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/simple-default-value-filter.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal, Input } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -93,7 +93,7 @@ export default {
         },
         simpleFilter: {
           searchConfig: {
-            component: Input
+            component: TinyInput
           }
         }
       }
@@ -101,7 +101,7 @@ export default {
   },
   methods: {
     filterChangeEvent({ filters }) {
-      Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+      TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue
index 6bc7d5835..ef2861a69 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/simple-filter-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal, Input } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyInput } from '@opentiny/vue'
 
 const filteData = [
   { label: '福州', value: '福州' },
@@ -113,7 +113,7 @@ const nameFilter = ref({
   multi: true,
   simpleFilter: {
     searchConfig: {
-      component: Input,
+      component: TinyInput,
       // 搜索框默认值
       searchValue: 'WWW'
     }
@@ -121,6 +121,6 @@ const nameFilter = ref({
 })
 
 function filterChangeEvent({ filters }) {
-  Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+  TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-filter.vue b/examples/sites/demos/pc/app/grid/filter/simple-filter.vue
index 65d792645..a0162c012 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/simple-filter.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Modal, Input } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal, TinyInput } from '@opentiny/vue'
 
 const filteData = [
   { label: '福州', value: '福州' },
@@ -22,8 +22,8 @@ const filteData = [
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -119,7 +119,7 @@ export default {
         multi: true,
         simpleFilter: {
           searchConfig: {
-            component: Input,
+            component: TinyInput,
             // 搜索框默认值
             searchValue: 'WWW'
           }
@@ -129,7 +129,7 @@ export default {
   },
   methods: {
     filterChangeEvent({ filters }) {
-      Modal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
+      TinyModal.message({ message: `${JSON.stringify(filters)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue
index fe0ece078..293ac82e4 100644
--- a/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue
@@ -63,7 +63,7 @@
 
 <script lang="jsx" setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import {
   iconAdministrator,
   iconVersiontree,
diff --git a/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue
index 5de885ad5..9782abd3e 100644
--- a/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue
@@ -62,7 +62,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import {
   IconAdministrator,
   IconVersiontree,
@@ -74,8 +74,8 @@ import {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue
index 5af1efe92..c30ccd6f8 100644
--- a/examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue
index d1654cfe2..205eac4c4 100644
--- a/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/fixed/multi-column-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/fixed/multi-column-fixed-composition-api.vue
index cfe20eda8..11041a089 100644
--- a/examples/sites/demos/pc/app/grid/fixed/multi-column-fixed-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/multi-column-fixed-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref(
   Array.from({ length: 30 }, (a, i) => {
diff --git a/examples/sites/demos/pc/app/grid/fixed/multi-column-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/multi-column-fixed.vue
index 294115dc7..7ac788f4f 100644
--- a/examples/sites/demos/pc/app/grid/fixed/multi-column-fixed.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/multi-column-fixed.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue
index 80e7a657d..145ad8323 100644
--- a/examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/fixed/right-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/right-fixed.vue
index 587cd2dd3..6b1e6685d 100644
--- a/examples/sites/demos/pc/app/grid/fixed/right-fixed.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/right-fixed.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/footer/configuration-summary-composition-api.vue b/examples/sites/demos/pc/app/grid/footer/configuration-summary-composition-api.vue
index c2d987931..6f85ed0fa 100644
--- a/examples/sites/demos/pc/app/grid/footer/configuration-summary-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/footer/configuration-summary-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const summary = ref({
   fields: ['employees'],
diff --git a/examples/sites/demos/pc/app/grid/footer/configuration-summary.vue b/examples/sites/demos/pc/app/grid/footer/configuration-summary.vue
index 7064ed6f0..79d64f2d5 100644
--- a/examples/sites/demos/pc/app/grid/footer/configuration-summary.vue
+++ b/examples/sites/demos/pc/app/grid/footer/configuration-summary.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span-composition-api.vue b/examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span-composition-api.vue
index 254df114b..c46f5dd6c 100644
--- a/examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span.vue b/examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span.vue
index 85eaae08f..b0f8a018f 100644
--- a/examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span.vue
+++ b/examples/sites/demos/pc/app/grid/footer/footer-row-or-column-span.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/footer/footer-summation-empty-composition-api.vue b/examples/sites/demos/pc/app/grid/footer/footer-summation-empty-composition-api.vue
index 43503946d..dd87890e6 100644
--- a/examples/sites/demos/pc/app/grid/footer/footer-summation-empty-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/footer/footer-summation-empty-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([])
 
diff --git a/examples/sites/demos/pc/app/grid/footer/footer-summation-empty.vue b/examples/sites/demos/pc/app/grid/footer/footer-summation-empty.vue
index 53dd42ec7..4803c1c89 100644
--- a/examples/sites/demos/pc/app/grid/footer/footer-summation-empty.vue
+++ b/examples/sites/demos/pc/app/grid/footer/footer-summation-empty.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyButton,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/header/config-grid-header-composition-api.vue b/examples/sites/demos/pc/app/grid/header/config-grid-header-composition-api.vue
index 6ff0d0c5e..5435690d8 100644
--- a/examples/sites/demos/pc/app/grid/header/config-grid-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/header/config-grid-header-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 const tableData = [
   {
diff --git a/examples/sites/demos/pc/app/grid/header/config-grid-header.vue b/examples/sites/demos/pc/app/grid/header/config-grid-header.vue
index bd75970e3..9da94356a 100644
--- a/examples/sites/demos/pc/app/grid/header/config-grid-header.vue
+++ b/examples/sites/demos/pc/app/grid/header/config-grid-header.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { Grid } from '@opentiny/vue'
+import { TinyGrid } from '@opentiny/vue'
 
 const tableData = [
   {
@@ -28,7 +28,7 @@ const tableData = [
 
 export default {
   components: {
-    TinyGrid: Grid
+    TinyGrid
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue b/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
index ff42a2048..3275819e1 100644
--- a/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import {
   iconAdministrator,
   iconVersiontree,
diff --git a/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue b/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
index 6f829be4c..49650a448 100644
--- a/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
+++ b/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import {
   IconAdministrator,
   IconVersiontree,
@@ -45,8 +45,8 @@ import {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/header/hide-grid-header-composition-api.vue b/examples/sites/demos/pc/app/grid/header/hide-grid-header-composition-api.vue
index d93f3b636..949b0a9a6 100644
--- a/examples/sites/demos/pc/app/grid/header/hide-grid-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/header/hide-grid-header-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/header/hide-grid-header.vue b/examples/sites/demos/pc/app/grid/header/hide-grid-header.vue
index f1d5d2262..1ff0bb8f6 100644
--- a/examples/sites/demos/pc/app/grid/header/hide-grid-header.vue
+++ b/examples/sites/demos/pc/app/grid/header/hide-grid-header.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue b/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
index 05a8f6ab9..08c3c0d58 100644
--- a/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="jsx" setup>
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 import { h } from '@opentiny/vue-common'
 import { ref } from 'vue'
 import {
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching.vue b/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
index b5a4589b4..84d925e7e 100644
--- a/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 import { h } from '@opentiny/vue-common'
 import {
   iconAdministrator,
@@ -51,9 +51,9 @@ import {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue b/examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue
index 8348a05a8..9b28c52e8 100644
--- a/examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue
@@ -37,7 +37,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import {
   iconAdministrator,
   iconVersiontree,
diff --git a/examples/sites/demos/pc/app/grid/header/slot-header.vue b/examples/sites/demos/pc/app/grid/header/slot-header.vue
index f81d523c2..8976afd38 100644
--- a/examples/sites/demos/pc/app/grid/header/slot-header.vue
+++ b/examples/sites/demos/pc/app/grid/header/slot-header.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import {
   IconAdministrator,
   IconVersiontree,
@@ -48,8 +48,8 @@ import {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
+    TinyGrid,
+    TinyGridColumn,
     IconVersiontree: IconVersiontree(),
     IconAdministrator: IconAdministrator(),
     IconMarkOn: IconMarkOn(),
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-cell-composition-api.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-cell-composition-api.vue
index 5a32c9a10..a69ed709d 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-cell-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-cell-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -102,7 +102,7 @@ const tableData = ref([
 ])
 
 function currentChange({ row }) {
-  Modal.message({ message: `${row.name}`, status: 'info' })
+  TinyModal.message({ message: `${row.name}`, status: 'info' })
 }
 
 function toolbarButtonClickEvent({ code, $grid }) {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-cell.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-cell.vue
index ab2429f93..d854f3cf1 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-cell.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-cell.vue
@@ -33,13 +33,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
@@ -111,7 +111,7 @@ export default {
   },
   methods: {
     currentChange({ row }) {
-      Modal.message({ message: `${row.name}`, status: 'info' })
+      TinyModal.message({ message: `${row.name}`, status: 'info' })
     },
     toolbarButtonClickEvent({ code, $grid }) {
       switch (code) {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-current-column-composition-api.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-current-column-composition-api.vue
index c384c2dd3..85377ab21 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-current-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-current-column-composition-api.vue
@@ -20,12 +20,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Button as TinyButton,
-  GridToolbar as TinyGridToolbar
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-current-column.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-current-column.vue
index d385d5461..dff52333a 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-current-column.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-current-column.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-current-row-composition-api.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-current-row-composition-api.vue
index b0914e4a9..f0b2ef298 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-current-row-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-current-row-composition-api.vue
@@ -20,12 +20,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Button as TinyButton,
-  GridToolbar as TinyGridToolbar
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyGridToolbar } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-current-row.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-current-row.vue
index b82c08fe1..27efa9ee1 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-current-row.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-current-row.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-column-composition-api.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-column-composition-api.vue
index d62309377..9d20cb2ca 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-column-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-column.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-column.vue
index 5faa081dd..6e91e06f4 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-column.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-column.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row-composition-api.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row-composition-api.vue
index 26842a902..e43276f53 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.vue b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.vue
index 61c1d57a9..eaec147b0 100644
--- a/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/highlight/set-current-row-composition-api.vue b/examples/sites/demos/pc/app/grid/highlight/set-current-row-composition-api.vue
index b867397da..bf1b606a4 100644
--- a/examples/sites/demos/pc/app/grid/highlight/set-current-row-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/set-current-row-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/highlight/set-current-row.vue b/examples/sites/demos/pc/app/grid/highlight/set-current-row.vue
index 392423c8d..b71a2d829 100644
--- a/examples/sites/demos/pc/app/grid/highlight/set-current-row.vue
+++ b/examples/sites/demos/pc/app/grid/highlight/set-current-row.vue
@@ -32,13 +32,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     const tableData = [
@@ -107,6 +107,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       tableData
     }
diff --git a/examples/sites/demos/pc/app/grid/import-export/export-excel-composition-api.vue b/examples/sites/demos/pc/app/grid/import-export/export-excel-composition-api.vue
index 13d1b2aed..ca2bffbce 100644
--- a/examples/sites/demos/pc/app/grid/import-export/export-excel-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/import-export/export-excel-composition-api.vue
@@ -21,12 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  GridToolbar as TinyGridToolbar,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/import-export/export-excel.vue b/examples/sites/demos/pc/app/grid/import-export/export-excel.vue
index 24ba226ca..da3478189 100644
--- a/examples/sites/demos/pc/app/grid/import-export/export-excel.vue
+++ b/examples/sites/demos/pc/app/grid/import-export/export-excel.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/import-export/import-excel-composition-api.vue b/examples/sites/demos/pc/app/grid/import-export/import-excel-composition-api.vue
index 6302ba71c..fda0aa443 100644
--- a/examples/sites/demos/pc/app/grid/import-export/import-excel-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/import-export/import-excel-composition-api.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { GridColumn as TinyGridColumn, Grid as TinyGrid } from '@opentiny/vue'
+import { TinyGridColumn, TinyGrid } from '@opentiny/vue'
 import { ref } from 'vue'
 
 // import * as XLSX from 'xlsx'
diff --git a/examples/sites/demos/pc/app/grid/import-export/import-excel.vue b/examples/sites/demos/pc/app/grid/import-export/import-excel.vue
index b849c6971..c690affb1 100644
--- a/examples/sites/demos/pc/app/grid/import-export/import-excel.vue
+++ b/examples/sites/demos/pc/app/grid/import-export/import-excel.vue
@@ -11,14 +11,14 @@
 </template>
 
 <script>
-import { GridColumn, Grid } from '@opentiny/vue'
+import { TinyGridColumn, TinyGrid } from '@opentiny/vue'
 
 // import * as XLSX from 'xlsx'
 
 export default {
   components: {
-    TinyGridColumn: GridColumn,
-    TinyGrid: Grid
+    TinyGridColumn,
+    TinyGrid
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
index 0b25f600f..ade1f7aea 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
@@ -66,7 +66,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
 function getData({ page }) {
@@ -167,6 +167,7 @@ const columnAnchor = ref([
         )
     ]
   ],
+
   {
     field: 'address', // 列锚点字段
     label: null, // 列锚点名称
@@ -177,7 +178,7 @@ const columnAnchor = ref([
 ])
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 3,
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
index 3438e9f3c..fa4b71c96 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
 const tableData = [
@@ -133,8 +133,8 @@ const tableData = [
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -156,6 +156,7 @@ export default {
               )
           ]
         ],
+
         {
           field: 'address', // 列锚点字段
           label: null, // 列锚点名称
@@ -165,7 +166,7 @@ export default {
         }
       ],
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 3,
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
index 4487877a5..9534b2f5b 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
@@ -68,7 +68,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
 const columnAnchor = ref([
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
index 9e714bb3d..78a7e99f8 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor.vue
@@ -67,13 +67,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -97,6 +97,7 @@ export default {
           ]
         ]
       ],
+
       tableData: [
         {
           id: '1',
diff --git a/examples/sites/demos/pc/app/grid/large-data/full-data-loading-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/full-data-loading-composition-api.vue
index 2c512c134..242a869a4 100644
--- a/examples/sites/demos/pc/app/grid/large-data/full-data-loading-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/full-data-loading-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tinyTableRef = ref()
 
diff --git a/examples/sites/demos/pc/app/grid/large-data/full-data-loading.vue b/examples/sites/demos/pc/app/grid/large-data/full-data-loading.vue
index 008934217..bad65cf8d 100644
--- a/examples/sites/demos/pc/app/grid/large-data/full-data-loading.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/full-data-loading.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {}
diff --git a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue
index 8f725444b..7f4ff115d 100644
--- a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data-composition-api.vue
@@ -126,7 +126,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, DatePicker } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyDatePicker } from '@opentiny/vue'
 
 const template = {
   id: '0',
diff --git a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue
index b9fbb4350..e782ac4b9 100644
--- a/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/grid-large-tree-data.vue
@@ -125,7 +125,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, DatePicker } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyDatePicker } from '@opentiny/vue'
 
 const template = {
   id: '0',
@@ -195,12 +195,12 @@ const buildDatas = () => {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      DatePicker,
+      TinyDatePicker,
       tableData: buildDatas()
     }
   },
diff --git a/examples/sites/demos/pc/app/grid/large-data/load-column-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/load-column-composition-api.vue
index da8b7c7b0..5119fb4df 100644
--- a/examples/sites/demos/pc/app/grid/large-data/load-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/load-column-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Button as TinyButton, Grid as TinyGrid } from '@opentiny/vue'
+import { TinyButton, TinyGrid } from '@opentiny/vue'
 
 const columns = []
 const tableData = []
diff --git a/examples/sites/demos/pc/app/grid/large-data/load-column.vue b/examples/sites/demos/pc/app/grid/large-data/load-column.vue
index 5f3138ec9..34677264a 100644
--- a/examples/sites/demos/pc/app/grid/large-data/load-column.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/load-column.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="jsx">
-import { Button, Grid } from '@opentiny/vue'
+import { TinyButton, TinyGrid } from '@opentiny/vue'
 
 const columns = []
 const tableData = []
@@ -26,8 +26,8 @@ for (let k = 0; k < 100; k++) {
 }
 export default {
   components: {
-    TinyButton: Button,
-    TinyGrid: Grid
+    TinyButton,
+    TinyGrid
   },
   methods: {
     loadData() {
diff --git a/examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue
index 890f9fdcd..3292fd335 100644
--- a/examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/scroll-to-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyButton } from '@opentiny/vue'
 
 const tinyGridRef = ref()
 
diff --git a/examples/sites/demos/pc/app/grid/large-data/scroll-to.vue b/examples/sites/demos/pc/app/grid/large-data/scroll-to.vue
index 65c8569d7..fbc5995b3 100644
--- a/examples/sites/demos/pc/app/grid/large-data/scroll-to.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/scroll-to.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, Button } from '@opentiny/vue'
+import { TinyGrid, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyButton: Button
+    TinyGrid,
+    TinyButton
   },
   data() {
     return {}
diff --git a/examples/sites/demos/pc/app/grid/large-data/virtual-rolling-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/virtual-rolling-composition-api.vue
index a4f01a783..ddf46d307 100644
--- a/examples/sites/demos/pc/app/grid/large-data/virtual-rolling-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/virtual-rolling-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tinyTableRef = ref()
 const optimizationData = {
diff --git a/examples/sites/demos/pc/app/grid/large-data/virtual-rolling.vue b/examples/sites/demos/pc/app/grid/large-data/virtual-rolling.vue
index d6fa6dc64..d37743604 100644
--- a/examples/sites/demos/pc/app/grid/large-data/virtual-rolling.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/virtual-rolling.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
index 679bcb255..785e5e5fc 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([])
 const loading = ref(true)
@@ -48,6 +48,7 @@ const init = () => {
         city: '韶关'
       }
     ]
+
     loading.value = false
   }, 2000)
 }
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
index 075b89026..0396e35dc 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
+++ b/examples/sites/demos/pc/app/grid/loading/grid-custom-loading.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
@@ -67,6 +67,7 @@ export default {
             city: '韶关'
           }
         ]
+
         this.loading = false
       }, 2000)
     }
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-loading-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/loading/grid-loading-tip-composition-api.vue
index 7e87379b8..0e723a3fa 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-loading-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/loading/grid-loading-tip-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableDataRaw = [
   {
diff --git a/examples/sites/demos/pc/app/grid/loading/grid-loading-tip.vue b/examples/sites/demos/pc/app/grid/loading/grid-loading-tip.vue
index 3f520b4ba..c035f7485 100644
--- a/examples/sites/demos/pc/app/grid/loading/grid-loading-tip.vue
+++ b/examples/sites/demos/pc/app/grid/loading/grid-loading-tip.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = [
   {
@@ -43,9 +43,9 @@ const tableData = [
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config-composition-api.vue b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config-composition-api.vue
index 15c652403..673da544f 100644
--- a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const keyboardConfigData = ref({
   isArrow: true, // 是否开启方向键功能，默认false
@@ -34,7 +34,7 @@ const keyboardConfigData = ref({
   isTab: true, // 是否开启 Tab 键功能，默认false
   isEdit: true, // 是否开启任意键进入编辑（功能键除外），默认false
   editMethod({ seq }) {
-    Modal.message({ message: `seq: ${seq}`, status: 'info' })
+    TinyModal.message({ message: `seq: ${seq}`, status: 'info' })
   }
 })
 const options = ref([
diff --git a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config.vue b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config.vue
index 25faadab0..7e768394d 100644
--- a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config.vue
+++ b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-config.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -40,7 +40,7 @@ export default {
         isTab: true, // 是否开启 Tab 键功能，默认false
         isEdit: true, // 是否开启任意键进入编辑（功能键除外），默认false
         editMethod({ seq }) {
-          Modal.message({ message: `seq: ${seq}`, status: 'info' })
+          TinyModal.message({ message: `seq: ${seq}`, status: 'info' })
         }
       },
       options: [
diff --git a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation-composition-api.vue b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation-composition-api.vue
index 92158bfb9..ee22f510d 100644
--- a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const options = ref([
   { label: '华北区', value: '华北区' },
diff --git a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.vue b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.vue
index 6945567b3..3d414c874 100644
--- a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.vue
+++ b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config-composition-api.vue b/examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config-composition-api.vue
index 0b01c0b2f..30ce14437 100644
--- a/examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config.vue b/examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config.vue
index 9cb8c6cd9..838c26373 100644
--- a/examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config.vue
+++ b/examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue
index 878133cae..9945cbfd9 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue b/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue
index ce81649ad..d11a82421 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue
index 35d7e910b..b1b388b04 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import { iconEdit, iconSearch } from '@opentiny/vue-icon'
 
 const tableData = ref([
@@ -70,7 +70,7 @@ const TinyIconEdit = iconEdit()
 const TinyIconSearch = iconSearch()
 
 function clickHandler(row) {
-  Modal.message({ message: JSON.stringify(row), status: 'success' })
+  TinyModal.message({ message: JSON.stringify(row), status: 'success' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue
index c79d66aaa..bc859049d 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 import { IconEdit, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
+    TinyGrid,
+    TinyGridColumn,
     IconEdit: IconEdit(),
     IconSearch: IconSearch()
   },
@@ -77,7 +77,7 @@ export default {
   },
   methods: {
     clickHandler(row) {
-      Modal.message({ message: JSON.stringify(row), status: 'success' })
+      TinyModal.message({ message: JSON.stringify(row), status: 'success' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue
index 1bf9e8e50..e487d4fc1 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue
@@ -21,13 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Dropdown as TinyDropdown,
-  DropdownMenu as TinyDropdownMenu,
-  DropdownItem as TinyDropdownItem
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue b/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue
index 15e410f19..5fdfa7b36 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue
@@ -20,15 +20,15 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
+    TinyGrid,
+    TinyGridColumn,
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue
index 1f4eb0506..6e1c17273 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue
@@ -22,14 +22,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Pager,
-  Notify,
-  Modal,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyNotify, TinyModal, TinyButton } from '@opentiny/vue'
 
 const tableSelectConfigData = ref({
   // 翻页时记住选择项，必须同时配置row-id
@@ -40,7 +33,7 @@ const tableSelectConfigData = ref({
   }
 })
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
@@ -57,7 +50,7 @@ const gridRef = ref()
 
 function getAllSelection() {
   const selection = gridRef.value.getAllSelection()
-  Modal.message({ status: 'info', message: `一共选中了${selection.length}项数据` })
+  TinyModal.message({ status: 'info', message: `一共选中了${selection.length}项数据` })
 }
 
 function getTableData() {
@@ -149,7 +142,7 @@ function getData({ page }) {
 }
 
 function selectedDevices({ $table }) {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '获取选中的所有数据',
     message: JSON.stringify($table.selection),
diff --git a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue
index 7fa77b3e6..538ad3711 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, Notify, Button, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyNotify, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
@@ -40,7 +40,7 @@ export default {
         }
       },
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
@@ -57,7 +57,7 @@ export default {
   methods: {
     getAllSelection() {
       const selection = this.$refs.grid.getAllSelection()
-      Modal.message({ status: 'info', message: `一共选中了${selection.length}项数据` })
+      TinyModal.message({ status: 'info', message: `一共选中了${selection.length}项数据` })
     },
     getTableData() {
       return [
@@ -146,7 +146,7 @@ export default {
       })
     },
     selectedDevices({ $table }) {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '获取选中的所有数据',
         message: JSON.stringify($table.selection),
diff --git a/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue
index 591e934a0..a4e316c1d 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const selectConfig = ref({
   // 设置为true或undefined，在空数据时Selection列表头复选框会自动禁用；设置为false则不自动禁用保持和旧版本兼容
diff --git a/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue b/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue
index 1abc8c67c..e95866aa2 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
index 7ddcd1129..a47f11ba6 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref, onMounted } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const radioConfigData = ref({
   labelField: 'area',
diff --git a/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue b/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
index dfa3fb9cf..0c100023d 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   mounted() {
     const allData = this.$refs.mytable.getData()
diff --git a/examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue
index 0dd509790..550890f3b 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue
@@ -16,17 +16,11 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Pager,
-  GridToolbar as TinyGridToolbar,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 
 const loading = ref(true)
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
index fa7068fb2..f5fb11040 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-config.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-config.vue
index 0ac6bd0a2..be2484ac9 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-config.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-config.vue
@@ -27,12 +27,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const tableData = [
@@ -101,6 +101,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       tableData,
       selectConfig: {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
index d01ff7b09..efa9150e2 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
index 1d1a82341..de6d9d0d8 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue b/examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue
index ad2b9c308..724bacfaf 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const pagerConfig = ref({
   attrs: {
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue b/examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue
index 3b304462d..b8d8cad84 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue
+++ b/examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue b/examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue
index 84e209bac..1eb79b293 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue
@@ -12,10 +12,10 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-pager.vue b/examples/sites/demos/pc/app/grid/pager/inner-pager.vue
index 71e7b2609..b34f26a85 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-pager.vue
+++ b/examples/sites/demos/pc/app/grid/pager/inner-pager.vue
@@ -11,17 +11,17 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue b/examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue
index 8984d4de9..30c1aa55d 100644
--- a/examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue
@@ -37,7 +37,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager as TinyPager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 const custPager = ref({
   currentPage: 1,
diff --git a/examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue b/examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue
index 903ff8b97..ae9bbb46c 100644
--- a/examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue
+++ b/examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue
@@ -36,13 +36,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyPager: Pager
+    TinyGrid,
+    TinyGridColumn,
+    TinyPager
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue b/examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue
index f8c1807ec..aee7fc0a7 100644
--- a/examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue
@@ -20,10 +20,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
@@ -122,6 +122,6 @@ function getData({ page }) {
 }
 
 function pageChange() {
-  Modal.message({ message: '取消分页', status: 'info' })
+  TinyModal.message({ message: '取消分页', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/pager/show-save-msg.vue b/examples/sites/demos/pc/app/grid/pager/show-save-msg.vue
index 715f21246..ce9ca2bcd 100644
--- a/examples/sites/demos/pc/app/grid/pager/show-save-msg.vue
+++ b/examples/sites/demos/pc/app/grid/pager/show-save-msg.vue
@@ -19,17 +19,17 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
@@ -129,7 +129,7 @@ export default {
       })
     },
     pageChange() {
-      Modal.message({ message: '取消分页', status: 'info' })
+      TinyModal.message({ message: '取消分页', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
index 6d2c280fd..6373ef900 100644
--- a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
@@ -30,11 +30,11 @@
 
 <script setup lang="jsx">
 import { ref, onMounted } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Select } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinySelect } from '@opentiny/vue'
 
 const options = ref([])
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
index 32b46739e..57291ed8b 100644
--- a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
@@ -30,19 +30,19 @@
 
 <script lang="jsx">
 // TEXTFIELD  FORMAT-CONFIG  LABLE  VALUE  ASYNC:true  type:enun
-import { Grid, GridColumn, Pager, Select } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      Select,
+      TinySelect,
       options: [],
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue
index b89cd2a02..c6db2fcfd 100644
--- a/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/custom-renderer-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Switch, Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinySwitch, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue b/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue
index 2ff6868c9..31348f5d0 100644
--- a/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/custom-renderer.vue
@@ -18,16 +18,16 @@
 </template>
 
 <script lang="jsx">
-import { Switch, Grid, GridColumn } from '@opentiny/vue'
+import { TinySwitch, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      Switch,
+      TinySwitch,
       tableData: [
         {
           id: '1',
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-composition-api.vue
index 7a31f16a8..9f5b8b93b 100644
--- a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-composition-api.vue
@@ -32,7 +32,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date-composition-api.vue
index 2c7d3eb9d..986186951 100644
--- a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 const tableData = ref([
   {
     id: '1',
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date.vue b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date.vue
index 7c777dea9..e29cab544 100644
--- a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-date.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate-composition-api.vue
index 21d8bf45b..e214516b5 100644
--- a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   { id: '1', rate: 2, rate1: 0 },
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.vue b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.vue
index 19ae8c221..562745c3d 100644
--- a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer.vue b/examples/sites/demos/pc/app/grid/renderer/inner-renderer.vue
index d171515c6..8b0593629 100644
--- a/examples/sites/demos/pc/app/grid/renderer/inner-renderer.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer.vue
@@ -31,12 +31,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
index 1118bdb55..45b836a9b 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script lang="jsx" setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const data = ref([
   {
@@ -133,7 +133,7 @@ function activeMethod({ value }) {
   // return false // 所有分组默认收起
 }
 function onToggleGroupChange({ row }) {
-  Modal.message({ message: `分组${row.fold ? '合起' : '展开'}`, status: 'info' })
+  TinyModal.message({ message: `分组${row.fold ? '合起' : '展开'}`, status: 'info' })
 }
 function renderGroupCell(h, { row, column }) {
   if (row.value !== '华南区') return
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.vue
index 7730d4554..998147755 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -148,7 +148,7 @@ export default {
       // return false // 所有分组默认收起
     },
     onToggleGroupChange({ row }) {
-      Modal.message({ message: `分组${row.fold ? '合起' : '展开'}`, status: 'info' })
+      TinyModal.message({ message: `分组${row.fold ? '合起' : '展开'}`, status: 'info' })
     },
     renderGroupCell(h, { row, column }) {
       if (row.value !== '华南区') return
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll-composition-api.vue
index ff519b2eb..67623cbb8 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll-composition-api.vue
@@ -50,7 +50,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const codePointA = 'A'.codePointAt(0)
 const areas = ['华东区', '华南区', '华中区', '西南区']
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.vue
index 49e58f4da..b1e6f69dd 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const codePointA = 'A'.codePointAt(0)
 const areas = ['华东区', '华南区', '华中区', '西南区']
@@ -78,8 +78,8 @@ const rows = Array(total)
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan-composition-api.vue
index 26dd72e59..74c910c14 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const data = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue
index bda7d4d45..c9ce2d537 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue
@@ -13,16 +13,16 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      Pager,
+      TinyPager,
       data: [
         {
           id: '1',
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
index 0ba0be1b0..9fb161609 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const data = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
index 65eec1c5a..a893f8d7f 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
@@ -13,16 +13,16 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      Pager,
+      TinyPager,
       data: [
         {
           id: '1',
diff --git a/examples/sites/demos/pc/app/grid/serial-column/custom-serial-column-composition-api.vue b/examples/sites/demos/pc/app/grid/serial-column/custom-serial-column-composition-api.vue
index db2d40aed..220e4c77e 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/custom-serial-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/custom-serial-column-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/serial-column/custom-serial-column.vue b/examples/sites/demos/pc/app/grid/serial-column/custom-serial-column.vue
index fa056a4aa..697de4e89 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/custom-serial-column.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/custom-serial-column.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/serial-column/default-serial-column-composition-api.vue b/examples/sites/demos/pc/app/grid/serial-column/default-serial-column-composition-api.vue
index 020b24919..3aa638fbb 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/default-serial-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/default-serial-column-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/serial-column/default-serial-column.vue b/examples/sites/demos/pc/app/grid/serial-column/default-serial-column.vue
index 5581309ce..822ffbb8c 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/default-serial-column.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/default-serial-column.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue b/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
index 1aa44bc8c..83892feb5 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 const fetchData = ref({
   api: getData
diff --git a/examples/sites/demos/pc/app/grid/serial-column/start-index.vue b/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
index f8b7788ef..e1560d76d 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
@@ -25,16 +25,16 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
-      Pager,
+      TinyPager,
       fetchData: {
         api: this.getData
       },
diff --git a/examples/sites/demos/pc/app/grid/size/adaptive-column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/adaptive-column-width-composition-api.vue
index b37ee0b51..955db1e2c 100644
--- a/examples/sites/demos/pc/app/grid/size/adaptive-column-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/adaptive-column-width-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/adaptive-column-width.vue b/examples/sites/demos/pc/app/grid/size/adaptive-column-width.vue
index 6fc358477..373a2c1ce 100644
--- a/examples/sites/demos/pc/app/grid/size/adaptive-column-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/adaptive-column-width.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue b/examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue
index 7cbac11f3..a77c9bbb9 100644
--- a/examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue
@@ -20,11 +20,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
 
 const height = ref({})
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/size/auto-height.vue b/examples/sites/demos/pc/app/grid/size/auto-height.vue
index 24ae818bc..ae7d34e45 100644
--- a/examples/sites/demos/pc/app/grid/size/auto-height.vue
+++ b/examples/sites/demos/pc/app/grid/size/auto-height.vue
@@ -19,19 +19,19 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     return {
       height: {},
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/size/column-min-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/column-min-width-composition-api.vue
index ef4b02be8..4f771f19d 100644
--- a/examples/sites/demos/pc/app/grid/size/column-min-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/column-min-width-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/column-min-width.vue b/examples/sites/demos/pc/app/grid/size/column-min-width.vue
index 096c258f0..b08807cbb 100644
--- a/examples/sites/demos/pc/app/grid/size/column-min-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/column-min-width.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue
index 090f6f275..5e48f9a05 100644
--- a/examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/column-width.vue b/examples/sites/demos/pc/app/grid/size/column-width.vue
index 0b2f53cbc..6b8a242fb 100644
--- a/examples/sites/demos/pc/app/grid/size/column-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/column-width.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue
index f56511dd9..afb6b3f64 100644
--- a/examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/fixed-column-width-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/fixed-column-width.vue b/examples/sites/demos/pc/app/grid/size/fixed-column-width.vue
index 4c456821f..f4e52b8fd 100644
--- a/examples/sites/demos/pc/app/grid/size/fixed-column-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/fixed-column-width.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/fixed-grid-height-composition-api.vue b/examples/sites/demos/pc/app/grid/size/fixed-grid-height-composition-api.vue
index d6d9417f8..de7ee66fd 100644
--- a/examples/sites/demos/pc/app/grid/size/fixed-grid-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/fixed-grid-height-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/fixed-grid-height.vue b/examples/sites/demos/pc/app/grid/size/fixed-grid-height.vue
index 6fe6306e8..d6f7706b6 100644
--- a/examples/sites/demos/pc/app/grid/size/fixed-grid-height.vue
+++ b/examples/sites/demos/pc/app/grid/size/fixed-grid-height.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/grid-resizable-config-composition-api.vue b/examples/sites/demos/pc/app/grid/size/grid-resizable-config-composition-api.vue
index ac9d1a3d5..bca7b2226 100644
--- a/examples/sites/demos/pc/app/grid/size/grid-resizable-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/grid-resizable-config-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 /**
  * 限制列宽在 min, max 之间
diff --git a/examples/sites/demos/pc/app/grid/size/grid-resizable-config.vue b/examples/sites/demos/pc/app/grid/size/grid-resizable-config.vue
index 30822da35..08bfc151c 100644
--- a/examples/sites/demos/pc/app/grid/size/grid-resizable-config.vue
+++ b/examples/sites/demos/pc/app/grid/size/grid-resizable-config.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 /**
  * 限制列宽在 min, max 之间
@@ -35,8 +35,8 @@ function limitWidth(width, min, max) {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue b/examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue
index 7155d1650..2a2b2e2ea 100644
--- a/examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('medium')
 
diff --git a/examples/sites/demos/pc/app/grid/size/grid-size.vue b/examples/sites/demos/pc/app/grid/size/grid-size.vue
index 31f476877..ab85736b3 100644
--- a/examples/sites/demos/pc/app/grid/size/grid-size.vue
+++ b/examples/sites/demos/pc/app/grid/size/grid-size.vue
@@ -28,14 +28,14 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Tabs, TabItem } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyTabs,
+    TinyTabItem,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const tableData = [
@@ -104,6 +104,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       tableData,
       activeName: 'medium'
diff --git a/examples/sites/demos/pc/app/grid/size/max-min-grid-height-composition-api.vue b/examples/sites/demos/pc/app/grid/size/max-min-grid-height-composition-api.vue
index f656019e9..5a140c925 100644
--- a/examples/sites/demos/pc/app/grid/size/max-min-grid-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/max-min-grid-height-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/max-min-grid-height.vue b/examples/sites/demos/pc/app/grid/size/max-min-grid-height.vue
index 362fee01b..8cd103c51 100644
--- a/examples/sites/demos/pc/app/grid/size/max-min-grid-height.vue
+++ b/examples/sites/demos/pc/app/grid/size/max-min-grid-height.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/min-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/min-width-composition-api.vue
index 08bd9c804..549ca27b7 100644
--- a/examples/sites/demos/pc/app/grid/size/min-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/min-width-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/min-width.vue b/examples/sites/demos/pc/app/grid/size/min-width.vue
index d2c1911b4..6e08f5147 100644
--- a/examples/sites/demos/pc/app/grid/size/min-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/min-width.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/recalculate-composition-api.vue b/examples/sites/demos/pc/app/grid/size/recalculate-composition-api.vue
index 388401824..0f8f8cdea 100644
--- a/examples/sites/demos/pc/app/grid/size/recalculate-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/recalculate-composition-api.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/recalculate.vue b/examples/sites/demos/pc/app/grid/size/recalculate.vue
index be53bb5e2..f7e23248d 100644
--- a/examples/sites/demos/pc/app/grid/size/recalculate.vue
+++ b/examples/sites/demos/pc/app/grid/size/recalculate.vue
@@ -25,13 +25,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     const tableData = [
@@ -100,6 +100,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       tableData,
       divWidth: 'width: 500px;'
diff --git a/examples/sites/demos/pc/app/grid/size/resize-column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/resize-column-width-composition-api.vue
index 1053c8668..c78dd014a 100644
--- a/examples/sites/demos/pc/app/grid/size/resize-column-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/resize-column-width-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/size/resize-column-width.vue b/examples/sites/demos/pc/app/grid/size/resize-column-width.vue
index f4c0558c9..87297c3c4 100644
--- a/examples/sites/demos/pc/app/grid/size/resize-column-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/resize-column-width.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/size/resize-operation-column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/resize-operation-column-width-composition-api.vue
index ffd7dd743..54352e2ac 100644
--- a/examples/sites/demos/pc/app/grid/size/resize-operation-column-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/resize-operation-column-width-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   { id: '1', name: 'GFD科技有限公司', area: '华东区', address: '福州' },
diff --git a/examples/sites/demos/pc/app/grid/size/resize-operation-column-width.vue b/examples/sites/demos/pc/app/grid/size/resize-operation-column-width.vue
index 417046980..6648b9e36 100644
--- a/examples/sites/demos/pc/app/grid/size/resize-operation-column-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/resize-operation-column-width.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/slot/buttons-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/slot/buttons-slot-composition-api.vue
index b8300019f..b712abbb9 100644
--- a/examples/sites/demos/pc/app/grid/slot/buttons-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/slot/buttons-slot-composition-api.vue
@@ -31,7 +31,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -117,21 +117,21 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        Modal.alert('请至少选中一条记录')
+        TinyModal.alert('请至少选中一条记录')
       }
       $grid.removeSelecteds()
       break
     }
     case 'getDelete': {
       const removeRecords = $grid.getRemoveRecords() // 获取删除的数据
-      Modal.alert('获取删除的数据' + JSON.stringify(removeRecords))
+      TinyModal.alert('获取删除的数据' + JSON.stringify(removeRecords))
       break
     }
     case 'save': {
       if (!updateData.length && !insertData.length && !removeData.length) {
-        Modal.alert('没有修改记录')
+        TinyModal.alert('没有修改记录')
       } else {
-        Modal.message({
+        TinyModal.message({
           message: '点击保存触发, 新增的数据',
           status: 'info'
         })
@@ -143,7 +143,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'getRecordset': {
       const records = $grid.getRecordset()
-      Modal.alert('增删改记录集合：' + JSON.stringify(records))
+      TinyModal.alert('增删改记录集合：' + JSON.stringify(records))
       break
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/slot/buttons-slot.vue b/examples/sites/demos/pc/app/grid/slot/buttons-slot.vue
index 7e62d7362..932bd3e2e 100644
--- a/examples/sites/demos/pc/app/grid/slot/buttons-slot.vue
+++ b/examples/sites/demos/pc/app/grid/slot/buttons-slot.vue
@@ -30,13 +30,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
@@ -125,21 +125,21 @@ export default {
         }
         case 'delete': {
           if (data.length === 0) {
-            Modal.alert('请至少选中一条记录')
+            TinyModal.alert('请至少选中一条记录')
           }
           $grid.removeSelecteds()
           break
         }
         case 'getDelete': {
           const removeRecords = $grid.getRemoveRecords() // 获取删除的数据
-          Modal.alert('获取删除的数据' + JSON.stringify(removeRecords))
+          TinyModal.alert('获取删除的数据' + JSON.stringify(removeRecords))
           break
         }
         case 'save': {
           if (!updateData.length && !insertData.length && !removeData.length) {
-            Modal.alert('没有修改记录')
+            TinyModal.alert('没有修改记录')
           } else {
-            Modal.message({
+            TinyModal.message({
               message: '点击保存触发, 新增的数据',
               status: 'info'
             })
@@ -151,7 +151,7 @@ export default {
         }
         case 'getRecordset': {
           const records = $grid.getRecordset()
-          Modal.alert('增删改记录集合：' + JSON.stringify(records))
+          TinyModal.alert('增删改记录集合：' + JSON.stringify(records))
           break
         }
       }
diff --git a/examples/sites/demos/pc/app/grid/slot/default-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/slot/default-slot-composition-api.vue
index d178021a8..c051339ed 100644
--- a/examples/sites/demos/pc/app/grid/slot/default-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/slot/default-slot-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Tooltip as TinyTooltip } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyTooltip } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/slot/default-slot.vue b/examples/sites/demos/pc/app/grid/slot/default-slot.vue
index 6eb0ca52d..9d6aac93a 100644
--- a/examples/sites/demos/pc/app/grid/slot/default-slot.vue
+++ b/examples/sites/demos/pc/app/grid/slot/default-slot.vue
@@ -15,13 +15,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Tooltip } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyTooltip } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyTooltip,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue
index 70fea301a..8e449b7f4 100644
--- a/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue
@@ -25,16 +25,10 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Input as TinyInput,
-  TimePicker as TinyTimePicker,
-  Modal
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyTimePicker, TinyModal } from '@opentiny/vue'
 
 function change() {
-  Modal.message({ message: '下班时间编辑完成', status: 'info' })
+  TinyModal.message({ message: '下班时间编辑完成', status: 'info' })
 }
 
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/slot/editor-slot.vue b/examples/sites/demos/pc/app/grid/slot/editor-slot.vue
index 0ab092f27..30d0701b5 100644
--- a/examples/sites/demos/pc/app/grid/slot/editor-slot.vue
+++ b/examples/sites/demos/pc/app/grid/slot/editor-slot.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Input, TimePicker, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyTimePicker, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyInput: Input,
-    TinyTimePicker: TimePicker
+    TinyGrid,
+    TinyGridColumn,
+    TinyInput,
+    TinyTimePicker
   },
   data() {
     return {
@@ -89,7 +89,7 @@ export default {
   },
   methods: {
     change() {
-      Modal.message({ message: '下班时间编辑完成', status: 'info' })
+      TinyModal.message({ message: '下班时间编辑完成', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/slot/empty-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/slot/empty-slot-composition-api.vue
index 1d75be095..ba775d89b 100644
--- a/examples/sites/demos/pc/app/grid/slot/empty-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/slot/empty-slot-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([])
 </script>
diff --git a/examples/sites/demos/pc/app/grid/slot/empty-slot.vue b/examples/sites/demos/pc/app/grid/slot/empty-slot.vue
index 27d9a9230..5b5019da7 100644
--- a/examples/sites/demos/pc/app/grid/slot/empty-slot.vue
+++ b/examples/sites/demos/pc/app/grid/slot/empty-slot.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/slot/header-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/slot/header-slot-composition-api.vue
index 76b102b39..39de9a002 100644
--- a/examples/sites/demos/pc/app/grid/slot/header-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/slot/header-slot-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/slot/header-slot.vue b/examples/sites/demos/pc/app/grid/slot/header-slot.vue
index 6915d1e4e..feeccfb97 100644
--- a/examples/sites/demos/pc/app/grid/slot/header-slot.vue
+++ b/examples/sites/demos/pc/app/grid/slot/header-slot.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { IconMarkOn } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
+    TinyGrid,
+    TinyGridColumn,
     IconMarkOn: IconMarkOn()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/grid/sort/combinations-sort-composition-api.vue b/examples/sites/demos/pc/app/grid/sort/combinations-sort-composition-api.vue
index 08e05db32..0ad7a9858 100644
--- a/examples/sites/demos/pc/app/grid/sort/combinations-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/sort/combinations-sort-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/sort/combinations-sort.vue b/examples/sites/demos/pc/app/grid/sort/combinations-sort.vue
index 53c54719c..a9dbd14fe 100644
--- a/examples/sites/demos/pc/app/grid/sort/combinations-sort.vue
+++ b/examples/sites/demos/pc/app/grid/sort/combinations-sort.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/sort/custom-sort-composition-api.vue b/examples/sites/demos/pc/app/grid/sort/custom-sort-composition-api.vue
index 5a9ba3393..a8b3c00e5 100644
--- a/examples/sites/demos/pc/app/grid/sort/custom-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/sort/custom-sort-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/sort/custom-sort.vue b/examples/sites/demos/pc/app/grid/sort/custom-sort.vue
index 865feb23b..a0968568b 100644
--- a/examples/sites/demos/pc/app/grid/sort/custom-sort.vue
+++ b/examples/sites/demos/pc/app/grid/sort/custom-sort.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/sort/default-sort-composition-api.vue b/examples/sites/demos/pc/app/grid/sort/default-sort-composition-api.vue
index 8495569d7..61b2b995b 100644
--- a/examples/sites/demos/pc/app/grid/sort/default-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/sort/default-sort-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/sort/default-sort.vue b/examples/sites/demos/pc/app/grid/sort/default-sort.vue
index 2c0d60fbe..512dcc7ae 100644
--- a/examples/sites/demos/pc/app/grid/sort/default-sort.vue
+++ b/examples/sites/demos/pc/app/grid/sort/default-sort.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue b/examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue
index 71a6a2232..38ea191a0 100644
--- a/examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue
@@ -11,10 +11,10 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 const pager = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 15,
@@ -87,7 +87,7 @@ const tableData = ref([
 ])
 
 function sortChangeEvent({ order }) {
-  Modal.message({ message: `${order || '取消排序'}`, status: 'info' })
+  TinyModal.message({ message: `${order || '取消排序'}`, status: 'info' })
 }
 
 function getData({ page, filters }) {
diff --git a/examples/sites/demos/pc/app/grid/sort/server-sort.vue b/examples/sites/demos/pc/app/grid/sort/server-sort.vue
index 5e072ea28..b8ea0b1c4 100644
--- a/examples/sites/demos/pc/app/grid/sort/server-sort.vue
+++ b/examples/sites/demos/pc/app/grid/sort/server-sort.vue
@@ -10,17 +10,17 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
       pager: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 15,
@@ -95,7 +95,7 @@ export default {
   },
   methods: {
     sortChangeEvent({ order }) {
-      Modal.message({ message: `${order || '取消排序'}`, status: 'info' })
+      TinyModal.message({ message: `${order || '取消排序'}`, status: 'info' })
     },
     getData({ page, filters }) {
       return new Promise((resolve) => {
diff --git a/examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue b/examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue
index ccab1cc01..c30a64d21 100644
--- a/examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/sort/sort.vue b/examples/sites/demos/pc/app/grid/sort/sort.vue
index 672801a04..4bd811177 100644
--- a/examples/sites/demos/pc/app/grid/sort/sort.vue
+++ b/examples/sites/demos/pc/app/grid/sort/sort.vue
@@ -31,13 +31,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     const tableData = [
@@ -106,6 +106,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       tableData
     }
diff --git a/examples/sites/demos/pc/app/grid/span/column-span-composition-api.vue b/examples/sites/demos/pc/app/grid/span/column-span-composition-api.vue
index 39a545623..e057f7f43 100644
--- a/examples/sites/demos/pc/app/grid/span/column-span-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/span/column-span-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/span/column-span.vue b/examples/sites/demos/pc/app/grid/span/column-span.vue
index 141a9809e..a726659f1 100644
--- a/examples/sites/demos/pc/app/grid/span/column-span.vue
+++ b/examples/sites/demos/pc/app/grid/span/column-span.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/span/row-span-composition-api.vue b/examples/sites/demos/pc/app/grid/span/row-span-composition-api.vue
index 404c18109..46797aec3 100644
--- a/examples/sites/demos/pc/app/grid/span/row-span-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/span/row-span-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/span/row-span-easy-composition-api.vue b/examples/sites/demos/pc/app/grid/span/row-span-easy-composition-api.vue
index 86a0195a2..31e113576 100644
--- a/examples/sites/demos/pc/app/grid/span/row-span-easy-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/span/row-span-easy-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/span/row-span-easy.vue b/examples/sites/demos/pc/app/grid/span/row-span-easy.vue
index a6c969bf3..bc128c43d 100644
--- a/examples/sites/demos/pc/app/grid/span/row-span-easy.vue
+++ b/examples/sites/demos/pc/app/grid/span/row-span-easy.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/span/row-span.vue b/examples/sites/demos/pc/app/grid/span/row-span.vue
index e66d48cca..2d759cf7b 100644
--- a/examples/sites/demos/pc/app/grid/span/row-span.vue
+++ b/examples/sites/demos/pc/app/grid/span/row-span.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/tip/cell-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/tip/cell-tip-composition-api.vue
index 1cd9fdcbb..9d2e86f11 100644
--- a/examples/sites/demos/pc/app/grid/tip/cell-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tip/cell-tip-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tip/cell-tip-config-composition-api.vue b/examples/sites/demos/pc/app/grid/tip/cell-tip-config-composition-api.vue
index f8726742a..e912f471d 100644
--- a/examples/sites/demos/pc/app/grid/tip/cell-tip-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tip/cell-tip-config-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tip/cell-tip-config.vue b/examples/sites/demos/pc/app/grid/tip/cell-tip-config.vue
index ab860e310..68338b5ca 100644
--- a/examples/sites/demos/pc/app/grid/tip/cell-tip-config.vue
+++ b/examples/sites/demos/pc/app/grid/tip/cell-tip-config.vue
@@ -24,12 +24,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     contentMethod({ row, column, isHeader, content }) {
diff --git a/examples/sites/demos/pc/app/grid/tip/cell-tip.vue b/examples/sites/demos/pc/app/grid/tip/cell-tip.vue
index 89fbe292f..2ef1f619e 100644
--- a/examples/sites/demos/pc/app/grid/tip/cell-tip.vue
+++ b/examples/sites/demos/pc/app/grid/tip/cell-tip.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/tip/column-header-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/tip/column-header-tip-composition-api.vue
index d4891e5c6..e36fe6717 100644
--- a/examples/sites/demos/pc/app/grid/tip/column-header-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tip/column-header-tip-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tip/column-header-tip.vue b/examples/sites/demos/pc/app/grid/tip/column-header-tip.vue
index d06e5c379..f4d617446 100644
--- a/examples/sites/demos/pc/app/grid/tip/column-header-tip.vue
+++ b/examples/sites/demos/pc/app/grid/tip/column-header-tip.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue
index 82f4d5500..50ca098a1 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue
@@ -30,10 +30,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue b/examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue
index 0cc1a968f..699f56683 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue
@@ -29,18 +29,18 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/clear-data-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/clear-data-composition-api.vue
index b2b33c5c6..3239b6fb9 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/clear-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/clear-data-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/clear-data.vue b/examples/sites/demos/pc/app/grid/toolbar/clear-data.vue
index 519932e22..c17422004 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/clear-data.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/clear-data.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/copy-row-data-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/copy-row-data-composition-api.vue
index 59332826f..70ddabfe2 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/copy-row-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/copy-row-data-composition-api.vue
@@ -31,7 +31,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -90,7 +90,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
   switch (code) {
     case 'copy': {
       if (data.length === 0) {
-        Modal.message({ message: '请至少选中一条记录', status: 'info' })
+        TinyModal.message({ message: '请至少选中一条记录', status: 'info' })
       }
 
       data.forEach((item) => {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/copy-row-data.vue b/examples/sites/demos/pc/app/grid/toolbar/copy-row-data.vue
index b5bacc2ce..9d962afd5 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/copy-row-data.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/copy-row-data.vue
@@ -30,13 +30,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
@@ -99,7 +99,7 @@ export default {
       switch (code) {
         case 'copy': {
           if (data.length === 0) {
-            Modal.message({ message: '请至少选中一条记录', status: 'info' })
+            TinyModal.message({ message: '请至少选中一条记录', status: 'info' })
           }
 
           data.forEach((item) => {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue
index fa51ba814..876d40326 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue
@@ -54,17 +54,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Pager,
-  Search as TinySearch,
-  Button as TinyButton,
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  GridToolbar as TinyGridToolbar
-} from '@opentiny/vue'
+import { TinyPager, TinySearch, TinyButton, TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const pagerConfig = ref({
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue b/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue
index a4cdb9e18..6e9e3e4ce 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue
@@ -53,20 +53,20 @@
 </template>
 
 <script lang="jsx">
-import { Pager, Search, Button, Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyPager, TinySearch, TinyButton, TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search,
-    TinyButton: Button,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinySearch,
+    TinyButton,
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 10,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-composition-api.vue
index 91fb69896..1043988e9 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -66,7 +66,7 @@ const tableData = ref([
 function beforeOpenFullScreen() {
   let doAction = true
 
-  Modal.message({
+  TinyModal.message({
     message: doAction ? '不阻止全屏' : '阻止全屏',
     status: 'info'
   })
@@ -77,7 +77,7 @@ function beforeOpenFullScreen() {
 function beforeCloseFullScreen() {
   let doAction = true
 
-  Modal.message({
+  TinyModal.message({
     message: doAction ? '不阻止退出全屏' : '阻止退出全屏',
     status: 'info'
   })
@@ -86,7 +86,7 @@ function beforeCloseFullScreen() {
 }
 
 function onFullscreen(isFull) {
-  Modal.message({
+  TinyModal.message({
     message: isFull ? '全屏了' : '关闭全屏了',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-height-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-height-composition-api.vue
index 71dd22b05..c501eed77 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-height-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const isFull = ref(false)
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-height.vue b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-height.vue
index 33308b26b..2d3951fc0 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-height.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-height.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-teleport-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-teleport-composition-api.vue
index 1e7d0177b..e3009cb41 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-teleport-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-teleport-composition-api.vue
@@ -15,7 +15,7 @@
 <script setup>
 import { Teleport as TinyTeleport } from '@opentiny/vue-common'
 import { ref, nextTick } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 const isFullscreen = ref(false)
 const fullscreenStyle = ref('')
diff --git a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-teleport.vue b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-teleport.vue
index 9ea0b2f96..d54888e95 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-teleport.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen-teleport.vue
@@ -14,14 +14,14 @@
 
 <script>
 import { Teleport } from '@opentiny/vue-common'
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
     TinyTeleport: Teleport,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen.vue b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen.vue
index a0b65e425..b44c106e8 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/grid-full-screen.vue
@@ -15,13 +15,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
@@ -75,7 +75,7 @@ export default {
     beforeOpenFullScreen() {
       let doAction = true
 
-      Modal.message({
+      TinyModal.message({
         message: doAction ? '不阻止全屏' : '阻止全屏',
         status: 'info'
       })
@@ -85,7 +85,7 @@ export default {
     beforeCloseFullScreen() {
       let doAction = true
 
-      Modal.message({
+      TinyModal.message({
         message: doAction ? '不阻止退出全屏' : '阻止退出全屏',
         status: 'info'
       })
@@ -93,7 +93,7 @@ export default {
       return doAction
     },
     onFullscreen(isFull) {
-      Modal.message({
+      TinyModal.message({
         message: isFull ? '全屏了' : '关闭全屏了',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/grid/toolbar/insert-delete-update-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/insert-delete-update-composition-api.vue
index 96d1066db..f9eb38c3c 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/insert-delete-update-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/insert-delete-update-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -126,21 +126,21 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        Modal.alert('请至少选中一条记录')
+        TinyModal.alert('请至少选中一条记录')
       }
       $grid.removeSelecteds()
       break
     }
     case 'getDelete': {
       const deleteData = $grid.getRemoveRecords() // 获取删除的数据
-      Modal.alert('获取删除的数据：' + JSON.stringify(deleteData))
+      TinyModal.alert('获取删除的数据：' + JSON.stringify(deleteData))
       break
     }
     case 'save': {
       if (!updateData.length && !insertData.length) {
-        Modal.alert('没有修改记录')
+        TinyModal.alert('没有修改记录')
       } else {
-        Modal.message({
+        TinyModal.message({
           message: '点击保存触发, 新增的数据',
           status: 'info'
         })
@@ -152,7 +152,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'getRecordset': {
       const records = $grid.getRecordset()
-      Modal.alert('增删改记录集合：' + JSON.stringify(records))
+      TinyModal.alert('增删改记录集合：' + JSON.stringify(records))
       break
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/toolbar/insert-delete-update.vue b/examples/sites/demos/pc/app/grid/toolbar/insert-delete-update.vue
index 80b6bfd4e..425b7e879 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/insert-delete-update.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/insert-delete-update.vue
@@ -33,13 +33,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
@@ -134,21 +134,21 @@ export default {
         }
         case 'delete': {
           if (data.length === 0) {
-            Modal.alert('请至少选中一条记录')
+            TinyModal.alert('请至少选中一条记录')
           }
           $grid.removeSelecteds()
           break
         }
         case 'getDelete': {
           const deleteData = $grid.getRemoveRecords() // 获取删除的数据
-          Modal.alert('获取删除的数据：' + JSON.stringify(deleteData))
+          TinyModal.alert('获取删除的数据：' + JSON.stringify(deleteData))
           break
         }
         case 'save': {
           if (!updateData.length && !insertData.length) {
-            Modal.alert('没有修改记录')
+            TinyModal.alert('没有修改记录')
           } else {
-            Modal.message({
+            TinyModal.message({
               message: '点击保存触发, 新增的数据',
               status: 'info'
             })
@@ -160,7 +160,7 @@ export default {
         }
         case 'getRecordset': {
           const records = $grid.getRecordset()
-          Modal.alert('增删改记录集合：' + JSON.stringify(records))
+          TinyModal.alert('增删改记录集合：' + JSON.stringify(records))
           break
         }
       }
diff --git a/examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows-composition-api.vue
index e47d4f842..3547f04c3 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { iconPlus, iconDel } from '@opentiny/vue-icon'
 
 const TinyIconPlus = iconPlus()
diff --git a/examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows.vue b/examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows.vue
index 8d606aec9..40c54066e 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/insert-remove-rows.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { IconPlus, IconDel } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
+    TinyGrid,
+    TinyGridColumn,
     IconPlus: IconPlus(),
     IconDel: IconDel()
   },
diff --git a/examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue
index 2aa36ca4c..7399c328e 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue
@@ -17,20 +17,14 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Pager,
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  GridToolbar as TinyGridToolbar,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinyPager, TinyGrid, TinyGridColumn, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 
 const loading = ref(true)
 
 const grid = ref('grid')
 
 const pagerConfig = {
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue b/examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue
index 05089e065..37608f95c 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue
@@ -16,20 +16,20 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, GridToolbar, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyButton: Button,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyButton,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
       loading: true,
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue
index d3440ecec..6d72ad4c8 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue
@@ -30,10 +30,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 const pagerConfig = {
-  component: Pager,
+  component: TinyPager,
   attrs: {
     currentPage: 1,
     pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/save-data.vue b/examples/sites/demos/pc/app/grid/toolbar/save-data.vue
index 6a72fbca0..4bd18491c 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/save-data.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/save-data.vue
@@ -29,18 +29,18 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager, TinyGridToolbar } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     return {
       pagerConfig: {
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue
index a99c6ebd4..500427bcd 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, Pager, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyPager, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const op = ref({
   seqSerial: true,
@@ -14,7 +14,7 @@ const op = ref({
     api: getData
   },
   toolbar: {
-    component: GridToolbar,
+    component: TinyGridToolbar,
     buttons: [
       {
         code: 'insert',
@@ -42,7 +42,7 @@ const op = ref({
     toolbarButtonClick: toolbarButtonClickEvent
   },
   pager: {
-    component: Pager,
+    component: TinyPager,
     attrs: {
       currentPage: 1,
       pageSize: 5,
@@ -182,7 +182,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
       break
     case 'copy': {
       if (data.length === 0) {
-        Modal.alert('请至少选中一条记录')
+        TinyModal.alert('请至少选中一条记录')
       }
       data.forEach((item) => {
         delete item._RID
@@ -196,14 +196,14 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        Modal.alert('请至少选中一条记录')
+        TinyModal.alert('请至少选中一条记录')
       }
       $grid.removeSelecteds()
       break
     }
     case 'save': {
       if (editRows.length === 0) {
-        Modal.alert('没有修改记录')
+        TinyModal.alert('没有修改记录')
       }
       break
     }
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
index c42910d61..9f7eb2489 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { Grid as TinyGrid, Pager, GridToolbar, Button } from '@opentiny/vue'
+import { TinyGrid, TinyPager, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 import { iconLanguage } from '@opentiny/vue-icon'
 
 const introduction = '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
@@ -38,11 +38,11 @@ const op = {
     api: getData
   },
   toolbar: {
-    component: GridToolbar,
+    component: TinyGridToolbar,
     // 支持配置式使用buttons和tools插槽
     slots: {
       buttons(params, h) {
-        return h('div', { class: 'buttons-wrapper' }, [h(Button, '配置式插槽')])
+        return h('div', { class: 'buttons-wrapper' }, [h(TinyButton, '配置式插槽')])
       },
       tools(params, h) {
         return h('div', { class: 'tools-pos' }, [[h(iconLanguage())]])
@@ -50,7 +50,7 @@ const op = {
     }
   },
   pager: {
-    component: Pager,
+    component: TinyPager,
     attrs: {
       currentPage: 1,
       pageSize: 3,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
index 72329b73f..f07f63b2f 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { Grid, Pager, GridToolbar, Button } from '@opentiny/vue'
+import { TinyGrid, TinyPager, TinyGridToolbar, TinyButton } from '@opentiny/vue'
 import { iconLanguage } from '@opentiny/vue-icon'
 
 const introduction = '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
@@ -19,7 +19,7 @@ const datas = [
 
 export default {
   components: {
-    TinyGrid: Grid
+    TinyGrid
   },
   data() {
     return {
@@ -30,11 +30,11 @@ export default {
           api: this.getData
         },
         toolbar: {
-          component: GridToolbar,
+          component: TinyGridToolbar,
           // 支持配置式使用buttons和tools插槽
           slots: {
             buttons(params, h) {
-              return h('div', { class: 'buttons-wrapper' }, [h(Button, '配置式插槽')])
+              return h('div', { class: 'buttons-wrapper' }, [h(TinyButton, '配置式插槽')])
             },
             tools(params, h) {
               return h('div', { class: 'tools-pos' }, [[h(iconLanguage())]])
@@ -42,7 +42,7 @@ export default {
           }
         },
         pager: {
-          component: Pager,
+          component: TinyPager,
           attrs: {
             currentPage: 1,
             pageSize: 3,
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue
index 1389c9245..4f5005722 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Grid, Pager, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyPager, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid
+    TinyGrid
   },
   data() {
     return {
@@ -19,7 +19,7 @@ export default {
           api: this.getData
         },
         toolbar: {
-          component: GridToolbar,
+          component: TinyGridToolbar,
           buttons: [
             {
               code: 'insert',
@@ -47,7 +47,7 @@ export default {
           toolbarButtonClick: this.toolbarButtonClickEvent
         },
         pager: {
-          component: Pager,
+          component: TinyPager,
           attrs: {
             currentPage: 1,
             pageSize: 5,
@@ -187,7 +187,7 @@ export default {
           break
         case 'copy': {
           if (data.length === 0) {
-            Modal.alert('请至少选中一条记录')
+            TinyModal.alert('请至少选中一条记录')
           }
           data.forEach((item) => {
             delete item._RID
@@ -201,14 +201,14 @@ export default {
         }
         case 'delete': {
           if (data.length === 0) {
-            Modal.alert('请至少选中一条记录')
+            TinyModal.alert('请至少选中一条记录')
           }
           $grid.removeSelecteds()
           break
         }
         case 'save': {
           if (editRows.length === 0) {
-            Modal.alert('没有修改记录')
+            TinyModal.alert('没有修改记录')
           }
           break
         }
diff --git a/examples/sites/demos/pc/app/grid/tree-table/has-tree-expand-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/has-tree-expand-composition-api.vue
index 45e9058f0..6fd7b95da 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/has-tree-expand-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/has-tree-expand-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -140,7 +140,7 @@ const treeGridRef = ref()
 
 function handTreeExpand({ row, rowIndex }) {
   if (treeGridRef.value.hasTreeExpand(row)) {
-    Modal.message({
+    TinyModal.message({
       message: `当前展开行：${JSON.stringify(rowIndex + 1)}`,
       status: 'info'
     })
diff --git a/examples/sites/demos/pc/app/grid/tree-table/has-tree-expand.vue b/examples/sites/demos/pc/app/grid/tree-table/has-tree-expand.vue
index 4e6e9b064..1c0d265ff 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/has-tree-expand.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/has-tree-expand.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
@@ -147,7 +147,7 @@ export default {
   methods: {
     handTreeExpand({ row, rowIndex }) {
       if (this.$refs.treeGrid.hasTreeExpand(row)) {
-        Modal.message({
+        TinyModal.message({
           message: `当前展开行：${JSON.stringify(rowIndex + 1)}`,
           status: 'info'
         })
diff --git a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
index 7d0f8c04a..15afd0ced 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
index e7eee3924..b437b60a4 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton
   },
   data() {
     const tableData = [
@@ -130,6 +130,7 @@ export default {
         ]
       }
     ]
+
     return {
       tableData
     }
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-base-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-base-composition-api.vue
index 05ac0e9e6..a5d902d10 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-base-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-base-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { iconRightO, iconDeltaDownO } from '@opentiny/vue-icon'
 
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-base.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-base.vue
index c55b3f43e..eb2adc092 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-base.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-base.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 import { iconRightO, iconDeltaDownO } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     renderIcon(h, { active }) {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue
index 7294644b7..daa09fec8 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref, onMounted } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 function aggregateTableData(data) {
   const result = []
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue
index 02c786c5e..6cf91fac6 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 function aggregateTableData(data) {
   const result = []
@@ -32,8 +32,8 @@ function aggregateTableData(data) {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-expand-active-method-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-expand-active-method-composition-api.vue
index aa01d88ac..5c7c5ad9c 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-expand-active-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-expand-active-method-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-expand-active-method.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-expand-active-method.vue
index a0fc3a83a..cfe3b47e8 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-expand-active-method.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-expand-active-method.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   mounted() {},
   data() {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-fixed-column-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-fixed-column-composition-api.vue
index c496e8f6f..5da1ab505 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-fixed-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-fixed-column-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-fixed-column.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-fixed-column.vue
index 2011dc84b..a32f10dac 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-fixed-column.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-fixed-column.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-checkfield-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-checkfield-composition-api.vue
index 0814c90bc..ad5cb94bc 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-checkfield-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-checkfield-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-checkfield.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-checkfield.vue
index 8a5071c21..ffd51ff8b 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-checkfield.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-checkfield.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
index 526c7e811..678f213a7 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
index f780ab1ac..6c1545898 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
index 159661f3f..3492efb7b 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
@@ -34,13 +34,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  Button as TinyButton,
-  GridToolbar as TinyGridToolbar,
-  Modal
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 function canRemove(node, nodes) {
   let flag = false
@@ -282,13 +276,13 @@ function removeEvent() {
 function getRemoveEvent() {
   let removeRecords = removeList.value
 
-  Modal.alert(removeRecords.length)
+  TinyModal.alert(removeRecords.length)
 }
 
 function getUpdateEvent() {
   let updateRecords = treeRef.value.getUpdateRecords()
 
-  Modal.alert(updateRecords.length)
+  TinyModal.alert(updateRecords.length)
 }
 
 function clearTreeExpand() {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
index 1634f5b12..70f40b563 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button, GridToolbar, Modal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 function canRemove(node, nodes) {
   let flag = false
@@ -88,10 +88,10 @@ function copy(nodes1, nodes2) {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyButton: Button,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyButton,
+    TinyGridToolbar
   },
   data() {
     return {
@@ -282,12 +282,12 @@ export default {
     getRemoveEvent() {
       let removeRecords = this.removeList
 
-      Modal.alert(removeRecords.length)
+      TinyModal.alert(removeRecords.length)
     },
     getUpdateEvent() {
       let updateRecords = this.$refs.tree.getUpdateRecords()
 
-      Modal.alert(updateRecords.length)
+      TinyModal.alert(updateRecords.length)
     },
     clearTreeExpand() {
       this.$refs.tree.clearTreeExpand()
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-keyboard-operation-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-keyboard-operation-composition-api.vue
index c0f504669..8a0da50a0 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-keyboard-operation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-keyboard-operation-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-keyboard-operation.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-keyboard-operation.vue
index e9f7297ac..39e35e7bb 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-keyboard-operation.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-keyboard-operation.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-operation-column-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-operation-column-composition-api.vue
index 3e5400137..525d6de83 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-operation-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-operation-column-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const tableData = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-operation-column.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-operation-column.vue
index c1a2de1f3..aad40eefb 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-operation-column.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-operation-column.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/grid/validation/asterisk-method-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/asterisk-method-composition-api.vue
index 41d6598dd..b9b1ba676 100644
--- a/examples/sites/demos/pc/app/grid/validation/asterisk-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/asterisk-method-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/asterisk-method.vue b/examples/sites/demos/pc/app/grid/validation/asterisk-method.vue
index 42cf89cce..5a41248eb 100644
--- a/examples/sites/demos/pc/app/grid/validation/asterisk-method.vue
+++ b/examples/sites/demos/pc/app/grid/validation/asterisk-method.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   name: [
@@ -46,8 +46,8 @@ const validRules = {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     asteriskMethod({ column }) {
diff --git a/examples/sites/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue
index 21b9185b4..918104c0c 100644
--- a/examples/sites/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue
@@ -21,12 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  GridToolbar as TinyGridToolbar,
-  Modal as TinyModal
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/before-submit-validation.vue b/examples/sites/demos/pc/app/grid/validation/before-submit-validation.vue
index 2b1cde533..c76e4a615 100644
--- a/examples/sites/demos/pc/app/grid/validation/before-submit-validation.vue
+++ b/examples/sites/demos/pc/app/grid/validation/before-submit-validation.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar, Modal as TinyModal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     const validRules = {
diff --git a/examples/sites/demos/pc/app/grid/validation/bubbling-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/bubbling-composition-api.vue
index eb23a6c04..58505bff9 100644
--- a/examples/sites/demos/pc/app/grid/validation/bubbling-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/bubbling-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/bubbling.vue b/examples/sites/demos/pc/app/grid/validation/bubbling.vue
index d45ec4b76..6a1e2e1eb 100644
--- a/examples/sites/demos/pc/app/grid/validation/bubbling.vue
+++ b/examples/sites/demos/pc/app/grid/validation/bubbling.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   name: [
@@ -51,8 +51,8 @@ const validRules = {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   methods: {
     asteriskMethod({ column }) {
diff --git a/examples/sites/demos/pc/app/grid/validation/custcomp-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/custcomp-composition-api.vue
index c99d45f23..e28a182e5 100644
--- a/examples/sites/demos/pc/app/grid/validation/custcomp-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/custcomp-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const CustomInput = {
   inheritAttrs: false,
diff --git a/examples/sites/demos/pc/app/grid/validation/custcomp.vue b/examples/sites/demos/pc/app/grid/validation/custcomp.vue
index dea64cbf9..d50e8108a 100644
--- a/examples/sites/demos/pc/app/grid/validation/custcomp.vue
+++ b/examples/sites/demos/pc/app/grid/validation/custcomp.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const CustomInput = {
   inheritAttrs: false,
@@ -45,8 +45,8 @@ const CustomInput = {
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const validRules = {
diff --git a/examples/sites/demos/pc/app/grid/validation/editing-isvalidalways-validation-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/editing-isvalidalways-validation-composition-api.vue
index ced8fe0d6..7079b5f2b 100644
--- a/examples/sites/demos/pc/app/grid/validation/editing-isvalidalways-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/editing-isvalidalways-validation-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/editing-isvalidalways-validation.vue b/examples/sites/demos/pc/app/grid/validation/editing-isvalidalways-validation.vue
index 173c2dd86..53861ec44 100644
--- a/examples/sites/demos/pc/app/grid/validation/editing-isvalidalways-validation.vue
+++ b/examples/sites/demos/pc/app/grid/validation/editing-isvalidalways-validation.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const validRules = {
diff --git a/examples/sites/demos/pc/app/grid/validation/editing-validation-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/editing-validation-composition-api.vue
index 86a4ed768..9538fcd7a 100644
--- a/examples/sites/demos/pc/app/grid/validation/editing-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/editing-validation-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/editing-validation.vue b/examples/sites/demos/pc/app/grid/validation/editing-validation.vue
index ad23572e1..dcb05c936 100644
--- a/examples/sites/demos/pc/app/grid/validation/editing-validation.vue
+++ b/examples/sites/demos/pc/app/grid/validation/editing-validation.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const validRules = {
diff --git a/examples/sites/demos/pc/app/grid/validation/row-data-valid-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/row-data-valid-composition-api.vue
index b00972153..6261abc99 100644
--- a/examples/sites/demos/pc/app/grid/validation/row-data-valid-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/row-data-valid-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   current: {
diff --git a/examples/sites/demos/pc/app/grid/validation/row-data-valid.vue b/examples/sites/demos/pc/app/grid/validation/row-data-valid.vue
index c79f929f0..6482f5d8c 100644
--- a/examples/sites/demos/pc/app/grid/validation/row-data-valid.vue
+++ b/examples/sites/demos/pc/app/grid/validation/row-data-valid.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const validRules = {
diff --git a/examples/sites/demos/pc/app/grid/validation/select-validation-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/select-validation-composition-api.vue
index 0d1429856..4200115c7 100644
--- a/examples/sites/demos/pc/app/grid/validation/select-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/select-validation-composition-api.vue
@@ -22,12 +22,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  GridToolbar as TinyGridToolbar,
-  Modal as TinyModal
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/select-validation.vue b/examples/sites/demos/pc/app/grid/validation/select-validation.vue
index 67e3cefd4..3f09798c6 100644
--- a/examples/sites/demos/pc/app/grid/validation/select-validation.vue
+++ b/examples/sites/demos/pc/app/grid/validation/select-validation.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar, Modal as TinyModal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     const validRules = {
diff --git a/examples/sites/demos/pc/app/grid/validation/tipconfig-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/tipconfig-composition-api.vue
index ef9add489..113c30714 100644
--- a/examples/sites/demos/pc/app/grid/validation/tipconfig-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/tipconfig-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/tipconfig.vue b/examples/sites/demos/pc/app/grid/validation/tipconfig.vue
index c78484100..e3debce95 100644
--- a/examples/sites/demos/pc/app/grid/validation/tipconfig.vue
+++ b/examples/sites/demos/pc/app/grid/validation/tipconfig.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const validRules = {
diff --git a/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue
index a32764ce4..af16edd58 100644
--- a/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input, Radio as TinyRadio } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyRadio } from '@opentiny/vue'
 
 const size = ref('')
 const validRules = ref({
diff --git a/examples/sites/demos/pc/app/grid/validation/valid-config.vue b/examples/sites/demos/pc/app/grid/validation/valid-config.vue
index d4a5a79a5..3a5e9ccd3 100644
--- a/examples/sites/demos/pc/app/grid/validation/valid-config.vue
+++ b/examples/sites/demos/pc/app/grid/validation/valid-config.vue
@@ -24,17 +24,17 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Input, Radio } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyInput, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyRadio: Radio
+    TinyGrid,
+    TinyGridColumn,
+    TinyRadio
   },
   data() {
     return {
-      Input,
+      TinyInput,
       size: '',
       validRules: {
         name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue
index 83f3c44c5..14b75f695 100644
--- a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col-composition-api.vue
@@ -26,13 +26,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Grid as TinyGrid,
-  GridColumn as TinyGridColumn,
-  GridToolbar as TinyGridToolbar,
-  Input,
-  Modal as TinyModal
-} from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyInput, TinyModal } from '@opentiny/vue'
 
 const validRules = {
   name: [
diff --git a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue
index d8be2516a..f5c72c4e0 100644
--- a/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue
+++ b/examples/sites/demos/pc/app/grid/validation/validation-scroll-to-col.vue
@@ -25,13 +25,13 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar, Input, Modal as TinyModal } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
+    TinyGrid,
+    TinyGridColumn,
+    TinyGridToolbar
   },
   data() {
     const validRules = {
@@ -62,7 +62,7 @@ export default {
     }
     return {
       validRules,
-      Input,
+      TinyInput,
       toolbarButtons: [
         {
           code: 'save',
diff --git a/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue b/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
index d2510d440..a7e14502c 100644
--- a/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/arrow-position-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Alert as TinyAlert, Button as TinyButton, Guide as TinyGuide } from '@opentiny/vue'
+import { TinyAlert, TinyButton, TinyGuide } from '@opentiny/vue'
 
 const showStep1 = ref(false)
 const showStep2 = ref(false)
diff --git a/examples/sites/demos/pc/app/guide/arrow-position.vue b/examples/sites/demos/pc/app/guide/arrow-position.vue
index 80a78b341..a60265c67 100644
--- a/examples/sites/demos/pc/app/guide/arrow-position.vue
+++ b/examples/sites/demos/pc/app/guide/arrow-position.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script>
-import { Alert, Button, Guide } from '@opentiny/vue'
+import { TinyAlert, TinyButton, TinyGuide } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyAlert: Alert,
-    TinyButton: Button,
-    TinyGuide: Guide
+    TinyAlert,
+    TinyButton,
+    TinyGuide
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
index 833027978..37c09a9e3 100644
--- a/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/basic-usage-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
+import { TinyGuide, TinyButton, TinyDivider } from '@opentiny/vue'
 
 const showStep = ref(false)
 const domData = ref([
diff --git a/examples/sites/demos/pc/app/guide/basic-usage.vue b/examples/sites/demos/pc/app/guide/basic-usage.vue
index b8669d3de..322cd52b8 100644
--- a/examples/sites/demos/pc/app/guide/basic-usage.vue
+++ b/examples/sites/demos/pc/app/guide/basic-usage.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script>
-import { Guide, Button, Divider } from '@opentiny/vue'
+import { TinyGuide, TinyButton, TinyDivider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGuide: Guide,
-    TinyButton: Button,
-    TinyDivider: Divider
+    TinyGuide,
+    TinyButton,
+    TinyDivider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/callback-composition-api.vue b/examples/sites/demos/pc/app/guide/callback-composition-api.vue
index c919525b1..aea809555 100644
--- a/examples/sites/demos/pc/app/guide/callback-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/callback-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
+import { TinyGuide, TinyButton } from '@opentiny/vue'
 
 const showStep = ref(false)
 const label = ref('')
diff --git a/examples/sites/demos/pc/app/guide/callback.vue b/examples/sites/demos/pc/app/guide/callback.vue
index b9cff0e10..fc5872497 100644
--- a/examples/sites/demos/pc/app/guide/callback.vue
+++ b/examples/sites/demos/pc/app/guide/callback.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Guide, Button } from '@opentiny/vue'
+import { TinyGuide, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGuide: Guide,
-    TinyButton: Button
+    TinyGuide,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue b/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
index b19b0a641..65bd9cd59 100644
--- a/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/highlight-box-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Alert as TinyAlert, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
+import { TinyGuide, TinyAlert, TinyButton, TinyDivider } from '@opentiny/vue'
 
 const showStep = ref(false)
 const domData = ref([
diff --git a/examples/sites/demos/pc/app/guide/highlight-box.vue b/examples/sites/demos/pc/app/guide/highlight-box.vue
index 850b47384..be4eba77c 100644
--- a/examples/sites/demos/pc/app/guide/highlight-box.vue
+++ b/examples/sites/demos/pc/app/guide/highlight-box.vue
@@ -28,14 +28,14 @@
 </template>
 
 <script>
-import { Guide, Alert, Button, Divider } from '@opentiny/vue'
+import { TinyGuide, TinyAlert, TinyButton, TinyDivider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGuide: Guide,
-    TinyAlert: Alert,
-    TinyButton: Button,
-    TinyDivider: Divider
+    TinyGuide,
+    TinyAlert,
+    TinyButton,
+    TinyDivider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/image-text-composition-api.vue b/examples/sites/demos/pc/app/guide/image-text-composition-api.vue
index 80974a95d..0af478958 100644
--- a/examples/sites/demos/pc/app/guide/image-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/image-text-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
+import { TinyGuide, TinyButton } from '@opentiny/vue'
 
 const showStep = ref(false)
 const imgUrl = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
diff --git a/examples/sites/demos/pc/app/guide/image-text.vue b/examples/sites/demos/pc/app/guide/image-text.vue
index 3dcd25c58..e233ad9f6 100644
--- a/examples/sites/demos/pc/app/guide/image-text.vue
+++ b/examples/sites/demos/pc/app/guide/image-text.vue
@@ -6,13 +6,13 @@
 </template>
 
 <script>
-import { Guide, Button } from '@opentiny/vue'
+import { TinyGuide, TinyButton } from '@opentiny/vue'
 
 const imgUrl = `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
 export default {
   components: {
-    TinyGuide: Guide,
-    TinyButton: Button
+    TinyGuide,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/modal-overlay-opening-composition-api.vue b/examples/sites/demos/pc/app/guide/modal-overlay-opening-composition-api.vue
index 5c106d729..4f8b10475 100644
--- a/examples/sites/demos/pc/app/guide/modal-overlay-opening-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/modal-overlay-opening-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
+import { TinyGuide, TinyButton } from '@opentiny/vue'
 
 const size = ref(20)
 const showStep = ref(false)
diff --git a/examples/sites/demos/pc/app/guide/modal-overlay-opening.vue b/examples/sites/demos/pc/app/guide/modal-overlay-opening.vue
index 0aacef977..6791029c0 100644
--- a/examples/sites/demos/pc/app/guide/modal-overlay-opening.vue
+++ b/examples/sites/demos/pc/app/guide/modal-overlay-opening.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Guide, Button } from '@opentiny/vue'
+import { TinyGuide, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGuide: Guide,
-    TinyButton: Button
+    TinyGuide,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/offset-composition-api.vue b/examples/sites/demos/pc/app/guide/offset-composition-api.vue
index badfc9adb..fd6bfae7b 100644
--- a/examples/sites/demos/pc/app/guide/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/offset-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton, Alert as TinyAlert } from '@opentiny/vue'
+import { TinyGuide, TinyButton, TinyAlert } from '@opentiny/vue'
 
 const showStepDefault = ref(false)
 const showStepMainAxis = ref(false)
diff --git a/examples/sites/demos/pc/app/guide/offset.vue b/examples/sites/demos/pc/app/guide/offset.vue
index 6d629af22..adc17a3ae 100644
--- a/examples/sites/demos/pc/app/guide/offset.vue
+++ b/examples/sites/demos/pc/app/guide/offset.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script>
-import { Guide, Button, Alert } from '@opentiny/vue'
+import { TinyGuide, TinyButton, TinyAlert } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGuide: Guide,
-    TinyButton: Button,
-    TinyAlert: Alert
+    TinyGuide,
+    TinyButton,
+    TinyAlert
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/only-content-composition-api.vue b/examples/sites/demos/pc/app/guide/only-content-composition-api.vue
index c37808f72..ab063f034 100644
--- a/examples/sites/demos/pc/app/guide/only-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/only-content-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
+import { TinyGuide, TinyButton, TinyDivider } from '@opentiny/vue'
 
 const showStep = ref(false)
 const domData = ref([
diff --git a/examples/sites/demos/pc/app/guide/only-content.vue b/examples/sites/demos/pc/app/guide/only-content.vue
index e5bf17443..b5a90e625 100644
--- a/examples/sites/demos/pc/app/guide/only-content.vue
+++ b/examples/sites/demos/pc/app/guide/only-content.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script>
-import { Guide, Button, Divider } from '@opentiny/vue'
+import { TinyGuide, TinyButton, TinyDivider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGuide: Guide,
-    TinyButton: Button,
-    TinyDivider: Divider
+    TinyGuide,
+    TinyButton,
+    TinyDivider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/guide/size-composition-api.vue b/examples/sites/demos/pc/app/guide/size-composition-api.vue
index d49633427..92e8b6df5 100644
--- a/examples/sites/demos/pc/app/guide/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/guide/size-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Guide as TinyGuide, Button as TinyButton } from '@opentiny/vue'
+import { TinyGuide, TinyButton } from '@opentiny/vue'
 
 const showStep = ref(false)
 const domData = ref([
diff --git a/examples/sites/demos/pc/app/guide/size.vue b/examples/sites/demos/pc/app/guide/size.vue
index 13274f65d..bacc04541 100644
--- a/examples/sites/demos/pc/app/guide/size.vue
+++ b/examples/sites/demos/pc/app/guide/size.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Guide, Button } from '@opentiny/vue'
+import { TinyGuide, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGuide: Guide,
-    TinyButton: Button
+    TinyGuide,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
index 7ef3c6470..1ddf9ae38 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Hrapprover as TinyHrapprover } from '@opentiny/vue'
+import { TinyHrapprover } from '@opentiny/vue'
 
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
diff --git a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
index 397e4323a..b2f175ba2 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Hrapprover } from '@opentiny/vue'
+import { TinyHrapprover } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHrapprover: Hrapprover
+    TinyHrapprover
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
index 8d0c8da4a..eee307097 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Hrapprover as TinyHrapprover } from '@opentiny/vue'
+import { TinyHrapprover } from '@opentiny/vue'
 
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
diff --git a/examples/sites/demos/pc/app/hrapprover/category-type.vue b/examples/sites/demos/pc/app/hrapprover/category-type.vue
index fe4f7314f..519d8f551 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Hrapprover } from '@opentiny/vue'
+import { TinyHrapprover } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHrapprover: Hrapprover
+    TinyHrapprover
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
index 99cbe2bb0..95b1038b6 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Hrapprover as TinyHrapprover } from '@opentiny/vue'
+import { TinyHrapprover } from '@opentiny/vue'
 
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
@@ -19,22 +19,22 @@ const category = ref('0303')
 function getFetchHrapprover() {
   return Promise.resolve([
     {
-      'dept_Code': '022471',
-      'remarks': null,
-      'approval_Person': 'test1',
-      'approval_Category': '0303'
+      dept_Code: '022471',
+      remarks: null,
+      approval_Person: 'test1',
+      approval_Category: '0303'
     },
     {
-      'dept_Code': '041963',
-      'remarks': '权限申请',
-      'approval_Person': 'test2',
-      'approval_Category': '0303'
+      dept_Code: '041963',
+      remarks: '权限申请',
+      approval_Person: 'test2',
+      approval_Category: '0303'
     },
     {
-      'dept_Code': '041963',
-      'remarks': '资产申请',
-      'approval_Person': 'test3',
-      'approval_Category': '0303'
+      dept_Code: '041963',
+      remarks: '资产申请',
+      approval_Person: 'test3',
+      approval_Category: '0303'
     }
   ])
 }
diff --git a/examples/sites/demos/pc/app/hrapprover/custom-service.vue b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
index 6a5fac4df..7fee9fc01 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="jsx">
-import { Hrapprover } from '@opentiny/vue'
+import { TinyHrapprover } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHrapprover: Hrapprover
+    TinyHrapprover
   },
   data() {
     return {
@@ -26,22 +26,22 @@ export default {
     getFetchHrapprover() {
       return Promise.resolve([
         {
-          'dept_Code': '022471',
-          'remarks': null,
-          'approval_Person': 'test1',
-          'approval_Category': '0303'
+          dept_Code: '022471',
+          remarks: null,
+          approval_Person: 'test1',
+          approval_Category: '0303'
         },
         {
-          'dept_Code': '041963',
-          'remarks': '权限申请',
-          'approval_Person': 'test2',
-          'approval_Category': '0303'
+          dept_Code: '041963',
+          remarks: '权限申请',
+          approval_Person: 'test2',
+          approval_Category: '0303'
         },
         {
-          'dept_Code': '041963',
-          'remarks': '资产申请',
-          'approval_Person': 'test3',
-          'approval_Category': '0303'
+          dept_Code: '041963',
+          remarks: '资产申请',
+          approval_Person: 'test3',
+          approval_Category: '0303'
         }
       ])
     }
diff --git a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
index 4011a6e97..c8d417a78 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Hrapprover as TinyHrapprover, Button as TinyButton } from '@opentiny/vue'
+import { TinyHrapprover, TinyButton } from '@opentiny/vue'
 
 const disabled = ref(false)
 const value = ref('022471')
diff --git a/examples/sites/demos/pc/app/hrapprover/disabled.vue b/examples/sites/demos/pc/app/hrapprover/disabled.vue
index 30d831f81..571ab7b71 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Hrapprover, Button } from '@opentiny/vue'
+import { TinyHrapprover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyHrapprover: Hrapprover,
-    TinyButton: Button
+    TinyHrapprover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue b/examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue
index 38c5518c3..e47c24378 100644
--- a/examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue
+++ b/examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import MultiColorSvgsList from '@opentiny/vue-icon-multicolor'
-import { Modal } from '@opentiny/vue'
+import { TinyModal } from '@opentiny/vue'
 
 const tinyIconMulticolor = [
   'ColorIconActivitys',
@@ -81,7 +81,7 @@ function click(name) {
   input.select()
   document.execCommand('Copy')
   document.body.removeChild(input)
-  Modal.message({
+  TinyModal.message({
     message: `成功复制图标名称 ${name} `,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/icon-multicolor/list.vue b/examples/sites/demos/pc/app/icon-multicolor/list.vue
index b71b7fb7d..b1eff8db3 100644
--- a/examples/sites/demos/pc/app/icon-multicolor/list.vue
+++ b/examples/sites/demos/pc/app/icon-multicolor/list.vue
@@ -18,7 +18,7 @@
 
 <script>
 import MultiColorSvgs from '@opentiny/vue-icon-multicolor'
-import { Modal, Tabs, TabItem } from '@opentiny/vue'
+import { TinyModal, TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const tinyIconMulticolor = [
   'ColorIconActivitys',
@@ -67,8 +67,8 @@ const tinyIconMulticolor = [
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
@@ -90,7 +90,7 @@ export default {
       input.select()
       document.execCommand('Copy')
       document.body.removeChild(input)
-      Modal.message({
+      TinyModal.message({
         message: `成功复制图标名称 ${name} `,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/icon/list-composition-api.vue b/examples/sites/demos/pc/app/icon/list-composition-api.vue
index ac75c950c..bbc89d3be 100644
--- a/examples/sites/demos/pc/app/icon/list-composition-api.vue
+++ b/examples/sites/demos/pc/app/icon/list-composition-api.vue
@@ -27,7 +27,7 @@
 <script setup>
 import { ref } from 'vue'
 import Svgs from '@opentiny/vue-icon'
-import { Modal, Input as TinyInput } from '@opentiny/vue'
+import { TinyModal, TinyInput } from '@opentiny/vue'
 import { iconGroups } from './iconGroups.js'
 
 const all = Object.values(iconGroups).flat()
@@ -44,7 +44,7 @@ const searchName = ref('')
 
 function click(name) {
   window.navigator.clipboard.writeText(name)
-  Modal.message({
+  TinyModal.message({
     message: `成功复制图标名称 ${name} `,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/icon/list.vue b/examples/sites/demos/pc/app/icon/list.vue
index 180ba4970..b20414d86 100644
--- a/examples/sites/demos/pc/app/icon/list.vue
+++ b/examples/sites/demos/pc/app/icon/list.vue
@@ -26,12 +26,12 @@
 
 <script>
 import Svgs from '@opentiny/vue-icon'
-import { Modal, Input } from '@opentiny/vue'
+import { TinyModal, TinyInput } from '@opentiny/vue'
 import { iconGroups } from './iconGroups.js'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     const all = Object.values(iconGroups).flat()
@@ -53,7 +53,7 @@ export default {
   methods: {
     click(name) {
       window.navigator.clipboard.writeText(name)
-      Modal.message({
+      TinyModal.message({
         message: `成功复制图标名称 ${name} `,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/image/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/image/basic-usage-composition-api.vue
index c81b9a19d..ffaaf8ed8 100644
--- a/examples/sites/demos/pc/app/image/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/basic-usage-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 const fits = ref(['fill', 'contain', 'cover', 'none', 'scale-down'])
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/image/basic-usage.vue b/examples/sites/demos/pc/app/image/basic-usage.vue
index 4c471662e..3fe14b1e7 100644
--- a/examples/sites/demos/pc/app/image/basic-usage.vue
+++ b/examples/sites/demos/pc/app/image/basic-usage.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/image/count-slot-composition-api.vue b/examples/sites/demos/pc/app/image/count-slot-composition-api.vue
index 18a2edd7f..3ebc8fc93 100644
--- a/examples/sites/demos/pc/app/image/count-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/count-slot-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 const srcList = ref([
diff --git a/examples/sites/demos/pc/app/image/count-slot.vue b/examples/sites/demos/pc/app/image/count-slot.vue
index 061cf0b51..cc21e5f1b 100644
--- a/examples/sites/demos/pc/app/image/count-slot.vue
+++ b/examples/sites/demos/pc/app/image/count-slot.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/image/custom-placeholder-composition-api.vue b/examples/sites/demos/pc/app/image/custom-placeholder-composition-api.vue
index 180dad5ec..902d78cea 100644
--- a/examples/sites/demos/pc/app/image/custom-placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/custom-placeholder-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 </script>
diff --git a/examples/sites/demos/pc/app/image/custom-placeholder.vue b/examples/sites/demos/pc/app/image/custom-placeholder.vue
index ccf78a797..93c9970d9 100644
--- a/examples/sites/demos/pc/app/image/custom-placeholder.vue
+++ b/examples/sites/demos/pc/app/image/custom-placeholder.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/image/events-composition-api.vue b/examples/sites/demos/pc/app/image/events-composition-api.vue
index 83b5f380d..62b0db571 100644
--- a/examples/sites/demos/pc/app/image/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/events-composition-api.vue
@@ -5,16 +5,16 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage, Modal } from '@opentiny/vue'
+import { TinyImage, TinyModal } from '@opentiny/vue'
 
 const errUrl = ref('')
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 
 function errorHandler() {
-  Modal.message({ message: '加载失败触发事件', status: 'info' })
+  TinyModal.message({ message: '加载失败触发事件', status: 'info' })
 }
 function loadHandler() {
-  Modal.message({ message: '加载成功触发事件', status: 'info' })
+  TinyModal.message({ message: '加载成功触发事件', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/image/events.vue b/examples/sites/demos/pc/app/image/events.vue
index 94140e3b9..59d556ccf 100644
--- a/examples/sites/demos/pc/app/image/events.vue
+++ b/examples/sites/demos/pc/app/image/events.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Image, Modal } from '@opentiny/vue'
+import { TinyImage, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
@@ -20,10 +20,10 @@ export default {
   },
   methods: {
     errorHandler() {
-      Modal.message({ message: '加载失败触发事件', status: 'info' })
+      TinyModal.message({ message: '加载失败触发事件', status: 'info' })
     },
     loadHandler() {
-      Modal.message({ message: '加载成功触发事件', status: 'info' })
+      TinyModal.message({ message: '加载成功触发事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/image/index-change-composition-api.vue b/examples/sites/demos/pc/app/image/index-change-composition-api.vue
index 6781ce2bf..9d5289cf5 100644
--- a/examples/sites/demos/pc/app/image/index-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/index-change-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage, Modal } from '@opentiny/vue'
+import { TinyImage, TinyModal } from '@opentiny/vue'
 
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 const srcList = ref([
@@ -17,7 +17,7 @@ const srcList = ref([
 
 function changeIndex(index) {
   console.log('sssss')
-  Modal.message({ message: `图片切换事件触发，当前 index： ${index}`, status: 'info' })
+  TinyModal.message({ message: `图片切换事件触发，当前 index： ${index}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/image/index-change.vue b/examples/sites/demos/pc/app/image/index-change.vue
index f40676f70..25f758ff3 100644
--- a/examples/sites/demos/pc/app/image/index-change.vue
+++ b/examples/sites/demos/pc/app/image/index-change.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Image, Modal } from '@opentiny/vue'
+import { TinyImage, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     changeIndex(index) {
-      Modal.message({ message: `图片切换事件触发，当前 index： ${index}`, status: 'info' })
+      TinyModal.message({ message: `图片切换事件触发，当前 index： ${index}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/image/keep-style-composition-api.vue b/examples/sites/demos/pc/app/image/keep-style-composition-api.vue
index 3bf533a89..1c87dca82 100644
--- a/examples/sites/demos/pc/app/image/keep-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/keep-style-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 const srcList = ref([
diff --git a/examples/sites/demos/pc/app/image/keep-style.vue b/examples/sites/demos/pc/app/image/keep-style.vue
index a87a1dcca..26d170256 100644
--- a/examples/sites/demos/pc/app/image/keep-style.vue
+++ b/examples/sites/demos/pc/app/image/keep-style.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/image/lazy-composition-api.vue b/examples/sites/demos/pc/app/image/lazy-composition-api.vue
index d114f06a0..5ea65399b 100644
--- a/examples/sites/demos/pc/app/image/lazy-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/lazy-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 const srcList = ref([
   `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
diff --git a/examples/sites/demos/pc/app/image/lazy.vue b/examples/sites/demos/pc/app/image/lazy.vue
index 5691ac3f0..2ab416305 100644
--- a/examples/sites/demos/pc/app/image/lazy.vue
+++ b/examples/sites/demos/pc/app/image/lazy.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/image/preview-composition-api.vue b/examples/sites/demos/pc/app/image/preview-composition-api.vue
index 13106f458..319996fc0 100644
--- a/examples/sites/demos/pc/app/image/preview-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/preview-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
 const srcList = ref([
diff --git a/examples/sites/demos/pc/app/image/preview-in-dialog-composition-api.vue b/examples/sites/demos/pc/app/image/preview-in-dialog-composition-api.vue
index 653c8a3be..10b26ec1e 100644
--- a/examples/sites/demos/pc/app/image/preview-in-dialog-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/preview-in-dialog-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Button as TinyButton, DialogBox as TinyDialogBox, Image as TinyImage } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyImage } from '@opentiny/vue'
 
 const show = ref(false)
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/image/preview-in-dialog.vue b/examples/sites/demos/pc/app/image/preview-in-dialog.vue
index d499e1acd..a87a96536 100644
--- a/examples/sites/demos/pc/app/image/preview-in-dialog.vue
+++ b/examples/sites/demos/pc/app/image/preview-in-dialog.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Button, DialogBox, Image } from '@opentiny/vue'
+import { TinyButton, TinyDialogBox, TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyDialogBox: DialogBox,
-    TinyImage: Image
+    TinyButton,
+    TinyDialogBox,
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/image/preview.vue b/examples/sites/demos/pc/app/image/preview.vue
index b17f03b7a..c1ba6f477 100644
--- a/examples/sites/demos/pc/app/image/preview.vue
+++ b/examples/sites/demos/pc/app/image/preview.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyImage: Image
+    TinyImage
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/image/slot-composition-api.vue b/examples/sites/demos/pc/app/image/slot-composition-api.vue
index e22786ca0..b516a420a 100644
--- a/examples/sites/demos/pc/app/image/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/slot-composition-api.vue
@@ -28,7 +28,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Image as TinyImage } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 import { iconImageError } from '@opentiny/vue-icon'
 
 const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
diff --git a/examples/sites/demos/pc/app/image/slot.vue b/examples/sites/demos/pc/app/image/slot.vue
index 95ed497c0..4c307c26a 100644
--- a/examples/sites/demos/pc/app/image/slot.vue
+++ b/examples/sites/demos/pc/app/image/slot.vue
@@ -27,12 +27,12 @@
 </template>
 
 <script>
-import { Image } from '@opentiny/vue'
+import { TinyImage } from '@opentiny/vue'
 import { iconImageError } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyImage: Image,
+    TinyImage,
     TinyIconImageError: iconImageError()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/input/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/input/basic-usage-composition-api.vue
index 11a735e47..ee0a963a7 100644
--- a/examples/sites/demos/pc/app/input/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/basic-usage-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/input/basic-usage.vue b/examples/sites/demos/pc/app/input/basic-usage.vue
index a3bcf64a5..0247ce10b 100644
--- a/examples/sites/demos/pc/app/input/basic-usage.vue
+++ b/examples/sites/demos/pc/app/input/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/clearable-composition-api.vue b/examples/sites/demos/pc/app/input/clearable-composition-api.vue
index 6c920fe3e..d4bcbe9a4 100644
--- a/examples/sites/demos/pc/app/input/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/clearable-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('123456')
 </script>
diff --git a/examples/sites/demos/pc/app/input/clearable.vue b/examples/sites/demos/pc/app/input/clearable.vue
index 1d12dd96c..600e54d5d 100644
--- a/examples/sites/demos/pc/app/input/clearable.vue
+++ b/examples/sites/demos/pc/app/input/clearable.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/counter-composition-api.vue b/examples/sites/demos/pc/app/input/counter-composition-api.vue
index f32794516..d75573a0d 100644
--- a/examples/sites/demos/pc/app/input/counter-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/counter-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput} from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/input/counter.vue b/examples/sites/demos/pc/app/input/counter.vue
index b19b35bea..4dd5e7a62 100644
--- a/examples/sites/demos/pc/app/input/counter.vue
+++ b/examples/sites/demos/pc/app/input/counter.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/disabled-composition-api.vue b/examples/sites/demos/pc/app/input/disabled-composition-api.vue
index 9dd3554c9..e8782b208 100644
--- a/examples/sites/demos/pc/app/input/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/disabled-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/input/disabled.vue b/examples/sites/demos/pc/app/input/disabled.vue
index d3086be25..6d6b1c1a8 100644
--- a/examples/sites/demos/pc/app/input/disabled.vue
+++ b/examples/sites/demos/pc/app/input/disabled.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/display-only-composition-api.vue b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
index ab7f0bb25..983d95092 100644
--- a/examples/sites/demos/pc/app/input/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/display-only-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('value 的内容')
 const input1 = ref('value 的内容')
diff --git a/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue b/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
index e541e44e2..3135cfcf5 100644
--- a/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref(
   '表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏'
diff --git a/examples/sites/demos/pc/app/input/display-only-popup-more.vue b/examples/sites/demos/pc/app/input/display-only-popup-more.vue
index ff5272d35..d22e695f1 100644
--- a/examples/sites/demos/pc/app/input/display-only-popup-more.vue
+++ b/examples/sites/demos/pc/app/input/display-only-popup-more.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/display-only.vue b/examples/sites/demos/pc/app/input/display-only.vue
index f70e093e5..e2cd17cd4 100644
--- a/examples/sites/demos/pc/app/input/display-only.vue
+++ b/examples/sites/demos/pc/app/input/display-only.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/event-composition-api.vue b/examples/sites/demos/pc/app/input/event-composition-api.vue
index 79c6dda49..d0d44c411 100644
--- a/examples/sites/demos/pc/app/input/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/event-composition-api.vue
@@ -8,30 +8,30 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 const inputChange = ref('')
 const focusBlur = ref('')
 const clearValue = ref('clear')
 
 function onChange() {
-  Modal.message({ message: 'change 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'change 事件触发了', status: 'info' })
 }
 
 function onInput() {
-  Modal.message({ message: 'input 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'input 事件触发了', status: 'info' })
 }
 
 function onBlur() {
-  Modal.message({ message: 'blur 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'blur 事件触发了', status: 'info' })
 }
 
 function onFocus() {
-  Modal.message({ message: 'focus 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'focus 事件触发了', status: 'info' })
 }
 
 function onClear() {
-  Modal.message({ message: 'clear 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'clear 事件触发了', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/input/event.vue b/examples/sites/demos/pc/app/input/event.vue
index 07985a47a..c50e7be5e 100644
--- a/examples/sites/demos/pc/app/input/event.vue
+++ b/examples/sites/demos/pc/app/input/event.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -22,19 +22,19 @@ export default {
   },
   methods: {
     onChange() {
-      Modal.message({ message: 'change 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'change 事件触发了', status: 'info' })
     },
     onInput() {
-      Modal.message({ message: 'input 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'input 事件触发了', status: 'info' })
     },
     onBlur() {
-      Modal.message({ message: 'blur 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'blur 事件触发了', status: 'info' })
     },
     onFocus() {
-      Modal.message({ message: 'focus 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'focus 事件触发了', status: 'info' })
     },
     onClear() {
-      Modal.message({ message: 'clear 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'clear 事件触发了', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/input/input-box-type-composition-api.vue b/examples/sites/demos/pc/app/input/input-box-type-composition-api.vue
index bc124c5e8..7a7f26442 100644
--- a/examples/sites/demos/pc/app/input/input-box-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/input-box-type-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/input/input-box-type.vue b/examples/sites/demos/pc/app/input/input-box-type.vue
index 8e6dfc4f6..aa495e3ad 100644
--- a/examples/sites/demos/pc/app/input/input-box-type.vue
+++ b/examples/sites/demos/pc/app/input/input-box-type.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/input-icon-composition-api.vue b/examples/sites/demos/pc/app/input/input-icon-composition-api.vue
index 1c6ce6c80..ec04dc0cb 100644
--- a/examples/sites/demos/pc/app/input/input-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/input-icon-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { iconCalendar } from '@opentiny/vue-icon'
 
 const TinyIconCalendar = iconCalendar()
@@ -20,4 +20,3 @@ const value = ref('')
   margin: 0 5px;
 }
 </style>
-  
\ No newline at end of file
diff --git a/examples/sites/demos/pc/app/input/input-icon.vue b/examples/sites/demos/pc/app/input/input-icon.vue
index 0961b9958..e9fae5466 100644
--- a/examples/sites/demos/pc/app/input/input-icon.vue
+++ b/examples/sites/demos/pc/app/input/input-icon.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { IconCalendar } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/mask-composition-api.vue b/examples/sites/demos/pc/app/input/mask-composition-api.vue
index eb12a12af..3aaabf3e6 100644
--- a/examples/sites/demos/pc/app/input/mask-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/mask-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('文字过长时会显示点点点，并且鼠标悬浮出现tip')
 </script>
diff --git a/examples/sites/demos/pc/app/input/mask.vue b/examples/sites/demos/pc/app/input/mask.vue
index 1a655b211..ee4968cba 100644
--- a/examples/sites/demos/pc/app/input/mask.vue
+++ b/examples/sites/demos/pc/app/input/mask.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/method-addMemory-composition-api.vue b/examples/sites/demos/pc/app/input/method-addMemory-composition-api.vue
index 7230940fc..94b7b6f01 100644
--- a/examples/sites/demos/pc/app/input/method-addMemory-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/method-addMemory-composition-api.vue
@@ -13,13 +13,13 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 const input = ref('')
 const textMemoryRef = ref()
 
 function addMemory(val) {
-  Modal.message({ message: val, status: 'success' })
+  TinyModal.message({ message: val, status: 'success' })
   textMemoryRef.value.addMemory(val)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/input/method-addMemory.vue b/examples/sites/demos/pc/app/input/method-addMemory.vue
index 54dc15fa9..f88c68351 100644
--- a/examples/sites/demos/pc/app/input/method-addMemory.vue
+++ b/examples/sites/demos/pc/app/input/method-addMemory.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Input, Modal } from '@opentiny/vue'
+import { TinyInput, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     addMemory(val) {
-      Modal.message({ message: val, status: 'success' })
+      TinyModal.message({ message: val, status: 'success' })
       this.$refs.textMemory.addMemory(val)
     }
   }
diff --git a/examples/sites/demos/pc/app/input/methods-composition-api.vue b/examples/sites/demos/pc/app/input/methods-composition-api.vue
index 24a320f47..aafbfe193 100644
--- a/examples/sites/demos/pc/app/input/methods-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/methods-composition-api.vue
@@ -11,10 +11,10 @@
     </div>
   </div>
 </template>
-  
+
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { TinyInput, TinyButton } from '@opentiny/vue'
 
 const input = ref('')
 const selectValue = ref('123456')
diff --git a/examples/sites/demos/pc/app/input/methods.vue b/examples/sites/demos/pc/app/input/methods.vue
index 93186a3cf..529249807 100644
--- a/examples/sites/demos/pc/app/input/methods.vue
+++ b/examples/sites/demos/pc/app/input/methods.vue
@@ -11,14 +11,14 @@
     </div>
   </div>
 </template>
-  
+
 <script>
-import { Input, Button } from '@opentiny/vue'
+import { TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input,
-    TinyButton: Button
+    TinyInput,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/native-composition-api.vue b/examples/sites/demos/pc/app/input/native-composition-api.vue
index c51e2d70b..a5ad3b794 100644
--- a/examples/sites/demos/pc/app/input/native-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/native-composition-api.vue
@@ -31,7 +31,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('')
 const inputStep = ref(2)
diff --git a/examples/sites/demos/pc/app/input/native.vue b/examples/sites/demos/pc/app/input/native.vue
index d3d4da85f..dd172e4da 100644
--- a/examples/sites/demos/pc/app/input/native.vue
+++ b/examples/sites/demos/pc/app/input/native.vue
@@ -30,11 +30,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/resize-composition-api.vue b/examples/sites/demos/pc/app/input/resize-composition-api.vue
index 1cd6fa42f..c15a78c72 100644
--- a/examples/sites/demos/pc/app/input/resize-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/resize-composition-api.vue
@@ -35,7 +35,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('')
 const textarea = ref('')
diff --git a/examples/sites/demos/pc/app/input/resize.vue b/examples/sites/demos/pc/app/input/resize.vue
index 8f63019a1..00b5957b4 100644
--- a/examples/sites/demos/pc/app/input/resize.vue
+++ b/examples/sites/demos/pc/app/input/resize.vue
@@ -43,11 +43,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/rows-composition-api.vue b/examples/sites/demos/pc/app/input/rows-composition-api.vue
index 01c6f9154..a6357609c 100644
--- a/examples/sites/demos/pc/app/input/rows-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/rows-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/input/rows.vue b/examples/sites/demos/pc/app/input/rows.vue
index 5aba165ce..88ee1a99e 100644
--- a/examples/sites/demos/pc/app/input/rows.vue
+++ b/examples/sites/demos/pc/app/input/rows.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/show-password-composition-api.vue b/examples/sites/demos/pc/app/input/show-password-composition-api.vue
index ecd059663..46f377d0c 100644
--- a/examples/sites/demos/pc/app/input/show-password-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/show-password-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('123456')
 </script>
diff --git a/examples/sites/demos/pc/app/input/show-password.vue b/examples/sites/demos/pc/app/input/show-password.vue
index 32de0c76c..447ce355d 100644
--- a/examples/sites/demos/pc/app/input/show-password.vue
+++ b/examples/sites/demos/pc/app/input/show-password.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/show-tooltip-composition-api.vue b/examples/sites/demos/pc/app/input/show-tooltip-composition-api.vue
index c5f57e8ff..e78cf8435 100644
--- a/examples/sites/demos/pc/app/input/show-tooltip-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/show-tooltip-composition-api.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { Input as TinyInput, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyInput, TinySwitch } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const showTooltip = ref(false)
diff --git a/examples/sites/demos/pc/app/input/show-tooltip.vue b/examples/sites/demos/pc/app/input/show-tooltip.vue
index f89132f86..f4d676dd9 100644
--- a/examples/sites/demos/pc/app/input/show-tooltip.vue
+++ b/examples/sites/demos/pc/app/input/show-tooltip.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Input, Switch } from '@opentiny/vue'
+import { TinyInput, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input,
-    TinySwitch: Switch
+    TinyInput,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/show-word-limit-composition-api.vue b/examples/sites/demos/pc/app/input/show-word-limit-composition-api.vue
index 01c35f00a..7a99f59e5 100644
--- a/examples/sites/demos/pc/app/input/show-word-limit-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/show-word-limit-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const text = ref('')
 const textarea = ref('')
diff --git a/examples/sites/demos/pc/app/input/show-word-limit.vue b/examples/sites/demos/pc/app/input/show-word-limit.vue
index 7f068bdb0..48aecb1d0 100644
--- a/examples/sites/demos/pc/app/input/show-word-limit.vue
+++ b/examples/sites/demos/pc/app/input/show-word-limit.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/size-composition-api.vue b/examples/sites/demos/pc/app/input/size-composition-api.vue
index 55d08584c..566711570 100644
--- a/examples/sites/demos/pc/app/input/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/size-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const input = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/input/size.vue b/examples/sites/demos/pc/app/input/size.vue
index 04733b106..31a2a64ba 100644
--- a/examples/sites/demos/pc/app/input/size.vue
+++ b/examples/sites/demos/pc/app/input/size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/slot-composition-api.vue b/examples/sites/demos/pc/app/input/slot-composition-api.vue
index 07fbf59dc..b9bd4e6f8 100644
--- a/examples/sites/demos/pc/app/input/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/slot-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { iconSearch, iconCalendar } from '@opentiny/vue-icon'
 
 const input = ref('')
diff --git a/examples/sites/demos/pc/app/input/slot.vue b/examples/sites/demos/pc/app/input/slot.vue
index 91e366308..ea552d059 100644
--- a/examples/sites/demos/pc/app/input/slot.vue
+++ b/examples/sites/demos/pc/app/input/slot.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 import { IconSearch, IconCalendar } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyIconSearch: IconSearch(),
     TinyIconCalendar: IconCalendar(),
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/type-composition-api.vue b/examples/sites/demos/pc/app/input/type-composition-api.vue
index d4174799c..6cc0d1421 100644
--- a/examples/sites/demos/pc/app/input/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/type-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 const text = ref('')
 const password = ref('')
@@ -38,7 +38,6 @@ const datetime = ref('')
 const time = ref('')
 const file = ref('')
 const range = ref('')
-
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/input/type.vue b/examples/sites/demos/pc/app/input/type.vue
index 6ea69fa0f..9d98d198d 100644
--- a/examples/sites/demos/pc/app/input/type.vue
+++ b/examples/sites/demos/pc/app/input/type.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import { Input } from '@opentiny/vue'
+import { TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/input/validate-event-composition-api.vue b/examples/sites/demos/pc/app/input/validate-event-composition-api.vue
index d197fda8c..55882a261 100644
--- a/examples/sites/demos/pc/app/input/validate-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/validate-event-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Input as TinyInput, Form as TinyForm, FormItem as TinyFormItem } from '@opentiny/vue'
+import { TinyInput, TinyForm, TinyFormItem } from '@opentiny/vue'
 
 const ruleForm = ref({
   name: ''
diff --git a/examples/sites/demos/pc/app/input/validate-event.vue b/examples/sites/demos/pc/app/input/validate-event.vue
index 09194f9d3..232a8b1b4 100644
--- a/examples/sites/demos/pc/app/input/validate-event.vue
+++ b/examples/sites/demos/pc/app/input/validate-event.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script>
-import { Input, Form, FormItem } from '@opentiny/vue'
+import { TinyInput, TinyForm, TinyFormItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyInput: Input,
-    TinyForm: Form,
-    TinyFormItem: FormItem
+    TinyInput,
+    TinyForm,
+    TinyFormItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/ip-address/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/ip-address/basic-usage-composition-api.vue
index 94575e8aa..3815f943a 100644
--- a/examples/sites/demos/pc/app/ip-address/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/ip-address/basic-usage-composition-api.vue
@@ -5,7 +5,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { IpAddress as TinyIpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 
 const value1 = ref('192.168.0.1')
 const value2 = ref('fe80::204:61ff:fe9d:f156')
diff --git a/examples/sites/demos/pc/app/ip-address/basic-usage.vue b/examples/sites/demos/pc/app/ip-address/basic-usage.vue
index 13efdabab..37ffdaa1f 100644
--- a/examples/sites/demos/pc/app/ip-address/basic-usage.vue
+++ b/examples/sites/demos/pc/app/ip-address/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { IpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyIpAddress: IpAddress
+    TinyIpAddress
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/ip-address/delimiter-composition-api.vue b/examples/sites/demos/pc/app/ip-address/delimiter-composition-api.vue
index 1210e2c30..ac5a14a9f 100644
--- a/examples/sites/demos/pc/app/ip-address/delimiter-composition-api.vue
+++ b/examples/sites/demos/pc/app/ip-address/delimiter-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { IpAddress as TinyIpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 import { iconBoat } from '@opentiny/vue-icon'
 
 const value = ref('192.168.0.1')
diff --git a/examples/sites/demos/pc/app/ip-address/delimiter.vue b/examples/sites/demos/pc/app/ip-address/delimiter.vue
index e414168ce..3dc09cc1f 100644
--- a/examples/sites/demos/pc/app/ip-address/delimiter.vue
+++ b/examples/sites/demos/pc/app/ip-address/delimiter.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { IpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 import { IconBoat } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyIpAddress: IpAddress
+    TinyIpAddress
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/ip-address/disabled-composition-api.vue b/examples/sites/demos/pc/app/ip-address/disabled-composition-api.vue
index e98ab7e48..33f888d95 100644
--- a/examples/sites/demos/pc/app/ip-address/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/ip-address/disabled-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { IpAddress as TinyIpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 
 const value = ref('192.168.0.1')
 </script>
diff --git a/examples/sites/demos/pc/app/ip-address/disabled.vue b/examples/sites/demos/pc/app/ip-address/disabled.vue
index 9d870b28b..12d7910ea 100644
--- a/examples/sites/demos/pc/app/ip-address/disabled.vue
+++ b/examples/sites/demos/pc/app/ip-address/disabled.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { IpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyIpAddress: IpAddress
+    TinyIpAddress
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/ip-address/event-composition-api.vue b/examples/sites/demos/pc/app/ip-address/event-composition-api.vue
index 14a9421d9..d8500c692 100644
--- a/examples/sites/demos/pc/app/ip-address/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/ip-address/event-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { IpAddress as TinyIpAddress, Modal } from '@opentiny/vue'
+import { TinyIpAddress, TinyModal } from '@opentiny/vue'
 
 const value1 = ref('192.168.0.1')
 const value2 = ref('192.168.0.1')
@@ -19,23 +19,23 @@ const value3 = ref('192.168.0.1')
 const value4 = ref('192.168.0.1')
 
 function handleBlur() {
-  Modal.message({ message: 'blur 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'blur 事件触发了', status: 'info' })
 }
 
 function handleChange() {
-  Modal.message({ message: 'change 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'change 事件触发了', status: 'info' })
 }
 
 function handleFocus() {
-  Modal.message({ message: 'focus 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'focus 事件触发了', status: 'info' })
 }
 
 function handleInput() {
-  Modal.message({ message: 'input 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'input 事件触发了', status: 'info' })
 }
 
 function handleSelect() {
-  Modal.message({ message: 'select 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'select 事件触发了', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/ip-address/event.vue b/examples/sites/demos/pc/app/ip-address/event.vue
index b751c1b3a..259ce164e 100644
--- a/examples/sites/demos/pc/app/ip-address/event.vue
+++ b/examples/sites/demos/pc/app/ip-address/event.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { IpAddress, Modal } from '@opentiny/vue'
+import { TinyIpAddress, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyIpAddress: IpAddress
+    TinyIpAddress
   },
   data() {
     return {
@@ -26,19 +26,19 @@ export default {
   },
   methods: {
     handleBlur: () => {
-      Modal.message({ message: 'blur 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'blur 事件触发了', status: 'info' })
     },
     handleChange: () => {
-      Modal.message({ message: 'change 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'change 事件触发了', status: 'info' })
     },
     handleFocus: () => {
-      Modal.message({ message: 'focus 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'focus 事件触发了', status: 'info' })
     },
     handleInput: () => {
-      Modal.message({ message: 'input 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'input 事件触发了', status: 'info' })
     },
     handleSelect: () => {
-      Modal.message({ message: 'select 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'select 事件触发了', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/ip-address/readonly-composition-api.vue b/examples/sites/demos/pc/app/ip-address/readonly-composition-api.vue
index 9af42e113..85fb129aa 100644
--- a/examples/sites/demos/pc/app/ip-address/readonly-composition-api.vue
+++ b/examples/sites/demos/pc/app/ip-address/readonly-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { IpAddress as TinyIpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 
 const value = ref('192.168.0.1')
 </script>
diff --git a/examples/sites/demos/pc/app/ip-address/readonly.vue b/examples/sites/demos/pc/app/ip-address/readonly.vue
index ea87baf17..acf45e668 100644
--- a/examples/sites/demos/pc/app/ip-address/readonly.vue
+++ b/examples/sites/demos/pc/app/ip-address/readonly.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { IpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyIpAddress: IpAddress
+    TinyIpAddress
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/ip-address/size-composition-api.vue b/examples/sites/demos/pc/app/ip-address/size-composition-api.vue
index c6fb89f75..cba563969 100644
--- a/examples/sites/demos/pc/app/ip-address/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/ip-address/size-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { IpAddress as TinyIpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 
 const value = ref('192.168.0.1')
 </script>
diff --git a/examples/sites/demos/pc/app/ip-address/size.vue b/examples/sites/demos/pc/app/ip-address/size.vue
index b5c042699..9b98e0058 100644
--- a/examples/sites/demos/pc/app/ip-address/size.vue
+++ b/examples/sites/demos/pc/app/ip-address/size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { IpAddress } from '@opentiny/vue'
+import { TinyIpAddress } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyIpAddress: IpAddress
+    TinyIpAddress
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/layout/alignment-composition-api.vue b/examples/sites/demos/pc/app/layout/alignment-composition-api.vue
index 933c2706b..5210d531f 100644
--- a/examples/sites/demos/pc/app/layout/alignment-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/alignment-composition-api.vue
@@ -94,7 +94,7 @@
 </template>
 
 <script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/layout/alignment.vue b/examples/sites/demos/pc/app/layout/alignment.vue
index d12716284..3a0da0613 100644
--- a/examples/sites/demos/pc/app/layout/alignment.vue
+++ b/examples/sites/demos/pc/app/layout/alignment.vue
@@ -94,13 +94,13 @@
 </template>
 
 <script lang="jsx">
-import { Layout, Row, Col } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
index b7ba3b482..c8533c23a 100644
--- a/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/layout/basic-usage.vue b/examples/sites/demos/pc/app/layout/basic-usage.vue
index 1e3c1b321..84abca877 100644
--- a/examples/sites/demos/pc/app/layout/basic-usage.vue
+++ b/examples/sites/demos/pc/app/layout/basic-usage.vue
@@ -42,13 +42,13 @@
 </template>
 
 <script>
-import { Layout, Row, Col } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/layout/gutter-composition-api.vue b/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
index a80682a40..86443f587 100644
--- a/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/layout/gutter.vue b/examples/sites/demos/pc/app/layout/gutter.vue
index 7861f1985..a3bdf148e 100644
--- a/examples/sites/demos/pc/app/layout/gutter.vue
+++ b/examples/sites/demos/pc/app/layout/gutter.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script>
-import { Layout, Row, Col } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/layout/offset-composition-api.vue b/examples/sites/demos/pc/app/layout/offset-composition-api.vue
index 0e6a7878d..366052e52 100644
--- a/examples/sites/demos/pc/app/layout/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/offset-composition-api.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/layout/offset.vue b/examples/sites/demos/pc/app/layout/offset.vue
index 2de659d6e..a0982224e 100644
--- a/examples/sites/demos/pc/app/layout/offset.vue
+++ b/examples/sites/demos/pc/app/layout/offset.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import { Layout, Row, Col } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/layout/order-composition-api.vue b/examples/sites/demos/pc/app/layout/order-composition-api.vue
index 3e75f3f91..5c4f2285f 100644
--- a/examples/sites/demos/pc/app/layout/order-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/order-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, Button as TinyButton } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol, TinyButton } from '@opentiny/vue'
 
 const state = ref({
   buttonLabel: '升序',
diff --git a/examples/sites/demos/pc/app/layout/order.vue b/examples/sites/demos/pc/app/layout/order.vue
index 231b64658..da1cc1070 100644
--- a/examples/sites/demos/pc/app/layout/order.vue
+++ b/examples/sites/demos/pc/app/layout/order.vue
@@ -25,14 +25,14 @@
 </template>
 
 <script>
-import { Layout, Row, Col, Button } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col,
-    TinyButton: Button
+    TinyLayout,
+    TinyRow,
+    TinyCol,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/layout/responsive-layout-composition-api.vue b/examples/sites/demos/pc/app/layout/responsive-layout-composition-api.vue
index f906b0ef5..e395a9a00 100644
--- a/examples/sites/demos/pc/app/layout/responsive-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/responsive-layout-composition-api.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/layout/responsive-layout.vue b/examples/sites/demos/pc/app/layout/responsive-layout.vue
index c114993f8..f879623dd 100644
--- a/examples/sites/demos/pc/app/layout/responsive-layout.vue
+++ b/examples/sites/demos/pc/app/layout/responsive-layout.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import { Layout, Row, Col } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/layout/tag-composition-api.vue b/examples/sites/demos/pc/app/layout/tag-composition-api.vue
index 08f5c559d..f39d8dafd 100644
--- a/examples/sites/demos/pc/app/layout/tag-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/tag-composition-api.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/layout/tag.vue b/examples/sites/demos/pc/app/layout/tag.vue
index a2b2a3c39..0c049f0c6 100644
--- a/examples/sites/demos/pc/app/layout/tag.vue
+++ b/examples/sites/demos/pc/app/layout/tag.vue
@@ -15,13 +15,13 @@
 </template>
 
 <script>
-import { Layout, Row, Col } from '@opentiny/vue'
+import { TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/link-menu/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/link-menu/basic-usage-composition-api.vue
index 0f4063869..817d9087c 100644
--- a/examples/sites/demos/pc/app/link-menu/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/link-menu/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { LinkMenu as TinyLinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/link-menu/basic-usage.vue b/examples/sites/demos/pc/app/link-menu/basic-usage.vue
index 524b761cc..79b339d04 100644
--- a/examples/sites/demos/pc/app/link-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/link-menu/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { LinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLinkMenu: LinkMenu
+    TinyLinkMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/link-menu/custom-foot-composition-api.vue b/examples/sites/demos/pc/app/link-menu/custom-foot-composition-api.vue
index b34127e28..5cf5596a5 100644
--- a/examples/sites/demos/pc/app/link-menu/custom-foot-composition-api.vue
+++ b/examples/sites/demos/pc/app/link-menu/custom-foot-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { LinkMenu as TinyLinkMenu, Button as TinyButton } from '@opentiny/vue'
+import { TinyLinkMenu, TinyButton } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/link-menu/custom-foot.vue b/examples/sites/demos/pc/app/link-menu/custom-foot.vue
index ecc77ea2d..4f9ceac24 100644
--- a/examples/sites/demos/pc/app/link-menu/custom-foot.vue
+++ b/examples/sites/demos/pc/app/link-menu/custom-foot.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { LinkMenu, Button } from '@opentiny/vue'
+import { TinyLinkMenu, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLinkMenu: LinkMenu,
-    TinyButton: Button
+    TinyLinkMenu,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/link-menu/custom-icon-composition-api.vue b/examples/sites/demos/pc/app/link-menu/custom-icon-composition-api.vue
index c34796dab..3d181a16b 100644
--- a/examples/sites/demos/pc/app/link-menu/custom-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/link-menu/custom-icon-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { LinkMenu as TinyLinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 import { iconDoubleRight, iconExpressSearch } from '@opentiny/vue-icon'
 
 const IconDoubleRight = iconDoubleRight()
diff --git a/examples/sites/demos/pc/app/link-menu/custom-icon.vue b/examples/sites/demos/pc/app/link-menu/custom-icon.vue
index c101fb1ef..839a0f32e 100644
--- a/examples/sites/demos/pc/app/link-menu/custom-icon.vue
+++ b/examples/sites/demos/pc/app/link-menu/custom-icon.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script lang="jsx">
-import { LinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 import { IconDoubleRight, IconExpressSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyLinkMenu: LinkMenu
+    TinyLinkMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue b/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue
index ebde33fe0..0549ad9a6 100644
--- a/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue
+++ b/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { LinkMenu as TinyLinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 import { iconPutAway, iconExpand } from '@opentiny/vue-icon'
 
 const shrinkIcon = iconExpand()
diff --git a/examples/sites/demos/pc/app/link-menu/data-resource.vue b/examples/sites/demos/pc/app/link-menu/data-resource.vue
index d2f1cb065..99bc611d7 100644
--- a/examples/sites/demos/pc/app/link-menu/data-resource.vue
+++ b/examples/sites/demos/pc/app/link-menu/data-resource.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { LinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 import { iconPutAway, iconExpand } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyLinkMenu: LinkMenu
+    TinyLinkMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/link-menu/get-menu-data-sync-composition-api.vue b/examples/sites/demos/pc/app/link-menu/get-menu-data-sync-composition-api.vue
index a7b75f5f9..943a3e661 100644
--- a/examples/sites/demos/pc/app/link-menu/get-menu-data-sync-composition-api.vue
+++ b/examples/sites/demos/pc/app/link-menu/get-menu-data-sync-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { LinkMenu as TinyLinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.vue b/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.vue
index 8590d9e8d..7662694ea 100644
--- a/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.vue
+++ b/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { LinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLinkMenu: LinkMenu
+    TinyLinkMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/link-menu/menu-items-composition-api.vue b/examples/sites/demos/pc/app/link-menu/menu-items-composition-api.vue
index 9c96b03ad..90a29dad3 100644
--- a/examples/sites/demos/pc/app/link-menu/menu-items-composition-api.vue
+++ b/examples/sites/demos/pc/app/link-menu/menu-items-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { LinkMenu as TinyLinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/link-menu/menu-items.vue b/examples/sites/demos/pc/app/link-menu/menu-items.vue
index ae1914634..db1a44ff4 100644
--- a/examples/sites/demos/pc/app/link-menu/menu-items.vue
+++ b/examples/sites/demos/pc/app/link-menu/menu-items.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { LinkMenu } from '@opentiny/vue'
+import { TinyLinkMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLinkMenu: LinkMenu
+    TinyLinkMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/link/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/link/basic-usage-composition-api.vue
index 3a0d42447..e0c7f8677 100644
--- a/examples/sites/demos/pc/app/link/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/basic-usage-composition-api.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { Link as TinyLink } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 
 function handleClick() {
   console.log('clicked')
diff --git a/examples/sites/demos/pc/app/link/basic-usage.vue b/examples/sites/demos/pc/app/link/basic-usage.vue
index 582d56e88..90c826ee2 100644
--- a/examples/sites/demos/pc/app/link/basic-usage.vue
+++ b/examples/sites/demos/pc/app/link/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Link } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLink: Link
+    TinyLink
   },
   methods: {
     handleClick() {
diff --git a/examples/sites/demos/pc/app/link/config-href-composition-api.vue b/examples/sites/demos/pc/app/link/config-href-composition-api.vue
index 84810caf0..4f4132564 100644
--- a/examples/sites/demos/pc/app/link/config-href-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/config-href-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Link as TinyLink } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/link/config-href.vue b/examples/sites/demos/pc/app/link/config-href.vue
index 2ef8c4b2d..4fcc9d412 100644
--- a/examples/sites/demos/pc/app/link/config-href.vue
+++ b/examples/sites/demos/pc/app/link/config-href.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Link } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLink: Link
+    TinyLink
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/link/custom-icon.vue b/examples/sites/demos/pc/app/link/custom-icon.vue
index 17a1952ee..46a474c42 100644
--- a/examples/sites/demos/pc/app/link/custom-icon.vue
+++ b/examples/sites/demos/pc/app/link/custom-icon.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import { Link } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 import { IconEditor, IconSearch, IconDeleteL, IconFilletExternalLink } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyLink: Link,
+    TinyLink,
     IconSearch: IconSearch(),
     IconDel: IconDeleteL(),
     IconFilletExternalLink: IconFilletExternalLink()
diff --git a/examples/sites/demos/pc/app/link/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/link/dynamic-disable-composition-api.vue
index 0afb14139..ecbc7680c 100644
--- a/examples/sites/demos/pc/app/link/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/dynamic-disable-composition-api.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { Link as TinyLink } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/link/dynamic-disable.vue b/examples/sites/demos/pc/app/link/dynamic-disable.vue
index 1163cf5bb..1e0509e48 100644
--- a/examples/sites/demos/pc/app/link/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/link/dynamic-disable.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Link } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLink: Link
+    TinyLink
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/link/focus-no-underline-composition-api.vue b/examples/sites/demos/pc/app/link/focus-no-underline-composition-api.vue
index 7b9d17bba..c6f913575 100644
--- a/examples/sites/demos/pc/app/link/focus-no-underline-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/focus-no-underline-composition-api.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { Link as TinyLink } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/link/focus-no-underline.vue b/examples/sites/demos/pc/app/link/focus-no-underline.vue
index 8381899de..873062231 100644
--- a/examples/sites/demos/pc/app/link/focus-no-underline.vue
+++ b/examples/sites/demos/pc/app/link/focus-no-underline.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Link } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLink: Link
+    TinyLink
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/link/link-style-composition-api.vue b/examples/sites/demos/pc/app/link/link-style-composition-api.vue
index aba6d57aa..dc3689142 100644
--- a/examples/sites/demos/pc/app/link/link-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/link-style-composition-api.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { Link as TinyLink } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/link/link-style.vue b/examples/sites/demos/pc/app/link/link-style.vue
index ded2bac44..6300d61db 100644
--- a/examples/sites/demos/pc/app/link/link-style.vue
+++ b/examples/sites/demos/pc/app/link/link-style.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Link } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLink: Link
+    TinyLink
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/link/size-composition-api.vue b/examples/sites/demos/pc/app/link/size-composition-api.vue
index 895056acb..0ae898ed5 100644
--- a/examples/sites/demos/pc/app/link/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/link/size-composition-api.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { Link as TinyLink } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 import { iconEdit } from '@opentiny/vue-icon'
 
 const TinyIconEdit = iconEdit()
diff --git a/examples/sites/demos/pc/app/link/size.vue b/examples/sites/demos/pc/app/link/size.vue
index 330fa7452..9771922c9 100644
--- a/examples/sites/demos/pc/app/link/size.vue
+++ b/examples/sites/demos/pc/app/link/size.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Link } from '@opentiny/vue'
+import { TinyLink } from '@opentiny/vue'
 import { iconEdit } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyLink: Link
+    TinyLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/loading/background-composition-api.vue b/examples/sites/demos/pc/app/loading/background-composition-api.vue
index 839a931f7..f55169ea5 100644
--- a/examples/sites/demos/pc/app/loading/background-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/background-composition-api.vue
@@ -4,10 +4,10 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 onMounted(() => {
-  Loading.service({
+  TinyLoading.service({
     text: '自定义背景颜色和透明度',
     target: document.getElementById('tiny-demo-loading-background'),
     background: 'rgba(0, 0, 0, 0.2)'
diff --git a/examples/sites/demos/pc/app/loading/background.vue b/examples/sites/demos/pc/app/loading/background.vue
index c74427f01..8ab80c9d8 100644
--- a/examples/sites/demos/pc/app/loading/background.vue
+++ b/examples/sites/demos/pc/app/loading/background.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '自定义背景颜色和透明度',
       target: document.getElementById('tiny-demo-loading-background'),
       background: 'rgba(0, 0, 0, 0.2)'
diff --git a/examples/sites/demos/pc/app/loading/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/loading/basic-usage-composition-api.vue
index f8d162666..99597f215 100644
--- a/examples/sites/demos/pc/app/loading/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Loading, Button as TinyButton } from '@opentiny/vue'
+import { TinyLoading, TinyButton } from '@opentiny/vue'
 
 const loadingInstance = ref(null)
 
@@ -16,7 +16,7 @@ const closeLoading = () => {
 }
 
 onMounted(() => {
-  loadingInstance.value = Loading.service({
+  loadingInstance.value = TinyLoading.service({
     target: document.getElementById('tiny-basic-loading1')
   })
 })
diff --git a/examples/sites/demos/pc/app/loading/basic-usage.vue b/examples/sites/demos/pc/app/loading/basic-usage.vue
index 3e18b0783..30874c434 100644
--- a/examples/sites/demos/pc/app/loading/basic-usage.vue
+++ b/examples/sites/demos/pc/app/loading/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Loading, Button } from '@opentiny/vue'
+import { TinyLoading, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
     }
   },
   mounted() {
-    this.loadingInstance = Loading.service({
+    this.loadingInstance = TinyLoading.service({
       target: document.getElementById('tiny-basic-loading1')
     })
   },
diff --git a/examples/sites/demos/pc/app/loading/custom-class-composition-api.vue b/examples/sites/demos/pc/app/loading/custom-class-composition-api.vue
index 50aea31e7..3f786687a 100644
--- a/examples/sites/demos/pc/app/loading/custom-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/custom-class-composition-api.vue
@@ -4,10 +4,10 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 onMounted(() => {
-  Loading.service({
+  TinyLoading.service({
     text: '自定义 loading 类名',
     customClass: 'new-loading',
     target: document.getElementById('tiny-demo-loading-custom-class'),
diff --git a/examples/sites/demos/pc/app/loading/custom-class.vue b/examples/sites/demos/pc/app/loading/custom-class.vue
index 246b93550..77100455d 100644
--- a/examples/sites/demos/pc/app/loading/custom-class.vue
+++ b/examples/sites/demos/pc/app/loading/custom-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '自定义 loading 类名',
       customClass: 'new-loading',
       target: document.getElementById('tiny-demo-loading-custom-class'),
diff --git a/examples/sites/demos/pc/app/loading/directive-composition-api.vue b/examples/sites/demos/pc/app/loading/directive-composition-api.vue
index 6a99a5a2b..d76549249 100644
--- a/examples/sites/demos/pc/app/loading/directive-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/directive-composition-api.vue
@@ -16,11 +16,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Loading, Button as TinyButton } from '@opentiny/vue'
+import { TinyLoading, TinyButton } from '@opentiny/vue'
 
 const isLoading = ref(false)
 
-const vLoading = Loading.directive
+const vLoading = TinyLoading.directive
 
 function handleClick() {
   isLoading.value = !isLoading.value
diff --git a/examples/sites/demos/pc/app/loading/directive.vue b/examples/sites/demos/pc/app/loading/directive.vue
index f49b5dec2..b5bb5b3f0 100644
--- a/examples/sites/demos/pc/app/loading/directive.vue
+++ b/examples/sites/demos/pc/app/loading/directive.vue
@@ -15,18 +15,18 @@
 </template>
 
 <script>
-import { Loading, Button } from '@opentiny/vue'
+import { TinyLoading, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   directives: {
-    loading: Loading.directive
+    loading: TinyLoading.directive
   },
   data() {
     return {
-      isLoading: false,
+      isLoading: false
     }
   },
   methods: {
diff --git a/examples/sites/demos/pc/app/loading/fullscreen-composition-api.vue b/examples/sites/demos/pc/app/loading/fullscreen-composition-api.vue
index e2e9c6af3..a26596e83 100644
--- a/examples/sites/demos/pc/app/loading/fullscreen-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/fullscreen-composition-api.vue
@@ -9,9 +9,9 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Button as TinyButton, Loading } from '@opentiny/vue'
+import { TinyButton, TinyLoading } from '@opentiny/vue'
 
-const vLoading = Loading.directive
+const vLoading = TinyLoading.directive
 
 const fullscreenLoading = ref(false)
 
@@ -23,7 +23,7 @@ function handleClick() {
 }
 
 function handleClick2() {
-  const loading = Loading.service({
+  const loading = TinyLoading.service({
     lock: true,
     customClass: 'my-custom-loading-fullscreen',
     text: '正在提交...',
diff --git a/examples/sites/demos/pc/app/loading/fullscreen.vue b/examples/sites/demos/pc/app/loading/fullscreen.vue
index 1aeb9fa4e..7c8b8dd87 100644
--- a/examples/sites/demos/pc/app/loading/fullscreen.vue
+++ b/examples/sites/demos/pc/app/loading/fullscreen.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script>
-import { Button, Loading } from '@opentiny/vue'
+import { TinyButton, TinyLoading } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   directives: {
-    Loading: Loading.directive
+    TinyLoading: TinyLoading.directive
   },
   data() {
     return {
@@ -30,7 +30,7 @@ export default {
       }, 2500)
     },
     handleClick2() {
-      const loading = Loading.service({
+      const loading = TinyLoading.service({
         lock: true,
         customClass: 'my-custom-loading-fullscreen',
         text: '正在提交...',
diff --git a/examples/sites/demos/pc/app/loading/loading-tip-text-composition-api.vue b/examples/sites/demos/pc/app/loading/loading-tip-text-composition-api.vue
index 491765bb5..b4f9ecbb8 100644
--- a/examples/sites/demos/pc/app/loading/loading-tip-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/loading-tip-text-composition-api.vue
@@ -4,10 +4,10 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 onMounted(() => {
-  Loading.service({
+  TinyLoading.service({
     text: '加载中',
     target: document.getElementById('tiny-demo-loading-tip-text'),
     size: 'large'
diff --git a/examples/sites/demos/pc/app/loading/loading-tip-text.vue b/examples/sites/demos/pc/app/loading/loading-tip-text.vue
index 131bd873d..8bdf91edc 100644
--- a/examples/sites/demos/pc/app/loading/loading-tip-text.vue
+++ b/examples/sites/demos/pc/app/loading/loading-tip-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '加载中',
       target: document.getElementById('tiny-demo-loading-tip-text'),
       size: 'large'
diff --git a/examples/sites/demos/pc/app/loading/size-composition-api.vue b/examples/sites/demos/pc/app/loading/size-composition-api.vue
index 3129f2285..ea5041c27 100644
--- a/examples/sites/demos/pc/app/loading/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/size-composition-api.vue
@@ -8,20 +8,20 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 const loadingInstance = ref(null)
 
 onMounted(() => {
-  loadingInstance.value = Loading.service({
+  loadingInstance.value = TinyLoading.service({
     target: document.getElementById('tiny-size-loading1'),
     size: 'small'
   })
-  loadingInstance.value = Loading.service({
+  loadingInstance.value = TinyLoading.service({
     target: document.getElementById('tiny-size-loading2'),
     size: 'medium'
   })
-  loadingInstance.value = Loading.service({
+  loadingInstance.value = TinyLoading.service({
     target: document.getElementById('tiny-size-loading3'),
     size: 'large'
   })
diff --git a/examples/sites/demos/pc/app/loading/size.vue b/examples/sites/demos/pc/app/loading/size.vue
index b2069f8a7..f018a7283 100644
--- a/examples/sites/demos/pc/app/loading/size.vue
+++ b/examples/sites/demos/pc/app/loading/size.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 
 export default {
   data() {
@@ -16,15 +16,15 @@ export default {
     }
   },
   mounted() {
-    this.loadingInstance = Loading.service({
+    this.loadingInstance = TinyLoading.service({
       target: document.getElementById('tiny-size-loading1'),
       size: 'small'
     })
-    this.loadingInstance = Loading.service({
+    this.loadingInstance = TinyLoading.service({
       target: document.getElementById('tiny-size-loading2'),
       size: 'medium'
     })
-    this.loadingInstance = Loading.service({
+    this.loadingInstance = TinyLoading.service({
       target: document.getElementById('tiny-size-loading3'),
       size: 'large'
     })
@@ -41,4 +41,4 @@ export default {
   width: 100px;
   height: 100px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/loading/spinner-composition-api.vue b/examples/sites/demos/pc/app/loading/spinner-composition-api.vue
index ec58559e2..71ca2bcd4 100644
--- a/examples/sites/demos/pc/app/loading/spinner-composition-api.vue
+++ b/examples/sites/demos/pc/app/loading/spinner-composition-api.vue
@@ -4,13 +4,13 @@
 
 <script setup lang="jsx">
 import { onMounted } from 'vue'
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 import { iconLoadingShadow } from '@opentiny/vue-icon'
 
 const spinnerIcon = iconLoadingShadow()
 
 onMounted(() => {
-  Loading.service({
+  TinyLoading.service({
     text: '自定义 loading 图标',
     spinner: spinnerIcon,
     target: document.getElementById('tiny-demo-loading-spinner')
diff --git a/examples/sites/demos/pc/app/loading/spinner.vue b/examples/sites/demos/pc/app/loading/spinner.vue
index 107eaa24a..d0d006c44 100644
--- a/examples/sites/demos/pc/app/loading/spinner.vue
+++ b/examples/sites/demos/pc/app/loading/spinner.vue
@@ -3,14 +3,14 @@
 </template>
 
 <script>
-import { Loading } from '@opentiny/vue'
+import { TinyLoading } from '@opentiny/vue'
 import { iconLoadingShadow } from '@opentiny/vue-icon'
 
 const spinnerIcon = iconLoadingShadow()
 
 export default {
   mounted() {
-    Loading.service({
+    TinyLoading.service({
       text: '自定义 loading 图标',
       spinner: spinnerIcon,
       target: document.getElementById('tiny-demo-loading-spinner')
diff --git a/examples/sites/demos/pc/app/locales/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/locales/basic-usage-composition-api.vue
index 2c04201f4..760a2c95f 100644
--- a/examples/sites/demos/pc/app/locales/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/locales/basic-usage-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { Locales as TinyLocales } from '@opentiny/vue'
+import { TinyLocales } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/locales/basic-usage.vue b/examples/sites/demos/pc/app/locales/basic-usage.vue
index 1361f63b9..4aaf26816 100644
--- a/examples/sites/demos/pc/app/locales/basic-usage.vue
+++ b/examples/sites/demos/pc/app/locales/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Locales } from '@opentiny/vue'
+import { TinyLocales } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLocales: Locales
+    TinyLocales
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/locales/change-lang-composition-api.vue b/examples/sites/demos/pc/app/locales/change-lang-composition-api.vue
index fb05c500c..65b129c1e 100644
--- a/examples/sites/demos/pc/app/locales/change-lang-composition-api.vue
+++ b/examples/sites/demos/pc/app/locales/change-lang-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { getCurrentInstance } from 'vue'
-import { Locales as TinyLocales } from '@opentiny/vue'
+import { TinyLocales } from '@opentiny/vue'
 
 const instance = getCurrentInstance()
 const i18n = instance.appContext.config.globalProperties.$i18n
diff --git a/examples/sites/demos/pc/app/locales/change-lang.vue b/examples/sites/demos/pc/app/locales/change-lang.vue
index 730788ed8..169db40ab 100644
--- a/examples/sites/demos/pc/app/locales/change-lang.vue
+++ b/examples/sites/demos/pc/app/locales/change-lang.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Locales } from '@opentiny/vue'
+import { TinyLocales } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLocales: Locales
+    TinyLocales
   },
   methods: {
     changeLang(lang) {
diff --git a/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue b/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
index b21a89f42..63aadc125 100644
--- a/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Locales as TinyLocales } from '@opentiny/vue'
+import { TinyLocales } from '@opentiny/vue'
 
 function getLocale() {
   // resolve 出来的必须是国际化的 key
diff --git a/examples/sites/demos/pc/app/locales/custom-service.vue b/examples/sites/demos/pc/app/locales/custom-service.vue
index cacbd1418..7a90b309a 100644
--- a/examples/sites/demos/pc/app/locales/custom-service.vue
+++ b/examples/sites/demos/pc/app/locales/custom-service.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { Locales } from '@opentiny/vue'
+import { TinyLocales } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLocales: Locales
+    TinyLocales
   },
   methods: {
     getLocale() {
diff --git a/examples/sites/demos/pc/app/logon-user/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/logon-user/basic-usage-composition-api.vue
index 1462503b6..796f5d0af 100644
--- a/examples/sites/demos/pc/app/logon-user/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/logon-user/basic-usage-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="jsx">
-import { LogonUser as TinyLogonUser } from '@opentiny/vue'
+import { TinyLogonUser } from '@opentiny/vue'
 
 function getUserInfo() {
   return Promise.resolve({
diff --git a/examples/sites/demos/pc/app/logon-user/basic-usage.vue b/examples/sites/demos/pc/app/logon-user/basic-usage.vue
index ef76cb525..282950c5e 100644
--- a/examples/sites/demos/pc/app/logon-user/basic-usage.vue
+++ b/examples/sites/demos/pc/app/logon-user/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { LogonUser } from '@opentiny/vue'
+import { TinyLogonUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLogonUser: LogonUser
+    TinyLogonUser
   },
   methods: {
     getUserInfo() {
diff --git a/examples/sites/demos/pc/app/logon-user/custom-service-composition-api.vue b/examples/sites/demos/pc/app/logon-user/custom-service-composition-api.vue
index a0a24f305..2cbac2835 100644
--- a/examples/sites/demos/pc/app/logon-user/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/logon-user/custom-service-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { LogonUser as TinyLogonUser } from '@opentiny/vue'
+import { TinyLogonUser } from '@opentiny/vue'
 
 const serivce = ref({
   getUserInfo() {
diff --git a/examples/sites/demos/pc/app/logon-user/custom-service.vue b/examples/sites/demos/pc/app/logon-user/custom-service.vue
index 2de215718..356965c63 100644
--- a/examples/sites/demos/pc/app/logon-user/custom-service.vue
+++ b/examples/sites/demos/pc/app/logon-user/custom-service.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { LogonUser } from '@opentiny/vue'
+import { TinyLogonUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLogonUser: LogonUser
+    TinyLogonUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
index 365b49266..e17b0a72b 100644
--- a/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/logout/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Logout as TinyLogout, Modal } from '@opentiny/vue'
+import { TinyLogout, TinyModal } from '@opentiny/vue'
 
 const isLogin = ref(false)
 const service = ref({
@@ -18,7 +18,7 @@ const service = ref({
 
 function beforeLogout() {
   // 注销前的回调函数
-  Modal.message({ message: '注销前的回调函数', status: 'info' })
+  TinyModal.message({ message: '注销前的回调函数', status: 'info' })
   window.localStorage.setItem('isLogin', false)
   // window.location.reload()
 }
@@ -44,7 +44,7 @@ function isGuestUser() {
 
 function showLogin() {
   /* 此处为用户的自定义登录逻辑 */
-  Modal.confirm('模拟登录且登录成功').then(() => {
+  TinyModal.confirm('模拟登录且登录成功').then(() => {
     window.localStorage.setItem('isLogin', true)
     window.location.reload()
   })
diff --git a/examples/sites/demos/pc/app/logout/basic-usage.vue b/examples/sites/demos/pc/app/logout/basic-usage.vue
index 7a466cd35..4c51548a9 100644
--- a/examples/sites/demos/pc/app/logout/basic-usage.vue
+++ b/examples/sites/demos/pc/app/logout/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Logout, Modal } from '@opentiny/vue'
+import { TinyLogout, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLogout: Logout
+    TinyLogout
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   methods: {
     beforeLogout() {
       // 注销前的回调函数
-      Modal.message({ message: '注销前的回调函数', status: 'info' })
+      TinyModal.message({ message: '注销前的回调函数', status: 'info' })
     },
     getLogoutUrl() {
       return new Promise((resolve, reject) => {
@@ -46,7 +46,7 @@ export default {
     },
     showLogin() {
       /* 此处为用户的自定义登录逻辑 */
-      Modal.confirm('模拟登录且登录成功').then(() => {
+      TinyModal.confirm('模拟登录且登录成功').then(() => {
         window.localStorage.setItem('isLogin', true)
         window.location.reload()
       })
diff --git a/examples/sites/demos/pc/app/logout/redirecturl-composition-api.vue b/examples/sites/demos/pc/app/logout/redirecturl-composition-api.vue
index 5625ba49e..a63e3f572 100644
--- a/examples/sites/demos/pc/app/logout/redirecturl-composition-api.vue
+++ b/examples/sites/demos/pc/app/logout/redirecturl-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Logout as TinyLogout } from '@opentiny/vue'
+import { TinyLogout } from '@opentiny/vue'
 
 const url = ref('#/webnova/zh-CN/component/logout')
 </script>
diff --git a/examples/sites/demos/pc/app/logout/redirecturl.vue b/examples/sites/demos/pc/app/logout/redirecturl.vue
index 21ffedf8c..e47756b08 100644
--- a/examples/sites/demos/pc/app/logout/redirecturl.vue
+++ b/examples/sites/demos/pc/app/logout/redirecturl.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Logout } from '@opentiny/vue'
+import { TinyLogout } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyLogout: Logout
+    TinyLogout
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
index e7f4a1bf0..34be2e0df 100644
--- a/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/basic-usage-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 // statusMap 对应 milestoneData的status；显示的背景色样式（可以是旗，可以是步骤条）
 const statusMap = ref({
diff --git a/examples/sites/demos/pc/app/milestone/basic-usage.vue b/examples/sites/demos/pc/app/milestone/basic-usage.vue
index b97865148..797ca72eb 100644
--- a/examples/sites/demos/pc/app/milestone/basic-usage.vue
+++ b/examples/sites/demos/pc/app/milestone/basic-usage.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script lang="jsx">
-import { Milestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone
+    TinyMilestone
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
index e6b71e2e9..211ca6552 100644
--- a/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-bottom-top-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 const timeActive1 = ref(1)
 const normalActive = ref(2)
diff --git a/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue b/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
index 4bfb31835..ac753f490 100644
--- a/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-bottom-top.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Milestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone
+    TinyMilestone
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
index 00379676e..c68ac0ebb 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-flag-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 const timeActive1 = ref(1)
 const normalActive = ref(2)
diff --git a/examples/sites/demos/pc/app/milestone/custom-flag.vue b/examples/sites/demos/pc/app/milestone/custom-flag.vue
index b59648f79..5a6f7cb6a 100644
--- a/examples/sites/demos/pc/app/milestone/custom-flag.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-flag.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="jsx">
-import { Milestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone
+    TinyMilestone
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue b/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
index 5736a3f15..b9baf94fb 100644
--- a/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 import { iconShare, iconYes, iconDel, iconAscending, iconWriting } from '@opentiny/vue-icon'
 
 // 里程碑样式
diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue b/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
index c4d3e10a4..c381049f7 100644
--- a/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
+++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Milestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 import { IconShare, IconYes, IconDel, IconAscending, IconWriting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyMilestone: Milestone,
+    TinyMilestone,
     IconShare: IconShare(),
     IconYes: IconYes(),
     IconDel: IconDel(),
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue b/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
index c9dbe7ad8..28e9ca33d 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 const statusMap = ref({
   completed: 'var(--ti-common-color-line-active)',
diff --git a/examples/sites/demos/pc/app/milestone/data-field-mapping.vue b/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
index bca4471fd..1d991aad9 100644
--- a/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
+++ b/examples/sites/demos/pc/app/milestone/data-field-mapping.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script lang="jsx">
-import { Milestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone
+    TinyMilestone
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue b/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
index 00e7b4688..ff45075a4 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/flag-before-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone, Button as TinyButton } from '@opentiny/vue'
+import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const isBefore = ref(false)
 const statusMap = ref({
diff --git a/examples/sites/demos/pc/app/milestone/flag-before.vue b/examples/sites/demos/pc/app/milestone/flag-before.vue
index 31228660e..8e4196f39 100644
--- a/examples/sites/demos/pc/app/milestone/flag-before.vue
+++ b/examples/sites/demos/pc/app/milestone/flag-before.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Milestone, Button } from '@opentiny/vue'
+import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone,
-    TinyButton: Button
+    TinyMilestone,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/milestone/line-style-composition-api.vue b/examples/sites/demos/pc/app/milestone/line-style-composition-api.vue
index 381dc7ba9..770ac6b28 100644
--- a/examples/sites/demos/pc/app/milestone/line-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/line-style-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 const statusMap = ref({
   completed: 'var(--ti-common-color-line-active)',
diff --git a/examples/sites/demos/pc/app/milestone/line-style.vue b/examples/sites/demos/pc/app/milestone/line-style.vue
index a888085cd..e39c41fff 100644
--- a/examples/sites/demos/pc/app/milestone/line-style.vue
+++ b/examples/sites/demos/pc/app/milestone/line-style.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { Milestone } from '@opentiny/vue'
+import { TinyMilestone } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone
+    TinyMilestone
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue b/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
index dc9911c38..27190dbad 100644
--- a/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/milestone-events-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone, Notify } from '@opentiny/vue'
+import { TinyMilestone, TinyNotify } from '@opentiny/vue'
 
 const timeActive1 = ref(1)
 const normalActive = ref(2)
@@ -79,7 +79,7 @@ const milestoneData = ref([
 ])
 
 function nodeClick() {
-  Notify({
+  TinyNotify({
     title: '提示',
     message: '节点的点击事件',
     offset: 0
@@ -87,7 +87,7 @@ function nodeClick() {
 }
 
 function flagClick() {
-  Notify({
+  TinyNotify({
     title: '提示',
     message: '活动旗子的点击事件',
     offset: 0
diff --git a/examples/sites/demos/pc/app/milestone/milestone-events.vue b/examples/sites/demos/pc/app/milestone/milestone-events.vue
index 5d91509b3..1f78f7be5 100644
--- a/examples/sites/demos/pc/app/milestone/milestone-events.vue
+++ b/examples/sites/demos/pc/app/milestone/milestone-events.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { Milestone, Notify } from '@opentiny/vue'
+import { TinyMilestone, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone
+    TinyMilestone
   },
   data() {
     return {
@@ -86,14 +86,14 @@ export default {
   },
   methods: {
     nodeClick() {
-      Notify({
+      TinyNotify({
         title: '提示',
         message: '节点的点击事件',
         offset: 0
       })
     },
     flagClick() {
-      Notify({
+      TinyNotify({
         title: '提示',
         message: '活动旗子的点击事件',
         offset: 0
diff --git a/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue b/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
index 66e14a5a3..d10b0ee95 100644
--- a/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/show-number-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone, Button as TinyButton } from '@opentiny/vue'
+import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const showNum = ref(true)
 const statusMap = ref({
diff --git a/examples/sites/demos/pc/app/milestone/show-number.vue b/examples/sites/demos/pc/app/milestone/show-number.vue
index 9ff0e8af1..913a06bac 100644
--- a/examples/sites/demos/pc/app/milestone/show-number.vue
+++ b/examples/sites/demos/pc/app/milestone/show-number.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { Milestone, Button } from '@opentiny/vue'
+import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone,
-    TinyButton: Button
+    TinyMilestone,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue b/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
index 5083ff2ab..0a7033ff1 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/milestone/solid-style-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Milestone as TinyMilestone, Button as TinyButton } from '@opentiny/vue'
+import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const isSolid = ref(false)
 const statusMap = ref({
diff --git a/examples/sites/demos/pc/app/milestone/solid-style.vue b/examples/sites/demos/pc/app/milestone/solid-style.vue
index 70fabb9a7..670442cd1 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style.vue
+++ b/examples/sites/demos/pc/app/milestone/solid-style.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="jsx">
-import { Milestone, Button } from '@opentiny/vue'
+import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMilestone: Milestone,
-    TinyButton: Button
+    TinyMilestone,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue
index 2edebb199..a5a5975e8 100644
--- a/examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { MindMap as TinyMindMap } from '@opentiny/vue'
+import { TinyMindMap } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/mind-map/basic-usage.vue b/examples/sites/demos/pc/app/mind-map/basic-usage.vue
index 5c780bbbd..31e61452b 100644
--- a/examples/sites/demos/pc/app/mind-map/basic-usage.vue
+++ b/examples/sites/demos/pc/app/mind-map/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { MindMap } from '@opentiny/vue'
+import { TinyMindMap } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMindMap: MindMap
+    TinyMindMap
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/mind-map/event-composition-api.vue b/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
index 12a5832e5..3fa91a11c 100644
--- a/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
@@ -15,73 +15,73 @@
 </template>
 
 <script setup>
-import { Modal, MindMap as TinyMindMap } from '@opentiny/vue'
+import { TinyModal, TinyMindMap } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const exampleData = ref({
-  'nodeData': {
-    'id': 'c9ee6647385c42de',
-    'topic': '前端修仙指南',
-    'root': true,
-    'children': [
+  nodeData: {
+    id: 'c9ee6647385c42de',
+    topic: '前端修仙指南',
+    root: true,
+    children: [
       {
-        'topic': 'Handfirst html and css',
-        'id': 'c9ee977189f3b1f1'
+        topic: 'Handfirst html and css',
+        id: 'c9ee977189f3b1f1'
       },
       {
-        'topic': '高程',
-        'id': 'c9ee9a4e8f3f83c5'
+        topic: '高程',
+        id: 'c9ee9a4e8f3f83c5'
       },
       {
-        'topic': 'Javascript权威指南',
-        'id': 'c9ee9b8e87958282'
+        topic: 'Javascript权威指南',
+        id: 'c9ee9b8e87958282'
       },
       {
-        'topic': '算法 第四版',
-        'id': 'c9eea19c874d331f'
+        topic: '算法 第四版',
+        id: 'c9eea19c874d331f'
       },
       {
-        'topic': '大话数据结构',
-        'id': 'c9eea8d788441a71'
+        topic: '大话数据结构',
+        id: 'c9eea8d788441a71'
       },
       {
-        'topic': '算法导论',
-        'id': 'c9eeac4c84aaba37'
+        topic: '算法导论',
+        id: 'c9eeac4c84aaba37'
       },
       {
-        'topic': '编译原理',
-        'id': 'c9eeadee881cf229'
+        topic: '编译原理',
+        id: 'c9eeadee881cf229'
       },
       {
-        'topic': '宫水三叶的刷题日记',
-        'id': 'c9eec88a85d8ff76'
+        topic: '宫水三叶的刷题日记',
+        id: 'c9eec88a85d8ff76'
       }
     ]
   }
 })
 const onCreate = () => {
-  Modal.message({ message: 'create 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'create 事件触发了', status: 'info' })
 }
 const onOperation = () => {
-  Modal.message({ message: 'operation 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'operation 事件触发了', status: 'info' })
 }
 const onSelectNode = () => {
-  Modal.message({ message: 'selectNode 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'selectNode 事件触发了', status: 'info' })
 }
 const onSelectNewNode = () => {
-  Modal.message({ message: 'selectNewNode 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'selectNewNode 事件触发了', status: 'info' })
 }
 const onSelectNodes = () => {
-  Modal.message({ message: 'selectNodes 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'selectNodes 事件触发了', status: 'info' })
 }
 const onUnselectNode = () => {
-  Modal.message({ message: 'unselectNode 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'unselectNode 事件触发了', status: 'info' })
 }
 const onUnselectNodes = () => {
-  Modal.message({ message: 'unselectNodes 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'unselectNodes 事件触发了', status: 'info' })
 }
 const onExpandNode = () => {
-  Modal.message({ message: 'expandNode 事件触发了', status: 'info' })
+  TinyModal.message({ message: 'expandNode 事件触发了', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/mind-map/event.vue b/examples/sites/demos/pc/app/mind-map/event.vue
index 657ee1811..484765e07 100644
--- a/examples/sites/demos/pc/app/mind-map/event.vue
+++ b/examples/sites/demos/pc/app/mind-map/event.vue
@@ -17,51 +17,51 @@
 </template>
 
 <script>
-import { MindMap, Modal } from '@opentiny/vue'
+import { TinyMindMap, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMindMap: MindMap
+    TinyMindMap
   },
   data() {
     return {
       exampleData: {
-        'nodeData': {
-          'id': 'c9ee6647385c42de',
-          'topic': '前端修仙指南',
-          'root': true,
-          'children': [
+        nodeData: {
+          id: 'c9ee6647385c42de',
+          topic: '前端修仙指南',
+          root: true,
+          children: [
             {
-              'topic': 'Handfirst html and css',
-              'id': 'c9ee977189f3b1f1'
+              topic: 'Handfirst html and css',
+              id: 'c9ee977189f3b1f1'
             },
             {
-              'topic': '高程',
-              'id': 'c9ee9a4e8f3f83c5'
+              topic: '高程',
+              id: 'c9ee9a4e8f3f83c5'
             },
             {
-              'topic': 'Javascript权威指南',
-              'id': 'c9ee9b8e87958282'
+              topic: 'Javascript权威指南',
+              id: 'c9ee9b8e87958282'
             },
             {
-              'topic': '算法 第四版',
-              'id': 'c9eea19c874d331f'
+              topic: '算法 第四版',
+              id: 'c9eea19c874d331f'
             },
             {
-              'topic': '大话数据结构',
-              'id': 'c9eea8d788441a71'
+              topic: '大话数据结构',
+              id: 'c9eea8d788441a71'
             },
             {
-              'topic': '算法导论',
-              'id': 'c9eeac4c84aaba37'
+              topic: '算法导论',
+              id: 'c9eeac4c84aaba37'
             },
             {
-              'topic': '编译原理',
-              'id': 'c9eeadee881cf229'
+              topic: '编译原理',
+              id: 'c9eeadee881cf229'
             },
             {
-              'topic': '宫水三叶的刷题日记',
-              'id': 'c9eec88a85d8ff76'
+              topic: '宫水三叶的刷题日记',
+              id: 'c9eec88a85d8ff76'
             }
           ]
         }
@@ -71,28 +71,28 @@ export default {
   },
   methods: {
     onCreate() {
-      Modal.message({ message: 'create 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'create 事件触发了', status: 'info' })
     },
     onOperation() {
-      Modal.message({ message: 'operation 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'operation 事件触发了', status: 'info' })
     },
     onSelectNode() {
-      Modal.message({ message: 'selectNode 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'selectNode 事件触发了', status: 'info' })
     },
     onSelectNewNode() {
-      Modal.message({ message: 'selectNewNode 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'selectNewNode 事件触发了', status: 'info' })
     },
     onSelectNodes() {
-      Modal.message({ message: 'selectNodes 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'selectNodes 事件触发了', status: 'info' })
     },
     onUnselectNode() {
-      Modal.message({ message: 'unselectNode 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'unselectNode 事件触发了', status: 'info' })
     },
     onUnselectNodes() {
-      Modal.message({ message: 'unselectNodes 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'unselectNodes 事件触发了', status: 'info' })
     },
     onExpandNode() {
-      Modal.message({ message: 'expandNode 事件触发了', status: 'info' })
+      TinyModal.message({ message: 'expandNode 事件触发了', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue b/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
index efa102e4b..c5c6a4a21 100644
--- a/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
@@ -6,47 +6,47 @@
 </template>
 
 <script setup>
-import { MindMap as TinyMindMap, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyMindMap, TinyButton, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const render = ref(null)
 const exampleData = ref({
-  'nodeData': {
-    'id': 'c9ee6647385c42de',
-    'topic': '前端修仙指南',
-    'root': true,
-    'children': [
+  nodeData: {
+    id: 'c9ee6647385c42de',
+    topic: '前端修仙指南',
+    root: true,
+    children: [
       {
-        'topic': 'Handfirst html and css',
-        'id': 'c9ee977189f3b1f1'
+        topic: 'Handfirst html and css',
+        id: 'c9ee977189f3b1f1'
       },
       {
-        'topic': '高程',
-        'id': 'c9ee9a4e8f3f83c5'
+        topic: '高程',
+        id: 'c9ee9a4e8f3f83c5'
       },
       {
-        'topic': 'Javascript权威指南',
-        'id': 'c9ee9b8e87958282'
+        topic: 'Javascript权威指南',
+        id: 'c9ee9b8e87958282'
       },
       {
-        'topic': '算法 第四版',
-        'id': 'c9eea19c874d331f'
+        topic: '算法 第四版',
+        id: 'c9eea19c874d331f'
       },
       {
-        'topic': '大话数据结构',
-        'id': 'c9eea8d788441a71'
+        topic: '大话数据结构',
+        id: 'c9eea8d788441a71'
       },
       {
-        'topic': '算法导论',
-        'id': 'c9eeac4c84aaba37'
+        topic: '算法导论',
+        id: 'c9eeac4c84aaba37'
       },
       {
-        'topic': '编译原理',
-        'id': 'c9eeadee881cf229'
+        topic: '编译原理',
+        id: 'c9eeadee881cf229'
       },
       {
-        'topic': '宫水三叶的刷题日记',
-        'id': 'c9eec88a85d8ff76'
+        topic: '宫水三叶的刷题日记',
+        id: 'c9eec88a85d8ff76'
       }
     ]
   }
@@ -57,7 +57,7 @@ const onCreate = (instance) => {
 }
 const exportData = () => {
   if (render.value) {
-    Modal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
+    TinyModal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
 
     console.log(render.value.getData())
   }
@@ -81,11 +81,11 @@ const importData = () => {
 const clearData = () => {
   loading.value = true
   const clearNodeData = {
-    'nodeData': {
-      'id': 'c9ee6647385c42de',
-      'topic': '我的子节点被清空啦~',
-      'root': true,
-      'children': []
+    nodeData: {
+      id: 'c9ee6647385c42de',
+      topic: '我的子节点被清空啦~',
+      root: true,
+      children: []
     }
   }
   try {
diff --git a/examples/sites/demos/pc/app/mind-map/export-data.vue b/examples/sites/demos/pc/app/mind-map/export-data.vue
index 993e8b478..bbbcdae12 100644
--- a/examples/sites/demos/pc/app/mind-map/export-data.vue
+++ b/examples/sites/demos/pc/app/mind-map/export-data.vue
@@ -8,53 +8,53 @@
 </template>
 
 <script>
-import { MindMap, Button, Modal } from '@opentiny/vue'
+import { TinyMindMap, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyMindMap: MindMap,
-    TinyButton: Button
+    TinyMindMap,
+    TinyButton
   },
   data() {
     return {
       render: null,
       exampleData: {
-        'nodeData': {
-          'id': 'c9ee6647385c42de',
-          'topic': '前端修仙指南',
-          'root': true,
-          'children': [
+        nodeData: {
+          id: 'c9ee6647385c42de',
+          topic: '前端修仙指南',
+          root: true,
+          children: [
             {
-              'topic': 'Handfirst html and css',
-              'id': 'c9ee977189f3b1f1'
+              topic: 'Handfirst html and css',
+              id: 'c9ee977189f3b1f1'
             },
             {
-              'topic': '高程',
-              'id': 'c9ee9a4e8f3f83c5'
+              topic: '高程',
+              id: 'c9ee9a4e8f3f83c5'
             },
             {
-              'topic': 'Javascript权威指南',
-              'id': 'c9ee9b8e87958282'
+              topic: 'Javascript权威指南',
+              id: 'c9ee9b8e87958282'
             },
             {
-              'topic': '算法 第四版',
-              'id': 'c9eea19c874d331f'
+              topic: '算法 第四版',
+              id: 'c9eea19c874d331f'
             },
             {
-              'topic': '大话数据结构',
-              'id': 'c9eea8d788441a71'
+              topic: '大话数据结构',
+              id: 'c9eea8d788441a71'
             },
             {
-              'topic': '算法导论',
-              'id': 'c9eeac4c84aaba37'
+              topic: '算法导论',
+              id: 'c9eeac4c84aaba37'
             },
             {
-              'topic': '编译原理',
-              'id': 'c9eeadee881cf229'
+              topic: '编译原理',
+              id: 'c9eeadee881cf229'
             },
             {
-              'topic': '宫水三叶的刷题日记',
-              'id': 'c9eec88a85d8ff76'
+              topic: '宫水三叶的刷题日记',
+              id: 'c9eec88a85d8ff76'
             }
           ]
         }
@@ -68,7 +68,7 @@ export default {
     },
     exportData() {
       if (this.render) {
-        Modal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
+        TinyModal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
 
         console.log(this.render.getData())
       }
@@ -92,11 +92,11 @@ export default {
     clearData() {
       this.loading = true
       const clearNodeData = {
-        'nodeData': {
-          'id': 'c9ee6647385c42de',
-          'topic': '我的子节点被清空啦~',
-          'root': true,
-          'children': []
+        nodeData: {
+          id: 'c9ee6647385c42de',
+          topic: '我的子节点被清空啦~',
+          root: true,
+          children: []
         }
       }
       try {
diff --git a/examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue
index 4bdea8fa3..5e97651d9 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue
@@ -24,25 +24,24 @@
 </template>
 
 <script setup lang="jsx">
-import { Button as TinyButton, Modal, Notify } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyNotify } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show1 = ref(false)
 const show2 = ref(false)
 
 function baseClick() {
-  const modal = Modal.alert('基本提示框', '标题')
+  const modal = TinyModal.alert('基本提示框', '标题')
   setTimeout(() => modal.vm.close(), 3000)
 }
 
 function successClick() {
-  Modal.alert({ message: '成功提示框', status: 'success' })
+  TinyModal.alert({ message: '成功提示框', status: 'success' })
 }
 
 function confirmClick() {
-  Modal.confirm('您确定要删除吗？').then((res) => {
-    Notify({
+  TinyModal.confirm('您确定要删除吗？').then((res) => {
+    TinyNotify({
       type: 'info',
       title: '触发回调事件',
       message: `点击${res}按钮`
@@ -50,18 +49,19 @@ function confirmClick() {
   })
 }
 function jsxClick() {
-  Modal.alert({
+  TinyModal.alert({
     message: (
       <div>
         <button> some button </button>
         <b> some text </b>
       </div>
     ),
+
     status: 'success'
   })
 }
 function messageClick() {
-  Modal.message('简单的消息')
+  TinyModal.message('简单的消息')
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/modal/basic-usage.vue b/examples/sites/demos/pc/app/modal/basic-usage.vue
index 284b140a0..729cbb177 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage.vue
+++ b/examples/sites/demos/pc/app/modal/basic-usage.vue
@@ -24,12 +24,12 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal, Notify } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -39,15 +39,15 @@ export default {
   },
   methods: {
     baseClick() {
-      const modal = Modal.alert('基本提示框', '标题')
+      const modal = TinyModal.alert('基本提示框', '标题')
       setTimeout(() => modal.vm.close(), 3000)
     },
     successClick() {
-      Modal.alert({ message: '成功提示框', status: 'success' })
+      TinyModal.alert({ message: '成功提示框', status: 'success' })
     },
     confirmClick() {
-      Modal.confirm('您确定要删除吗？').then((res) => {
-        Notify({
+      TinyModal.confirm('您确定要删除吗？').then((res) => {
+        TinyNotify({
           type: 'info',
           title: '触发回调事件',
           message: `点击${res}按钮`
@@ -55,18 +55,19 @@ export default {
       })
     },
     jsxClick() {
-      Modal.alert({
+      TinyModal.alert({
         message: (
           <div>
             <button>some button</button>
             <b>some text</b>
           </div>
         ),
+
         status: 'success'
       })
     },
     messageClick() {
-      Modal.message('简单的消息')
+      TinyModal.message('简单的消息')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue b/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue
index 2a3769514..a139594f2 100644
--- a/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Button as TinyButton, Modal as TinyModal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 const visible = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/modal/footer-slot.vue b/examples/sites/demos/pc/app/modal/footer-slot.vue
index 361c127fd..94fd6c04f 100644
--- a/examples/sites/demos/pc/app/modal/footer-slot.vue
+++ b/examples/sites/demos/pc/app/modal/footer-slot.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/modal/message-closable-composition-api.vue b/examples/sites/demos/pc/app/modal/message-closable-composition-api.vue
index 0f0e2a2c5..3915f8abe 100644
--- a/examples/sites/demos/pc/app/modal/message-closable-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/message-closable-composition-api.vue
@@ -5,23 +5,23 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal, Notify } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyNotify } from '@opentiny/vue'
 
 function showModal() {
-  Modal.message({
+  TinyModal.message({
     message: '右侧显示关闭按钮',
     status: 'info',
     messageClosable: true,
     events: {
       hide: () => {
-        Notify({
+        TinyNotify({
           type: 'info',
           title: '触发hide回调事件',
           position: 'top-right'
         })
       },
       close: () => {
-        Notify({
+        TinyNotify({
           type: 'info',
           title: '触发close回调事件',
           position: 'top-right'
diff --git a/examples/sites/demos/pc/app/modal/message-closable.vue b/examples/sites/demos/pc/app/modal/message-closable.vue
index 4061d8ff8..a09e06800 100644
--- a/examples/sites/demos/pc/app/modal/message-closable.vue
+++ b/examples/sites/demos/pc/app/modal/message-closable.vue
@@ -5,28 +5,28 @@
 </template>
 
 <script>
-import { Button, Modal, Notify } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     showModal() {
-      Modal.message({
+      TinyModal.message({
         message: '右侧显示关闭按钮',
         status: 'info',
         messageClosable: true,
         events: {
           hide: () => {
-            Notify({
+            TinyNotify({
               type: 'info',
               title: '触发hide回调事件',
               position: 'top-right'
             })
           },
           close: () => {
-            Notify({
+            TinyNotify({
               type: 'info',
               title: '触发close回调事件',
               position: 'top-right'
diff --git a/examples/sites/demos/pc/app/modal/message-close-composition-api.vue b/examples/sites/demos/pc/app/modal/message-close-composition-api.vue
index eba35f6c4..c39290b50 100644
--- a/examples/sites/demos/pc/app/modal/message-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/message-close-composition-api.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 function btnClick() {
-  Modal.confirm({
+  TinyModal.confirm({
     status: 'info',
     message: '自定义消息的内容可关闭,5s 后得自动关闭',
     messageClosable: true,
diff --git a/examples/sites/demos/pc/app/modal/message-close.vue b/examples/sites/demos/pc/app/modal/message-close.vue
index a61177fb6..f32bdb77e 100644
--- a/examples/sites/demos/pc/app/modal/message-close.vue
+++ b/examples/sites/demos/pc/app/modal/message-close.vue
@@ -7,15 +7,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.message({
+      TinyModal.message({
         status: 'info',
         message: '自定义消息的内容可关闭,5s 后得自动关闭',
         messageClosable: true,
diff --git a/examples/sites/demos/pc/app/modal/message-event-composition-api.vue b/examples/sites/demos/pc/app/modal/message-event-composition-api.vue
index 928ef8cc1..48112575b 100644
--- a/examples/sites/demos/pc/app/modal/message-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/message-event-composition-api.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 function btnClick() {
-  Modal.message({
+  TinyModal.message({
     message: '自定义消息的内容',
     events: {
       show(ev) {
@@ -25,7 +25,7 @@ function btnClick() {
 }
 
 function handleEvent(eventName, eventArgs) {
-  Modal.message({ status: 'info', message: `${eventName} 事件触发了` })
+  TinyModal.message({ status: 'info', message: `${eventName} 事件触发了` })
   console.log({ eventName, eventArgs })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/modal/message-event.vue b/examples/sites/demos/pc/app/modal/message-event.vue
index 126dd2b12..1ce254573 100644
--- a/examples/sites/demos/pc/app/modal/message-event.vue
+++ b/examples/sites/demos/pc/app/modal/message-event.vue
@@ -5,18 +5,18 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       const $this = this
 
-      Modal.message({
+      TinyModal.message({
         message: '自定义消息的内容',
         events: {
           show(ev) {
@@ -32,7 +32,7 @@ export default {
       })
     },
     handleEvent(eventName, eventArgs) {
-      Modal.message({ status: 'info', message: `${eventName} 事件触发了` })
+      TinyModal.message({ status: 'info', message: `${eventName} 事件触发了` })
       console.log({ eventName, eventArgs })
     }
   }
diff --git a/examples/sites/demos/pc/app/modal/message-id-composition-api.vue b/examples/sites/demos/pc/app/modal/message-id-composition-api.vue
index 5f9d4aedb..de14e042c 100644
--- a/examples/sites/demos/pc/app/modal/message-id-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/message-id-composition-api.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 function btnClick() {
-  Modal.confirm({
+  TinyModal.confirm({
     status: 'info',
     message: '自定义消息具有唯一 id，所以不会重复出现',
     id: 'unique'
diff --git a/examples/sites/demos/pc/app/modal/message-id.vue b/examples/sites/demos/pc/app/modal/message-id.vue
index 81b0a3d8a..e0aaa9ca0 100644
--- a/examples/sites/demos/pc/app/modal/message-id.vue
+++ b/examples/sites/demos/pc/app/modal/message-id.vue
@@ -7,15 +7,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.message({
+      TinyModal.message({
         status: 'info',
         message: '自定义消息具有唯一 id，所以不会重复出现',
         id: 'unique'
diff --git a/examples/sites/demos/pc/app/modal/message-top-composition-api.vue b/examples/sites/demos/pc/app/modal/message-top-composition-api.vue
index 28f47d53b..af07c11d9 100644
--- a/examples/sites/demos/pc/app/modal/message-top-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/message-top-composition-api.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 function btnClick() {
-  Modal.confirm({
+  TinyModal.confirm({
     status: 'info',
     message: '自定义消息的内容距离顶部500px',
     top: 500
diff --git a/examples/sites/demos/pc/app/modal/message-top.vue b/examples/sites/demos/pc/app/modal/message-top.vue
index 3f614ef3b..7f396b1f8 100644
--- a/examples/sites/demos/pc/app/modal/message-top.vue
+++ b/examples/sites/demos/pc/app/modal/message-top.vue
@@ -7,15 +7,15 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     btnClick() {
-      Modal.message({
+      TinyModal.message({
         status: 'info',
         message: '自定义消息的内容距离顶部500px',
         top: 500
diff --git a/examples/sites/demos/pc/app/modal/modal-event-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-event-composition-api.vue
index 36ba3dcb1..d98b8e941 100644
--- a/examples/sites/demos/pc/app/modal/modal-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-event-composition-api.vue
@@ -28,14 +28,13 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 
 function btnClick() {
-  Modal.confirm({
+  TinyModal.confirm({
     message: '窗口内容',
     title: '自定义弹窗标题',
     showHeader: true,
@@ -69,7 +68,7 @@ function openModal() {
 }
 
 function handleEvent(eventName, eventArgs) {
-  Modal.message({ status: 'info', message: `${eventName} 事件触发了` })
+  TinyModal.message({ status: 'info', message: `${eventName} 事件触发了` })
   console.log({ eventName, eventArgs })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/modal/modal-event.vue b/examples/sites/demos/pc/app/modal/modal-event.vue
index eaaccc5d2..93ab88645 100644
--- a/examples/sites/demos/pc/app/modal/modal-event.vue
+++ b/examples/sites/demos/pc/app/modal/modal-event.vue
@@ -28,12 +28,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -45,7 +45,7 @@ export default {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       const $this = this
 
-      Modal.confirm({
+      TinyModal.confirm({
         message: '窗口内容',
         title: '自定义弹窗标题',
         showHeader: true,
@@ -77,7 +77,7 @@ export default {
       this.show = true
     },
     handleEvent(eventName, eventArgs) {
-      Modal.message({ status: 'info', message: `${eventName} 事件触发了` })
+      TinyModal.message({ status: 'info', message: `${eventName} 事件触发了` })
       console.log({ eventName, eventArgs })
     }
   }
diff --git a/examples/sites/demos/pc/app/modal/modal-fn-slots-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-fn-slots-composition-api.vue
index 1f368900a..d16be33a1 100644
--- a/examples/sites/demos/pc/app/modal/modal-fn-slots-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-fn-slots-composition-api.vue
@@ -20,15 +20,13 @@
 </template>
 
 <script setup lang="jsx">
-import { Button as TinyButton, Modal, Link } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyLink } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
-const TinyLink = Link
 const show = ref(false)
 
 function btnClick() {
-  Modal.confirm({
+  TinyModal.confirm({
     title: '自定义弹窗标题',
     showHeader: true,
     showFooter: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-fn-slots.vue b/examples/sites/demos/pc/app/modal/modal-fn-slots.vue
index 4a3d4d7f7..de9860470 100644
--- a/examples/sites/demos/pc/app/modal/modal-fn-slots.vue
+++ b/examples/sites/demos/pc/app/modal/modal-fn-slots.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script lang="jsx">
-import { Button, Modal, Link } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyLink: Link
+    TinyButton,
+    TinyModal,
+    TinyLink
   },
   data() {
     return {
@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.confirm({
+      TinyModal.confirm({
         title: '自定义弹窗标题',
         showHeader: true,
         showFooter: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue
index 66b9708cb..84556d309 100644
--- a/examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-footer-composition-api.vue
@@ -32,10 +32,9 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal, Link as TinyLink } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyLink } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 const show1 = ref(false)
 const options = ref({
@@ -47,7 +46,13 @@ const options = ref({
 })
 
 function btnClick() {
-  Modal.confirm({ message: '窗口内容', title: '自定义弹窗标题', showHeader: true, showFooter: true, ...options.value })
+  TinyModal.confirm({
+    message: '窗口内容',
+    title: '自定义弹窗标题',
+    showHeader: true,
+    showFooter: true,
+    ...options.value
+  })
 }
 function openModal() {
   show.value = true
diff --git a/examples/sites/demos/pc/app/modal/modal-footer.vue b/examples/sites/demos/pc/app/modal/modal-footer.vue
index 370636223..07f7893be 100644
--- a/examples/sites/demos/pc/app/modal/modal-footer.vue
+++ b/examples/sites/demos/pc/app/modal/modal-footer.vue
@@ -32,13 +32,13 @@
 </template>
 
 <script>
-import { Button, Modal, Link } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyLink: Link
+    TinyButton,
+    TinyModal,
+    TinyLink
   },
   data() {
     return {
@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.confirm({
+      TinyModal.confirm({
         message: '窗口内容',
         title: '自定义弹窗标题',
         showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-header-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-header-composition-api.vue
index a4d81c2c8..275d1338c 100644
--- a/examples/sites/demos/pc/app/modal/modal-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-header-composition-api.vue
@@ -13,14 +13,13 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 
 function btnClick() {
-  Modal.alert({ message: '窗口内容', title: '自定义弹窗标题', showHeader: true, showFooter: true })
+  TinyModal.alert({ message: '窗口内容', title: '自定义弹窗标题', showHeader: true, showFooter: true })
 }
 
 function openModal() {
diff --git a/examples/sites/demos/pc/app/modal/modal-header.vue b/examples/sites/demos/pc/app/modal/modal-header.vue
index 0820c6739..fb676bd4e 100644
--- a/examples/sites/demos/pc/app/modal/modal-header.vue
+++ b/examples/sites/demos/pc/app/modal/modal-header.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '窗口内容', title: '自定义弹窗标题', showHeader: true, showFooter: true })
+      TinyModal.alert({ message: '窗口内容', title: '自定义弹窗标题', showHeader: true, showFooter: true })
     },
     openModal() {
       this.show = true
diff --git a/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue
index abe6ac1af..86d82c439 100644
--- a/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-lock-composition-api.vue
@@ -29,10 +29,9 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 const options = ref({
   lockScroll: false,
@@ -50,7 +49,7 @@ function btnClick() {
   options.value.lockScroll = lockType === 'scroll'
   options.value.lockView = lockType === 'view'
 
-  Modal.confirm({
+  TinyModal.confirm({
     message: '窗口内容',
     title: '自定义弹窗标题',
     showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-lock.vue b/examples/sites/demos/pc/app/modal/modal-lock.vue
index ac5e070fe..476e6b728 100644
--- a/examples/sites/demos/pc/app/modal/modal-lock.vue
+++ b/examples/sites/demos/pc/app/modal/modal-lock.vue
@@ -29,12 +29,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -58,7 +58,7 @@ export default {
       this.options.lockScroll = lockType === 'scroll'
       this.options.lockView = lockType === 'view'
 
-      Modal.confirm({
+      TinyModal.confirm({
         message: '窗口内容',
         title: '自定义弹窗标题',
         showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-mask-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-mask-composition-api.vue
index 43797fd54..bc3170906 100644
--- a/examples/sites/demos/pc/app/modal/modal-mask-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-mask-composition-api.vue
@@ -22,10 +22,9 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 const options = ref({
   mask: true,
@@ -33,7 +32,7 @@ const options = ref({
 })
 
 function btnClick() {
-  Modal.confirm({
+  TinyModal.confirm({
     message: '窗口内容',
     title: '自定义弹窗标题',
     showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-mask.vue b/examples/sites/demos/pc/app/modal/modal-mask.vue
index 2ac758e5f..b8018df85 100644
--- a/examples/sites/demos/pc/app/modal/modal-mask.vue
+++ b/examples/sites/demos/pc/app/modal/modal-mask.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -40,7 +40,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.confirm({
+      TinyModal.confirm({
         message: '窗口内容',
         title: '自定义弹窗标题',
         showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue
index d25227463..a39bb8f51 100644
--- a/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-other-composition-api.vue
@@ -30,16 +30,9 @@
 </template>
 
 <script setup>
-import {
-  Button as TinyButton,
-  Modal,
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput
-} from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 const options = ref({
   mask: true,
@@ -51,7 +44,7 @@ const createData = ref({
 })
 
 function btnClick() {
-  Modal.confirm({
+  TinyModal.confirm({
     message: '窗口内容',
     title: '自定义弹窗标题',
     showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-other.vue b/examples/sites/demos/pc/app/modal/modal-other.vue
index 4c509fb98..68dce92b5 100644
--- a/examples/sites/demos/pc/app/modal/modal-other.vue
+++ b/examples/sites/demos/pc/app/modal/modal-other.vue
@@ -30,15 +30,15 @@
 </template>
 
 <script>
-import { Button, Modal, Form, FormItem, Input } from '@opentiny/vue'
+import { TinyButton, TinyModal, TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input
+    TinyButton,
+    TinyModal,
+    TinyForm,
+    TinyFormItem,
+    TinyInput
   },
   data() {
     return {
@@ -56,7 +56,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.confirm({
+      TinyModal.confirm({
         message: '窗口内容',
         title: '自定义弹窗标题',
         showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-resize-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-resize-composition-api.vue
index e83e8f81d..43fe54ad4 100644
--- a/examples/sites/demos/pc/app/modal/modal-resize-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-resize-composition-api.vue
@@ -22,10 +22,9 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 const options = ref({
   resize: true,
@@ -36,7 +35,7 @@ const options = ref({
 })
 
 function btnClick() {
-  Modal.confirm({
+  TinyModal.confirm({
     message: '窗口内容',
     title: '自定义弹窗标题',
     showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-resize.vue b/examples/sites/demos/pc/app/modal/modal-resize.vue
index 1dfde4f9b..053ffecba 100644
--- a/examples/sites/demos/pc/app/modal/modal-resize.vue
+++ b/examples/sites/demos/pc/app/modal/modal-resize.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -44,7 +44,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.confirm({
+      TinyModal.confirm({
         message: '窗口内容',
         title: '自定义弹窗标题',
         showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-size-composition-api.vue b/examples/sites/demos/pc/app/modal/modal-size-composition-api.vue
index 1f232c6e1..385bc77bb 100644
--- a/examples/sites/demos/pc/app/modal/modal-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/modal-size-composition-api.vue
@@ -25,10 +25,9 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 const fullscreen = ref(false)
 const options = ref({
@@ -40,7 +39,7 @@ const options = ref({
 })
 
 function btnClick(isFull) {
-  Modal.confirm({
+  TinyModal.confirm({
     message: '窗口内容',
     title: '自定义弹窗标题',
     showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/modal-size.vue b/examples/sites/demos/pc/app/modal/modal-size.vue
index c2856b07b..6bdef0c64 100644
--- a/examples/sites/demos/pc/app/modal/modal-size.vue
+++ b/examples/sites/demos/pc/app/modal/modal-size.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     btnClick(isFull) {
-      Modal.confirm({
+      TinyModal.confirm({
         message: '窗口内容',
         title: '自定义弹窗标题',
         showHeader: true,
diff --git a/examples/sites/demos/pc/app/modal/status-composition-api.vue b/examples/sites/demos/pc/app/modal/status-composition-api.vue
index 73341a428..5a24964be 100644
--- a/examples/sites/demos/pc/app/modal/status-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/status-composition-api.vue
@@ -29,15 +29,14 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const TinyModal = Modal
 const show = ref(false)
 
 function infoClick(mode) {
-  mode === 1 && Modal.alert({ message: '基本提示图标', status: 'info' })
-  mode === 2 && Modal.message({ message: '基本提示图标', status: 'info' })
+  mode === 1 && TinyModal.alert({ message: '基本提示图标', status: 'info' })
+  mode === 2 && TinyModal.message({ message: '基本提示图标', status: 'info' })
   if (mode === 3) {
     this.status = 'info'
     this.show = true
@@ -45,8 +44,8 @@ function infoClick(mode) {
 }
 
 function successClick(mode) {
-  mode === 1 && Modal.alert({ message: '成功提示图标', status: 'success' })
-  mode === 2 && Modal.message({ message: '成功提示图标', status: 'success' })
+  mode === 1 && TinyModal.alert({ message: '成功提示图标', status: 'success' })
+  mode === 2 && TinyModal.message({ message: '成功提示图标', status: 'success' })
   if (mode === 3) {
     this.status = 'success'
     this.show = true
@@ -54,8 +53,8 @@ function successClick(mode) {
 }
 
 function warningClick(mode) {
-  mode === 1 && Modal.alert({ message: '警告提示图标', status: 'warning' })
-  mode === 2 && Modal.message({ message: '警告提示图标', status: 'warning' })
+  mode === 1 && TinyModal.alert({ message: '警告提示图标', status: 'warning' })
+  mode === 2 && TinyModal.message({ message: '警告提示图标', status: 'warning' })
   if (mode === 3) {
     this.status = 'warning'
     this.show = true
@@ -63,8 +62,8 @@ function warningClick(mode) {
 }
 
 function errorClick(mode) {
-  mode === 1 && Modal.alert({ message: '错误提示图标', status: 'error' })
-  mode === 2 && Modal.message({ message: '错误提示图标', status: 'error' })
+  mode === 1 && TinyModal.alert({ message: '错误提示图标', status: 'error' })
+  mode === 2 && TinyModal.message({ message: '错误提示图标', status: 'error' })
   if (mode === 3) {
     this.status = 'error'
     this.show = true
@@ -72,8 +71,8 @@ function errorClick(mode) {
 }
 
 function loadingClick(mode) {
-  mode === 1 && Modal.alert({ message: '加载提示图标', status: 'loading' })
-  mode === 2 && Modal.message({ message: '加载提示图标', status: 'loading' })
+  mode === 1 && TinyModal.alert({ message: '加载提示图标', status: 'loading' })
+  mode === 2 && TinyModal.message({ message: '加载提示图标', status: 'loading' })
   if (mode === 3) {
     this.status = 'loading'
     this.show = true
diff --git a/examples/sites/demos/pc/app/modal/status.vue b/examples/sites/demos/pc/app/modal/status.vue
index a17454cba..8f56c26ce 100644
--- a/examples/sites/demos/pc/app/modal/status.vue
+++ b/examples/sites/demos/pc/app/modal/status.vue
@@ -29,12 +29,12 @@
 </template>
 
 <script>
-import { Button, Modal } from '@opentiny/vue'
+import { TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinyModal: Modal
+    TinyButton,
+    TinyModal
   },
   data() {
     return {
@@ -44,40 +44,40 @@ export default {
   },
   methods: {
     infoClick(mode) {
-      mode === 1 && Modal.alert({ message: '基本提示图标', status: 'info' })
-      mode === 2 && Modal.message({ message: '基本提示图标', status: 'info' })
+      mode === 1 && TinyModal.alert({ message: '基本提示图标', status: 'info' })
+      mode === 2 && TinyModal.message({ message: '基本提示图标', status: 'info' })
       if (mode === 3) {
         this.status = 'info'
         this.show = true
       }
     },
     successClick(mode) {
-      mode === 1 && Modal.alert({ message: '成功提示图标', status: 'success' })
-      mode === 2 && Modal.message({ message: '成功提示图标', status: 'success' })
+      mode === 1 && TinyModal.alert({ message: '成功提示图标', status: 'success' })
+      mode === 2 && TinyModal.message({ message: '成功提示图标', status: 'success' })
       if (mode === 3) {
         this.status = 'success'
         this.show = true
       }
     },
     warningClick(mode) {
-      mode === 1 && Modal.alert({ message: '警告提示图标', status: 'warning' })
-      mode === 2 && Modal.message({ message: '警告提示图标', status: 'warning' })
+      mode === 1 && TinyModal.alert({ message: '警告提示图标', status: 'warning' })
+      mode === 2 && TinyModal.message({ message: '警告提示图标', status: 'warning' })
       if (mode === 3) {
         this.status = 'warning'
         this.show = true
       }
     },
     errorClick(mode) {
-      mode === 1 && Modal.alert({ message: '错误提示图标', status: 'error' })
-      mode === 2 && Modal.message({ message: '错误提示图标', status: 'error' })
+      mode === 1 && TinyModal.alert({ message: '错误提示图标', status: 'error' })
+      mode === 2 && TinyModal.message({ message: '错误提示图标', status: 'error' })
       if (mode === 3) {
         this.status = 'error'
         this.show = true
       }
     },
     loadingClick(mode) {
-      mode === 1 && Modal.alert({ message: '加载提示图标', status: 'loading' })
-      mode === 2 && Modal.message({ message: '加载提示图标', status: 'loading' })
+      mode === 1 && TinyModal.alert({ message: '加载提示图标', status: 'loading' })
+      mode === 2 && TinyModal.message({ message: '加载提示图标', status: 'loading' })
       if (mode === 3) {
         this.status = 'loading'
         this.show = true
diff --git a/examples/sites/demos/pc/app/nav-menu/allow-full-url-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/allow-full-url-composition-api.vue
index 339f050af..07fe3e5aa 100644
--- a/examples/sites/demos/pc/app/nav-menu/allow-full-url-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/allow-full-url-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { NavMenu as TinyNavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 const menuData = ref([
   {
diff --git a/examples/sites/demos/pc/app/nav-menu/allow-full-url.vue b/examples/sites/demos/pc/app/nav-menu/allow-full-url.vue
index b36d22aea..4299247af 100644
--- a/examples/sites/demos/pc/app/nav-menu/allow-full-url.vue
+++ b/examples/sites/demos/pc/app/nav-menu/allow-full-url.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { NavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu
+    TinyNavMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/nav-menu/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/basic-usage-composition-api.vue
index 252d7c514..b2ffdc9d5 100644
--- a/examples/sites/demos/pc/app/nav-menu/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/basic-usage-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { NavMenu as TinyNavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 const menuData = ref([
   {
diff --git a/examples/sites/demos/pc/app/nav-menu/basic-usage.vue b/examples/sites/demos/pc/app/nav-menu/basic-usage.vue
index 8179f5341..9c69265f8 100644
--- a/examples/sites/demos/pc/app/nav-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/nav-menu/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { NavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu
+    TinyNavMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/nav-menu/before-skip-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/before-skip-composition-api.vue
index d20bb1447..a3ef2adc3 100644
--- a/examples/sites/demos/pc/app/nav-menu/before-skip-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/before-skip-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { NavMenu as TinyNavMenu, Modal } from '@opentiny/vue'
+import { TinyNavMenu, TinyModal } from '@opentiny/vue'
 
 const menuData = ref([
   {
@@ -302,7 +302,7 @@ const menuData = ref([
 ])
 
 function handleSkip({ title }) {
-  Modal.message({ message: '当前跳转的菜单为：' + title, status: 'info' })
+  TinyModal.message({ message: '当前跳转的菜单为：' + title, status: 'info' })
   return false
 }
 </script>
diff --git a/examples/sites/demos/pc/app/nav-menu/before-skip-prevent-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/before-skip-prevent-composition-api.vue
index 130d456e0..874922084 100644
--- a/examples/sites/demos/pc/app/nav-menu/before-skip-prevent-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/before-skip-prevent-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { NavMenu as TinyNavMenu, Modal } from '@opentiny/vue'
+import { TinyNavMenu, TinyModal } from '@opentiny/vue'
 import { iconTotal } from '@opentiny/vue-icon'
 
 const menuData = ref([
@@ -309,7 +309,7 @@ const menuData = ref([
 const TinyIconTotal = iconTotal()
 
 function handleSkip({ url }) {
-  Modal.message({
+  TinyModal.message({
     message: 'prevent 事件，当前URL：' + url,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/nav-menu/before-skip-prevent.vue b/examples/sites/demos/pc/app/nav-menu/before-skip-prevent.vue
index 6a9d1fc8e..f7c76d388 100644
--- a/examples/sites/demos/pc/app/nav-menu/before-skip-prevent.vue
+++ b/examples/sites/demos/pc/app/nav-menu/before-skip-prevent.vue
@@ -9,17 +9,17 @@
 </template>
 
 <script lang="jsx">
-import { NavMenu, Modal } from '@opentiny/vue'
+import { TinyNavMenu, TinyModal } from '@opentiny/vue'
 import { IconTotal } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu,
+    TinyNavMenu,
     IconTotal: IconTotal()
   },
   methods: {
     handleSkip({ url }) {
-      Modal.message({
+      TinyModal.message({
         message: 'prevent 事件，当前URL：' + url,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/nav-menu/before-skip.vue b/examples/sites/demos/pc/app/nav-menu/before-skip.vue
index 2304500ac..4ae374dc4 100644
--- a/examples/sites/demos/pc/app/nav-menu/before-skip.vue
+++ b/examples/sites/demos/pc/app/nav-menu/before-skip.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { NavMenu, Modal } from '@opentiny/vue'
+import { TinyNavMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu
+    TinyNavMenu
   },
   data() {
     return {
@@ -309,7 +309,7 @@ export default {
   },
   methods: {
     handleSkip({ title }) {
-      Modal.message({ message: '当前跳转的菜单为：' + title, status: 'info' })
+      TinyModal.message({ message: '当前跳转的菜单为：' + title, status: 'info' })
       return false
     }
   }
diff --git a/examples/sites/demos/pc/app/nav-menu/crm-demo-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/crm-demo-composition-api.vue
index 39cae510d..323e0970a 100644
--- a/examples/sites/demos/pc/app/nav-menu/crm-demo-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/crm-demo-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { NavMenu as TinyNavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 const menuData = [
   {
diff --git a/examples/sites/demos/pc/app/nav-menu/crm-demo.vue b/examples/sites/demos/pc/app/nav-menu/crm-demo.vue
index a827edfdf..c2ba3f6a2 100644
--- a/examples/sites/demos/pc/app/nav-menu/crm-demo.vue
+++ b/examples/sites/demos/pc/app/nav-menu/crm-demo.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { NavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu
+    TinyNavMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/nav-menu/custom-service-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/custom-service-composition-api.vue
index 12c79692d..37ed8b393 100644
--- a/examples/sites/demos/pc/app/nav-menu/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/custom-service-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { NavMenu as TinyNavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 const fields = {
   textField: 'label',
diff --git a/examples/sites/demos/pc/app/nav-menu/custom-service.vue b/examples/sites/demos/pc/app/nav-menu/custom-service.vue
index 9327bc951..5142c7a23 100644
--- a/examples/sites/demos/pc/app/nav-menu/custom-service.vue
+++ b/examples/sites/demos/pc/app/nav-menu/custom-service.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { NavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu
+    TinyNavMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/nav-menu/overflow-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/overflow-composition-api.vue
index bc33d615f..a27aaf62e 100644
--- a/examples/sites/demos/pc/app/nav-menu/overflow-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/overflow-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { NavMenu as TinyNavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 const menuData = ref([
   {
diff --git a/examples/sites/demos/pc/app/nav-menu/overflow.vue b/examples/sites/demos/pc/app/nav-menu/overflow.vue
index 480af4a8e..ef74bd09a 100644
--- a/examples/sites/demos/pc/app/nav-menu/overflow.vue
+++ b/examples/sites/demos/pc/app/nav-menu/overflow.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { NavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu
+    TinyNavMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/nav-menu/parent-key-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/parent-key-composition-api.vue
index 268905c38..ec07b83a0 100644
--- a/examples/sites/demos/pc/app/nav-menu/parent-key-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/parent-key-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { NavMenu as TinyNavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 const menuData = ref([
   { id: 1, pid: 0, title: '首页', url: '' },
diff --git a/examples/sites/demos/pc/app/nav-menu/parent-key.vue b/examples/sites/demos/pc/app/nav-menu/parent-key.vue
index f05c48f07..4669179dc 100644
--- a/examples/sites/demos/pc/app/nav-menu/parent-key.vue
+++ b/examples/sites/demos/pc/app/nav-menu/parent-key.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { NavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu
+    TinyNavMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/nav-menu/slot-logo-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/slot-logo-composition-api.vue
index 4d94695d3..40957a346 100644
--- a/examples/sites/demos/pc/app/nav-menu/slot-logo-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/slot-logo-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { NavMenu as TinyNavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 import { iconTotal } from '@opentiny/vue-icon'
 
 const menuData = ref([
diff --git a/examples/sites/demos/pc/app/nav-menu/slot-logo.vue b/examples/sites/demos/pc/app/nav-menu/slot-logo.vue
index 3402d7363..aa5cf691c 100644
--- a/examples/sites/demos/pc/app/nav-menu/slot-logo.vue
+++ b/examples/sites/demos/pc/app/nav-menu/slot-logo.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { NavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 import { IconTotal } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu,
+    TinyNavMenu,
     IconTotal: IconTotal()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/nav-menu/slot-toolbar-composition-api.vue b/examples/sites/demos/pc/app/nav-menu/slot-toolbar-composition-api.vue
index 39bd3ce10..f3f3c6d09 100644
--- a/examples/sites/demos/pc/app/nav-menu/slot-toolbar-composition-api.vue
+++ b/examples/sites/demos/pc/app/nav-menu/slot-toolbar-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { NavMenu as TinyNavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 import { iconSetting, iconAdministrator } from '@opentiny/vue-icon'
 
 const menuData = ref([
diff --git a/examples/sites/demos/pc/app/nav-menu/slot-toolbar.vue b/examples/sites/demos/pc/app/nav-menu/slot-toolbar.vue
index bd1a3de4f..00ab7f505 100644
--- a/examples/sites/demos/pc/app/nav-menu/slot-toolbar.vue
+++ b/examples/sites/demos/pc/app/nav-menu/slot-toolbar.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { NavMenu } from '@opentiny/vue'
+import { TinyNavMenu } from '@opentiny/vue'
 import { IconSetting, IconAdministrator } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyNavMenu: NavMenu,
+    TinyNavMenu,
     IconSetting: IconSetting(),
     IconAdministrator: IconAdministrator()
   },
diff --git a/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue
index f95257b01..0fb237f3b 100644
--- a/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script setup lang="jsx">
-import { Notify, Button as TinyButton } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 function handleClick() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -20,12 +20,13 @@ function handleClick() {
 }
 
 function handleClickJxs() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: () => <h4 style="margin:0">通知消息的标题</h4>,
     message: () => (
       <span>通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文</span>
     ),
+
     position: 'top-right',
     duration: 5000,
     customClass: 'my-custom-cls'
diff --git a/examples/sites/demos/pc/app/notify/basic-usage.vue b/examples/sites/demos/pc/app/notify/basic-usage.vue
index e89b701d5..0a25b323f 100644
--- a/examples/sites/demos/pc/app/notify/basic-usage.vue
+++ b/examples/sites/demos/pc/app/notify/basic-usage.vue
@@ -6,15 +6,15 @@
 </template>
 
 <script lang="jsx">
-import { Notify, Button } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     handleClick() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -24,12 +24,13 @@ export default {
       })
     },
     handleClickJxs() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: () => <h4 style="margin:0">通知消息的标题</h4>,
         message: () => (
           <span>通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文</span>
         ),
+
         position: 'top-right',
         duration: 5000,
         customClass: 'my-custom-cls'
diff --git a/examples/sites/demos/pc/app/notify/closeIcon-composition-api.vue b/examples/sites/demos/pc/app/notify/closeIcon-composition-api.vue
index 6cb211a1e..06e062246 100644
--- a/examples/sites/demos/pc/app/notify/closeIcon-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/closeIcon-composition-api.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Notify } from '@opentiny/vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
 import { IconCloseSquare } from '@opentiny/vue-icon'
 
 function baseClick() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/closeIcon.vue b/examples/sites/demos/pc/app/notify/closeIcon.vue
index 409db14b9..24532e69b 100644
--- a/examples/sites/demos/pc/app/notify/closeIcon.vue
+++ b/examples/sites/demos/pc/app/notify/closeIcon.vue
@@ -5,16 +5,16 @@
 </template>
 
 <script>
-import { Button, Notify } from '@opentiny/vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
 import { IconCloseSquare } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue b/examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue
index 47487235d..50b5c1e38 100644
--- a/examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue
@@ -6,10 +6,10 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Notify, Button as TinyButton } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 const handleClick = ref(
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/debounceDelay.vue b/examples/sites/demos/pc/app/notify/debounceDelay.vue
index 2148a39f1..96c67b98c 100644
--- a/examples/sites/demos/pc/app/notify/debounceDelay.vue
+++ b/examples/sites/demos/pc/app/notify/debounceDelay.vue
@@ -5,15 +5,15 @@
 </template>
 
 <script lang="jsx">
-import { Notify, Button } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
-      handleClick: Notify({
+      handleClick: TinyNotify({
         type: 'info',
         title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/duration-composition-api.vue b/examples/sites/demos/pc/app/notify/duration-composition-api.vue
index 868b4f28e..f4d4a5234 100644
--- a/examples/sites/demos/pc/app/notify/duration-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/duration-composition-api.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script setup lang="jsx">
-import { Button as TinyButton, Notify } from '@opentiny/vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
 
 function successClick() {
-  Notify({
+  TinyNotify({
     type: 'success',
     title: '通知消息的标题',
     message: '500ms 后自动关闭提示框',
@@ -19,7 +19,7 @@ function successClick() {
 }
 
 function errorClick() {
-  Notify({
+  TinyNotify({
     type: 'error',
     title: '通知消息的标题',
     message: '5000ms 后自动关闭提示框',
diff --git a/examples/sites/demos/pc/app/notify/duration.vue b/examples/sites/demos/pc/app/notify/duration.vue
index 68aa160b3..02744edee 100644
--- a/examples/sites/demos/pc/app/notify/duration.vue
+++ b/examples/sites/demos/pc/app/notify/duration.vue
@@ -6,15 +6,15 @@
 </template>
 
 <script lang="jsx">
-import { Button, Notify } from '@opentiny/vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     successClick() {
-      Notify({
+      TinyNotify({
         type: 'success',
         title: '通知消息的标题',
         message: '500ms 后自动关闭提示框',
@@ -23,7 +23,7 @@ export default {
       })
     },
     errorClick() {
-      Notify({
+      TinyNotify({
         type: 'error',
         title: '通知消息的标题',
         message: '5000ms 后自动关闭提示框',
diff --git a/examples/sites/demos/pc/app/notify/manual-close-composition-api.vue b/examples/sites/demos/pc/app/notify/manual-close-composition-api.vue
index dbcc0693d..607974a71 100644
--- a/examples/sites/demos/pc/app/notify/manual-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/manual-close-composition-api.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Notify } from '@opentiny/vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
 
 function manualCloseClick() {
-  const instance = Notify({
+  const instance = TinyNotify({
     type: 'info',
     title: '通知',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -23,7 +23,7 @@ function manualCloseClick() {
   }, 4000)
 }
 function closebyIdClick() {
-  const instance = Notify({
+  const instance = TinyNotify({
     type: 'info',
     title: '通知',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -32,12 +32,12 @@ function closebyIdClick() {
   })
 
   setTimeout(() => {
-    Notify.close(instance.id, () => console.log(`即将关闭 id=${instance.id} 的通知`))
+    TinyNotify.close(instance.id, () => console.log(`即将关闭 id=${instance.id} 的通知`))
   }, 4000)
 }
 function closeAllClick() {
   for (let i = 1; i <= 3; i++) {
-    Notify({
+    TinyNotify({
       type: 'info',
       title: '通知' + i,
       message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -47,7 +47,7 @@ function closeAllClick() {
   }
 
   setTimeout(() => {
-    Notify.closeAll()
+    TinyNotify.closeAll()
   }, 4000)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/notify/manual-close.vue b/examples/sites/demos/pc/app/notify/manual-close.vue
index e9fa843a1..fed980660 100644
--- a/examples/sites/demos/pc/app/notify/manual-close.vue
+++ b/examples/sites/demos/pc/app/notify/manual-close.vue
@@ -7,15 +7,15 @@
 </template>
 
 <script>
-import { Button, Notify } from '@opentiny/vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     manualCloseClick() {
-      const instance = Notify({
+      const instance = TinyNotify({
         type: 'info',
         title: '通知',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -28,7 +28,7 @@ export default {
       }, 4000)
     },
     closebyIdClick() {
-      const instance = Notify({
+      const instance = TinyNotify({
         type: 'info',
         title: '通知',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -37,12 +37,12 @@ export default {
       })
 
       setTimeout(() => {
-        Notify.close(instance.id, () => console.log(`即将关闭 id=${instance.id} 的通知`))
+        TinyNotify.close(instance.id, () => console.log(`即将关闭 id=${instance.id} 的通知`))
       }, 4000)
     },
     closeAllClick() {
       for (let i = 1; i <= 3; i++) {
-        Notify({
+        TinyNotify({
           type: 'info',
           title: '通知' + i,
           message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -52,7 +52,7 @@ export default {
       }
 
       setTimeout(() => {
-        Notify.closeAll()
+        TinyNotify.closeAll()
       }, 4000)
     }
   }
diff --git a/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue b/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
index 9e8f4a6fd..fdc45a72e 100644
--- a/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue
@@ -6,15 +6,15 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Notify, Modal } from '@opentiny/vue'
+import { TinyButton, TinyNotify, TinyModal } from '@opentiny/vue'
 
 function baseClick() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     beforeClose: () => {
-      Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
+      TinyModal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
       return false
     },
     position: 'top-right'
@@ -22,11 +22,11 @@ function baseClick() {
 }
 
 function baseClick2() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
-    onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
+    onClose: () => TinyModal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
     position: 'top-right'
   })
 }
diff --git a/examples/sites/demos/pc/app/notify/notify-events.vue b/examples/sites/demos/pc/app/notify/notify-events.vue
index 4a26e394c..b4eb0cb1a 100644
--- a/examples/sites/demos/pc/app/notify/notify-events.vue
+++ b/examples/sites/demos/pc/app/notify/notify-events.vue
@@ -6,31 +6,31 @@
 </template>
 
 <script>
-import { Button, Notify, Modal } from '@opentiny/vue'
+import { TinyButton, TinyNotify, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         beforeClose: () => {
-          Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
+          TinyModal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
           return false
         },
         position: 'top-right'
       })
     },
     baseClick2() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
-        onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
+        onClose: () => TinyModal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
         position: 'top-right'
       })
     }
diff --git a/examples/sites/demos/pc/app/notify/position-composition-api.vue b/examples/sites/demos/pc/app/notify/position-composition-api.vue
index cb366cdef..37b67ce31 100644
--- a/examples/sites/demos/pc/app/notify/position-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/position-composition-api.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script setup>
-import { Notify, Button as TinyButton } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 function handleClick(pos) {
-  Notify({
+  TinyNotify({
     title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: pos
diff --git a/examples/sites/demos/pc/app/notify/position.vue b/examples/sites/demos/pc/app/notify/position.vue
index 849d790ae..b1f7eff3e 100644
--- a/examples/sites/demos/pc/app/notify/position.vue
+++ b/examples/sites/demos/pc/app/notify/position.vue
@@ -10,15 +10,15 @@
 </template>
 
 <script>
-import { Notify, Button } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     handleClick(pos) {
-      Notify({
+      TinyNotify({
         title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: pos
diff --git a/examples/sites/demos/pc/app/notify/showClose-composition-api.vue b/examples/sites/demos/pc/app/notify/showClose-composition-api.vue
index 36ebe6bce..8b9016355 100644
--- a/examples/sites/demos/pc/app/notify/showClose-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/showClose-composition-api.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script setup lang="jsx">
-import { Notify, Button as TinyButton } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 function baseClick() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/showClose.vue b/examples/sites/demos/pc/app/notify/showClose.vue
index d11eb437c..d3cf5410b 100644
--- a/examples/sites/demos/pc/app/notify/showClose.vue
+++ b/examples/sites/demos/pc/app/notify/showClose.vue
@@ -5,15 +5,15 @@
 </template>
 
 <script lang="jsx">
-import { Notify, Button } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue b/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue
index 728b73f46..00aa96b85 100644
--- a/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script setup lang="jsx">
-import { Notify, Button as TinyButton } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 function baseClick() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/showIcon.vue b/examples/sites/demos/pc/app/notify/showIcon.vue
index e36575089..dc1b2233f 100644
--- a/examples/sites/demos/pc/app/notify/showIcon.vue
+++ b/examples/sites/demos/pc/app/notify/showIcon.vue
@@ -5,15 +5,15 @@
 </template>
 
 <script lang="jsx">
-import { Notify, Button } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/statusIcon-composition-api.vue b/examples/sites/demos/pc/app/notify/statusIcon-composition-api.vue
index 3b2833c2d..25a5e3705 100644
--- a/examples/sites/demos/pc/app/notify/statusIcon-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/statusIcon-composition-api.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script setup>
-import { Button as TinyButton, Notify } from '@opentiny/vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
 import { IconInfo } from '@opentiny/vue-icon'
 
 function baseClick() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/statusIcon.vue b/examples/sites/demos/pc/app/notify/statusIcon.vue
index ed3afd1bf..22a6aa62e 100644
--- a/examples/sites/demos/pc/app/notify/statusIcon.vue
+++ b/examples/sites/demos/pc/app/notify/statusIcon.vue
@@ -5,16 +5,16 @@
 </template>
 
 <script>
-import { Button, Notify } from '@opentiny/vue'
+import { TinyButton, TinyNotify } from '@opentiny/vue'
 import { IconInfo } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     baseClick() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/type-composition-api.vue b/examples/sites/demos/pc/app/notify/type-composition-api.vue
index 73908eb0a..5cf470c0c 100644
--- a/examples/sites/demos/pc/app/notify/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/type-composition-api.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script setup lang="jsx">
-import { Notify, Button as TinyButton } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 function infoClick() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -21,7 +21,7 @@ function infoClick() {
 }
 
 function successClick() {
-  Notify({
+  TinyNotify({
     type: 'success',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: 'top-right'
@@ -29,7 +29,7 @@ function successClick() {
 }
 
 function errorClick() {
-  Notify({
+  TinyNotify({
     type: 'error',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: 'top-right'
@@ -37,7 +37,7 @@ function errorClick() {
 }
 
 function warningClick() {
-  Notify({
+  TinyNotify({
     type: 'warning',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: 'top-right'
diff --git a/examples/sites/demos/pc/app/notify/type.vue b/examples/sites/demos/pc/app/notify/type.vue
index 5f84ac424..5772e3196 100644
--- a/examples/sites/demos/pc/app/notify/type.vue
+++ b/examples/sites/demos/pc/app/notify/type.vue
@@ -8,15 +8,15 @@
 </template>
 
 <script lang="jsx">
-import { Notify, Button } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     infoClick() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
@@ -25,21 +25,21 @@ export default {
       })
     },
     successClick() {
-      Notify({
+      TinyNotify({
         type: 'success',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: 'top-right'
       })
     },
     errorClick() {
-      Notify({
+      TinyNotify({
         type: 'error',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: 'top-right'
       })
     },
     warningClick() {
-      Notify({
+      TinyNotify({
         type: 'warning',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: 'top-right'
diff --git a/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue b/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue
index d2a0a373f..30611c4aa 100644
--- a/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue
+++ b/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script setup lang="jsx">
-import { Notify, Button as TinyButton } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 function handleClick() {
-  Notify({
+  TinyNotify({
     type: 'info',
     title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/notify/verticalOffset.vue b/examples/sites/demos/pc/app/notify/verticalOffset.vue
index 92388f3ea..8b1a13259 100644
--- a/examples/sites/demos/pc/app/notify/verticalOffset.vue
+++ b/examples/sites/demos/pc/app/notify/verticalOffset.vue
@@ -5,15 +5,15 @@
 </template>
 
 <script lang="jsx">
-import { Notify, Button } from '@opentiny/vue'
+import { TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button
+    TinyButton
   },
   methods: {
     handleClick() {
-      Notify({
+      TinyNotify({
         type: 'info',
         title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
diff --git a/examples/sites/demos/pc/app/numeric/about-step-composition-api.vue b/examples/sites/demos/pc/app/numeric/about-step-composition-api.vue
index da7bd2dd8..eae958efd 100644
--- a/examples/sites/demos/pc/app/numeric/about-step-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/about-step-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(0)
 const step = ref(2)
diff --git a/examples/sites/demos/pc/app/numeric/about-step.vue b/examples/sites/demos/pc/app/numeric/about-step.vue
index a84475ce5..d3ac9ba9d 100644
--- a/examples/sites/demos/pc/app/numeric/about-step.vue
+++ b/examples/sites/demos/pc/app/numeric/about-step.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/allow-empty-composition-api.vue b/examples/sites/demos/pc/app/numeric/allow-empty-composition-api.vue
index 1afa32440..c6dca7c81 100644
--- a/examples/sites/demos/pc/app/numeric/allow-empty-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/allow-empty-composition-api.vue
@@ -4,11 +4,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const value = ref(1)
 
 const onChange = (val: number | undefined, oldVal: number | undefined) => {
-  Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+  TinyModal.message({ message: `${val} ${oldVal}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/numeric/allow-empty.vue b/examples/sites/demos/pc/app/numeric/allow-empty.vue
index da40d44c4..eb07e735e 100644
--- a/examples/sites/demos/pc/app/numeric/allow-empty.vue
+++ b/examples/sites/demos/pc/app/numeric/allow-empty.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     onChange(val: number | undefined, oldVal: number | undefined) {
-      Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+      TinyModal.message({ message: `${val} ${oldVal}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/numeric/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/numeric/basic-usage-composition-api.vue
index c61d24488..b2f813296 100644
--- a/examples/sites/demos/pc/app/numeric/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(1)
 </script>
diff --git a/examples/sites/demos/pc/app/numeric/basic-usage.vue b/examples/sites/demos/pc/app/numeric/basic-usage.vue
index 806e363a5..f5d9b1a04 100644
--- a/examples/sites/demos/pc/app/numeric/basic-usage.vue
+++ b/examples/sites/demos/pc/app/numeric/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/blur-event-composition-api.vue b/examples/sites/demos/pc/app/numeric/blur-event-composition-api.vue
index 0fd958ba5..d5e9a0fbb 100644
--- a/examples/sites/demos/pc/app/numeric/blur-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/blur-event-composition-api.vue
@@ -4,11 +4,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const value = ref(1)
 
 const onBlur = (event: FocusEvent) => {
-  Modal.message({ message: `${event.type} 事件`, status: 'info' })
+  TinyModal.message({ message: `${event.type} 事件`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/numeric/blur-event.vue b/examples/sites/demos/pc/app/numeric/blur-event.vue
index 3babf5c2a..f14db0e23 100644
--- a/examples/sites/demos/pc/app/numeric/blur-event.vue
+++ b/examples/sites/demos/pc/app/numeric/blur-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     onBlur(event: FocusEvent) {
-      Modal.message({ message: `${event.type} 事件`, status: 'info' })
+      TinyModal.message({ message: `${event.type} 事件`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/numeric/change-event-composition-api.vue b/examples/sites/demos/pc/app/numeric/change-event-composition-api.vue
index 429fe147b..e1040eb1c 100644
--- a/examples/sites/demos/pc/app/numeric/change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/change-event-composition-api.vue
@@ -8,12 +8,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric, Modal, Button as TinyButton } from '@opentiny/vue'
+import { TinyNumeric, TinyModal, TinyButton } from '@opentiny/vue'
 
 const value = ref(1)
 
 const onChange = (newVal: number, oldVal: number) => {
-  Modal.message({
+  TinyModal.message({
     message: '新值：' + newVal + '，旧值：' + oldVal,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/numeric/change-event.vue b/examples/sites/demos/pc/app/numeric/change-event.vue
index 8216a1207..19d626486 100644
--- a/examples/sites/demos/pc/app/numeric/change-event.vue
+++ b/examples/sites/demos/pc/app/numeric/change-event.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import { Numeric, Modal, Button } from '@opentiny/vue'
+import { TinyNumeric, TinyModal, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric,
-    TinyButton: Button
+    TinyNumeric,
+    TinyButton
   },
   data() {
     return {
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     onChange(newVal: number, oldVal: number) {
-      Modal.message({
+      TinyModal.message({
         message: '新值：' + newVal + '，旧值：' + oldVal,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/numeric/controls-composition-api.vue b/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
index 24d9d7d08..bc78baf7e 100644
--- a/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/controls-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const controls = ref(false)
 const value1 = ref(1)
diff --git a/examples/sites/demos/pc/app/numeric/controls.vue b/examples/sites/demos/pc/app/numeric/controls.vue
index 5aca8c9cb..194439a08 100644
--- a/examples/sites/demos/pc/app/numeric/controls.vue
+++ b/examples/sites/demos/pc/app/numeric/controls.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/dynamic-disabled-composition-api.vue b/examples/sites/demos/pc/app/numeric/dynamic-disabled-composition-api.vue
index 07eaeb03e..38eaa13b2 100644
--- a/examples/sites/demos/pc/app/numeric/dynamic-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/dynamic-disabled-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value1 = ref(1)
 const value2 = ref(0)
diff --git a/examples/sites/demos/pc/app/numeric/dynamic-disabled.vue b/examples/sites/demos/pc/app/numeric/dynamic-disabled.vue
index 097f36312..303d945c3 100644
--- a/examples/sites/demos/pc/app/numeric/dynamic-disabled.vue
+++ b/examples/sites/demos/pc/app/numeric/dynamic-disabled.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/empty-value-composition-api.vue b/examples/sites/demos/pc/app/numeric/empty-value-composition-api.vue
index 5305dfb4c..8d7126492 100644
--- a/examples/sites/demos/pc/app/numeric/empty-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/empty-value-composition-api.vue
@@ -4,12 +4,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const step = ref(2)
 const stepNum = ref(1)
 
 function onChange(val, oldVal) {
-  Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+  TinyModal.message({ message: `${val} ${oldVal}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/numeric/empty-value.vue b/examples/sites/demos/pc/app/numeric/empty-value.vue
index d724c3717..bb6414f55 100644
--- a/examples/sites/demos/pc/app/numeric/empty-value.vue
+++ b/examples/sites/demos/pc/app/numeric/empty-value.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     onChange(val, oldVal) {
-      Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+      TinyModal.message({ message: `${val} ${oldVal}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/numeric/filter-mode-change-composition-api.vue b/examples/sites/demos/pc/app/numeric/filter-mode-change-composition-api.vue
index a54644436..e0b376a49 100644
--- a/examples/sites/demos/pc/app/numeric/filter-mode-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/filter-mode-change-composition-api.vue
@@ -12,14 +12,14 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const value = ref(1)
 
 const clearHander = () => {
-  Modal.message({ message: '清除 事件', status: 'info' })
+  TinyModal.message({ message: '清除 事件', status: 'info' })
 }
 const changeHander = (label) => {
-  Modal.message({ message: 'change 事件' + label, status: 'info' })
+  TinyModal.message({ message: 'change 事件' + label, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/numeric/filter-mode-change.vue b/examples/sites/demos/pc/app/numeric/filter-mode-change.vue
index 604b084de..82f807a6c 100644
--- a/examples/sites/demos/pc/app/numeric/filter-mode-change.vue
+++ b/examples/sites/demos/pc/app/numeric/filter-mode-change.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -24,10 +24,10 @@ export default {
   },
   methods: {
     clearHander() {
-      Modal.message({ message: '清除 事件', status: 'info' })
+      TinyModal.message({ message: '清除 事件', status: 'info' })
     },
     changeHander(label) {
-      Modal.message({ message: 'change 事件' + label, status: 'info' })
+      TinyModal.message({ message: 'change 事件' + label, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/numeric/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/numeric/filter-mode-composition-api.vue
index 352896a5c..eacf4d871 100644
--- a/examples/sites/demos/pc/app/numeric/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/filter-mode-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(1)
 </script>
diff --git a/examples/sites/demos/pc/app/numeric/filter-mode.vue b/examples/sites/demos/pc/app/numeric/filter-mode.vue
index 83fff389d..a38126a5e 100644
--- a/examples/sites/demos/pc/app/numeric/filter-mode.vue
+++ b/examples/sites/demos/pc/app/numeric/filter-mode.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/focus-event-composition-api.vue b/examples/sites/demos/pc/app/numeric/focus-event-composition-api.vue
index 8ada68cf9..1319a3af9 100644
--- a/examples/sites/demos/pc/app/numeric/focus-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/focus-event-composition-api.vue
@@ -4,11 +4,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 const value = ref(1)
 
 const onFocus = (event: FocusEvent) => {
-  Modal.message({ message: `${event.type} 事件`, status: 'info' })
+  TinyModal.message({ message: `${event.type} 事件`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/numeric/focus-event.vue b/examples/sites/demos/pc/app/numeric/focus-event.vue
index bf453908d..a69910a08 100644
--- a/examples/sites/demos/pc/app/numeric/focus-event.vue
+++ b/examples/sites/demos/pc/app/numeric/focus-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric, Modal } from '@opentiny/vue'
+import { TinyNumeric, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     onFocus(event: FocusEvent) {
-      Modal.message({ message: `${event.type} 事件`, status: 'info' })
+      TinyModal.message({ message: `${event.type} 事件`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/numeric/max-min-composition-api.vue b/examples/sites/demos/pc/app/numeric/max-min-composition-api.vue
index 88c2fbe91..54b5d2451 100644
--- a/examples/sites/demos/pc/app/numeric/max-min-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/max-min-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(1)
 const step = ref(2)
diff --git a/examples/sites/demos/pc/app/numeric/max-min.vue b/examples/sites/demos/pc/app/numeric/max-min.vue
index 65027fbc1..690a82a5e 100644
--- a/examples/sites/demos/pc/app/numeric/max-min.vue
+++ b/examples/sites/demos/pc/app/numeric/max-min.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/mouse-wheel-composition-api.vue b/examples/sites/demos/pc/app/numeric/mouse-wheel-composition-api.vue
index 2e7890375..86bdd904d 100644
--- a/examples/sites/demos/pc/app/numeric/mouse-wheel-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/mouse-wheel-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(1)
 const mouseWheel = ref(true)
diff --git a/examples/sites/demos/pc/app/numeric/mouse-wheel.vue b/examples/sites/demos/pc/app/numeric/mouse-wheel.vue
index 607d7b5a4..9bbd0973a 100644
--- a/examples/sites/demos/pc/app/numeric/mouse-wheel.vue
+++ b/examples/sites/demos/pc/app/numeric/mouse-wheel.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue b/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue
index e966410f4..9d1337348 100644
--- a/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/numeric-size-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(1)
 </script>
diff --git a/examples/sites/demos/pc/app/numeric/numeric-size.vue b/examples/sites/demos/pc/app/numeric/numeric-size.vue
index 758bc0709..feca79904 100644
--- a/examples/sites/demos/pc/app/numeric/numeric-size.vue
+++ b/examples/sites/demos/pc/app/numeric/numeric-size.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/precision-composition-api.vue b/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
index 6b62e1c9c..c13953142 100644
--- a/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/precision-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(1)
 const precision = ref(2)
diff --git a/examples/sites/demos/pc/app/numeric/precision.vue b/examples/sites/demos/pc/app/numeric/precision.vue
index cdfff41f7..026b25ab1 100644
--- a/examples/sites/demos/pc/app/numeric/precision.vue
+++ b/examples/sites/demos/pc/app/numeric/precision.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="ts">
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/string-mode-composition-api.vue b/examples/sites/demos/pc/app/numeric/string-mode-composition-api.vue
index c9b08ae8c..7b8d10c4c 100644
--- a/examples/sites/demos/pc/app/numeric/string-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/string-mode-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 import { ref } from 'vue'
 const step = ref('0.00000000000000000002')
 const stepNum = ref('0.00000000000000000002')
diff --git a/examples/sites/demos/pc/app/numeric/string-mode.vue b/examples/sites/demos/pc/app/numeric/string-mode.vue
index 925ad9b90..0aa5c7683 100644
--- a/examples/sites/demos/pc/app/numeric/string-mode.vue
+++ b/examples/sites/demos/pc/app/numeric/string-mode.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/numeric/unit-composition-api.vue b/examples/sites/demos/pc/app/numeric/unit-composition-api.vue
index 58d87dac6..79d920fec 100644
--- a/examples/sites/demos/pc/app/numeric/unit-composition-api.vue
+++ b/examples/sites/demos/pc/app/numeric/unit-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 const value = ref(1)
 const unit = ref('kg')
diff --git a/examples/sites/demos/pc/app/numeric/unit.vue b/examples/sites/demos/pc/app/numeric/unit.vue
index 684e5ebd7..fb6eddec7 100644
--- a/examples/sites/demos/pc/app/numeric/unit.vue
+++ b/examples/sites/demos/pc/app/numeric/unit.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Numeric } from '@opentiny/vue'
+import { TinyNumeric } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyNumeric: Numeric
+    TinyNumeric
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pager/align-composition-api.vue b/examples/sites/demos/pc/app/pager/align-composition-api.vue
index 4ad7e04ce..184d50c51 100644
--- a/examples/sites/demos/pc/app/pager/align-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/align-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/pager/align.vue b/examples/sites/demos/pc/app/pager/align.vue
index 471c0ccfd..45bf6673e 100644
--- a/examples/sites/demos/pc/app/pager/align.vue
+++ b/examples/sites/demos/pc/app/pager/align.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/pager/basic-usage-composition-api.vue
index 52595f0c3..3e61feea7 100644
--- a/examples/sites/demos/pc/app/pager/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/basic-usage-composition-api.vue
@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/pager/basic-usage.vue b/examples/sites/demos/pc/app/pager/basic-usage.vue
index f6f36b63b..28ca0b03d 100644
--- a/examples/sites/demos/pc/app/pager/basic-usage.vue
+++ b/examples/sites/demos/pc/app/pager/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/before-page-change-composition-api.vue b/examples/sites/demos/pc/app/pager/before-page-change-composition-api.vue
index e071f7479..517a772ce 100644
--- a/examples/sites/demos/pc/app/pager/before-page-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/before-page-change-composition-api.vue
@@ -12,13 +12,13 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Pager as TinyPager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 const currentPage = ref(5)
 
 function onBeforePageChange(param) {
   const { callback, rollback } = param
-  Modal.confirm('您确定要继续变更操作吗？').then((res) => {
+  TinyModal.confirm('您确定要继续变更操作吗？').then((res) => {
     if (res === 'confirm') {
       callback && callback()
     } else {
diff --git a/examples/sites/demos/pc/app/pager/before-page-change.vue b/examples/sites/demos/pc/app/pager/before-page-change.vue
index cd8cda24c..31c4764c7 100644
--- a/examples/sites/demos/pc/app/pager/before-page-change.vue
+++ b/examples/sites/demos/pc/app/pager/before-page-change.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Pager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   methods: {
     onBeforePageChange(param) {
       const { callback, rollback } = param
-      Modal.confirm('您确定要继续变更操作吗？').then((res) => {
+      TinyModal.confirm('您确定要继续变更操作吗？').then((res) => {
         if (res === 'confirm') {
           callback && callback()
         } else {
diff --git a/examples/sites/demos/pc/app/pager/current-page-composition-api.vue b/examples/sites/demos/pc/app/pager/current-page-composition-api.vue
index 22945d220..43664acd9 100644
--- a/examples/sites/demos/pc/app/pager/current-page-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/current-page-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/pager/current-page.vue b/examples/sites/demos/pc/app/pager/current-page.vue
index f5580fe07..ac431d2c2 100644
--- a/examples/sites/demos/pc/app/pager/current-page.vue
+++ b/examples/sites/demos/pc/app/pager/current-page.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/custom-layout-composition-api.vue b/examples/sites/demos/pc/app/pager/custom-layout-composition-api.vue
index 3fb5ceb79..deec0b7aa 100644
--- a/examples/sites/demos/pc/app/pager/custom-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/custom-layout-composition-api.vue
@@ -10,5 +10,5 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/pager/custom-layout.vue b/examples/sites/demos/pc/app/pager/custom-layout.vue
index e967963a9..621d995b7 100644
--- a/examples/sites/demos/pc/app/pager/custom-layout.vue
+++ b/examples/sites/demos/pc/app/pager/custom-layout.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/custom-next-prev-text-composition-api.vue b/examples/sites/demos/pc/app/pager/custom-next-prev-text-composition-api.vue
index e2d36ee6f..5522c8ffa 100644
--- a/examples/sites/demos/pc/app/pager/custom-next-prev-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/custom-next-prev-text-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/pager/custom-next-prev-text.vue b/examples/sites/demos/pc/app/pager/custom-next-prev-text.vue
index 7c7337e86..d12ae703b 100644
--- a/examples/sites/demos/pc/app/pager/custom-next-prev-text.vue
+++ b/examples/sites/demos/pc/app/pager/custom-next-prev-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/custom-total-composition-api.vue b/examples/sites/demos/pc/app/pager/custom-total-composition-api.vue
index b216a1276..f0decd83b 100644
--- a/examples/sites/demos/pc/app/pager/custom-total-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/custom-total-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 const currentPage = ref(5)
 </script>
diff --git a/examples/sites/demos/pc/app/pager/custom-total.vue b/examples/sites/demos/pc/app/pager/custom-total.vue
index d484cae76..1b4240ff3 100644
--- a/examples/sites/demos/pc/app/pager/custom-total.vue
+++ b/examples/sites/demos/pc/app/pager/custom-total.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pager/disabled-and-size-composition-api.vue b/examples/sites/demos/pc/app/pager/disabled-and-size-composition-api.vue
index 9bbf0b052..3023c2409 100644
--- a/examples/sites/demos/pc/app/pager/disabled-and-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/disabled-and-size-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Pager as TinyPager, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyPager, TinySwitch } from '@opentiny/vue'
 
 const isDisabled = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/pager/disabled-and-size.vue b/examples/sites/demos/pc/app/pager/disabled-and-size.vue
index dc0de6c0b..8c71ff8bc 100644
--- a/examples/sites/demos/pc/app/pager/disabled-and-size.vue
+++ b/examples/sites/demos/pc/app/pager/disabled-and-size.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Pager, Switch } from '@opentiny/vue'
+import { TinyPager, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager,
-    TinySwitch: Switch
+    TinyPager,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pager/hide-on-single-page-composition-api.vue b/examples/sites/demos/pc/app/pager/hide-on-single-page-composition-api.vue
index c95dce689..2e8cb01d7 100644
--- a/examples/sites/demos/pc/app/pager/hide-on-single-page-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/hide-on-single-page-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Pager as TinyPager, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyPager, TinySwitch } from '@opentiny/vue'
 
 const isHide = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/pager/hide-on-single-page.vue b/examples/sites/demos/pc/app/pager/hide-on-single-page.vue
index 765cf32fd..6270e4cd5 100644
--- a/examples/sites/demos/pc/app/pager/hide-on-single-page.vue
+++ b/examples/sites/demos/pc/app/pager/hide-on-single-page.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Pager, Switch } from '@opentiny/vue'
+import { TinyPager, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager,
-    TinySwitch: Switch
+    TinyPager,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pager/page-count-composition-api.vue b/examples/sites/demos/pc/app/pager/page-count-composition-api.vue
index 19095bafc..51c9e968a 100644
--- a/examples/sites/demos/pc/app/pager/page-count-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/page-count-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/pager/page-count.vue b/examples/sites/demos/pc/app/pager/page-count.vue
index 2def35b89..5ece4dd2b 100644
--- a/examples/sites/demos/pc/app/pager/page-count.vue
+++ b/examples/sites/demos/pc/app/pager/page-count.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/page-size-composition-api.vue b/examples/sites/demos/pc/app/pager/page-size-composition-api.vue
index afe1d7d30..bec409ecd 100644
--- a/examples/sites/demos/pc/app/pager/page-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/page-size-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/pager/page-size.vue b/examples/sites/demos/pc/app/pager/page-size.vue
index 6ab348f17..aa7c5c835 100644
--- a/examples/sites/demos/pc/app/pager/page-size.vue
+++ b/examples/sites/demos/pc/app/pager/page-size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Pager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/pager-count-composition-api.vue b/examples/sites/demos/pc/app/pager/pager-count-composition-api.vue
index 45b6c8f35..75d9a3d6c 100644
--- a/examples/sites/demos/pc/app/pager/pager-count-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/pager-count-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/pager/pager-count.vue b/examples/sites/demos/pc/app/pager/pager-count.vue
index 67d3324da..2b6e34111 100644
--- a/examples/sites/demos/pc/app/pager/pager-count.vue
+++ b/examples/sites/demos/pc/app/pager/pager-count.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/pager-event-composition-api.vue b/examples/sites/demos/pc/app/pager/pager-event-composition-api.vue
index 054d57853..d4b01f104 100644
--- a/examples/sites/demos/pc/app/pager/pager-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/pager-event-composition-api.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 function debounce(fn, delay = 50) {
   let timer
@@ -28,34 +28,34 @@ function debounce(fn, delay = 50) {
 }
 
 function handleCurrentChange(val) {
-  Modal.message({
+  TinyModal.message({
     message: `current-change 事件，当前页: ${val}`,
     status: 'info'
   })
 }
 
 function handleSizeChange(val) {
-  Modal.message({
+  TinyModal.message({
     message: `size-change 事件，每页条目数: ${val}`,
     status: 'info'
   })
 }
 
 function prevClick(val) {
-  Modal.message({
+  TinyModal.message({
     message: `prev-click 事件，当前页: ${val}`,
     status: 'info'
   })
 }
 
 function nextClick(val) {
-  Modal.message({
+  TinyModal.message({
     message: `next-click 事件，当前页: ${val}`,
     status: 'info'
   })
 }
 const fetchData = debounce(() => {
-  Modal.message({
+  TinyModal.message({
     message: '模拟后台拉取数据',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/pager/pager-event.vue b/examples/sites/demos/pc/app/pager/pager-event.vue
index 3800b50f8..488e35b2f 100644
--- a/examples/sites/demos/pc/app/pager/pager-event.vue
+++ b/examples/sites/demos/pc/app/pager/pager-event.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { Pager, Modal } from '@opentiny/vue'
+import { TinyPager, TinyModal } from '@opentiny/vue'
 
 function debounce(fn, delay = 50) {
   let timer
@@ -29,35 +29,35 @@ function debounce(fn, delay = 50) {
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   },
   methods: {
     handleCurrentChange(val) {
-      Modal.message({
+      TinyModal.message({
         message: `current-change 事件，当前页: ${val}`,
         status: 'info'
       })
     },
     handleSizeChange(val) {
-      Modal.message({
+      TinyModal.message({
         message: `size-change 事件，每页条目数: ${val}`,
         status: 'info'
       })
     },
     prevClick(val) {
-      Modal.message({
+      TinyModal.message({
         message: `prev-click 事件，当前页: ${val}`,
         status: 'info'
       })
     },
     nextClick(val) {
-      Modal.message({
+      TinyModal.message({
         message: `next-click 事件，当前页: ${val}`,
         status: 'info'
       })
     },
     fetchData: debounce(() => {
-      Modal.message({
+      TinyModal.message({
         message: '模拟后台拉取数据',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue b/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
index 8984d4de9..30c1aa55d 100644
--- a/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
@@ -37,7 +37,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager as TinyPager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 const custPager = ref({
   currentPage: 1,
diff --git a/examples/sites/demos/pc/app/pager/pager-in-grid.vue b/examples/sites/demos/pc/app/pager/pager-in-grid.vue
index 903ff8b97..ae9bbb46c 100644
--- a/examples/sites/demos/pc/app/pager/pager-in-grid.vue
+++ b/examples/sites/demos/pc/app/pager/pager-in-grid.vue
@@ -36,13 +36,13 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyPager: Pager
+    TinyGrid,
+    TinyGridColumn,
+    TinyPager
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pager/pager-mode-composition-api.vue b/examples/sites/demos/pc/app/pager/pager-mode-composition-api.vue
index 7787a5b06..023c663a0 100644
--- a/examples/sites/demos/pc/app/pager/pager-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/pager-mode-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Pager as TinyPager, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
+import { TinyPager, TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 const mode = ref('number')
 </script>
diff --git a/examples/sites/demos/pc/app/pager/pager-mode.vue b/examples/sites/demos/pc/app/pager/pager-mode.vue
index 50f167976..62ab9cdcf 100644
--- a/examples/sites/demos/pc/app/pager/pager-mode.vue
+++ b/examples/sites/demos/pc/app/pager/pager-mode.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Pager, RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyPager, TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager,
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyPager,
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pager/popper-append-to-body-composition-api.vue b/examples/sites/demos/pc/app/pager/popper-append-to-body-composition-api.vue
index b270d5905..f42ac6a33 100644
--- a/examples/sites/demos/pc/app/pager/popper-append-to-body-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/popper-append-to-body-composition-api.vue
@@ -9,5 +9,5 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/pager/popper-append-to-body.vue b/examples/sites/demos/pc/app/pager/popper-append-to-body.vue
index add2f8d22..7062220c8 100644
--- a/examples/sites/demos/pc/app/pager/popper-append-to-body.vue
+++ b/examples/sites/demos/pc/app/pager/popper-append-to-body.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pager/popper-class-composition-api.vue b/examples/sites/demos/pc/app/pager/popper-class-composition-api.vue
index e007d6e10..a1207f77a 100644
--- a/examples/sites/demos/pc/app/pager/popper-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/popper-class-composition-api.vue
@@ -9,8 +9,9 @@
 </template>
 
 <script setup>
-import { Pager as TinyPager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>
+
 <style>
 .custom-pager.tiny-popper {
   background: #e6f7ff;
diff --git a/examples/sites/demos/pc/app/pager/popper-class.vue b/examples/sites/demos/pc/app/pager/popper-class.vue
index 1c32017ea..90184e182 100644
--- a/examples/sites/demos/pc/app/pager/popper-class.vue
+++ b/examples/sites/demos/pc/app/pager/popper-class.vue
@@ -9,14 +9,15 @@
 </template>
 
 <script>
-import { Pager } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager
+    TinyPager
   }
 }
 </script>
+
 <style>
 .custom-pager.tiny-popper {
   background: #e6f7ff;
diff --git a/examples/sites/demos/pc/app/pager/show-total-loading-composition-api.vue b/examples/sites/demos/pc/app/pager/show-total-loading-composition-api.vue
index 3dbe99a5b..233a729f1 100644
--- a/examples/sites/demos/pc/app/pager/show-total-loading-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/show-total-loading-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Pager as TinyPager, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyPager, TinySwitch } from '@opentiny/vue'
 
 const totalLoading = ref(true)
 </script>
diff --git a/examples/sites/demos/pc/app/pager/show-total-loading.vue b/examples/sites/demos/pc/app/pager/show-total-loading.vue
index e896a7c84..5758cc0cd 100644
--- a/examples/sites/demos/pc/app/pager/show-total-loading.vue
+++ b/examples/sites/demos/pc/app/pager/show-total-loading.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Pager, Switch } from '@opentiny/vue'
+import { TinyPager, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager: Pager,
-    TinySwitch: Switch
+    TinyPager,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pop-upload/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/basic-usage-composition-api.vue
index f24be7c7b..3ed5dda5c 100644
--- a/examples/sites/demos/pc/app/pop-upload/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const requestData = ref({
diff --git a/examples/sites/demos/pc/app/pop-upload/basic-usage.vue b/examples/sites/demos/pc/app/pop-upload/basic-usage.vue
index 9e5dc2141..d60182ae5 100644
--- a/examples/sites/demos/pc/app/pop-upload/basic-usage.vue
+++ b/examples/sites/demos/pc/app/pop-upload/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pop-upload/before-upload-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/before-upload-composition-api.vue
index c09c9324d..1c2f4ef3f 100644
--- a/examples/sites/demos/pc/app/pop-upload/before-upload-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/before-upload-composition-api.vue
@@ -4,14 +4,14 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload, Modal } from '@opentiny/vue'
+import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 
 function handleUpload(file) {
   // return false  支持同步返回 也支持 Promise异步返回
   return new Promise((resolve, reject) => {
-    Modal.confirm(`确定上传 ${file.name}？`).then((res) => {
+    TinyModal.confirm(`确定上传 ${file.name}？`).then((res) => {
       res === 'confirm' ? resolve() : reject(new Error())
     })
   })
diff --git a/examples/sites/demos/pc/app/pop-upload/before-upload.vue b/examples/sites/demos/pc/app/pop-upload/before-upload.vue
index c1970e400..7530fca45 100644
--- a/examples/sites/demos/pc/app/pop-upload/before-upload.vue
+++ b/examples/sites/demos/pc/app/pop-upload/before-upload.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload, Modal } from '@opentiny/vue'
+import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
     handleUpload(file) {
       // return false  支持同步返回 也支持 Promise异步返回
       return new Promise((resolve, reject) => {
-        Modal.confirm(`确定上传 ${file.name}？`).then((res) => {
+        TinyModal.confirm(`确定上传 ${file.name}？`).then((res) => {
           res === 'confirm' ? resolve() : reject(new Error())
         })
       })
diff --git a/examples/sites/demos/pc/app/pop-upload/custom-request-headers-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/custom-request-headers-composition-api.vue
index 2b42e8438..39ddc5422 100644
--- a/examples/sites/demos/pc/app/pop-upload/custom-request-headers-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/custom-request-headers-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const headers = ref({
diff --git a/examples/sites/demos/pc/app/pop-upload/custom-request-headers.vue b/examples/sites/demos/pc/app/pop-upload/custom-request-headers.vue
index 00bc0eebe..2997136ea 100644
--- a/examples/sites/demos/pc/app/pop-upload/custom-request-headers.vue
+++ b/examples/sites/demos/pc/app/pop-upload/custom-request-headers.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pop-upload/file-limit-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/file-limit-composition-api.vue
index cdea7ed79..83c87891f 100644
--- a/examples/sites/demos/pc/app/pop-upload/file-limit-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/file-limit-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 </script>
diff --git a/examples/sites/demos/pc/app/pop-upload/file-limit.vue b/examples/sites/demos/pc/app/pop-upload/file-limit.vue
index 81da71cf1..155e979fa 100644
--- a/examples/sites/demos/pc/app/pop-upload/file-limit.vue
+++ b/examples/sites/demos/pc/app/pop-upload/file-limit.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pop-upload/file-type-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/file-type-composition-api.vue
index 16ebcd883..29ae62b67 100644
--- a/examples/sites/demos/pc/app/pop-upload/file-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/file-type-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 </script>
diff --git a/examples/sites/demos/pc/app/pop-upload/file-type.vue b/examples/sites/demos/pc/app/pop-upload/file-type.vue
index 835ef478e..42750baec 100644
--- a/examples/sites/demos/pc/app/pop-upload/file-type.vue
+++ b/examples/sites/demos/pc/app/pop-upload/file-type.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pop-upload/fill-button-text-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/fill-button-text-composition-api.vue
index 999be904f..8b84b7e1d 100644
--- a/examples/sites/demos/pc/app/pop-upload/fill-button-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/fill-button-text-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 </script>
diff --git a/examples/sites/demos/pc/app/pop-upload/fill-button-text.vue b/examples/sites/demos/pc/app/pop-upload/fill-button-text.vue
index 8ed70fcc1..0d92f7f57 100644
--- a/examples/sites/demos/pc/app/pop-upload/fill-button-text.vue
+++ b/examples/sites/demos/pc/app/pop-upload/fill-button-text.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pop-upload/http-request-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/http-request-composition-api.vue
index 3a4b14238..c778300c5 100644
--- a/examples/sites/demos/pc/app/pop-upload/http-request-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/http-request-composition-api.vue
@@ -4,13 +4,13 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload, Modal } from '@opentiny/vue'
+import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 
 const httpRequest = ref(() => {
   return new Promise((resolve) => {
     // 此处为用户自定义的上传服务请求
     setTimeout(() => {
-      Modal.message('上传成功')
+      TinyModal.message('上传成功')
     }, 500)
   })
 })
diff --git a/examples/sites/demos/pc/app/pop-upload/http-request.vue b/examples/sites/demos/pc/app/pop-upload/http-request.vue
index 8c45a8a99..2416532d0 100644
--- a/examples/sites/demos/pc/app/pop-upload/http-request.vue
+++ b/examples/sites/demos/pc/app/pop-upload/http-request.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload, Modal } from '@opentiny/vue'
+import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
@@ -15,7 +15,7 @@ export default {
         return new Promise((resolve) => {
           // 此处为用户自定义的上传服务请求
           setTimeout(() => {
-            Modal.message('上传成功')
+            TinyModal.message('上传成功')
           }, 500)
         })
       }
diff --git a/examples/sites/demos/pc/app/pop-upload/prevent-delete-file-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/prevent-delete-file-composition-api.vue
index 0aa88ed6c..b7e749b66 100644
--- a/examples/sites/demos/pc/app/pop-upload/prevent-delete-file-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/prevent-delete-file-composition-api.vue
@@ -4,14 +4,14 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload, Modal } from '@opentiny/vue'
+import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 
 function handleRemove(file) {
   // return false  支持同步返回 也支持 Promise异步返回
   return new Promise((resolve, reject) => {
-    Modal.confirm(`确定移除 ${file.name}？`).then((res) => {
+    TinyModal.confirm(`确定移除 ${file.name}？`).then((res) => {
       res === 'confirm' ? resolve() : reject(new Error())
     })
   })
diff --git a/examples/sites/demos/pc/app/pop-upload/prevent-delete-file.vue b/examples/sites/demos/pc/app/pop-upload/prevent-delete-file.vue
index 09073c44b..801793517 100644
--- a/examples/sites/demos/pc/app/pop-upload/prevent-delete-file.vue
+++ b/examples/sites/demos/pc/app/pop-upload/prevent-delete-file.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload, Modal } from '@opentiny/vue'
+import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
@@ -18,7 +18,7 @@ export default {
     handleRemove(file) {
       // return false  支持同步返回 也支持 Promise异步返回
       return new Promise((resolve, reject) => {
-        Modal.confirm(`确定移除 ${file.name}？`).then((res) => {
+        TinyModal.confirm(`确定移除 ${file.name}？`).then((res) => {
           res === 'confirm' ? resolve() : reject(new Error())
         })
       })
diff --git a/examples/sites/demos/pc/app/pop-upload/size-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/size-composition-api.vue
index dc4a425c0..358148e94 100644
--- a/examples/sites/demos/pc/app/pop-upload/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/size-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 </script>
diff --git a/examples/sites/demos/pc/app/pop-upload/size.vue b/examples/sites/demos/pc/app/pop-upload/size.vue
index 5cc578d34..20f24f9d1 100644
--- a/examples/sites/demos/pc/app/pop-upload/size.vue
+++ b/examples/sites/demos/pc/app/pop-upload/size.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload } from '@opentiny/vue'
+import { TinyPopUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/pop-upload/upload-events-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/upload-events-composition-api.vue
index 60beee2fb..63f8d3ddf 100644
--- a/examples/sites/demos/pc/app/pop-upload/upload-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/upload-events-composition-api.vue
@@ -13,27 +13,27 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload, Modal } from '@opentiny/vue'
+import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 
 function handleRemove() {
-  Modal.message('触发删除文件回调事件')
+  TinyModal.message('触发删除文件回调事件')
 }
 
 function handleProgress() {
-  Modal.message('文件上传时的回调 返回进程')
+  TinyModal.message('文件上传时的回调 返回进程')
 }
 
 function handleError() {
-  Modal.message('文件上传失败回调')
+  TinyModal.message('文件上传失败回调')
 }
 
 function handleExceed() {
-  Modal.message('触发文件超出个数限制回调事件')
+  TinyModal.message('触发文件超出个数限制回调事件')
 }
 
 function handleSuccess() {
-  Modal.message('触发上传文件成功回调事件')
+  TinyModal.message('触发上传文件成功回调事件')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/pop-upload/upload-events.vue b/examples/sites/demos/pc/app/pop-upload/upload-events.vue
index 9c4e5df95..735f0d1df 100644
--- a/examples/sites/demos/pc/app/pop-upload/upload-events.vue
+++ b/examples/sites/demos/pc/app/pop-upload/upload-events.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload, Modal } from '@opentiny/vue'
+import { TinyPopUpload, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload
+    TinyPopUpload
   },
   data() {
     return {
@@ -25,19 +25,19 @@ export default {
   },
   methods: {
     handleRemove() {
-      Modal.message('触发删除文件回调事件')
+      TinyModal.message('触发删除文件回调事件')
     },
     handleProgress() {
-      Modal.message('文件上传时的回调 返回进程')
+      TinyModal.message('文件上传时的回调 返回进程')
     },
     handleError() {
-      Modal.message('文件上传失败回调')
+      TinyModal.message('文件上传失败回调')
     },
     handleExceed() {
-      Modal.message('触发文件超出个数限制回调事件')
+      TinyModal.message('触发文件超出个数限制回调事件')
     },
     handleSuccess() {
-      Modal.message('触发上传文件成功回调事件')
+      TinyModal.message('触发上传文件成功回调事件')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/pop-upload/upload-tip-composition-api.vue b/examples/sites/demos/pc/app/pop-upload/upload-tip-composition-api.vue
index 9ac268a40..f2d82658c 100644
--- a/examples/sites/demos/pc/app/pop-upload/upload-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/pop-upload/upload-tip-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { PopUpload as TinyPopUpload, Alert as TinyAlert, Link as TinyLink } from '@opentiny/vue'
+import { TinyPopUpload, TinyAlert, TinyLink } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const limit = ref(500)
diff --git a/examples/sites/demos/pc/app/pop-upload/upload-tip.vue b/examples/sites/demos/pc/app/pop-upload/upload-tip.vue
index eb969a4e2..51c6c79c2 100644
--- a/examples/sites/demos/pc/app/pop-upload/upload-tip.vue
+++ b/examples/sites/demos/pc/app/pop-upload/upload-tip.vue
@@ -23,13 +23,13 @@
 </template>
 
 <script lang="jsx">
-import { PopUpload, Alert, Link } from '@opentiny/vue'
+import { TinyPopUpload, TinyAlert, TinyLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopUpload: PopUpload,
-    TinyAlert: Alert,
-    TinyLink: Link
+    TinyPopUpload,
+    TinyAlert,
+    TinyLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popconfirm/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/basic-usage-composition-api.vue
index 6d2bd2ab3..5e45b0bef 100644
--- a/examples/sites/demos/pc/app/popconfirm/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/basic-usage-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 const title = ref('这是气泡标题')
 const message = ref('这是气泡确认框提示内容文本描述，这是两行内容的展示样式。')
diff --git a/examples/sites/demos/pc/app/popconfirm/basic-usage.vue b/examples/sites/demos/pc/app/popconfirm/basic-usage.vue
index 5dbf83ff9..60b947abc 100644
--- a/examples/sites/demos/pc/app/popconfirm/basic-usage.vue
+++ b/examples/sites/demos/pc/app/popconfirm/basic-usage.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popconfirm/cancel-button-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/cancel-button-composition-api.vue
index 4f11d48b8..cbed5d175 100644
--- a/examples/sites/demos/pc/app/popconfirm/cancel-button-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/cancel-button-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 const title = ref('这是气泡标题')
 const message = ref('这是气泡提示框内容。')
diff --git a/examples/sites/demos/pc/app/popconfirm/cancel-button.vue b/examples/sites/demos/pc/app/popconfirm/cancel-button.vue
index b067bbfb5..0fc01fef8 100644
--- a/examples/sites/demos/pc/app/popconfirm/cancel-button.vue
+++ b/examples/sites/demos/pc/app/popconfirm/cancel-button.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popconfirm/custom-class-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/custom-class-composition-api.vue
index 085bb7a3a..b2a0f2067 100644
--- a/examples/sites/demos/pc/app/popconfirm/custom-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/custom-class-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 const title = ref('这是气泡标题')
 const message = ref('这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。')
diff --git a/examples/sites/demos/pc/app/popconfirm/custom-class.vue b/examples/sites/demos/pc/app/popconfirm/custom-class.vue
index be177ebfc..54a96d912 100644
--- a/examples/sites/demos/pc/app/popconfirm/custom-class.vue
+++ b/examples/sites/demos/pc/app/popconfirm/custom-class.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popconfirm/event-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/event-composition-api.vue
index 3135e6593..438b0e379 100644
--- a/examples/sites/demos/pc/app/popconfirm/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/event-composition-api.vue
@@ -10,27 +10,27 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton, TinyModal } from '@opentiny/vue'
 
 const title = ref('这是气泡标题')
 const message = ref('这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。')
 
 function show() {
-  Modal.message({
+  TinyModal.message({
     status: 'info',
     message: 'show事件触发了'
   })
 }
 
 function hide() {
-  Modal.message({
+  TinyModal.message({
     status: 'info',
     message: 'hide事件触发了'
   })
 }
 
 function confirm() {
-  Modal.message({
+  TinyModal.message({
     status: 'info',
     message: 'confirm事件触发了'
   })
diff --git a/examples/sites/demos/pc/app/popconfirm/event.vue b/examples/sites/demos/pc/app/popconfirm/event.vue
index feb15b120..8084fcda2 100644
--- a/examples/sites/demos/pc/app/popconfirm/event.vue
+++ b/examples/sites/demos/pc/app/popconfirm/event.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button, Modal } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
@@ -24,19 +24,19 @@ export default {
   },
   methods: {
     show() {
-      Modal.message({
+      TinyModal.message({
         status: 'info',
         message: 'show事件触发了'
       })
     },
     hide() {
-      Modal.message({
+      TinyModal.message({
         status: 'info',
         message: 'hide事件触发了'
       })
     },
     confirm() {
-      Modal.message({
+      TinyModal.message({
         status: 'info',
         message: 'confirm事件触发了'
       })
diff --git a/examples/sites/demos/pc/app/popconfirm/placement-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/placement-composition-api.vue
index 555cf35ca..d1e14747c 100644
--- a/examples/sites/demos/pc/app/popconfirm/placement-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/placement-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 const title = ref('这是气泡标题')
 const message = ref('这是气泡提示框内容。')
diff --git a/examples/sites/demos/pc/app/popconfirm/placement.vue b/examples/sites/demos/pc/app/popconfirm/placement.vue
index a7ecc27e2..68631d9ca 100644
--- a/examples/sites/demos/pc/app/popconfirm/placement.vue
+++ b/examples/sites/demos/pc/app/popconfirm/placement.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
index 50055000e..308000db1 100644
--- a/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 const title = ref('这是气泡标题')
 const message = ref('这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。')
diff --git a/examples/sites/demos/pc/app/popconfirm/slot-footer.vue b/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
index b8e396ca8..732a679d2 100644
--- a/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
+++ b/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popconfirm/trigger-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/trigger-composition-api.vue
index 62a95a4ff..e5773f606 100644
--- a/examples/sites/demos/pc/app/popconfirm/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/trigger-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 const title = ref('确定要删除该安全组规则吗?')
 </script>
diff --git a/examples/sites/demos/pc/app/popconfirm/trigger.vue b/examples/sites/demos/pc/app/popconfirm/trigger.vue
index 41750455f..40cb776cd 100644
--- a/examples/sites/demos/pc/app/popconfirm/trigger.vue
+++ b/examples/sites/demos/pc/app/popconfirm/trigger.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
index ab0caca1f..4fadfaf94 100644
--- a/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 
 const title = ref('提示标题')
diff --git a/examples/sites/demos/pc/app/popconfirm/type.vue b/examples/sites/demos/pc/app/popconfirm/type.vue
index 9a0e577ac..98cf12ce7 100644
--- a/examples/sites/demos/pc/app/popconfirm/type.vue
+++ b/examples/sites/demos/pc/app/popconfirm/type.vue
@@ -33,13 +33,13 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popconfirm/width-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/width-composition-api.vue
index f51ecb46d..954d85713 100644
--- a/examples/sites/demos/pc/app/popconfirm/width-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/width-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 const title = ref('这是气泡标题')
 const message = ref('这是气泡确认框提示内容。')
diff --git a/examples/sites/demos/pc/app/popconfirm/width.vue b/examples/sites/demos/pc/app/popconfirm/width.vue
index f1b5682f3..934d8684a 100644
--- a/examples/sites/demos/pc/app/popconfirm/width.vue
+++ b/examples/sites/demos/pc/app/popconfirm/width.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Popconfirm, Button } from '@opentiny/vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopconfirm: Popconfirm,
-    TinyButton: Button
+    TinyPopconfirm,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue b/examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue
index 9e8b65f4b..4acb2681d 100644
--- a/examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/auto-lookup-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const value = ref(5)
 const gridOp = ref({
diff --git a/examples/sites/demos/pc/app/popeditor/auto-lookup.vue b/examples/sites/demos/pc/app/popeditor/auto-lookup.vue
index 2863b0b52..ab2903bfe 100644
--- a/examples/sites/demos/pc/app/popeditor/auto-lookup.vue
+++ b/examples/sites/demos/pc/app/popeditor/auto-lookup.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue b/examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue
index 801ebb2c1..cc060091a 100644
--- a/examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/auto-reset-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/auto-reset.vue b/examples/sites/demos/pc/app/popeditor/auto-reset.vue
index 14b012a43..e829d7a54 100644
--- a/examples/sites/demos/pc/app/popeditor/auto-reset.vue
+++ b/examples/sites/demos/pc/app/popeditor/auto-reset.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue
index 712f71179..414c6325a 100644
--- a/examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/basic-usage-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -74,6 +74,7 @@ const dataset = [
     city: '深圳'
   }
 ]
+
 const value = ref('')
 const gridOp = ref({
   columns: [
diff --git a/examples/sites/demos/pc/app/popeditor/basic-usage.vue b/examples/sites/demos/pc/app/popeditor/basic-usage.vue
index b57273235..f618653b6 100644
--- a/examples/sites/demos/pc/app/popeditor/basic-usage.vue
+++ b/examples/sites/demos/pc/app/popeditor/basic-usage.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -78,6 +78,7 @@ export default {
         city: '深圳'
       }
     ]
+
     return {
       value: '',
       gridOp: {
diff --git a/examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue b/examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue
index b74ba6c3d..b55d67ddb 100644
--- a/examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/before-close-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -75,6 +75,7 @@ const dataset = [
     city: '深圳'
   }
 ]
+
 const value = ref('')
 const gridOp = ref({
   columns: [
diff --git a/examples/sites/demos/pc/app/popeditor/before-close.vue b/examples/sites/demos/pc/app/popeditor/before-close.vue
index 51c454af3..273fd5be1 100644
--- a/examples/sites/demos/pc/app/popeditor/before-close.vue
+++ b/examples/sites/demos/pc/app/popeditor/before-close.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -79,6 +79,7 @@ export default {
         city: '深圳'
       }
     ]
+
     return {
       value: '',
       gridOp: {
diff --git a/examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue b/examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue
index cc76d6949..8216afdd0 100644
--- a/examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/before-reset-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor, Modal } from '@opentiny/vue'
+import { TinyPopeditor, TinyModal } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -107,6 +107,6 @@ const conditions = ref([
 ])
 
 function beforeReset() {
-  Modal.message({ message: '重置前的钩子函数', status: 'info' })
+  TinyModal.message({ message: '重置前的钩子函数', status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/popeditor/before-reset.vue b/examples/sites/demos/pc/app/popeditor/before-reset.vue
index a60782ebd..2e46d5475 100644
--- a/examples/sites/demos/pc/app/popeditor/before-reset.vue
+++ b/examples/sites/demos/pc/app/popeditor/before-reset.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Popeditor, Modal } from '@opentiny/vue'
+import { TinyPopeditor, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -114,7 +114,7 @@ export default {
   },
   methods: {
     beforeReset() {
-      Modal.message({ message: '重置前的钩子函数', status: 'info' })
+      TinyModal.message({ message: '重置前的钩子函数', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue b/examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue
index 297f913a7..3ef547120 100644
--- a/examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/clearable-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/clearable.vue b/examples/sites/demos/pc/app/popeditor/clearable.vue
index 5af93af88..29fd838a7 100644
--- a/examples/sites/demos/pc/app/popeditor/clearable.vue
+++ b/examples/sites/demos/pc/app/popeditor/clearable.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue b/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue
index deee59b13..efe679592 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue
@@ -41,14 +41,14 @@
 <script setup>
 import { ref } from 'vue'
 import {
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Input as TinyInput,
-  DatePicker as TinyDatePicker,
-  Button as TinyButton,
-  Modal,
-  CheckboxGroup as TinyCheckboxGroup,
-  Popeditor as TinyPopeditor
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyDatePicker,
+  TinyButton,
+  TinyModal,
+  TinyCheckboxGroup,
+  TinyPopeditor
 } from '@opentiny/vue'
 
 const dataset = [
@@ -113,6 +113,7 @@ const dataset = [
     city: '深圳'
   }
 ]
+
 const options = ref([
   { label: '45', text: '很好' },
   { label: '46', text: '一般' }
@@ -171,7 +172,7 @@ function reset() {
 function handleSubmit() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      Modal.alert('提交成功')
+      TinyModal.alert('提交成功')
     }
   })
 }
diff --git a/examples/sites/demos/pc/app/popeditor/condition-form.vue b/examples/sites/demos/pc/app/popeditor/condition-form.vue
index fd45dea0b..b593b5e27 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-form.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-form.vue
@@ -39,17 +39,26 @@
 </template>
 
 <script>
-import { Form, FormItem, Input, DatePicker, Button, Modal, CheckboxGroup, Popeditor } from '@opentiny/vue'
+import {
+  TinyForm,
+  TinyFormItem,
+  TinyInput,
+  TinyDatePicker,
+  TinyButton,
+  TinyModal,
+  TinyCheckboxGroup,
+  TinyPopeditor
+} from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyDatePicker: DatePicker,
-    TinyButton: Button,
-    TinyCheckboxGroup: CheckboxGroup,
-    TinyPopeditor: Popeditor
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyDatePicker,
+    TinyButton,
+    TinyCheckboxGroup,
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -114,6 +123,7 @@ export default {
         city: '深圳'
       }
     ]
+
     return {
       options: [
         { label: '45', text: '很好' },
@@ -173,7 +183,7 @@ export default {
     handleSubmit() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          Modal.alert('提交成功')
+          TinyModal.alert('提交成功')
         }
       })
     }
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue b/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
index 9d2ac13f1..1c91581d1 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor, Select, Numeric } from '@opentiny/vue'
+import { TinyPopeditor, TinySelect, TinyNumeric } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 
 const value = ref(5)
@@ -49,7 +49,7 @@ const conditions = ref([
     label: '城市',
     field: 'city',
     labelWidth: '50px',
-    component: hooks.markRaw(Select),
+    component: hooks.markRaw(TinySelect),
     labelPosition: 'left',
     attrs: {
       options: [
@@ -64,7 +64,7 @@ const conditions = ref([
     field: 'employees',
     span: 6,
     labelWidth: '50px',
-    component: hooks.markRaw(Numeric)
+    component: hooks.markRaw(TinyNumeric)
   }
 ])
 
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout.vue b/examples/sites/demos/pc/app/popeditor/condition-layout.vue
index 66fb08329..5bca5f5a6 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Popeditor, Select, Numeric } from '@opentiny/vue'
+import { TinyPopeditor, TinySelect, TinyNumeric } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
@@ -54,7 +54,7 @@ export default {
           label: '城市',
           field: 'city',
           labelWidth: '50px',
-          component: hooks.markRaw(Select),
+          component: hooks.markRaw(TinySelect),
           labelPosition: 'left',
           attrs: {
             options: [
@@ -69,7 +69,7 @@ export default {
           field: 'employees',
           span: 6,
           labelWidth: '50px',
-          component: hooks.markRaw(Numeric)
+          component: hooks.markRaw(TinyNumeric)
         }
       ]
     }
diff --git a/examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue b/examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue
index 6d38887b3..26422f969 100644
--- a/examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/conditions-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/conditions.vue b/examples/sites/demos/pc/app/popeditor/conditions.vue
index 6b3358a88..c04fd6690 100644
--- a/examples/sites/demos/pc/app/popeditor/conditions.vue
+++ b/examples/sites/demos/pc/app/popeditor/conditions.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue b/examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue
index 3f4fc8a54..bd11401b8 100644
--- a/examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/disabled-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/disabled.vue b/examples/sites/demos/pc/app/popeditor/disabled.vue
index 3ccc69d40..14fc83b30 100644
--- a/examples/sites/demos/pc/app/popeditor/disabled.vue
+++ b/examples/sites/demos/pc/app/popeditor/disabled.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue b/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
index 7452c6c6d..ace6a0008 100644
--- a/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/draggable-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -80,6 +80,7 @@ const dataset = [
     city: '深圳'
   }
 ]
+
 const value = ref('')
 const gridOp = ref({
   columns: [
diff --git a/examples/sites/demos/pc/app/popeditor/draggable.vue b/examples/sites/demos/pc/app/popeditor/draggable.vue
index 5f2bc35ca..5c128a623 100644
--- a/examples/sites/demos/pc/app/popeditor/draggable.vue
+++ b/examples/sites/demos/pc/app/popeditor/draggable.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -84,6 +84,7 @@ export default {
         city: '深圳'
       }
     ]
+
     return {
       value: '',
       gridOp: {
diff --git a/examples/sites/demos/pc/app/popeditor/events-composition-api.vue b/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
index 0be1cc74b..2e5c7ad52 100644
--- a/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor, Modal } from '@opentiny/vue'
+import { TinyPopeditor, TinyModal } from '@opentiny/vue'
 
 const value = ref('')
 const gridOp = ref({
@@ -50,7 +50,7 @@ const pagerOp = ref({
 handlePageChange(1)
 
 function changeFn(val, data) {
-  Modal.message({
+  TinyModal.message({
     message: `值变为${val},${JSON.stringify(data)}`,
     status: 'info'
   })
@@ -119,13 +119,14 @@ function handlePageChange(val) {
       city: '深圳'
     }
   ]
+
   const offset = (val - 1) * pagerOp.value.pageSize
   gridOp.value.data = dataset.slice(offset, offset + pagerOp.value.pageSize)
 }
 
 function handlePopup() {
   setTimeout(() => {
-    Modal.message({
+    TinyModal.message({
       message: 'popup 弹窗打开事件',
       status: 'info'
     })
@@ -133,7 +134,7 @@ function handlePopup() {
 }
 
 function handleClose() {
-  Modal.message({
+  TinyModal.message({
     message: 'close 弹窗关闭事件',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/popeditor/events.vue b/examples/sites/demos/pc/app/popeditor/events.vue
index 691f7aa23..8cfc08782 100644
--- a/examples/sites/demos/pc/app/popeditor/events.vue
+++ b/examples/sites/demos/pc/app/popeditor/events.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { Popeditor, Modal } from '@opentiny/vue'
+import { TinyPopeditor, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
@@ -58,7 +58,7 @@ export default {
   },
   methods: {
     changeFn(val, data) {
-      Modal.message({
+      TinyModal.message({
         message: `值变为${val},${JSON.stringify(data)}`,
         status: 'info'
       })
@@ -126,19 +126,20 @@ export default {
           city: '深圳'
         }
       ]
+
       const offset = (val - 1) * this.pagerOp.pageSize
       this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
     },
     handlePopup() {
       setTimeout(() => {
-        Modal.message({
+        TinyModal.message({
           message: 'popup 弹窗打开事件',
           status: 'info'
         })
       }, 0)
     },
     handleClose() {
-      Modal.message({
+      TinyModal.message({
         message: 'close 弹窗关闭事件',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/popeditor/grid-composition-api.vue b/examples/sites/demos/pc/app/popeditor/grid-composition-api.vue
index e74f790bd..9cd8d818b 100644
--- a/examples/sites/demos/pc/app/popeditor/grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/grid-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/grid.vue b/examples/sites/demos/pc/app/popeditor/grid.vue
index a1514229f..410f8c7b5 100644
--- a/examples/sites/demos/pc/app/popeditor/grid.vue
+++ b/examples/sites/demos/pc/app/popeditor/grid.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/icon-composition-api.vue b/examples/sites/demos/pc/app/popeditor/icon-composition-api.vue
index 53f05185b..0ed5efde8 100644
--- a/examples/sites/demos/pc/app/popeditor/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/icon-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 import { iconAttachment } from '@opentiny/vue-icon'
 
 const IconAttachment = iconAttachment()
diff --git a/examples/sites/demos/pc/app/popeditor/icon.vue b/examples/sites/demos/pc/app/popeditor/icon.vue
index 2e5b56d43..2777c75b8 100644
--- a/examples/sites/demos/pc/app/popeditor/icon.vue
+++ b/examples/sites/demos/pc/app/popeditor/icon.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 import { IconAttachment } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popeditor/multi-composition-api.vue b/examples/sites/demos/pc/app/popeditor/multi-composition-api.vue
index f3c11d5e8..46c963c6d 100644
--- a/examples/sites/demos/pc/app/popeditor/multi-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/multi-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue b/examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue
index 9d507e732..f50b852fc 100644
--- a/examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/multi-value-array-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/multi-value-array.vue b/examples/sites/demos/pc/app/popeditor/multi-value-array.vue
index 52b068f6e..8ed4ef6f9 100644
--- a/examples/sites/demos/pc/app/popeditor/multi-value-array.vue
+++ b/examples/sites/demos/pc/app/popeditor/multi-value-array.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/multi.vue b/examples/sites/demos/pc/app/popeditor/multi.vue
index e5bed45b7..a5a737b1b 100644
--- a/examples/sites/demos/pc/app/popeditor/multi.vue
+++ b/examples/sites/demos/pc/app/popeditor/multi.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue b/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
index 83debfcec..9af373027 100644
--- a/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const value = ref('')
 const gridOp = ref({
@@ -112,6 +112,7 @@ function handlePageChange() {
       city: '深圳'
     }
   ]
+
   gridOp.value.data = dataset
 }
 </script>
diff --git a/examples/sites/demos/pc/app/popeditor/pager.vue b/examples/sites/demos/pc/app/popeditor/pager.vue
index 6a3ea4a3e..897128127 100644
--- a/examples/sites/demos/pc/app/popeditor/pager.vue
+++ b/examples/sites/demos/pc/app/popeditor/pager.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
@@ -120,6 +120,7 @@ export default {
           city: '深圳'
         }
       ]
+
       this.gridOp.data = dataset
     }
   }
diff --git a/examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue b/examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue
index 5fc5ecd8f..898a6bd6a 100644
--- a/examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/radio-change-close-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -75,6 +75,7 @@ const dataset = [
     city: '深圳'
   }
 ]
+
 const value = ref('')
 const gridOp = ref({
   columns: [
diff --git a/examples/sites/demos/pc/app/popeditor/radio-change-close.vue b/examples/sites/demos/pc/app/popeditor/radio-change-close.vue
index 091d2b701..308daa94c 100644
--- a/examples/sites/demos/pc/app/popeditor/radio-change-close.vue
+++ b/examples/sites/demos/pc/app/popeditor/radio-change-close.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -79,6 +79,7 @@ export default {
         city: '深圳'
       }
     ]
+
     return {
       value: '',
       gridOp: {
diff --git a/examples/sites/demos/pc/app/popeditor/readonly-composition-api.vue b/examples/sites/demos/pc/app/popeditor/readonly-composition-api.vue
index f392b990c..1c195ed20 100644
--- a/examples/sites/demos/pc/app/popeditor/readonly-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/readonly-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/readonly.vue b/examples/sites/demos/pc/app/popeditor/readonly.vue
index a6eca54f7..9fdfec06b 100644
--- a/examples/sites/demos/pc/app/popeditor/readonly.vue
+++ b/examples/sites/demos/pc/app/popeditor/readonly.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/remote-search-composition-api.vue b/examples/sites/demos/pc/app/popeditor/remote-search-composition-api.vue
index 1d3f9e46c..339216010 100644
--- a/examples/sites/demos/pc/app/popeditor/remote-search-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/remote-search-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const value = ref(5)
 const gridOp = ref({
diff --git a/examples/sites/demos/pc/app/popeditor/remote-search.vue b/examples/sites/demos/pc/app/popeditor/remote-search.vue
index 681fe092e..71d62db98 100644
--- a/examples/sites/demos/pc/app/popeditor/remote-search.vue
+++ b/examples/sites/demos/pc/app/popeditor/remote-search.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popeditor/render-text-composition-api.vue b/examples/sites/demos/pc/app/popeditor/render-text-composition-api.vue
index e6407a415..718bf3498 100644
--- a/examples/sites/demos/pc/app/popeditor/render-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/render-text-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const value = ref([20, 25])
 const gridOp = ref({
diff --git a/examples/sites/demos/pc/app/popeditor/render-text.vue b/examples/sites/demos/pc/app/popeditor/render-text.vue
index 8938eda4b..a27d05c83 100644
--- a/examples/sites/demos/pc/app/popeditor/render-text.vue
+++ b/examples/sites/demos/pc/app/popeditor/render-text.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popeditor/resize-composition-api.vue b/examples/sites/demos/pc/app/popeditor/resize-composition-api.vue
index bf7f10546..decde5252 100644
--- a/examples/sites/demos/pc/app/popeditor/resize-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/resize-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -68,6 +68,7 @@ const dataset = [
     city: '深圳'
   }
 ]
+
 const value = ref('')
 const gridOp = ref({
   columns: [
diff --git a/examples/sites/demos/pc/app/popeditor/resize.vue b/examples/sites/demos/pc/app/popeditor/resize.vue
index 6c711504e..83a1bd6c9 100644
--- a/examples/sites/demos/pc/app/popeditor/resize.vue
+++ b/examples/sites/demos/pc/app/popeditor/resize.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -72,6 +72,7 @@ export default {
         city: '深圳'
       }
     ]
+
     return {
       value: '',
       gridOp: {
diff --git a/examples/sites/demos/pc/app/popeditor/selected-box-composition-api.vue b/examples/sites/demos/pc/app/popeditor/selected-box-composition-api.vue
index c47915876..d8ef7b915 100644
--- a/examples/sites/demos/pc/app/popeditor/selected-box-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/selected-box-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/selected-box.vue b/examples/sites/demos/pc/app/popeditor/selected-box.vue
index 086bd9dbb..d841c8ff4 100644
--- a/examples/sites/demos/pc/app/popeditor/selected-box.vue
+++ b/examples/sites/demos/pc/app/popeditor/selected-box.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/show-clear-btn-composition-api.vue b/examples/sites/demos/pc/app/popeditor/show-clear-btn-composition-api.vue
index 6b9e37f18..370c37af1 100644
--- a/examples/sites/demos/pc/app/popeditor/show-clear-btn-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-clear-btn-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/show-clear-btn.vue b/examples/sites/demos/pc/app/popeditor/show-clear-btn.vue
index a065cd8e3..b2ce6378b 100644
--- a/examples/sites/demos/pc/app/popeditor/show-clear-btn.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-clear-btn.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/show-history-composition-api.vue b/examples/sites/demos/pc/app/popeditor/show-history-composition-api.vue
index dc7613cc3..bc4460312 100644
--- a/examples/sites/demos/pc/app/popeditor/show-history-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-history-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const value = ref('')
 const gridOp = ref({
diff --git a/examples/sites/demos/pc/app/popeditor/show-history.vue b/examples/sites/demos/pc/app/popeditor/show-history.vue
index cf2efaf3d..3dfce09a7 100644
--- a/examples/sites/demos/pc/app/popeditor/show-history.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-history.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 import { IconAttachment } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popeditor/show-overflow-composition-api.vue b/examples/sites/demos/pc/app/popeditor/show-overflow-composition-api.vue
index b3309a689..3ee569f2d 100644
--- a/examples/sites/demos/pc/app/popeditor/show-overflow-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-overflow-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/show-overflow.vue b/examples/sites/demos/pc/app/popeditor/show-overflow.vue
index 6dce05e3b..868b6d92b 100644
--- a/examples/sites/demos/pc/app/popeditor/show-overflow.vue
+++ b/examples/sites/demos/pc/app/popeditor/show-overflow.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/single-select-radio-composition-api.vue b/examples/sites/demos/pc/app/popeditor/single-select-radio-composition-api.vue
index b05975eb6..b5f3fc75d 100644
--- a/examples/sites/demos/pc/app/popeditor/single-select-radio-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/single-select-radio-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -65,6 +65,7 @@ const dataset = [
     ]
   }
 ]
+
 const value = ref(2)
 const treeOp = ref({
   data: dataset,
diff --git a/examples/sites/demos/pc/app/popeditor/single-select-radio.vue b/examples/sites/demos/pc/app/popeditor/single-select-radio.vue
index 0ec8f9eb4..fa93ec1bf 100644
--- a/examples/sites/demos/pc/app/popeditor/single-select-radio.vue
+++ b/examples/sites/demos/pc/app/popeditor/single-select-radio.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -69,6 +69,7 @@ export default {
         ]
       }
     ]
+
     return {
       value: 2,
       treeOp: {
diff --git a/examples/sites/demos/pc/app/popeditor/size-composition-api.vue b/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
index e2a3a0a56..5f89e629b 100644
--- a/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/size-composition-api.vue
@@ -40,7 +40,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/size.vue b/examples/sites/demos/pc/app/popeditor/size.vue
index 6c17929cd..eec43b569 100644
--- a/examples/sites/demos/pc/app/popeditor/size.vue
+++ b/examples/sites/demos/pc/app/popeditor/size.vue
@@ -39,11 +39,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/slot-composition-api.vue b/examples/sites/demos/pc/app/popeditor/slot-composition-api.vue
index d382a0386..8b0db9ade 100644
--- a/examples/sites/demos/pc/app/popeditor/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopeditor, TinyInput, TinyButton } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
index 78d5d0590..375310b01 100644
--- a/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopeditor, TinyButton } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -73,6 +73,7 @@ const dataset = [
     city: '深圳'
   }
 ]
+
 const value = ref('')
 const gridOp = ref({
   columns: [
diff --git a/examples/sites/demos/pc/app/popeditor/slot-footer.vue b/examples/sites/demos/pc/app/popeditor/slot-footer.vue
index 4f3fa2bc1..1bf31357d 100644
--- a/examples/sites/demos/pc/app/popeditor/slot-footer.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot-footer.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Popeditor, Button } from '@opentiny/vue'
+import { TinyPopeditor, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor,
-    TinyButton: Button
+    TinyPopeditor,
+    TinyButton
   },
   data() {
     const dataset = [
@@ -78,6 +78,7 @@ export default {
         city: '深圳'
       }
     ]
+
     return {
       value: '',
       gridOp: {
diff --git a/examples/sites/demos/pc/app/popeditor/slot.vue b/examples/sites/demos/pc/app/popeditor/slot.vue
index f3a759a12..b12ce0cff 100644
--- a/examples/sites/demos/pc/app/popeditor/slot.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import { Popeditor, Input, Button } from '@opentiny/vue'
+import { TinyPopeditor, TinyInput, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor,
-    TinyInput: Input,
-    TinyButton: Button
+    TinyPopeditor,
+    TinyInput,
+    TinyButton
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue b/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
index cd52df0d2..61e982dc2 100644
--- a/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/suggest-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/suggest.vue b/examples/sites/demos/pc/app/popeditor/suggest.vue
index 12c0e5c2e..0bd7043e3 100644
--- a/examples/sites/demos/pc/app/popeditor/suggest.vue
+++ b/examples/sites/demos/pc/app/popeditor/suggest.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -83,7 +83,7 @@ const dataset = [
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popeditor/tabindex-composition-api.vue b/examples/sites/demos/pc/app/popeditor/tabindex-composition-api.vue
index a064f0aca..f83be0623 100644
--- a/examples/sites/demos/pc/app/popeditor/tabindex-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/tabindex-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -85,6 +85,7 @@ const dataset = [
     city: '深圳'
   }
 ]
+
 const value1 = ref('')
 const value2 = ref('')
 const gridOp = ref({
diff --git a/examples/sites/demos/pc/app/popeditor/tabindex.vue b/examples/sites/demos/pc/app/popeditor/tabindex.vue
index b1e25b641..920382bc6 100644
--- a/examples/sites/demos/pc/app/popeditor/tabindex.vue
+++ b/examples/sites/demos/pc/app/popeditor/tabindex.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -89,6 +89,7 @@ export default {
         city: '深圳'
       }
     ]
+
     return {
       value1: '',
       value2: '',
diff --git a/examples/sites/demos/pc/app/popeditor/textField-composition-api.vue b/examples/sites/demos/pc/app/popeditor/textField-composition-api.vue
index 2cf92469d..e0805ba5c 100644
--- a/examples/sites/demos/pc/app/popeditor/textField-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/textField-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/textField.vue b/examples/sites/demos/pc/app/popeditor/textField.vue
index c3b03b0bb..fb6253bea 100644
--- a/examples/sites/demos/pc/app/popeditor/textField.vue
+++ b/examples/sites/demos/pc/app/popeditor/textField.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/title-composition-api.vue b/examples/sites/demos/pc/app/popeditor/title-composition-api.vue
index 32c4def9c..6766fc03c 100644
--- a/examples/sites/demos/pc/app/popeditor/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/title-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/title.vue b/examples/sites/demos/pc/app/popeditor/title.vue
index 9d24ee6a3..63837dea8 100644
--- a/examples/sites/demos/pc/app/popeditor/title.vue
+++ b/examples/sites/demos/pc/app/popeditor/title.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/tree-composition-api.vue b/examples/sites/demos/pc/app/popeditor/tree-composition-api.vue
index bd4d8026d..c795712ef 100644
--- a/examples/sites/demos/pc/app/popeditor/tree-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/tree-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
@@ -60,6 +60,7 @@ const dataset = [
     ]
   }
 ]
+
 const value = ref('')
 const treeOp = ref({
   data: dataset,
diff --git a/examples/sites/demos/pc/app/popeditor/tree.vue b/examples/sites/demos/pc/app/popeditor/tree.vue
index dc56922e0..414057620 100644
--- a/examples/sites/demos/pc/app/popeditor/tree.vue
+++ b/examples/sites/demos/pc/app/popeditor/tree.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
@@ -64,6 +64,7 @@ export default {
         ]
       }
     ]
+
     return {
       value: '',
       treeOp: {
diff --git a/examples/sites/demos/pc/app/popeditor/trigger-composition-api.vue b/examples/sites/demos/pc/app/popeditor/trigger-composition-api.vue
index 172863d75..0827e1608 100644
--- a/examples/sites/demos/pc/app/popeditor/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/trigger-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/trigger.vue b/examples/sites/demos/pc/app/popeditor/trigger.vue
index a5a619459..a75f41dfa 100644
--- a/examples/sites/demos/pc/app/popeditor/trigger.vue
+++ b/examples/sites/demos/pc/app/popeditor/trigger.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popeditor/width-composition-api.vue b/examples/sites/demos/pc/app/popeditor/width-composition-api.vue
index 99cf4c297..1f0a3a6a4 100644
--- a/examples/sites/demos/pc/app/popeditor/width-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/width-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Popeditor as TinyPopeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 const dataset = [
   {
diff --git a/examples/sites/demos/pc/app/popeditor/width.vue b/examples/sites/demos/pc/app/popeditor/width.vue
index 70b11b490..b6298b912 100644
--- a/examples/sites/demos/pc/app/popeditor/width.vue
+++ b/examples/sites/demos/pc/app/popeditor/width.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Popeditor } from '@opentiny/vue'
+import { TinyPopeditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopeditor: Popeditor
+    TinyPopeditor
   },
   data() {
     const dataset = [
diff --git a/examples/sites/demos/pc/app/popover/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/popover/basic-usage-composition-api.vue
index eec7712ae..d74060be7 100644
--- a/examples/sites/demos/pc/app/popover/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/basic-usage-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup lang="jsx">
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/popover/basic-usage.vue b/examples/sites/demos/pc/app/popover/basic-usage.vue
index 928711d57..bad52b73a 100644
--- a/examples/sites/demos/pc/app/popover/basic-usage.vue
+++ b/examples/sites/demos/pc/app/popover/basic-usage.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/popover/content-composition-api.vue b/examples/sites/demos/pc/app/popover/content-composition-api.vue
index 79c924452..5db5e9e6c 100644
--- a/examples/sites/demos/pc/app/popover/content-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/content-composition-api.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 import { IconRefres } from '@opentiny/vue-icon'
 const tinyIconRefres = IconRefres()
diff --git a/examples/sites/demos/pc/app/popover/content.vue b/examples/sites/demos/pc/app/popover/content.vue
index b635cbc0e..e43cd782e 100644
--- a/examples/sites/demos/pc/app/popover/content.vue
+++ b/examples/sites/demos/pc/app/popover/content.vue
@@ -17,17 +17,18 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 import { IconRefres } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button,
+    TinyPopover,
+    TinyButton,
     TinyIconRefres: IconRefres()
   }
 }
 </script>
+
 <style scoped>
 .container {
   display: flex;
diff --git a/examples/sites/demos/pc/app/popover/custom-popper-composition-api.vue b/examples/sites/demos/pc/app/popover/custom-popper-composition-api.vue
index cf4bec8a7..fee1d818f 100644
--- a/examples/sites/demos/pc/app/popover/custom-popper-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/custom-popper-composition-api.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 </script>
 
 <style>
diff --git a/examples/sites/demos/pc/app/popover/custom-popper.vue b/examples/sites/demos/pc/app/popover/custom-popper.vue
index 489af301a..945274df9 100644
--- a/examples/sites/demos/pc/app/popover/custom-popper.vue
+++ b/examples/sites/demos/pc/app/popover/custom-popper.vue
@@ -35,12 +35,12 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {}
diff --git a/examples/sites/demos/pc/app/popover/delay-composition-api.vue b/examples/sites/demos/pc/app/popover/delay-composition-api.vue
index 13a36e424..d1c6a9f7f 100644
--- a/examples/sites/demos/pc/app/popover/delay-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/delay-composition-api.vue
@@ -29,5 +29,5 @@
 </template>
 
 <script setup lang="jsx">
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/popover/delay.vue b/examples/sites/demos/pc/app/popover/delay.vue
index 623acd663..a76fd3633 100644
--- a/examples/sites/demos/pc/app/popover/delay.vue
+++ b/examples/sites/demos/pc/app/popover/delay.vue
@@ -29,12 +29,12 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/popover/disabled-composition-api.vue b/examples/sites/demos/pc/app/popover/disabled-composition-api.vue
index 1320c0337..4ef77747b 100644
--- a/examples/sites/demos/pc/app/popover/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/disabled-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyPopover, TinyButton, TinySwitch } from '@opentiny/vue'
 
 const disabled = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/popover/disabled.vue b/examples/sites/demos/pc/app/popover/disabled.vue
index cea3c4281..de908b3b1 100644
--- a/examples/sites/demos/pc/app/popover/disabled.vue
+++ b/examples/sites/demos/pc/app/popover/disabled.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button, Switch } from '@opentiny/vue'
+import { TinyPopover, TinyButton, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button,
-    TinySwitch: Switch
+    TinyPopover,
+    TinyButton,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popover/events-composition-api.vue b/examples/sites/demos/pc/app/popover/events-composition-api.vue
index 14ff37a4e..5aef4d017 100644
--- a/examples/sites/demos/pc/app/popover/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/events-composition-api.vue
@@ -16,10 +16,10 @@
 </template>
 
 <script setup lang="jsx">
-import { Popover as TinyPopover, Notify, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyNotify, TinyButton } from '@opentiny/vue'
 
 function enter() {
-  Notify({
+  TinyNotify({
     title: '提示',
     message: '进入的动画结束后触发',
     offset: 100
@@ -27,7 +27,7 @@ function enter() {
 }
 
 function leave() {
-  Notify({
+  TinyNotify({
     title: '提示',
     message: '离开的动画结束后触发',
     offset: 100
@@ -35,7 +35,7 @@ function leave() {
 }
 
 function show() {
-  Notify({
+  TinyNotify({
     title: '提示',
     message: '显示时触发',
     offset: 100
@@ -43,7 +43,7 @@ function show() {
 }
 
 function hide() {
-  Notify({
+  TinyNotify({
     title: '提示',
     message: '隐藏时触发',
     offset: 100
diff --git a/examples/sites/demos/pc/app/popover/events.vue b/examples/sites/demos/pc/app/popover/events.vue
index d6704153d..7cdd336db 100644
--- a/examples/sites/demos/pc/app/popover/events.vue
+++ b/examples/sites/demos/pc/app/popover/events.vue
@@ -16,31 +16,31 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Notify, Button } from '@opentiny/vue'
+import { TinyPopover, TinyNotify, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   methods: {
     show() {
-      Notify({
+      TinyNotify({
         message: '显示时触发'
       })
     },
     hide() {
-      Notify({
+      TinyNotify({
         message: '隐藏时触发'
       })
     },
     enter() {
-      Notify({
+      TinyNotify({
         message: '进入的动画结束后触发'
       })
     },
     leave() {
-      Notify({
+      TinyNotify({
         message: '离开的动画结束后触发'
       })
     }
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue b/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
index 0c25be546..70dda81f4 100644
--- a/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
@@ -46,7 +46,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 const visible1 = ref(false)
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries.vue b/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
index 509978e72..9d18d15b0 100644
--- a/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
@@ -45,12 +45,12 @@
 </template>
 
 <script>
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popover/offset-composition-api.vue b/examples/sites/demos/pc/app/popover/offset-composition-api.vue
index 55a44e684..a2b8f4320 100644
--- a/examples/sites/demos/pc/app/popover/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/offset-composition-api.vue
@@ -38,7 +38,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton, Slider as TinySlider } from '@opentiny/vue'
+import { TinyPopover, TinyButton, TinySlider } from '@opentiny/vue'
 
 const show = ref(true)
 const arrowOffset = ref(true)
diff --git a/examples/sites/demos/pc/app/popover/offset.vue b/examples/sites/demos/pc/app/popover/offset.vue
index 2e7250808..b58bc4fff 100644
--- a/examples/sites/demos/pc/app/popover/offset.vue
+++ b/examples/sites/demos/pc/app/popover/offset.vue
@@ -37,13 +37,13 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button, Slider } from '@opentiny/vue'
+import { TinyPopover, TinyButton, TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button,
-    TinySlider: Slider
+    TinyPopover,
+    TinyButton,
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popover/popper-options-composition-api.vue b/examples/sites/demos/pc/app/popover/popper-options-composition-api.vue
index 3bfb3ee5d..bb49643c5 100644
--- a/examples/sites/demos/pc/app/popover/popper-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/popper-options-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 const popperOption = ref({ bubbling: true })
 </script>
diff --git a/examples/sites/demos/pc/app/popover/popper-options.vue b/examples/sites/demos/pc/app/popover/popper-options.vue
index 5c16cdc4c..53951fbe0 100644
--- a/examples/sites/demos/pc/app/popover/popper-options.vue
+++ b/examples/sites/demos/pc/app/popover/popper-options.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/popover/transition-composition-api.vue b/examples/sites/demos/pc/app/popover/transition-composition-api.vue
index 0338b0f60..d15f25fff 100644
--- a/examples/sites/demos/pc/app/popover/transition-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/transition-composition-api.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/popover/transition.vue b/examples/sites/demos/pc/app/popover/transition.vue
index c2c5a8e93..7ebbdeb87 100644
--- a/examples/sites/demos/pc/app/popover/transition.vue
+++ b/examples/sites/demos/pc/app/popover/transition.vue
@@ -32,12 +32,12 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/popover/trigger-composition-api.vue b/examples/sites/demos/pc/app/popover/trigger-composition-api.vue
index 2e76ce0dd..16159b15d 100644
--- a/examples/sites/demos/pc/app/popover/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/popover/trigger-composition-api.vue
@@ -26,7 +26,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/popover/trigger.vue b/examples/sites/demos/pc/app/popover/trigger.vue
index e93c81009..284caf06c 100644
--- a/examples/sites/demos/pc/app/popover/trigger.vue
+++ b/examples/sites/demos/pc/app/popover/trigger.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script lang="jsx">
-import { Popover, Button } from '@opentiny/vue'
+import { TinyPopover, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPopover: Popover,
-    TinyButton: Button
+    TinyPopover,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue
index 2ad8aad5e..ef7deae35 100644
--- a/examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
 const percentage = ref(45)
diff --git a/examples/sites/demos/pc/app/progress/basic-usage.vue b/examples/sites/demos/pc/app/progress/basic-usage.vue
index 0e4ca84c5..bc4ce96cc 100644
--- a/examples/sites/demos/pc/app/progress/basic-usage.vue
+++ b/examples/sites/demos/pc/app/progress/basic-usage.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue b/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue
index b35cce88a..0095cbdf6 100644
--- a/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/custom-color-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 const value = ref(20)
 const customColor = ref('#5cb300')
diff --git a/examples/sites/demos/pc/app/progress/custom-color.vue b/examples/sites/demos/pc/app/progress/custom-color.vue
index 4463a4e10..b41122527 100644
--- a/examples/sites/demos/pc/app/progress/custom-color.vue
+++ b/examples/sites/demos/pc/app/progress/custom-color.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue b/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
index c8d77f8b6..60e8987f0 100644
--- a/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
@@ -88,7 +88,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Progress as TinyProgress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 import { iconOperationfaildL, iconSuccessful } from '@opentiny/vue-icon'
 
 const TinyIconOperationfaildL = iconOperationfaildL()
diff --git a/examples/sites/demos/pc/app/progress/custom-status.vue b/examples/sites/demos/pc/app/progress/custom-status.vue
index 849b22c7d..578921cb9 100644
--- a/examples/sites/demos/pc/app/progress/custom-status.vue
+++ b/examples/sites/demos/pc/app/progress/custom-status.vue
@@ -87,12 +87,12 @@
 </template>
 
 <script>
-import { Progress } from '@opentiny/vue'
+import { TinyProgress } from '@opentiny/vue'
 import { iconOperationfaildL, iconSuccessful } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyProgress: Progress,
+    TinyProgress,
     TinyIconOperationfaildL: iconOperationfaildL(),
     TinyIconSuccessfull: iconSuccessful()
   },
diff --git a/examples/sites/demos/pc/app/progress/format-text-composition-api.vue b/examples/sites/demos/pc/app/progress/format-text-composition-api.vue
index 20ff38002..74b3b5956 100644
--- a/examples/sites/demos/pc/app/progress/format-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/format-text-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 const percentageText = ref(45)
 const testInside = ref(false)
diff --git a/examples/sites/demos/pc/app/progress/format-text.vue b/examples/sites/demos/pc/app/progress/format-text.vue
index 72856c9c3..ae4ed1e4d 100644
--- a/examples/sites/demos/pc/app/progress/format-text.vue
+++ b/examples/sites/demos/pc/app/progress/format-text.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   methods: {
     formatText() {
diff --git a/examples/sites/demos/pc/app/progress/progress-status-composition-api.vue b/examples/sites/demos/pc/app/progress/progress-status-composition-api.vue
index cfea50a5f..441619470 100644
--- a/examples/sites/demos/pc/app/progress/progress-status-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/progress-status-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 const textInside = ref(false)
 </script>
diff --git a/examples/sites/demos/pc/app/progress/progress-status.vue b/examples/sites/demos/pc/app/progress/progress-status.vue
index 76d886dd2..24d5c7da2 100644
--- a/examples/sites/demos/pc/app/progress/progress-status.vue
+++ b/examples/sites/demos/pc/app/progress/progress-status.vue
@@ -33,12 +33,12 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/progress/progress-type-circle-composition-api.vue b/examples/sites/demos/pc/app/progress/progress-type-circle-composition-api.vue
index 46e4af6e1..8fc364ae9 100644
--- a/examples/sites/demos/pc/app/progress/progress-type-circle-composition-api.vue
+++ b/examples/sites/demos/pc/app/progress/progress-type-circle-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 const percentage = ref(50)
 const customColors = ref([
diff --git a/examples/sites/demos/pc/app/progress/progress-type-circle.vue b/examples/sites/demos/pc/app/progress/progress-type-circle.vue
index 46830d3a7..dcd926133 100644
--- a/examples/sites/demos/pc/app/progress/progress-type-circle.vue
+++ b/examples/sites/demos/pc/app/progress/progress-type-circle.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Progress, Button } from '@opentiny/vue'
+import { TinyProgress, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyProgress: Progress,
-    TinyButton: Button
+    TinyProgress,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/qr-code/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/qr-code/basic-usage-composition-api.vue
index 8d86c17c2..a38da16f1 100644
--- a/examples/sites/demos/pc/app/qr-code/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/qr-code/basic-usage-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { QrCode as TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode } from '@opentiny/vue'
 
 const params = {
   value: '测试二维码数据',
diff --git a/examples/sites/demos/pc/app/qr-code/basic-usage.vue b/examples/sites/demos/pc/app/qr-code/basic-usage.vue
index ee9440476..4a5f7089b 100644
--- a/examples/sites/demos/pc/app/qr-code/basic-usage.vue
+++ b/examples/sites/demos/pc/app/qr-code/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { QrCode } from '@opentiny/vue'
+import { TinyQrCode } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyQrCode: QrCode
+    TinyQrCode
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/qr-code/icon-composition-api.vue b/examples/sites/demos/pc/app/qr-code/icon-composition-api.vue
index 28b2bdc82..6e852e9ce 100644
--- a/examples/sites/demos/pc/app/qr-code/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/qr-code/icon-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { QrCode as TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode } from '@opentiny/vue'
 
 const params = {
   value: '测试二维码数据',
diff --git a/examples/sites/demos/pc/app/qr-code/icon.vue b/examples/sites/demos/pc/app/qr-code/icon.vue
index 812113a78..dd89ccf0c 100644
--- a/examples/sites/demos/pc/app/qr-code/icon.vue
+++ b/examples/sites/demos/pc/app/qr-code/icon.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { QrCode } from '@opentiny/vue'
+import { TinyQrCode } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyQrCode: QrCode
+    TinyQrCode
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/qr-code/level-composition-api.vue b/examples/sites/demos/pc/app/qr-code/level-composition-api.vue
index b059bb83c..ba3d20435 100644
--- a/examples/sites/demos/pc/app/qr-code/level-composition-api.vue
+++ b/examples/sites/demos/pc/app/qr-code/level-composition-api.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { QrCode as TinyQrCode, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
+import { TinyQrCode, TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 import { reactive } from 'vue'
 
 const params = reactive({
diff --git a/examples/sites/demos/pc/app/qr-code/level.vue b/examples/sites/demos/pc/app/qr-code/level.vue
index dfd379cf7..0a7e9874c 100644
--- a/examples/sites/demos/pc/app/qr-code/level.vue
+++ b/examples/sites/demos/pc/app/qr-code/level.vue
@@ -11,14 +11,14 @@
 </template>
 
 <script>
-import { QrCode, Radio, RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyQrCode, TinyRadio, TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyQrCode: QrCode,
-    TinyRadio: Radio,
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyQrCode,
+    TinyRadio,
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/qr-code/style-composition-api.vue b/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
index e757bbe13..c2d7ab4a7 100644
--- a/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
+++ b/examples/sites/demos/pc/app/qr-code/style-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { QrCode as TinyQrCode } from '@opentiny/vue'
+import { TinyQrCode } from '@opentiny/vue'
 
 const params = {
   value: '测试二维码数据',
diff --git a/examples/sites/demos/pc/app/qr-code/style.vue b/examples/sites/demos/pc/app/qr-code/style.vue
index 49eb15f29..4842e5c7b 100644
--- a/examples/sites/demos/pc/app/qr-code/style.vue
+++ b/examples/sites/demos/pc/app/qr-code/style.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { QrCode } from '@opentiny/vue'
+import { TinyQrCode } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyQrCode: QrCode
+    TinyQrCode
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/query-builder/basic-usage.vue b/examples/sites/demos/pc/app/query-builder/basic-usage.vue
index 78ac49d41..076cb5cf3 100644
--- a/examples/sites/demos/pc/app/query-builder/basic-usage.vue
+++ b/examples/sites/demos/pc/app/query-builder/basic-usage.vue
@@ -45,13 +45,13 @@
 </template>
 
 <script>
-import { QueryBuilder, Button } from '@opentiny/vue'
+import { TinyQueryBuilder, TinyButton } from '@opentiny/vue'
 import { random } from '@opentiny/vue-renderless/common/string'
 
 export default {
   components: {
-    TinyQueryBuilder: QueryBuilder,
-    TinyButton: Button
+    TinyQueryBuilder,
+    TinyButton
   },
   data() {
     return {
@@ -118,8 +118,8 @@ export default {
         this.query = action.payload
       } else if (action === 'clearQuery') {
         this.query = {
-          'combinator': 'and',
-          'rules': [
+          combinator: 'and',
+          rules: [
             {
               id: generateID(),
               field: '',
@@ -248,1247 +248,1247 @@ const config = {
   ...defaultOptions,
   combinators: [
     {
-      'name': 'and',
-      'label': '且'
+      name: 'and',
+      label: '且'
     },
     {
-      'name': 'or',
-      'label': '或'
+      name: 'or',
+      label: '或'
     }
   ],
   fields: [
     {
-      'name': 'user',
-      'label': 'User',
-      'placeholder': '请输入',
-      'children': [
+      name: 'user',
+      label: 'User',
+      placeholder: '请输入',
+      children: [
         {
-          'name': 'firstName',
-          'label': 'First Name',
-          'placeholder': '请输入',
+          name: 'firstName',
+          label: 'First Name',
+          placeholder: '请输入',
           validator: (r) => !!r.value
         },
         {
-          'name': 'user.lastName',
-          'label': 'Last Name',
-          'placeholder': 'Enter last name',
-          'defaultOperator': 'beginsWith',
+          name: 'user.lastName',
+          label: 'Last Name',
+          placeholder: 'Enter last name',
+          defaultOperator: 'beginsWith',
           validator: (r) => !!r.value
         }
       ]
     },
     {
-      'name': 'lastName2',
-      'label': 'Last Name2',
-      'placeholder': 'Enter last name',
-      'defaultOperator': 'beginsWith',
+      name: 'lastName2',
+      label: 'Last Name2',
+      placeholder: 'Enter last name',
+      defaultOperator: 'beginsWith',
       validator: (r) => !!r.value
     },
     {
-      'name': 'age',
-      'label': 'Age',
-      'inputType': 'number',
+      name: 'age',
+      label: 'Age',
+      inputType: 'number',
       validator: (r) => !!r.value
     },
     {
-      'name': 'isMusician',
-      'label': 'Is a musician',
-      'valueEditorType': 'checkbox',
-      'operators': [
+      name: 'isMusician',
+      label: 'Is a musician',
+      valueEditorType: 'checkbox',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         }
       ],
-      'defaultValue': false,
+      defaultValue: false,
       validator: (r) => !!r.value
     },
     {
-      'name': 'instrument',
-      'label': 'Primary instrument',
-      'valueEditorType': 'select',
-      'values': [
+      name: 'instrument',
+      label: 'Primary instrument',
+      valueEditorType: 'select',
+      values: [
         {
-          'label': 'Percussion instruments',
-          'options': [
+          label: 'Percussion instruments',
+          options: [
             {
-              'name': 'Clapstick',
-              'label': 'Clapstick'
+              name: 'Clapstick',
+              label: 'Clapstick'
             },
             {
-              'name': 'Cowbell',
-              'label': 'Cowbell'
+              name: 'Cowbell',
+              label: 'Cowbell'
             },
             {
-              'name': 'Cymbal',
-              'label': 'Cymbal'
+              name: 'Cymbal',
+              label: 'Cymbal'
             },
             {
-              'name': 'Gong',
-              'label': 'Gong'
+              name: 'Gong',
+              label: 'Gong'
             },
             {
-              'name': 'Maraca',
-              'label': 'Maraca'
+              name: 'Maraca',
+              label: 'Maraca'
             },
             {
-              'name': 'Marimba',
-              'label': 'Marimba'
+              name: 'Marimba',
+              label: 'Marimba'
             },
             {
-              'name': 'More cowbell',
-              'label': 'More cowbell'
+              name: 'More cowbell',
+              label: 'More cowbell'
             },
             {
-              'name': 'Spoon',
-              'label': 'Spoon'
+              name: 'Spoon',
+              label: 'Spoon'
             },
             {
-              'name': 'Steelpan',
-              'label': 'Steelpan'
+              name: 'Steelpan',
+              label: 'Steelpan'
             },
             {
-              'name': 'Tambourine',
-              'label': 'Tambourine'
+              name: 'Tambourine',
+              label: 'Tambourine'
             },
             {
-              'name': 'Triangle',
-              'label': 'Triangle'
+              name: 'Triangle',
+              label: 'Triangle'
             },
             {
-              'name': 'Vibraphone',
-              'label': 'Vibraphone'
+              name: 'Vibraphone',
+              label: 'Vibraphone'
             },
             {
-              'name': 'Washboard',
-              'label': 'Washboard'
+              name: 'Washboard',
+              label: 'Washboard'
             },
             {
-              'name': 'Wood block',
-              'label': 'Wood block'
+              name: 'Wood block',
+              label: 'Wood block'
             },
             {
-              'name': 'Wooden fish',
-              'label': 'Wooden fish'
+              name: 'Wooden fish',
+              label: 'Wooden fish'
             },
             {
-              'name': 'Xylophone',
-              'label': 'Xylophone'
+              name: 'Xylophone',
+              label: 'Xylophone'
             }
           ]
         },
         {
-          'label': 'Membranophones',
-          'options': [
+          label: 'Membranophones',
+          options: [
             {
-              'name': 'Barrel drum',
-              'label': 'Barrel drum'
+              name: 'Barrel drum',
+              label: 'Barrel drum'
             },
             {
-              'name': 'Bass drum',
-              'label': 'Bass drum'
+              name: 'Bass drum',
+              label: 'Bass drum'
             },
             {
-              'name': 'Bongo drums',
-              'label': 'Bongo drums'
+              name: 'Bongo drums',
+              label: 'Bongo drums'
             },
             {
-              'name': 'Conga',
-              'label': 'Conga'
+              name: 'Conga',
+              label: 'Conga'
             },
             {
-              'name': 'Drum',
-              'label': 'Drum'
+              name: 'Drum',
+              label: 'Drum'
             },
             {
-              'name': 'Drum kit',
-              'label': 'Drum kit'
+              name: 'Drum kit',
+              label: 'Drum kit'
             },
             {
-              'name': "Jew's harp",
-              'label': "Jew's harp"
+              name: "Jew's harp",
+              label: "Jew's harp"
             },
             {
-              'name': 'Octaban',
-              'label': 'Octaban'
+              name: 'Octaban',
+              label: 'Octaban'
             },
             {
-              'name': 'Samphor',
-              'label': 'Samphor'
+              name: 'Samphor',
+              label: 'Samphor'
             },
             {
-              'name': 'Snare drum',
-              'label': 'Snare drum'
+              name: 'Snare drum',
+              label: 'Snare drum'
             },
             {
-              'name': 'Timpani',
-              'label': 'Timpani'
+              name: 'Timpani',
+              label: 'Timpani'
             },
             {
-              'name': 'Tom-tom',
-              'label': 'Tom-tom'
+              name: 'Tom-tom',
+              label: 'Tom-tom'
             }
           ]
         },
         {
-          'label': 'Wind instruments',
-          'options': [
+          label: 'Wind instruments',
+          options: [
             {
-              'name': 'Accordion',
-              'label': 'Accordion'
+              name: 'Accordion',
+              label: 'Accordion'
             },
             {
-              'name': 'Air horn',
-              'label': 'Air horn'
+              name: 'Air horn',
+              label: 'Air horn'
             },
             {
-              'name': 'Bagpipe',
-              'label': 'Bagpipe'
+              name: 'Bagpipe',
+              label: 'Bagpipe'
             },
             {
-              'name': 'Baritone horn',
-              'label': 'Baritone horn'
+              name: 'Baritone horn',
+              label: 'Baritone horn'
             },
             {
-              'name': 'Bassoon',
-              'label': 'Bassoon'
+              name: 'Bassoon',
+              label: 'Bassoon'
             },
             {
-              'name': 'Bazooka',
-              'label': 'Bazooka'
+              name: 'Bazooka',
+              label: 'Bazooka'
             },
             {
-              'name': 'Beatboxing',
-              'label': 'Beatboxing'
+              name: 'Beatboxing',
+              label: 'Beatboxing'
             },
             {
-              'name': 'Blown bottle',
-              'label': 'Blown bottle'
+              name: 'Blown bottle',
+              label: 'Blown bottle'
             },
             {
-              'name': 'Bugle',
-              'label': 'Bugle'
+              name: 'Bugle',
+              label: 'Bugle'
             },
             {
-              'name': 'Clarinet',
-              'label': 'Clarinet'
+              name: 'Clarinet',
+              label: 'Clarinet'
             },
             {
-              'name': 'Conch',
-              'label': 'Conch'
+              name: 'Conch',
+              label: 'Conch'
             },
             {
-              'name': 'Cornet',
-              'label': 'Cornet'
+              name: 'Cornet',
+              label: 'Cornet'
             },
             {
-              'name': 'Didgeridoo',
-              'label': 'Didgeridoo'
+              name: 'Didgeridoo',
+              label: 'Didgeridoo'
             },
             {
-              'name': 'Double bell euphonium',
-              'label': 'Double bell euphonium'
+              name: 'Double bell euphonium',
+              label: 'Double bell euphonium'
             },
             {
-              'name': 'Doulophone',
-              'label': 'Doulophone'
+              name: 'Doulophone',
+              label: 'Doulophone'
             },
             {
-              'name': 'English horn',
-              'label': 'English horn'
+              name: 'English horn',
+              label: 'English horn'
             },
             {
-              'name': 'Euphonium',
-              'label': 'Euphonium'
+              name: 'Euphonium',
+              label: 'Euphonium'
             },
             {
-              'name': 'Flugelhorn',
-              'label': 'Flugelhorn'
+              name: 'Flugelhorn',
+              label: 'Flugelhorn'
             },
             {
-              'name': 'Flute',
-              'label': 'Flute'
+              name: 'Flute',
+              label: 'Flute'
             },
             {
-              'name': 'French horn',
-              'label': 'French horn'
+              name: 'French horn',
+              label: 'French horn'
             },
             {
-              'name': 'Harmonica',
-              'label': 'Harmonica'
+              name: 'Harmonica',
+              label: 'Harmonica'
             },
             {
-              'name': 'Irish flute',
-              'label': 'Irish flute'
+              name: 'Irish flute',
+              label: 'Irish flute'
             },
             {
-              'name': 'Jug',
-              'label': 'Jug'
+              name: 'Jug',
+              label: 'Jug'
             },
             {
-              'name': 'Kazoo',
-              'label': 'Kazoo'
+              name: 'Kazoo',
+              label: 'Kazoo'
             },
             {
-              'name': 'Melodeon',
-              'label': 'Melodeon'
+              name: 'Melodeon',
+              label: 'Melodeon'
             },
             {
-              'name': 'Mezzo-soprano',
-              'label': 'Mezzo-soprano'
+              name: 'Mezzo-soprano',
+              label: 'Mezzo-soprano'
             },
             {
-              'name': 'Oboe',
-              'label': 'Oboe'
+              name: 'Oboe',
+              label: 'Oboe'
             },
             {
-              'name': 'Ocarina',
-              'label': 'Ocarina'
+              name: 'Ocarina',
+              label: 'Ocarina'
             },
             {
-              'name': 'Pan flute',
-              'label': 'Pan flute'
+              name: 'Pan flute',
+              label: 'Pan flute'
             },
             {
-              'name': 'Piccolo',
-              'label': 'Piccolo'
+              name: 'Piccolo',
+              label: 'Piccolo'
             },
             {
-              'name': 'Pipe organ',
-              'label': 'Pipe organ'
+              name: 'Pipe organ',
+              label: 'Pipe organ'
             },
             {
-              'name': 'Recorder',
-              'label': 'Recorder'
+              name: 'Recorder',
+              label: 'Recorder'
             },
             {
-              'name': 'Saxophone',
-              'label': 'Saxophone'
+              name: 'Saxophone',
+              label: 'Saxophone'
             },
             {
-              'name': 'Slide whistle',
-              'label': 'Slide whistle'
+              name: 'Slide whistle',
+              label: 'Slide whistle'
             },
             {
-              'name': 'Sousaphone',
-              'label': 'Sousaphone'
+              name: 'Sousaphone',
+              label: 'Sousaphone'
             },
             {
-              'name': 'Trombone',
-              'label': 'Trombone'
+              name: 'Trombone',
+              label: 'Trombone'
             },
             {
-              'name': 'Trumpet',
-              'label': 'Trumpet'
+              name: 'Trumpet',
+              label: 'Trumpet'
             },
             {
-              'name': 'Tuba',
-              'label': 'Tuba'
+              name: 'Tuba',
+              label: 'Tuba'
             },
             {
-              'name': 'Whistle',
-              'label': 'Whistle'
+              name: 'Whistle',
+              label: 'Whistle'
             }
           ]
         },
         {
-          'label': 'Stringed instruments',
-          'options': [
+          label: 'Stringed instruments',
+          options: [
             {
-              'name': 'Aeolian harp',
-              'label': 'Aeolian harp'
+              name: 'Aeolian harp',
+              label: 'Aeolian harp'
             },
             {
-              'name': 'Bandolin',
-              'label': 'Bandolin'
+              name: 'Bandolin',
+              label: 'Bandolin'
             },
             {
-              'name': 'Banjo ukulele',
-              'label': 'Banjo ukulele'
+              name: 'Banjo ukulele',
+              label: 'Banjo ukulele'
             },
             {
-              'name': 'Cello',
-              'label': 'Cello'
+              name: 'Cello',
+              label: 'Cello'
             },
             {
-              'name': 'Chapman stick',
-              'label': 'Chapman stick'
+              name: 'Chapman stick',
+              label: 'Chapman stick'
             },
             {
-              'name': 'Clavichord',
-              'label': 'Clavichord'
+              name: 'Clavichord',
+              label: 'Clavichord'
             },
             {
-              'name': 'Clavinet',
-              'label': 'Clavinet'
+              name: 'Clavinet',
+              label: 'Clavinet'
             },
             {
-              'name': 'Double bass',
-              'label': 'Double bass'
+              name: 'Double bass',
+              label: 'Double bass'
             },
             {
-              'name': 'Dulcimer',
-              'label': 'Dulcimer'
+              name: 'Dulcimer',
+              label: 'Dulcimer'
             },
             {
-              'name': 'Fiddle',
-              'label': 'Fiddle'
+              name: 'Fiddle',
+              label: 'Fiddle'
             },
             {
-              'name': 'Guitar',
-              'label': 'Guitar'
+              name: 'Guitar',
+              label: 'Guitar'
             },
             {
-              'name': 'Hammered dulcimer',
-              'label': 'Hammered dulcimer'
+              name: 'Hammered dulcimer',
+              label: 'Hammered dulcimer'
             },
             {
-              'name': 'Harp',
-              'label': 'Harp'
+              name: 'Harp',
+              label: 'Harp'
             },
             {
-              'name': 'Harpsichord',
-              'label': 'Harpsichord'
+              name: 'Harpsichord',
+              label: 'Harpsichord'
             },
             {
-              'name': 'Lute',
-              'label': 'Lute'
+              name: 'Lute',
+              label: 'Lute'
             },
             {
-              'name': 'Lyre',
-              'label': 'Lyre'
+              name: 'Lyre',
+              label: 'Lyre'
             },
             {
-              'name': 'Maguhu',
-              'label': 'Maguhu'
+              name: 'Maguhu',
+              label: 'Maguhu'
             },
             {
-              'name': 'Mandola',
-              'label': 'Mandola'
+              name: 'Mandola',
+              label: 'Mandola'
             },
             {
-              'name': 'Mandolin',
-              'label': 'Mandolin'
+              name: 'Mandolin',
+              label: 'Mandolin'
             },
             {
-              'name': 'Octobass',
-              'label': 'Octobass'
+              name: 'Octobass',
+              label: 'Octobass'
             },
             {
-              'name': 'Piano',
-              'label': 'Piano'
+              name: 'Piano',
+              label: 'Piano'
             },
             {
-              'name': 'Sitar',
-              'label': 'Sitar'
+              name: 'Sitar',
+              label: 'Sitar'
             },
             {
-              'name': 'Ukulele',
-              'label': 'Ukulele'
+              name: 'Ukulele',
+              label: 'Ukulele'
             },
             {
-              'name': 'Viol',
-              'label': 'Viol'
+              name: 'Viol',
+              label: 'Viol'
             },
             {
-              'name': 'Violin',
-              'label': 'Violin'
+              name: 'Violin',
+              label: 'Violin'
             },
             {
-              'name': 'Washtub bass',
-              'label': 'Washtub bass'
+              name: 'Washtub bass',
+              label: 'Washtub bass'
             }
           ]
         },
         {
-          'label': 'Electronic instruments',
-          'options': [
+          label: 'Electronic instruments',
+          options: [
             {
-              'name': 'AlphaSphere',
-              'label': 'AlphaSphere'
+              name: 'AlphaSphere',
+              label: 'AlphaSphere'
             },
             {
-              'name': 'Audiocubes',
-              'label': 'Audiocubes'
+              name: 'Audiocubes',
+              label: 'Audiocubes'
             },
             {
-              'name': 'Bass pedals',
-              'label': 'Bass pedals'
+              name: 'Bass pedals',
+              label: 'Bass pedals'
             },
             {
-              'name': 'Continuum Fingerboard',
-              'label': 'Continuum Fingerboard'
+              name: 'Continuum Fingerboard',
+              label: 'Continuum Fingerboard'
             },
             {
-              'name': 'Croix Sonore',
-              'label': 'Croix Sonore'
+              name: 'Croix Sonore',
+              label: 'Croix Sonore'
             },
             {
-              'name': "Denis d'or",
-              'label': "Denis d'or"
+              name: "Denis d'or",
+              label: "Denis d'or"
             },
             {
-              'name': 'Dubreq stylophone',
-              'label': 'Dubreq stylophone'
+              name: 'Dubreq stylophone',
+              label: 'Dubreq stylophone'
             },
             {
-              'name': 'Drum machine',
-              'label': 'Drum machine'
+              name: 'Drum machine',
+              label: 'Drum machine'
             },
             {
-              'name': 'Eigenharp',
-              'label': 'Eigenharp'
+              name: 'Eigenharp',
+              label: 'Eigenharp'
             },
             {
-              'name': 'Electric guitar',
-              'label': 'Electric guitar'
+              name: 'Electric guitar',
+              label: 'Electric guitar'
             },
             {
-              'name': 'Electronic keyboard',
-              'label': 'Electronic keyboard'
+              name: 'Electronic keyboard',
+              label: 'Electronic keyboard'
             },
             {
-              'name': 'Electronic organ',
-              'label': 'Electronic organ'
+              name: 'Electronic organ',
+              label: 'Electronic organ'
             },
             {
-              'name': 'EWI',
-              'label': 'EWI'
+              name: 'EWI',
+              label: 'EWI'
             },
             {
-              'name': 'Fingerboard synthesizer',
-              'label': 'Fingerboard synthesizer'
+              name: 'Fingerboard synthesizer',
+              label: 'Fingerboard synthesizer'
             },
             {
-              'name': 'Hammond organ',
-              'label': 'Hammond organ'
+              name: 'Hammond organ',
+              label: 'Hammond organ'
             },
             {
-              'name': 'Keyboard',
-              'label': 'Keyboard'
+              name: 'Keyboard',
+              label: 'Keyboard'
             },
             {
-              'name': 'Keytar',
-              'label': 'Keytar'
+              name: 'Keytar',
+              label: 'Keytar'
             },
             {
-              'name': 'Kraakdoos',
-              'label': 'Kraakdoos'
+              name: 'Kraakdoos',
+              label: 'Kraakdoos'
             },
             {
-              'name': 'Laser harp',
-              'label': 'Laser harp'
+              name: 'Laser harp',
+              label: 'Laser harp'
             },
             {
-              'name': 'Mellotron',
-              'label': 'Mellotron'
+              name: 'Mellotron',
+              label: 'Mellotron'
             },
             {
-              'name': 'MIDI keyboard',
-              'label': 'MIDI keyboard'
+              name: 'MIDI keyboard',
+              label: 'MIDI keyboard'
             },
             {
-              'name': 'Omnichord',
-              'label': 'Omnichord'
+              name: 'Omnichord',
+              label: 'Omnichord'
             },
             {
-              'name': 'Ondes Martenot',
-              'label': 'Ondes Martenot'
+              name: 'Ondes Martenot',
+              label: 'Ondes Martenot'
             },
             {
-              'name': 'Otamatone',
-              'label': 'Otamatone'
+              name: 'Otamatone',
+              label: 'Otamatone'
             },
             {
-              'name': 'Sampler',
-              'label': 'Sampler'
+              name: 'Sampler',
+              label: 'Sampler'
             },
             {
-              'name': 'Seaboard music instrument',
-              'label': 'Seaboard music instrument'
+              name: 'Seaboard music instrument',
+              label: 'Seaboard music instrument'
             },
             {
-              'name': 'Skoog',
-              'label': 'Skoog'
+              name: 'Skoog',
+              label: 'Skoog'
             },
             {
-              'name': 'Synclavier',
-              'label': 'Synclavier'
+              name: 'Synclavier',
+              label: 'Synclavier'
             },
             {
-              'name': 'Synthesizer',
-              'label': 'Synthesizer'
+              name: 'Synthesizer',
+              label: 'Synthesizer'
             },
             {
-              'name': 'Teleharmonium',
-              'label': 'Teleharmonium'
+              name: 'Teleharmonium',
+              label: 'Teleharmonium'
             },
             {
-              'name': 'Tenori-on',
-              'label': 'Tenori-on'
+              name: 'Tenori-on',
+              label: 'Tenori-on'
             },
             {
-              'name': 'Theremin',
-              'label': 'Theremin'
+              name: 'Theremin',
+              label: 'Theremin'
             },
             {
-              'name': 'trautonium',
-              'label': 'trautonium'
+              name: 'trautonium',
+              label: 'trautonium'
             },
             {
-              'name': 'Turntablism',
-              'label': 'Turntablism'
+              name: 'Turntablism',
+              label: 'Turntablism'
             },
             {
-              'name': 'Turntable',
-              'label': 'Turntable'
+              name: 'Turntable',
+              label: 'Turntable'
             }
           ]
         }
       ],
-      'defaultValue': 'Cowbell',
-      'operators': [
+      defaultValue: 'Cowbell',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         },
         {
-          'name': 'in',
-          'label': 'in'
+          name: 'in',
+          label: 'in'
         }
       ]
     },
     {
-      'name': 'alsoPlays',
-      'label': 'Also plays',
-      'valueEditorType': 'multiselect',
-      'values': [
+      name: 'alsoPlays',
+      label: 'Also plays',
+      valueEditorType: 'multiselect',
+      values: [
         {
-          'label': 'Percussion instruments',
-          'options': [
+          label: 'Percussion instruments',
+          options: [
             {
-              'name': 'Clapstick',
-              'label': 'Clapstick'
+              name: 'Clapstick',
+              label: 'Clapstick'
             },
             {
-              'name': 'Cowbell',
-              'label': 'Cowbell'
+              name: 'Cowbell',
+              label: 'Cowbell'
             },
             {
-              'name': 'Cymbal',
-              'label': 'Cymbal'
+              name: 'Cymbal',
+              label: 'Cymbal'
             },
             {
-              'name': 'Gong',
-              'label': 'Gong'
+              name: 'Gong',
+              label: 'Gong'
             },
             {
-              'name': 'Maraca',
-              'label': 'Maraca'
+              name: 'Maraca',
+              label: 'Maraca'
             },
             {
-              'name': 'Marimba',
-              'label': 'Marimba'
+              name: 'Marimba',
+              label: 'Marimba'
             },
             {
-              'name': 'More cowbell',
-              'label': 'More cowbell'
+              name: 'More cowbell',
+              label: 'More cowbell'
             },
             {
-              'name': 'Spoon',
-              'label': 'Spoon'
+              name: 'Spoon',
+              label: 'Spoon'
             },
             {
-              'name': 'Steelpan',
-              'label': 'Steelpan'
+              name: 'Steelpan',
+              label: 'Steelpan'
             },
             {
-              'name': 'Tambourine',
-              'label': 'Tambourine'
+              name: 'Tambourine',
+              label: 'Tambourine'
             },
             {
-              'name': 'Triangle',
-              'label': 'Triangle'
+              name: 'Triangle',
+              label: 'Triangle'
             },
             {
-              'name': 'Vibraphone',
-              'label': 'Vibraphone'
+              name: 'Vibraphone',
+              label: 'Vibraphone'
             },
             {
-              'name': 'Washboard',
-              'label': 'Washboard'
+              name: 'Washboard',
+              label: 'Washboard'
             },
             {
-              'name': 'Wood block',
-              'label': 'Wood block'
+              name: 'Wood block',
+              label: 'Wood block'
             },
             {
-              'name': 'Wooden fish',
-              'label': 'Wooden fish'
+              name: 'Wooden fish',
+              label: 'Wooden fish'
             },
             {
-              'name': 'Xylophone',
-              'label': 'Xylophone'
+              name: 'Xylophone',
+              label: 'Xylophone'
             }
           ]
         },
         {
-          'label': 'Membranophones',
-          'options': [
+          label: 'Membranophones',
+          options: [
             {
-              'name': 'Barrel drum',
-              'label': 'Barrel drum'
+              name: 'Barrel drum',
+              label: 'Barrel drum'
             },
             {
-              'name': 'Bass drum',
-              'label': 'Bass drum'
+              name: 'Bass drum',
+              label: 'Bass drum'
             },
             {
-              'name': 'Bongo drums',
-              'label': 'Bongo drums'
+              name: 'Bongo drums',
+              label: 'Bongo drums'
             },
             {
-              'name': 'Conga',
-              'label': 'Conga'
+              name: 'Conga',
+              label: 'Conga'
             },
             {
-              'name': 'Drum',
-              'label': 'Drum'
+              name: 'Drum',
+              label: 'Drum'
             },
             {
-              'name': 'Drum kit',
-              'label': 'Drum kit'
+              name: 'Drum kit',
+              label: 'Drum kit'
             },
             {
-              'name': "Jew's harp",
-              'label': "Jew's harp"
+              name: "Jew's harp",
+              label: "Jew's harp"
             },
             {
-              'name': 'Octaban',
-              'label': 'Octaban'
+              name: 'Octaban',
+              label: 'Octaban'
             },
             {
-              'name': 'Samphor',
-              'label': 'Samphor'
+              name: 'Samphor',
+              label: 'Samphor'
             },
             {
-              'name': 'Snare drum',
-              'label': 'Snare drum'
+              name: 'Snare drum',
+              label: 'Snare drum'
             },
             {
-              'name': 'Timpani',
-              'label': 'Timpani'
+              name: 'Timpani',
+              label: 'Timpani'
             },
             {
-              'name': 'Tom-tom',
-              'label': 'Tom-tom'
+              name: 'Tom-tom',
+              label: 'Tom-tom'
             }
           ]
         },
         {
-          'label': 'Wind instruments',
-          'options': [
+          label: 'Wind instruments',
+          options: [
             {
-              'name': 'Accordion',
-              'label': 'Accordion'
+              name: 'Accordion',
+              label: 'Accordion'
             },
             {
-              'name': 'Air horn',
-              'label': 'Air horn'
+              name: 'Air horn',
+              label: 'Air horn'
             },
             {
-              'name': 'Bagpipe',
-              'label': 'Bagpipe'
+              name: 'Bagpipe',
+              label: 'Bagpipe'
             },
             {
-              'name': 'Baritone horn',
-              'label': 'Baritone horn'
+              name: 'Baritone horn',
+              label: 'Baritone horn'
             },
             {
-              'name': 'Bassoon',
-              'label': 'Bassoon'
+              name: 'Bassoon',
+              label: 'Bassoon'
             },
             {
-              'name': 'Bazooka',
-              'label': 'Bazooka'
+              name: 'Bazooka',
+              label: 'Bazooka'
             },
             {
-              'name': 'Beatboxing',
-              'label': 'Beatboxing'
+              name: 'Beatboxing',
+              label: 'Beatboxing'
             },
             {
-              'name': 'Blown bottle',
-              'label': 'Blown bottle'
+              name: 'Blown bottle',
+              label: 'Blown bottle'
             },
             {
-              'name': 'Bugle',
-              'label': 'Bugle'
+              name: 'Bugle',
+              label: 'Bugle'
             },
             {
-              'name': 'Clarinet',
-              'label': 'Clarinet'
+              name: 'Clarinet',
+              label: 'Clarinet'
             },
             {
-              'name': 'Conch',
-              'label': 'Conch'
+              name: 'Conch',
+              label: 'Conch'
             },
             {
-              'name': 'Cornet',
-              'label': 'Cornet'
+              name: 'Cornet',
+              label: 'Cornet'
             },
             {
-              'name': 'Didgeridoo',
-              'label': 'Didgeridoo'
+              name: 'Didgeridoo',
+              label: 'Didgeridoo'
             },
             {
-              'name': 'Double bell euphonium',
-              'label': 'Double bell euphonium'
+              name: 'Double bell euphonium',
+              label: 'Double bell euphonium'
             },
             {
-              'name': 'Doulophone',
-              'label': 'Doulophone'
+              name: 'Doulophone',
+              label: 'Doulophone'
             },
             {
-              'name': 'English horn',
-              'label': 'English horn'
+              name: 'English horn',
+              label: 'English horn'
             },
             {
-              'name': 'Euphonium',
-              'label': 'Euphonium'
+              name: 'Euphonium',
+              label: 'Euphonium'
             },
             {
-              'name': 'Flugelhorn',
-              'label': 'Flugelhorn'
+              name: 'Flugelhorn',
+              label: 'Flugelhorn'
             },
             {
-              'name': 'Flute',
-              'label': 'Flute'
+              name: 'Flute',
+              label: 'Flute'
             },
             {
-              'name': 'French horn',
-              'label': 'French horn'
+              name: 'French horn',
+              label: 'French horn'
             },
             {
-              'name': 'Harmonica',
-              'label': 'Harmonica'
+              name: 'Harmonica',
+              label: 'Harmonica'
             },
             {
-              'name': 'Irish flute',
-              'label': 'Irish flute'
+              name: 'Irish flute',
+              label: 'Irish flute'
             },
             {
-              'name': 'Jug',
-              'label': 'Jug'
+              name: 'Jug',
+              label: 'Jug'
             },
             {
-              'name': 'Kazoo',
-              'label': 'Kazoo'
+              name: 'Kazoo',
+              label: 'Kazoo'
             },
             {
-              'name': 'Melodeon',
-              'label': 'Melodeon'
+              name: 'Melodeon',
+              label: 'Melodeon'
             },
             {
-              'name': 'Mezzo-soprano',
-              'label': 'Mezzo-soprano'
+              name: 'Mezzo-soprano',
+              label: 'Mezzo-soprano'
             },
             {
-              'name': 'Oboe',
-              'label': 'Oboe'
+              name: 'Oboe',
+              label: 'Oboe'
             },
             {
-              'name': 'Ocarina',
-              'label': 'Ocarina'
+              name: 'Ocarina',
+              label: 'Ocarina'
             },
             {
-              'name': 'Pan flute',
-              'label': 'Pan flute'
+              name: 'Pan flute',
+              label: 'Pan flute'
             },
             {
-              'name': 'Piccolo',
-              'label': 'Piccolo'
+              name: 'Piccolo',
+              label: 'Piccolo'
             },
             {
-              'name': 'Pipe organ',
-              'label': 'Pipe organ'
+              name: 'Pipe organ',
+              label: 'Pipe organ'
             },
             {
-              'name': 'Recorder',
-              'label': 'Recorder'
+              name: 'Recorder',
+              label: 'Recorder'
             },
             {
-              'name': 'Saxophone',
-              'label': 'Saxophone'
+              name: 'Saxophone',
+              label: 'Saxophone'
             },
             {
-              'name': 'Slide whistle',
-              'label': 'Slide whistle'
+              name: 'Slide whistle',
+              label: 'Slide whistle'
             },
             {
-              'name': 'Sousaphone',
-              'label': 'Sousaphone'
+              name: 'Sousaphone',
+              label: 'Sousaphone'
             },
             {
-              'name': 'Trombone',
-              'label': 'Trombone'
+              name: 'Trombone',
+              label: 'Trombone'
             },
             {
-              'name': 'Trumpet',
-              'label': 'Trumpet'
+              name: 'Trumpet',
+              label: 'Trumpet'
             },
             {
-              'name': 'Tuba',
-              'label': 'Tuba'
+              name: 'Tuba',
+              label: 'Tuba'
             },
             {
-              'name': 'Whistle',
-              'label': 'Whistle'
+              name: 'Whistle',
+              label: 'Whistle'
             }
           ]
         },
         {
-          'label': 'Stringed instruments',
-          'options': [
+          label: 'Stringed instruments',
+          options: [
             {
-              'name': 'Aeolian harp',
-              'label': 'Aeolian harp'
+              name: 'Aeolian harp',
+              label: 'Aeolian harp'
             },
             {
-              'name': 'Bandolin',
-              'label': 'Bandolin'
+              name: 'Bandolin',
+              label: 'Bandolin'
             },
             {
-              'name': 'Banjo ukulele',
-              'label': 'Banjo ukulele'
+              name: 'Banjo ukulele',
+              label: 'Banjo ukulele'
             },
             {
-              'name': 'Cello',
-              'label': 'Cello'
+              name: 'Cello',
+              label: 'Cello'
             },
             {
-              'name': 'Chapman stick',
-              'label': 'Chapman stick'
+              name: 'Chapman stick',
+              label: 'Chapman stick'
             },
             {
-              'name': 'Clavichord',
-              'label': 'Clavichord'
+              name: 'Clavichord',
+              label: 'Clavichord'
             },
             {
-              'name': 'Clavinet',
-              'label': 'Clavinet'
+              name: 'Clavinet',
+              label: 'Clavinet'
             },
             {
-              'name': 'Double bass',
-              'label': 'Double bass'
+              name: 'Double bass',
+              label: 'Double bass'
             },
             {
-              'name': 'Dulcimer',
-              'label': 'Dulcimer'
+              name: 'Dulcimer',
+              label: 'Dulcimer'
             },
             {
-              'name': 'Fiddle',
-              'label': 'Fiddle'
+              name: 'Fiddle',
+              label: 'Fiddle'
             },
             {
-              'name': 'Guitar',
-              'label': 'Guitar'
+              name: 'Guitar',
+              label: 'Guitar'
             },
             {
-              'name': 'Hammered dulcimer',
-              'label': 'Hammered dulcimer'
+              name: 'Hammered dulcimer',
+              label: 'Hammered dulcimer'
             },
             {
-              'name': 'Harp',
-              'label': 'Harp'
+              name: 'Harp',
+              label: 'Harp'
             },
             {
-              'name': 'Harpsichord',
-              'label': 'Harpsichord'
+              name: 'Harpsichord',
+              label: 'Harpsichord'
             },
             {
-              'name': 'Lute',
-              'label': 'Lute'
+              name: 'Lute',
+              label: 'Lute'
             },
             {
-              'name': 'Lyre',
-              'label': 'Lyre'
+              name: 'Lyre',
+              label: 'Lyre'
             },
             {
-              'name': 'Maguhu',
-              'label': 'Maguhu'
+              name: 'Maguhu',
+              label: 'Maguhu'
             },
             {
-              'name': 'Mandola',
-              'label': 'Mandola'
+              name: 'Mandola',
+              label: 'Mandola'
             },
             {
-              'name': 'Mandolin',
-              'label': 'Mandolin'
+              name: 'Mandolin',
+              label: 'Mandolin'
             },
             {
-              'name': 'Octobass',
-              'label': 'Octobass'
+              name: 'Octobass',
+              label: 'Octobass'
             },
             {
-              'name': 'Piano',
-              'label': 'Piano'
+              name: 'Piano',
+              label: 'Piano'
             },
             {
-              'name': 'Sitar',
-              'label': 'Sitar'
+              name: 'Sitar',
+              label: 'Sitar'
             },
             {
-              'name': 'Ukulele',
-              'label': 'Ukulele'
+              name: 'Ukulele',
+              label: 'Ukulele'
             },
             {
-              'name': 'Viol',
-              'label': 'Viol'
+              name: 'Viol',
+              label: 'Viol'
             },
             {
-              'name': 'Violin',
-              'label': 'Violin'
+              name: 'Violin',
+              label: 'Violin'
             },
             {
-              'name': 'Washtub bass',
-              'label': 'Washtub bass'
+              name: 'Washtub bass',
+              label: 'Washtub bass'
             }
           ]
         },
         {
-          'label': 'Electronic instruments',
-          'options': [
+          label: 'Electronic instruments',
+          options: [
             {
-              'name': 'AlphaSphere',
-              'label': 'AlphaSphere'
+              name: 'AlphaSphere',
+              label: 'AlphaSphere'
             },
             {
-              'name': 'Audiocubes',
-              'label': 'Audiocubes'
+              name: 'Audiocubes',
+              label: 'Audiocubes'
             },
             {
-              'name': 'Bass pedals',
-              'label': 'Bass pedals'
+              name: 'Bass pedals',
+              label: 'Bass pedals'
             },
             {
-              'name': 'Continuum Fingerboard',
-              'label': 'Continuum Fingerboard'
+              name: 'Continuum Fingerboard',
+              label: 'Continuum Fingerboard'
             },
             {
-              'name': 'Croix Sonore',
-              'label': 'Croix Sonore'
+              name: 'Croix Sonore',
+              label: 'Croix Sonore'
             },
             {
-              'name': "Denis d'or",
-              'label': "Denis d'or"
+              name: "Denis d'or",
+              label: "Denis d'or"
             },
             {
-              'name': 'Dubreq stylophone',
-              'label': 'Dubreq stylophone'
+              name: 'Dubreq stylophone',
+              label: 'Dubreq stylophone'
             },
             {
-              'name': 'Drum machine',
-              'label': 'Drum machine'
+              name: 'Drum machine',
+              label: 'Drum machine'
             },
             {
-              'name': 'Eigenharp',
-              'label': 'Eigenharp'
+              name: 'Eigenharp',
+              label: 'Eigenharp'
             },
             {
-              'name': 'Electric guitar',
-              'label': 'Electric guitar'
+              name: 'Electric guitar',
+              label: 'Electric guitar'
             },
             {
-              'name': 'Electronic keyboard',
-              'label': 'Electronic keyboard'
+              name: 'Electronic keyboard',
+              label: 'Electronic keyboard'
             },
             {
-              'name': 'Electronic organ',
-              'label': 'Electronic organ'
+              name: 'Electronic organ',
+              label: 'Electronic organ'
             },
             {
-              'name': 'EWI',
-              'label': 'EWI'
+              name: 'EWI',
+              label: 'EWI'
             },
             {
-              'name': 'Fingerboard synthesizer',
-              'label': 'Fingerboard synthesizer'
+              name: 'Fingerboard synthesizer',
+              label: 'Fingerboard synthesizer'
             },
             {
-              'name': 'Hammond organ',
-              'label': 'Hammond organ'
+              name: 'Hammond organ',
+              label: 'Hammond organ'
             },
             {
-              'name': 'Keyboard',
-              'label': 'Keyboard'
+              name: 'Keyboard',
+              label: 'Keyboard'
             },
             {
-              'name': 'Keytar',
-              'label': 'Keytar'
+              name: 'Keytar',
+              label: 'Keytar'
             },
             {
-              'name': 'Kraakdoos',
-              'label': 'Kraakdoos'
+              name: 'Kraakdoos',
+              label: 'Kraakdoos'
             },
             {
-              'name': 'Laser harp',
-              'label': 'Laser harp'
+              name: 'Laser harp',
+              label: 'Laser harp'
             },
             {
-              'name': 'Mellotron',
-              'label': 'Mellotron'
+              name: 'Mellotron',
+              label: 'Mellotron'
             },
             {
-              'name': 'MIDI keyboard',
-              'label': 'MIDI keyboard'
+              name: 'MIDI keyboard',
+              label: 'MIDI keyboard'
             },
             {
-              'name': 'Omnichord',
-              'label': 'Omnichord'
+              name: 'Omnichord',
+              label: 'Omnichord'
             },
             {
-              'name': 'Ondes Martenot',
-              'label': 'Ondes Martenot'
+              name: 'Ondes Martenot',
+              label: 'Ondes Martenot'
             },
             {
-              'name': 'Otamatone',
-              'label': 'Otamatone'
+              name: 'Otamatone',
+              label: 'Otamatone'
             },
             {
-              'name': 'Sampler',
-              'label': 'Sampler'
+              name: 'Sampler',
+              label: 'Sampler'
             },
             {
-              'name': 'Seaboard music instrument',
-              'label': 'Seaboard music instrument'
+              name: 'Seaboard music instrument',
+              label: 'Seaboard music instrument'
             },
             {
-              'name': 'Skoog',
-              'label': 'Skoog'
+              name: 'Skoog',
+              label: 'Skoog'
             },
             {
-              'name': 'Synclavier',
-              'label': 'Synclavier'
+              name: 'Synclavier',
+              label: 'Synclavier'
             },
             {
-              'name': 'Synthesizer',
-              'label': 'Synthesizer'
+              name: 'Synthesizer',
+              label: 'Synthesizer'
             },
             {
-              'name': 'Teleharmonium',
-              'label': 'Teleharmonium'
+              name: 'Teleharmonium',
+              label: 'Teleharmonium'
             },
             {
-              'name': 'Tenori-on',
-              'label': 'Tenori-on'
+              name: 'Tenori-on',
+              label: 'Tenori-on'
             },
             {
-              'name': 'Theremin',
-              'label': 'Theremin'
+              name: 'Theremin',
+              label: 'Theremin'
             },
             {
-              'name': 'trautonium',
-              'label': 'trautonium'
+              name: 'trautonium',
+              label: 'trautonium'
             },
             {
-              'name': 'Turntablism',
-              'label': 'Turntablism'
+              name: 'Turntablism',
+              label: 'Turntablism'
             },
             {
-              'name': 'Turntable',
-              'label': 'Turntable'
+              name: 'Turntable',
+              label: 'Turntable'
             }
           ]
         }
       ],
-      'defaultValue': 'More cowbell',
-      'operators': [
+      defaultValue: 'More cowbell',
+      operators: [
         {
-          'name': 'in',
-          'label': 'in'
+          name: 'in',
+          label: 'in'
         }
       ]
     },
     {
-      'name': 'gender',
-      'label': 'Gender',
-      'operators': [
+      name: 'gender',
+      label: 'Gender',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         }
       ],
-      'valueEditorType': 'radio',
-      'values': [
+      valueEditorType: 'radio',
+      values: [
         {
-          'name': 'M',
-          'label': 'Male'
+          name: 'M',
+          label: 'Male'
         },
         {
-          'name': 'F',
-          'label': 'Female'
+          name: 'F',
+          label: 'Female'
         },
         {
-          'name': 'O',
-          'label': 'Other'
+          name: 'O',
+          label: 'Other'
         }
       ]
     },
     {
-      'name': 'height',
-      'label': 'Height'
+      name: 'height',
+      label: 'Height'
     },
     {
-      'name': 'job',
-      'label': 'Job'
+      name: 'job',
+      label: 'Job'
     },
     {
-      'name': 'description',
-      'label': 'Description',
-      'valueEditorType': 'textarea'
+      name: 'description',
+      label: 'Description',
+      valueEditorType: 'textarea'
     },
     {
-      'name': 'birthdate',
-      'label': 'Birth Date',
-      'inputType': 'date'
+      name: 'birthdate',
+      label: 'Birth Date',
+      inputType: 'date'
     },
     {
-      'name': 'datetime',
-      'label': 'Show Time',
-      'inputType': 'datetime-local'
+      name: 'datetime',
+      label: 'Show Time',
+      inputType: 'datetime-local'
     },
     {
-      'name': 'alarm',
-      'label': 'Daily Alarm',
-      'inputType': 'time'
+      name: 'alarm',
+      label: 'Daily Alarm',
+      inputType: 'time'
     },
     {
-      'name': 'groupedField1',
-      'label': 'Grouped Field 1',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField1',
+      label: 'Grouped Field 1',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField2',
-      'label': 'Grouped Field 2',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField2',
+      label: 'Grouped Field 2',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField3',
-      'label': 'Grouped Field 3',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField3',
+      label: 'Grouped Field 3',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField4',
-      'label': 'Grouped Field 4',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField4',
+      label: 'Grouped Field 4',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/query-builder/display-only-field.vue b/examples/sites/demos/pc/app/query-builder/display-only-field.vue
index 69d22c10a..d497f06ab 100644
--- a/examples/sites/demos/pc/app/query-builder/display-only-field.vue
+++ b/examples/sites/demos/pc/app/query-builder/display-only-field.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { QueryBuilder } from '@opentiny/vue'
+import { TinyQueryBuilder } from '@opentiny/vue'
 import { random } from '@opentiny/vue-renderless/common/string'
 
 export default {
   components: {
-    TinyQueryBuilder: QueryBuilder
+    TinyQueryBuilder
   },
   data() {
     return {
@@ -136,1233 +136,1233 @@ const config = {
   showLockButtons: false,
   combinators: [
     {
-      'name': 'and',
-      'label': '且'
+      name: 'and',
+      label: '且'
     },
     {
-      'name': 'or',
-      'label': '或'
+      name: 'or',
+      label: '或'
     }
   ],
   fields: [
     {
-      'name': 'firstName',
-      'label': 'First Name',
-      'placeholder': '请输入',
+      name: 'firstName',
+      label: 'First Name',
+      placeholder: '请输入',
       validator: (r) => !!r.value
     },
     {
-      'name': 'lastName',
-      'label': 'Last Name',
-      'placeholder': 'Enter last name',
-      'defaultOperator': 'beginsWith',
+      name: 'lastName',
+      label: 'Last Name',
+      placeholder: 'Enter last name',
+      defaultOperator: 'beginsWith',
       validator: (r) => !!r.value
     },
     {
-      'name': 'age',
-      'label': 'Age',
-      'inputType': 'number',
+      name: 'age',
+      label: 'Age',
+      inputType: 'number',
       validator: (r) => !!r.value
     },
     {
-      'name': 'isMusician',
-      'label': 'Is a musician',
-      'valueEditorType': 'checkbox',
-      'operators': [
+      name: 'isMusician',
+      label: 'Is a musician',
+      valueEditorType: 'checkbox',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         }
       ],
-      'defaultValue': false,
+      defaultValue: false,
       validator: (r) => !!r.value
     },
     {
-      'name': 'instrument',
-      'label': 'Primary instrument',
-      'valueEditorType': 'select',
-      'values': [
+      name: 'instrument',
+      label: 'Primary instrument',
+      valueEditorType: 'select',
+      values: [
         {
-          'label': 'Percussion instruments',
-          'options': [
+          label: 'Percussion instruments',
+          options: [
             {
-              'name': 'Clapstick',
-              'label': 'Clapstick'
+              name: 'Clapstick',
+              label: 'Clapstick'
             },
             {
-              'name': 'Cowbell',
-              'label': 'Cowbell'
+              name: 'Cowbell',
+              label: 'Cowbell'
             },
             {
-              'name': 'Cymbal',
-              'label': 'Cymbal'
+              name: 'Cymbal',
+              label: 'Cymbal'
             },
             {
-              'name': 'Gong',
-              'label': 'Gong'
+              name: 'Gong',
+              label: 'Gong'
             },
             {
-              'name': 'Maraca',
-              'label': 'Maraca'
+              name: 'Maraca',
+              label: 'Maraca'
             },
             {
-              'name': 'Marimba',
-              'label': 'Marimba'
+              name: 'Marimba',
+              label: 'Marimba'
             },
             {
-              'name': 'More cowbell',
-              'label': 'More cowbell'
+              name: 'More cowbell',
+              label: 'More cowbell'
             },
             {
-              'name': 'Spoon',
-              'label': 'Spoon'
+              name: 'Spoon',
+              label: 'Spoon'
             },
             {
-              'name': 'Steelpan',
-              'label': 'Steelpan'
+              name: 'Steelpan',
+              label: 'Steelpan'
             },
             {
-              'name': 'Tambourine',
-              'label': 'Tambourine'
+              name: 'Tambourine',
+              label: 'Tambourine'
             },
             {
-              'name': 'Triangle',
-              'label': 'Triangle'
+              name: 'Triangle',
+              label: 'Triangle'
             },
             {
-              'name': 'Vibraphone',
-              'label': 'Vibraphone'
+              name: 'Vibraphone',
+              label: 'Vibraphone'
             },
             {
-              'name': 'Washboard',
-              'label': 'Washboard'
+              name: 'Washboard',
+              label: 'Washboard'
             },
             {
-              'name': 'Wood block',
-              'label': 'Wood block'
+              name: 'Wood block',
+              label: 'Wood block'
             },
             {
-              'name': 'Wooden fish',
-              'label': 'Wooden fish'
+              name: 'Wooden fish',
+              label: 'Wooden fish'
             },
             {
-              'name': 'Xylophone',
-              'label': 'Xylophone'
+              name: 'Xylophone',
+              label: 'Xylophone'
             }
           ]
         },
         {
-          'label': 'Membranophones',
-          'options': [
+          label: 'Membranophones',
+          options: [
             {
-              'name': 'Barrel drum',
-              'label': 'Barrel drum'
+              name: 'Barrel drum',
+              label: 'Barrel drum'
             },
             {
-              'name': 'Bass drum',
-              'label': 'Bass drum'
+              name: 'Bass drum',
+              label: 'Bass drum'
             },
             {
-              'name': 'Bongo drums',
-              'label': 'Bongo drums'
+              name: 'Bongo drums',
+              label: 'Bongo drums'
             },
             {
-              'name': 'Conga',
-              'label': 'Conga'
+              name: 'Conga',
+              label: 'Conga'
             },
             {
-              'name': 'Drum',
-              'label': 'Drum'
+              name: 'Drum',
+              label: 'Drum'
             },
             {
-              'name': 'Drum kit',
-              'label': 'Drum kit'
+              name: 'Drum kit',
+              label: 'Drum kit'
             },
             {
-              'name': "Jew's harp",
-              'label': "Jew's harp"
+              name: "Jew's harp",
+              label: "Jew's harp"
             },
             {
-              'name': 'Octaban',
-              'label': 'Octaban'
+              name: 'Octaban',
+              label: 'Octaban'
             },
             {
-              'name': 'Samphor',
-              'label': 'Samphor'
+              name: 'Samphor',
+              label: 'Samphor'
             },
             {
-              'name': 'Snare drum',
-              'label': 'Snare drum'
+              name: 'Snare drum',
+              label: 'Snare drum'
             },
             {
-              'name': 'Timpani',
-              'label': 'Timpani'
+              name: 'Timpani',
+              label: 'Timpani'
             },
             {
-              'name': 'Tom-tom',
-              'label': 'Tom-tom'
+              name: 'Tom-tom',
+              label: 'Tom-tom'
             }
           ]
         },
         {
-          'label': 'Wind instruments',
-          'options': [
+          label: 'Wind instruments',
+          options: [
             {
-              'name': 'Accordion',
-              'label': 'Accordion'
+              name: 'Accordion',
+              label: 'Accordion'
             },
             {
-              'name': 'Air horn',
-              'label': 'Air horn'
+              name: 'Air horn',
+              label: 'Air horn'
             },
             {
-              'name': 'Bagpipe',
-              'label': 'Bagpipe'
+              name: 'Bagpipe',
+              label: 'Bagpipe'
             },
             {
-              'name': 'Baritone horn',
-              'label': 'Baritone horn'
+              name: 'Baritone horn',
+              label: 'Baritone horn'
             },
             {
-              'name': 'Bassoon',
-              'label': 'Bassoon'
+              name: 'Bassoon',
+              label: 'Bassoon'
             },
             {
-              'name': 'Bazooka',
-              'label': 'Bazooka'
+              name: 'Bazooka',
+              label: 'Bazooka'
             },
             {
-              'name': 'Beatboxing',
-              'label': 'Beatboxing'
+              name: 'Beatboxing',
+              label: 'Beatboxing'
             },
             {
-              'name': 'Blown bottle',
-              'label': 'Blown bottle'
+              name: 'Blown bottle',
+              label: 'Blown bottle'
             },
             {
-              'name': 'Bugle',
-              'label': 'Bugle'
+              name: 'Bugle',
+              label: 'Bugle'
             },
             {
-              'name': 'Clarinet',
-              'label': 'Clarinet'
+              name: 'Clarinet',
+              label: 'Clarinet'
             },
             {
-              'name': 'Conch',
-              'label': 'Conch'
+              name: 'Conch',
+              label: 'Conch'
             },
             {
-              'name': 'Cornet',
-              'label': 'Cornet'
+              name: 'Cornet',
+              label: 'Cornet'
             },
             {
-              'name': 'Didgeridoo',
-              'label': 'Didgeridoo'
+              name: 'Didgeridoo',
+              label: 'Didgeridoo'
             },
             {
-              'name': 'Double bell euphonium',
-              'label': 'Double bell euphonium'
+              name: 'Double bell euphonium',
+              label: 'Double bell euphonium'
             },
             {
-              'name': 'Doulophone',
-              'label': 'Doulophone'
+              name: 'Doulophone',
+              label: 'Doulophone'
             },
             {
-              'name': 'English horn',
-              'label': 'English horn'
+              name: 'English horn',
+              label: 'English horn'
             },
             {
-              'name': 'Euphonium',
-              'label': 'Euphonium'
+              name: 'Euphonium',
+              label: 'Euphonium'
             },
             {
-              'name': 'Flugelhorn',
-              'label': 'Flugelhorn'
+              name: 'Flugelhorn',
+              label: 'Flugelhorn'
             },
             {
-              'name': 'Flute',
-              'label': 'Flute'
+              name: 'Flute',
+              label: 'Flute'
             },
             {
-              'name': 'French horn',
-              'label': 'French horn'
+              name: 'French horn',
+              label: 'French horn'
             },
             {
-              'name': 'Harmonica',
-              'label': 'Harmonica'
+              name: 'Harmonica',
+              label: 'Harmonica'
             },
             {
-              'name': 'Irish flute',
-              'label': 'Irish flute'
+              name: 'Irish flute',
+              label: 'Irish flute'
             },
             {
-              'name': 'Jug',
-              'label': 'Jug'
+              name: 'Jug',
+              label: 'Jug'
             },
             {
-              'name': 'Kazoo',
-              'label': 'Kazoo'
+              name: 'Kazoo',
+              label: 'Kazoo'
             },
             {
-              'name': 'Melodeon',
-              'label': 'Melodeon'
+              name: 'Melodeon',
+              label: 'Melodeon'
             },
             {
-              'name': 'Mezzo-soprano',
-              'label': 'Mezzo-soprano'
+              name: 'Mezzo-soprano',
+              label: 'Mezzo-soprano'
             },
             {
-              'name': 'Oboe',
-              'label': 'Oboe'
+              name: 'Oboe',
+              label: 'Oboe'
             },
             {
-              'name': 'Ocarina',
-              'label': 'Ocarina'
+              name: 'Ocarina',
+              label: 'Ocarina'
             },
             {
-              'name': 'Pan flute',
-              'label': 'Pan flute'
+              name: 'Pan flute',
+              label: 'Pan flute'
             },
             {
-              'name': 'Piccolo',
-              'label': 'Piccolo'
+              name: 'Piccolo',
+              label: 'Piccolo'
             },
             {
-              'name': 'Pipe organ',
-              'label': 'Pipe organ'
+              name: 'Pipe organ',
+              label: 'Pipe organ'
             },
             {
-              'name': 'Recorder',
-              'label': 'Recorder'
+              name: 'Recorder',
+              label: 'Recorder'
             },
             {
-              'name': 'Saxophone',
-              'label': 'Saxophone'
+              name: 'Saxophone',
+              label: 'Saxophone'
             },
             {
-              'name': 'Slide whistle',
-              'label': 'Slide whistle'
+              name: 'Slide whistle',
+              label: 'Slide whistle'
             },
             {
-              'name': 'Sousaphone',
-              'label': 'Sousaphone'
+              name: 'Sousaphone',
+              label: 'Sousaphone'
             },
             {
-              'name': 'Trombone',
-              'label': 'Trombone'
+              name: 'Trombone',
+              label: 'Trombone'
             },
             {
-              'name': 'Trumpet',
-              'label': 'Trumpet'
+              name: 'Trumpet',
+              label: 'Trumpet'
             },
             {
-              'name': 'Tuba',
-              'label': 'Tuba'
+              name: 'Tuba',
+              label: 'Tuba'
             },
             {
-              'name': 'Whistle',
-              'label': 'Whistle'
+              name: 'Whistle',
+              label: 'Whistle'
             }
           ]
         },
         {
-          'label': 'Stringed instruments',
-          'options': [
+          label: 'Stringed instruments',
+          options: [
             {
-              'name': 'Aeolian harp',
-              'label': 'Aeolian harp'
+              name: 'Aeolian harp',
+              label: 'Aeolian harp'
             },
             {
-              'name': 'Bandolin',
-              'label': 'Bandolin'
+              name: 'Bandolin',
+              label: 'Bandolin'
             },
             {
-              'name': 'Banjo ukulele',
-              'label': 'Banjo ukulele'
+              name: 'Banjo ukulele',
+              label: 'Banjo ukulele'
             },
             {
-              'name': 'Cello',
-              'label': 'Cello'
+              name: 'Cello',
+              label: 'Cello'
             },
             {
-              'name': 'Chapman stick',
-              'label': 'Chapman stick'
+              name: 'Chapman stick',
+              label: 'Chapman stick'
             },
             {
-              'name': 'Clavichord',
-              'label': 'Clavichord'
+              name: 'Clavichord',
+              label: 'Clavichord'
             },
             {
-              'name': 'Clavinet',
-              'label': 'Clavinet'
+              name: 'Clavinet',
+              label: 'Clavinet'
             },
             {
-              'name': 'Double bass',
-              'label': 'Double bass'
+              name: 'Double bass',
+              label: 'Double bass'
             },
             {
-              'name': 'Dulcimer',
-              'label': 'Dulcimer'
+              name: 'Dulcimer',
+              label: 'Dulcimer'
             },
             {
-              'name': 'Fiddle',
-              'label': 'Fiddle'
+              name: 'Fiddle',
+              label: 'Fiddle'
             },
             {
-              'name': 'Guitar',
-              'label': 'Guitar'
+              name: 'Guitar',
+              label: 'Guitar'
             },
             {
-              'name': 'Hammered dulcimer',
-              'label': 'Hammered dulcimer'
+              name: 'Hammered dulcimer',
+              label: 'Hammered dulcimer'
             },
             {
-              'name': 'Harp',
-              'label': 'Harp'
+              name: 'Harp',
+              label: 'Harp'
             },
             {
-              'name': 'Harpsichord',
-              'label': 'Harpsichord'
+              name: 'Harpsichord',
+              label: 'Harpsichord'
             },
             {
-              'name': 'Lute',
-              'label': 'Lute'
+              name: 'Lute',
+              label: 'Lute'
             },
             {
-              'name': 'Lyre',
-              'label': 'Lyre'
+              name: 'Lyre',
+              label: 'Lyre'
             },
             {
-              'name': 'Maguhu',
-              'label': 'Maguhu'
+              name: 'Maguhu',
+              label: 'Maguhu'
             },
             {
-              'name': 'Mandola',
-              'label': 'Mandola'
+              name: 'Mandola',
+              label: 'Mandola'
             },
             {
-              'name': 'Mandolin',
-              'label': 'Mandolin'
+              name: 'Mandolin',
+              label: 'Mandolin'
             },
             {
-              'name': 'Octobass',
-              'label': 'Octobass'
+              name: 'Octobass',
+              label: 'Octobass'
             },
             {
-              'name': 'Piano',
-              'label': 'Piano'
+              name: 'Piano',
+              label: 'Piano'
             },
             {
-              'name': 'Sitar',
-              'label': 'Sitar'
+              name: 'Sitar',
+              label: 'Sitar'
             },
             {
-              'name': 'Ukulele',
-              'label': 'Ukulele'
+              name: 'Ukulele',
+              label: 'Ukulele'
             },
             {
-              'name': 'Viol',
-              'label': 'Viol'
+              name: 'Viol',
+              label: 'Viol'
             },
             {
-              'name': 'Violin',
-              'label': 'Violin'
+              name: 'Violin',
+              label: 'Violin'
             },
             {
-              'name': 'Washtub bass',
-              'label': 'Washtub bass'
+              name: 'Washtub bass',
+              label: 'Washtub bass'
             }
           ]
         },
         {
-          'label': 'Electronic instruments',
-          'options': [
+          label: 'Electronic instruments',
+          options: [
             {
-              'name': 'AlphaSphere',
-              'label': 'AlphaSphere'
+              name: 'AlphaSphere',
+              label: 'AlphaSphere'
             },
             {
-              'name': 'Audiocubes',
-              'label': 'Audiocubes'
+              name: 'Audiocubes',
+              label: 'Audiocubes'
             },
             {
-              'name': 'Bass pedals',
-              'label': 'Bass pedals'
+              name: 'Bass pedals',
+              label: 'Bass pedals'
             },
             {
-              'name': 'Continuum Fingerboard',
-              'label': 'Continuum Fingerboard'
+              name: 'Continuum Fingerboard',
+              label: 'Continuum Fingerboard'
             },
             {
-              'name': 'Croix Sonore',
-              'label': 'Croix Sonore'
+              name: 'Croix Sonore',
+              label: 'Croix Sonore'
             },
             {
-              'name': "Denis d'or",
-              'label': "Denis d'or"
+              name: "Denis d'or",
+              label: "Denis d'or"
             },
             {
-              'name': 'Dubreq stylophone',
-              'label': 'Dubreq stylophone'
+              name: 'Dubreq stylophone',
+              label: 'Dubreq stylophone'
             },
             {
-              'name': 'Drum machine',
-              'label': 'Drum machine'
+              name: 'Drum machine',
+              label: 'Drum machine'
             },
             {
-              'name': 'Eigenharp',
-              'label': 'Eigenharp'
+              name: 'Eigenharp',
+              label: 'Eigenharp'
             },
             {
-              'name': 'Electric guitar',
-              'label': 'Electric guitar'
+              name: 'Electric guitar',
+              label: 'Electric guitar'
             },
             {
-              'name': 'Electronic keyboard',
-              'label': 'Electronic keyboard'
+              name: 'Electronic keyboard',
+              label: 'Electronic keyboard'
             },
             {
-              'name': 'Electronic organ',
-              'label': 'Electronic organ'
+              name: 'Electronic organ',
+              label: 'Electronic organ'
             },
             {
-              'name': 'EWI',
-              'label': 'EWI'
+              name: 'EWI',
+              label: 'EWI'
             },
             {
-              'name': 'Fingerboard synthesizer',
-              'label': 'Fingerboard synthesizer'
+              name: 'Fingerboard synthesizer',
+              label: 'Fingerboard synthesizer'
             },
             {
-              'name': 'Hammond organ',
-              'label': 'Hammond organ'
+              name: 'Hammond organ',
+              label: 'Hammond organ'
             },
             {
-              'name': 'Keyboard',
-              'label': 'Keyboard'
+              name: 'Keyboard',
+              label: 'Keyboard'
             },
             {
-              'name': 'Keytar',
-              'label': 'Keytar'
+              name: 'Keytar',
+              label: 'Keytar'
             },
             {
-              'name': 'Kraakdoos',
-              'label': 'Kraakdoos'
+              name: 'Kraakdoos',
+              label: 'Kraakdoos'
             },
             {
-              'name': 'Laser harp',
-              'label': 'Laser harp'
+              name: 'Laser harp',
+              label: 'Laser harp'
             },
             {
-              'name': 'Mellotron',
-              'label': 'Mellotron'
+              name: 'Mellotron',
+              label: 'Mellotron'
             },
             {
-              'name': 'MIDI keyboard',
-              'label': 'MIDI keyboard'
+              name: 'MIDI keyboard',
+              label: 'MIDI keyboard'
             },
             {
-              'name': 'Omnichord',
-              'label': 'Omnichord'
+              name: 'Omnichord',
+              label: 'Omnichord'
             },
             {
-              'name': 'Ondes Martenot',
-              'label': 'Ondes Martenot'
+              name: 'Ondes Martenot',
+              label: 'Ondes Martenot'
             },
             {
-              'name': 'Otamatone',
-              'label': 'Otamatone'
+              name: 'Otamatone',
+              label: 'Otamatone'
             },
             {
-              'name': 'Sampler',
-              'label': 'Sampler'
+              name: 'Sampler',
+              label: 'Sampler'
             },
             {
-              'name': 'Seaboard music instrument',
-              'label': 'Seaboard music instrument'
+              name: 'Seaboard music instrument',
+              label: 'Seaboard music instrument'
             },
             {
-              'name': 'Skoog',
-              'label': 'Skoog'
+              name: 'Skoog',
+              label: 'Skoog'
             },
             {
-              'name': 'Synclavier',
-              'label': 'Synclavier'
+              name: 'Synclavier',
+              label: 'Synclavier'
             },
             {
-              'name': 'Synthesizer',
-              'label': 'Synthesizer'
+              name: 'Synthesizer',
+              label: 'Synthesizer'
             },
             {
-              'name': 'Teleharmonium',
-              'label': 'Teleharmonium'
+              name: 'Teleharmonium',
+              label: 'Teleharmonium'
             },
             {
-              'name': 'Tenori-on',
-              'label': 'Tenori-on'
+              name: 'Tenori-on',
+              label: 'Tenori-on'
             },
             {
-              'name': 'Theremin',
-              'label': 'Theremin'
+              name: 'Theremin',
+              label: 'Theremin'
             },
             {
-              'name': 'trautonium',
-              'label': 'trautonium'
+              name: 'trautonium',
+              label: 'trautonium'
             },
             {
-              'name': 'Turntablism',
-              'label': 'Turntablism'
+              name: 'Turntablism',
+              label: 'Turntablism'
             },
             {
-              'name': 'Turntable',
-              'label': 'Turntable'
+              name: 'Turntable',
+              label: 'Turntable'
             }
           ]
         }
       ],
-      'defaultValue': 'Cowbell',
-      'operators': [
+      defaultValue: 'Cowbell',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         },
         {
-          'name': 'in',
-          'label': 'in'
+          name: 'in',
+          label: 'in'
         }
       ]
     },
     {
-      'name': 'alsoPlays',
-      'label': 'Also plays',
-      'valueEditorType': 'multiselect',
-      'values': [
+      name: 'alsoPlays',
+      label: 'Also plays',
+      valueEditorType: 'multiselect',
+      values: [
         {
-          'label': 'Percussion instruments',
-          'options': [
+          label: 'Percussion instruments',
+          options: [
             {
-              'name': 'Clapstick',
-              'label': 'Clapstick'
+              name: 'Clapstick',
+              label: 'Clapstick'
             },
             {
-              'name': 'Cowbell',
-              'label': 'Cowbell'
+              name: 'Cowbell',
+              label: 'Cowbell'
             },
             {
-              'name': 'Cymbal',
-              'label': 'Cymbal'
+              name: 'Cymbal',
+              label: 'Cymbal'
             },
             {
-              'name': 'Gong',
-              'label': 'Gong'
+              name: 'Gong',
+              label: 'Gong'
             },
             {
-              'name': 'Maraca',
-              'label': 'Maraca'
+              name: 'Maraca',
+              label: 'Maraca'
             },
             {
-              'name': 'Marimba',
-              'label': 'Marimba'
+              name: 'Marimba',
+              label: 'Marimba'
             },
             {
-              'name': 'More cowbell',
-              'label': 'More cowbell'
+              name: 'More cowbell',
+              label: 'More cowbell'
             },
             {
-              'name': 'Spoon',
-              'label': 'Spoon'
+              name: 'Spoon',
+              label: 'Spoon'
             },
             {
-              'name': 'Steelpan',
-              'label': 'Steelpan'
+              name: 'Steelpan',
+              label: 'Steelpan'
             },
             {
-              'name': 'Tambourine',
-              'label': 'Tambourine'
+              name: 'Tambourine',
+              label: 'Tambourine'
             },
             {
-              'name': 'Triangle',
-              'label': 'Triangle'
+              name: 'Triangle',
+              label: 'Triangle'
             },
             {
-              'name': 'Vibraphone',
-              'label': 'Vibraphone'
+              name: 'Vibraphone',
+              label: 'Vibraphone'
             },
             {
-              'name': 'Washboard',
-              'label': 'Washboard'
+              name: 'Washboard',
+              label: 'Washboard'
             },
             {
-              'name': 'Wood block',
-              'label': 'Wood block'
+              name: 'Wood block',
+              label: 'Wood block'
             },
             {
-              'name': 'Wooden fish',
-              'label': 'Wooden fish'
+              name: 'Wooden fish',
+              label: 'Wooden fish'
             },
             {
-              'name': 'Xylophone',
-              'label': 'Xylophone'
+              name: 'Xylophone',
+              label: 'Xylophone'
             }
           ]
         },
         {
-          'label': 'Membranophones',
-          'options': [
+          label: 'Membranophones',
+          options: [
             {
-              'name': 'Barrel drum',
-              'label': 'Barrel drum'
+              name: 'Barrel drum',
+              label: 'Barrel drum'
             },
             {
-              'name': 'Bass drum',
-              'label': 'Bass drum'
+              name: 'Bass drum',
+              label: 'Bass drum'
             },
             {
-              'name': 'Bongo drums',
-              'label': 'Bongo drums'
+              name: 'Bongo drums',
+              label: 'Bongo drums'
             },
             {
-              'name': 'Conga',
-              'label': 'Conga'
+              name: 'Conga',
+              label: 'Conga'
             },
             {
-              'name': 'Drum',
-              'label': 'Drum'
+              name: 'Drum',
+              label: 'Drum'
             },
             {
-              'name': 'Drum kit',
-              'label': 'Drum kit'
+              name: 'Drum kit',
+              label: 'Drum kit'
             },
             {
-              'name': "Jew's harp",
-              'label': "Jew's harp"
+              name: "Jew's harp",
+              label: "Jew's harp"
             },
             {
-              'name': 'Octaban',
-              'label': 'Octaban'
+              name: 'Octaban',
+              label: 'Octaban'
             },
             {
-              'name': 'Samphor',
-              'label': 'Samphor'
+              name: 'Samphor',
+              label: 'Samphor'
             },
             {
-              'name': 'Snare drum',
-              'label': 'Snare drum'
+              name: 'Snare drum',
+              label: 'Snare drum'
             },
             {
-              'name': 'Timpani',
-              'label': 'Timpani'
+              name: 'Timpani',
+              label: 'Timpani'
             },
             {
-              'name': 'Tom-tom',
-              'label': 'Tom-tom'
+              name: 'Tom-tom',
+              label: 'Tom-tom'
             }
           ]
         },
         {
-          'label': 'Wind instruments',
-          'options': [
+          label: 'Wind instruments',
+          options: [
             {
-              'name': 'Accordion',
-              'label': 'Accordion'
+              name: 'Accordion',
+              label: 'Accordion'
             },
             {
-              'name': 'Air horn',
-              'label': 'Air horn'
+              name: 'Air horn',
+              label: 'Air horn'
             },
             {
-              'name': 'Bagpipe',
-              'label': 'Bagpipe'
+              name: 'Bagpipe',
+              label: 'Bagpipe'
             },
             {
-              'name': 'Baritone horn',
-              'label': 'Baritone horn'
+              name: 'Baritone horn',
+              label: 'Baritone horn'
             },
             {
-              'name': 'Bassoon',
-              'label': 'Bassoon'
+              name: 'Bassoon',
+              label: 'Bassoon'
             },
             {
-              'name': 'Bazooka',
-              'label': 'Bazooka'
+              name: 'Bazooka',
+              label: 'Bazooka'
             },
             {
-              'name': 'Beatboxing',
-              'label': 'Beatboxing'
+              name: 'Beatboxing',
+              label: 'Beatboxing'
             },
             {
-              'name': 'Blown bottle',
-              'label': 'Blown bottle'
+              name: 'Blown bottle',
+              label: 'Blown bottle'
             },
             {
-              'name': 'Bugle',
-              'label': 'Bugle'
+              name: 'Bugle',
+              label: 'Bugle'
             },
             {
-              'name': 'Clarinet',
-              'label': 'Clarinet'
+              name: 'Clarinet',
+              label: 'Clarinet'
             },
             {
-              'name': 'Conch',
-              'label': 'Conch'
+              name: 'Conch',
+              label: 'Conch'
             },
             {
-              'name': 'Cornet',
-              'label': 'Cornet'
+              name: 'Cornet',
+              label: 'Cornet'
             },
             {
-              'name': 'Didgeridoo',
-              'label': 'Didgeridoo'
+              name: 'Didgeridoo',
+              label: 'Didgeridoo'
             },
             {
-              'name': 'Double bell euphonium',
-              'label': 'Double bell euphonium'
+              name: 'Double bell euphonium',
+              label: 'Double bell euphonium'
             },
             {
-              'name': 'Doulophone',
-              'label': 'Doulophone'
+              name: 'Doulophone',
+              label: 'Doulophone'
             },
             {
-              'name': 'English horn',
-              'label': 'English horn'
+              name: 'English horn',
+              label: 'English horn'
             },
             {
-              'name': 'Euphonium',
-              'label': 'Euphonium'
+              name: 'Euphonium',
+              label: 'Euphonium'
             },
             {
-              'name': 'Flugelhorn',
-              'label': 'Flugelhorn'
+              name: 'Flugelhorn',
+              label: 'Flugelhorn'
             },
             {
-              'name': 'Flute',
-              'label': 'Flute'
+              name: 'Flute',
+              label: 'Flute'
             },
             {
-              'name': 'French horn',
-              'label': 'French horn'
+              name: 'French horn',
+              label: 'French horn'
             },
             {
-              'name': 'Harmonica',
-              'label': 'Harmonica'
+              name: 'Harmonica',
+              label: 'Harmonica'
             },
             {
-              'name': 'Irish flute',
-              'label': 'Irish flute'
+              name: 'Irish flute',
+              label: 'Irish flute'
             },
             {
-              'name': 'Jug',
-              'label': 'Jug'
+              name: 'Jug',
+              label: 'Jug'
             },
             {
-              'name': 'Kazoo',
-              'label': 'Kazoo'
+              name: 'Kazoo',
+              label: 'Kazoo'
             },
             {
-              'name': 'Melodeon',
-              'label': 'Melodeon'
+              name: 'Melodeon',
+              label: 'Melodeon'
             },
             {
-              'name': 'Mezzo-soprano',
-              'label': 'Mezzo-soprano'
+              name: 'Mezzo-soprano',
+              label: 'Mezzo-soprano'
             },
             {
-              'name': 'Oboe',
-              'label': 'Oboe'
+              name: 'Oboe',
+              label: 'Oboe'
             },
             {
-              'name': 'Ocarina',
-              'label': 'Ocarina'
+              name: 'Ocarina',
+              label: 'Ocarina'
             },
             {
-              'name': 'Pan flute',
-              'label': 'Pan flute'
+              name: 'Pan flute',
+              label: 'Pan flute'
             },
             {
-              'name': 'Piccolo',
-              'label': 'Piccolo'
+              name: 'Piccolo',
+              label: 'Piccolo'
             },
             {
-              'name': 'Pipe organ',
-              'label': 'Pipe organ'
+              name: 'Pipe organ',
+              label: 'Pipe organ'
             },
             {
-              'name': 'Recorder',
-              'label': 'Recorder'
+              name: 'Recorder',
+              label: 'Recorder'
             },
             {
-              'name': 'Saxophone',
-              'label': 'Saxophone'
+              name: 'Saxophone',
+              label: 'Saxophone'
             },
             {
-              'name': 'Slide whistle',
-              'label': 'Slide whistle'
+              name: 'Slide whistle',
+              label: 'Slide whistle'
             },
             {
-              'name': 'Sousaphone',
-              'label': 'Sousaphone'
+              name: 'Sousaphone',
+              label: 'Sousaphone'
             },
             {
-              'name': 'Trombone',
-              'label': 'Trombone'
+              name: 'Trombone',
+              label: 'Trombone'
             },
             {
-              'name': 'Trumpet',
-              'label': 'Trumpet'
+              name: 'Trumpet',
+              label: 'Trumpet'
             },
             {
-              'name': 'Tuba',
-              'label': 'Tuba'
+              name: 'Tuba',
+              label: 'Tuba'
             },
             {
-              'name': 'Whistle',
-              'label': 'Whistle'
+              name: 'Whistle',
+              label: 'Whistle'
             }
           ]
         },
         {
-          'label': 'Stringed instruments',
-          'options': [
+          label: 'Stringed instruments',
+          options: [
             {
-              'name': 'Aeolian harp',
-              'label': 'Aeolian harp'
+              name: 'Aeolian harp',
+              label: 'Aeolian harp'
             },
             {
-              'name': 'Bandolin',
-              'label': 'Bandolin'
+              name: 'Bandolin',
+              label: 'Bandolin'
             },
             {
-              'name': 'Banjo ukulele',
-              'label': 'Banjo ukulele'
+              name: 'Banjo ukulele',
+              label: 'Banjo ukulele'
             },
             {
-              'name': 'Cello',
-              'label': 'Cello'
+              name: 'Cello',
+              label: 'Cello'
             },
             {
-              'name': 'Chapman stick',
-              'label': 'Chapman stick'
+              name: 'Chapman stick',
+              label: 'Chapman stick'
             },
             {
-              'name': 'Clavichord',
-              'label': 'Clavichord'
+              name: 'Clavichord',
+              label: 'Clavichord'
             },
             {
-              'name': 'Clavinet',
-              'label': 'Clavinet'
+              name: 'Clavinet',
+              label: 'Clavinet'
             },
             {
-              'name': 'Double bass',
-              'label': 'Double bass'
+              name: 'Double bass',
+              label: 'Double bass'
             },
             {
-              'name': 'Dulcimer',
-              'label': 'Dulcimer'
+              name: 'Dulcimer',
+              label: 'Dulcimer'
             },
             {
-              'name': 'Fiddle',
-              'label': 'Fiddle'
+              name: 'Fiddle',
+              label: 'Fiddle'
             },
             {
-              'name': 'Guitar',
-              'label': 'Guitar'
+              name: 'Guitar',
+              label: 'Guitar'
             },
             {
-              'name': 'Hammered dulcimer',
-              'label': 'Hammered dulcimer'
+              name: 'Hammered dulcimer',
+              label: 'Hammered dulcimer'
             },
             {
-              'name': 'Harp',
-              'label': 'Harp'
+              name: 'Harp',
+              label: 'Harp'
             },
             {
-              'name': 'Harpsichord',
-              'label': 'Harpsichord'
+              name: 'Harpsichord',
+              label: 'Harpsichord'
             },
             {
-              'name': 'Lute',
-              'label': 'Lute'
+              name: 'Lute',
+              label: 'Lute'
             },
             {
-              'name': 'Lyre',
-              'label': 'Lyre'
+              name: 'Lyre',
+              label: 'Lyre'
             },
             {
-              'name': 'Maguhu',
-              'label': 'Maguhu'
+              name: 'Maguhu',
+              label: 'Maguhu'
             },
             {
-              'name': 'Mandola',
-              'label': 'Mandola'
+              name: 'Mandola',
+              label: 'Mandola'
             },
             {
-              'name': 'Mandolin',
-              'label': 'Mandolin'
+              name: 'Mandolin',
+              label: 'Mandolin'
             },
             {
-              'name': 'Octobass',
-              'label': 'Octobass'
+              name: 'Octobass',
+              label: 'Octobass'
             },
             {
-              'name': 'Piano',
-              'label': 'Piano'
+              name: 'Piano',
+              label: 'Piano'
             },
             {
-              'name': 'Sitar',
-              'label': 'Sitar'
+              name: 'Sitar',
+              label: 'Sitar'
             },
             {
-              'name': 'Ukulele',
-              'label': 'Ukulele'
+              name: 'Ukulele',
+              label: 'Ukulele'
             },
             {
-              'name': 'Viol',
-              'label': 'Viol'
+              name: 'Viol',
+              label: 'Viol'
             },
             {
-              'name': 'Violin',
-              'label': 'Violin'
+              name: 'Violin',
+              label: 'Violin'
             },
             {
-              'name': 'Washtub bass',
-              'label': 'Washtub bass'
+              name: 'Washtub bass',
+              label: 'Washtub bass'
             }
           ]
         },
         {
-          'label': 'Electronic instruments',
-          'options': [
+          label: 'Electronic instruments',
+          options: [
             {
-              'name': 'AlphaSphere',
-              'label': 'AlphaSphere'
+              name: 'AlphaSphere',
+              label: 'AlphaSphere'
             },
             {
-              'name': 'Audiocubes',
-              'label': 'Audiocubes'
+              name: 'Audiocubes',
+              label: 'Audiocubes'
             },
             {
-              'name': 'Bass pedals',
-              'label': 'Bass pedals'
+              name: 'Bass pedals',
+              label: 'Bass pedals'
             },
             {
-              'name': 'Continuum Fingerboard',
-              'label': 'Continuum Fingerboard'
+              name: 'Continuum Fingerboard',
+              label: 'Continuum Fingerboard'
             },
             {
-              'name': 'Croix Sonore',
-              'label': 'Croix Sonore'
+              name: 'Croix Sonore',
+              label: 'Croix Sonore'
             },
             {
-              'name': "Denis d'or",
-              'label': "Denis d'or"
+              name: "Denis d'or",
+              label: "Denis d'or"
             },
             {
-              'name': 'Dubreq stylophone',
-              'label': 'Dubreq stylophone'
+              name: 'Dubreq stylophone',
+              label: 'Dubreq stylophone'
             },
             {
-              'name': 'Drum machine',
-              'label': 'Drum machine'
+              name: 'Drum machine',
+              label: 'Drum machine'
             },
             {
-              'name': 'Eigenharp',
-              'label': 'Eigenharp'
+              name: 'Eigenharp',
+              label: 'Eigenharp'
             },
             {
-              'name': 'Electric guitar',
-              'label': 'Electric guitar'
+              name: 'Electric guitar',
+              label: 'Electric guitar'
             },
             {
-              'name': 'Electronic keyboard',
-              'label': 'Electronic keyboard'
+              name: 'Electronic keyboard',
+              label: 'Electronic keyboard'
             },
             {
-              'name': 'Electronic organ',
-              'label': 'Electronic organ'
+              name: 'Electronic organ',
+              label: 'Electronic organ'
             },
             {
-              'name': 'EWI',
-              'label': 'EWI'
+              name: 'EWI',
+              label: 'EWI'
             },
             {
-              'name': 'Fingerboard synthesizer',
-              'label': 'Fingerboard synthesizer'
+              name: 'Fingerboard synthesizer',
+              label: 'Fingerboard synthesizer'
             },
             {
-              'name': 'Hammond organ',
-              'label': 'Hammond organ'
+              name: 'Hammond organ',
+              label: 'Hammond organ'
             },
             {
-              'name': 'Keyboard',
-              'label': 'Keyboard'
+              name: 'Keyboard',
+              label: 'Keyboard'
             },
             {
-              'name': 'Keytar',
-              'label': 'Keytar'
+              name: 'Keytar',
+              label: 'Keytar'
             },
             {
-              'name': 'Kraakdoos',
-              'label': 'Kraakdoos'
+              name: 'Kraakdoos',
+              label: 'Kraakdoos'
             },
             {
-              'name': 'Laser harp',
-              'label': 'Laser harp'
+              name: 'Laser harp',
+              label: 'Laser harp'
             },
             {
-              'name': 'Mellotron',
-              'label': 'Mellotron'
+              name: 'Mellotron',
+              label: 'Mellotron'
             },
             {
-              'name': 'MIDI keyboard',
-              'label': 'MIDI keyboard'
+              name: 'MIDI keyboard',
+              label: 'MIDI keyboard'
             },
             {
-              'name': 'Omnichord',
-              'label': 'Omnichord'
+              name: 'Omnichord',
+              label: 'Omnichord'
             },
             {
-              'name': 'Ondes Martenot',
-              'label': 'Ondes Martenot'
+              name: 'Ondes Martenot',
+              label: 'Ondes Martenot'
             },
             {
-              'name': 'Otamatone',
-              'label': 'Otamatone'
+              name: 'Otamatone',
+              label: 'Otamatone'
             },
             {
-              'name': 'Sampler',
-              'label': 'Sampler'
+              name: 'Sampler',
+              label: 'Sampler'
             },
             {
-              'name': 'Seaboard music instrument',
-              'label': 'Seaboard music instrument'
+              name: 'Seaboard music instrument',
+              label: 'Seaboard music instrument'
             },
             {
-              'name': 'Skoog',
-              'label': 'Skoog'
+              name: 'Skoog',
+              label: 'Skoog'
             },
             {
-              'name': 'Synclavier',
-              'label': 'Synclavier'
+              name: 'Synclavier',
+              label: 'Synclavier'
             },
             {
-              'name': 'Synthesizer',
-              'label': 'Synthesizer'
+              name: 'Synthesizer',
+              label: 'Synthesizer'
             },
             {
-              'name': 'Teleharmonium',
-              'label': 'Teleharmonium'
+              name: 'Teleharmonium',
+              label: 'Teleharmonium'
             },
             {
-              'name': 'Tenori-on',
-              'label': 'Tenori-on'
+              name: 'Tenori-on',
+              label: 'Tenori-on'
             },
             {
-              'name': 'Theremin',
-              'label': 'Theremin'
+              name: 'Theremin',
+              label: 'Theremin'
             },
             {
-              'name': 'trautonium',
-              'label': 'trautonium'
+              name: 'trautonium',
+              label: 'trautonium'
             },
             {
-              'name': 'Turntablism',
-              'label': 'Turntablism'
+              name: 'Turntablism',
+              label: 'Turntablism'
             },
             {
-              'name': 'Turntable',
-              'label': 'Turntable'
+              name: 'Turntable',
+              label: 'Turntable'
             }
           ]
         }
       ],
-      'defaultValue': 'More cowbell',
-      'operators': [
+      defaultValue: 'More cowbell',
+      operators: [
         {
-          'name': 'in',
-          'label': 'in'
+          name: 'in',
+          label: 'in'
         }
       ]
     },
     {
-      'name': 'gender',
-      'label': 'Gender',
-      'operators': [
+      name: 'gender',
+      label: 'Gender',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         }
       ],
-      'valueEditorType': 'radio',
-      'values': [
+      valueEditorType: 'radio',
+      values: [
         {
-          'name': 'M',
-          'label': 'Male'
+          name: 'M',
+          label: 'Male'
         },
         {
-          'name': 'F',
-          'label': 'Female'
+          name: 'F',
+          label: 'Female'
         },
         {
-          'name': 'O',
-          'label': 'Other'
+          name: 'O',
+          label: 'Other'
         }
       ]
     },
     {
-      'name': 'height',
-      'label': 'Height'
+      name: 'height',
+      label: 'Height'
     },
     {
-      'name': 'job',
-      'label': 'Job'
+      name: 'job',
+      label: 'Job'
     },
     {
-      'name': 'description',
-      'label': 'Description',
-      'valueEditorType': 'textarea'
+      name: 'description',
+      label: 'Description',
+      valueEditorType: 'textarea'
     },
     {
-      'name': 'birthdate',
-      'label': 'Birth Date',
-      'inputType': 'date'
+      name: 'birthdate',
+      label: 'Birth Date',
+      inputType: 'date'
     },
     {
-      'name': 'datetime',
-      'label': 'Show Time',
-      'inputType': 'datetime-local'
+      name: 'datetime',
+      label: 'Show Time',
+      inputType: 'datetime-local'
     },
     {
-      'name': 'alarm',
-      'label': 'Daily Alarm',
-      'inputType': 'time'
+      name: 'alarm',
+      label: 'Daily Alarm',
+      inputType: 'time'
     },
     {
-      'name': 'groupedField1',
-      'label': 'Grouped Field 1',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField1',
+      label: 'Grouped Field 1',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField2',
-      'label': 'Grouped Field 2',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField2',
+      label: 'Grouped Field 2',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField3',
-      'label': 'Grouped Field 3',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField3',
+      label: 'Grouped Field 3',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField4',
-      'label': 'Grouped Field 4',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField4',
+      label: 'Grouped Field 4',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/query-builder/max-height.vue b/examples/sites/demos/pc/app/query-builder/max-height.vue
index a39e35fce..43eb0b220 100644
--- a/examples/sites/demos/pc/app/query-builder/max-height.vue
+++ b/examples/sites/demos/pc/app/query-builder/max-height.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { QueryBuilder } from '@opentiny/vue'
+import { TinyQueryBuilder } from '@opentiny/vue'
 import { random } from '@opentiny/vue-renderless/common/string'
 
 export default {
   components: {
-    TinyQueryBuilder: QueryBuilder
+    TinyQueryBuilder
   },
   data() {
     return {
@@ -129,1233 +129,1233 @@ const config = {
   showLockButtons: false,
   combinators: [
     {
-      'name': 'and',
-      'label': '且'
+      name: 'and',
+      label: '且'
     },
     {
-      'name': 'or',
-      'label': '或'
+      name: 'or',
+      label: '或'
     }
   ],
   fields: [
     {
-      'name': 'firstName',
-      'label': 'First Name',
-      'placeholder': '请输入',
+      name: 'firstName',
+      label: 'First Name',
+      placeholder: '请输入',
       validator: (r) => !!r.value
     },
     {
-      'name': 'lastName',
-      'label': 'Last Name',
-      'placeholder': 'Enter last name',
-      'defaultOperator': 'beginsWith',
+      name: 'lastName',
+      label: 'Last Name',
+      placeholder: 'Enter last name',
+      defaultOperator: 'beginsWith',
       validator: (r) => !!r.value
     },
     {
-      'name': 'age',
-      'label': 'Age',
-      'inputType': 'number',
+      name: 'age',
+      label: 'Age',
+      inputType: 'number',
       validator: (r) => !!r.value
     },
     {
-      'name': 'isMusician',
-      'label': 'Is a musician',
-      'valueEditorType': 'checkbox',
-      'operators': [
+      name: 'isMusician',
+      label: 'Is a musician',
+      valueEditorType: 'checkbox',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         }
       ],
-      'defaultValue': false,
+      defaultValue: false,
       validator: (r) => !!r.value
     },
     {
-      'name': 'instrument',
-      'label': 'Primary instrument',
-      'valueEditorType': 'select',
-      'values': [
+      name: 'instrument',
+      label: 'Primary instrument',
+      valueEditorType: 'select',
+      values: [
         {
-          'label': 'Percussion instruments',
-          'options': [
+          label: 'Percussion instruments',
+          options: [
             {
-              'name': 'Clapstick',
-              'label': 'Clapstick'
+              name: 'Clapstick',
+              label: 'Clapstick'
             },
             {
-              'name': 'Cowbell',
-              'label': 'Cowbell'
+              name: 'Cowbell',
+              label: 'Cowbell'
             },
             {
-              'name': 'Cymbal',
-              'label': 'Cymbal'
+              name: 'Cymbal',
+              label: 'Cymbal'
             },
             {
-              'name': 'Gong',
-              'label': 'Gong'
+              name: 'Gong',
+              label: 'Gong'
             },
             {
-              'name': 'Maraca',
-              'label': 'Maraca'
+              name: 'Maraca',
+              label: 'Maraca'
             },
             {
-              'name': 'Marimba',
-              'label': 'Marimba'
+              name: 'Marimba',
+              label: 'Marimba'
             },
             {
-              'name': 'More cowbell',
-              'label': 'More cowbell'
+              name: 'More cowbell',
+              label: 'More cowbell'
             },
             {
-              'name': 'Spoon',
-              'label': 'Spoon'
+              name: 'Spoon',
+              label: 'Spoon'
             },
             {
-              'name': 'Steelpan',
-              'label': 'Steelpan'
+              name: 'Steelpan',
+              label: 'Steelpan'
             },
             {
-              'name': 'Tambourine',
-              'label': 'Tambourine'
+              name: 'Tambourine',
+              label: 'Tambourine'
             },
             {
-              'name': 'Triangle',
-              'label': 'Triangle'
+              name: 'Triangle',
+              label: 'Triangle'
             },
             {
-              'name': 'Vibraphone',
-              'label': 'Vibraphone'
+              name: 'Vibraphone',
+              label: 'Vibraphone'
             },
             {
-              'name': 'Washboard',
-              'label': 'Washboard'
+              name: 'Washboard',
+              label: 'Washboard'
             },
             {
-              'name': 'Wood block',
-              'label': 'Wood block'
+              name: 'Wood block',
+              label: 'Wood block'
             },
             {
-              'name': 'Wooden fish',
-              'label': 'Wooden fish'
+              name: 'Wooden fish',
+              label: 'Wooden fish'
             },
             {
-              'name': 'Xylophone',
-              'label': 'Xylophone'
+              name: 'Xylophone',
+              label: 'Xylophone'
             }
           ]
         },
         {
-          'label': 'Membranophones',
-          'options': [
+          label: 'Membranophones',
+          options: [
             {
-              'name': 'Barrel drum',
-              'label': 'Barrel drum'
+              name: 'Barrel drum',
+              label: 'Barrel drum'
             },
             {
-              'name': 'Bass drum',
-              'label': 'Bass drum'
+              name: 'Bass drum',
+              label: 'Bass drum'
             },
             {
-              'name': 'Bongo drums',
-              'label': 'Bongo drums'
+              name: 'Bongo drums',
+              label: 'Bongo drums'
             },
             {
-              'name': 'Conga',
-              'label': 'Conga'
+              name: 'Conga',
+              label: 'Conga'
             },
             {
-              'name': 'Drum',
-              'label': 'Drum'
+              name: 'Drum',
+              label: 'Drum'
             },
             {
-              'name': 'Drum kit',
-              'label': 'Drum kit'
+              name: 'Drum kit',
+              label: 'Drum kit'
             },
             {
-              'name': "Jew's harp",
-              'label': "Jew's harp"
+              name: "Jew's harp",
+              label: "Jew's harp"
             },
             {
-              'name': 'Octaban',
-              'label': 'Octaban'
+              name: 'Octaban',
+              label: 'Octaban'
             },
             {
-              'name': 'Samphor',
-              'label': 'Samphor'
+              name: 'Samphor',
+              label: 'Samphor'
             },
             {
-              'name': 'Snare drum',
-              'label': 'Snare drum'
+              name: 'Snare drum',
+              label: 'Snare drum'
             },
             {
-              'name': 'Timpani',
-              'label': 'Timpani'
+              name: 'Timpani',
+              label: 'Timpani'
             },
             {
-              'name': 'Tom-tom',
-              'label': 'Tom-tom'
+              name: 'Tom-tom',
+              label: 'Tom-tom'
             }
           ]
         },
         {
-          'label': 'Wind instruments',
-          'options': [
+          label: 'Wind instruments',
+          options: [
             {
-              'name': 'Accordion',
-              'label': 'Accordion'
+              name: 'Accordion',
+              label: 'Accordion'
             },
             {
-              'name': 'Air horn',
-              'label': 'Air horn'
+              name: 'Air horn',
+              label: 'Air horn'
             },
             {
-              'name': 'Bagpipe',
-              'label': 'Bagpipe'
+              name: 'Bagpipe',
+              label: 'Bagpipe'
             },
             {
-              'name': 'Baritone horn',
-              'label': 'Baritone horn'
+              name: 'Baritone horn',
+              label: 'Baritone horn'
             },
             {
-              'name': 'Bassoon',
-              'label': 'Bassoon'
+              name: 'Bassoon',
+              label: 'Bassoon'
             },
             {
-              'name': 'Bazooka',
-              'label': 'Bazooka'
+              name: 'Bazooka',
+              label: 'Bazooka'
             },
             {
-              'name': 'Beatboxing',
-              'label': 'Beatboxing'
+              name: 'Beatboxing',
+              label: 'Beatboxing'
             },
             {
-              'name': 'Blown bottle',
-              'label': 'Blown bottle'
+              name: 'Blown bottle',
+              label: 'Blown bottle'
             },
             {
-              'name': 'Bugle',
-              'label': 'Bugle'
+              name: 'Bugle',
+              label: 'Bugle'
             },
             {
-              'name': 'Clarinet',
-              'label': 'Clarinet'
+              name: 'Clarinet',
+              label: 'Clarinet'
             },
             {
-              'name': 'Conch',
-              'label': 'Conch'
+              name: 'Conch',
+              label: 'Conch'
             },
             {
-              'name': 'Cornet',
-              'label': 'Cornet'
+              name: 'Cornet',
+              label: 'Cornet'
             },
             {
-              'name': 'Didgeridoo',
-              'label': 'Didgeridoo'
+              name: 'Didgeridoo',
+              label: 'Didgeridoo'
             },
             {
-              'name': 'Double bell euphonium',
-              'label': 'Double bell euphonium'
+              name: 'Double bell euphonium',
+              label: 'Double bell euphonium'
             },
             {
-              'name': 'Doulophone',
-              'label': 'Doulophone'
+              name: 'Doulophone',
+              label: 'Doulophone'
             },
             {
-              'name': 'English horn',
-              'label': 'English horn'
+              name: 'English horn',
+              label: 'English horn'
             },
             {
-              'name': 'Euphonium',
-              'label': 'Euphonium'
+              name: 'Euphonium',
+              label: 'Euphonium'
             },
             {
-              'name': 'Flugelhorn',
-              'label': 'Flugelhorn'
+              name: 'Flugelhorn',
+              label: 'Flugelhorn'
             },
             {
-              'name': 'Flute',
-              'label': 'Flute'
+              name: 'Flute',
+              label: 'Flute'
             },
             {
-              'name': 'French horn',
-              'label': 'French horn'
+              name: 'French horn',
+              label: 'French horn'
             },
             {
-              'name': 'Harmonica',
-              'label': 'Harmonica'
+              name: 'Harmonica',
+              label: 'Harmonica'
             },
             {
-              'name': 'Irish flute',
-              'label': 'Irish flute'
+              name: 'Irish flute',
+              label: 'Irish flute'
             },
             {
-              'name': 'Jug',
-              'label': 'Jug'
+              name: 'Jug',
+              label: 'Jug'
             },
             {
-              'name': 'Kazoo',
-              'label': 'Kazoo'
+              name: 'Kazoo',
+              label: 'Kazoo'
             },
             {
-              'name': 'Melodeon',
-              'label': 'Melodeon'
+              name: 'Melodeon',
+              label: 'Melodeon'
             },
             {
-              'name': 'Mezzo-soprano',
-              'label': 'Mezzo-soprano'
+              name: 'Mezzo-soprano',
+              label: 'Mezzo-soprano'
             },
             {
-              'name': 'Oboe',
-              'label': 'Oboe'
+              name: 'Oboe',
+              label: 'Oboe'
             },
             {
-              'name': 'Ocarina',
-              'label': 'Ocarina'
+              name: 'Ocarina',
+              label: 'Ocarina'
             },
             {
-              'name': 'Pan flute',
-              'label': 'Pan flute'
+              name: 'Pan flute',
+              label: 'Pan flute'
             },
             {
-              'name': 'Piccolo',
-              'label': 'Piccolo'
+              name: 'Piccolo',
+              label: 'Piccolo'
             },
             {
-              'name': 'Pipe organ',
-              'label': 'Pipe organ'
+              name: 'Pipe organ',
+              label: 'Pipe organ'
             },
             {
-              'name': 'Recorder',
-              'label': 'Recorder'
+              name: 'Recorder',
+              label: 'Recorder'
             },
             {
-              'name': 'Saxophone',
-              'label': 'Saxophone'
+              name: 'Saxophone',
+              label: 'Saxophone'
             },
             {
-              'name': 'Slide whistle',
-              'label': 'Slide whistle'
+              name: 'Slide whistle',
+              label: 'Slide whistle'
             },
             {
-              'name': 'Sousaphone',
-              'label': 'Sousaphone'
+              name: 'Sousaphone',
+              label: 'Sousaphone'
             },
             {
-              'name': 'Trombone',
-              'label': 'Trombone'
+              name: 'Trombone',
+              label: 'Trombone'
             },
             {
-              'name': 'Trumpet',
-              'label': 'Trumpet'
+              name: 'Trumpet',
+              label: 'Trumpet'
             },
             {
-              'name': 'Tuba',
-              'label': 'Tuba'
+              name: 'Tuba',
+              label: 'Tuba'
             },
             {
-              'name': 'Whistle',
-              'label': 'Whistle'
+              name: 'Whistle',
+              label: 'Whistle'
             }
           ]
         },
         {
-          'label': 'Stringed instruments',
-          'options': [
+          label: 'Stringed instruments',
+          options: [
             {
-              'name': 'Aeolian harp',
-              'label': 'Aeolian harp'
+              name: 'Aeolian harp',
+              label: 'Aeolian harp'
             },
             {
-              'name': 'Bandolin',
-              'label': 'Bandolin'
+              name: 'Bandolin',
+              label: 'Bandolin'
             },
             {
-              'name': 'Banjo ukulele',
-              'label': 'Banjo ukulele'
+              name: 'Banjo ukulele',
+              label: 'Banjo ukulele'
             },
             {
-              'name': 'Cello',
-              'label': 'Cello'
+              name: 'Cello',
+              label: 'Cello'
             },
             {
-              'name': 'Chapman stick',
-              'label': 'Chapman stick'
+              name: 'Chapman stick',
+              label: 'Chapman stick'
             },
             {
-              'name': 'Clavichord',
-              'label': 'Clavichord'
+              name: 'Clavichord',
+              label: 'Clavichord'
             },
             {
-              'name': 'Clavinet',
-              'label': 'Clavinet'
+              name: 'Clavinet',
+              label: 'Clavinet'
             },
             {
-              'name': 'Double bass',
-              'label': 'Double bass'
+              name: 'Double bass',
+              label: 'Double bass'
             },
             {
-              'name': 'Dulcimer',
-              'label': 'Dulcimer'
+              name: 'Dulcimer',
+              label: 'Dulcimer'
             },
             {
-              'name': 'Fiddle',
-              'label': 'Fiddle'
+              name: 'Fiddle',
+              label: 'Fiddle'
             },
             {
-              'name': 'Guitar',
-              'label': 'Guitar'
+              name: 'Guitar',
+              label: 'Guitar'
             },
             {
-              'name': 'Hammered dulcimer',
-              'label': 'Hammered dulcimer'
+              name: 'Hammered dulcimer',
+              label: 'Hammered dulcimer'
             },
             {
-              'name': 'Harp',
-              'label': 'Harp'
+              name: 'Harp',
+              label: 'Harp'
             },
             {
-              'name': 'Harpsichord',
-              'label': 'Harpsichord'
+              name: 'Harpsichord',
+              label: 'Harpsichord'
             },
             {
-              'name': 'Lute',
-              'label': 'Lute'
+              name: 'Lute',
+              label: 'Lute'
             },
             {
-              'name': 'Lyre',
-              'label': 'Lyre'
+              name: 'Lyre',
+              label: 'Lyre'
             },
             {
-              'name': 'Maguhu',
-              'label': 'Maguhu'
+              name: 'Maguhu',
+              label: 'Maguhu'
             },
             {
-              'name': 'Mandola',
-              'label': 'Mandola'
+              name: 'Mandola',
+              label: 'Mandola'
             },
             {
-              'name': 'Mandolin',
-              'label': 'Mandolin'
+              name: 'Mandolin',
+              label: 'Mandolin'
             },
             {
-              'name': 'Octobass',
-              'label': 'Octobass'
+              name: 'Octobass',
+              label: 'Octobass'
             },
             {
-              'name': 'Piano',
-              'label': 'Piano'
+              name: 'Piano',
+              label: 'Piano'
             },
             {
-              'name': 'Sitar',
-              'label': 'Sitar'
+              name: 'Sitar',
+              label: 'Sitar'
             },
             {
-              'name': 'Ukulele',
-              'label': 'Ukulele'
+              name: 'Ukulele',
+              label: 'Ukulele'
             },
             {
-              'name': 'Viol',
-              'label': 'Viol'
+              name: 'Viol',
+              label: 'Viol'
             },
             {
-              'name': 'Violin',
-              'label': 'Violin'
+              name: 'Violin',
+              label: 'Violin'
             },
             {
-              'name': 'Washtub bass',
-              'label': 'Washtub bass'
+              name: 'Washtub bass',
+              label: 'Washtub bass'
             }
           ]
         },
         {
-          'label': 'Electronic instruments',
-          'options': [
+          label: 'Electronic instruments',
+          options: [
             {
-              'name': 'AlphaSphere',
-              'label': 'AlphaSphere'
+              name: 'AlphaSphere',
+              label: 'AlphaSphere'
             },
             {
-              'name': 'Audiocubes',
-              'label': 'Audiocubes'
+              name: 'Audiocubes',
+              label: 'Audiocubes'
             },
             {
-              'name': 'Bass pedals',
-              'label': 'Bass pedals'
+              name: 'Bass pedals',
+              label: 'Bass pedals'
             },
             {
-              'name': 'Continuum Fingerboard',
-              'label': 'Continuum Fingerboard'
+              name: 'Continuum Fingerboard',
+              label: 'Continuum Fingerboard'
             },
             {
-              'name': 'Croix Sonore',
-              'label': 'Croix Sonore'
+              name: 'Croix Sonore',
+              label: 'Croix Sonore'
             },
             {
-              'name': "Denis d'or",
-              'label': "Denis d'or"
+              name: "Denis d'or",
+              label: "Denis d'or"
             },
             {
-              'name': 'Dubreq stylophone',
-              'label': 'Dubreq stylophone'
+              name: 'Dubreq stylophone',
+              label: 'Dubreq stylophone'
             },
             {
-              'name': 'Drum machine',
-              'label': 'Drum machine'
+              name: 'Drum machine',
+              label: 'Drum machine'
             },
             {
-              'name': 'Eigenharp',
-              'label': 'Eigenharp'
+              name: 'Eigenharp',
+              label: 'Eigenharp'
             },
             {
-              'name': 'Electric guitar',
-              'label': 'Electric guitar'
+              name: 'Electric guitar',
+              label: 'Electric guitar'
             },
             {
-              'name': 'Electronic keyboard',
-              'label': 'Electronic keyboard'
+              name: 'Electronic keyboard',
+              label: 'Electronic keyboard'
             },
             {
-              'name': 'Electronic organ',
-              'label': 'Electronic organ'
+              name: 'Electronic organ',
+              label: 'Electronic organ'
             },
             {
-              'name': 'EWI',
-              'label': 'EWI'
+              name: 'EWI',
+              label: 'EWI'
             },
             {
-              'name': 'Fingerboard synthesizer',
-              'label': 'Fingerboard synthesizer'
+              name: 'Fingerboard synthesizer',
+              label: 'Fingerboard synthesizer'
             },
             {
-              'name': 'Hammond organ',
-              'label': 'Hammond organ'
+              name: 'Hammond organ',
+              label: 'Hammond organ'
             },
             {
-              'name': 'Keyboard',
-              'label': 'Keyboard'
+              name: 'Keyboard',
+              label: 'Keyboard'
             },
             {
-              'name': 'Keytar',
-              'label': 'Keytar'
+              name: 'Keytar',
+              label: 'Keytar'
             },
             {
-              'name': 'Kraakdoos',
-              'label': 'Kraakdoos'
+              name: 'Kraakdoos',
+              label: 'Kraakdoos'
             },
             {
-              'name': 'Laser harp',
-              'label': 'Laser harp'
+              name: 'Laser harp',
+              label: 'Laser harp'
             },
             {
-              'name': 'Mellotron',
-              'label': 'Mellotron'
+              name: 'Mellotron',
+              label: 'Mellotron'
             },
             {
-              'name': 'MIDI keyboard',
-              'label': 'MIDI keyboard'
+              name: 'MIDI keyboard',
+              label: 'MIDI keyboard'
             },
             {
-              'name': 'Omnichord',
-              'label': 'Omnichord'
+              name: 'Omnichord',
+              label: 'Omnichord'
             },
             {
-              'name': 'Ondes Martenot',
-              'label': 'Ondes Martenot'
+              name: 'Ondes Martenot',
+              label: 'Ondes Martenot'
             },
             {
-              'name': 'Otamatone',
-              'label': 'Otamatone'
+              name: 'Otamatone',
+              label: 'Otamatone'
             },
             {
-              'name': 'Sampler',
-              'label': 'Sampler'
+              name: 'Sampler',
+              label: 'Sampler'
             },
             {
-              'name': 'Seaboard music instrument',
-              'label': 'Seaboard music instrument'
+              name: 'Seaboard music instrument',
+              label: 'Seaboard music instrument'
             },
             {
-              'name': 'Skoog',
-              'label': 'Skoog'
+              name: 'Skoog',
+              label: 'Skoog'
             },
             {
-              'name': 'Synclavier',
-              'label': 'Synclavier'
+              name: 'Synclavier',
+              label: 'Synclavier'
             },
             {
-              'name': 'Synthesizer',
-              'label': 'Synthesizer'
+              name: 'Synthesizer',
+              label: 'Synthesizer'
             },
             {
-              'name': 'Teleharmonium',
-              'label': 'Teleharmonium'
+              name: 'Teleharmonium',
+              label: 'Teleharmonium'
             },
             {
-              'name': 'Tenori-on',
-              'label': 'Tenori-on'
+              name: 'Tenori-on',
+              label: 'Tenori-on'
             },
             {
-              'name': 'Theremin',
-              'label': 'Theremin'
+              name: 'Theremin',
+              label: 'Theremin'
             },
             {
-              'name': 'trautonium',
-              'label': 'trautonium'
+              name: 'trautonium',
+              label: 'trautonium'
             },
             {
-              'name': 'Turntablism',
-              'label': 'Turntablism'
+              name: 'Turntablism',
+              label: 'Turntablism'
             },
             {
-              'name': 'Turntable',
-              'label': 'Turntable'
+              name: 'Turntable',
+              label: 'Turntable'
             }
           ]
         }
       ],
-      'defaultValue': 'Cowbell',
-      'operators': [
+      defaultValue: 'Cowbell',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         },
         {
-          'name': 'in',
-          'label': 'in'
+          name: 'in',
+          label: 'in'
         }
       ]
     },
     {
-      'name': 'alsoPlays',
-      'label': 'Also plays',
-      'valueEditorType': 'multiselect',
-      'values': [
+      name: 'alsoPlays',
+      label: 'Also plays',
+      valueEditorType: 'multiselect',
+      values: [
         {
-          'label': 'Percussion instruments',
-          'options': [
+          label: 'Percussion instruments',
+          options: [
             {
-              'name': 'Clapstick',
-              'label': 'Clapstick'
+              name: 'Clapstick',
+              label: 'Clapstick'
             },
             {
-              'name': 'Cowbell',
-              'label': 'Cowbell'
+              name: 'Cowbell',
+              label: 'Cowbell'
             },
             {
-              'name': 'Cymbal',
-              'label': 'Cymbal'
+              name: 'Cymbal',
+              label: 'Cymbal'
             },
             {
-              'name': 'Gong',
-              'label': 'Gong'
+              name: 'Gong',
+              label: 'Gong'
             },
             {
-              'name': 'Maraca',
-              'label': 'Maraca'
+              name: 'Maraca',
+              label: 'Maraca'
             },
             {
-              'name': 'Marimba',
-              'label': 'Marimba'
+              name: 'Marimba',
+              label: 'Marimba'
             },
             {
-              'name': 'More cowbell',
-              'label': 'More cowbell'
+              name: 'More cowbell',
+              label: 'More cowbell'
             },
             {
-              'name': 'Spoon',
-              'label': 'Spoon'
+              name: 'Spoon',
+              label: 'Spoon'
             },
             {
-              'name': 'Steelpan',
-              'label': 'Steelpan'
+              name: 'Steelpan',
+              label: 'Steelpan'
             },
             {
-              'name': 'Tambourine',
-              'label': 'Tambourine'
+              name: 'Tambourine',
+              label: 'Tambourine'
             },
             {
-              'name': 'Triangle',
-              'label': 'Triangle'
+              name: 'Triangle',
+              label: 'Triangle'
             },
             {
-              'name': 'Vibraphone',
-              'label': 'Vibraphone'
+              name: 'Vibraphone',
+              label: 'Vibraphone'
             },
             {
-              'name': 'Washboard',
-              'label': 'Washboard'
+              name: 'Washboard',
+              label: 'Washboard'
             },
             {
-              'name': 'Wood block',
-              'label': 'Wood block'
+              name: 'Wood block',
+              label: 'Wood block'
             },
             {
-              'name': 'Wooden fish',
-              'label': 'Wooden fish'
+              name: 'Wooden fish',
+              label: 'Wooden fish'
             },
             {
-              'name': 'Xylophone',
-              'label': 'Xylophone'
+              name: 'Xylophone',
+              label: 'Xylophone'
             }
           ]
         },
         {
-          'label': 'Membranophones',
-          'options': [
+          label: 'Membranophones',
+          options: [
             {
-              'name': 'Barrel drum',
-              'label': 'Barrel drum'
+              name: 'Barrel drum',
+              label: 'Barrel drum'
             },
             {
-              'name': 'Bass drum',
-              'label': 'Bass drum'
+              name: 'Bass drum',
+              label: 'Bass drum'
             },
             {
-              'name': 'Bongo drums',
-              'label': 'Bongo drums'
+              name: 'Bongo drums',
+              label: 'Bongo drums'
             },
             {
-              'name': 'Conga',
-              'label': 'Conga'
+              name: 'Conga',
+              label: 'Conga'
             },
             {
-              'name': 'Drum',
-              'label': 'Drum'
+              name: 'Drum',
+              label: 'Drum'
             },
             {
-              'name': 'Drum kit',
-              'label': 'Drum kit'
+              name: 'Drum kit',
+              label: 'Drum kit'
             },
             {
-              'name': "Jew's harp",
-              'label': "Jew's harp"
+              name: "Jew's harp",
+              label: "Jew's harp"
             },
             {
-              'name': 'Octaban',
-              'label': 'Octaban'
+              name: 'Octaban',
+              label: 'Octaban'
             },
             {
-              'name': 'Samphor',
-              'label': 'Samphor'
+              name: 'Samphor',
+              label: 'Samphor'
             },
             {
-              'name': 'Snare drum',
-              'label': 'Snare drum'
+              name: 'Snare drum',
+              label: 'Snare drum'
             },
             {
-              'name': 'Timpani',
-              'label': 'Timpani'
+              name: 'Timpani',
+              label: 'Timpani'
             },
             {
-              'name': 'Tom-tom',
-              'label': 'Tom-tom'
+              name: 'Tom-tom',
+              label: 'Tom-tom'
             }
           ]
         },
         {
-          'label': 'Wind instruments',
-          'options': [
+          label: 'Wind instruments',
+          options: [
             {
-              'name': 'Accordion',
-              'label': 'Accordion'
+              name: 'Accordion',
+              label: 'Accordion'
             },
             {
-              'name': 'Air horn',
-              'label': 'Air horn'
+              name: 'Air horn',
+              label: 'Air horn'
             },
             {
-              'name': 'Bagpipe',
-              'label': 'Bagpipe'
+              name: 'Bagpipe',
+              label: 'Bagpipe'
             },
             {
-              'name': 'Baritone horn',
-              'label': 'Baritone horn'
+              name: 'Baritone horn',
+              label: 'Baritone horn'
             },
             {
-              'name': 'Bassoon',
-              'label': 'Bassoon'
+              name: 'Bassoon',
+              label: 'Bassoon'
             },
             {
-              'name': 'Bazooka',
-              'label': 'Bazooka'
+              name: 'Bazooka',
+              label: 'Bazooka'
             },
             {
-              'name': 'Beatboxing',
-              'label': 'Beatboxing'
+              name: 'Beatboxing',
+              label: 'Beatboxing'
             },
             {
-              'name': 'Blown bottle',
-              'label': 'Blown bottle'
+              name: 'Blown bottle',
+              label: 'Blown bottle'
             },
             {
-              'name': 'Bugle',
-              'label': 'Bugle'
+              name: 'Bugle',
+              label: 'Bugle'
             },
             {
-              'name': 'Clarinet',
-              'label': 'Clarinet'
+              name: 'Clarinet',
+              label: 'Clarinet'
             },
             {
-              'name': 'Conch',
-              'label': 'Conch'
+              name: 'Conch',
+              label: 'Conch'
             },
             {
-              'name': 'Cornet',
-              'label': 'Cornet'
+              name: 'Cornet',
+              label: 'Cornet'
             },
             {
-              'name': 'Didgeridoo',
-              'label': 'Didgeridoo'
+              name: 'Didgeridoo',
+              label: 'Didgeridoo'
             },
             {
-              'name': 'Double bell euphonium',
-              'label': 'Double bell euphonium'
+              name: 'Double bell euphonium',
+              label: 'Double bell euphonium'
             },
             {
-              'name': 'Doulophone',
-              'label': 'Doulophone'
+              name: 'Doulophone',
+              label: 'Doulophone'
             },
             {
-              'name': 'English horn',
-              'label': 'English horn'
+              name: 'English horn',
+              label: 'English horn'
             },
             {
-              'name': 'Euphonium',
-              'label': 'Euphonium'
+              name: 'Euphonium',
+              label: 'Euphonium'
             },
             {
-              'name': 'Flugelhorn',
-              'label': 'Flugelhorn'
+              name: 'Flugelhorn',
+              label: 'Flugelhorn'
             },
             {
-              'name': 'Flute',
-              'label': 'Flute'
+              name: 'Flute',
+              label: 'Flute'
             },
             {
-              'name': 'French horn',
-              'label': 'French horn'
+              name: 'French horn',
+              label: 'French horn'
             },
             {
-              'name': 'Harmonica',
-              'label': 'Harmonica'
+              name: 'Harmonica',
+              label: 'Harmonica'
             },
             {
-              'name': 'Irish flute',
-              'label': 'Irish flute'
+              name: 'Irish flute',
+              label: 'Irish flute'
             },
             {
-              'name': 'Jug',
-              'label': 'Jug'
+              name: 'Jug',
+              label: 'Jug'
             },
             {
-              'name': 'Kazoo',
-              'label': 'Kazoo'
+              name: 'Kazoo',
+              label: 'Kazoo'
             },
             {
-              'name': 'Melodeon',
-              'label': 'Melodeon'
+              name: 'Melodeon',
+              label: 'Melodeon'
             },
             {
-              'name': 'Mezzo-soprano',
-              'label': 'Mezzo-soprano'
+              name: 'Mezzo-soprano',
+              label: 'Mezzo-soprano'
             },
             {
-              'name': 'Oboe',
-              'label': 'Oboe'
+              name: 'Oboe',
+              label: 'Oboe'
             },
             {
-              'name': 'Ocarina',
-              'label': 'Ocarina'
+              name: 'Ocarina',
+              label: 'Ocarina'
             },
             {
-              'name': 'Pan flute',
-              'label': 'Pan flute'
+              name: 'Pan flute',
+              label: 'Pan flute'
             },
             {
-              'name': 'Piccolo',
-              'label': 'Piccolo'
+              name: 'Piccolo',
+              label: 'Piccolo'
             },
             {
-              'name': 'Pipe organ',
-              'label': 'Pipe organ'
+              name: 'Pipe organ',
+              label: 'Pipe organ'
             },
             {
-              'name': 'Recorder',
-              'label': 'Recorder'
+              name: 'Recorder',
+              label: 'Recorder'
             },
             {
-              'name': 'Saxophone',
-              'label': 'Saxophone'
+              name: 'Saxophone',
+              label: 'Saxophone'
             },
             {
-              'name': 'Slide whistle',
-              'label': 'Slide whistle'
+              name: 'Slide whistle',
+              label: 'Slide whistle'
             },
             {
-              'name': 'Sousaphone',
-              'label': 'Sousaphone'
+              name: 'Sousaphone',
+              label: 'Sousaphone'
             },
             {
-              'name': 'Trombone',
-              'label': 'Trombone'
+              name: 'Trombone',
+              label: 'Trombone'
             },
             {
-              'name': 'Trumpet',
-              'label': 'Trumpet'
+              name: 'Trumpet',
+              label: 'Trumpet'
             },
             {
-              'name': 'Tuba',
-              'label': 'Tuba'
+              name: 'Tuba',
+              label: 'Tuba'
             },
             {
-              'name': 'Whistle',
-              'label': 'Whistle'
+              name: 'Whistle',
+              label: 'Whistle'
             }
           ]
         },
         {
-          'label': 'Stringed instruments',
-          'options': [
+          label: 'Stringed instruments',
+          options: [
             {
-              'name': 'Aeolian harp',
-              'label': 'Aeolian harp'
+              name: 'Aeolian harp',
+              label: 'Aeolian harp'
             },
             {
-              'name': 'Bandolin',
-              'label': 'Bandolin'
+              name: 'Bandolin',
+              label: 'Bandolin'
             },
             {
-              'name': 'Banjo ukulele',
-              'label': 'Banjo ukulele'
+              name: 'Banjo ukulele',
+              label: 'Banjo ukulele'
             },
             {
-              'name': 'Cello',
-              'label': 'Cello'
+              name: 'Cello',
+              label: 'Cello'
             },
             {
-              'name': 'Chapman stick',
-              'label': 'Chapman stick'
+              name: 'Chapman stick',
+              label: 'Chapman stick'
             },
             {
-              'name': 'Clavichord',
-              'label': 'Clavichord'
+              name: 'Clavichord',
+              label: 'Clavichord'
             },
             {
-              'name': 'Clavinet',
-              'label': 'Clavinet'
+              name: 'Clavinet',
+              label: 'Clavinet'
             },
             {
-              'name': 'Double bass',
-              'label': 'Double bass'
+              name: 'Double bass',
+              label: 'Double bass'
             },
             {
-              'name': 'Dulcimer',
-              'label': 'Dulcimer'
+              name: 'Dulcimer',
+              label: 'Dulcimer'
             },
             {
-              'name': 'Fiddle',
-              'label': 'Fiddle'
+              name: 'Fiddle',
+              label: 'Fiddle'
             },
             {
-              'name': 'Guitar',
-              'label': 'Guitar'
+              name: 'Guitar',
+              label: 'Guitar'
             },
             {
-              'name': 'Hammered dulcimer',
-              'label': 'Hammered dulcimer'
+              name: 'Hammered dulcimer',
+              label: 'Hammered dulcimer'
             },
             {
-              'name': 'Harp',
-              'label': 'Harp'
+              name: 'Harp',
+              label: 'Harp'
             },
             {
-              'name': 'Harpsichord',
-              'label': 'Harpsichord'
+              name: 'Harpsichord',
+              label: 'Harpsichord'
             },
             {
-              'name': 'Lute',
-              'label': 'Lute'
+              name: 'Lute',
+              label: 'Lute'
             },
             {
-              'name': 'Lyre',
-              'label': 'Lyre'
+              name: 'Lyre',
+              label: 'Lyre'
             },
             {
-              'name': 'Maguhu',
-              'label': 'Maguhu'
+              name: 'Maguhu',
+              label: 'Maguhu'
             },
             {
-              'name': 'Mandola',
-              'label': 'Mandola'
+              name: 'Mandola',
+              label: 'Mandola'
             },
             {
-              'name': 'Mandolin',
-              'label': 'Mandolin'
+              name: 'Mandolin',
+              label: 'Mandolin'
             },
             {
-              'name': 'Octobass',
-              'label': 'Octobass'
+              name: 'Octobass',
+              label: 'Octobass'
             },
             {
-              'name': 'Piano',
-              'label': 'Piano'
+              name: 'Piano',
+              label: 'Piano'
             },
             {
-              'name': 'Sitar',
-              'label': 'Sitar'
+              name: 'Sitar',
+              label: 'Sitar'
             },
             {
-              'name': 'Ukulele',
-              'label': 'Ukulele'
+              name: 'Ukulele',
+              label: 'Ukulele'
             },
             {
-              'name': 'Viol',
-              'label': 'Viol'
+              name: 'Viol',
+              label: 'Viol'
             },
             {
-              'name': 'Violin',
-              'label': 'Violin'
+              name: 'Violin',
+              label: 'Violin'
             },
             {
-              'name': 'Washtub bass',
-              'label': 'Washtub bass'
+              name: 'Washtub bass',
+              label: 'Washtub bass'
             }
           ]
         },
         {
-          'label': 'Electronic instruments',
-          'options': [
+          label: 'Electronic instruments',
+          options: [
             {
-              'name': 'AlphaSphere',
-              'label': 'AlphaSphere'
+              name: 'AlphaSphere',
+              label: 'AlphaSphere'
             },
             {
-              'name': 'Audiocubes',
-              'label': 'Audiocubes'
+              name: 'Audiocubes',
+              label: 'Audiocubes'
             },
             {
-              'name': 'Bass pedals',
-              'label': 'Bass pedals'
+              name: 'Bass pedals',
+              label: 'Bass pedals'
             },
             {
-              'name': 'Continuum Fingerboard',
-              'label': 'Continuum Fingerboard'
+              name: 'Continuum Fingerboard',
+              label: 'Continuum Fingerboard'
             },
             {
-              'name': 'Croix Sonore',
-              'label': 'Croix Sonore'
+              name: 'Croix Sonore',
+              label: 'Croix Sonore'
             },
             {
-              'name': "Denis d'or",
-              'label': "Denis d'or"
+              name: "Denis d'or",
+              label: "Denis d'or"
             },
             {
-              'name': 'Dubreq stylophone',
-              'label': 'Dubreq stylophone'
+              name: 'Dubreq stylophone',
+              label: 'Dubreq stylophone'
             },
             {
-              'name': 'Drum machine',
-              'label': 'Drum machine'
+              name: 'Drum machine',
+              label: 'Drum machine'
             },
             {
-              'name': 'Eigenharp',
-              'label': 'Eigenharp'
+              name: 'Eigenharp',
+              label: 'Eigenharp'
             },
             {
-              'name': 'Electric guitar',
-              'label': 'Electric guitar'
+              name: 'Electric guitar',
+              label: 'Electric guitar'
             },
             {
-              'name': 'Electronic keyboard',
-              'label': 'Electronic keyboard'
+              name: 'Electronic keyboard',
+              label: 'Electronic keyboard'
             },
             {
-              'name': 'Electronic organ',
-              'label': 'Electronic organ'
+              name: 'Electronic organ',
+              label: 'Electronic organ'
             },
             {
-              'name': 'EWI',
-              'label': 'EWI'
+              name: 'EWI',
+              label: 'EWI'
             },
             {
-              'name': 'Fingerboard synthesizer',
-              'label': 'Fingerboard synthesizer'
+              name: 'Fingerboard synthesizer',
+              label: 'Fingerboard synthesizer'
             },
             {
-              'name': 'Hammond organ',
-              'label': 'Hammond organ'
+              name: 'Hammond organ',
+              label: 'Hammond organ'
             },
             {
-              'name': 'Keyboard',
-              'label': 'Keyboard'
+              name: 'Keyboard',
+              label: 'Keyboard'
             },
             {
-              'name': 'Keytar',
-              'label': 'Keytar'
+              name: 'Keytar',
+              label: 'Keytar'
             },
             {
-              'name': 'Kraakdoos',
-              'label': 'Kraakdoos'
+              name: 'Kraakdoos',
+              label: 'Kraakdoos'
             },
             {
-              'name': 'Laser harp',
-              'label': 'Laser harp'
+              name: 'Laser harp',
+              label: 'Laser harp'
             },
             {
-              'name': 'Mellotron',
-              'label': 'Mellotron'
+              name: 'Mellotron',
+              label: 'Mellotron'
             },
             {
-              'name': 'MIDI keyboard',
-              'label': 'MIDI keyboard'
+              name: 'MIDI keyboard',
+              label: 'MIDI keyboard'
             },
             {
-              'name': 'Omnichord',
-              'label': 'Omnichord'
+              name: 'Omnichord',
+              label: 'Omnichord'
             },
             {
-              'name': 'Ondes Martenot',
-              'label': 'Ondes Martenot'
+              name: 'Ondes Martenot',
+              label: 'Ondes Martenot'
             },
             {
-              'name': 'Otamatone',
-              'label': 'Otamatone'
+              name: 'Otamatone',
+              label: 'Otamatone'
             },
             {
-              'name': 'Sampler',
-              'label': 'Sampler'
+              name: 'Sampler',
+              label: 'Sampler'
             },
             {
-              'name': 'Seaboard music instrument',
-              'label': 'Seaboard music instrument'
+              name: 'Seaboard music instrument',
+              label: 'Seaboard music instrument'
             },
             {
-              'name': 'Skoog',
-              'label': 'Skoog'
+              name: 'Skoog',
+              label: 'Skoog'
             },
             {
-              'name': 'Synclavier',
-              'label': 'Synclavier'
+              name: 'Synclavier',
+              label: 'Synclavier'
             },
             {
-              'name': 'Synthesizer',
-              'label': 'Synthesizer'
+              name: 'Synthesizer',
+              label: 'Synthesizer'
             },
             {
-              'name': 'Teleharmonium',
-              'label': 'Teleharmonium'
+              name: 'Teleharmonium',
+              label: 'Teleharmonium'
             },
             {
-              'name': 'Tenori-on',
-              'label': 'Tenori-on'
+              name: 'Tenori-on',
+              label: 'Tenori-on'
             },
             {
-              'name': 'Theremin',
-              'label': 'Theremin'
+              name: 'Theremin',
+              label: 'Theremin'
             },
             {
-              'name': 'trautonium',
-              'label': 'trautonium'
+              name: 'trautonium',
+              label: 'trautonium'
             },
             {
-              'name': 'Turntablism',
-              'label': 'Turntablism'
+              name: 'Turntablism',
+              label: 'Turntablism'
             },
             {
-              'name': 'Turntable',
-              'label': 'Turntable'
+              name: 'Turntable',
+              label: 'Turntable'
             }
           ]
         }
       ],
-      'defaultValue': 'More cowbell',
-      'operators': [
+      defaultValue: 'More cowbell',
+      operators: [
         {
-          'name': 'in',
-          'label': 'in'
+          name: 'in',
+          label: 'in'
         }
       ]
     },
     {
-      'name': 'gender',
-      'label': 'Gender',
-      'operators': [
+      name: 'gender',
+      label: 'Gender',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         }
       ],
-      'valueEditorType': 'radio',
-      'values': [
+      valueEditorType: 'radio',
+      values: [
         {
-          'name': 'M',
-          'label': 'Male'
+          name: 'M',
+          label: 'Male'
         },
         {
-          'name': 'F',
-          'label': 'Female'
+          name: 'F',
+          label: 'Female'
         },
         {
-          'name': 'O',
-          'label': 'Other'
+          name: 'O',
+          label: 'Other'
         }
       ]
     },
     {
-      'name': 'height',
-      'label': 'Height'
+      name: 'height',
+      label: 'Height'
     },
     {
-      'name': 'job',
-      'label': 'Job'
+      name: 'job',
+      label: 'Job'
     },
     {
-      'name': 'description',
-      'label': 'Description',
-      'valueEditorType': 'textarea'
+      name: 'description',
+      label: 'Description',
+      valueEditorType: 'textarea'
     },
     {
-      'name': 'birthdate',
-      'label': 'Birth Date',
-      'inputType': 'date'
+      name: 'birthdate',
+      label: 'Birth Date',
+      inputType: 'date'
     },
     {
-      'name': 'datetime',
-      'label': 'Show Time',
-      'inputType': 'datetime-local'
+      name: 'datetime',
+      label: 'Show Time',
+      inputType: 'datetime-local'
     },
     {
-      'name': 'alarm',
-      'label': 'Daily Alarm',
-      'inputType': 'time'
+      name: 'alarm',
+      label: 'Daily Alarm',
+      inputType: 'time'
     },
     {
-      'name': 'groupedField1',
-      'label': 'Grouped Field 1',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField1',
+      label: 'Grouped Field 1',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField2',
-      'label': 'Grouped Field 2',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField2',
+      label: 'Grouped Field 2',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField3',
-      'label': 'Grouped Field 3',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField3',
+      label: 'Grouped Field 3',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField4',
-      'label': 'Grouped Field 4',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField4',
+      label: 'Grouped Field 4',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/query-builder/sub-component-param.vue b/examples/sites/demos/pc/app/query-builder/sub-component-param.vue
index d1613559f..b3789b9ee 100644
--- a/examples/sites/demos/pc/app/query-builder/sub-component-param.vue
+++ b/examples/sites/demos/pc/app/query-builder/sub-component-param.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { QueryBuilder } from '@opentiny/vue'
+import { TinyQueryBuilder } from '@opentiny/vue'
 import { random } from '@opentiny/vue-renderless/common/string'
 
 export default {
   components: {
-    TinyQueryBuilder: QueryBuilder
+    TinyQueryBuilder
   },
   data() {
     return {
@@ -126,121 +126,121 @@ const config = {
   },
   combinators: [
     {
-      'name': 'and',
-      'label': '且'
+      name: 'and',
+      label: '且'
     },
     {
-      'name': 'or',
-      'label': '或'
+      name: 'or',
+      label: '或'
     }
   ],
   fields: [
     {
-      'name': 'user',
-      'label': 'User',
-      'placeholder': '请输入',
-      'children': [
+      name: 'user',
+      label: 'User',
+      placeholder: '请输入',
+      children: [
         {
-          'name': 'firstName',
-          'label': 'First Name',
-          'placeholder': '请输入',
+          name: 'firstName',
+          label: 'First Name',
+          placeholder: '请输入',
           validator: (r) => !!r.value
         },
         {
-          'name': 'user.lastName',
-          'label': 'Last Name',
-          'placeholder': 'Enter last name',
-          'defaultOperator': 'beginsWith',
+          name: 'user.lastName',
+          label: 'Last Name',
+          placeholder: 'Enter last name',
+          defaultOperator: 'beginsWith',
           validator: (r) => !!r.value
         }
       ]
     },
     {
-      'name': 'age',
-      'label': 'Age',
-      'inputType': 'number',
+      name: 'age',
+      label: 'Age',
+      inputType: 'number',
       validator: (r) => !!r.value
     },
     {
-      'name': 'gender',
-      'label': 'Gender',
-      'operators': [
+      name: 'gender',
+      label: 'Gender',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         }
       ],
-      'valueEditorType': 'radio',
-      'values': [
+      valueEditorType: 'radio',
+      values: [
         {
-          'name': 'M',
-          'label': 'Male'
+          name: 'M',
+          label: 'Male'
         },
         {
-          'name': 'F',
-          'label': 'Female'
+          name: 'F',
+          label: 'Female'
         },
         {
-          'name': 'O',
-          'label': 'Other'
+          name: 'O',
+          label: 'Other'
         }
       ]
     },
     {
-      'name': 'height',
-      'label': 'Height'
+      name: 'height',
+      label: 'Height'
     },
     {
-      'name': 'job',
-      'label': 'Job'
+      name: 'job',
+      label: 'Job'
     },
     {
-      'name': 'description',
-      'label': 'Description',
-      'valueEditorType': 'textarea'
+      name: 'description',
+      label: 'Description',
+      valueEditorType: 'textarea'
     },
     {
-      'name': 'birthdate',
-      'label': 'Birth Date',
-      'inputType': 'date'
+      name: 'birthdate',
+      label: 'Birth Date',
+      inputType: 'date'
     },
     {
-      'name': 'datetime',
-      'label': 'Show Time',
-      'inputType': 'datetime-local'
+      name: 'datetime',
+      label: 'Show Time',
+      inputType: 'datetime-local'
     },
     {
-      'name': 'alarm',
-      'label': 'Daily Alarm',
-      'inputType': 'time'
+      name: 'alarm',
+      label: 'Daily Alarm',
+      inputType: 'time'
     },
     {
-      'name': 'groupedField1',
-      'label': 'Grouped Field 1',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField1',
+      label: 'Grouped Field 1',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField2',
-      'label': 'Grouped Field 2',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField2',
+      label: 'Grouped Field 2',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField3',
-      'label': 'Grouped Field 3',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField3',
+      label: 'Grouped Field 3',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField4',
-      'label': 'Grouped Field 4',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField4',
+      label: 'Grouped Field 4',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/query-builder/tree-field.vue b/examples/sites/demos/pc/app/query-builder/tree-field.vue
index 146b87bfe..c27340f5d 100644
--- a/examples/sites/demos/pc/app/query-builder/tree-field.vue
+++ b/examples/sites/demos/pc/app/query-builder/tree-field.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { QueryBuilder } from '@opentiny/vue'
+import { TinyQueryBuilder } from '@opentiny/vue'
 import { random } from '@opentiny/vue-renderless/common/string'
 
 export default {
   components: {
-    TinyQueryBuilder: QueryBuilder
+    TinyQueryBuilder
   },
   data() {
     return {
@@ -104,121 +104,121 @@ const config = {
   showLockButtons: false,
   combinators: [
     {
-      'name': 'and',
-      'label': '且'
+      name: 'and',
+      label: '且'
     },
     {
-      'name': 'or',
-      'label': '或'
+      name: 'or',
+      label: '或'
     }
   ],
   fields: [
     {
-      'name': 'user',
-      'label': 'User',
-      'placeholder': '请输入',
-      'children': [
+      name: 'user',
+      label: 'User',
+      placeholder: '请输入',
+      children: [
         {
-          'name': 'firstName',
-          'label': 'First Name',
-          'placeholder': '请输入',
+          name: 'firstName',
+          label: 'First Name',
+          placeholder: '请输入',
           validator: (r) => !!r.value
         },
         {
-          'name': 'user.lastName',
-          'label': 'Last Name',
-          'placeholder': 'Enter last name',
-          'defaultOperator': 'beginsWith',
+          name: 'user.lastName',
+          label: 'Last Name',
+          placeholder: 'Enter last name',
+          defaultOperator: 'beginsWith',
           validator: (r) => !!r.value
         }
       ]
     },
     {
-      'name': 'age',
-      'label': 'Age',
-      'inputType': 'number',
+      name: 'age',
+      label: 'Age',
+      inputType: 'number',
       validator: (r) => !!r.value
     },
     {
-      'name': 'gender',
-      'label': 'Gender',
-      'operators': [
+      name: 'gender',
+      label: 'Gender',
+      operators: [
         {
-          'name': '=',
-          'label': '='
+          name: '=',
+          label: '='
         }
       ],
-      'valueEditorType': 'radio',
-      'values': [
+      valueEditorType: 'radio',
+      values: [
         {
-          'name': 'M',
-          'label': 'Male'
+          name: 'M',
+          label: 'Male'
         },
         {
-          'name': 'F',
-          'label': 'Female'
+          name: 'F',
+          label: 'Female'
         },
         {
-          'name': 'O',
-          'label': 'Other'
+          name: 'O',
+          label: 'Other'
         }
       ]
     },
     {
-      'name': 'height',
-      'label': 'Height'
+      name: 'height',
+      label: 'Height'
     },
     {
-      'name': 'job',
-      'label': 'Job'
+      name: 'job',
+      label: 'Job'
     },
     {
-      'name': 'description',
-      'label': 'Description',
-      'valueEditorType': 'textarea'
+      name: 'description',
+      label: 'Description',
+      valueEditorType: 'textarea'
     },
     {
-      'name': 'birthdate',
-      'label': 'Birth Date',
-      'inputType': 'date'
+      name: 'birthdate',
+      label: 'Birth Date',
+      inputType: 'date'
     },
     {
-      'name': 'datetime',
-      'label': 'Show Time',
-      'inputType': 'datetime-local'
+      name: 'datetime',
+      label: 'Show Time',
+      inputType: 'datetime-local'
     },
     {
-      'name': 'alarm',
-      'label': 'Daily Alarm',
-      'inputType': 'time'
+      name: 'alarm',
+      label: 'Daily Alarm',
+      inputType: 'time'
     },
     {
-      'name': 'groupedField1',
-      'label': 'Grouped Field 1',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField1',
+      label: 'Grouped Field 1',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField2',
-      'label': 'Grouped Field 2',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField2',
+      label: 'Grouped Field 2',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField3',
-      'label': 'Grouped Field 3',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField3',
+      label: 'Grouped Field 3',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     },
     {
-      'name': 'groupedField4',
-      'label': 'Grouped Field 4',
-      'comparator': 'groupNumber',
-      'groupNumber': 'group1',
-      'valueSources': ['field', 'value']
+      name: 'groupedField4',
+      label: 'Grouped Field 4',
+      comparator: 'groupNumber',
+      groupNumber: 'group1',
+      valueSources: ['field', 'value']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/radio/active-color-composition-api.vue b/examples/sites/demos/pc/app/radio/active-color-composition-api.vue
index af7cad9bd..e1982b587 100644
--- a/examples/sites/demos/pc/app/radio/active-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/active-color-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 const value = ref('1')
 </script>
diff --git a/examples/sites/demos/pc/app/radio/active-color.vue b/examples/sites/demos/pc/app/radio/active-color.vue
index 59cd5c506..96d3693ef 100644
--- a/examples/sites/demos/pc/app/radio/active-color.vue
+++ b/examples/sites/demos/pc/app/radio/active-color.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/radio/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/radio/basic-usage-composition-api.vue
index 137801b3b..3571f9a93 100644
--- a/examples/sites/demos/pc/app/radio/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 const value = ref('1')
 </script>
diff --git a/examples/sites/demos/pc/app/radio/basic-usage.vue b/examples/sites/demos/pc/app/radio/basic-usage.vue
index e1bf8540a..10edcf05f 100644
--- a/examples/sites/demos/pc/app/radio/basic-usage.vue
+++ b/examples/sites/demos/pc/app/radio/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/radio/default-slot-composition-api.vue b/examples/sites/demos/pc/app/radio/default-slot-composition-api.vue
index db8964eae..09c16bffe 100644
--- a/examples/sites/demos/pc/app/radio/default-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/default-slot-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 const value = ref('1')
 </script>
diff --git a/examples/sites/demos/pc/app/radio/default-slot.vue b/examples/sites/demos/pc/app/radio/default-slot.vue
index d381c73e3..b18454505 100644
--- a/examples/sites/demos/pc/app/radio/default-slot.vue
+++ b/examples/sites/demos/pc/app/radio/default-slot.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/radio/display-only-composition-api.vue b/examples/sites/demos/pc/app/radio/display-only-composition-api.vue
index fd1e85bfe..2e5b3bb0f 100644
--- a/examples/sites/demos/pc/app/radio/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/display-only-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 const value = ref('1')
 const value1 = ref('B')
diff --git a/examples/sites/demos/pc/app/radio/display-only.vue b/examples/sites/demos/pc/app/radio/display-only.vue
index 546839cbd..b4e8de63e 100644
--- a/examples/sites/demos/pc/app/radio/display-only.vue
+++ b/examples/sites/demos/pc/app/radio/display-only.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Radio, RadioGroup } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue
index fa7d85ba0..83cbbef91 100644
--- a/examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
+import { TinyRadio, TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 const radio = ref('禁用')
 const radio1 = ref('6')
diff --git a/examples/sites/demos/pc/app/radio/dynamic-disable.vue b/examples/sites/demos/pc/app/radio/dynamic-disable.vue
index cad036c66..971ec70d1 100644
--- a/examples/sites/demos/pc/app/radio/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/radio/dynamic-disable.vue
@@ -19,13 +19,13 @@
 </template>
 
 <script>
-import { Radio, RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadio, TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/radio/group-options-composition-api.vue b/examples/sites/demos/pc/app/radio/group-options-composition-api.vue
index a3f5f2117..9716bf688 100644
--- a/examples/sites/demos/pc/app/radio/group-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/group-options-composition-api.vue
@@ -7,10 +7,10 @@
 
 <script setup>
 import { ref } from 'vue'
-import { RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 function handleClick() {
-  Modal.message({ message: 'click', status: 'info' })
+  TinyModal.message({ message: 'click', status: 'info' })
 }
 const value = ref('A')
 const options = ref([
diff --git a/examples/sites/demos/pc/app/radio/group-options.vue b/examples/sites/demos/pc/app/radio/group-options.vue
index 2591547fe..c106cc033 100644
--- a/examples/sites/demos/pc/app/radio/group-options.vue
+++ b/examples/sites/demos/pc/app/radio/group-options.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { RadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioGroup: RadioGroup
+    TinyRadioGroup
   },
   data() {
     return {
@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message({
+      TinyModal.message({
         message: 'click',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/radio/radio-events-composition-api.vue b/examples/sites/demos/pc/app/radio/radio-events-composition-api.vue
index ec30e6b38..98c772327 100644
--- a/examples/sites/demos/pc/app/radio/radio-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/radio-events-composition-api.vue
@@ -14,13 +14,13 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadio, TinyRadioButton, TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 const value = ref('1')
 const radio = ref('1')
 
 function change(label) {
-  Modal.message({
+  TinyModal.message({
     message: 'change 事件，选中的 Radio label 值为：' + label,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/radio/radio-events.vue b/examples/sites/demos/pc/app/radio/radio-events.vue
index 7dcc73e49..bea4236de 100644
--- a/examples/sites/demos/pc/app/radio/radio-events.vue
+++ b/examples/sites/demos/pc/app/radio/radio-events.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script>
-import { Radio, RadioButton, RadioGroup, Modal } from '@opentiny/vue'
+import { TinyRadio, TinyRadioButton, TinyRadioGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadio,
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     change(label) {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，选中的 Radio label 值为：' + label,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/radio/radio-group-composition-api.vue b/examples/sites/demos/pc/app/radio/radio-group-composition-api.vue
index a023a0f13..e8b40119d 100644
--- a/examples/sites/demos/pc/app/radio/radio-group-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/radio-group-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio, RadioGroup as TinyRadioGroup, RadioButton as TinyRadioButton } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 const value1 = ref('1')
 const value2 = ref('1')
diff --git a/examples/sites/demos/pc/app/radio/radio-group.vue b/examples/sites/demos/pc/app/radio/radio-group.vue
index d118afac3..20c2f616d 100644
--- a/examples/sites/demos/pc/app/radio/radio-group.vue
+++ b/examples/sites/demos/pc/app/radio/radio-group.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script>
-import { Radio, RadioGroup, RadioButton } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyRadioButton: RadioButton
+    TinyRadio,
+    TinyRadioGroup,
+    TinyRadioButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/radio/radio-size-composition-api.vue b/examples/sites/demos/pc/app/radio/radio-size-composition-api.vue
index 008e118f9..5c9f6fbaa 100644
--- a/examples/sites/demos/pc/app/radio/radio-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/radio-size-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 const value = ref('1')
 </script>
diff --git a/examples/sites/demos/pc/app/radio/radio-size.vue b/examples/sites/demos/pc/app/radio/radio-size.vue
index 1cb3efc0d..8744e3adc 100644
--- a/examples/sites/demos/pc/app/radio/radio-size.vue
+++ b/examples/sites/demos/pc/app/radio/radio-size.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { RadioButton, RadioGroup } from '@opentiny/vue'
+import { TinyRadioButton, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadioButton: RadioButton,
-    TinyRadioGroup: RadioGroup
+    TinyRadioButton,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/radio/radio-text-composition-api.vue b/examples/sites/demos/pc/app/radio/radio-text-composition-api.vue
index be7257dbb..907242155 100644
--- a/examples/sites/demos/pc/app/radio/radio-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/radio-text-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 const value = ref('1')
 </script>
diff --git a/examples/sites/demos/pc/app/radio/radio-text.vue b/examples/sites/demos/pc/app/radio/radio-text.vue
index 982a94696..9c3550bd2 100644
--- a/examples/sites/demos/pc/app/radio/radio-text.vue
+++ b/examples/sites/demos/pc/app/radio/radio-text.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Radio } from '@opentiny/vue'
+import { TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/radio/vertical-composition-api.vue b/examples/sites/demos/pc/app/radio/vertical-composition-api.vue
index 76efd01ce..4b723e799 100644
--- a/examples/sites/demos/pc/app/radio/vertical-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/vertical-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Radio as TinyRadio, RadioGroup as TinyRadioGroup, RadioButton as TinyRadioButton } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 const value = ref('1')
 </script>
diff --git a/examples/sites/demos/pc/app/radio/vertical.vue b/examples/sites/demos/pc/app/radio/vertical.vue
index 6c16e801c..acf701d90 100644
--- a/examples/sites/demos/pc/app/radio/vertical.vue
+++ b/examples/sites/demos/pc/app/radio/vertical.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Radio, RadioGroup, RadioButton } from '@opentiny/vue'
+import { TinyRadio, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyRadioButton: RadioButton
+    TinyRadio,
+    TinyRadioGroup,
+    TinyRadioButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/allow-half-composition-api.vue b/examples/sites/demos/pc/app/rate/allow-half-composition-api.vue
index 22122ebe7..e389392f3 100644
--- a/examples/sites/demos/pc/app/rate/allow-half-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/allow-half-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate2 = ref(2.5)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/allow-half.vue b/examples/sites/demos/pc/app/rate/allow-half.vue
index 87cc5bad6..c97808a20 100644
--- a/examples/sites/demos/pc/app/rate/allow-half.vue
+++ b/examples/sites/demos/pc/app/rate/allow-half.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/rate/basic-usage-composition-api.vue
index 7572a0901..edeb89514 100644
--- a/examples/sites/demos/pc/app/rate/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate1 = ref(2)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/basic-usage.vue b/examples/sites/demos/pc/app/rate/basic-usage.vue
index 15da32337..eb2bffc47 100644
--- a/examples/sites/demos/pc/app/rate/basic-usage.vue
+++ b/examples/sites/demos/pc/app/rate/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/custom-3-threshold-colors-composition-api.vue b/examples/sites/demos/pc/app/rate/custom-3-threshold-colors-composition-api.vue
index efb4e838a..41c6bad40 100644
--- a/examples/sites/demos/pc/app/rate/custom-3-threshold-colors-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/custom-3-threshold-colors-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate1 = ref(3)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/custom-3-threshold-colors.vue b/examples/sites/demos/pc/app/rate/custom-3-threshold-colors.vue
index cc67b8be3..33bc84a5a 100644
--- a/examples/sites/demos/pc/app/rate/custom-3-threshold-colors.vue
+++ b/examples/sites/demos/pc/app/rate/custom-3-threshold-colors.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/custom-3-threshold-icon-composition-api.vue b/examples/sites/demos/pc/app/rate/custom-3-threshold-icon-composition-api.vue
index 6afcd1f4b..c3a47b60c 100644
--- a/examples/sites/demos/pc/app/rate/custom-3-threshold-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/custom-3-threshold-icon-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate1 = ref(3)
 const iconclass1 = ref(['icon-frown', 'icon-meh', 'icon-smile'])
diff --git a/examples/sites/demos/pc/app/rate/custom-3-threshold-icon.vue b/examples/sites/demos/pc/app/rate/custom-3-threshold-icon.vue
index c654054c0..a75fad4f2 100644
--- a/examples/sites/demos/pc/app/rate/custom-3-threshold-icon.vue
+++ b/examples/sites/demos/pc/app/rate/custom-3-threshold-icon.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/disabled-not-selected-class-composition-api.vue b/examples/sites/demos/pc/app/rate/disabled-not-selected-class-composition-api.vue
index d3a3974fd..260aec660 100644
--- a/examples/sites/demos/pc/app/rate/disabled-not-selected-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/disabled-not-selected-class-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(3)
 const readiconclass1 = ref('icon-starDisable')
diff --git a/examples/sites/demos/pc/app/rate/disabled-not-selected-class.vue b/examples/sites/demos/pc/app/rate/disabled-not-selected-class.vue
index aa859a5cc..9c9058aa3 100644
--- a/examples/sites/demos/pc/app/rate/disabled-not-selected-class.vue
+++ b/examples/sites/demos/pc/app/rate/disabled-not-selected-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/disabled-not-selected-color-composition-api.vue b/examples/sites/demos/pc/app/rate/disabled-not-selected-color-composition-api.vue
index 57c985543..e4ccb6986 100644
--- a/examples/sites/demos/pc/app/rate/disabled-not-selected-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/disabled-not-selected-color-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(3)
 const disabledcolor1 = ref('red')
diff --git a/examples/sites/demos/pc/app/rate/disabled-not-selected-color.vue b/examples/sites/demos/pc/app/rate/disabled-not-selected-color.vue
index 808d5a97e..e9c9747c9 100644
--- a/examples/sites/demos/pc/app/rate/disabled-not-selected-color.vue
+++ b/examples/sites/demos/pc/app/rate/disabled-not-selected-color.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/rate/dynamic-disable-composition-api.vue
index 995350eff..a809b3de2 100644
--- a/examples/sites/demos/pc/app/rate/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/dynamic-disable-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(2.5)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/dynamic-disable.vue b/examples/sites/demos/pc/app/rate/dynamic-disable.vue
index ec0dbfb96..8baffa96d 100644
--- a/examples/sites/demos/pc/app/rate/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/rate/dynamic-disable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/max-score-composition-api.vue b/examples/sites/demos/pc/app/rate/max-score-composition-api.vue
index e312b10d1..0c2895420 100644
--- a/examples/sites/demos/pc/app/rate/max-score-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/max-score-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(7)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/max-score.vue b/examples/sites/demos/pc/app/rate/max-score.vue
index 495432505..afbab0639 100644
--- a/examples/sites/demos/pc/app/rate/max-score.vue
+++ b/examples/sites/demos/pc/app/rate/max-score.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/not-selected-class-composition-api.vue b/examples/sites/demos/pc/app/rate/not-selected-class-composition-api.vue
index d86010be4..37b5c6d94 100644
--- a/examples/sites/demos/pc/app/rate/not-selected-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/not-selected-class-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(2)
 const iconclass2 = ref('icon-starDisable')
diff --git a/examples/sites/demos/pc/app/rate/not-selected-class.vue b/examples/sites/demos/pc/app/rate/not-selected-class.vue
index 90fa794a5..efc67708e 100644
--- a/examples/sites/demos/pc/app/rate/not-selected-class.vue
+++ b/examples/sites/demos/pc/app/rate/not-selected-class.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/not-selected-color-composition-api.vue b/examples/sites/demos/pc/app/rate/not-selected-color-composition-api.vue
index d68fdb1bb..3f3ce0fe9 100644
--- a/examples/sites/demos/pc/app/rate/not-selected-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/not-selected-color-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(2)
 const color = ref('red')
diff --git a/examples/sites/demos/pc/app/rate/not-selected-color.vue b/examples/sites/demos/pc/app/rate/not-selected-color.vue
index 454cea8bb..571d6d81f 100644
--- a/examples/sites/demos/pc/app/rate/not-selected-color.vue
+++ b/examples/sites/demos/pc/app/rate/not-selected-color.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/radio-rate-composition-api.vue b/examples/sites/demos/pc/app/rate/radio-rate-composition-api.vue
index 6c9d29b7c..f9a1ee272 100644
--- a/examples/sites/demos/pc/app/rate/radio-rate-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/radio-rate-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(2)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/radio-rate.vue b/examples/sites/demos/pc/app/rate/radio-rate.vue
index 0d4f1252b..e09e7bac2 100644
--- a/examples/sites/demos/pc/app/rate/radio-rate.vue
+++ b/examples/sites/demos/pc/app/rate/radio-rate.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/rate-events-composition-api.vue b/examples/sites/demos/pc/app/rate/rate-events-composition-api.vue
index f21fee84c..434f172c4 100644
--- a/examples/sites/demos/pc/app/rate/rate-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/rate-events-composition-api.vue
@@ -4,11 +4,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate, Modal } from '@opentiny/vue'
+import { TinyRate, TinyModal } from '@opentiny/vue'
 
 const rate1 = ref(2)
 
 function onchange(v) {
-  Modal.message({ message: `选中的值是${v}`, status: 'info' })
+  TinyModal.message({ message: `选中的值是${v}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/rate/rate-events.vue b/examples/sites/demos/pc/app/rate/rate-events.vue
index 0ca1a362d..a0a0d8a29 100644
--- a/examples/sites/demos/pc/app/rate/rate-events.vue
+++ b/examples/sites/demos/pc/app/rate/rate-events.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate, Modal } from '@opentiny/vue'
+import { TinyRate, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     onchange(v) {
-      Modal.message({ message: `选中的值是${v}`, status: 'info' })
+      TinyModal.message({ message: `选中的值是${v}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/rate/show-score-composition-api.vue b/examples/sites/demos/pc/app/rate/show-score-composition-api.vue
index 4f268d99d..4fba7c211 100644
--- a/examples/sites/demos/pc/app/rate/show-score-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/show-score-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(3)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/show-score.vue b/examples/sites/demos/pc/app/rate/show-score.vue
index 410b9f360..d838ce372 100644
--- a/examples/sites/demos/pc/app/rate/show-score.vue
+++ b/examples/sites/demos/pc/app/rate/show-score.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/size-and-space-composition-api.vue b/examples/sites/demos/pc/app/rate/size-and-space-composition-api.vue
index 676bbc2af..f917018f8 100644
--- a/examples/sites/demos/pc/app/rate/size-and-space-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/size-and-space-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(2)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/size-and-space.vue b/examples/sites/demos/pc/app/rate/size-and-space.vue
index 4b22c0574..afdff8ef0 100644
--- a/examples/sites/demos/pc/app/rate/size-and-space.vue
+++ b/examples/sites/demos/pc/app/rate/size-and-space.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/text-on-bottom-composition-api.vue b/examples/sites/demos/pc/app/rate/text-on-bottom-composition-api.vue
index d61e2c7cc..3cd0a3760 100644
--- a/examples/sites/demos/pc/app/rate/text-on-bottom-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/text-on-bottom-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(3)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/text-on-bottom.vue b/examples/sites/demos/pc/app/rate/text-on-bottom.vue
index a7fd3bd6f..bbc9d251a 100644
--- a/examples/sites/demos/pc/app/rate/text-on-bottom.vue
+++ b/examples/sites/demos/pc/app/rate/text-on-bottom.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/texts-and-text-color-composition-api.vue b/examples/sites/demos/pc/app/rate/texts-and-text-color-composition-api.vue
index 076982fbf..7172fbc3e 100644
--- a/examples/sites/demos/pc/app/rate/texts-and-text-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/texts-and-text-color-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate = ref(3)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/texts-and-text-color.vue b/examples/sites/demos/pc/app/rate/texts-and-text-color.vue
index 537483f36..08b030a13 100644
--- a/examples/sites/demos/pc/app/rate/texts-and-text-color.vue
+++ b/examples/sites/demos/pc/app/rate/texts-and-text-color.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rate/threshold-value-composition-api.vue b/examples/sites/demos/pc/app/rate/threshold-value-composition-api.vue
index 0b3cbff6c..4a1f09dd8 100644
--- a/examples/sites/demos/pc/app/rate/threshold-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/rate/threshold-value-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Rate as TinyRate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 const rate1 = ref(3)
 </script>
diff --git a/examples/sites/demos/pc/app/rate/threshold-value.vue b/examples/sites/demos/pc/app/rate/threshold-value.vue
index ca0ae81dd..650c41fc1 100644
--- a/examples/sites/demos/pc/app/rate/threshold-value.vue
+++ b/examples/sites/demos/pc/app/rate/threshold-value.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { Rate } from '@opentiny/vue'
+import { TinyRate } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRate: Rate
+    TinyRate
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue
index 072dd426b..153e9b596 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composition-api.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const value = ref('你好 Opentiny!')
diff --git a/examples/sites/demos/pc/app/rich-text-editor/basic-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/basic-usage.vue
index 917c5db72..627e9d7d1 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/basic-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/basic-usage.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="ts">
-import { RichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRichTextEditor: RichTextEditor
+    TinyRichTextEditor
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage-composition-api.vue
index c4d1faca9..708844c7f 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 const collaboration = ref(true)
 </script>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.vue
index 48bb256fc..6840c8dcf 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.vue
@@ -3,17 +3,16 @@
 </template>
 
 <script lang="ts">
-import { RichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRichTextEditor: RichTextEditor
+    TinyRichTextEditor
   },
   data() {
     return {
       collaboration: true
     }
-  },
+  }
 }
 </script>
-
diff --git a/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage-composition-api.vue
index 96236a71c..f54611129 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 const customToolBar = ref(['bold', 'italic'])
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage.vue
index 86d667fd0..5993c079e 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage.vue
@@ -3,16 +3,16 @@
 </template>
 
 <script lang="ts">
-import { RichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRichTextEditor: RichTextEditor
+    TinyRichTextEditor
   },
   data() {
     return {
       customToolBar: ['bold', 'italic']
     }
-  },
+  }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
index a1d9f3f2d..c2b73d71c 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="jsx">
-import { RichTextEditor as TinyRichTextEditor, Notify } from '@opentiny/vue'
+import { TinyRichTextEditor, TinyNotify } from '@opentiny/vue'
 const beforeCreate = function (editor) {
   console.log('beforeCreate')
 }
@@ -30,4 +30,4 @@ const destroy = function (editor) {
 const update = function (editor) {
   console.log('update')
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
index ff361b912..a8490481c 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="ts">
-import { RichTextEditor, Notify } from '@opentiny/vue'
+import { TinyRichTextEditor, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRichTextEditor: RichTextEditor
+    TinyRichTextEditor
   },
   methods: {
     beforeCreate(editor) {
@@ -35,7 +35,7 @@ export default {
     },
     update(editor) {
       console.log('update')
-    },
-  },
+    }
+  }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/options-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/options-usage-composition-api.vue
index 1f34c8b1b..a93f55f53 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/options-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/options-usage-composition-api.vue
@@ -2,14 +2,13 @@
   <tiny-rich-text-editor :options="options"></tiny-rich-text-editor>
 </template>
 
-
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 const options = ref({
   content: '自定义options，覆盖默认options',
   autofocus: true,
-  editable: true,
+  editable: true
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/options-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/options-usage.vue
index 6ce9fbf06..692dd1fae 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/options-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/options-usage.vue
@@ -3,20 +3,20 @@
 </template>
 
 <script lang="ts">
-import { RichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRichTextEditor: RichTextEditor
+    TinyRichTextEditor
   },
   data() {
     return {
       options: {
         content: '自定义options，覆盖默认options',
         autofocus: true,
-        editable: true,
+        editable: true
       }
     }
-  },
+  }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage-composition-api.vue
index 4e30ce486..5a0e491e4 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 const placeholder = ref('自定义placeholder')
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage.vue
index 8babd0164..2c94e1595 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage.vue
@@ -3,16 +3,16 @@
 </template>
 
 <script lang="ts">
-import { RichTextEditor } from '@opentiny/vue'
+import { TinyRichTextEditor } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRichTextEditor: RichTextEditor
+    TinyRichTextEditor
   },
   data() {
     return {
-      placeholder: '自定义placeholder',
+      placeholder: '自定义placeholder'
     }
-  },
+  }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/roles/base-composition-api.vue b/examples/sites/demos/pc/app/roles/base-composition-api.vue
index 12d3f915b..3125776db 100644
--- a/examples/sites/demos/pc/app/roles/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/roles/base-composition-api.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script setup>
-import { Roles as TinyRoles, Modal } from '@opentiny/vue'
+import { TinyRoles, TinyModal } from '@opentiny/vue'
 
 function change(userId) {
-  Modal.message({ message: `${userId}`, status: 'info' })
+  TinyModal.message({ message: `${userId}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/roles/base.vue b/examples/sites/demos/pc/app/roles/base.vue
index e7f8e12ce..d25d5e01c 100644
--- a/examples/sites/demos/pc/app/roles/base.vue
+++ b/examples/sites/demos/pc/app/roles/base.vue
@@ -3,18 +3,18 @@
 </template>
 
 <script>
-import { Roles, Modal } from '@opentiny/vue'
+import { TinyRoles, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRoles: Roles
+    TinyRoles
   },
   data() {
     return {}
   },
   methods: {
     change(userId) {
-      Modal.message({ message: `${userId}`, status: 'info' })
+      TinyModal.message({ message: `${userId}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/roles/fetch-role-composition-api.vue b/examples/sites/demos/pc/app/roles/fetch-role-composition-api.vue
index 34fa8428e..941e24fa1 100644
--- a/examples/sites/demos/pc/app/roles/fetch-role-composition-api.vue
+++ b/examples/sites/demos/pc/app/roles/fetch-role-composition-api.vue
@@ -4,14 +4,14 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Roles as TinyRoles, Modal } from '@opentiny/vue'
+import { TinyRoles, TinyModal } from '@opentiny/vue'
 
 const roleId = ref('')
 const env = ref({})
 const services = ref({
   fetchRole: handleFetchRole,
-  getEnvInfoSync: getEnvInfoSync,
-  getCustomized: getCustomized
+  getEnvInfoSync,
+  getCustomized
 })
 
 function handleFetchRole() {
@@ -166,6 +166,6 @@ function changeRole(roleIdNumber) {
   /* 选中值发生变化时触发 */
   roleId.value = roleIdNumber
 
-  Modal.message(`当前选中的角色id是${roleIdNumber}`)
+  TinyModal.message(`当前选中的角色id是${roleIdNumber}`)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/roles/fetch-role.vue b/examples/sites/demos/pc/app/roles/fetch-role.vue
index 6432fd72c..6eb903691 100644
--- a/examples/sites/demos/pc/app/roles/fetch-role.vue
+++ b/examples/sites/demos/pc/app/roles/fetch-role.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Roles, Modal } from '@opentiny/vue'
+import { TinyRoles, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyRoles: Roles
+    TinyRoles
   },
   data() {
     return {
@@ -170,7 +170,7 @@ export default {
       /* 选中值发生变化时触发 */
       this.roleId = roleId
 
-      Modal.message(`当前选中的角色id是${roleId}`)
+      TinyModal.message(`当前选中的角色id是${roleId}`)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/scroll-text/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/scroll-text/basic-usage-composition-api.vue
index 82fdceb04..c67d199a2 100644
--- a/examples/sites/demos/pc/app/scroll-text/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/scroll-text/basic-usage-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { ScrollText as TinyScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/basic-usage.vue b/examples/sites/demos/pc/app/scroll-text/basic-usage.vue
index c86a0feee..073878d96 100644
--- a/examples/sites/demos/pc/app/scroll-text/basic-usage.vue
+++ b/examples/sites/demos/pc/app/scroll-text/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScrollText: ScrollText
+    TinyScrollText
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/custom-text-style-composition-api.vue b/examples/sites/demos/pc/app/scroll-text/custom-text-style-composition-api.vue
index e8180c3af..9e003ad89 100644
--- a/examples/sites/demos/pc/app/scroll-text/custom-text-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/scroll-text/custom-text-style-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { ScrollText as TinyScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/scroll-text/custom-text-style.vue b/examples/sites/demos/pc/app/scroll-text/custom-text-style.vue
index c14ebb0e0..f86e8237f 100644
--- a/examples/sites/demos/pc/app/scroll-text/custom-text-style.vue
+++ b/examples/sites/demos/pc/app/scroll-text/custom-text-style.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScrollText: ScrollText
+    TinyScrollText
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/hover-stop-composition-api.vue b/examples/sites/demos/pc/app/scroll-text/hover-stop-composition-api.vue
index 96d037367..869d67d28 100644
--- a/examples/sites/demos/pc/app/scroll-text/hover-stop-composition-api.vue
+++ b/examples/sites/demos/pc/app/scroll-text/hover-stop-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { ScrollText as TinyScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/hover-stop.vue b/examples/sites/demos/pc/app/scroll-text/hover-stop.vue
index ab133567b..588cc1d10 100644
--- a/examples/sites/demos/pc/app/scroll-text/hover-stop.vue
+++ b/examples/sites/demos/pc/app/scroll-text/hover-stop.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScrollText: ScrollText
+    TinyScrollText
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/scroll-direction-composition-api.vue b/examples/sites/demos/pc/app/scroll-text/scroll-direction-composition-api.vue
index b319bdd77..582d0dd77 100644
--- a/examples/sites/demos/pc/app/scroll-text/scroll-direction-composition-api.vue
+++ b/examples/sites/demos/pc/app/scroll-text/scroll-direction-composition-api.vue
@@ -11,5 +11,5 @@
 </template>
 
 <script setup>
-import { ScrollText as TinyScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/scroll-direction.vue b/examples/sites/demos/pc/app/scroll-text/scroll-direction.vue
index dc7f5b4b5..315e08628 100644
--- a/examples/sites/demos/pc/app/scroll-text/scroll-direction.vue
+++ b/examples/sites/demos/pc/app/scroll-text/scroll-direction.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { ScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScrollText: ScrollText
+    TinyScrollText
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/scroll-time-composition-api.vue b/examples/sites/demos/pc/app/scroll-text/scroll-time-composition-api.vue
index a2808a4e9..6266909c9 100644
--- a/examples/sites/demos/pc/app/scroll-text/scroll-time-composition-api.vue
+++ b/examples/sites/demos/pc/app/scroll-text/scroll-time-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { ScrollText as TinyScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/scroll-time.vue b/examples/sites/demos/pc/app/scroll-text/scroll-time.vue
index b6ea04517..c7c5b8958 100644
--- a/examples/sites/demos/pc/app/scroll-text/scroll-time.vue
+++ b/examples/sites/demos/pc/app/scroll-text/scroll-time.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { ScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScrollText: ScrollText
+    TinyScrollText
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/slots-composition-api.vue b/examples/sites/demos/pc/app/scroll-text/slots-composition-api.vue
index 89539e109..9fbdcc386 100644
--- a/examples/sites/demos/pc/app/scroll-text/slots-composition-api.vue
+++ b/examples/sites/demos/pc/app/scroll-text/slots-composition-api.vue
@@ -7,5 +7,5 @@
 </template>
 
 <script setup>
-import { ScrollText as TinyScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/scroll-text/slots.vue b/examples/sites/demos/pc/app/scroll-text/slots.vue
index 08fcfe4e4..d4199150b 100644
--- a/examples/sites/demos/pc/app/scroll-text/slots.vue
+++ b/examples/sites/demos/pc/app/scroll-text/slots.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { ScrollText } from '@opentiny/vue'
+import { TinyScrollText } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyScrollText: ScrollText
+    TinyScrollText
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/search/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/search/basic-usage-composition-api.vue
index 21848577a..4b47dd4fb 100644
--- a/examples/sites/demos/pc/app/search/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 const value = ref('默认值')
 </script>
diff --git a/examples/sites/demos/pc/app/search/basic-usage.vue b/examples/sites/demos/pc/app/search/basic-usage.vue
index 84cd37c79..95635d68f 100644
--- a/examples/sites/demos/pc/app/search/basic-usage.vue
+++ b/examples/sites/demos/pc/app/search/basic-usage.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/search/clearable-composition-api.vue b/examples/sites/demos/pc/app/search/clearable-composition-api.vue
index f1c35851a..01a9d1c68 100644
--- a/examples/sites/demos/pc/app/search/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/clearable-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/search/clearable.vue b/examples/sites/demos/pc/app/search/clearable.vue
index 70341671f..8d740a377 100644
--- a/examples/sites/demos/pc/app/search/clearable.vue
+++ b/examples/sites/demos/pc/app/search/clearable.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/search/custom-search-types-composition-api.vue b/examples/sites/demos/pc/app/search/custom-search-types-composition-api.vue
index 930afcc12..dea02c82f 100644
--- a/examples/sites/demos/pc/app/search/custom-search-types-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/custom-search-types-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 const searchTypes1 = ref([
   {
diff --git a/examples/sites/demos/pc/app/search/custom-search-types.vue b/examples/sites/demos/pc/app/search/custom-search-types.vue
index e4e423fae..4e23d27b5 100644
--- a/examples/sites/demos/pc/app/search/custom-search-types.vue
+++ b/examples/sites/demos/pc/app/search/custom-search-types.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/search/events-composition-api.vue b/examples/sites/demos/pc/app/search/events-composition-api.vue
index 463de51eb..e60db70e2 100644
--- a/examples/sites/demos/pc/app/search/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/events-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch, Modal } from '@opentiny/vue'
+import { TinySearch, TinyModal } from '@opentiny/vue'
 
 const searchTypes = ref([
   {
@@ -38,22 +38,22 @@ const searchTypes = ref([
 ])
 
 function search(key, value) {
-  Modal.message({ message: `search: ${value}`, status: 'info' })
+  TinyModal.message({ message: `search: ${value}`, status: 'info' })
 }
 
 function change(key, value) {
-  Modal.message({ message: `change: ${value}`, status: 'info' })
+  TinyModal.message({ message: `change: ${value}`, status: 'info' })
 }
 
 function clear() {
-  Modal.message({ message: 'clear', status: 'info' })
+  TinyModal.message({ message: 'clear', status: 'info' })
 }
 
 function input(key, value) {
-  Modal.message({ message: `input: ${key}, ${JSON.stringify(value)}`, status: 'info' })
+  TinyModal.message({ message: `input: ${key}, ${JSON.stringify(value)}`, status: 'info' })
 }
 
 function select(value) {
-  Modal.message({ message: `${value.text}`, status: 'info' })
+  TinyModal.message({ message: `${value.text}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/search/events.vue b/examples/sites/demos/pc/app/search/events.vue
index bcca4240e..26451efb8 100644
--- a/examples/sites/demos/pc/app/search/events.vue
+++ b/examples/sites/demos/pc/app/search/events.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script lang="jsx">
-import { Search, Modal } from '@opentiny/vue'
+import { TinySearch, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
@@ -45,19 +45,19 @@ export default {
   },
   methods: {
     search(key, value) {
-      Modal.message({ message: `search: ${value}`, status: 'info' })
+      TinyModal.message({ message: `search: ${value}`, status: 'info' })
     },
     change(key, value) {
-      Modal.message({ message: `change: ${value}`, status: 'info' })
+      TinyModal.message({ message: `change: ${value}`, status: 'info' })
     },
     clear() {
-      Modal.message({ message: 'clear', status: 'info' })
+      TinyModal.message({ message: 'clear', status: 'info' })
     },
     input(key, value) {
-      Modal.message({ message: `input: ${key}, ${JSON.stringify(value)}`, status: 'info' })
+      TinyModal.message({ message: `input: ${key}, ${JSON.stringify(value)}`, status: 'info' })
     },
     select(value) {
-      Modal.message({ message: `${value.text}`, status: 'info' })
+      TinyModal.message({ message: `${value.text}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue b/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue
index a80a6665f..e1a29e6f7 100644
--- a/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Search as TinySearch } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/search/mini-mode.vue b/examples/sites/demos/pc/app/search/mini-mode.vue
index 722b45462..67f8bec55 100644
--- a/examples/sites/demos/pc/app/search/mini-mode.vue
+++ b/examples/sites/demos/pc/app/search/mini-mode.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/search/search-types-composition-api.vue b/examples/sites/demos/pc/app/search/search-types-composition-api.vue
index d2783d0f7..a25b3e95b 100644
--- a/examples/sites/demos/pc/app/search/search-types-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/search-types-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { reactive } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 const searchTypes = reactive([
   {
diff --git a/examples/sites/demos/pc/app/search/search-types.vue b/examples/sites/demos/pc/app/search/search-types.vue
index 993f79f1f..ee9968500 100644
--- a/examples/sites/demos/pc/app/search/search-types.vue
+++ b/examples/sites/demos/pc/app/search/search-types.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/search/show-selected-types-composition-api.vue b/examples/sites/demos/pc/app/search/show-selected-types-composition-api.vue
index f976f2578..a4e06c9e2 100644
--- a/examples/sites/demos/pc/app/search/show-selected-types-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/show-selected-types-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 const searchTypes = ref([
   {
diff --git a/examples/sites/demos/pc/app/search/show-selected-types.vue b/examples/sites/demos/pc/app/search/show-selected-types.vue
index 67acaf634..e7e70e500 100644
--- a/examples/sites/demos/pc/app/search/show-selected-types.vue
+++ b/examples/sites/demos/pc/app/search/show-selected-types.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/search/size-composition-api.vue b/examples/sites/demos/pc/app/search/size-composition-api.vue
index fac268ae4..3ad82559b 100644
--- a/examples/sites/demos/pc/app/search/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/size-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 const value1 = ref('')
 const value2 = ref('')
diff --git a/examples/sites/demos/pc/app/search/size.vue b/examples/sites/demos/pc/app/search/size.vue
index ae4573065..bc1186c1b 100644
--- a/examples/sites/demos/pc/app/search/size.vue
+++ b/examples/sites/demos/pc/app/search/size.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue b/examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue
index 51d1396c4..ee88baec2 100644
--- a/examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/slot-prefix-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch, Button as TinyButton } from '@opentiny/vue'
+import { TinySearch, TinyButton } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/search/slot-prefix.vue b/examples/sites/demos/pc/app/search/slot-prefix.vue
index 361e160a5..16a1bbdf5 100644
--- a/examples/sites/demos/pc/app/search/slot-prefix.vue
+++ b/examples/sites/demos/pc/app/search/slot-prefix.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script lang="jsx">
-import { Search, Button } from '@opentiny/vue'
+import { TinySearch, TinyButton } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySearch: Search,
-    TinyButton: Button,
+    TinySearch,
+    TinyButton,
     TinyIconSearch: iconSearch()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/search/transparent-mode-composition-api.vue b/examples/sites/demos/pc/app/search/transparent-mode-composition-api.vue
index 68ba4e648..1cd354063 100644
--- a/examples/sites/demos/pc/app/search/transparent-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/transparent-mode-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 const searchTypes = ref([
   {
diff --git a/examples/sites/demos/pc/app/search/transparent-mode.vue b/examples/sites/demos/pc/app/search/transparent-mode.vue
index 74bdd4d91..617d7d4e6 100644
--- a/examples/sites/demos/pc/app/search/transparent-mode.vue
+++ b/examples/sites/demos/pc/app/search/transparent-mode.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { TinySearch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/all-text-composition-api.vue b/examples/sites/demos/pc/app/select/all-text-composition-api.vue
index 678def29c..21fc2580d 100644
--- a/examples/sites/demos/pc/app/select/all-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/all-text-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '黄金糕' },
diff --git a/examples/sites/demos/pc/app/select/all-text.vue b/examples/sites/demos/pc/app/select/all-text.vue
index e1d5e2c3e..96bf956d4 100644
--- a/examples/sites/demos/pc/app/select/all-text.vue
+++ b/examples/sites/demos/pc/app/select/all-text.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/allow-create-composition-api.vue b/examples/sites/demos/pc/app/select/allow-create-composition-api.vue
index 2cde75c49..0d269390c 100644
--- a/examples/sites/demos/pc/app/select/allow-create-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/allow-create-composition-api.vue
@@ -52,14 +52,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Select as TinySelect,
-  Option as TinyOption,
-  Input as TinyInput,
-  Button as TinyButton,
-  DialogBox as TinyDialogBox,
-  Modal
-} from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
@@ -83,7 +76,7 @@ const handleAddOption = () => {
 
 const handleConfirm = () => {
   if (!optionLabel.value || !optionValue.value) {
-    Modal.message({ message: '选项不能为空！', status: 'warning' })
+    TinyModal.message({ message: '选项不能为空！', status: 'warning' })
     return
   }
   boxVisibility.value = false
diff --git a/examples/sites/demos/pc/app/select/allow-create.vue b/examples/sites/demos/pc/app/select/allow-create.vue
index 7155905f8..767bf044c 100644
--- a/examples/sites/demos/pc/app/select/allow-create.vue
+++ b/examples/sites/demos/pc/app/select/allow-create.vue
@@ -51,15 +51,15 @@
 </template>
 
 <script>
-import { Select, Option, Input, Button, DialogBox, Modal } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
+    TinySelect,
+    TinyOption,
+    TinyInput,
+    TinyButton,
+    TinyDialogBox
   },
   data() {
     return {
@@ -84,7 +84,7 @@ export default {
     },
     handleConfirm() {
       if (!this.optionLabel || !this.optionValue) {
-        Modal.message({ message: '选项不能为空！', status: 'warning' })
+        TinyModal.message({ message: '选项不能为空！', status: 'warning' })
         return
       }
       this.boxVisibility = false
diff --git a/examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue b/examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue
index a6d0b7f8a..75488982b 100644
--- a/examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/automatic-dropdown.vue b/examples/sites/demos/pc/app/select/automatic-dropdown.vue
index c44ce1137..ec831eefd 100644
--- a/examples/sites/demos/pc/app/select/automatic-dropdown.vue
+++ b/examples/sites/demos/pc/app/select/automatic-dropdown.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script>
-import { Select, Option, Button } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyButton: Button
+    TinySelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/select/basic-usage-composition-api.vue
index 68edc6f6f..dc618dc1a 100644
--- a/examples/sites/demos/pc/app/select/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/basic-usage-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { iconFile } from '@opentiny/vue-icon'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/select/basic-usage.vue b/examples/sites/demos/pc/app/select/basic-usage.vue
index d2aa62d52..04422f2a8 100644
--- a/examples/sites/demos/pc/app/select/basic-usage.vue
+++ b/examples/sites/demos/pc/app/select/basic-usage.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { iconFile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/binding-obj-composition-api.vue b/examples/sites/demos/pc/app/select/binding-obj-composition-api.vue
index 537b4a9c7..6b75787dd 100644
--- a/examples/sites/demos/pc/app/select/binding-obj-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/binding-obj-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { obj: { val: '选项1', id: 1 }, text: '北京' },
diff --git a/examples/sites/demos/pc/app/select/binding-obj.vue b/examples/sites/demos/pc/app/select/binding-obj.vue
index 964dc0fa2..23e7a8175 100644
--- a/examples/sites/demos/pc/app/select/binding-obj.vue
+++ b/examples/sites/demos/pc/app/select/binding-obj.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/cache-usage-composition-api.vue b/examples/sites/demos/pc/app/select/cache-usage-composition-api.vue
index f866462dd..f3a7f223e 100644
--- a/examples/sites/demos/pc/app/select/cache-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/cache-usage-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const cacheOp = ref({
   key: 'test'
diff --git a/examples/sites/demos/pc/app/select/cache-usage.vue b/examples/sites/demos/pc/app/select/cache-usage.vue
index 684cd962c..9391be2d0 100644
--- a/examples/sites/demos/pc/app/select/cache-usage.vue
+++ b/examples/sites/demos/pc/app/select/cache-usage.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue b/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue
index 9a49aa91b..b50669975 100644
--- a/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/clear-no-match-value-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/clear-no-match-value.vue b/examples/sites/demos/pc/app/select/clear-no-match-value.vue
index aaeacfb56..04e2d9816 100644
--- a/examples/sites/demos/pc/app/select/clear-no-match-value.vue
+++ b/examples/sites/demos/pc/app/select/clear-no-match-value.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/clearable-composition-api.vue b/examples/sites/demos/pc/app/select/clearable-composition-api.vue
index 49189be55..302a3252a 100644
--- a/examples/sites/demos/pc/app/select/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/clearable-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/clearable.vue b/examples/sites/demos/pc/app/select/clearable.vue
index b14351533..49a5a5709 100644
--- a/examples/sites/demos/pc/app/select/clearable.vue
+++ b/examples/sites/demos/pc/app/select/clearable.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue b/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
index a5f5dce0c..6fa86a470 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/collapse-tags.vue b/examples/sites/demos/pc/app/select/collapse-tags.vue
index 1a22f3989..604e73f34 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags.vue
+++ b/examples/sites/demos/pc/app/select/collapse-tags.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue b/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue
index ee6f94a5f..b00823874 100644
--- a/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/copy-multi-composition-api.vue
@@ -41,7 +41,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Input as TinyInput } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyInput } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/copy-multi.vue b/examples/sites/demos/pc/app/select/copy-multi.vue
index db057a50c..d9868c3b0 100644
--- a/examples/sites/demos/pc/app/select/copy-multi.vue
+++ b/examples/sites/demos/pc/app/select/copy-multi.vue
@@ -41,13 +41,13 @@
 </template>
 
 <script>
-import { Select, Option, Input } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyInput: Input
+    TinySelect,
+    TinyOption,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/copy-single-composition-api.vue b/examples/sites/demos/pc/app/select/copy-single-composition-api.vue
index fc709e568..abec1f6dc 100644
--- a/examples/sites/demos/pc/app/select/copy-single-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/copy-single-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Input as TinyInput } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyInput } from '@opentiny/vue'
 
 const options1 = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/copy-single.vue b/examples/sites/demos/pc/app/select/copy-single.vue
index 0e6428bfb..4a529a81e 100644
--- a/examples/sites/demos/pc/app/select/copy-single.vue
+++ b/examples/sites/demos/pc/app/select/copy-single.vue
@@ -32,13 +32,13 @@
 </template>
 
 <script>
-import { Select, Option, Input } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyInput: Input
+    TinySelect,
+    TinyOption,
+    TinyInput
   },
   data() {
     return {
@@ -110,6 +110,7 @@ export default {
       'Wisconsin',
       'Wyoming'
     ]
+
     this.list = states.map((item) => {
       return { value: item, label: item }
     })
diff --git a/examples/sites/demos/pc/app/select/disabled-composition-api.vue b/examples/sites/demos/pc/app/select/disabled-composition-api.vue
index a1eadb3e1..2e1f31354 100644
--- a/examples/sites/demos/pc/app/select/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/disabled-composition-api.vue
@@ -69,7 +69,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options1 = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/disabled.vue b/examples/sites/demos/pc/app/select/disabled.vue
index 62aa0abda..ae4e34547 100644
--- a/examples/sites/demos/pc/app/select/disabled.vue
+++ b/examples/sites/demos/pc/app/select/disabled.vue
@@ -68,12 +68,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/events-composition-api.vue b/examples/sites/demos/pc/app/select/events-composition-api.vue
index da17ac6e0..fdd4e5f6f 100644
--- a/examples/sites/demos/pc/app/select/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/events-composition-api.vue
@@ -36,7 +36,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Modal } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyModal } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
@@ -49,49 +49,49 @@ const value1 = ref('')
 const value2 = ref([])
 
 const change = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 change 事件',
     status: 'info'
   })
 }
 
 const clear = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 clear 事件',
     status: 'info'
   })
 }
 
 const focus = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 focus 事件',
     status: 'info'
   })
 }
 
 const blur = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 blur 事件',
     status: 'info'
   })
 }
 
 const removeTag = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 remove-tag 事件',
     status: 'info'
   })
 }
 
 const visibleChange = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 visible-change 事件',
     status: 'info'
   })
 }
 
 const dropdownClick = () => {
-  Modal.message({
+  TinyModal.message({
     message: '触发 dropdown-click 事件',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/select/events.vue b/examples/sites/demos/pc/app/select/events.vue
index 92512cf84..5be029edc 100644
--- a/examples/sites/demos/pc/app/select/events.vue
+++ b/examples/sites/demos/pc/app/select/events.vue
@@ -35,12 +35,12 @@
 </template>
 
 <script>
-import { Select, Option, Modal } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
@@ -57,42 +57,42 @@ export default {
   },
   methods: {
     change() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 change 事件',
         status: 'info'
       })
     },
     clear() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 clear 事件',
         status: 'info'
       })
     },
     focus() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 focus 事件'
       })
     },
     blur() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 blur 事件',
         status: 'info'
       })
     },
     removeTag() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 remove-tag 事件',
         status: 'info'
       })
     },
     visibleChange() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 visible-change 事件',
         status: 'info'
       })
     },
     dropdownClick() {
-      Modal.message({
+      TinyModal.message({
         message: '触发 dropdown-click 事件',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/select/extra-query-params-composition-api.vue b/examples/sites/demos/pc/app/select/extra-query-params-composition-api.vue
index 784b1b017..e1c7cc76c 100644
--- a/examples/sites/demos/pc/app/select/extra-query-params-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/extra-query-params-composition-api.vue
@@ -45,7 +45,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const parents = ref([])
 const children = ref([])
diff --git a/examples/sites/demos/pc/app/select/extra-query-params.vue b/examples/sites/demos/pc/app/select/extra-query-params.vue
index 6c307eaf6..848cdedda 100644
--- a/examples/sites/demos/pc/app/select/extra-query-params.vue
+++ b/examples/sites/demos/pc/app/select/extra-query-params.vue
@@ -44,11 +44,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   created() {
     this.parents = [
diff --git a/examples/sites/demos/pc/app/select/filter-method-composition-api.vue b/examples/sites/demos/pc/app/select/filter-method-composition-api.vue
index 186fab69c..dd2570303 100644
--- a/examples/sites/demos/pc/app/select/filter-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/filter-method-composition-api.vue
@@ -37,7 +37,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/filter-method.vue b/examples/sites/demos/pc/app/select/filter-method.vue
index 18b848f03..293e1cb82 100644
--- a/examples/sites/demos/pc/app/select/filter-method.vue
+++ b/examples/sites/demos/pc/app/select/filter-method.vue
@@ -36,12 +36,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/select/filter-mode-composition-api.vue
index 1ce2c3f2a..58af2c75f 100644
--- a/examples/sites/demos/pc/app/select/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/filter-mode-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/filter-mode.vue b/examples/sites/demos/pc/app/select/filter-mode.vue
index 90a010645..b52721f44 100644
--- a/examples/sites/demos/pc/app/select/filter-mode.vue
+++ b/examples/sites/demos/pc/app/select/filter-mode.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/hide-drop-composition-api.vue b/examples/sites/demos/pc/app/select/hide-drop-composition-api.vue
index c90b3998b..03f2905bb 100644
--- a/examples/sites/demos/pc/app/select/hide-drop-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/hide-drop-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/hide-drop.vue b/examples/sites/demos/pc/app/select/hide-drop.vue
index a3a7ee44a..07867860b 100644
--- a/examples/sites/demos/pc/app/select/hide-drop.vue
+++ b/examples/sites/demos/pc/app/select/hide-drop.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/init-label-composition-api.vue b/examples/sites/demos/pc/app/select/init-label-composition-api.vue
index cd1c02009..eaf177998 100644
--- a/examples/sites/demos/pc/app/select/init-label-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/init-label-composition-api.vue
@@ -27,7 +27,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const value = ref('001')
 const gridOp = ref({
diff --git a/examples/sites/demos/pc/app/select/init-label.vue b/examples/sites/demos/pc/app/select/init-label.vue
index dc7147533..f4aa668dc 100644
--- a/examples/sites/demos/pc/app/select/init-label.vue
+++ b/examples/sites/demos/pc/app/select/init-label.vue
@@ -26,11 +26,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/input-box-type-composition-api.vue b/examples/sites/demos/pc/app/select/input-box-type-composition-api.vue
index 4ccf200f8..8560153fc 100644
--- a/examples/sites/demos/pc/app/select/input-box-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/input-box-type-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/input-box-type.vue b/examples/sites/demos/pc/app/select/input-box-type.vue
index fae668317..97b0c04e0 100644
--- a/examples/sites/demos/pc/app/select/input-box-type.vue
+++ b/examples/sites/demos/pc/app/select/input-box-type.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue b/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue
index d4537afbc..2b4297ea8 100644
--- a/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/is-drop-inherit-width-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue b/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue
index 246b36591..9e3a33eae 100644
--- a/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue
+++ b/examples/sites/demos/pc/app/select/is-drop-inherit-width.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/manual-focus-blur-composition-api.vue b/examples/sites/demos/pc/app/select/manual-focus-blur-composition-api.vue
index b2936c962..713330e43 100644
--- a/examples/sites/demos/pc/app/select/manual-focus-blur-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/manual-focus-blur-composition-api.vue
@@ -37,7 +37,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/manual-focus-blur.vue b/examples/sites/demos/pc/app/select/manual-focus-blur.vue
index f6157e43e..ccb15426b 100644
--- a/examples/sites/demos/pc/app/select/manual-focus-blur.vue
+++ b/examples/sites/demos/pc/app/select/manual-focus-blur.vue
@@ -36,13 +36,13 @@
 </template>
 
 <script>
-import { Select, Option, Button } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyButton: Button
+    TinySelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/map-field-composition-api.vue b/examples/sites/demos/pc/app/select/map-field-composition-api.vue
index dbcbae315..990531bd0 100644
--- a/examples/sites/demos/pc/app/select/map-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/map-field-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const value1 = ref(['选项1', '选项2'])
 const value2 = ref(['001', '002'])
diff --git a/examples/sites/demos/pc/app/select/map-field.vue b/examples/sites/demos/pc/app/select/map-field.vue
index c6938e674..d25062434 100644
--- a/examples/sites/demos/pc/app/select/map-field.vue
+++ b/examples/sites/demos/pc/app/select/map-field.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/memoize-usage-composition-api.vue b/examples/sites/demos/pc/app/select/memoize-usage-composition-api.vue
index 18b873814..4c8126afe 100644
--- a/examples/sites/demos/pc/app/select/memoize-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/memoize-usage-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import Memorize from '@opentiny/vue-renderless/common/deps/memorize'
 
 const MemorizeInstance = new Memorize({ key: 'test456' })
diff --git a/examples/sites/demos/pc/app/select/memoize-usage.vue b/examples/sites/demos/pc/app/select/memoize-usage.vue
index 43af736d3..ec60ecc26 100644
--- a/examples/sites/demos/pc/app/select/memoize-usage.vue
+++ b/examples/sites/demos/pc/app/select/memoize-usage.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import Memorize from '@opentiny/vue-renderless/common/deps/memorize'
 
 const MemorizeInstance = new Memorize({ key: 'test456' })
@@ -33,8 +33,8 @@ const options = MemorizeInstance.assemble([
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/multiple-composition-api.vue b/examples/sites/demos/pc/app/select/multiple-composition-api.vue
index c73cda516..91dda35b0 100644
--- a/examples/sites/demos/pc/app/select/multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/multiple-composition-api.vue
@@ -89,7 +89,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 const options1 = ref([
diff --git a/examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue b/examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue
index fe1e35e14..2a2c496b8 100644
--- a/examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue
@@ -86,13 +86,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import {
-  Select as TinySelect,
-  Option as TinyOption,
-  Form as TinyForm,
-  FormItem as TinyFormItem,
-  Button as TinyButton
-} from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyForm, TinyFormItem, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/select/multiple-mix.vue b/examples/sites/demos/pc/app/select/multiple-mix.vue
index 6b652aad9..20d7547e2 100644
--- a/examples/sites/demos/pc/app/select/multiple-mix.vue
+++ b/examples/sites/demos/pc/app/select/multiple-mix.vue
@@ -85,15 +85,15 @@
 </template>
 
 <script>
-import { Form, FormItem, Select, Option, Button } from '@opentiny/vue'
+import { TinyForm, TinyFormItem, TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyForm: Form,
-    TinyButton: Button,
-    TinyFormItem: FormItem,
-    TinySelect: Select,
-    TinyOption: Option
+    TinyForm,
+    TinyButton,
+    TinyFormItem,
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/multiple.vue b/examples/sites/demos/pc/app/select/multiple.vue
index 93be88522..1cef115d5 100644
--- a/examples/sites/demos/pc/app/select/multiple.vue
+++ b/examples/sites/demos/pc/app/select/multiple.vue
@@ -88,13 +88,13 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/native-properties-composition-api.vue b/examples/sites/demos/pc/app/select/native-properties-composition-api.vue
index f3d451ad9..a8d58da0c 100644
--- a/examples/sites/demos/pc/app/select/native-properties-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/native-properties-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/native-properties.vue b/examples/sites/demos/pc/app/select/native-properties.vue
index 081772c60..b7f64fa58 100644
--- a/examples/sites/demos/pc/app/select/native-properties.vue
+++ b/examples/sites/demos/pc/app/select/native-properties.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/nest-grid-composition-api.vue b/examples/sites/demos/pc/app/select/nest-grid-composition-api.vue
index 09dc09d4b..a10456313 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-composition-api.vue
@@ -39,7 +39,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const value1 = ref('')
 const value2 = ref([])
diff --git a/examples/sites/demos/pc/app/select/nest-grid-disable-composition-api.vue b/examples/sites/demos/pc/app/select/nest-grid-disable-composition-api.vue
index 03c3807b9..87c5eebde 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-disable-composition-api.vue
@@ -27,7 +27,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const selectConfig = ref({
   checkMethod({ rowIndex }) {
diff --git a/examples/sites/demos/pc/app/select/nest-grid-disable.vue b/examples/sites/demos/pc/app/select/nest-grid-disable.vue
index 766852fec..e46b04f47 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-disable.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-disable.vue
@@ -54,11 +54,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/nest-grid-init-query-composition-api.vue b/examples/sites/demos/pc/app/select/nest-grid-init-query-composition-api.vue
index 2b4e7834d..5b842ac4d 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-init-query-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-init-query-composition-api.vue
@@ -43,7 +43,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const allData = ref([])
 const radioValue1 = ref('001')
diff --git a/examples/sites/demos/pc/app/select/nest-grid-init-query.vue b/examples/sites/demos/pc/app/select/nest-grid-init-query.vue
index 434f464f9..449ef9a09 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-init-query.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-init-query.vue
@@ -42,11 +42,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   created() {
     this.allData = Array.from({ length: 10000 }, (item, index) => {
diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote-composition-api.vue b/examples/sites/demos/pc/app/select/nest-grid-remote-composition-api.vue
index fa0f9d229..8ea9af379 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-remote-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-remote-composition-api.vue
@@ -61,7 +61,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const allData = Array.from({ length: 1000 }, (a, i) => {
   return {
diff --git a/examples/sites/demos/pc/app/select/nest-grid-remote.vue b/examples/sites/demos/pc/app/select/nest-grid-remote.vue
index 692895baf..e438022b8 100644
--- a/examples/sites/demos/pc/app/select/nest-grid-remote.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid-remote.vue
@@ -60,11 +60,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   created() {
     this.allData = Array.from({ length: 1000 }, (a, i) => {
@@ -99,6 +99,7 @@ export default {
         title: '区域'
       }
     ]
+
     return {
       allData: [],
       value1: '',
diff --git a/examples/sites/demos/pc/app/select/nest-grid.vue b/examples/sites/demos/pc/app/select/nest-grid.vue
index 95acacf52..f61c3a570 100644
--- a/examples/sites/demos/pc/app/select/nest-grid.vue
+++ b/examples/sites/demos/pc/app/select/nest-grid.vue
@@ -38,11 +38,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   methods: {
     filter(value) {
diff --git a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data-composition-api.vue b/examples/sites/demos/pc/app/select/nest-radio-grid-much-data-composition-api.vue
index 6f981e0ec..de36dae05 100644
--- a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-radio-grid-much-data-composition-api.vue
@@ -5,7 +5,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const radioValue = ref('')
 const gridOpRadio = ref({
diff --git a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.vue b/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.vue
index d161eb8eb..80c67db14 100644
--- a/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.vue
+++ b/examples/sites/demos/pc/app/select/nest-radio-grid-much-data.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/nest-tree-composition-api.vue b/examples/sites/demos/pc/app/select/nest-tree-composition-api.vue
index 404e2e279..380cb6bc6 100644
--- a/examples/sites/demos/pc/app/select/nest-tree-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/nest-tree-composition-api.vue
@@ -38,7 +38,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const treeValue1 = ref(10)
 const treeValue2 = ref([9, 6])
diff --git a/examples/sites/demos/pc/app/select/nest-tree.vue b/examples/sites/demos/pc/app/select/nest-tree.vue
index 411d53f37..f17cf2316 100644
--- a/examples/sites/demos/pc/app/select/nest-tree.vue
+++ b/examples/sites/demos/pc/app/select/nest-tree.vue
@@ -64,11 +64,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue b/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue
index e17f40231..763ff0949 100644
--- a/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/no-data-text-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([])
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/select/no-data-text.vue b/examples/sites/demos/pc/app/select/no-data-text.vue
index ca0bfce81..6608f4d00 100644
--- a/examples/sites/demos/pc/app/select/no-data-text.vue
+++ b/examples/sites/demos/pc/app/select/no-data-text.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/optimization-composition-api.vue b/examples/sites/demos/pc/app/select/optimization-composition-api.vue
index 7902a155d..0a0baf593 100644
--- a/examples/sites/demos/pc/app/select/optimization-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/optimization-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Modal } from '@opentiny/vue'
+import { TinySelect, TinyModal } from '@opentiny/vue'
 
 const buildOptions = () =>
   Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项${i}","label":"北京${i}"}`))
@@ -30,7 +30,7 @@ const value2 = ref([])
 const options = ref(buildOptions())
 
 const onChange = (value) => {
-  Modal.message({
+  TinyModal.message({
     message: JSON.stringify(value),
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/select/optimization.vue b/examples/sites/demos/pc/app/select/optimization.vue
index 08e617a8a..6771a80e6 100644
--- a/examples/sites/demos/pc/app/select/optimization.vue
+++ b/examples/sites/demos/pc/app/select/optimization.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script>
-import { Select, Modal } from '@opentiny/vue'
+import { TinySelect, TinyModal } from '@opentiny/vue'
 
 const buildOptions = () =>
   Array.from({ length: 100000 }).map((item, i) => JSON.parse(`{"value":"选项${i}","label":"北京${i}"}`))
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     onChange(value) {
-      Modal.message({
+      TinyModal.message({
         message: JSON.stringify(value),
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/select/option-group-composition-api.vue b/examples/sites/demos/pc/app/select/option-group-composition-api.vue
index 837b6efa5..f74f60867 100644
--- a/examples/sites/demos/pc/app/select/option-group-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/option-group-composition-api.vue
@@ -59,7 +59,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, OptionGroup as TinyOptionGroup } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
 
 const options3 = ref([
   {
diff --git a/examples/sites/demos/pc/app/select/option-group.vue b/examples/sites/demos/pc/app/select/option-group.vue
index f4a70c944..0180641e1 100644
--- a/examples/sites/demos/pc/app/select/option-group.vue
+++ b/examples/sites/demos/pc/app/select/option-group.vue
@@ -58,13 +58,13 @@
 </template>
 
 <script>
-import { Select, Option, OptionGroup } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyOptionGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyOptionGroup: OptionGroup
+    TinySelect,
+    TinyOption,
+    TinyOptionGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/popup-style-position-composition-api.vue b/examples/sites/demos/pc/app/select/popup-style-position-composition-api.vue
index 0b4b8847a..395ca1e21 100644
--- a/examples/sites/demos/pc/app/select/popup-style-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/popup-style-position-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { reactive, ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = reactive([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/popup-style-position.vue b/examples/sites/demos/pc/app/select/popup-style-position.vue
index ada2fc539..eb6ec619a 100644
--- a/examples/sites/demos/pc/app/select/popup-style-position.vue
+++ b/examples/sites/demos/pc/app/select/popup-style-position.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/remote-method-composition-api.vue b/examples/sites/demos/pc/app/select/remote-method-composition-api.vue
index 218b9706a..f9a7cb8e8 100644
--- a/examples/sites/demos/pc/app/select/remote-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/remote-method-composition-api.vue
@@ -104,7 +104,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 const loading1 = ref(false)
 const loading2 = ref(false)
diff --git a/examples/sites/demos/pc/app/select/remote-method.vue b/examples/sites/demos/pc/app/select/remote-method.vue
index a1cdda327..cc5ffb551 100644
--- a/examples/sites/demos/pc/app/select/remote-method.vue
+++ b/examples/sites/demos/pc/app/select/remote-method.vue
@@ -103,13 +103,13 @@
 </template>
 
 <script>
-import { Select, Option, Button } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyButton: Button
+    TinySelect,
+    TinyOption,
+    TinyButton
   },
   data() {
     return {
@@ -187,6 +187,7 @@ export default {
       'Wisconsin',
       'Wyoming'
     ]
+
     this.list = states.map((item) => {
       return { value: item, label: item }
     })
diff --git a/examples/sites/demos/pc/app/select/searchable-composition-api.vue b/examples/sites/demos/pc/app/select/searchable-composition-api.vue
index 25f53e573..6c63fd983 100644
--- a/examples/sites/demos/pc/app/select/searchable-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/searchable-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/searchable.vue b/examples/sites/demos/pc/app/select/searchable.vue
index 72970e8ee..93c455955 100644
--- a/examples/sites/demos/pc/app/select/searchable.vue
+++ b/examples/sites/demos/pc/app/select/searchable.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/show-alloption-composition-api.vue b/examples/sites/demos/pc/app/select/show-alloption-composition-api.vue
index 08d5387a4..cd8caed00 100644
--- a/examples/sites/demos/pc/app/select/show-alloption-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/show-alloption-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/show-alloption.vue b/examples/sites/demos/pc/app/select/show-alloption.vue
index 90986556f..99c88fcac 100644
--- a/examples/sites/demos/pc/app/select/show-alloption.vue
+++ b/examples/sites/demos/pc/app/select/show-alloption.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/show-tip-composition-api.vue b/examples/sites/demos/pc/app/select/show-tip-composition-api.vue
index e4e0b6050..5547eabb4 100644
--- a/examples/sites/demos/pc/app/select/show-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/show-tip-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/show-tip.vue b/examples/sites/demos/pc/app/select/show-tip.vue
index 0235036eb..893023119 100644
--- a/examples/sites/demos/pc/app/select/show-tip.vue
+++ b/examples/sites/demos/pc/app/select/show-tip.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/size-composition-api.vue b/examples/sites/demos/pc/app/select/size-composition-api.vue
index fbbcbe2a2..1e684d815 100644
--- a/examples/sites/demos/pc/app/select/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/size-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/size.vue b/examples/sites/demos/pc/app/select/size.vue
index 0bef09ba9..ebd67f8ef 100644
--- a/examples/sites/demos/pc/app/select/size.vue
+++ b/examples/sites/demos/pc/app/select/size.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import { Select } from '@opentiny/vue'
+import { TinySelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select
+    TinySelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/slot-default-composition-api.vue b/examples/sites/demos/pc/app/select/slot-default-composition-api.vue
index f68fe675e..b594c0615 100644
--- a/examples/sites/demos/pc/app/select/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/slot-default-composition-api.vue
@@ -35,7 +35,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Tag as TinyTag, Tooltip as TinyTooltip } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyTag, TinyTooltip } from '@opentiny/vue'
 
 const options1 = ref([
   { value: '选项1', label: '北京', tag: 'New', tip: '自定义提示' },
diff --git a/examples/sites/demos/pc/app/select/slot-default.vue b/examples/sites/demos/pc/app/select/slot-default.vue
index 0fdfe162a..1a1689222 100644
--- a/examples/sites/demos/pc/app/select/slot-default.vue
+++ b/examples/sites/demos/pc/app/select/slot-default.vue
@@ -34,14 +34,14 @@
 </template>
 
 <script>
-import { Select, Option, Tag, Tooltip } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyTag, TinyTooltip } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
-    TinyTag: Tag,
-    TinyTooltip: Tooltip
+    TinySelect,
+    TinyOption,
+    TinyTag,
+    TinyTooltip
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/slot-empty-composition-api.vue b/examples/sites/demos/pc/app/select/slot-empty-composition-api.vue
index 3441e1dbc..ea0e58b34 100644
--- a/examples/sites/demos/pc/app/select/slot-empty-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/slot-empty-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Button as TinyButton } from '@opentiny/vue'
+import { TinySelect, TinyButton } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/select/slot-empty.vue b/examples/sites/demos/pc/app/select/slot-empty.vue
index 905d53691..61aa02d35 100644
--- a/examples/sites/demos/pc/app/select/slot-empty.vue
+++ b/examples/sites/demos/pc/app/select/slot-empty.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Select, Button } from '@opentiny/vue'
+import { TinySelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyButton: Button
+    TinySelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/select/slot-footer-composition-api.vue
index 906121c2c..c74c7d2d5 100644
--- a/examples/sites/demos/pc/app/select/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/slot-footer-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/slot-footer.vue b/examples/sites/demos/pc/app/select/slot-footer.vue
index 834e3f6c0..63cf6587a 100644
--- a/examples/sites/demos/pc/app/select/slot-footer.vue
+++ b/examples/sites/demos/pc/app/select/slot-footer.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script>
-import { Select, Option, Button } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinySelect: Select,
-    TinyOption: Option
+    TinyButton,
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/slot-label-composition-api.vue b/examples/sites/demos/pc/app/select/slot-label-composition-api.vue
index 0489a27e3..ac8568655 100644
--- a/examples/sites/demos/pc/app/select/slot-label-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/slot-label-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   {
diff --git a/examples/sites/demos/pc/app/select/slot-label.vue b/examples/sites/demos/pc/app/select/slot-label.vue
index 4b6327b15..25deb3c4b 100644
--- a/examples/sites/demos/pc/app/select/slot-label.vue
+++ b/examples/sites/demos/pc/app/select/slot-label.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/select/slot-prefix-composition-api.vue b/examples/sites/demos/pc/app/select/slot-prefix-composition-api.vue
index e8a780c53..005f42edf 100644
--- a/examples/sites/demos/pc/app/select/slot-prefix-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/slot-prefix-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { iconLocation } from '@opentiny/vue-icon'
 
 const options = ref([
diff --git a/examples/sites/demos/pc/app/select/slot-prefix.vue b/examples/sites/demos/pc/app/select/slot-prefix.vue
index 412143852..41096e5bf 100644
--- a/examples/sites/demos/pc/app/select/slot-prefix.vue
+++ b/examples/sites/demos/pc/app/select/slot-prefix.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { iconLocation } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
+    TinySelect,
+    TinyOption,
     TinyIconLocation: iconLocation()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/select/slot-reference-composition-api.vue b/examples/sites/demos/pc/app/select/slot-reference-composition-api.vue
index 7f8eb4d2a..ec0f6cd2a 100644
--- a/examples/sites/demos/pc/app/select/slot-reference-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/slot-reference-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { iconSetting } from '@opentiny/vue-icon'
 
 const TinyIconSetting = iconSetting()
diff --git a/examples/sites/demos/pc/app/select/slot-reference.vue b/examples/sites/demos/pc/app/select/slot-reference.vue
index aafcec9fc..21824fe49 100644
--- a/examples/sites/demos/pc/app/select/slot-reference.vue
+++ b/examples/sites/demos/pc/app/select/slot-reference.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 import { iconSetting } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option,
+    TinySelect,
+    TinyOption,
     TinyIconSetting: iconSetting()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/select/tag-type-composition-api.vue b/examples/sites/demos/pc/app/select/tag-type-composition-api.vue
index 9218484fb..41d36a615 100644
--- a/examples/sites/demos/pc/app/select/tag-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/tag-type-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 const options = ref([
   { value: '选项1', label: '北京' },
diff --git a/examples/sites/demos/pc/app/select/tag-type.vue b/examples/sites/demos/pc/app/select/tag-type.vue
index bfbfa2a79..ee6730f19 100644
--- a/examples/sites/demos/pc/app/select/tag-type.vue
+++ b/examples/sites/demos/pc/app/select/tag-type.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Select, Option } from '@opentiny/vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect,
+    TinyOption
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/skeleton/animation-composition-api.vue b/examples/sites/demos/pc/app/skeleton/animation-composition-api.vue
index 6d5b60712..4bae09c6f 100644
--- a/examples/sites/demos/pc/app/skeleton/animation-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/animation-composition-api.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton, Button as TinyButton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinyButton, TinySkeletonItem } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const animated = ref(true)
diff --git a/examples/sites/demos/pc/app/skeleton/animation.vue b/examples/sites/demos/pc/app/skeleton/animation.vue
index e1527ed94..ce50885b9 100644
--- a/examples/sites/demos/pc/app/skeleton/animation.vue
+++ b/examples/sites/demos/pc/app/skeleton/animation.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Skeleton, SkeletonItem, Button } from '@opentiny/vue'
+import { TinySkeleton, TinySkeletonItem, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton,
-    TinySkeletonItem: SkeletonItem,
-    TinyButton: Button
+    TinySkeleton,
+    TinySkeletonItem,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/skeleton/base-composition-api.vue b/examples/sites/demos/pc/app/skeleton/base-composition-api.vue
index 387bb8c06..7c1380be1 100644
--- a/examples/sites/demos/pc/app/skeleton/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/base-composition-api.vue
@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton } from '@opentiny/vue'
+import { TinySkeleton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/base.vue b/examples/sites/demos/pc/app/skeleton/base.vue
index 0347d8002..43e2f21d9 100644
--- a/examples/sites/demos/pc/app/skeleton/base.vue
+++ b/examples/sites/demos/pc/app/skeleton/base.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Skeleton } from '@opentiny/vue'
+import { TinySkeleton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton
+    TinySkeleton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue b/examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue
index 973148b79..c13dd9711 100644
--- a/examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue
@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton } from '@opentiny/vue'
+import { TinySkeleton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/complex-demo.vue b/examples/sites/demos/pc/app/skeleton/complex-demo.vue
index dbde5b97f..0e6b9d723 100644
--- a/examples/sites/demos/pc/app/skeleton/complex-demo.vue
+++ b/examples/sites/demos/pc/app/skeleton/complex-demo.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Skeleton } from '@opentiny/vue'
+import { TinySkeleton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton
+    TinySkeleton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue b/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue
index 58f1aab47..591618eba 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-layout.vue b/examples/sites/demos/pc/app/skeleton/custom-layout.vue
index 9322baa9d..37a742274 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-layout.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-layout.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import { Skeleton, SkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton,
-    TinySkeletonItem: SkeletonItem
+    TinySkeleton,
+    TinySkeletonItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue
index e4c32bc67..1292a3ef4 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue
@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton } from '@opentiny/vue'
+import { TinySkeleton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue
index bf4f8677e..66bfcc886 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Skeleton } from '@opentiny/vue'
+import { TinySkeleton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton
+    TinySkeleton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-rows-composition-api.vue b/examples/sites/demos/pc/app/skeleton/custom-rows-composition-api.vue
index 86e1150e2..4fc0953cb 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-rows-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-rows-composition-api.vue
@@ -5,5 +5,5 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton } from '@opentiny/vue'
+import { TinySkeleton } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-rows.vue b/examples/sites/demos/pc/app/skeleton/custom-rows.vue
index 3e0a7657f..8ca625c88 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-rows.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-rows.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Skeleton } from '@opentiny/vue'
+import { TinySkeleton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton
+    TinySkeleton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue b/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue
index 0cb7f4324..58d26adc1 100644
--- a/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue
@@ -13,5 +13,5 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue
index 6ce3c0d63..c544e393b 100644
--- a/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue
+++ b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { Skeleton, SkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton,
-    TinySkeletonItem: SkeletonItem
+    TinySkeleton,
+    TinySkeletonItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue b/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue
index 9332a6905..a8c917ce8 100644
--- a/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton, Button as TinyButton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinyButton, TinySkeletonItem } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const loading = ref(true)
diff --git a/examples/sites/demos/pc/app/skeleton/loading-completed.vue b/examples/sites/demos/pc/app/skeleton/loading-completed.vue
index a7466a643..f479c3ad4 100644
--- a/examples/sites/demos/pc/app/skeleton/loading-completed.vue
+++ b/examples/sites/demos/pc/app/skeleton/loading-completed.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { Skeleton, Button, SkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinyButton, TinySkeletonItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton,
-    TinyButton: Button,
-    TinySkeletonItem: SkeletonItem
+    TinySkeleton,
+    TinyButton,
+    TinySkeletonItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/skeleton/size-composition-api.vue b/examples/sites/demos/pc/app/skeleton/size-composition-api.vue
index 64238e920..f36244e0e 100644
--- a/examples/sites/demos/pc/app/skeleton/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/size-composition-api.vue
@@ -12,5 +12,5 @@
 </template>
 
 <script setup>
-import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/size.vue b/examples/sites/demos/pc/app/skeleton/size.vue
index 114ecdb90..3bdd1858f 100644
--- a/examples/sites/demos/pc/app/skeleton/size.vue
+++ b/examples/sites/demos/pc/app/skeleton/size.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Skeleton, SkeletonItem } from '@opentiny/vue'
+import { TinySkeleton, TinySkeletonItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySkeleton: Skeleton,
-    TinySkeletonItem: SkeletonItem
+    TinySkeleton,
+    TinySkeletonItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/slider/about-step-composition-api.vue b/examples/sites/demos/pc/app/slider/about-step-composition-api.vue
index 290b52347..658cddb35 100644
--- a/examples/sites/demos/pc/app/slider/about-step-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/about-step-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(20)
 </script>
diff --git a/examples/sites/demos/pc/app/slider/about-step.vue b/examples/sites/demos/pc/app/slider/about-step.vue
index 869964318..c504e6c85 100644
--- a/examples/sites/demos/pc/app/slider/about-step.vue
+++ b/examples/sites/demos/pc/app/slider/about-step.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue
index bf292a6f7..662276bcf 100644
--- a/examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider, Button as TinyButton } from '@opentiny/vue'
+import { TinySlider, TinyButton } from '@opentiny/vue'
 
 const value = ref(20)
 
diff --git a/examples/sites/demos/pc/app/slider/basic-usage.vue b/examples/sites/demos/pc/app/slider/basic-usage.vue
index 4444c4262..0f84070ac 100644
--- a/examples/sites/demos/pc/app/slider/basic-usage.vue
+++ b/examples/sites/demos/pc/app/slider/basic-usage.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Slider, Button } from '@opentiny/vue'
+import { TinySlider, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider,
-    TinyButton: Button
+    TinySlider,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/slider/dynamic-disable-composition-api.vue
index 2e4f4be7a..0cb104e77 100644
--- a/examples/sites/demos/pc/app/slider/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/dynamic-disable-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(40)
 </script>
diff --git a/examples/sites/demos/pc/app/slider/dynamic-disable.vue b/examples/sites/demos/pc/app/slider/dynamic-disable.vue
index d5fb5467b..b08f967fe 100644
--- a/examples/sites/demos/pc/app/slider/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/slider/dynamic-disable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/format-tooltip-composition-api.vue b/examples/sites/demos/pc/app/slider/format-tooltip-composition-api.vue
index ef3b194dd..82834057c 100644
--- a/examples/sites/demos/pc/app/slider/format-tooltip-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/format-tooltip-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(20)
 
diff --git a/examples/sites/demos/pc/app/slider/format-tooltip.vue b/examples/sites/demos/pc/app/slider/format-tooltip.vue
index 55c1ac07b..a280e0c37 100644
--- a/examples/sites/demos/pc/app/slider/format-tooltip.vue
+++ b/examples/sites/demos/pc/app/slider/format-tooltip.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/marks-composition-api.vue b/examples/sites/demos/pc/app/slider/marks-composition-api.vue
index 5442d31df..b01047d2c 100644
--- a/examples/sites/demos/pc/app/slider/marks-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/marks-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const marks = ref({
   10: '10%',
diff --git a/examples/sites/demos/pc/app/slider/marks.vue b/examples/sites/demos/pc/app/slider/marks.vue
index 0411ee2f7..c2139e216 100644
--- a/examples/sites/demos/pc/app/slider/marks.vue
+++ b/examples/sites/demos/pc/app/slider/marks.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/max-min-composition-api.vue b/examples/sites/demos/pc/app/slider/max-min-composition-api.vue
index 5f4186b86..a19d6f9ec 100644
--- a/examples/sites/demos/pc/app/slider/max-min-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/max-min-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(30)
 </script>
diff --git a/examples/sites/demos/pc/app/slider/max-min.vue b/examples/sites/demos/pc/app/slider/max-min.vue
index 91d137848..f9598671d 100644
--- a/examples/sites/demos/pc/app/slider/max-min.vue
+++ b/examples/sites/demos/pc/app/slider/max-min.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/range-select-composition-api.vue b/examples/sites/demos/pc/app/slider/range-select-composition-api.vue
index f5f363df3..390a3ca19 100644
--- a/examples/sites/demos/pc/app/slider/range-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/range-select-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref([20, 40])
 </script>
diff --git a/examples/sites/demos/pc/app/slider/range-select.vue b/examples/sites/demos/pc/app/slider/range-select.vue
index 1adb435da..cfa6e94fb 100644
--- a/examples/sites/demos/pc/app/slider/range-select.vue
+++ b/examples/sites/demos/pc/app/slider/range-select.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/shortcut-operation-composition-api.vue b/examples/sites/demos/pc/app/slider/shortcut-operation-composition-api.vue
index 44884cf6c..e08544772 100644
--- a/examples/sites/demos/pc/app/slider/shortcut-operation-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/shortcut-operation-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(40)
 </script>
diff --git a/examples/sites/demos/pc/app/slider/shortcut-operation.vue b/examples/sites/demos/pc/app/slider/shortcut-operation.vue
index 80ec67961..b5a471b60 100644
--- a/examples/sites/demos/pc/app/slider/shortcut-operation.vue
+++ b/examples/sites/demos/pc/app/slider/shortcut-operation.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/show-input-composition-api.vue b/examples/sites/demos/pc/app/slider/show-input-composition-api.vue
index 0426936bc..a9a25ac82 100644
--- a/examples/sites/demos/pc/app/slider/show-input-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/show-input-composition-api.vue
@@ -5,7 +5,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(40)
 const value2 = ref([40, 60])
diff --git a/examples/sites/demos/pc/app/slider/show-input.vue b/examples/sites/demos/pc/app/slider/show-input.vue
index c087d6f3f..e0e8288af 100644
--- a/examples/sites/demos/pc/app/slider/show-input.vue
+++ b/examples/sites/demos/pc/app/slider/show-input.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/show-tip-composition-api.vue b/examples/sites/demos/pc/app/slider/show-tip-composition-api.vue
index 0d71e28ec..5f771ca84 100644
--- a/examples/sites/demos/pc/app/slider/show-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/show-tip-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(20)
 
diff --git a/examples/sites/demos/pc/app/slider/show-tip.vue b/examples/sites/demos/pc/app/slider/show-tip.vue
index 66873a80f..c669d498e 100644
--- a/examples/sites/demos/pc/app/slider/show-tip.vue
+++ b/examples/sites/demos/pc/app/slider/show-tip.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/slider-event-composition-api.vue b/examples/sites/demos/pc/app/slider/slider-event-composition-api.vue
index 33b879955..cae6484c4 100644
--- a/examples/sites/demos/pc/app/slider/slider-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/slider-event-composition-api.vue
@@ -4,12 +4,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider, Notify } from '@opentiny/vue'
+import { TinySlider, TinyNotify } from '@opentiny/vue'
 
 const value = ref(40)
 
 function start(val) {
-  Notify({
+  TinyNotify({
     title: '触发开始滑动事件',
     message: `${JSON.stringify(val)}`,
     offset: 100
@@ -17,7 +17,7 @@ function start(val) {
 }
 
 function change(val) {
-  Notify({
+  TinyNotify({
     title: '触发change事件',
     message: `改变值为${val}`,
     offset: 100
@@ -25,7 +25,7 @@ function change(val) {
 }
 
 function stop(val) {
-  Notify({
+  TinyNotify({
     title: '触发停止滑动事件',
     message: `停止后值为${val}`,
     offset: 150
diff --git a/examples/sites/demos/pc/app/slider/slider-event.vue b/examples/sites/demos/pc/app/slider/slider-event.vue
index 270c0fccd..119ea4cc0 100644
--- a/examples/sites/demos/pc/app/slider/slider-event.vue
+++ b/examples/sites/demos/pc/app/slider/slider-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider, Notify } from '@opentiny/vue'
+import { TinySlider, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
@@ -16,21 +16,21 @@ export default {
   },
   methods: {
     start(val) {
-      Notify({
+      TinyNotify({
         title: '触发开始滑动事件',
         message: `${JSON.stringify(val)}`,
         offset: 100
       })
     },
     change(val) {
-      Notify({
+      TinyNotify({
         title: '触发change事件',
         message: `改变值为${val}`,
         offset: 100
       })
     },
     stop(val) {
-      Notify({
+      TinyNotify({
         title: '触发停止滑动事件',
         message: `停止后值为${val}`,
         offset: 150
diff --git a/examples/sites/demos/pc/app/slider/slider-slot-composition-api.vue b/examples/sites/demos/pc/app/slider/slider-slot-composition-api.vue
index f2e26dbdf..f01dbaddb 100644
--- a/examples/sites/demos/pc/app/slider/slider-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/slider-slot-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(40)
 </script>
diff --git a/examples/sites/demos/pc/app/slider/slider-slot.vue b/examples/sites/demos/pc/app/slider/slider-slot.vue
index fe37ccd69..b7d534543 100644
--- a/examples/sites/demos/pc/app/slider/slider-slot.vue
+++ b/examples/sites/demos/pc/app/slider/slider-slot.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/slider/vertical-mode-composition-api.vue b/examples/sites/demos/pc/app/slider/vertical-mode-composition-api.vue
index ff5ba6404..f8d2b161b 100644
--- a/examples/sites/demos/pc/app/slider/vertical-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/vertical-mode-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Slider as TinySlider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 const value = ref(30)
 </script>
diff --git a/examples/sites/demos/pc/app/slider/vertical-mode.vue b/examples/sites/demos/pc/app/slider/vertical-mode.vue
index 5dc72b3a4..10f7799e9 100644
--- a/examples/sites/demos/pc/app/slider/vertical-mode.vue
+++ b/examples/sites/demos/pc/app/slider/vertical-mode.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Slider } from '@opentiny/vue'
+import { TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySlider: Slider
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/split/basic-usage-composition-api.vue
index b2cf84ac8..8dec4eadc 100644
--- a/examples/sites/demos/pc/app/split/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/basic-usage-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.5)
 </script>
diff --git a/examples/sites/demos/pc/app/split/basic-usage.vue b/examples/sites/demos/pc/app/split/basic-usage.vue
index aa3e48b58..bf09b199a 100644
--- a/examples/sites/demos/pc/app/split/basic-usage.vue
+++ b/examples/sites/demos/pc/app/split/basic-usage.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/collapsible-composition-api.vue b/examples/sites/demos/pc/app/split/collapsible-composition-api.vue
index 6e3ab3f1e..78a5e7910 100644
--- a/examples/sites/demos/pc/app/split/collapsible-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/collapsible-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.5)
 const split2 = ref(0.5)
diff --git a/examples/sites/demos/pc/app/split/collapsible.vue b/examples/sites/demos/pc/app/split/collapsible.vue
index 6faf36222..a8ca83c17 100644
--- a/examples/sites/demos/pc/app/split/collapsible.vue
+++ b/examples/sites/demos/pc/app/split/collapsible.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/disabled-drag-composition-api.vue b/examples/sites/demos/pc/app/split/disabled-drag-composition-api.vue
index 4c6b903d4..e3057eebc 100644
--- a/examples/sites/demos/pc/app/split/disabled-drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/disabled-drag-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.5)
 </script>
diff --git a/examples/sites/demos/pc/app/split/disabled-drag.vue b/examples/sites/demos/pc/app/split/disabled-drag.vue
index 6b1c0ac34..4c4b1ec83 100644
--- a/examples/sites/demos/pc/app/split/disabled-drag.vue
+++ b/examples/sites/demos/pc/app/split/disabled-drag.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/event-click-composition-api.vue b/examples/sites/demos/pc/app/split/event-click-composition-api.vue
index 51b7daf36..f21810c02 100644
--- a/examples/sites/demos/pc/app/split/event-click-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/event-click-composition-api.vue
@@ -20,15 +20,15 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Split as TinySplit, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 const split1 = ref(0.5)
 
 function leftTopClick() {
-  Modal.message('点击事件1')
+  TinyModal.message('点击事件1')
 }
 function rightBottomClick() {
-  Modal.message('点击事件2')
+  TinyModal.message('点击事件2')
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/split/event-click.vue b/examples/sites/demos/pc/app/split/event-click.vue
index 7a961cc9f..1c6315a79 100644
--- a/examples/sites/demos/pc/app/split/event-click.vue
+++ b/examples/sites/demos/pc/app/split/event-click.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import { Split, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
@@ -32,10 +32,10 @@ export default {
   },
   methods: {
     leftTopClick() {
-      Modal.message('点击事件1')
+      TinyModal.message('点击事件1')
     },
     rightBottomClick() {
-      Modal.message('点击事件2')
+      TinyModal.message('点击事件2')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/split/horizontal-collapse-composition-api.vue b/examples/sites/demos/pc/app/split/horizontal-collapse-composition-api.vue
index a0ddb4da2..d8b96b79e 100644
--- a/examples/sites/demos/pc/app/split/horizontal-collapse-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/horizontal-collapse-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.5)
 </script>
diff --git a/examples/sites/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue b/examples/sites/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue
index feb080445..709052b0a 100644
--- a/examples/sites/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/horizontal-collapse-left-top-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.5)
 </script>
diff --git a/examples/sites/demos/pc/app/split/horizontal-collapse-left-top.vue b/examples/sites/demos/pc/app/split/horizontal-collapse-left-top.vue
index 1d909f9b4..e0a8e1139 100644
--- a/examples/sites/demos/pc/app/split/horizontal-collapse-left-top.vue
+++ b/examples/sites/demos/pc/app/split/horizontal-collapse-left-top.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/horizontal-collapse.vue b/examples/sites/demos/pc/app/split/horizontal-collapse.vue
index c6d109164..a576093f5 100644
--- a/examples/sites/demos/pc/app/split/horizontal-collapse.vue
+++ b/examples/sites/demos/pc/app/split/horizontal-collapse.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/left-right-slot-composition-api.vue b/examples/sites/demos/pc/app/split/left-right-slot-composition-api.vue
index 0eeb56f25..01edb40d0 100644
--- a/examples/sites/demos/pc/app/split/left-right-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/left-right-slot-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split2 = ref(0.4)
 </script>
diff --git a/examples/sites/demos/pc/app/split/left-right-slot.vue b/examples/sites/demos/pc/app/split/left-right-slot.vue
index 572e22646..a3a009fb8 100644
--- a/examples/sites/demos/pc/app/split/left-right-slot.vue
+++ b/examples/sites/demos/pc/app/split/left-right-slot.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/moveend-event-composition-api.vue b/examples/sites/demos/pc/app/split/moveend-event-composition-api.vue
index e5a25b9d4..d9dbcae4d 100644
--- a/examples/sites/demos/pc/app/split/moveend-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/moveend-event-composition-api.vue
@@ -13,12 +13,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 const split1 = ref(0.3)
 
 function moveend() {
-  Modal.message('拖拽结束')
+  TinyModal.message('拖拽结束')
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/split/moveend-event.vue b/examples/sites/demos/pc/app/split/moveend-event.vue
index 548fb000b..44c0bc538 100644
--- a/examples/sites/demos/pc/app/split/moveend-event.vue
+++ b/examples/sites/demos/pc/app/split/moveend-event.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Split, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     moveend() {
-      Modal.message('拖拽结束')
+      TinyModal.message('拖拽结束')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/split/movestart-event-composition-api.vue b/examples/sites/demos/pc/app/split/movestart-event-composition-api.vue
index 27e536942..774a03e10 100644
--- a/examples/sites/demos/pc/app/split/movestart-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/movestart-event-composition-api.vue
@@ -13,12 +13,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 const split1 = ref(0.3)
 
 function movestart() {
-  Modal.message('拖拽开始')
+  TinyModal.message('拖拽开始')
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/split/movestart-event.vue b/examples/sites/demos/pc/app/split/movestart-event.vue
index 113aca0ad..3af82467d 100644
--- a/examples/sites/demos/pc/app/split/movestart-event.vue
+++ b/examples/sites/demos/pc/app/split/movestart-event.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Split, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     movestart() {
-      Modal.message('拖拽开始')
+      TinyModal.message('拖拽开始')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/split/moving-event-composition-api.vue b/examples/sites/demos/pc/app/split/moving-event-composition-api.vue
index 65780dcc2..1dc1a929d 100644
--- a/examples/sites/demos/pc/app/split/moving-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/moving-event-composition-api.vue
@@ -13,12 +13,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 const split1 = ref(0.3)
 
 function moving() {
-  Modal.message('正在拖拽...')
+  TinyModal.message('正在拖拽...')
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/split/moving-event.vue b/examples/sites/demos/pc/app/split/moving-event.vue
index 84010d092..971658cf9 100644
--- a/examples/sites/demos/pc/app/split/moving-event.vue
+++ b/examples/sites/demos/pc/app/split/moving-event.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Split, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     moving() {
-      Modal.message('正在拖拽...')
+      TinyModal.message('正在拖拽...')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/split/nested-use-composition-api.vue b/examples/sites/demos/pc/app/split/nested-use-composition-api.vue
index 59c9c9ac0..596982312 100644
--- a/examples/sites/demos/pc/app/split/nested-use-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/nested-use-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split3 = ref(0.5)
 const split4 = ref(0.5)
diff --git a/examples/sites/demos/pc/app/split/nested-use.vue b/examples/sites/demos/pc/app/split/nested-use.vue
index 439e0ab52..6e482b161 100644
--- a/examples/sites/demos/pc/app/split/nested-use.vue
+++ b/examples/sites/demos/pc/app/split/nested-use.vue
@@ -21,11 +21,11 @@
 </template>
 
 <script lang="jsx">
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/split-mode-composition-api.vue b/examples/sites/demos/pc/app/split/split-mode-composition-api.vue
index 5ee6aa2e0..e5017e2e6 100644
--- a/examples/sites/demos/pc/app/split/split-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/split-mode-composition-api.vue
@@ -13,21 +13,21 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 const split1 = ref(0.3)
 const split2 = ref(0.4)
 
 function movestart() {
-  Modal.message({ message: '拖拽开始', status: 'info' })
+  TinyModal.message({ message: '拖拽开始', status: 'info' })
 }
 
 function moving() {
-  Modal.message({ message: '正在拖拽...', status: 'info' })
+  TinyModal.message({ message: '正在拖拽...', status: 'info' })
 }
 
 function moveend() {
-  Modal.message({ message: '拖拽结束', status: 'info' })
+  TinyModal.message({ message: '拖拽结束', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/split/split-mode.vue b/examples/sites/demos/pc/app/split/split-mode.vue
index 5aae09bd4..780bc1601 100644
--- a/examples/sites/demos/pc/app/split/split-mode.vue
+++ b/examples/sites/demos/pc/app/split/split-mode.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Split, Modal } from '@opentiny/vue'
+import { TinySplit, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
@@ -26,13 +26,13 @@ export default {
   },
   methods: {
     movestart() {
-      Modal.message({ message: '拖拽开始', status: 'info' })
+      TinyModal.message({ message: '拖拽开始', status: 'info' })
     },
     moving() {
-      Modal.message({ message: '正在拖拽...', status: 'info' })
+      TinyModal.message({ message: '正在拖拽...', status: 'info' })
     },
     moveend() {
-      Modal.message({ message: '拖拽结束', status: 'info' })
+      TinyModal.message({ message: '拖拽结束', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/split/split-threshold-composition-api.vue b/examples/sites/demos/pc/app/split/split-threshold-composition-api.vue
index ee43ae90e..eeb496c80 100644
--- a/examples/sites/demos/pc/app/split/split-threshold-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/split-threshold-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.3)
 </script>
diff --git a/examples/sites/demos/pc/app/split/split-threshold.vue b/examples/sites/demos/pc/app/split/split-threshold.vue
index 77d8a39b3..391a6b456 100644
--- a/examples/sites/demos/pc/app/split/split-threshold.vue
+++ b/examples/sites/demos/pc/app/split/split-threshold.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/three-areas-composition-api.vue b/examples/sites/demos/pc/app/split/three-areas-composition-api.vue
index 2c58923e3..3f2297910 100644
--- a/examples/sites/demos/pc/app/split/three-areas-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/three-areas-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.8)
 const split2 = ref(0.25)
diff --git a/examples/sites/demos/pc/app/split/three-areas.vue b/examples/sites/demos/pc/app/split/three-areas.vue
index b3780e3a5..3fb4fd64f 100644
--- a/examples/sites/demos/pc/app/split/three-areas.vue
+++ b/examples/sites/demos/pc/app/split/three-areas.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/top-bottom-slot-composition-api.vue b/examples/sites/demos/pc/app/split/top-bottom-slot-composition-api.vue
index 11584f8be..1a56a2961 100644
--- a/examples/sites/demos/pc/app/split/top-bottom-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/top-bottom-slot-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.3)
 </script>
diff --git a/examples/sites/demos/pc/app/split/top-bottom-slot.vue b/examples/sites/demos/pc/app/split/top-bottom-slot.vue
index 54295636d..15f8b992e 100644
--- a/examples/sites/demos/pc/app/split/top-bottom-slot.vue
+++ b/examples/sites/demos/pc/app/split/top-bottom-slot.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="jsx">
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/trigger-simple-composition-api.vue b/examples/sites/demos/pc/app/split/trigger-simple-composition-api.vue
index 5cd55827e..20f556a39 100644
--- a/examples/sites/demos/pc/app/split/trigger-simple-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/trigger-simple-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 const split1 = ref(0.5)
 </script>
diff --git a/examples/sites/demos/pc/app/split/trigger-simple.vue b/examples/sites/demos/pc/app/split/trigger-simple.vue
index 09ad036b6..c64f05b86 100644
--- a/examples/sites/demos/pc/app/split/trigger-simple.vue
+++ b/examples/sites/demos/pc/app/split/trigger-simple.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySplit: Split
+    TinySplit
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/split/trigger-slot-composition-api.vue b/examples/sites/demos/pc/app/split/trigger-slot-composition-api.vue
index 1fb02f4a5..580b20c57 100644
--- a/examples/sites/demos/pc/app/split/trigger-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/split/trigger-slot-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Split as TinySplit } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 import { IconPause } from '@opentiny/vue-icon'
 
 const split2 = ref(0.4)
diff --git a/examples/sites/demos/pc/app/split/trigger-slot.vue b/examples/sites/demos/pc/app/split/trigger-slot.vue
index 79b9aa6f2..3d6d4999e 100644
--- a/examples/sites/demos/pc/app/split/trigger-slot.vue
+++ b/examples/sites/demos/pc/app/split/trigger-slot.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Split } from '@opentiny/vue'
+import { TinySplit } from '@opentiny/vue'
 import { IconPause } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySplit: Split,
+    TinySplit,
     TinyIconPause: IconPause()
   },
   data() {
diff --git a/examples/sites/demos/pc/app/statistic/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/statistic/basic-usage-composition-api.vue
index a9deedd16..6b26ff321 100644
--- a/examples/sites/demos/pc/app/statistic/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/statistic/basic-usage-composition-api.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyStatistic, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 const num = 306526.23
 </script>
diff --git a/examples/sites/demos/pc/app/statistic/basic-usage.vue b/examples/sites/demos/pc/app/statistic/basic-usage.vue
index 7e8a97bfa..de6e17333 100644
--- a/examples/sites/demos/pc/app/statistic/basic-usage.vue
+++ b/examples/sites/demos/pc/app/statistic/basic-usage.vue
@@ -14,14 +14,14 @@
 </template>
 
 <script>
-import { Statistic, Layout, Row, Col } from '@opentiny/vue'
+import { TinyStatistic, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyStatistic: Statistic,
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyStatistic,
+    TinyLayout,
+    TinyRow,
+    TinyCol
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/statistic/prefix-suffix-slot-composition-api.vue b/examples/sites/demos/pc/app/statistic/prefix-suffix-slot-composition-api.vue
index 0e22a2788..4527e3139 100644
--- a/examples/sites/demos/pc/app/statistic/prefix-suffix-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/statistic/prefix-suffix-slot-composition-api.vue
@@ -23,5 +23,5 @@
 </template>
 
 <script setup>
-import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyStatistic, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/statistic/prefix-suffix-slot.vue b/examples/sites/demos/pc/app/statistic/prefix-suffix-slot.vue
index fbfe4db28..8d05383ca 100644
--- a/examples/sites/demos/pc/app/statistic/prefix-suffix-slot.vue
+++ b/examples/sites/demos/pc/app/statistic/prefix-suffix-slot.vue
@@ -23,14 +23,14 @@
 </template>
 
 <script>
-import { Statistic, Layout, Row, Col } from '@opentiny/vue'
+import { TinyStatistic, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyStatistic: Statistic,
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyStatistic,
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/statistic/statistic-slot-composition-api.vue b/examples/sites/demos/pc/app/statistic/statistic-slot-composition-api.vue
index 2b3b8054b..52aa59e95 100644
--- a/examples/sites/demos/pc/app/statistic/statistic-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/statistic/statistic-slot-composition-api.vue
@@ -19,5 +19,5 @@
 </template>
 
 <script setup>
-import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyStatistic, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/statistic/statistic-slot.vue b/examples/sites/demos/pc/app/statistic/statistic-slot.vue
index e8d11ab14..58d518f55 100644
--- a/examples/sites/demos/pc/app/statistic/statistic-slot.vue
+++ b/examples/sites/demos/pc/app/statistic/statistic-slot.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script>
-import { Statistic, Layout, Row, Col } from '@opentiny/vue'
+import { TinyStatistic, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyStatistic: Statistic,
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyStatistic,
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/statistic/statistic-style-composition-api.vue b/examples/sites/demos/pc/app/statistic/statistic-style-composition-api.vue
index 9a441ab7c..d6b949304 100644
--- a/examples/sites/demos/pc/app/statistic/statistic-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/statistic/statistic-style-composition-api.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TinyStatistic, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/statistic/statistic-style.vue b/examples/sites/demos/pc/app/statistic/statistic-style.vue
index 004222216..91a2cb343 100644
--- a/examples/sites/demos/pc/app/statistic/statistic-style.vue
+++ b/examples/sites/demos/pc/app/statistic/statistic-style.vue
@@ -27,14 +27,14 @@
 </template>
 
 <script>
-import { Statistic, Layout, Row, Col } from '@opentiny/vue'
+import { TinyStatistic, TinyLayout, TinyRow, TinyCol } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyStatistic: Statistic,
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyStatistic,
+    TinyLayout,
+    TinyRow,
+    TinyCol
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
index 284bb1e8c..53621a29d 100644
--- a/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Steps as TinySteps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 const advancedActive = ref(1)
 const data = ref([
@@ -25,6 +25,6 @@ const data = ref([
 const advancedClick = (index, node) => {
   advancedActive.value = index
 
-  Modal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
+  TinyModal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/steps/advanced-steps.vue b/examples/sites/demos/pc/app/steps/advanced-steps.vue
index 46f17f0a0..d8f547cac 100644
--- a/examples/sites/demos/pc/app/steps/advanced-steps.vue
+++ b/examples/sites/demos/pc/app/steps/advanced-steps.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -32,7 +32,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
+      TinyModal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/steps/click-composition-api.vue b/examples/sites/demos/pc/app/steps/click-composition-api.vue
index 401a96978..48171124a 100644
--- a/examples/sites/demos/pc/app/steps/click-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/click-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Steps as TinySteps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 const stepsData = ref([
   {
@@ -35,7 +35,7 @@ const defaultActive = ref(1)
 const normalClick = (index, node) => {
   defaultActive.value = index
 
-  Modal.message({ message: `节点 index：${index}；节点信息： ${JSON.stringify(node)}`, status: 'info' })
+  TinyModal.message({ message: `节点 index：${index}；节点信息： ${JSON.stringify(node)}`, status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/steps/click.vue b/examples/sites/demos/pc/app/steps/click.vue
index a9f6caaa4..84463c17e 100644
--- a/examples/sites/demos/pc/app/steps/click.vue
+++ b/examples/sites/demos/pc/app/steps/click.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -42,7 +42,7 @@ export default {
     normalClick(index, node) {
       this.defaultActive = index
 
-      Modal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
+      TinyModal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue b/examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue
index 8cc1e6e22..923385129 100644
--- a/examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Steps as TinySteps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 const stepsData = ref([
   {
diff --git a/examples/sites/demos/pc/app/steps/custom-steps-item.vue b/examples/sites/demos/pc/app/steps/custom-steps-item.vue
index 2ff73eb8b..37d07928c 100644
--- a/examples/sites/demos/pc/app/steps/custom-steps-item.vue
+++ b/examples/sites/demos/pc/app/steps/custom-steps-item.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Steps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/steps/duration-composition-api.vue b/examples/sites/demos/pc/app/steps/duration-composition-api.vue
index b5d31a00b..91356f437 100644
--- a/examples/sites/demos/pc/app/steps/duration-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/duration-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Steps as TinySteps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 const duration = ref(1000)
 const advancedActive = ref(2)
diff --git a/examples/sites/demos/pc/app/steps/duration.vue b/examples/sites/demos/pc/app/steps/duration.vue
index 590b5d9a9..1f276c7f8 100644
--- a/examples/sites/demos/pc/app/steps/duration.vue
+++ b/examples/sites/demos/pc/app/steps/duration.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Steps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/steps/line-dot-composition-api.vue b/examples/sites/demos/pc/app/steps/line-dot-composition-api.vue
index 5da42e357..ad26f668c 100644
--- a/examples/sites/demos/pc/app/steps/line-dot-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/line-dot-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Steps as TinySteps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 const active = ref(1)
 const data = reactive([
@@ -27,6 +27,6 @@ const data = reactive([
 const advancedClick = (index, node) => {
   active.value = index
 
-  Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
+  TinyModal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/steps/line-dot.vue b/examples/sites/demos/pc/app/steps/line-dot.vue
index 590f89282..1835c07b9 100644
--- a/examples/sites/demos/pc/app/steps/line-dot.vue
+++ b/examples/sites/demos/pc/app/steps/line-dot.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -34,7 +34,7 @@ export default {
     advancedClick(index, node) {
       this.active = index
 
-      Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
+      TinyModal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/steps/line-horizontal-composition-api.vue b/examples/sites/demos/pc/app/steps/line-horizontal-composition-api.vue
index 9de0f8781..86af2df68 100644
--- a/examples/sites/demos/pc/app/steps/line-horizontal-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/line-horizontal-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Steps as TinySteps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 const active = ref(1)
 const data1 = reactive([
@@ -36,6 +36,6 @@ const data2 = reactive([
 
 const advancedClick = (index, node) => {
   active.value = index
-  Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
+  TinyModal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/steps/line-horizontal.vue b/examples/sites/demos/pc/app/steps/line-horizontal.vue
index 4191d4b17..159780f96 100644
--- a/examples/sites/demos/pc/app/steps/line-horizontal.vue
+++ b/examples/sites/demos/pc/app/steps/line-horizontal.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -43,7 +43,7 @@ export default {
   methods: {
     advancedClick(index, node) {
       this.active = index
-      Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
+      TinyModal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/steps/line-vertical-composition-api.vue b/examples/sites/demos/pc/app/steps/line-vertical-composition-api.vue
index 66f01c94e..04de96ecd 100644
--- a/examples/sites/demos/pc/app/steps/line-vertical-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/line-vertical-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { Steps as TinySteps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 const active = ref(1)
 const data = reactive([
@@ -26,6 +26,6 @@ const data = reactive([
 const advancedClick = (index, node) => {
   active.value = index
 
-  Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
+  TinyModal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/steps/line-vertical.vue b/examples/sites/demos/pc/app/steps/line-vertical.vue
index d41392355..1c539d428 100644
--- a/examples/sites/demos/pc/app/steps/line-vertical.vue
+++ b/examples/sites/demos/pc/app/steps/line-vertical.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Steps, Modal } from '@opentiny/vue'
+import { TinySteps, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
@@ -33,7 +33,7 @@ export default {
     advancedClick(index, node) {
       this.active = index
 
-      Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
+      TinyModal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/steps/node-width-composition-api.vue b/examples/sites/demos/pc/app/steps/node-width-composition-api.vue
index cad2da84a..ec05ff35e 100644
--- a/examples/sites/demos/pc/app/steps/node-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/node-width-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Steps as TinySteps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 const stepsData = ref([
   {
diff --git a/examples/sites/demos/pc/app/steps/node-width.vue b/examples/sites/demos/pc/app/steps/node-width.vue
index bd19bb5c4..1297961ef 100644
--- a/examples/sites/demos/pc/app/steps/node-width.vue
+++ b/examples/sites/demos/pc/app/steps/node-width.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Steps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/steps/size-composition-api.vue b/examples/sites/demos/pc/app/steps/size-composition-api.vue
index e4ce2b4cb..be5b877d1 100644
--- a/examples/sites/demos/pc/app/steps/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/size-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Steps as TinySteps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 const active = ref(0)
 const data = ref([
diff --git a/examples/sites/demos/pc/app/steps/size.vue b/examples/sites/demos/pc/app/steps/size.vue
index cb2d204db..dbc6899b7 100644
--- a/examples/sites/demos/pc/app/steps/size.vue
+++ b/examples/sites/demos/pc/app/steps/size.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script>
-import { Steps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue b/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
index 1ccfc617d..1ec7c6b97 100644
--- a/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Steps as TinySteps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 import { iconYes, iconClose } from '@opentiny/vue-icon'
 
 const IconYes = iconYes()
diff --git a/examples/sites/demos/pc/app/steps/slot-item-footer-composition-api.vue b/examples/sites/demos/pc/app/steps/slot-item-footer-composition-api.vue
index 4b1fbe80d..565d9e0d6 100644
--- a/examples/sites/demos/pc/app/steps/slot-item-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/slot-item-footer-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Button as TinyButton, Steps as TinySteps, Link as TinyLink } from '@opentiny/vue'
+import { TinyButton, TinySteps, TinyLink } from '@opentiny/vue'
 import { IconFilletExternalLink } from '@opentiny/vue-icon'
 
 const stepsData = ref([
diff --git a/examples/sites/demos/pc/app/steps/slot-item-footer.vue b/examples/sites/demos/pc/app/steps/slot-item-footer.vue
index 6bea8533b..f7c0cf914 100644
--- a/examples/sites/demos/pc/app/steps/slot-item-footer.vue
+++ b/examples/sites/demos/pc/app/steps/slot-item-footer.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script>
-import { Button, Steps, Link } from '@opentiny/vue'
+import { TinyButton, TinySteps, TinyLink } from '@opentiny/vue'
 import { IconFilletExternalLink } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
-    TinySteps: Steps,
-    TinyLink: Link
+    TinyButton,
+    TinySteps,
+    TinyLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/steps/slot-item.vue b/examples/sites/demos/pc/app/steps/slot-item.vue
index b4a300706..a93424c38 100644
--- a/examples/sites/demos/pc/app/steps/slot-item.vue
+++ b/examples/sites/demos/pc/app/steps/slot-item.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { Steps } from '@opentiny/vue'
+import { TinySteps } from '@opentiny/vue'
 import { IconYes, IconClose } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySteps: Steps
+    TinySteps
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/sticky/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/sticky/basic-usage-composition-api.vue
index eedd6cc05..08723a3d6 100644
--- a/examples/sites/demos/pc/app/sticky/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/sticky/basic-usage-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/sticky/basic-usage.vue b/examples/sites/demos/pc/app/sticky/basic-usage.vue
index 3c1ef5e42..a64802a4a 100644
--- a/examples/sites/demos/pc/app/sticky/basic-usage.vue
+++ b/examples/sites/demos/pc/app/sticky/basic-usage.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/sticky/events-composition-api.vue b/examples/sites/demos/pc/app/sticky/events-composition-api.vue
index 4c72da7d0..c08132b50 100644
--- a/examples/sites/demos/pc/app/sticky/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/sticky/events-composition-api.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinySticky, TinyButton, TinyModal } from '@opentiny/vue'
 
 let isShowNumber = 0
 
 const change = (isFixed) => {
-  Modal.message({
+  TinyModal.message({
     message: `触发 change 事件，当前isFixed为：${isFixed}`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/sticky/events.vue b/examples/sites/demos/pc/app/sticky/events.vue
index d3f5e5054..91028a6ba 100644
--- a/examples/sites/demos/pc/app/sticky/events.vue
+++ b/examples/sites/demos/pc/app/sticky/events.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   },
   methods: {
     change(isFixed) {
diff --git a/examples/sites/demos/pc/app/sticky/offset-composition-api.vue b/examples/sites/demos/pc/app/sticky/offset-composition-api.vue
index c6c56ab1e..c975472f1 100644
--- a/examples/sites/demos/pc/app/sticky/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/sticky/offset-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/sticky/offset.vue b/examples/sites/demos/pc/app/sticky/offset.vue
index a4d446e9e..6c08342de 100644
--- a/examples/sites/demos/pc/app/sticky/offset.vue
+++ b/examples/sites/demos/pc/app/sticky/offset.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/sticky/position-composition-api.vue b/examples/sites/demos/pc/app/sticky/position-composition-api.vue
index ef906cc7d..85a32403d 100644
--- a/examples/sites/demos/pc/app/sticky/position-composition-api.vue
+++ b/examples/sites/demos/pc/app/sticky/position-composition-api.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/sticky/position.vue b/examples/sites/demos/pc/app/sticky/position.vue
index 8bdef83fc..9390ba697 100644
--- a/examples/sites/demos/pc/app/sticky/position.vue
+++ b/examples/sites/demos/pc/app/sticky/position.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/sticky/target-composition-api.vue b/examples/sites/demos/pc/app/sticky/target-composition-api.vue
index 576e5b703..6832cf6f3 100644
--- a/examples/sites/demos/pc/app/sticky/target-composition-api.vue
+++ b/examples/sites/demos/pc/app/sticky/target-composition-api.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { Sticky as TinySticky, Button as TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/sticky/target.vue b/examples/sites/demos/pc/app/sticky/target.vue
index ad47a2e59..60557ceeb 100644
--- a/examples/sites/demos/pc/app/sticky/target.vue
+++ b/examples/sites/demos/pc/app/sticky/target.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import { Sticky, Button } from '@opentiny/vue'
+import { TinySticky, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySticky: Sticky,
-    TinyButton: Button
+    TinySticky,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/switch/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/switch/basic-usage-composition-api.vue
index 4a3ec6a9c..264a8e129 100644
--- a/examples/sites/demos/pc/app/switch/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Switch as TinySwitch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 const value = ref(true)
 </script>
diff --git a/examples/sites/demos/pc/app/switch/basic-usage.vue b/examples/sites/demos/pc/app/switch/basic-usage.vue
index 547f57016..9e7bd24c8 100644
--- a/examples/sites/demos/pc/app/switch/basic-usage.vue
+++ b/examples/sites/demos/pc/app/switch/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/switch/before-change-composition-api.vue b/examples/sites/demos/pc/app/switch/before-change-composition-api.vue
index 58dbee332..711620b64 100644
--- a/examples/sites/demos/pc/app/switch/before-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/before-change-composition-api.vue
@@ -4,12 +4,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Switch as TinySwitch, Modal } from '@opentiny/vue'
+import { TinySwitch, TinyModal } from '@opentiny/vue'
 
 const value = ref(false)
 
 function beforeChange(done) {
-  Modal.message({
+  TinyModal.message({
     message: '开关切换功能已被拦截，必须调用 done 方法才能执行开关状态的切换，2s后将自动调用 done 方法切换开关状态',
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/switch/before-change.vue b/examples/sites/demos/pc/app/switch/before-change.vue
index 7cdfdf8a0..bf694844f 100644
--- a/examples/sites/demos/pc/app/switch/before-change.vue
+++ b/examples/sites/demos/pc/app/switch/before-change.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Switch, Modal } from '@opentiny/vue'
+import { TinySwitch, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     beforeChange(done) {
-      Modal.message({
+      TinyModal.message({
         message: '开关切换功能已被拦截，必须调用 done 方法才能执行开关状态的切换，2s后将自动调用 done 方法切换开关状态',
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/switch/custom-open-close-composition-api.vue b/examples/sites/demos/pc/app/switch/custom-open-close-composition-api.vue
index 5d0c0e23f..0ee9db236 100644
--- a/examples/sites/demos/pc/app/switch/custom-open-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/custom-open-close-composition-api.vue
@@ -14,11 +14,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Switch as TinySwitch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 const value1 = ref(false)
 const value2 = ref(false)
 </script>
+
 <style scoped>
 .switch-demo .tiny-switch + .tiny-switch {
   margin-left: 20px;
diff --git a/examples/sites/demos/pc/app/switch/custom-open-close-icon-composition-api.vue b/examples/sites/demos/pc/app/switch/custom-open-close-icon-composition-api.vue
index 421d7a960..aa38be1a9 100644
--- a/examples/sites/demos/pc/app/switch/custom-open-close-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/custom-open-close-icon-composition-api.vue
@@ -10,11 +10,9 @@
 </template>
 
 <script setup>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 import { IconArrowLeft, IconArrowRight } from '@opentiny/vue-icon'
 
 const TinyIconArrowLeft = IconArrowLeft()
 const TinyIconArrowRight = IconArrowRight()
-
-const TinySwitch = Switch
 </script>
diff --git a/examples/sites/demos/pc/app/switch/custom-open-close-icon.vue b/examples/sites/demos/pc/app/switch/custom-open-close-icon.vue
index 1e10f7528..a3749284e 100644
--- a/examples/sites/demos/pc/app/switch/custom-open-close-icon.vue
+++ b/examples/sites/demos/pc/app/switch/custom-open-close-icon.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 import { IconArrowLeft, IconArrowRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinySwitch: Switch,
+    TinySwitch,
     TinyIconArrowLeft: IconArrowLeft(),
     TinyIconArrowRight: IconArrowRight()
   }
diff --git a/examples/sites/demos/pc/app/switch/custom-open-close.vue b/examples/sites/demos/pc/app/switch/custom-open-close.vue
index 3a12b37c1..e5b3d0ec6 100644
--- a/examples/sites/demos/pc/app/switch/custom-open-close.vue
+++ b/examples/sites/demos/pc/app/switch/custom-open-close.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
@@ -27,6 +27,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .switch-demo .tiny-switch + .tiny-switch {
   margin-left: 20px;
diff --git a/examples/sites/demos/pc/app/switch/custom-true-false-value-composition-api.vue b/examples/sites/demos/pc/app/switch/custom-true-false-value-composition-api.vue
index fc3278886..cc8fdcf88 100644
--- a/examples/sites/demos/pc/app/switch/custom-true-false-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/custom-true-false-value-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Switch as TinySwitch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 const value = ref('yes')
 </script>
diff --git a/examples/sites/demos/pc/app/switch/custom-true-false-value.vue b/examples/sites/demos/pc/app/switch/custom-true-false-value.vue
index a622c5700..5a00af416 100644
--- a/examples/sites/demos/pc/app/switch/custom-true-false-value.vue
+++ b/examples/sites/demos/pc/app/switch/custom-true-false-value.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/switch/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/switch/dynamic-disable-composition-api.vue
index cf01663c5..402cf850e 100644
--- a/examples/sites/demos/pc/app/switch/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/dynamic-disable-composition-api.vue
@@ -7,11 +7,12 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Switch as TinySwitch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 const value1 = ref(true)
 const value2 = ref(false)
 </script>
+
 <style scoped>
 .switch-demo .tiny-switch + .tiny-switch {
   margin-left: 20px;
diff --git a/examples/sites/demos/pc/app/switch/dynamic-disable.vue b/examples/sites/demos/pc/app/switch/dynamic-disable.vue
index a9876d7e9..dd84be3a2 100644
--- a/examples/sites/demos/pc/app/switch/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/switch/dynamic-disable.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   data() {
     return {
@@ -20,6 +20,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 .switch-demo .tiny-switch + .tiny-switch {
   margin-left: 20px;
diff --git a/examples/sites/demos/pc/app/switch/event-change-composition-api.vue b/examples/sites/demos/pc/app/switch/event-change-composition-api.vue
index a1e83ba40..f1ee1f4e8 100644
--- a/examples/sites/demos/pc/app/switch/event-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/event-change-composition-api.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script setup>
-import { Switch as TinySwitch, Modal } from '@opentiny/vue'
+import { TinySwitch, TinyModal } from '@opentiny/vue'
 
 function handleChange(val) {
-  Modal.message({ message: `开关值：${val}`, status: 'info' })
+  TinyModal.message({ message: `开关值：${val}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/switch/event-change.vue b/examples/sites/demos/pc/app/switch/event-change.vue
index e5f4b3e52..ae2efde5e 100644
--- a/examples/sites/demos/pc/app/switch/event-change.vue
+++ b/examples/sites/demos/pc/app/switch/event-change.vue
@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Switch, Modal } from '@opentiny/vue'
+import { TinySwitch, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   },
   methods: {
     handleChange(val) {
-      Modal.message({ message: `开关值：${val}`, status: 'info' })
+      TinyModal.message({ message: `开关值：${val}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/switch/loading-composition-api.vue b/examples/sites/demos/pc/app/switch/loading-composition-api.vue
index 31d68b7ca..4cb73c28a 100644
--- a/examples/sites/demos/pc/app/switch/loading-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/loading-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Switch as TinySwitch, Button as TinyButton } from '@opentiny/vue'
+import { TinySwitch, TinyButton } from '@opentiny/vue'
 
 const value = ref(true)
 const value2 = ref(false)
diff --git a/examples/sites/demos/pc/app/switch/loading.vue b/examples/sites/demos/pc/app/switch/loading.vue
index 203d6e874..b27a9a315 100644
--- a/examples/sites/demos/pc/app/switch/loading.vue
+++ b/examples/sites/demos/pc/app/switch/loading.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Switch, Button } from '@opentiny/vue'
+import { TinySwitch, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch,
-    TinyButton: Button
+    TinySwitch,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/switch/mini-mode-composition-api.vue b/examples/sites/demos/pc/app/switch/mini-mode-composition-api.vue
index 94a860be9..b163688f0 100644
--- a/examples/sites/demos/pc/app/switch/mini-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/switch/mini-mode-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { Switch as TinySwitch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/switch/mini-mode.vue b/examples/sites/demos/pc/app/switch/mini-mode.vue
index 9374b9dd6..8f338aaa7 100644
--- a/examples/sites/demos/pc/app/switch/mini-mode.vue
+++ b/examples/sites/demos/pc/app/switch/mini-mode.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Switch } from '@opentiny/vue'
+import { TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinySwitch: Switch
+    TinySwitch
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
index 0e53e814f..11d949fa9 100644
--- a/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('first')
 </script>
diff --git a/examples/sites/demos/pc/app/tabs/basic-usage.vue b/examples/sites/demos/pc/app/tabs/basic-usage.vue
index c23b620aa..ef473445a 100644
--- a/examples/sites/demos/pc/app/tabs/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tabs/basic-usage.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/before-leave-composition-api.vue b/examples/sites/demos/pc/app/tabs/before-leave-composition-api.vue
index b92dbc42d..b69022e14 100644
--- a/examples/sites/demos/pc/app/tabs/before-leave-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/before-leave-composition-api.vue
@@ -11,12 +11,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem, Notify } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyNotify } from '@opentiny/vue'
 
 const activeName = ref('second')
 
 function beforeLeave() {
-  Notify({
+  TinyNotify({
     message: '触发切换标签之前事件',
     position: 'top-right'
   })
diff --git a/examples/sites/demos/pc/app/tabs/before-leave.vue b/examples/sites/demos/pc/app/tabs/before-leave.vue
index e49df78a2..276914a0d 100644
--- a/examples/sites/demos/pc/app/tabs/before-leave.vue
+++ b/examples/sites/demos/pc/app/tabs/before-leave.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem, Notify } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     beforeLeave() {
-      Notify({
+      TinyNotify({
         message: '触发切换标签之前事件',
         position: 'top-right'
       })
diff --git a/examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue b/examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue
index c9f3f768d..0d3c7f1c5 100644
--- a/examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { reactive } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 const Tabs = reactive([])
diff --git a/examples/sites/demos/pc/app/tabs/custom-more-icon.vue b/examples/sites/demos/pc/app/tabs/custom-more-icon.vue
index ede462b24..447e08427 100644
--- a/examples/sites/demos/pc/app/tabs/custom-more-icon.vue
+++ b/examples/sites/demos/pc/app/tabs/custom-more-icon.vue
@@ -10,25 +10,25 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
+    TinyTabs,
+    TinyTabItem,
     TinyIconPopup: iconPopup()
   },
   data() {
     return {
-      Tabs: []
+      TinyTabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 9; i++) {
       const title = `Tab ${i}`
-      this.Tabs.push({
+      this.TinyTabs.push({
         title,
         name: i + '',
         content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue b/examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue
index 7bc23e0b5..33e1f1027 100644
--- a/examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue
@@ -28,7 +28,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyButton } from '@opentiny/vue'
 import { iconCalendar, iconReplies } from '@opentiny/vue-icon'
 
 const activeName = ref('second')
diff --git a/examples/sites/demos/pc/app/tabs/custom-tab-title.vue b/examples/sites/demos/pc/app/tabs/custom-tab-title.vue
index a7ccc3aac..429b560bd 100644
--- a/examples/sites/demos/pc/app/tabs/custom-tab-title.vue
+++ b/examples/sites/demos/pc/app/tabs/custom-tab-title.vue
@@ -27,16 +27,16 @@
 </template>
 
 <script>
-import { Tabs, TabItem, Button } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyButton } from '@opentiny/vue'
 import { IconCalendar, IconReplies } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
+    TinyTabs,
+    TinyTabItem,
     IconCalendar: IconCalendar(),
     IconReplies: IconReplies(),
-    TinyButton: Button
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/lazy-composition-api.vue b/examples/sites/demos/pc/app/tabs/lazy-composition-api.vue
index db5bdb8d1..790119550 100644
--- a/examples/sites/demos/pc/app/tabs/lazy-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/lazy-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('second')
 </script>
diff --git a/examples/sites/demos/pc/app/tabs/lazy.vue b/examples/sites/demos/pc/app/tabs/lazy.vue
index 600493ce6..f131fadee 100644
--- a/examples/sites/demos/pc/app/tabs/lazy.vue
+++ b/examples/sites/demos/pc/app/tabs/lazy.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/more-show-all-composition-api.vue b/examples/sites/demos/pc/app/tabs/more-show-all-composition-api.vue
index d87b929cc..bc2438d28 100644
--- a/examples/sites/demos/pc/app/tabs/more-show-all-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/more-show-all-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { reactive } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 const Tabs = reactive([])
diff --git a/examples/sites/demos/pc/app/tabs/more-show-all.vue b/examples/sites/demos/pc/app/tabs/more-show-all.vue
index 40f47f5b9..aad725de0 100644
--- a/examples/sites/demos/pc/app/tabs/more-show-all.vue
+++ b/examples/sites/demos/pc/app/tabs/more-show-all.vue
@@ -10,25 +10,25 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
+    TinyTabs,
+    TinyTabItem,
     TinyIconPopup: iconPopup()
   },
   data() {
     return {
-      Tabs: []
+      TinyTabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 101; i++) {
       const title = `Tab ${i}`
-      this.Tabs.push({
+      this.TinyTabs.push({
         title,
         name: i + '',
         content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/overflow-title-composition-api.vue b/examples/sites/demos/pc/app/tabs/overflow-title-composition-api.vue
index f489baf7c..50529236b 100644
--- a/examples/sites/demos/pc/app/tabs/overflow-title-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/overflow-title-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('second')
 </script>
diff --git a/examples/sites/demos/pc/app/tabs/overflow-title.vue b/examples/sites/demos/pc/app/tabs/overflow-title.vue
index a915435fc..05c29c800 100644
--- a/examples/sites/demos/pc/app/tabs/overflow-title.vue
+++ b/examples/sites/demos/pc/app/tabs/overflow-title.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/position-composition-api.vue b/examples/sites/demos/pc/app/tabs/position-composition-api.vue
index e5aeec5ad..70a2795b8 100644
--- a/examples/sites/demos/pc/app/tabs/position-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/position-composition-api.vue
@@ -16,12 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import {
-  Tabs as TinyTabs,
-  TabItem as TinyTabItem,
-  RadioGroup as TinyRadioGroup,
-  RadioButton as TinyRadioButton
-} from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 const activeName4 = ref('navigation1')
 const position = ref('left')
diff --git a/examples/sites/demos/pc/app/tabs/position.vue b/examples/sites/demos/pc/app/tabs/position.vue
index 754621933..ccf294949 100644
--- a/examples/sites/demos/pc/app/tabs/position.vue
+++ b/examples/sites/demos/pc/app/tabs/position.vue
@@ -15,14 +15,14 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem, RadioGroup, RadioButton } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyRadioGroup: RadioGroup,
-    TinyRadioButton: RadioButton
+    TinyTabs,
+    TinyTabItem,
+    TinyRadioGroup,
+    TinyRadioButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/show-different-grid-data-composition-api.vue b/examples/sites/demos/pc/app/tabs/show-different-grid-data-composition-api.vue
index a7959451c..b00fd786c 100644
--- a/examples/sites/demos/pc/app/tabs/show-different-grid-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/show-different-grid-data-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem, Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 const activeName = ref('second')
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/tabs/show-different-grid-data.vue b/examples/sites/demos/pc/app/tabs/show-different-grid-data.vue
index 599090dda..8509bee3d 100644
--- a/examples/sites/demos/pc/app/tabs/show-different-grid-data.vue
+++ b/examples/sites/demos/pc/app/tabs/show-different-grid-data.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem, Grid, GridColumn } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyTabs,
+    TinyTabItem,
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/size-composition-api.vue b/examples/sites/demos/pc/app/tabs/size-composition-api.vue
index 6b19e37c0..296ba69e0 100644
--- a/examples/sites/demos/pc/app/tabs/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/size-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref, reactive } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('1')
 const Tabs = reactive([])
diff --git a/examples/sites/demos/pc/app/tabs/size.vue b/examples/sites/demos/pc/app/tabs/size.vue
index cde3622ae..f8efcb391 100644
--- a/examples/sites/demos/pc/app/tabs/size.vue
+++ b/examples/sites/demos/pc/app/tabs/size.vue
@@ -13,24 +13,24 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
       activeName: '1',
-      Tabs: []
+      TinyTabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 5; i++) {
       const title = `Tab ${i}`
-      this.Tabs.push({
+      this.TinyTabs.push({
         title,
         name: i + '',
         content: `${title} content `
diff --git a/examples/sites/demos/pc/app/tabs/stretch-wh-composition-api.vue b/examples/sites/demos/pc/app/tabs/stretch-wh-composition-api.vue
index 1768e752b..d5e9d6146 100644
--- a/examples/sites/demos/pc/app/tabs/stretch-wh-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/stretch-wh-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('second')
 </script>
diff --git a/examples/sites/demos/pc/app/tabs/stretch-wh.vue b/examples/sites/demos/pc/app/tabs/stretch-wh.vue
index 369ccc9b1..378c37526 100644
--- a/examples/sites/demos/pc/app/tabs/stretch-wh.vue
+++ b/examples/sites/demos/pc/app/tabs/stretch-wh.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/tab-style-bordercard-composition-api.vue b/examples/sites/demos/pc/app/tabs/tab-style-bordercard-composition-api.vue
index 70aae7f3f..87eba3475 100644
--- a/examples/sites/demos/pc/app/tabs/tab-style-bordercard-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tab-style-bordercard-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName4 = ref('navigation1')
 const tabs3 = ref([
diff --git a/examples/sites/demos/pc/app/tabs/tab-style-bordercard.vue b/examples/sites/demos/pc/app/tabs/tab-style-bordercard.vue
index d9339bb68..3e053ac8c 100644
--- a/examples/sites/demos/pc/app/tabs/tab-style-bordercard.vue
+++ b/examples/sites/demos/pc/app/tabs/tab-style-bordercard.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/tab-style-card-composition-api.vue b/examples/sites/demos/pc/app/tabs/tab-style-card-composition-api.vue
index 5b76fb515..b1e39026a 100644
--- a/examples/sites/demos/pc/app/tabs/tab-style-card-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tab-style-card-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const setTabs3 = () => {
   const arr = []
diff --git a/examples/sites/demos/pc/app/tabs/tab-style-card.vue b/examples/sites/demos/pc/app/tabs/tab-style-card.vue
index 6cbc3cb78..b37623493 100644
--- a/examples/sites/demos/pc/app/tabs/tab-style-card.vue
+++ b/examples/sites/demos/pc/app/tabs/tab-style-card.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     const setTabs3 = () => {
diff --git a/examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue
index 2c2b3b035..79f884ca9 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const tabName = ref('2')
diff --git a/examples/sites/demos/pc/app/tabs/tabs-draggable.vue b/examples/sites/demos/pc/app/tabs/tabs-draggable.vue
index eb21a4dce..a497c87c0 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-draggable.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-draggable.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
@@ -31,7 +31,7 @@ export default {
       dropConfig: {
         plugin: Sortable
       },
-      Tabs: [
+      TinyTabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -59,15 +59,15 @@ export default {
     },
     handleEnd(event) {
       const { oldDraggableIndex, newDraggableIndex } = event
-      const tab = this.Tabs.splice(oldDraggableIndex, 1)[0]
-      this.Tabs.splice(newDraggableIndex, 0, tab)
+      const tab = this.TinyTabs.splice(oldDraggableIndex, 1)[0]
+      this.TinyTabs.splice(newDraggableIndex, 0, tab)
 
-      console.log(this.Tabs)
+      console.log(this.TinyTabs)
     },
     handleAdd() {
-      this.Tabs.push({
-        title: 'Tab ' + String(this.Tabs.length + 1),
-        name: String(this.Tabs.length + 1),
+      this.TinyTabs.push({
+        title: 'Tab ' + String(this.TinyTabs.length + 1),
+        name: String(this.TinyTabs.length + 1),
         content: '动态增加tabitem'
       })
     }
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-click-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-events-click-composition-api.vue
index 21db40b91..42c0bb9ec 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-click-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-click-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('second')
 const instance = getCurrentInstance()
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-click.vue b/examples/sites/demos/pc/app/tabs/tabs-events-click.vue
index 7b2303768..050987aa3 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-click.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-click.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue
index 899096576..f598daee8 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('first')
 const Tabs = ref([
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-close.vue b/examples/sites/demos/pc/app/tabs/tabs-events-close.vue
index 7622d7b48..629b13c79 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-close.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-close.vue
@@ -13,17 +13,17 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
       activeName: 'first',
-      Tabs: [
+      TinyTabs: [
         {
           title: '表单组件',
           name: 'first',
@@ -64,7 +64,7 @@ export default {
         message: '关闭 ' + name + ' 页签'
       })
 
-      this.Tabs = this.Tabs.filter((tab) => {
+      this.TinyTabs = this.TinyTabs.filter((tab) => {
         return tab.name !== name
       })
     }
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue
index b6e28add5..b8389fe40 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('first')
 const Tabs = ref([
diff --git a/examples/sites/demos/pc/app/tabs/tabs-events-edit.vue b/examples/sites/demos/pc/app/tabs/tabs-events-edit.vue
index c5f21a07e..249f2a2ff 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-events-edit.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-events-edit.vue
@@ -7,17 +7,17 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
       activeName: 'first',
-      Tabs: [
+      TinyTabs: [
         {
           title: '表单组件',
           name: 'first',
diff --git a/examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue
index 3d732ad21..4d16e3059 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-second-layer-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('first')
 const tabs = ref([
diff --git a/examples/sites/demos/pc/app/tabs/tabs-second-layer.vue b/examples/sites/demos/pc/app/tabs/tabs-second-layer.vue
index d9b1dbf05..9f5e9083d 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-second-layer.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-second-layer.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
index 9d2df6b95..b50a55f6f 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
@@ -34,7 +34,7 @@
 
 <script setup lang="jsx">
 import { ref, reactive } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName1 = ref('first')
 const activeName2 = ref('second')
diff --git a/examples/sites/demos/pc/app/tabs/tabs-separator.vue b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
index 65c95e591..e1511a458 100644
--- a/examples/sites/demos/pc/app/tabs/tabs-separator.vue
+++ b/examples/sites/demos/pc/app/tabs/tabs-separator.vue
@@ -33,18 +33,18 @@
 </template>
 
 <script>
-import { Tabs, TabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
       activeName1: 'first',
       activeName2: 'second',
-      Tabs: [
+      TinyTabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -61,7 +61,7 @@ export default {
   },
   methods: {
     handleadd() {
-      this.Tabs.push({
+      this.TinyTabs.push({
         title: 'Tab ++',
         name: ++this.tabIndex + '',
         content: '动态增加tabitem'
diff --git a/examples/sites/demos/pc/app/tabs/tooltip-composition-api.vue b/examples/sites/demos/pc/app/tabs/tooltip-composition-api.vue
index 97ef98f79..91dcead64 100644
--- a/examples/sites/demos/pc/app/tabs/tooltip-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/tooltip-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinySwitch } from '@opentiny/vue'
 
 const activeName4 = ref('navigation1')
 const tooltipConfig = ref({ effect: 'light', placement: 'left', visible: 'auto' })
diff --git a/examples/sites/demos/pc/app/tabs/tooltip.vue b/examples/sites/demos/pc/app/tabs/tooltip.vue
index c770d8555..72fe70708 100644
--- a/examples/sites/demos/pc/app/tabs/tooltip.vue
+++ b/examples/sites/demos/pc/app/tabs/tooltip.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem, Switch } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem,
-    TinySwitch: Switch
+    TinyTabs,
+    TinyTabItem,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tabs/with-add-composition-api.vue b/examples/sites/demos/pc/app/tabs/with-add-composition-api.vue
index 311af8f38..0a023bd81 100644
--- a/examples/sites/demos/pc/app/tabs/with-add-composition-api.vue
+++ b/examples/sites/demos/pc/app/tabs/with-add-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem, Modal } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyModal } from '@opentiny/vue'
 
 const Tabs = ref([
   {
@@ -32,7 +32,7 @@ const Tabs = ref([
 const tabIndex = ref(2)
 
 function handleAdd() {
-  Modal.message({
+  TinyModal.message({
     message: '动态增加 Tab ++',
     status: 'success'
   })
diff --git a/examples/sites/demos/pc/app/tabs/with-add.vue b/examples/sites/demos/pc/app/tabs/with-add.vue
index 25397858e..167be1ae3 100644
--- a/examples/sites/demos/pc/app/tabs/with-add.vue
+++ b/examples/sites/demos/pc/app/tabs/with-add.vue
@@ -14,16 +14,16 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem, Modal } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTabs: Tabs,
-    TinyTabItem: TabItem
+    TinyTabs,
+    TinyTabItem
   },
   data() {
     return {
-      Tabs: [
+      TinyTabs: [
         {
           title: 'Tab 1',
           name: '1',
@@ -40,12 +40,12 @@ export default {
   },
   methods: {
     handleAdd() {
-      Modal.message({
+      TinyModal.message({
         message: '动态增加 Tab ++',
         status: 'success'
       })
 
-      this.Tabs.push({
+      this.TinyTabs.push({
         title: 'Tab ++',
         name: ++this.tabIndex + '',
         content: '动态增加tabitem'
diff --git a/examples/sites/demos/pc/app/tag-group/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tag-group/basic-usage-composition-api.vue
index 0569eb80d..59b797d7d 100644
--- a/examples/sites/demos/pc/app/tag-group/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag-group/basic-usage-composition-api.vue
@@ -4,11 +4,11 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TagGroup as TinyTagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 const data = ref([
   {
-    name: '标签一',
+    name: '标签一'
   },
   {
     name: '标签二',
diff --git a/examples/sites/demos/pc/app/tag-group/basic-usage.vue b/examples/sites/demos/pc/app/tag-group/basic-usage.vue
index a270f5000..46006a04f 100644
--- a/examples/sites/demos/pc/app/tag-group/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tag-group/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tag-group/more-composition-api.vue b/examples/sites/demos/pc/app/tag-group/more-composition-api.vue
index 7f5201240..c68900513 100644
--- a/examples/sites/demos/pc/app/tag-group/more-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag-group/more-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TagGroup as TinyTagGroup, Modal } from '@opentiny/vue'
+import { TinyTagGroup, TinyModal } from '@opentiny/vue'
 
 const data = ref([
   {
@@ -76,6 +76,6 @@ const data = ref([
 ])
 
 function itemClick(item, i, e) {
-  Modal.message(`当前点击的是第${i + 1}个标签`)
+  TinyModal.message(`当前点击的是第${i + 1}个标签`)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tag-group/more.vue b/examples/sites/demos/pc/app/tag-group/more.vue
index 0c9229286..bf506be63 100644
--- a/examples/sites/demos/pc/app/tag-group/more.vue
+++ b/examples/sites/demos/pc/app/tag-group/more.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TagGroup, Modal } from '@opentiny/vue'
+import { TinyTagGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
@@ -83,7 +83,7 @@ export default {
   },
   methods: {
     itemClick(item, i, e) {
-      Modal.message(`当前点击的是第${i + 1}个标签`)
+      TinyModal.message(`当前点击的是第${i + 1}个标签`)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-effect-composition-api.vue b/examples/sites/demos/pc/app/tag-group/tag-group-effect-composition-api.vue
index f29cbeff6..742a89190 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-effect-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-effect-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TagGroup as TinyTagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 const items = ref([
   { name: '标签一' },
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-effect.vue b/examples/sites/demos/pc/app/tag-group/tag-group-effect.vue
index e49262f8f..9092eafe1 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-effect.vue
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-effect.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-event-composition-api.vue b/examples/sites/demos/pc/app/tag-group/tag-group-event-composition-api.vue
index e3bf7a81f..f925d9e4a 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-event-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TagGroup as TinyTagGroup, Modal } from '@opentiny/vue'
+import { TinyTagGroup, TinyModal } from '@opentiny/vue'
 
 const data = ref([
   {
@@ -16,6 +16,6 @@ const data = ref([
 ])
 
 function itemClick(item, i, e) {
-  Modal.message(`当前点击的是第${i + 1}个标签`)
+  TinyModal.message(`当前点击的是第${i + 1}个标签`)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-event.vue b/examples/sites/demos/pc/app/tag-group/tag-group-event.vue
index d95e4dc67..4e6939cad 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-event.vue
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TagGroup, Modal } from '@opentiny/vue'
+import { TinyTagGroup, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     itemClick(item, i, e) {
-      Modal.message(`当前点击的是第${i + 1}个标签`)
+      TinyModal.message(`当前点击的是第${i + 1}个标签`)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue b/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue
index 0adc89085..b2b3ed70d 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TagGroup as TinyTagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 const items = ref([
   { type: '', name: '标签一' },
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size.vue b/examples/sites/demos/pc/app/tag-group/tag-group-size.vue
index 2c7b5de79..2dc6ee5ae 100644
--- a/examples/sites/demos/pc/app/tag-group/tag-group-size.vue
+++ b/examples/sites/demos/pc/app/tag-group/tag-group-size.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TagGroup } from '@opentiny/vue'
+import { TinyTagGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTagGroup: TagGroup
+    TinyTagGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tag/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tag/basic-usage-composition-api.vue
index a1fbfcc7e..a1d54973b 100644
--- a/examples/sites/demos/pc/app/tag/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/basic-usage-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { Tag as TinyTag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 import { IconHeartempty } from '@opentiny/vue-icon'
 
 const tinyIconHeartempty = IconHeartempty()
diff --git a/examples/sites/demos/pc/app/tag/basic-usage.vue b/examples/sites/demos/pc/app/tag/basic-usage.vue
index a8617e4a3..a3e0d5505 100644
--- a/examples/sites/demos/pc/app/tag/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tag/basic-usage.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 import { IconHeartempty } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTag: Tag,
+    TinyTag,
     TinyIconHeartempty: IconHeartempty()
   }
 }
diff --git a/examples/sites/demos/pc/app/tag/color-border-composition-api.vue b/examples/sites/demos/pc/app/tag/color-border-composition-api.vue
index ea9b1ce11..826914bc9 100644
--- a/examples/sites/demos/pc/app/tag/color-border-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/color-border-composition-api.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Tag as TinyTag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/tag/color-border.vue b/examples/sites/demos/pc/app/tag/color-border.vue
index c664f4176..048851fae 100644
--- a/examples/sites/demos/pc/app/tag/color-border.vue
+++ b/examples/sites/demos/pc/app/tag/color-border.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script lang="jsx">
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tag/delete-composition-api.vue b/examples/sites/demos/pc/app/tag/delete-composition-api.vue
index ba6f94df3..b81532744 100644
--- a/examples/sites/demos/pc/app/tag/delete-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/delete-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { Tag as TinyTag, Modal } from '@opentiny/vue'
+import { TinyTag, TinyModal } from '@opentiny/vue'
 
 const tags = ref([
   { name: '标签一', type: '' },
@@ -26,11 +26,11 @@ const tags = ref([
 
 function handleClose(tag) {
   tags.value.splice(tags.value.indexOf(tag), 1)
-  Modal.message('close 事件')
+  TinyModal.message('close 事件')
 }
 
 function beforeDelete(done) {
-  Modal.confirm('确认删除？').then((res) => {
+  TinyModal.confirm('确认删除？').then((res) => {
     res === 'confirm' && done()
   })
 }
diff --git a/examples/sites/demos/pc/app/tag/delete.vue b/examples/sites/demos/pc/app/tag/delete.vue
index 323428c3d..f8dd8ada1 100644
--- a/examples/sites/demos/pc/app/tag/delete.vue
+++ b/examples/sites/demos/pc/app/tag/delete.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { Tag, Modal } from '@opentiny/vue'
+import { TinyTag, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
@@ -33,10 +33,10 @@ export default {
   methods: {
     handleClose(tag) {
       this.tags.splice(this.tags.indexOf(tag), 1)
-      Modal.message('close 事件')
+      TinyModal.message('close 事件')
     },
     beforeDelete(done) {
-      Modal.confirm('确认删除？').then((res) => {
+      TinyModal.confirm('确认删除？').then((res) => {
         res === 'confirm' && done()
       })
     }
diff --git a/examples/sites/demos/pc/app/tag/disabled-composition-api.vue b/examples/sites/demos/pc/app/tag/disabled-composition-api.vue
index 3a497b1f7..736130d50 100644
--- a/examples/sites/demos/pc/app/tag/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/disabled-composition-api.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Tag as TinyTag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/tag/disabled.vue b/examples/sites/demos/pc/app/tag/disabled.vue
index f57fab568..898f90bf7 100644
--- a/examples/sites/demos/pc/app/tag/disabled.vue
+++ b/examples/sites/demos/pc/app/tag/disabled.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tag/effect-composition-api.vue b/examples/sites/demos/pc/app/tag/effect-composition-api.vue
index bf9e38874..c309deac5 100644
--- a/examples/sites/demos/pc/app/tag/effect-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/effect-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tag as TinyTag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 const items = ref([
   { type: '', label: '标签一' },
diff --git a/examples/sites/demos/pc/app/tag/effect.vue b/examples/sites/demos/pc/app/tag/effect.vue
index e399696f9..408efe59b 100644
--- a/examples/sites/demos/pc/app/tag/effect.vue
+++ b/examples/sites/demos/pc/app/tag/effect.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script lang="jsx">
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tag/size-composition-api.vue b/examples/sites/demos/pc/app/tag/size-composition-api.vue
index 575cd2ff8..7335699fb 100644
--- a/examples/sites/demos/pc/app/tag/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/size-composition-api.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Tag as TinyTag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 </script>
 
 <style>
diff --git a/examples/sites/demos/pc/app/tag/size.vue b/examples/sites/demos/pc/app/tag/size.vue
index ecb5eb041..3bbbc4547 100644
--- a/examples/sites/demos/pc/app/tag/size.vue
+++ b/examples/sites/demos/pc/app/tag/size.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tag/slot-default-composition-api.vue b/examples/sites/demos/pc/app/tag/slot-default-composition-api.vue
index 77ba06e04..5cee83df2 100644
--- a/examples/sites/demos/pc/app/tag/slot-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/slot-default-composition-api.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { Tag as TinyTag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 import { iconTime, iconFileupload, iconChevronRight } from '@opentiny/vue-icon'
 
 const TinyIconTime = iconTime()
diff --git a/examples/sites/demos/pc/app/tag/slot-default.vue b/examples/sites/demos/pc/app/tag/slot-default.vue
index 400e6fc07..ae3a5a537 100644
--- a/examples/sites/demos/pc/app/tag/slot-default.vue
+++ b/examples/sites/demos/pc/app/tag/slot-default.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Tag } from '@opentiny/vue'
+import { TinyTag } from '@opentiny/vue'
 import { IconTime, IconFileupload, IconChevronRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTag: Tag,
+    TinyTag,
     TinyIconTime: IconTime(),
     TinyIconFileupload: IconFileupload(),
     TinyIconChevronRight: IconChevronRight()
diff --git a/examples/sites/demos/pc/app/tag/tag-event-click-composition-api.vue b/examples/sites/demos/pc/app/tag/tag-event-click-composition-api.vue
index cfa6005b9..2574f7006 100644
--- a/examples/sites/demos/pc/app/tag/tag-event-click-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/tag-event-click-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tag as TinyTag, Modal } from '@opentiny/vue'
+import { TinyTag, TinyModal } from '@opentiny/vue'
 
 const tags = ref([
   { name: '标签一', type: '' },
@@ -19,6 +19,6 @@ const tags = ref([
 ])
 
 function handleClick() {
-  Modal.message('click 事件')
+  TinyModal.message('click 事件')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tag/tag-event-click.vue b/examples/sites/demos/pc/app/tag/tag-event-click.vue
index 2cb44e0b3..8b8a5f501 100644
--- a/examples/sites/demos/pc/app/tag/tag-event-click.vue
+++ b/examples/sites/demos/pc/app/tag/tag-event-click.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { Tag, Modal } from '@opentiny/vue'
+import { TinyTag, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTag: Tag
+    TinyTag
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   methods: {
     handleClick() {
-      Modal.message('click 事件')
+      TinyModal.message('click 事件')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/text-popup/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/text-popup/basic-usage-composition-api.vue
index bd7a1465c..2409126db 100644
--- a/examples/sites/demos/pc/app/text-popup/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/text-popup/basic-usage-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { TextPopup as TinyTextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/basic-usage.vue b/examples/sites/demos/pc/app/text-popup/basic-usage.vue
index 6f1479c49..b840b6398 100644
--- a/examples/sites/demos/pc/app/text-popup/basic-usage.vue
+++ b/examples/sites/demos/pc/app/text-popup/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { TextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTextPopup: TextPopup
+    TinyTextPopup
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/clear-value-composition-api.vue b/examples/sites/demos/pc/app/text-popup/clear-value-composition-api.vue
index 494edbc23..dcb1e5c96 100644
--- a/examples/sites/demos/pc/app/text-popup/clear-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/text-popup/clear-value-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TextPopup as TinyTextPopup, Button as TinyButton } from '@opentiny/vue'
+import { TinyTextPopup, TinyButton } from '@opentiny/vue'
 
 const value = ref('')
 
diff --git a/examples/sites/demos/pc/app/text-popup/clear-value.vue b/examples/sites/demos/pc/app/text-popup/clear-value.vue
index 7c5a4a7de..504a89967 100644
--- a/examples/sites/demos/pc/app/text-popup/clear-value.vue
+++ b/examples/sites/demos/pc/app/text-popup/clear-value.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { TextPopup, Button } from '@opentiny/vue'
+import { TinyTextPopup, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTextPopup: TextPopup,
-    TinyButton: Button
+    TinyTextPopup,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/text-popup/label-composition-api.vue b/examples/sites/demos/pc/app/text-popup/label-composition-api.vue
index ba55f32a2..802c2fdc2 100644
--- a/examples/sites/demos/pc/app/text-popup/label-composition-api.vue
+++ b/examples/sites/demos/pc/app/text-popup/label-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { TextPopup as TinyTextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/label.vue b/examples/sites/demos/pc/app/text-popup/label.vue
index db93cd4c2..1d9a4986c 100644
--- a/examples/sites/demos/pc/app/text-popup/label.vue
+++ b/examples/sites/demos/pc/app/text-popup/label.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { TextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTextPopup: TextPopup
+    TinyTextPopup
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/placeholder-composition-api.vue b/examples/sites/demos/pc/app/text-popup/placeholder-composition-api.vue
index 776e905ea..3dd0bc0f4 100644
--- a/examples/sites/demos/pc/app/text-popup/placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/text-popup/placeholder-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { TextPopup as TinyTextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/placeholder.vue b/examples/sites/demos/pc/app/text-popup/placeholder.vue
index 51f2661bc..ea1c6acce 100644
--- a/examples/sites/demos/pc/app/text-popup/placeholder.vue
+++ b/examples/sites/demos/pc/app/text-popup/placeholder.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { TextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTextPopup: TextPopup
+    TinyTextPopup
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/readonly-composition-api.vue b/examples/sites/demos/pc/app/text-popup/readonly-composition-api.vue
index 72cd266b0..89193a0f3 100644
--- a/examples/sites/demos/pc/app/text-popup/readonly-composition-api.vue
+++ b/examples/sites/demos/pc/app/text-popup/readonly-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { TextPopup as TinyTextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/readonly.vue b/examples/sites/demos/pc/app/text-popup/readonly.vue
index 61f181057..6a9d575e3 100644
--- a/examples/sites/demos/pc/app/text-popup/readonly.vue
+++ b/examples/sites/demos/pc/app/text-popup/readonly.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { TextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTextPopup: TextPopup
+    TinyTextPopup
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/separtor-composition-api.vue b/examples/sites/demos/pc/app/text-popup/separtor-composition-api.vue
index fd3b26649..5b4c8ea02 100644
--- a/examples/sites/demos/pc/app/text-popup/separtor-composition-api.vue
+++ b/examples/sites/demos/pc/app/text-popup/separtor-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { TextPopup as TinyTextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/separtor.vue b/examples/sites/demos/pc/app/text-popup/separtor.vue
index f2571d181..e5d2bd56d 100644
--- a/examples/sites/demos/pc/app/text-popup/separtor.vue
+++ b/examples/sites/demos/pc/app/text-popup/separtor.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { TextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTextPopup: TextPopup
+    TinyTextPopup
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/value-composition-api.vue b/examples/sites/demos/pc/app/text-popup/value-composition-api.vue
index e7a1b6238..84b3fd49c 100644
--- a/examples/sites/demos/pc/app/text-popup/value-composition-api.vue
+++ b/examples/sites/demos/pc/app/text-popup/value-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { TextPopup as TinyTextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 
 const value = ref('我是 TextPopup 组件')
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/value.vue b/examples/sites/demos/pc/app/text-popup/value.vue
index 1dee8dab9..20e280ca6 100644
--- a/examples/sites/demos/pc/app/text-popup/value.vue
+++ b/examples/sites/demos/pc/app/text-popup/value.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { TextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTextPopup: TextPopup
+    TinyTextPopup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/text-popup/width-composition-api.vue b/examples/sites/demos/pc/app/text-popup/width-composition-api.vue
index af907980e..b6b4b0c8c 100644
--- a/examples/sites/demos/pc/app/text-popup/width-composition-api.vue
+++ b/examples/sites/demos/pc/app/text-popup/width-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { TextPopup as TinyTextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/text-popup/width.vue b/examples/sites/demos/pc/app/text-popup/width.vue
index 55458328c..92b52da75 100644
--- a/examples/sites/demos/pc/app/text-popup/width.vue
+++ b/examples/sites/demos/pc/app/text-popup/width.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { TextPopup } from '@opentiny/vue'
+import { TinyTextPopup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTextPopup: TextPopup
+    TinyTextPopup
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/time-line-new/basic-usage.vue b/examples/sites/demos/pc/app/time-line-new/basic-usage.vue
index 0f6b3910c..159b34c5b 100644
--- a/examples/sites/demos/pc/app/time-line-new/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-line-new/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line-new/custom-normal-step.vue b/examples/sites/demos/pc/app/time-line-new/custom-normal-step.vue
index 7a9f9e508..340959964 100644
--- a/examples/sites/demos/pc/app/time-line-new/custom-normal-step.vue
+++ b/examples/sites/demos/pc/app/time-line-new/custom-normal-step.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -29,7 +29,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line-new/custom-vertical-step.vue b/examples/sites/demos/pc/app/time-line-new/custom-vertical-step.vue
index 73a59801e..ee003d54e 100644
--- a/examples/sites/demos/pc/app/time-line-new/custom-vertical-step.vue
+++ b/examples/sites/demos/pc/app/time-line-new/custom-vertical-step.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line-new/different-data1.vue b/examples/sites/demos/pc/app/time-line-new/different-data1.vue
index bf5991a51..fe33cddcc 100644
--- a/examples/sites/demos/pc/app/time-line-new/different-data1.vue
+++ b/examples/sites/demos/pc/app/time-line-new/different-data1.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line-new/different-data2.vue b/examples/sites/demos/pc/app/time-line-new/different-data2.vue
index bd8d0c800..40e64015b 100644
--- a/examples/sites/demos/pc/app/time-line-new/different-data2.vue
+++ b/examples/sites/demos/pc/app/time-line-new/different-data2.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 import { IconLoading } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line-new/event.vue b/examples/sites/demos/pc/app/time-line-new/event.vue
index 1db99f240..afdc1e614 100644
--- a/examples/sites/demos/pc/app/time-line-new/event.vue
+++ b/examples/sites/demos/pc/app/time-line-new/event.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     click(index) {
-      Modal.message({ message: `触发了click事件：${index}`, status: 'info' })
+      TinyModal.message({ message: `触发了click事件：${index}`, status: 'info' })
       this.active = index
     }
   }
diff --git a/examples/sites/demos/pc/app/time-line-new/node-toset1.vue b/examples/sites/demos/pc/app/time-line-new/node-toset1.vue
index e9e9ad623..e6b30c9fe 100644
--- a/examples/sites/demos/pc/app/time-line-new/node-toset1.vue
+++ b/examples/sites/demos/pc/app/time-line-new/node-toset1.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -25,7 +25,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line-new/node-toset2.vue b/examples/sites/demos/pc/app/time-line-new/node-toset2.vue
index 433bdbdb6..14861f2c5 100644
--- a/examples/sites/demos/pc/app/time-line-new/node-toset2.vue
+++ b/examples/sites/demos/pc/app/time-line-new/node-toset2.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 import { IconLoading, IconTime } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line-new/set-start-value.vue b/examples/sites/demos/pc/app/time-line-new/set-start-value.vue
index 9d59179ab..87b022766 100644
--- a/examples/sites/demos/pc/app/time-line-new/set-start-value.vue
+++ b/examples/sites/demos/pc/app/time-line-new/set-start-value.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line-new/show-number.vue b/examples/sites/demos/pc/app/time-line-new/show-number.vue
index d7a6957ef..c76fee2ef 100644
--- a/examples/sites/demos/pc/app/time-line-new/show-number.vue
+++ b/examples/sites/demos/pc/app/time-line-new/show-number.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line-new/show-status.vue b/examples/sites/demos/pc/app/time-line-new/show-status.vue
index da31792ce..5c4ba546b 100644
--- a/examples/sites/demos/pc/app/time-line-new/show-status.vue
+++ b/examples/sites/demos/pc/app/time-line-new/show-status.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line-new/vertical1.vue b/examples/sites/demos/pc/app/time-line-new/vertical1.vue
index 3c78ca90d..16f042a1a 100644
--- a/examples/sites/demos/pc/app/time-line-new/vertical1.vue
+++ b/examples/sites/demos/pc/app/time-line-new/vertical1.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line-new/vertical2.vue b/examples/sites/demos/pc/app/time-line-new/vertical2.vue
index 1db99f240..afdc1e614 100644
--- a/examples/sites/demos/pc/app/time-line-new/vertical2.vue
+++ b/examples/sites/demos/pc/app/time-line-new/vertical2.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew, Modal } from '@opentiny/vue'
+import { TinyTimeLineNew, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     click(index) {
-      Modal.message({ message: `触发了click事件：${index}`, status: 'info' })
+      TinyModal.message({ message: `触发了click事件：${index}`, status: 'info' })
       this.active = index
     }
   }
diff --git a/examples/sites/demos/pc/app/time-line-new/width.vue b/examples/sites/demos/pc/app/time-line-new/width.vue
index bc55eb35d..cb1c85507 100644
--- a/examples/sites/demos/pc/app/time-line-new/width.vue
+++ b/examples/sites/demos/pc/app/time-line-new/width.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLineNew } from '@opentiny/vue'
+import { TinyTimeLineNew } from '@opentiny/vue'
 
 export default {
   components: {
-    AuiTimeLine: TimeLineNew
+    AuiTimeLine: TinyTimeLineNew
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/time-line/basic-usage-composition-api.vue
index 9c7ab8efb..fae24559b 100644
--- a/examples/sites/demos/pc/app/time-line/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 const active = ref(1)
 const data = ref([
@@ -15,7 +15,7 @@ const data = ref([
 
 function click(index, node) {
   active.value = index
-  Modal.message({
+  TinyModal.message({
     message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/time-line/basic-usage.vue b/examples/sites/demos/pc/app/time-line/basic-usage.vue
index b3fe895eb..a519c5551 100644
--- a/examples/sites/demos/pc/app/time-line/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-line/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
index c800afd50..f089844be 100644
--- a/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 import { iconLoading } from '@opentiny/vue-icon'
 
 const active = ref(1)
diff --git a/examples/sites/demos/pc/app/time-line/custom-field.vue b/examples/sites/demos/pc/app/time-line/custom-field.vue
index caf13abe8..d70d3e647 100644
--- a/examples/sites/demos/pc/app/time-line/custom-field.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-field.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 import { iconLoading } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue
index d876811c0..b532424de 100644
--- a/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 const active = ref(1)
 const data = ref([
@@ -24,7 +24,7 @@ const data = ref([
 
 function click(index, node) {
   active.value = index
-  Modal.message({
+  TinyModal.message({
     message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline.vue b/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline.vue
index 876f3cdd0..b90c01316 100644
--- a/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-horizontal-timeline.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { TimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
@@ -31,7 +31,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line/custom-icon-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-icon-composition-api.vue
index 95dd16b6a..34b89a440 100644
--- a/examples/sites/demos/pc/app/time-line/custom-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-icon-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 import { iconLocalePanel, iconFeedback, iconSynchronize, iconAgency } from '@opentiny/vue-icon'
 
 const active = ref(1)
diff --git a/examples/sites/demos/pc/app/time-line/custom-icon.vue b/examples/sites/demos/pc/app/time-line/custom-icon.vue
index ec1b7a3c6..ae824d25a 100644
--- a/examples/sites/demos/pc/app/time-line/custom-icon.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-icon.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { TimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 import { iconLocalePanel, iconFeedback, iconSynchronize, iconAgency } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
@@ -24,7 +24,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue
index 9bc2d2942..b1f22f1fe 100644
--- a/examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-vertical-timeline-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 const active = ref(1)
 const data = ref([
diff --git a/examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue b/examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue
index f387d2eb9..e51abbdfd 100644
--- a/examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-vertical-timeline.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue b/examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue
index ba4c6edda..0e156d287 100644
--- a/examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 const active1 = ref(0)
 const active2 = ref(1)
diff --git a/examples/sites/demos/pc/app/time-line/set-node-width.vue b/examples/sites/demos/pc/app/time-line/set-node-width.vue
index e506983a8..47181b8b7 100644
--- a/examples/sites/demos/pc/app/time-line/set-node-width.vue
+++ b/examples/sites/demos/pc/app/time-line/set-node-width.vue
@@ -19,11 +19,11 @@
 </template>
 
 <script lang="ts">
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line/set-start-value-composition-api.vue b/examples/sites/demos/pc/app/time-line/set-start-value-composition-api.vue
index 92d25525d..71ced6816 100644
--- a/examples/sites/demos/pc/app/time-line/set-start-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/set-start-value-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 const active = ref(1)
 const data = ref([
@@ -15,7 +15,7 @@ const data = ref([
 
 function click(index, node) {
   active.value = index
-  Modal.message({
+  TinyModal.message({
     message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/time-line/set-start-value.vue b/examples/sites/demos/pc/app/time-line/set-start-value.vue
index ff85a53bd..eaeee8d32 100644
--- a/examples/sites/demos/pc/app/time-line/set-start-value.vue
+++ b/examples/sites/demos/pc/app/time-line/set-start-value.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line/shape-composition-api.vue b/examples/sites/demos/pc/app/time-line/shape-composition-api.vue
index 558235b99..817e97d41 100644
--- a/examples/sites/demos/pc/app/time-line/shape-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/shape-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { TimeLine as TinyTimeLine, Button as TinyButton } from '@opentiny/vue'
+import { TinyTimeLine, TinyButton } from '@opentiny/vue'
 
 const data = reactive([
   { name: '已下单', time: '2019-11-11 00:01:30' },
diff --git a/examples/sites/demos/pc/app/time-line/shape.vue b/examples/sites/demos/pc/app/time-line/shape.vue
index 98f2a2bc9..ef82e165e 100644
--- a/examples/sites/demos/pc/app/time-line/shape.vue
+++ b/examples/sites/demos/pc/app/time-line/shape.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts">
-import { TimeLine, Button } from '@opentiny/vue'
+import { TinyTimeLine, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine,
-    TinyButton: Button
+    TinyTimeLine,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line/show-divider-composition-api.vue b/examples/sites/demos/pc/app/time-line/show-divider-composition-api.vue
index 32288df8e..75648f678 100644
--- a/examples/sites/demos/pc/app/time-line/show-divider-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/show-divider-composition-api.vue
@@ -5,7 +5,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 const normalActive = ref(0)
 const data = reactive([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
@@ -13,6 +13,6 @@ const data = reactive([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'In
 const normalClick = (index, node) => {
   normalActive.value = index
 
-  Modal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
+  TinyModal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/time-line/show-divider.vue b/examples/sites/demos/pc/app/time-line/show-divider.vue
index c22328b9b..4f722ba32 100644
--- a/examples/sites/demos/pc/app/time-line/show-divider.vue
+++ b/examples/sites/demos/pc/app/time-line/show-divider.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { TimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
@@ -20,7 +20,7 @@ export default {
     normalClick(index, node) {
       this.normalActive = index
 
-      Modal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
+      TinyModal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/time-line/slot-description-composition-api.vue b/examples/sites/demos/pc/app/time-line/slot-description-composition-api.vue
index db6e11ee0..0647432cf 100644
--- a/examples/sites/demos/pc/app/time-line/slot-description-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/slot-description-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, TimelineItem as TinyTimelineItem } from '@opentiny/vue'
+import { TinyTimeLine, TinyTimelineItem } from '@opentiny/vue'
 
 const active = ref(0)
 const data = ref([
diff --git a/examples/sites/demos/pc/app/time-line/slot-description.vue b/examples/sites/demos/pc/app/time-line/slot-description.vue
index a215f6850..66238af83 100644
--- a/examples/sites/demos/pc/app/time-line/slot-description.vue
+++ b/examples/sites/demos/pc/app/time-line/slot-description.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { TimeLine, TimelineItem } from '@opentiny/vue'
+import { TinyTimeLine, TinyTimelineItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine,
-    TinyTimelineItem: TimelineItem
+    TinyTimeLine,
+    TinyTimelineItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line/status-composition-api.vue b/examples/sites/demos/pc/app/time-line/status-composition-api.vue
index 804ff070e..e0c9beaf7 100644
--- a/examples/sites/demos/pc/app/time-line/status-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/status-composition-api.vue
@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 import { iconUpdate } from '@opentiny/vue-icon'
 
 const data1 = reactive([
diff --git a/examples/sites/demos/pc/app/time-line/status.vue b/examples/sites/demos/pc/app/time-line/status.vue
index e5277d8df..15b43f262 100644
--- a/examples/sites/demos/pc/app/time-line/status.vue
+++ b/examples/sites/demos/pc/app/time-line/status.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script lang="ts">
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 import { iconUpdate } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-line/text-position-composition-api.vue b/examples/sites/demos/pc/app/time-line/text-position-composition-api.vue
index c3185c41a..1eed9f56c 100644
--- a/examples/sites/demos/pc/app/time-line/text-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/text-position-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 const active = ref(1)
 const data = ref([
@@ -15,7 +15,7 @@ const data = ref([
 
 function click(index, node) {
   active.value = index
-  Modal.message({
+  TinyModal.message({
     message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/time-line/text-position.vue b/examples/sites/demos/pc/app/time-line/text-position.vue
index c210f428d..232d2cf81 100644
--- a/examples/sites/demos/pc/app/time-line/text-position.vue
+++ b/examples/sites/demos/pc/app/time-line/text-position.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TimeLine, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
@@ -22,7 +22,7 @@ export default {
   methods: {
     click(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue b/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
index a8caf68a6..ed499c2e5 100644
--- a/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, TimelineItem as TinyTimelineItem, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyTimelineItem, TinyModal } from '@opentiny/vue'
 
 const active = ref(1)
 const data = ref([
@@ -18,7 +18,7 @@ const data = ref([
 
 const onItemClick = (index, node) => {
   active.value = index
-  Modal.message({
+  TinyModal.message({
     message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/time-line/timeline-item.vue b/examples/sites/demos/pc/app/time-line/timeline-item.vue
index 4639845b3..404e5ca2f 100644
--- a/examples/sites/demos/pc/app/time-line/timeline-item.vue
+++ b/examples/sites/demos/pc/app/time-line/timeline-item.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="ts">
-import { TimeLine, TimelineItem, Modal } from '@opentiny/vue'
+import { TinyTimeLine, TinyTimelineItem, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine,
-    TinyTimelineItem: TimelineItem
+    TinyTimeLine,
+    TinyTimelineItem
   },
   data() {
     return {
@@ -27,7 +27,7 @@ export default {
   methods: {
     onItemClick(index, node) {
       this.active = index
-      Modal.message({
+      TinyModal.message({
         message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue b/examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue
index b34a859ef..79da076b0 100644
--- a/examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/vertical-timeline-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 const active = ref(1)
 const data = ref([
diff --git a/examples/sites/demos/pc/app/time-line/vertical-timeline.vue b/examples/sites/demos/pc/app/time-line/vertical-timeline.vue
index b95872e08..01a37fe8d 100644
--- a/examples/sites/demos/pc/app/time-line/vertical-timeline.vue
+++ b/examples/sites/demos/pc/app/time-line/vertical-timeline.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { TimeLine } from '@opentiny/vue'
+import { TinyTimeLine } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeLine: TimeLine
+    TinyTimeLine
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
index 0593e49af..0a28991df 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
 </script>
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.vue b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
index 36a958282..2e1602edf 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue b/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
index 1a4855af5..cf130428f 100644
--- a/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 import { iconError } from '@opentiny/vue-icon'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
diff --git a/examples/sites/demos/pc/app/time-picker/clearable.vue b/examples/sites/demos/pc/app/time-picker/clearable.vue
index f755b7f18..f788a8a3e 100644
--- a/examples/sites/demos/pc/app/time-picker/clearable.vue
+++ b/examples/sites/demos/pc/app/time-picker/clearable.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 import { iconError } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue b/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
index ea90ab920..22cca506b 100644
--- a/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const defaultValue = ref('2020-02-10 18:40')
 const value = ref('')
diff --git a/examples/sites/demos/pc/app/time-picker/default-value.vue b/examples/sites/demos/pc/app/time-picker/default-value.vue
index 43805d6a2..81b856372 100644
--- a/examples/sites/demos/pc/app/time-picker/default-value.vue
+++ b/examples/sites/demos/pc/app/time-picker/default-value.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue b/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
index cb3c10705..c19ce4697 100644
--- a/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
 </script>
diff --git a/examples/sites/demos/pc/app/time-picker/disabled.vue b/examples/sites/demos/pc/app/time-picker/disabled.vue
index 6bb7b1cd3..e2418643e 100644
--- a/examples/sites/demos/pc/app/time-picker/disabled.vue
+++ b/examples/sites/demos/pc/app/time-picker/disabled.vue
@@ -16,11 +16,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue b/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue
index 2990cd045..34ad08441 100644
--- a/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
 </script>
diff --git a/examples/sites/demos/pc/app/time-picker/editable.vue b/examples/sites/demos/pc/app/time-picker/editable.vue
index addb22adf..04fd2e6c7 100644
--- a/examples/sites/demos/pc/app/time-picker/editable.vue
+++ b/examples/sites/demos/pc/app/time-picker/editable.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/event-composition-api.vue b/examples/sites/demos/pc/app/time-picker/event-composition-api.vue
index b3de62701..b9faf89f8 100644
--- a/examples/sites/demos/pc/app/time-picker/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/event-composition-api.vue
@@ -6,20 +6,20 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker, Modal } from '@opentiny/vue'
+import { TinyTimePicker, TinyModal } from '@opentiny/vue'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 function blur() {
-  Modal.message({ message: 'blur事件', status: 'info' })
+  TinyModal.message({ message: 'blur事件', status: 'info' })
 }
 
 function change() {
-  Modal.message({ message: 'change事件', status: 'info' })
+  TinyModal.message({ message: 'change事件', status: 'info' })
 }
 
 function focus() {
-  Modal.message({ message: 'focus事件', status: 'info' })
+  TinyModal.message({ message: 'focus事件', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/time-picker/event.vue b/examples/sites/demos/pc/app/time-picker/event.vue
index f5b7ee3b1..47905e78e 100644
--- a/examples/sites/demos/pc/app/time-picker/event.vue
+++ b/examples/sites/demos/pc/app/time-picker/event.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimePicker, Modal } from '@opentiny/vue'
+import { TinyTimePicker, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
@@ -18,13 +18,13 @@ export default {
   },
   methods: {
     blur() {
-      Modal.message({ message: 'blur事件', status: 'info' })
+      TinyModal.message({ message: 'blur事件', status: 'info' })
     },
     change() {
-      Modal.message({ message: 'change事件', status: 'info' })
+      TinyModal.message({ message: 'change事件', status: 'info' })
     },
     focus() {
-      Modal.message({ message: 'focus事件', status: 'info' })
+      TinyModal.message({ message: 'focus事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/time-picker/format-composition-api.vue b/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
index 34b8acd61..aaef5fd3c 100644
--- a/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
@@ -29,7 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const value = ref(new Date(2016, 9, 10, 18, 40))
 const selectedValue = ref(Number(new Date(2016, 9, 10, 18, 30)))
diff --git a/examples/sites/demos/pc/app/time-picker/format.vue b/examples/sites/demos/pc/app/time-picker/format.vue
index 0c24352f0..7977856f2 100644
--- a/examples/sites/demos/pc/app/time-picker/format.vue
+++ b/examples/sites/demos/pc/app/time-picker/format.vue
@@ -28,11 +28,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     const value = new Date(2016, 9, 10, 18, 40)
diff --git a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
index 17d2fdfb6..10afbe4ea 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const startTime = new Date(2016, 9, 10, 18, 40)
 const endTime = new Date(2016, 9, 10, 18, 50)
diff --git a/examples/sites/demos/pc/app/time-picker/is-range.vue b/examples/sites/demos/pc/app/time-picker/is-range.vue
index c88c0c18b..55fb4243f 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     const startTime = new Date(2016, 9, 10, 18, 40)
diff --git a/examples/sites/demos/pc/app/time-picker/name-composition-api.vue b/examples/sites/demos/pc/app/time-picker/name-composition-api.vue
index 347cf95f5..bc3a4e206 100644
--- a/examples/sites/demos/pc/app/time-picker/name-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/name-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
 </script>
diff --git a/examples/sites/demos/pc/app/time-picker/name.vue b/examples/sites/demos/pc/app/time-picker/name.vue
index e5a01dbff..756b8a5ad 100644
--- a/examples/sites/demos/pc/app/time-picker/name.vue
+++ b/examples/sites/demos/pc/app/time-picker/name.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/picker-options-composition-api.vue b/examples/sites/demos/pc/app/time-picker/picker-options-composition-api.vue
index 6da63f969..b2d5b8467 100644
--- a/examples/sites/demos/pc/app/time-picker/picker-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/picker-options-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
 </script>
diff --git a/examples/sites/demos/pc/app/time-picker/picker-options.vue b/examples/sites/demos/pc/app/time-picker/picker-options.vue
index 294b4392f..4f3a8bac2 100644
--- a/examples/sites/demos/pc/app/time-picker/picker-options.vue
+++ b/examples/sites/demos/pc/app/time-picker/picker-options.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue b/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
index 7e5ab0edf..1107a85d3 100644
--- a/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const value = ref('')
 const rangeValue = ref(['', ''])
diff --git a/examples/sites/demos/pc/app/time-picker/placeholder.vue b/examples/sites/demos/pc/app/time-picker/placeholder.vue
index e2d1ca34f..5e5036015 100644
--- a/examples/sites/demos/pc/app/time-picker/placeholder.vue
+++ b/examples/sites/demos/pc/app/time-picker/placeholder.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue b/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue
index b4de1fe6d..53d6047d7 100644
--- a/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
 </script>
diff --git a/examples/sites/demos/pc/app/time-picker/popper-class.vue b/examples/sites/demos/pc/app/time-picker/popper-class.vue
index fefa720d7..ddc3f1fc4 100644
--- a/examples/sites/demos/pc/app/time-picker/popper-class.vue
+++ b/examples/sites/demos/pc/app/time-picker/popper-class.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/size-composition-api.vue b/examples/sites/demos/pc/app/time-picker/size-composition-api.vue
index d6ddbbcbc..dfb3b758f 100644
--- a/examples/sites/demos/pc/app/time-picker/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/size-composition-api.vue
@@ -15,11 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  TimePicker as TinyTimePicker,
-  RadioGroup as TinyRadioGroup,
-  RadioButton as TinyRadioButton
-} from '@opentiny/vue'
+import { TinyTimePicker, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 const startTime = new Date(2016, 9, 10, 18, 40)
 const endTime = new Date(2016, 9, 10, 18, 50)
diff --git a/examples/sites/demos/pc/app/time-picker/size.vue b/examples/sites/demos/pc/app/time-picker/size.vue
index b9233ce13..921303b37 100644
--- a/examples/sites/demos/pc/app/time-picker/size.vue
+++ b/examples/sites/demos/pc/app/time-picker/size.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import { TimePicker, RadioGroup, RadioButton } from '@opentiny/vue'
+import { TinyTimePicker, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker,
-    TinyRadioGroup: RadioGroup,
-    TinyRadioButton: RadioButton
+    TinyTimePicker,
+    TinyRadioGroup,
+    TinyRadioButton
   },
   data() {
     const startTime = new Date(2016, 9, 10, 18, 40)
diff --git a/examples/sites/demos/pc/app/time-picker/step-composition-api.vue b/examples/sites/demos/pc/app/time-picker/step-composition-api.vue
index c10a7e888..92dc35562 100644
--- a/examples/sites/demos/pc/app/time-picker/step-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/step-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 const step = ref({
   hour: 2,
diff --git a/examples/sites/demos/pc/app/time-picker/step.vue b/examples/sites/demos/pc/app/time-picker/step.vue
index d53b3cec3..a5b240617 100644
--- a/examples/sites/demos/pc/app/time-picker/step.vue
+++ b/examples/sites/demos/pc/app/time-picker/step.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue
index bbba2eb5e..239313729 100644
--- a/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimePicker as TinyTimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 import { iconMinus } from '@opentiny/vue-icon'
 
 const value1 = ref(new Date(2016, 9, 10, 18, 40))
diff --git a/examples/sites/demos/pc/app/time-picker/suffix-icon.vue b/examples/sites/demos/pc/app/time-picker/suffix-icon.vue
index 514857fce..a2e53850c 100644
--- a/examples/sites/demos/pc/app/time-picker/suffix-icon.vue
+++ b/examples/sites/demos/pc/app/time-picker/suffix-icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { TimePicker } from '@opentiny/vue'
+import { TinyTimePicker } from '@opentiny/vue'
 import { IconMinus } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimePicker: TimePicker
+    TinyTimePicker
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/time-select/basic-usage-composition-api.vue
index 0889f2891..d09a63596 100644
--- a/examples/sites/demos/pc/app/time-select/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/basic-usage-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/time-select/basic-usage.vue b/examples/sites/demos/pc/app/time-select/basic-usage.vue
index 258ce3d6f..28d7c16f1 100644
--- a/examples/sites/demos/pc/app/time-select/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-select/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/clear-icon-composition-api.vue b/examples/sites/demos/pc/app/time-select/clear-icon-composition-api.vue
index 768e92dd2..78dd57721 100644
--- a/examples/sites/demos/pc/app/time-select/clear-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/clear-icon-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 import { iconYes } from '@opentiny/vue-icon'
 
 const IconYes = iconYes()
diff --git a/examples/sites/demos/pc/app/time-select/clear-icon.vue b/examples/sites/demos/pc/app/time-select/clear-icon.vue
index 6bdf41248..b5a02b8a2 100644
--- a/examples/sites/demos/pc/app/time-select/clear-icon.vue
+++ b/examples/sites/demos/pc/app/time-select/clear-icon.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { TimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 import { IconYes } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/default-value-composition-api.vue b/examples/sites/demos/pc/app/time-select/default-value-composition-api.vue
index 191ee0d03..f0e53ddde 100644
--- a/examples/sites/demos/pc/app/time-select/default-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/default-value-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 const defaultValue = ref('10:00')
diff --git a/examples/sites/demos/pc/app/time-select/default-value.vue b/examples/sites/demos/pc/app/time-select/default-value.vue
index a96e37a47..f65bf915a 100644
--- a/examples/sites/demos/pc/app/time-select/default-value.vue
+++ b/examples/sites/demos/pc/app/time-select/default-value.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/editable-composition-api.vue b/examples/sites/demos/pc/app/time-select/editable-composition-api.vue
index 812c5fa61..bba0ede4b 100644
--- a/examples/sites/demos/pc/app/time-select/editable-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/editable-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/time-select/editable.vue b/examples/sites/demos/pc/app/time-select/editable.vue
index 9eb2b643a..74cd44d87 100644
--- a/examples/sites/demos/pc/app/time-select/editable.vue
+++ b/examples/sites/demos/pc/app/time-select/editable.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { TimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/event-blur-composition-api.vue b/examples/sites/demos/pc/app/time-select/event-blur-composition-api.vue
index 138cd7668..167b6381c 100644
--- a/examples/sites/demos/pc/app/time-select/event-blur-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/event-blur-composition-api.vue
@@ -12,20 +12,20 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect, Modal } from '@opentiny/vue'
+import { TinyTimeSelect, TinyModal } from '@opentiny/vue'
 
 const value1 = ref('08:30')
 
 function bulr() {
-  Modal.message({ message: 'blur事件', status: 'info' })
+  TinyModal.message({ message: 'blur事件', status: 'info' })
 }
 
 function change() {
-  Modal.message({ message: 'change事件', status: 'info' })
+  TinyModal.message({ message: 'change事件', status: 'info' })
 }
 
 function focus() {
-  Modal.message({ message: 'focus事件', status: 'info' })
+  TinyModal.message({ message: 'focus事件', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/time-select/event-blur.vue b/examples/sites/demos/pc/app/time-select/event-blur.vue
index b0881e9dd..85859ea98 100644
--- a/examples/sites/demos/pc/app/time-select/event-blur.vue
+++ b/examples/sites/demos/pc/app/time-select/event-blur.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { TimeSelect, Modal } from '@opentiny/vue'
+import { TinyTimeSelect, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
@@ -24,13 +24,13 @@ export default {
   },
   methods: {
     bulr() {
-      Modal.message({ message: 'blur事件', status: 'info' })
+      TinyModal.message({ message: 'blur事件', status: 'info' })
     },
     change(value) {
-      Modal.message({ message: value, status: 'info' })
+      TinyModal.message({ message: value, status: 'info' })
     },
     focus() {
-      Modal.message({ message: 'focus事件', status: 'info' })
+      TinyModal.message({ message: 'focus事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/time-select/focus-composition-api.vue b/examples/sites/demos/pc/app/time-select/focus-composition-api.vue
index 2fe07a35a..dede4f1e8 100644
--- a/examples/sites/demos/pc/app/time-select/focus-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/focus-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect, Button as TinyButton } from '@opentiny/vue'
+import { TinyTimeSelect, TinyButton } from '@opentiny/vue'
 
 const value = ref('')
 const timeSelectRef = ref()
diff --git a/examples/sites/demos/pc/app/time-select/focus.vue b/examples/sites/demos/pc/app/time-select/focus.vue
index 11821a6ce..40c5ad78c 100644
--- a/examples/sites/demos/pc/app/time-select/focus.vue
+++ b/examples/sites/demos/pc/app/time-select/focus.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { TimeSelect, Button } from '@opentiny/vue'
+import { TinyTimeSelect, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect,
-    TinyButton: Button
+    TinyTimeSelect,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/picker-options-composition-api.vue b/examples/sites/demos/pc/app/time-select/picker-options-composition-api.vue
index 2673b0f11..adb200f43 100644
--- a/examples/sites/demos/pc/app/time-select/picker-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/picker-options-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/time-select/picker-options.vue b/examples/sites/demos/pc/app/time-select/picker-options.vue
index a17eabf0a..e47b12cd8 100644
--- a/examples/sites/demos/pc/app/time-select/picker-options.vue
+++ b/examples/sites/demos/pc/app/time-select/picker-options.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { TimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/range-placeholder-composition-api.vue b/examples/sites/demos/pc/app/time-select/range-placeholder-composition-api.vue
index 9473d8e0b..5ea395d8d 100644
--- a/examples/sites/demos/pc/app/time-select/range-placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/range-placeholder-composition-api.vue
@@ -25,7 +25,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 const startTime = ref('')
 const endTime = ref('')
diff --git a/examples/sites/demos/pc/app/time-select/range-placeholder.vue b/examples/sites/demos/pc/app/time-select/range-placeholder.vue
index d59308b4f..a4c8ccc6b 100644
--- a/examples/sites/demos/pc/app/time-select/range-placeholder.vue
+++ b/examples/sites/demos/pc/app/time-select/range-placeholder.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import { TimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/size-medium-composition-api.vue b/examples/sites/demos/pc/app/time-select/size-medium-composition-api.vue
index 6a78b901f..643c12486 100644
--- a/examples/sites/demos/pc/app/time-select/size-medium-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/size-medium-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
diff --git a/examples/sites/demos/pc/app/time-select/size-medium.vue b/examples/sites/demos/pc/app/time-select/size-medium.vue
index b28c11388..af900dddd 100644
--- a/examples/sites/demos/pc/app/time-select/size-medium.vue
+++ b/examples/sites/demos/pc/app/time-select/size-medium.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { TimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/time-select/suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/time-select/suffix-icon-composition-api.vue
index 422405c96..fa09b6e56 100644
--- a/examples/sites/demos/pc/app/time-select/suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-select/suffix-icon-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 import { iconYes } from '@opentiny/vue-icon'
 
 const IconYes = iconYes()
diff --git a/examples/sites/demos/pc/app/time-select/suffix-icon.vue b/examples/sites/demos/pc/app/time-select/suffix-icon.vue
index 89f382c3d..240c38e9e 100644
--- a/examples/sites/demos/pc/app/time-select/suffix-icon.vue
+++ b/examples/sites/demos/pc/app/time-select/suffix-icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { TimeSelect } from '@opentiny/vue'
+import { TinyTimeSelect } from '@opentiny/vue'
 import { IconYes } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTimeSelect: TimeSelect
+    TinyTimeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/automatic-filtering-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/automatic-filtering-composition-api.vue
index eca3ebb79..e9501b274 100644
--- a/examples/sites/demos/pc/app/toggle-menu/automatic-filtering-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/automatic-filtering-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.vue b/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.vue
index ce8549aa4..1264e2785 100644
--- a/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/basic-usage-composition-api.vue
index 3983c581d..982a76324 100644
--- a/examples/sites/demos/pc/app/toggle-menu/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/basic-usage.vue b/examples/sites/demos/pc/app/toggle-menu/basic-usage.vue
index db55818d7..f81c1d7e0 100644
--- a/examples/sites/demos/pc/app/toggle-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/custom-icon-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/custom-icon-composition-api.vue
index 0fe8d8297..1e3fc87f5 100644
--- a/examples/sites/demos/pc/app/toggle-menu/custom-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/custom-icon-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 import { iconDoubleRight } from '@opentiny/vue-icon'
 
 const IconDoubleRight = iconDoubleRight()
diff --git a/examples/sites/demos/pc/app/toggle-menu/custom-icon.vue b/examples/sites/demos/pc/app/toggle-menu/custom-icon.vue
index 68a3b5d4c..15bea24c2 100644
--- a/examples/sites/demos/pc/app/toggle-menu/custom-icon.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/custom-icon.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 import { IconDoubleRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/custom-searchicon-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/custom-searchicon-composition-api.vue
index 8ce4c36b2..eb4392b41 100644
--- a/examples/sites/demos/pc/app/toggle-menu/custom-searchicon-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/custom-searchicon-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 import { iconDoubleRight } from '@opentiny/vue-icon'
 
 const IconDoubleRight = iconDoubleRight()
diff --git a/examples/sites/demos/pc/app/toggle-menu/custom-searchicon.vue b/examples/sites/demos/pc/app/toggle-menu/custom-searchicon.vue
index bf6ce32a0..aedb5e27c 100644
--- a/examples/sites/demos/pc/app/toggle-menu/custom-searchicon.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/custom-searchicon.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 import { IconDoubleRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/default-expand-all-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/default-expand-all-composition-api.vue
index f99ea5ff7..46b2e658a 100644
--- a/examples/sites/demos/pc/app/toggle-menu/default-expand-all-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/default-expand-all-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/default-expand-all.vue b/examples/sites/demos/pc/app/toggle-menu/default-expand-all.vue
index 397432694..f90bf8b90 100644
--- a/examples/sites/demos/pc/app/toggle-menu/default-expand-all.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/default-expand-all.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/drag-events-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/drag-events-composition-api.vue
index feaa77346..d4489cb2d 100644
--- a/examples/sites/demos/pc/app/toggle-menu/drag-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/drag-events-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu, Notify } from '@opentiny/vue'
+import { TinyToggleMenu, TinyNotify } from '@opentiny/vue'
 
 const datas = ref([
   {
@@ -91,35 +91,35 @@ const datas = ref([
 ])
 
 function nodeDragStart() {
-  Notify({
+  TinyNotify({
     message: '拖拽节点后的事件',
     position: 'top-right'
   })
 }
 
 function nodeDragEnter() {
-  Notify({
+  TinyNotify({
     message: '拖拽进入某个节点（包含自身节点）时触发的事件',
     position: 'top-right'
   })
 }
 
 function nodeDragOver() {
-  Notify({
+  TinyNotify({
     message: '拖拽经过某个节点（包含自身节点）时触发的事件',
     position: 'top-right'
   })
 }
 
 function nodeDragLeave() {
-  Notify({
+  TinyNotify({
     message: '拖拽离开某个节点（包含自身节点）时触发的事件',
     position: 'top-right'
   })
 }
 
 function nodeDragEnd() {
-  Notify({
+  TinyNotify({
     message: '拖拽结束时触发的事件',
     position: 'top-right'
   })
diff --git a/examples/sites/demos/pc/app/toggle-menu/drag-events.vue b/examples/sites/demos/pc/app/toggle-menu/drag-events.vue
index 3d8a35a8f..580af1c3f 100644
--- a/examples/sites/demos/pc/app/toggle-menu/drag-events.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/drag-events.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu, Notify } from '@opentiny/vue'
+import { TinyToggleMenu, TinyNotify } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
@@ -98,31 +98,31 @@ export default {
   },
   methods: {
     nodeDragStart() {
-      Notify({
+      TinyNotify({
         message: '拖拽节点后的事件',
         position: 'top-right'
       })
     },
     nodeDragEnter() {
-      Notify({
+      TinyNotify({
         message: '拖拽进入某个节点（包含自身节点）时触发的事件',
         position: 'top-right'
       })
     },
     nodeDragOver() {
-      Notify({
+      TinyNotify({
         message: '拖拽经过某个节点（包含自身节点）时触发的事件',
         position: 'top-right'
       })
     },
     nodeDragLeave() {
-      Notify({
+      TinyNotify({
         message: '拖拽离开某个节点（包含自身节点）时触发的事件',
         position: 'top-right'
       })
     },
     nodeDragEnd() {
-      Notify({
+      TinyNotify({
         message: '拖拽结束时触发的事件',
         position: 'top-right'
       })
diff --git a/examples/sites/demos/pc/app/toggle-menu/dragable-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/dragable-composition-api.vue
index 7c8439056..b2e5433d6 100644
--- a/examples/sites/demos/pc/app/toggle-menu/dragable-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/dragable-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/dragable.vue b/examples/sites/demos/pc/app/toggle-menu/dragable.vue
index 35448f510..9bdaf25ea 100644
--- a/examples/sites/demos/pc/app/toggle-menu/dragable.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/dragable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/draggable-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/draggable-composition-api.vue
index 7c8439056..b2e5433d6 100644
--- a/examples/sites/demos/pc/app/toggle-menu/draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/draggable-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/draggable.vue b/examples/sites/demos/pc/app/toggle-menu/draggable.vue
index 35448f510..9bdaf25ea 100644
--- a/examples/sites/demos/pc/app/toggle-menu/draggable.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/draggable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/get-menu-data-async-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/get-menu-data-async-composition-api.vue
index ff9532ce0..c9f4cb4bd 100644
--- a/examples/sites/demos/pc/app/toggle-menu/get-menu-data-async-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/get-menu-data-async-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/get-menu-data-async.vue b/examples/sites/demos/pc/app/toggle-menu/get-menu-data-async.vue
index 1e64ff2ad..a5adc84a3 100644
--- a/examples/sites/demos/pc/app/toggle-menu/get-menu-data-async.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/get-menu-data-async.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/get-menu-data-sync-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/get-menu-data-sync-composition-api.vue
index bdd23aea1..64ba83a81 100644
--- a/examples/sites/demos/pc/app/toggle-menu/get-menu-data-sync-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/get-menu-data-sync-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/get-menu-data-sync.vue b/examples/sites/demos/pc/app/toggle-menu/get-menu-data-sync.vue
index 552518acd..cb890d1c0 100644
--- a/examples/sites/demos/pc/app/toggle-menu/get-menu-data-sync.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/get-menu-data-sync.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/node-click-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/node-click-composition-api.vue
index 4fb2a5ce6..0b02e85c0 100644
--- a/examples/sites/demos/pc/app/toggle-menu/node-click-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/node-click-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu, Modal } from '@opentiny/vue'
+import { TinyToggleMenu, TinyModal } from '@opentiny/vue'
 
 const datas = ref([
   {
@@ -83,6 +83,6 @@ const datas = ref([
 ])
 
 function nodeClick() {
-  Modal.message('点击节点后的事件')
+  TinyModal.message('点击节点后的事件')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/toggle-menu/node-click.vue b/examples/sites/demos/pc/app/toggle-menu/node-click.vue
index 9e02315b9..1d95438bb 100644
--- a/examples/sites/demos/pc/app/toggle-menu/node-click.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/node-click.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu, Modal } from '@opentiny/vue'
+import { TinyToggleMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
@@ -90,7 +90,7 @@ export default {
   },
   methods: {
     nodeClick() {
-      Modal.message('点击节点后的事件')
+      TinyModal.message('点击节点后的事件')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/toggle-menu/node-collapse-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/node-collapse-composition-api.vue
index 9eba4e954..a34f07689 100644
--- a/examples/sites/demos/pc/app/toggle-menu/node-collapse-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/node-collapse-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu, Modal } from '@opentiny/vue'
+import { TinyToggleMenu, TinyModal } from '@opentiny/vue'
 
 const datas = ref([
   {
@@ -83,6 +83,6 @@ const datas = ref([
 ])
 
 function nodeCollapse() {
-  Modal.message('收缩节点后的事件')
+  TinyModal.message('收缩节点后的事件')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/toggle-menu/node-collapse.vue b/examples/sites/demos/pc/app/toggle-menu/node-collapse.vue
index a38cfdfcb..e9747fcc4 100644
--- a/examples/sites/demos/pc/app/toggle-menu/node-collapse.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/node-collapse.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu, Modal } from '@opentiny/vue'
+import { TinyToggleMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
@@ -90,7 +90,7 @@ export default {
   },
   methods: {
     nodeCollapse() {
-      Modal.message('收缩节点后的事件')
+      TinyModal.message('收缩节点后的事件')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/toggle-menu/node-drop-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/node-drop-composition-api.vue
index c59195e1c..11c762b3b 100644
--- a/examples/sites/demos/pc/app/toggle-menu/node-drop-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/node-drop-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu, Modal } from '@opentiny/vue'
+import { TinyToggleMenu, TinyModal } from '@opentiny/vue'
 
 const datas = ref([
   {
@@ -83,6 +83,6 @@ const datas = ref([
 ])
 
 function nodeDrop() {
-  Modal.message('拖放节点后的事件')
+  TinyModal.message('拖放节点后的事件')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/toggle-menu/node-drop.vue b/examples/sites/demos/pc/app/toggle-menu/node-drop.vue
index dd0793c24..d827b4523 100644
--- a/examples/sites/demos/pc/app/toggle-menu/node-drop.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/node-drop.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu, Modal } from '@opentiny/vue'
+import { TinyToggleMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
@@ -90,7 +90,7 @@ export default {
   },
   methods: {
     nodeDrop() {
-      Modal.message('拖放节点后的事件')
+      TinyModal.message('拖放节点后的事件')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/toggle-menu/node-expand-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/node-expand-composition-api.vue
index 03d11ee7a..0012d8430 100644
--- a/examples/sites/demos/pc/app/toggle-menu/node-expand-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/node-expand-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu, Modal } from '@opentiny/vue'
+import { TinyToggleMenu, TinyModal } from '@opentiny/vue'
 
 const datas = ref([
   {
@@ -83,6 +83,6 @@ const datas = ref([
 ])
 
 function nodeExpand() {
-  Modal.message('展开节点后的事件')
+  TinyModal.message('展开节点后的事件')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/toggle-menu/node-expand.vue b/examples/sites/demos/pc/app/toggle-menu/node-expand.vue
index ed88eae10..b8465961b 100644
--- a/examples/sites/demos/pc/app/toggle-menu/node-expand.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/node-expand.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu, Modal } from '@opentiny/vue'
+import { TinyToggleMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
@@ -90,7 +90,7 @@ export default {
   },
   methods: {
     nodeExpand() {
-      Modal.message('展开节点后的事件')
+      TinyModal.message('展开节点后的事件')
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/toggle-menu/show-filter-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/show-filter-composition-api.vue
index 0efdff1b8..157d737d8 100644
--- a/examples/sites/demos/pc/app/toggle-menu/show-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/show-filter-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/show-filter.vue b/examples/sites/demos/pc/app/toggle-menu/show-filter.vue
index 8577c111f..b6f96c3b1 100644
--- a/examples/sites/demos/pc/app/toggle-menu/show-filter.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/show-filter.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/slot-node-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/slot-node-composition-api.vue
index 3b7cb6848..72f72c567 100644
--- a/examples/sites/demos/pc/app/toggle-menu/slot-node-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/slot-node-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/slot-node.vue b/examples/sites/demos/pc/app/toggle-menu/slot-node.vue
index fceb6a519..b4900db5c 100644
--- a/examples/sites/demos/pc/app/toggle-menu/slot-node.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/slot-node.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/toggle-menu/toggle-props-composition-api.vue b/examples/sites/demos/pc/app/toggle-menu/toggle-props-composition-api.vue
index b0fc30e9d..c7322ffe0 100644
--- a/examples/sites/demos/pc/app/toggle-menu/toggle-props-composition-api.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/toggle-props-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { ToggleMenu as TinyToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 const datas = ref([
   {
diff --git a/examples/sites/demos/pc/app/toggle-menu/toggle-props.vue b/examples/sites/demos/pc/app/toggle-menu/toggle-props.vue
index 55659f56b..f15da5ca0 100644
--- a/examples/sites/demos/pc/app/toggle-menu/toggle-props.vue
+++ b/examples/sites/demos/pc/app/toggle-menu/toggle-props.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu } from '@opentiny/vue'
+import { TinyToggleMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyToggleMenu: ToggleMenu
+    TinyToggleMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tooltip/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tooltip/basic-usage-composition-api.vue
index 8f48f084f..7e4ca0583 100644
--- a/examples/sites/demos/pc/app/tooltip/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/basic-usage-composition-api.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Tooltip as TinyTooltip, Button as TinyButton } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 </script>
 
 <style lang="css" scoped>
diff --git a/examples/sites/demos/pc/app/tooltip/basic-usage.vue b/examples/sites/demos/pc/app/tooltip/basic-usage.vue
index 424ce63b1..0670e2640 100644
--- a/examples/sites/demos/pc/app/tooltip/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tooltip/basic-usage.vue
@@ -48,12 +48,12 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tooltip/content-composition-api.vue b/examples/sites/demos/pc/app/tooltip/content-composition-api.vue
index e178f5cc2..9ddfccb1f 100644
--- a/examples/sites/demos/pc/app/tooltip/content-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/content-composition-api.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Tooltip as TinyTooltip, Link as TinyLink } from '@opentiny/vue'
+import { TinyTooltip, TinyLink } from '@opentiny/vue'
 import { iconOperationfaild } from '@opentiny/vue-icon'
 
 const IconOperationfaild = iconOperationfaild()
diff --git a/examples/sites/demos/pc/app/tooltip/content-max-height-composition-api.vue b/examples/sites/demos/pc/app/tooltip/content-max-height-composition-api.vue
index 5e0091482..eecce3096 100644
--- a/examples/sites/demos/pc/app/tooltip/content-max-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/content-max-height-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { Tooltip as TinyTooltip } from '@opentiny/vue'
+import { TinyTooltip } from '@opentiny/vue'
 
 const content = Array(1000).fill('这是很长很长的文本').join('，')
 </script>
diff --git a/examples/sites/demos/pc/app/tooltip/content-max-height.vue b/examples/sites/demos/pc/app/tooltip/content-max-height.vue
index 38a6fe030..6dcdfe79b 100644
--- a/examples/sites/demos/pc/app/tooltip/content-max-height.vue
+++ b/examples/sites/demos/pc/app/tooltip/content-max-height.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Tooltip } from '@opentiny/vue'
+import { TinyTooltip } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip
+    TinyTooltip
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tooltip/content.vue b/examples/sites/demos/pc/app/tooltip/content.vue
index ded167e2d..fa0d6313f 100644
--- a/examples/sites/demos/pc/app/tooltip/content.vue
+++ b/examples/sites/demos/pc/app/tooltip/content.vue
@@ -28,14 +28,14 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip, Link } from '@opentiny/vue'
+import { TinyTooltip, TinyLink } from '@opentiny/vue'
 import { iconOperationfaild } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
+    TinyTooltip,
     IconOperationfaild: iconOperationfaild(),
-    TinyLink: Link
+    TinyLink
   },
   methods: {
     renderContent(h, content) {
diff --git a/examples/sites/demos/pc/app/tooltip/control-composition-api.vue b/examples/sites/demos/pc/app/tooltip/control-composition-api.vue
index c4d8df8c0..2b5b6a21d 100644
--- a/examples/sites/demos/pc/app/tooltip/control-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/control-composition-api.vue
@@ -57,7 +57,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tooltip as TinyTooltip, Switch as TinySwitch } from '@opentiny/vue'
+import { TinyTooltip, TinySwitch } from '@opentiny/vue'
 
 const visible = ref(false)
 const manualShow = ref(false)
diff --git a/examples/sites/demos/pc/app/tooltip/control.vue b/examples/sites/demos/pc/app/tooltip/control.vue
index 66117bc84..b3189293a 100644
--- a/examples/sites/demos/pc/app/tooltip/control.vue
+++ b/examples/sites/demos/pc/app/tooltip/control.vue
@@ -56,12 +56,12 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip, Switch } from '@opentiny/vue'
+import { TinyTooltip, TinySwitch } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinySwitch: Switch
+    TinyTooltip,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tooltip/custom-popper-composition-api.vue b/examples/sites/demos/pc/app/tooltip/custom-popper-composition-api.vue
index 8e85d003e..93eac35da 100644
--- a/examples/sites/demos/pc/app/tooltip/custom-popper-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/custom-popper-composition-api.vue
@@ -39,7 +39,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tooltip as TinyTooltip, Switch as TinySwitch, Button as TinyButton } from '@opentiny/vue'
+import { TinyTooltip, TinySwitch, TinyButton } from '@opentiny/vue'
 
 const visibleArrow = ref(true)
 const enterable = ref(true)
diff --git a/examples/sites/demos/pc/app/tooltip/custom-popper.vue b/examples/sites/demos/pc/app/tooltip/custom-popper.vue
index 1ea6e573a..67db245c5 100644
--- a/examples/sites/demos/pc/app/tooltip/custom-popper.vue
+++ b/examples/sites/demos/pc/app/tooltip/custom-popper.vue
@@ -38,13 +38,13 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip, Switch, Button } from '@opentiny/vue'
+import { TinyTooltip, TinySwitch, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button,
-    TinySwitch: Switch
+    TinyTooltip,
+    TinyButton,
+    TinySwitch
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tooltip/delay-composition-api.vue b/examples/sites/demos/pc/app/tooltip/delay-composition-api.vue
index 3e248fc4a..f1b4ce402 100644
--- a/examples/sites/demos/pc/app/tooltip/delay-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/delay-composition-api.vue
@@ -13,5 +13,5 @@
 </template>
 
 <script setup lang="jsx">
-import { Tooltip as TinyTooltip } from '@opentiny/vue'
+import { TinyTooltip } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/tooltip/delay.vue b/examples/sites/demos/pc/app/tooltip/delay.vue
index 809140bb7..3daa9a9e9 100644
--- a/examples/sites/demos/pc/app/tooltip/delay.vue
+++ b/examples/sites/demos/pc/app/tooltip/delay.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip } from '@opentiny/vue'
+import { TinyTooltip } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip
+    TinyTooltip
   },
   data() {
     return {}
diff --git a/examples/sites/demos/pc/app/tooltip/offset-composition-api.vue b/examples/sites/demos/pc/app/tooltip/offset-composition-api.vue
index ff44485da..134455986 100644
--- a/examples/sites/demos/pc/app/tooltip/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/offset-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tooltip as TinyTooltip, Slider as TinySlider } from '@opentiny/vue'
+import { TinyTooltip, TinySlider } from '@opentiny/vue'
 
 const offset = ref(10)
 const show = ref(true)
diff --git a/examples/sites/demos/pc/app/tooltip/offset.vue b/examples/sites/demos/pc/app/tooltip/offset.vue
index 43ed90725..c639c0b98 100644
--- a/examples/sites/demos/pc/app/tooltip/offset.vue
+++ b/examples/sites/demos/pc/app/tooltip/offset.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip, Slider } from '@opentiny/vue'
+import { TinyTooltip, TinySlider } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinySlider: Slider
+    TinyTooltip,
+    TinySlider
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tooltip/popper-options-composition-api.vue b/examples/sites/demos/pc/app/tooltip/popper-options-composition-api.vue
index 0c6edc492..31f5b6f24 100644
--- a/examples/sites/demos/pc/app/tooltip/popper-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/popper-options-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tooltip as TinyTooltip } from '@opentiny/vue'
+import { TinyTooltip } from '@opentiny/vue'
 
 const options = ref({
   bubbling: true, // 监听元素所有上级有滚动元素的scroll事件,防止弹出层与页面分离
diff --git a/examples/sites/demos/pc/app/tooltip/popper-options.vue b/examples/sites/demos/pc/app/tooltip/popper-options.vue
index db2f1c32d..c215cdaad 100644
--- a/examples/sites/demos/pc/app/tooltip/popper-options.vue
+++ b/examples/sites/demos/pc/app/tooltip/popper-options.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip } from '@opentiny/vue'
+import { TinyTooltip } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip
+    TinyTooltip
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tooltip/pre-composition-api.vue b/examples/sites/demos/pc/app/tooltip/pre-composition-api.vue
index 84c1dd5f0..d1091d15f 100644
--- a/examples/sites/demos/pc/app/tooltip/pre-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/pre-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Tooltip as TinyTooltip, Button as TinyButton } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 const content = ref(
   [
diff --git a/examples/sites/demos/pc/app/tooltip/pre.vue b/examples/sites/demos/pc/app/tooltip/pre.vue
index d4f661942..0261a0f4e 100644
--- a/examples/sites/demos/pc/app/tooltip/pre.vue
+++ b/examples/sites/demos/pc/app/tooltip/pre.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tooltip/theme-composition-api.vue b/examples/sites/demos/pc/app/tooltip/theme-composition-api.vue
index 03b52bef7..affe97f61 100644
--- a/examples/sites/demos/pc/app/tooltip/theme-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/theme-composition-api.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Tooltip as TinyTooltip, Button as TinyButton } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/tooltip/theme.vue b/examples/sites/demos/pc/app/tooltip/theme.vue
index 1af0f5ee4..5e4729843 100644
--- a/examples/sites/demos/pc/app/tooltip/theme.vue
+++ b/examples/sites/demos/pc/app/tooltip/theme.vue
@@ -31,12 +31,12 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip, Button } from '@opentiny/vue'
+import { TinyTooltip, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
-    TinyButton: Button
+    TinyTooltip,
+    TinyButton
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tooltip/transition-composition-api.vue b/examples/sites/demos/pc/app/tooltip/transition-composition-api.vue
index f12f75474..a019e434e 100644
--- a/examples/sites/demos/pc/app/tooltip/transition-composition-api.vue
+++ b/examples/sites/demos/pc/app/tooltip/transition-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Tooltip as TinyTooltip } from '@opentiny/vue'
+import { TinyTooltip } from '@opentiny/vue'
 </script>
 
 <style>
diff --git a/examples/sites/demos/pc/app/tooltip/transition.vue b/examples/sites/demos/pc/app/tooltip/transition.vue
index c45afb9cd..e08bb086d 100644
--- a/examples/sites/demos/pc/app/tooltip/transition.vue
+++ b/examples/sites/demos/pc/app/tooltip/transition.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Tooltip } from '@opentiny/vue'
+import { TinyTooltip } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip
+    TinyTooltip
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/transfer/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/transfer/basic-usage-composition-api.vue
index d8deaf25e..6f1dd1195 100644
--- a/examples/sites/demos/pc/app/transfer/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
diff --git a/examples/sites/demos/pc/app/transfer/basic-usage.vue b/examples/sites/demos/pc/app/transfer/basic-usage.vue
index 64ab92e0c..56c6d5bbe 100644
--- a/examples/sites/demos/pc/app/transfer/basic-usage.vue
+++ b/examples/sites/demos/pc/app/transfer/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Transfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/before-transfer-composition-api.vue b/examples/sites/demos/pc/app/transfer/before-transfer-composition-api.vue
index 7fc1bd675..41f37aaa9 100644
--- a/examples/sites/demos/pc/app/transfer/before-transfer-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/before-transfer-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Transfer as TinyTransfer, Modal } from '@opentiny/vue'
+import { TinyTransfer, TinyModal } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
@@ -24,7 +24,7 @@ const data = ref(generateData())
 const value = ref([1, 4])
 
 function beforeTransfer(done) {
-  Modal.message('穿梭功能已被拦截，必须调用 done 方法才能执行穿梭，2s后将自动调用 done 方法执行穿梭')
+  TinyModal.message('穿梭功能已被拦截，必须调用 done 方法才能执行穿梭，2s后将自动调用 done 方法执行穿梭')
   setTimeout(done, 2000)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/transfer/before-transfer.vue b/examples/sites/demos/pc/app/transfer/before-transfer.vue
index c34080d75..67b3752c1 100644
--- a/examples/sites/demos/pc/app/transfer/before-transfer.vue
+++ b/examples/sites/demos/pc/app/transfer/before-transfer.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { Transfer, Modal } from '@opentiny/vue'
+import { TinyTransfer, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     const generateData = () => {
@@ -31,7 +31,7 @@ export default {
   },
   methods: {
     beforeTransfer(done) {
-      Modal.message('穿梭功能已被拦截，必须调用 done 方法才能执行穿梭，2s后将自动调用 done 方法执行穿梭')
+      TinyModal.message('穿梭功能已被拦截，必须调用 done 方法才能执行穿梭，2s后将自动调用 done 方法执行穿梭')
       setTimeout(done, 2000)
     }
   }
diff --git a/examples/sites/demos/pc/app/transfer/custom-btns-composition-api.vue b/examples/sites/demos/pc/app/transfer/custom-btns-composition-api.vue
index 03702077b..f8a640a7d 100644
--- a/examples/sites/demos/pc/app/transfer/custom-btns-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-btns-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer, Button as TinyButton } from '@opentiny/vue'
+import { TinyTransfer, TinyButton } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
diff --git a/examples/sites/demos/pc/app/transfer/custom-btns.vue b/examples/sites/demos/pc/app/transfer/custom-btns.vue
index 861c6e7e4..1a1856fbe 100644
--- a/examples/sites/demos/pc/app/transfer/custom-btns.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-btns.vue
@@ -21,12 +21,12 @@
 </template>
 
 <script lang="jsx">
-import { Transfer, Button } from '@opentiny/vue'
+import { TinyTransfer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer,
-    TinyButton: Button
+    TinyTransfer,
+    TinyButton
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/custom-filter-composition-api.vue b/examples/sites/demos/pc/app/transfer/custom-filter-composition-api.vue
index 3ff2c662d..ab9ae6a40 100644
--- a/examples/sites/demos/pc/app/transfer/custom-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-filter-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer, Button as TinyButton } from '@opentiny/vue'
+import { TinyTransfer, TinyButton } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
diff --git a/examples/sites/demos/pc/app/transfer/custom-filter.vue b/examples/sites/demos/pc/app/transfer/custom-filter.vue
index 63e6b3cc3..ed421f30a 100644
--- a/examples/sites/demos/pc/app/transfer/custom-filter.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-filter.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script lang="jsx">
-import { Transfer, Button } from '@opentiny/vue'
+import { TinyTransfer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer,
-    TinyButton: Button
+    TinyTransfer,
+    TinyButton
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/custom-footer-composition-api.vue b/examples/sites/demos/pc/app/transfer/custom-footer-composition-api.vue
index 5faafc6e9..4b82c8caa 100644
--- a/examples/sites/demos/pc/app/transfer/custom-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-footer-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer, Button as TinyButton } from '@opentiny/vue'
+import { TinyTransfer, TinyButton } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
diff --git a/examples/sites/demos/pc/app/transfer/custom-footer.vue b/examples/sites/demos/pc/app/transfer/custom-footer.vue
index 074e017b2..dba60435c 100644
--- a/examples/sites/demos/pc/app/transfer/custom-footer.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-footer.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="jsx">
-import { Transfer, Button } from '@opentiny/vue'
+import { TinyTransfer, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer,
-    TinyButton: Button
+    TinyTransfer,
+    TinyButton
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue b/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
index 9c1d47d2a..b1410f13b 100644
--- a/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
diff --git a/examples/sites/demos/pc/app/transfer/custom-render.vue b/examples/sites/demos/pc/app/transfer/custom-render.vue
index febc0f093..99c9db7cc 100644
--- a/examples/sites/demos/pc/app/transfer/custom-render.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-render.vue
@@ -21,11 +21,11 @@
 </template>
 
 <script lang="jsx">
-import { Transfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/custom-titles-composition-api.vue b/examples/sites/demos/pc/app/transfer/custom-titles-composition-api.vue
index bae12489d..cb7f1d053 100644
--- a/examples/sites/demos/pc/app/transfer/custom-titles-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-titles-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
diff --git a/examples/sites/demos/pc/app/transfer/custom-titles.vue b/examples/sites/demos/pc/app/transfer/custom-titles.vue
index 186d850fb..7a53b46ca 100644
--- a/examples/sites/demos/pc/app/transfer/custom-titles.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-titles.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { Transfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/default-checked-composition-api.vue b/examples/sites/demos/pc/app/transfer/default-checked-composition-api.vue
index edb18e203..da58517e7 100644
--- a/examples/sites/demos/pc/app/transfer/default-checked-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/default-checked-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { onMounted, ref } from 'vue'
-import { Transfer as TinyTransfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
diff --git a/examples/sites/demos/pc/app/transfer/default-checked.vue b/examples/sites/demos/pc/app/transfer/default-checked.vue
index 0f80230f1..789b50171 100644
--- a/examples/sites/demos/pc/app/transfer/default-checked.vue
+++ b/examples/sites/demos/pc/app/transfer/default-checked.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="jsx">
-import { Transfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/drop-config-composition-api.vue b/examples/sites/demos/pc/app/transfer/drop-config-composition-api.vue
index 810ffe553..c6d0cae10 100644
--- a/examples/sites/demos/pc/app/transfer/drop-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/drop-config-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/drop-config.vue b/examples/sites/demos/pc/app/transfer/drop-config.vue
index 084c149d8..6a54cbb66 100644
--- a/examples/sites/demos/pc/app/transfer/drop-config.vue
+++ b/examples/sites/demos/pc/app/transfer/drop-config.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script lang="jsx">
-import { Transfer } from '@opentiny/vue'
+import { TinyTransfer } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/nested-table-composition-api.vue b/examples/sites/demos/pc/app/transfer/nested-table-composition-api.vue
index bc3ebe94e..b16e9a2fd 100644
--- a/examples/sites/demos/pc/app/transfer/nested-table-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/nested-table-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer, Table } from '@opentiny/vue'
+import { TinyTransfer, TinyTable } from '@opentiny/vue'
 
 const getGridData = () => {
   const data = []
@@ -42,7 +42,7 @@ const getGridData = () => {
 }
 
 const render = ref({
-  plugin: Table
+  plugin: TinyTable
 })
 const value = ref(['5', '6', '14', '10', '9', '11', '12'])
 const data = ref(getGridData())
diff --git a/examples/sites/demos/pc/app/transfer/nested-table.vue b/examples/sites/demos/pc/app/transfer/nested-table.vue
index 6c10d2998..9c4ec9bf5 100644
--- a/examples/sites/demos/pc/app/transfer/nested-table.vue
+++ b/examples/sites/demos/pc/app/transfer/nested-table.vue
@@ -23,11 +23,11 @@
 </template>
 
 <script lang="jsx">
-import { Transfer, Table } from '@opentiny/vue'
+import { TinyTransfer, TinyTable } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     const getGridData = () => {
@@ -47,7 +47,7 @@ export default {
 
     return {
       render: {
-        plugin: Table
+        plugin: TinyTable
       },
       value: ['5', '6', '14', '10', '9', '11', '12'],
       data: getGridData(),
diff --git a/examples/sites/demos/pc/app/transfer/nested-tree-composition-api.vue b/examples/sites/demos/pc/app/transfer/nested-tree-composition-api.vue
index 66edea28b..0b203e02d 100644
--- a/examples/sites/demos/pc/app/transfer/nested-tree-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/nested-tree-composition-api.vue
@@ -15,11 +15,11 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer, Tree } from '@opentiny/vue'
+import { TinyTransfer, TinyTree } from '@opentiny/vue'
 
 const value = ref([3, 4, 5])
 const renderTree = ref({
-  plugin: Tree
+  plugin: TinyTree
 })
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/transfer/nested-tree.vue b/examples/sites/demos/pc/app/transfer/nested-tree.vue
index a81fb2608..43e46cc87 100644
--- a/examples/sites/demos/pc/app/transfer/nested-tree.vue
+++ b/examples/sites/demos/pc/app/transfer/nested-tree.vue
@@ -14,17 +14,17 @@
 </template>
 
 <script lang="jsx">
-import { Transfer, Tree } from '@opentiny/vue'
+import { TinyTransfer, TinyTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     return {
       value: [3, 4, 5],
       renderTree: {
-        plugin: Tree
+        plugin: TinyTree
       },
       treeData: [
         {
diff --git a/examples/sites/demos/pc/app/transfer/target-order-composition-api.vue b/examples/sites/demos/pc/app/transfer/target-order-composition-api.vue
index 63ee3ed82..86c40bfad 100644
--- a/examples/sites/demos/pc/app/transfer/target-order-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/target-order-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer, Radio as TinyRadio } from '@opentiny/vue'
+import { TinyTransfer, TinyRadio } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
diff --git a/examples/sites/demos/pc/app/transfer/target-order.vue b/examples/sites/demos/pc/app/transfer/target-order.vue
index d1412ba95..2ec40f247 100644
--- a/examples/sites/demos/pc/app/transfer/target-order.vue
+++ b/examples/sites/demos/pc/app/transfer/target-order.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="jsx">
-import { Transfer, Radio } from '@opentiny/vue'
+import { TinyTransfer, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer,
-    TinyRadio: Radio
+    TinyTransfer,
+    TinyRadio
   },
   data() {
     const generateData = () => {
diff --git a/examples/sites/demos/pc/app/transfer/transfer-events-composition-api.vue b/examples/sites/demos/pc/app/transfer/transfer-events-composition-api.vue
index a1335f34f..4df3d137f 100644
--- a/examples/sites/demos/pc/app/transfer/transfer-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/transfer-events-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer, Modal } from '@opentiny/vue'
+import { TinyTransfer, TinyModal } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
@@ -30,21 +30,21 @@ const data = ref(generateData())
 const value = ref([1, 4])
 
 function change(value, move, keyArray) {
-  Modal.message({
+  TinyModal.message({
     message: 'change 事件，当前值：' + value + '，方向：' + move + '，移动的数据：' + keyArray,
     status: 'info'
   })
 }
 
 function leftCheckChange(checked, statusChanged) {
-  Modal.message({
+  TinyModal.message({
     message: 'left-check-change 事件，被选中：' + checked + '，选中状态发生变化：' + statusChanged,
     status: 'info'
   })
 }
 
 function rightCheckChange(checked, statusChanged) {
-  Modal.message({
+  TinyModal.message({
     message: 'right-check-change 事件，被选中：' + checked + '，选中状态发生变化：' + statusChanged,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/transfer/transfer-events.vue b/examples/sites/demos/pc/app/transfer/transfer-events.vue
index e26a29996..2e626be9c 100644
--- a/examples/sites/demos/pc/app/transfer/transfer-events.vue
+++ b/examples/sites/demos/pc/app/transfer/transfer-events.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="jsx">
-import { Transfer, Modal } from '@opentiny/vue'
+import { TinyTransfer, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer
   },
   data() {
     const generateData = () => {
@@ -37,19 +37,19 @@ export default {
   },
   methods: {
     change(value, move, keyArray) {
-      Modal.message({
+      TinyModal.message({
         message: 'change 事件，当前值：' + value + '，方向：' + move + '，移动的数据：' + keyArray,
         status: 'info'
       })
     },
     leftCheckChange(checked, statusChanged) {
-      Modal.message({
+      TinyModal.message({
         message: 'left-check-change 事件，被选中：' + checked + '，选中状态发生变化：' + statusChanged,
         status: 'info'
       })
     },
     rightCheckChange(checked, statusChanged) {
-      Modal.message({
+      TinyModal.message({
         message: 'right-check-change 事件，被选中：' + checked + '，选中状态发生变化：' + statusChanged,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue
index 6169cf244..5416a0eff 100644
--- a/examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/accordion.vue b/examples/sites/demos/pc/app/tree-menu/accordion.vue
index 90c3cb16e..8daf16fd9 100644
--- a/examples/sites/demos/pc/app/tree-menu/accordion.vue
+++ b/examples/sites/demos/pc/app/tree-menu/accordion.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue
index d73258036..2ffa5d90b 100644
--- a/examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/tree-menu/basic-usage.vue b/examples/sites/demos/pc/app/tree-menu/basic-usage.vue
index 013b5b8db..af1896b26 100644
--- a/examples/sites/demos/pc/app/tree-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tree-menu/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tree-menu/clearable-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/clearable-composition-api.vue
index 91c528468..1f1ad313a 100644
--- a/examples/sites/demos/pc/app/tree-menu/clearable-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/clearable-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const data = [
   {
@@ -171,22 +171,3 @@ const data = [
   }
 ]
 </script>
-
-<!-- <template>
-  <tiny-tree-menu ></tiny-tree-menu>
-</template>
-
-<script>
-
-
-export default {
-  components: {
-    TinyTreeMenu: TreeMenu
-  },
-  data() {
-    return {
-      treeData: 
-    }
-  }
-}
-</script> -->
diff --git a/examples/sites/demos/pc/app/tree-menu/clearable.vue b/examples/sites/demos/pc/app/tree-menu/clearable.vue
index 11202680a..0dc577dc8 100644
--- a/examples/sites/demos/pc/app/tree-menu/clearable.vue
+++ b/examples/sites/demos/pc/app/tree-menu/clearable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue
index ff77c750b..d4268b92c 100644
--- a/examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue
@@ -27,7 +27,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { TreeMenu as TinyTreeMenu, Button as TinyButton } from '@opentiny/vue'
+import { TinyTreeMenu, TinyButton } from '@opentiny/vue'
 
 const treeMenu = ref(null)
 const treeData = reactive([
diff --git a/examples/sites/demos/pc/app/tree-menu/current-node.vue b/examples/sites/demos/pc/app/tree-menu/current-node.vue
index 51f326041..b865d6954 100644
--- a/examples/sites/demos/pc/app/tree-menu/current-node.vue
+++ b/examples/sites/demos/pc/app/tree-menu/current-node.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { TreeMenu, Button } from '@opentiny/vue'
+import { TinyTreeMenu, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu,
-    TinyButton: Button
+    TinyTreeMenu,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue
index 5436e92d1..1bb2d6e72 100644
--- a/examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 import { iconCalendar, iconDoubleRight } from '@opentiny/vue-icon'
 
 const tinyIconCalendar = iconCalendar()
diff --git a/examples/sites/demos/pc/app/tree-menu/custom-icon.vue b/examples/sites/demos/pc/app/tree-menu/custom-icon.vue
index 20d72c408..4b9b3f796 100644
--- a/examples/sites/demos/pc/app/tree-menu/custom-icon.vue
+++ b/examples/sites/demos/pc/app/tree-menu/custom-icon.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 import { iconCalendar, iconDoubleRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
index 74b38c289..263195286 100644
--- a/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/data-resource.vue b/examples/sites/demos/pc/app/tree-menu/data-resource.vue
index 71a93618b..cfec326f3 100644
--- a/examples/sites/demos/pc/app/tree-menu/data-resource.vue
+++ b/examples/sites/demos/pc/app/tree-menu/data-resource.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue
index b88d37736..49a7ef6ae 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const expandeArr = ref([302])
 const treeData = ref([
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expand-all.vue b/examples/sites/demos/pc/app/tree-menu/default-expand-all.vue
index 3a82b52c8..97c51f196 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expand-all.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expand-all.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue
index 7206972d1..7ce999387 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const expandeArr = ref([30101])
 const treeData = ref([
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue
index 35f90dff8..a0575245e 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { TreeMenu as TinyTreeMenu, Button as TinyButton } from '@opentiny/vue'
+import { TinyTreeMenu, TinyButton } from '@opentiny/vue'
 
 let expandeArr = reactive([30101])
 const highlight = ref(30101)
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue
index cae2e8af9..b6c887463 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script>
-import { TreeMenu, Button } from '@opentiny/vue'
+import { TinyTreeMenu, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu,
-    TinyButton: Button
+    TinyTreeMenu,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue
index b708f2ad8..270ea7d77 100644
--- a/examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue
+++ b/examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue
@@ -4,11 +4,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/draggable-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/draggable-composition-api.vue
index fb14ac422..0002cb87f 100644
--- a/examples/sites/demos/pc/app/tree-menu/draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/draggable-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/draggable.vue b/examples/sites/demos/pc/app/tree-menu/draggable.vue
index 8c690f39d..7c3a5cef7 100644
--- a/examples/sites/demos/pc/app/tree-menu/draggable.vue
+++ b/examples/sites/demos/pc/app/tree-menu/draggable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/empty-text-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/empty-text-composition-api.vue
index 3719e50fe..a307d0f3d 100644
--- a/examples/sites/demos/pc/app/tree-menu/empty-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/empty-text-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([])
 </script>
diff --git a/examples/sites/demos/pc/app/tree-menu/empty-text.vue b/examples/sites/demos/pc/app/tree-menu/empty-text.vue
index 03d588035..96b9e325a 100644
--- a/examples/sites/demos/pc/app/tree-menu/empty-text.vue
+++ b/examples/sites/demos/pc/app/tree-menu/empty-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/event-allow-draggable-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/event-allow-draggable-composition-api.vue
index baaab4390..ec110afb7 100644
--- a/examples/sites/demos/pc/app/tree-menu/event-allow-draggable-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/event-allow-draggable-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
+import { TinyTreeMenu, TinyModal } from '@opentiny/vue'
 
 const treeData = ref([
   {
@@ -177,10 +177,10 @@ function dragCallback() {
 }
 
 function dragStart() {
-  Modal.message('拖拽节点开始时触发的事件')
+  TinyModal.message('拖拽节点开始时触发的事件')
 }
 
 function dragEnd() {
-  Modal.message('拖拽结束时触发的事件')
+  TinyModal.message('拖拽结束时触发的事件')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tree-menu/event-allow-draggable.vue b/examples/sites/demos/pc/app/tree-menu/event-allow-draggable.vue
index 6f5724003..f1c2702cf 100644
--- a/examples/sites/demos/pc/app/tree-menu/event-allow-draggable.vue
+++ b/examples/sites/demos/pc/app/tree-menu/event-allow-draggable.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TreeMenu, Modal } from '@opentiny/vue'
+import { TinyTreeMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   methods: {
     dropCallback(params1, params2, params3) {
@@ -27,11 +27,11 @@ export default {
     },
     dragStart(node, event) {
       console.log('drag-start', node, event)
-      Modal.message('拖拽节点开始时触发的事件')
+      TinyModal.message('拖拽节点开始时触发的事件')
     },
     dragEnd(draggingNode, targetNode, dropType, event) {
       console.log('drag-end', draggingNode, targetNode, dropType, event)
-      Modal.message('拖拽结束时触发的事件')
+      TinyModal.message('拖拽结束时触发的事件')
     }
   },
   data() {
diff --git a/examples/sites/demos/pc/app/tree-menu/events-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/events-composition-api.vue
index 12c8fe4bd..88fc4bc4e 100644
--- a/examples/sites/demos/pc/app/tree-menu/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/events-composition-api.vue
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
+import { TinyTreeMenu, TinyModal } from '@opentiny/vue'
 
 const treeData = ref([
   {
@@ -170,24 +170,24 @@ const treeData = ref([
 ])
 
 const handleNodeClick = (data) => {
-  Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
+  TinyModal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
 }
 
 const currentChange = (data) => {
-  Modal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
+  TinyModal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
 }
 
 const nodeExpand = (data) => {
-  Modal.message({ message: `节点-${data.label}被打开了`, status: 'info' })
+  TinyModal.message({ message: `节点-${data.label}被打开了`, status: 'info' })
 }
 
 const nodeCollapse = (data) => {
-  Modal.message({ message: `节点-${data.label}被关闭了`, status: 'info' })
+  TinyModal.message({ message: `节点-${data.label}被关闭了`, status: 'info' })
 }
 
 const checkChange = (node, newVal) => {
   let state = newVal ? '选中' : '取消'
-  Modal.message({
+  TinyModal.message({
     message: `节点-${node.label}被${state}了`,
     status: 'info'
   })
diff --git a/examples/sites/demos/pc/app/tree-menu/events.vue b/examples/sites/demos/pc/app/tree-menu/events.vue
index 6c064f305..f7debcb8d 100644
--- a/examples/sites/demos/pc/app/tree-menu/events.vue
+++ b/examples/sites/demos/pc/app/tree-menu/events.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { TreeMenu, Modal } from '@opentiny/vue'
+import { TinyTreeMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
@@ -181,20 +181,20 @@ export default {
   },
   methods: {
     handleNodeClick(data) {
-      Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
+      TinyModal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
     },
     currentChange(data) {
-      Modal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
+      TinyModal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
     },
     nodeExpand(data) {
-      Modal.message({ message: `节点-${data.label}被打开了`, status: 'info' })
+      TinyModal.message({ message: `节点-${data.label}被打开了`, status: 'info' })
     },
     nodeCollapse(data) {
-      Modal.message({ message: `节点-${data.label}被关闭了`, status: 'info' })
+      TinyModal.message({ message: `节点-${data.label}被关闭了`, status: 'info' })
     },
     checkChange(node, newVal) {
       let state = newVal ? '选中' : '取消'
-      Modal.message({
+      TinyModal.message({
         message: `节点-${node.label}被${state}了`,
         status: 'info'
       })
diff --git a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
index 9c4c4eea9..092ca7aca 100644
--- a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
index d5288c097..f28346a18 100644
--- a/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
+++ b/examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/filter-node-method-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/filter-node-method-composition-api.vue
index 1c461a986..8902e93d1 100644
--- a/examples/sites/demos/pc/app/tree-menu/filter-node-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/filter-node-method-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/filter-node-method.vue b/examples/sites/demos/pc/app/tree-menu/filter-node-method.vue
index ca728646d..5654b2c0b 100644
--- a/examples/sites/demos/pc/app/tree-menu/filter-node-method.vue
+++ b/examples/sites/demos/pc/app/tree-menu/filter-node-method.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/indent-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/indent-composition-api.vue
index 8b4c7fc1b..1e667c87b 100644
--- a/examples/sites/demos/pc/app/tree-menu/indent-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/indent-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/indent.vue b/examples/sites/demos/pc/app/tree-menu/indent.vue
index 9da3ec9bf..ca96c7ec0 100644
--- a/examples/sites/demos/pc/app/tree-menu/indent.vue
+++ b/examples/sites/demos/pc/app/tree-menu/indent.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue
index 891bc9d59..d91e78ea4 100644
--- a/examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const count = ref(1)
 
diff --git a/examples/sites/demos/pc/app/tree-menu/lazy-load.vue b/examples/sites/demos/pc/app/tree-menu/lazy-load.vue
index 20e712d71..25abf621b 100644
--- a/examples/sites/demos/pc/app/tree-menu/lazy-load.vue
+++ b/examples/sites/demos/pc/app/tree-menu/lazy-load.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/menu-collapsible-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/menu-collapsible-composition-api.vue
index 48f58d299..aa079935a 100644
--- a/examples/sites/demos/pc/app/tree-menu/menu-collapsible-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/menu-collapsible-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/menu-collapsible.vue b/examples/sites/demos/pc/app/tree-menu/menu-collapsible.vue
index d819c6f3e..19734ccd2 100644
--- a/examples/sites/demos/pc/app/tree-menu/menu-collapsible.vue
+++ b/examples/sites/demos/pc/app/tree-menu/menu-collapsible.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue
index 0dec24467..942e522a2 100644
--- a/examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
+import { TinyTreeMenu, TinyModal } from '@opentiny/vue'
 
 const treeData = ref([
   {
@@ -110,6 +110,6 @@ const treeData = ref([
 ])
 
 const handleNodeClick = (data) => {
-  Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
+  TinyModal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/tree-menu/only-check-children.vue b/examples/sites/demos/pc/app/tree-menu/only-check-children.vue
index a42070cda..4a6704bfc 100644
--- a/examples/sites/demos/pc/app/tree-menu/only-check-children.vue
+++ b/examples/sites/demos/pc/app/tree-menu/only-check-children.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu, Modal } from '@opentiny/vue'
+import { TinyTreeMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
@@ -121,7 +121,7 @@ export default {
   },
   methods: {
     handleNodeClick(data) {
-      Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
+      TinyModal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/tree-menu/props-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/props-composition-api.vue
index 27e7c4981..766df8ff9 100644
--- a/examples/sites/demos/pc/app/tree-menu/props-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/props-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { reactive } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const mapField = reactive({
   label: 'name',
diff --git a/examples/sites/demos/pc/app/tree-menu/props.vue b/examples/sites/demos/pc/app/tree-menu/props.vue
index 32c5266cb..30e8223d6 100644
--- a/examples/sites/demos/pc/app/tree-menu/props.vue
+++ b/examples/sites/demos/pc/app/tree-menu/props.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeMenu, Modal } from '@opentiny/vue'
+import { TinyTreeMenu, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
index f9b936b97..92ce98eb1 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue
@@ -16,7 +16,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const expandeArr = reactive([100])
 const treeData = ref([
diff --git a/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue b/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
index deb99c552..ee901def0 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-checkbox.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
 
   data() {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-expand-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-expand-composition-api.vue
index 3f2aad8ff..4666492f8 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-expand-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-expand-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { reactive } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 import { iconApp, iconExpressSearch, iconTotal, iconUnfreeze, iconFile } from '@opentiny/vue-icon'
 
 const treeData = reactive([
diff --git a/examples/sites/demos/pc/app/tree-menu/show-expand.vue b/examples/sites/demos/pc/app/tree-menu/show-expand.vue
index e832ca71a..c67df7bb7 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-expand.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-expand.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 import { iconApp, iconExpressSearch, iconTotal, iconUnfreeze, iconFile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
index 2bbb25dbd..008b28d8c 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu, RadioGroup as TinyRadioGroup, Radio as TinyRadio } from '@opentiny/vue'
+import { TinyTreeMenu, TinyRadioGroup, TinyRadio } from '@opentiny/vue'
 
 const highlightQuery = ref('hide')
 
diff --git a/examples/sites/demos/pc/app/tree-menu/show-filter.vue b/examples/sites/demos/pc/app/tree-menu/show-filter.vue
index dad647ca3..5f0d123bf 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-filter.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-filter.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import { TreeMenu, RadioGroup, Radio } from '@opentiny/vue'
+import { TinyTreeMenu, TinyRadioGroup, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyTreeMenu,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue
index d62494dc0..346ab4865 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { reactive } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = reactive([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/show-number.vue b/examples/sites/demos/pc/app/tree-menu/show-number.vue
index 5a4f55326..323b77556 100644
--- a/examples/sites/demos/pc/app/tree-menu/show-number.vue
+++ b/examples/sites/demos/pc/app/tree-menu/show-number.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
index 698842b81..7b0f79f96 100644
--- a/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue b/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
index 9a2a1ac62..e5ab2c178 100644
--- a/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
+++ b/examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/tree-menu-slot-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/tree-menu-slot-composition-api.vue
index 251fb3f10..53c43a727 100644
--- a/examples/sites/demos/pc/app/tree-menu/tree-menu-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/tree-menu-slot-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 import { iconApp, iconCustom, iconText, iconTotal } from '@opentiny/vue-icon'
 
 const icons = ref({
diff --git a/examples/sites/demos/pc/app/tree-menu/tree-menu-slot.vue b/examples/sites/demos/pc/app/tree-menu/tree-menu-slot.vue
index 1dd4ed2c5..f386596b8 100644
--- a/examples/sites/demos/pc/app/tree-menu/tree-menu-slot.vue
+++ b/examples/sites/demos/pc/app/tree-menu/tree-menu-slot.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 import { iconApp, iconCustom, iconText, iconTotal } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-menu/width-adapt-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/width-adapt-composition-api.vue
index c00662f72..4ddcbee42 100644
--- a/examples/sites/demos/pc/app/tree-menu/width-adapt-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/width-adapt-composition-api.vue
@@ -171,22 +171,3 @@ const data = [
   }
 ]
 </script>
-
-<!-- <template>
-  <tiny-tree-menu ></tiny-tree-menu>
-</template>
-
-<script>
-
-
-export default {
-  components: {
-    TinyTreeMenu: TreeMenu
-  },
-  data() {
-    return {
-      treeData: 
-    }
-  }
-}
-</script> -->
diff --git a/examples/sites/demos/pc/app/tree-menu/with-icon-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/with-icon-composition-api.vue
index ed074f77d..ccd5a842e 100644
--- a/examples/sites/demos/pc/app/tree-menu/with-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/with-icon-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { reactive } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 import { IconPlusCircle, IconPlusSquare, IconPreChecked, IconNode, IconNew } from '@opentiny/vue-icon'
 
 const treeData = reactive([
diff --git a/examples/sites/demos/pc/app/tree-menu/with-icon.vue b/examples/sites/demos/pc/app/tree-menu/with-icon.vue
index 2509495fe..0b9bd21ed 100644
--- a/examples/sites/demos/pc/app/tree-menu/with-icon.vue
+++ b/examples/sites/demos/pc/app/tree-menu/with-icon.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import { TreeMenu } from '@opentiny/vue'
+import { TinyTreeMenu } from '@opentiny/vue'
 import { IconPlusCircle, IconPlusSquare, IconPreChecked, IconNode, IconNew } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue
index b76f14668..1ba650575 100644
--- a/examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 const value = ref('')
 
diff --git a/examples/sites/demos/pc/app/tree-select/basic-usage.vue b/examples/sites/demos/pc/app/tree-select/basic-usage.vue
index b6c874348..125c778ca 100644
--- a/examples/sites/demos/pc/app/tree-select/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tree-select/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/collapse-tags-composition-api.vue b/examples/sites/demos/pc/app/tree-select/collapse-tags-composition-api.vue
index 099396ac3..91675b37c 100644
--- a/examples/sites/demos/pc/app/tree-select/collapse-tags-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/collapse-tags-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 const value = ref([])
 
diff --git a/examples/sites/demos/pc/app/tree-select/collapse-tags.vue b/examples/sites/demos/pc/app/tree-select/collapse-tags.vue
index 926c8a8f7..ee2db32f9 100644
--- a/examples/sites/demos/pc/app/tree-select/collapse-tags.vue
+++ b/examples/sites/demos/pc/app/tree-select/collapse-tags.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/copy-composition-api.vue b/examples/sites/demos/pc/app/tree-select/copy-composition-api.vue
index 101da0ea4..c1a0c3260 100644
--- a/examples/sites/demos/pc/app/tree-select/copy-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/copy-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect, Input as TinyInput } from '@opentiny/vue'
+import { TinyTreeSelect, TinyInput } from '@opentiny/vue'
 
 const value = ref('')
 const value2 = ref([])
diff --git a/examples/sites/demos/pc/app/tree-select/copy.vue b/examples/sites/demos/pc/app/tree-select/copy.vue
index 86938c780..32ce3be3c 100644
--- a/examples/sites/demos/pc/app/tree-select/copy.vue
+++ b/examples/sites/demos/pc/app/tree-select/copy.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { TreeSelect, Input } from '@opentiny/vue'
+import { TinyTreeSelect, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect,
-    TinyInput: Input
+    TinyTreeSelect,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/disabled-composition-api.vue b/examples/sites/demos/pc/app/tree-select/disabled-composition-api.vue
index a4c739516..2553cb176 100644
--- a/examples/sites/demos/pc/app/tree-select/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/disabled-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 const value1 = ref('')
 const value2 = ref(1)
diff --git a/examples/sites/demos/pc/app/tree-select/disabled.vue b/examples/sites/demos/pc/app/tree-select/disabled.vue
index 99b5c3968..dd1b9d60d 100644
--- a/examples/sites/demos/pc/app/tree-select/disabled.vue
+++ b/examples/sites/demos/pc/app/tree-select/disabled.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/map-field-composition-api.vue b/examples/sites/demos/pc/app/tree-select/map-field-composition-api.vue
index 2f323ade3..254d17ff4 100644
--- a/examples/sites/demos/pc/app/tree-select/map-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/map-field-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 const value = ref('')
 
diff --git a/examples/sites/demos/pc/app/tree-select/map-field.vue b/examples/sites/demos/pc/app/tree-select/map-field.vue
index 90ac8fa26..c31a09b6f 100644
--- a/examples/sites/demos/pc/app/tree-select/map-field.vue
+++ b/examples/sites/demos/pc/app/tree-select/map-field.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/multiple-composition-api.vue b/examples/sites/demos/pc/app/tree-select/multiple-composition-api.vue
index a14520c8b..b79c6846d 100644
--- a/examples/sites/demos/pc/app/tree-select/multiple-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/multiple-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 const value = ref([])
 
diff --git a/examples/sites/demos/pc/app/tree-select/multiple.vue b/examples/sites/demos/pc/app/tree-select/multiple.vue
index 3ffd2e52f..cff5f57fe 100644
--- a/examples/sites/demos/pc/app/tree-select/multiple.vue
+++ b/examples/sites/demos/pc/app/tree-select/multiple.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/native-properties-composition-api.vue b/examples/sites/demos/pc/app/tree-select/native-properties-composition-api.vue
index ebe4b34ba..521c408f2 100644
--- a/examples/sites/demos/pc/app/tree-select/native-properties-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/native-properties-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 const value = ref('')
 
diff --git a/examples/sites/demos/pc/app/tree-select/native-properties.vue b/examples/sites/demos/pc/app/tree-select/native-properties.vue
index de7e9cad8..c4165aeeb 100644
--- a/examples/sites/demos/pc/app/tree-select/native-properties.vue
+++ b/examples/sites/demos/pc/app/tree-select/native-properties.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/panel-style-composition-api.vue b/examples/sites/demos/pc/app/tree-select/panel-style-composition-api.vue
index 8186532ef..2f20cf423 100644
--- a/examples/sites/demos/pc/app/tree-select/panel-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/panel-style-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 const value = ref('')
 
diff --git a/examples/sites/demos/pc/app/tree-select/panel-style.vue b/examples/sites/demos/pc/app/tree-select/panel-style.vue
index d01c3253a..c9cdb9361 100644
--- a/examples/sites/demos/pc/app/tree-select/panel-style.vue
+++ b/examples/sites/demos/pc/app/tree-select/panel-style.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/reference-style-composition-api.vue b/examples/sites/demos/pc/app/tree-select/reference-style-composition-api.vue
index 7ca9c6bb1..01239404e 100644
--- a/examples/sites/demos/pc/app/tree-select/reference-style-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/reference-style-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 const tinyIconPopup = iconPopup()
diff --git a/examples/sites/demos/pc/app/tree-select/reference-style.vue b/examples/sites/demos/pc/app/tree-select/reference-style.vue
index 686f81608..7bef02d4b 100644
--- a/examples/sites/demos/pc/app/tree-select/reference-style.vue
+++ b/examples/sites/demos/pc/app/tree-select/reference-style.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree-select/size-composition-api.vue b/examples/sites/demos/pc/app/tree-select/size-composition-api.vue
index 46552bca8..80f59daf1 100644
--- a/examples/sites/demos/pc/app/tree-select/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-select/size-composition-api.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeSelect as TinyTreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 const value = ref([])
 
diff --git a/examples/sites/demos/pc/app/tree-select/size.vue b/examples/sites/demos/pc/app/tree-select/size.vue
index e6c307126..a1749ec05 100644
--- a/examples/sites/demos/pc/app/tree-select/size.vue
+++ b/examples/sites/demos/pc/app/tree-select/size.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { TreeSelect } from '@opentiny/vue'
+import { TinyTreeSelect } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeSelect: TreeSelect
+    TinyTreeSelect
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
index 7a89eca0c..4818f75eb 100644
--- a/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
@@ -36,7 +36,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, RadioGroup as TinyRadioGroup, Radio as TinyRadio } from '@opentiny/vue'
+import { TinyTree, TinyRadioGroup, TinyRadio } from '@opentiny/vue'
 
 const showLine = ref('hide')
 const size = ref('medium')
diff --git a/examples/sites/demos/pc/app/tree/basic-usage.vue b/examples/sites/demos/pc/app/tree/basic-usage.vue
index 71f8c6b1b..48068f286 100644
--- a/examples/sites/demos/pc/app/tree/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tree/basic-usage.vue
@@ -35,13 +35,13 @@
 </template>
 
 <script lang="jsx">
-import { Tree, RadioGroup, Radio } from '@opentiny/vue'
+import { TinyTree, TinyRadioGroup, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyTree,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/check-op-composition-api.vue b/examples/sites/demos/pc/app/tree/check-op-composition-api.vue
index f42b57664..8f91f2252 100644
--- a/examples/sites/demos/pc/app/tree/check-op-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/check-op-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 const treeRef = ref()
 const data = ref([
diff --git a/examples/sites/demos/pc/app/tree/check-op.vue b/examples/sites/demos/pc/app/tree/check-op.vue
index e352f6b5d..d7f612922 100644
--- a/examples/sites/demos/pc/app/tree/check-op.vue
+++ b/examples/sites/demos/pc/app/tree/check-op.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="jsx">
-import { Tree, Button } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyButton: Button
+    TinyTree,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/checkbox-composition-api.vue b/examples/sites/demos/pc/app/tree/checkbox-composition-api.vue
index 0aa8f7e55..4e0347d8f 100644
--- a/examples/sites/demos/pc/app/tree/checkbox-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/checkbox-composition-api.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 const data = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree/checkbox.vue b/examples/sites/demos/pc/app/tree/checkbox.vue
index 7c1062dcd..f97f3e9ac 100644
--- a/examples/sites/demos/pc/app/tree/checkbox.vue
+++ b/examples/sites/demos/pc/app/tree/checkbox.vue
@@ -29,11 +29,11 @@
 </template>
 
 <script lang="jsx">
-import { Tree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree
+    TinyTree
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/contextmenu-composition-api.vue b/examples/sites/demos/pc/app/tree/contextmenu-composition-api.vue
index cc846c420..2a849f880 100644
--- a/examples/sites/demos/pc/app/tree/contextmenu-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/contextmenu-composition-api.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-template-shadow -->
 <template>
   <div>
     <tiny-tree
@@ -21,7 +20,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 const data = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree/contextmenu.vue b/examples/sites/demos/pc/app/tree/contextmenu.vue
index 29be64818..2ae80270b 100644
--- a/examples/sites/demos/pc/app/tree/contextmenu.vue
+++ b/examples/sites/demos/pc/app/tree/contextmenu.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-template-shadow -->
 <template>
   <div>
     <tiny-tree
@@ -20,11 +19,11 @@
 </template>
 
 <script lang="jsx">
-import { Tree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree
+    TinyTree
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/drag-composition-api.vue b/examples/sites/demos/pc/app/tree/drag-composition-api.vue
index 505787023..9b1a36439 100644
--- a/examples/sites/demos/pc/app/tree/drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/drag-composition-api.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, RadioGroup as TinyRadioGroup, Radio as TinyRadio } from '@opentiny/vue'
+import { TinyTree, TinyRadioGroup, TinyRadio } from '@opentiny/vue'
 
 const listenEvent = ref('node-drop')
 const data = ref([
diff --git a/examples/sites/demos/pc/app/tree/drag.vue b/examples/sites/demos/pc/app/tree/drag.vue
index 937bce19a..fa0f9dc8b 100644
--- a/examples/sites/demos/pc/app/tree/drag.vue
+++ b/examples/sites/demos/pc/app/tree/drag.vue
@@ -29,13 +29,13 @@
 </template>
 
 <script lang="jsx">
-import { Tree, RadioGroup, Radio } from '@opentiny/vue'
+import { TinyTree, TinyRadioGroup, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup
+    TinyTree,
+    TinyRadio,
+    TinyRadioGroup
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/edit-composition-api.vue b/examples/sites/demos/pc/app/tree/edit-composition-api.vue
index 4d9c19d39..9c23e17ee 100644
--- a/examples/sites/demos/pc/app/tree/edit-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/edit-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 const data = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree/edit-control-composition-api.vue b/examples/sites/demos/pc/app/tree/edit-control-composition-api.vue
index 8d7fc1109..b3c95248f 100644
--- a/examples/sites/demos/pc/app/tree/edit-control-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/edit-control-composition-api.vue
@@ -27,7 +27,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Tree as TinyTree, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyTree, TinyButton, TinyModal } from '@opentiny/vue'
 
 const data = ref([
   {
@@ -91,7 +91,7 @@ function deleteNodeMethod() {
 
   // 方式 2：返回 Promise 异步
   return new Promise((resolve) => {
-    Modal.confirm({
+    TinyModal.confirm({
       title: 'deleteNodeMethod 钩子函数',
       status: 'info',
       message: '您确定要删除数据吗？',
diff --git a/examples/sites/demos/pc/app/tree/edit-control.vue b/examples/sites/demos/pc/app/tree/edit-control.vue
index 58df1bccf..caf1ccbfe 100644
--- a/examples/sites/demos/pc/app/tree/edit-control.vue
+++ b/examples/sites/demos/pc/app/tree/edit-control.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { Tree, Button, Modal } from '@opentiny/vue'
+import { TinyTree, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyButton: Button
+    TinyTree,
+    TinyButton
   },
   data() {
     return {
@@ -97,7 +97,7 @@ export default {
 
       // 方式 2：返回 Promise 异步
       return new Promise((resolve) => {
-        Modal.confirm({
+        TinyModal.confirm({
           title: 'deleteNodeMethod 钩子函数',
           status: 'info',
           message: '您确定要删除数据吗？',
diff --git a/examples/sites/demos/pc/app/tree/edit.vue b/examples/sites/demos/pc/app/tree/edit.vue
index 837827098..769e9e96a 100644
--- a/examples/sites/demos/pc/app/tree/edit.vue
+++ b/examples/sites/demos/pc/app/tree/edit.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import { Tree, Button } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyButton: Button
+    TinyTree,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/expand-control-composition-api.vue b/examples/sites/demos/pc/app/tree/expand-control-composition-api.vue
index 0458fe6b2..d4c730bbe 100644
--- a/examples/sites/demos/pc/app/tree/expand-control-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/expand-control-composition-api.vue
@@ -33,7 +33,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 const data = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree/expand-control.vue b/examples/sites/demos/pc/app/tree/expand-control.vue
index 073ffd303..4d6e86392 100644
--- a/examples/sites/demos/pc/app/tree/expand-control.vue
+++ b/examples/sites/demos/pc/app/tree/expand-control.vue
@@ -32,12 +32,12 @@
 </template>
 
 <script lang="jsx">
-import { Tree, Button } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyButton: Button
+    TinyTree,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/filter-view-composition-api.vue b/examples/sites/demos/pc/app/tree/filter-view-composition-api.vue
index fe8cb9b38..4638a1467 100644
--- a/examples/sites/demos/pc/app/tree/filter-view-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/filter-view-composition-api.vue
@@ -45,7 +45,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, RadioGroup as TinyRadioGroup, Radio as TinyRadio, Input as TinyInput } from '@opentiny/vue'
+import { TinyTree, TinyRadioGroup, TinyRadio, TinyInput } from '@opentiny/vue'
 
 const treeRef = ref()
 const viewType = ref('tree')
diff --git a/examples/sites/demos/pc/app/tree/filter-view.vue b/examples/sites/demos/pc/app/tree/filter-view.vue
index 2bfc65185..64e0c1d98 100644
--- a/examples/sites/demos/pc/app/tree/filter-view.vue
+++ b/examples/sites/demos/pc/app/tree/filter-view.vue
@@ -44,14 +44,14 @@
 </template>
 
 <script lang="jsx">
-import { Tree, RadioGroup, Radio, Input } from '@opentiny/vue'
+import { TinyTree, TinyRadioGroup, TinyRadio, TinyInput } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyRadio: Radio,
-    TinyRadioGroup: RadioGroup,
-    TinyInput: Input
+    TinyTree,
+    TinyRadio,
+    TinyRadioGroup,
+    TinyInput
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/icons-composition-api.vue b/examples/sites/demos/pc/app/tree/icons-composition-api.vue
index b6ffcdbbb..1915ca621 100644
--- a/examples/sites/demos/pc/app/tree/icons-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/icons-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 import { iconPutAway, iconExpand, iconRightO, iconEditorTable, iconFile } from '@opentiny/vue-icon'
 
 const icon = iconRightO()
diff --git a/examples/sites/demos/pc/app/tree/icons.vue b/examples/sites/demos/pc/app/tree/icons.vue
index ac6e474eb..1af35bac6 100644
--- a/examples/sites/demos/pc/app/tree/icons.vue
+++ b/examples/sites/demos/pc/app/tree/icons.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Tree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 import { iconPutAway, iconExpand, iconRightO, iconEditorTable, iconFile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTree: Tree
+    TinyTree
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/lazy-composition-api.vue b/examples/sites/demos/pc/app/tree/lazy-composition-api.vue
index af728eb8f..60496e4a2 100644
--- a/examples/sites/demos/pc/app/tree/lazy-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/lazy-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="jsx">
-import { Tree as TinyTree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 // node为点击的节点， resolve为回调函数，用于异步返回下层节点的数据
 function load(node, resolve) {
diff --git a/examples/sites/demos/pc/app/tree/lazy.vue b/examples/sites/demos/pc/app/tree/lazy.vue
index 9ac06c546..b65a0f7c5 100644
--- a/examples/sites/demos/pc/app/tree/lazy.vue
+++ b/examples/sites/demos/pc/app/tree/lazy.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Tree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree
+    TinyTree
   },
   methods: {
     // node为点击的节点， resolve为回调函数，用于异步返回下层节点的数据
diff --git a/examples/sites/demos/pc/app/tree/node-hl-composition-api.vue b/examples/sites/demos/pc/app/tree/node-hl-composition-api.vue
index 8616dae08..8b2161af9 100644
--- a/examples/sites/demos/pc/app/tree/node-hl-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/node-hl-composition-api.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="jsx">
 import { onMounted, ref } from 'vue'
-import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 const treeRef = ref()
 const data = ref([
diff --git a/examples/sites/demos/pc/app/tree/node-hl.vue b/examples/sites/demos/pc/app/tree/node-hl.vue
index c381562c6..9b2e8184f 100644
--- a/examples/sites/demos/pc/app/tree/node-hl.vue
+++ b/examples/sites/demos/pc/app/tree/node-hl.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="jsx">
-import { Tree, Button } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyButton: Button
+    TinyTree,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/node-op-composition-api.vue b/examples/sites/demos/pc/app/tree/node-op-composition-api.vue
index 52fc4f89a..dcf03034d 100644
--- a/examples/sites/demos/pc/app/tree/node-op-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/node-op-composition-api.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 let id = 1000
 const treeRef = ref()
diff --git a/examples/sites/demos/pc/app/tree/node-op.vue b/examples/sites/demos/pc/app/tree/node-op.vue
index 9eb322563..4e8e98fbe 100644
--- a/examples/sites/demos/pc/app/tree/node-op.vue
+++ b/examples/sites/demos/pc/app/tree/node-op.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Tree, Button } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyButton: Button
+    TinyTree,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/other-composition-api.vue b/examples/sites/demos/pc/app/tree/other-composition-api.vue
index fb5fefaf6..d02af0cb0 100644
--- a/examples/sites/demos/pc/app/tree/other-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/other-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 const data = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree/other.vue b/examples/sites/demos/pc/app/tree/other.vue
index 4a9738880..43d305732 100644
--- a/examples/sites/demos/pc/app/tree/other.vue
+++ b/examples/sites/demos/pc/app/tree/other.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script lang="jsx">
-import { Tree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree
+    TinyTree
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/props-composition-api.vue b/examples/sites/demos/pc/app/tree/props-composition-api.vue
index b937a9c87..0f38b869f 100644
--- a/examples/sites/demos/pc/app/tree/props-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/props-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 const props = ref({
   children: 'children',
diff --git a/examples/sites/demos/pc/app/tree/props.vue b/examples/sites/demos/pc/app/tree/props.vue
index 5d2e47cdb..32a2f7792 100644
--- a/examples/sites/demos/pc/app/tree/props.vue
+++ b/examples/sites/demos/pc/app/tree/props.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { Tree } from '@opentiny/vue'
+import { TinyTree } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree
+    TinyTree
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/radio-composition-api.vue b/examples/sites/demos/pc/app/tree/radio-composition-api.vue
index c60ba97d3..117faea97 100644
--- a/examples/sites/demos/pc/app/tree/radio-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/radio-composition-api.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable unused-imports/no-unused-vars -->
 <template>
   <div>
     <div class="node-tip">在开发者控制台中查看它的打印信息：</div>
@@ -20,7 +19,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 const treeRef = ref()
 const defaultRadioKey = ref(['1-1'])
diff --git a/examples/sites/demos/pc/app/tree/radio.vue b/examples/sites/demos/pc/app/tree/radio.vue
index b99902d26..80d7f70e7 100644
--- a/examples/sites/demos/pc/app/tree/radio.vue
+++ b/examples/sites/demos/pc/app/tree/radio.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="jsx">
-import { Tree, Button } from '@opentiny/vue'
+import { TinyTree, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree,
-    TinyButton: Button
+    TinyTree,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/tree/slot-composition-api.vue b/examples/sites/demos/pc/app/tree/slot-composition-api.vue
index c4206f3f3..c9ed26647 100644
--- a/examples/sites/demos/pc/app/tree/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/slot-composition-api.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-unused-vars -->
 <template>
   <div class="slot-demo">
     <div>
@@ -42,7 +41,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, Button as TinyButton, Link as TinyLink } from '@opentiny/vue'
+import { TinyTree, TinyButton, TinyLink } from '@opentiny/vue'
 import { iconPlusSquare } from '@opentiny/vue-icon'
 
 const TinyIconPlusSquare = iconPlusSquare()
diff --git a/examples/sites/demos/pc/app/tree/slot.vue b/examples/sites/demos/pc/app/tree/slot.vue
index f73ad26ba..0faa8f1d5 100644
--- a/examples/sites/demos/pc/app/tree/slot.vue
+++ b/examples/sites/demos/pc/app/tree/slot.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-unused-vars -->
 <template>
   <div class="slot-demo">
     <div>
@@ -41,15 +40,15 @@
 </template>
 
 <script lang="jsx">
-import { Tree, Link, Button } from '@opentiny/vue'
+import { TinyTree, TinyLink, TinyButton } from '@opentiny/vue'
 import { iconPlusSquare } from '@opentiny/vue-icon'
 
 const TinyIconPlusSquare = iconPlusSquare()
 export default {
   components: {
-    TinyTree: Tree,
-    TinyLink: Link,
-    TinyButton: Button
+    TinyTree,
+    TinyLink,
+    TinyButton
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-account/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/user-account/basic-usage-composition-api.vue
index 688d26465..5bdabce7d 100644
--- a/examples/sites/demos/pc/app/user-account/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-account/basic-usage-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="jsx">
-import { UserAccount as TinyUserAccount } from '@opentiny/vue'
+import { TinyUserAccount } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/user-account/basic-usage.vue b/examples/sites/demos/pc/app/user-account/basic-usage.vue
index cfa98f029..b0efe89c2 100644
--- a/examples/sites/demos/pc/app/user-account/basic-usage.vue
+++ b/examples/sites/demos/pc/app/user-account/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserAccount } from '@opentiny/vue'
+import { TinyUserAccount } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserAccount: UserAccount
+    TinyUserAccount
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/user-account/custom-operation-composition-api.vue b/examples/sites/demos/pc/app/user-account/custom-operation-composition-api.vue
index c3f79fa1b..ea11a5b03 100644
--- a/examples/sites/demos/pc/app/user-account/custom-operation-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-account/custom-operation-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserAccount as TinyUserAccount, Radio as TinyRadio } from '@opentiny/vue'
+import { TinyUserAccount, TinyRadio } from '@opentiny/vue'
 
 const value = ref('1')
 </script>
diff --git a/examples/sites/demos/pc/app/user-account/custom-operation.vue b/examples/sites/demos/pc/app/user-account/custom-operation.vue
index 6b55342b8..ecb1b1a74 100644
--- a/examples/sites/demos/pc/app/user-account/custom-operation.vue
+++ b/examples/sites/demos/pc/app/user-account/custom-operation.vue
@@ -6,12 +6,12 @@
 </template>
 
 <script lang="jsx">
-import { UserAccount, Radio } from '@opentiny/vue'
+import { TinyUserAccount, TinyRadio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserAccount: UserAccount,
-    TinyRadio: Radio
+    TinyUserAccount,
+    TinyRadio
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-account/custom-service-composition-api.vue b/examples/sites/demos/pc/app/user-account/custom-service-composition-api.vue
index 0bae68f34..6c2f9b0d6 100644
--- a/examples/sites/demos/pc/app/user-account/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-account/custom-service-composition-api.vue
@@ -6,16 +6,16 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserAccount as TinyUserAccount, Modal } from '@opentiny/vue'
+import { TinyUserAccount, TinyModal } from '@opentiny/vue'
 
 const isLogin = ref(false)
 const service = ref({
-  getUserInfo: getUserInfo,
-  getUserImageUrl: getUserImageUrl,
-  getLangData: getLangData,
-  getLogoutUrl: getLogoutUrl,
-  isGuestUser: isGuestUser,
-  showLogin: showLogin
+  getUserInfo,
+  getUserImageUrl,
+  getLangData,
+  getLogoutUrl,
+  isGuestUser,
+  showLogin
 })
 
 function getUserInfo() {
@@ -59,7 +59,7 @@ function isGuestUser() {
 
 function showLogin() {
   /* 此处为用户的自定义登录逻辑 */
-  Modal.confirm('模拟登录且登录成功').then(() => {
+  TinyModal.confirm('模拟登录且登录成功').then(() => {
     window.localStorage.setItem('isLogin', true)
     window.location.reload()
   })
diff --git a/examples/sites/demos/pc/app/user-account/custom-service.vue b/examples/sites/demos/pc/app/user-account/custom-service.vue
index c6abb7604..76513ba66 100644
--- a/examples/sites/demos/pc/app/user-account/custom-service.vue
+++ b/examples/sites/demos/pc/app/user-account/custom-service.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { UserAccount, Modal } from '@opentiny/vue'
+import { TinyUserAccount, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserAccount: UserAccount
+    TinyUserAccount
   },
   data() {
     return {
@@ -61,7 +61,7 @@ export default {
     },
     showLogin() {
       /* 此处为用户的自定义登录逻辑 */
-      Modal.confirm('模拟登录且登录成功').then(() => {
+      TinyModal.confirm('模拟登录且登录成功').then(() => {
         window.localStorage.setItem('isLogin', true)
         window.location.reload()
       })
diff --git a/examples/sites/demos/pc/app/user-contact/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/user-contact/basic-usage-composition-api.vue
index 96e002300..d5ba755d8 100644
--- a/examples/sites/demos/pc/app/user-contact/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-contact/basic-usage-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="jsx">
-import { UserContact as TinyUserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 import { reactive } from 'vue'
 
 const data = reactive({
diff --git a/examples/sites/demos/pc/app/user-contact/basic-usage.vue b/examples/sites/demos/pc/app/user-contact/basic-usage.vue
index 2d9693c95..405ae0591 100644
--- a/examples/sites/demos/pc/app/user-contact/basic-usage.vue
+++ b/examples/sites/demos/pc/app/user-contact/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserContact: UserContact
+    TinyUserContact
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-contact/contact-espace-composition-api.vue b/examples/sites/demos/pc/app/user-contact/contact-espace-composition-api.vue
index 3c202c014..7bd926fee 100644
--- a/examples/sites/demos/pc/app/user-contact/contact-espace-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-contact/contact-espace-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { UserContact as TinyUserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 import { reactive } from 'vue'
 
 const data = reactive({
diff --git a/examples/sites/demos/pc/app/user-contact/contact-espace.vue b/examples/sites/demos/pc/app/user-contact/contact-espace.vue
index c36e9bcf6..5b8f6c419 100644
--- a/examples/sites/demos/pc/app/user-contact/contact-espace.vue
+++ b/examples/sites/demos/pc/app/user-contact/contact-espace.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserContact: UserContact
+    TinyUserContact
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-contact/data-source-composition-api.vue b/examples/sites/demos/pc/app/user-contact/data-source-composition-api.vue
index 96e002300..d5ba755d8 100644
--- a/examples/sites/demos/pc/app/user-contact/data-source-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-contact/data-source-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="jsx">
-import { UserContact as TinyUserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 import { reactive } from 'vue'
 
 const data = reactive({
diff --git a/examples/sites/demos/pc/app/user-contact/data-source.vue b/examples/sites/demos/pc/app/user-contact/data-source.vue
index 2d9693c95..405ae0591 100644
--- a/examples/sites/demos/pc/app/user-contact/data-source.vue
+++ b/examples/sites/demos/pc/app/user-contact/data-source.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserContact: UserContact
+    TinyUserContact
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-contact/not-displayed-content-composition-api.vue b/examples/sites/demos/pc/app/user-contact/not-displayed-content-composition-api.vue
index 9fab5c822..7cbc23f0c 100644
--- a/examples/sites/demos/pc/app/user-contact/not-displayed-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-contact/not-displayed-content-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="jsx">
-import { UserContact as TinyUserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 import { reactive } from 'vue'
 
 const data = reactive({
diff --git a/examples/sites/demos/pc/app/user-contact/not-displayed-content.vue b/examples/sites/demos/pc/app/user-contact/not-displayed-content.vue
index ef9252438..9987892f1 100644
--- a/examples/sites/demos/pc/app/user-contact/not-displayed-content.vue
+++ b/examples/sites/demos/pc/app/user-contact/not-displayed-content.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserContact: UserContact
+    TinyUserContact
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-contact/slots-usercontact-composition-api.vue b/examples/sites/demos/pc/app/user-contact/slots-usercontact-composition-api.vue
index b066da9a7..e0cb64e96 100644
--- a/examples/sites/demos/pc/app/user-contact/slots-usercontact-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-contact/slots-usercontact-composition-api.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="jsx">
-import { UserContact as TinyUserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 import { reactive } from 'vue'
 
 const data = reactive({
diff --git a/examples/sites/demos/pc/app/user-contact/slots-usercontact.vue b/examples/sites/demos/pc/app/user-contact/slots-usercontact.vue
index db1a0edfb..46f147702 100644
--- a/examples/sites/demos/pc/app/user-contact/slots-usercontact.vue
+++ b/examples/sites/demos/pc/app/user-contact/slots-usercontact.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { UserContact } from '@opentiny/vue'
+import { TinyUserContact } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserContact: UserContact
+    TinyUserContact
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-head/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/user-head/basic-usage-composition-api.vue
index d0c6eb32f..b241f746e 100644
--- a/examples/sites/demos/pc/app/user-head/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/basic-usage-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 import { iconSmile } from '@opentiny/vue-icon'
 
 const tinyIconSmile = iconSmile()
diff --git a/examples/sites/demos/pc/app/user-head/basic-usage.vue b/examples/sites/demos/pc/app/user-head/basic-usage.vue
index 4a100fa8e..854dbfb6a 100644
--- a/examples/sites/demos/pc/app/user-head/basic-usage.vue
+++ b/examples/sites/demos/pc/app/user-head/basic-usage.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 import { iconSmile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-head/color-composition-api.vue b/examples/sites/demos/pc/app/user-head/color-composition-api.vue
index 18422be29..ce5c891e3 100644
--- a/examples/sites/demos/pc/app/user-head/color-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/color-composition-api.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 const labelText = 'Ai'
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/color.vue b/examples/sites/demos/pc/app/user-head/color.vue
index 7c585da60..45a5fc952 100644
--- a/examples/sites/demos/pc/app/user-head/color.vue
+++ b/examples/sites/demos/pc/app/user-head/color.vue
@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-head/custom-background-color-composition-api.vue b/examples/sites/demos/pc/app/user-head/custom-background-color-composition-api.vue
index a90b9b4f1..d5174c05b 100644
--- a/examples/sites/demos/pc/app/user-head/custom-background-color-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/custom-background-color-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/custom-background-color.vue b/examples/sites/demos/pc/app/user-head/custom-background-color.vue
index a35dd0264..8dda795af 100644
--- a/examples/sites/demos/pc/app/user-head/custom-background-color.vue
+++ b/examples/sites/demos/pc/app/user-head/custom-background-color.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/custom-user-head-content-composition-api.vue b/examples/sites/demos/pc/app/user-head/custom-user-head-content-composition-api.vue
index 841ef457b..e49c8fe6f 100644
--- a/examples/sites/demos/pc/app/user-head/custom-user-head-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/custom-user-head-content-composition-api.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 const TinyIconMail = iconMail()
diff --git a/examples/sites/demos/pc/app/user-head/custom-user-head-content.vue b/examples/sites/demos/pc/app/user-head/custom-user-head-content.vue
index 663219565..6c49c5a0b 100644
--- a/examples/sites/demos/pc/app/user-head/custom-user-head-content.vue
+++ b/examples/sites/demos/pc/app/user-head/custom-user-head-content.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyUserHead: UserHead,
+    TinyUserHead,
     IconMail: iconMail()
   }
 }
diff --git a/examples/sites/demos/pc/app/user-head/icon-user-head-composition-api.vue b/examples/sites/demos/pc/app/user-head/icon-user-head-composition-api.vue
index e1510b2d5..58d9cafdd 100644
--- a/examples/sites/demos/pc/app/user-head/icon-user-head-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/icon-user-head-composition-api.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 import { iconSmile } from '@opentiny/vue-icon'
 
 const tinyIconSmile = iconSmile()
diff --git a/examples/sites/demos/pc/app/user-head/icon-user-head.vue b/examples/sites/demos/pc/app/user-head/icon-user-head.vue
index c65fb43d6..625d11a6b 100644
--- a/examples/sites/demos/pc/app/user-head/icon-user-head.vue
+++ b/examples/sites/demos/pc/app/user-head/icon-user-head.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 import { iconSmile } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-head/image-user-head-composition-api.vue b/examples/sites/demos/pc/app/user-head/image-user-head-composition-api.vue
index ea29f2af1..82aff220f 100644
--- a/examples/sites/demos/pc/app/user-head/image-user-head-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/image-user-head-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`)
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/image-user-head.vue b/examples/sites/demos/pc/app/user-head/image-user-head.vue
index 37af3999f..b5173a244 100644
--- a/examples/sites/demos/pc/app/user-head/image-user-head.vue
+++ b/examples/sites/demos/pc/app/user-head/image-user-head.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-head/label-user-head-composition-api.vue b/examples/sites/demos/pc/app/user-head/label-user-head-composition-api.vue
index c1482baac..3b8186dee 100644
--- a/examples/sites/demos/pc/app/user-head/label-user-head-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/label-user-head-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 const text = ref('文字')
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/label-user-head.vue b/examples/sites/demos/pc/app/user-head/label-user-head.vue
index f34e6dd7a..29016642d 100644
--- a/examples/sites/demos/pc/app/user-head/label-user-head.vue
+++ b/examples/sites/demos/pc/app/user-head/label-user-head.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-head/message-count-limit-composition-api.vue b/examples/sites/demos/pc/app/user-head/message-count-limit-composition-api.vue
index 51fdf6f6e..408658000 100644
--- a/examples/sites/demos/pc/app/user-head/message-count-limit-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/message-count-limit-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/message-count-limit.vue b/examples/sites/demos/pc/app/user-head/message-count-limit.vue
index 1d6ac7aac..1f75b057a 100644
--- a/examples/sites/demos/pc/app/user-head/message-count-limit.vue
+++ b/examples/sites/demos/pc/app/user-head/message-count-limit.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/message-count-total-composition-api.vue b/examples/sites/demos/pc/app/user-head/message-count-total-composition-api.vue
index 67c9ff2e1..f1d1b1394 100644
--- a/examples/sites/demos/pc/app/user-head/message-count-total-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/message-count-total-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/message-count-total.vue b/examples/sites/demos/pc/app/user-head/message-count-total.vue
index f149bff40..67454da25 100644
--- a/examples/sites/demos/pc/app/user-head/message-count-total.vue
+++ b/examples/sites/demos/pc/app/user-head/message-count-total.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/message-count-type-composition-api.vue b/examples/sites/demos/pc/app/user-head/message-count-type-composition-api.vue
index 7cc21bcaf..3d76dd766 100644
--- a/examples/sites/demos/pc/app/user-head/message-count-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/message-count-type-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/message-count-type.vue b/examples/sites/demos/pc/app/user-head/message-count-type.vue
index e63335dcf..a79609709 100644
--- a/examples/sites/demos/pc/app/user-head/message-count-type.vue
+++ b/examples/sites/demos/pc/app/user-head/message-count-type.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/min-user-head-composition-api.vue b/examples/sites/demos/pc/app/user-head/min-user-head-composition-api.vue
index ff9075210..7a0761ffe 100644
--- a/examples/sites/demos/pc/app/user-head/min-user-head-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/min-user-head-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/min-user-head.vue b/examples/sites/demos/pc/app/user-head/min-user-head.vue
index 4c71bf4e3..32bbaa8fa 100644
--- a/examples/sites/demos/pc/app/user-head/min-user-head.vue
+++ b/examples/sites/demos/pc/app/user-head/min-user-head.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue b/examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue
index 5b51f297b..42f283f85 100644
--- a/examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/render-user-head-in-grid-composition-api.vue
@@ -23,7 +23,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, UserHead } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyUserHead } from '@opentiny/vue'
 
 const mockData = [
   {
@@ -91,6 +91,7 @@ const mockData = [
     employees: 540
   }
 ]
+
 const tableData = ref(mockData)
 
 function checkboxEdit(h, { row, column }) {
@@ -106,7 +107,7 @@ function checkboxEdit(h, { row, column }) {
 }
 
 function renderUserHead(h, { row }) {
-  const UserHeadImg = UserHead
+  const UserHeadImg = TinyUserHead
 
   return (
     <span>
diff --git a/examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue b/examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue
index c24b09b88..e0907e673 100644
--- a/examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue
+++ b/examples/sites/demos/pc/app/user-head/render-user-head-in-grid.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, UserHead } from '@opentiny/vue'
+import { TinyGrid, TinyGridColumn, TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
+    TinyGrid,
+    TinyGridColumn
   },
   data() {
     const mockData = [
@@ -96,6 +96,7 @@ export default {
         employees: 540
       }
     ]
+
     return {
       tableData: mockData
     }
@@ -113,7 +114,7 @@ export default {
       )
     },
     renderUserHead(h, { row }) {
-      const UserHeadImg = UserHead
+      const UserHeadImg = TinyUserHead
 
       return (
         <span>
diff --git a/examples/sites/demos/pc/app/user-head/round-user-head-composition-api.vue b/examples/sites/demos/pc/app/user-head/round-user-head-composition-api.vue
index 7ad5b690a..5309d61e7 100644
--- a/examples/sites/demos/pc/app/user-head/round-user-head-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-head/round-user-head-composition-api.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-import { UserHead as TinyUserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/user-head/round-user-head.vue b/examples/sites/demos/pc/app/user-head/round-user-head.vue
index 44bb06c03..f16c510eb 100644
--- a/examples/sites/demos/pc/app/user-head/round-user-head.vue
+++ b/examples/sites/demos/pc/app/user-head/round-user-head.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { UserHead } from '@opentiny/vue'
+import { TinyUserHead } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserHead: UserHead
+    TinyUserHead
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/user-link/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/user-link/basic-usage-composition-api.vue
index 6c6be51bb..c909fbc60 100644
--- a/examples/sites/demos/pc/app/user-link/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-link/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserLink as TinyUserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 const user = ref('441047913162396')
 </script>
diff --git a/examples/sites/demos/pc/app/user-link/basic-usage.vue b/examples/sites/demos/pc/app/user-link/basic-usage.vue
index ef3786c1c..9ea178759 100644
--- a/examples/sites/demos/pc/app/user-link/basic-usage.vue
+++ b/examples/sites/demos/pc/app/user-link/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserLink: UserLink
+    TinyUserLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-link/cache-users-composition-api.vue b/examples/sites/demos/pc/app/user-link/cache-users-composition-api.vue
index 3a4cb2ccc..3a29743c2 100644
--- a/examples/sites/demos/pc/app/user-link/cache-users-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-link/cache-users-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserLink as TinyUserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 const user = ref('441047913162396')
 </script>
diff --git a/examples/sites/demos/pc/app/user-link/cache-users.vue b/examples/sites/demos/pc/app/user-link/cache-users.vue
index 7ee6ca04c..a254debbd 100644
--- a/examples/sites/demos/pc/app/user-link/cache-users.vue
+++ b/examples/sites/demos/pc/app/user-link/cache-users.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserLink: UserLink
+    TinyUserLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-link/custom-service-composition-api.vue b/examples/sites/demos/pc/app/user-link/custom-service-composition-api.vue
index 56f811039..b13b93af9 100644
--- a/examples/sites/demos/pc/app/user-link/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-link/custom-service-composition-api.vue
@@ -4,13 +4,13 @@
 
 <script setup lang="jsx">
 import { reactive, ref } from 'vue'
-import { UserLink as TinyUserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 const user = ref('441047913162396')
 const employeeNumber = ref('')
 const service = reactive({
-  fetchW3Accounts: fetchW3Accounts,
-  fetchUser: fetchUser,
+  fetchW3Accounts,
+  fetchUser,
   getUserImageUrl() {
     return Promise.resolve(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`)
   }
@@ -20,25 +20,25 @@ function fetchW3Accounts(args) {
   return new Promise((resolve, reject) => {
     const result = [
       {
-        'programValidity': null,
-        'employeeNumber': '12345678',
-        'userType': 'HWE',
-        'currentRole': null,
-        'currentProgramIds': null,
-        'validRoles': null,
-        'defaultRole': null,
-        'coalitionPermission': false,
-        'endDate': '2017-10-26T11:48:56.000+0800',
-        'dept': null,
-        'userId': 441047913162396,
-        'userAccount': 'test3',
-        'userCN': 'test3',
-        'email': 'test3@test3.com',
-        'creationDate': '2015-01-06T09:38:41.000+0800',
-        'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
-        'rowIdx': -1,
-        'creationUserCN': null,
-        'lastUpdateUserCN': null
+        programValidity: null,
+        employeeNumber: '12345678',
+        userType: 'HWE',
+        currentRole: null,
+        currentProgramIds: null,
+        validRoles: null,
+        defaultRole: null,
+        coalitionPermission: false,
+        endDate: '2017-10-26T11:48:56.000+0800',
+        dept: null,
+        userId: 441047913162396,
+        userAccount: 'test3',
+        userCN: 'test3',
+        email: 'test3@test3.com',
+        creationDate: '2015-01-06T09:38:41.000+0800',
+        lastUpdateDate: '2017-10-10T15:13:28.000+0800',
+        rowIdx: -1,
+        creationUserCN: null,
+        lastUpdateUserCN: null
       }
     ]
 
@@ -50,37 +50,37 @@ function fetchW3Accounts(args) {
 function fetchUser() {
   return new Promise((resolve, reject) => {
     const result = {
-      'sex': 'M',
-      'l0_Name': 'SZ技术',
-      'effective_Start_Date': '2011/10/14 00:00:00',
-      'l3_Dept_Code': '038384',
-      'person_Notes_Cn': 'test1 12345678',
-      'l2_Name': '信息技术工程部',
-      'short_Name': 'l12345678',
-      'effective_End_Date': '4712/12/31 00:00:00',
-      'person_Mail': '',
-      'name': '公共技术测试数据部门',
-      'location_second_area': 'Shenzhen',
-      'upper_Name': 'IT技术架构与测试数据部',
-      'coa_Combination': '0021.000.0001.038759',
-      'l4_Name': '公共技术测试数据部门',
-      'english_Name': 'zhang san',
-      'dept_Code': '038759',
-      'employee_Number': '12345678',
-      'l0_Dept_Code': '022471',
-      'l2_Dept_Code': '023268',
-      'upper_Dept_Code': '038384',
-      'l1_Name': '测试数据部',
-      'location_country': 'China',
-      'l4_Dept_Code': '038759',
-      'start_Date': '2011/08/01 00:00:00',
-      'contract_Location_Code': '010400',
-      'l1_Dept_Code': '023093',
-      'contract_Location_Name': 'China\\Guangdong-Shenzhen',
-      'location_first_area': 'Guangdong',
-      'last_Name': '张三',
-      'language': 'CHN',
-      'l3_Name': '测试与测试数据部'
+      sex: 'M',
+      l0_Name: 'SZ技术',
+      effective_Start_Date: '2011/10/14 00:00:00',
+      l3_Dept_Code: '038384',
+      person_Notes_Cn: 'test1 12345678',
+      l2_Name: '信息技术工程部',
+      short_Name: 'l12345678',
+      effective_End_Date: '4712/12/31 00:00:00',
+      person_Mail: '',
+      name: '公共技术测试数据部门',
+      location_second_area: 'Shenzhen',
+      upper_Name: 'IT技术架构与测试数据部',
+      coa_Combination: '0021.000.0001.038759',
+      l4_Name: '公共技术测试数据部门',
+      english_Name: 'zhang san',
+      dept_Code: '038759',
+      employee_Number: '12345678',
+      l0_Dept_Code: '022471',
+      l2_Dept_Code: '023268',
+      upper_Dept_Code: '038384',
+      l1_Name: '测试数据部',
+      location_country: 'China',
+      l4_Dept_Code: '038759',
+      start_Date: '2011/08/01 00:00:00',
+      contract_Location_Code: '010400',
+      l1_Dept_Code: '023093',
+      contract_Location_Name: 'China\\Guangdong-Shenzhen',
+      location_first_area: 'Guangdong',
+      last_Name: '张三',
+      language: 'CHN',
+      l3_Name: '测试与测试数据部'
     }
 
     resolve(result)
diff --git a/examples/sites/demos/pc/app/user-link/custom-service.vue b/examples/sites/demos/pc/app/user-link/custom-service.vue
index 3de34b0c8..e49e370de 100644
--- a/examples/sites/demos/pc/app/user-link/custom-service.vue
+++ b/examples/sites/demos/pc/app/user-link/custom-service.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="jsx">
-import { UserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserLink: UserLink
+    TinyUserLink
   },
   data() {
     return {
@@ -33,25 +33,25 @@ export default {
       return new Promise((resolve, reject) => {
         const result = [
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'HWE',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': '2017-10-26T11:48:56.000+0800',
-            'dept': null,
-            'userId': 441047913162396,
-            'userAccount': 'test3',
-            'userCN': 'test3',
-            'email': 'test3@test3.com',
-            'creationDate': '2015-01-06T09:38:41.000+0800',
-            'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'HWE',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: '2017-10-26T11:48:56.000+0800',
+            dept: null,
+            userId: 441047913162396,
+            userAccount: 'test3',
+            userCN: 'test3',
+            email: 'test3@test3.com',
+            creationDate: '2015-01-06T09:38:41.000+0800',
+            lastUpdateDate: '2017-10-10T15:13:28.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           }
         ]
 
@@ -62,37 +62,37 @@ export default {
     fetchUser() {
       return new Promise((resolve, reject) => {
         const result = {
-          'sex': 'M',
-          'l0_Name': 'SZ技术',
-          'effective_Start_Date': '2011/10/14 00:00:00',
-          'l3_Dept_Code': '038384',
-          'person_Notes_Cn': 'test1 12345678',
-          'l2_Name': '信息技术工程部',
-          'short_Name': 'l12345678',
-          'effective_End_Date': '4712/12/31 00:00:00',
-          'person_Mail': '',
-          'name': '公共技术测试数据部门',
-          'location_second_area': 'Shenzhen',
-          'upper_Name': 'IT技术架构与测试数据部',
-          'coa_Combination': '0021.000.0001.038759',
-          'l4_Name': '公共技术测试数据部门',
-          'english_Name': 'zhang san',
-          'dept_Code': '038759',
-          'employee_Number': '12345678',
-          'l0_Dept_Code': '022471',
-          'l2_Dept_Code': '023268',
-          'upper_Dept_Code': '038384',
-          'l1_Name': '测试数据部',
-          'location_country': 'China',
-          'l4_Dept_Code': '038759',
-          'start_Date': '2011/08/01 00:00:00',
-          'contract_Location_Code': '010400',
-          'l1_Dept_Code': '023093',
-          'contract_Location_Name': 'China\\Guangdong-Shenzhen',
-          'location_first_area': 'Guangdong',
-          'last_Name': '张三',
-          'language': 'CHN',
-          'l3_Name': '测试与测试数据部'
+          sex: 'M',
+          l0_Name: 'SZ技术',
+          effective_Start_Date: '2011/10/14 00:00:00',
+          l3_Dept_Code: '038384',
+          person_Notes_Cn: 'test1 12345678',
+          l2_Name: '信息技术工程部',
+          short_Name: 'l12345678',
+          effective_End_Date: '4712/12/31 00:00:00',
+          person_Mail: '',
+          name: '公共技术测试数据部门',
+          location_second_area: 'Shenzhen',
+          upper_Name: 'IT技术架构与测试数据部',
+          coa_Combination: '0021.000.0001.038759',
+          l4_Name: '公共技术测试数据部门',
+          english_Name: 'zhang san',
+          dept_Code: '038759',
+          employee_Number: '12345678',
+          l0_Dept_Code: '022471',
+          l2_Dept_Code: '023268',
+          upper_Dept_Code: '038384',
+          l1_Name: '测试数据部',
+          location_country: 'China',
+          l4_Dept_Code: '038759',
+          start_Date: '2011/08/01 00:00:00',
+          contract_Location_Code: '010400',
+          l1_Dept_Code: '023093',
+          contract_Location_Name: 'China\\Guangdong-Shenzhen',
+          location_first_area: 'Guangdong',
+          last_Name: '张三',
+          language: 'CHN',
+          l3_Name: '测试与测试数据部'
         }
 
         resolve(result)
diff --git a/examples/sites/demos/pc/app/user-link/text-field-composition-api.vue b/examples/sites/demos/pc/app/user-link/text-field-composition-api.vue
index 69d82b1f5..aefca028b 100644
--- a/examples/sites/demos/pc/app/user-link/text-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-link/text-field-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserLink as TinyUserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 const user = ref('441047913162396,421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user-link/text-field.vue b/examples/sites/demos/pc/app/user-link/text-field.vue
index ef6d7670a..24b969434 100644
--- a/examples/sites/demos/pc/app/user-link/text-field.vue
+++ b/examples/sites/demos/pc/app/user-link/text-field.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserLink: UserLink
+    TinyUserLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-link/text-split-composition-api.vue b/examples/sites/demos/pc/app/user-link/text-split-composition-api.vue
index 4edd4dc1c..c3466cffc 100644
--- a/examples/sites/demos/pc/app/user-link/text-split-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-link/text-split-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserLink as TinyUserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 const user = ref('441047913162396,421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user-link/text-split.vue b/examples/sites/demos/pc/app/user-link/text-split.vue
index cadf43833..d765d842d 100644
--- a/examples/sites/demos/pc/app/user-link/text-split.vue
+++ b/examples/sites/demos/pc/app/user-link/text-split.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserLink: UserLink
+    TinyUserLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-link/value-composition-api.vue b/examples/sites/demos/pc/app/user-link/value-composition-api.vue
index 9bd6e65d5..47c4bba23 100644
--- a/examples/sites/demos/pc/app/user-link/value-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-link/value-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserLink as TinyUserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 const user = ref('441047913162396,421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user-link/value-field-composition-api.vue b/examples/sites/demos/pc/app/user-link/value-field-composition-api.vue
index 5a541f489..36501b721 100644
--- a/examples/sites/demos/pc/app/user-link/value-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-link/value-field-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserLink as TinyUserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 const user = ref('441047913162396,421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user-link/value-field.vue b/examples/sites/demos/pc/app/user-link/value-field.vue
index ab26107cf..219fed8d7 100644
--- a/examples/sites/demos/pc/app/user-link/value-field.vue
+++ b/examples/sites/demos/pc/app/user-link/value-field.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserLink: UserLink
+    TinyUserLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-link/value-split-composition-api.vue b/examples/sites/demos/pc/app/user-link/value-split-composition-api.vue
index d5373822e..612661a38 100644
--- a/examples/sites/demos/pc/app/user-link/value-split-composition-api.vue
+++ b/examples/sites/demos/pc/app/user-link/value-split-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { UserLink as TinyUserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 const user = ref('441047913162396,421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user-link/value-split.vue b/examples/sites/demos/pc/app/user-link/value-split.vue
index 9e9bc3cd5..29db21268 100644
--- a/examples/sites/demos/pc/app/user-link/value-split.vue
+++ b/examples/sites/demos/pc/app/user-link/value-split.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserLink: UserLink
+    TinyUserLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user-link/value.vue b/examples/sites/demos/pc/app/user-link/value.vue
index ef3786c1c..9ea178759 100644
--- a/examples/sites/demos/pc/app/user-link/value.vue
+++ b/examples/sites/demos/pc/app/user-link/value.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { UserLink } from '@opentiny/vue'
+import { TinyUserLink } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUserLink: UserLink
+    TinyUserLink
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue b/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
index 174f2ec89..0fb43a9ad 100644
--- a/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
diff --git a/examples/sites/demos/pc/app/user/allow-copy.vue b/examples/sites/demos/pc/app/user/allow-copy.vue
index 026059672..d98e6fdb6 100644
--- a/examples/sites/demos/pc/app/user/allow-copy.vue
+++ b/examples/sites/demos/pc/app/user/allow-copy.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
index fd2acc1a9..5f0daa308 100644
--- a/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
diff --git a/examples/sites/demos/pc/app/user/basic-usage.vue b/examples/sites/demos/pc/app/user/basic-usage.vue
index 0960689c1..336a058a5 100644
--- a/examples/sites/demos/pc/app/user/basic-usage.vue
+++ b/examples/sites/demos/pc/app/user/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/batch-composition-api.vue b/examples/sites/demos/pc/app/user/batch-composition-api.vue
index 87dd67120..d5bf50ef2 100644
--- a/examples/sites/demos/pc/app/user/batch-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/batch-composition-api.vue
@@ -21,7 +21,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user1 = ref('702973890055088')
 const user2 = ref('421000103624002')
diff --git a/examples/sites/demos/pc/app/user/batch.vue b/examples/sites/demos/pc/app/user/batch.vue
index 138c7a447..fb5571c07 100644
--- a/examples/sites/demos/pc/app/user/batch.vue
+++ b/examples/sites/demos/pc/app/user/batch.vue
@@ -21,11 +21,11 @@
 </template>
 
 <script>
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/cache-users-composition-api.vue b/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
index 19d828716..58914a6bf 100644
--- a/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
@@ -15,7 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user1 = ref('test1,test2,test3')
 const user2 = ref('test1,test10')
diff --git a/examples/sites/demos/pc/app/user/cache-users.vue b/examples/sites/demos/pc/app/user/cache-users.vue
index 8f6eae4fa..f43f1dee7 100644
--- a/examples/sites/demos/pc/app/user/cache-users.vue
+++ b/examples/sites/demos/pc/app/user/cache-users.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
index 988e17ead..82c88fd42 100644
--- a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
diff --git a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
index a90be1b51..b26189c8d 100644
--- a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
+++ b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue b/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue
index be8ff3a3b..2e4e7b99d 100644
--- a/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue	
+++ b/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue	
@@ -12,7 +12,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
diff --git a/examples/sites/demos/pc/app/user/collapse-tags .vue b/examples/sites/demos/pc/app/user/collapse-tags .vue
index 0ff7fce55..cc0229adb 100644
--- a/examples/sites/demos/pc/app/user/collapse-tags .vue	
+++ b/examples/sites/demos/pc/app/user/collapse-tags .vue	
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue b/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
index 0e0c62413..15d265f6f 100644
--- a/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396')
 </script>
diff --git a/examples/sites/demos/pc/app/user/custom-placeholder.vue b/examples/sites/demos/pc/app/user/custom-placeholder.vue
index b1e131683..f4d486816 100644
--- a/examples/sites/demos/pc/app/user/custom-placeholder.vue
+++ b/examples/sites/demos/pc/app/user/custom-placeholder.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/custom-service-composition-api.vue b/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
index 416d4f21e..e9ace8d12 100644
--- a/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser, Modal } from '@opentiny/vue'
+import { TinyUser, TinyModal } from '@opentiny/vue'
 
 const user = ref('441047913162396')
 const service = ref({
@@ -20,92 +20,92 @@ const service = ref({
 function getSuggestUser(userCN) {
   return new Promise((resolve) => {
     /* 此处为输入联想搜索逻辑，，数据返回格式如下 */
-    Modal.message(`用户输入的值为：${userCN}`)
+    TinyModal.message(`用户输入的值为：${userCN}`)
 
     const result = [
       {
-        'programValidity': null,
-        'employeeNumber': '12345678',
-        'userType': 'HWE',
-        'currentRole': null,
-        'currentProgramIds': null,
-        'validRoles': null,
-        'defaultRole': 'otc:2749;',
-        'coalitionPermission': false,
-        'endDate': '2017-11-13T14:26:06.000+0800',
-        'dept': null,
-        'userId': 421000103624183, // value-field
-        'userAccount': 'test1',
-        'userCN': 'test1', // text-field
-        'email': 'test1@test1.com',
-        'creationDate': '2012-08-17T11:26:18.000+0800',
-        'lastUpdateDate': '2015-03-30T14:27:34.000+0800',
-        'rowIdx': -1,
-        'creationUserCN': null,
-        'lastUpdateUserCN': null
+        programValidity: null,
+        employeeNumber: '12345678',
+        userType: 'HWE',
+        currentRole: null,
+        currentProgramIds: null,
+        validRoles: null,
+        defaultRole: 'otc:2749;',
+        coalitionPermission: false,
+        endDate: '2017-11-13T14:26:06.000+0800',
+        dept: null,
+        userId: 421000103624183, // value-field
+        userAccount: 'test1',
+        userCN: 'test1', // text-field
+        email: 'test1@test1.com',
+        creationDate: '2012-08-17T11:26:18.000+0800',
+        lastUpdateDate: '2015-03-30T14:27:34.000+0800',
+        rowIdx: -1,
+        creationUserCN: null,
+        lastUpdateUserCN: null
       },
       {
-        'programValidity': null,
-        'employeeNumber': '12345678',
-        'userType': 'WX',
-        'currentRole': null,
-        'currentProgramIds': null,
-        'validRoles': null,
-        'defaultRole': null,
-        'coalitionPermission': false,
-        'endDate': null,
-        'dept': null,
-        'userId': 435259704104388,
-        'userAccount': 'test2',
-        'userCN': 'test2',
-        'email': 'test2@test2.com',
-        'creationDate': '2017-10-23T11:16:59.000+0800',
-        'lastUpdateDate': '2017-10-23T11:16:59.000+0800',
-        'rowIdx': -1,
-        'creationUserCN': null,
-        'lastUpdateUserCN': null
+        programValidity: null,
+        employeeNumber: '12345678',
+        userType: 'WX',
+        currentRole: null,
+        currentProgramIds: null,
+        validRoles: null,
+        defaultRole: null,
+        coalitionPermission: false,
+        endDate: null,
+        dept: null,
+        userId: 435259704104388,
+        userAccount: 'test2',
+        userCN: 'test2',
+        email: 'test2@test2.com',
+        creationDate: '2017-10-23T11:16:59.000+0800',
+        lastUpdateDate: '2017-10-23T11:16:59.000+0800',
+        rowIdx: -1,
+        creationUserCN: null,
+        lastUpdateUserCN: null
       },
       {
-        'programValidity': null,
-        'employeeNumber': '12345678',
-        'userType': 'HWE',
-        'currentRole': null,
-        'currentProgramIds': null,
-        'validRoles': null,
-        'defaultRole': null,
-        'coalitionPermission': false,
-        'endDate': '2017-10-26T11:48:56.000+0800',
-        'dept': null,
-        'userId': 441047913162396,
-        'userAccount': 'test3',
-        'userCN': 'test3',
-        'email': 'test3@test3.com',
-        'creationDate': '2015-01-06T09:38:41.000+0800',
-        'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
-        'rowIdx': -1,
-        'creationUserCN': null,
-        'lastUpdateUserCN': null
+        programValidity: null,
+        employeeNumber: '12345678',
+        userType: 'HWE',
+        currentRole: null,
+        currentProgramIds: null,
+        validRoles: null,
+        defaultRole: null,
+        coalitionPermission: false,
+        endDate: '2017-10-26T11:48:56.000+0800',
+        dept: null,
+        userId: 441047913162396,
+        userAccount: 'test3',
+        userCN: 'test3',
+        email: 'test3@test3.com',
+        creationDate: '2015-01-06T09:38:41.000+0800',
+        lastUpdateDate: '2017-10-10T15:13:28.000+0800',
+        rowIdx: -1,
+        creationUserCN: null,
+        lastUpdateUserCN: null
       },
       {
-        'programValidity': null,
-        'employeeNumber': '12345678',
-        'userType': 'WX',
-        'currentRole': null,
-        'currentProgramIds': null,
-        'validRoles': null,
-        'defaultRole': null,
-        'coalitionPermission': false,
-        'endDate': '2017-11-10T08:50:56.000+0800',
-        'dept': null,
-        'userId': 702973890055088,
-        'userAccount': 'test4',
-        'userCN': 'test4',
-        'email': 'test4@test4.com',
-        'creationDate': '2017-10-10T18:22:33.000+0800',
-        'lastUpdateDate': '2017-10-10T18:22:33.000+0800',
-        'rowIdx': -1,
-        'creationUserCN': null,
-        'lastUpdateUserCN': null
+        programValidity: null,
+        employeeNumber: '12345678',
+        userType: 'WX',
+        currentRole: null,
+        currentProgramIds: null,
+        validRoles: null,
+        defaultRole: null,
+        coalitionPermission: false,
+        endDate: '2017-11-10T08:50:56.000+0800',
+        dept: null,
+        userId: 702973890055088,
+        userAccount: 'test4',
+        userCN: 'test4',
+        email: 'test4@test4.com',
+        creationDate: '2017-10-10T18:22:33.000+0800',
+        lastUpdateDate: '2017-10-10T18:22:33.000+0800',
+        rowIdx: -1,
+        creationUserCN: null,
+        lastUpdateUserCN: null
       }
     ]
 
@@ -117,30 +117,30 @@ function getSuggestUser(userCN) {
 
 function fetchW3Accounts(userId) {
   /* 此为初始化时，v-model值不为空时，根据默认值查询用户数据，数据返回格式如下 */
-  Modal.message(`v-model默认值为：${userId}`)
+  TinyModal.message(`v-model默认值为：${userId}`)
 
   return new Promise((resolve) => {
     const result = [
       {
-        'programValidity': null,
-        'employeeNumber': '12345678',
-        'userType': 'HWE',
-        'currentRole': null,
-        'currentProgramIds': null,
-        'validRoles': null,
-        'defaultRole': null,
-        'coalitionPermission': false,
-        'endDate': '2017-10-26T11:48:56.000+0800',
-        'dept': null,
-        'userId': 441047913162396,
-        'userAccount': 'test3',
-        'userCN': 'test3',
-        'email': 'test3@test3.com',
-        'creationDate': '2015-01-06T09:38:41.000+0800',
-        'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
-        'rowIdx': -1,
-        'creationUserCN': null,
-        'lastUpdateUserCN': null
+        programValidity: null,
+        employeeNumber: '12345678',
+        userType: 'HWE',
+        currentRole: null,
+        currentProgramIds: null,
+        validRoles: null,
+        defaultRole: null,
+        coalitionPermission: false,
+        endDate: '2017-10-26T11:48:56.000+0800',
+        dept: null,
+        userId: 441047913162396,
+        userAccount: 'test3',
+        userCN: 'test3',
+        email: 'test3@test3.com',
+        creationDate: '2015-01-06T09:38:41.000+0800',
+        lastUpdateDate: '2017-10-10T15:13:28.000+0800',
+        rowIdx: -1,
+        creationUserCN: null,
+        lastUpdateUserCN: null
       }
     ]
 
diff --git a/examples/sites/demos/pc/app/user/custom-service.vue b/examples/sites/demos/pc/app/user/custom-service.vue
index 323403295..d17cd1557 100644
--- a/examples/sites/demos/pc/app/user/custom-service.vue
+++ b/examples/sites/demos/pc/app/user/custom-service.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="jsx">
-import { User, Modal } from '@opentiny/vue'
+import { TinyUser, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
@@ -27,92 +27,92 @@ export default {
     getSuggestUser(userCN) {
       return new Promise((resolve) => {
         /* 此处为输入联想搜索逻辑，，数据返回格式如下 */
-        Modal.message(`用户输入的值为：${userCN}`)
+        TinyModal.message(`用户输入的值为：${userCN}`)
 
         const result = [
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'HWE',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': 'otc:2749;',
-            'coalitionPermission': false,
-            'endDate': '2017-11-13T14:26:06.000+0800',
-            'dept': null,
-            'userId': 421000103624183, // value-field
-            'userAccount': 'test1',
-            'userCN': 'test1', // text-field
-            'email': 'test1@test1.com',
-            'creationDate': '2012-08-17T11:26:18.000+0800',
-            'lastUpdateDate': '2015-03-30T14:27:34.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'HWE',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: 'otc:2749;',
+            coalitionPermission: false,
+            endDate: '2017-11-13T14:26:06.000+0800',
+            dept: null,
+            userId: 421000103624183, // value-field
+            userAccount: 'test1',
+            userCN: 'test1', // text-field
+            email: 'test1@test1.com',
+            creationDate: '2012-08-17T11:26:18.000+0800',
+            lastUpdateDate: '2015-03-30T14:27:34.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           },
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'WX',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': null,
-            'dept': null,
-            'userId': 435259704104388,
-            'userAccount': 'test2',
-            'userCN': 'test2',
-            'email': 'test2@test2.com',
-            'creationDate': '2017-10-23T11:16:59.000+0800',
-            'lastUpdateDate': '2017-10-23T11:16:59.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'WX',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: null,
+            dept: null,
+            userId: 435259704104388,
+            userAccount: 'test2',
+            userCN: 'test2',
+            email: 'test2@test2.com',
+            creationDate: '2017-10-23T11:16:59.000+0800',
+            lastUpdateDate: '2017-10-23T11:16:59.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           },
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'HWE',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': '2017-10-26T11:48:56.000+0800',
-            'dept': null,
-            'userId': 441047913162396,
-            'userAccount': 'test3',
-            'userCN': 'test3',
-            'email': 'test3@test3.com',
-            'creationDate': '2015-01-06T09:38:41.000+0800',
-            'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'HWE',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: '2017-10-26T11:48:56.000+0800',
+            dept: null,
+            userId: 441047913162396,
+            userAccount: 'test3',
+            userCN: 'test3',
+            email: 'test3@test3.com',
+            creationDate: '2015-01-06T09:38:41.000+0800',
+            lastUpdateDate: '2017-10-10T15:13:28.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           },
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'WX',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': '2017-11-10T08:50:56.000+0800',
-            'dept': null,
-            'userId': 702973890055088,
-            'userAccount': 'test4',
-            'userCN': 'test4',
-            'email': 'test4@test4.com',
-            'creationDate': '2017-10-10T18:22:33.000+0800',
-            'lastUpdateDate': '2017-10-10T18:22:33.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'WX',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: '2017-11-10T08:50:56.000+0800',
+            dept: null,
+            userId: 702973890055088,
+            userAccount: 'test4',
+            userCN: 'test4',
+            email: 'test4@test4.com',
+            creationDate: '2017-10-10T18:22:33.000+0800',
+            lastUpdateDate: '2017-10-10T18:22:33.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           }
         ]
 
@@ -123,30 +123,30 @@ export default {
     },
     fetchW3Accounts(userId) {
       /* 此为初始化时，v-model值不为空时，根据默认值查询用户数据，数据返回格式如下 */
-      Modal.message(`v-model默认值为：${userId}`)
+      TinyModal.message(`v-model默认值为：${userId}`)
 
       return new Promise((resolve) => {
         const result = [
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'HWE',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': '2017-10-26T11:48:56.000+0800',
-            'dept': null,
-            'userId': 441047913162396,
-            'userAccount': 'test3',
-            'userCN': 'test3',
-            'email': 'test3@test3.com',
-            'creationDate': '2015-01-06T09:38:41.000+0800',
-            'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'HWE',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: '2017-10-26T11:48:56.000+0800',
+            dept: null,
+            userId: 441047913162396,
+            userAccount: 'test3',
+            userCN: 'test3',
+            email: 'test3@test3.com',
+            creationDate: '2015-01-06T09:38:41.000+0800',
+            lastUpdateDate: '2017-10-10T15:13:28.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           }
         ]
 
diff --git a/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue b/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
index a7362566d..6fc8a4806 100644
--- a/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
diff --git a/examples/sites/demos/pc/app/user/custom-sort.vue b/examples/sites/demos/pc/app/user/custom-sort.vue
index 22819c653..4d04bc136 100644
--- a/examples/sites/demos/pc/app/user/custom-sort.vue
+++ b/examples/sites/demos/pc/app/user/custom-sort.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import { User, Modal } from '@opentiny/vue'
+import { TinyUser, TinyModal } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
@@ -29,92 +29,92 @@ export default {
     getSuggestUser(userCN) {
       return new Promise((resolve) => {
         /* 此处为输入联想搜索逻辑，，数据返回格式如下 */
-        Modal.message(`用户输入的值为：${userCN}`)
+        TinyModal.message(`用户输入的值为：${userCN}`)
 
         const result = [
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'HWE',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': 'otc:2749;',
-            'coalitionPermission': false,
-            'endDate': '2017-11-13T14:26:06.000+0800',
-            'dept': null,
-            'userId': 421000103624183, // value-field
-            'userAccount': 'test1',
-            'userCN': 'test1', // text-field
-            'email': 'test1@test1.com',
-            'creationDate': '2012-08-17T11:26:18.000+0800',
-            'lastUpdateDate': '2015-03-30T14:27:34.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'HWE',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: 'otc:2749;',
+            coalitionPermission: false,
+            endDate: '2017-11-13T14:26:06.000+0800',
+            dept: null,
+            userId: 421000103624183, // value-field
+            userAccount: 'test1',
+            userCN: 'test1', // text-field
+            email: 'test1@test1.com',
+            creationDate: '2012-08-17T11:26:18.000+0800',
+            lastUpdateDate: '2015-03-30T14:27:34.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           },
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'WX',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': null,
-            'dept': null,
-            'userId': 435259704104388,
-            'userAccount': 'test2',
-            'userCN': 'test2',
-            'email': 'test2@test2.com',
-            'creationDate': '2017-10-23T11:16:59.000+0800',
-            'lastUpdateDate': '2017-10-23T11:16:59.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'WX',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: null,
+            dept: null,
+            userId: 435259704104388,
+            userAccount: 'test2',
+            userCN: 'test2',
+            email: 'test2@test2.com',
+            creationDate: '2017-10-23T11:16:59.000+0800',
+            lastUpdateDate: '2017-10-23T11:16:59.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           },
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'HWE',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': '2017-10-26T11:48:56.000+0800',
-            'dept': null,
-            'userId': 441047913162396,
-            'userAccount': 'test3',
-            'userCN': 'test3',
-            'email': 'test3@test3.com',
-            'creationDate': '2015-01-06T09:38:41.000+0800',
-            'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'HWE',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: '2017-10-26T11:48:56.000+0800',
+            dept: null,
+            userId: 441047913162396,
+            userAccount: 'test3',
+            userCN: 'test3',
+            email: 'test3@test3.com',
+            creationDate: '2015-01-06T09:38:41.000+0800',
+            lastUpdateDate: '2017-10-10T15:13:28.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           },
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'WX',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': '2017-11-10T08:50:56.000+0800',
-            'dept': null,
-            'userId': 702973890055088,
-            'userAccount': 'test4',
-            'userCN': 'test4',
-            'email': 'test4@test4.com',
-            'creationDate': '2017-10-10T18:22:33.000+0800',
-            'lastUpdateDate': '2017-10-10T18:22:33.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'WX',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: '2017-11-10T08:50:56.000+0800',
+            dept: null,
+            userId: 702973890055088,
+            userAccount: 'test4',
+            userCN: 'test4',
+            email: 'test4@test4.com',
+            creationDate: '2017-10-10T18:22:33.000+0800',
+            lastUpdateDate: '2017-10-10T18:22:33.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           }
         ]
 
@@ -125,51 +125,51 @@ export default {
     },
     fetchW3Accounts(userId) {
       /* 此为初始化时，v-model值不为空时，根据默认值查询用户数据，数据返回格式如下 */
-      Modal.message(`v-model默认值为：${userId}`)
+      TinyModal.message(`v-model默认值为：${userId}`)
 
       return new Promise((resolve) => {
         const result = [
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'HWE',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': '2017-10-26T11:48:56.000+0800',
-            'dept': null,
-            'userId': 441047913162396,
-            'userAccount': 'test3',
-            'userCN': 'test3',
-            'email': 'test3@test3.com',
-            'creationDate': '2015-01-06T09:38:41.000+0800',
-            'lastUpdateDate': '2017-10-10T15:13:28.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'HWE',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: '2017-10-26T11:48:56.000+0800',
+            dept: null,
+            userId: 441047913162396,
+            userAccount: 'test3',
+            userCN: 'test3',
+            email: 'test3@test3.com',
+            creationDate: '2015-01-06T09:38:41.000+0800',
+            lastUpdateDate: '2017-10-10T15:13:28.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           },
           {
-            'programValidity': null,
-            'employeeNumber': '12345678',
-            'userType': 'WX',
-            'currentRole': null,
-            'currentProgramIds': null,
-            'validRoles': null,
-            'defaultRole': null,
-            'coalitionPermission': false,
-            'endDate': null,
-            'dept': null,
-            'userId': 435259704104388,
-            'userAccount': 'test2',
-            'userCN': 'test2',
-            'email': 'test2@test2.com',
-            'creationDate': '2017-10-23T11:16:59.000+0800',
-            'lastUpdateDate': '2017-10-23T11:16:59.000+0800',
-            'rowIdx': -1,
-            'creationUserCN': null,
-            'lastUpdateUserCN': null
+            programValidity: null,
+            employeeNumber: '12345678',
+            userType: 'WX',
+            currentRole: null,
+            currentProgramIds: null,
+            validRoles: null,
+            defaultRole: null,
+            coalitionPermission: false,
+            endDate: null,
+            dept: null,
+            userId: 435259704104388,
+            userAccount: 'test2',
+            userCN: 'test2',
+            email: 'test2@test2.com',
+            creationDate: '2017-10-23T11:16:59.000+0800',
+            lastUpdateDate: '2017-10-23T11:16:59.000+0800',
+            rowIdx: -1,
+            creationUserCN: null,
+            lastUpdateUserCN: null
           }
         ]
 
diff --git a/examples/sites/demos/pc/app/user/delay-load-composition-api.vue b/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
index b6061ba5a..bfff1be05 100644
--- a/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user/delay-load.vue b/examples/sites/demos/pc/app/user/delay-load.vue
index 9dc457747..1d5ea345a 100644
--- a/examples/sites/demos/pc/app/user/delay-load.vue
+++ b/examples/sites/demos/pc/app/user/delay-load.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/display-only-composition-api.vue b/examples/sites/demos/pc/app/user/display-only-composition-api.vue
index cb1debb80..8883e3312 100644
--- a/examples/sites/demos/pc/app/user/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/display-only-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
diff --git a/examples/sites/demos/pc/app/user/display-only.vue b/examples/sites/demos/pc/app/user/display-only.vue
index 62dc4be81..d9e98d403 100644
--- a/examples/sites/demos/pc/app/user/display-only.vue
+++ b/examples/sites/demos/pc/app/user/display-only.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
index 0f904a5f9..5b3082ad7 100644
--- a/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user/dynamic-disable.vue b/examples/sites/demos/pc/app/user/dynamic-disable.vue
index b59ca375c..79f8a8962 100644
--- a/examples/sites/demos/pc/app/user/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/user/dynamic-disable.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/event-change-composition-api.vue b/examples/sites/demos/pc/app/user/event-change-composition-api.vue
index 57f1a518c..89f817cfb 100644
--- a/examples/sites/demos/pc/app/user/event-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/event-change-composition-api.vue
@@ -4,22 +4,22 @@
 
 <script setup>
 import { ref } from 'vue'
-import { User as TinyUser, Modal } from '@opentiny/vue'
+import { TinyUser, TinyModal } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 
 const change = (val) => {
-  Modal.message({ message: `${val}`, status: 'info' })
+  TinyModal.message({ message: `${val}`, status: 'info' })
 }
 
 const handleFocus = () => {
-  Modal.message({
+  TinyModal.message({
     message: '组件聚焦'
   })
 }
 
 const handleBlur = () => {
-  Modal.message({
+  TinyModal.message({
     message: '组件失焦'
   })
 }
diff --git a/examples/sites/demos/pc/app/user/event-change.vue b/examples/sites/demos/pc/app/user/event-change.vue
index 952f56efe..7bd601cc8 100644
--- a/examples/sites/demos/pc/app/user/event-change.vue
+++ b/examples/sites/demos/pc/app/user/event-change.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { User, Modal } from '@opentiny/vue'
+import { TinyUser, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
@@ -16,15 +16,15 @@ export default {
   },
   methods: {
     change(val) {
-      Modal.message({ message: `${val}`, status: 'info' })
+      TinyModal.message({ message: `${val}`, status: 'info' })
     },
     handleFocus() {
-      Modal.message({
+      TinyModal.message({
         message: '组件聚焦'
       })
     },
     handleBlur() {
-      Modal.message({
+      TinyModal.message({
         message: '组件失焦'
       })
     }
diff --git a/examples/sites/demos/pc/app/user/event-error-composition-api.vue b/examples/sites/demos/pc/app/user/event-error-composition-api.vue
index 27780b7b4..b18e0666a 100644
--- a/examples/sites/demos/pc/app/user/event-error-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/event-error-composition-api.vue
@@ -4,12 +4,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser, Modal } from '@opentiny/vue'
+import { TinyUser, TinyModal } from '@opentiny/vue'
 
 const user = ref('')
 
 function queryError(error) {
-  Modal.message({
+  TinyModal.message({
     message: `查询失败:[${error.join(',')}]`,
     status: 'error'
   })
diff --git a/examples/sites/demos/pc/app/user/event-error.vue b/examples/sites/demos/pc/app/user/event-error.vue
index 2977feb13..1fd9fb9db 100644
--- a/examples/sites/demos/pc/app/user/event-error.vue
+++ b/examples/sites/demos/pc/app/user/event-error.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User, Modal } from '@opentiny/vue'
+import { TinyUser, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     queryError(error) {
-      Modal.message({
+      TinyModal.message({
         message: `查询失败:[${error.join(',')}]`,
         status: 'error'
       })
diff --git a/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue b/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
index 8b1b0ee76..7db1f0165 100644
--- a/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088,421000103624002,421000103624003')
 </script>
diff --git a/examples/sites/demos/pc/app/user/hidden-tips-disable.vue b/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
index d6e976758..30ea8612f 100644
--- a/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
+++ b/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue b/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
index 0f882fd1c..22234993d 100644
--- a/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
+++ b/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
diff --git a/examples/sites/demos/pc/app/user/hide-selected.vue b/examples/sites/demos/pc/app/user/hide-selected.vue
index 64982c71f..1c2316ef0 100644
--- a/examples/sites/demos/pc/app/user/hide-selected.vue
+++ b/examples/sites/demos/pc/app/user/hide-selected.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue b/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
index 43e43a8fc..048eb5b22 100644
--- a/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user/load-after-input-the-length.vue b/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
index a1310ee6a..e1082fa25 100644
--- a/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
+++ b/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
index 33f238e1b..23cf50e59 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
index 0f73c1df5..4bd20d0f7 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue b/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
index 0f73c1df5..4bd20d0f7 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
index a0649d737..6afe3e1b6 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-tag.vue b/examples/sites/demos/pc/app/user/multiple-users-tag.vue
index f9acb9829..5ee19ebdd 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-tag.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-tag.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/multiple-users.vue b/examples/sites/demos/pc/app/user/multiple-users.vue
index 27a091533..f09ebde07 100644
--- a/examples/sites/demos/pc/app/user/multiple-users.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue b/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
index 89e627243..d5e307c34 100644
--- a/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
diff --git a/examples/sites/demos/pc/app/user/nodata-text.vue b/examples/sites/demos/pc/app/user/nodata-text.vue
index e21e78f71..19c901b40 100644
--- a/examples/sites/demos/pc/app/user/nodata-text.vue
+++ b/examples/sites/demos/pc/app/user/nodata-text.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue b/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
index 148183f33..a40302d00 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
diff --git a/examples/sites/demos/pc/app/user/tag-copy-all.vue b/examples/sites/demos/pc/app/user/tag-copy-all.vue
index a84b117c6..0c7b4fde6 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-all.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-all.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue b/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
index 2ae598e49..e2ffb500c 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
diff --git a/examples/sites/demos/pc/app/user/tag-copy.vue b/examples/sites/demos/pc/app/user/tag-copy.vue
index 13adc5f1f..2f20fc8b8 100644
--- a/examples/sites/demos/pc/app/user/tag-copy.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/text-field-composition-api.vue b/examples/sites/demos/pc/app/user/text-field-composition-api.vue
index db87ba15c..4b553e6b5 100644
--- a/examples/sites/demos/pc/app/user/text-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/text-field-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user/text-field.vue b/examples/sites/demos/pc/app/user/text-field.vue
index c064fa73f..49484ca30 100644
--- a/examples/sites/demos/pc/app/user/text-field.vue
+++ b/examples/sites/demos/pc/app/user/text-field.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/user-options-composition-api.vue b/examples/sites/demos/pc/app/user/user-options-composition-api.vue
index 5b6ace34c..ae136a08d 100644
--- a/examples/sites/demos/pc/app/user/user-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/user-options-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
diff --git a/examples/sites/demos/pc/app/user/user-options.vue b/examples/sites/demos/pc/app/user/user-options.vue
index 8a2bf4e2e..b41a91226 100644
--- a/examples/sites/demos/pc/app/user/user-options.vue
+++ b/examples/sites/demos/pc/app/user/user-options.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue b/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
index 75886f578..f1e456112 100644
--- a/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
diff --git a/examples/sites/demos/pc/app/user/user-select-size.vue b/examples/sites/demos/pc/app/user/user-select-size.vue
index 0cfffdb7a..e385125d6 100644
--- a/examples/sites/demos/pc/app/user/user-select-size.vue
+++ b/examples/sites/demos/pc/app/user/user-select-size.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/value-field-composition-api.vue b/examples/sites/demos/pc/app/user/value-field-composition-api.vue
index 237fff098..301995aca 100644
--- a/examples/sites/demos/pc/app/user/value-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/value-field-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
diff --git a/examples/sites/demos/pc/app/user/value-field.vue b/examples/sites/demos/pc/app/user/value-field.vue
index 69ba30be6..160850e32 100644
--- a/examples/sites/demos/pc/app/user/value-field.vue
+++ b/examples/sites/demos/pc/app/user/value-field.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/user/value-split-composition-api.vue b/examples/sites/demos/pc/app/user/value-split-composition-api.vue
index a34c6c812..fcd904417 100644
--- a/examples/sites/demos/pc/app/user/value-split-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/value-split-composition-api.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { User as TinyUser } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
diff --git a/examples/sites/demos/pc/app/user/value-split.vue b/examples/sites/demos/pc/app/user/value-split.vue
index a949b396f..c29804946 100644
--- a/examples/sites/demos/pc/app/user/value-split.vue
+++ b/examples/sites/demos/pc/app/user/value-split.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="jsx">
-import { User } from '@opentiny/vue'
+import { TinyUser } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyUser: User
+    TinyUser
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/virtual-scroll-box/table-composition-api.vue b/examples/sites/demos/pc/app/virtual-scroll-box/table-composition-api.vue
index 44250bf1a..5aec7420c 100644
--- a/examples/sites/demos/pc/app/virtual-scroll-box/table-composition-api.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll-box/table-composition-api.vue
@@ -24,7 +24,7 @@
 
 <script setup>
 import { reactive } from 'vue'
-import { VirtualScrollBox as TinyVirtualScrollBox } from '@opentiny/vue'
+import { TinyVirtualScrollBox } from '@opentiny/vue'
 
 const genColumn = (total) => {
   const columns = []
diff --git a/examples/sites/demos/pc/app/virtual-scroll-box/table.vue b/examples/sites/demos/pc/app/virtual-scroll-box/table.vue
index c1bb5d1da..78a2eb9d7 100644
--- a/examples/sites/demos/pc/app/virtual-scroll-box/table.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll-box/table.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { VirtualScrollBox } from '@opentiny/vue'
+import { TinyVirtualScrollBox } from '@opentiny/vue'
 
 const genColumn = (total) => {
   const columns = []
@@ -58,7 +58,7 @@ const { rows, rowSizes } = genRow(20000)
 
 export default {
   components: {
-    TinyVirtualScrollBox: VirtualScrollBox
+    TinyVirtualScrollBox
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/virtual-scroll-box/tree-composition-api.vue b/examples/sites/demos/pc/app/virtual-scroll-box/tree-composition-api.vue
index 2d3a0608e..b38c50fda 100644
--- a/examples/sites/demos/pc/app/virtual-scroll-box/tree-composition-api.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll-box/tree-composition-api.vue
@@ -17,7 +17,7 @@
 
 <script setup>
 import { provide, ref, reactive, nextTick, onBeforeMount } from 'vue'
-import { VirtualScrollBox as TinyVirtualScrollBox, Tree as TinyTree } from '@opentiny/vue'
+import { TinyVirtualScrollBox, TinyTree } from '@opentiny/vue'
 
 const config = reactive({
   width: 600,
diff --git a/examples/sites/demos/pc/app/virtual-scroll-box/tree.vue b/examples/sites/demos/pc/app/virtual-scroll-box/tree.vue
index 29b2035fc..44316293d 100644
--- a/examples/sites/demos/pc/app/virtual-scroll-box/tree.vue
+++ b/examples/sites/demos/pc/app/virtual-scroll-box/tree.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script>
-import { VirtualScrollBox, Tree } from '@opentiny/vue'
+import { TinyVirtualScrollBox, TinyTree } from '@opentiny/vue'
 import { hooks } from '@opentiny/vue-common'
 
 export default {
   components: {
-    TinyVirtualScrollBox: VirtualScrollBox,
-    TinyTree: Tree
+    TinyVirtualScrollBox,
+    TinyTree
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
index 3005fb03d..02104dd80 100644
--- a/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
@@ -14,7 +14,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { VirtualTree as TinyVirtualTree, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyVirtualTree, TinyButton, TinyModal } from '@opentiny/vue'
 
 const defaultProps = { children: 'children', label: 'label' }
 const data5 = ref([])
@@ -53,7 +53,7 @@ const onClick = () => {
 }
 
 const handleNodeClick = (data) => {
-  Modal.message({ message: `${data.label}`, status: 'info' })
+  TinyModal.message({ message: `${data.label}`, status: 'info' })
 }
 
 const treeOp = computed(() => ({
diff --git a/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue b/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
index cc2489737..26906e6d8 100644
--- a/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
+++ b/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import { VirtualTree, Button, Modal } from '@opentiny/vue'
+import { TinyVirtualTree, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyVirtualTree: VirtualTree,
-    TinyButton: Button
+    TinyVirtualTree,
+    TinyButton
   },
   computed: {
     treeOp() {
@@ -77,7 +77,7 @@ export default {
       return treeData
     },
     handleNodeClick(data) {
-      Modal.message({ message: `${data.label}`, status: 'info' })
+      TinyModal.message({ message: `${data.label}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/watermark/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/watermark/basic-usage-composition-api.vue
index 9b07c670f..654c03614 100644
--- a/examples/sites/demos/pc/app/watermark/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/watermark/basic-usage-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { reactive } from 'vue'
-import { Watermark as TinyWatermark } from '@opentiny/vue'
+import { TinyWatermark } from '@opentiny/vue'
 
 const params = reactive({
   width: 120,
diff --git a/examples/sites/demos/pc/app/watermark/basic-usage.vue b/examples/sites/demos/pc/app/watermark/basic-usage.vue
index 067f00039..b2e0fba0a 100644
--- a/examples/sites/demos/pc/app/watermark/basic-usage.vue
+++ b/examples/sites/demos/pc/app/watermark/basic-usage.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Watermark } from '@opentiny/vue'
+import { TinyWatermark } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWatermark: Watermark
+    TinyWatermark
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/watermark/image-composition-api.vue b/examples/sites/demos/pc/app/watermark/image-composition-api.vue
index 8e9f39667..ad210f88c 100644
--- a/examples/sites/demos/pc/app/watermark/image-composition-api.vue
+++ b/examples/sites/demos/pc/app/watermark/image-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script setup>
 import { reactive } from 'vue'
-import { Watermark as TinyWatermark } from '@opentiny/vue'
+import { TinyWatermark } from '@opentiny/vue'
 
 const params = reactive({
   width: 136,
diff --git a/examples/sites/demos/pc/app/watermark/image.vue b/examples/sites/demos/pc/app/watermark/image.vue
index b08404189..cf78c34c1 100644
--- a/examples/sites/demos/pc/app/watermark/image.vue
+++ b/examples/sites/demos/pc/app/watermark/image.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import { Watermark } from '@opentiny/vue'
+import { TinyWatermark } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWatermark: Watermark
+    TinyWatermark
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/wizard/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/wizard/basic-usage-composition-api.vue
index a639f7156..2f42612da 100644
--- a/examples/sites/demos/pc/app/wizard/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/wizard/basic-usage-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard } from '@opentiny/vue'
+import { TinyWizard } from '@opentiny/vue'
 
 const dataSet = ref([
   {
diff --git a/examples/sites/demos/pc/app/wizard/basic-usage.vue b/examples/sites/demos/pc/app/wizard/basic-usage.vue
index 0ba792ae4..49eab608b 100644
--- a/examples/sites/demos/pc/app/wizard/basic-usage.vue
+++ b/examples/sites/demos/pc/app/wizard/basic-usage.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Wizard } from '@opentiny/vue'
+import { TinyWizard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWizard: Wizard
+    TinyWizard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/wizard/btn-events-composition-api.vue b/examples/sites/demos/pc/app/wizard/btn-events-composition-api.vue
index 864bc57e3..92bd726d7 100644
--- a/examples/sites/demos/pc/app/wizard/btn-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/wizard/btn-events-composition-api.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard, Modal } from '@opentiny/vue'
+import { TinyWizard, TinyModal } from '@opentiny/vue'
 
 const dataSet = ref([
   {
@@ -37,18 +37,18 @@ const dataSet = ref([
 ])
 
 const handlePrev = (datas) => {
-  Modal.message('btn-prev' + JSON.stringify(datas))
+  TinyModal.message('btn-prev' + JSON.stringify(datas))
 }
 
 const handleNext = (datas) => {
-  Modal.message('btn-next' + JSON.stringify(datas))
+  TinyModal.message('btn-next' + JSON.stringify(datas))
 }
 
 const handleSave = (datas) => {
-  Modal.message('btn-save' + JSON.stringify(datas))
+  TinyModal.message('btn-save' + JSON.stringify(datas))
 }
 
 const handleSubmit = (datas) => {
-  Modal.message('btn-submit' + JSON.stringify(datas))
+  TinyModal.message('btn-submit' + JSON.stringify(datas))
 }
 </script>
diff --git a/examples/sites/demos/pc/app/wizard/btn-events.vue b/examples/sites/demos/pc/app/wizard/btn-events.vue
index c6ac71aee..ba0f79818 100644
--- a/examples/sites/demos/pc/app/wizard/btn-events.vue
+++ b/examples/sites/demos/pc/app/wizard/btn-events.vue
@@ -10,11 +10,11 @@
 </template>
 
 <script lang="jsx">
-import { Wizard, Modal } from '@opentiny/vue'
+import { TinyWizard, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWizard: Wizard
+    TinyWizard
   },
   data() {
     return {
@@ -44,16 +44,16 @@ export default {
   },
   methods: {
     handlePrev(datas) {
-      Modal.message('btn-prev' + JSON.stringify(datas))
+      TinyModal.message('btn-prev' + JSON.stringify(datas))
     },
     handleNext(datas) {
-      Modal.message('btn-next' + JSON.stringify(datas))
+      TinyModal.message('btn-next' + JSON.stringify(datas))
     },
     handleSave(datas) {
-      Modal.message('btn-save' + JSON.stringify(datas))
+      TinyModal.message('btn-save' + JSON.stringify(datas))
     },
     handleSubmit(datas) {
-      Modal.message('btn-submit' + JSON.stringify(datas))
+      TinyModal.message('btn-submit' + JSON.stringify(datas))
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/wizard/page-guide-composition-api.vue b/examples/sites/demos/pc/app/wizard/page-guide-composition-api.vue
index 2d2b553e8..b7c79e705 100644
--- a/examples/sites/demos/pc/app/wizard/page-guide-composition-api.vue
+++ b/examples/sites/demos/pc/app/wizard/page-guide-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard } from '@opentiny/vue'
+import { TinyWizard } from '@opentiny/vue'
 
 const dataSet = ref([
   {
diff --git a/examples/sites/demos/pc/app/wizard/page-guide.vue b/examples/sites/demos/pc/app/wizard/page-guide.vue
index c4dfc50ad..adf8d3917 100644
--- a/examples/sites/demos/pc/app/wizard/page-guide.vue
+++ b/examples/sites/demos/pc/app/wizard/page-guide.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Wizard } from '@opentiny/vue'
+import { TinyWizard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWizard: Wizard
+    TinyWizard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/wizard/slot-base-composition-api.vue b/examples/sites/demos/pc/app/wizard/slot-base-composition-api.vue
index d8953518f..84d04a62d 100644
--- a/examples/sites/demos/pc/app/wizard/slot-base-composition-api.vue
+++ b/examples/sites/demos/pc/app/wizard/slot-base-composition-api.vue
@@ -8,7 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard, Modal } from '@opentiny/vue'
+import { TinyWizard, TinyModal } from '@opentiny/vue'
 
 const dataSet = ref([
   {
diff --git a/examples/sites/demos/pc/app/wizard/slot-base.vue b/examples/sites/demos/pc/app/wizard/slot-base.vue
index 75737b860..5a7581c6a 100644
--- a/examples/sites/demos/pc/app/wizard/slot-base.vue
+++ b/examples/sites/demos/pc/app/wizard/slot-base.vue
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="jsx">
-import { Wizard, Modal } from '@opentiny/vue'
+import { TinyWizard, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWizard: Wizard
+    TinyWizard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/wizard/slot-step-button-composition-api.vue b/examples/sites/demos/pc/app/wizard/slot-step-button-composition-api.vue
index 7d31a5699..b197de62b 100644
--- a/examples/sites/demos/pc/app/wizard/slot-step-button-composition-api.vue
+++ b/examples/sites/demos/pc/app/wizard/slot-step-button-composition-api.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard, Button as TinyButton, Modal } from '@opentiny/vue'
+import { TinyWizard, TinyButton, TinyModal } from '@opentiny/vue'
 
 const dataSet = ref([
   {
@@ -36,6 +36,6 @@ const dataSet = ref([
 ])
 
 function btnClick(arg) {
-  Modal.message(`步骤${arg}`)
+  TinyModal.message(`步骤${arg}`)
 }
 </script>
diff --git a/examples/sites/demos/pc/app/wizard/slot-step-button.vue b/examples/sites/demos/pc/app/wizard/slot-step-button.vue
index b7b06e8f5..98f7ae1a9 100644
--- a/examples/sites/demos/pc/app/wizard/slot-step-button.vue
+++ b/examples/sites/demos/pc/app/wizard/slot-step-button.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="jsx">
-import { Wizard, Button, Modal } from '@opentiny/vue'
+import { TinyWizard, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWizard: Wizard,
-    TinyButton: Button
+    TinyWizard,
+    TinyButton
   },
   data() {
     return {
@@ -44,7 +44,7 @@ export default {
   },
   methods: {
     btnClick(arg) {
-      Modal.message(`步骤${arg}`)
+      TinyModal.message(`步骤${arg}`)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/wizard/time-line-flow-composition-api.vue b/examples/sites/demos/pc/app/wizard/time-line-flow-composition-api.vue
index cb12bf7dd..9f9796ab6 100644
--- a/examples/sites/demos/pc/app/wizard/time-line-flow-composition-api.vue
+++ b/examples/sites/demos/pc/app/wizard/time-line-flow-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard } from '@opentiny/vue'
+import { TinyWizard } from '@opentiny/vue'
 
 const dataSet = ref([
   {
diff --git a/examples/sites/demos/pc/app/wizard/time-line-flow.vue b/examples/sites/demos/pc/app/wizard/time-line-flow.vue
index e069bd9b8..930465797 100644
--- a/examples/sites/demos/pc/app/wizard/time-line-flow.vue
+++ b/examples/sites/demos/pc/app/wizard/time-line-flow.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Wizard } from '@opentiny/vue'
+import { TinyWizard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWizard: Wizard
+    TinyWizard
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/wizard/vertical-composition-api.vue b/examples/sites/demos/pc/app/wizard/vertical-composition-api.vue
index 9a615e5c7..fb548c2e7 100644
--- a/examples/sites/demos/pc/app/wizard/vertical-composition-api.vue
+++ b/examples/sites/demos/pc/app/wizard/vertical-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard } from '@opentiny/vue'
+import { TinyWizard } from '@opentiny/vue'
 
 const dataSet = ref([
   {
diff --git a/examples/sites/demos/pc/app/wizard/vertical.vue b/examples/sites/demos/pc/app/wizard/vertical.vue
index 00a49bb5b..b035359f4 100644
--- a/examples/sites/demos/pc/app/wizard/vertical.vue
+++ b/examples/sites/demos/pc/app/wizard/vertical.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="jsx">
-import { Wizard } from '@opentiny/vue'
+import { TinyWizard } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyWizard: Wizard
+    TinyWizard
   },
   data() {
     return {
diff --git a/internals/automate/src/doc-prefix.ts b/internals/automate/src/doc-prefix.ts
index 24a5cdf7a..9aeb350af 100644
--- a/internals/automate/src/doc-prefix.ts
+++ b/internals/automate/src/doc-prefix.ts
@@ -74,6 +74,8 @@ const addPrefix = async (code) => {
   let newCode
 
   newCode = generate.default(ast, { retainLines: true }).code || ''
+  // json中的数组会自动添加新行，特殊处理一下
+  newCode = newCode.replaceAll('],\n', '],')
   const formatCode = await prettier.format(newCode, {
     semi: false,
     parser: 'typescript',
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 789222f0f..9c8ccea19 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -275,4 +275,4 @@
     "build": "pnpm -w build:ui",
     "postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file