merge master

.webpackrc

-{
-  "entry": "src/index.js",
-  "extraBabelPlugins": [
-    "transform-decorators-legacy",
-    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
-  ],
-  "env": {
-    "development": {
-      "extraBabelPlugins": [
-        "dva-hmr"
-      ]
-    }
-  },
-  "ignoreMomentLocale": true,
-  "theme": "./src/theme.js",
-  "html": {
-    "template": "./src/index.ejs"
-  },
-  "publicPath": "/",
-  "hash": true
-}

.webpackrc.js

+const path = require("path");
+
+export default {
+  entry: "src/index.js",
+  extraBabelPlugins: [
+    "transform-decorators-legacy",
+    ["import", { libraryName: "antd", libraryDirectory: "es", style: true }]
+  ],
+  env: {
+    development: {
+      extraBabelPlugins: ["dva-hmr"]
+    }
+  },
+  alias: {
+    components: path.resolve(__dirname, "src/components/")
+  },
+  ignoreMomentLocale: true,
+  theme: "./src/theme.js",
+  html: {
+    template: "./src/index.ejs"
+  },
+  disableDynamicImport: true,
+  publicPath: "/",
+  hash: true
+};

README.md

@@ -13,6 +13,7 @@ An out-of-box UI solution for enterprise applications as a React boilerplate.
 - Documentation: http://pro.ant.design/docs/getting-started
 - ChangeLog: http://pro.ant.design/docs/changelog
 - FAQ: http://pro.ant.design/docs/faq
+- Mirror Site in China: http://ant-design-pro.gitee.io
 
 ## Translation Recruitment :loudspeaker:
 

README.zh-CN.md

@@ -13,6 +13,7 @@
 - 使用文档：http://pro.ant.design/docs/getting-started-cn
 - 更新日志: http://pro.ant.design/docs/changelog-cn
 - 常见问题：http://pro.ant.design/docs/faq-cn
+- 国内镜像：http://ant-design-pro.gitee.io
 
 ## 特性
 

package.json

@@ -5,9 +5,9 @@
   "private": true,
   "scripts": {
     "precommit": "npm run lint-staged",
-    "start": "cross-env DISABLE_ESLINT=true roadhog dev",
-    "start:no-proxy": "cross-env NO_PROXY=true DISABLE_ESLINT=true roadhog dev",
-    "build": "cross-env DISABLE_ESLINT=true roadhog build",
+    "start": "cross-env ESLINT=none roadhog dev",
+    "start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev",
+    "build": "cross-env ESLINT=none roadhog build",
     "site": "roadhog-api-doc static && gh-pages -d dist",
     "analyze": "cross-env ANALYZE=true roadhog build",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@antv/data-set": "^0.8.0",
     "@babel/polyfill": "^7.0.0-beta.36",
-    "antd": "^3.2.0",
+    "antd": "^3.3.0",
     "babel-runtime": "^6.9.2",
     "bizcharts": "^3.1.3-beta.1",
     "bizcharts-plugin-slider": "^2.0.1",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "babel-eslint": "^8.1.2",
     "babel-plugin-dva-hmr": "^0.4.1",
-    "babel-plugin-import": "^1.6.3",
+    "babel-plugin-import": "^1.6.7",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "cross-env": "^5.1.1",
     "cross-port-killer": "^1.0.1",
@@ -70,7 +70,7 @@
     "pro-download": "^1.0.1",
     "redbox-react": "^1.5.0",
     "regenerator-runtime": "^0.11.1",
-    "roadhog": "^2.1.0",
+    "roadhog": "^2.3.0",
     "roadhog-api-doc": "^0.3.4",
     "stylelint": "^8.4.0",
     "stylelint-config-standard": "^18.0.0"
@@ -82,6 +82,9 @@
     "**/*.{js,jsx}": "lint-staged:js",
     "**/*.less": "stylelint --syntax less"
   },
+  "engines": {
+    "node" : ">=8.0.0"
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions",

src/components/AvatarList/AvatarItem.d.ts

+import * as React from 'react';
+export interface IAvatarItemProps {
+  tips: React.ReactNode;
+  src: string;
+  style?: React.CSSProperties;
+}
+
+export default class AvatarItem extends React.Component<IAvatarItemProps, any> {
+  constructor(props: IAvatarItemProps);
+}

src/components/AvatarList/index.d.ts

-import * as React from "react";
-export interface AvatarItemProps {
-  tips: React.ReactNode;
-  src: string;
-  style?: React.CSSProperties;
-}
+import * as React from 'react';
+import AvatarItem from './AvatarItem';
 
-export interface AvatarListProps {
-  size?: "large" | "small" | "mini" | "default";
+export interface IAvatarListProps {
+  size?: 'large' | 'small' | 'mini' | 'default';
   style?: React.CSSProperties;
   children:
     | React.ReactElement<AvatarItem>
     | Array<React.ReactElement<AvatarItem>>;
 }
 
-declare class AvatarItem extends React.Component<AvatarItemProps, any> {
-  constructor(props: AvatarItemProps);
-}
-
-export default class AvatarList extends React.Component<AvatarListProps, any> {
-  constructor(props: AvatarListProps);
-  static Item: typeof AvatarItem;
+export default class AvatarList extends React.Component<IAvatarListProps, any> {
+  public static Item: typeof AvatarItem;
 }

src/components/Charts/Bar/index.d.ts

 import * as React from "react";
-export interface BarProps {
+export interface IBarProps {
   title: React.ReactNode;
   color?: string;
   padding?: [number, number, number, number];
@@ -12,4 +12,4 @@ export interface BarProps {
   style?: React.CSSProperties;
 }
 
-export default class Bar extends React.Component<BarProps, any> {}
+export default class Bar extends React.Component<IBarProps, any> {}

src/components/Charts/ChartCard/index.d.ts

 import * as React from "react";
-export interface ChartCardProps {
+export interface IChartCardProps {
   title: React.ReactNode;
   action?: React.ReactNode;
   total?: React.ReactNode | number;
@@ -9,4 +9,4 @@ export interface ChartCardProps {
   style?: React.CSSProperties;
 }
 
-export default class ChartCard extends React.Component<ChartCardProps, any> {}
+export default class ChartCard extends React.Component<IChartCardProps, any> {}

src/components/Charts/ChartCard/index.js

@@ -4,6 +4,18 @@ import classNames from 'classnames';
 
 import styles from './index.less';
 
+const renderTotal = (total) => {
+  let totalDom;
+  switch (typeof total) {
+    case undefined:
+      totalDom = null;
+      break;
+    default:
+      totalDom = <div className={styles.total}>{total}</div>;
+  }
+  return totalDom;
+};
+
 const ChartCard = ({
   loading = false, contentHeight, title, avatar, action, total, footer, children, ...rest
 }) => {
@@ -22,10 +34,7 @@ const ChartCard = ({
             <span className={styles.title}>{title}</span>
             <span className={styles.action}>{action}</span>
           </div>
-          {
-            // eslint-disable-next-line
-            (total !== undefined) && (<div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />)
-          }
+          {renderTotal(total)}
         </div>
       </div>
       {

src/components/Charts/Field/index.d.ts

 import * as React from "react";
-export interface FieldProps {
+export interface IFieldProps {
   label: React.ReactNode;
   value: React.ReactNode;
   style?: React.CSSProperties;
 }
 
-export default class Field extends React.Component<FieldProps, any> {}
+export default class Field extends React.Component<IFieldProps, any> {}

src/components/Charts/Gauge/index.d.ts

 import * as React from "react";
-export interface GaugeProps {
+export interface IGaugeProps {
   title: React.ReactNode;
   color?: string;
   height: number;
@@ -8,4 +8,4 @@ export interface GaugeProps {
   style?: React.CSSProperties;
 }
 
-export default class Gauge extends React.Component<GaugeProps, any> {}
+export default class Gauge extends React.Component<IGaugeProps, any> {}

src/components/Charts/MiniArea/index.d.ts

-import * as React from "react";
+import * as React from 'react';
 
 // g2已经更新到3.0
 // 不带的写了
 
-export interface Axis {
+export interface IAxis {
   title: any;
   line: any;
   gridAlign: any;
@@ -12,18 +12,18 @@ export interface Axis {
   grid: any;
 }
 
-export interface MiniAreaProps {
+export interface IMiniAreaProps {
   color?: string;
   height: number;
   borderColor?: string;
   line?: boolean;
   animate?: boolean;
-  xAxis?: Axis;
-  yAxis?: Axis;
+  xAxis?: IAxis;
+  yAxis?: IAxis;
   data: Array<{
     x: number;
     y: number;
   }>;
 }
 
-export default class MiniArea extends React.Component<MiniAreaProps, any> {}
+export default class MiniArea extends React.Component<IMiniAreaProps, any> {}

src/components/Charts/MiniBar/index.d.ts

 import * as React from 'react';
-export interface MiniBarProps {
+export interface IMiniBarProps {
   color?: string;
   height: number;
   data: Array<{
@@ -9,4 +9,4 @@ export interface MiniBarProps {
   style?: React.CSSProperties;
 }
 
-export default class MiniBar extends React.Component<MiniBarProps, any> {}
+export default class MiniBar extends React.Component<IMiniBarProps, any> {}

src/components/Charts/MiniProgress/index.d.ts

 import * as React from "react";
-export interface MiniProgressProps {
+export interface IMiniProgressProps {
   target: number;
   color?: string;
   strokeWidth?: number;
@@ -8,6 +8,6 @@ export interface MiniProgressProps {
 }
 
 export default class MiniProgress extends React.Component<
-  MiniProgressProps,
+  IMiniProgressProps,
   any
 > {}

src/components/Charts/Pie/index.d.ts

 import * as React from 'react';
-export interface PieProps {
+export interface IPieProps {
   animate?: boolean;
   color?: string;
   height: number;
@@ -17,4 +17,4 @@ export interface PieProps {
   subTitle?: React.ReactNode;
 }
 
-export default class Pie extends React.Component<PieProps, any> {}
+export default class Pie extends React.Component<IPieProps, any> {}

src/components/Charts/Radar/index.d.ts

 import * as React from "react";
-export interface RadarProps {
+export interface IRadarProps {
   title?: React.ReactNode;
   height: number;
   padding?: [number, number, number, number];
@@ -12,4 +12,4 @@ export interface RadarProps {
   style?: React.CSSProperties;
 }
 
-export default class Radar extends React.Component<RadarProps, any> {}
+export default class Radar extends React.Component<IRadarProps, any> {}

src/components/Charts/TagCloud/index.d.ts

 import * as React from "react";
-export interface TagCloudProps {
+export interface ITagCloudProps {
   data: Array<{
     name: string;
     value: number;
@@ -8,4 +8,4 @@ export interface TagCloudProps {
   style?: React.CSSProperties;
 }
 
-export default class TagCloud extends React.Component<TagCloudProps, any> {}
+export default class TagCloud extends React.Component<ITagCloudProps, any> {}

src/components/Charts/TimelineChart/index.d.ts

 import * as React from "react";
-export interface TimelineChartProps {
+export interface ITimelineChartProps {
   data: Array<{
     x: string;
     y1: string;
@@ -12,6 +12,6 @@ export interface TimelineChartProps {
 }
 
 export default class TimelineChart extends React.Component<
-  TimelineChartProps,
+  ITimelineChartProps,
   any
 > {}

src/components/Charts/WaterWave/index.d.ts

 import * as React from 'react';
-export interface WaterWaveProps {
+export interface IWaterWaveProps {
   title: React.ReactNode;
   color?: string;
   height: number;
@@ -7,4 +7,4 @@ export interface WaterWaveProps {
   style?: React.CSSProperties;
 }
 
-export default class WaterWave extends React.Component<WaterWaveProps, any> {}
+export default class WaterWave extends React.Component<IWaterWaveProps, any> {}

src/components/CountDown/index.d.ts

 import * as React from "react";
-export interface CountDownProps {
+export interface ICountDownProps {
   format?: (time: number) => void;
   target: Date | number;
   onEnd?: () => void;
   style?: React.CSSProperties;
 }
 
-export default class CountDown extends React.Component<CountDownProps, any> {}
+export default class CountDown extends React.Component<ICountDownProps, any> {}

src/components/DescriptionList/Description.d.ts

+import * as React from 'react';
+
+export default class Description extends React.Component<
+  {
+    term: React.ReactNode;
+    style?: React.CSSProperties;
+  },
+  any
+> {}

src/components/DescriptionList/index.d.ts

 import * as React from 'react';
-export interface DescriptionListProps {
+import Description from './Description';
+
+export interface IDescriptionListProps {
   layout?: 'horizontal' | 'vertical';
   col?: number;
   title: React.ReactNode;
@@ -8,17 +10,9 @@ export interface DescriptionListProps {
   style?: React.CSSProperties;
 }
 
-declare class Description extends React.Component<
-  {
-    term: React.ReactNode;
-    style?: React.CSSProperties;
-  },
-  any
-> {}
-
 export default class DescriptionList extends React.Component<
-  DescriptionListProps,
+  IDescriptionListProps,
   any
 > {
-  static Description: typeof Description;
+  public static Description: typeof Description;
 }

src/components/Ellipsis/index.d.ts

 import * as React from 'react';
-export interface EllipsisProps {
+export interface IEllipsisProps {
   tooltip?: boolean;
   length?: number;
   lines?: number;
@@ -7,4 +7,4 @@ export interface EllipsisProps {
   className?: string;
 }
 
-export default class Ellipsis extends React.Component<EllipsisProps, any> {}
+export default class Ellipsis extends React.Component<IEllipsisProps, any> {}

src/components/Exception/index.d.ts

 import * as React from "react";
-export interface ExceptionProps {
+export interface IExceptionProps {
   type?: "403" | "404" | "500";
   title?: React.ReactNode;
   desc?: React.ReactNode;
@@ -9,4 +9,4 @@ export interface ExceptionProps {
   style?: React.CSSProperties;
 }
 
-export default class Exception extends React.Component<ExceptionProps, any> {}
+export default class Exception extends React.Component<IExceptionProps, any> {}

src/components/FooterToolbar/index.d.ts

 import * as React from 'react';
-export interface FooterToolbarProps {
+export interface IFooterToolbarProps {
   extra: React.ReactNode;
   style?: React.CSSProperties;
 }
 
 export default class FooterToolbar extends React.Component<
-  FooterToolbarProps,
+  IFooterToolbarProps,
   any
 > {}

src/components/GlobalFooter/index.d.ts

 import * as React from "react";
-export interface GlobalFooterProps {
+export interface IGlobalFooterProps {
   links?: Array<{
     title: React.ReactNode;
     href: string;
@@ -10,6 +10,6 @@ export interface GlobalFooterProps {
 }
 
 export default class GlobalFooter extends React.Component<
-  GlobalFooterProps,
+  IGlobalFooterProps,
   any
 > {}

src/components/HeaderSearch/index.d.ts

 import * as React from 'react';
-export interface HeaderSearchProps {
+export interface IHeaderSearchProps {
   placeholder?: string;
-  dataSource?: Array<string>;
+  dataSource?: string[];
   onSearch?: (value: string) => void;
   onChange?: (value: string) => void;
   onPressEnter?: (value: string) => void;
@@ -9,6 +9,6 @@ export interface HeaderSearchProps {
 }
 
 export default class HeaderSearch extends React.Component<
-  HeaderSearchProps,
+  IHeaderSearchProps,
   any
 > {}

src/components/NoticeIcon/NoticeIconTab.d.ts

+import * as React from 'react';
+export interface INoticeIconData {
+  avatar?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  datetime?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export interface INoticeIconTabProps {
+  list?: INoticeIconData[];
+  title?: string;
+  emptyText?: React.ReactNode;
+  emptyImage?: string;
+  style?: React.CSSProperties;
+}
+
+export default class NoticeIconTab extends React.Component<
+  INoticeIconTabProps,
+  any
+> {}

src/components/NoticeIcon/index.d.ts

-import * as React from 'react';
-export interface NoticeIconData {
-  avatar?: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  datetime?: React.ReactNode;
-  extra?: React.ReactNode;
-  style?: React.CSSProperties;
-}
+import React from 'react';
+import NoticeIconTab, { INoticeIconData } from './NoticeIconTab';
 
-export interface NoticeIconProps {
+export interface INoticeIconProps {
   count?: number;
   className?: string;
   loading?: boolean;
   onClear?: (tableTile: string) => void;
-  onItemClick?: (item: NoticeIconData, tabProps: NoticeIconProps) => void;
+  onItemClick?: (item: INoticeIconData, tabProps: INoticeIconProps) => void;
   onTabChange?: (tableTile: string) => void;
   popupAlign?: {
     points?: [string, string];
@@ -30,16 +23,6 @@ export interface NoticeIconProps {
   locale?: { emptyText: string; clear: string };
 }
 
-export interface NoticeIconTabProps {
-  list?: Array<NoticeIconData>;
-  title?: string;
-  emptyText?: React.ReactNode;
-  emptyImage?: string;
-  style?: React.CSSProperties;
-}
-
-export class NoticeIconTab extends React.Component<NoticeIconTabProps, any> {}
-
-export default class NoticeIcon extends React.Component<NoticeIconProps, any> {
-  static Tab: typeof NoticeIconTab;
+export default class NoticeIcon extends React.Component<INoticeIconProps, any> {
+  public static Tab: typeof NoticeIconTab;
 }

src/components/NumberInfo/index.d.ts

 import * as React from 'react';
-export interface NumberInfoProps {
+export interface INumberInfoProps {
   title?: React.ReactNode | string;
   subTitle?: React.ReactNode | string;
   total?: React.ReactNode | string;
@@ -10,4 +10,7 @@ export interface NumberInfoProps {
   style?: React.CSSProperties;
 }
 
-export default class NumberInfo extends React.Component<NumberInfoProps, any> {}
+export default class NumberInfo extends React.Component<
+  INumberInfoProps,
+  any
+> {}

src/components/PageHeader/index.d.ts

 import * as React from 'react';
-export interface PageHeaderProps {
+export interface IPageHeaderProps {
   title?: React.ReactNode | string;
   logo?: React.ReactNode | string;
   action?: React.ReactNode | string;
   content?: React.ReactNode;
   extraContent?: React.ReactNode;
-  routes?: Array<any>;
+  routes?: any[];
   params?: any;
   breadcrumbList?: Array<{ title: React.ReactNode; href?: string }>;
   tabList?: Array<{ key: string; tab: React.ReactNode }>;
   tabActiveKey?: string;
+  tabDefaultActiveKey?: string;
   onTabChange?: (key: string) => void;
   tabBarExtraContent?: React.ReactNode;
   linkElement?: React.ReactNode;
   style?: React.CSSProperties;
 }
 
-export default class PageHeader extends React.Component<PageHeaderProps, any> {}
+export default class PageHeader extends React.Component<IPageHeaderProps, any> {}

src/components/PageHeader/index.js

@@ -166,18 +166,15 @@ export default class PageHeader extends PureComponent {
       tabList,
       className,
       tabActiveKey,
+      tabDefaultActiveKey,
       tabBarExtraContent,
     } = this.props;
     const clsString = classNames(styles.pageHeader, className);
-
-    let tabDefaultValue;
-    if (tabActiveKey !== undefined && tabList) {
-      tabDefaultValue = tabList.filter(item => item.default)[0] || tabList[0];
-    }
     const breadcrumb = this.conversionBreadcrumbList();
-    const activeKeyProps = {
-      defaultActiveKey: tabDefaultValue && tabDefaultValue.key,
-    };
+    const activeKeyProps = {};
+    if (tabDefaultActiveKey !== undefined) {
+      activeKeyProps.defaultActiveKey = tabDefaultActiveKey;
+    }
     if (tabActiveKey !== undefined) {
       activeKeyProps.activeKey = tabActiveKey;
     }

src/components/PageHeader/index.md

@@ -25,6 +25,7 @@ order: 11
 | breadcrumbNameMap | 面包屑相关属性，路由的地址-名称映射表 | object | - |
 | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | -  |
 | tabActiveKey | 当前高亮的 tab 项 | string | -  |
+| tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项  |
 | onTabChange | 切换面板的回调 | (key) => void | -  |
 | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
 

src/components/Result/index.d.ts

 import * as React from 'react';
-export interface ResultProps {
+export interface IResultProps {
   type: 'success' | 'error';
   title: React.ReactNode;
   description?: React.ReactNode;
@@ -8,4 +8,4 @@ export interface ResultProps {
   style?: React.CSSProperties;
 }
 
-export default class Result extends React.Component<ResultProps, any> {}
+export default class Result extends React.Component<IResultProps, any> {}

src/components/SiderMenu/SiderMenu.js

 import React, { PureComponent } from 'react';
-import { Layout } from 'antd';
+import { Layout, Menu, Icon } from 'antd';
 import { Link } from 'dva/router';
 import styles from './index.less';
 import BaseMeun, { getMeunMatcheys } from './BaseMeun';
 import { urlToList } from '../utils/pathTools';
 
 const { Sider } = Layout;
+const { SubMenu } = Menu;
+
+// Allow menu.js config icon as string or ReactNode
+//   icon: 'setting',
+//   icon: 'http://demo.com/icon.png',
+//   icon: <Icon type="setting" />,
+const getIcon = (icon) => {
+  if (typeof icon === 'string' && icon.indexOf('http') === 0) {
+    return <img src={icon} alt="icon" className={`${styles.icon} sider-menu-item-img`} />;
+  }
+  if (typeof icon === 'string') {
+    return <Icon type={icon} />;
+  }
+  return icon;
+};
+
 
 export default class SiderMenu extends PureComponent {
   constructor(props) {
@@ -42,6 +58,77 @@ export default class SiderMenu extends PureComponent {
    * Convert pathname to openKeys
    * /list/search/articles = > ['list','/list/search']
    * @param  props
+   * 判断是否是http链接.返回 Link 或 a
+   * Judge whether it is http link.return a or Link
+   * @memberof SiderMenu
+   */
+  getMenuItemPath = (item) => {
+    const itemPath = this.conversionPath(item.path);
+    const icon = getIcon(item.icon);
+    const { target, name } = item;
+    // Is it a http link
+    if (/^https?:\/\//.test(itemPath)) {
+      return (
+        <a href={itemPath} target={target}>
+          {icon}
+          <span>{name}</span>
+        </a>
+      );
+    }
+    return (
+      <Link
+        to={itemPath}
+        target={target}
+        replace={itemPath === this.props.location.pathname}
+        onClick={
+          this.props.isMobile
+            ? () => {
+                this.props.onCollapse(true);
+              }
+            : undefined
+        }
+      >
+        {icon}
+        <span>{name}</span>
+      </Link>
+    );
+  };
+  /**
+   * get SubMenu or Item
+   */
+  getSubMenuOrItem = (item) => {
+    if (item.children && item.children.some(child => child.name)) {
+      const childrenItems = this.getNavMenuItems(item.children);
+      // 当无子菜单时就不展示菜单
+      if (childrenItems && childrenItems.length > 0) {
+        return (
+          <SubMenu
+            title={
+              item.icon ? (
+                <span>
+                  {getIcon(item.icon)}
+                  <span>{item.name}</span>
+                </span>
+              ) : (
+                  item.name
+                )
+            }
+            key={item.path}
+          >
+            {childrenItems}
+          </SubMenu>
+        );
+      }
+      return null;
+    } else {
+      return (
+        <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>
+      );
+    }
+  };
+  /**
+   * 获得菜单子节点
+   * @memberof SiderMenu
    */
   getDefaultCollapsedSubMenus(props) {
     const { location: { pathname } } = props || this.props;

src/components/SiderMenu/index.less

@@ -49,4 +49,18 @@
   .drawer .drawer-content {
     background: #001529;
   }
+  .ant-menu-inline-collapsed {
+    & > .ant-menu-item .sider-menu-item-img + span,
+    & > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .sider-menu-item-img + span,
+    & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span {
+      max-width: 0;
+      display: inline-block;
+      opacity: 0;
+    }
+  }
+  .ant-menu-item .sider-menu-item-img + span,
+  .ant-menu-submenu-title .sider-menu-item-img + span {
+    transition: opacity .3s @ease-in-out, width .3s @ease-in-out;
+    opacity: 1;
+  }
 }

src/components/TagSelect/TagSelectOption.d.ts

+import * as React from 'react';
+
+export interface ITagSelectOptionProps {
+  value: string | number;
+  style?: React.CSSProperties;
+}
+
+export default class TagSelectOption extends React.Component<
+  ITagSelectOptionProps,
+  any
+> {}

src/components/TagSelect/index.d.ts

 import * as React from 'react';
-export interface TagSelectProps {
-  onChange?: (value: Array<string>) => void;
+import TagSelectOption from './TagSelectOption';
+
+export interface ITagSelectProps {
+  onChange?: (value: string[]) => void;
   expandable?: boolean;
-  value?: Array<string>| Array<number>;
-  style?: React.CSSProperties;
-}
-export interface TagSelectOptionProps {
-  value: string| number;
+  value?: string[] | number[];
   style?: React.CSSProperties;
 }
 
-export class TagSelectOption extends React.Component<
-  TagSelectOptionProps,
-  any
-> {}
-
-export default class TagSelect extends React.Component<TagSelectProps, any> {
-  static Option: typeof TagSelectOption;
-  children:
+export default class TagSelect extends React.Component<ITagSelectProps, any> {
+  public static Option: typeof TagSelectOption;
+  private children:
     | React.ReactElement<TagSelectOption>
     | Array<React.ReactElement<TagSelectOption>>;
 }

src/components/Trend/index.d.ts

 import * as React from 'react';
 
-export interface TrendProps {
+export interface ITrendProps {
   colorful?: boolean;
   flag: 'up' | 'down';
   style?: React.CSSProperties;
 }
 
-export default class Trend extends React.Component<TrendProps, any> {}
+export default class Trend extends React.Component<ITrendProps, any> {}

src/layouts/BasicLayout.js

@@ -16,7 +16,7 @@ import Footer from './Footer';
 import Header from './Header';
 
 const { Content } = Layout;
-const { AuthorizedRoute } = Authorized;
+const { AuthorizedRoute, check } = Authorized;
 
 const RightSidebar = connect(({ setting }) => ({ ...setting }))(Sidebar);
 
@@ -72,7 +72,11 @@ class BasicLayout extends React.PureComponent {
       urlParams.searchParams.delete('redirect');
       window.history.replaceState(null, 'redirect', urlParams.href);
     } else {
-      return '/dashboard/analysis';
+      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 !== '/');
+      return authorizedPath;
     }
     return redirect;
   };

src/models/error.js

-import { query403, query401, query404, query500 } from '../services/error';
+import { routerRedux } from 'dva/router';
+import { query } from '../services/error';
 
 export default {
   namespace: 'error',
@@ -9,32 +10,13 @@ export default {
   },
 
   effects: {
-    *query403(_, { call, put }) {
-      yield call(query403);
+    *query({ payload }, { call, put }) {
+      yield call(query, payload.code);
+      // redirect on client when network broken
+      yield put(routerRedux.push(`/exception/${payload.code}`));
       yield put({
         type: 'trigger',
-        payload: '403',
-      });
-    },
-    *query401(_, { call, put }) {
-      yield call(query401);
-      yield put({
-        type: 'trigger',
-        payload: '401',
-      });
-    },
-    *query500(_, { call, put }) {
-      yield call(query500);
-      yield put({
-        type: 'trigger',
-        payload: '500',
-      });
-    },
-    *query404(_, { call, put }) {
-      yield call(query404);
-      yield put({
-        type: 'trigger',
-        payload: '404',
+        payload: payload.code,
       });
     },
   },

src/routes/Dashboard/Analysis.js

@@ -13,8 +13,6 @@ import {
   Menu,
   Dropdown,
 } from 'antd';
-import numeral from 'numeral';
-import GridContent from '../../layouts/GridContent';
 import {
   ChartCard,
   yuan,
@@ -25,9 +23,12 @@ import {
   Bar,
   Pie,
   TimelineChart,
-} from '../../components/Charts';
-import Trend from '../../components/Trend';
-import NumberInfo from '../../components/NumberInfo';
+} from 'components/Charts';
+import Trend from 'components/Trend';
+import NumberInfo from 'components/NumberInfo';
+import numeral from 'numeral';
+import GridContent from '../../layouts/GridContent';
+
 import { getTimeDistance } from '../../utils/utils';
 
 import styles from './Analysis.less';

src/routes/Dashboard/Monitor.js

 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
 import { Row, Col, Card, Tooltip } from 'antd';
+import { Pie, WaterWave, Gauge, TagCloud } from 'components/Charts';
+import NumberInfo from 'components/NumberInfo';
+import CountDown from 'components/CountDown';
+import ActiveChart from 'components/ActiveChart';
 import numeral from 'numeral';
 import GridContent from '../../layouts/GridContent';
+
 import Authorized from '../../utils/Authorized';
-import { Pie, WaterWave, Gauge, TagCloud } from '../../components/Charts';
-import NumberInfo from '../../components/NumberInfo';
-import CountDown from '../../components/CountDown';
-import ActiveChart from '../../components/ActiveChart';
 import styles from './Monitor.less';
 
 const { Secured } = Authorized;
@@ -49,10 +50,7 @@ export default class Monitor extends PureComponent {
                   />
                 </Col>
                 <Col md={6} sm={12} xs={24}>
-                  <NumberInfo
-                    subTitle="销售目标完成率"
-                    total="92%"
-                  />
+                  <NumberInfo subTitle="销售目标完成率" total="92%" />
                 </Col>
                 <Col md={6} sm={12} xs={24}>
                   <NumberInfo subTitle="活动剩余时间" total={<CountDown target={targetTime} />} />
@@ -67,7 +65,10 @@ export default class Monitor extends PureComponent {
               </Row>
               <div className={styles.mapChart}>
                 <Tooltip title="等待后期实现">
-                  <img src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png" alt="map" />
+                  <img
+                    src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
+                    alt="map"
+                  />
                 </Tooltip>
               </div>
             </Card>
@@ -106,11 +107,7 @@ export default class Monitor extends PureComponent {
         </Row>
         <Row gutter={24}>
           <Col xl={12} lg={24} sm={24} xs={24}>
-            <Card
-              title="各品类占比"
-              bordered={false}
-              className={styles.pieCard}
-            >
+            <Card title="各品类占比" bordered={false} className={styles.pieCard}>
               <Row style={{ padding: '16px 0' }}>
                 <Col span={8}>
                   <Pie
@@ -148,20 +145,22 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col xl={6} lg={12} sm={24} xs={24}>
-            <Card title="热门搜索" loading={loading} bordered={false} bodyStyle={{ overflow: 'hidden' }}>
-              <TagCloud
-                data={tags}
-                height={161}
-              />
+            <Card
+              title="热门搜索"
+              loading={loading}
+              bordered={false}
+              bodyStyle={{ overflow: 'hidden' }}
+            >
+              <TagCloud data={tags} height={161} />
             </Card>
           </Col>
           <Col xl={6} lg={12} sm={24} xs={24}>
-            <Card title="资源剩余" bodyStyle={{ textAlign: 'center', fontSize: 0 }} bordered={false}>
-              <WaterWave
-                height={161}
-                title="补贴资金剩余"
-                percent={34}
-              />
+            <Card
+              title="资源剩余"
+              bodyStyle={{ textAlign: 'center', fontSize: 0 }}
+              bordered={false}
+            >
+              <WaterWave height={161} title="补贴资金剩余" percent={34} />
             </Card>
           </Col>
         </Row>

src/routes/Dashboard/Workplace.js

@@ -4,9 +4,9 @@ import { connect } from 'dva';
 import { Link } from 'dva/router';
 import { Row, Col, Card, List, Avatar, Spin } from 'antd';
 
+import { Radar } from 'components/Charts';
+import EditableLinkGroup from 'components/EditableLinkGroup';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
-import EditableLinkGroup from '../../components/EditableLinkGroup';
-import { Radar } from '../../components/Charts';
 
 import styles from './Workplace.less';
 

src/routes/Exception/403.js

 import React from 'react';
 import { Link } from 'dva/router';
-import Exception from '../../components/Exception';
+import Exception from 'components/Exception';
 
 export default () => (
   <Exception type="403" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />

src/routes/Exception/404.js

 import React from 'react';
 import { Link } from 'dva/router';
-import Exception from '../../components/Exception';
+import Exception from 'components/Exception';
 
 export default () => (
   <Exception type="404" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />

src/routes/Exception/500.js

 import React from 'react';
 import { Link } from 'dva/router';
-import Exception from '../../components/Exception';
+import Exception from 'components/Exception';
 
 export default () => (
   <Exception type="500" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />

src/routes/Exception/triggerException.js

@@ -7,55 +7,34 @@ import styles from './style.less';
   isloading: state.error.isloading,
 }))
 export default class TriggerException extends PureComponent {
-  state={
+  state = {
     isloading: false,
-  }
-  trigger401 = () => {
-    this.setState({
-      isloading: true,
-    });
-    this.props.dispatch({
-      type: 'error/query401',
-    });
-  };
-  trigger403 = () => {
-    this.setState({
-      isloading: true,
-    });
-    this.props.dispatch({
-      type: 'error/query403',
-    });
-  };
-  trigger500 = () => {
-    this.setState({
-      isloading: true,
-    });
-    this.props.dispatch({
-      type: 'error/query500',
-    });
   };
-  trigger404 = () => {
+  triggerError = (code) => {
     this.setState({
       isloading: true,
     });
     this.props.dispatch({
-      type: 'error/query404',
+      type: 'error/query',
+      payload: {
+        code,
+      },
     });
   };
   render() {
     return (
       <Card>
         <Spin spinning={this.state.isloading} wrapperClassName={styles.trigger}>
-          <Button type="danger" onClick={this.trigger401}>
+          <Button type="danger" onClick={() => this.triggerError(401)}>
             触发401
           </Button>
-          <Button type="danger" onClick={this.trigger403}>
+          <Button type="danger" onClick={() => this.triggerError(403)}>
             触发403
           </Button>
-          <Button type="danger" onClick={this.trigger500}>
+          <Button type="danger" onClick={() => this.triggerError(500)}>
             触发500
           </Button>
-          <Button type="danger" onClick={this.trigger404}>
+          <Button type="danger" onClick={() => this.triggerError(404)}>
             触发404
           </Button>
         </Spin>

src/routes/Forms/AdvancedForm.js

 import React, { PureComponent } from 'react';
 import { Card, Button, Form, Icon, Col, Row, DatePicker, TimePicker, Input, Select, Popover } from 'antd';
 import { connect } from 'dva';
+import FooterToolbar from 'components/FooterToolbar';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
-import FooterToolbar from '../../components/FooterToolbar';
 import TableForm from './TableForm';
 import styles from './style.less';
 

src/routes/Forms/StepForm/Step3.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { connect } from 'dva';
 import { Button, Row, Col } from 'antd';
 import { routerRedux } from 'dva/router';
-import Result from '../../../components/Result';
+import Result from 'components/Result';
 import styles from './style.less';
 
 class Step3 extends React.PureComponent {

src/routes/List/Applications.js

@@ -2,11 +2,12 @@ import React, { PureComponent } from 'react';
 import numeral from 'numeral';
 import { connect } from 'dva';
 import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd';
+import TagSelect from 'components/TagSelect';
+import StandardFormRow from 'components/StandardFormRow';
 
-import StandardFormRow from '../../components/StandardFormRow';
-import TagSelect from '../../components/TagSelect';
 import { formatWan } from '../../utils/utils';
 
+
 import styles from './Applications.less';
 
 const { Option } = Select;

src/routes/List/Articles.js

@@ -3,8 +3,8 @@ import moment from 'moment';
 import { connect } from 'dva';
 import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd';
 
-import StandardFormRow from '../../components/StandardFormRow';
-import TagSelect from '../../components/TagSelect';
+import TagSelect from 'components/TagSelect';
+import StandardFormRow from 'components/StandardFormRow';
 import styles from './Articles.less';
 
 const { Option } = Select;

src/routes/List/CardList.js

@@ -2,8 +2,8 @@ import React, { PureComponent } from 'react';
 import { connect } from 'dva';
 import { Card, Button, Icon, List } from 'antd';
 
+import Ellipsis from 'components/Ellipsis';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
-import Ellipsis from '../../components/Ellipsis';
 
 import styles from './CardList.less';
 

src/routes/List/Projects.js

@@ -3,10 +3,10 @@ import moment from 'moment';
 import { connect } from 'dva';
 import { Row, Col, Form, Card, Select, List } from 'antd';
 
-import StandardFormRow from '../../components/StandardFormRow';
-import TagSelect from '../../components/TagSelect';
-import AvatarList from '../../components/AvatarList';
-import Ellipsis from '../../components/Ellipsis';
+import TagSelect from 'components/TagSelect';
+import AvatarList from 'components/AvatarList';
+import Ellipsis from 'components/Ellipsis';
+import StandardFormRow from 'components/StandardFormRow';
 
 import styles from './Projects.less';
 
@@ -45,7 +45,7 @@ export default class CoverCardList extends PureComponent {
         }
       });
     }, 0);
-  }
+  };
 
   render() {
     const { list: { list = [] }, loading, form } = this.props;
@@ -72,15 +72,13 @@ export default class CoverCardList extends PureComponent {
                 <span>{moment(item.updatedAt).fromNow()}</span>
                 <div className={styles.avatarList}>
                   <AvatarList size="mini">
-                    {
-                      item.members.map((member, i) => (
-                        <AvatarList.Item
-                          key={`${item.id}-avatar-${i}`}
-                          src={member.avatar}
-                          tips={member.name}
-                        />
-                      ))
-                    }
+                    {item.members.map((member, i) => (
+                      <AvatarList.Item
+                        key={`${item.id}-avatar-${i}`}
+                        src={member.avatar}
+                        tips={member.name}
+                      />
+                    ))}
                   </AvatarList>
                 </div>
               </div>
@@ -121,17 +119,10 @@ export default class CoverCardList extends PureComponent {
                 )}
               </FormItem>
             </StandardFormRow>
-            <StandardFormRow
-              title="其它选项"
-              grid
-              last
-            >
+            <StandardFormRow title="其它选项" grid last>
               <Row gutter={16}>
                 <Col lg={8} md={10} sm={10} xs={24}>
-                  <FormItem
-                    {...formItemLayout}
-                    label="作者"
-                  >
+                  <FormItem {...formItemLayout} label="作者">
                     {getFieldDecorator('author', {})(
                       <Select
                         onChange={this.handleFormSubmit}
@@ -144,10 +135,7 @@ export default class CoverCardList extends PureComponent {
                   </FormItem>
                 </Col>
                 <Col lg={8} md={10} sm={10} xs={24}>
-                  <FormItem
-                    {...formItemLayout}
-                    label="好评度"
-                  >
+                  <FormItem {...formItemLayout} label="好评度">
                     {getFieldDecorator('rate', {})(
                       <Select
                         onChange={this.handleFormSubmit}
@@ -164,9 +152,7 @@ export default class CoverCardList extends PureComponent {
             </StandardFormRow>
           </Form>
         </Card>
-        <div className={styles.cardList}>
-          {cardList}
-        </div>
+        <div className={styles.cardList}>{cardList}</div>
       </div>
     );
   }

src/routes/List/TableList.js

@@ -3,7 +3,7 @@ import { connect } from 'dva';
 import moment from 'moment';
 import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu,
   InputNumber, DatePicker, Modal, message, Badge, Divider, Steps, Radio } from 'antd';
-import StandardTable from '../../components/StandardTable';
+import StandardTable from 'components/StandardTable';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
 import styles from './TableList.less';

src/routes/Profile/AdvancedProfile.js

@@ -4,8 +4,8 @@ import Bind from 'lodash-decorators/bind';
 import { connect } from 'dva';
 import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip, Divider } from 'antd';
 import classNames from 'classnames';
+import DescriptionList from 'components/DescriptionList';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
-import DescriptionList from '../../components/DescriptionList';
 import styles from './AdvancedProfile.less';
 
 const { Step } = Steps;

src/routes/Profile/BasicProfile.js

 import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Card, Badge, Table, Divider } from 'antd';
+import DescriptionList from 'components/DescriptionList';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
-import DescriptionList from '../../components/DescriptionList';
 import styles from './BasicProfile.less';
 
 const { Description } = DescriptionList;
 
-const progressColumns = [{
-  title: '时间',
-  dataIndex: 'time',
-  key: 'time',
-}, {
-  title: '当前进度',
-  dataIndex: 'rate',
-  key: 'rate',
-}, {
-  title: '状态',
-  dataIndex: 'status',
-  key: 'status',
-  render: text => (
-    text === 'success' ? <Badge status="success" text="成功" /> : <Badge status="processing" text="进行中" />
-  ),
-}, {
-  title: '操作员ID',
-  dataIndex: 'operator',
-  key: 'operator',
-}, {
-  title: '耗时',
-  dataIndex: 'cost',
-  key: 'cost',
-}];
+const progressColumns = [
+  {
+    title: '时间',
+    dataIndex: 'time',
+    key: 'time',
+  },
+  {
+    title: '当前进度',
+    dataIndex: 'rate',
+    key: 'rate',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    render: text =>
+      (text === 'success' ? (
+        <Badge status="success" text="成功" />
+      ) : (
+        <Badge status="processing" text="进行中" />
+      )),
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator',
+    key: 'operator',
+  },
+  {
+    title: '耗时',
+    dataIndex: 'cost',
+    key: 'cost',
+  },
+];
 
 @connect(({ profile, loading }) => ({
   profile,
@@ -71,60 +80,67 @@ export default class BasicProfile extends Component {
       }
       return obj;
     };
-    const goodsColumns = [{
-      title: '商品编号',
-      dataIndex: 'id',
-      key: 'id',
-      render: (text, row, index) => {
-        if (index < basicGoods.length) {
-          return <a href="">{text}</a>;
-        }
-        return {
-          children: <span style={{ fontWeight: 600 }}>总计</span>,
-          props: {
-            colSpan: 4,
-          },
-        };
+    const goodsColumns = [
+      {
+        title: '商品编号',
+        dataIndex: 'id',
+        key: 'id',
+        render: (text, row, index) => {
+          if (index < basicGoods.length) {
+            return <a href="">{text}</a>;
+          }
+          return {
+            children: <span style={{ fontWeight: 600 }}>总计</span>,
+            props: {
+              colSpan: 4,
+            },
+          };
+        },
       },
-    }, {
-      title: '商品名称',
-      dataIndex: 'name',
-      key: 'name',
-      render: renderContent,
-    }, {
-      title: '商品条码',
-      dataIndex: 'barcode',
-      key: 'barcode',
-      render: renderContent,
-    }, {
-      title: '单价',
-      dataIndex: 'price',
-      key: 'price',
-      align: 'right',
-      render: renderContent,
-    }, {
-      title: '数量（件）',
-      dataIndex: 'num',
-      key: 'num',
-      align: 'right',
-      render: (text, row, index) => {
-        if (index < basicGoods.length) {
-          return text;
-        }
-        return <span style={{ fontWeight: 600 }}>{text}</span>;
+      {
+        title: '商品名称',
+        dataIndex: 'name',
+        key: 'name',
+        render: renderContent,
       },
-    }, {
-      title: '金额',
-      dataIndex: 'amount',
-      key: 'amount',
-      align: 'right',
-      render: (text, row, index) => {
-        if (index < basicGoods.length) {
-          return text;
-        }
-        return <span style={{ fontWeight: 600 }}>{text}</span>;
+      {
+        title: '商品条码',
+        dataIndex: 'barcode',
+        key: 'barcode',
+        render: renderContent,
       },
-    }];
+      {
+        title: '单价',
+        dataIndex: 'price',
+        key: 'price',
+        align: 'right',
+        render: renderContent,
+      },
+      {
+        title: '数量（件）',
+        dataIndex: 'num',
+        key: 'num',
+        align: 'right',
+        render: (text, row, index) => {
+          if (index < basicGoods.length) {
+            return text;
+          }
+          return <span style={{ fontWeight: 600 }}>{text}</span>;
+        },
+      },
+      {
+        title: '金额',
+        dataIndex: 'amount',
+        key: 'amount',
+        align: 'right',
+        render: (text, row, index) => {
+          if (index < basicGoods.length) {
+            return text;
+          }
+          return <span style={{ fontWeight: 600 }}>{text}</span>;
+        },
+      },
+    ];
     return (
       <PageHeaderLayout title="基础详情页">
         <Card bordered={false}>

src/routes/Result/Error.js

 import React, { Fragment } from 'react';
 import { Button, Icon, Card } from 'antd';
-import Result from '../../components/Result';
+import Result from 'components/Result';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
 const extra = (

src/routes/Result/Success.js

 import React, { Fragment } from 'react';
 import { Button, Row, Col, Icon, Steps, Card } from 'antd';
-import Result from '../../components/Result';
+import Result from 'components/Result';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
 const { Step } = Steps;

src/routes/User/Login.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Link } from 'dva/router';
 import { Checkbox, Alert, Icon } from 'antd';
-import Login from '../../components/Login';
+import Login from 'components/Login';
 import styles from './Login.less';
 
 const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;

src/routes/User/RegisterResult.js

 import React from 'react';
 import { Button } from 'antd';
 import { Link } from 'dva/router';
-import Result from '../../components/Result';
+import Result from 'components/Result';
 import styles from './RegisterResult.less';
 
 const actions = (

src/services/error.js

 import request from '../utils/request';
 
-export async function query404() {
-  return request('/api/404');
-}
-
-export async function query401() {
-  return request('/api/401');
-}
-
-export async function query403() {
-  return request('/api/403');
-}
-
-export async function query500() {
-  return request('/api/500');
+export async function query(code) {
+  return request(`/api/${code}`);
 }