mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-17 02:07:29 +08:00
✨ feat: 优化歌词组件和移动端界面设计
This commit is contained in:
alger
@@ -14,7 +14,7 @@ const { t } = useI18n();
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="lyric-correction-btns-mac absolute right-0 bottom-4 flex flex-col items-center space-y-1 z-50 select-none transition-opacity duration-200 opacity-0 pointer-events-none"
|
||||
class="lyric-correction"
|
||||
>
|
||||
<n-tooltip placement="right">
|
||||
<template #trigger>
|
||||
@@ -46,8 +46,18 @@ const { t } = useI18n();
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.lyric-correction {
|
||||
@apply absolute right-0 bottom-4 flex flex-col items-center space-y-1 z-50 select-none transition-opacity duration-200 opacity-0 pointer-events-none;
|
||||
}
|
||||
|
||||
.lyric-correction-btn {
|
||||
@apply w-7 h-7 flex items-center justify-center rounded-lg bg-white dark:bg-neutral-800 border border-white/20 dark:border-neutral-700/40 shadow-md backdrop-blur-2xl cursor-pointer transition-all duration-150 text-gray-700 dark:text-gray-200 hover:bg-green-500/80 hover:text-white hover:border-green-400/60 active:scale-95 bg-opacity-40 dark:hover:bg-green-500/80 dark:hover:text-white dark:hover:border-green-400/60 dark:hover:bg-opacity-40;
|
||||
}
|
||||
|
||||
.mobile{
|
||||
.lyric-correction {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -114,47 +114,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
|
||||
<!-- 移动端设置 -->
|
||||
<n-tab-pane :name="'mobile'" :tab="t('settings.lyricSettings.tabs.mobile')">
|
||||
<div class="tab-content" v-if="isMobile">
|
||||
<div class="section-title">{{ t('settings.lyricSettings.mobileLayout') }}</div>
|
||||
<n-radio-group v-model:value="config.mobileLayout" name="mobileLayout" class="mb-4">
|
||||
<n-space>
|
||||
<n-radio value="default">{{ t('settings.lyricSettings.layoutOptions.default') }}</n-radio>
|
||||
<n-radio value="ios">{{ t('settings.lyricSettings.layoutOptions.ios') }}</n-radio>
|
||||
<n-radio value="android">{{ t('settings.lyricSettings.layoutOptions.android') }}</n-radio>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
|
||||
<div class="section-title">{{ t('settings.lyricSettings.mobileCoverStyle') }}</div>
|
||||
<n-radio-group v-model:value="config.mobileCoverStyle" name="mobileCoverStyle" class="mb-4">
|
||||
<n-space>
|
||||
<n-radio value="record">{{ t('settings.lyricSettings.coverOptions.record') }}</n-radio>
|
||||
<n-radio value="square">{{ t('settings.lyricSettings.coverOptions.square') }}</n-radio>
|
||||
<n-radio value="full">{{ t('settings.lyricSettings.coverOptions.full') }}</n-radio>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
|
||||
<div class="slider-item">
|
||||
<span>{{ t('settings.lyricSettings.lyricLines') }}</span>
|
||||
<n-slider
|
||||
v-model:value="config.mobileShowLyricLines"
|
||||
:step="1"
|
||||
:min="1"
|
||||
:max="5"
|
||||
:marks="{
|
||||
1: '1',
|
||||
3: '3',
|
||||
5: '5'
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="mobile-unavailable">
|
||||
{{ t('settings.lyricSettings.mobileUnavailable') }}
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,7 +124,6 @@ import { onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
|
||||
import { isMobile } from '@/utils';
|
||||
|
||||
const { t } = useI18n();
|
||||
const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });
|
||||
|
||||
@@ -0,0 +1,812 @@
|
||||
<template>
|
||||
<n-drawer
|
||||
v-model:show="isVisible"
|
||||
height="100%"
|
||||
placement="bottom"
|
||||
:style="{ background: currentBackground || background }"
|
||||
:to="`#layout-main`"
|
||||
:z-index="9998"
|
||||
>
|
||||
<div id="drawer-target" :class="[config.theme]">
|
||||
<div
|
||||
class="control-btn absolute top-8 left-8"
|
||||
:class="{ 'pure-mode': config.pureModeEnabled }"
|
||||
@click="closeMusicFull"
|
||||
>
|
||||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
|
||||
<n-popover trigger="click" placement="bottom">
|
||||
<template #trigger>
|
||||
<div
|
||||
class="control-btn absolute top-8 right-8"
|
||||
:class="{ 'pure-mode': config.pureModeEnabled }"
|
||||
>
|
||||
<i class="ri-settings-3-line"></i>
|
||||
</div>
|
||||
</template>
|
||||
<lyric-settings ref="lyricSettingsRef" />
|
||||
</n-popover>
|
||||
|
||||
<div
|
||||
v-if="!config.hideCover"
|
||||
class="music-img"
|
||||
:class="{ 'only-cover': config.hideLyrics }"
|
||||
:style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
|
||||
>
|
||||
<div class="img-container relative">
|
||||
<n-image
|
||||
ref="PicImgRef"
|
||||
:src="getImgUrl(playMusic?.picUrl, '500y500')"
|
||||
class="img"
|
||||
lazy
|
||||
preview-disabled
|
||||
/>
|
||||
<div v-if="playMusic?.playLoading" class="loading-overlay">
|
||||
<i class="ri-loader-4-line loading-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="music-info">
|
||||
<div class="music-content-name">{{ playMusic.name }}</div>
|
||||
<div class="music-content-singer">
|
||||
<n-ellipsis
|
||||
class="text-ellipsis"
|
||||
line-clamp="2"
|
||||
:tooltip="{
|
||||
contentStyle: { maxWidth: '600px' },
|
||||
zIndex: 99999
|
||||
}"
|
||||
>
|
||||
<span
|
||||
v-for="(item, index) in artistList"
|
||||
:key="index"
|
||||
class="cursor-pointer hover:text-green-500"
|
||||
@click="handleArtistClick(item.id)"
|
||||
>
|
||||
{{ item.name }}
|
||||
{{ index < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<mini-play-bar
|
||||
v-if="!config.hideMiniPlayBar"
|
||||
class="mt-4"
|
||||
:pure-mode-enabled="config.pureModeEnabled"
|
||||
component
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="music-content"
|
||||
:class="{
|
||||
center: config.centerLyrics,
|
||||
hide: config.hideLyrics
|
||||
}"
|
||||
>
|
||||
<n-layout
|
||||
ref="lrcSider"
|
||||
class="music-lrc"
|
||||
:style="{
|
||||
height: config.hidePlayBar ? '85vh' : '65vh',
|
||||
width: isMobile ? '100vw' : config.hideCover ? '50vw' : '500px'
|
||||
}"
|
||||
:native-scrollbar="false"
|
||||
@mouseover="mouseOverLayout"
|
||||
@mouseleave="mouseLeaveLayout"
|
||||
>
|
||||
<!-- 歌曲信息 -->
|
||||
|
||||
<div ref="lrcContainer" class="music-lrc-container">
|
||||
<div
|
||||
v-if="config.hideCover"
|
||||
class="music-info-header"
|
||||
:style="{ textAlign: config.centerLyrics ? 'center' : 'left' }"
|
||||
>
|
||||
<div class="music-info-name">{{ playMusic.name }}</div>
|
||||
<div class="music-info-singer">
|
||||
<span
|
||||
v-for="(item, index) in artistList"
|
||||
:key="index"
|
||||
class="cursor-pointer hover:text-green-500"
|
||||
@click="handleArtistClick(item.id)"
|
||||
>
|
||||
{{ item.name }}
|
||||
{{ index < artistList.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in lrcArray"
|
||||
:id="`music-lrc-text-${index}`"
|
||||
:key="index"
|
||||
class="music-lrc-text"
|
||||
:class="{ 'now-text': index === nowIndex, 'hover-text': item.text }"
|
||||
@click="setAudioTime(index)"
|
||||
>
|
||||
<span :style="getLrcStyle(index)">{{ item.text }}</span>
|
||||
<div v-show="config.showTranslation" class="music-lrc-text-tr">
|
||||
{{ item.trText }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无歌词 -->
|
||||
<div v-if="!lrcArray.length" class="music-lrc-text">
|
||||
<span>{{ t('player.lrc.noLrc') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 歌词右下角矫正按钮组件 -->
|
||||
<LyricCorrectionControl
|
||||
v-if="!isMobile"
|
||||
:correction-time="correctionTime"
|
||||
@adjust="adjustCorrectionTime"
|
||||
/>
|
||||
</n-layout>
|
||||
</div>
|
||||
</div>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import LyricSettings from '@/components/lyric/LyricSettings.vue';
|
||||
import MiniPlayBar from '@/components/player/MiniPlayBar.vue';
|
||||
import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
|
||||
import {
|
||||
artistList,
|
||||
lrcArray,
|
||||
nowIndex,
|
||||
playMusic,
|
||||
setAudioTime,
|
||||
textColors,
|
||||
useLyricProgress,
|
||||
correctionTime,
|
||||
adjustCorrectionTime
|
||||
} from '@/hooks/MusicHook';
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
|
||||
import { getImgUrl, isMobile } from '@/utils';
|
||||
import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
|
||||
|
||||
const { t } = useI18n();
|
||||
// 定义 refs
|
||||
const lrcSider = ref<any>(null);
|
||||
const isMouse = ref(false);
|
||||
const lrcContainer = ref<HTMLElement | null>(null);
|
||||
const currentBackground = ref('');
|
||||
const animationFrame = ref<number | null>(null);
|
||||
const isDark = ref(false);
|
||||
const showStickyHeader = ref(false);
|
||||
const lyricSettingsRef = ref<InstanceType<typeof LyricSettings>>();
|
||||
|
||||
// 移除 computed 配置
|
||||
const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });
|
||||
|
||||
// 监听设置组件的配置变化
|
||||
watch(
|
||||
() => lyricSettingsRef.value?.config,
|
||||
(newConfig) => {
|
||||
if (newConfig) {
|
||||
config.value = newConfig;
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
// 监听本地配置变化，保存到 localStorage
|
||||
watch(
|
||||
() => config.value,
|
||||
(newConfig) => {
|
||||
localStorage.setItem('music-full-config', JSON.stringify(newConfig));
|
||||
if (lyricSettingsRef.value) {
|
||||
lyricSettingsRef.value.config = newConfig;
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const themeMusic = {
|
||||
light: 'linear-gradient(to bottom, #ffffff, #f5f5f5)',
|
||||
dark: 'linear-gradient(to bottom, #1a1a1a, #000000)'
|
||||
};
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const isVisible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
});
|
||||
|
||||
// 歌词滚动方法
|
||||
const lrcScroll = (behavior: ScrollBehavior = 'smooth', forceTop: boolean = false) => {
|
||||
if (!isVisible.value || !lrcSider.value) return;
|
||||
|
||||
if (forceTop) {
|
||||
lrcSider.value.scrollTo({
|
||||
top: 0,
|
||||
behavior
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isMouse.value) return;
|
||||
|
||||
const nowEl = document.querySelector(`#music-lrc-text-${nowIndex.value}`) as HTMLElement;
|
||||
if (nowEl) {
|
||||
const containerHeight = lrcSider.value.$el.clientHeight;
|
||||
const elementTop = nowEl.offsetTop;
|
||||
const scrollTop = elementTop - containerHeight / 2 + nowEl.clientHeight / 2;
|
||||
|
||||
lrcSider.value.scrollTo({
|
||||
top: scrollTop,
|
||||
behavior
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedLrcScroll = useDebounceFn(lrcScroll, 200);
|
||||
|
||||
const mouseOverLayout = () => {
|
||||
if (isMobile.value) {
|
||||
return;
|
||||
}
|
||||
isMouse.value = true;
|
||||
};
|
||||
|
||||
const mouseLeaveLayout = () => {
|
||||
if (isMobile.value) {
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
isMouse.value = false;
|
||||
lrcScroll();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
watch(nowIndex, () => {
|
||||
debouncedLrcScroll();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => isVisible.value,
|
||||
() => {
|
||||
if (isVisible.value) {
|
||||
nextTick(() => {
|
||||
lrcScroll('instant');
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const setTextColors = (background: string) => {
|
||||
if (!background) {
|
||||
textColors.value = getTextColors();
|
||||
document.documentElement.style.setProperty('--hover-bg-color', getHoverBackgroundColor(false));
|
||||
document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
|
||||
document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新文字颜色
|
||||
textColors.value = getTextColors(background);
|
||||
isDark.value = textColors.value.active === '#000000';
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
'--hover-bg-color',
|
||||
getHoverBackgroundColor(isDark.value)
|
||||
);
|
||||
document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
|
||||
document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
|
||||
|
||||
// 处理背景颜色动画
|
||||
if (currentBackground.value) {
|
||||
if (animationFrame.value) {
|
||||
cancelAnimationFrame(animationFrame.value);
|
||||
}
|
||||
const result = animateGradient(currentBackground.value, background, (gradient) => {
|
||||
currentBackground.value = gradient;
|
||||
});
|
||||
if (typeof result === 'number') {
|
||||
animationFrame.value = result;
|
||||
}
|
||||
} else {
|
||||
currentBackground.value = background;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听背景变化
|
||||
watch(
|
||||
() => props.background,
|
||||
(newBg) => {
|
||||
if (config.value.theme === 'default') {
|
||||
setTextColors(newBg);
|
||||
} else {
|
||||
setTextColors(themeMusic[config.value.theme] || props.background);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 修改 useLyricProgress 的使用方式
|
||||
const { getLrcStyle: originalLrcStyle } = useLyricProgress();
|
||||
|
||||
// 修改 getLrcStyle 函数
|
||||
const getLrcStyle = (index: number) => {
|
||||
const colors = textColors.value || getTextColors;
|
||||
const originalStyle = originalLrcStyle(index);
|
||||
|
||||
if (index === nowIndex.value) {
|
||||
// 当前播放的歌词，使用渐变效果
|
||||
return {
|
||||
...originalStyle,
|
||||
backgroundImage: originalStyle.backgroundImage
|
||||
?.replace(/#ffffff/g, colors.active)
|
||||
.replace(/#ffffff8a/g, `${colors.primary}`),
|
||||
backgroundClip: 'text',
|
||||
WebkitBackgroundClip: 'text',
|
||||
color: 'transparent'
|
||||
};
|
||||
}
|
||||
|
||||
// 非当前播放的歌词，使用普通颜色
|
||||
return {
|
||||
color: colors.primary
|
||||
};
|
||||
};
|
||||
|
||||
// 组件卸载时清理动画
|
||||
onBeforeUnmount(() => {
|
||||
if (animationFrame.value) {
|
||||
cancelAnimationFrame(animationFrame.value);
|
||||
}
|
||||
});
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const { navigateToArtist } = useArtist();
|
||||
|
||||
const handleArtistClick = (id: number) => {
|
||||
isVisible.value = false;
|
||||
navigateToArtist(id);
|
||||
};
|
||||
|
||||
const setData = computed(() => settingsStore.setData);
|
||||
|
||||
// 监听字体变化并更新 CSS 变量
|
||||
watch(
|
||||
() => [setData.value.fontFamily, setData.value.fontScope],
|
||||
([newFont, fontScope]) => {
|
||||
const defaultFonts =
|
||||
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
|
||||
|
||||
// 如果不是歌词模式或全局模式，使用默认字体
|
||||
if (fontScope !== 'lyric' && fontScope !== 'global') {
|
||||
document.documentElement.style.setProperty('--current-font-family', defaultFonts);
|
||||
return;
|
||||
}
|
||||
|
||||
if (newFont === 'system-ui') {
|
||||
document.documentElement.style.setProperty('--current-font-family', defaultFonts);
|
||||
} else {
|
||||
// 处理多个字体，确保每个字体名都被正确引用
|
||||
const fontList = newFont.split(',').map((font) => {
|
||||
const trimmedFont = font.trim();
|
||||
// 如果字体名包含空格或特殊字符，添加引号（如果还没有引号的话）
|
||||
return /[\s'"()]/.test(trimmedFont) && !/^['"].*['"]$/.test(trimmedFont)
|
||||
? `"${trimmedFont}"`
|
||||
: trimmedFont;
|
||||
});
|
||||
|
||||
// 将选择的字体和默认字体组合
|
||||
document.documentElement.style.setProperty(
|
||||
'--current-font-family',
|
||||
`${fontList.join(', ')}, ${defaultFonts}`
|
||||
);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听配置变化并保存到本地存储
|
||||
watch(
|
||||
() => config.value,
|
||||
(newConfig) => {
|
||||
localStorage.setItem('music-full-config', JSON.stringify(newConfig));
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
if (!lrcSider.value || !config.value.hideCover) return;
|
||||
const { scrollTop } = lrcSider.value.$el;
|
||||
showStickyHeader.value = scrollTop > 100;
|
||||
};
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
const closeMusicFull = () => {
|
||||
isVisible.value = false;
|
||||
playerStore.setMusicFull(false);
|
||||
};
|
||||
|
||||
// 添加滚动监听
|
||||
onMounted(() => {
|
||||
if (lrcSider.value?.$el) {
|
||||
lrcSider.value.$el.addEventListener('scroll', handleScroll);
|
||||
}
|
||||
});
|
||||
|
||||
// 移除滚动监听
|
||||
onBeforeUnmount(() => {
|
||||
if (animationFrame.value) {
|
||||
cancelAnimationFrame(animationFrame.value);
|
||||
}
|
||||
if (lrcSider.value?.$el) {
|
||||
lrcSider.value.$el.removeEventListener('scroll', handleScroll);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听字体大小变化
|
||||
watch(
|
||||
() => config.value.fontSize,
|
||||
(newSize) => {
|
||||
document.documentElement.style.setProperty('--lyric-font-size', `${newSize}px`);
|
||||
}
|
||||
);
|
||||
|
||||
// 监听主题变化
|
||||
watch(
|
||||
() => config.value.theme,
|
||||
(newTheme) => {
|
||||
const newBackground = themeMusic[newTheme] || props.background;
|
||||
setTextColors(newBackground);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 添加文字间距监听
|
||||
watch(
|
||||
() => config.value.letterSpacing,
|
||||
(newSpacing) => {
|
||||
document.documentElement.style.setProperty('--lyric-letter-spacing', `${newSpacing}px`);
|
||||
}
|
||||
);
|
||||
|
||||
// 添加行高监听
|
||||
watch(
|
||||
() => config.value.lineHeight,
|
||||
(newLineHeight) => {
|
||||
document.documentElement.style.setProperty('--lyric-line-height', newLineHeight.toString());
|
||||
}
|
||||
);
|
||||
|
||||
// 加载保存的配置
|
||||
onMounted(() => {
|
||||
const savedConfig = localStorage.getItem('music-full-config');
|
||||
if (savedConfig) {
|
||||
config.value = { ...config.value, ...JSON.parse(savedConfig) };
|
||||
}
|
||||
if (lrcSider.value?.$el) {
|
||||
lrcSider.value.$el.addEventListener('scroll', handleScroll);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加对 playMusic 的监听
|
||||
watch(playMusic, () => {
|
||||
nextTick(() => {
|
||||
lrcScroll('instant', true);
|
||||
});
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
lrcScroll,
|
||||
config
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@keyframes round {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.drawer-back {
|
||||
@apply absolute bg-cover bg-center;
|
||||
z-index: -1;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
}
|
||||
|
||||
.drawer-back.paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
#drawer-target {
|
||||
@apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full py-8;
|
||||
animation-duration: 300ms;
|
||||
|
||||
.music-img {
|
||||
@apply flex-1 flex justify-center mr-16 flex-col items-center;
|
||||
max-width: 360px;
|
||||
max-height: 360px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.only-cover {
|
||||
@apply mr-0 flex-initial;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
|
||||
.img-container {
|
||||
@apply w-[50vh] h-[50vh] mb-8;
|
||||
}
|
||||
|
||||
.img {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
@apply text-center w-[600px];
|
||||
|
||||
.music-content-name {
|
||||
@apply text-4xl mb-4;
|
||||
color: var(--text-color-active);
|
||||
}
|
||||
|
||||
.music-content-singer {
|
||||
@apply text-xl mb-8 opacity-80;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-container {
|
||||
@apply relative w-full h-full;
|
||||
}
|
||||
|
||||
.img {
|
||||
@apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
@apply w-full mt-4;
|
||||
|
||||
.music-content-name {
|
||||
@apply text-2xl font-bold;
|
||||
color: var(--text-color-active);
|
||||
}
|
||||
|
||||
.music-content-singer {
|
||||
@apply text-base mt-2 opacity-80;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.music-content {
|
||||
@apply flex flex-col justify-center items-center relative;
|
||||
width: 500px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.center {
|
||||
@apply w-auto;
|
||||
.music-lrc {
|
||||
@apply w-full max-w-3xl mx-auto;
|
||||
}
|
||||
.music-lrc-text {
|
||||
@apply text-center;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.music-content-time {
|
||||
display: none;
|
||||
@apply flex justify-center items-center;
|
||||
}
|
||||
|
||||
.music-lrc-container {
|
||||
padding-top: 30vh;
|
||||
}
|
||||
|
||||
.music-lrc {
|
||||
background-color: inherit;
|
||||
width: 500px;
|
||||
height: 550px;
|
||||
position: relative;
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
);
|
||||
|
||||
.music-info-header {
|
||||
@apply mb-8;
|
||||
|
||||
.music-info-name {
|
||||
@apply text-4xl font-bold mb-2;
|
||||
color: var(--text-color-active);
|
||||
}
|
||||
|
||||
.music-info-singer {
|
||||
@apply text-base;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
@apply text-2xl cursor-pointer font-bold px-2 py-4;
|
||||
transition: all 0.3s ease;
|
||||
background-color: transparent;
|
||||
font-size: var(--lyric-font-size, 22px) !important;
|
||||
letter-spacing: var(--lyric-letter-spacing, 0) !important;
|
||||
line-height: var(--lyric-line-height, 2) !important;
|
||||
|
||||
span {
|
||||
background-clip: text !important;
|
||||
-webkit-background-clip: text !important;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
&-tr {
|
||||
@apply font-normal;
|
||||
opacity: 0.7;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-text {
|
||||
&:hover {
|
||||
@apply font-bold opacity-100 rounded-xl;
|
||||
background-color: var(--hover-bg-color);
|
||||
|
||||
span {
|
||||
color: var(--text-color-active) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
#drawer-target {
|
||||
@apply flex-col p-4 pt-8 justify-start;
|
||||
.music-img {
|
||||
display: none;
|
||||
}
|
||||
.music-lrc {
|
||||
height: calc(100vh - 260px) !important;
|
||||
width: 100vw;
|
||||
span {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.hover-text {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.music-lrc-text {
|
||||
@apply text-xl text-center;
|
||||
}
|
||||
}
|
||||
.music-content {
|
||||
@apply h-[calc(100vh-120px)];
|
||||
width: 100vw !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.music-drawer {
|
||||
transition: none; // 移除之前的过渡效果，现在使用 JS 动画
|
||||
}
|
||||
|
||||
// 添加全局字体样式
|
||||
:root {
|
||||
--current-font-family:
|
||||
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
#drawer-target {
|
||||
@apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full py-8;
|
||||
animation-duration: 300ms;
|
||||
|
||||
.music-lrc-text {
|
||||
font-family: var(--current-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
@apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300 z-[9999];
|
||||
background: rgba(142, 142, 142, 0.192);
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
i {
|
||||
@apply text-xl;
|
||||
color: var(--text-color-active);
|
||||
}
|
||||
|
||||
&.pure-mode {
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
|
||||
&:not(:hover) {
|
||||
i {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(126, 121, 121, 0.2);
|
||||
i {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
@apply absolute inset-0 flex items-center justify-center rounded-xl;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 48px;
|
||||
color: white;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.lyric-correction-btns-mac {
|
||||
/* 仅在 hover 歌词区域时显示 */
|
||||
.music-lrc:hover & {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -21,18 +21,6 @@
|
||||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
|
||||
<n-popover trigger="click" placement="bottom">
|
||||
<template #trigger>
|
||||
<div
|
||||
class="control-btn absolute top-5 right-5"
|
||||
:class="{ 'pure-mode': config.pureModeEnabled }"
|
||||
>
|
||||
<i class="ri-settings-3-line"></i>
|
||||
</div>
|
||||
</template>
|
||||
<lyric-settings ref="lyricSettingsRef" />
|
||||
</n-popover>
|
||||
|
||||
<!-- 全屏歌词页面 -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
@@ -102,7 +90,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2">
|
||||
<div class="px-2 flex-1 flex flex-col justify-around">
|
||||
<!-- 歌曲信息 -->
|
||||
<div class="song-info">
|
||||
<h1 class="song-title">{{ playMusic.name }}</h1>
|
||||
@@ -128,9 +116,6 @@
|
||||
<div v-if="lrcArray.length > 0" class="lyrics-wrapper">
|
||||
<div v-for="(line, idx) in visibleLyrics" :key="idx" class="lyric-line">
|
||||
{{ line.text }}
|
||||
<div v-if="config.showTranslation && line.trText" class="translation">
|
||||
{{ line.trText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-lyrics">
|
||||
@@ -198,7 +183,6 @@
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import LyricSettings from '@/components/lyric/LyricSettings.vue';
|
||||
import {
|
||||
allTime,
|
||||
artistList,
|
||||
@@ -459,13 +443,12 @@ const handleThumbTouchEnd = () => {
|
||||
const currentBackground = ref('');
|
||||
const animationFrame = ref<number | null>(null);
|
||||
const isDark = ref(false);
|
||||
const lyricSettingsRef = ref<InstanceType<typeof LyricSettings>>();
|
||||
const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });
|
||||
|
||||
// 可见歌词计算
|
||||
const visibleLyrics = computed(() => {
|
||||
const centerIndex = nowIndex.value + 1;
|
||||
const numLines = config.value.mobileShowLyricLines;
|
||||
const centerIndex = nowIndex.value;
|
||||
const numLines = 3;
|
||||
const halfLines = Math.floor(numLines / 2);
|
||||
|
||||
let startIdx = centerIndex - halfLines;
|
||||
@@ -490,29 +473,6 @@ const visibleLyrics = computed(() => {
|
||||
return lrcArray.value.slice(startIdx, endIdx + 1);
|
||||
});
|
||||
|
||||
// 监听设置组件的配置变化
|
||||
watch(
|
||||
() => lyricSettingsRef.value?.config,
|
||||
(newConfig) => {
|
||||
if (newConfig) {
|
||||
config.value = newConfig;
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
// 监听本地配置变化，保存到 localStorage
|
||||
watch(
|
||||
() => config.value,
|
||||
(newConfig) => {
|
||||
localStorage.setItem('music-full-config', JSON.stringify(newConfig));
|
||||
if (lyricSettingsRef.value) {
|
||||
lyricSettingsRef.value.config = newConfig;
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
@@ -802,6 +762,7 @@ defineExpose({
|
||||
padding-top: 100px;
|
||||
padding-bottom: 200px;
|
||||
margin-bottom: 180px; /* 确保底部留出足够空间 */
|
||||
margin-top: 90px;
|
||||
|
||||
.lyrics-padding-top {
|
||||
height: 70px;
|
||||
@@ -911,11 +872,11 @@ defineExpose({
|
||||
@apply w-10 h-10 flex items-center justify-center cursor-pointer transition-all duration-200;
|
||||
|
||||
i {
|
||||
@apply text-xl;
|
||||
@apply text-2xl;
|
||||
color: var(--text-color-primary);
|
||||
|
||||
&.favorite {
|
||||
@apply text-red-500;
|
||||
@apply text-red-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -930,7 +891,7 @@ defineExpose({
|
||||
@apply w-14 h-14 flex items-center justify-center cursor-pointer transition-all duration-200;
|
||||
|
||||
i {
|
||||
@apply text-2xl;
|
||||
@apply text-3xl;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
@@ -963,7 +924,7 @@ defineExpose({
|
||||
|
||||
// 封面样式
|
||||
.cover-container {
|
||||
@apply relative mb-6 transition-all duration-500;
|
||||
@apply relative mb-6 transition-all duration-500 border-gray-900;
|
||||
|
||||
&.style-changing {
|
||||
animation: styleChange 0.5s ease;
|
||||
@@ -974,10 +935,58 @@ defineExpose({
|
||||
}
|
||||
|
||||
&.record-style {
|
||||
@apply w-72 h-72 rounded-full overflow-hidden;
|
||||
@apply w-72 h-72 rounded-full overflow-hidden relative;
|
||||
|
||||
// 唱片外圈装饰
|
||||
&::before {
|
||||
content: '';
|
||||
@apply absolute top-0 left-0 w-full h-full rounded-full z-10;
|
||||
background: radial-gradient(circle at center,
|
||||
transparent 38%,
|
||||
rgba(0, 0, 0, 0.15) 38%,
|
||||
rgba(0, 0, 0, 0.15) 39%,
|
||||
rgba(255, 255, 255, 0.1) 39%,
|
||||
rgba(255, 255, 255, 0.1) 39.5%,
|
||||
rgba(0, 0, 0, 0.08) 39.5%,
|
||||
rgba(0, 0, 0, 0.08) 40.5%,
|
||||
rgba(0, 0, 0, 0.2) 40.5%,
|
||||
rgba(0, 0, 0, 0.2) 41.5%,
|
||||
rgba(0, 0, 0, 0.6) 41.5%,
|
||||
rgba(0, 0, 0, 0.6) 100%);
|
||||
pointer-events: none;
|
||||
animation: spin 20s linear infinite;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
&.paused {
|
||||
&::before, &::after {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
@apply rounded-full overflow-hidden border-[40px] border-solid border-black z-0;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
// 光泽效果
|
||||
&::after {
|
||||
content: '';
|
||||
@apply absolute top-0 left-0 w-full h-full rounded-full z-[2];
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.05) 0%,
|
||||
rgba(255, 255, 255, 0) 50%,
|
||||
rgba(0, 0, 0, 0.05) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
@apply w-full h-full rounded-full;
|
||||
@apply w-full h-full rounded-full border-[5px] border-gray-900;
|
||||
animation: spin 20s linear infinite;
|
||||
animation-play-state: running;
|
||||
}
|
||||
@@ -988,10 +997,10 @@ defineExpose({
|
||||
}
|
||||
|
||||
&.square-style {
|
||||
@apply w-72 h-72;
|
||||
@apply w-72 h-72 shadow-lg rounded-xl overflow-hidden mt-8;
|
||||
|
||||
.cover-image {
|
||||
@apply w-full h-full rounded-xl shadow-lg;
|
||||
@apply w-full h-full;
|
||||
transition: transform 0.3s ease-out;
|
||||
|
||||
&:active {
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<component :is="componentToUse" v-bind="$attrs" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { isMobile } from '@/utils';
|
||||
import MusicFull from '@/components/lyric/MusicFull.vue';
|
||||
import MusicFullMobile from '@/components/lyric/MusicFullMobile.vue';
|
||||
|
||||
// 根据当前设备类型选择需要显示的组件
|
||||
const componentToUse = computed(() => {
|
||||
return isMobile.value ? MusicFullMobile : MusicFull;
|
||||
});
|
||||
</script>
|
||||
@@ -113,7 +113,7 @@ import { useThrottleFn } from '@vueuse/core';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
|
||||
import MusicFullWrapper from '@/layout/components/MusicFullWrapper.vue';
|
||||
import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
|
||||
|
||||
@@ -169,7 +169,7 @@ import {
|
||||
textColors
|
||||
} from '@/hooks/MusicHook';
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import MusicFullWrapper from '@/layout/components/MusicFullWrapper.vue';
|
||||
import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import {
|
||||
isBilibiliIdMatch,
|
||||
|
||||
Reference in New Issue
Block a user