merge the latest dev to local

client/ReduxContainer.js

@@ -1,7 +1,9 @@
 import LoginRedux from './reducer/Login/Login_redux.js'
 import group from './reducer/group/group.js'
+import Interface from './reducer/Interface/Interface.js'
 
 export default {
+  group,
   LoginRedux,
-  group
+  Interface,
 }

client/actions/interface.js

@@ -0,0 +1,33 @@
+import {
+  FETCH_INTERFACE_DATA,
+} from '../constants/action-types.js';
+
+export function fetchAuditIcons () {
+  const data = [{
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    date: '2015-11-11 13:00:15',
+    features: '3',
+  }, {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    date: '2015-11-11 13:00:15',
+    features: '3',
+  }, {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park',
+    date: '2015-11-11 13:00:15',
+    features: '3',
+  }]
+
+  return {
+    type: FETCH_INTERFACE_DATA,
+    payload: data,
+  };
+}

client/constants/action-types.js

@@ -1,3 +1,6 @@
+// Interface
+export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA';
+
 // group
 export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'
 export const FETCH_CURR_GROUP = 'FETCH_CURR_GROUP'

client/containers/Interface/Interface.js

@@ -0,0 +1,45 @@
+import './Interface.scss'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import InterfaceList from './InterfaceList/InterfaceList.js'
+import InterfaceTable from './InterfaceTable/InterfaceTable.js'
+import { fetchAuditIcons } from '../../actions/interface.js'
+
+@connect(
+  state => {
+    return {
+      interfaceData: state.data,
+    }
+  },
+  {
+    fetchAuditIcons,
+  }
+)
+//
+class Interface extends Component {
+  static propTypes = {
+    fetchAuditIcons: PropTypes.func,
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentWillMount () {
+    this.props.fetchAuditIcons()
+  }
+
+  render () {
+    const data = this.props.fetchAuditIcons().payload
+
+    return (
+      <section className="interface-box">
+        <InterfaceList />
+        <InterfaceTable data={data} />
+      </section>
+    )
+  }
+}
+
+export default Interface

client/containers/Interface/Interface.scss

@@ -0,0 +1,39 @@
+/* .interface-box.css */
+.interface-box {
+  max-width: 11rem;
+  display: -webkit-box;
+  -webkit-box-flex: 1;
+  margin: 15px auto 0 auto;
+  font-size: 0.14rem;
+  background: #FFF;
+
+  .interface-list {
+    width: 216px;
+    line-height: 45px;
+    background: #f9fafe;
+    
+    li {
+      padding: 0 0 0 30px;
+      color: #344562;
+      cursor: pointer;
+      
+      &:hover, &.active {
+        background: #657289;
+        color: #FFF;
+      }
+    }
+  }
+
+  .interface-table {
+    -webkit-box-flex: 1;
+    margin: 0 0 0 20px;
+
+    .ant-table-wrapper table {
+      font-size: .14rem;
+
+      button {
+        margin: 0 10px 0 0;
+      }
+    }
+  }
+}

client/containers/Interface/InterfaceList/InterfaceList.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+
+class InterfaceList extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
+    return (
+      <ul className="interface-list">
+        <li className="active">添加接口</li>
+        <li>管理项目成员</li>
+      </ul>
+    )
+  }
+}
+
+export default InterfaceList

client/containers/Interface/InterfaceTable/InterfaceTable.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import { Table, Button } from 'antd'
+import PropTypes from 'prop-types'
+
+class InterfaceTable extends Component {
+  static propTypes = {
+    data: PropTypes.array,
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
+    const columns = [{
+      title: '接口名称',
+      dataIndex: 'name',
+      key: 'name',
+    }, {
+      title: '接口URL',
+      dataIndex: 'age',
+      key: 'age',
+    }, {
+      title: '操作者',
+      dataIndex: 'address',
+      key: 'address',
+    }, {
+      title: '更新日期',
+      dataIndex: 'date',
+      key: 'date',
+    }, {
+      title: '功能',
+      'key': 'action',
+      render: () => {
+        return (
+          <span>
+            <Button type="primary">编辑</Button>
+            <Button type="danger">删除</Button>
+          </span>
+        )
+      }
+    }]
+
+    const data = this.props.data;
+    console.log(this.props.data)
+
+    return (
+      <section className="interface-table">
+        <Table columns={columns} dataSource={data} />
+      </section>
+    )
+  }
+}
+
+export default InterfaceTable

client/containers/Login/Login_container.js

@@ -1,24 +0,0 @@
-import { connect } from 'react-redux'
-import Login from './Login.js'
-
-// Action
-const increaseAction = { type: 'increase' }
-
-function mapStateToProps() {
-  return {
-    per: '测试数据'
-  }
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    onIncreaseClick: () => dispatch(increaseAction)
-  }
-}
-
-const App = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Login)
-
-export default App

client/containers/ProjectGroups/GroupList/GroupList.js

@@ -6,7 +6,7 @@ import { Card } from 'antd'
 import {
   fetchGroupList,
   fetchCurrGroup
-} from '../../actions/group.js'
+} from '../../../actions/group.js'
 
 import './GroupList.scss'
 

client/containers/ProjectGroups/ProjectGroups.js

@@ -1,5 +1,7 @@
-import React, { Component } from 'react'
-import GroupList from '../../components/GroupList/GroupList.js'
+import React, { Component } from 'react';
+import GroupList from './GroupList/GroupList.js';
+import ProjectList from './ProjectList';
+import { Row, Col } from 'antd';
 
 import './ProjectGroups.scss'
 
@@ -10,10 +12,15 @@ export default class ProjectGroups extends Component {
 
   render () {
     return (
-      <div>
-        <div className="groups-left">
-          <GroupList></GroupList>
-        </div>
+      <div className="g-doc">
+        <Row gutter={16}>
+          <Col span={6}>
+            <GroupList></GroupList>
+          </Col>
+          <Col span={18}>
+            <ProjectList/>
+          </Col>
+        </Row>
       </div>
     )
   }

client/containers/ProjectGroups/ProjectGroups.scss

@@ -1,4 +1,4 @@
-.groups-left {
-  width: 250px;
-  margin: 20px;
+.g-doc {
+  max-width: 11rem;
+  margin: .24rem auto;
 }

client/containers/ProjectGroups/ProjectList/index.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+// import PropTypes from 'prop-types'
+// import { connect } from 'react-redux'
+import { Table } from 'antd'
+
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  render: text => <a href="#">{text}</a>,
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+}, {
+  title: 'Action',
+  key: 'action',
+  render: () => (
+    <span>
+      <a href="#">修改</a>
+      <span className="ant-divider" />
+      <a href="#">删除</a>
+    </span>
+  ),
+}];
+
+const data = [{
+  key: '1',
+  age: 32
+}, {
+  key: '2',
+  age: 42
+}, {
+  key: '3',
+  age: 32
+}];
+
+
+
+export default class GroupList extends Component {
+  render() {
+    return (
+      <Table columns={columns} dataSource={data} />
+    );
+  }
+}

client/containers/index.js

@@ -1,9 +1,11 @@
 import Home from './Home/Home.js'
 import Login from './Login/Login.js'
 import ProjectGroups from './ProjectGroups/ProjectGroups.js'
+import Interface from './Interface/Interface.js'
 
 export {
   Home,
   Login,
   ProjectGroups,
+  Interface,
 }

client/index.js

@@ -1,13 +1,21 @@
 import React from 'react'
 import 'babel-polyfill'
+import thunkMiddleware from 'redux-thunk'
+import promiseMiddleware from 'redux-promise';
 import ReactDOM from 'react-dom'
 import App from './App'
-import { createStore, combineReducers } from 'redux'
+import { createStore, combineReducers, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import ReduxContainer from './ReduxContainer.js'
 
+console.log('thunkMiddleware', thunkMiddleware)
+console.log('promiseMiddleware', promiseMiddleware)
+
 // 合并 redux 创建stroe
-const store = createStore(combineReducers( ReduxContainer ))
+const store = createStore(combineReducers( ReduxContainer ), applyMiddleware(
+  thunkMiddleware.default,
+  promiseMiddleware
+))
 
 ReactDOM.render(
   <Provider store={store}>

client/reducer/interface/interface.js

@@ -0,0 +1,16 @@
+import {
+  FETCH_INTERFACE_DATA,
+} from '../../constants/action-types.js'
+
+export default (state = 3333, action) => {
+  switch (action.type) {
+    case FETCH_INTERFACE_DATA: {
+      return {
+        ...state,
+        icons: action.payload.data,
+      };
+    }
+    default:
+      return state;
+  }
+}

client/routes.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Route, HashRouter } from 'react-router-dom'
-import { Home, Login, ProjectGroups } from './containers/index'
+import { Home, Login, ProjectGroups, Interface } from './containers/index'
 
 export default () => {
   return (
@@ -9,6 +9,7 @@ export default () => {
         <Route path="/" component={ Home } />
         <Route path="/Login" component={ Login } />
         <Route path="/ProjectGroups" component={ ProjectGroups } />
+        <Route path="/Interface" component={ Interface } />
       </div>
     </HashRouter>
   )

client/styles/common.scss

@@ -2,7 +2,8 @@
 @import '~antd/dist/antd.css';
 
 html {
-  font-size:625%
+  font-size:625%;
+  background: #f1f3f6;
 }
 html, body {
   font-family: tahoma, 'Microsoft Yahei';
@@ -38,4 +39,5 @@ em {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   height: 100%;
+  background-color: #ececec;
 }

package.json

@@ -16,6 +16,7 @@
   "license": "ISC",
   "dependencies": {
     "@qnpm/ykit-config-qunar": "^0.8.1",
+    "axios": "^0.16.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "fs-extra": "^3.0.1",
     "jsonwebtoken": "^7.4.1",
@@ -34,8 +35,9 @@
     "node-sass-china": "^4.5.0",
     "nodemailer": "^4.0.1",
     "prop-types": "^15.5.10",
-    "sha1": "^1.1.1",
     "redux": "^3.7.1",
+    "redux-promise": "^0.5.3",
+    "redux-thunk": "^2.2.0",
     "sha1": "^1.1.1",
     "ykit-config-antd": "^0.1.3",
     "ykit-config-react": "^0.4.4"