fix(modal): [modal] empty str title should not be visible (#1858)

* test: fix e2e test errors

* style: fix eslint error

* fix: fix empty string title can be visible

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

@@ -19,7 +19,7 @@ test('基本用法', async ({ page }) => {
   // 成功提示框
   await page.getByRole('button', { name: /成功提示框/ }).click()
   await expect(modal).toHaveClass(/status__success/)
-  await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-icon-success/)
+  await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-modal-svg__success/)
   await page.getByRole('button', { name: /确定/, exact: true }).click()
   await expect(page.locator('.tiny-modal.type__alert.status__success')).not.toBeVisible()
 

examples/sites/demos/pc/app/modal/lock-view.spec.ts

@@ -5,6 +5,11 @@ test('锁住页面', async ({ page }) => {
   await page.goto('modal#lock-view')
 
   const modal = page.locator('.tiny-modal.active')
+
+  // 新版示例页单示例无滚动条，先展开代码保证有滚动条
+  await page.locator('.i-ti-code').click()
+  await page.waitForTimeout(100)
+
   await page.getByRole('button', { name: '不锁界面 且 隐藏遮罩层' }).click()
   await expect(modal).not.toHaveClass(/lock__view/)
 

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

@@ -1,11 +1,16 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="customClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="noTitleClick" :reset-time="0">无标题</tiny-button>
 </template>
 
 <script setup>
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
-function btnClick() {
+function customClick() {
   Modal.alert({ message: '自定义标题', title: '自定义标题' })
 }
+
+function noTitleClick() {
+  Modal.alert({ message: '无标题', title: '' })
+}
 </script>

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

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('标题', async ({ page }) => {
+test('自定义标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#title')
 
@@ -8,3 +8,12 @@ test('标题', async ({ page }) => {
   await page.getByRole('button', { name: '自定义标题' }).click()
   await expect(modal.locator('.tiny-modal__header')).toHaveText('自定义标题')
 })
+
+test('无标题', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('modal#title')
+
+  const modal = page.locator('.tiny-modal.active')
+  await page.getByRole('button', { name: '无标题' }).click()
+  await expect(modal.locator('.tiny-modal__title')).not.toBeVisible()
+})

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

@@ -1,5 +1,6 @@
 <template>
-  <tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="customClick" :reset-time="0">自定义标题</tiny-button>
+  <tiny-button @click="noTitleClick" :reset-time="0">无标题</tiny-button>
 </template>
 
 <script>
@@ -10,8 +11,12 @@ export default {
     TinyButton: Button
   },
   methods: {
-    btnClick() {
+    customClick() {
       Modal.alert({ message: '自定义标题', title: '自定义标题' })
+    },
+
+    noTitleClick() {
+      Modal.alert({ message: '无标题', title: '' })
     }
   }
 }

packages/vue/src/modal/src/mobile.vue

@@ -48,9 +48,6 @@ export default defineComponent({
     'width',
     'zIndex'
   ],
-  components: {
-    Button
-  },
   provide() {
     return { dialog: this }
   },
@@ -108,13 +105,15 @@ export default defineComponent({
                     }
                   },
                   [
-                    h(
-                      'span',
-                      {
-                        class: 'tiny-mobile-modal__title'
-                      },
-                      title || t('ui.alert.title')
-                    ),
+                    title !== ''
+                      ? h(
+                          'span',
+                          {
+                            class: 'tiny-mobile-modal__title'
+                          },
+                          title || t('ui.alert.title')
+                        )
+                      : null,
                     resize
                       ? h(zoomLocat ? iconMinscreenLeft() : iconFullscreenLeft(), {
                           class: ['tiny-mobile-modal__zoom-btn', 'trigger__btn'],

packages/vue/src/modal/src/pc.vue

@@ -183,13 +183,15 @@ export default defineComponent({
                           ]
                         )
                       : null,
-                    h(
-                      'span',
-                      {
-                        class: 'tiny-modal__title'
-                      },
-                      title || t('ui.alert.title')
-                    ),
+                    title !== ''
+                      ? h(
+                          'span',
+                          {
+                            class: 'tiny-modal__title'
+                          },
+                          title || t('ui.alert.title')
+                        )
+                      : null,
                     resize
                       ? h(zoomLocat ? iconMinscreenLeft() : iconFullscreenLeft(), {
                           class: ['tiny-modal__zoom-btn', 'trigger__btn'],