docs(modal/dialog-box): [modal,dialog-box] update docs (#1287)

* fix(docs): update modal/dialog-box docs

* fix(dialog-box/modal): tiny-docs

* fix: update check tips

examples/sites/demos/pc/app/dialog-box/basic-usage-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility">弹出 Dialog</tiny-button>
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/basic-usage.spec.ts

@@ -4,22 +4,22 @@ test('dialogBox 基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#basic-usage')
 
-  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await page.getByRole('button', { name: '确定' }).click()
 
-  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await page.getByRole('button', { name: '取消' }).click()
 
   // 点击 x 图标
-  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await page.getByLabel('Close').click()
 
   // 点击遮罩时，关闭dialogBox
-  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await page.locator('.tiny-dialog-box__wrapper').click()
 
   // 按 ESC 键，关闭dialogBox
-  await page.getByRole('button', { name: '弹出Dialog' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await page.locator('body').press('Escape')
   expect(page.locator('.tiny-dialog-box.is-center > .tiny-dialog-box__header')).toBeHidden()
 })

examples/sites/demos/pc/app/dialog-box/basic-usage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility">弹出 Dialog</tiny-button>
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/center-composition-api.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" center title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/center.spec.ts

@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 头部和底部水平居中', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#center')
-  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await page.getByText('消息').click()
   // 底部水平居中
   await expect(page.locator('.tiny-dialog-box.is-center > .tiny-dialog-box__header')).toHaveCSS('text-align', 'center')
-  await page.getByRole('button', { name: '确 定' }).click()
+  await page.getByRole('button', { name: /确 定/ }).click()
 })

examples/sites/demos/pc/app/dialog-box/center.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" center title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/close-on-click-modal-composition-api.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/close-on-click-modal.spec.ts

@@ -5,7 +5,7 @@ test('dialogBox 点击遮罩时不关闭弹窗', async ({ page }) => {
   await page.goto('dialog-box#close-on-click-modal')
   const dialogBox = page.locator('.tiny-dialog-box')
   const mask = page.locator('.tiny-dialog-box__wrapper')
-  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await expect(dialogBox).toBeVisible()
   await mask.click()
   await expect(dialogBox).toBeVisible()

examples/sites/demos/pc/app/dialog-box/close-on-click-modal.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/close-on-press-escape-composition-api.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box :visible="boxVisibility" :close-on-press-escape="false" title="消息" width="30%" @close="close">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/close-on-press-escape.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 禁用 ESC 关闭', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#close-on-press-escape')
-  const button = page.getByRole('button', { name: '弹出Dialog' })
+  const button = page.getByRole('button', { name: /Dialog/ })
   const dialogBox = page.locator('.tiny-dialog-box')
   // dialogBox弹出后，禁用 ESC 关闭
   await button.click()

examples/sites/demos/pc/app/dialog-box/close-on-press-escape.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box :visible="boxVisibility" :close-on-press-escape="false" title="消息" width="30%" @close="close">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <tiny-alert description="内容是Alert组件"></tiny-alert>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/custom-dialog-content.spec.ts

@@ -3,12 +3,12 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 自定义内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-content')
-  const button = page.getByRole('button', { name: '弹出Dialog' })
+  const button = page.getByRole('button', { name: /Dialog/ })
   const dialogBox = page.locator('.tiny-dialog-box')
   await button.click()
   await expect(dialogBox).toBeVisible()
   await page.locator('#custom-dialog-content path').nth(2).click()
   await page.waitForTimeout(300)
-  await page.getByRole('button', { name: '确 定' }).click()
+  await page.getByRole('button', { name: /确 定/ }).click()
   await expect(dialogBox).toBeHidden()
 })

examples/sites/demos/pc/app/dialog-box/custom-dialog-content.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <tiny-alert description="内容是Alert组件"></tiny-alert>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 自定义底部', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-footer')
-  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await expect(page.locator('.tiny-dialog-box__footer > div')).toHaveText('自定义footer区域')
   await page.getByLabel('Close').click()
 })

examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box 内容</span>
       <template #footer>

examples/sites/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" width="30%">
       <template #title>
         <div style="width: 80%; height: 100%; background: #dddddd">自定义title区域</div>

examples/sites/demos/pc/app/dialog-box/custom-dialog-title.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('dialogBox 自定义标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-title')
-  await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
+  await page.getByRole('button', { name: /Dialog/ }).click()
   await expect(page.locator('.tiny-dialog-box__header > div')).toHaveText('自定义title区域')
-  await page.getByRole('button', { name: '确 定' }).click()
+  await page.getByRole('button', { name: /确 定/ }).click()
 })

examples/sites/demos/pc/app/dialog-box/custom-dialog-title.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
-      >弹出 Dialog{{ boxVisibility }}</tiny-button
-    >
+    <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" width="30%">
       <template #title>
         <div style="width: 80%; height: 100%; background: #dddddd">自定义title区域</div>

examples/sites/demos/pc/app/dialog-box/dialog-top-height.spec.ts

@@ -8,8 +8,8 @@ test('dialogBox 弹窗距离顶部的高度', async ({ page }) => {
   await page.getByRole('button', { name: '显示在顶部' }).click()
   // 默认弹窗距离顶部的高度
   await expect(dialogBox.nth(0)).toHaveCSS('top', '0px')
-  await page.getByRole('button', { name: '确 定' }).click()
-  await page.getByRole('button', { name: '距离顶部300px' }).click()
+  await page.getByRole('button', { name: /确 定/ }).click()
+  await page.getByRole('button', { name: /300px/ }).click()
   // 自定义弹窗距离顶部的高度
   await expect(dialogBox.nth(1)).toHaveCSS('top', '300px')
   await page.getByRole('button', { name: 'Close' }).nth(1).click()

examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts

@@ -5,9 +5,9 @@ test('dialogBox 弹窗的宽度', async ({ page }) => {
   await page.goto('dialog-box#dialog-width')
 
   const dialogBox = page.locator('.tiny-dialog-box')
-  await page.getByRole('button', { name: '宽度30%' }).click()
+  await page.getByRole('button', { name: /30%/ }).click()
   await page.getByRole('button', { name: 'Close' }).click()
-  await page.getByRole('button', { name: '宽度60%' }).click()
+  await page.getByRole('button', { name: /60%/ }).click()
   await expect(dialogBox.nth(1)).toBeVisible()
   await page.getByRole('button', { name: '确 定' }).nth(1).click()
 })

examples/sites/demos/pc/app/modal/basic-usage-composition-api.vue

@@ -4,7 +4,7 @@
     <tiny-button @click="successClick" :reset-time="0"> 成功提示框 </tiny-button>
     <tiny-button @click="errorClick" :reset-time="0"> 失败提示框 </tiny-button>
     <tiny-button @click="confirmClick" :reset-time="0"> 确认提示框 </tiny-button>
-    <tiny-button @click="jsxClick" :reset-time="0"> 支持传入jsx 提示框 </tiny-button>
+    <tiny-button @click="jsxClick" :reset-time="0"> 支持传入 jsx 提示框 </tiny-button>
   </div>
 </template>
 
@@ -37,8 +37,8 @@ function jsxClick() {
   Modal.alert({
     message: (
       <div>
-        <button>some button</button>
-        <b>some text</b>
+        <button> some button </button>
+        <b> some text </b>
       </div>
     ),
     status: 'success'

examples/sites/demos/pc/app/modal/basic-usage.vue

@@ -4,7 +4,7 @@
     <tiny-button @click="successClick" :reset-time="0"> 成功提示框 </tiny-button>
     <tiny-button @click="errorClick" :reset-time="0"> 失败提示框 </tiny-button>
     <tiny-button @click="confirmClick" :reset-time="0"> 确认提示框 </tiny-button>
-    <tiny-button @click="jsxClick" :reset-time="0"> 支持传入jsx 提示框 </tiny-button>
+    <tiny-button @click="jsxClick" :reset-time="0"> 支持传入 jsx 提示框 </tiny-button>
   </div>
 </template>
 

examples/sites/demos/pc/app/modal/default-grid-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <tiny-button @click="visible = !visible" :reset-time="0"> 默认插槽 </tiny-button>
+    <tiny-button @click="visible = !visible" :reset-time="0">默认插槽</tiny-button>
     <tiny-modal v-model="visible" :lock-scroll="false" show-footer width="1000">
       <template #default>
         <p>test</p>

examples/sites/demos/pc/app/modal/default-grid.spec.ts

@@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('嵌套grid', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#grid')
+  await page.goto('modal#default-grid')
 
   const modal = page.locator('.tiny-modal')
   const grid = modal.locator('.tiny-grid ').first()
-  await page.getByRole('button', { name: '默认插槽' }).click()
+  await page.getByRole('button', { name: /默认插槽/ }).click()
   await expect(grid).toBeVisible()
 })

examples/sites/demos/pc/app/modal/default-grid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <tiny-button @click="visible = !visible" :reset-time="0"> 默认插槽 </tiny-button>
+    <tiny-button @click="visible = !visible" :reset-time="0">默认插槽</tiny-button>
     <tiny-modal v-model="visible" :lock-scroll="false" show-footer width="1000">
       <template #default>
         <p>test</p>

examples/sites/demos/pc/app/modal/duration-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="content">
-    <tiny-button @click="baseClick" :reset-time="0">默认3000ms后自动关闭提示框</tiny-button>
-    <tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
-    <tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
+    <tiny-button @click="baseClick" :reset-time="0">默认 3000ms 后自动关闭提示框</tiny-button>
+    <tiny-button @click="successClick" :reset-time="0">500ms 后自动关闭提示框</tiny-button>
+    <tiny-button @click="errorClick" :reset-time="0">5000ms 后自动关闭提示框</tiny-button>
   </div>
 </template>
 
@@ -10,19 +10,21 @@
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
 function baseClick() {
-  Modal.message({ message: '默认3000ms后自动关闭提示框' })
+  Modal.message({ status: 'info', message: '默认 3000ms 后自动关闭提示框' })
 }
 
 function successClick() {
   Modal.message({
-    message: '500ms后自动关闭提示框',
+    status: 'success',
+    message: '500ms 后自动关闭提示框',
     duration: '500'
   })
 }
 
 function errorClick() {
   Modal.message({
-    message: '5000ms后自动关闭提示框',
+    status: 'error',
+    message: '5000ms 后自动关闭提示框',
     duration: '5000'
   })
 }

examples/sites/demos/pc/app/modal/duration.spec.ts

@@ -5,19 +5,19 @@ test('自动关闭延时', async ({ page }) => {
   await page.goto('modal#duration')
 
   const modal = page.locator('.tiny-modal.type__message')
-  await page.getByRole('button', { name: '默认3000ms后自动关闭提示框' }).click()
+  await page.getByRole('button', { name: /3000ms/ }).click()
   await expect(modal).toBeVisible()
   await page.waitForTimeout(3200)
   const visible1 = await modal.isVisible()
   expect(visible1).toEqual(false)
 
-  await page.getByRole('button', { name: '500ms后自动关闭提示框' }).click()
+  await page.getByRole('button', { name: /500ms/ }).click()
   await expect(modal).toBeVisible()
   await page.waitForTimeout(700)
   const visible2 = await modal.isVisible()
   expect(visible2).toEqual(false)
 
-  await page.getByRole('button', { name: '5000ms后自动关闭提示框' }).click()
+  await page.getByRole('button', { name: /5000ms/ }).click()
   await expect(modal).toBeVisible()
   await page.waitForTimeout(5200)
   const visible3 = await modal.isVisible()

examples/sites/demos/pc/app/modal/duration.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="content">
-    <tiny-button @click="baseClick" :reset-time="0">默认3000ms后自动关闭提示框</tiny-button>
-    <tiny-button @click="successClick" :reset-time="0">500ms后自动关闭提示框</tiny-button>
-    <tiny-button @click="errorClick" :reset-time="0">5000ms后自动关闭提示框</tiny-button>
+    <tiny-button @click="baseClick" :reset-time="0">默认3000ms 后自动关闭提示框</tiny-button>
+    <tiny-button @click="successClick" :reset-time="0">500ms 后自动关闭提示框</tiny-button>
+    <tiny-button @click="errorClick" :reset-time="0">5000ms 后自动关闭提示框</tiny-button>
   </div>
 </template>
 
@@ -15,17 +15,19 @@ export default {
   },
   methods: {
     baseClick() {
-      Modal.message({ message: '默认3000ms后自动关闭提示框' })
+      Modal.message({ status: 'info', message: `默认3000ms 后自动关闭提示框` })
     },
     successClick() {
       Modal.message({
-        message: '500ms后自动关闭提示框',
+        status: 'success',
+        message: `500ms 后自动关闭提示框`,
         duration: '500'
       })
     },
     errorClick() {
       Modal.message({
-        message: '5000ms后自动关闭提示框',
+        status: 'console.error();',
+        message: `5000ms 后自动关闭提示框`,
         duration: '5000'
       })
     }

examples/sites/demos/pc/app/modal/event-composition-api.vue

@@ -30,26 +30,26 @@ const value3 = ref(false)
 const value4 = ref(false)
 
 function handleShow() {
-  TinyModal.message({ message: 'show 事件触发了' })
+  TinyModal.message({ status: 'info', message: 'show 事件触发了' })
 }
 
 function handleHide() {
-  TinyModal.message({ message: 'hide 事件触发了' })
+  TinyModal.message({ status: 'info', message: 'hide 事件触发了' })
 }
 
 function handleConfirm() {
-  TinyModal.message({ message: 'confirm 事件触发了' })
+  TinyModal.message({ status: 'info', message: 'confirm 事件触发了' })
 }
 
 function handleCancel() {
-  TinyModal.message({ message: 'cancel 事件触发了' })
+  TinyModal.message({ status: 'info', message: 'cancel 事件触发了' })
 }
 
 function handleClose() {
-  TinyModal.message({ message: 'close 事件触发了' })
+  TinyModal.message({ status: 'info', message: 'close 事件触发了' })
 }
 
 function handleZoom() {
-  TinyModal.message({ message: 'zoom 事件触发了' })
+  TinyModal.message({ status: 'info', message: 'zoom 事件触发了' })
 }
 </script>

examples/sites/demos/pc/app/modal/event.vue

@@ -38,22 +38,22 @@ export default {
   },
   methods: {
     handleShow() {
-      Modal.message({ message: 'show 事件触发了' })
+      Modal.message({ status: 'info', message: 'show 事件触发了' })
     },
     handleHide() {
-      Modal.message({ message: 'hide 事件触发了' })
+      Modal.message({ status: 'info', message: 'hide 事件触发了' })
     },
     handleConfirm() {
-      Modal.message({ message: 'confirm 事件触发了' })
+      Modal.message({ status: 'info', message: 'confirm 事件触发了' })
     },
     handleCancel() {
-      Modal.message({ message: 'cancel 事件触发了' })
+      Modal.message({ status: 'info', message: 'cancel 事件触发了' })
     },
     handleClose() {
-      Modal.message({ message: 'close 事件触发了' })
+      Modal.message({ status: 'info', message: 'close 事件触发了' })
     },
     handleZoom() {
-      Modal.message({ message: 'zoom 事件触发了' })
+      Modal.message({ status: 'info', message: 'zoom 事件触发了' })
     }
   }
 }

examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="content">
-    <tiny-button @click="visible = !visible" :reset-time="0">自定义脚部</tiny-button>
+    <tiny-button @click="visible = !visible" :reset-time="0">自定义底部</tiny-button>
     <tiny-modal v-model="visible" show-footer>
       <template #footer>
-        <tiny-button>自定义脚部信息</tiny-button>
+        <tiny-button>自定义底部信息</tiny-button>
       </template>
     </tiny-modal>
   </div>

examples/sites/demos/pc/app/modal/footer-slot.spec.ts

@@ -5,7 +5,7 @@ test('底部插槽', async ({ page }) => {
   await page.goto('modal#footer-slot')
 
   const modal = page.locator('.tiny-modal')
-  await page.getByRole('button', { name: '自定义脚部' }).click()
-  await expect(modal.getByRole('button', { name: '自定义脚部信息' })).toBeVisible()
-  await modal.getByRole('button', { name: '自定义脚部信息' }).click()
+  await page.getByRole('button', { name: /自定义底部/ }).click()
+  await expect(modal.getByRole('button', { name: /自定义底部信息/ })).toBeVisible()
+  await modal.getByRole('button', { name: /自定义底部信息/ }).click()
 })

examples/sites/demos/pc/app/modal/footer-slot.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="content">
-    <tiny-button @click="visible = !visible" :reset-time="0">自定义脚部</tiny-button>
+    <tiny-button @click="visible = !visible" :reset-time="0">自定义底部</tiny-button>
     <tiny-modal v-model="visible" show-footer>
       <template #footer>
-        <tiny-button>自定义脚部信息</tiny-button>
+        <tiny-button>自定义底部信息</tiny-button>
       </template>
     </tiny-modal>
   </div>

examples/sites/demos/pc/app/modal/id-composition-api.vue

@@ -6,6 +6,6 @@
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
 function btnClick() {
-  Modal.message({ message: '不允许重复点击', id: 'unique' })
+  Modal.message({ status: 'info', message: '不允许重复点击', id: 'unique' })
 }
 </script>

examples/sites/demos/pc/app/modal/id.vue

@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.message({ message: '不允许重复点击', id: 'unique' })
+      Modal.message({ status: 'info', message: '不允许重复点击', id: 'unique' })
     }
   }
 }

examples/sites/demos/pc/app/modal/top-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">距离顶部的位置为500</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">距离顶部的位置为500 px</tiny-button>
 </template>
 
 <script setup>
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
 function btnClick() {
-  Modal.message({ message: '距离顶部的位置为500', top: 500 })
+  Modal.message({ status: 'info', message: '距离顶部的位置为500 px', top: 500 })
 }
 </script>

examples/sites/demos/pc/app/modal/top.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">距离顶部的位置为500</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">距离顶部的位置为500 px</tiny-button>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.message({ message: '距离顶部的位置为500', top: 500 })
+      Modal.message({ status: 'info', message: '距离顶部的位置为500 px', top: 500 })
     }
   }
 }

examples/sites/demos/pc/app/modal/type-composition-api.vue

@@ -14,7 +14,7 @@ function alertClick() {
 }
 
 function messageClick() {
-  Modal.message('message 提示框')
+  Modal.message({ status: 'info', message: 'message 提示框' })
 }
 
 function confirmClick() {
@@ -22,7 +22,7 @@ function confirmClick() {
     Notify({
       type: 'info',
       title: '触发回调事件',
-      message: `点击${res}按钮`
+      message: `点击 ${res} 按钮`
     })
   })
 }

examples/sites/demos/pc/app/modal/type.vue

@@ -18,14 +18,14 @@ export default {
       Modal.alert('alert 弹框', '弹框')
     },
     messageClick() {
-      Modal.message('message 提示框')
+      Modal.message({ status: 'info', message: 'message 提示框' })
     },
     confirmClick() {
       Modal.confirm('您确定要删除吗？', '确定框').then((res) => {
         Notify({
           type: 'info',
           title: '触发回调事件',
-          message: `点击${res}按钮`
+          message: `点击 ${res} 按钮`
         })
       })
     }

examples/sites/demos/pc/app/modal/webdoc/modal.cn.md

@@ -4,4 +4,4 @@ title: Modal 模态框
 
 # Modal 模态框
 
-<div>Modal 模态框</div>
+<div>模态对话框。</div>

examples/sites/demos/pc/app/modal/webdoc/modal.en.md

@@ -1,7 +1,7 @@
 ---
-title: Modal modal box
+title: Modal dialog box
 ---
 
-# Modal modal box
+# Modal dialog box
 
-<div>Modal modal box</div>
+<div>Modal dialog box.</div>

examples/sites/demos/pc/app/modal/webdoc/modal.js

@@ -175,7 +175,7 @@ export default {
       'name': { 'zh-CN': '消息状态', 'en-US': 'Position From The Top' },
       'desc': {
         'zh-CN':
-          '<p>可通过<code>status</code>属性设置消息状态，可选值有<code>info</code><code>success</code><code>warning</code><code>error</code><code>loading</code>。</p>',
+          '<p>可通过<code>status</code>属性设置消息状态，可选值有<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>、<code>loading</code>。</p>',
         'en-US':
           '<p>Set the message status through<code>status</code>, with optional values including<code>info</code><code>success</code><code>warning</code><code>error</code><code>loading</code>.</p>'
       },
@@ -257,13 +257,13 @@ export default {
       'codeFiles': ['footer-slot.vue']
     },
     {
-      'demoId': 'grid',
+      'demoId': 'default-grid',
       'name': { 'zh-CN': '嵌套表格', 'en-US': 'Nested Tables' },
       'desc': {
         'zh-CN': '<p>可通过<code>#default</code>插槽设置嵌套表格组件。</p>',
         'en-US': 'Table components can be nested via <code>#default</code> slot.'
       },
-      'codeFiles': ['grid.vue']
+      'codeFiles': ['default-grid.vue']
     },
     {
       'demoId': 'event',
@@ -512,7 +512,8 @@ export default {
         },
         {
           'name': 'status',
-          'type': "'info' | 'success' | 'warning' | 'error' | 'loading'",
+          'type': 'IStatus',
+          'typeAnchorName': 'IStatus',
           'defaultValue': "'info'",
           'desc': {
             'zh-CN': "消息状态，当 type 为 'alert'、'message'、'confirm' 时有效",
@@ -648,7 +649,7 @@ export default {
             'zh-CN': '默认插槽',
             'en-US': 'Default slot'
           },
-          'demoId': 'grid'
+          'demoId': 'default-grid'
         },
         {
           'name': 'footer',
@@ -673,6 +674,13 @@ interface IModalEventParam {
   $modal: ComponentPublicInstance // Modal组件实例
 }
 `
+    },
+    {
+      name: 'IStatus',
+      type: 'type',
+      code: `
+          type IStatus = 'info' | 'success' | 'warning' | 'error' | 'loading'
+      `
     }
   ]
 }

examples/sites/demos/pc/app/modal/z-index-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">z-index的值为500</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">z-index 的值为500</tiny-button>
 </template>
 
 <script setup>
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
 function btnClick() {
-  Modal.alert({ message: 'z-index的值为500', zIndex: 500 })
+  Modal.alert({ message: 'z-index 的值为500', zIndex: 500 })
 }
 </script>

examples/sites/demos/pc/app/modal/z-index.spec.ts

@@ -5,6 +5,6 @@ test('自定义z-index', async ({ page }) => {
   await page.goto('modal#z-index')
 
   const modal = page.locator('.tiny-modal.active')
-  await page.getByRole('button', { name: 'z-index的值为500' }).click()
+  await page.getByRole('button', { name: /z-index/ }).click()
   await expect(modal).toHaveCSS('z-index', '500')
 })

examples/sites/demos/pc/app/modal/z-index.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">z-index的值为500</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">z-index 的值为500</tiny-button>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: 'z-index的值为500', zIndex: 500 })
+      Modal.alert({ message: 'z-index 的值为500', zIndex: 500 })
     }
   }
 }

packages/vue/package.json

@@ -265,4 +265,4 @@
     "build": "pnpm -w build:ui",
     "postversion": "pnpm build"
   }
-}
+}