@arcblock/ux 2.13.7 → 2.13.9

package/lib/UserCard/Cards/avatar-only.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
-interface AvatarOnlyCardProps extends UserCardProps {
+import { UserCardProps, User } from '../types';
+interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
+    user: User;
     renderCardContent: () => React.ReactNode;
     shouldShowHoverCard: boolean;
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
-interface BasicCardProps extends UserCardProps {
+import { UserCardProps, User } from '../types';
+interface BasicCardProps extends Omit<UserCardProps, 'user'> {
+    user: User;
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
     isFull?: boolean;

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

@@ -12,6 +12,8 @@ function BasicCard(props) {
     renderCustomContent,
     isFull = true,
     infoType = InfoType.Minimal,
+    renderFields,
+    popupRenderFields,
     ...rest
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
@@ -28,12 +30,16 @@ function BasicCard(props) {
       ...rest
     }), infoType === InfoType.Basic && /*#__PURE__*/_jsx(BasicContent, {
       user: user,
-      isFull: isFull
-    }), renderCustomContent && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        mt: 1.5
-      },
-      children: renderCustomContent()
+      isFull: isFull,
+      renderFields: renderFields
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "user-card__footer",
+      children: renderCustomContent && /*#__PURE__*/_jsx(Box, {
+        sx: {
+          mt: 1.5
+        },
+        children: renderCustomContent()
+      })
     })]
   });
 }

package/lib/UserCard/Cards/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
-interface DetailedCardProps extends UserCardProps {
+import { UserCardProps, User } from '../types';
+interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
+    user: User;
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;
 }

package/lib/UserCard/Cards/name-only.d.ts

@@ -1,3 +1,5 @@
-import { UserCardProps } from '../types';
-declare function NameOnlyCard(props: UserCardProps): import("react/jsx-runtime").JSX.Element;
+import { UserCardProps, User } from '../types';
+declare function NameOnlyCard(props: Omit<UserCardProps, 'user'> & {
+    user: User;
+}): import("react/jsx-runtime").JSX.Element;
 export default NameOnlyCard;

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

@@ -6,10 +6,11 @@ import { renderAvatar } from '../components';
 function NameOnlyCard(props) {
   const {
     user,
-    avatarSize = 48
+    avatarSize = 48,
+    onAvatarClick
   } = props;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [renderAvatar(user, avatarSize, props.avatarProps), /*#__PURE__*/_jsx(Typography, {
+    children: [renderAvatar(user, avatarSize, props.avatarProps, onAvatarClick), /*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       children: user.fullName || user.email || user.did
     })]

package/lib/UserCard/Container/dialog.js

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

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

@@ -2,6 +2,7 @@ import { User } from '../types';
 interface BasicContentProps {
     user: User;
     isFull?: boolean;
+    renderFields?: string[];
 }
-declare function BasicContent({ user, isFull }: BasicContentProps): import("react/jsx-runtime").JSX.Element;
+declare function BasicContent({ user, isFull, renderFields }: BasicContentProps): import("react/jsx-runtime").JSX.Element | null;
 export default BasicContent;

package/lib/UserCard/Content/basic.js

@@ -1,13 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, Box } from '@mui/material';
-import { useCreation } from 'ahooks';
+import { Typography, Box, Grid } from '@mui/material';
+import { useCreation, useMemoizedFn } 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 { useState, useMemo, useCallback } from 'react';
 import Clock from './clock';
+const IconMap = {
+  timezone: TimezoneIcon,
+  email: EmailIcon,
+  phone: PhoneIcon,
+  location: LocationIcon,
+  link: LinkIcon
+};
 
 /**
  * 格式化链接显示
@@ -20,10 +32,111 @@ const iconSize = {
   width: 16,
   height: 16
 };
+
+// 定义渲染项的类型
+
+function TimeZoneField({
+  value
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    className: "user-card__timezone-field",
+    children: [/*#__PURE__*/_jsx(TimezoneIcon, {
+      ...iconSize
+    }), /*#__PURE__*/_jsx(Clock, {
+      value: value,
+      variant: "body2",
+      color: "grey.800"
+    })]
+  });
+}
+function LinkField({
+  value
+}) {
+  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 /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    className: "user-card__link-field",
+    children: [faviconUrl && !useFallback ? /*#__PURE__*/_jsx("img", {
+      src: faviconUrl,
+      alt: "site icon",
+      style: {
+        width: 16,
+        height: 16,
+        objectFit: 'contain'
+      },
+      onError: handleImageError
+    }) : /*#__PURE__*/_jsx(LinkIcon, {
+      ...iconSize
+    }), /*#__PURE__*/_jsx(LineText, {
+      variant: "body2",
+      color: "grey.800",
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "a",
+        href: value,
+        style: {
+          textDecoration: 'none',
+          color: 'inherit',
+          fontSize: 'inherit'
+        },
+        target: "_blank",
+        variant: "body2",
+        color: "grey.800",
+        rel: "noopener noreferrer",
+        children: formatLinkDisplay(value)
+      })
+    })]
+  });
+}
+function BasicField({
+  field,
+  value,
+  children
+}) {
+  const Icon = IconMap[field];
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    className: `user-card__${field}-field`,
+    children: [Icon ? /*#__PURE__*/_jsx(Icon, {
+      ...iconSize
+    }) : /*#__PURE__*/_jsx(IconifyIcon, {
+      icon: infoCircleIcon,
+      ...iconSize
+    }), /*#__PURE__*/_jsx(LineText, {
+      variant: "body2",
+      color: "grey.800",
+      children: children ?? value
+    })]
+  }, field);
+}
 function BasicContent({
   user,
-  isFull = false
+  isFull = false,
+  renderFields
 }) {
+  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 ?? {
       joinedAt: user?.createdAt,
@@ -34,83 +147,157 @@ function BasicContent({
       }
     };
   }, [user]);
+  const address = useCreation(() => {
+    return user.address;
+  }, [user.address]);
+  const getFieldValue = useCallback(field => {
+    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] || '';
+    }
+  }, [user, metadata, address]);
 
-  // 获取第一个链接（如果有）
-  const firstLink = metadata.links && metadata.links.length > 0 ? metadata.links[0] : null;
-  const moreContent = () => {
-    return metadata.timezone ? /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      alignItems: "center",
-      gap: 1,
-      children: [/*#__PURE__*/_jsx(TimezoneIcon, {
-        ...iconSize
-      }), /*#__PURE__*/_jsx(LineText, {
-        variant: "body2",
-        color: "grey.800",
-        children: /*#__PURE__*/_jsx(Clock, {
-          value: metadata.timezone,
-          variant: "body2",
-          color: "grey.800"
-        })
-      })]
-    }) : null;
+  // 计算实际可见的字段数量和渲染元素数量
+  const {
+    effectiveRenderCount
+  } = useMemo(() => {
+    const visible = 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;
+    });
+
+    // 计算实际渲染数量
+    const renderCount = visible.reduce((count, field) => {
+      const value = getFieldValue(field);
+      return count + (Array.isArray(value) ? value.filter(item => item && String(item).trim()).length : 1);
+    }, 0);
+    return {
+      visibleFields: visible,
+      effectiveRenderCount: renderCount
+    };
+  }, [fields, getFieldValue]);
+
+  // 判断是否需要使用两列布局
+  const useDoubleColumn = effectiveRenderCount > 4;
+  const isValidValue = useMemoizedFn(value => value !== undefined && value !== null && String(value).trim().length > 0);
+
+  // 准备要渲染的所有元素项
+  const renderItems = useMemo(() => {
+    const items = [];
+
+    // 遍历有效字段，展开数组字段为单独的渲染项
+    fields.forEach(field => {
+      if (field === 'bio') return; // bio field is handled separately
+      const value = getFieldValue(field);
+      if (!value) return;
+      if (isArray(value)) {
+        // 数组类型字段，每个有效项生成一个渲染元素
+        value.forEach((item, index) => {
+          if (isValidValue(item)) {
+            items.push({
+              field,
+              value: item,
+              key: `${field}-${index}`
+            });
+          }
+        });
+      } else if (isValidValue(value)) {
+        // 非数组类型字段，生成一个渲染元素
+        items.push({
+          field,
+          value,
+          key: field
+        });
+      }
+    });
+    return items;
+  }, [fields, getFieldValue, isValidValue]);
+  if (fields.length === 0) {
+    return null;
+  }
+  const renderItem = item => {
+    const {
+      field,
+      value,
+      key
+    } = item;
+    switch (field) {
+      case 'link':
+        return /*#__PURE__*/_jsx(LinkField, {
+          value: value
+        }, key);
+      case 'timezone':
+        return /*#__PURE__*/_jsx(TimeZoneField, {
+          value: value
+        }, key);
+      case 'email':
+        return /*#__PURE__*/_jsx(BasicField, {
+          field: field,
+          value: value
+          // eslint-disable-next-line react/no-children-prop
+          ,
+          children: /*#__PURE__*/_jsx(Typography, {
+            component: "a",
+            href: `mailto:${value}`,
+            rel: "noopener noreferrer",
+            referrerPolicy: "no-referrer",
+            style: {
+              color: 'inherit',
+              textDecoration: 'none',
+              fontSize: 'inherit'
+            },
+            children: value
+          })
+        });
+      default:
+        return /*#__PURE__*/_jsx(BasicField, {
+          field: field,
+          value: value
+        }, key);
+    }
   };
   return /*#__PURE__*/_jsxs(Box, {
     mt: 1,
     display: "flex",
     flexDirection: "column",
     gap: 1.5,
-    children: [user.metadata?.bio && /*#__PURE__*/_jsx(LineText, {
+    className: "user-card__basic-content",
+    children: [includeBio && user.metadata?.bio && /*#__PURE__*/_jsx(LineText, {
       variant: "body2",
       color: "grey.800",
+      className: "user-card__bio-field",
       children: user.metadata.bio
-    }), /*#__PURE__*/_jsxs(Box, {
+    }), useDoubleColumn ? /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      spacing: 0.5,
+      children: renderItems.map(item => /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 6,
+        children: renderItem(item)
+      }, item.key))
+    }) : /*#__PURE__*/_jsx(Box, {
       display: "flex",
       flexDirection: "column",
       gap: 0.5,
-      children: [firstLink && /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(LinkIcon, {
-          ...iconSize
-        }), /*#__PURE__*/_jsx(LineText, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            component: "a",
-            href: firstLink.url,
-            style: {
-              textDecoration: 'none'
-            },
-            target: "_blank",
-            variant: "body2",
-            color: "grey.800",
-            rel: "noopener noreferrer",
-            children: formatLinkDisplay(firstLink.url)
-          })
-        })]
-      }), metadata.location && /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(LocationIcon, {
-          ...iconSize
-        }), /*#__PURE__*/_jsx(LineText, {
-          variant: "body2",
-          color: "grey.800",
-          children: metadata.location
-        })]
-      }), isFull && moreContent(), (metadata.email || user.email) && /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        children: [/*#__PURE__*/_jsx(EmailIcon, {
-          ...iconSize
-        }), /*#__PURE__*/_jsx(LineText, {
-          variant: "body2",
-          color: "grey.800",
-          children: metadata.email || user.email
-        })]
-      })]
+      children: renderItems.map(item => renderItem(item))
     })]
   });
 }

package/lib/UserCard/Content/clock.js

@@ -40,16 +40,21 @@ export default function Clock({
   });
   const timeInfo = useClock(value, locale);
   return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
     display: "flex",
     alignItems: "center",
     gap: 1,
+    flex: 1,
+    justifyContent: "flex-start",
+    overflow: "hidden",
+    width: "100%",
     children: [/*#__PURE__*/_jsx(Typography, {
       ...props,
+      noWrap: true,
+      sx: {
+        flex: '0 1 auto',
+        minWidth: 0,
+        ...props.sx
+      },
       children: value
     }), /*#__PURE__*/_jsx(Tooltip, {
       enterDelay: 200,
@@ -61,6 +66,14 @@ export default function Clock({
       children: /*#__PURE__*/_jsxs(Typography, {
         component: "span",
         fontSize: 14,
+        noWrap: true,
+        sx: {
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          flex: '0 0 auto',
+          maxWidth: '100%'
+        },
         children: ["(", locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : '', timeInfo.formattedTime, ")"]
       })
     })]

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { UserCardProps } from '../types';
+import { User, UserCardProps } from '../types';
 interface MinimalContentProps extends UserCardProps {
-    user: UserCardProps['user'];
+    user: User;
     avatarSize: number;
     shouldShowHoverCard: boolean;
     renderCardContent?: () => React.ReactNode | null;

package/lib/UserCard/Content/minimal.js

@@ -16,12 +16,14 @@ function MinimalContent(props) {
     renderTopRightContent,
     topRightMaxWidth,
     avatarProps,
-    shortenLabelProps
+    shortenLabelProps,
+    ...rest
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
+    className: "user-card__avatar-content",
     children: [/*#__PURE__*/_jsxs(Box, {
       display: "flex",
       justifyContent: "flex-start",
@@ -34,12 +36,14 @@ function MinimalContent(props) {
         avatarSize: avatarSize,
         shouldShowHoverCard: shouldShowHoverCard,
         renderCardContent: renderCardContent,
-        avatarProps: avatarProps
+        avatarProps: avatarProps,
+        ...rest
       }), /*#__PURE__*/_jsxs(Box, {
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "subtitle1",
           fontWeight: 500,
           color: "text.primary",
+          className: "user-card__full-name-label",
           fontSize: 18,
           noWrap: true,
           sx: {

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

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

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

@@ -14,11 +14,12 @@ function TooltipAvatar({
   renderCardContent,
   tooltipTitle,
   tooltipProps,
-  avatarProps
+  avatarProps,
+  onAvatarClick
 }) {
   const avatarElement = /*#__PURE__*/_jsx(Box, {
     display: "inline-block",
-    children: renderAvatar(user, avatarSize, avatarProps)
+    children: renderAvatar(user, avatarSize, avatarProps, onAvatarClick, shouldShowHoverCard || !!tooltipTitle)
   });
   // 使用普通文本Tooltip
   if (tooltipTitle) {
@@ -44,7 +45,7 @@ function TooltipAvatar({
           '& .MuiTooltip-tooltip': {
             backgroundColor: 'transparent',
             p: 0,
-            maxWidth: 400,
+            maxWidth: 500,
             zIndex: 1000
           }
         }

package/lib/UserCard/components.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { UserCardProps } from './types';
-export declare const renderAvatar: (user: UserCardProps["user"], avatarSize?: number, avatarProps?: UserCardProps["avatarProps"]) => import("react/jsx-runtime").JSX.Element;
+import { User, UserCardProps } from './types';
+export declare const renderAvatar: (user: User, avatarSize?: number, avatarProps?: UserCardProps["avatarProps"], onAvatarClick?: UserCardProps["onAvatarClick"], shouldShowHoverCard?: boolean) => 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

@@ -5,7 +5,10 @@ import Avatar from '../Avatar';
 import { createNameOnlyAvatar } from './utils';
 
 // 渲染头像
-export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined) => {
+export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined, onAvatarClick = undefined, shouldShowHoverCard = false) => {
+  const onClick = e => {
+    onAvatarClick?.(user, e);
+  };
   // 如果用户没有头像，则显示名称首字母头像
   if (!user.avatar) {
     const avatarContent = createNameOnlyAvatar(user);
@@ -13,9 +16,10 @@ export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined) =>
       size: avatarSize,
       did: user.did,
       variant: "circle",
+      onClick: onClick,
       sx: {
         fontSize: avatarSize * 0.4,
-        cursor: 'pointer'
+        cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
       },
       ...(avatarProps || {}),
       children: avatarContent
@@ -28,8 +32,9 @@ export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined) =>
     did: user.did,
     variant: "circle",
     style: {
-      cursor: 'pointer'
+      cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
     },
+    onClick: onClick,
     src: user.avatar,
     alt: user.fullName || '',
     ...(avatarProps || {})
@@ -43,6 +48,7 @@ export const renderTopRight = (renderTopRightContent, topRightMaxWidth = 120) =>
       sx: {
         maxWidth: topRightMaxWidth
       },
+      className: "user-card__top-right-content",
       children: renderTopRightContent()
     });
   }