docs: fix site style and enhance user experience (#262)

* docs: refactor metaThemeColor. * docs: fix site style. * docs: refactor style * docs: optimize the experience issues with the top navigation changes during scrolling - fix: #203 * docs: refactor site user experience. * fix: ssr window undefined
ant-design · Nov 27, 2024 · 839ef1d · 839ef1d
1 parent c0bf866
commit 839ef1d
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 40 deletions.
diff --git a/.dumi/hooks/useLottie.ts b/.dumi/hooks/useLottie.ts
@@ -1,4 +1,4 @@
-import lottie, { type AnimationConfig, type AnimationItem } from 'lottie-web';
+import type { AnimationConfig, AnimationItem, LottiePlayer } from 'lottie-web';
 import React from 'react';
 
 interface UseLottieOptions extends Omit<AnimationConfig, 'container' | 'renderer'> {
@@ -22,9 +22,11 @@ const useLottie = (options: UseLottieOptions) => {
 
     let animation: AnimationItem | undefined;
 
+    const lottie: LottiePlayer = (window as any)?.lottie;
+
     if (!animationInstance) {
       if (!lazyLoad || isIntersected) {
-        if (containerRef.current) {
+        if (containerRef.current && lottie) {
           animation = lottie.loadAnimation({
             container: containerRef.current,
             ...stableLottieOptions,

diff --git a/.dumi/pages/index/common/Container.tsx b/.dumi/pages/index/common/Container.tsx
@@ -23,6 +23,10 @@ const useStyle = createStyles(({ token, css }) => {
       color: #fff;
       text-align: center;
       padding-bottom: ${token.padding}px;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        font-size: ${token.fontSizeHeading1}px;
+      }
     `,
     desc: css`
       color: ${token.colorTextSecondary};

diff --git a/.dumi/pages/index/components/DesignGuide.tsx b/.dumi/pages/index/components/DesignGuide.tsx
@@ -127,6 +127,10 @@ const useStyle = createStyles(({ token, css }) => {
       font-size: ${token.fontSizeHeading1 + 10}px;
       line-height: 56px;
       font-weight: bold;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        font-size: ${token.fontSizeHeading2}px;
+      }
     `,
     chain_item_desc: css`
       font-size: ${token.fontSizeHeading5}px;

diff --git a/.dumi/pages/index/components/MainBanner.tsx b/.dumi/pages/index/components/MainBanner.tsx
@@ -39,6 +39,10 @@ const useStyle = createStyles(({ token, css }) => {
       align-items: center;
       position: relative;
       font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        height: calc(100vh - ${token.paddingLG}px);
+      }
     `,
     background: css`
       width: 100%;
@@ -51,8 +55,6 @@ const useStyle = createStyles(({ token, css }) => {
       height: 100%;
       max-height: calc(100vh - ${token.headerHeight * 2}px);
       position: relative;
-
-      
     `,
     title: css`
       max-width: ${minBannerWidth}px;
@@ -68,6 +70,8 @@ const useStyle = createStyles(({ token, css }) => {
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        text-align: center;
+        gap: ${token.paddingXS}px;
       }
     `,
     lottie: css`
@@ -150,6 +154,10 @@ const useStyle = createStyles(({ token, css }) => {
       font-weight: 600;
       box-shadow: ${token.boxShadow};
       position: relative;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        padding: 0 ${token.paddingLG}px;
+      }
     `,
     startBtn: css`
       background: linear-gradient(90deg, #c7deff 0%, #ffffffd9 76%);
@@ -210,7 +218,7 @@ const MainBanner: React.FC = () => {
   const { styles } = useStyle();
 
   const [bgLottieRef, bgAnimation] = useLottie({
-    renderer: 'canvas',
+    renderer: 'svg',
     loop: false,
     autoplay: false,
     rendererSettings: {

diff --git a/.dumi/pages/index/components/SceneIntroduction/index.tsx b/.dumi/pages/index/components/SceneIntroduction/index.tsx
@@ -1,10 +1,11 @@
-import { Button } from 'antd';
+import { Button, Carousel } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
 import React from 'react';
 
 import useLocale from '../../../../hooks/useLocale';
 import Container from '../../common/Container';
+import SiteContext from '../SiteContext';
 import AssistantScene from './Assistant';
 import Independent from './Independent';
 import NestScene from './Nest';
@@ -48,11 +49,16 @@ const useStyle = createStyles(({ token, css }) => {
   return {
     container: css`
       position: relative;
+
+      @media screen and (max-width: ${token.mobileMaxWidth}px) {
+        height: 80vh;
+      }
     `,
     content_bg: css`
       position: absolute;
-      top: -200px;
-      right: -150px;
+      top: 0;
+      right: 0;
+      transform: translate(10%, -20%);
     `,
     content: css`
       display: flex;
@@ -61,6 +67,26 @@ const useStyle = createStyles(({ token, css }) => {
       width: 100%;
       margin-top: ${token.pcContainerMargin / 2}px;
     `,
+    mobile_content: css`
+      margin: ${token.marginXXL}px 0;
+
+      h3 {
+        text-align: center;
+        font-size: ${token.fontSizeHeading3}px;
+      }
+
+      p {
+        text-align: center;
+        opacity: 0.65;
+      }
+
+      img {
+        width: 100%;
+        background: #0c0e10cc;
+        border-radius: 12px;
+        margin-top: ${token.margin}px;
+      }
+    `,
     tab: css`
       width: 280px;
       display: flex;
@@ -134,24 +160,29 @@ const SceneBanner: React.FC = () => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
 
+  const { isMobile } = React.useContext(SiteContext);
+
   const tabItems = [
     {
       key: 'independent',
       title: locale.independent_title,
       desc: locale.independent_desc,
       content: <Independent />,
+      img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YVjbTqbc7ngAAAAAAAAAAAAADgCCAQ/fmt.avif',
     },
     {
       key: 'assistant',
       title: locale.assistant_title,
       desc: locale.assistant_desc,
       content: <AssistantScene />,
+      img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*kCojRo0SoAAAAAAAAAAAAAAADgCCAQ/fmt.avif',
     },
     {
       key: 'nest',
       title: locale.nest_title,
       desc: locale.nest_desc,
       content: <NestScene />,
+      img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*krfsT5zBSuUAAAAAAAAAAAAADgCCAQ/fmt.avif',
     },
     {
       key: 'app',
@@ -175,27 +206,42 @@ const SceneBanner: React.FC = () => {
         src="https://mdn.alipayobjects.com/huamei_k0vkmw/afts/img/A*aSLTSr53DPAAAAAAAAAAAAAADsR-AQ/original"
         alt="bg"
       />
-      <div className={styles.content}>
-        <div className={styles.tab}>
-          {tabItems.map((item) => (
-            <Button
-              key={item.key}
-              disabled={item.disabled}
-              className={classnames(
-                styles.item,
-                active === item.key && styles['item-active'],
-                item.disabled && styles['item-disabled'],
-              )}
-              type="text"
-              onClick={genHandleActive(item.key)}
-            >
-              <h3 className={styles.item_title}>{item.title}</h3>
-              <p className={styles.item_desc}>{item.desc}</p>
-            </Button>
-          ))}
+      {isMobile ? (
+        <Carousel autoplay draggable autoplaySpeed={5000} swipeToSlide>
+          {tabItems.map(
+            (item) =>
+              item.img && (
+                <div className={styles.mobile_content}>
+                  <h3>{item.title}</h3>
+                  <p>{item.desc}</p>
+                  <img src={item.img} alt="item.img" loading="lazy" />
+                </div>
+              ),
+          )}
+        </Carousel>
+      ) : (
+        <div className={styles.content}>
+          <div className={styles.tab}>
+            {tabItems.map((item) => (
+              <Button
+                key={item.key}
+                disabled={item.disabled}
+                className={classnames(
+                  styles.item,
+                  active === item.key && styles['item-active'],
+                  item.disabled && styles['item-disabled'],
+                )}
+                type="text"
+                onClick={genHandleActive(item.key)}
+              >
+                <h3 className={styles.item_title}>{item.title}</h3>
+                <p className={styles.item_desc}>{item.desc}</p>
+              </Button>
+            ))}
+          </div>
+          {!!activeContent && <div className={styles.tab_content}>{activeContent}</div>}
         </div>
-        {!!activeContent && <div className={styles.tab_content}>{activeContent}</div>}
-      </div>
+      )}
     </Container>
   );
 };

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -374,7 +374,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
 
   const codeBoxDemoStyle: React.CSSProperties = {
     padding: iframe || compact ? 0 : undefined,
-    overflow: iframe || compact ? 'hidden' : undefined,
+    overflow: iframe || compact ? 'hidden' : 'auto',
     backgroundColor: background === 'grey' ? backgroundGrey : undefined,
   };
 

diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -51,12 +51,17 @@ const getAlgorithm = (themes: ThemeName[] = []) =>
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
+  const { token } = antdTheme.useToken();
   const [searchParams, setSearchParams] = useSearchParams();
   const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState<SiteState>({
     isMobile: false,
     direction: 'ltr',
     theme: [],
   });
+  const isIndexPage = React.useMemo(
+    () => pathname === '' || pathname.startsWith('/index'),
+    [pathname],
+  );
 
   const updateSiteConfig = useCallback(
     (props: SiteState) => {
@@ -97,6 +102,14 @@ const GlobalLayout: React.FC = () => {
     updateSiteConfig({ isMobile: window.innerWidth < RESPONSIVE_MOBILE });
   };
 
+  useEffect(() => {
+    const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+
+    if (metaThemeColor) {
+      metaThemeColor.setAttribute('content', isIndexPage ? '#0c0e10cc' : token.colorBgContainer);
+    }
+  }, [theme.length, isIndexPage]);
+
   useEffect(() => {
     const _theme = searchParams.getAll('theme') as ThemeName[];
     const _direction = searchParams.get('direction') as DirectionType;
@@ -131,10 +144,7 @@ const GlobalLayout: React.FC = () => {
   const themeConfig = React.useMemo<ThemeConfig>(
     () => ({
       // index page should always use dark theme
-      algorithm:
-        pathname.startsWith('/index') || pathname === ''
-          ? getAlgorithm(['dark'])
-          : getAlgorithm(theme),
+      algorithm: isIndexPage ? getAlgorithm(['dark']) : getAlgorithm(theme),
       token: { motion: !theme.includes('motion-off') },
       cssVar: true,
       hashed: false,

diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
@@ -2,7 +2,7 @@ import { CloseOutlined, MenuOutlined } from '@ant-design/icons';
 import { Button, Drawer } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import useLocale from '../../../hooks/useLocale';
 import useScrollY from '../../../hooks/useScrollY';
@@ -12,6 +12,7 @@ import HeaderActions from './Actions';
 import Logo from './Logo';
 import Navigation from './Navigation';
 
+import { useLocation } from 'dumi';
 import type { SiteContextProps } from '../SiteContext';
 import type { SharedProps } from './interface';
 
@@ -29,6 +30,7 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      transition: padding 0.2s ease-in-out, margin 0.2s ease-in-out, opacity 0.2s ease-in-out;
     `,
     mobile: css`
       height: 48px;
@@ -48,6 +50,9 @@ const useStyle = createStyles(({ token, css }) => {
       inset-inline-end: 50%;
       transform: translateX(50%);
     `,
+    hidden: css`
+      opacity: 0;
+    `,
     mini_rtl: css`
       inset-inline-start: 50%;
     `,
@@ -96,13 +101,21 @@ const useStyle = createStyles(({ token, css }) => {
 const Header: React.FC = () => {
   const [open, setOpen] = React.useState<boolean>(false);
   const [, lang] = useLocale();
+  const { pathname } = useLocation();
+
   const { direction, isMobile } = React.useContext<SiteContextProps>(SiteContext);
 
   const { styles } = useStyle();
 
   const { scrollY, scrollYDirection } = useScrollY();
 
-  const isMini = scrollY > 800 && !isMobile;
+  let innerHeight = 1080;
+
+  if (typeof window !== 'undefined') {
+    innerHeight = window.innerHeight;
+  }
+
+  const isMini = scrollY > innerHeight && !isMobile;
 
   const sharedProps: SharedProps = {
     isZhCN: lang === 'cn',
@@ -113,6 +126,10 @@ const Header: React.FC = () => {
 
   let content = null;
 
+  useEffect(() => {
+    isMobile && setOpen(false);
+  }, [pathname]);
+
   if (isMobile) {
     content = (
       <Drawer
@@ -139,6 +156,8 @@ const Header: React.FC = () => {
     );
   }
 
+  const isHidden = scrollY > innerHeight * 1.5 && scrollYDirection === 'down';
+
   return (
     <header
       className={classnames(
@@ -147,10 +166,8 @@ const Header: React.FC = () => {
         (isMobile || isMini) && styles.mobile,
         isMini && styles.mini,
         isMini && direction === 'rtl' && styles.mini_rtl,
+        isHidden && styles.hidden,
       )}
-      style={{
-        display: scrollY > 900 && scrollYDirection === 'down' ? 'none' : 'flex',
-      }}
     >
       <Logo {...sharedProps} />
       {isMobile && (

diff --git a/.dumirc.ts b/.dumirc.ts
@@ -179,5 +179,6 @@ export default defineConfig({
       document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
     })();
     `,
+    'https://gw.alipayobjects.com/os/lib/lottie-web/5.12.2/build/player/lottie_svg.min.js',
   ],
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -179,5 +179,6 @@ export default defineConfig({ @@
           document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
         })();
         `,
+        'https://gw.alipayobjects.com/os/lib/lottie-web/5.12.2/build/player/lottie_svg.min.js',
       ],
     });