@arcblock/ux 2.13.6 → 2.13.8

package/src/Config/config-provider.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, ReactNode, useMemo, useState, useCallback, useEffect } from 'react';
+import { type PaletteMode } from '@mui/material';
 import type { ThemeOptions } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import set from 'lodash/set';
@@ -6,10 +7,9 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, LocaleProviderProps, useLocaleContext } from '../Locale/context';
 import ThemeProvider, { ThemeProviderProps } from '../Theme/theme-provider';
 import { createTheme, useTheme } from '../Theme';
-import { ThemeMode } from '../type';
 
 export interface ConfigContextType {
-  mode: ThemeMode;
+  mode: PaletteMode;
   themeOptions: ThemeOptions;
   toggleMode: () => void;
 }
@@ -18,8 +18,8 @@ const ConfigContext = createContext<ConfigContextType>({} as ConfigContextType);
 const preferThemeModeKey = 'blocklet_theme_prefer';
 
 export function isThemeRecord(
-  theme: ThemeOptions | Record<ThemeMode, ThemeOptions>
-): theme is Record<ThemeMode, ThemeOptions> {
+  theme: ThemeOptions | Record<PaletteMode, ThemeOptions>
+): theme is Record<PaletteMode, ThemeOptions> {
   return 'light' in theme || 'dark' in theme;
 }
 
@@ -27,8 +27,8 @@ export interface ConfigProviderProps
   extends Omit<LocaleProviderProps, 'translations'>,
     Omit<ThemeProviderProps, 'theme'> {
   children: ReactNode;
-  prefer?: ThemeMode;
-  theme?: ThemeOptions | Record<ThemeMode, ThemeOptions>;
+  prefer?: PaletteMode;
+  theme?: ThemeOptions | Record<PaletteMode, ThemeOptions>;
   disableBlockletTheme?: boolean;
   translations?: Record<string, any>;
 }
@@ -51,18 +51,18 @@ export function ConfigProvider({
   onLoadingTranslation,
 }: ConfigProviderProps) {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [mode, setMode] = useState<ThemeMode>(() => {
+  const [mode, setMode] = useState<PaletteMode>(() => {
     if (prefer) {
       return prefer;
     }
 
     // 未启用暗色主题
-    if (!window.blocklet?.USE_DARK_THEME) {
+    if (['1', 'true'].includes(window.blocklet?.USE_DARK_THEME) === false) {
       return 'light';
     }
 
     // 本地缓存
-    const localPrefer = localStorage.getItem(preferThemeModeKey) as ThemeMode;
+    const localPrefer = localStorage.getItem(preferThemeModeKey) as PaletteMode;
     if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
       return localPrefer;
     }

package/src/Theme/theme.ts

@@ -1,12 +1,11 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import { createTheme as _createTheme, Components, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
+import type { PaletteMode } from '@mui/material';
+import { createTheme as _createTheme, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-import type { Typography } from '@mui/material/styles/createTypography';
 import webfontloader from 'webfontloader';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS } from '@blocklet/theme';
 
-import colors from '../Colors';
-import { ThemeMode } from '../type';
 import { cleanedObj } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -17,44 +16,6 @@ import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
 
-// 扩展 Theme
-declare module '@mui/material/styles' {
-  interface Theme {
-    mode?: ThemeMode;
-    themeName?: string;
-    pageWidth?: string;
-    colors?: Record<string, string>;
-    typography: Typography & {
-      useNextVariants: boolean;
-      color: Record<string, string>;
-      button: {
-        fontWeight?: number;
-      };
-    };
-  }
-  interface ThemeOptions {
-    themeName?: string;
-    mode?: ThemeMode;
-    pageWidth?: string;
-    colors?: Record<string, string>;
-    /** @deprecated 请使用 components */
-    overrides?: Components<Omit<Theme, 'components'>>;
-  }
-  interface TypeText {
-    hint: string;
-  }
-}
-// 扩展 TypographyOptions
-declare module '@mui/material/styles/createTypography' {
-  interface TypographyOptions {
-    useNextVariants?: boolean;
-    color?: Record<string, string>;
-  }
-}
-
-// 默认深色主题
-const defaultDarkTheme = _createTheme({ palette: { mode: 'dark' } });
-
 // 收集字体配置
 export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<string> = new Set()): Set<string> {
   if (!obj || typeof obj !== 'object') return fontSet;
@@ -78,8 +39,7 @@ export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<
 }
 
 // 动态加载字体
-const defaultFonts = ['Roboto', 'Helvetica', 'Arial', 'sans-serif']; // 后三者是系统字体，无需动态加载
-const prevFonts = new Set<string>(defaultFonts.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
+const prevFonts = new Set<string>(DEFAULT_FONTS.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
 export function loadFonts(fonts: string[]) {
   // 过滤出未加载的字体
   const unloadedFonts = fonts.filter((font) => !prevFonts.has(font));
@@ -112,105 +72,22 @@ export function loadFonts(fonts: string[]) {
 }
 
 // 创建默认主题配置
-export function createDefaultThemeOptions(mode: ThemeMode = 'light'): ThemeOptions {
-  const result: ThemeOptions = {
-    palette: {
-      mode,
-      ...colors,
-      background: {
-        paper: colors.common.white,
-        default: colors.background.default,
-      },
-    },
-    typography: {
-      fontFamily: defaultFonts.join(','),
-      useNextVariants: true,
-      color: {
-        // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
-        // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
-        //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
-        //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
-        main: mode === 'light' ? '#222222' : colors.common.white,
-        gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
-      },
-      // button 默认使用粗体
-      button: {
-        fontWeight: 700,
-      },
-    },
-    components: {
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-          },
-        },
-      },
-      MuiButtonGroup: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-          },
-        },
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: ({ ownerState }) => ({
-            ...(ownerState.size === 'small'
-              ? {
-                  borderBottomWidth: '0',
-                  paddingTop: '8px',
-                  paddingBottom: '8px',
-                  paddingLeft: 0,
-                  paddingRight: '20px',
-                }
-              : {
-                  borderBottomWidth: '0',
-                  paddingTop: '14px',
-                  paddingBottom: '14px',
-                  paddingLeft: 0,
-                  paddingRight: '30px',
-                }),
-          }),
-          head: {
-            textTransform: 'uppercase',
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
-          },
-          body: {
-            color: mode === 'light' ? colors.grey[900] : colors.grey[300],
-          },
-        },
-      },
-    },
-  };
-
-  // 深色主题
+export function createDefaultThemeOptions(mode: PaletteMode = 'light') {
   if (mode === 'dark') {
-    result.palette = {
-      ...defaultDarkTheme.palette,
-      background: {
-        paper: colors.grey[900],
-        default: colors.grey[900],
-      },
-    };
+    return BLOCKLET_THEME_DARK;
   }
 
-  return result;
+  return BLOCKLET_THEME_LIGHT;
 }
 
-// https://material-ui.com/customization/default-theme/
-export const create = ({
-  disableBlockletTheme = false,
-  mode = 'light',
-  pageWidth = 'md',
-  overrides,
-  // original theme options
-  palette,
-  components,
-  ...rest
-}: ThemeOptions & { disableBlockletTheme?: boolean } = {}) => {
-  const userThemeOptions: ThemeOptions = {
-    themeName: 'ArcBlock',
+export interface UserThemeOptions extends ThemeOptions {
+  disableBlockletTheme?: boolean;
+}
+
+// 主要处理 mode 和 overrides
+const normalizeUserThemeOptions = ({ mode = 'light', palette, components, overrides, ...rest }: UserThemeOptions) => {
+  return {
+    mode,
     palette: {
       ...palette,
       mode,
@@ -219,43 +96,55 @@ export const create = ({
       ...overrides,
       ...components,
     },
-    // @TODO 考虑使用 theme.shape.pageWidth
-    pageWidth,
-    // @TODO 考虑使用 theme.palette.common
-    colors: {
-      white: '#FFFFFF',
-      dark: '#4A707C',
-      gray: '#222222',
-      minor: '#9B9B9B',
-      darkText: '#DCDCDC',
-      background: '#F7F8F8',
-      yellow: '#FFCF71',
-      green: '#44cdc6',
-      red: '#D0021B',
-      blue: '#4E6AF6',
-      primary: '#222222',
-      black: '#222222',
-      secondary: '#44cdc6',
-      mint: '#44cdc6',
-      textSecondary: '#4A4A4A',
-      active: '#5b9025',
-      danger: '#D0021B',
-      lightGrey: '#BCBCBC',
-    },
-    // @deprecated use theme.palette.mode
-    mode,
     ...rest,
   };
-  // Blocklet Server 后台配置的全局主题
+};
+
+const defaultUserThemeOptions: UserThemeOptions = {
+  themeName: 'ArcBlock',
+  pageWidth: 'md',
+  disableBlockletTheme: false,
+  // @deprecated use theme.palette
+  colors: {
+    white: '#FFFFFF',
+    dark: '#4A707C',
+    gray: '#222222',
+    minor: '#9B9B9B',
+    darkText: '#DCDCDC',
+    background: '#F7F8F8',
+    yellow: '#FFCF71',
+    green: '#44cdc6',
+    red: '#D0021B',
+    blue: '#4E6AF6',
+    primary: '#222222',
+    black: '#222222',
+    secondary: '#44cdc6',
+    mint: '#44cdc6',
+    textSecondary: '#4A4A4A',
+    active: '#5b9025',
+    danger: '#D0021B',
+    lightGrey: '#BCBCBC',
+  },
+};
+
+// https://material-ui.com/customization/default-theme/
+export const create = (...args: UserThemeOptions[]) => {
+  const userThemeOptions = args.reduce(
+    (acc, curr) => deepmerge(acc, normalizeUserThemeOptions(curr)),
+    normalizeUserThemeOptions(defaultUserThemeOptions)
+  );
+  const { mode, disableBlockletTheme } = userThemeOptions;
   const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  // UX Theme 默认配置
   const defaultThemeOptions = createDefaultThemeOptions(mode);
+
   // 合并配置
   let mergedThemeOptions = defaultThemeOptions;
   if (!disableBlockletTheme) {
     mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
   }
   mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
+
+  // 创建主题
   const theme = _createTheme(mergedThemeOptions);
 
   // 异步加载字体
@@ -263,7 +152,7 @@ export const create = ({
   loadFonts(Array.from(fonts));
 
   /**
-   * 响应式字体，配置后，theme.typography 会变为下面的结构
+   * 支持响应式字体，theme.typography.$variant 中会添加 @media 分支，比如
    * {
    *  "h1": {
    *    "fontSize": "3rem",

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { UserCardProps, InfoType } from '../types';
+import { UserCardProps, InfoType, User } from '../types';
 import TooltipAvatar from '../Content/tooltip-avatar';
 
-interface AvatarOnlyCardProps extends UserCardProps {
+interface AvatarOnlyCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   renderCardContent: () => React.ReactNode;
   shouldShowHoverCard: boolean;
 }

package/src/UserCard/Cards/basic-info.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { InfoType, UserCardProps } from '../types';
+import { InfoType, UserCardProps, User } from '../types';
 import MinimalContent from '../Content/minimal';
 import BasicContent from '../Content/basic';
 
-interface BasicCardProps extends UserCardProps {
+interface BasicCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
   isFull?: boolean;
@@ -12,14 +13,25 @@ interface BasicCardProps extends UserCardProps {
 
 // 详细卡片模式下的Basic渲染组件
 function BasicCard(props: BasicCardProps) {
-  const { user, avatarSize = 40, renderCustomContent, isFull = true, infoType = InfoType.Minimal, ...rest } = props;
+  const {
+    user,
+    avatarSize = 40,
+    renderCustomContent,
+    isFull = true,
+    infoType = InfoType.Minimal,
+    renderFields,
+    popupRenderFields,
+    ...rest
+  } = props;
 
   return (
     <Box display="flex" flexDirection="column" width="100%" sx={{ flex: 1, minWidth: 0 }}>
       <MinimalContent user={user} avatarSize={avatarSize} {...rest} />
 
-      {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} />}
-      {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
+      {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} renderFields={renderFields} />}
+      <Box className="user-card__footer">
+        {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
+      </Box>
     </Box>
   );
 }

package/src/UserCard/Cards/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { UserCardProps, InfoType } from '../types';
+import { UserCardProps, InfoType, User } from '../types';
 import NameOnlyCard from './name-only';
 import BasicCard from './basic-info';
 
-interface DetailedCardProps extends UserCardProps {
+interface DetailedCardProps extends Omit<UserCardProps, 'user'> {
+  user: User;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
 }

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

@@ -1,14 +1,14 @@
 import { Typography } from '@mui/material';
-import { UserCardProps } from '../types';
+import { UserCardProps, User } from '../types';
 import { renderAvatar } from '../components';
 
 // 详细卡片模式下的NameOnly渲染组件
-function NameOnlyCard(props: UserCardProps) {
-  const { user, avatarSize = 48 } = props;
+function NameOnlyCard(props: Omit<UserCardProps, 'user'> & { user: User }) {
+  const { user, avatarSize = 48, onAvatarClick } = props;
 
   return (
     <>
-      {renderAvatar(user, avatarSize, props.avatarProps)}
+      {renderAvatar(user, avatarSize, props.avatarProps, onAvatarClick)}
       <Typography variant="body1">{user.fullName || user.email || user.did}</Typography>
     </>
   );

package/src/UserCard/Container/dialog.tsx

@@ -23,7 +23,7 @@ function DialogContainer({ children, sx }: DialogContainerProps) {
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: 2,
-          maxWidth: 400,
+          maxWidth: 500,
           minWidth: 320,
           display: 'flex',
         },