增加接口结果特殊显示，搜索框回车搜索
This commit is contained in:
TevinLi
parent
50a7e84781
commit
6134360725
|
|
@ -1,240 +1,58 @@
|
|||
@charset "utf-8";
|
||||
|
||||
/* ---------- box ---------- */
|
||||
.search-box * {
|
||||
font-family: Microsoft YaHei,STXihei,STHeiti,Verdana,Arial,Helvetica,sans-serif;
|
||||
}
|
||||
.search-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 45px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.search-box *{font-family:Microsoft YaHei,STXihei,STHeiti,Verdana,Arial,Helvetica,sans-serif;}
|
||||
.search-box{display:none;position:absolute;top:0;right:0;z-index:10;width:100%;height:100%;padding:45px;background-color:#fff;}
|
||||
|
||||
/* ---------- search-update ---------- */
|
||||
.search-update {
|
||||
float: right;
|
||||
width: 350px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.search-update .text {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 140px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.search-update .text:after {
|
||||
position: absolute;
|
||||
right: 122px;
|
||||
top: 9px;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #ccc;
|
||||
content: ' ';
|
||||
}
|
||||
.search-update .text p {
|
||||
margin: 0;
|
||||
}
|
||||
.search-update .text time {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.search-update .text b {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.search-update .text span {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.search-update .text i {
|
||||
font-style: normal;
|
||||
}
|
||||
.search-update input {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
.search-update input[disabled] {
|
||||
padding: 5px 13px;
|
||||
color: #ccc;
|
||||
background: #f2f2f2;
|
||||
border: #aaa 1px solid;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.search-box h2 {
|
||||
height: 65px;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.search-update{float:right;width:350px;max-width:100%;}
|
||||
.search-update .text{position:relative;width:100%;padding-right:140px;text-align:right;font-size:12px;line-height:20px;}
|
||||
.search-update .text:after{position:absolute;right:122px;top:9px;width:1px;height:24px;background:#ccc;content:' ';}
|
||||
.search-update .text p{margin:0;}
|
||||
.search-update .text time{display:inline-block;white-space:nowrap;}
|
||||
.search-update .text b{margin-right:5px;}
|
||||
.search-update .text span{display:inline-block;margin-left:5px;white-space:nowrap;}
|
||||
.search-update .text i{font-style:normal;}
|
||||
.search-update input{position:relative;z-index:10;float:right;margin-top:6px;padding:4px 12px;}
|
||||
.search-update input[disabled]{padding:5px 13px;color:#ccc;background:#f2f2f2;border:#aaa 1px solid;border-radius:1px;}
|
||||
.search-box h2{height:65px;color:#666;font-size:24px;font-weight:normal;}
|
||||
|
||||
/* ---------- search-input ---------- */
|
||||
.search-input {
|
||||
position: relative;
|
||||
padding-right: 110px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.search-input input[type="text"] {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
border: #ccc 1px solid;
|
||||
outline: none;
|
||||
}
|
||||
.search-input input[type="text"]:focus {
|
||||
border: @colour-light 1px solid;
|
||||
box-shadow: @colour-light 0px 0px 2px;
|
||||
}
|
||||
.search-input input[type="button"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 106px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.search-input input[type="button"][disabled] {
|
||||
color: #ccc;
|
||||
background: #f2f2f2;
|
||||
border: #aaa 1px solid;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.search-input{position:relative;padding-right:110px;padding-bottom:30px;}
|
||||
.search-input input[type="text"]{display:inline-block;width:100%;padding:10px;font-size:16px;border:#ccc 1px solid;outline:none;}
|
||||
.search-input input[type="text"]:focus{border:@colour-light 1px solid;box-shadow:@colour-light 0px 0px 2px;}
|
||||
.search-input input[type="button"]{position:absolute;top:0;right:0;width:106px;height:44px;text-align:center;line-height:38px;font-size:18px;}
|
||||
.search-input input[type="button"][disabled]{color:#ccc;background:#f2f2f2;border:#aaa 1px solid;border-radius:1px;}
|
||||
|
||||
/* ---------- search-results ---------- */
|
||||
.search-results {
|
||||
background: #eee;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.search-result-message {
|
||||
display: none;
|
||||
padding-top: 50px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 22px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.search-list {
|
||||
list-style: none;
|
||||
padding: 18px 16px 5px;
|
||||
}
|
||||
.search-item {
|
||||
margin-bottom: 14px;
|
||||
background: #fff;
|
||||
border: #e6e6e6 1px solid;
|
||||
}
|
||||
.search-item:hover {
|
||||
border: #d9d9d9 1px solid;
|
||||
box-shadow: rgba(0, 0, 0, .1) 0 0 2px;
|
||||
}
|
||||
.search-item a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.search-item .content {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.search-item .content strong {
|
||||
display: block;
|
||||
padding-bottom: 3px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 27px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.search-item .content p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
.search-item .content mark {
|
||||
color: red;
|
||||
background: none;
|
||||
}
|
||||
.search-item .bottom {
|
||||
position: relative;
|
||||
padding: 0 14px;
|
||||
line-height: 30px;
|
||||
color: #999;
|
||||
border-top: #e6e6e6 1px solid;
|
||||
background: #fafafa;
|
||||
}
|
||||
.search-item .bottom p {
|
||||
margin: 0;
|
||||
padding-right: 200px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.search-item .bottom .time {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 14px;
|
||||
}
|
||||
.search-result-more {
|
||||
display: none;
|
||||
margin: 0 16px 18px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
background: #fafafa;
|
||||
border: #e6e6e6 1px solid;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-result-more:active {
|
||||
padding-top: 1px;
|
||||
line-height: 39px;
|
||||
}
|
||||
.search-results{background:#eee;overflow-y:scroll;}
|
||||
.search-result-message{display:none;padding-top:50px;text-align:center;color:#777;font-size:22px;line-height:35px;}
|
||||
.search-list{list-style:none;padding:18px 16px 5px;}
|
||||
.search-item{margin-bottom:14px;background:#fff;border:#e6e6e6 1px solid;}
|
||||
.search-item:hover{border:#d9d9d9 1px solid;box-shadow:rgba(0,0,0,.1) 0 0 2px;}
|
||||
.search-item a:hover{text-decoration:none;}
|
||||
.search-item .content{padding:12px 14px 6px;}
|
||||
.search-item .content strong{display:block;padding:2px 0 5px 0;font-size:16px;color:#333;line-height:23px;font-weight:normal;}
|
||||
.search-item .content p{margin:0 0 6px;color:#666;font-size:14px;}
|
||||
.search-item .content p.p1{margin:1px 0 7px;overflow:hidden;line-height:24px;white-space:nowrap;text-overflow:ellipsis;background:#f8f8f8;border-radius:2px;}
|
||||
.search-item .content em{display:inline-block;padding:0 5px;margin-right:5px;font-style:normal;font-size:12px;color:#fff;background:#ccc;border-top-left-radius:2px;border-bottom-left-radius:2px;}
|
||||
.search-item .content mark{color:red;background:none;}
|
||||
.search-item .bottom{position:relative;padding:0 14px;line-height:30px;color:#999;border-top:#e6e6e6 1px solid;background:#fafafa;}
|
||||
.search-item .bottom p{margin:0;padding-right:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
|
||||
.search-item .bottom .time{position:absolute;top:0;right:14px;}
|
||||
.search-result-more{display:none;margin:0 16px 18px;color:#999;text-align:center;line-height:40px;font-size:16px;letter-spacing:1px;background:#fafafa;border:#e6e6e6 1px solid;cursor:pointer;}
|
||||
.search-result-more:active{padding-top:1px;line-height:39px;}
|
||||
|
||||
/* ---------- search response ---------- */
|
||||
@media screen and (max-width:950px){
|
||||
.search-box h2 {
|
||||
clear: both;
|
||||
height: 90px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.search-item .bottom p {
|
||||
padding-right: 0;
|
||||
line-height: 32px;
|
||||
}
|
||||
.search-item .bottom .time {
|
||||
position: static;
|
||||
right: auto;
|
||||
padding-bottom: 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.search-box h2{clear:both;height:90px;padding-top:30px;}
|
||||
.search-item .bottom p{padding-right:0;line-height:32px;}
|
||||
.search-item .bottom .time{position:static;right:auto;padding-bottom:8px;line-height:16px;}
|
||||
}
|
||||
@media screen and (max-width:375px){
|
||||
.search-box h2 {
|
||||
height: 100px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
.search-update .text {
|
||||
clear: both;
|
||||
padding-right: 0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.search-update .text:after {
|
||||
display: none;
|
||||
content: '';
|
||||
}
|
||||
.search-input {
|
||||
padding-right: 90px;
|
||||
}
|
||||
.search-input input[type="button"] {
|
||||
width: 86px;
|
||||
}
|
||||
}
|
||||
.search-box h2{height:100px;padding-top:40px;}
|
||||
.search-update .text{clear:both;padding-right:0;padding-top:10px;}
|
||||
.search-update .text:after{display:none;content:'';}
|
||||
.search-input{padding-right:90px;}
|
||||
.search-input input[type="button"]{width:86px;}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
that.elm.$searchUpdate.prop('disabled', true);
|
||||
that.onNeedRebuildStorage(function () {
|
||||
that.elm.$search.prop('disabled', false);
|
||||
that.elm.$searchUpdate.val('请勿高频使用');
|
||||
that.elm.$searchUpdate.val('请勿频繁使用');
|
||||
});
|
||||
});
|
||||
//更新全部缓存按钮使用的时间限制：一小时内不允许重复使用
|
||||
|
|
@ -90,29 +90,19 @@
|
|||
if (lastBuild) {
|
||||
var lave = Date.now() - lastBuild;
|
||||
if (lave < 60 * 60 * 1000) {
|
||||
this.elm.$searchUpdate.prop('disabled', true).val('请勿高频使用');
|
||||
this.elm.$searchUpdate.prop('disabled', true).val('请勿频繁使用');
|
||||
}
|
||||
}
|
||||
//点击搜索
|
||||
this.elm.$search.on('click', function () {
|
||||
if (that.elm.$searchText.val() == '') {
|
||||
that.elm.$searchText.focus();
|
||||
return;
|
||||
}
|
||||
if (typeof win.Worker !== "undefined") {
|
||||
//开启一次新搜索时，如果存在搜索子进程，则干掉子进程
|
||||
if (that._worker) {
|
||||
that._worker.terminate();
|
||||
that._worker = null;
|
||||
that.elm.$resultMsg.hide();
|
||||
}
|
||||
that.elm.$resultMsg.show().text('创建搜索中...');
|
||||
that._search(that.elm.$searchText.val());
|
||||
} else {
|
||||
that.elm.$resultMsg.show().text('Sorry，您的浏览器不支持搜索！');
|
||||
that.elm.$search.prop('disabled', true);
|
||||
that._search();
|
||||
});
|
||||
this.elm.$searchText.on('keyup', function (e) {
|
||||
if (e.keyCode == 13) {
|
||||
that._search();
|
||||
}
|
||||
});
|
||||
//结果翻页
|
||||
this.elm.$resultMore.on('click', function () {
|
||||
that._nextResultPage();
|
||||
});
|
||||
|
|
@ -150,34 +140,54 @@
|
|||
};
|
||||
|
||||
//启动搜素
|
||||
Search.prototype._search = function (words) {
|
||||
Search.prototype._search = function () {
|
||||
var that = this;
|
||||
this._worker = new win.Worker('amWiki/js/amWiki.search.worker.js');
|
||||
this._worker.onmessage = function (event) {
|
||||
var data = event.data;
|
||||
//加载成功后发送文档数据
|
||||
if (data.type == 'loaded') {
|
||||
that._worker.postMessage({type: 'docs', docs: that._storage.getAllDocs()});
|
||||
if (this.elm.$searchText.val() == '') {
|
||||
this.elm.$searchText.focus();
|
||||
return;
|
||||
}
|
||||
var words = this.elm.$searchText.val();
|
||||
if (typeof win.Worker !== "undefined") {
|
||||
//开启一次新搜索时，如果存在搜索子进程，则干掉子进程
|
||||
if (this._worker) {
|
||||
this._worker.terminate();
|
||||
this._worker = null;
|
||||
this.elm.$resultMsg.hide();
|
||||
}
|
||||
//文档预处理完成后开始搜索
|
||||
else if (data.type == 'ready') {
|
||||
that.elm.$resultMsg.show().html('正在搜索，请稍后...');
|
||||
that._worker.postMessage({type: 'search', words: words});
|
||||
}
|
||||
//搜索结果排行
|
||||
else if (data.type == 'result') {
|
||||
that._data.result = data.result;
|
||||
that._showResultList();
|
||||
this.elm.$resultMsg.show().text('创建搜索中...');
|
||||
//创建子进程
|
||||
this._worker = new win.Worker('amWiki/js/amWiki.search.worker.js');
|
||||
//收到子进程搜素消息
|
||||
this._worker.onmessage = function (event) {
|
||||
var data = event.data;
|
||||
//加载成功后发送文档数据
|
||||
if (data.type == 'loaded') {
|
||||
that._worker.postMessage({type: 'docs', docs: that._storage.getAllDocs()});
|
||||
}
|
||||
//文档预处理完成后开始搜索
|
||||
else if (data.type == 'ready') {
|
||||
that.elm.$resultMsg.show().html('正在搜索，请稍后...');
|
||||
that._worker.postMessage({type: 'search', words: words});
|
||||
}
|
||||
//搜索结果排行
|
||||
else if (data.type == 'result') {
|
||||
that._data.result = data.result;
|
||||
that._showResultList();
|
||||
that._worker.terminate();
|
||||
that._worker = null;
|
||||
}
|
||||
};
|
||||
//子进程出错
|
||||
this._worker.onerror = function (e) {
|
||||
console.error(e);
|
||||
that._worker.terminate();
|
||||
that._worker = null;
|
||||
}
|
||||
};
|
||||
//出错
|
||||
this._worker.onerror = function (e) {
|
||||
console.error(e);
|
||||
that._worker.terminate();
|
||||
that._worker = null;
|
||||
};
|
||||
};
|
||||
} else {
|
||||
this.elm.$resultMsg.show().text('Sorry，您的浏览器不支持搜索！');
|
||||
this.elm.$search.prop('disabled', true);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//显示结果列表
|
||||
|
|
|
|||
|
|
@ -17,9 +17,11 @@
|
|||
//搜索处理结果
|
||||
this._processing = {};
|
||||
//设置
|
||||
this._setting = {
|
||||
this._data = {
|
||||
//标题命中得分
|
||||
titleScore: 100,
|
||||
//接口地址命中得分
|
||||
apiScore: 50,
|
||||
//单次内容命中得分
|
||||
textScore: 5
|
||||
}
|
||||
|
|
@ -35,6 +37,7 @@
|
|||
}
|
||||
};
|
||||
|
||||
//文档预处理
|
||||
Searcher.prototype._preDoc = function (doc) {
|
||||
doc.content = doc.content
|
||||
.replace(/^\s+|\s+$/g, '')
|
||||
|
|
@ -43,6 +46,12 @@
|
|||
doc.title = s1;
|
||||
return '';
|
||||
})
|
||||
//分离测试文档请求地址
|
||||
.replace(/([^#]#{3} *请求地址[\n\r]{1,4})([-\w:\/\.]+?)[\n\r]{1,}(#{3} *请求类型[\s\S]+?#{3} *请求参数)/,
|
||||
function (match, s1, s2, s3) {
|
||||
doc.api = s2;
|
||||
return s1 + s3;
|
||||
})
|
||||
//清除 Markdown 标题标记
|
||||
.replace(/#{1,6}(.*?)#{0,6}\s*[\r\n]/g, '$1')
|
||||
//清除 Markdown 强调斜体删除线标记
|
||||
|
|
@ -63,7 +72,7 @@
|
|||
.replace(/-{3,} *[\n\r]/g, '')
|
||||
//清除 Markdown 表格标记
|
||||
.replace(/(\|.*?[\n\r]{1,2}){3,}/g, function (match) {
|
||||
return match.replace(/\|.*?[\n\r]{1,2}/g, function(match){
|
||||
return match.replace(/\|.*?[\n\r]{1,2}/g, function (match) {
|
||||
if (match.indexOf('---') >= 0) {
|
||||
return '';
|
||||
} else {
|
||||
|
|
@ -99,14 +108,19 @@
|
|||
|
||||
//匹配搜索词与得分计算
|
||||
Searcher.prototype.matchWords = function (words) {
|
||||
//this._processing = {};
|
||||
for (var id in this._documents) {
|
||||
if (this._documents.hasOwnProperty(id)) {
|
||||
//标题命中
|
||||
if (this._documents[id].title && this._documents[id].title.indexOf(words) >= 0) {
|
||||
var title = this._documents[id].title.replace(words, '<mark>' + words + '</mark>');
|
||||
this._addPorcessing(id, 'title', title);
|
||||
this._addPorcessing(id, 'score', this._setting.titleScore);
|
||||
this._addPorcessing(id, 'score', this._data.titleScore);
|
||||
}
|
||||
//接口地址命中
|
||||
if (this._documents[id].api && this._documents[id].api.indexOf(words) >= 0) {
|
||||
var api = '<p class="p1"><em>接口</em>' + this._documents[id].api.replace(words, '<mark>' + words + '</mark>') + '</p>';
|
||||
this._addPorcessing(id, 'api', api);
|
||||
this._addPorcessing(id, 'score', this._data.apiScore);
|
||||
}
|
||||
//内容命中
|
||||
if (this._documents[id].content.indexOf(words) >= 0) {
|
||||
|
|
@ -120,7 +134,7 @@
|
|||
}
|
||||
content += '</p>';
|
||||
this._addPorcessing(id, 'content', content);
|
||||
this._addPorcessing(id, 'score', matches.length * this._setting.textScore);
|
||||
this._addPorcessing(id, 'score', matches.length * this._data.textScore);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -140,6 +154,9 @@
|
|||
if (typeof this._processing[id].title == 'undefined') {
|
||||
this._processing[id].title = this._documents[id].title ? this._documents[id].title : '';
|
||||
}
|
||||
if (typeof this._processing[id].api == 'undefined') {
|
||||
this._processing[id].api = '';
|
||||
}
|
||||
if (typeof this._processing[id].content == 'undefined') {
|
||||
this._processing[id].content = '<p>' + this._documents[id].content.substr(0, 45) + '...</p>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@
|
|||
<a href="?file={{path}}">
|
||||
<div class="content">
|
||||
<strong>{{title}}</strong>
|
||||
{{api}}
|
||||
{{content}}
|
||||
</div>
|
||||
<div class="bottom">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
'menu': [{
|
||||
'label': 'amWiki文库',
|
||||
'label': 'amWiki轻文库',
|
||||
'submenu': [{
|
||||
'label': '通过 “config.json” 创建新文库',
|
||||
'command': 'amWiki:create'
|
||||
|
|
@ -10,13 +10,12 @@
|
|||
'label': '提取h2、h3标题为页内目录',
|
||||
'command': 'amWiki:catalogue'
|
||||
}, {
|
||||
'label': '- 本地web服务器 -',
|
||||
'submenu': [{
|
||||
'label': '启动本地静态web服务器',
|
||||
'command': 'amWiki:runServer'
|
||||
}, {
|
||||
'label': '在浏览器打开当前文档',
|
||||
'command': 'amWiki:browser'
|
||||
}]
|
||||
'type': 'separator'
|
||||
}, {
|
||||
'label': '启动本地静态web服务器',
|
||||
'command': 'amWiki:runServer'
|
||||
}, {
|
||||
'label': '在浏览器打开当前文档',
|
||||
'command': 'amWiki:browser'
|
||||
}]
|
||||
}]
|
||||
Loading…
Reference in New Issue