feat: UI样式调整

client/containers/AddInterface/AddInterface.js

@@ -97,6 +97,7 @@ class AddInterface extends Component {
       props.getResParams('')
       props.addReqHeader(initData)
     }
+    document.querySelector('.w-e-text-container').style.height = '200px'
   }
 
   getInterfaceId () {
@@ -245,16 +246,17 @@ class AddInterface extends Component {
     return (
       <section className="add-interface-box">
         <div className="content">
-          <Tabs defaultActiveKey="1">
+          <Tabs type="card">
             <TabPane tab="接口详情" key="1">
-              <Button type="primary" className="save" onClick={this.saveForms}>保存</Button>
-              <Button className="mock" onClick={this.mockData}>Mock</Button>
+              <h3 className="req-title">请求部分</h3>
               <ReqMethod />
               <ReqHeader />
               <ReqParams data={this.props} />
+              <MockUrl mockURL={mockURL} />
+              <h3 className="req-title">返回部分</h3>
               <ResParams />
               <Result isSave={isSave} mockJson={mockJson} />
-              <MockUrl mockURL={mockURL} />
+              <Button type="primary" className="save" onClick={this.saveForms}>保存</Button>
             </TabPane>
             <TabPane tab="请求接口" key="3">
               <InterfaceTest />

client/containers/AddInterface/AddInterface.scss

@@ -6,6 +6,7 @@
   font-size: .14rem;
   overflow-x: hidden;
   overflow-y: auto;
+  font-size: .12rem;
 
   .content {
     @include row-width-limit;
@@ -15,9 +16,33 @@
     background: #FFF;
     padding: 10px 20px 50px 20px;
 
+    .ant-tabs-content {
+      padding: 0 0 50px 0;
+    }
+  
+    .border {
+      zoom: 1;
+      overflow: hidden;
+    }
+
+    .ant-card-body {
+      padding: 0;
+    }
+
+    .ant-tabs-nav {
+      float: left;
+    }
+
+    .req-title {
+      margin: 40px 0 0 30px;
+      color: #666;
+      font-weight: normal;
+    }
+
     .save {
-      float: right;
-      margin: 0 0 10px 0;
+      position: absolute;
+      bottom: 0;
+      left: 550px;
     }
 
     .mock {
@@ -27,7 +52,7 @@
 
     table {
       width: 100%;
-      border-top: 1px #EEE solid;
+      margin: 20px 0 0 40px;
 
       th {
         padding:0 10px;
@@ -42,13 +67,15 @@
       }
 
       .h3 {
-        font-size: .14rem;
+        font-size: .12rem;
         margin: 0 10px 0 15px;
+        width: 100px;
+        display: inline-block;
+        text-align: right;
       }
 
       .url {
-        margin: 0 0 0 15px;
-        width: 61.2%;
+        width: 16%;
       }
     }
 
@@ -64,12 +91,12 @@
     .req-header {
       display: -webkit-box;
       line-height: 32px;
-      margin: 10px 0 0 0;
-      border-top: 1px #EEE solid;
+      margin: 10px 0 0 50px;
       padding: 15px 0 0 0;
 
       .req-h3 {
         line-height: 32px;
+        font-weight: normal;
       }
 
       ul {
@@ -100,14 +127,18 @@
     .req-params {
       display: -webkit-box;
       padding: 20px 0 0 0;
-      margin: 20px 0 0 0;
-      border-top: 1px #EEE solid;
+      margin: 20px 0 0 90px;
+      width: 650px;
+      .req-h3 {
+        font-weight: normal;
+      }
     }
 
     .res-params-box {
       display: inline-block;
       width: 530px;
       float: left;
+      margin: 30px 0 0 50px;
 
       /* .req-save.css */
       .res-params {
@@ -141,7 +172,7 @@
     .result {
       display: inline-block;
       line-height: 32px;
-      margin: 0 0 0 20px;
+      margin: 29px 0 0 20px;
       width: 500px;
       float: left;
 
@@ -177,17 +208,20 @@
   .mock-url-box {
     clear: both;
     padding: 10px 0 0 0;
-    margin: 0 0 0 20px;
+    margin: 10px 0 0 90px;
     p {
-      width: 70%;
+      width: 52.8%;
       height: 35px;
       line-height: 35px;
       border: 1px #DDD solid;
       display: inline-block;
       vertical-align: -4px;
-      margin: 0 10px 0 0;
+      margin: 0 10px 0 8px;
       padding: 0 0 0 10px;
     }
+    .host {
+      margin: 10px 0 0 80px;
+    }
   }
 
   .loading {
@@ -216,7 +250,7 @@ body {
     p, h1, h2, h3, h4, h5, table, pre {
       line-height: auto;
       margin: 0;
-      font-size: .14rem;
+      font-size: .12rem;
       color: #777;
       font-family: 'Microsoft Yahei';
       font-weight: normal;
@@ -255,14 +289,11 @@ body {
   background-color: #fff;
 }
 #req-cover {
-  height: 330px;
   padding: 0 20px;
   background-color: #FFF;
   -webkit-box-flex: 1;
 }
 #res-cover {
-  height: 330px;
-  padding: 0 20px;
   background-color: #FFF;
   -webkit-box-flex: 1;
 }

client/containers/AddInterface/MockUrl/MockUrl.js

@@ -36,8 +36,10 @@ class MockUrl extends Component {
   render () {
     return (
       <section className="mock-url-box">
+        <span>mock地址 : </span>
         <p id="mock-p">{this.props.mockURL}</p>
         <Button type="primary" id="mock-clipboard">复制</Button>
+        <div className="host">请配置host ***.***.***.*** www.xxx.com</div>
       </section>
     )
   }

client/containers/AddInterface/ReqHeader/ReqHeader.js

@@ -57,7 +57,6 @@ class ReqHeader extends Component {
     return (
       <section>
         <div className="req-header">
-          <strong className="req-h3">请求头部 :</strong>
           <ul>
             { getReqList(this) }
           </ul>

client/containers/AddInterface/ReqHeader/ReqList.js

@@ -114,7 +114,7 @@ class ReqList extends Component {
     console.log(name)
     return (
       <li>
-        <em className="title">头部标签</em>
+        <em className="title">头部标签 : </em>
         <Select value={name} style={{ width: 220 }} onChange={this.handleChange} size="large">
           <Option value="">选择请求头</Option>
           <Option value="Accept">Accept</Option>
@@ -123,7 +123,7 @@ class ReqList extends Component {
           <Option value="Accept-Language">Accept-Language</Option>
           <Option value="Accept-Ranges">Accept-Ranges</Option>
         </Select>
-        <em className="title">头部内容</em>
+        <em className="title">头部内容 : </em>
         <Input value={value} placeholder="Basic usage" className="req-content" size="large" onInput={this.handleBlur} />
         <Icon className="dynamic-delete-button" type="minus-circle-o" onClick={this.deleteReqHeader} />
       </li>

client/containers/AddInterface/ReqMethod/ReqMethod.js

@@ -63,10 +63,9 @@ class ReqMethod extends Component {
       <table>
         <tbody>
           <tr>
-            <th>协议 :</th>
             <td>
-              <span className="h3">请求方式</span>
-              <Select value={method} style={{ width: 220 }} onChange={this.handleChange} size="large">
+              <span className="h3">请求方式 : </span>
+              <Select value={method} style={{ width: 180 }} onChange={this.handleChange} size="large">
                 <Option value="POST">POST</Option>
                 <Option value="GET">GET</Option>
                 <Option value="PUT">PUT</Option>
@@ -75,8 +74,8 @@ class ReqMethod extends Component {
             </td>
           </tr>
           <tr>
-            <th>URL :</th>
             <td>
+              <span className="h3">URL : </span>
               <Input 
                 placeholder="填写 URL" 
                 className="url" 
@@ -87,8 +86,8 @@ class ReqMethod extends Component {
             </td>
           </tr>
           <tr>
-            <th>名称 :</th>
             <td>
+              <span className="h3">名称 : </span>
               <Input 
                 placeholder="接口名称" 
                 className="url" 

client/containers/AddInterface/ResParams/ResParams.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import wangEditor from 'wangeditor'
-import { Tabs } from 'antd'
+import { Card } from 'antd'
 import { getResParams } from '../../../actions/addInterface.js'
 
 const editor = new wangEditor('#res-cover')
@@ -49,14 +49,11 @@ class ResParams extends Component {
   }
 
   render () {
-    const TabPane = Tabs.TabPane
     return (
       <section className="res-params-box">
-        <Tabs defaultActiveKey="1">
-          <TabPane tab="返回参数" key="1">
-            <div id="res-cover"></div>
-          </TabPane>
-        </Tabs>
+        <Card title="返回 Mock" style={{ width: 500 }}>
+          <div id="res-cover"></div>
+        </Card>
       </section>
     )
   }

client/containers/AddInterface/Result/Result.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Tabs } from 'antd'
+import { Card } from 'antd'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
@@ -25,16 +25,13 @@ class Result extends Component {
   }
 
   render () { 
-    const TabPane = Tabs.TabPane
     const { mockJson } = this.props
 
     return (
       <div className="result">
-        <Tabs defaultActiveKey="1">
-          <TabPane tab="成功结果" key="1">
-            <pre>{mockJson}</pre>
-          </TabPane>
-        </Tabs>
+        <Card title="Mock 结果" style={{ width: 500 }}>
+          <pre>{mockJson}</pre>
+        </Card>
       </div>
     )
   }

config.json

@@ -1,20 +1,20 @@
 {
-"port": "3000",
-"webhost": "yapi.local.qunar.com",
-"adminAccount": "admin@admin.com",
-"db": {
-"servername": "10.86.40.194",
-"DATABASE": "yapi",
-"port": 27017,
-"user": "test1",
-"pass": "test1"
-},
-"mail": {
-"host": "smtp.163.com",
-"port": 465,
-"auth": {
-"user": "hellosean1025@163.com",
-"pass": "helloqunar123"
-}
-}
+  "port": "3000",
+  "webhost": "yapi.local.qunar.com",
+  "adminAccount": "admin@admin.com",
+  "db": {
+    "servername": "10.86.40.194",
+    "DATABASE": "yapi",
+    "port": 27017,
+    "user": "test1",
+    "pass": "test1"
+  },
+  "mail": {
+    "host": "smtp.163.com",
+    "port": 465,
+      "auth": {
+      "user": "hellosean1025@163.com",
+      "pass": "helloqunar123"
+    }
+  }
 }