From 175819bd6cdbbabc37fa6899fdcdc8873ae70268 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Sat, 19 Aug 2023 19:38:25 -0700
Subject: [PATCH 1/2] fix(playground):  fix process.env \ changeVersion
 \sortablejs  bugs

---
 examples/sites/index.html          |  1 +
 examples/sites/md.extend.config.js | 36 ++++--------------------
 examples/sites/package.json        |  2 +-
 examples/sites/playground/App.vue  | 44 ++++++++++++------------------
 examples/sites/vite.config.js      |  3 --
 5 files changed, 26 insertions(+), 60 deletions(-)

diff --git a/examples/sites/index.html b/examples/sites/index.html
index d8e4ed2d82..7aa83d80b1 100644
--- a/examples/sites/index.html
+++ b/examples/sites/index.html
@@ -11,6 +11,7 @@
     <script type="module">
       window.PUBLIC_URL = import.meta.env.BASE_URL
       window.DEPLOY_URL = ''
+      window.process = {env:{}}
     </script>
   </head>
 
diff --git a/examples/sites/md.extend.config.js b/examples/sites/md.extend.config.js
index b47b45cee6..8068409031 100644
--- a/examples/sites/md.extend.config.js
+++ b/examples/sites/md.extend.config.js
@@ -18,35 +18,11 @@ import md_anchor from 'markdown-it-anchor'
 
 export const MdExt = [md_emoji, md_sub, md_sup, md_mark]
 
-// 自定义container
-function createContainer(klass) {
-  return [
-    md_container,
-    klass,
-    {
-      render(tokens, idx) {
-        const token = tokens[idx]
-        const info = token.info.trim().slice(klass.length).trim() || ''
-        if (token.nesting === 1) {
-          return `<div class="${klass} custom-block"><p class="custom-block-title">${info}</p>\n`
-        } else {
-          return `</div>\n`
-        }
-      }
-    }
-  ]
-}
-
 export function mdInstall(md) {
-  md.use(md_prism, { plugins: ['line-highlight'] })
-    .use(...createContainer('tip'))
-    .use(...createContainer('info'))
-    .use(...createContainer('warning'))
-    .use(...createContainer('danger'))
-    .use(md_anchor, {
-      permalink: true,
-      permalinkBefore: true,
-      permalinkSymbol: '',
-      slugify: (s) => encodeURIComponent(s)
-    })
+  md.use(md_prism, { plugins: ['line-highlight'] }).use(md_anchor, {
+    permalink: true,
+    permalinkBefore: true,
+    permalinkSymbol: '',
+    slugify: (s) => encodeURIComponent(s)
+  })
 }
diff --git a/examples/sites/package.json b/examples/sites/package.json
index 960b162abe..a943c83183 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "scripts": {
     "start": "node ./scripts/copy.js && vite",
     "start:open": "node ./scripts/copy.js && vite --mode opendev",
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index 5d750ef19b..415b83fac0 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -22,7 +22,8 @@ const createImportMap = (version) => {
       '@opentiny/vue': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
       '@opentiny/vue-icon': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
       '@opentiny/vue-locale': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
-      '@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`
+      '@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`,
+      'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
     }
   }
 }
@@ -63,22 +64,18 @@ const state = reactive({
 
 function versionChange(version) {
   const importMap = createImportMap(version)
-  store.setImportMap(importMap)
+  store.state.files['import-map.json'] = new File('', JSON.stringify(importMap))
 
-  // 分享加载时，iframe并不存在
-  if (!document.querySelector('iframe')) return
+  setTimeout(() => {
+    if (!document.querySelector('iframe')) return
 
-  const iframeWin = document.querySelector('iframe').contentWindow
-  const styleDom = iframeWin.document.getElementById('tiny-theme')
-  if (styleDom) {
-    styleDom.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
-  } else {
+    const iframeWin = document.querySelector('iframe').contentWindow
     const link = iframeWin.document.createElement('link')
     link.id = 'tiny-theme'
     link.rel = 'stylesheet'
     link.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
     iframeWin.document.head.append(link)
-  }
+  }, 300)
 }
 
 function getDemoName(name, apiMode) {
@@ -92,7 +89,7 @@ const getDemoCode = async ({ cmpId, fileName, apiMode }) => {
     .then((code) => {
       return code
     })
-    .catch((error) => {
+    .catch(() => {
       return `${demoName}示例资源不存在，请检查文件名是否正确？`
     })
 
@@ -107,23 +104,18 @@ const loadFileCode = async ({ cmpId, fileName, apiMode }) => {
   versionChange(latestVersion)
 }
 
-// 初始加载,有分享则加载分享，否则加载默认版本的默认文件
-if (shareData.length !== 2) {
-  const searchObj = new URLSearchParams(location.search)
-  const fileName = searchObj.get('fileName')
-  const cmpId = searchObj.get('cmpId')
-  const apiMode = searchObj.get('apiMode')
-  if (fileName && cmpId && apiMode) {
-    loadFileCode({ cmpId, fileName, apiMode })
-  }
-}
-
 onMounted(() => {
+  // 初始加载,有分享则加载分享，否则加载默认版本的默认文件
   if (shareData.length === 2) {
-    // 此时 iframe 插入到dom中，内部的html还未加载，所以延时处理
-    setTimeout(() => {
-      versionChange(shareData[0])
-    }, 100)
+    versionChange(shareData[0])
+  } else {
+    const searchObj = new URLSearchParams(location.search)
+    const fileName = searchObj.get('fileName')
+    const cmpId = searchObj.get('cmpId')
+    const apiMode = searchObj.get('apiMode')
+    if (fileName && cmpId && apiMode) {
+      loadFileCode({ cmpId, fileName, apiMode })
+    }
   }
 })
 
diff --git a/examples/sites/vite.config.js b/examples/sites/vite.config.js
index 29b90c81fb..ae61fd480e 100644
--- a/examples/sites/vite.config.js
+++ b/examples/sites/vite.config.js
@@ -51,9 +51,6 @@ export default defineConfig((config) => {
       }),
       Unocss(UnoCssConfig)
     ],
-    define: {
-      'process.env': {}
-    },
     optimizeDeps: getOptimizeDeps(3),
     build: {
       rollupOptions: {

From f59cae19bb55dc87e2095c526d7a0dcdd6fa4318 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Mon, 21 Aug 2023 19:13:15 -0700
Subject: [PATCH 2/2] fix:  fix demo import vue-modal; fix playground share

---
 .../app/alert/close-text-composition-api.vue  |  5 ++---
 examples/sites/demos/app/alert/close-text.vue |  5 ++---
 .../app/anchor/on-change-composition-api.vue  |  5 ++---
 examples/sites/demos/app/anchor/on-change.vue |  5 ++---
 .../dept/before-confirm-composition-api.vue   |  5 ++---
 .../sites/demos/app/dept/before-confirm.vue   |  5 ++---
 .../abort-quest-composition-api.vue           |  5 ++---
 .../demos/app/file-upload/abort-quest.vue     |  5 ++---
 .../custom-prefix-composition-api.vue         |  7 +++----
 .../demos/app/file-upload/custom-prefix.vue   |  7 +++----
 .../custom-upload-request-composition-api.vue |  5 ++---
 .../app/file-upload/custom-upload-request.vue |  5 ++---
 .../drag-upload-composition-api.vue           |  5 ++---
 .../demos/app/file-upload/drag-upload.vue     |  5 ++---
 .../jalor-request-composition-api.vue         |  5 ++---
 .../demos/app/file-upload/jalor-request.vue   |  5 ++---
 .../max-file-count-composition-api.vue        |  5 ++---
 .../demos/app/file-upload/max-file-count.vue  |  5 ++---
 .../prevent-delete-file-composition-api.vue   |  5 ++---
 .../app/file-upload/prevent-delete-file.vue   |  5 ++---
 .../prevent-upload-file-composition-api.vue   |  5 ++---
 .../app/file-upload/prevent-upload-file.vue   |  5 ++---
 .../upload-events-composition-api.vue         | 19 +++++++++----------
 .../demos/app/file-upload/upload-events.vue   | 19 +++++++++----------
 .../upload-request-composition-api.vue        |  5 ++---
 .../demos/app/file-upload/upload-request.vue  |  5 ++---
 .../app/form/display-only-composition-api.vue |  3 +--
 .../sites/demos/app/form/display-only.vue     |  3 +--
 .../frequently-used-form-composition-api.vue  |  6 +++---
 .../demos/app/form/frequently-used-form.vue   |  5 ++---
 .../no-validate-to-add-composition-api.vue    |  8 ++++----
 .../demos/app/form/no-validate-to-add.vue     |  8 ++++----
 .../demos/app/form/size-composition-api.vue   |  6 +++---
 examples/sites/demos/app/form/size.vue        |  5 ++---
 ...bar-button-click-event-composition-api.vue | 11 +++++------
 .../grid/event/toolbar-button-click-event.vue |  3 +--
 ...fore-submit-validation-composition-api.vue |  7 +++----
 .../gridValid/before-submit-validation.vue    |  7 +++----
 .../select-validation-composition-api.vue     |  9 ++++-----
 .../gridValid/select-validation.vue           |  9 ++++-----
 ...lidation-scroll-to-col-composition-api.vue | 13 +++++++++----
 .../gridValid/validation-scroll-to-col.vue    |  7 +++----
 .../footer-menu-composition-api.vue           |  3 +--
 .../grid_Example/shortcutMenu/footer-menu.vue |  3 +--
 .../header-menu-composition-api.vue           |  3 +--
 .../grid_Example/shortcutMenu/header-menu.vue |  3 +--
 .../menu-permissions-composition-api.vue      |  3 +--
 .../shortcutMenu/menu-permissions.vue         |  3 +--
 .../slot/buttons-slot-composition-api.vue     | 11 +++++------
 .../demos/app/grid/slot/buttons-slot.vue      | 11 +++++------
 .../copy-row-data-composition-api.vue         |  5 ++---
 .../grid/tiny-first-menu/copy-row-data.vue    |  5 ++---
 .../get-row-method-composition-api.vue        | 13 ++++++-------
 .../grid/tiny-first-menu/get-row-method.vue   | 13 ++++++-------
 .../insert-delete-update-composition-api.vue  |  7 +++----
 .../tiny-first-menu/insert-delete-update.vue  |  7 +++----
 .../toolbar-op-config-composition-api.vue     |  9 ++++-----
 .../app/grid/toolbar/toolbar-op-config.vue    |  9 ++++-----
 examples/sites/playground/App.vue             | 12 ++++++++++++
 59 files changed, 178 insertions(+), 214 deletions(-)

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)