feat: add context menu for album and playlist

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>