feat: add like albums & follow artists function

src/components/ButtonTwoTone.vue

@@ -49,10 +49,13 @@ export default {
 
 <style lang="scss" scoped>
 button {
+  height: 40px;
+  min-width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
+  line-height: 18px;
   font-weight: 600;
   background-color: var(--color-primary-bg);
   color: var(--color-primary);

src/components/Cover.vue

@@ -76,8 +76,9 @@ export default {
   created() {
     this.shadowStyle = {
       height: `${this.size}px`,
-      width: `${this.size}px`,
+      width: `${~~(this.size * 0.96)}px`,
       top: `${this.shadowMargin}px`,
+      right: `${~~(this.size * 0.02)}px`,
       borderRadius: `${this.radius}px`,
     };
     this.playButtonStyle = {
@@ -165,6 +166,13 @@ export default {
   height: 208px;
   transform: scale(0.98);
 }
+[data-theme="dark"] {
+  .shadow {
+    filter: blur(16px) brightness(68%);
+    transform: scale(0.96);
+  }
+}
+
 .play-button {
   opacity: 0;
   display: flex;

src/components/CoverRow.vue

@@ -95,8 +95,12 @@ export default {
       if (this.subText === "creator") return "by " + item.creator.nickname;
       if (this.subText === "releaseYear")
         return new Date(item.publishTime).getFullYear();
-      if (this.subText === "artist")
-        return `<a href="/#/artist/${item.artist.id}">${item.artist.name}</a>`;
+      if (this.subText === "artist") {
+        if (item.artist !== undefined)
+          return `<a href="/#/artist/${item.artist.id}">${item.artist.name}</a>`;
+        if (item.artists !== undefined)
+          return `<a href="/#/artist/${item.artists[0].id}">${item.artists[0].name}</a>`;
+      }
       if (this.subText === "albumType+releaseYear") {
         let albumType = item.type;
         if (item.type === "EP/Single") {

src/components/MvRow.vue

@@ -1,34 +1,27 @@
 <template>
   <div class="mv-row">
-    <div class="mv" v-for="mv in mvs" :key="mv.id">
+    <div class="mv" v-for="mv in mvs" :key="getID(mv)">
       <div class="cover-container">
         <img
           class="cover"
           :src="getUrl(mv)"
-          @mouseover="hoverVideoID = mv.id"
+          @mouseover="hoverVideoID = getID(mv)"
           @mouseleave="hoverVideoID = 0"
-          @click="goToMv(mv.id)"
+          @click="goToMv(getID(mv))"
         />
         <transition name="fade">
           <img
             class="shadow"
-            v-show="hoverVideoID === mv.id"
+            v-show="hoverVideoID === getID(mv)"
             :src="getUrl(mv)"
           />
         </transition>
       </div>
       <div class="info">
         <div class="title">
-          <router-link :to="'/mv/' + mv.id">{{ mv.name }}</router-link>
-        </div>
-        <div class="artist">
-          <router-link
-            v-if="subtitle === 'artist'"
-            :to="'/artist/' + mv.artistId"
-            >{{ mv.artistName }}</router-link
-          >
-          <span v-if="subtitle === 'publishTime'">{{ mv.publishTime }}</span>
+          <router-link :to="'/mv/' + getID(mv)">{{ getTitle(mv) }}</router-link>
         </div>
+        <div class="artist" v-html="getSubtitle(mv)"></div>
       </div>
     </div>
   </div>
@@ -62,6 +55,30 @@ export default {
       if (mv.imgurl16v9 !== undefined) return mv.imgurl16v9;
       if (mv.coverUrl !== undefined) return mv.coverUrl;
     },
+    getID(mv) {
+      if (mv.id !== undefined) return mv.id;
+      if (mv.vid !== undefined) return mv.vid;
+    },
+    getTitle(mv) {
+      if (mv.name !== undefined) return mv.name;
+      if (mv.title !== undefined) return mv.title;
+    },
+    getSubtitle(mv) {
+      if (this.subtitle === "artist") {
+        let artistName = "null";
+        let artistID = 0;
+        if (mv.artistName !== undefined) {
+          artistName = mv.artistName;
+          artistID = mv.artistId;
+        } else if (mv.creator !== undefined) {
+          artistName = mv.creator[0].userName;
+          artistID = mv.creator[0].userId;
+        }
+        return `<a href="/artist/${artistID}">${artistName}</a>`;
+      } else if (this.subtitle === "publishTime") {
+        return mv.publishTime;
+      }
+    },
   },
 };
 </script>

src/components/Navbar.vue

@@ -137,8 +137,7 @@ nav {
       left: 12px;
     }
     &:hover {
-      background: var(--color-primary-bg);
-      color: var(--color-primary);
+      background: var(--color-secondary-bg);
     }
     &:active {
       transform: scale(0.92);

src/components/Player.vue

@@ -146,13 +146,13 @@ export default {
       this.progress = ~~this.howler.seek();
     }, 1000);
     if (isAccountLoggedIn()) {
-      userLikedSongsIDs(this.settings.user.userId).then((data) => {
+      userLikedSongsIDs(this.data.user.userId).then((data) => {
         this.updateLikedSongs(data.ids);
       });
     }
   },
   computed: {
-    ...mapState(["player", "howler", "settings", "liked", "accountLogin"]),
+    ...mapState(["player", "howler", "settings", "liked", "data"]),
     currentTrack() {
       return this.player.currentTrack;
     },
@@ -175,6 +175,9 @@ export default {
       let max = ~~(this.currentTrack.dt / 1000);
       return max > 1 ? max - 1 : max;
     },
+    accountLogin() {
+      return isAccountLoggedIn();
+    },
   },
   methods: {
     ...mapMutations([
@@ -266,7 +269,7 @@ export default {
       });
     },
     goToList() {
-      if (this.player.listInfo.id === this.settings.user.likedSongPlaylistID)
+      if (this.player.listInfo.id === this.data.likedSongPlaylistID)
         this.$router.push({ path: "/library/liked-songs" });
       else
         this.$router.push({

src/components/TrackList.vue

@@ -3,10 +3,18 @@
     <ContextMenu ref="menu">
       <div class="item" @click="play">Play</div>
       <div class="item" @click="playNext">Play Next</div>
-      <div class="item" @click="like" v-show="!isRightClickedTrackLiked">
+      <div
+        class="item"
+        @click="like"
+        v-show="!isRightClickedTrackLiked && accountLogin"
+      >
         Save to my Liked Songs
       </div>
-      <div class="item" @click="like" v-show="isRightClickedTrackLiked">
+      <div
+        class="item"
+        @click="like"
+        v-show="isRightClickedTrackLiked && accountLogin"
+      >
         Remove from my Liked Songs
       </div>
     </ContextMenu>
@@ -29,6 +37,7 @@ import {
   playAList,
   appendTrackToPlayerList,
 } from "@/utils/play";
+import { isAccountLoggedIn } from "@/utils/auth";
 
 import TrackListItem from "@/components/TrackListItem.vue";
 import ContextMenu from "@/components/ContextMenu.vue";
@@ -67,6 +76,9 @@ export default {
     isRightClickedTrackLiked() {
       return this.liked.songs.includes(this.rightClickedTrack?.id);
     },
+    accountLogin() {
+      return isAccountLoggedIn();
+    },
   },
   methods: {
     ...mapMutations(["updateLikedSongs"]),

src/components/TrackListItem.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { isAccountLoggedIn } from "@/utils/auth";
 
 import ArtistsInLine from "@/components/ArtistsInLine.vue";
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
@@ -93,7 +93,6 @@ export default {
     return { focus: false, trackStyle: {} };
   },
   computed: {
-    ...mapState(["accountLogin"]),
     imgUrl() {
       if (this.track.al !== undefined) return this.track.al.picUrl;
       if (this.track.album !== undefined) return this.track.album.picUrl;
@@ -128,6 +127,9 @@ export default {
       if (this.isPlaying) trackClass.push("playing");
       return trackClass;
     },
+    accountLogin() {
+      return isAccountLoggedIn();
+    },
   },
   methods: {
     goToAlbum() {