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)
+ ))
}
{
-
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 () => (
+
+);