update 4.3.0

fix build error
fix ejs-loader
2026-10-20 08:16:39 +00:00 · 2017-07-30 14:51:02 +08:00 · 2017-07-30 14:25:04 +08:00 · 2017-07-29 22:30:39 +08:00 · 2017-07-28 19:26:05 +08:00 · 2017-07-27 20:02:20 +08:00
101 changed files with 1478 additions and 661 deletions
@@ -6,6 +6,7 @@
    "comma-dangle": [2, "always-multiline"],
    "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,
@@ -18,10 +19,23 @@
    "no-param-reassign": 0,
    "no-restricted-syntax": 0,
    "no-eval": 0,
+    "no-continue": 0,
    "react/jsx-no-bind": 0,
    "no-unused-vars": [2, { "ignoreRestSiblings": true }],
    "no-underscore-dangle": 0,
    "global-require": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "jsx-a11y/href-no-hash": 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,
+    "import/no-extraneous-dependencies": 0,
+    "import/prefer-default-export": 0,
+    "react/no-danger": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
  },
  "parser": "babel-eslint",
  "parserOptions": {
@@ -31,5 +45,8 @@
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
-  }
+  },
+  "settings": {
+    "import/resolver": "node"
+    }
 }
@@ -1,27 +1,57 @@
 const path = require('path')
+const { version } = require('./package.json')

 const svgSpriteDirs = [
  path.resolve(__dirname, 'src/svg/'),
-  require.resolve('antd').replace(/index\.js$/, ''),
+  require.resolve('antd').replace(/index\.js$/, '')
 ]

 export default {
-  entry: 'src/index.js',
-  svgSpriteLoaderDirs: svgSpriteDirs,
-  "theme": "./theme.config.js",
-  "env": {
-      "development": {
-        "extraBabelPlugins": [
-          "dva-hmr",
-          "transform-runtime",
-  		    ["import", { "libraryName": "antd", "style": true }]
+  entry : 'src/index.js',
+  svgSpriteLoaderDirs : svgSpriteDirs,
+  theme : "./theme.config.js",
+  publicPath : `/${version}/`,
+  outputPath : `./dist/${version}`,
+  // 接口代理示例
+  // "proxy": {
+  //   "/api/v1": {
+  //     "target": "http://api.zuiidea.com",
+  //     "changeOrigin": true,
+  //     "pathRewrite": { "^/api/v1" : "/v1" }
+  //   },
+  //   "/api/v2": {
+  //     "target": "http://192.168.0.110",
+  //     "changeOrigin": true,
+  //     "pathRewrite": { "^/api/v2" : "/api/v2" }
+  //   }
+  // },
+  env : {
+    development: {
+      extraBabelPlugins: [
+        "dva-hmr",
+        "transform-runtime",
+        [
+          "import", {
+            "libraryName": "antd",
+            "style": true
+          }
        ]
-      },
-      "production": {
-        "extraBabelPlugins": [
-          "transform-runtime",
-  		    ["import", { "libraryName": "antd", "style": true}]
+      ]
+    },
+    production: {
+      extraBabelPlugins: [
+        "transform-runtime",
+        [
+          "import", {
+            "libraryName": "antd",
+            "style": true
+          }
        ]
-      }
+      ]
+    }
+  },
+  dllPlugin : {
+    exclude: ["babel-runtime"],
+    include: ["dva/router", "dva/saga", "dva/fetch"]
  }
 }
@@ -1,47 +1,63 @@
 # Antd Admin

-[![React Native](https://img.shields.io/badge/react-^15.4.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react)
-[![Ant Design](https://img.shields.io/badge/ant--design-^2.7.3-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design)
-[![dva](https://img.shields.io/badge/dva-^1.1.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva)
+[![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-^1.2.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)
 [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)

-演示地址 <http://zuiidea.github.io/antd-admin/>
-
-备用地址 <http://47.92.30.98:8000>
+演示地址 <http://zuiidea.github.io/antd-admin>  \| [备用地址](http://47.92.30.98:8000)

 ## 特性

-   基于[react](https://github.com/facebook/react)，[ant-design](https://github.com/ant-design/ant-design)，[dva](https://github.com/dvajs/dva)，[Mock](https://github.com/nuysoft/Mock) 企业级后台管理系统最佳实践
-   基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发
-   基于Antd UI 设计语言，提供后台管理系统常见使用场景
-   基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由，按需加载
-   浅度响应式设计
+-   基于[react](https://github.com/facebook/react)，[ant-design](https://github.com/ant-design/ant-design)，[dva](https://github.com/dvajs/dva)，[Mock](https://github.com/nuysoft/Mock) 企业级后台管理系统最佳实践。
+-   基于Antd UI 设计语言，提供后台管理系统常见使用场景。
+-   基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由，按需加载。
+-   使用[roadhog](https://github.com/sorrycc/roadhog)本地调试和构建，其中Mock功能实现脱离后端独立开发。
+-   浅度响应式设计。

 ## 更新日志

+### 4.3.0
+
+`2017-07-30`
+
+-     更新[roadhog](https://github.com/sorrycc/roadhog)至`1.0.0-beta.7`，得益于`webpack@3.4`，编译速度不减。
+-     基于使用roadhog的dll插件，开发时编译耗时减半。
+-     新增打包时按项目版本号生成文件目录。[#449](https://github.com/zuiidea/antd-admin/issues/449)
+-     更新`eslint`，并适当修改了`.eslintrc`。
+
+### 4.2.3
+
+`2017-07-07`
+
+-     新增用户按权限访问。[#384](https://github.com/zuiidea/antd-admin/issues/384)
+
+### 4.2.2
+
+`2017-06-01`
+
+-     新增用户管理批量删除。[#320](https://github.com/zuiidea/antd-admin/issues/320)
+
+### 4.2.1
+
+`2017-05-12`
+
+-     新增IconFont扩展方案,本地使用方案。[#270](https://github.com/zuiidea/antd-admin/issues/270) [Live](http://47.92.30.98:666/UIElement/iconfont)
+-     新增常见场景使用loading。 [dva-loading](https://github.com/dvajs/dva-loading)
+
 ### 4.2

 `2017-04-28`

-     修改user相关API使用`Restful`风格
-     增加user页面多条件查询[#266](https://github.com/zuiidea/antd-admin/issues/226)
-     修复菜单默认高亮[#201](https://github.com/zuiidea/antd-admin/issues/201)
+-     修改user相关API使用`Restful`风格。
+-     增加user页面多条件查询。[#266](https://github.com/zuiidea/antd-admin/issues/226)
+-     修复菜单默认高亮。[#201](https://github.com/zuiidea/antd-admin/issues/201)

-`2017-04-21`
-
-     重写Menu，Bread组件及配置文件，[说明](https://github.com/zuiidea/antd-admin/wiki/%E8%8F%9C%E5%8D%95%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6)
-
-### 4.1
-
-`2017-04-14`
-
-   升级开发工具为[roadhog](https://github.com/sorrycc/roadhog)
-   使用`roadhog`的mock功能
-   增强`utils/request.js`跨域处理能力
+      [More Change Log](https://github.com/zuiidea/antd-admin/wiki/Change-Log)

 ## 开发构建

@@ -50,6 +66,7 @@
 ```bash
 ├── /dist/           # 项目输出目录
 ├── /src/            # 项目源码目录
+│ ├── /public/       # 公共文件，编译时copy至dist目录
 │ ├── /components/   # UI组件及UI相关方法
 │ │ ├── skin.less    # 全局样式
 │ │ └── vars.less    # 全局样式变量
@@ -75,8 +92,8 @@

 文件夹命名说明:

-   components：组件（方法）为单位以文件夹保存，文件夹名组件首字母大写（如`DataTable`），方法首字母小写（如`layer`）,文件夹内主文件与文件夹同名，多文件以`index.js`导出对象（如`./src/components/Layout`）
-   routes：页面为单位以文件夹保存，文件夹名首字母小写（特殊除外，如`UIElement`）,文件夹内主文件以`index.js`导出，多文件时可建立`components`文件夹（如`./src/routes/dashboard`），如果有子路由，依次按照路由层次建立文件夹（如`./src/routes/UIElement`）
+-   components：组件（方法）为单位以文件夹保存，文件夹名组件首字母大写（如`DataTable`），方法首字母小写（如`layer`）,文件夹内主文件与文件夹同名，多文件以`index.js`导出对象（如`./src/components/Layout`）。
+-   routes：页面为单位以文件夹保存，文件夹名首字母小写（特殊除外，如`UIElement`）,文件夹内主文件以`index.js`导出，多文件时可建立`components`文件夹（如`./src/routes/dashboard`），如果有子路由，依次按照路由层次建立文件夹（如`./src/routes/UIElement`）。

 ### 快速开始

@@ -87,11 +104,11 @@
 进入目录安装依赖:

    npm i 或者 yarn install
-    npm i roadhog@0.6.0-beta.6 -g

 开发：

 ```bash
+npm run build:dll #第一次npm run dev时需运行此命令，使开发时编译更快
 npm run dev
 打开 http://localhost:8000
 ```
@@ -110,6 +127,14 @@ npm run build
 npm run lint
 ```

+## FAQ
+
+- 项目打包后如何部署？ [#269](https://github.com/zuiidea/antd-admin/issues/269)
+- 如何做权限管理？ [#384](https://github.com/zuiidea/antd-admin/issues/384)
+- 如何使用mock.js模拟接口，怎么使用线上接口？ [#348](https://github.com/zuiidea/antd-admin/issues/348)
+- 如何使用Iconfont，如何使用本地的svg图标？ [#270](https://github.com/zuiidea/antd-admin/issues/270)
+- 怎么按版本打包，上线时不影响正在访问的用户？ [#449](https://github.com/zuiidea/antd-admin/issues/449)
+
 ## 参考

 用户列表：<https://github.com/dvajs/dva/tree/master/examples/user-dashboard>
@@ -120,8 +145,8 @@ dashboard设计稿：<https://dribbble.com/shots/3108122-Dashboard-Admin> （已

 web

-![](assets/demo4.gif)
+![](assets/4.2.1-demo-1.gif)

 移动

-![](assets/demo3.gif)
+![](assets/4.2.1-demo-2.gif)
@@ -1,43 +1,54 @@
 {
  "private": true,
+  "name": "antd-admin",
+  "version": "4.3.0",
  "dependencies": {
-    "antd": "^2.9.1",
+    "antd": "^2.11.2",
+    "axios": "^0.16.2",
+    "babel-polyfill": "^6.23.0",
    "classnames": "^2.2.5",
+    "copy-webpack-plugin": "^4.0.1",
+    "d3-shape": "^1.2.0",
    "draftjs-to-markdown": "^0.4.0",
-    "dva": "^1.1.0",
+    "dva": "^1.2.0",
    "dva-loading": "^0.2.0",
+    "ejs-loader": "^0.3.0",
+    "jsonp": "^0.2.1",
+    "less-vars-to-js": "^1.1.2",
    "lodash": "^4.17.4",
+    "mockjs": "^1.0.1-beta3",
    "nprogress": "^0.2.0",
-    "qs": "^6.2.0",
-    "react": "^15.4.1",
-    "react-countup": "1.3.0",
-    "react-dom": "^15.4.1",
-    "react-draft-wysiwyg": "^1.8.1",
-    "react-helmet": "^5.0.0",
-    "recharts": "^0.19.0"
+    "path-to-regexp": "^1.7.0",
+    "prop-types": "^15.5.10",
+    "qs": "^6.5.0",
+    "rc-tween-one": "^1.3.1",
+    "react": "^15.6.1",
+    "react-countup": "^2.1.1",
+    "react-dom": "^15.6.1",
+    "react-draft-wysiwyg": "^1.10.0",
+    "react-helmet": "^5.1.3",
+    "recharts": "^0.22.4"
  },
  "devDependencies": {
-    "axios": "^0.15.3",
-    "babel-eslint": "^6.1.2",
+    "babel-eslint": "^7.2.3",
    "babel-plugin-dev-expression": "^0.2.1",
    "babel-plugin-dva-hmr": "^0.3.2",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-runtime": "^6.9.0",
-    "babel-polyfill": "^6.23.0",
    "babel-runtime": "^6.9.2",
    "draftjs-to-html": "^0.7.0",
-    "eslint": "^3.17.1",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.16.0",
-    "eslint-plugin-jsx-a11y": "^1.4.2",
-    "eslint-plugin-react": "^5.1.1",
-    "jsonp": "^0.2.1",
-    "less-vars-to-js": "^1.1.2",
-    "mockjs": "^1.0.1-beta3",
-    "path-to-regexp": "^1.7.0",
-    "rc-tween-one": "^1.0.0",
+    "dva-model-extend": "^0.1.1",
+    "eslint": "^4.1.1",
+    "eslint-config-airbnb": "^15.0.2",
+    "eslint-import-resolver-node": "^0.3.1",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-import": "^2.6.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.1.0",
+    "html-webpack-plugin": "^2.29.0",
+    "html-webpack-template": "^5.6.0",
    "redbox-react": "^1.2.10",
-    "roadhog": "^0.6.0-beta.6"
+    "roadhog": "1.0.0-beta.7"
  },
  "pre-commit": [
    "lint"
@@ -45,6 +56,7 @@
  "scripts": {
    "dev": "set BROWSER=none&&set HOST=0.0.0.0&&roadhog server",
    "lint": "eslint --fix --ext .js src",
-    "build": "roadhog build --analyze"
+    "build": "roadhog build",
+    "build:dll": "roadhog buildDll"
  }
 }
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Table } from 'antd'
-import { request } from '../../utils'
+import { request } from 'utils'
 import lodash from 'lodash'
 import './DataTable.less'

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Editor } from 'react-draft-wysiwyg'
-import styles from './Editor.less'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import styles from './Editor.less'


 const DraftEditor = (props) => {
@@ -11,8 +11,8 @@ const FilterItem = ({
    <div className={styles.filterItem}>
      {labelArray.length > 0
        ? <div className={styles.labelWrap}>
-            {labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
-          </div>
+          {labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
+        </div>
        : ''}
      <div className={styles.item}>
        {children}
@@ -1,17 +1,18 @@
+/* global location */
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Breadcrumb, Icon } from 'antd'
 import { Link } from 'dva/router'
-import styles from './Bread.less'
 import pathToRegexp from 'path-to-regexp'
-import { queryArray } from '../../utils'
+import { queryArray } from 'utils'
+import styles from './Bread.less'

 const Bread = ({ menu }) => {
  // 匹配当前路由
  let pathArray = []
  let current
  for (let index in menu) {
-    if (menu[index].router && pathToRegexp(menu[index].router).exec(location.pathname)) {
+    if (menu[index].route && pathToRegexp(menu[index].route).exec(location.pathname)) {
      current = menu[index]
      break
    }
@@ -25,7 +26,11 @@ const Bread = ({ menu }) => {
  }

  if (!current) {
-    pathArray.push(menu[0])
+    pathArray.push(menu[0] || {
+      id: 1,
+      icon: 'laptop',
+      name: 'Dashboard',
+    })
    pathArray.push({
      id: 404,
      name: 'Not Found',
@@ -38,14 +43,14 @@ const Bread = ({ menu }) => {
  const breads = pathArray.map((item, key) => {
    const content = (
      <span>{item.icon
-          ? <Icon type={item.icon} style={{ marginRight: 4 }} />
-          : ''}{item.name}</span>
+        ? <Icon type={item.icon} style={{ marginRight: 4 }} />
+        : ''}{item.name}</span>
    )
    return (
      <Breadcrumb.Item key={key}>
        {((pathArray.length - 1) !== key)
-          ? <Link to={item.router}>
-              {content}
+          ? <Link to={item.route}>
+            {content}
          </Link>
          : content}
      </Breadcrumb.Item>
@@ -1,9 +1,9 @@
 import React from 'react'
+import { config } from 'utils'
 import styles from './Footer.less'
-import { config } from '../../utils'

-const Footer = () => <div className={styles.footer}>
+const Footer = () => (<div className={styles.footer}>
  {config.footerText}
-</div>
+</div>)

 export default Footer
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Icon, Popover } from 'antd'
+import classnames from 'classnames'
 import styles from './Header.less'
 import Menus from './Menu'

@@ -26,18 +27,25 @@ const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVis
            <Icon type="bars" />
          </div>
        </Popover>
-        : <div className={styles.button} onClick={switchSider}>
-          <Icon type={siderFold ? 'menu-unfold' : 'menu-fold'} />
+        : <div
+          className={styles.button}
+          onClick={switchSider}
+        >
+          <Icon type={classnames({ 'menu-unfold': siderFold, 'menu-fold': !siderFold })} />
        </div>}
      <div className={styles.rightWarpper}>
        <div className={styles.button}>
          <Icon type="mail" />
        </div>
        <Menu mode="horizontal" onClick={handleClickMenu}>
-          <SubMenu style={{
-            float: 'right',
-          }} title={< span > <Icon type="user" />
-            {user.username} < /span>}
+          <SubMenu
+            style={{
+              float: 'right',
+            }}
+            title={<span>
+              <Icon type="user" />
+              {user.username}
+            </span>}
          >
            <Menu.Item key="logout">
              Sign out
@@ -14,6 +14,7 @@
  justify-content: space-between;
  height: 47px;
  background-color: #fff;
+  z-index: 999;

  .rightWarpper {
    display: flex;
@@ -1,18 +1,19 @@
+/* global location */
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Icon } from 'antd'
 import { Link } from 'dva/router'
-import { arrayToTree, queryArray } from '../../utils'
+import { arrayToTree, queryArray } from 'utils'
 import pathToRegexp from 'path-to-regexp'

-const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
+const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
  // 生成树状
-  const menuTree = arrayToTree(menu.filter(_ => _.mpid !== -1), 'id', 'mpid')
+  const menuTree = arrayToTree(menu.filter(_ => _.mpid !== '-1'), 'id', 'mpid')
  const levelMap = {}

  // 递归生成菜单
  const getMenus = (menuTreeN, siderFoldN) => {
-    return menuTreeN.map(item => {
+    return menuTreeN.map((item) => {
      if (item.children) {
        if (item.mpid) {
          levelMap[item.id] = item.mpid
@@ -22,7 +23,7 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys
            key={item.id}
            title={<span>
              {item.icon && <Icon type={item.icon} />}
-              {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name}
+              {(!siderFoldN || !menuTree.includes(item)) && item.name}
            </span>}
          >
            {getMenus(item.children, siderFoldN)}
@@ -31,9 +32,9 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys
      }
      return (
        <Menu.Item key={item.id}>
-          <Link to={item.router}>
+          <Link to={item.route}>
            {item.icon && <Icon type={item.icon} />}
-            {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name}
+            {(!siderFoldN || !menuTree.includes(item)) && item.name}
          </Link>
        </Menu.Item>
      )
@@ -60,8 +61,8 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys
  }

  const onOpenChange = (openKeys) => {
-    const latestOpenKey = openKeys.find(key => !(navOpenKeys.indexOf(key) > -1))
-    const latestCloseKey = navOpenKeys.find(key => !(openKeys.indexOf(key) > -1))
+    const latestOpenKey = openKeys.find(key => !navOpenKeys.includes(key))
+    const latestCloseKey = navOpenKeys.find(key => !openKeys.includes(key))
    let nextOpenKeys = []
    if (latestOpenKey) {
      nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey)
@@ -82,7 +83,7 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys
  let currentMenu
  let defaultSelectedKeys
  for (let item of menu) {
-    if (item.router && pathToRegexp(item.router).exec(location.pathname)) {
+    if (item.route && pathToRegexp(item.route).exec(location.pathname)) {
      currentMenu = item
      break
    }
@@ -119,8 +120,6 @@ Menus.propTypes = {
  menu: PropTypes.array,
  siderFold: PropTypes.bool,
  darkTheme: PropTypes.bool,
-  location: PropTypes.object,
-  isNavbar: PropTypes.bool,
  handleClickNavMenu: PropTypes.func,
  navOpenKeys: PropTypes.array,
  changeOpenKeys: PropTypes.func,
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Icon, Switch } from 'antd'
+import { config } from 'utils'
 import styles from './Layout.less'
-import { config } from '../../utils'
 import Menus from './Menu'

 const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) => {
@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import styles from './Loader.less'
+
+const Loader = ({ spinning }) => {
+  return (<div className={classNames(styles.loader, { [styles.hidden]: !spinning })}>
+    <div className={styles.warpper}>
+      <div className={styles.inner} />
+      <div className={styles.text} >LOADING</div>
+    </div>
+  </div>)
+}
+
+
+Loader.propTypes = {
+  spinning: PropTypes.bool,
+}
+
+export default Loader
@@ -0,0 +1,64 @@
+.loader {
+  display: block;
+  background-color: #fff;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  text-align: center;
+
+  .warpper {
+    width: 100px;
+    height: 100px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .inner {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto;
+    text-indent: -12345px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-left: 1px solid rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    z-index: 100001;
+
+    :local {
+      animation: spinner 600ms infinite linear;
+    }
+  }
+
+  .text {
+    width: 100px;
+    height: 20px;
+    text-align: center;
+    font-size: 12px;
+    letter-spacing: 4px;
+    color: #000;
+  }
+
+  &.hidden {
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
+  }
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
@@ -0,0 +1,6 @@
+{
+  "name": "Loader",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Loader.js"
+}
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
-import styles from './Search.less'
 import { Input, Select, Button, Icon } from 'antd'
+import styles from './Search.less'

 class Search extends React.Component {
  state = {
@@ -18,13 +18,13 @@ class Search extends React.Component {
    }
    if (this.props.onSearch) this.props.onSearch(data)
  }
-  handleInputChange = e => {
+  handleInputChange = (e) => {
    this.setState({
      ...this.state,
      clearVisible: e.target.value !== '',
    })
  }
-  handeleSelectChange = value => {
+  handleSelectChange = (value) => {
    this.setState({
      ...this.state,
      selectValue: value,
@@ -42,7 +42,7 @@ class Search extends React.Component {
    const { clearVisible } = this.state
    return (
      <Input.Group compact size={size} className={styles.search} style={style}>
-        {select && <Select ref="searchSelect" onChange={this.handeleSelectChange} size={size} {...selectProps}>
+        {select && <Select ref="searchSelect" onChange={this.handleSelectChange} size={size} {...selectProps}>
          {selectOptions && selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
        </Select>}
        <Input ref="searchInput" size={size} onChange={this.handleInputChange} onPressEnter={this.handleSearch} defaultValue={keyword} />
@@ -4,6 +4,7 @@ import Iconfont from './Iconfont'
 import Search from './Search'
 import Editor from './Editor'
 import FilterItem from './FilterItem'
+import Loader from './Loader'
 import * as Layout from './Layout/index.js'

 import layer from './layer'
@@ -16,5 +17,6 @@ export {
  Search,
  Editor,
  FilterItem,
+  Loader,
  layer,
- }
+}
@@ -1,8 +1,10 @@
+/* global document */
 import { Modal, message } from 'antd'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import classnames from 'classnames'
 import styles from './layer.less'
+
 const { info, success, error, warning, confirm } = Modal

 const layer = {
@@ -15,7 +17,7 @@ const layer = {
  confirm,
 }

-layer.close = (index) => new Promise((resolve, reject) => {
+layer.close = index => new Promise((resolve, reject) => {
  const { prefixCls } = layer
  let div = document.getElementById(`${prefixCls}-reference-${index}`)
  if (index === undefined) {
@@ -41,7 +43,7 @@ layer.closeAll = () => {
  let i = 0
  while (i < references.length) {
    layer.close()
-    i++
+    i += 1
  }
 }

@@ -50,7 +52,8 @@ layer.open = (config) => {
  const { content, ...modalProps } = props
  const { className, wrapClassName = '', verticalCenter = true } = modalProps
  const { prefixCls } = layer
-  const index = layer.index++
+  layer.index += 1
+  const index = layer.index
  let div = document.createElement('div')
  div.id = `${prefixCls}-reference-${index}`
  div.className = `${prefixCls}-reference`
@@ -14,6 +14,19 @@

 <body>
  <div id="root"></div>
+  <script type="text/javascript">
+    (function() {
+      var __oldConsoleError = window.console.error.bind(console)
+      window.console.error = function(message, b) {
+        if (message === "Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead." ||
+          "Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.") {
+          return false
+        }
+        __oldConsoleError(message)
+      }
+    })()
+  </script>
+  <script src="roadhog.dll.js"></script>
  <script src="/index.js"></script>
 </body>

@@ -1,9 +1,9 @@
-import './index.html'
-import 'babel-polyfill'
+import { message } from 'antd'
 import dva from 'dva'
 import createLoading from 'dva-loading'
 import { browserHistory } from 'dva/router'
-import { message } from 'antd'
+import 'babel-polyfill'
+import './index.html'

 // 1. Initialize
 const app = dva({
@@ -0,0 +1,63 @@
+const Mock = require('mockjs')
+const config = require('../utils/config')
+
+const queryArray = (array, key, keyAlias = 'key') => {
+  if (!(array instanceof Array)) {
+    return null
+  }
+  let data
+
+  for (const item of array) {
+    if (item[keyAlias] === key) {
+      data = item
+      break
+    }
+  }
+
+  if (data) {
+    return data
+  }
+  return null
+}
+
+const NOTFOUND = {
+  message: 'Not Found',
+  documentation_url: 'http://localhost:8000/request',
+}
+
+
+let postId = 0
+const posts = Mock.mock({
+  'data|100': [
+    {
+      id () {
+        postId += 1
+        return postId + 10000
+      },
+      'status|1-2': 1,
+      title: '@title',
+      author: '@last',
+      categories: '@word',
+      tags: '@word',
+      'views|10-200': 1,
+      'comments|10-200': 1,
+      visibility: () => {
+        return Mock.mock('@pick(["Public",'
+          + '"Password protected", '
+          + '"Private"])')
+      },
+      date: '@dateTime',
+      image () {
+        return Mock.Random.image('100x100', Mock.Random.color(), '#757575', 'png', this.author.substr(0, 1))
+      },
+    },
+  ],
+}).data
+
+module.exports = {
+  queryArray,
+  NOTFOUND,
+  Mock,
+  posts,
+  config,
+}
@@ -1,6 +1,8 @@
 import { color } from '../utils/theme'
+
 const Mock = require('mockjs')
 const config = require('../utils/config')
+
 const { apiPrefix } = config

 const Dashboard = Mock.mock({
@@ -0,0 +1,164 @@
+const { config } = require('./common')
+
+const { apiPrefix } = config
+let database = [
+  {
+    id: '1',
+    icon: 'laptop',
+    name: 'Dashboard',
+    route: '/dashboard',
+  },
+  {
+    id: '2',
+    bpid: '1',
+    name: 'Users',
+    icon: 'user',
+    route: '/user',
+  },
+  {
+    id: '7',
+    bpid: '1',
+    name: 'Posts',
+    icon: 'shopping-cart',
+    route: '/post',
+  },
+  {
+    id: '21',
+    mpid: '-1',
+    bpid: '2',
+    name: 'User Detail',
+    route: '/user/:id',
+  },
+  {
+    id: '3',
+    bpid: '1',
+    name: 'Request',
+    icon: 'api',
+    route: '/request',
+  },
+  {
+    id: '4',
+    bpid: '1',
+    name: 'UI Element',
+    icon: 'camera-o',
+  },
+  {
+    id: '41',
+    bpid: '4',
+    mpid: '4',
+    name: 'IconFont',
+    icon: 'heart-o',
+    route: '/UIElement/iconfont',
+  },
+  {
+    id: '42',
+    bpid: '4',
+    mpid: '4',
+    name: 'DataTable',
+    icon: 'database',
+    route: '/UIElement/dataTable',
+  },
+  {
+    id: '43',
+    bpid: '4',
+    mpid: '4',
+    name: 'DropOption',
+    icon: 'bars',
+    route: '/UIElement/dropOption',
+  },
+  {
+    id: '44',
+    bpid: '4',
+    mpid: '4',
+    name: 'Search',
+    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: '5',
+    bpid: '1',
+    name: 'Recharts',
+    icon: 'code-o',
+  },
+  {
+    id: '51',
+    bpid: '5',
+    mpid: '5',
+    name: 'LineChart',
+    icon: 'line-chart',
+    route: '/chart/lineChart',
+  },
+  {
+    id: '52',
+    bpid: '5',
+    mpid: '5',
+    name: 'BarChart',
+    icon: 'bar-chart',
+    route: '/chart/barChart',
+  },
+  {
+    id: '53',
+    bpid: '5',
+    mpid: '5',
+    name: 'AreaChart',
+    icon: 'area-chart',
+    route: '/chart/areaChart',
+  },
+  {
+    id: '6',
+    bpid: '1',
+    name: 'Test Navigation',
+    icon: 'setting',
+  },
+  {
+    id: '61',
+    bpid: '6',
+    mpid: '6',
+    name: 'Test Navigation1',
+    route: '/navigation/navigation1',
+  },
+  {
+    id: '62',
+    bpid: '6',
+    mpid: '6',
+    name: 'Test Navigation2',
+    route: '/navigation/navigation2',
+  },
+  {
+    id: '621',
+    bpid: '62',
+    mpid: '62',
+    name: 'Test Navigation21',
+    route: '/navigation/navigation2/navigation1',
+  },
+  {
+    id: '622',
+    bpid: '62',
+    mpid: '62',
+    name: 'Test Navigation22',
+    route: '/navigation/navigation2/navigation2',
+  },
+]
+
+module.exports = {
+
+  [`GET ${apiPrefix}/menus`] (req, res) {
+    res.status(200).json(database)
+  },
+}
@@ -0,0 +1,31 @@
+const { config, posts } = require('./common')
+
+const { apiPrefix } = config
+let database = posts
+
+module.exports = {
+
+  [`GET ${apiPrefix}/posts`] (req, res) {
+    const { query } = req
+    let { pageSize, page, ...other } = query
+    pageSize = pageSize || 10
+    page = page || 1
+
+    let newData = database
+    for (let key in other) {
+      if ({}.hasOwnProperty.call(other, key)) {
+        newData = newData.filter((item) => {
+          if ({}.hasOwnProperty.call(item, key)) {
+            return String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) > -1
+          }
+          return true
+        })
+      }
+    }
+
+    res.status(200).json({
+      data: newData.slice((page - 1) * pageSize, page * pageSize),
+      total: newData.length,
+    })
+  },
+}
@@ -1,6 +1,7 @@
 const qs = require('qs')
 const Mock = require('mockjs')
 const config = require('../utils/config')
+
 const { apiPrefix } = config

 let usersListData = Mock.mock({
@@ -25,14 +26,23 @@ let usersListData = Mock.mock({

 let database = usersListData.data

+const EnumRoleType = {
+  ADMIN: 'admin',
+  DEFAULT: 'guest',
+  DEVELOPER: 'developer',
+}
+
 const userPermission = {
-  DEFAULT: [
-    'dashboard', 'chart',
-  ],
-  ADMIN: [
-    'dashboard', 'users', 'UIElement', 'UIElementIconfont', 'chart',
-  ],
-  DEVELOPER: ['dashboard', 'users', 'UIElement', 'UIElementIconfont', 'chart'],
+  DEFAULT: {
+    visit: ['1', '2', '21', '7', '5', '51', '52', '53'],
+    role: EnumRoleType.DEFAULT,
+  },
+  ADMIN: {
+    role: EnumRoleType.ADMIN,
+  },
+  DEVELOPER: {
+    role: EnumRoleType.DEVELOPER,
+  },
 }

 const adminUsers = [
@@ -82,7 +92,7 @@ module.exports = {

  [`POST ${apiPrefix}/user/login`] (req, res) {
    const { username, password } = req.body
-    const user = adminUsers.filter((item) => item.username === username)
+    const user = adminUsers.filter(item => item.username === username)

    if (user.length > 0 && user[0].password === password) {
      const now = new Date()
@@ -163,6 +173,13 @@ module.exports = {
    })
  },

+  [`DELETE ${apiPrefix}/users`] (req, res) {
+    const { ids } = req.body
+    database = database.filter(item => !ids.some(_ => _ === item.id))
+    res.status(204).end()
+  },
+
+
  [`POST ${apiPrefix}/user`] (req, res) {
    const newData = req.body
    newData.createTime = Mock.mock('@now')
@@ -188,7 +205,7 @@ module.exports = {
    const { id } = req.params
    const data = queryArray(database, id, 'id')
    if (data) {
-      database = database.filter((item) => item.id !== id)
+      database = database.filter(item => item.id !== id)
      res.status(204).end()
    } else {
      res.status(404).json(NOTFOUND)
@@ -1,18 +1,35 @@
-import { query, logout } from '../services/app'
+/* global window */
+/* global document */
+/* global location */
 import { routerRedux } from 'dva/router'
 import { parse } from 'qs'
-import { config } from '../utils'
+import config from 'config'
+import { EnumRoleType } from 'enums'
+import { query, logout } from '../services/app'
+import * as menusService from '../services/menus'
+
 const { prefix } = config

 export default {
  namespace: 'app',
  state: {
    user: {},
+    permissions: {
+      visit: [],
+    },
+    menu: [
+      {
+        id: 1,
+        icon: 'laptop',
+        name: 'Dashboard',
+        router: '/dashboard',
+      },
+    ],
    menuPopoverVisible: false,
-    siderFold: localStorage.getItem(`${prefix}siderFold`) === 'true',
-    darkTheme: localStorage.getItem(`${prefix}darkTheme`) === 'true',
+    siderFold: window.localStorage.getItem(`${prefix}siderFold`) === 'true',
+    darkTheme: window.localStorage.getItem(`${prefix}darkTheme`) === 'true',
    isNavbar: document.body.clientWidth < 769,
-    navOpenKeys: JSON.parse(localStorage.getItem(`${prefix}navOpenKeys`)) || [],
+    navOpenKeys: JSON.parse(window.localStorage.getItem(`${prefix}navOpenKeys`)) || [],
  },
  subscriptions: {

@@ -30,30 +47,44 @@ export default {
  },
  effects: {

-    *query ({
+    * query ({
      payload,
    }, { call, put }) {
-      const data = yield call(query, parse(payload))
-      if (data.success && data.user) {
+      const { success, user } = yield call(query, payload)
+      if (success && user) {
+        const { list } = yield call(menusService.query)
+        const { permissions } = user
+        let menu = list
+        if (permissions.role === EnumRoleType.ADMIN || permissions.role === EnumRoleType.DEVELOPER) {
+          permissions.visit = list.map(item => item.id)
+        } else {
+          menu = list.filter((item) => {
+            const cases = [
+              permissions.visit.includes(item.id),
+              item.mpid ? permissions.visit.includes(item.mpid) || item.mpid === '-1' : true,
+              item.bpid ? permissions.visit.includes(item.bpid) : true,
+            ]
+            return cases.every(_ => _)
+          })
+        }
        yield put({
-          type: 'querySuccess',
-          payload: data.user,
+          type: 'updateState',
+          payload: {
+            user,
+            permissions,
+            menu,
+          },
        })
        if (location.pathname === '/login') {
          yield put(routerRedux.push('/dashboard'))
        }
-      } else {
-        if (location.pathname !== '/login') {
-          let from = location.pathname
-          if (location.pathname === '/dashboard') {
-            from = '/dashboard'
-          }
-          window.location = `${location.origin}/login?from=${from}`
-        }
+      } else if (config.openPages && config.openPages.indexOf(location.pathname) < 0) {
+        let from = location.pathname
+        window.location = `${location.origin}/login?from=${from}`
      }
    },

-    *logout ({
+    * logout ({
      payload,
    }, { call, put }) {
      const data = yield call(logout, parse(payload))
@@ -64,10 +95,8 @@ export default {
      }
    },

-    *changeNavbar ({
-      payload,
-    }, { put, select }) {
-      const { app } = yield(select(_ => _))
+    * changeNavbar (action, { put, select }) {
+      const { app } = yield (select(_ => _))
      const isNavbar = document.body.clientWidth < 769
      if (isNavbar !== app.isNavbar) {
        yield put({ type: 'handleNavbar', payload: isNavbar })
@@ -76,15 +105,15 @@ export default {

  },
  reducers: {
-    querySuccess (state, { payload: user }) {
+    updateState (state, { payload }) {
      return {
        ...state,
-        user,
+        ...payload,
      }
    },

    switchSider (state) {
-      localStorage.setItem(`${prefix}siderFold`, !state.siderFold)
+      window.localStorage.setItem(`${prefix}siderFold`, !state.siderFold)
      return {
        ...state,
        siderFold: !state.siderFold,
@@ -92,7 +121,7 @@ export default {
    },

    switchTheme (state) {
-      localStorage.setItem(`${prefix}darkTheme`, !state.darkTheme)
+      window.localStorage.setItem(`${prefix}darkTheme`, !state.darkTheme)
      return {
        ...state,
        darkTheme: !state.darkTheme,
@@ -0,0 +1,47 @@
+import modelExtend from 'dva-model-extend'
+
+const model = {
+  reducers: {
+    updateState (state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      }
+    },
+  },
+}
+
+const pageModel = modelExtend(model, {
+
+  state: {
+    list: [],
+    pagination: {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: total => `Total ${total} Items`,
+      current: 1,
+      total: 0,
+    },
+  },
+
+  reducers: {
+    querySuccess (state, { payload }) {
+      const { list, pagination } = payload
+      return {
+        ...state,
+        list,
+        pagination: {
+          ...state.pagination,
+          ...pagination,
+        },
+      }
+    },
+  },
+
+})
+
+
+module.exports = {
+  model,
+  pageModel,
+}
@@ -1,5 +1,5 @@
-import { myCity, queryWeather, query } from '../services/dashboard'
 import { parse } from 'qs'
+import { myCity, queryWeather, query } from '../services/dashboard'

 // zuimei 摘自 http://www.zuimeitianqi.com/res/js/index.js
 let zuimei = {
@@ -34,12 +34,10 @@ let zuimei = {
          num = `${num}_${flg}.png`
        }
      }
+    } else if ((hour >= 18 && hour <= 23) || (hour >= 0 && hour <= 6)) {
+      num = `${num}_${flg}_night.png`
    } else {
-      if ((hour >= 18 && hour <= 23) || (hour >= 0 && hour <= 6)) {
-        num = `${num}_${flg}_night.png`
-      } else {
-        num = `${num}_${flg}.png`
-      }
+      num = `${num}_${flg}.png`
    }

    return num
@@ -195,22 +193,21 @@ export default {
    },
  },
  effects: {
-    *query ({
+    * query ({
      payload,
    }, { call, put }) {
      const data = yield call(query, parse(payload))
      yield put({ type: 'queryWeather', payload: { ...data } })
    },
-    *queryWeather ({
-      payload,
-    }, { call, put }) {
+    * queryWeather (action, { call, put }) {
      const myCityResult = yield call(myCity, { flg: 0 })
      const result = yield call(queryWeather, { cityCode: myCityResult.selectCityCode })
      const weather = zuimei.parseActualData(result.data.actual)
      weather.city = myCityResult.selectCityName
-      yield put({ type: 'queryWeatherSuccess', payload: {
-        weather,
-      } })
+      yield put({ type: 'queryWeatherSuccess',
+        payload: {
+          weather,
+        } })
    },
  },
  reducers: {
@@ -1,6 +1,6 @@
-import { login } from '../services/login'
 import { routerRedux } from 'dva/router'
-import { queryURL } from '../utils'
+import { queryURL } from 'utils'
+import { login } from '../services/login'

 export default {
  namespace: 'login',
@@ -9,7 +9,7 @@ export default {
  },

  effects: {
-    *login ({
+    * login ({
      payload,
    }, { put, call }) {
      yield put({ type: 'showLoginLoading' })
@@ -0,0 +1,45 @@
+import modelExtend from 'dva-model-extend'
+import { query } from '../services/posts'
+import { pageModel } from './common'
+
+export default modelExtend(pageModel, {
+
+  namespace: 'post',
+
+  subscriptions: {
+    setup ({ dispatch, history }) {
+      history.listen((location) => {
+        if (location.pathname === '/post') {
+          dispatch({ type: 'query',
+            payload: {
+              status: 2,
+              ...location.query,
+            } })
+        }
+      })
+    },
+  },
+
+  effects: {
+    * query ({
+      payload,
+    }, { call, put }) {
+      const data = yield call(query, payload)
+      if (data.success) {
+        yield put({
+          type: 'querySuccess',
+          payload: {
+            list: data.data,
+            pagination: {
+              current: Number(payload.page) || 1,
+              pageSize: Number(payload.pageSize) || 10,
+              total: data.total,
+            },
+          },
+        })
+      } else {
+        throw data
+      }
+    },
+  },
+})
@@ -1,29 +1,27 @@
+/* global window */
+import modelExtend from 'dva-model-extend'
+import { config } from 'utils'
 import { create, remove, update } from '../services/user'
-import { query } from '../services/users'
-import { parse } from 'qs'
+import * as usersService from '../services/users'
+import { pageModel } from './common'

-export default {
+const { query } = usersService
+const { prefix } = config

+export default modelExtend(pageModel, {
  namespace: 'user',

  state: {
-    list: [],
    currentItem: {},
    modalVisible: false,
    modalType: 'create',
-    isMotion: localStorage.getItem('antdAdminUserIsMotion') === 'true',
-    pagination: {
-      showSizeChanger: true,
-      showQuickJumper: true,
-      showTotal: total => `共 ${total} 条`,
-      current: 1,
-      total: null,
-    },
+    selectedRowKeys: [],
+    isMotion: window.localStorage.getItem(`${prefix}userIsMotion`) === 'true',
  },

  subscriptions: {
    setup ({ dispatch, history }) {
-      history.listen(location => {
+      history.listen((location) => {
        if (location.pathname === '/user') {
          dispatch({
            type: 'query',
@@ -36,8 +34,7 @@ export default {

  effects: {

-    *query ({ payload }, { call, put }) {
-      payload = parse(location.search.substr(1))
+    * query ({ payload = {} }, { call, put }) {
      const data = yield call(query, payload)
      if (data) {
        yield put({
@@ -54,16 +51,28 @@ export default {
      }
    },

-    *'delete' ({ payload }, { call, put }) {
+    * delete ({ payload }, { call, put, select }) {
      const data = yield call(remove, { id: payload })
+      const { selectedRowKeys } = yield select(_ => _.user)
      if (data.success) {
+        yield put({ type: 'updateState', payload: { selectedRowKeys: selectedRowKeys.filter(_ => _ !== payload) } })
        yield put({ type: 'query' })
      } else {
        throw data
      }
    },

-    *create ({ payload }, { call, put }) {
+    * multiDelete ({ payload }, { call, put }) {
+      const data = yield call(usersService.remove, payload)
+      if (data.success) {
+        yield put({ type: 'updateState', payload: { selectedRowKeys: [] } })
+        yield put({ type: 'query' })
+      } else {
+        throw data
+      }
+    },
+
+    * create ({ payload }, { call, put }) {
      const data = yield call(create, payload)
      if (data.success) {
        yield put({ type: 'hideModal' })
@@ -73,7 +82,7 @@ export default {
      }
    },

-    *update ({ payload }, { select, call, put }) {
+    * update ({ payload }, { select, call, put }) {
      const id = yield select(({ user }) => user.currentItem.id)
      const newUser = { ...payload, id }
      const data = yield call(update, newUser)
@@ -89,18 +98,8 @@ export default {

  reducers: {

-    querySuccess (state, action) {
-      const { list, pagination } = action.payload
-      return { ...state,
-        list,
-        pagination: {
-          ...state.pagination,
-          ...pagination,
-        } }
-    },
-
-    showModal (state, action) {
-      return { ...state, ...action.payload, modalVisible: true }
+    showModal (state, { payload }) {
+      return { ...state, ...payload, modalVisible: true }
    },

    hideModal (state) {
@@ -108,10 +107,9 @@ export default {
    },

    switchIsMotion (state) {
-      localStorage.setItem('antdAdminUserIsMotion', !state.isMotion)
+      window.localStorage.setItem(`${prefix}userIsMotion`, !state.isMotion)
      return { ...state, isMotion: !state.isMotion }
    },

  },
-
-}
+})
@@ -1,3 +1,4 @@
+/* global location */
 import pathToRegexp from 'path-to-regexp'
 import { query } from '../../services/user'

@@ -21,7 +22,7 @@ export default {
  },

  effects: {
-    *query ({
+    * query ({
      payload,
    }, { call, put }) {
      const data = yield call(query, payload)
@@ -15,7 +15,7 @@ const Routers = function ({ history, app }) {
      path: '/',
      component: App,
      getIndexRoute (nextState, cb) {
-        require.ensure([], require => {
+        require.ensure([], (require) => {
          registerModel(app, require('./models/dashboard'))
          cb(null, { component: require('./routes/dashboard/') })
        }, 'dashboard')
@@ -24,7 +24,7 @@ const Routers = function ({ history, app }) {
        {
          path: 'dashboard',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              registerModel(app, require('./models/dashboard'))
              cb(null, require('./routes/dashboard/'))
            }, 'dashboard')
@@ -32,7 +32,7 @@ const Routers = function ({ history, app }) {
        }, {
          path: 'user',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              registerModel(app, require('./models/user'))
              cb(null, require('./routes/user/'))
            }, 'user')
@@ -40,7 +40,7 @@ const Routers = function ({ history, app }) {
        }, {
          path: 'user/:id',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              registerModel(app, require('./models/user/detail'))
              cb(null, require('./routes/user/detail/'))
            }, 'user-detail')
@@ -48,7 +48,7 @@ const Routers = function ({ history, app }) {
        }, {
          path: 'login',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              registerModel(app, require('./models/login'))
              cb(null, require('./routes/login/'))
            }, 'login')
@@ -56,77 +56,85 @@ const Routers = function ({ history, app }) {
        }, {
          path: 'request',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/request/'))
            }, 'request')
          },
        }, {
          path: 'UIElement/iconfont',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/UIElement/iconfont/'))
            }, 'UIElement-iconfont')
          },
        }, {
          path: 'UIElement/search',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/UIElement/search/'))
            }, 'UIElement-search')
          },
        }, {
          path: 'UIElement/dropOption',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/UIElement/dropOption/'))
            }, 'UIElement-dropOption')
          },
        }, {
          path: 'UIElement/layer',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/UIElement/layer/'))
            }, 'UIElement-layer')
          },
        }, {
          path: 'UIElement/dataTable',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/UIElement/dataTable/'))
            }, 'UIElement-dataTable')
          },
        }, {
          path: 'UIElement/editor',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/UIElement/editor/'))
            }, 'UIElement-editor')
          },
        }, {
          path: 'chart/lineChart',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/chart/lineChart/'))
            }, 'chart-lineChart')
          },
        }, {
          path: 'chart/barChart',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/chart/barChart/'))
            }, 'chart-barChart')
          },
        }, {
          path: 'chart/areaChart',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/chart/areaChart/'))
            }, 'chart-areaChart')
          },
+        }, {
+          path: 'post',
+          getComponent (nextState, cb) {
+            require.ensure([], (require) => {
+              registerModel(app, require('./models/post'))
+              cb(null, require('./routes/post/'))
+            }, 'post')
+          },
        }, {
          path: '*',
          getComponent (nextState, cb) {
-            require.ensure([], require => {
+            require.ensure([], (require) => {
              cb(null, require('./routes/error/'))
            }, 'error')
          },
@@ -1,5 +1,5 @@
 import React from 'react'
-import { DataTable } from '../../../components'
+import { DataTable } from 'components'
 import { Table, Row, Col, Card, Select } from 'antd'

 class DataTablePage extends React.Component {
@@ -35,7 +35,7 @@ class DataTablePage extends React.Component {
        dataKey: 'results',
      },
      columns: [
-        { title: 'Name', dataIndex: 'name', render: (text) => `${text.first} ${text.last}` },
+        { title: 'Name', dataIndex: 'name', render: text => `${text.first} ${text.last}` },
        { title: 'Phone', dataIndex: 'phone' },
        { title: 'Gender', dataIndex: 'gender' },
      ],
@@ -53,7 +53,7 @@ class DataTablePage extends React.Component {
        dataKey: 'results',
      },
      columns: [
-        { title: 'Name', dataIndex: 'name', render: (text) => `${text.first} ${text.last}` },
+        { title: 'Name', dataIndex: 'name', render: text => `${text.first} ${text.last}` },
        { title: 'Phone', dataIndex: 'phone' },
        { title: 'Gender', dataIndex: 'gender' },
      ],
@@ -1,8 +1,8 @@
 import React from 'react'
-import { DropOption } from '../../../components'
+import { DropOption } from 'components'
 import { Table, Row, Col, Card, message } from 'antd'

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

 export default DropOptionPage
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Editor } from '../../../components'
+import { Editor } from 'components'
 import { convertToRaw } from 'draft-js'
 import { Row, Col, Card } from 'antd'
 import draftToHtml from 'draftjs-to-html'
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Iconfont } from '../../../components'
+import { Iconfont } from 'components'
 import { Table, Row, Col, Icon } from 'antd'
 import styles from './index.less'
-import './emoji.js'
+import './emoji'

 const colorfulIcons = ['boluo', 'baixiangguo', 'chengzi', 'boluomei', 'caomei', 'dayouzi', 'chelizi', 'fanqie', 'hamigua', 'ganlan',
  'juzi', 'heimei', 'huolongguo', 'hongmei', 'lizi', 'lanmei', 'mangguo', 'mihoutao', 'longyan', 'mugua', 'lizi1', 'ningmeng']
@@ -24,35 +24,35 @@ const localRequireSVGIcons = [
  require('../../../svg/cute/think.svg'),
 ]

-const IcoPage = () => <div className="content-inner">
+const IcoPage = () => (<div className="content-inner">
  <Icon type="star-oo" />
  <h2 style={{ margin: '16px 0' }}>Colorful Icon</h2>
  <ul className={styles.list}>
-    {colorfulIcons.map(item => <li key={item}>
+    {colorfulIcons.map(item => (<li key={item}>
      <Iconfont className={styles.icon} colorful type={item} />
      <span className={styles.name}>{item}</span>
-    </li>)}
+    </li>))}
  </ul>
  <h2 style={{ margin: '16px 0' }}>Flat Icon</h2>
  <ul className={styles.list}>
-    {flatIcons.map(item => <li key={item}>
+    {flatIcons.map(item => (<li key={item}>
      <Iconfont className={styles.icon} type={item} />
      <span className={styles.name}>{item}</span>
-    </li>)}
+    </li>))}
  </ul>
  <h2 style={{ margin: '16px 0' }}>Local SVG</h2>
  <ul className={styles.list}>
-    {localSVGIcons.map(item => <li key={item}>
+    {localSVGIcons.map(item => (<li key={item}>
      <Iconfont className={styles.icon} colorful type={item} />
      <span className={styles.name}>{item}</span>
-    </li>)}
+    </li>))}
  </ul>
  <h2 style={{ margin: '16px 0' }}>Local Require SVG</h2>
  <ul className={styles.list}>
-    {localRequireSVGIcons.map(item => <li key={item}>
-      <Iconfont className={styles.icon} colorful type={item} />
-      <span className={styles.name}>{item}</span>
-    </li>)}
+    {localRequireSVGIcons.map(item => (<li key={item.default.id}>
+      <Iconfont className={styles.icon} colorful type={item.default.id} />
+      <span className={styles.name}>{item.default.id}</span>
+    </li>))}
  </ul>
  <h2 style={{ margin: '16px 0' }}>API</h2>
  <Row>
@@ -100,17 +100,17 @@ const IcoPage = () => <div className="content-inner">
  <div style={{ margin: '16px 0', lineHeight: 2 }}>
    <p>
      <a href="http://www.iconfont.cn/user/detail?uid=116813">何阿酥</a> colorful fruit icon
-      <a href="http://www.iconfont.cn/collections/detail?cid=4014" target="_blank"> http://www.iconfont.cn/collections/detail?cid=4014</a>
+      <a href="http://www.iconfont.cn/collections/detail?cid=4014" target="_blank" rel="noopener noreferrer"> http://www.iconfont.cn/collections/detail?cid=4014</a>
    </p>
    <p>
-      <a href="http://www.iconfont.cn/user/detail?uid=496384">ColinXu</a> colorful 'tsundere' emoji icon
-      <a href="http://www.iconfont.cn/collections/detail?cid=4116" target="_blank"> http://www.iconfont.cn/collections/detail?cid=4116</a>
+      <a href="http://www.iconfont.cn/user/detail?uid=496384">ColinXu</a> colorful &apos;tsundere&apos; emoji icon
+      <a href="http://www.iconfont.cn/collections/detail?cid=4116" target="_blank" rel="noopener noreferrer"> http://www.iconfont.cn/collections/detail?cid=4116</a>
    </p>
    <p>
-      <a href="http://www.iconfont.cn/user/detail?uid=116813">咕噜小莫莫</a> colorful 'face cute' emoji icon
-      <a href="http://www.iconfont.cn/collections/detail?cid=4268" target="_blank"> http://www.iconfont.cn/collections/detail?cid=4268</a>
+      <a href="http://www.iconfont.cn/user/detail?uid=116813">咕噜小莫莫</a> colorful &apos;face cute&apos; emoji icon
+      <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>
+</div>)

 export default IcoPage
@@ -1,5 +1,5 @@
 import React from 'react'
-import { layer } from '../../../components'
+import { layer } from 'components'
 import { Table, Row, Col, Button, Card } from 'antd'

 let Enum = {
@@ -26,7 +26,7 @@ const IcoPage = () => {
    <h2 style={{ margin: '16px 0' }}>API</h2>
    <div style={{ margin: '16px 0' }}>
      <h2 style={{ margin: '4px 0' }}>layer.open(config)</h2>
-      config对象与<a href="https://ant.design/components/modal-cn/#API" target="_blank">Modal</a>的参数基本一致，config属性如下。
+      config对象与<a href="https://ant.design/components/modal-cn/#API" target="_blank" rel="noopener noreferrer">Modal</a>的参数基本一致，config属性如下。
      注意：1.visible属性一般不需要设置；2.afterClose无效，layer.close()可代替;3.layer.open()返回一个唯一的layer Id
    </div>
    <Row>
@@ -69,7 +69,7 @@ const IcoPage = () => {
            },
            {
              props: 'confirmLoading',
-              desciption: '确定按钮 loading	',
+              desciption: '确定按钮 loading',
              type: 'boolean',
              default: '无',
            },
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Search } from '../../../components'
+import { Search } from 'components'
 import { Table, Row, Col, Card } from 'antd'

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

 export default SearchPage
@@ -1,19 +1,28 @@
+/* global window */
 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 } from '../components'
-import { classnames, config, menu } from '../utils'
+import { Layout, Loader } from 'components'
+import { classnames, config } from 'utils'
 import { Helmet } from 'react-helmet'
 import '../themes/index.less'
 import './app.less'
-import NProgress from 'nprogress'
-const { prefix } = config
+import Error from './error'
+
+const { prefix, openPages } = config

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

-const App = ({ children, location, dispatch, app, loading }) => {
-  const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys } = 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

  if (lastHref !== href) {
@@ -28,7 +37,6 @@ const App = ({ children, location, dispatch, app, loading }) => {
    menu,
    user,
    siderFold,
-    location,
    isNavbar,
    menuPopoverVisible,
    navOpenKeys,
@@ -50,13 +58,12 @@ const App = ({ children, location, dispatch, app, loading }) => {
    menu,
    siderFold,
    darkTheme,
-    location,
    navOpenKeys,
    changeTheme () {
      dispatch({ type: 'app/switchTheme' })
    },
    changeOpenKeys (openKeys) {
-      localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
+      window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
      dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
    },
  }
@@ -64,20 +71,19 @@ const App = ({ children, location, dispatch, app, loading }) => {
  const breadProps = {
    menu,
  }
-
-  if (config.openPages && config.openPages.indexOf(location.pathname) > -1) {
-    return <div>{children}</div>
+  if (openPages && openPages.includes(pathname)) {
+    return (<div>
+      <Loader spinning={loading.effects['app/query']} />
+      {children}
+    </div>)
  }
-
-  const { iconFontJS, iconFontCSS, logo } = config
-
  return (
    <div>
      <Helmet>
        <title>ANTD ADMIN</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href={logo} type="image/x-icon" />
-        {iconFontJS && <script src={iconFontJS}></script>}
+        {iconFontJS && <script src={iconFontJS} />}
        {iconFontCSS && <link rel="stylesheet" href={iconFontCSS} />}
      </Helmet>
      <div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
@@ -86,10 +92,10 @@ const App = ({ children, location, dispatch, app, loading }) => {
        </aside> : ''}
        <div className={styles.main}>
          <Header {...headerProps} />
-          <Bread {...breadProps} location={location} />
+          <Bread {...breadProps} />
          <div className={styles.container}>
            <div className={styles.content}>
-              {children}
+              {hasPermission ? children : <Error />}
            </div>
          </div>
          <Footer />
@@ -1,16 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './Container.less'
 import { ResponsiveContainer } from 'recharts'
+import styles from './Container.less'

-const Container = ({ children, ratio = 5 / 2, minHeight = 250, maxHeight = 350 }) => <div className={styles.container} style={{ minHeight, maxHeight }}>
-  <div style={{ marginTop: `${100 / ratio}%` || '100%' }}></div>
+const Container = ({ children, ratio = 5 / 2, minHeight = 250, maxHeight = 350 }) => (<div className={styles.container} style={{ minHeight, maxHeight }}>
+  <div style={{ marginTop: `${100 / ratio}%` || '100%' }} />
  <div className={styles.content} style={{ minHeight, maxHeight }}>
    <ResponsiveContainer>
      {children}
    </ResponsiveContainer>
  </div>
-</div>
+</div>)

 Container.propTypes = {
  children: PropTypes.element.isRequired,
@@ -1,7 +1,6 @@
 import React from 'react'
-import { Row, Col, Card, Button } from 'antd'
-import Container from '../Container'
 import * as d3 from 'd3-shape'
+import { Row, Col, Card, Button } from 'antd'
 import {
  AreaChart,
  Area,
@@ -10,6 +9,7 @@ import {
  CartesianGrid,
  Tooltip,
 } from 'recharts'
+import Container from '../Container'

 const data = [
  {
@@ -135,12 +135,14 @@ const colProps = {

 const SimpleAreaChart = () => (
  <Container>
-    <AreaChart data={data} margin={{
-      top: 10,
-      right: 30,
-      left: 0,
-      bottom: 0,
-    }}>
+    <AreaChart data={data}
+      margin={{
+        top: 10,
+        right: 30,
+        left: 0,
+        bottom: 0,
+      }}
+    >
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
@@ -152,12 +154,14 @@ const SimpleAreaChart = () => (

 const StackedAreaChart = () => (
  <Container>
-    <AreaChart data={mixData} margin={{
-      top: 10,
-      right: 30,
-      left: 0,
-      bottom: 0,
-    }}>
+    <AreaChart data={mixData}
+      margin={{
+        top: 10,
+        right: 30,
+        left: 0,
+        bottom: 0,
+      }}
+    >
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
@@ -192,9 +196,11 @@ const renderTooltipContent = (o) => {
      <p className="total">{`${label} (Total: ${total})`}</p>
      <ul className="list">
        {payload.map((entry, index) => (
-          <li key={`item-${index}`} style={{
-            color: entry.color,
-          }}>
+          <li key={`item-${index}`}
+            style={{
+              color: entry.color,
+            }}
+          >
            {`${entry.name}: ${entry.value}(${getPercent(entry.value, total)})`}
          </li>
        ))}
@@ -205,12 +211,15 @@ const renderTooltipContent = (o) => {

 const PercentAreaChart = () => (
  <Container>
-    <AreaChart data={percentData} stackOffset="expand" margin={{
-      top: 10,
-      right: 30,
-      left: 0,
-      bottom: 0,
-    }}>
+    <AreaChart data={percentData}
+      stackOffset="expand"
+      margin={{
+        top: 10,
+        right: 30,
+        left: 0,
+        bottom: 0,
+      }}
+    >
      <XAxis dataKey="month" />
      <YAxis tickFormatter={toPercent} />
      <CartesianGrid strokeDasharray="3 3" />
@@ -226,12 +235,14 @@ const PercentAreaChart = () => (
 const cardinal = d3.curveCardinal.tension(0.2)
 const CardinalAreaChart = () => (
  <Container>
-    <AreaChart data={mixData} margin={{
-      top: 10,
-      right: 30,
-      left: 0,
-      bottom: 0,
-    }}>
+    <AreaChart data={mixData}
+      margin={{
+        top: 10,
+        right: 30,
+        left: 0,
+        bottom: 0,
+      }}
+    >
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
@@ -244,11 +255,14 @@ const CardinalAreaChart = () => (

 const EditorPage = () => (
  <div className="content-inner">
-    <Button type="primary" size="large" style={{
-      position: 'absolute',
-      right: 0,
-      top: -48,
-    }}>
+    <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}>
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col, Card, Button } from 'antd'
-import Container from '../Container'
 import {
  BarChart,
  Bar,
@@ -11,6 +10,7 @@ import {
  Tooltip,
  Legend,
 } from 'recharts'
+import Container from '../Container'

 const data = [
  {
@@ -96,12 +96,14 @@ const colProps = {

 const SimpleBarChart = () => (
  <Container>
-    <BarChart data={data} margin={{
-      top: 5,
-      right: 30,
-      left: 20,
-      bottom: 5,
-    }}>
+    <BarChart data={data}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5,
+      }}
+    >
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
@@ -115,12 +117,14 @@ const SimpleBarChart = () => (

 const StackedBarChart = () => (
  <Container>
-    <BarChart data={data} margin={{
-      top: 20,
-      right: 30,
-      left: 20,
-      bottom: 5,
-    }}>
+    <BarChart data={data}
+      margin={{
+        top: 20,
+        right: 30,
+        left: 20,
+        bottom: 5,
+      }}
+    >
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
@@ -134,12 +138,14 @@ const StackedBarChart = () => (

 const MixBarChart = () => (
  <Container>
-    <BarChart data={mixData} margin={{
-      top: 20,
-      right: 30,
-      left: 20,
-      bottom: 5,
-    }}>
+    <BarChart data={mixData}
+      margin={{
+        top: 20,
+        right: 30,
+        left: 20,
+        bottom: 5,
+      }}
+    >
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
@@ -155,8 +161,8 @@ const MixBarChart = () => (
 // 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}
+        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`
 }

@@ -175,27 +181,32 @@ TriangleBar.propTypes = {

 const CustomShapeBarChart = () => (
  <Container>
-    <BarChart data={mixData} margin={{
-      top: 20,
-      right: 30,
-      left: 20,
-      bottom: 5,
-    }}>
+    <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 />
+      <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,
-    }}>
+    <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}>
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col, Card, Button } from 'antd'
-import Container from '../Container'
 import {
  LineChart,
  Line,
@@ -11,6 +10,7 @@ import {
  Tooltip,
  Legend,
 } from 'recharts'
+import Container from '../Container'

 const data = [
  {
@@ -58,20 +58,26 @@ const colProps = {

 const SimpleLineChart = () => (
  <Container>
-    <LineChart data={data} margin={{
-      top: 5,
-      right: 30,
-      left: 20,
-      bottom: 5,
-    }}>
+    <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="pv"
+        stroke="#8884d8"
+        activeDot={{
+          r: 8,
+        }}
+      />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  </Container>
@@ -79,12 +85,17 @@ const SimpleLineChart = () => (

 const VerticalLineChart = () => (
  <Container>
-    <LineChart layout="vertical" width={600} height={300} data={data} margin={{
-      top: 20,
-      right: 30,
-      left: 20,
-      bottom: 5,
-    }}>
+    <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" />
@@ -98,12 +109,16 @@ const VerticalLineChart = () => (

 const DashedLineChart = () => (
  <Container>
-    <LineChart width={600} height={300} data={data} margin={{
-      top: 5,
-      right: 30,
-      left: 20,
-      bottom: 5,
-    }}>
+    <LineChart width={600}
+      height={300}
+      data={data}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5,
+      }}
+    >
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
@@ -140,18 +155,22 @@ CustomizedDot.propTypes = {

 const CustomizedDotLineChart = () => (
  <Container>
-    <LineChart width={600} height={300} data={data} margin={{
-      top: 5,
-      right: 30,
-      left: 20,
-      bottom: 5,
-    }}>
+    <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="pv" stroke="#8884d8" dot={<CustomizedDot />} />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  </Container>
@@ -159,11 +178,14 @@ const CustomizedDotLineChart = () => (

 const EditorPage = () => (
  <div className="content-inner">
-    <Button type="primary" size="large" style={{
-      position: 'absolute',
-      right: 0,
-      top: -48,
-    }}>
+    <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}>
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Table, Tag } from 'antd'
+import { color } from 'utils'
 import styles from './browser.less'
-import { color } from '../../../utils'

 const status = {
  1: {
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Table, Tag } from 'antd'
+import { color } from 'utils'
 import styles from './comments.less'
-import { color } from '../../../utils'

 const status = {
  1: {
@@ -30,14 +30,14 @@ function Comments ({ data }) {
    }, {
      title: 'content',
      dataIndex: 'content',
-      render: (text, it) => <div>
+      render: (text, it) => (<div>
        <h5 className={styles.name}>{it.name}</h5>
        <p className={styles.content}>{it.content}</p>
        <div className={styles.daterow}>
          <Tag color={status[it.status].color}>{status[it.status].text}</Tag>
          <span className={styles.date}>{it.date}</span>
        </div>
-      </div>,
+      </div>),
    },
  ]
  return (
@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './completed.less'
 import classnames from 'classnames'
-import { color } from '../../../utils'
+import { color } from 'utils'
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import styles from './completed.less'

 function Completed ({ data }) {
  return (
@@ -12,7 +12,7 @@ function Completed ({ data }) {
      <ResponsiveContainer minHeight={360}>
        <AreaChart data={data}>
          <Legend verticalAlign="top"
-            content={prop => {
+            content={(prop) => {
              const { payload } = prop
              return (<ul className={classnames({ [styles.legend]: true, clearfix: true })}>
                {payload.map((item, key) => <li key={key}><span className={styles.radiusdot} style={{ background: item.color }} />{item.value}</li>)}
@@ -24,7 +24,7 @@ function Completed ({ data }) {
          <CartesianGrid vertical={false} stroke={color.borderBase} strokeDasharray="3 3" />
          <Tooltip
            wrapperStyle={{ border: 'none', boxShadow: '4px 4px 40px rgba(0, 0, 0, 0.05)' }}
-            content={content => {
+            content={(content) => {
              const list = content.payload.map((item, key) => <li key={key} className={styles.tipitem}><span className={styles.radiusdot} style={{ background: item.color }} />{`${item.name}:${item.value}`}</li>)
              return <div className={styles.tooltip}><p className={styles.tiptitle}>{content.label}</p><ul>{list}</ul></div>
            }}
@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './cpu.less'
-import { color } from '../../../utils'
+import { color } from 'utils'
 import CountUp from 'react-countup'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from 'recharts'
+import styles from './cpu.less'

 const countUpProps = {
  start: 0,
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Table, Tag } from 'antd'
+import { color } from 'utils'
 import styles from './recentSales.less'
-import { color } from '../../../utils'

 const status = {
  1: {
@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './sales.less'
 import classnames from 'classnames'
-import { color } from '../../../utils'
+import { color } from 'utils'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import styles from './sales.less'

 function Sales ({ data }) {
  return (
@@ -12,7 +12,7 @@ function Sales ({ data }) {
      <ResponsiveContainer minHeight={360}>
        <LineChart data={data}>
          <Legend verticalAlign="top"
-            content={prop => {
+            content={(prop) => {
              const { payload } = prop
              return (<ul className={classnames({ [styles.legend]: true, clearfix: true })}>
                {payload.map((item, key) => <li key={key}><span className={styles.radiusdot} style={{ background: item.color }} />{item.value}</li>)}
@@ -24,7 +24,7 @@ function Sales ({ data }) {
          <CartesianGrid vertical={false} stroke={color.borderBase} strokeDasharray="3 3" />
          <Tooltip
            wrapperStyle={{ border: 'none', boxShadow: '4px 4px 40px rgba(0, 0, 0, 0.05)' }}
-            content={content => {
+            content={(content) => {
              const list = content.payload.map((item, key) => <li key={key} className={styles.tipitem}><span className={styles.radiusdot} style={{ background: item.color }} />{`${item.name}:${item.value}`}</li>)
              return <div className={styles.tooltip}><p className={styles.tiptitle}>{content.label}</p><ul>{list}</ul></div>
            }}
@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Button } from 'antd'
-import styles from './user.less'
 import CountUp from 'react-countup'
-import { color } from '../../../utils'
+import { color } from 'utils'
+import styles from './user.less'
+
 const countUpProps = {
  start: 0,
  duration: 2.75,
@@ -5,9 +5,11 @@ import styles from './weather.less'
 function Weather ({ city, icon, dateTime, temperature, name }) {
  return (<div className={styles.weather}>
    <div className={styles.left}>
-      <div className={styles.icon} style={{
-        backgroundImage: `url(${icon})`,
-      }} />
+      <div className={styles.icon}
+        style={{
+          backgroundImage: `url(${icon})`,
+        }}
+      />
      <p>{name}</p>
    </div>
    <div className={styles.right}>
@@ -35,6 +35,7 @@
      font-size: 36px;
      text-align: right;
      height: 64px;
+      color: #fff;
    }

    .description {
@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Row, Col, Card } from 'antd'
+import { color } from 'utils'
 import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components'
 import styles from './index.less'
-import { color } from '../../utils'

 const bodyStyle = {
  bodyStyle: {
@@ -15,37 +15,45 @@ const bodyStyle = {

 function Dashboard ({ 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}>
+  const numberCards = numbers.map((item, key) => (<Col key={key} lg={6} md={12}>
    <NumberCard {...item} />
-  </Col>)
+  </Col>))

  return (
    <Row gutter={24}>
      {numberCards}
      <Col lg={18} md={24}>
-        <Card bordered={false} bodyStyle={{
-          padding: '24px 36px 24px 0',
-        }}>
+        <Card bordered={false}
+          bodyStyle={{
+            padding: '24px 36px 24px 0',
+          }}
+        >
          <Sales data={sales} />
        </Card>
      </Col>
      <Col lg={6} md={24}>
        <Row gutter={24}>
          <Col lg={24} md={12}>
-            <Card bordered={false} className={styles.weather} bodyStyle={{
-              padding: 0,
-              height: 204,
-              background: color.blue,
-            }}>
+            <Card bordered={false}
+              className={styles.weather}
+              bodyStyle={{
+                padding: 0,
+                height: 204,
+                background: color.blue,
+              }}
+            >
              <Weather {...weather} />
            </Card>
          </Col>
          <Col lg={24} md={12}>
-            <Card bordered={false} className={styles.quote} bodyStyle={{
-              padding: 0,
-              height: 204,
-              background: color.peach,
-            }}>
+            <Card bordered={false}
+              className={styles.quote}
+              bodyStyle={{
+                padding: 0,
+                height: 204,
+                background: color.peach,
+              }}
+            >
              <Quote {...quote} />
            </Card>
          </Col>
@@ -62,9 +70,11 @@ function Dashboard ({ dashboard }) {
        </Card>
      </Col>
      <Col lg={24} md={24}>
-        <Card bordered={false} bodyStyle={{
-          padding: '24px 36px 24px 0',
-        }}>
+        <Card bordered={false}
+          bodyStyle={{
+            padding: '24px 36px 24px 0',
+          }}
+        >
          <Completed data={completed} />
        </Card>
      </Col>
@@ -2,11 +2,11 @@ import React from 'react'
 import { Icon } from 'antd'
 import styles from './index.less'

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

 export default Error
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Button, Row, Form, Input } from 'antd'
-import { config } from '../../utils'
+import { config } from 'utils'
 import styles from './index.less'

 const FormItem = Form.Item
@@ -0,0 +1,55 @@
+import React from 'react'
+import { Table } from 'antd'
+import styles from './List.less'
+
+const List = ({ ...tableProps }) => {
+  const columns = [
+    {
+      title: 'Image',
+      dataIndex: 'image',
+      className: styles.image,
+      width: 64,
+      render: text => <img alt="Feture" width={26} src={text} />,
+    }, {
+      title: 'Title',
+      dataIndex: 'title',
+    }, {
+      title: 'Author',
+      dataIndex: 'author',
+    }, {
+      title: 'Categories',
+      dataIndex: 'categories',
+    }, {
+      title: 'Tags',
+      dataIndex: 'tags',
+    }, {
+      title: 'Visibility',
+      dataIndex: 'visibility',
+    }, {
+      title: 'Comments',
+      dataIndex: 'comments',
+    }, {
+      title: 'Views',
+      dataIndex: 'views',
+    }, {
+      title: 'Date',
+      dataIndex: 'date',
+    },
+  ]
+
+  return (
+    <div>
+      <Table
+        {...tableProps}
+        bordered
+        scroll={{ x: 1200 }}
+        columns={columns}
+        simple
+        className={styles.table}
+        rowKey={record => record.id}
+      />
+    </div>
+  )
+}
+
+export default List
@@ -0,0 +1,16 @@
+.table {
+  td.image {
+    line-height: 1;
+
+    img {
+      border-radius: 2px;
+    }
+  }
+
+  :global {
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+      height: 60px;
+    }
+  }
+}
@@ -0,0 +1,65 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'dva'
+import { Tabs } from 'antd'
+import { routerRedux } from 'dva/router'
+import List from './List'
+
+const TabPane = Tabs.TabPane
+
+const EnumPostStatus = {
+  UNPUBLISH: 1,
+  PUBLISHED: 2,
+}
+
+
+const Index = ({ post, dispatch, loading, location }) => {
+  const { list, pagination } = post
+  const { query = {}, pathname } = location
+
+  const listProps = {
+    pagination,
+    dataSource: list,
+    loading: loading.effects['post/query'],
+    onChange (page) {
+      dispatch(routerRedux.push({
+        pathname,
+        query: {
+          ...query,
+          page: page.current,
+          pageSize: page.pageSize,
+        },
+      }))
+    },
+  }
+
+  const handleTabClick = (key) => {
+    dispatch(routerRedux.push({
+      pathname,
+      query: {
+        status: key,
+      },
+    }))
+  }
+
+
+  return (<div className="content-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} />
+      </TabPane>
+      <TabPane tab="Unpublish" key={String(EnumPostStatus.UNPUBLISH)}>
+        <List {...listProps} />
+      </TabPane>
+    </Tabs>
+  </div>)
+}
+
+Index.propTypes = {
+  post: PropTypes.object,
+  loading: PropTypes.object,
+  location: PropTypes.object,
+  dispatch: PropTypes.func,
+}
+
+export default connect(({ post, loading }) => ({ post, loading }))(Index)
@@ -1,7 +1,6 @@
 import React from 'react'
-import styles from './index.less'
 import Mock from 'mockjs'
-import { request, config } from '../../utils'
+import { request, config } from 'utils'
 import {
  Row,
  Col,
@@ -10,20 +9,22 @@ import {
  Input,
  Button,
 } from 'antd'
-const { api, baseURL } = config
-const { dashboard, users, userLogin, user } = api
+import styles from './index.less'
+
+const { api } = config
+const { dashboard, users, userLogin, user, v1test, v2test } = api

 const requestOptions = [
  {
-    url: baseURL + user.replace('/:id', ''),
+    url: user.replace('/:id', ''),
    desc: 'intercept request by mock.js',
  },
  {
-    url: baseURL + dashboard,
+    url: dashboard,
    desc: 'intercept request by mock.js',
  },
  {
-    url: baseURL + userLogin,
+    url: userLogin,
    method: 'post',
    data: {
      username: 'guest',
@@ -32,18 +33,18 @@ const requestOptions = [
    desc: 'intercept request by mock.js',
  },
  {
-    url: baseURL + users,
+    url: users,
    desc: 'intercept request by mock.js',
  },
  {
-    url: baseURL + user,
+    url: user,
    desc: 'intercept request by mock.js',
    data: Mock.mock({
      id: '@id',
    }),
  },
  {
-    url: baseURL + user.replace('/:id', ''),
+    url: user.replace('/:id', ''),
    desc: 'intercept request by mock.js',
    method: 'post',
    data: Mock.mock({
@@ -60,7 +61,7 @@ const requestOptions = [
    }),
  },
  {
-    url: baseURL + user,
+    url: user,
    desc: 'intercept request by mock.js',
    method: 'patch',
    data: Mock.mock({
@@ -69,7 +70,7 @@ const requestOptions = [
    }),
  },
  {
-    url: baseURL + user,
+    url: user,
    desc: 'intercept request by mock.js',
    method: 'delete',
    data: Mock.mock({
@@ -77,7 +78,12 @@ const requestOptions = [
    }),
  },
  {
-    url: `${baseURL}/test`,
+    url: v1test,
+    desc: 'intercept request by mock.js',
+    method: 'get',
+  },
+  {
+    url: v2test,
    desc: 'intercept request by mock.js',
    method: 'get',
  },
@@ -129,7 +135,7 @@ export default class RequestPage extends React.Component {
    const state = this.state
    const curretUrl = value.split('?')[0]
    const curretMethod = value.split('?')[1]
-    const currntItem = requestOptions.filter(item => {
+    const currntItem = requestOptions.filter((item) => {
      const { method = 'get' } = item
      return curretUrl === item.url && curretMethod === method
    })
@@ -149,14 +155,18 @@ export default class RequestPage extends React.Component {
      <div className="content-inner">
        <Row gutter={32}>
          <Col {...colProps}>
-            <Card title="Request" style={{
-              overflow: 'visible',
-            }}>
+            <Card title="Request"
+              style={{
+                overflow: 'visible',
+              }}
+            >
              <div className={styles.option}>
-                <Select style={{
-                  width: '100%',
-                  flex: 1,
-                }} defaultValue={`${method.toLocaleUpperCase()}   ${requestOptions[0].url}`}
+                <Select
+                  style={{
+                    width: '100%',
+                    flex: 1,
+                  }}
+                  defaultValue={`${method.toLocaleUpperCase()}   ${requestOptions[0].url}`}
                  size="large"
                  onChange={this.handeleURLChange}
                >
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import moment from 'moment'
-import { FilterItem } from '../../components'
+import { FilterItem } from 'components'
 import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch } from 'antd'
 import city from '../../utils/city'

@@ -101,7 +101,7 @@ const Filter = ({
        </FilterItem>
      </Col>
      <Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} sm={{ span: 24 }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <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>
@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Table, Modal } from 'antd'
-import styles from './List.less'
 import classnames from 'classnames'
-import AnimTableBody from '../../components/DataTable/AnimTableBody'
-import { DropOption } from '../../components'
+import { DropOption } from 'components'
 import { Link } from 'dva/router'
+import AnimTableBody from '../../components/DataTable/AnimTableBody'
+import styles from './List.less'

 const confirm = Modal.confirm

@@ -30,7 +30,7 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
      key: 'avatar',
      width: 64,
      className: styles.avatar,
-      render: (text) => <img alt={'avatar'} width={24} src={text} />,
+      render: text => <img alt={'avatar'} width={24} src={text} />,
    }, {
      title: 'Name',
      dataIndex: 'name',
@@ -48,9 +48,9 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
      title: 'Gender',
      dataIndex: 'isMale',
      key: 'isMale',
-      render: (text) => <span>{text
-            ? 'Male'
-            : 'Female'}</span>,
+      render: text => (<span>{text
+        ? 'Male'
+        : 'Female'}</span>),
    }, {
      title: 'Phone',
      dataIndex: 'phone',
@@ -82,7 +82,7 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
    current: tableProps.pagination.current,
  }

-  const getBodyWrapper = body => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body }
+  const getBodyWrapper = (body) => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body }

  return (
    <div>
@@ -90,7 +90,7 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
        {...tableProps}
        className={classnames({ [styles.table]: true, [styles.motion]: isMotion })}
        bordered
-        scroll={{ x: 1200 }}
+        scroll={{ x: 1250 }}
        columns={columns}
        simple
        rowKey={record => record.id}
@@ -17,11 +17,11 @@
      .ant-table-tbody > tr > td,
      .ant-table-thead > tr > th {
        &:nth-child(1) {
-          width: 6%;
+          width: 5%;
        }

        &:nth-child(2) {
-          width: 8%;
+          width: 6%;
        }

        &:nth-child(3) {
@@ -29,7 +29,7 @@
        }

        &:nth-child(4) {
-          width: 6%;
+          width: 8%;
        }

        &:nth-child(5) {
@@ -37,22 +37,26 @@
        }

        &:nth-child(6) {
-          width: 8%;
+          width: 6%;
        }

        &:nth-child(7) {
-          width: 16%;
+          width: 8%;
        }

        &:nth-child(8) {
-          width: 20%;
+          width: 15%;
        }

        &:nth-child(9) {
-          width: 14%;
+          width: 17%;
        }

        &:nth-child(10) {
+          width: 13%;
+        }
+
+        &:nth-child(11) {
          width: 8%;
        }
      }
@@ -23,7 +23,6 @@ const Detail = ({ userDetail }) => {

 Detail.propTypes = {
  userDetail: PropTypes.object,
-  loading: PropTypes.bool,
 }

 export default connect(({ userDetail, loading }) => ({ userDetail, loading: loading.models.userDetail }))(Detail)
@@ -2,12 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { routerRedux } from 'dva/router'
 import { connect } from 'dva'
+import { Row, Col, Button, Popconfirm } from 'antd'
 import List from './List'
 import Filter from './Filter'
 import Modal from './Modal'

 const User = ({ location, dispatch, user, loading }) => {
-  const { list, pagination, currentItem, modalVisible, modalType, isMotion } = user
+  const { list, pagination, currentItem, modalVisible, modalType, isMotion, selectedRowKeys } = user
  const { pageSize } = pagination

  const modalProps = {
@@ -62,6 +63,17 @@ const User = ({ location, dispatch, user, loading }) => {
        },
      })
    },
+    rowSelection: {
+      selectedRowKeys,
+      onChange: (keys) => {
+        dispatch({
+          type: 'user/updateState',
+          payload: {
+            selectedRowKeys: keys,
+          },
+        })
+      },
+    },
  }

  const filterProps = {
@@ -103,9 +115,29 @@ const User = ({ location, dispatch, user, loading }) => {
    },
  }

+  const handleDeleteItems = () => {
+    dispatch({
+      type: 'user/multiDelete',
+      payload: {
+        ids: selectedRowKeys,
+      },
+    })
+  }
+
  return (
    <div className="content-inner">
      <Filter {...filterProps} />
+      {
+        selectedRowKeys.length > 0 &&
+        <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>
+          </Col>
+        </Row>
+      }
      <List {...listProps} />
      {modalVisible && <Modal {...modalProps} />}
    </div>
@@ -1,4 +1,5 @@
-import { request, config } from '../utils'
+import { request, config } from 'utils'
+
 const { api } = config
 const { user, userLogout, userLogin } = api

@@ -1,4 +1,5 @@
-import { request, config } from '../utils'
+import { request, config } from 'utils'
+
 const { api } = config
 const { dashboard } = api

@@ -1,4 +1,5 @@
-import { request, config } from '../utils'
+import { request, config } from 'utils'
+
 const { api } = config
 const { userLogin } = api

@@ -0,0 +1,12 @@
+import { request, config } from 'utils'
+
+const { api } = config
+const { menus } = api
+
+export async function query (params) {
+  return request({
+    url: menus,
+    method: 'get',
+    data: params,
+  })
+}
@@ -0,0 +1,12 @@
+import { request, config } from 'utils'
+
+const { api } = config
+const { posts } = api
+
+export async function query (params) {
+  return request({
+    url: posts,
+    method: 'get',
+    data: params,
+  })
+}
@@ -1,4 +1,5 @@
-import { request, config } from '../utils'
+import { request, config } from 'utils'
+
 const { api } = config
 const { user } = api

@@ -1,4 +1,5 @@
-import { request, config } from '../utils'
+import { request, config } from 'utils'
+
 const { api } = config
 const { users } = api

@@ -9,3 +10,11 @@ export async function query (params) {
    data: params,
  })
 }
+
+export async function remove (params) {
+  return request({
+    url: users,
+    method: 'delete',
+    data: params,
+  })
+}
@@ -1,13 +0,0 @@
-module.exports = () => {
-  return {
-    '@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"',
-  }
-}
@@ -90,16 +90,6 @@ body {
    box-shadow: none;
  }

-  .ant-card {
-    &:hover {
-      overflow: auto;
-    }
-  }
-
-  .ant-pagination-item {
-    margin-bottom: 8px;
-  }
-
  .ant-select-dropdown-menu-item {
    padding: 12px 16px !important;
  }
@@ -125,6 +115,13 @@ body {
 }
@media (max-width: 767px) {
  :global {
+    .ant-pagination-item,
+    .ant-pagination-next,
+    .ant-pagination-options,
+    .ant-pagination-prev {
+      margin-bottom: 8px;
+    }
+
    .ant-card {
      .ant-card-head {
        padding: 0 12px;
@@ -4025,18 +4025,18 @@ let DICT = {
 const tree = (list) => {
  let mapped = {}
  let item
-  for (let i = 0; i < list.length; i++) {
+  for (let i = 0; i < list.length; i += 1) {
    item = list[i]
    if (!item || !item.id) continue
    mapped[item.id] = item
  }

  let result = []
-  for (let ii = 0; ii < list.length; ii++) {
+  for (let ii = 0; ii < list.length; ii += 1) {
    item = list[ii]

    if (!item) continue
-            /* jshint -W041 */
+    /* jshint -W041 */
    if (item.pid === undefined && item.parentId === undefined) {
      result.push(item)
      continue
@@ -4056,7 +4056,7 @@ let DICT_FIXED = (function () {
      let pid
      if (id.slice(2, 6) !== '0000') {
        pid = id.slice(4, 6) === '00' ? (`${id.slice(0, 2)}0000`) :
-        `${id.slice(0, 4)}00`
+          `${id.slice(0, 4)}00`
      }
      fixed.push({
        id,
@@ -1,3 +1,6 @@
+const APIV1 = '/api/v1'
+const APIV2 = '/api/v2'
+
 module.exports = {
  name: 'AntD Admin',
  prefix: 'antdAdmin',
@@ -5,17 +8,20 @@ module.exports = {
  logo: '/logo.png',
  iconFontCSS: '/iconfont.css',
  iconFontJS: '/iconfont.js',
-  baseURL: 'http://localhost:8000/api/v1',
  YQL: ['http://www.zuimeitianqi.com'],
-  CORS: ['http://localhost:7000'],
+  CORS: [],
  openPages: ['/login'],
  apiPrefix: '/api/v1',
  api: {
-    userLogin: '/user/login',
-    userLogout: '/user/logout',
-    userInfo: '/userInfo',
-    users: '/users',
-    user: '/user/:id',
-    dashboard: '/dashboard',
+    userLogin: `${APIV1}/user/login`,
+    userLogout: `${APIV1}/user/logout`,
+    userInfo: `${APIV1}/userInfo`,
+    users: `${APIV1}/users`,
+    posts: `${APIV1}/posts`,
+    user: `${APIV1}/user/:id`,
+    dashboard: `${APIV1}/dashboard`,
+    menus: `${APIV1}/menus`,
+    v1test: `${APIV1}/test`,
+    v2test: `${APIV2}/test`,
  },
 }
@@ -0,0 +1,9 @@
+const EnumRoleType = {
+  ADMIN: 'admin',
+  DEFAULT: 'admin',
+  DEVELOPER: 'developer',
+}
+
+module.exports = {
+  EnumRoleType,
+}
@@ -1,9 +1,9 @@
-import config from './config'
-import menu from './menu'
-import request from './request'
+/* global window */
 import classnames from 'classnames'
-import { color } from './theme'
 import lodash from 'lodash'
+import config from './config'
+import request from './request'
+import { color } from './theme'

 // 连字符转驼峰
 String.prototype.hyphenToHump = function () {
@@ -101,7 +101,6 @@ const arrayToTree = (array, id = 'id', pid = 'pid', children = 'children') => {

 module.exports = {
  config,
-  menu,
  request,
  color,
  classnames,
@@ -1,147 +0,0 @@
-module.exports = [
-  {
-    id: 1,
-    icon: 'laptop',
-    name: 'Dashboard',
-    router: '/dashboard',
-  },
-  {
-    id: 2,
-    bpid: 1,
-    name: 'User Manage',
-    icon: 'user',
-    router: '/user',
-  },
-  {
-    id: 21,
-    mpid: -1,
-    bpid: 2,
-    name: 'User Detail',
-    router: '/user/:id',
-  },
-  {
-    id: 3,
-    bpid: 1,
-    name: 'Request',
-    icon: 'api',
-    router: '/request',
-  },
-  {
-    id: 4,
-    bpid: 1,
-    name: 'UI Element',
-    icon: 'camera-o',
-  },
-  {
-    id: 41,
-    bpid: 4,
-    mpid: 4,
-    name: 'IconFont',
-    icon: 'heart-o',
-    router: '/UIElement/iconfont',
-  },
-  {
-    id: 42,
-    bpid: 4,
-    mpid: 4,
-    name: 'DataTable',
-    icon: 'database',
-    router: '/UIElement/dataTable',
-  },
-  {
-    id: 43,
-    bpid: 4,
-    mpid: 4,
-    name: 'DropOption',
-    icon: 'bars',
-    router: '/UIElement/dropOption',
-  },
-  {
-    id: 44,
-    bpid: 4,
-    mpid: 4,
-    name: 'Search',
-    icon: 'search',
-    router: '/UIElement/search',
-  },
-  {
-    id: 45,
-    bpid: 4,
-    mpid: 4,
-    name: 'Editor',
-    icon: 'edit',
-    router: '/UIElement/editor',
-  },
-  {
-    id: 46,
-    bpid: 4,
-    mpid: 4,
-    name: 'layer (Function)',
-    icon: 'credit-card',
-    router: '/UIElement/layer',
-  },
-  {
-    id: 5,
-    bpid: 1,
-    name: 'Recharts',
-    icon: 'code-o',
-  },
-  {
-    id: 51,
-    bpid: 5,
-    mpid: 5,
-    name: 'LineChart',
-    icon: 'line-chart',
-    router: '/chart/lineChart',
-  },
-  {
-    id: 52,
-    bpid: 5,
-    mpid: 5,
-    name: 'BarChart',
-    icon: 'bar-chart',
-    router: '/chart/barChart',
-  },
-  {
-    id: 53,
-    bpid: 5,
-    mpid: 5,
-    name: 'AreaChart',
-    icon: 'area-chart',
-    router: '/chart/areaChart',
-  },
-  {
-    id: 6,
-    bpid: 1,
-    name: 'Test Navigation',
-    icon: 'setting',
-  },
-  {
-    id: 61,
-    bpid: 6,
-    mpid: 6,
-    name: 'Test Navigation1',
-    router: '/navigation/navigation1',
-  },
-  {
-    id: 62,
-    bpid: 6,
-    mpid: 6,
-    name: 'Test Navigation2',
-    router: '/navigation/navigation2',
-  },
-  {
-    id: 621,
-    bpid: 62,
-    mpid: 62,
-    name: 'Test Navigation21',
-    router: '/navigation/navigation2/navigation1',
-  },
-  {
-    id: 622,
-    bpid: 62,
-    mpid: 62,
-    name: 'Test Navigation22',
-    router: '/navigation/navigation2/navigation2',
-  },
-]
@@ -1,12 +1,11 @@
+/* global window */
 import axios from 'axios'
 import qs from 'qs'
-import { YQL, CORS, baseURL } from './config'
 import jsonp from 'jsonp'
 import lodash from 'lodash'
 import pathToRegexp from 'path-to-regexp'
 import { message } from 'antd'
-
-axios.defaults.baseURL = baseURL
+import { YQL, CORS } from './config'

 const fetch = (options) => {
  let {
@@ -50,7 +49,7 @@ const fetch = (options) => {
      })
    })
  } else if (fetchType === 'YQL') {
-    url = `http://query.yahooapis.com/v1/public/yql?q=select * from json where url='${options.url}?${qs.stringify(options.data)}'&format=json`
+    url = `http://query.yahooapis.com/v1/public/yql?q=select * from json where url='${options.url}?${encodeURIComponent(qs.stringify(options.data))}'&format=json`
    data = null
  }

@@ -91,26 +90,30 @@ export default function request (options) {
  return fetch(options).then((response) => {
    const { statusText, status } = response
    let data = options.fetchType === 'YQL' ? response.data.query.results.json : response.data
+    if (data instanceof Array) {
+      data = {
+        list: data,
+      }
+    }
+
    return {
      success: true,
      message: statusText,
-      status,
+      statusCode: status,
      ...data,
    }
  }).catch((error) => {
    const { response } = error
    let msg
-    let status
-    let otherData = {}
-    if (response) {
+    let statusCode
+    if (response && response instanceof Object) {
      const { data, statusText } = response
-      otherData = data
-      status = response.status
+      statusCode = response.status
      msg = data.message || statusText
    } else {
-      status = 600
-      msg = 'Network Error'
+      statusCode = 600
+      msg = error.message || 'Network Error'
    }
-    return { success: false, status, message: msg, ...otherData }
+    return { success: false, statusCode, message: msg }
  })
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
zuiidea	37deddc911	update 4.3.0	2017-07-30 14:51:02 +08:00
zuiidea	52ee780e40	fix build error	2017-07-30 14:25:04 +08:00
zuiidea	057853cfde	fix ejs-loader	2017-07-29 22:30:39 +08:00
zuiidea	c0222c3957	add version build	2017-07-28 19:26:05 +08:00
zuiidea	00d8fc5ea5	add build:dll	2017-07-27 20:02:20 +08:00
zuiidea	1e08d7adaa	optimized code	2017-07-27 19:13:31 +08:00
zuiidea	a2b4ee4047	Merge branch 'master' into develop	2017-07-21 19:03:42 +08:00
zuiidea	c6b477c993	pagenation style	2017-07-21 19:02:11 +08:00
zuiidea	548d7a8ddb	Merge pull request #427 from zuiidea/develop fix webpack.resoleve.alias module import/no-unresolved	2017-07-19 10:33:14 +08:00
zuiidea	755c1250e5	fix webpack.resoleve.alias module import/no-unresolved	2017-07-19 10:32:39 +08:00
zuiidea	c5ebb91980	Merge pull request #413 from afc163/patch-1 No need customzied card style	2017-07-17 10:50:26 +08:00
zuiidea	ae12492887	Merge pull request #416 from zuiidea/develop update package.json	2017-07-17 10:48:01 +08:00
zuiidea	28a5863701	update package.json	2017-07-17 10:47:31 +08:00
偏右	bf65aa5478	Don't need customzied card style https://github.com/ant-design/ant-design/issues/6833	2017-07-14 13:49:28 +08:00
zuiidea	acd3fe8337	Merge pull request #407 from zuiidea/develop fix permission.visit is null	2017-07-12 19:41:58 +08:00
zuiidea	3ad5a6cfb6	fix permission.visit is null	2017-07-12 19:41:32 +08:00
zuiidea	c278c8f6f8	Merge pull request #393 from zuiidea/develop 666	2017-07-10 10:08:26 +08:00
zuiidea	71c75e15ff	666	2017-07-10 10:07:22 +08:00
zuiidea	ec8db0e0fb	Merge pull request #389 from zuiidea/develop Develop	2017-07-06 19:16:04 +08:00
zuiidea	2a3587bae5	fix user role and update package.json	2017-07-06 19:15:32 +08:00
zuiidea	a33772cbbc	Merge branch 'master' into develop	2017-07-06 19:08:06 +08:00
zuiidea	89c58b2f98	Merge pull request #385 from zuiidea/develop Develop	2017-07-05 19:46:48 +08:00
zuiidea	b31bd32ca2	roleType	2017-07-05 19:45:57 +08:00
zuiidea	f113fbb238	revise menu property : router => route	2017-07-05 19:29:14 +08:00
zuiidea	ce1d957212	Merge pull request #382 from zuiidea/develop Develop	2017-07-05 13:56:00 +08:00
zuiidea	7f40ac6a60	Page Permission	2017-07-05 13:54:57 +08:00
zuiidea	3a01626df9	Permissions Simple Version	2017-07-04 23:41:13 +08:00
zuiidea	6df97916fa	webpack alias	2017-07-04 22:44:48 +08:00
zuiidea	3378510166	Merge pull request #363 from kuanger/develop fix logout menu block by show more button	2017-06-19 16:14:49 +08:00
hausir	edf1158351	fix logout menu block by show more button	2017-06-19 13:51:03 +08:00
zuiidea	e4bd4e9aa0	Merge pull request #355 from blackboyhc/master Update app.js	2017-06-19 10:18:58 +08:00
zuiidea	5904eae0c9	Merge pull request #349 from zuiidea/develop Develop	2017-06-19 10:18:42 +08:00
zuiidea	7f26153472	Merge pull request #358 from wuyao1994/dev showModal return bug	2017-06-19 10:16:59 +08:00
elviswu	4b9e142aa8	showModal return bug	2017-06-16 16:09:22 +08:00
blackboyhc	2679361559	Update app.js 如果在config.js中添加了openPages，比如openPages: ['/login', '/home']，但是进入/home页面仍然要先登录，所以在app model中如果query不成功需要判断当前页面是否被设置成openPages，再决定是否跳转到/login	2017-06-15 17:31:24 +08:00
zuiidea	2d246655e0	add example	2017-06-13 20:36:47 +08:00
zuiidea	04b147d33f	proxy example	2017-06-13 20:30:24 +08:00
zuiidea	81801983a6	fix request	2017-06-13 20:26:38 +08:00
zuiidea	e484b89518	Merge pull request #340 from zuiidea/develop add eslint-loader	2017-06-09 10:01:45 +08:00
zuiidea	bfff28411d	add eslint-loader	2017-06-09 10:00:59 +08:00
zuiidea	ae97c9d18a	Merge pull request #335 from zuiidea/develop Develop	2017-06-08 11:22:54 +08:00
zuiidea	a063d8be39	fix production className to hash	2017-06-08 11:22:10 +08:00
zuiidea	79eab09941	fix production className to hash	2017-06-08 10:52:05 +08:00
zuiidea	2e3cb5970d	pre eslint	2017-06-07 20:16:15 +08:00
zuiidea	460a8c906b	Merge pull request #334 from zuiidea/develop Develop	2017-06-07 19:47:37 +08:00
zuiidea	05a86e2f56	Filename and Classname To Hash	2017-06-07 19:46:56 +08:00
zuiidea	0295da6326	add Posts Page	2017-06-07 14:24:26 +08:00
zuiidea	85e12caf12	update	2017-06-06 19:31:12 +08:00
zuiidea	b83c5e7819	user Multiple Option	2017-06-01 20:16:18 +08:00
zuiidea	9cff4e8dfe	666	2017-05-25 13:55:36 +08:00
zuiidea	6ac7e5e815	Merge pull request #296 from darcygail/master fix YQL bugs:the chat '&' doesn't encoded	2017-05-17 16:59:21 +08:00
darcy	e63dfc9291	fix YQL bugs:the chat '&' doesn't encoded	2017-05-17 15:55:40 +08:00
zuiidea	81e7d2bdca	Merge pull request #292 from i06/master Search.js has a mistake var name	2017-05-15 18:59:57 +08:00
i06	1c46693246	Search.js has a mistake var name the variable named 'handeleSelectChange' seems not right. turn `handeleSelectChange` to `handleSelectChange` Hope accept my advice, thanks	2017-05-15 17:22:55 +08:00
zuiidea	4832a720e6	Merge pull request #288 from zuiidea/develop Develop	2017-05-13 14:37:37 +08:00
zuiidea	54964fabfb	Update README.md	2017-05-13 14:37:18 +08:00
zuiidea	b60e593f09	Update README.md	2017-05-13 14:35:53 +08:00
zuiidea	5359efce36	Merge pull request #287 from zuiidea/develop update 4.2.1	2017-05-12 18:07:53 +08:00
zuiidea	3decccc87d	update 4.2.1	2017-05-12 18:06:43 +08:00
zuiidea	d92eecb620	Merge pull request #285 from zuiidea/develop local icon	2017-05-12 15:56:18 +08:00
zuiidea	b4699e75f1	Merge pull request #284 from zuiidea/develop fix NProgress	2017-05-12 12:26:35 +08:00
zuiidea	19e07aeb7a	Merge pull request #277 from zuiidea/develop favicon	2017-05-11 11:11:49 +08:00
zuiidea	2c74295843	Merge pull request #266 from zuiidea/develop default.less	2017-05-09 16:36:12 +08:00
zuiidea	55ef9dfc0e	Merge pull request #263 from zuiidea/develop Develop	2017-05-09 15:25:45 +08:00
zuiidea	255b0a95a7	Merge pull request #258 from zuiidea/develop add:nprogress,dva-loading	2017-05-08 15:34:15 +08:00
zuiidea	bf260db940	Update README.md	2017-05-03 17:30:44 +08:00
zuiidea	3e1e782617	Update package.json	2017-05-03 17:29:44 +08:00
zuiidea	a1e8f2ed9b	Update package.json	2017-05-03 17:15:35 +08:00