feat: add more categories to explore page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "YesPlayMusic",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/store/initLocalStorage.js

@@ -1,3 +1,5 @@
+import { playlistCategories } from "@/utils/staticData";
+
 export default {
   player: {
     enable: false,
@@ -31,48 +33,7 @@ export default {
     },
   },
   settings: {
-    playlistCategories: [
+    playlistCategories,
-      {
-        name: "全部",
-        enable: true,
-      },
-      {
-        name: "推荐歌单",
-        enable: true,
-      },
-      {
-        name: "精品歌单",
-        enable: true,
-      },
-      {
-        name: "官方",
-        enable: true,
-      },
-      {
-        name: "流行",
-        enable: true,
-      },
-      {
-        name: "电子",
-        enable: true,
-      },
-      {
-        name: "摇滚",
-        enable: true,
-      },
-      {
-        name: "ACG",
-        enable: true,
-      },
-      // {
-      //   name: "最新专辑",
-      //   enable: true,
-      // },
-      {
-        name: "排行榜",
-        enable: true,
-      },
-    ],
     lang: null,
     appearance: "auto",
     musicQuality: 320000,

src/store/mutations.js

@@ -106,4 +106,16 @@ export default {
   updateData(state, { key, value }) {
     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;
+      }
+    );
+  },
 };

src/utils/staticData.js

@@ -0,0 +1,416 @@
+export const byAppleMusic = [
+  {
+    coverImgUrl:
+      "http://p2.music.126.net/GvYQoflE99eoeGi9jG4Bsw==/109951165375336156.jpg",
+    name: "Happy Hits",
+    id: 5278068783,
+  },
+  {
+    coverImgUrl:
+      "http://p2.music.126.net/5CJeYN35LnzRDsv5Lcs0-Q==/109951165374966765.jpg",
+    name: "\u4e2d\u563b\u5408\u74a7",
+    id: 5277771961,
+  },
+
+  {
+    coverImgUrl:
+      "http://p1.music.126.net/cPaBXr1wZSg86ddl47AK7Q==/109951165375130918.jpg",
+    name: "Heartbreak Pop",
+    id: 5277965913,
+  },
+  {
+    coverImgUrl:
+      "http://p2.music.126.net/FDtX55P2NjccDna-LBj9PA==/109951165375065973.jpg",
+    name: "Festival Bangers",
+    id: 5277969451,
+  },
+  {
+    coverImgUrl:
+      "http://p2.music.126.net/hC0q2dGbOWHVfg4nkhIXPg==/109951165374881177.jpg",
+    name: "Bedtime Beats",
+    id: 5277778542,
+  },
+];
+
+export const playlistCategories = [
+  {
+    name: "全部",
+    enable: true,
+    bigCat: "static",
+  },
+  {
+    name: "推荐歌单",
+    enable: true,
+    bigCat: "static",
+  },
+  // {
+  //   name: "最新专辑",
+  //   enable: false,
+  //   bigCat: "static",
+  // },
+  {
+    name: "精品歌单",
+    enable: true,
+    bigCat: "static",
+  },
+  {
+    name: "官方",
+    enable: true,
+    bigCat: "static",
+  },
+  {
+    name: "排行榜",
+    enable: true,
+    bigCat: "static",
+  },
+  {
+    name: "华语",
+    enable: false,
+    bigCat: "语种",
+  },
+  {
+    name: "欧美",
+    enable: true,
+    bigCat: "语种",
+  },
+  {
+    name: "日语",
+    enable: false,
+    bigCat: "语种",
+  },
+  {
+    name: "韩语",
+    enable: false,
+    bigCat: "语种",
+  },
+  {
+    name: "粤语",
+    enable: false,
+    bigCat: "语种",
+  },
+  {
+    name: "流行",
+    enable: true,
+    bigCat: "风格",
+  },
+  {
+    name: "摇滚",
+    enable: true,
+    bigCat: "风格",
+  },
+  {
+    name: "民谣",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "电子",
+    enable: true,
+    bigCat: "风格",
+  },
+  {
+    name: "舞曲",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "说唱",
+    enable: true,
+    bigCat: "风格",
+  },
+  {
+    name: "轻音乐",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "爵士",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "乡村",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "R&B/Soul",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "古典",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "民族",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "英伦",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "金属",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "朋克",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "蓝调",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "雷鬼",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "世界音乐",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "拉丁",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "New Age",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "古风",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "后摇",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "Bossa Nova",
+    enable: false,
+    bigCat: "风格",
+  },
+  {
+    name: "清晨",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "夜晚",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "学习",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "工作",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "午休",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "下午茶",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "地铁",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "驾车",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "运动",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "旅行",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "散步",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "酒吧",
+    enable: false,
+    bigCat: "场景",
+  },
+  {
+    name: "怀旧",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "清新",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "浪漫",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "伤感",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "治愈",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "放松",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "孤独",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "感动",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "兴奋",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "快乐",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "安静",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "思念",
+    enable: false,
+    bigCat: "情感",
+  },
+  {
+    name: "综艺",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "影视原声",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "ACG",
+    enable: true,
+    bigCat: "主题",
+  },
+  {
+    name: "儿童",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "校园",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "游戏",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "70后",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "80后",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "90后",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "网络歌曲",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "KTV",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "经典",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "翻唱",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "吉他",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "钢琴",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "器乐",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "榜单",
+    enable: false,
+    bigCat: "主题",
+  },
+  {
+    name: "00后",
+    enable: false,
+    bigCat: "主题",
+  },
+];

src/utils/updateApp.js

@@ -1,4 +1,12 @@
 import pack from "../../package.json";
+import initLocalStorage from "@/store/initLocalStorage.js";
+
+// function exampleFunction() {
+//   console.log("update to vx.x.x");
+//   // 0.2.0 to 0.2.1
+//   localStorage.setItem("appVersion", "x.x.x");
+//   window.location.reload();
+// }
 
 function updateTo_0_2_0() {
   // 0.1 to 0.2.0
@@ -18,11 +26,25 @@ function updateTo_0_2_0() {
   window.location.reload();
 }
 
+function updateTo_0_2_1() {
+  console.log("update to v0.2.1");
+  // 0.2.0 to 0.2.1
+  // 初始化 playlistCategories
+  let settings = JSON.parse(localStorage.getItem("settings"));
+  settings.playlistCategories = initLocalStorage.settings.playlistCategories;
+  localStorage.setItem("settings", JSON.stringify(settings));
+  localStorage.setItem("appVersion", "0.2.1");
+  window.location.reload();
+}
+
 export default function () {
   while (localStorage.getItem("appVersion") !== pack.version) {
     let currentVersion = localStorage.getItem("appVersion");
     if (currentVersion === "0.1") {
       updateTo_0_2_0();
     }
+    if (currentVersion === "0.2.0") {
+      updateTo_0_2_1();
+    }
   }
 }

src/views/explore.vue

@@ -4,18 +4,38 @@
     <div class="buttons">
       <div
         class="button"
-        v-for="cat in settings.playlistCategories"
+        v-for="cat in settings.playlistCategories.filter((p) => p.enable)"
         :key="cat.name"
-        :class="{ active: cat.name === activeCategory }"
+        :class="{ active: cat.name === activeCategory && !showCatOptions }"
         @click="goToCategory(cat.name)"
       >
         {{ cat.name }}
       </div>
-      <div class="button more">
+      <div
+        class="button more"
+        :class="{ active: showCatOptions }"
+        @click="showCatOptions = !showCatOptions"
+      >
         <svg-icon icon-class="more"></svg-icon>
       </div>
     </div>
 
+    <div class="panel" v-show="showCatOptions">
+      <div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
+        <div class="name">{{ bigCat }}</div>
+        <div class="cats">
+          <div
+            class="cat"
+            :class="{ active: cat.enable }"
+            v-for="cat in getCatsByBigCat(bigCat)"
+            :key="cat.name"
+            @click="toggleCat(cat.name)"
+            ><span>{{ cat.name }}</span></div
+          >
+        </div>
+      </div>
+    </div>
+
     <div class="playlists">
       <CoverRow
         type="playlist"
@@ -42,7 +62,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapMutations } from "vuex";
 import NProgress from "nprogress";
 import {
   topPlaylist,
@@ -70,6 +90,8 @@ export default {
       loadingMore: false,
       showLoadMoreButton: false,
       hasMore: true,
+      allBigCats: ["语种", "风格", "场景", "情感", "主题"],
+      showCatOptions: false,
     };
   },
   computed: {
@@ -81,6 +103,7 @@ export default {
     },
   },
   methods: {
+    ...mapMutations(["togglePlaylistCategory"]),
     loadData() {
       if (!this.show) NProgress.start();
       this.activeCategory =
@@ -90,6 +113,7 @@ export default {
       this.getPlaylist();
     },
     goToCategory(Category) {
+      if (this.showCatOptions) return;
       this.$router.push({ path: "/explore?category=" + Category });
     },
     updatePlaylist(playlists) {
@@ -142,6 +166,12 @@ export default {
         this.hasMore = data.more;
       });
     },
+    getCatsByBigCat(name) {
+      return this.settings.playlistCategories.filter((c) => c.bigCat === name);
+    },
+    toggleCat(name) {
+      this.togglePlaylistCategory(name);
+    },
   },
   activated() {
     this.loadData();
@@ -192,6 +222,63 @@ h1 {
   background-color: var(--color-primary-bg);
   color: var(--color-primary);
 }
+.panel {
+  margin-top: 10px;
+  background: var(--color-secondary-bg);
+  border-radius: 10px;
+  padding: 8px;
+  color: var(--color-text);
+
+  .big-cat {
+    display: flex;
+    margin-bottom: 32px;
+  }
+
+  .name {
+    font-size: 24px;
+    font-weight: 700;
+    opacity: 0.68;
+    margin-left: 24px;
+    min-width: 54px;
+    height: 26px;
+    margin-top: 8px;
+  }
+  .cats {
+    margin-left: 24px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .cat {
+    user-select: none;
+    margin: 4px 0px 0 0;
+    display: flex;
+    // justify-content: center;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    transition: 0.2s;
+    min-width: 98px;
+
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      padding: 6px 12px;
+      height: 26px;
+      border-radius: 10px;
+      opacity: 0.88;
+      &:hover {
+        opacity: 1;
+        background-color: var(--color-primary-bg);
+        color: var(--color-primary);
+      }
+    }
+  }
+  .cat.active {
+    color: var(--color-primary);
+  }
+}
 
 .playlists {
   margin-top: 24px;

src/views/home.vue

@@ -63,7 +63,7 @@
 <script>
 import { toplists, recommendPlaylist } from "@/api/playlist";
 import { toplistOfArtists } from "@/api/artist";
-import { byAppleMusic } from "@/utils/staticPlaylist";
+import { byAppleMusic } from "@/utils/staticData";
 import { newAlbums } from "@/api/album";
 import NProgress from "nprogress";
 import { mapState } from "vuex";