From 990c9fb816791ab56df411bd07dee2c7f65bc63e Mon Sep 17 00:00:00 2001
From: James <72028410+James-9696@users.noreply.github.com>
Date: Wed, 28 Feb 2024 18:04:44 +0800
Subject: [PATCH] fix(modal): [modal]optimize modal demo (#1437)

* fix: update and optimize modal demo

* fix: update and optimize modal demo

* fix: optmize modal demo
---
 .../demos/pc/app/modal/basic-usage.spec.ts    |  2 +-
 .../sites/demos/pc/app/modal/duration.spec.ts |  3 +-
 .../app/modal/min-height-composition-api.vue  | 16 -------
 .../demos/pc/app/modal/min-height.spec.ts     | 21 --------
 .../sites/demos/pc/app/modal/min-height.vue   | 23 ---------
 ...e => min-width-height-composition-api.vue} |  6 ++-
 ...width.spec.ts => min-width-height.spec.ts} |  4 +-
 .../{min-width.vue => min-width-height.vue}   |  6 ++-
 .../show-header-footer-composition-api.vue    | 11 +++++
 ...der.spec.ts => show-header-footer.spec.ts} |  6 +--
 ...{showFooter.vue => show-header-footer.vue} |  4 +-
 .../app/modal/showFooter-composition-api.vue  | 11 -----
 .../demos/pc/app/modal/showFooter.spec.ts     | 10 ----
 .../app/modal/showHeader-composition-api.vue  | 11 -----
 .../sites/demos/pc/app/modal/showHeader.vue   | 18 -------
 .../sites/demos/pc/app/modal/webdoc/modal.js  | 48 +++++--------------
 16 files changed, 40 insertions(+), 160 deletions(-)
 delete mode 100644 examples/sites/demos/pc/app/modal/min-height-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/modal/min-height.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/modal/min-height.vue
 rename examples/sites/demos/pc/app/modal/{min-width-composition-api.vue => min-width-height-composition-api.vue} (64%)
 rename examples/sites/demos/pc/app/modal/{min-width.spec.ts => min-width-height.spec.ts} (84%)
 rename examples/sites/demos/pc/app/modal/{min-width.vue => min-width-height.vue} (68%)
 create mode 100644 examples/sites/demos/pc/app/modal/show-header-footer-composition-api.vue
 rename examples/sites/demos/pc/app/modal/{showHeader.spec.ts => show-header-footer.spec.ts} (56%)
 rename examples/sites/demos/pc/app/modal/{showFooter.vue => show-header-footer.vue} (50%)
 delete mode 100644 examples/sites/demos/pc/app/modal/showFooter-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/modal/showFooter.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/modal/showHeader-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/modal/showHeader.vue

diff --git a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
index c1c0225e74..c1de57474a 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
+++ b/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()
 })
diff --git a/examples/sites/demos/pc/app/modal/duration.spec.ts b/examples/sites/demos/pc/app/modal/duration.spec.ts
index 44ad597db4..a8e8d435cb 100644
--- a/examples/sites/demos/pc/app/modal/duration.spec.ts
+++ b/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)
 })
diff --git a/examples/sites/demos/pc/app/modal/min-height-composition-api.vue b/examples/sites/demos/pc/app/modal/min-height-composition-api.vue
deleted file mode 100644
index b3f56ff4a0..0000000000
--- a/examples/sites/demos/pc/app/modal/min-height-composition-api.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
-</template>
-
-<script setup>
-import { Button as TinyButton, Modal } from '@opentiny/vue'
-
-function btnClick() {
-  Modal.alert({
-    message: '提示框拖动最小高度为300',
-    resize: true,
-    height: 500,
-    minHeight: 300
-  })
-}
-</script>
diff --git a/examples/sites/demos/pc/app/modal/min-height.spec.ts b/examples/sites/demos/pc/app/modal/min-height.spec.ts
deleted file mode 100644
index 020729d19b..0000000000
--- a/examples/sites/demos/pc/app/modal/min-height.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('调整窗口后显示的最小高度', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#min-height')
-
-  await page.getByRole('button', { name: '提示框最小高度为300' }).click()
-  const modal = page.locator('.tiny-modal.active .tiny-modal__box')
-  // 获取弹窗位置
-  const { x, y, height } = await modal.boundingBox()
-  // 开始横线拖动
-  await page.mouse.move(x, y + height)
-  await page.mouse.down()
-  await page.mouse.move(x, y + 100)
-  await page.mouse.move(x, y + height - 200)
-  await page.mouse.up()
-
-  // 判断窗口高度是否不小于限定最小高度
-  const { height: finalHeight } = await modal.boundingBox()
-  expect(Math.round(finalHeight)).toBeGreaterThanOrEqual(300)
-})
diff --git a/examples/sites/demos/pc/app/modal/min-height.vue b/examples/sites/demos/pc/app/modal/min-height.vue
deleted file mode 100644
index d1d0620b78..0000000000
--- a/examples/sites/demos/pc/app/modal/min-height.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({
-        message: '提示框拖动最小高度为300',
-        resize: true,
-        height: 500,
-        minHeight: 300
-      })
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/modal/min-width-composition-api.vue b/examples/sites/demos/pc/app/modal/min-width-height-composition-api.vue
similarity index 64%
rename from examples/sites/demos/pc/app/modal/min-width-composition-api.vue
rename to examples/sites/demos/pc/app/modal/min-width-height-composition-api.vue
index ed6198a016..3ba93000df 100644
--- a/examples/sites/demos/pc/app/modal/min-width-composition-api.vue
+++ b/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>
diff --git a/examples/sites/demos/pc/app/modal/min-width.spec.ts b/examples/sites/demos/pc/app/modal/min-width-height.spec.ts
similarity index 84%
rename from examples/sites/demos/pc/app/modal/min-width.spec.ts
rename to examples/sites/demos/pc/app/modal/min-width-height.spec.ts
index 18a28f7727..ab62d3652c 100644
--- a/examples/sites/demos/pc/app/modal/min-width.spec.ts
+++ b/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()
diff --git a/examples/sites/demos/pc/app/modal/min-width.vue b/examples/sites/demos/pc/app/modal/min-width-height.vue
similarity index 68%
rename from examples/sites/demos/pc/app/modal/min-width.vue
rename to examples/sites/demos/pc/app/modal/min-width-height.vue
index e8fd85e86a..9db925f5b9 100644
--- a/examples/sites/demos/pc/app/modal/min-width.vue
+++ b/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
       })
     }
   }
diff --git a/examples/sites/demos/pc/app/modal/show-header-footer-composition-api.vue b/examples/sites/demos/pc/app/modal/show-header-footer-composition-api.vue
new file mode 100644
index 0000000000..ad5e60db29
--- /dev/null
+++ b/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>
diff --git a/examples/sites/demos/pc/app/modal/showHeader.spec.ts b/examples/sites/demos/pc/app/modal/show-header-footer.spec.ts
similarity index 56%
rename from examples/sites/demos/pc/app/modal/showHeader.spec.ts
rename to examples/sites/demos/pc/app/modal/show-header-footer.spec.ts
index cddb16c62d..ec70936cf4 100644
--- a/examples/sites/demos/pc/app/modal/showHeader.spec.ts
+++ b/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()
 })
diff --git a/examples/sites/demos/pc/app/modal/showFooter.vue b/examples/sites/demos/pc/app/modal/show-header-footer.vue
similarity index 50%
rename from examples/sites/demos/pc/app/modal/showFooter.vue
rename to examples/sites/demos/pc/app/modal/show-header-footer.vue
index 594e8da099..8f414047bf 100644
--- a/examples/sites/demos/pc/app/modal/showFooter.vue
+++ b/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 })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/modal/showFooter-composition-api.vue b/examples/sites/demos/pc/app/modal/showFooter-composition-api.vue
deleted file mode 100644
index 1ca2a3a25b..0000000000
--- a/examples/sites/demos/pc/app/modal/showFooter-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<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: '不显示底部', showFooter: false })
-}
-</script>
diff --git a/examples/sites/demos/pc/app/modal/showFooter.spec.ts b/examples/sites/demos/pc/app/modal/showFooter.spec.ts
deleted file mode 100644
index c4f1913b6e..0000000000
--- a/examples/sites/demos/pc/app/modal/showFooter.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('不显示底部', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('modal#showFooter')
-
-  const modal = page.locator('.tiny-modal.active')
-  await page.getByRole('button', { name: '不显示底部' }).click()
-  await expect(modal.locator('.tiny-modal__footer')).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/modal/showHeader-composition-api.vue b/examples/sites/demos/pc/app/modal/showHeader-composition-api.vue
deleted file mode 100644
index fc7abd1ad3..0000000000
--- a/examples/sites/demos/pc/app/modal/showHeader-composition-api.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<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 })
-}
-</script>
diff --git a/examples/sites/demos/pc/app/modal/showHeader.vue b/examples/sites/demos/pc/app/modal/showHeader.vue
deleted file mode 100644
index c420ceabf2..0000000000
--- a/examples/sites/demos/pc/app/modal/showHeader.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
-</template>
-
-<script>
-import { Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    btnClick() {
-      Modal.alert({ message: '不显示头部', showHeader: false })
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/modal/webdoc/modal.js b/examples/sites/demos/pc/app/modal/webdoc/modal.js
index 6218708567..7431d60755 100644
--- a/examples/sites/demos/pc/app/modal/webdoc/modal.js
+++ b/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',