Merge branch 'master' into perf/remove-ie11-from-targets

ant-design · Dec 17, 2022 · feab7de · feab7de
2 parents b78653c + f3231bc
commit feab7de
Show file tree

Hide file tree

Showing 691 changed files with 31,777 additions and 21,956 deletions.
diff --git a/.antd-tools.config.js b/.antd-tools.config.js
@@ -1,23 +1,27 @@
 const fs = require('fs');
 const path = require('path');
 
+const restCssPath = path.join(process.cwd(), 'components', 'style', 'reset.css');
+const tokenStatisticPath = path.join(process.cwd(), 'components', 'version', 'token.json');
+const tokenMetaPath = path.join(process.cwd(), 'components', 'version', 'token-meta.json');
+
 function finalizeCompile() {
   if (fs.existsSync(path.join(__dirname, './es'))) {
-    // Build less entry file: dist/antd.less
-    fs.copyFileSync(
-      path.join(process.cwd(), 'components', 'style', 'reset.css'),
-      path.join(process.cwd(), 'es', 'style', 'reset.css'),
-    );
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'es', 'style', 'reset.css'));
+    fs.copyFileSync(tokenStatisticPath, path.join(process.cwd(), 'es', 'version', 'token.json'));
+    fs.copyFileSync(tokenMetaPath, path.join(process.cwd(), 'es', 'version', 'token-meta.json'));
+  }
+
+  if (fs.existsSync(path.join(__dirname, './lib'))) {
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'lib', 'style', 'reset.css'));
+    fs.copyFileSync(tokenStatisticPath, path.join(process.cwd(), 'lib', 'version', 'token.json'));
+    fs.copyFileSync(tokenMetaPath, path.join(process.cwd(), 'lib', 'version', 'token-meta.json'));
   }
 }
 
 function finalizeDist() {
   if (fs.existsSync(path.join(__dirname, './dist'))) {
-    // Build less entry file: dist/antd.less
-    fs.copyFileSync(
-      path.join(process.cwd(), 'components', 'style', 'reset.css'),
-      path.join(process.cwd(), 'dist', 'reset.css'),
-    );
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'dist', 'reset.css'));
   }
 }
 

diff --git a/.dumi/hooks/useLocale.tsx b/.dumi/hooks/useLocale.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useLocale as useDumiLocale } from 'dumi';
 
 export interface LocaleMap<Key extends string> {

diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx
@@ -1,5 +1,6 @@
-import React, { ReactNode, useMemo } from 'react';
-import { MenuProps } from 'antd';
+import type { ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import type { MenuProps } from 'antd';
 import { Link, useFullSidebarData, useSidebarData } from 'dumi';
 import useLocation from './useLocation';
 
@@ -10,7 +11,7 @@ export type UseMenuOptions = {
 
 const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
   const fullData = useFullSidebarData();
-  const { pathname } = useLocation();
+  const { pathname, search } = useLocation();
   const sidebarData = useSidebarData();
   const { before, after } = options;
 
@@ -43,7 +44,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
 
     return (
       sidebarItems?.reduce<Exclude<MenuProps['items'], undefined>>((result, group) => {
-        if (group.title) {
+        if (group?.title) {
           // 设计文档特殊处理二级分组
           if (pathname.startsWith('/docs/spec')) {
             const childrenGroup = group.children.reduce<
@@ -60,9 +61,9 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
             childItems.push(
               ...childrenGroup.default.map((item) => ({
                 label: (
-                  <Link to={item.link}>
+                  <Link to={`${item.link}${search}`}>
                     {before}
-                    {item.title}
+                    {item?.title}
                     {after}
                   </Link>
                 ),
@@ -77,9 +78,9 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                   key: type,
                   children: children?.map((item) => ({
                     label: (
-                      <Link to={item.link}>
+                      <Link to={`${item.link}${search}`}>
                         {before}
-                        {item.title}
+                        {item?.title}
                         {after}
                       </Link>
                     ),
@@ -89,20 +90,20 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
               }
             });
             result.push({
-              label: group.title,
-              key: group.title,
+              label: group?.title,
+              key: group?.title,
               children: childItems,
             });
           } else {
             result.push({
               type: 'group',
-              label: group.title,
-              key: group.title,
+              label: group?.title,
+              key: group?.title,
               children: group.children?.map((item) => ({
                 label: (
-                  <Link to={item.link}>
+                  <Link to={`${item.link}${search}`}>
                     {before}
-                    <span key="english">{item.title}</span>
+                    <span key="english">{item?.title}</span>
                     <span className="chinese" key="chinese">
                       {(item.frontmatter as any).subtitle}
                     </span>
@@ -114,12 +115,18 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
             });
           }
         } else {
+          const list = group.children || [];
+          // 如果有 date 字段，我们就对其进行排序
+          if (list.every((info) => info?.frontmatter?.date)) {
+            list.sort((a, b) => (a.frontmatter.date > b.frontmatter.date ? -1 : 1));
+          }
+
           result.push(
-            ...group.children?.map((item) => ({
+            ...list.map((item) => ({
               label: (
-                <Link to={item.link}>
+                <Link to={`${item.link}${search}`}>
                   {before}
-                  {item.title}
+                  {item?.title}
                   {after}
                 </Link>
               ),
@@ -130,7 +137,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
         return result;
       }, []) ?? []
     );
-  }, [sidebarData, fullData, pathname]);
+  }, [sidebarData, fullData, pathname, search]);
 
   return [menuItems, pathname];
 };

diff --git a/.dumi/pages/index-cn/index.tsx b/.dumi/pages/index-cn/index.tsx
@@ -1 +1,3 @@
-export { default } from '../index/index';
+import Homepage from '../index/index';
+
+export default Homepage;
diff --git a/.dumi/pages/index/components/Banner.tsx b/.dumi/pages/index/components/Banner.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { Button, Space, Typography } from 'antd';
+import { Link, useLocation } from 'dumi';
+import { css } from '@emotion/react';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import { GroupMask } from './Group';
-import { Link, useLocation } from 'dumi';
 import * as utils from '../../../theme/utils';
+import SiteContext from './SiteContext';
 
 const locales = {
   cn: {
@@ -20,67 +22,108 @@ const locales = {
   },
 };
 
+const useStyle = () => {
+  const { token } = useSiteToken();
+  const { isMobile } = React.useContext(SiteContext);
+
+  return {
+    titleBase: css`
+      h1& {
+        font-family: AliPuHui, ${token.fontFamily};
+      }
+    `,
+    title: isMobile
+      ? css`
+          h1& {
+            margin-bottom: ${token.margin}px;
+            font-weight: normal;
+            font-size: ${token.fontSizeHeading1 + 2}px;
+            line-height: ${token.lineHeightHeading2};
+          }
+        `
+      : css`
+          h1& {
+            margin-bottom: ${token.marginMD}px;
+            font-weight: 900;
+            font-size: 68px;
+          }
+        `,
+  };
+};
+
 export interface BannerProps {
   children?: React.ReactNode;
 }
 
 export default function Banner({ children }: BannerProps) {
-  const [locale, lang] = useLocale(locales);
+  const [locale] = useLocale(locales);
   const { pathname, search } = useLocation();
   const { token } = useSiteToken();
+  const styles = useStyle();
+  const { isMobile } = React.useContext(SiteContext);
 
   const isZhCN = utils.isZhCN(pathname);
 
   return (
     <>
       {/* Banner Placeholder Motion */}
-      <div
-        style={{
-          height: 320,
-          background: '#77C6FF',
-          display: 'flex',
-          flexWrap: 'nowrap',
-          justifyContent: 'center',
-        }}
-      >
+      {isMobile ? (
+        <img
+          src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JmlaR5oQn3MAAAAAAAAAAAAADrJ8AQ/original"
+          style={{ width: '100%' }}
+          alt=""
+        />
+      ) : (
         <div
           style={{
-            backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ)`,
-            flex: 'auto',
-            backgroundRepeat: 'repeat-x',
-            backgroundPosition: '100% 0',
-            backgroundSize: 'auto 100%',
+            height: 320,
+            background: '#77C6FF',
+            display: 'flex',
+            flexWrap: 'nowrap',
+            justifyContent: 'center',
           }}
-        />
-
-        <video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
-          <source
-            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
-            type="video/webm"
-          />
-          <source
-            src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
-            type="video/mp4"
+        >
+          <div
+            style={{
+              backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ)`,
+              flex: 'auto',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '100% 0',
+              backgroundSize: 'auto 100%',
+            }}
           />
-        </video>
 
-        <div
-          style={{
-            backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ)`,
-            flex: 'auto',
-            backgroundRepeat: 'repeat-x',
-            backgroundPosition: '0 0',
-            backgroundSize: 'auto 100%',
-          }}
-        />
-      </div>
+          <video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
+            <source
+              src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
+              type="video/webm"
+            />
+            <source
+              src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
+              type="video/mp4"
+            />
+          </video>
+
+          <div
+            style={{
+              backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ)`,
+              flex: 'auto',
+              backgroundRepeat: 'repeat-x',
+              backgroundPosition: '0 0',
+              backgroundSize: 'auto 100%',
+              marginLeft: -1,
+            }}
+          />
+        </div>
+      )}
 
       {/* Logo */}
       <div style={{ position: 'relative', background: '#fff' }}>
         {/* Image Bottom Right */}
         <img
           style={{ position: 'absolute', right: 0, top: 240, width: 240 }}
           src="https://gw.alipayobjects.com/zos/bmw-prod/b3b8dc41-dce8-471f-9d81-9a0204f27d03.svg"
+          alt="Ant Design"
         />
 
         <GroupMask
@@ -92,32 +135,26 @@ export default function Banner({ children }: BannerProps) {
         >
           {/* Image Left Top */}
           <img
-            style={{ position: 'absolute', left: 0, top: 0, width: 240 }}
+            style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
             src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
+            alt="bg"
           />
-          {/* Image Left Top */}
+          {/* Image Right Top */}
           <img
-            style={{ position: 'absolute', right: 120, top: 0, width: 240 }}
+            style={{ position: 'absolute', right: isMobile ? 0 : 120, top: 0, width: 240 }}
             src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
+            alt="bg"
           />
 
-          <Typography.Title
-            level={1}
-            style={{
-              fontFamily: `AliPuHui, ${token.fontFamily}`,
-              fontSize: token.fontSizes[9],
-              lineHeight: token.lineHeights[9],
-              fontWeight: 900,
-              marginBottom: token.marginMD,
-            }}
-          >
+          <Typography.Title level={1} css={[styles.titleBase, styles.title]}>
             Ant Design 5.0
           </Typography.Title>
           <Typography.Paragraph
             style={{
-              fontSize: token.fontSizeHeading5,
-              lineHeight: token.lineHeightHeading5,
+              fontSize: isMobile ? token.fontSizeHeading5 - 2 : token.fontSizeHeading5,
+              lineHeight: isMobile ? token.lineHeightSM : token.lineHeightHeading5,
               marginBottom: token.marginMD * 2,
+              padding: isMobile ? `0 ${token.paddingLG + 2}px` : 0,
             }}
           >
             <div>{locale.slogan}</div>