search国际化以及keywords和result的验证 (#32)

* feat: add i18n of modal

* feat: add i18n of search

* fix: checkout keywords

* fix: checkout result

Co-authored-by: wanghaobb <wanghaobb@seeyon.com>

src/components/Navbar.vue

@@ -70,6 +70,7 @@ export default {
       else this.$router.go(1);
     },
     goToSearchPage() {
+      if(!this.keywords) return;
       this.$router.push({
         name: "search",
         query: { keywords: this.keywords },

src/locale/lang/en.js

@@ -82,5 +82,13 @@ export default {
   },
   modal: {
     close: "Close"
+  },
+  search: {
+    artist: "Artists",
+    album: "Albums",
+    song: "Songs",
+    mv: "MVs",
+    playlist: "Playlists",
+    noResult: "No Results"
   }
 };

src/locale/lang/zh-CN.js

@@ -87,5 +87,13 @@ export default {
   },
   modal: {
     close: "关闭"
+  },
+  search: {
+    artist: "歌手",
+    album: "专辑",
+    song: "歌曲",
+    mv: "视频",
+    playlist: "歌单",
+    noResult: "暂无结果"
   }
 };

src/views/search.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="search" v-show="show">
     <h1><span>Search for</span> "{{ keywords }}"</h1>
-    <div class="result" v-if="result !== undefined">
+    <div class="result" v-if="isExistResult">
       <div class="row">
         <div class="artists" v-if="result.hasOwnProperty('artist')">
-          <div class="section-title">Artists</div>
+          <div class="section-title">{{ $t("search.artist") }}</div>
           <div class="artists-list">
             <div
               class="artist"
@@ -32,7 +32,7 @@
           </div>
         </div>
         <div class="albums" v-if="result.hasOwnProperty('album')">
-          <div class="section-title">Albums</div>
+          <div class="section-title">{{ $t("search.album") }}</div>
           <div class="albums-list">
             <div
               class="album"
@@ -69,17 +69,17 @@
       </div>
 
       <div class="tracks" v-if="result.hasOwnProperty('song')">
-        <div class="section-title">Songs</div>
+        <div class="section-title">{{ $t("search.song") }}</div>
         <TrackList :tracks="tracks" :type="'tracklist'" />
       </div>
 
       <div class="mvs" v-if="mvs !== null && mvs.length > 0">
-        <div class="section-title">MVs</div>
+        <div class="section-title">{{ $t("search.mv") }}</div>
         <MvRow class="mv-row" :mvs="mvs.slice(0, 5)" />
       </div>
 
       <div class="playlists" v-if="result.hasOwnProperty('playList')">
-        <div class="section-title">{{ $t("playlist.playlist") }}</div>
+        <div class="section-title">{{ $t("search.playlist") }}</div>
         <div class="albums-list">
           <div
             class="album"
@@ -110,7 +110,7 @@
       </div>
     </div>
     <div class="no-results" v-else>
-      No Results
+      {{ $t("search.noResult") }}
     </div>
   </div>
 </template>
@@ -150,6 +150,9 @@ export default {
     tracks() {
       let tracks = this.result.song.songs.slice(0, 12);
       return tracks;
+    },
+    isExistResult() {
+      return Object.keys(this.result).length;
     } 
   },
   methods: {