✨ feat: 优化搜索

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);

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;

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);