a1300399510@qq.com 提交于 2023/04/06 -14:20:02

src/App.vue

@@ -11,7 +11,10 @@ export default {
 	data() {
 		return {
 		}
-	}
+	},
+	mounted() {
+		this.$store.dispatch('fetchHistoricalSearch')
+	},
 }
 </script>
 

src/components/SearchBox.vue

@@ -11,7 +11,8 @@
 			<div class="search-input flexacenter">
 				<div class="form flexacenter">
 					<img class="search-icon" src="@/assets/img/headerNav/search.png">
-					<input class="flex1" ref="searchInput" v-model="searchText" type="text" placeholder="请输入搜索关键词" />
+					<input class="flex1" ref="searchInput" v-model="searchText" type="text" placeholder="请输入搜索关键词"
+						@keydown.enter="toSearchResult(searchText)" />
 					<img v-if="searchText" @click.stop="clearText()" class="clear-text" src="@/assets/img/icon/clear.png">
 				</div>
 
@@ -45,13 +46,14 @@ export default {
 			searchWinShow: false,//显示搜索弹窗
 			searchText: '',
 			showClear: false, //显示清除按钮
-			historicalSearch: [], // 历史搜索
+			historicalSearch: this.$store.state.historicalSearch, // 历史搜索
 		}
 	},
 	props: ["issearch", "hotSearchkeywords"],
 
 	watch: {
 		historicalSearch(val, oldval) {
+			if (val.length > 10) this.historicalSearch.slice(0, 10)
 			localStorage.setItem('historicalSearch', JSON.stringify(val));
 		}
 	},
@@ -83,7 +85,12 @@ export default {
 
 		// 跳转搜索结果
 		toSearchResult(kw) {
+
+			if (!kw) return
 			this.historicalSearch.push(kw)
+
+			if (!this.historicalSearch.includes(kw)) this.historicalSearch.unshift(kw)
+
 			this.$router.push(`/searchResult?kw=${kw}`)
 		},
 	},

src/store/index.js

@@ -5,12 +5,20 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    historicalSearch: []
   },
   getters: {
   },
   mutations: {
+    setHistoricalSearch(state, payload) {
+      state.historicalSearch = payload
+    }
   },
   actions: {
+    fetchHistoricalSearch({ commit }) {
+      let historicalSearch = JSON.parse(localStorage.getItem('historicalSearch')) || []
+      commit('setHistoricalSearch', historicalSearch)
+    }
   },
   modules: {
   }

src/views/search/searchResult/SearchResult.vue

@@ -28,7 +28,7 @@
 				<div class="result-info flexacenter flex1">
 					<div class="user-info flexacenter">
 						<img class="icon-head" :src="item.avatar">
-						<div class="user-name">{{ item.author }}</div>
+						<div class="user-name" v-html="item.author"></div>
 					</div>
 					<div class="item-data flexacenter">
 						<div class="item-data-item flexacenter">
@@ -42,7 +42,6 @@
 					</div>
 				</div>
 
-
 				<!-- 精华 -->
 				<div class="rightTop" v-if="item.digest > 0">
 					<img class="rightTop-img" src="@/assets/img/icon/topRight .png">