From 8c17b70f3cbea830557b08ac2d29209061c837db Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Sat, 31 Oct 2020 12:05:28 +0800
Subject: [PATCH] fix: some bugs

---
 src/App.vue                      |  1 +
 src/components/ArtistsInLine.vue | 25 ++++++++++++++--------
 src/components/TrackList.vue     | 12 ++++++++++-
 src/components/TrackListItem.vue |  8 ++++---
 src/locale/lang/en.js            |  4 ++--
 src/locale/lang/zh-CN.js         |  4 ++--
 src/views/artist.vue             | 36 +++++++++++++++++++++++---------
 src/views/playlist.vue           |  2 +-
 8 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f177602..e3c1204 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -115,6 +115,7 @@ button {
 a {
   color: inherit;
   text-decoration: none;
+  cursor: pointer;
   &:hover {
     text-decoration: underline;
   }
diff --git a/src/components/ArtistsInLine.vue b/src/components/ArtistsInLine.vue
index 0d693f3..b834f47 100644
--- a/src/components/ArtistsInLine.vue
+++ b/src/components/ArtistsInLine.vue
@@ -1,8 +1,9 @@
 <template>
   <span class="artist-in-line">
-    <span v-for="(ar, index) in slicedArtists" :key="ar.id">
+    {{ computedPrefix }}
+    <span v-for="(ar, index) in filteredArtists" :key="ar.id">
       <router-link :to="`/artist/${ar.id}`">{{ ar.name }}</router-link>
-      <span v-if="index !== slicedArtists.length - 1">, </span>
+      <span v-if="index !== filteredArtists.length - 1">, </span>
     </span>
   </span>
 </template>
@@ -15,16 +16,22 @@ export default {
       type: Array,
       required: true,
     },
-    showFirstArtist: {
-      type: Boolean,
-      default: true,
+    exclude: {
+      type: String,
+      default: "",
+    },
+    prefix: {
+      type: String,
+      default: "",
     },
   },
   computed: {
-    slicedArtists() {
-      return this.showFirstArtist
-        ? this.artists
-        : this.artists.slice(1, this.artists.length);
+    filteredArtists() {
+      return this.artists.filter((a) => a.name !== this.exclude);
+    },
+    computedPrefix() {
+      if (this.filteredArtists.length !== 0) return this.prefix;
+      else return "";
     },
   },
 };
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
index a783cf3..cfa56ae 100644
--- a/src/components/TrackList.vue
+++ b/src/components/TrackList.vue
@@ -2,7 +2,7 @@
   <div class="track-list" :style="listStyles">
     <ContextMenu ref="menu">
       <div class="item-info">
-        <img :src="rightClickedTrack.al.picUrl | resizeImage(512)" />
+        <img :src="rightClickedTrack.al.picUrl | resizeImage(128)" />
         <div class="info">
           <div class="title">{{ rightClickedTrack.name }}</div>
           <div class="subtitle">{{ rightClickedTrack.ar[0].name }}</div>
@@ -68,6 +68,16 @@ export default {
       type: String,
       default: "default",
     },
+    albumObject: {
+      type: Object,
+      default: () => {
+        return {
+          artist: {
+            name: "",
+          },
+        };
+      },
+    },
   },
   data() {
     return {
diff --git a/src/components/TrackListItem.vue b/src/components/TrackListItem.vue
index 7f40e95..1a6ecb3 100644
--- a/src/components/TrackListItem.vue
+++ b/src/components/TrackListItem.vue
@@ -34,9 +34,11 @@
       <div class="container">
         <div class="title">
           {{ track.name }}
-          <span class="featured" v-if="isAlbum && track.ar.length > 1">
-            -
-            <ArtistsInLine :artists="track.ar" :showFirstArtist="false"
+          <span class="featured" v-if="isAlbum">
+            <ArtistsInLine
+              :artists="track.ar"
+              :exclude="this.$parent.albumObject.artist.name"
+              prefix="-"
           /></span>
           <span v-if="isAlbum && track.mark === 1318912" class="explicit-symbol"
             ><ExplicitSymbol
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index e11fd2c..a56c357 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -19,7 +19,7 @@ export default {
   library: {
     sLibrary: "'s Library",
     likedSongs: "Liked Songs",
-    sLikedSongs: "'s LikedSongs",
+    sLikedSongs: "'s Liked Songs",
   },
   explore: {
     explore: "Explore",
@@ -91,7 +91,7 @@ export default {
     artist: "Artists",
     album: "Albums",
     song: "Songs",
-    mv: "MVs",
+    mv: "Music Videos",
     playlist: "Playlists",
     noResult: "No Results",
     searchFor: "Search for",
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index b3331a5..92e86a8 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -3,7 +3,7 @@ export default {
   nav: {
     home: "首页",
     explore: "发现",
-    library: "资料库",
+    library: "音乐库",
     search: "搜索",
   },
   home: {
@@ -14,7 +14,7 @@ export default {
     charts: "排行榜",
   },
   library: {
-    sLibrary: "的资料库",
+    sLibrary: "的音乐库",
     likedSongs: "我喜欢的歌",
     sLikedSongs: "喜欢的歌",
   },
diff --git a/src/views/artist.vue b/src/views/artist.vue
index 3bcb39f..4d3dfd6 100644
--- a/src/views/artist.vue
+++ b/src/views/artist.vue
@@ -8,9 +8,17 @@
         <div class="name">{{ artist.name }}</div>
         <div class="artist">{{ $t("artist.artist") }}</div>
         <div class="statistics">
-          {{ artist.musicSize }} {{ $t("common.songs") }} ·
-          {{ artist.albumSize }} {{ $t("artist.withAlbums") }} ·
-          {{ artist.mvSize }} {{ $t("artist.videos") }}
+          <a @click="scrollTo('popularTracks')"
+            >{{ artist.musicSize }} {{ $t("common.songs") }}</a
+          >
+          ·
+          <a @click="scrollTo('seeMore', 'start')"
+            >{{ artist.albumSize }} {{ $t("artist.withAlbums") }}</a
+          >
+          ·
+          <a @click="scrollTo('mvs')"
+            >{{ artist.mvSize }} {{ $t("artist.videos") }}</a
+          >
         </div>
         <div class="buttons">
           <ButtonTwoTone @click.native="playPopularSongs()" :iconClass="`play`">
@@ -57,21 +65,21 @@
         <div></div>
       </div>
     </div>
-    <div class="popular-tracks">
+    <div class="popular-tracks" id="popularTracks">
       <div class="section-title">{{ $t("artist.popularSongs") }}</div>
       <TrackList
         :tracks="popularTracks.slice(0, showMorePopTracks ? 24 : 12)"
         :type="'tracklist'"
       />
 
-      <div class="show-more">
+      <div class="show-more" id="seeMore">
         <button @click="showMorePopTracks = !showMorePopTracks">
           <span v-show="!showMorePopTracks">{{ $t("artist.showMore") }}</span>
           <span v-show="showMorePopTracks">{{ $t("artist.showLess") }}</span>
         </button>
       </div>
     </div>
-    <div class="albums" v-if="albums.length !== 0">
+    <div class="albums" id="albums" v-if="albums.length !== 0">
       <div class="section-title">{{ $t("artist.albums") }}</div>
       <CoverRow
         :type="'album'"
@@ -80,10 +88,10 @@
         :showPlayButton="true"
       />
     </div>
-    <div class="mvs" v-if="mvs.length !== 0">
+    <div class="mvs" id="mvs" v-if="mvs.length !== 0">
       <div class="section-title"
         >MVs
-        <router-link :to="`/artist/${this.artist.id}/mv`">{{
+        <router-link v-show="hasMoreMV" :to="`/artist/${this.artist.id}/mv`">{{
           $t("home.seeMore")
         }}</router-link>
       </div>
@@ -140,6 +148,7 @@ export default {
       },
       showMorePopTracks: false,
       mvs: [],
+      hasMoreMV: false,
     };
   },
   computed: {
@@ -170,6 +179,7 @@ export default {
       });
       artistMv({ id }).then((data) => {
         this.mvs = data.mvs;
+        this.hasMoreMV = data.hasMore;
       });
     },
     goToAlbum(id) {
@@ -190,6 +200,12 @@ export default {
         if (data.code === 200) this.artist.followed = !this.artist.followed;
       });
     },
+    scrollTo(div, block = "center") {
+      document.getElementById(div).scrollIntoView({
+        behavior: "smooth",
+        block,
+      });
+    },
   },
   created() {
     this.loadData(this.$route.params.id);
@@ -216,7 +232,7 @@ export default {
 .artist-info {
   display: flex;
   align-items: center;
-  margin-bottom: 72px;
+  margin-bottom: 26px;
   color: var(--color-text);
   img {
     height: 192px;
@@ -260,7 +276,7 @@ export default {
   opacity: 0.88;
   color: var(--color-text);
   margin-bottom: 16px;
-  margin-top: 46px;
+  padding-top: 46px;
 
   display: flex;
   justify-content: space-between;
diff --git a/src/views/playlist.vue b/src/views/playlist.vue
index 831b376..4ec7500 100644
--- a/src/views/playlist.vue
+++ b/src/views/playlist.vue
@@ -121,7 +121,7 @@ export default {
   },
   created() {
     if (this.$route.name === "likedSongs") {
-      this.loadData(this.data.user.likedSongPlaylistID);
+      this.loadData(this.data.likedSongPlaylistID);
     } else {
       this.loadData(this.$route.params.id);
     }