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);
- cat.enable = !cat.enable;
- state.settings.playlistCategories = state.settings.playlistCategories.map(
- (c) => {
- if (c.name === name) {
- return cat;
- }
- return c;
- }
+ const index = state.settings.enabledPlaylistCategories.findIndex(
+ (c) => c.name === name
  );
+ 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)"
- :key="cat.name"
- :class="{ active: cat.name === activeCategory && !showCatOptions }"
- @click="goToCategory(cat.name)"
+ :class="{ active: category === activeCategory && !showCatOptions }"
+ @click="goToCategory(category)"
  >
- {{ cat.name }}
+ {{ category }}
  </div>
  <div
  class="button more"
@@ -20,15 +20,17 @@
  </div>
  </div>
 
- <div class="panel" v-show="showCatOptions">
- <div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
+ <div v-show="showCatOptions" class="panel">
+ <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"
- :showPlayButton="true"
- :showPlayCount="activeCategory !== '排行榜' ? true : false"
- :imageSize="activeCategory !== '排行榜' ? 512 : 1024"
+ :sub-text="subText"
+ :show-play-button="true"
+ :show-play-count="activeCategory !== '排行榜' ? true : false"
+ :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;