(null);
+const isSongChanging = ref(false);
// 横屏检测相关
const { width, height } = useWindowSize();
@@ -530,6 +533,9 @@ const scrollToCurrentLyric = (immediate = false, customScrollerRef?: HTMLElement
watch(nowIndex, (newIndex, oldIndex) => {
console.log(`歌词索引变化: ${oldIndex} -> ${newIndex}`);
+ // 歌曲切换时不自动滚动
+ if (isSongChanging.value) return;
+
// 在竖屏全屏歌词模式下滚动
if (showFullLyrics.value) {
nextTick(() => {
@@ -980,6 +986,38 @@ watch(
{ immediate: true }
);
+// 添加对 playMusic.id 的监听，歌曲切换时滚动到顶部
+watch(
+ () => playMusic.value.id,
+ (newId, oldId) => {
+ // 只在歌曲真正切换时滚动到顶部
+ if (newId !== oldId && newId) {
+ isSongChanging.value = true;
+ // 延迟滚动，确保 nowIndex 已重置
+ setTimeout(() => {
+ // 在全屏歌词模式下滚动到顶部
+ if (showFullLyrics.value && lyricsScrollerRef.value) {
+ lyricsScrollerRef.value.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+ }
+ // 在横屏模式下滚动到顶部
+ else if (isLandscape.value && landscapeLyricsRef.value) {
+ landscapeLyricsRef.value.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+ }
+ // 延迟恢复自动滚动，等待歌词数据更新
+ setTimeout(() => {
+ isSongChanging.value = false;
+ }, 300);
+ }, 100);
+ }
+ }
+);
+
// 加载保存的配置
onMounted(() => {
const savedConfig = localStorage.getItem('music-full-config');
@@ -1024,42 +1062,6 @@ watch(isVisible, (newVal) => {
}
});
-// 通过点击跳转到歌词对应时间点
-const jumpToLyricTime = (index: number) => {
- if (lrcArray.value[index] && 'time' in lrcArray.value[index] && sound.value) {
- // 使用类型断言确保time属性存在
- const lrcItem = lrcArray.value[index] as { time: number; text: string; trText?: string };
- const time = lrcItem.time / 1000;
-
- // 更新播放位置
- sound.value.seek(time);
- nowTime.value = time;
-
- // 显示反馈动画 - 处理两种模式下的歌词行
- const normalEl = document.getElementById(`lyric-line-${index}`);
- const landscapeEl = document.getElementById(`landscape-lyric-line-${index}`);
-
- // 根据当前模式获取正确的元素并添加动画效果
- const activeEl = isLandscape.value ? landscapeEl : normalEl;
-
- if (activeEl) {
- activeEl.classList.add('clicked');
- setTimeout(() => {
- activeEl.classList.remove('clicked');
- }, 300);
- }
-
- // 如果歌词索引没有变化（例如点击当前行），手动触发滚动
- if (nowIndex.value === index) {
- if (isLandscape.value && !showFullLyrics.value) {
- scrollToCurrentLyric(true, landscapeLyricsRef.value);
- } else if (showFullLyrics.value) {
- scrollToCurrentLyric(true);
- }
- }
- }
-};
-
// 添加getLrcStyle函数
const { getLrcStyle: originalLrcStyle } = useLyricProgress();
@@ -1101,8 +1103,8 @@ const getWordStyle = (lineIndex: number, _wordIndex: number, word: any) => {
};
}
- // 当前行的逐字效果
- const currentTime = nowTime.value * 1000; // 转换为毫秒，确保与word时间单位一致
+ // 当前行的逐字效果，应用歌词矫正时间
+ const currentTime = (nowTime.value + correctionTime.value) * 1000; // 转换为毫秒，确保与word时间单位一致
// 直接使用绝对时间比较
const wordStartTime = word.startTime; // 单词开始的绝对时间（毫秒）
@@ -1874,6 +1876,10 @@ const getWordStyle = (lineIndex: number, _wordIndex: number, word: any) => {
}
}
}
+
+ .word-by-word-lyric {
+ @apply justify-start;
+ }
}
.unified-controls {