From 791121ae06b3955c0f20d223dbf4e775911b6f2a Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Thu, 12 Sep 2024 17:28:51 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BC=98=E5=8C=96=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/SearchBar.vue | 11 ++++---
 src/store/index.ts                  |  4 +++
 src/views/search/index.vue          | 45 +++++++++++++----------------
 3 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/layout/components/SearchBar.vue b/src/layout/components/SearchBar.vue
index 0895c84..c9d1e18 100644
--- a/src/layout/components/SearchBar.vue
+++ b/src/layout/components/SearchBar.vue
@@ -14,7 +14,7 @@
         </template>
         <template #suffix>
           <div class="w-20 px-3 flex justify-between items-center">
-            <div>{{ searchTypeOptions.find((item) => item.key === searchType)?.label }}</div>
+            <div>{{ searchTypeOptions.find((item) => item.key === store.state.searchType)?.label }}</div>
             <n-dropdown trigger="hover" :options="searchTypeOptions" @select="selectSearchType">
               <i class="iconfont icon-xiasanjiaoxing"></i>
             </n-dropdown>
@@ -90,7 +90,6 @@ onMounted(() => {
 
 // 搜索词
 const searchValue = ref('');
-const searchType = ref(1);
 const search = () => {
   const { value } = searchValue;
   if (value === '') {
@@ -98,17 +97,21 @@ const search = () => {
     return;
   }
 
+  if (router.currentRoute.value.path === '/search') {
+    store.state.searchValue = value;
+    return;
+  }
+
   router.push({
     path: '/search',
     query: {
       keyword: value,
-      type: searchType.value,
     },
   });
 };
 
 const selectSearchType = (key: number) => {
-  searchType.value = key;
+  store.state.searchType = key;
 };
 
 const searchTypeOptions = ref(SEARCH_TYPES);
diff --git a/src/store/index.ts b/src/store/index.ts
index 5282e71..99ba99d 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -18,6 +18,8 @@ interface State {
   setData: any;
   lyric: any;
   isMobile: boolean;
+  searchValue: string;
+  searchType: number;
 }
 
 const state: State = {
@@ -32,6 +34,8 @@ const state: State = {
   setData: null,
   lyric: {},
   isMobile: false,
+  searchValue: '',
+  searchType: 1,
 };
 
 const windowData = window as any;
diff --git a/src/views/search/index.vue b/src/views/search/index.vue
index e66e2c7..1bde24d 100644
--- a/src/views/search/index.vue
+++ b/src/views/search/index.vue
@@ -13,7 +13,7 @@
             :class="setAnimationClass('animate__bounceInLeft')"
             :style="setAnimationDelay(index, 10)"
             class="hot-search-item"
-            @click.stop="clickHotKeyword(item.searchWord)"
+            @click.stop="loadSearch(item.searchWord, 1)"
           >
             <span class="hot-search-item-count" :class="{ 'hot-search-item-count-3': index < 3 }">{{ index + 1 }}</span>
             {{ item.searchWord }}
@@ -60,7 +60,7 @@
 <script lang="ts" setup>
 import { useDateFormat } from '@vueuse/core';
 import { onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 
 import { getHotSearch } from '@/api/home';
@@ -74,9 +74,10 @@ defineOptions({
 });
 
 const route = useRoute();
-const router = useRouter();
+const store = useStore();
+
 const searchDetail = ref<any>();
-const searchType = ref(Number(route.query.type) || 1);
+const searchType = computed(() => store.state.searchType as number);
 const searchDetailLoading = ref(false);
 
 // 热搜列表
@@ -88,29 +89,26 @@ const loadHotSearch = async () => {
 
 onMounted(() => {
   loadHotSearch();
+  loadSearch(route.query.keyword);
 });
 
 const hotKeyword = ref(route.query.keyword || '搜索列表');
-const clickHotKeyword = (keyword: string) => {
-  hotKeyword.value = keyword;
-  router.push({
-    path: '/search',
-    query: {
-      keyword,
-      type: 1,
-    },
-  });
-  // isHotSearchList.value = false;
-};
+
+watch(
+  () => store.state.searchValue,
+  (value) => {
+    loadSearch(value);
+  },
+);
 
 const dateFormat = (time: any) => useDateFormat(time, 'YYYY.MM.DD').value;
-const loadSearch = async (keywords: any) => {
+const loadSearch = async (keywords: any, type: any = null) => {
   hotKeyword.value = keywords;
   searchDetail.value = undefined;
   if (!keywords) return;
 
   searchDetailLoading.value = true;
-  const { data } = await getSearch({ keywords, type: searchType.value });
+  const { data } = await getSearch({ keywords, type: type || searchType.value });
 
   const songs = data.result.songs || [];
   const albums = data.result.albums || [];
@@ -148,18 +146,15 @@ const loadSearch = async (keywords: any) => {
   searchDetailLoading.value = false;
 };
 
-loadSearch(route.query.keyword);
-
 watch(
-  () => route.query,
-  async (newParams) => {
-    searchType.value = Number(newParams.type || 1);
-    loadSearch(newParams.keyword);
+  () => route.path,
+  async (path) => {
+    if (path === '/search') {
+      store.state.searchValue = route.query.keyword;
+    }
   },
 );
 
-const store = useStore();
-
 const handlePlay = () => {
   const tracks = searchDetail.value?.songs || [];
   store.commit('setPlayList', tracks);