diff --git a/.babelrc.js b/.babelrc.js new file mode 100644 index 0000000000000000000000000000000000000000..96df80013f0ad6a1e734cfae1def7407e022e720 --- /dev/null +++ b/.babelrc.js @@ -0,0 +1,12 @@ +module.exports = { + plugins: [ + [ + 'babel-plugin-module-resolver', + { + alias: { + components: './src/components', + }, + }, + ], + ], +}; \ No newline at end of file diff --git a/package.json b/package.json index 44dec94fc3f1514bddc911fb0be1fa9dea69d866..572201ade3e5c34a3c10f9658bbb0a170a2fb848 100755 --- 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%", diff --git a/src/common/menu.js b/src/common/menu.js index e85a612d998463dd80fc550a34f7fc97c94d9feb..456b8101cbf56cd5952c48e1f6c84ad355f2f044 100644 --- a/src/common/menu.js +++ b/src/common/menu.js @@ -13,6 +13,7 @@ const menuData = [{ }, { name: '工作台', path: 'workplace', + // hideInBreadcrumb: true, // hideInMenu: true, }], }, { diff --git a/src/common/router.js b/src/common/router.js index b90b9b24b23ac77fdc4adcbc96187a506249966e..fb8637f40403e7f9b968867a50f4f03be51a2765 100644 --- 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; }); diff --git a/src/components/Charts/ChartCard/index.d.ts b/src/components/Charts/ChartCard/index.d.ts index 76470460aede98c676da760cbb39b675cb20a648..ad450dfa630fdf5f57b06afb05340799b882a0bf 100644 --- 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; diff --git a/src/components/Charts/ChartCard/index.js b/src/components/Charts/ChartCard/index.js index 99489f77bca8949fa4c6fb1fc76ee9f4b1b69d1d..035b31315f2825bfa8b0c67c2d8db054a6a3c4c9 100644 --- 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 =
{total()}
; + break; default: totalDom =
{total}
; } @@ -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 = (
-
- { - avatar - } -
+
{avatar}
{title} @@ -37,31 +44,26 @@ const ChartCard = ({ {renderTotal(total)}
- { - children && ( -
-
- {children} -
-
- ) - } - { - footer && ( -
- {footer} -
- ) - } + {children && ( +
+
{children}
+
+ )} + {footer && ( +
+ {footer} +
+ )}
); return ( - - {{content}} + + { + + {content} + + } ); }; diff --git a/src/components/Charts/Pie/index.d.ts b/src/components/Charts/Pie/index.d.ts index e9dcd1d4dffde04b38b624be1047b33c16844bea..5b19208d6979a57301ebff41a837e033f5cfe357 100644 --- 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; } diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index 528b2519d21b41dc3fbd75ffa5c3270534400c1b..2784ad60c8979904880ea5b51c1551a2f04ee306 100644 --- a/src/components/Charts/Pie/index.js +++ b/src/components/Charts/Pie/index.js @@ -221,7 +221,9 @@ export default class Pie extends Component {
{subTitle &&

{subTitle}

} {/* eslint-disable-next-line */} - {total &&
} + {total && ( +
{typeof total === 'function' ? total() : total}
+ )}
)}
@@ -240,12 +242,7 @@ export default class Pie extends Component { {`${(isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`} - + {valueFormat ? valueFormat(item.y) : item.y} ))} diff --git a/src/components/Charts/demo/chart-card.md b/src/components/Charts/demo/chart-card.md index 51204793e0574888d758f8e326866969f0fe6440..4da852b71442785b17d0ce07b149e4bef343dd20 100644 --- 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( } - total={yuan(126560)} - footer={} + action={ + + + + } + total={() => ( + + )} + footer={ + + } contentHeight={46} > 周同比 - 12% + + 12% + 日环比 - 11% + + 11% + @@ -41,25 +56,40 @@ ReactDOM.render( alt="indicator" /> } - action={} - total={yuan(126560)} - footer={} + action={ + + + + } + total={() => ( + + )} + footer={ + + } /> + } + action={ + + + + } + total={() => ( + )} - action={} - total={yuan(126560)} /> - -, mountNode); -```` + , + mountNode, +); +``` diff --git a/src/components/Charts/demo/mix.md b/src/components/Charts/demo/mix.md index 0c158e5f49c7e979d04b6d6ad71d1d144c09b4e9..fc64110ae4b9b16126409d51d0e8ad5afc423fd2 100644 --- a/src/components/Charts/demo/mix.md +++ b/src/components/Charts/demo/mix.md @@ -27,6 +27,7 @@ ReactDOM.render( now.y + pre, 0))} + total={() => ( + now.y + pre, 0)) + }} + /> + )} data={salesPieData} - valueFormat={val => yuan(val)} + valueFormat={val => } height={294} - /> -, mountNode); -```` + />, + mountNode, +); +``` diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md index e48220e595fc53f394df1340ecbf39ec099a940f..e292a247dce27f04cf3a9a244a42490dfab97c2d 100644 --- 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 diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 160edaef6b8a1c98a083111c093d234eeedd1dec..98b94c0291812cfdb4f982aefd98fe06f39170a1 100644 --- 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() { diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js index f760e27209d01e359d61003e041ebbba0b8a2e57..30d291e33f1a37fdc59dcacfa6ede66283fd79d2 100644 --- a/src/routes/Dashboard/Analysis.js +++ b/src/routes/Dashboard/Analysis.js @@ -254,7 +254,7 @@ export default class Analysis extends Component { } - total={yuan(126560)} + total={() => } footer={} contentHeight={46} > @@ -453,9 +453,15 @@ export default class Analysis extends Component { now.y + pre, 0))} + total={() => ( + now.y + pre, 0)), + }} + /> + )} data={salesPieData} - valueFormat={val => yuan(val)} + valueFormat={val => } height={248} lineWidth={4} /> diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js index a6daa3121ae73fe9582fad53f63d1b906c2037ba..76bf601c0d3c6b7a60e54627e7458c2d0b258b2a 100644 --- a/src/routes/Dashboard/Monitor.js +++ b/src/routes/Dashboard/Monitor.js @@ -84,20 +84,6 @@ export default class Monitor extends PureComponent { bordered={false} > { - switch (parseInt(val, 10)) { - case 20: - return '差'; - case 40: - return '中'; - case 60: - return '良'; - case 80: - return '优'; - default: - return ''; - } - }} title="跳出率" height={180} percent={87} diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less index c4c2e57351f28797d62246cb9bb55d63551659e4..7493f36e4faa22be0b1df0a5bf53adda66128b55 100644 --- 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 { diff --git a/src/routes/List/Projects.less b/src/routes/List/Projects.less index 890a1ad2ebf0efdc1ff0224fbf956f31f28116f7..93a8b448899f8d10892378259792eb62df05ae85 100644 --- 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 { diff --git a/src/utils/utils.js b/src/utils/utils.js index 0125082562581884f67a95f638ec522875749c79..c52c90cb2d5a01ee3fe44fa7605b82e1cf3fdb94 100644 --- 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;