📝 Add components count in component page

site/bisheng.config.js

@@ -45,6 +45,7 @@ module.exports = {
       其他: 6,
       Other: 6,
       Components: 100,
+      组件: 100,
     },
     typeOrder: {
       General: 0,

site/theme/static/common.less

@@ -100,13 +100,21 @@ a {
 }
 
 // reset menu text color
-.menu-site .ant-menu-item > a {
-  color: @site-text-color;
-}
+.menu-site {
+  .ant-menu-item > a {
+    color: @site-text-color;
+  }
 
-.menu-site .ant-menu-item-selected > a,
-.menu-site .ant-menu-item > a:hover {
-  color: @primary-color;
+  .ant-menu-item-selected > a,
+  .ant-menu-item > a:hover {
+    color: @primary-color;
+  }
+
+  .menu-antd-components-count {
+    margin-left: .5em;
+    color: @disabled-color;
+    font-size: 12px;
+  }
 }
 
 #react-content {

site/theme/template/Content/MainContent.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'bisheng/router';
 import { Row, Col, Menu, Icon, Affix } from 'antd';
+import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import get from 'lodash/get';
 import MobileMenu from 'rc-drawer';
@@ -56,6 +57,26 @@ const getSideBarOpenKeys = nextProps => {
   return shouldOpenKeys;
 };
 
+const getSubMenuTitle = (menuItem) => {
+  if (menuItem.title !== 'Components') {
+    return menuItem.title;
+  }
+  let count = 0;
+  menuItem.children.forEach(item => {
+    if (item.children) {
+      count += item.children.length;
+    }
+  });
+  return (
+    <h4>
+      {menuItem.title === 'Components' ? (
+        <FormattedMessage id="app.header.menu.components" />
+      ) : menuItem.title}
+      <span className="menu-antd-components-count">{count}</span>
+    </h4>
+  );
+};
+
 export default class MainContent extends Component {
   static contextTypes = {
     intl: PropTypes.object.isRequired,
@@ -117,7 +138,10 @@ export default class MainContent extends Component {
     return menuItems.map(menuItem => {
       if (menuItem.children) {
         return (
-          <SubMenu title={<h4>{menuItem.title}</h4>} key={menuItem.title}>
+          <SubMenu
+            title={getSubMenuTitle(menuItem)}
+            key={menuItem.title}
+          >
             {menuItem.children.map(child => {
               if (child.type === 'type') {
                 return (