Merge branch 'wangliang' into 'dev'

添加接口静态页面

See merge request !6

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/actionTypes.js

@@ -0,0 +1,6 @@
+// Interface
+export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA';
+
+// Home
+export const FETCH_HOME_DATA = 'FETCH_INTERFACE_DATA';
+

client/actions/interface.js

@@ -0,0 +1,33 @@
+import {
+  FETCH_INTERFACE_DATA,
+} from '../actionTypes.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/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,38 @@
+/* .interface-box.css */
+.interface-box {
+  max-width: 11rem;
+  display: -webkit-box;
+  -webkit-box-flex: 1;
+  margin: 15px auto 0 auto;
+  font-size: 0.14rem;
+
+  .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">Primary</Button>
+            <Button type="primary">Primary</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/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/reducer/interface/interface.js

@@ -0,0 +1,16 @@
+import {
+  FETCH_INTERFACE_DATA,
+} from '../../actionTypes.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';