-
Notifications
You must be signed in to change notification settings - Fork 12
/
doc.html
135 lines (120 loc) · 4.17 KB
/
doc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>API Document List - Express Mock Server</title>
<link href="http://lib.baomitu.com/bulma/0.5.1/css/bulma.min.css" rel="stylesheet">
<link href="http://lib.baomitu.com/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet">
<link href="http://lib.baomitu.com/highlight.js/9.12.0/styles/rainbow.min.css" rel="stylesheet">
<style>
body,html{height:100%;}
.main{height:calc(100% - 157px);}
.main>.columns{height:100%;}
.sidebar{overflow:auto;background-color:#eee;}
.search-bar{border-bottom:1px solid #e8e8e8;}
.docs{overflow:auto;background-color:#474949;}
.docs .notification{margin-bottom:0;white-space:nowrap;}
.docs pre{margin:0;padding:0;background-color:inherit;}
.docs .hljs-ln-numbers{padding-right:.5em;min-width:26px;text-align:right;}
[v-cloak]{display:none;}
</style>
</head>
<body>
<section class="hero is-dark">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">Express Mock Server</p>
<p class="subtitle">API document management platform.</p>
</div>
</div>
</section>
<section id="app" class="main" v-cloak>
<div class="columns is-mobile is-gapless">
<div class="column is-one-quarter sidebar">
<p class="notification is-radiusless search-bar">
<input class="input" type="text" placeholder="Type to search" v-model="searchQuery">
</p>
<aside class="menu">
<ul class="menu-list">
<li v-for="it of filteredDocs" :key="it.file" @click="showConetnt(it)">
<a :class="{'is-active': menuActiveItem.file === it.file}">{{it.title}}</a>
</li>
</ul>
</aside>
</div>
<div class="column docs">
<div v-if="showInfos" class="notification is-primary is-radiusless">
<p><strong>FILE:</strong> {{menuActiveItem.file}}</p>
<p>
<strong>URL:</strong> <a :href="menuActiveItem.url" target="_blank">{{menuActiveItem.url}}</a>
</p>
</div>
<div v-else class="notification is-info">
<p>No data can be displayed, please click on the left menu.</p>
</div>
<pre><code ref="docsContent" class="hljs json"></code></pre>
</div>
</div>
</section>
<script src="http://lib.baomitu.com/vue/2.4.2/vue.min.js"></script>
<script src="http://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://lib.baomitu.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="http://lib.baomitu.com/highlightjs-line-numbers.js/2.0.0/highlightjs-line-numbers.js"></script>
<script>
(function() {
var app = new Vue({
el: '#app',
data: {
// search key
searchQuery: '',
// select item
menuActiveItem: {},
// menu list
menuList: [
// { title: '', url: '', file: '' },
],
},
computed: {
// show api file/url info
showInfos: function() {
return typeof this.menuActiveItem.file === 'string';
},
// search doc by regexp
filteredDocs: function () {
var self = this;
if (self.searchQuery === '') {
return self.menuList;
}
var searchRegex = new RegExp(self.searchQuery, 'i');
return self.menuList.filter(function (it) {
return (
searchRegex.test(it.title) ||
searchRegex.test(it.url) ||
searchRegex.test(it.file)
);
});
},
},
methods: {
// get ajax content
showConetnt: function(it, idx) {
var that = this;
that.menuActiveItem = it;
$.get(it.url, function (data) {
var docsContent = that.$refs.docsContent;
var ret = hljs.highlight('json', JSON.stringify(data, null, ' '), true);
docsContent.innerHTML = ret.value;
hljs.lineNumbersBlock(docsContent);
}, 'json');
},
},
});
// ejs output
app.menuList = @menuList;
})();
</script>
</body>
</html>