From 0652b4bceceec0dacc0792ebb151b7ab41ced72b Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Thu, 5 Sep 2024 06:08:08 -0700
Subject: [PATCH 1/3] feat(badge): [badge] Adapting to the SMB theme

---
 .../demos/pc/app/badge/is-dot-composition-api.vue  | 10 ++++++++++
 examples/sites/demos/pc/app/badge/is-dot.spec.ts   |  7 +++++--
 examples/sites/demos/pc/app/badge/is-dot.vue       | 14 ++++++++++++++
 .../demos/pc/app/badge/max-composition-api.vue     |  6 +++++-
 examples/sites/demos/pc/app/badge/max.spec.ts      |  4 ++--
 examples/sites/demos/pc/app/badge/max.vue          |  8 +++++++-
 .../demos/pc/app/badge/offset-composition-api.vue  |  4 ++--
 examples/sites/demos/pc/app/badge/offset.spec.ts   |  4 ++--
 examples/sites/demos/pc/app/badge/offset.vue       |  4 ++--
 packages/renderless/src/badge/index.ts             | 12 ++++++------
 packages/theme/src/badge/index.less                |  1 +
 packages/theme/src/badge/smb-theme.js              |  3 ++-
 packages/vue/src/badge/src/index.ts                |  2 +-
 13 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/examples/sites/demos/pc/app/badge/is-dot-composition-api.vue b/examples/sites/demos/pc/app/badge/is-dot-composition-api.vue
index 585f624d5f..104459c8a8 100644
--- a/examples/sites/demos/pc/app/badge/is-dot-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/is-dot-composition-api.vue
@@ -1,7 +1,17 @@
 <template>
   <tiny-badge is-dot>小圆点显示</tiny-badge>
+  <br /><br />
+  <tiny-badge is-dot>
+    <template #default>
+      <tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
+    </template>
+  </tiny-badge>
 </template>
 
 <script setup>
 import { Badge as TinyBadge } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
+import { Button as TinyButton } from '@opentiny/vue'
+
+const TinyIconMail = iconMail()
 </script>
diff --git a/examples/sites/demos/pc/app/badge/is-dot.spec.ts b/examples/sites/demos/pc/app/badge/is-dot.spec.ts
index f864cd3a07..094223547c 100644
--- a/examples/sites/demos/pc/app/badge/is-dot.spec.ts
+++ b/examples/sites/demos/pc/app/badge/is-dot.spec.ts
@@ -4,8 +4,11 @@ test('小圆点标记', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#is-dot')
 
-  const demo = page.locator('#is-dot')
-  const badge = demo.locator('.tiny-badge')
+  const demo = page
+    .locator('div')
+    .filter({ hasText: /^小圆点显示$/ })
+    .first()
+  const badge = demo.locator('.tiny-badge').first()
 
   await expect(badge).toHaveClass(/tiny-badge--default/)
   await expect(badge).toHaveCSS('width', '6px')
diff --git a/examples/sites/demos/pc/app/badge/is-dot.vue b/examples/sites/demos/pc/app/badge/is-dot.vue
index 658d007305..ff27af74aa 100644
--- a/examples/sites/demos/pc/app/badge/is-dot.vue
+++ b/examples/sites/demos/pc/app/badge/is-dot.vue
@@ -1,13 +1,27 @@
 <template>
   <tiny-badge is-dot>小圆点显示</tiny-badge>
+  <br /><br />
+  <tiny-badge is-dot>
+    <template #default>
+      <tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
+    </template>
+  </tiny-badge>
 </template>
 
 <script>
 import { Badge } from '@opentiny/vue'
+import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
+    TinyButton: Button,
     TinyBadge: Badge
+  },
+  data() {
+    return {
+      TinyIconMail: iconMail()
+    }
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/badge/max-composition-api.vue b/examples/sites/demos/pc/app/badge/max-composition-api.vue
index ad7d36055e..deef76bb3f 100644
--- a/examples/sites/demos/pc/app/badge/max-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/max-composition-api.vue
@@ -1,5 +1,9 @@
 <template>
-  <tiny-badge :value="5" :max="2">最大值显示</tiny-badge>
+  <tiny-badge :value="10" :max="9">最大值显示</tiny-badge>
+  <br />
+  <tiny-badge value="100" :max="99" data="我的待办"></tiny-badge>
+  <br />
+  <tiny-badge value="1000" :max="999" data="我的待办"></tiny-badge>
 </template>
 
 <script setup>
diff --git a/examples/sites/demos/pc/app/badge/max.spec.ts b/examples/sites/demos/pc/app/badge/max.spec.ts
index 4a49b92884..ca98a91358 100644
--- a/examples/sites/demos/pc/app/badge/max.spec.ts
+++ b/examples/sites/demos/pc/app/badge/max.spec.ts
@@ -5,7 +5,7 @@ test('计数最大值', async ({ page }) => {
   await page.goto('badge#max')
 
   const demo = page.locator('#max')
-  const badge = demo.locator('.tiny-badge')
+  const badge = demo.locator('.tiny-badge').first()
 
-  await expect(badge).toContainText('2+')
+  await expect(badge).toContainText('9+')
 })
diff --git a/examples/sites/demos/pc/app/badge/max.vue b/examples/sites/demos/pc/app/badge/max.vue
index d64c543d7d..a64990d8c0 100644
--- a/examples/sites/demos/pc/app/badge/max.vue
+++ b/examples/sites/demos/pc/app/badge/max.vue
@@ -1,5 +1,11 @@
 <template>
-  <tiny-badge :value="5" :max="2">最大值显示</tiny-badge>
+  <template>
+    <tiny-badge :value="10" :max="9">最大值显示</tiny-badge>
+    <br />
+    <tiny-badge value="100" :max="99" data="我的待办"></tiny-badge>
+    <br />
+    <tiny-badge value="1000" :max="999" data="我的待办"></tiny-badge>
+  </template>
 </template>
 
 <script>
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 80890cce32..59168ef3b1 100644
--- a/examples/sites/demos/pc/app/badge/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
@@ -2,11 +2,11 @@
   <div>
     <p>使用字符串：</p>
     <br />
-    <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
     <br /><br />
     <p>使用数字：</p>
     <br />
-    <tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/badge/offset.spec.ts b/examples/sites/demos/pc/app/badge/offset.spec.ts
index 4b2845d2ca..c1c9cf3de0 100644
--- 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, -10)')
-  await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')
+  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)')
 })
diff --git a/examples/sites/demos/pc/app/badge/offset.vue b/examples/sites/demos/pc/app/badge/offset.vue
index 80217124cd..fbccbacf74 100644
--- a/examples/sites/demos/pc/app/badge/offset.vue
+++ b/examples/sites/demos/pc/app/badge/offset.vue
@@ -2,11 +2,11 @@
   <div>
     <p>使用字符串：</p>
     <br />
-    <tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
     <br /><br />
     <p>使用数字：</p>
     <br />
-    <tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
+    <tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
   </div>
 </template>
 
diff --git a/packages/renderless/src/badge/index.ts b/packages/renderless/src/badge/index.ts
index e73122f2d8..485cbed38e 100644
--- a/packages/renderless/src/badge/index.ts
+++ b/packages/renderless/src/badge/index.ts
@@ -15,20 +15,20 @@ import type { StyleValue } from 'vue'
 export const computedContent =
   ({ props, state }: Pick<IBadgeRenderlessParams, 'props' | 'state'>) =>
   (): IBadgeContent =>
-    typeof state.valueRef === 'number' && typeof props.max === 'number'
-      ? props.max < state.valueRef
+    (typeof props.value === 'number' || typeof props.value === 'string') && typeof props.max === 'number'
+      ? props.max < Number(state.valueRef)
         ? `${props.max}+`
         : state.valueRef
       : state.valueRef
 
 export const computedValueRef =
   ({ props }: Pick<IBadgeRenderlessParams, 'props'>) =>
-  (): number | undefined => {
-    if (typeof props.value === 'number') {
+  (): number | string | undefined => {
+    if (typeof props.value === 'number' || typeof props.value === 'string') {
       return props.value
+    } else {
+      return undefined
     }
-
-    return typeof props.modelValue === 'number' ? props.modelValue : undefined
   }
 
 export const computedTransform =
diff --git a/packages/theme/src/badge/index.less b/packages/theme/src/badge/index.less
index b07b880d2d..46cfaa9426 100644
--- a/packages/theme/src/badge/index.less
+++ b/packages/theme/src/badge/index.less
@@ -84,6 +84,7 @@
     vertical-align: top;
     padding: 0;
     border-radius: 50%;
+    border: unset;
   }
 
   &--primary {
diff --git a/packages/theme/src/badge/smb-theme.js b/packages/theme/src/badge/smb-theme.js
index 8877f93349..e3a2d83a10 100644
--- a/packages/theme/src/badge/smb-theme.js
+++ b/packages/theme/src/badge/smb-theme.js
@@ -5,5 +5,6 @@ export const tinyBadgeSmbTheme = {
   'ti-badge-font-size': 'var(--ti-common-font-size-0)',
   'ti-badge-text-color': 'var(--ti-base-color-bg-7)',
   'ti-badge-border-radius': 'var(--ti-common-border-radius-4)',
-  'ti-badge-border': 'var(--ti-common-border-weight-normal)'
+  'ti-badge-border': 'var(--ti-common-border-weight-normal)',
+  'ti-badge-font-weight': 'var(--ti-common-font-weight-normal)'
 }
diff --git a/packages/vue/src/badge/src/index.ts b/packages/vue/src/badge/src/index.ts
index e55103e09e..7ba1640a9d 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, 0]
+    default: () => ['0', '-50%']
   },
   data: [String, Number]
 }

From cc412882bc856c199343ea1ef2e0fcf32f0dbe15 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 9 Sep 2024 00:33:26 -0700
Subject: [PATCH 2/3] feat(badge): [badge] Adapting to the SMB theme

---
 packages/theme/src/badge/index.less   | 2 +-
 packages/theme/src/badge/smb-theme.js | 3 ++-
 packages/theme/src/badge/vars.less    | 1 +
 packages/vue/src/badge/src/pc.vue     | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/theme/src/badge/index.less b/packages/theme/src/badge/index.less
index 46cfaa9426..2039ae7283 100644
--- a/packages/theme/src/badge/index.less
+++ b/packages/theme/src/badge/index.less
@@ -33,7 +33,7 @@
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
-  margin-left: 4px;
+  margin-left: var(--ti-badge-margin-left);
   border: var(--ti-badge-border) solid #FFFFFF;
 
   &:empty {
diff --git a/packages/theme/src/badge/smb-theme.js b/packages/theme/src/badge/smb-theme.js
index e3a2d83a10..a70b51702d 100644
--- a/packages/theme/src/badge/smb-theme.js
+++ b/packages/theme/src/badge/smb-theme.js
@@ -6,5 +6,6 @@ export const tinyBadgeSmbTheme = {
   'ti-badge-text-color': 'var(--ti-base-color-bg-7)',
   'ti-badge-border-radius': 'var(--ti-common-border-radius-4)',
   'ti-badge-border': 'var(--ti-common-border-weight-normal)',
-  'ti-badge-font-weight': 'var(--ti-common-font-weight-normal)'
+  'ti-badge-font-weight': 'var(--ti-common-font-weight-normal)',
+  'ti-badge-margin-left': '0'
 }
diff --git a/packages/theme/src/badge/vars.less b/packages/theme/src/badge/vars.less
index 9b5b5a6795..50c49afadb 100644
--- a/packages/theme/src/badge/vars.less
+++ b/packages/theme/src/badge/vars.less
@@ -27,4 +27,5 @@
   --ti-badge-danger-bg-color: var(--ti-base-color-error-3, #f66f6a);
   --ti-badge-info-bg-color: var(--ti-common-color-info-normal, #252b3a);
   --ti-badge-border: 0;
+  --ti-badge-margin-left: 4px;
 }
diff --git a/packages/vue/src/badge/src/pc.vue b/packages/vue/src/badge/src/pc.vue
index c2bdd2a3e4..e111ecbd01 100644
--- a/packages/vue/src/badge/src/pc.vue
+++ b/packages/vue/src/badge/src/pc.vue
@@ -22,7 +22,7 @@
         type ? 'tiny-badge--' + type : '',
         badgeClass || ''
       ]"
-      :style="state.transform"
+      :style="!isDot ? state.transform : ''"
     >
       <slot name="content">
         <a v-if="state.href" :href="state.href" :target="target" rel="noopener noreferrer">{{ state.content }}</a>

From 6a50e17d529169883a13de6511dc4b69dcf0621c Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 9 Sep 2024 20:45:46 -0700
Subject: [PATCH 3/3] feat(badge): [badge] Adapting to the SMB theme

---
 examples/sites/demos/pc/app/badge/offset-composition-api.vue | 4 ++--
 examples/sites/demos/pc/app/badge/offset.spec.ts             | 4 ++--
 examples/sites/demos/pc/app/badge/offset.vue                 | 4 ++--
 packages/vue/src/badge/src/index.ts                          | 2 +-
 4 files changed, 7 insertions(+), 7 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
index 59168ef3b1..80890cce32 100644
--- a/examples/sites/demos/pc/app/badge/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/badge/offset-composition-api.vue
@@ -2,11 +2,11 @@
   <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>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/badge/offset.spec.ts b/examples/sites/demos/pc/app/badge/offset.spec.ts
index c1c9cf3de0..4b2845d2ca 100644
--- 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
index fbccbacf74..80217124cd 100644
--- a/examples/sites/demos/pc/app/badge/offset.vue
+++ b/examples/sites/demos/pc/app/badge/offset.vue
@@ -2,11 +2,11 @@
   <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>
   </div>
 </template>
 
diff --git a/packages/vue/src/badge/src/index.ts b/packages/vue/src/badge/src/index.ts
index 7ba1640a9d..e55103e09e 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]
 }