✨ feat: 添加播放历史页面

src/views/history/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="history-page">
+    <div class="title">播放历史</div>
+    <n-scrollbar :size="100">
+      <div class="history-list-content" :class="setAnimationClass('animate__bounceInLeft')">
+        <div class="history-item" v-for="(item, index) in musicList" :key="item.id"
+          :class="setAnimationClass('animate__bounceIn')" :style="setAnimationDelay(index, 30)">
+          <song-item class="history-item-content" :item="item" />
+          <div class="history-item-delete">
+            <i class="iconfont icon-close" @click="delMusic(item)"></i>
+          </div>
+        </div>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMusicHistory } from '@/hooks/MusicHistoryHook'
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+
+const {delMusic, musicList} = useMusicHistory();
+</script>
+
+<style scoped lang="scss">
+.history-page{
+  @apply h-full w-full pt-2;
+  .title{
+    @apply text-xl font-bold;
+  }
+
+  .history-list-content{
+    @apply px-4 mt-2;
+    .history-item{
+      @apply flex items-center justify-between;
+      &-content{
+        @apply flex-1;
+      }
+      &-delete{
+        @apply cursor-pointer rounded-full border-2 border-gray-400 w-8 h-8 flex justify-center items-center;
+      }
+    }
+  }
+}
+</style>

src/views/list/index.vue

@@ -97,7 +97,7 @@ watch(
 
 <style lang="scss" scoped>
 .list-page {
-  @apply relative h-full w-full pt-4;
+  @apply relative h-full w-full pt-2;
 }
 
 .recommend {

src/views/mv/index.vue

@@ -72,19 +72,25 @@ const close = () => {
 
 <style scoped lang="scss">
 .mv-list {
-  @apply relative h-full w-full pt-4;
+  @apply relative h-full w-full pt-2;
+
+  &-title {
+    @apply text-xl font-bold;
+  }
 
   &-content {
-    @apply grid gap-6 pb-28 pr-3;
-    grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
+    @apply grid gap-6 pb-28 pr-3 mt-2;
+    grid-template-columns: repeat(auto-fill, minmax(14%, 1fr));
   }
 
   .mv-item {
+    @apply p-2 rounded-lg;
+    background-color: #454545;
     &-img {
-      @apply rounded-xl overflow-hidden relative;
+      @apply rounded-lg overflow-hidden relative;
 
       &:hover img {
-        @apply hover:scale-110 transition-all duration-300 ease-in-out;
+        @apply hover:scale-110 transition-all duration-300 ease-in-out object-top;
       }
 
       &-img {
@@ -93,11 +99,11 @@ const close = () => {
 
       .top {
         @apply absolute w-full h-full top-0 left-0 flex justify-center items-center transition-all duration-300 ease-in-out cursor-pointer;
-        background-color: #00000088;
+        background-color: #0000009b;
         opacity: 0;
 
         i {
-          font-size: 50px;
+          font-size: 40px;
           transition: all 0.5s ease-in-out;
           opacity: 0;
         }
@@ -107,7 +113,7 @@ const close = () => {
         }
 
         &:hover i {
-          @apply transform scale-150 opacity-100;
+          @apply transform scale-150 opacity-80;
         }
 
         .play-count {