Compare commits

..

2 Commits

Author SHA1 Message Date
algerkong
f9c920008c feat: changelog 2025-05-12 08:59:42 +08:00
algerkong
ef778a172b 🔧 chore: 更新版本号至 4.6.0 2025-05-12 08:55:28 +08:00
74 changed files with 1707 additions and 4317 deletions

View File

@@ -3,7 +3,7 @@ name: Deploy Web
on:
push:
branches:
- main # 或者您的主分支名称
- dev_electron # 或者您的主分支名称
workflow_dispatch: # 允许手动触发
jobs:

View File

@@ -1,55 +1,34 @@
<h2 align="center">🎵 Alger Music Player</h2>
<div align="center">
<div align="center">
<a href="https://github.com/algerkong/AlgerMusicPlayer/stargazers">
<img src="https://img.shields.io/github/stars/algerkong/AlgerMusicPlayer?style=for-the-badge&logo=github&label=Stars&logoColor=white&color=22c55e" alt="GitHub stars">
</a>
<a href="https://github.com/algerkong/AlgerMusicPlayer/releases">
<img src="https://img.shields.io/github/v/release/algerkong/AlgerMusicPlayer?style=for-the-badge&logo=github&label=Release&logoColor=white&color=1a67af" alt="GitHub release">
</a>
<a href="https://pd.qq.com/s/cs056n33q?b=5">
<img src="https://img.shields.io/badge/QQ%E9%A2%91%E9%81%93-algermusic-blue?style=for-the-badge" alt="QQ频道">
</a>
<a href="https://t.me/+9efsKRuvKBk2NWVl">
<img src="https://img.shields.io/badge/AlgerMusic-blue?style=for-the-badge&logo=telegram&logoColor=white&label=Telegram" alt="Telegram">
</a>
</div>
</div>
<div align="center">
<a href="https://hellogithub.com/repository/607b849c598d48e08fe38789d156ebdc" target="_blank"><img src="https://api.hellogithub.com/v1/widgets/recommend.svg?rid=607b849c598d48e08fe38789d156ebdc&claim_uid=ObuMXUfeHBmk9TI&theme=neutral" alt="FeaturedHelloGitHub" width="160" height="32" /></a>
</div>
# Alger Music Player
主要功能如下
- 🎵 音乐推荐
- 🔐 网易云账号登录与同步
- 📝 功能
- 播放历史记录
- 歌曲收藏管理
- 自定义快捷键配置(全局或应用内)
- 自定义快捷键配置
- 🎨 界面与交互
- 沉浸式歌词显示(点击左下角封面进入)
- 独立桌面歌词窗口
- 明暗主题切换
- 可远程控制播放
- 🎼 音乐功能
- 支持歌单、MV、专辑等完整音乐服务
- 灰色音乐资源解析(基于 @unblockneteasemusic/server
- 音乐单独解析
- EQ均衡器
- 定时播放
- 高品质音乐试听需网易云VIP
- 音乐文件下载(支持右键下载和批量下载, 附带歌词封面等信息)
- 🚀 技术特性
- 本地化服务无需依赖在线API (基于 netease-cloud-music-api)
- 自动更新检测
- 全平台适配Desktop & Web & Mobile Web & Android<测试> & ios<后续>
- 全平台适配Desktop & Web & Mobile Web & Android<后续> & ios<后续>
## 项目简介
一个第三方音乐播放器、本地服务、桌面歌词、音乐下载、最高音质
## 预览地址
[http://music.alger.fun/](http://music.alger.fun/)
[http://mc.alger.fun/](http://mc.alger.fun/)
QQ群:789288579
tg群:[AlgerMusic tg](https://t.me/+9efsKRuvKBk2NWVl)
## 软件截图
![首页白](./docs/image.png)

View File

@@ -56,7 +56,7 @@
"autoprefixer": "^10.4.20",
"axios": "^1.7.7",
"cross-env": "^7.0.3",
"electron": "^36.2.0",
"electron": "^36.1.0",
"electron-builder": "^25.1.8",
"electron-vite": "^3.1.0",
"eslint": "^9.0.0",
@@ -130,14 +130,13 @@
]
},
"win": {
"icon": "resources/icon.ico",
"icon": "resources/favicon.ico",
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32",
"arm64"
"ia32"
]
}
],
@@ -150,15 +149,13 @@
{
"target": "AppImage",
"arch": [
"x64",
"arm64"
"x64"
]
},
{
"target": "deb",
"arch": [
"x64",
"arm64"
"x64"
]
}
],
@@ -169,8 +166,8 @@
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"installerIcon": "resources/icon.ico",
"uninstallerIcon": "resources/icon.ico",
"installerIcon": "resources/favicon.ico",
"uninstallerIcon": "resources/favicon.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "AlgerMusicPlayer",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 236 KiB

View File

@@ -27,8 +27,6 @@ export default {
refresh: 'Refresh',
retry: 'Retry',
reset: 'Reset',
copySuccess: 'Copied to clipboard',
copyFailed: 'Copy failed',
validation: {
required: 'This field is required',
invalidInput: 'Invalid input',
@@ -49,8 +47,7 @@ export default {
prev: 'Previous',
next: 'Next',
pause: 'Pause',
play: 'Play',
favorite: 'Favorite'
play: 'Play'
},
language: 'Language'
};

View File

@@ -1,6 +1,6 @@
export default {
installApp: {
description: 'Install the application for a better experience',
description: 'Install the application on the desktop for a better experience',
noPrompt: 'Do not prompt again',
install: 'Install now',
cancel: 'Cancel',
@@ -60,7 +60,7 @@ export default {
wechatQR: 'Wechat QR code',
coffeeDesc: 'A cup of coffee, a support',
coffeeDescLinkText: 'View more',
qqGroup: 'QQ group: algermusic',
qqGroup: 'QQ group: 789288579',
messages: {
copySuccess: 'Copied to clipboard'
},
@@ -104,17 +104,6 @@ export default {
},
musicList: {
searchSongs: 'Search Songs',
noSearchResults: 'No search results',
switchToNormal: 'Switch to normal layout',
switchToCompact: 'Switch to compact layout',
playAll: 'Play All',
collect: 'Collect',
collectSuccess: 'Collect Success',
cancelCollectSuccess: 'Cancel Collect Success',
cancelCollect: 'Cancel Collect',
addToPlaylist: 'Add to Playlist',
addToPlaylistSuccess: 'Add to Playlist Success',
operationFailed: 'Operation Failed',
songsAlreadyInPlaylist: 'Songs already in playlist'
noSearchResults: 'No search results'
}
};

View File

@@ -3,7 +3,5 @@ export default {
'Your donation will be used to support development and maintenance work, including but not limited to server maintenance, domain name renewal, etc.',
message: 'You can leave your email or github name when leaving a message.',
refresh: 'Refresh List',
toDonateList: 'Buy me a coffee',
title: 'Donation List',
noMessage: 'No Message'
toDonateList: 'Buy me a coffee'
};

View File

@@ -11,7 +11,5 @@ export default {
downloadSuccess: 'Download completed',
downloadFailed: 'Download failed',
downloading: 'Downloading, please wait...',
selectSongsFirst: 'Please select songs to download first',
descending: 'Descending',
ascending: 'Ascending'
selectSongsFirst: 'Please select songs to download first'
};

View File

@@ -29,15 +29,6 @@ export default {
lrc: {
noLrc: 'No lyrics, please enjoy'
},
reparse: {
title: 'Select Music Source',
desc: 'Click a source to directly reparse the current song. This source will be used next time this song plays.',
success: 'Reparse successful',
failed: 'Reparse failed',
warning: 'Please select a music source',
bilibiliNotSupported: 'Bilibili videos do not support reparsing',
processing: 'Processing...'
},
playBar: {
expand: 'Expand Lyrics',
collapse: 'Collapse Lyrics',
@@ -46,7 +37,6 @@ export default {
noSongPlaying: 'No song playing',
eq: 'Equalizer',
playList: 'Play List',
reparse: 'Reparse',
playMode: {
sequence: 'Sequence',
loop: 'Loop',
@@ -105,13 +95,5 @@ export default {
playbackStopped: 'Music playback stopped',
minutesRemaining: '{minutes} min remaining',
songsRemaining: '{count} songs remaining'
},
playList: {
clearAll: 'Clear Playlist',
alreadyEmpty: 'Playlist is already empty',
cleared: 'Playlist cleared',
empty: 'Playlist is empty',
clearConfirmTitle: 'Clear Playlist',
clearConfirmContent: 'This will clear all songs in the playlist and stop the current playback. Continue?'
}
};

View File

@@ -6,8 +6,7 @@ export default {
},
button: {
clear: 'Clear',
back: 'Back',
playAll: 'Play All'
back: 'Back'
},
loading: {
more: 'Loading...',

View File

@@ -66,9 +66,7 @@ export default {
noMusicSources: 'No sources selected',
gdmusicInfo: 'GD Music Station intelligently resolves music from multiple platforms automatically',
autoPlay: 'Auto Play',
autoPlayDesc: 'Auto resume playback when reopening the app',
showStatusBar: "Show Status Bar",
showStatusBarContent: "You can display the music control function in your mac status bar (effective after a restart)"
autoPlayDesc: 'Auto resume playback when reopening the app'
},
application: {
closeAction: 'Close Action',

View File

@@ -27,8 +27,6 @@ export default {
refresh: '刷新',
retry: '重试',
reset: '重置',
copySuccess: '已复制到剪贴板',
copyFailed: '复制失败',
validation: {
required: '此项是必填的',
invalidInput: '输入无效',
@@ -49,7 +47,6 @@ export default {
prev: '上一首',
next: '下一首',
pause: '暂停',
play: '播放',
favorite: '收藏'
play: '播放'
}
};

View File

@@ -1,6 +1,6 @@
export default {
installApp: {
description: '安装应用程序,获得更好的体验',
description: '在桌面安装应用,获得更好的体验',
noPrompt: '不再提示',
install: '立即安装',
cancel: '暂不安装',
@@ -58,7 +58,7 @@ export default {
wechatQR: '微信收款码',
coffeeDesc: '一杯咖啡,一份支持',
coffeeDescLinkText: '查看更多',
qqGroup: 'QQ频道algermusic',
qqGroup: 'QQ789288579',
messages: {
copySuccess: '已复制到剪贴板'
},
@@ -102,17 +102,6 @@ export default {
},
musicList: {
searchSongs: '搜索歌曲',
noSearchResults: '没有找到相关歌曲',
switchToNormal: '切换到默认布局',
switchToCompact: '切换到紧凑布局',
playAll: '播放全部',
collect: '收藏',
collectSuccess: '收藏成功',
cancelCollectSuccess: '取消收藏成功',
operationFailed: '操作失败',
cancelCollect: '取消收藏',
addToPlaylist: '添加到播放列表',
addToPlaylistSuccess: '添加到播放列表成功',
songsAlreadyInPlaylist: '歌曲已存在于播放列表中'
noSearchResults: '没有找到相关歌曲'
}
};

View File

@@ -2,7 +2,5 @@ export default {
description: '您的捐赠将用于支持开发和维护工作,包括但不限于服务器维护、域名续费等。',
message: '留言时可留下您的邮箱或 github名称。',
refresh: '刷新列表',
toDonateList: '请我喝咖啡',
noMessage: '暂无留言',
title: '捐赠列表'
toDonateList: '请我喝咖啡'
};

View File

@@ -7,7 +7,5 @@ export default {
downloadSuccess: '下载完成',
downloadFailed: '下载失败',
downloading: '正在下载中,请稍候...',
selectSongsFirst: '请先选择要下载的歌曲',
descending: '降',
ascending: '升'
selectSongsFirst: '请先选择要下载的歌曲'
};

View File

@@ -29,15 +29,6 @@ export default {
lrc: {
noLrc: '暂无歌词, 请欣赏'
},
reparse: {
title: '选择解析音源',
desc: '点击音源直接进行解析,下次播放此歌曲时将使用所选音源',
success: '重新解析成功',
failed: '重新解析失败',
warning: '请选择一个音源',
bilibiliNotSupported: 'B站视频不支持重新解析',
processing: '解析中...'
},
playBar: {
expand: '展开歌词',
collapse: '收起歌词',
@@ -46,7 +37,6 @@ export default {
noSongPlaying: '没有正在播放的歌曲',
eq: '均衡器',
playList: '播放列表',
reparse: '重新解析',
playMode: {
sequence: '顺序播放',
loop: '循环播放',
@@ -106,13 +96,5 @@ export default {
playbackStopped: '音乐播放已停止',
minutesRemaining: '剩余{minutes}分钟',
songsRemaining: '剩余{count}首歌'
},
playList: {
clearAll: '清空播放列表',
alreadyEmpty: '播放列表已经为空',
cleared: '已清空播放列表',
empty: '播放列表为空',
clearConfirmTitle: '清空播放列表',
clearConfirmContent: '这将清空所有播放列表中的歌曲并停止当前播放。是否继续?'
}
};

View File

@@ -6,8 +6,7 @@ export default {
},
button: {
clear: '清空',
back: '返回',
playAll: '播放列表'
back: '返回'
},
loading: {
more: '加载中...',

View File

@@ -44,7 +44,7 @@ export default {
},
playback: {
quality: '音质设置',
qualityDesc: '选择音乐播放音质(网易云VIP',
qualityDesc: '选择音乐播放音质VIP',
qualityOptions: {
standard: '标准',
higher: '较高',
@@ -66,9 +66,7 @@ export default {
noMusicSources: '未选择音源',
gdmusicInfo: 'GD音乐台可自动解析多个平台音源自动选择最佳结果',
autoPlay: '自动播放',
autoPlayDesc: '重新打开应用时是否自动继续播放',
showStatusBar: '是否显示状态栏控制功能',
showStatusBarContent: '可以在您的mac状态栏显示音乐控制功能(重启后生效)',
autoPlayDesc: '重新打开应用时是否自动继续播放'
},
application: {
closeAction: '关闭行为',

View File

@@ -89,8 +89,6 @@ const createWin = () => {
alwaysOnTop: true,
resizable: true,
roundedCorners: false,
titleBarStyle: 'hidden',
titleBarOverlay: false,
// 添加跨屏幕支持选项
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
@@ -122,8 +120,6 @@ const createWin = () => {
}
});
lyricWindow.on('blur', () => lyricWindow && lyricWindow.setMaximizable(false))
return lyricWindow;
};

View File

@@ -24,7 +24,6 @@ type SetConfig = {
fontFamily: string;
fontScope: 'global' | 'lyric';
language: string;
showTopAction: boolean;
};
interface StoreType {
set: SetConfig;

View File

@@ -11,7 +11,6 @@ import { join } from 'path';
import type { Language } from '../../i18n/main';
import i18n from '../../i18n/main';
import { getStore } from './config';
// 歌曲信息接口定义
interface SongInfo {
@@ -175,18 +174,6 @@ export function updateTrayMenu(mainWindow: BrowserWindow) {
})
);
// 收藏
menu.append(
new MenuItem({
label: i18n.global.t('common.tray.favorite'),
type: 'normal',
click: () => {
console.log('[Tray] 发送收藏命令 - macOS菜单');
mainWindow.webContents.send('global-shortcut', 'toggleFavorite');
}
})
);
menu.append(
new MenuItem({
label: i18n.global.t('common.tray.next'),
@@ -266,14 +253,6 @@ export function updateTrayMenu(mainWindow: BrowserWindow) {
mainWindow.show();
}
},
{
label: i18n.global.t('common.tray.favorite'),
type: 'normal',
click: () => {
console.log('[Tray] 发送收藏命令 - Windows/Linux菜单');
mainWindow.webContents.send('global-shortcut', 'toggleFavorite');
}
},
{ type: 'separator' },
{
label: i18n.global.t('common.tray.prev'),
@@ -328,8 +307,7 @@ export function updateTrayMenu(mainWindow: BrowserWindow) {
// 初始化状态栏Tray
function initializeStatusBarTray(mainWindow: BrowserWindow) {
const store = getStore()
if (process.platform !== 'darwin' || !store.get('set.showTopAction')) return;
if (process.platform !== 'darwin') return;
const iconSize = getProperIconSize();

View File

@@ -23,6 +23,5 @@
"alwaysShowDownloadButton": false,
"unlimitedDownload": false,
"enableMusicUnblock": true,
"enabledMusicSources": ["migu", "kugou", "pyncmd", "bilibili", "kuwo"],
"showTopAction": false
"enabledMusicSources": ["migu", "kugou", "pyncmd", "bilibili", "youtube"]
}

View File

@@ -1,6 +1,6 @@
import match from '@unblockneteasemusic/server';
type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili';
type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube';
interface SongData {
name: string;
@@ -30,7 +30,7 @@ interface UnblockResult {
}
// 所有可用平台
export const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'kuwo', 'bilibili'];
export const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'kuwo', 'bilibili', 'youtube'];
/**
* 音乐解析函数
@@ -46,16 +46,12 @@ const unblockMusic = async (
retryCount = 1,
enabledPlatforms?: Platform[]
): Promise<UnblockResult> => {
// 过滤 enabledPlatforms,确保只包含 ALL_PLATFORMS 中存在的平台
const filteredPlatforms = enabledPlatforms
? enabledPlatforms.filter(platform => ALL_PLATFORMS.includes(platform))
: ALL_PLATFORMS;
const platforms = enabledPlatforms || ALL_PLATFORMS;
songData.album = songData.album || songData.al;
songData.artists = songData.artists || songData.ar;
const retry = async (attempt: number): Promise<UnblockResult> => {
try {
const data = await match(parseInt(String(id), 10), filteredPlatforms, songData);
const data = await match(parseInt(String(id), 10), platforms,songData);
const result: UnblockResult = {
data: {
data,

View File

@@ -26,7 +26,6 @@ import { isElectron, isLyricWindow } from '@/utils';
import { initAudioListeners } from './hooks/MusicHook';
import { isMobile } from './utils';
import { useAppShortcuts } from './utils/appShortcuts';
import { audioService } from './services/audioService';
const { locale } = useI18n();
const settingsStore = useSettingsStore();
@@ -120,8 +119,6 @@ onMounted(async () => {
window.api.sendSong(cloneDeep(playerStore.playMusic));
}
}
audioService.releaseOperationLock();
});
</script>

View File

@@ -152,32 +152,3 @@ export const getBilibiliAudioUrl = async (bvid: string, cid: number): Promise<st
throw error;
}
};
// 根据音乐名称搜索并直接返回音频URL
export const searchAndGetBilibiliAudioUrl = async (
keyword: string
): Promise<string> => {
try {
// 搜索B站视频取第一页第一个结果
const res = await searchBilibili({ keyword, page: 1, pagesize: 1 });
const result = res.data?.data?.result;
if (!result || result.length === 0) {
throw new Error('未找到相关B站视频');
}
const first = result[0];
const bvid = first.bvid;
// 需要获取视频详情以获得cid
const detailRes = await getBilibiliVideoDetail(bvid);
const pages = detailRes.data.pages;
if (!pages || pages.length === 0) {
throw new Error('未找到视频分P信息');
}
const cid = pages[0].cid;
// 获取音频URL
return await getBilibiliAudioUrl(bvid, cid);
} catch (error) {
console.error('根据名称搜索B站音频URL失败:', error);
throw error;
}
}

View File

@@ -28,104 +28,106 @@ export interface ParsedMusicResult {
* @param id 音乐ID
* @param data 音乐数据,包含名称和艺术家信息
* @param quality 音质设置
* @param timeout 超时时间(毫秒)默认15000ms
* @returns 解析后的音乐URL及相关信息
*/
export const parseFromGDMusic = async (
id: number,
data: any,
quality: string = '999',
timeout: number = 15000
quality: string = '320'
): Promise<ParsedMusicResult | null> => {
// 创建一个超时Promise
const timeoutPromise = new Promise<null>((_, reject) => {
setTimeout(() => {
reject(new Error('GD音乐台解析超时'));
}, timeout);
});
try {
// 使用Promise.race竞争主解析流程和超时
return await Promise.race([
(async () => {
// 处理不同数据结构
if (!data) {
console.error('GD音乐台解析歌曲数据为空');
throw new Error('歌曲数据为空');
}
const songName = data.name || '';
let artistNames = '';
// 处理不同的艺术家字段结构
if (data.artists && Array.isArray(data.artists)) {
artistNames = data.artists.map(artist => artist.name).join(' ');
} else if (data.ar && Array.isArray(data.ar)) {
artistNames = data.ar.map(artist => artist.name).join(' ');
} else if (data.artist) {
artistNames = typeof data.artist === 'string' ? data.artist : '';
}
const searchQuery = `${songName} ${artistNames}`.trim();
if (!searchQuery || searchQuery.length < 2) {
console.error('GD音乐台解析搜索查询过短', { name: songName, artists: artistNames });
throw new Error('搜索查询过短');
}
// 所有可用的音乐源 netease、kuwo、joox、tidal
const allSources = [
'kuwo', 'joox', 'tidal', 'netease'
] as MusicSourceType[];
console.log('GD音乐台开始搜索:', searchQuery);
// 依次尝试所有音源
for (const source of allSources) {
try {
const result = await searchAndGetUrl(source, searchQuery, quality);
if (result) {
console.log(`GD音乐台成功通过 ${result.source} 解析音乐!`);
// 返回符合原API格式的数据
return {
data: {
data: {
url: result.url.replace(/\\/g, ''),
br: parseInt(result.br, 10) * 1000 || 320000,
size: result.size || 0,
md5: '',
platform: 'gdmusic',
gain: 0
},
params: {
id: parseInt(String(id), 10),
type: 'song'
}
}
};
}
} catch (error) {
console.error(`GD音乐台 ${source} 音源解析失败:`, error);
// 该音源失败,继续尝试下一个音源
continue;
}
}
console.log('GD音乐台所有音源均解析失败');
return null;
})(),
timeoutPromise
]);
} catch (error: any) {
if (error.message === 'GD音乐台解析超时') {
console.error('GD音乐台解析超时(15秒):', error);
} else {
console.error('GD音乐台解析完全失败:', error);
// 处理不同数据结构
if (!data) {
console.error('GD音乐台解析歌曲数据为空');
throw new Error('歌曲数据为空');
}
const songName = data.name || '';
let artistNames = '';
// 处理不同的艺术家字段结构
if (data.artists && Array.isArray(data.artists)) {
artistNames = data.artists.map(artist => artist.name).join(' ');
} else if (data.ar && Array.isArray(data.ar)) {
artistNames = data.ar.map(artist => artist.name).join(' ');
} else if (data.artist) {
artistNames = typeof data.artist === 'string' ? data.artist : '';
}
const searchQuery = `${songName} ${artistNames}`.trim();
if (!searchQuery || searchQuery.length < 2) {
console.error('GD音乐台解析搜索查询过短', { name: songName, artists: artistNames });
throw new Error('搜索查询过短');
}
// 所有可用的音乐源
const allSources = [
'tencent', 'kugou', 'kuwo', 'migu', 'netease',
'joox', 'ytmusic', 'spotify', 'qobuz', 'deezer'
] as MusicSourceType[];
console.log('GD音乐台开始搜索:', searchQuery);
// 依次尝试所有音源
for (const source of allSources) {
try {
const result = await searchAndGetUrl(source, searchQuery, quality);
if (result) {
console.log(`GD音乐台成功通过 ${result.source} 解析音乐!`);
// 返回符合原API格式的数据
return {
data: {
data: {
url: result.url.replace(/\\/g, ''),
br: parseInt(result.br, 10) * 1000 || 320000,
size: result.size || 0,
md5: '',
platform: 'gdmusic',
gain: 0
},
params: {
id: parseInt(String(id), 10),
type: 'song'
}
}
};
}
} catch (error) {
console.error(`GD音乐台 ${source} 音源解析失败:`, error);
// 该音源失败,继续尝试下一个音源
continue;
}
}
console.log('GD音乐台所有音源均解析失败');
return null;
} catch (error) {
console.error('GD音乐台解析完全失败:', error);
return null;
}
};
/**
* 获取音质映射
* @param qualitySetting 设置中的音质选项
* @returns 映射到GD音乐台的音质参数
*/
export const getQualityMapping = (qualitySetting: string): string => {
const qualityMap: Record<string, string> = {
standard: '128',
higher: '320',
exhigh: '320',
lossless: '740',
hires: '999',
jyeffect: '999',
sky: '999',
dolby: '999',
jymaster: '999'
};
return qualityMap[qualitySetting] || '320';
};
interface GDMusicUrlResult {
url: string;
br: string;

View File

@@ -40,8 +40,3 @@ export function getListDetail(id: number | string) {
export function getAlbum(id: number | string) {
return request.get('/album', { params: { id } });
}
// 获取排行榜列表
export function getToplist() {
return request.get('/toplist');
}

View File

@@ -5,9 +5,7 @@ import { isElectron } from '@/utils';
import request from '@/utils/request';
import requestMusic from '@/utils/request_music';
import { cloneDeep } from 'lodash';
import { parseFromGDMusic } from './gdmusic';
import type { SongResult } from '@/type/music';
import { searchAndGetBilibiliAudioUrl } from './bilibili';
import { parseFromGDMusic, getQualityMapping } from './gdmusic';
const { addData, getData, deleteData } = musicDB;
@@ -82,7 +80,7 @@ export const getMusicLrc = async (id: number) => {
}
};
export const getParsingMusicUrl = async (id: number, data: SongResult) => {
export const getParsingMusicUrl = async (id: number, data: any) => {
const settingStore = useSettingsStore();
// 如果禁用了音乐解析功能,则直接返回空结果
@@ -90,49 +88,15 @@ export const getParsingMusicUrl = async (id: number, data: SongResult) => {
return Promise.resolve({ data: { code: 404, message: '音乐解析功能已禁用' } });
}
// 获取音源设置,优先使用歌曲自定义音源
const songId = String(id);
const savedSource = localStorage.getItem(`song_source_${songId}`);
let enabledSources: any[] = [];
// 如果有歌曲自定义音源,使用自定义音源
if (savedSource) {
try {
enabledSources = JSON.parse(savedSource);
console.log(`使用歌曲 ${id} 自定义音源:`, enabledSources);
if(enabledSources.includes('bilibili')){
// 构建搜索关键词,依次判断歌曲名称、歌手名称和专辑名称是否存在
const songName = data?.name || '';
const artistName = Array.isArray(data?.ar) && data.ar.length > 0 && data.ar[0]?.name ? data.ar[0].name : '';
const albumName = data?.al && typeof data.al === 'object' && data.al?.name ? data.al.name : '';
const name = [songName, artistName, albumName].filter(Boolean).join(' ').trim();
console.log('开始搜索bilibili音频', name);
return {
data: {
code: 200,
message: 'success',
data: {
url: await searchAndGetBilibiliAudioUrl(name)
}
}
}
}
} catch (e) {
console.error('e',e)
console.error('解析自定义音源失败, 使用全局设置', e);
enabledSources = settingStore.setData.enabledMusicSources || [];
}
} else {
// 没有自定义音源,使用全局音源设置
enabledSources = settingStore.setData.enabledMusicSources || [];
}
// 检查是否选择了GD音乐台解析
const enabledSources = settingStore.setData.enabledMusicSources || [];
if (enabledSources.includes('gdmusic')) {
// 获取音质设置并转换为GD音乐台格式
try {
const gdResult = await parseFromGDMusic(id, data, '999');
const quality = getQualityMapping(settingStore.setData.musicQuality || 'higher');
// 调用封装的GD音乐台解析服务
const gdResult = await parseFromGDMusic(id, data, quality);
if (gdResult) {
return gdResult;
}
@@ -175,55 +139,5 @@ export const updatePlaylistTracks = (params: {
pid: number;
tracks: string;
}) => {
return request.post('/playlist/tracks', params);
return request.get('/playlist/tracks', { params });
};
/**
* 根据类型获取列表数据
* @param type 列表类型 album/playlist
* @param id 列表ID
*/
export function getMusicListByType(type: string, id: string) {
if (type === 'album') {
return getAlbumDetail(id);
} else if (type === 'playlist') {
return getPlaylistDetail(id);
}
return Promise.reject(new Error('未知列表类型'));
}
/**
* 获取专辑详情
* @param id 专辑ID
*/
export function getAlbumDetail(id: string) {
return request({
url: '/album',
method: 'get',
params: {
id
}
});
}
/**
* 获取歌单详情
* @param id 歌单ID
*/
export function getPlaylistDetail(id: string) {
return request({
url: '/playlist/detail',
method: 'get',
params: {
id
}
});
}
export function subscribePlaylist(params: { t: number; id: number }) {
return request({
url: '/playlist/subscribe',
method: 'post',
params
});
}

View File

@@ -71,12 +71,12 @@ const { t } = useI18n();
const message = useMessage();
const copyQQ = () => {
navigator.clipboard.writeText('algermusic');
message.success(t('common.copySuccess'));
navigator.clipboard.writeText('789288579');
message.success('已复制到剪贴板');
};
const toDonateList = () => {
window.open('http://donate.alger.fun/download', '_blank');
window.open('http://donate.alger.fun', '_blank');
};
defineProps({

View File

@@ -193,6 +193,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { getMvUrl } from '@/api/mv';
import { usePlayerStore } from '@/store/modules/player';
import { IMvItem } from '@/type/mv';
const { t } = useI18n();
@@ -221,6 +222,7 @@ const emit = defineEmits<{
(e: 'prev', loading: (value: boolean) => void): void;
}>();
const playerStore = usePlayerStore();
const mvUrl = ref<string>();
const playMode = ref<PlayMode>(PLAY_MODE.Auto);
@@ -357,6 +359,9 @@ const loadMvUrl = async (mv: IMvItem) => {
const handleClose = () => {
emit('update:show', false);
if (playerStore.playMusicUrl) {
playerStore.setIsPlay(true);
}
};
const handleEnded = () => {

View File

@@ -1,41 +1,6 @@
<template>
<div class="donation-container">
<div class="qrcode-container">
<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>
</div>
<div class="qrcode-grid">
<div class="qrcode-item">
<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
/>
<span class="qrcode-label">{{ t('common.wechat') }}</span>
</div>
</div>
</div>
<div class="header-container">
<h3 class="section-title">{{ t('donation.title') }}</h3>
<div class="refresh-container">
<n-button secondary round size="small" :loading="isLoading" @click="fetchDonors">
<template #icon>
<i class="ri-refresh-line"></i>
@@ -43,13 +8,15 @@
{{ t('donation.refresh') }}
</n-button>
</div>
<div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
<div
v-for="donor in displayDonors"
v-for="(donor, index) in displayDonors"
:key="donor.id"
class="donation-card"
:class="{ 'no-message': !donor.message }"
class="donation-card animate__animated"
:class="getAnimationClass(index)"
:style="{ animationDelay: `${index * 0.1}s` }"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<div class="card-content">
<div class="donor-avatar">
@@ -57,45 +24,46 @@
:src="donor.avatar"
:fallback-src="defaultAvatar"
round
class="avatar-img"
size="large"
class="animate__animated animate__pulse animate__infinite avatar-img"
/>
<div class="donor-badge" :class="getBadgeClass(donor.badge)">
{{ donor.badge }}
</div>
</div>
<div class="donor-info">
<div class="donor-meta">
<div class="donor-name">{{ donor.name }}</div>
<!-- <div class="price-tag">{{ donor.amount }}</div> -->
<div class="donor-name">{{ donor.name }}</div>
<div class="donation-meta">
<n-tag
:type="getAmountTagType(donor.amount)"
size="small"
class="donation-amount animate__animated"
round
bordered
>
{{ donor.amount }}
</n-tag>
<span class="donation-date">{{ donor.date }}</span>
</div>
<div class="donation-date">{{ donor.date }}</div>
</div>
</div>
<!-- 有留言的情况 -->
<n-popover
v-if="donor.message"
trigger="hover"
placement="bottom"
:show-arrow="true"
:width="240"
>
<template #trigger>
<div class="donation-message">
<div v-if="donor.message" class="donation-message">
<n-popover trigger="hover" placement="bottom">
<template #trigger>
<div class="message-content">
<i class="ri-double-quotes-l quote-icon"></i>
<div class="message-text">{{ donor.message }}</div>
<i class="ri-double-quotes-r quote-icon"></i>
</div>
</template>
<div class="message-popup">
<i class="ri-double-quotes-l quote-icon"></i>
<span class="message-text">{{ donor.message }}</span>
{{ donor.message }}
<i class="ri-double-quotes-r quote-icon"></i>
</div>
</template>
<div class="message-popover">
<i class="ri-double-quotes-l quote-icon"></i>
<span>{{ donor.message }}</span>
<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>
<span>{{ t('donation.noMessage') }}</span>
</n-popover>
</div>
<div class="card-sparkles"></div>
</div>
</div>
@@ -107,6 +75,40 @@
{{ isExpanded ? t('common.collapse') : t('common.expand') }}
</n-button>
</div>
<div class="p-6 rounded-lg shadow-lg">
<div class="description text-center text-sm text-gray-700 dark:text-gray-200">
<p>{{ t('donation.description') }}</p>
<p>{{ t('donation.message') }}</p>
</div>
<div class="flex justify-between mt-6">
<div class="flex flex-col items-center gap-2">
<n-image
:src="alipay"
:alt="t('common.alipay')"
class="w-60 h-60 rounded-lg cursor-none"
preview-disabled
/>
<span class="text-sm text-gray-700 dark:text-gray-200">{{ t('common.alipay') }}</span>
</div>
<n-button type="primary" @click="toDonateList">
<template #icon>
<i class="ri-cup-line"></i>
</template>
{{ t('donation.toDonateList') }}
<i class="ri-arrow-right-s-line"></i>
</n-button>
<div class="flex flex-col items-center gap-2">
<n-image
:src="wechat"
:alt="t('common.wechat')"
class="w-60 h-60 rounded-lg cursor-none"
preview-disabled
/>
<span class="text-sm text-gray-700 dark:text-gray-200">{{ t('common.wechat') }}</span>
</div>
</div>
</div>
</div>
</template>
@@ -150,9 +152,72 @@ onActivated(() => {
fetchDonors();
});
// 只按金额排序的捐赠列表
// 动画类名列表
const animationClasses = [
'animate__fadeInUp',
'animate__fadeInLeft',
'animate__fadeInRight',
'animate__zoomIn'
];
// 获取随机动画类名
const getAnimationClass = (index: number) => {
return animationClasses[index % animationClasses.length];
};
// 根据金额获取标签类型
const getAmountTagType = (amount: number): 'success' | 'warning' | 'error' | 'info' => {
if (amount >= 5) return 'warning';
if (amount >= 2) return 'success';
return 'info';
};
// 获取徽章样式类名
const getBadgeClass = (badge: string): string => {
if (badge.includes('金牌')) return 'badge-gold';
if (badge.includes('银牌')) return 'badge-silver';
return 'badge-bronze';
};
// 鼠标悬停效果
const handleMouseEnter = (event: MouseEvent) => {
const card = event.currentTarget as HTMLElement;
card.style.transform = 'translateY(-2px)';
card.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.12)';
// 添加金额标签动画
const amountTag = card.querySelector('.donation-amount');
if (amountTag) {
amountTag.classList.add('animate__tada');
}
};
const handleMouseLeave = (event: MouseEvent) => {
const card = event.currentTarget as HTMLElement;
card.style.transform = 'translateY(0)';
card.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.08)';
// 移除金额标签动画
const amountTag = card.querySelector('.donation-amount');
if (amountTag) {
amountTag.classList.remove('animate__tada');
}
};
// 按金额和留言排序的捐赠列表
const sortedDonors = computed(() => {
return [...donors.value].sort((a, b) => b.amount - a.amount);
return [...donors.value].sort((a, b) => {
// 如果一个有留言一个没有,有留言的排在前面
if (a.message && !b.message) return -1;
if (!a.message && b.message) return 1;
// 都有留言或都没有留言时,按金额从大到小排序
const amountDiff = b.amount - a.amount;
if (amountDiff !== 0) return amountDiff;
// 金额相同时,按日期从新到旧排序
return new Date(b.date).getTime() - new Date(a.date).getTime();
});
});
const isExpanded = ref(false);
@@ -169,27 +234,19 @@ const toggleExpand = () => {
};
const toDonateList = () => {
window.open('http://donate.alger.fun/download', '_blank');
window.open('http://donate.alger.fun', '_blank');
};
</script>
<style lang="scss" scoped>
.donation-container {
@apply w-full overflow-hidden flex flex-col gap-4;
}
.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;
}
@apply w-full overflow-hidden;
}
.donation-grid {
@apply grid gap-3 transition-all duration-300 overflow-hidden;
@apply grid gap-3 px-2 py-3 transition-all duration-300 overflow-hidden;
grid-template-columns: repeat(2, 1fr);
max-height: 320px;
max-height: 280px;
@media (min-width: 768px) {
grid-template-columns: repeat(3, 1fr);
@@ -205,138 +262,127 @@ const toDonateList = () => {
}
.donation-card {
@apply rounded-lg p-2.5 transition-all duration-200 hover:shadow-md;
@apply bg-light-100 dark:bg-gray-800/5 backdrop-blur-sm;
@apply border border-gray-200 dark:border-gray-700/10;
@apply flex flex-col;
min-height: 100px;
@apply relative rounded-lg p-3 min-w-0 w-full transition-all duration-500 shadow-md backdrop-blur-md;
@apply bg-gradient-to-br from-white/[0.03] to-white/[0.08] border border-white/[0.08];
@apply hover:shadow-lg;
.card-content {
@apply flex items-start gap-2 mb-2;
@apply relative z-10 flex items-start gap-3;
}
}
.donor-avatar {
@apply relative flex-shrink-0;
.donor-avatar {
@apply relative flex-shrink-0 w-10 h-9 transition-transform duration-300;
.avatar-img {
@apply border border-gray-200 dark:border-gray-700/10 shadow-sm;
@apply w-9 h-9;
.avatar-img {
@apply border border-white/20 dark:border-gray-800/50 shadow-sm;
@apply w-10 h-9;
}
}
}
.donor-info {
@apply flex-1 min-w-0 flex flex-col justify-center;
.donor-badge {
@apply absolute -bottom-2 -right-1 px-1.5 py-0.5 text-xs font-medium text-white/90 rounded-full whitespace-nowrap;
@apply bg-gradient-to-r from-pink-400 to-pink-500 shadow-sm opacity-90 scale-90;
@apply transition-all duration-300;
}
.donor-info {
@apply flex-1 min-w-0;
.donor-meta {
@apply flex justify-between items-center mb-0.5;
.donor-name {
@apply text-sm font-medium truncate flex-1 mr-1;
@apply text-sm font-medium mb-0.5 truncate;
}
.price-tag {
@apply text-xs text-gray-400/80 dark:text-gray-500/80 whitespace-nowrap;
.donation-meta {
@apply flex items-center gap-2 mb-1;
.donation-date {
@apply text-xs text-gray-400/80 dark:text-gray-500/80;
}
}
}
.donation-date {
@apply text-xs text-gray-400/60 dark:text-gray-500/60;
}
}
.donation-message {
@apply text-sm text-gray-600 dark:text-gray-300 leading-relaxed mt-3 w-full;
.donation-message {
@apply text-xs text-gray-500 dark:text-gray-400 italic mt-1 px-2 py-1.5;
@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;
.message-content {
@apply relative p-2 rounded-lg transition-all duration-300 cursor-pointer;
@apply bg-white/[0.02] hover:bg-[var(--n-color)];
.message-text {
@apply px-6 italic line-clamp-2;
}
.quote-icon {
@apply absolute text-gray-400/60 dark:text-gray-500/60 text-sm;
&:first-child {
@apply left-0.5 top-2;
}
&:last-child {
@apply right-0.5 bottom-2;
}
}
}
&:last-child {
@apply ml-1 self-end;
}
}
.message-text {
@apply flex-1 line-clamp-2;
}
&:hover {
@apply bg-gray-100/40 dark:bg-dark-200;
.donor-avatar {
@apply scale-105 rotate-3;
}
.donor-badge {
@apply scale-95 -translate-y-0.5;
}
.card-sparkles {
@apply opacity-60 scale-110;
}
}
}
.donation-message-placeholder {
@apply text-xs text-gray-400 dark:text-gray-500 mt-1 px-2 py-1.5;
@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;
.card-sparkles {
@apply absolute inset-0 pointer-events-none opacity-0 transition-all duration-500;
background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.95), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.95), transparent),
radial-gradient(2.5px 2.5px at 50px 160px, rgba(255, 255, 255, 0.95), transparent),
radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.95), transparent),
radial-gradient(2.5px 2.5px at 130px 80px, rgba(255, 255, 255, 0.95), transparent);
background-size: 200% 200%;
animation: sparkle 8s ease infinite;
}
@keyframes sparkle {
0%,
100% {
@apply bg-[0%_0%] opacity-40 scale-100;
}
50% {
@apply bg-[100%_100%] opacity-80 scale-110;
}
}
.message-popover {
@apply text-sm text-gray-700 dark:text-gray-200 italic p-2;
@apply flex items-start;
.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;
}
}
.refresh-container {
@apply flex justify-end px-2 py-2;
}
.expand-button {
@apply flex justify-center items-center py-2;
:deep(.n-button) {
@apply transition-all duration-200 hover:-translate-y-0.5;
@apply transition-all duration-300 hover:-translate-y-0.5;
}
}
.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;
}
.message-popup {
@apply relative px-4 py-2 text-sm;
max-width: 300px;
line-height: 1.6;
font-style: italic;
.quote-icon {
@apply text-gray-400/60 dark:text-gray-500/60;
font-size: 0.9rem;
}
}
</style>

View File

@@ -45,7 +45,8 @@
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { isElectron } from '@/utils';
import { isElectron, isMobile } from '@/utils';
import { getLatestReleaseInfo, getProxyNodes } from '@/utils/update';
import config from '../../../../package.json';
@@ -53,6 +54,7 @@ const { t } = useI18n();
const showModal = ref(false);
const noPrompt = ref(false);
const releaseInfo = ref<any>(null);
const closeModal = () => {
showModal.value = false;
@@ -61,9 +63,11 @@ const closeModal = () => {
}
};
const proxyHosts = ref<string[]>([]);
onMounted(async () => {
// 如果是 electron 环境,不显示安装提示
if (isElectron) {
if (isElectron || isMobile.value) {
return;
}
@@ -72,11 +76,58 @@ onMounted(async () => {
if (isDismissed) {
return;
}
// 获取最新版本信息
releaseInfo.value = await getLatestReleaseInfo();
showModal.value = true;
proxyHosts.value = await getProxyNodes();
});
const handleInstall = async (): Promise<void> => {
window.open('http://donate.alger.fun/download', '_blank');
const assets = releaseInfo.value?.assets || [];
const { userAgent } = navigator;
const isMac = userAgent.toLowerCase().includes('mac');
const isWindows = userAgent.toLowerCase().includes('win');
const isLinux = userAgent.toLowerCase().includes('linux');
const isX64 =
userAgent.includes('x86_64') || userAgent.includes('Win64') || userAgent.includes('WOW64');
let downloadUrl = '';
// 根据平台和架构选择对应的安装包
if (isMac) {
// macOS
const macAsset = assets.find((asset) => asset.name.includes('mac'));
downloadUrl = macAsset?.browser_download_url || '';
} else if (isWindows) {
// Windows
let winAsset = assets.find(
(asset) =>
asset.name.includes('win') &&
(isX64 ? asset.name.includes('x64') : asset.name.includes('ia32'))
);
if (!winAsset) {
winAsset = assets.find((asset) => asset.name.includes('win.exe'));
}
downloadUrl = winAsset?.browser_download_url || '';
} else if (isLinux) {
// Linux
const linuxAsset = assets.find(
(asset) =>
(asset.name.endsWith('.AppImage') || asset.name.endsWith('.deb')) &&
asset.name.includes('x64')
);
downloadUrl = linuxAsset?.browser_download_url || '';
}
if (downloadUrl) {
const proxyDownloadUrl = `${proxyHosts.value[0]}/${downloadUrl}`;
window.open(proxyDownloadUrl, '_blank');
} else {
// 如果没有找到对应的安装包,跳转到 release 页面
window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
}
closeModal();
};
</script>

View File

@@ -1,38 +0,0 @@
import { Router } from 'vue-router';
import { useMusicStore } from '@/store/modules/music';
/**
* 导航到音乐列表页面的通用方法
* @param router Vue路由实例
* @param options 导航选项
*/
export function navigateToMusicList(
router: Router,
options: {
id?: string | number;
type?: 'album' | 'playlist' | 'dailyRecommend' | string;
name: string;
songList: any[];
listInfo?: any;
canRemove?: boolean;
}
) {
const musicStore = useMusicStore();
const { id, type, name, songList, listInfo, canRemove = false } = options;
// 保存数据到状态管理
musicStore.setCurrentMusicList(songList, name, listInfo, canRemove);
// 路由跳转
if (id) {
router.push({
name: 'musicList',
params: { id },
query: { type }
});
} else {
router.push({
name: 'musicList'
});
}
}

View File

@@ -1,12 +1,11 @@
<template>
<div v-if="isPlay && !isMobile" class="bottom" :style="{ height }"></div>
<div v-if="isPlay" class="bottom" :style="{ height }"></div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { usePlayerStore } from '@/store/modules/player';
import { isMobile } from '@/utils';
const playerStore = usePlayerStore();
const isPlay = computed(() => playerStore.playMusicUrl);

View File

@@ -254,7 +254,7 @@ watch(
}
.playlist-drawer {
@apply flex flex-col gap-6 py-6;
@apply flex flex-col gap-6;
}
.create-playlist-section {
@@ -335,7 +335,7 @@ watch(
}
.playlist-list {
@apply flex flex-col gap-2 pb-40;
@apply flex flex-col gap-2;
}
.playlist-item {
@@ -367,9 +367,4 @@ watch(
}
}
}
:deep(.n-drawer-body-content-wrapper) {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
</style>

View File

@@ -21,6 +21,15 @@
<span>{{ item.size }}</span>
</div>
<music-list
v-if="['专辑', 'playlist'].includes(item.type)"
v-model:show="showPop"
:name="item.name"
:song-list="songList"
:list-info="listInfo"
:cover="false"
:z-index="zIndex"
/>
<mv-player
v-if="item.type === 'mv'"
v-model:show="showPop"
@@ -33,11 +42,12 @@
<script setup lang="ts">
import { getAlbum, getListDetail } from '@/api/list';
import MvPlayer from '@/components/MvPlayer.vue';
import { audioService } from '@/services/audioService';
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';
import MusicList from '../MusicList.vue';
const props = withDefaults(
defineProps<{
@@ -62,8 +72,6 @@ const showPop = ref(false);
const listInfo = ref<any>(null);
const playerStore = usePlayerStore();
const router = useRouter();
const musicStore = useMusicStore();
const getCurrentMv = () => {
return {
@@ -75,6 +83,7 @@ const getCurrentMv = () => {
const handleClick = async () => {
listInfo.value = null;
if (props.item.type === '专辑') {
showPop.value = true;
const res = await getAlbum(props.item.id);
songList.value = res.data.songs.map((song: any) => {
song.al.picUrl = song.al.picUrl || props.item.picUrl;
@@ -88,47 +97,24 @@ const handleClick = async () => {
},
description: res.data.album.description
};
// 保存数据到store
musicStore.setCurrentMusicList(
songList.value,
props.item.name,
listInfo.value,
false
);
// 使用路由跳转
router.push({
name: 'musicList',
params: { id: props.item.id },
query: { type: 'album' }
});
} else if (props.item.type === 'playlist') {
}
if (props.item.type === 'playlist') {
showPop.value = true;
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
);
// 使用路由跳转
router.push({
name: 'musicList',
params: { id: props.item.id },
query: { type: 'playlist' }
});
} else if (props.item.type === 'mv') {
}
if (props.item.type === 'mv') {
handleShowMv();
}
};
const handleShowMv = async () => {
playerStore.handlePause();
playerStore.setIsPlay(false);
playerStore.setPlayMusic(false);
audioService.getCurrentSound()?.pause();
showPop.value = true;
};
</script>

View File

@@ -1,19 +1,14 @@
<template>
<div
class="song-item"
:class="{ 'song-mini': mini, 'song-list': list, 'song-compact': compact }"
:class="{ 'song-mini': mini, 'song-list': list }"
@contextmenu.prevent="handleContextMenu"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<div v-if="compact && index !== undefined" class="song-item-index" :class="{ 'text-green-500': isPlaying }">
{{ index + 1 }}
</div>
<div v-if="selectable" class="song-item-select" @click.stop="toggleSelect">
<n-checkbox :checked="selected" />
</div>
<n-image
v-if="item.picUrl && !compact"
v-if="item.picUrl"
ref="songImg"
:src="getImgUrl(item.picUrl, '100y100')"
class="song-item-img"
@@ -23,9 +18,9 @@
}"
@load="imageLoad"
/>
<div class="song-item-content" :class="{ 'song-item-content-compact': compact }">
<div class="song-item-content">
<div v-if="list" 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">{{
item.name
}}</n-ellipsis>
<div class="song-item-content-divider">-</div>
@@ -40,36 +35,9 @@
</template>
</n-ellipsis>
</div>
<template v-else-if="compact">
<div class="song-item-content-compact-wrapper">
<div class="w-60 flex-shrink-0 flex items-center" @dblclick="playMusicEvent(item)">
<n-ellipsis class="song-item-content-title text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">
{{ item.name }}
</n-ellipsis>
</div>
<div class="w-40 flex-shrink-0 song-item-content-compact-artist flex items-center">
<n-ellipsis line-clamp="1">
<template v-for="(artist, index) in artists" :key="index">
<span
class="cursor-pointer hover:text-green-500"
@click.stop="handleArtistClick(artist.id)"
>{{ artist.name }}</span
>
<span v-if="index < artists.length - 1"> / </span>
</template>
</n-ellipsis>
</div>
</div>
<div class="song-item-content-album flex items-center">
<n-ellipsis line-clamp="1">{{ item.al?.name || '-' }}</n-ellipsis>
</div>
<div class="song-item-content-duration flex items-center">
{{ formatDuration(getDuration(item)) }}
</div>
</template>
<template v-else>
<div class="song-item-content-title" @dblclick="playMusicEvent(item)">
<n-ellipsis class="text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">{{ item.name }}</n-ellipsis>
<div class="song-item-content-title">
<n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.name }}</n-ellipsis>
</div>
<div class="song-item-content-name">
<n-ellipsis class="text-ellipsis" line-clamp="1">
@@ -85,36 +53,22 @@
</div>
</template>
</div>
<div class="song-item-operating" :class="{
'song-item-operating-list': list,
'song-item-operating-compact': compact
}">
<div v-if="favorite" class="song-item-operating-like" :class="{ 'opacity-0': compact && !isHovering && !isFavorite }">
<div class="song-item-operating" :class="{ 'song-item-operating-list': list }">
<div v-if="favorite" class="song-item-operating-like">
<i
class="iconfont icon-likefill"
:class="{ 'like-active': isFavorite }"
@click.stop="toggleFavorite"
></i>
</div>
<n-tooltip v-if="isNext" trigger="hover" :z-index="9999999" :delay="400">
<template #trigger>
<div class="song-item-operating-next" @click.stop="handlePlayNext">
<i class="iconfont ri-skip-forward-fill"></i>
</div>
</template>
{{ t('songItem.menu.playNext') }}
</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, 'opacity-0': compact && !isHovering && !isPlaying }"
:class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
@click="playMusicEvent(item)"
>
<i v-if="isPlaying && play" class="iconfont icon-stop"></i>
<i v-else class="iconfont icon-playfill"></i>
</div>
<div v-if="compact" class="song-item-operating-menu" @click.stop="handleMenuClick" :class="{ 'opacity-0': compact && !isHovering && !isPlaying }">
<i class="iconfont ri-more-fill"></i>
</div>
</div>
<n-dropdown
v-if="isElectron"
@@ -122,7 +76,7 @@
:x="dropdownX"
:y="dropdownY"
:options="dropdownOptions"
:z-index="99999999"
:z-index="99999"
placement="bottom-start"
@clickoutside="showDropdown = false"
@select="handleSelect"
@@ -133,12 +87,13 @@
<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import type { MenuOption } from 'naive-ui';
import { NEllipsis, NImage, useMessage } from 'naive-ui';
import { NImage, NText, useMessage } from 'naive-ui';
import { computed, h, inject, ref, useTemplateRef } from 'vue';
import { useI18n } from 'vue-i18n';
import { getSongUrl } from '@/store/modules/player';
import { getSongUrl } from '@/hooks/MusicListHook';
import { useArtist } from '@/hooks/useArtist';
import { audioService } from '@/services/audioService';
import { usePlayerStore } from '@/store';
import type { SongResult } from '@/type/music';
import { getImgUrl, isElectron } from '@/utils';
@@ -151,24 +106,18 @@ const props = withDefaults(
item: SongResult;
mini?: boolean;
list?: boolean;
compact?: boolean;
favorite?: boolean;
selectable?: boolean;
selected?: boolean;
canRemove?: boolean;
isNext?: boolean;
index?: number;
}>(),
{
mini: false,
list: false,
compact: false,
favorite: true,
selectable: false,
selected: false,
canRemove: false,
isNext: false,
index: undefined
canRemove: false
}
);
@@ -188,7 +137,6 @@ const isPlaying = computed(() => {
const showDropdown = ref(false);
const dropdownX = ref(0);
const dropdownY = ref(0);
const isHovering = ref(false);
const isDownloading = ref(false);
@@ -214,49 +162,26 @@ const renderSongPreview = () => {
h(
'div',
{
class: 'flex-1 min-w-0 py-1 overflow-hidden'
class: 'flex-1 min-w-0 py-1'
},
[
h(
'div',
{
class: 'mb-1 overflow-hidden'
class: 'mb-1'
},
[
h(
NEllipsis,
NText,
{
lineClamp: 1,
depth: 1,
class: 'text-sm font-medium w-full',
style: 'max-width: 150px; min-width: 120px;'
class: 'text-sm font-medium'
},
{
default: () => props.item.name
}
)
]
),
h(
'div',
{
class: 'text-xs text-gray-500 dark:text-gray-400 overflow-hidden'
},
[
h(
NEllipsis,
{
lineClamp: 1,
style: 'max-width: 150px;'
},
{
default: () => {
const artistNames = (props.item.ar || props.item.song?.artists)?.map((a) => a.name).join(' / ');
return artistNames || '未知艺术家';
}
}
)
]
)
]
)
@@ -333,13 +258,6 @@ const handleContextMenu = (e: MouseEvent) => {
dropdownY.value = e.clientY;
};
const handleMenuClick = (e: MouseEvent) => {
e.preventDefault();
showDropdown.value = true;
dropdownX.value = e.clientX;
dropdownY.value = e.clientY;
};
const handleSelect = (key: string | number) => {
showDropdown.value = false;
if (key === 'download') {
@@ -443,6 +361,18 @@ const imageLoad = async () => {
// 播放音乐 设置音乐详情 打开音乐底栏
const playMusicEvent = async (item: SongResult) => {
// 如果是当前正在播放的音乐,则切换播放/暂停状态
if (playMusic.value.id === item.id) {
if (play.value) {
playerStore.setPlayMusic(false);
audioService.getCurrentSound()?.pause();
} else {
playerStore.setPlayMusic(true);
audioService.getCurrentSound()?.play();
}
return;
}
try {
// 使用store的setPlay方法该方法已经包含了B站视频URL处理逻辑
const result = await playerStore.setPlay(item);
@@ -495,33 +425,6 @@ const handlePlayNext = () => {
playerStore.addToNextPlay(props.item);
message.success(t('songItem.message.addedToNextPlay'));
};
// 获取歌曲时长
const getDuration = (item: SongResult): number => {
// 检查各种可能的时长属性路径
if (item.duration) return item.duration;
if (typeof item.dt === 'number') return item.dt;
// 遍历可能存在的其他时长属性路径
return 0;
};
// 格式化时长
const formatDuration = (ms: number): string => {
if (!ms) return '--:--';
const totalSeconds = Math.floor(ms / 1000);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
};
// 鼠标悬停事件
const handleMouseEnter = () => {
isHovering.value = true;
};
const handleMouseLeave = () => {
isHovering.value = false;
};
</script>
<style lang="scss" scoped>
@@ -538,24 +441,13 @@ const handleMouseLeave = () => {
@apply rounded-3xl p-3 flex items-center transition bg-transparent dark:text-white text-gray-900;
&:hover {
@apply bg-light-100 dark:bg-dark-100;
.song-item-operating-compact {
.song-item-operating-like,
.song-item-operating-play {
@apply opacity-100;
}
}
@apply bg-gray-100 dark:bg-gray-800;
}
&-img {
@apply w-12 h-12 rounded-2xl mr-4;
}
&-index {
@apply w-8 text-center text-gray-500 dark:text-gray-400 text-sm;
}
&-content {
@apply flex-1;
@@ -566,26 +458,6 @@ const handleMouseLeave = () => {
&-name {
@apply text-xs text-gray-500 dark:text-gray-400;
}
&-compact {
@apply flex items-center gap-4;
&-wrapper {
@apply flex-1 min-w-0;
}
&-artist {
@apply text-sm text-gray-500 dark:text-gray-400 ml-2;
}
}
&-album {
@apply w-32 text-sm text-gray-500 dark:text-gray-400;
}
&-duration {
@apply w-16 text-sm text-gray-500 dark:text-gray-400 text-right;
}
}
&-operating {
@@ -603,14 +475,6 @@ const handleMouseLeave = () => {
@apply mr-2 cursor-pointer ml-4 transition-all;
}
&-next {
@apply mr-2 cursor-pointer transition-all;
.iconfont {
@apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
}
}
.like-active {
@apply text-red-500 dark:text-red-500;
}
@@ -632,14 +496,6 @@ const handleMouseLeave = () => {
@apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
}
}
&-menu {
@apply cursor-pointer flex items-center justify-center px-2;
.iconfont {
@apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
}
}
}
&-select {
@@ -647,61 +503,6 @@ const handleMouseLeave = () => {
}
}
.song-compact {
@apply rounded-lg p-2 h-12 mb-1 border-b dark:border-gray-800 border-gray-100;
&:hover {
@apply bg-gray-50 dark:bg-gray-700;
.opacity-0 {
opacity: 1;
}
}
.song-item-content {
&-title {
@apply text-sm cursor-pointer;
}
}
.song-item-content-compact-wrapper {
@apply flex items-center;
}
.song-item-content-compact-artist {
@apply w-40;
}
.song-item-operating-compact {
@apply border-none bg-transparent gap-2 flex items-center;
.song-item-operating-like,
.song-item-operating-play {
@apply transition-opacity duration-200;
}
.song-item-operating-play {
@apply w-7 h-7;
.iconfont {
@apply text-base;
}
}
.song-item-operating-like {
@apply mr-1 ml-0;
.iconfont {
@apply text-base;
}
}
.opacity-0 {
opacity: 0;
}
}
}
.song-mini {
@apply p-2 rounded-2xl;

View File

@@ -22,19 +22,26 @@
</div>
</template>
</div>
<music-list
v-model:show="showMusic"
:name="albumName"
:song-list="songList"
:cover="true"
:loading="loadingList"
:list-info="albumInfo"
/>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
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 MusicList from '@/components/MusicList.vue';
import type { IAlbumNew } from '@/type/album';
import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
const { t } = useI18n();
const albumData = ref<IAlbumNew>();
@@ -43,42 +50,33 @@ const loadAlbumList = async () => {
albumData.value = data;
};
const router = useRouter();
const showMusic = ref(false);
const songList = ref([]);
const albumName = ref('');
const loadingList = ref(false);
const albumInfo = ref<any>({});
const handleClick = async (item: any) => {
openAlbum(item);
};
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',
name: album.name,
songList: formattedSongs,
listInfo: {
...albumInfo,
creator: {
avatarUrl: albumInfo.artist.img1v1Url,
nickname: `${albumInfo.artist.name} - ${albumInfo.company}`
},
description: albumInfo.description
}
});
} catch (error) {
console.error('获取专辑详情失败:', error);
}
songList.value = [];
albumInfo.value = {};
albumName.value = item.name;
loadingList.value = true;
showMusic.value = true;
const res = await getAlbum(item.id);
const { songs, album } = res.data;
songList.value = songs.map((song: any) => {
song.al.picUrl = song.al.picUrl || album.picUrl;
song.picUrl = song.al.picUrl || album.picUrl || song.picUrl;
return song;
});
albumInfo.value = {
...album,
creator: {
avatarUrl: album.artist.img1v1Url,
nickname: `${album.artist.name} - ${album.company}`
},
description: album.description
};
loadingList.value = false;
};
onMounted(() => {

View File

@@ -23,7 +23,7 @@
></div>
<div
class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
@click="showDayRecommend"
@click="showMusic = true"
>
<div class="font-bold text-lg">
{{ t('comp.recommendSinger.title') }}
@@ -57,7 +57,7 @@
v-for="item in userPlaylist"
:key="item.id"
class="user-play-item"
@click="openPlaylist(item)"
@click="toPlaylist(item.id)"
>
<div class="user-play-item-img">
<img :src="getImgUrl(item.coverImgUrl, '200y200')" alt="" />
@@ -124,18 +124,35 @@
</n-carousel-item>
</n-carousel>
</div>
<music-list
v-if="dayRecommendData?.dailySongs.length"
v-model:show="showMusic"
:name="t('comp.recommendSinger.songlist')"
:song-list="dayRecommendData?.dailySongs"
:cover="false"
/>
<!-- 添加用户歌单弹窗 -->
<music-list
v-model:show="showPlaylist"
v-model:loading="playlistLoading"
:name="playlistItem?.name || ''"
:song-list="playlistDetail?.playlist?.tracks || []"
:list-info="playlistDetail?.playlist"
/>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watchEffect } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { getDayRecommend, getHotSinger } from '@/api/home';
import { getListDetail } from '@/api/list';
import { getMusicDetail } from '@/api/music';
import { getUserPlaylist } from '@/api/user';
import MusicList from '@/components/MusicList.vue';
import { useArtist } from '@/hooks/useArtist';
import { usePlayerStore, useUserStore } from '@/store';
import { IDayRecommend } from '@/type/day_recommend';
@@ -151,20 +168,20 @@ import {
setBackgroundImg
} from '@/utils';
import { getArtistDetail } from '@/api/artist';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
const userStore = useUserStore();
const playerStore = usePlayerStore();
const router = useRouter();
const { t } = useI18n();
// 歌手信息
const hotSingerData = ref<IHotSinger>();
const dayRecommendData = ref<IDayRecommend>();
const showMusic = ref(false);
const userPlaylist = ref<Playlist[]>([]);
// 为歌单弹窗添加的状态
const showPlaylist = ref(false);
const playlistLoading = ref(false);
const playlistItem = ref<Playlist | null>(null);
const playlistDetail = ref<IListDetail | null>(null);
@@ -289,34 +306,27 @@ const handleArtistClick = (id: number) => {
navigateToArtist(id);
};
const showDayRecommend = () => {
if (!dayRecommendData.value?.dailySongs) return;
navigateToMusicList(router, {
type: 'dailyRecommend',
name: t('comp.recommendSinger.songlist'),
songList: dayRecommendData.value.dailySongs,
canRemove: false
});
};
const openPlaylist = (item: any) => {
playlistItem.value = item;
const toPlaylist = async (id: number) => {
playlistLoading.value = true;
getListDetail(item.id).then(res => {
playlistDetail.value = res.data;
playlistItem.value = null;
playlistDetail.value = null;
showPlaylist.value = true;
// 设置当前点击的歌单信息
const selectedPlaylist = userPlaylist.value.find((item) => item.id === id);
if (selectedPlaylist) {
playlistItem.value = selectedPlaylist;
}
try {
// 获取歌单详情
const { data } = await getListDetail(id);
playlistDetail.value = data;
} catch (error) {
console.error('获取歌单详情失败:', error);
} finally {
playlistLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
name: item.name,
songList: res.data.playlist.tracks || [],
listInfo: res.data.playlist,
canRemove: false
});
});
}
};
// 添加直接播放歌单的方法

View File

@@ -31,34 +31,34 @@
<!-- 控制按钮区域 -->
<div class="control-buttons">
<div class="control-button previous" @click="handlePrev">
<button class="control-button previous" @click="handlePrev">
<i class="iconfont icon-prev"></i>
</div>
<div class="control-button play" @click="playMusicEvent">
</button>
<button class="control-button play" @click="playMusicEvent">
<i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
</div>
<div class="control-button next" @click="handleNext">
</button>
<button class="control-button next" @click="handleNext">
<i class="iconfont icon-next"></i>
</div>
</button>
</div>
<!-- 右侧功能按钮 -->
<div class="function-buttons">
<div class="function-button">
<button class="function-button">
<i
class="iconfont icon-likefill"
:class="{ 'like-active': isFavorite }"
@click="toggleFavorite"
></i>
</div>
</button>
<n-popover v-if="component" trigger="hover" :z-index="99999999" placement="top" :show-arrow="false">
<n-popover trigger="click" :z-index="99999999" placement="top" :show-arrow="false">
<template #trigger>
<div class="function-button" @click="mute">
<button class="function-button" @click="mute">
<i class="iconfont" :class="getVolumeIcon"></i>
</div>
</button>
</template>
<div class="volume-slider-wrapper transparent-popover">
<div class="volume-slider-wrapper">
<n-slider
v-model:value="volumeSlider"
:step="0.01"
@@ -69,15 +69,15 @@
</n-popover>
<!-- 播放列表按钮 -->
<div v-if="!component" class="function-button" @click="togglePlaylist">
<button v-if="!component" class="function-button" @click="togglePlaylist">
<i class="iconfont icon-list"></i>
</div>
</button>
</div>
<!-- 关闭按钮 -->
<div v-if="!component" class="close-button" @click="handleClose">
<button v-if="!component" class="close-button" @click="handleClose">
<i class="iconfont ri-close-line"></i>
</div>
</button>
</div>
<!-- 进度条 -->
@@ -312,7 +312,25 @@ const handleNext = () => playerStore.nextPlay();
const playMusicEvent = async () => {
try {
playerStore.setPlay(playerStore.playMusic);
if (!playerStore.playMusic?.id || !playerStore.playMusicUrl) {
console.warn('No valid music or URL available');
playerStore.setPlay(playerStore.playMusic);
return;
}
if (play.value) {
if (audioService.getCurrentSound()) {
audioService.pause();
playerStore.setPlayMusic(false);
}
} else {
if (audioService.getCurrentSound()) {
audioService.play();
} else {
await audioService.play(playerStore.playMusicUrl, playerStore.playMusic);
}
playerStore.setPlayMusic(true);
}
} catch (error) {
console.error('播放出错:', error);
playerStore.nextPlay();
@@ -441,7 +459,7 @@ const setMusicFull = () => {
}
.control-button {
@apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
@apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600;
width: 32px;
height: 32px;
@@ -466,9 +484,10 @@ const setMusicFull = () => {
}
.function-button {
@apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200;
@apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer;
width: 32px;
height: 32px;
color: var(--text-color-2, #666);
&:hover {
@apply bg-gray-100 dark:bg-dark-300;
@@ -527,7 +546,8 @@ 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;
@apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg;
width: 40px;
height: 160px;
}
@@ -588,8 +608,4 @@ const setMusicFull = () => {
}
}
}
:deep(.n-popover){
background-color: transparent !important;
}
</style>

View File

@@ -89,7 +89,7 @@
</div>
<!-- 定时关闭按钮 -->
<!-- <SleepTimerPopover mode="mobile" /> -->
<SleepTimerPopover mode="mobile" />
</template>
<!-- Mini模式 - 在musicFullVisible为false时显示 -->
@@ -155,8 +155,10 @@ import { useThrottleFn } from '@vueuse/core';
import { computed, ref, watch } from 'vue';
import SongItem from '@/components/common/SongItem.vue';
import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
import MusicFull from '@/layout/components/MusicFull.vue';
import { audioService } from '@/services/audioService';
import { usePlayerStore } from '@/store/modules/player';
import { useSettingsStore } from '@/store/modules/settings';
import type { SongResult } from '@/type/music';
@@ -233,7 +235,25 @@ const toggleFavorite = () => {
// 播放暂停按钮事件
const playMusicEvent = async () => {
try {
playerStore.setPlay(playMusic.value);
if (!playMusic.value?.id || !playerStore.playMusicUrl) {
console.warn('No valid music or URL available');
playerStore.setPlay(playMusic.value);
return;
}
if (play.value) {
if (audioService.getCurrentSound()) {
audioService.pause();
playerStore.setPlayMusic(false);
}
} else {
if (audioService.getCurrentSound()) {
audioService.play();
} else {
await audioService.play(playerStore.playMusicUrl, playMusic.value);
}
playerStore.setPlayMusic(true);
}
} catch (error) {
console.error('播放出错:', error);
playerStore.nextPlay();

View File

@@ -39,9 +39,6 @@
lazy
preview-disabled
/>
<div v-if="playMusic?.playLoading" class="loading-overlay">
<i class="ri-loader-4-line loading-icon"></i>
</div>
<div class="hover-arrow">
<div class="hover-content">
<!-- <i class="ri-arrow-up-s-line text-3xl" :class="{ 'ri-arrow-down-s-line': musicFullVisible }"></i> -->
@@ -127,12 +124,6 @@
</template>
{{ playMusic.id ? t('player.playBar.lyric') : t('player.playBar.noSongPlaying') }}
</n-tooltip>
<n-tooltip v-if="playMusic.id && isElectron" trigger="hover" :z-index="9999999">
<template #trigger>
<reparse-popover v-if="playMusic.id" />
</template>
{{ t('player.playBar.reparse') }}
</n-tooltip>
<n-popover
v-if="isElectron"
trigger="click"
@@ -155,12 +146,42 @@
</n-popover>
<!-- 定时关闭功能 -->
<sleep-timer-popover mode="desktop" />
<n-tooltip trigger="hover" :z-index="9999999">
<n-popover
trigger="click"
:z-index="99999999"
content-class="music-play"
raw
:show-arrow="false"
:delay="200"
arrow-wrapper-style=" border-radius:1.5rem"
@update-show="scrollToPlayList"
>
<template #trigger>
<i class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer" @click="openPlayListDrawer"></i>
<n-tooltip trigger="manual" :z-index="9999999">
<template #trigger>
<i class="iconfont icon-list"></i>
</template>
{{ t('player.playBar.playList') }}
</n-tooltip>
</template>
{{ t('player.playBar.playList') }}
</n-tooltip>
<div class="music-play-list">
<div class="music-play-list-back"></div>
<n-virtual-list ref="palyListRef" :item-size="62" item-resizable :items="playList">
<template #default="{ item }">
<div class="music-play-list-content">
<div class="flex items-center justify-between">
<song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
<div class="delete-btn" @click.stop="handleDeleteSong(item)">
<i
class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
></i>
</div>
</div>
</div>
</template>
</n-virtual-list>
</div>
</n-popover>
</div>
<!-- 播放音乐 -->
<music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
@@ -170,12 +191,12 @@
<script lang="ts" setup>
import { useThrottleFn } from '@vueuse/core';
import { useMessage } from 'naive-ui';
import { computed, ref, watch } from 'vue';
import { computed, ref, useTemplateRef, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import SongItem from '@/components/common/SongItem.vue';
import EqControl from '@/components/EQControl.vue';
import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
import ReparsePopover from '@/components/player/ReparsePopover.vue';
import {
allTime,
artistList,
@@ -193,6 +214,7 @@ import {
usePlayerStore
} from '@/store/modules/player';
import { useSettingsStore } from '@/store/modules/settings';
import type { SongResult } from '@/type/music';
import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
const playerStore = usePlayerStore();
@@ -201,6 +223,8 @@ const { t } = useI18n();
const message = useMessage();
// 是否播放
const play = computed(() => playerStore.isPlay);
// 播放列表
const playList = computed(() => playerStore.playList as SongResult[]);
// 背景颜色
const background = ref('#000');
@@ -338,12 +362,42 @@ const showSliderTooltip = ref(false);
// 播放暂停按钮事件
const playMusicEvent = async () => {
try {
const result = await playerStore.setPlay({ ...playMusic.value});
if (result) {
// 检查是否有有效的音乐对象
if (!playMusic.value?.id) {
console.warn('没有有效的播放对象');
return;
}
// 当前处于播放状态 -> 暂停
if (play.value) {
if (audioService.getCurrentSound()) {
audioService.pause();
playerStore.setPlayMusic(false);
}
return;
}
// 当前处于暂停状态 -> 播放
// 有音频实例,直接播放
if (audioService.getCurrentSound()) {
audioService.play();
playerStore.setPlayMusic(true);
return;
}
// 没有音频实例重新获取并播放包括重新获取B站视频URL
try {
// 复用当前播放对象但强制重新获取URL
const result = await playerStore.setPlay({ ...playMusic.value, playMusicUrl: undefined });
if (result) {
playerStore.setPlayMusic(true);
}
} catch (error) {
console.error('重新获取播放链接失败:', error);
message.error(t('player.playFailed'));
}
} catch (error) {
console.error('重新获取播放链接失败:', error);
console.error('播放出错:', error);
message.error(t('player.playFailed'));
}
};
@@ -359,6 +413,15 @@ const setMusicFull = () => {
}
};
const palyListRef = useTemplateRef('palyListRef') as any;
const scrollToPlayList = (val: boolean) => {
if (!val) return;
setTimeout(() => {
palyListRef.value?.scrollTo({ top: playerStore.playListIndex * 62 });
}, 50);
};
const isFavorite = computed(() => {
// 对于B站视频使用ID匹配函数
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
@@ -400,11 +463,25 @@ const handleArtistClick = (id: number) => {
navigateToArtist(id);
};
// 监听播放栏显示状态
watch(
() => MusicFullRef.value?.config?.hidePlayBar,
(newVal) => {
if (newVal && musicFullVisible.value) {
// 使用 animate.css 动画,不需要手动设置样式
}
}
);
const isEQVisible = ref(false);
// 打开播放列表抽屉
const openPlayListDrawer = () => {
playerStore.setPlayListDrawerVisible(true);
// 在 script setup 部分添加删除歌曲的处理函数
const handleDeleteSong = (song: SongResult) => {
// 如果删除的是当前播放的歌曲,先切换到下一首
if (song.id === playMusic.value.id) {
playerStore.nextPlay();
}
playerStore.removeFromPlayList(song.id as number);
};
</script>
@@ -496,10 +573,10 @@ const openPlayListDrawer = () => {
}
.audio-button {
@apply flex items-center;
@apply flex items-center mx-4;
.iconfont {
@apply text-2xl transition cursor-pointer mx-3;
@apply text-2xl transition cursor-pointer m-4;
@apply hover:text-green-500;
}
}
@@ -681,25 +758,4 @@ const openPlayListDrawer = () => {
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-overlay {
@apply absolute inset-0 flex items-center justify-center rounded-2xl;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
.loading-icon {
font-size: 24px;
color: white;
animation: spin 1s linear infinite;
}
</style>

View File

@@ -1,287 +0,0 @@
<template>
<!-- 透明遮罩层点击任意位置关闭 -->
<div v-if="internalVisible" class="fixed-overlay" @click="closePanel"></div>
<!-- 使用animate.css进行动画效果 -->
<div
v-if="internalVisible"
class="playlist-panel"
:class="[
'animate__animated',
closing ? (isMobile ? 'animate__slideOutDown' : 'animate__slideOutRight') :
(isMobile ? 'animate__slideInUp' : 'animate__slideInRight')
]"
>
<div class="playlist-panel-header">
<div class="title">{{ t('player.playBar.playList') }}</div>
<div class="header-actions">
<n-tooltip trigger="hover">
<template #trigger>
<div class="action-btn" @click="handleClearPlaylist">
<i class="iconfont ri-delete-bin-line"></i>
</div>
</template>
{{ t('player.playList.clearAll')}}
</n-tooltip>
<div class="close-btn" @click="closePanel">
<i class="iconfont ri-close-line"></i>
</div>
</div>
</div>
<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>
</div>
<n-virtual-list v-else ref="playListRef" :item-size="62" item-resizable :items="playList">
<template #default="{ item }">
<div class="music-play-list-content">
<div class="flex items-center justify-between">
<song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
<div class="delete-btn" @click.stop="handleDeleteSong(item)">
<i
class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
></i>
</div>
</div>
</div>
</template>
</n-virtual-list>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref, watch, onMounted, onUnmounted, nextTick } 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';
import { isMobile } from '@/utils';
const { t } = useI18n();
const message = useMessage();
const dialog = useDialog();
const playerStore = usePlayerStore();
// 内部状态控制组件的可见性
const internalVisible = ref(false);
const closing = ref(false);
// 当前是否显示播放列表面板
const show = computed({
get: () => playerStore.playListDrawerVisible,
set: (value) => {
playerStore.setPlayListDrawerVisible(value);
}
});
// 监听外部可见性变化
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[]);
// 播放列表引用
const playListRef = ref<any>(null);
// 关闭面板
const closePanel = () => {
show.value = false;
};
// 清空播放列表
const handleClearPlaylist = () => {
if (playList.value.length === 0) {
message.info(t('player.playList.alreadyEmpty'));
return;
}
dialog.warning({
title: t('player.playList.clearConfirmTitle'),
content: t('player.playList.clearConfirmContent'),
positiveText: t('common.confirm'),
negativeText: t('common.cancel'),
style: { zIndex: 999999999 }, // 确保对话框显示在遮罩之上
onPositiveClick: () => {
// 清空播放列表
playerStore.clearPlayAll();
message.success(t('player.playList.cleared'));
}
});
};
// 处理键盘事件
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape' && internalVisible.value) {
closePanel();
}
};
// 添加和移除键盘事件监听
onMounted(() => {
window.addEventListener('keydown', handleKeyDown);
});
onUnmounted(() => {
window.removeEventListener('keydown', handleKeyDown);
});
// 滚动到当前播放歌曲
const scrollToCurrentSong = () => {
// 延长等待时间,确保列表已渲染完成
setTimeout(() => {
if (playListRef.value && playList.value.length > 0) {
const index = playerStore.playListIndex;
console.log('滚动到歌曲索引:', index);
playListRef.value.scrollTo({
top: (index > 3 ? (index - 3) : 0) * 62,
});
}
}, 100);
};
// 删除歌曲
const handleDeleteSong = (song: SongResult) => {
playerStore.removeFromPlayList(song.id as number);
};
</script>
<style lang="scss" scoped>
.fixed-overlay {
@apply fixed inset-0 z-[999999];
pointer-events: auto; // 允许点击关闭
cursor: default;
}
.playlist-panel {
@apply fixed right-0 z-[9999999] rounded-l-xl overflow-hidden;
width: 350px;
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;
}
.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;
@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 {
@apply text-red-500 dark:text-red-400;
}
}
}
&-content {
@apply h-[calc(70vh-60px)] overflow-hidden;
}
}
.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;
}
}
.music-play-list-content {
@apply pr-2 hover:bg-light-100 dark:hover:bg-dark-100;
&:hover {
.delete-btn {
@apply visible;
}
}
.delete-btn {
@apply pr-2 cursor-pointer invisible;
.iconfont {
@apply text-lg;
}
}
}
// 移动端适配
@media (max-width: 768px) {
.playlist-panel {
width: 100%;
height: 60vh;
top: auto;
bottom: 56px; // 移动端底部留出导航栏高度
border-radius: 16px 16px 0 0;
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;
&::before {
content: '';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 5px;
border-radius: 5px;
background-color: rgba(150, 150, 150, 0.3);
}
}
&-content {
height: calc(60vh - 60px);
}
}
}
</style>

View File

@@ -1,233 +0,0 @@
<template>
<n-popover
trigger="click"
:z-index="99999999"
placement="top"
content-class="music-source-popover"
raw
:show-arrow="false"
:delay="200"
>
<template #trigger>
<n-tooltip trigger="hover" :z-index="9999999">
<template #trigger>
<i
class="iconfont ri-refresh-line"
:class="{ 'text-green-500': isReparse, 'animate-spin': isReparsing }"
></i>
</template>
{{ t('player.playBar.reparse') }}
</n-tooltip>
</template>
<div class="reparse-popover bg-light-100 dark:bg-dark-100 p-4 rounded-xl max-w-60">
<div class="text-base font-medium mb-2">{{ t('player.reparse.title') }}</div>
<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"
: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="{
'bg-green-50 dark:bg-green-900/20 text-green-500': isCurrentSource(source.value),
'opacity-50 cursor-not-allowed': isReparsing || playMusic.source === 'bilibili'
}"
@click="directReparseMusic(source.value)"
>
<div class="flex items-center justify-center w-6 h-6 mr-3 text-lg">
<i :class="getSourceIcon(source.value)"></i>
</div>
<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">
<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">
<i class="ri-check-line"></i>
</div>
</div>
</div>
</div>
<div v-if="playMusic.source === 'bilibili'" class="text-red-500 text-sm">
{{ t('player.reparse.bilibiliNotSupported') }}
</div>
</div>
</n-popover>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from 'naive-ui';
import { playMusic } from '@/hooks/MusicHook';
import { usePlayerStore } from '@/store/modules/player';
import type { Platform } from '@/types/music';
import { audioService } from '@/services/audioService';
const playerStore = usePlayerStore();
const { t } = useI18n();
const message = useMessage();
// 音源重新解析状态
const isReparsing = ref(false);
const currentReparsingSource = ref<Platform | null>(null);
// 实际存储选中音源的值
const selectedSourcesValue = ref<Platform[]>([]);
// 判断当前歌曲是否有自定义解析记录
const isReparse = computed(() => {
const songId = String(playMusic.value.id);
return localStorage.getItem(`song_source_${songId}`) !== null;
});
// 可选音源列表
const musicSourceOptions = ref([
{ label: 'MiGu', value: 'migu' as Platform },
{ label: 'KuGou', value: 'kugou' as Platform },
{ label: 'pyncmd', value: 'pyncmd' as Platform },
{ label: 'KuWo', value: 'kuwo' as Platform },
{ label: 'Bilibili', value: 'bilibili' as Platform },
{ label: 'GdMuisc', value: 'gdmusic' as Platform }
]);
// 检查音源是否被选中
const isCurrentSource = (source: Platform) => {
return selectedSourcesValue.value.includes(source);
};
// 获取音源图标
const getSourceIcon = (source: Platform) => {
const iconMap: Record<Platform, string> = {
'migu': 'ri-music-2-fill',
'kugou': 'ri-music-fill',
'kuwo': 'ri-album-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';
};
// 初始化选中的音源
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) {
selectedSourcesValue.value = [];
}
} else {
selectedSourcesValue.value = [];
}
};
// 直接重新解析当前歌曲
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 {
message.error(t('player.reparse.failed'));
}
} catch (error) {
console.error('解析失败:', error);
message.error(t('player.reparse.failed'));
} finally {
isReparsing.value = false;
currentReparsingSource.value = null;
}
};
// 监听歌曲ID变化初始化音源设置
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) {
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);
}
}
}
});
</script>
<style lang="scss" scoped>
.music-source-popover {
@apply w-64 rounded-xl overflow-hidden;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 1s linear infinite;
}
.source-button {
&:hover:not(.opacity-50) {
@apply transform -translate-y-0.5 shadow-sm;
}
}
.iconfont {
@apply text-2xl mx-3;
}
</style>

View File

@@ -56,7 +56,7 @@ const props = defineProps({
},
sources: {
type: Array as () => Platform[],
default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo']
default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube']
}
});
@@ -72,6 +72,7 @@ const musicSourceOptions = ref([
{ label: 'pyncmd', value: 'pyncmd' },
{ label: '酷我音乐', value: 'kuwo' },
{ label: 'Bilibili音乐', value: 'bilibili' },
{ label: 'YouTube', value: 'youtube' },
{ label: 'GD音乐台', value: 'gdmusic' }
]);
@@ -102,7 +103,7 @@ watch(
const handleConfirm = () => {
// 确保至少选择一个音源
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
const valuesToEmit = selectedSources.value.length > 0
? [...new Set(selectedSources.value)]
: defaultPlatforms;

View File

@@ -9,7 +9,6 @@ import pinia, { usePlayerStore } from '@/store';
import type { Artist, ILyricText, SongResult } from '@/type/music';
import { isElectron } from '@/utils';
import { getTextColors } from '@/utils/linearColor';
import { getSongUrl } from '@/store/modules/player';
const windowData = window as any;
@@ -906,7 +905,7 @@ audioService.on('url_expired', async (expiredTrack) => {
// 处理网易云音乐重新获取URL
console.log('重新获取网易云音乐URL');
try {
const { getSongUrl } = await import('@/store/modules/player');
const newUrl = await getSongUrl(expiredTrack.id, expiredTrack as any);
if (newUrl) {

View File

@@ -20,7 +20,7 @@
</keep-alive>
</router-view>
</div>
<play-bottom />
<play-bottom height="5rem" />
<app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
</div>
</div>
@@ -46,8 +46,6 @@
settingsStore.setData?.hasDownloadingTasks)
"
/>
<!-- 播放列表抽屉 -->
<play-list-drawer />
</div>
<install-app-modal v-if="!isElectron"></install-app-modal>
<update-modal v-if="isElectron" />
@@ -64,33 +62,27 @@ import InstallAppModal from '@/components/common/InstallAppModal.vue';
import PlayBottom from '@/components/common/PlayBottom.vue';
import UpdateModal from '@/components/common/UpdateModal.vue';
import homeRouter from '@/router/home';
import otherRouter from '@/router/other';
import { useMenuStore } from '@/store/modules/menu';
import { usePlayerStore } from '@/store/modules/player';
import { useSettingsStore } from '@/store/modules/settings';
import { isElectron, isMobile } from '@/utils';
const keepAliveInclude = computed(() => {
const allRoutes = [...homeRouter, ...otherRouter];
return allRoutes
const keepAliveInclude = computed(() =>
homeRouter
.filter((item) => {
return item.meta?.keepAlive;
return item.meta.keepAlive;
})
.map((item) => {
return typeof item.name === 'string'
? item.name.charAt(0).toUpperCase() + item.name.slice(1)
: '';
return item.name.charAt(0).toUpperCase() + item.name.slice(1);
})
.filter(Boolean);
});
);
const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
const PlayBar = defineAsyncComponent(() => import('@/components/player/PlayBar.vue'));
const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
const PlayListDrawer = defineAsyncComponent(() => import('@/components/player/PlayListDrawer.vue'));
const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
const playerStore = usePlayerStore();
@@ -150,7 +142,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
.mobile {
.main-content {
height: calc(100vh - 130px);
height: calc(100vh - 154px);
overflow: auto;
display: block;
flex: none;

View File

@@ -9,16 +9,19 @@
</div>
<div class="app-menu-list">
<div v-for="(item, index) in menus" :key="item.path" class="app-menu-item">
<n-tooltip :delay="200" :disabled="isText" placement="bottom">
<template #trigger>
<router-link class="app-menu-item-link" :to="item.path">
<i class="iconfont app-menu-item-icon" :style="iconStyle(index)" :class="item.meta.icon"></i>
<span v-if="isText" class="app-menu-item-text ml-3" :class="isChecked(index) ? 'text-green-500' : ''">{{
item.meta.title }}</span>
</router-link>
</template>
<div v-if="!isText">{{ item.meta.title }}</div>
</n-tooltip>
<router-link class="app-menu-item-link" :to="item.path">
<i
class="iconfont app-menu-item-icon"
:style="iconStyle(index)"
:class="item.meta.icon"
></i>
<span
v-if="isText"
class="app-menu-item-text ml-3"
:class="isChecked(index) ? 'text-green-500' : ''"
>{{ item.meta.title }}</span
>
</router-link>
</div>
</div>
</div>
@@ -80,7 +83,6 @@ const isText = ref(false);
.app-menu-expanded {
@apply w-[160px];
.app-menu-item {
@apply hover:bg-gray-100 dark:hover:bg-gray-800 rounded mr-4;
}

View File

@@ -34,18 +34,13 @@
:class="{ 'only-cover': config.hideLyrics }"
:style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
>
<div class="img-container relative">
<n-image
ref="PicImgRef"
:src="getImgUrl(playMusic?.picUrl, '500y500')"
class="img"
lazy
preview-disabled
/>
<div v-if="playMusic?.playLoading" class="loading-overlay">
<i class="ri-loader-4-line loading-icon"></i>
</div>
</div>
<n-image
ref="PicImgRef"
:src="getImgUrl(playMusic?.picUrl, '500y500')"
class="img"
lazy
preview-disabled
/>
<div class="music-info">
<div class="music-content-name">{{ playMusic.name }}</div>
<div class="music-content-singer">
@@ -554,12 +549,8 @@ defineExpose({
max-width: none;
max-height: none;
.img-container {
@apply w-[50vh] h-[50vh] mb-8;
}
.img {
@apply w-full h-full;
@apply w-[50vh] h-[50vh] mb-8;
}
.music-info {
@@ -577,10 +568,6 @@ defineExpose({
}
}
.img-container {
@apply relative w-full h-full;
}
.img {
@apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
}
@@ -776,25 +763,4 @@ defineExpose({
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-overlay {
@apply absolute inset-0 flex items-center justify-center rounded-xl;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
.loading-icon {
font-size: 48px;
color: white;
animation: spin 1s linear infinite;
}
</style>

View File

@@ -266,7 +266,7 @@ const selectItem = async (key: string) => {
};
const toGithub = () => {
window.open('http://donate.alger.fun/download', '_blank');
window.open('http://donate.alger.fun', '_blank');
};
const updateInfo = ref<UpdateResult>({

View File

@@ -33,17 +33,6 @@ const layoutRouter = [
},
component: () => import('@/views/list/index.vue')
},
{
path: '/toplist',
name: 'toplist',
meta: {
title: '排行榜',
icon: 'ri-bar-chart-grouped-fill',
keepAlive: true,
isMobile: true
},
component: () => import('@/views/toplist/index.vue')
},
{
path: '/mv',
name: 'mv',
@@ -51,10 +40,20 @@ const layoutRouter = [
title: 'MV',
icon: 'icon-recordfill',
keepAlive: true,
isMobile: false
isMobile: true
},
component: () => import('@/views/mv/index.vue')
},
// {
// path: '/history',
// name: 'history',
// meta: {
// title: '历史',
// icon: 'icon-a-TicketStar',
// keepAlive: true,
// },
// component: () => import('@/views/history/index.vue'),
// },
{
path: '/history',
name: 'history',

View File

@@ -53,17 +53,6 @@ const otherRouter = [
back: true
},
component: () => import('@/views/bilibili/BilibiliPlayer.vue')
},
{
path: '/music-list/:id?',
name: 'musicList',
meta: {
title: '音乐列表',
keepAlive: false,
showInMenu: false,
back: true
},
component: () => import('@/views/music/MusicListPage.vue')
}
];
export default otherRouter;

View File

@@ -45,8 +45,6 @@ class AudioService {
private operationLock = false;
private operationLockTimer: NodeJS.Timeout | null = null;
private operationLockTimeout = 5000; // 5秒超时
private operationLockStartTime: number = 0;
private operationLockId: string = '';
constructor() {
if ('mediaSession' in navigator) {
@@ -55,14 +53,6 @@ class AudioService {
// 从本地存储加载 EQ 开关状态
const bypassState = localStorage.getItem('eqBypass');
this.bypass = bypassState ? JSON.parse(bypassState) : false;
// 页面加载时立即强制重置操作锁
this.forceResetOperationLock();
// 添加页面卸载事件,确保离开页面时清除锁
window.addEventListener('beforeunload', () => {
this.forceResetOperationLock();
});
}
private initMediaSession() {
@@ -373,37 +363,11 @@ class AudioService {
// 设置操作锁,带超时自动释放
private setOperationLock(): boolean {
// 生成唯一的锁ID
const lockId = Date.now().toString() + Math.random().toString(36).substring(2, 9);
// 如果锁已经存在,检查是否超时
if (this.operationLock) {
const currentTime = Date.now();
const lockDuration = currentTime - this.operationLockStartTime;
// 如果锁持续时间超过2秒直接强制重置
if (lockDuration > 2000) {
console.warn(`操作锁已激活 ${lockDuration}ms超过安全阈值强制重置`);
this.forceResetOperationLock();
} else {
console.log(`操作锁激活中,持续时间 ${lockDuration}ms`);
return false;
}
return false;
}
this.operationLock = true;
this.operationLockStartTime = Date.now();
this.operationLockId = lockId;
// 将锁信息存储到 localStorage仅用于调试实际不依赖此值
try {
localStorage.setItem('audioOperationLock', JSON.stringify({
id: this.operationLockId,
startTime: this.operationLockStartTime
}));
} catch (error) {
console.error('存储操作锁信息失败:', error);
}
// 清除之前的定时器
if (this.operationLockTimer) {
@@ -413,23 +377,16 @@ class AudioService {
// 设置超时自动释放锁
this.operationLockTimer = setTimeout(() => {
console.warn('操作锁超时自动释放');
this.releaseOperationLock();
this.operationLock = false;
this.operationLockTimer = null;
}, this.operationLockTimeout);
return true;
}
// 释放操作锁
public releaseOperationLock(): void {
private releaseOperationLock(): void {
this.operationLock = false;
this.operationLockStartTime = 0;
// 从 localStorage 中移除锁信息
try {
localStorage.removeItem('audioOperationLock');
} catch (error) {
console.error('清除存储的操作锁信息失败:', error);
}
if (this.operationLockTimer) {
clearTimeout(this.operationLockTimer);
@@ -437,59 +394,12 @@ class AudioService {
}
}
// 强制重置操作锁,用于特殊情况
public forceResetOperationLock(): void {
console.log('强制重置操作锁');
this.operationLock = false;
this.operationLockStartTime = 0;
this.operationLockId = '';
if (this.operationLockTimer) {
clearTimeout(this.operationLockTimer);
this.operationLockTimer = null;
}
// 清除存储的锁
localStorage.removeItem('audioOperationLock');
}
// 播放控制相关
play(url?: string, track?: SongResult, isPlay: boolean = true): Promise<Howl> {
// 每次调用play方法时尝试强制重置锁注意仅在页面刷新后的第一次播放时应用
if (!this.currentSound) {
console.log('首次播放请求,强制重置操作锁');
this.forceResetOperationLock();
}
// 如果操作锁已激活,但持续时间超过安全阈值,强制重置
if (this.operationLock) {
const currentTime = Date.now();
const lockDuration = currentTime - this.operationLockStartTime;
if (lockDuration > 2000) {
console.warn(`操作锁已激活 ${lockDuration}ms超过安全阈值强制重置`);
this.forceResetOperationLock();
}
}
// 获取锁
// 如果操作锁已激活,说明有操作正在进行中,直接返回
if (!this.setOperationLock()) {
console.log('audioService: 操作锁激活,强制执行当前播放请求');
// 如果只是要继续播放当前音频,直接执行
if (this.currentSound && !url && !track) {
if (this.seekLock && this.seekDebounceTimer) {
clearTimeout(this.seekDebounceTimer);
this.seekLock = false;
}
this.currentSound.play();
return Promise.resolve(this.currentSound);
}
// 强制释放锁并继续执行
this.forceResetOperationLock();
// 这里不再返回错误,而是继续执行播放逻辑
console.log('audioService: 操作锁激活,忽略当前播放请求');
return Promise.reject(new Error('操作锁激活,请等待当前操作完成'));
}
// 如果没有提供新的 URL 和 track且当前有音频实例则继续播放
@@ -507,7 +417,7 @@ class AudioService {
// 如果没有提供必要的参数,返回错误
if (!url || !track) {
this.releaseOperationLock();
return Promise.reject(new Error('缺少必要参数: url和track'));
return Promise.reject(new Error('Missing required parameters: url and track'));
}
return new Promise<Howl>((resolve, reject) => {
@@ -575,7 +485,6 @@ class AudioService {
} else {
// 发送URL过期事件通知外部需要重新获取URL
this.emit('url_expired', this.currentTrack);
this.releaseOperationLock();
reject(new Error('音频加载失败,请尝试切换其他歌曲'));
}
},
@@ -588,7 +497,6 @@ class AudioService {
} else {
// 发送URL过期事件通知外部需要重新获取URL
this.emit('url_expired', this.currentTrack);
this.releaseOperationLock();
reject(new Error('音频播放失败,请尝试切换其他歌曲'));
}
},
@@ -666,33 +574,33 @@ class AudioService {
}
stop() {
// 强制重置操作锁并继续执行
this.forceResetOperationLock();
try {
if (this.currentSound) {
try {
// 确保任何进行中的seek操作被取消
if (this.seekLock && this.seekDebounceTimer) {
clearTimeout(this.seekDebounceTimer);
this.seekLock = false;
}
this.currentSound.stop();
this.currentSound.unload();
} catch (error) {
console.error('停止音频失败:', error);
}
this.currentSound = null;
}
this.currentTrack = null;
if ('mediaSession' in navigator) {
navigator.mediaSession.playbackState = 'none';
}
this.disposeEQ();
} catch (error) {
console.error('停止音频时发生错误:', error);
if (!this.setOperationLock()) {
console.log('audioService: 操作锁激活,忽略当前停止请求');
return;
}
if (this.currentSound) {
try {
// 确保任何进行中的seek操作被取消
if (this.seekLock && this.seekDebounceTimer) {
clearTimeout(this.seekDebounceTimer);
this.seekLock = false;
}
this.currentSound.stop();
this.currentSound.unload();
} catch (error) {
console.error('Error stopping audio:', error);
}
this.currentSound = null;
}
this.currentTrack = null;
if ('mediaSession' in navigator) {
navigator.mediaSession.playbackState = 'none';
}
this.disposeEQ();
this.releaseOperationLock();
}
setVolume(volume: number) {
@@ -703,12 +611,14 @@ class AudioService {
}
seek(time: number) {
// 直接强制重置操作锁
this.forceResetOperationLock();
if (!this.setOperationLock()) {
console.log('audioService: 操作锁激活忽略当前seek请求');
return;
}
if (this.currentSound) {
try {
// 直接执行seek操作
// 直接执行seek操作,避免任何过滤或判断
this.currentSound.seek(time);
// 触发seek事件
this.updateMediaSessionPositionState();
@@ -717,23 +627,30 @@ class AudioService {
console.error('Seek操作失败:', error);
}
}
this.releaseOperationLock();
}
pause() {
this.forceResetOperationLock();
if (!this.setOperationLock()) {
console.log('audioService: 操作锁激活,忽略当前暂停请求');
return;
}
if (this.currentSound) {
try {
// 确保任何进行中的seek操作被取消
// 如果有进行中的seek操作,等待其完成
if (this.seekLock && this.seekDebounceTimer) {
clearTimeout(this.seekDebounceTimer);
this.seekLock = false;
}
this.currentSound.pause();
} catch (error) {
console.error('暂停音频失败:', error);
console.error('Error pausing audio:', error);
}
}
this.releaseOperationLock();
}
clearAllListeners() {

View File

@@ -16,6 +16,5 @@ export * from './modules/player';
export * from './modules/search';
export * from './modules/settings';
export * from './modules/user';
export * from './modules/music';
export default pinia;

View File

@@ -1,45 +0,0 @@
import { defineStore } from 'pinia';
interface MusicState {
currentMusicList: any[] | null;
currentMusicListName: string;
currentListInfo: any | null;
canRemoveSong: boolean;
}
export const useMusicStore = defineStore('music', {
state: (): MusicState => ({
currentMusicList: null,
currentMusicListName: '',
currentListInfo: null,
canRemoveSong: false
}),
actions: {
// 设置当前音乐列表
setCurrentMusicList(list: any[], name: string, listInfo: any = null, canRemove = false) {
this.currentMusicList = list;
this.currentMusicListName = name;
this.currentListInfo = listInfo;
this.canRemoveSong = canRemove;
},
// 清除当前音乐列表
clearCurrentMusicList() {
this.currentMusicList = null;
this.currentMusicListName = '';
this.currentListInfo = null;
this.canRemoveSong = false;
},
// 从列表中移除一首歌曲
removeSongFromList(id: number) {
if (!this.currentMusicList) return;
const index = this.currentMusicList.findIndex((song) => song.id === id);
if (index !== -1) {
this.currentMusicList.splice(index, 1);
}
}
}
});

View File

@@ -4,7 +4,7 @@ import { computed, ref } from 'vue';
import i18n from '@/../i18n/renderer';
import { getBilibiliAudioUrl } from '@/api/bilibili';
import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl, likeSong } from '@/api/music';
import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
import { useMusicHistory } from '@/hooks/MusicHistoryHook';
import { audioService } from '@/services/audioService';
import type { ILyric, ILyricText, SongResult } from '@/type/music';
@@ -14,7 +14,6 @@ import { createDiscreteApi } from 'naive-ui';
import { useSettingsStore } from './settings';
import { useUserStore } from './user';
import { type Platform } from '@/types/music';
const musicHistory = useMusicHistory();
const { message } = createDiscreteApi(['message']);
@@ -103,28 +102,6 @@ export const getSongUrl = async (
}
const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
// 检查是否有自定义音源设置
const songId = String(id);
const savedSource = localStorage.getItem(`song_source_${songId}`);
// 如果有自定义音源设置直接使用getParsingMusicUrl获取URL
if (savedSource && songData.source !== 'bilibili') {
try {
console.log(`使用自定义音源解析歌曲 ID: ${songId}`);
const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
if (res && res.data && res.data.data && res.data.data.url) {
return res.data.data.url;
}
// 如果自定义音源解析失败,继续使用正常的获取流程
console.warn('自定义音源解析失败,使用默认音源');
} catch (error) {
console.error('error',error)
console.error('自定义音源解析出错:', error);
}
}
// 正常获取URL流程
const { data } = await getMusicUrl(numericId, isDownloaded);
let url = '';
let songDetail = null;
@@ -212,26 +189,17 @@ export const loadLrc = async (id: string | number): Promise<ILyric> => {
};
const getSongDetail = async (playMusic: SongResult) => {
// playMusic.playLoading 在 handlePlayMusic 中已设置,这里不再设置
playMusic.playLoading = true;
if (playMusic.source === 'bilibili') {
console.log('处理B站音频详情');
try {
// 如果需要获取URL
if (!playMusic.playMusicUrl && playMusic.bilibiliData) {
playMusic.playMusicUrl = await getBilibiliAudioUrl(
playMusic.bilibiliData.bvid,
playMusic.bilibiliData.cid
);
}
playMusic.playLoading = false;
return { ...playMusic} as SongResult;
} catch (error) {
console.error('获取B站音频详情失败:', error);
playMusic.playLoading = false;
throw error;
}
const { backgroundColor, primaryColor } =
playMusic.backgroundColor && playMusic.primaryColor
? playMusic
: await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
playMusic.playLoading = false;
return { ...playMusic, backgroundColor, primaryColor } as SongResult;
}
if (playMusic.expiredAt && playMusic.expiredAt < Date.now()) {
@@ -239,23 +207,17 @@ const getSongDetail = async (playMusic: SongResult) => {
playMusic.playMusicUrl = undefined;
}
try {
const playMusicUrl = playMusic.playMusicUrl || (await getSongUrl(playMusic.id, playMusic));
playMusic.createdAt = Date.now();
// 半小时后过期
playMusic.expiredAt = playMusic.createdAt + 1800000;
const { backgroundColor, primaryColor } =
playMusic.backgroundColor && playMusic.primaryColor
? playMusic
: await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
const playMusicUrl = playMusic.playMusicUrl || (await getSongUrl(playMusic.id, playMusic));
playMusic.createdAt = Date.now();
// 半小时后过期
playMusic.expiredAt = playMusic.createdAt + 1800000;
const { backgroundColor, primaryColor } =
playMusic.backgroundColor && playMusic.primaryColor
? playMusic
: await getImageLinearBackground(getImgUrl(playMusic?.picUrl, '30y30'));
playMusic.playLoading = false;
return { ...playMusic, playMusicUrl, backgroundColor, primaryColor } as SongResult;
} catch (error) {
console.error('获取音频URL失败:', error);
playMusic.playLoading = false;
throw error;
}
playMusic.playLoading = false;
return { ...playMusic, playMusicUrl, backgroundColor, primaryColor } as SongResult;
};
const preloadNextSong = (nextSongUrl: string) => {
@@ -390,29 +352,11 @@ export const usePlayerStore = defineStore('player', () => {
const favoriteList = ref<Array<number | string>>(getLocalStorageItem('favoriteList', []));
const savedPlayProgress = ref<number | undefined>();
// 添加播放列表抽屉状态
const playListDrawerVisible = ref(false);
// 定时关闭相关状态
const sleepTimer = ref<SleepTimerInfo>(getLocalStorageItem('sleepTimer', {
type: SleepTimerType.NONE,
value: 0
}));
// 清空播放列表
const clearPlayAll = async () => {
audioService.pause()
setTimeout(() => {
playMusic.value = {} as SongResult;
playMusicUrl.value = '';
playList.value = [];
playListIndex.value = 0;
localStorage.removeItem('currentPlayMusic');
localStorage.removeItem('currentPlayMusicUrl');
localStorage.removeItem('playList');
localStorage.removeItem('playListIndex');
}, 500);
};
const timerInterval = ref<number | null>(null);
@@ -445,72 +389,71 @@ export const usePlayerStore = defineStore('player', () => {
const currentPlayListIndex = computed(() => playListIndex.value);
const handlePlayMusic = async (music: SongResult, isPlay: boolean = true) => {
const currentSound = audioService.getCurrentSound();
if (currentSound) {
console.log('主动停止并卸载当前音频实例');
currentSound.stop();
currentSound.unload();
// 处理B站视频确保URL有效
if (music.source === 'bilibili' && music.bilibiliData) {
try {
console.log('处理B站视频检查URL有效性');
// 清除之前的URL强制重新获取
music.playMusicUrl = undefined;
// 重新获取B站视频URL
if (music.bilibiliData.bvid && music.bilibiliData.cid) {
music.playMusicUrl = await getBilibiliAudioUrl(
music.bilibiliData.bvid,
music.bilibiliData.cid
);
console.log('获取B站URL成功:', music.playMusicUrl);
}
} catch (error) {
console.error('获取B站音频URL失败:', error);
message.error(i18n.global.t('player.playFailed'));
return false; // 返回失败状态
}
}
// 先切换歌曲数据,更新播放状态
// 加载歌词
await loadLrcAsync(music);
const originalMusic = { ...music };
// 获取背景色
const { backgroundColor, primaryColor } =
music.backgroundColor && music.primaryColor
? music
: await getImageLinearBackground(getImgUrl(music?.picUrl, '30y30'));
music.backgroundColor = backgroundColor;
music.primaryColor = primaryColor;
music.playLoading = true; // 设置加载状态
playMusic.value = music;
// 更新播放相关状态
play.value = isPlay;
// 更新标题
let title = music.name;
if (music.source === 'netease' && music?.song?.artists) {
title += ` - ${music.song.artists.reduce(
(prev: string, curr: any) => `${prev}${curr.name}/`,
''
)}`;
} else if (music.source === 'bilibili' && music?.song?.ar?.[0]) {
title += ` - ${music.song.ar[0].name}`;
}
document.title = 'AlgerMusic - ' + title;
try {
// 添加到历史记录
musicHistory.addMusic(music);
// 查找歌曲在播放列表中的索引
const updatedPlayMusic = await getSongDetail(music);
playMusic.value = updatedPlayMusic;
playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
play.value = isPlay;
localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
localStorage.setItem('isPlaying', play.value.toString());
let title = updatedPlayMusic.name;
if (updatedPlayMusic.source === 'netease' && updatedPlayMusic?.song?.artists) {
title += ` - ${updatedPlayMusic.song.artists.reduce(
(prev: string, curr: any) => `${prev}${curr.name}/`,
''
)}`;
} else if (updatedPlayMusic.source === 'bilibili' && updatedPlayMusic?.song?.ar?.[0]) {
title += ` - ${updatedPlayMusic.song.ar[0].name}`;
}
document.title = title;
loadLrcAsync(playMusic.value);
musicHistory.addMusic(playMusic.value);
// 找到歌曲在播放列表中的索引,如果是通过 nextPlay/prevPlay 调用的,不会更新 playListIndex
const songIndex = playList.value.findIndex(
(item: SongResult) => item.id === music.id && item.source === music.source
);
// 只有在 songIndex 有效,并且与当前 playListIndex 不同时才更新
// 这样可以避免与 nextPlay/prevPlay 中的索引更新冲突
if (songIndex !== -1 && songIndex !== playListIndex.value) {
console.log('歌曲索引不匹配,更新为:', songIndex);
playListIndex.value = songIndex;
}
// 获取歌曲详情包括URL
const updatedPlayMusic = await getSongDetail(originalMusic);
playMusic.value = updatedPlayMusic;
playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
// 保存到本地存储
localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
localStorage.setItem('isPlaying', play.value.toString());
// 无论如何都预加载更多歌曲
if (songIndex !== -1) {
setTimeout(() => {
fetchSongs(playList.value, songIndex + 1, songIndex + 2);
}, 3000);
fetchSongs(playList.value, songIndex + 1, songIndex + 3);
} else {
console.warn('当前歌曲未在播放列表中找到');
}
@@ -518,7 +461,7 @@ export const usePlayerStore = defineStore('player', () => {
// 使用标记防止循环调用
let playInProgress = false;
// 直接调用 playAudio 方法播放音频
// 直接调用 playAudio 方法播放音频,不需要依赖外部监听
try {
if (playInProgress) {
console.warn('播放操作正在进行中,避免重复调用');
@@ -526,6 +469,8 @@ export const usePlayerStore = defineStore('player', () => {
}
playInProgress = true;
// 因为调用 playAudio 前我们已经设置了 play.value所以不需要额外传递 shouldPlay 参数
const result = await playAudio();
playInProgress = false;
@@ -538,36 +483,19 @@ export const usePlayerStore = defineStore('player', () => {
} catch (error) {
console.error('处理播放音乐失败:', error);
message.error(i18n.global.t('player.playFailed'));
// 出现错误时,更新加载状态
if (playMusic.value) {
playMusic.value.playLoading = false;
}
return false;
}
};
const setPlay = async (song: SongResult) => {
try {
// 如果是当前正在播放的音乐,则切换播放/暂停状态
if (playMusic.value.id === song.id && playMusic.value.playMusicUrl === song.playMusicUrl) {
if (play.value) {
setPlayMusic(false);
audioService.getCurrentSound()?.pause();
} else {
setPlayMusic(true);
audioService.getCurrentSound()?.play();
}
return;
}
// 直接调用 handlePlayMusic它会处理索引更新和播放逻辑
const success = await handlePlayMusic(song);
// 记录到本地存储,保持一致性
localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
if (success) {
isPlay.value = true;
}
return success;
} catch (error) {
console.error('设置播放失败:', error);
@@ -599,11 +527,8 @@ export const usePlayerStore = defineStore('player', () => {
musicFull.value = value;
};
const setPlayList = (list: SongResult[], keepIndex: boolean = false) => {
// 如果指定保持当前索引,则不重新计算索引
if (!keepIndex) {
playListIndex.value = list.findIndex((item) => item.id === playMusic.value.id);
}
const setPlayList = (list: SongResult[]) => {
playListIndex.value = list.findIndex((item) => item.id === playMusic.value.id);
playList.value = list;
localStorage.setItem('playList', JSON.stringify(list));
localStorage.setItem('playListIndex', playListIndex.value.toString());
@@ -789,13 +714,20 @@ export const usePlayerStore = defineStore('player', () => {
}
};
// 修改nextPlay方法改进播放逻辑
// 修改nextPlay方法加入定时关闭检查逻辑
const nextPlay = async () => {
// 静态标志,防止多次调用造成递归
if ((nextPlay as any).isRunning) {
console.log('下一首播放正在执行中,忽略重复调用');
return;
}
try {
(nextPlay as any).isRunning = true;
if (playList.value.length === 0) {
play.value = true;
(nextPlay as any).isRunning = false;
return;
}
@@ -804,195 +736,125 @@ export const usePlayerStore = defineStore('player', () => {
sleepTimer.value.type === SleepTimerType.PLAYLIST_END) {
// 已是最后一首且为顺序播放模式,触发停止
stopPlayback();
(nextPlay as any).isRunning = false;
return;
}
// 保存当前索引,用于错误恢复
const currentIndex = playListIndex.value;
// 在切换前保存当前播放状态
const shouldPlayNext = play.value;
console.log('切换到下一首,当前播放状态:', shouldPlayNext ? '播放' : '暂停');
let nowPlayListIndex: number;
if (playMode.value === 2) {
// 随机播放模式
do {
nowPlayListIndex = Math.floor(Math.random() * playList.value.length);
} while (nowPlayListIndex === playListIndex.value && playList.value.length > 1);
} else {
// 顺序播放或循环播放模式
nowPlayListIndex = (playListIndex.value + 1) % playList.value.length;
}
// 获取下一首歌曲
let nextSong = { ...playList.value[nowPlayListIndex] };
// 记录尝试播放过的索引,防止无限循环
const attemptedIndices = new Set<number>();
attemptedIndices.add(nowPlayListIndex);
// 先更新当前播放索引
// 重要:首先更新当前播放索引
playListIndex.value = nowPlayListIndex;
// 尝试播放
let success = false;
let retryCount = 0;
const maxRetries = Math.min(3, playList.value.length);
// 获取下一首歌曲
const nextSong = playList.value[nowPlayListIndex];
// 尝试播放最多尝试maxRetries次
while (!success && retryCount < maxRetries) {
success = await handlePlayMusic(nextSong, true);
// 如果是B站视频确保重新获取URL
if (nextSong.source === 'bilibili' && nextSong.bilibiliData) {
// 清除之前的URL确保重新获取
nextSong.playMusicUrl = undefined;
console.log('下一首是B站视频已清除URL强制重新获取');
}
// 尝试播放,并明确传递应该播放的状态
const success = await handlePlayMusic(nextSong, shouldPlayNext);
if (!success) {
console.error('播放下一首失败,将从播放列表中移除此歌曲');
// 从播放列表中移除失败的歌曲
const newPlayList = [...playList.value];
newPlayList.splice(nowPlayListIndex, 1);
if (!success) {
retryCount++;
console.error(`播放失败,尝试 ${retryCount}/${maxRetries}`);
if (retryCount >= maxRetries) {
console.error('多次尝试播放失败,将从播放列表中移除此歌曲');
// 从播放列表中移除失败的歌曲
const newPlayList = [...playList.value];
newPlayList.splice(nowPlayListIndex, 1);
if (newPlayList.length > 0) {
// 更新播放列表,但保持当前索引不变
const keepCurrentIndexPosition = true;
setPlayList(newPlayList, keepCurrentIndexPosition);
// 继续尝试下一首
if (playMode.value === 2) {
// 随机模式,随机选择一首未尝试过的
const availableIndices = Array.from(
{ length: newPlayList.length },
(_, i) => i
).filter(i => !attemptedIndices.has(i));
if (availableIndices.length > 0) {
// 随机选择一个未尝试过的索引
nowPlayListIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
} else {
// 如果所有歌曲都尝试过了,选择下一个索引
nowPlayListIndex = (playListIndex.value + 1) % newPlayList.length;
}
} else {
// 顺序播放,选择下一首
// 如果当前索引已经是最后一首,循环到第一首
nowPlayListIndex = playListIndex.value >= newPlayList.length
? 0
: playListIndex.value;
}
playListIndex.value = nowPlayListIndex;
attemptedIndices.add(nowPlayListIndex);
if (newPlayList[nowPlayListIndex]) {
nextSong = { ...newPlayList[nowPlayListIndex] };
retryCount = 0; // 重置重试计数器,为新歌曲准备
} else {
// 处理索引无效的情况
console.error('无效的播放索引,停止尝试');
break;
}
} else {
// 播放列表为空,停止尝试
console.error('播放列表为空,停止尝试');
break;
}
}
if (newPlayList.length > 0) {
// 更新播放列表后,重新尝试播放下一首
setPlayList(newPlayList);
// 延迟一点时间再尝试下一首,避免立即触发可能导致的无限循环
setTimeout(() => {
(nextPlay as any).isRunning = false;
nextPlay();
}, 300);
return;
}
}
// 歌曲切换成功,触发歌曲变更处理(用于定时关闭功能)
if (success) {
handleSongChange();
} else {
console.error('所有尝试都失败,无法播放下一首歌曲');
// 如果尝试了所有可能的歌曲仍然失败,恢复到原始索引
playListIndex.value = currentIndex;
setIsPlay(false); // 停止播放
message.error(i18n.global.t('player.playFailed'));
}
handleSongChange();
} catch (error) {
console.error('切换下一首出错:', error);
} finally {
(nextPlay as any).isRunning = false;
}
};
// 修改 prevPlay 方法,使用与 nextPlay 相似的逻辑改进
const prevPlay = async () => {
// 静态标志,防止多次调用造成递归
if ((prevPlay as any).isRunning) {
console.log('上一首播放正在执行中,忽略重复调用');
return;
}
try {
(prevPlay as any).isRunning = true;
if (playList.value.length === 0) {
play.value = true;
(prevPlay as any).isRunning = false;
return;
}
// 保存当前索引,用于错误恢复
const currentIndex = playListIndex.value;
const nowPlayListIndex =
(playListIndex.value - 1 + playList.value.length) % playList.value.length;
// 获取上一首歌曲
const prevSong = { ...playList.value[nowPlayListIndex] };
// 重要:首先更新当前播放索引
playListIndex.value = nowPlayListIndex;
// 尝试播放
let success = false;
let retryCount = 0;
const maxRetries = 2;
// 尝试播放最多尝试maxRetries次
while (!success && retryCount < maxRetries) {
success = await handlePlayMusic(prevSong);
if (!success) {
retryCount++;
console.error(`播放上一首失败,尝试 ${retryCount}/${maxRetries}`);
// 最后一次尝试失败
if (retryCount >= maxRetries) {
console.error('多次尝试播放失败,将从播放列表中移除此歌曲');
// 从播放列表中移除失败的歌曲
const newPlayList = [...playList.value];
newPlayList.splice(nowPlayListIndex, 1);
if (newPlayList.length > 0) {
// 更新播放列表,但保持当前索引不变
const keepCurrentIndexPosition = true;
setPlayList(newPlayList, keepCurrentIndexPosition);
// 恢复到原始索引或继续尝试上一首
if (newPlayList.length === 1) {
// 只剩一首歌,直接播放它
playListIndex.value = 0;
} else {
// 尝试上上一首
const newPrevIndex = (playListIndex.value - 1 + newPlayList.length) % newPlayList.length;
playListIndex.value = newPrevIndex;
}
// 延迟一点时间再尝试,避免可能的无限循环
setTimeout(() => {
prevPlay(); // 递归调用,尝试再上一首
}, 300);
return;
} else {
// 播放列表为空,停止尝试
console.error('播放列表为空,停止尝试');
break;
}
}
}
// 获取上一首歌曲
const prevSong = playList.value[nowPlayListIndex];
// 如果是B站视频确保重新获取URL
if (prevSong.source === 'bilibili' && prevSong.bilibiliData) {
// 清除之前的URL确保重新获取
prevSong.playMusicUrl = undefined;
console.log('上一首是B站视频已清除URL强制重新获取');
}
// 尝试播放如果失败会返回false
const success = await handlePlayMusic(prevSong);
if (!success) {
console.error('所有尝试都失败,无法播放上一首歌曲');
// 如果尝试了所有可能的歌曲仍然失败,恢复到原始索引
playListIndex.value = currentIndex;
setIsPlay(false); // 停止播放
message.error(i18n.global.t('player.playFailed'));
if (success) {
await fetchSongs(playList.value, playListIndex.value - 3, nowPlayListIndex);
} else {
console.error('播放上一首失败,将从播放列表中移除此歌曲');
// 从播放列表中移除失败的歌曲
const newPlayList = [...playList.value];
newPlayList.splice(nowPlayListIndex, 1);
if (newPlayList.length > 0) {
// 更新播放列表后,重新尝试播放上一首
setPlayList(newPlayList);
// 延迟一点时间再尝试上一首,避免立即触发可能导致的无限循环
setTimeout(() => {
(prevPlay as any).isRunning = false;
prevPlay();
}, 300);
return;
}
}
} catch (error) {
console.error('切换上一首出错:', error);
} finally {
(prevPlay as any).isRunning = false;
}
};
@@ -1012,7 +874,6 @@ export const usePlayerStore = defineStore('player', () => {
if (!isAlreadyInList) {
favoriteList.value.push(id);
localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
typeof id === 'number' && useUserStore().user && likeSong(id, true);
}
};
@@ -1022,7 +883,6 @@ export const usePlayerStore = defineStore('player', () => {
favoriteList.value = favoriteList.value.filter(existingId => !isBilibiliIdMatch(existingId, id));
} else {
favoriteList.value = favoriteList.value.filter(existingId => existingId !== id);
useUserStore().user && likeSong(Number(id), false);
}
localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
};
@@ -1121,7 +981,7 @@ export const usePlayerStore = defineStore('player', () => {
localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
};
// 修改 playAudio 函数中的错误处理逻辑,避免在操作锁问题时频繁尝试播放
// 修改:处理音频播放的方法,使用事件触发机制
const playAudio = async () => {
if (!playMusicUrl.value || !playMusic.value) return null;
@@ -1181,40 +1041,23 @@ export const usePlayerStore = defineStore('player', () => {
console.error('播放音频失败:', error);
setPlayMusic(false);
// 避免直接调用 nextPlay改用延时避免无限循环
// 检查错误是否是由于操作锁引起的
const errorMsg = error instanceof Error ? error.message : String(error);
// 操作锁错误处理
if (errorMsg.includes('操作锁激活')) {
console.log('由于操作锁正在使用,将在1000ms后重试');
// 强制重置操作锁并延迟再试
try {
// 尝试强制重置音频服务的操作锁
audioService.forceResetOperationLock();
console.log('已强制重置操作锁');
} catch (e) {
console.error('重置操作锁失败:', e);
}
// 延迟较长时间,确保锁已完全释放
console.log('由于操作锁正在使用,将在500ms后重试');
// 操作锁错误,延迟后再尝试
setTimeout(() => {
// 直接重试当前歌曲,而不是切换到下一首
playAudio().catch(e => {
console.error('重试播放失败,切换到下一首:', e);
// 只有再次失败才切换到下一首
if (playList.value.length > 1) {
nextPlay();
}
});
}, 1000);
// 检查当前播放列表是否有下一首
if (playList.value.length > 1) {
nextPlay();
}
}, 500);
} else {
// 其他错误,切换到下一首
console.log('播放失败,切换到下一首');
// 其他错误,延迟更短时间后切换
setTimeout(() => {
nextPlay();
}, 300);
}, 100);
}
message.error(i18n.global.t('player.playFailed'));
@@ -1222,80 +1065,6 @@ export const usePlayerStore = defineStore('player', () => {
}
};
// 使用指定的音源重新解析当前播放的歌曲
const reparseCurrentSong = async (sourcePlatform: Platform) => {
try {
const currentSong = playMusic.value;
if (!currentSong || !currentSong.id) {
console.warn('没有有效的播放对象');
return false;
}
// B站视频不支持重新解析
if (currentSong.source === 'bilibili') {
console.warn('B站视频不支持重新解析');
return false;
}
// 保存用户选择的音源
const songId = String(currentSong.id);
localStorage.setItem(`song_source_${songId}`, JSON.stringify([sourcePlatform]));
// 停止当前播放
const currentSound = audioService.getCurrentSound();
if (currentSound) {
currentSound.pause();
}
// 重新获取歌曲URL
const numericId = typeof currentSong.id === 'string'
? parseInt(currentSong.id, 10)
: currentSong.id;
const res = await getParsingMusicUrl(numericId, cloneDeep(currentSong));
if (res && res.data && res.data.data && res.data.data.url) {
// 更新URL
const newUrl = res.data.data.url;
// 使用新URL更新播放
const updatedMusic = {
...currentSong,
playMusicUrl: newUrl,
expiredAt: Date.now() + 1800000 // 半小时后过期
};
// 更新播放器状态并开始播放
await setPlay(updatedMusic);
setPlayMusic(true);
return true;
} else {
return false;
}
} catch (error) {
console.error('重新解析失败:', error);
return false;
}
};
// 设置播放列表抽屉显示状态
const setPlayListDrawerVisible = (value: boolean) => {
playListDrawerVisible.value = value;
};
// 播放
const handlePause = async () => {
try {
const currentSound = audioService.getCurrentSound();
if (currentSound) {
currentSound.pause();
}
setPlayMusic(false);
} catch (error) {
console.error('暂停播放失败:', error);
}
}
return {
play,
isPlay,
@@ -1307,7 +1076,6 @@ export const usePlayerStore = defineStore('player', () => {
musicFull,
savedPlayProgress,
favoriteList,
playListDrawerVisible,
// 定时关闭相关
sleepTimer,
@@ -1325,7 +1093,6 @@ export const usePlayerStore = defineStore('player', () => {
currentPlayList,
currentPlayListIndex,
clearPlayAll,
setPlay,
setIsPlay,
nextPlay,
@@ -1340,9 +1107,6 @@ export const usePlayerStore = defineStore('player', () => {
addToFavorite,
removeFromFavorite,
removeFromPlayList,
playAudio,
reparseCurrentSong,
setPlayListDrawerVisible,
handlePause
playAudio
};
});

View File

@@ -36,8 +36,6 @@ export const useUserStore = defineStore('user', () => {
user.value = null;
localStorage.removeItem('user');
localStorage.removeItem('token');
// 刷新
window.location.reload();
} catch (error) {
console.error('登出失败:', error);
}

View File

@@ -42,9 +42,6 @@ export interface SongResult {
expiredAt?: number;
// 获取时间
createdAt?: number;
// 时长
duration?: number;
dt?: number;
}
export interface Song {

View File

@@ -1,5 +1,5 @@
// 音乐平台类型
export type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'gdmusic';
export type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube' | 'gdmusic';
// 默认平台列表
export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];

View File

@@ -11,12 +11,6 @@ import { showShortcutToast } from './shortcutToast';
let actionTimeout: NodeJS.Timeout | null = null;
const ACTION_DELAY = 300; // 毫秒
// 添加一个操作锁,记录最后一次操作的时间和动作
let lastActionInfo = {
action: '',
timestamp: 0
};
interface ShortcutConfig {
key: string;
enabled: boolean;
@@ -37,33 +31,17 @@ let appShortcuts: ShortcutsConfig = {};
* @param action 快捷键动作
*/
export async function handleShortcutAction(action: string) {
const now = Date.now();
// 如果存在未完成的动作,则忽略当前请求
if (actionTimeout) {
console.log('[AppShortcuts] 忽略快速连续的动作请求:', action);
console.log('忽略快速连续的动作请求:', action);
return;
}
// 检查是否是同一个动作的重复触发300ms内
if (lastActionInfo.action === action && now - lastActionInfo.timestamp < ACTION_DELAY) {
console.log(`[AppShortcuts] 忽略重复的 ${action} 动作,距上次仅 ${now - lastActionInfo.timestamp}ms`);
return;
}
// 更新最后一次操作信息
lastActionInfo = {
action,
timestamp: now
};
// 设置防抖锁
actionTimeout = setTimeout(() => {
actionTimeout = null;
}, ACTION_DELAY);
console.log(`[AppShortcuts] 执行动作: ${action}, 时间戳: ${now}`);
const playerStore = usePlayerStore();
const settingsStore = useSettingsStore();
@@ -115,19 +93,16 @@ export async function handleShortcutAction(action: string) {
case 'toggleFavorite': {
const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
const numericId = Number(playerStore.playMusic.id);
console.log(`[AppShortcuts] toggleFavorite 当前状态: ${isFavorite}, ID: ${numericId}`);
if (isFavorite) {
playerStore.removeFromFavorite(numericId);
console.log(`[AppShortcuts] 已从收藏中移除: ${numericId}`);
} else {
playerStore.addToFavorite(numericId);
console.log(`[AppShortcuts] 已添加到收藏: ${numericId}`);
}
showToast(
isFavorite
? t('player.playBar.unFavorite', { name: playerStore.playMusic.name })
: t('player.playBar.favorite', { name: playerStore.playMusic.name }),
isFavorite ? 'ri-heart-line' : 'ri-heart-fill'
? t('player.playBar.favorite', { name: playerStore.playMusic.name })
: t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
);
break;
}
@@ -139,9 +114,10 @@ export async function handleShortcutAction(action: string) {
console.error(`执行快捷键动作 ${action} 时出错:`, error);
} finally {
// 确保在出错时也能清除超时
clearTimeout(actionTimeout);
actionTimeout = null;
console.log(`[AppShortcuts] 动作完成: ${action}, 时间戳: ${Date.now()}, 耗时: ${Date.now() - now}ms`);
if (actionTimeout) {
clearTimeout(actionTimeout);
actionTimeout = null;
}
}
}

View File

@@ -17,7 +17,7 @@ const baseURL = window.electron
const request = axios.create({
baseURL,
timeout: 15000,
timeout: 5000,
withCredentials: true
});

View File

@@ -129,13 +129,20 @@ export const getLatestReleaseInfo = async (): Promise<GithubReleaseInfo | null>
try {
const token = import.meta.env.VITE_GITHUB_TOKEN;
const headers = {};
// 获取代理节点列表
const proxyHosts = await getProxyNodes();
// 构建 API URL 列表
const apiUrls = [
// 原始地址
'https://api.github.com/repos/algerkong/AlgerMusicPlayer/releases/latest',
// 使用代理节点
'https://music.alger.fun/package.json',
...proxyHosts.map(
(host) =>
`${host}/https://raw.githubusercontent.com/algerkong/AlgerMusicPlayer/dev_electron/package.json`
)
];
if (token) {

View File

@@ -73,7 +73,7 @@
<script setup lang="ts">
import { useDateFormat } from '@vueuse/core';
import { computed, onMounted, onUnmounted, ref, watch, nextTick, onActivated, onDeactivated } from 'vue';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
@@ -86,10 +86,6 @@ import { usePlayerStore } from '@/store';
import { IArtist } from '@/type/artist';
import { getImgUrl } from '@/utils';
defineOptions({
name: 'ArtistDetail'
});
const { t } = useI18n();
const route = useRoute();
const playerStore = usePlayerStore();
@@ -126,33 +122,10 @@ const albumsLoadMoreRef = ref<HTMLElement | null>(null);
let songsObserver: IntersectionObserver | null = null;
let albumsObserver: IntersectionObserver | null = null;
// 添加上一个ID的引用用于比较
const previousId = ref<string | null>(null);
// 简化缓存机制
const artistDataCache = new Map();
// 单个缓存键函数
const getCacheKey = (id: string | number) => `artist_${id}`;
// 加载歌手信息
const loadArtistInfo = async () => {
if (!artistId.value) return;
// 简化缓存检查
const cacheKey = getCacheKey(artistId.value);
if (artistDataCache.has(cacheKey)) {
console.log('使用缓存数据');
const cachedData = artistDataCache.get(cacheKey);
artistInfo.value = cachedData.artistInfo;
songs.value = cachedData.songs;
albums.value = cachedData.albums;
songPage.value = cachedData.songPage;
albumPage.value = cachedData.albumPage;
return;
}
// 加载新数据
loading.value = true;
try {
const info = await getArtistDetail(artistId.value);
@@ -162,15 +135,6 @@ const loadArtistInfo = async () => {
// 重置分页并加载初始数据
resetPagination();
await Promise.all([loadSongs(), loadAlbums()]);
// 保存到缓存
artistDataCache.set(cacheKey, {
artistInfo: artistInfo.value,
songs: [...songs.value],
albums: [...albums.value],
songPage: { ...songPage.value },
albumPage: { ...albumPage.value }
});
} catch (error) {
console.error('加载歌手信息失败:', error);
} finally {
@@ -277,99 +241,79 @@ const handlePlay = () => {
);
};
// 简化观察器设置
const setupObservers = () => {
// 清理之前的观察器
// 设置无限滚动观察器
const setupIntersectionObservers = () => {
// 清除现有的观察器
if (songsObserver) songsObserver.disconnect();
if (albumsObserver) albumsObserver.disconnect();
// 创建观察器(如果不存在)
if (!songsObserver) {
songsObserver = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && songPage.value.hasMore) {
loadSongs();
}
},
{ threshold: 0.1 }
);
}
if (!albumsObserver) {
albumsObserver = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && albumPage.value.hasMore) {
loadAlbums();
}
},
{ threshold: 0.1 }
);
}
// 观察当前标签页的元素
nextTick(() => {
if (activeTab.value === 'songs' && songsLoadMoreRef.value) {
songsObserver?.observe(songsLoadMoreRef.value);
} else if (activeTab.value === 'albums' && albumsLoadMoreRef.value) {
albumsObserver?.observe(albumsLoadMoreRef.value);
// 创建歌曲观察器
songsObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !songLoading.value && songPage.value.hasMore) {
loadSongs();
}
}, { threshold: 0.1 });
// 创建专辑观察器
albumsObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !albumLoading.value && albumPage.value.hasMore) {
loadAlbums();
}
}, { threshold: 0.1 });
// 监听标签页更改,重新设置观察器
watch(activeTab, (newTab) => {
nextTick(() => {
if (newTab === 'songs' && songsLoadMoreRef.value && songPage.value.hasMore) {
songsObserver?.observe(songsLoadMoreRef.value);
} else if (newTab === 'albums' && albumsLoadMoreRef.value && albumPage.value.hasMore) {
albumsObserver?.observe(albumsLoadMoreRef.value);
}
});
});
// 监听引用元素的变化
watch(songsLoadMoreRef, (el) => {
if (el && activeTab.value === 'songs' && songPage.value.hasMore) {
songsObserver?.observe(el);
}
});
watch(albumsLoadMoreRef, (el) => {
if (el && activeTab.value === 'albums' && albumPage.value.hasMore) {
albumsObserver?.observe(el);
}
});
};
// 监听标签切换
watch(activeTab, () => {
setupObservers();
});
// 监听引用元素的变化
watch([songsLoadMoreRef, albumsLoadMoreRef], () => {
setupObservers();
});
onActivated(() => {
// 确保当前路由是艺术家详情页
if (route.name === 'artistDetail') {
const currentId = route.params.id as string;
// 首次加载或ID变化时加载数据
if (!previousId.value || previousId.value !== currentId) {
console.log('ID已变化加载新数据');
previousId.value = currentId;
activeTab.value = 'songs';
loadArtistInfo();
}
// 重新设置观察器
setupObservers();
}
});
onMounted(() => {
// 首次挂载时加载数据
if (route.params.id) {
previousId.value = route.params.id as string;
loadArtistInfo();
setupObservers();
}
loadArtistInfo();
// 添加nextTick以确保DOM已更新
nextTick(() => {
setupIntersectionObservers();
});
});
onDeactivated(() => {
// 断开观察器但不清除引用
onUnmounted(() => {
// 清理观察器
if (songsObserver) songsObserver.disconnect();
if (albumsObserver) albumsObserver.disconnect();
});
onUnmounted(() => {
// 完全清理观察器
if (songsObserver) {
songsObserver.disconnect();
songsObserver = null;
// 监听路由参数变化
watch(
() => route.params.id,
(newId) => {
if (newId) {
loadArtistInfo();
// 添加nextTick以确保DOM已更新
nextTick(() => {
setupIntersectionObservers();
});
}
}
if (albumsObserver) {
albumsObserver.disconnect();
albumsObserver = null;
}
});
);
</script>
<style lang="scss" scoped>

View File

@@ -425,7 +425,7 @@ const playCurrentAudio = async () => {
// 播放当前选中的分P
console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
playerStore.setPlay(currentAudio);
playerStore.setPlayMusic(currentAudio);
// 播放后通知用户已开始播放
message.success('已开始播放');

File diff suppressed because it is too large Load Diff

View File

@@ -31,7 +31,7 @@
class="recommend-item"
:class="setAnimationClass('animate__bounceIn')"
:style="getItemAnimationDelay(index)"
@click.stop="openPlaylist(item)"
@click.stop="selectRecommendItem(item)"
>
<div class="recommend-item-img">
<n-image
@@ -57,15 +57,22 @@
</div>
<div v-if="!hasMore && recommendList.length > 0" class="no-more">没有更多了</div>
</n-scrollbar>
<music-list
v-model:show="showMusic"
v-model:loading="listLoading"
:name="recommendItem?.name || ''"
:song-list="listDetail?.playlist.tracks || []"
:list-info="listDetail?.playlist"
/>
</div>
</template>
<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { getPlaylistCategory } from '@/api/home';
import { getListByCat, getListDetail } from '@/api/list';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
import MusicList from '@/components/MusicList.vue';
import type { IRecommendItem } from '@/type/list';
import type { IListDetail } from '@/type/listDetail';
import type { IPlayListSort } from '@/type/playlist';
@@ -78,6 +85,7 @@ defineOptions({
const TOTAL_ITEMS = 42; // 每页数量
const recommendList = ref<any[]>([]);
const showMusic = ref(false);
const page = ref(0);
const hasMore = ref(true);
const isLoadingMore = ref(false);
@@ -92,25 +100,15 @@ const recommendItem = ref<IRecommendItem | null>();
const listDetail = ref<IListDetail | null>();
const listLoading = ref(true);
const router = useRouter();
const openPlaylist = (item: any) => {
recommendItem.value = item;
const selectRecommendItem = async (item: IRecommendItem) => {
listLoading.value = true;
getListDetail(item.id).then(res => {
listDetail.value = res.data;
listLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
name: item.name,
songList: res.data.playlist.tracks || [],
listInfo: res.data.playlist,
canRemove: false
});
});
recommendItem.value = null;
listDetail.value = null;
showMusic.value = true;
recommendItem.value = item;
const { data } = await getListDetail(item.id);
listDetail.value = data;
listLoading.value = false;
};
const route = useRoute();

View File

@@ -682,7 +682,7 @@ body,
--text-secondary: #ffffffea;
--highlight-color: #1db954;
--control-bg: rgba(124, 124, 124, 0.3);
&:hover:not(.lyric_lock) {
&:hover {
background: rgba(44, 44, 44, 0.466) !important;
}
}
@@ -692,7 +692,7 @@ body,
--text-secondary: #39393989;
--highlight-color: #1db954;
--control-bg: rgba(255, 255, 255, 0.3);
&:hover:not(.lyric_lock) {
&:hover {
background: rgba(0, 0, 0, 0.434) !important;
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -116,7 +116,8 @@ onMounted(async () => {
const handleShowMv = async (item: IMvItem, index: number) => {
playerStore.setIsPlay(false);
audioService.pause();
playerStore.setPlayMusic(false);
audioService.getCurrentSound()?.pause();
showMv.value = true;
currentIndex.value = index;
playMvItem.value = item;

View File

@@ -37,12 +37,6 @@
@click="searchDetail = null"
></i>
{{ hotKeyword }}
<div v-if="searchDetail?.songs?.length" class="title-play-all">
<div class="play-all-btn" @click="handlePlayAll">
<i class="ri-play-circle-fill"></i>
<span>{{ t('search.button.playAll') }}</span>
</div>
</div>
</div>
<div v-loading="searchDetailLoading" class="search-list-box">
<template v-if="searchDetail">
@@ -52,7 +46,7 @@
v-for="(item, index) in searchDetail?.bilibili"
:key="item.bvid"
:class="setAnimationClass('animate__bounceInRight')"
:style="getSearchListAnimation(index)"
:style="setAnimationDelay(index, 50)"
>
<bilibili-item :item="item" @play="handlePlayBilibili" />
</div>
@@ -68,9 +62,9 @@
v-for="(item, index) in searchDetail?.songs"
:key="item.id"
:class="setAnimationClass('animate__bounceInRight')"
:style="getSearchListAnimation(index)"
:style="setAnimationDelay(index, 50)"
>
<song-item :item="item" @play="handlePlay" :is-next="true" />
<song-item :item="item" @play="handlePlay" />
</div>
<template v-for="(list, key) in searchDetail">
<template v-if="key.toString() !== 'songs'">
@@ -79,7 +73,7 @@
:key="item.id"
class="mb-3"
:class="setAnimationClass('animate__bounceInRight')"
:style="getSearchListAnimation(index)"
:style="setAnimationDelay(index, 50)"
>
<search-item :item="item" />
</div>
@@ -110,7 +104,7 @@
v-for="(item, index) in searchHistory"
:key="index"
:class="setAnimationClass('animate__bounceIn')"
:style="getSearchListAnimation(index)"
:style="setAnimationDelay(index, 50)"
class="search-history-item"
round
closable
@@ -168,10 +162,6 @@ const hasMore = ref(true);
const isLoadingMore = ref(false);
const currentKeyword = ref('');
const getSearchListAnimation = (index: number) => {
return setAnimationDelay(index % ITEMS_PER_PAGE, 50);
};
// 从 localStorage 加载搜索历史
const loadSearchHistory = () => {
const history = localStorage.getItem('searchHistory');
@@ -408,9 +398,9 @@ watch(
{ immediate: true }
);
const handlePlay = (item: any) => {
// 添加到下一首
playerStore.addToNextPlay(item);
const handlePlay = () => {
const tracks = searchDetail.value?.songs || [];
playerStore.setPlayList(tracks);
};
// 点击搜索历史
@@ -428,18 +418,6 @@ const handlePlayBilibili = (item: IBilibiliSearchResult) => {
// 使用路由导航到B站播放页面
router.push(`/bilibili/${item.bvid}`);
};
const handlePlayAll = () => {
if (!searchDetail.value?.songs?.length) return;
// 设置播放列表为搜索结果中的所有歌曲
playerStore.setPlayList(searchDetail.value.songs);
// 开始播放第一首歌
if (searchDetail.value.songs[0]) {
playerStore.setPlay(searchDetail.value.songs[0]);
}
};
</script>
<style lang="scss" scoped>
@@ -491,21 +469,8 @@ const handlePlayAll = () => {
}
.title {
@apply text-xl font-bold my-2 mx-4 flex items-center;
@apply text-xl font-bold my-2 mx-4;
@apply text-gray-900 dark:text-white;
&-play-all {
@apply ml-auto;
}
}
.play-all-btn {
@apply flex items-center gap-1 px-3 py-1 rounded-full cursor-pointer transition-all;
@apply text-sm font-normal text-gray-900 dark:text-white hover:bg-light-300 dark:hover:bg-dark-300 hover:text-green-500;
i {
@apply text-xl;
}
}
.search-history {

View File

@@ -40,7 +40,7 @@
<language-switcher />
</div>
<div class="set-item" v-if="isElectron">
<div class="set-item">
<div>
<div class="set-item-title">{{ t('settings.basic.font') }}</div>
<div class="set-item-content">{{ t('settings.basic.fontDesc') }}</div>
@@ -103,9 +103,9 @@
</div>
</div>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-400" v-if="!isMobile">{{ setData.animationSpeed }}x</span>
<div>
<template v-if="!isMobile"><n-slider
<span class="text-sm text-gray-400">{{ setData.animationSpeed }}x</span>
<div class="w-60">
<n-slider
v-model:value="setData.animationSpeed"
:min="0.1"
:max="3"
@@ -117,19 +117,7 @@
}"
:disabled="setData.noAnimate"
class="w-40"
/></template>
<template v-else>
<n-input-number
v-model:value="setData.animationSpeed"
:min="0.1"
:max="3"
:step="0.1"
:placeholder="t('settings.basic.animationSpeedPlaceholder')"
:disabled="setData.noAnimate"
button-placement="both"
style="width: 100px"
/>
</template>
/>
</div>
</div>
</div>
@@ -140,42 +128,28 @@
<div id="playback" ref="playbackRef" class="settings-section">
<div class="settings-section-title">{{ t('settings.sections.playback') }}</div>
<div class="settings-section-content">
<div>
<div class="set-item">
<div>
<div class="set-item-title">{{ t('settings.playback.quality') }}</div>
<div class="set-item-content">
{{ t('settings.playback.qualityDesc') }}
</div>
</div>
<n-select
v-model:value="setData.musicQuality"
:options="[
{ label: t('settings.playback.qualityOptions.standard'), value: 'standard' },
{ label: t('settings.playback.qualityOptions.higher'), value: 'higher' },
{ label: t('settings.playback.qualityOptions.exhigh'), value: 'exhigh' },
{ label: t('settings.playback.qualityOptions.lossless'), value: 'lossless' },
{ label: t('settings.playback.qualityOptions.hires'), value: 'hires' },
{ label: t('settings.playback.qualityOptions.jyeffect'), value: 'jyeffect' },
{ label: t('settings.playback.qualityOptions.sky'), value: 'sky' },
{ label: t('settings.playback.qualityOptions.dolby'), value: 'dolby' },
{ label: t('settings.playback.qualityOptions.jymaster'), value: 'jymaster' }
]"
style="width: 160px"
/>
</div>
<!-- 网易云 QQ 音乐 酷我 酷狗 会员购买链接 -->
<div class="p-2 bg-light-100 dark:bg-dark-100 rounded-lg mt-2">
<div>大家还是需要支持正版本软件只做开源探讨</div>
<div class="mt-2">各大音乐会员购买链接</div>
<div class="flex gap-5 flex-wrap">
<a class="text-green-400 hover:text-green-500" href="https://music.163.com/store/vip" target="_blank">网易云音乐会员</a>
<a class="text-green-400 hover:text-green-500" href="https://y.qq.com/portal/vipportal/" target="_blank">QQ音乐会员</a>
<a class="text-green-400 hover:text-green-500" href="https://vip.kugou.com/" target="_blank">酷狗音乐会员</a>
<a class="text-green-400 hover:text-green-500" href="https://vip1.kuwo.cn/" target="_blank">酷我音乐会员</a>
</div>
<div class="set-item">
<div>
<div class="set-item-title">{{ t('settings.playback.quality') }}</div>
<div class="set-item-content">{{ t('settings.playback.qualityDesc') }}</div>
</div>
<n-select
v-model:value="setData.musicQuality"
:options="[
{ label: t('settings.playback.qualityOptions.standard'), value: 'standard' },
{ label: t('settings.playback.qualityOptions.higher'), value: 'higher' },
{ label: t('settings.playback.qualityOptions.exhigh'), value: 'exhigh' },
{ label: t('settings.playback.qualityOptions.lossless'), value: 'lossless' },
{ label: t('settings.playback.qualityOptions.hires'), value: 'hires' },
{ label: t('settings.playback.qualityOptions.jyeffect'), value: 'jyeffect' },
{ label: t('settings.playback.qualityOptions.sky'), value: 'sky' },
{ label: t('settings.playback.qualityOptions.dolby'), value: 'dolby' },
{ label: t('settings.playback.qualityOptions.jymaster'), value: 'jymaster' }
]"
style="width: 160px"
/>
</div>
<div class="set-item" v-if="isElectron">
<div>
<div class="set-item-title">{{ t('settings.playback.musicSources') }}</div>
@@ -209,17 +183,6 @@
</n-button>
</div>
<div class="set-item" v-if="platform === 'darwin'">
<div>
<div class="set-item-title">{{ t('settings.playback.showStatusBar') }}</div>
<div class="set-item-content">{{ t('settings.playback.showStatusBarContent') }}</div>
</div>
<n-switch v-model:value="setData.showTopAction">
<template #checked>{{ t('common.on') }}</template>
<template #unchecked>{{ t('common.off') }}</template>
</n-switch>
</div>
<div class="set-item">
<div>
<div class="set-item-title">{{ t('settings.playback.autoPlay') }}</div>
@@ -444,7 +407,7 @@
<!-- 捐赠支持 -->
<div id="donation" ref="donationRef" class="settings-section">
<div class="settings-section-title">{{ t('settings.sectio ns.donation') }}</div>
<div class="settings-section-title">{{ t('settings.sections.donation') }}</div>
<div class="settings-section-content">
<div class="set-item">
<div>
@@ -523,9 +486,7 @@ import { type Platform } from '@/types/music';
import config from '../../../../package.json';
// 所有平台默认值
const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
const platform = window.electron ? window.electron.ipcRenderer.sendSync('get-platform') : 'web';
const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
const settingsStore = useSettingsStore();
const userStore = useUserStore();

View File

@@ -1,178 +0,0 @@
<template>
<div class="toplist-page">
<n-scrollbar class="toplist-container" style="height: 100%" :size="100">
<div v-loading="loading" class="toplist-list">
<div
v-for="(item, index) in topList"
:key="item.id"
class="toplist-item"
:class="setAnimationClass('animate__bounceIn')"
:style="getItemAnimationDelay(index)"
@click.stop="openToplist(item)"
>
<div class="toplist-item-img">
<n-image
class="toplist-item-img-img"
:src="getImgUrl(item.coverImgUrl, '300y300')"
width="200"
height="200"
lazy
preview-disabled
/>
<div class="top">
<div class="play-count">{{ formatNumber(item.playCount) }}</div>
<i class="iconfont icon-videofill"></i>
</div>
</div>
<div class="toplist-item-title">{{ item.name }}</div>
<div class="toplist-item-desc">{{ item.updateFrequency || '' }}</div>
</div>
</div>
<!-- 加载状态 -->
<div v-if="loading" class="loading-more">
<n-spin size="small" />
<span class="ml-2">加载中...</span>
</div>
</n-scrollbar>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { getToplist, getListDetail } from '@/api/list';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
import type { IListDetail } from '@/type/listDetail';
import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
defineOptions({
name: 'Toplist'
});
const topList = ref<any[]>([]);
// 计算每个项目的动画延迟
const getItemAnimationDelay = (index: number) => {
return setAnimationDelay(index, 30);
};
const listDetail = ref<IListDetail | null>();
const listLoading = ref(true);
const router = useRouter();
const openToplist = (item: any) => {
listLoading.value = true;
getListDetail(item.id).then(res => {
listDetail.value = res.data;
listLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
name: item.name,
songList: res.data.playlist.tracks || [],
listInfo: res.data.playlist,
canRemove: false
});
});
};
const loading = ref(false);
const loadToplist = async () => {
loading.value = true;
try {
const { data } = await getToplist();
topList.value = data.list || [];
} catch (error) {
console.error('加载排行榜列表失败:', error);
} finally {
loading.value = false;
}
};
onMounted(() => {
loadToplist();
});
</script>
<style lang="scss" scoped>
.toplist-page {
@apply relative h-full w-full;
@apply bg-light dark:bg-black;
}
.toplist-container {
@apply p-4;
}
.toplist-list {
@apply grid gap-x-8 gap-y-6 pb-28 pr-4;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.toplist-item {
@apply flex flex-col;
&-img {
@apply rounded-xl overflow-hidden relative w-full aspect-square;
&-img {
@apply block w-full h-full;
}
img {
@apply absolute top-0 left-0 w-full h-full object-cover rounded-xl;
}
&:hover img {
@apply hover:scale-110 transition-all duration-300 ease-in-out;
}
.top {
@apply absolute w-full h-full top-0 left-0 flex justify-center items-center transition-all duration-300 ease-in-out cursor-pointer;
@apply bg-black bg-opacity-50;
opacity: 0;
i {
@apply text-5xl text-white transition-all duration-500 ease-in-out opacity-0;
}
&:hover {
@apply opacity-100;
}
&:hover i {
@apply transform scale-150 opacity-100;
}
.play-count {
@apply absolute top-2 left-2 text-sm text-white;
}
}
}
&-title {
@apply mt-2 text-sm line-clamp-1 font-bold;
@apply text-gray-900 dark:text-white;
}
&-desc {
@apply mt-1 text-xs line-clamp-1;
@apply text-gray-500 dark:text-gray-400;
}
}
.loading-more {
@apply flex justify-center items-center py-4;
@apply text-gray-500 dark:text-gray-400;
}
.mobile {
.toplist-list {
@apply px-4 gap-4;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
</style>

View File

@@ -63,7 +63,7 @@
class="playlist-item"
:class="setAnimationClass('animate__fadeInUp')"
:style="setAnimationDelay(index, 50)"
@click="openPlaylist(item)"
@click="showPlaylist(item.id, item.name)"
>
<div class="playlist-cover">
<n-image
@@ -120,6 +120,14 @@
<div class="pb-20"></div>
</div>
</n-scrollbar>
<music-list
v-model:show="isShowList"
:name="currentList?.name || ''"
:song-list="currentList?.tracks || []"
:list-info="currentList"
:loading="listLoading"
/>
</div>
</template>
@@ -132,7 +140,7 @@ import { useRoute, useRouter } from 'vue-router';
import { getListDetail } from '@/api/list';
import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
import SongItem from '@/components/common/SongItem.vue';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
import MusicList from '@/components/MusicList.vue';
import { usePlayerStore } from '@/store/modules/player';
import type { Playlist } from '@/type/listDetail';
import type { IUserDetail } from '@/type/user';
@@ -158,6 +166,7 @@ const recordList = ref<any[]>([]);
const loading = ref(true);
// 歌单详情相关
const isShowList = ref(false);
const currentList = ref<Playlist>();
const listLoading = ref(false);
@@ -199,23 +208,21 @@ const loadUserData = async () => {
}
};
// 替换显示歌单的方法
const openPlaylist = (item: any) => {
// 展示歌单
const showPlaylist = async (id: number, name: string) => {
isShowList.value = true;
listLoading.value = true;
getListDetail(item.id).then(res => {
currentList.value = res.data.playlist;
try {
currentList.value = { id, name } as Playlist;
const { data } = await getListDetail(id);
currentList.value = data.playlist;
} catch (error) {
console.error('加载歌单详情失败:', error);
message.error('加载歌单详情失败');
} finally {
listLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
name: item.name,
songList: res.data.playlist.tracks || [],
listInfo: res.data.playlist,
canRemove: false
});
});
}
};
// 播放歌曲

View File

@@ -34,7 +34,7 @@
v-for="(item, index) in playList"
:key="index"
class="play-list-item"
@click="openPlaylist(item)"
@click="showPlaylist(item.id, item.name)"
>
<n-image
:src="getImgUrl(item.coverImgUrl, '50y50')"
@@ -82,6 +82,15 @@
</n-scrollbar>
</div>
</div>
<music-list
v-model:show="isShowList"
:name="list?.name || ''"
:song-list="list?.tracks || []"
:list-info="list"
:loading="listLoading"
:can-remove="true"
@remove-song="handleRemoveFromPlaylist"
/>
</div>
</template>
@@ -92,10 +101,11 @@ import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { getListDetail } from '@/api/list';
import { updatePlaylistTracks } from '@/api/music';
import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
import PlayBottom from '@/components/common/PlayBottom.vue';
import SongItem from '@/components/common/SongItem.vue';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
import MusicList from '@/components/MusicList.vue';
import { usePlayerStore } from '@/store/modules/player';
import { useUserStore } from '@/store/modules/user';
import type { Playlist } from '@/type/listDetail';
@@ -115,6 +125,7 @@ const playList = ref<any[]>([]);
const recordList = ref();
const infoLoading = ref(false);
const mounted = ref(true);
const isShowList = ref(false);
const list = ref<Playlist>();
const listLoading = ref(false);
const message = useMessage();
@@ -223,23 +234,47 @@ onMounted(() => {
checkLoginStatus() && loadData();
});
// 替换显示歌单的方法
const openPlaylist = (item: any) => {
// 展示歌单
const showPlaylist = async (id: number, name: string) => {
isShowList.value = true;
listLoading.value = true;
getListDetail(item.id).then(res => {
list.value = res.data.playlist;
listLoading.value = false;
navigateToMusicList(router, {
id: item.id,
type: 'playlist',
name: item.name,
songList: res.data.playlist.tracks || [],
listInfo: res.data.playlist,
canRemove: true // 保留可移除功能
list.value = {
name,
id
} as Playlist;
await loadPlaylistDetail(id);
listLoading.value = false;
};
// 加载歌单详情
const loadPlaylistDetail = async (id: number) => {
const { data } = await getListDetail(id);
list.value = data.playlist;
};
// 从歌单中删除歌曲
const handleRemoveFromPlaylist = async (songId: number) => {
if (!list.value?.id) return;
try {
const res = await updatePlaylistTracks({
op: 'del',
pid: list.value.id,
tracks: songId.toString()
});
});
if (res.status === 200) {
message.success(t('user.message.deleteSuccess'));
// 重新加载歌单详情
await loadPlaylistDetail(list.value.id);
} else {
throw new Error(res.data?.msg || t('user.message.deleteFailed'));
}
} catch (error: any) {
console.error('删除歌曲失败:', error);
message.error(error.message || t('user.message.deleteFailed'));
}
};
const handlePlay = () => {