From e84fba5ae165bae2611caf302e6133dc404bfd94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Tue, 11 Jan 2022 10:51:45 +0800
Subject: [PATCH] docs: add ProComponents cards (#33647)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* merge

* merge

* docs: add ProComponents cards

Co-authored-by: 期贤 <qixian.cs@antgroup.com>
---
 .../template/Content/ComponentOverview.jsx    | 23 +++++-
 site/theme/template/Content/MainContent.jsx   | 77 ++++++++++++++++++-
 site/themeConfig.js                           |  2 +
 3 files changed, 96 insertions(+), 6 deletions(-)

diff --git a/site/theme/template/Content/ComponentOverview.jsx b/site/theme/template/Content/ComponentOverview.jsx
index eb9d2baf9c22..68810de31dd9 100644
--- a/site/theme/template/Content/ComponentOverview.jsx
+++ b/site/theme/template/Content/ComponentOverview.jsx
@@ -104,11 +104,28 @@ const ComponentOverview = ({
                     const url = `${component.filename
                       .replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '')
                       .toLowerCase()}/`;
-                    const href = getLocalizedPathname(url, locale === 'zh-CN', location.query);
+
+                    // 如果是 https 就不用处理了
+                    const href = url.startsWith('http')
+                      ? url
+                      : getLocalizedPathname(url, locale === 'zh-CN', location.query);
+
+                    /** Link 不能跳转到外链 */
+                    const ComponentLink = !url.startsWith('http') ? Link : 'a';
+
                     return (
                       <Col xs={24} sm={12} lg={8} xl={6} key={component.title}>
-                        <Link to={href} onClick={() => onClickCard(href.onClickCard)}>
+                        <ComponentLink
+                          to={href}
+                          href={href}
+                          onClick={() => onClickCard(href.onClickCard)}
+                        >
                           <Card
+                            bodyStyle={{
+                              backgroundRepeat: 'no-repeat',
+                              backgroundPosition: 'bottom right',
+                              backgroundImage: `url(${component.tag})`,
+                            }}
                             size="small"
                             className="components-overview-card"
                             title={
@@ -121,7 +138,7 @@ const ComponentOverview = ({
                               <img src={component.cover} alt={component.title} />
                             </div>
                           </Card>
-                        </Link>
+                        </ComponentLink>
                       </Col>
                     );
                   })}
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index b6a257779f9e..6c776b07676c 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -373,13 +373,84 @@ class MainContent extends Component {
   renderMainContent({ theme, setIframeTheme }) {
     const { localizedPageData, demos, location } = this.props;
     if (location.pathname.includes('components/overview')) {
+      const type = utils.isZhCN(location.pathname) ? '重型组件' : 'ProComponents';
       return (
         <ComponentOverview
           {...this.props}
           doc={localizedPageData}
-          componentsData={getModuleData(this.props).filter(
-            ({ meta }) => meta.category === 'Components',
-          )}
+          componentsData={getModuleData(this.props)
+            .filter(({ meta }) => meta.category === 'Components')
+            .concat([
+              {
+                meta: {
+                  category: 'Components',
+                  cover:
+                    'https://gw.alipayobjects.com/zos/antfincdn/4n5H%24UX%24j/bianzu%2525204.svg',
+                  filename: 'https://procomponents.ant.design/components/layout',
+                  subtitle: '高级布局',
+                  title: 'ProLayout',
+                  type,
+                  tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
+                },
+              },
+              {
+                meta: {
+                  category: 'Components',
+                  cover: 'https://gw.alipayobjects.com/zos/antfincdn/mStei5BFC/bianzu%2525207.svg',
+                  filename: 'https://procomponents.ant.design/components/form',
+                  subtitle: '高级表单',
+                  title: 'ProForm',
+                  type,
+                  tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
+                },
+              },
+              {
+                meta: {
+                  category: 'Components',
+                  cover:
+                    'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
+                  filename: 'https://procomponents.ant.design/components/table',
+                  subtitle: '高级表格',
+                  title: 'ProTable',
+                  type,
+                  tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
+                },
+              },
+              {
+                meta: {
+                  category: 'Components',
+                  cover:
+                    'https://gw.alipayobjects.com/zos/antfincdn/H0%26LSYYfh/bianzu%2525209.svg',
+                  filename: 'https://procomponents.ant.design/components/descriptions',
+                  subtitle: '高级定义列表',
+                  title: 'ProDescriptions',
+                  type,
+                  tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
+                },
+              },
+              {
+                meta: {
+                  category: 'Components',
+                  cover: 'https://gw.alipayobjects.com/zos/antfincdn/uZUmLtne5/bianzu%2525209.svg',
+                  filename: 'https://procomponents.ant.design/components/list',
+                  subtitle: '高级列表',
+                  title: 'ProList',
+                  type,
+                  tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
+                },
+              },
+              {
+                meta: {
+                  category: 'Components',
+                  cover: 'https://gw.alipayobjects.com/zos/antfincdn/N3eU432oA/bianzu%2525209.svg',
+                  filename: 'https://procomponents.ant.design/components/list',
+                  subtitle: '可编辑表格',
+                  title: 'EditableProTable',
+                  type,
+                  tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
+                },
+              },
+            ])}
         />
       );
     }
diff --git a/site/themeConfig.js b/site/themeConfig.js
index 0d972988794f..bf8c81cbd35c 100644
--- a/site/themeConfig.js
+++ b/site/themeConfig.js
@@ -36,6 +36,8 @@ module.exports = {
     原则: 1,
     Principles: 1,
     全局规则: 2,
+    重型组件: 8,
+    ProComponents: 8,
     'Global Rules': 2,
     模板文档: 3,
     'Template Document': 3,