@arcblock/ux 2.13.6 → 2.13.8

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>
   );
 }

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/src/type.d.ts

@@ -1,10 +1,9 @@
-import type { Theme } from '@mui/material';
+import type { Theme, PaletteMode } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 export type $TSFixMe = any;
 export type Translations = Record<string, Record<string, any>>;
 export type Locale = LiteralUnion<'en' | 'zh', string>;
-export type ThemeMode = 'light' | 'dark';
 
 // TODO: 以下为 blocklet 应用专属的全局对象类型，可以更加具体
 export type User = Record<string, any>;
@@ -26,7 +25,7 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Record<ThemeMode, Theme>;
+  theme: Record<PaletteMode, Theme>;
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {

package/src/withTheme/index.tsx

@@ -1,12 +1,11 @@
 import { useEffect } from 'react';
 import { Global, css } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
-import { Breakpoint } from '@mui/material';
+import { Breakpoint, type PaletteMode } from '@mui/material';
 import { type PaletteOptions } from '@mui/material/styles/createPalette';
 import { type TypographyOptions } from '@mui/material/styles/createTypography';
 
 import { createTheme, ThemeProvider } from '../Theme';
-import { ThemeMode } from '../type';
 
 function withTheme<P extends object>(
   Component: React.ComponentType<P>,
@@ -15,7 +14,7 @@ function withTheme<P extends object>(
     pageWidth = 'md',
     palette,
     typography,
-  }: { mode?: ThemeMode; pageWidth?: Breakpoint; palette?: PaletteOptions; typography?: TypographyOptions } = {}
+  }: { mode?: PaletteMode; pageWidth?: Breakpoint; palette?: PaletteOptions; typography?: TypographyOptions } = {}
 ) {
   const theme = createTheme({ mode, pageWidth, palette, typography });