@arcblock/ux 2.13.48 → 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/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.48",
+  "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": "e6639ffcaa28acbebef892a278fe609fc24ee365",
+  "gitHead": "a924ed1c40a2ca8fea2f50bea4de423d04aadd88",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.48",
-    "@arcblock/nft-display": "^2.13.48",
-    "@arcblock/react-hooks": "^2.13.48",
+    "@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.48",
+    "@blocklet/theme": "^2.13.49",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

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/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';