diff --git a/examples/sites/demos/app/alert/close-text-composition-api.vue b/examples/sites/demos/app/alert/close-text-composition-api.vue
index 4bc8b68e05..b7afee67f2 100644
--- a/examples/sites/demos/app/alert/close-text-composition-api.vue
+++ b/examples/sites/demos/app/alert/close-text-composition-api.vue
@@ -6,10 +6,9 @@
 </template>
 
 <script setup lang="jsx">
-import { Alert as TinyAlert } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Alert as TinyAlert, Modal } from '@opentiny/vue'
 
 function close() {
-  alert('关闭了')
+  Modal.alert('关闭了')
 }
 </script>
diff --git a/examples/sites/demos/app/alert/close-text.vue b/examples/sites/demos/app/alert/close-text.vue
index e5e2f929cc..bca07b4a12 100644
--- a/examples/sites/demos/app/alert/close-text.vue
+++ b/examples/sites/demos/app/alert/close-text.vue
@@ -6,8 +6,7 @@
 </template>
 
 <script lang="jsx">
-import { Alert } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Alert, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -15,7 +14,7 @@ export default {
   },
   methods: {
     close() {
-      alert('关闭了')
+      Modal.alert('关闭了')
     }
   }
 }
diff --git a/examples/sites/demos/app/anchor/on-change-composition-api.vue b/examples/sites/demos/app/anchor/on-change-composition-api.vue
index 031a613a93..cb5fab8c25 100644
--- a/examples/sites/demos/app/anchor/on-change-composition-api.vue
+++ b/examples/sites/demos/app/anchor/on-change-composition-api.vue
@@ -4,8 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Anchor as TinyAnchor } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { Anchor as TinyAnchor, Modal } from '@opentiny/vue'
 
 const links = ref([
   {
@@ -43,6 +42,6 @@ const links = ref([
 ])
 
 function handleChange(link) {
-  message(`change${link}`)
+  Modal.message(`change${link}`)
 }
 </script>
diff --git a/examples/sites/demos/app/anchor/on-change.vue b/examples/sites/demos/app/anchor/on-change.vue
index ceb183013b..1f6a938bc3 100644
--- a/examples/sites/demos/app/anchor/on-change.vue
+++ b/examples/sites/demos/app/anchor/on-change.vue
@@ -3,8 +3,7 @@
 </template>
 
 <script>
-import { Anchor } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { Anchor, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -50,7 +49,7 @@ export default {
   },
   methods: {
     handleChange(link) {
-      message(`change${link}`)
+      Modal.message(`change${link}`)
     }
   }
 }
diff --git a/examples/sites/demos/app/dept/before-confirm-composition-api.vue b/examples/sites/demos/app/dept/before-confirm-composition-api.vue
index 9cfa3894d0..58de323e3d 100644
--- a/examples/sites/demos/app/dept/before-confirm-composition-api.vue
+++ b/examples/sites/demos/app/dept/before-confirm-composition-api.vue
@@ -8,15 +8,14 @@
 </template>
 
 <script setup lang="jsx">
-import { Dept as TinyDept } from '@opentiny/vue'
-import { confirm } from '@opentiny/vue-modal'
+import { Dept as TinyDept, Modal } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const value = ref('022471')
 
 function beforeConfirm() {
   return new Promise((resolve, reject) => {
-    confirm('确定关闭弹框？').then((res) => {
+    Modal.confirm('确定关闭弹框？').then((res) => {
       res === 'confirm' ? resolve() : reject(new Error())
     })
   })
diff --git a/examples/sites/demos/app/dept/before-confirm.vue b/examples/sites/demos/app/dept/before-confirm.vue
index 37dea83cc6..e18c460d68 100644
--- a/examples/sites/demos/app/dept/before-confirm.vue
+++ b/examples/sites/demos/app/dept/before-confirm.vue
@@ -8,8 +8,7 @@
 </template>
 
 <script lang="jsx">
-import { Dept } from '@opentiny/vue'
-import { confirm } from '@opentiny/vue-modal'
+import { Dept, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -23,7 +22,7 @@ export default {
   methods: {
     beforeConfirm() {
       return new Promise((resolve, reject) => {
-        confirm('确定关闭弹框？').then((res) => {
+        Modal.confirm('确定关闭弹框？').then((res) => {
           res === 'confirm' ? resolve() : reject(new Error())
         })
       })
diff --git a/examples/sites/demos/app/file-upload/abort-quest-composition-api.vue b/examples/sites/demos/app/file-upload/abort-quest-composition-api.vue
index 27ac165188..a12682d181 100644
--- a/examples/sites/demos/app/file-upload/abort-quest-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/abort-quest-composition-api.vue
@@ -10,14 +10,13 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const uploadRef = ref()
 
 function cancelUpload() {
-  message('手动取消上传')
+  Modal.message('手动取消上传')
   uploadRef.value.abort()
 }
 </script>
diff --git a/examples/sites/demos/app/file-upload/abort-quest.vue b/examples/sites/demos/app/file-upload/abort-quest.vue
index 13c6830d89..0a137bd65d 100644
--- a/examples/sites/demos/app/file-upload/abort-quest.vue
+++ b/examples/sites/demos/app/file-upload/abort-quest.vue
@@ -9,8 +9,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -24,7 +23,7 @@ export default {
   },
   methods: {
     cancelUpload() {
-      message('手动取消上传')
+      Modal.message('手动取消上传')
       this.$refs.upload.abort()
     }
   }
diff --git a/examples/sites/demos/app/file-upload/custom-prefix-composition-api.vue b/examples/sites/demos/app/file-upload/custom-prefix-composition-api.vue
index 767ff64a19..48f6ac8018 100644
--- a/examples/sites/demos/app/file-upload/custom-prefix-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/custom-prefix-composition-api.vue
@@ -16,8 +16,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -32,12 +31,12 @@ const fileList = ref([
 ])
 
 function beforeRemove() {
-  message('触发删除文件前回调事件')
+  Modal.message('触发删除文件前回调事件')
   return true
 }
 
 function beforeAvatarUpload() {
-  message('触发上传前回调事件')
+  Modal.message('触发上传前回调事件')
   return true
 }
 </script>
diff --git a/examples/sites/demos/app/file-upload/custom-prefix.vue b/examples/sites/demos/app/file-upload/custom-prefix.vue
index b9a368f1b2..3246f6a267 100644
--- a/examples/sites/demos/app/file-upload/custom-prefix.vue
+++ b/examples/sites/demos/app/file-upload/custom-prefix.vue
@@ -15,8 +15,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -40,11 +39,11 @@ export default {
   },
   methods: {
     beforeRemove() {
-      message('触发删除文件前回调事件')
+      Modal.message('触发删除文件前回调事件')
       return true
     },
     beforeAvatarUpload() {
-      message('触发上传前回调事件')
+      Modal.message('触发上传前回调事件')
       return true
     }
   }
diff --git a/examples/sites/demos/app/file-upload/custom-upload-request-composition-api.vue b/examples/sites/demos/app/file-upload/custom-upload-request-composition-api.vue
index eb68d462cb..4be2bdd61d 100644
--- a/examples/sites/demos/app/file-upload/custom-upload-request-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/custom-upload-request-composition-api.vue
@@ -14,8 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -30,7 +29,7 @@ const headers = ref({
 })
 
 function beforeUpload() {
-  message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+  Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
   return true
 }
 </script>
diff --git a/examples/sites/demos/app/file-upload/custom-upload-request.vue b/examples/sites/demos/app/file-upload/custom-upload-request.vue
index f5c5b63bd5..5d117e22e8 100644
--- a/examples/sites/demos/app/file-upload/custom-upload-request.vue
+++ b/examples/sites/demos/app/file-upload/custom-upload-request.vue
@@ -13,8 +13,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -38,7 +37,7 @@ export default {
   },
   methods: {
     beforeUpload() {
-      message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+      Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
       return true
     }
   }
diff --git a/examples/sites/demos/app/file-upload/drag-upload-composition-api.vue b/examples/sites/demos/app/file-upload/drag-upload-composition-api.vue
index a1a47f7841..1705ab50b0 100644
--- a/examples/sites/demos/app/file-upload/drag-upload-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/drag-upload-composition-api.vue
@@ -7,15 +7,14 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload } from '@opentiny/vue'
+import { FileUpload as TinyFileUpload, Modal } from '@opentiny/vue'
 import { iconFileupload } from '@opentiny/vue-icon'
-import { message } from '@opentiny/vue-modal'
 
 const action = ref('http://localhost:3000/api/upload')
 
 const TinyIconFileupload = iconFileupload()
 
 function dropErrorHandler(files) {
-  message(`有${files.length}个文件拖拽失败`)
+  Modal.message(`有${files.length}个文件拖拽失败`)
 }
 </script>
diff --git a/examples/sites/demos/app/file-upload/drag-upload.vue b/examples/sites/demos/app/file-upload/drag-upload.vue
index 63e67ccd57..fde5a95b23 100644
--- a/examples/sites/demos/app/file-upload/drag-upload.vue
+++ b/examples/sites/demos/app/file-upload/drag-upload.vue
@@ -6,9 +6,8 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload } from '@opentiny/vue'
+import { FileUpload, Modal } from '@opentiny/vue'
 import { IconFileupload } from '@opentiny/vue-icon'
-import { message } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -22,7 +21,7 @@ export default {
   },
   methods: {
     dropErrorHandler(files) {
-      message(`有${files.length}个文件拖拽失败`)
+      Modal.message(`有${files.length}个文件拖拽失败`)
     }
   }
 }
diff --git a/examples/sites/demos/app/file-upload/jalor-request-composition-api.vue b/examples/sites/demos/app/file-upload/jalor-request-composition-api.vue
index 9ec6632830..8cd2f32d22 100644
--- a/examples/sites/demos/app/file-upload/jalor-request-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/jalor-request-composition-api.vue
@@ -8,15 +8,14 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const requestData = ref({
   id: 123
 })
 
 function beforeUpload() {
-  message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+  Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
   return true
 }
 </script>
diff --git a/examples/sites/demos/app/file-upload/jalor-request.vue b/examples/sites/demos/app/file-upload/jalor-request.vue
index 9f3c16e6b6..7aa419c4cf 100644
--- a/examples/sites/demos/app/file-upload/jalor-request.vue
+++ b/examples/sites/demos/app/file-upload/jalor-request.vue
@@ -7,8 +7,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -24,7 +23,7 @@ export default {
   },
   methods: {
     beforeUpload() {
-      message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+      Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
       return true
     }
   }
diff --git a/examples/sites/demos/app/file-upload/max-file-count-composition-api.vue b/examples/sites/demos/app/file-upload/max-file-count-composition-api.vue
index 382145fc64..6172f988f0 100644
--- a/examples/sites/demos/app/file-upload/max-file-count-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/max-file-count-composition-api.vue
@@ -6,13 +6,12 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const limit = ref(1)
 
 function handleExceed() {
-  message(`文件个数不能超过${limit.value}个`)
+  Modal.message(`文件个数不能超过${limit.value}个`)
 }
 </script>
diff --git a/examples/sites/demos/app/file-upload/max-file-count.vue b/examples/sites/demos/app/file-upload/max-file-count.vue
index e4d3b27370..248508032b 100644
--- a/examples/sites/demos/app/file-upload/max-file-count.vue
+++ b/examples/sites/demos/app/file-upload/max-file-count.vue
@@ -5,8 +5,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -21,7 +20,7 @@ export default {
   },
   methods: {
     handleExceed() {
-      message(`文件个数不能超过${this.limit}个`)
+      Modal.message(`文件个数不能超过${this.limit}个`)
     }
   }
 }
diff --git a/examples/sites/demos/app/file-upload/prevent-delete-file-composition-api.vue b/examples/sites/demos/app/file-upload/prevent-delete-file-composition-api.vue
index e2b070634f..a8b5539fc0 100644
--- a/examples/sites/demos/app/file-upload/prevent-delete-file-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/prevent-delete-file-composition-api.vue
@@ -8,8 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { confirm } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -21,7 +20,7 @@ const fileList = ref([
 
 function beforeRemove(file) {
   return new Promise((resolve, reject) => {
-    confirm(`确定移除 ${file.name}？`).then((res) => {
+    Modal.confirm(`确定移除 ${file.name}？`).then((res) => {
       res === 'confirm' ? resolve() : reject(new Error())
     })
   })
diff --git a/examples/sites/demos/app/file-upload/prevent-delete-file.vue b/examples/sites/demos/app/file-upload/prevent-delete-file.vue
index e4547f7981..5efbbf4e3b 100644
--- a/examples/sites/demos/app/file-upload/prevent-delete-file.vue
+++ b/examples/sites/demos/app/file-upload/prevent-delete-file.vue
@@ -7,8 +7,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { confirm } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -29,7 +28,7 @@ export default {
   methods: {
     beforeRemove(file) {
       return new Promise((resolve, reject) => {
-        confirm(`确定移除 ${file.name}？`).then((res) => {
+        Modal.confirm(`确定移除 ${file.name}？`).then((res) => {
           res === 'confirm' ? resolve() : reject(new Error())
         })
       })
diff --git a/examples/sites/demos/app/file-upload/prevent-upload-file-composition-api.vue b/examples/sites/demos/app/file-upload/prevent-upload-file-composition-api.vue
index 3e1a7754bd..24fd7f78a5 100644
--- a/examples/sites/demos/app/file-upload/prevent-upload-file-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/prevent-upload-file-composition-api.vue
@@ -8,8 +8,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { confirm } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -21,7 +20,7 @@ const fileList = ref([
 
 function beforeUpload(file) {
   return new Promise((resolve, reject) => {
-    confirm(`确定要上传 ${file.name}？`).then((res) => {
+    Modal.confirm(`确定要上传 ${file.name}？`).then((res) => {
       res === 'confirm' ? resolve() : reject()
     })
   })
diff --git a/examples/sites/demos/app/file-upload/prevent-upload-file.vue b/examples/sites/demos/app/file-upload/prevent-upload-file.vue
index e8af40c6a5..7b0e8a8e69 100644
--- a/examples/sites/demos/app/file-upload/prevent-upload-file.vue
+++ b/examples/sites/demos/app/file-upload/prevent-upload-file.vue
@@ -7,8 +7,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { confirm } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -29,7 +28,7 @@ export default {
   methods: {
     beforeUpload(file) {
       return new Promise((resolve, reject) => {
-        confirm(`确定要上传 ${file.name}？`).then((res) => {
+        Modal.confirm(`确定要上传 ${file.name}？`).then((res) => {
           res === 'confirm' ? resolve() : reject()
         })
       })
diff --git a/examples/sites/demos/app/file-upload/upload-events-composition-api.vue b/examples/sites/demos/app/file-upload/upload-events-composition-api.vue
index 5104168aa8..613c083fa8 100644
--- a/examples/sites/demos/app/file-upload/upload-events-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/upload-events-composition-api.vue
@@ -21,8 +21,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -37,34 +36,34 @@ const fileList = ref([
 ])
 
 function handleRemove() {
-  message('触发删除文件回调事件')
+  Modal.message('触发删除文件回调事件')
 }
 
 function handlePreview(file) {
-  message(file.url)
+  Modal.message(file.url)
 }
 
 function progressEvent() {
-  message('文件上传时的回调 返回进程')
+  Modal.message('文件上传时的回调 返回进程')
 }
 
 function errorEvent() {
-  message('文件上传失败回调')
+  Modal.message('文件上传失败回调')
 }
 
 function handleExceed() {
-  message('触发文件超出个数限制回调事件')
+  Modal.message('触发文件超出个数限制回调事件')
 }
 
 function handleAvatarSuccess() {
-  message('触发上传文件成功回调事件')
+  Modal.message('触发上传文件成功回调事件')
 }
 
 function handleChange() {
-  message('触发上传文件改变回调事件')
+  Modal.message('触发上传文件改变回调事件')
 }
 
 function handleHashProgress() {
-  message('文件上传生成hash值时的回调 返回进程')
+  Modal.message('文件上传生成hash值时的回调 返回进程')
 }
 </script>
diff --git a/examples/sites/demos/app/file-upload/upload-events.vue b/examples/sites/demos/app/file-upload/upload-events.vue
index f34d4d2b6f..86ddb51bb8 100644
--- a/examples/sites/demos/app/file-upload/upload-events.vue
+++ b/examples/sites/demos/app/file-upload/upload-events.vue
@@ -20,8 +20,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -45,28 +44,28 @@ export default {
   },
   methods: {
     handleRemove() {
-      message('触发删除文件回调事件')
+      Modal.message('触发删除文件回调事件')
     },
     handlePreview(file) {
-      message(file.url)
+      Modal.message(file.url)
     },
     progressEvent() {
-      message('文件上传时的回调 返回进程')
+      Modal.message('文件上传时的回调 返回进程')
     },
     errorEvent() {
-      message('文件上传失败回调')
+      Modal.message('文件上传失败回调')
     },
     handleExceed() {
-      message('触发文件超出个数限制回调事件')
+      Modal.message('触发文件超出个数限制回调事件')
     },
     handleAvatarSuccess() {
-      message('触发上传文件成功回调事件')
+      Modal.message('触发上传文件成功回调事件')
     },
     handleChange() {
-      message('触发上传文件改变回调事件')
+      Modal.message('触发上传文件改变回调事件')
     },
     handleHashProgress() {
-      message('文件上传生成hash值时的回调 返回进程')
+      Modal.message('文件上传生成hash值时的回调 返回进程')
     }
   }
 }
diff --git a/examples/sites/demos/app/file-upload/upload-request-composition-api.vue b/examples/sites/demos/app/file-upload/upload-request-composition-api.vue
index 5f946daa44..d23860d57e 100644
--- a/examples/sites/demos/app/file-upload/upload-request-composition-api.vue
+++ b/examples/sites/demos/app/file-upload/upload-request-composition-api.vue
@@ -15,8 +15,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
 const fileList = ref([
@@ -31,7 +30,7 @@ const headers = ref({
 })
 
 function beforeUpload() {
-  message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+  Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
 
   return true
 }
diff --git a/examples/sites/demos/app/file-upload/upload-request.vue b/examples/sites/demos/app/file-upload/upload-request.vue
index 1ede1cef91..3e364a0bfb 100644
--- a/examples/sites/demos/app/file-upload/upload-request.vue
+++ b/examples/sites/demos/app/file-upload/upload-request.vue
@@ -14,8 +14,7 @@
 </template>
 
 <script lang="jsx">
-import { FileUpload, Button } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { FileUpload, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -39,7 +38,7 @@ export default {
   },
   methods: {
     beforeUpload() {
-      message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+      Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
 
       return true
     }
diff --git a/examples/sites/demos/app/form/display-only-composition-api.vue b/examples/sites/demos/app/form/display-only-composition-api.vue
index 18e73aa9f9..2665521655 100644
--- a/examples/sites/demos/app/form/display-only-composition-api.vue
+++ b/examples/sites/demos/app/form/display-only-composition-api.vue
@@ -111,7 +111,6 @@ import {
   Option as TinyOption,
   Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const displayOnly = ref(true)
 const top = ref(false)
@@ -420,7 +419,7 @@ onMounted(() => {
 })
 
 function submitClick() {
-  alert('提交')
+  Modal.alert('提交')
 }
 
 function querySearch(queryString, cb) {
diff --git a/examples/sites/demos/app/form/display-only.vue b/examples/sites/demos/app/form/display-only.vue
index af360b1df0..e53b0faad2 100644
--- a/examples/sites/demos/app/form/display-only.vue
+++ b/examples/sites/demos/app/form/display-only.vue
@@ -110,7 +110,6 @@ import {
   Option,
   Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -439,7 +438,7 @@ export default {
   },
   methods: {
     submitClick() {
-      alert('提交')
+      Modal.alert('提交')
     },
     querySearch(queryString, cb) {
       let restaurants = this.restaurants
diff --git a/examples/sites/demos/app/form/frequently-used-form-composition-api.vue b/examples/sites/demos/app/form/frequently-used-form-composition-api.vue
index 8b4e42a8db..4a9dc98db0 100644
--- a/examples/sites/demos/app/form/frequently-used-form-composition-api.vue
+++ b/examples/sites/demos/app/form/frequently-used-form-composition-api.vue
@@ -40,9 +40,9 @@ import {
   DropTimes as TinyDropTimes,
   Tooltip as TinyTooltip,
   Input as TinyInput,
-  Button as TinyButton
+  Button as TinyButton,
+  Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const createData = reactive({
   quantity: '',
@@ -54,7 +54,7 @@ const createData = reactive({
 })
 
 function submitClick() {
-  alert('提交')
+  Modal.alert('提交')
 }
 </script>
 
diff --git a/examples/sites/demos/app/form/frequently-used-form.vue b/examples/sites/demos/app/form/frequently-used-form.vue
index d1929d1c93..2ecf0d6eed 100644
--- a/examples/sites/demos/app/form/frequently-used-form.vue
+++ b/examples/sites/demos/app/form/frequently-used-form.vue
@@ -30,8 +30,7 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -59,7 +58,7 @@ export default {
   },
   methods: {
     submitClick() {
-      alert('提交')
+      Modal.alert('提交')
     }
   }
 }
diff --git a/examples/sites/demos/app/form/no-validate-to-add-composition-api.vue b/examples/sites/demos/app/form/no-validate-to-add-composition-api.vue
index 23d3fcafac..60b8853df6 100644
--- a/examples/sites/demos/app/form/no-validate-to-add-composition-api.vue
+++ b/examples/sites/demos/app/form/no-validate-to-add-composition-api.vue
@@ -53,8 +53,8 @@ import {
   Input as TinyInput,
   Select as TinySelect,
   Option as TinyOption
-} from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+} from '@opentiny/vue',Modal
+
 
 const reset = ref(false)
 const ruleForm = reactive({
@@ -105,9 +105,9 @@ const ruleFormRef = ref()
 function submitForm() {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
-      alert('submit!')
+      Modal.alert('submit!')
     } else {
-      alert('error submit!!')
+      Modal.alert('error submit!!')
       return false
     }
   })
diff --git a/examples/sites/demos/app/form/no-validate-to-add.vue b/examples/sites/demos/app/form/no-validate-to-add.vue
index 7f943b84af..8f792d3104 100644
--- a/examples/sites/demos/app/form/no-validate-to-add.vue
+++ b/examples/sites/demos/app/form/no-validate-to-add.vue
@@ -51,9 +51,9 @@ import {
   DatePicker,
   Input,
   Select,
-  Option
+  Option,
+  Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -123,9 +123,9 @@ export default {
     submitForm() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
-          alert('submit!')
+          Modal.alert('submit!')
         } else {
-          alert('error submit!!')
+          Modal.alert('error submit!!')
           return false
         }
       })
diff --git a/examples/sites/demos/app/form/size-composition-api.vue b/examples/sites/demos/app/form/size-composition-api.vue
index 9f28e71c07..8a9219be22 100644
--- a/examples/sites/demos/app/form/size-composition-api.vue
+++ b/examples/sites/demos/app/form/size-composition-api.vue
@@ -43,9 +43,9 @@ import {
   DropTimes as TinyDropTimes,
   Tooltip as TinyTooltip,
   Input as TinyInput,
-  Button as TinyButton
+  Button as TinyButton,
+  Modal
 } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const sizeList = ref(['mini', 'small', 'medium'])
 const createData = reactive({
@@ -58,7 +58,7 @@ const createData = reactive({
 })
 
 function submitClick() {
-  alert('提交')
+  Modal.alert('提交')
 }
 </script>
 
diff --git a/examples/sites/demos/app/form/size.vue b/examples/sites/demos/app/form/size.vue
index d7ca3b889a..3d2f820307 100644
--- a/examples/sites/demos/app/form/size.vue
+++ b/examples/sites/demos/app/form/size.vue
@@ -33,8 +33,7 @@
 </template>
 
 <script lang="jsx">
-import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -63,7 +62,7 @@ export default {
   },
   methods: {
     submitClick() {
-      alert('提交')
+      Modal.alert('提交')
     }
   }
 }
diff --git a/examples/sites/demos/app/grid/event/toolbar-button-click-event-composition-api.vue b/examples/sites/demos/app/grid/event/toolbar-button-click-event-composition-api.vue
index b745cf0e80..75c8b77e07 100644
--- a/examples/sites/demos/app/grid/event/toolbar-button-click-event-composition-api.vue
+++ b/examples/sites/demos/app/grid/event/toolbar-button-click-event-composition-api.vue
@@ -31,8 +31,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
-import { Modal } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -118,19 +117,19 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        alert('请至少选中一条记录')
+        Modal.alert('请至少选中一条记录')
       }
       $grid.removeSelecteds()
       break
     }
     case 'getDelete': {
       const removeRecords = $grid.getRemoveRecords() // 获取删除的数据
-      alert('获取删除的数据' + JSON.stringify(removeRecords))
+      Modal.alert('获取删除的数据' + JSON.stringify(removeRecords))
       break
     }
     case 'save': {
       if (!updateData.length && !insertData.length && !removeData.length) {
-        alert('没有修改记录')
+        Modal.alert('没有修改记录')
       } else {
         Modal.message({
           message: '点击保存触发, 新增的数据',
@@ -144,7 +143,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'getRecordset': {
       const records = $grid.getRecordset()
-      alert('增删改记录集合：' + JSON.stringify(records))
+      Modal.alert('增删改记录集合：' + JSON.stringify(records))
       break
     }
   }
diff --git a/examples/sites/demos/app/grid/event/toolbar-button-click-event.vue b/examples/sites/demos/app/grid/event/toolbar-button-click-event.vue
index e020b8bbf2..cec22fd507 100644
--- a/examples/sites/demos/app/grid/event/toolbar-button-click-event.vue
+++ b/examples/sites/demos/app/grid/event/toolbar-button-click-event.vue
@@ -30,8 +30,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
-import { Modal } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {
diff --git a/examples/sites/demos/app/grid/grid_Example/gridValid/before-submit-validation-composition-api.vue b/examples/sites/demos/app/grid/grid_Example/gridValid/before-submit-validation-composition-api.vue
index 4d1a700f94..384cd8d4de 100644
--- a/examples/sites/demos/app/grid/grid_Example/gridValid/before-submit-validation-composition-api.vue
+++ b/examples/sites/demos/app/grid/grid_Example/gridValid/before-submit-validation-composition-api.vue
@@ -20,8 +20,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
 
 const validRules = {
   name: [
@@ -155,9 +154,9 @@ function toolbarButtonClickEvent({ code }) {
     case 'save': {
       basicGridRef.value.validate((valid) => {
         if (valid) {
-          alert('校验成功！')
+          Modal.alert('校验成功！')
         } else {
-          alert('校验不通过')
+          Modal.alert('校验不通过')
         }
       })
       break
diff --git a/examples/sites/demos/app/grid/grid_Example/gridValid/before-submit-validation.vue b/examples/sites/demos/app/grid/grid_Example/gridValid/before-submit-validation.vue
index b01bd46a4a..a873ec3e1a 100644
--- a/examples/sites/demos/app/grid/grid_Example/gridValid/before-submit-validation.vue
+++ b/examples/sites/demos/app/grid/grid_Example/gridValid/before-submit-validation.vue
@@ -19,8 +19,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -163,9 +162,9 @@ export default {
         case 'save': {
           this.$refs.basicGrid.validate((valid) => {
             if (valid) {
-              alert('校验成功！')
+              Modal.alert('校验成功！')
             } else {
-              alert('校验不通过')
+              Modal.alert('校验不通过')
             }
           })
           break
diff --git a/examples/sites/demos/app/grid/grid_Example/gridValid/select-validation-composition-api.vue b/examples/sites/demos/app/grid/grid_Example/gridValid/select-validation-composition-api.vue
index f2a1701aa6..f5cc3304bf 100644
--- a/examples/sites/demos/app/grid/grid_Example/gridValid/select-validation-composition-api.vue
+++ b/examples/sites/demos/app/grid/grid_Example/gridValid/select-validation-composition-api.vue
@@ -21,8 +21,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
 
 const validRules = {
   name: [
@@ -159,13 +158,13 @@ function toolbarButtonClickEvent({ code }) {
       if (selectRecords.length > 0) {
         basicGridRef.value.validate(selectRecords, (valid) => {
           if (valid) {
-            alert('校验成功！')
+            Modal.alert('校验成功！')
           } else {
-            alert('校验不通过')
+            Modal.alert('校验不通过')
           }
         })
       } else {
-        alert('未选中数据！')
+        Modal.alert('未选中数据！')
       }
       break
     }
diff --git a/examples/sites/demos/app/grid/grid_Example/gridValid/select-validation.vue b/examples/sites/demos/app/grid/grid_Example/gridValid/select-validation.vue
index 1fcb7008ef..2e62fd6910 100644
--- a/examples/sites/demos/app/grid/grid_Example/gridValid/select-validation.vue
+++ b/examples/sites/demos/app/grid/grid_Example/gridValid/select-validation.vue
@@ -20,8 +20,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -167,13 +166,13 @@ export default {
           if (selectRecords.length > 0) {
             this.$refs.basicGrid.validate(selectRecords, (valid) => {
               if (valid) {
-                alert('校验成功！')
+                Modal.alert('校验成功！')
               } else {
-                alert('校验不通过')
+                Modal.alert('校验不通过')
               }
             })
           } else {
-            alert('未选中数据！')
+            Modal.alert('未选中数据！')
           }
           break
         }
diff --git a/examples/sites/demos/app/grid/grid_Example/gridValid/validation-scroll-to-col-composition-api.vue b/examples/sites/demos/app/grid/grid_Example/gridValid/validation-scroll-to-col-composition-api.vue
index 16b7b4f849..d83f074cec 100644
--- a/examples/sites/demos/app/grid/grid_Example/gridValid/validation-scroll-to-col-composition-api.vue
+++ b/examples/sites/demos/app/grid/grid_Example/gridValid/validation-scroll-to-col-composition-api.vue
@@ -25,8 +25,13 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Input } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import {
+  Grid as TinyGrid,
+  GridColumn as TinyGridColumn,
+  GridToolbar as TinyGridToolbar,
+  Input,
+  Modal
+} from '@opentiny/vue'
 
 const validRules = {
   name: [
@@ -160,9 +165,9 @@ function toolbarButtonClickEvent({ code }) {
     case 'save': {
       basicGridRef.value.validate((valid) => {
         if (valid) {
-          alert('校验成功！')
+          Modal.alert('校验成功！')
         } else {
-          alert('校验不通过')
+          Modal.alert('校验不通过')
         }
       })
       break
diff --git a/examples/sites/demos/app/grid/grid_Example/gridValid/validation-scroll-to-col.vue b/examples/sites/demos/app/grid/grid_Example/gridValid/validation-scroll-to-col.vue
index 1f2b1f9cc5..c16330038e 100644
--- a/examples/sites/demos/app/grid/grid_Example/gridValid/validation-scroll-to-col.vue
+++ b/examples/sites/demos/app/grid/grid_Example/gridValid/validation-scroll-to-col.vue
@@ -24,8 +24,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar, Input } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Input, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -169,9 +168,9 @@ export default {
         case 'save': {
           this.$refs.basicGrid.validate((valid) => {
             if (valid) {
-              alert('校验成功！')
+              Modal.alert('校验成功！')
             } else {
-              alert('校验不通过')
+              Modal.alert('校验不通过')
             }
           })
           break
diff --git a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/footer-menu-composition-api.vue b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/footer-menu-composition-api.vue
index 07a54986de..6537ed8b69 100644
--- a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/footer-menu-composition-api.vue
+++ b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/footer-menu-composition-api.vue
@@ -24,7 +24,6 @@
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const bodyMenus = ref([
   [
@@ -198,7 +197,7 @@ function contextMenuClickEvent({ menu, row, column }) {
       }
       break
     default:
-      alert(`点击了 ${menu.name} 选项`)
+      Modal.alert(`点击了 ${menu.name} 选项`)
   }
 }
 </script>
diff --git a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/footer-menu.vue b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/footer-menu.vue
index a75ec71dd8..0e6027498d 100644
--- a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/footer-menu.vue
+++ b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/footer-menu.vue
@@ -23,7 +23,6 @@
 
 <script lang="jsx">
 import { Grid, GridColumn, Modal } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -204,7 +203,7 @@ export default {
           }
           break
         default:
-          alert(`点击了 ${menu.name} 选项`)
+          Modal.alert(`点击了 ${menu.name} 选项`)
       }
     }
   }
diff --git a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/header-menu-composition-api.vue b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/header-menu-composition-api.vue
index 9b79881f16..185a7fac98 100644
--- a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/header-menu-composition-api.vue
+++ b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/header-menu-composition-api.vue
@@ -21,7 +21,6 @@
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const headerMenus = ref([
   [
@@ -155,7 +154,7 @@ function contextMenuClickEvent({ menu, row, column }) {
       }
       break
     default:
-      alert(`点击了 ${menu.name} 选项`)
+      Modal.alert(`点击了 ${menu.name} 选项`)
   }
 }
 </script>
diff --git a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/header-menu.vue b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/header-menu.vue
index c587511398..4ea23983ea 100644
--- a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/header-menu.vue
+++ b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/header-menu.vue
@@ -20,7 +20,6 @@
 
 <script lang="jsx">
 import { Grid, GridColumn, Modal } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -163,7 +162,7 @@ export default {
           }
           break
         default:
-          alert(`点击了 ${menu.name} 选项`)
+          Modal.alert(`点击了 ${menu.name} 选项`)
       }
     }
   }
diff --git a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/menu-permissions-composition-api.vue b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/menu-permissions-composition-api.vue
index 813ac5fdc9..86f9d76c84 100644
--- a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/menu-permissions-composition-api.vue
+++ b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/menu-permissions-composition-api.vue
@@ -27,7 +27,6 @@
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
 import { IconCopy } from '@opentiny/vue-icon'
-import { alert } from '@opentiny/vue-modal'
 
 const bodyMenus = ref([
   [
@@ -254,7 +253,7 @@ function contextMenuClickEvent({ menu, row, column }) {
       }
       break
     default:
-      alert(`点击了 ${menu.name} 选项`)
+      Modal.alert(`点击了 ${menu.name} 选项`)
   }
 }
 </script>
diff --git a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/menu-permissions.vue b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/menu-permissions.vue
index ff9b6c0f88..1cede5a044 100644
--- a/examples/sites/demos/app/grid/grid_Example/shortcutMenu/menu-permissions.vue
+++ b/examples/sites/demos/app/grid/grid_Example/shortcutMenu/menu-permissions.vue
@@ -26,7 +26,6 @@
 <script lang="jsx">
 import { Grid, GridColumn, Modal } from '@opentiny/vue'
 import { IconCopy } from '@opentiny/vue-icon'
-import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -260,7 +259,7 @@ export default {
           }
           break
         default:
-          alert(`点击了 ${menu.name} 选项`)
+          Modal.alert(`点击了 ${menu.name} 选项`)
       }
     }
   }
diff --git a/examples/sites/demos/app/grid/slot/buttons-slot-composition-api.vue b/examples/sites/demos/app/grid/slot/buttons-slot-composition-api.vue
index 3eb280964b..b8300019f2 100644
--- a/examples/sites/demos/app/grid/slot/buttons-slot-composition-api.vue
+++ b/examples/sites/demos/app/grid/slot/buttons-slot-composition-api.vue
@@ -31,8 +31,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
-import { Modal } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -118,19 +117,19 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        alert('请至少选中一条记录')
+        Modal.alert('请至少选中一条记录')
       }
       $grid.removeSelecteds()
       break
     }
     case 'getDelete': {
       const removeRecords = $grid.getRemoveRecords() // 获取删除的数据
-      alert('获取删除的数据' + JSON.stringify(removeRecords))
+      Modal.alert('获取删除的数据' + JSON.stringify(removeRecords))
       break
     }
     case 'save': {
       if (!updateData.length && !insertData.length && !removeData.length) {
-        alert('没有修改记录')
+        Modal.alert('没有修改记录')
       } else {
         Modal.message({
           message: '点击保存触发, 新增的数据',
@@ -144,7 +143,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'getRecordset': {
       const records = $grid.getRecordset()
-      alert('增删改记录集合：' + JSON.stringify(records))
+      Modal.alert('增删改记录集合：' + JSON.stringify(records))
       break
     }
   }
diff --git a/examples/sites/demos/app/grid/slot/buttons-slot.vue b/examples/sites/demos/app/grid/slot/buttons-slot.vue
index b1e1177646..7e62d73625 100644
--- a/examples/sites/demos/app/grid/slot/buttons-slot.vue
+++ b/examples/sites/demos/app/grid/slot/buttons-slot.vue
@@ -30,8 +30,7 @@
 </template>
 
 <script>
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
-import { Modal } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -126,19 +125,19 @@ export default {
         }
         case 'delete': {
           if (data.length === 0) {
-            alert('请至少选中一条记录')
+            Modal.alert('请至少选中一条记录')
           }
           $grid.removeSelecteds()
           break
         }
         case 'getDelete': {
           const removeRecords = $grid.getRemoveRecords() // 获取删除的数据
-          alert('获取删除的数据' + JSON.stringify(removeRecords))
+          Modal.alert('获取删除的数据' + JSON.stringify(removeRecords))
           break
         }
         case 'save': {
           if (!updateData.length && !insertData.length && !removeData.length) {
-            alert('没有修改记录')
+            Modal.alert('没有修改记录')
           } else {
             Modal.message({
               message: '点击保存触发, 新增的数据',
@@ -152,7 +151,7 @@ export default {
         }
         case 'getRecordset': {
           const records = $grid.getRecordset()
-          alert('增删改记录集合：' + JSON.stringify(records))
+          Modal.alert('增删改记录集合：' + JSON.stringify(records))
           break
         }
       }
diff --git a/examples/sites/demos/app/grid/tiny-first-menu/copy-row-data-composition-api.vue b/examples/sites/demos/app/grid/tiny-first-menu/copy-row-data-composition-api.vue
index 3753a45ddd..59332826fe 100644
--- a/examples/sites/demos/app/grid/tiny-first-menu/copy-row-data-composition-api.vue
+++ b/examples/sites/demos/app/grid/tiny-first-menu/copy-row-data-composition-api.vue
@@ -31,8 +31,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
 
 const toolbarButtons = ref([
   {
@@ -91,7 +90,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
   switch (code) {
     case 'copy': {
       if (data.length === 0) {
-        message({ message: '请至少选中一条记录', status: 'info' })
+        Modal.message({ message: '请至少选中一条记录', status: 'info' })
       }
 
       data.forEach((item) => {
diff --git a/examples/sites/demos/app/grid/tiny-first-menu/copy-row-data.vue b/examples/sites/demos/app/grid/tiny-first-menu/copy-row-data.vue
index 1f91ecea08..b5bacc2ce3 100644
--- a/examples/sites/demos/app/grid/tiny-first-menu/copy-row-data.vue
+++ b/examples/sites/demos/app/grid/tiny-first-menu/copy-row-data.vue
@@ -30,8 +30,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
+import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -100,7 +99,7 @@ export default {
       switch (code) {
         case 'copy': {
           if (data.length === 0) {
-            message({ message: '请至少选中一条记录', status: 'info' })
+            Modal.message({ message: '请至少选中一条记录', status: 'info' })
           }
 
           data.forEach((item) => {
diff --git a/examples/sites/demos/app/grid/tiny-first-menu/get-row-method-composition-api.vue b/examples/sites/demos/app/grid/tiny-first-menu/get-row-method-composition-api.vue
index 5bb65fd5b9..db660952a2 100644
--- a/examples/sites/demos/app/grid/tiny-first-menu/get-row-method-composition-api.vue
+++ b/examples/sites/demos/app/grid/tiny-first-menu/get-row-method-composition-api.vue
@@ -19,8 +19,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const tableData = ref([
   {
@@ -72,7 +71,7 @@ const instance = getCurrentInstance()
 function getCurrentRow(hideMessage) {
   const data = theGridRef.value.getCurrentRow()
 
-  !hideMessage && alert(`当前行数据是：${JSON.stringify(data)}`)
+  !hideMessage && Modal.alert(`当前行数据是：${JSON.stringify(data)}`)
 
   return data
 }
@@ -80,27 +79,27 @@ function getCurrentRow(hideMessage) {
 function getRadioRow() {
   const data = theGridRef.value.getRadioRow()
 
-  alert(`单选选中行数据是：${JSON.stringify(data)}`)
+  Modal.alert(`单选选中行数据是：${JSON.stringify(data)}`)
 }
 
 function getRowIndex() {
   const row = getCurrentRow(true)
   const data = theGridRef.value.getRowIndex(row)
 
-  alert(`当前选中行号是：${JSON.stringify(data)}`)
+  Modal.alert(`当前选中行号是：${JSON.stringify(data)}`)
 }
 
 function getRowById() {
   const row = getCurrentRow(true) || {}
   const data = theGridRef.value.getRowById(row._RID)
 
-  alert(`根据 rowId 获取的当前行：${JSON.stringify(data)}`)
+  Modal.alert(`根据 rowId 获取的当前行：${JSON.stringify(data)}`)
 }
 
 function getRowNode() {
   const tr = instance.vnode.el.querySelector('.tiny-grid-body__row')
   const data = theGridRef.value.getRowNode(tr)
 
-  alert(`根据 tr 元素获取对应的 row 信息：${JSON.stringify(data)}`)
+  Modal.alert(`根据 tr 元素获取对应的 row 信息：${JSON.stringify(data)}`)
 }
 </script>
diff --git a/examples/sites/demos/app/grid/tiny-first-menu/get-row-method.vue b/examples/sites/demos/app/grid/tiny-first-menu/get-row-method.vue
index 2f595fcbba..e5671e62ea 100644
--- a/examples/sites/demos/app/grid/tiny-first-menu/get-row-method.vue
+++ b/examples/sites/demos/app/grid/tiny-first-menu/get-row-method.vue
@@ -18,8 +18,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Button } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid, GridColumn, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -79,32 +78,32 @@ export default {
     getCurrentRow(hideMessage) {
       const data = this.$refs.theGrid.getCurrentRow()
 
-      !hideMessage && alert(`当前行数据是：${JSON.stringify(data)}`)
+      !hideMessage && Modal.alert(`当前行数据是：${JSON.stringify(data)}`)
 
       return data
     },
     getRadioRow() {
       const data = this.$refs.theGrid.getRadioRow()
 
-      alert(`单选选中行数据是：${JSON.stringify(data)}`)
+      Modal.alert(`单选选中行数据是：${JSON.stringify(data)}`)
     },
     getRowIndex() {
       const row = this.getCurrentRow(true)
       const data = this.$refs.theGrid.getRowIndex(row)
 
-      alert(`当前选中行号是：${JSON.stringify(data)}`)
+      Modal.alert(`当前选中行号是：${JSON.stringify(data)}`)
     },
     getRowById() {
       const row = this.getCurrentRow(true) || {}
       const data = this.$refs.theGrid.getRowById(row._RID)
 
-      alert(`根据 rowId 获取的当前行：${JSON.stringify(data)}`)
+      Modal.alert(`根据 rowId 获取的当前行：${JSON.stringify(data)}`)
     },
     getRowNode() {
       const tr = this.$el.querySelector('.tiny-grid-body__row')
       const data = this.$refs.theGrid.getRowNode(tr)
 
-      alert(`根据 tr 元素获取对应的 row 信息：${JSON.stringify(data)}`)
+      Modal.alert(`根据 tr 元素获取对应的 row 信息：${JSON.stringify(data)}`)
     }
   }
 }
diff --git a/examples/sites/demos/app/grid/tiny-first-menu/insert-delete-update-composition-api.vue b/examples/sites/demos/app/grid/tiny-first-menu/insert-delete-update-composition-api.vue
index 6502ccf48f..f1a7040d9f 100644
--- a/examples/sites/demos/app/grid/tiny-first-menu/insert-delete-update-composition-api.vue
+++ b/examples/sites/demos/app/grid/tiny-first-menu/insert-delete-update-composition-api.vue
@@ -35,7 +35,6 @@
 <script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as TinyGridToolbar, Modal } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 const toolbarButtons = ref([
   {
@@ -127,7 +126,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        alert('请至少选中一条记录')
+        Modal.alert('请至少选中一条记录')
       }
       $grid.removeSelecteds()
       break
@@ -138,7 +137,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'save': {
       if (!updateData.length && !insertData.length) {
-        alert('没有修改记录')
+        Modal.alert('没有修改记录')
       } else {
         Modal.message({
           message: '点击保存触发, 新增的数据',
@@ -152,7 +151,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'getRecordset': {
       const records = $grid.getRecordset()
-      alert('增删改记录集合：' + JSON.stringify(records))
+      Modal.alert('增删改记录集合：' + JSON.stringify(records))
       break
     }
   }
diff --git a/examples/sites/demos/app/grid/tiny-first-menu/insert-delete-update.vue b/examples/sites/demos/app/grid/tiny-first-menu/insert-delete-update.vue
index 72d4e8b30b..fa37fafef8 100644
--- a/examples/sites/demos/app/grid/tiny-first-menu/insert-delete-update.vue
+++ b/examples/sites/demos/app/grid/tiny-first-menu/insert-delete-update.vue
@@ -34,7 +34,6 @@
 
 <script>
 import { Grid, GridColumn, GridToolbar, Modal } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -135,7 +134,7 @@ export default {
         }
         case 'delete': {
           if (data.length === 0) {
-            alert('请至少选中一条记录')
+            Modal.alert('请至少选中一条记录')
           }
           $grid.removeSelecteds()
           break
@@ -146,7 +145,7 @@ export default {
         }
         case 'save': {
           if (!updateData.length && !insertData.length) {
-            alert('没有修改记录')
+            Modal.alert('没有修改记录')
           } else {
             Modal.message({
               message: '点击保存触发, 新增的数据',
@@ -160,7 +159,7 @@ export default {
         }
         case 'getRecordset': {
           const records = $grid.getRecordset()
-          alert('增删改记录集合：' + JSON.stringify(records))
+          Modal.alert('增删改记录集合：' + JSON.stringify(records))
           break
         }
       }
diff --git a/examples/sites/demos/app/grid/toolbar/toolbar-op-config-composition-api.vue b/examples/sites/demos/app/grid/toolbar/toolbar-op-config-composition-api.vue
index b52be3d6f9..9022a32870 100644
--- a/examples/sites/demos/app/grid/toolbar/toolbar-op-config-composition-api.vue
+++ b/examples/sites/demos/app/grid/toolbar/toolbar-op-config-composition-api.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, Pager, GridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid as TinyGrid, Pager, GridToolbar, Modal } from '@opentiny/vue'
 
 const op = ref({
   seqSerial: true,
@@ -183,7 +182,7 @@ function toolbarButtonClickEvent({ code, $grid }) {
       break
     case 'copy': {
       if (data.length === 0) {
-        alert('请至少选中一条记录')
+        Modal.alert('请至少选中一条记录')
       }
       data.forEach((item) => {
         delete item._RID
@@ -197,13 +196,13 @@ function toolbarButtonClickEvent({ code, $grid }) {
     }
     case 'delete': {
       if (data.length === 0) {
-        alert('请至少选中一条记录')
+        Modal.alert('请至少选中一条记录')
       }
       break
     }
     case 'save': {
       if (update.length === 0) {
-        alert('没有修改记录')
+        Modal.alert('没有修改记录')
       }
       break
     }
diff --git a/examples/sites/demos/app/grid/toolbar/toolbar-op-config.vue b/examples/sites/demos/app/grid/toolbar/toolbar-op-config.vue
index 04beb80b65..bf5f2a9e64 100644
--- a/examples/sites/demos/app/grid/toolbar/toolbar-op-config.vue
+++ b/examples/sites/demos/app/grid/toolbar/toolbar-op-config.vue
@@ -3,8 +3,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, Pager, GridToolbar } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
+import { Grid, Pager, GridToolbar, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -188,7 +187,7 @@ export default {
           break
         case 'copy': {
           if (data.length === 0) {
-            alert('请至少选中一条记录')
+            Modal.alert('请至少选中一条记录')
           }
           data.forEach((item) => {
             delete item._RID
@@ -202,13 +201,13 @@ export default {
         }
         case 'delete': {
           if (data.length === 0) {
-            alert('请至少选中一条记录')
+            Modal.alert('请至少选中一条记录')
           }
           break
         }
         case 'save': {
           if (update.length === 0) {
-            alert('没有修改记录')
+            Modal.alert('没有修改记录')
           }
           break
         }
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index 415b83fac0..f964d5935a 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -107,6 +107,18 @@ const loadFileCode = async ({ cmpId, fileName, apiMode }) => {
 onMounted(() => {
   // 初始加载,有分享则加载分享，否则加载默认版本的默认文件
   if (shareData.length === 2) {
+    const demoFile = Object.values(store.state.files).find(
+      (file) =>
+        file.filename.startsWith('src/') &&
+        file.filename.endsWith('.vue') &&
+        file.filename !== 'src/App.vue' &&
+        file.filename !== 'src/PlaygroundMain.vue'
+    )
+    if (demoFile) {
+      store.state.mainFile = demoFile.filename
+      store.state.activeFile = demoFile
+    }
+
     versionChange(shareData[0])
   } else {
     const searchObj = new URLSearchParams(location.search)