refactor(notify): [notify] refactor notify theme (#2311)

* refactor(notify): fix demos

* fix(notify): fix demos

* refactor(notify): refactor notify's theme

* fix(notify): fix demos and docs

* fix(notify): fix

* fix(notify): fix

* fix(notify): fix e2e test

examples/sites/demos/apis/notify.js

@@ -41,10 +41,12 @@ export default {
         {
           name: 'duration',
           type: 'number',
-          defaultValue: '4500',
+          defaultValue: '',
           desc: {
-            'zh-CN': '自动关闭延时毫秒数',
-            'en-US': 'Automatic shutdown delay in milliseconds'
+            'zh-CN':
+              '通知自动关闭时间，单位毫秒数。 默认情况， <code>success  info </code> 延时5秒 <code> warning  error </code> 延时10秒自动关闭 ',
+            'en-US':
+              'Automatic notification shutdown time, in milliseconds. By default, <code>success info </code> Delay is 5 seconds. <code> warning error </code> Delay is 10 seconds'
           },
           mode: ['pc'],
           pcDemo: 'duration'
@@ -59,11 +61,11 @@ export default {
             'en-US': 'Notification message text, which can be customized using JSX.'
           },
           mode: ['pc'],
-          pcDemo: 'message'
+          pcDemo: 'basic-usage'
         },
         {
           name: 'position',
-          type: "'top-right' | 'bottom-right'",
+          type: "'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'",
           defaultValue: "'bottom-right'",
           desc: {
             'zh-CN': '通知显示位置',
@@ -115,7 +117,7 @@ export default {
             'en-US': 'Notification message title, which can be customized by JSX.'
           },
           mode: ['pc'],
-          pcDemo: 'title'
+          pcDemo: 'basic-usage'
         },
         {
           name: 'type',

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

@@ -1,6 +1,7 @@
 <template>
   <div class="content">
     <tiny-button @click="handleClick" :reset-time="0">弹出提示框</tiny-button>
+    <tiny-button @click="handleClickJxs" :reset-time="0">弹出提示框-jsx</tiny-button>
   </div>
 </template>
 
@@ -10,11 +11,24 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
 function handleClick() {
   Notify({
     type: 'info',
-    title: (h, params) => <h4>通知消息的标题</h4>,
+    title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: 'top-right',
     duration: 5000,
     customClass: 'my-custom-cls'
   })
 }
+
+function handleClickJxs() {
+  Notify({
+    type: 'info',
+    title: () => <h4>通知消息的标题</h4>,
+    message: () => (
+      <span>通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文</span>
+    ),
+    position: 'top-right',
+    duration: 5000,
+    customClass: 'my-custom-cls'
+  })
+}
 </script>

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

@@ -3,10 +3,11 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('notify#basic-usage')
-  await page.getByRole('button', { name: '弹出提示框' }).click()
+
   const status = page.locator('.tiny-notify__icon-status')
+
+  await page.getByRole('button', { name: '弹出提示框' }).first().click()
   await expect(status).toBeVisible()
-  await expect(page.getByRole('heading', { name: '通知消息的标题' })).toBeVisible()
   await expect(
     page.getByText('通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文')
   ).toBeVisible()

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

@@ -1,6 +1,7 @@
 <template>
   <div class="content">
     <tiny-button @click="handleClick" :reset-time="0">弹出提示框</tiny-button>
+    <tiny-button @click="handleClickJxs" :reset-time="0">弹出提示框-jsx</tiny-button>
   </div>
 </template>
 
@@ -15,12 +16,24 @@ export default {
     handleClick() {
       Notify({
         type: 'info',
-        title: (h, params) => <h4>通知消息的标题</h4>,
+        title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: 'top-right',
         duration: 5000,
         customClass: 'my-custom-cls'
       })
+    },
+    handleClickJxs() {
+      Notify({
+        type: 'info',
+        title: () => <h4>通知消息的标题</h4>,
+        message: () => (
+          <span>通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文</span>
+        ),
+        position: 'top-right',
+        duration: 5000,
+        customClass: 'my-custom-cls'
+      })
     }
   }
 }

examples/sites/demos/pc/app/notify/notify-events-composition-api.vue

@@ -17,7 +17,6 @@ function baseClick() {
       Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
       return false
     },
-    duration: 500000,
     position: 'top-right'
   })
 }
@@ -28,7 +27,6 @@ function baseClick2() {
     title: '通知',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
-    duration: 500000,
     position: 'top-right'
   })
 }

examples/sites/demos/pc/app/notify/notify-events.vue

@@ -22,7 +22,6 @@ export default {
           Modal.message({ message: '在通知框关闭前触发的事件,返回 false 可阻止关闭通知框', status: 'info' })
           return false
         },
-        duration: 500000,
         position: 'top-right'
       })
     },
@@ -32,7 +31,6 @@ export default {
         title: '通知',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         onClose: () => Modal.message({ message: '点击关闭按钮时触发事件', status: 'info' }),
-        duration: 500000,
         position: 'top-right'
       })
     }

examples/sites/demos/pc/app/notify/position-composition-api.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="content">
-    <tiny-button @click="infoClick" :reset-time="0">默认 bottom-right</tiny-button>
-    <tiny-button @click="successClick" :reset-time="0">top-right</tiny-button>
+    <tiny-button @click="handleClick('top-left')" :reset-time="0">top-left</tiny-button>
+    <tiny-button @click="handleClick('top-right')" :reset-time="0">top-right</tiny-button>
+    <br />
+    <br />
+    <tiny-button @click="handleClick('bottom-left')" :reset-time="0">bottom-left</tiny-button>
+    <tiny-button @click="handleClick('bottom-right')" :reset-time="0">bottom-right</tiny-button>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Notify, Button as TinyButton } from '@opentiny/vue'
 
-function infoClick() {
+function handleClick(pos) {
   Notify({
-    type: 'info',
-    title: (h, params) => <h4>通知消息的标题</h4>,
-    message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文'
-  })
-}
-
-function successClick() {
-  Notify({
-    type: 'success',
+    title: '通知消息的标题',
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
-    position: 'top-right'
+    position: pos
   })
 }
 </script>
+
+<style scoped>
+.tiny-button {
+  min-width: 120px;
+}
+</style>

examples/sites/demos/pc/app/notify/position.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('显示位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('notify#position')
-  await page.getByRole('button', { name: '默认 bottom-right' }).click()
+  await page.getByRole('button', { name: 'bottom-right' }).click()
   await page.getByRole('button', { name: 'top-right' }).click()
   const bottom = page.locator('.bottom-right')
   const bottomBox = await bottom.boundingBox()

examples/sites/demos/pc/app/notify/position.vue

@@ -1,32 +1,35 @@
 <template>
   <div class="content">
-    <tiny-button @click="infoClick" :reset-time="0">默认 bottom-right</tiny-button>
-    <tiny-button @click="successClick" :reset-time="0">top-right</tiny-button>
+    <tiny-button @click="handleClick('top-left')" :reset-time="0">top-left</tiny-button>
+    <tiny-button @click="handleClick('top-right')" :reset-time="0">top-right</tiny-button>
+    <br />
+    <br />
+    <tiny-button @click="handleClick('bottom-left')" :reset-time="0">bottom-left</tiny-button>
+    <tiny-button @click="handleClick('bottom-right')" :reset-time="0">bottom-right</tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Notify, Button } from '@opentiny/vue'
 
 export default {
   components: {
     TinyButton: Button
   },
   methods: {
-    infoClick() {
+    handleClick(pos) {
       Notify({
-        type: 'info',
-        title: (h, params) => <h4>通知消息的标题</h4>,
-        message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文'
-      })
-    },
-    successClick() {
-      Notify({
-        type: 'success',
+        title: '通知消息的标题',
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
-        position: 'top-right'
+        position: pos
       })
     }
   }
 }
 </script>
+
+<style scoped>
+.tiny-button {
+  min-width: 120px;
+}
+</style>

examples/sites/demos/pc/app/notify/showClose-composition-api.vue

@@ -13,8 +13,7 @@ function baseClick() {
     title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     showClose: false,
-    position: 'top-right',
-    duration: 500000
+    position: 'top-right'
   })
 }
 </script>

examples/sites/demos/pc/app/notify/showClose.vue

@@ -18,8 +18,7 @@ export default {
         title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         showClose: false,
-        position: 'top-right',
-        duration: 500000
+        position: 'top-right'
       })
     }
   }

examples/sites/demos/pc/app/notify/showIcon-composition-api.vue

@@ -13,8 +13,7 @@ function baseClick() {
     title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     showIcon: false,
-    position: 'top-right',
-    duration: 500000
+    position: 'top-right'
   })
 }
 </script>

examples/sites/demos/pc/app/notify/showIcon.vue

@@ -18,8 +18,7 @@ export default {
         title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         showIcon: false,
-        position: 'top-right',
-        duration: 500000
+        position: 'top-right'
       })
     }
   }