Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

client/containers/Project/Interface/InterfaceList/Run.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Button, Input, Select, Card, Alert, Spin, Icon, message } from 'antd'
+import { Button, Input, Select, Card, Alert, Spin, Icon, message, Collapse } from 'antd'
 import { autobind } from 'core-decorators';
 import crossRequest from 'cross-request';
 import { withRouter } from 'react-router';
@@ -16,6 +16,7 @@ import './Run.scss'
 const { TextArea } = Input;
 const InputGroup = Input.Group;
 const Option = Select.Option;
+const Panel = Collapse.Panel;
 
 @connect(
   state => ({
@@ -29,7 +30,7 @@ const Option = Select.Option;
   })
 )
 @withRouter
-export default class InterfaceTest extends Component {
+export default class Run extends Component {
 
   static propTypes = {
     match: PropTypes.object,
@@ -350,52 +351,46 @@ export default class InterfaceTest extends Component {
 
   render () {
 
-    const { interfaceName } = this.props;
     const { method, domains, pathname, query, headers, params, currDomain, paramsType } = this.state;
     const hasPlugin = this.hasCrossRequestPlugin();
     const search = decodeURIComponent(URL.format({query: this.getQueryObj(query)}));
 
     return (
       <div className="interface-test">
-        <div style={{padding: '0 20%'}}>
-          { hasPlugin ? '' :
-          <Alert
-            message={
-              <div>
-                温馨提示：当前正在使用接口测试服务，请安装我们为您免费提供的&nbsp;
-                <a
-                  target="blank"
-                  href="https://chrome.google.com/webstore/detail/cross-request/cmnlfmgbjmaciiopcgodlhpiklaghbok?hl=en-US"
-                >
-                  测试增强插件 [点击获取]！
-                </a>
-              </div>
-            }
-            type="warning"
-          />
+        <div  className="has-plugin">
+          {
+            hasPlugin ? '' : (
+              <Alert
+                message={
+                  <div>
+                    温馨提示：当前正在使用接口测试服务，请安装我们为您免费提供的&nbsp;
+                    <a
+                      target="blank"
+                      href="https://chrome.google.com/webstore/detail/cross-request/cmnlfmgbjmaciiopcgodlhpiklaghbok?hl=en-US"
+                    >测试增强插件 [点击获取]！</a>
+                  </div>
+                }
+                type="warning"
+              />
+            )
           }
         </div>
-        <div className="interface-name">{interfaceName}</div>
 
-        {/* url */}
-        <div className="req-part">
-          <div className="req-row href">
-            <InputGroup compact style={{display: 'inline-block', width: 680, border: 0, background: '#fff', marginBottom: -4}}>
-              <Input value="Method" disabled style={{display: 'inline-block', width: 80, border: 0, background: '#fff'}} />
-              <Input value="Domain" disabled style={{display: 'inline-block', width: 300, border: 0, background: '#fff'}} />
-              <Input value="Basepath + Url + [Query]" disabled style={{display: 'inline-block', width: 300, border: 0, background: '#fff'}} />
-            </InputGroup>
-            <InputGroup compact style={{display: 'inline-block', width: 680}}>
-              <Select value={method} style={{display: 'inline-block', width: 80}} onChange={this.changeMethod} >
+        {/*<div className="interface-name">{interfaceName}</div>*/}
+
+        <Card title="请求部分" noHovering className="req-part">
+          <div className="url">
+            <InputGroup compact style={{display: 'flex'}}>
+              <Select value={method} style={{flexBasis: 60}} onChange={this.changeMethod} >
                 <Option value="GET">GET</Option>
                 <Option value="POST">POST</Option>
               </Select>
-              <Select value={currDomain} mode="combobox" filterOption={() => true} style={{display: 'inline-block', width: 300}} onChange={this.changeDomain} onSelect={this.selectDomain}>
+              <Select value={currDomain} mode="combobox" filterOption={() => true} style={{flexBasis: 180, flexGrow: 1}} onChange={this.changeDomain} onSelect={this.selectDomain}>
                 {
                   Object.keys(domains).map((key, index) => (<Option value={domains[key]} key={index}>{key + '：' + domains[key]}</Option>))
                 }
               </Select>
-              <Input value={pathname + search} onChange={this.changePath} spellCheck="false" style={{display: 'inline-block', width: 300}} />
+              <Input value={pathname + search} onChange={this.changePath} spellCheck="false" style={{flexBasis: 180, flexGrow: 1}} />
             </InputGroup>
             <Button
               onClick={this.requestInterface}
@@ -403,48 +398,53 @@ export default class InterfaceTest extends Component {
               style={{marginLeft: 10}}
               loading={this.state.loading}
             >发送</Button>
-            <span style={{fontSize: 12, color: 'rgba(0, 0, 0, 0.25)'}}>（请求测试真实接口）</span>
           </div>
 
-          <Card title="Query" noHovering style={{marginTop: 10}}>
-            {
-              query.map((item, index) => {
-                return (
-                  <div key={index}>
-                    <Input value={item.key} onChange={e => this.changeQuery(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
-                    <Input value={item.value} onChange={e => this.changeQuery(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
-                    <Icon type="close" className="icon-btn" onClick={() => this.deleteQuery(index)} />
-                  </div>
-                )
-              })
-            }
-            <Button type="primary" icon="plus" onClick={this.addQuery} style={{margin: 10}}>Add query parameter</Button>
-          </Card>
-          <Card title="HEADERS" noHovering style={{marginTop: 10}} >
-            <div className="req-row headers">
+          <Collapse defaultActiveKey={['1', '2', '3']} bordered={true}>
+            <Panel header="QUERY PARAMETERS" key="1">
               {
-                headers.map((item, index) => {
+                query.map((item, index) => {
                   return (
-                    <div key={index}>
-                      <Input value={item.name} onChange={e => this.changeHeader(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
-                      <Input value={item.value} onChange={e => this.changeHeader(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
-                      <Icon type="close" className="icon-btn" onClick={() => this.deleteHeader(index)} />
+                    <div key={index} className="key-value-wrap">
+                      <Input value={item.key} onChange={e => this.changeQuery(e, index, true)} className="key" />
+                      <span className="eq-symbol">=</span>
+                      <Input value={item.value} onChange={e => this.changeQuery(e, index)} className="value" />
+                      <Icon type="delete" className="icon-btn" onClick={() => this.deleteQuery(index)} />
                     </div>
                   )
                 })
               }
-              <Button type="primary" icon="plus" onClick={this.addHeader} style={{margin: 10}}>Add header</Button>
-            </div>
-          </Card>
-          <Card title="Body" noHovering style={{marginTop: 10}}>
-            <div className="req-row params">
-              <div>
-                <Select style={{margin: 10, float: 'right'}} defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? 'floatfix' : 'floatfix hidden'}>
-                  <Option value="text">Text</Option>
-                  <Option value="file">File</Option>
-                  <Option value="form">Form</Option>
-                </Select>
-              </div>
+              <Button type="primary" icon="plus" onClick={this.addQuery}>Add query parameter</Button>
+            </Panel>
+            <Panel header="HEADERS" key="2" >
+              {
+                headers.map((item, index) => {
+                  return (
+                    <div key={index} className="key-value-wrap">
+                      <Input value={item.name} onChange={e => this.changeHeader(e, index, true)} className="key" />{' = '}
+                      <Input value={item.value} onChange={e => this.changeHeader(e, index)} className="value" />
+                      <Icon type="delete" className="icon-btn" onClick={() => this.deleteHeader(index)} />
+                    </div>
+                  )
+                })
+              }
+              <Button type="primary" icon="plus" onClick={this.addHeader}>Add header</Button>
+            </Panel>
+            <Panel
+              header={
+                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                  <div>BODY</div>
+                  <div onClick={e => e.stopPropagation()} style={{marginRight: 5}}>
+                    <Select defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? '' : 'hidden'}>
+                      <Option value="text">Text</Option>
+                      <Option value="file">File</Option>
+                      <Option value="form">Form</Option>
+                    </Select>
+                  </div>
+                </div>
+              }
+              key="3"
+            >
               { method === 'POST' && paramsType !== 'form' && paramsType !== 'file' &&
                 <div>
                   <TextArea
@@ -475,7 +475,7 @@ export default class InterfaceTest extends Component {
                         )
                       })
                     }
-                    <Button type="primary" icon="plus" onClick={this.addParams} style={{margin: 10}}>Add form parameter</Button>
+                    <Button type="primary" icon="plus" onClick={this.addParams}>Add form parameter</Button>
                   </div>
                 )
               }
@@ -491,10 +491,11 @@ export default class InterfaceTest extends Component {
                   <div style={{margin: 10}}>GET 请求没有 Body。</div>
                 )
               }
-            </div>
-          </Card>
-        </div>
-        <Card title="返回结果" noHovering style={{marginTop: 10}}>
+            </Panel>
+          </Collapse>
+        </Card>
+
+        <Card title="返回结果" noHovering className="resp-part">
           <Spin spinning={this.state.loading}>
             <div className="res-part">
               <div style={{padding: 10}}>

client/containers/Project/Interface/InterfaceList/Run.scss

@@ -1,8 +1,25 @@
 .interface-test {
-  .interface-name {
-    font-size: 24px;
+  .has-plugin, .req-part, .resp-part {
+    margin: 8px;
+  }
+  .url {
+    display: flex;
     margin-bottom: 24px;
   }
+  .key-value-wrap {
+    display: flex;
+    align-items: center;
+    margin: 0 0 5px 0;
+    .key {
+      flex-basis: 220px;
+    }
+    .value {
+      flex-grow: 1;
+    }
+    .eq-symbol {
+      margin: 0 5px;
+    }
+  }
   .icon-btn {
     cursor: pointer;
     margin-left: 6px;
@@ -11,8 +28,3 @@
     color: #108ee9;
   }
 }
-.floatfix:after{
-    content:"";
-    display:table;
-    clear:both;
-}

client/containers/Project/Interface/InterfaceList/View.js

@@ -1,13 +1,22 @@
-import '../interface.scss'
+import './View.scss'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-import { formatTime } from '../../../../common.js';
+import { Table } from 'antd'
+const mockEditor = require('./mockEditor.js')
+// import { formatTime } from '../../../../common.js';
 
 // import { Card } from 'antd'
 // import { getMockUrl } from '../../reducer/modules/news.js'
 
-@connect()
+@connect(state=>{
+  return {
+    curData: state.inter.curdata
+  }
+})
+
+
+
 
 class View extends Component {
   constructor(props) {
@@ -17,69 +26,161 @@ class View extends Component {
     viewData: PropTypes.object
   }
 
+
+  componentDidMount() {
+    let that = this;
+    mockEditor({
+      container: 'req_body_json',
+      data: that.props.req_body_form,
+      onChange: function () {}
+    })
+    mockEditor({
+      container: 'res_body_json',
+      data: that.props.res_body,
+      onChange: function () {}
+    })
+    mockEditor({
+      container: 'req_query_json',
+      data: that.props.req_query,
+      onChange: function () {}
+    })
+  }
+
   render () {
+
+    const dataSource = [{
+      key: 1,
+      name: '1',
+      value: '胡彦斌',
+      desc: 32
+    }, {
+      key: 2,
+      name: '2',
+      value: '胡彦斌',
+      desc: 32
+    }];
+
+    const columns = [{
+      title: '参数名称',
+      dataIndex: 'name',
+      key: 'name'
+    }, {
+      title: '参数值',
+      dataIndex: 'value',
+      key: 'value'
+    }, {
+      title: '备注',
+      dataIndex: 'desc',
+      key: 'desc',
+      width: '45%'
+    }];
+
+
+
+
     return <div className="caseContainer">
       {/*<Card title={`接口名:${this.props.viewData.casename}`}></Card>*/}
-      <div className="casename">
+      <div className="colName">
         <span className="colKey">接口名：</span>
-        <span className="colValue">{this.props.viewData.casename}</span>
-      </div>
-      <div className="colTime">
-        <span className="colKey">添加时间：</span>
-        <span className="colValue">{formatTime(this.props.viewData.add_time/1000)}</span>
-      </div>
-      <div className="colTime">
-        <span className="colKey">更新时间：</span>
-        <span className="colValue">{formatTime(this.props.viewData.up_time/1000)}</span>
-      </div>
-      <div className="colEnv">
-        <span className="colKey">测试环境：</span>
-        <span className="colValue">{this.props.viewData.env}</span>
-      </div>
-      <div className="colDomain">
-        <span className="colKey">域名：</span>
-        <span className="colValue">{this.props.viewData.domain}</span>
+        <span className="colValue">{this.props.viewData.title}</span>
       </div>
       <div className="colPath">
-        <span className="colKey">路径：</span>
+        <span className="colKey">接口路径：</span>
         <span className="colValue">{this.props.viewData.path}</span>
       </div>
-      <div className="colMethod">
-        <span className="colKey">请求方法：</span>
-        <span className="colValue">{this.props.viewData.method}</span>
+      <div className="colstatus">
+        <span className="colKey">状态：</span>
+        <span className="colValue">{this.props.viewData.status}</span>
       </div>
+      <div className="colMock">
+        <span className="colKey">Mock地址：</span>
+        <span className="colValue">{this.props.viewData.mockUrl}</span>
+      </div>
+      <div className="colDesc">
+        <span className="colKey">接口描述：</span>
+        <span className="colValue">{this.props.viewData.desc}</span>
+      </div>
+      <div className="colHeader">
+        <span className="colKey">请求Headers：</span>
+        <Table size="small" pagination = {false} columns= {columns} dataSource = {dataSource} />
+      </div>
+      <div className="colQuery">
+        <span className="colKey">Query：</span>
+        <div span={18} offset={4} id="req_query_json" style={{ minHeight: "150px" }}></div>
+      </div>
+      <div className="colBody">
+        <span className="colKey">请求Body：</span>
+        <div span={18} offset={4} id="req_body_json" style={{ minHeight: "300px" }}></div>
+      </div>
+      <div className="colBody">
+        <span className="colKey">响应Body：</span>
+        <div span={18} offset={4} id="res_body_json" style={{ minHeight: "300px" }}></div>
+      </div>
+      
+      
+      
     </div>
   }
 }
 
+let data = {
+  title: '',
+  path: '',
+  status: 'undone',
+  method: 'get',
+  req_query: [{
+    name: '',
+    desc: '',
+    required: "1"
+  }],
+  req_body_type: 'form',
+  req_headers: [{
+    name: '',
+    value: '', required: "1"
+  }],
+  req_body_form: [{
+    name: '',
+    type: '',
+    required: ''
+  }],
+  res_body_type: 'json',
+  res_body: '{a:123}',
+  desc: 'FP的好处是没有OO的复杂仪式感，是沿着数据结构+算法的思路进行抽象和结构化。如果顶层设计做好，代码复用度极高，代码量少。比如要生成一颗树我用迭归算法直接生成',
+  res_body_mock: '',
+  mockUrl: "this.props.mockUrl"
+}
+// {
+//     casename:"caename",
+//     uid: 107,
+//     col_id: 211,
+//     index: 0,
+//     project_id: 112,
+//     add_time: new Date().getTime(),
+//     up_time: new Date().getTime(),
+//     env: "测试环境",
+//     domain: "域名",
+//     path: "路径",
+//     method: "GET",
+//     req_query: [{
+//       name: "String", 
+//       value: "String",
+//       required: "1"
+//     }],
+//     req_headers: [{
+//       name: "String", 
+//       value: "String",
+//       required: "1"
+//     }],
+//     req_body_type: "json",
+//     res_body_form: [{
+//       name: "String", 
+//       value: "String",
+//       required: "1"
+//     }],
+//     res_body_other: "String"
+//   }
 View.defaultProps = {
-  viewData: {
-    casename:"caename",
-    uid: 107,
-    col_id: 211,
-    index: 0,
-    project_id: 112,
-    add_time: new Date().getTime(),
-    up_time: new Date().getTime(),
-    env: "测试环境",
-    domain: "域名",
-    path: "路径",
-    method: "GET",
-    req_query: [{
-      name: "String", 
-      value: "String"
-    }],
-    req_headers: [{
-      name: "String", 
-      value: "String"
-    }],
-    req_body_type: "json",
-    res_body_form: [{
-      name: "String", 
-      value: "String"
-    }],
-    res_body_other: "String"
-  }
+  viewData: data
 }
 
 export default View

client/containers/Project/Interface/InterfaceList/View.scss

@@ -0,0 +1,35 @@
+.caseContainer{
+    padding: 24px;
+    font-size: 12px;
+    // display: flex;
+    overflow: hidden;
+    >div{
+        margin: 8px 0px;
+        // background-color: #ececec;
+        padding: 16px;
+        width: 100%;
+        box-sizing: border-box;
+        float: left;
+        .colKey{
+            font-weight: bolder;
+            margin-right: 16px;
+        }
+    }
+    .colName,.colPath,.colstatus,.colMock{
+        width: 50%;
+        float: left;
+        padding: 8px 16px;
+    }
+    .colDesc{
+        line-height: 1.5em;
+        .colKey{
+            margin-right: 0px;
+            float: left;
+            margin-bottom: 8px;
+        }
+        .colValue{
+            float: left;
+            text-indent: 2em;
+        }
+    }
+}

client/containers/Project/Interface/interface.scss

@@ -65,19 +65,7 @@
         }
     }
 }
-.caseContainer{
-    padding: 24px;
-    font-size: 12px;
-    >div{
-        margin: 8px 0px;
-        padding: 12px;
-        background-color: #ececec;
-        .colKey{
-            font-weight: bolder;
-            margin-right: 16px;
-        }
-    }
-}
+
 
 
 

client/containers/User/Profile.js

@@ -152,7 +152,7 @@ class Profile extends Component {
       userNameEditHtml = <div >
         <span className="text">{userinfo.username}</span>&nbsp;&nbsp;
         {/*<span className="text-button"  onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>*/}
-        {userType?<Button  icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>:""}
+        {<Button  icon="edit" onClick={() => { this.handleEdit('usernameEdit', true) }}>修改</Button>}
       </div>
     } else {
       userNameEditHtml = <div>

client/containers/User/User.js

@@ -9,7 +9,6 @@ import Profile from './Profile.js'
 import { Row } from 'antd';
 import Subnav from '../../components/Subnav/Subnav.js';
 @connect(state=>{
-  console.log(state);
   return {
     curUid: state.user.uid,
     userType: state.user.type,
@@ -31,7 +30,7 @@ class User extends Component {
   }
 
   componentDidMount () {
-    console.log(this.props.match)
+    // console.log(this.props.match)
   }
 
   render () {
@@ -41,7 +40,7 @@ class User extends Component {
     }];
     if(this.props.role === "admin"){
       navData.push({
-        name: '成员管理',
+        name: '用户管理',
         path: '/user/list'
       })
     }

client/reducer/modules/user.js

@@ -18,7 +18,8 @@ const initialState = {
   uid: null,
   email: '',
   loginState: LOADING_STATUS,
-  loginWrapActiveKey: "1"
+  loginWrapActiveKey: "1",
+  role: ""
 };
 
 export default (state = initialState, action) => {
@@ -40,7 +41,8 @@ export default (state = initialState, action) => {
           isLogin: true,
           loginState: MEMBER_STATUS,
           uid: action.payload.data.data.uid,
-          userName: action.payload.data.data.username
+          userName: action.payload.data.data.username,
+          role: action.payload.data.data.role
         };
       } else {
         return state;
@@ -52,7 +54,8 @@ export default (state = initialState, action) => {
         isLogin: false,
         loginState: GUEST_STATUS,
         userName: null,
-        uid: null
+        uid: null,
+        role: ""
       }
     }
     case LOGIN_TYPE: {
@@ -79,6 +82,7 @@ export default (state = initialState, action) => {
 export function checkLoginState() {
   return(dispatch)=> {
     axios.get('/api/user/status').then((res) => {
+      console.log(res)
       dispatch({
         type: GET_LOGIN_STATE,
         payload: res