mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-17 02:07:29 +08:00
refactor: 更新 eslint 和 prettier 配置 格式化代码
This commit is contained in:
alger
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="eq-control">
|
||||
<div class="eq-header">
|
||||
<h3>{{ t('player.eq.title') }}
|
||||
<h3>
|
||||
{{ t('player.eq.title') }}
|
||||
<n-tag type="warning" size="small" round v-if="!isElectron">
|
||||
桌面版可用，网页端不支持
|
||||
</n-tag>
|
||||
|
||||
@@ -27,18 +27,10 @@
|
||||
<div class="warning-message">
|
||||
<h3>获取完整体验</h3>
|
||||
<p class="platform-support">
|
||||
<span>
|
||||
<i class="ri-window-line mr-1"></i>Windows 10+
|
||||
</span>
|
||||
<span>
|
||||
<i class="ri-apple-line mr-1"></i>macOS
|
||||
</span>
|
||||
<span>
|
||||
<i class="ri-ubuntu-line mr-1"></i>Linux
|
||||
</span>
|
||||
<span>
|
||||
<i class="ri-android-line mr-1"></i>Android
|
||||
</span>
|
||||
<span> <i class="ri-window-line mr-1"></i>Windows 10+ </span>
|
||||
<span> <i class="ri-apple-line mr-1"></i>macOS </span>
|
||||
<span> <i class="ri-ubuntu-line mr-1"></i>Linux </span>
|
||||
<span> <i class="ri-android-line mr-1"></i>Android </span>
|
||||
</p>
|
||||
<p class="description">
|
||||
下载桌面应用以获得最佳音乐体验，包含完整功能与更高音质。
|
||||
@@ -47,7 +39,11 @@
|
||||
</div>
|
||||
|
||||
<div class="action-links">
|
||||
<a href="https://mp.weixin.qq.com/s/9pr1XQB36gShM_-TG2LBdg" target="_blank" class="doc-link">
|
||||
<a
|
||||
href="https://mp.weixin.qq.com/s/9pr1XQB36gShM_-TG2LBdg"
|
||||
target="_blank"
|
||||
class="doc-link"
|
||||
>
|
||||
<i class="ri-file-text-line mr-1"></i> 查看使用文档
|
||||
</a>
|
||||
<a href="http://donate.alger.fun/download" target="_blank" class="download-link">
|
||||
@@ -59,7 +55,7 @@
|
||||
<img class="qrcode" src="@/assets/gzh.png" alt="公众号" />
|
||||
<p>关注公众号获取最新版本与更新信息</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="support-section">
|
||||
<h4>支持项目</h4>
|
||||
<p class="support-desc">您的支持是我们持续改进的动力</p>
|
||||
@@ -78,10 +74,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="drawer-actions">
|
||||
<n-button secondary class="action-button" @click="markAsDonated">已支持</n-button>
|
||||
<n-button type="primary" class="action-button primary" @click="remindLater">稍后提醒</n-button>
|
||||
<n-button type="primary" class="action-button primary" @click="remindLater"
|
||||
>稍后提醒</n-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,7 +88,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { isMobile } from '@/utils';
|
||||
|
||||
// 控制抽屉显示状态
|
||||
@@ -117,7 +116,7 @@ const markAsDonated = () => {
|
||||
onMounted(() => {
|
||||
// 优先判断是否永久不再提示
|
||||
if (localStorage.getItem('trafficDonated4Never')) return;
|
||||
|
||||
|
||||
// 判断一天后提醒
|
||||
const remindLaterTime = localStorage.getItem('trafficDonated4RemindLater');
|
||||
if (remindLaterTime) {
|
||||
@@ -126,7 +125,7 @@ onMounted(() => {
|
||||
const hoursDiff = (now.getTime() - lastRemind.getTime()) / (1000 * 60 * 60);
|
||||
if (hoursDiff < 24) return;
|
||||
}
|
||||
|
||||
|
||||
// 延迟20秒显示
|
||||
setTimeout(() => {
|
||||
showDrawer.value = true;
|
||||
@@ -137,12 +136,12 @@ onMounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.traffic-warning-trigger {
|
||||
display: inline-block;
|
||||
|
||||
|
||||
.mac-style-button {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: #333;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -173,7 +172,7 @@ onMounted(() => {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -185,21 +184,21 @@ onMounted(() => {
|
||||
.warning-message {
|
||||
text-align: center;
|
||||
max-width: 520px;
|
||||
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.platform-support {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -207,7 +206,7 @@ onMounted(() => {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.description {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
@@ -222,7 +221,7 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 6px 0;
|
||||
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -231,20 +230,20 @@ onMounted(() => {
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
&.doc-link {
|
||||
color: #555;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.download-link {
|
||||
color: #fff;
|
||||
background-color: #007aff;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: #0062cc;
|
||||
}
|
||||
@@ -259,7 +258,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
|
||||
.qrcode {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
@@ -268,7 +267,7 @@ onMounted(() => {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-top: 14px;
|
||||
font-size: 15px;
|
||||
@@ -279,14 +278,14 @@ onMounted(() => {
|
||||
.support-section {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
|
||||
h4 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
.support-desc {
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
@@ -307,21 +306,21 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
|
||||
.payment-icon {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
font-size: 15px;
|
||||
color: #444;
|
||||
@@ -341,17 +340,17 @@ onMounted(() => {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
z-index: 999999999;
|
||||
|
||||
|
||||
.action-button {
|
||||
min-width: 110px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
padding: 8px 16px;
|
||||
|
||||
|
||||
&.primary {
|
||||
background-color: #007aff;
|
||||
color: white;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: #0062cc;
|
||||
}
|
||||
@@ -364,48 +363,48 @@ onMounted(() => {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.platform-support {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
.description {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.app-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
|
||||
.qrcode-section {
|
||||
.qrcode {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.payment-option {
|
||||
.payment-icon {
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.drawer-actions {
|
||||
flex-wrap: wrap;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
z-index: 999999999;
|
||||
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
z-index: 999999999;
|
||||
|
||||
.action-button {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -4,31 +4,21 @@
|
||||
<div class="description">
|
||||
<p>{{ t('donation.description') }}</p>
|
||||
<p>{{ t('donation.message') }}</p>
|
||||
<n-button type="primary" @click="toDonateList">
|
||||
<template #icon>
|
||||
<i class="ri-cup-line"></i>
|
||||
</template>
|
||||
{{ t('donation.toDonateList') }}
|
||||
</n-button>
|
||||
<n-button type="primary" @click="toDonateList">
|
||||
<template #icon>
|
||||
<i class="ri-cup-line"></i>
|
||||
</template>
|
||||
{{ t('donation.toDonateList') }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="qrcode-grid">
|
||||
<div class="qrcode-item">
|
||||
<n-image
|
||||
:src="alipay"
|
||||
:alt="t('common.alipay')"
|
||||
class="qrcode-image"
|
||||
preview-disabled
|
||||
/>
|
||||
<n-image :src="alipay" :alt="t('common.alipay')" class="qrcode-image" preview-disabled />
|
||||
<span class="qrcode-label">{{ t('common.alipay') }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="qrcode-item">
|
||||
<n-image
|
||||
:src="wechat"
|
||||
:alt="t('common.wechat')"
|
||||
class="qrcode-image"
|
||||
preview-disabled
|
||||
/>
|
||||
<n-image :src="wechat" :alt="t('common.wechat')" class="qrcode-image" preview-disabled />
|
||||
<span class="qrcode-label">{{ t('common.wechat') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,7 +33,7 @@
|
||||
{{ t('donation.refresh') }}
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
|
||||
<div
|
||||
v-for="donor in displayDonors"
|
||||
@@ -53,12 +43,7 @@
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="donor-avatar">
|
||||
<n-avatar
|
||||
:src="donor.avatar"
|
||||
:fallback-src="defaultAvatar"
|
||||
round
|
||||
class="avatar-img"
|
||||
/>
|
||||
<n-avatar :src="donor.avatar" :fallback-src="defaultAvatar" round class="avatar-img" />
|
||||
</div>
|
||||
<div class="donor-info">
|
||||
<div class="donor-meta">
|
||||
@@ -68,7 +53,7 @@
|
||||
<div class="donation-date">{{ donor.date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 有留言的情况 -->
|
||||
<n-popover
|
||||
v-if="donor.message"
|
||||
@@ -90,7 +75,7 @@
|
||||
<i class="ri-double-quotes-r quote-icon"></i>
|
||||
</div>
|
||||
</n-popover>
|
||||
|
||||
|
||||
<!-- 没有留言的情况显示占位符 -->
|
||||
<div v-else class="donation-message-placeholder">
|
||||
<i class="ri-emotion-line"></i>
|
||||
@@ -175,7 +160,7 @@ const toDonateList = () => {
|
||||
|
||||
.header-container {
|
||||
@apply flex justify-between items-center px-4 py-2;
|
||||
|
||||
|
||||
.section-title {
|
||||
@apply text-lg font-medium text-gray-700 dark:text-gray-200;
|
||||
}
|
||||
@@ -205,7 +190,7 @@ const toDonateList = () => {
|
||||
@apply border border-gray-200 dark:border-gray-700/10;
|
||||
@apply flex flex-col;
|
||||
min-height: 100px;
|
||||
|
||||
|
||||
.card-content {
|
||||
@apply flex items-start gap-2 mb-2;
|
||||
}
|
||||
@@ -225,11 +210,11 @@ const toDonateList = () => {
|
||||
|
||||
.donor-meta {
|
||||
@apply flex justify-between items-center mb-0.5;
|
||||
|
||||
|
||||
.donor-name {
|
||||
@apply text-sm font-medium truncate flex-1 mr-1;
|
||||
}
|
||||
|
||||
|
||||
.price-tag {
|
||||
@apply text-xs text-gray-400/80 dark:text-gray-500/80 whitespace-nowrap;
|
||||
}
|
||||
@@ -245,19 +230,19 @@ const toDonateList = () => {
|
||||
@apply bg-gray-100/10 dark:bg-dark-300 rounded;
|
||||
@apply flex items-start;
|
||||
@apply cursor-pointer transition-all duration-200;
|
||||
|
||||
|
||||
.quote-icon {
|
||||
@apply text-gray-300 dark:text-gray-600 flex-shrink-0 opacity-60;
|
||||
|
||||
|
||||
&:first-child {
|
||||
@apply mr-1 self-start;
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
@apply ml-1 self-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.message-text {
|
||||
@apply flex-1 line-clamp-2;
|
||||
}
|
||||
@@ -272,7 +257,7 @@ const toDonateList = () => {
|
||||
@apply bg-gray-100/5 dark:bg-dark-300 rounded;
|
||||
@apply flex items-center justify-center gap-1 italic;
|
||||
@apply border border-transparent;
|
||||
|
||||
|
||||
i {
|
||||
@apply text-gray-300 dark:text-gray-600;
|
||||
}
|
||||
@@ -284,11 +269,11 @@ const toDonateList = () => {
|
||||
|
||||
.quote-icon {
|
||||
@apply text-gray-400 dark:text-gray-500 flex-shrink-0;
|
||||
|
||||
|
||||
&:first-child {
|
||||
@apply mr-1.5 self-start;
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
@apply ml-1.5 self-end;
|
||||
}
|
||||
@@ -305,30 +290,30 @@ const toDonateList = () => {
|
||||
|
||||
.qrcode-container {
|
||||
@apply p-5 rounded-lg shadow-sm bg-light-100 dark:bg-gray-800/5 backdrop-blur-sm border border-gray-200 dark:border-gray-700/10;
|
||||
|
||||
|
||||
.description {
|
||||
@apply text-center text-sm text-gray-600 dark:text-gray-300 mb-4;
|
||||
|
||||
|
||||
p {
|
||||
@apply mb-2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.qrcode-grid {
|
||||
@apply flex justify-between items-center gap-4 flex-wrap;
|
||||
|
||||
|
||||
.qrcode-item {
|
||||
@apply flex flex-col items-center gap-2;
|
||||
|
||||
|
||||
.qrcode-image {
|
||||
@apply w-36 h-36 rounded-lg border border-gray-200 dark:border-gray-700/10 shadow-sm transition-transform duration-200 hover:scale-105;
|
||||
}
|
||||
|
||||
|
||||
.qrcode-label {
|
||||
@apply text-sm text-gray-600 dark:text-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.donate-button {
|
||||
@apply flex flex-col items-center justify-center;
|
||||
}
|
||||
|
||||
@@ -59,9 +59,9 @@ onMounted(() => {
|
||||
// 监听下载完成
|
||||
window.electron.ipcRenderer.on('music-download-complete', async (_, data) => {
|
||||
if (data.success) {
|
||||
downloadList.value = downloadList.value.filter(item => item.filename !== data.filename);
|
||||
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
|
||||
} else {
|
||||
const existingItem = downloadList.value.find(item => item.filename === data.filename);
|
||||
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
|
||||
if (existingItem) {
|
||||
Object.assign(existingItem, {
|
||||
status: 'error',
|
||||
@@ -69,7 +69,7 @@ onMounted(() => {
|
||||
progress: 0
|
||||
});
|
||||
setTimeout(() => {
|
||||
downloadList.value = downloadList.value.filter(item => item.filename !== data.filename);
|
||||
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Router } from 'vue-router';
|
||||
|
||||
import { useMusicStore } from '@/store/modules/music';
|
||||
|
||||
/**
|
||||
@@ -35,4 +36,4 @@ export function navigateToMusicList(
|
||||
name: 'musicList'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,13 +31,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { getAlbum, getListDetail } from '@/api/list';
|
||||
import MvPlayer from '@/components/MvPlayer.vue';
|
||||
import { useMusicStore } from '@/store/modules/music';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { IMvItem } from '@/type/mv';
|
||||
import { getImgUrl } from '@/utils';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useMusicStore } from '@/store/modules/music';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -88,15 +89,10 @@ const handleClick = async () => {
|
||||
},
|
||||
description: res.data.album.description
|
||||
};
|
||||
|
||||
|
||||
// 保存数据到store
|
||||
musicStore.setCurrentMusicList(
|
||||
songList.value,
|
||||
props.item.name,
|
||||
listInfo.value,
|
||||
false
|
||||
);
|
||||
|
||||
musicStore.setCurrentMusicList(songList.value, props.item.name, listInfo.value, false);
|
||||
|
||||
// 使用路由跳转
|
||||
router.push({
|
||||
name: 'musicList',
|
||||
@@ -107,15 +103,10 @@ const handleClick = async () => {
|
||||
const res = await getListDetail(props.item.id);
|
||||
songList.value = res.data.playlist.tracks;
|
||||
listInfo.value = res.data.playlist;
|
||||
|
||||
|
||||
// 保存数据到store
|
||||
musicStore.setCurrentMusicList(
|
||||
songList.value,
|
||||
props.item.name,
|
||||
listInfo.value,
|
||||
false
|
||||
);
|
||||
|
||||
musicStore.setCurrentMusicList(songList.value, props.item.name, listInfo.value, false);
|
||||
|
||||
// 使用路由跳转
|
||||
router.push({
|
||||
name: 'musicList',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<component
|
||||
<component
|
||||
:is="renderComponent"
|
||||
:item="item"
|
||||
:favorite="favorite"
|
||||
@@ -16,12 +16,13 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import type { SongResult } from '@/type/music';
|
||||
|
||||
import StandardSongItem from './songItemCom/StandardSongItem.vue';
|
||||
import MiniSongItem from './songItemCom/MiniSongItem.vue';
|
||||
import ListSongItem from './songItemCom/ListSongItem.vue';
|
||||
import CompactSongItem from './songItemCom/CompactSongItem.vue';
|
||||
import ListSongItem from './songItemCom/ListSongItem.vue';
|
||||
import MiniSongItem from './songItemCom/MiniSongItem.vue';
|
||||
import StandardSongItem from './songItemCom/StandardSongItem.vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
||||
@@ -421,7 +421,7 @@ const handleUpdate = async () => {
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
/* 对话框内容样式 */
|
||||
.update-dialog-content {
|
||||
display: flex;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<slot name="image"></slot>
|
||||
<slot name="content"></slot>
|
||||
<slot name="operating"></slot>
|
||||
|
||||
|
||||
<song-item-dropdown
|
||||
v-if="isElectron"
|
||||
:item="item"
|
||||
@@ -33,10 +33,11 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import SongItemDropdown from './SongItemDropdown.vue';
|
||||
import { useSongItem } from '@/hooks/useSongItem';
|
||||
import { isElectron } from '@/utils';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { isElectron } from '@/utils';
|
||||
|
||||
import SongItemDropdown from './SongItemDropdown.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
item: SongResult;
|
||||
@@ -115,4 +116,4 @@ defineExpose({
|
||||
.text-ellipsis {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,11 @@
|
||||
>
|
||||
<!-- 索引插槽 -->
|
||||
<template #index>
|
||||
<div v-if="index !== undefined" class="song-item-index" :class="{ 'text-green-500': isPlaying }">
|
||||
<div
|
||||
v-if="index !== undefined"
|
||||
class="song-item-index"
|
||||
:class="{ 'text-green-500': isPlaying }"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -25,13 +29,17 @@
|
||||
<n-checkbox :checked="selected" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 内容插槽 -->
|
||||
<template #content>
|
||||
<div class="song-item-content-compact">
|
||||
<div class="song-item-content-compact-wrapper">
|
||||
<div class="song-item-content-compact-title w-60 flex-shrink-0">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">
|
||||
<n-ellipsis
|
||||
class="text-ellipsis"
|
||||
line-clamp="1"
|
||||
:class="{ 'text-green-500': isPlaying }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
@@ -56,11 +64,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 操作插槽 -->
|
||||
<template #operating>
|
||||
<div class="song-item-operating-compact">
|
||||
<div v-if="favorite" class="song-item-operating-like" :class="{ 'opacity-0': !isHovering && !isFavorite }">
|
||||
<div
|
||||
v-if="favorite"
|
||||
class="song-item-operating-like"
|
||||
:class="{ 'opacity-0': !isHovering && !isFavorite }"
|
||||
>
|
||||
<i
|
||||
class="iconfont icon-likefill"
|
||||
:class="{ 'like-active': isFavorite }"
|
||||
@@ -69,13 +81,21 @@
|
||||
</div>
|
||||
<div
|
||||
class="song-item-operating-play animate__animated"
|
||||
:class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading, 'opacity-0': !isHovering && !isPlaying }"
|
||||
:class="{
|
||||
'bg-green-600': isPlaying,
|
||||
animate__flipInY: playLoading,
|
||||
'opacity-0': !isHovering && !isPlaying
|
||||
}"
|
||||
@click="onPlayMusic"
|
||||
>
|
||||
<i v-if="isPlaying && play" class="iconfont icon-stop"></i>
|
||||
<i v-else class="iconfont icon-playfill"></i>
|
||||
</div>
|
||||
<div class="song-item-operating-menu" @click.stop="onMenuClick" :class="{ 'opacity-0': !isHovering && !isPlaying }">
|
||||
<div
|
||||
class="song-item-operating-menu"
|
||||
@click.stop="onMenuClick"
|
||||
:class="{ 'opacity-0': !isHovering && !isPlaying }"
|
||||
>
|
||||
<i class="iconfont ri-more-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,10 +106,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { NCheckbox, NEllipsis } from 'naive-ui';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { usePlayerStore } from '@/store';
|
||||
import BaseSongItem from './BaseSongItem.vue';
|
||||
import type { SongResult } from '@/type/music';
|
||||
|
||||
import BaseSongItem from './BaseSongItem.vue';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
const props = withDefaults(
|
||||
@@ -249,4 +271,4 @@ const formatDuration = (ms: number): string => {
|
||||
:deep(.text-ellipsis) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<n-checkbox :checked="selected" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 图片插槽 -->
|
||||
<template #image>
|
||||
<n-image
|
||||
@@ -32,12 +32,16 @@
|
||||
@load="onImageLoad"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 内容插槽 -->
|
||||
<template #content>
|
||||
<div class="song-item-content">
|
||||
<div class="song-item-content-wrapper">
|
||||
<n-ellipsis class="song-item-content-title text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">
|
||||
<n-ellipsis
|
||||
class="song-item-content-title text-ellipsis"
|
||||
line-clamp="1"
|
||||
:class="{ 'text-green-500': isPlaying }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</n-ellipsis>
|
||||
<div class="song-item-content-divider">-</div>
|
||||
@@ -54,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 操作插槽 -->
|
||||
<template #operating>
|
||||
<div class="song-item-operating song-item-operating-list">
|
||||
@@ -67,7 +71,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
|
||||
:class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading }"
|
||||
:class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
|
||||
@click="onPlayMusic"
|
||||
>
|
||||
<i v-if="isPlaying && play" class="iconfont icon-stop"></i>
|
||||
@@ -81,11 +85,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { NCheckbox, NEllipsis, NImage } from 'naive-ui';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { usePlayerStore } from '@/store';
|
||||
import BaseSongItem from './BaseSongItem.vue';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl } from '@/utils';
|
||||
|
||||
import BaseSongItem from './BaseSongItem.vue';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
const props = withDefaults(
|
||||
@@ -187,4 +193,4 @@ const onPlayMusic = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<n-checkbox :checked="selected" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 图片插槽 -->
|
||||
<template #image>
|
||||
<n-image
|
||||
@@ -32,7 +32,7 @@
|
||||
@load="onImageLoad"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 内容插槽 -->
|
||||
<template #content>
|
||||
<div class="song-item-content">
|
||||
@@ -55,7 +55,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 操作插槽 -->
|
||||
<template #operating>
|
||||
<div class="song-item-operating">
|
||||
@@ -68,7 +68,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
|
||||
:class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading }"
|
||||
:class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
|
||||
@click="onPlayMusic"
|
||||
>
|
||||
<i v-if="isPlaying && play" class="iconfont icon-stop"></i>
|
||||
@@ -82,11 +82,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { NCheckbox, NEllipsis, NImage } from 'naive-ui';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { usePlayerStore } from '@/store';
|
||||
import BaseSongItem from './BaseSongItem.vue';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl } from '@/utils';
|
||||
|
||||
import BaseSongItem from './BaseSongItem.vue';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
const props = withDefaults(
|
||||
@@ -169,11 +171,11 @@ const onPlayMusic = () => {
|
||||
|
||||
&-like {
|
||||
@apply mr-1 ml-1 cursor-pointer;
|
||||
|
||||
|
||||
.icon-likefill {
|
||||
@apply text-base transition text-gray-500 dark:text-gray-400 hover:text-red-500;
|
||||
}
|
||||
|
||||
|
||||
.like-active {
|
||||
@apply text-red-500 dark:text-red-500;
|
||||
}
|
||||
@@ -190,4 +192,4 @@ const onPlayMusic = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MenuOption } from 'naive-ui';
|
||||
import { NEllipsis, NImage, NDropdown } from 'naive-ui';
|
||||
import { NDropdown, NEllipsis, NImage } from 'naive-ui';
|
||||
import { computed, h, inject } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -35,12 +35,12 @@ const props = defineProps<{
|
||||
}>();
|
||||
|
||||
const emits = defineEmits([
|
||||
'update:show',
|
||||
'select',
|
||||
'play',
|
||||
'play-next',
|
||||
'download',
|
||||
'add-to-playlist',
|
||||
'update:show',
|
||||
'select',
|
||||
'play',
|
||||
'play-next',
|
||||
'download',
|
||||
'add-to-playlist',
|
||||
'toggle-favorite',
|
||||
'toggle-dislike',
|
||||
'remove'
|
||||
@@ -104,7 +104,9 @@ const renderSongPreview = () => {
|
||||
},
|
||||
{
|
||||
default: () => {
|
||||
const artistNames = (props.item.ar || props.item.song?.artists)?.map((a) => a.name).join(' / ');
|
||||
const artistNames = (props.item.ar || props.item.song?.artists)
|
||||
?.map((a) => a.name)
|
||||
.join(' / ');
|
||||
return artistNames || '未知艺术家';
|
||||
}
|
||||
}
|
||||
@@ -164,8 +166,11 @@ const dropdownOptions = computed<MenuOption[]>(() => {
|
||||
{
|
||||
label: props.isDislike ? t('songItem.menu.undislike') : t('songItem.menu.dislike'),
|
||||
key: 'dislike',
|
||||
icon: () => h('i', { class: `iconfont ${props.isDislike ? 'ri-dislike-fill text-green-500': 'ri-dislike-line'}` })
|
||||
},
|
||||
icon: () =>
|
||||
h('i', {
|
||||
class: `iconfont ${props.isDislike ? 'ri-dislike-fill text-green-500' : 'ri-dislike-line'}`
|
||||
})
|
||||
}
|
||||
];
|
||||
|
||||
if (props.canRemove) {
|
||||
@@ -188,7 +193,7 @@ const dropdownOptions = computed<MenuOption[]>(() => {
|
||||
// 处理选择
|
||||
const handleSelect = (key: string | number) => {
|
||||
emits('update:show', false);
|
||||
|
||||
|
||||
switch (key) {
|
||||
case 'download':
|
||||
emits('download');
|
||||
@@ -249,4 +254,4 @@ const handleSelect = (key: string | number) => {
|
||||
:deep(.n-dropdown-option-body--render) {
|
||||
@apply p-0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<n-checkbox :checked="selected" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 图片插槽 -->
|
||||
<template #image>
|
||||
<n-image
|
||||
@@ -32,12 +32,17 @@
|
||||
@load="onImageLoad"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 内容插槽 -->
|
||||
<template #content>
|
||||
<div class="song-item-content">
|
||||
<div class="song-item-content-title">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">{{ item.name }}</n-ellipsis>
|
||||
<n-ellipsis
|
||||
class="text-ellipsis"
|
||||
line-clamp="1"
|
||||
:class="{ 'text-green-500': isPlaying }"
|
||||
>{{ item.name }}</n-ellipsis
|
||||
>
|
||||
</div>
|
||||
<div class="song-item-content-name">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1">
|
||||
@@ -53,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 操作插槽 -->
|
||||
<template #operating>
|
||||
<div class="song-item-operating">
|
||||
@@ -74,7 +79,7 @@
|
||||
</n-tooltip>
|
||||
<div
|
||||
class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
|
||||
:class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading }"
|
||||
:class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
|
||||
@click="onPlayMusic"
|
||||
>
|
||||
<i v-if="isPlaying && play" class="iconfont icon-stop"></i>
|
||||
@@ -91,10 +96,11 @@ import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { usePlayerStore } from '@/store';
|
||||
import BaseSongItem from './BaseSongItem.vue';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl } from '@/utils';
|
||||
|
||||
import BaseSongItem from './BaseSongItem.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
@@ -185,7 +191,7 @@ const onPlayNext = () => {
|
||||
|
||||
&-next {
|
||||
@apply mr-2 cursor-pointer transition-all;
|
||||
|
||||
|
||||
.iconfont {
|
||||
@apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
|
||||
}
|
||||
@@ -210,4 +216,4 @@ const onPlayNext = () => {
|
||||
@apply mr-3 cursor-pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -32,9 +32,9 @@ import { useRouter } from 'vue-router';
|
||||
|
||||
import { getNewAlbum } from '@/api/home';
|
||||
import { getAlbum } from '@/api/list';
|
||||
import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
|
||||
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
|
||||
import type { IAlbumNew } from '@/type/album';
|
||||
import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
|
||||
|
||||
const { t } = useI18n();
|
||||
const albumData = ref<IAlbumNew>();
|
||||
@@ -51,17 +51,17 @@ const handleClick = async (item: any) => {
|
||||
|
||||
const openAlbum = async (album: any) => {
|
||||
if (!album) return;
|
||||
|
||||
|
||||
try {
|
||||
const res = await getAlbum(album.id);
|
||||
const { songs, album: albumInfo } = res.data;
|
||||
|
||||
|
||||
const formattedSongs = songs.map((song: any) => {
|
||||
song.al.picUrl = song.al.picUrl || albumInfo.picUrl;
|
||||
song.picUrl = song.al.picUrl || albumInfo.picUrl || song.picUrl;
|
||||
return song;
|
||||
});
|
||||
|
||||
|
||||
navigateToMusicList(router, {
|
||||
id: album.id,
|
||||
type: 'album',
|
||||
|
||||
@@ -30,11 +30,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<p
|
||||
v-for="item in getDisplayDaySongs.slice(0, 5)"
|
||||
:key="item.id"
|
||||
class="text-el"
|
||||
>
|
||||
<p v-for="item in getDisplayDaySongs.slice(0, 5)" :key="item.id" class="text-el">
|
||||
{{ item.name }}
|
||||
<br />
|
||||
</p>
|
||||
@@ -100,7 +96,9 @@
|
||||
@click="handleArtistClick(item.id)"
|
||||
>
|
||||
<div
|
||||
:style="setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))"
|
||||
:style="
|
||||
setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))
|
||||
"
|
||||
class="recommend-singer-item-bg"
|
||||
></div>
|
||||
<div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
|
||||
@@ -128,7 +126,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watchEffect, computed } from 'vue';
|
||||
import { computed, onMounted, ref, watchEffect } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
@@ -136,6 +134,7 @@ import { getDayRecommend, getHotSinger } from '@/api/home';
|
||||
import { getListDetail } from '@/api/list';
|
||||
import { getMusicDetail } from '@/api/music';
|
||||
import { getUserPlaylist } from '@/api/user';
|
||||
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import { usePlayerStore, useUserStore } from '@/store';
|
||||
import { IDayRecommend } from '@/type/day_recommend';
|
||||
@@ -150,7 +149,6 @@ import {
|
||||
setAnimationDelay,
|
||||
setBackgroundImg
|
||||
} from '@/utils';
|
||||
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const playerStore = usePlayerStore();
|
||||
@@ -232,7 +230,6 @@ onMounted(async () => {
|
||||
loadNonUserData();
|
||||
});
|
||||
|
||||
|
||||
// 提取每日推荐加载逻辑到单独的函数
|
||||
const loadDayRecommendData = async () => {
|
||||
try {
|
||||
@@ -242,7 +239,9 @@ const loadDayRecommendData = async () => {
|
||||
const dayRecommendSource = dayRecommend as unknown as IDayRecommend;
|
||||
dayRecommendData.value = {
|
||||
...dayRecommendSource,
|
||||
dailySongs: dayRecommendSource.dailySongs.filter((song: any) => !playerStore.dislikeList.includes(song.id))
|
||||
dailySongs: dayRecommendSource.dailySongs.filter(
|
||||
(song: any) => !playerStore.dislikeList.includes(song.id)
|
||||
)
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('获取每日推荐失败:', error);
|
||||
@@ -256,11 +255,10 @@ const loadNonUserData = async () => {
|
||||
if (!userStore.user) {
|
||||
await loadDayRecommendData();
|
||||
}
|
||||
|
||||
|
||||
// 获取热门歌手
|
||||
const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
|
||||
hotSingerData.value = singerData;
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载热门歌手数据失败:', error);
|
||||
}
|
||||
@@ -285,15 +283,17 @@ const handleArtistClick = (id: number) => {
|
||||
navigateToArtist(id);
|
||||
};
|
||||
const getDisplayDaySongs = computed(() => {
|
||||
if(!dayRecommendData.value){
|
||||
if (!dayRecommendData.value) {
|
||||
return [];
|
||||
}
|
||||
return dayRecommendData.value.dailySongs.filter((song) => !playerStore.dislikeList.includes(song.id));
|
||||
})
|
||||
return dayRecommendData.value.dailySongs.filter(
|
||||
(song) => !playerStore.dislikeList.includes(song.id)
|
||||
);
|
||||
});
|
||||
|
||||
const showDayRecommend = () => {
|
||||
if (!dayRecommendData.value?.dailySongs) return;
|
||||
|
||||
|
||||
navigateToMusicList(router, {
|
||||
type: 'dailyRecommend',
|
||||
name: t('comp.recommendSinger.songlist'),
|
||||
@@ -305,11 +305,11 @@ const showDayRecommend = () => {
|
||||
const openPlaylist = (item: any) => {
|
||||
playlistItem.value = item;
|
||||
playlistLoading.value = true;
|
||||
|
||||
getListDetail(item.id).then(res => {
|
||||
|
||||
getListDetail(item.id).then((res) => {
|
||||
playlistDetail.value = res.data;
|
||||
playlistLoading.value = false;
|
||||
|
||||
|
||||
navigateToMusicList(router, {
|
||||
id: item.id,
|
||||
type: 'playlist',
|
||||
@@ -416,7 +416,6 @@ watchEffect(() => {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const getPlaylistGridClass = (length: number) => {
|
||||
switch (length) {
|
||||
case 1:
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps<{
|
||||
correctionTime: number
|
||||
correctionTime: number;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'adjust', delta: number): void
|
||||
(e: 'adjust', delta: number): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="lyric-correction"
|
||||
>
|
||||
<div class="lyric-correction">
|
||||
<n-tooltip placement="right">
|
||||
<template #trigger>
|
||||
<div
|
||||
@@ -28,7 +26,9 @@ const { t } = useI18n();
|
||||
</template>
|
||||
<span>{{ t('player.subtractCorrection', { num: 0.2 }) }}</span>
|
||||
</n-tooltip>
|
||||
<span class="text-xs py-0.5 px-1 rounded bg-white/70 dark:bg-neutral-800/70 shadow font-mono tracking-wider text-gray-700 dark:text-gray-200 bg-opacity-40 backdrop-blur-2xl">
|
||||
<span
|
||||
class="text-xs py-0.5 px-1 rounded bg-white/70 dark:bg-neutral-800/70 shadow font-mono tracking-wider text-gray-700 dark:text-gray-200 bg-opacity-40 backdrop-blur-2xl"
|
||||
>
|
||||
{{ props.correctionTime > 0 ? '+' : '' }}{{ props.correctionTime.toFixed(1) }}s
|
||||
</span>
|
||||
<n-tooltip placement="right">
|
||||
@@ -55,9 +55,9 @@ const { t } = useI18n();
|
||||
@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{
|
||||
.mobile {
|
||||
.lyric-correction {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
v-if="!config.hideMiniPlayBar"
|
||||
class="mt-4"
|
||||
:pure-mode-enabled="config.pureModeEnabled"
|
||||
:isDark=" textColors.theme === 'dark'"
|
||||
:isDark="textColors.theme === 'dark'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,7 +135,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 歌词右下角矫正按钮组件 -->
|
||||
<LyricCorrectionControl
|
||||
<lyric-correction-control
|
||||
v-if="!isMobile"
|
||||
:correction-time="correctionTime"
|
||||
@adjust="adjustCorrectionTime"
|
||||
@@ -151,19 +151,19 @@ import { useDebounceFn } from '@vueuse/core';
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
|
||||
import LyricSettings from '@/components/lyric/LyricSettings.vue';
|
||||
import SimplePlayBar from '@/components/player/SimplePlayBar.vue';
|
||||
import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
|
||||
import {
|
||||
adjustCorrectionTime,
|
||||
artistList,
|
||||
correctionTime,
|
||||
lrcArray,
|
||||
nowIndex,
|
||||
playMusic,
|
||||
setAudioTime,
|
||||
textColors,
|
||||
useLyricProgress,
|
||||
correctionTime,
|
||||
adjustCorrectionTime
|
||||
useLyricProgress
|
||||
} from '@/hooks/MusicHook';
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -4,9 +4,10 @@
|
||||
|
||||
<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';
|
||||
import { isMobile } from '@/utils';
|
||||
|
||||
// 根据当前设备类型选择需要显示的组件
|
||||
const componentToUse = computed(() => {
|
||||
@@ -18,4 +19,4 @@ const musicFullRef = ref<InstanceType<typeof MusicFull>>();
|
||||
defineExpose({
|
||||
musicFullRef
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -44,7 +44,11 @@
|
||||
class="color-preview"
|
||||
:style="{ backgroundColor: currentColor }"
|
||||
@click="showColorPicker = !showColorPicker"
|
||||
:title="showColorPicker ? t('settings.themeColor.tooltips.closeColorPicker') : t('settings.themeColor.tooltips.openColorPicker')"
|
||||
:title="
|
||||
showColorPicker
|
||||
? t('settings.themeColor.tooltips.closeColorPicker')
|
||||
: t('settings.themeColor.tooltips.openColorPicker')
|
||||
"
|
||||
>
|
||||
<i class="ri-palette-line"></i>
|
||||
</div>
|
||||
@@ -70,7 +74,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 颜色选择器（展开时显示） -->
|
||||
<div v-if="showColorPicker" class="color-picker-dropdown">
|
||||
<n-color-picker
|
||||
@@ -86,16 +90,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NColorPicker } from 'naive-ui';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { NColorPicker } from 'naive-ui';
|
||||
|
||||
import {
|
||||
getLyricThemeColors,
|
||||
getPresetColorValue,
|
||||
validateColor,
|
||||
type LyricThemeColor,
|
||||
optimizeColorForTheme,
|
||||
type LyricThemeColor
|
||||
validateColor
|
||||
} from '@/utils/linearColor';
|
||||
|
||||
interface Props {
|
||||
@@ -105,7 +109,7 @@ interface Props {
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'colorChange', color: string): void;
|
||||
(e: 'colorChange', _color: string): void;
|
||||
(e: 'close'): void;
|
||||
}
|
||||
|
||||
@@ -160,7 +164,7 @@ const handlePresetColorSelect = (color: LyricThemeColor) => {
|
||||
const colorValue = getColorValue(color);
|
||||
const optimizedColor = optimizeColorForTheme(colorValue, props.theme);
|
||||
emit('colorChange', optimizedColor);
|
||||
|
||||
|
||||
// 更新输入框和选择器
|
||||
colorInput.value = optimizedColor;
|
||||
pickerColor.value = optimizedColor;
|
||||
@@ -253,31 +257,31 @@ watch(
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateX(-50%) translateY(-10px) scale(0.95);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-50%) translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
// 小屏幕适配
|
||||
@media (max-width: 520px) {
|
||||
min-width: calc(100vw - 40px);
|
||||
left: 20px;
|
||||
transform: none;
|
||||
|
||||
|
||||
&.hidden {
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
}
|
||||
|
||||
|
||||
&.visible {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
@@ -289,14 +293,14 @@ watch(
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
|
||||
.panel-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
.close-button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@@ -307,12 +311,12 @@ watch(
|
||||
border-radius: 6px;
|
||||
color: var(--text-color);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -325,7 +329,7 @@ watch(
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
@@ -334,7 +338,7 @@ watch(
|
||||
margin-bottom: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
@@ -347,7 +351,7 @@ watch(
|
||||
.preset-colors {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
|
||||
.color-dot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@@ -358,17 +362,17 @@ watch(
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
border-color: var(--text-color);
|
||||
box-shadow: 0 0 0 2px var(--control-bg);
|
||||
}
|
||||
|
||||
|
||||
i {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
@@ -384,7 +388,7 @@ watch(
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.color-preview {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@@ -395,19 +399,19 @@ watch(
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
i {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.color-input {
|
||||
width: 80px;
|
||||
height: 24px;
|
||||
@@ -420,12 +424,12 @@ watch(
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
&:focus {
|
||||
border-color: var(--highlight-color, rgba(255, 255, 255, 0.4));
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
@@ -441,7 +445,7 @@ watch(
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
@@ -455,7 +459,7 @@ watch(
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
|
||||
:deep(.n-color-picker) {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -466,15 +470,15 @@ watch(
|
||||
.compact-layout {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.preset-section .preset-colors {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<n-dropdown
|
||||
:show="showDropdown"
|
||||
:options="dropdownOptions"
|
||||
trigger="hover"
|
||||
<n-dropdown
|
||||
:show="showDropdown"
|
||||
:options="dropdownOptions"
|
||||
trigger="hover"
|
||||
:z-index="9999999"
|
||||
@select="handleSelect"
|
||||
placement="top"
|
||||
@update:show="(show) => showDropdown = show"
|
||||
@update:show="(show) => (showDropdown = show)"
|
||||
>
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<div class="advanced-controls-btn">
|
||||
<i class="iconfont ri-settings-3-line"></i>
|
||||
|
||||
|
||||
<!-- 激活状态的小标记 -->
|
||||
<div v-if="hasActiveSettings" class="active-indicator">
|
||||
<span v-if="hasActiveSleepTimer" class="timer-badge">
|
||||
@@ -26,7 +26,12 @@
|
||||
</n-dropdown>
|
||||
|
||||
<!-- EQ 均衡器弹窗 -->
|
||||
<n-modal v-model:show="showEQModal" :mask-closable="true" :unstable-show-mask="false" :z-index="9999999">
|
||||
<n-modal
|
||||
v-model:show="showEQModal"
|
||||
:mask-closable="true"
|
||||
:unstable-show-mask="false"
|
||||
:z-index="9999999"
|
||||
>
|
||||
<div class="eq-modal-content">
|
||||
<div class="modal-close" @click="showEQModal = false">
|
||||
<i class="ri-close-line"></i>
|
||||
@@ -36,7 +41,12 @@
|
||||
</n-modal>
|
||||
|
||||
<!-- 定时关闭弹窗 -->
|
||||
<n-modal v-model:show="playerStore.showSleepTimer" :mask-closable="true" :unstable-show-mask="false" :z-index="9999999">
|
||||
<n-modal
|
||||
v-model:show="playerStore.showSleepTimer"
|
||||
:mask-closable="true"
|
||||
:unstable-show-mask="false"
|
||||
:z-index="9999999"
|
||||
>
|
||||
<div class="timer-modal-content">
|
||||
<div class="modal-close" @click="playerStore.showSleepTimer = false">
|
||||
<i class="ri-close-line"></i>
|
||||
@@ -46,18 +56,23 @@
|
||||
</n-modal>
|
||||
|
||||
<!-- 播放速度设置弹窗 -->
|
||||
<n-modal v-model:show="showSpeedModal" :mask-closable="true" :unstable-show-mask="false" :z-index="9999999">
|
||||
<n-modal
|
||||
v-model:show="showSpeedModal"
|
||||
:mask-closable="true"
|
||||
:unstable-show-mask="false"
|
||||
:z-index="9999999"
|
||||
>
|
||||
<div class="speed-modal-content">
|
||||
<div class="modal-close" @click="showSpeedModal = false">
|
||||
<i class="ri-close-line"></i>
|
||||
</div>
|
||||
<h3>{{ t('player.playBar.playbackSpeed') }}</h3>
|
||||
<div class="speed-options">
|
||||
<div
|
||||
v-for="option in playbackRateOptions"
|
||||
<div
|
||||
v-for="option in playbackRateOptions"
|
||||
:key="option.key"
|
||||
class="speed-option"
|
||||
:class="{ 'active': playbackRate === option.key }"
|
||||
:class="{ active: playbackRate === option.key }"
|
||||
@click="selectSpeed(option.key)"
|
||||
>
|
||||
{{ option.label }}
|
||||
@@ -68,12 +83,13 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, h, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { DropdownOption } from 'naive-ui';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { computed, h, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import EqControl from '@/components/EQControl.vue';
|
||||
import SleepTimer from '@/components/player/SleepTimer.vue';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
const { t } = useI18n();
|
||||
const playerStore = usePlayerStore();
|
||||
@@ -93,13 +109,16 @@ watch(showEQModal, (newValue) => {
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => playerStore.showSleepTimer, (newValue) => {
|
||||
if (newValue) {
|
||||
// 如果睡眠定时器弹窗打开，关闭其他弹窗
|
||||
showEQModal.value = false;
|
||||
showSpeedModal.value = false;
|
||||
watch(
|
||||
() => playerStore.showSleepTimer,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
// 如果睡眠定时器弹窗打开，关闭其他弹窗
|
||||
showEQModal.value = false;
|
||||
showSpeedModal.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
|
||||
watch(showSpeedModal, (newValue) => {
|
||||
if (newValue) {
|
||||
@@ -142,14 +161,17 @@ const dropdownOptions = computed<DropdownOption[]>(() => [
|
||||
key: 'timer',
|
||||
icon: () => h('i', { class: 'ri-timer-line' }),
|
||||
// 如果有激活的定时器，添加标记
|
||||
suffix: () => hasActiveSleepTimer.value ? h('span', { class: 'active-option-mark' }) : null
|
||||
suffix: () => (hasActiveSleepTimer.value ? h('span', { class: 'active-option-mark' }) : null)
|
||||
},
|
||||
{
|
||||
label: t('player.playBar.playbackSpeed') + `(${playbackRate.value}x)`,
|
||||
key: 'speed',
|
||||
icon: () => h('i', { class: 'ri-speed-line' }),
|
||||
// 如果播放速度不是1.0，添加标记
|
||||
suffix: () => playbackRate.value !== 1.0 ? h('span', { class: 'active-option-mark' }, `${playbackRate.value}x`) : null
|
||||
suffix: () =>
|
||||
playbackRate.value !== 1.0
|
||||
? h('span', { class: 'active-option-mark' }, `${playbackRate.value}x`)
|
||||
: null
|
||||
}
|
||||
]);
|
||||
|
||||
@@ -159,7 +181,7 @@ const handleSelect = (key: string) => {
|
||||
showEQModal.value = false;
|
||||
playerStore.showSleepTimer = false;
|
||||
showSpeedModal.value = false;
|
||||
|
||||
|
||||
// 然后仅打开所选弹窗
|
||||
switch (key) {
|
||||
case 'eq':
|
||||
@@ -179,18 +201,17 @@ const selectSpeed = (speed: number) => {
|
||||
playerStore.setPlaybackRate(speed);
|
||||
showSpeedModal.value = false;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sleep-timer-countdown {
|
||||
@apply fixed top-0 left-1/2 transform -translate-x-1/2 py-1 px-3 rounded-b-lg bg-green-500 text-white text-sm flex items-center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
||||
z-index: 9998;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
animation: fadeInDown 0.3s ease-out;
|
||||
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
transform: translate(-50%, -100%);
|
||||
@@ -201,7 +222,7 @@ const selectSpeed = (speed: number) => {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -211,28 +232,29 @@ const selectSpeed = (speed: number) => {
|
||||
|
||||
.advanced-controls-btn {
|
||||
@apply cursor-pointer mx-3 relative;
|
||||
|
||||
|
||||
.iconfont {
|
||||
@apply text-2xl transition;
|
||||
@apply hover:text-green-500;
|
||||
}
|
||||
|
||||
|
||||
.active-indicator {
|
||||
@apply absolute -top-1 -right-1 flex;
|
||||
|
||||
.timer-badge, .speed-badge {
|
||||
|
||||
.timer-badge,
|
||||
.speed-badge {
|
||||
@apply flex items-center justify-center text-xs bg-green-500 text-white rounded-full;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
padding: 0 3px;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
|
||||
|
||||
i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.timer-badge + .speed-badge {
|
||||
@apply -ml-2 z-10;
|
||||
}
|
||||
@@ -282,4 +304,4 @@ const selectSpeed = (speed: number) => {
|
||||
@apply text-2xl;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -52,7 +52,13 @@
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<n-popover v-if="component" trigger="hover" :z-index="99999999" placement="top" :show-arrow="false">
|
||||
<n-popover
|
||||
v-if="component"
|
||||
trigger="hover"
|
||||
:z-index="99999999"
|
||||
placement="top"
|
||||
:show-arrow="false"
|
||||
>
|
||||
<template #trigger>
|
||||
<div class="function-button" @click="mute" @wheel.prevent="handleVolumeWheel">
|
||||
<i class="iconfont" :class="getVolumeIcon"></i>
|
||||
@@ -196,16 +202,16 @@ const handleVolumeWheel = (e: WheelEvent) => {
|
||||
const isFavorite = computed(() => {
|
||||
// 对于B站视频，使用ID匹配函数
|
||||
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
|
||||
return playerStore.favoriteList.some(id => isBilibiliIdMatch(id, playMusic.value.id));
|
||||
return playerStore.favoriteList.some((id) => isBilibiliIdMatch(id, playMusic.value.id));
|
||||
}
|
||||
|
||||
|
||||
// 非B站视频直接比较ID
|
||||
return playerStore.favoriteList.includes(playMusic.value.id);
|
||||
});
|
||||
|
||||
const toggleFavorite = async (e: Event) => {
|
||||
e.stopPropagation();
|
||||
|
||||
|
||||
// 处理B站视频的收藏ID
|
||||
let favoriteId = playMusic.value.id;
|
||||
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
|
||||
@@ -538,7 +544,7 @@ const setMusicFull = () => {
|
||||
.volume-slider-wrapper {
|
||||
@apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur;
|
||||
height: 160px;
|
||||
|
||||
|
||||
:deep(.n-slider) {
|
||||
--n-rail-height: 4px;
|
||||
--n-rail-color: theme('colors.gray.200');
|
||||
@@ -642,7 +648,7 @@ const setMusicFull = () => {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-popover){
|
||||
:deep(.n-popover) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -112,8 +112,8 @@
|
||||
import { useThrottleFn } from '@vueuse/core';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
|
||||
import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
|
||||
import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
|
||||
|
||||
@@ -60,9 +60,7 @@
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1">
|
||||
{{ playMusic.name }}
|
||||
</n-ellipsis>
|
||||
<span v-if="playbackRate !== 1.0" class="playback-rate-badge">
|
||||
{{ playbackRate }}x
|
||||
</span>
|
||||
<span v-if="playbackRate !== 1.0" class="playback-rate-badge"> {{ playbackRate }}x </span>
|
||||
</div>
|
||||
<div class="music-content-name">
|
||||
<n-ellipsis
|
||||
@@ -137,13 +135,16 @@
|
||||
</template>
|
||||
{{ t('player.playBar.reparse') }}
|
||||
</n-tooltip>
|
||||
|
||||
|
||||
<!-- 高级控制菜单按钮（整合了 EQ、定时关闭、播放速度） -->
|
||||
<advanced-controls-popover />
|
||||
|
||||
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<i class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer" @click="openPlayListDrawer"></i>
|
||||
<i
|
||||
class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer"
|
||||
@click="openPlayListDrawer"
|
||||
></i>
|
||||
</template>
|
||||
{{ t('player.playBar.playList') }}
|
||||
</n-tooltip>
|
||||
@@ -156,8 +157,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { useThrottleFn } from '@vueuse/core';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
|
||||
import AdvancedControlsPopover from '@/components/player/AdvancedControlsPopover.vue';
|
||||
import ReparsePopover from '@/components/player/ReparsePopover.vue';
|
||||
import {
|
||||
allTime,
|
||||
@@ -169,16 +174,10 @@ import {
|
||||
textColors
|
||||
} from '@/hooks/MusicHook';
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import {
|
||||
isBilibiliIdMatch,
|
||||
usePlayerStore
|
||||
} from '@/store/modules/player';
|
||||
import { isBilibiliIdMatch, usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
|
||||
import AdvancedControlsPopover from '@/components/player/AdvancedControlsPopover.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
@@ -313,7 +312,7 @@ const playModeText = computed(() => {
|
||||
});
|
||||
|
||||
// 播放速度控制
|
||||
const {playbackRate} = storeToRefs(playerStore);
|
||||
const { playbackRate } = storeToRefs(playerStore);
|
||||
// 切换播放模式
|
||||
const togglePlayMode = () => {
|
||||
playerStore.togglePlayMode();
|
||||
@@ -333,7 +332,7 @@ const showSliderTooltip = ref(false);
|
||||
// 播放暂停按钮事件
|
||||
const playMusicEvent = async () => {
|
||||
try {
|
||||
const result = await playerStore.setPlay({ ...playMusic.value});
|
||||
const result = await playerStore.setPlay({ ...playMusic.value });
|
||||
if (result) {
|
||||
playerStore.setPlayMusic(true);
|
||||
}
|
||||
@@ -348,7 +347,7 @@ const musicFullVisible = computed({
|
||||
set: (value) => {
|
||||
playerStore.setMusicFull(value);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// 设置musicFull
|
||||
const setMusicFull = () => {
|
||||
@@ -362,9 +361,9 @@ const setMusicFull = () => {
|
||||
const isFavorite = computed(() => {
|
||||
// 对于B站视频，使用ID匹配函数
|
||||
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
|
||||
return playerStore.favoriteList.some(id => isBilibiliIdMatch(id, playMusic.value.id));
|
||||
return playerStore.favoriteList.some((id) => isBilibiliIdMatch(id, playMusic.value.id));
|
||||
}
|
||||
|
||||
|
||||
// 非B站视频直接比较ID
|
||||
return playerStore.favoriteList.includes(playMusic.value.id);
|
||||
});
|
||||
@@ -372,7 +371,7 @@ const isFavorite = computed(() => {
|
||||
const toggleFavorite = async (e: Event) => {
|
||||
console.log('playMusic.value', playMusic.value);
|
||||
e.stopPropagation();
|
||||
|
||||
|
||||
// 处理B站视频的收藏ID
|
||||
let favoriteId = playMusic.value.id;
|
||||
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
|
||||
@@ -381,7 +380,7 @@ const toggleFavorite = async (e: Event) => {
|
||||
favoriteId = `${playMusic.value.bilibiliData.bvid}--${playMusic.value.song?.ar?.[0]?.id || 0}--${playMusic.value.bilibiliData.cid}`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (isFavorite.value) {
|
||||
playerStore.removeFromFavorite(favoriteId);
|
||||
} else {
|
||||
@@ -490,7 +489,7 @@ const openPlayListDrawer = () => {
|
||||
@apply absolute opacity-0 invisible transition-all duration-300 bottom-[30px] left-1/2 -translate-x-1/2 h-[180px] px-2 py-4 rounded-xl;
|
||||
@apply bg-light dark:bg-dark-200;
|
||||
@apply border border-gray-200 dark:border-gray-700;
|
||||
|
||||
|
||||
.volume-percentage {
|
||||
@apply absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium bg-light dark:bg-dark-200 px-2 py-1 rounded-md;
|
||||
@apply border border-gray-200 dark:border-gray-700;
|
||||
@@ -728,7 +727,6 @@ const openPlayListDrawer = () => {
|
||||
background: var(--hover-color-dark);
|
||||
}
|
||||
|
||||
|
||||
.playback-rate-badge {
|
||||
@apply ml-2 px-1.5 h-4 flex items-center text-xs rounded bg-green-500 bg-opacity-15 text-green-600 dark:text-green-400;
|
||||
font-weight: 500;
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
<template>
|
||||
<!-- 透明遮罩层，点击任意位置关闭 -->
|
||||
<div v-if="internalVisible" class="fixed-overlay" @click="closePanel"></div>
|
||||
|
||||
|
||||
<!-- 使用animate.css进行动画效果 -->
|
||||
<div
|
||||
v-if="internalVisible"
|
||||
<div
|
||||
v-if="internalVisible"
|
||||
class="playlist-panel"
|
||||
:class="[
|
||||
'animate__animated',
|
||||
closing ? (isMobile ? 'animate__slideOutDown' : 'animate__slideOutRight') :
|
||||
(isMobile ? 'animate__slideInUp' : 'animate__slideInRight')
|
||||
closing
|
||||
? isMobile
|
||||
? 'animate__slideOutDown'
|
||||
: 'animate__slideOutRight'
|
||||
: isMobile
|
||||
? 'animate__slideInUp'
|
||||
: 'animate__slideInRight'
|
||||
]"
|
||||
>
|
||||
<div class="playlist-panel-header">
|
||||
@@ -21,7 +26,7 @@
|
||||
<i class="iconfont ri-delete-bin-line"></i>
|
||||
</div>
|
||||
</template>
|
||||
{{ t('player.playList.clearAll')}}
|
||||
{{ t('player.playList.clearAll') }}
|
||||
</n-tooltip>
|
||||
<div class="close-btn" @click="closePanel">
|
||||
<i class="iconfont ri-close-line"></i>
|
||||
@@ -31,7 +36,7 @@
|
||||
<div class="playlist-panel-content">
|
||||
<div v-if="playList.length === 0" class="empty-playlist">
|
||||
<i class="iconfont ri-music-2-line"></i>
|
||||
<p>{{ t('player.playList.empty')}}</p>
|
||||
<p>{{ t('player.playList.empty') }}</p>
|
||||
</div>
|
||||
<n-virtual-list v-else ref="playListRef" :item-size="62" item-resizable :items="playList">
|
||||
<template #default="{ item }">
|
||||
@@ -52,9 +57,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { useDialog, useMessage } from 'naive-ui';
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import type { SongResult } from '@/type/music';
|
||||
@@ -78,27 +84,31 @@ const show = computed({
|
||||
});
|
||||
|
||||
// 监听外部可见性变化
|
||||
watch(show, (newValue) => {
|
||||
if (newValue) {
|
||||
// 打开面板
|
||||
internalVisible.value = true;
|
||||
closing.value = false;
|
||||
// 在下一个渲染周期后滚动到当前歌曲
|
||||
nextTick(() => {
|
||||
scrollToCurrentSong();
|
||||
});
|
||||
} else {
|
||||
// 如果已经是关闭状态，不需要处理
|
||||
if (!internalVisible.value) return;
|
||||
|
||||
// 开始关闭动画
|
||||
closing.value = true;
|
||||
// 等待动画完成后再隐藏组件
|
||||
setTimeout(() => {
|
||||
internalVisible.value = false;
|
||||
}, 400); // 动画持续时间
|
||||
}
|
||||
}, { immediate: true });
|
||||
watch(
|
||||
show,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
// 打开面板
|
||||
internalVisible.value = true;
|
||||
closing.value = false;
|
||||
// 在下一个渲染周期后滚动到当前歌曲
|
||||
nextTick(() => {
|
||||
scrollToCurrentSong();
|
||||
});
|
||||
} else {
|
||||
// 如果已经是关闭状态，不需要处理
|
||||
if (!internalVisible.value) return;
|
||||
|
||||
// 开始关闭动画
|
||||
closing.value = true;
|
||||
// 等待动画完成后再隐藏组件
|
||||
setTimeout(() => {
|
||||
internalVisible.value = false;
|
||||
}, 400); // 动画持续时间
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 播放列表
|
||||
const playList = computed(() => playerStore.playList as SongResult[]);
|
||||
@@ -118,10 +128,10 @@ const handleClearPlaylist = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if(isMobile.value){
|
||||
if (isMobile.value) {
|
||||
closePanel();
|
||||
}
|
||||
|
||||
|
||||
dialog.warning({
|
||||
title: t('player.playList.clearConfirmTitle'),
|
||||
content: t('player.playList.clearConfirmContent'),
|
||||
@@ -159,12 +169,12 @@ const scrollToCurrentSong = () => {
|
||||
if (playListRef.value && playList.value.length > 0) {
|
||||
const index = playerStore.playListIndex;
|
||||
console.log('滚动到歌曲索引:', index);
|
||||
playListRef.value.scrollTo({
|
||||
top: (index > 3 ? (index - 3) : 0) * 62,
|
||||
playListRef.value.scrollTo({
|
||||
top: (index > 3 ? index - 3 : 0) * 62
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
};
|
||||
|
||||
// 删除歌曲
|
||||
const handleDeleteSong = (song: SongResult) => {
|
||||
@@ -185,36 +195,36 @@ const handleDeleteSong = (song: SongResult) => {
|
||||
height: 70vh;
|
||||
top: 15vh; // 距离顶部15%
|
||||
animation-duration: 0.4s !important; // 动画持续时间
|
||||
|
||||
|
||||
@apply bg-light dark:bg-dark shadow-2xl dark:border dark:border-gray-700;
|
||||
|
||||
|
||||
&-header {
|
||||
@apply flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-900;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
|
||||
.dark & {
|
||||
background-color: rgba(18, 18, 18, 0.7);
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
@apply text-base font-medium text-gray-800 dark:text-gray-200;
|
||||
}
|
||||
|
||||
|
||||
.header-actions {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
|
||||
.action-btn,
|
||||
.close-btn {
|
||||
@apply w-8 h-8 flex items-center justify-center rounded-full cursor-pointer mx-1 text-gray-800 dark:text-gray-200;
|
||||
@apply hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
|
||||
|
||||
|
||||
.iconfont {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.action-btn {
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
&:hover {
|
||||
@@ -222,7 +232,7 @@ const handleDeleteSong = (song: SongResult) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-content {
|
||||
@apply h-[calc(70vh-60px)] overflow-hidden;
|
||||
}
|
||||
@@ -230,11 +240,11 @@ const handleDeleteSong = (song: SongResult) => {
|
||||
|
||||
.empty-playlist {
|
||||
@apply flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500;
|
||||
|
||||
|
||||
.iconfont {
|
||||
@apply text-5xl mb-4;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
@apply text-sm;
|
||||
}
|
||||
@@ -267,10 +277,10 @@ const handleDeleteSong = (song: SongResult) => {
|
||||
border-left: none;
|
||||
border-top: 1px solid theme('colors.gray.200');
|
||||
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
|
||||
&-header {
|
||||
@apply text-center relative px-4;
|
||||
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -283,14 +293,14 @@ const handleDeleteSong = (song: SongResult) => {
|
||||
background-color: rgba(150, 150, 150, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-content {
|
||||
height: calc(80vh - 60px);
|
||||
@apply px-4;
|
||||
.delete-btn{
|
||||
.delete-btn {
|
||||
@apply visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
<template #trigger>
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<i
|
||||
<i
|
||||
class="iconfont ri-refresh-line"
|
||||
:class="{ 'text-green-500': isReparse, 'animate-spin': isReparsing }"
|
||||
:class="{ 'text-green-500': isReparse, 'animate-spin': isReparsing }"
|
||||
></i>
|
||||
</template>
|
||||
{{ t('player.playBar.reparse') }}
|
||||
@@ -24,11 +24,11 @@
|
||||
<div class="text-sm opacity-70 mb-3">{{ t('player.reparse.desc') }}</div>
|
||||
<div class="mb-3">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div
|
||||
v-for="source in musicSourceOptions"
|
||||
<div
|
||||
v-for="source in musicSourceOptions"
|
||||
:key="source.value"
|
||||
class="source-button flex items-center p-2 rounded-lg cursor-pointer transition-all duration-200 bg-light-200 dark:bg-dark-200 hover:bg-light-300 dark:hover:bg-dark-300"
|
||||
:class="{
|
||||
:class="{
|
||||
'bg-green-50 dark:bg-green-900/20 text-green-500': isCurrentSource(source.value),
|
||||
'opacity-50 cursor-not-allowed': isReparsing || playMusic.source === 'bilibili'
|
||||
}"
|
||||
@@ -40,10 +40,16 @@
|
||||
<div class="flex-1 text-sm whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
{{ source.label }}
|
||||
</div>
|
||||
<div v-if="isReparsing && currentReparsingSource === source.value" class="w-5 h-5 flex items-center justify-center">
|
||||
<div
|
||||
v-if="isReparsing && currentReparsingSource === source.value"
|
||||
class="w-5 h-5 flex items-center justify-center"
|
||||
>
|
||||
<i class="ri-loader-4-line animate-spin"></i>
|
||||
</div>
|
||||
<div v-else-if="isCurrentSource(source.value)" class="w-5 h-5 flex items-center justify-center">
|
||||
<div
|
||||
v-else-if="isCurrentSource(source.value)"
|
||||
class="w-5 h-5 flex items-center justify-center"
|
||||
>
|
||||
<i class="ri-check-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,7 +59,10 @@
|
||||
{{ t('player.reparse.bilibiliNotSupported') }}
|
||||
</div>
|
||||
<!-- 清除自定义音源 -->
|
||||
<div class="text-red-500 text-sm flex items-center bg-light-200 dark:bg-dark-200 rounded-lg p-2 cursor-pointer" @click="clearCustomSource">
|
||||
<div
|
||||
class="text-red-500 text-sm flex items-center bg-light-200 dark:bg-dark-200 rounded-lg p-2 cursor-pointer"
|
||||
@click="clearCustomSource"
|
||||
>
|
||||
<div class="flex items-center justify-center w-6 h-6 mr-3 text-lg">
|
||||
<i class="ri-close-circle-line"></i>
|
||||
</div>
|
||||
@@ -66,13 +75,14 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage } from 'naive-ui';
|
||||
|
||||
import { playMusic } from '@/hooks/MusicHook';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import type { Platform } from '@/types/music';
|
||||
import { audioService } from '@/services/audioService';
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const { t } = useI18n();
|
||||
@@ -104,13 +114,13 @@ const isCurrentSource = (source: Platform) => {
|
||||
// 获取音源图标
|
||||
const getSourceIcon = (source: Platform) => {
|
||||
const iconMap: Record<Platform, string> = {
|
||||
'migu': 'ri-music-2-fill',
|
||||
'kugou': 'ri-music-fill',
|
||||
'qq': 'ri-qq-fill',
|
||||
'joox': 'ri-disc-fill',
|
||||
'pyncmd': 'ri-netease-cloud-music-fill',
|
||||
'bilibili': 'ri-bilibili-fill',
|
||||
'gdmusic': 'ri-google-fill'
|
||||
migu: 'ri-music-2-fill',
|
||||
kugou: 'ri-music-fill',
|
||||
qq: 'ri-qq-fill',
|
||||
joox: 'ri-disc-fill',
|
||||
pyncmd: 'ri-netease-cloud-music-fill',
|
||||
bilibili: 'ri-bilibili-fill',
|
||||
gdmusic: 'ri-google-fill'
|
||||
};
|
||||
|
||||
return iconMap[source] || 'ri-music-2-fill';
|
||||
@@ -120,11 +130,12 @@ const getSourceIcon = (source: Platform) => {
|
||||
const initSelectedSources = () => {
|
||||
const songId = String(playMusic.value.id);
|
||||
const savedSource = localStorage.getItem(`song_source_${songId}`);
|
||||
|
||||
|
||||
if (savedSource) {
|
||||
try {
|
||||
selectedSourcesValue.value = JSON.parse(savedSource);
|
||||
} catch (e) {
|
||||
console.error('解析保存的音源设置失败:', e);
|
||||
selectedSourcesValue.value = [];
|
||||
}
|
||||
} else {
|
||||
@@ -144,20 +155,20 @@ const directReparseMusic = async (source: Platform) => {
|
||||
if (isReparsing.value || playMusic.value.source === 'bilibili') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
isReparsing.value = true;
|
||||
currentReparsingSource.value = source;
|
||||
|
||||
|
||||
// 更新选中的音源值为当前点击的音源
|
||||
const songId = String(playMusic.value.id);
|
||||
selectedSourcesValue.value = [source];
|
||||
|
||||
|
||||
// 保存到localStorage
|
||||
localStorage.setItem(`song_source_${songId}`, JSON.stringify(selectedSourcesValue.value));
|
||||
|
||||
|
||||
const success = await playerStore.reparseCurrentSong(source);
|
||||
|
||||
|
||||
if (success) {
|
||||
message.success(t('player.reparse.success'));
|
||||
} else {
|
||||
@@ -173,48 +184,55 @@ const directReparseMusic = async (source: Platform) => {
|
||||
};
|
||||
|
||||
// 监听歌曲ID变化，初始化音源设置
|
||||
watch(() => playMusic.value.id, () => {
|
||||
if (playMusic.value.id) {
|
||||
initSelectedSources();
|
||||
}
|
||||
}, { immediate: true });
|
||||
watch(
|
||||
() => playMusic.value.id,
|
||||
() => {
|
||||
if (playMusic.value.id) {
|
||||
initSelectedSources();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听歌曲变化，检查是否有自定义音源
|
||||
watch(() => playMusic.value.id, async (newId) => {
|
||||
if (newId) {
|
||||
const songId = String(newId);
|
||||
const savedSource = localStorage.getItem(`song_source_${songId}`);
|
||||
|
||||
// 如果有保存的音源设置但当前不是使用自定义解析的播放，尝试应用
|
||||
if (savedSource && playMusic.value.source !== 'bilibili') {
|
||||
try {
|
||||
const sources = JSON.parse(savedSource) as Platform[];
|
||||
console.log(`检测到歌曲ID ${songId} 有自定义音源设置:`, sources);
|
||||
|
||||
// 当URL加载失败或过期时，自动应用自定义音源重新加载
|
||||
audioService.on('url_expired', async (trackInfo) => {
|
||||
if (trackInfo && trackInfo.id === playMusic.value.id) {
|
||||
console.log('URL已过期，自动应用自定义音源重新加载');
|
||||
try {
|
||||
isReparsing.value = true;
|
||||
const success = await playerStore.reparseCurrentSong(sources[0]);
|
||||
if (!success) {
|
||||
watch(
|
||||
() => playMusic.value.id,
|
||||
async (newId) => {
|
||||
if (newId) {
|
||||
const songId = String(newId);
|
||||
const savedSource = localStorage.getItem(`song_source_${songId}`);
|
||||
|
||||
// 如果有保存的音源设置但当前不是使用自定义解析的播放，尝试应用
|
||||
if (savedSource && playMusic.value.source !== 'bilibili') {
|
||||
try {
|
||||
const sources = JSON.parse(savedSource) as Platform[];
|
||||
console.log(`检测到歌曲ID ${songId} 有自定义音源设置:`, sources);
|
||||
|
||||
// 当URL加载失败或过期时，自动应用自定义音源重新加载
|
||||
audioService.on('url_expired', async (trackInfo) => {
|
||||
if (trackInfo && trackInfo.id === playMusic.value.id) {
|
||||
console.log('URL已过期，自动应用自定义音源重新加载');
|
||||
try {
|
||||
isReparsing.value = true;
|
||||
const success = await playerStore.reparseCurrentSong(sources[0]);
|
||||
if (!success) {
|
||||
message.error(t('player.reparse.failed'));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('自动重新解析失败:', e);
|
||||
message.error(t('player.reparse.failed'));
|
||||
} finally {
|
||||
isReparsing.value = false;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('自动重新解析失败:', e);
|
||||
message.error(t('player.reparse.failed'));
|
||||
} finally {
|
||||
isReparsing.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('解析保存的音源设置失败:', e);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('解析保存的音源设置失败:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -223,8 +241,12 @@ watch(() => playMusic.value.id, async (newId) => {
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
@@ -240,4 +262,4 @@ watch(() => playMusic.value.id, async (newId) => {
|
||||
.iconfont {
|
||||
@apply text-2xl mx-3;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
<div class="progress-track"></div>
|
||||
<div class="progress-fill" :style="{ width: `${(nowTime / allTime) * 100}%` }"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 时间显示 -->
|
||||
<div class="time-display">
|
||||
<span class="current-time">{{ formatTime(nowTime) }}</span>
|
||||
<span class="total-time">{{ formatTime(allTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 主控制区域 -->
|
||||
<div class="controls-section">
|
||||
<div class="left-controls">
|
||||
@@ -23,24 +23,24 @@
|
||||
<i class="iconfont" :class="playModeIcon"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="center-controls">
|
||||
<!-- 上一首 -->
|
||||
<button class="control-btn" @click="handlePrev">
|
||||
<i class="iconfont icon-prev"></i>
|
||||
</button>
|
||||
|
||||
|
||||
<!-- 播放/暂停 -->
|
||||
<button class="control-btn play-btn" @click="playMusicEvent">
|
||||
<i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
|
||||
</button>
|
||||
|
||||
|
||||
<!-- 下一首 -->
|
||||
<button class="control-btn" @click="handleNext">
|
||||
<i class="iconfont icon-next"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="right-controls">
|
||||
<!-- 播放列表按钮 -->
|
||||
<button class="control-btn small-btn" @click="openPlayListDrawer">
|
||||
@@ -48,7 +48,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 底部控制区域 -->
|
||||
<div class="bottom-section">
|
||||
<div class="spacer"></div>
|
||||
@@ -56,9 +56,9 @@
|
||||
<div class="volume-control">
|
||||
<i class="iconfont" :class="getVolumeIcon" @click="mute"></i>
|
||||
<div class="volume-slider">
|
||||
<n-slider
|
||||
v-model:value="volumeSlider"
|
||||
:step="1"
|
||||
<n-slider
|
||||
v-model:value="volumeSlider"
|
||||
:step="1"
|
||||
:tooltip="false"
|
||||
@wheel.prevent="handleVolumeWheel"
|
||||
></n-slider>
|
||||
@@ -70,18 +70,22 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, watch } from 'vue';
|
||||
import { secondToMinute } from '@/utils';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { allTime, nowTime, playMusic } from '@/hooks/MusicHook';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { secondToMinute } from '@/utils';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
isDark: boolean;
|
||||
}>(), {
|
||||
isDark: false
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
isDark: boolean;
|
||||
}>(),
|
||||
{
|
||||
isDark: false
|
||||
}
|
||||
);
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
@@ -184,27 +188,28 @@ const isDarkMode = computed(() => settingsStore.theme === 'dark' || props.isDark
|
||||
// 主题颜色应用函数
|
||||
const applyThemeColor = (colorValue: string) => {
|
||||
if (!colorValue || !playBarRef.value) return;
|
||||
|
||||
|
||||
console.log('应用主题色:', colorValue);
|
||||
const playBarElement = playBarRef.value;
|
||||
|
||||
|
||||
// 解析RGB值
|
||||
const rgbMatch = colorValue.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
||||
|
||||
|
||||
if (rgbMatch) {
|
||||
const [_, r, g, b] = rgbMatch.map(Number);
|
||||
|
||||
|
||||
// 计算颜色亮度 (0-255)
|
||||
// 使用加权平均值公式: 0.299*R + 0.587*G + 0.114*B
|
||||
const brightness = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
|
||||
|
||||
|
||||
console.log(`主题色亮度: ${brightness}/255`);
|
||||
|
||||
|
||||
// 设置主色
|
||||
playBarElement.style.setProperty('--fill-color', colorValue);
|
||||
|
||||
|
||||
// 亮度自适应处理
|
||||
if (brightness > 200) { // 非常亮的颜色
|
||||
if (brightness > 200) {
|
||||
// 非常亮的颜色
|
||||
// 深化主色以增加对比度
|
||||
const darkenedColor = `rgb(${Math.max(0, r - 60)}, ${Math.max(0, g - 60)}, ${Math.max(0, b - 60)})`;
|
||||
playBarElement.style.setProperty('--fill-color-alt', darkenedColor);
|
||||
@@ -213,7 +218,8 @@ const applyThemeColor = (colorValue: string) => {
|
||||
playBarElement.style.setProperty('--high-contrast-color', '#000000'); // 高对比度颜色
|
||||
playBarElement.classList.add('light-theme-color');
|
||||
playBarElement.classList.remove('dark-theme-color');
|
||||
} else if (brightness < 50) { // 非常暗的颜色
|
||||
} else if (brightness < 50) {
|
||||
// 非常暗的颜色
|
||||
// 提亮主色以增加可见性
|
||||
const lightenedColor = `rgb(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 60)})`;
|
||||
playBarElement.style.setProperty('--fill-color-alt', lightenedColor);
|
||||
@@ -234,7 +240,7 @@ const applyThemeColor = (colorValue: string) => {
|
||||
playBarElement.classList.remove('light-theme-color');
|
||||
playBarElement.classList.remove('dark-theme-color');
|
||||
}
|
||||
|
||||
|
||||
// 设置亮色（用于高亮效果）
|
||||
const lightenedColor = `rgb(${Math.min(255, r + 40)}, ${Math.min(255, g + 40)}, ${Math.min(255, b + 40)})`;
|
||||
playBarElement.style.setProperty('--fill-color-light', lightenedColor);
|
||||
@@ -250,11 +256,14 @@ const applyThemeColor = (colorValue: string) => {
|
||||
};
|
||||
|
||||
// 监听主题色变化
|
||||
watch(() => playerStore.playMusic.primaryColor, (newVal) => {
|
||||
if (newVal) {
|
||||
applyThemeColor(newVal);
|
||||
watch(
|
||||
() => playerStore.playMusic.primaryColor,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
applyThemeColor(newVal);
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (playerStore.playMusic?.primaryColor) {
|
||||
@@ -270,11 +279,11 @@ onMounted(() => {
|
||||
@apply w-full;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
|
||||
/* 默认变量 */
|
||||
--text-on-fill: #ffffff;
|
||||
--high-contrast-color: #ffffff;
|
||||
|
||||
|
||||
&.dark-theme {
|
||||
--text-color: #333333;
|
||||
--muted-color: rgba(0, 0, 0, 0.6);
|
||||
@@ -287,7 +296,7 @@ onMounted(() => {
|
||||
--button-bg: rgba(0, 0, 0, 0.1);
|
||||
--button-hover: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
&:not(.dark-theme) {
|
||||
--text-color: #f1f1f1;
|
||||
--muted-color: rgba(255, 255, 255, 0.6);
|
||||
@@ -300,37 +309,45 @@ onMounted(() => {
|
||||
--button-bg: rgba(255, 255, 255, 0.05);
|
||||
--button-hover: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/* 极亮主题色适配 */
|
||||
&.light-theme-color {
|
||||
.progress-fill {
|
||||
box-shadow: 0 0 8px var(--fill-color-transparent), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow:
|
||||
0 0 8px var(--fill-color-transparent),
|
||||
inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.control-btn.play-btn {
|
||||
box-shadow: 0 3px 8px var(--fill-color-transparent), 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow:
|
||||
0 3px 8px var(--fill-color-transparent),
|
||||
0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
color: var(--text-on-fill);
|
||||
}
|
||||
|
||||
|
||||
.volume-control .iconfont:hover {
|
||||
color: var(--fill-color-alt);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 极暗主题色适配 */
|
||||
&.dark-theme-color {
|
||||
.progress-fill {
|
||||
box-shadow: 0 0 10px var(--fill-color-transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 0 10px var(--fill-color-transparent),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.control-btn.play-btn {
|
||||
box-shadow: 0 3px 12px var(--fill-color-transparent), 0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
|
||||
box-shadow:
|
||||
0 3px 12px var(--fill-color-transparent),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
|
||||
.iconfont {
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.volume-control .iconfont:hover {
|
||||
color: var(--fill-color-light);
|
||||
}
|
||||
@@ -343,47 +360,48 @@ onMounted(() => {
|
||||
|
||||
.top-section {
|
||||
@apply mb-3;
|
||||
|
||||
|
||||
.progress-bar {
|
||||
@apply relative cursor-pointer h-2 mb-2 w-full;
|
||||
|
||||
|
||||
.progress-track {
|
||||
@apply absolute inset-0 rounded-full transition-all duration-150;
|
||||
background-color: var(--track-color);
|
||||
}
|
||||
|
||||
|
||||
.progress-fill {
|
||||
@apply absolute top-0 left-0 h-full rounded-full transition-all duration-150;
|
||||
background: linear-gradient(90deg, var(--fill-color), var(--fill-color-light));
|
||||
box-shadow: 0 0 8px var(--fill-color-transparent);
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
.progress-track{
|
||||
.progress-track {
|
||||
background-color: var(--track-color-hover);
|
||||
}
|
||||
.progress-track, .progress-fill {
|
||||
.progress-track,
|
||||
.progress-fill {
|
||||
@apply h-full;
|
||||
}
|
||||
|
||||
|
||||
.progress-fill {
|
||||
box-shadow: 0 0 12px var(--fill-color-transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.time-display {
|
||||
@apply flex justify-between text-base;
|
||||
color: var(--muted-color);
|
||||
|
||||
|
||||
.time-separator {
|
||||
@apply mx-1;
|
||||
}
|
||||
|
||||
|
||||
.current-time {
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -393,11 +411,12 @@ onMounted(() => {
|
||||
|
||||
.controls-section {
|
||||
@apply flex items-center justify-between mb-4;
|
||||
|
||||
.left-controls, .right-controls {
|
||||
|
||||
.left-controls,
|
||||
.right-controls {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
|
||||
.center-controls {
|
||||
@apply flex items-center justify-center space-x-6;
|
||||
}
|
||||
@@ -414,39 +433,39 @@ onMounted(() => {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-bg);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
background-color: var(--button-hover);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
|
||||
&.play-btn {
|
||||
background: linear-gradient(145deg, var(--fill-color), var(--fill-color-alt));
|
||||
color: var(--text-on-fill);
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
box-shadow: 0 3px 8px var(--fill-color-transparent);
|
||||
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px var(--fill-color-transparent);
|
||||
}
|
||||
|
||||
|
||||
.iconfont {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.small-btn {
|
||||
@apply text-2xl;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
|
||||
.iconfont {
|
||||
@apply text-2xl;
|
||||
}
|
||||
@@ -455,42 +474,46 @@ onMounted(() => {
|
||||
.volume-control {
|
||||
@apply flex items-center space-x-2;
|
||||
color: var(--text-color);
|
||||
|
||||
|
||||
.iconfont {
|
||||
@apply cursor-pointer text-base;
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
color: var(--fill-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.volume-slider {
|
||||
@apply w-24;
|
||||
|
||||
|
||||
:deep(.n-slider) {
|
||||
--n-rail-height: 3px;
|
||||
--n-fill-color: var(--fill-color);
|
||||
--n-rail-color: var(--track-color);
|
||||
--n-handle-size: 12px;
|
||||
|
||||
|
||||
.n-slider-rail {
|
||||
@apply rounded-full;
|
||||
}
|
||||
|
||||
|
||||
.n-slider-rail__fill {
|
||||
background: linear-gradient(90deg, var(--fill-color), var(--fill-color-light));
|
||||
box-shadow: 0 0 6px var(--fill-color-transparent);
|
||||
}
|
||||
|
||||
|
||||
.n-slider-handle {
|
||||
@apply opacity-0 transition-opacity duration-200;
|
||||
background: white;
|
||||
box-shadow: 0 0 6px var(--fill-color-transparent), 0 0 0 1px var(--high-contrast-color);
|
||||
box-shadow:
|
||||
0 0 6px var(--fill-color-transparent),
|
||||
0 0 0 1px var(--high-contrast-color);
|
||||
border: 2px solid var(--fill-color);
|
||||
}
|
||||
|
||||
|
||||
&:hover .n-slider-handle {
|
||||
@apply opacity-100;
|
||||
}
|
||||
@@ -506,4 +529,4 @@ onMounted(() => {
|
||||
color: var(--fill-color);
|
||||
text-shadow: 0 0 8px var(--fill-color-transparent);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="sleep-timer-content">
|
||||
<h3 class="timer-title">{{ t('player.sleepTimer.title') }}</h3>
|
||||
|
||||
|
||||
<div v-if="hasTimerActive" class="sleep-timer-active">
|
||||
<div class="timer-status">
|
||||
<template v-if="timerType === 'time'">
|
||||
@@ -9,19 +9,21 @@
|
||||
</template>
|
||||
<template v-else-if="timerType === 'songs'">
|
||||
<div class="timer-value">{{ remainingSongs }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.songsRemaining', { count: remainingSongs }) }}</div>
|
||||
<div class="timer-label">
|
||||
{{ t('player.sleepTimer.songsRemaining', { count: remainingSongs }) }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="timerType === 'end'">
|
||||
<div class="timer-value">{{ t('player.sleepTimer.activeUntilEnd') }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.afterPlaylist') }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
|
||||
<n-button type="error" class="cancel-timer-btn" @click="handleCancelTimer" round>
|
||||
{{ t('player.sleepTimer.cancel') }}
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="sleep-timer-options">
|
||||
<!-- 按时间定时 -->
|
||||
<div class="option-section">
|
||||
@@ -59,7 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 按歌曲数定时 -->
|
||||
<div class="option-section">
|
||||
<h4 class="option-title">{{ t('player.sleepTimer.songsMode') }}</h4>
|
||||
@@ -96,7 +98,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 播放完列表后关闭 -->
|
||||
<div class="option-section playlist-end-section">
|
||||
<n-button block class="playlist-end-btn" @click="handleSetPlaylistEndTimer" round>
|
||||
@@ -108,9 +110,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
const { t } = useI18n();
|
||||
@@ -163,22 +166,22 @@ function handleCancelTimer() {
|
||||
const formattedRemainingTime = computed(() => {
|
||||
// 依赖刷新触发器强制更新
|
||||
void refreshTrigger.value;
|
||||
|
||||
|
||||
if (timerType.value !== 'time' || !sleepTimer.value.endTime) {
|
||||
return '00:00:00';
|
||||
}
|
||||
|
||||
|
||||
const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
|
||||
const totalSeconds = Math.floor(remaining / 1000);
|
||||
|
||||
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(totalSeconds % 60);
|
||||
|
||||
|
||||
const formattedHours = hours.toString().padStart(2, '0');
|
||||
const formattedMinutes = minutes.toString().padStart(2, '0');
|
||||
const formattedSeconds = seconds.toString().padStart(2, '0');
|
||||
|
||||
|
||||
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
|
||||
});
|
||||
|
||||
@@ -190,10 +193,10 @@ onMounted(() => {
|
||||
if (hasTimerActive.value && timerType.value === 'time') {
|
||||
startTimerUpdate();
|
||||
}
|
||||
|
||||
|
||||
// 监听定时器状态变化
|
||||
watch(
|
||||
() => [hasTimerActive.value, timerType.value],
|
||||
() => [hasTimerActive.value, timerType.value],
|
||||
([newHasTimer, newType]) => {
|
||||
if (newHasTimer && newType === 'time') {
|
||||
startTimerUpdate();
|
||||
@@ -207,7 +210,7 @@ onMounted(() => {
|
||||
// 启动定时器更新UI
|
||||
function startTimerUpdate() {
|
||||
stopTimerUpdate(); // 先停止之前的计时器
|
||||
|
||||
|
||||
// 每秒更新UI
|
||||
timerInterval = window.setInterval(() => {
|
||||
// 更新刷新触发器，强制重新计算
|
||||
@@ -244,13 +247,15 @@ onUnmounted(() => {
|
||||
.timer-status {
|
||||
@apply flex flex-col items-center justify-center p-8 mb-5 w-full rounded-2xl dark:bg-gray-800 dark:bg-opacity-40 dark:shadow-gray-900/20;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.05),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 定时值显示
|
||||
.timer-value {
|
||||
@apply text-4xl font-semibold mb-2 text-green-500;
|
||||
|
||||
|
||||
&.countdown-timer {
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 2px;
|
||||
@@ -266,11 +271,11 @@ onUnmounted(() => {
|
||||
// 取消按钮
|
||||
.cancel-timer-btn {
|
||||
@apply w-full py-3 text-base rounded-full transition-all duration-200;
|
||||
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
@@ -292,37 +297,44 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
// 时间/歌曲选项容器
|
||||
.time-options, .songs-options {
|
||||
.time-options,
|
||||
.songs-options {
|
||||
@apply flex flex-wrap gap-2;
|
||||
|
||||
// 选项按钮共享样式
|
||||
.time-option-btn, .songs-option-btn {
|
||||
.time-option-btn,
|
||||
.songs-option-btn {
|
||||
@apply px-4 py-2 rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
@apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0, 0, 0, 0.05),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
@apply dark:shadow-gray-900/20;
|
||||
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义输入区域
|
||||
.custom-time, .custom-songs {
|
||||
.custom-time,
|
||||
.custom-songs {
|
||||
@apply flex items-center space-x-2 mt-4 w-full;
|
||||
|
||||
// 输入框
|
||||
.custom-time-input, .custom-songs-input {
|
||||
.custom-time-input,
|
||||
.custom-songs-input {
|
||||
@apply flex-1;
|
||||
}
|
||||
|
||||
// 设置按钮
|
||||
.custom-time-btn, .custom-songs-btn {
|
||||
.custom-time-btn,
|
||||
.custom-songs-btn {
|
||||
@apply py-2 px-4 rounded-full transition-all duration-200;
|
||||
}
|
||||
}
|
||||
@@ -339,4 +351,4 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -9,8 +9,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
const { t } = useI18n();
|
||||
@@ -28,19 +29,18 @@ const checkTimerExpired = () => {
|
||||
playerStore.clearSleepTimer();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 在组件挂载时检查定时器状态
|
||||
onMounted(() => {
|
||||
checkTimerExpired();
|
||||
});
|
||||
|
||||
|
||||
// 倒计时显示
|
||||
const formattedRemainingTime = computed(() => {
|
||||
// 依赖刷新触发器强制更新
|
||||
void refreshTrigger.value;
|
||||
|
||||
|
||||
if (sleepTimer.value.type !== 'time' || !sleepTimer.value.endTime) {
|
||||
if (sleepTimer.value.type === 'songs' && sleepTimer.value.remainingSongs) {
|
||||
return t('player.sleepTimer.songsRemaining', { count: sleepTimer.value.remainingSongs });
|
||||
@@ -50,14 +50,14 @@ const formattedRemainingTime = computed(() => {
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
|
||||
const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
|
||||
const totalSeconds = Math.floor(remaining / 1000);
|
||||
|
||||
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(totalSeconds % 60);
|
||||
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
} else {
|
||||
@@ -83,7 +83,7 @@ watch(
|
||||
// 启动定时器更新UI
|
||||
function startTimerUpdate() {
|
||||
stopTimerUpdate(); // 先停止之前的计时器
|
||||
|
||||
|
||||
// 每秒更新UI
|
||||
timerUpdateInterval = window.setInterval(() => {
|
||||
// 更新刷新触发器，强制重新计算
|
||||
@@ -110,16 +110,15 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.sleep-timer-countdown {
|
||||
@apply fixed top-[28px] left-1/2 transform -translate-x-1/2 -translate-y-full py-1 px-3 rounded-b-lg bg-green-500 text-white text-sm flex items-center hover:scale-110 transition-all cursor-pointer;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
||||
z-index: 9998;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
animation: fadeInDown 0.3s ease-out;
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
transform: translate(-50%, -150%);
|
||||
@@ -130,11 +129,11 @@ onUnmounted(() => {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { defineEmits, defineProps, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -113,4 +113,4 @@ const handleCancel = () => {
|
||||
selectedTypes.value = [];
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -34,7 +34,10 @@
|
||||
</div>
|
||||
|
||||
<!-- GD音乐台设置 -->
|
||||
<div v-if="selectedSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
|
||||
<div
|
||||
v-if="selectedSources.includes('gdmusic')"
|
||||
class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
|
||||
@@ -45,8 +48,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { defineEmits, defineProps, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { type Platform } from '@/types/music';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -102,10 +106,9 @@ watch(
|
||||
const handleConfirm = () => {
|
||||
// 确保至少选择一个音源
|
||||
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili'];
|
||||
const valuesToEmit = selectedSources.value.length > 0
|
||||
? [...new Set(selectedSources.value)]
|
||||
: defaultPlatforms;
|
||||
|
||||
const valuesToEmit =
|
||||
selectedSources.value.length > 0 ? [...new Set(selectedSources.value)] : defaultPlatforms;
|
||||
|
||||
emit('update:sources', valuesToEmit);
|
||||
visible.value = false;
|
||||
};
|
||||
@@ -115,4 +118,4 @@ const handleCancel = () => {
|
||||
selectedSources.value = [...props.sources];
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -46,10 +46,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import type { FormRules } from 'naive-ui';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { defineEmits, defineProps, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
@@ -92,7 +92,8 @@ const proxyRules: FormRules = {
|
||||
validator: (_rule, value) => {
|
||||
if (!value) return false;
|
||||
// 简单的IP或域名验证
|
||||
const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
|
||||
const ipRegex =
|
||||
/^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
|
||||
return ipRegex.test(value);
|
||||
}
|
||||
},
|
||||
@@ -142,6 +143,7 @@ const handleProxyConfirm = async () => {
|
||||
visible.value = false;
|
||||
message.success(t('settings.network.messages.proxySuccess'));
|
||||
} catch (err) {
|
||||
console.error('代理设置验证失败:', err);
|
||||
message.error(t('settings.network.messages.proxyError'));
|
||||
}
|
||||
};
|
||||
@@ -149,4 +151,4 @@ const handleProxyConfirm = async () => {
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -24,13 +24,20 @@
|
||||
|
||||
<n-form-item :label="t('settings.remoteControl.allowedIps')">
|
||||
<div class="allowed-ips-container">
|
||||
<div v-for="(_, index) in remoteControlConfig.allowedIps" :key="index" class="ip-item">
|
||||
<n-input v-model:value="remoteControlConfig.allowedIps[index]" :disabled="!remoteControlConfig.enabled" />
|
||||
<n-button
|
||||
quaternary
|
||||
circle
|
||||
type="error"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
<div
|
||||
v-for="(_, index) in remoteControlConfig.allowedIps"
|
||||
:key="index"
|
||||
class="ip-item"
|
||||
>
|
||||
<n-input
|
||||
v-model:value="remoteControlConfig.allowedIps[index]"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
/>
|
||||
<n-button
|
||||
quaternary
|
||||
circle
|
||||
type="error"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="removeIp(index)"
|
||||
>
|
||||
<template #icon>
|
||||
@@ -38,10 +45,10 @@
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
<n-button
|
||||
secondary
|
||||
size="small"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
<n-button
|
||||
secondary
|
||||
size="small"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="addIp"
|
||||
>
|
||||
<template #icon>
|
||||
@@ -57,11 +64,7 @@
|
||||
|
||||
<n-form-item>
|
||||
<n-space>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="saveConfig"
|
||||
>
|
||||
<n-button type="primary" :disabled="!remoteControlConfig.enabled" @click="saveConfig">
|
||||
{{ t('common.save') }}
|
||||
</n-button>
|
||||
<n-button @click="resetConfig">
|
||||
@@ -78,15 +81,11 @@
|
||||
</template>
|
||||
<p>{{ t('settings.remoteControl.accessInfo') }}</p>
|
||||
<div class="access-url">
|
||||
<n-tag type="success">
|
||||
http://localhost:{{ remoteControlConfig.port }}/
|
||||
</n-tag>
|
||||
<n-tag type="success"> http://localhost:{{ remoteControlConfig.port }}/ </n-tag>
|
||||
</div>
|
||||
<div v-if="localIpAddresses.length" class="local-ips">
|
||||
<div v-for="ip in localIpAddresses" :key="ip" class="ip-address">
|
||||
<n-tag type="info">
|
||||
http://{{ ip }}:{{ remoteControlConfig.port }}/
|
||||
</n-tag>
|
||||
<n-tag type="info"> http://{{ ip }}:{{ remoteControlConfig.port }}/ </n-tag>
|
||||
</div>
|
||||
</div>
|
||||
</n-alert>
|
||||
@@ -99,10 +98,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
const { t } = useI18n();
|
||||
const message = useMessage();
|
||||
@@ -111,10 +110,10 @@ const message = useMessage();
|
||||
const visible = defineModel('visible', { default: false });
|
||||
|
||||
// 默认配置
|
||||
const defaultConfig:{
|
||||
enabled: boolean,
|
||||
port: number,
|
||||
allowedIps: string[]
|
||||
const defaultConfig: {
|
||||
enabled: boolean;
|
||||
port: number;
|
||||
allowedIps: string[];
|
||||
} = {
|
||||
enabled: false,
|
||||
port: 31888,
|
||||
@@ -122,7 +121,7 @@ const defaultConfig:{
|
||||
};
|
||||
|
||||
// 远程控制配置
|
||||
const remoteControlConfig = ref({...defaultConfig});
|
||||
const remoteControlConfig = ref({ ...defaultConfig });
|
||||
|
||||
// 本地IP地址列表
|
||||
const localIpAddresses = ref<string[]>([]);
|
||||
@@ -149,10 +148,15 @@ const removeIp = (index: number) => {
|
||||
// 保存配置
|
||||
const saveConfig = () => {
|
||||
// 过滤空IP
|
||||
remoteControlConfig.value.allowedIps = remoteControlConfig.value.allowedIps.filter(ip => ip.trim() !== '');
|
||||
|
||||
remoteControlConfig.value.allowedIps = remoteControlConfig.value.allowedIps.filter(
|
||||
(ip) => ip.trim() !== ''
|
||||
);
|
||||
|
||||
if (window.electron) {
|
||||
window.electron.ipcRenderer.send('update-remote-control-config', cloneDeep(remoteControlConfig.value));
|
||||
window.electron.ipcRenderer.send(
|
||||
'update-remote-control-config',
|
||||
cloneDeep(remoteControlConfig.value)
|
||||
);
|
||||
message.success(t('settings.remoteControl.saveSuccess'));
|
||||
}
|
||||
};
|
||||
@@ -211,11 +215,11 @@ onMounted(async () => {
|
||||
|
||||
.remote-info {
|
||||
margin-top: 16px;
|
||||
|
||||
|
||||
.access-url {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.local-ips {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
@@ -223,4 +227,4 @@ onMounted(async () => {
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user