diff --git a/src/assets/js/config.js b/src/assets/js/config.js index 96950c0..3c1f7aa 100644 --- a/src/assets/js/config.js +++ b/src/assets/js/config.js @@ -160,8 +160,9 @@ let config = { fontSize: 16, showSiteTitle: true, sideMenuCollapse: true, - searchEngine: '百度' - } + searchEngine: '百度', + searchSuggestion: false, + }, }; export default config; diff --git a/src/views/Home.vue b/src/views/Home.vue index 44e65dc..1f77121 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -44,7 +44,7 @@
- @@ -149,6 +160,7 @@
+ 0) + ); + + return isShow; + }, + + }, watch: { + 'searchEngine.keyword': { + handler(value) { + if (!this.config.searchSuggestion) { + return; + } + clearInterval(this.searchEngine.debounce); + this.searchEngine.debounce = setTimeout(() => { + this.searchEngineGS(value); + }, 500); + } + }, 'searchLink.keyword': { handler(value) { clearTimeout(this.searchLink.debounce); - this.searchLink.debounce = setTimeout(() => { this.$refs.linkTree.filter(value); }, 500); @@ -335,13 +376,54 @@ export default { }, /** - * 搜索引擎 + * 搜索引擎(获取关键词建议) + * + * @param {string} keyword 当前输入的关键词 + */ + searchEngineGS(keyword) { + var se = this.searchEngine; + var reqURL = `https://www.baidu.com/sugrec?json=1&prod=pc&wd=${keyword}&cb=cbSES`; + + se.suggestions = []; + + if (keyword === '') { + return; + } + + var cbFunc = (data) => { + var word = (data.q || ''); // 当前关键词 + var result = (data.g || []); // 建议 + var id = 0; // ID + + if (result.length === 0) { + return; + } + + result.forEach((item) => { + id += 1; + se.suggestions.push({ + id, + label: item.q, + highlight: word + }); + }); + }; + + this.utils.jsonp({ + url: reqURL, + cbName: 'cbSES', + cbFunc + }); + }, + + /** + * 搜索引擎(搜索) */ searchEngineSubmit() { var vm = this; - var search = this.searchEngine; - var selected = this.config.searchEngine; - var keyword = search.keyword; + var se = this.searchEngine; + var selectedSE = this.config.searchEngine; + var keyword = se.keyword; var url = ''; if (keyword === '') { @@ -350,11 +432,11 @@ export default { keyword = window.encodeURIComponent(keyword); } - for (let category in search.list) { - let list = search.list[category].list; + for (let category in se.list) { + let list = se.list[category].list; for (let index in list) { - if (list[index].name === selected) { + if (list[index].name === selectedSE) { url = list[index].url.replace(/%keyword%/, keyword); break; } @@ -365,7 +447,7 @@ export default { }, /** - * 搜索链接 + * 搜索链接(搜索) * * @param {string} value 关键词 * @param {object} data 每一项链接的信息 @@ -447,6 +529,9 @@ export default { flex-direction: column; .search-bar { + @barHeight: 2.8rem; + @barRadius: 0.3rem; + display: flex; align-items: center; position: sticky; @@ -454,10 +539,13 @@ export default { z-index: 100; width: 100%; max-width: 40rem; - height: 2.8rem; - border-radius: 0.25rem; + height: @barHeight; + border-radius: @barRadius; background-color: #FFF; - overflow: hidden; + + &.suggest { + border-radius: @barRadius @barRadius 0 0; + } .input { flex-grow: 1; @@ -490,6 +578,7 @@ export default { } .btn-search { + border-radius: 0 @barRadius @barRadius 0; color: @colorPrimary; transition: background @transitionTime, color @transitionTime; @@ -498,6 +587,43 @@ export default { color: #FFF; } } + &.suggest .btn-search { + border-bottom-right-radius: 0; + } + + .suggestion { + display: block; + visibility: hidden; + position: absolute; + top: @barHeight; + width: 100%; + border-top: 0.1rem solid #EEE; + border-radius: 0 0 @barRadius @barRadius; + background-color: #FFF; + overflow: hidden; + // 延迟隐藏 + transition: visibility 0.2s; + + ul { + padding: 0.5rem 0; + list-style: none; + line-height: 1.5rem; + font-size: 0.9rem; + color: #000; + } + + li { + padding: 0.5rem 1rem; + cursor: pointer; + + &:hover { + background-color: @colorWhite; + } + } + } + &.suggest .suggestion { + visibility: visible; + } } .search-type { diff --git a/src/views/Settings.vue b/src/views/Settings.vue index 9c2d20f..a867ba1 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -2,13 +2,14 @@
- + @@ -18,19 +19,20 @@ - + + + + + 清除设置 - - -