fix: add some translations (#36)

* feat: add i18n

* refactor: move songs to common

src/locale/lang/en.js

@@ -31,7 +31,10 @@ export default {
     showMore: "SHOW MORE",
     showLess: "SHOW LESS",
     EPsSingles: "EPs & Singles",
-    albums: "Albums"
+    albums: "Albums",
+    withAlbums: "Albums",
+    artist: "Artist",
+    videos: "Music Videos"
   },
   album: {
     released: "Released"
@@ -88,6 +91,10 @@ export default {
     song: "Songs",
     mv: "MVs",
     playlist: "Playlists",
-    noResult: "No Results"
+    noResult: "No Results",
+    searchFor: "Search for"
+  },
+  common: {
+    songs: "Songs",
   }
 };

src/locale/lang/zh-CN.js

@@ -31,7 +31,10 @@ export default {
     showMore: "显示更多",
     showLess: "收起",
     EPsSingles: "EP和单曲",
-    albums: "专辑"
+    albums: "专辑",
+    withAlbums: "张专辑",
+    artist: "歌手",
+    videos: "个视频"
   },
   album: {
     released: "发行于"
@@ -93,6 +96,10 @@ export default {
     song: "歌曲",
     mv: "视频",
     playlist: "歌单",
-    noResult: "暂无结果"
+    noResult: "暂无结果",
+    searchFor: "搜索"
+  },
+  common: {
+    songs: "首歌",
   }
 };

src/utils/filters.js

@@ -22,7 +22,9 @@ Vue.filter("formatTime", (Milliseconds, format = "HH:MM:SS") => {
       ? `${hours}:${mins.padStart(2, "0")}:${seconds}`
       : `${mins}:${seconds}`;
   } else if (format === "Human") {
-    return hours !== "0" ? `${hours} hr ${mins} min` : `${mins} min`;
+    const hoursUnit = locale.locale === "zh-CN" ? "小时" : "hr";
+    const minitesUnit = locale.locale === "zh-CN" ? "分钟" : "min";
+    return hours !== "0" ? `${hours} ${hoursUnit} ${mins} ${minitesUnit}` : `${mins} ${minitesUnit}`;
   }
 });
 

src/views/album.vue

@@ -27,7 +27,7 @@
           <span :title="album.publishTime | formatDate">{{
             new Date(album.publishTime).getFullYear()
           }}</span>
-          <span> · {{ album.size }} songs</span>,
+          <span> · {{ album.size }} {{ $t("common.songs") }}</span>,
           {{ albumTime | formatTime("Human") }}
         </div>
         <div class="description" @click="showFullDescription = true">

src/views/artist.vue

@@ -6,10 +6,11 @@
       </div>
       <div>
         <div class="name">{{ artist.name }}</div>
-        <div class="artist">Artist</div>
+        <div class="artist">{{ $t("artist.artist") }}</div>
         <div class="statistics">
-          {{ artist.musicSize }} Songs · {{ artist.albumSize }} Albums ·
-          {{ artist.mvSize }} Music Videos
+          {{ artist.musicSize }} {{ $t("common.songs") }} · 
+          {{ artist.albumSize }} {{ $t("artist.withAlbums") }} ·
+          {{ artist.mvSize }} {{ $t("artist.videos") }}
         </div>
         <div class="buttons">
           <ButtonTwoTone @click.native="playPopularSongs()" :iconClass="`play`">
@@ -45,7 +46,7 @@
             </div>
             <div class="type">
               {{ latestRelease.type | formatAlbumType(latestRelease) }} ·
-              {{ latestRelease.size }} Songs
+              {{ latestRelease.size }} {{ $t("common.songs") }}
             </div>
           </div>
         </div>

src/views/library.vue

@@ -21,7 +21,7 @@
           <div class="titles">
             <div class="title">{{ $t("library.likedSongs") }}</div>
             <div class="sub-title">
-              {{ likedSongsPlaylist.trackCount }} songs
+              {{ likedSongsPlaylist.trackCount }} {{ $t("common.songs") }}
             </div>
           </div>
           <button @click.stop="playLikedSongs">

src/views/playlist.vue

@@ -37,7 +37,7 @@
         <div class="date-and-count">
           {{ $t("playlist.updatedAt") }}
           {{ playlist.updateTime | formatDate }} ·
-          {{ playlist.trackCount }} Songs
+          {{ playlist.trackCount }} {{ $t("common.songs") }}
         </div>
         <div class="description" @click="showFullDescription = true">
           {{ playlist.description }}

src/views/search.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="search" v-show="show">
-    <h1><span>Search for</span> "{{ keywords }}"</h1>
+    <h1>
+      <span>{{ $t("search.searchFor") }}</span> "{{ keywords }}"
+    </h1>
     <div class="result" v-if="isExistResult">
       <div class="row">
         <div class="artists" v-if="result.hasOwnProperty('artist')">