feat: 优化合并代码

client/ReduxContainer.js

@@ -1,5 +1,5 @@
-import LoginRedux from './reducer/Login/Login_redux.js'
-import login from './reducer/Login/login.js'
+import LoginRedux from './reducer/login/Login_redux.js'
+import login from './reducer/login/login.js'
 import group from './reducer/group/group.js'
 import project from './reducer/group/project.js'
 import Interface from './reducer/interface/InterfaceReducer.js'

client/actions/addInterFace.js

@@ -0,0 +1,10 @@
+import {
+  FETCH_ADD_INTERFACE_INPUT
+} from '../constants/action-types.js'
+
+export function pushInputVal (value) {
+  return {
+    type: FETCH_ADD_INTERFACE_INPUT,
+    payload: value
+  };
+}

client/containers/AddInterface/AddInterface.js

@@ -0,0 +1,44 @@
+import './AddInterface.scss'
+import React, { Component } from 'react'
+// import PropTypes from 'prop-types'
+// import { connect } from 'react-redux'
+import { Button } from 'antd'
+import ReqMethod from './ReqMethod/ReqMethod.js'
+import ReqHeader from './ReqHeader/ReqHeader.js'
+import ReqParams from './ReqParams/ReqParams.js'
+import ResParams from './ResParams/ResParams.js'
+import Result from './Result/Result.js'
+
+class AddInterface extends Component {
+  // static propTypes = {
+
+  // }
+
+  constructor (props) {
+    super(props)
+  }
+
+  saveForms () {
+    console.log(this)
+  }
+
+  render () {
+    const saveForms = this.saveForms.bind(this)
+    return (
+      <section className="add-interface-box">
+        <div className="content">
+          <Button type="primary" className="save" onClick={saveForms}>保存</Button>
+          <ReqMethod />
+          <ReqHeader />
+          <ReqParams />
+          <ResParams />
+          <Result />
+        </div>
+      </section>
+    )
+  }
+}
+
+export default AddInterface
+
+    

client/containers/AddInterface/AddInterface.scss

@@ -0,0 +1,163 @@
+.add-interface-box {
+  -webkit-box-flex: 1;
+  font-size: .14rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .content {
+    max-width: 11rem;
+    margin: 0 auto;
+    background: #FFF;
+    padding: 10px 20px;
+
+    .save {
+      float: right;
+      margin: 0 0 10px 0;
+    }
+    
+    table {
+      width: 100%;
+      border-top: 1px #EEE solid;
+
+      th {
+        padding:0 10px;
+      }
+      
+      td {
+        padding: 10px 0;
+      }
+
+      .select {
+        height: 32px;
+      }
+
+      .h3 {
+        font-size: .14rem;
+        margin: 0 10px 0 15px;
+      }
+
+      .url {
+        margin: 0 0 0 15px;
+        width: 57.8%;
+      }
+    }
+
+    .close {
+      font-size: .25rem;
+      color: #C44;
+      display: block;
+      margin: 0 0 0 10px;
+      cursor: pointer;
+    }
+  
+    /* .req-header.css */
+    .req-header {
+      display: -webkit-box;
+      line-height: 32px;
+      margin: 10px 0 0 0;
+      border-top: 1px #EEE solid;
+      padding: 15px 0 0 0;
+
+      .req-h3 {
+        line-height: 32px;
+      }
+
+      ul {
+        -webkit-box-flex: 1;
+        margin: 0 0 0 24px;
+
+        li {
+          display: -webkit-box;
+        }
+
+        .title {
+          margin: 0 10px 0 20px;
+          display: block;
+        }
+
+        .req-content {
+          width: 220px;
+        }
+      }
+    }
+
+    .req-save, .res-save {
+      margin: 15px 0 0 107px;
+    }
+    
+    /* .req-params.css */
+    .req-params {
+      display: -webkit-box;
+      line-height: 32px;
+      padding: 20px 0 0 0;
+      border-top: 1px #EEE solid;
+      margin: 20px 0 0 0;
+
+      ul {
+        -webkit-box-flex: 1;
+        margin: 0 0 0 24px;
+
+        li {
+          display: -webkit-box;
+        }
+
+        .required {
+          margin: 0 10px 0 20px;
+        }
+
+        .title {
+          margin: 0 10px;
+          display: block;
+        }
+      }
+    }
+
+    /* .req-save.css */
+    .res-params {
+      display: -webkit-box;
+      line-height: 32px;
+      padding: 20px 0 0 0;
+      border-top: 1px #EEE solid;
+      margin: 20px 0 0 0;
+
+      ul {
+        -webkit-box-flex: 1;
+        margin: 0 0 0 24px;
+
+        li {
+          display: -webkit-box;
+        }
+
+        .required {
+          margin: 0 10px 0 20px;
+        }
+
+        .title {
+          margin: 0 10px;
+          display: block;
+        }
+      }
+    }
+
+    .result {
+      display: -webkit-box;
+      line-height: 32px;
+      padding: 20px 0 0 0;
+      border-top: 1px #EEE solid;
+      margin: 20px 0 0 0;
+      
+      .ant-tabs {
+        -webkit-box-flex: 1;
+      }
+
+      textarea {
+        width: 100%;
+        border: 1px #DDD solid;
+        border-radius: 3px;
+        padding: 10px;
+        font-size: .14rem;
+        height: 150px;
+      }
+    }
+  }
+}

client/containers/AddInterface/ReqHeader/ReqHeader.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import { Button } from 'antd'
+import ReqList from './ReqList.js'
+
+class ReqHeader extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
+    return (
+      <section>
+        <div className="req-header">
+          <strong className="req-h3">请求头部 :</strong>
+          <ul>
+            <ReqList />
+          </ul>
+        </div>
+        <Button type="primary" className="req-save">添加</Button>
+      </section>
+    )
+  }
+}
+
+export default ReqHeader

client/containers/AddInterface/ReqHeader/ReqList.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import { Select, Input } from 'antd'
+
+class ReqList extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
+    const Option = Select.Option
+
+    return (
+      <li>
+        <em className="title">头部标签</em>
+        <Select defaultValue="HTTP" style={{ width: 220 }} onChange={this.handleChange} size="large">
+          <Option value="HTTP">Accept</Option>
+          <Option value="Accept-Charset">Accept-Charset</Option>
+          <Option value="Accept-Encoding">Accept-Encoding</Option>
+          <Option value="Accept-Language">Accept-Language</Option>
+          <Option value="Accept-Ranges">Accept-Ranges</Option>
+        </Select>
+        <em className="title">头部内容</em>
+        <Input placeholder="Basic usage" className="req-content" size="large" />
+        <span className="close">×</span>
+      </li>
+    )
+  }
+}
+
+export default ReqList

client/containers/AddInterface/ReqMethod/ReqMethod.js

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import React, { Component } from 'react'
+import { Select, Input } from 'antd'
+import { 
+  pushInputVal
+} from '../../../actions/addInterFace.js'
+
+@connect(
+  () => {
+    return {
+      // reqInputVal: state.Interface.interfaceData
+      reqInputVal: ''
+    }
+  },
+  {
+    pushInputVal
+  }
+)
+
+class ReqMethod extends Component {
+  static propTypes = {
+    pushInputVal: PropTypes.func,
+    reqInputVal: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  handleChange (value) {
+    console.log(`selected ${value}`)
+  }
+
+  getInputVal (e) {
+    const inputVal = e.target.value
+    this.props.pushInputVal(inputVal)
+  }
+
+  render () {
+    const { Option } = Select
+    const getInputVal = this.getInputVal.bind(this)
+    return (
+      <table>
+        <tbody>
+          <tr>
+            <th>协议 :</th>
+            <td>
+              <span className="h3">请求协议 {this.props.reqInputVal}</span>
+              <Select defaultValue="HTTP" style={{ width: 220}} onChange={this.handleChange} size="large">
+                <Option value="HTTP">HTTP</Option>
+                <Option value="HTTPS">HTTPS</Option>
+              </Select>
+              <span className="h3">请求方式</span>
+              <Select defaultValue="POST" style={{ width: 220 }} onChange={this.handleChange} size="large">
+                <Option value="POST">POST</Option>
+                <Option value="GET">GET</Option>
+                <Option value="PUT">PUT</Option>
+                <Option value="DELETE">DELETE</Option>
+              </Select>
+            </td>
+          </tr>
+          <tr>
+            <th>URL :</th>
+            <td><Input placeholder="Basic usage" className="url" size="large" onBlur={getInputVal} /></td>
+          </tr>
+        </tbody>
+      </table>
+    )
+  }
+}
+
+export default ReqMethod

client/containers/AddInterface/ReqParams/ParamsList.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { Select, Input } from 'antd'
+
+class ParamsList extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
+    const Option = Select.Option
+
+    return (
+      <li>
+        <Select defaultValue="选填" style={{ width: 'auto' }} onChange={this.handleChange} size="large" className="required">
+          <Option value="必填">必填</Option>
+          <Option value="选填">选填</Option>
+        </Select>   
+        <em className="title">参数名称</em>
+        <Input placeholder="参数名称" className="name" size="large" />
+        <em className="title">参数说明</em>
+        <Input placeholder="参数说明" className="name" size="large" />
+        <span className="close">×</span>
+      </li>      
+    )
+  }
+}
+
+export default ParamsList

client/containers/AddInterface/ReqParams/ReqParams.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import { Button } from 'antd'
+import ParamsList from './ParamsList.js'
+
+class ReqParams extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
+    return (
+      <section>
+        <div className="req-params">
+          <strong className="req-h3">请求参数 :</strong>
+          <ul>
+            <ParamsList />
+          </ul>
+        </div>
+
+        <Button type="primary" className="req-save">添加</Button>
+      </section>
+    )
+  }
+}
+
+export default ReqParams

client/containers/AddInterface/ResParams/ParamsList.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { Select, Input } from 'antd'
+
+class ParamsList extends Component {
+  constructor (props) {
+    super(props)
+  }
+
+  render () {
+    const Option = Select.Option
+
+    return (
+      <li>
+        <Select defaultValue="选填" style={{ width: 'auto' }} onChange={this.handleChange} size="large" className="required">
+          <Option value="必填">必填</Option>
+          <Option value="选填">选填</Option>
+        </Select>   
+        <em className="title">参数名称</em>
+        <Input placeholder="参数名称" className="name" size="large" />
+        <em className="title">参数说明</em>
+        <Input placeholder="参数说明" className="name" size="large" />
+        <span className="close">×</span>
+      </li>
+    )
+  }
+}
+
+export default ParamsList

client/containers/AddInterface/ResParams/ResParams.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import { Button } from 'antd'
+import ParamsList from './ParamsList.js'
+
+class ResParams extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render () {
+    return (
+      <section>
+        <div className="res-params">
+          <strong className="res-h3">返回参数 :</strong>
+          <ul>
+            <ParamsList />
+          </ul>
+        </div>
+
+        <Button type="primary" className="res-save">添加</Button>
+      </section>
+    )
+  }
+}
+
+export default ResParams

client/containers/AddInterface/Result/Result.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import { Tabs } from 'antd'
+
+class Result extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  callback () {
+
+  }
+
+  render () {
+    const TabPane = Tabs.TabPane
+
+    return (
+      <div className="result">
+        <strong className="res-h3">返回示例 :</strong>
+        <Tabs defaultActiveKey="1" onChange={this.callback}>
+          <TabPane tab="成功结果" key="1">
+            <textarea></textarea>
+          </TabPane>
+          <TabPane tab="失败结果" key="2">
+            <textarea></textarea>
+          </TabPane>
+        </Tabs>
+      </div>
+    )
+  }
+}
+
+export default Result

client/containers/index.js

@@ -1,13 +1,17 @@
+import Header from '../components/Header/Header.js'
 import Home from './Home/Home.js'
 import Login from './Login/login-wrap.js'
 import ProjectGroups from './ProjectGroups/ProjectGroups.js'
 import Interface from './Interface/Interface.js'
 import News from './News/News.js'
+import AddInterface from './AddInterface/AddInterface.js'
 
 export {
+  Header,
   Home,
   Login,
   ProjectGroups,
   Interface,
+  AddInterface,
   News
 }

client/index.js

@@ -3,7 +3,7 @@ import 'babel-polyfill'
 import thunkMiddleware from 'redux-thunk'
 import promiseMiddleware from 'redux-promise';
 import ReactDOM from 'react-dom'
-import App from './App'
+import App from './app'
 import { createStore, combineReducers, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import ReduxContainer from './ReduxContainer.js'

client/reducer/addInterface/addInterface.js

@@ -0,0 +1,30 @@
+import {
+  FETCH_ADD_INTERFACE_INPUT
+} from '../../constants/action-types.js'
+
+const initialState = {
+  inputValue: null,
+  modalVisible: false
+}
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_INTERFACE_DATA:
+      return {
+        ...state,
+        interfaceData: action.payload
+      }
+    case LIST_INTERFACE_CLICK:
+      return {
+        ...state,
+        modalVisible: true
+      }
+    case PROJECT_MEMBER_INTERFACE:
+      return {
+        ...state,
+        modalVisible: false
+      }
+    default:
+      return state
+  }
+}

client/routes.js

@@ -1,11 +1,8 @@
 import React from 'react'
-
 import { Route, HashRouter } from 'react-router-dom'
-import { Home, ProjectGroups, Interface, News } from './containers/index'
+import { Header, Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
 import User from './containers/User/User.js'
 
-import Header from './components/Header/Header'
-
 export default () => {
   return (
     <HashRouter>
@@ -16,8 +13,8 @@ export default () => {
         <Route path="/Interface" component={ Interface } />
         <Route path="/user" component={User} />
         <Route path="/News" component={ News } />
+        <Route path="/AddInterface" component={ AddInterface } />
       </div>
-
     </HashRouter>
   )
 }