Former-commit-id: ab2ad7a807cb98435cdbd86590153529b9e03cc9
master
王兵 5 years ago
parent 6764f12768
commit c904100008

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>接口文档</title> <title>接口文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/vue.min.js" type="text/javascript"></script> <script src="js/vue.min.js" type="text/javascript"></script>
</head> </head>
<style> <style>
@ -27,7 +27,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 240px; width: 240px;
height: 50px; height: 70px;
padding: 10px; padding: 10px;
} }
@ -39,9 +39,17 @@
border: 1px dashed #cacaca; border: 1px dashed #cacaca;
} }
.search p {
font-size: 12px;
color: #757575;
padding: 5px;
transform: scale(0.8);
text-align: center;
}
.side { .side {
height: calc(100% - 50px); height: calc(100% - 70px);
margin-top: 50px; margin-top: 70px;
width: 240px; width: 240px;
position: fixed; position: fixed;
} }
@ -49,7 +57,7 @@
.side ul li a { .side ul li a {
display: block; display: block;
text-decoration: none; text-decoration: none;
padding: 8px; padding: 8px 15px;
color: #585858; color: #585858;
} }
@ -58,6 +66,11 @@
background: #efefef; background: #efefef;
} }
.side ul li a.select {
opacity: .9;
background: #efefef;
}
.body { .body {
margin-left: 240px; margin-left: 240px;
width: calc(100% - 240px); width: calc(100% - 240px);
@ -68,33 +81,33 @@
.api { .api {
width: 700px; width: 700px;
border-left: 10px solid #ffffff;
} }
h3 { .api h3 {
background: #eef0f4; background: #eef0f4;
padding: 5px; padding: 10px;
font-size: 18px;
} }
h5 { .api h5 {
padding: 5px; padding: 5px;
color: #989898; color: #3e3e3e;
font-weight: normal; font-weight: normal;
margin-bottom: 10px; margin: 10px 0;
} }
.wrapper { .api .wrapper {
padding: 16px; padding: 16px;
background: #eef0f4; background: #eef0f4;
} }
.wrapper a{ .api .wrapper a {
text-decoration: none; text-decoration: none;
border-bottom: 1px dashed #f00; border-bottom: 1px dashed #f00;
color: #4f4f4f; color: #4f4f4f;
} }
.object{ .api .object {
border-bottom: 1px dashed #f00; border-bottom: 1px dashed #f00;
color: #4f4f4f; color: #4f4f4f;
} }
@ -139,18 +152,24 @@
<div class="side"> <div class="side">
<ul> <ul>
<li v-for="(item,index) in list" @click="onSelect(item)"> <li v-for="(item,index) in list" @click="onSelect(item)">
<a href="javascript:;"><span>{{item.title}}</span></a> <a href="javascript:;" :class="{'select':item.id==select.id}">
<span v-if="item.type == 'api'" style="color: #3a8ee6">[A]</span>
<span v-if="item.type == 'ajax'" style="color: #3a8ee6">[H]</span>
<span>{{item.title}}</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="search"> <div class="search">
<input v-model="searchKey" placeholder="搜索关键字..."> <input v-model="searchKey" placeholder="搜索关键字...">
<p>提示WEB接口(H)API接口(A)</p>
</div> </div>
<div class="body"> <div class="body">
<div class="api" v-if="item.title"> <div class="api" v-if="select.title">
<h3>{{item.title}}</h3> <h3>{{select.title}}</h3>
<h5>请求参数</h5> <h5>请求参数</h5>
<div class="wrapper"> <div class="wrapper">
@ -161,7 +180,7 @@
<th width="100">必需</th> <th width="100">必需</th>
<th>说明</th> <th>说明</th>
</tr> </tr>
<tr v-for="p in item.reqParams"> <tr v-for="p in select.reqParams">
<td>{{p.name}}</td> <td>{{p.name}}</td>
<td>{{p.type}}</td> <td>{{p.type}}</td>
<td v-if="p.required" style="color: red"></td> <td v-if="p.required" style="color: red"></td>
@ -179,7 +198,7 @@
<th width="100">类型</th> <th width="100">类型</th>
<th>说明</th> <th>说明</th>
</tr> </tr>
<tr v-for="p in item.rspParams"> <tr v-for="p in select.rspParams">
<td v-if="p.type == 'Object'"><a href="#User">{{p.name}}</a></td> <td v-if="p.type == 'Object'"><a href="#User">{{p.name}}</a></td>
<td v-if="p.type != 'Object'">{{p.name}}</td> <td v-if="p.type != 'Object'">{{p.name}}</td>
<td>{{p.type}}</td> <td>{{p.type}}</td>
@ -197,7 +216,7 @@
<th width="100">类型</th> <th width="100">类型</th>
<th>说明</th> <th>说明</th>
</tr> </tr>
<tr v-for="p in item.entParams"> <tr v-for="p in select.entParams">
<td v-if="p.type == 'Object'"><a href="javascript:;">{{p.name}}</a></td> <td v-if="p.type == 'Object'"><a href="javascript:;">{{p.name}}</a></td>
<td v-if="p.type != 'Object'">{{p.name}}</td> <td v-if="p.type != 'Object'">{{p.name}}</td>
<td>{{p.type}}</td> <td>{{p.type}}</td>
@ -214,12 +233,59 @@
el: "#app", el: "#app",
data: { data: {
searchKey: '', searchKey: '',
item: {}, select: {},
data: [{ data: [{
title: "登录", title: "登录",
type: "ajax",
module: "system",
target: "user",
method: "login",
id: "ajax.system.user.login",
reqParams: [
{
name: "username",
type: "String",
required: true,
note: "用户登录名"
},
{
name: "password",
type: "String",
required: true,
note: "用户登录密码"
}
],
rspParams: [
{
name: "token",
type: "String",
note: "登录凭证"
},
{
name: "User",
type: "Object",
note: "用户"
}
],
entParams: [
{
name: "username",
type: "String",
note: "用户名"
},
{
name: "aliasName",
type: "String",
note: "用户别名"
}
],
}, {
title: "登录AA",
type: "api",
module: "system", module: "system",
target: "user", target: "user",
method: "login", method: "login",
id: "api.system.user.login",
reqParams: [ reqParams: [
{ {
name: "username", name: "username",
@ -262,7 +328,7 @@
}, },
computed: { computed: {
list: function () { list: function () {
let reg = new RegExp(this.searchKey, 'ig'); var reg = new RegExp(this.searchKey, 'ig');
if (this.searchKey) { if (this.searchKey) {
return this.data.filter(function (item) { return this.data.filter(function (item) {
return item.title.match(reg); return item.title.match(reg);
@ -273,14 +339,9 @@
}, },
methods: { methods: {
onSelect: function (item) { onSelect: function (item) {
this.item = item; this.select = item;
} }
},
watch: {
"searchKey": function (v1, v2) {
} }
},
}); });
</script> </script>

Loading…
Cancel
Save

Powered by TurnKey Linux.