chore:backup

content/show/avatar/index.md

@@ -163,6 +163,112 @@ import { IconCamera } from '@douyinfe/semi-icons';
 };
 ```
 
+### 顶部和底部 Slot
+
+#### 顶部
+
+```jsx live=true
+()=>{
+    return <div>
+
+        <Avatar color="amber" topSlot={{
+        content: "直播"
+    }}>T</Avatar>
+
+    <Avatar color="amber" size="large" topSlot={{
+        content: "直播"
+    }}>T</Avatar>
+
+        <Avatar color="amber" size="extra-large" topSlot={{
+        content: "直播"
+    }}>T</Avatar>
+    
+    </div>
+}
+
+```
+
+
+#### 底部
+
+```jsx live=true
+()=>{
+    return <div>
+
+        <Avatar color="amber" bottomSlot={{
+             shape: "square", 
+        content: "直播中"
+    }}>T</Avatar>
+
+    <Avatar color="amber" size="large" bottomSlot={{
+             shape: "square", 
+        content: "直播中"
+    }}>T</Avatar>
+
+      <Avatar color="amber" size="extra-large" bottomSlot={{
+             shape: "square", 
+        content: "直播中"
+    }}>T</Avatar>
+    <br/>
+    <br/>
+    <br/>
+    <Avatar color="amber" bottomSlot={{
+                shape: "circle", 
+        content: <IconPlus/>
+    }}>T</Avatar>
+
+    <Avatar color="amber" size="large" bottomSlot={{
+              shape: "circle", 
+        content: <IconPlus/>
+    }}>T</Avatar>
+
+    <Avatar color="amber" size="extra-large" bottomSlot={{
+             shape: "circle", 
+        content: <IconPlus/>
+    }}>T</Avatar>
+    </div>
+}
+
+```
+
+### 额外边框
+
+```jsx live=true
+
+()=>{
+    return <div>
+
+        <Avatar color="amber" border={true} style={{marginRight:'8px'}}>T</Avatar>
+
+        <Avatar color="amber" border={true} style={{marginRight:'8px'}}>T</Avatar>
+
+        <Avatar color="amber" border={true} style={{marginRight:'8px'}}>T</Avatar>
+    
+    </div>
+}
+
+```
+
+### 额外动效
+通过  borderMotion 和 contentMotion 开启边框和内容区域的额外动效
+
+```jsx live=true
+
+()=>{
+    return <div>
+
+        <Avatar color="amber" border={true} style={{marginRight:'8px'}} borderMotion={true} contentMotion={true}>T</Avatar>
+
+        <Avatar color="amber" border={true}  size={"large"} style={{marginRight:'8px'}} borderMotion={true} contentMotion={true}>T</Avatar>
+
+        <Avatar color="amber" border={true} size={"extra-large"} style={{marginRight:'8px'}} borderMotion={true} contentMotion={true}>T</Avatar>
+    
+    </div>
+}
+
+```
+
+
 ### 头像组
 
 可以通过 AvatarGroup 将 `avatar` 显示为组。

packages/semi-foundation/avatar/avatar.scss

@@ -174,7 +174,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
         justify-content: center;
         border-radius: 50%;
         overflow: hidden;
-
+        
         &-small{
             width: $width-avatar_small;
             height: $width-avatar_small;
@@ -195,6 +195,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             height: $width-avatar_large;
         }
 
+        &-extra-large{
+            width: $width-avatar_extra_large;
+            height: $width-avatar_extra_large;
+        }
+
 
         &-svg{
             position: absolute;
@@ -215,6 +220,10 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             top: $spacing-avatar-top_slot_large-shift;
             scale: $spacing-avatar-top_slot_large-scale;
         }
+        &-svg-extra-large{
+            top: $spacing-avatar-top_slot_extra_large-shift;
+            scale: $spacing-avatar-top_slot_extra_large-scale;
+        }
     }
 
     .#{$module}-top_slot-bg-with_border{
@@ -228,21 +237,28 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
         .#{$module}-top_slot{
             color:var(--semi-color-bg-0);
             font-weight: $font-weight-bold;
-
             &-content{
                 position: relative;
 
                 &-small{
-                    font-size: $font-avatar_top_slot-small;
+                    font-size: $font-avatar_top_slot-small; 
+                    margin-top: $spacing-avatar-top_slot_small-content-marginTop;
                 }
                 &-default{
                     font-size: $font-avatar_top_slot-default;
+                    margin-top: $spacing-avatar-top_slot_default-content-marginTop;
                 }
                 &-medium{
                     font-size: $font-avatar_top_slot-medium;
+                    margin-top: $spacing-avatar-top_slot_medium-content-marginTop;
                 }
                 &-large{
                     font-size: $font-avatar_top_slot-large;
+                    margin-top: $spacing-avatar-top_slot_large-content-marginTop;
+                }
+                &-extra-large{
+                    font-size: $font-avatar_top_slot-extra_large;
+                    margin-top: $spacing-avatar-top_slot_extra_large-content-marginTop;
                 }
             }
 
@@ -285,6 +301,12 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             font-size: $font-avatar_bottom_slot-large;
         }
 
+        &-shape_circle-extra-large{
+            width:$width-avatar-bottom_slot_circle_extra_large;
+            height:$width-avatar-bottom_slot_circle_extra_large;
+            font-size: $font-avatar_bottom_slot-extra_large; 
+        }
+
 
 
         &-shape_square{
@@ -316,8 +338,12 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
         &-shape_square-large{
           font-size: $font-avatar_bottom_slot-large;
             border-width: $width-avatar-bottom_slot_square_large-border;
-
         }
+
+        &-shape_square-extra-large{
+            font-size: $font-avatar_bottom_slot-extra_large;
+              border-width: $width-avatar-bottom_slot_square_extra_large-border;
+          }
     }
 }
 

packages/semi-foundation/avatar/variables.scss

@@ -54,13 +54,15 @@ $width-avatar-bottom_slot_circle_small: 12px;
 $width-avatar-bottom_slot_circle_default: 16px;
 $width-avatar-bottom_slot_circle_medium: 18px;
 $width-avatar-bottom_slot_circle_large: 28px;
+$width-avatar-bottom_slot_circle_extra_large: 28px;
 $color-avatar-bottom_slot_bg:var(--semi-color-primary);
 
 $radius-avatar-bottom_slot_square:4px;
 $font-avatar_bottom_slot-small: 5px; // small 底部 slot 文字大小
-$font-avatar_bottom_slot-default: 6px; // default 底部 slot 文字大小
-$font-avatar_bottom_slot-medium: 8px; // medium 底部 slot 文字大小
+$font-avatar_bottom_slot-default: 12px; // default 底部 slot 文字大小
+$font-avatar_bottom_slot-medium: 12px; // medium 底部 slot 文字大小
 $font-avatar_bottom_slot-large: 12px; // large 底部 slot 文字大小
+$font-avatar_bottom_slot-extra_large: 14px; // extra large 底部 slot 文字大小
 $spacing-avatar-bottom_slot_square-paddingX:4px;
 $spacing-avatar-bottom_slot_square-paddingY:1px;
 
@@ -68,12 +70,20 @@ $font-avatar_top_slot-small: 5px; // small 顶部 slot 文字大小
 $font-avatar_top_slot-default: 6px; // default 顶部 slot 文字大小
 $font-avatar_top_slot-medium: 8px; // medium 顶部 slot 文字大小
 $font-avatar_top_slot-large: 14px; // large 顶部 slot 文字大小
+$font-avatar_top_slot-extra_large: 16px; // extra large 顶部 slot 文字大小
+
+$spacing-avatar-top_slot_small-content-marginTop: 0px; // small 顶部文字 marginTop
+$spacing-avatar-top_slot_default-content-marginTop: -2px; // default 顶部文字 marginTop
+$spacing-avatar-top_slot_medium-content-marginTop: -3px; // medium 顶部文字 marginTop
+$spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 marginTop
+$spacing-avatar-top_slot_extra_large-content-marginTop: 4px; // extra large 顶部文字 marginTop 
 
 $color-avatar-bottom_slot_square-border:var(--semi-color-bg-0);
 $width-avatar-bottom_slot_square_small-border:2px;
 $width-avatar-bottom_slot_square_default-border:2px;
 $width-avatar-bottom_slot_square_medium-border:2px;
 $width-avatar-bottom_slot_square_large-border:2px;
+$width-avatar-bottom_slot_square_extra_large-border:2px;
 
 
 $color-avatar-top_slot_gradient_start: rgb(255,23,100);
@@ -84,11 +94,13 @@ $spacing-avatar-top_slot_small-shift: -28px; // small 顶部 slot 偏移量, 和
 $spacing-avatar-top_slot_default-shift: -32px; // default 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
 $spacing-avatar-top_slot_medium-shift: -30px; // medium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
 $spacing-avatar-top_slot_large-shift: -30px; // large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_extra_large-shift: -32px; // extra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
 
 $spacing-avatar-top_slot_small-scale: 0.4; // small 顶部 slot 缩放比例
 $spacing-avatar-top_slot_default-scale: 0.7; // default 顶部 slot 缩放比例
 $spacing-avatar-top_slot_medium-scale: 0.8; // medium 顶部 slot 缩放比例
 $spacing-avatar-top_slot_large-scale: 1.1; // large 顶部 slot 缩放比例
+$spacing-avatar-top_slot_extra_large-scale: 1.4; // large 顶部 slot 缩放比例 
 
 
 // radius

packages/semi-ui/avatar/index.tsx

@@ -341,8 +341,8 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         if (bottomSlot || topSlot || border) {
             return <span className={cls([`${prefixCls}-wrapper`])}>
                 {avatar}
-                {topSlot && ["small", "default", "medium", "large"].includes(size) && shape === "circle" && this.renderTopSlot()}
-                {bottomSlot && ["small", "default", "medium", "large"].includes(size) && this.renderBottomSlot()}
+                {topSlot && ["small", "default", "medium", "large","extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()}
+                {bottomSlot && ["small", "default", "medium", "large","extra-large"].includes(size) && this.renderBottomSlot()}
             </span>;
         } else {
             return avatar;