From de89d0275f367be3595b9af5b909ebe42a7fdb6d Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Fri, 18 Oct 2024 20:34:16 -0700 Subject: [PATCH 1/7] refactor(notify): fix demos --- examples/sites/demos/apis/notify.js | 4 +- .../notify/basic-usage-composition-api.vue | 16 ++++++- .../sites/demos/pc/app/notify/basic-usage.vue | 15 ++++++- .../pc/app/notify/message-composition-api.vue | 18 -------- .../sites/demos/pc/app/notify/message.spec.ts | 9 ---- .../sites/demos/pc/app/notify/message.vue | 25 ----------- .../pc/app/notify/title-composition-api.vue | 18 -------- .../sites/demos/pc/app/notify/title.spec.ts | 9 ---- examples/sites/demos/pc/app/notify/title.vue | 25 ----------- .../demos/pc/app/notify/webdoc/notify.js | 44 ++++++++----------- 10 files changed, 49 insertions(+), 134 deletions(-) delete mode 100644 examples/sites/demos/pc/app/notify/message-composition-api.vue delete mode 100644 examples/sites/demos/pc/app/notify/message.spec.ts delete mode 100644 examples/sites/demos/pc/app/notify/message.vue delete mode 100644 examples/sites/demos/pc/app/notify/title-composition-api.vue delete mode 100644 examples/sites/demos/pc/app/notify/title.spec.ts delete mode 100644 examples/sites/demos/pc/app/notify/title.vue diff --git a/examples/sites/demos/apis/notify.js b/examples/sites/demos/apis/notify.js index a57f08830a..de187ffcb4 100644 --- a/examples/sites/demos/apis/notify.js +++ b/examples/sites/demos/apis/notify.js @@ -59,7 +59,7 @@ export default { 'en-US': 'Notification message text, which can be customized using JSX.' }, mode: ['pc'], - pcDemo: 'message' + pcDemo: 'basic-usage' }, { name: 'position', @@ -115,7 +115,7 @@ export default { 'en-US': 'Notification message title, which can be customized by JSX.' }, mode: ['pc'], - pcDemo: 'title' + pcDemo: 'basic-usage' }, { name: 'type', diff --git a/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue index 4143d3aea2..ccd29933fd 100644 --- a/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue @@ -1,6 +1,7 @@ @@ -10,11 +11,24 @@ import { Notify, Button as TinyButton } from '@opentiny/vue' function handleClick() { Notify({ type: 'info', - title: (h, params) =>

通知消息的标题

, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', duration: 5000, customClass: 'my-custom-cls' }) } + +function handleClickJxs() { + Notify({ + type: 'info', + title: () =>

通知消息的标题

, + message: () => ( + 通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文 + ), + position: 'top-right', + duration: 5000, + customClass: 'my-custom-cls' + }) +} diff --git a/examples/sites/demos/pc/app/notify/basic-usage.vue b/examples/sites/demos/pc/app/notify/basic-usage.vue index 770985ae4c..d6bc6ef047 100644 --- a/examples/sites/demos/pc/app/notify/basic-usage.vue +++ b/examples/sites/demos/pc/app/notify/basic-usage.vue @@ -1,6 +1,7 @@ @@ -15,12 +16,24 @@ export default { handleClick() { Notify({ type: 'info', - title: (h, params) =>

通知消息的标题

, + title: '通知消息的标题', message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', duration: 5000, customClass: 'my-custom-cls' }) + }, + handleClickJxs() { + Notify({ + type: 'info', + title: () =>

通知消息的标题

, + message: () => ( + 通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文 + ), + position: 'top-right', + duration: 5000, + customClass: 'my-custom-cls' + }) } } } diff --git a/examples/sites/demos/pc/app/notify/message-composition-api.vue b/examples/sites/demos/pc/app/notify/message-composition-api.vue deleted file mode 100644 index b92cf59666..0000000000 --- a/examples/sites/demos/pc/app/notify/message-composition-api.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/examples/sites/demos/pc/app/notify/message.spec.ts b/examples/sites/demos/pc/app/notify/message.spec.ts deleted file mode 100644 index 05c23253e2..0000000000 --- a/examples/sites/demos/pc/app/notify/message.spec.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { test, expect } from '@playwright/test' - -test('自定义内容', async ({ page }) => { - page.on('pageerror', (exception) => expect(exception).toBeNull()) - await page.goto('notify#message') - await page.getByRole('button', { name: '自定义内容' }).click() - const content = await page.getByRole('paragraph').filter({ hasText: '自定义内容' }) - await expect(content).toBeVisible() -}) diff --git a/examples/sites/demos/pc/app/notify/message.vue b/examples/sites/demos/pc/app/notify/message.vue deleted file mode 100644 index a3b13b7979..0000000000 --- a/examples/sites/demos/pc/app/notify/message.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - diff --git a/examples/sites/demos/pc/app/notify/title-composition-api.vue b/examples/sites/demos/pc/app/notify/title-composition-api.vue deleted file mode 100644 index 7295f24bde..0000000000 --- a/examples/sites/demos/pc/app/notify/title-composition-api.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/examples/sites/demos/pc/app/notify/title.spec.ts b/examples/sites/demos/pc/app/notify/title.spec.ts deleted file mode 100644 index 5694585d1d..0000000000 --- a/examples/sites/demos/pc/app/notify/title.spec.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { test, expect } from '@playwright/test' - -test('标题', async ({ page }) => { - page.on('pageerror', (exception) => expect(exception).toBeNull()) - await page.goto('notify#title') - await page.getByRole('button', { name: '自定义标题' }).click() - const title = page.locator('.tiny-notify__title') - await expect(title).toBeVisible() -}) diff --git a/examples/sites/demos/pc/app/notify/title.vue b/examples/sites/demos/pc/app/notify/title.vue deleted file mode 100644 index 29357e1367..0000000000 --- a/examples/sites/demos/pc/app/notify/title.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - diff --git a/examples/sites/demos/pc/app/notify/webdoc/notify.js b/examples/sites/demos/pc/app/notify/webdoc/notify.js index 57992f9679..4a5b989304 100644 --- a/examples/sites/demos/pc/app/notify/webdoc/notify.js +++ b/examples/sites/demos/pc/app/notify/webdoc/notify.js @@ -9,8 +9,24 @@ export default { 'en-US': 'Basic Usage' }, desc: { - 'zh-CN': '通过函数调用的方式使用组件。', - 'en-US': 'Components are used by means of function calls' + 'zh-CN': ` + 通过Notify函数,在页面上弹出通知框组件。
+ 通过 title 属性设置通知框标题。
+ 通过 message 属性设置通知框的内容。
+
+

小技巧

+ 标题和内容不仅支持字符串传入，还支持 jsx 和 h 函数的写法。 +
+ `, + 'en-US': ` + The Notify function is used to display the notification component on the page.
+ Set the title of the notification box with the title property.
+ Set the contents of the notification box with the message property.
+
+

Tips

+ The title and content support not only string passing, but also the writing of jsx and h functions. +
+ ` }, codeFiles: ['basic-usage.vue'] }, @@ -54,30 +70,6 @@ export default { }, codeFiles: ['position.vue'] }, - { - demoId: 'title', - name: { - 'zh-CN': '标题', - 'en-US': 'Title' - }, - desc: { - 'zh-CN': '

可通过 title 属性设置通知框标题。

\n', - 'en-US': '

You can set the title of the notification box through the title attribute.

\n' - }, - codeFiles: ['title.vue'] - }, - { - demoId: 'message', - name: { - 'zh-CN': '内容自定义', - 'en-US': 'Custom Content' - }, - desc: { - 'zh-CN': '

可通过 message 属性设置通知框的内容。

\n', - 'en-US': '

You can set the content of the notification box through the message attribute.

\n' - }, - codeFiles: ['message.vue'] - }, { demoId: 'showClose', name: { From de91b4db4dcfb2b24d3be5d29b7adaf85655d39b Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Fri, 18 Oct 2024 20:44:46 -0700 Subject: [PATCH 2/7] fix(notify): fix demos --- .../demos/pc/app/notify/notify-events-composition-api.vue | 2 -- examples/sites/demos/pc/app/notify/notify-events.vue | 2 -- .../sites/demos/pc/app/notify/showClose-composition-api.vue | 3 +-- examples/sites/demos/pc/app/notify/showClose.vue | 3 +-- .../sites/demos/pc/app/notify/showIcon-composition-api.vue | 3 +-- examples/sites/demos/pc/app/notify/showIcon.vue | 3 +-- examples/sites/demos/pc/app/notify/type-composition-api.vue | 1 - examples/sites/demos/pc/app/notify/type.vue | 1 - .../demos/pc/app/notify/verticalOffset-composition-api.vue | 1 - examples/sites/demos/pc/app/notify/verticalOffset.vue | 1 - 10 files changed, 4 insertions(+), 16 deletions(-) diff --git a/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue b/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue index 37e8570166..9e8f4a6fd0 100644 --- a/examples/sites/demos/pc/app/notify/notify-events-composition-api.vue +++ b/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' }) } diff --git a/examples/sites/demos/pc/app/notify/notify-events.vue b/examples/sites/demos/pc/app/notify/notify-events.vue index 5d91abd2d3..4a26e394cc 100644 --- a/examples/sites/demos/pc/app/notify/notify-events.vue +++ b/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' }) } diff --git a/examples/sites/demos/pc/app/notify/showClose-composition-api.vue b/examples/sites/demos/pc/app/notify/showClose-composition-api.vue index 640ce8f51a..fe94a34f97 100644 --- a/examples/sites/demos/pc/app/notify/showClose-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/showClose-composition-api.vue @@ -13,8 +13,7 @@ function baseClick() { title: (h, params) =>

通知消息的标题

, message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', showClose: false, - position: 'top-right', - duration: 500000 + position: 'top-right' }) } diff --git a/examples/sites/demos/pc/app/notify/showClose.vue b/examples/sites/demos/pc/app/notify/showClose.vue index e2fb476337..e04d3640cf 100644 --- a/examples/sites/demos/pc/app/notify/showClose.vue +++ b/examples/sites/demos/pc/app/notify/showClose.vue @@ -18,8 +18,7 @@ export default { title: (h, params) =>

通知消息的标题

, message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', showClose: false, - position: 'top-right', - duration: 500000 + position: 'top-right' }) } } diff --git a/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue b/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue index 91fc775552..cbecc000b0 100644 --- a/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/showIcon-composition-api.vue @@ -13,8 +13,7 @@ function baseClick() { title: (h, params) =>

通知消息的标题

, message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', showIcon: false, - position: 'top-right', - duration: 500000 + position: 'top-right' }) } diff --git a/examples/sites/demos/pc/app/notify/showIcon.vue b/examples/sites/demos/pc/app/notify/showIcon.vue index bf76aa0bd8..11fcb55acd 100644 --- a/examples/sites/demos/pc/app/notify/showIcon.vue +++ b/examples/sites/demos/pc/app/notify/showIcon.vue @@ -18,8 +18,7 @@ export default { title: (h, params) =>

通知消息的标题

, message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', showIcon: false, - position: 'top-right', - duration: 500000 + position: 'top-right' }) } } diff --git a/examples/sites/demos/pc/app/notify/type-composition-api.vue b/examples/sites/demos/pc/app/notify/type-composition-api.vue index df9264a890..4922577ff1 100644 --- a/examples/sites/demos/pc/app/notify/type-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/type-composition-api.vue @@ -16,7 +16,6 @@ function infoClick() { title: (h, params) =>

通知消息的标题

, message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', - duration: 500000, customClass: 'my-custom-cls' }) } diff --git a/examples/sites/demos/pc/app/notify/type.vue b/examples/sites/demos/pc/app/notify/type.vue index 18c9ffbb7b..9e56d9d878 100644 --- a/examples/sites/demos/pc/app/notify/type.vue +++ b/examples/sites/demos/pc/app/notify/type.vue @@ -21,7 +21,6 @@ export default { title: (h, params) =>

通知消息的标题

, message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', - duration: 500000, customClass: 'my-custom-cls' }) }, diff --git a/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue b/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue index fade46394a..0b1479301e 100644 --- a/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue @@ -13,7 +13,6 @@ function handleClick() { title: (h, params) =>

通知消息的标题

, message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', - duration: 500000, customClass: 'my-custom-cls', verticalOffset: 100 }) diff --git a/examples/sites/demos/pc/app/notify/verticalOffset.vue b/examples/sites/demos/pc/app/notify/verticalOffset.vue index 4ac63ad6a8..b8d47aec12 100644 --- a/examples/sites/demos/pc/app/notify/verticalOffset.vue +++ b/examples/sites/demos/pc/app/notify/verticalOffset.vue @@ -18,7 +18,6 @@ export default { title: (h, params) =>

通知消息的标题

, message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文', position: 'top-right', - duration: 500000, customClass: 'my-custom-cls', verticalOffset: 100 }) From a6f39a259a23c65b92dcef8dc98f8b71b19e009a Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sat, 19 Oct 2024 00:11:05 -0700 Subject: [PATCH 3/7] refactor(notify): refactor notify's theme --- packages/theme/src/notify/index.less | 212 ++++++++------------------- packages/theme/src/notify/vars.less | 132 +++++++---------- 2 files changed, 119 insertions(+), 225 deletions(-) diff --git a/packages/theme/src/notify/index.less b/packages/theme/src/notify/index.less index cdabde40eb..5297e59fcb 100644 --- a/packages/theme/src/notify/index.less +++ b/packages/theme/src/notify/index.less @@ -16,188 +16,100 @@ @notify-prefix-cls: ~'@{css-prefix}notify'; .@{notify-prefix-cls} { - .component-css-vars-notify(); + .inject-Notify-vars(); position: fixed; z-index: 1101; - max-width: var(--ti-notify-max-width); + display: flex; + flex-direction: row; + align-items: flex-start; + max-width: var(--tv-Notify-max-width); width: 100%; - box-sizing: border-box; + line-height: var(--tv-Notify-line-height); + background-color: var(--tv-Notify-bg-color); + padding: var(--tv-Notify-padding-y) var(--tv-Notify-padding-x); + border-radius: var(--tv-Notify-border-radius); + box-shadow: var(--tv-Notify-box-shadow); transition: all 0.3s; overflow: hidden; white-space: nowrap; - padding: var(--ti-notify-padding-vertical) var(--ti-notify-padding-horizontal); - background: var(--ti-notify-bg-color); - border-radius: 2px; - border-radius: var(--ti-notify-border-radius); - font-size: var(--ti-common-font-size-base); - display: flex; - flex-direction: row; - align-items: flex-start; - box-shadow: var(--ti-notify-box-shadow); - - &--info { - background: var(--ti-notify-info-bg-color); - } - &--warning { - background: var(--ti-notify-warning-bg-color); - } - - &--error { - background: var(--ti-notify-error-bg-color); - } - - &--success { - background: var(--ti-notify-success-bg-color); - } - - &.top-left { - left: var(--ti-notify-position-top-left); - top: 25px; + /** 状态图标 */ + .@{notify-prefix-cls}__icon-zone { + svg { + font-size: var(--tv-Notify-status-icon-font-size); + } } - &.bottom-left { - left: var(--ti-notify-position-bottom-left); - bottom: 25px; + &.@{notify-prefix-cls}--success .@{notify-prefix-cls}__icon-zone svg { + fill: var(--tv-Notify-status-icon-color-success); } - - &.top-right { - right: var(--ti-notify-position-top-right); - top: 25px; + &.@{notify-prefix-cls}--info .@{notify-prefix-cls}__icon-zone svg { + fill: var(--tv-Notify-status-icon-color-info); } - - &.bottom-right { - right: var(--ti-notify-position-bottom-right); - bottom: 25px; + &.@{notify-prefix-cls}--error .@{notify-prefix-cls}__icon-zone svg { + fill: var(--tv-Notify-status-icon-color-error); } - - & &__title { - font-weight: var(--ti-notify-title-font-weight); - font-size: var(--ti-notify-title-font-size); - color: var(--ti-notify-title-text-color); - line-height: 1.5; - white-space: var(--ti-notify-title-white-space); - overflow-x: hidden; - text-overflow: ellipsis; + &.@{notify-prefix-cls}--warning .@{notify-prefix-cls}__icon-zone svg { + fill: var(--tv-Notify-status-icon-color-warning); } - & &__icon { - color: var(--ti-notify-text-color); - } + /** 消息区 */ + .@{notify-prefix-cls}__message-zone { + flex: 1; + margin: 0 var(--tv-Notify-msg-margin-x); - & &__content { - color: var(--ti-notify-content-text-color); - font-size: var(--ti-common-font-size-base); - margin: 0; - padding: 0; - font-size: var(--ti-common-font-size-1); - overflow-wrap: break-word; - white-space: pre-wrap; - } + .@{notify-prefix-cls}__title-wrapper { + color: var(--tv-Notify-title-text-color); + font-size: var(--tv-Notify-title-font-size); + font-weight: var(--tv-Notify-title-font-weight); + margin-bottom: var(--tv-Notify-title-margin-bottom); + } - & &__closebtn { - cursor: pointer; - color: var(--ti-notify-text-color); - position: absolute; - top: 50%; - right: 10px; - transform: translateY(-50%); - } + .@{notify-prefix-cls}__content-wrapper { + color: var(--tv-Notify-msg-text-color); + font-size: var(--tv-Notify-msg-font-size); + word-break: break-word; + max-height: var(--tv-Notify-msg-max-height); - & &__icon-zone { - font-size: var(--ti-notify-icon-size); - svg { - vertical-align: inherit; - transform: var(--ti-notify-icon-transform); + .@{notify-prefix-cls}__content { + overflow-wrap: break-word; + white-space: pre-wrap; + } } } - & &__message-zone { - width: calc(100% - 40px); - margin: var(--ti-notify-message-margin-top) var(--ti-notify-message-margin-right) - var(--ti-notify-message-margin-bottom) var(--ti-notify-message-margin-left); - } + /** 关闭图标 */ + .@{notify-prefix-cls}__close-zone { + .@{notify-prefix-cls}__icon-close svg { + font-size: var(--tv-Notify-close-icon-font-size); + fill: var(--tv-Notify-close-icon-color); + cursor: pointer; - & &__close-zone { - font-size: var(--ti-notify-close-icon-font-size); - cursor: pointer; - svg { - vertical-align: inherit; &:hover { - fill: var(--ti-notify-close-hover-icon-color); + fill: var(--tv-Notify-close-icon-color-hover); } } } - &--info &__icon-zone { - fill: var(--ti-notify-info-icon-color); - } - - &--info &__close-zone { - fill: var(--ti-notify-close-icon-color); - } - - &--warning &__icon-zone { - fill: var(--ti-notify-warning-icon-color); - } - - &--warning &__close-zone { - fill: var(--ti-notify-close-icon-color); - } - - &--error &__icon-zone { - fill: var(--ti-notify-error-icon-color); - } - - &--error &__close-zone { - fill: var(--ti-notify-close-icon-color); - } - - &--success &__icon-zone { - fill: var(--ti-notify-success-icon-color); - } - - &--success &__close-zone { - fill: var(--ti-notify-close-icon-color); - } - - &--error &__close-zone { - fill: var(--ti-notify-close-icon-color); - } - - &__icon-zone &__icon-status { - position: relative; - } - - &--no-close &__message-zone { - width: calc(100% - 24px); - } - - &__message-zone &__title-wrapper { - color: var(--ti-notify-title-text-color); - font-size: var(--ti-notify-title-font-size); - margin: var(--ti-notify-title-margin-top) var(--ti-notify-title-margin-horizontal) - var(--ti-notify-title-margin-bottom); - line-height: 1.5; - font-weight: var(--ti-notify-title-font-weight); + /** 显示位置 */ + &.top-left { + left: 24px; + top: 25px; } - &__message-zone &__content-wrapper { - height: auto; - line-height: 22px; - max-height: 96px; - overflow-y: auto; - font-size: var(--ti-notify-content-font-size); + &.bottom-left { + left: 24px; + bottom: 25px; } - &__close-zone &__icon-close { - position: relative; - top: -4px; - right: -4px; + &.top-right { + right: 24px; + top: 25px; } - &--no-icon &__message-zone { - width: 100%; + &.bottom-right { + right: 24px; + bottom: 25px; } } diff --git a/packages/theme/src/notify/vars.less b/packages/theme/src/notify/vars.less index 166b1e5d92..d5d39f23bb 100644 --- a/packages/theme/src/notify/vars.less +++ b/packages/theme/src/notify/vars.less @@ -10,79 +10,61 @@ * */ -.component-css-vars-notify() { - // 通知背景色 - --ti-notify-bg-color: var(--ti-common-color-prompt-bg, #deecff); - // info类型弹框背景色 - --ti-notify-info-bg-color: var(--ti-common-color-bg-navigation, #ffffff); - // info类型弹框左侧图标色 - --ti-notify-info-icon-color: var(--ti-common-color-prompt, #1476ff); - // warning类型弹框背景色 - --ti-notify-warning-bg-color: var(--ti-common-color-bg-navigation, #ffffff); - // warning类型弹框左侧图标色 - --ti-notify-warning-icon-color: var(--ti-common-color-warn, #ff8800); - // error类型弹框背景色 - --ti-notify-error-bg-color: var(--ti-common-color-bg-navigation, #ffffff); - // error类型弹框左侧图标色 - --ti-notify-error-icon-color: var(--ti-common-color-error, #f23030); - // success类型弹框背景色 - --ti-notify-success-bg-color: var(--ti-common-color-bg-navigation, #ffffff); - // success类型弹框左侧图标色 - --ti-notify-success-icon-color: var(--ti-common-color-success, #5cb300); - // 通知文本色（没有效果） - --ti-notify-text-color: var(--ti-common-color-bg-emphasize, #191919); - // 弹框圆角 - --ti-notify-border-radius: var(--ti-common-border-radius-4, 8px); - // 弹框文本色 - --ti-notify-title-text-color: var(--ti-common-color-info-normal, #191919); - // 内容文本色 - --ti-notify-content-text-color: var(--ti-common-color-text-secondary, #595959); - // 弹框标题字号 - --ti-notify-title-font-size: var(--ti-common-font-size-2, 16px); - // 通知标题字重（没有效果） - --ti-notify-title-font-weight: 600; - // 弹框标题顶部外边距 - --ti-notify-title-margin-top: var(--ti-common-space-0, 0px); - // 弹框标题水平外边距 - --ti-notify-title-margin-horizontal: var(--ti-common-space-0, 0px); - // 弹框标题底部外边距 - --ti-notify-title-margin-bottom: var(--ti-common-space-2x, 8px); - // 弹框标题换行(hide) - --ti-notify-title-white-space: normal; - // 弹框内容字号(没有效果，优先级被覆盖) - --ti-notify-content-font-size: var(--ti-common-font-size-1, 14px); - // 弹框文字顶部外边距 - --ti-notify-message-margin-top: var(--ti-common-space-0, 0px); - // 弹框文字底部外边距 - --ti-notify-message-margin-bottom: var(--ti-common-space-0, 0px); - // 弹框文字右外边距 - --ti-notify-message-margin-right: var(--ti-common-space-3x, 12px); - // 弹框文字左外边距 - --ti-notify-message-margin-left: var(--ti-common-space-2x, 8px); - // 弹框左侧图标尺寸 - --ti-notify-icon-size: var(--ti-common-font-size-5, 24px); - // 弹框关闭图标色 - --ti-notify-close-icon-color: var(--ti-common-color-icon-normal, #808080); - // 弹框最大宽度 - --ti-notify-max-width: 340px; - // 弹框阴影 - --ti-notify-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.08); - // 弹框垂直方向内边距 - --ti-notify-padding-vertical: var(--ti-common-space-4x, 16px); - // 弹框水平方向内边距 - --ti-notify-padding-horizontal: var(--ti-common-space-4x, 16px); - // 关闭图标大小 - --ti-notify-close-icon-font-size: var(--ti-common-font-size-4, 20px); - // 关闭图标悬浮时颜色 - --ti-notify-close-hover-icon-color: var(--ti-common-color-icon-hover, #191919); - // 弹框为top-left方向时左边距 - --ti-notify-position-top-left: var(--ti-common-space-6x, 24px); - // 弹框为bottom-left方向时左边距 - --ti-notify-position-bottom-left: var(--ti-common-space-6x, 24px); - // 弹框为top-right方向时右边距 - --ti-notify-position-top-right: var(--ti-common-space-6x, 24px); - // 弹框为bottom-right方向时右边距 - --ti-notify-position-bottom-right: var(--ti-common-space-6x, 24px); - // 关闭图标位移 - --ti-notify-icon-transform: translate(0,-1px); +.inject-Notify-vars() { + //---------------------------------------------------------------- 全局场景 + // 通知的行高 + --tv-Notify-max-width: 340px; + // 通知的行高 + --tv-Notify-line-height: var(--tv-line-height-number); + // 通知的背景色 + --tv-Notify-bg-color: var(--tv-color-bg-secondary); + // 通知的圆角 + --tv-Notify-border-radius: var(--tv-border-radius-lg); + // 通知的外阴影 + --tv-Notify-box-shadow: var(--tv-shadow-2-down); + // 通知的水平内边距 + --tv-Notify-padding-x: var(--tv-space-xl); + // 通知的垂直内边距 + --tv-Notify-padding-y: var(--tv-space-xl); + // ----------------------------------------------------------------状态图标 + // 状态图标的大小 + --tv-Notify-status-icon-font-size: 24px; + // 消息状态图标的右外边距 + --tv-Notify-status-icon-margin-right: var(--tv-space-md); + // 成功状态时，图标的颜色 + --tv-Notify-status-icon-color-success: var(--tv-color-success-icon); + // 错误状态时，图标的颜色 + --tv-Notify-status-icon-color-error: var(--tv-color-error-icon); + // 警告状态时，图标的颜色 + --tv-Notify-status-icon-color-warning: var(--tv-color-warn-icon); + // 信息状态时，图标的颜色 + --tv-Notify-status-icon-color-info: var(--tv-color-info-icon); + + // ----------------------------------------------------------------消息区 title+message + // 通知消息区的水平外边距 + --tv-Notify-msg-margin-x: var(--tv-space-md); + + // 通知标题的字体颜色 + --tv-Notify-title-text-color: var(--tv-color-text); + // 通知标题的字体大小 + --tv-Notify-title-font-size: var(--tv-font-size-lg); + // 通知标题的字重 + --tv-Notify-title-font-weight: var(--tv-font-weight-bold); + // 通知标题的下边距外边距 + --tv-Notify-title-margin-bottom: var(--tv-space-md); + + // 通知内容的字体颜色 + --tv-Notify-msg-text-color: var(--tv-color-text-secondary); + // 通知内容的字体大小 + --tv-Notify-msg-font-size: var(--tv-font-size-md); + // 通知内容的最大高度 + --tv-Notify-msg-max-height: 96px; + + // ----------------------------------------------------------------关闭图标 + // 关闭图标的大小 + --tv-Notify-close-icon-font-size: 20px; + // 关闭图标的颜色 + --tv-Notify-close-icon-color: var(--tv-color-icon); + // 关闭图标的悬浮 + --tv-Notify-close-icon-color-hover: var(--tv-color-icon-hover); } From ae05f685be2b88f95dfb794b315b916cc6d7edc3 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sat, 19 Oct 2024 00:46:10 -0700 Subject: [PATCH 4/7] fix(notify): fix demos and docs --- examples/sites/demos/apis/notify.js | 10 ++++--- .../app/notify/position-composition-api.vue | 30 ++++++++++--------- .../sites/demos/pc/app/notify/position.vue | 29 ++++++++++-------- packages/vue/src/notify/index.ts | 3 +- 4 files changed, 40 insertions(+), 32 deletions(-) diff --git a/examples/sites/demos/apis/notify.js b/examples/sites/demos/apis/notify.js index de187ffcb4..5c0b3e60d6 100644 --- a/examples/sites/demos/apis/notify.js +++ b/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': + '通知自动关闭时间，单位毫秒数。 默认情况， success info 延时5秒 warning error 延时10秒自动关闭 ', + 'en-US': + 'Automatic notification shutdown time, in milliseconds. By default, success info Delay is 5 seconds. warning error Delay is 10 seconds' }, mode: ['pc'], pcDemo: 'duration' @@ -63,7 +65,7 @@ export default { }, { name: 'position', - type: "'top-right' | 'bottom-right'", + type: "'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'", defaultValue: "'bottom-right'", desc: { 'zh-CN': '通知显示位置', diff --git a/examples/sites/demos/pc/app/notify/position-composition-api.vue b/examples/sites/demos/pc/app/notify/position-composition-api.vue index 0e2dce48d1..cb366cdef4 100644 --- a/examples/sites/demos/pc/app/notify/position-composition-api.vue +++ b/examples/sites/demos/pc/app/notify/position-composition-api.vue @@ -1,26 +1,28 @@ - + + diff --git a/examples/sites/demos/pc/app/notify/position.vue b/examples/sites/demos/pc/app/notify/position.vue index 1cc4715e27..849d790ae1 100644 --- a/examples/sites/demos/pc/app/notify/position.vue +++ b/examples/sites/demos/pc/app/notify/position.vue @@ -1,11 +1,15 @@ - + + diff --git a/packages/vue/src/notify/index.ts b/packages/vue/src/notify/index.ts index bbc3a4a5cc..a326703e2d 100644 --- a/packages/vue/src/notify/index.ts +++ b/packages/vue/src/notify/index.ts @@ -32,7 +32,7 @@ const durationMap = { error: 10000 } -const positionList = ['top-right', 'bottom-right'] +const positionList = ['top-right', 'bottom-right', 'top-left', 'bottom-left'] const debounce = (fn, debounceDelay) => { let timer = null @@ -46,6 +46,7 @@ const debounce = (fn, debounceDelay) => { await new Promise((resolve) => { timer = setTimeout(() => { + // eslint-disable-next-line prefer-rest-params instance = fn.apply(this, arguments) timer = null From 88f535d4671ba634116b2824704bc29eef03c4fa Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sat, 19 Oct 2024 00:47:42 -0700 Subject: [PATCH 5/7] fix(notify): fix --- examples/sites/demos/pc/app/notify/webdoc/notify.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/sites/demos/pc/app/notify/webdoc/notify.js b/examples/sites/demos/pc/app/notify/webdoc/notify.js index 4a5b989304..2767ee7c67 100644 --- a/examples/sites/demos/pc/app/notify/webdoc/notify.js +++ b/examples/sites/demos/pc/app/notify/webdoc/notify.js @@ -51,9 +51,10 @@ export default { 'en-US': 'Automatic shutdown delay' }, desc: { - 'zh-CN': '

可通过 duration 属性设置自动关闭的延迟时间，默认值：4500ms 。

\n', + 'zh-CN': + '通过 duration 属性设置自动关闭的延迟时间， 默认情况， success info 延时5秒 warning error 延时10秒自动关闭。', 'en-US': - '

You can set the delay for automatic shutdown through the duration attribute. The default value is 4500 ms.

\n' + 'Use the duration property to set the automatic shutdown delay. By default, success info delays the shutdown by 5 seconds. warning error delays the shutdown by 10 seconds.' }, codeFiles: ['duration.vue'] }, From 6ea33e4ce2acd47c2fa4b1235d6aea17c13baa31 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sat, 19 Oct 2024 00:55:16 -0700 Subject: [PATCH 6/7] fix(notify): fix --- packages/theme/src/notify/index.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/theme/src/notify/index.less b/packages/theme/src/notify/index.less index 5297e59fcb..15f3c62ff8 100644 --- a/packages/theme/src/notify/index.less +++ b/packages/theme/src/notify/index.less @@ -69,8 +69,9 @@ .@{notify-prefix-cls}__content-wrapper { color: var(--tv-Notify-msg-text-color); font-size: var(--tv-Notify-msg-font-size); - word-break: break-word; max-height: var(--tv-Notify-msg-max-height); + word-break: break-word; + white-space: pre-wrap; .@{notify-prefix-cls}__content { overflow-wrap: break-word; From c0484d16121e2aed992a4201b0869500a4d849d2 Mon Sep 17 00:00:00 2001 From: shenjunjian <40288193@qq.com> Date: Sat, 19 Oct 2024 01:25:06 -0700 Subject: [PATCH 7/7] fix(notify): fix e2e test --- examples/sites/demos/pc/app/notify/basic-usage.spec.ts | 5 +++-- examples/sites/demos/pc/app/notify/position.spec.ts | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/sites/demos/pc/app/notify/basic-usage.spec.ts b/examples/sites/demos/pc/app/notify/basic-usage.spec.ts index 0a5cc39737..1958724326 100644 --- a/examples/sites/demos/pc/app/notify/basic-usage.spec.ts +++ b/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() diff --git a/examples/sites/demos/pc/app/notify/position.spec.ts b/examples/sites/demos/pc/app/notify/position.spec.ts index ff79ae6e4a..6b192ccd6b 100644 --- a/examples/sites/demos/pc/app/notify/position.spec.ts +++ b/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()