fix: search issues

src/api/others.js

@@ -22,7 +22,7 @@ export function search(params) {
     method: "get",
     params,
   }).then((data) => {
-    if (data.result.song !== undefined)
+    if (data.result?.song !== undefined)
       data.result.song.songs = mapTrackPlayableStatus(data.result.song.songs);
     return data;
   });

src/components/Navbar.vue

@@ -38,7 +38,8 @@
               ref="searchInput"
               :placeholder="inputFocus ? '' : $t('nav.search')"
               v-model="keywords"
-              @focus="focusSearchBox"
+              @keydown.enter="doSearch"
+              @focus="inputFocus = true"
               @blur="inputFocus = false"
             />
           </div>
@@ -61,32 +62,29 @@ export default {
     return {
       inputFocus: false,
       langs: ["zh-CN", "en"],
+      keywords: "",
     };
   },
   computed: {
-    ...mapState(["settings", "search"]),
-    keywords: {
-      get() {
-        return this.search.keywords;
-      },
-      set(value) {
-        this.$store.commit("updateSearch", { key: "keywords", value });
-      },
-    },
+    ...mapState(["settings"]),
   },
   methods: {
     go(where) {
       if (where === "back") this.$router.go(-1);
       else this.$router.go(1);
     },
-    focusSearchBox() {
-      this.inputFocus = true;
-      if (this.$route.name !== "search") {
-        this.$router.push({
-          name: "search",
-          params: { keywords: this.keywords },
-        });
+    doSearch() {
+      if (!this.keywords) return;
+      if (
+        this.$route.name === "search" &&
+        this.$route.params.keywords === this.keywords
+      ) {
+        return;
       }
+      this.$router.push({
+        name: "search",
+        params: { keywords: this.keywords },
+      });
     },
   },
 };

src/store/mutations.js

@@ -36,7 +36,4 @@ export default {
   toggleLyrics(state) {
     state.showLyrics = !state.showLyrics;
   },
-  updateSearch(state, { key, value }) {
-    state.search[key] = value;
-  },
 };

src/store/state.js

@@ -34,9 +34,6 @@ export default {
       afterCreateAddTrackID: 0,
     },
   },
-  search: {
-    keywords: "",
-  },
   player: JSON.parse(localStorage.getItem("player")),
   settings: JSON.parse(localStorage.getItem("settings")),
   data: JSON.parse(localStorage.getItem("data")),

src/views/search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search">
+  <div class="search" v-show="show">
     <div class="row" v-show="artists.length > 0 || albums.length > 0">
       <div class="artists">
         <div class="section-title" v-show="artists.length > 0"
@@ -85,6 +85,7 @@
 <script>
 import { getTrackDetail } from "@/api/track";
 import { search } from "@/api/others";
+import NProgress from "nprogress";
 
 import TrackList from "@/components/TrackList.vue";
 import MvRow from "@/components/MvRow.vue";
@@ -99,6 +100,7 @@ export default {
   },
   data() {
     return {
+      show: false,
       tracks: [],
       artists: [],
       albums: [],
@@ -108,7 +110,7 @@ export default {
   },
   computed: {
     keywords() {
-      return this.$store.state.search.keywords;
+      return this.$route.params.keywords ?? "";
     },
     haveResult() {
       return (
@@ -135,20 +137,17 @@ export default {
         artists: 100,
         playlists: 1000,
       };
-      const keywords = this.keywords;
-      return search({ keywords, type: typeTable[type], limit: 16 }).then(
-        (result) => {
-          return { result: result.result, type };
-        }
-      );
+      return search({
+        keywords: this.keywords,
+        type: typeTable[type],
+        limit: 16,
+      }).then((result) => {
+        return { result: result.result, type };
+      });
     },
     getData() {
-      const requests = [
-        this.search("artists"),
-        this.search("albums"),
-        this.search("tracks"),
-      ];
-      const requests2 = [this.search("musicVideos"), this.search("playlists")];
+      NProgress.start();
+      this.show = false;
 
       const requestAll = (requests) => {
         const keywords = this.keywords;
@@ -156,6 +155,7 @@ export default {
           if (keywords != this.keywords) return;
           results.map((result) => {
             const searchType = result.type;
+            if (result.result === undefined) return;
             result = result.result;
             switch (searchType) {
               case "all":
@@ -179,9 +179,18 @@ export default {
                 break;
             }
           });
+          NProgress.done();
+          this.show = true;
         });
       };
 
+      const requests = [
+        this.search("artists"),
+        this.search("albums"),
+        this.search("tracks"),
+      ];
+      const requests2 = [this.search("musicVideos"), this.search("playlists")];
+
       requestAll(requests);
       requestAll(requests2);
     },
@@ -194,19 +203,12 @@ export default {
     },
   },
   created() {
-    if (this.keywords.length === 0) {
-      this.$store.commit("updateSearch", {
-        key: "keywords",
-        value: this.$route.params.keywords,
-      });
-    }
+    this.getData();
   },
   watch: {
-    keywords: function () {
+    keywords: function (newKeywords) {
+      if (newKeywords.length === 0) return;
       this.getData();
-      this.$router.replace({
-        params: { keywords: this.keywords },
-      });
     },
   },
 };

src/views/searchType.vue

@@ -7,7 +7,7 @@
     </h1>
 
     <div v-if="type === 'artists'">
-      <CoverRow type="artist" :items="result" columnNumber="6" />
+      <CoverRow type="artist" :items="result" :columnNumber="6" />
     </div>
     <div v-if="type === 'albums'">
       <CoverRow
@@ -63,7 +63,7 @@ export default {
   },
   computed: {
     keywords() {
-      return this.$store.state.search.keywords;
+      return this.$route.params.keywords;
     },
     type() {
       return camelCase(this.$route.params.type);
@@ -131,12 +131,6 @@ export default {
     },
   },
   created() {
-    if (this.keywords.length === 0) {
-      this.$store.commit("updateSearch", {
-        key: "keywords",
-        value: this.$route.params.keywords,
-      });
-    }
     this.fetchData();
   },
 };