@arcblock/ux 2.13.7 → 2.13.9

package/src/UserCard/Content/minimal.tsx

@@ -1,13 +1,13 @@
 import React, { memo } from 'react';
 import { Typography, Box } from '@mui/material';
 import DID from '../../DID';
-import { UserCardProps } from '../types';
+import { User, UserCardProps } from '../types';
 import TooltipAvatar from './tooltip-avatar';
 import { renderTopRight } from '../components';
 import ShortenLabel from './shorten-label';
 
 interface MinimalContentProps extends UserCardProps {
-  user: UserCardProps['user'];
+  user: User;
   avatarSize: number;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
@@ -27,10 +27,11 @@ function MinimalContent(props: MinimalContentProps) {
     topRightMaxWidth,
     avatarProps,
     shortenLabelProps,
+    ...rest
   } = props;
 
   return (
-    <Box display="flex" justifyContent="space-between" alignItems="center">
+    <Box display="flex" justifyContent="space-between" alignItems="center" className="user-card__avatar-content">
       <Box display="flex" justifyContent="flex-start" alignItems="center" gap={2} flex={1} minWidth={0}>
         <TooltipAvatar
           user={user}
@@ -38,12 +39,14 @@ function MinimalContent(props: MinimalContentProps) {
           shouldShowHoverCard={shouldShowHoverCard}
           renderCardContent={renderCardContent}
           avatarProps={avatarProps}
+          {...rest}
         />
         <Box>
           <Typography
             variant="subtitle1"
             fontWeight={500}
             color="text.primary"
+            className="user-card__full-name-label"
             fontSize={18}
             noWrap
             sx={{ lineHeight: 1.1 }}>

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { Box, Tooltip } from '@mui/material';
 
 import Zoom from '@mui/material/Zoom';
-import { UserCardProps } from '../types';
+import { User, UserCardProps } from '../types';
 import { renderAvatar } from '../components';
 
-interface TooltipAvatarProps {
-  user: UserCardProps['user'];
+interface TooltipAvatarProps extends UserCardProps {
+  user: User;
   avatarSize: number;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
@@ -27,8 +27,13 @@ function TooltipAvatar({
   tooltipTitle,
   tooltipProps,
   avatarProps,
+  onAvatarClick,
 }: TooltipAvatarProps) {
-  const avatarElement = <Box display="inline-block">{renderAvatar(user, avatarSize, avatarProps)}</Box>;
+  const avatarElement = (
+    <Box display="inline-block">
+      {renderAvatar(user, avatarSize, avatarProps, onAvatarClick, shouldShowHoverCard || !!tooltipTitle)}
+    </Box>
+  );
   // 使用普通文本Tooltip
   if (tooltipTitle) {
     return (
@@ -52,7 +57,7 @@ function TooltipAvatar({
             '& .MuiTooltip-tooltip': {
               backgroundColor: 'transparent',
               p: 0,
-              maxWidth: 400,
+              maxWidth: 500,
               zIndex: 1000,
             },
           },

package/src/UserCard/components.tsx

@@ -1,27 +1,32 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import Avatar from '../Avatar';
-import { UserCardProps } from './types';
+import { User, UserCardProps } from './types';
 import { createNameOnlyAvatar } from './utils';
 
 // 渲染头像
 export const renderAvatar = (
-  user: UserCardProps['user'],
+  user: User,
   avatarSize: number = 48,
-  avatarProps: UserCardProps['avatarProps'] = undefined
+  avatarProps: UserCardProps['avatarProps'] = undefined,
+  onAvatarClick: UserCardProps['onAvatarClick'] = undefined,
+  shouldShowHoverCard: boolean = false
 ) => {
+  const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    onAvatarClick?.(user, e);
+  };
   // 如果用户没有头像，则显示名称首字母头像
   if (!user.avatar) {
     const avatarContent = createNameOnlyAvatar(user);
-
     return (
       <Avatar
         size={avatarSize}
         did={user.did}
         variant="circle"
+        onClick={onClick}
         sx={{
           fontSize: avatarSize * 0.4,
-          cursor: 'pointer',
+          cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
         }}
         {...(avatarProps || {})}>
         {avatarContent}
@@ -36,8 +41,9 @@ export const renderAvatar = (
       did={user.did}
       variant="circle"
       style={{
-        cursor: 'pointer',
+        cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
       }}
+      onClick={onClick}
       src={user.avatar}
       alt={user.fullName || ''}
       {...(avatarProps || {})}
@@ -51,7 +57,11 @@ export const renderTopRight = (
   topRightMaxWidth: number = 120
 ) => {
   if (renderTopRightContent) {
-    return <Box sx={{ maxWidth: topRightMaxWidth }}>{renderTopRightContent()}</Box>;
+    return (
+      <Box sx={{ maxWidth: topRightMaxWidth }} className="user-card__top-right-content">
+        {renderTopRightContent()}
+      </Box>
+    );
   }
 
   return null;

package/src/UserCard/index.tsx

@@ -1,10 +1,13 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { toTypeInfo } from '@arcblock/did';
 import type { User } from './types';
 import { UserCardProps, CardType } from './types';
 import AvatarOnlyCard from './Cards/avatar-only';
 import DetailedCard from './Cards';
 import DialogContainer from './Container/dialog';
 import CardContainer from './Container/card';
+import Avatar from '../Avatar';
+import { getUserByDid, isUserDid } from './utils';
 
 // 创建仅显示名称首字母的头像
 export function createNameOnlyAvatar(user: User) {
@@ -35,7 +38,30 @@ function UserCard(props: UserCardProps) {
   const shouldShowHoverCard = showHoverCard !== undefined ? showHoverCard : cardType === CardType.AvatarOnly;
 
   const containerRef = useRef<HTMLDivElement>(null);
+  const [user, setUser] = useState<User | null>(null);
 
+  useEffect(() => {
+    let isSubscribed = true;
+    if (props.user) {
+      setUser(props.user);
+    } else if (props.did && isUserDid(props.did) && !props.user) {
+      getUserByDid(props.did).then((_user) => {
+        if (isSubscribed) {
+          setUser(_user);
+        }
+      });
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, [props.did, props.user]);
+
+  // 如果不存在，则使用 did 渲染头像
+  if (!user) {
+    return <Avatar did={props.did} size={props.avatarSize} {...props.avatarProps} />;
+  }
+
+  // user 存在，则使用 user 渲染头像
   // 渲染卡片内容（用于Tooltip）
   const renderCardContent = () => {
     const _avatarProps = props.popupAvatarProps || props.avatarProps;
@@ -45,8 +71,10 @@ function UserCard(props: UserCardProps) {
         <DetailedCard
           {...props}
           shouldShowHoverCard={false}
+          user={user!}
           avatarProps={_avatarProps}
           shortenLabelProps={_shortenLabelProps}
+          renderFields={props.popupRenderFields}
         />
       </DialogContainer>
     );
@@ -55,14 +83,24 @@ function UserCard(props: UserCardProps) {
   // 根据卡片类型选择合适的组件
   if (cardType === CardType.AvatarOnly) {
     return (
-      <AvatarOnlyCard {...props} shouldShowHoverCard={shouldShowHoverCard} renderCardContent={renderCardContent} />
+      <AvatarOnlyCard
+        {...props}
+        shouldShowHoverCard={shouldShowHoverCard}
+        renderCardContent={renderCardContent}
+        user={user!}
+      />
     );
   }
 
   // 详细卡片模式
   return (
     <CardContainer containerRef={containerRef} cardType={cardType} sx={props.sx}>
-      <DetailedCard {...props} shouldShowHoverCard={shouldShowHoverCard} renderCardContent={renderCardContent} />
+      <DetailedCard
+        {...props}
+        shouldShowHoverCard={shouldShowHoverCard}
+        renderCardContent={renderCardContent}
+        user={user!}
+      />
     </CardContainer>
   );
 }

package/src/UserCard/types.ts

@@ -64,7 +64,6 @@ export type UserAddress = {
 };
 
 export type User = UserPublicInfo & {
-  role: string;
   email?: string;
   phone?: string;
   sourceProvider?: string;
@@ -76,7 +75,7 @@ export type User = UserPublicInfo & {
   didSpace?: Record<string, any>;
   connectedAccounts?: any[];
   locale?: string;
-  url: string;
+  url?: string;
   inviter?: string;
   emailVerified?: boolean;
   phoneVerified?: boolean;
@@ -109,7 +108,8 @@ export enum InfoType {
 
 // 定义UserCard属性接口
 export interface UserCardProps {
-  user: User;
+  user?: User;
+  did?: string;
   cardType?: CardType;
   infoType?: InfoType;
   avatarSize?: number;
@@ -121,7 +121,7 @@ export interface UserCardProps {
   popupAvatarProps?: Partial<AvatarProps>;
 
   // 弹出层相关属性
-  tooltipProps?: Omit<TooltipProps, 'title'>;
+  tooltipProps?: Partial<TooltipProps>;
 
   // 样式相关属性
   sx?: SxProps<Theme>;
@@ -131,10 +131,17 @@ export interface UserCardProps {
   shortenLabelProps?: Partial<ShortenLabelProps>;
   popupShortenLabelProps?: Partial<ShortenLabelProps>;
 
+  // 自定义渲染字段
+  renderFields?: string[];
+  popupRenderFields?: string[];
+
   // 右上角内容相关属性
   renderTopRightContent?: () => React.ReactNode;
   topRightMaxWidth?: number;
 
   // 自定义内容渲染函数
   renderCustomContent?: () => React.ReactNode;
+
+  // 头像点击事件
+  onAvatarClick?: (user: User, e?: React.MouseEvent<HTMLDivElement>) => void;
 }

package/src/UserCard/utils.ts

@@ -1,5 +1,16 @@
+import { toTypeInfo } from '@arcblock/did';
+import { types } from '@ocap/mcrypto';
+import { BlockletSDK } from '@blocklet/js-sdk';
 import { User } from './types';
 
+let client: BlockletSDK | null = null;
+try {
+  client = new BlockletSDK();
+} catch (error) {
+  console.error('Failed to initialize BlockletSDK:', error);
+  client = null;
+}
+
 // 创建仅显示名称首字母的头像
 // eslint-disable-next-line import/prefer-default-export
 export function createNameOnlyAvatar(user: User) {
@@ -20,3 +31,25 @@ export function createNameOnlyAvatar(user: User) {
 
   return content;
 }
+
+export function isUserDid(did: string) {
+  if (!did || typeof did !== 'string') return false;
+  try {
+    const didInfo = toTypeInfo(did);
+    return didInfo.role !== undefined && didInfo.role !== types.RoleType.ROLE_APPLICATION;
+  } catch (error) {
+    console.error('Failed to check if did is user did:', error);
+    return false;
+  }
+}
+
+export async function getUserByDid(did: string): Promise<User | null> {
+  if (!client) return null;
+  try {
+    const user = await client.user.getUserPublicInfo({ did });
+    return user as User;
+  } catch (error) {
+    console.error('Failed to get user by did:', error);
+    return null;
+  }
+}

package/lib/UserCard/Content/left-layout.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { User } from '../types';
-interface LeftColumnLayoutProps {
-    user: User;
-    avatarSize: number;
-    shouldShowHoverCard: boolean;
-    renderCardContent: () => React.ReactNode;
-    followButtonStyle: string;
-    isFollowed: boolean;
-    followLoading: boolean;
-}
-/**
- * 统一左侧列布局组件，包含头像和关注按钮
- */
-declare function LeftColumnLayout({ user, avatarSize, shouldShowHoverCard, renderCardContent, followButtonStyle, isFollowed, followLoading, }: LeftColumnLayoutProps): import("react/jsx-runtime").JSX.Element;
-export default LeftColumnLayout;

package/lib/UserCard/Content/left-layout.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Box } from '@mui/material';
-import TooltipAvatar from './tooltip-avatar';
-/**
- * 统一左侧列布局组件，包含头像和关注按钮
- */
-function LeftColumnLayout({
-  user,
-  avatarSize,
-  shouldShowHoverCard,
-  renderCardContent,
-  followButtonStyle,
-  isFollowed,
-  followLoading
-}) {
-  return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      mr: 2,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: 1
-    },
-    children: /*#__PURE__*/_jsx(TooltipAvatar, {
-      user: user,
-      avatarSize: avatarSize,
-      shouldShowHoverCard: shouldShowHoverCard,
-      renderCardContent: renderCardContent
-    })
-  });
-}
-export default LeftColumnLayout;

package/src/UserCard/Content/left-layout.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import { User } from '../types';
-import TooltipAvatar from './tooltip-avatar';
-
-interface LeftColumnLayoutProps {
-  user: User;
-  avatarSize: number;
-  shouldShowHoverCard: boolean;
-  renderCardContent: () => React.ReactNode;
-  followButtonStyle: string;
-  isFollowed: boolean;
-  followLoading: boolean;
-}
-
-/**
- * 统一左侧列布局组件，包含头像和关注按钮
- */
-function LeftColumnLayout({
-  user,
-  avatarSize,
-  shouldShowHoverCard,
-  renderCardContent,
-  followButtonStyle,
-  isFollowed,
-  followLoading,
-}: LeftColumnLayoutProps) {
-  return (
-    <Box sx={{ mr: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
-      <TooltipAvatar
-        user={user}
-        avatarSize={avatarSize}
-        shouldShowHoverCard={shouldShowHoverCard}
-        renderCardContent={renderCardContent}
-      />
-    </Box>
-  );
-}
-
-export default LeftColumnLayout;