@arcblock/ux 2.13.7 → 2.13.8

package/lib/UserCard/utils.js

@@ -1,3 +1,14 @@
+import { toTypeInfo } from '@arcblock/did';
+import { types } from '@ocap/mcrypto';
+import { BlockletSDK } from '@blocklet/js-sdk';
+let client = 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) {
@@ -16,4 +27,26 @@ export function createNameOnlyAvatar(user) {
     content = user.did ? user.did.charAt(0).toUpperCase() : '?';
   }
   return content;
+}
+export function isUserDid(did) {
+  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) {
+  if (!client) return null;
+  try {
+    const user = await client.user.getUserPublicInfo({
+      did
+    });
+    return user;
+  } catch (error) {
+    console.error('Failed to get user by did:', error);
+    return null;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.7",
+  "version": "2.13.8",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,14 +70,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "9db5da4c6bc8ec9bd239bcd6d080930b52601bd2",
+  "gitHead": "86ba86fce59551ceb09ee3cbdfd4646de2a69900",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.7",
-    "@arcblock/nft-display": "^2.13.7",
-    "@arcblock/react-hooks": "^2.13.7",
+    "@arcblock/icons": "^2.13.8",
+    "@arcblock/nft-display": "^2.13.8",
+    "@arcblock/react-hooks": "^2.13.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.7",
+    "@blocklet/theme": "^2.13.8",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { UserCardProps, InfoType } from '../types';
+import { UserCardProps, InfoType, User } from '../types';
 import TooltipAvatar from '../Content/tooltip-avatar';
 
-interface AvatarOnlyCardProps extends UserCardProps {
+interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   renderCardContent: () => React.ReactNode;
   shouldShowHoverCard: boolean;
 }

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { InfoType, UserCardProps } from '../types';
+import { InfoType, UserCardProps, User } from '../types';
 import MinimalContent from '../Content/minimal';
 import BasicContent from '../Content/basic';
 
-interface BasicCardProps extends UserCardProps {
+interface BasicCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
   isFull?: boolean;
@@ -12,14 +13,25 @@ interface BasicCardProps extends UserCardProps {
 
 // 详细卡片模式下的Basic渲染组件
 function BasicCard(props: BasicCardProps) {
-  const { user, avatarSize = 40, renderCustomContent, isFull = true, infoType = InfoType.Minimal, ...rest } = props;
+  const {
+    user,
+    avatarSize = 40,
+    renderCustomContent,
+    isFull = true,
+    infoType = InfoType.Minimal,
+    renderFields,
+    popupRenderFields,
+    ...rest
+  } = props;
 
   return (
     <Box display="flex" flexDirection="column" width="100%" sx={{ flex: 1, minWidth: 0 }}>
       <MinimalContent user={user} avatarSize={avatarSize} {...rest} />
 
-      {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} />}
-      {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
+      {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} renderFields={renderFields} />}
+      <Box className="user-card__footer">
+        {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
+      </Box>
     </Box>
   );
 }

package/src/UserCard/Cards/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { UserCardProps, InfoType } from '../types';
+import { UserCardProps, InfoType, User } from '../types';
 import NameOnlyCard from './name-only';
 import BasicCard from './basic-info';
 
-interface DetailedCardProps extends UserCardProps {
+interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
 }

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

@@ -1,14 +1,14 @@
 import { Typography } from '@mui/material';
-import { UserCardProps } from '../types';
+import { UserCardProps, User } from '../types';
 import { renderAvatar } from '../components';
 
 // 详细卡片模式下的NameOnly渲染组件
-function NameOnlyCard(props: UserCardProps) {
-  const { user, avatarSize = 48 } = props;
+function NameOnlyCard(props: Omit<UserCardProps, 'user'> & { user: User }) {
+  const { user, avatarSize = 48, onAvatarClick } = props;
 
   return (
     <>
-      {renderAvatar(user, avatarSize, props.avatarProps)}
+      {renderAvatar(user, avatarSize, props.avatarProps, onAvatarClick)}
       <Typography variant="body1">{user.fullName || user.email || user.did}</Typography>
     </>
   );

package/src/UserCard/Container/dialog.tsx

@@ -23,7 +23,7 @@ function DialogContainer({ children, sx }: DialogContainerProps) {
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: 2,
-          maxWidth: 400,
+          maxWidth: 500,
           minWidth: 320,
           display: 'flex',
         },

package/src/UserCard/Content/basic.tsx

@@ -1,15 +1,28 @@
-import { Typography, Box } from '@mui/material';
+import { Typography, Box, Grid } from '@mui/material';
 import { useCreation } from 'ahooks';
 import styled from '@emotion/styled';
+import isArray from 'lodash/isArray';
+import { Icon as IconifyIcon } from '@iconify/react';
+import infoCircleIcon from '@iconify-icons/tabler/info-circle';
 import LinkIcon from '@arcblock/icons/lib/Link';
+import PhoneIcon from '@arcblock/icons/lib/Phone';
 import LocationIcon from '@arcblock/icons/lib/Location';
 import EmailIcon from '@arcblock/icons/lib/Email';
 import TimezoneIcon from '@arcblock/icons/lib/Timezone';
-import { withoutProtocol } from 'ufo';
+import { joinURL, withoutProtocol } from 'ufo';
+import { Fragment, useState, useMemo, useCallback } from 'react';
 
 import { User } from '../types';
 import Clock from './clock';
 
+const IconMap = {
+  timezone: TimezoneIcon,
+  email: EmailIcon,
+  phone: PhoneIcon,
+  location: LocationIcon,
+  link: LinkIcon,
+};
+
 /**
  * 格式化链接显示
  * 对于 http/https 协议只显示域名，其他协议显示完整链接
@@ -25,9 +38,84 @@ const iconSize = {
 interface BasicContentProps {
   user: User;
   isFull?: boolean;
+  renderFields?: string[];
+}
+
+function TimeZoneField({ value }: { value: string }) {
+  return (
+    <Box display="flex" alignItems="center" gap={1} className="user-card__timezone-field">
+      <TimezoneIcon {...iconSize} />
+      <LineText variant="body2" color="grey.800">
+        <Clock value={value} variant="body2" color="grey.800" />
+      </LineText>
+    </Box>
+  );
+}
+
+function LinkField({ value }: { value: string }) {
+  const [useFallback, setUseFallback] = useState(false);
+  const faviconUrl = useCreation(() => {
+    try {
+      const url = new URL(value);
+      return joinURL(url.origin, 'favicon.ico');
+    } catch (e) {
+      return '';
+    }
+  }, [value]);
+
+  const handleImageError = () => {
+    setUseFallback(true);
+  };
+
+  return (
+    <Box display="flex" alignItems="center" gap={1}>
+      {faviconUrl && !useFallback ? (
+        <img
+          src={faviconUrl}
+          alt="site icon"
+          style={{ width: 14, height: 14, objectFit: 'contain' }}
+          onError={handleImageError}
+        />
+      ) : (
+        <LinkIcon {...iconSize} />
+      )}
+      <LineText>
+        <Typography
+          component="a"
+          href={value}
+          style={{ textDecoration: 'none' }}
+          target="_blank"
+          variant="body2"
+          color="grey.800"
+          rel="noopener noreferrer">
+          {formatLinkDisplay(value)}
+        </Typography>
+      </LineText>
+    </Box>
+  );
+}
+
+function BasicField({ field, value }: { field: string; value: string }) {
+  const Icon = IconMap[field as keyof typeof IconMap];
+  return (
+    <Box key={field} display="flex" alignItems="center" gap={1} className={`user-card__${field}-field`}>
+      {Icon ? <Icon {...iconSize} /> : <IconifyIcon icon={infoCircleIcon} {...iconSize} />}
+      <LineText variant="body2" color="grey.800">
+        {value}
+      </LineText>
+    </Box>
+  );
 }
 
-function BasicContent({ user, isFull = false }: BasicContentProps) {
+function BasicContent({ user, isFull = false, renderFields }: BasicContentProps) {
+  const fields = useCreation(() => {
+    return renderFields ?? ['bio', 'email', 'phone', 'location', 'timezone', 'link'];
+  }, [renderFields]);
+
+  const includeBio = useCreation(() => {
+    return fields.includes('bio');
+  }, [fields]);
+
   const metadata = useCreation(() => {
     return (
       user.metadata ?? {
@@ -41,67 +129,113 @@ function BasicContent({ user, isFull = false }: BasicContentProps) {
     );
   }, [user]);
 
-  // 获取第一个链接（如果有）
-  const firstLink = metadata.links && metadata.links.length > 0 ? metadata.links[0] : null;
+  const address = useCreation(() => {
+    return user.address;
+  }, [user.address]);
 
-  const moreContent = () => {
-    return metadata.timezone ? (
-      <Box display="flex" alignItems="center" gap={1}>
-        <TimezoneIcon {...iconSize} />
-        <LineText variant="body2" color="grey.800">
-          <Clock value={metadata.timezone} variant="body2" color="grey.800" />
-        </LineText>
-      </Box>
-    ) : null;
+  const getFieldValue = useCallback(
+    (field: string) => {
+      if (!field) return '';
+      switch (field) {
+        case 'bio':
+          return user.metadata?.bio || '';
+        case 'email':
+          return metadata.email || user.email || '';
+        case 'phone':
+          return metadata.phone?.phoneNumber || user.phone || '';
+        case 'location':
+          return address?.city || metadata.location || '';
+        case 'timezone':
+          return metadata.timezone || '';
+        case 'link':
+          return metadata.links?.map((link) => link.url).filter(Boolean) || [];
+        default:
+          return user[field as keyof User] || '';
+      }
+    },
+    [user, metadata, address]
+  );
+
+  // 计算实际可见的字段数量
+  const visibleFields = useMemo(() => {
+    return fields.filter((field) => {
+      if (field === 'bio') return false; // bio field is handled separately
+      const value = getFieldValue(field);
+
+      if (value === undefined || value === null || value === '') return false;
+
+      if (isArray(value)) {
+        return value.length > 0;
+      }
+
+      return String(value).trim().length > 0;
+    });
+  }, [fields, getFieldValue]);
+
+  // 判断是否需要使用两列布局
+  const useDoubleColumn = visibleFields.length > 4;
+
+  if (fields.length === 0) {
+    return null;
+  }
+
+  const renderField = (field: string) => {
+    const value = getFieldValue(field);
+    if (!value || field === 'bio') {
+      return null;
+    }
+
+    if (isArray(value)) {
+      return (
+        <Fragment key={field}>
+          {field === 'link' ? (
+            <>
+              {value.map((link) => (
+                <LinkField key={link} value={link} />
+              ))}
+            </>
+          ) : (
+            <>
+              {value.map((item) => (
+                <BasicField key={item} field={field} value={item} />
+              ))}
+            </>
+          )}
+        </Fragment>
+      );
+    }
+
+    if (field === 'timezone') {
+      return <TimeZoneField key={field} value={value as string} />;
+    }
+
+    return <BasicField key={field} field={field} value={value as string} />;
   };
 
   return (
-    <Box mt={1} display="flex" flexDirection="column" gap={1.5}>
-      {user.metadata?.bio && (
-        <LineText variant="body2" color="grey.800">
+    <Box mt={1} display="flex" flexDirection="column" gap={1.5} className="user-card__basic-content">
+      {includeBio && user.metadata?.bio && (
+        <LineText variant="body2" color="grey.800" className="user-card__bio-field">
           {user.metadata.bio}
         </LineText>
       )}
-      <Box display="flex" flexDirection="column" gap={0.5}>
-        {/* 显示第一个链接（如果有） */}
-        {firstLink && (
-          <Box display="flex" alignItems="center" gap={1}>
-            <LinkIcon {...iconSize} />
-            <LineText>
-              <Typography
-                component="a"
-                href={firstLink.url}
-                style={{ textDecoration: 'none' }}
-                target="_blank"
-                variant="body2"
-                color="grey.800"
-                rel="noopener noreferrer">
-                {formatLinkDisplay(firstLink.url)}
-              </Typography>
-            </LineText>
-          </Box>
-        )}
-        {metadata.location && (
-          <Box display="flex" alignItems="center" gap={1}>
-            <LocationIcon {...iconSize} />
-            <LineText variant="body2" color="grey.800">
-              {metadata.location}
-            </LineText>
-          </Box>
-        )}
-
-        {isFull && moreContent()}
-
-        {/* 显示邮箱 */}
-        {(metadata.email || user.email) && (
-          <Box display="flex" alignItems="center" gap={1}>
-            <EmailIcon {...iconSize} />
-            <LineText variant="body2" color="grey.800">
-              {metadata.email || user.email}
-            </LineText>
-          </Box>
-        )}
-      </Box>
+      {/* 其他字段 */}
+      {useDoubleColumn ? (
+        <Grid container spacing={0.5}>
+          {fields.map((field) => {
+            if (field === 'bio' || !getFieldValue(field)) return null;
+            return (
+              <Grid item xs={6} key={field}>
+                {renderField(field)}
+              </Grid>
+            );
+          })}
+        </Grid>
+      ) : (
+        <Box display="flex" flexDirection="column" gap={0.5}>
+          {fields.map((field) => renderField(field))}
+        </Box>
+      )}
     </Box>
   );
 }

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;
@@ -30,7 +30,7 @@ function MinimalContent(props: MinimalContentProps) {
   } = 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}
@@ -44,6 +44,7 @@ function MinimalContent(props: MinimalContentProps) {
             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>
   );
 }