Merge pull request #711 from zuiidea/develop

Develop
update Readme
2026-10-20 08:16:39 +00:00 · 2017-12-27 15:41:00 +08:00 · 2017-12-27 15:39:45 +08:00 · 2017-12-26 14:14:52 +08:00 · 2017-12-26 11:31:05 +08:00 · 2017-12-25 20:39:48 +08:00
70 changed files with 1863 additions and 2677 deletions
@@ -1,45 +1,49 @@
 {
  "extends": "airbnb",
  "rules": {
-    "semi": [2, "never"],
-    "no-console": 0,
+    "arrow-body-style": [0, "never"],
    "comma-dangle": [2, "always-multiline"],
+    "global-require": 0,
+    "func-names": 0,
+    "prefer-const": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
    "max-len": 0,
-    "react/jsx-first-prop-new-line": 0,
-    "react/jsx-filename-extension": 0,
-    "space-before-function-paren": [2, "always"],
    "no-unused-expressions": [0, {
      "allowShortCircuit": true,
      "allowTernary": true
    }],
-    "arrow-body-style": [0, "never"],
-    "func-names": 0,
-    "prefer-const": 0,
+    "no-console": 0,
    "no-extend-native": 0,
    "no-param-reassign": 0,
    "no-restricted-syntax": 0,
    "no-eval": 0,
    "no-continue": 0,
-    "react/jsx-no-bind": 0,
+    "no-mixed-operators": 0,
+    "no-plusplus": 0,
    "no-unused-vars": [2, { "ignoreRestSiblings": true }],
    "no-underscore-dangle": 0,
-    "global-require": 0,
-    "import/no-unresolved": 0,
-    "import/extensions": 0,
+    "space-before-function-paren": [2, "always"],
+    "semi": [2, "never"],
+    "import/no-extraneous-dependencies": 0,
+    "import/prefer-default-export": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
    "jsx-a11y/href-no-hash": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "jsx-a11y/label-has-for": 0,
    "react/no-array-index-key": 0,
    "react/require-default-props": 0,
    "react/forbid-prop-types": 0,
    "react/no-string-refs": 0,
    "react/no-find-dom-node": 0,
    "react/prefer-stateless-function": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/prefer-default-export": 0,
+    "react/jsx-closing-tag-location": 0,
+    "react/sort-comp": 0,
+    "react/jsx-no-bind": 0,
    "react/no-danger": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "no-mixed-operators": 0,
-    "jsx-a11y/label-has-for": 0,
-    "no-plusplus": 0
+    "react/jsx-first-prop-new-line": 0,
+    "react/jsx-filename-extension": 0
  },
  "parser": "babel-eslint",
  "parserOptions": {
@@ -1,8 +1,8 @@
 # Antd Admin

-[![React](https://img.shields.io/badge/react-^15.6.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react)
-[![Ant Design](https://img.shields.io/badge/ant--design-^2.11.2-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)
-[![dva](https://img.shields.io/badge/dva-^2.0.1-orange.svg?style=flat-square)](https://github.com/dvajs/dva)
+[![React](https://img.shields.io/badge/react-^16.2.0-brightgreen.svg?style=flat-square)](https://github.com/facebook/react)
+[![Ant Design](https://img.shields.io/badge/ant--design-^3.0.3-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)
+[![dva](https://img.shields.io/badge/dva-^2.1.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva)

 [![GitHub issues](https://img.shields.io/github/issues/zuiidea/antd-admin.svg?style=flat-square)](https://github.com/zuiidea/antd-admin)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/zuiidea/antd-admin/pulls)
@@ -21,6 +21,13 @@

 ## 更新日志

+### 4.3.9
+
+`2017-12-27`
+
+-     更新`antd`至`3.0.3`，以及其它主要库，并解决升级带来的兼容问题。
+-     尽可能的保持`antd`的设计语言。
+
 ### 4.3.7

 `2017-10-30`
@@ -1,17 +1,17 @@
 {
  "private": true,
  "name": "antd-admin",
-  "version": "4.3.7",
+  "version": "4.3.9",
  "dependencies": {
-    "antd": "^2.13.8",
-    "axios": "^0.16.2",
+    "antd": "3.0.3",
+    "axios": "^0.17.1",
    "babel-polyfill": "^6.23.0",
    "classnames": "^2.2.5",
    "cross-env": "^5.0.5",
    "d3-shape": "^1.2.0",
-    "draftjs-to-markdown": "^0.4.0",
-    "dva": "^2.0.1",
-    "dva-loading": "^0.2.0",
+    "draftjs-to-markdown": "^0.5.0",
+    "dva": "2.1.0",
+    "dva-loading": "^1.0.4",
    "echarts": "^3.7.2",
    "echarts-for-react": "^2.0.0",
    "echarts-gl": "^1.0.0-beta.5",
@@ -26,31 +26,31 @@
    "lodash": "^4.17.4",
    "mockjs": "^1.0.1-beta3",
    "nprogress": "^0.2.0",
-    "path-to-regexp": "^1.7.0",
+    "path-to-regexp": "^2.1.0",
    "prop-types": "^15.5.10",
    "qs": "^6.5.0",
    "query-string": "^5.0.0",
    "rc-tween-one": "^1.3.1",
-    "react": "^15.6.1",
-    "react-countup": "^2.1.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-countup": "^3.0.2",
+    "react-dom": "^16.2.0",
    "react-draft-wysiwyg": "^1.10.0",
    "react-helmet": "^5.1.3",
-    "react-highcharts": "^13.0.0",
+    "react-highcharts": "^15.0.0",
    "recharts": "^1.0.0-beta.0"
  },
  "devDependencies": {
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.1.0",
    "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-dva-hmr": "^0.3.2",
+    "babel-plugin-dva-hmr": "^0.4.0",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "copy-webpack-plugin": "^4.0.1",
-    "draftjs-to-html": "^0.7.0",
+    "draftjs-to-html": "^0.8.1",
    "dva-model-extend": "^0.1.1",
    "eslint": "^4.1.1",
-    "eslint-config-airbnb": "^15.0.2",
+    "eslint-config-airbnb": "^16.1.0",
    "eslint-import-resolver-node": "^0.3.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.6.1",
@@ -58,12 +58,12 @@
    "eslint-plugin-react": "^7.1.0",
    "html-webpack-plugin": "^2.29.0",
    "redbox-react": "^1.2.10",
-    "roadhog": "^1.2.2"
+    "roadhog": "1.3.1"
  },
  "pre-commit": ["lint"],
  "scripts": {
    "dev": "cross-env BROWSER=none HOST=0.0.0.0 roadhog server",
-    "start": "roadhog buildDll & cross-env BROWSER=none HOST=0.0.0.0 roadhog server",
+    "start": "roadhog buildDll && cross-env BROWSER=none HOST=0.0.0.0 roadhog server",
    "lint": "eslint --fix --ext .js src",
    "build": "roadhog build",
    "build:dll": "roadhog buildDll",
@@ -8,12 +8,14 @@ import './DataTable.less'
 class DataTable extends React.Component {
  constructor (props) {
    super(props)
-    const { dataSource, pagination = {
-      showSizeChanger: true,
-      showQuickJumper: true,
-      showTotal: total => `共 ${total} 条`,
-      current: 1,
-      total: 100 },
+    const {
+      dataSource, pagination = {
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: total => `共 ${total} 条`,
+        current: 1,
+        total: 100,
+      },
    } = props
    this.state = {
      loading: false,
@@ -97,13 +99,12 @@ class DataTable extends React.Component {
  }
 }

-
 DataTable.propTypes = {
  fetch: PropTypes.object,
  rowKey: PropTypes.string,
-  pagination: React.PropTypes.oneOfType([
-    React.PropTypes.bool,
-    React.PropTypes.object,
+  pagination: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.object,
  ]),
  columns: PropTypes.array,
  dataSource: PropTypes.array,
@@ -4,7 +4,7 @@ import { Breadcrumb, Icon } from 'antd'
 import { Link } from 'react-router-dom'
 import pathToRegexp from 'path-to-regexp'
 import { queryArray } from 'utils'
-import styles from './Bread.less'
+import styles from './Layout.less'

 const Bread = ({ menu, location }) => {
  // 匹配当前路由
@@ -1,8 +0,0 @@
-@import "~themes/vars";
-
-.bread {
-  height: 64px;
-  line-height: 64px;
-  padding: 0 24px;
-  margin-bottom: -24px;
-}
@@ -1,9 +0,0 @@
-import React from 'react'
-import { config } from 'utils'
-import styles from './Footer.less'
-
-const Footer = () => (<div className={styles.footer}>
-  {config.footerText}
-</div>)
-
-export default Footer
@@ -1,12 +0,0 @@
-@import "~themes/vars";
-
-.footer {
-  height: 48px;
-  line-height: 48px;
-  text-align: center;
-  font-size: 12px;
-  color: #999;
-  background: #fff;
-  box-shadow: @shadow-2;
-  width: 100%;
-}
@@ -1,13 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Menu, Icon, Popover } from 'antd'
+import { Menu, Icon, Popover, Layout } from 'antd'
 import classnames from 'classnames'
 import styles from './Header.less'
 import Menus from './Menu'

-const SubMenu = Menu.SubMenu
+const { SubMenu } = Menu

-const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu }) => {
+const Header = ({
+  user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu,
+}) => {
  let handleClickMenu = e => e.key === 'logout' && logout()
  const menusProps = {
    menu,
@@ -20,7 +22,7 @@ const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVis
    changeOpenKeys,
  }
  return (
-    <div className={styles.header}>
+    <Layout.Header className={styles.header}>
      {isNavbar
        ? <Popover placement="bottomLeft" onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger="click" content={<Menus {...menusProps} />}>
          <div className={styles.button}>
@@ -53,7 +55,7 @@ const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVis
          </SubMenu>
        </Menu>
      </div>
-    </div>
+    </Layout.Header>
  )
 }

@@ -1,20 +1,55 @@
@import "~themes/vars";

 .header {
-  :global .ant-menu-horizontal {
-    & > .ant-menu-submenu {
-      float: right;
+  :global {
+    .ant-menu-submenu-title {
+      height: 56px;
+    }
+
+    .ant-menu-horizontal {
+      line-height: 56px;
+
+      & > .ant-menu-submenu:hover {
+        color: #1890ff;
+        background-color: rgba(24, 144, 255, 0.15);
+      }
+    }
+
+    .ant-menu {
+      border-bottom: none;
+      height: 56px;
+    }
+
+    .ant-menu-horizontal > .ant-menu-submenu {
+      top: 0;
+      margin-top: 0;
+    }
+
+    .ant-menu-horizontal > .ant-menu-item,
+    .ant-menu-horizontal > .ant-menu-submenu {
+      border-bottom: none;
+    }
+
+    .ant-menu-horizontal > .ant-menu-item-active,
+    .ant-menu-horizontal > .ant-menu-item-open,
+    .ant-menu-horizontal > .ant-menu-item-selected,
+    .ant-menu-horizontal > .ant-menu-item:hover,
+    .ant-menu-horizontal > .ant-menu-submenu-active,
+    .ant-menu-horizontal > .ant-menu-submenu-open,
+    .ant-menu-horizontal > .ant-menu-submenu-selected,
+    .ant-menu-horizontal > .ant-menu-submenu:hover {
+      border-bottom: none;
    }
-    border: none;
-    display: inline-block;
  }
  box-shadow: @shadow-2;
  position: relative;
  display: flex;
  justify-content: space-between;
-  height: 47px;
+  height: 56px;
+  z-index: 9;
+  display: flex;
+  align-items: center;
  background-color: #fff;
-  z-index: 999;

  .rightWarpper {
    display: flex;
@@ -22,9 +57,9 @@
  }

  .button {
-    width: 47px;
-    height: 47px;
-    line-height: 47px;
+    width: 56px;
+    height: 56px;
+    line-height: 56px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
@@ -47,8 +82,6 @@
    .ant-menu-inline .ant-menu-item,
    .ant-menu-vertical .ant-menu-item {
      border-right: 0;
-      height: 48px;
-      line-height: 48px;
    }

    .ant-menu-inline .ant-menu-item-selected,
@@ -1,295 +1,169 @@
@import "~themes/vars";

-.layout {
-  position: relative;
-  height: 100vh;
-
-  &.withnavbar {
-    .main {
-      margin-left: 0;
-    }
+:global {
+  .ant-layout-header {
+    padding: 0;
  }

-  &.fold {
-    .sider {
-      width: 42px;
+  .ant-layout-sider {
+    transition: all 0.3s;

-      .logo {
-        img {
-          width: 28px;
-          margin: 6px 7px;
-        }
+    .ant-menu-root {
+      height: ~"calc(100vh - 144px)";
+      overflow-x: hidden;
+      border-right: none;
+
+      &::-webkit-scrollbar-thumb {
+        background-color: transparent;
      }

-      :global {
-        .ant-menu-root {
-          width: 100%;
-          overflow: visible;
-
-          & > .ant-menu-item {
-            padding: 0;
-            text-align: center;
-
-            .anticon {
-              font-size: 14px;
-              margin-right: 0;
-            }
-          }
-
-          & > .ant-menu-submenu {
-            & > .ant-menu-submenu-title {
-              padding: 0;
-              text-align: center;
-
-              .anticon {
-                font-size: 14px;
-                margin-right: 0;
-              }
-
-              &::after {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .main {
-      margin-left: 42px;
-    }
-  }
-
-  .sider {
-    width: 224px;
-    background: #3e3e3e;
-    position: absolute;
-    overflow: visible;
-    padding-bottom: 24px;
-    height: 100vh;
-    transition: @transition-ease-out;
-    box-shadow: @shadow-1;
-    color: #999;
-
-    &.light {
-      background: #fff;
-
-      .switchtheme {
-        background: #fff;
-        border-top: solid 1px #f8f8f8;
-      }
-    }
-
-    .logo {
-      text-align: center;
-      height: 40px;
-      line-height: 40px;
-      cursor: pointer;
-      margin: 28px 0;
-      transition: @transition-ease-out;
-      overflow: hidden;
-
-      img {
-        width: 40px;
-        margin-right: 8px;
-        transition: @transition-ease-out;
-      }
-
-      span {
-        vertical-align: text-bottom;
-        font-size: 16px;
-        text-transform: uppercase;
-        display: inline-block;
-      }
-
-      .anticon {
-        transition: @transition-ease-out;
-      }
-    }
-
-    .switchtheme {
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      height: 48px;
-      background-color: @dark-half;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 16px 0 24px;
-      overflow: hidden;
-      z-index: 1000;
-
-      span {
-        white-space: nowrap;
-        overflow: hidden;
-      }
-
-      :global {
-        .anticon {
-          min-width: 14px;
-          margin-right: 8px;
-          font-size: 14px;
-        }
-      }
-    }
-
-    :global {
-      .ant-menu-dark,
-      .ant-menu-dark .ant-menu-sub {
-        color: #999;
-      }
-
-      .ant-menu-root {
-        height: ~"calc(100vh - 144px)";
-        overflow-x: hidden;
-        border-right: none;
-
+      &:hover {
        &::-webkit-scrollbar-thumb {
-          background-color: transparent;
-        }
-
-        &:hover {
-          &::-webkit-scrollbar-thumb {
-            background-color: rgba(0, 0, 0, 0.2);
-          }
-        }
-
-        &.ant-menu-vertical {
-          .ant-menu-sub {
-            height: 0;
-            opacity: 0;
-            transition: none;
-          }
-
-          .ant-menu-submenu-active {
-            .ant-menu-sub {
-              height: auto;
-              opacity: 1;
-            }
-          }
+          background-color: rgba(0, 0, 0, 0.2);
        }
      }
+    }

-      .ant-menu {
-        transition: @transition-ease-out;
-
-        .ant-menu-item,
-        .ant-menu-submenu-title {
-          overflow: hidden;
-          white-space: normal;
-        }
+    .ant-menu {
+      .ant-menu-item,
+      .ant-menu-submenu-title {
+        overflow: hidden;
+        white-space: normal;
      }
    }
  }

-  .main {
-    margin-left: 224px;
-    overflow: auto;
-    height: 100vh;
-    transition: @transition-ease-out;
+  .ant-layout-content {
+    padding: 24px;
+  }

-    :global {
-      .content-inner {
-        background: #fff;
-        padding: 24px;
-        box-shadow: @shadow-1;
-        min-height: e("calc(100vh - 184px)");
-      }
+  .ant-layout-footer {
+    text-align: center;
+    padding: 0 24px;
+    height: 40px;
+    font-size: 12px;
+    line-height: 40px;
+  }
+
+  .ant-back-top {
+    right: 50px;
+  }
+
+  .ant-switch.ant-switch-large {
+    line-height: 24px;
+    height: 26px;
+
+    &:after,
+    &:before {
+      width: 22px;
+      height: 22px;
    }

-    .container {
-      margin: 24px;
+    &.ant-switch-checked:after,
+    &.ant-switch-checked:before {
+      margin-left: -23px;
    }
+  }

-    .content {
-      min-height: e("calc(100vh - 184px)");
-      position: relative;
+  .flex-vertical-center {
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-form-item {
+    margin-bottom: 12px;
+  }
+}
+
+.logo {
+  height: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 40px;
+    margin-right: 8px;
+  }
+
+  span {
+    vertical-align: text-bottom;
+    font-size: 16px;
+    text-transform: uppercase;
+    display: inline-block;
+    font-weight: 700;
+    color: @primary-color;
+  }
+}
+
+.switchtheme {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  height: 48px;
+  background-color: #fff;
+  border-top: solid 1px #f8f8f8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  overflow: hidden;
+  z-index: 9;
+  transition: all 0.3s;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 12px;
+  }
+
+  :global {
+    .anticon {
+      min-width: 14px;
+      margin-right: 4px;
+      font-size: 14px;
    }
  }
 }

-:global .ant-menu-dark {
-  color: #999;
-  background-color: #3e3e3e;
+.bread {
+  margin-bottom: 24px;

-  .ant-menu-submenu-title:hover,
-  .ant-menu-submenu:hover {
-    color: @primary-color;
-  }
-
-  .ant-menu-sub {
-    color: #999;
-  }
-
-  .ant-menu-submenu-selected {
-    color: @primary-color;
-
-    &:not(.ant-menu-submenu-open) {
-      background-color: @dark-half;
-    }
-  }
-
-  .ant-menu-item,
-  .ant-menu-submenu-title {
-    & > a {
-      color: #999;
-    }
-
-    &:hover > a {
-      color: @primary-color;
-    }
-  }
-
-  &.ant-menu-inline {
-    .ant-menu-item-selected {
-      background-color: @dark-half;
-    }
-  }
-
-  .ant-menu-item-selected {
-    color: @primary-color;
-
-    &.ant-menu-item {
-      background: @dark-half;
-    }
-
-    & > a {
-      color: @primary-color;
-    }
-
-    &:hover {
-      background-color: @dark-half;
+  :global {
+    .ant-breadcrumb {
+      display: flex;
+      align-items: center;
    }
  }
 }

-.spin {
-  :global .ant-spin-container {
-    height: 100vh;
+.dark {
+  .switchtheme {
+    background-color: #000d18;
+    border-color: #001629;
+  }
+}
+
+.light {
+  :global {
+    .ant-layout-sider {
+      background: #fff;
+    }
  }
 }
@media (max-width: 767px) {
-  .layout {
-    .main {
-      .container {
-        margin: 12px;
-      }
+  .bread {
+    margin-bottom: 12px;
+  }

-      .bread {
-        padding: 0 12px;
-      }
+  :global {
+    .ant-layout-content {
+      padding: 12px;
+    }

-      .content {
-        min-height: e("calc(100vh - 160px)");
-      }
-
-      :global {
-        .content-inner {
-          padding: 12px;
-          min-height: e("calc(100vh - 160px)");
-        }
-      }
+    .ant-back-top {
+      right: 20px;
+      bottom: 20px;
    }
  }
 }
@@ -5,7 +5,9 @@ import { config } from 'utils'
 import styles from './Layout.less'
 import Menus from './Menu'

-const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) => {
+const Sider = ({
+  siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu,
+}) => {
  const menusProps = {
    menu,
    siderFold,
@@ -17,7 +19,7 @@ const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, chang
  return (
    <div>
      <div className={styles.logo}>
-        <img alt={'logo'} src={config.logo} />
+        <img alt="logo" src={config.logo} />
        {siderFold ? '' : <span>{config.name}</span>}
      </div>
      <Menus {...menusProps} />
@@ -1 +0,0 @@
-@import "~themes/vars";
@@ -2,7 +2,6 @@ import Header from './Header'
 import Menu from './Menu'
 import Bread from './Bread'
 import Sider from './Sider'
-import Footer from './Footer'
 import styles from './Layout.less'

-export { Header, Menu, Bread, Sider, Footer, styles }
+export { Header, Menu, Bread, Sider, styles }
@@ -26,8 +26,8 @@
  }

  .inner {
-    width: 48px;
-    height: 48px;
+    width: 40px;
+    height: 40px;
    margin: 0 auto;
    text-indent: -12345px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
@@ -4,11 +4,13 @@
  background: #fff;
  padding: 24px;
  box-shadow: @shadow-1;
-  min-height: e("calc(100vh - 184px)");
+  min-height: ~"calc(100vh - 198px)";
+  position: relative;
 }
+
@media (max-width: 767px) {
  .contentInner {
    padding: 12px;
-    min-height: e("calc(100vh - 160px)");
+    min-height: ~"calc(100vh - 160px)";
  }
 }
@@ -1,55 +1,54 @@
-.no-highlight() {
-  border-color: #e5e5e5;
-  box-shadow: none;
-}
-
-.search {
-  display: flex;
-  width: 100%;
-  position: relative;
-
-  :global {
-    .anticon-cross {
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      right: 84px;
-      cursor: pointer;
-      color: #fff;
-      line-height: 18px;
-      border-radius: 50%!important;
-      background-color: rgba(0, 0, 0, .16);
-      top: 7px;
-      // opacity:
-    }
-
-    .ant-select {
-      width: 80px;
-      flex-shrink: 0;
-      flex-grow: 0;
-
-      &.ant-select-focused .ant-select-selection,
-      &.ant-select-open .ant-select-selection,
-      .ant-select-selection:active,
-      .ant-select-selection:focus,
-      .ant-select-selection:hover {
-        .no-highlight();
-      }
-    }
-
-    .ant-input {
-      &:focus,
-      &:hover {
-        .no-highlight();
-      }
-      flex-shrink: 1;
-      flex-grow: 1;
-    }
-
-    .ant-btn {
-      width: 80px;
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
-  }
-}
+.no-highlight() {
+  border-color: #e5e5e5;
+  box-shadow: none;
+}
+
+.search {
+  display: flex !important;
+  width: 100%;
+  position: relative;
+
+  :global {
+    .anticon-cross {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      right: 84px;
+      cursor: pointer;
+      color: #fff;
+      line-height: 18px;
+      border-radius: 50%!important;
+      background-color: rgba(0, 0, 0, .16);
+      top: 7px;
+    }
+
+    .ant-select {
+      width: 80px;
+      flex-shrink: 0;
+      flex-grow: 0;
+
+      &.ant-select-focused .ant-select-selection,
+      &.ant-select-open .ant-select-selection,
+      .ant-select-selection:active,
+      .ant-select-selection:focus,
+      .ant-select-selection:hover {
+        .no-highlight();
+      }
+    }
+
+    .ant-input {
+      &:focus,
+      &:hover {
+        .no-highlight();
+      }
+      flex-shrink: 1;
+      flex-grow: 1;
+    }
+
+    .ant-btn {
+      width: 80px;
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+  }
+}
@@ -5,13 +5,13 @@ import Search from './Search'
 import Editor from './Editor'
 import FilterItem from './FilterItem'
 import Loader from './Loader'
-import * as Layout from './Layout/index.js'
+import * as MyLayout from './Layout/index.js'
 import Page from './Page'

 import layer from './layer'

 export {
-  Layout,
+  MyLayout,
  DataTable,
  DropOption,
  Iconfont,
@@ -4,7 +4,7 @@ const { apiPrefix } = config
 let database = [
  {
    id: '1',
-    icon: 'laptop',
+    icon: 'dashboard',
    name: 'Dashboard',
    route: '/dashboard',
  },
@@ -50,14 +50,14 @@ let database = [
    icon: 'heart-o',
    route: '/UIElement/iconfont',
  },
-  {
-    id: '42',
-    bpid: '4',
-    mpid: '4',
-    name: 'DataTable',
-    icon: 'database',
-    route: '/UIElement/dataTable',
-  },
+  // {
+  //   id: '42',
+  //   bpid: '4',
+  //   mpid: '4',
+  //   name: 'DataTable',
+  //   icon: 'database',
+  //   route: '/UIElement/dataTable',
+  // },
  {
    id: '43',
    bpid: '4',
@@ -74,22 +74,22 @@ let database = [
    icon: 'search',
    route: '/UIElement/search',
  },
-  {
-    id: '45',
-    bpid: '4',
-    mpid: '4',
-    name: 'Editor',
-    icon: 'edit',
-    route: '/UIElement/editor',
-  },
-  {
-    id: '46',
-    bpid: '4',
-    mpid: '4',
-    name: 'layer (Function)',
-    icon: 'credit-card',
-    route: '/UIElement/layer',
-  },
+  // {
+  //   id: '45',
+  //   bpid: '4',
+  //   mpid: '4',
+  //   name: '56pxor',
+  //   icon: 'edit',
+  //   route: '/UIElement/editor',
+  // },
+  // {
+  //   id: '46',
+  //   bpid: '4',
+  //   mpid: '4',
+  //   name: 'layer (Function)',
+  //   icon: 'credit-card',
+  //   route: '/UIElement/layer',
+  // },
  {
    id: '5',
    bpid: '1',
@@ -11,11 +11,13 @@ export default modelExtend(pageModel, {
    setup ({ dispatch, history }) {
      history.listen((location) => {
        if (location.pathname === '/post') {
-          dispatch({ type: 'query',
+          dispatch({
+            type: 'query',
            payload: {
              status: 2,
              ...queryString.parse(location.search),
-            } })
+            },
+          })
        }
      })
    },
@@ -1,5 +1,6 @@
 /* global window */
 import modelExtend from 'dva-model-extend'
+import queryString from 'query-string'
 import { config } from 'utils'
 import { create, remove, update } from 'services/user'
 import * as usersService from 'services/users'
@@ -23,7 +24,7 @@ export default modelExtend(pageModel, {
    setup ({ dispatch, history }) {
      history.listen((location) => {
        if (location.pathname === '/user') {
-          const payload = location.query || { current: 1, pageSize: 10 }
+          const payload = queryString.parse(location.search) || { page: 1, pageSize: 10 }
          dispatch({
            type: 'query',
            payload,
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 28 Copy 5</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="62.1023273%" y1="0%" x2="108.19718%" y2="37.8635764%" id="linearGradient-1">
+            <stop stop-color="#4285EB" offset="0%"></stop>
+            <stop stop-color="#2EC7FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="69.644116%" y1="0%" x2="54.0428975%" y2="108.456714%" id="linearGradient-2">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#148EFF" offset="37.8600687%"></stop>
+            <stop stop-color="#0A60FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="69.6908165%" y1="-12.9743587%" x2="16.7228981%" y2="117.391248%" id="linearGradient-3">
+            <stop stop-color="#FA816E" offset="0%"></stop>
+            <stop stop-color="#F74A5C" offset="41.472606%"></stop>
+            <stop stop-color="#F51D2C" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-4">
+            <stop stop-color="#FA8E7D" offset="0%"></stop>
+            <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
+            <stop stop-color="#F51D2C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" transform="translate(-20.000000, -20.000000)">
+            <g id="Group-28-Copy-5" transform="translate(20.000000, 20.000000)">
+                <g id="Group-27-Copy-3">
+                    <g id="Group-25" fill-rule="nonzero">
+                        <g id="2">
+                            <path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C99.2571609,26.9692191 101.032305,26.9692191 102.20193,28.1378823 L129.985225,55.8983314 C134.193707,60.1033528 141.017005,60.1033528 145.225487,55.8983314 C149.433969,51.69331 149.433969,44.8756232 145.225487,40.6706018 L108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-1)"></path>
+                            <path d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C100.999864,25.6271836 105.751642,20.541824 112.729652,19.3524487 C117.915585,18.4685261 123.585219,20.4140239 129.738554,25.1889424 C125.624663,21.0784292 118.571995,14.0340304 108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z" id="Shape" fill="url(#linearGradient-2)"></path>
+                        </g>
+                        <path d="M153.685633,135.854579 C157.894115,140.0596 164.717412,140.0596 168.925894,135.854579 L195.959977,108.842726 C200.659183,104.147384 200.659183,96.5636133 195.960527,91.8688194 L168.690777,64.7181159 C164.472332,60.5180858 157.646868,60.5241425 153.435895,64.7316526 C149.227413,68.936674 149.227413,75.7543607 153.435895,79.9593821 L171.854035,98.3623765 C173.02366,99.5310396 173.02366,101.304724 171.854035,102.473387 L153.685633,120.626849 C149.47715,124.83187 149.47715,131.649557 153.685633,135.854579 Z" id="Shape" fill="url(#linearGradient-3)"></path>
+                    </g>
+                    <ellipse id="Combined-Shape" fill="url(#linearGradient-4)" cx="100.519339" cy="100.436681" rx="23.6001926" ry="23.580786"></ellipse>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -1,8 +1,8 @@
 import React from 'react'
-import { DropOption } from 'components'
+import { DropOption, Page } from 'components'
 import { Table, Row, Col, Card, message } from 'antd'

-const DropOptionPage = () => (<div className="content-inner">
+const DropOptionPage = () => (<Page inner>
  <Row gutter={32}>
    <Col lg={8} md={12}>
      <Card title="默认">
@@ -90,6 +90,6 @@ const DropOptionPage = () => (<div className="content-inner">
      />
    </Col>
  </Row>
-</div>)
+</Page>)

 export default DropOptionPage
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Iconfont } from 'components'
+import { Iconfont, Page } from 'components'
 import { Table, Row, Col, Icon } from 'antd'
 import styles from './index.less'
 import './emoji'
@@ -24,7 +24,7 @@ const localRequireSVGIcons = [
  require('../../../svg/cute/think.svg'),
 ]

-const IcoPage = () => (<div className="content-inner">
+const IcoPage = () => (<Page inner>
  <Icon type="star-oo" />
  <h2 style={{ margin: '16px 0' }}>Colorful Icon</h2>
  <ul className={styles.list}>
@@ -111,6 +111,6 @@ const IcoPage = () => (<div className="content-inner">
      <a href="http://www.iconfont.cn/collections/detail?cid=4268" target="_blank" rel="noopener noreferrer"> http://www.iconfont.cn/collections/detail?cid=4268</a>
    </p>
  </div>
-</div>)
+</Page>)

 export default IcoPage
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Search } from 'components'
+import { Search, Page } from 'components'
 import { Table, Row, Col, Card } from 'antd'

-const SearchPage = () => (<div className="content-inner">
+const SearchPage = () => (<Page inner>
  <Row gutter={32}>
    <Col lg={8} md={12}>
      <Card title="默认">
@@ -27,7 +27,7 @@ const SearchPage = () => (<div className="content-inner">
    </Col>
    <Col lg={8} md={12}>
      <Card title="大小">
-        <Search size="large" style={{ marginBottom: 16 }} />
+        <Search style={{ marginBottom: 16 }} />
        <Search size="small" />
      </Card>
    </Col>
@@ -93,6 +93,6 @@ const SearchPage = () => (<div className="content-inner">
      />
    </Col>
  </Row>
-</div>)
+</Page>)

 export default SearchPage
@@ -1,30 +1,37 @@
 /* global window */
+/* global document */
 import React from 'react'
 import NProgress from 'nprogress'
 import PropTypes from 'prop-types'
 import pathToRegexp from 'path-to-regexp'
 import { connect } from 'dva'
-import { Layout, Loader } from 'components'
+import { Loader, MyLayout } from 'components'
+import { BackTop, Layout } from 'antd'
 import { classnames, config } from 'utils'
 import { Helmet } from 'react-helmet'
 import { withRouter } from 'dva/router'
+import Error from './error'
 import '../themes/index.less'
 import './app.less'
-import Error from './error'

+const { Content, Footer, Sider } = Layout
+const { Header, Bread, styles } = MyLayout
 const { prefix, openPages } = config

-const { Header, Bread, Footer, Sider, styles } = Layout
 let lastHref

-const App = ({ children, dispatch, app, loading, location }) => {
-  const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys, menu, permissions } = app
+const App = ({
+  children, dispatch, app, loading, location,
+}) => {
+  const {
+    user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys, menu, permissions,
+  } = app
  let { pathname } = location
  pathname = pathname.startsWith('/') ? pathname : `/${pathname}`
  const { iconFontJS, iconFontCSS, logo } = config
  const current = menu.filter(item => pathToRegexp(item.route || '').exec(pathname))
  const hasPermission = current.length ? permissions.visit.includes(current[0].id) : false
-  const href = window.location.href
+  const { href } = window.location

  if (lastHref !== href) {
    NProgress.start()
@@ -75,12 +82,14 @@ const App = ({ children, dispatch, app, loading, location }) => {
    menu,
    location,
  }
+
  if (openPages && openPages.includes(pathname)) {
    return (<div>
      <Loader fullScreen spinning={loading.effects['app/query']} />
      {children}
    </div>)
  }
+
  return (
    <div>
      <Loader fullScreen spinning={loading.effects['app/query']} />
@@ -91,21 +100,27 @@ const App = ({ children, dispatch, app, loading, location }) => {
        {iconFontJS && <script src={iconFontJS} />}
        {iconFontCSS && <link rel="stylesheet" href={iconFontCSS} />}
      </Helmet>
-      <div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
-        {!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>
-          {siderProps.menu.length === 0 ? null : <Sider {...siderProps} />}
-        </aside> : ''}
-        <div className={styles.main}>
+
+      <Layout className={classnames({ [styles.dark]: darkTheme, [styles.light]: !darkTheme })}>
+        {!isNavbar && <Sider
+          trigger={null}
+          collapsible
+          collapsed={siderFold}
+        >
+          {siderProps.menu.length === 0 ? null : <MyLayout.Sider {...siderProps} />}
+        </Sider>}
+        <Layout style={{ height: '100vh', overflow: 'scroll' }} id="mainContainer">
+          <BackTop target={() => document.getElementById('mainContainer')} />
          <Header {...headerProps} />
-          <Bread {...breadProps} />
-          <div className={styles.container}>
-            <div className={styles.content}>
-              {hasPermission ? children : <Error />}
-            </div>
-          </div>
-          <Footer />
-        </div>
-      </div>
+          <Content>
+            <Bread {...breadProps} />
+            {hasPermission ? children : <Error />}
+          </Content>
+          <Footer >
+            {config.footerText}
+          </Footer>
+        </Layout>
+      </Layout>
    </div>
  )
 }
@@ -3,187 +3,187 @@ import ReactEcharts from 'echarts-for-react'

 require('echarts/map/js/china.js')

-const AirportCoordComponent = React.createClass({
-  getOtion () {
-    let geoCoordMap = {
-      上海: [121.4648, 31.2891],
-      东莞: [113.8953, 22.901],
-      东营: [118.7073, 37.5513],
-      中山: [113.4229, 22.478],
-      临汾: [111.4783, 36.1615],
-      临沂: [118.3118, 35.2936],
-      丹东: [124.541, 40.4242],
-      丽水: [119.5642, 28.1854],
-      乌鲁木齐: [87.9236, 43.5883],
-      佛山: [112.8955, 23.1097],
-      保定: [115.0488, 39.0948],
-      兰州: [103.5901, 36.3043],
-      包头: [110.3467, 41.4899],
-      北京: [116.4551, 40.2539],
-      北海: [109.314, 21.6211],
-      南京: [118.8062, 31.9208],
-      南宁: [108.479, 23.1152],
-      南昌: [116.0046, 28.6633],
-      南通: [121.1023, 32.1625],
-      厦门: [118.1689, 24.6478],
-      台州: [121.1353, 28.6688],
-      合肥: [117.29, 32.0581],
-      呼和浩特: [111.4124, 40.4901],
-      咸阳: [108.4131, 34.8706],
-      哈尔滨: [127.9688, 45.368],
-      唐山: [118.4766, 39.6826],
-      嘉兴: [120.9155, 30.6354],
-      大同: [113.7854, 39.8035],
-      大连: [122.2229, 39.4409],
-      天津: [117.4219, 39.4189],
-      太原: [112.3352, 37.9413],
-      威海: [121.9482, 37.1393],
-      宁波: [121.5967, 29.6466],
-      宝鸡: [107.1826, 34.3433],
-      宿迁: [118.5535, 33.7775],
-      常州: [119.4543, 31.5582],
-      广州: [113.5107, 23.2196],
-      廊坊: [116.521, 39.0509],
-      延安: [109.1052, 36.4252],
-      张家口: [115.1477, 40.8527],
-      徐州: [117.5208, 34.3268],
-      德州: [116.6858, 37.2107],
-      惠州: [114.6204, 23.1647],
-      成都: [103.9526, 30.7617],
-      扬州: [119.4653, 32.8162],
-      承德: [117.5757, 41.4075],
-      拉萨: [91.1865, 30.1465],
-      无锡: [120.3442, 31.5527],
-      日照: [119.2786, 35.5023],
-      昆明: [102.9199, 25.4663],
-      杭州: [119.5313, 29.8773],
-      枣庄: [117.323, 34.8926],
-      柳州: [109.3799, 24.9774],
-      株洲: [113.5327, 27.0319],
-      武汉: [114.3896, 30.6628],
-      汕头: [117.1692, 23.3405],
-      江门: [112.6318, 22.1484],
-      沈阳: [123.1238, 42.1216],
-      沧州: [116.8286, 38.2104],
-      河源: [114.917, 23.9722],
-      泉州: [118.3228, 25.1147],
-      泰安: [117.0264, 36.0516],
-      泰州: [120.0586, 32.5525],
-      济南: [117.1582, 36.8701],
-      济宁: [116.8286, 35.3375],
-      海口: [110.3893, 19.8516],
-      淄博: [118.0371, 36.6064],
-      淮安: [118.927, 33.4039],
-      深圳: [114.5435, 22.5439],
-      清远: [112.9175, 24.3292],
-      温州: [120.498, 27.8119],
-      渭南: [109.7864, 35.0299],
-      湖州: [119.8608, 30.7782],
-      湘潭: [112.5439, 27.7075],
-      滨州: [117.8174, 37.4963],
-      潍坊: [119.0918, 36.524],
-      烟台: [120.7397, 37.5128],
-      玉溪: [101.9312, 23.8898],
-      珠海: [113.7305, 22.1155],
-      盐城: [120.2234, 33.5577],
-      盘锦: [121.9482, 41.0449],
-      石家庄: [114.4995, 38.1006],
-      福州: [119.4543, 25.9222],
-      秦皇岛: [119.2126, 40.0232],
-      绍兴: [120.564, 29.7565],
-      聊城: [115.9167, 36.4032],
-      肇庆: [112.1265, 23.5822],
-      舟山: [122.2559, 30.2234],
-      苏州: [120.6519, 31.3989],
-      莱芜: [117.6526, 36.2714],
-      菏泽: [115.6201, 35.2057],
-      营口: [122.4316, 40.4297],
-      葫芦岛: [120.1575, 40.578],
-      衡水: [115.8838, 37.7161],
-      衢州: [118.6853, 28.8666],
-      西宁: [101.4038, 36.8207],
-      西安: [109.1162, 34.2004],
-      贵阳: [106.6992, 26.7682],
-      连云港: [119.1248, 34.552],
-      邢台: [114.8071, 37.2821],
-      邯郸: [114.4775, 36.535],
-      郑州: [113.4668, 34.6234],
-      鄂尔多斯: [108.9734, 39.2487],
-      重庆: [107.7539, 30.1904],
-      金华: [120.0037, 29.1028],
-      铜川: [109.0393, 35.1947],
-      银川: [106.3586, 38.1775],
-      镇江: [119.4763, 31.9702],
-      长春: [125.8154, 44.2584],
-      长沙: [113.0823, 28.2568],
-      长治: [112.8625, 36.4746],
-      阳泉: [113.4778, 38.0951],
-      青岛: [120.4651, 36.3373],
-      韶关: [113.7964, 24.7028],
-    }
+const AirportCoordComponent = () => {
+  let geoCoordMap = {
+    上海: [121.4648, 31.2891],
+    东莞: [113.8953, 22.901],
+    东营: [118.7073, 37.5513],
+    中山: [113.4229, 22.478],
+    临汾: [111.4783, 36.1615],
+    临沂: [118.3118, 35.2936],
+    丹东: [124.541, 40.4242],
+    丽水: [119.5642, 28.1854],
+    乌鲁木齐: [87.9236, 43.5883],
+    佛山: [112.8955, 23.1097],
+    保定: [115.0488, 39.0948],
+    兰州: [103.5901, 36.3043],
+    包头: [110.3467, 41.4899],
+    北京: [116.4551, 40.2539],
+    北海: [109.314, 21.6211],
+    南京: [118.8062, 31.9208],
+    南宁: [108.479, 23.1152],
+    南昌: [116.0046, 28.6633],
+    南通: [121.1023, 32.1625],
+    厦门: [118.1689, 24.6478],
+    台州: [121.1353, 28.6688],
+    合肥: [117.29, 32.0581],
+    呼和浩特: [111.4124, 40.4901],
+    咸阳: [108.4131, 34.8706],
+    哈尔滨: [127.9688, 45.368],
+    唐山: [118.4766, 39.6826],
+    嘉兴: [120.9155, 30.6354],
+    大同: [113.7854, 39.8035],
+    大连: [122.2229, 39.4409],
+    天津: [117.4219, 39.4189],
+    太原: [112.3352, 37.9413],
+    威海: [121.9482, 37.1393],
+    宁波: [121.5967, 29.6466],
+    宝鸡: [107.1826, 34.3433],
+    宿迁: [118.5535, 33.7775],
+    常州: [119.4543, 31.5582],
+    广州: [113.5107, 23.2196],
+    廊坊: [116.521, 39.0509],
+    延安: [109.1052, 36.4252],
+    张家口: [115.1477, 40.8527],
+    徐州: [117.5208, 34.3268],
+    德州: [116.6858, 37.2107],
+    惠州: [114.6204, 23.1647],
+    成都: [103.9526, 30.7617],
+    扬州: [119.4653, 32.8162],
+    承德: [117.5757, 41.4075],
+    拉萨: [91.1865, 30.1465],
+    无锡: [120.3442, 31.5527],
+    日照: [119.2786, 35.5023],
+    昆明: [102.9199, 25.4663],
+    杭州: [119.5313, 29.8773],
+    枣庄: [117.323, 34.8926],
+    柳州: [109.3799, 24.9774],
+    株洲: [113.5327, 27.0319],
+    武汉: [114.3896, 30.6628],
+    汕头: [117.1692, 23.3405],
+    江门: [112.6318, 22.1484],
+    沈阳: [123.1238, 42.1216],
+    沧州: [116.8286, 38.2104],
+    河源: [114.917, 23.9722],
+    泉州: [118.3228, 25.1147],
+    泰安: [117.0264, 36.0516],
+    泰州: [120.0586, 32.5525],
+    济南: [117.1582, 36.8701],
+    济宁: [116.8286, 35.3375],
+    海口: [110.3893, 19.8516],
+    淄博: [118.0371, 36.6064],
+    淮安: [118.927, 33.4039],
+    深圳: [114.5435, 22.5439],
+    清远: [112.9175, 24.3292],
+    温州: [120.498, 27.8119],
+    渭南: [109.7864, 35.0299],
+    湖州: [119.8608, 30.7782],
+    湘潭: [112.5439, 27.7075],
+    滨州: [117.8174, 37.4963],
+    潍坊: [119.0918, 36.524],
+    烟台: [120.7397, 37.5128],
+    玉溪: [101.9312, 23.8898],
+    珠海: [113.7305, 22.1155],
+    盐城: [120.2234, 33.5577],
+    盘锦: [121.9482, 41.0449],
+    石家庄: [114.4995, 38.1006],
+    福州: [119.4543, 25.9222],
+    秦皇岛: [119.2126, 40.0232],
+    绍兴: [120.564, 29.7565],
+    聊城: [115.9167, 36.4032],
+    肇庆: [112.1265, 23.5822],
+    舟山: [122.2559, 30.2234],
+    苏州: [120.6519, 31.3989],
+    莱芜: [117.6526, 36.2714],
+    菏泽: [115.6201, 35.2057],
+    营口: [122.4316, 40.4297],
+    葫芦岛: [120.1575, 40.578],
+    衡水: [115.8838, 37.7161],
+    衢州: [118.6853, 28.8666],
+    西宁: [101.4038, 36.8207],
+    西安: [109.1162, 34.2004],
+    贵阳: [106.6992, 26.7682],
+    连云港: [119.1248, 34.552],
+    邢台: [114.8071, 37.2821],
+    邯郸: [114.4775, 36.535],
+    郑州: [113.4668, 34.6234],
+    鄂尔多斯: [108.9734, 39.2487],
+    重庆: [107.7539, 30.1904],
+    金华: [120.0037, 29.1028],
+    铜川: [109.0393, 35.1947],
+    银川: [106.3586, 38.1775],
+    镇江: [119.4763, 31.9702],
+    长春: [125.8154, 44.2584],
+    长沙: [113.0823, 28.2568],
+    长治: [112.8625, 36.4746],
+    阳泉: [113.4778, 38.0951],
+    青岛: [120.4651, 36.3373],
+    韶关: [113.7964, 24.7028],
+  }

-    let BJData = [
-      [{ name: '北京' }, { name: '上海', value: 95 }],
-      [{ name: '北京' }, { name: '广州', value: 90 }],
-      [{ name: '北京' }, { name: '大连', value: 80 }],
-      [{ name: '北京' }, { name: '南宁', value: 70 }],
-      [{ name: '北京' }, { name: '南昌', value: 60 }],
-      [{ name: '北京' }, { name: '拉萨', value: 50 }],
-      [{ name: '北京' }, { name: '长春', value: 40 }],
-      [{ name: '北京' }, { name: '包头', value: 30 }],
-      [{ name: '北京' }, { name: '重庆', value: 20 }],
-      [{ name: '北京' }, { name: '常州', value: 10 }],
-    ]
+  let BJData = [
+    [{ name: '北京' }, { name: '上海', value: 95 }],
+    [{ name: '北京' }, { name: '广州', value: 90 }],
+    [{ name: '北京' }, { name: '大连', value: 80 }],
+    [{ name: '北京' }, { name: '南宁', value: 70 }],
+    [{ name: '北京' }, { name: '南昌', value: 60 }],
+    [{ name: '北京' }, { name: '拉萨', value: 50 }],
+    [{ name: '北京' }, { name: '长春', value: 40 }],
+    [{ name: '北京' }, { name: '包头', value: 30 }],
+    [{ name: '北京' }, { name: '重庆', value: 20 }],
+    [{ name: '北京' }, { name: '常州', value: 10 }],
+  ]

-    let SHData = [
-      [{ name: '上海' }, { name: '包头', value: 95 }],
-      [{ name: '上海' }, { name: '昆明', value: 90 }],
-      [{ name: '上海' }, { name: '广州', value: 80 }],
-      [{ name: '上海' }, { name: '郑州', value: 70 }],
-      [{ name: '上海' }, { name: '长春', value: 60 }],
-      [{ name: '上海' }, { name: '重庆', value: 50 }],
-      [{ name: '上海' }, { name: '长沙', value: 40 }],
-      [{ name: '上海' }, { name: '北京', value: 30 }],
-      [{ name: '上海' }, { name: '丹东', value: 20 }],
-      [{ name: '上海' }, { name: '大连', value: 10 }],
-    ]
+  let SHData = [
+    [{ name: '上海' }, { name: '包头', value: 95 }],
+    [{ name: '上海' }, { name: '昆明', value: 90 }],
+    [{ name: '上海' }, { name: '广州', value: 80 }],
+    [{ name: '上海' }, { name: '郑州', value: 70 }],
+    [{ name: '上海' }, { name: '长春', value: 60 }],
+    [{ name: '上海' }, { name: '重庆', value: 50 }],
+    [{ name: '上海' }, { name: '长沙', value: 40 }],
+    [{ name: '上海' }, { name: '北京', value: 30 }],
+    [{ name: '上海' }, { name: '丹东', value: 20 }],
+    [{ name: '上海' }, { name: '大连', value: 10 }],
+  ]

-    let GZData = [
-      [{ name: '广州' }, { name: '福州', value: 95 }],
-      [{ name: '广州' }, { name: '太原', value: 90 }],
-      [{ name: '广州' }, { name: '长春', value: 80 }],
-      [{ name: '广州' }, { name: '重庆', value: 70 }],
-      [{ name: '广州' }, { name: '西安', value: 60 }],
-      [{ name: '广州' }, { name: '成都', value: 50 }],
-      [{ name: '广州' }, { name: '常州', value: 40 }],
-      [{ name: '广州' }, { name: '北京', value: 30 }],
-      [{ name: '广州' }, { name: '北海', value: 20 }],
-      [{ name: '广州' }, { name: '海口', value: 10 }],
-    ]
+  let GZData = [
+    [{ name: '广州' }, { name: '福州', value: 95 }],
+    [{ name: '广州' }, { name: '太原', value: 90 }],
+    [{ name: '广州' }, { name: '长春', value: 80 }],
+    [{ name: '广州' }, { name: '重庆', value: 70 }],
+    [{ name: '广州' }, { name: '西安', value: 60 }],
+    [{ name: '广州' }, { name: '成都', value: 50 }],
+    [{ name: '广州' }, { name: '常州', value: 40 }],
+    [{ name: '广州' }, { name: '北京', value: 30 }],
+    [{ name: '广州' }, { name: '北海', value: 20 }],
+    [{ name: '广州' }, { name: '海口', value: 10 }],
+  ]

-    let planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
+  let planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

-    let convertData = function (data) {
-      let res = []
-      for (let i = 0; i < data.length; i += 1) {
-        let dataItem = data[i]
-        let fromCoord = geoCoordMap[dataItem[0].name]
-        let toCoord = geoCoordMap[dataItem[1].name]
-        if (fromCoord && toCoord) {
-          res.push({
-            fromName: dataItem[0].name,
-            toName: dataItem[1].name,
-            coords: [fromCoord, toCoord],
-          })
-        }
+  let convertData = function (data) {
+    let res = []
+    for (let i = 0; i < data.length; i += 1) {
+      let dataItem = data[i]
+      let fromCoord = geoCoordMap[dataItem[0].name]
+      let toCoord = geoCoordMap[dataItem[1].name]
+      if (fromCoord && toCoord) {
+        res.push({
+          fromName: dataItem[0].name,
+          toName: dataItem[1].name,
+          coords: [fromCoord, toCoord],
+        })
      }
-      return res
    }
+    return res
+  }

-    let color = ['#a6c84c', '#ffa022', '#46bee9']
-    let series = [];
-    [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach((item, i) => {
-      series.push({
+  let color = ['#a6c84c', '#ffa022', '#46bee9']
+  let series = [];
+  [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach((item, i) => {
+    series.push(
+      {
        name: `${item[0]} Top10`,
        type: 'lines',
        zlevel: 1,
@@ -255,68 +255,67 @@ const AirportCoordComponent = React.createClass({
            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
          }
        }),
-      })
-    })
-
-    let option = {
-      backgroundColor: '#404a59',
-      title: {
-        text: '模拟迁徙',
-        subtext: '数据纯属虚构',
-        left: 'center',
-        textStyle: {
-          color: '#fff',
-        },
-      },
-      tooltip: {
-        trigger: 'item',
-      },
-      legend: {
-        orient: 'vertical',
-        top: 'bottom',
-        left: 'right',
-        data: ['北京 Top10', '上海 Top10', '广州 Top10'],
-        textStyle: {
-          color: '#fff',
-        },
-        selectedMode: 'single',
-      },
-      geo: {
-        map: 'china',
-        label: {
-          emphasis: {
-            show: false,
-          },
-        },
-        roam: true,
-        itemStyle: {
-          normal: {
-            areaColor: '#323c48',
-            borderColor: '#404a59',
-          },
-          emphasis: {
-            areaColor: '#2a333d',
-          },
-        },
-      },
-      series,
-    }
-    return option
-  },
-  render () {
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> render a airport chart. </label>
-          <ReactEcharts
-            option={this.getOtion()}
-            style={{ height: '700px', width: '100%' }}
-            className="react_for_echarts"
-          />
-        </div>
-      </div>
+      }
    )
-  },
-})
+  })
+
+  let option = {
+    backgroundColor: '#404a59',
+    title: {
+      text: '模拟迁徙',
+      subtext: '数据纯属虚构',
+      left: 'center',
+      textStyle: {
+        color: '#fff',
+      },
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      orient: 'vertical',
+      top: 'bottom',
+      left: 'right',
+      data: ['北京 Top10', '上海 Top10', '广州 Top10'],
+      textStyle: {
+        color: '#fff',
+      },
+      selectedMode: 'single',
+    },
+    geo: {
+      map: 'china',
+      label: {
+        emphasis: {
+          show: false,
+        },
+      },
+      roam: true,
+      itemStyle: {
+        normal: {
+          areaColor: '#323c48',
+          borderColor: '#404a59',
+        },
+        emphasis: {
+          areaColor: '#2a333d',
+        },
+      },
+    },
+    series,
+  }
+
+
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> render a airport chart. </label>
+        <ReactEcharts
+          option={option}
+          style={{ height: '700px', width: '100%' }}
+          className="react_for_echarts"
+        />
+      </div>
+    </div>
+  )
+}

 export default AirportCoordComponent
@@ -2,8 +2,8 @@ import React from 'react'
 import ReactEcharts from 'echarts-for-react'
 import echarts from 'echarts'

-const CalendarComponent = React.createClass({
-  getVirtulData (year) {
+const CalendarComponent = () => {
+  const getVirtulData = (year) => {
    year = year || '2017'
    let date = +echarts.number.parseDate(`${year}-01-01`)
    let end = +echarts.number.parseDate(`${+year + 1}-01-01`)
@@ -16,185 +16,182 @@ const CalendarComponent = React.createClass({
      ])
    }
    return data
-  },
-  getOtion () {
-    let graphData = [[
-      1485878400000,
-      260,
-    ], [
-      1486137600000,
-      200,
-    ], [
-      1486569600000,
-      279,
-    ], [
-      1486915200000,
-      847,
-    ], [
-      1487347200000,
-      241,
-    ], [
-      1487779200000,
-      411,
-    ], [
-      1488124800000,
-      985,
-    ],
-    ]
+  }

-    let links = graphData.map((item, idx) => {
-      return {
-        source: idx,
-        target: idx + 1,
-      }
-    })
-    links.pop()
+  let graphData = [[
+    1485878400000,
+    260,
+  ], [
+    1486137600000,
+    200,
+  ], [
+    1486569600000,
+    279,
+  ], [
+    1486915200000,
+    847,
+  ], [
+    1487347200000,
+    241,
+  ], [
+    1487779200000,
+    411,
+  ], [
+    1488124800000,
+    985,
+  ],
+  ]

-    const option = {
-      tooltip: {
-        position: 'top',
-      },
-      visualMap: [{
-        min: 0,
-        max: 1000,
-        calculable: true,
-        seriesIndex: [2, 3, 4],
-        orient: 'horizontal',
-        left: '55%',
-        bottom: 20,
-      }, {
-        min: 0,
-        max: 1000,
-        inRange: {
-          color: ['grey'],
-          opacity: [0, 0.3],
-        },
-        controller: {
-          inRange: {
-            opacity: [0.3, 0.6],
-          },
-          outOfRange: {
-            color: '#ccc',
-          },
-        },
-        calculable: true,
-        seriesIndex: [1],
-        orient: 'horizontal',
-        left: '10%',
-        bottom: 20,
-      }],
-
-      calendar: [
-        {
-          orient: 'vertical',
-          yearLabel: {
-            margin: 40,
-          },
-          monthLabel: {
-            nameMap: 'cn',
-            margin: 20,
-          },
-          dayLabel: {
-            firstDay: 1,
-            nameMap: 'cn',
-          },
-          cellSize: 40,
-          range: '2017-02',
-        },
-        {
-          orient: 'vertical',
-          yearLabel: {
-            margin: 40,
-          },
-          monthLabel: {
-            margin: 20,
-          },
-          cellSize: 40,
-          left: 460,
-          range: '2017-01',
-        },
-        {
-          orient: 'vertical',
-          yearLabel: {
-            margin: 40,
-          },
-          monthLabel: {
-            margin: 20,
-          },
-          cellSize: 40,
-          top: 350,
-          range: '2017-03',
-        },
-        {
-          orient: 'vertical',
-          yearLabel: {
-            margin: 40,
-          },
-          dayLabel: {
-            firstDay: 1,
-            nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
-          },
-          monthLabel: {
-            nameMap: 'cn',
-            margin: 20,
-          },
-          cellSize: 40,
-          top: 350,
-          left: 460,
-          range: '2017-04',
-        }],
-
-      series: [{
-        type: 'graph',
-        edgeSymbol: ['none', 'arrow'],
-        coordinateSystem: 'calendar',
-        links,
-        symbolSize: 10,
-        calendarIndex: 0,
-        data: graphData,
-      }, {
-        type: 'heatmap',
-        coordinateSystem: 'calendar',
-        data: this.getVirtulData(2017),
-      }, {
-        type: 'effectScatter',
-        coordinateSystem: 'calendar',
-        calendarIndex: 1,
-        symbolSize (val) {
-          return val[1] / 40
-        },
-        data: this.getVirtulData(2017),
-      }, {
-        type: 'scatter',
-        coordinateSystem: 'calendar',
-        calendarIndex: 2,
-        symbolSize (val) {
-          return val[1] / 60
-        },
-        data: this.getVirtulData(2017),
-      }, {
-        type: 'heatmap',
-        coordinateSystem: 'calendar',
-        calendarIndex: 3,
-        data: this.getVirtulData(2017),
-      }],
+  let links = graphData.map((item, idx) => {
+    return {
+      source: idx,
+      target: idx + 1,
    }
-    return option
-  },
-  render () {
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> render a calendar-charts </label>
-          <ReactEcharts
-            option={this.getOtion()}
-            style={{ height: '700px', width: '100%' }}
-            className="react_for_echarts"
-          />
-        </div>
+  })
+  links.pop()
+
+  const option = {
+    tooltip: {
+      position: 'top',
+    },
+    visualMap: [{
+      min: 0,
+      max: 1000,
+      calculable: true,
+      seriesIndex: [2, 3, 4],
+      orient: 'horizontal',
+      left: '55%',
+      bottom: 20,
+    }, {
+      min: 0,
+      max: 1000,
+      inRange: {
+        color: ['grey'],
+        opacity: [0, 0.3],
+      },
+      controller: {
+        inRange: {
+          opacity: [0.3, 0.6],
+        },
+        outOfRange: {
+          color: '#ccc',
+        },
+      },
+      calculable: true,
+      seriesIndex: [1],
+      orient: 'horizontal',
+      left: '10%',
+      bottom: 20,
+    }],
+
+    calendar: [
+      {
+        orient: 'vertical',
+        yearLabel: {
+          margin: 40,
+        },
+        monthLabel: {
+          nameMap: 'cn',
+          margin: 20,
+        },
+        dayLabel: {
+          firstDay: 1,
+          nameMap: 'cn',
+        },
+        cellSize: 40,
+        range: '2017-02',
+      },
+      {
+        orient: 'vertical',
+        yearLabel: {
+          margin: 40,
+        },
+        monthLabel: {
+          margin: 20,
+        },
+        cellSize: 40,
+        left: 460,
+        range: '2017-01',
+      },
+      {
+        orient: 'vertical',
+        yearLabel: {
+          margin: 40,
+        },
+        monthLabel: {
+          margin: 20,
+        },
+        cellSize: 40,
+        top: 350,
+        range: '2017-03',
+      },
+      {
+        orient: 'vertical',
+        yearLabel: {
+          margin: 40,
+        },
+        dayLabel: {
+          firstDay: 1,
+          nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+        },
+        monthLabel: {
+          nameMap: 'cn',
+          margin: 20,
+        },
+        cellSize: 40,
+        top: 350,
+        left: 460,
+        range: '2017-04',
+      }],
+
+    series: [{
+      type: 'graph',
+      edgeSymbol: ['none', 'arrow'],
+      coordinateSystem: 'calendar',
+      links,
+      symbolSize: 10,
+      calendarIndex: 0,
+      data: graphData,
+    }, {
+      type: 'heatmap',
+      coordinateSystem: 'calendar',
+      data: getVirtulData(2017),
+    }, {
+      type: 'effectScatter',
+      coordinateSystem: 'calendar',
+      calendarIndex: 1,
+      symbolSize (val) {
+        return val[1] / 40
+      },
+      data: getVirtulData(2017),
+    }, {
+      type: 'scatter',
+      coordinateSystem: 'calendar',
+      calendarIndex: 2,
+      symbolSize (val) {
+        return val[1] / 60
+      },
+      data: getVirtulData(2017),
+    }, {
+      type: 'heatmap',
+      coordinateSystem: 'calendar',
+      calendarIndex: 3,
+      data: getVirtulData(2017),
+    }],
+  }
+
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> render a calendar-charts </label>
+        <ReactEcharts
+          option={option}
+          style={{ height: '700px', width: '100%' }}
+          className="react_for_echarts"
+        />
      </div>
-    )
-  },
-})
+    </div>
+  )
+}

 export default CalendarComponent
@@ -1,10 +1,8 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'

-const ChartAPIComponent = React.createClass({
-  propTypes: {
-  },
-  getOtion () {
+class ChartAPIComponent extends React.Component {
+  render () {
    const option = {
      title: {
        text: '漏斗图',
@@ -94,9 +92,6 @@ const ChartAPIComponent = React.createClass({
      ],
    }

-    return option
-  },
-  render () {
    let code = '<ReactEcharts ref={(e) => { this.echarts_react = e; }} \n' +
                    '    option={this.getOtion()} /> \n' +
                    '\n' +
@@ -107,7 +102,7 @@ const ChartAPIComponent = React.createClass({
        <div className="parent">
          <label> use echarts API With <strong> getEchartsInstance() </strong>: (the API will return the echarts instance, then you can use any API of echarts.)</label>
          <ReactEcharts ref={(e) => { this.echarts_react = e }}
-            option={this.getOtion()}
+            option={option}
          />
          <label> code below: (echarts API list see: http://echarts.baidu.com/api.html#echartsInstance)</label>
          <pre>
@@ -116,7 +111,7 @@ const ChartAPIComponent = React.createClass({
        </div>
      </div>
    )
-  },
-})
+  }
+}

 export default ChartAPIComponent
@@ -1,67 +1,70 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'

-const ChartShowLoadingComponent = React.createClass({
-  propTypes: {
-  },
+class ChartShowLoadingComponent extends React.Component {
+  constructor () {
+    super()
+    this._t = null
+    this.onChartReady = this.onChartReady.bind(this)
+  }
  componentWillUnmount () {
    clearTimeout(this._t)
-  },
+  }
+
  onChartReady (chart) {
    this._t = setTimeout(() => {
      chart.hideLoading()
    }, 3000)
-  },
-  getOtion () {
-    const option = {
-      title: {
-        text: '基础雷达图',
-      },
-      tooltip: {},
-      legend: {
-        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
-      },
-      radar: {
-        // shape: 'circle',
-        indicator: [
-          { name: '销售（sales）', max: 6500 },
-          { name: '管理（Administration）', max: 16000 },
-          { name: '信息技术（Information Techology）', max: 30000 },
-          { name: '客服（Customer Support）', max: 38000 },
-          { name: '研发（Development）', max: 52000 },
-          { name: '市场（Marketing）', max: 25000 },
-        ],
-      },
-      series: [{
-        name: '预算 vs 开销（Budget vs spending）',
-        type: 'radar',
-        // areaStyle: {normal: {}},
-        data: [
-          {
-            value: [4300, 10000, 28000, 35000, 50000, 19000],
-            name: '预算分配（Allocated Budget）',
-          },
-          {
-            value: [5000, 14000, 28000, 31000, 42000, 21000],
-            name: '实际开销（Actual Spending）',
-          },
-        ],
-      }],
-    }
-    return option
-  },
-  getLoadingOption () {
-    const option = {
-      text: '加载中...',
-      color: '#4413c2',
-      textColor: '#270240',
-      maskColor: 'rgba(194, 88, 86, 0.3)',
-      zlevel: 0,
-    }
-    return option
-  },
-  _t: null,
+  }
+
  render () {
+    const getOtion = () => {
+      const option = {
+        title: {
+          text: '基础雷达图',
+        },
+        tooltip: {},
+        legend: {
+          data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+        },
+        radar: {
+          indicator: [
+            { name: '销售（sales）', max: 6500 },
+            { name: '管理（Administration）', max: 16000 },
+            { name: '信息技术（Information Techology）', max: 30000 },
+            { name: '客服（Customer Support）', max: 38000 },
+            { name: '研发（Development）', max: 52000 },
+            { name: '市场（Marketing）', max: 25000 },
+          ],
+        },
+        series: [{
+          name: '预算 vs 开销（Budget vs spending）',
+          type: 'radar',
+          data: [
+            {
+              value: [4300, 10000, 28000, 35000, 50000, 19000],
+              name: '预算分配（Allocated Budget）',
+            },
+            {
+              value: [5000, 14000, 28000, 31000, 42000, 21000],
+              name: '实际开销（Actual Spending）',
+            },
+          ],
+        }],
+      }
+      return option
+    }
+    const getLoadingOption = () => {
+      const option = {
+        text: '加载中...',
+        color: '#4413c2',
+        textColor: '#270240',
+        maskColor: 'rgba(194, 88, 86, 0.3)',
+        zlevel: 0,
+      }
+      return option
+    }
+
    let code = 'onChartReady: function(chart) {\n' +
                   "  'chart.hideLoading();\n" +
                   '}\n\n' +
@@ -76,9 +79,9 @@ const ChartShowLoadingComponent = React.createClass({
        <div className="parent">
          <label> Chart loading With <strong> showLoading </strong>: (when chart ready, hide the loading mask.)</label>
          <ReactEcharts
-            option={this.getOtion()}
+            option={getOtion()}
            onChartReady={this.onChartReady}
-            loadingOption={this.getLoadingOption()}
+            loadingOption={getLoadingOption()}
            showLoading
          />
          <label> code below: </label>
@@ -88,7 +91,7 @@ const ChartShowLoadingComponent = React.createClass({
        </div>
      </div>
    )
-  },
-})
+  }
+}

 export default ChartShowLoadingComponent
@@ -1,19 +1,17 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'

-const ChartWithEventComponent = React.createClass({
-  propTypes: {
-  },
-  onChartReady (echart) {
+const ChartWithEventComponent = () => {
+  const onChartReady = (echart) => {
    console.log('echart is ready', echart)
-  },
-  onChartLegendselectchanged (param, echart) {
+  }
+  const onChartLegendselectchanged = (param, echart) => {
    console.log(param, echart)
-  },
-  onChartClick (param, echart) {
+  }
+  const onChartClick = (param, echart) => {
    console.log(param, echart)
-  },
-  getOtion () {
+  }
+  const getOtion = () => {
    const option = {
      title: {
        text: '某站点用户访问来源',
@@ -53,40 +51,39 @@ const ChartWithEventComponent = React.createClass({
      ],
    }
    return option
-  },
-  render () {
-    let onEvents = {
-      click: this.onChartClick,
-      legendselectchanged: this.onChartLegendselectchanged,
-    }
-    let code = 'let onEvents = {\n' +
-                   "  'click': this.onChartClick,\n" +
-                   "  'legendselectchanged': this.onChartLegendselectchanged\n" +
+  }
+
+  let onEvents = {
+    click: onChartClick,
+    legendselectchanged: onChartLegendselectchanged,
+  }
+  let code = 'let onEvents = {\n' +
+                   "  'click': onChartClick,\n" +
+                   "  'legendselectchanged': onChartLegendselectchanged\n" +
                   '}\n\n' +
                   '<ReactEcharts \n' +
-                    '    option={this.getOtion()} \n' +
+                    '    option={getOtion()} \n' +
                    '    style={{height: 300}} \n' +
-                    '    onChartReady={this.onChartReady} \n' +
+                    '    onChartReady={onChartReady} \n' +
                    '    onEvents={onEvents} />'

-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> Chart With event <strong> onEvents </strong>: (Click the chart, and watch the console)</label>
-          <ReactEcharts
-            option={this.getOtion()}
-            style={{ height: 300 }}
-            onChartReady={this.onChartReady}
-            onEvents={onEvents}
-          />
-          <label> code below: </label>
-          <pre>
-            <code>{code}</code>
-          </pre>
-        </div>
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> Chart With event <strong> onEvents </strong>: (Click the chart, and watch the console)</label>
+        <ReactEcharts
+          option={getOtion()}
+          style={{ height: 300 }}
+          onChartReady={onChartReady}
+          onEvents={onEvents}
+        />
+        <label> code below: </label>
+        <pre>
+          <code>{code}</code>
+        </pre>
      </div>
-    )
-  },
-})
+    </div>
+  )
+}

 export default ChartWithEventComponent
@@ -1,43 +1,12 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'

-const DynamicChartComponent = React.createClass({
-  propTypes: {
-  },
-  timeTicket: null,
-  count: 51,
-  getInitialState () {
-    return { option: this.getOption() }
-  },
-  fetchNewDate () {
-    let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '')
-    let option = this.state.option
-    option.title.text = `Hello Echarts-for-react.${new Date().getSeconds()}`
-    let data0 = option.series[0].data
-    let data1 = option.series[1].data
-    data0.shift()
-    data0.push(Math.round(Math.random() * 1000))
-    data1.shift()
-    data1.push((Math.random() * 10 + 5).toFixed(1) - 0)
+class DynamicChartComponent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.timeTicket = null
+    this.count = 51

-    option.xAxis[0].data.shift()
-    option.xAxis[0].data.push(axisData)
-    option.xAxis[1].data.shift()
-    option.xAxis[1].data.push(this.count += 1)
-    this.setState({ option })
-  },
-  componentDidMount () {
-    if (this.timeTicket) {
-      clearInterval(this.timeTicket)
-    }
-    this.timeTicket = setInterval(this.fetchNewDate, 1000)
-  },
-  componentWillUnmount () {
-    if (this.timeTicket) {
-      clearInterval(this.timeTicket)
-    }
-  },
-  getOption () {
    const option = {
      title: {
        text: 'Hello Echarts-for-react.',
@@ -164,8 +133,44 @@ const DynamicChartComponent = React.createClass({
      ],
    }

-    return option
-  },
+    this.state = {
+      option,
+    }
+
+    this.fetchNewDate = this.fetchNewDate.bind(this)
+  }
+
+  fetchNewDate () {
+    let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '')
+    let { option } = this.state
+    option.title.text = `Hello Echarts-for-react.${new Date().getSeconds()}`
+    let data0 = option.series[0].data
+    let data1 = option.series[1].data
+    data0.shift()
+    data0.push(Math.round(Math.random() * 1000))
+    data1.shift()
+    data1.push((Math.random() * 10 + 5).toFixed(1) - 0)
+
+    option.xAxis[0].data.shift()
+    option.xAxis[0].data.push(axisData)
+    option.xAxis[1].data.shift()
+    option.xAxis[1].data.push(this.count += 1)
+    this.setState({ option })
+  }
+
+  componentDidMount () {
+    if (this.timeTicket) {
+      clearInterval(this.timeTicket)
+    }
+    this.timeTicket = setInterval(this.fetchNewDate, 1000)
+  }
+
+  componentWillUnmount () {
+    if (this.timeTicket) {
+      clearInterval(this.timeTicket)
+    }
+  }
+
  render () {
    let code = "<ReactEcharts ref='echartsInstance' \n" +
                    '    option={this.state.option} />\n'
@@ -184,7 +189,7 @@ const DynamicChartComponent = React.createClass({
        </div>
      </div>
    )
-  },
-})
+  }
+}

 export default DynamicChartComponent
@@ -2,8 +2,8 @@ import React from 'react'
 import ReactEcharts from 'echarts-for-react'
 import echarts from 'echarts'

-const GCalendarComponent = React.createClass({
-  getVirtulData (year) {
+const GCalendarComponent = () => {
+  const getVirtulData = (year) => {
    year = year || '2017'
    let date = +echarts.number.parseDate(`${year}-01-01`)
    let end = +echarts.number.parseDate(`${+year + 1}-01-01`)
@@ -16,58 +16,55 @@ const GCalendarComponent = React.createClass({
      ])
    }
    return data
-  },
-  getOtion () {
-    const option = {
-      tooltip: {
-        position: 'top',
-      },
-      visualMap: {
-        min: 0,
-        max: 1000,
-        calculable: true,
-        orient: 'horizontal',
-        left: 'center',
-        top: 'top',
-      },
+  }

-      calendar: [{
-        range: '2017',
-        cellSize: ['auto', 20],
-      }, {
-        top: 260,
-        range: '2016',
-        cellSize: ['auto', 20],
-      }],
+  const option = {
+    tooltip: {
+      position: 'top',
+    },
+    visualMap: {
+      min: 0,
+      max: 1000,
+      calculable: true,
+      orient: 'horizontal',
+      left: 'center',
+      top: 'top',
+    },

-      series: [{
-        type: 'heatmap',
-        coordinateSystem: 'calendar',
-        calendarIndex: 0,
-        data: this.getVirtulData(2017),
-      }, {
-        type: 'heatmap',
-        coordinateSystem: 'calendar',
-        calendarIndex: 1,
-        data: this.getVirtulData(2016),
-      }],
-    }
-    return option
-  },
-  render () {
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> render a calendar like github commit history. </label>
-          <ReactEcharts
-            option={this.getOtion()}
-            style={{ height: '500px', width: '100%' }}
-            className="react_for_echarts"
-          />
-        </div>
+    calendar: [{
+      range: '2017',
+      cellSize: ['auto', 20],
+    }, {
+      top: 260,
+      range: '2016',
+      cellSize: ['auto', 20],
+    }],
+
+    series: [{
+      type: 'heatmap',
+      coordinateSystem: 'calendar',
+      calendarIndex: 0,
+      data: getVirtulData(2017),
+    }, {
+      type: 'heatmap',
+      coordinateSystem: 'calendar',
+      calendarIndex: 1,
+      data: getVirtulData(2016),
+    }],
+  }
+
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> render a calendar like github commit history. </label>
+        <ReactEcharts
+          option={option}
+          style={{ height: '500px', width: '100%' }}
+          className="react_for_echarts"
+        />
      </div>
-    )
-  },
-})
+    </div>
+  )
+}

 export default GCalendarComponent
@@ -1,30 +1,10 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'

-const GaugeComponent = React.createClass({
-  getInitialState () {
-    return { option: this.getOtion() }
-  },
-  componentDidMount () {
-    if (this.timeTicket) {
-      clearInterval(this.timeTicket)
-    }
-    this.timeTicket = setInterval(() => {
-      let option = this.state.option
-      option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
-      option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0
-      option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0
-      option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0
-      this.setState({ option })
-    }, 1000)
-  },
-  componentWillUnmount () {
-    if (this.timeTicket) {
-      clearInterval(this.timeTicket)
-    }
-  },
-  getOtion () {
-    let option = {
+class GaugeComponent extends React.Component {
+  constructor () {
+    super()
+    const option = {
      backgroundColor: '#1b1b1b',
      tooltip: {
        formatter: '{a} <br/>{c} {b}',
@@ -214,10 +194,10 @@ const GaugeComponent = React.createClass({
            },
            formatter (v) {
              switch (`${v}`) {
-                case '0' : return 'E'
-                case '1' : return 'Gas'
-                case '2' : return 'F'
-                default : return null
+                case '0': return 'E'
+                case '1': return 'Gas'
+                case '2': return 'F'
+                default: return null
              }
            },
          },
@@ -273,10 +253,10 @@ const GaugeComponent = React.createClass({
            },
            formatter (v) {
              switch (`${v}`) {
-                case '0' : return 'H'
-                case '1' : return 'Water'
-                case '2' : return 'C'
-                default : return null
+                case '0': return 'H'
+                case '1': return 'Water'
+                case '2': return 'C'
+                default: return null
              }
            },
          },
@@ -304,9 +284,31 @@ const GaugeComponent = React.createClass({
        },
      ],
    }
-    return option
-  },
-  timeTicket: null,
+    this.state = {
+      option,
+    }
+  }
+
+  componentDidMount () {
+    if (this.timeTicket) {
+      clearInterval(this.timeTicket)
+    }
+    this.timeTicket = setInterval(() => {
+      let { option } = this.state
+      option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0
+      option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0
+      option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0
+      option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0
+      this.setState({ option })
+    }, 1000)
+  }
+
+  componentWillUnmount () {
+    if (this.timeTicket) {
+      clearInterval(this.timeTicket)
+    }
+  }
+
  render () {
    return (
      <div className="examples">
@@ -320,7 +322,7 @@ const GaugeComponent = React.createClass({
        </div>
      </div>
    )
-  },
-})
+  }
+}

 export default GaugeComponent
@@ -3,32 +3,29 @@ import ReactEcharts from 'echarts-for-react'

 require('echarts-liquidfill')

-const LiquidfillComponent = React.createClass({
-  propTypes: {
-  },
-  getOption () {
-    let option = {
-      series: [{
+const LiquidfillComponent = () => {
+  const option = {
+    series: [
+      {
        type: 'liquidFill',
        data: [0.6],
-      }],
-    }
-    return option
-  },
-  render () {
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> render a Liquidfill chart: </label>
-          <ReactEcharts
-            option={this.getOption()}
-            style={{ height: '400px', width: '100%' }}
-            className="react_for_echarts"
-          />
-        </div>
-      </div>
-    )
-  },
-})
+      },
+    ],
+  }
+  return (<div className="examples">
+    <div className="parent">
+      <label>
+        render a Liquidfill chart:
+      </label>
+      <ReactEcharts option={option}
+        style={{
+          height: '400px',
+          width: '100%',
+        }}
+        className="react_for_echarts"
+      />
+    </div>
+  </div>)
+}

 export default LiquidfillComponent
@@ -2,8 +2,8 @@ import React from 'react'
 import ReactEcharts from 'echarts-for-react'
 import echarts from 'echarts'

-const LunarCalendarComponent = React.createClass({
-  getOtion () {
+const LunarCalendarComponent = () => {
+  const getOtion = () => {
    let dateList = [
      ['2017-1-1', '初四'],
      ['2017-1-2', '初五'],
@@ -473,21 +473,20 @@ const LunarCalendarComponent = React.createClass({
      }],
    }
    return option
-  },
-  render () {
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> render a lunar calendar chart. </label>
-          <ReactEcharts
-            option={this.getOtion()}
-            style={{ height: '500px', width: '100%' }}
-            className="react_for_echarts"
-          />
-        </div>
+  }
+
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> render a lunar calendar chart. </label>
+        <ReactEcharts
+          option={getOtion()}
+          style={{ height: '500px', width: '100%' }}
+          className="react_for_echarts"
+        />
      </div>
-    )
-  },
-})
+    </div>
+  )
+}

 export default LunarCalendarComponent
@@ -4,45 +4,41 @@ import { Link } from 'react-router'
 import DynamicChartComponent from './DynamicChartComponent.js'


-const MainPageComponent = React.createClass({
-  propTypes: {
-  },
-  render () {
-    return (
-      <div>
-        <h1> echarts-for-react {this.props.params.type} </h1>
-        <h3> A very simple echarts(v3.0) wrapper for React. <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a></h3>
+const MainPageComponent = () => {
+  return (
+    <div>
+      <h1> echarts-for-react {this.props.params.type} </h1>
+      <h3> A very simple echarts(v3.0) wrapper for React. <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a></h3>

-        <AdSense.Google client="ca-pub-7292810486004926"
-          slot="7806394673"
-        />
+      <AdSense.Google client="ca-pub-7292810486004926"
+        slot="7806394673"
+      />

-        <h4>
-          <Link to="/echarts/simple">Simple demo</Link> |
-          <Link to="/echarts/loading">Echarts loading</Link> |
-          <Link to="/echarts/api">Echarts API</Link> |
-          <Link to="/echarts/events">Echarts events</Link> |
-          <Link to="/echarts/theme">Echarts theme</Link> |
-          <Link to="/echarts/dynamic">Dynamic chart</Link> |
-          <Link to="/echarts/map">Map chart</Link>
-        </h4>
-        <h4>
-          <span style={{ color: 'red' }}>New</span>:&nbsp;&nbsp;
-          <Link to="/echarts/airport">Airport</Link> |
-          <Link to="/echarts/graph">Graph</Link> |
-          <Link to="/echarts/calendar">Calendar</Link> |
-          <Link to="/echarts/treemap">Treemap</Link> |
-          <Link to="/echarts/gauge">Gauge</Link> |
-          <Link to="/echarts/gcalendar">GCalendar</Link> |
-          <Link to="/echarts/lunar">Lunar</Link> |
-          <Link to="/echarts/liquid">Liquidfill</Link>
-        </h4>
-        {this.props.children || <DynamicChartComponent />}
+      <h4>
+        <Link to="/echarts/simple">Simple demo</Link> |
+        <Link to="/echarts/loading">Echarts loading</Link> |
+        <Link to="/echarts/api">Echarts API</Link> |
+        <Link to="/echarts/events">Echarts events</Link> |
+        <Link to="/echarts/theme">Echarts theme</Link> |
+        <Link to="/echarts/dynamic">Dynamic chart</Link> |
+        <Link to="/echarts/map">Map chart</Link>
+      </h4>
+      <h4>
+        <span style={{ color: 'red' }}>New</span>:&nbsp;&nbsp;
+        <Link to="/echarts/airport">Airport</Link> |
+        <Link to="/echarts/graph">Graph</Link> |
+        <Link to="/echarts/calendar">Calendar</Link> |
+        <Link to="/echarts/treemap">Treemap</Link> |
+        <Link to="/echarts/gauge">Gauge</Link> |
+        <Link to="/echarts/gcalendar">GCalendar</Link> |
+        <Link to="/echarts/lunar">Lunar</Link> |
+        <Link to="/echarts/liquid">Liquidfill</Link>
+      </h4>
+      {this.props.children || <DynamicChartComponent />}

-        <h3>Get it on GitHub! <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a></h3>
-      </div>
-    )
-  },
-})
+      <h3>Get it on GitHub! <a href="https://github.com/hustcc/echarts-for-react">hustcc/echarts-for-react</a></h3>
+    </div>
+  )
+}

 export default MainPageComponent
@@ -3,31 +3,13 @@ import ReactEcharts from 'echarts-for-react'

 require('echarts/map/js/china.js')

-const MapChartComponent = React.createClass({
-  propTypes: {
-  },
-  getInitialState () {
-    return { option: this.getOtion() }
-  },
-  componentDidMount () {
-    if (this.timeTicket) {
-      clearInterval(this.timeTicket)
+class MapChartComponent extends React.Component {
+  constructor () {
+    super()
+    this.timeTicket = null
+    const randomData = () => {
+      return Math.round(Math.random() * 1000)
    }
-    this.timeTicket = setInterval(() => {
-      const option = this.state.option
-      const r = new Date().getSeconds()
-      option.title.text = `iphone销量${r}`
-      option.series[0].name = `iphone销量${r}`
-      option.legend.data[0] = `iphone销量${r}`
-      this.setState({ option })
-    }, 1000)
-  },
-  componentWillUnmount () {
-    if (this.timeTicket) {
-      clearInterval(this.timeTicket)
-    }
-  },
-  getOtion () {
    const option = {
      title: {
        text: 'iphone销量',
@@ -76,40 +58,40 @@ const MapChartComponent = React.createClass({
            },
          },
          data: [
-            { name: '北京', value: this.randomData() },
-            { name: '天津', value: this.randomData() },
-            { name: '上海', value: this.randomData() },
-            { name: '重庆', value: this.randomData() },
-            { name: '河北', value: this.randomData() },
-            { name: '河南', value: this.randomData() },
-            { name: '云南', value: this.randomData() },
-            { name: '辽宁', value: this.randomData() },
-            { name: '黑龙江', value: this.randomData() },
-            { name: '湖南', value: this.randomData() },
-            { name: '安徽', value: this.randomData() },
-            { name: '山东', value: this.randomData() },
-            { name: '新疆', value: this.randomData() },
-            { name: '江苏', value: this.randomData() },
-            { name: '浙江', value: this.randomData() },
-            { name: '江西', value: this.randomData() },
-            { name: '湖北', value: this.randomData() },
-            { name: '广西', value: this.randomData() },
-            { name: '甘肃', value: this.randomData() },
-            { name: '山西', value: this.randomData() },
-            { name: '内蒙古', value: this.randomData() },
-            { name: '陕西', value: this.randomData() },
-            { name: '吉林', value: this.randomData() },
-            { name: '福建', value: this.randomData() },
-            { name: '贵州', value: this.randomData() },
-            { name: '广东', value: this.randomData() },
-            { name: '青海', value: this.randomData() },
-            { name: '西藏', value: this.randomData() },
-            { name: '四川', value: this.randomData() },
-            { name: '宁夏', value: this.randomData() },
-            { name: '海南', value: this.randomData() },
-            { name: '台湾', value: this.randomData() },
-            { name: '香港', value: this.randomData() },
-            { name: '澳门', value: this.randomData() },
+            { name: '北京', value: randomData() },
+            { name: '天津', value: randomData() },
+            { name: '上海', value: randomData() },
+            { name: '重庆', value: randomData() },
+            { name: '河北', value: randomData() },
+            { name: '河南', value: randomData() },
+            { name: '云南', value: randomData() },
+            { name: '辽宁', value: randomData() },
+            { name: '黑龙江', value: randomData() },
+            { name: '湖南', value: randomData() },
+            { name: '安徽', value: randomData() },
+            { name: '山东', value: randomData() },
+            { name: '新疆', value: randomData() },
+            { name: '江苏', value: randomData() },
+            { name: '浙江', value: randomData() },
+            { name: '江西', value: randomData() },
+            { name: '湖北', value: randomData() },
+            { name: '广西', value: randomData() },
+            { name: '甘肃', value: randomData() },
+            { name: '山西', value: randomData() },
+            { name: '内蒙古', value: randomData() },
+            { name: '陕西', value: randomData() },
+            { name: '吉林', value: randomData() },
+            { name: '福建', value: randomData() },
+            { name: '贵州', value: randomData() },
+            { name: '广东', value: randomData() },
+            { name: '青海', value: randomData() },
+            { name: '西藏', value: randomData() },
+            { name: '四川', value: randomData() },
+            { name: '宁夏', value: randomData() },
+            { name: '海南', value: randomData() },
+            { name: '台湾', value: randomData() },
+            { name: '香港', value: randomData() },
+            { name: '澳门', value: randomData() },
          ],
        },
        {
@@ -125,25 +107,25 @@ const MapChartComponent = React.createClass({
            },
          },
          data: [
-            { name: '北京', value: this.randomData() },
-            { name: '天津', value: this.randomData() },
-            { name: '上海', value: this.randomData() },
-            { name: '重庆', value: this.randomData() },
-            { name: '河北', value: this.randomData() },
-            { name: '安徽', value: this.randomData() },
-            { name: '新疆', value: this.randomData() },
-            { name: '浙江', value: this.randomData() },
-            { name: '江西', value: this.randomData() },
-            { name: '山西', value: this.randomData() },
-            { name: '内蒙古', value: this.randomData() },
-            { name: '吉林', value: this.randomData() },
-            { name: '福建', value: this.randomData() },
-            { name: '广东', value: this.randomData() },
-            { name: '西藏', value: this.randomData() },
-            { name: '四川', value: this.randomData() },
-            { name: '宁夏', value: this.randomData() },
-            { name: '香港', value: this.randomData() },
-            { name: '澳门', value: this.randomData() },
+            { name: '北京', value: randomData() },
+            { name: '天津', value: randomData() },
+            { name: '上海', value: randomData() },
+            { name: '重庆', value: randomData() },
+            { name: '河北', value: randomData() },
+            { name: '安徽', value: randomData() },
+            { name: '新疆', value: randomData() },
+            { name: '浙江', value: randomData() },
+            { name: '江西', value: randomData() },
+            { name: '山西', value: randomData() },
+            { name: '内蒙古', value: randomData() },
+            { name: '吉林', value: randomData() },
+            { name: '福建', value: randomData() },
+            { name: '广东', value: randomData() },
+            { name: '西藏', value: randomData() },
+            { name: '四川', value: randomData() },
+            { name: '宁夏', value: randomData() },
+            { name: '香港', value: randomData() },
+            { name: '澳门', value: randomData() },
          ],
        },
        {
@@ -159,23 +141,42 @@ const MapChartComponent = React.createClass({
            },
          },
          data: [
-            { name: '北京', value: this.randomData() },
-            { name: '天津', value: this.randomData() },
-            { name: '上海', value: this.randomData() },
-            { name: '广东', value: this.randomData() },
-            { name: '台湾', value: this.randomData() },
-            { name: '香港', value: this.randomData() },
-            { name: '澳门', value: this.randomData() },
+            { name: '北京', value: randomData() },
+            { name: '天津', value: randomData() },
+            { name: '上海', value: randomData() },
+            { name: '广东', value: randomData() },
+            { name: '台湾', value: randomData() },
+            { name: '香港', value: randomData() },
+            { name: '澳门', value: randomData() },
          ],
        },
      ],
    }
-    return option
-  },
-  randomData () {
-    return Math.round(Math.random() * 1000)
-  },
-  timeTicket: null,
+    this.state = {
+      option,
+    }
+  }
+
+  componentDidMount () {
+    if (this.timeTicket) {
+      clearInterval(this.timeTicket)
+    }
+    this.timeTicket = setInterval(() => {
+      const { option } = this.state
+      const r = new Date().getSeconds()
+      option.title.text = `iphone销量${r}`
+      option.series[0].name = `iphone销量${r}`
+      option.legend.data[0] = `iphone销量${r}`
+      this.setState({ option })
+    }, 1000)
+  }
+
+  componentWillUnmount () {
+    if (this.timeTicket) {
+      clearInterval(this.timeTicket)
+    }
+  }
+
  render () {
    let code = "require('echarts/map/js/china.js'); \n" +
                    '<ReactEcharts \n' +
@@ -198,7 +199,7 @@ const MapChartComponent = React.createClass({
        </div>
      </div>
    )
-  },
-})
+  }
+}

 export default MapChartComponent
@@ -1,55 +1,43 @@
 import React from 'react'
 import ReactEcharts from 'echarts-for-react'

-// require.config({
-//     paths: {
-//         echarts:'../node_modules/echarts',
-//     }
-// });
+const ModuleLoadChartComponent = () => {
+  const option = {
+    title: { text: 'ECharts 入门示例' },
+    tooltip: {},
+    xAxis: {
+      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+    },
+    yAxis: {},
+    series: [{
+      name: '销量',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20],
+    }],
+  }

-const ModuleLoadChartComponent = React.createClass({
-  propTypes: {
-  },
-  getOtion () {
-    const option = {
-      title: { text: 'ECharts 入门示例' },
-      tooltip: {},
-      xAxis: {
-        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
-      },
-      yAxis: {},
-      series: [{
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20],
-      }],
-    }
-    return option
-  },
-  render () {
-    let code = '<ReactEcharts \n' +
+  let code = '<ReactEcharts \n' +
                    '    option={this.getOtion()} \n' +
                    "    style={{height: '350px', width: '100%'}}  \n" +
                    "    modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']} \n" +
                    "    className='react_for_echarts' />"
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> load echarts module as you wish <strong>reduce the file size</strong>: </label>
-          <ReactEcharts
-            option={this.getOtion()}
-            style={{ height: '350px', width: '100%' }}
-            modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']}
-            className="react_for_echarts"
-          />
-          <label> code below: </label>
-          <pre>
-            <code>{code}</code>
-          </pre>
-        </div>
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> load echarts module as you wish <strong>reduce the file size</strong>: </label>
+        <ReactEcharts
+          option={option}
+          style={{ height: '350px', width: '100%' }}
+          modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']}
+          className="react_for_echarts"
+        />
+        <label> code below: </label>
+        <pre>
+          <code>{code}</code>
+        </pre>
      </div>
-    )
-  },
-})
+    </div>
+  )
+}

 export default ModuleLoadChartComponent
@@ -4,13 +4,13 @@ import 'echarts-gl'

 const option = {
  globe: {
-    baseTexture: '/asset/data-1493804606544-r1PBU7D1W.jpg',
-    heightTexture: '/asset/data-1493804610896-SJoBIXPkW.jpg',
+    baseTexture: '/assets/data-1493804606544-r1PBU7D1W.jpg',
+    heightTexture: '/assets/data-1493804610896-SJoBIXPkW.jpg',

    displacementScale: 0.05,
    displacementQuality: 'medium',

-    environment: '/asset/data-1491837999815-H1_44Qtal.jpg',
+    environment: '/assets/data-1491837999815-H1_44Qtal.jpg',

    shading: 'realistic',
    realisticMaterial: {
@@ -2,92 +2,86 @@ import React from 'react'
 import ReactEcharts from 'echarts-for-react'
 import './theme/macarons.js'

-const SimpleChartComponent = React.createClass({
-  propTypes: {
-  },
-  getOtion () {
-    const option = {
-      title: {
-        text: '堆叠区域图',
+const SimpleChartComponent = () => {
+  const option = {
+    title: {
+      text: '堆叠区域图',
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['邮件营销', '联盟广告', '视频广告'],
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
      },
-      tooltip: {
-        trigger: 'axis',
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
-      legend: {
-        data: ['邮件营销', '联盟广告', '视频广告'],
+    ],
+    yAxis: [
+      {
+        type: 'value',
      },
-      toolbox: {
-        feature: {
-          saveAsImage: {},
-        },
+    ],
+    series: [
+      {
+        name: '邮件营销',
+        type: 'line',
+        stack: '总量',
+        areaStyle: { normal: {} },
+        data: [120, 132, 101, 134, 90, 230, 210],
      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true,
+      {
+        name: '联盟广告',
+        type: 'line',
+        stack: '总量',
+        areaStyle: { normal: {} },
+        data: [220, 182, 191, 234, 290, 330, 310],
      },
-      xAxis: [
-        {
-          type: 'category',
-          boundaryGap: false,
-          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-        },
-      ],
-      yAxis: [
-        {
-          type: 'value',
-        },
-      ],
-      series: [
-        {
-          name: '邮件营销',
-          type: 'line',
-          stack: '总量',
-          areaStyle: { normal: {} },
-          data: [120, 132, 101, 134, 90, 230, 210],
-        },
-        {
-          name: '联盟广告',
-          type: 'line',
-          stack: '总量',
-          areaStyle: { normal: {} },
-          data: [220, 182, 191, 234, 290, 330, 310],
-        },
-        {
-          name: '视频广告',
-          type: 'line',
-          stack: '总量',
-          areaStyle: { normal: {} },
-          data: [150, 232, 201, 154, 190, 330, 410],
-        },
-      ],
-    }
-    return option
-  },
-  render () {
-    let code = '<ReactEcharts \n' +
+      {
+        name: '视频广告',
+        type: 'line',
+        stack: '总量',
+        areaStyle: { normal: {} },
+        data: [150, 232, 201, 154, 190, 330, 410],
+      },
+    ],
+  }
+  let code = '<ReactEcharts \n' +
                    '    option={this.getOtion()} \n' +
                    "    style={{height: '350px', width: '100%'}}  \n" +
                    "    className='react_for_echarts' />"
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> render a Simple echart With <strong>option and height</strong>: </label>
-          <ReactEcharts
-            option={this.getOtion()}
-            style={{ height: '350px', width: '100%' }}
-            className="react_for_echarts"
-            theme="macarons"
-          />
-          <label> code below: </label>
-          <pre>
-            <code>{code}</code>
-          </pre>
-        </div>
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> render a Simple echart With <strong>option and height</strong>: </label>
+        <ReactEcharts
+          option={option}
+          style={{ height: '350px', width: '100%' }}
+          className="react_for_echarts"
+          theme="macarons"
+        />
+        <label> code below: </label>
+        <pre>
+          <code>{code}</code>
+        </pre>
      </div>
-    )
-  },
-})
+    </div>
+  )
+}
+

 export default SimpleChartComponent
@@ -3,113 +3,106 @@ import ReactEcharts from 'echarts-for-react'

 import echarts from 'echarts'

-const ThemeChartComponent = React.createClass({
-  propTypes: {
-  },
-  getOtion () {
-    const option = {
-      title: {
-        text: '阶梯瀑布图',
-        subtext: 'From ExcelHome',
-        sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5',
+const ThemeChartComponent = () => {
+  const option = {
+    title: {
+      text: '阶梯瀑布图',
+      subtext: 'From ExcelHome',
+      sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: { // 坐标轴指示器，坐标轴触发有效
-          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
-        },
-      },
-      legend: {
-        data: ['支出', '收入'],
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true,
-      },
-      xAxis: {
-        type: 'category',
-        splitLine: { show: false },
-        data: ['11月1日', '11月2日', '11月3日', '11月4日', '11月5日', '11月6日', '11月7日', '11月8日', '11月9日', '11月10日', '11月11日'],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [
-        {
-          name: '辅助',
-          type: 'bar',
-          stack: '总量',
-          itemStyle: {
-            normal: {
-              barBorderColor: 'rgba(0,0,0,0)',
-              color: 'rgba(0,0,0,0)',
-            },
-            emphasis: {
-              barBorderColor: 'rgba(0,0,0,0)',
-              color: 'rgba(0,0,0,0)',
-            },
+    },
+    legend: {
+      data: ['支出', '收入'],
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      splitLine: { show: false },
+      data: ['11月1日', '11月2日', '11月3日', '11月4日', '11月5日', '11月6日', '11月7日', '11月8日', '11月9日', '11月10日', '11月11日'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        name: '辅助',
+        type: 'bar',
+        stack: '总量',
+        itemStyle: {
+          normal: {
+            barBorderColor: 'rgba(0,0,0,0)',
+            color: 'rgba(0,0,0,0)',
          },
-          data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
-        },
-        {
-          name: '收入',
-          type: 'bar',
-          stack: '总量',
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-            },
+          emphasis: {
+            barBorderColor: 'rgba(0,0,0,0)',
+            color: 'rgba(0,0,0,0)',
          },
-          data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
        },
-        {
-          name: '支出',
-          type: 'bar',
-          stack: '总量',
-          label: {
-            normal: {
-              show: true,
-              position: 'bottom',
-            },
+        data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
+      },
+      {
+        name: '收入',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
          },
-          data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
        },
-      ],
-    }
-    return option
-  },
-  registerTheme () {
-    echarts.registerTheme('my_theme', {
-      backgroundColor: '#f4cccc',
-    })
-  },
-  render () {
-    this.registerTheme()
-    let code = "echarts.registerTheme('my_theme', {\n" +
+        data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
+      },
+      {
+        name: '支出',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true,
+            position: 'bottom',
+          },
+        },
+        data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
+      },
+    ],
+  }
+
+
+  echarts.registerTheme('my_theme', {
+    backgroundColor: '#f4cccc',
+  })
+
+  let code = "echarts.registerTheme('my_theme', {\n" +
                   "  backgroundColor: '#f4cccc'\n" +
                   '});\n\n' +
                   '<ReactEcharts \n' +
                    '    option={this.getOtion()} \n' +
                    "    theme='my_theme' />"
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> render a echart With <strong>theme</strong>, should <strong>echarts.registerTheme(themeName, themeObj)</strong> before use.</label>
-          <ReactEcharts
-            option={this.getOtion()}
-            theme="my_theme"
-          />
-          <label> the theme object format: https://github.com/ecomfe/echarts/blob/master/theme/dark.js</label>
-          <pre>
-            <code>{code}</code>
-          </pre>
-        </div>
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> render a echart With <strong>theme</strong>, should <strong>echarts.registerTheme(themeName, themeObj)</strong> before use.</label>
+        <ReactEcharts
+          option={option}
+          theme="my_theme"
+        />
+        <label> the theme object format: https://github.com/ecomfe/echarts/blob/master/theme/dark.js</label>
+        <pre>
+          <code>{code}</code>
+        </pre>
      </div>
-    )
-  },
-})
+    </div>
+  )
+}

 export default ThemeChartComponent
@@ -2,265 +2,260 @@ import React from 'react'
 import ReactEcharts from 'echarts-for-react'
 import echarts from 'echarts'

-const TreemapComponent = React.createClass({
-  getOtion () {
-    let diskData = [
-      {
-        value: 180,
-        name: 'Accounts',
-        path: 'Accounts',
-        children: [
-          {
-            value: 76,
-            name: 'Access',
-            path: 'Accounts/Access',
-            children: [
-              {
-                value: 12,
-                name: 'DefaultAccessPlugin.bundle',
-                path: 'Accounts/Access/DefaultAccessPlugin.bundle',
-              },
-              {
-                value: 28,
-                name: 'FacebookAccessPlugin.bundle',
-                path: 'Accounts/Access/FacebookAccessPlugin.bundle',
-              },
-              {
-                value: 20,
-                name: 'LinkedInAccessPlugin.bundle',
-                path: 'Accounts/Access/LinkedInAccessPlugin.bundle',
-              },
-              {
-                value: 16,
-                name: 'TencentWeiboAccessPlugin.bundle',
-                path: 'Accounts/Access/TencentWeiboAccessPlugin.bundle',
-              },
-            ],
-          },
-          {
-            value: 92,
-            name: 'Authentication',
-            path: 'Accounts/Authentication',
-            children: [
-              {
-                value: 24,
-                name: 'FacebookAuthenticationPlugin.bundle',
-                path: 'Accounts/Authentication/FacebookAuthenticationPlugin.bundle',
-              },
-              {
-                value: 16,
-                name: 'LinkedInAuthenticationPlugin.bundle',
-                path: 'Accounts/Authentication/LinkedInAuthenticationPlugin.bundle',
-              },
-              {
-                value: 20,
-                name: 'TencentWeiboAuthenticationPlugin.bundle',
-                path: 'Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle',
-              },
-              {
-                value: 16,
-                name: 'TwitterAuthenticationPlugin.bundle',
-                path: 'Accounts/Authentication/TwitterAuthenticationPlugin.bundle',
-              },
-              {
-                value: 16,
-                name: 'WeiboAuthenticationPlugin.bundle',
-                path: 'Accounts/Authentication/WeiboAuthenticationPlugin.bundle',
-              },
-            ],
-          },
-          {
-            value: 12,
-            name: 'Notification',
-            path: 'Accounts/Notification',
-            children: [
-              {
-                value: 12,
-                name: 'SPAAccountsNotificationPlugin.bundle',
-                path: 'Accounts/Notification/SPAAccountsNotificationPlugin.bundle',
-              },
-            ],
-          },
-        ],
-      },
-      {
-        value: 1904,
-        name: 'AddressBook Plug-Ins',
-        path: 'AddressBook Plug-Ins',
-        children: [
-          {
-            value: 744,
-            name: 'CardDAVPlugin.sourcebundle',
-            path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle',
-            children: [
-              {
-                value: 744,
-                name: 'Contents',
-                path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents',
-              },
-            ],
-          },
-          {
-            value: 28,
-            name: 'DirectoryServices.sourcebundle',
-            path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle',
-            children: [
-              {
-                value: 28,
-                name: 'Contents',
-                path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents',
-              },
-            ],
-          },
-          {
-            value: 680,
-            name: 'Exchange.sourcebundle',
-            path: 'AddressBook Plug-Ins/Exchange.sourcebundle',
-            children: [
-              {
-                value: 680,
-                name: 'Contents',
-                path: 'AddressBook Plug-Ins/Exchange.sourcebundle/Contents',
-              },
-            ],
-          },
-          {
-            value: 432,
-            name: 'LDAP.sourcebundle',
-            path: 'AddressBook Plug-Ins/LDAP.sourcebundle',
-            children: [
-              {
-                value: 432,
-                name: 'Contents',
-                path: 'AddressBook Plug-Ins/LDAP.sourcebundle/Contents',
-              },
-            ],
-          },
-          {
-            value: 20,
-            name: 'LocalSource.sourcebundle',
-            path: 'AddressBook Plug-Ins/LocalSource.sourcebundle',
-            children: [
-              {
-                value: 20,
-                name: 'Contents',
-                path: 'AddressBook Plug-Ins/LocalSource.sourcebundle/Contents',
-              },
-            ],
-          },
-        ],
-      },
-      {
-        value: 36,
-        name: 'Assistant',
-        path: 'Assistant',
-        children: [
-          {
-            value: 36,
-            name: 'Plugins',
-            path: 'Assistant/Plugins',
-            children: [
-              {
-                value: 36,
-                name: 'AddressBook.assistantBundle',
-                path: 'Assistant/Plugins/AddressBook.assistantBundle',
-              },
-              {
-                value: 8,
-                name: 'GenericAddressHandler.addresshandler',
-                path: 'Recents/Plugins/GenericAddressHandler.addresshandler',
-              },
-              {
-                value: 12,
-                name: 'MapsRecents.addresshandler',
-                path: 'Recents/Plugins/MapsRecents.addresshandler',
-              },
-            ],
-          },
-        ],
-      },
-    ]
-    let formatUtil = echarts.format
-    function getLevelOption () {
-      return [{
-        itemStyle: {
-          normal: {
-            borderWidth: 0,
-            gapWidth: 5,
-          },
+const TreemapComponent = () => {
+  let diskData = [
+    {
+      value: 180,
+      name: 'Accounts',
+      path: 'Accounts',
+      children: [
+        {
+          value: 76,
+          name: 'Access',
+          path: 'Accounts/Access',
+          children: [
+            {
+              value: 12,
+              name: 'DefaultAccessPlugin.bundle',
+              path: 'Accounts/Access/DefaultAccessPlugin.bundle',
+            },
+            {
+              value: 28,
+              name: 'FacebookAccessPlugin.bundle',
+              path: 'Accounts/Access/FacebookAccessPlugin.bundle',
+            },
+            {
+              value: 20,
+              name: 'LinkedInAccessPlugin.bundle',
+              path: 'Accounts/Access/LinkedInAccessPlugin.bundle',
+            },
+            {
+              value: 16,
+              name: 'TencentWeiboAccessPlugin.bundle',
+              path: 'Accounts/Access/TencentWeiboAccessPlugin.bundle',
+            },
+          ],
        },
-      }, {
-        itemStyle: {
-          normal: {
-            gapWidth: 1,
-          },
+        {
+          value: 92,
+          name: 'Authentication',
+          path: 'Accounts/Authentication',
+          children: [
+            {
+              value: 24,
+              name: 'FacebookAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/FacebookAuthenticationPlugin.bundle',
+            },
+            {
+              value: 16,
+              name: 'LinkedInAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/LinkedInAuthenticationPlugin.bundle',
+            },
+            {
+              value: 20,
+              name: 'TencentWeiboAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle',
+            },
+            {
+              value: 16,
+              name: 'TwitterAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/TwitterAuthenticationPlugin.bundle',
+            },
+            {
+              value: 16,
+              name: 'WeiboAuthenticationPlugin.bundle',
+              path: 'Accounts/Authentication/WeiboAuthenticationPlugin.bundle',
+            },
+          ],
        },
-      }, {
-        colorSaturation: [0.35, 0.5],
-        itemStyle: {
-          normal: {
-            gapWidth: 1,
-            borderColorSaturation: 0.6,
-          },
+        {
+          value: 12,
+          name: 'Notification',
+          path: 'Accounts/Notification',
+          children: [
+            {
+              value: 12,
+              name: 'SPAAccountsNotificationPlugin.bundle',
+              path: 'Accounts/Notification/SPAAccountsNotificationPlugin.bundle',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 1904,
+      name: 'AddressBook Plug-Ins',
+      path: 'AddressBook Plug-Ins',
+      children: [
+        {
+          value: 744,
+          name: 'CardDAVPlugin.sourcebundle',
+          path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle',
+          children: [
+            {
+              value: 744,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents',
+            },
+          ],
+        },
+        {
+          value: 28,
+          name: 'DirectoryServices.sourcebundle',
+          path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle',
+          children: [
+            {
+              value: 28,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents',
+            },
+          ],
+        },
+        {
+          value: 680,
+          name: 'Exchange.sourcebundle',
+          path: 'AddressBook Plug-Ins/Exchange.sourcebundle',
+          children: [
+            {
+              value: 680,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/Exchange.sourcebundle/Contents',
+            },
+          ],
+        },
+        {
+          value: 432,
+          name: 'LDAP.sourcebundle',
+          path: 'AddressBook Plug-Ins/LDAP.sourcebundle',
+          children: [
+            {
+              value: 432,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/LDAP.sourcebundle/Contents',
+            },
+          ],
+        },
+        {
+          value: 20,
+          name: 'LocalSource.sourcebundle',
+          path: 'AddressBook Plug-Ins/LocalSource.sourcebundle',
+          children: [
+            {
+              value: 20,
+              name: 'Contents',
+              path: 'AddressBook Plug-Ins/LocalSource.sourcebundle/Contents',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 36,
+      name: 'Assistant',
+      path: 'Assistant',
+      children: [
+        {
+          value: 36,
+          name: 'Plugins',
+          path: 'Assistant/Plugins',
+          children: [
+            {
+              value: 36,
+              name: 'AddressBook.assistantBundle',
+              path: 'Assistant/Plugins/AddressBook.assistantBundle',
+            },
+            {
+              value: 8,
+              name: 'GenericAddressHandler.addresshandler',
+              path: 'Recents/Plugins/GenericAddressHandler.addresshandler',
+            },
+            {
+              value: 12,
+              name: 'MapsRecents.addresshandler',
+              path: 'Recents/Plugins/MapsRecents.addresshandler',
+            },
+          ],
+        },
+      ],
+    },
+  ]
+  let formatUtil = echarts.format
+  function getLevelOption () {
+    return [{
+      itemStyle: {
+        normal: {
+          borderWidth: 0,
+          gapWidth: 5,
        },
-      }]
-    }
-    const option = {
-      title: {
-        text: 'Disk Usage',
-        left: 'center',
      },
+    }, {
+      itemStyle: {
+        normal: {
+          gapWidth: 1,
+        },
+      },
+    }, {
+      colorSaturation: [0.35, 0.5],
+      itemStyle: {
+        normal: {
+          gapWidth: 1,
+          borderColorSaturation: 0.6,
+        },
+      },
+    }]
+  }
+  const option = {
+    title: {
+      text: 'Disk Usage',
+      left: 'center',
+    },

-      tooltip: {
-        formatter (info) {
-          let value = info.value
-          let treePathInfo = info.treePathInfo
-          let treePath = []
+    tooltip: {
+      formatter (info) {
+        let { value, treePathInfo } = info
+        let treePath = []

-          for (let i = 1; i < treePathInfo.length; i++) {
-            treePath.push(treePathInfo[i].name)
-          }
+        for (let i = 1; i < treePathInfo.length; i++) {
+          treePath.push(treePathInfo[i].name)
+        }

-          return [
-            `<div class="tooltip-title">${formatUtil.encodeHTML(treePath.join('/'))}</div>`,
-            `Disk Usage: ${formatUtil.addCommas(value)} KB`,
-          ].join('')
+        return [
+          `<div class="tooltip-title">${formatUtil.encodeHTML(treePath.join('/'))}</div>`,
+          `Disk Usage: ${formatUtil.addCommas(value)} KB`,
+        ].join('')
+      },
+    },
+
+    series: [{
+      name: 'Disk Usage',
+      type: 'treemap',
+      visibleMin: 300,
+      label: {
+        show: true,
+        formatter: '{b}',
+      },
+      itemStyle: {
+        normal: {
+          borderColor: '#fff',
        },
      },
+      levels: getLevelOption(),
+      data: diskData,
+    }],
+  }

-      series: [{
-        name: 'Disk Usage',
-        type: 'treemap',
-        visibleMin: 300,
-        label: {
-          show: true,
-          formatter: '{b}',
-        },
-        itemStyle: {
-          normal: {
-            borderColor: '#fff',
-          },
-        },
-        levels: getLevelOption(),
-        data: diskData,
-      }],
-    }
-    return option
-  },
-  render () {
-    return (
-      <div className="examples">
-        <div className="parent">
-          <label> render a disk usage treemap. </label>
-          <ReactEcharts
-            option={this.getOtion()}
-            style={{ height: '500px', width: '100%' }}
-            className="react_for_echarts"
-          />
-        </div>
+  return (
+    <div className="examples">
+      <div className="parent">
+        <label> render a disk usage treemap. </label>
+        <ReactEcharts
+          option={option}
+          style={{ height: '500px', width: '100%' }}
+          className="react_for_echarts"
+        />
      </div>
-    )
-  },
-})
+    </div>
+  )
+}

 export default TreemapComponent
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Radio } from 'antd'
+import { Page } from 'components'
 import EchartsComponent from './EchartsComponent'
 import styles from './index.less'

@@ -94,7 +95,7 @@ class Chart extends React.Component {
    })
  }
  render () {
-    return (<div className="content-inner" id="EChartsMain">
+    return (<Page inner id="EChartsMain">
      <RadioGroup options={chartList} defaultValue="dynamic" onChange={this.handleRadioGroupChange} />
      <div className={styles.chart}>
        <EchartsComponent type={this.state.type} />
@@ -102,7 +103,7 @@ class Chart extends React.Component {
      <div style={{ pading: 24, marginTop: 24 }}>
         All demos from <a href="https://github.com/hustcc/echarts-for-react">https://github.com/hustcc/echarts-for-react</a>
      </div>
-    </div>)
+    </Page>)
  }
 }

@@ -257,7 +257,6 @@ const CardinalAreaChart = () => (
 const AreaChartPage = () => (
  <div className="content-inner">
    <Button type="primary"
-      size="large"
      style={{
        position: 'absolute',
        right: 0,
@@ -168,7 +168,9 @@ const getPath = (x, y, width, height) => {
 }

 const TriangleBar = (props) => {
-  const { fill, x, y, width, height } = props
+  const {
+    fill, x, y, width, height,
+  } = props
  return <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />
 }

@@ -201,7 +203,6 @@ const CustomShapeBarChart = () => (
 const BarChartPage = () => (
  <div className="content-inner">
    <Button type="primary"
-      size="large"
      style={{
        position: 'absolute',
        right: 0,
@@ -179,7 +179,6 @@ const CustomizedDotLineChart = () => (
 const LineChartPage = () => (
  <div className="content-inner">
    <Button type="primary"
-      size="large"
      style={{
        position: 'absolute',
        right: 0,
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Radio } from 'antd'
+import { Page } from 'components'
 import ReChartsComponent from './ReChartsComponent'
 import styles from './index.less'

@@ -34,12 +35,12 @@ class Chart extends React.Component {
    })
  }
  render () {
-    return (<div className="content-inner">
+    return (<Page inner>
      <RadioGroup options={chartList} defaultValue="lineChart" onChange={this.handleRadioGroupChange} />
      <div className={styles.chart}>
        <ReChartsComponent type={this.state.type} />
      </div>
-    </div>)
+    </Page>)
  }
 }

@@ -1,293 +0,0 @@
-import React from 'react'
-import * as d3 from 'd3-shape'
-import { Row, Col, Card, Button } from 'antd'
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-} from 'recharts'
-import Container from '../Container'
-
-const data = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-]
-
-const mixData = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-]
-
-const percentData = [
-  {
-    month: '2015.01',
-    a: 4000,
-    b: 2400,
-    c: 2400,
-  }, {
-    month: '2015.02',
-    a: 3000,
-    b: 1398,
-    c: 2210,
-  }, {
-    month: '2015.03',
-    a: 2000,
-    b: 9800,
-    c: 2290,
-  }, {
-    month: '2015.04',
-    a: 2780,
-    b: 3908,
-    c: 2000,
-  }, {
-    month: '2015.05',
-    a: 1890,
-    b: 4800,
-    c: 2181,
-  }, {
-    month: '2015.06',
-    a: 2390,
-    b: 3800,
-    c: 2500,
-  }, {
-    month: '2015.07',
-    a: 3490,
-    b: 4300,
-    c: 2100,
-  },
-]
-
-const colProps = {
-  lg: 12,
-  md: 24,
-}
-
-const SimpleAreaChart = () => (
-  <Container>
-    <AreaChart data={data}
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
-    </AreaChart>
-  </Container>
-)
-
-const StackedAreaChart = () => (
-  <Container>
-    <AreaChart data={mixData}
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
-      <Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
-      <Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
-    </AreaChart>
-  </Container>
-)
-
-// StackedAreaChart
-
-const toPercent = (decimal, fixed = 0) => {
-  return `${(decimal * 100).toFixed(fixed)}%`
-}
-
-const getPercent = (value, total) => {
-  const ratio = total > 0
-    ? value / total
-    : 0
-
-  return toPercent(ratio, 2)
-}
-
-const renderTooltipContent = (o) => {
-  const { payload, label } = o
-  const total = payload.reduce((result, entry) => (result + entry.value), 0)
-
-  return (
-    <div className="customized-tooltip-content">
-      <p className="total">{`${label} (Total: ${total})`}</p>
-      <ul className="list">
-        {payload.map((entry, index) => (
-          <li key={`item-${index}`}
-            style={{
-              color: entry.color,
-            }}
-          >
-            {`${entry.name}: ${entry.value}(${getPercent(entry.value, total)})`}
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
-
-const PercentAreaChart = () => (
-  <Container>
-    <AreaChart data={percentData}
-      stackOffset="expand"
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-    >
-      <XAxis dataKey="month" />
-      <YAxis tickFormatter={toPercent} />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip content={renderTooltipContent} />
-      <Area type="monotone" dataKey="a" stackId="1" stroke="#8884d8" fill="#8884d8" />
-      <Area type="monotone" dataKey="b" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
-      <Area type="monotone" dataKey="c" stackId="1" stroke="#ffc658" fill="#ffc658" />
-    </AreaChart>
-  </Container>
-)
-
-// CardinalAreaChart
-const cardinal = d3.curveCardinal.tension(0.2)
-const CardinalAreaChart = () => (
-  <Container>
-    <AreaChart data={mixData}
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
-      <Area type={cardinal} dataKey="pv" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.3} />
-    </AreaChart>
-  </Container>
-)
-
-const EditorPage = () => (
-  <div className="content-inner">
-    <Button type="primary"
-      size="large"
-      style={{
-        position: 'absolute',
-        right: 0,
-        top: -48,
-      }}
-    >
-      <a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
-    </Button>
-    <Row gutter={32}>
-      <Col {...colProps}>
-        <Card title="SimpleAreaChart">
-          <SimpleAreaChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="StackedAreaChart">
-          <StackedAreaChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="PercentAreaChart">
-          <PercentAreaChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="CardinalAreaChart">
-          <CardinalAreaChart />
-        </Card>
-      </Col>
-    </Row>
-  </div>
-)
-
-export default EditorPage
@@ -1,237 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Row, Col, Card, Button } from 'antd'
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-} from 'recharts'
-import Container from '../Container'
-
-const data = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-]
-
-const mixData = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    female: 2400,
-    male: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    female: 1398,
-    male: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    female: 9800,
-    male: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    female: 3908,
-    male: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    female: 4800,
-    male: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    female: 3800,
-    male: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    female: 4300,
-    male: 2100,
-  },
-]
-const colProps = {
-  lg: 12,
-  md: 24,
-}
-
-const SimpleBarChart = () => (
-  <Container>
-    <BarChart data={data}
-      margin={{
-        top: 5,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Bar dataKey="pv" fill="#8884d8" />
-      <Bar dataKey="uv" fill="#82ca9d" />
-    </BarChart>
-  </Container>
-)
-
-const StackedBarChart = () => (
-  <Container>
-    <BarChart data={data}
-      margin={{
-        top: 20,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Bar dataKey="pv" stackId="a" fill="#8884d8" />
-      <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
-    </BarChart>
-  </Container>
-)
-
-const MixBarChart = () => (
-  <Container>
-    <BarChart data={mixData}
-      margin={{
-        top: 20,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Bar dataKey="female" stackId="a" fill="#8884d8" />
-      <Bar dataKey="male" stackId="a" fill="#82ca9d" />
-      <Bar dataKey="uv" fill="#ffc658" />
-    </BarChart>
-  </Container>
-)
-
-// CustomShapeBarChart
-const getPath = (x, y, width, height) => {
-  return `M${x},${y + height}
-        C${x + (width / 3)},${y + height} ${x + (width / 2)},${y + (height / 3)} ${x + (width / 2)}, ${y}
-        C${x + (width / 2)},${y + (height / 3)} ${x + (2 * (width / 3))},${y + height} ${x + width}, ${y + height}
-        Z`
-}
-
-const TriangleBar = (props) => {
-  const { fill, x, y, width, height } = props
-  return <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />
-}
-
-TriangleBar.propTypes = {
-  fill: PropTypes.string,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  width: PropTypes.number,
-  height: PropTypes.number,
-}
-
-const CustomShapeBarChart = () => (
-  <Container>
-    <BarChart data={mixData}
-      margin={{
-        top: 20,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Bar dataKey="female" fill="#8884d8" shape={<TriangleBar />} label />
-    </BarChart>
-  </Container>
-)
-
-const EditorPage = () => (
-  <div className="content-inner">
-    <Button type="primary"
-      size="large"
-      style={{
-        position: 'absolute',
-        right: 0,
-        top: -48,
-      }}
-    >
-      <a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
-    </Button>
-    <Row gutter={32}>
-      <Col {...colProps}>
-        <Card title="SimpleBarChart">
-          <SimpleBarChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="StackedBarChart">
-          <StackedBarChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="MixBarChart">
-          <MixBarChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="CustomShapeBarChart">
-          <CustomShapeBarChart />
-        </Card>
-      </Col>
-    </Row>
-  </div>
-)
-
-export default EditorPage
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Radio } from 'antd'
+import { Page } from 'components'
 import HighChartsComponent from './HighChartsComponent'
 import styles from './index.less'

@@ -34,12 +35,12 @@ class Chart extends React.Component {
    })
  }
  render () {
-    return (<div className="content-inner">
+    return (<Page inner>
      <RadioGroup options={chartList} defaultValue="Highstock" onChange={this.handleRadioGroupChange} />
      <div className={styles.chart}>
        <HighChartsComponent type={this.state.type} />
      </div>
-    </div>)
+    </Page>)
  }
 }

@@ -1,216 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Row, Col, Card, Button } from 'antd'
-import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-} from 'recharts'
-import Container from '../Container'
-
-const data = [
-  {
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400,
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210,
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290,
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000,
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181,
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500,
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100,
-  },
-]
-
-const colProps = {
-  lg: 12,
-  md: 24,
-}
-
-const SimpleLineChart = () => (
-  <Container>
-    <LineChart data={data}
-      margin={{
-        top: 5,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line type="monotone"
-        dataKey="pv"
-        stroke="#8884d8"
-        activeDot={{
-          r: 8,
-        }}
-      />
-      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
-    </LineChart>
-  </Container>
-)
-
-const VerticalLineChart = () => (
-  <Container>
-    <LineChart layout="vertical"
-      width={600}
-      height={300}
-      data={data}
-      margin={{
-        top: 20,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis type="number" />
-      <YAxis dataKey="name" type="category" />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line dataKey="pv" stroke="#8884d8" />
-      <Line dataKey="uv" stroke="#82ca9d" />
-    </LineChart>
-  </Container>
-)
-
-const DashedLineChart = () => (
-  <Container>
-    <LineChart width={600}
-      height={300}
-      data={data}
-      margin={{
-        top: 5,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line type="monotone" dataKey="pv" stroke="#8884d8" strokeDasharray="5 5" />
-      <Line type="monotone" dataKey="uv" stroke="#82ca9d" strokeDasharray="3 4 5 2" />
-    </LineChart>
-  </Container>
-)
-
-// CustomizedDotLineChart
-const CustomizedDot = ({ cx, cy, payload }) => {
-  if (payload.pv > 2500) {
-    return (
-      <svg x={cx - 10} y={cy - 10} width={20} height={20} fill="red" viewBox="0 0 1024 1024">
-        <path d="M512 1009.984c-274.912 0-497.76-222.848-497.76-497.76s222.848-497.76 497.76-497.76c274.912 0 497.76 222.848 497.76 497.76s-222.848 497.76-497.76 497.76zM340.768 295.936c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM686.176 296.704c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM772.928 555.392c-18.752-8.864-40.928-0.576-49.632 18.528-40.224 88.576-120.256 143.552-208.832 143.552-85.952 0-164.864-52.64-205.952-137.376-9.184-18.912-31.648-26.592-50.08-17.28-18.464 9.408-21.216 21.472-15.936 32.64 52.8 111.424 155.232 186.784 269.76 186.784 117.984 0 217.12-70.944 269.76-186.784 8.672-19.136 9.568-31.2-9.12-40.096z" />
-      </svg>
-    )
-  }
-
-  return (
-    <svg x={cx - 10} y={cy - 10} width={20} height={20} fill="green" viewBox="0 0 1024 1024">
-      <path d="M517.12 53.248q95.232 0 179.2 36.352t145.92 98.304 98.304 145.92 36.352 179.2-36.352 179.2-98.304 145.92-145.92 98.304-179.2 36.352-179.2-36.352-145.92-98.304-98.304-145.92-36.352-179.2 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352zM663.552 261.12q-15.36 0-28.16 6.656t-23.04 18.432-15.872 27.648-5.632 33.28q0 35.84 21.504 61.44t51.2 25.6 51.2-25.6 21.504-61.44q0-17.408-5.632-33.28t-15.872-27.648-23.04-18.432-28.16-6.656zM373.76 261.12q-29.696 0-50.688 25.088t-20.992 60.928 20.992 61.44 50.688 25.6 50.176-25.6 20.48-61.44-20.48-60.928-50.176-25.088zM520.192 602.112q-51.2 0-97.28 9.728t-82.944 27.648-62.464 41.472-35.84 51.2q-1.024 1.024-1.024 2.048-1.024 3.072-1.024 8.704t2.56 11.776 7.168 11.264 12.8 6.144q25.6-27.648 62.464-50.176 31.744-19.456 79.36-35.328t114.176-15.872q67.584 0 116.736 15.872t81.92 35.328q37.888 22.528 63.488 50.176 17.408-5.12 19.968-18.944t0.512-18.944-3.072-7.168-1.024-3.072q-26.624-55.296-100.352-88.576t-176.128-33.28z" />
-    </svg>
-  )
-}
-
-CustomizedDot.propTypes = {
-  cx: PropTypes.number,
-  cy: PropTypes.number,
-  payload: PropTypes.object,
-}
-
-const CustomizedDotLineChart = () => (
-  <Container>
-    <LineChart width={600}
-      height={300}
-      data={data}
-      margin={{
-        top: 5,
-        right: 30,
-        left: 20,
-        bottom: 5,
-      }}
-    >
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid strokeDasharray="3 3" />
-      <Tooltip />
-      <Legend />
-      <Line type="monotone" dataKey="pv" stroke="#8884d8" dot={<CustomizedDot />} />
-      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
-    </LineChart>
-  </Container>
-)
-
-const EditorPage = () => (
-  <div className="content-inner">
-    <Button type="primary"
-      size="large"
-      style={{
-        position: 'absolute',
-        right: 0,
-        top: -48,
-      }}
-    >
-      <a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
-    </Button>
-    <Row gutter={32}>
-      <Col {...colProps}>
-        <Card title="SimpleLineChart">
-          <SimpleLineChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="DashedLineChart">
-          <DashedLineChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="CustomizedDotLineChart">
-          <CustomizedDotLineChart />
-        </Card>
-      </Col>
-      <Col {...colProps}>
-        <Card title="VerticalLineChart">
-          <VerticalLineChart />
-        </Card>
-      </Col>
-    </Row>
-  </div>
-)
-
-export default EditorPage
@@ -4,7 +4,9 @@ import { Icon, Card } from 'antd'
 import CountUp from 'react-countup'
 import styles from './numberCard.less'

-function NumberCard ({ icon, color, title, number, countUp }) {
+function NumberCard ({
+  icon, color, title, number, countUp,
+}) {
  return (
    <Card className={styles.numberCard} bordered={false} bodyStyle={{ padding: 0 }}>
      <Icon className={styles.iconWarp} style={{ color }} type={icon} />
@@ -27,6 +27,7 @@
      font-size: 24px;
      height: 32px;
      .text-overflow();
+      margin-bottom: 0;
    }
  }
 }
@@ -15,13 +15,15 @@ const bodyStyle = {
 }

 function Dashboard ({ dashboard, loading }) {
-  const { weather, sales, quote, numbers, recentSales, comments, completed, browser, cpu, user } = dashboard
+  const {
+    weather, sales, quote, numbers, recentSales, comments, completed, browser, cpu, user,
+  } = dashboard
  const numberCards = numbers.map((item, key) => (<Col key={key} lg={6} md={12}>
    <NumberCard {...item} />
  </Col>))

  return (
-    <Page loading={loading.models.dashboard && sales.length === 0}>
+    <Page loading={loading.models.dashboard && sales.length === 0} className={styles.dashboard}>
      <Row gutter={24}>
        {numberCards}
        <Col lg={18} md={24}>
@@ -1,18 +1,28 @@
-:global {
-  .ant-card {
-    border-radius: 0;
-    margin-bottom: 24px;
+.dashboard{
+  position: relative;
+  :global {
+    .ant-card {
+      border-radius: 0;
+      margin-bottom: 24px;
+      &:hover{
+        box-shadow: 4px 4px 40px rgba(0,0,0,.05);
+      }
+    }
+    .ant-card-body{
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
  }
-}

-.weather {
-  &:hover {
-    box-shadow: 4px 4px 40px rgba(143,201,251,.6);
+  .weather {
+    &:hover {
+      box-shadow: 4px 4px 40px rgba(143,201,251,.6);
+    }
  }
-}

-.quote {
-  &:hover {
-    box-shadow: 4px 4px 40px rgba(246,152,153,.6);
+  .quote {
+    &:hover {
+      box-shadow: 4px 4px 40px rgba(246,152,153,.6);
+    }
  }
 }
@@ -1,12 +1,13 @@
 import React from 'react'
 import { Icon } from 'antd'
 import styles from './index.less'
+import { Page } from 'components'

-const Error = () => (<div className="content-inner">
+const Error = () => (<Page inner>
  <div className={styles.error}>
    <Icon type="frown-o" />
    <h1>404 Not Found</h1>
  </div>
-</div>)
+</Page>)

 export default Error
@@ -27,7 +27,7 @@ const Login = ({
  return (
    <div className={styles.form}>
      <div className={styles.logo}>
-        <img alt={'logo'} src={config.logo} />
+        <img alt="logo" src={config.logo} />
        <span>{config.name}</span>
      </div>
      <form>
@@ -38,7 +38,7 @@ const Login = ({
                required: true,
              },
            ],
-          })(<Input size="large" onPressEnter={handleOk} placeholder="Username" />)}
+          })(<Input onPressEnter={handleOk} placeholder="Username" />)}
        </FormItem>
        <FormItem hasFeedback>
          {getFieldDecorator('password', {
@@ -47,10 +47,10 @@ const Login = ({
                required: true,
              },
            ],
-          })(<Input size="large" type="password" onPressEnter={handleOk} placeholder="Password" />)}
+          })(<Input type="password" onPressEnter={handleOk} placeholder="Password" />)}
        </FormItem>
        <Row>
-          <Button type="primary" size="large" onClick={handleOk} loading={loading.effects.login}>
+          <Button type="primary" onClick={handleOk} loading={loading.effects.login}>
            Sign in
          </Button>
          <p>
@@ -1,51 +1,53 @@
-.form {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -160px 0 0 -160px;
-  width: 320px;
-  height: 320px;
-  padding: 36px;
-  box-shadow: 0 0 100px rgba(0,0,0,.08);
-
-  button {
-    width: 100%;
-  }
-
-  p {
-    color: rgb(204, 204, 204);
-    text-align: center;
-    margin-top: 16px;
-
-    span {
-      &:first-child {
-        margin-right: 16px;
-      }
-    }
-  }
-}
-
-.logo {
-  text-align: center;
-  height: 40px;
-  line-height: 40px;
-  cursor: pointer;
-  margin-bottom: 24px;
-
-  img {
-    width: 40px;
-    margin-right: 8px;
-  }
-
-  span {
-    vertical-align: text-bottom;
-    font-size: 16px;
-    text-transform: uppercase;
-    display: inline-block;
-  }
-}
-
-.ant-spin-container,
-.ant-spin-nested-loading {
-  height: 100%;
-}
+@import "~themes/vars";
+
+.form {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -160px 0 0 -160px;
+  width: 320px;
+  height: 320px;
+  padding: 36px;
+  box-shadow: 0 0 100px rgba(0,0,0,.08);
+
+  button {
+    width: 100%;
+  }
+
+  p {
+    color: rgb(204, 204, 204);
+    text-align: center;
+    margin-top: 16px;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.logo {
+  text-align: center;
+  cursor: pointer;
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 40px;
+    margin-right: 8px;
+  }
+
+  span {
+    vertical-align: text-bottom;
+    font-size: 16px;
+    text-transform: uppercase;
+    display: inline-block;
+    font-weight: 700;
+    color: @primary-color;
+  }
+}
+
+.ant-spin-container,
+.ant-spin-nested-loading {
+  height: 100%;
+}
@@ -3,9 +3,11 @@ import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Tabs } from 'antd'
 import { routerRedux } from 'dva/router'
+import queryString from 'query-string'
+import { Page } from 'components'
 import List from './List'

-const TabPane = Tabs.TabPane
+const { TabPane } = Tabs

 const EnumPostStatus = {
  UNPUBLISH: 1,
@@ -13,9 +15,12 @@ const EnumPostStatus = {
 }


-const Index = ({ post, dispatch, loading, location }) => {
+const Index = ({
+  post, dispatch, loading, location,
+}) => {
  const { list, pagination } = post
-  const { query = {}, pathname } = location
+  location.query = queryString.parse(location.search)
+  const { query, pathname } = location

  const listProps = {
    pagination,
@@ -24,11 +29,11 @@ const Index = ({ post, dispatch, loading, location }) => {
    onChange (page) {
      dispatch(routerRedux.push({
        pathname,
-        query: {
+        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
-        },
+        }),
      }))
    },
  }
@@ -36,14 +41,14 @@ const Index = ({ post, dispatch, loading, location }) => {
  const handleTabClick = (key) => {
    dispatch(routerRedux.push({
      pathname,
-      query: {
+      search: queryString.stringify({
        status: key,
-      },
+      }),
    }))
  }


-  return (<div className="content-inner">
+  return (<Page inner>
    <Tabs activeKey={query.status === String(EnumPostStatus.UNPUBLISH) ? String(EnumPostStatus.UNPUBLISH) : String(EnumPostStatus.PUBLISHED)} onTabClick={handleTabClick}>
      <TabPane tab="Publised" key={String(EnumPostStatus.PUBLISHED)}>
        <List {...listProps} />
@@ -52,7 +57,7 @@ const Index = ({ post, dispatch, loading, location }) => {
        <List {...listProps} />
      </TabPane>
    </Tabs>
-  </div>)
+  </Page>)
 }

 Index.propTypes = {
@@ -5,7 +5,7 @@ import { FilterItem } from 'components'
 import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch } from 'antd'
 import city from '../../utils/city'

-const Search = Input.Search
+const { Search } = Input
 const { RangePicker } = DatePicker

 const ColProps = {
@@ -81,34 +81,30 @@ const Filter = ({
  return (
    <Row gutter={24}>
      <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
-        {getFieldDecorator('name', { initialValue: name })(<Search placeholder="Search Name" size="large" onSearch={handleSubmit} />)}
+        {getFieldDecorator('name', { initialValue: name })(<Search placeholder="Search Name" onSearch={handleSubmit} />)}
      </Col>
      <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
-        {getFieldDecorator('address', { initialValue: address })(
-          <Cascader
-            size="large"
-            style={{ width: '100%' }}
-            options={city}
-            placeholder="Please pick an address"
-            onChange={handleChange.bind(null, 'address')}
-          />)}
+        {getFieldDecorator('address', { initialValue: address })(<Cascader
+          style={{ width: '100%' }}
+          options={city}
+          placeholder="Please pick an address"
+          onChange={handleChange.bind(null, 'address')}
+        />)}
      </Col>
      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 8 }} sm={{ span: 12 }}>
        <FilterItem label="Createtime">
-          {getFieldDecorator('createTime', { initialValue: initialCreateTime })(
-            <RangePicker style={{ width: '100%' }} size="large" onChange={handleChange.bind(null, 'createTime')} />
-          )}
+          {getFieldDecorator('createTime', { initialValue: initialCreateTime })(<RangePicker style={{ width: '100%' }} onChange={handleChange.bind(null, 'createTime')} />)}
        </FilterItem>
      </Col>
      <Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} sm={{ span: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
-          <div >
-            <Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
-            <Button size="large" onClick={handleReset}>Reset</Button>
-          </div>
          <div>
-            <Switch style={{ marginRight: 16 }} size="large" defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren={'Motion'} unCheckedChildren={'Motion'} />
-            <Button size="large" type="ghost" onClick={onAdd}>Create</Button>
+            <Button type="primary" className="margin-right" onClick={handleSubmit}>Search</Button>
+            <Button onClick={handleReset}>Reset</Button>
+          </div>
+          <div className="flex-vertical-center">
+            <Switch className="ant-switch-large" style={{ marginRight: 16 }} defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren="Motion" unCheckedChildren="Motion" />
+            <Button type="ghost" onClick={onAdd}>Create</Button>
          </div>
        </div>
      </Col>
@@ -75,12 +75,10 @@ const modal = ({
                type: 'boolean',
              },
            ],
-          })(
-            <Radio.Group>
-              <Radio value>Male</Radio>
-              <Radio value={false}>Female</Radio>
-            </Radio.Group>
-          )}
+          })(<Radio.Group>
+            <Radio value>Male</Radio>
+            <Radio value={false}>Female</Radio>
+             </Radio.Group>)}
        </FormItem>
        <FormItem label="Age" hasFeedback {...formItemLayout}>
          {getFieldDecorator('age', {
@@ -126,7 +124,6 @@ const modal = ({
              },
            ],
          })(<Cascader
-            size="large"
            style={{ width: '100%' }}
            options={city}
            placeholder="Pick an address"
@@ -10,9 +10,14 @@ import Filter from './Filter'
 import Modal from './Modal'


-const User = ({ location, dispatch, user, loading }) => {
+const User = ({
+  location, dispatch, user, loading,
+}) => {
  location.query = queryString.parse(location.search)
-  const { list, pagination, currentItem, modalVisible, modalType, isMotion, selectedRowKeys } = user
+  const { query, pathname } = location
+  const {
+    list, pagination, currentItem, modalVisible, modalType, isMotion, selectedRowKeys,
+  } = user
  const { pageSize } = pagination

  const modalProps = {
@@ -42,14 +47,13 @@ const User = ({ location, dispatch, user, loading }) => {
    location,
    isMotion,
    onChange (page) {
-      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
-        query: {
+        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
-        },
+        }),
      }))
    },
    onDeleteItem (id) {
@@ -83,16 +87,16 @@ const User = ({ location, dispatch, user, loading }) => {
  const filterProps = {
    isMotion,
    filter: {
-      ...location.query,
+      ...query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
-        query: {
+        search: queryString.stringify({
          ...value,
          page: 1,
          pageSize,
-        },
+        }),
      }))
    },
    onSearch (fieldsValue) {
@@ -136,8 +140,8 @@ const User = ({ location, dispatch, user, loading }) => {
        <Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
          <Col>
            {`Selected ${selectedRowKeys.length} items `}
-            <Popconfirm title={'Are you sure delete these items?'} placement="left" onConfirm={handleDeleteItems}>
-              <Button type="primary" size="large" style={{ marginLeft: 8 }}>Remove</Button>
+            <Popconfirm title="Are you sure delete these items?" placement="left" onConfirm={handleDeleteItems}>
+              <Button type="primary" style={{ marginLeft: 8 }}>Remove</Button>
            </Popconfirm>
          </Col>
        </Row>
@@ -1,16 +1,15 @@
-// 本文件是对 ant-design:
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
-// 相应变量值的覆盖
-// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
-// http://www.iconfont.cn/collections/detail?cid=790
-@import "../../node_modules/antd/lib/style/themes/default.less";
-@border-radius-base: 3px;
-@border-radius-sm: 2px;
-@shadow-color: rgba(0,0,0,0.05);
-@shadow-1-down: 4px 4px 40px @shadow-color;
-@border-color-split: #f4f4f4;
-@border-color-base: #e5e5e5;
-@menu-dark-bg: #3e3e3e;
-@text-color: #666;
-@font-family: "AvenirNext-Regular", "Helvetica Neue", "lucida grande", "PingFangHK-Light", "STHeiti", "Heiti SC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft Yahei", SimHei, "WenQuanYi Micro Hei", "Droid Sans", "Roboto", Helvetica, Tahoma, Arial, "sans-serif";
-@icon-url: "/antd/iconfont";
+// 本文件是对 ant-design:
+// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+// 相应变量值的覆盖
+// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
+// http://www.iconfont.cn/collections/detail?cid=790
+
+@import "../../node_modules/antd/lib/style/themes/default.less";
+@border-radius-base: 3px;
+@border-radius-sm: 2px;
+@shadow-color: rgba(0,0,0,0.05);
+@shadow-1-down: 4px 4px 40px @shadow-color;
+@border-color-split: #f4f4f4;
+@border-color-base: #e5e5e5;
+@font-size-base: 13px;
+@text-color: #666;
@@ -5,7 +5,7 @@ module.exports = {
  name: 'AntD Admin',
  prefix: 'antdAdmin',
  footerText: 'Ant Design Admin  © 2017 zuiidea',
-  logo: '/logo.png',
+  logo: '/logo.svg',
  iconFontCSS: '/iconfont.css',
  iconFontJS: '/iconfont.js',
  CORS: [],
Author	SHA1	Message	Date
zuiidea	2de1e81661	Merge pull request #711 from zuiidea/develop Develop	2017-12-27 15:41:00 +08:00
zuiidea	cea60c5683	update Readme	2017-12-27 15:39:45 +08:00
zuiidea	f16e104f73	fix all echarts example	2017-12-26 14:14:52 +08:00
zuiidea	c397f552c3	fix some style	2017-12-26 11:31:05 +08:00
zuiidea	11c4ac803e	fix users pagination	2017-12-25 20:39:48 +08:00
zuiidea	09b9a100de	fix header style	2017-12-25 19:54:48 +08:00
zuiidea	0e59df39ee	Compatibility upgrade	2017-12-25 18:08:25 +08:00
zuiidea	30254a2ec7	upgrade package	2017-12-25 10:51:36 +08:00
zuiidea	cd796a6db9	fix Search style	2017-11-24 11:27:00 +08:00
zuiidea	6ba75de576	add backTop	2017-11-24 11:02:52 +08:00
zuiidea	a3637b3a99	user search	2017-11-24 10:32:12 +08:00
zuiidea	85ec09ec9a	Merge branch 'weishijun14-patch-1' into develop	2017-11-24 10:28:25 +08:00
zuiidea	eb683b98e7	Merge branch 'patch-1' of https://github.com/weishijun14/antd-admin into weishijun14-patch-1	2017-11-24 10:28:17 +08:00
zuiidea	9221173309	Merge branch 'silentred-master' into develop	2017-11-24 10:26:15 +08:00
zuiidea	55a96f41c6	Merge branch 'master' of https://github.com/silentred/antd-admin into silentred-master	2017-11-24 10:25:42 +08:00
zuiidea	ce510e79c7	Merge branch 'nazarlitvin-pagination' into develop	2017-11-24 10:24:56 +08:00
zuiidea	3d4f2a8814	Merge branch 'pagination' of https://github.com/nazarlitvin/antd-admin into nazarlitvin-pagination	2017-11-24 10:24:22 +08:00
nazarlitvin	38e24edd7b	fix incorrect pagination property	2017-11-22 16:01:49 +02:00
Jason W	841c987a1a	Update package.json update package.json	2017-11-03 04:21:16 -05:00
shijun Wei	dc26f7d25e	update query to search history 的 location 属性上不再包含 query。	2017-11-02 13:19:09 +08:00
zuiidea	bc754e683e	assets	2017-10-30 14:07:09 +08:00