@arcblock/ux 2.13.47 → 2.13.49

package/lib/NavMenu/products.js

@@ -1374,7 +1374,7 @@ const translations = {
       blockletLauncher: {
         description: 'One-click app launcher'
       },
-      alKit: {
+      aiKit: {
         description: 'Boost apps with AI'
       },
       paymentKit: {
@@ -1444,7 +1444,7 @@ const translations = {
       blockletLauncher: {
         description: '一键启动应用程序'
       },
-      alKit: {
+      aiKit: {
         description: 'AI 赋能应用'
       },
       paymentKit: {
@@ -1599,12 +1599,12 @@ export default function Products({
         icon: /*#__PURE__*/_jsx(BlockletLauncherSvg, {})
       }, {
         label: /*#__PURE__*/_jsx(Link, {
-          to: `https://www.arcblock.io/content/collections/${locale}/ai-kit`,
+          to: `https://www.aikit.rocks/${locale}`,
           target: "_blank",
           rel: "noreferrer noopener",
-          children: "Al Kit"
+          children: "AI Kit"
         }),
-        description: t('products.alKit.description'),
+        description: t('products.aiKit.description'),
         icon: /*#__PURE__*/_jsx(AIKitSvg, {})
       }, {
         label: /*#__PURE__*/_jsx(Link, {

package/lib/RelativeTime/index.d.ts

@@ -1,3 +1,4 @@
+import { TooltipProps } from '@mui/material';
 import 'dayjs/locale/zh-cn';
 import type { Locale } from '../type';
 export interface RelativeTimeProps {
@@ -12,5 +13,6 @@ export interface RelativeTimeProps {
     enableTooltip?: boolean;
     useShortTimezone?: boolean;
     disableTimezone?: boolean;
+    placement?: TooltipProps['placement'];
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, placement, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Tooltip } from '@mui/material';
-import { useState, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -8,6 +8,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import { create } from 'zustand';
 import { formatToDatetime, setDateTool } from '../Util';
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
@@ -48,6 +49,12 @@ const translations = {
     shortLocal: '当前时区'
   }
 };
+const useUtcStore = create(set => ({
+  isUtc: false,
+  setIsUtc: isUtc => set({
+    isUtc
+  })
+}));
 function useRelativeTime({
   value,
   locale = 'en',
@@ -63,7 +70,12 @@ function useRelativeTime({
   const sign = timeZoneOffset > 0 ? '-' : '+';
   const hoursOffset = Math.abs(timeZoneOffset) / 60;
   const isLocalUtc = timeZoneOffset === 0;
-  const [isUtc, setIsUtc] = useState(isLocalUtc);
+  const isUtc = useUtcStore(state => state.isUtc);
+  const setIsUtc = useUtcStore(state => state.setIsUtc);
+  useEffect(() => {
+    setIsUtc(isLocalUtc);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLocalUtc]);
   if (!value) {
     return {
       innerContent: '-',
@@ -137,8 +149,6 @@ function useRelativeTime({
 function UTCChip({
   locale,
   isUtc,
-  sign,
-  hoursOffset,
   setIsUtc,
   useShortTimezone = true
 }) {
@@ -162,7 +172,7 @@ function UTCChip({
       padding: '4px 8px',
       lineHeight: 1
     },
-    onClick: () => setIsUtc(r => !r),
+    onClick: () => setIsUtc(!isUtc),
     children: text
   });
 }
@@ -178,6 +188,7 @@ export default function RelativeTime({
   enableTooltip = true,
   useShortTimezone = false,
   disableTimezone = false,
+  placement = 'top-end',
   ...rest
 }) {
   const {
@@ -185,8 +196,6 @@ export default function RelativeTime({
     popContent,
     isUtc,
     setIsUtc,
-    sign,
-    hoursOffset,
     relativeString
   } = useRelativeTime({
     value,
@@ -201,7 +210,7 @@ export default function RelativeTime({
   if (type === 'all') {
     return /*#__PURE__*/_jsx(Tooltip, {
       title: undefined,
-      placement: "top-end",
+      placement: placement,
       enterTouchDelay: 0,
       children: /*#__PURE__*/_jsxs(Box, {
         display: "inline-flex",
@@ -235,8 +244,6 @@ export default function RelativeTime({
           }), /*#__PURE__*/_jsx(UTCChip, {
             locale: locale,
             isUtc: isUtc,
-            sign: sign,
-            hoursOffset: hoursOffset,
             setIsUtc: setIsUtc,
             useShortTimezone: useShortTimezone
           })]
@@ -246,7 +253,7 @@ export default function RelativeTime({
   }
   return /*#__PURE__*/_jsx(Tooltip, {
     title: enableTooltip ? popContent : undefined,
-    placement: "top-end",
+    placement: placement,
     enterTouchDelay: 0,
     children: /*#__PURE__*/_jsxs(Box, {
       display: "inline-flex",
@@ -259,8 +266,6 @@ export default function RelativeTime({
       }), type === 'utc' && !disableTimezone && /*#__PURE__*/_jsx(UTCChip, {
         locale: locale,
         isUtc: isUtc,
-        sign: sign,
-        hoursOffset: hoursOffset,
         setIsUtc: setIsUtc,
         useShortTimezone: useShortTimezone
       })]

package/lib/Theme/theme-provider.js

@@ -8,7 +8,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 import useLocationState from '../hooks/use-location-state';
-import { createTheme, getDefaultThemePrefer, isTheme, isUxTheme, lazyCreateDefaultTheme } from './theme';
+import { createTheme, getDefaultThemePrefer, isTheme, isUxTheme, isValidThemeMode, lazyCreateDefaultTheme } from './theme';
 const defaultTheme = createTheme();
 
 /** 颜色模式上下文类型 */
@@ -180,10 +180,18 @@ function ColorSchemeProvider({
     prefer
   }), [mode, prefer, toggleMode, changeMode]);
 
-  // 监听 prefer 或者 url.search 变化
+  // 相应 prefer 或 urlTheme 的改变
   useEffect(() => {
     setMode(resolveMode(prefer));
   }, [prefer, setMode, location.search]);
+
+  // 会话缓存 urlTheme 便于 App Launching 阶段临时统一 theme mode
+  useEffect(() => {
+    const urlTheme = new URLSearchParams(location.search).get('theme');
+    if (isValidThemeMode(urlTheme)) {
+      sessionStorage.setItem(BLOCKLET_THEME_PREFER_KEY, urlTheme);
+    }
+  }, [location.search]);
   return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
     value: colorSchemeValue,
     children: /*#__PURE__*/_jsx(BaseThemeProvider, {

package/lib/Theme/theme.d.ts

@@ -15,6 +15,7 @@ export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
+export declare function isValidThemeMode(mode: any): mode is PaletteMode;
 export declare function getDefaultThemePrefer(meta?: {
     theme: {
         prefer: 'light' | 'dark' | 'system';

package/lib/Theme/theme.js

@@ -72,28 +72,38 @@ export function loadFonts(fonts) {
 }
 
 // 获取默认主题偏好
+export function isValidThemeMode(mode) {
+  return mode === 'light' || mode === 'dark';
+}
 export function getDefaultThemePrefer(meta) {
   // 跟随 url theme 参数
   const urlParams = new URLSearchParams(window.location.search);
   const urlPrefer = urlParams.get('theme');
-  if (urlPrefer === 'light' || urlPrefer === 'dark') {
+  if (isValidThemeMode(urlPrefer)) {
     return urlPrefer;
   }
+
+  // 跟随 session theme
+  const sessionPrefer = sessionStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+  if (isValidThemeMode(sessionPrefer)) {
+    return sessionPrefer;
+  }
+
+  // 跟随 blocklet theme mode
   const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
+  if (prefer === 'light' || prefer === 'dark') {
+    return prefer;
+  }
   if (prefer === 'system') {
     // 跟随本地缓存
     const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
-    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
+    if (isValidThemeMode(localPrefer)) {
       return localPrefer;
     }
 
     // 跟随系统
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
-  // 跟随 blocklet theme mode
-  if (prefer === 'light' || prefer === 'dark') {
-    return prefer;
-  }
 
   // fallback
   return 'light';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.47",
+  "version": "2.13.49",
   "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": "8236383669dc761248ad704198602e3b5af3bed2",
+  "gitHead": "a924ed1c40a2ca8fea2f50bea4de423d04aadd88",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.47",
-    "@arcblock/nft-display": "^2.13.47",
-    "@arcblock/react-hooks": "^2.13.47",
+    "@arcblock/icons": "^2.13.49",
+    "@arcblock/nft-display": "^2.13.49",
+    "@arcblock/react-hooks": "^2.13.49",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.47",
+    "@blocklet/theme": "^2.13.49",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
@@ -129,6 +129,7 @@
     "type-fest": "^4.28.0",
     "validator": "^13.9.0",
     "versor": "^0.0.4",
-    "webfontloader": "^1.6.28"
+    "webfontloader": "^1.6.28",
+    "zustand": "^5.0.5"
   }
 }

package/src/NavMenu/products.tsx

@@ -56,7 +56,7 @@ const translations = {
       blockletLauncher: {
         description: 'One-click app launcher',
       },
-      alKit: {
+      aiKit: {
         description: 'Boost apps with AI',
       },
       paymentKit: {
@@ -126,7 +126,7 @@ const translations = {
       blockletLauncher: {
         description: '一键启动应用程序',
       },
-      alKit: {
+      aiKit: {
         description: 'AI 赋能应用',
       },
       paymentKit: {
@@ -283,14 +283,11 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
             },
             {
               label: (
-                <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/ai-kit`}
-                  target="_blank"
-                  rel="noreferrer noopener">
-                  Al Kit
+                <Link to={`https://www.aikit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                  AI Kit
                 </Link>
               ),
-              description: t('products.alKit.description'),
+              description: t('products.aiKit.description'),
               icon: <AIKitSvg />,
             },
             {

package/src/RelativeTime/index.tsx

@@ -1,5 +1,5 @@
-import { Box, Tooltip } from '@mui/material';
-import { useState, useMemo } from 'react';
+import { Box, Tooltip, TooltipProps } from '@mui/material';
+import { useEffect, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -7,6 +7,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import { create } from 'zustand';
 import { formatToDatetime, setDateTool } from '../Util';
 import type { Locale } from '../type';
 
@@ -51,6 +52,12 @@ const translations: Record<Locale, { utc: string; local: string; shortUTC: strin
   },
 };
 
+type UtcState = { isUtc: boolean; setIsUtc: (isUtc: boolean) => void };
+const useUtcStore = create<UtcState>((set) => ({
+  isUtc: false,
+  setIsUtc: (isUtc: boolean) => set({ isUtc }),
+}));
+
 export interface RelativeTimeProps {
   value: string | number;
   locale?: Locale;
@@ -63,6 +70,7 @@ export interface RelativeTimeProps {
   enableTooltip?: boolean;
   useShortTimezone?: boolean;
   disableTimezone?: boolean;
+  placement?: TooltipProps['placement'];
 }
 
 function useRelativeTime({
@@ -89,7 +97,14 @@ function useRelativeTime({
   const sign = timeZoneOffset > 0 ? '-' : '+';
   const hoursOffset = Math.abs(timeZoneOffset) / 60;
   const isLocalUtc = timeZoneOffset === 0;
-  const [isUtc, setIsUtc] = useState(isLocalUtc);
+
+  const isUtc = useUtcStore((state) => state.isUtc);
+  const setIsUtc = useUtcStore((state) => state.setIsUtc);
+
+  useEffect(() => {
+    setIsUtc(isLocalUtc);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLocalUtc]);
 
   if (!value) {
     return { innerContent: '-', popContent: '-', isUtc, setIsUtc, sign, hoursOffset };
@@ -149,16 +164,12 @@ function useRelativeTime({
 function UTCChip({
   locale,
   isUtc,
-  sign,
-  hoursOffset,
   setIsUtc,
   useShortTimezone = true,
 }: {
   locale: Locale;
   isUtc?: boolean;
-  sign: string;
-  hoursOffset: number;
-  setIsUtc: (data: any) => void;
+  setIsUtc: (data: boolean) => void;
   useShortTimezone?: boolean;
 }) {
   const text = useMemo(() => {
@@ -185,7 +196,7 @@ function UTCChip({
         padding: '4px 8px',
         lineHeight: 1,
       }}
-      onClick={() => setIsUtc((r: any) => !r)}>
+      onClick={() => setIsUtc(!isUtc)}>
       {text}
     </Box>
   );
@@ -203,9 +214,10 @@ export default function RelativeTime({
   enableTooltip = true,
   useShortTimezone = false,
   disableTimezone = false,
+  placement = 'top-end',
   ...rest
 }: RelativeTimeProps) {
-  const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
+  const { innerContent, popContent, isUtc, setIsUtc, relativeString } = useRelativeTime({
     value,
     locale,
     withoutSuffix,
@@ -218,7 +230,7 @@ export default function RelativeTime({
 
   if (type === 'all') {
     return (
-      <Tooltip title={undefined} placement="top-end" enterTouchDelay={0}>
+      <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
         <Box display="inline-flex" alignItems="center" gap={0.5} {...rest}>
           <Box component="span" {...rest} sx={{}}>
             {innerContent}
@@ -238,14 +250,7 @@ export default function RelativeTime({
                 ·
               </Box>
 
-              <UTCChip
-                locale={locale}
-                isUtc={isUtc}
-                sign={sign}
-                hoursOffset={hoursOffset}
-                setIsUtc={setIsUtc}
-                useShortTimezone={useShortTimezone}
-              />
+              <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
             </>
           )}
         </Box>
@@ -254,21 +259,14 @@ export default function RelativeTime({
   }
 
   return (
-    <Tooltip title={enableTooltip ? popContent : undefined} placement="top-end" enterTouchDelay={0}>
+    <Tooltip title={enableTooltip ? popContent : undefined} placement={placement} enterTouchDelay={0}>
       <Box display="inline-flex" alignItems="center" gap={1}>
         <Box component="span" {...rest}>
           {innerContent}
         </Box>
 
         {type === 'utc' && !disableTimezone && (
-          <UTCChip
-            locale={locale}
-            isUtc={isUtc}
-            sign={sign}
-            hoursOffset={hoursOffset}
-            setIsUtc={setIsUtc}
-            useShortTimezone={useShortTimezone}
-          />
+          <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
         )}
       </Box>
     </Tooltip>

package/src/Theme/theme-provider.tsx

@@ -14,6 +14,7 @@ import {
   getDefaultThemePrefer,
   isTheme,
   isUxTheme,
+  isValidThemeMode,
   lazyCreateDefaultTheme,
   type UxThemeOptions,
 } from './theme';
@@ -225,11 +226,20 @@ function ColorSchemeProvider({
     [mode, prefer, toggleMode, changeMode]
   );
 
-  // 监听 prefer 或者 url.search 变化
+  // 相应 prefer 或 urlTheme 的改变
   useEffect(() => {
     setMode(resolveMode(prefer));
   }, [prefer, setMode, location.search]);
 
+  // 会话缓存 urlTheme 便于 App Launching 阶段临时统一 theme mode
+  useEffect(() => {
+    const urlTheme = new URLSearchParams(location.search).get('theme');
+
+    if (isValidThemeMode(urlTheme)) {
+      sessionStorage.setItem(BLOCKLET_THEME_PREFER_KEY, urlTheme);
+    }
+  }, [location.search]);
+
   return (
     <ColorSchemeContext.Provider value={colorSchemeValue}>
       <BaseThemeProvider theme={theme} {...rest}>

package/src/Theme/theme.ts

@@ -81,29 +81,40 @@ export function loadFonts(fonts: string[]) {
 }
 
 // 获取默认主题偏好
+export function isValidThemeMode(mode: any): mode is PaletteMode {
+  return mode === 'light' || mode === 'dark';
+}
+
 export function getDefaultThemePrefer(meta?: { theme: { prefer: 'light' | 'dark' | 'system' } }): PaletteMode {
   // 跟随 url theme 参数
   const urlParams = new URLSearchParams(window.location.search);
   const urlPrefer = urlParams.get('theme');
-  if (urlPrefer === 'light' || urlPrefer === 'dark') {
+  if (isValidThemeMode(urlPrefer)) {
     return urlPrefer;
   }
 
+  // 跟随 session theme
+  const sessionPrefer = sessionStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+  if (isValidThemeMode(sessionPrefer)) {
+    return sessionPrefer;
+  }
+
+  // 跟随 blocklet theme mode
   const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
+  if (prefer === 'light' || prefer === 'dark') {
+    return prefer;
+  }
+
   if (prefer === 'system') {
     // 跟随本地缓存
-    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY) as PaletteMode;
-    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
+    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+    if (isValidThemeMode(localPrefer)) {
       return localPrefer;
     }
 
     // 跟随系统
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
-  // 跟随 blocklet theme mode
-  if (prefer === 'light' || prefer === 'dark') {
-    return prefer;
-  }
 
   // fallback
   return 'light';