Astrian/msr-mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix: update language attribute in HTML and adjust script source path for consistency

Browse Source 
refactor(ScrollingLyrics): simplify markup and improve readability of lyrics rendering logic
This commit is contained in:
Astrian Zheng 2025-05-26 20:30:55 +10:00
parent 5a200edd11
commit d8d1284c56
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 134 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.vue
View File

@ -20,33 +20,40 @@ const route = useRoute()
})()"> })()">
<li> <li>
<RouterLink to="/"> <RouterLink to="/">
<span class="text-4xl" :class="route.path === '/' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">浏览</span> <span class="text-4xl"
:class="route.path === '/' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">浏览</span>
</RouterLink> </RouterLink>
</li> </li>
<li> <li>
<RouterLink to="/lucky" :class="route.path === '/lucky'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'"> <RouterLink to="/lucky"
:class="route.path === '/lucky' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
<span class="text-4xl">手气不错</span> <span class="text-4xl">手气不错</span>
</RouterLink> </RouterLink>
</li> </li>
<li> <li>
<RouterLink to="/library" :class="route.path === '/library'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'"> <RouterLink to="/library"
:class="route.path === '/library' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
<span class="text-4xl">收藏库</span> <span class="text-4xl">收藏库</span>
</RouterLink> </RouterLink>
</li> </li>
</ul> </ul>
<div v-else> <div v-else>
<button class="text-white w-9 h-9 bg-white/5 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center" @click="$router.back()"> <button
class="text-white w-9 h-9 bg-white/5 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"
@click="$router.back()">
<LeftArrowIcon :size="4" /> <LeftArrowIcon :size="4" />
</button> </button>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<button class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"> <button
class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center">
<SearchIcon :size="4" /> <SearchIcon :size="4" />
</button> </button>
<button class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center"> <button
class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center">
<CorgIcon :size="4" /> <CorgIcon :size="4" />
</button> </button>

102
src/components/ScrollingLyrics.vue
View File

@ -1,51 +1,36 @@
<template> <template>
<div <div class="relative overflow-hidden h-full w-[40rem]" ref="lyricsContainer" @wheel="handleWheel">
class="relative overflow-hidden h-full w-[40rem]"
ref="lyricsContainer"
@wheel="handleWheel"
>
<!-- 歌词滚动区域 --> <!-- 歌词滚动区域 -->
<div <div class="relative" ref="lyricsWrapper">
class="relative"
ref="lyricsWrapper"
>
<!-- 顶部填充 --> <!-- 顶部填充 -->
<div class="h-1/2 pointer-events-none"></div> <div class="h-1/2 pointer-events-none"></div>
<div <div v-for="(line, index) in parsedLyrics" :key="index" :ref="el => setLineRef(el as HTMLElement, index)"
v-for="(line, index) in parsedLyrics"
:key="index"
:ref="el => setLineRef(el as HTMLElement, index)"
class="py-8 px-16 cursor-pointer transition-all duration-300 hover:scale-105" class="py-8 px-16 cursor-pointer transition-all duration-300 hover:scale-105"
@click="handleLineClick(line, index)" @click="handleLineClick(line, index)">
>
<div v-if="line.type === 'lyric'" class="relative"> <div v-if="line.type === 'lyric'" class="relative">
<!-- 背景模糊文字 --> <!-- 背景模糊文字 -->
<div <div class="text-3xl font-bold transition-all duration-500" :class="[
class="text-3xl font-bold transition-all duration-500"
:class="[
currentLineIndex === index ? 'text-black/80 blur-xl' : 'text-black/20 blur-2xl' currentLineIndex === index ? 'text-black/80 blur-xl' : 'text-black/20 blur-2xl'
]" ]">
>
{{ line.text }} {{ line.text }}
</div> </div>
<!-- 前景清晰文字 --> <!-- 前景清晰文字 -->
<div <div class="absolute top-0 left-0 w-full text-3xl font-bold transition-all duration-500" :class="[
class="absolute top-0 left-0 w-full text-3xl font-bold transition-all duration-500"
:class="[
currentLineIndex === index currentLineIndex === index
? 'text-white scale-110' ? 'text-white scale-110'
: index < currentLineIndex : index < currentLineIndex
? userScrolling ? 'text-white/60' : 'text-white/60 blur-sm' ? userScrolling ? 'text-white/60' : 'text-white/60 blur-sm'
: userScrolling ? 'text-white/40' : 'text-white/40 blur-sm' : userScrolling ? 'text-white/40' : 'text-white/40 blur-sm'
]" ]">
>
{{ line.text }} {{ line.text }}
</div> </div>
</div> </div>
<div v-else-if="line.type === 'gap'" class="flex justify-center items-center py-4"> <div v-else-if="line.type === 'gap'" class="flex items-center gap-2">
<div class="w-16 h-px rounded-full"></div> <div v-for="dot in 3" :key="dot" class="bg-white rounded-full"
:class="currentLineIndex === index ? 'w-4 h-4' : ''"
:style="{ opacity: getGapDotOpacities(line)[dot - 1] }" />
</div> </div>
</div> </div>
@ -54,49 +39,35 @@
</div> </div>
<!-- 歌词控制面板 --> <!-- 歌词控制面板 -->
<div <div class="absolute top-4 right-4 flex gap-2 opacity-0 transition-opacity duration-300 hover:opacity-100"
class="absolute top-4 right-4 flex gap-2 opacity-0 transition-opacity duration-300 hover:opacity-100" ref="controlPanel">
ref="controlPanel" <button @click="toggleAutoScroll"
>
<button
@click="toggleAutoScroll"
class="px-3 py-1 rounded-full text-xs backdrop-blur-md text-white/80 hover:text-white transition-all duration-200" class="px-3 py-1 rounded-full text-xs backdrop-blur-md text-white/80 hover:text-white transition-all duration-200"
:class="[ :class="[
autoScroll autoScroll
? 'bg-white/20 shadow-lg' ? 'bg-white/20 shadow-lg'
: 'bg-black/20 hover:bg-black/30' : 'bg-black/20 hover:bg-black/30'
]" ]">
>
{{ autoScroll ? '自动' : '手动' }} {{ autoScroll ? '自动' : '手动' }}
</button> </button>
<button <button @click="resetScroll"
@click="resetScroll" class="px-3 py-1 rounded-full text-xs bg-black/20 backdrop-blur-md text-white/80 hover:bg-black/30 hover:text-white transition-all duration-200">
class="px-3 py-1 rounded-full text-xs bg-black/20 backdrop-blur-md text-white/80 hover:bg-black/30 hover:text-white transition-all duration-200"
>
重置 重置
</button> </button>
</div> </div>
<!-- 滚动指示器 --> <!-- 滚动指示器 -->
<div <div class="absolute right-2 top-1/4 bottom-1/4 w-1 bg-white/10 rounded-full overflow-hidden"
class="absolute right-2 top-1/4 bottom-1/4 w-1 bg-white/10 rounded-full overflow-hidden" v-if="parsedLyrics.length > 5">
v-if="parsedLyrics.length > 5" <div class="w-full bg-white/40 rounded-full transition-all duration-300" :style="{
>
<div
class="w-full bg-white/40 rounded-full transition-all duration-300"
:style="{
height: scrollIndicatorHeight + '%', height: scrollIndicatorHeight + '%',
transform: `translateY(${scrollIndicatorPosition}px)` transform: `translateY(${scrollIndicatorPosition}px)`
}" }"></div>
></div>
</div> </div>
<!-- 加载状态 --> <!-- 加载状态 -->
<div <div v-if="loading" class="absolute inset-0 flex items-center justify-center backdrop-blur-sm"
v-if="loading" ref="loadingIndicator">
class="absolute inset-0 flex items-center justify-center backdrop-blur-sm"
ref="loadingIndicator"
>
<div class="flex items-center gap-3 px-6 py-3 rounded-full bg-black/20 backdrop-blur-md"> <div class="flex items-center gap-3 px-6 py-3 rounded-full bg-black/20 backdrop-blur-md">
<div class="w-4 h-4 border-2 border-white/60 border-t-white rounded-full animate-spin"></div> <div class="w-4 h-4 border-2 border-white/60 border-t-white rounded-full animate-spin"></div>
<div class="text-white/80 text-sm font-medium">加载歌词中...</div> <div class="text-white/80 text-sm font-medium">加载歌词中...</div>
@ -104,11 +75,8 @@
</div> </div>
<!-- 无歌词状态 --> <!-- 无歌词状态 -->
<div <div v-if="!loading && parsedLyrics.length === 0" class="absolute inset-0 flex items-center justify-center"
v-if="!loading && parsedLyrics.length === 0" ref="noLyricsIndicator">
class="absolute inset-0 flex items-center justify-center"
ref="noLyricsIndicator"
>
<div class="text-center"> <div class="text-center">
<div class="text-white/40 text-lg font-medium mb-2">暂无歌词</div> <div class="text-white/40 text-lg font-medium mb-2">暂无歌词</div>
<div class="text-white/30 text-sm">享受纯音乐的美妙</div> <div class="text-white/30 text-sm">享受纯音乐的美妙</div>
@ -487,6 +455,24 @@ function resetScroll() {
} }
} }
// gap 圆点透明度计算
function getGapDotOpacities(line: GapLine) {
// 获取 gap 的持续时间
const duration = line.duration ?? 0
if (duration <= 0) return [0.3, 0.3, 0.3]
// 当前播放时间
const now = playQueueStore.currentTime
// gap 起止时间
const start = line.time
// 计算进度
let progress = (now - start) / duration
progress = Math.max(0, Math.min(1, progress))
// 每个圆点的阈值
const thresholds = [1 / 4, 2 / 4, 3 / 4]
// 透明度从 0.3 到 1
return thresholds.map(t => progress >= t ? 1 : progress >= t - 1 / 3 ? 0.6 : 0.3)
}
// 监听播放时间变化 // 监听播放时间变化
watch(() => playQueueStore.currentTime, (time) => { watch(() => playQueueStore.currentTime, (time) => {
const newIndex = findCurrentLineIndex(time) const newIndex = findCurrentLineIndex(time)