Merge branch 'main' into fix/runtime

ant-design · Nov 28, 2024 · e628b90 · e628b90
2 parents ec7ea40 + 48654e4
commit e628b90
Show file tree

Hide file tree

Showing 30 changed files with 1,890 additions and 2,228 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: 100vh;
+      }
     `,
     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',
@@ -170,32 +201,49 @@ const SceneBanner: React.FC = () => {
 
   return (
     <Container className={styles.container} title={locale.title} desc={locale.desc}>
-      <img
-        className={styles.content_bg}
-        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 && (
+        <img
+          className={styles.content_bg}
+          src="https://mdn.alipayobjects.com/huamei_k0vkmw/afts/img/A*aSLTSr53DPAAAAAAAAAAAAAADsR-AQ/original"
+          alt="bg"
+        />
+      )}
+      {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/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx
@@ -1,6 +1,6 @@
 import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons';
 import type { GetProp } from 'antd';
-import { Descriptions, Space, Tooltip, Typography, theme } from 'antd';
+import { Descriptions, Flex, Tooltip, Typography, theme } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import React from 'react';
@@ -42,17 +42,27 @@ const useStyle = createStyles(({ token }) => ({
   code: css`
     cursor: pointer;
     position: relative;
-    display: inline-flex;
     align-items: center;
-    column-gap: ${token.paddingXXS}px;
     border-radius: ${token.borderRadiusSM}px;
-    padding-inline: ${token.paddingXXS}px;
+    padding-inline: ${token.paddingXXS}px !important;
     transition: all ${token.motionDurationSlow} !important;
-    font-family: ${token.codeFamily};
     color: ${token.colorTextSecondary} !important;
+
+    > code {
+      padding: 0;
+      border: 0;
+      background: transparent;
+      display: inline-flex;
+      column-gap: ${token.paddingXXS}px;
+      line-height: 1;
+      font-size: 13px;
+      font-family: ${token.codeFamily};
+    }
+  
     &:hover {
       background: ${token.controlItemBgHover};
     }
+
     a&:hover {
       text-decoration: underline !important;
     }
@@ -166,9 +176,9 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
                   title={copied ? locale.copied : locale.copy}
                   onOpenChange={onOpenChange}
                 >
-                  <Typography.Text className={styles.code} onClick={onCopy}>
-                    {importList}
-                  </Typography.Text>
+                  <pre className={styles.code} onClick={onCopy}>
+                    <code>{importList}</code>
+                  </pre>
                 </Tooltip>
               </CopyToClipboard>
             ),
@@ -185,7 +195,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
           filename && {
             label: locale.docs,
             children: (
-              <Space size="middle">
+              <Flex gap={16}>
                 <Typography.Link
                   className={styles.code}
                   href={`${branchUrl}${filename}`}
@@ -200,7 +210,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
                     <span>{locale.changelog}</span>
                   </Typography.Link>
                 </ComponentChangelog>
-              </Space>
+              </Flex>
             ),
           },
           isVersionNumber(version) && {

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,