feat(badge): [badge] Adapting to the SMB theme

opentiny · Sep 12, 2024 · 612fb63 · 612fb63
1 parent ecc4f7d
commit 612fb63
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 8 deletions.
diff --git 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 @@
   <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, -10]">我的待办</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>
diff --git a/examples/sites/demos/pc/app/badge/offset.spec.ts b/examples/sites/demos/pc/app/badge/offset.spec.ts
@@ -7,6 +7,6 @@ test('标记的位置', async ({ page }) => {
   const demo = page.locator('#offset')
   const badge = demo.locator('.tiny-badge')
 
-  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.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')
+  await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')
 })
diff --git a/examples/sites/demos/pc/app/badge/offset.vue b/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, -10]">我的待办</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>
diff --git 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
@@ -47,7 +47,7 @@ export const badgeProps = {
   badgeClass: String,
   offset: {
     type: Array,
-    default: () => ['0', '-50%']
+    default: () => [0, 0]
   },
   data: [String, Number]
 }