@arcblock/ux 2.12.64 → 2.12.71

package/lib/UserCard/Content/basic.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 Clock from './clock';
+
+/**
+ * 格式化链接显示
+ * 对于 http/https 协议只显示域名，其他协议显示完整链接
+ */
+function formatLinkDisplay(link) {
+  return withoutProtocol(link);
+}
+const iconSize = {
+  width: 16,
+  height: 16
+};
+function BasicContent({
+  user,
+  isFull = false
+}) {
+  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 ? /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(TimezoneIcon, {
+        ...iconSize
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "grey.800",
+        children: /*#__PURE__*/_jsx(Clock, {
+          value: metadata.timezone,
+          variant: "body2",
+          color: "grey.800"
+        })
+      })]
+    }) : null;
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    mt: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: 1.5,
+    children: [user.metadata?.bio && /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      color: "grey.800",
+      sx: {
+        lineHeight: 1.5,
+        display: '-webkit-box',
+        WebkitLineClamp: 1,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      },
+      children: user.metadata.bio
+    }), /*#__PURE__*/_jsxs(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(LinkDiv, {
+          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(Typography, {
+          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(Typography, {
+          variant: "body2",
+          color: "grey.800",
+          children: metadata.email || user.email
+        })]
+      })]
+    })]
+  });
+}
+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/lib/UserCard/Content/clock.d.ts

@@ -0,0 +1,4 @@
+export default function Clock({ value, ...props }: {
+    value: string;
+    [key: string]: any;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/UserCard/Content/clock.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
+}) {
+  const {
+    locale
+  } = useLocaleContext() || {
+    locale: 'en'
+  };
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const timeInfo = useClock(value, locale);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      ...props,
+      children: value
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      enterDelay: 200,
+      title: /*#__PURE__*/_jsxs("span", {
+        children: [t('localTime'), " ", timeInfo.fullDateTime]
+      }),
+      placement: "top",
+      arrow: true,
+      children: /*#__PURE__*/_jsxs(Typography, {
+        component: "span",
+        fontSize: 14,
+        children: ["(", locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : '', timeInfo.formattedTime, ")"]
+      })
+    })]
+  });
+}

package/lib/UserCard/Content/left-layout.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { User } from '../types';
+interface LeftColumnLayoutProps {
+    user: User;
+    avatarSize: number;
+    shouldShowHoverCard: boolean;
+    renderCardContent: () => React.ReactNode;
+    followButtonStyle: string;
+    isFollowed: boolean;
+    followLoading: boolean;
+}
+/**
+ * 统一左侧列布局组件，包含头像和关注按钮
+ */
+declare function LeftColumnLayout({ user, avatarSize, shouldShowHoverCard, renderCardContent, followButtonStyle, isFollowed, followLoading, }: LeftColumnLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default LeftColumnLayout;

package/lib/UserCard/Content/left-layout.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import TooltipAvatar from './tooltip-avatar';
+/**
+ * 统一左侧列布局组件，包含头像和关注按钮
+ */
+function LeftColumnLayout({
+  user,
+  avatarSize,
+  shouldShowHoverCard,
+  renderCardContent,
+  followButtonStyle,
+  isFollowed,
+  followLoading
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      mr: 2,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: /*#__PURE__*/_jsx(TooltipAvatar, {
+      user: user,
+      avatarSize: avatarSize,
+      shouldShowHoverCard: shouldShowHoverCard,
+      renderCardContent: renderCardContent
+    })
+  });
+}
+export default LeftColumnLayout;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { InfoType, User } from '../types';
+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;
+}
+declare function MinimalContent(props: MinimalContentProps): import("react/jsx-runtime").JSX.Element;
+export default MinimalContent;

package/lib/UserCard/Content/minimal.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+import DID from '../../DID';
+import { InfoType } from '../types';
+import TooltipAvatar from './tooltip-avatar';
+import { renderTopRight } from '../components';
+function MinimalContent(props) {
+  const {
+    user,
+    showDid,
+    didProps,
+    avatarSize,
+    shouldShowHoverCard,
+    renderCardContent,
+    renderTopRightContent,
+    topRightMaxWidth,
+    infoType = InfoType.NameOnly
+  } = props;
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    children: [/*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      gap: 2,
+      sx: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/_jsx(TooltipAvatar, {
+        user: user,
+        avatarSize: avatarSize,
+        shouldShowHoverCard: shouldShowHoverCard,
+        renderCardContent: renderCardContent
+      }), /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle1",
+          fontWeight: 500,
+          color: "text.primary",
+          fontSize: 18,
+          noWrap: true,
+          sx: {
+            lineHeight: 1.1
+          },
+          children: user.fullName || user.email || user.did
+        }), showDid && user.did && /*#__PURE__*/_jsx(DID, {
+          did: user.did,
+          size: 14,
+          sx: {
+            lineHeight: 1.5
+          },
+          ...didProps
+        })]
+      })]
+    }), renderTopRight(renderTopRightContent, topRightMaxWidth)]
+  });
+}
+export default MinimalContent;

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

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

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

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

package/lib/UserCard/components.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { User } from './types';
+export declare const renderAvatar: (user: User, avatarSize?: number) => 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

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

package/lib/UserCard/index.d.ts

@@ -0,0 +1,5 @@
+import type { User } from './types';
+import { UserCardProps } from './types';
+export declare function createNameOnlyAvatar(user: User): string | null;
+declare function UserCard(props: UserCardProps): import("react/jsx-runtime").JSX.Element;
+export default UserCard;

package/lib/UserCard/index.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import { 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) {
+  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) {
+  const {
+    user,
+    cardType = CardType.Detailed,
+    showHoverCard,
+    onFollow,
+    onUnfollow,
+    followLoading = false
+  } = props;
+
+  // 计算是否显示悬停卡片
+  // 默认规则：AvatarOnly模式下默认显示悬停卡片，Detailed模式下默认不显示
+  const shouldShowHoverCard = showHoverCard !== undefined ? showHoverCard : cardType === CardType.AvatarOnly;
+  const containerRef = useRef(null);
+
+  // 渲染卡片内容（用于Tooltip）
+  const renderCardContent = () => {
+    return /*#__PURE__*/_jsx(DialogContainer, {
+      children: /*#__PURE__*/_jsx(DetailedCard, {
+        ...props,
+        shouldShowHoverCard: false
+      })
+    });
+  };
+
+  // 根据卡片类型选择合适的组件
+  if (cardType === CardType.AvatarOnly) {
+    return /*#__PURE__*/_jsx(AvatarOnlyCard, {
+      ...props,
+      shouldShowHoverCard: shouldShowHoverCard,
+      renderCardContent: renderCardContent
+    });
+  }
+
+  // 详细卡片模式
+  return /*#__PURE__*/_jsx(CardContainer, {
+    containerRef: containerRef,
+    cardType: cardType,
+    children: /*#__PURE__*/_jsx(DetailedCard, {
+      ...props,
+      shouldShowHoverCard: shouldShowHoverCard,
+      renderCardContent: renderCardContent
+    })
+  });
+}
+export default UserCard;

package/lib/UserCard/types.d.ts

@@ -0,0 +1,107 @@
+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 declare enum DurationEnum {
+    NoClear = "no_clear",
+    ThirtyMinutes = "30_minutes",
+    OneHour = "1_hour",
+    FourHours = "4_hours",
+    Today = "today",
+    ThisWeek = "this_week",
+    Custom = "custom"
+}
+export declare 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;
+    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;
+    metadata?: UserMetadata;
+    address?: UserAddress;
+};
+export declare const AvatarSize: {
+    small: number;
+    medium: number;
+    large: number;
+    xlarge: number;
+};
+export declare enum CardType {
+    AvatarOnly = "AvatarOnly",// 仅头像
+    Detailed = "Detailed"
+}
+export declare enum InfoType {
+    NameOnly = "NameOnly",// 仅显示名称
+    Minimal = "Minimal",// 极简模式，显示头像、名称和DID
+    Basic = "Basic"
+}
+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;
+}
+export {};