@arcblock/ux 2.13.26 → 2.13.28

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

@@ -12,6 +12,7 @@ export declare function ConfigProvider({ children, theme, injectFirst, darkSchem
 export declare function useConfig(): {
     mode: import("@mui/material").PaletteMode;
     toggleMode: () => void;
+    changeMode: (mode: import("@mui/material").PaletteMode) => void;
     prefer?: import("../Theme").Prefer;
     locale: import("../type").Locale;
     changeLocale: (locale: import("../type").Locale) => void;

package/lib/RelativeTime/index.d.ts

@@ -6,9 +6,10 @@ export interface RelativeTimeProps {
     withoutSuffix?: false | true;
     from?: string | number;
     to?: string | number;
-    type?: 'relative' | 'absolute';
+    type?: 'relative' | 'absolute' | 'utc' | 'all';
     tz?: string;
     relativeRange?: number;
     enableTooltip?: boolean;
+    showUTCPrefix?: boolean;
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, ...rest }: RelativeTimeProps): "-" | import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, showUTCPrefix, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Tooltip } from '@mui/material';
+import { useState } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import { Tooltip } from '@mui/material';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -33,7 +34,15 @@ dayjs.updateLocale('zh-cn', {
 });
 // FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
-export default function RelativeTime({
+const translations = {
+  en: {
+    utc: 'Your Timezone'
+  },
+  zh: {
+    utc: '你所在时区'
+  }
+};
+function useRelativeTime({
   value,
   locale = 'en',
   withoutSuffix = false,
@@ -41,17 +50,31 @@ export default function RelativeTime({
   to = '',
   type = 'relative',
   tz,
-  relativeRange,
-  enableTooltip = true,
-  ...rest
+  relativeRange
 }) {
+  const date = new Date();
+  const timeZoneOffset = date.getTimezoneOffset();
+  const sign = timeZoneOffset > 0 ? '-' : '+';
+  const hoursOffset = Math.abs(timeZoneOffset) / 60;
+  const isLocalUtc = timeZoneOffset === 0;
+  const [isUtc, setIsUtc] = useState(isLocalUtc);
   if (!value) {
-    return '-';
+    return {
+      innerContent: '-',
+      popContent: '-',
+      isUtc,
+      setIsUtc,
+      sign,
+      hoursOffset
+    };
   }
   const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-  const datetime = dayjs(value).locale(localeOption);
+  let datetime = dayjs(value).locale(localeOption);
+  if (type === 'utc') {
+    datetime = dayjs(value).utc().locale(localeOption);
+  }
   if (tz) {
-    datetime.tz(tz);
+    datetime = datetime.tz(tz);
   }
   const absoluteString = formatToDatetime(value, {
     locale: localeOption,
@@ -77,13 +100,156 @@ export default function RelativeTime({
     innerContent = absoluteString;
     popContent = relativeString;
   }
+  if (type === 'utc') {
+    if (isUtc) {
+      innerContent = formatToDatetime(value, {
+        locale: localeOption,
+        tz,
+        isUtc: true
+      });
+      popContent = formatToDatetime(value, {
+        locale: localeOption,
+        tz,
+        isUtc: true
+      });
+    } else {
+      innerContent = absoluteString;
+      popContent = relativeString;
+    }
+  }
+  return {
+    innerContent,
+    popContent,
+    isUtc,
+    setIsUtc,
+    sign,
+    hoursOffset,
+    relativeString,
+    absoluteString
+  };
+}
+function UTCChip({
+  locale,
+  isUtc,
+  sign,
+  hoursOffset,
+  setIsUtc,
+  showUTCPrefix = true
+}) {
+  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
+  return /*#__PURE__*/_jsx(Box, {
+    component: "span",
+    sx: {
+      color: 'inherit',
+      cursor: 'pointer',
+      border: '1px solid',
+      fontSize: '0.8rem',
+      borderColor: 'divider',
+      borderRadius: '20px',
+      padding: '4px 8px',
+      lineHeight: 1
+    },
+    onClick: () => setIsUtc(r => !r),
+    children: `${prefix}${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`
+  });
+}
+export default function RelativeTime({
+  value,
+  locale = 'en',
+  withoutSuffix = false,
+  from = '',
+  to = '',
+  type = 'relative',
+  tz,
+  relativeRange,
+  enableTooltip = true,
+  showUTCPrefix = true,
+  ...rest
+}) {
+  const {
+    innerContent,
+    popContent,
+    isUtc,
+    setIsUtc,
+    sign,
+    hoursOffset,
+    relativeString
+  } = useRelativeTime({
+    value,
+    locale,
+    withoutSuffix,
+    from,
+    to,
+    type: type === 'all' ? 'utc' : type,
+    tz,
+    relativeRange
+  });
+  if (type === 'all') {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: undefined,
+      placement: "top-end",
+      enterTouchDelay: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        width: "max-content",
+        ...rest,
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: "span",
+          ...rest,
+          sx: {},
+          children: innerContent
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "span",
+          sx: {
+            color: 'inherit'
+          },
+          children: "\xB7"
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "span",
+          sx: {
+            color: 'text.secondary'
+          },
+          children: relativeString
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "span",
+          sx: {
+            color: 'inherit'
+          },
+          children: "\xB7"
+        }), /*#__PURE__*/_jsx(UTCChip, {
+          locale: locale,
+          isUtc: isUtc,
+          sign: sign,
+          hoursOffset: hoursOffset,
+          setIsUtc: setIsUtc,
+          showUTCPrefix: showUTCPrefix
+        })]
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(Tooltip, {
     title: enableTooltip ? popContent : undefined,
     placement: "top-end",
     enterTouchDelay: 0,
-    children: /*#__PURE__*/_jsx("span", {
-      ...rest,
-      children: innerContent
+    children: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      width: "max-content",
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "span",
+        ...rest,
+        children: innerContent
+      }), type === 'utc' && /*#__PURE__*/_jsx(UTCChip, {
+        locale: locale,
+        isUtc: isUtc,
+        sign: sign,
+        hoursOffset: hoursOffset,
+        setIsUtc: setIsUtc,
+        showUTCPrefix: showUTCPrefix
+      })]
     })
   });
 }

package/lib/Tabs/index.js

@@ -41,7 +41,7 @@ function CardTabs({
       },
       '.MuiTabs-flexContainer': {
         borderRadius: '100vw',
-        backgroundColor: 'grey.200',
+        backgroundColor: 'grey.100',
         padding: 0.5,
         display: 'inline-flex',
         columnGap: 0.25,
@@ -60,7 +60,7 @@ function CardTabs({
         textTransform: 'capitalize',
         transition: 'background-color 0.2s ease',
         '&.Mui-selected, &:hover': {
-          backgroundColor: 'white',
+          backgroundColor: 'action.selected',
           borderColor: 'grey.100',
           color: 'grey.A700'
         }

package/lib/Theme/theme-provider.d.ts

@@ -1,15 +1,18 @@
 import PropTypes from 'prop-types';
 import { PaletteMode } from '@mui/material';
-import { Theme } from '@mui/material/styles';
+import { Theme, ThemeOptions } from '@mui/material/styles';
 /** 颜色模式上下文类型 */
 export interface ColorSchemeContextType {
     mode: PaletteMode;
     toggleMode: () => void;
+    changeMode: (mode: PaletteMode) => void;
     prefer?: Prefer;
 }
 export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextType>;
 export declare function useColorScheme(): ColorSchemeContextType;
-export type UxTheme = Partial<Theme> | ((outerTheme: Partial<Theme>) => Theme);
+export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: {
+    mode: PaletteMode;
+}) => Theme);
 export type Prefer = 'light' | 'dark' | 'system';
 interface BaseThemeProviderProps {
     children?: React.ReactNode;

package/lib/Theme/theme-provider.js

@@ -7,7 +7,7 @@ import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
-import { createTheme, getDefaultThemePrefer, isTheme, lazyThemeConfig } from './theme';
+import { createTheme, getDefaultThemePrefer, isTheme, isUxTheme, lazyCreateDefaultTheme } from './theme';
 const defaultTheme = createTheme();
 
 /** 颜色模式上下文类型 */
@@ -83,7 +83,7 @@ function DarkSchemeStyles({
   }
   return null;
 }
-/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+/** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children,
   theme = defaultTheme,
@@ -110,7 +110,7 @@ function BaseThemeProvider({
     })
   );
 }
-/** 带颜色模式切换功能的 theme provider */
+/** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
   children,
   theme: themeInput,
@@ -119,14 +119,26 @@ function ColorSchemeProvider({
   ...rest
 }) {
   const [mode, setMode] = useState(() => resolveMode(prefer));
+  const parentTheme = useTheme();
   const _themeInput = useMemo(() => {
     let result = {};
-    const getThemeConfig = lazyThemeConfig(mode);
+    const createBaseTheme = lazyCreateDefaultTheme(mode);
     if (themeInput) {
       if (typeof themeInput === 'function') {
-        result = {
-          ...themeInput(getThemeConfig())
-        };
+        const baseTheme = createBaseTheme();
+        if (isUxTheme(parentTheme)) {
+          result = {
+            ...themeInput(parentTheme, {
+              mode
+            })
+          };
+        } else {
+          result = {
+            ...themeInput(baseTheme, {
+              mode
+            })
+          };
+        }
       } else {
         result = {
           ...themeInput
@@ -136,7 +148,7 @@ function ColorSchemeProvider({
     set(result, 'palette.mode', mode);
     set(result, 'mode', mode);
     return result;
-  }, [mode, themeInput]);
+  }, [mode, themeInput, parentTheme]);
   const theme = useMemo(() => {
     return createTheme({
       ..._themeInput,
@@ -150,11 +162,18 @@ function ColorSchemeProvider({
     setMode(newMode);
     localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
   }, [mode, setMode]);
+  const changeMode = useCallback(newMode => {
+    if (mode !== newMode) {
+      setMode(newMode);
+      localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
+    }
+  }, [mode, setMode]);
   const colorSchemeValue = useMemo(() => ({
     mode,
     toggleMode,
+    changeMode,
     prefer
-  }), [mode, prefer, toggleMode]);
+  }), [mode, prefer, toggleMode, changeMode]);
   useEffect(() => {
     if (prefer) {
       setMode(resolveMode(prefer));

package/lib/Theme/theme.d.ts

@@ -9,6 +9,8 @@ import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 /** 是否是 MUI Theme 对象 */
 export declare function isTheme(obj: any): obj is Theme;
+/** 是否是 UX Theme 对象 */
+export declare function isUxTheme(obj: any): obj is Theme;
 export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
@@ -19,10 +21,10 @@ export declare function getDefaultThemePrefer(meta?: {
     };
 }): PaletteMode;
 export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOptions;
-export interface UserThemeOptions extends ThemeOptions {
+export interface UxThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
 }
-export declare function lazyThemeConfig(mode: PaletteMode): () => Partial<Theme>;
-export declare const create: (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => Theme;
-export declare const createTheme: (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => Theme;
+export declare function lazyCreateDefaultTheme(mode: PaletteMode): () => Theme;
+export declare const create: (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => Theme;
+export declare const createTheme: (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => Theme;
 export { deepmerge };

package/lib/Theme/theme.js

@@ -20,6 +20,11 @@ export function isTheme(obj) {
   return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
 }
 
+/** 是否是 UX Theme 对象 */
+export function isUxTheme(obj) {
+  return isTheme(obj) && obj.__isUxTheme__ === true;
+}
+
 // 收集字体配置
 export function collectFontFamilies(obj, fontSet = new Set()) {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -94,13 +99,13 @@ export function createDefaultThemeOptions(mode = 'light') {
   }
   return BLOCKLET_THEME_LIGHT;
 }
-// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
-export function lazyThemeConfig(mode) {
-  let config = null;
+export function lazyCreateDefaultTheme(mode) {
+  let theme = null;
   return () => {
-    if (config) return config;
-    config = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
-    return config;
+    if (theme) return theme;
+    const options = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
+    theme = _createTheme(options);
+    return theme;
   };
 }
 
@@ -121,7 +126,7 @@ const normalizeUserThemeOptions = ({
   };
   return result;
 };
-const defaultUserThemeOptions = {
+const defaultUxThemeOptions = {
   themeName: 'ArcBlock',
   pageWidth: 'md',
   disableBlockletTheme: false,
@@ -151,8 +156,8 @@ const defaultUserThemeOptions = {
 // https://material-ui.com/customization/default-theme/
 export const create = (...args) => {
   const defaultPrefer = getDefaultThemePrefer();
-  const getThemeConfig = lazyThemeConfig(defaultPrefer);
-  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)), normalizeUserThemeOptions(defaultUserThemeOptions));
+  const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
+  const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)), normalizeUserThemeOptions(defaultUxThemeOptions));
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
   const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
   const defaultThemeOptions = createDefaultThemeOptions(prefer);
@@ -172,6 +177,7 @@ export const create = (...args) => {
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);
+  theme.__isUxTheme__ = true;
 
   // 异步加载字体
   const fonts = collectFontFamilies(theme.typography);

package/lib/Util/index.d.ts

@@ -48,9 +48,10 @@ export declare function formatToDate(date: string | number | Date, { locale, tz
  * Ensure that the setDateTool() function is called first to set the time tool library.
  * @returns formatted date string
  */
-export declare function formatToDatetime(date: string | number | Date, { locale, tz }?: {
+export declare function formatToDatetime(date: string | number | Date, { locale, tz, isUtc }?: {
     locale?: Locale;
     tz?: string;
+    isUtc?: boolean;
 }): any;
 export declare function detectWalletExtension(): any;
 export declare function openWebWallet({ webWalletUrl, action, locale, url, windowFeatures, appInfo, memberAppInfo, }: {

package/lib/Util/index.js

@@ -189,7 +189,8 @@ export function getDateTool() {
 }
 const createDateFormatter = format => (date, {
   locale,
-  tz
+  tz,
+  isUtc
 } = {}) => {
   if (dateTool === null) {
     throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
@@ -201,6 +202,9 @@ const createDateFormatter = format => (date, {
   if (tz) {
     instance = instance.tz(tz);
   }
+  if (isUtc) {
+    instance = instance.utc();
+  }
   if (typeof locale !== 'undefined') {
     instance = instance.locale(locale);
   }
@@ -229,11 +233,13 @@ export function formatToDate(date, {
  */
 export function formatToDatetime(date, {
   locale = 'en',
-  tz
+  tz,
+  isUtc = false
 } = {}) {
   return createDateFormatter('lll')(date, {
     locale,
-    tz
+    tz,
+    isUtc
   });
 }
 export function detectWalletExtension() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.26",
+  "version": "2.13.28",
   "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": "bf72ea918c9caeddeac9bcd6cb4352a415e7a29c",
+  "gitHead": "345a8363b59137fc5691b68e6295b87c9efb028a",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.26",
-    "@arcblock/nft-display": "^2.13.26",
-    "@arcblock/react-hooks": "^2.13.26",
+    "@arcblock/icons": "^2.13.28",
+    "@arcblock/nft-display": "^2.13.28",
+    "@arcblock/react-hooks": "^2.13.28",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.26",
+    "@blocklet/theme": "^2.13.28",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/RelativeTime/index.tsx

@@ -1,7 +1,8 @@
+import { Box, Tooltip } from '@mui/material';
+import { useState } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import { Tooltip } from '@mui/material';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -35,19 +36,29 @@ dayjs.updateLocale('zh-cn', {
 // FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
 
+const translations: Record<Locale, { utc: string }> = {
+  en: {
+    utc: 'Your Timezone',
+  },
+  zh: {
+    utc: '你所在时区',
+  },
+};
+
 export interface RelativeTimeProps {
   value: string | number;
   locale?: Locale;
   withoutSuffix?: false | true;
   from?: string | number;
   to?: string | number;
-  type?: 'relative' | 'absolute';
+  type?: 'relative' | 'absolute' | 'utc' | 'all';
   tz?: string;
   relativeRange?: number;
   enableTooltip?: boolean;
+  showUTCPrefix?: boolean;
 }
 
-export default function RelativeTime({
+function useRelativeTime({
   value,
   locale = 'en',
   withoutSuffix = false,
@@ -56,18 +67,36 @@ export default function RelativeTime({
   type = 'relative',
   tz,
   relativeRange,
-  enableTooltip = true,
-  ...rest
-}: RelativeTimeProps) {
+}: {
+  value: string | number;
+  locale?: Locale;
+  withoutSuffix?: boolean;
+  from?: string | number;
+  to?: string | number;
+  type?: 'relative' | 'absolute' | 'utc';
+  tz?: string;
+  relativeRange?: number;
+}) {
+  const date = new Date();
+  const timeZoneOffset = date.getTimezoneOffset();
+  const sign = timeZoneOffset > 0 ? '-' : '+';
+  const hoursOffset = Math.abs(timeZoneOffset) / 60;
+  const isLocalUtc = timeZoneOffset === 0;
+  const [isUtc, setIsUtc] = useState(isLocalUtc);
+
   if (!value) {
-    return '-';
+    return { innerContent: '-', popContent: '-', isUtc, setIsUtc, sign, hoursOffset };
   }
 
   const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-  const datetime = dayjs(value).locale(localeOption);
+  let datetime = dayjs(value).locale(localeOption);
+
+  if (type === 'utc') {
+    datetime = dayjs(value).utc().locale(localeOption);
+  }
 
   if (tz) {
-    datetime.tz(tz);
+    datetime = datetime.tz(tz);
   }
 
   const absoluteString = formatToDatetime(value, { locale: localeOption, tz });
@@ -97,9 +126,130 @@ export default function RelativeTime({
     popContent = relativeString;
   }
 
+  if (type === 'utc') {
+    if (isUtc) {
+      innerContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true });
+      popContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true });
+    } else {
+      innerContent = absoluteString;
+      popContent = relativeString;
+    }
+  }
+
+  return { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString, absoluteString };
+}
+
+function UTCChip({
+  locale,
+  isUtc,
+  sign,
+  hoursOffset,
+  setIsUtc,
+  showUTCPrefix = true,
+}: {
+  locale: Locale;
+  isUtc?: boolean;
+  sign: string;
+  hoursOffset: number;
+  setIsUtc: (data: any) => void;
+  showUTCPrefix?: boolean;
+}) {
+  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        color: 'inherit',
+        cursor: 'pointer',
+        border: '1px solid',
+        fontSize: '0.8rem',
+        borderColor: 'divider',
+        borderRadius: '20px',
+        padding: '4px 8px',
+        lineHeight: 1,
+      }}
+      onClick={() => setIsUtc((r: any) => !r)}>
+      {`${prefix}${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`}
+    </Box>
+  );
+}
+
+export default function RelativeTime({
+  value,
+  locale = 'en',
+  withoutSuffix = false,
+  from = '',
+  to = '',
+  type = 'relative',
+  tz,
+  relativeRange,
+  enableTooltip = true,
+  showUTCPrefix = true,
+  ...rest
+}: RelativeTimeProps) {
+  const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
+    value,
+    locale,
+    withoutSuffix,
+    from,
+    to,
+    type: type === 'all' ? 'utc' : type,
+    tz,
+    relativeRange,
+  });
+
+  if (type === 'all') {
+    return (
+      <Tooltip title={undefined} placement="top-end" enterTouchDelay={0}>
+        <Box display="flex" alignItems="center" gap={0.5} width="max-content" {...rest}>
+          <Box component="span" {...rest} sx={{}}>
+            {innerContent}
+          </Box>
+
+          <Box component="span" sx={{ color: 'inherit' }}>
+            ·
+          </Box>
+
+          <Box component="span" sx={{ color: 'text.secondary' }}>
+            {relativeString}
+          </Box>
+
+          <Box component="span" sx={{ color: 'inherit' }}>
+            ·
+          </Box>
+
+          <UTCChip
+            locale={locale}
+            isUtc={isUtc}
+            sign={sign}
+            hoursOffset={hoursOffset}
+            setIsUtc={setIsUtc}
+            showUTCPrefix={showUTCPrefix}
+          />
+        </Box>
+      </Tooltip>
+    );
+  }
+
   return (
     <Tooltip title={enableTooltip ? popContent : undefined} placement="top-end" enterTouchDelay={0}>
-      <span {...rest}>{innerContent}</span>
+      <Box display="flex" alignItems="center" gap={1} width="max-content">
+        <Box component="span" {...rest}>
+          {innerContent}
+        </Box>
+
+        {type === 'utc' && (
+          <UTCChip
+            locale={locale}
+            isUtc={isUtc}
+            sign={sign}
+            hoursOffset={hoursOffset}
+            setIsUtc={setIsUtc}
+            showUTCPrefix={showUTCPrefix}
+          />
+        )}
+      </Box>
     </Tooltip>
   );
 }

package/src/Tabs/index.tsx

@@ -46,7 +46,7 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
         },
         '.MuiTabs-flexContainer': {
           borderRadius: '100vw',
-          backgroundColor: 'grey.200',
+          backgroundColor: 'grey.100',
           padding: 0.5,
           display: 'inline-flex',
           columnGap: 0.25,
@@ -65,7 +65,7 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
           textTransform: 'capitalize',
           transition: 'background-color 0.2s ease',
           '&.Mui-selected, &:hover': {
-            backgroundColor: 'white',
+            backgroundColor: 'action.selected',
             borderColor: 'grey.100',
             color: 'grey.A700',
           },

package/src/Theme/theme-provider.tsx

@@ -1,13 +1,20 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles, PaletteMode } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider, Theme, useTheme } from '@mui/material/styles';
+import { ThemeProvider as MuiThemeProvider, Theme, ThemeOptions, useTheme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 
-import { createTheme, getDefaultThemePrefer, isTheme, lazyThemeConfig, type UserThemeOptions } from './theme';
+import {
+  createTheme,
+  getDefaultThemePrefer,
+  isTheme,
+  isUxTheme,
+  lazyCreateDefaultTheme,
+  type UxThemeOptions,
+} from './theme';
 
 const defaultTheme = createTheme();
 
@@ -15,6 +22,7 @@ const defaultTheme = createTheme();
 export interface ColorSchemeContextType {
   mode: PaletteMode;
   toggleMode: () => void;
+  changeMode: (mode: PaletteMode) => void;
   prefer?: Prefer;
 }
 
@@ -102,7 +110,7 @@ function DarkSchemeStyles({ className }: { className?: string }) {
   return null;
 }
 
-export type UxTheme = Partial<Theme> | ((outerTheme: Partial<Theme>) => Theme);
+export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
 export type Prefer = 'light' | 'dark' | 'system';
 
 interface BaseThemeProviderProps {
@@ -113,7 +121,7 @@ interface BaseThemeProviderProps {
   darkSchemeClass?: string;
 }
 
-/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+/** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children,
   theme = defaultTheme,
@@ -144,7 +152,7 @@ interface ColorSchemeProviderProps extends BaseThemeProviderProps {
   disableBlockletTheme?: boolean;
 }
 
-/** 带颜色模式切换功能的 theme provider */
+/** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
   children,
   theme: themeInput,
@@ -153,14 +161,21 @@ function ColorSchemeProvider({
   ...rest
 }: ThemeProviderProps) {
   const [mode, setMode] = useState<PaletteMode>(() => resolveMode(prefer));
+  const parentTheme = useTheme();
 
   const _themeInput = useMemo(() => {
-    let result: UserThemeOptions = {};
-    const getThemeConfig = lazyThemeConfig(mode);
+    let result: UxThemeOptions = {};
+    const createBaseTheme = lazyCreateDefaultTheme(mode);
 
     if (themeInput) {
       if (typeof themeInput === 'function') {
-        result = { ...themeInput(getThemeConfig()) };
+        const baseTheme = createBaseTheme();
+
+        if (isUxTheme(parentTheme)) {
+          result = { ...themeInput(parentTheme, { mode }) };
+        } else {
+          result = { ...themeInput(baseTheme, { mode }) };
+        }
       } else {
         result = { ...themeInput };
       }
@@ -170,7 +185,7 @@ function ColorSchemeProvider({
     set(result, 'mode', mode);
 
     return result;
-  }, [mode, themeInput]);
+  }, [mode, themeInput, parentTheme]);
 
   const theme = useMemo(() => {
     return createTheme({ ..._themeInput, disableBlockletTheme });
@@ -183,13 +198,24 @@ function ColorSchemeProvider({
     localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
   }, [mode, setMode]);
 
+  const changeMode = useCallback(
+    (newMode: PaletteMode) => {
+      if (mode !== newMode) {
+        setMode(newMode);
+        localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
+      }
+    },
+    [mode, setMode]
+  );
+
   const colorSchemeValue = useMemo(
     () => ({
       mode,
       toggleMode,
+      changeMode,
       prefer,
     }),
-    [mode, prefer, toggleMode]
+    [mode, prefer, toggleMode, changeMode]
   );
 
   useEffect(() => {

package/src/Theme/theme.ts

@@ -20,6 +20,11 @@ export function isTheme(obj: any): obj is Theme {
   return obj && typeof obj === 'object' && obj.palette && typeof obj.palette.getContrastText === 'function';
 }
 
+/** 是否是 UX Theme 对象 */
+export function isUxTheme(obj: any): obj is Theme {
+  return isTheme(obj) && obj.__isUxTheme__ === true;
+}
+
 // 收集字体配置
 export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<string> = new Set()): Set<string> {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -107,26 +112,26 @@ export function createDefaultThemeOptions(mode: PaletteMode = 'light') {
   return BLOCKLET_THEME_LIGHT;
 }
 
-export interface UserThemeOptions extends ThemeOptions {
+export interface UxThemeOptions extends ThemeOptions {
   disableBlockletTheme?: boolean;
 }
 
-// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
-export function lazyThemeConfig(mode: PaletteMode) {
-  let config: Partial<Theme> | null = null;
+export function lazyCreateDefaultTheme(mode: PaletteMode) {
+  let theme: Theme | null = null;
 
   return () => {
-    if (config) return config;
+    if (theme) return theme;
 
-    config = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {}) as Partial<Theme>;
+    const options = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
 
-    return config;
+    theme = _createTheme(options);
+    return theme;
   };
 }
 
 // 主要处理 overrides
-const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UserThemeOptions) => {
-  const result: UserThemeOptions = {
+const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UxThemeOptions) => {
+  const result: UxThemeOptions = {
     palette,
     components: {
       ...overrides,
@@ -138,7 +143,7 @@ const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }:
   return result;
 };
 
-const defaultUserThemeOptions: UserThemeOptions = {
+const defaultUxThemeOptions: UxThemeOptions = {
   themeName: 'ArcBlock',
   pageWidth: 'md',
   disableBlockletTheme: false,
@@ -166,13 +171,13 @@ const defaultUserThemeOptions: UserThemeOptions = {
 };
 
 // https://material-ui.com/customization/default-theme/
-export const create = (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => {
+export const create = (...args: Array<UxThemeOptions | ((baseTheme: Theme) => UxThemeOptions)>) => {
   const defaultPrefer = getDefaultThemePrefer();
-  const getThemeConfig = lazyThemeConfig(defaultPrefer);
-  const userThemeOptions = args.reduce<UserThemeOptions>(
+  const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
+  const userThemeOptions = args.reduce<UxThemeOptions>(
     (acc, curr) =>
-      deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)),
-    normalizeUserThemeOptions(defaultUserThemeOptions)
+      deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)),
+    normalizeUserThemeOptions(defaultUxThemeOptions)
   );
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
   const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
@@ -195,6 +200,7 @@ export const create = (...args: Array<UserThemeOptions | ((config: Partial<Theme
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);
+  theme.__isUxTheme__ = true;
 
   // 异步加载字体
   const fonts = collectFontFamilies(theme.typography);

package/src/Util/index.ts

@@ -246,7 +246,7 @@ export function getDateTool() {
 
 const createDateFormatter =
   (format: string) =>
-  (date: string | number | Date, { locale, tz }: { locale?: Locale; tz?: string } = {}) => {
+  (date: string | number | Date, { locale, tz, isUtc }: { locale?: Locale; tz?: string; isUtc?: boolean } = {}) => {
     if (dateTool === null) {
       throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
     }
@@ -261,6 +261,10 @@ const createDateFormatter =
       instance = instance.tz(tz);
     }
 
+    if (isUtc) {
+      instance = instance.utc();
+    }
+
     if (typeof locale !== 'undefined') {
       instance = instance.locale(locale);
     }
@@ -287,9 +291,9 @@ export function formatToDate(
  */
 export function formatToDatetime(
   date: string | number | Date,
-  { locale = 'en', tz }: { locale?: Locale; tz?: string } = {}
+  { locale = 'en', tz, isUtc = false }: { locale?: Locale; tz?: string; isUtc?: boolean } = {}
 ) {
-  return createDateFormatter('lll')(date, { locale, tz });
+  return createDateFormatter('lll')(date, { locale, tz, isUtc });
 }
 
 export function detectWalletExtension() {