feat: add context menu for album and playlist

src/assets/icons/more.svg

@@ -1 +1 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-h" class="svg-inline--fa fa-ellipsis-h fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"></path></svg>
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="ellipsis-h" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-ellipsis-h fa-w-16 fa-9x"><path fill="currentColor" d="M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z" class=""></path></svg>

src/components/ContextMenu.vue

@@ -37,7 +37,9 @@ export default {
 
     closeMenu() {
       this.showMenu = false;
-      this.$parent.closeMenu();
+      if (this.$parent.closeMenu !== undefined) {
+        this.$parent.closeMenu();
+      }
     },
 
     openMenu(e) {

src/locale/lang/zh-CN.js

@@ -125,10 +125,10 @@ export default {
     play: "播放",
     playNext: "下一首播放",
     saveToMyLikedSongs: "添加到我喜欢的音乐",
-    removeFromMyLikedSongs: "从喜欢的音乐中移除",
+    removeFromMyLikedSongs: "从喜欢的音乐中删除",
   },
   toast: {
     savedToMyLikedSongs: "已添加到我喜欢的音乐",
-    removedFromMyLikedSongs: "已从喜欢的音乐中移除",
+    removedFromMyLikedSongs: "已从喜欢的音乐中删除",
   },
 };

src/views/album.vue

@@ -9,10 +9,13 @@
         :size="288"
         :type="'album'"
         :id="album.id"
+        @click.right.native="openMenu"
       />
       <div class="info">
-        <div class="title"> {{ title }}</div>
+        <div class="title" @click.right="openMenu"> {{ title }}</div>
-        <div class="subtitle" v-if="subtitle !== ''">{{ subtitle }}</div>
+        <div class="subtitle" v-if="subtitle !== ''" @click.right="openMenu">{{
+          subtitle
+        }}</div>
         <div class="artist">
           <span v-if="album.artist.id !== 104700">
             <span>{{ album.type | formatAlbumType(album) }} by </span
@@ -39,7 +42,7 @@
         <div class="buttons" style="margin-top: 32px">
           <ButtonTwoTone
             @click.native="playAlbumByID(album.id)"
-            :iconClass="`play`"
+            iconClass="play"
           >
             {{ $t("common.play") }}
           </ButtonTwoTone>
@@ -55,6 +58,14 @@
             @click.native="likeAlbum"
           >
           </ButtonTwoTone>
+          <ButtonTwoTone
+            iconClass="more"
+            :iconButton="true"
+            :horizontalPadding="0"
+            color="grey"
+            @click.native="openMenu"
+          >
+          </ButtonTwoTone>
         </div>
       </div>
     </div>
@@ -93,8 +104,17 @@
     <Modal
       :show="showFullDescription"
       :close="() => (showFullDescription = false)"
-      :text="album.description"
+      :showFooter="false"
-    />
+      title="专辑介绍"
+      >{{ album.description }}</Modal
+    >
+    <ContextMenu ref="albumMenu">
+      <div class="item">{{ $t("contextMenu.playNext") }}</div>
+      <div class="item" @click="likeAlbum(true)">{{
+        dynamicDetail.isSub ? "从音乐库删除" : "保存到音乐库"
+      }}</div>
+      <div class="item">添加到歌单</div>
+    </ContextMenu>
   </div>
 </template>
 
@@ -110,6 +130,7 @@ import { isAccountLoggedIn } from "@/utils/auth";
 
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
+import ContextMenu from "@/components/ContextMenu.vue";
 import TrackList from "@/components/TrackList.vue";
 import CoverRow from "@/components/CoverRow.vue";
 import Cover from "@/components/Cover.vue";
@@ -124,6 +145,7 @@ export default {
     ExplicitSymbol,
     CoverRow,
     Modal,
+    ContextMenu,
   },
   data() {
     return {
@@ -180,7 +202,7 @@ export default {
       }
       playAlbumByID(id, trackID);
     },
-    likeAlbum() {
+    likeAlbum(toast = false) {
       if (!isAccountLoggedIn()) {
         this.showToast("此操作需要登录网易云账号");
         return;
@@ -189,8 +211,13 @@ export default {
         id: this.album.id,
         t: this.dynamicDetail.isSub ? 0 : 1,
       }).then((data) => {
-        if (data.code === 200)
+        if (data.code === 200) {
           this.dynamicDetail.isSub = !this.dynamicDetail.isSub;
+          if (toast === true)
+            this.showToast(
+              this.dynamicDetail.isSub ? "已保存到音乐库" : "已从音乐库删除"
+            );
+        }
       });
     },
     formatTitle() {
@@ -231,6 +258,9 @@ export default {
         this.dynamicDetail = data;
       });
     },
+    openMenu(e) {
+      this.$refs.albumMenu.openMenu(e);
+    },
   },
   beforeRouteUpdate(to, from, next) {
     NProgress.start();

src/views/playlist.vue

@@ -10,9 +10,10 @@
         :alwaysShowShadow="true"
         :clickToPlay="true"
         :size="288"
+        @click.right.native="openMenu"
       />
       <div class="info">
-        <div class="title"
+        <div class="title" @click.right="openMenu"
           ><span class="lock-icon" v-if="playlist.privacy === 10">
             <svg-icon icon-class="lock" /></span
           >{{ playlist.name }}</div
@@ -64,12 +65,24 @@
             @click.native="likePlaylist"
           >
           </ButtonTwoTone>
+          <ButtonTwoTone
+            iconClass="more"
+            :iconButton="true"
+            :horizontalPadding="0"
+            color="grey"
+            @click.native="openMenu"
+          >
+          </ButtonTwoTone>
         </div>
       </div>
     </div>
 
     <div class="special-playlist" v-if="specialPlaylistInfo !== undefined">
-      <div class="title" :class="specialPlaylistInfo.gradient">
+      <div
+        class="title"
+        :class="specialPlaylistInfo.gradient"
+        @click.right="openMenu"
+      >
         <!-- <img :src="playlist.coverImgUrl | resizeImage" /> -->
         {{ specialPlaylistInfo.name }}
       </div>
@@ -99,6 +112,14 @@
           @click.native="likePlaylist"
         >
         </ButtonTwoTone>
+        <ButtonTwoTone
+          iconClass="more"
+          :iconButton="true"
+          :horizontalPadding="0"
+          color="grey"
+          @click.native="openMenu"
+        >
+        </ButtonTwoTone>
       </div>
     </div>
 
@@ -115,20 +136,46 @@
     <Modal
       :show="showFullDescription"
       :close="() => (showFullDescription = false)"
-      :text="playlist.description"
+      :showFooter="false"
-    />
+      title="歌单介绍"
+      >{{ playlist.description }}</Modal
+    >
+
+    <ContextMenu ref="playlistMenu">
+      <div class="item">{{ $t("contextMenu.playNext") }}</div>
+      <div class="item" @click="likePlaylist(true)">{{
+        playlist.subscribed ? "从音乐库删除" : "保存到音乐库"
+      }}</div>
+      <div
+        class="item"
+        v-if="playlist.creator.userId === data.user.userId"
+        @click="editPlaylist"
+        >编辑歌单信息</div
+      >
+      <div
+        class="item"
+        v-if="playlist.creator.userId === data.user.userId"
+        @click="deletePlaylist"
+        >删除歌单</div
+      >
+    </ContextMenu>
   </div>
 </template>
 
 <script>
 import { mapMutations, mapActions, mapState } from "vuex";
 import NProgress from "nprogress";
-import { getPlaylistDetail, subscribePlaylist } from "@/api/playlist";
+import {
+  getPlaylistDetail,
+  subscribePlaylist,
+  deletePlaylist,
+} from "@/api/playlist";
 import { playAList } from "@/utils/play";
 import { getTrackDetail } from "@/api/track";
 import { isAccountLoggedIn } from "@/utils/auth";
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
+import ContextMenu from "@/components/ContextMenu.vue";
 import TrackList from "@/components/TrackList.vue";
 import Cover from "@/components/Cover.vue";
 import Modal from "@/components/Modal.vue";
@@ -227,6 +274,7 @@ export default {
     ButtonTwoTone,
     TrackList,
     Modal,
+    ContextMenu,
   },
   data() {
     return {
@@ -270,7 +318,7 @@ export default {
       let trackIDs = this.playlist.trackIds.map((t) => t.id);
       playAList(trackIDs, this.playlist.id, "playlist", trackID);
     },
-    likePlaylist() {
+    likePlaylist(toast = false) {
       if (!isAccountLoggedIn()) {
         this.showToast("此操作需要登录网易云账号");
         return;
@@ -279,8 +327,13 @@ export default {
         id: this.playlist.id,
         t: this.playlist.subscribed ? 2 : 1,
       }).then((data) => {
-        if (data.code === 200)
+        if (data.code === 200) {
           this.playlist.subscribed = !this.playlist.subscribed;
+          if (toast === true)
+            this.showToast(
+              this.playlist.subscribed ? "已保存到音乐库" : "已从音乐库删除"
+            );
+        }
         getPlaylistDetail(this.id, true).then((data) => {
           this.playlist = data.playlist;
         });
@@ -339,6 +392,25 @@ export default {
         this.loadMore();
       }
     },
+    openMenu(e) {
+      this.$refs.playlistMenu.openMenu(e);
+    },
+    deletePlaylist() {
+      let confirmation = confirm(`确定要删除歌单 ${this.playlist.name}？`);
+      if (confirmation === true) {
+        deletePlaylist(this.playlist.id).then((data) => {
+          if (data.code === 200) {
+            alert(`已删除歌单 ${this.playlist.name}`);
+            this.$router.go(-1);
+          } else {
+            alert("发生错误");
+          }
+        });
+      }
+    },
+    editPlaylist() {
+      alert("此功能开发中");
+    },
   },
 };
 </script>