atdunbg/Nekosonic-Music
1
0
Fork 0
mirror of https://github.com/atdunbg/Nekosonic-Music.git synced 2026-06-22 00:58:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 皮肤系统重构、seek暂停修复、本地音乐优化、外观一体化

Browse Source 
- 重构皮肤系统：提取 skins.ts 管理预设皮肤，CSS 变量由 JS 动态设置

- 提取公共 color.ts 工具函数（hexToRgba/toHex），消除重复定义

- 修复 seek 时暂停状态丢失的 bug（后端 audio_paused 状态保留）

- 本地音乐页面：循环排序切换、三点菜单、打开所在文件夹

- 本地音乐文件夹管理：支持启用/禁用切换，兼容旧数据迁移

- 新增 show_item_in_folder 命令（Windows/macOS/Linux 跨平台）

- 外观一体化：有壁纸时 TitleBar/Sidebar 透明，PlayerBar 统一透明度+backdrop-blur

- 进度条外层直角、内层填充圆角

- 滚动条默认透明，悬停时显示

- 移除 PageHeader 粘性栏

- 内存优化：keep-alive TTL 5min、pageCache TTL 30min/上限30条、colorCache 上限200

- recentLocal 防抖写入、播放器 tick interval 500ms
This commit is contained in:
Atdunbg
2026-06-07 07:45:41 +08:00
parent 3535e2e8a0
commit dcfada6940
27 changed files with 1736 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/components/RoamDrawer.vue
View File

@ -1,91 +1,94 @@
<template>
<Transition name="drawer">
<div
v-if="visible"
class="fixed inset-0 z-50 flex flex-col backdrop-blur-xl"
:class="!player.dominantColor && 'bg-surface/95'"
:style="player.dominantColor ? { backgroundColor: player.dominantColor } : {}"
>
<div v-if="visible" class="fixed inset-0 z-50 flex flex-col">
<!-- 背景层：fade in 覆盖全屏 -->
<div
class="absolute inset-0 backdrop-blur-xl"
:class="!player.dominantColor && 'bg-surface/95'"
:style="player.dominantColor ? { backgroundColor: player.dominantColor } : {}"
></div>
<div v-if="player.dominantColor" class="absolute inset-0 bg-black/60 pointer-events-none"></div>
<TitleBar :dark-mode="!!player.dominantColor" @close="player.closeRoamDrawer()">
<template #left>
<button @click="player.closeRoamDrawer()" :class="player.dominantColor ? 'text-white/60 hover:text-white' : 'text-content-2 hover:text-content'" class="transition">
<IconChevronDown class="w-5 h-5" />
</button>
</template>
</TitleBar>
<div class="flex-1 min-h-0 flex px-8 pb-8 gap-0 relative z-10">
<div class="w-2/5 flex flex-col items-center justify-center flex-shrink-0">
<img
v-if="roamCoverUrl && !roamCoverError"
:src="roamCoverUrl"
class="w-72 h-72 rounded-3xl object-cover shadow-2xl mb-4"
@error="roamCoverError = true"
/>
<div
v-else
class="w-72 h-72 rounded-3xl flex items-center justify-center shadow-2xl mb-4"
:class="player.dominantColor ? 'bg-white/10' : 'bg-muted'"
>
<IconMusic class="w-16 h-16" :class="player.dominantColor ? 'text-white/30' : 'text-content-4'" />
</div>
<h1 class="text-2xl font-bold text-center" :class="player.dominantColor ? 'text-white' : 'text-content'">{{ roamSong?.name }}</h1>
<p class="mt-2 text-center" :class="player.dominantColor ? 'text-white/70' : 'text-content-2'">
<template v-for="(a, i) in roamSong?.ar || []" :key="a.id || i">
<span v-if="i > 0" :class="player.dominantColor ? 'text-white/40' : 'text-content-3'">/</span>
<span class="hover:text-accent-text cursor-pointer transition" @click="a.id && navigateFromDrawer({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
</template>
<template v-if="roamSong?.al?.name">
<span :class="player.dominantColor ? 'text-white/40' : 'text-content-3'" class="mx-1">·</span>
<span class="hover:text-accent-text cursor-pointer transition" @click="roamSong!.al.id && navigateFromDrawer({ name: 'album', params: { id: roamSong!.al.id } })">{{ roamSong.al.name }}</span>
</template>
</p>
</div>
<div class="w-3/5 relative min-h-0 overflow-hidden flex flex-col">
<div class="flex items-center gap-1 mb-3 px-4">
<button @click="player.roamTab = 'lyric'"
class="px-3 py-1 rounded-full text-sm transition"
:class="player.dominantColor
? (player.roamTab === 'lyric' ? 'bg-white/15 text-white font-medium' : 'text-white/50 hover:text-white/80')
: (player.roamTab === 'lyric' ? 'bg-muted text-content font-medium' : 'text-content-3 hover:text-content')">
歌词
<!-- 内容层：slide up/down -->
<div class="relative z-10 flex flex-col flex-1 min-h-0 drawer-content">
<TitleBar :dark-mode="!!player.dominantColor" transparent @close="player.closeRoamDrawer()">
<template #left>
<button @click="player.closeRoamDrawer()" :class="dc ? 'text-white/60 hover:text-white' : 'text-content-2 hover:text-content'" class="transition">
<IconChevronDown class="w-5 h-5" />
</button>
<button @click="player.roamTab = 'comment'"
class="px-3 py-1 rounded-full text-sm transition"
:class="player.dominantColor
? (player.roamTab === 'comment' ? 'bg-white/15 text-white font-medium' : 'text-white/50 hover:text-white/80')
: (player.roamTab === 'comment' ? 'bg-muted text-content font-medium' : 'text-content-3 hover:text-content')">
评论
</button>
<button v-if="hasTranslation" @click="toggleTranslation"
class="ml-auto px-2.5 py-1 rounded-full text-xs transition flex items-center gap-1"
:class="player.dominantColor
? (showTranslation ? 'bg-white/15 text-white font-medium' : 'text-white/40 hover:text-white/70')
: (showTranslation ? 'bg-muted text-content font-medium' : 'text-content-4 hover:text-content-2')">
<IconLanguages class="w-3 h-3" />
译
</button>
</div>
<div v-show="player.roamTab === 'lyric'" ref="lyricScrollContainer" class="flex-1 min-h-0 overflow-y-auto custom-scroll px-4">
<div v-if="lyrics.length > 0" class="w-full max-w-lg mx-auto text-center"
:style="{ paddingTop: roamLyricPadPx + 'px', paddingBottom: roamLyricPadPx + 'px' }">
<p
v-for="(line, idx) in lyrics"
:key="idx"
:class="getRoamLyricClass(idx)"
class="roam-lyric-line px-4 py-3 rounded-lg cursor-pointer whitespace-nowrap transition-[font-size] duration-300 ease-out"
@click="seekToRoamLyric(line.time)"
@mouseenter="roamLyricHovering = true"
@mouseleave="roamLyricHovering = false"
>
{{ line.text }}
<span v-if="showTranslation && line.translation" class="block text-sm mt-1" :class="getTranslationClass(idx)">{{ line.translation }}</span>
</p>
</template>
</TitleBar>
<div class="flex-1 min-h-0 flex px-8 pb-8 gap-0">
<!-- 左侧：封面 + 歌曲信息 -->
<div class="w-2/5 flex flex-col items-center justify-center flex-shrink-0">
<img
v-if="roamCoverUrl && !roamCoverError"
:src="roamCoverUrl"
class="w-72 h-72 rounded-3xl object-cover shadow-2xl mb-4"
@error="roamCoverError = true"
/>
<div
v-else
class="w-72 h-72 rounded-3xl flex items-center justify-center shadow-2xl mb-4"
:class="dc ? 'bg-white/10' : 'bg-muted'"
>
<IconMusic class="w-16 h-16" :class="dc ? 'text-white/30' : 'text-content-4'" />
</div>
<div v-else :class="player.dominantColor ? 'text-white/40' : 'text-content-3'" class="text-center mt-8">暂无歌词</div>
<h1 class="text-2xl font-bold text-center" :class="dc ? 'text-white' : 'text-content'">{{ roamSong?.name }}</h1>
<p class="mt-2 text-center" :class="dc ? 'text-white/70' : 'text-content-2'">
<template v-for="(a, i) in roamSong?.ar || []" :key="a.id || i">
<span v-if="i > 0" :class="dc ? 'text-white/40' : 'text-content-3'">/</span>
<span class="hover:text-accent-text cursor-pointer transition" @click="a.id && navigateFromDrawer({ name: 'artist', params: { id: a.id } })">{{ a.name }}</span>
</template>
<template v-if="roamSong?.al?.name">
<span :class="dc ? 'text-white/40' : 'text-content-3'" class="mx-1">·</span>
<span class="hover:text-accent-text cursor-pointer transition" @click="roamSong!.al.id && navigateFromDrawer({ name: 'album', params: { id: roamSong!.al.id } })">{{ roamSong.al.name }}</span>
</template>
</p>
</div>
<div v-show="player.roamTab === 'comment'" class="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
<CommentSection v-if="roamSong" :type="0" :id="player.commentSongId || roamSong.id" :key="player.commentSongId || roamSong.id" :dark-mode="!!player.dominantColor" />
<!-- 右侧：歌词/评论 -->
<div class="w-3/5 relative min-h-0 overflow-hidden flex flex-col">
<div class="flex items-center gap-1 mb-3 px-4">
<button @click="player.roamTab = 'lyric'"
class="px-3 py-1 rounded-full text-sm transition"
:class="tabClass(player.roamTab === 'lyric')">
歌词
</button>
<button @click="player.roamTab = 'comment'"
class="px-3 py-1 rounded-full text-sm transition"
:class="tabClass(player.roamTab === 'comment')">
评论
</button>
<button v-if="hasTranslation" @click="toggleTranslation"
class="ml-auto px-2.5 py-1 rounded-full text-xs transition flex items-center gap-1"
:class="tabClass(showTranslation)">
<IconLanguages class="w-3 h-3" />
译
</button>
</div>
<div v-show="player.roamTab === 'lyric'" ref="lyricScrollContainer" class="flex-1 min-h-0 overflow-y-auto custom-scroll px-4">
<div v-if="lyrics.length > 0" class="w-full max-w-lg mx-auto text-center"
:style="{ paddingTop: roamLyricPadPx + 'px', paddingBottom: roamLyricPadPx + 'px' }">
<p
v-for="(line, idx) in lyrics"
:key="idx"
:class="getRoamLyricClass(idx)"
class="roam-lyric-line px-4 py-3 rounded-lg cursor-pointer whitespace-nowrap transition-[font-size] duration-300 ease-out"
@click="seekToRoamLyric(line.time)"
@mouseenter="roamLyricHovering = true"
@mouseleave="roamLyricHovering = false"
>
{{ line.text }}
<span v-if="showTranslation && line.translation" class="block text-sm mt-1" :class="getTranslationClass(idx)">{{ line.translation }}</span>
</p>
</div>
<div v-else :class="dc ? 'text-white/40' : 'text-content-3'" class="text-center mt-8">暂无歌词</div>
</div>
<div v-show="player.roamTab === 'comment'" class="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
<CommentSection v-if="roamSong" :type="0" :id="player.commentSongId || roamSong.id" :key="player.commentSongId || roamSong.id" :dark-mode="!!player.dominantColor" />
</div>
</div>
</div>
</div>
@ -112,6 +115,9 @@ defineProps<{
const router = useRouter();
const player = usePlayerStore();
// dominantColor 是否存在（模板中频繁使用）
const dc = computed(() => !!player.dominantColor);
const { lyrics, currentLyricIdx, hasTranslation, showTranslation, toggleTranslation } = useLyric();
const lyricScrollContainer = ref<HTMLElement | null>(null);
const roamLyricHovering = ref(false);
@ -200,26 +206,32 @@ function scrollToRoamActiveLyric() {
requestAnimationFrame(animate);
}
// Tab 按钮统一样式
function tabClass(active: boolean): string {
if (dc.value) {
return active ? 'bg-white/15 text-white font-medium' : 'text-white/50 hover:text-white/80';
}
return active ? 'bg-muted text-content font-medium' : 'text-content-3 hover:text-content';
}
function getTranslationClass(idx: number): string {
const diff = Math.abs(idx - currentLyricIdx.value);
const hasColor = !!player.dominantColor;
if (idx === currentLyricIdx.value) return hasColor ? 'text-[var(--c-accent)]' : 'text-accent-text';
if (diff === 1) return hasColor ? 'text-white/70' : 'text-content/70';
if (diff === 2) return hasColor ? 'text-white/50' : 'text-content-2/50';
return hasColor ? 'text-white/35' : 'text-content-3/35';
if (idx === currentLyricIdx.value) return dc.value ? 'text-[var(--c-accent)]' : 'text-accent-text';
if (diff === 1) return dc.value ? 'text-white/70' : 'text-content/70';
if (diff === 2) return dc.value ? 'text-white/50' : 'text-content-2/50';
return dc.value ? 'text-white/35' : 'text-content-3/35';
}
function getRoamLyricClass(idx: number): string {
const diff = Math.abs(idx - currentLyricIdx.value);
const hasColor = !!player.dominantColor;
if (idx === currentLyricIdx.value) {
return hasColor
return dc.value
? 'roam-lyric-active font-bold text-xl text-[var(--c-accent)]'
: 'roam-lyric-active text-accent-text font-semibold text-xl';
}
if (diff === 1) return hasColor ? 'text-white/70 text-lg' : 'text-content/70 text-lg';
if (diff === 2) return hasColor ? 'text-white/50 text-[1rem]' : 'text-content-2/50 text-[1rem]';
return hasColor ? 'text-white/35 text-[1rem]' : 'text-content-3/35 text-[1rem]';
if (diff === 1) return dc.value ? 'text-white/70 text-lg' : 'text-content/70 text-lg';
if (diff === 2) return dc.value ? 'text-white/50 text-[1rem]' : 'text-content-2/50 text-[1rem]';
return dc.value ? 'text-white/35 text-[1rem]' : 'text-content-3/35 text-[1rem]';
}
function seekToRoamLyric(time: number) {
@ -235,9 +247,17 @@ function navigateFromDrawer(routeLocation: { name: string; params: any }) {
</script>
<style scoped>
/* 外层容器：fade in/out */
.drawer-enter-active,
.drawer-leave-active { transition: transform 0.3s ease; }
.drawer-leave-active { transition: opacity 0.3s ease; }
.drawer-enter-from,
.drawer-leave-to { transform: translateY(100%); }
.drawer-leave-to { opacity: 0; }
/* 内容层：slide up/down */
.drawer-enter-active .drawer-content,
.drawer-leave-active .drawer-content { transition: transform 0.3s ease; }
.drawer-enter-from .drawer-content,
.drawer-leave-to .drawer-content { transform: translateY(100%); }
.custom-scroll::-webkit-scrollbar { width: 0; display: none; }
</style>