rxjs

package.json

@@ -30,6 +30,7 @@
     "isomorphic-fetch": "^2.2.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^1.7.0",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-helmet": "^5.1.3",

src/menu.js

@@ -1,7 +1,7 @@
 
-export const useArrayMenu = true
+const useArrayMenu = true
 
-export const arrayMenu = [
+const arrayMenu = [
   { id: 1, icon: 'laptop', name: '仪表盘', router: '/home' },
   { id: 101, name: '系统管理', icon: 'line-chart', router: '/sys' },
   { id: 102, pid: 101, name: '用户管理', icon: 'mail', router: '/sys/user' },
@@ -20,7 +20,7 @@ export const arrayMenu = [
   { id: 302, pid: 301, name: '测试菜单', icon: 'hdd', router: '/test/index' },
 ]
 
-export const treeMenu = [{ id: 1, icon: 'laptop', name: '仪表盘', router: '/dashboard' }, {
+const treeMenu = [{ id: 1, icon: 'laptop', name: '仪表盘', router: '/dashboard' }, {
   id: 101,
   name: '测试菜单',
   icon: 'line-chart',
@@ -66,3 +66,9 @@ export const treeMenu = [{ id: 1, icon: 'laptop', name: '仪表盘', router: '/d
   icon: 'database',
   children: [{ id: 302, pid: 301, name: '测试菜单', icon: 'hdd', router: '/test/index' }],
 }]
+
+module.exports = {
+  arrayMenu,
+  useArrayMenu,
+  treeMenu,
+}

src/mock/global.js

@@ -0,0 +1,7 @@
+const { treeMenu, arrayMenu, useArrayMenu } = require('../menu')
+
+module.exports = {
+  'GET /menus': function (req, res) {
+    res.status(200).json(arrayMenu).end()
+  },
+}

src/redux/domain/app.js

@@ -1,10 +1,10 @@
 import { push } from 'react-router-redux'
 import { Observable } from 'rxjs/Rx'
+import { message } from 'antd'
 // import { ajax } from 'rxjs/observable/dom/ajax'
-import { keyMirror } from '../../utils/index'
+import { keyMirror, arrayToTree } from '../../utils/index'
 import * as services from '../../services/app'
-import { arrayMenu, treeMenu, useArrayMenu } from '../../menu'
-import { message } from 'antd'
+import { arrayMenu } from '../../menu'
 
 
 // import { Record } from 'immutable'
@@ -33,6 +33,7 @@ export default {
   types,
   state: {
     menus: [],
+    menuTree: [],
     siderVisible: localStorage.getItem('app_sider_visible') !== '0',
     siderFold: localStorage.getItem('app_sider_fold') === '1',  // 是否折叠左边栏
     theme: localStorage.getItem('app_theme_name') || 'light', // 'light','dark'
@@ -108,7 +109,6 @@ export default {
       return { ...state, loading: !state.loading }
     },
     [types.LOAD_FINISHED]: (state, { payload }) => {
-      console.log(payload)
       return { ...state, ...payload }
     },
   },
@@ -120,6 +120,7 @@ export default {
           if (!user) return Observable.of(toLogin())
           return services.fetchMenus(user)
               .map(rsp => ({ payload: { user, menus: rsp.response } }))
+              .map(querySuccess)
               .catch((error) => {
                 message.error(`load menus thorw exception : ${error.message}`)
                 return Observable.of(

src/utils/index.js

@@ -1,3 +1,4 @@
+
 export const createReducer = (initialState, handlerMap) => (state = initialState, action) => {
   const handler = (action && action.type) ? handlerMap[action.type] : undefined
   return handler ? handler(state, action) : state
@@ -16,6 +17,11 @@ export const keyMirror = (obj) => {
   return mirrored
 }
 
+export const deepClone = (obj) => {
+  let proto = Object.getPrototypeOf(obj)
+  return Object.assign({}, Object.create(proto), obj)
+}
+
 /**
  * 数组格式转树状结构
  * @param   {array}     array
@@ -25,7 +31,7 @@ export const keyMirror = (obj) => {
  * @return  {Array}
  */
 export const arrayToTree = (array, id = 'id', pid = 'pid', children = 'children') => {
-  let data = [...array]
+  let data = array.map(item => ({ ...item }))
   let result = []
   let hash = {}
   data.forEach((item, index) => {

src/views/auth/login.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Button, Row, Form, Input, Icon, Col, Checkbox } from 'antd'
 import styles from './login.less'

src/views/echarts/ChartAPIComponent.js

@@ -1,9 +1,10 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ReactEcharts from 'echarts-for-react'
 
 class ChartAPIComponent extends React.Component{
   static propTypes = { // as static property
-    theme: React.PropTypes.string,
+    theme: PropTypes.string,
   };
 
   constructor(props) {

src/views/echarts/DynamicChartComponent.js

@@ -1,10 +1,11 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ReactEcharts from 'echarts-for-react'
 
 class DynamicChartComponent extends React.Component {
 
   static propTypes = { // as static property
-    theme: React.PropTypes.string,
+    theme: PropTypes.string,
   };
 
   constructor(props) {

src/views/echarts/ThemeChartComponent.js

@@ -1,11 +1,12 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import ReactEcharts from 'echarts-for-react'
 
 import echarts from 'echarts'
 
 class ThemeChartComponent extends React.Component {
   static propTypes = { // as static property
-    theme: React.PropTypes.string,
+    theme: PropTypes.string,
   }
 
   constructor (props) {

src/views/home.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Row, Col } from 'antd'
 // import { Link } from 'react-router'

src/views/layout/frame.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
 import { Icon, Layout, Menu, Switch, Popover, Badge, Breadcrumb } from 'antd'
@@ -9,17 +10,17 @@ import pathToRegexp from 'path-to-regexp'
 import config from '../../utils/config'
 
 
+
 import styles from '../../css/app.less'
-import { arrayMenu, treeMenu, useArrayMenu } from '../../menu'
+// import { arrayMenu } from '../../menu'
 import { arrayToTree, queryArray } from '../../utils'
 
-import appAction from '../../redux/actions/app'
+import { actions as appAction } from '../../redux/domain/app'
 
 const { Header, Footer, Sider, Content } = Layout
 const { SubMenu } = Menu
 
 let lastHref
-const menuTree = useArrayMenu ? arrayToTree(arrayMenu) : treeMenu
 const getMenuItems = (_menuTree, _siderFold) => {
   return _menuTree.map((item) => {
     if (item.children) {
@@ -52,29 +53,19 @@ const getPathArray = (array, current, pid, id) => {
   return { defaultSelectedKeys, currentMenuArray }
 }
 
-function getCurrentMenuItem (location) {
-  let currentMenu
-  for (let item of arrayMenu) {
-    if (item.router && pathToRegexp(item.router).exec(location)) {
-      currentMenu = item
-      break
-    }
-  }
-  if (currentMenu) {
-    return getPathArray(arrayMenu, currentMenu, 'pid', 'id')
-  }
-  return {}
+function getCurrentMenuItem (location, arrayMenu) {
+  let currentMenu = arrayMenu.find(item => item.router && pathToRegexp(item.router).exec(location))
+  return currentMenu ? getPathArray(arrayMenu, currentMenu, 'pid', 'id') : {}
 }
 
-
 const App = ({ children, location, app, ...others }) => {
-  const { siderFold, theme, siderVisible, news, user } = app
-  const { changeTheme, toggleSider, loadUser, logout } = others
+  const { siderFold, theme, siderVisible, news, user, menus } = app
+  const { changeTheme, toggleSider, initLoad, logout } = others
 
   if (config.top_target_pages && config.top_target_pages.indexOf(location.pathname) > -1) {
     return <div>{children}</div>
   }
-  !user.username && loadUser()
+  !user.username && initLoad()
   // 路由切换显示进度条
   const href = window.location.href
   if (lastHref !== href) {
@@ -85,18 +76,19 @@ const App = ({ children, location, app, ...others }) => {
 
   const handleClickMenu = e => e.key === 'logout' && logout()
 
+  const menuTree = arrayToTree(menus)
 
   const menuContents = getMenuItems(menuTree, siderFold)
 
   // 寻找选中路由
 
-  const { defaultSelectedKeys, currentMenuArray } = getCurrentMenuItem(location.pathname)
+  const { defaultSelectedKeys, currentMenuArray } = getCurrentMenuItem(location.pathname, menus)
 
   // 寻找选中路由
   const menuProps = {
-    onClick: ({ keyPath }) => {
-      keyPath.map(id => arrayMenu.find(item => `${item.id}` === id))
-    },
+    // onClick: ({ keyPath }) => {
+    //   keyPath.map(id => arrayMenu.find(item => `${item.id}` === id))
+    // },
     theme,
     inlineIndent: 16,
     mode: 'inline',

src/views/sys/roles.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Button, Col, message, Form, Row, Input, Table } from 'antd'
 import { actions } from '../../redux/domain/sysRole'

src/views/sys/users.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Button, Col, message, Form, Row, Input, Table } from 'antd'
 import { actions as userActions } from '../../redux/domain/sysUser'