添加专辑推荐 播放进度条优化

src/App.vue

@@ -1,7 +1,9 @@
 <template>
-  <n-config-provider :theme="darkTheme">
-    <router-view></router-view>
-  </n-config-provider>
+  <div class="app">
+    <n-config-provider :theme="darkTheme">
+      <router-view></router-view>
+    </n-config-provider>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -14,4 +16,7 @@ import { darkTheme } from 'naive-ui'
 div {
   box-sizing: border-box;
 }
+.app {
+  user-select: none;
+}
 </style>

src/api/home.ts

@@ -3,6 +3,7 @@ import { IHotSinger } from "@/type/singer";
 import { ISearchKeyword } from "@/type/search";
 import { IPlayListSort } from "@/type/playlist";
 import { IRecommendMusic } from "@/type/music";
+import { IAlbumNew } from "@/type/album";
 
 interface IHotSingerParams {
   offset: number;
@@ -32,3 +33,8 @@ export const getPlaylistCategory = () => {
 export const getRecommendMusic = (params: IRecommendMusicParams) => {
   return request.get<IRecommendMusic>("/personalized/newsong", { params });
 };
+
+// 获取最新专辑推荐
+export const getNewAlbum = () => {
+  return request.get<IAlbumNew>("/album/newest");
+};

src/components/PlaylistType.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- 歌单分类列表 -->
     <div class="play-list-type">
-        <div class="title animate__animated animate__fadeInLeft">歌单分类</div>
+        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">歌单分类</div>
         <n-layout class="bg-black">
             <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
                 <span

src/components/RecommendAlbum.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="recommend-album">
+        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">最新专辑</div>
+        <div class="recommend-album-list">
+            <template v-for="(item,index) in albumData?.albums" :key="item.id">
+                <div
+                    v-if="index < 6"
+                    class="recommend-album-list-item"
+                    :class="setAnimationClass('animate__backInUp')"
+                    :style="setAnimationDelay(index, 100)"
+                >
+                    <img
+                        class="recommend-album-list-item-img"
+                        :src="item.blurPicUrl + '?param=200y200'"
+                    />
+                    <div class="recommend-album-list-item-content">{{ item.name }}</div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { getNewAlbum } from "@/api/home"
+import { ref, onMounted } from "vue";
+import type { IAlbumNew } from "@/type/album"
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+
+
+const albumData = ref<IAlbumNew>()
+const loadAlbumList = async () => {
+    const { data } = await getNewAlbum();
+    albumData.value = data
+}
+
+onMounted(() => {
+    loadAlbumList()
+})
+</script>
+
+<style lang="scss" scoped>
+.recommend-album {
+    @apply flex-1 mx-5;
+    .title {
+        @apply text-lg font-bold mb-4;
+    }
+
+    .recommend-album-list {
+        @apply grid grid-cols-2 grid-rows-3 gap-2;
+        &-item {
+            @apply rounded-xl overflow-hidden relative;
+            &-img {
+                @apply rounded-xl transition;
+            }
+            &:hover img {
+                filter: brightness(50%);
+            }
+            &-content {
+                @apply w-full h-full opacity-0 transition absolute z-10 top-0 left-0 p-4 text-xl;
+            }
+            &-content:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+</style>

src/components/RecommendSinger.vue

@@ -9,7 +9,10 @@
                 :style="setAnimationDelay(index, 100)"
                 :key="item.id"
             >
-                <div :style="setBackgroundImg(item.picUrl)" class="recommend-singer-item-bg"></div>
+                <div
+                    :style="setBackgroundImg(item.picUrl + '?param=500y500')"
+                    class="recommend-singer-item-bg"
+                ></div>
                 <div
                     class="recommend-singer-item-count p-2 text-base text-gray-200 z-10"
                 >{{ item.musicSize }}首</div>

src/components/RecommendSonglist.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="recommend-music">
-        <div class="title animate__animated animate__fadeInLeft">本周最热音乐</div>
+        <div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
         <div
             class="recommend-music-list"
             :class="setAnimationClass('animate__bounceInUp')"
@@ -40,10 +40,11 @@ onMounted(() => {
     @apply text-lg font-bold mb-4;
 }
 .recommend-music {
+    @apply flex-auto;
+    // width: 530px;
     .text-ellipsis {
         width: 100%;
     }
-    @apply flex-1 mr-96;
     &-list {
         @apply rounded-3xl p-2 w-full border border-gray-700;
         background-color: #0d0d0d;

src/layout/components/PlayBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="music-play-bar">
+    <div class="music-play-bar" :class="setAnimationClass('animate__bounceInUp')">
         <img class="play-bar-img" :src="playMusic.picUrl" />
         <div class="music-content">
             <div class="music-content-title">
@@ -48,9 +48,9 @@
 <script lang="ts" setup>
 import type { SongResult } from "@/type/music";
 import { secondToMinute } from "@/utils";
-import { c } from "naive-ui";
-import { computed, onBeforeUpdate, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useStore } from 'vuex';
+import { setAnimationClass } from "@/utils";
 
 const store = useStore();
 
@@ -99,6 +99,8 @@ const timeSlider = computed({
     get: () => nowTime.value / allTime.value * 100,
     set: (value) => {
         audio.value.currentTime = value * allTime.value / 100
+        audio.value.play()
+        store.commit("setPlayMusic", true);
     }
 })
 
@@ -127,6 +129,10 @@ const onAudio = (audio: any) => {
         nowTime.value = audio.currentTime
         // 获取总时间
         allTime.value = audio.duration
+
+        if (audio.currentTime >= audio.duration) {
+            store.commit("setPlayMusic", false);
+        }
         // 获取音量
         audioVolume.value = audio.volume
 

src/type/album.ts

@@ -0,0 +1,65 @@
+export interface IAlbumNew {
+  code: number;
+  albums: Album[];
+}
+
+interface Album {
+  name: string;
+  id: number;
+  type: string;
+  size: number;
+  picId: number;
+  blurPicUrl: string;
+  companyId: number;
+  pic: number;
+  picUrl: string;
+  publishTime: number;
+  description: string;
+  tags: string;
+  company: string;
+  briefDesc: string;
+  artist: Artist;
+  songs?: any;
+  alias: string[];
+  status: number;
+  copyrightId: number;
+  commentThreadId: string;
+  artists: Artist2[];
+  paid: boolean;
+  onSale: boolean;
+  picId_str: string;
+}
+
+interface Artist2 {
+  name: string;
+  id: number;
+  picId: number;
+  img1v1Id: number;
+  briefDesc: string;
+  picUrl: string;
+  img1v1Url: string;
+  albumSize: number;
+  alias: any[];
+  trans: string;
+  musicSize: number;
+  topicPerson: number;
+  img1v1Id_str: string;
+}
+
+interface Artist {
+  name: string;
+  id: number;
+  picId: number;
+  img1v1Id: number;
+  briefDesc: string;
+  picUrl: string;
+  img1v1Url: string;
+  albumSize: number;
+  alias: string[];
+  trans: string;
+  musicSize: number;
+  topicPerson: number;
+  picId_str?: string;
+  img1v1Id_str: string;
+  transNames?: string[];
+}

src/views/home/index.vue

@@ -8,6 +8,8 @@
         <playlist-type />
         <!-- 本周最热音乐 -->
         <recommend-songlist />
+        <!-- 推荐最新专辑 -->
+        <recommend-album />
       </div>
     </div>
   </n-layout>
@@ -17,6 +19,7 @@
 import RecommendSinger from "@/components/RecommendSinger.vue";
 import PlaylistType from "@/components/PlaylistType.vue";
 import RecommendSonglist from "@/components/RecommendSonglist.vue";
+import RecommendAlbum from "@/components/RecommendAlbum.vue";
 
 </script>