users

README.md

@@ -38,3 +38,8 @@ https://github.com/dvajs/dva/tree/master/examples/user-dashboard
 ├── package.json     # 项目信息
 └── proxy.config.js  # 数据mock配置
 ```
+## Screenshot
+
+![](assets/anrd-admin-login.png)
+
+![](assets/anrd-admin-dataList.png)

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "dva": "^1.0.0",
     "keymaster": "^1.6.2",
+    "qs": "^6.2.1",
     "react": "^15.1.0",
     "react-dom": "^15.1.0"
   },

src/components/Layout/Header.jsx

@@ -0,0 +1,41 @@
+import React, { PropTypes } from 'react';
+import { Menu, Icon } from 'antd';
+import { Link } from 'dva/router';
+
+function getMenuKeyFromUrl(pathname) {
+  let key = '';
+  try {
+    key = pathname.match(/\/([^\/]*)/i)[1];
+    /* eslint no-empty:0 */
+  } catch (e) {}
+  return key;
+}
+
+function Header({ location }) {
+  return (
+    <Menu
+      selectedKeys={[getMenuKeyFromUrl(location.pathname)]}
+      mode="horizontal"
+      theme="dark"
+    >
+      <Menu.Item key="users">
+        <Link to="/users"><Icon type="bars" />Users</Link>
+      </Menu.Item>
+      <Menu.Item key="home">
+        <Link to="/"><Icon type="home" />Home</Link>
+      </Menu.Item>
+      <Menu.Item key="404">
+        <Link to="/page-you-dont-know"><Icon type="frown-circle" />404</Link>
+      </Menu.Item>
+      <Menu.Item key="antd">
+        <a href="https://github.com/dvajs/dva" target="_blank">dva</a>
+      </Menu.Item>
+    </Menu>
+  );
+}
+
+Header.propTypes = {
+  location: PropTypes.object,
+};
+
+export default Header;

src/components/Layout/MainLayout.jsx

@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+import styles from './MainLayout.less';
+import Header from './Header';
+
+function MainLayout({ children, location }) {
+  return (
+    <div className={styles.normal}>
+      <Header location={location} />
+      <div className={styles.content}>
+        <div className={styles.main}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+MainLayout.propTypes = {
+  children: PropTypes.element.isRequired,
+  location: PropTypes.object,
+};
+
+export default MainLayout;

src/components/Layout/MainLayout.less

@@ -0,0 +1,16 @@
+
+.normal {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+}
+
+.main {
+  padding: 0 8px;
+  flex: 1 0 auto;
+}

src/models/users.js

@@ -1,144 +1,116 @@
-import {create, remove, update, query} from '../services/users'
-import {parse} from 'qs'
+import { create, remove, update, query } from '../services/users'
+import { parse } from 'qs'
 
 export default {
 
-  namespace : 'users',
+  namespace: 'users',
 
-  state : {
+  state: {
     list: [],
     loading: false,
     total: null,
     current: 1,
     currentItem: {},
     modalVisible: false,
-    modalType: 'create'
+    modalType: 'create',
   },
 
-  subscriptions : {
-    setup({dispatch, history}) {
+  subscriptions: {
+    setup({ dispatch, history }) {
       history.listen(location => {
         if (location.pathname === '/users') {
-          dispatch({type: 'query', payload: location.query})
+          dispatch({
+            type: 'query',
+            payload: location.query,
+          })
         }
       })
-    }
+    },
   },
 
-  effects : {
-    *query({
-      payload
-    }, {call, put}) {
-      yield put({type: 'showLoading'})
-      const {data} = yield call(query, parse(payload))
+  effects: {
+    *query({ payload }, { call, put }) {
+      yield put({ type: 'showLoading' })
+      const { data } = yield call(query, parse(payload))
       if (data) {
         yield put({
           type: 'querySuccess',
           payload: {
             list: data.data,
             total: data.page.total,
-            current: data.page.current
-          }
+            current: data.page.current,
+          },
         })
       }
     },
-    * 'delete' ({
-      payload
-    }, {call, put}) {
-      yield put({type: 'showLoading'})
-      const {data} = yield call(remove, {id: payload})if (data && data.success) {
-        yield put({type: 'deleteSuccess', payload})
+    *'delete'({ payload }, { call, put }) {
+      yield put({ type: 'showLoading' })
+      const { data } = yield call(remove, { id: payload })
+      if (data && data.success) {
+        yield put({
+          type: 'deleteSuccess',
+          payload,
+        })
       }
     },
-    *create({
-      payload
-    }, {call, put}) {
-      yield put({type: 'hideModal'})
-      yield put({type: 'showLoading'})
-      const {data} = yield call(create, payload)
+    *create({ payload }, { call, put }) {
+      yield put({ type: 'hideModal' })
+      yield put({ type: 'showLoading' })
+      const { data } = yield call(create, payload)
       if (data && data.success) {
-        yield put({type: 'createSuccess', payload})
+        yield put({
+          type: 'createSuccess',
+          payload,
+        })
       }
     },
-    *update({
-      payload
-    }, {select, call, put}) {
-      yield put({type: 'hideModal'})
-      yield put({type: 'showLoading'})
-      const id = yield select(({users}) => users.currentItem.id)
-      const newUser = {
-        ...payload,
-        id
-      }
-      const {data} = yield call(update, newUser)
+    *update({ payload }, { select, call, put }) {
+      yield put({ type: 'hideModal' })
+      yield put({ type: 'showLoading' })
+      const id = yield select(({ users }) => users.currentItem.id)
+      const newUser = { ...payload, id }
+      const { data } = yield call(update, newUser)
       if (data && data.success) {
-        yield put({type: 'updateSuccess', payload: newUser})
+        yield put({
+          type: 'updateSuccess',
+          payload: newUser,
+        })
       }
-    }
+    },
   },
 
-  reducers : {
+  reducers: {
     showLoading(state) {
-      return {
-        ...state,
-        loading: true
-      }
+      return { ...state, loading: true }
     },
     createSuccess(state, action) {
       const newUser = action.payload
-      return {
-        ...state,
-        list: [
-          newUser, ...state.list
-        ],
-        loading: false
-      }
+      return { ...state, list: [newUser, ...state.list], loading: false }
     },
     deleteSuccess(state, action) {
       const id = action.payload
       const newList = state.list.filter(user => user.id !== id)
-      return {
-        ...state,
-        list: newList,
-        loading: false
-      }
+      return { ...state, list: newList, loading: false }
     },
     updateSuccess(state, action) {
       const updateUser = action.payload
       const newList = state.list.map(user => {
         if (user.id === updateUser.id) {
-          return {
-            ...user,
-            ...updateUser
-          }
+          return { ...user, ...updateUser }
         }
         return user
       })
-      return {
-        ...state,
-        list: newList,
-        loading: false
-      }
+      return { ...state, list: newList, loading: false }
     },
     querySuccess(state, action) {
-      return {
-        ...state,
-        ...action.payload,
-        loading: false
-      }
+      return { ...state, ...action.payload, loading: false }
     },
     showModal(state, action) {
-      return {
-        ...state,
-        ...action.payload,
-        modalVisible: true
-      }
+      return { ...state, ...action.payload, modalVisible: true }
     },
     hideModal(state) {
-      return {
-        ...state,
-        modalVisible: false
-      }
-    }
-  }
+      return { ...state, modalVisible: false }
+    },
+  },
+
 }

src/router.js

@@ -1,10 +1,9 @@
-import React from 'react';
-import { Router, Route } from 'dva/router';
-import HomePage from './routes/HomePage';
-import NotFound from './routes/NotFound';
-import Users from './routes/Users';
+import React from 'react'
+import { Router, Route } from 'dva/router'
+import HomePage from './routes/HomePage'
+import NotFound from './routes/NotFound'
+import Users from './routes/Users'
 
-/* eslint react/prop-types:0 */
 export default function ({ history }) {
   return (
     <Router history={history}>
@@ -12,5 +11,5 @@ export default function ({ history }) {
       <Route path="/users" component={Users} />
       <Route path="*" component={NotFound} />
     </Router>
-  );
+  )
 }

src/routes/Users.jsx

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { routerRedux } from 'dva/router';
 import { connect } from 'dva';
-import MainLayout from '../components/MainLayout/MainLayout';
+import MainLayout from '../components/Layout/MainLayout';
 import styles from './Users.less';
 import UserList from '../components/Users/UserList';
 import UserSearch from '../components/Users/UserSearch';

src/services/example.js

@@ -0,0 +1,5 @@
+import request from '../utils/request';
+
+export async function query() {
+  return request('/api/users');
+}