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

client/containers/AddInterface/AddInterface.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import axios from 'axios'
 import { connect } from 'react-redux'
 import { autobind } from 'core-decorators'
-import { Button, Tabs } from 'antd'
+import { Button, Tabs, message } from 'antd'
 import ReqMethod from './ReqMethod/ReqMethod.js'
 import ReqHeader from './ReqHeader/ReqHeader.js'
 import ReqParams from './ReqParams/ReqParams.js'
@@ -19,6 +19,10 @@ import {
   pushInterfaceName
 } from '../../actions/addInterface.js'
 
+const success = () => {
+  message.success('保存成功!')
+}
+
 @connect(
   state => {
     return {
@@ -59,7 +63,8 @@ class AddInterface extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      isLoading: ''
+      isLoading: '',
+      isSave: false
     }
   }
 
@@ -108,15 +113,6 @@ class AddInterface extends Component {
     props.addReqHeader(req_headers)
   }
 
-  editState2 () {
-    const props = this.props
-    props.pushInputValue(props.url)
-    // props.pushInterfaceName(title)
-    // props.getReqParams(req_params_other)
-    props.getResParams(props.resParams)
-    // props.addReqHeader(req_headers)
-  }
-
   initInterfaceData (interfaceId) {
     const params = { id: interfaceId }
 
@@ -146,6 +142,12 @@ class AddInterface extends Component {
     location.href = `${origin}${pathname}#/interface`
   }
 
+  changeState (ifTrue) {
+    this.setState({
+      isSave: ifTrue
+    })
+  }
+
   @autobind
   saveForms () {
     let postURL = undefined
@@ -174,10 +176,10 @@ class AddInterface extends Component {
     this.setLoading(true)
 
     axios.post(postURL, params)
-      .then(data => {
-        console.log(data)
+      .then(() => {
         this.setLoading()
-        this.editState2()
+        success()
+        this.changeState(true)
         // this.routerPage()
       })
       .catch(e => {
@@ -187,7 +189,7 @@ class AddInterface extends Component {
 
   render () {
     const TabPane = Tabs.TabPane
-    const isLoading = this.state.isLoading
+    const { isLoading, isSave } = this.state
 
     return (
       <section className="add-interface-box">
@@ -199,7 +201,7 @@ class AddInterface extends Component {
               <ReqHeader />
               <ReqParams data={this.props} />
               <ResParams />
-              <Result />
+              <Result isSave={isSave} />
             </TabPane>
             <TabPane tab="Mock" key="2">mock</TabPane>
             <TabPane tab="测试" key="3">测试</TabPane>

client/containers/AddInterface/ResParams/ResParams.js

@@ -38,6 +38,7 @@ class ResParams extends Component {
     const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+|<div>|<\/div>/g
     editor.customConfig.menus = []
     editor.customConfig.onchange = html => {
+      console.log(html)
       html = html.match(/{.*}/g)[0]
       html = html.replace(reg, '')
       console.log(html)

client/containers/AddInterface/Result/Result.js

@@ -16,7 +16,8 @@ import PropTypes from 'prop-types'
 class Result extends Component {
   static propTypes = {
     resParams: PropTypes.string,
-    reqParams: PropTypes.string
+    reqParams: PropTypes.string,
+    isSave: PropTypes.bool
   }
 
   constructor(props) {
@@ -24,16 +25,15 @@ class Result extends Component {
   }
 
   render () { 
-    console.log(1)
     let TabPane = Tabs.TabPane
     let resParams = ''
     let json = ''
     
     if(this.props.resParams){
-      console.log(this.props.resParams)
       resParams = JSON.parse(this.props.resParams)
       json = JSON.stringify(Mock.mock(resParams), null, 2)
     }
+
     return (
       <div className="result">
         <strong className="res-h3">返回示例 :</strong>

client/containers/Login/Login.js

@@ -56,7 +56,7 @@ class Login extends Component {
   componentDidMount() {
     window.QSSO.attach('qsso-login','/user/login_by_token')
   }
-  
+
 
   render() {
     const { getFieldDecorator } = this.props.form;
@@ -86,6 +86,9 @@ class Login extends Component {
         <FormItem style={formItemStyle}>
           <Button style={changeHeight} type="primary" htmlType="submit" className="login-form-button">登录</Button>
         </FormItem>
+        <div className="qsso-breakline">
+          <span className="qsso-breakword">或</span>
+        </div>
         <Button style={changeHeight} id="qsso-login" type="primary" className="login-form-button" size="large" ghost>QSSO登录</Button>
       </Form>
 

client/containers/Login/Login.scss

@@ -11,6 +11,21 @@
   width: 100%;
 }
 
-.ant-form-item{
+.ant-form-item {
   margin-bottom: .1rem;
 }
+
+.qsso-breakline {
+  position: relative;
+  text-align: center;
+  margin: .24rem auto;
+  height: 1px;
+  background-color: #bbb;
+  .qsso-breakword {
+    display: inline-block;
+    transform: translateY(-50%);
+    background-color: #f7f7f7;
+    padding: 0 .08rem;
+    color: #999;
+  }
+}

package.json

@@ -19,8 +19,10 @@
     "assets-webpack-plugin": "^3.5.1",
     "axios": "^0.16.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "copy-webpack-plugin": "^4.0.1",
     "core-decorators": "^0.17.0",
     "fs-extra": "^3.0.1",
+    "jsoneditor": "^5.9.3",
     "jsonwebtoken": "^7.4.1",
     "koa": "^2.0.0",
     "koa-bodyparser": "^3.2.0",
@@ -34,11 +36,13 @@
     "mock": "^0.1.1",
     "mockjs": "^1.0.1-beta3",
     "moment": "^2.18.1",
+    "monaco-editor": "^0.9.0",
     "mongoose": "4.10.8",
     "mongoose-auto-increment": "^5.0.1",
     "node-sass-china": "^4.5.0",
     "nodemailer": "^4.0.1",
     "prop-types": "^15.5.10",
+    "react-monaco-editor": "^0.8.1",
     "redux": "^3.7.1",
     "redux-promise": "^0.5.3",
     "redux-thunk": "^2.2.0",