Merge branch 'master' into v2

8 years ago · bb35833eb4
18 changed files with 150 additions and 83 deletions
--- a/.babelrc.js
+++ b/.babelrc.js
@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    [
+      'babel-plugin-module-resolver',
+      {
+        alias: {
+          components: './src/components',
+        },
+      },
+    ],
+  ],
+};
--- a/package.json
+++ b/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%",
--- a/src/common/menu.js
+++ b/src/common/menu.js
@ -13,6 +13,7 @@ const menuData = [{
  }, {
    name: '工作台',
    path: 'workplace',
+    // hideInBreadcrumb: true,
    // hideInMenu: true,
  }],
 }, {
--- a/src/common/router.js
+++ b/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;
  });
--- a/src/components/Charts/ChartCard/index.d.ts
+++ b/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;
--- a/src/components/Charts/ChartCard/index.js
+++ b/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>
  );
 };
--- a/src/components/Charts/Pie/index.d.ts
+++ b/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;
 }

--- a/src/components/Charts/Pie/index.js
+++ b/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>
--- a/src/components/Charts/demo/chart-card.md
+++ b/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,
+);
+```
--- a/src/components/Charts/demo/mix.md
+++ b/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
--- a/src/components/Charts/demo/pie.md
+++ b/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,
+);
+```
--- a/src/components/Charts/index.md
+++ b/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

--- a/src/layouts/BasicLayout.js
+++ b/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() {
--- a/src/routes/Dashboard/Analysis.js
+++ b/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}
              />
--- a/src/routes/Dashboard/Monitor.js
+++ b/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}
--- a/src/routes/List/CardList.less
+++ b/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 {
--- a/src/routes/List/Projects.less
+++ b/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 {
--- a/src/utils/utils.js
+++ b/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;