diff --git a/.roadhogrc b/.roadhogrc index 3449c335edaf7b245b045b289c9e8cb32a1f9ef2..3a08204bc642335dd8f105b584d099f03ef14614 100755 --- a/.roadhogrc +++ b/.roadhogrc @@ -7,12 +7,7 @@ "transform-runtime", "transform-decorators-legacy", "transform-class-properties", - ["import", { "libraryName": "antd", "style": true }], - ["module-resolver", { - "alias": { - "react-router": "dva/router" - } - }] + ["import", { "libraryName": "antd", "style": true }] ] }, "production": { @@ -20,12 +15,7 @@ "transform-runtime", "transform-decorators-legacy", "transform-class-properties", - ["import", { "libraryName": "antd", "style": true }], - ["module-resolver", { - "alias": { - "react-router": "dva/router" - } - }] + ["import", { "libraryName": "antd", "style": true }] ] } }, diff --git a/package.json b/package.json index 84539dc5b5247e851698ff465988a8fde4da8fd5..5b7674adeafb1458d49b8f03c5069cac63b894e7 100755 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "babel-jest": "^21.0.0", "babel-plugin-dva-hmr": "^0.3.2", "babel-plugin-import": "^1.2.1", - "babel-plugin-module-resolver": "^2.7.1", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.9.0", diff --git a/src/components/EditableLinkGroup/index.js b/src/components/EditableLinkGroup/index.js index ba99796475e4363ae8f29aeff9e0a87d9d3f9ae2..c876103b9f6be4be91da8f140b493639d15bcef8 100644 --- a/src/components/EditableLinkGroup/index.js +++ b/src/components/EditableLinkGroup/index.js @@ -1,6 +1,5 @@ -import React, { PureComponent } from 'react'; +import React, { PureComponent, createElement } from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router'; import { Button, Icon } from 'antd'; import styles from './index.less'; @@ -9,27 +8,31 @@ import styles from './index.less'; class EditableLinkGroup extends PureComponent { static defaultProps = { links: [], - onAdd: () => { - }, - } - state = { - links: this.props.links, + onAdd: () => {}, + linkElement: 'a', }; - handleOnClick() { - const { onAdd } = this.props; - onAdd(); - } + static propTypes = { + links: PropTypes.array, + onAdd: PropTypes.func, + linkElement: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + }; render() { - const { links } = this.state; + const { links, linkElement, onAdd } = this.props; return (
{ - links.map(link => {link.title}) + links.map(link => ( + createElement(linkElement, { + key: `linkGroup-item-${link.id || link.title}`, + to: link.href, + href: link.href, + }, link.title) + )) } { - } @@ -38,9 +41,4 @@ class EditableLinkGroup extends PureComponent { } } -EditableLinkGroup.propTypes = { - links: PropTypes.array, - onAdd: PropTypes.func, -}; - export default EditableLinkGroup; diff --git a/src/components/Exception/index.js b/src/components/Exception/index.js index d6d847b96ebf7483a3e36bb035df56e30673dfa4..7d877043b40fbf6cbd07cc2ecbd3bdab8a0a7755 100644 --- a/src/components/Exception/index.js +++ b/src/components/Exception/index.js @@ -1,12 +1,10 @@ -import React from 'react'; +import React, { createElement } from 'react'; import classNames from 'classnames'; import { Button } from 'antd'; -import { Link } from 'react-router'; import config from './typeConfig'; import styles from './index.less'; - -export default ({ className, type, title, desc, img, actions, ...rest }) => { +export default ({ className, linkElement = 'a', type, title, desc, img, actions, ...rest }) => { const pageType = type in config ? type : '404'; const clsString = classNames(styles.exception, className); return ( @@ -21,7 +19,13 @@ export default ({ className, type, title, desc, img, actions, ...rest }) => {

{title || config[pageType].title}

{desc || config[pageType].desc}
- {actions || } + { + actions || + createElement(linkElement, { + to: '/', + href: '/', + }, ) + }
diff --git a/src/components/Exception/index.md b/src/components/Exception/index.md index c5f6dd73d47f0ccba592d263b0b5703c0df587b6..8eea00c5e7089faa8f793ac72d670d505063d3b0 100644 --- a/src/components/Exception/index.md +++ b/src/components/Exception/index.md @@ -16,3 +16,4 @@ cols: 1 | desc | 补充描述 | ReactNode | - | | img | 背景图片地址 | string | - | | actions | 建议操作,配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - | +| linkElement | 定义链接的元素,默认为 `a` | string\|ReactElement | - | diff --git a/src/components/GlobalFooter/index.less b/src/components/GlobalFooter/index.less index c5e1cad452318884bb10e56bbea558d0cf6c9033..7fce6004259392342e1aeef311cce6af02fa34a6 100644 --- a/src/components/GlobalFooter/index.less +++ b/src/components/GlobalFooter/index.less @@ -10,10 +10,15 @@ a { color: @text-color-secondary; + transition: all .3s; &:not(:last-child) { margin-right: 40px; } + + &:hover { + color: @text-color; + } } } diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js index 97ea900dcd2f455fea46a4a1cf9556f497f56f2f..5fbe3648b995312470fcf1c38696578564044f61 100644 --- a/src/components/PageHeader/index.js +++ b/src/components/PageHeader/index.js @@ -1,19 +1,11 @@ -import React, { PureComponent } from 'react'; +import React, { PureComponent, createElement } from 'react'; import PropTypes from 'prop-types'; import { Breadcrumb, Tabs } from 'antd'; -import { Link } from 'react-router'; import classNames from 'classnames'; import styles from './index.less'; const { TabPane } = Tabs; -function itemRender(route, params, routes, paths) { - const last = routes.indexOf(route) === routes.length - 1; - return (last || !route.component) - ? {route.breadcrumbName} - : {route.breadcrumbName}; -} - export default class PageHeader extends PureComponent { static contextTypes = { routes: PropTypes.array, @@ -34,10 +26,22 @@ export default class PageHeader extends PureComponent { breadcrumbNameMap: this.props.breadcrumbNameMap || this.context.breadcrumbNameMap, }; }; + itemRender = (route, params, routes, paths) => { + const { linkElement = 'a' } = this.props; + const last = routes.indexOf(route) === routes.length - 1; + return (last || !route.component) + ? {route.breadcrumbName} + : createElement(linkElement, { + href: paths.join('/') || '/', + to: paths.join('/') || '/', + }, route.breadcrumbName); + } render() { const { routes, params, location, breadcrumbNameMap } = this.getBreadcrumbProps(); - const { title, logo, action, content, extraContent, - breadcrumbList, tabList, className } = this.props; + const { + title, logo, action, content, extraContent, + breadcrumbList, tabList, className, linkElement = 'a', + } = this.props; const clsString = classNames(styles.pageHeader, className); let breadcrumb; if (routes && params) { @@ -46,7 +50,7 @@ export default class PageHeader extends PureComponent { className={styles.breadcrumb} routes={routes.filter(route => route.breadcrumbName)} params={params} - itemRender={itemRender} + itemRender={this.itemRender} /> ); } else if (location && location.pathname) { @@ -55,15 +59,19 @@ export default class PageHeader extends PureComponent { const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; return ( - - {breadcrumbNameMap[url] || breadcrumbNameMap[url.replace('/', '')] || url} - + {createElement(linkElement, { + to: url, + href: url, + }, breadcrumbNameMap[url] || breadcrumbNameMap[url.replace('/', '')] || url)} ); }); const breadcrumbItems = [( - Home + {createElement(linkElement, { + to: '/', + href: '/', + }, '首页')} )].concat(extraBreadcrumbItems); breadcrumb = ( diff --git a/src/components/PageHeader/index.md b/src/components/PageHeader/index.md index 6ec9b6dac417437a8525534e01a47108159a65b1..5900e703bf8c87db623c5a54eb67f335886f91b1 100644 --- a/src/components/PageHeader/index.md +++ b/src/components/PageHeader/index.md @@ -1,6 +1,6 @@ --- type: General -title: PageHeader +title: PageHeader subtitle: 页头 cols: 1 --- @@ -21,5 +21,6 @@ cols: 1 | breadcrumbList | 面包屑数据,配置了 `routes` `params` 时此属性无效 | array<{title: ReactNode, href?: string}> | - | | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | - | | onTabChange | 切换面板的回调 | (key) => void | - | +| linkElement | 定义链接的元素,默认为 `a`,可传入 react-router 的 Link | string\|ReactElement | - | > 面包屑的配置方式有两种,一是结合 `react-router`,通过配置 `routes` 及 `params` 实现,类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router);二是直接配置 `breadcrumbList`。 你也可以将 `routes` 及 `params` 放到 context 中,`PageHeader` 组件会自动获取。 diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js index 0b04067a3eacf0a81ce9b5bbca7a4f5226be50cd..8ab201883fcc249ef8551cf03f7dfd70415dc05c 100644 --- a/src/layouts/PageHeaderLayout.js +++ b/src/layouts/PageHeaderLayout.js @@ -1,10 +1,11 @@ import React from 'react'; +import { Link } from 'dva/router'; import PageHeader from '../components/PageHeader'; export default ({ children, wrapperClassName, top, ...restProps }) => (
{top} - + {children ?
{children}
: null}
); diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js index bb293d6dc87b3d7e21da5152d03e579e3abb1774..d964fc478de43c35b5fbc839c273ef9645750997 100644 --- a/src/routes/Dashboard/Workplace.js +++ b/src/routes/Dashboard/Workplace.js @@ -212,6 +212,7 @@ export default class Workplace extends PureComponent { {}} links={links} + linkElement={Link} /> ; +export default () => ( + +); diff --git a/src/routes/Exception/404.js b/src/routes/Exception/404.js index c5ac53b0c6e79ececfd509d8bf3ea6e3275f9a13..7d76d938c30ec1d83bfd9324c917056ac58d4450 100644 --- a/src/routes/Exception/404.js +++ b/src/routes/Exception/404.js @@ -1,4 +1,7 @@ import React from 'react'; +import { Link } from 'dva/router'; import Exception from '../../components/Exception'; -export default () => ; +export default () => ( + +); diff --git a/src/routes/Exception/500.js b/src/routes/Exception/500.js index 61d77c1e8efd68822597fc673c5deceba35230ef..fa84eee54a5c4c193e8f814afaf156a995cacd31 100644 --- a/src/routes/Exception/500.js +++ b/src/routes/Exception/500.js @@ -1,4 +1,7 @@ import React from 'react'; +import { Link } from 'dva/router'; import Exception from '../../components/Exception'; -export default () => ; +export default () => ( + +);