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 @@
+
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 @@
-
+
+
+
+
+
清除设置
-
-
-