Merge branch 'main' into dependabot/npm_and_yarn/dev-dependencies-ef5…

…154fb0e
ant-design · Nov 22, 2024 · b1a53ef · b1a53ef
2 parents 67231d6 + 8708cac
commit b1a53ef
Show file tree

Hide file tree

Showing 65 changed files with 1,732 additions and 1,297 deletions.
diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.dumi/pages/index/components/DesignFramework.tsx
@@ -109,8 +109,8 @@ const DesignFramework: React.FC = () => {
           <img
             loading="lazy"
             alt="thumbnails"
-            style={{ width: 227 }}
-            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*AhrTT6K2vU0AAAAAAAAAAAAADgCCAQ/fmt.webp"
+            style={{ width: 261 }}
+            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*poTnSZrI7-oAAAAAAAAAAAAADgCCAQ/fmt.webp"
           />
         </div>
       ),
@@ -140,8 +140,8 @@ const DesignFramework: React.FC = () => {
           <img
             loading="lazy"
             alt="thumbnails"
-            style={{ width: 261 }}
-            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*poTnSZrI7-oAAAAAAAAAAAAADgCCAQ/fmt.webp"
+            style={{ width: 227 }}
+            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*AhrTT6K2vU0AAAAAAAAAAAAADgCCAQ/fmt.webp"
           />
         </div>
       ),

diff --git a/.dumi/pages/index/components/DesignGuide.tsx b/.dumi/pages/index/components/DesignGuide.tsx
@@ -193,7 +193,7 @@ const DesignGuide: React.FC = () => {
     rendererSettings: {
       preserveAspectRatio: 'xMidYMid slice',
     },
-    path: 'https://mdn.alipayobjects.com/huamei_k0vkmw/afts/file/A*OfRbQKvPpWcAAAAAAAAAAAAADsR-AQ',
+    path: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*OjRsQZWTEcQAAAAAAAAAAAAADgCCAQ',
   });
 
   React.useEffect(() => {

diff --git a/.dumi/pages/index/components/MainBanner.tsx b/.dumi/pages/index/components/MainBanner.tsx
@@ -33,6 +33,7 @@ const useStyle = createStyles(({ token, css }) => {
     banner: css`
       width: 100vw;
       height: calc(100vh - 160px);
+      min-height: 600px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -50,6 +51,8 @@ const useStyle = createStyles(({ token, css }) => {
       height: 100%;
       max-height: calc(100vh - ${token.headerHeight * 2}px);
       position: relative;
+
+      
     `,
     title: css`
       max-width: ${minBannerWidth}px;
@@ -58,6 +61,14 @@ const useStyle = createStyles(({ token, css }) => {
       inset-inline-start: 0;
       transform: translateY(-50%);
       z-index: 1;
+
+      @media only screen and (max-width: ${token.mobileMaxWidth}px) {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
     `,
     lottie: css`
       position: absolute;
@@ -216,7 +227,7 @@ const MainBanner: React.FC = () => {
     rendererSettings: {
       preserveAspectRatio: 'xMidYMid meet',
     },
-    path: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*vhF2TLUKM5YAAAAAAAAAAAAADgCCAQ',
+    path: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*oI6rQbj2NA0AAAAAAAAAAAAADgCCAQ',
   });
 
   React.useEffect(() => {

diff --git a/.dumi/pages/index/components/SceneIntroduction/index.tsx b/.dumi/pages/index/components/SceneIntroduction/index.tsx
@@ -68,11 +68,12 @@ const useStyle = createStyles(({ token, css }) => {
       gap: ${token.margin}px;
     `,
     tab_content: css`
-      width: 886px;
+      width: 890px;
       height: 600px;
       box-sizing: border-box;
-      background-image: url(https://mdn.alipayobjects.com/huamei_k0vkmw/afts/img/A*9lNZQrgQIikAAAAAAAAAAAAADsR-AQ/original);
+      background-image: url(https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*RxJMSbQRvTUAAAAAAAAAAAAADgCCAQ/fmt.avif);
       background-repeat: no-repeat;
+      background-size: cover;
       z-index: 2;
     `,
     item: css`

diff --git a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
@@ -41,6 +41,10 @@ const useStyle = createStyles(({ token, css }) => ({
   `,
   copyTip: css`
     color: ${token.colorTextTertiary};
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
   `,
   copiedTip: css`
     .anticon {

diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -1,5 +1,5 @@
 import { BugOutlined } from '@ant-design/icons';
-import { Drawer, Grid, Popover, Timeline, Typography } from 'antd';
+import { Button, Drawer, Flex, Grid, Popover, Tag, Timeline, Typography } from 'antd';
 import type { TimelineItemProps } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { cloneElement, isValidElement } from 'react';
@@ -35,6 +35,11 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
 }
 
 const useStyle = createStyles(({ token, css }) => ({
+  listWrap: css`
+    > li {
+      line-height: 2;
+    }
+  `,
   linkRef: css`
     margin-inline-start: ${token.marginXS}px;
   `,
@@ -71,15 +76,30 @@ const useStyle = createStyles(({ token, css }) => ({
     position: 'relative',
     [`> ${token.antCls}-drawer-body`]: {
       scrollbarWidth: 'thin',
-      scrollbarColor: 'unset',
+      scrollbarGutter: 'stable',
     },
   },
+  versionWrap: css`
+    margin-bottom: 1em;
+  `,
+  versionTitle: css`
+    height: 28px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0 !important;
+  `,
+  versionTag: css`
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    &:last-child {
+      margin-inline-end: 0;
+    }
+  `,
 }));
 
-export interface ComponentChangelogProps {
-  children?: React.ReactNode;
-}
-
 const locales = {
   cn: {
     full: '查看完整日志',
@@ -109,8 +129,9 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
 
     for (let i = 0; i < changelog.length; i += 1) {
       const char = changelog[i];
+      const isDoubleAsterisk = char === '*' && changelog[i + 1] === '*';
 
-      if (char !== '`' && char !== '*') {
+      if (char !== '`' && !isDoubleAsterisk) {
         lastStr += char;
       } else {
         let node: React.ReactNode = lastStr;
@@ -124,7 +145,7 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
         lastStr = '';
         if (char === '`') {
           isQuota = !isQuota;
-        } else if (char === '*' && changelog[i + 1] === '*') {
+        } else if (isDoubleAsterisk) {
           isBold = !isBold;
           i += 1; // Skip the next '*'
         }
@@ -136,33 +157,36 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
     return nodes;
   }, [changelog]);
 
+  return <span>{parsedChangelog}</span>;
+};
+
+const RefLinks: React.FC<{ refs: string[] }> = ({ refs }) => {
+  const { styles } = useStyle();
   return (
     <>
-      {/* Changelog */}
-      <span>{parsedChangelog}</span>
+      {refs?.map((ref) => (
+        <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
+          #{ref.match(/^.*\/(\d+)$/)?.[1]}
+        </a>
+      ))}
     </>
   );
 };
 
-const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[]; styles: any }> = ({
-  changelogList,
-  styles,
-}) => {
-  const elements = [];
-  for (let i = 0; i < changelogList.length; i += 1) {
+const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ changelogList }) => {
+  const elements: React.ReactNode[] = [];
+  const { styles } = useStyle();
+  const len = changelogList.length;
+  for (let i = 0; i < len; i += 1) {
     const { refs, changelog } = changelogList[i];
     // Check if the next line is an image link and append it to the current line
-    if (i + 1 < changelogList.length && changelogList[i + 1].changelog.trim().startsWith('<img')) {
+    if (i + 1 < len && changelogList[i + 1].changelog.trim().startsWith('<img')) {
       const imgDom = new DOMParser().parseFromString(changelogList[i + 1].changelog, 'text/html');
-      const imgElement = imgDom.querySelector('img');
+      const imgElement = imgDom.querySelector<HTMLImageElement>('img');
       elements.push(
         <li key={i}>
           <ParseChangelog changelog={changelog} />
-          {refs?.map((ref) => (
-            <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
-              #{ref.match(/^.*\/(\d+)$/)?.[1]}
-            </a>
-          ))}
+          <RefLinks refs={refs} />
           <br />
           <img
             src={imgElement?.getAttribute('src') || ''}
@@ -176,11 +200,12 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[]; styles: an
       elements.push(
         <li key={i}>
           <ParseChangelog changelog={changelog} />
+          <RefLinks refs={refs} />
         </li>,
       );
     }
   }
-  return <ul>{elements}</ul>;
+  return <ul className={styles.listWrap}>{elements}</ul>;
 };
 
 const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
@@ -199,7 +224,7 @@ const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[]
   }, [data, componentPath]);
 };
 
-const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
+const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
   const { children } = props;
   const [locale, lang] = useLocale(locales);
   const [show, setShow] = React.useState(false);
@@ -225,37 +250,46 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
       return {
         children: (
           <Typography>
-            <Typography.Title level={4}>
-              {version}
-              {bugVersionInfo.match && (
-                <Popover
-                  destroyTooltipOnHide
-                  placement="right"
-                  title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
-                  content={
-                    <ul className={styles.bugReasonList}>
-                      {bugVersionInfo.reason.map<React.ReactNode>((reason, index) => (
-                        <li key={`reason-${index}`}>
-                          <a type="link" target="_blank" rel="noreferrer" href={reason}>
-                            <BugOutlined />
-                            {reason
-                              ?.replace(/#.*$/, '')
-                              ?.replace(
-                                /^https:\/\/github\.com\/ant-design\/ant-design\/(issues|pull)\//,
-                                '#',
-                              )}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  }
-                >
-                  <BugOutlined className={styles.bug} />
-                </Popover>
-              )}
-            </Typography.Title>
-            {changelogList[0].releaseDate}
-            <RenderChangelogList changelogList={changelogList} styles={styles} />
+            <Flex className={styles.versionWrap} justify="flex-start" align="center" gap="middle">
+              <Button
+                color="default"
+                className={styles.versionTitle}
+                variant="link"
+                href={`/changelog${lang === 'cn' ? '-cn' : ''}/#${version.replace(/\./g, '').replace(/\s.*/g, '-')}`}
+              >
+                {version}
+                {bugVersionInfo.match && (
+                  <Popover
+                    destroyTooltipOnHide
+                    placement="right"
+                    title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
+                    content={
+                      <ul className={styles.bugReasonList}>
+                        {bugVersionInfo.reason.map<React.ReactNode>((reason, index) => (
+                          <li key={`reason-${index}`}>
+                            <a type="link" target="_blank" rel="noreferrer" href={reason}>
+                              <BugOutlined />
+                              {reason
+                                ?.replace(/#.*$/, '')
+                                ?.replace(
+                                  /^https:\/\/github\.com\/ant-design\/ant-design\/(issues|pull)\//,
+                                  '#',
+                                )}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    }
+                  >
+                    <BugOutlined className={styles.bug} />
+                  </Popover>
+                )}
+              </Button>
+              <Tag className={styles.versionTag} bordered={false} color="blue">
+                {changelogList[0]?.releaseDate}
+              </Tag>
+            </Flex>
+            <RenderChangelogList changelogList={changelogList} />
           </Typography>
         ),
       };

diff --git a/.dumi/theme/common/ComponentChangelog/index.tsx b/.dumi/theme/common/ComponentChangelog/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
-import type { ComponentChangelogProps } from './ComponentChangelog';
 import ComponentChangelog from './ComponentChangelog';
 
-export default (props: ComponentChangelogProps) => (
+const ChangeLog: React.FC<Readonly<React.PropsWithChildren>> = ({ children }) => (
   <React.Suspense fallback={null}>
-    <ComponentChangelog {...props} />
+    <ComponentChangelog>{children}</ComponentChangelog>
   </React.Suspense>
 );
+
+export default ChangeLog;
diff --git a/.dumi/theme/slots/Content/Contributors.tsx b/.dumi/theme/slots/Content/Contributors.tsx
@@ -1,16 +1,13 @@
-import React, { useContext } from 'react';
 import ContributorsList from '@qixian.cs/github-contributors-list';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import { useIntl } from 'dumi';
+import React, { useContext } from 'react';
 
 import SiteContext from '../SiteContext';
 import ContributorAvatar from './ContributorAvatar';
 
 const useStyle = createStyles(({ token, css }) => ({
-  contributorsList: css`
-    margin-top: 120px !important;
-  `,
   listMobile: css`
     margin: 1em 0 !important;
   `,
@@ -50,11 +47,11 @@ const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
   }
 
   return (
-    <div className={classNames(styles.contributorsList, { [styles.listMobile]: isMobile })}>
+    <div className={classNames({ [styles.listMobile]: isMobile })}>
       <div className={styles.title}>{formatMessage({ id: 'app.content.contributors' })}</div>
       <ContributorsList
         cache
-        repo="ant-design"
+        repo="x"
         owner="ant-design"
         fileName={filename}
         className={styles.list}

diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
@@ -52,10 +52,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
         <InViewSuspense fallback={null}>
           <DocAnchor showDebug={showDebug} debugDemos={debugDemos} />
         </InViewSuspense>
-        <article
-          className={classNames(styles.articleWrapper, { rtl: isRTL })}
-          style={{ padding: pathname.startsWith('/docs/playground') ? 24 : undefined }}
-        >
+        <article className={classNames(styles.articleWrapper, { rtl: isRTL })}>
           {meta.frontmatter?.title ? (
             <Flex justify="space-between">
               <Typography.Title style={{ fontSize: 32, position: 'relative' }}>
@@ -97,9 +94,11 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
               juejinLink={meta.frontmatter.juejin_url}
             />
           </InViewSuspense>
-          <InViewSuspense fallback={<div style={{ height: 50, marginTop: 120 }} />}>
-            <Contributors filename={meta.frontmatter.filename} />
-          </InViewSuspense>
+          <div style={{ marginTop: 120 }}>
+            <InViewSuspense fallback={<div style={{ height: 50 }} />}>
+              <Contributors filename={meta.frontmatter.filename} />
+            </InViewSuspense>
+          </div>
         </article>
         <InViewSuspense fallback={null}>
           <PrevAndNext rtl={isRTL} />