Merge branch 'master' into v2

.babelrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    [
+      'babel-plugin-module-resolver',
+      {
+        alias: {
+          components: './src/components',
+        },
+      },
+    ],
+  ],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-pro",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "An out-of-box UI solution for enterprise applications",
   "private": true,
   "scripts": {
@@ -51,6 +51,7 @@
     "babel-eslint": "^8.1.2",
     "babel-plugin-dva-hmr": "^0.4.1",
     "babel-plugin-import": "^1.6.7",
+    "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "cross-env": "^5.1.1",
     "cross-port-killer": "^1.0.1",
@@ -83,7 +84,7 @@
     "**/*.less": "stylelint --syntax less"
   },
   "engines": {
-    "node" : ">=8.0.0"
+    "node": ">=8.0.0"
   },
   "browserslist": [
     "> 1%",

src/common/menu.js

@@ -13,6 +13,7 @@ const menuData = [{
   }, {
     name: '工作台',
     path: 'workplace',
+    // hideInBreadcrumb: true,
     // hideInMenu: true,
   }],
 }, {

src/common/router.js

@@ -219,6 +219,7 @@ export const getRouterData = (app) => {
       ...router,
       name: router.name || menuItem.name,
       authority: router.authority || menuItem.authority,
+      hideInBreadcrumb: router.hideInBreadcrumb || menuItem.hideInBreadcrumb,
     };
     routerData[path] = router;
   });

src/components/Charts/ChartCard/index.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 export interface IChartCardProps {
   title: React.ReactNode;
   action?: React.ReactNode;
-  total?: React.ReactNode | number;
+  total?: React.ReactNode | function | number;
   footer?: React.ReactNode;
   contentHeight?: number;
   avatar?: React.ReactNode;

src/components/Charts/ChartCard/index.js

@@ -10,6 +10,9 @@ const renderTotal = (total) => {
     case undefined:
       totalDom = null;
       break;
+    case 'function':
+      totalDom = <div className={styles.total}>{total()}</div>;
+      break;
     default:
       totalDom = <div className={styles.total}>{total}</div>;
   }
@@ -17,18 +20,22 @@ const renderTotal = (total) => {
 };
 
 const ChartCard = ({
-  loading = false, contentHeight, title, avatar, action, total, footer, children, ...rest
+  loading = false,
+  contentHeight,
+  title,
+  avatar,
+  action,
+  total,
+  footer,
+  children,
+  ...rest
 }) => {
   const content = (
     <div className={styles.chartCard}>
       <div
-        className={classNames(styles.chartTop, { [styles.chartTopMargin]: (!children && !footer) })}
+        className={classNames(styles.chartTop, { [styles.chartTopMargin]: !children && !footer })}
       >
-        <div className={styles.avatar}>
-          {
-            avatar
-          }
-        </div>
+        <div className={styles.avatar}>{avatar}</div>
         <div className={styles.metaWrap}>
           <div className={styles.meta}>
             <span className={styles.title}>{title}</span>
@@ -37,31 +44,26 @@ const ChartCard = ({
           {renderTotal(total)}
         </div>
       </div>
-      {
-        children && (
-          <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
-            <div className={contentHeight && styles.contentFixed}>
-              {children}
-            </div>
-          </div>
-        )
-      }
-      {
-        footer && (
-          <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
-            {footer}
-          </div>
-        )
-      }
+      {children && (
+        <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
+          <div className={contentHeight && styles.contentFixed}>{children}</div>
+        </div>
+      )}
+      {footer && (
+        <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
+          {footer}
+        </div>
+      )}
     </div>
   );
 
   return (
-    <Card
-      bodyStyle={{ padding: '20px 24px 8px 24px' }}
-      {...rest}
-    >
-      {<Spin spinning={loading} wrapperClassName={styles.spin}>{content}</Spin>}
+    <Card bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
+      {
+        <Spin spinning={loading} wrapperClassName={styles.spin}>
+          {content}
+        </Spin>
+      }
     </Card>
   );
 };

src/components/Charts/Pie/index.d.ts

@@ -10,10 +10,10 @@ export interface IPieProps {
     x: string | string;
     y: number;
   }>;
-  total?: string;
+  total?: string | function;
   title?: React.ReactNode;
   tooltip?: boolean;
-  valueFormat?: (value: string) => string;
+  valueFormat?: (value: string) => string | React.ReactNode;
   subTitle?: React.ReactNode;
 }
 

src/components/Charts/Pie/index.js

@@ -221,7 +221,9 @@ export default class Pie extends Component {
               <div className={styles.total}>
                 {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
                 {/* eslint-disable-next-line */}
-                {total && <div className="pie-stat" dangerouslySetInnerHTML={{ __html: total }} />}
+                {total && (
+                  <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
+                )}
               </div>
             )}
           </div>
@@ -240,12 +242,7 @@ export default class Pie extends Component {
                 <span className={styles.percent}>
                   {`${(isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}
                 </span>
-                <span
-                  className={styles.value}
-                  dangerouslySetInnerHTML={{
-                    __html: valueFormat ? valueFormat(item.y) : item.y,
-                  }}
-                />
+                <span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span>
               </li>
             ))}
           </ul>

src/components/Charts/demo/chart-card.md

@@ -5,7 +5,7 @@ title: 图表卡片
 
 用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
 
-````jsx
+```jsx
 import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
 import Trend from 'ant-design-pro/lib/Trend';
 import { Row, Col, Icon, Tooltip } from 'antd';
@@ -16,18 +16,33 @@ ReactDOM.render(
     <Col span={24}>
       <ChartCard
         title="销售额"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
-        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
+        action={
+          <Tooltip title="指标说明">
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={() => (
+          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
+        )}
+        footer={
+          <Field label="日均销售额" value={numeral(12423).format("0,0")} />
+        }
         contentHeight={46}
       >
         <span>
           周同比
-          <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
+          <Trend flag="up" style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}>
+            12%
+          </Trend>
         </span>
         <span style={{ marginLeft: 16 }}>
           日环比
-          <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
+          <Trend
+            flag="down"
+            style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}
+          >
+            11%
+          </Trend>
         </span>
       </ChartCard>
     </Col>
@@ -41,25 +56,40 @@ ReactDOM.render(
             alt="indicator"
           />
         }
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
-        footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
+        action={
+          <Tooltip title="指标说明">
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={() => (
+          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
+        )}
+        footer={
+          <Field label="日均销售额" value={numeral(12423).format("0,0")} />
+        }
       />
     </Col>
     <Col span={24} style={{ marginTop: 24 }}>
       <ChartCard
         title="移动指标"
-        avatar={(
+        avatar={
           <img
             alt="indicator"
             style={{ width: 56, height: 56 }}
             src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
           />
+        }
+        action={
+          <Tooltip title="指标说明">
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={() => (
+          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
         )}
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={yuan(126560)}
       />
     </Col>
-  </Row>
-, mountNode);
-````
+  </Row>,
+  mountNode,
+);
+```

src/components/Charts/demo/mix.md

@@ -27,6 +27,7 @@ ReactDOM.render(
     <Col span={24}>
       <ChartCard
         title="搜索用户数量"
+        total={numeral(8846).format('0,0')}
         contentHeight={134}
       >
         <NumberInfo

src/components/Charts/demo/pie.md

@@ -3,7 +3,7 @@ order: 5
 title: 饼状图
 ---
 
-````jsx
+```jsx
 import { Pie, yuan } from 'ant-design-pro/lib/Charts';
 
 const salesPieData = [
@@ -38,10 +38,17 @@ ReactDOM.render(
     hasLegend
     title="销售额"
     subTitle="销售额"
-    total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
+    total={() => (
+      <span
+        dangerouslySetInnerHTML={{
+          __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))
+        }}
+      />
+    )}
     data={salesPieData}
-    valueFormat={val => yuan(val)}
+    valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
     height={294}
-  />
-, mountNode);
-````
+  />,
+  mountNode,
+);
+```

src/components/Charts/index.md

@@ -19,7 +19,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 |----------|------------------------------------------|-------------|-------|
 | title | 卡片标题 | ReactNode\|string | - |
 | action | 卡片操作 | ReactNode | - |
-| total | 数据总量 | ReactNode \| number | - |
+| total | 数据总量 | ReactNode \| number \| function | - |
 | footer | 卡片底部 | ReactNode | - |
 | contentHeight | 内容区域高度 | number | - |
 | avatar | 右侧图标 | React.ReactNode | - |
@@ -78,7 +78,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | valueFormat | 显示值的格式化函数 | function | - |
 | title | 图表标题 | ReactNode\|string | - |
 | subTitle | 图表子标题 | ReactNode\|string | - |
-| total | 图标中央的总数 | string | - |
+| total | 图标中央的总数 | string | function | - |
 
 ### Radar
 

src/layouts/BasicLayout.js

@@ -20,6 +20,25 @@ const { AuthorizedRoute, check } = Authorized;
 
 const RightSidebar = connect(({ setting }) => ({ ...setting }))(Sidebar);
 
+/**
+ * 获取面包屑映射
+ * @param {Object} menuData 菜单配置
+ * @param {Object} routerData 路由配置
+ */
+const getBreadcrumbNameMap = (menuData, routerData) => {
+  const result = {};
+  const childResult = {};
+  for (const i of menuData) {
+    if (!routerData[i.path]) {
+      result[i.path] = i;
+    }
+    if (i.children) {
+      Object.assign(childResult, getBreadcrumbNameMap(i.children, routerData));
+    }
+  }
+  return Object.assign({}, routerData, result, childResult);
+};
+
 const query = {
   'screen-xs': {
     maxWidth: 575,
@@ -46,10 +65,10 @@ class BasicLayout extends React.PureComponent {
     breadcrumbNameMap: PropTypes.object,
   };
   getChildContext() {
-    const { location, routerData } = this.props;
+    const { location, routerData, menuData } = this.props;
     return {
       location,
-      breadcrumbNameMap: routerData,
+      breadcrumbNameMap: getBreadcrumbNameMap(menuData, routerData),
     };
   }
   getPageTitle() {

src/routes/Dashboard/Analysis.js

@@ -254,7 +254,7 @@ export default class Analysis extends Component {
                   <Icon type="info-circle-o" />
                 </Tooltip>
               }
-              total={yuan(126560)}
+              total={() => <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />}
               footer={<Field label="日均销售额" value={`￥${numeral(12423).format('0,0')}`} />}
               contentHeight={46}
             >
@@ -453,9 +453,15 @@ export default class Analysis extends Component {
               <Pie
                 hasLegend
                 subTitle="销售额"
-                total={yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))}
+                total={() => (
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0)),
+                    }}
+                  />
+                )}
                 data={salesPieData}
-                valueFormat={val => yuan(val)}
+                valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
                 height={248}
                 lineWidth={4}
               />

src/routes/Dashboard/Monitor.js

@@ -84,20 +84,6 @@ export default class Monitor extends PureComponent {
               bordered={false}
             >
               <Gauge
-                format={(val) => {
-                  switch (parseInt(val, 10)) {
-                    case 20:
-                      return '差';
-                    case 40:
-                      return '中';
-                    case 60:
-                      return '良';
-                    case 80:
-                      return '优';
-                    default:
-                      return '';
-                  }
-                }}
                 title="跳出率"
                 height={180}
                 percent={87}

src/routes/List/CardList.less

@@ -10,6 +10,8 @@
         margin-bottom: 12px;
         & > a {
           color: @heading-color;
+          display: inline-block;
+          max-width: 100%;
         }
       }
       .ant-card-actions {

src/routes/List/Projects.less

@@ -10,6 +10,8 @@
         margin-bottom: 4px;
         & > a {
           color: @heading-color;
+          display: inline-block;
+          max-width: 100%;
         }
       }
       .ant-card-meta-description {

src/utils/utils.js

@@ -142,10 +142,10 @@ export function getRoutes(path, routerData) {
   const renderRoutes = renderArr.map((item) => {
     const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);
     return {
+      exact,
       ...routerData[`${path}${item}`],
       key: `${path}${item}`,
       path: `${path}${item}`,
-      exact,
     };
   });
   return renderRoutes;