diff --git a/.roadhogrc b/.roadhogrc
index 3449c335..3a08204b 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 84539dc5..5b7674ad 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 ba997964..c876103b 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 c5f6dd73..8eea00c5 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 c5e1cad4..7fce6004 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 97ea900d..5fbe3648 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 6ec9b6da..5900e703 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 0b04067a..8ab20188 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 bb293d6d..d964fc47 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 c5ac53b0..7d76d938 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 61d77c1e..fa84eee5 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 () => (
+
+);