From 202292c3fb4b6eefdbad7d9f02788c04556f0bf1 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: Thu, 12 Sep 2024 19:31:34 -0700
Subject: [PATCH] feat(badge): [badge] Adapting to the SMB theme (#2107)
* feat(badge): [badge] Adapting to the SMB theme
* feat(badge): [badge] Adapting to the SMB theme
---
.../demos/pc/app/badge/basic-usage.spec.ts | 2 +-
.../pc/app/badge/offset-composition-api.vue | 30 +++++++++++++++++--
.../sites/demos/pc/app/badge/offset.spec.ts | 7 +++--
examples/sites/demos/pc/app/badge/offset.vue | 30 +++++++++++++++++--
.../sites/demos/pc/app/badge/type.spec.ts | 8 ++---
packages/theme/src/badge/vars.less | 2 +-
packages/vue/src/badge/src/index.ts | 2 +-
7 files changed, 67 insertions(+), 14 deletions(-)
diff --git a/examples/sites/demos/pc/app/badge/basic-usage.spec.ts b/examples/sites/demos/pc/app/badge/basic-usage.spec.ts
index a00ff4103..95f475def 100644
--- a/examples/sites/demos/pc/app/badge/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/badge/basic-usage.spec.ts
@@ -10,6 +10,6 @@ test('测试基本用法', async ({ page }) => {
await expect(textWrapper).toContainText('我的待办')
await expect(badge).toContainText('2')
- await expect(badge).toHaveCSS('background-color', 'rgb(246, 111, 106)')
+ await expect(badge).toHaveCSS('background-color', 'rgb(242, 48, 48)')
await expect(badge).toHaveCSS('color', 'rgb(255, 255, 255)')
})
diff --git a/examples/sites/demos/pc/app/badge/offset-composition-api.vue b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
index 59168ef3b..dca31fb48 100644
--- a/examples/sites/demos/pc/app/badge/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
@@ -2,14 +2,40 @@
使用字符串：
-
我的待办
+
我的待办
使用数字：
-
我的待办
+
我的待办
+
+
区域使用：
+
+
+
+
diff --git a/examples/sites/demos/pc/app/badge/offset.spec.ts b/examples/sites/demos/pc/app/badge/offset.spec.ts
index c1c9cf3de..2d632e9b8 100644
--- a/examples/sites/demos/pc/app/badge/offset.spec.ts
+++ b/examples/sites/demos/pc/app/badge/offset.spec.ts
@@ -5,8 +5,9 @@ test('标记的位置', async ({ page }) => {
await page.goto('badge#offset')
const demo = page.locator('#offset')
- const badge = demo.locator('.tiny-badge')
+ const badge = demo.locator('div').filter({ hasText: /^2$/ }).first()
+ const badge2 = demo.locator('div').filter({ hasText: /^2$/ }).nth(1)
- await expect(badge.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -4)')
- await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -6)')
+ await expect(badge).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -8)')
+ await expect(badge2).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -8)')
})
diff --git a/examples/sites/demos/pc/app/badge/offset.vue b/examples/sites/demos/pc/app/badge/offset.vue
index fbccbacf7..1928fcc84 100644
--- a/examples/sites/demos/pc/app/badge/offset.vue
+++ b/examples/sites/demos/pc/app/badge/offset.vue
@@ -2,11 +2,22 @@
使用字符串：
-
我的待办
+
我的待办
使用数字：
-
我的待办
+
我的待办
+
+
区域使用：
+
+
@@ -19,3 +30,18 @@ export default {
}
}
+
+
diff --git a/examples/sites/demos/pc/app/badge/type.spec.ts b/examples/sites/demos/pc/app/badge/type.spec.ts
index 1bf6faf65..126199403 100644
--- a/examples/sites/demos/pc/app/badge/type.spec.ts
+++ b/examples/sites/demos/pc/app/badge/type.spec.ts
@@ -15,11 +15,11 @@ test('主題样式', async ({ page }) => {
await expect(dangerBadge).toHaveClass(/tiny-badge--danger/)
await expect(dangerBadge).toHaveCSS('background-color', 'rgb(246, 111, 106)')
await expect(primaryBadge).toHaveClass(/tiny-badge--primary/)
- await expect(primaryBadge).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+ await expect(primaryBadge).toHaveCSS('background-color', 'rgb(25, 25, 25)')
await expect(successBadge).toHaveClass(/tiny-badge--success/)
- await expect(successBadge).toHaveCSS('background-color', 'rgb(80, 212, 171)')
+ await expect(successBadge).toHaveCSS('background-color', 'rgb(92, 179, 0)')
await expect(warningBadge).toHaveClass(/tiny-badge--warning/)
- await expect(warningBadge).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+ await expect(warningBadge).toHaveCSS('background-color', 'rgb(255, 136, 0)')
await expect(infoBadge).toHaveClass(/tiny-badge--info/)
- await expect(infoBadge).toHaveCSS('background-color', 'rgb(37, 43, 58)')
+ await expect(infoBadge).toHaveCSS('background-color', 'rgb(25, 25, 25)')
})
diff --git a/packages/theme/src/badge/vars.less b/packages/theme/src/badge/vars.less
index a0f2a5139..3218707dd 100644
--- a/packages/theme/src/badge/vars.less
+++ b/packages/theme/src/badge/vars.less
@@ -13,7 +13,7 @@
.component-css-vars-badge() {
--ti-badge-size: var(--ti-common-font-size-2);
--ti-badge-font-size: var(--ti-common-font-size-0);
- --ti-badge-line-height: calc(var(--ti-common-font-size-2) - 2px);
+ --ti-badge-line-height: calc(var(--ti-common-line-height-base) - 4px);
--ti-badge-font-weight: var(--ti-common-font-weight-normal);
--ti-badge-border-radius: var(--ti-common-border-radius-4);
--ti-badge-text-color: var(--ti-base-color-bg-7);
diff --git a/packages/vue/src/badge/src/index.ts b/packages/vue/src/badge/src/index.ts
index 7ba1640a9..e55103e09 100644
--- a/packages/vue/src/badge/src/index.ts
+++ b/packages/vue/src/badge/src/index.ts
@@ -47,7 +47,7 @@ export const badgeProps = {
badgeClass: String,
offset: {
type: Array,
- default: () => ['0', '-50%']
+ default: () => [0, 0]
},
data: [String, Number]
}