fix: fix site home page banner min-height (ant-design#46146)

wanghui2021 · Nov 29, 2023 · aed105b · aed105b
1 parent bf2d70c
commit aed105b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 76 deletions.
diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx
@@ -1,31 +1,41 @@
 import * as React from 'react';
-import { createStyles, css, useTheme } from 'antd-style';
-import classNames from 'classnames';
 import type { FC } from 'react';
 import { useContext } from 'react';
-import { Typography, Skeleton, Carousel, Badge } from 'antd';
-import type { Extra, Icon } from './util';
+import { Badge, Carousel, Skeleton, Typography } from 'antd';
+import { createStyles, css, useTheme } from 'antd-style';
+import classNames from 'classnames';
+
+import useLocale from '../../../hooks/useLocale';
 import SiteContext from '../../../theme/slots/SiteContext';
+import type { Extra, Icon } from './util';
 import { getCarouselStyle, useSiteData } from './util';
-import useLocale from '../../../hooks/useLocale';
 
 const useStyle = createStyles(({ token }) => {
   const { carousel } = getCarouselStyle();
-
+  const [, lang] = useLocale();
+  console.log('lang', lang);
   return {
     itemBase: css`
       display: flex;
       flex: 1 1 0;
       flex-direction: column;
       align-items: stretch;
       text-decoration: none;
-      background: ${token.colorBgContainer};
+      background-color: ${token.colorBgContainer};
       border: ${token.lineWidth}px solid ${token.colorBorderSecondary};
       border-radius: ${token.borderRadiusLG}px;
       transition: all ${token.motionDurationSlow};
       padding-block: ${token.paddingMD}px;
       padding-inline: ${token.paddingLG}px;
     `,
+    minHeight:
+      lang === 'cn'
+        ? css`
+            min-height: calc(152px - ${token.paddingMD}px * 2);
+          `
+        : css`
+            min-height: calc(176px - ${token.paddingMD}px * 2);
+          `,
     cardItem: css`
       &:hover {
         box-shadow: ${token.boxShadowCard};
@@ -58,7 +68,7 @@ interface RecommendItemProps {
   icons: Icon[];
   className?: string;
 }
-const RecommendItem = ({ extra, index, icons, className }: RecommendItemProps) => {
+const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, className }) => {
   const token = useTheme();
   const { styles } = useStyle();
 
@@ -72,7 +82,7 @@ const RecommendItem = ({ extra, index, icons, className }: RecommendItemProps) =
       key={extra?.title}
       href={extra.href}
       target="_blank"
-      className={classNames(styles.itemBase, className)}
+      className={classNames(styles.itemBase, styles.minHeight, className)}
       rel="noreferrer"
     >
       <Typography.Title level={5}>{extra?.title}</Typography.Title>
@@ -120,7 +130,7 @@ export const BannerRecommendsFallback: FC = () => {
   );
 };
 
-export default function BannerRecommends() {
+const BannerRecommends: React.FC = () => {
   const { styles } = useStyle();
   const [, lang] = useLocale();
   const { isMobile } = React.useContext(SiteContext);
@@ -159,4 +169,6 @@ export default function BannerRecommends() {
       )}
     </div>
   );
-}
+};
+
+export default BannerRecommends;
diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
@@ -1,15 +1,13 @@
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
-import { Alert, Col, ConfigProvider, Popover, Row, Select } from 'antd';
+import { Col, Popover, Row, Select } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
-import dayjs from 'dayjs';
 import { useLocation, useSiteData } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
 
 import useLocale from '../../../hooks/useLocale';
 import DirectionIcon from '../../common/DirectionIcon';
-import { ANT_DESIGN_NOT_SHOW_BANNER } from '../../layouts/GlobalLayout';
 import * as utils from '../../utils';
 import { getThemeConfig } from '../../utils';
 import type { SiteContextProps } from '../SiteContext';
@@ -23,21 +21,6 @@ import SwitchBtn from './SwitchBtn';
 const RESPONSIVE_XS = 1120;
 const RESPONSIVE_SM = 1200;
 
-const locales = {
-  cn: {
-    message: 'Galacean Effects · 所见即所得的动效新方案。',
-    shortMessage: 'Galacean Effects · 所见即所得的动效新方案。',
-    more: '前往了解',
-    link: 'https://galacean.antgroup.com/effects/',
-  },
-  en: {
-    message: '',
-    shortMessage: '',
-    more: '',
-    link: '',
-  },
-};
-
 const useStyle = createStyles(({ token, css }) => {
   const searchIconColor = '#ced4d9';
 
@@ -124,12 +107,7 @@ const useStyle = createStyles(({ token, css }) => {
         padding: 0,
       },
     },
-    banner: css`
-      width: 100%;
-      text-align: center;
-      word-break: keep-all;
-      user-select: none;
-    `,
+
     link: css`
       margin-left: 10px;
 
@@ -153,7 +131,7 @@ interface HeaderState {
 
 // ================================= Header =================================
 const Header: React.FC = () => {
-  const [locale, lang] = useLocale(locales);
+  const [, lang] = useLocale();
 
   const { pkg } = useSiteData();
 
@@ -163,8 +141,7 @@ const Header: React.FC = () => {
     windowWidth: 1400,
     searching: false,
   });
-  const { direction, isMobile, bannerVisible, updateSiteConfig } =
-    useContext<SiteContextProps>(SiteContext);
+  const { direction, isMobile, updateSiteConfig } = useContext<SiteContextProps>(SiteContext);
   const pingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const location = useLocation();
   const { pathname, search } = location;
@@ -186,13 +163,6 @@ const Header: React.FC = () => {
   const onDirectionChange = () => {
     updateSiteConfig({ direction: direction !== 'rtl' ? 'rtl' : 'ltr' });
   };
-  const onBannerClose = () => {
-    updateSiteConfig({ bannerVisible: false });
-
-    if (utils.isLocalStorageNameSupported()) {
-      localStorage.setItem(ANT_DESIGN_NOT_SHOW_BANNER, dayjs().toISOString());
-    }
-  };
 
   useEffect(() => {
     handleHideMenu();
@@ -366,37 +336,6 @@ const Header: React.FC = () => {
           <MenuOutlined className="nav-phone-icon" onClick={handleShowMenu} />
         </Popover>
       )}
-      {isZhCN && bannerVisible && (
-        <ConfigProvider theme={{ token: { colorInfoBg: '#ceebf9', colorTextBase: '#000' } }}>
-          <Alert
-            className={styles.banner}
-            message={
-              <>
-                <span>{isMobile ? locale.shortMessage : locale.message}</span>
-                <a
-                  className={styles.link}
-                  href={locale.link}
-                  target="_blank"
-                  rel="noreferrer"
-                  onClick={() => {
-                    window.gtag?.('event', '点击', {
-                      event_category: 'top_banner',
-                      event_label: locale.link,
-                    });
-                  }}
-                >
-                  {locale.more}
-                </a>
-              </>
-            }
-            type="info"
-            banner
-            closable
-            showIcon={false}
-            onClose={onBannerClose}
-          />
-        </ConfigProvider>
-      )}
       <Row style={{ flexFlow: 'nowrap', height: 64 }}>
         <Col {...colProps[0]}>
           <Logo {...sharedProps} location={location} />