@arcblock/ux 3.4.15 → 3.5.1

package/src/UserCard/components.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { Box, Avatar as MaterialAvatar } from '@mui/material';
-import Avatar from '../Avatar';
-import { User, UserCardProps } from './types';
-import { createNameOnlyAvatar } from './utils';
-
-// 渲染头像
-export const renderAvatar = (
-  user: User,
-  avatarSize: number = 48,
-  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);
-    // 从 avatarProps 中提取 MUI 的 Avatar 支持的基本 props
-    // className, style 等基本 React 属性
-    const { className, style, alt } = avatarProps || {};
-
-    return (
-      <MaterialAvatar
-        onClick={onClick}
-        className={className}
-        style={style}
-        alt={alt}
-        sx={{
-          width: avatarSize,
-          height: avatarSize,
-          fontSize: avatarSize * 0.4,
-          cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
-        }}
-        variant="circular">
-        {avatarContent}
-      </MaterialAvatar>
-    );
-  }
-
-  // 显示用户头像
-  return (
-    <Box
-      className="user-card__avatar"
-      sx={{
-        display: 'flex',
-      }}>
-      <Avatar
-        size={avatarSize}
-        did={user.did}
-        variant="circle"
-        useProxyFallback
-        style={{
-          cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
-        }}
-        onClick={onClick}
-        src={user.avatar}
-        alt={user.fullName || ''}
-        {...(avatarProps || {})}
-      />
-    </Box>
-  );
-};
-
-// 渲染右上角内容
-export const renderTopRight = (
-  renderTopRightContent: (() => React.ReactNode) | undefined,
-  topRightMaxWidth: number = 120
-) => {
-  if (renderTopRightContent) {
-    return (
-      <Box sx={{ maxWidth: topRightMaxWidth }} className="user-card__top-right-content">
-        {renderTopRightContent()}
-      </Box>
-    );
-  }
-
-  return null;
-};

package/src/UserCard/index.tsx

@@ -1,132 +0,0 @@
-import { useEffect, useMemo, useRef, useState } 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';
-import Avatar from '../Avatar';
-import SocialActions from './Cards/social-actions';
-import { getUserByDid, isUserDid } from './utils';
-
-// 创建仅显示名称首字母的头像
-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 { cardType = CardType.Detailed, showHoverCard } = props;
-
-  // 计算是否显示悬停卡片
-  // 默认规则：AvatarOnly模式下默认显示悬停卡片，Detailed模式下默认不显示
-  const shouldShowHoverCard = showHoverCard !== undefined ? showHoverCard : cardType === CardType.AvatarOnly;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [user, setUser] = useState<User | null>(() => props.user || 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 || { fullName: 'Anonymous', did: props.did as string, avatar: '' });
-        }
-      });
-    }
-    return () => {
-      isSubscribed = false;
-    };
-  }, [props.did, props.user]);
-
-  // 补全 avatar 的 imageFilter 信息，以提高性能
-  const userInfo = useMemo(() => {
-    if (!user) {
-      return null;
-    }
-
-    const { avatar = '', ...rest } = user;
-    if (avatar) {
-      const avatarParam = avatar.split('?')[1] || '';
-      return {
-        ...rest,
-        avatar: avatarParam ? avatar : `${avatar}?imageFilter=resize&w=48&h=48`,
-      };
-    }
-    return user;
-  }, [user]);
-
-  // 如果不存在，则使用 did 渲染头像
-  if (!userInfo) {
-    return <Avatar did={props.did} size={props.avatarSize} useProxyFallback {...props.avatarProps} />;
-  }
-
-  // user 存在，则使用 user 渲染头像
-  // 渲染卡片内容（用于Tooltip）
-  const renderCardContent = () => {
-    return (
-      <DialogContainer sx={props.popupSx}>
-        <DetailedCard
-          {...props}
-          shouldShowHoverCard={false}
-          user={userInfo!}
-          avatarProps={props.popupAvatarProps}
-          shortenLabelProps={props.popupShortenLabelProps || props.shortenLabelProps}
-          renderFields={props.popupRenderFields}
-          renderName={props.popupRenderName}
-          infoType={props.popupInfoType || props.infoType}
-          didProps={props.popupDidProps || props.didProps}
-          showDid={props.popupShowDid || props.showDid}
-          showSocialActions={
-            props.popupShowSocialActions === undefined ? props.showSocialActions : props.popupShowSocialActions
-          }
-        />
-      </DialogContainer>
-    );
-  };
-
-  // 根据卡片类型选择合适的组件
-  if (cardType === CardType.AvatarOnly) {
-    return (
-      <AvatarOnlyCard
-        {...props}
-        shouldShowHoverCard={shouldShowHoverCard}
-        renderCardContent={renderCardContent}
-        user={userInfo!}
-      />
-    );
-  }
-
-  // 详细卡片模式
-  return (
-    <CardContainer containerRef={containerRef} cardType={cardType} sx={props.sx}>
-      <DetailedCard
-        {...props}
-        shouldShowHoverCard={shouldShowHoverCard}
-        renderCardContent={renderCardContent}
-        user={userInfo!}
-      />
-    </CardContainer>
-  );
-}
-
-export default UserCard;
-
-export { SocialActions };

package/src/UserCard/types.ts

@@ -1,165 +0,0 @@
-import React from 'react';
-import { SxProps, Theme, TooltipProps } from '@mui/material';
-import { DIDProps } from '../DID';
-import { AvatarProps } from '../Avatar';
-import { ShortenLabelProps } from './Content/shorten-label';
-import type { Session } from '../type';
-
-type UserPublicInfo = {
-  avatar: string;
-  did: string;
-  fullName: string;
-};
-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 & {
-  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 {
-  Minimal = 'Minimal', // 极简模式，显示头像、名称和DID
-  Basic = 'Basic', // 基本信息模式
-}
-
-export type SocialActionProps = {
-  chat: boolean;
-  follow: boolean;
-};
-// 定义UserCard属性接口
-export interface UserCardProps {
-  session?: Session;
-  user?: User;
-  did?: string;
-  cardType?: CardType;
-  infoType?: InfoType;
-  popupInfoType?: InfoType;
-  avatarSize?: number;
-  showHoverCard?: boolean;
-  showDid?: boolean;
-  didProps?: Partial<DIDProps>;
-  popupDidProps?: Partial<DIDProps>;
-  popupShowDid?: boolean;
-
-  avatarProps?: Partial<AvatarProps>;
-  popupAvatarProps?: Partial<AvatarProps>;
-
-  // 弹出层相关属性
-  tooltipProps?: Partial<TooltipProps>;
-
-  // 样式相关属性
-  sx?: SxProps<Theme>;
-  popupSx?: SxProps<Theme>;
-
-  // fullName 相关属性
-  shortenLabelProps?: Partial<ShortenLabelProps>;
-  popupShortenLabelProps?: Partial<ShortenLabelProps>;
-
-  // 自定义渲染 name
-  // 如果设置了 renderName，shortenLabelProps 无效
-  renderName?: (user: User) => React.ReactNode;
-  popupRenderName?: (user: User) => React.ReactNode;
-
-  // 自定义渲染字段
-  renderFields?: string[];
-  popupRenderFields?: string[];
-
-  // 右上角内容相关属性
-  renderTopRightContent?: () => React.ReactNode;
-  topRightMaxWidth?: number;
-
-  // 社交按钮相关属性
-  showSocialActions?: SocialActionProps | boolean;
-  popupShowSocialActions?: SocialActionProps | boolean;
-
-  // 自定义内容渲染函数
-  renderCustomContent?: () => React.ReactNode;
-
-  // 头像点击事件
-  onAvatarClick?: (user: User, e?: React.MouseEvent<HTMLDivElement>) => void;
-  // 点击follow按钮回调
-  onFollowClick?: (user: User, e?: React.MouseEvent) => void;
-}

package/src/UserCard/use-follow.tsx

@@ -1,111 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import isNil from 'lodash/isNil';
-
-import type { AxiosError } from 'axios';
-import { getBlockletSDK } from '@blocklet/js-sdk';
-import type { BlockletSDK } from '@blocklet/js-sdk';
-import Toast from '../Toast';
-import { formatAxiosError } from '../Util';
-import type { User } from './types';
-
-/**
- * 登录用户与当前用户（userDid）的关注关系
- */
-export default function useFollow({
-  user,
-  t,
-  isMySelf,
-  visible,
-}: {
-  user: User;
-  t: (k: string) => string;
-  isMySelf: boolean;
-  visible: boolean;
-}) {
-  const [followed, setFollowed] = useState(false);
-
-  const userDid = useMemo(() => user?.did, [user]);
-
-  // 判断 user 对象中 isFollowing 值是否有效，有isFollowed字段并且值不为 undefined 或 null
-  // 如果为 true 则不需要通过 api 查询，直接使用 user.isFollowing 值
-  // 如果为 false 则需要通过 api 查询，并设置 user.isFollowing 值
-  const hasFollowedField = useMemo(() => {
-    return Object.prototype.hasOwnProperty.call(user, 'isFollowing') && !isNil((user as any).isFollowing);
-  }, [user]);
-
-  const client = useMemo(() => {
-    let _client: BlockletSDK | null = null;
-    try {
-      _client = getBlockletSDK();
-    } catch (error) {
-      console.error('Failed to initialize BlockletSDK:', error);
-      _client = null;
-    }
-    return _client;
-  }, []);
-
-  const isFollowingUser = useMemoizedFn(async () => {
-    if (!client) {
-      setFollowed(false);
-      return;
-    }
-    try {
-      if (isMySelf) {
-        setFollowed(true);
-        return;
-      }
-      const res = await client.user.isFollowingUser({ userDid });
-      setFollowed(res);
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  const followUser = useMemoizedFn(async (followUserDid: string = userDid) => {
-    if (!client || (isMySelf && followUserDid === userDid)) {
-      return;
-    }
-    try {
-      await client.user.followUser({ userDid: followUserDid });
-      Toast.success(t('follow_success'));
-      isFollowingUser();
-    } catch (error) {
-      console.error(error);
-      Toast.error(formatAxiosError(error as AxiosError));
-    }
-  });
-  const unfollowUser = useMemoizedFn(async (unfollowUserDid: string = userDid) => {
-    if (!client || (isMySelf && unfollowUserDid === userDid)) {
-      return;
-    }
-    try {
-      await client.user.unfollowUser({ userDid: unfollowUserDid });
-      Toast.success(t('unfollow_success'));
-      isFollowingUser();
-    } catch (error) {
-      console.error(error);
-      Toast.error(formatAxiosError(error as AxiosError));
-    }
-  });
-
-  useEffect(() => {
-    // 如果 user 对象中已经存在了 isFollowing 字段，则不进行查询
-    if (visible && userDid && !isMySelf && !!client && !hasFollowedField) {
-      isFollowingUser();
-    }
-  }, [isFollowingUser, userDid, isMySelf, client, hasFollowedField, visible]);
-
-  // 如果 user 对象中已经存在了 isFollowing 字段，则直接设置 followed 状态
-  useEffect(() => {
-    if (hasFollowedField) {
-      setFollowed((user as any)?.isFollowing || false);
-    }
-  }, [hasFollowedField, user]);
-
-  return {
-    followed,
-    followUser,
-    unfollowUser,
-  };
-}

package/src/UserCard/utils.ts

@@ -1,155 +0,0 @@
-import { toTypeInfo } from '@arcblock/did';
-import { types } from '@ocap/mcrypto';
-import { getBlockletSDK } from '@blocklet/js-sdk';
-import type { BlockletSDK } from '@blocklet/js-sdk';
-import { User } from './types';
-
-let client: BlockletSDK | null = null;
-
-// 用户信息缓存键前缀
-const USER_CACHE_PREFIX = 'ux_user_';
-// 用户缓存的有效期（毫秒），默认60分钟
-const USER_CACHE_EXPIRATION = 60 * 60 * 1000;
-
-// 从sessionStorage获取用户信息
-const getUserFromStorage = (did: string): User | null => {
-  if (typeof sessionStorage === 'undefined') return null;
-
-  try {
-    const cacheKey = `${USER_CACHE_PREFIX}${did}`;
-    const cachedData = sessionStorage.getItem(cacheKey);
-
-    if (!cachedData) return null;
-
-    const parsedData = JSON.parse(cachedData);
-    const timestamp = parsedData.timestamp || 0;
-    const now = Date.now();
-
-    // 检查缓存是否过期
-    if (now - timestamp > USER_CACHE_EXPIRATION) {
-      // 缓存已过期，删除并返回null
-      sessionStorage.removeItem(cacheKey);
-      return null;
-    }
-
-    // 返回用户数据
-    return parsedData.user;
-  } catch (error) {
-    console.error(`Failed to load user cache for did ${did}:`, error);
-    return null;
-  }
-};
-
-// 将用户信息保存到sessionStorage
-const saveUserToStorage = (did: string, user: User): void => {
-  if (typeof sessionStorage === 'undefined') return;
-
-  try {
-    const cacheKey = `${USER_CACHE_PREFIX}${did}`;
-    // 创建包含用户数据和时间戳的缓存对象
-    const cacheData = {
-      user,
-      timestamp: Date.now(),
-    };
-    sessionStorage.setItem(cacheKey, JSON.stringify(cacheData));
-  } catch (error) {
-    console.error(`Failed to save user cache for did ${did}:`, error);
-  }
-};
-
-// 创建仅显示名称首字母的头像
-// 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;
-}
-
-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 (!did) return null;
-
-  // 先检查sessionStorage中是否有缓存
-  const storedUser = getUserFromStorage(did);
-  if (storedUser) {
-    return storedUser;
-  }
-
-  if (!client) {
-    try {
-      client = getBlockletSDK();
-    } catch (error) {
-      console.error('Failed to initialize BlockletSDK:', error);
-      client = null;
-    }
-    if (!client) {
-      return null;
-    }
-  }
-  if (!client) return null;
-
-  try {
-    const user = await client.user.getUserPublicInfo({ did });
-    // 将获取到的用户信息存入缓存
-    if (user) {
-      const userData = user as User;
-      saveUserToStorage(did, userData);
-    }
-    return user as User;
-  } catch (error) {
-    console.error('Failed to get user by did:', error);
-    return null;
-  }
-}
-
-// 清除缓存中特定用户的信息
-export function clearUserCache(did?: string): void {
-  if (typeof sessionStorage === 'undefined') return;
-
-  if (did) {
-    // 清除指定用户缓存
-    try {
-      sessionStorage.removeItem(`${USER_CACHE_PREFIX}${did}`);
-    } catch (error) {
-      console.error(`Failed to remove cache for did ${did}:`, error);
-    }
-  } else {
-    // 清除所有用户缓存
-    try {
-      // 只清除以USER_CACHE_PREFIX开头的项
-      const keysToRemove: string[] = [];
-      for (let i = 0; i < sessionStorage.length; i++) {
-        const key = sessionStorage.key(i);
-        if (key && key.startsWith(USER_CACHE_PREFIX)) {
-          keysToRemove.push(key);
-        }
-      }
-      keysToRemove.forEach((key) => sessionStorage.removeItem(key));
-    } catch (error) {
-      console.error('Failed to clear all user caches:', error);
-    }
-  }
-}

package/src/Util/WebWalletOpener.stories.jsx

@@ -1,5 +0,0 @@
-export { default as WebWalletOpener } from './demo/web-wallet-opener';
-
-export default {
-  title: 'ArcBlock/WebWalletOpener',
-};

package/src/Util/client.ts

@@ -1,4 +0,0 @@
-export enum OrgQueryType {
-  OWNED = 'owned',
-  JOINED = 'joined',
-}