@arcblock/ux 2.12.64 → 2.12.71

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { InfoType, UserCardProps } from '../types';
+import LeftLayout from '../Content/left-layout';
+import MinimalContent from '../Content/minimal';
+import BasicContent from '../Content/basic';
+
+interface BasicCardProps extends UserCardProps {
+  shouldShowHoverCard: boolean;
+  renderCardContent?: () => React.ReactNode | null;
+  isFull?: boolean;
+}
+
+// 详细卡片模式下的Basic渲染组件
+function BasicCard(props: BasicCardProps) {
+  const {
+    user,
+    avatarSize = 40,
+    showDid = false,
+    didProps = {},
+    shouldShowHoverCard,
+    renderCardContent,
+    renderTopRightContent,
+    topRightMaxWidth = 100,
+    renderCustomContent,
+    isFull = true,
+    infoType = InfoType.Minimal,
+  } = props;
+
+  return (
+    <Box display="flex" flexDirection="column" width="100%" sx={{ flex: 1, minWidth: 0 }}>
+      <MinimalContent
+        infoType={infoType}
+        user={user}
+        showDid={showDid}
+        didProps={didProps}
+        avatarSize={avatarSize}
+        shouldShowHoverCard={shouldShowHoverCard}
+        renderCardContent={renderCardContent}
+        renderTopRightContent={renderTopRightContent}
+        topRightMaxWidth={topRightMaxWidth}
+      />
+
+      {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} />}
+      {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
+    </Box>
+  );
+}
+
+export default BasicCard;

package/src/UserCard/Cards/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { UserCardProps, InfoType } from '../types';
+import NameOnlyCard from './name-only';
+import BasicCard from './basic-info';
+
+interface DetailedCardProps extends UserCardProps {
+  shouldShowHoverCard: boolean;
+  renderCardContent?: () => React.ReactNode | null;
+}
+
+// DetailedCard组件，根据infoType选择不同的卡片组件进行渲染
+function DetailedCard(props: DetailedCardProps) {
+  const { infoType = InfoType.Minimal } = props;
+
+  // 根据信息类型选择合适的卡片组件
+  switch (infoType) {
+    case InfoType.NameOnly:
+      return <NameOnlyCard {...props} />;
+    default:
+      return <BasicCard {...props} />;
+  }
+}
+
+export default DetailedCard;

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

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

package/src/UserCard/Container/card.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Paper } from '@mui/material';
+import { CardType } from '../types';
+
+interface CardContainerProps {
+  children: React.ReactNode;
+  cardType?: CardType;
+  variant?: 'paper' | 'box';
+  containerRef?: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * 统一的卡片容器组件，处理常见的布局容器样式
+ */
+function CardContainer({ children, cardType = CardType.Detailed, variant = 'box', containerRef }: CardContainerProps) {
+  const commonStyles = {
+    minWidth: 320,
+    p: 2,
+    borderRadius: 2,
+    ...(cardType === CardType.Detailed
+      ? {
+          border: '1px solid',
+          borderColor: 'divider',
+        }
+      : {}),
+  };
+
+  // Paper变体，用于Basic和Full类型卡片
+  if (variant === 'paper') {
+    return (
+      <Paper ref={containerRef} elevation={0} sx={commonStyles}>
+        {children}
+      </Paper>
+    );
+  }
+
+  // Box变体，用于Minimal和NameOnly类型卡片
+  return (
+    <Box
+      ref={containerRef}
+      sx={{
+        ...commonStyles,
+        display: 'flex',
+        alignItems: cardType === CardType.AvatarOnly ? 'center' : 'flex-start',
+        gap: 2,
+      }}>
+      {children}
+    </Box>
+  );
+}
+
+export default CardContainer;

package/src/UserCard/Container/dialog.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Box, useTheme } from '@mui/material';
+
+interface DialogContainerProps {
+  children: React.ReactNode;
+}
+
+/**
+ * 统一的卡片容器组件，处理常见的布局容器样式
+ */
+function DialogContainer({ children }: 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,
+        display: 'flex',
+      }}>
+      {children}
+    </Box>
+  );
+}
+
+export default DialogContainer;

package/src/UserCard/Content/basic.tsx

@@ -0,0 +1,134 @@
+import { Typography, Box } from '@mui/material';
+import { useCreation } from 'ahooks';
+import styled from '@emotion/styled';
+import LinkIcon from '@arcblock/icons/lib/Link';
+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 { User } from '../types';
+import Clock from './clock';
+
+/**
+ * 格式化链接显示
+ * 对于 http/https 协议只显示域名，其他协议显示完整链接
+ */
+function formatLinkDisplay(link: string): string {
+  return withoutProtocol(link);
+}
+
+const iconSize = {
+  width: 16,
+  height: 16,
+};
+interface BasicContentProps {
+  user: User;
+  isFull?: boolean;
+}
+
+function BasicContent({ user, isFull = false }: BasicContentProps) {
+  const metadata = useCreation(() => {
+    return (
+      user.metadata ?? {
+        joinedAt: user?.createdAt,
+        email: user?.email,
+        phone: {
+          country: 'cn',
+          phoneNumber: user?.phone ?? '',
+        },
+      }
+    );
+  }, [user]);
+
+  // 获取第一个链接（如果有）
+  const firstLink = metadata.links && metadata.links.length > 0 ? metadata.links[0] : null;
+
+  const moreContent = () => {
+    return metadata.timezone ? (
+      <Box display="flex" alignItems="center" gap={1}>
+        <TimezoneIcon {...iconSize} />
+        <Typography variant="body2" color="grey.800">
+          <Clock value={metadata.timezone} variant="body2" color="grey.800" />
+        </Typography>
+      </Box>
+    ) : null;
+  };
+
+  return (
+    <Box mt={1} display="flex" flexDirection="column" gap={1.5}>
+      {user.metadata?.bio && (
+        <Typography
+          variant="body2"
+          color="grey.800"
+          sx={{
+            lineHeight: 1.5,
+            display: '-webkit-box',
+            WebkitLineClamp: 1,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}>
+          {user.metadata.bio}
+        </Typography>
+      )}
+      <Box display="flex" flexDirection="column" gap={0.5}>
+        {/* 显示第一个链接（如果有） */}
+        {firstLink && (
+          <Box display="flex" alignItems="center" gap={1}>
+            <LinkIcon {...iconSize} />
+            <LinkDiv>
+              <Typography
+                component="a"
+                href={firstLink.url}
+                style={{ textDecoration: 'none' }}
+                target="_blank"
+                variant="body2"
+                color="grey.800"
+                rel="noopener noreferrer">
+                {formatLinkDisplay(firstLink.url)}
+              </Typography>
+            </LinkDiv>
+          </Box>
+        )}
+        {metadata.location && (
+          <Box display="flex" alignItems="center" gap={1}>
+            <LocationIcon {...iconSize} />
+            <Typography variant="body2" color="grey.800">
+              {metadata.location}
+            </Typography>
+          </Box>
+        )}
+
+        {isFull && moreContent()}
+
+        {/* 显示邮箱 */}
+        {(metadata.email || user.email) && (
+          <Box display="flex" alignItems="center" gap={1}>
+            <EmailIcon {...iconSize} />
+            <Typography variant="body2" color="grey.800">
+              {metadata.email || user.email}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default BasicContent;
+
+const LinkDiv = styled('span')`
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  & > * {
+    word-break: break-all;
+  }
+
+  .status {
+    margin-left: 8px;
+  }
+`;

package/src/UserCard/Content/clock.tsx

@@ -0,0 +1,63 @@
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { useMemoizedFn } from 'ahooks';
+import useClock from '../../hooks/use-clock';
+import { translate } from '../../Locale/util';
+import { useLocaleContext } from '../../Locale/context';
+
+const translations = {
+  en: {
+    localTime: 'Local Time',
+    timezonePhase: {
+      dawn: 'AM',
+      morning: 'AM',
+      afternoon: 'PM',
+      night: 'PM',
+    },
+  },
+  zh: {
+    localTime: '本地时间',
+    timezonePhase: {
+      dawn: '凌晨',
+      morning: '上午',
+      afternoon: '下午',
+      night: '晚上',
+    },
+  },
+};
+export default function Clock({ value, ...props }: { value: string; [key: string]: any }) {
+  const { locale } = useLocaleContext() || { locale: 'en' };
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const timeInfo = useClock(value, locale);
+
+  return (
+    <Box
+      sx={{
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      }}
+      display="flex"
+      alignItems="center"
+      gap={1}>
+      <Typography {...props}>{value}</Typography>
+      <Tooltip
+        enterDelay={200}
+        title={
+          <span>
+            {t('localTime')} {timeInfo.fullDateTime}
+          </span>
+        }
+        placement="top"
+        arrow>
+        <Typography component="span" fontSize={14}>
+          ({locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : ''}
+          {timeInfo.formattedTime})
+        </Typography>
+      </Tooltip>
+    </Box>
+  );
+}

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

@@ -0,0 +1,40 @@
+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;

package/src/UserCard/Content/minimal.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+import DID from '../../DID';
+import { InfoType, User } from '../types';
+import TooltipAvatar from './tooltip-avatar';
+import { renderTopRight } from '../components';
+
+interface MinimalContentProps {
+  user: User;
+  infoType: InfoType;
+  showDid: boolean;
+  avatarSize: number;
+  shouldShowHoverCard: boolean;
+  renderCardContent?: () => React.ReactNode | null;
+  didProps: Record<string, any>;
+  renderTopRightContent?: () => React.ReactNode;
+  topRightMaxWidth: number;
+}
+
+function MinimalContent(props: MinimalContentProps) {
+  const {
+    user,
+    showDid,
+    didProps,
+    avatarSize,
+    shouldShowHoverCard,
+    renderCardContent,
+    renderTopRightContent,
+    topRightMaxWidth,
+    infoType = InfoType.NameOnly,
+  } = props;
+
+  return (
+    <Box display="flex" justifyContent="space-between" alignItems="center">
+      <Box display="flex" justifyContent="flex-start" alignItems="center" gap={2} sx={{ flex: 1, minWidth: 0 }}>
+        <TooltipAvatar
+          user={user}
+          avatarSize={avatarSize}
+          shouldShowHoverCard={shouldShowHoverCard}
+          renderCardContent={renderCardContent}
+        />
+        <Box>
+          <Typography
+            variant="subtitle1"
+            fontWeight={500}
+            color="text.primary"
+            fontSize={18}
+            noWrap
+            sx={{ lineHeight: 1.1 }}>
+            {user.fullName || user.email || user.did}
+          </Typography>
+
+          {showDid && user.did && <DID did={user.did} size={14} sx={{ lineHeight: 1.5 }} {...didProps} />}
+        </Box>
+      </Box>
+      {renderTopRight(renderTopRightContent, topRightMaxWidth)}
+    </Box>
+  );
+}
+export default MinimalContent;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Box, Tooltip } from '@mui/material';
+import { User } from '../types';
+import { renderAvatar } from '../components';
+
+interface TooltipAvatarProps {
+  user: User;
+  avatarSize: number;
+  shouldShowHoverCard: boolean;
+  renderCardContent?: () => React.ReactNode | null;
+  tooltipTitle?: string;
+}
+
+/**
+ * 统一处理头像的Tooltip显示组件
+ * 根据条件显示普通Tooltip、自定义Tooltip内容或无Tooltip的头像
+ */
+function TooltipAvatar({ user, avatarSize, shouldShowHoverCard, renderCardContent, tooltipTitle }: TooltipAvatarProps) {
+  // 使用普通文本Tooltip
+  if (tooltipTitle) {
+    return (
+      <Tooltip enterDelay={200} title={tooltipTitle} placement="bottom">
+        <div style={{ display: 'inline-block' }}>{renderAvatar(user, avatarSize)}</div>
+      </Tooltip>
+    );
+  }
+
+  // 使用自定义内容Tooltip
+  if (shouldShowHoverCard) {
+    return (
+      <Tooltip
+        enterDelay={200}
+        title={renderCardContent ? renderCardContent() : null}
+        placement="bottom"
+        arrow={false}
+        PopperProps={{
+          sx: {
+            '& .MuiTooltip-tooltip': {
+              backgroundColor: 'transparent',
+              p: 0,
+              maxWidth: 400,
+              zIndex: 1000,
+            },
+          },
+        }}>
+        <Box display="inline-block">{renderAvatar(user, avatarSize)}</Box>
+      </Tooltip>
+    );
+  }
+
+  // 无Tooltip
+  return <Box display="inline-block">{renderAvatar(user, avatarSize)}</Box>;
+}
+
+export default TooltipAvatar;

package/src/UserCard/components.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box, Avatar } from '@mui/material';
+import { User } from './types';
+import { createNameOnlyAvatar } from './utils';
+
+// 渲染头像
+export const renderAvatar = (user: User, avatarSize: number = 48) => {
+  // 如果用户没有头像，则显示名称首字母头像
+  if (!user.avatar) {
+    const avatarContent = createNameOnlyAvatar(user);
+
+    return (
+      <Avatar
+        sx={{
+          width: avatarSize,
+          height: avatarSize,
+          fontSize: avatarSize * 0.4,
+          cursor: 'pointer',
+        }}>
+        {avatarContent}
+      </Avatar>
+    );
+  }
+
+  // 显示用户头像
+  return (
+    <Avatar
+      sx={{
+        width: avatarSize,
+        height: avatarSize,
+        cursor: 'pointer',
+      }}
+      src={user.avatar}
+      alt={user.fullName || ''}
+    />
+  );
+};
+
+// 渲染右上角内容
+export const renderTopRight = (
+  renderTopRightContent: (() => React.ReactNode) | undefined,
+  topRightMaxWidth: number
+) => {
+  if (renderTopRightContent) {
+    return <Box sx={{ maxWidth: topRightMaxWidth }}>{renderTopRightContent()}</Box>;
+  }
+
+  return null;
+};

package/src/UserCard/index.tsx

@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+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';
+
+// 创建仅显示名称首字母的头像
+export function createNameOnlyAvatar(user: User) {
+  if (!user) return null;
+
+  // 使用全名或邮箱前缀作为显示内容
+  let content = '';
+  if (user.fullName) {
+    // 提取名称首字母
+    content = user.fullName.charAt(0).toUpperCase();
+  } else if (user.email) {
+    // 使用邮箱前缀首字母
+    content = user.email.split('@')[0].charAt(0).toUpperCase();
+  } else {
+    // 如果都没有，使用DID的第一个字符
+    content = user.did ? user.did.charAt(0).toUpperCase() : '?';
+  }
+
+  return content;
+}
+
+// UserCard组件入口
+function UserCard(props: UserCardProps) {
+  const { user, cardType = CardType.Detailed, showHoverCard, onFollow, onUnfollow, followLoading = false } = props;
+
+  // 计算是否显示悬停卡片
+  // 默认规则：AvatarOnly模式下默认显示悬停卡片，Detailed模式下默认不显示
+  const shouldShowHoverCard = showHoverCard !== undefined ? showHoverCard : cardType === CardType.AvatarOnly;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 渲染卡片内容（用于Tooltip）
+  const renderCardContent = () => {
+    return (
+      <DialogContainer>
+        <DetailedCard {...props} shouldShowHoverCard={false} />
+      </DialogContainer>
+    );
+  };
+
+  // 根据卡片类型选择合适的组件
+  if (cardType === CardType.AvatarOnly) {
+    return (
+      <AvatarOnlyCard {...props} shouldShowHoverCard={shouldShowHoverCard} renderCardContent={renderCardContent} />
+    );
+  }
+
+  // 详细卡片模式
+  return (
+    <CardContainer containerRef={containerRef} cardType={cardType}>
+      <DetailedCard {...props} shouldShowHoverCard={shouldShowHoverCard} renderCardContent={renderCardContent} />
+    </CardContainer>
+  );
+}
+
+export default UserCard;