- {tooltip ? (
-
- {children}
-
- ) : (
- children
- )}
+ {children}
);
+
+ return getTooltip({
+ tooltip,
+ overlayStyle: TooltipOverlayStyle,
+ title: children,
+ children: node,
+ });
}
const childNode = (
@@ -204,13 +251,12 @@ export default class Ellipsis extends Component {
return (
- {tooltip ? (
-
- {childNode}
-
- ) : (
- childNode
- )}
+ {getTooltip({
+ tooltip,
+ overlayStyle: TooltipOverlayStyle,
+ title: text,
+ children: childNode,
+ })}
{}
diff --git a/src/components/Exception/index.en-US.md b/src/components/Exception/index.en-US.md
index 320b0e71..37e7e807 100644
--- a/src/components/Exception/index.en-US.md
+++ b/src/components/Exception/index.en-US.md
@@ -10,9 +10,11 @@ Exceptions page is used to provide feedback on specific abnormal state. Usually,
Property | Description | Type | Default
---------|-------------|------|--------
+| backText | default return button text | ReactNode | back to home |
type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | -
title | title | ReactNode | -
desc | supplementary description | ReactNode | -
img | the url of background image | string | -
actions | suggested operations, a default 'Home' link will show if not set | ReactNode | -
-linkElement | to specify the element of link | string\|ReactElement | 'a'
\ No newline at end of file
+linkElement | to specify the element of link | string\|ReactElement | 'a'
+redirect | redirect path | string | '/'
\ No newline at end of file
diff --git a/src/components/Exception/index.js b/src/components/Exception/index.js
index 14703e34..2c7223cc 100644
--- a/src/components/Exception/index.js
+++ b/src/components/Exception/index.js
@@ -4,34 +4,58 @@ import { Button } from 'antd';
import config from './typeConfig';
import styles from './index.less';
-const Exception = ({ className, linkElement = 'a', type, title, desc, img, actions, ...rest }) => {
- const pageType = type in config ? type : '404';
- const clsString = classNames(styles.exception, className);
- return (
-
{children}
diff --git a/src/components/Ellipsis/index.less b/src/components/Ellipsis/index.less
index dd59e3fa..2c4a867c 100644
--- a/src/components/Ellipsis/index.less
+++ b/src/components/Ellipsis/index.less
@@ -9,7 +9,7 @@
position: relative;
.shadow {
display: block;
- position: relative;
+ position: absolute;
color: transparent;
opacity: 0;
z-index: -999;
diff --git a/src/components/Ellipsis/index.md b/src/components/Ellipsis/index.md
deleted file mode 100644
index e53cd1ce..00000000
--- a/src/components/Ellipsis/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title:
- en-US: Ellipsis
- zh-CN: Ellipsis
-subtitle: 文本自动省略号
-cols: 1
-order: 10
----
-
-文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
-
-## API
-
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-tooltip | 移动到文本展示完整内容的提示 | boolean | -
-length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -
-lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1`
diff --git a/src/components/Ellipsis/index.test.js b/src/components/Ellipsis/index.test.js
new file mode 100644
index 00000000..4d057b24
--- /dev/null
+++ b/src/components/Ellipsis/index.test.js
@@ -0,0 +1,13 @@
+import { getStrFullLength, cutStrByFullLength } from './index';
+
+describe('test calculateShowLength', () => {
+ it('get full length', () => {
+ expect(getStrFullLength('一二，a,')).toEqual(8);
+ });
+ it('cut str by full length', () => {
+ expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a');
+ });
+ it('cut str when length small', () => {
+ expect(cutStrByFullLength('一22三', 5)).toEqual('一22');
+ });
+});
diff --git a/src/components/Ellipsis/index.zh-CN.md b/src/components/Ellipsis/index.zh-CN.md
index 8fe98bb0..f7a70ead 100644
--- a/src/components/Ellipsis/index.zh-CN.md
+++ b/src/components/Ellipsis/index.zh-CN.md
@@ -14,3 +14,4 @@ order: 10
tooltip | 移动到文本展示完整内容的提示 | boolean | -
length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -
lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1`
+fullWidthRecognition | 是否将全角字符的长度视为2来计算字符串长度 | boolean | -
diff --git a/src/components/Exception/index.d.ts b/src/components/Exception/index.d.ts
index 5e32516a..a74abb1f 100644
--- a/src/components/Exception/index.d.ts
+++ b/src/components/Exception/index.d.ts
@@ -5,8 +5,11 @@ export interface IExceptionProps {
desc?: React.ReactNode;
img?: string;
actions?: React.ReactNode;
- linkElement?: React.ReactNode;
+ linkElement?: string | React.ComponentType;
style?: React.CSSProperties;
+ className?: string;
+ backText?: React.ReactNode;
+ redirect?: string;
}
export default class Exception extends React.Component
- {
diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js
index 773b9c84..c36cd672 100644
--- a/src/components/TagSelect/index.js
+++ b/src/components/TagSelect/index.js
@@ -15,14 +15,23 @@ const TagSelectOption = ({ children, checked, onChange, value }) => (
TagSelectOption.isTagSelectOption = true;
class TagSelect extends Component {
- state = {
- expand: false,
- value: this.props.value || this.props.defaultValue || [],
+ static defaultProps = {
+ hideCheckAll: false,
};
- componentWillReceiveProps(nextProps) {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ expand: false,
+ value: props.value || props.defaultValue || [],
+ };
+ }
+
+ static getDerivedStateFromProps(nextProps) {
if ('value' in nextProps && nextProps.value) {
- this.setState({ value: nextProps.value });
+ return { value: nextProps.value };
}
+ return null;
}
onChange = value => {
@@ -53,7 +62,8 @@ class TagSelect extends Component {
}
handleTagChange = (value, checked) => {
- const checkedTags = [...this.state.value];
+ const { value: StateValue } = this.state;
+ const checkedTags = [...StateValue];
const index = checkedTags.indexOf(value);
if (checked && index === -1) {
@@ -65,22 +75,20 @@ class TagSelect extends Component {
};
handleExpand = () => {
+ const { expand } = this.state;
this.setState({
- expand: !this.state.expand,
+ expand: !expand,
});
};
- isTagSelectOption = node => {
- return (
- node &&
- node.type &&
- (node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption')
- );
- };
+ isTagSelectOption = node =>
+ node &&
+ node.type &&
+ (node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption');
render() {
const { value, expand } = this.state;
- const { children, className, style, expandable } = this.props;
+ const { children, hideCheckAll, className, style, expandable } = this.props;
const checkedAll = this.getAllTags().length === value.length;
@@ -90,9 +98,11 @@ class TagSelect extends Component {
});
return (
11%
, mountNode);
-````
+```
diff --git a/src/components/Trend/index.js b/src/components/Trend/index.js
index 1cdceb2e..c476ef62 100644
--- a/src/components/Trend/index.js
+++ b/src/components/Trend/index.js
@@ -14,7 +14,7 @@ const Trend = ({ colorful = true, reverseColor = false, flag, children, classNam
);
return (
-
-
-
- 
;
+ }
+ if (typeof icon === 'string') {
+ return
+ {getIcon(item.icon)}
+ {name}
+
+ ) : (
+ name
+ )
+ }
+ key={item.path}
+ >
+ {this.getNavMenuItems(item.children)}
+
+ );
+ }
+ return {this.getMenuItemPath(item)} ;
+ };
+
+ /**
+ * 判断是否是http链接.返回 Link 或 a
+ * Judge whether it is http link.return a or Link
+ * @memberof SiderMenu
+ */
+ getMenuItemPath = item => {
+ const { name } = item;
+ const itemPath = this.conversionPath(item.path);
+ const icon = getIcon(item.icon);
+ const { target } = item;
+ // Is it a http link
+ if (/^https?:\/\//.test(itemPath)) {
+ return (
+
+ {icon}
+ {name}
+
+ );
+ }
+ const { location, isMobile, onCollapse } = this.props;
+ return (
+ {
+ onCollapse(true);
+ }
+ : undefined
+ }
+ >
+ {icon}
+ {name}
+
+ );
+ };
+
+ conversionPath = path => {
+ if (path && path.indexOf('http') === 0) {
+ return path;
+ }
+ return `/${path || ''}`.replace(/\/+/g, '/');
+ };
+
+ render() {
+ const {
+ openKeys,
+ theme,
+ mode,
+ location: { pathname },
+ } = this.props;
+ // if pathname can't match, use the nearest parent's key
+ let selectedKeys = this.getSelectedMenuKeys(pathname);
+ if (!selectedKeys.length && openKeys) {
+ selectedKeys = [openKeys[openKeys.length - 1]];
+ }
+ let props = {};
+ if (openKeys) {
+ props = {
+ openKeys,
+ };
+ }
+ const { handleOpenChange, style, menuData } = this.props;
+ return (
+
+ );
+ }
+}
diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index 7b5ed49a..e1b49d00 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -1,202 +1,59 @@
-import React, { PureComponent } from 'react';
-import { Layout, Menu, Icon } from 'antd';
-import pathToRegexp from 'path-to-regexp';
-import { Link } from 'dva/router';
+import React, { PureComponent, Suspense } from 'react';
+import { Layout } from 'antd';
+import classNames from 'classnames';
+import Link from 'umi/link';
import styles from './index.less';
-import { urlToList } from '../_utils/pathTools';
+import PageLoading from '../PageLoading';
+import { getDefaultCollapsedSubMenus } from './SiderMenuUtils';
+const BaseMenu = React.lazy(() => import('./BaseMenu'));
const { Sider } = Layout;
-const { SubMenu } = Menu;
-
-// Allow menu.js config icon as string or ReactNode
-// icon: 'setting',
-// icon: 'http://demo.com/icon.png',
-// icon:
- {getIcon(item.icon)}
- {item.name}
-
- ) : (
- item.name
- )
- }
- key={item.path}
- >
- {childrenItems}
-
- );
- }
- return null;
- } else {
- return {this.getMenuItemPath(item)} ;
- }
- };
- /**
- * 获得菜单子节点
- * @memberof SiderMenu
- */
- getNavMenuItems = menusData => {
- if (!menusData) {
- return [];
- }
- return menusData
- .filter(item => item.name && !item.hideInMenu)
- .map(item => {
- // make dom
- const ItemDom = this.getSubMenuOrItem(item);
- return ItemDom;
- })
- .filter(item => item);
- };
- // Get the currently selected menu
- getSelectedMenuKeys = () => {
- const { location: { pathname } } = this.props;
- return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
- };
- // conversion Path
- // 转化路径
- conversionPath = path => {
- if (path && path.indexOf('http') === 0) {
- return path;
- } else {
- return `/${path || ''}`.replace(/\/+/g, '/');
- }
- };
isMainMenu = key => {
- return this.menus.some(item => key && (item.key === key || item.path === key));
+ const { menuData } = this.props;
+ return menuData.some(item => {
+ if (key) {
+ return item.key === key || item.path === key;
+ }
+ return false;
+ });
};
+
handleOpenChange = openKeys => {
- const lastOpenKey = openKeys[openKeys.length - 1];
const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
this.setState({
- openKeys: moreThanOne ? [lastOpenKey] : [...openKeys],
+ openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys],
});
};
+
render() {
- const { logo, collapsed, onCollapse } = this.props;
+ const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
const { openKeys } = this.state;
- // Don't show popup menu when it is been collapsed
- const menuProps = collapsed
- ? {}
- : {
- openKeys,
- };
- // if pathname can't match, use the nearest parent's key
- let selectedKeys = this.getSelectedMenuKeys();
- if (!selectedKeys.length) {
- selectedKeys = [openKeys[openKeys.length - 1]];
- }
+ const defaultProps = collapsed ? {} : { openKeys };
+
+ const siderClassName = classNames(styles.sider, {
+ [styles.fixSiderbar]: fixSiderbar,
+ [styles.light]: theme === 'light',
+ });
return (
-
);
diff --git a/src/components/TagSelect/demo/controlled.md b/src/components/TagSelect/demo/controlled.md
new file mode 100644
index 00000000..4e9defa7
--- /dev/null
+++ b/src/components/TagSelect/demo/controlled.md
@@ -0,0 +1,50 @@
+---
+order: 3
+title: 受控模式
+---
+
+结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。
+
+```jsx
+import { Button } from 'antd';
+import TagSelect from 'ant-design-pro/lib/TagSelect';
+
+class Demo extends React.Component {
+ state = {
+ value: ['cat1'],
+ };
+ handleFormSubmit = value => {
+ this.setState({
+ value,
+ });
+ };
+ checkAll = () => {
+ this.setState({
+ value: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6'],
+ });
+ };
+ render() {
+ return (
+ {title || config[pageType].title}
-{desc || config[pageType].desc}
-
- {actions ||
- createElement(
- linkElement,
- {
- to: '/',
- href: '/',
- },
-
- )}
+class Exception extends React.PureComponent {
+ static defaultProps = {
+ backText: 'back to home',
+ redirect: '/',
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {};
+ }
+
+ render() {
+ const {
+ className,
+ backText,
+ linkElement = 'a',
+ type,
+ title,
+ desc,
+ img,
+ actions,
+ redirect,
+ ...rest
+ } = this.props;
+ const pageType = type in config ? type : '404';
+ const clsString = classNames(styles.exception, className);
+ return (
+
- );
-};
+ );
+ }
+}
export default Exception;
diff --git a/src/components/Exception/index.less b/src/components/Exception/index.less
index 5ef378be..b55fe3a9 100644
--- a/src/components/Exception/index.less
+++ b/src/components/Exception/index.less
@@ -3,7 +3,8 @@
.exception {
display: flex;
align-items: center;
- height: 100%;
+ height: 80%;
+ min-height: 500px;
.imgBlock {
flex: 0 0 62.5%;
diff --git a/src/components/Exception/index.md b/src/components/Exception/index.md
deleted file mode 100644
index 844146e0..00000000
--- a/src/components/Exception/index.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title:
- en-US: Exception
- zh-CN: Exception
-subtitle: 异常
-cols: 1
-order: 5
----
-
-异常页用于对页面特定的异常状态进行反馈。通常，它包含对错误状态的阐述，并向用户提供建议或操作，避免用户感到迷失和困惑。
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 |
-|-------------|------------------------------------------|-------------|-------|
-| type | 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - |
-| title | 标题 | ReactNode | - |
-| desc | 补充描述 | ReactNode | - |
-| img | 背景图片地址 | string | - |
-| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - |
-| linkElement | 定义链接的元素，默认为 `a` | string\|ReactElement | - |
diff --git a/src/components/Exception/index.zh-CN.md b/src/components/Exception/index.zh-CN.md
index 13e4e7ef..2e64399f 100644
--- a/src/components/Exception/index.zh-CN.md
+++ b/src/components/Exception/index.zh-CN.md
@@ -9,11 +9,13 @@ order: 5
## API
-| 参数 | 说明 | 类型 | 默认值 |
+| 参数 | 说明| 类型 | 默认值 |
|-------------|------------------------------------------|-------------|-------|
-| type | 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - |
-| title | 标题 | ReactNode | - |
-| desc | 补充描述 | ReactNode | - |
-| img | 背景图片地址 | string | - |
-| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - |
+| backText| 默认的返回按钮文本 | ReactNode| back to home |
+| type| 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | Enum {'403', '404', '500'} | - |
+| title | 标题 | ReactNode| -|
+| desc| 补充描述| ReactNode| -|
+| img | 背景图片地址 | string| -|
+| actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效| ReactNode| -|
| linkElement | 定义链接的元素 | string\|ReactElement | 'a' |
+| redirect | 返回按钮的跳转地址 | string | '/'
diff --git a/src/components/FooterToolbar/index.js b/src/components/FooterToolbar/index.js
index d5ce75b8..d43f72fb 100644
--- a/src/components/FooterToolbar/index.js
+++ b/src/components/FooterToolbar/index.js
@@ -1,12 +1,44 @@
import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './index.less';
export default class FooterToolbar extends Component {
+ static contextTypes = {
+ isMobile: PropTypes.bool,
+ };
+
+ state = {
+ width: undefined,
+ };
+
+ componentDidMount() {
+ window.addEventListener('resize', this.resizeFooterToolbar);
+ this.resizeFooterToolbar();
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.resizeFooterToolbar);
+ }
+
+ resizeFooterToolbar = () => {
+ const sider = document.querySelector('.ant-layout-sider');
+ if (sider == null) {
+ return;
+ }
+ const { isMobile } = this.context;
+ const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
+ const { width: stateWidth } = this.state;
+ if (stateWidth !== width) {
+ this.setState({ width });
+ }
+ };
+
render() {
const { children, className, extra, ...restProps } = this.props;
+ const { width } = this.state;
return (
-
+
-
+
+
+
+
{title || config[pageType].title}
+{desc || config[pageType].desc}
+
+ {actions ||
+ createElement(
+ linkElement,
+ {
+ to: redirect,
+ href: redirect,
+ },
+
+ )}
+
+
diff --git a/src/components/GlobalFooter/index.js b/src/components/GlobalFooter/index.js
index f5572131..1c2fb74e 100644
--- a/src/components/GlobalFooter/index.js
+++ b/src/components/GlobalFooter/index.js
@@ -5,18 +5,23 @@ import styles from './index.less';
const GlobalFooter = ({ className, links, copyright }) => {
const clsString = classNames(styles.globalFooter, className);
return (
-
+ {newNotice.extra}
+
+ );
+ }
+ return newNotice;
+ });
+ return groupBy(newNotices, 'type');
+ }
+
+ getUnreadData = noticeData => {
+ const unreadMsg = {};
+ Object.entries(noticeData).forEach(([key, value]) => {
+ if (!unreadMsg[key]) {
+ unreadMsg[key] = 0;
+ }
+ if (Array.isArray(value)) {
+ unreadMsg[key] = value.filter(item => !item.read).length;
+ }
+ });
+ return unreadMsg;
+ };
+
+ changeReadState = clickedItem => {
+ const { id } = clickedItem;
+ const { dispatch } = this.props;
+ dispatch({
+ type: 'global/changeNoticeReadState',
+ payload: id,
+ });
+ };
+
+ render() {
+ const {
+ currentUser,
+ fetchingNotices,
+ onNoticeVisibleChange,
+ onMenuClick,
+ onNoticeClear,
+ theme,
+ } = this.props;
+ const menu = (
+
+ );
+ const noticeData = this.getNoticeData();
+ const unreadMsg = this.getUnreadData(noticeData);
+ let className = styles.right;
+ if (theme === 'dark') {
+ className = `${styles.right} ${styles.dark}`;
+ }
+ return (
+
- {newNotice.extra}
-
- );
- }
- return newNotice;
- });
- return groupBy(newNotices, 'type');
- }
- toggle = () => {
- const { collapsed, onCollapse } = this.props;
- onCollapse(!collapsed);
- this.triggerResizeEvent();
- };
/* eslint-disable*/
@Debounce(600)
triggerResizeEvent() {
+ // eslint-disable-line
const event = document.createEvent('HTMLEvents');
event.initEvent('resize', true, false);
window.dispatchEvent(event);
}
+ toggle = () => {
+ const { collapsed, onCollapse } = this.props;
+ onCollapse(!collapsed);
+ this.triggerResizeEvent();
+ };
render() {
- const {
- currentUser = {},
- collapsed,
- fetchingNotices,
- isMobile,
- logo,
- onNoticeVisibleChange,
- onMenuClick,
- onNoticeClear,
- } = this.props;
- const menu = (
-
- );
- const noticeData = this.getNoticeData();
+ const { collapsed, isMobile, logo } = this.props;
return (
{}
diff --git a/src/components/HeaderSearch/index.en-US.md b/src/components/HeaderSearch/index.en-US.md
new file mode 100644
index 00000000..a1cf841f
--- /dev/null
+++ b/src/components/HeaderSearch/index.en-US.md
@@ -0,0 +1,23 @@
+---
+title:
+ en-US: HeaderSearch
+ zh-CN: HeaderSearch
+subtitle: Top search box
+cols: 1
+order: 8
+---
+
+Usually placed as an entry to the global search, placed on the right side of the navigation toolbar.
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+placeholder | placeholder text | string | -
+dataSource | current list of prompts | string[] | -
+onSearch | Callback when selecting an item or pressing Enter | function(value) | -
+onChange | Enter a callback for the search text | function(value) | -
+onPressEnter | Callback when pressing Enter | function(value) | -
+onVisibleChange | Show or hide the callback of the text box | function(value) |-
+defaultOpen | The input box is displayed for the first time. | boolean | false
+open | The input box is displayed | booelan |false
\ No newline at end of file
diff --git a/src/components/HeaderSearch/index.js b/src/components/HeaderSearch/index.js
index 295a837a..95d946c0 100644
--- a/src/components/HeaderSearch/index.js
+++ b/src/components/HeaderSearch/index.js
@@ -2,18 +2,11 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Input, Icon, AutoComplete } from 'antd';
import classNames from 'classnames';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
import styles from './index.less';
export default class HeaderSearch extends PureComponent {
- static defaultProps = {
- defaultActiveFirstOption: false,
- onPressEnter: () => {},
- onSearch: () => {},
- className: '',
- placeholder: '',
- dataSource: [],
- defaultOpen: false,
- };
static propTypes = {
className: PropTypes.string,
placeholder: PropTypes.string,
@@ -22,61 +15,121 @@ export default class HeaderSearch extends PureComponent {
defaultActiveFirstOption: PropTypes.bool,
dataSource: PropTypes.array,
defaultOpen: PropTypes.bool,
+ onVisibleChange: PropTypes.func,
};
- state = {
- searchMode: this.props.defaultOpen,
- value: '',
+
+ static defaultProps = {
+ defaultActiveFirstOption: false,
+ onPressEnter: () => {},
+ onSearch: () => {},
+ className: '',
+ placeholder: '',
+ dataSource: [],
+ defaultOpen: false,
+ onVisibleChange: () => {},
};
+
+ static getDerivedStateFromProps(props) {
+ if ('open' in props) {
+ return {
+ searchMode: props.open,
+ };
+ }
+ return null;
+ }
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ searchMode: props.defaultOpen,
+ value: '',
+ };
+ }
+
componentWillUnmount() {
clearTimeout(this.timeout);
}
+
onKeyDown = e => {
if (e.key === 'Enter') {
+ const { onPressEnter } = this.props;
+ const { value } = this.state;
this.timeout = setTimeout(() => {
- this.props.onPressEnter(this.state.value); // Fix duplicate onPressEnter
+ onPressEnter(value); // Fix duplicate onPressEnter
}, 0);
}
};
+
onChange = value => {
+ const { onChange } = this.props;
this.setState({ value });
- if (this.props.onChange) {
- this.props.onChange();
+ if (onChange) {
+ onChange(value);
}
};
+
enterSearchMode = () => {
+ const { onVisibleChange } = this.props;
+ onVisibleChange(true);
this.setState({ searchMode: true }, () => {
- if (this.state.searchMode) {
+ const { searchMode } = this.state;
+ if (searchMode) {
this.input.focus();
}
});
};
+
leaveSearchMode = () => {
this.setState({
searchMode: false,
value: '',
});
};
+
+ // NOTE: 不能小于500，如果长按某键，第一次触发auto repeat的间隔是500ms，小于500会导致触发2次
+ @Bind()
+ @Debounce(500, {
+ leading: true,
+ trailing: false,
+ })
+ debouncePressEnter() {
+ const { onPressEnter } = this.props;
+ const { value } = this.state;
+ onPressEnter(value);
+ }
+
render() {
- const { className, placeholder, ...restProps } = this.props;
+ const { className, placeholder, open, ...restProps } = this.props;
+ const { searchMode, value } = this.state;
delete restProps.defaultOpen; // for rc-select not affected
const inputClass = classNames(styles.input, {
- [styles.show]: this.state.searchMode,
+ [styles.show]: searchMode,
});
return (
-
+ {
+ if (propertyName === 'width' && !searchMode) {
+ const { onVisibleChange } = this.props;
+ onVisibleChange(searchMode);
+ }
+ }}
+ >
{
this.input = node;
}}
+ aria-label={placeholder}
+ placeholder={placeholder}
onKeyDown={this.onKeyDown}
onBlur={this.leaveSearchMode}
/>
diff --git a/src/components/HeaderSearch/index.md b/src/components/HeaderSearch/index.zh-CN.md
similarity index 73%
rename from src/components/HeaderSearch/index.md
rename to src/components/HeaderSearch/index.zh-CN.md
index 3d4d3c22..a9a04754 100644
--- a/src/components/HeaderSearch/index.md
+++ b/src/components/HeaderSearch/index.zh-CN.md
@@ -18,4 +18,6 @@ dataSource | 当前提示内容列表 | string[] | -
onSearch | 选择某项或按下回车时的回调 | function(value) | -
onChange | 输入搜索字符的回调 | function(value) | -
onPressEnter | 按下回车时的回调 | function(value) | -
-defaultOpen | 输入框首次显示是否打开 | boolean | false
+onVisibleChange | 显示或隐藏文本框的回调 | function(value) |-
+defaultOpen | 输入框首次显示是否显示 | boolean | false
+open | 控制输入框是否显示 | booelan |false
\ No newline at end of file
diff --git a/src/components/Login/LoginItem.d.ts b/src/components/Login/LoginItem.d.ts
new file mode 100644
index 00000000..30a7a2d6
--- /dev/null
+++ b/src/components/Login/LoginItem.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface ILoginItemProps {
+ name?: string;
+ rules?: any[];
+ style?: React.CSSProperties;
+ onGetCaptcha?: () => void;
+ placeholder?: string;
+ buttonText?: React.ReactNode;
+}
+
+export class LoginItem extends React.Component {}
diff --git a/src/components/Login/LoginItem.js b/src/components/Login/LoginItem.js
index 98efb333..b3cc4d48 100644
--- a/src/components/Login/LoginItem.js
+++ b/src/components/Login/LoginItem.js
@@ -1,104 +1,147 @@
import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Form, Button, Row, Col } from 'antd';
+import { Form, Input, Button, Row, Col } from 'antd';
import omit from 'omit.js';
import styles from './index.less';
-import map from './map';
+import ItemMap from './map';
+import LoginContext from './loginContext';
const FormItem = Form.Item;
-function generator({ defaultProps, defaultRules, type }) {
- return WrappedComponent => {
- return class BasicComponent extends Component {
- static contextTypes = {
- form: PropTypes.object,
- updateActive: PropTypes.func,
- };
- constructor(props) {
- super(props);
- this.state = {
- count: 0,
- };
- }
- componentDidMount() {
- if (this.context.updateActive) {
- this.context.updateActive(this.props.name);
- }
- }
- componentWillUnmount() {
+class WrapFormItem extends Component {
+ static defaultProps = {
+ getCaptchaButtonText: 'captcha',
+ getCaptchaSecondText: 'second',
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ count: 0,
+ };
+ }
+
+ componentDidMount() {
+ const { updateActive, name } = this.props;
+ if (updateActive) {
+ updateActive(name);
+ }
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.interval);
+ }
+
+ onGetCaptcha = () => {
+ const { onGetCaptcha } = this.props;
+ const result = onGetCaptcha ? onGetCaptcha() : null;
+ if (result === false) {
+ return;
+ }
+ if (result instanceof Promise) {
+ result.then(this.runGetCaptchaCountDown);
+ } else {
+ this.runGetCaptchaCountDown();
+ }
+ };
+
+ getFormItemOptions = ({ onChange, defaultValue, customprops, rules }) => {
+ const options = {
+ rules: rules || customprops.rules,
+ };
+ if (onChange) {
+ options.onChange = onChange;
+ }
+ if (defaultValue) {
+ options.initialValue = defaultValue;
+ }
+ return options;
+ };
+
+ runGetCaptchaCountDown = () => {
+ const { countDown } = this.props;
+ let count = countDown || 59;
+ this.setState({ count });
+ this.interval = setInterval(() => {
+ count -= 1;
+ this.setState({ count });
+ if (count === 0) {
clearInterval(this.interval);
}
- onGetCaptcha = () => {
- let count = 59;
- this.setState({ count });
- if (this.props.onGetCaptcha) {
- this.props.onGetCaptcha();
- }
- this.interval = setInterval(() => {
- count -= 1;
- this.setState({ count });
- if (count === 0) {
- clearInterval(this.interval);
- }
- }, 1000);
- };
- render() {
- const { getFieldDecorator } = this.context.form;
- const options = {};
- let otherProps = {};
- const { onChange, defaultValue, rules, name, ...restProps } = this.props;
- const { count } = this.state;
- options.rules = rules || defaultRules;
- if (onChange) {
- options.onChange = onChange;
- }
- if (defaultValue) {
- options.initialValue = defaultValue;
- }
- otherProps = restProps || otherProps;
- if (type === 'Captcha') {
- const inputProps = omit(otherProps, ['onGetCaptcha']);
- return (
-
-
-
-
- );
- }
- return (
-
- {getFieldDecorator(name, options)(
-
- );
- }
- };
+ }, 1000);
};
+
+ render() {
+ const { count } = this.state;
+
+ const {
+ form: { getFieldDecorator },
+ } = this.props;
+
+ // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props
+ const {
+ onChange,
+ customprops,
+ defaultValue,
+ rules,
+ name,
+ getCaptchaButtonText,
+ getCaptchaSecondText,
+ updateActive,
+ type,
+ ...restProps
+ } = this.props;
+
+ // get getFieldDecorator props
+ const options = this.getFormItemOptions(this.props);
+
+ const otherProps = restProps || {};
+ if (type === 'Captcha') {
+ const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']);
+ return (
+
+
+
+
+ );
+ }
+ return (
+
+ {getFieldDecorator(name, options)()}
+
+ );
+ }
}
const LoginItem = {};
-Object.keys(map).forEach(item => {
- LoginItem[item] = generator({
- defaultProps: map[item].props,
- defaultRules: map[item].rules,
- type: item,
- })(map[item].component);
+Object.keys(ItemMap).forEach(key => {
+ const item = ItemMap[key];
+ LoginItem[key] = props => (
+
+ {context => (
+
+ );
});
export default LoginItem;
diff --git a/src/components/Login/LoginTab.js b/src/components/Login/LoginTab.js
index 750bfe7c..7c46db53 100644
--- a/src/components/Login/LoginTab.js
+++ b/src/components/Login/LoginTab.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
-import PropTypes from 'prop-types';
import { Tabs } from 'antd';
+import LoginContext from './loginContext';
const { TabPane } = Tabs;
@@ -12,21 +12,30 @@ const generateId = (() => {
};
})();
-export default class LoginTab extends Component {
- static __ANT_PRO_LOGIN_TAB = true;
- static contextTypes = {
- tabUtil: PropTypes.object,
- };
+class LoginTab extends Component {
constructor(props) {
super(props);
this.uniqueId = generateId('login-tab-');
}
- componentWillMount() {
- if (this.context.tabUtil) {
- this.context.tabUtil.addTab(this.uniqueId);
- }
+
+ componentDidMount() {
+ const { tabUtil } = this.props;
+ tabUtil.addTab(this.uniqueId);
}
+
render() {
- return {children} ;
}
}
+
+const wrapContext = props => (
+
+ {value =>
+);
+
+// 标志位 用来判断是不是自定义组件
+wrapContext.typeName = 'LoginTab';
+
+export default wrapContext;
diff --git a/src/components/Login/Tab.d.ts b/src/components/Login/Tab.d.ts
new file mode 100644
index 00000000..db651f7b
--- /dev/null
+++ b/src/components/Login/Tab.d.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export interface ILoginTabProps {
+ key?: string;
+ tab?: React.ReactNode;
+}
+export default class LoginTab extends React.Component {}
diff --git a/src/components/Login/index.d.ts b/src/components/Login/index.d.ts
index cd88a8b6..6a6f67fe 100644
--- a/src/components/Login/index.d.ts
+++ b/src/components/Login/index.d.ts
@@ -1,33 +1,20 @@
-import * as React from 'react';
import Button from 'antd/lib/button';
-export interface LoginProps {
+import * as React from 'react';
+import LoginItem from './LoginItem';
+import LoginTab from './LoginTab';
+
+export interface ILoginProps {
defaultActiveKey?: string;
onTabChange?: (key: string) => void;
style?: React.CSSProperties;
onSubmit?: (error: any, values: any) => void;
}
-export interface TabProps {
- key?: string;
- tab?: React.ReactNode;
-}
-export class Tab extends React.Component {}
-
-export interface LoginItemProps {
- name?: string;
- rules?: any[];
- style?: React.CSSProperties;
- onGetCaptcha?: () => void;
- placeholder?: string;
-}
-
-export class LoginItem extends React.Component {}
-
-export default class Login extends React.Component {
- static Tab: typeof Tab;
- static UserName: typeof LoginItem;
- static Password: typeof LoginItem;
- static Mobile: typeof LoginItem;
- static Captcha: typeof LoginItem;
- static Submit: typeof Button;
+export default class Login extends React.Component {
+ public static Tab: typeof LoginTab;
+ public static UserName: typeof LoginItem;
+ public static Password: typeof LoginItem;
+ public static Mobile: typeof LoginItem;
+ public static Captcha: typeof LoginItem;
+ public static Submit: typeof Button;
}
diff --git a/src/components/Login/index.en-US.md b/src/components/Login/index.en-US.md
index bc38579f..3b5992e2 100644
--- a/src/components/Login/index.en-US.md
+++ b/src/components/Login/index.en-US.md
@@ -38,7 +38,9 @@ Apart from the above properties, Login.Username also support all properties of a
Property | Description | Type | Default
----|------|-----|------
-onGetCaptcha | callback on getting a new Captcha | () => void | -
+onGetCaptcha | callback on getting a new Captcha | () => (void \| false \| Promise) | -
+countDown | count down | number |-
+buttonText | text on getting a new Captcha | ReactNode | '获取验证码'
Apart from the above properties, _Login.Captcha_ support the same properties with _Login.UserName_.
diff --git a/src/components/Login/index.js b/src/components/Login/index.js
index 02aa80c2..79cc56de 100644
--- a/src/components/Login/index.js
+++ b/src/components/Login/index.js
@@ -6,45 +6,57 @@ import LoginItem from './LoginItem';
import LoginTab from './LoginTab';
import LoginSubmit from './LoginSubmit';
import styles from './index.less';
+import LoginContext from './loginContext';
class Login extends Component {
- static defaultProps = {
- className: '',
- defaultActiveKey: '',
- onTabChange: () => {},
- onSubmit: () => {},
- };
static propTypes = {
className: PropTypes.string,
defaultActiveKey: PropTypes.string,
onTabChange: PropTypes.func,
onSubmit: PropTypes.func,
};
- static childContextTypes = {
- tabUtil: PropTypes.object,
- form: PropTypes.object,
- updateActive: PropTypes.func,
+
+ static defaultProps = {
+ className: '',
+ defaultActiveKey: '',
+ onTabChange: () => {},
+ onSubmit: () => {},
};
- state = {
- type: this.props.defaultActiveKey,
- tabs: [],
- active: {},
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ type: props.defaultActiveKey,
+ tabs: [],
+ active: {},
+ };
+ }
+
+ onSwitch = type => {
+ this.setState({
+ type,
+ });
+ const { onTabChange } = this.props;
+ onTabChange(type);
};
- getChildContext() {
+
+ getContext = () => {
+ const { tabs } = this.state;
+ const { form } = this.props;
return {
tabUtil: {
addTab: id => {
this.setState({
- tabs: [...this.state.tabs, id],
+ tabs: [...tabs, id],
});
},
removeTab: id => {
this.setState({
- tabs: this.state.tabs.filter(currentId => currentId !== id),
+ tabs: tabs.filter(currentId => currentId !== id),
});
},
},
- form: this.props.form,
+ form,
updateActive: activeItem => {
const { type, active } = this.state;
if (active[type]) {
@@ -57,21 +69,18 @@ class Login extends Component {
});
},
};
- }
- onSwitch = type => {
- this.setState({
- type,
- });
- this.props.onTabChange(type);
};
+
handleSubmit = e => {
e.preventDefault();
const { active, type } = this.state;
+ const { form, onSubmit } = this.props;
const activeFileds = active[type];
- this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
- this.props.onSubmit(err, values);
+ form.validateFields(activeFileds, { force: true }, (err, values) => {
+ onSubmit(err, values);
});
};
+
render() {
const { className, children } = this.props;
const { type, tabs } = this.state;
@@ -82,32 +91,34 @@ class Login extends Component {
return;
}
// eslint-disable-next-line
- if (item.type.__ANT_PRO_LOGIN_TAB) {
+ if (item.type.typeName === 'LoginTab') {
TabChildren.push(item);
} else {
otherChildren.push(item);
}
});
return (
-
+
);
}
}
diff --git a/src/components/Login/index.less b/src/components/Login/index.less
index 2894749b..646b6631 100644
--- a/src/components/Login/index.less
+++ b/src/components/Login/index.less
@@ -1,20 +1,6 @@
@import '~antd/lib/style/themes/default.less';
.login {
- .tabs {
- padding: 0 2px;
- margin: 0 -2px;
- :global {
- .ant-tabs-tab {
- font-size: 16px;
- line-height: 24px;
- }
- .ant-input-affix-wrapper .ant-input:not(:first-child) {
- padding-left: 34px;
- }
- }
- }
-
:global {
.ant-tabs .ant-tabs-bar {
border-bottom: 0;
@@ -23,19 +9,41 @@
}
.ant-form-item {
- margin-bottom: 24px;
+ margin: 0 2px 24px;
}
}
- .prefixIcon {
- font-size: @font-size-base;
- color: @disabled-color;
- }
-
.getCaptcha {
display: block;
width: 100%;
- height: 42px;
+ }
+
+ .icon {
+ font-size: 24px;
+ color: rgba(0, 0, 0, 0.2);
+ margin-left: 16px;
+ vertical-align: middle;
+ cursor: pointer;
+ transition: color 0.3s;
+
+ &:hover {
+ color: @primary-color;
+ }
+ }
+
+ .other {
+ text-align: left;
+ margin-top: 24px;
+ line-height: 22px;
+
+ .register {
+ float: right;
+ }
+ }
+
+ .prefixIcon {
+ font-size: @font-size-base;
+ color: @disabled-color;
}
.submit {
diff --git a/src/components/Login/index.zh-CN.md b/src/components/Login/index.zh-CN.md
index 98f0f624..a869e96c 100644
--- a/src/components/Login/index.zh-CN.md
+++ b/src/components/Login/index.zh-CN.md
@@ -32,14 +32,15 @@ name | 控件标记，提交数据中同样以此为 key | String | -
rules | 校验规则，同 Form getFieldDecorator(id, options) 中 [option.rules 的规则](getFieldDecorator(id, options)) | object[] | -
除上述属性以外，Login.UserName 还支持 antd.Input 的所有属性，并且自带默认的基础配置，包括 `placeholder` `size` `prefix` 等，这些基础配置均可被覆盖。
-
-### Login.Password、Login.Mobile 同 Login.UserName
+## Login.Password、Login.Mobile 同 Login.UserName
### Login.Captcha
参数 | 说明 | 类型 | 默认值
----|------|-----|------
-onGetCaptcha | 点击获取校验码的回调 | () => void | -
+onGetCaptcha | 点击获取校验码的回调 | () => (void \| false \| Promise) | -
+countDown | 倒计时 | number |-
+buttonText | 点击获取校验码的说明文字 | ReactNode | '获取验证码'
除上述属性以外，Login.Captcha 支持的属性与 Login.UserName 相同。
diff --git a/src/components/Login/loginContext.js b/src/components/Login/loginContext.js
new file mode 100644
index 00000000..a13e6599
--- /dev/null
+++ b/src/components/Login/loginContext.js
@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+const LoginContext = createContext();
+export default LoginContext;
diff --git a/src/components/Login/map.js b/src/components/Login/map.js
index c278ee08..dfa88199 100644
--- a/src/components/Login/map.js
+++ b/src/components/Login/map.js
@@ -1,12 +1,12 @@
import React from 'react';
-import { Input, Icon } from 'antd';
+import { Icon } from 'antd';
import styles from './index.less';
-const map = {
+export default {
UserName: {
- component: Input,
props: {
size: 'large',
+ id: 'userName',
prefix: {}
diff --git a/src/components/NoticeIcon/NoticeList.js b/src/components/NoticeIcon/NoticeList.js
index c107e2d9..d0de9af5 100644
--- a/src/components/NoticeIcon/NoticeList.js
+++ b/src/components/NoticeIcon/NoticeList.js
@@ -11,6 +11,7 @@ export default function NoticeList({
locale,
emptyText,
emptyImage,
+ showClear = true,
}) {
if (data.length === 0) {
return (
@@ -27,11 +28,20 @@ export default function NoticeList({
const itemCls = classNames(styles.item, {
[styles.read]: item.read,
});
+ // eslint-disable-next-line no-nested-ternary
+ const leftIcon = item.avatar ? (
+ typeof item.avatar === 'string' ? (
+ onClick(item)}>
{
diff --git a/src/components/NoticeIcon/index.en-US.md b/src/components/NoticeIcon/index.en-US.md
new file mode 100644
index 00000000..5352ce6c
--- /dev/null
+++ b/src/components/NoticeIcon/index.en-US.md
@@ -0,0 +1,45 @@
+---
+title: NoticeIcon
+subtitle: Notification Menu
+cols: 1
+order: 9
+---
+
+用在导航工具栏上，作为整个产品统一的通知中心。
+
+## API
+
+Property | Description | Type | Default
+----|------|-----|------
+count | Total number of messages | number | -
+bell | Change the bell Icon | ReactNode | `
+
@@ -66,14 +77,16 @@ export default class NoticeIcon extends PureComponent {
);
}
+
render() {
- const { className, count, popupAlign, onPopupVisibleChange } = this.props;
+ const { className, count, popupAlign, popupVisible, onPopupVisibleChange, bell } = this.props;
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = this.getNotificationBox();
+ const NoticeBellIcon = bell ||
-
+ {NoticeBellIcon}
);
@@ -82,7 +95,7 @@ export default class NoticeIcon extends PureComponent {
}
const popoverProps = {};
if ('popupVisible' in this.props) {
- popoverProps.visible = this.props.popupVisible;
+ popoverProps.visible = popupVisible;
}
return (
(this.popover = ReactDOM.findDOMNode(node))} // eslint-disable-line
>
{trigger}
diff --git a/src/components/NoticeIcon/index.less b/src/components/NoticeIcon/index.less
index 6858f0c5..794376b5 100644
--- a/src/components/NoticeIcon/index.less
+++ b/src/components/NoticeIcon/index.less
@@ -14,7 +14,6 @@
}
.icon {
- font-size: 16px;
padding: 4px;
}
diff --git a/src/components/NoticeIcon/index.md b/src/components/NoticeIcon/index.zh-CN.md
similarity index 74%
rename from src/components/NoticeIcon/index.md
rename to src/components/NoticeIcon/index.zh-CN.md
index fefdbdcf..3c78dba1 100644
--- a/src/components/NoticeIcon/index.md
+++ b/src/components/NoticeIcon/index.zh-CN.md
@@ -1,7 +1,5 @@
---
-title:
- en-US: NoticeIcon
- zh-CN: NoticeIcon
+title: NoticeIcon
subtitle: 通知菜单
cols: 1
order: 9
@@ -14,30 +12,36 @@ order: 9
参数 | 说明 | 类型 | 默认值
----|------|-----|------
count | 图标上的消息总数 | number | -
+bell | translate this please -> Change the bell Icon | ReactNode | `
+
+ );
+ }
+}
+
+export default SettingDrawer;
diff --git a/src/components/SettingDrawer/index.less b/src/components/SettingDrawer/index.less
new file mode 100644
index 00000000..af4109be
--- /dev/null
+++ b/src/components/SettingDrawer/index.less
@@ -0,0 +1,74 @@
+@import '~antd/lib/style/themes/default.less';
+
+.content {
+ min-height: 100%;
+ background: #fff;
+ position: relative;
+}
+
+.blockChecbox {
+ display: flex;
+ .item {
+ margin-right: 16px;
+ position: relative;
+ // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border-radius: @border-radius-base;
+ cursor: pointer;
+ img {
+ width: 48px;
+ }
+ }
+ .selectIcon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100%;
+ padding-top: 15px;
+ padding-left: 24px;
+ height: 100%;
+ color: @primary-color;
+ font-size: 14px;
+ font-weight: bold;
+ }
+}
+
+.color_block {
+ width: 38px;
+ height: 22px;
+ margin: 4px;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-right: 12px;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.title {
+ font-size: 14px;
+ color: @heading-color;
+ line-height: 22px;
+ margin-bottom: 12px;
+}
+
+.handle {
+ position: absolute;
+ top: 240px;
+ background: @primary-color;
+ width: 48px;
+ height: 48px;
+ right: 300px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ pointer-events: auto;
+ z-index: 0;
+ text-align: center;
+ font-size: 16px;
+ border-radius: 4px 0 0 4px;
+}
+
+.productionHint {
+ font-size: 12px;
+ margin-top: 16px;
+}
diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js
new file mode 100644
index 00000000..e819cda3
--- /dev/null
+++ b/src/components/SiderMenu/BaseMenu.js
@@ -0,0 +1,161 @@
+import React, { PureComponent } from 'react';
+import { Menu, Icon } from 'antd';
+import Link from 'umi/link';
+import isEqual from 'lodash/isEqual';
+import memoizeOne from 'memoize-one';
+import { urlToList } from '../_utils/pathTools';
+import { getMenuMatches } from './SiderMenuUtils';
+import { isUrl } from '@/utils/utils';
+import styles from './index.less';
+
+const { SubMenu } = Menu;
+
+// Allow menu.js config icon as string or ReactNode
+// icon: 'setting',
+// icon: 'http://demo.com/icon.png',
+// icon: {extra}
{children}
+
+
);
};
diff --git a/src/components/GlobalHeader/RightContent.js b/src/components/GlobalHeader/RightContent.js
new file mode 100644
index 00000000..e916fb83
--- /dev/null
+++ b/src/components/GlobalHeader/RightContent.js
@@ -0,0 +1,189 @@
+import React, { PureComponent } from 'react';
+import { FormattedMessage, formatMessage } from 'umi/locale';
+import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd';
+import moment from 'moment';
+import groupBy from 'lodash/groupBy';
+import NoticeIcon from '../NoticeIcon';
+import HeaderSearch from '../HeaderSearch';
+import SelectLang from '../SelectLang';
+import styles from './index.less';
+
+export default class GlobalHeaderRight extends PureComponent {
+ getNoticeData() {
+ const { notices = [] } = this.props;
+ if (notices.length === 0) {
+ return {};
+ }
+ const newNotices = notices.map(notice => {
+ const newNotice = { ...notice };
+ if (newNotice.datetime) {
+ newNotice.datetime = moment(notice.datetime).fromNow();
+ }
+ if (newNotice.id) {
+ newNotice.key = newNotice.id;
+ }
+ if (newNotice.extra && newNotice.status) {
+ const color = {
+ todo: '',
+ processing: 'blue',
+ urgent: 'red',
+ doing: 'gold',
+ }[newNotice.status];
+ newNotice.extra = (
+
+ {
+ console.log('input', value); // eslint-disable-line
+ }}
+ onPressEnter={value => {
+ console.log('enter', value); // eslint-disable-line
+ }}
+ />
+
+
+
+ {
+ console.log(item, tabProps); // eslint-disable-line
+ this.changeReadState(item, tabProps);
+ }}
+ locale={{
+ emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
+ clear: formatMessage({ id: 'component.noticeIcon.clear' }),
+ }}
+ onClear={onNoticeClear}
+ onPopupVisibleChange={onNoticeVisibleChange}
+ loading={fetchingNotices}
+ popupAlign={{ offset: [20, -16] }}
+ clearClose
+ >
+
+ {currentUser.name ? (
+
+
+
+ ) : (
+
+ );
+ }
+}
diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js
index 10aea499..156f1b7d 100644
--- a/src/components/GlobalHeader/index.js
+++ b/src/components/GlobalHeader/index.js
@@ -1,165 +1,42 @@
import React, { PureComponent } from 'react';
-import { Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider, Tooltip } from 'antd';
-import moment from 'moment';
-import groupBy from 'lodash/groupBy';
+import { Icon } from 'antd';
+import Link from 'umi/link';
import Debounce from 'lodash-decorators/debounce';
-import { Link } from 'dva/router';
-import NoticeIcon from '../NoticeIcon';
-import HeaderSearch from '../HeaderSearch';
import styles from './index.less';
+import RightContent from './RightContent';
export default class GlobalHeader extends PureComponent {
componentWillUnmount() {
this.triggerResizeEvent.cancel();
}
- getNoticeData() {
- const { notices = [] } = this.props;
- if (notices.length === 0) {
- return {};
- }
- const newNotices = notices.map(notice => {
- const newNotice = { ...notice };
- if (newNotice.datetime) {
- newNotice.datetime = moment(notice.datetime).fromNow();
- }
- // transform id to item key
- if (newNotice.id) {
- newNotice.key = newNotice.id;
- }
- if (newNotice.extra && newNotice.status) {
- const color = {
- todo: '',
- processing: 'blue',
- urgent: 'red',
- doing: 'gold',
- }[newNotice.status];
- newNotice.extra = (
-
- {isMobile && [
+ {isMobile && (
- ,
-
);
}
diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less
index 8508930a..5ed7fbaf 100644
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@@ -1,20 +1,15 @@
@import '~antd/lib/style/themes/default.less';
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+
.header {
height: 64px;
- padding: 0 12px 0 0;
+ padding: 0;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
}
-:global {
- .ant-layout {
- min-height: 100vh;
- overflow-x: hidden;
- }
-}
-
.logo {
height: 64px;
line-height: 58px;
@@ -40,18 +35,19 @@
i.trigger {
font-size: 20px;
- line-height: 64px;
+ height: 64px;
cursor: pointer;
transition: all 0.3s, padding 0s;
- padding: 0 24px;
+ padding: 22px 24px;
&:hover {
- background: @primary-1;
+ background: @pro-header-hover-bg;
}
}
.right {
float: right;
height: 100%;
+ overflow: hidden;
.action {
cursor: pointer;
padding: 0 12px;
@@ -59,18 +55,18 @@ i.trigger {
transition: all 0.3s;
height: 100%;
> i {
- font-size: 16px;
vertical-align: middle;
color: @text-color;
}
- &:hover,
- &:global(.ant-popover-open) {
- background: @primary-1;
+ &:hover {
+ background: @pro-header-hover-bg;
+ }
+ :global(&.ant-popover-open) {
+ background: @pro-header-hover-bg;
}
}
.search {
- padding: 0;
- margin: 0 12px;
+ padding: 0 12px;
&:hover {
background: transparent;
}
@@ -80,7 +76,24 @@ i.trigger {
margin: 20px 8px 20px 0;
color: @primary-color;
background: rgba(255, 255, 255, 0.85);
- vertical-align: middle;
+ vertical-align: top;
+ }
+ }
+}
+
+.dark {
+ height: 64px;
+ .action {
+ color: rgba(255, 255, 255, 0.85);
+ > i {
+ color: rgba(255, 255, 255, 0.85);
+ }
+ &:hover,
+ &:global(.ant-popover-open) {
+ background: @primary-color;
+ }
+ :global(.ant-badge) {
+ color: rgba(255, 255, 255, 0.85);
}
}
}
@@ -94,9 +107,10 @@ i.trigger {
display: none;
}
i.trigger {
- padding: 0 12px;
+ padding: 22px 12px;
}
.logo {
+ padding-left: 12px;
padding-right: 12px;
position: relative;
}
diff --git a/src/components/HeaderSearch/index.d.ts b/src/components/HeaderSearch/index.d.ts
index 3a06d758..d78fde47 100644
--- a/src/components/HeaderSearch/index.d.ts
+++ b/src/components/HeaderSearch/index.d.ts
@@ -2,10 +2,14 @@ import * as React from 'react';
export interface IHeaderSearchProps {
placeholder?: string;
dataSource?: string[];
+ defaultOpen?: boolean;
+ open?: boolean;
onSearch?: (value: string) => void;
onChange?: (value: string) => void;
+ onVisibleChange?: (visible: boolean) => void;
onPressEnter?: (value: string) => void;
style?: React.CSSProperties;
+ className?: string;
}
export default class HeaderSearch extends React.Component
- {
- console.log('input', value); // eslint-disable-line
- }}
- onPressEnter={value => {
- console.log('enter', value); // eslint-disable-line
- }}
- />
-
-
-
- {
- console.log(item, tabProps); // eslint-disable-line
- }}
- onClear={onNoticeClear}
- onPopupVisibleChange={onNoticeVisibleChange}
- loading={fetchingNotices}
- popupAlign={{ offset: [20, -16] }}
- >
-
- {currentUser.name ? (
-
-
-
- ) : (
-
+
-
-
+
+
+
+
{item.title}
@@ -51,10 +61,11 @@ export default function NoticeList({
);
})}
-
);
}
diff --git a/src/components/NoticeIcon/NoticeList.less b/src/components/NoticeIcon/NoticeList.less
index f99d59e8..e34efdc9 100644
--- a/src/components/NoticeIcon/NoticeList.less
+++ b/src/components/NoticeIcon/NoticeList.less
@@ -18,6 +18,9 @@
background: #fff;
margin-top: 4px;
}
+ .iconElement {
+ font-size: 32px;
+ }
&.read {
opacity: 0.4;
diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md
index 6c047b7e..d128e4c4 100644
--- a/src/components/NoticeIcon/demo/popover.md
+++ b/src/components/NoticeIcon/demo/popover.md
@@ -49,6 +49,7 @@ const data = [{
description: '描述信息描述信息描述信息',
datetime: '2017-08-07',
type: '消息',
+ clickClose: true,
}, {
id: '000000007',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
@@ -56,6 +57,7 @@ const data = [{
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
datetime: '2017-08-07',
type: '消息',
+ clickClose: true,
}, {
id: '000000008',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
@@ -63,6 +65,7 @@ const data = [{
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
datetime: '2017-08-07',
type: '消息',
+ clickClose: true,
}, {
id: '000000009',
title: '任务名称',
diff --git a/src/components/NoticeIcon/index.d.ts b/src/components/NoticeIcon/index.d.ts
index 52c4dea3..6828634c 100644
--- a/src/components/NoticeIcon/index.d.ts
+++ b/src/components/NoticeIcon/index.d.ts
@@ -1,13 +1,14 @@
-import React from 'react';
+import * as React from 'react';
import NoticeIconTab, { INoticeIconData } from './NoticeIconTab';
export interface INoticeIconProps {
count?: number;
+ bell?: React.ReactNode;
className?: string;
loading?: boolean;
- onClear?: (tableTile: string) => void;
+ onClear?: (tabName: string) => void;
onItemClick?: (item: INoticeIconData, tabProps: INoticeIconProps) => void;
- onTabChange?: (tableTile: string) => void;
+ onTabChange?: (tabTile: string) => void;
popupAlign?: {
points?: [string, string];
offset?: [number, number];
@@ -21,6 +22,7 @@ export interface INoticeIconProps {
onPopupVisibleChange?: (visible: boolean) => void;
popupVisible?: boolean;
locale?: { emptyText: string; clear: string };
+ clearClose?: boolean;
}
export default class NoticeIcon extends React.Component
- {locale.clear}
- {title}
-
+ {showClear ? (
+
+ {locale.clear} {title}
+
+ ) : null}
- this.onItemClick(item, child.props)}
- onClear={() => this.props.onClear(child.props.title)}
- title={child.props.title}
+ onClear={() => this.onClear(name)}
+ title={title}
locale={locale}
/>
{title}
}
- {subTitle && {subTitle}
}
+ {title && (
+
+ {title}
+
+ )}
+ {subTitle && (
+
+ {subTitle}
+
+ )}
{total}
diff --git a/src/components/NumberInfo/index.md b/src/components/NumberInfo/index.md
deleted file mode 100644
index 1116f990..00000000
--- a/src/components/NumberInfo/index.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title:
- en-US: NumberInfo
- zh-CN: NumberInfo
-subtitle: 数据文本
-cols: 1
-order: 10
----
-
-常用在数据卡片中，用于突出展示某个业务数据。
-
-## API
-
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-title | 标题 | ReactNode\|string | -
-subTitle | 子标题 | ReactNode\|string | -
-total | 总量 | ReactNode\|string | -
-subTotal | 子总量 | ReactNode\|string | -
-status | 增加状态 | 'up \| down' | -
-theme | 状态样式 | string | 'light'
-gap | 设置数字和描述直接的间距（像素） | number | 8
diff --git a/src/components/PageHeader/breadcrumb.d.ts b/src/components/PageHeader/breadcrumb.d.ts
new file mode 100644
index 00000000..cfed4021
--- /dev/null
+++ b/src/components/PageHeader/breadcrumb.d.ts
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { IPageHeaderProps } from './index';
+
+export default class BreadcrumbView extends React.Component {}
+
+export function getBreadcrumb(breadcrumbNameMap: object, url: string): object;
diff --git a/src/components/PageHeader/breadcrumb.js b/src/components/PageHeader/breadcrumb.js
new file mode 100644
index 00000000..28c71b06
--- /dev/null
+++ b/src/components/PageHeader/breadcrumb.js
@@ -0,0 +1,176 @@
+import React, { PureComponent, createElement } from 'react';
+import pathToRegexp from 'path-to-regexp';
+import { Breadcrumb } from 'antd';
+import styles from './index.less';
+import { urlToList } from '../_utils/pathTools';
+
+export const getBreadcrumb = (breadcrumbNameMap, url) => {
+ let breadcrumb = breadcrumbNameMap[url];
+ if (!breadcrumb) {
+ Object.keys(breadcrumbNameMap).forEach(item => {
+ if (pathToRegexp(item).test(url)) {
+ breadcrumb = breadcrumbNameMap[item];
+ }
+ });
+ }
+ return breadcrumb || {};
+};
+
+export default class BreadcrumbView extends PureComponent {
+ state = {
+ breadcrumb: null,
+ };
+
+ componentDidMount() {
+ this.getBreadcrumbDom();
+ }
+
+ componentDidUpdate(preProps) {
+ const { location } = this.props;
+ if (!location || !preProps.location) {
+ return;
+ }
+ const prePathname = preProps.location.pathname;
+ if (prePathname !== location.pathname) {
+ this.getBreadcrumbDom();
+ }
+ }
+
+ getBreadcrumbDom = () => {
+ const breadcrumb = this.conversionBreadcrumbList();
+ this.setState({
+ breadcrumb,
+ });
+ };
+
+ getBreadcrumbProps = () => {
+ const { routes, params, location, breadcrumbNameMap } = this.props;
+ return {
+ routes,
+ params,
+ routerLocation: location,
+ breadcrumbNameMap,
+ };
+ };
+
+ // Generated according to props
+ conversionFromProps = () => {
+ const { breadcrumbList, breadcrumbSeparator, itemRender, linkElement = 'a' } = this.props;
+ return (
+
+ {breadcrumbList.map(item => {
+ const title = itemRender ? itemRender(item) : item.title;
+ return (
+
+ {item.href
+ ? createElement(
+ linkElement,
+ {
+ [linkElement === 'a' ? 'href' : 'to']: item.href,
+ },
+ title
+ )
+ : title}
+
+ );
+ })}
+
+ );
+ };
+
+ conversionFromLocation = (routerLocation, breadcrumbNameMap) => {
+ const { breadcrumbSeparator, home, itemRender, linkElement = 'a' } = this.props;
+ // Convert the url to an array
+ const pathSnippets = urlToList(routerLocation.pathname);
+ // Loop data mosaic routing
+ const extraBreadcrumbItems = pathSnippets.map((url, index) => {
+ const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
+ if (currentBreadcrumb.inherited) {
+ return null;
+ }
+ const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component;
+ const name = itemRender ? itemRender(currentBreadcrumb) : currentBreadcrumb.name;
+ return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? (
+
+ {createElement(
+ isLinkable ? linkElement : 'span',
+ { [linkElement === 'a' ? 'href' : 'to']: url },
+ name
+ )}
+
+ ) : null;
+ });
+ // Add home breadcrumbs to your head
+ extraBreadcrumbItems.unshift(
+
+ {createElement(
+ linkElement,
+ {
+ [linkElement === 'a' ? 'href' : 'to']: '/',
+ },
+ home || 'Home'
+ )}
+
+ );
+ return (
+
+ {extraBreadcrumbItems}
+
+ );
+ };
+
+ /**
+ * 将参数转化为面包屑
+ * Convert parameters into breadcrumbs
+ */
+ conversionBreadcrumbList = () => {
+ const { breadcrumbList, breadcrumbSeparator } = this.props;
+ const { routes, params, routerLocation, breadcrumbNameMap } = this.getBreadcrumbProps();
+ if (breadcrumbList && breadcrumbList.length) {
+ return this.conversionFromProps();
+ }
+ // 如果传入 routes 和 params 属性
+ // If pass routes and params attributes
+ if (routes && params) {
+ return (
+ route.breadcrumbName)}
+ params={params}
+ itemRender={this.itemRender}
+ separator={breadcrumbSeparator}
+ />
+ );
+ }
+ // 根据 location 生成 面包屑
+ // Generate breadcrumbs based on location
+ if (routerLocation && routerLocation.pathname) {
+ return this.conversionFromLocation(routerLocation, breadcrumbNameMap);
+ }
+ return null;
+ };
+
+ // 渲染Breadcrumb 子节点
+ // Render the Breadcrumb child node
+ 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 { breadcrumb } = this.state;
+ return breadcrumb;
+ }
+}
diff --git a/src/components/PageHeader/index.d.ts b/src/components/PageHeader/index.d.ts
index a1c356e7..eacbb2de 100644
--- a/src/components/PageHeader/index.d.ts
+++ b/src/components/PageHeader/index.d.ts
@@ -15,6 +15,9 @@ export interface IPageHeaderProps {
tabBarExtraContent?: React.ReactNode;
linkElement?: React.ReactNode;
style?: React.CSSProperties;
+ home?: React.ReactNode;
+ wide?: boolean;
+ hiddenBreadcrumb?: boolean;
}
export default class PageHeader extends React.Component {}
diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index 3080ed04..5d47b345 100644
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@@ -1,168 +1,16 @@
-import React, { PureComponent, createElement } from 'react';
-import PropTypes from 'prop-types';
-import pathToRegexp from 'path-to-regexp';
-import { Breadcrumb, Tabs } from 'antd';
+import React, { PureComponent } from 'react';
+import { Tabs, Skeleton } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
-import { urlToList } from '../_utils/pathTools';
+import BreadcrumbView from './breadcrumb';
const { TabPane } = Tabs;
-export function getBreadcrumb(breadcrumbNameMap, url) {
- let breadcrumb = breadcrumbNameMap[url];
- if (!breadcrumb) {
- Object.keys(breadcrumbNameMap).forEach(item => {
- if (pathToRegexp(item).test(url)) {
- breadcrumb = breadcrumbNameMap[item];
- }
- });
- }
- return breadcrumb || {};
-}
-
export default class PageHeader extends PureComponent {
- static contextTypes = {
- routes: PropTypes.array,
- params: PropTypes.object,
- location: PropTypes.object,
- breadcrumbNameMap: PropTypes.object,
- };
-
- state = {
- breadcrumb: null,
- };
-
- componentDidMount() {
- this.getBreadcrumbDom();
- }
-
- componentDidUpdate(preProps) {
- if (preProps.tabActiveKey !== this.props.tabActiveKey) {
- this.getBreadcrumbDom();
- }
- }
onChange = key => {
- if (this.props.onTabChange) {
- this.props.onTabChange(key);
- }
- };
- getBreadcrumbProps = () => {
- return {
- routes: this.props.routes || this.context.routes,
- params: this.props.params || this.context.params,
- routerLocation: this.props.location || this.context.location,
- breadcrumbNameMap: this.props.breadcrumbNameMap || this.context.breadcrumbNameMap,
- };
- };
- getBreadcrumbDom = () => {
- const breadcrumb = this.conversionBreadcrumbList();
- this.setState({
- breadcrumb,
- });
- };
- // Generated according to props
- conversionFromProps = () => {
- const { breadcrumbList, breadcrumbSeparator, linkElement = 'a' } = this.props;
- return (
-
- {breadcrumbList.map(item => (
-
- {item.href
- ? createElement(
- linkElement,
- {
- [linkElement === 'a' ? 'href' : 'to']: item.href,
- },
- item.title
- )
- : item.title}
-
- ))}
-
- );
- };
- conversionFromLocation = (routerLocation, breadcrumbNameMap) => {
- const { breadcrumbSeparator, linkElement = 'a' } = this.props;
- // Convert the url to an array
- const pathSnippets = urlToList(routerLocation.pathname);
- // Loop data mosaic routing
- const extraBreadcrumbItems = pathSnippets.map((url, index) => {
- const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
- const isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component;
- return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? (
-
- {createElement(
- isLinkable ? linkElement : 'span',
- { [linkElement === 'a' ? 'href' : 'to']: url },
- currentBreadcrumb.name
- )}
-
- ) : null;
- });
- // Add home breadcrumbs to your head
- extraBreadcrumbItems.unshift(
-
- {createElement(
- linkElement,
- {
- [linkElement === 'a' ? 'href' : 'to']: '/',
- },
- '首页'
- )}
-
- );
- return (
-
- {extraBreadcrumbItems}
-
- );
- };
- /**
- * 将参数转化为面包屑
- * Convert parameters into breadcrumbs
- */
- conversionBreadcrumbList = () => {
- const { breadcrumbList, breadcrumbSeparator } = this.props;
- const { routes, params, routerLocation, breadcrumbNameMap } = this.getBreadcrumbProps();
- if (breadcrumbList && breadcrumbList.length) {
- return this.conversionFromProps();
- }
- // 如果传入 routes 和 params 属性
- // If pass routes and params attributes
- if (routes && params) {
- return (
- route.breadcrumbName)}
- params={params}
- itemRender={this.itemRender}
- separator={breadcrumbSeparator}
- />
- );
+ const { onTabChange } = this.props;
+ if (onTabChange) {
+ onTabChange(key);
}
- // 根据 location 生成 面包屑
- // Generate breadcrumbs based on location
- if (routerLocation && routerLocation.pathname) {
- return this.conversionFromLocation(routerLocation, breadcrumbNameMap);
- }
- return null;
- };
- // 渲染Breadcrumb 子节点
- // Render the Breadcrumb child node
- 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() {
@@ -177,6 +25,9 @@ export default class PageHeader extends PureComponent {
tabActiveKey,
tabDefaultActiveKey,
tabBarExtraContent,
+ loading = false,
+ wide = false,
+ hiddenBreadcrumb = false,
} = this.props;
const clsString = classNames(styles.pageHeader, className);
@@ -187,34 +38,44 @@ export default class PageHeader extends PureComponent {
if (tabActiveKey !== undefined) {
activeKeyProps.activeKey = tabActiveKey;
}
-
return (
+
+ );
+ }
+}
diff --git a/src/components/SelectLang/index.less b/src/components/SelectLang/index.less
new file mode 100644
index 00000000..819c0f8c
--- /dev/null
+++ b/src/components/SelectLang/index.less
@@ -0,0 +1,21 @@
+@import '~antd/lib/style/themes/default.less';
+
+.menu {
+ :global(.anticon) {
+ margin-right: 8px;
+ }
+ :global(.ant-dropdown-menu-item) {
+ width: 160px;
+ }
+}
+
+.dropDown {
+ cursor: pointer;
+ font-size: 14px;
+ vertical-align: top;
+ line-height: 64px;
+ > svg {
+ position: relative;
+ top: 2px;
+ }
+}
diff --git a/src/components/SettingDrawer/BlockChecbox.js b/src/components/SettingDrawer/BlockChecbox.js
new file mode 100644
index 00000000..49af42c7
--- /dev/null
+++ b/src/components/SettingDrawer/BlockChecbox.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Tooltip, Icon } from 'antd';
+import style from './index.less';
+
+const BlockChecbox = ({ value, onChange, list }) => (
+ this.changeSetting('fixedHeader', checked)}
+ />
+ ),
+ },
+ {
+ title: formatMessage({ id: 'app.setting.hideheader' }),
+ disabled: !fixedHeader,
+ disabledReason: formatMessage({ id: 'app.setting.hideheader.hint' }),
+ action: (
+ this.changeSetting('autoHideHeader', checked)}
+ />
+ ),
+ },
+ {
+ title: formatMessage({ id: 'app.setting.fixedsidebar' }),
+ disabled: layout === 'topmenu',
+ disabledReason: formatMessage({ id: 'app.setting.fixedsidebar.hint' }),
+ action: (
+ this.changeSetting('fixSiderbar', checked)}
+ />
+ ),
+ },
+ ];
+ };
+
+ changeSetting = (key, value) => {
+ const { setting } = this.props;
+ const nextState = { ...setting };
+ nextState[key] = value;
+ if (key === 'layout') {
+ nextState.contentWidth = value === 'topmenu' ? 'Fixed' : 'Fluid';
+ } else if (key === 'fixedHeader' && !value) {
+ nextState.autoHideHeader = false;
+ }
+ this.setState(nextState, () => {
+ const { dispatch } = this.props;
+ dispatch({
+ type: 'setting/changeSetting',
+ payload: this.state,
+ });
+ });
+ };
+
+ togglerContent = () => {
+ const { collapse } = this.state;
+ this.setState({ collapse: !collapse });
+ };
+
+ renderLayoutSettingItem = item => {
+ const action = React.cloneElement(item.action, {
+ disabled: item.disabled,
+ });
+ return (
+
+
+ {item.title}
+
+
+ );
+ };
+
+ render() {
+ const { setting } = this.props;
+ const { navTheme, primaryColor, layout, colorWeak } = setting;
+ const { collapse } = this.state;
+ return (
+
+
+ }
+ onHandleClick={this.togglerContent}
+ style={{
+ zIndex: 999,
+ }}
+ >
+
- {this.state.breadcrumb}
-
diff --git a/src/components/Result/index.js b/src/components/Result/index.js
index ada2f5f4..89f9f31a 100644
--- a/src/components/Result/index.js
+++ b/src/components/Result/index.js
@@ -13,8 +13,8 @@ export default function Result({
...restProps
}) {
const iconMap = {
- error:
- {logo &&
@@ -25,7 +25,7 @@ const desc2 = (
diff --git a/src/components/Result/demo/error.md b/src/components/Result/demo/error.md
index 836bd8cb..5fd25cfd 100644
--- a/src/components/Result/demo/error.md
+++ b/src/components/Result/demo/error.md
@@ -15,11 +15,11 @@ const extra = (
您提交的内容有如下错误：
{logo}
}
-
-
- {tabList.map(item =>
- )}
);
}
diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less
index 2a8c9a6a..da947d09 100644
--- a/src/components/PageHeader/index.less
+++ b/src/components/PageHeader/index.less
@@ -4,13 +4,17 @@
background: @component-background;
padding: 16px 32px 0 32px;
border-bottom: @border-width-base @border-style-base @border-color-split;
-
+ .wide {
+ max-width: 1200px;
+ margin: auto;
+ }
.detail {
display: flex;
}
.row {
display: flex;
+ width: 100%;
}
.breadcrumb {
@@ -18,11 +22,13 @@
}
.tabs {
- margin: 0 0 -17px -8px;
+ margin: 0 0 0 -8px;
:global {
+ // 1px 可以让选中效果显示完成
.ant-tabs-bar {
- border-bottom: @border-width-base @border-style-base @border-color-split;
+ border-bottom: none;
+ margin-bottom: 1px;
}
}
}
@@ -62,12 +68,18 @@
}
.title,
+ .content {
+ flex: auto;
+ }
+
.action,
- .content,
.extraContent,
.main {
- // IE auto is no have height
- flex: 1;
+ flex: 0 1 auto;
+ }
+
+ .main {
+ width: 100%;
}
.title,
diff --git a/src/components/PageHeader/index.md b/src/components/PageHeader/index.md
index 288f8b6c..e82c8b89 100644
--- a/src/components/PageHeader/index.md
+++ b/src/components/PageHeader/index.md
@@ -16,9 +16,11 @@ order: 11
| title | title 区域 | ReactNode | - |
| logo | logo区域 | ReactNode | - |
| action | 操作区，位于 title 行的行尾 | ReactNode | - |
+| home | 默认的主页说明文字 | ReactNode | - |
| content | 内容区 | ReactNode | - |
| extraContent | 额外内容区，位于content的右侧 | ReactNode | - |
| breadcrumbList | 面包屑数据，配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - |
+| hiddenBreadcrumb |隐藏面包屑 | boolean | false |
| routes | 面包屑相关属性，router 的路由栈信息 | object[] | - |
| params | 面包屑相关属性，路由的参数 | object | - |
| location | 面包屑相关属性，当前的路由信息 | object | - |
@@ -26,7 +28,9 @@ order: 11
| tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | - |
| tabActiveKey | 当前高亮的 tab 项 | string | - |
| tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项 |
+| wide | 是否定宽 | boolean | false |
| onTabChange | 切换面板的回调 | (key) => void | - |
+| itemRender | 自定义节点方法 | (menuItem) => ReactNode | - |
| linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
> 面包屑的配置方式有三种，一是直接配置 `breadcrumbList`，二是结合 `react-router@2` `react-router@3`，配置 `routes` 及 `params` 实现，类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router)，三是结合 `react-router@4`，配置 `location` `breadcrumbNameMap`，优先级依次递减，脚手架中使用最后一种。 对于后两种用法，你也可以将 `routes` `params` 及 `location` `breadcrumbNameMap` 放到 context 中，组件会自动获取。
diff --git a/src/components/PageHeader/index.test.js b/src/components/PageHeader/index.test.js
index 5238ac55..d22706e9 100644
--- a/src/components/PageHeader/index.test.js
+++ b/src/components/PageHeader/index.test.js
@@ -1,4 +1,4 @@
-import { getBreadcrumb } from './index';
+import { getBreadcrumb } from './breadcrumb';
import { urlToList } from '../_utils/pathTools';
const routerData = {
@@ -26,22 +26,18 @@ describe('test getBreadcrumb', () => {
expect(getBreadcrumb(routerData, '/userinfo/2144/addr').name).toEqual('收货订单');
});
it('Loop through the parameters', () => {
- const urlNameList = urlToList('/userinfo/2144/addr').map(url => {
- return getBreadcrumb(routerData, url).name;
- });
+ const urlNameList = urlToList('/userinfo/2144/addr').map(
+ url => getBreadcrumb(routerData, url).name
+ );
expect(urlNameList).toEqual(['用户列表', '用户信息', '收货订单']);
});
it('a path', () => {
- const urlNameList = urlToList('/userinfo').map(url => {
- return getBreadcrumb(routerData, url).name;
- });
+ const urlNameList = urlToList('/userinfo').map(url => getBreadcrumb(routerData, url).name);
expect(urlNameList).toEqual(['用户列表']);
});
it('Secondary path', () => {
- const urlNameList = urlToList('/userinfo/2144').map(url => {
- return getBreadcrumb(routerData, url).name;
- });
+ const urlNameList = urlToList('/userinfo/2144').map(url => getBreadcrumb(routerData, url).name);
expect(urlNameList).toEqual(['用户列表', '用户信息']);
});
});
diff --git a/src/components/PageHeaderWrapper/GridContent.js b/src/components/PageHeaderWrapper/GridContent.js
new file mode 100644
index 00000000..931ea20c
--- /dev/null
+++ b/src/components/PageHeaderWrapper/GridContent.js
@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import styles from './GridContent.less';
+
+class GridContent extends PureComponent {
+ render() {
+ const { contentWidth, children } = this.props;
+ let className = `${styles.main}`;
+ if (contentWidth === 'Fixed') {
+ className = `${styles.main} ${styles.wide}`;
+ }
+ return
- {title &&
- {title}
} - {action &&{action}
}
-
- {content &&
+ {tabList.map(item => (
+
+ ) : null}
+
- {tabList &&
- tabList.length && (
- {content}
}
- {extraContent && {extraContent}
}
+
+
+ {hiddenBreadcrumb ? null :
+ {tabList && tabList.length ? (
+
+ {logo &&
- {logo}
}
+
+
+ {title &&
+ {title}
} + {action &&{action}
}
+
+ {content &&
+ {content}
}
+ {extraContent && {extraContent}
}
+ {children}
;
+ }
+}
+
+export default connect(({ setting }) => ({
+ contentWidth: setting.contentWidth,
+}))(GridContent);
diff --git a/src/components/PageHeaderWrapper/GridContent.less b/src/components/PageHeaderWrapper/GridContent.less
new file mode 100644
index 00000000..d5496e9e
--- /dev/null
+++ b/src/components/PageHeaderWrapper/GridContent.less
@@ -0,0 +1,10 @@
+.main {
+ width: 100%;
+ height: 100%;
+ min-height: 100%;
+ transition: 0.3s;
+ &.wide {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+}
diff --git a/src/components/PageHeaderWrapper/index.js b/src/components/PageHeaderWrapper/index.js
new file mode 100644
index 00000000..cd745f66
--- /dev/null
+++ b/src/components/PageHeaderWrapper/index.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { FormattedMessage } from 'umi/locale';
+import Link from 'umi/link';
+import PageHeader from '@/components/PageHeader';
+import { connect } from 'dva';
+import GridContent from './GridContent';
+import styles from './index.less';
+import MenuContext from '@/layouts/MenuContext';
+
+const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
+
+ {top}
+
+ {value => (
+
+ {children ? (
+
+);
+
+export default connect(({ setting }) => ({
+ contentWidth: setting.contentWidth,
+}))(PageHeaderWrapper);
diff --git a/src/layouts/PageHeaderLayout.less b/src/components/PageHeaderWrapper/index.less
similarity index 100%
rename from src/layouts/PageHeaderLayout.less
rename to src/components/PageHeaderWrapper/index.less
diff --git a/src/components/PageLoading/index.js b/src/components/PageLoading/index.js
new file mode 100644
index 00000000..77c0f165
--- /dev/null
+++ b/src/components/PageLoading/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Spin } from 'antd';
+
+// loading components from code split
+// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
+export default () => (
+
+ {children}
+
+ ) : null}
+
+
+);
diff --git a/src/components/Result/demo/classic.md b/src/components/Result/demo/classic.md
index b4ccdcf1..0cd9d14b 100644
--- a/src/components/Result/demo/classic.md
+++ b/src/components/Result/demo/classic.md
@@ -15,7 +15,7 @@ const desc1 = (
曲丽丽
-
2016-12-12 12:32
周毛毛
-
+ {list.map(item => (
+
+
+ ))}
+
+);
+
+export default BlockChecbox;
diff --git a/src/components/SettingDrawer/ThemeColor.js b/src/components/SettingDrawer/ThemeColor.js
new file mode 100644
index 00000000..e5d66d4b
--- /dev/null
+++ b/src/components/SettingDrawer/ThemeColor.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Tooltip, Icon } from 'antd';
+import { formatMessage } from 'umi/locale';
+import styles from './ThemeColor.less';
+
+const Tag = ({ color, check, ...rest }) => (
+ onChange(item.key)}>
+ 
+
+
+
+
+ {check ?
+);
+
+const ThemeColor = ({ colors, title, value, onChange }) => {
+ let colorList = colors;
+ if (!colors) {
+ colorList = [
+ {
+ key: 'dust',
+ color: '#F5222D',
+ },
+ {
+ key: 'volcano',
+ color: '#FA541C',
+ },
+ {
+ key: 'sunset',
+ color: '#FAAD14',
+ },
+ {
+ key: 'cyan',
+ color: '#13C2C2',
+ },
+ {
+ key: 'green',
+ color: '#52C41A',
+ },
+ {
+ key: 'daybreak',
+ color: '#1890FF',
+ },
+ {
+ key: 'geekblue',
+ color: '#2F54EB',
+ },
+ {
+ key: 'purple',
+ color: '#722ED1',
+ },
+ ];
+ }
+ return (
+
+
+ );
+};
+
+export default ThemeColor;
diff --git a/src/components/SettingDrawer/ThemeColor.less b/src/components/SettingDrawer/ThemeColor.less
new file mode 100644
index 00000000..4983eb9c
--- /dev/null
+++ b/src/components/SettingDrawer/ThemeColor.less
@@ -0,0 +1,21 @@
+.themeColor {
+ overflow: hidden;
+ margin-top: 24px;
+ .title {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.65);
+ line-height: 22px;
+ margin-bottom: 12px;
+ }
+ .colorBlock {
+ width: 20px;
+ height: 20px;
+ border-radius: 2px;
+ float: left;
+ cursor: pointer;
+ margin-right: 8px;
+ text-align: center;
+ color: #fff;
+ font-weight: bold;
+ }
+}
diff --git a/src/components/SettingDrawer/index.js b/src/components/SettingDrawer/index.js
new file mode 100644
index 00000000..4996e996
--- /dev/null
+++ b/src/components/SettingDrawer/index.js
@@ -0,0 +1,254 @@
+import React, { PureComponent } from 'react';
+import { Select, message, Drawer, List, Switch, Divider, Icon, Button, Alert, Tooltip } from 'antd';
+import { formatMessage } from 'umi/locale';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { connect } from 'dva';
+import omit from 'omit.js';
+import styles from './index.less';
+import ThemeColor from './ThemeColor';
+import BlockChecbox from './BlockChecbox';
+
+const { Option } = Select;
+
+const Body = ({ children, title, style }) => (
+ {title}
+
+ {colorList.map(({ key, color }) => (
+
+ onChange && onChange(color)}
+ />
+
+ ))}
+
+
+
+);
+
+@connect(({ setting }) => ({ setting }))
+class SettingDrawer extends PureComponent {
+ state = {
+ collapse: false,
+ };
+
+ getLayoutSetting = () => {
+ const {
+ setting: { contentWidth, fixedHeader, layout, autoHideHeader, fixSiderbar },
+ } = this.props;
+ return [
+ {
+ title: formatMessage({ id: 'app.setting.content-width' }),
+ action: (
+
+ ),
+ },
+ {
+ title: formatMessage({ id: 'app.setting.fixedheader' }),
+ action: (
+ {title}
+ {children} +
+
+ this.changeSetting('navTheme', value)}
+ />
+
+
+ this.changeSetting('primaryColor', color)}
+ />
+
+ this.changeSetting('layout', value)}
+ />
+
+
+ this.changeSetting('colorWeak', checked)}
+ />,
+ ]}
+ >
+ {formatMessage({ id: 'app.setting.weakmode' })}
+
+
+ message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
+ >
+
+
+
+ {formatMessage({ id: 'app.setting.production.hint' })}{' '}
+
+ src/defaultSettings.js
+
+
+ }
+ />
+
+
-
+ {
- props.onCollapse(true);
+const SiderMenuWrapper = React.memo(props => {
+ const { isMobile, menuData, collapsed, onCollapse } = props;
+ const flatMenuKeys = getFlatMenuKeys(menuData);
+ return isMobile ? (
+ onCollapse(true)}
+ style={{
+ padding: 0,
+ height: '100vh',
}}
- width="256px"
>
-
+
Ant Design Pro
+
+
+ );
+ }
+}
+
+ReactDOM.render(
+
+ 类目一
+ 类目二
+ 类目三
+ 类目四
+ 类目五
+ 类目六
+
+
+
-
- 全部
-
+ {hideCheckAll ? null : (
+
+ 全部
+
+ )}
{value &&
React.Children.map(children, child => {
if (this.isTagSelectOption(child)) {
diff --git a/src/components/TagSelect/index.md b/src/components/TagSelect/index.md
index 608219cd..25a42b57 100644
--- a/src/components/TagSelect/index.md
+++ b/src/components/TagSelect/index.md
@@ -19,7 +19,7 @@ order: 13
| defaultValue |默认选中的项 |string[] \| number[] | |
| onChange | 标签选择的回调函数 | Function(checkedTags) | |
| expandable | 是否展示 `展开/收起` 按钮 | Boolean | false |
-
+| hideCheckAll | 隐藏 `全部` 按钮 | Boolean | false |
### TagSelectOption
diff --git a/src/components/TopNavHeader/index.js b/src/components/TopNavHeader/index.js
new file mode 100644
index 00000000..ee302f66
--- /dev/null
+++ b/src/components/TopNavHeader/index.js
@@ -0,0 +1,55 @@
+import React, { PureComponent } from 'react';
+import Link from 'umi/link';
+import RightContent from '../GlobalHeader/RightContent';
+import BaseMenu from '../SiderMenu/BaseMenu';
+import { getFlatMenuKeys } from '../SiderMenu/SiderMenuUtils';
+import styles from './index.less';
+
+export default class TopNavHeader extends PureComponent {
+ state = {
+ maxWidth: undefined,
+ };
+
+ static getDerivedStateFromProps(props) {
+ return {
+ maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 280 - 165 - 40,
+ };
+ }
+
+ render() {
+ const { theme, contentWidth, menuData, logo } = this.props;
+ const { maxWidth } = this.state;
+ const flatMenuKeys = getFlatMenuKeys(menuData);
+ return (
+ 11%
, mountNode);
-````
+```
diff --git a/src/components/Trend/demo/reverse.md b/src/components/Trend/demo/reverse.md
index 143ed023..26f73667 100644
--- a/src/components/Trend/demo/reverse.md
+++ b/src/components/Trend/demo/reverse.md
@@ -5,7 +5,7 @@ title: 颜色反转
在数值背后添加一个小图标来标识涨跌情况。
-````jsx
+```jsx
import Trend from 'ant-design-pro/lib/Trend';
ReactDOM.render(
@@ -14,4 +14,4 @@ ReactDOM.render(
+
+ );
+ }
+}
diff --git a/src/components/TopNavHeader/index.less b/src/components/TopNavHeader/index.less
new file mode 100644
index 00000000..9883019e
--- /dev/null
+++ b/src/components/TopNavHeader/index.less
@@ -0,0 +1,64 @@
+.head {
+ width: 100%;
+ transition: background 0.3s, width 0.2s;
+ height: 64px;
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+ position: relative;
+ :global {
+ .ant-menu-submenu.ant-menu-submenu-horizontal {
+ line-height: 64px;
+ height: 100%;
+ .ant-menu-submenu-title {
+ height: 100%;
+ }
+ }
+ }
+ &.light {
+ background-color: #fff;
+ }
+ .main {
+ display: flex;
+ height: 64px;
+ padding-left: 24px;
+ &.wide {
+ max-width: 1200px;
+ margin: auto;
+ padding-left: 0;
+ }
+ .left {
+ flex: 1;
+ display: flex;
+ }
+ .right {
+ width: 324px;
+ }
+ }
+}
+
+.logo {
+ width: 165px;
+ height: 64px;
+ position: relative;
+ line-height: 64px;
+ transition: all 0.3s;
+ overflow: hidden;
+ img {
+ display: inline-block;
+ vertical-align: middle;
+ height: 32px;
+ }
+ h1 {
+ color: #fff;
+ display: inline-block;
+ vertical-align: top;
+ font-size: 16px;
+ margin: 0 0 0 12px;
+ font-weight: 400;
+ }
+}
+
+.light {
+ h1 {
+ color: #002140;
+ }
+}
diff --git a/src/components/Trend/demo/basic.md b/src/components/Trend/demo/basic.md
index 63c415dc..da771dc2 100644
--- a/src/components/Trend/demo/basic.md
+++ b/src/components/Trend/demo/basic.md
@@ -5,7 +5,7 @@ title: 演示
在数值背后添加一个小图标来标识涨跌情况。
-````jsx
+```jsx
import Trend from 'ant-design-pro/lib/Trend';
ReactDOM.render(
@@ -14,4 +14,4 @@ ReactDOM.render(
{
+ this.maim = ref;
+ }}
+ className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}
+ >
+
+
+
+
+
+
+
+ Ant Design Pro
+ +
+
+
- {children}
+ {children}
{flag && (
-
-
-
-
- {children}
+ {isTop && !isMobile ? null : (
+
+
+
-
+
);
-
return (
-
+
+
- {params =>
+
+ )}
+
);
}
}
-export default connect(({ user, global, loading }) => ({
- currentUser: user.currentUser,
+export default connect(({ global, setting, menu }) => ({
collapsed: global.collapsed,
- fetchingNotices: loading.effects["global/fetchNotices"],
- notices: global.notices
-}))(BasicLayout);
+ layout: setting.layout,
+ menuData: menu.menuData,
+ breadcrumbNameMap: menu.breadcrumbNameMap,
+ ...setting,
+}))(props => (
+
+ {isMobile =>
+));
diff --git a/src/layouts/Footer.js b/src/layouts/Footer.js
new file mode 100644
index 00000000..693c8172
--- /dev/null
+++ b/src/layouts/Footer.js
@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+import { Layout, Icon } from 'antd';
+import GlobalFooter from '@/components/GlobalFooter';
+
+const { Footer } = Layout;
+const FooterView = () => (
+
+);
+export default FooterView;
diff --git a/src/layouts/Header.js b/src/layouts/Header.js
new file mode 100644
index 00000000..b7e7a759
--- /dev/null
+++ b/src/layouts/Header.js
@@ -0,0 +1,161 @@
+import React, { PureComponent } from 'react';
+import { formatMessage } from 'umi/locale';
+import { Layout, message } from 'antd';
+import Animate from 'rc-animate';
+import { connect } from 'dva';
+import router from 'umi/router';
+import GlobalHeader from '@/components/GlobalHeader';
+import TopNavHeader from '@/components/TopNavHeader';
+import styles from './Header.less';
+
+const { Header } = Layout;
+
+class HeaderView extends PureComponent {
+ state = {
+ visible: true,
+ };
+
+ static getDerivedStateFromProps(props, state) {
+ if (!props.autoHideHeader && !state.visible) {
+ return {
+ visible: true,
+ };
+ }
+ return null;
+ }
+
+ componentDidMount() {
+ document.addEventListener('scroll', this.handScroll, { passive: true });
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('scroll', this.handScroll);
+ }
+
+ getHeadWidth = () => {
+ const { isMobile, collapsed, setting } = this.props;
+ const { fixedHeader, layout } = setting;
+ if (isMobile || !fixedHeader || layout === 'topmenu') {
+ return '100%';
+ }
+ return collapsed ? 'calc(100% - 80px)' : 'calc(100% - 256px)';
+ };
+
+ handleNoticeClear = type => {
+ message.success(
+ `${formatMessage({ id: 'component.noticeIcon.cleared' })} ${formatMessage({
+ id: `component.globalHeader.${type}`,
+ })}`
+ );
+ const { dispatch } = this.props;
+ dispatch({
+ type: 'global/clearNotices',
+ payload: type,
+ });
+ };
+
+ handleMenuClick = ({ key }) => {
+ const { dispatch } = this.props;
+ if (key === 'userCenter') {
+ router.push('/account/center');
+ return;
+ }
+ if (key === 'triggerError') {
+ router.push('/exception/trigger');
+ return;
+ }
+ if (key === 'userinfo') {
+ router.push('/account/settings/base');
+ return;
+ }
+ if (key === 'logout') {
+ dispatch({
+ type: 'login/logout',
+ });
+ }
+ };
+
+ handleNoticeVisibleChange = visible => {
+ if (visible) {
+ const { dispatch } = this.props;
+ dispatch({
+ type: 'global/fetchNotices',
+ });
+ }
+ };
+
+ handScroll = () => {
+ const { autoHideHeader } = this.props;
+ const { visible } = this.state;
+ if (!autoHideHeader) {
+ return;
+ }
+ const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
+ if (!this.ticking) {
+ this.ticking = true;
+ requestAnimationFrame(() => {
+ if (this.oldScrollTop > scrollTop) {
+ this.setState({
+ visible: true,
+ });
+ }
+ if (scrollTop > 300 && visible) {
+ this.setState({
+ visible: false,
+ });
+ }
+ if (scrollTop < 300 && !visible) {
+ this.setState({
+ visible: true,
+ });
+ }
+ this.oldScrollTop = scrollTop;
+ this.ticking = false;
+ });
+ }
+ };
+
+ render() {
+ const { isMobile, handleMenuCollapse, setting } = this.props;
+ const { navTheme, layout, fixedHeader } = setting;
+ const { visible } = this.state;
+ const isTop = layout === 'topmenu';
+ const width = this.getHeadWidth();
+ const HeaderDom = visible ? (
+
+ {isTop && !isMobile ? (
+
+ ) : null;
+ return (
+
+ {HeaderDom}
+
+ );
+ }
+}
+
+export default connect(({ user, global, setting, loading }) => ({
+ currentUser: user.currentUser,
+ collapsed: global.collapsed,
+ fetchingNotices: loading.effects['global/fetchNotices'],
+ notices: global.notices,
+ setting,
+}))(HeaderView);
diff --git a/src/layouts/Header.less b/src/layouts/Header.less
new file mode 100644
index 00000000..394bfda1
--- /dev/null
+++ b/src/layouts/Header.less
@@ -0,0 +1,8 @@
+.fixedHeader {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 100%;
+ z-index: 9;
+ transition: width 0.2s;
+}
diff --git a/src/layouts/MenuContext.js b/src/layouts/MenuContext.js
new file mode 100644
index 00000000..860f1068
--- /dev/null
+++ b/src/layouts/MenuContext.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export default createContext();
diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js
deleted file mode 100644
index 2c615e89..00000000
--- a/src/layouts/PageHeaderLayout.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Link } from 'dva/router';
-import PageHeader from '../components/PageHeader';
-import styles from './PageHeaderLayout.less';
-
-export default ({ children, wrapperClassName, top, ...restProps }) => (
-
+ Copyright
+);
+
+class UserLayout extends React.PureComponent {
+ // @TODO title
+ // getPageTitle() {
+ // const { routerData, location } = this.props;
+ // const { pathname } = location;
+ // let title = 'Ant Design Pro';
+ // if (routerData[pathname] && routerData[pathname].name) {
+ // title = `${routerData[pathname].name} - Ant Design Pro`;
+ // }
+ // return title;
+ // }
+
+ render() {
+ const { children } = this.props;
+ return (
+ // @TODO
+
-
+
- }
- gap={8}
- total={numeral(12321).format('0,0')}
- status="up"
- subTotal={17.1}
- />
- record.index}
- size="small"
- columns={columns}
- dataSource={searchData}
- pagination={{
- style: { marginBottom: 0 },
- pageSize: 5,
- }}
+
Ant Design Pro
'); + }); +}); diff --git a/src/e2e/topMenu.e2e.js b/src/e2e/topMenu.e2e.js new file mode 100644 index 00000000..51ff9f35 --- /dev/null +++ b/src/e2e/topMenu.e2e.js @@ -0,0 +1,18 @@ +const BASE_URL = `http://localhost:${process.env.PORT || 8000}`; + +describe('Homepage', () => { + beforeAll(async () => { + jest.setTimeout(1000000); + }); + it('topmenu should have footer', async () => { + const params = '/form/basic-form?navTheme=light&layout=topmenu'; + await page.goto(`${BASE_URL}${params}`); + await page.waitForSelector('footer', { + timeout: 2000, + }); + const haveFooter = await page.evaluate( + () => document.getElementsByTagName('footer').length > 0 + ); + expect(haveFooter).toBeTruthy(); + }); +}); diff --git a/src/e2e/userLayout.e2e.js b/src/e2e/userLayout.e2e.js new file mode 100644 index 00000000..a3f23a68 --- /dev/null +++ b/src/e2e/userLayout.e2e.js @@ -0,0 +1,32 @@ +import RouterConfig from '../../config/router.config'; + +const BASE_URL = `http://localhost:${process.env.PORT || 8000}`; + +function formatter(data) { + return data + .reduce((pre, item) => { + pre.push(item.path); + return pre; + }, []) + .filter(item => item); +} + +describe('Homepage', () => { + const testPage = path => async () => { + await page.goto(`${BASE_URL}${path}`); + await page.waitForSelector('footer', { + timeout: 2000, + }); + const haveFooter = await page.evaluate( + () => document.getElementsByTagName('footer').length > 0 + ); + expect(haveFooter).toBeTruthy(); + }; + + beforeAll(async () => { + jest.setTimeout(1000000); + }); + formatter(RouterConfig[0].routes).forEach(route => { + fit(`test pages ${route}`, testPage(route)); + }); +}); diff --git a/src/global.js b/src/global.js index e2679cf8..8c215e92 100644 --- a/src/global.js +++ b/src/global.js @@ -1,13 +1,39 @@ -// import Rollbar from 'rollbar'; +import { Modal, message } from 'antd'; +import { formatMessage } from 'umi/locale'; -// // Track error by rollbar.com -// if (location.host === 'preview.pro.ant.design') { -// Rollbar.init({ -// accessToken: '033ca6d7c0eb4cc1831cf470c2649971', -// captureUncaught: true, -// captureUnhandledRejections: true, -// payload: { -// environment: 'production', -// }, -// }); -// } +// Notify user if offline now +window.addEventListener('sw.offline', () => { + message.warning(formatMessage({ id: 'app.pwa.offline' })); +}); + +// Pop up a prompt on the page asking the user if they want to use the latest version +window.addEventListener('sw.updated', e => { + Modal.confirm({ + title: formatMessage({ id: 'app.pwa.serviceworker.updated' }), + content: formatMessage({ id: 'app.pwa.serviceworker.updated.hint' }), + okText: formatMessage({ id: 'app.pwa.serviceworker.updated.ok' }), + onOk: async () => { + // Check if there is sw whose state is waiting in ServiceWorkerRegistration + // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration + const worker = e.detail && e.detail.waiting; + if (!worker) { + return Promise.resolve(); + } + // Send skip-waiting event to waiting SW with MessageChannel + await new Promise((resolve, reject) => { + const channel = new MessageChannel(); + channel.port1.onmessage = event => { + if (event.data.error) { + reject(event.data.error); + } else { + resolve(event.data); + } + }; + worker.postMessage({ type: 'skip-waiting' }, [channel.port2]); + }); + // Refresh current page to use the updated HTML and other assets after SW has skiped waiting + window.location.reload(true); + return true; + }, + }); +}); diff --git a/src/global.less b/src/global.less index 5cfe914a..fccd7e83 100644 --- a/src/global.less +++ b/src/global.less @@ -1,11 +1,15 @@ html, body, -:global(#root) { +#root { height: 100%; } -:global(.ant-layout) { - min-height: 100%; +.colorWeak { + filter: invert(80%); +} + +.ant-layout { + min-height: 100vh; } canvas { @@ -23,9 +27,7 @@ body { margin: 40px 0 !important; } -// temp fix for https://github.com/ant-design/ant-design/commit/a1fafb5b727b62cb0be29ce6e9eca8f579d4f8b7 -:global { - .ant-spin-container { - overflow: visible !important; - } +ul, +ol { + list-style: none; } diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index ce0a2bb2..2ca98e37 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -1,275 +1,244 @@ -import React, { Fragment } from "react"; -import PropTypes from "prop-types"; -import { Layout, Icon, message } from "antd"; -import DocumentTitle from "react-document-title"; -import { connect } from "dva"; -import { routerRedux } from "dva/router"; -import { ContainerQuery } from "react-container-query"; -import classNames from "classnames"; -import pathToRegexp from "path-to-regexp"; -import { enquireScreen, unenquireScreen } from "enquire-js"; -import GlobalHeader from "components/GlobalHeader"; -import GlobalFooter from "components/GlobalFooter"; -import SiderMenu from "components/SiderMenu"; -import Authorized from "utils/Authorized"; -import { getMenuData } from "common/menu"; -import logo from "assets/logo.svg"; +import React, { Suspense } from 'react'; +import { Layout } from 'antd'; +import DocumentTitle from 'react-document-title'; +import isEqual from 'lodash/isEqual'; +import memoizeOne from 'memoize-one'; +import { connect } from 'dva'; +import { ContainerQuery } from 'react-container-query'; +import classNames from 'classnames'; +import pathToRegexp from 'path-to-regexp'; +import Media from 'react-media'; +import { formatMessage } from 'umi/locale'; +import Authorized from '@/utils/Authorized'; +import logo from '../assets/logo.svg'; +import Footer from './Footer'; +import Header from './Header'; +import Context from './MenuContext'; +import Exception403 from '../pages/Exception/403'; +import PageLoading from '@/components/PageLoading'; +import SiderMenu from '@/components/SiderMenu'; -const { Content, Header, Footer } = Layout; -const { check } = Authorized; +// lazy load SettingDrawer +const SettingDrawer = React.lazy(() => import('@/components/SettingDrawer')); -/** - * 根据菜单取得重定向地址. - */ -const redirectData = []; -const getRedirect = item => { - if (item && item.children) { - if (item.children[0] && item.children[0].path) { - redirectData.push({ - from: `${item.path}`, - to: `${item.children[0].path}` - }); - item.children.forEach(children => { - getRedirect(children); - }); - } - } -}; -getMenuData().forEach(getRedirect); - -/** - * 获取面包屑映射 - * @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 { Content } = Layout; const query = { - "screen-xs": { - maxWidth: 575 + 'screen-xs': { + maxWidth: 575, }, - "screen-sm": { + 'screen-sm': { minWidth: 576, - maxWidth: 767 + maxWidth: 767, }, - "screen-md": { + 'screen-md': { minWidth: 768, - maxWidth: 991 + maxWidth: 991, }, - "screen-lg": { + 'screen-lg': { minWidth: 992, - maxWidth: 1199 + maxWidth: 1199, + }, + 'screen-xl': { + minWidth: 1200, + maxWidth: 1599, + }, + 'screen-xxl': { + minWidth: 1600, }, - "screen-xl": { - minWidth: 1200 - } }; -let isMobile; -enquireScreen(b => { - isMobile = b; -}); - class BasicLayout extends React.PureComponent { - static childContextTypes = { - location: PropTypes.object, - breadcrumbNameMap: PropTypes.object - }; - state = { - isMobile - }; - getChildContext() { - const { location, routerData } = this.props; - return { - location, - breadcrumbNameMap: getBreadcrumbNameMap(getMenuData(), routerData) - }; + constructor(props) { + super(props); + this.getPageTitle = memoizeOne(this.getPageTitle); + this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual); } + componentDidMount() { - this.enquireHandler = enquireScreen(mobile => { - this.setState({ - isMobile: mobile - }); + const { + dispatch, + route: { routes, authority }, + } = this.props; + dispatch({ + type: 'user/fetchCurrent', }); - this.props.dispatch({ - type: "user/fetchCurrent" + dispatch({ + type: 'setting/getSetting', }); - } - componentWillUnmount() { - unenquireScreen(this.enquireHandler); - } - getPageTitle() { - const { routerData, location } = this.props; - const { pathname } = location; - let title = "Umi Antd Pro"; - let currRouterData = null; - // match params path - Object.keys(routerData).forEach(key => { - if (pathToRegexp(key).test(pathname)) { - currRouterData = routerData[key]; - } + dispatch({ + type: 'menu/getMenuData', + payload: { routes, authority }, }); - if (currRouterData && currRouterData.name) { - title = `${currRouterData.name} - Ant Design Pro`; - } - return title; } - getBashRedirect = () => { - // According to the url parameter to redirect - // 这里是重定向的,重定向到 url 的 redirect 参数所示地址 - const urlParams = new URL(window.location.href); - const redirect = urlParams.searchParams.get("redirect"); - // Remove the parameters in the url - if (redirect) { - console.log(redirect); - urlParams.searchParams.delete("redirect"); - window.history.replaceState(null, "redirect", urlParams.href); - } else { - const { routerData } = this.props; - // get the first authorized route path in routerData - const authorizedPath = Object.keys(routerData).find( - item => check(routerData[item].authority, item) && item !== "/" - ); - // this.props.dispatch(routerRedux.push(authorizedPath)); - return authorizedPath; + + componentDidUpdate(preProps) { + // After changing to phone mode, + // if collapsed is true, you need to click twice to display + const { collapsed, isMobile } = this.props; + if (isMobile && !preProps.isMobile && !collapsed) { + this.handleMenuCollapse(false); } - // this.props.dispatch(routerRedux.push(redirect)); + } - return redirect; - }; - handleMenuCollapse = collapsed => { - this.props.dispatch({ - type: "global/changeLayoutCollapsed", - payload: collapsed - }); + getContext() { + const { location, breadcrumbNameMap } = this.props; + return { + location, + breadcrumbNameMap, + }; + } + + /** + * 获取面包屑映射 + * @param {Object} menuData 菜单配置 + */ + getBreadcrumbNameMap() { + const routerMap = {}; + const { menuData } = this.props; + const flattenMenuData = data => { + data.forEach(menuItem => { + if (menuItem.children) { + flattenMenuData(menuItem.children); + } + // Reduce memory usage + routerMap[menuItem.path] = menuItem; + }); + }; + flattenMenuData(menuData); + return routerMap; + } + + matchParamsPath = (pathname, breadcrumbNameMap) => { + const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname)); + return breadcrumbNameMap[pathKey]; }; - handleNoticeClear = type => { - message.success(`清空了${type}`); - this.props.dispatch({ - type: "global/clearNotices", - payload: type + + getPageTitle = (pathname, breadcrumbNameMap) => { + const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap); + + if (!currRouterData) { + return 'Ant Design Pro'; + } + const pageName = formatMessage({ + id: currRouterData.locale || currRouterData.name, + defaultMessage: currRouterData.name, }); + + return `${pageName} - Ant Design Pro`; }; - handleMenuClick = ({ key }) => { - if (key === "triggerError") { - this.props.dispatch(routerRedux.push("/Exception/triggerException")); - return; - } - if (key === "logout") { - this.props.dispatch({ - type: "login/logout" - }); + + getLayoutStyle = () => { + const { fixSiderbar, isMobile, collapsed, layout } = this.props; + if (fixSiderbar && layout !== 'topmenu' && !isMobile) { + return { + paddingLeft: collapsed ? '80px' : '256px', + }; } + return null; }; - handleNoticeVisibleChange = visible => { - if (visible) { - this.props.dispatch({ - type: "global/fetchNotices" - }); + + getContentStyle = () => { + const { fixedHeader } = this.props; + return { + margin: '24px 24px 0', + paddingTop: fixedHeader ? 64 : 0, + }; + }; + + handleMenuCollapse = collapsed => { + const { dispatch } = this.props; + dispatch({ + type: 'global/changeLayoutCollapsed', + payload: collapsed, + }); + }; + + renderSettingDrawer = () => { + // Do not render SettingDrawer in production + // unless it is deployed in preview.pro.ant.design as demo + if (process.env.NODE_ENV === 'production' && APP_TYPE !== 'site') { + return null; } + return{layout}
}
+ {params => (
+ {layout}
+
- {top}
-
-);
diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js
new file mode 100644
index 00000000..16b70ac7
--- /dev/null
+++ b/src/layouts/UserLayout.js
@@ -0,0 +1,72 @@
+import React, { Fragment } from 'react';
+import { formatMessage } from 'umi/locale';
+import Link from 'umi/link';
+import { Icon } from 'antd';
+import GlobalFooter from '@/components/GlobalFooter';
+import SelectLang from '@/components/SelectLang';
+import styles from './UserLayout.less';
+import logo from '../assets/logo.svg';
+
+const links = [
+ {
+ key: 'help',
+ title: formatMessage({ id: 'layout.user.link.help' }),
+ href: '',
+ },
+ {
+ key: 'privacy',
+ title: formatMessage({ id: 'layout.user.link.privacy' }),
+ href: '',
+ },
+ {
+ key: 'terms',
+ title: formatMessage({ id: 'layout.user.link.terms' }),
+ href: '',
+ },
+];
+
+const copyright = (
+ {children}
: null}
-
+
+ );
+ }
+}
+
+export default UserLayout;
diff --git a/src/pages/User/UserLayout.less b/src/layouts/UserLayout.less
similarity index 75%
rename from src/pages/User/UserLayout.less
rename to src/layouts/UserLayout.less
index f01dae08..5eb257a4 100644
--- a/src/pages/User/UserLayout.less
+++ b/src/layouts/UserLayout.less
@@ -1,10 +1,21 @@
@import '~antd/lib/style/themes/default.less';
+
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
- background: #f0f2f5;
+ background: @layout-body-background;
+}
+
+.lang {
+ text-align: right;
+ width: 100%;
+ height: 40px;
+ line-height: 44px;
+ :global(.ant-dropdown-trigger) {
+ margin-right: 24px;
+ }
}
.content {
@@ -21,7 +32,7 @@
}
.content {
- padding: 112px 0 24px 0;
+ padding: 32px 0 24px 0;
}
}
@@ -46,7 +57,7 @@
.title {
font-size: 33px;
color: @heading-color;
- font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+ font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 600;
position: relative;
top: 2px;
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 40492420..eccaa5a7 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -1,26 +1,16 @@
import BasicLayout from "./BasicLayout";
-import { config } from "utils";
-import { getRouterData } from "common/router";
-import { LocaleProvider } from "antd";
-import zh_CN from "antd/lib/locale-provider/zh_CN";
-import "moment/locale/zh-cn";
-
+import UserLayout from "./UserLayout";
+import config from "@/utils/config";
const { openPages } = config;
export default props => {
- const { children, location } = props;
- const routerData = getRouterData({});
- const newProps = {
- ...props,
- routerData: routerData
- };
+ const { location } = props;
let { pathname } = location;
pathname = pathname.startsWith("/") ? pathname : `/${pathname}`;
+
if (openPages && openPages.includes(pathname)) {
- return
+
+
+
+
+
+ {children}
+
+
+
+ Ant Design
+
+
+ Ant Design 是西湖区最具影响力的 Web 设计规范
+ {children}
;
+ return
+
+ );
+ return (
+
+
+ 活跃用户
+{activeUser}
+
+
+ 新增用户
+{newUser}
+- (
+
- {menuMap[item]} ); + }; + + getRightTitle = () => { + const { selectKey, menuMap } = this.state; + return menuMap[selectKey]; + }; + + selectKey = ({ key }) => { + console.log(key); + + router.push(`/account/settings/${key}`); + this.setState({ + selectKey: key, + }); + }; + + resize = () => { + if (!this.main) { + return; + } + requestAnimationFrame(() => { + let mode = 'inline'; + const { offsetWidth } = this.main; + if (this.main.offsetWidth < 641 && offsetWidth > 400) { + mode = 'horizontal'; + } + if (window.innerWidth < 768 && offsetWidth > 400) { + mode = 'horizontal'; + } + this.setState({ + mode, + }); + }); + }; + + render() { + const { children, currentUser } = this.props; + if (!currentUser.userid) { + return ''; + } + const { mode, selectKey } = this.state; + return ( +
- - {i + 1} - {item.title} - {numeral(item.total).format('0,0')} - - ))} -
- - {i + 1} - {item.title} - {numeral(item.total).format('0,0')} - - ))} -
+
+ - (
+
- (
+
+ {moment(item.updatedAt).fromNow()}
+
+
+
+
+ {item.members.map(member => (
+
+
+
+
+ ) : (
+ 'loading...'
+ )}
+
+ 
+
+ {currentUser.name}
+ {currentUser.signature}
+
+
+ + + {currentUser.title} +
++ + {currentUser.group} +
++ + {currentUser.geographic.province.label} + {currentUser.geographic.city.label} +
+
+ {item.label}
+ ))}
+ {inputVisible && (
+
+ )}
+ {!inputVisible && (
+
+
+ )}
+
+ 标签
+ {currentUser.tags.concat(newTags).map(item => (
+
+
+
+ {notice.map(item => (
+
+
+
+ 团队
+
+
+
+ 
+
+
+
+
+
+
+ );
+ }
+}
+
+export default BaseView;
diff --git a/src/pages/Account/Settings/BaseView.less b/src/pages/Account/Settings/BaseView.less
new file mode 100644
index 00000000..a0a2ffde
--- /dev/null
+++ b/src/pages/Account/Settings/BaseView.less
@@ -0,0 +1,52 @@
+@import '~antd/lib/style/themes/default.less';
+
+.baseView {
+ display: flex;
+ padding-top: 12px;
+
+ .left {
+ max-width: 448px;
+ min-width: 224px;
+ }
+ .right {
+ flex: 1;
+ padding-left: 104px;
+ .avatar_title {
+ height: 22px;
+ font-size: @font-size-base;
+ color: @heading-color;
+ line-height: 22px;
+ margin-bottom: 8px;
+ }
+ .avatar {
+ width: 144px;
+ height: 144px;
+ margin-bottom: 12px;
+ overflow: hidden;
+ img {
+ width: 100%;
+ }
+ }
+ .button_view {
+ width: 144px;
+ text-align: center;
+ }
+ }
+}
+
+@media screen and (max-width: @screen-xl) {
+ .baseView {
+ flex-direction: column-reverse;
+
+ .right {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ max-width: 448px;
+ .avatar_title {
+ display: none;
+ }
+ }
+ }
+}
diff --git a/src/pages/Account/Settings/Binding.js b/src/pages/Account/Settings/Binding.js
new file mode 100644
index 00000000..29a29890
--- /dev/null
+++ b/src/pages/Account/Settings/Binding.js
@@ -0,0 +1,60 @@
+import React, { Component, Fragment } from 'react';
+import { formatMessage, FormattedMessage } from 'umi/locale';
+import { Icon, List } from 'antd';
+
+class BindingView extends Component {
+ getData = () => [
+ {
+ title: formatMessage({ id: 'app.settings.binding.taobao' }, {}),
+ description: formatMessage({ id: 'app.settings.binding.taobao-description' }, {}),
+ actions: [
+
+
+
+
+
+
+ - (
+
- (
+
- (
+
{
+ this.main = ref;
+ }}
+ >
+
+
+
+
+
+
+ {this.getRightTitle()}
+ {children}
+
-
- );
-
- const columns = [
- {
- title: '排名',
- dataIndex: 'index',
- key: 'index',
- },
- {
- title: '搜索关键词',
- dataIndex: 'keyword',
- key: 'keyword',
- render: text => {text},
- },
- {
- title: '用户数',
- dataIndex: 'count',
- key: 'count',
- sorter: (a, b) => a.count - b.count,
- className: styles.alignRight,
- },
- {
- title: '周涨幅',
- dataIndex: 'range',
- key: 'range',
- sorter: (a, b) => a.range - b.range,
- render: (text, record) => (
-
- this.selectDate('today')}>
- 今日
-
- this.selectDate('week')}>
- 本周
-
- this.selectDate('month')}>
- 本月
-
- this.selectDate('year')}>
- 全年
-
-
-
-
- 周同比12%
-
-
- 日环比11%
-
-
- }
- contentHeight={46}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 门店销售额排名
--
- {rankingListData.map((item, i) => (
-
-
-
-
-
-
- 门店访问量排名
--
- {rankingListData.map((item, i) => (
-
快速开始
+ 
产品简介
+ 
产品文档
+ 
+