opti: 接口页面和测试集合页面的菜单按钮展开

client/containers/Group/Group.js

@@ -19,7 +19,7 @@ export default class Group extends Component {
 
     const GroupContent = (
       <Layout style={{minHeight: 'calc(100vh - 100px)', marginLeft: '24px', marginTop: '24px'}}>
-        <Sider style={{ height: '100%', overflowY: 'scroll'}} width={300}>
+        <Sider style={{ height: '100%' }} width={300}>
           <div className="logo" />
           <GroupList></GroupList>
         </Sider>

client/containers/Project/Interface/Interface.js

@@ -83,7 +83,7 @@ class Interface extends Component {
     // console.log(matchPath(this.props.location.pathname, contentRouter));
     return (
       <Layout style={{minHeight: 'calc(100vh - 156px)', marginLeft: '24px', marginTop: '24px'}}>
-        <Sider style={{ height: '100%', overflowY: 'scroll'}} width={300}>
+        <Sider style={{ height: '100%' }} width={300}>
           <div className="left-menu">
             <Tabs type="card" activeKey={activeKey} onChange={this.onChange}>
               <Tabs.TabPane tab="接口列表" key="api">

client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import { fetchInterfaceColList, fetchInterfaceCaseList, setColData } from '../../../../reducer/modules/interfaceCol'
 import { autobind } from 'core-decorators';
 import axios from 'axios';
-import { Input, Icon, Button, Modal, message, Tooltip, Tree, Dropdown, Menu, Form } from 'antd';
+import { Input, Icon, Button, Modal, message, Tooltip, Tree, Form } from 'antd';
 
 const TreeNode = Tree.TreeNode;
 const FormItem = Form.Item;
@@ -197,20 +197,20 @@ export default class InterfaceColMenu extends Component {
     const { currColId, currCaseId, isShowCol } = this.props;
     const { colModalType, colModalVisible, filterValue } = this.state;
 
-    const menu = (col) => {
-      return (
-        <Menu>
-          <Menu.Item>
-            <span onClick={() => this.showColModal('edit', col)}>修改集合</span>
-          </Menu.Item>
-          <Menu.Item>
-            <span onClick={() => {
-              this.showDelColConfirm(col._id)
-            }}>删除集合</span>
-          </Menu.Item>
-        </Menu>
-      )
-    };
+    // const menu = (col) => {
+    //   return (
+    //     <Menu>
+    //       <Menu.Item>
+    //         <span onClick={() => this.showColModal('edit', col)}>修改集合</span>
+    //       </Menu.Item>
+    //       <Menu.Item>
+    //         <span onClick={() => {
+    //           this.showDelColConfirm(col._id)
+    //         }}>删除集合</span>
+    //       </Menu.Item>
+    //     </Menu>
+    //   )
+    // };
 
     let isFilterCat = false;
 
@@ -237,7 +237,7 @@ export default class InterfaceColMenu extends Component {
                 return true;
               }
               isFilterCat = false;
-              
+
               let caseList = col.caseList.filter(item=>{
                 return item.casename.indexOf(filterValue) !== -1
               })
@@ -248,9 +248,13 @@ export default class InterfaceColMenu extends Component {
                 title={
                   <div className="menu-title">
                     <span><Icon type="folder-open" style={{marginRight: 5}} /><span>{col.name}</span></span>
-                    <Dropdown overlay={menu(col)} trigger={['click']} onClick={e => e.stopPropagation()}>
+                    <div className="btns">
+                      <Icon type='delete' className="interface-delete-icon" onClick={() => {this.showDelColConfirm(col._id)}} />
+                      <Icon type='edit' className="interface-delete-icon" onClick={() => {this.showColModal('edit', col)}} />
+                    </div>
+                    {/*<Dropdown overlay={menu(col)} trigger={['click']} onClick={e => e.stopPropagation()}>
                       <Icon className="opts-icon" type='ellipsis'/>
-                    </Dropdown>
+                    </Dropdown>*/}
                   </div>
                 }
               >

client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss

@@ -22,11 +22,17 @@
       margin-left: 5px;
       display: none;
     }
+    .btns {
+      display: none;
+    }
   }
   .menu-title:hover {
     .case-delete-icon {
       display: block;
     }
+    .btns {
+      display: block;
+    }
   }
 }
 

client/containers/Project/Interface/InterfaceList/InterfaceMenu.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types'
 import { fetchInterfaceList, fetchInterfaceData, deleteInterfaceData, deleteInterfaceCatData, initInterface } from '../../../../reducer/modules/interface.js';
 import { getProject } from '../../../../reducer/modules/project.js';
-import { Menu, Input, Icon, Button, Modal, message, Tree, Dropdown } from 'antd';
+import { Input, Icon, Button, Modal, message, Tree } from 'antd';
 import AddInterfaceForm from './AddInterfaceForm';
 import AddInterfaceCatForm from './AddInterfaceCatForm';
 import axios from 'axios'
@@ -322,56 +322,59 @@ class InterfaceMenu extends Component {
       //   case 'DELETE': color = 'red'; break;
       //   default: color = "yellow";
       // }
-      const menu = (item) => {
-        return <Menu>
-          <Menu.Item>
-            <span onClick={() => { this.showConfirm(item._id) }}>删除接口</span>
-          </Menu.Item>
-          <Menu.Item>
-            <span onClick={() => {
-              this.copyInterface(item)
-            }}>复制接口</span>
-          </Menu.Item>
-        </Menu>
-      };
+      // const menu = (item) => {
+      //   return <Menu>
+      //     <Menu.Item>
+      //       <span onClick={() => { this.showConfirm(item._id) }}>删除接口</span>
+      //     </Menu.Item>
+      //     <Menu.Item>
+      //       <span onClick={() => {
+      //         this.copyInterface(item)
+      //       }}>复制接口</span>
+      //     </Menu.Item>
+      //   </Menu>
+      // };
 
       return <TreeNode
-        title={<div onMouseEnter={() => this.enterItem(item._id)} onMouseLeave={this.leaveItem} >
+        title={<div className="container-title" onMouseEnter={() => this.enterItem(item._id)} onMouseLeave={this.leaveItem}  >
           <Link className="interface-item" to={"/project/" + matchParams.id + "/interface/api/" + item._id} >{item.title}</Link>
-          {/*<Icon type='delete' className="interface-delete-icon" onClick={() => { this.showConfirm(item._id) }} style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }} />*/}
-          <Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
+          <div className="btns">
+            <Icon type='delete' className="interface-delete-icon" onClick={() => { this.showConfirm(item._id) }} style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }} />
+            <Icon type='copy' className="interface-delete-icon" onClick={() => { this.copyInterface(item) }} style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }} />
+          </div>
+          {/*<Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
             <Icon type='ellipsis' className="interface-delete-icon" style={{ opacity: this.state.delIcon == item._id ? 1 : 0 }}/>
-          </Dropdown>
+          </Dropdown>*/}
         </div>}
         key={'' + item._id} />
 
     }
 
-    const menu = (item) => {
-      return <Menu>
-        <Menu.Item>
-          <span onClick={() => {
-            this.changeModal('visible', true);
-            this.setState({
-              curCatid: item._id
-            })
-          }}>添加接口</span>
-        </Menu.Item>
-        <Menu.Item>
-          <span onClick={() => {
-            this.changeModal('change_cat_modal_visible', true);
-            this.setState({
-              curCatdata: item
-            })
-          }}>修改分类</span>
-        </Menu.Item>
-        <Menu.Item>
-          <span onClick={() => {
-            this.showDelCatConfirm(item._id)
-          }}>删除分类</span>
-        </Menu.Item>
-      </Menu>
-    };
+    // const menu = (item) => {
+    //   return <Menu>
+    //     <Menu.Item>
+    //       <span onClick={() => {
+    //         this.changeModal('visible', true);
+    //         this.setState({
+    //           curCatid: item._id
+    //         })
+    //       }}>添加接口</span>
+    //     </Menu.Item>
+    //     <Menu.Item>
+    //       <span onClick={() => {
+    //         this.changeModal('change_cat_modal_visible', true);
+    //         this.setState({
+    //           curCatdata: item
+    //         })
+    //       }}>修改分类</span>
+    //     </Menu.Item>
+    //     <Menu.Item>
+    //       <span onClick={() => {
+    //         this.showDelCatConfirm(item._id)
+    //       }}>删除分类</span>
+    //     </Menu.Item>
+    //   </Menu>
+    // };
 
 
 
@@ -414,11 +417,27 @@ class InterfaceMenu extends Component {
         >
           <TreeNode className="item-all-interface" title={<Link style={{ fontSize: '14px' }} to={"/project/" + matchParams.id + "/interface/api"}><Icon type="folder" style={{ marginRight: 5 }} />全部接口</Link>} key="root" />
           {menuList.map((item) => {
-            return <TreeNode title={<div>
+            return <TreeNode title={<div className="container-title" onMouseEnter={() => this.enterItem(item._id)} onMouseLeave={this.leaveItem} >
               <Link className="interface-item" to={"/project/" + matchParams.id + "/interface/api/cat_" + item._id} ><Icon type="folder-open" style={{ marginRight: 5 }} />{item.name}</Link>
-              <Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
+              <div className="btns">
+                <Icon type='delete' className="interface-delete-icon" onClick={() => { this.showDelCatConfirm(item._id) }}  style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}/>
+                <Icon type='edit' className="interface-delete-icon" style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }} onClick={() => {
+                  this.changeModal('change_cat_modal_visible', true);
+                  this.setState({
+                    curCatdata: item
+                  })
+                }} />
+                <Icon type='plus' className="interface-delete-icon" style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }} onClick={() => {
+                  this.changeModal('visible', true);
+                  this.setState({
+                    curCatid: item._id
+                  });
+                }} />
+              </div>
+
+              {/*<Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
                 <Icon type='ellipsis' className="interface-delete-icon" />
-              </Dropdown>
+              </Dropdown>*/}
             </div>}
              key={'cat_' + item._id}
              className={`interface-item-nav ${item.list.length?"":"cat_switch_hidden"}`}

client/containers/Project/Interface/interface.scss

@@ -71,6 +71,25 @@
     .ant-tree li .ant-tree-node-content-wrapper {
       width: calc(100% - 28px);
       position: relative;
+      .container-title {
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+      .btns {
+        background-color: #eef7fe;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-60%);
+        transition: all .2s;
+      }
+    }
+    .ant-tree li .ant-tree-node-selected {
+      .btns {
+        background-color: #d5ebfc;
+        transition: all .2s;
+      }
     }
 
     .interface-delete-icon{
@@ -78,7 +97,7 @@
         right: 0;
         float: right;
         line-height: 25px;
-        width: 30px;
+        width: 24px;
         font-weight: bold;
     }
     .anticon-ellipsis {