@arcblock/ux 2.13.18 → 2.13.19

package/lib/UserCard/Content/minimal.js

@@ -29,7 +29,7 @@ function MinimalContent(props) {
       display: "flex",
       justifyContent: "flex-start",
       alignItems: "center",
-      gap: 2,
+      gap: 1,
       flex: 1,
       minWidth: 0,
       children: [/*#__PURE__*/_jsx(TooltipAvatar, {

package/lib/UserCard/components.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
+import MaterialAvatar from '@mui/material/Avatar';
 import Avatar from '../Avatar';
 import { createNameOnlyAvatar } from './utils';
 
@@ -12,16 +13,25 @@ export const renderAvatar = (user, avatarSize = 48, avatarProps = undefined, onA
   // 如果用户没有头像，则显示名称首字母头像
   if (!user.avatar) {
     const avatarContent = createNameOnlyAvatar(user);
-    return /*#__PURE__*/_jsx(Avatar, {
-      size: avatarSize,
-      did: user.did,
-      variant: "circle",
+    // 从 avatarProps 中提取 MUI 的 Avatar 支持的基本 props
+    // className, style 等基本 React 属性
+    const {
+      className,
+      style,
+      alt
+    } = avatarProps || {};
+    return /*#__PURE__*/_jsx(MaterialAvatar, {
       onClick: onClick,
+      className: className,
+      style: style,
+      alt: alt,
       sx: {
+        width: avatarSize,
+        height: avatarSize,
         fontSize: avatarSize * 0.4,
         cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default'
       },
-      ...(avatarProps || {}),
+      variant: "circular",
       children: avatarContent
     });
   }

package/lib/UserCard/index.js

@@ -46,7 +46,11 @@ function UserCard(props) {
     } else if (props.did && isUserDid(props.did) && !props.user) {
       getUserByDid(props.did).then(_user => {
         if (isSubscribed) {
-          setUser(_user);
+          setUser(_user || {
+            fullName: 'Anonymous',
+            did: props.did,
+            avatar: ''
+          });
         }
       });
     }
@@ -76,7 +80,8 @@ function UserCard(props) {
         avatarProps: props.popupAvatarProps,
         shortenLabelProps: props.popupShortenLabelProps,
         renderFields: props.popupRenderFields,
-        renderName: props.popupRenderName
+        renderName: props.popupRenderName,
+        infoType: props.popupInfoType || props.infoType
       })
     });
   };

package/lib/UserCard/types.d.ts

@@ -7,7 +7,6 @@ type UserPublicInfo = {
     avatar: string;
     did: string;
     fullName: string;
-    sourceAppPid: string | null;
 };
 export type UserMetadataLink = {
     url: string;
@@ -95,6 +94,7 @@ export interface UserCardProps {
     did?: string;
     cardType?: CardType;
     infoType?: InfoType;
+    popupInfoType?: InfoType;
     avatarSize?: number;
     showHoverCard?: boolean;
     showDid?: boolean;

package/lib/UserCard/utils.d.ts

@@ -2,3 +2,4 @@ import { User } from './types';
 export declare function createNameOnlyAvatar(user: User): string | null;
 export declare function isUserDid(did: string): boolean;
 export declare function getUserByDid(did: string): Promise<User | null>;
+export declare function clearUserCache(did?: string): void;

package/lib/UserCard/utils.js

@@ -9,6 +9,53 @@ try {
   client = null;
 }
 
+// 用户信息缓存键前缀
+const USER_CACHE_PREFIX = 'ux_user_';
+// 用户缓存的有效期（毫秒），默认60分钟
+const USER_CACHE_EXPIRATION = 60 * 60 * 1000;
+
+// 从sessionStorage获取用户信息
+const getUserFromStorage = did => {
+  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, user) => {
+  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) {
@@ -39,14 +86,54 @@ export function isUserDid(did) {
   }
 }
 export async function getUserByDid(did) {
+  if (!did) return null;
+
+  // 先检查sessionStorage中是否有缓存
+  const storedUser = getUserFromStorage(did);
+  if (storedUser) {
+    return storedUser;
+  }
   if (!client) return null;
   try {
     const user = await client.user.getUserPublicInfo({
       did
     });
+    // 将获取到的用户信息存入缓存
+    if (user) {
+      const userData = user;
+      saveUserToStorage(did, userData);
+    }
     return user;
   } catch (error) {
     console.error('Failed to get user by did:', error);
     return null;
   }
+}
+
+// 清除缓存中特定用户的信息
+export function clearUserCache(did) {
+  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 = [];
+      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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.18",
+  "version": "2.13.19",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "7bb88b45cd68de7eb079b590d0d73fd41d303917",
+  "gitHead": "64c12fb7646d2323f1be0bef7a3901261687b165",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.18",
-    "@arcblock/nft-display": "^2.13.18",
-    "@arcblock/react-hooks": "^2.13.18",
+    "@arcblock/icons": "^2.13.19",
+    "@arcblock/nft-display": "^2.13.19",
+    "@arcblock/react-hooks": "^2.13.19",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.18",
+    "@blocklet/theme": "^2.13.19",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/UserCard/Content/minimal.tsx

@@ -33,7 +33,7 @@ function MinimalContent(props: MinimalContentProps) {
 
   return (
     <Box display="flex" justifyContent="space-between" alignItems="center" className="user-card__avatar-content">
-      <Box display="flex" justifyContent="flex-start" alignItems="center" gap={2} flex={1} minWidth={0}>
+      <Box display="flex" justifyContent="flex-start" alignItems="center" gap={1} flex={1} minWidth={0}>
         <TooltipAvatar
           user={user}
           avatarSize={avatarSize}

package/src/UserCard/components.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
+import MaterialAvatar from '@mui/material/Avatar';
 import Avatar from '../Avatar';
 import { User, UserCardProps } from './types';
 import { createNameOnlyAvatar } from './utils';
@@ -18,19 +19,25 @@ export const renderAvatar = (
   // 如果用户没有头像，则显示名称首字母头像
   if (!user.avatar) {
     const avatarContent = createNameOnlyAvatar(user);
+    // 从 avatarProps 中提取 MUI 的 Avatar 支持的基本 props
+    // className, style 等基本 React 属性
+    const { className, style, alt } = avatarProps || {};
+
     return (
-      <Avatar
-        size={avatarSize}
-        did={user.did}
-        variant="circle"
+      <MaterialAvatar
         onClick={onClick}
+        className={className}
+        style={style}
+        alt={alt}
         sx={{
+          width: avatarSize,
+          height: avatarSize,
           fontSize: avatarSize * 0.4,
           cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
         }}
-        {...(avatarProps || {})}>
+        variant="circular">
         {avatarContent}
-      </Avatar>
+      </MaterialAvatar>
     );
   }
 

package/src/UserCard/index.tsx

@@ -47,7 +47,7 @@ function UserCard(props: UserCardProps) {
     } else if (props.did && isUserDid(props.did) && !props.user) {
       getUserByDid(props.did).then((_user) => {
         if (isSubscribed) {
-          setUser(_user);
+          setUser(_user || { fullName: 'Anonymous', did: props.did as string, avatar: '' });
         }
       });
     }
@@ -74,6 +74,7 @@ function UserCard(props: UserCardProps) {
           shortenLabelProps={props.popupShortenLabelProps}
           renderFields={props.popupRenderFields}
           renderName={props.popupRenderName}
+          infoType={props.popupInfoType || props.infoType}
         />
       </DialogContainer>
     );

package/src/UserCard/types.ts

@@ -8,7 +8,6 @@ type UserPublicInfo = {
   avatar: string;
   did: string;
   fullName: string;
-  sourceAppPid: string | null;
 };
 export type UserMetadataLink = {
   url: string;
@@ -112,6 +111,7 @@ export interface UserCardProps {
   did?: string;
   cardType?: CardType;
   infoType?: InfoType;
+  popupInfoType?: InfoType;
   avatarSize?: number;
   showHoverCard?: boolean;
   showDid?: boolean;

package/src/UserCard/utils.ts

@@ -11,6 +11,57 @@ try {
   client = 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) {
@@ -44,12 +95,55 @@ export function isUserDid(did: string) {
 }
 
 export async function getUserByDid(did: string): Promise<User | null> {
+  if (!did) return null;
+
+  // 先检查sessionStorage中是否有缓存
+  const storedUser = getUserFromStorage(did);
+  if (storedUser) {
+    return storedUser;
+  }
+
   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);
+    }
+  }
+}