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

README.md

@@ -21,7 +21,7 @@ YApi是高效、易用、功能强大的api管理平台，旨在为开发、产
 ### 1 接口管理架构
 平台以**项目分组** -> **项目** -> **接口**的划分进行接口组织管理。
 
-![](http://upload-images.jianshu.io/upload_images/842107-99be37392fd47ec5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+![](http://upload-images.jianshu.io/upload_images/842107-305ba49a60ee1ff5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
 #### 1.1 项目分组
 登录之后进到项目首页，左边侧边栏显示的即分组列表。

client/components/Header/Header.js

@@ -161,7 +161,7 @@ export default class HeaderCom extends Component {
         <Header style={headerShadeStyle}>
           <div className="content">
             <div className="logo">
-              <Link to="/" onClick={this.relieveLink}>YAPI</Link>
+              <Link to="/" onClick={this.relieveLink}>YAPI<span className="ui-badge"></span></Link>
             </div>
             <Menu
               mode="horizontal"

client/components/Header/Header.scss

@@ -19,6 +19,7 @@ $color-black-light : #404040;
     overflow: hidden;
   }
   .logo {
+    position: relative;
     font-size: .3rem;
     float: left;
     margin: 0 .2rem 0 0;
@@ -33,6 +34,20 @@ $color-black-light : #404040;
         text-decoration: none;
       }
     }
+    .ui-badge {
+      position: absolute;
+      right: -20px;
+      top: 10px;
+      width: 30px;
+      height: 21px;
+      background-size: 240px 21px;
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDgwMCA3MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODAwIDcwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0Y4NTg2MDt9LnN0MXtmaWxsOiNGRkZGRkY7fS5zdDJ7Zm9udC1mYW1pbHk6J0ZaTFRaSEstLUdCSzEtMCc7fS5zdDN7Zm9udC1zaXplOjI0cHg7fTwvc3R5bGU+PGcgaWQ9IuWbvuWxgl8xXzFfIj48ZyBpZD0i5Zu+5bGCXzIiPjxnPjxyZWN0IHg9IjkiIHk9IjQiIGNsYXNzPSJzdDAiIHdpZHRoPSI4MyIgaGVpZ2h0PSI0NCIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTkyLDQ4YzAsMC01NSw1LjktNjUuNCw1LjlTMTA5LDQ4LDEwOSw0OFY0YzAsMCw5LjQsOC4yLDE5LjgsOC4yUzE5Miw0LDE5Miw0VjQ4eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjkyLDQ4YzAsMC0zMS4xLDUuOS00MS41LDUuOVMyMDksNDgsMjA5LDQ4VjRjMCwwLDMxLjEsOS4zLDQxLjUsOS4zUzI5Miw0LDI5Miw0VjQ4eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzkyLDQ4YzAsMC0yLjgsNC40LTEzLjIsNC40UzMwOSw0OCwzMDksNDhWNGMwLDAsNTcuNiw2LjcsNjgsNi43UzM5Miw0LDM5Miw0VjQ4eiIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjQ5Miw1Mi40IDQwOSw0OCA0MDksNCA0OTIsMTEuMSAiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTU5Miw1Mi40YzAsMC01MC45LTMtNjItNS40Yy0xMC4xLTIuMi0yMSwxLTIxLDFWNGMwLDAsNi44LTIsMTcsMGMxMSwyLjIsNjYsMTAsNjYsMTBWNTIuNHoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTY4OSw0OGMwLDAtMjIuOSwyLjQtMzQsMGMtMTAuMS0yLjItNDYsMC00NiwwVjRjMCwwLDMxLjgtMiw0MiwwYzExLDIuMiw0MS43LDEwLjQsNDEuNywxMC40TDY4OSw0OHoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTc5Miw0OWMwLDAtOS45LDEuNC0yMS0xYy0xMC4xLTIuMi02MiwwLTYyLDBWNGMwLDAsNDcuOC0zLDU4LTFjMTEsMi4yLDI1LDkuOSwyNSw5LjlWNDl6Ii8+PC9nPjwvZz48L2c+PGcgaWQ9IuWbvuWxgl8yXzFfIj48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDEzLjk4NDQgMzUpIiBjbGFzcz0ic3QxIHN0MiBzdDMiPkFscGhhPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMTEzLjk4NDQgMzUpIiBjbGFzcz0ic3QxIHN0MiBzdDMiPkFscGhhPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMjEzLjk4NDQgMzUpIiBjbGFzcz0ic3QxIHN0MiBzdDMiPkFscGhhPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMzEzLjk4NDQgMzUpIiBjbGFzcz0ic3QxIHN0MiBzdDMiPkFscGhhPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgNDEzLjk4NDQgMzUpIiBjbGFzcz0ic3QxIHN0MiBzdDMiPkFscGhhPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgNTEzLjk4NDQgMzUpIiBjbGFzcz0ic3QxIHN0MiBzdDMiPkFscGhhPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgNjEzLjk4NDQgMzUpIiBjbGFzcz0ic3QxIHN0MiBzdDMiPkFscGhhPC90ZXh0Pjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgNzEzLjk4NDQgMzUpIiBjbGFzcz0ic3QxIHN0MiBzdDMiPkFscGhhPC90ZXh0PjwvZz48L3N2Zz4=);
+      animation: flag .8s steps(8) infinite;
+    }
+    @keyframes flag {
+      from { background-position: 0px; }
+      to { background-position: -240px; }
+    }
   }
 
   .nav-toolbar {

client/containers/AddInterface/AddInterface.js

@@ -77,7 +77,9 @@ class AddInterface extends Component {
       isSave: false,
       mockJson: '',
       mockURL: '',
-      projectData: {}
+      projectData: {},
+      tagName: '创建接口',
+      showMock: ''
     }
   }
 
@@ -92,6 +94,8 @@ class AddInterface extends Component {
     if (ifTrue) {
       interfaceId = this.getInterfaceId()
       this.initInterfaceData(interfaceId)
+      this.modifyTagName('编辑接口')
+      this.setState({showMock: 'show-mock'})
     } else {
       const props = this.props
       props.pushInputValue('')
@@ -114,6 +118,12 @@ class AddInterface extends Component {
     }
   }
 
+  modifyTagName (tagName) {
+    this.setState({
+      tagName
+    })
+  }
+
   verificationURL () {
     const dir = 'AddInterface/edit'
     const url = location.href
@@ -247,26 +257,27 @@ class AddInterface extends Component {
   render () {
     const TabPane = Tabs.TabPane
     const { server_ip } = this.props
-    const { isLoading, isSave, mockJson='', mockURL } = this.state
-
+    const { isLoading, isSave, mockJson='', mockURL, tagName, showMock } = this.state
+    let Pane = ''
+    if (showMock) {
+      Pane = <TabPane tab="请求接口" key="3"><InterfaceTest /></TabPane>
+    }
     return (
       <section className="add-interface-box">
         <div className="content">
           <Tabs type="card">
-            <TabPane tab="接口详情" key="1">
+            <TabPane tab={tagName} key="1">
               <h3 className="req-title">请求部分</h3>
               <ReqMethod />
               <ReqHeader />
               <ReqParams data={this.props} />
-              <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData}  />
+              <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData} showMock={showMock}/>
               <h3 className="req-title">返回部分</h3>
               <ResParams />
               <Result isSave={isSave} mockJson={mockJson} />
               <Button type="primary" className="save" onClick={this.saveForms}>保存</Button>
             </TabPane>
-            <TabPane tab="请求接口" key="3">
-              <InterfaceTest />
-            </TabPane>
+            {Pane}
           </Tabs>
         </div>
         <div className={`loading ${isLoading}`}></div>

client/containers/AddInterface/AddInterface.scss

@@ -16,6 +16,10 @@
     background: #FFF;
     padding: 10px 20px 50px 20px;
     margin: 0 auto;
+    
+    .ant-tabs {
+      padding: 0 0 50px 0;
+    }
 
     .ant-tabs-content {
       padding: 0 0 50px 0;
@@ -212,6 +216,7 @@
     margin: 10px 0 0 90px;
     zoom: 1;
     overflow: hidden;
+    display: none;
     .title {
       float: left;
       line-height: 35px;
@@ -234,6 +239,10 @@
     }
   }
 
+  .show-mock {
+    display: block;
+  }
+
   .loading {
     display: none;
     width: 100%;

client/containers/AddInterface/MockUrl/MockUrl.js

@@ -13,6 +13,7 @@ class MockUrl extends Component {
     mockURL: PropTypes.string,
     serverIp: PropTypes.string,
     mockData: PropTypes.string,
+    showMock: PropTypes.string,
     projectData: PropTypes.object
   }
 
@@ -37,10 +38,9 @@ class MockUrl extends Component {
   }
 
   render () {
-    console.log(this.props)
-    const { serverIp } = this.props
+    const { serverIp, showMock } = this.props
     return (
-      <section className="mock-url-box">
+      <section className={`mock-url-box ${showMock}`}>
         <span className="title">mock地址 : </span>
         <p id="mock-p">{this.props.mockURL}</p>
         <Button type="primary" id="mock-clipboard">复制</Button>
@@ -50,4 +50,4 @@ class MockUrl extends Component {
   }
 }
 
-export default MockUrl
+export default MockUrl