feat: show like buttons to visitors

src/components/Player.vue

@@ -37,7 +37,7 @@
           </div>
         </div>
         <!-- 账号登录才会显示 like 图标 -->
-        <div class="like-button" v-show="accountLogin">
+        <div class="like-button">
           <button-icon
             @click.native="likeCurrentSong"
             :title="$t('player.like')"
@@ -189,9 +189,6 @@ export default {
       let max = ~~(this.currentTrack.dt / 1000);
       return max > 1 ? max - 1 : max;
     },
-    accountLogin() {
-      return isAccountLoggedIn();
-    },
   },
   methods: {
     ...mapMutations([
@@ -206,6 +203,7 @@ export default {
       "previousTrack",
       "playTrackOnListByID",
       "addNextTrackEvent",
+      "showToast",
     ]),
     play() {
       if (this.playing) {
@@ -269,6 +267,10 @@ export default {
       return `${min}:${sec}`;
     },
     likeCurrentSong() {
+      if (!isAccountLoggedIn()) {
+        this.showToast("此操作需要登录网易云账号");
+        return;
+      }
       let id = this.currentTrack.id;
       let like = true;
       if (this.liked.songs.includes(id)) like = false;

src/components/TrackList.vue

@@ -11,18 +11,10 @@
       <hr />
       <div class="item" @click="play">{{ $t("contextMenu.play") }}</div>
       <div class="item" @click="playNext">{{ $t("contextMenu.playNext") }}</div>
-      <div
+      <div class="item" @click="like" v-show="!isRightClickedTrackLiked">
-        class="item"
-        @click="like"
-        v-show="!isRightClickedTrackLiked && accountLogin"
-      >
         {{ $t("contextMenu.saveToMyLikedSongs") }}
       </div>
-      <div
+      <div class="item" @click="like" v-show="isRightClickedTrackLiked">
-        class="item"
-        @click="like"
-        v-show="isRightClickedTrackLiked && accountLogin"
-      >
         {{ $t("contextMenu.removeFromMyLikedSongs") }}
       </div>
     </ContextMenu>
@@ -99,9 +91,6 @@ export default {
     isRightClickedTrackLiked() {
       return this.liked.songs.includes(this.rightClickedTrack?.id);
     },
-    accountLogin() {
-      return isAccountLoggedIn();
-    },
   },
   methods: {
     ...mapMutations(["updateLikedSongs"]),
@@ -152,6 +141,10 @@ export default {
       this.likeASong(this.rightClickedTrack.id);
     },
     likeASong(id) {
+      if (!isAccountLoggedIn()) {
+        this.showToast("此操作需要登录网易云账号");
+        return;
+      }
       let like = true;
       let likedSongs = this.liked.songs;
       if (likedSongs.includes(id)) like = false;

src/components/TrackListItem.vue

@@ -62,7 +62,7 @@
       <div></div>
     </div>
     <div class="actions" v-if="!isTracklist">
-      <button v-if="accountLogin" @click="likeThisSong">
+      <button @click="likeThisSong">
         <svg-icon
           icon-class="heart"
           :style="{
@@ -80,8 +80,6 @@
 </template>
 
 <script>
-import { isAccountLoggedIn } from "@/utils/auth";
-
 import ArtistsInLine from "@/components/ArtistsInLine.vue";
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
 import { mapState } from "vuex";
@@ -127,15 +125,12 @@ export default {
     },
     trackClass() {
       let trackClass = [this.type];
-      if (!this.track.playable && this.settings.showUnavailableSongGrey)
+      if (!this.track.playable && this.settings.showUnavailableSongInGreyStyle)
         trackClass.push("disable");
       if (this.isPlaying) trackClass.push("playing");
       if (this.focus) trackClass.push("focus");
       return trackClass;
     },
-    accountLogin() {
-      return isAccountLoggedIn();
-    },
     isMenuOpened() {
       return this.$parent.rightClickedTrack.id === this.track.id ? true : false;
     },

src/views/album.vue

@@ -44,7 +44,6 @@
             {{ $t("common.play") }}
           </ButtonTwoTone>
           <ButtonTwoTone
-            v-if="accountLogin"
             :iconClass="dynamicDetail.isSub ? 'heart-solid' : 'heart'"
             :iconButton="true"
             :horizontalPadding="0"
@@ -161,9 +160,6 @@ export default {
       this.tracks.map((t) => (time = time + t.dt));
       return time;
     },
-    accountLogin() {
-      return isAccountLoggedIn();
-    },
     filteredMoreAlbums() {
       let moreAlbums = this.moreAlbums.filter((a) => a.id !== this.album.id);
       let realAlbums = moreAlbums.filter((a) => a.type === "专辑");
@@ -184,7 +180,7 @@ export default {
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
-    ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
+    ...mapActions(["playFirstTrackOnList", "playTrackOnListByID", "showToast"]),
     playAlbumByID(id, trackID = "first") {
       if (this.tracks.find((t) => t.playable !== false) === undefined) {
         return;
@@ -192,6 +188,10 @@ export default {
       playAlbumByID(id, trackID);
     },
     likeAlbum() {
+      if (!isAccountLoggedIn()) {
+        this.showToast("此操作需要登录网易云账号");
+        return;
+      }
       likeAAlbum({
         id: this.album.id,
         t: this.dynamicDetail.isSub ? 0 : 1,

src/views/mv.vue

@@ -11,7 +11,7 @@
           }}</router-link>
           -
           {{ mv.data.name }}
-          <div class="like-button" v-show="accountLogin">
+          <div class="like-button">
             <button-icon @click.native="likeMV">
               <svg-icon icon-class="heart-solid" v-if="mv.subed"></svg-icon>
               <svg-icon icon-class="heart" v-else></svg-icon>
@@ -40,6 +40,7 @@ import Plyr from "plyr";
 
 import ButtonIcon from "@/components/ButtonIcon.vue";
 import MvRow from "@/components/MvRow.vue";
+import { mapActions } from "vuex";
 
 export default {
   name: "mv",
@@ -62,12 +63,8 @@ export default {
       simiMvs: [],
     };
   },
-  computed: {
-    accountLogin() {
-      return isAccountLoggedIn();
-    },
-  },
   methods: {
+    ...mapActions(["showToast"]),
     getData(id) {
       mvDetail(id).then((data) => {
         this.mv = data;
@@ -96,6 +93,10 @@ export default {
       });
     },
     likeMV() {
+      if (!isAccountLoggedIn()) {
+        this.showToast("此操作需要登录网易云账号");
+        return;
+      }
       likeAMV({
         mvid: this.mv.data.id,
         t: this.mv.subed ? 0 : 1,

src/views/playlist.vue

@@ -52,7 +52,7 @@
             {{ $t("common.play") }}
           </ButtonTwoTone>
           <ButtonTwoTone
-            v-if="accountLogin && playlist.creator.userId !== data.user.userId"
+            v-if="playlist.creator.userId !== data.user.userId"
             :iconClass="playlist.subscribed ? 'heart-solid' : 'heart'"
             :iconButton="true"
             :horizontalPadding="0"
@@ -77,7 +77,7 @@
         >{{ playlist.englishTitle }} · {{ playlist.updateFrequency }}
       </div>
 
-      <div class="buttons" v-if="accountLogin">
+      <div class="buttons">
         <ButtonTwoTone
           class="play-button"
           @click.native="playPlaylistByID()"
@@ -87,7 +87,7 @@
           {{ $t("common.play") }}
         </ButtonTwoTone>
         <ButtonTwoTone
-          v-if="accountLogin && playlist.creator.userId !== data.user.userId"
+          v-if="playlist.creator.userId !== data.user.userId"
           :iconClass="playlist.subscribed ? 'heart-solid' : 'heart'"
           :iconButton="true"
           :horizontalPadding="0"
@@ -266,21 +266,22 @@ export default {
     isLikeSongsPage() {
       return this.$route.name === "likedSongs";
     },
-    accountLogin() {
-      return isAccountLoggedIn();
-    },
     specialPlaylistInfo() {
       return specialPlaylist[this.playlist.id];
     },
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
-    ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
+    ...mapActions(["playFirstTrackOnList", "playTrackOnListByID", "showToast"]),
     playPlaylistByID(trackID = "first") {
       let trackIDs = this.playlist.trackIds.map((t) => t.id);
       playAList(trackIDs, this.playlist.id, "playlist", trackID);
     },
     likePlaylist() {
+      if (!isAccountLoggedIn()) {
+        this.showToast("此操作需要登录网易云账号");
+        return;
+      }
       subscribePlaylist({
         id: this.playlist.id,
         t: this.playlist.subscribed ? 2 : 1,