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

Author: Youyou-smiles

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)')
 })

examples/sites/demos/pc/app/badge/offset-composition-api.vue

@@ -2,14 +2,40 @@
   <div>
     <p>使用字符串：</p>
     <br />
-    <tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
     <br /><br />
     <p>使用数字：</p>
     <br />
-    <tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="[0, -8]">我的待办</tiny-badge>
+    <br /><br />
+    <p>区域使用：</p>
+    <br />
+    <div class="demo-box">
+      <tiny-badge :value="9" :max="9" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="99" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="100" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="1000" :max="999" :offset="['-50%', '-212%']"
+        ><div class="demo-badge-offset"></div
+      ></tiny-badge>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.demo-badge-offset {
+  display: inline-block;
+  width: 60px;
+  height: 40px;
+  background-color: gainsboro;
+}
+.demo-box {
+  width: 400px;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

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)')
 })

examples/sites/demos/pc/app/badge/offset.vue

@@ -2,11 +2,22 @@
   <div>
     <p>使用字符串：</p>
     <br />
-    <tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
     <br /><br />
     <p>使用数字：</p>
     <br />
-    <tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="[0, -8]">我的待办</tiny-badge>
+    <br /><br />
+    <p>区域使用：</p>
+    <br />
+    <div class="demo-box">
+      <tiny-badge :value="9" :max="9" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="99" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="100" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
+      <tiny-badge :value="1000" :max="999" :offset="['-50%', '-212%']"
+        ><div class="demo-badge-offset"></div
+      ></tiny-badge>
+    </div>
   </div>
 </template>
 
@@ -19,3 +30,18 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-badge-offset {
+  display: inline-block;
+  width: 60px;
+  height: 40px;
+  background-color: gainsboro;
+}
+.demo-box {
+  width: 400px;
+  height: 60px;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

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)')
 })

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);

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]
 }