@arcblock/ux 2.12.72 → 2.12.73

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

@@ -13,12 +13,13 @@ export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translat
     children: ReactNode;
     prefer?: ThemeMode;
     theme?: ThemeOptions | Record<ThemeMode, ThemeOptions>;
+    disableBlockletTheme?: boolean;
     translations?: Record<string, any>;
 }
 /**
  * 集中化配置
  */
-export declare function ConfigProvider({ children, prefer, theme: themeOptions, injectFirst, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfigProvider({ children, prefer, theme: themeOptions, disableBlockletTheme, injectFirst, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ConfigProvider {
     var useConfig: typeof import("./config-provider").useConfig;
 }

package/lib/Config/config-provider.js

@@ -19,6 +19,7 @@ export function ConfigProvider({
   // theme config
   prefer,
   theme: themeOptions,
+  disableBlockletTheme = false,
   injectFirst,
   // locale config
   locale,
@@ -65,8 +66,11 @@ export function ConfigProvider({
     return result;
   }, [mode, themeOptions]);
   const theme = useMemo(() => {
-    return createTheme(_themeOptions);
-  }, [_themeOptions]);
+    return createTheme({
+      ..._themeOptions,
+      disableBlockletTheme
+    });
+  }, [_themeOptions, disableBlockletTheme]);
   const toggleMode = useCallback(() => {
     const newMode = mode === 'light' ? 'dark' : 'light';
     setMode(newMode);

package/lib/Theme/theme.d.ts

@@ -1,10 +1,13 @@
 import { Components, type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import type { Typography } from '@mui/material/styles/createTypography';
-import '@fontsource/roboto/400';
-import '@fontsource/roboto/500';
-import '@fontsource/roboto/700';
 import { ThemeMode } from '../type';
+import '@fontsource/roboto/latin-400.css';
+import '@fontsource/roboto/latin-500.css';
+import '@fontsource/roboto/latin-700.css';
+import '@fontsource/roboto/latin-ext-400.css';
+import '@fontsource/roboto/latin-ext-500.css';
+import '@fontsource/roboto/latin-ext-700.css';
 declare module '@mui/material/styles' {
     interface Theme {
         mode?: ThemeMode;
@@ -42,6 +45,10 @@ export declare function collectFontFamilies(obj?: {
 }, fontSet?: Set<string>): Set<string>;
 export declare function loadFonts(fonts: string[]): Promise<boolean>;
 export declare function createDefaultThemeOptions(mode?: ThemeMode): ThemeOptions;
-export declare const create: ({ mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions) => import("@mui/material/styles").Theme;
-export declare const createTheme: ({ mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions) => import("@mui/material/styles").Theme;
+export declare const create: ({ disableBlockletTheme, mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions & {
+    disableBlockletTheme?: boolean;
+}) => import("@mui/material/styles").Theme;
+export declare const createTheme: ({ disableBlockletTheme, mode, pageWidth, overrides, palette, components, ...rest }?: ThemeOptions & {
+    disableBlockletTheme?: boolean;
+}) => import("@mui/material/styles").Theme;
 export { deepmerge };

package/lib/Theme/theme.js

@@ -3,16 +3,17 @@
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
-// 为了避免加载全量的字体导致打包后体积太大，目前只选择了 MUI 默认的 Roboto 字体
-// eslint-disable-next-line import/no-unresolved
-import '@fontsource/roboto/400';
-// eslint-disable-next-line import/no-unresolved
-import '@fontsource/roboto/500';
-// eslint-disable-next-line import/no-unresolved
-import '@fontsource/roboto/700';
 import colors from '../Colors';
 import { cleanedObj } from '../Util';
 
+// 默认只加载最基本的 roboto latin 字体
+import '@fontsource/roboto/latin-400.css';
+import '@fontsource/roboto/latin-500.css';
+import '@fontsource/roboto/latin-700.css';
+import '@fontsource/roboto/latin-ext-400.css';
+import '@fontsource/roboto/latin-ext-500.css';
+import '@fontsource/roboto/latin-ext-700.css';
+
 // 扩展 Theme
 
 // 扩展 TypographyOptions
@@ -39,7 +40,8 @@ export function collectFontFamilies(obj, fontSet = new Set()) {
 }
 
 // 动态加载字体
-const prevFonts = new Set(['Roboto', 'inherit']);
+const defaultFonts = ['Roboto', 'Helvetica', 'Arial', 'sans-serif']; // 后三者是系统字体，无需动态加载
+const prevFonts = new Set(defaultFonts.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
 export function loadFonts(fonts) {
   // 过滤出未加载的字体
   const unloadedFonts = fonts.filter(font => !prevFonts.has(font));
@@ -51,6 +53,10 @@ export function loadFonts(fonts) {
 
   // record
   unloadedFonts.forEach(font => prevFonts.add(font));
+
+  // support font-display: swap
+  const lastFontIndex = unloadedFonts.length - 1;
+  unloadedFonts[lastFontIndex] = `${unloadedFonts[lastFontIndex]}&display=swap`;
   return new Promise(resolve => {
     webfontloader.load({
       google: {
@@ -78,6 +84,7 @@ export function createDefaultThemeOptions(mode = 'light') {
       }
     },
     typography: {
+      fontFamily: defaultFonts.join(','),
       useNextVariants: true,
       color: {
         // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
@@ -153,6 +160,7 @@ export function createDefaultThemeOptions(mode = 'light') {
 
 // https://material-ui.com/customization/default-theme/
 export const create = ({
+  disableBlockletTheme = false,
   mode = 'light',
   pageWidth = 'md',
   overrides,
@@ -200,10 +208,14 @@ export const create = ({
   };
   // Blocklet Server 后台配置的全局主题
   const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  // choose mode
+  // UX Theme 默认配置
   const defaultThemeOptions = createDefaultThemeOptions(mode);
-  // 同官方合并行为
-  const mergedThemeOptions = deepmerge(deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions)), cleanedObj(userThemeOptions));
+  // 合并配置
+  let mergedThemeOptions = defaultThemeOptions;
+  if (!disableBlockletTheme) {
+    mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
+  }
+  mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
   const theme = _createTheme(mergedThemeOptions);
 
   // 异步加载字体

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.72",
+  "version": "2.12.73",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,14 +70,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "9050a7670edd33bb1edd1014770a00ddcbc2bd03",
+  "gitHead": "74e3edd3e04e1c18ac20951cfad0fa06e0743531",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.72",
-    "@arcblock/nft-display": "^2.12.72",
-    "@arcblock/react-hooks": "^2.12.72",
+    "@arcblock/icons": "^2.12.73",
+    "@arcblock/nft-display": "^2.12.73",
+    "@arcblock/react-hooks": "^2.12.73",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@fontsource/roboto": "^5.2.5",
+    "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",

package/src/Config/config-provider.tsx

@@ -29,6 +29,7 @@ export interface ConfigProviderProps
   children: ReactNode;
   prefer?: ThemeMode;
   theme?: ThemeOptions | Record<ThemeMode, ThemeOptions>;
+  disableBlockletTheme?: boolean;
   translations?: Record<string, any>;
 }
 
@@ -40,6 +41,7 @@ export function ConfigProvider({
   // theme config
   prefer,
   theme: themeOptions,
+  disableBlockletTheme = false,
   injectFirst,
   // locale config
   locale,
@@ -87,8 +89,8 @@ export function ConfigProvider({
   }, [mode, themeOptions]);
 
   const theme = useMemo(() => {
-    return createTheme(_themeOptions);
-  }, [_themeOptions]);
+    return createTheme({ ..._themeOptions, disableBlockletTheme });
+  }, [_themeOptions, disableBlockletTheme]);
 
   const toggleMode = useCallback(() => {
     const newMode = mode === 'light' ? 'dark' : 'light';

package/src/Theme/theme.ts

@@ -4,18 +4,19 @@ import { createTheme as _createTheme, Components, responsiveFontSizes, type Them
 import { deepmerge } from '@mui/utils';
 import type { Typography } from '@mui/material/styles/createTypography';
 import webfontloader from 'webfontloader';
-// 为了避免加载全量的字体导致打包后体积太大，目前只选择了 MUI 默认的 Roboto 字体
-// eslint-disable-next-line import/no-unresolved
-import '@fontsource/roboto/400';
-// eslint-disable-next-line import/no-unresolved
-import '@fontsource/roboto/500';
-// eslint-disable-next-line import/no-unresolved
-import '@fontsource/roboto/700';
 
 import colors from '../Colors';
 import { ThemeMode } from '../type';
 import { cleanedObj } from '../Util';
 
+// 默认只加载最基本的 roboto latin 字体
+import '@fontsource/roboto/latin-400.css';
+import '@fontsource/roboto/latin-500.css';
+import '@fontsource/roboto/latin-700.css';
+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 {
@@ -77,7 +78,8 @@ export function collectFontFamilies(obj?: { fontFamily?: string }, fontSet: Set<
 }
 
 // 动态加载字体
-const prevFonts = new Set<string>(['Roboto', 'inherit']);
+const defaultFonts = ['Roboto', 'Helvetica', 'Arial', 'sans-serif']; // 后三者是系统字体，无需动态加载
+const prevFonts = new Set<string>(defaultFonts.concat('inherit')); // inherit 属于 MUI 特殊值，无需动态加载
 export function loadFonts(fonts: string[]) {
   // 过滤出未加载的字体
   const unloadedFonts = fonts.filter((font) => !prevFonts.has(font));
@@ -90,6 +92,10 @@ export function loadFonts(fonts: string[]) {
   // record
   unloadedFonts.forEach((font) => prevFonts.add(font));
 
+  // support font-display: swap
+  const lastFontIndex = unloadedFonts.length - 1;
+  unloadedFonts[lastFontIndex] = `${unloadedFonts[lastFontIndex]}&display=swap`;
+
   return new Promise<boolean>((resolve) => {
     webfontloader.load({
       google: {
@@ -117,6 +123,7 @@ export function createDefaultThemeOptions(mode: ThemeMode = 'light'): ThemeOptio
       },
     },
     typography: {
+      fontFamily: defaultFonts.join(','),
       useNextVariants: true,
       color: {
         // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
@@ -193,6 +200,7 @@ export function createDefaultThemeOptions(mode: ThemeMode = 'light'): ThemeOptio
 
 // https://material-ui.com/customization/default-theme/
 export const create = ({
+  disableBlockletTheme = false,
   mode = 'light',
   pageWidth = 'md',
   overrides,
@@ -200,7 +208,7 @@ export const create = ({
   palette,
   components,
   ...rest
-}: ThemeOptions = {}) => {
+}: ThemeOptions & { disableBlockletTheme?: boolean } = {}) => {
   const userThemeOptions: ThemeOptions = {
     themeName: 'ArcBlock',
     palette: {
@@ -240,14 +248,14 @@ export const create = ({
   };
   // Blocklet Server 后台配置的全局主题
   const blockletThemeOptions = window.blocklet?.theme?.[mode] ?? {};
-  // choose mode
+  // UX Theme 默认配置
   const defaultThemeOptions = createDefaultThemeOptions(mode);
-  // 同官方合并行为
-  const mergedThemeOptions = deepmerge(
-    deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions)),
-    cleanedObj(userThemeOptions)
-  );
-
+  // 合并配置
+  let mergedThemeOptions = defaultThemeOptions;
+  if (!disableBlockletTheme) {
+    mergedThemeOptions = deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions));
+  }
+  mergedThemeOptions = deepmerge(mergedThemeOptions, cleanedObj(userThemeOptions));
   const theme = _createTheme(mergedThemeOptions);
 
   // 异步加载字体