feat: avatar size support raw value

content/show/avatar/index-en-US.md

@@ -437,7 +437,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';
 | hoverMask    | Avatar content overlay when hover                                                                                                                                                         | ReactNode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -        |
 | imgAttr | Native html img attributes **>=1.5.0**                                                                                                                                                    | React.ImgHTMLAttributes<HTMLImageElement\>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | - |
 | shape        | Shape of the avatar, one of `circle`, `square`                                                                                                                                            | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `circle` |
-| size         | Size of the avatar, one of `extra-extra-small`,`extra-small`, `small`, `default`, `medium`, `large`, `extra-large`                                                                        | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `medium` |
+| size         | Size of the avatar, one of `extra-extra-small`,`extra-small`, `small`, `default`, `medium`, `large`, `extra-large` and raw value                                                          | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `medium` |
 | src          | Resource address for imgage avatars                                                                                                                                                       | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -        |
 | srcSet       | Set the image avatar responsive resource address                                                                                                                                          | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -        |
 | style        | Style name                                                                                                                                                                                | CSSProperties                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -        |

content/show/avatar/index.md

@@ -432,7 +432,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
 | gap | 字符头像距离左右两侧的像素大小                                                                                                                                                   | number                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | 3 |
 | imgAttr | 原生 img 属性 **>=1.5.0**                                                                                                                                             | React.ImgHTMLAttributes<HTMLImageElement\>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | - |
 | shape | 指定头像的形状，支持 `circle`、`square`                                                                                                                                      | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `circle` |
-| size | 设置头像的大小，支持 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large`                                                                     | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `medium` |
+| size | 设置头像的大小，支持 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large` 和 字面量                                                               | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `medium` |
 | src | 图片类头像的资源地址                                                                                                                                                        | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | - |
 | srcSet | 设置图片类头像响应式资源地址                                                                                                                                                    | string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | - |
 | style | 样式名                                                                                                                                                               | CSSProperties                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | - |

packages/semi-ui/avatar/index.tsx

@@ -336,6 +336,11 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             ...others
         } = this.props;
         const { isImgExist, hoverContent, focusVisible } = this.state;
+        let customStyle :CSSProperties= {};
+        if(!strings.SIZE.includes(size)){
+            customStyle = {width:size,height:size}
+        }
+        customStyle = {...customStyle,...style}
         const shouldWrap = bottomSlot || topSlot || border;
         const mouseEvent = {
             onClick: onClick,
@@ -361,7 +366,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
 
         let avatar = <span
             {...(others as any)}
-            style={shouldWrap ? {} : style}
+            style={shouldWrap ? {} : customStyle}
             className={avatarCls}
             {...(shouldWrap ? {} : mouseEvent)}
             role='listitem'
@@ -376,7 +381,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             if (typeof border ==='object' && border?.color) {
                 borderStyle['borderColor'] = border?.color;
             }
-            avatar = <div style={{ position: "relative", ...style }}>
+            avatar = <div style={{ position: "relative", ...customStyle }}>
                 {avatar}
                 <span style={borderStyle} className={cls([
                     `${prefixCls}-additionalBorder`,
@@ -402,7 +407,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
 
 
         if (shouldWrap) {
-            return <span className={cls([`${prefixCls}-wrapper`])} style={style} {...mouseEvent}>
+            return <span className={cls([`${prefixCls}-wrapper`])} style={customStyle} {...mouseEvent}>
                 {avatar}
                 {topSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()}
                 {bottomSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot()}