chore:backup

content/show/avatar/index.md

@@ -165,8 +165,26 @@ import { IconCamera } from '@douyinfe/semi-icons';
 
 ### 顶部和底部 Slot
 
+
 #### 顶部
 
+ <Avatar
+            alt="beautiful cat"
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
+            style={{ margin: 4 }}
+            size="large"
+            border={true}
+            borderMotion={true}
+            contentMotion={true}
+            topSlot={{
+        content: "直播"
+            }}
+            bottomSlot={{
+             shape: "circle", 
+        content: <IconPlus/>
+    }}
+        />
+
 ```jsx live=true
 ()=>{
     return <div>

packages/semi-foundation/avatar/avatar.scss

@@ -167,7 +167,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     display: inline-flex;
     flex-direction: column;
     align-items: center;
-
+    width: fit-content;
     .#{$module}-top_slot-bg{
         position: absolute;
         display: flex;
@@ -417,52 +417,49 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
 
 .#{$module}-border{
     border-style: solid;
-    border-color: #66ccff88;
-    padding: $spacing-avatar_additional-borderGap;
+    border-color: $color-avatar_additional-border;
     display: inline-block;
     box-sizing: border-box;
     position: absolute;
+    border-width: $width-avatar_additional-border;
+    top: -1 *  $width-avatar_additional-border - $spacing-avatar_additional-borderGap;
+    left: -1 *  $width-avatar_additional-border - $spacing-avatar_additional-borderGap;
 
     &-extra-extra-small{
-        border-width: $width-avatar_extra_extra_small-border;
-        top: -1 *  $width-avatar-extra_extra_small-border - $spacing-avatar_additional-borderGap;
-        width: $width-avatar_extra_extra_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-extra_extra_small-border;
-        height: $width-avatar_extra_extra_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-extra_extra_small-border;
+        width: $width-avatar_extra_extra_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra_extra_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
     }
 
     &-extra-small{
-        border-width: $width-avatar_extra-small-border;
-        top: -1 *  $width-avatar-extra-small-border - $spacing-avatar_additional-borderGap;
-        width: $width-avatar_extra-small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-extra-small-border;
-        height: $width-avatar_extra-small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-extra-small-border;
+        width: $width-avatar_extra-small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra-small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
     }
 
     &-small{
-        border-width: $width-avatar_small-border;
-        top: -1 *  $width-avatar-small-border - $spacing-avatar_additional-borderGap;
-        width: $width-avatar_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-small-border;
-        height: $width-avatar_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-small-border;
+        width: $width-avatar_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
     }
 
     &-default{
-        border-width: $width-avatar_default-border;
-        top: -1 *  $width-avatar-default-border - $spacing-avatar_additional-borderGap;
-        width: $width-avatar_default + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-default-border;
-        height: $width-avatar_default + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-default-border;
+        width: $width-avatar_default + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_default + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
     }
 
     &-medium{
-        border-width: $width-avatar_medium-border;
-        top: -1 *  $width-avatar-medium-border - $spacing-avatar_additional-borderGap;
-        width: $width-avatar_medium + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-medium-border;
-        height: $width-avatar_medium + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-medium-border;
+      
+        width: $width-avatar_medium + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_medium + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
     }
 
     &-large{
-        border-width: $width-avatar_large-border;
-        top: -1 *  $width-avatar-large-border - $spacing-avatar_additional-borderGap;
-        width: $width-avatar_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-large-border;
-        height: $width-avatar_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar-large-border;
+        width: $width-avatar_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+       
+    }
+
+    &-extra-large{
+        width: $width-avatar_extra_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
     }
 }
 

packages/semi-foundation/avatar/variables.scss

@@ -46,9 +46,9 @@ $width-avatar_extra_extra_small-border: 1px; // 头像组头像描边尺寸 -
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
 $width-avatar-outline: 2px; //头像聚焦轮廓宽度
 
-$width-avatar_additional-border: 2px; // 额外描边尺寸
+$width-avatar_additional-border: 1.5px; // 额外描边尺寸
 $color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
-$spacing-avatar_additional-borderGap: 1px; // 额外描边与内侧间距
+$spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
 
 $width-avatar-bottom_slot_circle_small: 12px;
 $width-avatar-bottom_slot_circle_default: 16px;

packages/semi-ui/avatar/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/avatar/constants';
@@ -231,12 +231,19 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         }
 
         const renderContent = this.props.bottomSlot.render ??(()=>{
-            return <span className={cls(`${prefixCls}-bottom_slot-shape_${this.props.bottomSlot.shape}`, `${prefixCls}-bottom_slot-shape_${this.props.bottomSlot.shape}-${this.props.size}`)}>
+            const style:CSSProperties = {};
+            if(this.props.bottomSlot.bgColor){
+                style['backgroundColor'] = this.props.bottomSlot.bgColor
+            }
+            if(this.props.bottomSlot.textColor){
+                style['color'] = this.props.bottomSlot.textColor
+            }
+            return <span style={style} className={cls(`${prefixCls}-bottom_slot-shape_${this.props.bottomSlot.shape}`, `${prefixCls}-bottom_slot-shape_${this.props.bottomSlot.shape}-${this.props.size}`,this.props.bottomSlot.className ?? "")}>
                 {this.props.bottomSlot.content}
             </span>;
         });
 
-        return <div className={cls([`${prefixCls}-bottom_slot`])}>
+        return <div className={cls([`${prefixCls}-bottom_slot`])} style={this.props.bottomSlot.style ?? {}}>
             {renderContent()}
         </div>;
 
@@ -244,7 +251,13 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
 
 
     renderTopSlot = ()=> {
-        return <div className={cls([`${prefixCls}-top_slot-wrapper`, {
+        const textStyle:CSSProperties = {};
+        if(this.props.topSlot.textColor){
+            textStyle['color'] = this.props.topSlot.textColor
+        }
+        
+        return <div style={this.props.topSlot.style ?? {}}
+            className={cls([`${prefixCls}-top_slot-wrapper`,this.props.topSlot.className ?? "", {
             [`${prefixCls}-animated`]: this.props.contentMotion,
         }])}>
             <div className={cls([`${prefixCls}-top_slot-bg`, `${prefixCls}-top_slot-bg-${this.props.size}`])}>
@@ -254,6 +267,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             </div>
             <div className={cls([`${prefixCls}-top_slot`])}>
                 <div
+                    style={textStyle}
                     className={cls([`${prefixCls}-top_slot-content`, `${prefixCls}-top_slot-content-${this.props.size}`])}>{this.props.topSlot.content}</div>
             </div>
         </div>;
@@ -300,7 +314,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
 
         let avatar = <span
             {...(others as any)}
-            style={style}
+            style={(border ||bottomSlot || topSlot || border ) ? {}:style}
             className={avatarCls}
             onClick={onClick as any}
             onMouseEnter={this.onEnter as any}
@@ -313,7 +327,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
 
 
         if (border) {
-            avatar = <>
+            avatar = <div style={{position:"relative",...style}}>
                 {avatar}
                 <span className={cls([
                     `${prefixCls}-border`,
@@ -333,13 +347,13 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
                         },
                     ])}/>
                 }
-            </>;
+            </div>;
 
         }
 
 
         if (bottomSlot || topSlot || border) {
-            return <span className={cls([`${prefixCls}-wrapper`])}>
+            return <span className={cls([`${prefixCls}-wrapper`])} style={style}>
                 {avatar}
                 {topSlot && ["small", "default", "medium", "large","extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()}
                 {bottomSlot && ["small", "default", "medium", "large","extra-large"].includes(size) && this.renderBottomSlot()}

packages/semi-ui/avatar/interface.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { BaseProps } from '../_base/baseComponent';
 
 export type AvatarShape = 'circle' | 'square';
@@ -39,12 +39,19 @@ export interface AvatarProps extends BaseProps {
     bottomSlot?: {
         render?: () => React.ReactNode;
         shape?: "circle"|"square";
-        content: React.ReactNode
+        content: React.ReactNode,
+        bgColor:string,
+        textColor:string
+        className:string
+        style?:CSSProperties
     };
     topSlot?: {
         gradientStart?: string;
         gradientEnd?: string; 
-        content: React.ReactNode
+        content: React.ReactNode,
+        textColor:string
+        className:string
+        style?:CSSProperties
     };
     border?: boolean;
     borderMotion?: boolean;

src/templates/postTemplate.js

@@ -4,7 +4,7 @@ import { graphql, Link } from 'gatsby';
 import Blocks from '@douyinfe/semi-site-markdown-blocks';
 import '@douyinfe/semi-site-markdown-blocks/dist/index.css';
 import SearchAllInOne from '../components/SearchAllInOne';
-import { Icon, Row, Col, Tag, Tooltip, Popover, Checkbox, Button, Radio, Skeleton, Toast, Table, CheckboxGroup, Descriptions, Dropdown, Form, Typography, Empty, Image, Card, Space } from '@douyinfe/semi-ui';
+import { Icon, Row, Col, Tag, Tooltip, Popover, Checkbox, Button, Radio, Avatar,Skeleton, Toast, Table, CheckboxGroup, Descriptions, Dropdown, Form, Typography, Empty, Image, Card, Space } from '@douyinfe/semi-ui';
 import { IllustrationNoAccess, IllustrationNoAccessDark } from '@douyinfe/semi-illustrations';
 import NotificationCard from '../../packages/semi-ui/notification/notice';
 import ToastCard from '../../packages/semi-ui/toast/toast';
@@ -44,7 +44,7 @@ import '../styles/docDemo.scss';
 import '../styles/index.scss';
 import '../styles/doc.scss';
 import cls from 'classnames';
-import { IconLink, IconFile, IconHelpCircle } from '@douyinfe/semi-icons';
+import { IconLink, IconFile, IconHelpCircle,IconPlus } from '@douyinfe/semi-icons';
 import { Switch, TabPane, Tabs } from '../../packages/semi-ui';
 import DesignPageAnchor from 'components/DesignPageAnchor';
 import transContent, { getAnotherSideUrl, isHaveUedDocs, isJumpToDesignSite } from './toUEDUtils/toUED';
@@ -115,7 +115,9 @@ const SemiComponents = {
     Button,
     Image,
     Card,
-    Space
+    Space,
+    Avatar,
+    IconPlus
 };
 
 const pre = ({ ...props }) => {