docs: add ProComponents cards (#33647)

* merge

* merge

* docs: add ProComponents cards

Co-authored-by: 期贤 <qixian.cs@antgroup.com>

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>
                     );
                   })}

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(
+          componentsData={getModuleData(this.props)
-            ({ meta }) => meta.category === 'Components',
+            .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',
+                },
+              },
+            ])}
         />
       );
     }

site/themeConfig.js

@@ -36,6 +36,8 @@ module.exports = {
     原则: 1,
     Principles: 1,
     全局规则: 2,
+    重型组件: 8,
+    ProComponents: 8,
     'Global Rules': 2,
     模板文档: 3,
     'Template Document': 3,