@arcblock/ux 2.13.0 → 2.13.2

package/lib/Avatar/index.d.ts

@@ -21,6 +21,7 @@ export type AvatarProps = {
     blockiesPadding?: true | false;
     responsive?: false | true;
 } & Omit<import("../Img").ImgProps, "size" | "src">;
+export { Avatar as AvatarProps };
 /**
  * Avatar component
  * @typedef {{

package/lib/Avatar/index.js

@@ -183,4 +183,7 @@ export default function AvatarWithErrorBoundary(props) {
     })
   });
 }
-AvatarWithErrorBoundary.propTypes = Avatar.propTypes;
+AvatarWithErrorBoundary.propTypes = Avatar.propTypes;
+
+// Export Avatar for access to its props
+export { Avatar as AvatarProps };

package/lib/UserCard/Cards/basic-info.d.ts

@@ -4,6 +4,7 @@ interface BasicCardProps extends UserCardProps {
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
     isFull?: boolean;
+    avatarProps?: UserCardProps['avatarProps'];
 }
 declare function BasicCard(props: BasicCardProps): import("react/jsx-runtime").JSX.Element;
 export default BasicCard;

package/lib/UserCard/Cards/basic-info.js

@@ -17,7 +17,8 @@ function BasicCard(props) {
     topRightMaxWidth = 100,
     renderCustomContent,
     isFull = true,
-    infoType = InfoType.Minimal
+    infoType = InfoType.Minimal,
+    avatarProps
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
@@ -32,6 +33,7 @@ function BasicCard(props) {
       showDid: showDid,
       didProps: didProps,
       avatarSize: avatarSize,
+      avatarProps: avatarProps,
       shouldShowHoverCard: shouldShowHoverCard,
       renderCardContent: renderCardContent,
       renderTopRightContent: renderTopRightContent,

package/lib/UserCard/Cards/name-only.js

@@ -9,7 +9,7 @@ function NameOnlyCard(props) {
     avatarSize = 48
   } = props;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [renderAvatar(user, avatarSize), /*#__PURE__*/_jsx(Typography, {
+    children: [renderAvatar(user, avatarSize, props.avatarProps), /*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       children: user.fullName || user.email || user.did
     })]

package/lib/UserCard/Container/card.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
-import { CardType } from '../types';
+import { UserCardProps } from '../types';
 interface CardContainerProps {
     children: React.ReactNode;
-    cardType?: CardType;
+    cardType?: UserCardProps['cardType'];
     variant?: 'paper' | 'box';
     containerRef?: React.RefObject<HTMLDivElement>;
+    sx?: UserCardProps['sx'];
 }
 /**
  * 统一的卡片容器组件，处理常见的布局容器样式
  */
-declare function CardContainer({ children, cardType, variant, containerRef }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function CardContainer({ children, cardType, variant, containerRef, sx, }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
 export default CardContainer;

package/lib/UserCard/Container/card.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Paper } from '@mui/material';
 import { CardType } from '../types';
+import { mergeSx } from '../../Util/style';
 /**
  * 统一的卡片容器组件，处理常见的布局容器样式
  */
@@ -9,7 +10,8 @@ function CardContainer({
   children,
   cardType = CardType.Detailed,
   variant = 'box',
-  containerRef
+  containerRef,
+  sx
 }) {
   const commonStyles = {
     minWidth: 320,
@@ -34,12 +36,11 @@ function CardContainer({
   // Box变体，用于Minimal和NameOnly类型卡片
   return /*#__PURE__*/_jsx(Box, {
     ref: containerRef,
-    sx: {
-      ...commonStyles,
+    sx: mergeSx(commonStyles, {
       display: 'flex',
       alignItems: cardType === CardType.AvatarOnly ? 'center' : 'flex-start',
       gap: 2
-    },
+    }, sx ? sx : null),
     children: children
   });
 }

package/lib/UserCard/Container/dialog.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { UserCardProps } from '../types';
 interface DialogContainerProps {
     children: React.ReactNode;
+    sx?: UserCardProps['sx'];
 }
 /**
  * 统一的卡片容器组件，处理常见的布局容器样式
  */
-declare function DialogContainer({ children }: DialogContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogContainer({ children, sx }: DialogContainerProps): import("react/jsx-runtime").JSX.Element;
 export default DialogContainer;

package/lib/UserCard/Container/dialog.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box, useTheme } from '@mui/material';
+import { mergeSx } from '../../Util/style';
 /**
  * 统一的卡片容器组件，处理常见的布局容器样式
  */
 function DialogContainer({
-  children
+  children,
+  sx
 }) {
   // Box变体，用于Minimal和NameOnly类型卡片
   const theme = useTheme();
   return /*#__PURE__*/_jsx(Box, {
-    sx: {
+    sx: mergeSx({
       p: 2,
       backgroundColor: theme.palette.background.paper,
       border: '1px solid',
@@ -19,7 +21,7 @@ function DialogContainer({
       maxWidth: 400,
       minWidth: 320,
       display: 'flex'
-    },
+    }, sx),
     children: children
   });
 }

package/lib/UserCard/Content/minimal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { User } from '../types';
+import { User, UserCardProps } from '../types';
 interface MinimalContentProps {
     user: User;
     showDid: boolean;
@@ -9,6 +9,7 @@ interface MinimalContentProps {
     didProps: Record<string, any>;
     renderTopRightContent?: () => React.ReactNode;
     topRightMaxWidth: number;
+    avatarProps?: UserCardProps['avatarProps'];
 }
 declare function MinimalContent(props: MinimalContentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof MinimalContent>;

package/lib/UserCard/Content/minimal.js

@@ -13,7 +13,8 @@ function MinimalContent(props) {
     shouldShowHoverCard,
     renderCardContent,
     renderTopRightContent,
-    topRightMaxWidth
+    topRightMaxWidth,
+    avatarProps
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
@@ -30,7 +31,8 @@ function MinimalContent(props) {
         user: user,
         avatarSize: avatarSize,
         shouldShowHoverCard: shouldShowHoverCard,
-        renderCardContent: renderCardContent
+        renderCardContent: renderCardContent,
+        avatarProps: avatarProps
       }), /*#__PURE__*/_jsxs(Box, {
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "subtitle1",

package/lib/UserCard/Content/tooltip-avatar.d.ts

@@ -7,10 +7,11 @@ interface TooltipAvatarProps {
     renderCardContent?: () => React.ReactNode | null;
     tooltipTitle?: string;
     tooltipProps?: UserCardProps['tooltipProps'];
+    avatarProps?: UserCardProps['avatarProps'];
 }
 /**
  * 统一处理头像的Tooltip显示组件
  * 根据条件显示普通Tooltip、自定义Tooltip内容或无Tooltip的头像
  */
-declare function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardContent, tooltipTitle, tooltipProps, }: TooltipAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardContent, tooltipTitle, tooltipProps, avatarProps, }: TooltipAvatarProps): import("react/jsx-runtime").JSX.Element;
 export default TooltipAvatar;

package/lib/UserCard/Content/tooltip-avatar.js

@@ -13,8 +13,13 @@ function TooltipAvatar({
   shouldShowHoverCard,
   renderCardContent,
   tooltipTitle,
-  tooltipProps
+  tooltipProps,
+  avatarProps
 }) {
+  const avatarElement = /*#__PURE__*/_jsx(Box, {
+    display: "inline-block",
+    children: renderAvatar(user, avatarSize, avatarProps)
+  });
   // 使用普通文本Tooltip
   if (tooltipTitle) {
     return /*#__PURE__*/_jsx(Tooltip, {
@@ -22,12 +27,7 @@ function TooltipAvatar({
       title: tooltipTitle,
       placement: "bottom",
       ...(tooltipProps ?? {}),
-      children: /*#__PURE__*/_jsx("div", {
-        style: {
-          display: 'inline-block'
-        },
-        children: renderAvatar(user, avatarSize)
-      })
+      children: avatarElement
     });
   }
 
@@ -50,17 +50,11 @@ function TooltipAvatar({
         }
       },
       ...(tooltipProps ?? {}),
-      children: /*#__PURE__*/_jsx(Box, {
-        display: "inline-block",
-        children: renderAvatar(user, avatarSize)
-      })
+      children: avatarElement
     });
   }
 
   // 无Tooltip
-  return /*#__PURE__*/_jsx(Box, {
-    display: "inline-block",
-    children: renderAvatar(user, avatarSize)
-  });
+  return avatarElement;
 }
 export default TooltipAvatar;

package/lib/UserCard/components.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { User } from './types';
-export declare const renderAvatar: (user: User, avatarSize?: number) => import("react/jsx-runtime").JSX.Element;
+import { UserCardProps } from './types';
+export declare const renderAvatar: (user: UserCardProps["user"], avatarSize?: number, avatarProps?: UserCardProps["avatarProps"]) => import("react/jsx-runtime").JSX.Element;
 export declare const renderTopRight: (renderTopRightContent: (() => React.ReactNode) | undefined, topRightMaxWidth: number) => import("react/jsx-runtime").JSX.Element | null;

package/lib/UserCard/components.js

@@ -1,33 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Avatar } from '@mui/material';
+import { Box } from '@mui/material';
+import Avatar from '../Avatar';
 import { createNameOnlyAvatar } from './utils';
 
 // 渲染头像
-export const renderAvatar = (user, avatarSize = 48) => {
+export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined) => {
   // 如果用户没有头像，则显示名称首字母头像
   if (!user.avatar) {
     const avatarContent = createNameOnlyAvatar(user);
     return /*#__PURE__*/_jsx(Avatar, {
+      size: avatarSize,
+      did: user.did,
+      variant: "circle",
       sx: {
-        width: avatarSize,
-        height: avatarSize,
         fontSize: avatarSize * 0.4,
         cursor: 'pointer'
       },
+      ...(avatarProps || {}),
       children: avatarContent
     });
   }
 
   // 显示用户头像
   return /*#__PURE__*/_jsx(Avatar, {
-    sx: {
-      width: avatarSize,
-      height: avatarSize,
+    size: avatarSize,
+    did: user.did,
+    variant: "circle",
+    style: {
       cursor: 'pointer'
     },
     src: user.avatar,
-    alt: user.fullName || ''
+    alt: user.fullName || '',
+    ...(avatarProps || {})
   });
 };
 

package/lib/UserCard/index.js

@@ -39,10 +39,13 @@ function UserCard(props) {
 
   // 渲染卡片内容（用于Tooltip）
   const renderCardContent = () => {
+    const _avatarProps = props.popupAvatarProps || props.avatarProps;
     return /*#__PURE__*/_jsx(DialogContainer, {
+      sx: props.popupSx,
       children: /*#__PURE__*/_jsx(DetailedCard, {
         ...props,
-        shouldShowHoverCard: false
+        shouldShowHoverCard: false,
+        avatarProps: _avatarProps
       })
     });
   };
@@ -60,6 +63,7 @@ function UserCard(props) {
   return /*#__PURE__*/_jsx(CardContainer, {
     containerRef: containerRef,
     cardType: cardType,
+    sx: props.sx,
     children: /*#__PURE__*/_jsx(DetailedCard, {
       ...props,
       shouldShowHoverCard: shouldShowHoverCard,

package/lib/UserCard/types.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TooltipProps } from '@mui/material';
+import { SxProps, Theme, TooltipProps } from '@mui/material';
 import { DIDProps } from '../DID';
+import { AvatarProps } from '../Avatar';
 type UserPublicInfo = {
     avatar: string;
     did: string;
@@ -97,7 +98,11 @@ export interface UserCardProps {
     showHoverCard?: boolean;
     showDid?: boolean;
     didProps?: DIDProps;
+    avatarProps?: Partial<AvatarProps>;
+    popupAvatarProps?: Partial<AvatarProps>;
     tooltipProps?: Omit<TooltipProps, 'title'>;
+    sx?: SxProps<Theme>;
+    popupSx?: SxProps<Theme>;
     renderTopRightContent?: () => React.ReactNode;
     topRightMaxWidth?: number;
     renderCustomContent?: () => React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.0",
+  "version": "2.13.2",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,12 +70,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "6f5c451c75845608ebc3c559ef64c739238b65e1",
+  "gitHead": "20a687d035cac39b37ddcbbc478afc416efe2877",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.0",
-    "@arcblock/nft-display": "^2.13.0",
-    "@arcblock/react-hooks": "^2.13.0",
+    "@arcblock/icons": "^2.13.2",
+    "@arcblock/nft-display": "^2.13.2",
+    "@arcblock/react-hooks": "^2.13.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Avatar/index.jsx

@@ -164,3 +164,6 @@ export default function AvatarWithErrorBoundary(props) {
 }
 
 AvatarWithErrorBoundary.propTypes = Avatar.propTypes;
+
+// Export Avatar for access to its props
+export { Avatar as AvatarProps };

package/src/UserCard/Cards/basic-info.tsx

@@ -9,6 +9,7 @@ interface BasicCardProps extends UserCardProps {
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
   isFull?: boolean;
+  avatarProps?: UserCardProps['avatarProps'];
 }
 
 // 详细卡片模式下的Basic渲染组件
@@ -25,6 +26,7 @@ function BasicCard(props: BasicCardProps) {
     renderCustomContent,
     isFull = true,
     infoType = InfoType.Minimal,
+    avatarProps,
   } = props;
 
   return (
@@ -34,6 +36,7 @@ function BasicCard(props: BasicCardProps) {
         showDid={showDid}
         didProps={didProps}
         avatarSize={avatarSize}
+        avatarProps={avatarProps}
         shouldShowHoverCard={shouldShowHoverCard}
         renderCardContent={renderCardContent}
         renderTopRightContent={renderTopRightContent}

package/src/UserCard/Cards/name-only.tsx

@@ -8,7 +8,7 @@ function NameOnlyCard(props: UserCardProps) {
 
   return (
     <>
-      {renderAvatar(user, avatarSize)}
+      {renderAvatar(user, avatarSize, props.avatarProps)}
       <Typography variant="body1">{user.fullName || user.email || user.did}</Typography>
     </>
   );

package/src/UserCard/Container/card.tsx

@@ -1,18 +1,26 @@
 import React from 'react';
-import { Box, Paper } from '@mui/material';
-import { CardType } from '../types';
+import { Box, Paper, SxProps } from '@mui/material';
+import { UserCardProps, CardType } from '../types';
+import { mergeSx } from '../../Util/style';
 
 interface CardContainerProps {
   children: React.ReactNode;
-  cardType?: CardType;
+  cardType?: UserCardProps['cardType'];
   variant?: 'paper' | 'box';
   containerRef?: React.RefObject<HTMLDivElement>;
+  sx?: UserCardProps['sx'];
 }
 
 /**
  * 统一的卡片容器组件，处理常见的布局容器样式
  */
-function CardContainer({ children, cardType = CardType.Detailed, variant = 'box', containerRef }: CardContainerProps) {
+function CardContainer({
+  children,
+  cardType = CardType.Detailed,
+  variant = 'box',
+  containerRef,
+  sx,
+}: CardContainerProps) {
   const commonStyles = {
     minWidth: 320,
     p: 2,
@@ -38,12 +46,15 @@ function CardContainer({ children, cardType = CardType.Detailed, variant = 'box'
   return (
     <Box
       ref={containerRef}
-      sx={{
-        ...commonStyles,
-        display: 'flex',
-        alignItems: cardType === CardType.AvatarOnly ? 'center' : 'flex-start',
-        gap: 2,
-      }}>
+      sx={mergeSx(
+        commonStyles,
+        {
+          display: 'flex',
+          alignItems: cardType === CardType.AvatarOnly ? 'center' : 'flex-start',
+          gap: 2,
+        },
+        sx ? (sx as SxProps) : null
+      )}>
       {children}
     </Box>
   );

package/src/UserCard/Container/dialog.tsx

@@ -1,28 +1,34 @@
 import React from 'react';
-import { Box, useTheme } from '@mui/material';
+import { Box, SxProps, useTheme } from '@mui/material';
+import { UserCardProps } from '../types';
+import { mergeSx } from '../../Util/style';
 
 interface DialogContainerProps {
   children: React.ReactNode;
+  sx?: UserCardProps['sx'];
 }
 
 /**
  * 统一的卡片容器组件，处理常见的布局容器样式
  */
-function DialogContainer({ children }: DialogContainerProps) {
+function DialogContainer({ children, sx }: DialogContainerProps) {
   // Box变体，用于Minimal和NameOnly类型卡片
   const theme = useTheme();
   return (
     <Box
-      sx={{
-        p: 2,
-        backgroundColor: theme.palette.background.paper,
-        border: '1px solid',
-        borderColor: 'divider',
-        borderRadius: 2,
-        maxWidth: 400,
-        minWidth: 320,
-        display: 'flex',
-      }}>
+      sx={mergeSx(
+        {
+          p: 2,
+          backgroundColor: theme.palette.background.paper,
+          border: '1px solid',
+          borderColor: 'divider',
+          borderRadius: 2,
+          maxWidth: 400,
+          minWidth: 320,
+          display: 'flex',
+        },
+        sx as SxProps
+      )}>
       {children}
     </Box>
   );

package/src/UserCard/Content/minimal.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { Typography, Box } from '@mui/material';
 import DID from '../../DID';
-import { User } from '../types';
+import { User, UserCardProps } from '../types';
 import TooltipAvatar from './tooltip-avatar';
 import { renderTopRight } from '../components';
 
@@ -14,6 +14,7 @@ interface MinimalContentProps {
   didProps: Record<string, any>;
   renderTopRightContent?: () => React.ReactNode;
   topRightMaxWidth: number;
+  avatarProps?: UserCardProps['avatarProps'];
 }
 
 function MinimalContent(props: MinimalContentProps) {
@@ -26,6 +27,7 @@ function MinimalContent(props: MinimalContentProps) {
     renderCardContent,
     renderTopRightContent,
     topRightMaxWidth,
+    avatarProps,
   } = props;
 
   return (
@@ -36,6 +38,7 @@ function MinimalContent(props: MinimalContentProps) {
           avatarSize={avatarSize}
           shouldShowHoverCard={shouldShowHoverCard}
           renderCardContent={renderCardContent}
+          avatarProps={avatarProps}
         />
         <Box>
           <Typography

package/src/UserCard/Content/tooltip-avatar.tsx

@@ -12,6 +12,7 @@ interface TooltipAvatarProps {
   renderCardContent?: () => React.ReactNode | null;
   tooltipTitle?: string;
   tooltipProps?: UserCardProps['tooltipProps'];
+  avatarProps?: UserCardProps['avatarProps'];
 }
 
 /**
@@ -25,12 +26,14 @@ function TooltipAvatar({
   renderCardContent,
   tooltipTitle,
   tooltipProps,
+  avatarProps,
 }: TooltipAvatarProps) {
+  const avatarElement = <Box display="inline-block">{renderAvatar(user, avatarSize, avatarProps)}</Box>;
   // 使用普通文本Tooltip
   if (tooltipTitle) {
     return (
       <Tooltip enterDelay={200} title={tooltipTitle} placement="bottom" {...(tooltipProps ?? {})}>
-        <div style={{ display: 'inline-block' }}>{renderAvatar(user, avatarSize)}</div>
+        {avatarElement}
       </Tooltip>
     );
   }
@@ -55,13 +58,13 @@ function TooltipAvatar({
           },
         }}
         {...(tooltipProps ?? {})}>
-        <Box display="inline-block">{renderAvatar(user, avatarSize)}</Box>
+        {avatarElement}
       </Tooltip>
     );
   }
 
   // 无Tooltip
-  return <Box display="inline-block">{renderAvatar(user, avatarSize)}</Box>;
+  return avatarElement;
 }
 
 export default TooltipAvatar;

package/src/UserCard/components.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
-import { Box, Avatar } from '@mui/material';
-import { User } from './types';
+import { Box } from '@mui/material';
+import Avatar from '../Avatar';
+import { UserCardProps } from './types';
 import { createNameOnlyAvatar } from './utils';
 
 // 渲染头像
-export const renderAvatar = (user: User, avatarSize: number = 48) => {
+export const renderAvatar = (
+  user: UserCardProps['user'],
+  avatarSize: number = 48,
+  avatarProps: UserCardProps['avatarProps'] = undefined
+) => {
   // 如果用户没有头像，则显示名称首字母头像
   if (!user.avatar) {
     const avatarContent = createNameOnlyAvatar(user);
 
     return (
       <Avatar
+        size={avatarSize}
+        did={user.did}
+        variant="circle"
         sx={{
-          width: avatarSize,
-          height: avatarSize,
           fontSize: avatarSize * 0.4,
           cursor: 'pointer',
-        }}>
+        }}
+        {...(avatarProps || {})}>
         {avatarContent}
       </Avatar>
     );
@@ -25,13 +32,15 @@ export const renderAvatar = (user: User, avatarSize: number = 48) => {
   // 显示用户头像
   return (
     <Avatar
-      sx={{
-        width: avatarSize,
-        height: avatarSize,
+      size={avatarSize}
+      did={user.did}
+      variant="circle"
+      style={{
         cursor: 'pointer',
       }}
       src={user.avatar}
       alt={user.fullName || ''}
+      {...(avatarProps || {})}
     />
   );
 };

package/src/UserCard/index.tsx

@@ -38,9 +38,10 @@ function UserCard(props: UserCardProps) {
 
   // 渲染卡片内容（用于Tooltip）
   const renderCardContent = () => {
+    const _avatarProps = props.popupAvatarProps || props.avatarProps;
     return (
-      <DialogContainer>
-        <DetailedCard {...props} shouldShowHoverCard={false} />
+      <DialogContainer sx={props.popupSx}>
+        <DetailedCard {...props} shouldShowHoverCard={false} avatarProps={_avatarProps} />
       </DialogContainer>
     );
   };
@@ -54,7 +55,7 @@ function UserCard(props: UserCardProps) {
 
   // 详细卡片模式
   return (
-    <CardContainer containerRef={containerRef} cardType={cardType}>
+    <CardContainer containerRef={containerRef} cardType={cardType} sx={props.sx}>
       <DetailedCard {...props} shouldShowHoverCard={shouldShowHoverCard} renderCardContent={renderCardContent} />
     </CardContainer>
   );

package/src/UserCard/types.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TooltipProps } from '@mui/material';
+import { SxProps, Theme, TooltipProps } from '@mui/material';
 import { DIDProps } from '../DID';
+import { AvatarProps } from '../Avatar';
 
 type UserPublicInfo = {
   avatar: string;
@@ -115,9 +116,16 @@ export interface UserCardProps {
   showDid?: boolean;
   didProps?: DIDProps;
 
+  avatarProps?: Partial<AvatarProps>;
+  popupAvatarProps?: Partial<AvatarProps>;
+
   // 弹出层相关属性
   tooltipProps?: Omit<TooltipProps, 'title'>;
 
+  // 样式相关属性
+  sx?: SxProps<Theme>;
+  popupSx?: SxProps<Theme>;
+
   // 右上角内容相关属性
   renderTopRightContent?: () => React.ReactNode;
   topRightMaxWidth?: number;