refactor: explore category

src/store/initLocalStorage.js

@@ -1,9 +1,13 @@
 import { playlistCategories } from "@/utils/staticData";
 
+console.log("[debug][initLocalStorage.js]");
+const enabledPlaylistCategories = playlistCategories
+  .filter((c) => c.enable)
+  .map((c) => c.name);
+
 let localStorage = {
   player: {},
   settings: {
-    playlistCategories,
     lang: null,
     appearance: "auto",
     musicQuality: 320000,
@@ -20,6 +24,7 @@ let localStorage = {
     enableDiscordRichPresence: false,
     enableGlobalShortcut: true,
     showLibraryDefault: false,
+    enabledPlaylistCategories,
   },
   data: {
     user: {},

src/store/mutations.js

@@ -22,16 +22,16 @@ export default {
     state.data[key] = value;
   },
   togglePlaylistCategory(state, name) {
-    let cat = state.settings.playlistCategories.find((c) => c.name === name);
+    const index = state.settings.enabledPlaylistCategories.findIndex(
-    cat.enable = !cat.enable;
+      (c) => c.name === name
-    state.settings.playlistCategories = state.settings.playlistCategories.map(
-      (c) => {
-        if (c.name === name) {
-          return cat;
-        }
-        return c;
-      }
     );
+    if (index !== -1) {
+      state.settings.enabledPlaylistCategories = state.settings.enabledPlaylistCategories.filter(
+        (c) => c.name !== name
+      );
+    } else {
+      state.settings.enabledPlaylistCategories.push(name);
+    }
   },
   updateToast(state, toast) {
     state.toast = toast;

src/utils/staticData.js

@@ -11,7 +11,6 @@ export const byAppleMusic = [
     name: "\u4e2d\u563b\u5408\u74a7",
     id: 5277771961,
   },
-
   {
     coverImgUrl:
       "https://p1.music.126.net/cPaBXr1wZSg86ddl47AK7Q==/109951165375130918.jpg",
@@ -38,6 +37,11 @@ export const playlistCategories = [
     enable: true,
     bigCat: "static",
   },
+  // {
+  //   name: "For You",
+  //   enable: true,
+  //   bigCat: "static",
+  // },
   {
     name: "推荐歌单",
     enable: true,

src/utils/updateApp.js

@@ -4,20 +4,20 @@ import pkg from "../../package.json";
 const updateSetting = () => {
   const parsedSettings = JSON.parse(localStorage.getItem("settings"));
   const {
-    playlistCategories,
     showUnavailableSongInGreyStyle,
     automaticallyCacheSongs,
     nyancatStyle,
     showLyricsTranslation,
     minimizeToTray,
+    enabledPlaylistCategories,
   } = initLocalStorage.settings;
   const settings = {
-    playlistCategories,
     showUnavailableSongInGreyStyle,
     automaticallyCacheSongs,
     nyancatStyle,
     showLyricsTranslation,
     minimizeToTray,
+    enabledPlaylistCategories,
     ...parsedSettings,
   };
 

src/views/explore.vue

@@ -3,13 +3,13 @@
     <h1>{{ $t("explore.explore") }}</h1>
     <div class="buttons">
       <div
+        v-for="category in settings.enabledPlaylistCategories"
+        :key="category"
         class="button"
-        v-for="cat in settings.playlistCategories.filter((p) => p.enable)"
+        :class="{ active: category === activeCategory && !showCatOptions }"
-        :key="cat.name"
+        @click="goToCategory(category)"
-        :class="{ active: cat.name === activeCategory && !showCatOptions }"
-        @click="goToCategory(cat.name)"
       >
-        {{ cat.name }}
+        {{ category }}
       </div>
       <div
         class="button more"
@@ -20,15 +20,17 @@
       </div>
     </div>
 
-    <div class="panel" v-show="showCatOptions">
+    <div v-show="showCatOptions" class="panel">
-      <div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
+      <div v-for="bigCat in allBigCats" :key="bigCat" class="big-cat">
         <div class="name">{{ bigCat }}</div>
         <div class="cats">
           <div
-            class="cat"
-            :class="{ active: cat.enable }"
             v-for="cat in getCatsByBigCat(bigCat)"
             :key="cat.name"
+            class="cat"
+            :class="{
+              active: settings.enabledPlaylistCategories.includes(cat.name),
+            }"
             @click="toggleCat(cat.name)"
             ><span>{{ cat.name }}</span></div
           >
@@ -40,21 +42,21 @@
       <CoverRow
         type="playlist"
         :items="playlists"
-        :subText="subText"
+        :sub-text="subText"
-        :showPlayButton="true"
+        :show-play-button="true"
-        :showPlayCount="activeCategory !== '排行榜' ? true : false"
+        :show-play-count="activeCategory !== '排行榜' ? true : false"
-        :imageSize="activeCategory !== '排行榜' ? 512 : 1024"
+        :image-size="activeCategory !== '排行榜' ? 512 : 1024"
       />
     </div>
     <div
-      class="load-more"
       v-show="['推荐歌单', '排行榜'].includes(activeCategory) === false"
+      class="load-more"
     >
       <ButtonTwoTone
         v-show="showLoadMoreButton && hasMore"
-        @click.native="getPlaylist"
         color="grey"
         :loading="loadingMore"
+        @click.native="getPlaylist"
         >{{ $t("explore.loadMore") }}</ButtonTwoTone
       >
     </div>
@@ -70,6 +72,7 @@ import {
   recommendPlaylist,
   toplists,
 } from "@/api/playlist";
+import { playlistCategories } from "@/utils/staticData";
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import CoverRow from "@/components/CoverRow.vue";
@@ -102,6 +105,9 @@ export default {
       return "none";
     },
   },
+  activated() {
+    this.loadData();
+  },
   methods: {
     ...mapMutations(["togglePlaylistCategory"]),
     loadData() {
@@ -167,15 +173,12 @@ export default {
       });
     },
     getCatsByBigCat(name) {
-      return this.settings.playlistCategories.filter((c) => c.bigCat === name);
+      return playlistCategories.filter((c) => c.bigCat === name);
     },
     toggleCat(name) {
       this.togglePlaylistCategory(name);
     },
   },
-  activated() {
-    this.loadData();
-  },
   beforeRouteUpdate(to, from, next) {
     NProgress.start();
     this.showLoadMoreButton = false;