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

client/containers/Group/GroupList/GroupList.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Icon, Modal, Alert, Input, message, Menu, Row, Col } from 'antd'
+import { Icon, Modal, Alert, Input, message, Menu, Row, Col, Dropdown } from 'antd'
 import { autobind } from 'core-decorators';
 import axios from 'axios';
 import { withRouter } from 'react-router-dom';
@@ -225,27 +225,41 @@ export default class GroupList extends Component {
 
   render() {
     const { currGroup } = this.props;
-    const delmark = <Icon className="edit-group"  type="edit" title="编辑分组" onClick={() => this.showModal(TYPE_EDIT)} />
-    const editmark = <Icon className="delete-group"   onClick={() => { this.showConfirm() }} type="delete" title="删除分组" />
-    const addmark = <Icon className="edit-group"  onClick={this.showModal} type="plus" title="添加分组" />
-
+    const delmark = <Menu.Item>
+      <span onClick={() => this.showModal(TYPE_EDIT)}>编辑分组</span>
+    </Menu.Item>
+    //  <Icon className="edit-group"  type="edit" title="编辑分组" onClick={() => this.showModal(TYPE_EDIT)} />
+    const editmark = <Menu.Item>
+      <span onClick={() => { this.showConfirm() }}>删除分组</span>
+    </Menu.Item>
+    // <Icon className="delete-group"   onClick={() => { this.showConfirm() }} type="delete" title="删除分组" />
+    const addmark = <Menu.Item>
+      <span onClick={this.showModal}>添加分组</span>
+    </Menu.Item>
+    //  <Icon className="edit-group"  onClick={this.showModal} type="plus" title="添加分组" />
+    const menu = <Menu>
+      {
+        this.props.curUserRole === "admin" ? (editmark) : ''
+      }
+      {
+        this.props.curUserRole === "admin" || currGroup.role ==='owner' ? (delmark) : ''
+      }
+      {
+        this.props.curUserRole === 'admin' ? (addmark) : ''
+      }
+    </Menu>
     return (
       <div className="m-group">
         <div className="group-bar">
           <div className="curr-group">
             <div className="curr-group-name">
               <span className="name">{currGroup.group_name}</span>
-              <span className="operate">
-                {
-                  this.props.curUserRole === "admin" ? (editmark) : ''
-                }
-                {
-                  this.props.curUserRole === "admin" || currGroup.role ==='owner' ? (delmark) : ''
-                }
-                {
-                  this.props.curUserRole === 'admin' ? (addmark) : ''
-                }
-              </span>
+              <Dropdown overlay={menu}>
+                <a className="ant-dropdown-link" href="#">
+                  <Icon type="setting" />
+                </a>
+              </Dropdown>
+              
             </div>
             <div className="curr-group-desc">简介: {currGroup.group_desc}</div>
           </div>

client/containers/Group/GroupList/GroupList.scss

@@ -26,11 +26,20 @@
       }
       .name{
         display: inline-block;
-        width: 117px;
+        // width: 117px;
+        margin-right: 20px;
         overflow: hidden;
         text-overflow:ellipsis;
         white-space: nowrap;
       }
+      .ant-dropdown-link{
+        float: right;
+        display: block;
+        color: rgba(255, 255, 255, 0.85);
+        &:hover{
+          color: #2395f1;
+        }
+      }
       .operate {
         font-size: 0;
         width: 150px;

client/containers/Project/Setting/ProjectEnv/ProjectEnv.js

@@ -228,9 +228,13 @@ class PrpjectEnv extends Component {
     });
     return (
       <div className="m-panel">
+        <div className="panel-title">
+          <h2 className="title">在这里添加项目的环境配置</h2>
+          <p className="desc">你可以添加多个环境，用于区分不同的使用场景。</p>
+        </div>
         <FormItem {...formItemLayout}>
           {envSettingItems}
-          <Button type="default" onClick={this.add} style={{ width: '50%' }}>
+          <Button type="default" onClick={this.add} >
             <Icon type="plus" /> 添加环境配置
           </Button>
         </FormItem>

client/styles/common.scss

@@ -115,6 +115,20 @@ em {
   min-height: 5rem;
 }
 
+.panel-title {
+  margin-bottom: .16rem;
+  border-left: 3px solid #2395f1;
+  padding-left: 8px;
+  .title {
+    font-weight: normal;
+  }
+  .desc {
+    font-size: 13px;
+    color: #919191;
+
+  }
+}
+
 @media (max-width: 768px) {
   html {
     width: min-content !important;