feat: create/delete playlist, add/remove track from playlist

src/views/library.vue

@@ -76,7 +76,7 @@
           class="add-playlist"
           icon="plus"
           v-show="currentTab === 'playlists'"
-          @click="showAddPlaylistModal = true"
+          @click="openAddPlaylistModal"
           ><svg-icon icon-class="plus" />新建歌单</button
         >
       </div>
@@ -109,39 +109,11 @@
         <MvRow :mvs="mvs" />
       </div>
     </div>
-
-    <Modal
-      class="add-playlist-modal"
-      :show="showAddPlaylistModal"
-      :close="closeAddPlaylistModal"
-      title="新建歌单"
-      width="25vw"
-    >
-      <template slot="default">
-        <input
-          type="text"
-          placeholder="歌单标题"
-          maxlength="40"
-          v-model="newPlaylist.title"
-        />
-        <div class="checkbox">
-          <input
-            type="checkbox"
-            id="checkbox-private"
-            v-model="newPlaylist.private"
-          />
-          <label for="checkbox-private">设置为隐私歌单</label>
-        </div>
-      </template>
-      <template slot="footer">
-        <button class="primary block" @click="createPlaylist">创建</button>
-      </template>
-    </Modal>
   </div>
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
+import { mapActions, mapMutations, mapState } from "vuex";
 import { getTrackDetail, getLyric } from "@/api/track";
 import {
   userDetail,
@@ -151,7 +123,8 @@ import {
   likedMVs,
 } from "@/api/user";
 import { randomNum, dailyTask } from "@/utils/common";
-import { getPlaylistDetail, createPlaylist } from "@/api/playlist";
+import { getPlaylistDetail } from "@/api/playlist";
+import { isAccountLoggedIn } from "@/utils/auth";
 import { playPlaylistByID } from "@/utils/play";
 import NProgress from "nprogress";
 
@@ -159,11 +132,10 @@ import TrackList from "@/components/TrackList.vue";
 import CoverRow from "@/components/CoverRow.vue";
 import SvgIcon from "@/components/SvgIcon.vue";
 import MvRow from "@/components/MvRow.vue";
-import Modal from "@/components/Modal.vue";
 
 export default {
   name: "Library",
-  components: { SvgIcon, CoverRow, TrackList, MvRow, Modal },
+  components: { SvgIcon, CoverRow, TrackList, MvRow },
   data() {
     return {
       show: false,
@@ -180,11 +152,6 @@ export default {
       albums: [],
       artists: [],
       mvs: [],
-      showAddPlaylistModal: false,
-      newPlaylist: {
-        title: "",
-        private: false,
-      },
     };
   },
   created() {
@@ -224,10 +191,15 @@ export default {
   },
   methods: {
     ...mapActions(["showToast"]),
+    ...mapMutations(["updateModal"]),
     playLikedSongs() {
       playPlaylistByID(this.playlists[0].id, "first", true);
     },
     updateCurrentTab(tab) {
+      if (!isAccountLoggedIn() && tab !== "playlists") {
+        this.showToast("此操作需要登录网易云账号");
+        return;
+      }
       this.currentTab = tab;
       document
         .getElementById("liked")
@@ -311,25 +283,17 @@ export default {
         NProgress.done();
       });
     },
-    createPlaylist() {
-      let params = { name: this.newPlaylist.title };
-      if (this.newPlaylist.private) params.type = 10;
-      createPlaylist(params).then((data) => {
-        if (data.code === 200) {
-          this.closeAddPlaylistModal();
-          this.showToast("成功创建歌单");
-          this.playlists = [];
-          this.getUserPlaylists(true);
-        }
+    openAddPlaylistModal() {
+      if (!isAccountLoggedIn()) {
+        this.showToast("此操作需要登录网易云账号");
+        return;
+      }
+      this.updateModal({
+        modalName: "newPlaylistModal",
+        key: "show",
+        value: true,
       });
     },
-    closeAddPlaylistModal() {
-      this.showAddPlaylistModal = false;
-      this.newPlaylist = {
-        title: "",
-        private: false,
-      };
-    },
   },
   watch: {
     likedSongsInState() {
@@ -499,43 +463,4 @@ button.add-playlist {
     transform: scale(0.92);
   }
 }
-
-.add-playlist-modal {
-  .content {
-    display: flex;
-    flex-direction: column;
-    input {
-      margin-bottom: 12px;
-    }
-    input[type="text"] {
-      width: calc(100% - 24px);
-      flex: 1;
-      background: var(--color-secondary-bg-for-transparent);
-      font-size: 16px;
-      border: none;
-      font-weight: 600;
-      padding: 8px 12px;
-      border-radius: 8px;
-      margin-top: -1px;
-      color: var(--color-text);
-      &:focus {
-        background: var(--color-primary-bg-for-transparent);
-        opacity: 1;
-        [data-theme="light"] {
-          color: var(--color-primary);
-        }
-      }
-    }
-    .checkbox {
-      input[type="checkbox" i] {
-        margin: 3px 3px 3px 4px;
-      }
-      display: flex;
-      align-items: center;
-      label {
-        font-size: 12px;
-      }
-    }
-  }
-}
 </style>