@arcblock/ux 2.12.64 → 2.12.70

package/lib/Config/config-provider.js

@@ -32,10 +32,19 @@ export function ConfigProvider({
     if (prefer) {
       return prefer;
     }
+
+    // 未启用暗色主题
+    if (!window.blocklet?.USE_DARK_THEME) {
+      return 'light';
+    }
+
+    // 本地缓存
     const localPrefer = localStorage.getItem(preferThemeModeKey);
     if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
       return localPrefer;
     }
+
+    // 系统偏好
     return prefersDarkMode ? 'dark' : 'light';
   });
   const _themeOptions = useMemo(() => {

package/lib/Config/index.d.ts

@@ -0,0 +1 @@
+export * from './config-provider';

package/lib/Config/index.js

@@ -0,0 +1 @@
+export * from './config-provider';

package/lib/Header/header.js

@@ -100,8 +100,12 @@ function Header({
 const Root = styled(Box)`
   position: relative;
   font-size: 14px;
-  z-index: ${props => props.theme.zIndex.appBar};
-  background: ${props => props.theme.palette.common.white};
+  z-index: ${({
+  theme
+}) => theme.zIndex.appBar};
+  background: ${({
+  theme
+}) => theme.palette.background.default};
   .header-container {
     display: flex;
     align-items: center;

package/lib/Locale/selector.js

@@ -6,8 +6,6 @@ import { Icon as IconifyIcon } from '@iconify/react';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import LanguageIcon from 'iconify-icons-material-symbols-400/language';
 import noop from 'lodash/noop';
-import { getColor, getBackground } from '../Util';
-import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
 import { mergeSx } from '../Util/style';
@@ -68,9 +66,7 @@ export default function LocaleSelector(props) {
       }
     });
   }, [Icon, size]);
-  return /*#__PURE__*/_jsxs(Div, {
-    dark: dark,
-    theme: theme,
+  return /*#__PURE__*/_jsxs(Wrapper, {
     ...rest,
     ...handleEventProps,
     children: [/*#__PURE__*/_jsx(ButtonComponent, {
@@ -102,11 +98,8 @@ export default function LocaleSelector(props) {
       children: /*#__PURE__*/_jsx(Box, {
         className: "locales",
         sx: {
-          background: getBackground({
-            ...popperProps,
-            theme
-          }),
-          boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+          backgroundColor: 'background.default',
+          boxShadow: 2,
           borderRadius: 2
         },
         children: /*#__PURE__*/_jsx(ClickAwayListener, {
@@ -126,10 +119,7 @@ export default function LocaleSelector(props) {
                   lineHeight: 'normal',
                   letterSpacing: '2px',
                   textAlign: 'center',
-                  color: getColor({
-                    ...popperProps,
-                    theme
-                  }),
+                  color: 'text.primary',
                   cursor: 'pointer',
                   display: 'flex',
                   padding: '16px',
@@ -152,9 +142,7 @@ export default function LocaleSelector(props) {
     })]
   });
 }
-const Div = styled('div', {
-  shouldForwardProp: prop => prop !== 'dark'
-})`
+const Wrapper = styled(Box)`
   display: inline-block;
 
   .trigger {
@@ -167,7 +155,9 @@ const Div = styled('div', {
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;
-      color: ${props => getColor(props)};
+      color: ${({
+  theme
+}) => theme.palette.text.primary};
     }
   }
 `;

package/lib/NavMenu/style.js

@@ -125,20 +125,20 @@ export const NavMenuItem = styled('li', {
       marginRight: '16px',
       border: '1px solid #eff1f5',
       borderRadius: '4px',
-      color: '#9497a0'
+      color: theme.palette.grey[500]
     },
     '.navmenu-item__label': {
       fontSize: '14px',
       lineHeight: 1,
-      color: '#26292e'
+      color: theme.palette.text.primary
     },
     '.navmenu-item__desc': {
       fontSize: '12px',
       lineHeight: 1,
-      color: '#9497a0'
+      color: theme.palette.grey[500]
     },
     '&:hover': {
-      background: '#f9f9fb',
+      background: theme.palette.action.hover,
       transition: theme.transitions.create('background', {
         duration: theme.transitions.duration.standard
       }),
@@ -146,14 +146,14 @@ export const NavMenuItem = styled('li', {
         opacity: 1
       },
       '.navmenu-item__desc': {
-        color: '#26292e',
+        color: theme.palette.text.primary,
         transition: theme.transitions.create('color', {
           duration: theme.transitions.duration.standard
         })
       }
     },
     '&.navmenu-item--active': {
-      background: '#f9f9fb'
+      background: theme.palette.action.hover
     }
   },
   // inline 布局中
@@ -236,11 +236,13 @@ export const NavMenuSub = styled(NavMenuItem)(({
 }));
 
 // 下拉子菜单 .navmenu-sub__list
-export const NavMenuSubList = styled('ul')(() => ({
+export const NavMenuSubList = styled('ul')(({
+  theme
+}) => ({
   margin: 0,
   padding: '16px',
   borderRadius: '4px',
-  background: '#fff',
+  background: theme.palette.background.default,
   '& .navmenu-item + .navmenu-item': {
     marginTop: '8px'
   }

package/lib/NavMenu/sub-item-group.js

@@ -4,12 +4,16 @@ import { styled } from '../Theme';
 const Group = styled(Box)`
   padding: 16px 24px;
   border-radius: 8px;
-  background-color: white;
+  background-color: ${({
+  theme
+}) => theme.palette.background.default};
   cursor: auto;
 
   .group-label {
     margin-bottom: 8px;
-    color: #71717b;
+    color: ${({
+  theme
+}) => theme.palette.grey[600]};
     font-size: 12px;
   }
 

package/lib/SessionBlocklet/index.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { Box, ClickAwayListener, Fade, IconButton, List, ListItem, ListItemButton, Paper, Popper, Typography } from '@mui/material';
+import { Box, ClickAwayListener, Fade, IconButton, List, ListItem, ListItemButton, Paper, Popper, Typography, useTheme } from '@mui/material';
 import { Icon } from '@iconify/react';
 import DashboardOutlineRoundedIcon from 'iconify-icons-material-symbols-400/dashboard-outline-rounded';
 import WidgetsOutlineRoundedIcon from '@iconify-icons/material-symbols/widgets-outline-rounded';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import Button from '../Button';
-import { temp as colors } from '../Colors';
 import { BLOCKLET_SERVICE_PATH_PREFIX, NAVIGATION_URL } from '../Util/constant';
 import SessionPermission from '../SessionPermission';
 import { getTranslation } from '../Util';
@@ -33,6 +32,7 @@ export default function SessionBlocklet({
       component
     };
   });
+  const theme = useTheme();
   const popperAnchorRef = useRef(null);
   const currentState = useReactive({
     open: false
@@ -93,10 +93,9 @@ export default function SessionBlocklet({
               borderRadius: 3,
               width: 350,
               maxWidth: '90vw',
-              borderColor: colors.lineStep,
               p: 2,
               border: '0 !important',
-              boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
+              boxShadow: 2
             },
             children: [/*#__PURE__*/_jsx(List, {
               sx: {
@@ -122,7 +121,7 @@ export default function SessionBlocklet({
                     height: '100%',
                     borderRadius: 2,
                     '&:hover': {
-                      backgroundColor: colors.surfacePrimarySubtitle
+                      backgroundColor: 'action.hover'
                     }
                   },
                   children: [item?.component?.did ? /*#__PURE__*/_jsx(Box, {
@@ -138,11 +137,11 @@ export default function SessionBlocklet({
                   }) : /*#__PURE__*/_jsx(Icon, {
                     fontSize: 50,
                     icon: item.icon || WidgetsOutlineRoundedIcon,
-                    color: colors.textSubtitle
+                    color: theme.palette.text.secondary
                   }), /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       fontSize: '12px',
-                      color: colors.textBase,
+                      color: 'text.primary',
                       textAlign: 'center',
                       lineHeight: 'normal'
                     },
@@ -157,14 +156,7 @@ export default function SessionBlocklet({
                 fullWidth: true,
                 href: NAVIGATION_URL,
                 sx: {
-                  mt: 1,
-                  borderRadius: 2,
-                  color: colors.textBase,
-                  borderColor: colors.lineBorderStrong,
-                  '&:hover': {
-                    color: colors.primaryBase,
-                    borderColor: colors.primaryBase
-                  }
+                  mt: 1
                 },
                 children: locale === 'zh' ? '管理' : 'Manage'
               })

package/lib/SessionUser/components/logged-in.js

@@ -13,7 +13,6 @@ import Toast from '../../Toast';
 import DidAvatar from '../../Avatar';
 import { getUserAvatar } from '../../Util';
 import UserInfo from './user-info';
-import { temp as colors } from '../../Colors';
 import { DASHBOARD_URL, PROFILE_URL } from '../../Util/constant';
 import SessionPermission from '../../SessionPermission';
 import { translations } from '../libs/translation';
@@ -158,9 +157,8 @@ export default function LoggedIn({
               borderRadius: 3,
               width: 350,
               maxWidth: '90vw',
-              borderColor: colors.lineStep,
               border: '0 !important',
-              boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
+              boxShadow: 2
             },
             children: [/*#__PURE__*/_jsx(UserInfo, {
               locale: locale,
@@ -172,8 +170,7 @@ export default function LoggedIn({
               onBindWallet: handleBindWallet
             }), /*#__PURE__*/_jsx(Divider, {
               sx: {
-                m: '0!important',
-                borderColor: colors.strokeSep
+                m: '0 !important'
               }
             }), /*#__PURE__*/_jsxs(MenuList, {
               sx: {
@@ -214,8 +211,7 @@ export default function LoggedIn({
                   }
                 }), /*#__PURE__*/_jsx(Divider, {
                   sx: {
-                    m: '0!important',
-                    borderColor: colors.strokeSep
+                    m: '0 !important'
                   }
                 }), /*#__PURE__*/_jsx(DidSpace, {
                   session: session,
@@ -257,7 +253,7 @@ function SessionMenuItem({
         alignItems: 'center',
         borderRadius: 2,
         '&:hover': {
-          backgroundColor: `${colors.surfacePrimarySubtitle} !important`
+          backgroundColor: 'action.hover'
         },
         py: 1
       },

package/lib/Theme/theme.d.ts

@@ -1,4 +1,5 @@
 import { Components, type ThemeOptions } from '@mui/material/styles';
+import { deepmerge } from '@mui/utils';
 import type { Typography } from '@mui/material/styles/createTypography';
 import '@fontsource/roboto/400';
 import '@fontsource/roboto/500';
@@ -43,3 +44,4 @@ export declare function loadFonts(fonts: string[]): Promise<boolean>;
 export declare function createDefaultThemeOptions(mode?: ThemeMode): ThemeOptions;
 export declare const create: ({ mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions) => import("@mui/material/styles").Theme;
 export declare const createTheme: ({ mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions) => import("@mui/material/styles").Theme;
+export { deepmerge };

package/lib/Theme/theme.js

@@ -229,4 +229,5 @@ export const create = ({
   });
   return enhanced;
 };
-export const createTheme = create;
+export const createTheme = create;
+export { deepmerge };

package/lib/UserCard/Cards/avatar-only.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UserCardProps } from '../types';
+interface AvatarOnlyCardProps extends UserCardProps {
+    renderCardContent: () => React.ReactNode;
+    shouldShowHoverCard: boolean;
+}
+declare function AvatarOnlyCard(props: AvatarOnlyCardProps): import("react/jsx-runtime").JSX.Element;
+export default AvatarOnlyCard;

package/lib/UserCard/Cards/avatar-only.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { InfoType } from '../types';
+import TooltipAvatar from '../Content/tooltip-avatar';
+// AvatarOnly卡片组件，处理仅头像模式的渲染
+function AvatarOnlyCard(props) {
+  const {
+    user,
+    infoType,
+    avatarSize = 48,
+    shouldShowHoverCard = false,
+    renderCardContent
+  } = props;
+
+  // 对于NameOnly类型使用普通Tooltip
+  if (infoType === InfoType.NameOnly) {
+    return /*#__PURE__*/_jsx(TooltipAvatar, {
+      user: user,
+      avatarSize: avatarSize,
+      shouldShowHoverCard: false,
+      renderCardContent: renderCardContent,
+      tooltipTitle: user.fullName || user.email || user.did
+    });
+  }
+
+  // 其他类型使用自定义Tooltip或无Tooltip
+  return /*#__PURE__*/_jsx(TooltipAvatar, {
+    user: user,
+    avatarSize: avatarSize,
+    shouldShowHoverCard: shouldShowHoverCard,
+    renderCardContent: renderCardContent
+  });
+}
+export default AvatarOnlyCard;

package/lib/UserCard/Cards/basic-info.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { UserCardProps } from '../types';
+interface BasicCardProps extends UserCardProps {
+    shouldShowHoverCard: boolean;
+    renderCardContent?: () => React.ReactNode | null;
+    isFull?: boolean;
+}
+declare function BasicCard(props: BasicCardProps): import("react/jsx-runtime").JSX.Element;
+export default BasicCard;

package/lib/UserCard/Cards/basic-info.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import { InfoType } from '../types';
+import MinimalContent from '../Content/minimal';
+import BasicContent from '../Content/basic';
+// 详细卡片模式下的Basic渲染组件
+function BasicCard(props) {
+  const {
+    user,
+    avatarSize = 40,
+    showDid = false,
+    didProps = {},
+    shouldShowHoverCard,
+    renderCardContent,
+    renderTopRightContent,
+    topRightMaxWidth = 100,
+    renderCustomContent,
+    isFull = true,
+    infoType = InfoType.Minimal
+  } = props;
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    sx: {
+      flex: 1,
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/_jsx(MinimalContent, {
+      infoType: infoType,
+      user: user,
+      showDid: showDid,
+      didProps: didProps,
+      avatarSize: avatarSize,
+      shouldShowHoverCard: shouldShowHoverCard,
+      renderCardContent: renderCardContent,
+      renderTopRightContent: renderTopRightContent,
+      topRightMaxWidth: topRightMaxWidth
+    }), infoType === InfoType.Basic && /*#__PURE__*/_jsx(BasicContent, {
+      user: user,
+      isFull: isFull
+    }), renderCustomContent && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        mt: 1.5
+      },
+      children: renderCustomContent()
+    })]
+  });
+}
+export default BasicCard;

package/lib/UserCard/Cards/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UserCardProps } from '../types';
+interface DetailedCardProps extends UserCardProps {
+    shouldShowHoverCard: boolean;
+    renderCardContent?: () => React.ReactNode | null;
+}
+declare function DetailedCard(props: DetailedCardProps): import("react/jsx-runtime").JSX.Element;
+export default DetailedCard;

package/lib/UserCard/Cards/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { InfoType } from '../types';
+import NameOnlyCard from './name-only';
+import BasicCard from './basic-info';
+// DetailedCard组件，根据infoType选择不同的卡片组件进行渲染
+function DetailedCard(props) {
+  const {
+    infoType = InfoType.Minimal
+  } = props;
+
+  // 根据信息类型选择合适的卡片组件
+  switch (infoType) {
+    case InfoType.NameOnly:
+      return /*#__PURE__*/_jsx(NameOnlyCard, {
+        ...props
+      });
+    default:
+      return /*#__PURE__*/_jsx(BasicCard, {
+        ...props
+      });
+  }
+}
+export default DetailedCard;

package/lib/UserCard/Cards/name-only.d.ts

@@ -0,0 +1,3 @@
+import { UserCardProps } from '../types';
+declare function NameOnlyCard(props: UserCardProps): import("react/jsx-runtime").JSX.Element;
+export default NameOnlyCard;

package/lib/UserCard/Cards/name-only.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { renderAvatar } from '../components';
+
+// 详细卡片模式下的NameOnly渲染组件
+function NameOnlyCard(props) {
+  const {
+    user,
+    avatarSize = 48
+  } = props;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [renderAvatar(user, avatarSize), /*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      children: user.fullName || user.email || user.did
+    })]
+  });
+}
+export default NameOnlyCard;

package/lib/UserCard/Container/card.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CardType } from '../types';
+interface CardContainerProps {
+    children: React.ReactNode;
+    cardType?: CardType;
+    variant?: 'paper' | 'box';
+    containerRef?: React.RefObject<HTMLDivElement>;
+}
+/**
+ * 统一的卡片容器组件，处理常见的布局容器样式
+ */
+declare function CardContainer({ children, cardType, variant, containerRef }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
+export default CardContainer;

package/lib/UserCard/Container/card.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Paper } from '@mui/material';
+import { CardType } from '../types';
+/**
+ * 统一的卡片容器组件，处理常见的布局容器样式
+ */
+function CardContainer({
+  children,
+  cardType = CardType.Detailed,
+  variant = 'box',
+  containerRef
+}) {
+  const commonStyles = {
+    minWidth: 320,
+    p: 2,
+    borderRadius: 2,
+    ...(cardType === CardType.Detailed ? {
+      border: '1px solid',
+      borderColor: 'divider'
+    } : {})
+  };
+
+  // Paper变体，用于Basic和Full类型卡片
+  if (variant === 'paper') {
+    return /*#__PURE__*/_jsx(Paper, {
+      ref: containerRef,
+      elevation: 0,
+      sx: commonStyles,
+      children: children
+    });
+  }
+
+  // Box变体，用于Minimal和NameOnly类型卡片
+  return /*#__PURE__*/_jsx(Box, {
+    ref: containerRef,
+    sx: {
+      ...commonStyles,
+      display: 'flex',
+      alignItems: cardType === CardType.AvatarOnly ? 'center' : 'flex-start',
+      gap: 2
+    },
+    children: children
+  });
+}
+export default CardContainer;

package/lib/UserCard/Container/dialog.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DialogContainerProps {
+    children: React.ReactNode;
+}
+/**
+ * 统一的卡片容器组件，处理常见的布局容器样式
+ */
+declare function DialogContainer({ children }: DialogContainerProps): import("react/jsx-runtime").JSX.Element;
+export default DialogContainer;

package/lib/UserCard/Container/dialog.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box, useTheme } from '@mui/material';
+/**
+ * 统一的卡片容器组件，处理常见的布局容器样式
+ */
+function DialogContainer({
+  children
+}) {
+  // Box变体，用于Minimal和NameOnly类型卡片
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      p: 2,
+      backgroundColor: theme.palette.background.paper,
+      border: '1px solid',
+      borderColor: 'divider',
+      borderRadius: 2,
+      maxWidth: 400,
+      display: 'flex'
+    },
+    children: children
+  });
+}
+export default DialogContainer;

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

@@ -0,0 +1,7 @@
+import { User } from '../types';
+interface BasicContentProps {
+    user: User;
+    isFull?: boolean;
+}
+declare function BasicContent({ user, isFull }: BasicContentProps): import("react/jsx-runtime").JSX.Element;
+export default BasicContent;