mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2024-12-21 05:19:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wenbo.dong 2017-09-26 18:37:39 +08:00
parent 5d697ce7ff
commit f6b812dc88
6 changed files with 114 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/containers/Group/Group.js
View File

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

2
client/containers/Project/Interface/Interface.js
View File

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

40
client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
View File

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

6
client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
View File

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

109
client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
View File

@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { fetchInterfaceList, fetchInterfaceData, deleteInterfaceData, deleteInterfaceCatData, initInterface } from '../../../../reducer/modules/interface.js'; import { fetchInterfaceList, fetchInterfaceData, deleteInterfaceData, deleteInterfaceCatData, initInterface } from '../../../../reducer/modules/interface.js';
import { getProject } from '../../../../reducer/modules/project.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 AddInterfaceForm from './AddInterfaceForm';
import AddInterfaceCatForm from './AddInterfaceCatForm'; import AddInterfaceCatForm from './AddInterfaceCatForm';
import axios from 'axios' import axios from 'axios'
@ -322,56 +322,59 @@ class InterfaceMenu extends Component {
// case 'DELETE': color = 'red'; break; // case 'DELETE': color = 'red'; break;
// default: color = "yellow"; // default: color = "yellow";
// } // }
const menu = (item) => { // const menu = (item) => {
return <Menu> // return <Menu>
<Menu.Item> // <Menu.Item>
<span onClick={() => { this.showConfirm(item._id) }}>删除接口</span> // <span onClick={() => { this.showConfirm(item._id) }}>删除接口</span>
</Menu.Item> // </Menu.Item>
<Menu.Item> // <Menu.Item>
<span onClick={() => { // <span onClick={() => {
this.copyInterface(item) // this.copyInterface(item)
}}>复制接口</span> // }}>复制接口</span>
</Menu.Item> // </Menu.Item>
</Menu> // </Menu>
}; // };
return <TreeNode 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> <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' }} />*/} <div className="btns">
<Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}> <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 }}/> <Icon type='ellipsis' className="interface-delete-icon" style={{ opacity: this.state.delIcon == item._id ? 1 : 0 }}/>
</Dropdown> </Dropdown>*/}
</div>} </div>}
key={'' + item._id} /> key={'' + item._id} />
} }
const menu = (item) => { // const menu = (item) => {
return <Menu> // return <Menu>
<Menu.Item> // <Menu.Item>
<span onClick={() => { // <span onClick={() => {
this.changeModal('visible', true); // this.changeModal('visible', true);
this.setState({ // this.setState({
curCatid: item._id // curCatid: item._id
}) // })
}}>添加接口</span> // }}>添加接口</span>
</Menu.Item> // </Menu.Item>
<Menu.Item> // <Menu.Item>
<span onClick={() => { // <span onClick={() => {
this.changeModal('change_cat_modal_visible', true); // this.changeModal('change_cat_modal_visible', true);
this.setState({ // this.setState({
curCatdata: item // curCatdata: item
}) // })
}}>修改分类</span> // }}>修改分类</span>
</Menu.Item> // </Menu.Item>
<Menu.Item> // <Menu.Item>
<span onClick={() => { // <span onClick={() => {
this.showDelCatConfirm(item._id) // this.showDelCatConfirm(item._id)
}}>删除分类</span> // }}>删除分类</span>
</Menu.Item> // </Menu.Item>
</Menu> // </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" /> <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) => { {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> <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" /> <Icon type='ellipsis' className="interface-delete-icon" />
</Dropdown> </Dropdown>*/}
</div>} </div>}
key={'cat_' + item._id} key={'cat_' + item._id}
className={`interface-item-nav ${item.list.length?"":"cat_switch_hidden"}`} className={`interface-item-nav ${item.list.length?"":"cat_switch_hidden"}`}

21
client/containers/Project/Interface/interface.scss
View File

@ -71,6 +71,25 @@
.ant-tree li .ant-tree-node-content-wrapper { .ant-tree li .ant-tree-node-content-wrapper {
width: calc(100% - 28px); width: calc(100% - 28px);
position: relative; 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{ .interface-delete-icon{
@ -78,7 +97,7 @@
right: 0; right: 0;
float: right; float: right;
line-height: 25px; line-height: 25px;
width: 30px; width: 24px;
font-weight: bold; font-weight: bold;
} }
.anticon-ellipsis { .anticon-ellipsis {