fix: 修复逐字歌词导致的一系列问题

src/components/Player/BigPlayer.vue

@@ -187,10 +187,12 @@ const toComment = () => {
 // 歌词滚动
 const lyricsScroll = (index) => {
   const type = setting.lyricsBlock;
-  const lrcType = music.getPlaySongLyric.hasYrc ? "yrc" : "lrc";
+  const lrcType =
+    !music.getPlaySongLyric.hasYrc || !setting.showYrc ? "lrc" : "yrc";
   const el = document.getElementById(
-    `${lrcType}${type === "center" ? index : index - 2}`
+    `${lrcType}${type === "center" ? index : index - 1}`
   );
+  console.log(type, lrcType, index);
   if (el && !lrcMouseStatus.value) {
     el.scrollIntoView({
       behavior: "smooth",
@@ -430,100 +432,6 @@ watch(
             }
           }
         }
-        .lrc-all {
-          margin-right: 20%;
-          scrollbar-width: none;
-          // max-width: 460px;
-          max-width: 52vh;
-          overflow: auto;
-          mask: linear-gradient(
-            180deg,
-            hsla(0, 0%, 100%, 0) 0,
-            hsla(0, 0%, 100%, 0.6) 15%,
-            #fff 25%,
-            #fff 75%,
-            hsla(0, 0%, 100%, 0.6) 85%,
-            hsla(0, 0%, 100%, 0)
-          );
-          -webkit-mask: linear-gradient(
-            180deg,
-            hsla(0, 0%, 100%, 0) 0,
-            hsla(0, 0%, 100%, 0.6) 15%,
-            #fff 25%,
-            #fff 75%,
-            hsla(0, 0%, 100%, 0.6) 85%,
-            hsla(0, 0%, 100%, 0)
-          );
-          &::-webkit-scrollbar {
-            display: none;
-          }
-          &.cover {
-            height: 80vh;
-          }
-          &.record {
-            height: 60vh;
-          }
-          &:hover {
-            .lrc-text {
-              &.blur {
-                filter: blur(0) !important;
-              }
-            }
-          }
-          .placeholder {
-            width: 100%;
-            height: 50%;
-          }
-          .lrc {
-            opacity: 0.4;
-            transition: all 0.3s;
-            // display: flex;
-            // flex-direction: column;
-            // margin-bottom: 4px;
-            // padding: 12px 20px;
-            margin-bottom: 0.8vh;
-            padding: 1.8vh 3vh;
-            border-radius: 8px;
-            transition: all 0.3s;
-            transform-origin: left center;
-            cursor: pointer;
-            .lrc-text {
-              display: flex;
-              flex-direction: column;
-              transition: all 0.35s ease-in-out;
-              transform: scale(0.95);
-              transform-origin: left center;
-              .lyric {
-                transition: all 0.3s;
-                // font-size: 2.4vh;
-              }
-              .lyric-fy {
-                margin-top: 2px;
-                transition: all 0.3s;
-                opacity: 0.8;
-                // font-size: 2vh;
-              }
-            }
-            &.on {
-              opacity: 1;
-              .lrc-text {
-                transform: scale(1.05);
-                .lyric {
-                  font-weight: bold;
-                  text-shadow: 0px 0px 30px #ffffff40;
-                }
-              }
-            }
-            &:hover {
-              @media (min-width: 768px) {
-                background-color: #ffffff20;
-              }
-            }
-            &:active {
-              transform: scale(0.95);
-            }
-          }
-        }
         .menu {
           opacity: 0;
           padding: 0 20px;

src/components/Player/CountDown.vue

@@ -1,6 +1,10 @@
 <template>
   <Transition mode="out-in">
-    <div class="countdown" v-if="remainingPoint <= 2">
+    <div
+      class="countdown"
+      :style="{ animationPlayState: music.getPlayState ? 'running' : 'paused' }"
+      v-if="remainingPoint <= 2"
+    >
       <span class="point" :class="remainingPoint > 2 ? 'hidden' : null">●</span>
       <span class="point" :class="remainingPoint > 1 ? 'hidden' : null">●</span>
       <span class="point" :class="remainingPoint > 0 ? 'hidden' : null">●</span>
@@ -16,7 +20,11 @@ const music = musicStore();
 // 剩余点数
 const remainingPoint = ref(0);
 // 总时长
-const totalDuration = ref(music.getPlaySongLyric?.lrc[0].time);
+const totalDuration = ref(
+  music.getPlaySongLyric.hasYrc
+    ? music.getPlaySongLyric?.yrc[0].time
+    : music.getPlaySongLyric?.lrc[0].time
+);
 
 // 监听歌曲时长变化
 watch(
@@ -32,7 +40,9 @@ watch(
 watch(
   () => music.getPlaySongLyric?.lrc,
   (val) => {
-    totalDuration.value = val[0].time;
+    totalDuration.value = music.getPlaySongLyric.hasYrc
+      ? music.getPlaySongLyric?.yrc[0].time
+      : val[0].time;
     remainingPoint.value = 0;
   }
 );

src/components/Player/RollingLyrics.vue

@@ -2,9 +2,10 @@
   <!-- 歌词滚动 -->
   <div
     v-if="music.getPlaySongLyric.lrc[0]"
-    :class="
-      setting.playerStyle === 'cover' ? 'lrc-all cover' : 'lrc-all record'
-    "
+    :class="[
+      setting.playerStyle === 'cover' ? 'lrc-all cover' : 'lrc-all record',
+      setting.lyricsBlock === 'center' ? 'center' : 'top',
+    ]"
     :style="
       setting.lyricsPosition === 'center'
         ? { textAlign: 'center', paddingRight: '0' }
@@ -13,11 +14,13 @@
   >
     <div
       class="placeholder"
-      :id="music.getPlaySongLyric.hasYrc ? 'yrc-1' : 'lrc-1'"
+      :id="
+        !music.getPlaySongLyric.hasYrc || !setting.showYrc ? 'lrc-1' : 'yrc-1'
+      "
     >
       <CountDown :style="{ fontSize: setting.lyricsFontSize + 'vh' }" />
     </div>
-    <template v-if="!music.getPlaySongLyric.hasYrc">
+    <template v-if="!music.getPlaySongLyric.hasYrc || !setting.showYrc">
       <div
         v-for="(item, index) in music.getPlaySongLyric.lrc"
         :class="music.getPlaySongLyricIndex == index ? 'lrc on' : 'lrc'"
@@ -48,7 +51,7 @@
               setting.getShowTransl &&
               item.tran
             "
-            :style="{ fontSize: setting.lyricsFontSize - 0.4 + 'vh' }"
+            :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
             class="lyric-fy"
           >
             {{ item.tran }}</span
@@ -64,18 +67,29 @@
         :id="'yrc' + index"
         @click="lrcTextClick(item.time)"
       >
-        <div class="yrc-text">
-          <div class="lyric">
+        <div
+          :class="setting.lyricsBlur ? 'yrc-text blur' : 'yrc-text'"
+          :style="{
+            transformOrigin:
+              setting.lyricsPosition === 'center' ? 'center' : null,
+            filter: setting.lyricsBlur
+              ? `blur(${getFilter(music.getPlaySongLyricIndex, index)}px)`
+              : null,
+          }"
+        >
+          <div
+            class="lyric"
+            :style="{ fontSize: setting.lyricsFontSize + 'vh' }"
+          >
             <span
               v-for="(v, i) in item.content"
               :key="i"
               :style="{
-                '--dur': v.duration + 's',
-                fontSize: setting.lyricsFontSize + 'vh',
+                '--dur': v.duration - 0.2 + 's',
               }"
               :class="
                 music.getPlaySongLyricIndex == index &&
-                music.getPlaySongTime.currentTime >= v.time
+                music.getPlaySongTime.currentTime + 0.2 > v.time
                   ? 'text fill'
                   : 'text'
               "
@@ -89,7 +103,7 @@
               setting.getShowTransl &&
               item.tran
             "
-            :style="{ fontSize: setting.lyricsFontSize - 0.4 + 'vh' }"
+            :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
             class="lyric-fy"
           >
             {{ item.tran }}</span
@@ -133,24 +147,6 @@ const lrcTextClick = (time) => {
   // max-width: 460px;
   max-width: 52vh;
   overflow: auto;
-  mask: linear-gradient(
-    180deg,
-    hsla(0, 0%, 100%, 0) 0,
-    hsla(0, 0%, 100%, 0.6) 15%,
-    #fff 25%,
-    #fff 75%,
-    hsla(0, 0%, 100%, 0.6) 85%,
-    hsla(0, 0%, 100%, 0)
-  );
-  -webkit-mask: linear-gradient(
-    180deg,
-    hsla(0, 0%, 100%, 0) 0,
-    hsla(0, 0%, 100%, 0.6) 15%,
-    #fff 25%,
-    #fff 75%,
-    hsla(0, 0%, 100%, 0.6) 85%,
-    hsla(0, 0%, 100%, 0)
-  );
   &::-webkit-scrollbar {
     display: none;
   }
@@ -160,6 +156,46 @@ const lrcTextClick = (time) => {
   &.record {
     height: 60vh;
   }
+  &.center {
+    mask: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.6) 15%,
+      #fff 25%,
+      #fff 75%,
+      hsla(0, 0%, 100%, 0.6) 85%,
+      hsla(0, 0%, 100%, 0)
+    );
+    -webkit-mask: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.6) 15%,
+      #fff 25%,
+      #fff 75%,
+      hsla(0, 0%, 100%, 0.6) 85%,
+      hsla(0, 0%, 100%, 0)
+    );
+  }
+  &.top {
+    mask: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.6) 5%,
+      #fff 10%,
+      #fff 75%,
+      hsla(0, 0%, 100%, 0.6) 85%,
+      hsla(0, 0%, 100%, 0)
+    );
+    -webkit-mask: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.6) 5%,
+      #fff 10%,
+      #fff 75%,
+      hsla(0, 0%, 100%, 0.6) 85%,
+      hsla(0, 0%, 100%, 0)
+    );
+  }
   &:hover {
     .lrc-text {
       &.blur {
@@ -184,15 +220,11 @@ const lrcTextClick = (time) => {
   .yrc {
     opacity: 0.4;
     transition: all 0.3s;
-    // display: flex;
-    // flex-direction: column;
-    // margin-bottom: 4px;
-    // padding: 12px 20px;
     margin-bottom: 0.8vh;
     padding: 1.8vh 4vh 1.8vh 3vh;
     border-radius: 8px;
     transition: all 0.3s;
-    transform-origin: left center;
+    transform-origin: left bottom;
     cursor: pointer;
     .lrc-text,
     .yrc-text {
@@ -200,8 +232,9 @@ const lrcTextClick = (time) => {
       flex-direction: column;
       transition: all 0.35s ease-in-out;
       transform: scale(0.95);
-      transform-origin: left center;
+      transform-origin: left bottom;
       .lyric {
+        font-weight: bold;
         transition: all 0.3s;
         .text {
           transition: all 0.3s;
@@ -214,7 +247,7 @@ const lrcTextClick = (time) => {
             background-clip: text;
             -webkit-background-clip: text;
             color: #ffffff66;
-            animation: toRight var(--dur) forwards ease-in-out;
+            animation: toRight var(--dur) forwards linear;
           }
           @keyframes toRight {
             to {
@@ -224,9 +257,9 @@ const lrcTextClick = (time) => {
         }
       }
       .lyric-fy {
-        margin-top: 2px;
+        margin-top: 4px;
         transition: all 0.3s;
-        opacity: 0.8;
+        opacity: 0.6;
       }
     }
     &.on {
@@ -234,7 +267,6 @@ const lrcTextClick = (time) => {
       .lrc-text {
         transform: scale(1.05);
         .lyric {
-          font-weight: bold;
           text-shadow: 0px 0px 30px #ffffff40;
         }
       }
@@ -254,5 +286,8 @@ const lrcTextClick = (time) => {
       transform: scale(0.95);
     }
   }
+  .yrc {
+    opacity: 0.6;
+  }
 }
 </style>

src/components/Player/index.vue

@@ -50,6 +50,24 @@
                   class="text-hidden"
                   :artistsData="music.getPlaySongData.artist"
                 />
+                <n-text
+                  v-else-if="
+                    setting.showYrc &&
+                    music.getPlaySongLyricIndex != -1 &&
+                    music.getPlaySongLyric.hasYrc
+                  "
+                  class="lrc text-hidden"
+                >
+                  <n-text
+                    v-for="item in music.getPlaySongLyric.yrc[
+                      music.getPlaySongLyricIndex
+                    ].content"
+                    :key="item"
+                    :depth="3"
+                  >
+                    {{ item.content }}
+                  </n-text>
+                </n-text>
                 <n-text
                   v-else-if="
                     music.getPlaySongLyricIndex != -1 &&

src/store/musicData.js

@@ -3,7 +3,7 @@ import { getSongTime, getSongPlayingTime } from "@/utils/timeTools.js";
 import { getPersonalFm, setFmTrash } from "@/api/home";
 import { getLikelist, setLikeSong } from "@/api/user";
 import { getPlayListCatlist } from "@/api/playlist";
-import { userStore } from "@/store";
+import { userStore, settingStore } from "@/store";
 import { NIcon } from "naive-ui";
 import { PlayCycle, PlayOnce, ShuffleOne } from "@icon-park/vue-next";
 import parseLyric from "@/utils/parseLyric";
@@ -337,8 +337,9 @@ const useMusicDataStore = defineStore("musicData", {
         );
       }
       // 计算当前歌词播放索引
-      const lrcType = this.playSongLyric.hasYrc;
-      const lyrics = lrcType ? this.playSongLyric.yrc : this.playSongLyric.lrc;
+      const setting = settingStore();
+      const lrcType = !this.playSongLyric.hasYrc || !setting.showYrc;
+      const lyrics = lrcType ? this.playSongLyric.lrc : this.playSongLyric.yrc;
       const index = lyrics.findIndex((v) => v.time >= value.currentTime);
       this.playSongLyricIndex = index === -1 ? lyrics.length - 1 : index - 1;
     },

src/store/settingData.js

@@ -20,6 +20,8 @@ const useSettingDataStore = defineStore("settingData", {
       playerStyle: "cover",
       // 底栏歌词显示
       bottomLyricShow: true,
+      // 是否显示逐字歌词
+      showYrc: true,
       // 是否显示歌词翻译
       showTransl: true,
       // 歌曲音质
@@ -29,7 +31,7 @@ const useSettingDataStore = defineStore("settingData", {
       // 歌词滚动位置
       lyricsBlock: "center",
       // 歌词大小
-      lyricsFontSize: 2.8,
+      lyricsFontSize: 3.6,
       // 歌词模糊
       lyricsBlur: false,
       // 音乐频谱

src/style/global.scss

@@ -9,7 +9,7 @@
 html,
 body,
 #app {
-  -webkit-font-smoothing: subpixel-antialiased;
+  -webkit-font-smoothing: antialiased;
   font-family: "HarmonyOS_Regular", sans-serif !important;
 }
 

src/views/Setting/SettingView.vue

@@ -59,6 +59,13 @@
       <div class="name">显示歌词翻译</div>
       <n-switch v-model:value="showTransl" :round="false" />
     </n-card>
+    <n-card class="set-item">
+      <div class="name">
+        显示逐字歌词
+        <span class="tip">是否在歌曲具有逐字歌词时显示，实验性功能</span>
+      </div>
+      <n-switch v-model:value="showYrc" :round="false" />
+    </n-card>
     <n-card class="set-item">
       <div class="name">
         智能暂停滚动
@@ -85,13 +92,13 @@
       <n-slider
         v-model:value="lyricsFontSize"
         :tooltip="false"
-        :max="3.4"
-        :min="2.2"
+        :max="4"
+        :min="3"
         :step="0.01"
         :marks="{
-          2.2: '最小',
-          2.8: '默认',
-          3.4: '最大',
+          3: '最小',
+          3.6: '默认',
+          4: '最大',
         }"
       />
       <div :class="lyricsBlur ? 'more blur' : 'more'">
@@ -137,14 +144,14 @@
     <n-card class="set-item">
       <div class="name">
         歌词模糊
-        <span class="tip">实验性功能，未播放或已播放歌词模糊显示</span>
+        <span class="tip">未播放或已播放歌词模糊显示，实验性功能</span>
       </div>
       <n-switch v-model:value="lyricsBlur" :round="false" />
     </n-card>
     <n-card class="set-item">
       <div class="name">
         显示音乐频谱
-        <span class="tip">实验性功能，可能会导致一些意想不到的后果</span>
+        <span class="tip">可能会导致一些意想不到的后果，实验性功能</span>
       </div>
       <n-switch
         v-model:value="musicFrequency"
@@ -187,6 +194,7 @@ const {
   autoSignIn,
   lrcMousePause,
   searchHistory,
+  showYrc,
 } = storeToRefs(setting);
 
 // 深浅模式