@arcblock/ux 2.12.64 → 2.12.70

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;

package/src/UserCard/types.ts

@@ -0,0 +1,129 @@
+import React from 'react';
+import { DIDProps } from '../DID';
+
+type UserPublicInfo = {
+  avatar: string;
+  did: string;
+  fullName: string;
+  sourceAppPid: string | null;
+};
+export type UserMetadataLink = {
+  url: string;
+  favicon?: string;
+};
+
+export enum DurationEnum {
+  NoClear = 'no_clear',
+  ThirtyMinutes = '30_minutes',
+  OneHour = '1_hour',
+  FourHours = '4_hours',
+  Today = 'today',
+  ThisWeek = 'this_week',
+  Custom = 'custom',
+}
+
+export enum StatusEnum {
+  Meeting = 'meeting',
+  Community = 'community',
+  Holiday = 'holiday',
+  OffSick = 'off_sick',
+  WorkingRemotely = 'working_remotely',
+}
+export type UserPhoneProps = {
+  country: string;
+  phoneNumber?: string;
+};
+
+export type UserMetadata = {
+  bio?: string;
+  location?: string;
+  timezone?: string;
+  joinedAt?: string;
+  status?: {
+    value: string;
+    duration?: DurationEnum;
+    dateRange?: Date[];
+  };
+  links?: UserMetadataLink[];
+  cover?: string;
+  // 这两个字段是 User, 方便数据更新，在保存时同步
+  email?: string;
+  phone?: UserPhoneProps;
+};
+
+export type UserAddress = {
+  country?: string;
+  province?: string;
+  city?: string;
+  line1?: string;
+  line2?: string;
+  postalCode?: string;
+};
+
+export type User = UserPublicInfo & {
+  role: string;
+  email?: string;
+  phone?: string;
+  sourceProvider?: string;
+  sourceAppPid?: string;
+  lastLoginAt?: string;
+  lastLoginIp?: string;
+  createdAt?: string;
+  passports?: any[];
+  didSpace?: Record<string, any>;
+  connectedAccounts?: any[];
+  locale?: string;
+  url: string;
+  inviter?: string;
+  emailVerified?: boolean;
+  phoneVerified?: boolean;
+  // 1.16.40 新增
+  metadata?: UserMetadata;
+  // 1.16.41 新增
+  address?: UserAddress;
+};
+
+// 头像大小
+export const AvatarSize = {
+  small: 32,
+  medium: 40,
+  large: 48,
+  xlarge: 64,
+};
+
+// 卡片类型
+export enum CardType {
+  AvatarOnly = 'AvatarOnly', // 仅头像
+  Detailed = 'Detailed', // 详细卡片
+}
+
+// 信息类型
+export enum InfoType {
+  NameOnly = 'NameOnly', // 仅显示名称
+  Minimal = 'Minimal', // 极简模式，显示头像、名称和DID
+  Basic = 'Basic', // 基本信息模式
+}
+
+// 定义UserCard属性接口
+export interface UserCardProps {
+  user: User;
+  cardType?: CardType;
+  infoType?: InfoType;
+  avatarSize?: number;
+  showHoverCard?: boolean;
+  showDid?: boolean;
+  didProps?: DIDProps;
+
+  // 关注功能相关属性
+  isFollowed?: boolean;
+  onFollow?: (user: User) => void;
+  onUnfollow?: (user: User) => void;
+  followLoading?: boolean;
+
+  // 右上角内容相关属性
+  renderTopRightContent?: () => React.ReactNode;
+  topRightMaxWidth?: number;
+
+  // 自定义内容渲染函数
+  renderCustomContent?: () => React.ReactNode;
+}

package/src/UserCard/utils.ts

@@ -0,0 +1,22 @@
+import { User } from './types';
+
+// 创建仅显示名称首字母的头像
+// eslint-disable-next-line import/prefer-default-export
+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;
+}