@arcblock/ux 2.13.12 → 2.13.14

package/src/Success/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 
 export interface SuccessProps {
   size?: number;
@@ -7,8 +7,10 @@ export interface SuccessProps {
 }
 
 // FIXME: @zhanghan 目前无法适配各种 size，后续优化
-export default function Success({ size = 64, backgroundColor = 'white', borderWidth = 4 }: SuccessProps) {
+export default function Success({ size = 64, backgroundColor, borderWidth = 4 }: SuccessProps) {
+  const { palette } = useTheme();
   const contentSize = size - borderWidth * 2;
+  const _backgroundColor = backgroundColor || palette.background.default;
 
   return (
     <Box
@@ -27,7 +29,7 @@ export default function Success({ size = 64, backgroundColor = 'white', borderWi
           content: '""',
           height: '125%',
           position: 'absolute',
-          background: backgroundColor,
+          background: _backgroundColor,
           transform: 'rotate(-45deg)',
         },
         '&::before': {
@@ -165,7 +167,7 @@ export default function Success({ size = 64, backgroundColor = 'white', borderWi
           height: contentSize + borderWidth * 2,
           position: 'absolute',
           transform: 'rotate(-45deg)',
-          backgroundColor,
+          backgroundColor: _backgroundColor,
         }}
       />
     </Box>

package/src/Switch/index.jsx

@@ -17,7 +17,7 @@ const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focus
         transform: 'translateX(16px)',
         color: '#fff',
         '& + .MuiSwitch-track': {
-          backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
+          backgroundColor: theme.palette.primary.main,
           opacity: 1,
           border: 0,
         },
@@ -26,7 +26,7 @@ const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focus
         },
       },
       '&.Mui-focusVisible .MuiSwitch-thumb': {
-        color: '#33cf4d',
+        color: theme.palette.primary.main,
         border: '6px solid #fff',
       },
       '&.Mui-disabled .MuiSwitch-thumb': {
@@ -43,7 +43,7 @@ const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focus
     },
     '& .MuiSwitch-track': {
       borderRadius: 26 / 2,
-      backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+      backgroundColor: theme.palette.grey[200],
       opacity: 1,
       transition: theme.transitions.create(['background-color'], {
         duration: 500,

package/src/Tabs/index.tsx

@@ -1,6 +1,5 @@
 import { Tabs as MuiTabs, Tab as MuiTab, type TabsProps as MuiTabsProps } from '@mui/material';
 
-import { temp as colors } from '../Colors';
 import { styled } from '../Theme';
 
 const PREFIX = 'index';
@@ -47,7 +46,7 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
         },
         '.MuiTabs-flexContainer': {
           borderRadius: '100vw',
-          backgroundColor: colors.backgroundsBgComponent,
+          backgroundColor: 'grey.200',
           padding: 0.5,
           display: 'inline-flex',
           columnGap: 0.25,
@@ -60,15 +59,15 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
           minHeight: 'auto',
           lineHeight: 1,
           py: 1,
-          color: colors.foregroundsFgSubtile,
+          color: 'text.secondary',
           fontSize: '13px',
           fontWeight: 'normal',
           textTransform: 'capitalize',
           transition: 'background-color 0.2s ease',
           '&.Mui-selected, &:hover': {
             backgroundColor: 'white',
-            borderColor: colors.lineBorderBase,
-            color: colors.foregroundsFgBase,
+            borderColor: 'grey.100',
+            color: 'grey.A700',
           },
         },
         '.MuiTabs-indicator': {
@@ -115,7 +114,7 @@ function LineTabs({ tabs, current, onChange, ...rest }: LineTabsProps) {
                   zIndex: -1,
                   width: '100%',
                   height: '1px',
-                  backgroundColor: colors.strokeBorderStrong,
+                  backgroundColor: 'grey.300',
                 },
               }
             : {},
@@ -131,18 +130,18 @@ function LineTabs({ tabs, current, onChange, ...rest }: LineTabsProps) {
           lineHeight: 1,
           py: 1,
           px: 0,
-          color: colors.foregroundsFgSubtile,
+          color: 'text.secondary',
           fontSize: '14px',
           fontWeight: 500,
           textTransform: 'capitalize',
           minWidth: 'auto',
           '&.Mui-selected, &:hover': {
-            color: colors.foregroundsFgBase,
+            color: 'primary.main',
           },
         },
         '.MuiTabs-indicator': {
           height: '1px',
-          backgroundColor: colors.foregroundsFgBase,
+          backgroundColor: 'primary.main',
         },
         ...rest.sx,
       }}>

package/src/Theme/index.ts

@@ -1,5 +1,5 @@
-import { CreateMUIStyled, Theme } from '@mui/material';
-import { styled as muiStyled, useTheme } from '@mui/material/styles';
+import type { CreateMUIStyled, Theme } from '@mui/material';
+import { styled as muiStyled, useTheme } from '@mui/material';
 
 export * from './theme';
 export { default as ThemeProvider } from './theme-provider';

package/src/Theme/theme-provider.tsx

@@ -1,26 +1,95 @@
 import PropTypes from 'prop-types';
-import { ThemeProvider as MuiThemeProvider, Theme } from '@mui/material/styles';
+import { GlobalStyles } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider, Theme, useTheme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme } from './theme';
 
 const defaultTheme = createTheme();
 
+function DarkSchemeStyles({ className }: { className?: string }) {
+  const theme = useTheme();
+
+  if (theme.palette.mode === 'dark') {
+    const trackColor = 'transparent';
+    const thumbColor = theme.palette.grey[300];
+
+    // 处理作用域选择器
+    const prefix = (className || '')
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((c) => (c.startsWith('.') ? c : `.${c}`))
+      .join(' ');
+
+    const webkitScrollbar = prefix
+      ? `${prefix}::-webkit-scrollbar, ${prefix} *::-webkit-scrollbar`
+      : '*::-webkit-scrollbar';
+    const webkitTrack = prefix
+      ? `${prefix}::-webkit-scrollbar-track, ${prefix} *::-webkit-scrollbar-track`
+      : '*::-webkit-scrollbar-track';
+    const webkitThumb = prefix
+      ? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb`
+      : '*::-webkit-scrollbar-thumb';
+    const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
+
+    return (
+      <GlobalStyles
+        styles={{
+          // Chrome, Safari, Edge
+          '@supports selector(::-webkit-scrollbar)': {
+            [webkitScrollbar]: {
+              width: '12px',
+              height: '12px',
+            },
+            [webkitTrack]: {
+              background: trackColor,
+            },
+            [webkitThumb]: {
+              background: thumbColor,
+              borderRadius: '6px',
+              border: '2px solid',
+              borderColor: trackColor,
+              backgroundClip: 'padding-box',
+              '&:hover': {
+                background: theme.palette.grey[400],
+                backgroundClip: 'padding-box',
+              },
+            },
+          },
+          // Firefox
+          '@supports not selector(::-webkit-scrollbar)': {
+            [firefoxSelector]: {
+              scrollbarWidth: 'auto',
+              scrollbarColor: `${thumbColor} ${trackColor}`,
+            },
+          },
+        }}
+      />
+    );
+  }
+
+  return null;
+}
+
 export interface ThemeProviderProps {
   children?: React.ReactNode;
   theme: Theme;
   injectFirst?: boolean;
+  /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
+  darkSchemeClass?: string;
 }
 
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
-export default function ThemeProvider({ children, theme, injectFirst }: ThemeProviderProps) {
+export default function ThemeProvider({ children, theme, injectFirst, darkSchemeClass }: ThemeProviderProps) {
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     <StyledEngineProvider injectFirst={injectFirst}>
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
+        <DarkSchemeStyles className={darkSchemeClass} />
         {children}
       </MuiThemeProvider>
     </StyledEngineProvider>
@@ -31,10 +100,12 @@ ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
   injectFirst: PropTypes.bool,
+  darkSchemeClass: PropTypes.string,
 };
 
 ThemeProvider.defaultProps = {
   children: null,
   theme: defaultTheme,
   injectFirst: true,
+  darkSchemeClass: '',
 };

package/src/Theme/theme.ts

@@ -1,12 +1,13 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import type { PaletteMode } from '@mui/material';
+import type { PaletteMode, Theme } from '@mui/material';
 import { createTheme as _createTheme, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
+import pick from 'lodash/pick';
 import webfontloader from 'webfontloader';
-import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS } from '@blocklet/theme';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
 
-import { cleanedObj } from '../Util';
+import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
 import '@fontsource/roboto/latin-400.css';
@@ -71,6 +72,29 @@ export function loadFonts(fonts: string[]) {
   });
 }
 
+// 获取默认主题偏好
+export function getDefaultThemePrefer(): PaletteMode {
+  const prefer = window.blocklet?.theme?.prefer;
+
+  if (prefer === 'system') {
+    // 本地缓存
+    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY) as PaletteMode;
+    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
+      return localPrefer;
+    }
+
+    // 跟随系统
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  if (prefer === 'light' || prefer === 'dark') {
+    return prefer;
+  }
+
+  // 未设置偏好
+  return 'light';
+}
+
 // 创建默认主题配置
 export function createDefaultThemeOptions(mode: PaletteMode = 'light') {
   if (mode === 'dark') {
@@ -84,20 +108,36 @@ export interface UserThemeOptions extends ThemeOptions {
   disableBlockletTheme?: boolean;
 }
 
-// 主要处理 mode 和 overrides
-const normalizeUserThemeOptions = ({ mode = 'light', palette, components, overrides, ...rest }: UserThemeOptions) => {
-  return {
-    mode,
-    palette: {
-      ...palette,
-      mode,
-    },
+// 用于获取 Blocklet Theme 配置，便于用户创建自定义主题
+export type ThemeConfig = Pick<Theme, 'palette'>;
+export function lazyThemeConfig(mode: PaletteMode) {
+  const fields = ['palette'];
+  let config: ThemeConfig | null = null;
+
+  return () => {
+    if (config) return config;
+
+    config = deepmerge(
+      pick(createDefaultThemeOptions(mode), fields),
+      pick(window.blocklet?.theme?.[mode] ?? {}, fields)
+    ) as ThemeConfig;
+
+    return config;
+  };
+}
+
+// 主要处理 overrides
+const normalizeUserThemeOptions = ({ palette, components, overrides, ...rest }: UserThemeOptions) => {
+  const result: UserThemeOptions = {
+    palette,
     components: {
       ...overrides,
       ...components,
     },
     ...rest,
   };
+
+  return result;
 };
 
 const defaultUserThemeOptions: UserThemeOptions = {
@@ -128,21 +168,32 @@ const defaultUserThemeOptions: UserThemeOptions = {
 };
 
 // https://material-ui.com/customization/default-theme/
-export const create = (...args: UserThemeOptions[]) => {
-  const userThemeOptions = args.reduce(
-    (acc, curr) => deepmerge(acc, normalizeUserThemeOptions(curr)),
+export const create = (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => {
+  const defaultPrefer = getDefaultThemePrefer();
+  const getThemeConfig = lazyThemeConfig(defaultPrefer);
+  const userThemeOptions = args.reduce<UserThemeOptions>(
+    (acc, curr) =>
+      deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(getThemeConfig()) : curr)),
     normalizeUserThemeOptions(defaultUserThemeOptions)
   );
-  const { mode, disableBlockletTheme } = userThemeOptions;
-  const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  const defaultThemeOptions = createDefaultThemeOptions(mode);
+  const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
+  const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
+  const defaultThemeOptions = createDefaultThemeOptions(prefer);
+  const { disableBlockletTheme } = userThemeOptions;
 
   // 合并配置
-  let mergedThemeOptions = defaultThemeOptions;
-  if (!disableBlockletTheme) {
-    mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
-  }
-  mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
+  const mergedThemeOptions = deepmergeAll(
+    [
+      defaultThemeOptions,
+      !disableBlockletTheme && cleanedObj(blockletThemeOptions),
+      cleanedObj(userThemeOptions),
+      // 确保 mode 跟 prefer 一致
+      {
+        mode: prefer,
+        palette: { mode: prefer },
+      },
+    ].filter(Boolean) as ThemeOptions[]
+  );
 
   // 创建主题
   const theme = _createTheme(mergedThemeOptions);

package/src/UserCard/Container/card.tsx

@@ -24,7 +24,7 @@ function CardContainer({
   const commonStyles = {
     minWidth: 320,
     p: 2,
-    borderRadius: 2,
+    borderRadius: 1,
     ...(cardType === CardType.Detailed
       ? {
           border: '1px solid',

package/src/UserCard/Container/dialog.tsx

@@ -22,7 +22,7 @@ function DialogContainer({ children, sx }: DialogContainerProps) {
           backgroundColor: theme.palette.background.paper,
           border: '1px solid',
           borderColor: 'divider',
-          borderRadius: 2,
+          borderRadius: 1,
           maxWidth: 500,
           minWidth: 320,
           display: 'flex',

package/src/Util/iframe.ts

@@ -0,0 +1,19 @@
+export function getCallbackAction(id: string, action: string) {
+  return `callback_${action}_${id}`;
+}
+
+// eslint-disable-next-line require-await
+export async function callIframe(iframe: HTMLIFrameElement, action: string) {
+  const callbackAction = getCallbackAction(iframe.dataset.id as string, action);
+  const promise = new Promise<{ value: any; action: string }>((resolve) => {
+    const handleMessage = ({ data }: MessageEvent) => {
+      if (data.action === callbackAction) {
+        window.removeEventListener('message', handleMessage);
+        resolve(data);
+      }
+    };
+    window.addEventListener('message', handleMessage);
+  });
+  iframe?.contentWindow?.postMessage({ action, callback: callbackAction }, '*');
+  return promise;
+}

package/src/Util/index.ts

@@ -5,8 +5,12 @@ import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
 import omitBy from 'lodash/omitBy';
 import pRetry from 'p-retry';
+import Cookies from 'js-cookie';
+import colorConvert from 'color-convert';
+import deepmerge, { type DeepmergeOptions } from '@mui/utils/deepmerge';
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 import type { $TSFixMe, Locale } from '../type';
+import { getFederatedEnabled } from './federated';
 
 let dateTool: $TSFixMe | null = null;
 const IP_V4_REGEX = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/;
@@ -441,16 +445,74 @@ export const isUrl = (str: string) => {
   return /^https?:\/\//.test(str);
 };
 
-const visitorIdKey = '__visitor_id';
+const visitorIdKey = 'vid';
+const visitorIdKeyLegacy = '__visitor_id';
+
 export const getVisitorId = () => {
-  return localStorage.getItem(visitorIdKey);
+  // FIXME: @zhanghan 短期内做一个兼容，确保在 migrate 前的请求能够携带正确的 vid
+  return Cookies.get(visitorIdKey) || localStorage.getItem(visitorIdKeyLegacy);
 };
 
 export const setVisitorId = (value: string | null) => {
   if (value === null) {
-    localStorage.removeItem(visitorIdKey);
+    Cookies.remove(visitorIdKey, {
+      sameSite: 'None',
+      secure: true,
+    });
   } else {
-    localStorage.setItem(visitorIdKey, value);
+    Cookies.set(visitorIdKey, value, {
+      sameSite: 'None',
+      secure: true,
+      expires: 365,
+    });
+  }
+};
+
+export const ensureVisitorId = () => {
+  let visitorId = localStorage.getItem(visitorIdKeyLegacy);
+  if (visitorId) {
+    localStorage.removeItem(visitorIdKeyLegacy);
+    setVisitorId(visitorId);
+  }
+  if (getVisitorId()) {
+    return;
+  }
+
+  if (!getFederatedEnabled()) {
+    try {
+      // 在支持 crypto.randomUUID 的环境中使用
+      if (window.crypto && typeof window.crypto.randomUUID === 'function') {
+        visitorId = window.crypto.randomUUID();
+      } else {
+        // 在不支持 crypto.randomUUID 的环境中生成随机 ID
+        const randomValues = new Uint8Array(16);
+        if (window.crypto && typeof window.crypto.getRandomValues === 'function') {
+          window.crypto.getRandomValues(randomValues);
+        } else {
+          // 降级方案：使用 Math.random 生成
+          for (let i = 0; i < 16; i++) {
+            randomValues[i] = Math.floor(Math.random() * 256);
+          }
+        }
+
+        // 转换为 UUID 格式
+        const hexArray = Array.from(randomValues).map((b) => b.toString(16).padStart(2, '0'));
+        visitorId = [
+          hexArray.slice(0, 4).join(''),
+          hexArray.slice(4, 6).join(''),
+          hexArray.slice(6, 8).join(''),
+          hexArray.slice(8, 10).join(''),
+          hexArray.slice(10, 16).join(''),
+        ].join('-');
+      }
+    } catch (error) {
+      // 如果上述方法都失败，使用时间戳和随机数生成
+      visitorId = `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+    }
+  }
+
+  if (visitorId) {
+    setVisitorId(visitorId);
   }
 };
 
@@ -538,3 +600,39 @@ export const lazyRetry = (fn: () => Promise<any>) =>
 export const cleanedObj = (obj: object) => {
   return omitBy(obj, isNil);
 };
+
+/**
+ * 将十六进制颜色转换为 RGBA
+ * @param hex 十六进制颜色字符串 (例如: "#FF0000" 或 "FF0000")
+ * @param alpha 透明度值 (0-1 之间，默认为 1)
+ * @returns RGBA 颜色字符串 (例如: "rgba(255, 0, 0, 1)")
+ */
+export function hexToRgba(hex: string, alpha = 1) {
+  const [r, g, b] = colorConvert.hex.rgb(hex);
+  // 返回 RGBA 格式
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * 依次对数组中的对象进行深度合并
+ * @param objects - 需要合并的对象数组
+ * @param options - deepmerge 的配置选项
+ * @returns 合并后的对象
+ */
+export function deepmergeAll<T>(objects: T[], options?: DeepmergeOptions): T {
+  if (!Array.isArray(objects)) {
+    throw new Error('First argument should be an array');
+  }
+
+  if (objects.length === 0) {
+    return {} as T;
+  }
+
+  if (objects.length === 1) {
+    return objects[0];
+  }
+
+  return objects.reduce((acc, obj) => {
+    return deepmerge(acc, obj, options);
+  });
+}

package/src/type.d.ts

@@ -25,7 +25,11 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: Record<PaletteMode, Theme>;
+  theme: {
+    prefer?: PaletteMode | 'system';
+    light: Theme;
+    dark: Theme;
+  };
   navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {