✨ feat: 同步 AMLL 0.2.0

Author: imsyy

package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "@applemusic-like-lyrics/core": "^0.2.0",
     "@applemusic-like-lyrics/lyric": "^0.3.0",
-    "@applemusic-like-lyrics/vue": "^0.1.5",
+    "@applemusic-like-lyrics/vue": "^0.2.0",
     "@electron-toolkit/preload": "^3.0.2",
     "@electron-toolkit/utils": "^4.0.0",
     "@imsyy/color-utils": "^1.0.2",
@@ -48,6 +48,7 @@
     "@pixi/filter-bulge-pinch": "^5.1.1",
     "@pixi/filter-color-matrix": "^7.4.3",
     "@pixi/sprite": "^7.4.3",
+    "@tanstack/vue-virtual": "^3.13.13",
     "@vueuse/core": "^13.9.0",
     "@vueuse/integrations": "^14.1.0",
     "axios": "^1.13.2",
@@ -75,8 +76,7 @@
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "plyr": "^3.8.3",
-    "sortablejs": "^1.15.6",
-    "vue-virtual-scroller": "2.0.0-beta.8"
+    "sortablejs": "^1.15.6"
   },
   "devDependencies": {
     "@electron-toolkit/preload": "^3.0.1",

pnpm-lock.yaml

@@ -54,11 +54,8 @@
                 :light="pureLyricMode"
               />
               <!-- 歌词 -->
-              <MainAMLyric
-                v-if="settingStore.useAMLyrics"
-                :key="`am-lyric-${musicStore.playSong.id}`"
-              />
-              <MainLyric v-else :key="`lyric-${musicStore.playSong.id}`" />
+              <MainAMLyric v-if="settingStore.useAMLyrics" />
+              <MainLyric v-else />
             </div>
           </div>
         </Transition>

src/components/Player/FullPlayer.vue

@@ -3,6 +3,9 @@
     <div
       :key="amLyricsData?.[0]?.words?.length"
       :class="['lyric-am', { pure: statusStore.pureLyricMode }]"
+      :style="{
+        '--amll-lp-color': 'rgb(var(--main-cover-color))',
+      }"
     >
       <div v-if="statusStore.lyricLoading" class="lyric-loading">歌词正在加载中...</div>
       <LyricPlayer
@@ -15,9 +18,10 @@
         :enableScale="settingStore.useAMSpring"
         :alignPosition="settingStore.lyricsScrollPosition === 'center' ? 0.5 : 0.2"
         :enableBlur="settingStore.lyricsBlur"
+        :hidePassedLines="settingStore.hidePassedLines"
+        :wordFadeWidth="settingStore.wordFadeWidth"
         :style="{
-          '--amll-lyric-view-color': 'rgb(var(--main-cover-color))',
-          '--amll-lyric-player-font-size': settingStore.lyricFontSize + 'px',
+          '--amll-lp-font-size': settingStore.lyricFontSize + 'px',
           '--ja-font-family':
             settingStore.japaneseLyricFont !== 'follow' ? settingStore.japaneseLyricFont : '',
           '--en-font-family':
@@ -38,10 +42,12 @@
 
 <script setup lang="ts">
 import { LyricPlayer } from "@applemusic-like-lyrics/vue";
-import { type LyricLine } from "@applemusic-like-lyrics/lyric";
+import { type LyricLine } from "@applemusic-like-lyrics/core";
 import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import { getLyricLanguage } from "@/utils/format";
 import { usePlayerController } from "@/core/player/PlayerController";
+import "@applemusic-like-lyrics/core/style.css";
+import { cloneDeep } from "lodash-es";
 
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
@@ -61,7 +67,7 @@ const { pause: pauseSeek, resume: resumeSeek } = useRafFn(() => {
 });
 
 // 当前歌词
-const amLyricsData = computed<LyricLine[]>(() => {
+const amLyricsData = computed(() => {
   const { songLyric } = musicStore;
   if (!songLyric) return [];
 
@@ -72,7 +78,7 @@ const amLyricsData = computed<LyricLine[]>(() => {
   // 简单检查歌词有效性
   if (!Array.isArray(lyrics) || lyrics.length === 0) return [];
 
-  return lyrics;
+  return cloneDeep(lyrics) as LyricLine[];
 });
 
 // 进度跳转
@@ -86,12 +92,12 @@ const jumpSeek = (line: any) => {
 
 // 处理歌词语言
 const processLyricLanguage = (player = lyricPlayerRef.value) => {
-  const lyricLinesEl = player?.lyricPlayer?.lyricLinesEl;
-  if (!lyricLinesEl || lyricLinesEl.length === 0) {
+  const lyricLineObjects = player?.lyricPlayer?.currentLyricLineObjects;
+  if (!Array.isArray(lyricLineObjects) || lyricLineObjects.length === 0) {
     return;
   }
   // 遍历歌词行
-  for (let e of lyricLinesEl) {
+  for (let e of lyricLineObjects) {
     // 获取歌词行内容 (合并逐字歌词为一句)
     const content = e.lyricLine.words.map((word: any) => word.word).join("");
     // 获取歌词语言
@@ -177,7 +183,7 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--amll-lyric-view-color, #efefef);
+  color: var(--amll-lp-color, #efefef);
   font-size: 22px;
 }
 </style>

src/components/Player/MainAMLyric.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    :key="`lyric-${musicStore.playSong.id}`"
     :style="{
       '--lrc-size': settingStore.lyricFontSize + 'px',
       '--lrc-tran-size': settingStore.lyricTranFontSize + 'px',

src/components/Player/MainLyric.vue

@@ -385,20 +385,44 @@
         </div>
         <n-switch v-model:value="settingStore.useAMLyrics" class="set" :round="false" />
       </n-card>
-      <n-card class="set-item">
-        <div class="label">
-          <n-text class="name">歌词弹簧效果</n-text>
-          <n-text class="tip" :depth="3">
-            是否使用物理弹簧算法实现歌词动画效果，需要高性能设备
-          </n-text>
-        </div>
-        <n-switch
-          v-model:value="settingStore.useAMSpring"
-          class="set"
-          :round="false"
-          :disabled="!settingStore.useAMLyrics"
-        />
-      </n-card>
+      <n-collapse-transition :show="settingStore.useAMLyrics">
+        <n-card class="set-item">
+          <div class="label">
+            <n-text class="name">歌词弹簧效果</n-text>
+            <n-text class="tip" :depth="3">
+              是否使用物理弹簧算法实现歌词动画效果，需要高性能设备
+            </n-text>
+          </div>
+          <n-switch v-model:value="settingStore.useAMSpring" class="set" :round="false" />
+        </n-card>
+        <n-card class="set-item">
+          <div class="label">
+            <n-text class="name">隐藏已播放歌词</n-text>
+            <n-text class="tip" :depth="3">是否隐藏已播放歌词</n-text>
+          </div>
+          <n-switch v-model:value="settingStore.hidePassedLines" class="set" :round="false" />
+        </n-card>
+        <n-card class="set-item">
+          <div class="label">
+            <n-text class="name">文字动画的渐变宽度</n-text>
+            <n-text class="tip" :depth="3">
+              单位以歌词行的主文字字体大小的倍数为单位 <br />
+              默认为 0.5，即一个全角字符的一半宽度 <br />
+              若模拟 Apple Music for Android 的效果，可以设为 1 <br />
+              若模拟 Apple Music for iPad 的效果，可以设为 0.5 <br />
+              若需近乎禁用渐变，可设为非常接近 0 的小数，如 0.01
+            </n-text>
+          </div>
+          <n-input-number
+            v-model:value="settingStore.wordFadeWidth"
+            class="set"
+            :min="0.01"
+            :max="1"
+            :step="0.01"
+            :round="false"
+          />
+        </n-card>
+      </n-collapse-transition>
     </div>
     <div v-if="isElectron" ref="desktopLyricRef" class="set-list">
       <n-h3 prefix="bar">