From cbd6aaf60765a5a18624e54ae7d1c7bc9188064d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Wed, 27 Nov 2024 23:09:15 +0800 Subject: [PATCH 1/6] docs: refactor metaThemeColor. --- .dumi/theme/layouts/GlobalLayout.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index 509394aa..a42d475a 100644 --- 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({ 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 ? '#000' : 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( () => ({ // 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, From ed02c772f897086ec4371ce32800694042b23569 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Thu, 28 Nov 2024 01:25:09 +0800 Subject: [PATCH 2/6] docs: fix site style. --- .dumi/pages/index/components/MainBanner.tsx | 12 ++- .../components/SceneIntroduction/index.tsx | 75 +++++++++++++------ .../builtins/Previewer/CodePreviewer.tsx | 2 +- .dumi/theme/slots/Header/index.tsx | 9 ++- 4 files changed, 71 insertions(+), 27 deletions(-) diff --git a/.dumi/pages/index/components/MainBanner.tsx b/.dumi/pages/index/components/MainBanner.tsx index 0cb76611..d87ee91f 100644 --- 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%); diff --git a/.dumi/pages/index/components/SceneIntroduction/index.tsx b/.dumi/pages/index/components/SceneIntroduction/index.tsx index 57f01786..965be1f9 100644 --- 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'; @@ -51,8 +52,9 @@ const useStyle = createStyles(({ token, css }) => { `, content_bg: css` position: absolute; - top: -200px; - right: -150px; + top: 0; + right: 0; + transform: translate(10%, -20%); `, content: css` display: flex; @@ -61,6 +63,15 @@ const useStyle = createStyles(({ token, css }) => { width: 100%; margin-top: ${token.pcContainerMargin / 2}px; `, + mobile_content: css` + background: #0c0e10cc; + border-radius: 24px; + margin: ${token.marginLG}px 0; + + img { + width: 100%; + } + `, tab: css` width: 280px; display: flex; @@ -134,24 +145,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: , + img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YVjbTqbc7ngAAAAAAAAAAAAADgCCAQ/fmt.avif', }, { key: 'assistant', title: locale.assistant_title, desc: locale.assistant_desc, content: , + img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*kCojRo0SoAAAAAAAAAAAAAAADgCCAQ/fmt.avif', }, { key: 'nest', title: locale.nest_title, desc: locale.nest_desc, content: , + img: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*krfsT5zBSuUAAAAAAAAAAAAADgCCAQ/fmt.avif', }, { key: 'app', @@ -175,27 +191,40 @@ const SceneBanner: React.FC = () => { src="https://mdn.alipayobjects.com/huamei_k0vkmw/afts/img/A*aSLTSr53DPAAAAAAAAAAAAAADsR-AQ/original" alt="bg" /> -
-
- {tabItems.map((item) => ( - - ))} + {isMobile ? ( + + {tabItems.map( + (item) => + item.img && ( +
+ item.img +
+ ), + )} + + ) : ( +
+
+ {tabItems.map((item) => ( + + ))} +
+ {!!activeContent &&
{activeContent}
}
- {!!activeContent &&
{activeContent}
} -
+ )} ); }; diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index c58ec714..d3672f25 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -374,7 +374,7 @@ createRoot(document.getElementById('container')).render(); 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/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 49751efa..574b127c 100644 --- 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'; @@ -96,6 +97,8 @@ const useStyle = createStyles(({ token, css }) => { const Header: React.FC = () => { const [open, setOpen] = React.useState(false); const [, lang] = useLocale(); + const { pathname } = useLocation(); + const { direction, isMobile } = React.useContext(SiteContext); const { styles } = useStyle(); @@ -113,6 +116,10 @@ const Header: React.FC = () => { let content = null; + useEffect(() => { + isMobile && setOpen(false); + }, [pathname]); + if (isMobile) { content = ( Date: Thu, 28 Nov 2024 01:54:09 +0800 Subject: [PATCH 3/6] docs: refactor style --- .dumi/pages/index/common/Container.tsx | 4 ++++ .dumi/pages/index/components/DesignGuide.tsx | 4 ++++ .dumi/pages/index/components/SceneIntroduction/index.tsx | 6 +++++- .dumi/theme/layouts/GlobalLayout.tsx | 2 +- docs/playground/independent.tsx | 5 +++-- 5 files changed, 17 insertions(+), 4 deletions(-) diff --git a/.dumi/pages/index/common/Container.tsx b/.dumi/pages/index/common/Container.tsx index 2c69337f..1bf1f52b 100644 --- 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 index 0be502c7..04923d46 100644 --- 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/SceneIntroduction/index.tsx b/.dumi/pages/index/components/SceneIntroduction/index.tsx index 965be1f9..1fbacc27 100644 --- a/.dumi/pages/index/components/SceneIntroduction/index.tsx +++ b/.dumi/pages/index/components/SceneIntroduction/index.tsx @@ -49,6 +49,10 @@ 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; @@ -66,7 +70,7 @@ const useStyle = createStyles(({ token, css }) => { mobile_content: css` background: #0c0e10cc; border-radius: 24px; - margin: ${token.marginLG}px 0; + margin: ${token.marginXXL}px 0; img { width: 100%; diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index a42d475a..04b3b60e 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -106,7 +106,7 @@ const GlobalLayout: React.FC = () => { const metaThemeColor = document.querySelector('meta[name="theme-color"]'); if (metaThemeColor) { - metaThemeColor.setAttribute('content', isIndexPage ? '#000' : token.colorBgContainer); + metaThemeColor.setAttribute('content', isIndexPage ? '#0c0e10cc' : token.colorBgContainer); } }, [theme.length, isIndexPage]); diff --git a/docs/playground/independent.tsx b/docs/playground/independent.tsx index 2c374e1e..4d323873 100644 --- a/docs/playground/independent.tsx +++ b/docs/playground/independent.tsx @@ -43,8 +43,9 @@ const useStyle = createStyles(({ token, css }) => { return { layout: css` width: 100%; + min-width: 1000px; height: 722px; - border-radius: 8px; + border-radius: ${token.borderRadius}px; display: flex; background: ${token.colorBgContainer}; font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif; @@ -72,7 +73,7 @@ const useStyle = createStyles(({ token, css }) => { box-sizing: border-box; display: flex; flex-direction: column; - padding: 24px 0; + padding: ${token.paddingLG}px; gap: 16px; `, messages: css` From a78275ddec95c664c29bf07cdb55db0638736a24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Thu, 28 Nov 2024 02:33:15 +0800 Subject: [PATCH 4/6] docs: optimize the experience issues with the top navigation changes during scrolling - fix: https://github.com/ant-design/x/issues/203 --- .dumi/theme/slots/Header/index.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 574b127c..6bdf2af9 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -30,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; @@ -49,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%; `, @@ -105,7 +109,7 @@ const Header: React.FC = () => { const { scrollY, scrollYDirection } = useScrollY(); - const isMini = scrollY > 800 && !isMobile; + const isMini = scrollY > window.innerHeight && !isMobile; const sharedProps: SharedProps = { isZhCN: lang === 'cn', @@ -146,6 +150,8 @@ const Header: React.FC = () => { ); } + const isHidden = scrollY > window.innerHeight * 1.5 && scrollYDirection === 'down'; + return (
{ (isMobile || isMini) && styles.mobile, isMini && styles.mini, isMini && direction === 'rtl' && styles.mini_rtl, + isHidden && styles.hidden, )} - style={{ - display: scrollY > 900 && scrollYDirection === 'down' ? 'none' : 'flex', - }} > {isMobile && ( From a6c36e4bd2006becbb4b6b9e3c7d0014d355ed08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Thu, 28 Nov 2024 03:10:15 +0800 Subject: [PATCH 5/6] docs: refactor site user experience. --- .dumi/hooks/useLottie.ts | 6 ++++-- .dumi/pages/index/components/MainBanner.tsx | 2 +- .../components/SceneIntroduction/index.tsx | 19 ++++++++++++++++--- .dumi/theme/slots/Header/index.tsx | 6 ++++-- .dumirc.ts | 1 + 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/.dumi/hooks/useLottie.ts b/.dumi/hooks/useLottie.ts index 93e4832e..fc75ebc6 100644 --- 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 { @@ -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/components/MainBanner.tsx b/.dumi/pages/index/components/MainBanner.tsx index d87ee91f..8eaa6a8c 100644 --- a/.dumi/pages/index/components/MainBanner.tsx +++ b/.dumi/pages/index/components/MainBanner.tsx @@ -218,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 index 1fbacc27..46d3520a 100644 --- a/.dumi/pages/index/components/SceneIntroduction/index.tsx +++ b/.dumi/pages/index/components/SceneIntroduction/index.tsx @@ -68,12 +68,23 @@ const useStyle = createStyles(({ token, css }) => { margin-top: ${token.pcContainerMargin / 2}px; `, mobile_content: css` - background: #0c0e10cc; - border-radius: 24px; 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` @@ -196,11 +207,13 @@ const SceneBanner: React.FC = () => { alt="bg" /> {isMobile ? ( - + {tabItems.map( (item) => item.img && (
+

{item.title}

+

{item.desc}

item.img
), diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 6bdf2af9..6adeaacb 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -109,7 +109,9 @@ const Header: React.FC = () => { const { scrollY, scrollYDirection } = useScrollY(); - const isMini = scrollY > window.innerHeight && !isMobile; + const innerHeight = window?.innerHeight || 1080; + + const isMini = scrollY > innerHeight && !isMobile; const sharedProps: SharedProps = { isZhCN: lang === 'cn', @@ -150,7 +152,7 @@ const Header: React.FC = () => { ); } - const isHidden = scrollY > window.innerHeight * 1.5 && scrollYDirection === 'down'; + const isHidden = scrollY > innerHeight * 1.5 && scrollYDirection === 'down'; return (
Date: Thu, 28 Nov 2024 03:15:14 +0800 Subject: [PATCH 6/6] fix: ssr window undefined --- .dumi/theme/slots/Header/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 6adeaacb..04fc076e 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -109,7 +109,11 @@ const Header: React.FC = () => { const { scrollY, scrollYDirection } = useScrollY(); - const innerHeight = window?.innerHeight || 1080; + let innerHeight = 1080; + + if (typeof window !== 'undefined') { + innerHeight = window.innerHeight; + } const isMini = scrollY > innerHeight && !isMobile;