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-14 16:58:54 +08:00
parent 7d761ab16e
commit 253d6d4016
8 changed files with 73 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,9 +14,9 @@ const TreeNode = Tree.TreeNode;
@connect(
state => {
return {
list: state.inter.list,
inter: state.inter.curdata,
@ -174,12 +174,12 @@ class InterfaceMenu extends Component {
title: '您确认删除此接口',
content: '温馨提示：接口删除后，无法恢复',
async onOk() {
await that.props.deleteInterfaceData(id, that.props.projectId)
await that.getList()
ref.destroy()
that.props.history.push('/project/' + that.props.match.params.id + '/interface/api')
},
async onCancel() {
ref.destroy()
@ -227,8 +227,8 @@ class InterfaceMenu extends Component {
const matchParams = this.props.match.params;
let menuList = this.state.list;
const searchBox = <div className="interface-filter">
<Input onChange={this.onFilter} value={this.state.filter} placeholder="Filter by name" style={{ width: "70%" }} />
<Tag color="#108ee9" onClick={() => this.changeModal('add_cat_modal_visible', true)} style={{ marginLeft: "16px" }} ><Icon type="plus" /></Tag>
<Input onChange={this.onFilter} value={this.state.filter} placeholder="Filter by name" />
<Tag color="#108ee9" onClick={() => this.changeModal('add_cat_modal_visible', true)} className="btn-filter" ><Icon type="plus" /></Tag>
<Modal
title="添加接口"
visible={this.state.visible}
@ -250,7 +250,7 @@ class InterfaceMenu extends Component {
<Modal
title="修改分类"
visible={this.state.change_cat_modal_visible}
onCancel={() => this.changeModal('change_cat_modal_visible', false)}
onCancel={() => this.changeModal('change_cat_modal_visible', false)}
footer={null}
>
<AddInterfaceCatForm catdata={this.state.curCatdata} onCancel={() => this.changeModal('change_cat_modal_visible', false)} onSubmit={this.handleChangeInterfaceCat} />
@ -297,7 +297,7 @@ class InterfaceMenu extends Component {
// case 'DELETE': color = 'red'; break;
// default: color = "yellow";
// }
return <TreeNode
return <TreeNode
title={<div className="aa" 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' }} />
@ -335,7 +335,7 @@ class InterfaceMenu extends Component {
let currentKes = defaultExpandedKeys();
if (this.state.filter) {
let arr = [];
menuList = menuList.filter( (item) => {
@ -343,12 +343,12 @@ class InterfaceMenu extends Component {
if (item.name.indexOf(this.state.filter) === -1) {
item.list = item.list.filter(inter=>{
if(inter.title.indexOf(this.state.filter) === -1 && inter.path.indexOf(this.state.filter)){
return false;
return false;
}
//arr.push('cat_' + inter.catid)
interfaceFilter = true;
return true;
})
return interfaceFilter === true
}
@ -379,7 +379,7 @@ class InterfaceMenu extends Component {
<Icon type='setting' className="interface-delete-icon" />
</Dropdown>
</div>}
key={'cat_' + item._id}
key={'cat_' + item._id}
className={`interface-item-nav ${item.list.length?"":"cat_switch_hidden"}`}
>
{item.list.map(item_interface_create)}

4
client/containers/Project/Interface/InterfaceList/View.js
View File

@ -250,7 +250,7 @@ class View extends Component {
if(!methodColor) methodColor = "get";
let res = <div className="caseContainer">
<div className="colName">
<span className="colKey">接口名：</span>
<span className="colKey">接口名称：</span>
<span className="colValue">{this.props.curData.title}</span>
</div>
<div className="colMethod">
@ -262,7 +262,7 @@ class View extends Component {
<span className="colValue">{this.props.currProject.basepath}{this.props.curData.path}</span>
</div>
<div className="colstatus">
<span className="colKey">状态：</span>
<span className="colKey">状&emsp;&emsp;态：</span>
<span className={'tag-status ' + this.props.curData.status}>{status[this.props.curData.status]}</span>
</div>
<div className="colAddTime">

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

@ -42,13 +42,23 @@
height: 40px;
line-height: 31px;
}
.ant-input {
width: 100%;
}
.interface-filter{
padding-top:7px;
padding-left: 10px;
padding-right: 50px;
height:45px;
line-height: 32px;
padding-top:7px;
background-color: #efefef
background-color: #efefef;
position: relative;
}
.btn-filter {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.interface-list{
.cat_switch_hidden{
@ -56,7 +66,7 @@
visibility: hidden;
}
}
a{
color: #333
@ -71,7 +81,6 @@
}
.interface-item{
display: inline-block;
width: 180px;
overflow: hidden;
top: 0px;
line-height: 100%;
@ -94,7 +103,7 @@
}
}
}
.right-content{
margin:3px;
min-height: 5rem;

14
static/doc/api.html
View File

@ -899,7 +899,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/group.js.html#290" target="_blank">./server/controllers/group.js:290</a>
<a href="./static/server/controllers/group.js.html#303" target="_blank">./server/controllers/group.js:303</a>
</p>
@ -971,7 +971,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/group.js.html#330" target="_blank">./server/controllers/group.js:330</a>
<a href="./static/server/controllers/group.js.html#343" target="_blank">./server/controllers/group.js:343</a>
</p>
@ -3511,7 +3511,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#168" target="_blank">./server/controllers/interface.js:168</a>
<a href="./static/server/controllers/interface.js.html#181" target="_blank">./server/controllers/interface.js:181</a>
</p>
@ -3576,7 +3576,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#193" target="_blank">./server/controllers/interface.js:193</a>
<a href="./static/server/controllers/interface.js.html#206" target="_blank">./server/controllers/interface.js:206</a>
</p>
@ -3641,7 +3641,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#255" target="_blank">./server/controllers/interface.js:255</a>
<a href="./static/server/controllers/interface.js.html#268" target="_blank">./server/controllers/interface.js:268</a>
</p>
@ -3874,7 +3874,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#427" target="_blank">./server/controllers/interface.js:427</a>
<a href="./static/server/controllers/interface.js.html#440" target="_blank">./server/controllers/interface.js:440</a>
</p>
@ -3946,7 +3946,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#615" target="_blank">./server/controllers/interface.js:615</a>
<a href="./static/server/controllers/interface.js.html#628" target="_blank">./server/controllers/interface.js:628</a>
</p>

18
static/doc/index-使用mock功能.html
View File

@ -144,14 +144,14 @@
<pre><code>mockd地址： http<span class="token operator">:</span>//yapi.corp.qunar.com/mock/<span class="token number">29</span>/api/hackathon/login
</code></pre><p> 注：项目id可以在项目设置里查看到</p>
<h2 class="subject" id="定义mock数据示例">定义mock数据示例 <a class="hashlink" href="#定义mock数据示例">#</a></h2><pre><code><span class="token punctuation">{</span>
<span class="token property">"status|0-1"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> //接口状态
"status|<span class="token number">0</span>-<span class="token number">1</span>"<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> //接口状态
<span class="token property">"message"</span><span class="token operator">:</span> <span class="token string">"请求完成"</span><span class="token punctuation">,</span> //消息提示
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"counts"</span><span class="token operator">:</span><span class="token string">"@integer"</span><span class="token punctuation">,</span> //统计数量
<span class="token property">"totalSubjectType|4-10"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
"totalSubjectType|<span class="token number">4</span>-<span class="token number">10</span>"<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">"subjectName|regexp"</span><span class="token operator">:</span> <span class="token string">"大数据|机器学习|工具"</span><span class="token punctuation">,</span> //主题名
<span class="token property">"subjectType|+1"</span><span class="token operator">:</span> <span class="token number">1</span> //类型
"subjectName|regexp"<span class="token operator">:</span> "大数据|机器学习|工具<span class="token string">", //主题名
"</span>subjectType|+<span class="token number">1</span>"<span class="token operator">:</span> <span class="token number">1</span> //类型
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"data"</span><span class="token operator">:</span><span class="token punctuation">[</span>
@ -164,8 +164,8 @@
<span class="token punctuation">}</span>
</code></pre><h2 class="subject" id="yapiMock跟mockjs区别">yapiMock跟mockjs区别 <a class="hashlink" href="#yapiMock跟mockjs区别">#</a></h2><p>因为yapi基于json定义mock，无法使用mockjs原有的函数功能，正则表达式需要基于rule书写，示例如下：</p>
<pre><code><span class="token punctuation">{</span>
<span class="token property">"name|regexp"</span><span class="token operator">:</span> <span class="token string">"[a-z0-9_]+?"</span><span class="token punctuation">,</span>
<span class="token property">"type|regexp"</span><span class="token operator">:</span> <span class="token string">"json|text|xml"</span> //枚举数据类型可这样实现
"name|regexp"<span class="token operator">:</span> <span class="token string">"[a-z0-9_]+?"</span><span class="token punctuation">,</span>
"type|regexp"<span class="token operator">:</span> "json|text|xml" //枚举数据类型可这样实现
<span class="token punctuation">}</span>
</code></pre><h2 class="subject" id="如何使用Mock?">如何使用Mock? <a class="hashlink" href="#如何使用Mock?">#</a></h2><h3 class="subject" id="1_在js代码直接请求yapi提供的mock地址（不用担心跨域问题）">1 在js代码直接请求yapi提供的mock地址（不用担心跨域问题） <a class="hashlink" href="#1_在js代码直接请求yapi提供的mock地址（不用担心跨域问题）">#</a></h3><p>在代码直接请求yapi提供的mock地址，以jQuery为例：</p>
<pre><code class="lang-javascript"><span class="token keyword">let</span> prefix <span class="token operator">=</span> <span class="token string">'http://yapi.local.qunar.com:3000/mock/2817'</span>
@ -196,9 +196,9 @@ $<span class="token punctuation">.</span><span class="token function">post</span
<p><a href="#DPD">2. 数据占位符定义规范（Data Placeholder Definition，DPD）</a></p>
<p><span id = "DTD"></span></p>
<h3 class="subject" id="数据模板定义规范（Data_Template_Definition，DTD）">数据模板定义规范（Data Template Definition，DTD） <a class="hashlink" href="#数据模板定义规范（Data_Template_Definition，DTD）">#</a></h3><p>数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：</p>
<pre><code>// 属性名 name （与生成规则之间用 <span class="token string">"|"</span> 隔开）
// 生成规则 rule（生成规则有<span class="token number">7</span>种详见下面的生成规则）
// 属性值 value（可以含有 <span class="token string">"@占位符"</span> 同时也指定了最终值的初始值和类型）
<pre><code>// 属性名 name （与生成规则之间用 "|<span class="token string">" 隔开）
// 生成规则 rule（生成规则有7种详见下面的生成规则）
// 属性值 value（可以含有 "</span>@占位符" 同时也指定了最终值的初始值和类型）
'name|rule'<span class="token operator">:</span> value

1
static/doc/source/app.js
View File

@ -8,7 +8,6 @@ $(document).ready(function() {
var $versionSelector = $('.version-selector');
var $versionMask = $('.m-version-mask');
var isPanelHide = true;
var winWidth = $(window).width();
var h2 = $('.content-right').find('h2');
var h3 = $('.content-right').find('h3');
var a = $('.content-left').find('a');

15
static/doc/static/server/controllers/group.js.html vendored
View File

@ -309,7 +309,20 @@ class groupController extends baseController {
try {
var groupInst = yapi.getInst(groupModel);
let result = await groupInst.list();
ctx.body = yapi.commons.resReturn(result);
let newResult = [];
if(result && result.length > 0){
for(let i=0; i< result.length; i++){
result[i] = result[i].toObject();
result[i].role = await this.checkAuth(result[i]._id, 'group', 'edit');
if(result[i].role){
newResult.unshift(result[i]);
}else{
newResult.push(result[i]);
}
}
}
ctx.body = yapi.commons.resReturn(newResult);
} catch (e) {
ctx.body = yapi.commons.resReturn(null, 402, e.message);
}

15
static/doc/static/server/controllers/interface.js.html vendored
View File

@ -103,9 +103,22 @@ class interfaceController extends baseController {
return ctx.body = yapi.commons.resReturn(null, 400, '接口请求路径不能为空');
}
if (!yapi.commons.verifyPath(params.path)) {
let http_path = url.parse(params.path, true);
params.path = http_path.pathname;
if (!yapi.commons.verifyPath(http_path.pathname)) {
return ctx.body = yapi.commons.resReturn(null, 400, '接口path第一位必须是/，最后一位不能为/');
}
if(!params.req_query){
params.req_query = [];
Object.keys(http_path.query).forEach((item)=>{
params.req_query.push({
name: item
})
})
}
let checkRepeat = await this.Model.checkRepeat(params.project_id, params.path, params.method);