From 3e868bfd65e390e01956bd5fa7d117881c474c38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=9C=E9=A3=8E=E4=BD=BF=E5=91=BD=E5=BF=85=E8=BE=BE?= <1664677472@qq.com> Date: Tue, 24 Sep 2024 04:27:26 -0700 Subject: [PATCH] feat(alert): [alert] Adapting to the SMB theme (#2169) --- .../sites/demos/pc/app/alert/basic-usage.spec.ts | 16 ++++++++-------- examples/sites/demos/pc/app/alert/size.spec.ts | 2 +- packages/theme/src/alert/index.less | 9 +++------ packages/theme/src/alert/vars.less | 10 ++-------- packages/vue/src/alert/src/index.ts | 3 ++- 5 files changed, 16 insertions(+), 24 deletions(-) diff --git a/examples/sites/demos/pc/app/alert/basic-usage.spec.ts b/examples/sites/demos/pc/app/alert/basic-usage.spec.ts index a565fce550..851312da61 100644 --- a/examples/sites/demos/pc/app/alert/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/alert/basic-usage.spec.ts @@ -8,14 +8,14 @@ test('基本用法', async ({ page }) => { const alertBox = demo.locator('.tiny-alert') // 颜色边框正确 - await expect(alertBox.first()).toHaveCSS('background-color', 'rgb(235, 246, 255)') - await expect(alertBox.first()).toHaveCSS('border-bottom-color', 'rgb(190, 204, 250)') - await expect(alertBox.nth(1)).toHaveCSS('background-color', 'rgb(255, 238, 237)') - await expect(alertBox.nth(1)).toHaveCSS('border-bottom-color', 'rgb(255, 188, 186)') - await expect(alertBox.nth(2)).toHaveCSS('background-color', 'rgb(237, 255, 249)') - await expect(alertBox.nth(2)).toHaveCSS('border-bottom-color', 'rgb(172, 242, 220)') - await expect(alertBox.nth(3)).toHaveCSS('background-color', 'rgb(255, 243, 232)') - await expect(alertBox.nth(3)).toHaveCSS('border-bottom-color', 'rgb(255, 208, 166)') + await expect(alertBox.first()).toHaveCSS('background-color', 'rgb(222, 236, 255)') + await expect(alertBox.first()).toHaveCSS('border-bottom-color', 'rgb(222, 236, 255)') + await expect(alertBox.nth(1)).toHaveCSS('background-color', 'rgb(252, 227, 225)') + await expect(alertBox.nth(1)).toHaveCSS('border-bottom-color', 'rgb(252, 227, 225)') + await expect(alertBox.nth(2)).toHaveCSS('background-color', 'rgb(230, 242, 213)') + await expect(alertBox.nth(2)).toHaveCSS('border-bottom-color', 'rgb(230, 242, 213)') + await expect(alertBox.nth(3)).toHaveCSS('background-color', 'rgb(255, 235, 209)') + await expect(alertBox.nth(3)).toHaveCSS('border-bottom-color', 'rgb(255, 235, 209)') // 警告可见 const alertSuccess = demo.locator('.tiny-alert--success') diff --git a/examples/sites/demos/pc/app/alert/size.spec.ts b/examples/sites/demos/pc/app/alert/size.spec.ts index 4f1d53262f..5a0e23bb84 100644 --- a/examples/sites/demos/pc/app/alert/size.spec.ts +++ b/examples/sites/demos/pc/app/alert/size.spec.ts @@ -6,5 +6,5 @@ test('尺寸', async ({ page }) => { const largeAlert = page.locator('.tiny-alert').nth(1) await expect(largeAlert).toHaveClass(/tiny-alert--large/) - await expect(largeAlert).toHaveCSS('height', '68px') + await expect(largeAlert).toHaveCSS('height', '77px') }) diff --git a/packages/theme/src/alert/index.less b/packages/theme/src/alert/index.less index fc5631b7ad..f94483e8de 100644 --- a/packages/theme/src/alert/index.less +++ b/packages/theme/src/alert/index.less @@ -31,6 +31,7 @@ margin: var(--ti-alert-normal-margin-vertical) var(--ti-alert-normal-margin-horizontal); display: flex; justify-content: flex-start; + align-items: center; .@{alert-prefix-cls}__content { padding: var(--ti-alert-normal-content-padding-vertical) var(--ti-alert-normal-content-padding-horizontal); @@ -64,7 +65,6 @@ .@{alert-prefix-cls}__icon { font-size: var(--ti-alert-large-icon-font-size); - margin-top: var(--ti-alert-large-icon-margin-top); vertical-align: top; flex-shrink: 0; } @@ -146,13 +146,10 @@ &__icon { font-size: var(--ti-alert-icon-font-size); } - &__icon:first-child { - margin-top: var(--ti-alert-icon-margin-top); - } &.is-center { justify-content: center; - text-align: center; + align-items: center; } .is-custom { @@ -192,7 +189,7 @@ font-size: var(--ti-alert-title-font-size); color: var(--ti-alert-title-text-color); font-weight: bold; - margin-top: var(--ti-alert-title-margin-top); + line-height: 20px; } & &__description { diff --git a/packages/theme/src/alert/vars.less b/packages/theme/src/alert/vars.less index 6c90c2d4a2..f20133283f 100644 --- a/packages/theme/src/alert/vars.less +++ b/packages/theme/src/alert/vars.less @@ -48,8 +48,6 @@ --ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #252b3a); // 标题字号 --ti-alert-title-font-size: var(--ti-common-font-size-2); - // 标题图标顶部外边距 - --ti-alert-icon-margin-top: calc(var(--ti-common-space-6) / 2); // 标题图标字号 --ti-alert-icon-font-size: var(--ti-common-font-size-2, 16px); // 描述内容行高 @@ -89,9 +87,7 @@ // large尺寸操作字号 --ti-alert-opration-font-size: var(--ti-common-font-size-base, 12px); // large尺寸图标字号 - --ti-alert-large-icon-font-size: var(--ti-common-font-size-5, 24px); - // large尺寸图标顶部外边距 - --ti-alert-large-icon-margin-top: var(--ti-common-space-0); + --ti-alert-large-icon-font-size: var(--ti-common-font-size-4, 24px); // large尺寸描述内容左内边距 --ti-alert-large-content-padding-left: var(--ti-common-space-2x); // 大尺寸关闭图标字号 @@ -150,7 +146,7 @@ // simple类型边框色 --ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6); // simple类型图标色 - --ti-alert-simple-icon-color: var(--ti-common-color-text-secondary, #575d6c); + --ti-alert-simple-icon-color: #808080; // simple类型链接色(hide) --ti-alert-simple-link-text-color: var(--ti-common-color-primary-active, #7693f5); // simple类型背景色 @@ -159,6 +155,4 @@ --ti-alert-simple-close-icon-color: var(--ti-alert-simple-icon-color); // simple类型悬浮关闭图标色 --ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color); - // 标题的上边距 - --ti-alert-title-margin-top: var(--ti-common-size-base); } diff --git a/packages/vue/src/alert/src/index.ts b/packages/vue/src/alert/src/index.ts index de4dfff48f..4f1a2d52b4 100644 --- a/packages/vue/src/alert/src/index.ts +++ b/packages/vue/src/alert/src/index.ts @@ -17,7 +17,8 @@ export const $constants = { success: 'icon-success', error: 'icon-error', info: 'icon-help', - warning: 'icon-warning' + warning: 'icon-warning', + simple: 'icon-help' }, TITLE_MAP: { success: 'ui.alert.success',