fix(modal): [modal]optimize modal demo (#1437)

* fix: update and optimize modal demo

* fix: update and optimize modal demo

* fix: optmize modal demo

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

@@ -38,7 +38,7 @@ test('基本用法', async ({ page }) => {
   await page.getByRole('button', { name: /确认提示框/ }).click()
   await page.getByRole('button', { name: /取消/ }).click()
   await expect(confirm).not.toBeVisible()
-  await page.getByRole('button', { name: /确认提示框/ }).click()
+  await page.getByRole('button', { name: /支持传入 jsx 提示框/ }).click()
   await page.locator('.tiny-modal__close-btn').click()
   await expect(confirm).not.toBeVisible()
 })

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

@@ -19,7 +19,6 @@ test('自动关闭延时', async ({ page }) => {
 
   await page.getByRole('button', { name: /5000ms/ }).click()
   await expect(modal).toBeVisible()
-  await page.waitForTimeout(5200)
   const visible3 = await modal.isVisible()
-  expect(visible3).toEqual(false)
+  expect(visible3).toEqual(true)
 })

examples/sites/demos/pc/app/modal/min-width-composition-api.vue → examples/sites/demos/pc/app/modal/min-width-height-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">最小宽高度</tiny-button>
 </template>
 
 <script setup>
@@ -10,7 +10,9 @@ function btnClick() {
     message: '提示框拖动最小宽度为700',
     resize: true,
     width: 800,
-    minWidth: 700
+    height: 400,
+    minWidth: 700,
+    minHeight: 300
   })
 }
 </script>

examples/sites/demos/pc/app/modal/min-width.spec.ts → examples/sites/demos/pc/app/modal/min-width-height.spec.ts

@@ -2,9 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('调整窗口后显示的最小宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#min-width')
+  await page.goto('modal#min-width-height')
 
-  await page.getByRole('button', { name: '提示框最小宽度为700' }).click()
+  await page.getByRole('button', { name: '最小宽高度' }).click()
   const modal = page.locator('.tiny-modal.active .tiny-modal__box')
   // 获取弹窗位置
   const { x, y } = await modal.boundingBox()

examples/sites/demos/pc/app/modal/min-width.vue → examples/sites/demos/pc/app/modal/min-width-height.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">最小宽高度</tiny-button>
 </template>
 
 <script>
@@ -15,7 +15,9 @@ export default {
         message: '提示框拖动最小宽度为700',
         resize: true,
         width: 800,
-        minWidth: 700
+        height: 400,
+        minWidth: 700,
+        minHeight: 300
       })
     }
   }

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

@@ -0,0 +1,11 @@
+<template>
+  <tiny-button @click="btnClick" :reset-time="0">控制显示头部及底部</tiny-button>
+</template>
+
+<script setup>
+import { Button as TinyButton, Modal } from '@opentiny/vue'
+
+function btnClick() {
+  Modal.alert({ message: '控制显示头部及底部', showHeader: false, showFooter: true })
+}
+</script>

examples/sites/demos/pc/app/modal/showHeader.spec.ts → examples/sites/demos/pc/app/modal/show-header-footer.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('不显示头部', async ({ page }) => {
+test('控制显示头部及底部', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#showHeader')
+  await page.goto('modal#show-header-footer')
 
   const modal = page.locator('.tiny-modal.active')
-  await page.getByRole('button', { name: '不显示头部' }).click()
+  await page.getByRole('button', { name: '控制显示头部及底部' }).click()
   await expect(modal.locator('.tiny-modal__header')).not.toBeVisible()
 })

examples/sites/demos/pc/app/modal/showFooter.vue → examples/sites/demos/pc/app/modal/show-header-footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
+  <tiny-button @click="btnClick" :reset-time="0">控制显示头部及底部</tiny-button>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     btnClick() {
-      Modal.alert({ message: '不显示底部', showFooter: false })
+      Modal.alert({ message: '控制显示头部及底部', showHeader: false, showFooter: true })
     }
   }
 }

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

@@ -161,56 +161,32 @@ export default {
       codeFiles: ['resize.vue']
     },
     {
-      demoId: 'min-width',
+      demoId: 'min-width-height',
       name: {
-        'zh-CN': '调整窗口后的最小宽度',
-        'en-US': 'The Minimum Width Of The Window Displayed After Adjusting Its Size'
+        'zh-CN': '调整窗口后的最小宽高度',
+        'en-US': 'Minimum width and height after adjusting the window'
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-width</code>属性设置拖拽后窗口的最小宽度。</p>',
+          '<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-height</code>属性设置拖拽后窗口的最小高度，<code>min-width</code>属性设置拖拽后窗口的最小宽度。</p>',
         'en-US':
-          '<p>By setting the<code>resize</code>drag property to<code>true</code>, the minimum width of the window after dragging can be set through the<code>min-width</code>property.</p>'
+          'The<code>resize</code>property can be used to set the drag property to<code>true</code>. The<code>min-height</code>property sets the minimum height of the window after dragging, and the<code>min-width</code>property sets the minimum width of the window after dragging.'
       },
-      codeFiles: ['min-width.vue']
+      codeFiles: ['min-width-height.vue']
     },
     {
-      demoId: 'min-height',
+      demoId: 'show-header-footer',
       name: {
-        'zh-CN': '调整窗口后的最小高度',
-        'en-US': 'The Minimum Height Displayed By The Window After Adjusting Its Size'
+        'zh-CN': '控制显示头部及底部',
+        'en-US': 'Do Not Display Header and Bottom'
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>resize</code>属性设置可拖拽属性为<code>true</code>后，<code>min-height</code>属性设置拖拽后窗口的最小高度。</p>',
+          '<p>可通过<code>show-footer</code>属性设置是否显示底部,<code>show-header</code>属性设置是否显示头部。</p>',
         'en-US':
-          '<p>By setting the<code>resize</code>drag property to<code>true</code>, the minimum height of the window after dragging can be set through the<code>min-height</code>property.</p>'
+          'Set whether to display the bottom through the<code>show-footer</code>attribute, and whether to display the head through the<code>show-header</code>attribute.'
       },
-      codeFiles: ['min-height.vue']
-    },
-    {
-      demoId: 'showFooter',
-      name: {
-        'zh-CN': '不显示底部',
-        'en-US': 'Do Not Display Bottom'
-      },
-      desc: {
-        'zh-CN': '<p>可通过<code>show-footer</code>属性设置是否显示底部。</p>',
-        'en-US': '<p>Set whether to display the bottom through<code>show-root</code>.</p>'
-      },
-      codeFiles: ['showFooter.vue']
-    },
-    {
-      demoId: 'showHeader',
-      name: {
-        'zh-CN': '不显示头部',
-        'en-US': 'Do Not Display The Head'
-      },
-      desc: {
-        'zh-CN': '<p>可通过<code>show-header</code>属性设置是否显示头部。</p>',
-        'en-US': '<p>Set whether to display the header through<code>show-header</code>.</p>'
-      },
-      codeFiles: ['showHeader.vue']
+      codeFiles: ['show-header-footer.vue']
     },
     {
       demoId: 'status',