feat: 新增纯净歌词模式

src/components/Player/FullPlayer.vue

@@ -11,7 +11,6 @@
       }"
       class="full-player"
       @mousemove="controlShowChange"
-      @mouseleave="playerControlShow = false"
     >
       <!-- 遮罩 -->
       <Transition name="fade" mode="out-in">
@@ -49,7 +48,12 @@
       <!-- 按钮 -->
       <Transition name="fade" mode="out-in">
         <div v-show="playerControlShow" class="menu">
-          <div class="left"></div>
+          <div class="left">
+            <!-- 歌词模式 -->
+            <div v-if="isHasLrc" class="n-icon" @click="pureLyricMode = !pureLyricMode">
+              <n-text>词</n-text>
+            </div>
+          </div>
           <div class="right">
             <!-- 全屏切换 -->
             <n-icon @click.stop="screenfullChange">
@@ -68,6 +72,7 @@
       <div
         :class="{
           content: true,
+          pure: pureLyricMode && isHasLrc,
           'no-lrc': !isHasLrc,
         }"
       >
@@ -157,9 +162,17 @@
           </div>
         </Transition>
       </div>
-      <div class="right">
+      <div
+        :class="{
+          right: true,
+          pure: pureLyricMode && isHasLrc,
+        }"
+      >
         <!-- 唱片模式下信息 -->
-        <div v-if="playCoverType === 'record' && isHasLrc" class="data">
+        <div
+          v-if="(pureLyricMode && isHasLrc) || (playCoverType === 'record' && isHasLrc)"
+          class="data"
+        >
           <div class="name">
             <span class="name-text">{{ music.getPlaySongData.name || "未知曲目" }}</span>
             <span v-if="music.getPlaySongData.alia" class="name-alias">
@@ -244,6 +257,7 @@ const {
   playUseOtherSource,
   coverTheme,
   coverBackground,
+  pureLyricMode,
 } = storeToRefs(status);
 
 // 是否有歌词
@@ -388,6 +402,17 @@ onUnmounted(() => {
       justify-content: flex-end;
       flex: 1;
     }
+    .left {
+      justify-content: flex-start;
+      .n-icon {
+        margin-left: 0;
+        margin-right: 12px;
+        .n-text {
+          font-size: 26px;
+          font-weight: bold;
+        }
+      }
+    }
     .n-icon {
       margin-left: 12px;
       width: 40px;
@@ -420,10 +445,10 @@ onUnmounted(() => {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transition: transform 0.3s;
-    &.no-lrc {
-      transform: translateX(50%);
-    }
+    transition:
+      transform 0.3s,
+      width 0.3s,
+      opacity 0.3s;
     .data {
       width: 70%;
       max-width: 55vh;
@@ -510,15 +535,30 @@ onUnmounted(() => {
         }
       }
       &.record {
+        width: 100%;
         margin-top: 20px;
         .desc {
           align-items: center;
+          .title {
+            .name {
+              text-align: center;
+            }
+          }
         }
       }
     }
+    &.no-lrc {
+      transform: translateX(50%);
+    }
+    &.pure {
+      width: 0;
+      opacity: 0;
+      transform: translateX(-100%);
+    }
   }
   .right {
     width: 50%;
+    transition: width 0.3s;
     .data {
       padding: 0 80px 0 24px;
       margin-bottom: 26px;
@@ -592,6 +632,22 @@ onUnmounted(() => {
         }
       }
     }
+    &.pure {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .data {
+        padding: 0 80px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .other,
+        .name {
+          align-items: center;
+        }
+      }
+    }
   }
   // 全局
   span {

src/components/Player/Lyric.vue

@@ -4,7 +4,7 @@
     :style="{
       cursor: cursorShow ? 'pointer' : 'none',
     }"
-    :class="['lyric', `lyric-${lyricsPosition}`, playCoverType]"
+    :class="['lyric', `lyric-${lyricsPosition}`, { pure: pureLyricMode }, playCoverType]"
     @mouseenter="lrcMouseStatus = lrcMousePause ? true : false"
     @mouseleave="lrcAllLeave"
   >
@@ -34,6 +34,11 @@
               :id="'lrc' + index"
               :key="index"
               :class="{ 'lrc-line': true, on: Number(playSongLyricIndex) === index, islrc: true }"
+              :style="{
+                filter: lyricsBlur
+                  ? `blur(${Math.min(Math.abs(Number(playSongLyricIndex) - index) * 1.5, 10)}px)`
+                  : 'blur(0)',
+              }"
               @click.stop="jumpSeek(item?.time)"
             >
               <!-- 歌词 -->
@@ -143,7 +148,7 @@ const props = defineProps({
 const music = musicData();
 const settings = siteSettings();
 const status = siteStatus();
-const { playSeek } = storeToRefs(status);
+const { playSeek, pureLyricMode } = storeToRefs(status);
 const { playSongLyric, playSongLyricIndex } = storeToRefs(music);
 const {
   showYrc,
@@ -244,6 +249,10 @@ watch(
   () => playSongLyricIndex.value,
   (val) => lyricsScroll(val),
 );
+watch(
+  () => pureLyricMode.value,
+  () => lyricsScroll(playSongLyricIndex.value),
+);
 
 onMounted(() => {
   nextTick().then(() => {
@@ -282,6 +291,9 @@ onMounted(() => {
     hsla(0, 0%, 100%, 0.6) 85%,
     hsla(0, 0%, 100%, 0)
   );
+  :deep(.n-scrollbar-rail) {
+    display: none;
+  }
   :deep(.n-scrollbar-content) {
     padding-left: 10px;
     padding-right: 80px;
@@ -443,18 +455,19 @@ onMounted(() => {
       }
     }
   }
-  &.lyric-center {
+  &.lyric-center,
+  &.pure {
     span {
-      text-align: center;
+      text-align: center !important;
     }
     .placeholder {
-      justify-content: center;
+      justify-content: center !important;
     }
     .lrc-line {
-      transform-origin: center;
-      align-items: center;
+      transform-origin: center !important;
+      align-items: center !important;
       .lrc-content {
-        justify-content: center;
+        justify-content: center !important;
       }
     }
   }
@@ -473,7 +486,13 @@ onMounted(() => {
       }
     }
   }
-  &.record {
+  &.pure {
+    :deep(.n-scrollbar-content) {
+      padding: 0 80px;
+    }
+  }
+  &.record,
+  &.pure {
     height: calc(100vh - 340px);
     margin-bottom: 20px;
     .lrc-line {

src/stores/siteStatus.js

@@ -28,6 +28,8 @@ const useSiteStatusStore = defineStore("siteStatus", {
       // 封面主题
       coverTheme: {},
       coverBackground: null,
+      // 纯净歌词模式
+      pureLyricMode: false,
     };
   },
   getters: {},
@@ -37,7 +39,7 @@ const useSiteStatusStore = defineStore("siteStatus", {
     {
       key: "siteStatus",
       storage: localStorage,
-      paths: ["asideMenuCollapsed"],
+      paths: ["asideMenuCollapsed", "pureLyricMode"],
     },
   ],
 });

src/style/animate.scss

@@ -62,6 +62,20 @@
   transform: translateY(100%);
 }
 
+// left
+.left-enter-active,
+.left-leave-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition:
+    transform 0.3s,
+    opacity 0.3s;
+}
+.left-enter-from,
+.left-leave-to {
+  transform: translateX(-100%);
+}
+
 @keyframes skeleton-loading {
   0% {
     background-position: 100% 50%;