@arcblock/ux 2.13.13 → 2.13.15

package/src/hooks/use-blocklet-logo.tsx

@@ -0,0 +1,32 @@
+import { type Breakpoint } from '@mui/material';
+import { type ThemeOptions } from '@blocklet/theme';
+import { useCreation } from 'ahooks';
+import { useTheme } from '../Theme';
+import useMobile from './use-mobile';
+
+export default function useBlockletLogo({
+  key = 'sm',
+  meta = {},
+  theme: themeOverrides = {},
+  square,
+}: { key?: number | Breakpoint; meta?: any; theme?: ThemeOptions; square?: boolean } = {}) {
+  const isMobileDevice = useMobile({ key });
+  const theme = useTheme();
+
+  const mode = useCreation(() => {
+    return themeOverrides?.palette?.mode || theme.palette.mode;
+  }, [theme, themeOverrides]);
+
+  const finalAppLogo = useCreation(() => {
+    const { appLogo, appLogoDark, appLogoRect, appLogoRectDark } = Object.assign({}, window.blocklet ?? {}, meta);
+    const isDark = mode === 'dark';
+
+    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
+    // 深色模式尽可能优先使用深色图标
+    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;
+
+    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || '';
+  }, [mode, meta, isMobileDevice, square]);
+
+  return finalAppLogo;
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,6 @@
+import { Breakpoint, useTheme, useMediaQuery } from '@mui/material';
+
+export default function useMobile({ key = 'sm' }: { key?: number | Breakpoint } = {}) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}