@arcblock/ux 2.12.54 → 2.12.56

package/lib/Config/config-provider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import { createContext, useContext, useMemo, useState, useCallback, useEffect } from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import set from 'lodash/set';
 import { LocaleProvider, useLocaleContext } from '../Locale/context';
@@ -28,11 +28,14 @@ export function ConfigProvider({
 }) {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [mode, setMode] = useState(() => {
-    const preferMode = localStorage.getItem(preferThemeModeKey);
-    if (preferMode && (preferMode === 'light' || preferMode === 'dark')) {
-      return preferMode;
+    if (prefer) {
+      return prefer;
     }
-    return prefer || (prefersDarkMode ? 'dark' : 'light');
+    const localPrefer = localStorage.getItem(preferThemeModeKey);
+    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
+      return localPrefer;
+    }
+    return prefersDarkMode ? 'dark' : 'light';
   });
   const _themeOptions = useMemo(() => {
     let result = {};
@@ -64,6 +67,13 @@ export function ConfigProvider({
     themeOptions: _themeOptions,
     toggleMode
   }), [mode, _themeOptions, toggleMode]);
+
+  // change prefer manually
+  useEffect(() => {
+    if (prefer) {
+      setMode(prefer);
+    }
+  }, [prefer, setMode]);
   return /*#__PURE__*/_jsx(ConfigContext.Provider, {
     value: config,
     children: /*#__PURE__*/_jsx(LocaleProvider, {

package/lib/Datatable/CustomToolbar.js

@@ -32,6 +32,7 @@ export default function CustomToolbar(props) {
   const toolbarId = useRef(Math.random().toString(32).slice(2));
   const [searchOpened, setSearchOpened] = useState(false);
   const {
+    customPreButtons,
     customButtons,
     loading,
     disabled
@@ -129,12 +130,12 @@ export default function CustomToolbar(props) {
       }
     });
   }
-  const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
+  const showMore = [...customPreButtons, !hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
   const allPops = [];
 
   // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
   // The right-hand button of the form toolbar in desktop mode
-  const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
+  const toolbarButtons = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
     if (/*#__PURE__*/isValidElement(e)) {
       return e;
     }
@@ -189,7 +190,7 @@ export default function CustomToolbar(props) {
   });
 
   // The toolbar menu in the mobile to replace toolbarButtons
-  const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
+  const menuItems = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
     const popId = getPopId(index);
     let content;
     if (/*#__PURE__*/isValidElement(e)) {

package/lib/Datatable/DatatableContext.js

@@ -10,12 +10,15 @@ function DatatableProvider({
   children
 }) {
   const [customButtons, setCustomButtons] = useState([]);
+  const [customPreButtons, setCustomPreButtons] = useState([]);
   const [loading, setLoading] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [filterLabel, setFilterLabel] = useState('Filter');
   const value = {
     customButtons,
     setCustomButtons,
+    customPreButtons,
+    setCustomPreButtons,
     filterLabel,
     setFilterLabel,
     loading,

package/lib/Datatable/index.d.ts

@@ -29,6 +29,7 @@ export type DataTableProps = {
     } & import("mui-datatables").MUIDataTableOptions;
     style?: import("react").CSSProperties;
     customButtons?: Array<DataTableCustomButton>;
+    customPreButtons?: Array<DataTableCustomButton>;
     onChange?: (state: DataTableState, action: string) => void | Promise<void>;
     loading?: false | true;
     disabled?: false | true;

package/lib/Datatable/index.js

@@ -48,6 +48,7 @@ import { styled } from '../Theme';
  *  options?: { searchDebounceTime?: number } & import('mui-datatables').MUIDataTableOptions,
  *  style?: import('react').CSSProperties,
  *  customButtons?: Array<DataTableCustomButton>,
+ *  customPreButtons?: Array<DataTableCustomButton>,
  *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
  *  loading?: false | true,
  *  disabled?: false | true,
@@ -166,6 +167,7 @@ function ReDataTable({
   options,
   // The options object is usually a property supported by mui-datatable
   style,
+  customPreButtons,
   customButtons,
   onChange,
   loading,
@@ -181,6 +183,7 @@ function ReDataTable({
 }) {
   const oldState = useRef(null);
   const {
+    setCustomPreButtons,
     setCustomButtons,
     setFilterLabel,
     setLoading,
@@ -271,6 +274,7 @@ function ReDataTable({
     return e;
   });
   useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
+  useEffect(() => setCustomPreButtons(customPreButtons || []), [customPreButtons]);
   useEffect(() => setLoading(loading), [loading]);
   useEffect(() => setDisabled(disabled), [disabled]);
   let emptyEl;
@@ -435,6 +439,7 @@ ReDataTable.propTypes = {
   locale: PropTypes.string,
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
+  customPreButtons: PropTypes.array,
   customButtons: PropTypes.array,
   onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   stripped: PropTypes.bool,
@@ -451,6 +456,7 @@ ReDataTable.defaultProps = {
   locale: 'en',
   loading: false,
   disabled: false,
+  customPreButtons: [],
   customButtons: [],
   onChange: '',
   stripped: false,

package/lib/Theme/theme.d.ts

@@ -1,13 +1,8 @@
 import { Components, type ThemeOptions } from '@mui/material/styles';
 import type { Typography } from '@mui/material/styles/createTypography';
-import '@fontsource/inter/latin-300.css';
-import '@fontsource/inter/latin-400.css';
-import '@fontsource/inter/latin-500.css';
-import '@fontsource/inter/latin-700.css';
-import '@fontsource/inter/latin-ext-300.css';
-import '@fontsource/inter/latin-ext-400.css';
-import '@fontsource/inter/latin-ext-500.css';
-import '@fontsource/inter/latin-ext-700.css';
+import '@fontsource/roboto/400';
+import '@fontsource/roboto/500';
+import '@fontsource/roboto/700';
 import { ThemeMode } from '../type';
 declare module '@mui/material/styles' {
     interface Theme {
@@ -39,11 +34,12 @@ declare module '@mui/material/styles/createTypography' {
     interface TypographyOptions {
         useNextVariants?: boolean;
         color?: Record<string, string>;
-        button?: {
-            fontWeight?: number;
-        };
     }
 }
+export declare function collectFontFamilies(obj?: {
+    fontFamily?: string;
+}, 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;

package/lib/Theme/theme.js

@@ -2,15 +2,14 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
-// 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
-import '@fontsource/inter/latin-300.css';
-import '@fontsource/inter/latin-400.css';
-import '@fontsource/inter/latin-500.css';
-import '@fontsource/inter/latin-700.css';
-import '@fontsource/inter/latin-ext-300.css';
-import '@fontsource/inter/latin-ext-400.css';
-import '@fontsource/inter/latin-ext-500.css';
-import '@fontsource/inter/latin-ext-700.css';
+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';
 
@@ -18,12 +17,56 @@ import { cleanedObj } from '../Util';
 
 // 扩展 TypographyOptions
 
-const muiDarkTheme = _createTheme({
+// 默认深色主题
+const defaultDarkTheme = _createTheme({
   palette: {
     mode: 'dark'
   }
 });
-const DEFAULT_FONT_FAMILY = ['Inter', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',');
+
+// 收集字体配置
+export function collectFontFamilies(obj, fontSet = new Set()) {
+  if (!obj || typeof obj !== 'object') return fontSet;
+  if (typeof obj.fontFamily === 'string') {
+    obj.fontFamily.replace(/"/g, '').split(',').map(font => font.trim()).filter(Boolean).forEach(font => fontSet.add(font));
+  }
+  Object.values(obj).forEach(value => {
+    if (typeof value === 'object') {
+      collectFontFamilies(value, fontSet);
+    }
+  });
+  return fontSet;
+}
+
+// 动态加载字体
+const prevFonts = new Set(['Roboto', 'inherit']);
+export function loadFonts(fonts) {
+  // 过滤出未加载的字体
+  const unloadedFonts = fonts.filter(font => !prevFonts.has(font));
+
+  // 如果所有字体都已加载，直接返回
+  if (unloadedFonts.length === 0) {
+    return Promise.resolve(true);
+  }
+
+  // record
+  unloadedFonts.forEach(font => prevFonts.add(font));
+  return new Promise(resolve => {
+    webfontloader.load({
+      google: {
+        families: unloadedFonts
+      },
+      active: () => resolve(true),
+      inactive: () => resolve(true),
+      fontinactive: (familyName, fvd) => {
+        prevFonts.delete(familyName);
+        console.warn(`font ${familyName} ${fvd} download failed`);
+      }
+    });
+  });
+}
+
+// 创建默认主题配置
 export function createDefaultThemeOptions(mode = 'light') {
   const result = {
     palette: {
@@ -44,7 +87,6 @@ export function createDefaultThemeOptions(mode = 'light') {
         main: mode === 'light' ? '#222222' : colors.common.white,
         gray: mode === 'light' ? colors.grey[500] : colors.grey[300]
       },
-      fontFamily: DEFAULT_FONT_FAMILY,
       // button 默认使用粗体
       button: {
         fontWeight: 700
@@ -95,10 +137,11 @@ export function createDefaultThemeOptions(mode = 'light') {
       }
     }
   };
+
   // 深色主题
   if (mode === 'dark') {
     result.palette = {
-      ...muiDarkTheme.palette,
+      ...defaultDarkTheme.palette,
       background: {
         paper: colors.grey[900],
         default: colors.grey[900]
@@ -163,6 +206,10 @@ export const create = ({
   const mergedThemeOptions = deepmerge(deepmerge(defaultThemeOptions, cleanedObj(blockletThemeOptions)), cleanedObj(userThemeOptions));
   const theme = _createTheme(mergedThemeOptions);
 
+  // 异步加载字体
+  const fonts = collectFontFamilies(theme.typography);
+  loadFonts(Array.from(fonts));
+
   /**
    * 响应式字体，配置后，theme.typography 会变为下面的结构
    * {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.54",
+  "version": "2.12.56",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,6 +47,7 @@
     "@types/pako": "^2.0.3",
     "@types/react": "^18.3.4",
     "@types/react-helmet": "^6.1.11",
+    "@types/webfontloader": "^1.6.38",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
     "babel-jest": "29",
@@ -69,14 +70,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "fa8ee46123aa7dc5b6a79a9c75d08cb43857ad2c",
+  "gitHead": "dad60e296d45cc578ede5c25e2c051da0d5e3c5a",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.54",
-    "@arcblock/nft-display": "^2.12.54",
-    "@arcblock/react-hooks": "^2.12.54",
+    "@arcblock/icons": "^2.12.56",
+    "@arcblock/nft-display": "^2.12.56",
+    "@arcblock/react-hooks": "^2.12.56",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@fontsource/inter": "^5.0.16",
+    "@fontsource/roboto": "^5.2.5",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -123,6 +124,7 @@
     "topojson-client": "^3.1.0",
     "type-fest": "^4.28.0",
     "validator": "^13.9.0",
-    "versor": "^0.0.4"
+    "versor": "^0.0.4",
+    "webfontloader": "^1.6.28"
   }
 }

package/src/Config/config-provider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, ReactNode, useMemo, useState, useCallback } from 'react';
+import { createContext, useContext, ReactNode, useMemo, useState, useCallback, useEffect } from 'react';
 import type { ThemeOptions } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import set from 'lodash/set';
@@ -49,11 +49,16 @@ export function ConfigProvider({
 }: ConfigProviderProps) {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [mode, setMode] = useState<ThemeMode>(() => {
-    const preferMode = localStorage.getItem(preferThemeModeKey) as ThemeMode;
-    if (preferMode && (preferMode === 'light' || preferMode === 'dark')) {
-      return preferMode;
+    if (prefer) {
+      return prefer;
     }
-    return prefer || (prefersDarkMode ? 'dark' : 'light');
+
+    const localPrefer = localStorage.getItem(preferThemeModeKey) as ThemeMode;
+    if (localPrefer && (localPrefer === 'light' || localPrefer === 'dark')) {
+      return localPrefer;
+    }
+
+    return prefersDarkMode ? 'dark' : 'light';
   });
 
   const _themeOptions = useMemo(() => {
@@ -92,6 +97,13 @@ export function ConfigProvider({
     [mode, _themeOptions, toggleMode]
   );
 
+  // change prefer manually
+  useEffect(() => {
+    if (prefer) {
+      setMode(prefer);
+    }
+  }, [prefer, setMode]);
+
   return (
     <ConfigContext.Provider value={config}>
       <LocaleProvider

package/src/Datatable/CustomToolbar.jsx

@@ -32,7 +32,7 @@ export default function CustomToolbar(props) {
   const isMobile = useMobile();
   const toolbarId = useRef(Math.random().toString(32).slice(2));
   const [searchOpened, setSearchOpened] = useState(false);
-  const { customButtons, loading, disabled } = useDatatableContext();
+  const { customPreButtons, customButtons, loading, disabled } = useDatatableContext();
 
   const {
     data,
@@ -136,13 +136,14 @@ export default function CustomToolbar(props) {
     });
   }
 
-  const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter((e) => !!e).length > 1 && isMobile;
+  const showMore =
+    [...customPreButtons, !hidePrint, ...defaultButtons, ...customButtons].filter((e) => !!e).length > 1 && isMobile;
 
   const allPops = [];
 
   // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
   // The right-hand button of the form toolbar in desktop mode
-  const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
+  const toolbarButtons = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
     if (isValidElement(e)) {
       return e;
     }
@@ -198,7 +199,7 @@ export default function CustomToolbar(props) {
   });
 
   // The toolbar menu in the mobile to replace toolbarButtons
-  const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
+  const menuItems = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
     const popId = getPopId(index);
 
     let content;

package/src/Datatable/DatatableContext.jsx

@@ -7,6 +7,7 @@ const { Provider } = DatatableContext;
 // eslint-disable-next-line react/prop-types
 function DatatableProvider({ children }) {
   const [customButtons, setCustomButtons] = useState([]);
+  const [customPreButtons, setCustomPreButtons] = useState([]);
   const [loading, setLoading] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [filterLabel, setFilterLabel] = useState('Filter');
@@ -14,6 +15,8 @@ function DatatableProvider({ children }) {
   const value = {
     customButtons,
     setCustomButtons,
+    customPreButtons,
+    setCustomPreButtons,
     filterLabel,
     setFilterLabel,
     loading,

package/src/Datatable/index.jsx

@@ -47,6 +47,7 @@ import { styled } from '../Theme';
  *  options?: { searchDebounceTime?: number } & import('mui-datatables').MUIDataTableOptions,
  *  style?: import('react').CSSProperties,
  *  customButtons?: Array<DataTableCustomButton>,
+ *  customPreButtons?: Array<DataTableCustomButton>,
  *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
  *  loading?: false | true,
  *  disabled?: false | true,
@@ -166,6 +167,7 @@ function ReDataTable({
   locale,
   options, // The options object is usually a property supported by mui-datatable
   style,
+  customPreButtons,
   customButtons,
   onChange,
   loading,
@@ -180,7 +182,7 @@ function ReDataTable({
   ...rest
 }) {
   const oldState = useRef(null);
-  const { setCustomButtons, setFilterLabel, setLoading, setDisabled } = useDatatableContext();
+  const { setCustomPreButtons, setCustomButtons, setFilterLabel, setLoading, setDisabled } = useDatatableContext();
 
   const disabledCellStyle = {
     cursor: 'not-allowed',
@@ -276,6 +278,7 @@ function ReDataTable({
   });
 
   useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
+  useEffect(() => setCustomPreButtons(customPreButtons || []), [customPreButtons]);
   useEffect(() => setLoading(loading), [loading]);
   useEffect(() => setDisabled(disabled), [disabled]);
 
@@ -420,6 +423,7 @@ ReDataTable.propTypes = {
   locale: PropTypes.string,
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
+  customPreButtons: PropTypes.array,
   customButtons: PropTypes.array,
   onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   stripped: PropTypes.bool,
@@ -437,6 +441,7 @@ ReDataTable.defaultProps = {
   locale: 'en',
   loading: false,
   disabled: false,
+  customPreButtons: [],
   customButtons: [],
   onChange: '',
   stripped: false,

package/src/Theme/theme.ts

@@ -3,15 +3,15 @@
 import { createTheme as _createTheme, Components, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import type { Typography } from '@mui/material/styles/createTypography';
-// 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
-import '@fontsource/inter/latin-300.css';
-import '@fontsource/inter/latin-400.css';
-import '@fontsource/inter/latin-500.css';
-import '@fontsource/inter/latin-700.css';
-import '@fontsource/inter/latin-ext-300.css';
-import '@fontsource/inter/latin-ext-400.css';
-import '@fontsource/inter/latin-ext-500.css';
-import '@fontsource/inter/latin-ext-700.css';
+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';
@@ -48,29 +48,64 @@ declare module '@mui/material/styles/createTypography' {
   interface TypographyOptions {
     useNextVariants?: boolean;
     color?: Record<string, string>;
-    button?: {
-      fontWeight?: number;
-    };
   }
 }
 
-const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });
-
-const DEFAULT_FONT_FAMILY = [
-  'Inter',
-  'Avenir',
-  '-apple-system',
-  'BlinkMacSystemFont',
-  '"Segoe UI"',
-  'Roboto',
-  '"Helvetica Neue"',
-  'Arial',
-  'sans-serif',
-  '"Apple Color Emoji"',
-  '"Segoe UI Emoji"',
-  '"Segoe UI Symbol"',
-].join(',');
+// 默认深色主题
+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;
+
+  if (typeof obj.fontFamily === 'string') {
+    obj.fontFamily
+      .replace(/"/g, '')
+      .split(',')
+      .map((font: string) => font.trim())
+      .filter(Boolean)
+      .forEach((font: string) => fontSet.add(font));
+  }
+
+  Object.values(obj).forEach((value) => {
+    if (typeof value === 'object') {
+      collectFontFamilies(value, fontSet);
+    }
+  });
+
+  return fontSet;
+}
+
+// 动态加载字体
+const prevFonts = new Set<string>(['Roboto', 'inherit']);
+export function loadFonts(fonts: string[]) {
+  // 过滤出未加载的字体
+  const unloadedFonts = fonts.filter((font) => !prevFonts.has(font));
 
+  // 如果所有字体都已加载，直接返回
+  if (unloadedFonts.length === 0) {
+    return Promise.resolve(true);
+  }
+
+  // record
+  unloadedFonts.forEach((font) => prevFonts.add(font));
+
+  return new Promise<boolean>((resolve) => {
+    webfontloader.load({
+      google: {
+        families: unloadedFonts,
+      },
+      active: () => resolve(true),
+      inactive: () => resolve(true),
+      fontinactive: (familyName, fvd) => {
+        prevFonts.delete(familyName);
+        console.warn(`font ${familyName} ${fvd} download failed`);
+      },
+    });
+  });
+}
+
+// 创建默认主题配置
 export function createDefaultThemeOptions(mode: ThemeMode = 'light'): ThemeOptions {
   const result: ThemeOptions = {
     palette: {
@@ -91,7 +126,6 @@ export function createDefaultThemeOptions(mode: ThemeMode = 'light'): ThemeOptio
         main: mode === 'light' ? '#222222' : colors.common.white,
         gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
       },
-      fontFamily: DEFAULT_FONT_FAMILY,
       // button 默认使用粗体
       button: {
         fontWeight: 700,
@@ -142,10 +176,11 @@ export function createDefaultThemeOptions(mode: ThemeMode = 'light'): ThemeOptio
       },
     },
   };
+
   // 深色主题
   if (mode === 'dark') {
     result.palette = {
-      ...muiDarkTheme.palette,
+      ...defaultDarkTheme.palette,
       background: {
         paper: colors.grey[900],
         default: colors.grey[900],
@@ -215,6 +250,10 @@ export const create = ({
 
   const theme = _createTheme(mergedThemeOptions);
 
+  // 异步加载字体
+  const fonts = collectFontFamilies(theme.typography);
+  loadFonts(Array.from(fonts));
+
   /**
    * 响应式字体，配置后，theme.typography 会变为下面的结构
    * {