feat:Badge组件支持offset、overflowCount、color设置 (#2796)

Co-authored-by: wangyu90 <wangyu90@baidu.com>

docs/zh-CN/components/badge.md

@@ -133,6 +133,19 @@ order: 30
 ]
 ```
 
+通过 `offset` 来控制角标显示位置，offset优先级大于position。当设置了offset后，以postion为top-right为基准进行定位。offset在mode=ribbon下设置无效。
+
+```schema: scope="body"
+[
+  {
+    "type": "avatar",
+    "badge": {
+      "offset": [10, 10]
+    }
+  }
+]
+```
+
 ## 动态数字
 
 `text` 可以取上下文变量。
@@ -156,6 +169,26 @@ order: 30
 }
 ```
 
+## 设置封顶值
+
+通过 `overflowCount` 可以设置封顶值。超过 overflowCount 的会显示为 ${overflowCount}+，默认的 overflowCount 为 99
+
+```schema
+{
+  "type": "page",
+  "body": [
+    {
+      "type": "avatar",
+      "badge": {
+        "mode": "text",
+        "text": 10,
+        "overflowCount": 9
+      }
+    }
+  ]
+}
+```
+
 ## 动态控制是否显示角标
 
 角标可以直接写表达式来判断是否显示
@@ -246,6 +279,24 @@ order: 30
 ]
 ```
 
+## 设置角标级别
+
+通过 `level` 来设置角标级别，改变角标背景颜色
+
+```schema: scope="body"
+[
+  {
+    "type": "avatar",
+    "badge": {
+      "mode": "text",
+      "text": 10,
+      "size": 20,
+      "level": "success"
+    }
+  },
+]
+```
+
 ## 是否显示动画
 
 在默认点状态下，可以通过设置 `animation` 属性来控制是否显示动画
@@ -290,14 +341,18 @@ order: 30
   }
 ]
 ```
-
 ## 属性表
 
-| 属性名    | 类型      | 默认值 | 说明                      |
+| 属性名         | 类型                 | 默认值      | 说明                                                            |
-| --------- | --------- | ------ | ------------------------- |
+| ------------- | ------------------- | ---------- | ----------------------------------------------------------------|
-| className | `string`  |        | 外层 dom 的类名           |
+| mode          | `string`            |  dot       | 角标类型，可以是 dot/text                                          |
-| text      | `text`    |        | 数字                      |
+| text          | `text`、`number`    |            | 角标文案，支持字符串和数字，在mode='dot'下设置无效                      |
-| mode      | `string`  |        | 角标类型，可以是 dot/text |
+| size          | `number`            |            | 角标大小                                                          |
-| className | `string`  |        | 外层 dom 的类名           |
+| level         | `string`            |            | 角标级别, 可以是info/success/warning/danger, 设置之后角标背景颜色不同   |
-| animation | `boolean` |        | 角标是否显示动画          |
+| overflowCount | `number`            |   99       | 设置封顶的数字值                                                    |
-| style     | `object`  |        | 角标的自定义样式          |
+| position      | `string`            | top-right  | 角标位置， 可以是top-right/top-left/bottom-right/bottom-left        |
+| offset        | `number[top, left]` |            | 角标位置，优先级大于position，当设置了offset后，以postion为top-right为基准进行定位 
+| className     | `string`            |            | 外层 dom 的类名                                                    |
+| animation     | `boolean`           |            | 角标是否显示动画                                                    |
+| style         | `object`            |            | 角标的自定义样式                                                    |
+| visibleOn     | [表达式](../../../docs/concepts/expression) |     | 控制角标的显示隐藏                                   |

scss/_properties.scss

@@ -166,6 +166,10 @@
 
   --Badge-size: var(--gap-md);
   --Badge-color: var(--white);
+  --Badge--success-bg: var(--success);
+  --Badge--info-bg: var(--info);
+  --Badge--warning-bg: var(--warning);
+  --Badge--danger-bg: var(--danger);
 
   --Button--danger-bg: var(--danger);
   --Button--danger-border: var(--Button--danger-bg);

scss/components/_badge.scss

@@ -12,7 +12,6 @@
     transform-origin: 100% 0;
     z-index: auto;
     border-radius: calc(var(--Badge-size) / 2);
-    box-shadow: 0 0 0 1px #fff;
   }
 
   &--top-left {
@@ -38,6 +37,21 @@
     transform: translate(50%, 50%);
   }
 
+  &--danger {
+    background: var(--Badge--danger-bg);
+  }
+
+  &--info {
+    background: var(--Badge--info-bg);
+  }
+
+  &--success {
+    background: var(--Badge--success-bg);
+  }
+
+  &--warning {
+    background: var(--Badge--warning-bg);
+  }
   // 显示文字
   &-text {
     color: var(--Badge-color);

src/components/Badge.tsx

@@ -17,7 +17,7 @@ export interface BadgeSchema extends BaseSchema {
   /**
    * 文本内容
    */
-  text?: string;
+  text?: string | number;
 
   /**
    * 大小
@@ -29,11 +29,21 @@ export interface BadgeSchema extends BaseSchema {
    */
   mode?: 'text' | 'dot';
 
+  /**
+   * 角标位置，优先级大于position
+   */
+  offset?: [number | string, number | string];
+  
   /**
    * 角标位置
    */
   position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
+  /**
+   * 封顶的数字值
+   */
+  overflowCount?: number;
+
   /**
    * 动态控制是否显示
    */
@@ -50,6 +60,11 @@ export interface BadgeSchema extends BaseSchema {
   style?: {
     [propName: string]: any;
   };
+
+  /**
+   * 提示类型
+   */
+  level?: 'info' | 'warning' | 'success' | 'danger';
 }
 
 export interface BadgeProps {
@@ -81,10 +96,13 @@ export class Badge extends React.Component<BadgeProps, object> {
       text,
       size,
       style,
+      offset,
       position = 'top-right',
+      overflowCount = 99,
       visibleOn,
       className,
-      animation
+      animation,
+      level = 'danger'
     } = badge;
 
     if (visibleOn) {
@@ -111,6 +129,12 @@ export class Badge extends React.Component<BadgeProps, object> {
         height: size,
         lineHeight: size + 'px'
       };
+      // 当text、overflowCount都为number类型时，进行封顶值处理
+      if (typeof text === 'number' && typeof overflowCount === 'number') {
+        text = (
+          (text as number) > (overflowCount as number) ? `${overflowCount}+` : text
+        ) as string | number;
+      }
 
       if (!text) {
         isDisplay = false;
@@ -121,6 +145,17 @@ export class Badge extends React.Component<BadgeProps, object> {
       sizeStyle = {width: size, height: size};
     }
 
+    let offsetStyle = {};
+    // 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位
+    if (offset && offset.length) {
+      position = 'top-right';
+      const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`;
+      const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`;
+      offsetStyle = {
+        transform: `translate(${left}, ${right})`,
+      };
+    }
+
     let animationBackground = 'var(--danger)';
 
     if (style && style.background) {
@@ -148,15 +183,15 @@ export class Badge extends React.Component<BadgeProps, object> {
         {isDisplay ? (
           mode === 'dot' ? (
             <span
-              className={cx('Badge-dot', `Badge--${position}`)}
+              className={cx('Badge-dot', `Badge--${position}`, `Badge--${level}`)}
-              style={{...sizeStyle, ...style}}
+              style={{...offsetStyle, ...sizeStyle, ...style}}
             >
               {animationElement}
             </span>
           ) : (
             <span
-              className={cx('Badge-text', `Badge--${position}`)}
+              className={cx('Badge-text', `Badge--${position}`, `Badge--${level}`)}
-              style={{...sizeStyle, ...style}}
+              style={{...offsetStyle, ...sizeStyle, ...style}}
             >
               {text}
               {animationElement}