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

style(Playroom): 为歌曲名称和艺术家信息添加截断样式

Browse Source 
refactor(audioVisualizer): 调整音频可视化频率范围分段

为 Playroom 页面的歌曲名称和艺术家信息添加 truncate 样式，防止文本溢出
重构音频可视化频率范围分段，使其更符合人耳感知特性
This commit is contained in:
Astrian Zheng 2025-05-26 08:14:14 +10:00
parent bb474c998c
commit 9d9b32d47d
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Playroom.vue
View File

@ -148,9 +148,9 @@ function makePlayQueueListDismiss() {
<img :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl" <img :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverUrl"
class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" /> class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96" />
<div> <div>
<div class="text-white text-lg font-medium">{{ playQueueStore.list[playQueueStore.currentIndex].song.name }} <div class="text-white text-lg font-medium truncate">{{ playQueueStore.list[playQueueStore.currentIndex].song.name }}
</div> </div>
<div class="text-white/75 text-base"> <div class="text-white/75 text-base truncate">
{{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} — {{ artistsOrganize(playQueueStore.list[playQueueStore.currentIndex].song.artists ?? []) }} —
{{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }} {{ playQueueStore.list[playQueueStore.currentIndex].album?.name ?? '未知专辑' }}
</div> </div>

12
src/utils/audioVisualizer.ts
View File

@ -170,11 +170,13 @@ export function audioVisualizer(options: AudioVisualizerOptions = {}) {
// 定义人耳感知的频率范围 (Hz) // 定义人耳感知的频率范围 (Hz)
const frequencyRanges = [ const frequencyRanges = [
{ min: 20, max: 250, name: '低音' }, // 低音 { min: 20, max: 80, name: '超低音' }, // 索引 0
{ min: 250, max: 2000, name: '中低音' }, // 中低音 { min: 80, max: 250, name: '低音' }, // 索引 1
{ min: 2000, max: 8000, name: '中高音' }, // 中高音 { min: 250, max: 800, name: '中低音' }, // 索引 2
{ min: 8000, max: 20000, name: '高音' } // 高音 { min: 800, max: 2500, name: '中音' }, // 索引 3
] { min: 2500, max: 6000, name: '中高音' }, // 索引 4
{ min: 6000, max: 20000, name: '高音' } // 索引 5
]
for (let i = 0; i < bands; i++) { for (let i = 0; i < bands; i++) {
const range = frequencyRanges[i] || frequencyRanges[frequencyRanges.length - 1] const range = frequencyRanges[i] || frequencyRanges[frequencyRanges.length - 1]