feat: support daily recommend songs

src/api/playlist.js

@@ -183,3 +183,24 @@ export function addOrRemoveTrackFromPlaylist(params) {
     params,
   });
 }
+
+/**
+ * 每日推荐歌曲
+ * 说明 : 调用此接口 , 可获得每日推荐歌曲 ( 需要登录 )
+ * @param {Object} params
+ * @param {string} params.op
+ * @param {string} params.pid
+ */
+export function dailyRecommendTracks() {
+  return request({
+    url: "/recommend/songs",
+    method: "post",
+    params: { timestamp: new Date().getTime() },
+  }).then((result) => {
+    result.data.dailySongs = mapTrackPlayableStatus(
+      result.data.dailySongs,
+      result.data.privileges
+    );
+    return result;
+  });
+}

src/components/DailyTracksCard.vue

@@ -0,0 +1,145 @@
+<template>
+  <div
+    class="daily-recommend-card"
+    @click="goToDailyTracks"
+    :style="cardStyles"
+  >
+    <div class="container">
+      <div class="title-box">
+        <div class="title">
+          <span>每</span>
+          <span>日</span>
+          <span>推</span>
+          <span>荐</span>
+        </div>
+      </div>
+    </div>
+    <button class="play-button" @click.stop="playDailyTracks">
+      <svg-icon icon-class="play" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from "vuex";
+import { dailyRecommendTracks } from "@/api/playlist";
+
+export default {
+  name: "DailyTracksCard",
+  created() {
+    if (this.dailyTracks.length === 0) this.loadDailyTracks();
+  },
+  computed: {
+    ...mapState(["dailyTracks"]),
+    cardStyles() {
+      return {
+        background:
+          this.dailyTracks.length !== 0
+            ? `no-repeat url("${this.dailyTracks[0].al.picUrl}?param=1024y1024") center/cover`
+            : "",
+      };
+    },
+  },
+  methods: {
+    ...mapMutations(["updateDailyTracks"]),
+    loadDailyTracks() {
+      dailyRecommendTracks().then((result) => {
+        this.updateDailyTracks(result.data.dailySongs);
+      });
+    },
+    goToDailyTracks() {
+      this.$router.push({ name: "dailySongs" });
+    },
+    playDailyTracks() {
+      let trackIDs = this.dailyTracks.map((t) => t.id);
+      this.$store.state.player.replacePlaylist(
+        trackIDs,
+        "/daily/songs",
+        "url",
+        this.dailyTracks[0].id
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.daily-recommend-card {
+  border-radius: 1rem;
+  animation: move 38s infinite;
+  animation-direction: alternate;
+  height: 198px;
+  cursor: pointer;
+  position: relative;
+}
+
+.container {
+  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.38));
+  height: 198px;
+  width: 50%;
+  display: flex;
+  align-items: center;
+  border-radius: 0.94rem;
+}
+
+.title-box {
+  height: 148px;
+  width: 148px;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 25px;
+  user-select: none;
+  .title {
+    height: 100%;
+    width: 100%;
+    font-weight: 600;
+    font-size: 64px;
+    line-height: 48px;
+    opacity: 0.96;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-items: center;
+    place-items: center;
+  }
+}
+
+.play-button {
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: white;
+  position: absolute;
+  right: 1.6rem;
+  bottom: 1.4rem;
+  background: rgba(255, 255, 255, 0.14);
+  border-radius: 50%;
+  margin-bottom: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 44px;
+  width: 44px;
+  transition: 0.2s;
+  cursor: default;
+
+  .svg-icon {
+    margin-left: 4px;
+    height: 16px;
+    width: 16px;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.44);
+  }
+}
+
+@keyframes move {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 0% 100%;
+  }
+}
+</style>

src/components/Player.vue

@@ -290,9 +290,11 @@ export default {
       this.player.moveToFMTrash();
     },
     goToList() {
-      if (this.player.playlistSource.id === this.data.likedSongPlaylistID)
+      if (this.player.playlistSource.id === this.data.likedSongPlaylistID) {
         this.$router.push({ path: "/library/liked-songs" });
-      else
+      } else if (this.player.playlistSource.type === "url") {
+        this.$router.push({ path: this.player.playlistSource.id });
+      } else {
         this.$router.push({
           path:
             "/" +
@@ -300,6 +302,7 @@ export default {
             "/" +
             this.player.playlistSource.id,
         });
+      }
     },
     goToAlbum() {
       if (this.player.currentTrack.al.id === 0) return;

src/components/TrackList.vue

@@ -152,6 +152,14 @@ export default {
           "artist",
           trackID
         );
+      } else if (this.dbclickTrackFunc === "dailyTracks") {
+        let trackIDs = this.tracks.map((t) => t.id);
+        this.$store.state.player.replacePlaylist(
+          trackIDs,
+          "/daily/songs",
+          "url",
+          trackID
+        );
       }
     },
     playThisListDefault(trackID) {

src/router/index.js

@@ -118,6 +118,11 @@ const routes = [
     name: "settings",
     component: () => import("@/views/settings.vue"),
   },
+  {
+    path: "/daily/songs",
+    name: "dailySongs",
+    component: () => import("@/views/dailyTracks.vue"),
+  },
 ];
 const router = new VueRouter({
   routes,
@@ -155,7 +160,7 @@ router.beforeEach((to, from, next) => {
 router.afterEach((to) => {
   if (
     to.matched.some((record) => !record.meta.keepAlive) &&
-    !["settings"].includes(to.name)
+    !["settings", "dailySongs"].includes(to.name)
   ) {
     NProgress.start();
   }

src/store/mutations.js

@@ -42,4 +42,7 @@ export default {
   toggleLyrics(state) {
     state.showLyrics = !state.showLyrics;
   },
+  updateDailyTracks(state, dailyTracks) {
+    state.dailyTracks = dailyTracks;
+  },
 };

src/store/state.js

@@ -34,6 +34,7 @@ export default {
       afterCreateAddTrackID: 0,
     },
   },
+  dailyTracks: [],
   player: JSON.parse(localStorage.getItem("player")),
   settings: JSON.parse(localStorage.getItem("settings")),
   data: JSON.parse(localStorage.getItem("data")),

src/views/dailyTracks.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-show="show">
+    <div class="special-playlist">
+      <div class="title gradient-red"> 每日歌曲推荐 </div>
+      <div class="subtitle">根据你的音乐口味生成 · 每天6:00更新</div>
+    </div>
+
+    <TrackList
+      :tracks="dailyTracks"
+      type="playlist"
+      dbclickTrackFunc="dailyTracks"
+    />
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from "vuex";
+import NProgress from "nprogress";
+import { dailyRecommendTracks } from "@/api/playlist";
+
+import TrackList from "@/components/TrackList.vue";
+
+export default {
+  name: "dailyTracks",
+  components: {
+    TrackList,
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  created() {
+    if (this.dailyTracks.length === 0) {
+      NProgress.start();
+      this.loadDailyTracks();
+    } else {
+      this.show = true;
+    }
+  },
+  computed: {
+    ...mapState(["player", "data", "dailyTracks"]),
+  },
+  methods: {
+    ...mapMutations(["updateDailyTracks"]),
+    loadDailyTracks() {
+      dailyRecommendTracks().then((result) => {
+        this.updateDailyTracks(result.data.dailySongs);
+        NProgress.done();
+        this.show = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.special-playlist {
+  margin-top: 192px;
+  margin-bottom: 128px;
+  border-radius: 1.25em;
+  text-align: center;
+
+  @keyframes letterSpacing4 {
+    from {
+      letter-spacing: 0px;
+    }
+
+    to {
+      letter-spacing: 4px;
+    }
+  }
+
+  @keyframes letterSpacing1 {
+    from {
+      letter-spacing: 0px;
+    }
+
+    to {
+      letter-spacing: 1px;
+    }
+  }
+
+  .title {
+    font-size: 84px;
+    line-height: 1.05;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    letter-spacing: 4px;
+    animation-duration: 0.8s;
+    animation-name: letterSpacing4;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    // background-image: linear-gradient(
+    //   225deg,
+    //   var(--color-primary),
+    //   var(--color-primary)
+    // );
+
+    img {
+      height: 78px;
+      border-radius: 0.125em;
+      margin-right: 24px;
+    }
+  }
+  .subtitle {
+    font-size: 18px;
+    letter-spacing: 1px;
+    margin: 28px 0 54px 0;
+    animation-duration: 0.8s;
+    animation-name: letterSpacing1;
+    text-transform: uppercase;
+    color: var(--color-text);
+  }
+  .buttons {
+    margin-top: 32px;
+    display: flex;
+    justify-content: center;
+    button {
+      margin-right: 16px;
+    }
+  }
+}
+.gradient-red {
+  background-image: linear-gradient(213deg, #ff0844 0%, #ffb199 100%);
+}
+</style>

src/views/home.vue

@@ -25,8 +25,8 @@
     <div class="index-row">
       <div class="title"> For You </div>
       <div class="for-you-row">
+        <DailyTracksCard />
         <FMCard />
-        <div></div>
       </div>
     </div>
     <div class="index-row">
@@ -70,10 +70,11 @@ import NProgress from "nprogress";
 import { mapState } from "vuex";
 import CoverRow from "@/components/CoverRow.vue";
 import FMCard from "@/components/FMCard.vue";
+import DailyTracksCard from "@/components/DailyTracksCard.vue";
 
 export default {
   name: "Home",
-  components: { CoverRow, FMCard },
+  components: { CoverRow, FMCard, DailyTracksCard },
   data() {
     return {
       show: false,