Compare commits

...

9 Commits

Author SHA1 Message Date
algerkong
7891bf45fd feat: 更新版本至 4.8.2 2025-06-28 18:16:19 +08:00
algerkong
2f339b1373 🐞 fix: 修复在歌词界面添加到歌单抽屉被遮挡问题 2025-06-28 17:46:24 +08:00
algerkong
749a2a69c4 feat: 重新设计歌词页面的迷你播放栏 2025-06-28 17:40:57 +08:00
algerkong
5b97010b32 🐞 fix: 修复解析错误问题, 优化播放效果 2025-06-28 17:31:37 +08:00
algerkong
694dff425b feat: 添加清除自定义音源功能 2025-06-28 17:26:07 +08:00
algerkong
e8cf253567 feat: 更新版本至 4.8.1 2025-06-27 18:59:40 +08:00
algerkong
4d831777f1 🔧 chore: 移除统计,更新支持的音乐源列表 2025-06-27 18:49:37 +08:00
algerkong
95c255d2ba 🐞 fix: 修复网页端和快捷键无法调整音量的问题 2025-06-23 20:58:08 +08:00
algerkong
d739a6701b feat: 添加通知抽屉组件,优化用户体验并支持多平台提示 2025-06-23 20:56:50 +08:00
34 changed files with 1320 additions and 372 deletions

View File

@@ -1,15 +1,27 @@
# 更新日志
## v4.8.2
### 🎨 优化
- 重新设计pc端歌词页面Mini播放栏
- 添加清除歌曲自定义解析功能
### 🐛 Bug 修复
- 修复歌曲单独解析失败问题
- 修复歌词页面加入歌单抽屉被遮挡问题
## v4.8.1
### 🐛 Bug 修复
- 修复无法快捷键调整问题
### 🎨 优化
- 优化音乐资源解析
- 去除无用代码,优化加载速度
## v4.8.0
> 如果更新遇到问题,请前往 <a href="http://donate.alger.fun/download" target="_blank">下载 AlgerMusicPlayer</a>
> 请我喝咖啡(支持作者) ☕️ <a href="http://donate.alger.fun/donate" target="_blank" style="color: red; font-weight: bold;">赏你</a>
> 帮我点个 star <a href="https://github.com/algerkong/AlgerMusicPlayer" target="_blank">github star</a>
> 微信公众号 微信搜索 <span style="font-weight: bold;">AlgerMusic</span>
> QQ频道 AlgerMusic <a href="https://pd.qq.com/s/cs056n33q?b=5" target="_blank">加入频道</a>
### ✨ 新功能
- 增强移动端播放页面效果,添加播放模式选择,添加横屏模式,添加播放列表功能 ([81b61e4](https://github.com/algerkong/AlgerMusicPlayer/commit/81b61e4))([0d89e15](https://github.com/algerkong/AlgerMusicPlayer/commit/0d89e15))([9345805](https://github.com/algerkong/AlgerMusicPlayer/commit/9345805))

View File

@@ -44,12 +44,11 @@
- 🎼 音乐功能
- 支持歌单、MV、专辑等完整音乐服务
- 灰色音乐资源解析(基于 @unblockneteasemusic/server
- 音乐单独解析
- 音乐资源解析(基于 @unblockneteasemusic/server
- EQ均衡器
- 定时播放 远程控制播放 倍速播放
- 高品质音乐
- 音乐文件下载(支持右键下载和批量下载, 附带歌词封面等信息)
- 音乐文件下载
- 搜索 MV 音乐 专辑 歌单 bilibili
- 音乐单独选择音源解析
- 🚀 技术特性

View File

@@ -1,6 +1,6 @@
{
"name": "AlgerMusicPlayer",
"version": "4.8.0",
"version": "4.8.2",
"description": "Alger Music Player",
"author": "Alger <algerkc@qq.com>",
"main": "./out/main/index.js",

View File

@@ -38,7 +38,8 @@ export default {
failed: 'Reparse failed',
warning: 'Please select a music source',
bilibiliNotSupported: 'Bilibili videos do not support reparsing',
processing: 'Processing...'
processing: 'Processing...',
clear: 'Clear Custom Source'
},
playBar: {
expand: 'Expand Lyrics',

View File

@@ -38,7 +38,8 @@ export default {
failed: '重新解析失败',
warning: '请选择一个音源',
bilibiliNotSupported: 'B站视频不支持重新解析',
processing: '解析中...'
processing: '解析中...',
clear: '清除自定义音源'
},
playBar: {
expand: '展开歌词',

View File

@@ -10,7 +10,6 @@ import { initializeFileManager } from './modules/fileManager';
import { initializeFonts } from './modules/fonts';
import { initializeRemoteControl } from './modules/remoteControl';
import { initializeShortcuts, registerShortcuts } from './modules/shortcuts';
import { initializeStats, setupStatsHandlers } from './modules/statsService';
import { initializeTray, updateCurrentSong, updatePlayState, updateTrayMenu } from './modules/tray';
import { setupUpdateHandlers } from './modules/update';
import { createMainWindow, initializeWindowManager } from './modules/window';
@@ -51,12 +50,6 @@ function initialize() {
// 初始化托盘
initializeTray(iconPath, mainWindow);
// 初始化统计服务
initializeStats();
// 设置统计相关的IPC处理程序
setupStatsHandlers(ipcMain);
// 启动音乐API
startMusicApi();

View File

@@ -1,122 +0,0 @@
import axios from 'axios';
import { app } from 'electron';
import Store from 'electron-store';
import { getDeviceId, getSystemInfo } from './deviceInfo';
const store = new Store();
// 统计服务配置
const STATS_API_URL = 'http://donate.alger.fun/state/api/stats';
/**
* 记录应用安装/启动
*/
export async function recordInstallation(): Promise<void> {
try {
const deviceId = getDeviceId();
const systemInfo = getSystemInfo();
// 发送请求到统计服务器
await axios.post(`${STATS_API_URL}/installation`, {
deviceId,
osType: systemInfo.osType,
osVersion: systemInfo.osVersion,
appVersion: systemInfo.appVersion
});
console.log('应用启动统计已记录');
// 记录最后一次启动时间
store.set('lastStartTime', new Date().toISOString());
} catch (error) {
console.error('记录应用启动统计失败:', error);
}
}
/**
* 设置 IPC 处理程序以接收渲染进程的统计请求
* @param ipcMain Electron IPC主对象
*/
export function setupStatsHandlers(ipcMain: Electron.IpcMain): void {
// 处理页面访问统计
ipcMain.handle('record-visit', async (_, page: string, userId?: string) => {
try {
const deviceId = getDeviceId();
await axios.post(`${STATS_API_URL}/visit`, {
deviceId,
userId,
page
});
return { success: true };
} catch (error) {
console.error('记录页面访问统计失败:', error);
return { success: false, error: (error as Error).message };
}
});
// 处理播放统计
ipcMain.handle(
'record-play',
async (
_,
songData: {
userId: string | null;
songId: string | number;
songName: string;
artistName: string;
duration?: number;
completedPlay?: boolean;
}
) => {
try {
const { songId, songName, artistName, duration = 0, completedPlay = false } = songData;
const deviceId = getDeviceId();
await axios.post(`${STATS_API_URL}/play`, {
deviceId,
userId: songData.userId,
songId: songId.toString(),
songName,
artistName,
duration,
completedPlay
});
return { success: true };
} catch (error) {
console.error('记录播放统计失败:', error);
return { success: false, error: (error as Error).message };
}
}
);
// 处理获取统计摘要
ipcMain.handle('get-stats-summary', async () => {
try {
const response = await axios.get(`${STATS_API_URL}/summary`);
return response.data;
} catch (error) {
console.error('获取统计摘要失败:', error);
throw error;
}
});
}
/**
* 应用启动时初始化统计服务
*/
export function initializeStats(): void {
// 记录应用启动统计
recordInstallation().catch((error) => {
console.error('初始化统计服务失败:', error);
});
// 注册应用退出时的回调
app.on('will-quit', () => {
// 可以在这里添加应用退出时的统计逻辑
console.log('应用退出');
});
}

View File

@@ -23,7 +23,7 @@
"alwaysShowDownloadButton": false,
"unlimitedDownload": false,
"enableMusicUnblock": true,
"enabledMusicSources": ["migu", "kugou", "pyncmd", "bilibili", "kuwo"],
"enabledMusicSources": ["migu", "kugou", "pyncmd", "bilibili"],
"showTopAction": false,
"contentZoomFactor": 1
}

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' | 'bilibili';
interface SongData {
name: string;
@@ -30,7 +30,50 @@ interface UnblockResult {
}
// 所有可用平台
export const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'kuwo', 'bilibili'];
export const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili'];
/**
* 确保对象数据结构完整处理null或undefined的情况
* @param data 需要处理的数据对象
*/
function ensureDataStructure(data: any): any {
// 如果数据本身为空,则返回一个基本结构
if (!data) {
return {
name: '',
artists: [],
album: { name: '' }
};
}
// 确保name字段存在
if (data.name === undefined || data.name === null) {
data.name = '';
}
// 确保artists字段存在且为数组
if (!data.artists || !Array.isArray(data.artists)) {
data.artists = data.ar && Array.isArray(data.ar) ? data.ar : [];
}
// 确保artists中的每个元素都有name属性
if (data.artists.length > 0) {
data.artists = data.artists.map(artist => {
return artist ? { name: artist.name || '' } : { name: '' };
});
}
// 确保album对象存在并有name属性
if (!data.album || typeof data.album !== 'object') {
data.album = data.al && typeof data.al === 'object' ? data.al : { name: '' };
}
if (!data.album.name) {
data.album.name = '';
}
return data;
}
/**
* 音乐解析函数
@@ -46,16 +89,18 @@ const unblockMusic = async (
retryCount = 1,
enabledPlatforms?: Platform[]
): Promise<UnblockResult> => {
// 过滤 enabledPlatforms确保只包含 ALL_PLATFORMS 中存在的平台
const filteredPlatforms = enabledPlatforms
? enabledPlatforms.filter(platform => ALL_PLATFORMS.includes(platform))
: ALL_PLATFORMS;
songData.album = songData.album || songData.al;
songData.artists = songData.artists || songData.ar;
// 处理歌曲数据,确保数据结构完整
const processedSongData = ensureDataStructure(songData);
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), filteredPlatforms, processedSongData);
const result: UnblockResult = {
data: {
data,

View File

@@ -47,11 +47,7 @@ const api = {
'get-system-fonts',
'get-cached-lyric',
'cache-lyric',
'clear-lyric-cache',
// 统计相关
'record-visit',
'record-play',
'get-stats-summary'
'clear-lyric-cache'
];
if (validChannels.includes(channel)) {
return ipcRenderer.invoke(channel, ...args);

View File

@@ -4,6 +4,7 @@
<n-dialog-provider>
<n-message-provider>
<router-view></router-view>
<traffic-warning-drawer v-if="!isElectron"></traffic-warning-drawer>
</n-message-provider>
</n-dialog-provider>
</n-config-provider>
@@ -17,6 +18,8 @@ import { computed, nextTick, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import TrafficWarningDrawer from '@/components/TrafficWarningDrawer.vue';
import homeRouter from '@/router/home';
import { useMenuStore } from '@/store/modules/menu';
import { usePlayerStore } from '@/store/modules/player';

View File

@@ -73,9 +73,8 @@ export const parseFromGDMusic = async (
throw new Error('搜索查询过短');
}
// 所有可用的音乐源 netease、kuwo、joox、tidal
const allSources = [
'kuwo', 'joox', 'tidal', 'netease'
// 所有可用的音乐源 netease、joox、tidal
const allSources = ['joox', 'tidal', 'netease'
] as MusicSourceType[];
console.log('GD音乐台开始搜索:', searchQuery);

View File

@@ -82,6 +82,66 @@ export const getMusicLrc = async (id: number) => {
}
};
/**
* 从Bilibili获取音频URL
* @param data 歌曲数据
* @returns 解析结果
*/
const getBilibiliAudio = async (data: SongResult) => {
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 searchQuery = [songName, artistName, albumName].filter(Boolean).join(' ').trim();
console.log('开始搜索bilibili音频:', searchQuery);
const url = await searchAndGetBilibiliAudioUrl(searchQuery);
return {
data: {
code: 200,
message: 'success',
data: { url }
}
};
};
/**
* 从GD音乐台获取音频URL
* @param id 歌曲ID
* @param data 歌曲数据
* @returns 解析结果失败时返回null
*/
const getGDMusicAudio = async (id: number, data: SongResult) => {
try {
const gdResult = await parseFromGDMusic(id, data, '999');
if (gdResult) {
return gdResult;
}
} catch (error) {
console.error('GD音乐台解析失败:', error);
}
return null;
};
/**
* 使用unblockMusic解析音频URL
* @param id 歌曲ID
* @param data 歌曲数据
* @param sources 音源列表
* @returns 解析结果
*/
const getUnblockMusicAudio = (id: number, data: SongResult, sources: any[]) => {
const filteredSources = sources.filter(source => source !== 'gdmusic');
console.log(`使用unblockMusic解析音源:`, filteredSources);
return window.api.unblockMusic(id, cloneDeep(data), cloneDeep(filteredSources));
};
/**
* 获取解析后的音乐URL
* @param id 歌曲ID
* @param data 歌曲数据
* @returns 解析结果
*/
export const getParsingMusicUrl = async (id: number, data: SongResult) => {
const settingStore = useSettingsStore();
@@ -90,65 +150,51 @@ export const getParsingMusicUrl = async (id: number, data: SongResult) => {
return Promise.resolve({ data: { code: 404, message: '音乐解析功能已禁用' } });
}
// 获取音源设置,优先使用歌曲自定义音源
// 1. 确定使用的音源列表(自定义或全局)
const songId = String(id);
const savedSource = localStorage.getItem(`song_source_${songId}`);
let enabledSources: any[] = [];
const savedSourceStr = localStorage.getItem(`song_source_${songId}`);
let musicSources: 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)
}
}
}
try {
if (savedSourceStr) {
// 使用自定义音源
musicSources = JSON.parse(savedSourceStr);
console.log(`使用歌曲 ${id} 自定义音源:`, musicSources);
} else {
// 使用全局音源设置
musicSources = settingStore.setData.enabledMusicSources || [];
console.log(`使用全局音源设置:`, musicSources);
if (isElectron && musicSources.length > 0) {
return getUnblockMusicAudio(id, data, musicSources);
}
} catch (e) {
console.error('e',e)
console.error('解析自定义音源失败, 使用全局设置', e);
enabledSources = settingStore.setData.enabledMusicSources || [];
}
} else {
// 没有自定义音源,使用全局音源设置
enabledSources = settingStore.setData.enabledMusicSources || [];
} catch (e) {
console.error('解析音源设置失败,使用全局设置', e);
musicSources = settingStore.setData.enabledMusicSources || [];
}
// 检查是否选择了GD音乐台解析
// 2. 按优先级解析
if (enabledSources.includes('gdmusic')) {
// 获取音质设置并转换为GD音乐台格式
try {
const gdResult = await parseFromGDMusic(id, data, '999');
if (gdResult) {
return gdResult;
}
} catch (error) {
console.error('GD音乐台解析失败:', error);
}
console.log('GD音乐台所有音源均解析失败尝试使用unblockMusic');
// 2.1 Bilibili解析(优先级最高)
if (musicSources.includes('bilibili')) {
return await getBilibiliAudio(data);
}
// 如果GD音乐台解析失败或者未启用尝试使用unblockMusic
if (isElectron) {
const filteredSources = enabledSources.filter(source => source !== 'gdmusic');
return window.api.unblockMusic(id, cloneDeep(data), cloneDeep(filteredSources));
// 2.2 GD音乐台解析
if (musicSources.includes('gdmusic')) {
const gdResult = await getGDMusicAudio(id, data);
if (gdResult) return gdResult;
// GD解析失败继续下一步
console.log('GD音乐台解析失败尝试使用其他音源');
}
console.log('musicSources',musicSources)
// 2.3 使用unblockMusic解析其他音源
if (isElectron && musicSources.length > 0) {
return getUnblockMusicAudio(id, data, musicSources);
}
// 3. 后备方案使用API请求
console.log('无可用音源或不在Electron环境中使用API请求');
return requestMusic.get<any>('/music', { params: { id } });
};

View File

@@ -1,75 +0,0 @@
import { isElectron } from '@/utils';
import { useUserStore } from '../store/modules/user';
/**
* 获取用户ID
* @returns 用户ID或null
*/
function getUserId(): string | null {
const userStore = useUserStore();
return userStore.user?.userId?.toString() || null;
}
/**
* 记录页面访问
* @param page 页面名称或路径
*/
export async function recordVisit(page: string): Promise<void> {
if (!isElectron) return;
try {
const userId = getUserId();
await window.api.invoke('record-visit', page, userId);
console.log(`页面访问已记录: ${page}`);
} catch (error) {
console.error('记录页面访问失败:', error);
}
}
/**
* 记录歌曲播放
* @param songId 歌曲ID
* @param songName 歌曲名称
* @param artistName 艺术家名称
* @param duration 时长(秒)
* @param completedPlay 是否完整播放
*/
export async function recordPlay(
songId: string | number,
songName: string,
artistName: string,
duration: number = 0,
completedPlay: boolean = false
): Promise<void> {
if (!isElectron) return;
try {
const userId = getUserId();
await window.api.invoke('record-play', {
userId,
songId,
songName,
artistName,
duration,
completedPlay
});
console.log(`歌曲播放已记录: ${songName}`);
} catch (error) {
console.error('记录歌曲播放失败:', error);
}
}
/**
* 获取统计摘要
* @returns 统计数据摘要
*/
export async function getStatsSummary(): Promise<any> {
if (!isElectron) return null;
try {
return await window.api.invoke('get-stats-summary');
} catch (error) {
console.error('获取统计摘要失败:', error);
return null;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
src/renderer/assets/gzh.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 43 KiB

View File

@@ -0,0 +1,411 @@
<template>
<div class="traffic-warning-trigger">
<n-button circle secondary class="mac-style-button" @click="showDrawer = true">
<template #icon>
<i class="iconfont ri-information-line"></i>
</template>
</n-button>
</div>
<n-drawer
v-model:show="showDrawer"
:width="isMobile ? '100%' : '800px'"
:height="isMobile ? '100%' : '100%'"
:placement="isMobile ? 'bottom' : 'right'"
@after-leave="handleDrawerClose"
:z-index="999999999"
:mask-closable="false"
>
<n-drawer-content
title="欢迎使用 AlgerMusicPlayer"
closable
:native-scrollbar="false"
class="mac-style-drawer"
>
<div class="drawer-container">
<div class="warning-content">
<div class="warning-message">
<h3>获取完整体验</h3>
<p class="platform-support">
<span>
<i class="ri-window-line mr-1"></i>Windows 10+
</span>
<span>
<i class="ri-apple-line mr-1"></i>macOS
</span>
<span>
<i class="ri-ubuntu-line mr-1"></i>Linux
</span>
<span>
<i class="ri-android-line mr-1"></i>Android
</span>
</p>
<p class="description">
下载桌面应用以获得最佳音乐体验包含完整功能与更高音质
目前无iOS版本请使用安卓应用或网页版
</p>
</div>
<div class="action-links">
<a href="https://mp.weixin.qq.com/s/9pr1XQB36gShM_-TG2LBdg" target="_blank" class="doc-link">
<i class="ri-file-text-line mr-1"></i> 查看使用文档
</a>
<a href="http://donate.alger.fun/download" target="_blank" class="download-link">
<i class="ri-download-2-line mr-1"></i> 立即下载
</a>
</div>
<div class="qrcode-section">
<img class="qrcode" src="@/assets/gzh.png" alt="公众号" />
<p>关注公众号获取最新版本与更新信息</p>
</div>
<div class="support-section">
<h4>支持项目</h4>
<p class="support-desc">您的支持是我们持续改进的动力</p>
<div class="payment-options">
<div class="payment-option">
<div class="payment-icon wechat">
<img src="@/assets/wechat.png" alt="微信支付" />
</div>
<span>微信支付</span>
</div>
<div class="payment-option">
<div class="payment-icon alipay">
<img src="@/assets/alipay.png" alt="支付宝" />
</div>
<span>支付宝</span>
</div>
</div>
</div>
<div class="drawer-actions">
<n-button secondary class="action-button" @click="markAsDonated">已支持</n-button>
<n-button type="primary" class="action-button primary" @click="remindLater">稍后提醒</n-button>
</div>
</div>
</div>
</n-drawer-content>
</n-drawer>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { isMobile } from '@/utils';
// 控制抽屉显示状态
const showDrawer = ref(false);
// 处理抽屉关闭后的操作
const handleDrawerClose = () => {
// 抽屉关闭后的逻辑
};
// 一天后提醒
const remindLater = () => {
const now = new Date();
localStorage.setItem('trafficDonated4RemindLater', now.toISOString());
showDrawer.value = false;
};
// 标记为已捐赠(永久不再提示)
const markAsDonated = () => {
localStorage.setItem('trafficDonated4Never', '1');
showDrawer.value = false;
};
// 组件挂载时检查是否需要显示
onMounted(() => {
// 优先判断是否永久不再提示
if (localStorage.getItem('trafficDonated4Never')) return;
// 判断一天后提醒
const remindLaterTime = localStorage.getItem('trafficDonated4RemindLater');
if (remindLaterTime) {
const lastRemind = new Date(remindLaterTime);
const now = new Date();
const hoursDiff = (now.getTime() - lastRemind.getTime()) / (1000 * 60 * 60);
if (hoursDiff < 24) return;
}
// 延迟20秒显示
setTimeout(() => {
showDrawer.value = true;
}, 20000);
});
</script>
<style scoped lang="scss">
.traffic-warning-trigger {
display: inline-block;
.mac-style-button {
background-color: rgba(0, 0, 0, 0.05);
color: #333;
transition: all 0.2s ease;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
.mac-style-drawer {
border-radius: 10px 0 0 10px;
overflow: hidden;
position: relative;
}
.drawer-container {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.warning-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.app-icon {
width: 100px;
height: 100px;
margin-bottom: 12px;
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 14px;
}
}
.warning-message {
text-align: center;
max-width: 520px;
h3 {
font-size: 28px;
font-weight: 600;
margin-bottom: 18px;
color: #333;
}
.platform-support {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 16px;
span {
display: flex;
align-items: center;
font-size: 16px;
color: #444;
}
}
.description {
font-size: 16px;
line-height: 1.6;
color: #444;
margin: 0 auto;
}
}
.action-links {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin: 6px 0;
a {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: 8px;
font-size: 16px;
text-decoration: none;
transition: all 0.2s ease;
&.doc-link {
color: #555;
background-color: rgba(0, 0, 0, 0.05);
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
}
&.download-link {
color: #fff;
background-color: #007aff;
&:hover {
background-color: #0062cc;
}
}
}
}
.qrcode-section {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
.qrcode {
width: 180px;
height: 180px;
border-radius: 10px;
padding: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
background: white;
}
p {
margin-top: 14px;
font-size: 15px;
color: #0062cc;
}
}
.support-section {
width: 100%;
text-align: center;
h4 {
font-size: 22px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.support-desc {
font-size: 15px;
color: #555;
margin-bottom: 20px;
}
}
.payment-options {
display: flex;
justify-content: center;
gap: 100px;
flex-wrap: wrap;
padding-bottom: 100px;
}
.payment-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
.payment-icon {
width: 220px;
height: 220px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
span {
font-size: 15px;
color: #444;
}
}
.drawer-actions {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 30px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: #fff;
z-index: 999999999;
.action-button {
min-width: 110px;
border-radius: 8px;
font-size: 16px;
padding: 8px 16px;
&.primary {
background-color: #007aff;
color: white;
&:hover {
background-color: #0062cc;
}
}
}
}
@media (max-width: 768px) {
.warning-message {
h3 {
font-size: 20px;
}
.platform-support {
gap: 12px;
}
.description {
font-size: 13px;
}
}
.app-icon {
width: 64px;
height: 64px;
}
.qrcode-section {
.qrcode {
width: 140px;
height: 140px;
}
}
.payment-option {
.payment-icon {
width: 190px;
height: 190px;
}
}
.drawer-actions {
flex-wrap: wrap;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: #fff;
z-index: 999999999;
.action-button {
flex: 1 0 auto;
}
}
}
</style>

View File

@@ -5,6 +5,7 @@
placement="right"
@update:show="$emit('update:modelValue', $event)"
:unstable-show-mask="false"
:show-mask="false"
>
<n-drawer-content :title="t('comp.playlistDrawer.title')" class="mac-style-drawer">
<n-scrollbar class="h-full">

View File

@@ -142,7 +142,7 @@ import { IDayRecommend } from '@/type/day_recommend';
import { Playlist } from '@/type/list';
import type { IListDetail } from '@/type/listDetail';
import { SongResult } from '@/type/music';
import type { Artist, IHotSinger } from '@/type/singer';
import type { IHotSinger } from '@/type/singer';
import {
getImgUrl,
isMobile,
@@ -150,7 +150,6 @@ import {
setAnimationDelay,
setBackgroundImg
} from '@/utils';
import { getArtistDetail } from '@/api/artist';
import { navigateToMusicList } from '@/components/common/MusicListNavigator';
const userStore = useUserStore();
@@ -233,20 +232,6 @@ onMounted(async () => {
loadNonUserData();
});
const JayChouId = 6452;
const loadArtistData = async () => {
try {
const { data: artistData }: { data: { data: { artist: Artist } } } = await getArtistDetail(JayChouId);
console.log('artistData', artistData);
if (hotSingerData.value) {
// 将周杰伦数据放在第一位
hotSingerData.value.artists = [artistData.data.artist, ...hotSingerData.value.artists];
}
} catch (error) {
console.error('获取周杰伦数据失败:', error);
}
}
// 提取每日推荐加载逻辑到单独的函数
const loadDayRecommendData = async () => {
@@ -276,7 +261,6 @@ const loadNonUserData = async () => {
const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
hotSingerData.value = singerData;
await loadArtistData();
} catch (error) {
console.error('加载热门歌手数据失败:', error);
}

View File

@@ -68,11 +68,11 @@
</span>
</n-ellipsis>
</div>
<mini-play-bar
<simple-play-bar
v-if="!config.hideMiniPlayBar"
class="mt-4"
:pure-mode-enabled="config.pureModeEnabled"
component
:isDark=" textColors.theme === 'dark'"
/>
</div>
</div>
@@ -96,7 +96,6 @@
@mouseleave="mouseLeaveLayout"
>
<!-- 歌曲信息 -->
<div ref="lrcContainer" class="music-lrc-container">
<div
v-if="config.hideCover"
@@ -153,7 +152,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import LyricSettings from '@/components/lyric/LyricSettings.vue';
import MiniPlayBar from '@/components/player/MiniPlayBar.vue';
import SimplePlayBar from '@/components/player/SimplePlayBar.vue';
import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
import {
artistList,

View File

@@ -343,7 +343,12 @@ const playMusicEvent = async () => {
}
};
const musicFullVisible = ref(false);
const musicFullVisible = computed({
get: () => playerStore.musicFull,
set: (value) => {
playerStore.setMusicFull(value);
}
})
// 设置musicFull
const setMusicFull = () => {

View File

@@ -52,12 +52,21 @@
<div v-if="playMusic.source === 'bilibili'" class="text-red-500 text-sm">
{{ t('player.reparse.bilibiliNotSupported') }}
</div>
<!-- 清除自定义音源 -->
<div class="text-red-500 text-sm flex items-center bg-light-200 dark:bg-dark-200 rounded-lg p-2 cursor-pointer" @click="clearCustomSource">
<div class="flex items-center justify-center w-6 h-6 mr-3 text-lg">
<i class="ri-close-circle-line"></i>
</div>
<div>
{{ t('player.reparse.clear') }}
</div>
</div>
</div>
</n-popover>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from 'naive-ui';
import { playMusic } from '@/hooks/MusicHook';
@@ -76,18 +85,13 @@ 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 isReparse = ref(localStorage.getItem(`song_source_${String(playMusic.value.id)}`) !== 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 }
]);
@@ -102,7 +106,6 @@ 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',
@@ -129,6 +132,13 @@ const initSelectedSources = () => {
}
};
// 清除自定义音源
const clearCustomSource = () => {
localStorage.removeItem(`song_source_${String(playMusic.value.id)}`);
selectedSourcesValue.value = [];
isReparse.value = false;
};
// 直接重新解析当前歌曲
const directReparseMusic = async (source: Platform) => {
if (isReparsing.value || playMusic.value.source === 'bilibili') {

View File

@@ -0,0 +1,509 @@
<template>
<div class="play-bar" :class="{ 'dark-theme': isDarkMode }" ref="playBarRef">
<div class="container">
<!-- 顶部进度条和时间 -->
<div class="top-section">
<!-- 进度条 -->
<div class="progress-bar" @click="handleProgressClick">
<div class="progress-track"></div>
<div class="progress-fill" :style="{ width: `${(nowTime / allTime) * 100}%` }"></div>
</div>
<!-- 时间显示 -->
<div class="time-display">
<span class="current-time">{{ formatTime(nowTime) }}</span>
<span class="total-time">{{ formatTime(allTime) }}</span>
</div>
</div>
<!-- 主控制区域 -->
<div class="controls-section">
<div class="left-controls">
<button class="control-btn small-btn" @click="togglePlayMode">
<i class="iconfont" :class="playModeIcon"></i>
</button>
</div>
<div class="center-controls">
<!-- 上一首 -->
<button class="control-btn" @click="handlePrev">
<i class="iconfont icon-prev"></i>
</button>
<!-- 播放/暂停 -->
<button class="control-btn play-btn" @click="playMusicEvent">
<i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
</button>
<!-- 下一首 -->
<button class="control-btn" @click="handleNext">
<i class="iconfont icon-next"></i>
</button>
</div>
<div class="right-controls">
<!-- 播放列表按钮 -->
<button class="control-btn small-btn" @click="openPlayListDrawer">
<i class="iconfont icon-list"></i>
</button>
</div>
</div>
<!-- 底部控制区域 -->
<div class="bottom-section">
<div class="spacer"></div>
<!-- 音量控制 -->
<div class="volume-control">
<i class="iconfont" :class="getVolumeIcon" @click="mute"></i>
<div class="volume-slider">
<n-slider
v-model:value="volumeSlider"
:step="1"
:tooltip="false"
@wheel.prevent="handleVolumeWheel"
></n-slider>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted, watch } from 'vue';
import { secondToMinute } from '@/utils';
import { allTime, nowTime, playMusic } from '@/hooks/MusicHook';
import { audioService } from '@/services/audioService';
import { usePlayerStore } from '@/store/modules/player';
import { useSettingsStore } from '@/store/modules/settings';
const props = withDefaults(defineProps<{
isDark: boolean;
}>(), {
isDark: false
});
const playerStore = usePlayerStore();
const settingsStore = useSettingsStore();
const playBarRef = ref<HTMLElement | null>(null);
// 播放状态
const play = computed(() => playerStore.isPlay);
// 播放模式
const playMode = computed(() => playerStore.playMode);
const playModeIcon = computed(() => {
switch (playMode.value) {
case 0:
return 'ri-repeat-2-line';
case 1:
return 'ri-repeat-one-line';
case 2:
return 'ri-shuffle-line';
default:
return 'ri-repeat-2-line';
}
});
// 切换播放模式
const togglePlayMode = () => {
playerStore.togglePlayMode();
};
// 音量控制
const audioVolume = ref(
localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
);
const volumeSlider = computed({
get: () => audioVolume.value * 100,
set: (value) => {
localStorage.setItem('volume', (value / 100).toString());
audioService.setVolume(value / 100);
audioVolume.value = value / 100;
}
});
// 音量图标
const getVolumeIcon = computed(() => {
if (audioVolume.value === 0) return 'ri-volume-mute-line';
if (audioVolume.value <= 0.5) return 'ri-volume-down-line';
return 'ri-volume-up-line';
});
// 静音切换
const mute = () => {
if (volumeSlider.value === 0) {
volumeSlider.value = 30;
} else {
volumeSlider.value = 0;
}
};
// 鼠标滚轮调整音量
const handleVolumeWheel = (e: WheelEvent) => {
const delta = e.deltaY < 0 ? 5 : -5;
const newValue = Math.min(Math.max(volumeSlider.value + delta, 0), 100);
volumeSlider.value = newValue;
};
// 播放控制
const handlePrev = () => playerStore.prevPlay();
const handleNext = () => playerStore.nextPlay();
const playMusicEvent = async () => {
try {
await playerStore.setPlay({ ...playMusic.value });
} catch (error) {
console.error('播放出错:', error);
playerStore.nextPlay();
}
};
// 进度条控制
const handleProgressClick = (e: MouseEvent) => {
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
audioService.seek(allTime.value * percent);
nowTime.value = allTime.value * percent;
};
// 格式化时间
const formatTime = (seconds: number) => {
return secondToMinute(seconds);
};
// 打开播放列表抽屉
const openPlayListDrawer = () => {
playerStore.setPlayListDrawerVisible(true);
};
// 深色模式
const isDarkMode = computed(() => settingsStore.theme === 'dark' || props.isDark);
// 主题颜色应用函数
const applyThemeColor = (colorValue: string) => {
if (!colorValue || !playBarRef.value) return;
console.log('应用主题色:', colorValue);
const playBarElement = playBarRef.value;
// 解析RGB值
const rgbMatch = colorValue.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
if (rgbMatch) {
const [_, r, g, b] = rgbMatch.map(Number);
// 计算颜色亮度 (0-255)
// 使用加权平均值公式: 0.299*R + 0.587*G + 0.114*B
const brightness = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
console.log(`主题色亮度: ${brightness}/255`);
// 设置主色
playBarElement.style.setProperty('--fill-color', colorValue);
// 亮度自适应处理
if (brightness > 200) { // 非常亮的颜色
// 深化主色以增加对比度
const darkenedColor = `rgb(${Math.max(0, r - 60)}, ${Math.max(0, g - 60)}, ${Math.max(0, b - 60)})`;
playBarElement.style.setProperty('--fill-color-alt', darkenedColor);
playBarElement.style.setProperty('--fill-color-transparent', `rgba(${r}, ${g}, ${b}, 0.5)`); // 提高透明度
playBarElement.style.setProperty('--text-on-fill', '#000000'); // 亮色背景上用黑色文字
playBarElement.style.setProperty('--high-contrast-color', '#000000'); // 高对比度颜色
playBarElement.classList.add('light-theme-color');
playBarElement.classList.remove('dark-theme-color');
} else if (brightness < 50) { // 非常暗的颜色
// 提亮主色以增加可见性
const lightenedColor = `rgb(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 60)})`;
playBarElement.style.setProperty('--fill-color-alt', lightenedColor);
playBarElement.style.setProperty('--fill-color-transparent', `rgba(${r}, ${g}, ${b}, 0.7)`); // 提高透明度
playBarElement.style.setProperty('--text-on-fill', '#ffffff'); // 暗色背景上用白色文字
playBarElement.style.setProperty('--high-contrast-color', '#ffffff'); // 高对比度颜色
playBarElement.classList.add('dark-theme-color');
playBarElement.classList.remove('light-theme-color');
} else {
// 计算辅助色和高亮色
// 普通亮度颜色,正常处理
playBarElement.style.setProperty('--fill-color-alt', colorValue); // 保持一致
playBarElement.style.setProperty('--fill-color-transparent', `rgba(${r}, ${g}, ${b}, 0.25)`);
// 根据亮度决定文本颜色
const textColor = brightness > 125 ? '#000000' : '#ffffff';
playBarElement.style.setProperty('--text-on-fill', textColor);
playBarElement.style.setProperty('--high-contrast-color', textColor);
playBarElement.classList.remove('light-theme-color');
playBarElement.classList.remove('dark-theme-color');
}
// 设置亮色(用于高亮效果)
const lightenedColor = `rgb(${Math.min(255, r + 40)}, ${Math.min(255, g + 40)}, ${Math.min(255, b + 40)})`;
playBarElement.style.setProperty('--fill-color-light', lightenedColor);
} else {
// 无法解析RGB值时的默认设置
playBarElement.style.setProperty('--fill-color', colorValue);
playBarElement.style.setProperty('--fill-color-transparent', `${colorValue}40`);
playBarElement.style.setProperty('--fill-color-light', `${colorValue}80`);
playBarElement.style.setProperty('--fill-color-alt', colorValue);
playBarElement.style.setProperty('--text-on-fill', '#ffffff');
playBarElement.style.setProperty('--high-contrast-color', '#ffffff');
}
};
// 监听主题色变化
watch(() => playerStore.playMusic.primaryColor, (newVal) => {
if (newVal) {
applyThemeColor(newVal);
}
});
onMounted(() => {
if (playerStore.playMusic?.primaryColor) {
setTimeout(() => {
applyThemeColor(playerStore.playMusic.primaryColor as string);
}, 50);
}
});
</script>
<style lang="scss" scoped>
.play-bar {
@apply w-full;
border-radius: 12px;
transition: all 0.3s ease;
/* 默认变量 */
--text-on-fill: #ffffff;
--high-contrast-color: #ffffff;
&.dark-theme {
--text-color: #333333;
--muted-color: rgba(0, 0, 0, 0.6);
--track-color: rgba(0, 0, 0, 0.2);
--track-color-hover: rgba(0, 0, 0, 0.4);
--fill-color: #1ed760;
--fill-color-alt: #1ed760;
--fill-color-transparent: rgba(30, 215, 96, 0.25);
--fill-color-light: rgba(30, 215, 96, 0.5);
--button-bg: rgba(0, 0, 0, 0.1);
--button-hover: rgba(0, 0, 0, 0.2);
}
&:not(.dark-theme) {
--text-color: #f1f1f1;
--muted-color: rgba(255, 255, 255, 0.6);
--track-color: rgba(255, 255, 255, 0.1);
--track-color-hover: rgba(255, 255, 255, 0.2);
--fill-color: #73e49a;
--fill-color-alt: #73e49a;
--fill-color-transparent: rgba(115, 228, 154, 0.25);
--fill-color-light: rgba(115, 228, 154, 0.5);
--button-bg: rgba(255, 255, 255, 0.05);
--button-hover: rgba(255, 255, 255, 0.1);
}
/* 极亮主题色适配 */
&.light-theme-color {
.progress-fill {
box-shadow: 0 0 8px var(--fill-color-transparent), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.control-btn.play-btn {
box-shadow: 0 3px 8px var(--fill-color-transparent), 0 1px 2px rgba(0, 0, 0, 0.3);
color: var(--text-on-fill);
}
.volume-control .iconfont:hover {
color: var(--fill-color-alt);
}
}
/* 极暗主题色适配 */
&.dark-theme-color {
.progress-fill {
box-shadow: 0 0 10px var(--fill-color-transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.control-btn.play-btn {
box-shadow: 0 3px 12px var(--fill-color-transparent), 0 0 0 1px rgba(255, 255, 255, 0.2);
.iconfont {
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
}
.volume-control .iconfont:hover {
color: var(--fill-color-light);
}
}
}
.container {
@apply flex flex-col;
}
.top-section {
@apply mb-3;
.progress-bar {
@apply relative cursor-pointer h-2 mb-2 w-full;
.progress-track {
@apply absolute inset-0 rounded-full transition-all duration-150;
background-color: var(--track-color);
}
.progress-fill {
@apply absolute top-0 left-0 h-full rounded-full transition-all duration-150;
background: linear-gradient(90deg, var(--fill-color), var(--fill-color-light));
box-shadow: 0 0 8px var(--fill-color-transparent);
}
&:hover {
.progress-track{
background-color: var(--track-color-hover);
}
.progress-track, .progress-fill {
@apply h-full;
}
.progress-fill {
box-shadow: 0 0 12px var(--fill-color-transparent);
}
}
}
.time-display {
@apply flex justify-between text-base;
color: var(--muted-color);
.time-separator {
@apply mx-1;
}
.current-time {
opacity: 0.8;
transition: opacity 0.3s ease;
&:hover {
opacity: 1;
}
}
}
}
.controls-section {
@apply flex items-center justify-between mb-4;
.left-controls, .right-controls {
@apply flex items-center;
}
.center-controls {
@apply flex items-center justify-center space-x-6;
}
}
.bottom-section {
@apply flex items-center justify-between mt-2;
}
.control-btn {
@apply flex items-center justify-center rounded-full outline-none border-0 transition-all duration-200;
color: var(--text-color);
background: transparent;
width: 32px;
height: 32px;
cursor: pointer;
&:hover {
background-color: var(--button-bg);
transform: scale(1.05);
}
&:active {
background-color: var(--button-hover);
transform: scale(0.95);
}
&.play-btn {
background: linear-gradient(145deg, var(--fill-color), var(--fill-color-alt));
color: var(--text-on-fill);
width: 46px;
height: 46px;
box-shadow: 0 3px 8px var(--fill-color-transparent);
&:hover {
box-shadow: 0 4px 12px var(--fill-color-transparent);
}
.iconfont {
font-size: 1.25rem;
}
}
&.small-btn {
@apply text-2xl;
width: 28px;
height: 28px;
}
.iconfont {
@apply text-2xl;
}
}
.volume-control {
@apply flex items-center space-x-2;
color: var(--text-color);
.iconfont {
@apply cursor-pointer text-base;
transition: transform 0.2s ease, color 0.2s ease;
&:hover {
transform: scale(1.1);
color: var(--fill-color);
}
}
.volume-slider {
@apply w-24;
:deep(.n-slider) {
--n-rail-height: 3px;
--n-fill-color: var(--fill-color);
--n-rail-color: var(--track-color);
--n-handle-size: 12px;
.n-slider-rail {
@apply rounded-full;
}
.n-slider-rail__fill {
background: linear-gradient(90deg, var(--fill-color), var(--fill-color-light));
box-shadow: 0 0 6px var(--fill-color-transparent);
}
.n-slider-handle {
@apply opacity-0 transition-opacity duration-200;
background: white;
box-shadow: 0 0 6px var(--fill-color-transparent), 0 0 0 1px var(--high-contrast-color);
border: 2px solid var(--fill-color);
}
&:hover .n-slider-handle {
@apply opacity-100;
}
}
}
}
.spacer {
flex: 1;
}
.like-active {
color: var(--fill-color);
text-shadow: 0 0 8px var(--fill-color-transparent);
}
</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']
}
});
@@ -67,11 +67,10 @@ const visible = ref(props.show);
const selectedSources = ref<Platform[]>(props.sources);
const musicSourceOptions = ref([
{ label: 'MiGu音乐', value: 'migu' },
{ label: '酷狗音乐', value: 'kugou' },
{ label: 'MG', value: 'migu' },
{ label: 'KG', value: 'kugou' },
{ label: 'pyncmd', value: 'pyncmd' },
{ label: '酷我音乐', value: 'kuwo' },
{ label: 'Bilibili音乐', value: 'bilibili' },
{ label: 'Bilibili', value: 'bilibili' },
{ label: 'GD音乐台', value: 'gdmusic' }
]);
@@ -102,7 +101,7 @@ watch(
const handleConfirm = () => {
// 确保至少选择一个音源
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili'];
const valuesToEmit = selectedSources.value.length > 0
? [...new Set(selectedSources.value)]
: defaultPlatforms;

View File

@@ -1,7 +1,6 @@
// musicHistoryHooks
import { useLocalStorage } from '@vueuse/core';
import { recordPlay } from '@/api/stats';
import type { SongResult } from '@/type/music';
export const useMusicHistory = () => {
@@ -15,25 +14,6 @@ export const useMusicHistory = () => {
} else {
musicHistory.value.unshift({ ...music, count: 1 });
}
// 记录播放统计
if (music?.id && music?.name) {
// 获取艺术家名称
let artistName = '未知艺术家';
if (music.ar) {
artistName = music.ar.map((artist) => artist.name).join('/');
} else if (music.song?.artists && music.song.artists.length > 0) {
artistName = music.song.artists.map((artist) => artist.name).join('/');
} else if (music.artists) {
artistName = music.artists.map((artist) => artist.name).join('/');
}
// 发送播放统计
recordPlay(music.id, music.name, artistName).catch((error) =>
console.error('记录播放统计失败:', error)
);
}
};
const delMusic = (music: SongResult) => {

View File

@@ -125,6 +125,8 @@ const currentSongId = ref<number | undefined>();
const openPlaylistDrawer = (songId: number, isOpen: boolean = true) => {
currentSongId.value = songId;
showPlaylistDrawer.value = isOpen;
playerStore.setMusicFull(false);
playerStore.setPlayListDrawerVisible(!isOpen);
};
// 将方法提供给全局

View File

@@ -1,12 +1,17 @@
import { createRouter, createWebHashHistory } from 'vue-router';
import { recordVisit } from '@/api/stats';
import { useUserStore } from '../store/modules/user';
import AppLayout from '@/layout/AppLayout.vue';
import MiniLayout from '@/layout/MiniLayout.vue';
import homeRouter from '@/router/home';
import otherRouter from '@/router/other';
import { useSettingsStore } from '@/store/modules/settings';
function getUserId(): string | null {
const userStore = useUserStore();
return userStore.user?.userId?.toString() || null;
}
// 由于 Vue Router 守卫在创建前不能直接使用组合式 API
// 我们创建一个辅助函数来获取 store 实例
let _settingsStore: ReturnType<typeof useSettingsStore> | null = null;
@@ -76,7 +81,8 @@ router.afterEach((to) => {
const pageName = to.name?.toString() || to.path;
// 使用setTimeout避免阻塞路由导航
setTimeout(() => {
recordVisit(pageName).catch((error) => console.error('记录页面访问失败:', error));
const userId = getUserId();
console.log('pageName', pageName, userId);
}, 100);
});

View File

@@ -802,6 +802,8 @@ class AudioService {
// 立即设置音量
this.gainNode.gain.cancelScheduledValues(this.context!.currentTime);
this.gainNode.gain.setValueAtTime(linearVolume, this.context!.currentTime);
} else {
this.currentSound?.volume(linearVolume);
}
// 保存值
@@ -809,6 +811,40 @@ class AudioService {
console.log('Volume applied (linear):', linearVolume);
}
// 添加方法检查当前音频是否在加载状态
isLoading(): boolean {
if (!this.currentSound) return false;
// 检查Howl对象的内部状态
// 如果状态为1表示已经加载但未完成状态为2表示正在加载
const state = (this.currentSound as any)._state;
// 如果操作锁激活也认为是加载状态
return this.operationLock || (state === 'loading' || state === 1);
}
// 检查音频是否真正在播放
isActuallyPlaying(): boolean {
if (!this.currentSound) return false;
try {
// 综合判断:
// 1. Howler API是否报告正在播放
// 2. 是否不在加载状态
// 3. 确保音频上下文状态正常
const isPlaying = this.currentSound.playing();
const isLoading = this.isLoading();
const contextRunning = Howler.ctx && Howler.ctx.state === 'running';
console.log(`实际播放状态检查: playing=${isPlaying}, loading=${isLoading}, contextRunning=${contextRunning}`);
// 只有在三个条件都满足时才认为是真正在播放
return isPlaying && !isLoading && contextRunning;
} catch (error) {
console.error('检查播放状态出错:', error);
return false;
}
}
}
export const audioService = new AudioService();

View File

@@ -1,6 +1,7 @@
import { cloneDeep } from 'lodash';
import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
import { useThrottleFn } from '@vueuse/core';
import i18n from '@/../i18n/renderer';
import { getBilibiliAudioUrl } from '@/api/bilibili';
@@ -556,16 +557,95 @@ export const usePlayerStore = defineStore('player', () => {
}
};
// 添加用户意图跟踪变量
const userPlayIntent = ref(true);
let checkPlayTime: NodeJS.Timeout | null = null;
// 添加独立的播放状态检测函数
const checkPlaybackState = (song: SongResult, timeout: number = 4000) => {
if(checkPlayTime) {
clearTimeout(checkPlayTime);
}
const sound = audioService.getCurrentSound();
if (!sound) return;
// 使用audioService的事件系统监听播放状态
// 添加一次性播放事件监听器
const onPlayHandler = () => {
// 播放事件触发,表示成功播放
console.log('播放事件触发,歌曲成功开始播放');
audioService.off('play', onPlayHandler);
audioService.off('playerror', onPlayErrorHandler);
};
// 添加一次性播放错误事件监听器
const onPlayErrorHandler = async () => {
console.log('播放错误事件触发尝试重新获取URL');
audioService.off('play', onPlayHandler);
audioService.off('playerror', onPlayErrorHandler);
// 只有用户仍然希望播放时才重试
if (userPlayIntent.value && play.value) {
// 重置URL并重新播放
playMusic.value.playMusicUrl = undefined;
// 保持播放状态但强制重新获取URL
const refreshedSong = { ...song, isFirstPlay: true };
await handlePlayMusic(refreshedSong, true);
}
};
// 注册事件监听器
audioService.on('play', onPlayHandler);
audioService.on('playerror', onPlayErrorHandler);
// 额外的安全检查:如果指定时间后仍未播放也未触发错误,且用户仍希望播放
checkPlayTime = setTimeout(() => {
// 使用更准确的方法检查是否真正在播放
if (!audioService.isActuallyPlaying() && userPlayIntent.value && play.value) {
console.log(`${timeout}ms后歌曲未真正播放且用户仍希望播放尝试重新获取URL`);
// 移除事件监听器
audioService.off('play', onPlayHandler);
audioService.off('playerror', onPlayErrorHandler);
// 重置URL并重新播放
playMusic.value.playMusicUrl = undefined;
// 保持播放状态强制重新获取URL
(async () => {
const refreshedSong = { ...song, isFirstPlay: true };
await handlePlayMusic(refreshedSong, true);
})();
}
}, timeout);
};
const setPlay = async (song: SongResult) => {
try {
// 如果是当前正在播放的音乐,则切换播放/暂停状态
if (playMusic.value.id === song.id && playMusic.value.playMusicUrl === song.playMusicUrl && !song.isFirstPlay) {
if (play.value) {
// 检查URL是否已过期
if (song.expiredAt && song.expiredAt < Date.now()) {
console.info(`歌曲URL已过期重新获取: ${song.name}`);
song.playMusicUrl = undefined;
// 重置过期时间,以便重新获取
song.expiredAt = undefined;
}
// 如果是当前正在播放的音乐,则切换播放/暂停状态
if (playMusic.value.id === song.id && playMusic.value.playMusicUrl === song.playMusicUrl && !song.isFirstPlay) {
if (play.value) {
setPlayMusic(false);
audioService.getCurrentSound()?.pause();
// 设置用户意图为暂停
userPlayIntent.value = false;
} else {
setPlayMusic(true);
audioService.getCurrentSound()?.play();
// 设置用户意图为播放
userPlayIntent.value = true;
const sound = audioService.getCurrentSound();
if (sound) {
sound.play();
// 使用独立的播放状态检测函数
checkPlaybackState(playMusic.value);
}
}
return;
}
@@ -600,10 +680,14 @@ export const usePlayerStore = defineStore('player', () => {
const setPlayMusic = async (value: boolean | SongResult) => {
if (typeof value === 'boolean') {
setIsPlay(value);
// 记录用户的播放意图
userPlayIntent.value = value;
} else {
await handlePlayMusic(value);
play.value = true;
isPlay.value = true;
// 设置为播放意图
userPlayIntent.value = true;
localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
}
@@ -803,8 +887,7 @@ export const usePlayerStore = defineStore('player', () => {
}
};
// 修改nextPlay方法改进播放逻辑
const nextPlay = async () => {
const _nextPlay = async () => {
try {
@@ -927,9 +1010,10 @@ export const usePlayerStore = defineStore('player', () => {
}
};
// 修改 prevPlay 方法,使用与 nextPlay 相似的逻辑改进
const prevPlay = async () => {
// 节流
const nextPlay = useThrottleFn(_nextPlay, 500);
const _prevPlay = async () => {
try {
@@ -1010,6 +1094,9 @@ export const usePlayerStore = defineStore('player', () => {
}
};
// 节流
const prevPlay = useThrottleFn(_prevPlay, 500);
const togglePlayMode = () => {
playMode.value = (playMode.value + 1) % 3;
localStorage.setItem('playMode', JSON.stringify(playMode.value));
@@ -1185,6 +1272,12 @@ export const usePlayerStore = defineStore('player', () => {
// 播放新音频,传递是否应该播放的状态
console.log('调用audioService.play播放状态:', shouldPlay);
const newSound = await audioService.play(playMusicUrl.value, playMusic.value, shouldPlay, initialPosition || 0);
// 添加播放状态检测(仅当需要播放时)
if (shouldPlay) {
checkPlaybackState(playMusic.value);
}
// 发布音频就绪事件,让 MusicHook.ts 来处理设置监听器
window.dispatchEvent(new CustomEvent('audio-ready', { detail: { sound: newSound, shouldPlay } }));
@@ -1215,15 +1308,18 @@ export const usePlayerStore = defineStore('player', () => {
// 延迟较长时间,确保锁已完全释放
setTimeout(() => {
// 直接重试当前歌曲,而不是切换到下一首
playAudio().catch(e => {
console.error('重试播放失败,切换到下一首:', e);
// 只有再次失败切换到下一首
if (playList.value.length > 1) {
nextPlay();
}
});
// 如果用户仍希望播放
if (userPlayIntent.value && play.value) {
// 直接重试当前歌曲,而不是切换到下一首
playAudio().catch(e => {
console.error('重试播放失败切换到下一首:', e);
// 只有再次失败才切换到下一首
if (playList.value.length > 1) {
nextPlay();
}
});
}
}, 1000);
} else {
// 其他错误,切换到下一首
@@ -1253,7 +1349,7 @@ export const usePlayerStore = defineStore('player', () => {
return false;
}
// 保存用户选择的音源
// 保存用户选择的音源作为数组传递确保unblockMusic可以使用
const songId = String(currentSong.id);
localStorage.setItem(`song_source_${songId}`, JSON.stringify([sourcePlatform]));
@@ -1267,11 +1363,17 @@ export const usePlayerStore = defineStore('player', () => {
const numericId = typeof currentSong.id === 'string'
? parseInt(currentSong.id, 10)
: currentSong.id;
console.log(`使用音源 ${sourcePlatform} 重新解析歌曲 ${numericId}`);
const res = await getParsingMusicUrl(numericId, cloneDeep(currentSong));
// 克隆一份歌曲数据,防止修改原始数据
const songData = cloneDeep(currentSong);
const res = await getParsingMusicUrl(numericId, songData);
if (res && res.data && res.data.data && res.data.data.url) {
// 更新URL
const newUrl = res.data.data.url;
console.log(`解析成功获取新URL: ${newUrl.substring(0, 50)}...`);
// 使用新URL更新播放
const updatedMusic = {
@@ -1286,6 +1388,7 @@ export const usePlayerStore = defineStore('player', () => {
return true;
} else {
console.warn(`使用音源 ${sourcePlatform} 解析失败`);
return false;
}
} catch (error) {
@@ -1307,6 +1410,8 @@ export const usePlayerStore = defineStore('player', () => {
currentSound.pause();
}
setPlayMusic(false);
// 明确设置用户意图为暂停
userPlayIntent.value = false;
} catch (error) {
console.error('暂停播放失败:', error);
}
@@ -1345,8 +1450,8 @@ export const usePlayerStore = defineStore('player', () => {
clearPlayAll,
setPlay,
setIsPlay,
nextPlay,
prevPlay,
nextPlay: nextPlay as unknown as typeof _nextPlay,
prevPlay: prevPlay as unknown as typeof _prevPlay,
setPlayMusic,
setMusicFull,
setPlayList,

View File

@@ -248,7 +248,6 @@ export interface IArtists {
export type MusicSourceType =
| 'tencent'
| 'kugou'
| 'kuwo'
| 'migu'
| 'netease'
| 'joox'

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' | 'bilibili' | 'gdmusic';
// 默认平台列表
export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili'];

View File

@@ -67,7 +67,6 @@ export async function handleShortcutAction(action: string) {
const playerStore = usePlayerStore();
const settingsStore = useSettingsStore();
const currentSound = audioService.getCurrentSound();
const showToast = (message: string, iconName: string) => {
if (settingsStore.isMiniMode) {
return;
@@ -95,19 +94,25 @@ export async function handleShortcutAction(action: string) {
showToast(t('player.playBar.next'), 'ri-skip-forward-line');
break;
case 'volumeUp':
if (currentSound && currentSound?.volume() < 1) {
currentSound?.volume((currentSound?.volume() || 0) + 0.1);
// 从localStorage获取当前音量
const currentVolumeUp = parseFloat(localStorage.getItem('volume') || '1');
if (currentVolumeUp < 1) {
const newVolume = Math.min(1, currentVolumeUp + 0.1);
await audioService.setVolume(newVolume);
showToast(
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
'ri-volume-up-line'
);
}
break;
case 'volumeDown':
if (currentSound && currentSound?.volume() > 0) {
currentSound?.volume((currentSound?.volume() || 0) - 0.1);
// 从localStorage获取当前音量
const currentVolumeDown = parseFloat(localStorage.getItem('volume') || '1');
if (currentVolumeDown > 0) {
const newVolume = Math.max(0, currentVolumeDown - 0.1);
await audioService.setVolume(newVolume);
showToast(
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
'ri-volume-down-line'
);
}

View File

@@ -171,7 +171,6 @@
<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>
</div>
@@ -522,7 +521,7 @@ import { type Platform } from '@/types/music';
import config from '../../../../package.json';
// 所有平台默认值
const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'kuwo'];
const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili'];
const platform = window.electron ? window.electron.ipcRenderer.sendSync('get-platform') : 'web';