opti: 修改接口详情页样式

client/containers/Interface/Interface.js

@@ -8,7 +8,7 @@ import InterfaceTable from './InterfaceTable/InterfaceTable.js'
 import InterfaceMode from './InterfaceMode/InterfaceMode.js'
 import moment from 'moment'
 import {
-  fetchInterfaceData, 
+  fetchInterfaceData,
   projectMember,
   closeProjectMember
 } from '../../actions/interfaceAction.js'

client/containers/Interface/Interface.scss

@@ -1,48 +1,19 @@
 /* .interface-box.css */
 .interface-box {
   max-width: 11rem;
-  display: -webkit-box;
-  -webkit-box-flex: 1;
   margin: 24px auto;
   border-radius: 4px;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
-  font-size: 0.14rem;
   background: #FFF;
-
-  .interface-list {
-    width: 216px;
-    line-height: 45px;
-    background: #f9fafe;
-
-    li {
-      padding: 0 0 0 30px;
-      color: #344562;
-      cursor: pointer;
-
-      &:hover {
-        color: #29f;
-      }
-
-      a {
-        color: #344562;
-        &:hover {
-          color: #29f;
-        }
-      }
-    }
+  overflow: hidden;
+  .interface-btngroup {
+    margin: .24rem .24rem 0;
+  }
+  .interface-btn {
+    margin-right: .16rem;
   }
-
   .interface-table {
-    -webkit-box-flex: 1;
-    margin: 0 20px;
-    min-height: 740px;
-    .ant-table-wrapper table {
-      font-size: .14rem;
-
-      button {
-        margin: 0 10px 0 0;
-      }
-    }
+    margin: .24rem;
   }
 }
 

client/containers/Interface/InterfaceList/InterfaceList.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
+import { Button } from 'antd'
 
 class InterfaceList extends Component {
   static propTypes = {
@@ -23,10 +24,10 @@ class InterfaceList extends Component {
     const getInterfaceId = this.getInterfaceId()
     console.log(`/AddInterface/${getInterfaceId}`)
     return (
-      <ul className="interface-list">
-        <li><Link to={`/AddInterface/${getInterfaceId}`}>添加接口</Link></li>
-        <li onClick={projectMember}>管理项目成员</li>
-      </ul>
+      <div className="interface-btngroup">
+        <Link to={`/AddInterface/${getInterfaceId}`}><Button className="interface-btn" type="primary" icon="plus">添加接口</Button></Link>
+        <Button className="interface-btn" type="primary" onClick={projectMember} icon="user">管理成员</Button>
+      </div>
     )
   }
 }

client/containers/Interface/InterfaceTable/InterfaceTable.js

@@ -72,13 +72,11 @@ class InterfaceTable extends Component {
         const deleteInterface = this.deleteInterface.bind(this, data._id)
         return (
           <span>
-            <Button type="primary">
-              <Link to={`/AddInterface/edit/${data._id}`}>编辑</Link>
-            </Button>
-            <Button type="primary">
-              <Link to={`/AddInterface/edit/${data._id}`}>测试</Link>
-            </Button>
-            <Button type="danger" onClick={deleteInterface}>删除</Button>
+            <Link to={`/AddInterface/edit/${data._id}`}><span>编辑</span></Link>
+            <span className="ant-divider" />
+            <Link to={`/AddInterface/edit/${data._id}`}><span>测试</span></Link>
+            <span className="ant-divider" />
+            <a onClick={deleteInterface}>删除</a>
           </span>
         )
       }
@@ -88,7 +86,7 @@ class InterfaceTable extends Component {
 
     return (
       <section className="interface-table">
-        <Table columns={columns} dataSource={data} />
+        <Table bordered={true} columns={columns} dataSource={data} />
       </section>
     )
   }