From 0c5c0217c653d41df9f4f7cdb0f0275215c0e10d Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Wed, 18 May 2022 21:54:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(badge):=E4=BF=AE=E6=94=B9=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-badge/src/style/index.ts | 30 ++++++++++++++++---------
 theme/themeVariant.json5                |  5 ++++-
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/react-badge/src/style/index.ts b/packages/react-badge/src/style/index.ts
index f22d0e84b8..36ad0f05a4 100644
--- a/packages/react-badge/src/style/index.ts
+++ b/packages/react-badge/src/style/index.ts
@@ -67,10 +67,16 @@ export interface BadgeSupCountDotProps extends ThemeVariantValueOptions {
   dot?: boolean;
   nowrap?: boolean;
   defaultTheme?: {
-    boxShadowColorBadge: string;
     colorBadge: string;
     fontSizeSmall: string;
     backgroundBadgeCountDot: string;
+    boxShadowBadgeCountDot: string;
+    widthBadgeColorDot: string;
+    topBadgeCountDot: string;
+    topBadgeCount: string;
+    heightBadgeCount: string;
+    borderRadiusBadgeCount: string;
+
     [k: string]: string | number;
   };
 }
@@ -82,13 +88,13 @@ export const BadgeSupCountDot = styled.sup<BadgeSupCountDotProps>`
       position: absolute;
       -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
-      top: -10px;
-      height: 16px;
-      border-radius: 10px;
-      min-width: 16px;
+      top: ${(props) => getThemeVariantValue(props, 'topBadgeCount')};
+      height: ${(props) => getThemeVariantValue(props, 'heightBadgeCount')};
+      border-radius: ${(props) => getThemeVariantValue(props, 'borderRadiusBadgeCount')};
+      min-width: ${(props) => getThemeVariantValue(props, 'heightBadgeCount')};
       background: ${(props) => getThemeVariantValue(props, 'backgroundBadgeCountDot')};
       color: ${(props) => getThemeVariantValue(props, 'colorBadge')};
-      line-height: 16px;
+      line-height: ${(props) => getThemeVariantValue(props, 'heightBadgeCount')};
       text-align: center;
       padding: 0 5px;
       font-size: ${(props) => getThemeVariantValue(props, 'fontSizeSmall')};
@@ -120,9 +126,9 @@ export const BadgeSupCountDot = styled.sup<BadgeSupCountDotProps>`
       transform-origin: 0 center;
       overflow: hidden;
       color: transparent;
-      top: -4px;
-      height: 6px;
-      width: 6px;
+      top: ${(props) => getThemeVariantValue(props, 'topBadgeCountDot')};
+      height: ${(props) => getThemeVariantValue(props, 'widthBadgeColorDot')};
+      width: ${(props) => getThemeVariantValue(props, 'widthBadgeColorDot')};
       padding: 0;
       border-radius: 100%;
       background: ${(props) => getThemeVariantValue(props, 'backgroundBadgeCountDot')};
@@ -150,10 +156,14 @@ BadgeColorDot.defaultProps = {
 };
 export const BadgeSupCountDotDefaultTheme = {
   backgroundBadgeCountDot: '#f04134',
-  boxShadowColorBadge: '#fff',
   colorBadge: '#fff',
   fontSizeSmall: '12px',
   boxShadowBadgeCountDot: '0 0 0 1px #fff',
+  widthBadgeColorDot: '6px',
+  topBadgeCountDot: '-4px',
+  topBadgeCount: '-10px',
+  heightBadgeCount: '16px',
+  borderRadiusBadgeCount: '10px',
 };
 BadgeSupCountDot.defaultProps = {
   defaultTheme: BadgeSupCountDotDefaultTheme,
diff --git a/theme/themeVariant.json5 b/theme/themeVariant.json5
index 1b815fe03b..729cf0a056 100644
--- a/theme/themeVariant.json5
+++ b/theme/themeVariant.json5
@@ -41,8 +41,11 @@
   widthBadgeColorDot: '6px',
   backgroundColorBadgepPocessing: '#007bff',
   backgroundBadgeCountDot: '#f04134',
-  boxShadowColorBadge: '#fff',
   boxShadowBadgeCountDot: '0 0 0 1px #fff',
+  topBadgeCountDot: '-4px',
+  topBadgeCount: '-10px',
+  heightBadgeCount: '16px',
+  borderRadiusBadgeCount: '10px',
   // ---------------------------breadcrumb 面包屑 ---------------------------------
   colorBreadcrumb: '#6e6e6e',