@arcblock/ux 2.13.17 → 2.13.19

package/lib/Config/config-provider.d.ts

@@ -3,14 +3,16 @@ import { type PaletteMode } from '@mui/material';
 import { LocaleProviderProps } from '../Locale/context';
 import { ThemeProviderProps } from '../Theme/theme-provider';
 import { type UserThemeOptions, type ThemeConfig } from '../Theme';
+type Prefer = 'light' | 'dark' | 'system';
 export interface ConfigContextType {
     mode: PaletteMode;
+    prefer?: Prefer;
     themeOptions: UserThemeOptions;
     toggleMode: () => void;
 }
 export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, Omit<ThemeProviderProps, 'theme'> {
     children: ReactNode;
-    prefer?: PaletteMode;
+    prefer?: Prefer;
     theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
     disableBlockletTheme?: boolean;
     translations?: Record<string, any>;
@@ -24,6 +26,7 @@ export declare namespace ConfigProvider {
 }
 export declare function useConfig(): {
     mode: PaletteMode;
+    prefer?: Prefer;
     themeOptions: UserThemeOptions;
     toggleMode: () => void;
     locale: import("../type").Locale;
@@ -35,3 +38,4 @@ export declare function useConfig(): {
     }[];
     theme: import("@mui/material").Theme;
 };
+export {};

package/lib/Config/config-provider.js

@@ -6,6 +6,20 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, useLocaleContext } from '../Locale/context';
 import ThemeProvider from '../Theme/theme-provider';
 import { createTheme, getDefaultThemePrefer, lazyThemeConfig, useTheme } from '../Theme';
+const resolveMode = prefer => {
+  if (prefer) {
+    if (prefer === 'system') {
+      // 取系统默认
+      return getDefaultThemePrefer({
+        theme: {
+          prefer: 'system'
+        }
+      });
+    }
+    return prefer;
+  }
+  return getDefaultThemePrefer();
+};
 const ConfigContext = /*#__PURE__*/createContext({});
 /**
  * 集中化配置
@@ -24,12 +38,7 @@ export function ConfigProvider({
   languages,
   onLoadingTranslation
 }) {
-  const [mode, setMode] = useState(() => {
-    if (prefer) {
-      return prefer;
-    }
-    return getDefaultThemePrefer();
-  });
+  const [mode, setMode] = useState(() => resolveMode(prefer));
   const _themeOptions = useMemo(() => {
     let result = {};
     const getThemeConfig = lazyThemeConfig(mode);
@@ -60,13 +69,14 @@ export function ConfigProvider({
   const config = useMemo(() => ({
     mode,
     themeOptions: _themeOptions,
-    toggleMode
-  }), [mode, _themeOptions, toggleMode]);
+    toggleMode,
+    prefer
+  }), [mode, prefer, _themeOptions, toggleMode]);
 
   // change prefer manually
   useEffect(() => {
     if (prefer) {
-      setMode(prefer);
+      setMode(resolveMode(prefer));
     }
   }, [prefer, setMode]);
   return /*#__PURE__*/_jsx(ConfigContext.Provider, {

package/lib/Config/theme-mode-toggle.js

@@ -6,7 +6,8 @@ import { useConfig } from './config-provider';
 export default function ThemeModeToggle() {
   const {
     mode,
-    toggleMode
+    toggleMode,
+    prefer
   } = useConfig();
   if (!toggleMode) {
     if (process.env.NODE_ENV !== 'production') {
@@ -14,8 +15,13 @@ export default function ThemeModeToggle() {
     }
     return null;
   }
-  return /*#__PURE__*/_jsx(IconButton, {
-    onClick: toggleMode,
-    children: mode === 'light' ? /*#__PURE__*/_jsx(Brightness2OutlinedIcon, {}) : /*#__PURE__*/_jsx(LightModeOutlinedIcon, {})
-  });
+
+  // 跟随系统才显示切换
+  if (prefer === 'system' || window.blocklet?.theme?.prefer === 'system') {
+    return /*#__PURE__*/_jsx(IconButton, {
+      onClick: toggleMode,
+      children: mode === 'light' ? /*#__PURE__*/_jsx(Brightness2OutlinedIcon, {}) : /*#__PURE__*/_jsx(LightModeOutlinedIcon, {})
+    });
+  }
+  return null;
 }

package/lib/Theme/theme.d.ts

@@ -11,7 +11,11 @@ export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
-export declare function getDefaultThemePrefer(): PaletteMode;
+export declare function getDefaultThemePrefer(meta?: {
+    theme: {
+        prefer: 'light' | 'dark' | 'system';
+    };
+}): PaletteMode;
 export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
 export interface UserThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;

package/lib/Theme/theme.js

@@ -63,8 +63,8 @@ export function loadFonts(fonts) {
 }
 
 // 获取默认主题偏好
-export function getDefaultThemePrefer() {
-  const prefer = window.blocklet?.theme?.prefer;
+export function getDefaultThemePrefer(meta) {
+  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
   if (prefer === 'system') {
     // 本地缓存
     const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);

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/lib/type.d.ts

@@ -1,4 +1,4 @@
-import type { Theme, PaletteMode } from '@mui/material';
+import type { Theme } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 export type $TSFixMe = any;
@@ -26,7 +26,7 @@ export type Blocklet = {
   mode: string;
   tenantMode: 'single' | 'multiple';
   theme: {
-    prefer?: PaletteMode | 'system';
+    prefer?: 'light' | 'dark' | 'system';
     light: Theme;
     dark: Theme;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.17",
+  "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": "cd775f10e9f90ed9813c8fd401fdae7c327c9c44",
+  "gitHead": "64c12fb7646d2323f1be0bef7a3901261687b165",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.17",
-    "@arcblock/nft-display": "^2.13.17",
-    "@arcblock/react-hooks": "^2.13.17",
+    "@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.17",
+    "@blocklet/theme": "^2.13.19",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/Config/config-provider.tsx

@@ -14,19 +14,34 @@ import {
   type ThemeConfig,
 } from '../Theme';
 
+type Prefer = 'light' | 'dark' | 'system';
+
 export interface ConfigContextType {
   mode: PaletteMode;
+  prefer?: Prefer;
   themeOptions: UserThemeOptions;
   toggleMode: () => void;
 }
 
+const resolveMode = (prefer?: Prefer): PaletteMode => {
+  if (prefer) {
+    if (prefer === 'system') {
+      // 取系统默认
+      return getDefaultThemePrefer({ theme: { prefer: 'system' } });
+    }
+    return prefer;
+  }
+
+  return getDefaultThemePrefer();
+};
+
 const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);
 
 export interface ConfigProviderProps
   extends Omit<LocaleProviderProps, 'translations'>,
     Omit<ThemeProviderProps, 'theme'> {
   children: ReactNode;
-  prefer?: PaletteMode;
+  prefer?: Prefer;
   theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
   disableBlockletTheme?: boolean;
   translations?: Record<string, any>;
@@ -49,13 +64,7 @@ export function ConfigProvider({
   languages,
   onLoadingTranslation,
 }: ConfigProviderProps) {
-  const [mode, setMode] = useState<PaletteMode>(() => {
-    if (prefer) {
-      return prefer;
-    }
-
-    return getDefaultThemePrefer();
-  });
+  const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
 
   const _themeOptions = useMemo(() => {
     let result: ThemeOptions = {};
@@ -90,14 +99,15 @@ export function ConfigProvider({
       mode,
       themeOptions: _themeOptions,
       toggleMode,
+      prefer,
     }),
-    [mode, _themeOptions, toggleMode]
+    [mode, prefer, _themeOptions, toggleMode]
   );
 
   // change prefer manually
   useEffect(() => {
     if (prefer) {
-      setMode(prefer);
+      setMode(resolveMode(prefer));
     }
   }, [prefer, setMode]);
 

package/src/Config/theme-mode-toggle.tsx

@@ -4,7 +4,7 @@ import Brightness2OutlinedIcon from '@mui/icons-material/Brightness2Outlined';
 import { useConfig } from './config-provider';
 
 export default function ThemeModeToggle() {
-  const { mode, toggleMode } = useConfig();
+  const { mode, toggleMode, prefer } = useConfig();
 
   if (!toggleMode) {
     if (process.env.NODE_ENV !== 'production') {
@@ -14,9 +14,14 @@ export default function ThemeModeToggle() {
     return null;
   }
 
-  return (
-    <IconButton onClick={toggleMode}>
-      {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
-    </IconButton>
-  );
+  // 跟随系统才显示切换
+  if (prefer === 'system' || window.blocklet?.theme?.prefer === 'system') {
+    return (
+      <IconButton onClick={toggleMode}>
+        {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
+      </IconButton>
+    );
+  }
+
+  return null;
 }

package/src/Theme/theme.ts

@@ -6,7 +6,6 @@ import { deepmerge } from '@mui/utils';
 import pick from 'lodash/pick';
 import webfontloader from 'webfontloader';
 import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
-
 import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -73,8 +72,8 @@ export function loadFonts(fonts: string[]) {
 }
 
 // 获取默认主题偏好
-export function getDefaultThemePrefer(): PaletteMode {
-  const prefer = window.blocklet?.theme?.prefer;
+export function getDefaultThemePrefer(meta?: { theme: { prefer: 'light' | 'dark' | 'system' } }): PaletteMode {
+  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
 
   if (prefer === 'system') {
     // 本地缓存

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);
+    }
+  }
+}

package/src/type.d.ts

@@ -1,4 +1,4 @@
-import type { Theme, PaletteMode } from '@mui/material';
+import type { Theme } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 export type $TSFixMe = any;
@@ -26,7 +26,7 @@ export type Blocklet = {
   mode: string;
   tenantMode: 'single' | 'multiple';
   theme: {
-    prefer?: PaletteMode | 'system';
+    prefer?: 'light' | 'dark' | 'system';
     light: Theme;
     dark: Theme;
   };