fix: site style conflict (#44899)

* fix: site style conflict

* chore: lint

* feat: optimize code

.dumi/theme/SiteThemeProvider.tsx

@@ -41,6 +41,7 @@ const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest })
       theme={theme}
       customToken={{
         headerHeight: 64,
+        bannerHeight: 38,
         menuItemBorder: 2,
         mobileMaxWidth: 767.99,
         siteMarkdownCodeBg: token.colorFillTertiary,

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -80,7 +80,7 @@ const { Title } = Typography;
 
 const Overview: React.FC = () => {
   const { styles } = useStyle();
-  const { theme } = useContext(SiteContext);
+  const { theme, bannerVisible } = useContext(SiteContext);
 
   const data = useSidebarData();
   const [searchBarAffixed, setSearchBarAffixed] = useState<boolean>(false);
@@ -143,7 +143,10 @@ const Overview: React.FC = () => {
   return (
     <section className="markdown" ref={sectionRef}>
       <Divider />
-      <Affix offsetTop={24 + token.headerHeight} onChange={setSearchBarAffixed}>
+      <Affix
+        offsetTop={24 + token.headerHeight + (bannerVisible ? token.bannerHeight : 0)}
+        onChange={setSearchBarAffixed}
+      >
         <div
           className={styles.componentsOverviewAffix}
           style={searchBarAffixed ? affixedStyle : {}}

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import type { CSSProperties } from 'react';
 import Icon, * as AntdIcons from '@ant-design/icons';
 import type { IntlShape } from 'react-intl';
@@ -11,6 +11,7 @@ import Category from './Category';
 import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
 import type { CategoriesKeys } from './fields';
 import { categories } from './fields';
+import SiteContext from '../../slots/SiteContext';
 
 export enum ThemeType {
   Filled = 'Filled',
@@ -59,6 +60,7 @@ const IconSearch: React.FC = () => {
     theme: ThemeType.Outlined,
   });
   const token = useTheme();
+  const { bannerVisible } = useContext(SiteContext);
 
   const newIconNames: string[] = [];
 
@@ -124,7 +126,10 @@ const IconSearch: React.FC = () => {
 
   return (
     <div className="markdown">
-      <Affix offsetTop={24 + token.headerHeight} onChange={setSearchBarAffixed}>
+      <Affix
+        offsetTop={24 + token.headerHeight + (bannerVisible ? token.bannerHeight : 0)}
+        onChange={setSearchBarAffixed}
+      >
         <div className={styles.iconSearchAffix} style={searchBarAffixed ? affixedStyle : {}}>
           <Segmented
             size="large"

.dumi/theme/layouts/GlobalLayout.tsx

@@ -56,11 +56,13 @@ const GlobalLayout: React.FC = () => {
   const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
   const [, , setPrefersColor] = usePrefersColor();
-  const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState<SiteState>({
-    isMobile: false,
-    direction: 'ltr',
-    theme: [],
-  });
+  const [{ theme = [], direction, isMobile, bannerVisible = true }, setSiteState] =
+    useLayoutState<SiteState>({
+      isMobile: false,
+      direction: 'ltr',
+      theme: [],
+      bannerVisible: true,
+    });
 
   const updateSiteConfig = useCallback(
     (props: SiteState) => {
@@ -121,8 +123,9 @@ const GlobalLayout: React.FC = () => {
       updateSiteConfig,
       theme: theme!,
       isMobile: isMobile!,
+      bannerVisible,
     }),
-    [isMobile, direction, updateSiteConfig, theme],
+    [isMobile, direction, updateSiteConfig, theme, bannerVisible],
   );
 
   const [styleCache] = React.useState(() => createCache());

.dumi/theme/slots/Header/index.tsx

@@ -128,6 +128,11 @@ const useStyle = createStyles(({ token, css }) => {
         margin-left: 0;
       }
     `,
+    icon: css`
+      margin-right: 10px;
+      width: 22px;
+      height: 22px;
+    `,
   };
 });
 
@@ -171,6 +176,9 @@ const Header: React.FC = () => {
   const onDirectionChange = () => {
     updateSiteConfig({ direction: direction !== 'rtl' ? 'rtl' : 'ltr' });
   };
+  const onBannerClose = () => {
+    updateSiteConfig({ bannerVisible: false });
+  };
 
   useEffect(() => {
     handleHideMenu();
@@ -349,6 +357,11 @@ const Header: React.FC = () => {
           className={styles.banner}
           message={
             <>
+              <img
+                className={styles.icon}
+                src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+                alt="yuque"
+              />
               {isMobile ? locale.shortMessage : locale.message}
               <a
                 className={styles.link}
@@ -370,6 +383,7 @@ const Header: React.FC = () => {
           banner
           closable
           showIcon={false}
+          onClose={onBannerClose}
         />
       )}
       <Row style={{ flexFlow: 'nowrap', height: 64 }}>

.dumi/theme/slots/SiteContext.ts

@@ -4,6 +4,7 @@ import type { ThemeName } from '../common/ThemeSwitch';
 
 export interface SiteContextProps {
   isMobile: boolean;
+  bannerVisible: boolean;
   direction: DirectionType;
   theme: ThemeName[];
   updateSiteConfig: (props: Partial<SiteContextProps>) => void;
@@ -11,6 +12,7 @@ export interface SiteContextProps {
 
 const SiteContext = React.createContext<SiteContextProps>({
   isMobile: false,
+  bannerVisible: true,
   direction: 'ltr',
   theme: ['light'],
   updateSiteConfig: () => {},