@arcblock/ux 2.12.64 → 2.12.71

package/lib/UserCard/types.js

@@ -0,0 +1,42 @@
+export let DurationEnum = /*#__PURE__*/function (DurationEnum) {
+  DurationEnum["NoClear"] = "no_clear";
+  DurationEnum["ThirtyMinutes"] = "30_minutes";
+  DurationEnum["OneHour"] = "1_hour";
+  DurationEnum["FourHours"] = "4_hours";
+  DurationEnum["Today"] = "today";
+  DurationEnum["ThisWeek"] = "this_week";
+  DurationEnum["Custom"] = "custom";
+  return DurationEnum;
+}({});
+export let StatusEnum = /*#__PURE__*/function (StatusEnum) {
+  StatusEnum["Meeting"] = "meeting";
+  StatusEnum["Community"] = "community";
+  StatusEnum["Holiday"] = "holiday";
+  StatusEnum["OffSick"] = "off_sick";
+  StatusEnum["WorkingRemotely"] = "working_remotely";
+  return StatusEnum;
+}({});
+// 头像大小
+export const AvatarSize = {
+  small: 32,
+  medium: 40,
+  large: 48,
+  xlarge: 64
+};
+
+// 卡片类型
+export let CardType = /*#__PURE__*/function (CardType) {
+  CardType["AvatarOnly"] = "AvatarOnly";
+  CardType["Detailed"] = "Detailed";
+  return CardType;
+}({}); // 详细卡片
+
+// 信息类型
+export let InfoType = /*#__PURE__*/function (InfoType) {
+  InfoType["NameOnly"] = "NameOnly";
+  InfoType["Minimal"] = "Minimal";
+  InfoType["Basic"] = "Basic";
+  return InfoType;
+}({}); // 基本信息模式
+
+// 定义UserCard属性接口

package/lib/UserCard/utils.d.ts

@@ -0,0 +1,2 @@
+import { User } from './types';
+export declare function createNameOnlyAvatar(user: User): string | null;

package/lib/UserCard/utils.js

@@ -0,0 +1,19 @@
+// 创建仅显示名称首字母的头像
+// eslint-disable-next-line import/prefer-default-export
+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;
+}

package/lib/hooks/use-clock.d.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+export default function useClock(timezone?: string, locale?: string): {
+    formattedTime: string;
+    fullDateTime: any;
+    phase: string;
+    icon: string;
+    rawTime: dayjs.Dayjs;
+};

package/lib/hooks/use-clock.js

@@ -0,0 +1,71 @@
+import { useState, useEffect, useCallback } from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import { formatToDatetime } from '@arcblock/ux/lib/Util';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+dayjs.extend(utc);
+dayjs.extend(timezonePlugin);
+dayjs.extend(localizedFormat);
+const currentTimezone = dayjs.tz.guess();
+
+// 获取时间段
+const getTimePhase = hour => {
+  if (hour >= 0 && hour < 6) return {
+    phase: 'dawn',
+    icon: '🌒'
+  }; // 凌晨 00:00-05:59
+  if (hour >= 6 && hour < 12) return {
+    phase: 'morning',
+    icon: '🌞'
+  }; // 上午 06:00-11:59
+  if (hour >= 12 && hour < 18) return {
+    phase: 'afternoon',
+    icon: '🌞'
+  }; // 下午 12:00-17:59
+  return {
+    phase: 'night',
+    icon: '🌒'
+  }; // 晚上 18:00-23:59
+};
+export default function useClock(timezone = currentTimezone, locale = 'zh') {
+  const getLatestTimeInfo = useCallback(() => {
+    const currentLocale = locale === 'zh' ? 'zh-cn' : 'en';
+    const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
+    dayjs.locale(currentLocale);
+    const now = dayjs().tz(timezone);
+    const hour = now.hour();
+    const {
+      phase,
+      icon
+    } = getTimePhase(hour);
+    return {
+      formattedTime: now.format('LT'),
+      fullDateTime: formatToDatetime(now.toDate(), {
+        tz: timezone,
+        locale: localeOption
+      }),
+      phase,
+      icon,
+      rawTime: now
+    };
+  }, [timezone, locale]);
+  const [timeInfo, setTimeInfo] = useState(getLatestTimeInfo());
+  useEffect(() => {
+    // 立即更新一次，确保初始状态是最新的
+    setTimeInfo(getLatestTimeInfo());
+
+    // 设置定时器
+    const timerId = setInterval(() => {
+      setTimeInfo(getLatestTimeInfo());
+    }, 6000);
+
+    // 清理函数
+    return () => {
+      clearInterval(timerId);
+    };
+  }, [timezone, locale, getLatestTimeInfo]);
+  return timeInfo;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.64",
+  "version": "2.12.71",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,12 +70,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "535a7ce33f7325f00aab13b8812123cafc5788c7",
+  "gitHead": "12e8ad0b88c0d3e9ee9cbd84634e0778044cf494",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.64",
-    "@arcblock/nft-display": "^2.12.64",
-    "@arcblock/react-hooks": "^2.12.64",
+    "@arcblock/icons": "^2.12.71",
+    "@arcblock/nft-display": "^2.12.71",
+    "@arcblock/react-hooks": "^2.12.71",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/roboto": "^5.2.5",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Config/config-provider.tsx

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

package/src/Config/index.ts

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

package/src/Datatable/index.jsx

@@ -16,7 +16,7 @@ import { styled } from '../Theme';
 /**
  * @typedef {{
  *  icon: import('react').ReactElement,
- *  title: string,
+ *  title: import('react').ReactElement | string,
  *  onClick?: () => void
  * }} DataTableCustomButton
  */
@@ -35,7 +35,7 @@ import { styled } from '../Theme';
 
 /**
  * @typedef {{
- *  title?: string, // The title of the table (optional)
+ *  title?: import('react').ReactElement | string, // The title of the table (optional)
  * } & Omit<import('mui-datatables').MUIDataTableProps, 'title'>} ModifiedMUIDataTableProps
  */
 

package/src/Header/header.tsx

@@ -100,8 +100,8 @@ 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/src/Img/index.jsx

@@ -6,6 +6,7 @@ import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
 import { Icon } from '@iconify/react';
 import { Box } from '@mui/material';
 import noop from 'lodash/noop';
+import { mergeSx } from '../Util/style';
 
 /**
  * @typedef {Object} ImgExProps
@@ -127,40 +128,42 @@ function Img({
       ref={ref}
       style={outerStyle}
       {...rest}
-      sx={{
-        [`& .${classes.root}`]: {
-          position: 'relative',
-          overflow: 'hidden',
-          '& .image--state, & .image--img': {
-            minWidth: '100%',
-            minHeight: '100%',
-            position: 'absolute',
-            top: 0,
-            left: '50%',
-            transform: 'translateX(-50%)',
-          },
-          '& .image--state': {
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            color: '#999',
-            background: '#eee',
-            width: '100%',
-            height: '100%',
-          },
-          '& .image--img': {
-            opacity: 0,
-            visibility: 'hidden',
-          },
-          '& .image--icon': {
-            fontSize: 30,
-            maxWidth: '80%',
-            maxHeight: '80%',
+      sx={mergeSx(
+        {
+          [`& .${classes.root}`]: {
+            position: 'relative',
+            overflow: 'hidden',
+            '& .image--state, & .image--img': {
+              minWidth: '100%',
+              minHeight: '100%',
+              position: 'absolute',
+              top: 0,
+              left: '50%',
+              transform: 'translateX(-50%)',
+            },
+            '& .image--state': {
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              color: '#999',
+              background: '#eee',
+              width: '100%',
+              height: '100%',
+            },
+            '& .image--img': {
+              opacity: 0,
+              visibility: 'hidden',
+            },
+            '& .image--icon': {
+              fontSize: 30,
+              maxWidth: '80%',
+              maxHeight: '80%',
+            },
           },
         },
-        ...rest.sx,
-      }}>
+        rest.sx
+      )}>
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
         {!fallback && imgState === 'error' && (
           <div className="image--state" title="loading image">

package/src/Locale/selector.tsx

@@ -6,7 +6,6 @@ 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';
@@ -80,7 +79,7 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
   }, [Icon, size]);
 
   return (
-    <Div dark={dark} theme={theme} {...rest} {...handleEventProps}>
+    <Wrapper {...rest} {...handleEventProps}>
       <ButtonComponent ref={anchorEl} className="trigger" role="button" aria-label="Locale selector button">
         <Box display="flex" alignItems="center">
           {renderIcon}
@@ -109,8 +108,8 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
         <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,
           }}>
           <ClickAwayListener onClickAway={onClose}>
@@ -128,7 +127,7 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
                       lineHeight: 'normal',
                       letterSpacing: '2px',
                       textAlign: 'center',
-                      color: getColor({ ...popperProps, theme }),
+                      color: 'text.primary',
                       cursor: 'pointer',
                       display: 'flex',
                       padding: '16px',
@@ -151,17 +150,11 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
           </ClickAwayListener>
         </Box>
       </Popper>
-    </Div>
+    </Wrapper>
   );
 }
 
-type DivProps = React.HTMLAttributes<HTMLDivElement> & {
-  dark: boolean;
-};
-
-const Div = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'dark',
-})<DivProps>`
+const Wrapper = styled(Box)`
   display: inline-block;
 
   .trigger {
@@ -174,7 +167,7 @@ const Div = styled('div', {
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;
-      color: ${(props) => getColor(props)};
+      color: ${({ theme }) => theme.palette.text.primary};
     }
   }
 `;

package/src/NavMenu/style.ts

@@ -128,20 +128,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,
       }),
@@ -149,14 +149,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 布局中
@@ -237,11 +237,11 @@ export const NavMenuSub = styled(NavMenuItem)(({ theme }) => ({
 }));
 
 // 下拉子菜单 .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/src/NavMenu/sub-item-group.tsx

@@ -4,12 +4,12 @@ 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/src/SessionBlocklet/index.tsx

@@ -11,6 +11,7 @@ import {
   Paper,
   Popper,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { Icon } from '@iconify/react';
 import DashboardOutlineRoundedIcon from 'iconify-icons-material-symbols-400/dashboard-outline-rounded';
@@ -18,7 +19,6 @@ import WidgetsOutlineRoundedIcon from '@iconify-icons/material-symbols/widgets-o
 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';
@@ -56,6 +56,7 @@ export default function SessionBlocklet({
         component,
       };
     });
+  const theme = useTheme();
   const popperAnchorRef = useRef(null);
   const currentState = useReactive({
     open: false,
@@ -100,10 +101,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,
                 }}>
                 <List
                   sx={{
@@ -129,7 +129,7 @@ export default function SessionBlocklet({
                           height: '100%',
                           borderRadius: 2,
                           '&:hover': {
-                            backgroundColor: colors.surfacePrimarySubtitle,
+                            backgroundColor: 'action.hover',
                           },
                         }}>
                         {item?.component?.did ? (
@@ -148,14 +148,14 @@ export default function SessionBlocklet({
                           <Icon
                             fontSize={50}
                             icon={item.icon || WidgetsOutlineRoundedIcon}
-                            color={colors.textSubtitle}
+                            color={theme.palette.text.secondary}
                           />
                         )}
 
                         <Typography
                           sx={{
                             fontSize: '12px',
-                            color: colors.textBase,
+                            color: 'text.primary',
                             textAlign: 'center',
                             lineHeight: 'normal',
                           }}>
@@ -166,20 +166,7 @@ export default function SessionBlocklet({
                   ))}
                 </List>
                 <SessionPermission session={session}>
-                  <Button
-                    variant="outlined"
-                    fullWidth
-                    href={NAVIGATION_URL}
-                    sx={{
-                      mt: 1,
-                      borderRadius: 2,
-                      color: colors.textBase,
-                      borderColor: colors.lineBorderStrong,
-                      '&:hover': {
-                        color: colors.primaryBase,
-                        borderColor: colors.primaryBase,
-                      },
-                    }}>
+                  <Button variant="outlined" fullWidth href={NAVIGATION_URL} sx={{ mt: 1 }}>
                     {locale === 'zh' ? '管理' : 'Manage'}
                   </Button>
                 </SessionPermission>

package/src/SessionUser/components/logged-in.tsx

@@ -24,7 +24,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';
@@ -179,9 +178,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,
                 }}>
                 <UserInfo
                   locale={locale}
@@ -192,7 +190,7 @@ export default function LoggedIn({
                   onSwitchProfile={handleSwitchProfile}
                   onBindWallet={handleBindWallet}
                 />
-                <Divider sx={{ m: '0!important', borderColor: colors.strokeSep }} />
+                <Divider sx={{ m: '0 !important' }} />
                 <MenuList sx={{ p: 0 }}>
                   {isBlocklet ? (
                     <>
@@ -221,7 +219,7 @@ export default function LoggedIn({
                           sx={{ display: 'block', color: 'inherit' }}
                         />
                       )}
-                      <Divider sx={{ m: '0!important', borderColor: colors.strokeSep }} />
+                      <Divider sx={{ m: '0 !important' }} />
                       <DidSpace session={session} locale={locale} />
                     </>
                   ) : null}
@@ -263,7 +261,7 @@ function SessionMenuItem<C extends ElementType>({
           alignItems: 'center',
           borderRadius: 2,
           '&:hover': {
-            backgroundColor: `${colors.surfacePrimarySubtitle} !important`,
+            backgroundColor: 'action.hover',
           },
           py: 1,
         }}>

package/src/Theme/theme.ts

@@ -290,3 +290,4 @@ export const create = ({
 };
 
 export const createTheme = create;
+export { deepmerge };

package/src/UserCard/Cards/avatar-only.tsx

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