fix user role and update package.json

fix logout menu block by show more button

.roadhogrc.js

@@ -9,6 +9,19 @@ export default {
   entry: 'src/index.js',
   svgSpriteLoaderDirs: svgSpriteDirs,
   "theme": "./theme.config.js",
+  // 接口代理示例
+  // "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": [

package.json

@@ -1,24 +1,24 @@
 {
   "private": true,
   "dependencies": {
-    "antd": "^2.10.0",
+    "antd": "^2.11.2",
     "classnames": "^2.2.5",
     "draftjs-to-markdown": "^0.4.0",
     "dva": "^1.2.0",
     "dva-loading": "^0.2.0",
     "lodash": "^4.17.4",
     "nprogress": "^0.2.0",
-    "qs": "^6.2.0",
-    "react": "^15.4.4",
-    "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"
+    "qs": "^6.5.0",
+    "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",
+    "axios": "^0.16.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",
@@ -26,18 +26,20 @@
     "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",
+    "dva-model-extend": "^0.1.1",
+    "eslint": "^4.1.1",
+    "eslint-config-airbnb": "^15.0.2",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-import": "^2.6.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.1.0",
     "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",
     "redbox-react": "^1.2.10",
-    "roadhog": "0.6.0-beta.6"
+    "roadhog": "0.6.0"
   },
   "pre-commit": [
     "lint"

src/components/DataTable/DataTable.js

@@ -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'
 

src/components/FilterItem/FilterItem.js

@@ -12,7 +12,7 @@ const FilterItem = ({
       {labelArray.length > 0
         ? <div className={styles.labelWrap}>
             {labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
-          </div>
+        </div>
         : ''}
       <div className={styles.item}>
         {children}

src/components/Layout/Bread.js

@@ -4,14 +4,14 @@ 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'
 
 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 +25,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',
@@ -44,7 +48,7 @@ const Bread = ({ menu }) => {
     return (
       <Breadcrumb.Item key={key}>
         {((pathArray.length - 1) !== key)
-          ? <Link to={item.router}>
+          ? <Link to={item.route}>
               {content}
           </Link>
           : content}

src/components/Layout/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './Footer.less'
-import { config } from '../../utils'
+import { config } from 'utils'
 
 const Footer = () => <div className={styles.footer}>
   {config.footerText}

src/components/Layout/Header.less

@@ -14,6 +14,7 @@
   justify-content: space-between;
   height: 47px;
   background-color: #fff;
+  z-index: 999;
 
   .rightWarpper {
     display: flex;

src/components/Layout/Menu.js

@@ -2,12 +2,12 @@ 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 = {}
 
   // 递归生成菜单
@@ -22,7 +22,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 +31,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 +60,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 +82,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,7 +119,6 @@ Menus.propTypes = {
   menu: PropTypes.array,
   siderFold: PropTypes.bool,
   darkTheme: PropTypes.bool,
-  location: PropTypes.object,
   isNavbar: PropTypes.bool,
   handleClickNavMenu: PropTypes.func,
   navOpenKeys: PropTypes.array,

src/components/Layout/Sider.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Icon, Switch } from 'antd'
 import styles from './Layout.less'
-import { config } from '../../utils'
+import { config } from 'utils'
 import Menus from './Menu'
 
 const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) => {

src/components/Loader/Loader.js

@@ -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

src/components/Loader/Loader.less

@@ -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);
+  }
+}

src/components/Loader/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Loader",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Loader.js"
+}

src/components/index.js

@@ -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,
  }

src/mock/common.js

@@ -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,
+}

src/mock/menu.js

@@ -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)
+  },
+}

src/mock/post.js

@@ -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,
+    })
+  },
+}

src/mock/user.js

@@ -25,14 +25,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 = [

src/models/app.js

@@ -1,13 +1,26 @@
 import { query, logout } from '../services/app'
+import * as menusService from '../services/menus'
 import { routerRedux } from 'dva/router'
 import { parse } from 'qs'
-import { config } from '../utils'
+import config from 'config'
+import { EnumRoleType } from 'enums'
 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',
@@ -33,21 +46,35 @@ export default {
     *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
         yield put({
-          type: 'querySuccess',
-          payload: data.user,
+          type: 'updateState',
+          payload: {
+            user,
+            permissions,
+            menu: list.filter(item => {
+              if (permissions.role === EnumRoleType.ADMIN || permissions.role === EnumRoleType.DEVELOPER) {
+                return true
+              }
+              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(_ => _)
+            }
+          ),
+          },
         })
         if (location.pathname === '/login') {
           yield put(routerRedux.push('/dashboard'))
         }
       } else {
-        if (location.pathname !== '/login') {
+        if (config.openPages && config.openPages.indexOf(location.pathname) < 0) {
           let from = location.pathname
-          if (location.pathname === '/dashboard') {
-            from = '/dashboard'
-          }
           window.location = `${location.origin}/login?from=${from}`
         }
       }
@@ -76,10 +103,10 @@ export default {
 
   },
   reducers: {
-    querySuccess (state, { payload: user }) {
+    updateState (state, { payload }) {
       return {
         ...state,
-        user,
+        ...payload,
       }
     },
 

src/models/common.js

@@ -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,
+}

src/models/login.js

@@ -1,6 +1,6 @@
 import { login } from '../services/login'
 import { routerRedux } from 'dva/router'
-import { queryURL } from '../utils'
+import { queryURL } from 'utils'
 
 export default {
   namespace: 'login',

src/models/post.js

@@ -0,0 +1,44 @@
+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
+      }
+    },
+  },
+})

src/models/user.js

@@ -1,27 +1,21 @@
+import modelExtend from 'dva-model-extend'
 import { create, remove, update } from '../services/user'
 import * as usersService from '../services/users'
-import { parse } from 'qs'
+import { pageModel } from './common'
+import { config } from 'utils'
 
 const { query } = usersService
+const { prefix } = config
 
-export default {
-
+export default modelExtend(pageModel, {
   namespace: 'user',
 
   state: {
-    list: [],
     currentItem: {},
     modalVisible: false,
     modalType: 'create',
     selectedRowKeys: [],
-    isMotion: localStorage.getItem('antdAdminUserIsMotion') === 'true',
-    pagination: {
-      showSizeChanger: true,
-      showQuickJumper: true,
-      showTotal: total => `共 ${total} 条`,
-      current: 1,
-      total: null,
-    },
+    isMotion: localStorage.getItem(`${prefix}userIsMotion`) === 'true',
   },
 
   subscriptions: {
@@ -39,8 +33,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({
@@ -104,25 +97,8 @@ export default {
 
   reducers: {
 
-    querySuccess (state, action) {
-      const { list, pagination } = action.payload
-      return { ...state,
-        list,
-        pagination: {
-          ...state.pagination,
-          ...pagination,
-        } }
-    },
-
-    updateState (state, { payload }) {
-      return {
-        ...state,
-        ...payload,
-      }
-    },
-
-    showModal (state, action) {
-      return { ...state, ...action.payload, modalVisible: true }
+    showModal (state, { payload }) {
+      return { ...state, ...payload, modalVisible: true }
     },
 
     hideModal (state) {
@@ -130,10 +106,9 @@ export default {
     },
 
     switchIsMotion (state) {
-      localStorage.setItem('antdAdminUserIsMotion', !state.isMotion)
+      localStorage.setItem(`${prefix}userIsMotion`, !state.isMotion)
       return { ...state, isMotion: !state.isMotion }
     },
 
   },
-
-}
+})

src/router.js

@@ -123,6 +123,14 @@ const Routers = function ({ history, app }) {
               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) {

src/routes/UIElement/dataTable/index.js

@@ -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 {

src/routes/UIElement/dropOption/index.js

@@ -1,5 +1,5 @@
 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">

src/routes/UIElement/editor/index.js

@@ -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'

src/routes/UIElement/iconfont/index.js

@@ -1,5 +1,5 @@
 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'

src/routes/UIElement/layer/index.js

@@ -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 = {

src/routes/UIElement/search/index.js

@@ -1,5 +1,5 @@
 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">

src/routes/app.js

@@ -1,19 +1,26 @@
 import React from 'react'
 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 +35,6 @@ const App = ({ children, location, dispatch, app, loading }) => {
     menu,
     user,
     siderFold,
-    location,
     isNavbar,
     menuPopoverVisible,
     navOpenKeys,
@@ -50,7 +56,6 @@ const App = ({ children, location, dispatch, app, loading }) => {
     menu,
     siderFold,
     darkTheme,
-    location,
     navOpenKeys,
     changeTheme () {
       dispatch({ type: 'app/switchTheme' })
@@ -64,13 +69,12 @@ 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>
@@ -86,10 +90,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 />

src/routes/dashboard/components/browser.js

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

src/routes/dashboard/components/comments.js

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

src/routes/dashboard/components/completed.js

@@ -2,7 +2,7 @@ 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'
 
 function Completed ({ data }) {

src/routes/dashboard/components/cpu.js

@@ -1,7 +1,7 @@
 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'
 

src/routes/dashboard/components/recentSales.js

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

src/routes/dashboard/components/sales.js

@@ -2,7 +2,7 @@ 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'
 
 function Sales ({ data }) {

src/routes/dashboard/components/user.js

@@ -3,7 +3,7 @@ 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'
 const countUpProps = {
   start: 0,
   duration: 2.75,

src/routes/dashboard/components/weather.less

@@ -35,6 +35,7 @@
       font-size: 36px;
       text-align: right;
       height: 64px;
+      color: #fff;
     }
 
     .description {

src/routes/dashboard/index.js

@@ -4,7 +4,7 @@ import { connect } from 'dva'
 import { Row, Col, Card } from 'antd'
 import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components'
 import styles from './index.less'
-import { color } from '../../utils'
+import { color } from 'utils'
 
 const bodyStyle = {
   bodyStyle: {

src/routes/login/index.js

@@ -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

src/routes/post/List.js

@@ -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

src/routes/post/List.less

@@ -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;
+    }
+  }
+}

src/routes/post/index.js

@@ -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)

src/routes/request/index.js

@@ -1,7 +1,7 @@
 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 +10,20 @@ import {
   Input,
   Button,
 } from 'antd'
-const { api, baseURL } = config
-const { dashboard, users, userLogin, user } = api
+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 +32,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 +60,7 @@ const requestOptions = [
     }),
   },
   {
-    url: baseURL + user,
+    url: user,
     desc: 'intercept request by mock.js',
     method: 'patch',
     data: Mock.mock({
@@ -69,7 +69,7 @@ const requestOptions = [
     }),
   },
   {
-    url: baseURL + user,
+    url: user,
     desc: 'intercept request by mock.js',
     method: 'delete',
     data: Mock.mock({
@@ -77,7 +77,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',
   },

src/routes/user/Filter.js

@@ -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'
 

src/routes/user/List.js

@@ -4,7 +4,7 @@ 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'
 
 const confirm = Modal.confirm

src/services/app.js

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

src/services/dashboard.js

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

src/services/login.js

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

src/services/menus.js

@@ -0,0 +1,11 @@
+import { request, config } from 'utils'
+const { api } = config
+const { menus } = api
+
+export async function query (params) {
+  return request({
+    url: menus,
+    method: 'get',
+    data: params,
+  })
+}

src/services/posts.js

@@ -0,0 +1,11 @@
+import { request, config } from 'utils'
+const { api } = config
+const { posts } = api
+
+export async function query (params) {
+  return request({
+    url: posts,
+    method: 'get',
+    data: params,
+  })
+}

src/services/user.js

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

src/services/users.js

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

src/utils/config.js

@@ -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`,
   },
 }

src/utils/enums.js

@@ -0,0 +1,9 @@
+const EnumRoleType = {
+  ADMIN: 'admin',
+  DEFAULT: 'admin',
+  DEVELOPER: 'developer',
+}
+
+module.exports = {
+  EnumRoleType,
+}

src/utils/index.js

@@ -1,5 +1,4 @@
 import config from './config'
-import menu from './menu'
 import request from './request'
 import classnames from 'classnames'
 import { color } from './theme'
@@ -101,7 +100,6 @@ const arrayToTree = (array, id = 'id', pid = 'pid', children = 'children') => {
 
 module.exports = {
   config,
-  menu,
   request,
   color,
   classnames,

src/utils/menu.js

@@ -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',
-  },
-]

src/utils/request.js

@@ -1,13 +1,11 @@
 import axios from 'axios'
 import qs from 'qs'
-import { YQL, CORS, baseURL } from './config'
+import { YQL, CORS } from './config'
 import jsonp from 'jsonp'
 import lodash from 'lodash'
 import pathToRegexp from 'path-to-regexp'
 import { message } from 'antd'
 
-axios.defaults.baseURL = baseURL
-
 const fetch = (options) => {
   let {
     method = 'get',
@@ -91,26 +89,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 }
   })
 }

webpack.config.js

@@ -0,0 +1,36 @@
+module.exports = (webpackConfig) => {
+  // FilenameHash
+  webpackConfig.output.chunkFilename = '[name].[hash].js' // http://webpack.github.io/docs/configuration.html#output-chunkfilename
+
+  // ClassnameHash
+  const cssLoaderOption = {
+    importLoaders: 1,
+    modules: true,
+    localIdentName: '[hash:base64:5]',
+  }
+  const cssLoaders = webpackConfig.module.loaders[3].loader.split('!')
+  webpackConfig.module.loaders[3].loader = cssLoaders.map(item => {
+    if (item.startsWith('css')) {
+      return `css?${JSON.stringify(cssLoaderOption)}`
+    }
+    return item
+  }).join('!')
+
+  // PreLoaders
+  // webpackConfig.module.preLoaders = [{
+  //   test: /\.js$/,
+  //   enforce: 'pre',
+  //   loader: 'eslint',
+  // }]
+
+
+  // Alias
+  webpackConfig.resolve.alias = {
+    components: `${__dirname}/src/components`,
+    utils: `${__dirname}/src/utils`,
+    config: `${__dirname}/src/utils/config`,
+    enums: `${__dirname}/src/utils/enums`,
+  }
+
+  return webpackConfig
+}